Application !Design

Graphic!Design

Web Design

20150413 Abby Chiu

Let’s talk about

邱靖瑄 Abby Chiu

三年以上 UI/UX、網⾴頁與應⽤用程式設計經驗。!現職聯發科技 UI/UX Designer，負責物聯網及⼤大數據相關設計。

Mobile app design Package designillustration

Web design Infographic designProduct design

Graphic design User experience

Web Design

Abby Chiu

Slideshare

去年 F2E 社群分享

今天程式研究社的分享現場聽眾組成

分享內容

1. Web 設計過程!

2. 實務經驗分享!

3. 如何踏⼊入未知領域

分享⺫⽬目的!（終⾝身志向？）

+ HTML & CSS + javascript

Photoshop illustrator sketch …

HTML & CSS javascript …

Designer Front-end

+ Sense of beauty

New Tab

Web Design

在分享 Web 設計過程前

先了解設計流程

Speckyboy.com

理想中⼀一個完整的設計團隊會有

UI Designer!使⽤用者介⾯面設計師

Visual Designer!視覺設計師

UX Researcher!使⽤用者經驗研究員

UI Designer!使⽤用者介⾯面設計師

Visual Designer!視覺設計師

UX Researcher!使⽤用者經驗研究員

or

但現實常常是

別怕，我們來談談

⼀一個⼈人怎麼做 Web 設計？

Web 設計過程!之⼀一個⼈人怎麼做 Web 設計？

⼀一個⼈人怎麼做 Web 設計？

a. 前期研究!

b. 實作

1. Web 設計過程

a. 前期研究!

b. 實作

1. Web 設計過程

(1). 了解 Web 設計趨勢（ Web Design Trends ）!!(2). 使⽤用者經驗研究（ User Experience ）

⼀一個⼈人怎麼做 Web 設計？

了解 Web 設計趨勢

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

1. Longer scrolling sites 2. Storytelling and interaction 3. Absence of large header background images 4. Removing non-essential design elements in favor of simplicity 5. Fix width centered site layout 6. Professional high quality custom photography 7. Flyout/slideout app-like menus 8. Hidden main menus 9. Very large typography 10. Performance and speed

10 Web design trends you can expect to see in 2015

資料來源：thenextweb

了解 Web 設計趨勢Longer scrolling + Parallax scrolling

53Sony

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢

1. Focus on typography 2. Card-based design 3. Almost-Flat Design 4. Big Photographic Elements 5. Decrease In Page Height 6. Storytelling and interaction 7. Use of high-resolution moving images 8. Responsive 9. Fix width centered site layout 10. Personalized User Experiences

Top 10 Web Design Trends that Boom in 2015- 2016

資料來源：perceptionsystem

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Focus on typography

Google Fonts

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Use of high-resolution moving images (Cinemagraphs)

Cinemagraphs examples

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Responsive design

2010 年 5 ⽉月，Ethan Marcotte 在「A List Apart」寫了⼀一篇開創性的⽂文章：Responsive Web Design。 !利⽤用：流動佈局 fluid grids、 媒介查詢 media queries 、 彈性圖⽚片 scalable images !創建了⼀一個在不同分辨率屏幕下都能漂亮地顯⽰示的網站。

圖⽚片來源

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Responsive design

Skinnyties

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Responsive design：根據不同裝置做 navigation bar 的優化

Skinnyties

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Responsive design：根據不同裝置做 navigation bar 的優化

Skinnyties

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢Responsive design：根據不同裝置做版⾯面的調整

Foodsense

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢⺫⽬目前我們談到的都只是 layout 上的調整

圖⽚片來源

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

了解 Web 設計趨勢⺫⽬目前我們談到的都只是 layout 上的調整

未來我們應該思考，在不同使⽤用時機、不同裝置上、 應該提供使⽤用者什麼內容？

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

⼩小結論了解 Web 設計趨勢是每天的功課

了解趨勢不是⼀一味跟進， 因應不同需求提出最好的 設計⽅方式。

前端技術⽇日新⽉月異，隨時 讓⾃自⼰己準備好武器。

Designer Front-end

1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

⼀一個⼈人怎麼做 Web 設計？

a. 前期研究!

b. 實作

(1). 了解Web設計趨勢（ Web Design Trends ）!!(2). 使⽤用者經驗研究（ User Experience ）

1. Web 設計過程

使⽤用者經驗研究（ User Experience ）什麼是使⽤用者經驗？

⼈人對於產品或系統或服務， 使⽤用前到使⽤用後產⽣生的認知與反應。

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）什麼是使⽤用者經驗？

圖⽚片來源

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）這是番茄醬，你看到哪些設計？

圖⽚片來源

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）了解使⽤用者，你可以提供更好體驗

圖⽚片來源

Design the product Design the experience

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）使⽤用者經驗研究影響設計

From Yahoo!’s Eye tracking studies： !• People scan the main sections of a page to determine what it’s

about and whether they want to stay longer. !• They make decisions about the page in as little as three seconds. !• If they decide to stay, they pay the most attention to the content

in the top part of the screen.

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）例如：Z - Layout : Z 型佈局

研究轉化成

參考資料：Understanding the Split Layout in Web Design

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

使⽤用者經驗研究（ User Experience ）

不⽌止因為排版好看，更利⽤用巧妙的佈局，讓使⽤用者不知不覺瀏覽更多的訊息，增加使⽤用者繼續瀏覽的意願。 !Web 設計不是藝術，著重在於信息結構關係的整理，以及互動關係。

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

⼩小結論整理 Web 設計基本原則

1. 清楚提供網⾴頁導覽功能 !2. 簡單清楚的內容 !3. ⼀一致性的版⾯面設計 !4. 易懂的簡單圖⽰示

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

清楚提供網⾴頁導覽功能永遠讓使⽤用者知道他在哪裡，要往哪去

Youtube Pinterest

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

簡單清楚的內容廢話不多說，著重在核⼼心內容的呈現

DropboxGoogle

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

⼀一致性的版⾯面設計減少視覺上的干擾，提升品牌或服務的專業度

Codecademy

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

易懂的簡單圖⽰示⼈人都是懶散的

Spotify

1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

⼀一個⼈人怎麼做Web設計？

a. 前期研究!

b. 實作

1. Web 設計過程

(1). 釐清需求!!(2). 設計過程! （繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿）

釐清需求

1. Web 設計過程 > 實作 > 釐清需求

我們要表達什麼訊息給接收者（使⽤用者）？

圖⽚片來源

釐清需求

1. Web 設計過程 > 實作 > 釐清需求

我們要表達什麼訊息給接收者（使⽤用者）？

圖⽚片來源

釐清需求我們要表達什麼訊息給接收者（使⽤用者）？

圖⽚片來源

1. Web 設計過程 > 實作 > 釐清需求

釐清需求Web 設計開始前，先畫出 Sitemap

圖⽚片來源

1. Web 設計過程 > 實作 > 釐清需求

釐清需求使⽤用 Sitemap 的好處

參考資料：Why You Should Build A Sitemap Before Designing Your Site

1. Clarify Your Site’s Purpose and Goals 2. Avoid Duplicate Content 3. Streamline Your Conversion Funnel 4. Get Everyone On the Same Page

1. Web 設計過程 > 實作 > 釐清需求

釐清需求利⽤用 Sitemap 勾勒網站的整體架構，顯⽰示網站所有的⾴頁⾯面連結資訊。

1. Web 設計過程 > 實作 > 釐清需求

⼩小結論做任何事情的第⼀一步是先釐清需求

1. 地基打穩了才能蓋房⼦子 !2. 專注在最重要的事情上

1. Web 設計過程 > 實作 > 釐清需求

⼀一個⼈人怎麼做Web設計？

a. 前期研究!

b. 實作

1. Web 設計過程

(1). 釐清需求!!(2). 設計過程! （繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿）

設計過程

1. Web 設計過程 > 實作 > 設計過程

⼀一切從草圖開始，先畫 Wireframe

Wireframe 是低擬真度的設計原型。去除所有花俏的視覺元素，利⽤用線條、⾊色塊、⽂文字，規劃⾴頁⾯面的結構與功能。

設計過程⼀一切從草圖開始，先畫 Wireframe

任何跟產品有關的⼈人都應該使⽤用!!優點： 1. 快速實現腦中的想法。! 2. 討論可⾏行性，快速修改。! 3. 減少開發前期的成本。

1. Web 設計過程 > 實作 > 設計過程

設計過程針對不同裝置做規劃

.K8'$4K%-5лȞ˖Ө ʖˠўω Žؾ Ԕāĵ

лȞ˖Ө

лȞॏ��

лȞॏ��

.K8'$4K%-5

лȞ˖Ө

лȞॏ��

Desktop Pad Mobile

1. Web 設計過程 > 實作 > 設計過程

設計過程提醒：善⽤用 Grid system 排版，與⼯工程師討論如何切圖

1. Web 設計過程 > 實作 > 設計過程

設計過程利⽤用 Grid system 排版的好處

圖⽚片來源

1. 讓元素與元素照著⼀一定的規則排列，提升閱讀的舒適感。!

!2. 減少與⼯工程師溝通的負擔。!!3. 確保⾃自⼰己設計的可⾏行性。

1. Web 設計過程 > 實作 > 設計過程

設計過程線上免費 Wireframe ⼯工具

Moqups

1. Web 設計過程 > 實作 > 設計過程

設計過程線上免費 Wireframe ⼯工具

Wireframe.cc

1. Web 設計過程 > 實作 > 設計過程

設計過程設計師常⽤用的 Wireframe / Prototype ⼯工具

Balsamiq

1. Web 設計過程 > 實作 > 設計過程

設計過程設計師常⽤用的 Wireframe / Prototype ⼯工具

Axure

1. Web 設計過程 > 實作 > 設計過程

設計過程接下來談設計常⾒見的⼯工具

Photoshop illustrator sketch3

uiweek

教學資源：sketch 中⽂文網

1. Web 設計過程 > 實作 > 設計過程

設計過程但今天不談設計（那是天坑），我們談溝通

請畫⼀一個蘋果，寬20px ⾼高25px。像這樣！

Designer Front-end

好了！

寬20px

⾼高25px

1. Web 設計過程 > 實作 > 設計過程

設計過程但今天不談設計（那是天坑），我們談溝通

整體寬20px、總⾼高25px ，蘋果的顏⾊色是#ec571d，葉⼦子顏⾊色是＃1e771d，蘋果左右要對稱...

Designer Front-end

好了！

寬20px

⾼高15px ⾼高25px

1. Web 設計過程 > 實作 > 設計過程

設計過程

圖⽚片來源

1. Web 設計過程 > 實作 > 設計過程

設計過程

圖⽚片來源

1. Web 設計過程 > 實作 > 設計過程

設計過程與⼯工程師溝通的演化過程

1. ⽤用畫的!2. ⽤用⼿手寫!3. 請⼯工程師先寫出⼤大致上的版型，! 細節部分⾃自⼰己微調。!4. ⾃自⼰己寫出來...

1. Web 設計過程 > 實作 > 設計過程

設計過程與⼯工程師溝通的演化過程

跟寫程式⼀一樣，能重複利⽤用的部分就重複利⽤用。!!設計師希望⼯工程師：!!1. 先將標題的字型、字體⼤大⼩小、顏⾊色統⼀一 ; 內⽂文與⾏行距也是。!

!2. 能先對⿑齊就對⿑齊，設計師會謝! 謝你。

Ԇʛ

ʮNJ

ʮNJ

ʮNJ

ʮNJ

Ԇʛ

ʮNJ

ʮNJ

ʮNJ

ʮNJ

1. Web 設計過程 > 實作 > 設計過程

⼩小結論保持開放的⼼心態，學習不同事物並尊重彼此的專業。 術業有專攻，設計的部分還是交給設計師吧

Designer Front-end

1. Web 設計過程 > 實作 > 設計過程

分享內容

1. Web設計過程!

2. 實務經驗分享!

3. 如何踏⼊入未知領域

實務經驗分享

2. 實務經驗分享

MediaTek Cloud Sandbox：為 Maker 打造的物聯網平台

MediaTek Cloud Sandbox

實務經驗分享

2. 實務經驗分享

從 Sitemap 開始，成為主管與⼯工程師間溝通的橋樑

MCS home page

news and updatespersonal dashboard

navigation bar ( fix )

profilelogo

lab.com

landing page

brief introductionnews

sign up / in

FAQs

API resource

API sandboxAPI referenceAPI error code

KL]LSVWLY

prototype detail

user privileges notificationfirmware

data channels

prototype information

edit

add / deleteprioritytitle / description / type template

prototype profile

prototype photoprototype statechip

title

create test device

prototype list

prototype profile

prototype photoprototype statechip

title

development

log in / outedit profile

readcreate prototype ( first time )

add / delete useradd notificationupload firmware

edit

prototype photoselect chip

title

create / delete prototype edit

prototype photoselect chip

title

圖⽚片來源：MCS Sitemap

實務經驗分享利⽤用 Wireframe 呈現完整的 UI flow ，是下⼀一步視覺設計的基礎

圖⽚片來源：MCS web UI flow

MCS 2.0 Flowchart 2014 / 11 / 07

Sign in page

sign in

forgot password

sign in with fb

create an account

input emailinput passwordremember me

Development

create product

prototype photo

edit

prototype name / description / state / chip

detail

prototype profile

prototype list

prototype detail

edit

prototype photo

prototype profile

prototype name / description / state / chip

data channel

user privileges notificationfirmware

data channel

prototype information ( tab )

add component

data channel template

edit

data channel description

show data record

data channel name

test device photo

edit

test device name / description / state / chip

detail

My devices

test device profile

test device list

My devices

edit

test device photo

test device profile

test device name / description / state / chip

data channel

notificationfirmware

data channel

test device information ( tab )

data channel template

data channel description

show data record

data channel name

MCS home page

navigation bar ( fix )

personal dashboardnews and updates

side menu ( fix )

recent activity

top navigation bar

logo profile

log in / outedit profile

side menu

home page

development

my devices

API resources

FAQs

personal dashboard

landing page1 2 3

4

5

2. 實務經驗分享

實務經驗分享不斷地修正、不斷地修正、不斷地修正

圖⽚片來源：MCS web design

Home page

News from Mediatek Cloud Sandbox

MCS 2.0 is ready now !2014/10/16 15:30

Welcome to join Mediatek Cloud Sandbox !2014/10/16 15:30

Hi makers , we have release the MCS 2.0 already. We add a lot of new features on it as following :

Feather 1 : MT7681 integrationWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .

Feather 2 : Remote controller appWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek ...

Title2014/10/16 15:30

You can post something news to makers.

We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .

We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are ...

More

More

More

You just join Cloud Sandbox.just now

Recent Activity

Create new

Abby Chiuabby.chiu@mediatek.com

Product

0

Management

My Devices

Development

Home page

FAQs

API Resources

Abby Chiu

Dashboard

News from Mediatek Cloud Sandbox

MCS 2.0 is ready now !2014/10/16 15:30

Welcome to join Mediatek Cloud Sandbox !2014/10/16 15:30

Hi makers , we have release the MCS 2.0 already. We add a lot of new features on it as following :

Feather 1 : MT7681 integrationWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek .

Feather 2 : Remote controller appWe are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek ...

Title2014/10/16 15:30

You can post something news to makers.

We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Medi-atek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek We are Mediatek .

More

More

You just join Cloud Sandbox.just now

Recent Activity

Create new

Abby Chiuabby.chiu@mediatek.com

Product

0

Cloud Sandbox BETA Abby Chiu

Development

Dashboard

My Devices

Support

API Resources

You just join Cloud Sandbox.just now

Recent Activity

Create new

Abby Chiuabby.chiu@mediatek.com

Prototype

0

News from Mediatek Cloud Sandbox

What’s New for MCS 2.0 ? 2014/10/16 15:30

With supports for nine data types it's easy to create your prototype. And to better support the MediaTek LinkIt Con-nect 7681 development platform you've access to data types for GPIO and PWM.

More data type

The new LinkIt Connect 7681 development board is now available for you to use.ces such as smart lighting, and door

LinkIt Connect 7681 Development Board Support

Welcome to MediaTek Cloud Sandbox 2.0 beta. We've enhanced our platform from the 1.0 closed test environment and added several new features:

Cloud Sandbox Abby ChiuDevelopment My Devices HelpResources

2. 實務經驗分享

實務經驗分享通常我的桌⾯面是這樣⼦子的

圖⽚片來源：MCS web design

2. 實務經驗分享

實務經驗分享與⼯工程師們溝通時，利⽤用 Guideline ⽂文件

圖⽚片來源：MCS web design

2. 實務經驗分享

實務經驗分享

圖⽚片來源：MCS web design

2. 實務經驗分享

與⼯工程師們溝通時，利⽤用 Guideline ⽂文件

實務經驗分享

2. 實務經驗分享

利⽤用 Guideline ⽂文件的優點

1. 團隊合作時，確保輸出的品質⼀一致 !2. 檢視⾃自⼰己的設計是否⼀一致、合理 !3. 當有爭執時，有憑有據？

實務經驗分享

2. 實務經驗分享

產品上線了，設計還未結束

定義問題 探討需求 概念設計 設計實作 收集反饋

分析數據

分享內容

1. Web 設計過程!

2. 實務經驗分享!

3. 如何踏⼊入未知領域

如何踏⼊入未知領域

3. 如何踏⼊入未知領域

1. 勇敢探索 （ 其實我是⼯工業設計背景的 :D ） !2. 如何培養美感？

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 勇敢探索

Industrial Design

概念設計UI / UX Design

第⼀一步總是最難的

如何踏⼊入未知領域

Q.L.L LiVEBRiCKS ⽣生活磚

MediaTek 聯發科技

Startup 百⼈人企業 萬⼈人企業

接下來的路，其實也不容易

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域整段路程，看起來像是⼀一條向上的曲線

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域包含

1. 合作夥伴的增加 !2. 專案的困難度、複雜度 !3. 其他⼈人對你的期待 !4. ⽣生活⽔水準與薪資福利

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域怎麼做？

1. 看書 ( 實體書、線上書) !2. 上課、線上課程 !3. 參加相關活動、讀書會、研討會 !4. 學習⽤用關鍵字 !5. 持續加強英⽂文能⼒力

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域看書 ( 實體書、線上書)

Donald A. Norman 歐萊禮出版社 （設計師也愛逛天瓏書局）

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域線上電⼦子書的資源⾮非常多

UXPin UIweek

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域上課、線上課程

Coursera Codecademy

3. 如何踏⼊入未知領域 > 勇敢探索

如何踏⼊入未知領域參加相關活動、讀書會、研討會

HPX IxDA

3. 如何踏⼊入未知領域 > 勇敢探索

UiGathering

如何踏⼊入未知領域

3. 如何踏⼊入未知領域

1. 勇敢探索 （ 其實我是⼯工業設計背景的 ） !2. 如何培養美感？

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

上帝製造⼯工程師時

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

⼈人各有志嘛...

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

好啦其實有補救的⽅方法...

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

平⾯面設計基本原則

重複與交錯 節奏與韻律 對稱與均衡 對⽐比與調和 ⽐比例與適度 變異與秩序 虛實與留⽩白 變化與統⼀一

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

常常關注時事，打架也可以是⼀一種美

圖⽚片來源

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

圖⽚片來源

對稱與均衡，來看武媚娘

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

圖⽚片來源

對稱與均衡，來看武媚娘

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

⼦子姓網友推薦：design-seeds.com

觀察⽣生活中的美景，得到配⾊色的美感

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

Dix設計師推薦：desinion.com

玩玩⼆二選⼀一的⼩小遊戲

如何踏⼊入未知領域

3. 如何踏⼊入未知領域 > 如何培養美感？

Siteinspire

其他⼩小⼯工具

Page Ruler

Adobe Kuler Page Ruler

Thank U all !

Abby Chiuabbychiu1002@gmail.com