每當我找到一個看起來不錯、干凈且優雅的界面時，我都會保存它！
現在我收集了一千多張UI界面，經過反復的學習、使用或簡單查看后，我認識到了一些共同點： 讓我心動的顏色。
因此，在這里，我想總結一下如何在UI界面設計中創建完美顏色。
顏色就像語言一樣強大。當你遇到一些設計、體驗及交互很棒的app時，回想一下，視覺外觀在很大程度上取決于顏色，顏色總是給用戶第一印象。
那么，什么樣的顏色用在實際產品上可以做什么呢？
顏色可以體現出品牌或產品的基本色調、心情、內涵、概念、品質、價值等作用。有研究表明，用戶僅花50秒就可以在線對你的產品有一個心理評價，并且用戶在最初的產品心理評價中有62％至90％的判斷是基于產品的配色方案。 （請看下圖）
正確的顏色選擇可以更好的支持信息可讀性。此外，它可以極大地提高可用性，例如增強號召性用語、增強導航、刺激直觀的交互，滿足審美需求和視覺解決方案。
總之，要創建一種清晰，和諧的顏色樣式來滿足用戶的需求。 （請看下圖，騰訊新聞利用顏色來做用戶引導及導航引導，利用顏色層級更利于用戶閱讀。）
產品的外觀是影響消費者購買決策的關鍵因素。研究表明，所有產品評估中的90％與顏色有關。
如今，許多公司將“顏色”（尤其是UI設計中的顏色）作為其營銷策略之一。 (請看下圖)
我們不能說一種顏色看起來“不好”，只有錯誤地使用顏色，顏色才可能看起來很糟糕。
假如麥當勞使用灰色和黑色而不是黃色和紅色，你是否還有胃口？用戶看到之后根本就沒有任何胃口了，更不可能達成交易。 （請看下圖）
女人在聚會上穿黑色連衣裙和黑色的唇膏，你是否覺得很奇怪？就不符合用戶對事物的認知顏色了，給用戶困惑。（請看下圖）
可口可樂不再使用紅色的標志改為藍色，你還會喝它嗎？喝進去你的心理上會覺得你是在喝漱口水。（請看下圖）
不同的顏色傳遞出了不同的含義和感覺
方法①：在什么時間用戶在使用你的產品，來確定你的產品顏色，比如晚上、早上、還是凌晨。再比如沉浸式體驗應用晚上都會有深色夜間模式。
方法②：根據你的用戶群體選擇正確的顏色，你的產品是面向那一類用戶，男人、女人、青年、幼兒、老年等這些人的對于顏色的認知是不一樣的，比如幼兒對于顏色的認知是五顏六色，顏色亮度飽和度都偏高的，就像路邊的喜洋洋1元搖擺車孩子都很喜歡。
方法③：根據產品的特性選擇正確的顏色目標。產品的特性及固有特性，比如黃金就是金色的，蔬菜黃瓜就是綠色，天空就是藍色我們不妨用產品的固有色來做設計及產品特性來做設計。
方法④：考慮顏色的心理屬性，色彩對人類情緒和行為的影響在心理學分支稱為色彩心理學。它指出我們的大腦對顏色有反應，而我們通常不會注意到它。當人眼感知到一種顏色時，我們的大腦就會向內分泌系統發出信號，釋放出負責情緒的激素，每種顏色在我們的思維中都有自己的影響力。
紅色：它象征著好和壞的感覺，包括愛，自信，熱情和憤怒。
橙色：充滿活力的溫暖色彩帶給你興奮的感覺。
黃色：這是幸福，陽光，喜悅和溫暖的顏色。
綠色：大自然的色彩帶來平靜和生機的感覺。
藍色：它通常代表一些公司形象。與安全、可靠、科技有關。
紫色：是神秘和魔術的顏色。
黑色：它伴隨著悲劇和死亡，象征著一個謎。同時，它可以是傳統的也可以是現代的。
白色：顏色意味著純凈和純真，以及完整性和清晰度。
為什么要談論藍色？
只需看看你最常用的Apps或網站、Facebook、Twitter、Microsoft，騰訊，菜鳥、新能源、智能設備、丁丁、旺旺、飛書、百度等，你會看到，它們都是基于藍色。
藍色是男人、女人、成人、孩子都喜歡的第一色，藍色就像無處不在，在自然界中我們對藍色的認知度最高，藍色絕對是可以培養用戶信任和接受的安全顏色，藍色是UI設計中顏色的典型示例，如果沒有更好的選擇，我們可以使用藍色。
我們在許多美觀的界面中注意到的一件事是，它們通常在特定主色顏色上具有更深和更淺的變化。 （請看下圖例子）
咱們來分析上面界面3個顏色色相、飽和度、明度的變化。就是我們ps軟件里面取色器的HSB，h是色相，s是飽和度，b是明度。
通過上面的顏色分析，我們可以看出主色色相數值不發生變化還是藍色，我們可以把主色降低明度和增加飽和度，可以使顏色變化更深。通過增加明度和降低飽和度，可以產生更明亮的色彩變化。
環顧我們四周環境空間的變化。每次掃視房間時，無疑會看到顏色飽和度和明度的變化，以及陰影和亮面的變化，作為設計師我們可以從現實中取色。 （舉個例子：看下圖）
總結上面的例子，我們以后在做設計的時候遇到這種純色界面就可以利用主色的深淺變化，設計我們的界面，這種顏色搭配更和諧更美觀更自然。
在進行UI界面設計時，你不能完全擺脫顏色組合。在UI設計中結合顏色很容易，但是如何避免混亂和過載呢？如何擺脫樸素并保持精致？
牢記以下兩個原則：
第一個原則：
60％+ 30％+ 10％的原則是達到色彩平衡的最佳比例。通過培養一個平衡的色彩搭配，整潔，和諧的界面為用戶帶來愉悅感，此比例可以完美地發揮作用。而且，它可以減輕用戶的視線，使其舒適地從一個點移動到另一點。 （舉個例子看下圖）
第二個原則：
這些規則與“黃金（6：3：1）規則”相匹配。這也是避免混亂并在配色方案中保持平衡的好方法。
1）基于“主色”，你可以在色環上創建許多變化的顏色。
有一個竅門：確定主色后，在主色的基礎上添加白色即可得到亮色，添加黑色則暗色。在這里，我建議新手使用單色系方案，很容易把控。 （舉個例子看下圖）
主色系的搭配更容易把控，也更簡潔，視覺信息容易聚焦
2）在令人難忘的時刻展示品牌主色，以增強你品牌的獨特風格。在添加顏色以增強品牌在界面上的效果時，請考慮添加主色的位置、占比、數量，增強你的品牌效應，讓用戶對你的品牌顏色認知度更高。（舉個例子看下圖）
支付寶的藍色大家應該都知道，這是支付寶首頁主色的占比，只要有人給你提起支付寶你肯定會想到藍色，這就是在界面設計里面主色的重要性
餓了么主色數量、占比、位置，增強了用戶對品牌色認知
如果一個元素比另一個元素更重要，則它應該具有更高的視覺重量。這使用戶易于快速瀏覽頁面并區分重要和次要信息。 （請看下圖）
汽車之家運用橘色色塊和藍色色塊來做到信息視覺重量，區分視覺層級，引導用戶重要信息
氧氣app的頂部導航部分，新婚蜜月&內衣知識做了顏色的特殊處理，就是為了在導航部分視覺加重，引導用戶點擊探索
雪球理財app，一鍵添加按鈕更加醒目，大膽的使用主色吸引用戶的眼睛，引導用戶添加自己喜歡的股票
在UI設計中巧妙地使用顏色可以創建漂亮的UI界面，但是創建漂亮的UI界面絕不是最終目標，實現出色的用戶體驗目標，使用戶的生活更快樂才是關鍵。
因此，從UI的顏色選擇和用法的角度來看，設計人員應始終記住該界面應高度可用且清晰，并以用戶為中心來做我們的設計！
1. 前言
隨著科學技術的快速發展和人們生活水平的急速提升，手持移動設備——智能手機、平板電腦等，已經在人們的日常生活中普及起來，特別是智能手機，已經成為幾乎人手必備的產品。人們早已不局限于守著電腦來滿足某項需求，通過智能手機中的APP移動應用，人們就可以獲取或者發布信息，實現聽音樂、購物、導航等功能需求。很明顯，移動應用的內容和互動方式越來越豐富和復雜，它的普及和流行也無疑改變了人們的生活習慣，為人們提供了新的生活方式，同時也促進了APP移動應用程序的流行和發展。然而，移動應用在實際使用過程中卻顯露出許多不足，究其原因在于，早期的移動應用中通常直接將較為成熟的桌面應用直接套用與移動終端上。不可否認，這樣做可以讓桌面應用的成熟用戶較為輕松、快速的使用移動應用。但缺陷在于，沒有考慮到移動應用特有的交互方式和交互環境，導致可用性不高。很顯然，智能手機上的移動應用和PC端的應用產品相比，有其特有的使用特性。只有充分了解移動端應用的使用特性，才能為移動應用的界面設計工作打好基礎。
2. 移動應用的使用特性
2.1 使用場景
與PC端的使用不同，智能手機的使用場景較為多變，幾乎不受限制。使用場所可以是室內或戶外也可以是私人空間或公共場所，例如家、辦公大樓、餐廳或地鐵等。還可以以站著、坐著或躺著等姿態使用。正因為這樣復雜、多變的使用場景，一些問題則不得不在我們的考慮范圍之內。例如用戶在公共場所使用移動應用時，私密性的保證；用戶的使用場景發生變化時，使用的便利性和使用過程中斷的可能性等。
2.2 硬件條件
近年來，為了滿足用戶的使用需求和提升體驗感，智能手機的屏幕逐漸變大，“大屏幕”已經成為現代智能手機的一大賣點。雖然智能手機屏幕有越來越大的發展趨勢，但與電腦屏幕相比，仍是相差甚遠。同時，在復雜多變的使用場景中用戶往往使用單手操作，與電腦的操作相比，控制精度較低，出現誤操作的可能性更大。所以如何在有限的尺寸內，將內容完整且準確的呈現給用戶，尋求功能和需求之間的平衡就成了需要反復思考的問題。
2.3 網絡環境
用戶使用智能手機移動應用的網絡環境目前分為2G、3G、4G、WIFI和無網絡五種。但用戶在使用移動應用時的網絡狀況和較為穩定的PC端網絡條件不同，移動端的網絡環境并不是單一不變的，時常會因為環境的變化而變化。例如，某用戶從家中出發，乘坐地鐵要到某大型商場。其本身使用的手機為3G網絡，但因為網絡在地鐵環境中信號不穩定，偶爾手機會變成無網絡的狀態。當用戶到達大型商場，用戶連接成功商場所提供的WIFI網絡，那么用戶使用移動應用則處于WIFI網絡條件下。所以對移動應用進行設計時應考慮到各種網絡環境的變化。
2.4 使用心態
移動應用作為一種用戶貼身使用的工具，用戶使用移動應用的初衷更多的是有定向和較為明確的需求點。用戶希望打開應用、發布命令后，移動應用能立刻開始運作，完成任務。當操作中斷或不斷失敗，由于智能手機移動應用的使用特性，用戶很難有別的解決出口，大部分情況下，用戶只能是除了等待還是等待。這樣用戶就極易失去耐性，最終放棄操作。很明顯，快速、有效的體驗過程才是用戶需要的。特別是移動應用特殊多變的使用場景和網絡環境，其操作的連貫性與WEB產品相比，顯得尤為重要。
2.5 使用界面
在PC端上操作界面時，可以同時打開多層界面，界面與界面之間的切換轉變顯得較為簡單方便，且PC端的顯示信息較為豐富、充分。而在移動終端上對應用界面的操控就顯然更吃力一些了。在有限的屏幕下，信息的展示更為局限，且實施多界面操作時較為不便，例如想實現從某一界面跳回到之前的某一界面，可能要經歷多重步驟。
3. 移動應用界面設計分析
上述智能手機移動應用的使用特性正是影響和指導智能手機移動應用界面設計的重要因素，由此對智能手機移動應用界面的設計分析可得出一些設計要點，主要包括視覺層面和交互層面的設計要素。
3.1 界面的視覺設計
（1）充分考慮移動端的多分辨率
現有智能手機市場有多種系統存在，例如IOS系統、Android系統等，且不同系統的界面風格和界面交互習慣不同。同時，不同款式的智能手機持有不同的分辨率，而一款移動應用的設計是需要在其在不同系統或不同分辨率下都能適用。這就要求在進行移動應用的界面設計時，要考慮到設計畫面中要表達的信息重點是否在任意分辨率下都能完整清晰的展示出來，設計的界面視覺風格是否與相應系統風格相符合。
（2）對控件的合理安排
由于智能手機的界面展示空間較小和人們對屏幕界面進行操控的精度有限，在常規控件的設計上，應考慮界面大小和用戶的可觸碰范圍以及該控件的重要程度等因素來對控件進行設計。要做到設計出來的控件或圖形易懂且易控。
3.2界面的交互設計
（1）合理精密的界面邏輯關系
智能手機的應用界面在使用時若出現邏輯上的不清晰或錯誤，從而需要退回至之前的某一頁面是十分困難的。其次，由于展示空間的限制，在有限界面上來回尋找某項功能會讓用戶處于十分焦慮的狀態，從而降低產品的體驗感。同時，隨著界面層級的加深，用戶的流失量也會逐漸增加。所以，應用界面的布局和界面的層級有較為合理的邏輯關系，且將用戶使用過程中出現中斷、方便用戶隨時退出、讓用戶對于當下所處的位置有較清晰的認識等方面考慮其中，能使用戶在使用應用時更為順暢，有較高滿意度。
（2）提升使用連貫性
當看見菊花轉或進度條的界面時，我們就知道，界面中的內容正在被加載，我們需要等待。很顯然在這樣的加載頁面前，用戶將下意識將注意力投放到觀察進度條的推進速度上。在復雜的使用環境下，網速變慢和信號變差是經常會出現的情況。當單調、枯燥的加載界面持續時間稍長，會給用戶一種壓迫感。因為用戶沒有辦法進行別的操作，只能傻傻盯著進度條等待，最后除了取消操作，別無選擇。在用戶的潛意識中會形成這款應用本身就是很慢，使用起來感覺不好的印象。而針對這樣的現象，近來很多應用開始有了新的嘗試。從用戶的心理層面出發，在一些細節上做出改善性的設計，提升移動應用的使用連貫性。例如，預加載、框架式加載、利用緩存、使用有趣的動畫效果等達到提升應用使用連貫性的目的。
4. 總結
可見，用戶在智能手機移動應用上的使用較PC端產品相比，在諸多方面都有所不同。智能手機移動應用的使用環境更為復雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設計出有良好體驗感的應用產品尤為重要。拋開技術因素，無論在交互還是視覺方面做出細節上設計的優化，來提升產品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產品、發出操作命令、完成執行過程最后到接受操作結果，整個操作過程中的每個環節都值得設計師努力優化，減少甚至避免中斷的間隙從而提升體驗感。
出色的用戶界面應該遵循人性化的設計原則，基于用戶的思維和工作模式，而不是移動設備的功能和特點。若是界面不吸引人、邏輯不合理，再偉大的APP軟件也不會受到用戶的青睞的，但是一個漂亮的、吸引人的UI不僅能夠增加用戶對APP軟件的喜愛，還能增強APP軟件的功能，從而增加用戶對軟件的粘性。
人機交互界面設計的五大原則
原則一：美學完整性
美學完整性并不是用來衡量一個APP軟件的界面有多好看，而是用來衡量APP軟件的界面與功能是否匹配。例如，對于一個應用來說，會用比較微妙的修飾元素和背景來體現生產性的任務，對于突出的任務則會使用標準的控件和操作行為。這樣的APP軟件會傳達一個清晰和統一的信息給用戶，讓用戶懂得APP軟件的目的。但要是APP軟件在生產性任務上使用了異想天開的元素，用戶就會被這些相互矛盾的信號所困擾。
同樣的，在一個仿真任務的APP軟件里，例如游戲應用，用戶希望一個漂亮的界面來提供更多的樂趣從而鼓勵他們繼續游戲。盡管用戶不期待能夠在一個游戲中完成一個艱難或者是生產性的任務，但他們仍然希望游戲的界面能帶來完整的體驗。
原則二：一致性
APP軟件界面的一致性允許用戶利用他們自身的知識和技能完成APP軟件的過渡。當然，保持界面的一致性，并不是讓你盲目的復制其他的APP軟件，相反的，作為開發者應該懂得利用同類型APP軟件大眾接受的標準和范式來設計自己的應用。
為了確定你的APP軟件是否遵循一致性原則，開發者們應該想想以下幾個問題：
A. APP軟件與iOS的標準是否一致？是否正確的使用了系統提供的控件、視圖和圖標？設計是否符合設備的功能和特色？
B. APP軟件與本身的定位一致么？文本使用了統一的風格了么？一樣的圖標是否代表的一個意思？不同場景執行相同的操作，結果是否符合用戶的預期？
C. 在合理的范圍內，APP軟件與早期的版本一致么？條款和提示是一個意思么？
原則三：直接操作
當用戶操作屏幕上的對象而不是單獨的控件進行操作時，用戶更能理解自己的任務和操作的結果。iOS用戶更喜歡直接的操作行為，因為多點觸控的設備特點。當看到屏幕的對象，直接用手勢進行操作給人一種更為親切的感覺，而且很有控制感，因為沒有了媒介的干預，更多指的是對鼠標的依賴。
舉個例子，用戶可以使用兩指的縮小或放大所要控制的面積就可完成點擊縮放的操作。游戲中，玩家還可以直接與物體互動，直接移動他們。例如，在顯示密碼鎖的游戲中，玩家可以直接通過旋轉操作打開鎖。
在iOS的APP軟件中，在以下的場景中可以使用直接操作：
A. 旋轉或反轉來移動設備來控制屏幕中的對象
B. 利用手勢直接操作屏幕中的對象
C. 能夠直觀的看到操作的結果
原則四：隱喻
當虛擬的物品和操作行為是對現實生活中的物品和操作進行模仿的時候，玩家能夠很快的掌握APP軟件的規則和操作。一個簡單的軟件隱喻是文件夾：在現實生活中，人們把物品放入文件夾中，所以在計算機中，用戶能夠很快的理解這個操作的意思，很快的理解將文檔等文件放入文件夾的意思。
最合適的隱喻應該是不受現實生活的限制。例如，用戶可以將很多內容放入文件夾中，包括音樂、文檔、視頻等，但現實生活中顯然無法做到。
iOS操作系統為開發者提供了很多的隱喻，因為他支持豐富的同行圖像和手勢。用戶可以與屏幕中的物體進行物理交互，很多場景中的交互十分逼真，iOS的隱喻包括：
A. 音樂播放的倒退控制
B. 游戲中的拖拽、彈和刷操作
C. 滑動開關的操作
D. 選擇轉輪做選擇
原則五：用戶控制
注意，APP軟件中，是用來控制操作行為的，而不是APP軟件。盡管APP軟件能夠建議用戶做哪些操作或者警告用戶有危險，但是這顯然對于應用本身是個錯誤，因為這會將玩家推得更遠。成功的APP軟件應該在一味的提示和關鍵時刻做提示之間進行平衡。當對操作行為和控制感到熟悉和可預見的時候，用戶將會明顯感覺到自己對于APP軟件的控制。操作行為越是簡單直接，玩家就能更容易的理解和記住。
文章來源：站酷 作者：pdpcss123_520
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、
BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
公平等級是用戶按重要性處理信息的順序。在界面設計中，就像任何其他形式的設計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結構，頭腦可以對元素進行分組和優先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內容和用戶的成就感。
界面設計中經常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導致混亂并增加導航的工作量。對這些元素進行優先級排序對于避免此問題很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內容。因此，重點應該清楚地說明網站或應用程序的內容。
這種優先次序不僅應被視為美學問題，而且應被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設備中）將與站點導航相關。盡管圖形設計中的層次結構已經存在多年，但恒定的交互因素已添加到UI設計中。用戶與元素交互的事實使設計直觀的界面更加相關。
創建正確的層次結構必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結構背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應用程序的此快照中，標題“ Pawtraits：我們的不斷變化的……”的大小比副標題“我們的真實感受……”大得多。通過將這些分數分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當同時發送兩條消息時，閱讀順序將變得更加困難。這可能不是一個大問題，但是您應該記住，這可能會創建效率較低的層次結構。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設計黯然失色，并使其他信息在閱讀中丟失。像設計中的所有其他內容一樣，平衡是關鍵。
明亮的色彩比柔和的色調更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優先排序或降低優先級。在界面設計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統接收反饋。
在此Cabify應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出。灰色及其標度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非?？尚械馁Y源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設計中對象的分組，以創建連接和關聯。當事情接近時，通常意味著它們必須相關。如果事情離得更遠，則意味著它們可能不相關。簡而言之，接近會創建這些關系，并將組織和層次結構帶入信息。
在Airbnb住宿頁面上，標題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創建了層次結構。
元素的對齊對于在界面設計中創建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關性，還可以確定交互式或信息性特定元素的開頭和結尾。
人類的大腦喜歡模式，這就是為什么許多最好的網站都是對稱的。這使我們有機會打破該規則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據它們的對齊或未對齊來關聯這些元素。
重復的樣式給人以元素相關的印象。這種層次結構包括在接口中重用相同或相似的元素。重復還基于視覺模式提供了一些優勢。如果重復某件事，那是因為很重要。
在Uber網站的白色菜單中，圖標和標簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結構的第二位，緊隨主標題“進入駕駛員座位……”。重要的是要知道重復對于創建第二級或第三級信息非常有用。
在界面設計中，重復會在整個體驗過程中產生統一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復的樣式標記，粗體的使用和較大的字體大小為用戶提供了基于重復的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產生的注意力就越多。負空間是顯示空白畫布的區域，不僅可以在同一元素的周圍而且可以在同一元素之間和內部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網站設計”的此示例中，數字“ 01”和標題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權重，但應用良好的負空間可以實現平衡，防止其他元素貶值。
盡管有些設計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設計會導致界面飽和，并且沒有層次結構指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創建層次結構的一種優雅資源，而且還可以為設計提供支持結構。也就是說，它創建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結合了其他重要的設計元素，例如風格和氛圍。
UI設計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導致不必要的壓縮。紋理往往會與其他分層資源（包括大?。┲丿B，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設備屏幕上看到的所有內容。同樣，平衡是關鍵。
當設計沒有清晰的視覺層次時，用戶的導航將被迫進入其他形式的閱讀，例如F和Z模式。作為設計師，我們可以加強這些模式或破壞它們，以找到更多動態的交流形式。在UI設計中，沒有什么僅僅是美感，而視覺層次結構無疑是我們擁有的指導用戶體驗，重新設計標準并提供直接接口目標的最佳武器。
《一款APP設計的從0到1》這是一篇系列文章干貨，上次U妹講的是關于APP項目立項和預估時間篇，今天U妹來說一下，APP界面設計和iPad界面設計規范。
往期回顧：
這次U妹接著上次的茬繼續，繼續之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
一、項目立項
二、項目預估時間
三、界面設計
四、切圖標注
五、視覺還原
六、上線準備
界面設計篇
我是一名UI設計師，所以U妹這里說的都是從設計師的角度去闡述一款APP從無到有的一個過程中，設計師應該干的事。
目前在行業里，關于APP界面設計規范也是層次不齊，很多都還停留在6的設備和ios 9的系統之上，而現在最新的是iphone 7和iOS 10了（更新換代真的很快），我這里說的是最新的iOS 界面設計規范（Android設計規范，我們下次見）
一、關于設計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。
我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據個人習慣，選擇自己順手的工具就好。
二、設計稿尺寸
在看設計稿尺寸之前，我們先來了解一下APP界面設計構成
界面構成由：布局層、圖文排版層和圖標層。
在iPhone 6還沒出的時候，都是用640x1136 px來做設計稿的，自從6的發布，所有的設計稿尺寸以750x1334 px來做設計稿尺寸
U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設計規范：
iPhone 界面尺寸：
以750x1334px作為設計稿標準尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。
2. 大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。
3. 設計安卓版本時只需做最小的設計調整，提升設計效率。
所以做設計稿事請以750x1334px來做設計稿
在文檔建立參考線是一個很好的習慣，我希望大家也可以養成這個習慣，上下很容易設置，左右我習慣設置24 px的距離，我通過對國內外很多APP就行了對比，總結是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規則，你設置為30 px，也是可以的。
然后就可以開始你的設計了
這里U妹再給大家略過一下iPad的設計規范：
三、圖標設計
iPhone 圖標尺寸：
圖標設計請用柵格化系統進行設計
設計尺寸：1024x1024px，竟可能的采用黃金比例設計
四、關于設計字體
先來看一下字體的歷史演變過程：
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
↓↓↓
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關于字體大小的問題：
頂部操作欄文字大小 34-38px
標題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數。
關于界面設計就說到這里了，好的工作方法才能讓自己事半功倍，你覺得對自己有幫助，那可以借鑒學習我的方法，在具體工作中也要靈活應用，有不足之處或問題也可給U妹留言，下期U妹帶你一起來看看界面切圖標注，我們下期再見！
帳號作為用戶身份在互聯網產品中的投射，是用戶在產品中重要的身份信息。突出用戶個性風格的頭像信息可以促進用戶之間互動社交行為，提高用戶對產品的粘性。
帳號作為用戶身份在互聯網產品中的投射，是用戶在產品中重要的身份信息。我們可以通過用戶的頭像、用戶名、掛件等快速辨識用戶性格興趣喜好等特征。在用戶進行社交時，帳號頭像是最直觀、最快速的了解用戶的方式之一。識別性強的頭像信息可以促進用戶之間互動社交行為，提升評論區活躍度與氛圍感，從而提高用戶對產品的粘性。在百度APP中真實頭像占比較低，讓用戶上傳/拍攝圖片作為頭像，對用戶而言成本較高，并且存在圖片質量和內容監管等問題。因此產品內部的推薦頭像就顯得尤為關鍵。
當前百度APP中默認推薦頭像設計過時，不能滿足當下用戶群體對專屬個人身份標識的訴求。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區氛圍體驗，強化用戶個人屬性身份認知，由此來塑造帳號的真實感。
對默認推薦頭像進行重新設計，如何滿足百度APP龐大的用戶群體是設計中的重點難點。第一是需要滿足用戶不同的身份特征個性訴求，第二是設計需要滿足整體產品設計定位。
在上述前提下我們啟動了百度APP帳號人格化創新設計，進一步滿足了用戶對個性化的訴求，并提高用戶粘性。
一、需求洞察
首先是問題定位，目前僅有30%的用戶自定義真實頭像，相較于競品處于較低的狀態。并且默認頭像設計過時，氛圍感不?，體驗較差。本次目標就是提升用戶真實頭像占比、同時提升百度APP社區氛圍體驗，強化用戶個人屬性認知，由此來塑造帳號的真實感。
二、設計打法
確定目標后，圍繞真實感氛圍營造展開了一系列的發散。以業務、人群、人格三個維度進行切入；分析和探索后發現單純的業務和人群劃分較為局限。為滿足百度APP用戶群體各年齡層、多種性格等的訴求，最終確定為心理學人格方向，以心理學“榮格人格”為理論基礎進行展開。
心理學家榮格定義了人類基礎人格的12個主要類型。每種類型都有自己的價值觀、意義和性格特點，從性格中提取關鍵詞，分別篩選出有共性的、大眾熟知度高的動物形象來匹配12種人格。
三、形象設計
基于人格理論依據開始將動物具像化，經過大量的討論、草圖繪制、篩選和優化。
草圖繪制確定動物形象基礎造型與特征。以天真者為例，為了表現形象俏皮、可愛的特性，兔子一邊耳朵折疊，并且選用圓潤的外觀，搭配臉上的腮紅。通過表情大眼睛，張嘴微笑來表達心理人格。
在繪制的草圖中選取最符合人物性格，并且用戶可以接受的可愛的沒有對抗性的設計。
將選定的草圖在三維軟件中進行模型制作。優化模型布線并制作模型貼圖、燈光、材質，完成三維化制作。通過以上的設計流程完成12種人格的動物形象制作。
為了進一步提高IP形象的影響力，推動更多業務場景的應用。對IP頭像進行身體延展，打造專屬IP團體，進一步符合人格化定位，提升形象辨識度。
四、應用&收益
為了保證用戶選擇多樣性和不同的圈層喜好，除了12個動物形象，還提供了一系列實景拍攝照片，包括風景、藝術、生活、中國風等主題等來滿足用戶需求。
頭像設置頁面優化升級，提升頁面容器屏效。將之前頭像尺寸減小并縮小間距，保證有限屏幕內用戶可以看到更多的頭像。并將頭像以分類形式顯現，方便用戶挑選符合自己喜好的頭像樣式。下方“拍照”和“從相冊選擇”入口樣式更新，突出拍照入口。
42個新增頭像已經在PASS源頭進行鋪設使用，在百度APP產品內、以及PC端PASS注冊環節做了相關的使用引導，保證用戶可觸達新版的頭像。
整套帳號人格化頭像設計完成百度系產品落地應用，助力全系產品提升用戶粘性。
除了百度APP端內場景運用外，還在端外場景提升IP形象影響力。2021年牛年春節推出牛年專享新春紅包。為金牛形象設計專屬新春服飾&場景，打造財神牛形象，以搭配農歷春節時間段，金牛、元寶、祥云相結合突出節日喜慶的氣氛。
帳號人格化頭像上線后得到了良好的反饋，用戶滿意度及推薦度遠超預期，得到了近90%的用戶反饋。同時通過相關的場景推薦綜合提升了百度APP用戶真實頭像占比，并且數據還在持續提升中。
一、提高用戶粘性
帳號頭像是真實用戶在產品中的身份標識，可以展示用戶的個人性格特點、興趣愛好。提升用戶在產品中的辨識度，同時提升用戶互動氛圍，提高用戶粘性。后期還可通過運營和推廣手段，形成具體用戶畫像，達成精準的內容推送。
二、持續供給裝扮資產
帳號人格化形象設計上線后得到了良好的用戶反饋及數據收益。我們會繼續思考IP形象的拓展以及產品中的深度應用。之后IP形象不止單單出現在用戶頭像設置上，會繼續精細化設計完成場景、裝扮等精細化設計。并應用于百度APP首頁皮膚、號主頁背景裝扮、頭像掛件等場景。持續供給百度APP裝扮資產，綜合
提升用戶吸引力&用戶粘性。
文章來源：UI中國 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.為什么這個配色會怪？
我們在畫線性圖標的時候，有時候會用深淺色配合，比如描邊用亮藍色和深藍色，像這種：
我們會覺得很和諧，為什么？雖然他們飽和度、明度不同，但他們有相同的色相，有一定的關聯性。
還有一種情況就是相同明度、飽和度，但是有兩種色相，比如藍綠，藍黃：
我們也都覺得很和諧，為什么？因為有相同的明度、飽和度，他們也有一定的關聯性！
但是如果是這樣兩個描邊配色在一起：
就感覺有些不和諧，就是因為色相、飽和度、明度沒有一項是有關聯的，所以就感覺不太搭。
像下面這位星友做的練習，也是一樣的道理：
這個配色多少有點不太和諧，我們放大一個圖標來展示下，比如這個：
這兩個配色，不論是在明度、飽和度、色相上都沒有關聯，所以看起來有點違和。
我們只要讓它稍微有點相同屬性，就會好很多，比如我們讓兩個顏色的色相有點關聯，都用藍色色相：
再比如讓兩個顏色飽和度有點關聯，都用比較灰的顏色，哪怕色相完全不同，都會比較和諧：
我們在做這種圖標描邊配色時候時候，一定要注意這個內在關聯性的邏輯。
當然，這里說的只是做圖標描邊時候的配色，視覺畫面配色，不在討論范圍。
2.為什么你的圖標看不清？
這個點之前其實有強調過，很多同學在做圖標的時候很糊，像下面這組練習：
其中一個很重要的因素就是投影問題，投影千萬不要加的太重，要和你主體物的顏色區分開，比如我的主體物是藍色：
然后投影也用這個藍色：
那肯定很糊呀，所以我們必須要用一個淡藍色：
直接降低透明度也行，沒有什么操作成本，所以投影千萬別再和主體物黏在一起了。
3.對比就能出來基礎的設計感
很多時候，我們的設計感其實只要做好對比就能出來，比如下面這組信息：
我們做一個大小對比：
再做一個粗細對比：
再做一個深淺對比：
然后再來一個景上添花的樣式對比，就是數字來一個特殊數字：
這其實就算是比較穩的一個效果了。
我們可以看一些界面：
他們里面也是用了這樣的對比，比如大小對比、樣式對比、深淺對比，再來點小圖形等等。
所以，一定要善用這些對比，讓你的設計更有層次，更有沖擊力。
4.平時多積累圖形的布爾運算
平時在練習圖標的時候，大家一定要多積累圖形的布爾運算，以備不時之需。
比如火箭的外輪廓，當頭部比較圓潤的時候，我們可以直接用橢圓來做：
如果頭部比較尖的時候，我們可以用兩個橢圓相交切，然后再切：
像這樣的形狀，我們不僅可以做火箭頭，還可以做魚的外輪廓等等:
還可以做眼睛的外輪廓：
多去聯想，多去實踐，當腦庫存達到一定量，我們就可以得心應手了！
文章來源：UI中國 作者：菜心設計鋪
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是瓷片區
由運營板塊拼接而成，視覺上像一塊塊瓷片，靈活性高。適用于各種運營模式，具有較高的轉化率
卡片布局
瓷片的外容器排版
單行
優點：節省屏效，日常營銷為重點業務留白
缺點：坑位有限，三個以上時營銷氛圍設計受限
左右排列
優點：主次層級清晰，適合作為功能入口
缺點：坑位越多，越影響營銷氛圍；推行者需具備與各業務溝通的能力，協調入口之間的平衡
上下排列
優點：個數不受限，易塑造氛圍感
缺點：高信噪比
圖文排版
瓷片區的常見排版通常用：滿版型、上下分割型、左右分割型、中軸型、傾斜型
滿版型
以圖片為吸引點，充斥整個瓷片區，文本內容居左排版為主，常見旅游、電競、資訊類
上下分割型
版面分為上下兩部分，分別配置文字或圖片，常見上文下多圖的形式，符合常規的閱讀順序，該場景下圖片更易引起用戶興趣，常見電商類
左右分割型
版面分割成左右兩部分，分別配置文字或圖片，常見左文右圖的形式，該場景下，文本偏理性，具有直觀的表述能力；圖片偏感性，輔助文本信息點綴模塊。常見資訊類、產品入口等
中軸型
常見垂直排列，信息更集中有活力
傾斜型
版面主體傾斜排列，常見對角線式形式。能承載更多的信息內容，頁面層級也更活躍
配圖風格
常見類型有兩種：實物與插畫
實物類
優點：識別性高、更直觀、可復用、設計效率高，個性化推薦更精準
缺點：對圖片素材要求較高，個性化服務需要開發資源
插畫類
優點：創意性強、可塑性強、具有趣味性、易形成品牌調性
缺點：抽象圖形不直觀，復用性低，繪制耗時，不易做個性化
Tips：設計師要牢記，設計時思考延展性和平臺風格如何為業務（運營、產品、技術）賦能，但長期影響CTR（點擊率）一定是由業務內容決定，避免背鍋。
文章來源：UI中國 作者：七月七咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前段時間在年終總結會上，產品經理向設計團隊提出了一個問題：怎么證明你的設計是有價值的？如何衡量驗證Ui、UX的設計效果？
很多人都認為，公司的業績取決于產品和運營，和設計師關系不大，甚至有些公司想取消年終績效。那么，改如何判斷設計結果是否好壞，設計產生的影響又該怎樣被量化？
我相信回復肯定是：可以通過數據來找到答案。
但又會有新的問題出現：需要哪些數據可以驗證設計效果？又該怎樣通過數據來判斷設計的效果究竟是好是壞？
滿意度
簡單來說是用來衡量用戶對產品服務和體驗的整體滿意程度。我們都知道，要提高滿意度，要滿足很多個條件，比如產品功能、運行速度等。這里我們分兩個維度，用戶體驗質量和產品目標。
1）用戶體驗質量
用戶體驗指標可以從凈推薦值（NPS）來衡量，凈推薦值意為用戶是否愿意將產品推薦給身邊人的指標。凈推薦值是有一個公式：NPS值=推薦者所占比例-批評者比例。
9-10分（推薦者）：活躍度很高的用戶
7-8分（被動者）：對產品滿意但忠誠度不高的用戶
0-6分（批評者）：對產品不滿意的用戶
還可以通過反饋，來收集功能或界面的問題反饋比例，更直觀的評估用戶操作過程中的感受反饋，來進一步優化迭代。
降低用戶的學習成本也能提高體驗質量，通俗的講，就是用戶對產品接受度和使用成本的高低，更偏向于產品和交互層面。
2）產品目標
簡單來說，就是希望產品上線以后，會達到什么樣的結果。
例如一個列表篩選功能，其核心目標是為了讓用戶在多維度混合排列里找到自己想要的目標群。
當用戶篩選后，找到了想要的信息且進入了目標頁面，說明指標已成功；反之沒找到想要的結果，中斷了操作流程，說明任務失敗。以此為依據，通過是否完成的維度來進行衡量，確定篩選按鈕到任務界面的UV轉化率。
結合上面的用戶體驗質量，來驗證設計需要注意哪些方面，關注哪些數據來達到目的。
活躍用戶數
通常觀察日活（DAU）和月活（MAU）就可以?；钴S用戶數用于衡量產品的用戶粘性，便于了解產品一段時間的用戶情況，了解產品的用戶變化趨勢。
日活（DAU）：一個用戶一天通過相同的渠道多次訪問產品，DAU仍只算一個；
月活（MAU）：在一月內多次訪問產品，MAU仍只算一個。
日活越高，說明有剛需的忠實用戶越多。月活越高，說明新增的用戶越多，但未必是忠實用戶。當然，活躍度的高低也需要根據用戶的停留時長有一定的聯系。如果只是打開產品而并沒有使用，其實這個數據的意義并不是很大。
用戶留存率
一般是衡量產品或功能的新用戶增長程度，對產品或功能的新用戶占比。這對于新產品或新功能特別有用。
提取數據的一般周期為1日、7日或者30日。日留存率通常用來衡量產品粘性；周留存率通常用于判斷產生的忠實用戶數；月留存率通常用于衡量版本迭代的效果。
如果產品做了更新迭代，并且提升了月留存率，而其他變量沒有變化時，說明此次迭代很成功。所以通過留存率可以很直觀的判斷產品的用戶粘性是上升還是下降。同時老用戶的留存率也需要關注，好的更新迭代不僅可以留住新用戶，還可以喚醒“沉睡用戶”。
完成率
衡量流程設計的合理性，通常用于產品中主要任務流程的內容，這里單指設計中操作流程的順暢度。
完成率是產品設計中重要的指標之一，完成率越高，產品的操作體驗就越好。
最后
數據只是有效驗證的方法之一，并不是萬能的。就如調查問卷一樣，都會有一定的局限性和不確定性，數據能明確看到結果，但不能說明具體原因，只能作為支撐來驗證設計師的想法或決定，但無法代替設計直覺、用戶研究和設計可用性。
文章來源：站酷 作者：UX設計幫
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當看到一個產品的視覺效果時，我們通常能很快地判斷出它是吸引人的還是哪兒有點不對勁。但是，很少有人能接著說出來為什么這樣設計的原因。
本文定義了影響UX的5條實用法則：
1. 比例
2. 視覺層級
3. 平衡
4. 對比
5.格式塔原則
遵循以下5條設計法則可以創造出全面周到的視覺效果，推動用戶的參與度并提高可用性。
01 比例
定義：比例原則是指在布局中使用相對大小來展示設計元素的重要性和層級的優先關系。
正確使用此原理最簡單的方式是，最重要的設計元素的尺寸要比不重要的元素大。原因很簡單，大的事物更能引起用戶的注意。在停車場中，當前所在停車區域往往會突出顯示，這樣做的目的是加深用戶的記憶，方便回來取車。
良好的視覺設計通常使用不超過三種不同的尺寸。擁有一系列大小不同的設計元素，不僅能在排版上創造出多樣性，而且還能在頁面上建立視覺層級結構。
確保最大程度地強調設計中最重要的部分，幫助用戶理解如何使用它。例如在Medium中，熱門文章在視覺上比其他文章更大。
02 視覺層級
定義：視覺層級的原理是指在布局中，按照元素的重要性排序來引導用戶的注意力。
視覺層級可以通過比例，顏色，間距，位置和其他各種信號的變化來實現。同時它也控制用戶最終的體驗。如果很難確定頁面布局的具體位置，則很可能是其布局缺少清晰的視覺層級。
要創建清晰的視覺層級結構，請使用2–3種字體大小來向用戶展示頁面最重要的信息?；蛘邔χ匾膬热菔褂妹髁恋念伾珮俗?，對次要內容使用柔和的顏色。在Medium中，標題、副標題、正文具有清晰的視覺層級，文章每部分的字體大小都和其重要性相對應。
比例的大小也可以幫助定義視覺層級，因此可以針對不同設計元素進行各種比例的組合，一般的設計經驗是包含大、中、小三種設計組件。Uber中的視覺層級結構就很清晰。地圖和輸入框對半分開，輸入框上的灰色的背景引導用戶進行下一步操作。
03 平衡
定義：平衡原則是指對設計元素進行滿意的排列和比例設置。當屏幕兩側存在分布相同（不一定對稱）的視覺元素時，就會達到平衡。在設計時元素所占的面積在創建平衡時也很重要，而不僅僅是元素的數量。
平衡的布局可以是：
對稱：元素相對于中心線對稱分布
不對稱：元素相對于中心線不對稱分布
徑向：元素從中心的公共點放射分布
在設計中使用什么樣的布局取決于想要傳達的內容。對稱的布局安靜而穩定，例如The Hub Style Exploration的界面展現了穩定的對稱布局。
不對稱的布局是動態的并且引人入勝，創造了一種活力和動感。Nike的設計布局，顯示出與品牌相稱的具有運動感的不對稱的布局。
而徑向的布局始終將用戶的注意力引向視覺中心，Brathwait手表在徑向上保持平衡，所以注意力立即被吸引到表盤的中心。
04 對比
定義：對比原理別。是指將視覺上不同的元素并列排布，以傳達這些元素不同的功能類別。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
對比原則通常利用顏色來進行分辨。例如，在UI設計中紅色通常代表刪除，而綠色代表同意或繼續。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
通常在UX中說起對比度，我們會想到文字與其背景之間的對比。有時設計人員會故意降低文字的對比度，用來表示不太重要的內容。
但是在降低文字對比度的同時文字的可讀性也會降低，這會導致用戶無法看清文字內容。在Greenhouse Juice的包裝上，瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對比強，可讀性比較好，但是淺色果汁瓶身上的文字幾乎無法識別。
05 格式塔原理
定義：格式塔原理解釋了人類如何簡化和組織由許多元素組成的復雜圖像，通過下意識的將各個部分安排到一個有組織的系統中，而不是將它們解釋為一系列不同的元素。
格式塔原理指出了我們傾向于感知整體而不是個體元素。在NBC徽標中，中間空白處并沒有孔雀，但我們的大腦卻能自動填補空缺的部分，感覺到孔雀的存在。
在Uber的注冊頁面中，字段標簽靠近其相應的文本框，這樣能輕松理解需要在哪些文本框中輸入信息。
總結
除了使某些東西看起來“漂亮”之外，理解和利用這些法則還有助于：
1. 增加可用性。遵循這些視覺設計原則能夠設計出易于使用的頁面布局。
2. 激發積極情感。美好的事物會引發積極的情緒。美學-可用性效應表明，當人們發現外觀上具有吸引力的設計時，可能會對設計的可用性更寬容。
3. 增強品牌認知度。強大的視覺系統可以幫助建立用戶對產品的信任和興趣。
文章來源：站酷 作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn