JEFF CHI

Per sonal Trainer APP

CHI . 紀 良 諭

Portfolio Portfolio

2016-2018 2016-2018

/ Industrial design / Shih chien university

Seek rt ec h int ern.

Chi liang yu

Por tfolio

JEFF CHI 紀良諭 About chi. 設計師好比變色龍一樣，隨時在設計、使用 者之間的角色切換，不能過於自我、也不太 一昧頃聽使用者，雖然看似項人格分裂，但 這也是我享受設計的原因。 對我來說設計並不只為了解決問題滿足需 求 . 更是透過設計角度聯繫人類與未來之間 的互動中介 .

Contect info.

Tele:0927-787-136 Email:b258147963@gmail.com

Profile

Eduction. 國立北斗家商 Depar tment of Graphic design

朝陽科技大學

實踐大學

Depar tment of Industrial design

Leader experience. 實踐大學 - 期末展 - 專刊編輯 負責班上作品 layout，內容：版型設計、約 300 書頁編輯。 北斗家商 - 管樂社社長 管理社團約 65 位社員，負責學校重大典禮音樂演奏，曾帶團至國際嘉義管樂節參演。

Activity. 實踐大學國際設計工作營志工

2018

五天的設計工作營，帶領五個不同國家的設計系學生， 為大稻埕進行設計，從中瞭解許多國外的設計思維與台灣文化。 國際台南 service jam

2017

三天的快速設計。學習如何與不同領域的人交流、溝通， 台中南檢國際志工營

2016

Index.

Por tfolio

Index

App / web design.

Personal trainer

Sessiors app

7-11 activity web design

Braun web design

Graphic design.

Poster design

Painting

Animation

Product design.

Catcher trap

Xbox speaker

Plant society

Por tfolio

UI/UX design.

Web design.

Index

Personal trainer app Cutting hair app

7-11 activity web design Braun web redesign

UI/UX_ Design

01.

Fitness personal trainer app Concept: 體 型 較 為 瘦 弱 的 大 學 生， 渴 望 成 為 體 態 較 好 的 肌 肉 男。 因 此 在 健 身 的 前期，能有一位引導他人的教練。

UI/UX Project / 2018

Per sonal Trainer APP

FITNESS PERSON AL TRAINER

HEART RATE

MUSCLE SENSOR

WORKOUT

PROFIL E

UI/UX_ Design

Project concept

Fitness personal trainer APP DESIGN

肌肉感測穿戴裝置，連結 app， 就像健身教練在一旁教導，並感 側肌肉發力狀況，偵測發力狀況 是否正確。

肌肉感測智慧衣

App design

Sense intent. 健身 app 產品最主要的價值在於讓大學生男性族群能有計劃的培養 健狀的體態，最主要的作法為帶領使用者建立健全的健身知識、培 養健身習慣。

1 體態較為瘦弱的大學生族群，都 有想變壯、讓線條變得更結實的 想法。

2 透 過 穿 戴 裝 置、app 的 回 饋 提 醒，能夠建立良好的健身知識。

3 建立良好的健身方式、知識，讓 使用者能夠自行安排更進階的健 身菜單。

Per sonal Trainer APP

Know context. 目前學生有了健身念頭後，開始進行健身後，所產生的問題包括：教練費，健身資訊，持續 健身 ......，因此針對以上問題點，挖掘出使用者的痛點，將以改善。

發力錯誤、 效果未達預期

$ 教練費過於昂貴

健身受傷， 影響持續健身

?

Mind

健身資訊過於複雜 正確性不高

Know people. 大學生男性族群體型較為瘦弱的 族群。 健身目的增加異性緣之外，自己 穿衣服時體面。

"Desire"

In order to Vanity

2

1

Look better when dress

UI/UX_ Design

User interview.

Disscussion guide 體質

過程中，放棄念頭的產生

健身念頭

如何看到自己的成效

飲食計畫

在健身前做了哪些知識搜集

有無健身經歷

21 歲 微胖 希望身體較為強壯 飲食並無特別注意 有試著在家健身

無 會透過拍照、他人提醒 上網查資料

23 歲 之前體質較瘦 希望身體較為強壯

有，初期沒看到效果 自己能感受

飲食有控管 有在健身房健身

上網查資料

19 歲 瘦弱 能增加異性緣 飲食並無特別注意 尚未開始進行

無 _ 有健身念頭時 會上網查資料

Per sonal Trainer APP

Persona.

User interview. 透過訪談，知道使用者在健身、變壯方面 的痛點、以及過往進行健身時，他們會有 哪些不清楚的健身知識，產生困惑，因而 影響健身體驗。

姓名：Jeff 年紀：22 歲 職業：大學生

行為

上網查詢有關健身的資料，但資料過多 ，不知哪個才是正確。 進入健身房會不知道怎麼開始進行。

需求目標

希望身體能較為健壯，身體曲線較好看， 增加異性緣。 建立正確的健身知識。

健身房的體驗，不知道肌肉發力是否正確

情境

雖然已進行健身兩三個月，卻沒有感受，讓我想放棄。

UI/UX_ Design

Journey mapping.

Fitnessing

s nes

it re ft textile o f r a Be r wea

sm

?

ess Fitn

Task.

Blue tooth Connect

透過藍芽方式，連接穿戴 裝置與 App.

Warm up teaching

健身前，進行熱身教學、 提醒，讓使用者在初期即 可健身良好的健身習慣、 方式。

Equipment teaching

健身開始時透過影片、細節教學 包含：重量、次數、組數，一步 健身知識，也能有效進行健身。 在健身時，如發力部位錯誤，給 自己錯誤的地方。

Per sonal Trainer APP

Af

ss

tne

fi ter

Fitness

Start workout

學加上穿戴裝置的幫助， 步一步讓健身新手建立良好的 。 給予震動回饋，讓使用者得知

Muscle sensor remaind

運 用 大 數 據、 雲 端 運 算 的 技 術，讓使用者透過肌肉感測，

Stretch

運 用 大 數 據、 雲 端 運 算 的 技 術，讓使用者透過肌肉感測，

UI/UX_ Design

Flow chart.

Log in

Warm up

App connection wear device

muscle sensor report

Workout

連結臉書、Google 資料設定

Log in

藍芽連接

震動裝置

確認藍芽、裝置都已完成

App connection wear device 提醒尚未熱身

選擇熱身方式

熱身教學、計時

完成熱身

Warm up

影片教學

提醒是否進行教學

Workout

選擇健身部位、器材

查看健身部位 Muscle sensor report

開始健身

姿勢修正

Wireframe.

Per sonal Trainer APP

Conculsion 透過 wireframe，與使用者訪談進行操作體驗的測試，讓 app 的使用流 程能更為順暢，進行體驗時能更為順暢，讓使用者在操作的時候，不會迷 失方向，能夠快速、正確地達到目的。

Tain detail

Train part

warn up

Sensor Muscle postion Weight MUSCLE SITUATION Sensor

Video

Video

Abdominals

Abdominals

warn up

warn up

Choose the grow muscle part

Major

Tarin part

You have complete the warm up!

Auxiliary

Check press machine Suggestion

Adjust your training weight and position

Yes Heart rate

99

01:42

Time

01:42

Check the problem

5

WORKOUT PasePASE workuot

Warm up

Complete Warm up

Hold to finish

Choose the part

Are you ready fitness?

If you want to use the instruct you must warm up ,

Resume

Log in

Teaching course

Abdominals

Sensor t Muscle postion Weigh MUSCLE SITUATION Sensor

Video

Video

PROFILE

Choose the grow muscle part

Warm up items

!

Height Workout

Great let to start workout!

You have complete the warm up!

You have complete the warm up!

Weight

Check You press machine have complete the warm up!

You have complete the warm up!

Check press machine

You have complete the warm up!

Date of birth

Equipment detail

Gender Check press machine Heart rate

Temperture

No

Reps/set

Weight

Start workout

!

Muscle stretch

Muscle stretch

Heart rate

Temperture

Set

Check press machine

Weight

Muscle stretch

Next Start workout

Start warmup

Start workout

Start workout

Heart rate

99

Muscle stretch

01:42

Time

Reps/set

01:42

5

Back WORKOUT PasePASE workuot

Check bluetooth

Check Device

Check bluetooth

Check turn on the bluetooth

Check the device have put in correct position

Check turn on the bluetooth

Muscle position

Are you ready fitness?

If you want to use the instruct you must warm up ,

Warm up items Bluetooth

Bluetooth Shock

Device

full name

Next

Next Back

Tain detail Abdominals

password

Device

Stretch Next

CREATE AN ACCOUNT

Email

Check the device have put in correct position

Back

Log in

Warm up !

Start workout

Aerobic

Log in with facebook Log in with Google

Back Start workout

UI/UX_ Design

Function overview.

01. 使用者登入

*+,-./

$%&!'()

!""#

*+,-./

$%&!'()

LOG IN

!""#

*+,-./

$%&!'()

CREATE AN ACCOUNT

/0$123

)*+&,-.

&''(

/0$123

)*+&,-.

/0$123

Check turn on the bluetooth and device is put in the correct position

&''(

Check turn on the bluetooth and device is put in the correct position

Check the device put on the correct position!

Gain muscle and be a professional fitnesser

)*+&,-.

Check Bluetooth

Muslce position

Height

Bluetooth

1. Turn on the device

Email

Weight

Passward

Date of Birth

2. Connect bluetooth

Device

3. Complete the procedure

Gender

If you feel the correct position,continue!

NEXT

Log in with Facebook

START NOW!

012,3

Next

Back

Back

012,3

Device

Check out

Log in withe Google

012,3

Bluetooth

Shock Make sure the device put in the correct position

Next

012,3

&''(

Check the device

Check Bluetooth

DEVICE SETTING

PROFILE SETTING

Full name

!""#

LOG IN

LOG IN

012,3

012,3

012,3

012,3

012,3

START FITNESS

Next

Skip

012,3

012,3

012,3

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

!"#$%

02. 智慧衣與藍牙連線

03. 熱身開始 *+,-./

$%&!'()

!""#

*+,-./

!""#

*+,-./

$%&!'()

!""#

*+,-./

Warm up

Warm up

Warm up

!

$%&!'()

$%&!'()

Complete warm up

Are you ready fitness?

If you want to use the instruct you must warm up your body,or you will get hurt.

Warm up items

!

You havnt complete before workout!

Stretch

To use the low weight

Heart rate

Muscle stretch

Temperature

99

01:42

37.5c

Great let start workout!

00:00

Aerobic

Running 20 min warm up ypur body.

012,3

!""#

012,3

Heart rate

Muscle stretch

Temperature

99

01:42

37.5c

START WORKOUT

START WARMUP

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

Per sonal Trainer APP

04. 健身開始 *+,-./

$%&!'()

!""#

*+,-./

$%&!'()

!""#

Teaching course

Choose the part

Abdominals

Choose the grow msucle part

Arm

3ectoralis

WORKOUT

explore

Abdominals

Chesk press machine

Chesk press machine

Demonstration Video

EQUIPMENT DEATIL

This week practice day S

M

T

W

T

F

Setting the equipment before begging workout

S

Sover Machine

SET

S

M

T

W

T

F

WEIGHT

3

This week practice day S

set

012,3

012,3

012,3

8

pound

Check the setting are be ok.

012,3

REPS

5

012,3

012,3

terms

START FITNESS

012,3

012,3

04-1. 器材教學 *+,-./

$%&!'()

!""#

*+,-./

Teaching course

$%&!'()

!""#

*+,-./

$%&!'()

!""#

*+,-./

$%&!'()

!""#

Demonstration video

Demonstration video

Demonstration video

Demonstration video

Workout procedure

Workout procedure

Workout procedure

Workout procedure

1.Breath in

2.Arms up

3.Wrist inward

4.Arm straight

Chesk press machine Do you want to see Demonstration Video the demonstration video?

EQUIPMENT DEATIL Setting the equipment before begging workout

SET

3

Yes

WEIGHT

5

START WORKOUT

set

pound

012,3

!

3

!

When you workout you cant Helium

Next

012,3

!

Wrist must to inward

Back

Next

Back

012,3

$%&!'()

!""#

*+,-./

Video Video

Next

START FITNESS

06. 肌肉感測紀錄

05. 健身教學開始 *+,-./

!

Arms must to be spread

Back

Terms

Check the setting are be ok.

012,3

Term

MUSCLE SITUATION

Sensor

$%&!'()

Warm up

!""#

*+,-./

$%&!'()

!""#

SENSOR MUSCLE SITUATION

5

Chesk press machine Equipment

Weight

8/3 Reps/Set

SNESOR 18%

92%

56%

38%

Muscle percentage

!

Muscle keeping 60% is great,80+% will hurt.

0-20%

Heart rate

99

Muscle stretch

01:42

Time

01:42

PASE WORKOUT

20-40%

40-80%

80+%

Reps/set

5

Heart rate

Muscle stretch

Time

HOLD TO FINISH RESUME PASE WORKOUT

HOLD TO FINISH

BACK TO VIDEO

when you are workout keep arm straight

Complete

UI/UX_ Design

Function.

01. 使用者登入 第一次健身時進行個人資料登錄， 讓系統能透過紀錄資料來進行健身 幫助。

01. 帳號創立或 fb / google 連結

02. 個

個人資料建立

Per sonal Trainer APP

03. 器材示範影片

UI/UX_ Design

02. 智慧衣與藍牙連線 幫助使用者在健身時，能連線於健身智慧衣。

01. 藍牙連接確

Per sonal Trainer APP

認

02. 裝置位置確認

03. 裝置連接完成

點選 shock，確認智慧衣是否有放到正 確的位置。

Start workout

Next

UI/UX_ Design

03. 熱身開始 假使健身初學者沒有正確，且 達到熱身所需達到的功效的 話，容易提到健身受傷機率。 01. 熱身提醒與警示

熱身頁面的狀態提醒，假使欲進行 健身，將提出告示，通知使用者尚

行健身者尚未 尚未健身。

Per sonal Trainer APP

02. 熱身教學影片

熱身影片教學、肌肉提醒

03. 熱身完成

熱身完畢，所有指數都達到熱身標準，開始 健身。

UI/UX_ Design

04. 健身開始 解決健身初學者一進健身房時，不清楚要進行哪些 項目，重量、組數、動作。 01. 選擇訓練部位、器材

選擇健身部位

*+,-./

$%&!'()

!""#

Choose the part

Abdominals

Choose the grow msucle part

Arm

3ectoralis

WORKOUT

explore

Abdominals

Chesk press machine

查看健身房器材， 選擇器材

This week practice day S

M

T

W

T

F

S

F

S

查看健身房器材 - 選擇器材

Sover Machine This week practice day S

012,3

M

T

W

T

012,3

組數、重量、次數 教導初學者， 給予提醒、教學。

012,3

012,3

Per sonal Trainer APP

02. 訓練方式、教學影片

*+,-./

$%&!'()

03. 器材示範影片

!""#

Teaching course

示範影片 健 身 細 節 提 醒， 教導初學者。 Demonstration video

Workout procedure

Chesk press machine

1.Breath in

Demonstration Video

EQUIPMENT DEATIL Setting the equipment before begging workout

SET

3

WEIGHT

5

set

8

pound

Check the setting are be ok.

012,3

REPS

012,3

terms

START FITNESS

012,3

012,3

!

When you workout you cant Helium

Next

示範影片 健身細節提醒，教導初學者。

UI/UX_ Design

05. 健身教學影片 健身開始時，能透過影片、肌肉感測的教學，提醒 使用者肌肉是否有達到正確指數。施力位置是否正 確。

影片教學開始，觀看教學，也能轉換到較為 詳細的肌肉感測，看看是否有達到有效的健 身效果。 心律、簡易肌肉量、時間、組數的顯示，讓使用者 能清楚目前狀況。

Per sonal Trainer APP

06. 肌肉感測功能 健身時，最重要的是肌肉發力的位置是否正確、發 力是否過大，因此透過感測裝置，讓健身能更為準 確、有效率。

18%

92%

56%

38%

Muscle percentage

!

Muscle keeping 60% is great,80+% will hurt.

0-20%

20-40%

過輕、肌肉尚未發力

40-80%

80+%

處於最適合發力狀態 過輕、肌肉尚未發力

發力過大

UI/UX_ Design

Introduce app video. 介紹 app 的重點、使用族群，情境帶入，讓觀賞的人能更 了解該 app 的價值，影片中介紹使用者的使用情境、痛點 、滿足點、我要如何達成，以及 app 如何操作，介紹健身 app 的設計。

Video time-1 min 27s Video:https://youtu.be/kkpszUXnNUM

Per sonal Trainer APP

Section chart.

UI/UX_ Design

Style research.

Version 1.

*+,-./

!""#

$%&!'()

/0$123

&''(

)*+&,-.

PROFILE

Fitness

Mechanical training

Stretching

Abdominal m

Mechanical training If you are newer choose this one!

29

days

Arm

Fitness day

Freestyle training Start fitness

Freestyle training

Pectoral mu

Grow Muscle

You can see the muscle grow procedure

012,3

/DEHO

Version 2.

012,3

*+,-./

012,3

$%&!'()

012,3

!""#

/DEHO

!"#$%

*+,-./

Warm up

!

!"#$%

!"#$%

$%&!'()

!"#$%

!""#

!"#$%

/DEHO

!"#$%

*+,-./

$%&!'()

Choose the p

Complete warm up

Abdom

Are you ready fitness?

If you want to use the instruct you must warm up your body,or you will get hurt.

Choose the gro

Warm up items

Abdominals

Arm

WORKOU Chesk press machine

Great let start workout!

This week practice day S

Conculsion

Stretch

To use the low weight

版本1在視覺上 看起來較為沈重， 易造成使用者在 整 體 流 程 上， 造 成心理壓力。

Heart rate

Muscle stretch

Temperature

99

01:42

37.5c

Running 20 min warm up ypur body.

012,3

012,3

T

W

T

F

S

F

S

Sover Machine This week practice day S

Aerobic

M

M

T

W

T

START WORKOUT

012,3

012,3

012,3

012,3

012,3

012,3

012,3

012,3

0

Per sonal Trainer APP

/0$123

&''(

)*+&,-.

Fitness plan

part Abdominal

Protein

Stretching

Arm

Pectoral

Adult ďŹ tness need protein

muscle

Foods high in Protein

Sets

Weight

Terms

20KG

8-12

uscle

!"#$%

!"#$%

!""#

/DEHO

!"#$%

!"#$%

*+,-./

!"#$%

$%&!'()

START

!"#$%

!""#

Teaching course

part

Where to buy

/DEHO

!"#$%

!"#$%

!"#$%

*+,-./

$%&!'()

Video

MUSCLE SITUATION

!"#$%

!""#

!"#$%

*+,-./

!"#$%

$%&!'()

5

Equipment

!"#$%

!""#

MUSCLE SITUATION Chesk press machine

ow msucle part

012,3

Cooking skill

!"#$%

/DEHO

Sensor

minals

UT

90g

Weight

8/3 Reps/Set

SNESOR

3ectoralis

explore

18%

92%

56%

38%

Chesk press machine Demonstration Video

EQUIPMENT DEATIL Setting the equipment before begging workout

SET

3

WEIGHT

REPS

5

set

8

pound

Check the setting are be ok.

terms

Muscle percentage

!

0-20%

Heart rate

Muscle stretch

Time

Reps/set

99

01:42

01:42

5

START FITNESS

PASE WORKOUT 012,3

012,3

012,3

012,3

012,3

Muscle keeping 60% is great,80+% will hurt.

20-40%

HOLD TO FINISH

40-80%

80+%

BACK TO VIDEO

UI/UX_ Design

Fitness personal trainer app Fitness personal trainer app

Per sonal Trainer APP

UI/UX_ Design

02.

Scissors app Concept: 希望透過 app 的推動，讓更多人願意 捐獻自己的頭髮，透過 app 的幫助， 能夠讓捐髮的人在捐髮前，能與捐髪 人進行互動、預約，再捐髮後，幫助 捐髮人能夠生長更為健康的頭髮。

UI/UX project / 2017

Sciccor s APP

Do hair-Help user h ave a good e xperienc e

Calender

Knowledge

DO-HAI R

Interaction

Personal style

UI/UX_ Design

Sense intent. 讓更多人願意進行義剪捐髮。 創造一個良好的義剪體驗流程，讓使用者能透過精靈的互動，創 造一個互動的驚喜效果，讓使用者能透過這樣的互動，吸引使用 者能更願意進行捐髮的意願。

"Knowledge"- 提供頭髮健康資訊 "Sweet"- 貼心服務 "Interesting"- 有趣培養方式 UP!

"Increase willingness"- 增加捐髮意願 "Interaction"- 增加互動

Elf interaction

Know context. 義剪進行流程。 目前進行義剪的流程，只提供 剪髮服務，並沒有任何其他誘 因，吸引更多自願者。

02. 依約定的時間到達指定地 點，義剪師進行義剪工作。

01. 有意願進行義剪的人，上 網進行報名動作。

03. 感謝回饋信，簡訊、mail 傳送感謝信。

Sciccor s APP

Know people. 目標族群：16-25 年輕男女生。

進行捐髮動機： 進行捐髮的人，目前多為年輕族群，因為該族群更願意去奉獻頭髮，無論是做愛心、或是嚐 鮮體驗，都是進行捐髮的動力。

Frame insight.

APP 設計特點：

01. 捐髮意願

" 萌生捐髮意願開始，小精靈與意願者進行互動。"

01.

萌生捐髮意願時，教導該如何保養 頭髮、捐髮規定、預定捐髮。 02. 剪髮過程

02.

03.

剪 髮 時， 美 髮 師 提 供 造 型 上 的 建 議，就算短髮，也能擁有造型，讓 捐髮者能更有意願進行捐髮。 捐髮後，建立捐髮者與美髮師溝通管道， 如後續有頭髮上的問題，都能與美髮師聯 絡，app 小精靈也會給予適度的護髮資訊 與互動樂趣。

03. 剪髮後續服務

UI/UX_ Design

Function.

9:24 AM

9:24 AM

9:24 AM

CALENDAR

SETTING

January

mber M

Last time you Dye/Perm your hair

YY/MM/DD

T

W

Febr

T

F

S

S

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

How long you want to donate for this time

DO-HAIR

How many times have you donated your hair

times

12 DAYS

小精靈

成長效果，意願者一步一步 操作，精靈也會跟著成長， 讓意願者在有捐髮意願時， 能做一個教導的行為。

登入設定

使用者進行設定： 目前髮長 預計捐髮日 有無染髮

9:00 am

Home

9:30 am

School

15:00 pm

Park

日期訊息

日曆紀錄，讓使用者持續 使用，與小精靈每日都能 互動。

Sciccor s APP

9:24 AM

9:24 AM

MENU

Done

FEEDBACK

9:24 AM

INFORMATION

Plait Style Still have

25

11day Hair care Massage SATIETY

Maintenance

EAT

Diet

多吃海帶、蛋白質可以擁有烏黑亮麗 的髮質唷！ MAINTENANCE

主要資訊畫面

回饋

個人檔案管理

25

日曆管理

資訊查看

髮型資訊

飲食資訊：每日飲食建議 更多保養資訊

美髮師、意願者溝通

捐髮機構聯絡窗口

保養資訊：捐髮後，保養頭髮

更多飲食資訊

UI/UX_ Design

Style research.

Version 1.

9:24 AM

9:24 AM

9:24 AM

SETTING

CALENDA

Januar

mber

Last time you Dye/Perm your hair

T

W

T

5

6

7

8

12

13

14

15

19

20

21

22

26

27

28

29

1

YY/MM/DD

How long you want to donate for this time

DO-HAIR

M

How many times have you donated your hair

times

9:00 am

9:30 am

12

15:00 pm

DAYS

Version 2.

9:24 AM

9:24 AM

9:24 AM

CALENDA

SETTING

Januar

mber M

T

W

T

5

6

7

8

12

13

14

15

19

20

21

22

26

27

28

29

1

Last time you Dye/Perm your hair

YY/MM/DD

How long you want to donate for this time

Conculsion 顏色上紅色比綠 色 更 能 有 互 動、 貼心的感覺。

DO-HAIR

How many times have you donated your hair

times

9:00 am

9:30 am

12 DAYS

15:00 pm

Sciccor s APP

9:24 AM

ry

9:24 AM

MENU

Done

Febr

F

S

S

2

3

4

9

10

11

16

17

18

23

24

25

30

9:24 AM

FEEDBACK

AR

Plait Style Still have

25

11day Hair care Massage

SATIETY

Maintenance

31

m

Home

m

School

INFORMATION

EAT

多吃海帶、蛋白質可以擁有烏黑亮麗 的髮質唷！

Diet

MAINTENANCE

m

Park

9:24 AM

AR

MENU

ry F

Done

FEEDBACK

9:24 AM

INFORMATION

Febr S

Plait

S

2

3

4

9

10

11

16

17

18

23

24

25

30

31

Style Still have

25

11day Hair care Massage SATIETY

m

Home

m

School

m

9:24 AM

Maintenance

EAT

Diet

多吃海帶、蛋白質可以擁有烏黑亮麗 的髮質唷！

Park

MAINTENANCE

UI/UX_ Design

Scissors App D o n a t e h a r i h ave go o d a n d swe e t experience.

Sciccor s APP

UI/UX_ Design

Web design project / 2017

nepO

02.

¥¡∂° ≠≠©w

µL¶

∏tΩœ≠À

7-11activity web design Concept : 711 設計聖誕節活動，以 711 吉祥物 -open 將， 提 高 711 在 聖 誕 節 活 動 的 銷 售 率。 為 711 的 活 動 網 站 進 行 微 體 驗 設 計， 搭 配 色 彩、互動效果，讓使用者觀賞的時候也能 感受聖誕佳節。

¶L®}´

Àº∆¬ß™´≤∞

Web design

UI/UX_ Design

Website overview. 以繽紛、驚喜的意象作為整體網站 設計的氣氛營造。 讓使用者在體驗網站的時候都會有 驚喜的互動效果。 活動主題的發想以驚喜箱為主，讓 12 月的氣氛中，都能有聖誕佳節的 陪伴。

互動效果 當使用者滑到該頁面 時。跑出合作影片介紹。

活動介紹

以驚喜盒為發想，使用者每天都能抽 到一個小禮物，當聖誕節當天，便會 抽出大禮。

Web design

購物欄位設計，點選想購物的物品，該物品將會於 open 將裡顯示。 創造驚喜、互動感。

互動效果 當使用者購物時，所點選的物品，將會跑到中間。

UI/UX_ Design

Braun web redesign

Web design project/2017

Version 1. 台灣

瞭解更多

產品服務

C o p y r i g h t © 2 0 16 Pro cter & G a m b le 保留一切權利。

聯絡

溫度計 血壓計

瞭解更多

客戶服務

產品購買地點

使用條款

隱私權注意事項

標誌

Web design

Concept: 為 braun 創 立 更 佳 的 視 覺 網 站、 讓 使 用 者 在 逛 braun 要搜尋產品時，能夠更快速的搜尋到想要 找的產品、想要搜尋的內容。

Version 2. 百靈世界

產品介紹

產品服務

客戶服務

產品購買地點

男士儀容

女士美容

口腔護理

溫度計 血壓計

首頁

網站地圖

人才招募

新聞

Cop yr ig h t © 2 0 1 6 P ro cter & Gamble 保留一切權利。

使用條款

隱私權注意事項

標誌

台灣

Por tfolio

Graphic design.

Index

Poster

Painting

Animation

Graphic_ Design

Poster design.

Concept:

使用字體、字型作為海報的基礎發想，透過黑、白、灰無彩色的字 型與幾何元素，傳達字體自身的情感，並且運用字體構成圖像，包 含表情、飛翔。打破字體原本的想像。

it at th eY Jifo el P Fo ng E Op low oetry r m . R enin Bo ore d., g x in of th info Wu July Dep e N rm fong 15-3 art ew T ati m on Distr 0, 20 ent ypo g ,c all ict, 15 fr of V raph 88 Ta om isu y 6-4 ich 9 al -2 un AM Com 33 g, 23 41 -4PM mu nic 00 34 0 ex 9 T ati on t 7 aiw ,C 18 YU 1-4 an, R T OC

hib

8,

Ex

16

An

Poster design

Graphic_ Design

Poster design.

E n j oy f o od l i k e p l ayg rou n d

Pl a y g roun d f o o d desig n

Poster design

Food poster

Dishes 摩天輪

雲霄飛車

鬼屋

雲霄飛車

摩天輪 Color

馬戲團

Color

Food

Food

運用藍紫色，來代表恐 懼、橘紅、黃代表興奮 ，來傳達“雲霄飛車”又 恐懼又興奮的心情。

運用粉、紫、藍、透 明度、漸層來傳達摩 天輪戀愛的感覺。

Food

c o n c e pt

馬戲團 Color

運用全暖色調的色彩 ，來營造熱鬧、繽紛 的馬戲團氣氛。

Food

鬼屋 Color

紫色、藍色、暗藍色 用這幾個暗色的顏色 來傳達鬼屋的意象。

Food

Graphic_ Design

Animation.

1.

4.

2.

5.

Video:https://youtu.be/ZoGbO1qG0Qo 3.

Animation design

About chi liang yu

1.

4.

2.

5.

Video:https://youtu.be/5w-56M_jYMo 3.

Painting.

Graphic_ Design

Painting

color pencil / watercolor / maker

Painting.

Graphic_ Design

Painting

Sketch

Por tfolio

Product design.

Index

Catcher trap

Plant society

Xbox speaker

Product_ Design

01

.

Catcher trap Concept : 探討第三世界 - 非洲，所面臨的瘧疾問題， 從 目 前 處 理 措 施 進 行 探 討， 從 使 用 者 目 前 麽困境、心態，找出 insight.

Third world project / 2017

Catcher trap

Product_ Design

About mararia.

The area

PLASMODIUM

AFTICA

M

A

L

A

R

I

A

KILLS

3000 CHILDREN

EVERYDAY

THE AREA

造成的原因 關 於 瘧 疾， 感 染 的 原 因 有 三 種： 瘧 原 蟲、 血 液、 蚊 子 叮 咬。 然 而 會 造 成 這 樣 的 原 因 包 括 公 共 建 設 不 足、 住 民 對 於 瘧 疾 的 認 知， 以 上 因 素， 都 會 造 成 瘧疾至今迫害於非洲。

瘧疾遍佈非洲的原因 1. 非洲人不認為瘧疾是項過於嚴重的疾 病，大部分的瘧疾初期都還只是感冒、 發燒的症狀， 2. 公共建設的不足。

01.

02.

Catcher trap

Case study.

目前處置瘧疾方式

藥物 部分地區仍然無法有效地接收 的藥物的治療。

蚊帳 蚊帳所產生的問題 - 文化衝 突， 科 學 家 調 查 發 現， 蚊 帳 使 用率不高。

DDT 藥物噴灑 DDT

1950-1960 年代，美國曾家實 施 這 項 計 畫。 但 後 來 衍 生 許 多 不 好 的 影 響， 因 此 該 項 計 畫 宣 告失敗。

可口可樂藥物配送 透 過 可 口 可 樂 行 銷 的 手 法， 將 藥物運送到部分非洲。

Product_ Design

Issue. 綜合以上 case study 的問題，產生的主因在於： 文化不同導致使用者不願意使用產品、醫療資源平均無法有效分 配，DDT 藥物噴灑後造成後遺症。 因此我著重的點在於如何讓非洲洲民更能接受他人的幫助。讓非 洲洲民減少被蚊子叮咬的機率。

Gap GAP

DESIGN Design

USER User

Insight.

GOAL 文化衝突，是目前我所觀察到的洞見。 如何將設計帶入非洲將是我所著重的設計點。 從 " 造型、器具、顏色 "，這三方面進行設計目的是 為了這項設計擺在家中是自然的、不突兀的。

解決文化衝突的三要素

Form

Color

Household utensils

Catcher trap

Mood board. 器物造型 觀察到許多非洲許多文化都 和圓形、人型有關。

環境 希 望 能 融 入 環 境、 人 文 的 設 計， 讓 我 的 設 計 融 入 於 非 洲 生活。

色彩 色 彩 參 考 自 然 的 顏 色， 以 湖 水綠、透明、褐色做為主色。

Product_ Design

Concept development. 非洲的造型語意，透過 image board 探討哪一種造型是符合非洲的 風俗民情，希望讓捕蚊器能自然進入家中，融入於使用者的日常當 中，讓文化能有所接軌，不會因為文化衝突產生排斥性。 Sketch

3

1

2

Catcher trap

Fnial concept

1

2

3

Model testing

Product_ Design

Final concept.

Catcher trap

Usage principle / Use flow.

co 2 Suga r CO2 / sugar

1. 放入墊片，填充發酵物 2. 放置家中角落 3. 欲更換時，只需將濾片丟掉即可。

Product_ Design

Final concept.

圖案， 長寬高

15cm

20cm

22cm

13cm

Catcher trap

捕蚊器

CATCHER TRAP

透過不同造型的捕蚊器，讓捕蚊器能受到非洲人民的接受， 讓文化衝土的缺點能夠解除。 透過棉片的替換，能不用時常清洗裡面的蚊子屍體，更換時 只需要替換棉片即可。

Product_ Design

Plant society

Society project / 2017

02.

Plant society Concept : 透過 research 的過程，從中發現台北“有機農民” 最想達到的事情，進而透過設計師的力量，讓有 機農民的需求能得以達成，透過都市種植，讓有 機概念能夠進行傳達。

Product_ Design

Sense intent.

Taipei

Organic Farmer Let the concept of environmental protection and health be implemented in citizens' homes .

Why is the organic farmer

Fresh vegetable

有 機 種 植， 讓 家 庭 食 用 更 為 安 全， 交 換 的 體 驗 設 計 改 善 社會冷漠。

透過交換蔬菜，讓社會熱絡。

新鮮蔬菜，為了家庭健康

Plant society

Marketing research.

Insight.

左邊都是目前市面 上，目前現有的產品， 分 成 植 栽 箱、 大 面 積 種植組。 植栽箱的缺點為裡面 的並不是天然而是化 學的。 大面積種植缺點為需 有 較 大 的 空 間， 因 此 不適合台北家庭。

Keypoint.

Chemistr y water

現有植栽箱的養分來源都是化學組成的 水，因此雖然方便種植，但非有機組成。

Product_ Design

Planting field.

Balcony

User

台 北 剛 退 休 的 家 庭 主 婦， 讓 該族群能夠在退休後有生活 重 心， 也 能 連 結 人 與 人 之 間 的情感。

Enviroment

設 置 於 陽 台 因 於 在 環 境 下， 才 有 足 夠 的 陽 光、 土 壤 能 夠 讓 植 物 完 整 生 長， 也 能 解 決 排水問題。

Society helper

希望將種植過剩的蔬菜能捐 贈 社 會， 讓 需 要 幫 助 的 人 能 獲得幫助。

Plant society

Concept development.

Product_ Design

Using step.

1.

安裝完植栽後，進行裝土動作

2.

種植完後，種植，倒水

3.

種植完成後，進行收割！

4.

種植過程中，修菜葉。

Plant society

Product feature.

排水功能設計 使用者操作時，只需交第一 排的植物即可，其餘植物會 因為隨排水設計，方能澆到 水。

Product_ Design

03.

CAMPING SPEAKER Concept : 延 續 xbox 的 品 牌 精 神， 透 過 觀 察 xbox 的 精 神、 造 型 語 意。 透 過 造 型 的練習，學習如何將品牌造型與產品 作為結合。

Branding project / 2016

Xbox speaker

Product_ Design

Brand language.

Square Masculine Symmetr y Technology Neat Strong Delicate Square

Brand model .

Xbox speaker

Model detail

Product_ Design

Concept development.

Ske tc h

Tar get group 家庭露營的旅途中，少不了音樂的陪伴。也因此為家族露營族群設 計一款露營音響，讓聲音、氣氛能更為符合使用者的期待。

Music

Share

Camping speaker Gather

Happiness

Concept star t

Xbox speaker

Final concept

Product_ Design

Product feature.

How to connect

Play

Connect celephone 連接藍芽 享受音樂

Xbox speaker

ST EREO

AM

FM

Sc reen

Xbox speaker

Hi.

Im Chi.