內容摘自於 Smashing Book #1 的第一章。

1. User Interface Design in
Modern Web Applications
http://www.flickr.com/photos/baldiri/5735003580/ 李侑龍

2. twitter: yowlong

3. What is User Interface Design?

4. What is User Interface?

5. What is Design?

6. “Design isn’t about how
a product looks, but
rather about how it
works.”
-Steve Jobs
image by Apple

7. The way you accomplish tasks with
a product -what you do and how it
responds- that’s the interface.
-Jef Raskin
http://en.wikipedia.org/wiki/File:Jef_Raskin_holding_Canon_Cat_model.png

8. http://www.flickr.com/photos/nhankamer/4703022414/
The interface is the product.

9. What makes a great
user interface?

10. Clarity
目標明確

11. Concision
簡潔
http://www.flickr.com/photos/ransomtech/5811410407/
http://www.flickr.com/photos/ojimbo/5755042801/

12. Familiarity
熟悉感

13. Responsiveness
快速反饋

14. Consistency
一致性

15. Aesthetics
有美感

16. Efficiency
用起來
有效率
http://en.wikipedia.org/wiki/File:Shortcut.png

17. Forgiveness
容許犯錯

18. Core elements that make
up visual interface design

19. Layout and positioning
排版與定位
http://www.flickr.com/photos/emmealcubo/5552526550/

20. Shape and size
形狀和大小

21. Color
色彩

22. Contrast
對比

23. Texture
材質

24. Practical techniques for
crafting effective user interface

25. 留白產生關係
Gmail 上方的工具列被留白區分為六個按鈕群組。
每個群組之內的按鈕功能類似。

26. 圓角定義物體邊界
Linkedin 個人首頁右
邊以圓角的盒子來區
分不同的統計資料。

27. 用色彩傳達意義
http://www.flickr.com/photos/pagedooley/4026016070/

28. 動態效果直接吸引注意力
在 Twitter 新增 息時舊 息會被往下推。

29. 陰影或暗色背景增加聚焦
iCloud 的設定頁面出現時，原本工作畫面會暗下來。

30. 強調核心動作
「提交」和「繼續」都是相同效果，而且選擇區域比
較大。相較之下，「取消」只有小小一個文字連結。

31. 使用塊狀連結
Youtube 首頁左邊頻道列
使用塊狀連結，滑鼠經過
不 會有動態效果，整個
區塊都是連結。

32. 使用動詞
Gmail 裡的各個按鈕和
連結幾乎都是動詞，
不是「好」或「取
消」，提供使用者明
確的功能指示。

33. 輸入框自動對焦
進入 Google 首頁後，游標自動放在輸入框裡，因
為 Google 認為大部分造訪頁面的人都是要搜尋。

34. 使用 hover 效果簡化畫面
Youtube 留言區在
游標移過去時才
會顯示評量和回
覆按鈕。

35. 擴展式表單
Dropbox 一次只顯示一個上傳按鈕。

36. 標題放在輸入框內
將標題放在框內不 可以簡
化頁面，使用者也不會 錯
輸入的內容。

37. 適時提供進階功能
Vimeo 的搜尋框平時只是一個
框，輸入內容時才會出現進階
選項。

38. 圖示
Google+ 使用圖示讓畫面更吸引人。

39. 進度指示
Youtube 的上傳進度指示告訴使用者還需要等待多久。

40. 按鈕狀態
Photopin 的三種按鈕狀態提醒使用者成功的輸入 息。

41. 給初心者的導引
Dropbox 的導引頁面讓新加入的使用者學習網站功能。

42. 進階功能提示
Gmail 提示使用者網站有自動翻譯功能。

43. 復原
網站應該提供和 面程式一樣的復原功能。

44. 回復
Evernote 將使用者刪除的文件先
保留在 桶，在清空前使用者
都可以取回。

45. 確定對話框
在執行毀滅性動作前，應該要和使用者再次確認。