————— 目錄大綱 —————
我們的眼睛很奇怪常常誤導(dǎo)我們，但是如果理解了人類視覺的特殊性，就能創(chuàng)造出更好的設(shè)計(jì)。格式塔理論解釋了我們的眼睛和大腦如何處理不同的圖像，而設(shè)計(jì)師常常需要在實(shí)際工作中使用這些理論。
400px寬度的正方形，與400px直徑的圓形，哪個(gè)更大？
幾何學(xué)來說，它們的寬度和高度是相等的。
但是看下面的圖，我們的眼睛立刻感覺到正方形大于圓形。
帶參考輔助線的版本如下：
讓我們再看一組正方形和圓形。你覺得他們的視覺重量相同嗎？
好像差不多～？這是因?yàn)槲以龃罅藞A形的直徑。
把這兩個(gè)例子里的正方形和圓形重疊起來，我們可以發(fā)現(xiàn)：
左邊400px的正方形比400px的圓形有更大的面積。這就是為什么我們覺得它顯得更大～
右邊圓形和正方形是平衡的，因?yàn)樗鼈兊拿娣e相似，雖然實(shí)際尺寸的寬度高度不同～
在菱形和三角形上也有同樣的效果。
為了在視覺上與正方形保持平衡，它們的實(shí)際尺寸應(yīng)該增大，以保證面積相似。
保證「面積相似」的方法，對于處理簡單的形狀特別有用。
在實(shí)際的UI界面設(shè)計(jì)中如何應(yīng)用這個(gè)理論呢？
舉個(gè)例子，當(dāng)設(shè)計(jì)一組圖標(biāo)時(shí)，我們需要保證它們都看起來很平衡，不會有某個(gè)圖標(biāo)看起來過大或過小。
如果我們直接把每個(gè)icon的實(shí)際尺寸拉成一樣，那越接近正方形的icon看起來就會越大。
對于視覺上看上去比較小的icon，可以適當(dāng)放大到參考線框之外。
對于視覺上看上去比較大的icon，可以適當(dāng)縮小留白。
用這樣的方式來保證不同形狀的icon達(dá)到整體的平衡感。
一些視覺平衡的實(shí)際案例～
現(xiàn)在知道為什么icon的切圖框總是比實(shí)際形狀大了吧，
就是為了預(yù)留出空間，讓那些奇形怪狀的icon，看上去不比正方形icon要小。
驗(yàn)證視覺平衡是否ok最簡單的方式就是模糊大法。
如果模糊后你的icon變成差不多的糊糊，他們的視覺重量就差不多了。
看個(gè)案例：
在放社媒圖標(biāo)時(shí)，臉書和IG的圖標(biāo)是方形的，而Twitter是一只小鳥的輪廓。
所以Twitter的圖標(biāo)就要大一些，這一看起來整體會比較平衡。
另一個(gè)案例：
一個(gè)圓形按鈕和方形文本框放在一起。
如果圓形按鈕的直徑等于文本框的高度，那么按鈕視覺上看起來會顯得更小一些。
當(dāng)你把它放大一點(diǎn)，整體會顯得更平衡。
但是如果改變按鈕的樣式，就不需要放大了。
在下圖中，按鈕和文本框都是80px高，但因?yàn)樘畛淞撕谏?，看起來就不顯得那么小了。
視覺平衡是人眼感知物體大小的方式，不一定等于實(shí)際的像素大小。
圓、菱形、三角形和其他非正方形需要加高加寬，才能與正方形在視覺上保持平衡。
設(shè)計(jì)時(shí)需要預(yù)留一些多余的空間用于視覺平衡，對于一組icon來說看起來平衡一致很重要。
字號大小對比是大家都知道最常見最容易的方法。重要的信息字號放大，次要的信息字號縮小。但一個(gè)界面里字號種類的數(shù)量不建議過多，否則會顯得凌亂，這時(shí)候就可以采用文字粗細(xì)對比、顏色對比等其他方法配合使用。
小tip：
1. 字號種類控制在3～5種，保持克制。
2. 文字顏色種類控制在2～3種，保持克制。
3. 字重通常2種就夠了，普通和加粗。
小tip：
1. 當(dāng)背景為純色時(shí)，可以靠降低白色文本的不透明度來調(diào)整前景文字和背景之間的對比度。
2. 當(dāng)背景帶有圖片或圖案時(shí)，半透明的文本會影響可讀性，需要根據(jù)背景色手動挑選適合的文本顏色。 
投影在垂直方向設(shè)置一些偏移量，會使投影顯得更加自然。
由上而下光源偏見也叫做“上方照明偏愛（top-lighting preference）。大腦之所以會認(rèn)為從上方照下來的光線更自然，是因?yàn)槲覀兩钪惺冀K有一個(gè)巨大的來自上方的光源：太陽，漫長的進(jìn)化已經(jīng)在我們腦中刻下了“由上而下光源”這樣一個(gè)強(qiáng)大的偏見。因此來自上方的光源照射會讓物體顯現(xiàn)的非常自然。
相反，來自下方的光源會讓物體看起來怪異不自然，設(shè)計(jì)師可以利用這個(gè)原理來制造一些恐怖怪異的氛圍。（題外話）
下圖來自名偵探柯南
當(dāng)你需要分隔一些信息群組時(shí)，不要一直用描邊去分隔，過多的描邊會使界面顯得過于瑣碎凌亂。
增加組與組之間的間距，留白也是進(jìn)行信息分隔的一種常見手法，不一定需要通過線框來分隔。
不知道大家有沒有發(fā)現(xiàn)，下圖藍(lán)色的說明文本看上去比藍(lán)色的按鈕更亮，但明明顏色色值是一樣的。右邊通過使用略深的藍(lán)色，神奇地解決了這個(gè)問題，視覺上更和諧統(tǒng)一。
米勒-萊爾錯(cuò)覺：這個(gè)視覺現(xiàn)象表明，將一個(gè)V型記號放到線段兩端可能造成其顯得比實(shí)際更短或更長，長短取決于V型記號的朝向，這個(gè)經(jīng)典的錯(cuò)覺證明了人類感知錯(cuò)誤。
左圖的膠囊型按鈕的邊緣給人向內(nèi)收攏的感覺，雖然像素上和文字對齊了，但視覺上按鈕顯得偏右了。右圖通過將按鈕往左側(cè)微微移動來修正不對齊的錯(cuò)覺。
亞馬遜的logo中，字母“a、m、o、n”同樣因?yàn)閳A形的外緣，有向下收攏的感覺，因此需要微微上移，與字母“z”達(dá)到視覺效果上的平衡。
最經(jīng)典的播放按鈕的案例：把一個(gè)三角形放在圓形中直接居中，會使它看起來居中位置不對。為了使三角形視覺居中，需要通過計(jì)算等邊三角形腰的中點(diǎn)與對角頂點(diǎn)連線的交點(diǎn)，來找出三角形的質(zhì)點(diǎn)，這才是真正的中心（重心）。
歸根結(jié)底是因?yàn)樵O(shè)計(jì)師在設(shè)計(jì)過程中，更多關(guān)注頁面本身，而很少去思考頁面在呈現(xiàn)過程中何時(shí)會出現(xiàn)白屏狀態(tài)，都是后知后覺去補(bǔ)充完善。加載作為必備的一環(huán)，卻總是被忽略。目前很多B端產(chǎn)品在這方面都沒有一個(gè)系統(tǒng)合理的規(guī)劃，導(dǎo)致系統(tǒng)的加載體驗(yàn)缺失或者不統(tǒng)一。
因此希望這篇文章能夠講清楚中后臺加載出現(xiàn)的場景和規(guī)則，對需要深入了解加載以及在制定加載規(guī)則的設(shè)計(jì)師朋友們帶來一些幫助。
加載通俗來講就是用戶從觸發(fā)頁面操作，到頁面最終呈現(xiàn)的一個(gè)等待過程。這個(gè)過程始終存在不可避免，只是時(shí)間有快有慢?？斓募虞d只需要幾百毫秒就結(jié)束，但慢的加載就可能會達(dá)到幾秒甚至十幾秒，讓人產(chǎn)生焦慮。
而為什么會有如此大的差距，這就需要從頁面渲染的整體過程來進(jìn)行說明。當(dāng)我們從瀏覽器輸入網(wǎng)址，再到我們看到完整頁面的這個(gè)過程，網(wǎng)頁到底經(jīng)過了哪些步驟呢。經(jīng)過資料查詢和與前端確認(rèn)，整體過程可以闡述如下：
從這里我們可以看到頁面的呈現(xiàn)是程序經(jīng)過了一系列操作才最終呈現(xiàn)到我們面前的。在這里可以將其簡化為四個(gè)階段：用戶操作功能→頁面向服務(wù)器發(fā)送請求→服務(wù)器接受并返回?cái)?shù)據(jù)→頁面呈現(xiàn)。
而決定整個(gè)頁面加載快慢的就在于請求與數(shù)據(jù)這里。一般我們可以將頁面的數(shù)據(jù)分為2種類型：靜態(tài)資源和動態(tài)資源。
靜態(tài)資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數(shù)據(jù)庫也不需要程序處理，直接就能夠顯示的頁面。可以簡單理解為你頁面上的固定字段和結(jié)構(gòu)。這種頁面一般加載速度比較快，比如我們看到的展示型官網(wǎng)一般都是前端寫好的靜態(tài)資源。
動態(tài)資源：而對于頁面上的動態(tài)變化的，需要程序處理或者從數(shù)據(jù)庫中讀數(shù)據(jù)，能根據(jù)不同的條件在頁面顯示不同的數(shù)據(jù)，比如表格數(shù)據(jù)、統(tǒng)計(jì)數(shù)據(jù)等稱為動態(tài)資源，這種都需要調(diào)用后臺接口來進(jìn)行返回，因此加載速度相比于靜態(tài)資源就會更慢。
而它們的區(qū)分點(diǎn)用下圖可以表示：
可以看到靜態(tài)資源基本是直接返回，而動態(tài)資源還需要連接數(shù)據(jù)庫調(diào)取資源，尤其是在遇到數(shù)據(jù)庫調(diào)取較慢時(shí)就會花費(fèi)更多時(shí)間。而我們加載緩慢的大多數(shù)問題，也基本上更多出現(xiàn)在動態(tài)資源的獲取上。
當(dāng)我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對其進(jìn)行處理。這也是在設(shè)計(jì)過程中我們經(jīng)常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認(rèn)處理」和「使用進(jìn)度指示器」
當(dāng)我們對加載過程不進(jìn)行任何處理時(shí)，程序就會以默認(rèn)的方式進(jìn)行-即根據(jù)資源獲取速度一步步呈現(xiàn)?？梢钥吹胶俚旰笈_的處理過程就是一種默認(rèn)處理方式：
但是這種做法就會導(dǎo)致我們在頁面加載過程中會出現(xiàn)空屏狀態(tài)，比如上圖切換到概覽時(shí)出現(xiàn)了空屏狀態(tài)，尤其是當(dāng)遇到了網(wǎng)絡(luò)緩慢的情況，會造成在加載時(shí)頁面停留在當(dāng)前狀態(tài)下不動，往往會讓用戶陷入到「系統(tǒng)故障」的錯(cuò)覺。
這個(gè)名詞說起來可能比較陌生，它指代的就是我們平時(shí)經(jīng)常看到的加載動畫、骨架屏或者進(jìn)度條等。進(jìn)度指示器的作用就是告知用戶當(dāng)前頁面并沒有故障，而是正在讀取數(shù)據(jù)。
通過添加進(jìn)度指示器來對空屏狀態(tài)進(jìn)行承載，能夠減輕用戶的焦慮感。目前很多B端產(chǎn)品更通用的形式是添加動畫來過渡。
但是在體驗(yàn)過程中很容易發(fā)現(xiàn)一個(gè)問題，就是在產(chǎn)品的整體加載過程中，某些空屏狀態(tài)是沒被加載動畫覆蓋到的。當(dāng)這些沒被覆蓋到的加載過程過長時(shí)，很容易出現(xiàn)焦慮感。比如神策數(shù)據(jù)在左側(cè)列表切換時(shí)的加載過程就沒被覆蓋：
想要更全面的把加載動畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態(tài)下會出現(xiàn)空屏狀態(tài)，從而制定統(tǒng)一的加載動畫規(guī)則。這個(gè)問題可以先思考一下，后面解答。
在制定統(tǒng)一加載規(guī)則之前，我們需要明確一個(gè)概念，就是加載的模態(tài)與非模態(tài)。
模態(tài)加載的含義就是當(dāng)前加載會中斷用戶其余操作，用戶在這個(gè)期間只能等待加載而不能進(jìn)行其他操作（有的模態(tài)會提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：
1.用戶當(dāng)前的操作本身不能與其他操作同時(shí)進(jìn)行。比如系統(tǒng)更新，或者工具類的導(dǎo)入導(dǎo)出相關(guān)操作，我們只能等待更新、導(dǎo)出完成才能繼續(xù)進(jìn)行后續(xù)的操作。這時(shí)候可以使用模態(tài)加載來承載，比如protopie的導(dǎo)入操作；
2.當(dāng)用戶進(jìn)入到一個(gè)全新的頁面時(shí)，這個(gè)時(shí)候頁面什么都沒有，我們只能等待頁面加載完成才能進(jìn)行后續(xù)的操作，因此在這種情況下也可以采用模態(tài)加載，比如我們剛進(jìn)入Asanan產(chǎn)品頁面看到的首屏加載動畫：
除了上述2種情況外，你也可以根據(jù)你的業(yè)務(wù)場景來進(jìn)行模態(tài)加載的選擇，但建議是盡量少用模態(tài)加載，其會對用戶的打斷和干擾性比較強(qiáng)。
非模態(tài)加載的話，這種加載通常只會出現(xiàn)在需要加載的部分，不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數(shù)據(jù)篩選加載等都屬于非模態(tài)加載。
非模態(tài)加載相比于模態(tài)加載會更輕量，因?yàn)橛脩綦S時(shí)都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態(tài)彈窗來進(jìn)行承載，比如飛書的左側(cè)欄切換操作：
接下來我們進(jìn)入正題，在這里我從加載的角度將網(wǎng)頁整體加載過程分為呈現(xiàn)加載規(guī)則和操作加載規(guī)則。
我們先談頁面呈現(xiàn)規(guī)則。前面已經(jīng)明確加載產(chǎn)生的原因和類型后，我們就可以開始為我們的產(chǎn)品制定統(tǒng)一的加載規(guī)則，以保證后續(xù)頁面加載的一致性。
在拆解頁面的加載過程前，我們進(jìn)一步闡述之前提到的渲染原則，從前文中提到最后會經(jīng)過「解碼」和「渲染」2個(gè)步驟，這也是決定了我們看到的頁面的最終呈現(xiàn)順序：
我們看到的頁面是由HTML、CSS和JavaScript來進(jìn)行構(gòu)成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負(fù)責(zé)頁面中的交互(當(dāng)然JS也可以控制樣式，這里只描述主要功能)。
頁面在「解碼」階段，拿到的HTML文檔會被解碼為DOM樹，同時(shí)將CSS文件解析成CSSOM，這兩者結(jié)合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進(jìn)行對應(yīng)操作。
由于瀏覽器渲染順序一般會根據(jù)代碼的順序進(jìn)行渲染，而代碼在頁面中的構(gòu)建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現(xiàn)順序也是遵循從上到下，從左到右。
所以幾乎所有的產(chǎn)品都是先看到頂欄，然后左側(cè)邊欄，然后其他內(nèi)容。因此我們可以通過這個(gè)原則來拆解對應(yīng)的頁面，我們按照頁面常規(guī)結(jié)構(gòu)可以將其分為三個(gè)加載部分：頂欄、左側(cè)導(dǎo)航欄、內(nèi)容區(qū)域。而其加載順序如圖所示：
當(dāng)知道對應(yīng)頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會出現(xiàn)空屏了。因此將頁面加載過程拆解為如下順序：
我們的加載動畫需要承載的就是上述這些白屏的地方，從而將加載細(xì)化為三種場景的拆分：全局加載+局部加載+內(nèi)部加載。如圖所示：
通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細(xì)闡述一下這三種類型的定義和用法。
如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網(wǎng)址到頁面的資源渲染的這個(gè)中間過程的空屏狀態(tài)而存在的。而這種狀態(tài)會涉及三種場景：
1.通過網(wǎng)址進(jìn)入到一個(gè)新的頁面時(shí)；
2.通過鼠標(biāo)右鍵或網(wǎng)頁刷新按鈕對該頁面刷新時(shí)；
3.通過頁面操作需要新開頁面時(shí)。
該全局加載的動畫構(gòu)成為：
1：覆蓋整個(gè)頁面的加載，由純白色+加載動畫構(gòu)成；
2：加載類型為模態(tài)加載，因?yàn)橛脩粼谶@種頁面狀態(tài)下并不能進(jìn)行其它操作。
但在這里我們需要注意全局加載的開始和結(jié)束時(shí)間：
開始時(shí)間：當(dāng)進(jìn)入頁面時(shí)立即呈現(xiàn)加載動畫；
結(jié)束時(shí)間：當(dāng)頁面加載出頂欄的時(shí)候，此時(shí)停止加載。
為何要這么處理結(jié)束時(shí)間，原因其實(shí)圖中已經(jīng)給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動畫就會結(jié)束，隨后啟用局部加載來承接后續(xù)的狀態(tài)，避免用戶在當(dāng)前狀態(tài)長時(shí)間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現(xiàn)作為結(jié)束全局加載的標(biāo)準(zhǔn)。當(dāng)然如果你的結(jié)構(gòu)沒有頂欄，可以以左側(cè)欄來作為結(jié)束標(biāo)準(zhǔn)。
局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場景可以概括如下：
1.頂欄加載結(jié)束后，用在剩余框架的加載效果（具體體現(xiàn)為左側(cè)邊欄和右側(cè)內(nèi)容區(qū)域）；
2.對于涉及到局部頁面的切換操作都會進(jìn)行局部加載（比如左側(cè)邊欄的切換）；
光看文字可能不是特別清晰，在這里可以舉一個(gè)動態(tài)的例子來幫助理解：
上述展示的是在頁面呈現(xiàn)的時(shí)候一個(gè)完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區(qū)分的，可以通過程序控制讓這種加載動畫只在初次加載時(shí)出現(xiàn)。
第一次加載時(shí)出現(xiàn)是因?yàn)槲覀冃枰屑虞d動畫來承接框架首次加載的空屏?xí)r間：
但第二次的時(shí)候由于有緩存（緩存會加載我們的靜態(tài)資源，能夠讓我們的頁面框架在第二次時(shí)更快顯示），這樣在讀取框架時(shí)基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動畫，直接顯示框架來進(jìn)行呈現(xiàn)。
目前在飛書和釘釘?shù)菳端產(chǎn)品后臺均采用了這種處理方式。可以看到圖中我在第一次切換到角色管理時(shí)是有碰撞小球的局部動畫存在的，而第二次再次進(jìn)入時(shí)則直接出現(xiàn)框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態(tài)，又避免了局部加載動畫的頻繁出現(xiàn)。
內(nèi)部加載是用在頁面內(nèi)部不同模塊數(shù)據(jù)間的加載。當(dāng)框架都已經(jīng)加載結(jié)束，但某些數(shù)據(jù)由于接口比較慢，此時(shí)還沒有返回，這時(shí)我們就可以用內(nèi)部加載來進(jìn)行承載。這應(yīng)該是我們更常見的加載情況：
在進(jìn)行內(nèi)部加載的時(shí)候，需要注意，內(nèi)部加載的時(shí)候一般標(biāo)題是存在的，因?yàn)闃?biāo)題基本都是固定的，所以能夠很快被拉取。比如Zoho的內(nèi)部加載，加載時(shí)標(biāo)題已經(jīng)出現(xiàn)了：
通過這三種類型的加載，能夠覆蓋從用戶輸入網(wǎng)址，到頁面渲染完成這個(gè)頁面呈現(xiàn)過程中的全部加載場景。
說完頁面的呈現(xiàn)規(guī)則，再談頁面操作加載規(guī)則。頁面的操作其實(shí)對應(yīng)的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態(tài)，而且需要考慮到控件影響的其他頁面范圍。
控件的加載并不是隨時(shí)都需要，我們要根據(jù)實(shí)際的數(shù)據(jù)量大小及業(yè)務(wù)場景來選擇性使用。目前我們需要考慮的控件及其加載狀態(tài)主要有如下：
比如圖中的按鈕的加載狀態(tài)是必備的，在很多場景下都會用到。但是下拉列表和級聯(lián)列表，在一般的場景下都不太需要進(jìn)行加載，當(dāng)遇到列表中的數(shù)據(jù)特別多或者調(diào)取特別慢時(shí)就可以考慮為其加上加載狀態(tài)。
這種控件比如日期篩選、表格篩選或者保存等操作，當(dāng)你切換篩選條件后所有與其相關(guān)的頁面元素都會發(fā)生變化。在這種情況下我們需要考慮到被影響元素的狀態(tài)。目前的設(shè)計(jì)實(shí)現(xiàn)上有兩種做法：
1.被影響元素不可被操作，且該區(qū)域有遮罩+加載動畫來覆蓋；
2.被影響元素可進(jìn)行操作，無任何動畫，但操作并不會影響之前提交的結(jié)果；
這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個(gè)人在這里更傾向于處理方式1，我認(rèn)為被影響的元素是需要有遮罩+動畫的，來避免用戶在加載期間對其進(jìn)行無效操作，比如示例中方案2后面修改的名稱是沒有被系統(tǒng)保存的。
需要注意的是如果在產(chǎn)品中使用方案1，我們的遮罩區(qū)域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導(dǎo)致圖表數(shù)據(jù)發(fā)生變化，這時(shí)只需覆蓋圖表區(qū)域，而不用覆蓋篩選區(qū)域。這樣的好處是當(dāng)某些篩選數(shù)據(jù)出現(xiàn)加載過慢問題時(shí)，用戶可以通過切換篩選項(xiàng)來打斷當(dāng)前加載。
上述描述的操作都是針對于當(dāng)前頁加載。當(dāng)控件導(dǎo)致頁面刷新或者跳轉(zhuǎn)時(shí)，則整體遵照頁面呈現(xiàn)的規(guī)則進(jìn)行加載。
上面闡述的加載已經(jīng)完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進(jìn)度條這兩種加載形式。
先說骨架屏。實(shí)際上骨架屏的使用效果體驗(yàn)是優(yōu)于加載動畫的體驗(yàn)的（骨架屏的加入使用會讓用戶感覺網(wǎng)頁出現(xiàn)的更快）。那么為什么在大部分的B端業(yè)務(wù)頁面中沒被用到呢，主要有2點(diǎn)原因：
1.每種骨架屏都需要進(jìn)行對應(yīng)的定制開發(fā)，需要與加載后的頁面框架保持一致，這會增加了開發(fā)成本。
2.中后臺的業(yè)務(wù)界面對來說固定結(jié)構(gòu)的頁面會較少，這對于骨架屏的使用機(jī)會就相對較少。
個(gè)人認(rèn)為在前期可以以統(tǒng)一加載體驗(yàn)為主，在后期業(yè)務(wù)相對成熟后，可以針對固定結(jié)構(gòu)，通過骨架屏的使用優(yōu)化加載體驗(yàn)。
再說進(jìn)度條。我理解的進(jìn)度條的使用條件：對于加載時(shí)間較長的規(guī)定場景可以考慮用進(jìn)度條來承載，比如我們常見的游戲加載中進(jìn)度條就用得比較多，因?yàn)橛螒蛞话阗Y源比較大。還比如figma在進(jìn)入設(shè)計(jì)文件的過程中也采用了進(jìn)度條加載也是因?yàn)樵O(shè)計(jì)文件可能會很大。
進(jìn)度條在特定場景下能夠緩解用戶焦慮，讓用戶知道進(jìn)展。但進(jìn)度條在多數(shù)情況下都抓取不到程序的真實(shí)進(jìn)度，這也會導(dǎo)致有時(shí)候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺產(chǎn)品對于進(jìn)度條加載使用相對較少的原因，很大程度是沒有那種加載特別長的場景。
因此這兩種加載場景的使用會更加定制化，如果需要使用請根據(jù)具體的業(yè)務(wù)場景來進(jìn)行選擇。
如果把加載動畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內(nèi)核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。
大家肯定聽過緩存這個(gè)概念，前后端都可以使用緩存。緩存就是數(shù)據(jù)交換的緩沖區(qū)（稱作Cache），是存貯數(shù)據(jù)（使用頻繁的數(shù)據(jù)）的臨時(shí)地方。在這里主要講一下瀏覽器緩存：
從這張圖可以看出，服務(wù)器在請求數(shù)據(jù)時(shí)，會進(jìn)行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務(wù)器中拿取。調(diào)取緩存會在很大程度上提升頁面的加載速度，縮短了從服務(wù)獲取數(shù)據(jù)的時(shí)間。通常瀏覽器會主動對頁面的靜態(tài)資源進(jìn)行對應(yīng)的緩存，這也就解釋了我們第二次進(jìn)入頁面會比初次進(jìn)入頁面時(shí)加載快的原因。
但程序其實(shí)也可以對動態(tài)資源（也就是需要從數(shù)據(jù)庫等拿到的資源）進(jìn)行緩存的，并且可以設(shè)置緩存的過期時(shí)間（比如設(shè)置過期時(shí)間為1小時(shí)，那么1小時(shí)過后就會重新拉取新資源）。對于某些動態(tài)資源拉取過慢并且更新頻率不高的我們可以采用動態(tài)資源緩存的策略，從而提升整體的頁面加載體驗(yàn)。
現(xiàn)階段我們常用的主要有下列6種加載策略：
加載策略的本質(zhì)就是通過對應(yīng)的加載設(shè)置來縮短產(chǎn)品與服務(wù)器交換數(shù)據(jù)的時(shí)間，接下來我們詳細(xì)看一下每種加載策略的具體使用策略：
懶加載是當(dāng)內(nèi)容落入視窗被用戶看到時(shí)，才會進(jìn)行加載。這種比較節(jié)省資源和減輕服務(wù)器壓力。對于當(dāng)前頁面內(nèi)容很多的可以采用這種加載策略。而這種加載策略的設(shè)計(jì)，能夠讓用戶更快看到當(dāng)前屏幕內(nèi)的內(nèi)容，減少等待時(shí)間。
比如蘋果官網(wǎng)的加載策略就采取了這樣的一種方式。我們可以看到右側(cè)的資源只有在我們向下滾動出現(xiàn)在屏幕中時(shí)才會進(jìn)行對應(yīng)的加載，這樣能夠保證用戶在進(jìn)入網(wǎng)頁第一時(shí)間看到首屏內(nèi)容，并且用戶幾乎感知不到這種加載延遲。
預(yù)加載是在頁面空閑的時(shí)候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時(shí)，通過緩存直接調(diào)用呈現(xiàn)。比如用戶在看A頁面的時(shí)候，就可以通過預(yù)加載來準(zhǔn)備用戶需要的B頁面資源。當(dāng)用戶需要B頁面的時(shí)候，立刻就可以呈現(xiàn)。
比如某些頁面在實(shí)際中加載比較慢，這個(gè)時(shí)候就可以考慮是否用預(yù)加載的策略來提升網(wǎng)頁整體加載速度。比如知乎的視頻和文字在都進(jìn)行了對應(yīng)的預(yù)加載。即使當(dāng)你處于斷網(wǎng)狀態(tài)（圖中我將頁面網(wǎng)絡(luò)切換為斷開狀態(tài)），可以看到依舊可以點(diǎn)擊全文進(jìn)行查看和視頻的部分預(yù)覽。
當(dāng)頁面中有文字和圖片時(shí)，優(yōu)先加載占用網(wǎng)絡(luò)資源小的，比如文字資源，然后再進(jìn)行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時(shí)間。比如大眾點(diǎn)評等圖片很多的網(wǎng)站往往會采用這種加載策略。
分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數(shù)據(jù)量比較大的內(nèi)容，比如表格數(shù)據(jù)或者大數(shù)據(jù)搜索場景可以使用。
分頁加載可以理解為當(dāng)前獲取到100條數(shù)據(jù)，但是將100條數(shù)據(jù)分別拆成5頁每頁20條數(shù)據(jù)提供給用戶，這樣也可以讓用戶減少等待時(shí)間：
在目前還有一種滾動分頁的加載，就是不提供視覺上的分頁，而是當(dāng)用戶進(jìn)行滾動時(shí)，自動加載一定數(shù)量的內(nèi)容，這樣從用戶的視角看就是一個(gè)連續(xù)不間斷的數(shù)據(jù)展示。比如一些資訊類的網(wǎng)站就是采用的這種加載策略，有的也把這種滾動分頁的方式稱為自動加載。
這里講的延遲加載更多的是一種防護(hù)加載機(jī)制，一般延遲設(shè)置的時(shí)間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進(jìn)行連續(xù)輸入，避免搜索結(jié)果被高頻率刷新，同時(shí)緩解服務(wù)器壓力。如下圖，可以看到我在輸入1后會有個(gè)延遲才出現(xiàn)加載列表，并且我在連續(xù)輸入12306的過程中是沒有對結(jié)果進(jìn)行更新的，當(dāng)我輸入完后才更新。
第二種則是通過延遲加載可以更好防止反復(fù)操作。當(dāng)用戶在同一組件上面進(jìn)行切換時(shí)，如果該操作小于300ms,則只記錄最后的點(diǎn)擊操作。這種情況可以用在我們的表格翻頁和開關(guān)等狀態(tài)上，防止用戶瘋狂點(diǎn)擊導(dǎo)致數(shù)據(jù)反復(fù)請求和屏幕閃爍的情況。我們可以通過下面這個(gè)組件演示例子來進(jìn)行對應(yīng)的感知：
延遲加載更多用于上述2種場景，對于其他情況的加載，直接加上就可以了，并不需要刻意設(shè)置延遲。
這里想要表達(dá)的含義是當(dāng)用戶在操作后，客戶端立即反饋操作成功，然后把請求放到后臺與服務(wù)器交互，這一過程用戶不需要了解，不需要等待。無論在什么網(wǎng)絡(luò)環(huán)境下你基本上都能操作成功。比如微信的朋友圈發(fā)布就是這樣的操作，即使你在斷網(wǎng)的情況下都能夠立刻發(fā)布，但實(shí)際上這個(gè)時(shí)候并沒有發(fā)送成功，還需要上傳到服務(wù)器后才你的朋友們才能看見。
這樣的好處是用戶使用起來非常流暢，但是壞處就是，當(dāng)操作不成功時(shí)，用戶并不能及時(shí)進(jìn)行感知，仍然以為操作已經(jīng)成功了。所以這種場景我們也需要根據(jù)場景進(jìn)行對應(yīng)的判斷和選擇。對于復(fù)雜的B端場景個(gè)人建議慎用或者不用這種操作，畢竟很多發(fā)布的功能會同時(shí)影響很多業(yè)務(wù)線。
這里就拿微信的朋友圈發(fā)布來進(jìn)行舉例，下方手機(jī)狀態(tài)都為斷網(wǎng)狀態(tài)，可以看到微信立即發(fā)布，而貼吧在這種狀態(tài)下提示網(wǎng)絡(luò)錯(cuò)誤。
通過這些加載策略的選擇性使用，能夠在特定環(huán)境下提升我們系統(tǒng)的整體使用體驗(yàn)。因此我們需要對這些加載策略有一個(gè)比較全面的認(rèn)識，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。
在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網(wǎng)絡(luò)速度過慢或者突然斷網(wǎng)這兩種狀況讓頁面一直加載不出來，這時(shí)我們需要考慮對長時(shí)間的加載過程進(jìn)行處理。
通常做法是我們要對加載狀態(tài)有一個(gè)最長時(shí)間的限制，一般為加載不超過10s，超過最長時(shí)間后就進(jìn)行異常狀態(tài)顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。
在這里還想到一點(diǎn)，就是對于編輯頁面，我們應(yīng)當(dāng)加入網(wǎng)絡(luò)連接是否異常的判斷，比如當(dāng)進(jìn)入到編輯頁面后，如果遇到網(wǎng)絡(luò)斷開，需要在頁面的頂部加上常駐提示條【當(dāng)前網(wǎng)絡(luò)連接斷開】，這樣用戶能夠及時(shí)進(jìn)行察覺并修復(fù)。避免在無網(wǎng)環(huán)境下繼續(xù)輸入。這對于某些需要輸入很多內(nèi)容且并不提供本地保存的頁面來講是非常有必要的。
加載在設(shè)計(jì)中是非常容易被忽略的模塊，因?yàn)樵诖蟛糠智闆r下網(wǎng)絡(luò)速度都較快，人們很難深刻地感受到加載過程。但加載卻在產(chǎn)品運(yùn)行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個(gè)點(diǎn)：
1.我們需要明白加載為什么會出現(xiàn)，這個(gè)過程是怎么樣的；
2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；
3.通過緩存和對應(yīng)加載策略能夠讓頁面加載速度有本質(zhì)上的提升。
這樣當(dāng)我們在頁面上遇到加載速度慢的問題時(shí)，在為其加上動畫承載過渡的同時(shí)，還應(yīng)該思考其加載緩慢背后的原因，是因?yàn)閿?shù)據(jù)量太大還是加載策略的相關(guān)問題，是否可以將其進(jìn)行懶加載或者分步加載，這時(shí)我應(yīng)該去找前端或者后端如何溝通。從源頭上解決加載時(shí)間長的問題，才是后續(xù)產(chǎn)品設(shè)計(jì)過程中的長久思路。
四個(gè)色彩趨勢：霓虹漸變、輕量漸變、高飽和度色系、夢幻色/幻彩色系。從現(xiàn)實(shí)圖庫入手，總結(jié)出該色彩趨勢對應(yīng)的關(guān)鍵詞以及色彩特征。對部分案例進(jìn)行了解析，更深入地了解其運(yùn)用方向以及實(shí)現(xiàn)技巧。希望這些內(nèi)容可以起到拋磚引玉的作用，歡迎大家探討。（圖片來源于網(wǎng)絡(luò)，原作者可提供原圖鏈接進(jìn)行標(biāo)注）
現(xiàn)實(shí)生活中，炫彩奪目的霓虹燈效果常被應(yīng)用于廣告牌、燈箱的展示中，在暗夜的烘托下，霓虹燈展現(xiàn)出光影陸離的光影效果，吸引著人們的眼球，留下強(qiáng)烈的視覺沖擊。如圖所示，暗夜中的霓虹燈效果，為霓虹漸變的現(xiàn)實(shí)靈感來源。
夜色下的霓虹燈
1、以紫色、藍(lán)色、洋紅為主的冷暖色搭配；
2、整體顏色對比度高；
3、以冷色調(diào)為主，局部暖色調(diào)，搭配霓虹光感對比色點(diǎn)綴；
4、背景用暗色調(diào)更能凸顯霓虹效果；
5、根據(jù)霓虹燈的靈感，采用了霓虹燈發(fā)光的效果。
近年來，強(qiáng)視覺沖擊的漸變色被廣泛應(yīng)用在各個(gè)領(lǐng)域，包括宣傳海報(bào)、綜藝節(jié)目、游戲等等，其中最為矚目的是霓虹漸變，設(shè)計(jì)師通過將這種高飽和度的漸變色與暗色調(diào)背景結(jié)合，形成強(qiáng)烈的視覺沖擊，突出主體，渲染氛圍，使整個(gè)畫面的色調(diào)更加活力化、年輕化。
最近較火的綜藝節(jié)目“這就是街舞”，其宣傳海報(bào)通過高飽和度的霓虹色漸變，與人物及背景形成強(qiáng)明暗對比，結(jié)合對人物本身的光影細(xì)節(jié)刻畫，突出人物主體，增強(qiáng)畫面視覺沖擊力。
2020年7月，由Veewo Games發(fā)布的一款游戲「霓虹深淵」，畫面以紫色、藍(lán)色、洋紅的冷暖色搭配為主基調(diào)，通過明暗色的對比，以及大面積的紫色光影渲染氛圍，營造出極強(qiáng)的未來科技感，而霓虹光感的使用以及涂鴉風(fēng)格的融入，使得游戲更加時(shí)尚、自由。
頁面整體以紫色，藍(lán)色，洋紅為主，冷暖色搭配，營造出層次感，活潑生動且年輕化；偏暗色調(diào)的霓虹漸變色背景烘托出專題頁的內(nèi)容主體，使得頁面運(yùn)營氛圍更好、更強(qiáng)；同時(shí)在一些重要的、需要用戶操作點(diǎn)擊的部分使用了暖色調(diào)的霓虹色漸變，使得內(nèi)容主體在冷色調(diào)的環(huán)境下更為突出，提高了用戶體驗(yàn)。
以暗色調(diào)背景作為烘托，搭配紫色、藍(lán)色、洋紅為主的冷暖色，是霓虹色漸變經(jīng)典的應(yīng)用方式。在暗色背景下運(yùn)用霓虹色漸變，通過明暗的強(qiáng)對比突出頁面關(guān)鍵元素，對用戶進(jìn)行視覺引導(dǎo)，同時(shí)豐富頁面層次，增強(qiáng)頁面的視覺沖擊力及藝術(shù)感染力。
暗色的背景與撞色霓虹搭配的插畫手法使得界面看起來更加的酷炫和高科技，整體頁面在霓虹色漸變的使用下更富層次性。通過主體與環(huán)境色的呼應(yīng)、冷暖明暗的對比，展現(xiàn)出主體光源對空間層級的變化效果。此組合用來作為web頭部頁面，沖擊感十足，科技感也非常的棒。
通過高飽和度的霓虹漸變色彩，結(jié)合外發(fā)光、疊加、模糊等多種技法，塑造出更加豐富的光影效果，不僅增強(qiáng)圖標(biāo)視覺表現(xiàn)力及空間感，更凸顯了圖標(biāo)的風(fēng)格化與趣味性。暗色調(diào)背景的烘托，使霓虹色漸變圖標(biāo)更加有質(zhì)感，更加突顯。
通過大面積的霓虹色漸變結(jié)合迷彩漸變的繪制手法，構(gòu)建不同色彩鮮明的矩形圖案，暗色調(diào)的背景烘托與顏色用冷色為主暖色為輔、點(diǎn)綴，畫面感極強(qiáng)，極具視覺沖擊力。
霓虹色漸變在暗色調(diào)的背景烘托下，撞色的沖擊感使得畫面更加具有科技感、潮流感；對于霓虹色漸變使用比較頻繁的賽博朋克風(fēng)、故障風(fēng)，也是現(xiàn)下較為流行的風(fēng)格，通過豐富鮮明的色彩與背景作強(qiáng)對比，營造出極具視覺沖擊力的畫面效果；同時(shí)霓虹漸變色也被廣泛的使用于app、web、插畫等領(lǐng)域，雖然它出現(xiàn)已久，但其大膽、強(qiáng)烈的配色風(fēng)格給畫面帶來的沖擊感以及潮流、自由感，使得它仍然成為當(dāng)下一種比較流行的色彩趨勢。
通過對2021年色彩趨勢分析發(fā)現(xiàn)，漸變色的運(yùn)用仍然非常流行。相較之前運(yùn)用較多的強(qiáng)視覺沖擊類——對比色漸變，輕量漸變在色彩運(yùn)用上變得更加理性與克制。主要特征為輕量、柔和、層次遞進(jìn)，營造一種舒緩、治愈的沉浸感。
色彩上的漸變是指某個(gè)物體的顏色從明到暗，或由深轉(zhuǎn)淺，或是從一個(gè)色彩緩慢過渡到另一個(gè)色彩，充滿變幻無窮的神秘浪漫氣息的顏色。根據(jù)強(qiáng)弱程度分類，漸變主要分為強(qiáng)漸變和弱漸變，輕量漸變屬于弱漸變范疇。在過渡的過程中，輕量漸變特點(diǎn)為漸變色彩鄰近，幅度輕柔，節(jié)奏緩慢，融合感和細(xì)膩感較強(qiáng)。
輕量漸變是一種簡約且高度可用的元素，它可以創(chuàng)造出一些時(shí)尚的氛圍，但是又不會有信息過載的擔(dān)憂，這使得輕量漸變成為一種富有感染力又非常實(shí)用的設(shè)計(jì)解決方案。輕量漸變特點(diǎn)之一為明度高、飽和度低，色彩輕量而透氣。在輕量漸變的使用過程中，同色系、鄰近色系較多，其過渡自然柔和。
透過今年各大設(shè)計(jì)網(wǎng)站上的作品不難發(fā)現(xiàn)，較多的視覺設(shè)計(jì)師將輕量漸變的色彩趨勢與毛玻璃的質(zhì)感趨勢結(jié)合，運(yùn)用在界面中。下圖畫面中，輕量漸變的柔和屬性搭配上毛玻璃的朦朧感，營造一種視覺感官的舒適感與呼吸感，已成為2021年UI界面設(shè)計(jì)趨勢之一。
當(dāng)輕量漸變與3D碰撞時(shí)，則會產(chǎn)生更加趣味的視覺化學(xué)反應(yīng)。畫面中使用的3D效果可以最大限度還原現(xiàn)實(shí)世界的材質(zhì)與光效，呈現(xiàn)極具腦洞的“超現(xiàn)實(shí)”效果，為用戶呈現(xiàn)不可思議的異度空間，吸引用戶眼球。畫面中的背景使用了輕量漸變來創(chuàng)建出多彩的模糊背景，為3D素材創(chuàng)造出另類維度的空間感，增加了畫面深度，使設(shè)計(jì)更具真實(shí)感。
自如app最新的首頁風(fēng)格采用輕量漸變+毛玻璃效果，金剛區(qū)應(yīng)用最為明顯。圖標(biāo)的色彩選用低飽和鄰近色，遵循3色系原則，使得整體色彩統(tǒng)一且不失豐富。從單個(gè)圖標(biāo)看，色塊部分采用單色漸變，通過easing gradient插件工具調(diào)整漸變值，以達(dá)到最佳效果。毛玻璃特有的通透感，會將漸變色塊透映出來，故制作毛玻璃效果時(shí)，需添加環(huán)境色使其融合。
兩個(gè)啟動頁中均采用高明度、低飽和度外加一些毛玻璃微透質(zhì)感的表現(xiàn)手法。第一個(gè)界面主要傳達(dá)安全、簡潔、可靠的情感，第二個(gè)界面則表現(xiàn)的是活動主題的夢幻感。這兩個(gè)頁面雖目的不同，但卻均體現(xiàn)了柔和、細(xì)膩、輕量感的視覺感。設(shè)計(jì)師發(fā)現(xiàn)，使用者在經(jīng)歷過傳統(tǒng)大色塊、大面積、較強(qiáng)沖擊力漸變的視覺后往往更加想追尋視覺上的寧靜，所以視覺負(fù)擔(dān)相對較小、相對輕量的微漸變色彩和可以利用微透質(zhì)感減弱色彩沖擊力的毛玻璃相結(jié)合的視覺效果越來越多地被運(yùn)用。
在界面背景中，使用少量的鄰近色漸變來做通欄背景，使整體氛圍更加柔和、富于層次感，同時(shí)起到強(qiáng)調(diào)頭部的作用?？ㄆ幉捎猛该髅ＡЧ?，利用毛玻璃特有的通透感，透映出底部漸變，使卡片兼具質(zhì)感與美感。
卡片中采用同色系的輕量漸變效果，營造融合、舒適的視覺觀感?？ㄆ念伾鶕?jù)色彩情緒進(jìn)行選取，增加辨識度，進(jìn)而增加點(diǎn)擊率。
漸變之所以每隔幾年就會成為設(shè)計(jì)流行趨勢，很大程度上得益于它自然的特征和普遍的吸引力。今年盛行的輕量漸變，更多從用戶的角度出發(fā)：減輕界面給用戶帶來的視覺負(fù)擔(dān)，為其提供更輕盈的視覺體驗(yàn)。在應(yīng)用的過程中，輕量漸變與毛玻璃、3D等流行表現(xiàn)形式相結(jié)合，可創(chuàng)造出全新的、有趣的視覺體驗(yàn)，不僅在外觀上起到美化的作用，在功能上也達(dá)到了強(qiáng)調(diào)、醒目的作用。
在過去的兩年中，高飽和度色系的應(yīng)用已經(jīng)是重要的趨勢之一。年輕人作為移動互聯(lián)網(wǎng)的主力軍，他們青春，活力，有朝氣，因此，代表年輕活力群體的鮮艷，高飽和度色彩成為視覺主流趨勢之一。偏高飽和度色彩更易吸引注意力，烘托主體，影響用戶情緒，提高品牌的識別性，增強(qiáng)品牌影響力。
1、顏色飽和度高，艷麗；
2、色彩豐富多樣；
3、視覺沖擊力強(qiáng)；
雖然高飽和色彩視覺沖擊力強(qiáng)、更容易傳遞情緒，但在使用時(shí)仍需克制使用。原因在于：1.過高的飽和度，容易產(chǎn)生視覺疲勞；2.高飽和度的顏色并不適合所有的用戶群體。
這里說的高飽和度的顏色，并不是一味追求高飽和刺激性顏色，我們在使用時(shí)候，仍需對顏色的明度，飽和度進(jìn)行合理設(shè)置，這樣才能保證我們視覺上的舒適性。
在綜藝海報(bào)中，高飽和度的半插畫+實(shí)物的表現(xiàn)形式，讓畫面極具趣味性和視覺吸引力，獲取了大批流量。
偏高飽和度的色彩，在UI設(shè)計(jì)應(yīng)用中，往往更容易脫穎而出。而一些品牌的品牌色往往就是偏高飽和度的顏色，比如UI設(shè)計(jì)中品牌色的運(yùn)用，在一定程度上可以將品牌影響力擴(kuò)大化，品牌影響力，也會讓用戶增加信任感。
例如，微信的綠色，餓了么的藍(lán)色，美團(tuán)的黃色，淘寶的橙色......等等這些品牌色，都深入人心。
高飽和度品牌色
活動營銷類彈窗，以及運(yùn)營類的H5，運(yùn)營專題，促銷類的BANNER中經(jīng)常運(yùn)用高飽和色的視覺刺激以達(dá)到強(qiáng)調(diào)、引流的作用。
高飽和度色系以其絢麗、強(qiáng)視覺沖擊力等特點(diǎn)，在UI設(shè)計(jì)中一直被廣泛的應(yīng)用。它可以更好的營造氛圍、傳遞情緒、增強(qiáng)視覺層次結(jié)構(gòu)、提高品牌的可識別性。撞色、插畫+半實(shí)物、手繪等各種新式流行的表現(xiàn)手法使得高飽和色的運(yùn)用上更加豐富多樣。
廣義上，我們將富于想象力的色彩，或者說體現(xiàn)人生豐富多姿的色彩稱之為“夢幻色彩”，像泡沫、像天使、 像夢境、像糖果...
夢幻色在顏色面板中處于中間偏上部分，即特點(diǎn)為中純度、高明度。
配色方面和諧，視覺效果相對溫暖柔和。常以簡單、干凈的背景為襯托，烘托主體物以及主色調(diào)。色彩場景偏向幻想、天馬行空的自由世界，給人以浪漫的色彩感受，容易令人沉浸在畫面的溫暖氛圍中。
現(xiàn)今，色彩作為重要的視覺語言而被越來越多的設(shè)計(jì)師所關(guān)注，而在實(shí)際設(shè)計(jì)作品輸出當(dāng)中，顏色也扮演著將產(chǎn)品理念傳遞給用戶的媒介?色。可見，完整的設(shè)計(jì)作品是離不開色彩的表現(xiàn)的，那么了解色彩趨勢就會顯得尤為重要。而在眾多顏色中的夢幻色，更是極具前沿性和突出感的色彩。
色彩傾向明快輕量，采用顏色烘托主題的表達(dá)方式，較能抓住用戶眼球。塑造了色彩多變的視覺風(fēng)格，適用于多種品牌調(diào)性，給用戶溫暖、輕松且煥然一新的感覺。
在下圖插畫案例2-絢麗配色中，能發(fā)現(xiàn)絢麗配色類插畫通過光的運(yùn)用，讓畫面呈現(xiàn)出細(xì)節(jié)更豐富的視覺效果。 一些光暈的重疊使用，使得畫面變得朦朧，更顯夢幻特點(diǎn)。另外，夢幻色還可以營造神秘的氛圍，在網(wǎng)站首頁使用的夢幻色彩，搭配引人入勝的畫面，神秘感的體現(xiàn)更加突出。吸引用戶的點(diǎn)擊，從?提升?站的瀏覽量，實(shí)現(xiàn)流量變現(xiàn)。
在材質(zhì)-塑料質(zhì)感中，大面積的夢幻色彩漸變，形成很強(qiáng)的視覺沖擊。塑料的質(zhì)感配合燈光與彩色漸變，顯得非常夢幻；透明的氣泡材質(zhì)，整體質(zhì)感給?輕盈、透亮。這種流動的色彩呈現(xiàn)出了源源不斷、生命不息的美好愿景，帶給觀者美好的想象。
夢幻色應(yīng)用于3D物體中，整個(gè)畫面更加豐富多彩，溫暖、輕松氛圍下的物體仿佛將從屏幕的束縛中掙脫出來，拉近了畫面與觀者之間的距離。
這是一組描繪田野間的手繪插畫，為觀者提供感觀上的愉悅。一切事物在自然中的蓬勃生長以及夢幻色下烘托出的神秘感，使得整體畫面有種超脫現(xiàn)實(shí)、游離人生的美感。形成了以自然景觀為主導(dǎo)的唯美風(fēng)格。
雖然夢幻色沒有特別靚麗奪目的色彩特點(diǎn)，但在夢幻色的使用中所烘托出的特定氛圍，不但突出了不同產(chǎn)品的特點(diǎn)，也更加滿足了用戶的情感需求。色彩趨勢必然與時(shí)代潮流以及用戶喜好緊密結(jié)合，作為設(shè)計(jì)師的我們需要了解，并能與我們的設(shè)計(jì)產(chǎn)出進(jìn)行結(jié)合。
日新月異的生活是色彩趨勢的靈感來源，這使得色彩的流行趨勢不斷更新變化著。作為設(shè)計(jì)師的我們，要保持一顆敏銳的心，不斷從現(xiàn)實(shí)生活中捕捉靈感，將自然賦予我們的寶貴靈感運(yùn)用于作品中，從而增強(qiáng)設(shè)計(jì)的原創(chuàng)性，給設(shè)計(jì)行業(yè)注入新鮮血液。其次，趨勢是方向，不能盲目追隨，需要不斷思考總結(jié)沉淀升華，并將其合理運(yùn)用至自己的作品或項(xiàng)目中。設(shè)計(jì)就是在實(shí)踐中不斷探索與總結(jié)！這是我們寫這篇文章的初衷，最后也歡迎大家積極探討。
“ 設(shè)計(jì)思維是一種以人為本的創(chuàng)新方法，它借鑒了設(shè)計(jì)師的工具包，整合了人們的需求，技術(shù)的可能性以及商業(yè)成功的要求。”
設(shè)計(jì)思維
關(guān)于設(shè)計(jì)思維的文章我們也看過不少，也聽過大佬們講什么是設(shè)計(jì)思維，可都停滯于帶我們了解初識階段，并沒有教到我們怎么去踐行設(shè)計(jì)思維。設(shè)計(jì)思維 (Design Thinking) 是一種設(shè)計(jì)方法，提供基于解決方案的方法來解決問題。解決方案是什么？究竟要解決什么問題？如何去解決？在參考了大量的文獻(xiàn)后，更多的是在闡述設(shè)計(jì)思維是什么，具體的分類和步驟，更偏向于介紹和展示相關(guān)的知識。比如 Google 的 Design Sprint 方法論，比如 IDEO 首席執(zhí)行官 Tim Brown 提出的可行性三原則，比如斯坦福大學(xué)哈斯普拉特納設(shè)計(jì)學(xué)院（d.school）提出的五階段設(shè)計(jì)思維模型，而根據(jù) d.school 提出的五階段設(shè)計(jì)思維模型，大部分公司都基于這個(gè)模型進(jìn)行變量修改后作為自己的設(shè)計(jì)思維模式，這五階段設(shè)計(jì)思維模型為：同理心 (Empathise) - 定義 (Define) - 假設(shè) (Ideate) - 原型(Prototype) -測試 (Test) ,幾乎大部分的設(shè)計(jì)思維都基于這五階段模型做的改變。
用同理心代入 (Derivation) 定義，用同理心建立 (Build) 原型，通過原型反推 (Reverse) 原型的成立，最后用測試結(jié)果證實(shí) (Validate) 定義的正確性。
現(xiàn)在對設(shè)計(jì)思維有了大致的認(rèn)識，這里也不花太多篇幅去描述，但是全部看下來感覺自己腦袋暈乎乎的，那究竟我們在具體的工作學(xué)習(xí)中，要如何嘗試性代入且應(yīng)用設(shè)計(jì)思維來做設(shè)計(jì)呢？通過一些項(xiàng)目的經(jīng)驗(yàn)我總結(jié)出關(guān)于如何運(yùn)用設(shè)計(jì)思維做設(shè)計(jì)的方法，就是通過尋找產(chǎn)品之間的共通性和異樣性，深挖出關(guān)鍵性的問題所在，最后去解決這個(gè)關(guān)鍵性問題。
共通性與共同性
共通性和共同性在意義上有根本的區(qū)別，共通性是指相通或者適用于各方面的東西，比如共通的道理，共通的方法；共同性則是指彼此都具有相同的性質(zhì)，比如大家共同的目標(biāo)，共同的性格；產(chǎn)品與產(chǎn)品之間也是有共通性和共同性的，只有找準(zhǔn)產(chǎn)品的共通性，才能深度挖掘到核心問題的所在，從而通過設(shè)計(jì)手段解決核心問題。
與同類競品分析不同的是，競品分析需要通過大量且快速的對比找到各類產(chǎn)品之間的共同處和差異處，而尋找產(chǎn)品的共通性，則需要對逐個(gè)產(chǎn)品進(jìn)行深度剖析，挖掘共通的點(diǎn) (Point)，然后把這個(gè)點(diǎn)透過三原則：可行性(Feasibility)，可取性 (Preferability) 和創(chuàng)新性 (Innovativeness)分析來設(shè)計(jì)產(chǎn)品解決問題。一款產(chǎn)品或者某個(gè)功能模塊，只有在可行性和可取性中產(chǎn)生交集時(shí)，才可以在此之上進(jìn)行創(chuàng)新設(shè)計(jì)，可行性可以理解為開發(fā)可實(shí)現(xiàn)，或者和業(yè)務(wù)需求沒有沖突的模塊，可取性是指性質(zhì)上可以取用。
舉一個(gè)簡單的例子，某個(gè)模塊希望通過彈窗的形式提升某二級頁面的跳轉(zhuǎn)率，那么提煉出業(yè)務(wù)訴求關(guān)鍵點(diǎn)：
1.提升二級頁面的跳轉(zhuǎn)率；
2.通過彈窗的形式展現(xiàn)；
那么可取性就是【彈窗】這個(gè) Piont，而可行性同樣為彈窗形式，那么他們共同的交集之處就是彈窗頂部的氛圍層和行動點(diǎn)，設(shè)計(jì)師就可以在這兩個(gè)交集處做自己的創(chuàng)意發(fā)散，比如在彈窗頭部氛圍做的很強(qiáng)烈吸引用戶，或者把行動點(diǎn)設(shè)計(jì)成帶有動效的按鈕以此來吸引用戶點(diǎn)擊等等。產(chǎn)品設(shè)計(jì)中通過共通性挖掘問題，而承諾和顧客的體驗(yàn)達(dá)成共同相通，這是為了贏得用戶信任和尊重的需要。
產(chǎn)品的共通性
做產(chǎn)品第一步就是找出同類競品之間共同之處，把他們共同的地方記錄下來并做出統(tǒng)計(jì)。比如我需要做一個(gè)關(guān)于 UGC(用戶原創(chuàng)內(nèi)容)的內(nèi)容社區(qū)，那么我前期得搜集同類競品，比如 MONO、新草、Lofter等等，找出他們共同的地方。首先來解釋為什么要尋找共同的地方，根據(jù)模塊出現(xiàn)的頻率排列出模塊的優(yōu)先級，這是一款產(chǎn)品從零到一必須要經(jīng)歷的階段，但往往很多產(chǎn)品到這一步就停止了，然后像堆磚砌瓦一樣，它有的我 Duang 地加上去，另一個(gè)它有的我也要 Duang 地加上去，我全都要！最后導(dǎo)致產(chǎn)品做出來架構(gòu)不清晰，目標(biāo)不明確。這就是為什么老有設(shè)計(jì)師疑惑：為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意，這在戰(zhàn)略層就出現(xiàn)了的問題，跳到執(zhí)行層上改來改去，肯定怎么改都不會有一個(gè)滿意的結(jié)果。這時(shí)候就需要將搜集到共同的地方做分析，找出它們各自存在的性質(zhì)，然后挖掘產(chǎn)品的共通性。
通過各類競品搜集下來可以看出關(guān)于社區(qū)模塊的內(nèi)容大致分列為：話題標(biāo)題占比18%，統(tǒng)計(jì)信息占比18%，話題說明占比16%，心智氛圍占比8%，內(nèi)容分級占比4%以及其他內(nèi)容填充占比36%，具體歸類成A.標(biāo)題&統(tǒng)計(jì)、B.話題說明、C.心智氛圍、D.分級信息和 E.其他信息，然后排列優(yōu)先級順序?yàn)椋篈>B>C>D>E，最后一步就是分析各自獨(dú)有的性質(zhì)：
A.標(biāo)題&統(tǒng)計(jì)信息：話題標(biāo)題和統(tǒng)計(jì)信息屬于必要模塊，標(biāo)題顯示話題主題，統(tǒng)計(jì)信息展示話題關(guān)注度等信息，增強(qiáng)話題氛圍；
B.話題說明：是對話題進(jìn)行的補(bǔ)充說明，也可增設(shè)相關(guān)活動等文案；
C.心智氛圍：心智氛圍的增設(shè)用于對話題主題的傳達(dá)以及突出用戶的參與感；
D.分級信息：分級信息對用戶的篩選起到至關(guān)重要的作用；
E.其他信息：其他信息皆為用戶提供UGC或者平臺提供PGC。
而這類性質(zhì)可以統(tǒng)稱為社區(qū)類模塊產(chǎn)品的共通性，提煉出產(chǎn)品的共通性有什么用呢？如果一個(gè)社區(qū)類產(chǎn)品上線后發(fā)現(xiàn)用戶參與感熱度不是很強(qiáng)，那么就可以從心智氛圍模塊去分析是否問題出在這里，是否應(yīng)該加強(qiáng)話題的心智氛圍，或者是否可以通過投資邀請專業(yè)的人士通過生產(chǎn) PGC 來帶動社區(qū)的熱度等等，只有先去了解產(chǎn)品之間的共通性，然后找出關(guān)鍵點(diǎn)提煉出關(guān)鍵問題，在戰(zhàn)略上提出解決方案，才能從根本上解決產(chǎn)品問題。
就好比一個(gè)人捂著肚子沖進(jìn)診所，醫(yī)生首先了解捂著肚子的性質(zhì)，是闌尾炎？是胃痛？還是其他的疾病，只有先熟悉各類疾病的性質(zhì)原因后，通過排查篩選找出根本的原因，才能提出是做手術(shù)還是藥物治療的解決方案；同理，回到之前的那個(gè)問題：為啥總是左改一版右改一版業(yè)務(wù)方/老板就是不滿意，都沒查出究竟是什么原因?qū)е露亲油?，就開始開刀手術(shù)或者胡亂吃藥，運(yùn)氣好了胡亂吃藥吃對了解決了，運(yùn)氣不好被折騰涼了，最后的結(jié)果就是產(chǎn)品模塊下架撤離，所以無論是從零到一的產(chǎn)品還是業(yè)務(wù)改版，都需要找到產(chǎn)品之間的共通性，才能找出具體的解決方案。
設(shè)計(jì)細(xì)節(jié)的共通性
我們不難發(fā)現(xiàn)市場上很多出自于同一業(yè)務(wù)下的產(chǎn)品都有著自己的設(shè)計(jì)細(xì)節(jié)，而在這些母艦上都有著各個(gè)模塊的附屬模塊，比如在QQ產(chǎn)品里的興趣部落、NOW直播、微視等模塊，比如在淘寶產(chǎn)品里的天貓、聚劃算、飛豬等模塊，那么在這些母艦下的附屬模塊，在設(shè)計(jì)細(xì)節(jié)上自然而然要和母艦保持一致性。舉個(gè)很明顯的例子：手淘設(shè)計(jì)語言中卡片的圓角為24px，手貓?jiān)O(shè)計(jì)語言中卡片的圓角為10px（基于750px尺寸下），那么手貓其中的模塊自然是要遵循手貓的設(shè)計(jì)語言——圓角的尺寸為10px，但是如果這個(gè)模塊獲取到手淘透出的資源，那么在設(shè)計(jì)上，就要遵守手淘的設(shè)計(jì)語言——圓角尺寸為24px。
那么你會問了，這樣最多只是相同啊，有什么性質(zhì)意義呢？這和共通性又有什么關(guān)系？不同的產(chǎn)品所面向的用戶群體是不一樣的，所以主打心智也不一樣，設(shè)計(jì)上的細(xì)節(jié)傳達(dá)給用戶的心智一樣的不同。眾所周知，淘寶主要面向的用戶群體是大眾的，天貓主要面向的用戶群體是追求更高質(zhì)量或者品牌的，那么在細(xì)節(jié)上，24px的圓角卡片帶給用戶的心智是友好親切的，10px的圓角卡片帶給用戶的心智是偏向更精致更高質(zhì)感的；其次，如果用戶通過手淘的場景進(jìn)入天貓的模塊，一會兒24px的圓角一會兒10px的圓角，長時(shí)間下去用戶自然會分不清當(dāng)前場景是天貓還是淘寶，這是在產(chǎn)品一致性上做的共通性協(xié)調(diào)工作。所以如果是同類系的產(chǎn)品或者是模塊，在設(shè)計(jì)細(xì)節(jié)上一定要注意，保持模塊與模塊之間的共通性。（有的人可能不會注意到這些設(shè)計(jì)細(xì)節(jié)，設(shè)計(jì)細(xì)節(jié)既然是細(xì)節(jié)，個(gè)體本身影響力不是很大，很容易造成忽視，但是如果個(gè)體增多形成量級的話，造成的視覺影響是很直觀的）
差異性
差異化策略是從改變產(chǎn)品的“絕對差異化”到改變認(rèn)知的“相對差異化”，越來越著眼于“人”的視角。在如今發(fā)展迅猛的網(wǎng)絡(luò)營銷時(shí)代，“人”的因素更是被置于產(chǎn)品運(yùn)營和品牌營銷的核心位置，不過，這并非表明“定位”理論變得越來越重要了。這點(diǎn)做品牌的朋友相信有更多的感觸，但是無論你是做產(chǎn)品的，還是做品牌的，要想脫穎而出，首要的策略就是“差異化”。大家都知道平臺產(chǎn)品的最終目的是實(shí)現(xiàn)商業(yè)價(jià)值，可是如何實(shí)現(xiàn)商業(yè)價(jià)值，就是要通過產(chǎn)品之間的差異化來尋求突破點(diǎn)。
產(chǎn)品的差異性
依舊拿上面那個(gè)社區(qū)產(chǎn)品當(dāng)例子，同類對比我們發(fā)現(xiàn)，大多數(shù)的社區(qū)產(chǎn)品更多的是流量引進(jìn)來營造平臺氛圍，無論是通過 PGC 的形式還是對內(nèi)容的打造，但是在商業(yè)價(jià)值化層面上則很少有渠道介入。那要如何通過設(shè)計(jì)表達(dá)出差異化并且實(shí)現(xiàn)商業(yè)價(jià)值，就需要對實(shí)現(xiàn)商業(yè)價(jià)值有一定的了解。當(dāng)社區(qū)把流量引進(jìn)時(shí)，實(shí)現(xiàn)商業(yè)價(jià)值常見的幾種方式有：
1.廣告宣傳的推廣；
2.電商平臺的轉(zhuǎn)化；
3.流量引導(dǎo)產(chǎn)品模塊的介入等等。
以電商產(chǎn)品舉例，我這個(gè)社區(qū)模塊將流量引進(jìn)后，需要致使用戶通過 UGC 或者 PGC 種草的內(nèi)容去購買所對應(yīng)的種草商品，知名的社區(qū)電商產(chǎn)品的確也是這樣做的，比如小紅書、Lips等等，但是不難發(fā)現(xiàn)此類產(chǎn)品都有一個(gè)共同的弊端：用戶需要先記住種草商品的內(nèi)容后，自行去購買采購商品，這樣可能就去了淘寶、京東等等更加知名的電商平臺，最后為他人做了嫁衣，那么這一塊就是關(guān)鍵突破點(diǎn)。
通過尋找差異性找出關(guān)鍵突破點(diǎn)問題所在，并推導(dǎo)出相關(guān)的設(shè)計(jì)策略：平臺可以通過招商的形式發(fā)布社區(qū)話題，并且可以通過“參與話題送 xx 額度的優(yōu)惠券”、“參與話題并分享給好友獲取 xx 限量商品”等形式刺激用戶參與話題，并且也給用戶很方便的渠道入口直接進(jìn)行商品購買，防止流量丟失為他人做嫁衣；商家通過入駐平臺提供話題，平臺流量導(dǎo)入?yún)⑴c話題，商家通過參與話題給予優(yōu)惠等活動引導(dǎo)用戶購物，用戶通過平臺參與話題了解品牌獲取參與感；類似線下商場搞一些活動，品牌店給一些優(yōu)惠券之類的當(dāng)作參與活動的獎(jiǎng)勵(lì)，然后客人可以去到品牌店消費(fèi)，最終實(shí)現(xiàn)三方獲利的商業(yè)閉環(huán)！
不難發(fā)現(xiàn)，通過尋找產(chǎn)品之間的差異性來挖掘出關(guān)鍵點(diǎn)問題，然后在此基礎(chǔ)上解決問題做出創(chuàng)新。追求差異化，是產(chǎn)品基于競爭角度永恒的主題。這種差異化甚至貫穿了產(chǎn)品生命不斷迭代的全程，也貫穿在與品牌相關(guān)的一切要素中——產(chǎn)品、包裝、廣告、價(jià)格、渠道、視覺、代言人等等，每種要讀的動態(tài)演變，都是一種創(chuàng)新，具體需要那種要素在哪些時(shí)刻做出何種改變，既要考慮到競爭，也要敏銳覺察用戶的需求、態(tài)度和行為的變化趨向。
設(shè)計(jì)細(xì)節(jié)的差異性
設(shè)計(jì)細(xì)節(jié)用共通性同樣也有差異性，而細(xì)節(jié)的差異性有時(shí)候往往能起到產(chǎn)品的關(guān)鍵性作用。這里使用之前做的一個(gè)實(shí)際項(xiàng)目做例子：淘搶購模塊 v4.0.1的改版。（保密性原則不透露任何數(shù)據(jù)）因?yàn)樘該屬?v3.9樣式太過老舊，根據(jù)手淘語言更新的淘搶購 v4.0在投放過程中發(fā)現(xiàn)，成交量和成交率比 v3.9降低了很多，所以在 v4.0.1的改版中最主要的是解決這個(gè)問題。
根據(jù)用戶采樣調(diào)研數(shù)據(jù)分析我們篩查和對比發(fā)現(xiàn)，成交量和成交率下降的根本原因是用戶在頁面丟失，而用戶丟失的原因則是因?yàn)樘該屬?v3.9首屏的 Sublist 商品坑位的透出比 v4.0首屏的 Sublist 商品坑位多出一個(gè)，對的你沒看錯(cuò)，就是因?yàn)檫@么一個(gè)商品坑位的細(xì)節(jié)原因，導(dǎo)致 v4.0的成交量和成交率比 v3.9降低了很多，以至于引起重視從而需要解決問題。
找出關(guān)鍵問題后就要去解決問題，那么如何解決問題是關(guān)鍵。此處需要保證在不改變新版設(shè)計(jì)語言的基礎(chǔ)上對首屏 Sublist 的坑位透出做調(diào)整，那么只需要坑位透出3.5～4個(gè)坑位就能到達(dá)預(yù)期的效果，如何在有限的空間里解決這個(gè)問題，做了很多版本的嘗試。
通過各類嘗試得出ABCDEF六種方案后，這時(shí)候需要從設(shè)計(jì)細(xì)節(jié)的差異性逐一分析然后進(jìn)行取舍：
A.此方案為目前 v4.0實(shí)行方案，可以明顯看出單屏的效率只能展示3個(gè)商品坑位，因此是造成用戶在瀏覽的過程中會流失的根本原因；
B.此方案計(jì)與 v3.9通欄無太大差異，所以問題就是：1.版式陳舊老化；2.信息過多整體會導(dǎo)致頁面看起來雜亂無章；
C.此方案除了版式陳舊信息過多問題外，圖片變小導(dǎo)致用戶對信息細(xì)節(jié)辨識度不高，直接pass，所以通欄的方案在當(dāng)前場景中完全不可行。
D.此方案基于 v4.0上，縮進(jìn)了卡片內(nèi)信息的距離，更加突出“搶購”的緊湊感氛圍，同時(shí)單屏能顯示3.5個(gè)商品坑位，解決了屏效的主要問題，同時(shí)數(shù)據(jù)顯示比通欄式設(shè)計(jì)曝光點(diǎn)擊率有所提升，也符合淘寶的設(shè)計(jì)風(fēng)格規(guī)范，但是單卡片樣式商品與商品之間分割感太強(qiáng)烈；
E.此方案將所有商品坑位包含在一個(gè)大卡片內(nèi)，解決了商品與商品之間的分割感，商品信息細(xì)節(jié)也比小卡片展示得更完全，但存在問題就是：每個(gè)商品之間的間隔存在的分割線導(dǎo)致間距過大，屏效又回到舊版只能展示3個(gè)的問題，不能解決主要問題，所以pass；
F.此方案在大卡片設(shè)計(jì)上進(jìn)行了優(yōu)化，取消了分割線的設(shè)計(jì)，縮進(jìn)了商品與商品之間的間距，解決了小卡片式商品與商品之間分割感強(qiáng)烈的問題，圖片的大小信息細(xì)節(jié)也能給用戶良好的體驗(yàn)，最主要單屏顯示3.5個(gè)商品坑位，解決了最主要的問題，也符合最新的淘寶設(shè)計(jì)規(guī)范和風(fēng)格，此方案為最佳方案。
最后采用了F方案，也就是目前我們線上看到的效果，在灰度上線和 A/B test 后數(shù)據(jù)反饋，淘搶購 v4.0.1的成交量&成交率相比 v4.0有很明顯的上升甚至超出了 v3.9的數(shù)據(jù)，這是通過尋找設(shè)計(jì)細(xì)節(jié)上的差異性來解決問題最好的案例。再次證明：設(shè)計(jì)思維不應(yīng)被視為一種具體而不靈活的設(shè)計(jì)方法，細(xì)節(jié)的差異性有時(shí)候往往能起到產(chǎn)品的關(guān)鍵性作用，所以設(shè)計(jì)師從設(shè)計(jì)層面上去解決問題的時(shí)候，要不斷通過尋找產(chǎn)品之間的差異性，培養(yǎng)自己設(shè)計(jì)思維中的差異性。
動效差異性的運(yùn)用
產(chǎn)品設(shè)計(jì)中，動效作為一種輔助手段，幫助設(shè)計(jì)師傳達(dá)具象的意愿，幫助開發(fā)理解交互手段，是一種錦上添花的表達(dá)；前面的內(nèi)容更偏向于戰(zhàn)略層，而動效則偏向于表現(xiàn)層，同一種想表達(dá)的心智不同的樣式表達(dá)的效果完全不同。如何做好動效在產(chǎn)品中的表現(xiàn)，我們就需要了解不同的動效所帶來的性質(zhì)傳達(dá)。
舉個(gè)例子，某個(gè)彈窗需要對行動點(diǎn)通過動效的展示進(jìn)行強(qiáng)化，但是同樣是強(qiáng)化行動點(diǎn)，如果產(chǎn)品是需要體現(xiàn)出質(zhì)感、高端等心智時(shí)，那么在動效上的處理上就應(yīng)該體現(xiàn)出高品質(zhì)高質(zhì)感的動效，如果產(chǎn)品主要用戶為女性或者年齡偏小的用戶，則需要體現(xiàn)出可愛、親切感的心智。那么在動效的選擇上，就需要通過平時(shí)對動效的收集積累，然后熟悉不同的動效所表達(dá)的性質(zhì)，才能從中選擇最優(yōu)的方案。比如 Q彈縮放的動效看起來親切感更強(qiáng)，閃光的按鈕看起來質(zhì)感更加強(qiáng)烈一些。
動效向來是產(chǎn)品的輔助，動效應(yīng)該是克制的，只有了解動效的性質(zhì)，通過動效的差異性，完美地契合產(chǎn)品，才能發(fā)揮出動效的最大作用。
總結(jié)
在如今網(wǎng)絡(luò)時(shí)代和社會化媒體的大潮下，產(chǎn)品設(shè)計(jì)差異化的力量不僅僅基于競爭，更要基于消費(fèi)者需求的敏銳察覺和捕捉；設(shè)計(jì)思維的共通性和差異性，在今天也比以往任何時(shí)代都顯得重要。識別和競爭的需要決定了產(chǎn)品一定要差異化，而誠信和責(zé)任要求產(chǎn)品必須做到共通，差異性是產(chǎn)品價(jià)值的基礎(chǔ)，而共通性則是產(chǎn)品價(jià)值的保障。設(shè)計(jì)思維不應(yīng)被視為一種具體而不靈活的設(shè)計(jì)方法，而是需要設(shè)計(jì)師們通過自己的經(jīng)驗(yàn)積累，刻意地培養(yǎng)設(shè)計(jì)與產(chǎn)品之間差異性和共通性的意識，總結(jié)歸納出一套適用自己的設(shè)計(jì)思維。
為什么覺得英文比中文字體排版好看？
1．結(jié)構(gòu)
中文由漢字組成，漢字由不同多樣的筆劃組成，多直線、直角、銳角。英文以26個(gè)字母組成，字母以直線和圓弧組成，小寫的字母大多可以用一條連筆線條完成，大寫也不過4筆；漢字在結(jié)構(gòu)上更加復(fù)雜多樣，英文結(jié)構(gòu)則更加簡單和諧。
2．包含的信息量
漢字是以象形為原始基礎(chǔ)，也就是每個(gè)字都具有特別的意義，一個(gè)簡單的字可能在遠(yuǎn)古時(shí)代就代表了一個(gè)復(fù)雜的生活場景，是世界上最形象的文字，傳遞的信息量也比英文字母更多。
視覺上和心理上都會讓人覺得漢字更復(fù)雜，英文更簡單。
3. 規(guī)律性
英文中，26個(gè)字母的反復(fù)組合出現(xiàn)，使整個(gè)句子有一致和諧的感覺（相反，不一樣和突出的東西都會迎來視覺沖擊，同時(shí)也增加用戶的視覺負(fù)擔(dān)），中文字體雖然也有規(guī)律（例如：相同的邊旁結(jié)構(gòu)等），但是由于中文單個(gè)字體結(jié)構(gòu)過于復(fù)雜，規(guī)律性的東西并不顯見。
英文的組成的句子比中文的句子看似更有規(guī)律和組織性，視覺上更加輕松舒適。
4. 節(jié)奏感／呼吸感
本身單個(gè)漢字就比單詞更加飽滿，每個(gè)漢字像是被筆劃填充飽滿的方塊；
單詞是由橫向的一組字母組成，單詞里輔音多為豎長，元母多為短圓，結(jié)合起來大多都高低起伏，不會看似一個(gè)填滿的明顯長方塊，更像是律動的線條，整個(gè)單詞之間仿佛流通著空氣感。
5．句子組織方式
中文由漢字組成句子，字與字之間一般不留太大空隙，影響閱讀的連貫性。
英文以單詞組成句子，單詞與單詞之間需要一定的小空隙，不然會影響單詞的理解。
對比之下，英文句子比中文句子，視覺上會帶來更好的節(jié)奏感和呼吸感。
6．認(rèn)知／文字的識別度
首先，我們看到圖形和文字的時(shí)候，會有不同的心里反映，看到圖形會想著這個(gè)圖形好不好看，什么含義，看到文字的第一反映就是它的含義。雖然中文是象形文字，但我們是中文母語者，看中文的時(shí)候，第一反應(yīng)不是將他圖形化，而是直接快速看到文字傳遞的含義，不會對它的結(jié)構(gòu)和形狀進(jìn)行任何思考，跳過了圖形（包括圖形好不好看的想法）直接到字面意思。而看到英文的第一反應(yīng)會更傾向于將其圖形化和符號化，會看到字體的形狀線條，會覺得它好看或者不好看，會把它當(dāng)作視覺元素與整個(gè)畫面結(jié)合在一起。
另外，我們能發(fā)現(xiàn)，無論國內(nèi)和國外的大品牌，他們都使用了自己的語言文字來做logo，但是他們都將字體進(jìn)行了設(shè)計(jì)，讓人無法第一時(shí)間解讀出來，否則會讓人感覺更廉價(jià)。
舉個(gè)例子：左邊的英文給人感覺會聯(lián)想到蘋果公司的系列高端產(chǎn)品，簡潔大氣。右邊同樣的版式換成中文字就會在心理上給人一種廉價(jià)感。很像華強(qiáng)北某小商店打出來的廣告，讓人覺得不夠高級。
因此，英語更容易讓我們感覺到好看。一般的，在人們的認(rèn)知中：圖形的美觀程度>字符的美觀程度。
其實(shí)博大精深的中文并不比英文遜色，只是在使用的場景不同下各有優(yōu)劣勢，然而我們對中文的排版設(shè)計(jì)還知之甚少，更無法將中文的字體設(shè)計(jì)表達(dá)的淋漓盡致，所以會導(dǎo)致一個(gè)錯(cuò)覺：英文排版（字體）比中文排版（字體）好看，下面欣賞幾張?jiān)O(shè)計(jì)不錯(cuò)的國內(nèi)電影海報(bào)，看看他們是怎么做中文字體排版的吧~
▼
1．極簡化設(shè)計(jì)
這是一種以信息內(nèi)容為優(yōu)先的去風(fēng)格化設(shè)計(jì)。
在這信息爆炸的時(shí)代，讓用戶聚焦信息的難度越來越高。如何減少干擾，讓信息有效傳達(dá)給用戶正是極簡化設(shè)計(jì)所推崇的。加大字號，拉大層級對比，增加留白，減少顏色以及不必要的裝飾等手段越來越多地在設(shè)計(jì)中體現(xiàn)。
極簡化設(shè)計(jì)的核心是圍繞信息內(nèi)容本身而呈現(xiàn)的，因此這種方式首先在產(chǎn)品UI設(shè)計(jì)層面開始流行起來。 盡管極簡的設(shè)計(jì)風(fēng)格導(dǎo)致很多應(yīng)用的風(fēng)格越來越趨同。但它是真正以用戶為核心的設(shè)計(jì)發(fā)展趨勢。設(shè)計(jì)不再作為獨(dú)立于內(nèi)容之外的元素存在，而將著眼于內(nèi)容本身，為用戶打造直觀的視覺體驗(yàn)。
2．大投影
大投影，或是微投影，是指輕微的、若有似無的投影，它不易被立刻察覺到，因?yàn)椴粫o人厚重的寫實(shí)感，反而增加了設(shè)計(jì)元素的深度，更好地表現(xiàn)了扁平化操作層級。從iOS 11的App Store開始就使用了大投影的卡片式設(shè)計(jì)，它令設(shè)計(jì)元素更加獨(dú)立醒目，極好地抓住用戶的注意力。
3．粗標(biāo)題
在扁平化設(shè)計(jì)中，文字排版影響著信息層級展示的清晰與否，通過文字的字號、字重、顏色等的對比去建立清晰的信息層級，而不用太多的裝飾元素。
4．留白
設(shè)計(jì)元素和元素之間保持足夠的間距，可以減少用來區(qū)分層級關(guān)系的不必要裝飾元素，例如分割線、邊框等，利用元素的排版、文本的對比和色彩的搭配建立一種更加簡單的設(shè)計(jì)風(fēng)格。大間距的設(shè)計(jì)能讓界面具有呼吸感，大量的留白可以增加或減少元素的易見性，元素周圍的間距越大，元素和元素之間的獨(dú)立性就越強(qiáng)，每一個(gè)元素就越顯得醒目突出，有助于用戶把視覺聚焦在內(nèi)容本身。
Airbnb是極佳的范例，它采用了一種既不是列表設(shè)計(jì)也不是卡片設(shè)計(jì)的極簡設(shè)計(jì)，大標(biāo)題文本包含一組帶有圖片和描述的元素，組元素和組元素之間保持較大的間距，既保證了它們互不干擾，又不會令界面看上去顯得松散，因而帶給用戶非常輕松的瀏覽體驗(yàn)。
5．生動明亮的色彩漸變
關(guān)于漸變色這一塊其實(shí)早在去年的時(shí)候設(shè)計(jì)圈中就有很多采用漸變色的設(shè)計(jì)手法，漸變色設(shè)計(jì)的優(yōu)勢在于可以讓頁面層次感更豐富，突出頁面更加重要的元素，以及可以使內(nèi)容相對復(fù)雜的一些圖片和元素更加統(tǒng)一，而且與此同時(shí)也增加了視覺上的感官，更加能起到吸引用戶的作用。
▼
1. 優(yōu)化視覺圖片
在上一版的設(shè)計(jì)中大面積采用科技藍(lán)作為設(shè)計(jì)的主色調(diào)，看久了之后會給人一種稍顯壓抑的情緒。最新版在整體上做了一次大面積的改變，將原先的白色導(dǎo)航欄優(yōu)化為深空藍(lán)，并加上微投影的效果。給人更專業(yè)和可靠的視覺感受。整體圖片拋棄了大面積藍(lán)色調(diào)，而是采用暖色調(diào)的圖片來給人更和諧溫暖的感受。在banner的文字排版和按鈕上都進(jìn)行了優(yōu)化升級，讓頁面更有呼吸感。整體界面給人更專業(yè)、嚴(yán)謹(jǐn)、溫暖的氣氛。
2.可視化圖表優(yōu)化
在上一版頁面較為零散排布的基礎(chǔ)上進(jìn)行了規(guī)整設(shè)計(jì)，讓頁面變成更易于閱讀的卡片式設(shè)計(jì)。在各個(gè)卡片的內(nèi)部做了新的排版及布局優(yōu)化。讓頁面給人更清爽簡約的感受。便于用戶更好的理解與獲取可視化圖表傳達(dá)的核心理念。
3.頁面表現(xiàn)形式優(yōu)化
以調(diào)查問卷頁面為例，這個(gè)頁面將原先的設(shè)計(jì)做了一個(gè)打破的處理。為了重新尋找更優(yōu)化的設(shè)計(jì)方式。這里采用的設(shè)計(jì)方式是將問卷連成一串，每個(gè)問題都可以進(jìn)行點(diǎn)擊展開式的收縮設(shè)計(jì)，并且當(dāng)用戶每答完一題，下一題會自動展開。旨在為頁面節(jié)省更多的空間，這樣就可以有效減少用戶的困惑感，使問卷的形式更輕松的進(jìn)行。同時(shí)讓原本需要兩個(gè)頁面顯示的問卷內(nèi)容可以在同一個(gè)頁面更好的呈現(xiàn)。
4.流行趨勢的運(yùn)用
這里以市場動態(tài)頁為例，整個(gè)PC端的設(shè)計(jì)都采用了卡片式及弱陰影的效果。在色彩上也是運(yùn)用了較為舒適的明暗度的對比方式，在整體圖片的選擇上采用冷暖交替的對比手法，讓頁面更和諧、大氣又不失乏味。版式上針對上一版做了進(jìn)一步的優(yōu)化，讓文字的排版更透氣，圖文的結(jié)合給用戶更有點(diǎn)擊欲的感受。
黃金分割在界面設(shè)計(jì)中的應(yīng)用
黃金分割大家應(yīng)該早有耳聞，作為一名設(shè)計(jì)師，怎么來利用黃金分割線使其構(gòu)圖更加完美呢？
說實(shí)話，構(gòu)圖時(shí)是否使用黃金分割線構(gòu)圖并不是絕對的，它只是方法之一。但是黃金分割比例在全世界乃至全宇宙確實(shí)都是至高無上的。
01
至高無上的黃金分割比例
這種東西是很神奇的事情，你了解的越多越會覺的這是一個(gè)不可思議的事情。甚至有人稱之為上帝的密碼。
那黃金分割線到底是個(gè)什么東西呢。它在什么位置？它在畫面中的哪個(gè)地方呢？
“有一條線條，如果我們從中切一段，如果左邊是0.618這么一個(gè)比列，右邊則是1這么一個(gè)比例?！比绻线@樣的左右比例我們稱之為黃金分割比。那么中間切割的位置就是我們黃金分割線的位置。
我們大體概括一下：
黃金分割線是指將整體一分為二
較大部分與整體部分的比值
等于較小部分與較大部分的比值
其比值約為0.618
這個(gè)比例被公認(rèn)為是最能引起美感的比例
總結(jié)一句話就是
0.618的比值最美
0.618的比例怎么來的？
有人做了一個(gè)實(shí)驗(yàn)，他們拿著一些長方形去問全世界的人，說哪個(gè)長方形最好看？結(jié)果所以的人都不約而同的選擇了這種長方形。西方的，東方的，土著的都選擇了如下圖的這種長方形。
科學(xué)家們就很奇怪它到底奧秘在哪？要分析分析它。這個(gè)長方形如果從中間畫一條線，把它分割成倆個(gè)形狀的話，右邊可以是一個(gè)正方形，左邊小的長方形的比例和原來的長方形的比例是一摸一樣的。
小的長方形也可以切割出一個(gè)正方形和一個(gè)等比例的更小的長方形。這種長方形只有黃金風(fēng)格的長方形才能做到。
02
運(yùn)用黃金分割線構(gòu)圖
畫面長寬比不同，黃金分割線位置也不同。這里我們列舉常用的長寬比尺寸4:3/3:2/16:9/1:1。
在移動端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。這倆個(gè)尺寸正好等同于一倍圖375*667的比例。
不同長寬比的畫面我們按照0.618:1的比例，一個(gè)畫面可以切割出4條黃金分割線，上分割線/下分割線/左分割線/右分割線。我們在實(shí)際構(gòu)圖怎么利用黃金分割線快速排版？
2.1、基本的運(yùn)用方法
2.1.1、把主體放線上，當(dāng)然線狀的主體才能放線上。
在構(gòu)圖中我們經(jīng)常遇到正方形/長方形等規(guī)則的形狀，前期我們把規(guī)則的形狀中心放在黃金分割線上，等所有內(nèi)容添加完成后再分析畫面的重量，微調(diào)來平衡畫面。
不是所有的物體都是剛剛好放在黃金分割線上。輪廓化的形狀應(yīng)該根據(jù)什么來跟黃金分割線重合呢？應(yīng)該是形狀的重心，而不是中心。
（如上圖）長方形的圖片是有規(guī)律的形狀，我們把它的中心暫時(shí)先放在右黃金分割線上，從平衡角度來看還是右邊重，因?yàn)槲覀冞€沒有把頁面所以元素放進(jìn)去，到時(shí)候可以根據(jù)畫面的平衡感來微調(diào)。
2.1.2、多條黃金風(fēng)格線構(gòu)圖
一個(gè)畫面中，可以切割成上下左右四個(gè)黃金分割線，前期練習(xí)時(shí)可以盡可能把黃金分割線利用好。
（如上圖）我們把圖片放在右黃金分割線上，正文大標(biāo)題放在上黃金分割線上。這樣就搭上倆條黃金分割線了，再加上logo/分類/導(dǎo)航等信息整個(gè)界面就更完整了。（如下圖）
2.2、具體選擇哪一條？
初期進(jìn)行練習(xí)的時(shí)候，黃金分割線能搭上幾條就搭上幾條。這么多黃金分割線，如果我用1條到2條，到底選擇哪一條？
2.2.1、根據(jù)元素選擇
界面設(shè)計(jì)時(shí)要根據(jù)元素多少進(jìn)行選取更合適的黃金分割線。
（如上圖）最終所有元素都確定后，我們把圖片放右黃金分割線上，正文大標(biāo)題放在上黃金分割線上，正文跟按鈕的中心放在下黃金分割線上，圖片輪播按鈕的中心放在左黃金分割線上。這樣四條黃金分割線搭上都利用起來。在這基礎(chǔ)之上再去微調(diào)相信畫面會更出彩的。
2.2.2、根據(jù)哪邊更精彩選擇畫面
把上下或左右兩條黃金分割線對比一下就能確定參考哪一條黃金分割線了。
（如上圖）我們開始把圖片放在下黃金分割線上，上面留了太多空間，圖片的內(nèi)容展示的也很少，畫面感不夠豐富。
（如上圖）根據(jù)畫面的豐富程度，我們把圖片放在靠近上黃金分割線的位置，把圖片中主體的放在靠近右黃金分割線附近。然后再添加內(nèi)容豐富畫面，我們?yōu)楫嬅嫣砑觢ogo/數(shù)據(jù)/導(dǎo)航/分類/按鈕，讓畫面更豐滿。（如下圖）
2.2.3、視線的影響
人和動物的視線朝向會影響到它的擺放位置。
（如上圖）小狗狗的視覺朝向是左邊，所以我們肯定得把小狗狗放右邊。因?yàn)樗且粋€(gè)不規(guī)則造型，當(dāng)遇到不規(guī)則造型時(shí)我們應(yīng)該嘗試找到它的重心，正好它整個(gè)形態(tài)成一條直線，它的重心應(yīng)該是沿鼻子的往右的一條隱形的線。主體確認(rèn)好后，我們在加上logo/標(biāo)題/正文/導(dǎo)航進(jìn)行排版，保證畫面平衡進(jìn)行微調(diào)。（如下圖）
簡化的黃金分割線
三分線
我們還有個(gè)困難，那就是0.618:1的黃金分割線的位置確實(shí)不是很好找。所以對于設(shè)計(jì)師來說，我們有一種簡化黃金分割線的做法？就是三分線。
什么意思呢？左邊是黃金分割線，右邊是三分線。三分線就是均勻的把長方形的長和寬切三段，均勻的砍三段，每個(gè)方格都是一樣大小。
三分線的位置跟黃金風(fēng)格線的位置差不了多少，但是黃金分割線比起三分線更靠近中央的位置，是這么一個(gè)概念。
(如上圖)綠色的虛線是右黃金分割線的位置，黃色的虛線是右三分線的位置，我們沒有直接把主體的重心直接放在黃金分割線上，在這個(gè)畫面中，因?yàn)樽笥业男畔⒘亢艽螅o人很重的壓迫感，所以主體如果太靠近左邊就會讓畫面失去平衡，這時(shí)候我們就把主體放在了三分線上。
不要說很嚴(yán)謹(jǐn)?shù)陌阉匦臄[在三分線上，一來黃金分割線真實(shí)所在的位置是三分線往里靠一點(diǎn)的位置，二來我們說黃金分割線構(gòu)圖／三分線構(gòu)圖不是說讓你一定要完全重疊，大差不差就行，具體情況還是要具體分析。
黃金分割還不止這么多的表現(xiàn)形式。它還有一種更復(fù)雜的表現(xiàn)形式叫黃金螺旋線。而從黃金螺旋線里可以推倒出一個(gè)黃金興趣點(diǎn)。
于是我們就把最佳興趣點(diǎn)和黃金螺旋線都統(tǒng)稱為黃金分割的衍生品。在設(shè)計(jì)中應(yīng)該是算比較高級的一種構(gòu)圖技法了。
03
最佳興趣點(diǎn)
來看看黃金螺旋線衍生的最佳興趣點(diǎn)在什么位置？（如下圖）
在設(shè)計(jì)中實(shí)際應(yīng)用的時(shí)候，想找出這個(gè)點(diǎn)來絕對不是很容易的事情。所以怎么辦呢？有簡單找到最佳興趣點(diǎn)的方法嗎？長方形的一條斜線鏈接起來，另一個(gè)頂點(diǎn)畫一條垂直于這條斜線的點(diǎn)基本就是最佳興趣點(diǎn)的位置。（如下圖）
畫面中不止一個(gè)最佳興趣點(diǎn)，一個(gè)畫面中會有四個(gè)興趣點(diǎn)。會更好的方便我們利用。（如下圖）
畫面長寬比不同，最佳興趣點(diǎn)的位置也不同。這里我們列舉常用的長寬比尺寸4:3/3:2/16:9/1:1。（如下圖）
在移動端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。這倆個(gè)尺寸正好等同于一倍圖375*667的比例。
案例分析
（如上圖）圖片案例來自攝影師7kidz的攝影作品，圖片質(zhì)量很高，整體風(fēng)格很符合現(xiàn)在主流的抖音風(fēng)，那就順便做個(gè)直播類的ui界面設(shè)計(jì)來詮釋最佳興趣點(diǎn)的魅力。
案例一同樣大小的圖片我們按照兩種方式進(jìn)行擺放，左邊的圖片我們參考黃金分割線，把人物的眼睛靠近上黃金分割線的位置；右邊的圖片我們把人物的右眼放在了右上的最佳興趣點(diǎn)的位置。然后我們?nèi)サ糨o助線再對比下（如下圖）
雖然我們參考了兩種方式進(jìn)行排版，圖片本身就很精美，很多人就感覺隨便放放就好了，左邊的黃金分割線構(gòu)圖單看也是很棒的，所謂沒有對比就沒有傷害，當(dāng)黃金分割線遇上最佳興趣點(diǎn)，哪個(gè)好效果是顯而易見的。從畫面的飽和度跟視覺引導(dǎo)顯然右邊的整體感覺更飽滿一些。加上直播平臺元素整個(gè)界面（如下圖）
案例二畫面中人物前方的效果很出彩，想辦法盡可能保留，所以把人物右眼放在右上最佳興趣點(diǎn)的位置，正好左前方燈管不規(guī)則的物體的重心也恰巧在左上最佳興趣點(diǎn)的位置，這樣就有運(yùn)用了兩個(gè)最佳興趣點(diǎn)，畫面更加豐富起來，加上直播平臺元素整個(gè)界面（如下圖）
案例三畫面中人物的睫毛放在右上最佳興趣點(diǎn)的位置，剛看到畫面的時(shí)候我們第一眼會被美美的胸部所吸引，但是我們眼神會順勢往右上看到美女的睫毛。是的因?yàn)槲覀儼阉旁诹俗罴雅d趣點(diǎn)的位置，不會因?yàn)樗嫉拿娣e很小而被忽略。這個(gè)案例其實(shí)最具代表性。加上直播平臺元素整個(gè)界面（如下圖）
“最佳興趣點(diǎn)是不是和黃金分割線是重疊的？”
最佳興趣點(diǎn)和黃金分割線交點(diǎn)不重合的，黃金分割線的交叉點(diǎn)比最佳興趣點(diǎn)更靠近畫面中心。
“那是不是就是三分線的橫豎線相交處啊？”
最佳興趣點(diǎn)和三分線交點(diǎn)也不重合？最佳興趣點(diǎn)比三分線還要更外一點(diǎn)。
最佳興趣點(diǎn)可以和黃金分割線或三分線一起使用嗎？
答案是肯定的，一起使用會增加我們布局的多樣性，內(nèi)容可以排的更加豐富。
（如上圖）畫面中最突出的是人物的頭發(fā)，我們把頭發(fā)的形成的點(diǎn)放在了左上最佳興趣點(diǎn)的位置，微調(diào)人物，在畫面中的人物重心差不多在三分線所在的這條直線上。標(biāo)題正好做為一個(gè)整體的中心放在下黃金分割線的位置上。再加上音樂封面/歌曲名/播放按鈕，微調(diào)畫面使畫面達(dá)到視覺平衡。
（如上圖）音樂專輯封面為正方形，最佳興趣點(diǎn)就是正方形的中心點(diǎn)，封面人物重心放在正方形的中心，封面放在靠近上黃金分割線的位置；大標(biāo)題差不多在左上最佳興趣點(diǎn)的位置，整個(gè)畫面重心在左黃金分割線的位置，為了達(dá)到視覺平衡，右上角加了一個(gè)頭像形成大小對比，讓畫面更穩(wěn)定，不至于左邊太重而失去平衡。加上播放按鈕/推薦的封面后再調(diào)整。（如下圖）
04
黃金螺旋線
斐波那契螺旋線也稱“黃金螺旋”，是根據(jù)斐波那契數(shù)列畫出來的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案。是自然界最完美的經(jīng)典黃金比例。
斐波那契螺旋線，以斐波那契數(shù)為邊的正方形拼成的長方形，然后在正方形里面畫一個(gè)90度的扇形，連起來的弧線就是斐波那契螺旋線。
斐波那契數(shù)列（FibonacciSequence）數(shù)列是這樣一個(gè)數(shù)列：
1、1、2、3、5、8、13、21、34、55、89…
在數(shù)學(xué)上，斐波那契數(shù)列是以遞歸的方法來定義：
F0=1
F1=1
Fn=F(n-1)+F(n-2)
(n>=2，n∈N*)
斐波那契數(shù)列比在字號大小、界面布局、Logo設(shè)計(jì)上具體有哪些用法？
字號大小
4.1.1 大字體與小字體比例系統(tǒng)
我們在選擇一個(gè)字號大小做為參考時(shí)，我們正常會選擇最大字號或最小字號做為參考。按照黃金比1:1.618可以得到比它大的字體，按照黃金比1:0.618可以得到比它小的字體。
為了方便排版，我們除了可以使用黃金分割比外，還可以使用斐波那契數(shù)列比?？梢杂懈囔`活的排版方式，通過對比可以選擇最適合的。
斐波那契數(shù)列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 ...
如上圖我們可以根據(jù)字體的高度比來排版，這里我們大字高度：間距：小字高度比為8:5:5，可以靈活使用斐波那契數(shù)列比，多排幾個(gè)版式找到最適合的一個(gè)。
4.1.2 文字的長度比例
在設(shè)計(jì)字體大小的時(shí)候，可以根據(jù)字體的長度來做為參考，黃金螺旋線整體長度為140px,下面的字體比較長我們就乘以1.618來得到比較大的比例226.52，取整數(shù)為226，我們對應(yīng)長度字號取整數(shù)即可。
界面布局
上圖案例由UISTAR提供，整個(gè)界面的布局很舒服，字間距也恰到好處。在做后臺界面，客戶端界面時(shí)候很多時(shí)候會出現(xiàn)界面分段布局，很多時(shí)候認(rèn)為后臺不是特別重要而忽略了它的美觀性?？聪聢D我們應(yīng)該怎么通過斐波那契數(shù)列比來切割畫面
我們通過斐波那契數(shù)列比8:5:3:2:1繪制了正方形，在后臺復(fù)雜的界面中我們肯定要參考畫面中重要的最小寬度來確定這個(gè)比例大小，紅框就是我們確定的最小寬度，確定寬度后8:5:3:2:1得到大小不一的方格，剩下來就是根據(jù)內(nèi)容自由組合合適的方格。
很神奇的事情發(fā)生了，好的作品大體都符合這個(gè)規(guī)律，幾像素的偏差已經(jīng)不重要的，所以前期我們可以參考方法論，當(dāng)你的能力上來之后就可以放棄它慢慢憑自己的感覺來判斷作品的好壞。
LOGO設(shè)計(jì)
黃金斐波那契螺旋法是國際上通用的LOGO設(shè)計(jì)手法，也是最工整最嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)手法。
BIGD牛大大已經(jīng)出了類似教程，具體請查看。《Ai中用黃金比例法快速作圖》
這邊引用BIGD視頻教程是想讓知識更系統(tǒng)，也省點(diǎn)精力擼其他的干貨。
我寫了一篇《如何學(xué)習(xí)Yoga Style？》，里面有圓切法的基礎(chǔ)教程。
這里說一下為什么要用黃金螺旋線去重新定義標(biāo)識呢？
打個(gè)比方很多時(shí)候我們會找一張動物圖片用圓切法去繪制它，但是我們繪制時(shí)候因?yàn)椴恢涝趺慈プ鰷p法，會讓這個(gè)形態(tài)變的復(fù)雜，繪制結(jié)果更多像是圖案或者圖形，而不是標(biāo)識。我們使用黃金螺旋比例去切形態(tài)的時(shí)候要抓住動物的主體形態(tài)和特征，盡可能的抽象化簡單化。
黃金螺旋線在logo中的應(yīng)用
黃金螺旋比例用圓去切割很多人已經(jīng)會了，但是最最最高級的就利用好黃金螺旋線。最近站酷很火的一個(gè)設(shè)計(jì)師DAINOGO，它的作品中就用到了黃金螺旋線，能用一個(gè)圓解決的絕對不用倆個(gè)圓。我們在設(shè)計(jì)中如果有運(yùn)用到弧線的地方可以考慮使用黃金螺旋線做為參考。
設(shè)計(jì)中的重復(fù)是什么？
在平面設(shè)計(jì)中，重復(fù)構(gòu)成是常用的一種構(gòu)成方法，通過重復(fù)可以使畫面達(dá)到和諧、統(tǒng)一的視覺效果，并能加強(qiáng)給人的印象，也可以達(dá)到一種有規(guī)律的節(jié)奏感和形式美感。
排版的四大原則：對比、對齊、親密性、重復(fù)，重復(fù)在排版中也占據(jù)了一席之地，可見它在設(shè)計(jì)中分量是不可小覷的。
格式塔原理：接近性、相似性、連續(xù)性、封閉性、對稱性、主體/背景、共同運(yùn)動，格式塔原理中的對稱性就是重復(fù)的一種表現(xiàn)方式；格式塔原理中的相似性算是重復(fù)中自帶的一種突變。
01、重復(fù)
重復(fù)是設(shè)計(jì)中最基本的形式。在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。
在產(chǎn)品設(shè)計(jì)中重復(fù)的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復(fù)的元素有位移（方向）、旋轉(zhuǎn)、縮放、不透明度、相同屬性交互要一致。
在產(chǎn)品設(shè)計(jì)的前期設(shè)計(jì)師需要輸出界面設(shè)計(jì)，為了方便下游前端工程師更好的規(guī)范和適配，也要保重產(chǎn)品后期上線產(chǎn)品視覺稿的高度還原，這就要求設(shè)計(jì)師輸出一整套產(chǎn)品的視覺和交互規(guī)范。
重復(fù)配色
在app store 的頁面中使用了相同的顏色進(jìn)行提醒，方便用戶快速查找和點(diǎn)擊，整體的藍(lán)色又給人理性的感覺，看到付費(fèi)app的好評數(shù)可以看出是因?yàn)楫a(chǎn)品好才推薦你進(jìn)行理性消費(fèi)。
重復(fù)大小
INS主頁第一排頭像相同大小進(jìn)行重復(fù)排列，與內(nèi)容的人物頭像有大小對比之分；INS搜索頁采用了九宮格布局，為了重復(fù)中有變化它把右邊的四個(gè)方格合并成一個(gè)內(nèi)容展示區(qū)域，推薦好的熱門視頻。
重復(fù)間距
Airbnb界面中的間距非常規(guī)范，首頁大體采用了谷歌里面的8px原則，每個(gè)間距之間的規(guī)范很多1:2的比例關(guān)系。好的比例規(guī)范會給界面帶來簡潔大氣的感覺。
重復(fù)組件
（如圖標(biāo)注）INS界面中用了統(tǒng)一組件，相同的圓角和高度規(guī)范又給畫面增加了統(tǒng)一性和連貫性。
02、突變
在相同的形象重復(fù)出現(xiàn)時(shí)，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時(shí)我們稱之為突變。
格式塔原理中的相似性也是重復(fù)中突變的一種形式。
在產(chǎn)品設(shè)計(jì)中我們運(yùn)用的突變的目的很簡單就是為了讓其更加突出，多用于區(qū)分當(dāng)前狀態(tài)、選中狀態(tài)和默認(rèn)狀態(tài)。
banner輪播
banner輪播圖上面的提示狀態(tài)會根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。
導(dǎo)航欄分類
導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進(jìn)行區(qū)分，把當(dāng)前狀態(tài)進(jìn)行變化從而進(jìn)行凸顯出來。
按鈕
在登錄注冊頁面中，我們會通過大的色塊凸顯登錄按鈕，引導(dǎo)用戶快速登錄進(jìn)入到app里面。也減少了用戶的思考過程，符合大腦的惰性。
但是在很多windows系統(tǒng)中，卸載軟件時(shí)會跟你玩文字游戲，會用非、否、不是等誘導(dǎo)你作出錯(cuò)誤的判斷。
feed流
feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品展現(xiàn)形式有列表、瀑布流、卡片形式。
站酷首頁feed流里面會把內(nèi)容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點(diǎn)是推作品，當(dāng)文章出現(xiàn)時(shí)通過改變文章的排版進(jìn)行區(qū)分，重復(fù)里面又帶有變化。
03、節(jié)奏感
多少元素排列可以形成節(jié)奏感，一般來說是3個(gè)或3個(gè)以上，兩個(gè)你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個(gè)或3個(gè)以上整齊的排列就會形成一種節(jié)奏感。
左右滑動
（如圖來自uistar）界面中三個(gè)書籍整齊的排列在一起，可以通過左右滑動來獲取更多的書籍。在使用左右滑動效果時(shí)，應(yīng)考慮元素的數(shù)量，盡量不要超過10個(gè)以上。
列表頁
（如圖來自uistar）列表頁面整齊的排列在一起有一定的節(jié)奏感，通過改變icon的配色來豐富畫面。
04、韻律
元素在排列的過程中有形狀、顏色、大小、不透明度等有規(guī)律的變化就形成了一種韻律感。在動效上主要還是通過位移、放大縮小、旋轉(zhuǎn)、不透明等變化來制作界面動畫。
最美有物
最美有物app中的畫報(bào)界面中，通過改變每個(gè)界面的大小比例有序的排列在一起，通過上下滑動可以快速瀏覽標(biāo)題，進(jìn)行查找翻閱，整個(gè)過程很流暢，整個(gè)界面有流動性和韻律感。
圖表
圖表在設(shè)計(jì)的時(shí)候通過不同顏色來區(qū)分不同的時(shí)間段，線條錯(cuò)落有致的排列增加了界面的韻律感。
配色
（如圖來自Prakhar Neel Sharma和crisssamson）這倆個(gè)作品都是通過色彩按照紅橙黃綠青藍(lán)紫規(guī)律運(yùn)用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。
重復(fù)在動效中如何運(yùn)用才會有韻律感？
界面動效中主要分成當(dāng)前狀態(tài)動效變化和轉(zhuǎn)場動效變化，界面中的元素a1對b1、a2對b2、a3對b3信息對等，能幫助界面做出很有韻律感的動效。
總結(jié)：
重復(fù)可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強(qiáng)對畫面的記憶。
重復(fù)、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當(dāng)中的，幾種不同的美感可以同時(shí)存在的，只不過它適應(yīng)不同人群的審美能力，審美能力高一點(diǎn)的更喜歡一些變化，審美能力相對基礎(chǔ)更喜歡簡單的重復(fù)。
所以畫面中不斷出現(xiàn)同樣的元素這叫重復(fù)，而在很多重復(fù)里面突然出現(xiàn)一個(gè)變化這叫突變，相同元素整齊的排列在一起這叫節(jié)奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。
當(dāng)不確定成為常態(tài)，公司的組織架構(gòu)頻繁變動，產(chǎn)品不斷迭代，設(shè)計(jì)師需要跟隨用戶需求、業(yè)務(wù)、產(chǎn)品進(jìn)行技能迭代，UI設(shè)計(jì)師學(xué)習(xí)數(shù)據(jù)分析、運(yùn)營、交互等技能提升自己。這些技能都需要產(chǎn)品界面設(shè)計(jì)為載體，那么界面設(shè)計(jì)中有哪些確定不變的方法和技巧呢？那就需要對界面有更深入的理解。
互聯(lián)網(wǎng)的項(xiàng)目職能有產(chǎn)品經(jīng)理、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、UI設(shè)計(jì)師、視覺設(shè)計(jì)師、前端工程師、后端工程師、測試工程師等，每個(gè)職能崗位對界面設(shè)計(jì)的理解深度也各不相同。
交互設(shè)計(jì)師會從信息架構(gòu)、概念設(shè)計(jì)、導(dǎo)航設(shè)計(jì)、標(biāo)簽設(shè)計(jì)、表單設(shè)計(jì)、搜索、篩選、關(guān)系、用戶、目標(biāo)、行為、場景、組件、模式等維度去觀察和理解界面設(shè)計(jì)。
產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師、前端工程師共同搭建設(shè)計(jì)系統(tǒng)語言時(shí)，他們會從邏輯、關(guān)系、信息、載體、容器、技術(shù)等維度把界面拆分成一個(gè)一個(gè)的組件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。
UI設(shè)計(jì)師、視覺設(shè)計(jì)師的視角會關(guān)注界面設(shè)計(jì)中的字體、色彩、圖標(biāo)、圖片、布局、編排、比例、質(zhì)感、柵格、風(fēng)格、趨勢等。
前端工程師會從代碼視角理解界面結(jié)構(gòu)，相關(guān)知識點(diǎn)有框架、容器、盒子原理、樣式、標(biāo)簽、表單、模式、絕對定位、自適應(yīng)、響應(yīng)式、百分比等。
基于以上視角，現(xiàn)在我會以一種新的視角帶你去理解和學(xué)習(xí)界面設(shè)計(jì)，它就是界面三重構(gòu)。簡單說就是分別從X軸、Y軸、Z軸三個(gè)維度去理解和解讀界面設(shè)計(jì)。但是在模型抽象時(shí)遇到了困難，如圖模型一是從界面、交互、前端的X軸、Y軸、Z軸去解讀，模型二是從X軸、Y軸、Z軸的界面、交互、前端的去解讀。
模型的抽象不夠簡潔，有很多重復(fù)的點(diǎn)。這種結(jié)構(gòu)很像組件化中的類別和狀態(tài)。我嘗試用組件化命名的方式梳理出平面邏輯圖。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因?yàn)榻换ズ颓岸硕际墙⒃诮缑嬷系模跃陀辛私缑?交互—X、界面+前端—X。當(dāng)寫到界面X軸相關(guān)知識時(shí)，如果有交互、前端的知識點(diǎn)，可以在此基礎(chǔ)上接著寫。
根據(jù)平面邏輯圖我抽象出一個(gè)更簡單的模型?？梢詮慕缑娴腦、Y、Z、XY、XZ、YZ去輸出相關(guān)知識點(diǎn)，交互、前端在界面三重構(gòu)的基礎(chǔ)上闡述。
X軸設(shè)計(jì)中有位置的結(jié)構(gòu)關(guān)系，位置的排序，段落文本行長的易讀性，交互和前端中的應(yīng)用。
X軸從位置上可以簡化為左右、左中右的結(jié)構(gòu)關(guān)系。
在左右的結(jié)構(gòu)關(guān)系中，自古就有左為上，人的視線瀏覽順序是從左到右，從上往下。所以重要的信息內(nèi)容可以優(yōu)先放在左邊。在舞臺劇表演中，重要的角色登場往往也是從左邊進(jìn)場。微信的發(fā)現(xiàn)列表頁把圖標(biāo)加文字放置左邊，右邊放箭頭指向。
左中右的結(jié)構(gòu)布局讓層級更加豐富，從而增加層次感。左中右的位置順序是可以被定義的，常見的有左中右對應(yīng)一二三的位置關(guān)系，也可以對應(yīng)二一三的位置關(guān)系。這兩種位置關(guān)系分別鞏固了左或中為最重要的地位。
我們來看看App界面的底部Tab欄的結(jié)構(gòu)，當(dāng)我們隨意打開一個(gè)App時(shí)，你還記得底部Tab從左到右的欄目分別是什么呢？可能經(jīng)常使用的App我們很熟悉，對于不熟悉的應(yīng)用可能就不是很了解。但是我們依然可以從中找到規(guī)律，就是第一個(gè)欄目往往是首頁，最后一個(gè)是我的個(gè)人中心，其他的相對比較模糊。
由此我們推斷出從左往右的順序并不是一二三四依次遞減，而是一三四二遞減結(jié)束處呈上升趨勢。這種秩序不但適用于C端產(chǎn)品的界面設(shè)計(jì)，同樣也適用于B端的界面設(shè)計(jì)。B端產(chǎn)品界面的導(dǎo)航結(jié)構(gòu)第一個(gè)是首頁（工作臺）或最重要的內(nèi)容分類，最后一個(gè)是更多或設(shè)置。同樣遵循以上規(guī)則。
右側(cè)位置重要最典型就是模態(tài)設(shè)計(jì)，在對話框設(shè)計(jì)中，確定和取消按鈕往往把最重要的放置在界面的右側(cè)，這時(shí)位置的排序確定為一，取消為二。
文字段落編排時(shí)更多的需要考慮段落文本的易讀性，當(dāng)你設(shè)計(jì)C端產(chǎn)品時(shí)，因?yàn)槠聊怀叽绲脑驎雎远温湮谋镜男虚L，但在Web、B端設(shè)計(jì)中，行長的定義可以影響到讀者的閱讀效率和體驗(yàn)。
美國芝加哥有學(xué)者做過一個(gè)試驗(yàn)，人的眼睛是在不停地跳動，在跳動的時(shí)候是看不見字的，停下來的時(shí)候才能看見字，而且每次停下來只能看六個(gè)字。所以一段文字不要排得太長，過長眼睛在閱讀時(shí)會很疲勞，在閱讀時(shí)我們更適合閱讀較短的文字。
網(wǎng)頁新聞詳情頁面的行長，我研究了紐約時(shí)報(bào)為640px、華盛頓郵報(bào)680px、Medium680px，所以我們設(shè)計(jì)師可以控制行長最大在640—680px。但是西文和漢字還是有區(qū)別的，站在前人的規(guī)則上去學(xué)習(xí)定義規(guī)則更加重要。
位置的重要秩序其實(shí)是很容易打破的，在界面固定不變時(shí)結(jié)構(gòu)中相對穩(wěn)定，當(dāng)交互大兄弟來了，說我想嘗試改變改變，如圖把手機(jī)的網(wǎng)易云音樂和QQ音樂進(jìn)行組合成組，原來的一二三四的結(jié)構(gòu)就被打破了，變成了一三二的視覺結(jié)構(gòu)關(guān)系。點(diǎn)開組合后，這時(shí)候用戶大兄弟來了，網(wǎng)易云音樂與QQ音樂的排列先后次序取決于產(chǎn)品在用戶心中的重要程度和操作頻次。因人而異，所以大家一定要帶著客觀的心態(tài)去學(xué)習(xí)，不同視角和不同思考維度都會有異樣的結(jié)果。
X軸設(shè)計(jì)從前端的角度就是響應(yīng)式和斷點(diǎn)，因?yàn)檩d體的容器大小不同，前端代碼主要用Media來打斷點(diǎn)，不同斷點(diǎn)之間會定義相對應(yīng)的樣式。內(nèi)容元素按照柵格系統(tǒng)進(jìn)行適配調(diào)整。
物理幾何中心是居中的，但是人的視覺中心是偏上的，有時(shí)候眼見為實(shí)是假的，視錯(cuò)覺中有大量的案例，在色彩和圖形設(shè)計(jì)中需要視錯(cuò)覺的矯正。
如下圖APP的閃屏頁的Logo居中布局，考慮到有向下的重力和視覺中心偏上的理論，往往把Logo居于物理中心上方。
倒金字塔結(jié)構(gòu)是按重要性遞減順序安排消息的一種結(jié)構(gòu)形式。界面展示的信息層級多為倒金字塔結(jié)構(gòu)，重要的信息放上面，越往下信息層級越低。網(wǎng)頁設(shè)計(jì)中還會有折線之上的運(yùn)用，以前人們看報(bào)紙是折疊的，但是為了告知讀書報(bào)紙展示也是有內(nèi)容的，所以折疊設(shè)計(jì)時(shí)看到一些圖片引導(dǎo)讀者打開。
Apple官網(wǎng)的信息層級也遵循倒金字塔信息層級，上方Logo加導(dǎo)航，中間為最新發(fā)布的產(chǎn)品，下方為歷史發(fā)布產(chǎn)品。信息重要層級依次遞減。Apple官網(wǎng)下方露出iPhone的照片來引導(dǎo)用戶滾動下拉瀏覽。
縱向模式是用戶習(xí)慣自上而下滾動來瀏覽更多信息，當(dāng)用戶還未確定目標(biāo)信息時(shí)，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。如圖微信APP的發(fā)現(xiàn)界面，用戶會選擇一列一列快速瀏覽直到找到某一目標(biāo)信息后，再橫向?yàn)g覽細(xì)節(jié)。那么問題來了，上文中提到倒金字塔信息層級，重要的信息應(yīng)該放置上方，為什么APP的Tab欄很重要卻放置在界面底部，下文隱喻設(shè)計(jì)中“駕駛艙隱喻”會講到。
X軸與Y軸組合后就形成了一個(gè)平面，所以平面設(shè)計(jì)的理論知識在此次也適用。
當(dāng)我們做界面設(shè)計(jì)時(shí)，為了讓界面的元素統(tǒng)一為一個(gè)整體時(shí)，給他們整體來個(gè)框框就形成了一個(gè)一個(gè)盒子的樣式，這樣更有利于組合信息。典型的設(shè)計(jì)有卡片、列表、模塊化等。
在Dribbble的作品展示中，由于作品圖片展示比例為4:3，為了平衡界面中的元素，常常在四個(gè)角放一些小的相關(guān)元素來平衡畫面。我們來看一下R神的插畫作品中大量使用了四角壓邊的設(shè)計(jì)技巧。
運(yùn)用到界面設(shè)計(jì)中最典型的就是卡片設(shè)計(jì)，比如個(gè)人中心、銀行卡、列表頁面等。如圖銀行卡就采用卡片設(shè)計(jì)，四角放置信息，整體給人簡潔大氣的感覺。
四角壓邊在設(shè)計(jì)中是可以靈活運(yùn)用的，可以把四角壓邊變成三角壓邊，兩角壓邊。如圖當(dāng)四角壓邊的A1、B1與A2、B2位置慢慢移動至重合時(shí)，四角壓邊就變成了兩角壓邊，多用于列表頁。
四角壓邊的本質(zhì)是蹺蹺板原理，通過調(diào)整元素讓界面達(dá)到平衡。蹺蹺板原理本質(zhì)是平衡，需要關(guān)注的是中間的一條水平線。微信列表設(shè)計(jì)中就運(yùn)用了這個(gè)原理來平衡界面。在蘋果的原生設(shè)計(jì)中列表之間分割線是不包含圖標(biāo)且一直切到最后側(cè)。因?yàn)樽筮叺膱D標(biāo)視覺重量大，右邊的重量小，但是通過縮短左側(cè)的杠桿長度并增加右側(cè)的杠桿長度來達(dá)到視覺平衡。這種設(shè)計(jì)技巧在編排設(shè)計(jì)會被大量運(yùn)用。
8點(diǎn)網(wǎng)格理論來源于谷歌Material Design的設(shè)計(jì)語言，4點(diǎn)網(wǎng)格理論來源于蘋果iOS的設(shè)計(jì)語言。個(gè)人還是更加喜歡iOS的4點(diǎn)網(wǎng)格，因?yàn)樵訂挝辉叫。沙尸F(xiàn)的方式越多，可解決的問題方案也越多。8點(diǎn)網(wǎng)格可以理解為最小單位，其他使用的單位都為8的倍數(shù)。8點(diǎn)網(wǎng)格多用于DIV盒子與盒子之間的間距。圖標(biāo)、頭像等固定尺寸的也可以使用8的倍數(shù)。
蘋果和谷歌都是在定義產(chǎn)品系統(tǒng)中的度量單位，西方人一直想定義度量這個(gè)問題，其中最有名的就是勒·柯布西耶的《模度》，他的理論是以西方人的的比例結(jié)構(gòu)來定義規(guī)范，并不能適用于全世界更多的人種比如東方人、非洲人。但是蘋果設(shè)計(jì)團(tuán)隊(duì)發(fā)現(xiàn)世界上所有人類的手指觸摸屏幕大小是一致的，最小為44pt。iOS定義了人類使用觸控屏的基本度量，44pt也是4的倍率，這才是我喜歡iOS的4點(diǎn)網(wǎng)格的真正原因。
讀者在看界面的時(shí)候，眼睛的視線受到畫面內(nèi)容的吸引，就會產(chǎn)生一個(gè)視覺先后的次序，將這些視覺集中點(diǎn)的先后依次連起來，就形成了視覺流導(dǎo)向。 設(shè)計(jì)師經(jīng)常會考慮版面或界面上的文字是否會被閱讀，實(shí)際上很多文字都不會被閱讀，但是可能會被瀏覽。視覺眼動儀可以檢測到人們?nèi)绾螢g覽一個(gè)頁面的，從找到切入點(diǎn)，到了解界面中信息關(guān)注的先后次序，從而調(diào)整界面元素，來引導(dǎo)用戶去關(guān)注重要且有用的信息。常用的視覺流導(dǎo)向有F模式、Z模式、古騰堡圖表法等。
尼爾森F型視覺模型由Jakob Nielsen于2006年提出，他指出用戶在瀏覽界面時(shí)，視線動線會呈現(xiàn)宛如英文字母F的形狀，這種視覺瀏覽模式主要包括以下三個(gè)方面：
根據(jù)尼爾森F模型，我們可以得出幾個(gè)心理暗示：
Z模式是基于用戶從左到右自上而下的閱讀習(xí)慣，用戶首先關(guān)注的上半部頁面的內(nèi)容，依照從頭部的左邊到右邊，再沿著對角線瀏覽下一部分的中部左到中部右，循環(huán)往復(fù)的瀏覽模式。如圖頭條的文本編排從標(biāo)題從左到右閱讀到文本從左到右閱讀。
古登堡圖表法（Gutenberg Diagram）又稱對角線平衡法則（Diagonal Balance），由14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個(gè)象限：
如圖小程序的授權(quán)頁從Logo到允許高亮按鈕就是對角線平衡構(gòu)圖。
Z軸設(shè)計(jì)可分為視覺度層級（單界面）、結(jié)構(gòu)層級（單界面）、產(chǎn)品用戶流程（多界面）。
視覺度層級是根據(jù)界面元素的視覺表現(xiàn)來進(jìn)行劃分瀏覽的先后次序。界面的視覺度表現(xiàn)技法有主體與背景、投影、色彩字重字號等。
界面中使用背景色是讓元素向前進(jìn)，背景色多為灰色且有顏色傾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。當(dāng)背景色為白色時(shí)就需要留白、線條、投影來區(qū)分層級。
界面中使用投影可以增加內(nèi)容的視覺層級，之前追波流行的彌散投影也是為了增加界面視覺層級。谷歌Material Design就是運(yùn)用紙張的物理投影來映射到設(shè)計(jì)系統(tǒng)中。在界面設(shè)計(jì)中使用投影時(shí)要思考這種技巧的保鮮時(shí)長。
色彩最典型的就是App的消息紅色圓點(diǎn)，紅色的波長最長，所以用最突出的紅色來提醒用戶有新動態(tài)。字重是從面積的大小衡量的，標(biāo)題文字常常加字重來提升視覺。在定義組件時(shí)，鼠標(biāo)懸浮、Hover的各種狀態(tài)就是用顏色來區(qū)分，目的是讓用戶操作后有反饋的感知。
界面元素中的結(jié)構(gòu)層級可以分為內(nèi)容層、導(dǎo)航層、遮罩層、彈出層。內(nèi)容層是界面內(nèi)容元素的承載；導(dǎo)航層是位于內(nèi)容之上，位置相對靜止；遮罩層配合彈出層一起使用，又叫模態(tài)層；彈出層屬于輕量化設(shè)計(jì)，比如消息通知、下拉菜單和加載、報(bào)錯(cuò)等狀態(tài)提醒。
如圖模態(tài)對話框是用戶在完成任務(wù)時(shí)，不希望跳轉(zhuǎn)頁面而打斷工作流程，而是用Modal對話框在一個(gè)界面上承載相應(yīng)的操作。對于信息量不大，容器可展示的操作可用模態(tài)對話框。
產(chǎn)品的界面設(shè)計(jì)需要從概念到信息分類到信息架構(gòu)，目的是方便用戶快速的搜索、篩選、辨別出有用的信息。交互設(shè)計(jì)需要學(xué)習(xí)辛向陽教授的交互設(shè)計(jì)五要素：用戶、行為、目標(biāo)、場景、媒介。
產(chǎn)品的Z軸設(shè)計(jì)其實(shí)是從平面（界面）、空間（層級）、架構(gòu)（關(guān)系）梳理出結(jié)構(gòu)關(guān)系，但站在產(chǎn)品層面最重要的是信息與用戶的交互設(shè)計(jì)，關(guān)注用戶旅程地圖中用戶流程。用戶流程需要多界面之間跳轉(zhuǎn)，這就形成了產(chǎn)品的Z軸界面設(shè)計(jì)。
用戶流程是用戶從打開APP到完成任務(wù)關(guān)閉APP的使用全過程，包括了用戶看到什么信息，做了什么事。 疫情期間每天都需要使用隨申辦小程序，用戶流程是打開微信，進(jìn)入到微信首頁，下拉查看常用小程序，點(diǎn)擊隨申辦，查看隨申辦，退出小程序。
根據(jù)用戶流程優(yōu)化體驗(yàn)，用戶流程越短越好，操作流程盡量不超過5步。用戶流程要顧及頭尾，即用戶進(jìn)入到一個(gè)新界面會看到什么信息，用戶成功完成任務(wù)后會跳轉(zhuǎn)到哪里，或顯示哪些反饋信息。這些都是最容易被遺忘的接觸點(diǎn)。
基于用戶的使用場景。以小水查找朋友圈某個(gè)朋友的信息為例，需要思考用戶有哪些場景，如果知道誰發(fā)的，就會先通過找到人，然后進(jìn)入其朋友圈找到信息。如果忘記誰發(fā)的呢，那只能憑記憶里在朋友圈慢慢滑動，直到找到該信息。
以上從交互設(shè)計(jì)五要素行為和場景對用戶流程進(jìn)行分析，還可以從用戶、目標(biāo)、媒介去思考如何幫用戶高效的完成任務(wù)。拆解用戶方法有用戶畫像分類、北極星指標(biāo)分類、用戶目標(biāo)分類、用戶角色分類、利益相關(guān)者等。拆解媒介的方法有競品分析、頭腦風(fēng)暴、ABTest、埋點(diǎn)數(shù)據(jù)分析等。
上文已經(jīng)講了Z軸相關(guān)設(shè)計(jì)，為什么還要寫XZ軸、YZ軸的設(shè)計(jì)呢，從X、Y、Z、XY、XZ、YZ更有邏輯性和完整性，也確定存在一小部分的案例可以解析。
Banner輪播圖除了橫向的X軸出場次序，還有Z軸點(diǎn)點(diǎn)一對一的當(dāng)前狀態(tài)。移動端受容器大小限制多為Z軸設(shè)計(jì)，Web端容器變大可以變成左右的交互設(shè)計(jì)形式。
導(dǎo)航欄是Z軸的視覺與交互結(jié)合，當(dāng)前狀態(tài)需要重點(diǎn)突出，視覺向前進(jìn)，點(diǎn)擊導(dǎo)航欄后底部的橫線會有動效移動，可以側(cè)滑導(dǎo)航欄選擇類別，這樣效率會更高；也可以側(cè)滑下方內(nèi)容切換選擇。
列表側(cè)滑是使用內(nèi)嵌的布局方式，界面設(shè)計(jì)中用戶習(xí)慣是先查看再操作，當(dāng)容器大小放置不下可先隱藏操作按鈕。QQ聊天界面?zhèn)然瑑?nèi)容可以引用該內(nèi)容。微信消息列表側(cè)滑出現(xiàn)標(biāo)為未讀、不顯示、刪除操作按鈕。
YZ軸多結(jié)合界面交互一起設(shè)計(jì)，通過用戶操作形成Z軸信息架構(gòu)的變化。YZ軸設(shè)計(jì)多用于信息流、鍵盤輸入等
信息流的設(shè)計(jì)多為Y軸設(shè)計(jì)，Y軸急促、緊張的情緒會讓用戶不停的刷信息。信息流設(shè)計(jì)中采用相似的界面結(jié)構(gòu)保持統(tǒng)一，比如固定的頭像位置，固定的操作按鈕位置，標(biāo)題文本形式等。微信朋友圈信息流一整塊一整塊的加載提高閱讀效率；而抖音的視頻流是一個(gè)一個(gè)加載，更注重精準(zhǔn)推送和沉浸式的觀看體驗(yàn)。
鍵盤輸入也是采用YZ軸設(shè)計(jì)方式，不同場景下的鍵盤輸入交互也有差別，微信聊天界面的鍵盤輸入框放置在底部，每次調(diào)用鍵盤組件時(shí)界面會從下往上移動；而朋友圈評論時(shí)，鍵盤組件除了從下往上移動，還要對齊到對應(yīng)評論的內(nèi)容上。前端的定位技術(shù)會有所不同。
界面三重構(gòu)模型中的界面可以替換成交互、前端、容器、用戶、信息等，當(dāng)然也可以替換成桌面端、Web、小程序、APP、B端設(shè)計(jì)等。這樣就可以把中間的要素抽象成N，界面三重構(gòu)模型升級為N——X軸、Y軸、Z軸，N可以為單一的內(nèi)容比如界面，也可以是N=N+N比如界面加交互一起思考。簡化的模型更適合微觀層面的細(xì)節(jié)設(shè)計(jì)，并不適合于宏觀視角的分析設(shè)計(jì)。
我們來舉一個(gè)組件的例子，比如導(dǎo)航設(shè)計(jì)共分為二級導(dǎo)航，我們常規(guī)會顯示出一級導(dǎo)航。一級導(dǎo)航可以從X軸、Y軸兩個(gè)維度去思考，X軸的多為橫向全局導(dǎo)航，Y軸多為側(cè)邊導(dǎo)航欄。當(dāng)交互大兄弟來顯示二級導(dǎo)航時(shí)可以平鋪（XY）、上?。╖）、內(nèi)嵌（Z），二級導(dǎo)航展示方式還需要考慮容器大兄弟的意見，容器夠大就可以選擇平鋪，容器小就展開收起的交互模式，展開就會有上浮和內(nèi)嵌的兩種形式。
模型抽象的N是隨時(shí)發(fā)生變化，對應(yīng)的界面設(shè)計(jì)形態(tài)也會發(fā)生變化，但是X軸、Y軸、Z軸的方法和設(shè)計(jì)技巧是相對不變的。只是你知道或不知道，會用或不會用的區(qū)別。產(chǎn)品設(shè)計(jì)中常用的兩個(gè)方法是等價(jià)設(shè)計(jì)和同形異構(gòu)。
等價(jià)設(shè)計(jì)是幫助用戶完成任務(wù)的結(jié)果是一致的，但過程可能不同，又或者是產(chǎn)品的邏輯結(jié)構(gòu)是一致的，但設(shè)計(jì)的外在形式有差別。
如圖京東購物車的數(shù)量添加減少功能是展示出來的，直接可以添加可減少商品數(shù)量；但是淘寶購物車的數(shù)量是展示結(jié)果，修改商品數(shù)量需要點(diǎn)擊后出現(xiàn)步進(jìn)器組件。這兩個(gè)設(shè)計(jì)形式就是等價(jià)設(shè)計(jì)，等價(jià)設(shè)計(jì)的好壞需要考慮很多因素，用戶、目標(biāo)、場景、手段、行為、容器、信息關(guān)系、生活方式等。存在即合理，合適最重要。
同形異構(gòu)是指不同的信息、數(shù)據(jù)類型設(shè)計(jì)出相同的外在形式。微信消息列表也中有微信廣告助手、服務(wù)通知、訂閱號消息、文件傳輸助手、個(gè)人聊天、群聊天等，這些消息的數(shù)據(jù)類型、對象各不相同，可是外在的結(jié)構(gòu)形式是一樣的，這樣做的目的是簡化、統(tǒng)一，通過圖標(biāo)和頭像來區(qū)分人、應(yīng)用、工具的消息差異。
以上總結(jié)的界面三重構(gòu)相關(guān)知識、理論、技巧都有其使用范圍，那么有沒有一種設(shè)計(jì)方法可以凌駕于界面三重構(gòu)模型之上呢，答案是肯定的，那就是隱喻設(shè)計(jì)。
什么是隱喻設(shè)計(jì)？我們應(yīng)該怎么去理解它呢？隱喻可以理解為隱含的相似性，它用想象的方式將某一物體與另一物體相聯(lián)系，并把二者的特征、情感等相互結(jié)合轉(zhuǎn)移。如果對隱喻設(shè)計(jì)感興趣可以搜索我之前寫過的文章《揭開隱喻設(shè)計(jì)的面紗-你不知道的隱喻設(shè)計(jì)》
隱喻設(shè)計(jì)是通過象征、類比的手法將復(fù)雜抽象的概念簡明化、具象化、降低用戶學(xué)習(xí)使用的成本，為用戶創(chuàng)造清晰、明了、舒適的操作體驗(yàn)。產(chǎn)品設(shè)計(jì)具體表現(xiàn)在蘋果的ios操作系統(tǒng)和谷歌的Material design。
iOS六大設(shè)計(jì)原則：AestheticIntegrity(審美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反饋)、Metaphors(隱喻)、User Control(用戶控制)。
Metaphors(隱喻設(shè)計(jì))當(dāng)一個(gè)app的虛擬對象和動作都是對熟悉事物的隱喻時(shí)（不管基于現(xiàn)實(shí)世界還是數(shù)字世界），用戶學(xué)習(xí)的更快；隱喻設(shè)計(jì)在iOS系統(tǒng)中很好的得到體現(xiàn)，因?yàn)橛脩羰侵苯优c屏幕產(chǎn)生物理交互的。
用戶移動視圖來查看更多的內(nèi)容；拖拽內(nèi)容；切換開關(guān)、移動滑塊并且直接滾動來選取值；甚至可以像翻書或雜志一樣輕快翻頁。
關(guān)于隱喻設(shè)計(jì)還可以用另一個(gè)概念來表達(dá)，那就是心智模型。因?yàn)槿祟悗浊甑陌l(fā)展，雖然科技進(jìn)步很快，外部環(huán)境也發(fā)生劇烈變化，但是人類的心智進(jìn)步其實(shí)是很慢很慢的。
心智模型最早是由蘇格蘭心理學(xué)家蘇珊·凱里在1943年提出的，是指在人們心中根深蒂固存在的, 影響人們認(rèn)識世界、解釋世界、面對世界, 以及如何采取行動的陳見、假設(shè)和印象。心智模型是一種內(nèi)部表征, 但這種表征并不是對外部世界的完全模擬, 具備不正確性和不科學(xué)性等。因?yàn)橛脩粜闹悄Ｐ痛嬖谶@些不足, 所以需要了解其偏差與錯(cuò)誤的來源, 以便今后采取適當(dāng)?shù)拇胧┨岣哂脩襞c系統(tǒng)的交互效率。
在產(chǎn)品設(shè)計(jì)的系統(tǒng)領(lǐng)域，心智模型是指人們對于產(chǎn)品系統(tǒng)的理解，用戶需要了解這款產(chǎn)品是干嘛的、它有哪些功能、這款產(chǎn)品解決了我什么問題、我要如何使用該產(chǎn)品。每個(gè)用戶將具有不同的思維模式，他們對產(chǎn)品或網(wǎng)站的進(jìn)一步體驗(yàn)將逐漸改變和調(diào)整其思維模式。
心智模型其實(shí)是通過學(xué)習(xí)、感悟不斷提升自我認(rèn)知的過程，還記得我剛開始學(xué)習(xí)軟件時(shí)候，如合成軟件Photoshop、三維軟件C4d。當(dāng)我第一次接觸這類軟件時(shí)，感覺整個(gè)人摸不著頭腦，太多的概念都不清楚，比如通道、圖層樣式、曲面建模、打燈光、動態(tài)圖形等。踏踏實(shí)實(shí)的去學(xué)習(xí)這款軟件是最有效的方式，通過不斷的試錯(cuò)和總結(jié)，慢慢的得心應(yīng)手，這樣我們對于軟件的心智模型就會逐漸形成。
但是有些心智是和我們生活方式、習(xí)慣、文化息息相關(guān)的。日本設(shè)計(jì)師深澤直人就提出了一種叫做無意識設(shè)計(jì)的設(shè)計(jì)理念，又稱為“直覺“。其實(shí)在界面設(shè)計(jì)中也存在日常生活與線上產(chǎn)品的映射。所以設(shè)計(jì)師需要有好奇心、有共情、有洞見，才能很好理解設(shè)計(jì)來源于生活這句話。
X軸與Y軸的情緒可以從日常生活中找到答案，星巴克、瑞幸的店鋪使用了X軸的橫向排列，而在肯德基、麥當(dāng)勞的店面排隊(duì)使用了Y軸豎向排列的方式。我們嘗試用抽象思維把它們進(jìn)行圖形化，可以表達(dá)的更加直觀。
星巴克、瑞幸的店鋪使用了X軸的橫向排列，用戶可以看到工作人員不停工作，哪怕需要等待一會也不會很壓抑，整個(gè)體驗(yàn)過程會給人一種舒適、安逸、閑散。而肯德基、麥當(dāng)勞的店面排隊(duì)使用了Y軸豎向排列，會營造一種熱鬧的感覺，因?yàn)槭强觳托枰焖俚氖圪u商品就需要給用戶營銷一種緊張急促的感覺，買完就走的即視感。
通過對日常生活和物理世界的映射，設(shè)計(jì)師在產(chǎn)品設(shè)計(jì)時(shí)可以考慮使用X軸和Y軸的情緒設(shè)計(jì)，比如文本采用橫向排列會給用戶帶來一種平靜、舒適的體驗(yàn)。APP底部的Tab欄橫向排列希望用戶花更多的時(shí)間瀏覽每個(gè)欄目的內(nèi)容，這時(shí)候內(nèi)容的好壞、吸引度也是重要的衡量指標(biāo)。
在信息流的設(shè)計(jì)中大量采用Y軸，因?yàn)閅軸緊張、急促的感覺會讓用戶下意識的快速下滑，比如微信的朋友圈；抖音上滑來切換視頻；直播互動通過大量評論來營銷熱鬧氛圍。
在前文中提到人閱讀瀏覽的順序是從左往右，從上往下的。那么應(yīng)該把重要的東西放置在左邊或者上邊。Tab欄作為APP應(yīng)用的主導(dǎo)航為什么卻放置在界面的底部，這時(shí)候就需要用隱喻設(shè)計(jì)來解釋了。就好比科學(xué)的盡頭是哲學(xué)，哲學(xué)的盡頭是佛學(xué)一樣。
日常生活中開車、騎車，手永遠(yuǎn)是在控制方向和操作，而視線前方就是駕駛員需要瀏覽閱讀的內(nèi)容，比如行人、馬路、車流等。把駕駛艙隱喻映射到產(chǎn)品界面中，底部Tab欄是引導(dǎo)用戶去往哪里，上方動態(tài)變化來滿足不同用戶對不同內(nèi)容的需求。
在線下學(xué)校的教室里，老師提出問題學(xué)生們舉手回答的場景，抽象一層其實(shí)是一個(gè)提問者、多個(gè)回答者的邏輯，是一對多的關(guān)系。知乎問答界面就采用了教室的問答隱喻設(shè)計(jì)，一個(gè)問題多個(gè)回答。
在電影院看電影時(shí)，屏幕在正前方，很多人共同觀看一個(gè)屏幕。其實(shí)也是一對多的關(guān)系。B站的直播界面平臺，也是數(shù)以萬計(jì)的人共同觀看一個(gè)直播，下面的評論彈幕映射電影院的歡聲笑語。
協(xié)同辦公領(lǐng)域，在會議室開會是再尋常不過了，會議室開會時(shí)能同時(shí)看到同事的面部表情，每個(gè)同事都可以投屏進(jìn)行共享會議內(nèi)容。Zoom的視頻會議軟件采用了線下會議隱喻設(shè)計(jì)，Zoom視頻會議支持多人視頻討論，每個(gè)人都可以共享屏幕進(jìn)行實(shí)時(shí)分享內(nèi)容。
互聯(lián)網(wǎng)行業(yè)才短短十幾年，但人類的日常生活卻已經(jīng)演化了幾千年。好的生活方式和習(xí)慣會慢慢的保留下來。當(dāng)設(shè)計(jì)產(chǎn)品時(shí)遇到問題沒有方向時(shí)，不妨停下腳步看看人們在日常生活中是如何運(yùn)作？能不能從生活中吸取靈感。
界面三重構(gòu)給設(shè)計(jì)師提供一個(gè)嶄新視角，相關(guān)的知識、理論、技巧還不完備。設(shè)計(jì)師可以根據(jù)自己的經(jīng)驗(yàn)和閱歷進(jìn)行迭代。從用戶體驗(yàn)五要素的視角去看，界面三重構(gòu)算是從結(jié)構(gòu)和表現(xiàn)層進(jìn)行挖掘設(shè)計(jì)的可能性，偏微觀層面的設(shè)計(jì)。在實(shí)際運(yùn)用中需要結(jié)合用戶、信息、交互、界面、前端、場景、流程等多維度思考。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn