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