網站的人體工學

1. 網站界的⼈人體⼯工學
蛤？網站也有⼈人體⼯工學？

2. 今天會提到
• Nowill 到底是誰？
• 網⾴頁設計的趨勢？
• 網站界的⼈人體⼯工學到底什麼？
• 什麼！網站的⼈人體⼯工學還有公式？
• ⺫⽬目前網站界的當紅炸⼦子雞
• 當⼈人體⼯工學遇上當紅炸⼦子雞

3. Nowill Chang
有點犯規的經歷
使⽤用者研究員
網路⾏行銷企劃
網⾴頁視覺設計師
網站前端互動設計師
網站專案經理
PHP程式設計師
社群營運專案經理
服務過的客⼾戶
電信(中華、亞太)
美妝(舒摩兒、元氣堂)
藥廠(德國拜⽿耳、天義企業)
電玩(宇峻奧汀、遊戲怪獸)
⾦金融(台灣企銀、保德信)
補教(朱宗慶、台⼤大補習班)
美⻝⾷食(爭鮮壽司、京星餐飲)
出版(城邦、⻘青⽂文出版社)
現況
Nowill Design
品⽲禾全端網路⼯工作室
nowilldesign.com
部落格
草監網路
nowills.blogspot.com

4. 2014年網⾴頁設計 6 ⼤大趨勢

5. 去蕪存菁的扁平化（Flat Design）
圖⽚片來源：pinterest

6. 圖⽚片來源：pinterest
強烈的⼤大圖視覺（Large Hero）

7. 影⽚片也是網站內容的⼀一部份（Videos Use）
圖⽚片來源：Kaber

8. ⾴頁⾯面超⻑⾧長讓你滾不停（Long Scrolling,Parallax）
圖⽚片來源：pinterest

9. 更精美清楚地字形（Web Fonts Use）
圖⽚片來源：justfont

10. 響應式設計（Responsive Design）
圖⽚片來源：pinterest

11. 網站界的 ⼈人體⼯工學 到底什麼？

12. 什麼是⼈人體⼯工學
• ⼈人因⼯工程學⼜又稱⼯工效學、⼈人機⼯工程學、⼈人類⼯工效學、⼈人體⼯工學、⼈人因
學
• ⼈人機⼯工程學是研究⼈人在某種⼯工作環境中的解剖學、⽣生理學和⼼心理學等
⽅方⾯面的各種因素；研究⼈人和機器及環境的相互作⽤用；研究在⼯工作中、
家庭⽣生活中和休假中怎樣統⼀一考慮⼯工作效率、⼈人的健康、安全和舒適
等問題的學科。
• 主要可以分為兩個研究⽅方向：⼯工作環境⼯工效以及產品⼯工效。前者⺫⽬目標
主要為設計和設定⼯工作者的⼯工作環境，以減低⼯工作者的⼯工作壓⼒力並提
⾼高⼯工作效率。後者為產品設計提出友善的操作界⾯面以及舒適的外形設
計，以此提⾼高使⽤用者的舒適度和加⼊入美學的設計因素，通常在⼯工作環
境⼯工效中會把⼯工作者視作獨⽴立個體⽽而進⾏行設計。與之相對應的，在產
品⼯工效設計中，使⽤用者會以⼈人體模型的形式出現，此時設計者需要對
⼈人體⽣生理和⼼心理因素變化有所考慮，例如⼿手臂⻑⾧長度的均值和⽅方差數據。
以上全部出⾃自wikipedia

13. 簡單來說
網站的⼈人體⼯工程是屬於產品功效分類，通稱
使⽤用者經驗（User Experience）

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

15. UX五要素
良好的網站必須具備上述五要素，才能建⽴立易⽤用、親切的網站

16. 什麼！網站的⼈人體⼯工學還有
公式？
公式有很多，但是如果從中只挑⼀一個，那接下來的這個公式你⼀一定要記住

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

18. 費茲定律常⾒見⽤用途：按鈕
使⽤用前 使⽤用後
FireFox瀏覽器：回上⼀一⾴頁、下⼀一⾴頁
通常滑⿏鼠會在網站任何位置移動到回上⼀一⾴頁，所以距
離就會⽐比按回下⼀一⾴頁還要遠，距離遠按鈕⼤大，距離近
按鈕⼩小(以相對⽐比重來說)

19. ⺫⽬目前網站界的當紅炸⼦子雞

20. 響應式設計
（Responsive Design）
視差滾動設計
（Parallax Design）

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

22. 說在前頭
A
BOOK
APART
2011
SMASHING
MAGAZIN
2012
PACKT
PUBLISHING
2012
好感度No.1的網⾴頁設計：
RWD不出槌法則，網站在
任何裝置都完美呈現
2014

23. 遺失的⽚片段
2012年RWD被.net magazine選
為網⾴頁設計趨勢第⼆二名，第⼀一名
為“漸進增強”設計模式。
漸進增強這樣的設計趨勢，在台
灣並不流⾏行，但卻可以說是
RWD的⽴立基點。所謂的漸進增
強就是打破傳統的網站規劃⽅方式，
以mobile first為主，從⼿手機內容
開始規劃，在推到平板、桌機網
站內容，是⼀一種從⼩小到⼤大的網站
設計模式，與以往從⼤大到⼩小的設
計模式完全不同。

24. 何謂RWD?
RWD是Responsive Web Design的縮寫，中⽂文翻譯
⽐比較常⾒見的有響應式設計或者是⾃自應式設計，可使
網站在多種瀏覽裝置（從桌⾯面電腦顯⽰示器、平板電
腦顯⽰示器到⾏行動電話或其他⾏行動產品裝置）上閱讀
和導航，同時減少縮放、平移和捲動。

25. 可⽤用RWD嗎？
專案
經費
網站
架構
內容
資料
媒體
檔案
特殊
元素
專案經費⾜足夠的情
況可依據各平台打
造最適合的網站當
然是最佳的選擇，
但是如果經費不⾜足
⼜又想打造各平台上
的網站，那採⽤用
RWD設計模式就是
⼀一個解決⽅方式
透過架構可以推測
網站選單的分層多
寡，過多層次地選
單在智慧⼿手機上操
控不易，很容易造
成使⽤用者瀏覽障礙
網站資訊若過多，
在使⽤用者頻寬不⾜足
的情況下會導致網
站開啟過慢，進⽽而
提升跳出率
雖然圖⽚片、⾳音樂、
影⽚片等等的視覺、
聽覺類媒材可以營
造網站的氛圍，但
是必須注意的是這
些檔案的⼤大⼩小是否
會造成開啟過慢，
讓使⽤用者失去信⼼心，
不想等待，如果因
為這些數位媒材導
致使⽤用者不想瀏覽
網站，那勢必就要
有所取捨
⽐比較常⾒見的就是所
⾒見即所得編輯器必
須固定⼤大⼩小無法縮
放，或是⼀一些網路
廣告無提供RWD格
式，導致網站在各
個平台上無法正常
響應

26. ⺫⽬目前常⾒見解析度
⼿手機
320x480 (2:3)
480x800 (3:5)
540x960 (16:9)
720x1280 (16:9)
768x1028 (16:9)
1080x1920 (16:9)
平板
600x800 (4:3)
600x1024 (75:128)
768x1024 (4:3)
800x1280 (4:3)
1920x1080 (16:9)
桌機
1024x768 (4:3)
1280x800 (16:10)
1280x1024 (4:3)
1366x768 (16:9)
1440x900 (16:9)
1920x1080 (16:9)
2560x1440 (16:9)
2880x1800 (16:10)
以上全部都要符合，但是設計師⼀一定會吐⾎血給你看

27. 常⾒見⼿手機選單設計⽅方式
下拉選單模式
極簡的選單收合，通常
使⽤用于選單較少的網站，
使⽤用者需點擊MENU連後
才可以看⾒見完整選單
左右滑⼊入模式
極簡地選單收合，通常
適⽤用于選項較多的網站，
使⽤用者需點擊MENU連後
才可以看⾒見完整選單
常駐選單模式
直接將選單攤開常駐于
⾴頁⾯面，與App選單較為類
似，通常⽤用於選單只有
四⾄至五個選項的網站上

28. RWD五⼤大祕訣 - 推敲思考
• 找⼀一個RWD網站，開始思考為什麼這個設計師要如此設計？有
什麼缺點？有什麼優點？
• 去哪裡找RWD網站？ http://mediaqueri.es/
• 不知道如何思考起？
1.列出桌機、⼿手機、平板等規格的差異
2.實際使⽤用測試，不要放過任何可以點擊的地⽅方
3.列出你有覺得好設計與不好設計之處
4.開始思考各平台差異與優缺點為何要如此設計！
可是當你ready後......沒有案例怎麼推？

29. 客⼾戶說之前，請先
⾃自⼰己說

30. Ｋ資料以外，也請
動⼿手做

31. 沒經驗沒關係，那就⾃自⼰己
去創造

32. 說在後頭
• 不是每個網站都適合做RWD，所以制作前請先評估
• RWD並⾮非為全新的設計網⾴頁設計技術，只是⼀一種全
新的設計模式與概念，之前所累積的網⾴頁制作經驗
不但可以延續，更可以做更多的延伸
• 專案經驗：對客⼾戶來說，RWD的制作成本相較其他
⽅方式來說，是⽐比較低的，但在製作難度上卻是⽐比較
費時的
• ⾃自⼰己沒有相關經驗怎麼辦？

33. 當⼈人體⼯工學遇上當紅炸⼦子雞
其實......從這裡開始才是今天的重點

34. 桌機、平板、⼿手機的差異
被忽略⼜又假裝
成鉛筆的電容筆滑⿏鼠
超有⼿手感
之你的⼿手

35. 桌機、平板、⼿手機的差異
孤島式
機械式
鍵盤
迷你型
螢幕鍵盤

36. 桌機、平板、⼿手機的差異
幾個咩？ 幾個G？

37. iOS與android載具最⼤大的不同
iOS僅有 ⼀一顆 選單按鈕，但是
android卻有回上⼀一⾴頁、選單、多功等 三顆按鈕

39. 我們來看看 案例
好啦！其實在繼續扯下去就要講艱深無聊的東⻄西了.........

40. 案例ㄧ：ROBOT OR NOT?

41. 案例ㄧ：選單
貼邊
⾼高度不同3D⾓角度不同

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

43. 案例⼆二： foodsense

44. 案例三：oliverrussell

45. Thank You
若維設計 - 專注於網站與網路技術發展
nowilldesign.com / service@nowilldesign.com
專案 企劃 設計 前端 後端 MIS
跟網站有關，好玩的事請記得找我！還有......記得買我的書！