User Interface Design in Modern Web Applications
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

User Interface Design in Modern Web Applications

  • 1,264 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,264
On Slideshare
1,259
From Embeds
5
Number of Embeds
1

Actions

Shares
Downloads
29
Comments
0
Likes
6

Embeds 5

https://twitter.com 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. User Interface Design in Modern Web Applicationshttp://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 howa product looks, butrather about how itworks.” -Steve Jobsimage by Apple
  • 7. The way you accomplish tasks with a product -what you do and how it responds- that’s the interface. -Jef Raskinhttp://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 makeup 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 forcrafting 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. 確定對話框在執行毀滅性動作前,應該要和使用者再次確認。