2016
DESIGN WORKS
Design by Sophoa Chiang
UI DESIGN My Design Thinking Initially, Each Received A New Project, The Brain's First Idea Is Always How The Visual Presentation
Profile
p.2
Photobooks
p.6
skill / Experience
Editor UI Design
Youbike
Kiosk Design
p.20
Gainhow Web / Apps
p.25
Mix Editor / Photo Printing / Price
WORKS OF UI DESIGN Design by Sophoa Chiang 收錄2013至今的重點專案，包含App / Web / Wireframe / UI / UX ，透過作品展示，呈現設計專業程度與解決問題的能力。
Sophoa Chiang UI Designer
我是Sophia，6年工作經驗，擅
美感的重心轉移至產品的核心
長UI、平面視設計．4年前踏入
價值與解決問題．影響甚遠，
UI設計領域，從平面視覺基底
讓我理解擁有核心理念且對解
轉換到重視使用者體驗的介面
決實際生活上的需求才是一個
設計，讓我又重新審視自己的
好設計可以長存的根基．
設計方式與思考邏輯，從視覺
2
Experience UI相關工作資歷
『壹零零玖意念設計』
2012.04—2014.04 擔任介面設計 / UI Dseigner 因為，那段期間我對設計的定義就是如何在視覺上呈現完美的 畫面的問題。
『健豪印刷』
2014.06—2016.05 擔任介面設計 / UI Dseigner 部門主管 / 設計襄理 <管理9人以下團隊> 那段期間我對設計的定義就是如何在視覺上呈現完美的畫面， 並未深入思考它背後需被解決的問題。
Skill
專業技能
Illustrator CS6 Photoshop CS6 Adobe XD Axure RP Pro 7.0 Photography Sketch Windows 7 MAC OS EL
Language 語言能力
English
聽
說
讀
寫
Japanese
聽
說
讀
寫
3
1
EXPERIENCE My Design Thinking 參與過的UI設計專案 Youbike、澎湖充電站App、禾 股份有限 公司網頁、life+雲端數位生活家、健豪雲 端數位網、線上編輯器、大頭貼App、編 輯器App、訂單查詢App、相片沖印App 印象最深刻的專案是Youbike，執行過程非 常完整。不管是流程順暢度、使用者習慣 考量、介面字彙統一、機台顯示效果測試 、視覺形象是否符合專案設定與顧客期望 等......，累積許多難能可貴的知識！ 而在健豪印刷，需設計應應各種產線的 App與公司網站。因須與實體產線銜接， 所以經常要跨部門討論，找出最適合的方 式﹔提升專案執行的效率與資源分配的比 例。
5
PHOTO BOOKS 線上編輯器
About
2014.06月︱工作天 / Wireframe 3 Days , UI 7 Days 使用軟體 ︱Illustrator , Photoshop , Axure
7
01
Iconography
ABOUT PHOTOBOOKS 02
Colors
Sky Blue
#0364FF,#3583FF
03
Light Gray
#EDEEF0,#EDEEF0,#EDEEF0
Pink
#FF467F,#FF6B95
Orange
#FF5500,#FFBB99
Typography
Titles & Headings
Body Text
Heading 2 - Light, 32px
Lorem ipsum dolor sit amet,consectetur adipiscing elit Duis sed neque blandit gravida vitae bibendum dictum,nisl nisl.
Heading 1 - Thin, 48px Heading 3 - Regular, 26px Heading 4 - Medium, 20px
Bold Italic Hyperlink
Heading 5 - Bold, 18px
FONT / Helvetica Neue
Heading 6 - Bold, 16px
9
ADD PHOTO 新增照片
提供三種相片讀取方式，因此設計三種圖標做為代 表。由左至右分別是雲端相簿、本機讀取、線上免 費圖庫。
PHOTOBOOKS ︱功能介紹
使用者 USER / 訪客 GUEST 【 馬上登入】
縮放
55%
頁面模式
相簿尺寸 SIZE /
24 X 24
11
ADD TEMPLATE 新增版型
3
1 2
舊版的設計須先選擇圖框數量，再選擇版型樣式，且無法指定 變更頁面。新版則使用三欄式切割讓所有功能一目了然，並且 可隨時切換更改！
12
頁面管理
PHOTOBOOKS ︱功能介紹
New
ADD STICKER 新增插圖
舊 版 方案 1
方案 2
方案 3
這個功能是使用滑鼠拖曳將插圖直接置入編輯區域內，考量原程式 無法異動結構，因此只提升視覺面。但特別調整代表透明度的背景 樣式，選擇『方案2』來降低灰色格紋對插圖的視覺干擾！
14
PHOTOBOOKS ︱功能介紹
15
PHOTOBOOKS ︱功能介紹
MAIN EDITING AREA 主編輯區
主要編輯工作區域內，有兩大編輯功能。 1.背景編輯：針對照片框以外的區域編輯 ，可改變背景色與置入背景圖片！ 2.照片編輯：可簡單編輯照片框的內容物 ，提供基本編輯功能，讓一般使用者也可 以，輕鬆編輯！
背景編輯設定
照片編輯設定
PHOTOBOOKS ︱功能介紹
OTHER FUNCTION 其他功能介紹
主要編輯工作區域內，有兩大編輯功能。 1.背景編輯：針對照片框以外的區域編輯 ，可改變背景色與置入背景圖片！ 2.照片編輯：可簡單編輯照片框的內容物 ，提供基本編輯功能，讓一般使用者也可 以，輕鬆編輯！
18
YOUBIKE KIOSK ︱功能介紹
台北市公共自行車
Youbike 2012.05月︱工作天 / Wireframe 25 Days , UI 10 Days 使用軟體 ︱Illustrator , Photoshop , Axure
20
23
01
App Icons
App Icon for iOS
App Icon for Android
iPhone7/6+
256 HDPI
iPad with Retina
Sportlight
144 HDPI
48 HDPI
02
感應區
Colors
SENSOR ZONE
4
5
6
7
8
9
00
0
.
#0364FF
Sky Blue #0364FF #3583FF
03
Typography
Sky Blue #0364FF #3583FF
Arial Bold 華康中圓體
華康特圓體
04
Sky Blue #0364FF #3583FF
PANTONE MATTE BLACK C0 M0 Y0 K100 R0 G0 B0 #000000
Logo
23
STATION INQUIRY i 租賃站查詢 從地區→區域站點→站點詳細資訊，範 圍由大逐漸縮小，讓使用者依照漸進式 層級的思維快速找到站點！
YOUBIKE KIOSK ︱功能介紹 25
26
單次租車 這個功能當初設計的目的，是提供給一次 性租借的使用者，因使用次數不多且沒有 悠遊卡，因此透過信用卡做一次性的票證 綁定，即可立即租借！
27
YOUBIKE KIOSK ︱功能介紹
SINGLE RENTAL
JOIN Youbike 成為會員 當初討論最久的是要透過什麼方式來做身份認證 ？且進一步的與票證做綁定？ 需要身份認證的主要原因：追蹤未歸還車輛！ 因此綁定的資料必須是真實度高且可追蹤，最後選定綁定手機 號碼。具格式固定、可快速輸入、真實度正確性高、後續傳送 訊息與追蹤度高。考量上述優點判斷手機號碼的條件是最符合 需求！ 28
YOUBIKE KIOSK ︱功能介紹
i
CARD INQURY 卡片查詢 主要提供兩大重點資訊查詢：1.交易記錄明細，2.卡片目 前狀態 ，五大狀態分別為 < 正常 / 租借中 / 異常 / 失敗 / 餘額不足 >
30
卡片讀取狀態
8
9
00
0
.
正常正常 卡片查詢
交易內容 捷運南港展覽館站/出站
交易紀錄顯示
YOUBIKE KIOSK ︱功能介紹
7
FIND EMPTY DOCKS 車位已滿 但特別調整代表透明度的背景樣式，選擇『方案2』 來降低灰色格紋對插圖的視覺干擾！
32
8
9
00
0
.
請輸入您所租賃之車輛編號，輸入完畢 請按送出鍵，車輛編號位置請參照下方 指示圖位置 編號
請輸入車輛編號(共四碼)
送出 範例 / EX
1009 車輛編號四碼標示於 車身兩處
車位已滿
車輛編號申請增時
YOUBIKE KIOSK ︱功能介紹
7
Apps 建豪相關系列App設計
About
健豪數位商品編輯App
2014.04月︱工作天 / Wireframe 2 Days , UI 2 Days 使用軟體 ︱Illustrator , Photoshop , Axure , 商品攝影
EDITOR
GAINHOW COLLECTION
01
App Icons
App Icon for iOS
iPhone7/6+
App Icon for Android
02
iPad with Retina
Sportlight
144 HDPI
48 HDPI
256 HDPI
Colors
Pinky
#FF458D,#E60180
Yellow
#FFF100,#FFF766,#FFFCCC
Light Gray
#0178FF,#99D1FF,#CCE8FF
Orange
#C3C4C4,#F2F2F2
01
Iconography
透過App將手機照片快速沖洗 出來！ 簡單選擇商品尺寸規格與想沖 洗的照片，線上付款、輕鬆取 貨。與後端生產線直接串接， 降低人力成本與製錯機率、耗 損。
PHOTO PRINTING 39
About
健豪相片沖印App
2016.04月︱工作天 / Wireframe 2 Days , UI 4Days 使用軟體 ︱Illustrator , Photoshop , XD
專案中所參與的部分為：快速 生成簡易原型（初次討論用） 、操作畫面視覺設計、使用流 程設計、提案。 因前幾次編輯器App設計的經 驗，再加上使用Adobe新出的 原型製作軟體XD，讓我可以 在短短兩天製作出初步討論用 的原型案例。 這個App的主要目的，是讓使 用者，可透過手機快速發印相 片。因此相較與前幾個編輯 App，在流程步驟與功能上較 為精簡，可簡易的快速操作。
01
App Icons
App Icon for iOS
iPhone7/6+
App Icon for Android
02
iPad with Retina
Sportlight
144 HDPI
48 HDPI
256 HDPI
Colors
Pinky
#FF458D,#E60180
Yellow
#FFF100,#FFF766,#FFFCCC
Light Gray
#0178FF,#99D1FF,#CCE8FF
Orange
#C3C4C4,#F2F2F2
01
Iconography
PHOTO EDITOR 相片編輯
針對點選的照片做編輯 1.基本濾鏡與調整明度彩度功能 2.照片旋轉功能 3.更換照片 4.設定加洗張數
43
提升使用的便利性與流暢度，如 ：長時間按住加號，會以10為單 位增加級距，快速到達99
PHOTO PRINTING APP ︱功能介紹
手勢置入功能
PHOTO PREVIEW 預覽沖印
2種預覽模式
單張/多張 2種編輯行為模式
提供單張清楚預覽與一次
有別於單張照片編輯，下方圓形
多張預覽兩種模式，讓使
隱藏功能鍵，針對全部照片做一
用者可隨時切換。
次性的編輯。
45
PHOTO PRINTING APP ︱功能介紹
CHECK OUT 購物車
確認訂單>>> 檔案回傳發印 一筆訂單可包含多筆商品，在 此步驟將檔案封包傳送回生產 後端主機，進行印製！
47
Order Info
2
記錄資訊
依欄位性質切換輸入法
輸入後會自動紀錄，下次
若欄位有可判斷輸入數值之條件，將會
訂購時會直接帶入資訊，
再點選時自動切換至符合的輸入鍵盤，
提升便利性。
如：金額欄會切換至數字鍵盤
3
4
GAINHOW COLLECTION
About
健豪數位商品編輯App
2014.04月︱工作天 / Wireframe 2 Days , UI 2 Days 使用軟體 ︱Illustrator , Photoshop
GAINHOW PRICE SEARCH APP ︱功能介紹
PRICE SEARCH
GAINHOW PRICE SEARCH APP ︱功能介紹
01
App Icons
App Icon for iOS
iPhone7/6+
App Icon for Android
02
Sportlight
144 HDPI
48 HDPI
256 HDPI
Colors
Pinky
#FF458D,#E60180
51
iPad with Retina
Yellow
#FFF100,#FFF766,#FFFCCC
Light Gray
#0178FF,#99D1FF,#CCE8FF
Orange
#C3C4C4,#F2F2F2
01
Iconography
ITEM LIST 首頁商品列
1
2
3 2 1
3
方塊式變換模組 數量自動增減
同色系區分相同類別
3種
商品形體大小皆不相同，隨時會增減且經常需
商品皆由色塊＋圖示組成，並將同
3種
更換與變動，因此設計了3種尺寸的方塊式變
類型商品透過類似色區分
，且
換模組，會自動因數量的不同的曾或遞減。
53
PHOTO PRINTING APP ︱功能介紹
種尺寸，多種組合！ 尺寸可組合出多種變化與可能！靈活度高
且視覺上姐叫有變化與層次！
59
CALCULATE PRICE 書籍計價
手機快速計價 為提高報價效率、降低客服佔線率，因此將報價 複雜度較高的書籍計價特別獨立一個功能！ 因手機介面不便書寫太多文字，特將輸入條件皆 設計點選選單，方便操作！
60
PHOTO PRINTING APP ︱功能介紹 61
CREATIVE My Design Thinking 我的設計思考
最初開始做設計時，每接到一個 新專案，腦中第一個浮現的想法 總是如何在視覺上呈現出完美的 畫面！
這時才發現，原來一直以來自己 的設計的方式完全都顛倒了！因 此我從新調整了設計思維的順序 與重心比例。
當畫面需被修改且異動到已經設 計好的比例時，心裡會很不是滋 味！因為，那段期間我對設計的 定義就是如何在視覺上呈現完美 的畫面，並未深入探討或思考它 背後需被解決的問題。
現在若接到一個新的專案，我的 做法先從需求訪問>研究需求背景 >設計流程>反覆修改流程調整> 使用流程測試>視覺精修。
接觸介面設計越久，開始注重使 用流程，就會想去了解這些需求 背後真正的動機。
雖然我的主要工作是最後的視覺 設計，很幸運的在曾經執行的專 案過程，都讓我全程參與才可以 發現自己的重點放錯地方。
照片編輯設定
63