20150413 台科大程式設計研究社演講邀約 : Let's talk about Web Design！

1. Application !
Design
Graphic!
Design
Web Design
20150413 Abby Chiu
Let’s talk about

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

3. Mobile app design Package designillustration
Web design Infographic designProduct design
Graphic design User experience

4. Web Design
Abby Chiu
Slideshare
去年 F2E 社群分享

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

6. 分享內容
1. Web 設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域

7. 分享⺫⽬目的!
（終⾝身志向？）
+ HTML & CSS
+ javascript
Photoshop
illustrator
sketch
…
HTML & CSS
javascript
…
Designer Front-end
+ Sense of beauty

8. New Tab
Web Design
在分享 Web 設計過程前

9. 先了解設計流程
Speckyboy.com

10. 理想中⼀一個完整的設計團隊會有
UI Designer!
使⽤用者介⾯面設計師
Visual Designer!
視覺設計師
UX Researcher!
使⽤用者經驗研究員

11. UI Designer!
使⽤用者介⾯面設計師
Visual Designer!
視覺設計師
UX Researcher!
使⽤用者經驗研究員
or
但現實常常是

12. 別怕，我們來談談
⼀一個⼈人怎麼做 Web 設計？

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

14. ⼀一個⼈人怎麼做 Web 設計？
a. 前期研究!
b. 實作
1. Web 設計過程

15. a. 前期研究!
b. 實作
1. Web 設計過程
(1). 了解 Web 設計趨勢（ Web Design Trends ）!
!
(2). 使⽤用者經驗研究（ User Experience ）
⼀一個⼈人怎麼做 Web 設計？

16. 了解 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

17. 了解 Web 設計趨勢
Longer scrolling + Parallax scrolling
53Sony
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

18. 了解 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 設計趨勢

19. 了解 Web 設計趨勢
Focus on typography
Google Fonts
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

20. 了解 Web 設計趨勢
Use of high-resolution moving images (Cinemagraphs)
Cinemagraphs examples
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

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

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

23. 了解 Web 設計趨勢
Responsive design：根據不同裝置做 navigation bar 的優化
Skinnyties
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

24. 了解 Web 設計趨勢
Responsive design：根據不同裝置做 navigation bar 的優化
Skinnyties
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

25. 了解 Web 設計趨勢
Responsive design：根據不同裝置做版⾯面的調整
Foodsense
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

26. 了解 Web 設計趨勢
⺫⽬目前我們談到的都只是 layout 上的調整
圖⽚片來源
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

27. 了解 Web 設計趨勢
⺫⽬目前我們談到的都只是 layout 上的調整
未來我們應該思考，在不同使⽤用時機、不同裝置上、
應該提供使⽤用者什麼內容？
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

28. ⼩小結論
了解 Web 設計趨勢是每天的功課
了解趨勢不是⼀一味跟進，
因應不同需求提出最好的
設計⽅方式。
前端技術⽇日新⽉月異，隨時
讓⾃自⼰己準備好武器。
Designer Front-end
1. Web 設計過程 > 前期研究 > 了解 Web 設計趨勢

29. ⼀一個⼈人怎麼做 Web 設計？
a. 前期研究!
b. 實作
(1). 了解Web設計趨勢（ Web Design Trends ）!
!
(2). 使⽤用者經驗研究（ User Experience ）
1. Web 設計過程

30. 使⽤用者經驗研究（ User Experience ）
什麼是使⽤用者經驗？
⼈人對於產品或系統或服務，
使⽤用前到使⽤用後產⽣生的認知與反應。
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

31. 使⽤用者經驗研究（ User Experience ）
什麼是使⽤用者經驗？
圖⽚片來源
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

32. 使⽤用者經驗研究（ User Experience ）
這是番茄醬，你看到哪些設計？
圖⽚片來源
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

33. 使⽤用者經驗研究（ User Experience ）
了解使⽤用者，你可以提供更好體驗
圖⽚片來源
Design the product Design the experience
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

34. 使⽤用者經驗研究（ 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 設計過程 > 前期研究 > 使⽤用者經驗研究

35. 使⽤用者經驗研究（ User Experience ）
例如：Z - Layout : Z 型佈局
研究轉化成
參考資料：Understanding the Split Layout in Web Design
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

36. 使⽤用者經驗研究（ User Experience ）
不⽌止因為排版好看，更利⽤用巧妙的
佈局，讓使⽤用者不知不覺瀏覽更多
的訊息，增加使⽤用者繼續瀏覽的意
願。
!
Web 設計不是藝術，著重在於信息
結構關係的整理，以及互動關係。
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

37. ⼩小結論
整理 Web 設計基本原則
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

38. 清楚提供網⾴頁導覽功能
永遠讓使⽤用者知道他在哪裡，要往哪去
Youtube Pinterest
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

39. 簡單清楚的內容
廢話不多說，著重在核⼼心內容的呈現
DropboxGoogle
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

40. ⼀一致性的版⾯面設計
減少視覺上的干擾，提升品牌或服務的專業度
Codecademy
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

41. 易懂的簡單圖⽰示
⼈人都是懶散的
Spotify
1. Web 設計過程 > 前期研究 > 使⽤用者經驗研究

42. ⼀一個⼈人怎麼做Web設計？
a. 前期研究!
b. 實作
1. Web 設計過程
(1). 釐清需求!
!
(2). 設計過程!
（繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿）

43. 釐清需求
1. Web 設計過程 > 實作 > 釐清需求
我們要表達什麼訊息給接收者（使⽤用者）？
圖⽚片來源

44. 釐清需求
1. Web 設計過程 > 實作 > 釐清需求
我們要表達什麼訊息給接收者（使⽤用者）？
圖⽚片來源

45. 釐清需求
我們要表達什麼訊息給接收者（使⽤用者）？
圖⽚片來源
1. Web 設計過程 > 實作 > 釐清需求

46. 釐清需求
Web 設計開始前，先畫出 Sitemap
圖⽚片來源
1. Web 設計過程 > 實作 > 釐清需求

47. 釐清需求
使⽤用 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 設計過程 > 實作 > 釐清需求

48. 釐清需求
利⽤用 Sitemap 勾勒網站的整體架構，顯⽰示網站所有的⾴頁⾯面連結資訊。
1. Web 設計過程 > 實作 > 釐清需求

49. ⼩小結論
做任何事情的第⼀一步是先釐清需求
1. 地基打穩了才能蓋房⼦子
!
2. 專注在最重要的事情上
1. Web 設計過程 > 實作 > 釐清需求

50. ⼀一個⼈人怎麼做Web設計？
a. 前期研究!
b. 實作
1. Web 設計過程
(1). 釐清需求!
!
(2). 設計過程!
（繪製草圖、繪製 Wireframe 製作 Prototype、視覺定稿）

51. 設計過程
1. Web 設計過程 > 實作 > 設計過程
⼀一切從草圖開始，先畫 Wireframe
Wireframe 是低擬真度的設計原型。去除所有花俏的視覺
元素，利⽤用線條、⾊色塊、⽂文字，規劃⾴頁⾯面的結構與功能。

52. 設計過程
⼀一切從草圖開始，先畫 Wireframe
任何跟產品有關的⼈人都應該使⽤用!
!
優點： 1. 快速實現腦中的想法。!
2. 討論可⾏行性，快速修改。!
3. 減少開發前期的成本。
1. Web 設計過程 > 實作 > 設計過程

53. 設計過程
針對不同裝置做規劃
Desktop Pad Mobile
1. Web 設計過程 > 實作 > 設計過程

54. 設計過程
提醒：善⽤用 Grid system 排版，與⼯工程師討論如何切圖
1. Web 設計過程 > 實作 > 設計過程

55. 設計過程
利⽤用 Grid system 排版的好處
圖⽚片來源
1. 讓元素與元素照著⼀一定的規則排列，
提升閱讀的舒適感。!
!
2. 減少與⼯工程師溝通的負擔。!
!
3. 確保⾃自⼰己設計的可⾏行性。
1. Web 設計過程 > 實作 > 設計過程

56. 設計過程
線上免費 Wireframe ⼯工具
Moqups
1. Web 設計過程 > 實作 > 設計過程

57. 設計過程
線上免費 Wireframe ⼯工具
Wireframe.cc
1. Web 設計過程 > 實作 > 設計過程

58. 設計過程
設計師常⽤用的 Wireframe / Prototype ⼯工具
Balsamiq
1. Web 設計過程 > 實作 > 設計過程

59. 設計過程
設計師常⽤用的 Wireframe / Prototype ⼯工具
Axure
1. Web 設計過程 > 實作 > 設計過程

60. 設計過程
接下來談設計常⾒見的⼯工具
Photoshop illustrator sketch3
uiweek
教學資源：
sketch 中⽂文網
1. Web 設計過程 > 實作 > 設計過程

61. 設計過程
但今天不談設計（那是天坑），我們談溝通
請畫⼀一個蘋果，寬20px
⾼高25px。像這樣！
Designer Front-end
好了！
寬20px
⾼高25px
1. Web 設計過程 > 實作 > 設計過程

62. 設計過程
但今天不談設計（那是天坑），我們談溝通
整體寬20px、總⾼高25px ，蘋果
的顏⾊色是#ec571d，葉⼦子顏⾊色是
＃1e771d，蘋果左右要對稱...
Designer Front-end
好了！
寬20px
⾼高15px
⾼高25px
1. Web 設計過程 > 實作 > 設計過程

63. 設計過程
圖⽚片來源
1. Web 設計過程 > 實作 > 設計過程

64. 設計過程
圖⽚片來源
1. Web 設計過程 > 實作 > 設計過程

65. 設計過程
與⼯工程師溝通的演化過程
1. ⽤用畫的!
2. ⽤用⼿手寫!
3. 請⼯工程師先寫出⼤大致上的版型，!
細節部分⾃自⼰己微調。!
4. ⾃自⼰己寫出來...
1. Web 設計過程 > 實作 > 設計過程

66. 設計過程
與⼯工程師溝通的演化過程
跟寫程式⼀一樣，能重複利⽤用的部分
就重複利⽤用。!
!
設計師希望⼯工程師：!
!
1. 先將標題的字型、字體⼤大⼩小、
顏⾊色統⼀一 ; 內⽂文與⾏行距也是。!
!
2. 能先對⿑齊就對⿑齊，設計師會謝!
謝你。
1. Web 設計過程 > 實作 > 設計過程

67. ⼩小結論
保持開放的⼼心態，學習不同事物並尊重彼此的專業。
術業有專攻，設計的部分還是交給設計師吧
Designer Front-end
1. Web 設計過程 > 實作 > 設計過程

68. 分享內容
1. Web設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域

69. 實務經驗分享
2. 實務經驗分享
MediaTek Cloud Sandbox：為 Maker 打造的物聯網平台
MediaTek Cloud Sandbox

70. 實務經驗分享
2. 實務經驗分享
從 Sitemap 開始，成為主管與⼯工程師間溝通的橋樑
MCS home page
news and updates
personal dashboard
navigation bar ( fix )
profile
logo
lab.com
landing page
brief introduction
news
sign up / in
FAQs
API resource
API sandbox
API reference
API error code
prototype detail
user privileges
notification
firmware
data channels
prototype information
edit
add / delete
priority
title / description / type
template
prototype profile
prototype photo
prototype state
chip
title
create test device
prototype list
prototype profile
prototype photo
prototype state
chip
title
development
log in / out
edit profile
read
create prototype ( first time )
add / delete user
add notification
upload firmware
edit
prototype photo
select chip
title
create / delete prototype edit
prototype photo
select chip
title
圖⽚片來源：MCS Sitemap

71. 實務經驗分享
利⽤用 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 email
input password
remember 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
notification
firmware
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
notification
firmware
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 / out
edit profile
side menu
home page
development
my devices
API resources
FAQs
personal dashboard
landing page1 2 3
4
5
2. 實務經驗分享

72. 實務經驗分享
不斷地修正、不斷地修正、不斷地修正
圖⽚片來源：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 integration
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 .
Feather 2 : Remote controller app
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 ...
Title
2014/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 Chiu
abby.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 integration
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 .
Feather 2 : Remote controller app
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 ...
Title
2014/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 Chiu
abby.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 Chiu
abby.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. 實務經驗分享

73. 實務經驗分享
通常我的桌⾯面是這樣⼦子的
圖⽚片來源：MCS web design
2. 實務經驗分享

74. 實務經驗分享
與⼯工程師們溝通時，利⽤用 Guideline ⽂文件
圖⽚片來源：MCS web design
2. 實務經驗分享

75. 實務經驗分享
圖⽚片來源：MCS web design
2. 實務經驗分享
與⼯工程師們溝通時，利⽤用 Guideline ⽂文件

76. 實務經驗分享
2. 實務經驗分享
利⽤用 Guideline ⽂文件的優點
1. 團隊合作時，確保輸出的品質⼀一致
!
2. 檢視⾃自⼰己的設計是否⼀一致、合理
!
3. 當有爭執時，有憑有據？

77. 實務經驗分享
2. 實務經驗分享
產品上線了，設計還未結束
定義問題
探討需求
概念設計 設計實作
收集反饋
分析數據

78. 分享內容
1. Web 設計過程!
2. 實務經驗分享!
3. 如何踏⼊入未知領域

79. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域
1. 勇敢探索 （ 其實我是⼯工業設計背景的 :D ）
!
2. 如何培養美感？

80. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 勇敢探索
Industrial
Design
概念設計
UI / UX
Design
第⼀一步總是最難的

81. 如何踏⼊入未知領域
Q.L.L LiVEBRiCKS
⽣生活磚
MediaTek
聯發科技
Startup 百⼈人企業 萬⼈人企業
接下來的路，其實也不容易
3. 如何踏⼊入未知領域 > 勇敢探索

82. 如何踏⼊入未知領域
整段路程，看起來像是⼀一條向上的曲線
3. 如何踏⼊入未知領域 > 勇敢探索

83. 如何踏⼊入未知領域
包含
1. 合作夥伴的增加
!
2. 專案的困難度、複雜度
!
3. 其他⼈人對你的期待
!
4. ⽣生活⽔水準與薪資福利
3. 如何踏⼊入未知領域 > 勇敢探索

84. 如何踏⼊入未知領域
怎麼做？
1. 看書 ( 實體書、線上書)
!
2. 上課、線上課程
!
3. 參加相關活動、讀書會、研討會
!
4. 學習⽤用關鍵字
!
5. 持續加強英⽂文能⼒力
3. 如何踏⼊入未知領域 > 勇敢探索

85. 如何踏⼊入未知領域
看書 ( 實體書、線上書)
Donald A. Norman 歐萊禮出版社
（設計師也愛逛天瓏書局）
3. 如何踏⼊入未知領域 > 勇敢探索

86. 如何踏⼊入未知領域
線上電⼦子書的資源⾮非常多
UXPin UIweek
3. 如何踏⼊入未知領域 > 勇敢探索

87. 如何踏⼊入未知領域
上課、線上課程
Coursera Codecademy
3. 如何踏⼊入未知領域 > 勇敢探索

88. 如何踏⼊入未知領域
參加相關活動、讀書會、研討會
HPX IxDA
3. 如何踏⼊入未知領域 > 勇敢探索
UiGathering

89. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域
1. 勇敢探索 （ 其實我是⼯工業設計背景的 ）
!
2. 如何培養美感？

90. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
上帝製造⼯工程師時

91. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
⼈人各有志嘛...

92. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
好啦其實有補救的⽅方法...

93. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
平⾯面設計基本原則
重複與交錯 節奏與韻律 對稱與均衡
對⽐比與調和 ⽐比例與適度 變異與秩序
虛實與留⽩白 變化與統⼀一

94. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
常常關注時事，打架也可以是⼀一種美
圖⽚片來源

95. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
圖⽚片來源
對稱與均衡，來看武媚娘

96. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
圖⽚片來源
對稱與均衡，來看武媚娘

97. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
⼦子姓網友推薦：design-seeds.com
觀察⽣生活中的美景，得到配⾊色的美感

98. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
Dix設計師推薦：desinion.com
玩玩⼆二選⼀一的⼩小遊戲

99. 如何踏⼊入未知領域
3. 如何踏⼊入未知領域 > 如何培養美感？
Siteinspire
其他⼩小⼯工具
Page Ruler
Adobe Kuler Page Ruler

100. Thank U all !
Abby Chiu
abbychiu1002@gmail.com