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