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應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出?；疑捌錁硕瓤偸莾A向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非常可行的資源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當你為你的項目創建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性。基本上，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創建慷慨的熱區。當為移動設備設計時，嘗試創建足夠大的可點擊區域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發現他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現一個好的垂直節奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點，用百分數來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式?！比藗儠g覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度?，F實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經常用于內容豐富的網站，通過最小的調整，你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒，但是當過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應該是最優先的。
在ui中使用已建立的圖標，為了避免給用戶造成混淆。在你的設計中添加圖標時，試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑，成為用戶的認知障礙。不要在這些圖標上過于叛逆。
在眾多經過嘗試和測試的設計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程，表明彼此之間的關系，這有助于加快用戶的認知。
4pt基線網格+ 8pt網格=單一網格。當使用類型時，8點網格旁邊使用4點基線
可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4，使用的行高值為4的倍數（16、20、24、28等）
為什么4？我發現在過去使用特定的文本大小時，按8的倍數縮放是不太合適。
減少標題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的，顏色方案快速。當你需要快速將顏色調和到混合中時，可以使用類似的方法。
在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲，從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效，不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產生任何混淆。
養肥了，字體大小為最佳易讀性。當設置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標，避免讓用戶的眼睛疲勞。
試著為你要呈現的內容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當內容與他們交談當它不是。正確的字體選擇是至關重要的，使您的內容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救?？偸亲層脩袅私馇闆r，即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循，并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
藍藍設計的小編 http://www.syprn.cn