無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。

尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。

頭部區域在哪兒？

在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。

如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。

包含哪些內容與功能？

網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。

那么主要元素通常包括：

• Logo 或品牌標識
• 交互指引
• 標題Slogan
• 導航要素
• 搜索功能

在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。

下面讓我們一起來看看頭部內容設計的一些技巧。

1. 關于尺寸

對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。

因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。

頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。

如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。

2. Logo展現

當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。

Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。

3. 吸頂導航欄

吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：

• 例如長頁面展示、瀏覽內容同時客戶需要導航區總是在視線范圍內。
• 如有滾動信息，不斷提示客戶點擊，則可置頂或置底處理。

可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。

總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。

3. 關于圖片的應用

頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；

高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。

輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。

插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。

4. 視頻或動畫

當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。

△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。

如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？帷Ｒ悦考拘@招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。

當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。

5. 移動端頭部設計

網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。

移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。

移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。

寫在最后

網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。

最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

用戶在操作系統時所看到的頁面框架其實就是系統布局，它是一個產品最外層的框架結構，一般包含了頂部導航、側邊導航欄、面包屑、圖文、卡片、內容等元素。

對于設計師而言，想要了解一個中臺，首先要了解它的系統布局，系統布局是頁面設計的基礎，它與頁面的關系，就如同建筑與地基的關系。日常完成需求時，UI 界面反復的調試頁面寬度與卡片比例會占用我們大量的時間。為了提高工作效率，并且把更多的時間放在業務、視覺創新等方面，我們就應該需要一套完整的布局規范。

對整個公司產品體系而言，內部員工與普通用戶使用的操作系統達到幾十甚至上百個，單一的頁面布局滿足不了各個子項目的使用場景。所以我們從前期的布局框架設計調研到產品業務的特性，定義了中臺界面的幾大類型，并且在我們的設計規范中定義了幾大類型系統布局方式，根據其布局方式定制好柵格，方便日后在各個業務場景中使用，從而能夠保持一致性、并且可擴展，方便快速迭代和維護。

了解布局

1. 布局方法論

視覺層次

對于中臺的 UI 設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在 UI 設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。亨利·亞當斯（Henry Adams）曾經說過：「混沌是自然法則，秩序是人類的夢想」。人們總是喜歡秩序，因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面，當 UI 元素被有序組合和結構化時，人們可以輕松的使用應用程序和網站，并對產品感到滿意，所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上，它觀察到了用戶對相互關聯元素的視覺感知，并展示了人們如何將視覺元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。

蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：

格式塔理論

往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。往宏觀來講當人們感知到一個物體由許多元素組成的復雜對象時，人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。它適用于不同級別的感知，但是視覺部分似乎是設計師設計界面時最能體現價值的部分，這其實就是格式塔理論，格式塔（Gestalt）這個術語來自德語單詞 Gestalt，中文翻譯為「形狀，形式」。

格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：「整體不是元素基因的總和」。官網概括：「在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。

在我們的現實生活中有很多自然規律都遵守了格式塔原則，比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在往同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。

信息框架

剛剛我們也介紹了視覺層級結構和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統布局中需要考慮的內容。信息框架是將信息內容進行組織分層，一個產品的信息框架取決于其特有的業務，他與業務強相關并且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架，形成系統布局的骨架，方便用戶在瀏覽或操作頁面時能夠快速找到重點內容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個線上產品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產品，那么其信息架構也完全不同。

今日頭條屬于門戶類新聞客戶端，主要是生產內容展現給用戶，首先進入到產品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊作為身份門檻，而是直觀的把內容展示給用戶，推送用戶感興趣的內容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗即可，目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以后想要進入下一步操作如：點贊、評論時才會彈出登錄/注冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產品業務屬性來看，今日頭條的布局把重要的內容放入中間，并且占有整個布局的一半大小，其次放在內容兩側；

飛書屬于工具協作類產品，用戶第一次打開產品需要注冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確，所以首頁做成一個功能介紹頁面，作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把「在飛書，享高效」slogan 這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成注冊以后，進入到功能頁面，如右下圖可以看出，其系統布局的模塊分成三份，占面積最大的模塊屬于產品最核心的部分也就是聊天窗口，較重要部分是聯系人部分，最小區域是功能 Tab 部分。

小結

所以對于設計師而言，在設計頁面時必須熟練掌握一些基本設計基礎知識，并且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統布局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的布局基礎。當然布局框架只是整個產品的基礎骨架，在骨架確定之后，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。

2. 布局的設計原則

系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們（使用規范的設計師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。

一致性：對于界面來講，界面中的元素和結構需要保持一致性，如：在使用布局時應當使用一致的網格，基準線和填充，在使用設計元素時配色、圖標、文本等需保持一致。

可適配：布局是可自適應的，根據用戶在不同的設計環境下能夠通過交互動效、界面樣式有效作出極致適配反應。用戶操作后需給出即時反應。

可控性：當用戶看到界面時應直觀有效傳遞內容，如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負擔。

3. 適配方案

在設計過程中，為了減少設計師們的日常溝通和理解成本，在設計內部我們統一了一套設計畫板尺寸為 1280。經過我們官方調研得出在中臺系統中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險的的一個尺寸，在設計頁面時設計師如果能夠在 1280 尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那么設計是合理的。在我們的規范中頁面再小于 1280 時需要吊起系統的橫向滾動條。在中臺系統中考慮到用戶效率問題很少做響應式，所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為 1440 或者 1366 時可能會存在其在畫板中頁面大小正好合適，但是頁面上線以后縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用 1280 寬度畫板畫圖。

4. 框架

首先先分析一下界面框架，我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層，目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層，每一層都具備獨特性，將界面中所有的信息層級提取分類并且按結構屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架，設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級，一個內容模塊都屬于一個容器，容器可以承載各種內容元素。

背景層

背景層樣式固定，在界面中永遠置于界面底部，并且一般會給予背景層中性色，作用是方便突出內容層和全局控制層。

內容層

視圖結構中最核心和復雜的一層，他與業務強相關，內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級內容，基本布局結構有平行結構或者父子結構。如下圖卡片屬于容器，卡片中承載了數據圖表等內容，整個卡片+內容就屬于內容層。

全局控制層

全局控制層我們定義他在內容層之上，屬于頁面第三層級內容，一般在業務場景中對整個網站的控制以及導航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內容層之上。

內容彈層

當前任務或者內容相關的臨時出現層，優先級高于內容層，一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如：Modal（Dialog 各個平臺叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現給用戶。Modal 它包括兩種類型，一種是模態內容層不可操控，被蒙版遮罩禁用，比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態，吊起彈出層后不印象內容層操作。當然，Tooltip、Popover、Notification 都屬于非模態，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了 Popover，在次頁面它的功能就是加以補充說明。

網格基礎

1. 單位

隨著科技高速發展，屏幕分辨率也越來越多樣化對于 UI/UX 設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。

• 「PX」pixel，像素，大多數電子設備成像的基本單元，同樣尺寸的屏幕成像單元越細小、越密集的屏幕，分辨率就越高；
• 「PT」point，點，這個單位，就同時出現在 iOS、CSS、還有傳統的平面設計里，與 px 相比 px 是相對單位而 pt 絕對單位，如在設計稿中如果導出一倍圖 1px=1pt 那么導出二倍圖就是 2px=1pt，它是一個絕對長度，為1/72英寸；
• 「PPI」pixel per inch，每英寸像素數，決定電子設備的物理顯示尺寸，只有涉及到顯示才有意義。該值越高，則屏幕越細膩；
• 「DPI」dot per inch，與PPI一致，唯一區別是它表示每英寸多少點，該值越高，則圖片越細膩；
• 「DP」density-independent pixel，是安卓開發用的長度單位，1dp等于屏幕像素密度為 160ppi 時 1px 的長度，因此dp 在整個系統大小中是固定的。
• 「SP」scale-independent pixel，安卓開發用的字體大小單位，可以認為 SP=DP。

2. 像素密度

在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導致開發實現稿的視覺不符合設計師心理預期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個數明顯小于高密度顯示器的像素個數。

其實像素是與密度沒有關聯，我們簡稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現實相同的尺寸，如圖顯示，紅色網格為像素密度，被放大內容為 UI 元素物理尺寸。

所以我們可以得出，DP 可以自適應屏幕的密度，不管屏幕密度怎么變化，實際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設計的單位。當屏幕的密度為 160 的一個物理像素時，1PD=1PX。要計算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。

3. 網格

關于網格

網格線(Grid Line)，網格線又稱布局分割線，它是構成網格結構的分界線。一般在布局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意，其中橘黃色兩根線分別是行網格線和列網格線。

網格軌道(Grid Track)，兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。

網格單元格(Grid Cell)，兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬于網格單元格。這是網格系統的一個「單元」。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。

網格區域(Grid Area)，由單個或多個網格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網格線和列網格線交叉處即是網格區域。

網格設置

在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規范，網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統，設計師可以為自己創建一個結構來適配不同的屏幕寬度。

在我制定的規范中一般會把網格的基數設置為 4，它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備，如中臺系統的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設置網格規范幫助設計師快速搭建頁面，使用有律可循的布局空間的設計給到開發減少溝通成本。下圖所示設計布局網格由三個元素組成：列寬，間距，邊距。

在 Sketch 中設置網格，在菜單欄中找「視圖」-「畫布」-「網格設置」-彈出浮層可設置網格大小，網格設置的基數設置成4，之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割，如下圖：

我們放大頁面局部大家可以看到，把網格基數設置成 4，每個網格單元格為 4*4 大小。同理，如果把網格基數設置成 8 以后，每個網格單元格大小為 8*8 大小。

定義布局模塊

界面框架內系統布局是頁面所有模塊的組合方式，我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過 3 個。經過調研和歸納總結出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。

1. 上下布局

上下布局布局是 Web 端運用最廣泛的布局方式之一，頁面內容區以 feed 流形式展現，一般用在 Web 端官網首頁。設計師普遍做法是對兩邊留白區域為內容區并進行最小值的定義，一般定義值為 1200 較多（具體寬度要設計師如何設置柵格，后面會講到如何設置柵格），當留白區域到達極小超過極限值之后需要對中間的內容區域進行動態縮放或遮擋，此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏布局，內容隨瀏覽器寬度自適應。

其優點是頁面結構清晰簡單，強突出內容區，但缺點是布局的規矩呆板，變化少。設計師如果不注意合理的視覺元素和色彩細節變化，用戶很容易感覺到乏味，此布局適用于層級較為簡單頁面。

巨量引擎（Ocean Engine）是字節跳動旗下的營銷服務品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產品的營銷能力，為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是采用了上下布局作為頁面布局，頂部導航整合了所有子頁面的內容，導航下方為主要內容區并且內容定寬，當時采用此布局原因第一是因為次官網層級較簡單只有三個層級內容，第二是官網更需要的是突出內容區，所有頁面使用次布局更為合適。

2. 左右布局

設計師在設計重內容，輕導航類型網站是常用左右布局作為基礎框架進行頁面設計。此布局把系統頁面分為兩大模塊，其中設計師常見的做法是將左側設置成導航欄模塊并且固定，常常用來控制全局內容。而右側區域設置成工作區域或內容區，內容區可進行動態縮放。

下圖為飛書溝通窗口截圖，由于關系到內部信息保密性我把內容進行了模糊，從外觀結構上看還是能大致了解飛書結構是采用了左右布局，整個布局結構清晰有理也是符合左右布局特點。從交互體驗分析左側屬于導航區，它承載了不同功能并且固定。飛書屬于即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊，而右邊為聊天窗口對于業務屬性分析它更為重要，所以模塊較大。其導航欄固定，內容區可進行動態縮放。

3. T字型布局

T 字型布局常用在 Web 端的中臺系統中，因為中臺系統業務結構復雜、層級多，而 T 字型布局能夠解決復雜結構的問題。使用此結構能夠把頁面結構清晰化，主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局，二左邊設計成是二級導航并且固定導航欄固定，右邊的內區域可進行動態縮放（一般會把其設計成柵格動態區域），內容隨瀏覽器寬度自適應。

下圖是 Material Design 設計文檔，首先簡單介紹一下 Material Design，它是由谷歌的設計團隊創建的一種語言，宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序，其設計理念是將現實中的物理學帶入進設計中。Material Design 設計文檔中的結構使用了 T 字型布局作為基礎布局。頁面分為了三個模塊，其中頂部導航作為頁面一級內容進行全局控制，接下來左邊為側邊導航作為二級內容控制頁面，右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。

4. 小結

以上為 Web 最常見的三大布局，但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景，設計師可以通過整理基礎模塊然后分析其業務的信息框架，將模塊進行相互組合、嵌套歸納可以總結出更多的 Web端布局框架并落地到業務中。

網頁柵格

剛剛在定義布局模塊中已經分析過了三大布局類型，接下要分享的是 UI 設計師更為關注內容「網頁柵格」。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來，它延續了平面設計的方法與風格，在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。

首先網頁柵格系統基本由是柵格總寬度/頁面總寬度（W）、一個柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個單元的寬度（A）、外邊距（M）組成。

1. 列寬

一個柵格的寬度（a），我們稱之為列寬，一個列寬包涵了N個網格單元格（Grid Cell）我們也可以把它看成一個網格區域(Grid Area)，在上面我們已經講到過網格的內容，主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4（原因在網格中也解釋過，如果忘記的同學可以爬樓看下）。由此可見列寬非固定值，這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。

2. 水槽

柵格與柵格之間的間隙（i），我們稱之為水槽，一個水槽寬度大于等于1個網格單元（Grid Cell）。在柵格中水槽為一個定值，寬度可以是N個網格單元，如網格單元格設置成4，那么水槽可以是4、8、12、16…N*4。

3. 柵格單元

1個列寬+1個水槽寬度即一個單元的寬度，一個柵格總寬是由N個柵格單元組成，次寬度不固定，由屏幕尺寸決定。

4. 柵格總寬

列寬+水槽再成以N即是一個柵格的總寬，公式為：W=(A*n)-i。

5. 柵格設置

經過調研我們得出常見的柵格分為 12 列柵格系統和 24 列柵格系統。其中 12 列柵格系統在流行的前端開發開源工具庫Bootstrap 與 Foundation 中廣泛使用，適用于業務信息分組較少、業務結構較簡，單個盒子內信息體積較大的中后臺頁面設計。24 等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。如下圖分別是 12 柵格系統（左）和 24 柵格系統（右）。

6. 小結

在柵格系統結合布局結構和網格做了我做了一些知識結合，其實前面所講的網格版塊和布局版塊都是為柵格做一個鋪墊，利于同學們更加深入的了解網格、布局、柵格三者的關系。

寫在最后

系統布局只是網頁中的基礎部分，但也是核心內容，一個產品布局需要根據其業務屬性決定。布局搭的好相當地基打得好，但是同時在對美感的追求之上，還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發，大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

背景

在 B 端設計領域中，不管是內部用戶、產品、設計師、開發，還是外部產品、設計師等，總能聽到關于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產出多少營業額(營業額/專柜所占總坪數）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內的信息可以帶來多少商業效益/效率提升。

為了探索在 B 端產品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設計探索與實踐。「屏效」專題探索主要以「探索」與「實踐」相結合的方式展開，將實踐過程中反復驗證有效的設計策略沉淀成設計手冊，同步將部分功能進行工程化，確?？梢蚤_箱即用。

探索階段-為誰在何時何地設計

用戶聲音｜不同的故事相似的訴求

面向內部設計師和終端用戶投放的《高屏效訴求》《中后臺產品滿意度調研》問卷中認為提高屏效能極大提升用戶體驗的設計師占 58.14%；認為提升屏效對體驗有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設計價值觀》的 13 條反饋里，其中就有 2 點提到關鍵字「效率」。

通過了解不同用戶和產品類型發現，不同的用戶在工作場景的產品使用中有著相似的特征：

案例收集｜發現問題，大膽假設

縱觀 B 端產品界面，發現普遍問題和收錄在解決屏效問題上實踐得比較好的案例，為了逐步突破問題，選擇以數據產品中覆蓋率極高的表格為設計切入點，通過線上跨產品多端地毯式的體驗走查，發現表格三個層次的問題：

視覺、交互層在無需理解業務場景和用戶目標的情況下，都較容易發現，屬基礎問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導致的「過度留白」。

綜上我們提出假設：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當前手勢到目標之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設，我們進行了進一步的桌面研究，查閱論文等書籍，尋找設計理論的驗證和指導。

競品分析｜尋找實踐證據，謹慎驗證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關系，因為不同字體的同字號實際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大?。┒亲痔柣蜃中懈撸瑳Q定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數據產品中的表格為例，通過直接和間接競對的方式，分別從數據的查閱（視覺）、分析（交互）維度進行功能點和設計細節上的比對，來看看優秀產品是如何解決屏效問題。

直接競對：內部用戶口碑較好的產品 A、B外界競對：同領域的 Tableau、網易有數、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規列表（一維表格）

通過競品分析可以發現，數據分析領域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數據用戶的 Tableau、網易有數，而谷歌郵箱等工作臺常用的常規列表緊湊版本中，留白率和數據領域的電子表格不相上下。

緊湊版的使用場景也常常是面對數據量巨大的信息呈現，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數據分析場景中巨大的數據量呈現。因此我們的產品在留白率的提升空間極大，而在實際案例實踐中，也已經將表格行高優化至 30px，克制的使用留白。

除此外，競品其他層次的設計也做了比對，總結來看整體設計做法：高密度、少屏數、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發現非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實際字高只有 10px，而 AntD Table 的語境是中文字偏多，實際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據，謹慎驗證

研究表明，低密度認知負荷低，但高密度任務完成率高，用戶更喜好

參考資料：論文《基于眼動的網頁對稱性和復雜度對用戶認知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認知），需要點擊按鈕、操作鼠標和打字（行動），在人機工程學中，統稱為負荷。即認知（記憶）負荷、視覺負荷、動作負荷，即分別對應用戶體驗設計的三個層級，信息/視覺/交互。而負荷所花費資源從多到少依次為：認知 > 視覺 > 行動。

認知負荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因為刷短視頻時，你的輸入效率遠高于作者的輸出效率，而看一門 C4D 教學視頻時，你的輸入效率遠低于作者的輸出效率?？墒?，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強；否則輸出效率很低（信息質量低），你的輸入效率很高（很專業），信息于你而言都是無效的。

假設負荷總量不變的情況下，那么以上三類場景界面需要對用戶負擔分配大致如下，官網品宣類需要低認知成本，低視覺負擔，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗而帶來的趣味感，比如蘋果官網，信息量極少、圖版率高帶來極具藝術的視覺體驗、進而吸引用戶愿意跟隨屏幕滾動漸進式接受信息，而 B 端應用因為是專業使用，首先認知方面隨著員工的專業度提高而降低，因此可以通過提高視覺負擔，來降低行動負擔，進而減少操作用時，當然最佳情況是三個維度能整體降低負擔，讓總負擔降低，就需要更多設計巧思了。

面向內部設計師和終端用戶投放的《高屏效訴求調研》預設解決方案中，設計師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點擊跳轉。

實踐階段-如何設計

通過以上的探索，我們可以確定的是，B 端產品面向專業人員的工作界面設計中，提高屏效可從視覺、交互、信息三個層次進行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉，通過減少頁面跳轉、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業能力。

基于以上的總結，對產品進行優化。下面以一個簡單案例進行設計策略的解讀。一位運營同學想對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，尋找運營機會點。

如下表格經過高屏效策略優化前后對比圖，優化前相同維度下不同人群數量的對比需要視線來回跳動比對，而優化后的表格內容，更符合用戶看差異場景下分析目的數據查閱，視線鎖定相同維度，即可快速比對數值大小。

下面以視覺、交互、信息三個層次解剖設計過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉動區 30度，垂直最大眼動舒適轉動區 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設計與研究》

如圖，縮小表格行高的同時，目標信息之間的眼動距離隨之縮短，在眼動舒適區內看到更多信息，便于信息的高效獲取。

交互層｜低跳轉-高頻信息前置

理論基礎：菲茨定律是用來預測從任意一點到目標位置所需時間的數學模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點的初始位置與目標的相對距離、目標的大小、移動的最短時間。三者之間關系公式為：T=a+blog2(D/W+1)，W為其中目標的大??；D為到目標的距離；T為移動到目標所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態，增加懸浮出現的信息組件，前置顯示目標單元格明細信息，同時通過交互出現的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎：交互設計四大策略「組織、刪除、隱藏、轉移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領-有信用卡）下的人數差異，但內容的重組織方式讓兩數據行需要頻繁點擊滾動條來查看，根據用戶目標，將關聯性大的數據放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結語

設計趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節奏，時間和注意力變得尤為可貴，相對而言，基于復雜度守恒定律， B 端信息量大且高頻訪問的產品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉」詮釋的即是「空間換時間」，少一次點擊，少一次跳轉，少一份等待，就多一份時間和效率。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

What 是什么

簡介「行動號召按鈕」是用來號召用戶點擊的進行下一步的操作按鈕/可點擊的組件。

例子 螞蟻金融科技首頁的“開始探索”按鈕，點擊后跳轉到一個新的頁面進行下一步操作。

Why 為什么

「行動號召按鈕」是在事件操作的最后一步出現的，可以讓用戶知道當按下此按鈕時，當前事件的操作流程已經完成或即將發起一個新的流程，可以給用戶一個明確的反饋。

When 什么時候使用

當你需要在界面中放置“完成”、“提交”、“確定”或“繼續”等按鈕時，可以使用這個模式，一般放置在一系列操作的最后一個步驟中。

使用條件

• 頁面中即將進行下一步操作或最終確認的時候；

• 需要一個醒目的按鈕提示用戶結束當前流程時。

How 如何使用

創建行動號召按鈕時可以使用平臺默認的按鈕樣式，或者使用更大的按鈕樣式（注意不能是一個鏈接），讓它在頁面中非常醒目，讓用戶可以快速找到并點擊它。

需要注意：

• 按鈕可以放在頁面的底部或右邊，即任務流程最后一步的下面，也可以是你的平臺規范中規定的位置，只要能讓用戶能夠快速找到它就可以，避免用戶因為找不到按鈕而結束了這個流程；

• 最好使用文字按鈕而不是圖標，因為文字能讓用戶更好的理解，比如像“完成”、“提交”這樣的按鈕用文字更能讓用戶理解。

Example 案例

案例一：Google Play商店

用戶需求：安裝應用

安卓設備上的 Google Play 商店中軟件名稱右下方的“INSTALL安裝”按鈕就是一個很好的案例。此按鈕放置的位置是軟件名稱的下方和右側，周圍的空白區域較大，是用戶視線最終會停留的位置，顏色是綠色與白色背景形成對比，且尺寸也很大，所以非常醒目 ，用戶一眼就能看見并點擊它。

案例二：12306官網

用戶需求：查詢火車班次并預定

12306官網的首頁的搜索火車班次的界面上就使用了強按鈕，橙色的長按鈕非常醒目，且位于信息的最下方，當一切信息輸入完畢后，用戶可以立即看到查詢按鈕并順利點擊進入到下一個頁面。

案例三：App Store

用戶需求：安裝軟件

用戶在搜索到軟件進入到軟件詳情頁面時，一眼就看到軟件名稱右方的藍色“獲取”按鈕，點擊它就可以安裝軟件，作為整個頁面唯一的動作按鈕它十分醒目，符合用戶的“Z”字形的瀏覽信息習慣，確保用戶能看到它，快速達到目的。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

為什么說是撕開 B 端封印呢？沒接觸過 B 端的同學，很大一部分都認為 B 端不就是簡單的列表和圖形嗎？拿開源組件拼拼湊湊就可以了，有什么可設計的？

其實這個想法完全錯了，你如果接觸后就會發現，B 端所需要的掌握的產品知識、思維邏輯、規范意識等等太多了。

而且近幾年 B 端這個詞出現的頻率越來越高了，因為前幾年大家都在爭 C 端市場，純 C 端的流量爭奪已經進入了尾聲，B 端產品反而帶來了新的機會點，同時也被慢慢的重視起來，比起以往 B 端設計師，現在需要掌握的技能也越來越多。你可以查閱一下一些招聘網站，現在 B 端可視化方面的崗位是非?；鸨?，與 C 端相比，人才缺口更大，未來幾年 B 端也會更加火爆，有機會接觸 B 端的話就不要錯過機會。我們團隊平均招聘一個合適的設計師基本要兩個月的時間。

說了這么多，我們開始今天的主題吧！

首先在座的可能有部分設計師沒有接觸過數據可視化的設計，那么第一個問題來了，什么是可視化？大家想一想。給大家三秒鐘~

通過可視的表達來增強用戶處理數據的效率。

接下來我會從三個方面來講解如何構建可視化：

    · 靈感需要迸發，更需要積累

    · 從零到一設計驅動

    · 設計度量

一、靈感需要迸發，更需要積累

1.1  數字時代下，99%的問題都是舊問題

數字時代下仍有信息不對稱的情況，尤其是關鍵技術和設計上的問題，但是如果你用心尋找，就會發現你的新問題則是別人很久之前的舊問題了。所以要做個有心人。

但是問題又來了，有時候真的不知道該怎么找、去哪找？這是個很常見的問題。因為可視化不比插畫、平面等這些成熟的領域，他是比較小眾的，所以靈感以及素材的搜尋是一個令新手設計師頭疼的事情，再加上對關鍵詞的熟悉程度不夠，導致很多設計師只停留在【可視化】這個關鍵詞里，最后感覺搜來搜去都是見過的圖，沒有新意。

1.2  明確目標，知道自己想要找什么

互聯網信息太多了，漫無目的的找靈感，只會浪費時間，一會看到這張圖好看，一會看到那張圖好看。不知不覺幾個小時就過去了。

1.3  建立關鍵詞詞庫

確定目標后，就要細化關鍵詞了。怎么建立關鍵詞詞庫呢？

關鍵詞詞庫由3部分組成：終端、設計類型、業務類型。

    · 終端：大屏、移動端、web 等等。

    · 設計類型：每個細分的數據可視化類別都是有一些專有名詞的，比如最近比較熱門的車載HMI系統，那他的類型關鍵詞就是 HMI。通過這些關鍵詞，你會搜到更精準的結果。設計類型關鍵詞比如：AR/VR、HUD、HMI、FUI等等，你要了解你們公司相關類型的關鍵詞，記錄下來。以及跟你們有關聯的，都記下來，補充自己的詞庫。

    · 業務類型：智慧城市、生物醫療、監控部署等等。

這三類單獨或組合進行搜索，就會看到更多可視化產品了。把關鍵詞詞庫建立起來后，就可以去常用的網站上搜索了，最好用的還是 behance 和 Pinterest。

1.4  除了常用的設計網站，還有哪里可以看？

企業官網：很多做數據可視化的公司，會在官網展示一些能體現自己業務特點、業務實力的案例，而這些案例就是這些企業最好的數據可視化設計作品了， 所以但凡有案例展示的官網，案列基本都是最典型最好的設計，所以從這些案例中找靈感，也是一個有意思且有效的方法和途徑。

1.5  你看到了別人看不到的，設計才能有所不同

總結一句話：你看到了別人看不到的，設計才能有所不同。如果你和別人看到的是一樣的，你怎么比別人做的更優秀？

1.6  興趣推送

經常刷短視頻/新聞網站的應該知道，系統會根據你的點贊、收藏、瀏覽等數據來給你安排后面的內容推送，以保證給你推送更精準的內容。設計網站亦是如此，behance 等網站上也都是千人千面，它會根據你的點贊收藏等來讀取你的喜好，進而推送更精準的作品。所以假設你是一個B端數據可視化方向的，你就經常搜、點贊收藏相關作品，之后你的首頁出現相關內容的幾率也會變大。

1.7  定期清理，更新迭代

最后一點，這個也是好多設計師的通病，收藏即學到。

靈感庫要求精而不是多，每隔一段時間，回來翻一翻自己之前收藏的作品，會發現有些作品自己已經看不上了，因為在做靈感收集的過程中，我們的審美會自然有所提高，當輸入的作品樣本越來越多，我們對作品評價的維度也會更多，之前那些覺得好的作品，現在看來也就會有缺陷和不滿，這是一個很正向的結果，成長就是一個不斷剔除的過程。刪掉那些自己覺得不滿意的作品，添加更符合自己當前審美的作品到靈感庫里。

這樣慢慢完善你的地基，才能更高的向上走。

二、從零到一  設計驅動

講完第一部分，我們開始搭建產品。

我負責從零到一的項目大大小小的得有10來個了，我認為在產品整個產品周期中設計師的話語權最高的時候就是項目初期，是可以做到設計驅動的。既然設計可以有足夠的的話語權，你就得規劃好未來的設計走向。

產品初期，經常會有幾個爭議比較大的問題，我們來聊一下。

2.1  設計先行還是調研先行？

這是新項目必須要做的選擇題，再講之前你先想一下，如果是你，你會如何選擇？

我的觀點是設計先行。（當然設計先行是建立在你至少對這個項目的行業有個簡單的了解之后，先設計再用戶調研），為什么呢？因為如果用戶調研先行的話，用戶只會反饋當下最想要的東西，從而有可能給你帶來誤導。就比如我們經常舉的一個例子：汽車出來之前，人們只想要一匹更快的馬。

我們要解決的不是用戶當下想要的東西，而是痛點背后用戶真正需要的東西是什么。在 0-1 的這種創造性的項目，往往設計者才是當下最懂產品的人，你把決策權交給一些不懂產品的人，做到最后只能是迷失了方向，鍋還是設計來背。所以一開始設計師要把決策權拿在手中，掌握航向。

2.2  設計先行還是規范先行？

這個問題在現在看來相對比較統一，但有的同學還是有疑惑，所以我拿出來再跟大家聊一下。

首先我的觀點是設計先行，在設計之前就定好規范的基本都是自己YY的，返工率極高。等你在做具體設計的時候就知道之前做的規范都是白費力氣了。一般都會選用在項目完成之后或者主風格及主要頁面完成后再輸出規范，這樣既可以減少規范的改動，也可以保證后面功能延用規范，一舉兩得。

當然了，設計規范不是所有項目都要有的，它是為了減少工作而不是增加工作，如果是一次性項目，就不需要再額外花費精力去輸出規范了，浪費資源~

2.3  完成和完美那個更重要？

現在都是爭分奪秒的時代，任務是無止境的，沒有做完的時候。造成這個局面的無非就是一個問題：時間不夠用。通常的做法就是先完成再迭代，做產品久了你就會發現，完成比完美更重要，不完美你還可以再迭代，完不成就有可能錯過一個風口，從而失去了變完美的可能~

聊完這三個問題，我們在設計的時候也要有一些注意項，真正的做到設計驅動。

2.4  把復雜變得清晰簡單而且美

對于設計師來說，我們的任務就是把復雜問題變得清晰簡單而且美，所以我們應該成為企業和客戶之間溝通的“架橋人”。通過設計的方法，把無形的、復雜的技術，通過有形的、可視化的方式展示出來，讓客戶更直觀、清晰的感受到產品的功能，看得懂其在業務場景中產生的價值。

2.5  轉換視角，建立共鳴

站在客戶視角，聚焦客戶關注的核心問題，通過情景把內容有序組織起來，快速與客戶建立共鳴，有效降低內容理解難度。

2.6  產品架構可以不那么復雜

把復雜的業務/功能簡單化、傻瓜化，最大的降低學習成本，能幫用戶操作的絕不讓用戶親自去操作。你要讓用戶在1分鐘之內了解你的產品是做什么的、有什么功能，你就成功了。

2.7  大膽隱藏冗余內容

B 端項目中內容量是巨大的，面對龐雜的信息，去粗取精，提煉各場景的核心內容，避免冗余信息阻礙內容有效傳達。話術語言不單要簡單易懂，還要嚴格控制文字長度，保證內容可以被快速掃描和理解。

2.8  尊重用戶習慣

不要妄想改變用戶養成的慣性思維，你要記住慣性思維大于設計思維，他的閱讀習慣、操作習慣都是不易改變的，不要為了個性化而嘗試去改變，大部分情況下結果不會是那么的理想，除非你有極大的把握。

2.9  選用合適的圖表

這個是常提到的，我就在這里簡單給大家提個醒。比如做數據對比，柱狀圖更能清晰表達出用戶想要的結果，你卻非要放個酷炫的雷達圖，他的本質目的都沒達到，要美觀有何用？

每個圖表都適合哪些場景使用，像 antv、hicharts 等都有介紹，我就不一一贅述了，我之前也寫過一篇關于如何合理利用圖表的文章，大家有興趣的可以去看一下。

三、設計度量

產品設計的好與壞我們需要去驗證、去度量。我們怎么去驗證可視化的好與壞呢？

美與丑也是主觀的，沒有絕對的美，也沒有絕對的丑。一個產品，總會有人喜歡有人不喜歡，但是我們要迎合大多數人的審美。

所以就需要一個方法論來驗證產品的好與壞，現在各大廠都在做自己的一套產品驗證的方法論，阿里在這方便算是國內做的不錯的，我舉幾個常用的度量模型。

    · 阿里云：UES

    · 螞蟻金服：PTECH與易用度

    · 1688：五度模型

    · 優酷：DES

UES 目前是國內最好的，在 5 月份的阿里設計周上也正式對外講解了 UES 模型。我拿阿里云的 UES 簡單講一下吧，這么多度量模型，無論他的方法、維度有所不同，但他們的目的是相同的：通過模型來度量設計成果。

    · 易用性：易操作性、易學性、易見性 ...

    · 一致性：整體樣式、通用框架、常用場景及組件 ...

    · 任務效率：任務完成率、任務完成時間、功能使用率 ...

    · 性能：首屏渲染時間、API 請求響應時間、頁面請求響應時間 ...

    · 滿意度：產品滿意度 ...

UES 分為 5 個模塊，這 5 項是整個產品生命周期需要驗證的。

關于 UES 我就介紹到這里吧，UES 模型要是展開講的話，半天都講不完，感興趣的話可以去阿里云官方發布的 UES 模型的相關資料中深度研究一下，看看適不適合自己的產品。

上面是度量產品的模型，接下來針對我們 B 端設計師，我們也要有一些指標來度量自己是否合格。

3.1  設計效率

現在內卷盛行的時代，各大廠都在講人效，畢竟時間才是最珍貴的，所以現在都在想方設法的提高人效。而且 B 端相對 C 端來說，可以有更多自動化的工具。

舉個我公司的例子，我剛去的時候基本沒有自動化工具，每個設計師每天也都在忙碌，誰也沒偷懶閑著。但是我發現有很多重復性的體力勞動是不需要多少思考就能完成的，但是卻耗費了將近 1/3 的時間。所以我就在想如何提高人效，把一些體力勞動用一些工具來代替，這樣就能釋放設計資產，去做更重要的事情。

當時就做了第一個自動化的工具：設計系統，現在大家對這個詞應該不陌生，但是我們剛開始做的時候比較早，還沒有一些比較完善的設計系統供我們參考，所以我們也算是前幾批摸索設計系統的團隊。設計系統做好后是可以把這1/3 的設計時間節省了下來，而且團隊的規范性更加統一。

后面的話我們也是做了一些其他的自動化工具，比如結合一些插件做到 icon、組件等發布的自動化，并且與研發同學打通，有相應的自動化提醒工具，這樣也節省了與研發的溝通成本。

在工作中，流程上能減少一步就是成功，慢慢來，萬里長征就是一步一步走出來的。

3.2  增長設計

增長這個詞來源于【增長黑客】這本書，顧名思義這個詞的就是通過設計來促進產品增長。

這個詞用在 C 端上比較多，因為 C 端可驗證的方法比較多，見效快，所以我們常見的一些增長設計的案例都是關于 C 端的，而 B 端的話，受限制的因素較多，設計只是影響增長的一部分，而且見效慢。

但是雖說影響因素多、見效慢，我們還是可以抓住機會、多去嘗試一些方法來做到設計增長。我這個方法不行，我就換一種嘗試。大家都是在摸索中過河~

3.3  為業務賦能

所有的設計都是要為業務賦能、為商業買單。我們設計的本質就是為用戶解決問題，讓用戶以最直觀的方式理解產品。不要為了所謂“我認為很美”而與業務背道而馳。

3.4  體驗創新

用戶體驗設計師會越來越重要，近兩年逐步被重視，而且未來幾年會越來越重視。行業內需要更多動腦的人而不是僅僅會動手的人。

現在到了互聯網下半場，拼的不僅是功能，用戶體驗的重視程度已經被提升了上來，在工作中的占比也越來越重。

再加上現在這個超級內卷的時代，你不提升，你的競爭對手就把你干掉了。而且你如果只是一成不變的維護老版本，你去下家面試的時候都沒有拿得出手的產品。

3.5  善用工具

現在各種辦公類工具、軟件層出不窮，而且很多工具是比較類似的，有的設計師再選工具的時候就很糾結，我認為完全沒必要糾結，首先你要明確我想要達到什么目的，只要某個軟件滿足著你的需求就可以用。

工具是為人服務的，我們的設計軟件從 PS – Sketch – Figma，無論怎么變化總要圍繞一個目的：更高效的完成工作。

尤其是一些自動化工具，現在人工智能升級很快，要多關注設計自動化方面的工具，讓他來解放我們的雙手。

總結

最后送給大家一句話：

這時代唯一不變的，就是變化。

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

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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