2
| 本文作者： 人人都是產(chǎn)品經(jīng)理 | 2016-06-25 09:09 |
雷鋒網(wǎng)按：本文作者異止一（簡(jiǎn)書(shū)作者）。
有句話說(shuō)在前面——好看就是生產(chǎn)力，在App中是真實(shí)存在的。
品牌色從大的方面來(lái)說(shuō)是VI（視覺(jué)識(shí)別）需要優(yōu)先考慮的，考慮點(diǎn)如下：
相對(duì)來(lái)說(shuō)，不同行業(yè)是有其固有的品牌色的，比如機(jī)械行業(yè)，通常給人的第一意向就是明黃；而科技、互聯(lián)網(wǎng)企業(yè)給人的第一印象就是科技藍(lán)（原諒我用這么俗套的詞）等。
在對(duì)于品牌色的決策過(guò)程中，行業(yè)屬性是其重要決策部分。
通常在市場(chǎng)上我們會(huì)看到多個(gè)產(chǎn)品同時(shí)在滿足用戶同一需求，但是由于其品牌色的不同，會(huì)對(duì)用戶App下載決策有影響。
小恩愛(ài)、Between、戀愛(ài)記三款產(chǎn)品的核心功能都是做情侶記錄、聊天等的需求。但是由于小恩愛(ài)的icon相對(duì)于其他兩款app更加跳脫，因此在下載量和市場(chǎng)占有量上遠(yuǎn)超其他產(chǎn)品（當(dāng)然還有產(chǎn)品功能和運(yùn)營(yíng)等多方原因，在此僅從色彩來(lái)談）。
作為幾乎同期同需求的產(chǎn)品，下載量差異巨大。下載量數(shù)據(jù)來(lái)自騰訊應(yīng)用寶
有一些產(chǎn)品最開(kāi)始是從線上產(chǎn)生的，相對(duì)來(lái)說(shuō)對(duì)于線下物料、VI的思考不足，同一顏色在不同屏幕存在色差。因而會(huì)容易產(chǎn)生線下物料印刷等與線上視覺(jué)之間有較大色差，線上視覺(jué)形象線下實(shí)際應(yīng)用較難等問(wèn)題。因而在最初考慮線上品牌的同時(shí)，也需要從VI的角度考慮產(chǎn)品后期的品牌營(yíng)銷傳播等問(wèn)題。
記得張小龍?jiān)?jīng)說(shuō)最后悔微信用綠色，因?yàn)樵诓煌腁ndroid手機(jī)上，綠色差異非常大。
相對(duì)來(lái)說(shuō)，用戶對(duì)于不同的顏色本身會(huì)有一個(gè)第一印象的直觀理解，因而我們?cè)诳紤]品牌色時(shí)，需要考慮到用戶認(rèn)知心理，并運(yùn)用此心理來(lái)傳達(dá)品牌訴求。在考慮用色的時(shí)候，我們要時(shí)常提醒自己，需要傳達(dá)給用戶如何的品牌印象，這樣的印象是否和產(chǎn)品策略是相符合的，這樣的用色策略是否會(huì)和用戶慣常認(rèn)知是有差異的等等。
舉例來(lái)說(shuō)，作為計(jì)算機(jī)，IBM的藍(lán)色給人以專業(yè)和嚴(yán)謹(jǐn)，而同樣作為同時(shí)代的電腦，Apple卻給人留下了Think Different的品牌印象。
同樣是做O2O外賣，餓了么選擇了明度較高的藍(lán)色，美團(tuán)外賣選擇了很好傳達(dá)其外賣送達(dá)很快的明黃。但是百度卻用了桃紅，水平不夠，暫時(shí)沒(méi)理解。
三家O2O外賣公司icon
LOGO icon是否清晰表達(dá)功能
對(duì)于一些垂直領(lǐng)域來(lái)說(shuō)，每個(gè)產(chǎn)品是有具體的功能的，比如省電類的主要聚焦在對(duì)于"電池"的管理上，因而金山的手機(jī)電池管理產(chǎn)品『金山電池醫(yī)生』會(huì)用"電池"來(lái)直接表達(dá)，安全類主要聚焦在保衛(wèi)手機(jī)安全，所以360安全衛(wèi)士則直接把"盾"直接傳達(dá)給用戶。
郵件類產(chǎn)品，就算是google的inbox和gmail都以考慮表達(dá)『郵件』這個(gè)功能為郵箱考量。
LOGO icon是否清晰表達(dá)品牌
一些品牌會(huì)運(yùn)用吉祥物或者品牌LOGO直接作為icon，比如QQ的企鵝，美團(tuán)外賣的袋鼠，UC瀏覽器的松鼠等，都是很好的運(yùn)用品牌策略來(lái)設(shè)計(jì)icon的方式。
不過(guò)值得注意的是，雖然都是運(yùn)用吉祥物和LOGO，但由于用戶對(duì)品牌的認(rèn)知度的不同而選用不同的icon，比如阿里巴巴旗下的淘寶雖然有淘公仔，但是icon還是用了一個(gè)『淘』字，相對(duì)來(lái)說(shuō)『淘寶網(wǎng)』三個(gè)字比『淘公仔』更被用戶所熟悉，而同為阿里巴巴旗下的天貓，由于『黑貓』的形象在一開(kāi)始就傳達(dá)給了用戶，因而icon選用了貓的形象。
淘寶vs天貓icon
LOGO icon是否有表達(dá)情感
所謂的賣情懷也好，裝逼也罷，本質(zhì)上是希望通過(guò)設(shè)計(jì)情感和用戶的共鳴來(lái)引導(dǎo)用戶產(chǎn)生設(shè)計(jì)行為。
泡過(guò)論壇的人應(yīng)該都知道『灌水』是論壇的一個(gè)玩法之一，而錘子論壇就直接將這個(gè)用戶常見(jiàn)的功能應(yīng)用到圖標(biāo)的設(shè)計(jì)當(dāng)中，從而用戶每當(dāng)看到這個(gè)圖標(biāo)總會(huì)會(huì)心一笑。
t錘子論壇圖標(biāo)
LOGO icon是否給人留下深刻印象
通常來(lái)說(shuō)，用戶在決策下載行為時(shí)，對(duì)于不了解功能的app更加傾向于下載圖標(biāo)好看的，因?yàn)樗鼈兛雌饋?lái)更可能好用且界面友好。因此，在圖標(biāo)未能傳達(dá)品牌、功能、情感的時(shí)候，只要icon足夠好看也能較好地吸引用戶的注意力。
在直播
在整體app中未貫通使用此形象，但是由于logo形象有趣，因而下載量在同類產(chǎn)品中也算比較多的。
功能icon圖形大小是否統(tǒng)一
面積感
一般來(lái)說(shuō)，app的每個(gè)層級(jí)的icon是表達(dá)不同功能，因此形態(tài)、實(shí)際面積上其實(shí)是會(huì)有差別的。但是在一定范圍內(nèi)，不同icon給用戶呈現(xiàn)的面積感應(yīng)該是一樣的。
并不是說(shuō)每個(gè)icon占據(jù)的像素要一樣大，而是給用戶傳達(dá)的視覺(jué)感受是相同的、統(tǒng)一的。如下圖，三個(gè)圖形，為了表達(dá)出同樣的面積，三角形的圖標(biāo)要略微大于正方形。同樣在我們?cè)O(shè)計(jì)繪制icon的時(shí)候，也要考慮到不同形態(tài)對(duì)于人的視覺(jué)感受的問(wèn)題。只有在統(tǒng)一的面積感下，才可以給用戶帶來(lái)規(guī)整、一致的體驗(yàn)感。
表達(dá)方式
無(wú)論是面形icon還是線形icon，甚至于是現(xiàn)在一些app用的斷線形式的icon，在一個(gè)app的同功能中表達(dá)icon的形式手法應(yīng)該是一致的。
例如下面這套icon，用紅色作為點(diǎn)綴色，那么基本上所有icon在紅色的應(yīng)用的比例感覺(jué)都是類似的。
圖片來(lái)源于：https://dribbble.com/shots/2282787-Medical-Iconography
復(fù)雜程度
這估計(jì)是比較難把握的一個(gè)地方，在同一app中，因?yàn)楣δ艿牟煌?，需要傳達(dá)的信息不同，有些icon相對(duì)來(lái)說(shuō)比較容易畫(huà)，而一些icon則比較復(fù)雜。
這時(shí)，復(fù)雜的icon和簡(jiǎn)單的icon在表達(dá)上可能出現(xiàn)不一致的效果。簡(jiǎn)單的可能幾筆就表達(dá)出來(lái)了，而復(fù)雜的幾乎都要快寫(xiě)實(shí)了。
這時(shí)表達(dá)起來(lái)需要高度概括。但是無(wú)論是怎樣，在一個(gè)app中的icon理論上復(fù)雜程度應(yīng)該是一致的。
如下圖這樣，復(fù)雜的icon和簡(jiǎn)單icon的表達(dá)上就會(huì)顯得很不一致。這時(shí)候要調(diào)整每個(gè)icon的形式，力求達(dá)到相對(duì)一致的視覺(jué)效果。
反例！圖片來(lái)源于：https://www.behance.net/gallery/villa-urbana/2585639
正確例子！圖片來(lái)源于：http://www.zcool.com.cn/work/ZMTE2NzU1Mg==.html
功能icon風(fēng)格是否符合產(chǎn)品功能
在考慮icon是選用線型icon還是面型icon的時(shí)候，一定要從功能出發(fā)開(kāi)始考慮，要考慮用戶在看到這個(gè)icon的時(shí)候的點(diǎn)擊感?？傮w來(lái)說(shuō)，圖標(biāo)選用的線越細(xì)，識(shí)別度相對(duì)越低，但同時(shí)更容易給人以精致的感覺(jué)，越粗識(shí)別度越高。
2px線形圖標(biāo)：
由于在retina屏幕下，只顯示非常細(xì)，相對(duì)識(shí)別度低，但容易給人以精致、時(shí)尚的感覺(jué)。在一些時(shí)尚類app會(huì)考慮使用2px的icon。
3px線形圖標(biāo)：
更多的會(huì)應(yīng)用在一些工具性產(chǎn)品，因?yàn)樗€(wěn)定，且不會(huì)過(guò)分加重視覺(jué)圖標(biāo)在整體界面中的比例。
4px線形圖標(biāo)：
4px的圖標(biāo)相較于2px、3px的圖標(biāo)，更加厚重，做得好的話容易給人年輕、潮流的感覺(jué)。但同時(shí)4px圖標(biāo)在整體界面中的視覺(jué)占比會(huì)比較重，因而在圖標(biāo)大小和留白的比例處理上需要斟酌恰當(dāng)才行。
圖片來(lái)源于：http://www.zcool.com.cn/work/ZMTYwODAxMDA=.html
面形圖標(biāo)：
總體來(lái)說(shuō)，一些偏功能類產(chǎn)品，比如郵件，因?yàn)樵擃惍a(chǎn)品更多強(qiáng)調(diào)的是功能的識(shí)別度和點(diǎn)擊的效率，面型圖標(biāo)相比于線型圖標(biāo)在識(shí)別上更有優(yōu)勢(shì)。
線面混合圖標(biāo)：
一般以深色的線形勾畫(huà)輪廓，加上填充色來(lái)填充整個(gè)形體。從識(shí)別上比單純的線形圖標(biāo)更容易識(shí)別，同時(shí)也比純色的面形圖標(biāo)更加豐富。但是并不是所有app都適合這類圖標(biāo)風(fēng)格，還是需要考慮產(chǎn)品需要營(yíng)造的氛圍和產(chǎn)品的訴求。
圖片來(lái)源于：http://www.zcool.com.cn/work/ZMTQ2MjI2NzY=.html
相關(guān)閱讀：《BESD：空心圖標(biāo)真的比實(shí)心圖標(biāo)更難識(shí)別嗎？》
格式塔心理學(xué)在排版中的應(yīng)用
距離相近的各部分趨于組成整體。
當(dāng)我們需要組織、分割信息的時(shí)候，運(yùn)用格式塔心理學(xué)的方式，可以很好地梳理信息布局。在信息以列表形式重復(fù)出現(xiàn)時(shí)，我們可以盡量使用相同顏色、大小、形狀的圖形或者文字盡量以重復(fù)的形式呈現(xiàn)。
“相似”的應(yīng)用
不同的元素當(dāng)其距離相近的時(shí)候，用戶從視覺(jué)上趨向于將其歸于一個(gè)整體。
“相近”的應(yīng)用
當(dāng)行間距較大時(shí)，其本身可以作為分割內(nèi)容的一種方式。
圖片來(lái)源于：http://www.zcool.com.cn/work/ZMTYwODAxMDA=.html
一個(gè)圖形的某些部分可以被看作是連接在一起的，這些部分會(huì)被我們知覺(jué)為一個(gè)整體。這樣我們可以在界面空間有限的情況下，引導(dǎo)用戶的視覺(jué)流。
“連續(xù)”的應(yīng)用
相關(guān)閱讀：《這個(gè)得學(xué)起來(lái)！超實(shí)用的格式塔原理小科普》
文字
通常在中文app中一般都以一種中文字體作為默認(rèn)字體，因此在此不討論不同字體搭配對(duì)于app中視覺(jué)效果的影響。
文字大小
在一定區(qū)域內(nèi)，不同功能的文字大小的不同會(huì)直接影響用戶瀏覽接受信息的程度。通常選用28px~34px之間的字體大小比較合適閱讀。相對(duì)來(lái)說(shuō)，文字越小，其被接收程度越低。相同大小的文字在相近區(qū)域，用戶瀏覽更容易理解為同一功能。
文字顏色
明度的對(duì)比：在一個(gè)app中顏色的深淺除了受到底色的影響，同時(shí)也受到周圍其他文本顏色對(duì)比的影響。當(dāng)不同信息優(yōu)先層級(jí)的文字用統(tǒng)一顏色時(shí)，瀏覽者在理解上容易增大其關(guān)聯(lián)度，從而容易造成信息理解混亂。
色相的對(duì)比：在黑白灰的顏色區(qū)域中，如果有局部顏色相對(duì)來(lái)說(shuō)都會(huì)更容易吸引用戶注意。
文字和背景
文字和背景只有在高對(duì)比度下才能友好地被用戶閱讀，在應(yīng)用不同顏色的文字和背景配比時(shí)，建議參考以下評(píng)估結(jié)論:
結(jié)論來(lái)源于：http://webdesign.about.com/od/color/l/bl_contrast_table.html
間距
圖文與屏幕邊距是否符合產(chǎn)品訴求。
通常來(lái)說(shuō)，在圖片和屏幕邊距之間保留一定的像素邊距可以更好地引導(dǎo)用戶豎向往下閱讀。
圖為“豌豆莢一覽”
而當(dāng)圖片與屏幕邊距為0的時(shí)候，用戶更容易將注意力集中在每個(gè)圖文內(nèi)容本身，其視覺(jué)流線在往下瀏覽時(shí)，因?yàn)闆](méi)有留白的引導(dǎo)，被圖片直接割裂，造成在圖片上的停留時(shí)間更長(zhǎng)。
對(duì)比，當(dāng)圖片不留邊距時(shí)，用戶更加聚焦在每個(gè)圖文本身，而非被留白引導(dǎo)往下翻閱
行間距是否適合用戶閱讀
在內(nèi)容型文本中，文本行間距太窄會(huì)容易造成閱讀困難。通常的經(jīng)驗(yàn)值，行間距大約是字體間距的1.2~1.5倍之間，總體閱讀會(huì)比較舒服。
對(duì)比行間距1.5倍 VS. 行間距1倍
相關(guān)閱讀：《新手福利！一份詳盡全面的UI設(shè)計(jì)字體與排版指南》
四、微場(chǎng)景篇
空白頁(yè)通常是因?yàn)樾伦?cè)用戶尚未在預(yù)定信息區(qū)域產(chǎn)生相關(guān)信息，因而當(dāng)期瀏覽時(shí)，頁(yè)面信息內(nèi)容為空。在設(shè)計(jì)時(shí)應(yīng)從兩方面來(lái)考慮：
1、情景與內(nèi)容的相關(guān)程度
圖片來(lái)源于易信app
2、不同空白頁(yè)之間的設(shè)計(jì)風(fēng)格關(guān)聯(lián)
通常一個(gè)app內(nèi)會(huì)有多個(gè)空白頁(yè)，不同空白頁(yè)之間相對(duì)獨(dú)立，但是從一致性的角度來(lái)說(shuō)，用戶在瀏覽不同頁(yè)面的時(shí)候，其空白頁(yè)插畫(huà)設(shè)計(jì)風(fēng)格應(yīng)該是一致的。
提示頁(yè)和空白頁(yè)的不同在于其引導(dǎo)性更強(qiáng)，通常會(huì)通過(guò)阻斷式彈層引導(dǎo)用戶按照設(shè)計(jì)的行為進(jìn)行操作，因而相較于空白頁(yè)更需要?dú)夥盏臓I(yíng)造。同時(shí)彈層與彈層之間的尺寸大小、風(fēng)格等也需要考慮一致性的問(wèn)題。
圖片來(lái)源于豆瓣app
在啟動(dòng)頁(yè)或者等待loading、刷新頁(yè)面，通過(guò)動(dòng)畫(huà)可以有助于吸引用戶注意力。減弱等待的焦慮感。
圖片來(lái)源于：https://dribbble.com/shots/1797373-Pull-Down-To-Refresh
引導(dǎo)型動(dòng)畫(huà)
動(dòng)畫(huà)相較于靜態(tài)圖片更容易吸引用戶的視覺(jué)焦點(diǎn)，同時(shí)動(dòng)畫(huà)多伴隨比例、形狀、顏色的變化，其變化本身就是很好的引導(dǎo)用戶行為的方式。
圖片來(lái)源于：https://www.google.com/design/spec/motion/material-motion.html
通過(guò)動(dòng)畫(huà)可以更好地展示內(nèi)容、數(shù)據(jù)等，使之從視覺(jué)角度更加豐富有趣。
圖片來(lái)源于：http://www.uisdc.com/iphone-motion-save-gif
通過(guò)動(dòng)效使得頁(yè)面的層級(jí)更清楚地反應(yīng)給用戶，并使其轉(zhuǎn)場(chǎng)體驗(yàn)順暢。
圖片來(lái)源于：google inbox
在app設(shè)計(jì)中“文案”也是很重要的一部分，從幾年前提示很程序化，到現(xiàn)在的呆萌風(fēng)格，可見(jiàn)產(chǎn)品對(duì)于用戶的人性把握。Google曾經(jīng)提出文案的描述的具體建議在此不鰲述。只就現(xiàn)在國(guó)內(nèi)一些產(chǎn)品的文案提出一些思路。
以空白頁(yè)為例，在未有點(diǎn)贊的“心”的時(shí)候，設(shè)計(jì)者很巧妙的應(yīng)用了當(dāng)下目標(biāo)用戶接受度較高的“求心理陰影面積”，讓用戶看到文案會(huì)會(huì)心一笑。而阻斷式彈層，這些年也可以看到從“去評(píng)論”這樣中性的文案逐漸變成諸如“跪求給點(diǎn)鼓勵(lì)”，這樣的文案對(duì)于用戶來(lái)說(shuō)，有更明確的引導(dǎo)——希望用戶給予高分評(píng)星。
在功能布局的時(shí)候要充分考慮用戶實(shí)際操作場(chǎng)景，盡量讓用戶的操作方便直接。將常用的按鈕盡量布局在用戶可以單手操作點(diǎn)擊的地方。
隨著手機(jī)屏幕變得越來(lái)越大，原有iOS的【返回】按鈕在大屏幕中并不容易被點(diǎn)擊。在一些app開(kāi)始考慮功能布局的友好性，將【返回】按鈕移至底部。用戶更便于操作。
設(shè)計(jì)最優(yōu)先要考慮產(chǎn)品的目的和訴求，在滿足產(chǎn)品的功能。通過(guò)設(shè)計(jì)，我們可以引導(dǎo)用戶的行為和視覺(jué)流，以達(dá)到產(chǎn)品的目的。通過(guò)圖形、文字的大小、形狀、顏色的組織，可以將信息分優(yōu)先級(jí)呈現(xiàn)給用戶。
同時(shí)，美是一種功能。其可以傳達(dá)給用戶整個(gè)產(chǎn)品有趣和高品質(zhì)的感覺(jué)，用戶有時(shí)并不一定是因?yàn)閮?nèi)容吸引，在內(nèi)容不足的時(shí)候，設(shè)計(jì)可以作為內(nèi)容的補(bǔ)足來(lái)保證用戶足夠的停留和二次開(kāi)啟。但同時(shí)有趣的設(shè)計(jì)，需要在保證設(shè)計(jì)風(fēng)格的一致性的前提下，不然莽撞的設(shè)計(jì)容易使用戶迷惑，而關(guān)閉app。
本文由人人都是產(chǎn)品經(jīng)理授權(quán)雷鋒網(wǎng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載！
雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
