當設(shè)計一個APP UI的時候我們想什么...

感謝那些日子做sense的兄弟告訴我的道理。

有句話說在前面——好看就是生產(chǎn)力,在app中是真實存在的。

  • 品牌篇
  • 圖標篇
  • 排版篇
  • 微場景篇
  • 動畫篇
  • 交互篇

一、品牌篇

品牌色從大的來說是VI需要優(yōu)先考慮的,考慮點如下:

  • 品牌色與行業(yè)屬性之間的關(guān)系

相對來說不同行業(yè)是有其固有的品牌色的,比如機械行業(yè),通常給人的第一意向就是明黃;而科技、互聯(lián)網(wǎng)企業(yè)給人的第一印象就是科技藍(原諒我用這么俗套的詞)等。
在對于品牌色的決策過程中,行業(yè)屬性是其重要決策部分。

  • 品牌與競品之間的差異化

通常在市場上我們會看到多個同時在滿足用戶同一需求,但是由于其品牌色的不同,會對用戶對于app下載決策的影響。
小恩愛、Between、戀愛記三款產(chǎn)品的核心功能都是做情侶記錄、聊天等的需求。但是由于小恩愛的icon相對于其他兩款app更加跳脫,因為在下載量和市場占有量上遠超其他產(chǎn)品(當然還有產(chǎn)品功能和運營等多方原因,在此僅從色彩來談)。

作為幾乎同期同需求的產(chǎn)品,下載量差異巨大。下載量數(shù)據(jù)來自騰訊應用寶
  • 品牌色的應用范圍

有一些產(chǎn)品最開始是從線上產(chǎn)生的,相對來說對于線下物料、VI的思考不足,同一顏色在不同屏幕的色差等。因而會容易產(chǎn)生線下物料印刷等與線上視覺之間有較大色差,線上視覺形象線下實際應用較難等問題。因而在最初考慮線上品牌的同時,也需要從VI的角度考慮產(chǎn)品后期的品牌營銷傳播等問題。
記得張小龍曾經(jīng)說最后悔微信用綠色,因為在不同的Android手機上,綠色差異非常大。(如果錯誤請糾正)

  • 品牌色與用戶習慣認知之間的印象和策略

相對來說,用戶對于不同的顏色本身會有一個第一印象的直觀理解,因而我們才考慮品牌色時,需要考慮到用戶認知心理,并運用此心理來傳達品牌訴求。在考慮用色的時候,我們要時常提醒自己,需要傳達給用戶如何的品牌印象,這樣的印象是否和產(chǎn)品策略是相符合的,這樣的用色策略是否會和用戶慣常認知是有差異的等等。
舉例來說作為計算機,IBM的藍色給人以專業(yè)和嚴謹,而同樣作為同時代的電腦,APPLE卻給人留下了Think Different 的品牌印象。

同樣是做O2O外賣,餓了么選擇了明度較高的藍色,美團外賣選擇了很好傳達其外賣送達很快的明黃。但是百度卻用了桃紅,水平不夠,暫時沒理解。

三家O2O外賣公司icon

二、圖標篇

LOGO icon

  • LOGO icon 是否清晰表達功能

對于一些垂直領(lǐng)域來說,每個產(chǎn)品時有具體的功能的,比如省電類的主要聚焦在對于"電池"的管理上,因而金山的手機電池管理產(chǎn)品『金山電池醫(yī)生』 會用"電池"來直接表達,安全類主要聚焦在保衛(wèi)手機安全,所以360安全衛(wèi)士則直接把"盾"直接傳達給用戶。
郵件類產(chǎn)品,就算是google 的inbox和gmail都以考慮表達『郵件』這個功能為郵箱考量。

  • LOGO icon是否清晰表達品牌

一些品牌會運用吉祥物或者品牌LOGO直接作為 icon,比如QQ的企鵝,美團外賣的袋鼠,UC瀏覽器的松鼠等,都是很好的運用品牌策略來設(shè)計icon的方式。
不過值得注意的是,雖然都是運用吉祥物和LOGO,但由于用戶對品牌的認知度的不同而選用不同的icon,比如阿里巴巴旗下的淘寶雖然有淘公仔,但是icon還是用了一個『淘』字,相對來說『淘寶網(wǎng)』三個字比『淘公仔』更被用戶所熟悉,而同為阿里巴巴旗下的天貓,由于『黑貓』的形象在一開始就傳達給了用戶,因而icon選用了貓的形象。

淘寶vs天貓 icon
  • LOGO icon 是否有表達情感

所謂的賣情懷也好,裝逼也罷,本質(zhì)上是希望通過設(shè)計情感和用戶的共鳴來引導用戶產(chǎn)生設(shè)計行為。
泡過論壇的人應該都知道『灌水』是論壇的一個玩法之一,而錘子論壇就直接將這個用戶常見的功能應用到圖標的設(shè)計當中,從而用戶每當看到這個圖標總會會心一笑。


t錘子論壇圖標
  • LOGO icon是否給人留下深刻印象

通常來說,用戶在決策下載行為時,對于不了解功能的app更加傾向于下載圖標好看的,因為它們看起來更可能好用且界面友好。因此,在圖標未能傳達品牌、功能、情感的時候,只要icon足夠好看也能較好的吸引用戶的注意力。

在直播 在整體app中未貫通使用此形象,但是由于logo形象有趣,因而下載量在同類產(chǎn)品中也算比較多的

功能icon

  • 功能icon圖形大小是否統(tǒng)一
面積感

一般來說,app的每個層級的icon一般來說是表達不同功能,因此形態(tài)、實際面積上其實是會有差別的。但是在一定范圍內(nèi),不同icon給用戶呈現(xiàn)的面積感應該是一樣的。
并不是說每個icon占據(jù)的像素要一樣大,而是給用戶傳達的視覺感受是相同的、統(tǒng)一的。如下圖,三個圖形,為了表達出同樣的面積,三角形的圖標要略微大于正方形。同樣在我們設(shè)計繪制icon的時候,也要考慮到不同形態(tài)對于人的視覺感受的問題。只有在統(tǒng)一的面積感下,才可以給用戶帶來規(guī)整、一致的體驗感。

表達方式

無論是面形icon還是線形icon,甚至于是現(xiàn)在一些app用的斷線形式的icon,在一個app的同功能中表達icon的形式手法應該是一致的。
例如下面這套icon,用紅色作為點綴色,那么基本上所有icon在紅色的應用的比例感覺都是類似的。

圖像引用自https://dribbble.com/shots/2282787-Medical-Iconography
復雜程度

這估計是比較難把握的一個地方,在同一app中,因為功能的不同,需要傳達的信息不同,有些icon相對來說比較容易畫,而一些icon因為則比較復雜。
這時,復雜的icon和簡單的icon在表達上可能出現(xiàn)不一致的效果。簡單的可能幾筆就表達出來了,而復雜的幾乎都要快寫實了。
這時表達起來需要高度概括。但是無論是怎樣,在一個app中的icon理論上復雜程度應該是一致的。
如下圖這樣,復雜的icon和簡單icon的表達上就會顯得很不一致。這時候要調(diào)整每個icon的形式,力求達到相對一致的視覺效果。

反例!!圖像引用自https://www.behance.net/gallery/villa-urbana/2585639
正確例子 圖來自:http://www.zcool.com.cn/work/ZMTE2NzU1Mg==.html
  • 功能icon風格是否符合產(chǎn)品功能

在考慮icon是選用線型icon還是面型icon的時候,一定要從功能出發(fā)開始考慮,要考慮用戶在看到這個icon的時候的點擊感。總體來說,圖標選用的線形越來細,識別度相對越低,但同時更容易給人以精致的感覺,越粗識別度越高。

  • 2px線形圖標:
    由于在retine屏幕下,只顯示非常細,相對識別度低,但容易給人以精致、時尚的感覺。在一些時尚類app會考慮使用2px的icon。
  • 3px線形圖標:
    更多的會應用在一些工具性產(chǎn)品,因為它更穩(wěn)定,且不會過分加重視覺圖標在整體界面中的比例。
  • 4px線形圖標:
    4px的圖標相較于2px、3px的圖標,更加厚重,做得好的話容易給人年輕、潮流的感覺。但同時4px圖標在整體界面中的視覺占比會比較重,因而在圖標大小和留白的比例處理上需要斟酌恰當才行。
    圖片來源于:http://www.zcool.com.cn/work/ZMTYwODAxMDA=.html
  • **面形圖標: **
    總體來說,一些偏功能類產(chǎn)品,比如
    郵件,因為該類產(chǎn)品更多的強調(diào)的是功能的識別度和點擊的效率,面型圖標相比于線型圖標在識別上更有優(yōu)勢。


  • 線面混合圖標:
    一般以深色的線形勾畫輪廓,加上填充色來填充整個形體。從識別上比單純的線形圖標更容易識別,同時也比純色的面形圖標更加豐富。但是并不是所有app都適合這類圖標風格,還是需要考慮產(chǎn)品需要營造的氛圍和產(chǎn)品的訴求。
    圖片來源于:http://www.zcool.com.cn/work/ZMTQ2MjI2NzY=.html

    相關(guān)閱讀:BESD:空心圖標真的比實心圖標更難識別嗎?http://www.ui.cn/detail/28536.html

三、排版篇

  • 格式塔心理學在排版中的應用

  • 相似
    距離相近的各部分趨于組成整體。
    當我們需要組織、分割信息的時候,運用格式塔心理學的方式,可以很好的梳理信息布局。在信息以列表形式重復出現(xiàn)時,我們可以盡量的使相同顏色、大小、形狀的圖形或者文字盡量以重復的形式呈現(xiàn)。

    “相似”的應用

  • 相近
    不同的元素當其距離相近的時候,用戶從視覺上趨向于將其歸于一個整體。

    “相近”的應用

    當行間距較大時,其本身可以作為分割內(nèi)容的一種方式。

圖片來源于 http://www.zcool.com.cn/work/ZMTYwODAxMDA=.html
  • 連續(xù)
    一個圖形的某些部分可以被看作是連接在一起的,這些部分會被我們知覺為一個整體。這樣我們可以在界面空間有限的情況下,引導用戶的視覺流。
    “連續(xù)”的應用

相關(guān)閱讀:** 這個得學起來!超實用的格式塔原理小科普 **http://www.uisdc.com/gestalt-psychology-knowledge

  • 文字

通常在中文app中一般都以一種中文字體作為默認字體,因此在此不討論不同字體搭配對于app中視覺效果的影響。

  • 文字大小

在一定區(qū)域內(nèi),不同功能的文字大小的不同會直接影響用戶瀏覽接受信息的程度。通常選用28px~34px之間的字體大小比較合適閱讀。相對來說,文字越小,其被接收程度越低。相同大小的文字在相近區(qū)域,用戶瀏覽更容易理解為同一功能。

  • 文字顏色

明度的對比:在一個app中顏色的深淺除了受到底色的影響,同時也受到周圍其他文本顏色對比的影響。當不同信息優(yōu)先層級的文字用統(tǒng)一顏色時,瀏覽者在理解上容易增大其關(guān)聯(lián)度,從而容易造成信息理解混亂。



色相的對比:在黑白灰的顏色區(qū)域中,如果有局部顏色相對來說都會更容易吸引用戶注意。

  • 文字和背景

文字和背景只有在高對比度下才能友好的被用戶閱讀,在應用不同顏色的文字和背景配比時,建議參考以下評估結(jié)論:

結(jié)論來源于: http://webdesign.about.com/od/color/l/bl_contrast_table.htm
  • 間距

  • 圖文與屏幕邊距是否符合產(chǎn)品訴求

通常來說,在圖片和屏幕邊距之間保留一定的像素邊距可以更好的引導用戶豎向往下閱讀。

圖為“豌豆莢一覽”

而當圖片與屏幕邊距為0的時候,用戶更容易將注意力集中在每個圖文內(nèi)容本身,其視覺流線在往下瀏覽時,因為沒有留白的引導,被圖片直接割裂,造成在圖片上的停留時間更長。

對比,當圖片不留邊距時,用戶更加聚焦在每個圖文本身,而非被留白引導往下翻閱
  • 行間距是否適合用戶閱讀

在內(nèi)容型文本中,文本行間距太窄會容易造成閱讀困難。通常的經(jīng)驗值,行間距大約是字體間距的1.2~1.5倍之間,總體閱讀會比較舒服。

對比行間距 1.5倍 VS 行間距 1倍

相關(guān)閱讀:** 新手福利!一份詳盡全面的UI設(shè)計字體與排版指南 **http://www.uisdc.com/ui-design-font-typesetting


四、微場景篇

  • 空白頁

空白頁通常是因為新注冊用戶尚未在預定信息區(qū)域產(chǎn)生相關(guān)信息,因而當期瀏覽時,頁面信息內(nèi)容為空。在設(shè)計時應從兩方面來考慮:

  • 1、情景與內(nèi)容的相關(guān)程度
圖片來源于 易信app
  • ** 2、不同空白頁之間的設(shè)計風格關(guān)聯(lián)**
    通常一個app內(nèi)會有多個空白頁,不同空白頁之間相對獨立,但是從一致性的角度來說,用戶在瀏覽不同頁面的時候,其空白頁插畫設(shè)計風格應該是一致的。
  • 提示頁

提示頁和空白頁的不同在于其引導性更強,通常會通過阻斷式彈層引導用戶按照設(shè)計的行為進行操作,因而相較于空白頁更需要氣氛的營造。同時彈層與彈層之間的尺寸大小、風格等也需要考慮一致性的問題。

圖片來源于 豆瓣app

五、動畫篇

  • 等待型動畫

在啟動頁或者等待loading、刷新頁面,通過動畫可以有助于吸引用戶注意力。減弱等待的焦慮感。

圖片來源于 https://dribbble.com/shots/1797373-Pull-Down-To-Refresh
  • 引導型動畫

動畫相較于靜態(tài)圖片更容易吸引用戶的視覺焦點,同時動畫多伴隨比例、形狀、顏色的變化,其變化本身就是很好的引導用戶行為的方式。


圖片來源于 https://www.google.com/design/spec/motion/material-motion.html
  • 展示型動畫

通過動畫可以更好的展示內(nèi)容、數(shù)據(jù)等,使之從視覺角度更加豐富有趣。


圖片來源于 http://www.uisdc.com/iphone-motion-save-gif
  • 轉(zhuǎn)場型動畫

通過動效使得頁面的層級更清楚的反應給用戶,并使其轉(zhuǎn)場體驗順暢。


圖片來源于 google inbox

六、交互

  • 文案傳達的有效性

在app設(shè)計中“文案”也是很重要的一部分,從幾年前提示很程序化,到現(xiàn)在的呆萌風格,可見產(chǎn)品對于用戶的人性把握。Google曾經(jīng)提出文案的描述的具體建議在此不鰲述。只就現(xiàn)在國內(nèi)一些產(chǎn)品的文案提出一些思路。
以空白頁為例,在未有點贊的“心”的時候,設(shè)計者很巧妙的應用了當下目標用戶接受度較高的“求心理陰影面積”,讓用戶看到文案會會心一笑。而阻斷式彈層,這些年也可以看到從“去評論”這樣中性的文案逐漸變成諸如“跪求給點鼓勵”,這樣的文案對于用戶來說,有更明確的引導——希望用戶給予高分評星。

  • 功能布局的友好性

在功能布局的時候要充分考慮用戶實際操作場景,盡量讓用戶的操作方便直接。將常用的按鈕盡量布局在用戶可以單手操作點擊的地方。
隨著手機屏幕變得越來越大,原有iOS的【返回】按鈕在大屏幕中并不容易被點擊。在一些app開始考慮功能布局的友好性,將【返回】按鈕移至底部。用戶更便于操作。



七、總結(jié):

設(shè)計最優(yōu)先要考慮產(chǎn)品的目的和訴求,在滿足產(chǎn)品的功能。通過設(shè)計,我們可以引導用戶的行為和視覺流,以達到產(chǎn)品的目的。通過圖形、文字的大小、形狀、顏色的組織,可以將信息分優(yōu)先級的呈現(xiàn)給用戶。

同時,
美是一種功能。
其可以傳達給用戶整個產(chǎn)品有趣和高品質(zhì)的感覺,用戶有時并不一定是因為內(nèi)容吸引,在內(nèi)容不足的時候,設(shè)計可以作為內(nèi)容的補足來保證用戶足夠的停留和二次開啟。但同時有趣的設(shè)計,需要在保證設(shè)計風格的一致性的前提下,不然莽撞的設(shè)計容易使用戶迷惑,而關(guān)閉app。

本文僅為個人平日設(shè)計思考總結(jié),有說欠缺不足。還請斧正。
如果這篇文章對你的設(shè)計有點幫助,歡迎打賞~_

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,333評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,491評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,263評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,946評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,708評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,186評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,255評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,409評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,939評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,774評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,976評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,518評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,209評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,641評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,872評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,650評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,958評論 2 373

推薦閱讀更多精彩內(nèi)容