2016-2018
Portfolio by Chu,Jia-Li
UI & Graphic Design
朱家立 Chu, Jia-Li +886 930462701 teasecharliee@gmail.com 1991年 生於臺灣台北 2013年6月 台北市立大學視覺藝術學系 畢業 2013年9月-2016年9月 鴻鼎資訊UI設計師 2016年11月-2018年3月 91APP UI設計師
Born in 1991, Taipei, Taiwan. - Bachelor of Fine Arts, 2013.06 Taipei Municipal University of Education,Taipei, Taiwan - UI designer, 2013.09 - 2016.09 Holdingtop, Taipei, Taiwan - UI designer, 2016.11 - 2018.03 91APP, Taipei, Taiwan
表格優化 Before
After 2
3 5
4
6
背景 「商品頁查詢」是客戶最常使用的功能之一，在 表格上資料的取捨必須和需求單位溝通。 在不更動架構的前提下，希望能最小幅度改善現 有議題，進行表格優化並建立表格Guideline
議題 • 資料內容多，表格過高滑至中段時會不知道對 應標題為何 • 內容過高時，scroll bar只存於表格最上/下方， 滑至表格中段時，無法左右滑動 • 因表格過寬超過螢幕時，User不知最後方有btn 固定
1
可操作（編輯、複製、刪除） • User不知道超鏈結藍字可點
設計 滑動範圍
1 表格頭固定，向下滑動可對應內容、scroll bar固定上方可左右滑動
2 匯出btn和下方表格群組化 3 操作btn前移，不需向右滑動即可操作 4 超連結文字提高彩度，與一般文字做出差別 5 開關圖示化，快速辨識商品頁狀態 6 數值靠右對齊，方便閱讀
Facebook商店
背景 Facebook對大部分店家來說是最大的人流 來源，整合勢在必行。和Facebook進行資 料串接，在一個後台建立商品即可同步資 料至官網、APP及Facebook，節省三平台 都要上架的人力、增加商品曝光率、確保 資料一致。依循現有規範及元件進行排版 設計。 UX：KK UI：Charlie
目的 → 增加商品曝光率 → 導流Facbook人群至官網 → 一個後台上架至多平台，節省人力
Facebook商店
初次設定入口
STEP 1
STE
1
STEP 2
第二家店設定入口
STEP 1.2
STE
STEP 3
STEP 2
1
對於新功能設定，先有介紹說明，準備好必要資料即可進行設定。
2 在儲存設定前，提供必要說明文字，再進行儲存設定 3 Facebook審核的狀態說明 4 提供刪除設定的入口
EP 2
2 STEP 3
EP 3
3
4
兩步驟驗證
背景 兩步驟驗證是在使用者輸入帳戶密碼之後，再多加一個驗證動 作，並透過手機來驗證登入者是否為本人。此功能由網頁指示 使用者下載安裝APP，目標讓使用者的手機和帳號進行綁定， 因使用者需來回穿梭於下載APP、開啟APP、掃描和網頁指示 之間，所以確認每個步驟做到，才會進到下一步。 UX：KK UI：Charlie
目的 → 帳號安全機制
設計 說明文字簡潔、輔以圖示說明。
兩步驟驗證
STEP 1
1
STEP 2
STEP 3
3
STEP 4
1
對於新功能設定，先有介紹說明。
2 進度說明，讓使用者了解每一階段要做的事
4 確保項目完成，才進到下一步
3 易混淆搖操作紅字標示，提高注意力
5 圖示說明驗證碼位置
STEP 2
2
STEP 3
STEP 4
4 5
驗證碼設定成功，請重新登入
直播購物
Portrait
Landscape
目的 → 身為一個店家，我希望藉由直播影片讓消費者更願意購買我的商品 → 身為一個店家，我希望在影片中可以跟我的消費者互動 → 身為一個消費者，我希望老闆可以即時回答我關於商品的問題 → 身為一個消費者，我希望觀看影片後可以方便的購買商品 UX：KK UI：Charlie
加價購
主要結帳流程
加價購區域
背景 向上銷售：在消費者已經決定購買的情況下，提供額外的服務或折扣，促使消費者願意購買更多且 更高客單價的商品，常見的案例如咖啡第二杯五折。 UX：Annie UI：Charlie
目的 → 增加商品曝光率 → 向上銷售增加客單價 → 增加活動類型，活動多樣化
設計 消費者進入購物車結帳時，按下“下一步”前，以不干擾原本的購物流程的前提下，去瀏覽其他商品。
iOS改版 目的 → 因應專案開發疊加的功能需整理、重新設計 → 建立元件庫加速開發 → 建立Guideline 確保設計一致性 → 提供更多的客製化設計 → APP文件建置
20
Guideline 目的 → 定義間距、圓角度數、顏色、筆畫粗細、字級行高 → 定義元件 → 定義流程 → 定義使用情境 → 任何人看著Guideline就知道如何排
Isometric
#map
#photo
#worker
#appstore
Daily UI
DailyUI_ Calendar
DailyUI_Coming Soon
DailyUI_ Weather
DailyUI_ Recipe
DailyUI_ Workout Tracker
DailyUI_ Happy New Year
DailyUI_ Daily UI logo
DailyUI_ ToDo List
DailyUI_ Activity Feed
2016-2018 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.