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

一、表盤頁面的設(shè)計(jì)

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

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

所以學(xué)習(xí)和加強(qiáng) B 端界面的設(shè)計(jì)，第一站就是做好表盤頁面的設(shè)計(jì)，再考慮其它頁面類型。

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

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

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

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

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

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

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

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

二、具體改版內(nèi)容分享

步驟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)非常多，可以超過一屏高，所以將個(gè)人信息移動到頂部欄右側(cè)，對應(yīng)層級也更合理。

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

這一步開始具體設(shè)計(jì)頂部欄、導(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è)計(jì)。

在這步操作中，并不是怎么好看怎么舒服怎么來，而是要遵循一些基本的原則來完成內(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)答案。

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

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

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

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

當(dāng)然，這個(gè)步驟在真實(shí)項(xiàng)目中也可以放在第一步完成，會更節(jié)省評審的時(shí)間和提升設(shè)計(jì)效率。因?yàn)槭歉陌妫晕曳诺胶竺嫣幚怼?/p>

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

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

只是，在設(shè)計(jì)的過程中還是要根據(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)即可。

下篇再見～