引人注目獨一無二的APP視覺設計Duncan , 吳長鋼2013/2/2
引人注目
引人注目的蝴蝶「姬」http://www.timliao.com/bbs/viewthread.php?tid=61697
你的應用程式要有什麼風格O 決定應用程式的個性O 說故事O 帶入情境
決定個性(iOS)O 配合APP功 能主題發揮
決定個性(iOS)O 配合APP功 能主題發揮
決定個性(iOS)O MOS 可愛日系風格
決定個性 (Android)   範例APP: 素描大師
HoJava 可愛台系風格
在地化http://www.chinamos.com.cn/About/overseas
說故事O 成功帶入情境(myJLin)
說故事O 無法帶入情境(Wa台灣之光)
從iPhone標準界面元素著手O 地毯應該要配合窗簾一致性O 工具列若上色,導覽列,工具列和搜尋列應該 要使用相同顏色(瘋美食,ChilisTw)
不要太過鮮艷O 工具列顏色要高雅低調,花俏明亮顏色干擾使用者的視線遠離主要內 容(不要讓界面控制選項搶了內容的風采,重點在於相配)      Pic+Pic      悅禾
走入光線O Apple慣用  O 漸層填色  O 標準工具列圓角  O 光源效果              Running
聰明的修改是迷人的,太過聰明卻令人困惑         O 跨平台?
聰明的修改是迷人的,太過聰明卻令人困惑        O 首頁和清單按鈕容易誤觸
聰明的修改是迷人的,太過聰明卻令人困惑        O 登入開關
聰明的修改是迷人的,太過聰明卻令人困惑        O 頁籤?網站思維        O 顏色不搭        O +未用原生內建
對比是你的朋友我們觀看色彩時,會受到周圍色彩影響而產生變化,就是色彩的對比現象。明暗對比       兩種不同明度的色彩並列時,會使明色更亮,而暗色更暗。       將同明度的灰色置於白底和黑底上,會感覺黑底上的灰色較亮;而白       底...
對比是你的朋友  將一色相與他色同時配置,會使來的色彩產生偏色現  象,叫做色相對比。將橙色貼在紅色和黃色的背景上,  紅色背景上橙色會偏黃;而黃色背景上的橙色則會偏  紅。O 文字最好使用黑色或白色O 重要的介面元素採用高對比顏色
少用其他字型O 使用標準的iPhone Helvetica,克制改用其他字型衝動,導  覽列尤其如此,除品牌標誌外。O 使用其他字型只會讓程式更大包                            悅禾
保持高級O 人們信任奢侈品:很貴,有價值O 使用奢華材質(運用在介面設計上) O 皮革筆記本 O 發亮配件 O 懷舊的錶O 為你的App增加材質和光澤 O 木頭或軟木的溫暖 O 玻璃的光滑 O 紙或織品的有機感 O 金屬的冰冷精密
愛料理   尋找朋友
支付寶
擬真Running        尋找iPhone
擬真iTunes U        人貓交流器
擬真 (cf.)喝水寶         狗狗們兒童教學
設計自己的工具圖示O 不要很炫,不要陰影,不要稀奇古怪的特效O 簡單的剪影:清楚明白明確指出按鈕背後 的動作
視覺隱喻(Visual metaphors)
風行網
結論O 有價值的設計須先決定APP的個性O 自製顏色和圖像須配合高級材質賦予吸引  觸控的生命力O 圖示清楚明白
{Tapworthy} ch6 - 引人注目導讀
{Tapworthy} ch6 - 引人注目導讀
{Tapworthy} ch6 - 引人注目導讀
Upcoming SlideShare
Loading in...5
×

{Tapworthy} ch6 - 引人注目導讀

190

Published on

HPX 5 讀書會導讀

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

{Tapworthy} ch6 - 引人注目導讀

  1. 1. 引人注目獨一無二的APP視覺設計Duncan , 吳長鋼2013/2/2
  2. 2. 引人注目
  3. 3. 引人注目的蝴蝶「姬」http://www.timliao.com/bbs/viewthread.php?tid=61697
  4. 4. 你的應用程式要有什麼風格O 決定應用程式的個性O 說故事O 帶入情境
  5. 5. 決定個性(iOS)O 配合APP功 能主題發揮
  6. 6. 決定個性(iOS)O 配合APP功 能主題發揮
  7. 7. 決定個性(iOS)O MOS 可愛日系風格
  8. 8. 決定個性 (Android) 範例APP: 素描大師
  9. 9. HoJava 可愛台系風格
  10. 10. 在地化http://www.chinamos.com.cn/About/overseas
  11. 11. 說故事O 成功帶入情境(myJLin)
  12. 12. 說故事O 無法帶入情境(Wa台灣之光)
  13. 13. 從iPhone標準界面元素著手O 地毯應該要配合窗簾一致性O 工具列若上色,導覽列,工具列和搜尋列應該 要使用相同顏色(瘋美食,ChilisTw)
  14. 14. 不要太過鮮艷O 工具列顏色要高雅低調,花俏明亮顏色干擾使用者的視線遠離主要內 容(不要讓界面控制選項搶了內容的風采,重點在於相配) Pic+Pic 悅禾
  15. 15. 走入光線O Apple慣用 O 漸層填色 O 標準工具列圓角 O 光源效果 Running
  16. 16. 聰明的修改是迷人的,太過聰明卻令人困惑 O 跨平台?
  17. 17. 聰明的修改是迷人的,太過聰明卻令人困惑 O 首頁和清單按鈕容易誤觸
  18. 18. 聰明的修改是迷人的,太過聰明卻令人困惑 O 登入開關
  19. 19. 聰明的修改是迷人的,太過聰明卻令人困惑 O 頁籤?網站思維 O 顏色不搭 O +未用原生內建
  20. 20. 對比是你的朋友我們觀看色彩時,會受到周圍色彩影響而產生變化,就是色彩的對比現象。明暗對比 兩種不同明度的色彩並列時,會使明色更亮,而暗色更暗。 將同明度的灰色置於白底和黑底上,會感覺黑底上的灰色較亮;而白 底上的灰色明度較暗。O 文字最好使用黑色或白色O 重要的介面元素採用高對比顏色
  21. 21. 對比是你的朋友 將一色相與他色同時配置,會使來的色彩產生偏色現 象,叫做色相對比。將橙色貼在紅色和黃色的背景上, 紅色背景上橙色會偏黃;而黃色背景上的橙色則會偏 紅。O 文字最好使用黑色或白色O 重要的介面元素採用高對比顏色
  22. 22. 少用其他字型O 使用標準的iPhone Helvetica,克制改用其他字型衝動,導 覽列尤其如此,除品牌標誌外。O 使用其他字型只會讓程式更大包 悅禾
  23. 23. 保持高級O 人們信任奢侈品:很貴,有價值O 使用奢華材質(運用在介面設計上) O 皮革筆記本 O 發亮配件 O 懷舊的錶O 為你的App增加材質和光澤 O 木頭或軟木的溫暖 O 玻璃的光滑 O 紙或織品的有機感 O 金屬的冰冷精密
  24. 24. 愛料理 尋找朋友
  25. 25. 支付寶
  26. 26. 擬真Running 尋找iPhone
  27. 27. 擬真iTunes U 人貓交流器
  28. 28. 擬真 (cf.)喝水寶 狗狗們兒童教學
  29. 29. 設計自己的工具圖示O 不要很炫,不要陰影,不要稀奇古怪的特效O 簡單的剪影:清楚明白明確指出按鈕背後 的動作
  30. 30. 視覺隱喻(Visual metaphors)
  31. 31. 風行網
  32. 32. 結論O 有價值的設計須先決定APP的個性O 自製顏色和圖像須配合高級材質賦予吸引 觸控的生命力O 圖示清楚明白
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×