1. Web Design
設計過程與合作經驗分享
Abby Chiu

2. Abby Chiu
邱靖瑄
!
email :
abbychiu1002@gmail.com
!
前⾹香蕉⼈人角⾊色設計師。︒
⽬目前在永豐餘的⼦子公司：LiVEBRiCKS
⽣生活磚擔任 UI/UX Designer。︒有兩
年多的⼯工作經驗。︒

3. 分享⼤大綱
01. 什麼是網⾴頁設計︖？
02. 網站設計的過程
03. 如何培養美感︖？

4. 分享⽬目的
Designer Programmer
photoshop
illustrator
sketch
+ html & css
+ java script
html & css
java script
Sketch
+ sense of beauty

5. 01.什麼是網⾴頁設計︖？
Web Design
is Graphic Design?
平⾯面設計基本原則：重複與交錯、︑節奏與韻律、︑對稱
與均衡、︑對比與調和、︑比例與適度、︑變異與秩序、︑虛
實與留⽩白、︑變化與統⼀一。︒

6. 01.什麼是網⾴頁設計︖？
對了⼀一點點！
基礎排版原則是相同的。︒
!
不管是網⾴頁設計還是平⾯面設計，設計者都需要具
備平⾯面設計知識以及良好的設計美感。︒
!

7. 不同的地⽅方
平⾯面設計網⾴頁設計
⾊色彩模式不同 : CMYK RGB
媒介不同 : 紙張、︑不同材質之媒介不同尺⼨寸的顯⽰示器
展現形式 : 純靜態擁有更多動態元素與互動性
設計重點 : ⾊色彩運⽤用注重視覺的衝擊⼒力
及視覺流的引導
信息結構關係的整理
（資料參考：http://www.blueidea.com/design/doc/2012/8771.asp）
01.什麼是網⾴頁設計︖？

8. 01.什麼是網⾴頁設計︖？
重點
網⾴頁和平⾯面設計最⼤大的不同在於 互動性 與 呈現媒介 的不同。︒

9. 01.什麼是網⾴頁設計︖？
對於不同角⾊色⽽而⾔言
1. ⼀一套 code 滿⾜足所有需求
2. 維護容易。︒
Programmer
痙㮳㮳⠫
為什麼要做響應式網⾴頁︖？
因為 ...

10. 01.什麼是網⾴頁設計︖？
對於不同角⾊色⽽而⾔言
為什麼要做響應式網⾴頁︖？
因為 ...
1. 提供最佳的視覺體驗
2. 簡化操作⾏行為
Designer
痙㮳㮳⠫

11. 01.什麼是網⾴頁設計︖？
對於不同角⾊色⽽而⾔言
為什麼要做響應式網⾴頁︖？
所以 ...
Designer
設計師必須要做出至少 三種 排版。︒
痙㮳㮳⠫

12. 分享⽬目的
Designer Designer

13. 02.網站設計的過程
New Tab
Web Design

14. （ ⽣生活磚官網 ）

15. 02.網站設計的過程
a. 前期研究
b. 繪製草圖
c. 實作

16. 02.網站設計的過程
a. 前期研究
b. 繪製草圖
c. 實作

17. 02.網站設計的過程a.前期研究
a. 前期研究
1. 網站設計趨勢（ Web Design Trends ）
!
2. 使⽤用者經驗研究（ User Experience ）
!
3. 釐清思緒
!

18. 02.網站設計的過程a.前期研究
a. 前期研究
關鍵字：
!
響應式網站（RWD）
⼀一⾴頁滾動式網站（Parallax Scrolling）
扁平化設計風格（Flat design style）
1. 網站設計趨勢（ Web Design Trends ）
!
2. 使⽤用者經驗研究（ User Experience ）
!
3. 釐清思緒
!

19. 響應式網站
（圖⽚片來源：http://skinnyties.com/）
02.網站設計的過程a.前期研究

20. 響應式網站
（圖⽚片來源：http://skinnyties.com/）
02.網站設計的過程a.前期研究

21. 響應式網站
（圖⽚片來源：http://skinnyties.com/）
02.網站設計的過程a.前期研究

22. 02.網站設計的過程a.前期研究
⼀一⾴頁滾動式加上視差滾動效果
Sony tinke 53

23. 02.網站設計的過程a.前期研究
a. 前期研究
1. 網站設計趨勢（ Web Design Trends ）
!
2. 使⽤用者經驗研究（ User Experience ）
!
3. 釐清思緒
!

24. 02.網站設計的過程a.前期研究
使⽤用者經驗研究影響設計
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.
（資料參考：Understanding the Split Layout in Web Design）

25. 02.網站設計的過程a.前期研究
Z - Layout : Z 型佈局
（資料參考：Understanding the Split Layout in Web Design）
使⽤用者經驗研究影響設計
轉化成

26. （ iPad mini page ） （ Microsoft ）
02.網站設計的過程a.前期研究
使⽤用者經驗研究影響設計
Z - Layout : Z 型佈局
!
不⽌止因為排版好看，更利⽤用巧妙的佈局，讓使⽤用
者不知不覺瀏覽更多的訊息，增加使⽤用者繼續瀏
覽的意願。︒
!

27. 通常講到這裡...
Programmer
02.網站設計的過程a.前期研究

28. 02.網站設計的過程a.前期研究
基本原則：
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示

29. 永遠讓使⽤用者知道他在哪裡，
要往哪去。︒
02.網站設計的過程a.前期研究
基本原則：
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示

30. 02.網站設計的過程a.前期研究
Youtube Pinterest
案例分享

31. 廢話就別說了。︒
請著重在內容的呈現。︒
02.網站設計的過程a.前期研究
基本原則：
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示

32. 02.網站設計的過程a.前期研究
案例分享
Google Dropbox

33. 減少視覺上的負擔，增加專業
感、︑美感。︒
02.網站設計的過程a.前期研究
基本原則：
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示

34. 02.網站設計的過程a.前期研究
案例分享
Codecademy redesign
codecademy

35. ⼈人都是懶散的。︒
02.網站設計的過程a.前期研究
基本原則：
1. 清楚提供網⾴頁導覽功能
!
2. 簡單清楚的內容
!
3. ⼀一致性的版⾯面設計
!
4. 易懂的簡單圖⽰示

36. 02.網站設計的過程a.前期研究
Spotify Wechat
案例分享

37. 1. 我們要表達什麼訊息給接收者（使⽤用者）︖？
!
2. 公司要的是什麼︖？
重點
02.網站設計的過程a.前期研究
a. 前期研究
1. 網站設計趨勢（ Web Design Trends ）
!
2. 使⽤用者經驗研究（ User Experience ）
!
3. 釐清思緒
!

38. 02.網站設計的過程a.前期研究
釐清思緒的⽅方法
畫出既有的 sitemap ，幫助理清思緒，看看什麼是重要的什麼是不重要的。︒

39. 02.網站設計的過程a.前期研究
釐清思緒的⽅方法
跟⽼老闆喝杯咖啡吧！

40. 02.網站設計的過程
a. 前期研究
b. 繪製草圖
c. 實作

41. 02.網站設計的過程b.繪製草圖
任何跟產品有關的⼈人，都應該使
⽤用 wireframe 。︒
!
優點： 1. 快速實現腦中的想法。︒
2. 討論可⾏行性，快速修改。︒
3. 減少開發前期的成本。︒
（圖⽚片來源：⽣生活磚官網⼿手繪稿）
繪製 wireframe

42. 02.網站設計的過程b.繪製草圖
善⽤用 Grids 排版
利⽤用 Grids 的概念編排
出簡潔清楚的風格。︒
!

43. desktop pad phone
.K8'$4K%-5
лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ
лȞ˖Ө
лȞॏ௟
.K8'$4K%-5
лȞ˖Ө
лȞॏ௟
02.網站設計的過程b.繪製草圖

44. 02.網站設計的過程b.繪製草圖
⼩小⽅方法：先縮兩邊的留⽩白，接著改變排版⽅方式，最後再縮⼩小。︒
лȞ˖Ө
ࢨˠҹॏ
Ȟײ̦̉
лȞ˖Ө
ࢨˠҹॏ
лȞ˖Ө
ࢨˠҹॏ
Ȟײ̦̉
響應式網站排版

45. 02.網站設計的過程b.繪製草圖
因應不同 devices 所做的調整。︒
desktop pad phone
.K8'$4K%-5 лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ .K8'$4K%-5 .K8'$4K%-5
лȞ˖Ө ʖˠўω ؾ̩֫Ž Ԕࣾāĵ
空間⼤大，每個項⽬目可以獨⽴立出來。︒ 寬度變窄，變成兩⾏行顯⽰示。︒ 寬度最窄，使⽤用
menu btn 顯⽰示。︒
導覽列的設計

46. 02.網站設計的過程
a. 前期研究
b. 繪製草圖
c. 實作

47. Designer
02.網站設計的過程c.實作
重點
術業有專攻，如果公司
有 Designer ， 就交給
Designer 吧！

48. 02.網站設計的過程c.實作
與⼯工程師溝通的演化過程
請畫⼀一個蘋果，寬20px ⾼高25px，像這樣！
寬20px
好了！
⾼高25px
Designer Programmer

49. 02.網站設計的過程c.實作
與⼯工程師溝通的演化過程
請畫⼀一個蘋果，整體寬20px ⾼高25px ，蘋果的顏⾊色
是#ec571d 葉⼦子顏⾊色是1e771d 蘋果左右要對稱...
寬20px
好了！
⾼高25px
⾼高15px
Designer Programmer

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

51. 跟寫程式⼀一樣，能重複利⽤用的部分
就重複利⽤用。︒
!
!
設計師希望⼯工程師：
!
1. 先將標題的字型、︑字體⼤大⼩小、︑顏⾊色統⼀一 ;
內⽂文與⾏行距也是。︒
!
2. 能先對齊就對齊，設計師會謝謝你。︒
Ԇʛ
ʮNJ
ʮNJ
ʮNJ
ʮNJ
Ԇʛ
ʮNJ
ʮNJ
ʮNJ
ʮNJ
02.網站設計的過程c.實作
彼此的默契

52. 02.網站設計的過程c.實作
彼此的默契
什麼叫對齊︖？
!
!
!
!

53. 02.網站設計的過程c.實作
彼此的默契
什麼叫對齊︖？
!
邊界與邊界對齊
⽂文字與⽂文字對齊
區塊與區塊對齊
⽂文字與區塊對齊
!
!

54. 02.網站設計的過程c.實作
彼此的默契
什麼叫對齊︖？
!
邊界與邊界對齊
⽂文字與⽂文字對齊
區塊與區塊對齊
⽂文字與區塊對齊
!
!

55. 02.網站設計的過程c.實作
彼此的默契
什麼叫對齊︖？
!
邊界與邊界對齊
⽂文字與⽂文字對齊
區塊與區塊對齊
⽂文字與區塊對齊
!
!

56. 02.網站設計的過程c.實作
彼此的默契
什麼叫對齊︖？
!
邊界與邊界對齊
⽂文字與⽂文字對齊
區塊與區塊對齊
⽂文字與區塊對齊
!
!

57. 02.網站設計的過程c.實作
彼此的默契
這樣就是對齊！
!
!

58. 02.網站設計的過程c.實作
彼此的默契
這樣就是對齊！
!
!

59. ⼀一⾴頁滾動式的呈現⽅方式
!
產品服務，專業優勢，企業簡介，
營運據點，聯絡我們
（ ⽣生活磚官網 ）
02.網站設計的過程c.實作
最後成果

60. 1. 清楚提供網⾴頁導覽功能
（ ⽣生活磚官網 ）
02.網站設計的過程c.實作
最後成果

61. 02.網站設計的過程c.實作
最後成果
2. 簡單清楚的內容

62. 02.網站設計的過程c.實作
最後成果
2. 簡單清楚的內容

63. 02.網站設計的過程c.實作
最後成果
3. ⼀一致性的版⾯面設計
（ ⽣生活磚官網 ）

64. （ ⽣生活磚官網 ）

65. 03.如何培養美感︖？
前往未知的領域

66. 03.如何培養美感︖？
其實有沒有美感在出⽣生的瞬
間就決定好了啊…

67. 03.如何培養美感︖？
好啦其實有辦法！

68. 03.如何培養美感︖？
資源分享
Page Ruler
Siteinspire Adobe kuler Page ruler

69. 03.如何培養美感︖？
資源分享
整理：
!
找版型： html5up 找靈感： siteinspire selected webdesign
!
網站佈局：Understanding the Split Layout in Web Design
!
sketch template 下載：Sneakpeekit 參考各⼤大網站的排版 ：web without words
!
找顏⾊色：Adobe kuler
!
網⾴頁尺標⼯工具：Page ruler

70. Abby Chiu Thank u all !
email : abbychiu1002@gmail.com