年前就已經(jīng)開(kāi)始策劃這篇文章了，但是最近工作上事情比較多，所以在業(yè)余時(shí)間斷斷續(xù)續(xù)寫(xiě)了一個(gè)多月左右，全文一萬(wàn)2千多字，適用于剛接觸UI的一些小萌新，都是些基礎(chǔ)知識(shí)，但是涵蓋的范圍較廣，都是一些做APP設(shè)計(jì)中經(jīng)常接觸的部分。

硬件方面：

人類接受外界事物信息基本靠眼睛，耳朵，鼻子，四肢，即視覺(jué)聽(tīng)覺(jué)，嗅覺(jué)，觸覺(jué)。在互聯(lián)網(wǎng)的設(shè)備載體中，可以實(shí)現(xiàn)視覺(jué)聽(tīng)覺(jué)與觸覺(jué)的反饋，而我們也需將這三種反饋進(jìn)行合理運(yùn)用，合理配合才能實(shí)現(xiàn)最佳的反饋體驗(yàn)。

觸覺(jué)：

在設(shè)計(jì)中一直被我們所忽略的就是手機(jī)的震動(dòng)，從 iPhone7 之后，蘋(píng)果為了提供細(xì)膩的震動(dòng)反饋，不惜犧牲掉大面積的電池空間來(lái)為線性馬達(dá)讓出了位置，正是這一塊馬達(dá)，為蘋(píng)果的交互提供了真實(shí)細(xì)膩的按壓觸感，之后，蘋(píng)果也為第三方應(yīng)用開(kāi)發(fā)者開(kāi)放了震動(dòng)接口。蘋(píng)果共提供了三種強(qiáng)度的的震動(dòng)頻率，light，medium，heavy，開(kāi)發(fā)者可以將這三種不同的震動(dòng)頻率進(jìn)行巧妙的組合來(lái)實(shí)現(xiàn)不同的表現(xiàn)結(jié)果。

 

為了給產(chǎn)品賦予一個(gè)更完美的交互體驗(yàn)，在開(kāi)發(fā) APP 時(shí)也會(huì)根據(jù)不同的情況調(diào)用震動(dòng)系統(tǒng)配合聲音與視覺(jué)進(jìn)行全方位反饋，比如在基礎(chǔ)組件中選擇日期時(shí)間的滑塊時(shí)，輸入數(shù)字時(shí)，點(diǎn)擊TAB圖標(biāo)時(shí)，在情感化設(shè)計(jì)中汽車啟動(dòng)時(shí)使用震動(dòng)與聲音來(lái)模擬更真實(shí)的引擎啟動(dòng)等等。在設(shè)計(jì)震動(dòng)時(shí)，最重要的方面就是要讓動(dòng)畫(huà)的位置，音效的音階與震動(dòng)的強(qiáng)度、頻率踩好點(diǎn)，從而達(dá)到最真實(shí)的仿真體驗(yàn)。

聽(tīng)覺(jué)：

人類社會(huì)的音樂(lè)起源可以追溯到非常遠(yuǎn)古的時(shí)代，在人類還沒(méi)有產(chǎn)生語(yǔ)言時(shí)，就已經(jīng)知道利用聲音的高低來(lái)表達(dá)自己的思想感情。而之后音樂(lè)也一直發(fā)展到了至今，有了更專業(yè)科學(xué)的聲樂(lè)學(xué)。

科學(xué)研究表明，當(dāng)人體細(xì)胞的震動(dòng)與外部節(jié)奏協(xié)調(diào)時(shí)，大腦就會(huì)分泌多巴胺，多巴胺可以讓人類感到快樂(lè)。

在近幾年的系統(tǒng)廠商中，也格外重視聽(tīng)覺(jué)反饋的設(shè)計(jì)，比如iOS，小米的MIUI系統(tǒng)，OPPO的color os，華為的EMUI一直都很注重聲音的效果，將自然的聲音運(yùn)用于通知及鈴聲之中，讓身處鬧市的人更接近真實(shí)的自然。

在設(shè)計(jì)中，我們也應(yīng)當(dāng)注重聲音所處的場(chǎng)景，有加速心跳的緊急提示音，也有柔和唯美的鬧鐘聲，也有穿刺力極高的警報(bào)音與支付寶到賬的人聲提示音，好的聲音設(shè)計(jì)可以做到它該做的事情，而不是強(qiáng)制產(chǎn)生聲音去騷擾用戶，在私密場(chǎng)景、公共場(chǎng)合需要謹(jǐn)慎使用聲音反饋，以便造成用戶尷尬或者嚴(yán)重影響用戶的生活，引起反感。聲音使用得當(dāng)會(huì)讓產(chǎn)品變得更人性化、智能化，如果運(yùn)用不當(dāng)會(huì)適得其反讓用戶更加厭煩。

軟件方面：

布局

一款A(yù)PP產(chǎn)品是由眾多頁(yè)面組成，而頁(yè)面又是由眾多元素組成，這些元素包含了文字、按鈕、圖片等等，每一個(gè)元素都它各自存在的意義及作用，而排版是衡量一個(gè)頁(yè)面好壞最重要的指標(biāo)。

因?yàn)槭謾C(jī)屏幕是由千萬(wàn)個(gè)像素點(diǎn)組成，所以我們?cè)O(shè)計(jì)的每一個(gè)東西排布坐標(biāo)都盡量為整數(shù)，這樣最終呈現(xiàn)在屏幕上會(huì)更加的清晰（不會(huì)出現(xiàn)鋸齒）。

倍圖原理與作用：

在 UI設(shè)計(jì)當(dāng)中，我們常會(huì)說(shuō)道一倍圖二倍圖之類的東西，那么設(shè)計(jì)為什么要按照倍圖做呢，因?yàn)槊恳豢钍謾C(jī)的屏幕分辨率都不會(huì)一樣，低端機(jī)為了節(jié)省屏幕成本采用分辨率較低的屏幕，高端機(jī)為了用戶的視覺(jué)體驗(yàn)采用的高分辨率的高清屏幕，而隨著時(shí)代的變化，屏幕工藝越來(lái)越先進(jìn)成熟，分辨率也一年比一年高。說(shuō)到了分辨率就不得不提ppi，分辨率是指一款屏幕的像素點(diǎn)數(shù)，比如1920*1080的屏幕就是說(shuō)這一款屏幕橫向每排有1920個(gè)像素點(diǎn)，豎排每排有1080個(gè)像素點(diǎn)，這兩個(gè)數(shù)相乘得到200多萬(wàn)的數(shù)字，那就是這一款屏幕總共擁有200多萬(wàn)個(gè)像素點(diǎn)，那么同樣尺寸的屏幕下，分辨率越高像素點(diǎn)越多顯示效果也就越清晰。而ppi是指每英寸的屏幕對(duì)角線上擁有的像素點(diǎn)數(shù)，這個(gè)數(shù)值越高就代表屏幕像素點(diǎn)密度越大，顯示效果也就越清晰，根據(jù)2010年喬布斯在iPhone4發(fā)布會(huì)上對(duì)視網(wǎng)膜屏幕技術(shù)的介紹：“當(dāng)你所拿的東西距離你10-12英寸（約25-30厘米）時(shí)，它的分辨率只要達(dá)到300ppi這個(gè)‘神奇數(shù)字’（每英寸300個(gè)像素點(diǎn)）以上，你的視網(wǎng)膜就無(wú)法分辨出像素點(diǎn)了，能到到300ppi的屏幕就被譽(yù)為視網(wǎng)膜屏。

但是隨著工藝的發(fā)展，人們對(duì)屏幕清晰度的要求越來(lái)越高，但是也應(yīng)孕而出了許多問(wèn)題，就是比如300*300分辨率的照片在300*300的屏幕上可以得到全屏的展示，但是到了3000*3000分辨率的屏幕上就只能顯示百分之一的大小了，這對(duì)于本身屏幕就不大的手機(jī)屏幕來(lái)說(shuō)根本無(wú)法完美展現(xiàn)，于是就出現(xiàn)了Retina技術(shù)，所謂的Retina就是一種顯示標(biāo)準(zhǔn)，通俗來(lái)講就是把1000*1000的圖像渲染成3000*3000分辨率顯示在在最終的屏幕上，從而達(dá)到無(wú)損放大的效果，原理就是在顯示時(shí)把三個(gè)像素點(diǎn)當(dāng)做一個(gè)像素點(diǎn)使用，這樣最后就是1000*1000分辨率的圖片可以在3000*3000的屏幕上全屏展示，也就是我們最終使用的是3000分辨率的高清晰度，但是實(shí)際圖像就只是1000分辨率的，那么我們按照這個(gè)1000分辨率這個(gè)尺寸去設(shè)計(jì)那就是屬于1倍圖，等最后渲染時(shí)，系統(tǒng)會(huì)去將1000分辨率的圖像根據(jù)不同的機(jī)型屏幕尺寸等比放大到相應(yīng)的倍數(shù)。

在做設(shè)計(jì)稿時(shí)，每個(gè)公司團(tuán)隊(duì)都會(huì)有不同的要求，有的要求用一倍圖，有的用二倍圖，但是如果是從0開(kāi)始制作，那么最好還是建議使用一倍圖做畫(huà)板，因?yàn)橐槐秷D相對(duì)二倍圖來(lái)說(shuō)尺寸較小，在頁(yè)面多的時(shí)候可以避免軟件過(guò)于卡頓，再者蘋(píng)果的官方組件是使用一倍圖的尺寸，方便直接調(diào)用系統(tǒng)組件。需注意一點(diǎn)，如果使用一倍圖設(shè)計(jì)可以使用.5小數(shù)作為元素尺寸，但是要是使用二倍圖則避免摻雜小數(shù)點(diǎn)。

柵格：

柵格就是運(yùn)用固定的格子，遵循一定的規(guī)則進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范簡(jiǎn)潔有規(guī)則。

 

合理的利用柵格讓畫(huà)面更有調(diào)性，讓內(nèi)容更具可讀性同時(shí)也可以快速校準(zhǔn)元素的位置，讓畫(huà)面更加的平衡。同時(shí)還可以模塊化地管理元素，讓版面更富有層次感，便于頁(yè)面響應(yīng)式的布局開(kāi)發(fā)。

在柵格系統(tǒng)中盡量遵循偶數(shù)原則，可被8整除原則和整體布局的靈活性，在我們?cè)O(shè)計(jì)中常使用以基數(shù)為3pt、4pt、8pt的最小柵格進(jìn)行頁(yè)面布局。頁(yè)面中所有元素的尺寸與元素之間的間距和布局規(guī)則都應(yīng)該是基于它整數(shù)倍遞增。

外邊距：

在APP當(dāng)中，所有內(nèi)容都應(yīng)當(dāng)顯示在中間區(qū)域里，中間區(qū)域與屏幕兩邊的之間的邊距稱為外邊距，更大的外邊距可以更突出中間的主要內(nèi)容，同時(shí)也會(huì)提升中間主內(nèi)容的易讀性，增加整個(gè)頁(yè)面的呼吸感。在一倍圖下，常用的外邊距有16pt、20pt，常規(guī)頁(yè)面應(yīng)該使用16pt作為外邊距，閱讀類頁(yè)面可以使用20pt或者更大的外邊距。

排版

在頁(yè)面布局中，應(yīng)該遵循板式的原則：對(duì)齊、重復(fù)、對(duì)比、親密，與格式塔原理：相似性、接近性、連續(xù)性、閉合性。

對(duì)齊

對(duì)齊分為左對(duì)齊、居中對(duì)齊、右對(duì)齊等。在頁(yè)面中，所有的元素都不應(yīng)該隨意的擺放，每一個(gè)元素都應(yīng)該與頁(yè)面中的某個(gè)元素存在一定的視覺(jué)關(guān)系，現(xiàn)代人的閱讀習(xí)慣都是從左到右，因此很多書(shū)籍，海報(bào)等元素都采用局左對(duì)齊的方式，即使文字大小與數(shù)量不一樣，仍然可以進(jìn)行快速的閱讀。在頁(yè)面設(shè)計(jì)中，同一頁(yè)面下不可使用過(guò)多的對(duì)齊規(guī)則，這樣會(huì)破壞閱讀者的心理預(yù)期，導(dǎo)致閱讀效率下降。

重復(fù)

重復(fù)就是一個(gè)頁(yè)面中同時(shí)出現(xiàn)了許多大小、顏色間距等一樣的元素，重復(fù)可以保證頁(yè)面的一致性，他可以是顏色、字體、圖形等等，但是一定要遵循某種設(shè)定好的規(guī)律。重復(fù)最重要的作用就是：統(tǒng)一。

對(duì)比

過(guò)多的重復(fù)會(huì)使頁(yè)面過(guò)于單調(diào)，同時(shí)容易引起視覺(jué)疲勞，而這時(shí)，對(duì)比的作用就顯示了出來(lái)，對(duì)比主要的作用就是拉開(kāi)元素之間的層次性，對(duì)比可以是粗細(xì)之間的不同，也可以是顏色之間的不同，但是在使用對(duì)比原則時(shí)不宜有過(guò)多的層級(jí)，只需要突出前景背景，主、要層級(jí)即可。過(guò)多的使用對(duì)比就會(huì)顯得沒(méi)有主題，亂七八糟，讓人眼花繚亂。

親密

在頁(yè)面的設(shè)計(jì)中，應(yīng)該將有關(guān)系的元素進(jìn)行組合排序，比如主標(biāo)題與副標(biāo)題應(yīng)該歸為一組放在距離接近的地方。親密最重要的目的就是實(shí)現(xiàn)元素之間的組織性，使頁(yè)面充滿條理性。如果信息之間具有條理性會(huì)增加閱讀的速度與記憶速度。

格式塔原理

說(shuō)完了設(shè)計(jì)原則就不得不提格式塔原理，格式塔原理完美的解釋了設(shè)計(jì)四大原則的原理。

 

格式塔由三位德國(guó)心理學(xué)家在研究 似動(dòng)現(xiàn)象 的基礎(chǔ)上創(chuàng)立，格式塔源自德語(yǔ)“Gestalt”意思為“整體、完形”格式塔理論也被稱為完形理論。核心理論：我們習(xí)慣于以規(guī)則，有序，對(duì)稱和簡(jiǎn)單的方式把不同的元素加以簡(jiǎn)單的組織，一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程，正是通過(guò)這一過(guò)程，才產(chǎn)生出易于理解、協(xié)調(diào)的整體。

 

我們的眼睛和大腦在觀察事物，接收影像刺激的時(shí)候，會(huì)有一些特別的傾向。這些傾向常?？梢詭椭覀兛焖俚谋鎰e事物，有時(shí)候也會(huì)產(chǎn)生一些「視錯(cuò)覺(jué)」。完形心理學(xué)重要的概念便是「整體不等于個(gè)體的總合」，舉例來(lái)說(shuō)：當(dāng)我們?cè)谟^察另一個(gè)人的時(shí)候，并不是先看到他的手，腳，頭，眼睛，耳朵，鼻子，然后把這些視覺(jué)特征組合成一個(gè)稱為「人」的組合。我們是直接的觀察到人這個(gè)「整體」，而不是其他器官的「?jìng)€(gè)體的總合」。

相似性

在我們的視覺(jué)中，我們的人眼會(huì)將具有共同特征的物體進(jìn)行自動(dòng)歸類，則元素相似的會(huì)被感知為一組。相似性原則可以幫助我們組織和分類頁(yè)面中的元素，在設(shè)計(jì)當(dāng)中，應(yīng)該將具有相同功能、含義的元素在視覺(jué)上保持統(tǒng)一，比如在音樂(lè)列表中，列表內(nèi)每一條的元素（圖片、標(biāo)題、歌手等）都是同樣的功能與含義，因此設(shè)計(jì)好一條列表，便可定義為復(fù)用組件，只需要調(diào)整每一條之間的距離便可以形成一個(gè)完成的功能模塊。

接近性

當(dāng)兩個(gè)物體相互靠近時(shí)，我們會(huì)感知為在同一個(gè)組織中。具體來(lái)說(shuō)就是元素之間的距離遠(yuǎn)近會(huì)影響我們感知它們是否為一組，當(dāng)一個(gè)頁(yè)面中存在多個(gè)元素時(shí)，距離相近的元素會(huì)被我們自動(dòng)劃分為一組，而距離相對(duì)較遠(yuǎn)的元素則會(huì)被劃分到組外。在近幾年的設(shè)計(jì)中，扁平簡(jiǎn)約的趨勢(shì)一直在流行，大留白的設(shè)計(jì)代替了很多傳統(tǒng)分割線的設(shè)計(jì)，但是去除了分割線之后我們依舊可以很好的識(shí)別頁(yè)面中相關(guān)聯(lián)的模塊，這其中的原理就是格式塔的接近性原理。

連續(xù)性

在看電影時(shí)，我們希望從頭看到尾不受打斷，而不是每隔幾分鐘就插一段廣告。視覺(jué)上也是如此，我們的視覺(jué)傾向于感知連續(xù)的元素，而不是到處分散的碎片。在設(shè)計(jì)中，我們應(yīng)將相關(guān)聯(lián)的元素按照統(tǒng)一方向進(jìn)行排布，將用戶的視線進(jìn)行規(guī)律性引導(dǎo)，以便用戶快速理解與感知操作方式。常見(jiàn)的滑動(dòng)導(dǎo)航欄，流內(nèi)容模塊等。

閉合性

人類的視覺(jué)會(huì)自動(dòng)嘗試將空出/殘缺的圖形閉合（或腦補(bǔ)）起來(lái)，從而將其感知為完整的物體而不是破碎的物體。簡(jiǎn)單點(diǎn)說(shuō)，當(dāng)圖形是一個(gè)殘缺的圖形，但主體有一種使其閉合的傾向，即主體能自行填補(bǔ)缺口從而將其感知為一個(gè)整體。

就比如下圖，即便是圖形被遮擋，但是大腦依舊可以判斷圖形的全部外貌。

顏色

主色/品牌色

人類獲取信息百分之83是來(lái)自于視覺(jué)系統(tǒng)，而最先識(shí)別的就是物體的顏色，其次是形狀，因此一個(gè)品牌的品牌色是一個(gè)品牌的重要傳播途徑，因此品牌色一旦形成便不會(huì)被輕易的改變，比如工商銀行的紅色，農(nóng)業(yè)銀行的綠色。在前期選擇產(chǎn)品主色的時(shí)候，應(yīng)該根據(jù)色彩心理學(xué)來(lái)尋找色彩所對(duì)應(yīng)的含義，比如綠色具有健康、活力、生命等意義，所以農(nóng)業(yè)銀行會(huì)根據(jù)農(nóng)業(yè)這個(gè)關(guān)鍵詞選擇綠色作為主色，一個(gè)顏色選取的好會(huì)更好的贏得用戶的信任。

在選取品牌色時(shí)，單色永遠(yuǎn)比多色好，因?yàn)閱紊哂写硇耘c更快的識(shí)別速度，而且更利于用戶的記憶，減少增加記憶的負(fù)擔(dān)。

在選色時(shí)，色相、飽和度、明度的選取也非常重要，色相決定了色彩心理，飽和度與明度決定了一個(gè)品牌的調(diào)性，大紅大綠的高飽和度取色會(huì)顯得偏為廉價(jià)，比如蘭州拉面的門(mén)牌，增加明度與放低飽和度的取色會(huì)更清新化、活力化，比如Tiffany的藍(lán)色，而減少了明度與降低飽和度的色彩會(huì)更偏向于穩(wěn)重感、端莊感，比如領(lǐng)英的主題藍(lán)。

輔助色

輔助色一般用于配合主色使用，頁(yè)面大面積使用主色會(huì)造成視覺(jué)疲勞，無(wú)法有效的突出內(nèi)容，加入部分的輔助色做配合會(huì)讓頁(yè)面顯得更活潑靈動(dòng)。

一般來(lái)說(shuō)輔助色的選取會(huì)按照主色選取與主色臨近的顏色或者有強(qiáng)烈對(duì)比的顏色作為輔助色，如果產(chǎn)品偏年輕化，使用沖撞的顏色搭配會(huì)顯得非常潮流炫酷。

如果產(chǎn)品偏于嚴(yán)肅莊重的風(fēng)格一般常使用鄰近色或者中性色作為輔助搭配，讓頁(yè)面更協(xié)調(diào)，看起來(lái)更莊重。

在使用輔助色時(shí)用色面積一定要小，不能搶占了主色的地位，主色的使用場(chǎng)景一般用于指引操作狀態(tài)，高亮重要元素，標(biāo)記關(guān)鍵行動(dòng)點(diǎn)等，而輔助色的功能僅僅只是作為配合色讓頁(yè)面更美觀，不單調(diào)。輔助色可以使用一種顏色作為輔助色，也可以使用多種顏色作為輔助色，常用于圖標(biāo)色彩運(yùn)用，部分插畫(huà)色彩運(yùn)用與部分運(yùn)營(yíng)的色彩運(yùn)用。

警示色

警示色直接使用「紅黃綠」，這和人的視覺(jué)機(jī)能結(jié)構(gòu)與心理反應(yīng)有關(guān)，人的視網(wǎng)膜有桿狀和三種錐狀的感光細(xì)胞，桿狀細(xì)胞對(duì)黃色的光譜特別敏感，而三種錐狀細(xì)胞則對(duì)紅綠藍(lán)最為敏感，但是綜合而言，眼睛對(duì)于藍(lán)色的感光細(xì)胞較少，所以很多產(chǎn)品使用藍(lán)色作為主色，藍(lán)色被大面積的使用也不會(huì)令人非常反感、刺眼。既然紅黃綠最容易被人眼識(shí)別，所以這三種顏色加藍(lán)色也被定為國(guó)際安全色，并賦予特殊的含義，紅色 在可見(jiàn)光譜中頻率最低，波長(zhǎng)最長(zhǎng)，衍射能力最強(qiáng)，因此也最為醒目，而且在色彩心理中給人一種迫近感與擴(kuò)張感，容易引發(fā)興奮，激動(dòng)緊張的情緒，所以被用作：禁止、錯(cuò)誤的表意。而綠色與植物有關(guān)，因此綠色又被譽(yù)為是健康，富有生命的顏色，在全球的使用規(guī)則上，綠色經(jīng)常被用作為通過(guò)、安全。 黃色的頻率適中，介于紅綠之間， 是眾多色彩中最溫暖的顏色，因此常用作友好的提示、提醒。

中性色

中性色，又稱無(wú)彩色系，包含黑色白色以及不同深淺的灰色，中性色色彩通道柔和，不會(huì)特別耀眼，因此可以起到中和、緩解的作用。在界面中的背景色與文字色，分割線，部分圖標(biāo)都會(huì)大量使用到中性色，可以說(shuō)除了需要著重標(biāo)記的部分主輔色之外，其余都使用中性色。

但是中性色的制定也非常講究，在做設(shè)計(jì)中，最忌諱使用純黑色#000000，因?yàn)楸蛔u(yù)為世界上最黑的物質(zhì)也還會(huì)反射0.035%的光線，因此在人類目前的文明中，還沒(méi)有發(fā)現(xiàn)純黑色的物質(zhì)，所以我們?nèi)粘Ｉ钪兴?jiàn)到的「黑色」都是會(huì)反射一小部分光線深灰色，設(shè)計(jì)不同于藝術(shù)，設(shè)計(jì)是為了更好的服務(wù)于人，實(shí)用性永遠(yuǎn)大與藝術(shù)性，所以只有貼近于現(xiàn)實(shí)的設(shè)計(jì)才會(huì)更好的被人接受，因此在制定中性色規(guī)范中，我們常用深灰色作為最「黑」的背景。在很多廠商的規(guī)范中，常用于#333、#666、#999三種顏色作為中性色的主色值，這三種顏色便于設(shè)計(jì)師與開(kāi)發(fā)的記憶，同時(shí)層次方面也是可以完美用于標(biāo)題，正文，描述這三種不同情況的場(chǎng)景。但是在近些年的APP中，我也看到了許多非黑白灰的色彩，也有很多的產(chǎn)品在中性色中混入了藍(lán)色、青色等色彩，在實(shí)際的效果中，中性色加入偏藍(lán)色的色相確實(shí)會(huì)讓人眼前一亮，整體的效果具有干凈、清爽淡雅的感覺(jué)。后面在我無(wú)聊中的試驗(yàn)發(fā)現(xiàn)，中性色的色相一般為210-240之間會(huì)比較好，210偏藍(lán)，240偏紫，因?yàn)槿搜蹖?duì)色彩的敏感度大與無(wú)色，而藍(lán)色給人理智、安逸、希望、文靜的感覺(jué)，因此混入偏藍(lán)的中性色會(huì)在閱讀上給人更加舒適的感覺(jué)。

圖像

目前市面上常用的圖像比例為四種：1:1，3:2，4:3，16:9。

在對(duì)角線長(zhǎng)度相同的情況下，圖形越接近圓形視覺(jué)聚焦性越強(qiáng)，圖片所占面積也越大，故1:1比例的照片具有聚焦性強(qiáng)的優(yōu)點(diǎn)，一般適用于頭像，商品圖等視覺(jué)焦點(diǎn)集中的場(chǎng)景。

 

4:3是一種歷史悠久的畫(huà)幅比例形式。早在上個(gè)世紀(jì)50年代，美國(guó)國(guó)家電視委員會(huì)就開(kāi)始將這種比例作為電視畫(huà)面的標(biāo)準(zhǔn)，因?yàn)橄啾?:2及16:9來(lái)說(shuō)，這種比例更接近于圓形，可以展示更多的內(nèi)容，在UI的使用中，4：3比例常用于頭圖，封面等占據(jù)視覺(jué)主位的圖，

 

3:2比例最早起源于35mm電影膠卷，來(lái)自于最早的萊卡相機(jī)，具有較強(qiáng)的專業(yè)性，同樣也是最接近黃金分割比的一種比例，在視覺(jué)上更符合人類的審美，一般拍攝的圖片，相片等富有藝術(shù)性的圖像使用3：2比例。

 

根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16：9的長(zhǎng)方形，所以電視、顯示器行業(yè)根據(jù)這個(gè)的黃金比例尺寸設(shè)計(jì)產(chǎn)品。在人們的印象中16：9就是電影級(jí)別比例，在UI中常用于和影視有關(guān)的海報(bào)與影片。

文字

文字是人們從屏幕獲取信息的重要途徑，它沒(méi)有視頻那樣炫酷也沒(méi)有圖片那樣直觀，但是卻能呈現(xiàn)出最準(zhǔn)確的信息，因此文字的排版與使用直接影響到閱讀體驗(yàn)，好的文字排版設(shè)計(jì)可以讓用戶非常舒適的閱讀。

在我們?nèi)粘Ｉ钪?，我們最常?jiàn)的就是中文，其次是英文，排版方法可以分為方塊字，比如中文，日文，韓文等，和西文字母，比如英語(yǔ)，德語(yǔ)，法語(yǔ)等。在同一字號(hào)下，正常情況英文會(huì)比中文小一些，這兩種類型的文字在使用區(qū)別上最顯而易見(jiàn)的就是斷行，中文按照單字?jǐn)嘈?，英文按照單詞斷行。

在UI設(shè)計(jì)中，字體是非常重要的一部分，很多大廠都有自己的字體規(guī)范，用規(guī)范去標(biāo)準(zhǔn)化字體的各種屬性，以便達(dá)到統(tǒng)一的效果。

字號(hào)與字重

字號(hào)如果過(guò)多會(huì)使信息失去重點(diǎn)，基礎(chǔ)字號(hào)控制在3種以內(nèi)，即標(biāo)題、正文、副文本，而標(biāo)題與正文的字號(hào)大小至少相差4px以上，目的在于清晰區(qū)分信息的層級(jí)。大標(biāo)題、價(jià)格等重要信息需按實(shí)際情況加大，令重要信息的層級(jí)更為突出。在網(wǎng)頁(yè)設(shè)計(jì)中，可視化最小字號(hào)為12px，移動(dòng)端設(shè)備一倍圖下，可視化最小字號(hào)為11pt，在特殊情況下可以使用小于可視化的字號(hào)，但是在閱讀場(chǎng)景下為了更好地閱讀體驗(yàn)則不得小于最小化字號(hào)。

字重就是字體的粗細(xì)程度，細(xì)的字體給人以柔美簡(jiǎn)約的美感，而較粗的字體給人更穩(wěn)重霸氣的感覺(jué)，在一整套字體中通常會(huì)有6種不同的字重作為選擇，在UI界面中，通常會(huì)用到中間的四種，而超大標(biāo)題或價(jià)格信息可能會(huì)用到最粗的字重，越粗的字重需要配合更大的字與字間距，防止糊成一團(tuán)。而最細(xì)的字體一般需要謹(jǐn)慎使用，因?yàn)榭赡茉斐勺煮w辨識(shí)度太差無(wú)法看清。加粗后的字體往往是整個(gè)界面的視覺(jué)焦點(diǎn)，需要用在需要突出的信息中。

字間距與行高

一個(gè)標(biāo)準(zhǔn)的中國(guó)漢字由字身框與字面框組成，為了使文字看起來(lái)大小更統(tǒng)一舒適，文字會(huì)在字面框中進(jìn)行調(diào)節(jié)，最終文字按照字身框貼齊進(jìn)行排列，而字身框與字面框之間的距離就是默認(rèn)字間距，也就是一個(gè)字與一個(gè)字之間的間距。

字號(hào)越小，每個(gè)字符所呈現(xiàn)的細(xì)節(jié)也就越少，那字間距與行高就應(yīng)該相應(yīng)增大，否則會(huì)密密麻麻的擠在一起，非常影響閱讀的效果。文字的字間距也會(huì)影響閱讀節(jié)奏，字間距大的文章，閱讀速度會(huì)相應(yīng)的變慢。因此，文章、詩(shī)歌等需要「細(xì)品」的文章在排版時(shí)，也會(huì)刻意調(diào)大字間距。

通俗來(lái)說(shuō)字間距就是每個(gè)字橫向之間的間距，那么行高就是每行字縱向之間的距離，在常規(guī)少數(shù)量文字的閱讀中，行高通常使用文字大小的1.2~1.5倍范圍，但是如果在字?jǐn)?shù)較多的場(chǎng)景下，比如新聞詳情頁(yè)，小說(shuō)閱讀頁(yè)等，則需要將行高調(diào)至文字大小1.8~2.5倍的范圍，這樣的大留白會(huì)使閱讀更加舒適，便于長(zhǎng)時(shí)間閱讀。

總結(jié)來(lái)說(shuō)就是，文字的字號(hào)越小，字間距與行高應(yīng)該越大，文字的字號(hào)越大，字間距與行高應(yīng)該越小。

文字?jǐn)?shù)量

人的注意力是有限的，僅能在較短的時(shí)間內(nèi)快速有效的獲取到信息內(nèi)容，這也就是「一圖勝千言」的由來(lái)，人在看一張圖片時(shí)只需要瞥一眼就能了解到圖中的大部分信息，而文字則需要耐心閱讀，尤其是在這個(gè)信息爆炸的時(shí)代，每個(gè)人每天都會(huì)閱覽無(wú)數(shù)視頻、圖片、文字，這也使得大多數(shù)人難以做到有耐心的閱讀文字，這樣我們?cè)谶M(jìn)行頁(yè)面設(shè)計(jì)時(shí)就需要將文字閱讀體驗(yàn)設(shè)計(jì)到最舒適的狀態(tài)，而每行文字?jǐn)?shù)量的多少則直接影響到了閱讀的效率。

在移動(dòng)設(shè)備的中文的排版中，每行字做到一行15~20個(gè)文字為最佳，網(wǎng)頁(yè)排版中，每行32~42字為最佳（最多不要超于50字）。移動(dòng)設(shè)備的英文排版中，單行布局做到每行字?jǐn)?shù)為45~75，最優(yōu)為66（包括空格與符號(hào)），多行布局則為40~50。如果文字過(guò)多，可能讀者在未閱讀完一行字的情況下就已經(jīng)失去的耐心，導(dǎo)致無(wú)法有效精準(zhǔn)的獲取后半行的信息。

避頭尾處理

在現(xiàn)代漢語(yǔ)中，有的標(biāo)點(diǎn)符號(hào)不可放置行首，有的不可放置行尾。

因此避頭處理方法最簡(jiǎn)單的就是遇到標(biāo)點(diǎn)符號(hào)跨行時(shí)將上一行的尾字與標(biāo)點(diǎn)移至下一行。

按鈕

按鈕是UI設(shè)計(jì)中非常常用的模塊，用于引導(dǎo)用戶進(jìn)行操作。按鈕種類包含很多種，有常規(guī)按鈕、文字按鈕、圖標(biāo)按鈕、開(kāi)關(guān)按鈕等，每個(gè)按鈕都有其特定的作用。

常規(guī)類型

最常見(jiàn)的按鈕，一般分為實(shí)心按鈕（主按鈕），弱化實(shí)心按鈕（輔按鈕）、虛線按鈕、幽靈按鈕。

用法

主按鈕顏色最顯眼，最搶占視覺(jué)重點(diǎn)，一個(gè)操作區(qū)域內(nèi)只能有一個(gè)主按鈕。

弱化實(shí)心按鈕視覺(jué)弱于主按鈕，通常用于輔助主按鈕，做次引導(dǎo)效果。

幽靈按鈕相比于前兩個(gè)按鈕視覺(jué)更弱，通常用于功能操作與負(fù)向操作（如返回，退出等）。

虛線按鈕：虛線按鈕使用頻次非常低，有時(shí)用戶添加操作。

按鈕寬高

按鈕作為引導(dǎo)用戶操作的重要途徑，其寬高決定了按鈕的可視范圍，操作區(qū)域。如果按鈕過(guò)大可能會(huì)顯得異常突兀，如果過(guò)小可能會(huì)導(dǎo)致點(diǎn)擊困難。那么在日常設(shè)計(jì)中，按鈕隨著寬度的變化，高度也會(huì)發(fā)生變化，通常來(lái)說(shuō)按鈕的高度為文字字號(hào)的三倍左右，看著會(huì)比較舒適，不過(guò)隨著按鈕寬度的加大，為了保證長(zhǎng)寬比自然舒適可以將按鈕高度適當(dāng)加大。

按鈕的寬度則沒(méi)有太過(guò)固定的尺寸，通常會(huì)隨著屏幕的增寬而自適應(yīng)，最寬情況需要頂至頁(yè)面的安全邊距，盡量不要讓按鈕通屏，否則會(huì)給頁(yè)面帶來(lái)割裂感，使得頁(yè)面看起來(lái)不完整。

按鈕形態(tài)

按鈕最簡(jiǎn)單的分為直角按鈕，小圓角按鈕，圓角按鈕，扁平按鈕，輕擬物按鈕，擬物按鈕等。

按鈕的形態(tài)隨著業(yè)務(wù)的面向的人群而變化。直角給人以高級(jí)、端莊、穩(wěn)定的感覺(jué)，通常直角按鈕用于奢侈品售賣軟件、潮流軟件、企業(yè)官網(wǎng)等。

圓角給人以親和、舒適、友好的感覺(jué)，通常用于面向于年輕用戶，是眾多產(chǎn)品的首選。

小圓角按鈕既擁有圓角的部分親和力同時(shí)也擁有直角的端莊高級(jí)，常用于B端產(chǎn)品，中老年產(chǎn)品與成年人教育行業(yè)等。

輕擬物按鈕則是在扁平的按鈕上增加輕微質(zhì)感，讓按鈕具有一定的光影效果，更具有層次感，輕擬物按鈕因?yàn)樵黾恿速|(zhì)感所以視覺(jué)效果上也更為突出，引導(dǎo)效果更強(qiáng)于扁平按鈕，也更富有活力感。

擬物按鈕則是具備了我們現(xiàn)實(shí)生活中的光影質(zhì)感，有高光，陰影，亮部，暗部等屬性，具備極佳的立體感，但是也會(huì)增加用戶的視覺(jué)聚焦，擬物按鈕需要在背景極為復(fù)雜，視覺(jué)沖擊力極高的的情況下使用才不會(huì)突兀，通常用在游戲界面，營(yíng)銷界面，車機(jī)系統(tǒng)中。

按鈕狀態(tài)

按鈕狀態(tài)有常規(guī)狀態(tài)，按下?tīng)顟B(tài)，加載中狀態(tài)，不可點(diǎn)擊狀態(tài)。

按下?tīng)顟B(tài)通常給按鈕加一個(gè)純白12%~20%或者純黑12%~20%的蒙層。

加載中狀態(tài)則是在按鈕文字前加入loading動(dòng)畫(huà)。

不可點(diǎn)擊狀態(tài)通常使用灰色背景配灰色文字的按鈕或者將按鈕降低透明度。

按鈕文案

按鈕的作用是引導(dǎo)用戶，是最直接的交互方式，因此按鈕的文案也是非常重要的。

按鈕的文案應(yīng)該具有言簡(jiǎn)意賅，突出重點(diǎn)信息，明確指引的作用，而不應(yīng)該是難以理解的詞語(yǔ)。

在設(shè)計(jì)文案時(shí)，我們應(yīng)該省略無(wú)用的詞匯，不要重復(fù)用戶已經(jīng)知道的事情，提供易于快速獲取的信息內(nèi)容。

觸摸熱區(qū)

正常成年人的拇指指肚面積為3平方厘米，而觸摸到屏幕上最小也有約1平方厘米的面積，如果女生做了美甲，可能需要使用指肚來(lái)觸摸屏幕。

我們?nèi)粘Ｊ褂玫氖謾C(jī)屏幕精確度是非常高的，但是受手指觸摸面積的影響，在設(shè)計(jì)的過(guò)程中不能太過(guò)于精準(zhǔn)的設(shè)計(jì)觸摸范圍，而是適當(dāng)?shù)募哟笥|摸元素的觸控范圍提升容錯(cuò)率，這樣才可以提升用戶的點(diǎn)擊事件成功率。在谷歌的設(shè)計(jì)語(yǔ)言中，規(guī)定觸摸熱區(qū)范圍至少為48dp*48dp，元素與熱區(qū)還需留有至少8dp的距離，iOS的設(shè)計(jì)語(yǔ)言中則要求觸摸熱區(qū)至少為44pt*44pt。

投影

有光便有影，正是因?yàn)橛泄庥暗某尸F(xiàn)才使得我們的世界五彩斑斕，讓我們身處的這個(gè)三維世界具有立體感，在攝影、舍內(nèi)設(shè)計(jì)、園林設(shè)計(jì)等等設(shè)計(jì)中都可以看到光影的設(shè)計(jì)。

在UI設(shè)計(jì)中，提出光影設(shè)計(jì)理念的是谷歌的Material Design設(shè)計(jì)語(yǔ)言，谷歌認(rèn)為，即便是在二維的屏幕中，依然可以將物理世界中的光影進(jìn)行完美呈現(xiàn)，在現(xiàn)實(shí)中，影子會(huì)隨著物體距離地面的高度以及物體距離燈光的距離角度所影響，因此在UI界面中，當(dāng)一個(gè)圖形被虛擬燈光所照亮也會(huì)呈現(xiàn)出投影，而這個(gè)投影的柔和程度與深淺則決定的圖形與背景的距離，以此讓畫(huà)面中的元素更富有層次感。

谷歌提出的理念是好的，但是實(shí)際用到真正的界面中，過(guò)重的投影會(huì)讓畫(huà)面顯得非常不自然，讓整個(gè)屏幕變的臟亂無(wú)比，因此我們?cè)谠O(shè)計(jì)時(shí)需要將投影進(jìn)行柔和與淡化的處理，好的界面投影可以讓用戶感受不到他的存在，但是卻能感覺(jué)到層級(jí)的變換。

投影在真實(shí)環(huán)境中是不帶有任何色彩的，無(wú)論物體是什么顏色，燈光是什么顏色都不會(huì)影響到投影的顏色，但是在UI界面中，我們可以變換投影的色彩來(lái)達(dá)到最完美的呈現(xiàn)效果，最常用的三種模式是：彌散投影（投影采用元素的色彩），純黑投影，與背景色相近的投影。

彌散投影：彌散投影的制作通常將元素復(fù)制一份出來(lái)進(jìn)行高斯模糊并減少其透明度，然后放置于元素的下層，彌散投影色彩豐富，給人感覺(jué)像是物體在鏡面中的倒影，因此備受設(shè)計(jì)師青睞，但是彌散投影在開(kāi)發(fā)上難以實(shí)現(xiàn)，通常采用切圖的方式交付。

純黑透明度投影：純黑投影是最符合自然的，在界面中使用純黑投影需要將透明度降低，柔化值加大，通常情況下背景為純白，投影的透明度不要超過(guò)10%。在柔化上，根據(jù)卡片的面積大小來(lái)制定。

與背景顏色相近的投影使用方法與純黑接近就不過(guò)多描述了。

 

在卡片與背景色顏色相同時(shí)使用投影，應(yīng)該在卡片外邊緣加入顏色深于按鈕的外描邊，這樣可以更加有效的區(qū)分卡片與背景，使其清爽直觀。

瓷片區(qū)與輪播圖

瓷片區(qū)和輪播圖是一款產(chǎn)品做運(yùn)營(yíng)引流，分發(fā)流量必不可少的元素，通常瓷片區(qū)與banner占據(jù)著一款A(yù)PP首頁(yè)最頭部位置，是整個(gè)軟件曝光率最高的板塊。

結(jié)構(gòu)

輪播圖與瓷片區(qū)結(jié)構(gòu)分為背景層、裝飾層、文案層。

背景層會(huì)確立輪播圖與瓷片區(qū)整體的風(fēng)格與配色，裝飾層起到點(diǎn)綴、豐富視覺(jué)讓畫(huà)面飽滿、烘托氛圍的作用，并且可以控制整體板式的平衡，文案層是最核心的內(nèi)容展示，通常由主標(biāo)題與副文案組成，主標(biāo)題應(yīng)該突出重點(diǎn)要表達(dá)的文字，副文案可以用來(lái)解釋主文案，也可以用來(lái)突出賣點(diǎn)，強(qiáng)化狀態(tài)。

要點(diǎn)

一張運(yùn)營(yíng)圖設(shè)計(jì)的好與壞不應(yīng)該單單從美觀度上進(jìn)行評(píng)判，UI設(shè)計(jì)屬于工業(yè)類設(shè)計(jì)，工業(yè)類設(shè)計(jì)于藝術(shù)類設(shè)計(jì)的區(qū)別在于工業(yè)設(shè)計(jì)需要在「美觀」與「好用」上進(jìn)行平衡，美觀是其中的一部分，更重要的是設(shè)計(jì)出的結(jié)果是否可以一針見(jiàn)血，吸引用戶去點(diǎn)擊。

那么好的輪播圖與瓷片與的設(shè)計(jì)應(yīng)該注重以下幾點(diǎn)，以保證產(chǎn)出的設(shè)計(jì)可以為商業(yè)賦能。

定位

風(fēng)格定位準(zhǔn)確，符合產(chǎn)品風(fēng)格。

每個(gè)產(chǎn)品的業(yè)務(wù)都不一樣，所面對(duì)的客戶群體也不一樣，那么產(chǎn)品的風(fēng)格也應(yīng)該有所區(qū)別，比如K歌軟件就應(yīng)該以年輕，炫酷，潮流為主，閱讀軟件就應(yīng)該以文藝，簡(jiǎn)約為主，并不能設(shè)計(jì)所有的東西都只使用一種設(shè)計(jì)風(fēng)格，與整個(gè)產(chǎn)品的調(diào)性格格不入，讓用戶有明顯的跳躍感。

信息層級(jí)

信息層級(jí)清晰，傳達(dá)消息準(zhǔn)確。

標(biāo)題、副文案、標(biāo)簽、引導(dǎo)按鈕、圖片應(yīng)該具有主次性，用戶只需一眼就可以看出信息所表達(dá)的內(nèi)容。在文案與配圖上，兩者的表意性應(yīng)該高度吻合，用戶不管是看圖還是看文字都可以準(zhǔn)確的理解內(nèi)容。

可讀性

字體辨識(shí)度高，圖片識(shí)別度高。

在運(yùn)營(yíng)圖的設(shè)計(jì)上，主要目的是為了吸引用戶進(jìn)行點(diǎn)擊，因此字體與圖片需要有較高的辨識(shí)度，字體最好選用筆畫(huà)簡(jiǎn)單明快的字體，圖片最好選用表意性、代表性強(qiáng)的圖片。

創(chuàng)意

原創(chuàng)程度高，創(chuàng)意豐富。

原創(chuàng)是設(shè)計(jì)師應(yīng)該具備的基本素質(zhì)，人類的好奇心與生俱來(lái)無(wú)法改變，每個(gè)人都喜歡接觸新鮮的事物，作為設(shè)計(jì)師應(yīng)該標(biāo)新立異，打破陳規(guī)，與現(xiàn)存的風(fēng)格有所差異才能在這個(gè)信息大爆炸的時(shí)代足夠的吸引用戶的眼球。

細(xì)節(jié)

高品質(zhì)配圖，摳圖干凈。

正所謂一圖勝千言，圖片是最直觀的信息傳達(dá)方式，相比于視頻效率更高更節(jié)約時(shí)間，相比于枯燥文字更具有視覺(jué)沖擊力，因此在圖文混排時(shí)，圖片的質(zhì)量決定了整體的質(zhì)感。

在選圖時(shí)應(yīng)該選擇高分辨率、主體與背景有明顯區(qū)分、配色相對(duì)合理、顏色運(yùn)用較少摳圖干凈無(wú)雜邊的圖片。

舒適度

排版合理，畫(huà)面飽滿，氛圍感強(qiáng)。

一張看起來(lái)舒適的圖片由很多種因素決定，如同電影一樣，最重要的就是排版與配色，排版時(shí)，文字之間的距離不易太小，合理留白，配色應(yīng)該根據(jù)產(chǎn)品的調(diào)性按照色彩心理學(xué)進(jìn)行整體的配色與調(diào)色。比如做一張關(guān)于美食的圖片最終選用大面積的綠色與黑色就會(huì)給人食品腐爛的感覺(jué)。

- 感謝觀看 -

Thanks for watching