{Tapworthy} ch6 - 引人注目導讀

引人注目
獨一無二的APP視覺設計

Duncan , 吳長鋼
2013/2/2

引人注目的蝴蝶「姬」

http://www.timliao.com/bbs/viewthread.php?tid=61697

你的應用程式要有什麼風格
O 決定應用程式的個性
O 說故事
O 帶入情境

決定個性(iOS)
O 配合APP功
能主題發揮

決定個性(iOS)
O ＭＯＳ可愛日系風格

決定個性 (Android)

範例APP: 素描大師

在地化

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 文字最好使用黑色或白色
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 - 引人注目導讀

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de 長鋼吳

Mais de 長鋼吳 (20)