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。 ! 利⽤用：流動佈局 ﬂuid 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 ﬂow ，是下⼀一步視覺設計的基礎圖⽚片來源：MCS web UI ﬂow 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