Connecting Dots 2012-2016 portfolio by Chu, Jia-Li

UI UI

WEB WEB

GRAPHIC GRAPHIC

Connecting dots.

2012 2016 Connecting dots.

2012 2016 PAINTING PAINTING Portfolio

by Chu, Jia

Li

朱家立 Chu, Jia-Li +886 930462701 teasecharliee@gmail.com 1991年 生於臺灣台北 2014年6月 台北市立大學視覺藝術學系 畢業 2014年9月-2016年9月 鴻鼎資訊UI設計師

Born in 1991, Taipei, Taiwan.

Bachelor of Fine Arts, 2014.06 Taipei Municipal University of Education,Taipei, Taiwan UI designer, 2014.09 - 2016.09 Holdingtop, Taipei, Taiwan

APP UI DESIGN

01 太陽能板電視牆 在LED螢幕上即時顯示現行的太陽能板發電功率、發電度數，並等同減少多少 二氧化碳排放量、揭露紫外線數據。隨著紫外線係數的不同，太陽光和太陽能 板上的物品也會產上變化。

3

4

紫外線低量級 背板溫度小於39℃ 小狗散步

紫外線中量級 背板溫度小於39℃ 小狗散步

5

紫外線高量級 背板溫度 40℃-49℃ 冰塊融解

紫外線過量級 背板溫度40℃-49℃ 冰塊融解

紫外線危險級 背板溫度大於50℃ 荷包蛋熟了

6

02 Daily UI

#001 Sign Up 一個浴缸跟肥皂結合的遊戲註冊頁。

7

APP

WEB

#002 Creidit Card Checkout 鋸齒是模擬撕下收據的鋸齒。

8

GRAPHIC

PAINTING

connecting dots

#005 APP Icon 如果app icon走擬真風格會讓人印象深刻，在眾多的扁化icon世界中尤其是。

9

APP

#008 404 page 這個網頁不存在。逃不了的IE。

10

WEB

GRAPHIC

PAINTING

connecting dots

#006 User Profile 左右滑卡片加好友的概念加追流行pantone2016代表色。

11

APP

WEB

GRAPHIC

#007 Settings 設定的開關，想像可切換白天黑夜，月亮和太陽繞著地球轉。

12

PAINTING

connecting dots

#009 Music Player 希望整個介面是簡單輕巧的，像是可收納進口袋的塑膠卡片。

13

APP

WEB

GRAPHIC

Success

Error

Upload complete:)

Something went wrong:’(

OK

Retry

#012 Flash Message (Error/Success) 一個小胖子跳芭蕾的概念。

14

PAINTING

03 弘道老人

居服照護管理系統

居服員居家服務紙本電子化的APP，期望能為在第一線服務的居服員節省紙本 謄寫、輸入電腦的時間，並將資料傳遞至資料庫自動生成報表及檢核報告。

量測項目 切換各項生理量測圖表與內容。

圖表 顯示量測紀錄，以折線圖表示量測值的變化，可左右 滑動過去3個月內的紀錄。

輸入區塊 自動帶入現在日期時間、輸入血壓和脈搏，按下新 增即可新增紀錄，亦可用藍芽來傳遞數值。

功能列 第一顆icon顯示登入者之姓氏，向下展開主要 八大功能：最新消息、行事曆、個案查詢、衛 教資訊、通訊錄、待辦事項、動態時報、檔案 分享。 所有字體大於26pt，方便老花眼者使用。

行事曆 顯示一整個月份的任務及活動，點擊可觀看當 日任務及活動詳情。

15

APP

WEB

GRAPHIC

PAINTING

搜尋 輸入姓名/個案編號/身分證字號，可 即時搜尋個案。

篩選器 使用篩選器，縮小範圍更精準快速找 出個案。

列表 在第一層列表標示重點資訊、負責照 顧服務員及其督導。

待辦事項 待辦事項設定，進行待辦事項新增。

提醒設定 開啟/關閉提醒。

提醒時間 使用picker選擇時間。

16

connecting dots

使用居家照顧服務系統加快服務效率、資 專為家訪作業設計的操作流程，讓居服員

APP

料上雲端。 快速上手使用！

WEB

GRAPHIC

PAINTING

04 EPSON手環APP 根據Epson的APP重新設計視覺風格而來，需搭配Epson手環紀錄卡路里消 耗、脈搏、步數、睡眠時間。

主頁-即時心律

紀錄-卡路里

即時心律 Epson手環以藍芽傳遞 顯示即時心律，並顯示 燃脂程度，後面的漣漪 隨心率加快而加快。

卡路里 根據進食＆運動項目的 輸入，顯示卡路里消長 比。 脈搏+GPS

紀錄-步數

步數 記錄每日步數，可切換 日、週、月。

活動紀錄 心率結合GPS紀錄心跳 值。

19

05 糖尿病照護APP

APP

WEB

GRAPHIC

PAINTING

糖尿病照護APP，幫助糖尿病患者紀錄血糖、飲食、運動等項目，自身健康管 理的APP。並可與營養師視訊，進行健康諮詢。

20

06 中國信託

預處理

模擬紙本存款單、匯款單等。設計採擬物風格，參考ATM機台的實體介面， 希望不熟3C產品的長輩也能輕易找到按鈕在哪、輕易操作。

21

APP

07 HAHAHA HOCKEY

WEB

GRAPHIC

PAINTING

一款虛擬實境(AR)手機遊戲。開啟相機後，可看見曲棍球出現在螢幕中，鏡 頭可感應移動的手指作為曲棍球的球桿，在鏡頭下擊出曲棍球比賽。

22

08 智慧社區照護APP 長期照護類APP，旨在幫助社工、志工方便查詢、攜帶個案資料，並方便記錄 社區據點服務、日照中心服務項目，讓紙本資料電子化、方便統計分析資料。 對於目標使用者而言，快速產出評鑑資料、減少人工謄寫的時間。 提案版-phone

23

APP

正式版-pad/tablet

24

WEB

GRAPHIC

PAINTING

09 危難急救地圖 參加2015 臺大黑客松製作的最小可行性產品(MVP)，旨在發生災難時，提供線上平 台，以地圖模式提供幫助，使用社群的力量，去標示災難地點和需求資源。 （The team members include i-liszt, HCYtaxi, asnif24, and charliee0201(github)） http://i-liszt.github.io/Emergency-Map/

篩選器 把可能的需求進行 簡單的分類

詳情 點選大頭針可觀看詳 情。

大頭針 標示出該項目所在 位置。

繪製工具 可繪製點、圓形半徑、 不規則多邊形、路徑。

設施圖層 可找尋相關設施，或觀 看不同地理圖。

25

APP

10 APP ICON

WEB

GRAPHIC

PAINTING

畫APP ICON是一件很有趣的事，因為不是logo，所以不一定要簡約。在iOS的圓角 限制下，可以做出各種有趣的嘗試。

26

11 口袋診所 口袋診所是一套使用Corona SDK開發雙平台APP的產品開發系統。把功能、介面模組化 後，藉由json標示xy座標、rgb色碼，讓設計師在框架下自由調整版型。藉由功能介面的 模組化，讓APP開發更迅速。

27

APP

28

WEB

GRAPHIC

PAINTING

WEB UI DESIGN

12 風格版型確認書 口袋診所APP建置的需求調查。 為了讓所在地區較遠的客戶也能有效填寫需求而設計的線上填寫平台。

STEP1 填寫基本資料

起始畫面

31

APP

STEP2 選擇版型

32

WEB

GRAPHIC

PAINTING

connecting dots

STEP3 選擇功能

STEP4 選擇視覺風格

33

APP

STEP5 提供內容

34

WEB

GRAPHIC

PAINTING

connecting dots

STEP6 提供素材

35

APP

STEP7 完成

36

WEB

GRAPHIC

PAINTING

13 華人健康網

文章分享

與華人健康網合作的APP，衍生出來的文章分享網頁。在網頁置入華人APP 的下載QR-code與口袋診所的廣告。 電腦版

37

APP

手機版

38

WEB

GRAPHIC

PAINTING

GRAPHIC DESIGN

14 傾城之戀 傾城之戀封面設計。 張愛玲的故事不脫女子、婚姻還有戰爭，於是用龍鳳掛做底，作為上個世紀對女子的聯想 與記憶。

41

APP

WEB

GRAPHIC

PAINTING

15 龜裂 個展的酷卡，大四主修水彩、油畫，在學生生涯的最後辦了個展，主題來自某天逛部落格 的slogan：在裂縫裡，有出口得以想像，有自由得以偷窺。

42

connecting dots

16 民歌時代 問了老爸他們時代的民歌歌手，拿著相機跑去阿媽家，拍阿媽家的吉他和那扇舊舊的門。

43

APP

WEB

GRAPHIC

PAINTING

17 那些年我們天天看的卡通 小時候是電視兒童，可以一整天盯著電視看，超愛看cartoon network，幻想如果cartoon network來台灣辦展覽，海報該長什麼樣子。

44

connecting dots

18 爭鮮 爭鮮LOGO投稿，靈感來自葛飾北齋的「神奈川衝浪裏」，左上角是高級食材鮪魚，橘 色是生魚片的顏色。

45

APP

WEB

鴻

鼎

資

訊

鴻

鼎

資

訊

19 鴻鼎資訊 鴻鼎資訊的LOGO試做，試製成美式可口可樂的風格。

46

GRAPHIC

PAINTING

PAINTING

20 預兆

1K 水彩 2013

很多事是當時你不會想到，事後卻發現早就有徵兆了。」－麥人杰「期限」。 用布的織紋比喻生活的循序漸進，而在布的底下是「冥冥」。在世界的表象下、在冥冥之 中，有什麼在運作，而我們不得而知，但它會默默的像你顯現，就像是布裂開、從底層透

49

APP

WEB

GRAPHIC

PAINTING

露出來，你還不知道那是什麼，你會忘記那個不對勁，但它已向你預告，某些事情即將發 生。

50

connecting dots

21 世界是隱喻

40F 40F 油畫 2013

如果有一天，你看見什麼，你也會在另一件事上看見它，才發現這世界早跟你預告，這就 是世界的隱喻。

51

APP

52

WEB

GRAPHIC

PAINTING

22 Switch of seeing

Double 1K 水彩 2014

Switch，名詞：開關。動詞：轉換。以「媒體亂象」為出發點，探討媒體以特定角度切 入新聞，給予當事人特定角色的現象。

53

54

Connecting Dots 2012-2016 portfolio by Chu, Jia-Li

朱家立

Chu, Jia-Li

+886 930462701 teasecharliee@gmail.com -

The dots will connect down the road will give you the confidence to follow your heart.