2016 許華汧 作品集

2 16 optimism ambition empathy

H Q

X

P

O

R

T

F

O

L

I

Hua-Qian Xu / 許華汧 /

O

Hua-Qian Xu’s 2016 PORTFOLIO

optimism

ambition

empathy

Contents 00

Introduction /

01

Cauldron /

02

WEILI /

03

Recyclothes /

04

Illustrations /

about me

UXSD Workshop UI / UX design

Graduation project UI / UX design

Project UI / UX design

01

05

15

29

43

optimism

ambition

empathy

about•01•02 hua-qian

Hua-Qian Xu :

我是許華汧 擁有用戶體驗及跨領域合作的經驗 對於學習新知充滿源源不絕的動力 喜歡跟團隊合作一起為設計激盪新火花 認為好的設計是要從使用者出發 了解真正的需求，解決問題 。

「 設計，是讓人不知不覺地被照料著。」─ 許華汧

Experiences & Activities Present 2016/Present

UI / UX Designer 早期療育視覺復健輔具APP / 畢業專題

獨立負責用戶體驗研究流程與設計思考於專案前期,並繪制任務流程圖、 線框圖、使用者介面及視覺設計,目前自學ios Swift 語言, 將專案實際 執行,並借由學習程式瞭解在設計時所要思

2015/May. - Oct.

UX Intern

Design Information & Thinking Lab

與國際科技公司合作進行專案,瞭解該公司優化的目標、商業模式、

利害關係人、使用者定義,列出使用者使用該網站的主要歷程與使用目標, 協助設計實驗的任務,進行測試,並整理成網站設計規範。

專案過程擔任實驗主持人、副手,操作易用性測試並提出設計修改建議。 2015/May.

UI / UX Designer

2015 用戶體驗服務設計創新工作坊

由Design Information&Thinking Lab主辦為期五周的跨領域合作工作坊, 邀請UX業界專家共同授課,包含YAHOO、微軟中國、唐碩、悠識等公司。 在團隊中主要負責用戶訪談、人物志、線框圖、UI設計、Logo設計。 2015/Mar.

UI / UX Designer

2015 台灣科大設計週

2015台灣科大設計週/ App類作品參展,參展作品為

「 Recyclothes 」是一款便利回收二手衣物的軟體,專案中執行了

用户研究、任務流程圖、任務流程圖線框圖、UI 設計、視覺設計、Logo設計。

2015/Mar.

Industrial Designer

清華大學產品開發合作專案

與清大工業工程系學生進行跨領域合作,實際執行產品生產流程

從定義用戶需求、設計到最後原型製作,產出以偏鄉兒童為目標族群的服務。 在團隊中負責用戶訪談、人物志、情境草圖發想、服務設計流程。

2015 2014/Aug. - 2015/Apr.

Graphic Designer

Bullpen DJ Studio / Freelance

接取牛棚音樂工作室設計案,負責Logo、專輯包裝、海報及相關文宣品,

並從中學到如何與非設計背景的人溝通、協調,運用簡單易懂的語匯解釋專業。

2014

Technical Expertise User Research about•03•04

- User Interview - Persona - Competitor Analysis - Usability Testing

Design

hua-qian

- Information Architecture - Sketches / Illustrations - Wireframes - User Interfaces - Interaction Modeling

Tools

AI Illustrator

PS Sketch3

Photoshop

Swift

Flinto

ID Indesign

Interests

插畫沈溺者

排球狂熱者

咖啡愛好者

「用插畫表現心情」

「用排球激發鬥志」

「用咖啡調味生活」

與感性的表達,能夠幫

團隊合作的重要性,培

沈澱心靈,可以幫助我

插畫對我是一種創意 助我增加水平思考的 能力。

排球讓我讓我瞭解了 養了場上的專注力及 分析對手的觀察力。

品嚐咖啡時,享受平靜 思考得更深入。

01

Cauldron / UI / UX design

用戶體驗 X 服務設計 X 創新 工作坊

由Design Information&Thinking Lab主辦為期五週的

跨領域合作工作坊,聚集全台對用戶體驗有興趣的學生,並邀請

UX業界專家共同授課,包含bebit、YAHOO、微軟中國、唐碩、AJA、 悠識、遊石、Live house in。

ux•ui•web•05•06 design

高中生社團活動分享 挫折經驗分享社群

What I did /

Collaboration with /

Brainstormig

YI-HAN,LIAO

XIAO-HUI,ZHANG

User Interview

AN-ZE,GUO

Persona

Co-design with /

Storyboard

ZI-QI,WANG

Customer journey map Wireframe Visual Design Logo Design

JUN-HUI,DONG

01

Cauldron / UI / UX design

User interview & Persona

由六位團隊成員所組成,背景來自工業設計、遊戲設計、

資工、資管、圖資的同學,藉用戶體驗設計流程進行五週以 高中生社團媒合的方向,產出一套設計概念。

Scenario & Storyboard

Customer journey map

ux•ui•web•07•08

Business model canvas

Product concept

design

Value proposition

01

Cauldron / UI / UX design What

When

高中生社團活動分享 挫折經驗分享社群

籌辦活動時

Who

a

b

高中生現任幹部及社員 有舉辦活動經驗者

Issue 高中生在舉辦活動時經常面臨經驗不足的情況,

然而社團內部的經驗傳承也做得不夠充足,就算請教學長姐也不一定能解決問題。

Interview 高中生 x 5

社團老師 x 1

Persona

現任幹部及社員 「 活動籌備過程繁瑣 」

「 缺乏人脈協助活動籌辦 」

有舉辦活動經驗者 「 有意願分享活動經驗 」 「 過去經驗難以保存 」

Customer journey map

我們依照實際社團籌辦活動的模式製作了體驗旅程地圖,

根據訪談得出使用者體驗,將痛點標示,發現在籌備活動的 階段是最需要被改善。

找點子

網路

選總召

尋找跨校 夥伴

社員 大會

夥伴 很雷

分組 分工

手足 無措

總籌 社團

相見歡 破冰活動

各組 小社

資訊 混亂

各小組 細節分工

聯繫 夥伴

design

電話

kick off 會議

ux•ui•web•09•10

口頭

籌備活動

Insights

A 社交圈拓展

B 能力提升

C 宣傳募資

D 需要尋求經驗解決

01

Cauldron / UI / UX design

Features 挫折經驗分享 使用者定期發佈挫折經驗與解決方法 建立使用者社群,交流社團活動經驗 按照活動籌辦流程提供經驗 線上線下聚會及工作坊,使用者互相學習,增加社群忠誠度

Prototype

首頁

文章內容 一鍋 滷蛇

Log in

【跨校合辦】想問問各位大大.. 經驗分享

嗨各位蛇友好，第一次問問題有點害羞，學姊說有問題可以來這邊 找答案，剛剛有爬文好像沒有類似的問題，所以還是再來問問大家， 請多多指教。

最佳解答 其他解答

我是今年的街舞社暑假舞演副召，要跟成功熱舞合辦。不過因為是 第一次跟他們一起辦，不知道有沒有其他人有跟成功一起辦過？雖 然每一屆風格不太一樣，但還是想知道跟成功辦的經驗。而且現在 跟成功總召聯繫一陣子了，但因為都是線上聊，時間也不長，還是 沒討論出什麼時候要開始討論要怎麼辦這樣。而且都要補習，很難 約出來，不知道要怎麼樣比較有效率？謝謝！

ux•ui•web•11•12

20150528

林君君 / 北一女中 / 街舞社 / 活動副召集人 / 籌備活動 閱讀全文

閱讀全文

閱讀全文

黃大賢

我不知道你是那種有說服力的人嗎? 你還是常常被人說服？創業者在爭取 客戶，爭取投資人的投資時...

I am good at containing small bits of information.

閱讀全文

閱讀全文

找資源

10

其實問你們學長姐會比較快喔~ 但看在你誠心誠意發問 的份上，我就大發慈悲的說一下好了XD 去年我們和XX高中合辦時，是透過國中同學畢業到友校 去後介紹的。其實一開始真的蠻不熟的，但見過幾次面， 交換FB之後聊個天就比較好溝通啦~ 大家也都很客氣不 會太刁難。 去年我們和XX高中合辦時，是透過國中同學畢業到友校 去後介紹的。其實一開始真的蠻不熟的，但見過幾次面， 交換FB之後聊個天就比較好溝通啦~ 大家也都很客氣不 會太刁難。 回覆文章

合作夥伴哪裡找? 怎麼找適合的合 作夥伴?如何募資 拉贊助?哪裡適合 辦活動?什麼宣傳 方法比較好?

Jan 18

Read more

籌備活動

無論工作或生活，難免都會碰上難 纏的、討厭的人事物。這時...

想要有效率地分 工合作? 和夥伴 溝通不順利? 想找規劃活動的 工具?

Jan 24

Jason

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

3

閱讀全文

回覆文章

Read more

機遇只留給有準備的人: 你能做多少前期準備， 機遇就能使你實現多大價值

閱讀全文

活動中

場地布置的眉眉 角角、彩排的方法 與注意事項、表演 過程遭遇的問題 Feb 14

閱讀全文

I am a very simple card.

I am good at containing small bits of information.

閱讀全文

Read more

閱讀全文

其他連結 一鍋滷蛇 Loser Cauldron 我們是一群幫助高中社團能夠運作更順利的團隊。

關於我們 團隊成員 異業合作

相關網站 Link 1 Link 2 Link 3 Link 4

其他連結 一鍋滷蛇 Loser Cauldron 我們是一群幫助高中社團能夠運作更順利的團隊。

籌備流程

可以選擇籌辦活動的階段, 觀看群眾的分享經驗。

群眾分享

收錄籌備活動時的經驗,供大家參考。

關於我們 團隊成員 異業合作

發問&回答

相關網站 Link 1 Link 2 Link 3 Link 4

若有疑問可發問 下方可以回覆,並且認為好的回覆 可以按讚,讚數最高之回覆會置頂, 讓發問者較易找尋符合需求的回覆。

design

想點子

想活動主題要用什麼 方法比較有效率? 有什麼有趣的主題?

Sitemap 我的訂閱

會員資訊

已解決

我的問題

未解決

回答問題

Menu

我的訂閱

管理訂閱

取消訂閱

觀看訂閱

顯示所有 訂閱者活動 觀看特定 訂閱會員

我的圈子 我的圈子

會員設定 問題

新增文章 首頁

經驗

文章總攬

觀看文章

尋找圈子

加入圈子

我的圈子

新增圈子

Comment / 回答

討論 連結

管理圈子

活動資料

登入會員

會員

註冊會員

活動區

瀏覽活動

透過FB / Google 註冊

填入學校/社團/職位/興趣

平台官方活動 聚會/工作坊

報名活動

使用者發起

Wireframe 首頁 一鍋滷蛇

新增文章

活動區

登入

註冊 一鍋滷蛇

我的圈子

我的訂閱

問題回答 新增文章

活動區 一鍋滷蛇 登出

新增文章

活動區

一鍋滷蛇

活動區 新增文章

活動區

登出 一鍋滷蛇

熱門

新增文章

活動區

活動區 回答

評論 台灣科技大學

我的訂閱

尋找圈子

新增圈子

管理圈子

我的圈子

F圈

官方活動

主題

A圈 最新活動

A

取消訂閱

最新活動

B

日期

台灣科技大學

時間

時間

2015-08-18

2015-06-18

取消訂閱

me

最新 更多

更多

最新活動

最新活動

立即報名

更多

立即報名 更多

更多

Q:

階段 1

C

回答

取消訂閱

D

時間

B圈

2015-06-18

取消訂閱

me 更多

時間

2015-06-18

更多

立即報名

立即報名 更多

更多

更多

25 訂閱 最新活動

E

取消訂閱

最新活動

F

C圈 大眾活動

取消訂閱

-13

更多

主題

日期

時間

2015-06-18

me 更多

更多

時間

2015-06-18

登出

Value proposition canvas

ux•ui•web•13•14

群眾經驗

社交圈

訂閱

能力展現 design

Business model canvas 目標客群

顧客關係

關鍵活動

想拓展社交圈者

社群平台

建立社交圈

舉辦跨校活動者 缺乏活動經驗者

廣告 贊助

服務

想提供過去活動經驗者

成本結構

學校活動組組長

人力資源

社團指導老師 畢業校友

使用者 線下活動

合作廠商

既有社群平台

平台維護台 邀請專家

線下辦活動成本 線上辦活動成本

活動企劃專家

收益

通路

線下活動門票

線下活動

合作學校贊助 社團合作廠商廣告台

聚會/平台 訂閱功能

官方精選解答

合作夥伴 使用者

合作夥伴

共同創造

網路平台

02

WEILI / UI / UX design

WEILI威利 / 早期療癒視覺復健輔具APP

威利是一款針對3-8歲視覺障礙兒童的視覺復健輔具,由專

業治療師針對個別化兒童需求制定適合的視覺刺激,並藉由 故事與訓練關卡的互相配合,使兒童在訓練的過程中增加趣 味性進而提升家中訓練的動機,以及親子互動的機會。

ux•ui•app•15•16 design

What I did /

Project Designer /

Brainstormig

Hua-qian,Xu

User Interview Persona User Flow Wireframe Prototyping User Interface Design Visual Design Programming / ios Swift

02

WEILI / UI / UX design What

When

視覺訓練輔具APP

0-6歲早期療育階段

Who

a

b

3-8歲視覺障礙兒童 職能治療師 / 家長

根據研究,人類各項能力的形成有百分之八十靠視覺學習而來。

Issue

因此視覺障礙兒童較同年齡兒童在認知語言動作和社會發展上有遲滯的現象。

缺乏視覺的刺激

減少探索世界的動機

影響認知、動作的發展

Interview

台北市視障者家長協會

台灣視覺復健專業服務協會

Persona

職能治療師 「 認為現在的app彈性 不夠,無法針對各個兒

童的能力程度做調整。」

視覺障礙兒童 「 看的到一些隱約的

圖案,看到時會很興奮, 很喜歡聽故事。」

Customer journey map 依照實際訪談內容將體驗旅程地圖分為早療前/中/後三個階段,

並將痛點標示,發現由於每個視覺障礙兒童的能力與障礙程度皆不同, 因此個別化治療及教材的使用彈性是最重要的需求。

行為歷程

早療前 詢問家長 兒童能力及 訓練情況

早療中

教導與叮嚀 家長

隨兒童情況 即時調整訓練

紀錄數據

APP太多,臨

問題點

APP彈性不

兒童需求使用

卻不記得是 哪個軟體

再找尋其他 訓練教材

數據要馬上

記錄,否則容 易忘記

調整訓練 教材難易度

分派課後 訓練內容

服務紀錄 撰寫

用PPT動畫

於每次上課

回憶教學內容

材,修改麻煩

不夠即時

很吃力

製作訓練教

使用USB分派

及家長的回饋

design

夠大,無法針對

時要使用功能

早療後

目前使用的app

Egg Heads

Infant Faces

Tap-N-See

只有單一功能,無法針對兒童的能力調整

Insights

A 個別化制定

B 彈性

C 故事趣味性

D 課後練習

ux•ui•app•17•18

職能治療師

02

WEILI / UI / UX design

Features

特色ㄧ 個別化制定

治療師依照兒童個別視覺能力及年齡, 調整適合的視覺刺激素材。

色塊

輪廓

平面

寫實

ux•ui•app•19•20

特色二 故事趣味性

藉由故事引導,使兒童融入情境,

增加遊戲動機,並從數個故事中學習 design

日常生活認知與道理。。

02

WEILI / vision training app UI / UX design

特色三 視覺訓練

關卡以視覺訓練的三個基礎原則注視、追視、偵視,

將關卡分為六大類,並且難度由低到高,而每個關卡又有分不同的等級可以讓治療師自定與調整。

ux•ui•app•21•22

紀錄每次兒童指定練習的項目與成績,

視覺化進步成效,將進步回饋感具體化。

design

特色四 記錄回饋

02

WEILI / UI / UX design 使用流程分為治療師制定區以及兒遊戲區。

User flow

1 選擇訓練關卡

治療師制定區 制定區首頁

訓練關卡 認識物品

訓練

方位訓練 辨認訓練 追視訓練

2 故事檢視 關卡選擇

level 1 level 2

進階設定

level 3

下一步

設定選單 預 設

綜合訓練

故事檢視

選擇使用者

調整順序

選擇使用者

刪除關卡

搜尋使用者

修改關卡

新增使用者

再加關卡

儲 存

數學訓練

3 選擇使用者

完 成

下一步

回到制定區首頁

記憶叫聲 找數字

突然出現的動物 兩手抓動物

使用者紀錄

個人檔案

新增訓練

修改記錄

新增使用者

紀錄

搜尋使用者 關卡修改紀錄 更 多

新增訓練

註

新增訓練

1 主要流程

頁面名稱 頁面範圍 主要動作

設定內容細節

區域註釋

設定

設定

開啟/關閉音樂 開啟/關閉音效 依照治療師分配的內容呈現

兒童遊戲區

故事情境跟個別化視覺訓練。

遊戲區首頁

遊戲動畫介紹

開始

前進故事

故事情境

任務介紹

視覺訓練

播放音檔

播放音檔

暫停遊戲

前進任務

故事情境

遊戲操作

獎 勵

再玩一次 繼續遊戲 結束遊戲

Wireframe

治療師個別化制定

以治療師個別化制訂為主要任務,列出子任務,思考其互動方式及頁面邏輯繪製框線圖。 操作手勢為常使用的點擊

跟左右滑動

,直覺的操作方式以符合使用者心智模式。

1 選擇訓練關卡 a

基本訓練按鈕

主要使用者為多視障,需求為

視覺刺激與回饋,根據使用頻率,

將基本訓練按鈕擺放在第一階層。

b

b

進入綜合訓練

綜合訓練的使用者為單視障,

難度較高,因此將其按鍵擺放在

d

1-2

基本訓練主選單

追視

追視

g

追視

f

2-1

基本訓練

c

進度顯示

d

訓練目的 & 訓練內容解說

追視

e 追視

增加未來學習的基礎。

綜合訓練選單

c 追視

「綜合」的分類中,其訓練目的為

design

1-1

ux•ui•app•23•24

a

2-2

進階設定選單

讓使用者了解目前操作進度,提升 使用者的安定感。

e

基本訓練等級檢視

f

按鍵列

g

進階設定選單

各訓練配有不同等級,左右選取調整。 由左至右為進階設定、增加訓練、下一步。 調整內容為視覺元素屬性、背景樣式

及顏色,解決現有產品彈性不足,不能 依視障兒自身能力調整的缺點。

由下往上滑出並且將背景變暗凸顯 重點,以吸引使用者注意。

2 故事檢視

3 選擇使用者

h

i

3

h

j

k

故事檢視

4

新增使用者

再加訓練

供治療師選擇訓練搭配的故事內容 以增多樣性。

i

按鍵列

j

使用者列表

完 成

選擇使用者

故事縮圖 ＆ 訓練縮圖

k

由左至右為再加訓練、預覽遊戲、下一步。 卡片方式呈現使用者資訊,左右滑動 觀看其他使用者。

按鍵列

由左至右為新增使用者、再加訓練、完成。

02

WEILI / UI / UX design

App GUI WEILI主要以威利爺爺這位農夫為主軸去發展,因此logo及icon的設計以他為發想,為呼應視覺訓練 這個主題,以粗黑的輪廓線搭配反差較大的色彩,並增加色彩飽和度及立體感。

Logo

App Icon

Colors -Logo / Icon

-Main UI color

#B27E39

#B27E39

#FFFFFF

#F6E100

#0065B3

#0065B3

#2E1613

#414F58

#A26E2F

#D4342D

Icons

Button status

Normal

Pressed

Disabled

#A26E2F

#D4342D

#F5F6F8

#231815

#F6E100

#F1F3F6

#2F3239

ux•ui•app•25•26

design

02

WEILI / UI / UX design

Prototyping Marvel

使用Marvel 製作Prototype模擬連結以迅速驗證流程是否正確且順暢。

威利視覺刺激訓練遊戲

把握訓練黃金期,刺激兒童的視覺能力！

for iPad landscape

Programming 實際學習程式,理解程式背後的邏輯以及設計的限制,站在工程師的角度思考, 培養同理心,並且學習設計師如何使用工程師的語言溝通。

ux•ui•app•27•28

Swift 2.0

design

藉由程式的學習培養了問題解決的毅力跟自學能力,也了解到清楚明瞭的互動文檔跟階層順序 相當重要,切圖有不同尺寸的原因為何？切完的圖工程師是如何變成我們所看到的介面,也發現 WEILI

準確定義跟熟知設計規範對於團隊與公司是一種有效提升工作效率與溝通的方式。

03

Recyclothes / UI / UX design

Taiwan Tech Design Week 2015 台灣科大設計週 - 忐忑子女 / 作品參展

現代人衣物汰換率高,經常買新衣,因此產生了許多舊衣,

最先想到的處理管道是投入舊衣回收箱,但是我們所投入

的舊衣回收箱是合法的嗎?衣服真的能送到需要的人手中嗎?

Recyclothes可以讓你迅速確實做公益!

ux•ui•app•29•30

讓你迅速便利做公益的好夥伴！

design

Recyclothes second-hand clothing

What I did /

Project Designer /

Brainstormig

Hua-qian,Xu

User Interview Persona User Flow Wireframe User Interface Design Visual Design

03

Recyclothes / UI / UX design What

When

二手衣物回收APP

任何時候

Who

a

b

一般大眾 公益團體

Issue 現代人衣物汰換率越來越頻繁,而大多數人處理汰換衣物的方式就是找尋家旁邊的舊衣回 收箱,但是這些舊衣回收箱真的是合法的嗎?根據高雄市環保局三科科長施道寬指出:

「高雄市總共有350個，合法申請回收箱,因為可能社會不景氣,目前違反部份可能超過1千2百個。」 此違法數量高於合法的三倍,造成很多衣物落入黑心商人中再轉賣去其他地區,因此無法將真正的 愛心提供給需要的機構是目前值得探討的問題。

Interview 一 般大眾 x 3

直接聯繫

「很怕遇到黑心商人沒有確實 把東西交給真正需要的人。」 「怕路邊的舊衣回收箱有些是 假的或容易被遺忘。」

公益團體 x 1

需求比對

地區 X 運送

「請問高跟鞋有收嗎？」 「可以用什麼方式運送?」 「玩具、文具也收嗎？」

「請問新北市鶯歌有來收嗎?」

「請問溜冰鞋可以嗎？」 「板橋有到府收嗎?」

物資分類

「衣物分男女、季節、上下身,

不分年齡尺寸都收,之後分發 給其他團體後,他們再自己去 挑選。」

Persona

「 怕黑心商人轉賣愛心」

公益團體 「 衣物會分男女、季節、上下身」 「 希望到府收物服務符合成本」

Insights

A 物資分類 C 中央整合

B 需求比對 D 地區 & 運送

design

「 團體收取物資的資訊複雜」

ux•ui•app•31• 32

一般大眾

03

Recyclothes / UI / UX design

Features 01

02

落實愛心

直接聯繫公益團體

03

物資均分

依急迫性優先給予物資

04

需求比對

迅速找到符合條件的團體

中央系統整合

統計數量、需求分配、配送服務

Using process

02

03

04

地區比對

衣物資訊

註冊登入

ux•ui•app•33•34

01

交物日期 design

情境 1

情境2

情境3 登入

Flow chart

註冊 驗證

最新消息

我的關注

公 益 資訊

兒童

衣物捐贈

青少年

成人

衣物數量 登入之後選擇要捐贈物品的年齡階層,再 填入要捐贈的物品項目以及數量,系統配

對適合的公益團體,選擇團體及運送方式, 填入送達日期或是取物日期。

地區配對 選擇團體 運送＆日期

恭喜頁

個人檔案

其他

設定

03

Recyclothes / UI / UX design

Wireframe 圖面元素說明 頁面連結 1

2

範例說明

改變狀態 a

3

b

c a

用戶操作

點擊

a

立即關注

向右滑動

向上滑動

向下滑動

按下

立即關注

點擊

2

後移動至

2

頁面

2

無法選擇

立即關注

頁面切換

由左滑入

改變前

操作解釋

預設狀態

向左滑動

由右滑入

狀態名稱

直接換頁

光箱

1

改變後

頁面名稱

頁面說明頁面說明頁面說明 頁面說明頁面說明頁面說明

導覽列

A.最新消息

B.公益團體

C.衣物捐贈

D.個人檔案

E.設 定

「我的關注」狀態

a

4

1

1.預設

連結至「衣物捐贈」流程, 並減少「配對團體」的步驟。

A.最新消息

2.點擊「立即關注」

ux•ui•app•35• 36

2

a 1

3

4

design

A-0.最新消息

1

呈現緊急需求,可立即捐贈。

「我的關注」狀態

A-1最新消息_詳細資訊

使用者可進一步了解公益團體 最新需求及團體的詳細資訊。

2

A-2我的關注

3

可將自己關注的消息存放至 「我的關注」 。

往左滑即可刪除關注。

a

B.公益團體

1

1.預設

A-2我的關注_刪除關注

2.點擊「立即關注」

2

a 1

3

B-0.最新消息

可搜尋公益團體、地點以及 捐贈物資名稱找尋團體並捐贈。

1

B-1最新消息_詳細資訊

使用者可了解公益團體的詳細 資訊。

2

B-2我的關注

可將關注的消息團體存放至 「我的關注」 。

3

B-2我的關注_刪除關注 往左滑即可刪除關注。

03

Recyclothes / UI / UX design

C.衣物捐贈 2

3

c

1

d 0-8歲兒童

9-18歲青少年

a

b

C-0.衣物捐贈

1

依照年齡階段分類衣物 分為0-8歲兒童、9-18歲 青少年、成人及其他。 a 「衣物捐贈」圖示改變

C-1衣物類型＆數量

選擇衣物類型並填入捐贈數量。

b

2

C -2選擇地區

3

選擇地區依照距離配對公益團體。

導覽列切換為以衣物年齡範圍 區分,可選擇多種類別

c 「流程進度」狀態改變

d

C-3公益團體配對中

依照距離配對公益團體,並顯示 等待秒數,減低使用者焦慮感。

點選文字輸入框即跳出選單 使用者滑動挑選預設選項。

7

6

5

e

8

1

f

4

C-4選擇公益團體

配對後列出公益團體,並且可 依照急迫性、距離以及團體是 否有到府收貨選擇排序。

5

C-5運送方式＆日期

分為到府收貨、親自送達、宅配。

e

勾選狀態改變

6

C-6運送方式＆日期

依勾選項目向下展開子項目, 填入收件地址。

f

鍵盤滑出,並在使用者 輸入一項目後自動跳至 下一選項

8

7

C-7捐贈完成

捐贈完成可以得到愛心,累計 一定數量,可以在合作企業消 費時享有優惠。

導覽列「個人檔案」 出現通知,並回到 「最新消息」首頁。

D.個人檔案

ux•ui•app•37• 38

1

「累計愛心」狀態 12

13

a

a

1

1.改變前 2.捐贈後得到愛心 並更改累計總數

design

D-0.個人檔案

1

可以觀看捐贈記錄、修改 個人資料、資料查看累計 愛心數。

D-1個人檔案_資料修改 個人資料修改及登出。

E.設定

1

E-0.設 定 軟體介紹及其他設定。

03

Recyclothes / UI / UX design

User Interface

234

需求比對

衣物類型＆數量

運送方式

ux•ui•app•39• 40

design

情境頁

我的關注 迫切需求消息 捐贈記錄

03

Recyclothes / UI / UX design

App GUI Logo跟Icon以衣服、循環的圖示跟綠色表達衣物回收的概念。

Logo

App Icon

Colors -Logo / Icon

Recyclothes second-hand clothing

-Main UI color

#009F5F

#FFFFFF

#00874A

#1F1918

#009756

#F6F6F6

#FFFFFF

#F8E71C

#E45F3B

#3F70DC

Icons

Typography Super title Title

Noto Sans T Chiness-Regular Noto Sans T Chiness-Regular

Small text

Number

Button status

Normal

Selected

Disabled

Normal

Pressed

Noto Sans T Chiness-Light Noto Sans T Chiness-Light

ux•ui•app•41• 42

design

04

Illustrations /

ux•ui•app•43•44

design

optimism ambition

Steve Jobs ‘’ You have to trust the dots will somehow connect in your future. ‘’ empathy

Contact Hua-Qian,Xu dabo830613@gmail.com

thank • you

+886 958 083 613

2016 • hua-qian,xu’s portfolio

2016 PORTFOLIO

2 16