http://nowilldesign.com/ 投影片部份圖片引用至網路

1. RWD常⾒見設計模式
讓我們換個⾓角度來看RWD
13年3月30⽇日星期六

2. 關於我(Nowill / 德德)
有點犯規的經歷 服務過的客⼾戶 現況
使⽤用者研究員 電信(中華、亞太) SOHO (歡迎合作)
網路⾏行銷企劃 美妝(舒摩兒、元氣堂) 部落客
網⾴頁設計師 藥廠(德國拜⽿耳、天義企業)
網站專案 電玩(宇峻奧汀、遊戲怪獸) 連結
nowills.blogspot.com
PHP程式設計師 ⾦金融(台灣企銀、保德信) nowilldesign.com
社群營運專案經理 補教(朱宗慶、台⼤大補習班)
美⻝⾷食(爭鮮壽司、京星餐飲)
出版(城邦、⻘青⽂文出版社)
13年3月30⽇日星期六

3. ⼤大綱
Which comes first - ⼤大到⼩小或⼩小到⼤大？
設計模式 - 各種載具的使⽤用⾏行為都不⼀一樣
設計巧思 - 國外網站設計案例
13年3月30⽇日星期六

4. 先說在前頭
思考⼀一下
A BOOK APART SMASHING MAGAZIN PACKT PUBLISHING
2011 2012 2012
13年3月30⽇日星期六

5. Which comes first
⼤大到⼩小或⼩小到⼤大？
13年3月30⽇日星期六

6. 網⾴頁設計流程
要跨哪些平台？ 資料庫規劃合適嗎？
需求是什麼？
有些視覺效果？ 怎麼設計才不跳tone?
⽤用哪種技術？ 資料上了沒？
選單有哪些？
有無CI相關資料？ 顏⾊色這樣搭好看嗎？
接觸 需求 規劃 設計 開發 上線
喜歡的顏⾊色？
有哪些功能？ Delay?
每個平台的資料多寡？
客⼾戶的⺫⽬目標族群是？ 怎樣的規劃才⽅方便瀏覽？
有沒有Bug?
線框圖對過沒？
有無喜歡的網站？ 整體時程多久？
⺫⽬目標族尋都愛看什麼？
13年3月30⽇日星期六

7. ⼤大到⼩小還是⼩小到⼤大
取決於規劃內容⽽而
定，由繁⼊入簡的難易
度通常低於由簡⼊入繁
每個平台的資料量多
寡會影響設計流程、
架構與技術選擇
每個環節都是環環相
扣，漏⼀一顆螺絲可能
整組壞光光
13年3月30⽇日星期六

8. 設計模式
各種載具的使⽤用⾏行為都不⼀一樣
13年3月30⽇日星期六

9. 桌機、平板、⼿手機的差異
超有⼿手感 被忽略⼜又假裝
滑⿏鼠 之你的⼿手 成鉛筆的電容筆
13年3月30⽇日星期六

10. 桌機、平板、⼿手機的差異
孤島式
迷你型
機械式
螢幕鍵盤
鍵盤
13年3月30⽇日星期六

11. 使⽤用者研究流程
要問使⽤用者哪些問題？
本次想改善的問題？ 進⼊入網站的網友都是⺫⽬目標族群？
操作上哪裡可能有問題？
為什麼網友就是不互動？
網站基礎架構為何？
廣告版位怎麼擺？
網站的使⽤用者有哪些？ 選單有哪些？
哪⼀一⾴頁跳出率特別⾼高？
調查 建模 需求 研究或訪談 修正 測試
假想使⽤用者有誰？
找實際使⽤用者來測試？ 網站流暢度？ A/B testing?
使⽤用者真正的問題在哪？ 網站是否符合使⽤用者的期許？
之前建站有無完整企劃書？ 熱點圖？
選單這樣擺到底對不對？ eyes tracking
錯估⺫⽬目標族群愛看的東⻄西？
13年3月30⽇日星期六

12. 假想使⽤用者環境(建模)
進⼊入這個網站的網友有哪些是單純路過嗎？還是⺫⽬目標
使⽤用者？這類的⽐比重是多少？網站資料分析很重要！
請⽤用最原始的操作模式作為假想模式：⼿手機只⽤用⼿手指
操控、卓機有滑⿏鼠與鍵盤可以使⽤用
使⽤用者會開外掛，但這不該是你假想的⼤大部份使⽤用者
常⾒見有問題的地⽅方：連結或按鈕
13年3月30⽇日星期六

13. 按鈕到底要多⼤大？
⼈人機互動領域第⼀一條「定律」：費茲定律(Fitt’s Law)
T = a +b log2(D/W+1)
基本的概念是，移到⺫⽬目標上的時間(T)可以表⽰示為⺫⽬目標
距離(D)與⺫⽬目標⼤大⼩小(W)的函數，也就是移到任意⺫⽬目標上
的時間⼤大約跟⺫⽬目標距離除以⺫⽬目標⼤大⼩小的對數成正⽐比
簡單說：距離變⻑⾧長1000倍，只會讓時間變成log2(1000)
約10倍⽽而已
這跟按鈕⼤大⼩小有什麼關係？
13年3月30⽇日星期六

14. 以Firefox為例
使⽤用前 使⽤用後
回上⼀一⾴頁通常是在進⼊入錯誤的⾴頁⾯面想跳回之前的⾴頁⾯面
所使⽤用，⽽而回下⼀一⾴頁通常則是在回去上⼀一⾴頁之後反悔
才使⽤用
通常滑⿏鼠會在網站任何位置移動到回上⼀一⾴頁，所以距
離就會⽐比按回下⼀一⾴頁還要遠，距離遠按鈕⼤大，距離近
按鈕⼩小(以相對⽐比重來說)
13年3月30⽇日星期六

15. 另⼀一個考量⽅方式：使⽤用率
使⽤用前 使⽤用後
回上⼀一⾴頁的使⽤用率⾼高於回下⼀一⾴頁，常⽤用按鈕需要設計
成好找、好按，所以回上⼀一⾴頁會⼤大於回下⼀一⾴頁
網⾴頁上的每個區塊都可以⽤用費茲定律、使⽤用率來考量
區塊的⼤大⼩小、位置
以上規則桌機、平板、⼿手機皆適⽤用
13年3月30⽇日星期六

16. 設計巧思
國外網站設計案例
13年3月30⽇日星期六

17. ⼀一個網站基本上有哪些？
網站名稱
主視覺 HEAD
MENU 主要選單
sub 次選單
內⽂文排版 CONTENTS 其他連結
menu
COPYRIGHT Footer
13年3月30⽇日星期六

18. 案例ㄧ：先來看看有多細
所有排列都必須是對稱區塊才可以變成RWD網站( X )
RWD設計到底可以做到多細？
設計師真的有考量到使⽤用者的操作模式不同去改變
界⾯面的排版設計規劃嗎？
13年3月30⽇日星期六

19. 案例ㄧ：ROBOT OR NOT?
13年3月30⽇日星期六

20. 案例ㄧ：選單
貼邊
3D⾓角度不同 ⾼高度不同
13年3月30⽇日星期六

21. 案例ㄧ：主視覺
1.橘⾊色左右箭頭位置不同
2.⿊黑⾊色標題寬度⾼高度不同，造成視覺不對稱
3.⽩白⾊色區塊寬度不同，造成視覺不對稱
4.⼿手機版橘⾊色箭頭與⿊黑⾊色標題貼邊處理
13年3月30⽇日星期六

22. 案例⼆二：減法設計模式
先做出完整版，在針對不同的平台刪減該顯⽰示的內
容，化繁為簡。
⼀一般RWD⼤大概是：桌機、平板、⼿手機三個平台，這代
表RWD只要做三種設計（Ｘ）
13年3月30⽇日星期六

23. 案例⼆二：foodsense
13年3月30⽇日星期六

24. 案例⼆二： foodsense
13年3月30⽇日星期六

25. 案例三：最基礎的是......
桌機版本與平板版本通⽤用的可能性？
13年3月30⽇日星期六

26. 案例三：oliverrussell
13年3月30⽇日星期六

27. 案例網址
案例ㄧ：http://responsivewebdesign.com/robot/
案例⼆二：http://foodsense.is/
案例三：http://oliverrussell.com/
13年3月30⽇日星期六

28. 最後，朋友還是交⼀一下
Nowill Design : nowilldesign.com
草監網路： nowills.blogspot.com
草監網路粉絲團：www.facebook.com/nowilldesign
Plurk：www.plurk.com/nowills
13年3月30⽇日星期六