設計師需要每天解決問題，找到合適的解決方案需要深入研究和精心策劃的測試。我們可能還沒有答案，但我們確實知道我們有時可以采取的某些捷徑。
“啟發式”是一種簡單而有效的規則，可以幫助我們形成判斷并做出決策。我們可以將它們視為UI最佳實踐的一般指導原則。
注意：這些規則有其時間和地點，并不能替代可用性測試。
我們今天要看看八大黃金法則，對設計會產生哪些影響。
1. 爭取一致性
設計“一致的接口”意味著對類似的情況使用相同的設計模式和相同的動作序列。這包括但不限于在用戶使用中在提示屏幕，命令和菜單中正確使用顏色，排版和術語。
請記?。阂恢碌慕缑鎸⑹鼓愕挠脩舾菀淄瓿伤麄兊娜蝿蘸湍繕恕?
2. 啟用常用快捷方式
說到使用UI規則作為快捷方式，你的用戶也將受益于快捷方式，特別是如果他們需要經常完成相同的任務。
專家用戶可能會發現以下功能有用：
· 縮略語
· 功能鍵
· 隱藏的命令
3. 提供信息反饋
你需要讓用戶隨時了解流程每個階段的情況。這種反饋需要有意義，相關，清晰，并符合上下文。
4. 設計對話以進一步溝通
動作序列需要有開頭，中間和結尾。任務完成后，如果是這種情況，請為他們的用戶提供信息反饋和下一步明確定義的選項。不要讓他們疑惑！
5. 提供簡單的錯誤處理
設計一個良好的界面，應該盡可能避免錯誤。但是當錯誤發生時，你的系統需要讓用戶輕松了解問題并知道如何解決問題。處理錯誤的簡單方法包括顯示清晰的錯誤通知以及描述性提示以解決問題。
6. 允許輕松撤銷動作
在發生錯誤后找到“撤消”選項可以立即解決。如果他們知道有一種簡單的方法可以解決任何事故，那么你的用戶就會感到不那么焦慮，更有可能探索各種選擇。
此規則可應用于任何操作，操作組或數據輸入。它可以從簡單的按鈕到整個操作歷史。
7. 支持內部控制點
定義：
“在人格心理學中，控制源是人們相信他們能夠控制事件結果的程度” - Julian Rotter
為用戶提供控制和自由非常重要，這樣他們才能感覺到他們負責系統，而不是相反。用戶應該是行動的發起者而不是響應者。
8. 減少短期內存過載
我們的注意力有限，我們可以做的任何事情都可以讓用戶的工作更輕松，更好。我們更容易識別信息而不是回憶信息。如果我們保持接口簡單和一致，遵守模式，標準和慣例，我們已經為更好的識別和易用性做出了貢獻。
我們可以添加一些功能，以幫助我們的用戶根據他們的目標。例如，在電子商務環境中，最近查看或購買的項目列表。
結論
雖然你應該始終采用基于啟發式的決策，但遵循一系列規則和指南將引導你朝著正確的方向前進，并允許你在設計過程的早期發現主要的可用性問題。這八個原則適用于大多數用戶界面。
你也可以使用它們作為靈感來創建自己的啟發式方法，或者結合現有的示例來解決你自己的設計問題。
每當我找到一個看起來不錯、干凈且優雅的界面時，我都會保存它！
現在我收集了一千多張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端產品相比，在諸多方面都有所不同。智能手機移動應用的使用環境更為復雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設計出有良好體驗感的應用產品尤為重要。拋開技術因素，無論在交互還是視覺方面做出細節上設計的優化，來提升產品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產品、發出操作命令、完成執行過程最后到接受操作結果，整個操作過程中的每個環節都值得設計師努力優化，減少甚至避免中斷的間隙從而提升體驗感。
公平等級是用戶按重要性處理信息的順序。在界面設計中，就像任何其他形式的設計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結構，頭腦可以對元素進行分組和優先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內容和用戶的成就感。
界面設計中經常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導致混亂并增加導航的工作量。對這些元素進行優先級排序對于避免此問題很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內容。因此，重點應該清楚地說明網站或應用程序的內容。
這種優先次序不僅應被視為美學問題，而且應被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設備中）將與站點導航相關。盡管圖形設計中的層次結構已經存在多年，但恒定的交互因素已添加到UI設計中。用戶與元素交互的事實使設計直觀的界面更加相關。
創建正確的層次結構必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結構背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應用程序的此快照中，標題“ Pawtraits：我們的不斷變化的……”的大小比副標題“我們的真實感受……”大得多。通過將這些分數分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當同時發送兩條消息時，閱讀順序將變得更加困難。這可能不是一個大問題，但是您應該記住，這可能會創建效率較低的層次結構。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設計黯然失色，并使其他信息在閱讀中丟失。像設計中的所有其他內容一樣，平衡是關鍵。
明亮的色彩比柔和的色調更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優先排序或降低優先級。在界面設計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統接收反饋。
在此Cabify應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出。灰色及其標度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非常可行的資源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設計中對象的分組，以創建連接和關聯。當事情接近時，通常意味著它們必須相關。如果事情離得更遠，則意味著它們可能不相關。簡而言之，接近會創建這些關系，并將組織和層次結構帶入信息。
在Airbnb住宿頁面上，標題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創建了層次結構。
元素的對齊對于在界面設計中創建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關性，還可以確定交互式或信息性特定元素的開頭和結尾。
人類的大腦喜歡模式，這就是為什么許多最好的網站都是對稱的。這使我們有機會打破該規則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據它們的對齊或未對齊來關聯這些元素。
重復的樣式給人以元素相關的印象。這種層次結構包括在接口中重用相同或相似的元素。重復還基于視覺模式提供了一些優勢。如果重復某件事，那是因為很重要。
在Uber網站的白色菜單中，圖標和標簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結構的第二位，緊隨主標題“進入駕駛員座位……”。重要的是要知道重復對于創建第二級或第三級信息非常有用。
在界面設計中，重復會在整個體驗過程中產生統一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復的樣式標記，粗體的使用和較大的字體大小為用戶提供了基于重復的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產生的注意力就越多。負空間是顯示空白畫布的區域，不僅可以在同一元素的周圍而且可以在同一元素之間和內部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網站設計”的此示例中，數字“ 01”和標題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權重，但應用良好的負空間可以實現平衡，防止其他元素貶值。
盡管有些設計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設計會導致界面飽和，并且沒有層次結構指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創建層次結構的一種優雅資源，而且還可以為設計提供支持結構。也就是說，它創建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結合了其他重要的設計元素，例如風格和氛圍。
UI設計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導致不必要的壓縮。紋理往往會與其他分層資源（包括大小）重疊，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設備屏幕上看到的所有內容。同樣，平衡是關鍵。
當設計沒有清晰的視覺層次時，用戶的導航將被迫進入其他形式的閱讀，例如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妹帶你一起來看看界面切圖標注，我們下期再見！
圓形元素在界面設計中被廣泛運用，從常見的圓形圖標到圓形的頭像，又或是圓形的輪廓形狀。圓形是一種特殊的形狀，它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此，在使用圓形元素設計界面時會有一些注意事項。
一、圓形頭像
放眼望去，圓形頭像已然占領了我們的手機。不妨看看下面舉的這些例子，如下圖所示。
從左到右依次是搜狗地圖、QQ、Instagram。當然，還有很多其它的例子，就不一一列舉啦。此刻，肯定有同學已經按耐不住要跳出來反駁了，微信和Facebook就不是圓形頭像，不信你看下面兩張圖。
方與圓之間，孰對孰錯，請繼續看下文分解。
1.用戶使用頭像的目的
不管是圓形頭像，還是方形頭像，其歸根結底都是頭像。用戶使用頭像的目的，主要是作為個人身份的象征。區別于其他用戶的特征有很多，例如用戶名、用戶ID、用戶頭像。在這些備選項中，頭像最便于快速識別和記憶，尤其是帥哥美女。
除此之外，還有一部分通過頭像來彰顯自己的個性，例如美女通常會使用自己的性感自拍作為頭像來表現自己的魅力，又或是使用卡通人物或形象作為頭像來表現自己的藝術氣息，再或是使用萌寵作為頭像來表現自己的愛心或是呆萌。
2.用戶使用什么照片作為頭像
隨著智能手機的越來越普及，人們拍攝照片的門檻也變得越來越低，越來越多的用戶使用自拍的照片作為頭像。照片的內容五花八門，例如人物、風景、花草、寵物。即使是正常的人物照片，背景中也會摻雜著很多其它的元素，例如下圖所示。
第一張照片中人物背景雖然虛化了，但背景仍然很凌亂，一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角，豪車才是真正的主角，這類型的自拍照不再少數。第三張照片人物拍攝的光線陰影錯亂，故意露出一線背景內容，其用意如何昭然若揭。此外，用戶手機的好壞、拍照水平也不一致，拍攝出的照片質量也參差不齊。
使用這些照片作為頭像時，人物不但不被突出，反而被弱化了。雖然智能手機屏幕越來越大，但是當頭像集體在界面中展示的的時候，每個頭像依然較小。
3.方形頭像和圓形頭像的區別
方形頭像和圓形頭像的區別可以用兩張對比圖來說明，如下圖所示。
左圖是方形頭像，右圖是圓形頭像。通過對比，可以發現以下幾點：
a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現人物特征，但是干擾信息較多，例如背景中的燈光、門柱、屏風。對比之下，右圖更為清晰地展示了人物的臉部特征，例如錐子臉、美瞳、假睫毛。在前面的分析中也提到，手機拍攝的照片質量參差不齊。在這種現實情況下，圓形頭像更有利于忽略照片的背景，提高頭像的識別效率。
b、嚴格意義上講左圖并不能稱之為頭像，而更應該稱之為照片。原因很簡單，頭像嘛，自然應該以展示“頭”為主，而左圖中頭像只占畫面四分之一不到的區域。從這個角度來說，顯然右圖更為合適。在選擇照片作為頭像時，如果是圓形，用戶更愿意選擇臉部的照片作為頭像；如果是方形，用戶則相對更隨意，通常是全身或是半身照。不信，你可以打開自己的微信，看看自己的好友頭像，或者往前滑滑看看前面的配圖。
c、日常生活中，我們看到的大多數相框都是方形的，圓形的相框較少，這是因為大多數照片都是方形的。因此，使用圓形的輪廓來表現頭像，能夠快速地和照片區分開來，更加突出。
當然，使用圓形的輪廓作為頭像，還有一些其它的原因，例如技術上的進步。
早期由于CSS等技術的不成熟，圓形、圓角圖形的處理非常麻煩，現在變得容易很多。
二、圓形的icon
在APP的UI設計中，我們會經常看到一排排圓形的icon，例如下圖所示。
上圖中，前面兩個分別是美團和淘寶。在設計上，都有兩行橫排的圓形圖標。最后一張圖是搜狗地圖的服務tab頁，可以發現也有縱向排列的一溜圓形圖標。
在這里，要回答兩個問題：
1.為什么要用圓形？
2.為什么要用圓形而非矩形？
第1個問題很方便回答。每個功能入口的圖標都不相同，如果去掉圓形輪廓，勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體，加上圓形之后就能夠弱化圖標的差異性，讓其變得更加規整，看起來也更加清爽，整齊劃一。同時，在功能上也表明各個圖標之間的平等地位，不會因為某個圖標形狀特殊而有所偏袒。
在回答第2個問題之前，首先回歸圓形和方形的基本特征，
圓形：動，曲線，運動，靈動，流動
方形：靜，直線，規則，嚴肅，理性
圓形和方形比起來，顯得要靈動很多，不至于那么呆板、嚴肅。如此，不難理解為什么用圓形而非矩形。
其次，圓形能夠使圖標在方形頁面中脫穎而出——不覺得這幾個圓形圖標在頁面中非常突出搶眼么？原因嘛，很簡單。我們的手機屏幕大多是方形的，界面中的大多數元素也是方形的，這時候用一點少量的圓形，自然在界面中形成焦點，這一點在后面的分析中還會見到。
除了這種形式之外，還有一些單個的圓形圖標浮于頁面底部，通常執行的是返回至頂部的操作。
圓與方就像太極中的陰與陽，相生相克，而又生生不息。巧妙地將圓形與方形進行結合，能夠讓頁面變得生動活潑的同時，也能夠更好實現功能上的引導，如下圖所示的幾個案例。
第一幅圖是谷歌手機地圖，地點右上角的出行方式圖標剛好被方形的臨時層一分為二。從功能上來講，出行方式是下一步的行為，不屬于臨時層里的內容，因此置于右上角的位置是比較合適的。從UI角度來說，圓形與方形結合，使的圓形變得更加突出顯眼；同時圓形置于右上角，頁面也不那么死板，反而讓頁面變得生動、活潑起來。
第二幅圖是宜人貸，微微鼓起的弧度讓這個理財項目變得十分突出，同時也打破了頁面沉悶的布局。
第三幅圖是kitchen stories，整個頁面保持左右居中，作者的頭像居中現實，對頁面進行了分割的同時起到了承上啟下的作用。
在頁面設計中，圓形元素通常不是獨立存在的，而是和其他元素相生相息，相互包容。尋求好的視覺效果的同時，也要弄清楚頁面元素之間的相互關系，這樣產出的設計才是真的好設計。
四、圓形的輪廓
結合現實物體，借用圓形輪廓，打造頁面點睛之筆。還是舉幾個栗子給大家看看吧，如下圖所示。
第一幅圖所示的是網易云音樂的播放界面。圓形輪廓與唱片保持一致，雖然占據了頁面的主要空間，但是使的整個頁面變得文藝簡潔。
第二幅圖所示的是搜易貸的賬戶頁面。可用余額采用瓶裝水的設計，余額較多則水漲的越高，同時會有晃動的效果，栩栩如生的同時讓頁面變得靈動起來。
第三幅圖所示的是樂動力的首頁。步數越多，則描邊進度條越多，暗色變得越暖。與現實生活中的儀表盤相對應，漸變色搭配圓形，使的頁面變得主次分明，極富視覺沖擊力。
可以發現，在使用圓形元素時要注意頁面的平衡，例如左右和上下的對齊居中。為了保證頁面的均衡和清爽，通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。
好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要。卡片式設計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
隨著當今越來越多的信息需要被展示、曝光，而移動設備的屏幕空間又有限，為了減少用戶在使用應用時的跳轉，減少用戶的路徑，設計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達，從二維到三維，這樣更能有效利用手機屏幕上的有限空間，這也是以后界面設計的大趨勢。
這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。（以下簡稱MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的設計規范中，用Depth來說明界面設計中的深度，既而在界面設計中引入了Z軸的設計思維，將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態，定義除了各種信息層級以及常用狀態的表達方式。
再來看看，如今iOS的最新版本iOS 12，也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用：股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。
三維設計法，在界面設計當中，主要分為兩個方向來運用，視覺設計和交互設計。
人們通過雙眼能夠分辨出物體遠近大小的形態，因此如果利用這樣的視覺規律，便可以在畫面中呈現出真實的效果，突出視覺的立體化。
因為使畫面產生三維的模擬真實的效果，可以畫面更具有吸引力，我們之所以能夠看清楚物體，是因為有光的存在，現實生活的影子是因光而產生的，才是一個真實立體形。如果能恰當運用光影的效果，那將會讓圖形在進行三維空間轉換時變得更加凸顯。
當今，在界面的視覺設計方面，通過層疊、卡片化和投影的設計手法來對界面的內容進行處理，可以增加界面的層次感。在如今同質化嚴重的扁平化設計下，能給人煥然一新的感覺，同時也給人一種內容呼之欲出的感覺，加強了點擊的欲望。這樣的設計手法讓界面的Z軸空間得以加強，必將是下一個新的趨勢。
例如：KEEP、潮汐、蝦米音樂
例如：Dribbble 和 Behance
圖片來源于網絡
而在交互設計方面，想同時展示多種內容時，假設對一個需求有著很強的曝光要求，或者是想讓用戶知道有這項內容的存在，但又不想讓頁面內容過長，導致被忽略或難以找到時，可以采用頁面Z軸層級覆蓋的表現形式。
采用了Z軸層級覆蓋的架構形式，用戶主要的交互操作變為上拉、下拉來閱讀信息，減少了點擊跳轉這一類的操作，減少了用戶的操作成本。且滑動手勢，是以后人機交互發展中的一個必然趨勢。
在一些APP中有所表現的有：豆瓣FM、豆瓣詳情頁等。（大家可以從這些APP上獲取設計靈感）
豆瓣FM
豆瓣（電影詳情頁）
例如：
上圖是京東（APP）的商品詳情頁，這時候我們接到的需求是將上圖的文案放進這個界面中。
要知道在寸土寸金的APP界面中，每一個位置都是十分的寶貴，一但放置不佳，就會給用戶的視覺流造成一定的影響，使得用戶體驗下降。況且，還是京東這樣流量巨大的電商APP，位置便顯得更加寶貴，而上圖中的紅色標記范圍就是我們的限制區域，下面我們先來看一個不合理的做法。
上圖我們是直接加了一個界面，將這個模塊設定為可以進行跳轉，從而達到顯示完整（文案）的需求。
這樣做，不僅增加了用戶的路徑，而且還會給來回切換的用戶造成一定的困擾，消耗了手機的資源的同時，下面的留白也顯得很浪費、空曠，視覺上就很不美觀。
那么，京東是怎么做的呢？
京東采用了一個浮層設計（Z軸），將全跳轉改為半跳轉，這便是在界面設計中的Z軸運用，這樣既可以達到文案所要求的曝光，也能最大利用讓界面的空間，實現與原場景的完美銜接。
通過在 Z 軸上進行分層設計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產品設計，將信息更好的淺層化，這樣可以給設計師們帶來更多發揮的空間。
在使用這個思維來做設計時，可以事先考慮以下幾點：
根據用戶使用體驗，來判斷是否需要使用Z軸分層交互。
這樣做是否能幫助用戶更好的理解你所做的設計？
空間感設計主要意義是能正確的引導用戶，并建立起對產品的使用邏輯。
每一個界面層級只需要表現一件事。
當你想要在界面中加入一個菜單欄但發現沒有空間？這時候可以考慮使用Z軸的設計。
謹慎使用Z軸層級交互，因為它會增加空間關系的復雜度。
多參考現實世界中的真實交互，它給你的預期和感受，在互聯網設計中的很多靈感都來自于對真實世界的理解。
總結：
我們在做設計時，可以把當前的界面可以想象成一個的三維世界——分作X軸，Y軸，與Z軸，在這三個坐標軸上，可以進行思維上拓展。
在交互設計當中，減少跳轉便是減少用戶路徑，就是使用各種方法在三維空間中，用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設計思路，讓大家明白，為什么這樣設計，出于什么目的，要解決什么問題，這些正是UI設計的根本所在，掌握了設計思路就能應對各種問題。
接下來本期的分享，依舊會用真實案例解析從需求到設計的完整過程。
接需求與案例解析
我司的運營小姐姐@我要改個產品的UI，下午找我聊需求。
一、準備工作
提前了解產品，從視覺、交互上感受一遍，標記產品中有疑問的地方，這樣大概對產品有個概念，為接下來的溝通做好鋪墊。
二、了解業務
首先需要運營小姐姐講解一下業務邏輯，了解產品涉及到的各種角色，產品使用場景等等，期間把疑問一一了解清楚，盡可能對業務、角色、使用場景有充分的了解。
通過溝通，了解到這個產品是一個H5問卷后臺，業務上用來查看問卷統計的結果，使用的人群是公司的運營人員，產品時常會打包賣給客戶，客戶的使用場景不定，多數用戶會用手機端查看統計結果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時候就要想到她是不是用了其他體驗好的產品，如果是的話，這個產品可能是重要的設計參考，然而了解后并不是因為用了其他產品，是一直以來就不好用，沒時間改而已。
接下來的需求溝通就要落實到頁面中，需要一起探討產品，不明白的地方要了解清楚，從中總結優化的地方。
下面開始案例分享：
第一個頁面改版
上圖為“統計問卷”首頁，A、B、C處為頁面中較為突出的點，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設計上需要弱化。
其實用戶之所以覺得頁面看起來不舒服，是因為想看的元素被弱化，而不該看的卻過度設計，這樣用戶在看頁面過程就會很費神，因為獲取信息要躲開視覺上被過度設計的地方。
例如A處，用了頁面中唯一的橘黃色，當初設計者應該是為了能強化區別上下題目的分界，但也成了突出的視覺干擾項。
其實分析后，頁面中用戶要看的是兩個地方，一個是B處答題的比例數據，另一個是旁邊的“小記”數據量，而B處進度條的設計過于突出，與文字沒有良好的視覺比重。
結合以上問題進行改版：
解決A處問題
把每道題設計為卡片式，這樣能很好的區別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細進度條，與文字視覺比重相當，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內容。
解決C處問題
圖表切換是個弱功能，使用頻率較低，所以放到卡片的右上角弱化設計，用切換的方式展示。
不僅僅是以上的問題，排版的細節也會大大提升產品的質感。
舊版所有元素的排版間距幾乎沒有什么規律，這也是導致用戶對產品有亂糟糟印象的原因。
改進后，用間距去表達元素之間的關系，間距設計常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關的元素用周邊0.5倍的距離表達親密關系。
當設計好第一個頁面后，需要先給到需求方評審，確認沒問題后再繼續，這樣就盡可能保證了后面的設計是符合他們需要的。
上圖只是個最終的結果，過程中做過一些小改動，最初發給需求方設計的頁面，需要做簡單的設計注解，這樣才會更容易被理解，且具有說服力，最終確認沒問題再繼續其他頁面的設計。
第二個頁面改版
上圖是給做問卷的人配置紅包獎品的頁面，看完后我表示心疼我們的運營人員。
A處本可以切換項目，但現在的設計顯然是不可點擊切換的狀態。
B處是這個項目總金額統計，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎品的各個屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關系，排版擁擠。
E處是個“增加獎品”按鈕，現在看起來沒太大問題。
改版后頁面延續了首頁的卡片風格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因為不是確切詞，例如換成“項目切換”“問卷切換”就很容易理解，當然也是可以去掉的，因為運營人員對每個項目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態變化的金額用顏色突出強調，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數量”跟“個數”為重復信息，只留一個即可。
解決D處問題
按鈕“已啟動點擊禁用”拆分為“點擊下線”按鈕，和問卷狀態（進行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎品”按鈕，如果增加配置獎品列表，就會把按鈕擠到不可視區域，這樣的設計不是特別推薦，所以設計成懸浮按鈕，舊版本已經建立用戶的按鈕功能認知，懸浮按鈕上面配加號圖標，用戶就會很容易理解。
第三個頁面改版
上圖還是第二個改版頁面，此次要改版的是，點開“展開”按鈕顯示的屬性，目前的問題是有很多重復的信息，例如時間，上面已經顯示時間，最下面又出現同樣的時間。
最嚴重的問題是，所有灰色字的注釋，不符合邏輯，不應該在展開的屬性下面提示，因為這已經是編輯好的內容，再去提示就意義不大了。
模擬一個場景，比如上圖紅圈的地方，已經設置好了獎品名稱為“幸運紅包”，展開后有個灰色字提示“用戶中獎后，用于顯示給用戶看”，如果發現理解錯了，然而在此頁面是不可以改正的，所以灰色字應該在“新增獎品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進后，去掉重復的屬性信息，去掉灰色字的提示，（去掉這些內容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個頁面改版
當我看到這個頁面時，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發人員提供便捷查詢，例如這個中獎者存在刷紅包行為，可以通過A處的信息進行查詢。
很顯然這并不合理，因為對用戶來說沒有用，還造成了認知負擔，如果存在不良行為，提供編號信息就可以搞定了。
B處的設計，讓頁面沒有條理，更是一個信息干擾項。
頁面改進后，依然沿用首頁卡片式的設計，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因為答問卷一般不會獲取到用戶昵稱。
“中獎”和“未中獎”卡片，設計上有明顯的視覺比重差異，去掉未中獎的綠色標示，只突出中獎者。
最后一個頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個不合理的“確定”按鈕，原因是用詞錯誤，應該叫“關閉”更合適，因為這個頁面是查看信息，并沒有執行某些任務操作。
改進后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因為太占面積，改為右上角“關閉”按鈕。
最后
當我們看到一個頁面時，如果只看到美與丑，那是不客觀的，這可能是對UI設計最大的誤解，UI的美不只體現在表面上，還有內在的體驗中。
UI設計一般都會帶著一種目的進行設計，目的絕不只是設計的好看，更多的是創造一個良好的產品體驗，同時能夠助力業務，實現產品價值。
UI設計師對于業務要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業務的熟知，需求的準確拿捏，是你開始設計前最好的基石。
藍藍設計的小編 http://www.syprn.cn