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

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

所以學(xué)習(xí)和加強(qiáng) B 端界面的設(shè)計，第一站就是做好表盤頁面的設(shè)計，再考慮其它頁面類型。在之前的原子核系列課程中，就已經(jīng)有做過對應(yīng)的改版演示，相信不少同學(xué)有圍觀過。

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

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

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

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

• 一二級導(dǎo)航相隔太遠(yuǎn)，操作不順手

• 色彩應(yīng)用混亂，不必要的顏色太多

• 文字信息密度太高，有效信息量不足

• 模塊劃分比例不合理，缺乏節(jié)奏感

• 圖表內(nèi)容不是太密集就太寬松

• 表格文本缺乏對比，排序不合理

• ……

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

之后表盤頁的設(shè)計順序?qū)⒆裱韵碌牟襟E完成：

• 設(shè)置畫布刪格

• 確定全局框架

• 全局組件設(shè)計

• 內(nèi)容區(qū)域切割

• 完成內(nèi)容設(shè)計

  
  

步驟1：完成畫布柵格設(shè)置

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

步驟2：確定全局框架

在柵格基礎(chǔ)上，進(jìn)一步確定全局組件的應(yīng)用，并調(diào)節(jié)組件內(nèi)容的區(qū)域。比如雙導(dǎo)航應(yīng)用中，一級導(dǎo)航左移，靠近二級側(cè)邊導(dǎo)航。

因?yàn)樵瓊?cè)邊欄選項(xiàng)非常多，可以超過一屏高，所以將個人信息移動到頂部欄右側(cè)，對應(yīng)層級也更合理。

步驟3：全局組件具體設(shè)計

這一步開始具體設(shè)計頂部欄、導(dǎo)航欄、標(biāo)簽欄的內(nèi)容，完成參數(shù)應(yīng)用和相關(guān)布局，并填充基本的圖標(biāo)和配色。

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

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

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

1. 遵循F型的瀏覽順序，左側(cè)內(nèi)容比右側(cè)內(nèi)容關(guān)注度更高，使用率更高

2. 信息內(nèi)容權(quán)重越高，模塊占比就越大，更容易被注意

3. 盡量在第一屏高度內(nèi)容納最重要的信息，減少滾動頻率

4. 模塊區(qū)分度要高，不同模塊信息要能輕易被區(qū)分和識別

5. 模塊幾何分布構(gòu)成比例和諧，不會讓人感覺突兀別扭

6. ……

這些基本的原則在有一定的項(xiàng)目經(jīng)驗(yàn)以后都可以比較簡單的總結(jié)出來，但不管你有多少知識和經(jīng)驗(yàn)，內(nèi)容區(qū)域的切割 —— 沒有絕對正確的標(biāo)準(zhǔn)答案。

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

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

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

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

當(dāng)然，這個步驟在真實(shí)項(xiàng)目中也可以放在第一步完成，會更節(jié)省評審的時間和提升設(shè)計效率。因?yàn)槭歉陌?，所以我放到后面處理?/p>

步驟5：完成內(nèi)容設(shè)計

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

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

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

結(jié)尾

這次改版是比較輕度的項(xiàng)目，為了解釋布局切割的應(yīng)用，所以細(xì)節(jié)內(nèi)容必然有考慮不周的地方，不用過分糾結(jié)，關(guān)注核心的要點(diǎn)即可。

之后視頻的版本會在周末或下周更新到B站原子核系列中，以及同系列的下一篇分享將會聚焦在泛普表格頁面的設(shè)計中，敬請期待！

我們下篇再賤～

新一期B端產(chǎn)品設(shè)計全能班即將十一放假結(jié)束就開課了，有提升需要的同學(xué)記得聯(lián)系我～