User Interface Design in          Modern Web Applicationshttp://www.flickr.com/photos/baldiri/5735003580/   李侑龍
twitter: yowlong
What is User Interface Design?
What is User Interface?
What is Design?
“Design isn’t about howa product looks, butrather about how itworks.”	 	 	 	 -Steve Jobsimage by Apple
The way you accomplish tasks with a product -what you do and how it responds- that’s the interface. -Jef Raskinhttp://en.w...
http://www.flickr.com/photos/nhankamer/4703022414/The interface is the product.
What makes a great user interface?
Clarity          目標明確
Concision                                                                  簡潔http://www.flickr.com/photos/ransomtech/581141...
Familiarity              熟悉感
Responsiveness           快速反饋
Consistency          一致性
Aesthetics             有美感
Efficiency                       用起來                       有效率     http://en.wikipedia.org/wiki/File:Shortcut.png
Forgiveness          容許犯錯
Core elements that makeup visual interface design
Layout and positioning                                                 排版與定位http://www.flickr.com/photos/emmealcubo/5552526...
Shape and size 形狀和大小
Color色彩
Contrast  對比
Texture 材質
Practical techniques forcrafting effective user interface
留白產生關係Gmail 上方的工具列被留白區分為六個按鈕群組。每個群組之內的按鈕功能類似。
圓角定義物體邊界    Linkedin 個人首頁右    邊以圓角的盒子來區    分不同的統計資料。
用色彩傳達意義http://www.flickr.com/photos/pagedooley/4026016070/
動態效果直接吸引注意力 在 Twitter 新增   息時舊   息會被往下推。
陰影或暗色背景增加聚焦iCloud 的設定頁面出現時,原本工作畫面會暗下來。
強調核心動作「提交」和「繼續」都是相同效果,而且選擇區域比較大。相較之下,「取消」只有小小一個文字連結。
使用塊狀連結  Youtube 首頁左邊頻道列  使用塊狀連結,滑鼠經過  不   會有動態效果,整個      區塊都是連結。
使用動詞  Gmail 裡的各個按鈕和  連結幾乎都是動詞,   不是「好」或「取  消」,提供使用者明   確的功能指示。
輸入框自動對焦進入 Google 首頁後,游標自動放在輸入框裡,因為 Google 認為大部分造訪頁面的人都是要搜尋。
使用 hover 效果簡化畫面          Youtube 留言區在          游標移過去時才          會顯示評量和回            覆按鈕。
擴展式表單Dropbox 一次只顯示一個上傳按鈕。
標題放在輸入框內   將標題放在框內不   可以簡   化頁面,使用者也不會   錯      輸入的內容。
適時提供進階功能  Vimeo 的搜尋框平時只是一個  框,輸入內容時才會出現進階        選項。
圖示Google+ 使用圖示讓畫面更吸引人。
進度指示Youtube 的上傳進度指示告訴使用者還需要等待多久。
按鈕狀態Photopin 的三種按鈕狀態提醒使用者成功的輸入   息。
給初心者的導引Dropbox 的導引頁面讓新加入的使用者學習網站功能。
進階功能提示Gmail 提示使用者網站有自動翻譯功能。
復原網站應該提供和   面程式一樣的復原功能。
回復Evernote 將使用者刪除的文件先保留在    桶,在清空前使用者      都可以取回。
確定對話框在執行毀滅性動作前,應該要和使用者再次確認。
Upcoming SlideShare
Loading in...5
×

User Interface Design in Modern Web Applications

1,077

Published on

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

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,077
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
33
Comments
0
Likes
7
Embeds 0
No embeds

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
  • User Interface Design in Modern Web Applications

    1. 1. User Interface Design in Modern Web Applicationshttp://www.flickr.com/photos/baldiri/5735003580/ 李侑龍
    2. 2. twitter: yowlong
    3. 3. What is User Interface Design?
    4. 4. What is User Interface?
    5. 5. What is Design?
    6. 6. “Design isn’t about howa product looks, butrather about how itworks.” -Steve Jobsimage by Apple
    7. 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. 8. http://www.flickr.com/photos/nhankamer/4703022414/The interface is the product.
    9. 9. What makes a great user interface?
    10. 10. Clarity 目標明確
    11. 11. Concision 簡潔http://www.flickr.com/photos/ransomtech/5811410407/ http://www.flickr.com/photos/ojimbo/5755042801/
    12. 12. Familiarity 熟悉感
    13. 13. Responsiveness 快速反饋
    14. 14. Consistency 一致性
    15. 15. Aesthetics 有美感
    16. 16. Efficiency 用起來 有效率 http://en.wikipedia.org/wiki/File:Shortcut.png
    17. 17. Forgiveness 容許犯錯
    18. 18. Core elements that makeup visual interface design
    19. 19. Layout and positioning 排版與定位http://www.flickr.com/photos/emmealcubo/5552526550/
    20. 20. Shape and size 形狀和大小
    21. 21. Color色彩
    22. 22. Contrast 對比
    23. 23. Texture 材質
    24. 24. Practical techniques forcrafting effective user interface
    25. 25. 留白產生關係Gmail 上方的工具列被留白區分為六個按鈕群組。每個群組之內的按鈕功能類似。
    26. 26. 圓角定義物體邊界 Linkedin 個人首頁右 邊以圓角的盒子來區 分不同的統計資料。
    27. 27. 用色彩傳達意義http://www.flickr.com/photos/pagedooley/4026016070/
    28. 28. 動態效果直接吸引注意力 在 Twitter 新增 息時舊 息會被往下推。
    29. 29. 陰影或暗色背景增加聚焦iCloud 的設定頁面出現時,原本工作畫面會暗下來。
    30. 30. 強調核心動作「提交」和「繼續」都是相同效果,而且選擇區域比較大。相較之下,「取消」只有小小一個文字連結。
    31. 31. 使用塊狀連結 Youtube 首頁左邊頻道列 使用塊狀連結,滑鼠經過 不 會有動態效果,整個 區塊都是連結。
    32. 32. 使用動詞 Gmail 裡的各個按鈕和 連結幾乎都是動詞, 不是「好」或「取 消」,提供使用者明 確的功能指示。
    33. 33. 輸入框自動對焦進入 Google 首頁後,游標自動放在輸入框裡,因為 Google 認為大部分造訪頁面的人都是要搜尋。
    34. 34. 使用 hover 效果簡化畫面 Youtube 留言區在 游標移過去時才 會顯示評量和回 覆按鈕。
    35. 35. 擴展式表單Dropbox 一次只顯示一個上傳按鈕。
    36. 36. 標題放在輸入框內 將標題放在框內不 可以簡 化頁面,使用者也不會 錯 輸入的內容。
    37. 37. 適時提供進階功能 Vimeo 的搜尋框平時只是一個 框,輸入內容時才會出現進階 選項。
    38. 38. 圖示Google+ 使用圖示讓畫面更吸引人。
    39. 39. 進度指示Youtube 的上傳進度指示告訴使用者還需要等待多久。
    40. 40. 按鈕狀態Photopin 的三種按鈕狀態提醒使用者成功的輸入 息。
    41. 41. 給初心者的導引Dropbox 的導引頁面讓新加入的使用者學習網站功能。
    42. 42. 進階功能提示Gmail 提示使用者網站有自動翻譯功能。
    43. 43. 復原網站應該提供和 面程式一樣的復原功能。
    44. 44. 回復Evernote 將使用者刪除的文件先保留在 桶,在清空前使用者 都可以取回。
    45. 45. 確定對話框在執行毀滅性動作前,應該要和使用者再次確認。
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×