在B端界面設計中，表盤頁面設計是其中常見的一種類型，而如果想給用戶留下更專業(yè)的印象和更良好的體驗，那么頁面在布局設計上就要著重考慮。本篇文章里，作者就結合實際案例，對表盤頁面設計進行了一定解讀，一起來看看吧。

一、表盤頁面的設計

表盤頁面設計是我們做B端界面設計會做的第一種界面，也是網上 B 端飛機稿做的最多的類型。在一個項目中，表盤頁面決定了該項目視覺觀感的上限，也是作品集里展示項目中最重要的頁面類型。

而且，多數(shù)項目登陸后的首頁多為表盤頁，如果該頁面的設計不夠專業(yè)、合理、有效，那么第一印象勢必會非常差，影響后續(xù)體驗。

所以學習和加強 B 端界面的設計，第一站就是做好表盤頁面的設計，再考慮其它頁面類型。

今天，我們要繼續(xù)進行線上項目的首頁改版，但和以往不同的是，我會添加一些新的表盤頁設計思路進來。

首先我們看看今天的改版對象，泛普登陸后的主頁 “日常工作” 頁面：

應該可以直接感覺到，界面的設計是不怎么 “對勁” 的。作為一個 SaaS 項目就很難讓第一次登陸的用戶產生采購欲望，并且這也是直接擺作品集里肯定會找不到工作的案例……

問題很明顯，我就不用像體驗還是交互分析這樣做長篇分析了，簡單概述一下：

• 一二級導航相隔太遠，操作不順手；
• 色彩應用混亂，不必要的顏色太多；
• 文字信息密度太高，有效信息量不足；
• 模塊劃分比例不合理，缺乏節(jié)奏感；
• 圖表內容不是太密集就太寬松；
• 表格文本缺乏對比，排序不合理；
• ……

所以，針對這些問題，以及本身作為工程管理系統(tǒng)的特性，我們可以簡單定義出改版的設計原則：

之后表盤頁的設計順序將遵循以下的步驟完成：

1. 設置畫布刪格；
2. 確定全局框架；
3. 全局組件設計；
4. 內容區(qū)域切割；
5. 完成內容設計。

二、具體改版內容分享

步驟1：完成畫布柵格設置

這里我們還是采用 1440 * 800 的小尺寸畫布，并去掉等等左側導航的寬和內容區(qū)域邊距，24 列，間距 10 的柵格系統(tǒng)。

步驟2：確定全局框架

在柵格基礎上，進一步確定全局組件的應用，并調節(jié)組件內容的區(qū)域。比如雙導航應用中，一級導航左移，靠近二級側邊導航。

因為原側邊欄選項非常多，可以超過一屏高，所以將個人信息移動到頂部欄右側，對應層級也更合理。

步驟3：全局組件具體設計

這一步開始具體設計頂部欄、導航欄、標簽欄的內容，完成參數(shù)應用和相關布局，并填充基本的圖標和配色。

步驟4：內容區(qū)域切割劃分

到這一步，就進入到這次分享中最關鍵的部分，表盤內容區(qū)域的模塊劃分。先對內容區(qū)域進行切割，來確定不同模塊的位置、大致尺寸，再開始后續(xù)的設計。

在這步操作中，并不是怎么好看怎么舒服怎么來，而是要遵循一些基本的原則來完成內容的制作。包括但不局限于以下幾條：

1. 遵循F型的瀏覽順序，左側內容比右側內容關注度更高，使用率更高；
2. 信息內容權重越高，模塊占比就越大，更容易被注意；
3. 盡量在第一屏高度內容納最重要的信息，減少滾動頻率；
4. 模塊區(qū)分度要高，不同模塊信息要能輕易被區(qū)分和識別；
5. 模塊幾何分布構成比例和諧，不會讓人感覺突兀別扭；
6. ……

這些基本的原則在有一定的項目經驗以后都可以比較簡單地總結出來，但不管你有多少知識和經驗，內容區(qū)域的切割——沒有絕對正確的標準答案。

所以，這個環(huán)節(jié)我們就要盡量根據(jù)自己對內容的理解和思考，輸出多個版本的方案進行比對，以及在團隊內部進行討論，確定出最終版本。

比如下面就是我們簡單制作的幾個內容布局方案：

每個方案的輸出，都要具備令人信服的邏輯和理由，而我們后面要做的，就是在這些方案里做取舍，選出最佳的，放棄不合理的。

這是提升界面設計質量的關鍵步驟，也是表盤頁面設計中需要具體練習的能力。內容區(qū)域切割，就像家裝設計中的平面戶型設計一樣，如果沒有優(yōu)秀的戶型規(guī)劃能力，那么再好的軟裝設計也彌補不了整體的缺陷。

當然，這個步驟在真實項目中也可以放在第一步完成，會更節(jié)省評審的時間和提升設計效率。因為是改版，所以我放到后面處理。

步驟5：完成內容設計

有了布局，下一步就是根據(jù)需求完成剩余內容的設計了。這一步就是最基本的界面設計，就不在這里展開了。

只是，在設計的過程中還是要根據(jù)實際效果，反復優(yōu)化模塊細節(jié)、比例，來實現(xiàn)最佳的效果。尤其是模塊的高度和頁面的高端，是需要結合內容做出調節(jié)的，而不是一開始定死，在內容填不下了硬填，空間太大也就硬留白。

下圖就是簡單優(yōu)化后的最終版本，以及和老版的對比：

三、結尾

這次改版是比較輕度的項目，為了解釋布局切割的應用，所以細節(jié)內容必然有考慮不周的地方，不用過分糾結，關注核心的要點即可。

下篇再見～