在日常工作中的設(shè)計(jì)工作中，常常拿到產(chǎn)品的原型圖不知道如何下手，業(yè)務(wù)與流程都基本沒(méi)問(wèn)題，真正到了頁(yè)面設(shè)計(jì)時(shí)就會(huì)卡住。那么，B端產(chǎn)品如何進(jìn)行頁(yè)面設(shè)計(jì)？作者總結(jié)了一些思路，希望對(duì)你有所啟發(fā)。

前言

在日常的設(shè)計(jì)工作中，拿到產(chǎn)品給的原型或者需求清單，分析完用戶(hù)和任務(wù)流程后不知道該如何下手，或者不知道如何系統(tǒng)地開(kāi)展設(shè)計(jì)工作，再或者不知道如何做出符合用戶(hù)和業(yè)務(wù)目標(biāo)的設(shè)計(jì)方案。

有的時(shí)候流程和業(yè)務(wù)都不在話下，但是到了具體的頁(yè)面設(shè)計(jì)就會(huì)捉襟見(jiàn)肘。如何引導(dǎo)用戶(hù)在頁(yè)面中迅速的完成任務(wù)流程，我們看一下是不是有套路可走。

在一二線城市，相信很多人都去過(guò)宜家，有媒體統(tǒng)計(jì)過(guò)：宜家的迷宮式動(dòng)線設(shè)計(jì)創(chuàng)造了60%的沖動(dòng)購(gòu)物。宜家的動(dòng)線設(shè)計(jì)將用戶(hù)與各類(lèi)商品區(qū)進(jìn)行了有效的串聯(lián)，在刻意設(shè)計(jì)的路線上，商家填滿(mǎn)了各類(lèi)家用商品，用戶(hù)在從入口到出口的路上，使高沖動(dòng)購(gòu)物率成為了可能。從動(dòng)線展示圖中我們可以看到，一條“清晰明了”的曲線引導(dǎo)用戶(hù)前進(jìn)，同時(shí)還會(huì)提供一些捷徑供用戶(hù)穿梭，這像極了頁(yè)面中的友好鏈接，幫助快速抵達(dá)目的地。

在整個(gè)宜家商場(chǎng)的設(shè)計(jì)中我們可以看到，這條清晰明了但實(shí)際不存在的線帶給了商家巨大的收益，這個(gè)設(shè)計(jì)表達(dá)中，離不開(kāi)實(shí)際存在的懸掛路標(biāo)、小地圖、地面標(biāo)識(shí)、醒目的商品名稱(chēng)、價(jià)簽和特意設(shè)計(jì)的商品堆積，當(dāng)然還有一些消費(fèi)者手冊(cè)等。

這與我們的頁(yè)面設(shè)計(jì)有著異曲同工之妙，將商場(chǎng)的商品陳設(shè)和頁(yè)面中的信息組織放在一起我們可以發(fā)現(xiàn)，都在向消費(fèi)者或用戶(hù)傳遞一種建議和方向。所以，在頁(yè)面設(shè)計(jì)我更愿意稱(chēng)之為頁(yè)面框架或者頁(yè)面信息設(shè)計(jì)，就是將該頁(yè)面的內(nèi)容信息通過(guò)一定的框架組織起來(lái)，然后呈現(xiàn)出來(lái)，實(shí)際上就是在與用戶(hù)溝通交流，使得頁(yè)面易學(xué)易用。

有一個(gè)成語(yǔ)是“明修棧道，暗渡陳倉(cāng)”，而我們要做的是“暗修棧道，明渡陳倉(cāng)”，所謂的棧道就是設(shè)計(jì)師所搭建的頁(yè)面框架。經(jīng)過(guò)設(shè)計(jì)師的合理分析和設(shè)計(jì)，使用看不見(jiàn)的設(shè)計(jì)手段和看得見(jiàn)的表現(xiàn)方式，給予用戶(hù)明確的“提示”，幫助用戶(hù)迅速的完成任務(wù)。

一、如何做進(jìn)行頁(yè)面框架設(shè)計(jì)

前面對(duì)頁(yè)面框架設(shè)計(jì)有了一定的了解，那么怎樣才能設(shè)計(jì)出好的頁(yè)面，應(yīng)該運(yùn)用什么方法，采用什么流程。

在《信息架構(gòu)-超越Web設(shè)計(jì)》一書(shū)中，作者將“如何做”闡述為：設(shè)計(jì)相應(yīng)的信息顆粒度和組合方式，為用戶(hù)創(chuàng)造他們所熟悉的環(huán)境。根據(jù)日常的工作經(jīng)歷，將“如何做”這個(gè)過(guò)程分成了以下四個(gè)步驟。

1. 了解業(yè)務(wù)

在著手進(jìn)行整體頁(yè)面設(shè)計(jì)之前，必要的設(shè)計(jì)工作就是進(jìn)行切實(shí)的業(yè)務(wù)分析，了解我們要做什么，為了什么做。

在辛向陽(yáng)的交互設(shè)計(jì)五要素中強(qiáng)調(diào)了，交互設(shè)計(jì)的對(duì)象是行為，他們之間的聯(lián)系可以概括為：用戶(hù)在某個(gè)場(chǎng)景下通過(guò)某種媒介產(chǎn)生行為，最后達(dá)成了他的目標(biāo)。

那么如何讓用戶(hù)產(chǎn)生更有利于目標(biāo)實(shí)現(xiàn)的行為，在設(shè)計(jì)之前先了解一下這些業(yè)務(wù)要素。

1.1 用戶(hù)

簡(jiǎn)單來(lái)說(shuō)就是使用我們平臺(tái)的人。在一些B端產(chǎn)品中用戶(hù)會(huì)分很多的角色，比如管理角色和普通角色，每個(gè)角色的訴求也是不一樣的。

管理者：我希望能夠看到團(tuán)隊(duì)中所有人的工作進(jìn)度。

普通員工：我希望能快速的完成自己的任務(wù)。

這兩種角色的訴求都是用戶(hù)需求，分析階段需要做好用戶(hù)分層，在后面的目標(biāo)拆解中就可以獲得更明確的方向。

1.2 場(chǎng)景

對(duì)于用戶(hù)提出的反饋或者意見(jiàn)，要切實(shí)考慮應(yīng)用場(chǎng)景，辨別用戶(hù)提供的是需求還是方案。

比如上個(gè)月用戶(hù)提到一個(gè)需求，希望在某某頁(yè)面中，復(fù)制粘貼就可以上傳圖片，某某平臺(tái)就是這么做的。接到這個(gè)反饋，我的第一反應(yīng)就是你在“教我做設(shè)計(jì)？”（開(kāi)玩笑??），首先他的這個(gè)方案我們目前是不具備的，然后這個(gè)設(shè)計(jì)確實(shí)很方便，但是目前團(tuán)隊(duì)沒(méi)有時(shí)間做這個(gè)。找到特定的用戶(hù)聊過(guò)之后，他表示當(dāng)前只能點(diǎn)擊或者拖拽上傳，截圖的文件需要本地保存后才能上傳，很不方便。我向她提供了我們目前平臺(tái)要實(shí)施的方案：

• 可以直接在描述的富文本中編輯保存；
• 可以在下個(gè)迭代將要實(shí)現(xiàn)的備注中直接粘貼上傳附件。聽(tīng)了我的解釋后，他表示這兩個(gè)方案都可以，不需要頁(yè)面的隨意上傳了。所以在真實(shí)的項(xiàng)目中，要找到真實(shí)的需求場(chǎng)景，而不是被用戶(hù)牽著鼻子走。

具體如何去了解我們的用戶(hù)場(chǎng)景，除了業(yè)務(wù)或者產(chǎn)品經(jīng)理的闡述和解釋?zhuān)硗馕覀冊(cè)谇捌谶M(jìn)行競(jìng)品分析的時(shí)候也是不錯(cuò)的時(shí)機(jī)，因?yàn)樵谙嗨茦I(yè)務(wù)場(chǎng)景中，不同平臺(tái)之間的表現(xiàn)方式不會(huì)出現(xiàn)太大差異，相當(dāng)于設(shè)計(jì)思考前置，由方案倒推了需求。不過(guò)還是建議以具體業(yè)務(wù)具體分析為主，畢竟每個(gè)公司的工作方式是不同的。

1.3 目標(biāo)

對(duì)于設(shè)計(jì)師而言，目標(biāo)就是這次設(shè)計(jì)的目的是什么、解決什么問(wèn)題、創(chuàng)造什么價(jià)值，利用某些設(shè)計(jì)策略手段，對(duì)未來(lái)一段時(shí)間內(nèi)所要達(dá)成的預(yù)期結(jié)果。設(shè)計(jì)的目標(biāo)是要依附于業(yè)務(wù)，忠實(shí)于用戶(hù)。一個(gè)平臺(tái)的每次升級(jí)側(cè)重點(diǎn)不一樣，但是業(yè)務(wù)和體驗(yàn)是要同時(shí)考慮到的。

業(yè)務(wù)提出了今年我們要在去年的基礎(chǔ)上，提升用戶(hù)滿(mǎn)意度15%

那么設(shè)計(jì)就應(yīng)該去分析低滿(mǎn)意度背后的原因是什么，用戶(hù)為什么打了低分，這可能會(huì)涉及到任務(wù)流程、頁(yè)面布局、組件使用等問(wèn)題。

當(dāng)我們確定好影響滿(mǎn)意度的因素之后，可以對(duì)其中一個(gè)因素提出設(shè)計(jì)目標(biāo)：縮短用戶(hù)完成某個(gè)任務(wù)的時(shí)間20%，以此來(lái)聚焦用戶(hù)操作流程的低效問(wèn)題。

設(shè)計(jì)目標(biāo)是在了解業(yè)務(wù)和用戶(hù)之后所得到的一個(gè)共贏產(chǎn)物，也是將抽象的業(yè)務(wù)信息轉(zhuǎn)化為具體的設(shè)計(jì)要素的過(guò)程。

1.4 媒介

用戶(hù)產(chǎn)生交互行為的最大媒介就是我們的頁(yè)面，細(xì)化一下顆粒度，就會(huì)落到我們每一個(gè)頁(yè)面組件上面。而組件并非是簡(jiǎn)單的平鋪，而是要做的設(shè)計(jì)目標(biāo)的指導(dǎo)下，選擇合適的組件和表現(xiàn)方式，使用戶(hù)看到頁(yè)面時(shí)，快速的產(chǎn)生恰當(dāng)?shù)男袨椤?/p>

1.5 行為

在界面中中用戶(hù)主要的操作動(dòng)作無(wú)外乎：點(diǎn)擊、懸浮、滑動(dòng)、拖拽，應(yīng)考慮怎樣的觸發(fā)形式能使用戶(hù)最低成本、最順暢地完成行為。當(dāng)然行為并不是孤立存在的，它需要多個(gè)動(dòng)作和媒介，以及視覺(jué)行動(dòng)等共同構(gòu)成。而如何讓用戶(hù)產(chǎn)生恰當(dāng)?shù)男袨?，需要功能信息顯性化的設(shè)計(jì)。

2. 組織信息

組織信息是頁(yè)面設(shè)計(jì)的重要組成部分，我們看到的頁(yè)面信息都是整齊的，每個(gè)整齊的背后又暗含了特殊的組織關(guān)系。對(duì)于業(yè)務(wù)分析或者需求文檔所得到的業(yè)務(wù)信息需要設(shè)計(jì)師進(jìn)行下一步的精加工，首先要了解當(dāng)前所處頁(yè)面的主要功能是什么，其次是明確功能信息并進(jìn)行相應(yīng)的分析，獲得可以搬運(yùn)羅列的功能塊。

《佐藤可士和的超整理術(shù)》對(duì)信息組織的策略有著非常專(zhuān)業(yè)的建議，作者從中提煉出以下處理方式。

2.1 明確信息

通過(guò)業(yè)務(wù)了解，明確當(dāng)前頁(yè)面將要進(jìn)行哪些操作或者應(yīng)該具備哪些功能點(diǎn)。

以上圖所展示的簡(jiǎn)單需求為例。從當(dāng)前頁(yè)面中我們可以看到，這是一個(gè)任務(wù)管理的模塊頁(yè)面。在任務(wù)管理中，要支持用戶(hù)創(chuàng)建三類(lèi)任務(wù)，創(chuàng)建結(jié)束后還要支持信息的瀏覽、查找和編輯。而這些信息的來(lái)源就是上面我們分析的業(yè)務(wù)場(chǎng)景，這只是經(jīng)過(guò)整理之后的。

2.2 羅列信息

明確了業(yè)務(wù)信息之后，相對(duì)應(yīng)的我們要將我們頁(yè)面布局所需要的核心元素剝離出來(lái)，比如創(chuàng)建數(shù)據(jù)，就可以剝離成一個(gè)創(chuàng)建按鈕。

對(duì)于剛才的信息我們可以簡(jiǎn)單的羅列如下：

創(chuàng)建A、創(chuàng)建B、創(chuàng)建C、修改、刪除、標(biāo)題、篩選狀態(tài)、關(guān)鍵詞篩選、數(shù)據(jù)列表

2.3 導(dǎo)入觀點(diǎn)，確定關(guān)系

確定信息元素之間的關(guān)系是為了在頁(yè)面中更好的劃分和取用，方便在后面頁(yè)面布局中給相關(guān)信息找到恰當(dāng)?shù)奈恢谩?/p>

以剛才的需求為例，在羅列的過(guò)程中大概也能找到信息之間的關(guān)系?？梢苑譃槿?lèi)：操作、篩選和數(shù)據(jù)展示。

如果我們對(duì)個(gè)別的信息再進(jìn)行賦予觀點(diǎn)，還能出現(xiàn)新的關(guān)系。如果從業(yè)務(wù)使用頻率進(jìn)行觀點(diǎn)導(dǎo)入，那么任務(wù)A、B、C的使用頻率依次降低，最后可以確定的優(yōu)先級(jí)關(guān)系就是創(chuàng)建A>B>C。在任務(wù)頁(yè)面中，創(chuàng)建類(lèi)的操作優(yōu)先級(jí)要明顯高于編輯類(lèi)，所以“創(chuàng)建”>“編輯”。操作和篩選作為數(shù)據(jù)產(chǎn)生和查找的工具，需要放在更顯眼的位置以更容易被發(fā)現(xiàn)。

以上是對(duì)展示頁(yè)面的簡(jiǎn)單信息進(jìn)行的處理，對(duì)于一些表單頁(yè)面我們也可以采用相應(yīng)的策略。通過(guò)信息的屬性維度可以大體分類(lèi)，如果信息量很大，那么信息的層級(jí)關(guān)系就會(huì)展現(xiàn)出來(lái)，方便頁(yè)面布局中采取相對(duì)應(yīng)的設(shè)計(jì)方式。針對(duì)信息的關(guān)系，我們可以確定信息的先后順序、頁(yè)面位置以及顏色等樣式的使用。

當(dāng)然組織信息的最后產(chǎn)物還是虛擬的，我們輸出的信息關(guān)系無(wú)外乎，比如信息組、信息架構(gòu)、優(yōu)先級(jí)等。組織信息是繼了解業(yè)務(wù)之后的信息處理和清洗的步驟，也是業(yè)務(wù)場(chǎng)景以及設(shè)計(jì)目標(biāo)的應(yīng)用，可以為后面頁(yè)面布局提供更有針對(duì)性的建議。

另外，我們還可以了解一些常規(guī)的信息組織方式。

2.4 常見(jiàn)的組織方式

常見(jiàn)的組織方式可以分為精確分類(lèi)和模糊分類(lèi)。

精確分類(lèi)將信息分成定義明確和互斥的區(qū)域，采取的是客觀態(tài)度。如果用戶(hù)通過(guò)已知的明確信息，可以迅速的找到相應(yīng)的位置，并且這種分類(lèi)方式好維護(hù)。字母順序、時(shí)間順序、地理位置等都屬于精確分類(lèi)。

比如App中的城市選擇，就是采取的字母分類(lèi)，用戶(hù)可以根據(jù)目標(biāo)城市的首字母，迅速定位到相應(yīng)的位置。

模糊分類(lèi)將信息分成不精確定義的種類(lèi)，采取的是主觀態(tài)度。受困于人的主觀性和分類(lèi)標(biāo)準(zhǔn)的模糊性，因此很難設(shè)計(jì)和維護(hù)。但是在一些場(chǎng)景中，模糊分類(lèi)卻更重要和有用。主題、任務(wù)、受眾、隱喻導(dǎo)向等屬于模糊分類(lèi)。上面操作按鈕的分類(lèi)就是采用了任務(wù)導(dǎo)向，將按鈕分成了創(chuàng)建和編輯兩個(gè)部分。

京東商城的左側(cè)商品分類(lèi)采用的就是模糊分類(lèi)。

混合方案是在B端產(chǎn)品中常見(jiàn)的方式，能靈活的處理頁(yè)面信息，應(yīng)對(duì)不同用戶(hù)和信息的場(chǎng)景差異。在Ant design的典型頁(yè)面中，左側(cè)菜單采用了模糊分類(lèi)（主題），而表格信息采用的是精準(zhǔn)分類(lèi)（時(shí)間倒序）。

3. 組件選擇

組件的選擇是信息可視化的第一步，是為信息尋找相應(yīng)容器載體的過(guò)程。

3.1 導(dǎo)航

導(dǎo)航存在的作用是任何告知用戶(hù)他在哪里，他能去什么地方以及如何到達(dá)那里的方式。常見(jiàn)的導(dǎo)航可分為：

全局導(dǎo)航：屬于常駐導(dǎo)航，基本平臺(tái)的每個(gè)頁(yè)面會(huì)存在，常見(jiàn)的組件形式有側(cè)邊、頂部、彈出式、下拉等。

頁(yè)內(nèi)導(dǎo)航：根據(jù)當(dāng)前業(yè)務(wù)場(chǎng)景所配置的導(dǎo)航，常見(jiàn)的組件有頁(yè)頭、Tree 樹(shù)型控件、錨點(diǎn)、回到頂部、走馬燈等。

返回導(dǎo)航：常見(jiàn)的組件有面包屑、返回按鈕等。

友好導(dǎo)航：不在該模塊的信息架構(gòu)規(guī)范內(nèi)，用戶(hù)可以通過(guò)點(diǎn)擊跳到其他頁(yè)面查看，比如操作日志中的超鏈接。

其他導(dǎo)航：常見(jiàn)的有步驟條、分頁(yè)器等。

3.2 標(biāo)簽

標(biāo)簽通常是向用戶(hù)顯示組織系統(tǒng)和導(dǎo)航系統(tǒng)最明顯的方式，例如全站導(dǎo)航系統(tǒng)相匹配的文字標(biāo)簽：主頁(yè)、搜索等。

標(biāo)簽分文字標(biāo)簽和圖形標(biāo)簽：

文字標(biāo)簽涉及到頁(yè)面中所有功能的文案命名，例如標(biāo)題、導(dǎo)航、按鈕、鏈接、索引詞、提示等，這是用戶(hù)理解信息最直接的方式，所以文字標(biāo)簽的選擇要常見(jiàn)并且易于理解，選擇行業(yè)中的通用用法。比如在協(xié)同工具的領(lǐng)域，一些最主要業(yè)務(wù)單元的命名，無(wú)外乎項(xiàng)目、需求、任務(wù)、缺陷、迭代等，即使是新出現(xiàn)的平臺(tái)，也會(huì)默認(rèn)去遵循這個(gè)行業(yè)命名。因?yàn)樵跇I(yè)務(wù)的發(fā)展過(guò)程中，這些標(biāo)簽已經(jīng)成為了協(xié)同領(lǐng)域中相互共識(shí)的點(diǎn)，如果為了強(qiáng)差異化，反而會(huì)增加用戶(hù)教育的成本，降低平臺(tái)的使用效率。

圖形標(biāo)簽在頁(yè)面設(shè)計(jì)中，作為文字標(biāo)簽的補(bǔ)充，會(huì)更形象的傳達(dá)信息。主要應(yīng)用的地方的是圖標(biāo)。圖形的使用也是要易于理解，不要讓形式凌駕于功能之上，不能給用戶(hù)帶來(lái)思考成本。在Iconfont上搜索“返回”，檢索的結(jié)果都是相似的箭頭，即使有設(shè)計(jì)師會(huì)做一些樣式調(diào)整，但是都離不開(kāi)箭頭這個(gè)符號(hào)，因?yàn)檫@已經(jīng)形成了深刻的用戶(hù)心智。

還有圖文類(lèi)的軟件，我們可以看到他們上面展示的文字和標(biāo)簽都是相似的，大家都在做一些微調(diào)，但是都在遵循最初Office給用戶(hù)形成的符號(hào)認(rèn)知。所以針對(duì)新的平臺(tái)產(chǎn)品，除了調(diào)研用戶(hù)對(duì)標(biāo)簽的使用習(xí)慣之外，還可以參考競(jìng)品的使用現(xiàn)狀，這屬于行業(yè)的隱形共享資源。

3.3 搜索

搜索系統(tǒng)是用戶(hù)快速尋找信息的工具，搜索系統(tǒng)的使用要根據(jù)頁(yè)面信息的內(nèi)容量和場(chǎng)景要求進(jìn)行配置選擇。

常見(jiàn)的組件可以分為：

• 輸入類(lèi)篩選：輸入類(lèi)篩選需要用戶(hù)輸入一定的文本關(guān)鍵詞，篩選出對(duì)應(yīng)的數(shù)據(jù)；
• 選擇類(lèi)篩選：選擇器類(lèi)篩選可以是單選或者多選，用戶(hù)點(diǎn)擊選擇待選項(xiàng)即可；
• 平鋪類(lèi)篩選：平鋪類(lèi)篩選是將所有的待選項(xiàng)鋪出來(lái)，方便用戶(hù)直觀選擇；
• 分頁(yè)篩選：分頁(yè)Tabs類(lèi)似于平鋪類(lèi)篩選，都是將待選項(xiàng)平鋪出來(lái)；
• 高級(jí)篩選：高級(jí)篩選的判斷關(guān)系較多，一般會(huì)包括篩選條件、篩選關(guān)系（且、或）、篩選類(lèi)型（包含、不包含、等于、不等于等）、篩選值和添加。

以上是闡述了對(duì)頁(yè)面結(jié)構(gòu)設(shè)計(jì)影響較大的三類(lèi)組件，像按鈕、選擇器等顆粒度的組件，可以到大廠的設(shè)計(jì)網(wǎng)站查看詳細(xì)的使用說(shuō)明，這里不再描述。

4. 頁(yè)面布局

頁(yè)面布局是頁(yè)面設(shè)計(jì)的最后一步，是功能信息布局的關(guān)鍵，是為用戶(hù)搭建易于發(fā)現(xiàn)的流程節(jié)點(diǎn)。

4.1 選載體

首先根據(jù)當(dāng)前的業(yè)務(wù)的場(chǎng)景特點(diǎn)，先選擇信息的承載方式。

目前有三種方式：頁(yè)面、對(duì)話框、抽屜。

1. 頁(yè)面：信息承載量最大，適合信息瀏覽、數(shù)量級(jí)較大的創(chuàng)建和展示；
2. 對(duì)話框：信息承載量小于頁(yè)面，流程中斷性較強(qiáng)，適合輕量級(jí)的信息創(chuàng)建、處理和展示；
3. 抽屜：信息承載量大于對(duì)話框，小于頁(yè)面，流程中斷性較弱。

在具體的使用過(guò)程中：

• 如果信息量較大，有組合方式比較復(fù)雜的信息創(chuàng)建和展示，考慮使用頁(yè)面；
• 如果信息與觸發(fā)頁(yè)面有較強(qiáng)的關(guān)聯(lián)性，考慮使用抽屜；
• 如果信息與觸發(fā)頁(yè)面有較弱的關(guān)聯(lián)性，需要聚焦當(dāng)前任務(wù)，考慮使用對(duì)話框或頁(yè)面。

4.2 分區(qū)域

在確定好使用的承載方式之后，要對(duì)基本的大塊信息區(qū)域進(jìn)行劃分。

首頁(yè)要確定的是導(dǎo)航的位置，導(dǎo)航代表了用戶(hù)當(dāng)前所處的位置和能去的位置。因此要放在非常顯眼且穩(wěn)定的地方。

以一開(kāi)始展示的需求頁(yè)面為例，根據(jù)F型視覺(jué)動(dòng)線理論頂部和左側(cè)用戶(hù)關(guān)注點(diǎn)較多和穩(wěn)定性較強(qiáng)的地方。在大廠的典型頁(yè)面中我們也可以看到相應(yīng)的實(shí)踐。頂部和左側(cè)相比，擴(kuò)展性較弱，為方便后面業(yè)務(wù)擴(kuò)展，將導(dǎo)航區(qū)域選在了左側(cè)。

其次是操作、篩選和數(shù)據(jù)展示區(qū)，根據(jù)前面組織信息的結(jié)論，操作和篩選要放在比數(shù)據(jù)展示更容易發(fā)現(xiàn)的固定位置，根據(jù)F模型，放在信息展示區(qū)的頂部。這樣基本的頁(yè)面區(qū)域就劃分好了：導(dǎo)航區(qū)、操作篩選區(qū)、數(shù)據(jù)展示區(qū)。

按照本文的闡述，選載體和分區(qū)域略顯啰嗦，在實(shí)際的工作中，往往導(dǎo)航等框架組件的選擇與分區(qū)域同時(shí)進(jìn)行，所以，我們一般可以從以下方面迅速開(kāi)始：

• 如果是老平臺(tái)，只是做部分功能擴(kuò)展，需要按照原來(lái)的頁(yè)面框架設(shè)計(jì)進(jìn)行新的功能設(shè)計(jì)，保持界面的一致性。
• 如果是新的頁(yè)面，可以參考競(jìng)品的頁(yè)面，因?yàn)樗麄兊奶幚矸绞揭呀?jīng)經(jīng)過(guò)市場(chǎng)和用戶(hù)的檢驗(yàn)，具有一定的可靠性。
• 參考各大廠規(guī)范的典型頁(yè)面，這些頁(yè)面是他們內(nèi)部設(shè)計(jì)師經(jīng)過(guò)多次討論才上線對(duì)外，應(yīng)用場(chǎng)景上具有一定的廣泛性和通用性，并且用戶(hù)對(duì)這類(lèi)頁(yè)面可能會(huì)更熟悉。

4.3 調(diào)布局

在劃分好區(qū)域之后，需要對(duì)頁(yè)面中的組件布局進(jìn)行調(diào)整。比如前面的我們所確定的按鈕關(guān)系，在頁(yè)面中，為創(chuàng)建類(lèi)和編輯類(lèi)的按鈕分別選擇了填充和線框按鈕，當(dāng)前按鈕數(shù)量太多，頁(yè)面空間受限，可以對(duì)按鈕進(jìn)行組織收起，根據(jù)使用頻率高低進(jìn)行相應(yīng)的排序。同時(shí)篩選和操作是兩類(lèi)信息且優(yōu)先級(jí)有差異，可以區(qū)分更明顯一些，同時(shí)頁(yè)面中的右側(cè)有視覺(jué)空白，可以將篩選類(lèi)組件右對(duì)齊。

在B端產(chǎn)品中常見(jiàn)的表單頁(yè)面中，根據(jù)Ant design的復(fù)雜度模型，從頁(yè)面信息的復(fù)雜度和關(guān)聯(lián)性維度上，對(duì)相應(yīng)的組合容器進(jìn)行劃分，方便設(shè)計(jì)師準(zhǔn)確匹配，快速呈現(xiàn)出用戶(hù)更容易理解和查找的內(nèi)容模塊布局。其中步驟分組一般用在創(chuàng)建頁(yè)面，Tab分組一般用在展示頁(yè)面。

在具體的組件布局中，還需要考慮組件的對(duì)齊方式、尺寸、位置等，這些都需要根據(jù)當(dāng)前的業(yè)務(wù)特點(diǎn)、頁(yè)面空間大小、瀏覽效率等進(jìn)行實(shí)際判斷決策。如果說(shuō)頁(yè)面空間有限，但是業(yè)務(wù)字段又非常多，在很多的后臺(tái)軟件中，我們會(huì)發(fā)現(xiàn)做左對(duì)齊的方式比較常見(jiàn)，因?yàn)樵谝黄羶?nèi)它的信息承載量是最大的，屏效比最高。

4.4 建議

4.4.1 設(shè)計(jì)理論的應(yīng)用

設(shè)計(jì)理論和原則是前人在實(shí)踐的基礎(chǔ)上總結(jié)出來(lái)的規(guī)律和方法，雖然設(shè)計(jì)趨勢(shì)會(huì)發(fā)生變化，但是信息的傳遞原理短期內(nèi)是相對(duì)穩(wěn)定的。通過(guò)理論的應(yīng)用，引導(dǎo)用戶(hù)關(guān)注頁(yè)面架構(gòu)的焦點(diǎn)，就可以達(dá)到信息傳遞的目的。

a、視覺(jué)動(dòng)線理論

F型視覺(jué)動(dòng)線模型是尼爾森于2006年提出的，模型中指出，用戶(hù)常用習(xí)慣方式是：掃描。在信息瀏覽過(guò)程中，遵循最省力的路徑來(lái)瀏覽內(nèi)容，直至找到想要的信息，因此前幾行左側(cè)內(nèi)容看得多，而右側(cè)內(nèi)容和頁(yè)面靠后部分便看得少，通常情況下便形成大體的F型。

Z型視覺(jué)動(dòng)線模型也是尼爾森對(duì)用戶(hù)的瀏覽習(xí)慣進(jìn)行研究后得出的結(jié)論，一般會(huì)用在門(mén)戶(hù)類(lèi)、文字類(lèi)網(wǎng)站，Z布局應(yīng)用很簡(jiǎn)單，將重要的信息元素放到Z形上面，用戶(hù)掃描過(guò)程中會(huì)沿著這條路徑獲取信息。但是Z形也有弱點(diǎn)，用戶(hù)很容易會(huì)受其他顯眼的元素吸引，所以在布局的時(shí)候，要控制好這些元素。

b、交互設(shè)計(jì)四策略

刪除：

將產(chǎn)品中可有可無(wú)或者沒(méi)有使用頻率的功能刪除，使用戶(hù)能聚焦在核心流程上，減少信息干擾和產(chǎn)品維護(hù)成本。在具體的設(shè)計(jì)中，還包括不必要的裝飾元素，比如分割，空間分割和線分割保留一種方式即可，疊加使用反而耗費(fèi)產(chǎn)品的簡(jiǎn)潔感，給用戶(hù)增加視覺(jué)負(fù)擔(dān)。

分類(lèi)：

面對(duì)種類(lèi)和數(shù)量眾多的功能，為了能讓用戶(hù)更迅速的定位到目的位置，可以將信息分類(lèi)組織，使頁(yè)面更清晰。剛才上面的操作關(guān)系就是分類(lèi)的一種，面對(duì)一一擺開(kāi)的按鈕，用戶(hù)難免會(huì)有選擇延遲，快速定位后可以有效加快選擇。還有產(chǎn)品中的一些狀態(tài)、標(biāo)簽、顏色等，合理的分類(lèi)組織，設(shè)定邊界，再次復(fù)用可保持產(chǎn)品的一致性。

隱藏：

將高頻的功能和信息適時(shí)適地的展示，其他的則進(jìn)行合理隱藏，也是為了頁(yè)面聚焦，減少視覺(jué)負(fù)擔(dān)，保持頁(yè)面簡(jiǎn)潔。像表格中的操作按鈕，一般情況下都會(huì)將用戶(hù)將會(huì)使用的兩個(gè)高頻按鈕放在外面，其他的放在更多中；另外，按鈕的使用還有一定的引導(dǎo)性，比如從平臺(tái)角度講，希望用戶(hù)的數(shù)據(jù)越來(lái)越多，所以不是很希望用戶(hù)刪除或注銷(xiāo)，所以這類(lèi)按鈕都會(huì)放在架構(gòu)設(shè)計(jì)的末端。

轉(zhuǎn)移：

一般情況下是將復(fù)雜進(jìn)行轉(zhuǎn)移，將用戶(hù)的重復(fù)或復(fù)雜操作，交給后臺(tái)處理，增加任務(wù)處理效率。

c、格式塔心理學(xué)

格式塔心理學(xué)源于視知覺(jué)，通過(guò)對(duì)視覺(jué)元素形式、圖形的研究，幫助人們產(chǎn)生某種視覺(jué)傾向，從而快速的辨別。

在這里主要說(shuō)一下這四個(gè)原則：

接近性原則：在人們的視覺(jué)感受中，會(huì)習(xí)慣于將彼此接近的元素看成一個(gè)整體。元素之間的距離越小，說(shuō)明彼此的關(guān)系越近，當(dāng)然，這個(gè)原則也是反過(guò)來(lái)用，如果想讓人感受到兩個(gè)元素不是一個(gè)整體或類(lèi)別，那么把他們的距離拉大即可。

購(gòu)物APP的卡片瀏覽模式，圖片下的標(biāo)簽與圖片的距離差異，可以讓人輕易的區(qū)分出，圖片和標(biāo)簽的整體關(guān)系。我們?cè)趧澐謪^(qū)域的時(shí)候，一般內(nèi)容區(qū)中導(dǎo)航區(qū)、數(shù)據(jù)展示和操作可以通過(guò)距離來(lái)劃分，使頁(yè)面歸類(lèi)感更強(qiáng)，提高信息獲取效率。

相似性原則：人們的視覺(jué)判斷中，可以輕易的將相似的元素歸為一類(lèi)，面對(duì)數(shù)量眾多的元素，可以根據(jù)樣式分成若干組合。比如形狀、大小、顏色、方向等都是視覺(jué)判斷的維度。與親密性有一定的相似，但是親密性強(qiáng)調(diào)的是位置，相似性強(qiáng)調(diào)的是內(nèi)容。

在美團(tuán)APP的首頁(yè)中，根據(jù)圖形的樣式，我們可以清晰的分辨出首頁(yè)的金剛區(qū)和內(nèi)容卡片區(qū)。

閉合性原則：人們的視覺(jué)會(huì)主動(dòng)將不完整的圖形補(bǔ)全，形成一個(gè)完整的整體。人類(lèi)的感知是完整的、閉合的。

IBM的logo是閉合原則應(yīng)用的經(jīng)典案例，雖然中間有條形的切割，但是不影響人們識(shí)別出這是字母IBM。

主體與背景原則：當(dāng)兩個(gè)元素重疊在一起，頂部偏小或者明顯的元素往往會(huì)被人們認(rèn)為是主體，會(huì)將底部元素當(dāng)作背景。

比如對(duì)話框的使用，利用前后重疊的空間感，突出對(duì)話框的主體地位，從而清晰的向用戶(hù)傳遞信息。

4.2 遵循用戶(hù)習(xí)慣

在產(chǎn)品調(diào)研前期，我們需要對(duì)用戶(hù)習(xí)慣有全面的認(rèn)識(shí)，比如當(dāng)前用戶(hù)日常常用的軟件是什么，基本的工作流程，具有什么業(yè)務(wù)習(xí)慣。這些采集信息將會(huì)在具體的頁(yè)面布局中給我們帶來(lái)非常大的指導(dǎo)作用。如果說(shuō)設(shè)計(jì)之初對(duì)用戶(hù)是未知的或者刻意差異化，那么用戶(hù)使用和理解平臺(tái)有可能會(huì)帶來(lái)額外的成本。

遵循用戶(hù)習(xí)慣，簡(jiǎn)單來(lái)說(shuō)，就是讓用戶(hù)一眼就能知道平臺(tái)應(yīng)該怎么用，不需要思考就能理解平臺(tái)所提供圖形和語(yǔ)言。當(dāng)然，對(duì)于一些復(fù)雜的流程，還需要建立恰當(dāng)?shù)膸椭到y(tǒng)。

這是一些通用的流程和模版參考，在實(shí)際設(shè)計(jì)過(guò)程中，可能會(huì)反復(fù)的斟酌和考慮，對(duì)前面的一些內(nèi)容再做出調(diào)整，這是無(wú)法避免的，比如有些設(shè)計(jì)師會(huì)在布局中選擇組件，這些都是根據(jù)個(gè)人情況快速實(shí)踐的，并沒(méi)有標(biāo)準(zhǔn)答案。以上是作者自己根據(jù)日常的工作經(jīng)歷復(fù)盤(pán)整理，如果有其他的補(bǔ)充分享，歡迎一起交流。

參考：

• https://ant.design/docs/spec/form-page-cn
• https://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeaw
• https://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ