什么是視覺層次

視覺層次你可以理解為，通過將界面元素進行設計上的區分，引導用戶的注意力，并使用戶的注意力始終集中在頁面的關鍵地方。但是今天沒有一個方法可以一直控制用戶注意力，就像我們今天做設計一樣，不同的產品要用不同的設計手法去設計，才能達到幫助用戶分清主次的作用。

視覺層次不僅僅包含文字有關，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候，除了網站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關于設計層次，希望可以幫助到你。

運用尺寸大小建立層次

▲如上圖插畫的比重很大，在設計這種大的元素時，你的每個元素比例和細節處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確，在看完頁面文字和圖片后，很自然的引導到底部的按鈕，這才能算是一個很引人注目的設計。

運用色彩建立層次

▲Zenly：國外知名產品，在引導頁面設計時候運用紅色按鈕吸引用戶注意，在App主頁面里面，通過深藍色強調選中效果以及Tab.

▲Tiktok：抖音海外版本設計，整體UI部分非常簡單，頁面還是一如既往突出內容為主，所以在整個設計上就通過色彩來強調頁面優先級，比如拍攝，分享，選擇這些核心操作都通過色彩來引導完成任務。

運用文字大小字重建立層次

運用視覺重量建立層次

▲如上圖，選中的黑色視覺重量最重，其次是藍色選中效果，最后是未選中的黑色，視覺重量幾乎我們每一個頁面中都會使用到。

▲headspace這款產品我非常喜歡，將情感化用到了極致，在頁面很多細節地方運用了不同的小橙人在背景上，視覺重量有輕有重，通過不同視覺重量來表達頁面內容，非常巧妙。

▲在列表的表達上，不同視覺重量感受是不一樣的，比如左邊的視覺重量更輕一點，用戶關注圖形同時也去關注文字內容，右邊這個視覺更重，更加引導用戶去點擊功能模塊內容。

▲設計師熟悉的medium官方App設計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側通過淺綠色作為背景強調突出。

▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側付費文章通過行動按鈕引導用戶升級付費。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷  作者：我們的設計日記

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一、項目背景

1. 業務背景

• 3名設計師協同負責APP的設計工作，設計側介入時間晚，周期短，由于是v1.0版本，沒有可以復用的設計組件，從0-1探索設計風格，定義視覺語言。

• 前期每天依賴釘釘傳輸本地設計文件，設計語言不統一，效率低。協作工具不是很理想，后期待優化。

2. 設計背景

• 當我們開始設計系統的制定時，大部分設計師可能都會先去網上找到大廠現成的設計系統，當拿到他們的成品的時候，會把自己的產品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規則和邏輯，只是借鑒他們現成的設計系統，只能了解個大概，知其然而不知其所以然。

• 直接復用其他產品的現有組件庫并不能完美套用在自己的產品上，不能形成自己的產品調性，甚至有些組件不符合自身產品的使用場景。

二、設計規范的價值

1. 設計層面

• 隨著項目開始成熟，設計也需要一套統一的標準，提升設計質量以及設計的一致性。有了規范及標準，輸出才能趨向于穩定，迭代才能有序的進行。

• 沉淀設計資產，使得設計更加持續地輸出價值，減少一次性設計，使設計師不要每天局限在元素樣式設計中，而是可以站在更高的層面上來思考業務與體驗。

2. 開發、測試層面

• 與設計規范同步形成研發資產，避免重復造輪子，保證代碼質量，降低維護和拓展的成本。

• 測試避免重復的無意義走查。

3. 產品體驗層面

• 統一產品體驗，映射品牌心智。

• 規范的制定，能有序統一不同頁面層級的信息架構，視覺表達。用戶在產品終端內，各鏈路、各陣地的體驗是一致的，看到的信息元素，也會有共性的傳達。這些共性的元素，組成了品牌的內核，能夠幫助用戶建立心智。

4. 協作層面

• 降低不同設計師之間以及設計師與開發工程師之間的溝通成本。

• 設計師無需再花精力思考定義新的元素樣式，既能保證統一性，同時通過復用體系，設計師也可以更高的提升效率，釋放一定執行的工作量，可以把更多的精力放在前置思考決策環節，幫助業務、用戶提升價值。

三、設計規范的目標

1. 設計風格一致

不同設計師有不同的設計風格、設計手法，項目有多個設計師協作時會出現不同的設計語言，需要統一產出的設計樣式。

用戶在使用產品時可以感受到統一的設計語言，從而降低用戶的理解成本。

2. 提高設計效率

通過組件庫高效協同工作

3. 建立穩定迭代機制，完善設計流程

版本迭代時，按照設計規范統一設計語言，有不完善之處，和項目設計師討論確定方案，補充規范文檔。

四、如何搭建設計系統

1. 設計原則

對于設計系統而言，在開始的第一步首先要確定一個標準，一個指導原則，在遇到不確定的設計過程中，依靠設計原則來引導方向。   

• 其他產品設計原則

• 有贊：產品原則：產品定義、產品設計、產品研發、產品運營。設計原則：高效、友好、安全

• TED：追求永恒，而不是追求潮流

• Pinterest：清晰易懂、充滿活力、牢不可破

• Airbnb：統一、通用、風格化的、對話式的

• 我們的APP：扁平、親和、簡約

2. 色彩規范

主色

• 采用品牌色紅色，色相根據產品調性有所調整

• 主色色階使用擴展色生成器生成，在開源網站上根據自己的需求調整參數，創建色彩體系。  

• 在制作組件時，將顏色添加 主色、輔助色、中性色為一級分類，例如：01_主色；再添加二級分類，例如：01_主色/red ；三級分類根據顏色飽和度，用x%命名，例如01_主色/red/100%。

• 命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后，將每個顏色轉換成 Symbol，便可統一調用。

輔助色

• 

• 我們不僅需要品牌色來傳遞品牌價值，我們還需要輔助色來組成我們產品體系的顏色搭配，實現不同功能點的視覺呈現。目前編程貓APP輔助色暫定為黑色。

• 對于輔助色的選擇，可以選取了同類色、互補色、對比色三種輔助色系。

• 同類色：

• 色環上相差15-30度的色彩，非常舒適，色彩過渡自然，溫和，給予用戶安心，信任的心理預期。并且于品牌色的色相冷暖性質一致，和諧統一。（將品牌色設置為最中間的點，就可以得到兩個輔助色）如下圖

• 
  

• 互補色：

• 指在色相環上角度為180°的色彩，比如我們最常說到的3組互補色：紅和綠、藍和橙、黃和紫。如下圖：

  
  

• 對比色：

• 沒有互補色那么嚴格，指的是在色相環上角度在120° - 180°之間的色彩，并且理論上來說，互補色應該也是包含于對比色之內的。比如：粉色和綠色就是對比色。如下圖：

• 校正輔助色

• 校正的原則一：色相差值不能超過15近似色的選取，保證色相不超過15，保持統一的視覺體驗。

• 校正的原則二：盡量保持感官明度一致

中性色

• 中性色作為輔助色，也是調和顏色視覺的一種。它本身不帶情感色彩，可中和其他任何顏色，自然界中沒有純黑或者純白的顏色，所以將純黑色降了純度，使之符合感覺舒適程度。中性色也常用于字體的使用，并且以不透明度的形式落地。

• 在中性色組件里，由于文字、背景色都屬于中性色，分別定義了三大類的二級分類，分別BG、Black、Text

功能色

B端產品多用，此處不過多贅述。

3. 字體規范

字體的命名方式為序號_標題類型/字重/對齊方式/字號的層級結構，例如「01_主文字_標題_按鈕文字_正文/加粗/Center/28px」；一級分類定義了五個大類：

• 主要的文字：主文字、標題、按鈕問題、正文；

• 次要文字：副標題、輔助文字、弱標簽字；

• 禁用文字；

• 標簽文字：文本鏈接、功能文字；

• 特殊字體。

4. 柵格系統

我們都知道多數柵格里的間距都采用8/6的倍數，有了8這個基數后其他都很容易定義，但是前期我們2位設計師在設計初期頁面時，1個采用6倍柵格，1個采用了8倍柵格，導致設計稿不統一，浪費了時間修改調整

那具體應該是用6還是8呢？

• Web端常見框架Bootstrap用8為基數，響應式布局更靈活

• 減少出現奇像素偏移造成模糊

• 開發更容易理解的數字8

• 能被最多的屏幕尺寸整除適配

5. 圖標設計

一級分類分為導航類、功能類、系統類三大類，二級分類根據場景和名稱進行細分。前期二級分類用尺寸來進行分類，但是后期討論用尺寸定義尋找某個圖標不夠便捷，如果找「返回」，設計師并不知道這個返回是多大尺寸的，尋找起來就比較費力，所以改成了按照場景分類。

根據圖標形狀，按照方形、圓形、橫向、縱向輸出圖標繪制模版，便于用戶感知到統一的圖標風格，也便于設計師對圖標進行繪制和調整。

6. 通用控件

根據原子理論的定義和命名方式，依次完成對其他通用控件的原子、分子和組織的定義，例如：按鈕、列表、空狀態等，整個過程都是通過 Symbol 的不斷嵌套，最終實現組件庫的創建。

Diolog 彈窗

• 滿足基本組件需求，跟隨文案內容自動適配彈窗高度，按鈕顏色可更換，文案字符樣式可更換

• 使用包含具體動作的動詞，即使不看上下文也可以通過按鈕判斷，而不是使用【確定】、【取消】等寬泛的詞匯。

Default 缺省頁

給用戶提供解決方案，而不是讓用戶自己尋找問題原因

List 列表

• 符合前端-盒子模型

  

• 盒模型是一種描述對象尺寸和間距的方法。它由 4 個組件組成：邊框、邊距、內邊距和元素本身的尺寸。

• 邊框：圍繞元素邊緣的描邊粗細。大多數設計工具不允許這影響整體間距和尺寸。

• Padding：元素邊界與其子元素邊界之間的空間

• 邊距：元素邊界與相鄰對象之間的空間

在做每個模塊時，不僅僅只是把默認的文本/元素制作出來，它的熱區也要讓開發可以理解，按照盒子模型的原理，比如在做List，「單項輸入」文本的行高，整個單元格的高度需要用白底畫出來，明確padding值；與其他元素/設備之間的邊距（Margin）要也表示出來。

五、維護與管理

1. 存儲地址

• sketch cloud云端同步

• 云端管理會有一些較大的優勢。比如更新通知更方便、每次大家訪問，都能下載到最新的規范，維護管理起來也會省事一些。

2. 更新同步

規范的改動性不要過于頻繁，通常半年及1年左右的時間以上，進行一次較大迭代是比較合適的。每次更新以后，需要郵件或者其它形式，周知所有跟規范可能相關的人員。同步的信息主要有  ：

規范本次修改范圍及修改原因；

1. 修改點羅列

2. 優化后的版本號

1. 最新的文件同步

2. 推進變更計劃
   
   
   
   
   藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

   

   
   文章來源：站酷  作者：AmberU
   

   分享此文一切功德，皆悉回向給文章原作者及眾讀者.
   免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
   

   藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務