研究主題：提升動效可用性
研究對象：12條UX動效應用法則
“作為UX/UI設計師，我該如何適當在UX設計中加入動效？”，我總結了一些經驗法則，可以很好地回答這個問題。在過去5年里，我的UI動畫工作室發表的教程，非常幸運可以在40多個國家/地區，以及數百個頂級品牌設計咨詢公司中指導UX/UI設計師們。
研究UX/UI動效超過15年后，我得出了一個結論——其實有12個規律方法來幫助提升UX動效設計。我將這些機會稱為“ 12條UX動效應用法則”，它們可以通過多種創新方式進行疊加和組合使用。
我將宣言分成5部分：
-強調動效的主題；
-實時與非實時交互；
-提升動效可用性的4種方法；
-原理，技術，特性和價值；
-12條UX動效應用法則。
設計人員通常將用戶界面中的運動主題理解為“ UI動畫”（實際上不是），所以我覺得在開始說12條原則前，有必要為大家普及下基礎。
設計人員通常將“ UI動畫”視為是讓用戶體驗更愉悅的東西，實際上并沒有增加太多價值。因此，UI動畫通常被視為UX的后兒子。另外，用戶界面動效，它被認為屬于迪士尼的12條動畫原理范疇，我在自己的《UI Animation Principles — Disney is Dead》一文中進行了反駁。
在我的宣言中，我將證明UI動畫原則與“ 12 UX in Motion Principles”的關系，就像是建筑構造和建筑風格一樣，是各自獨立的。或者這樣理解，一個建筑結構被物理建造后才會實際存在（施工后），但是原則理論卻能指導物理建造。
動畫就是工具，而原則是用來指導工具使用的，因此，原則理論對設計師的影響力更大。實際上，多數設計師經常在UX設計中，將“ UI動畫”視為一種更高級的設計形式。
區分“狀態”和“作用”很重要，UX中的大多元素是靜態的，例如設計組件。用戶體驗中的行為基本上是暫時的，是基于動作的。一個元素是被隱藏的，或正在被隱藏。如果是后者，動效的引入就可以很好地提升可用性。
另外，可以將交互的時間都視為實時或非實時發生。實時是指用戶直接與用戶界面中的對象進行交互。非實時意味著對象行為是事后交互的：它在用戶操作之后發生，并且是過渡的。
這是一個重要的區別。實時交互也可以被認為是“直接操縱”，因為用戶正在直接和界面對象進行交互。用戶使用界面時，界面行為正在發生。非實時交互僅在來自用戶的輸入之后發生，并且具有將用戶短暫鎖定在用戶體驗之外的作用，直到轉換完成。認知這些差異性，會在我們學習12項原則時發揮幫助作用。
這4點代表判斷用戶體驗可用性時的依據：
-預期值
分兩個方面——設計為用戶帶來的感受，以及實際呈現效果。換句話說，作為設計師，我們希望最大程度地減少用戶期望與他們體驗之間的差距。
-連續性
既代表用戶流程，也代表用戶體驗的“一致性”。可以從“內部連續性”（場景內的連續性）和“內部連續性”（構成整個用戶體驗的一系列場景內的連續性）的角度來考慮。
-敘述性
是用戶體驗中事件的線性進展，一系列微妙的變化和動作串聯在一起是，就構成了用戶體驗流程。
-關聯性
指導用戶理解和決策界面中組件之間的關系。
泰勒·韋恩（Tyler Waye）寫道：“原理……是產生各種技術的基本前提和功能規則。無論發生什么，這些要素都保持一致。”我們可以設想一個層次結構，其中“原則”在頂部，“技術”在第二，接下來是“內容”，“量值”在最底部。可以將技術視為把原則實際執行的一種呈現手法，類似于我們常說的“設計風格”。
“屬性”是特定對象的參數，這些參數會被動畫化以創建該技術。這些包括（但不限于）位置，不透明度，比例，旋轉，錨點，顏色，筆劃寬度，形狀等。“量值”是實際的數字屬性值，它們會隨時間變化以創建所謂的“動畫”。
比如，設計一個飛機降落的動效，我們可以使用“模糊原理”，模糊和不透明度調至25px和70％。現在我們有了一些可以使用的工具。更重要的是，這些語言工具與任何特定的原型工具無關。
緩動，偏移和延遲與定時有關；處理與對象關系有關；變換，數值變化，遮罩，疊加和復制都與對象連續性有關；視差與時間層次有關。模糊度，維度和滑動變焦都與空間連續性有關。
發生即時事件時，對象行為符合用戶期望。
所有（實時或非實時）的動效都非常緩和。這種設計輕松搭建了一種自然舒適的氛圍，也有一種連續感。順便提一句，迪士尼將其稱為“慢進慢出”。
左側示例的線性運動，看起來很好像糟糕。第一個示例沒有很強的動效，但呈現出來的也很流暢。以上三個示例都有確切的幀數，并且演示的時間相同，唯一的區別是動效的緩和程度。
作為關注可用性的設計師，除了美學之外，我們還需要多提出質疑，哪個示例更能提升可用性？我在這里介紹的情況是緩動固有的特點。在適當緩動情況下，用戶會感覺動作本身是無縫的并且在很大程度上是不可見的，這是一件好事，因為它不會分散注意力。線性運動明顯可見，并且感覺不完整且分散注意力。
我們再來看右邊的示例，它也不并不是天衣無縫的。實際上，它具有明顯的“設計”感，我們會注意到物體是如何著陸的，但與左側線性運動示例相比，它仍然感覺“更正確”。
我想向您開放的是一個輕松的運動世界。作為設計師，您實際上可以在項目中創建和實現無限的“緩動”。所有這些放松都有自己的期望響應，它們會在用戶中觸發。
引入新元素和場景時，定義對象關系和層次結構。
“偏移與延遲”受迪斯尼動畫原理影響，本例中為“跟隨并重疊動作”。
但是，重要的是要注意，方法雖然類似，但目的和結果卻不同。迪斯尼的《原理》可產生“更具吸引力的動畫”，而《UI動畫》的原理則可產生更多可用的體驗。
這一原則的效用在于，它通過“告訴”用戶界面中對象的性質，預先為用戶設置成功的條件。上面參考中的敘述是頂部的兩個對象是一組，而底部則是分開的。頂部的兩個對象可以是非交互的圖像和文本，而底部的對象可以是按鈕。
甚至在用戶注冊這些對象是什么之前，設計人員就已經通過運動告知這些對象是“分離的”。
Credit: InVision
在上圖示例中，懸浮按鈕（FAB）轉換成了包含三個按鈕的標題導航元素。由于按鈕在時間上彼此“偏移”，因此最終通過“分離”來提升可用性。換句話說，設計人員是在利用時間本身來說（甚至在用戶注冊對象之前）對象是分開的。這可以讓用戶完全獨立于視覺設計，了解界面中對象的特性。
以下是一個示例：
Credit: Jordi Verdu
在上面的例子中，靜態視覺設計告訴我們在背景上有圖標。假設這些圖標都是彼此獨立的，并且做著不同的事情。
圖標被分組為行，并且表現得像單個對象。它們的標題同樣被分組為行，并且表現得像單個對象。動效告訴用戶這些界面元素不是她的眼睛所看到的。在這種情況下，我們可以說界面中對象的時間行為并沒有提升可用性。
與多個對象進行交互時，創建空間和時間層次關系。
這是一項強大的原理，可“關聯”用戶界面中的對象。在上面的示例中，頂部或“子級”對象的“ scale”和“ position”屬性作為底部或“父級”對象的“ position”屬性的父級。
處理對象屬性與其他對象屬性的鏈接，創建對象關系和層次結構。
還可以使設計人員更好地協調用戶界面中的時間，同時與用戶交流對象關系的本質。回想一下，對象的“屬性”包括以下內容：“比例”，“不透明度”，“位置”，“旋轉”，“形狀”，“顏色”，“值”等。這些屬性中的任何一個都可以鏈接到其他任何屬性，以在用戶體驗中創造協同作用。
Credit: Andrew J Lee, Frank Rapacciuolo
在左側示例中，“表情”元素的“ y軸”是圓形指示器，也是“ x軸”的父級。當圓形指示器元素沿水平軸移動時，其“子級”元素沿水平和垂直方向移動（同時被遮罩）。此功能最好可以“實時”互動，當用戶直接操作界面對象時，設計人員通過動效與用戶溝通，將其聯系起來。
創建關聯有3種形式：“直接關聯”（請參見上面的兩個“延遲”示例，“反向”示例，請參見下文）。
延遲和反向
對象實用程序更改時，創建連續的敘述流狀態。
關于運動原理“轉換”中的UX的文章已經很多。在某些方面，它是動畫原理中最明顯和最深刻的部分。
轉換是最容易識別的，主要是因為它效果很突出。我們注意到，“提交”按鈕將形狀更改為徑向進度條，最后再次將形狀更改為確認復選標記。它完整的展示了一個功能，并引起了用戶注意。
Credit: Colin Garven
變換所做的是無縫地將用戶轉換為不同的UX狀態或“是”（如這是一個按鈕，這是一個放射狀的進度條，這是一個復選標記），引導成所需的結果。通過這些功能空間將用戶吸引到了最終目的地。
轉換的作用是將用戶體驗中的關鍵時刻從認知上“分塊”為一系列無縫且連續的事件。這種無縫性可以提高用戶的感知度，留存率和任務成功率。
當量值主體發生變化時，創建動態且連續的敘事關系。
基于文本的界面對象（即數字和文本）可以更改其值。這是那些“難以捉摸的明顯”概念之一。
文本和數字更改非常常見，以至于它們繞過我們，而我們卻沒有給他們帶來區別和嚴謹性，以評估它們在提升可用性方面的作用。
那么，當值改變時用戶會經歷什么？在用戶體驗中，運動中的12個用戶體驗原則是提升可用性的機會。這里的三個機會是將用戶與數據背后的現實，代理的概念以及價值本身的動態性質聯系起來。
讓我們看一下用戶儀表板的示例。
當數字值未進行加載時，用戶看到的數字對象是靜態的。它們就像涂漆的標志，顯示時速限制為55英里/小時。
數字和值表示現實中正在發生的事情。現實可能是時間，收入，游戲得分，業務指標，健身跟蹤等。我們通過運動來區分的是“量值主體”是動態的，而這些量值反映的是該動態價值集中的某些東西。
這種關系不僅會被視覺上包含價值的靜態對象所迷失，而且還會失去另一個更深層次的機會。
Credit: Barthelemy Chalvet, Gal Shir, Unknown
當通過顯示或隱藏對象或組的哪一部分確定實用程序時，在接口對象或對象組中創建連續性。
遮蓋對象的行為可以被認為是遮蓋對象形狀與效果之間的關系。
因為設計師們熟悉靜態設計中的遮蓋，我們有必要同UX運動原理“屏蔽”做區分，因為它是以一個行為動作發生，而不是作為一個狀態。
通過暫時使用對象的顯示和隱藏區域，效用以連續和無縫的方式轉換。這也具有保留敘述流的效果。
Credit: Anish Chandran
在示例中，頁眉變成相冊時會更改邊界形狀和位置，但不會更改內容。既改變了圖像的效果，同時將內容保留在蒙版中——這是個相當巧妙的技巧。這是非實時發生的，是一種過渡，在用戶執行某個操作后即被激活。
請記住，UI動畫原理是暫時出現的，并通過連續性、敘述、關系和期望來提升可用性。在上述參考中，對象本身不變，但也具有邊界和位置，這兩個因素最決定設計的樣子。
當分層對象依賴于位置時，在視覺平地中創建與空間的關系。
疊加層通過允許用戶利用平地排序屬性，來克服非空間層次結構的缺乏，從而提升可用性。為了使飛機稍微降落，Overlay允許設計人員使用運動來傳達與位置有關的對象，這些對象存在于非3D空間中其他對象的后面或前面。
Credit: Bady, Javi Pérez
在左側的示例中，前景對象向右滑動以顯示其他背景對象的位置。在右側的示例中，整個場景向下滑動以顯示其他內容和選項（同時使用“偏移與延遲原理”傳達對象的個性）。在一定程度上，作為設計師，“層次”的概念是如此明顯以至于不言而喻。
當新對象出現和分開時，創建連續性、關系和敘述。
在當前場景中（以及從當前對象中）創建新對象時，以敘述方式說明它們的外觀非常重要。在此宣言中，我強烈主張為對象的起源和離開創建敘事框架的重要性。
簡單的不透明褪色往往無法達到此效果。遮罩，克隆和維度是三種基于可用性的方法，可以產生很棒的使用體驗。
Credit: Jakub Antalík, Jakub Antalík, Unknown
允許用戶在空間上定位自己與對象或場景的關系，而非在視覺層次。
與“蒙版運動原理”中的UX相似，“模糊化”既作為靜態現象又作為暫時現象存在。這可能會使沒有時間思考經驗的設計師（即瞬間之間的瞬間）感到困惑。設計人員通常按屏幕設計或按任務設計。認為遮蔽是被遮蓋的行為，而不是被遮蓋的狀態。靜態設計表示被遮蓋的狀態，引入時間可以使我們了解物體被遮擋的行為。
Credit: Virgil Pana, Apple
從以上兩個示例中，我們可以看到，看起來像透明對象或疊加層的遮擋也是一種涉及時間上多個屬性的交互。各種常見的技術包括模糊效果和降低整體對象透明度，使用戶知道她正在操作的其他非主要內容，即在主要對象層次結構“之后”存在的世界。
用戶滾動時，在視覺平面中創建空間層次結構。
作為運動原理中的UX，“視差”描述了以不同速率運動的不同界面對象。
使用視差，用戶可以在保持設計完整性的同時專注于主要動作和內容。背景元素會為用戶在知覺和認知上“消失”。
Credit: Austin Neill, Michael Sevilla
這對用戶的影響是，在使用期間清楚地定義各種對象關系。前景對象或移動“快速”的對象在用戶面前顯示的“更近”。同樣，背景物體或“移動較慢”的物體也被視為“離得更遠”。
設計人員可以使用時間本身來創建這些關系，以告訴用戶界面中哪些對象具有更高的優先級。因此，將背景或非交互式元素進一步“推后”是有意義的。
當新對象出現和離開時，提供空間敘事框架。
對用戶體驗至關重要的是連續性現象以及位置感。維度提供了一種強大的邏輯方式來克服用戶覺得平庸的體驗。人類非常善于使用空間框架在現實世界和數字體驗中導航。提供空間維度的出現及消失的參考點，有助于增強用戶對于位置的感知。
此外，維度原則克服了視覺平面中的分層悖論，出現在其他對象的“前面”或“后面”。維度以三種方式呈現：折紙維度，浮動維度和對象維度。折紙的維數可以用“折疊”或“鉸接”式的三維界面對象來考慮。
折紙維度示例
由于將多個對象組合為“折紙”結構，因此即使看不見隱藏對象，在空間上仍可以說它們“存在”。這有效地將用戶體驗呈現為連續的空間事件，用戶可以在交互模型本身以及界面對象本身完成操作。
浮動維度為接口對象提供了空間的起源和偏離，使交互模型直觀且具有很強的敘事性。
浮動維數示例
在上面的示例中，維度是通過使用3D“卡片”來實現的。這提供了支持視覺設計的強大敘事框架。通過“翻轉”卡片來擴展敘述，以訪問其他內容和交互性。
維度是一種強大的引入新元素的方法，可以最小地降低突發性。維度系數會讓交互對象具有更模擬真實感。
對象維數示例
多個2D層在3D空間中排列形成真實尺寸的對象，它們的維度是在實時和非實時過渡時刻顯示的。物體維數指使用者在不可見的空間位置上產生對物體效用的敏銳意識。
在導航界面對象和空間時保持連續性和空間敘述。
移動（Dolly）和變焦（Zoom）是電影概念，指的是與相機有關的對象的運動，并且圖像本身在幀中的大小從遠攝到近攝平滑地變化（反之亦然）。
在某些情況下，無法判斷對象是否正在縮放，它是否正在朝3D空間中的相機移動或相機是否朝著3D空間中的對象移動，以下三個示例說明了可能的情況。
圖層是在搖動，縮放還是在移動相機？
將“移動”和“縮放”的實例視為獨立的，因為它們涉及連續變換，并且滿足運動原理中用戶體驗的要求：它們通過運動來提升可用性。
左邊的兩個圖像是鏡頭滑動縮放，而右邊的圖像變焦縮放
多莉（Dolly）是一個電影術語，適用于推進或遠離對象的相機運動（它也適用于水平“跟蹤”運動，但在可用性方面不那么重要）。
Credit: Apple
在UX中，在空間上，此運動指的是觀察者視角的變化，也可能是指在對象更改位置時保持靜態的視角。多莉原理通過連續性和敘述性，來無縫過度對象目標。多莉還可以結合“尺寸原則”，從而獲得更多空間體驗和更多的深度，向用戶傳達當前視圖“前”或“后”的其他區域。
縮放指的是既不是透視也不是物體在空間上的移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導致圖像放大）。這向用戶傳達對象所在“內部”區域的信息。
對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節，比如卡片的排版、文字的排版、各種狀態的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然的去搬運設計，那么時間久了會養成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。
接下來將分享12個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內，對于用戶理解成本比較高，當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統的更新，用戶的操作習慣已經被各大產品培養的非常成熟，并不用擔心用戶無法操作的情況，增加手勢有弊端也有優勢，右圖中手勢增加了用戶首次使用的學習成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。
實際產品中的運用
利用拇指定律把關鍵的操作入口元素等，放置右側提升用戶操作效率。
左側為什么錯？？
左圖中把按鈕放置了模塊左下側，這樣是不利于用戶進行操作，當然如果整個模塊的熱區都是同一個，這樣并沒有什么問題，用戶點擊卡片區域任何位置都能夠完成下一步操作，如果出現一個模塊內存在多個熱區入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法～～
當一個頁面內出現多個相同模塊或者一個模塊出現多個熱區入口時，按鈕點擊區域有限，我們設計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側可以便于用戶在右手操作時快速到達目標，因為國內使用右手的人數遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關定律：費茲定律、拇指定律
實際產品中的運用
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左側為什么錯？？
左圖中理論上并不是錯，我們經常設計表單時都會用的提示話術，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產品時的體驗。
建議正確做法～～
如右圖中，我們設計時可以更改提示的話術，幫助用戶把問題前置，當用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數拆分，讓用戶更好的記憶數字，這樣無論對產品還是用戶都沒有任何損失，反而能降低錯誤頻率。
實際產品中的運用
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規律，以此來提升閱讀效率。
左側為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規律和擁擠，降低了篩選效率，當然如果是模塊區域很小的情況下，可以適當的進行使用。
建議正確做法～～
右圖中我們把文字與輸入區域上下排布，雖然文字長短不一，但依據對齊原則在豎列情況看是具備對齊規律的，有效的提升信息篩選效率。
實際產品中的運用
我們在做系統功能模塊時需要注意添加功能點擊引導，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導。
左側為什么錯？？
我們常見的消息模塊內容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統消息即產品推送的內容，前者基于用戶習慣而言用戶已經沒有使用成本默認是可以進行點擊交互，后者因為部分產品會把系統消息作為展示的形式給用戶，但是有些產品的系統消息卻是可以點擊交互，這就導致了用戶認知上出現了混亂，左圖中像系統通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
建議正確做法～～
當我們在設計時需要注意，若消息列表中存在系統類消息并且可以進行交互，在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數據指標，這種方式也同樣能賦能產品指標。
實際產品中的案例
目前市場上產品幾乎都有深色版本，我們在設計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關系，因此我們在做黑色版本時需要注意是否調整飽和度。
左側為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
建議正確做法～～
我們在設計深色版本時可以根據產品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規范。
實際產品中的案例
在設計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導致視覺不統一，以及開發成本增加。
左側為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發中會導致開發成本增加，我們產品一般使用的是系統字體，若使用特殊字體需要讓開發同學添加對應字體包，這樣會導致我們的產品包的內存過大，除非產品中默認一直使用該特殊字體，這樣才有使用的價值。
建議正確做法～～
一般系統字體就能夠滿足我們的設計需求，在UI設計中我們可以通過不同的字體粗細來調整文字層級，這樣能夠保證視覺更加統一，減少產品包大小。
實際產品中的案例
在設計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策
左側為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當用戶在瀏覽頁面中很容易出現困惑，到底需要點擊哪個才能購買預定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產品點擊率。
建議正確做法～～
建議設計類似模塊中時，無論是pc還是移動端都需要對入口進行結構劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
實際產品中的案例
在UI設計中使用圖標時，要保持一致性，確保他們共有相同的視覺風格，相同的重量，填充和描邊。不要混搭。
左側為什么錯？？
可以看到左圖中的圖標并不統一，線性里面摻雜著面性點綴，這在UI設計中嚴重違背了一致性的原則，會導致我們的頁面不夠嚴謹專業。
建議正確做法～～
在設計圖標時，首先要保證圖標風格一致，其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等，不要出現混搭風格。
實際產品中的案例
在設計頁面模塊時，可以多利對比度的方式來體現設計的表現力，鮮明直接的色值能夠直接表達事物的性質以及特點，通過對比，也能夠更加清晰的強調設計中的重點，這樣給用戶的印象會更深刻，同樣會給產品帶來一定的趣味性。
左側為什么錯？？
左圖中單看視覺也沒問題，只是在表現上圖標與背景融入到一塊了，導致視覺表現力較差，在設計中如果符合產品風格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
建議正確做法～～
設計到類似的模塊時我們可以利用對比的關系，以此突出視覺元素，通過顏色焦點引導用戶關注，強化用戶印象同時還能增加頁面的視覺表現力和氛圍感。
實際產品中的案例
在設計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左側為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當出現文字底部區域的圖片相對復雜時便會影響識別，第二種情況當圖片明度過高時文字同樣無法識別，試想一下，一張白色調性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。
建議正確做法～～
在界面設計時如果遇到類似的卡片，建議在文字區域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環境的圖片與文字的重疊，保證基本的閱讀體驗。
實際產品中的案例
UI設計中經常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設置的是17%，此時彈窗內容與頁面內容結構上區分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內容，從而瀏覽彈窗內容，轉變用戶目標，當彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。
建議正確做法～～
右圖中案例我把透明度調整到了37%，我們此時再看彈窗很容易就忽略頁面內容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內容，同時視覺結構上也區分很明顯。
實際產品中的案例
藍藍設計的小編 http://m.gerard.com.cn
