引人注目獨一無二的 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 ＭＯＳ 可愛日系風格

決定個性 (Android)

範例 APP: 素描大師

HoJava 可愛台系風格

CF.

在地化

http://www.chinamos.com.cn/About/overseas

說故事O 成功帶入情境（ myJLin ）

說故事O 無法帶入情境（ Wa 台灣之光）

從 iPhone 標準界面元素著手O 地毯應該要配合窗簾一致性O 工具列若上色 , 導覽列 , 工具列和搜尋列應

該要使用相同顏色（瘋美食 ,ChilisTw ）

不要太過鮮艷O 工具列顏色要高雅低調，花俏明亮顏色干擾使用者的視線遠離主要內

容（不要讓界面控制選項搶了內容的風采，重點在於相配）

Pic+Pic 悅禾

CF.

走入光線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 金屬的冰冷精密

愛料理 尋找朋友

支付寶

擬真

尋找 iPhoneRunning

擬真

iTunes U 人貓交流器

擬真 (cf.)

喝水寶 狗狗們兒童教學

設計自己的工具圖示

O 不要很炫 , 不要陰影 , 不要稀奇古怪的特效O簡單的剪影：清楚明白明確指出按鈕背後

的動作

視覺隱喻 (Visual metaphors)

風行網

結論

O 有價值的設計須先決定 APP 的個性O自製顏色和圖像須配合高級材質賦予吸引

觸控的生命力O圖示清楚明白