亞馬遜作為一個(gè)知名的電商平臺(tái)，它的成功背后卻有一個(gè)很難讓人理解的設(shè)計(jì)邏輯：成功的設(shè)計(jì)不一定是美觀的。為什么會(huì)這么說(shuō)呢？本文將從四個(gè)維度展開(kāi)分析，希望對(duì)你有幫助

對(duì)于產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)，在日常工作中做的產(chǎn)品類型主要是兩種：一是B端項(xiàng)目，另一種是C端項(xiàng)目。近些年來(lái)，互聯(lián)網(wǎng)進(jìn)入下半場(chǎng)，C端用戶增長(zhǎng)觸及天花板，流量的紅利逐漸消退。很多企業(yè)的業(yè)務(wù)由C端轉(zhuǎn)向了B端。

隨著企業(yè)業(yè)務(wù)的轉(zhuǎn)變，作為設(shè)計(jì)師的我們，也必須跟上步伐，快速做好角色的轉(zhuǎn)換。當(dāng)然，想從C端設(shè)計(jì)快速切換到B端設(shè)計(jì)，或是從B端設(shè)計(jì)快速切換到C端設(shè)計(jì)并非易事。因?yàn)镃端和B端產(chǎn)品設(shè)計(jì)存在較大的反差。其商業(yè)屬性、產(chǎn)品定位、目標(biāo)用戶、設(shè)計(jì)表達(dá)、業(yè)務(wù)流程等都會(huì)有很大的不同。那么今天這篇文章，我們就一起來(lái)聊聊B端和C端產(chǎn)品設(shè)計(jì)的差異性。

直接進(jìn)入正題，本文將從目標(biāo)用戶、使用場(chǎng)景、產(chǎn)品需求、產(chǎn)品本質(zhì)及特性、產(chǎn)品設(shè)計(jì)思維、設(shè)計(jì)原則等幾個(gè)方面進(jìn)行具體對(duì)比。

01目標(biāo)用戶

C端：
C端釋義為：Consumer，意為消費(fèi)者、個(gè)人用戶或終端用戶，使用的是客戶端。C端產(chǎn)品往往是直接對(duì)接一般消費(fèi)者，直接為廣大消費(fèi)者和用戶提供產(chǎn)品或服務(wù)。例如：微信、微博、抖音等等。

B端：
B端釋義為：Business，意為企業(yè)用戶或商業(yè)用戶。B端產(chǎn)品往往是為針對(duì)這類用戶開(kāi)發(fā)的系統(tǒng)型軟件、工具或平臺(tái)。例如：CRM 系統(tǒng)、 ERP 系統(tǒng)、OA系統(tǒng)、SAAS等等。

02使用場(chǎng)景

C端：
它會(huì)存在于我們生活中的各種場(chǎng)景，而且自由度非常高，當(dāng)然也包含工作場(chǎng)景，比如周末在家無(wú)聊刷刷微博了解下國(guó)際大事、晚上睡前打開(kāi)蝦米聽(tīng)聽(tīng)歌、在工作間隙打開(kāi)某團(tuán)點(diǎn)個(gè)外賣等等，因此，C端產(chǎn)品的用戶大部分使用場(chǎng)景是碎片化的。

B端：
B端產(chǎn)品更多的是在企業(yè)版內(nèi)部使用，更多的是為了滿足企業(yè)相關(guān)用戶在“工作場(chǎng)景”下完成協(xié)同工作的一些特定組織需求。

03產(chǎn)品需求

C端：
想很好的挖掘C端產(chǎn)品需求，這要求我們做更細(xì)致的用戶畫(huà)像，比如：用戶的性別、年齡、職業(yè)、文化程度、收入水平、個(gè)人喜好等都會(huì)影響到功能設(shè)計(jì)。然后通過(guò)用戶畫(huà)像、同理心等方法對(duì)用戶的行為進(jìn)行詳細(xì)分析，以發(fā)掘用戶具體需求。

B端：
B端產(chǎn)品一般是基于現(xiàn)有的“業(yè)務(wù)”形態(tài)，將傳統(tǒng)線下工作，通過(guò)程序化、系統(tǒng)化、信息化轉(zhuǎn)換為線上產(chǎn)品，從而提升企業(yè)協(xié)同效率，降低辦公成本。需求一般來(lái)源于產(chǎn)品戰(zhàn)略定位、使用者個(gè)性需求等。

04產(chǎn)品本質(zhì)及特性

C端：
C端產(chǎn)品的本質(zhì)基本都是一個(gè)核心功能，例如：社交類app的核心功能就是好友快速溝通；電商類app的核心功能就是購(gòu)物；視頻類app的核心功能就是看視頻。在核心功能之外的都是一些“增值功能”，比如評(píng)論，點(diǎn)贊，分享等。如果除去這些附加功能，雖然會(huì)影響用戶體驗(yàn)，但并不會(huì)妨礙核心功能的使用。

其產(chǎn)品特性可簡(jiǎn)單總結(jié)為一個(gè)詞-分享。在使用C端產(chǎn)品時(shí)，用戶都希望自己的“行為”能夠得到其他用戶的認(rèn)可。比如：對(duì)自己分享的內(nèi)容進(jìn)行評(píng)論、分享、打賞等。

B端：
B端產(chǎn)品的本質(zhì)是滿足用戶的工作需要，而公司內(nèi)大部分工作，我們幾乎是無(wú)法獨(dú)立完成的。這意味著我們需要和其他同事協(xié)同去完成一個(gè)任務(wù)的閉環(huán)。因此，B端產(chǎn)品的業(yè)務(wù)邏輯會(huì)相對(duì)更加復(fù)雜。

B端產(chǎn)品的特性也非常明確——即“協(xié)同工作”。處于信息化時(shí)代的企業(yè)中，幾乎已沒(méi)有可以單獨(dú)完成而不需要協(xié)同的工作了。

05產(chǎn)品設(shè)計(jì)思維

C端：
在上面我們已經(jīng)提到過(guò)，C端產(chǎn)品的本質(zhì)基本都是一個(gè)核心功能。因此，在設(shè)計(jì)前期，作為設(shè)計(jì)師的我們必須對(duì)產(chǎn)品進(jìn)行全方面的考慮。到底那一個(gè)功能是我們產(chǎn)品的核心?哪些功能只是錦上添花?

此外，目前市場(chǎng)上C端產(chǎn)品同質(zhì)化異常嚴(yán)重。想要產(chǎn)品獨(dú)具一格，就必須突出特色，堅(jiān)持自身的品牌亮點(diǎn)，才能讓用戶快速記住這個(gè)產(chǎn)品或者品牌。

B端：
B端產(chǎn)品的本質(zhì)則是滿足用戶的工作需要，協(xié)同工作。對(duì)于企業(yè)來(lái)說(shuō)，更多關(guān)注的是工作效率和成本。這也是B端產(chǎn)品最終的解決問(wèn)題方向：如何提升企業(yè)的運(yùn)營(yíng)效率。因此，在設(shè)計(jì)過(guò)程中，我們需要不斷的去優(yōu)化產(chǎn)品流程、調(diào)整策略等。

06設(shè)計(jì)原則

C端：
在設(shè)計(jì)過(guò)程中，除了要抓住核心功能外，還需要給產(chǎn)品增加趣味性和創(chuàng)意性。趣味性，也就是要給用戶帶來(lái)積極的正面情緒，如：能使用戶感到心情愉悅，感染人，打動(dòng)人，引起用戶心靈共鳴等；創(chuàng)意性，也就是要做出與同類產(chǎn)品不一樣的東西，而這些新東西又是解決了用戶某些痛點(diǎn)的。當(dāng)然，做這些最終的目的是為了提升流量、留存率及轉(zhuǎn)化率。

B端：
B端產(chǎn)品的需求往往是要解決一個(gè)企業(yè)中不同角色（普通成員，管理員、超級(jí)管理員等）之間的協(xié)助關(guān)系，在設(shè)計(jì)過(guò)程中一般需遵循如下設(shè)計(jì)原則：合理的功能與模塊劃分、嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)、干凈簡(jiǎn)潔的界面設(shè)計(jì)等。

在這里，筆者整理了幾個(gè)優(yōu)秀的B端產(chǎn)品設(shè)計(jì)案例，供讀者參考。

登錄界面設(shè)計(jì)

C端：

B端：

都是登錄頁(yè)面，差別卻是如此之大。站酷面向的C端用戶，賬號(hào)登錄支持手機(jī)號(hào)、郵箱以及第三方（微信、微博、QQ）方式。對(duì)于用戶來(lái)說(shuō)，選擇非常多，可以說(shuō)是非常人性化，大大提升了用戶體驗(yàn)。

而網(wǎng)易郵箱面向的B端企業(yè)客戶，賬號(hào)登錄僅支持郵箱登錄一種方式，且用戶登錄時(shí)還得首先確認(rèn)自己的身份是普通用戶還是管理員。這也說(shuō)明，在設(shè)計(jì)B端產(chǎn)品時(shí)，得充分考慮不同角色的權(quán)限問(wèn)題。

導(dǎo)航欄設(shè)計(jì)

C端：

B端：

導(dǎo)航欄的設(shè)計(jì)布局有很多方式，面向C端用戶的站酷使用了頂部導(dǎo)航的模式，這也是最常見(jiàn)的主導(dǎo)航模式。二級(jí)導(dǎo)航聚合在下拉菜單里面，鼠標(biāo)hover出現(xiàn)。這種導(dǎo)航方式非常直觀，訪客可以快速的定位自己感興趣的模塊，另外，可以很好的展示內(nèi)容區(qū)域，對(duì)于訪客來(lái)說(shuō)，非常友好。

面向B端用戶的愛(ài)客CRM系統(tǒng)使用的是側(cè)邊欄導(dǎo)航，使得導(dǎo)航展示更加清晰，頁(yè)面之間的切換也非常方便。這種布局方式一般用于管理后臺(tái)偏多，與B端產(chǎn)品業(yè)務(wù)復(fù)雜性密不可分的。

B端產(chǎn)品原型實(shí)例

當(dāng)我們明確了具體的需求后，就可以動(dòng)手制作可交互原型了，這樣可以很好表達(dá)出整體邏輯，讓客戶直觀的看到功能和效果，獲得較真實(shí)的感受，并在不斷討論的基礎(chǔ)上完善未來(lái)的設(shè)計(jì)思想。接下來(lái)，一起來(lái)看看我用Mockplus做的B端產(chǎn)品原型效果：

原型演示地址：https://run.mockplus.cn/4oEh4pCz7K9GRtlS/index.html

文末福利

最后，我為大家準(zhǔn)備了一份小福利。

產(chǎn)品團(tuán)隊(duì)的溝通離不開(kāi)原型，今天為大家推薦的原型設(shè)計(jì)工具M(jìn)ockplus，更快更簡(jiǎn)單，5分鐘制作一個(gè)交互原型頁(yè)面。支持團(tuán)隊(duì)協(xié)作和在線審閱。

點(diǎn)擊下方鏈接可以免費(fèi)領(lǐng)取Mockplus的個(gè)人版15天，數(shù)量有限，先到先得。

領(lǐng)取地址：https://www.mockplus.cn/home/promote

小結(jié)：

雖然C端和B端產(chǎn)品在目標(biāo)用戶、使用場(chǎng)景、產(chǎn)品需求、產(chǎn)品本質(zhì)及特性、產(chǎn)品設(shè)計(jì)思維、設(shè)計(jì)原則上都有所差異，但是C端和B端產(chǎn)品也有很多共同點(diǎn)，如：都要求產(chǎn)品簡(jiǎn)單實(shí)用和有效準(zhǔn)確，都是為了更好的滿足用戶的需求，解決用戶的痛點(diǎn)等。如果能做好以上這些關(guān)鍵點(diǎn)，無(wú)論是做C端還是B端，都會(huì)是非常優(yōu)秀的產(chǎn)品。

轉(zhuǎn)自：ui

編輯導(dǎo)語(yǔ)：你有沒(méi)有設(shè)計(jì)過(guò)結(jié)構(gòu)復(fù)雜、內(nèi)容繁多的表單？在設(shè)計(jì)時(shí)有沒(méi)有什么技巧可以化繁為簡(jiǎn)、提升填寫(xiě)者的體驗(yàn)感呢？本文作者為我們羅列出了表單設(shè)計(jì)中可能遇到的一些問(wèn)題，并且提供了解決方案，讓我們一起來(lái)學(xué)習(xí)吧。

距離上次發(fā)文已經(jīng)快半年多了，實(shí)在是慚愧，好久沒(méi)有輸出內(nèi)容了，看著每周增加的零星關(guān)注人數(shù)，內(nèi)心更加焦灼難安。

這半年來(lái)我換了工作，也適應(yīng)了新的環(huán)境，同時(shí)也在思考新的方向，估計(jì)和大多數(shù)的設(shè)計(jì)師一樣，迷茫時(shí)常伴隨著我。前段時(shí)間寫(xiě)了幾周的產(chǎn)品體驗(yàn)日記，但覺(jué)得缺乏深度就沒(méi)發(fā)上來(lái)，后續(xù)我將會(huì)繼續(xù)寫(xiě)產(chǎn)品體驗(yàn)日記，完善后分享給大家。

2020所剩無(wú)多了，我也會(huì)將積攢下的一些內(nèi)容陸陸續(xù)續(xù)發(fā)上來(lái)與大家分享，感謝關(guān)注，感謝閱讀。哈哈哈哈

一、導(dǎo)語(yǔ)

你平時(shí)填寫(xiě)過(guò)的最復(fù)雜的表單是什么？調(diào)查問(wèn)卷還是文檔信息錄入？如果一個(gè)表單字段內(nèi)容巨多、結(jié)構(gòu)多變、填寫(xiě)耗時(shí)耗力，那你將如何設(shè)計(jì)你的表單使之體驗(yàn)更佳？

面臨的問(wèn)題:

1. 業(yè)務(wù)復(fù)雜，功能較多

不知道大家是否看過(guò)法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊；類似的文檔如果進(jìn)行線上結(jié)構(gòu)化，勢(shì)必要同樣要花費(fèi)巨大的人力去填寫(xiě)表單，完成基礎(chǔ)信息的錄入工作。

同時(shí)，由于錄入的時(shí)間不確定，流程不明確等問(wèn)題，也制約著表單的填寫(xiě)。

2. 流程較長(zhǎng)，操作繁瑣

多個(gè)不同表單之間的互有關(guān)聯(lián)又相互區(qū)別，填寫(xiě)的時(shí)候需要來(lái)回查看以確認(rèn)信息，查閱和填寫(xiě)相互并行，操作繁瑣。

3. 字段較多，關(guān)聯(lián)項(xiàng)較多

幾乎每一個(gè)字段都有對(duì)應(yīng)的關(guān)聯(lián)項(xiàng)，每個(gè)單選字段的不同項(xiàng)決定不同的內(nèi)容。同時(shí)，由于字段數(shù)量，層級(jí)劃分不明確，會(huì)使填寫(xiě)的人失去定位，產(chǎn)生迷惑。

二、解決方案

1. 內(nèi)容分組，分步填寫(xiě)

根據(jù)業(yè)務(wù)內(nèi)容分級(jí)，合理運(yùn)用顏色、間距、字體大小、卡片層級(jí)等進(jìn)行信息分級(jí)。

2. 實(shí)時(shí)保存，避免數(shù)據(jù)丟失，提供草稿功能，避免任務(wù)中斷

3.字段分組，示意結(jié)構(gòu)，聯(lián)動(dòng)項(xiàng)隱喻

4. 信息自動(dòng)帶入，節(jié)省時(shí)間

一般表單是與某項(xiàng)功能掛鉤的，信息會(huì)在多個(gè)入口錄入。因此在填寫(xiě)長(zhǎng)表單的時(shí)候，如果能從系統(tǒng)中自動(dòng)獲取到數(shù)據(jù)，就可以自動(dòng)為其填充，可根據(jù)業(yè)務(wù)場(chǎng)景，判斷是否讓其修改和更新。

5. 提供二次編輯功能，防止信息輸入有誤

一般的長(zhǎng)表單在涉及非審批流的時(shí)候，可以讓其無(wú)限二次編輯；如果是處于審批流，則需要根據(jù)業(yè)務(wù)場(chǎng)景限制其編輯次數(shù)或者限定其編輯規(guī)則（草稿可編輯，一旦提交則不可編輯）。

6.提供多人協(xié)作編輯功能

如果一個(gè)長(zhǎng)表單，需要多個(gè)不同的業(yè)務(wù)域的人來(lái)填寫(xiě)，那么需要協(xié)同編輯，并實(shí)時(shí)顯示編輯的人員信息。

同時(shí)，為了避免信息丟失和編輯錯(cuò)亂，在同一個(gè)表單下，同一時(shí)間應(yīng)該限制只允許一個(gè)人進(jìn)行編輯，等其提交完后，可允許其他人進(jìn)行編輯。

7. 實(shí)時(shí)檢驗(yàn)

前端實(shí)時(shí)校驗(yàn)字段輸入規(guī)則，后端統(tǒng)一校驗(yàn)信息交換規(guī)則。

比如對(duì)于數(shù)字輸入框的校驗(yàn)、電話號(hào)碼的校驗(yàn)、身份證號(hào)的校驗(yàn)，應(yīng)該在前端實(shí)時(shí)完成。

在鼠標(biāo)離開(kāi)焦點(diǎn)區(qū)域或定位到下一個(gè)字段的時(shí)候，提示其填寫(xiě)有誤；這樣做的目的是減少后續(xù)修改的次數(shù)，在長(zhǎng)表單下，統(tǒng)一提示其填寫(xiě)錯(cuò)誤會(huì)是一場(chǎng)災(zāi)難。

在點(diǎn)擊保存并填寫(xiě)下一步或點(diǎn)擊提交信息的時(shí)候，就需要跟后端交換數(shù)據(jù)，驗(yàn)證錄入的信息；如果不匹配，則提示錯(cuò)誤，并從上至下定位至相應(yīng)的錯(cuò)誤字段。

8.做好填寫(xiě)引導(dǎo)功能

要通過(guò)多種方式，引導(dǎo)表單的填寫(xiě)。

1）在開(kāi)始填寫(xiě)之前，簡(jiǎn)要說(shuō)明該表單的業(yè)務(wù)目標(biāo)，大概需要花費(fèi)的時(shí)間等；

2）開(kāi)始填寫(xiě)后，關(guān)于每個(gè)字段的特殊說(shuō)明，都需要標(biāo)注出來(lái)。重要的要顯示在頁(yè)面上，不重要的就收起在注釋符號(hào)中；

3）填寫(xiě)的過(guò)程中，切記不要到最后才告訴用戶哪里出錯(cuò)了，重要的信息一定要提示到位，否則一旦出錯(cuò)，前功盡棄；

4）填寫(xiě)完成后，引導(dǎo)其下一步的操作，或者返回至列表。

9. 詳情頁(yè)也需要注意信息分級(jí)

表單填寫(xiě)完畢后的產(chǎn)出物就是詳情頁(yè)，詳情頁(yè)是需要瀏覽的。因此在設(shè)計(jì)詳情頁(yè)的時(shí)候，應(yīng)該本著讓用戶瀏覽方便的原則去設(shè)計(jì)，需要注意以下幾個(gè)點(diǎn)：

1）結(jié)構(gòu)清晰

結(jié)構(gòu)清晰是指不要講內(nèi)容一股腦的全堆在頁(yè)面上，要做好信息的分類；同時(shí)，注意規(guī)劃頁(yè)面的層級(jí)。

2）設(shè)置快捷導(dǎo)航

如果一個(gè)表單是長(zhǎng)且復(fù)雜的，那么其對(duì)應(yīng)的詳情頁(yè)也會(huì)變得復(fù)雜和冗長(zhǎng)，因此在頁(yè)面的右側(cè)或者頂部設(shè)置合理的快捷導(dǎo)航是很有必要的。

三、小細(xì)節(jié)，大體驗(yàn)

1. 提供快速返回頂部的按鈕

快速返回頂部按鈕的使用要注意場(chǎng)景，如果你的頁(yè)面比較長(zhǎng)，且沒(méi)有分組瀏覽的導(dǎo)航，那就需要設(shè)置快速返回頂部的按鈕。

但是在存在分組瀏覽導(dǎo)航和頂部懸浮標(biāo)簽的情況下，不建議使用快速返回頂部的按鈕，因?yàn)樵谔顚?xiě)表單的時(shí)候，使用快速置頂?shù)膱?chǎng)景比較少。

2. 提供分組模塊收起展開(kāi)功能

當(dāng)一個(gè)模塊混雜著各種信息的時(shí)候，單純的模塊分組已經(jīng)無(wú)法處理它的復(fù)雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁(yè)面的復(fù)雜度。

3. 步驟提供信息填寫(xiě)完成度提示

步驟條可以單純的作為步驟指示器使用，也可以作為一個(gè)表單完成度的提示區(qū)域。

4. 重要說(shuō)明性文字盡量顯示而非收起

在填寫(xiě)大量字段的表單時(shí)，閱讀表單內(nèi)容和填寫(xiě)表單同樣耗時(shí)耗力。

如果我們將所有的提示信息隱藏在提示符中，一般情況下用戶不會(huì)去查看；但是如果去挨個(gè)查看提示信息，則會(huì)多花費(fèi)一個(gè)步驟去點(diǎn)擊或者懸停來(lái)查看提示信息，浪費(fèi)了大量的時(shí)間。

因此如果涉及到重要的提示信息，請(qǐng)直接展示在字段的后面，不要隱藏起來(lái)。

5. 產(chǎn)品內(nèi)組件應(yīng)該規(guī)范統(tǒng)一

在后臺(tái)產(chǎn)品上，關(guān)于組件的規(guī)范統(tǒng)一，想必是人盡皆知的設(shè)計(jì)原則。

無(wú)論是各類平臺(tái)型設(shè)計(jì)組件，還是各個(gè)公司自造的設(shè)計(jì)組件，保持統(tǒng)一和規(guī)范對(duì)產(chǎn)品設(shè)計(jì)有著重要的作用，在這里不贅述組件應(yīng)該怎樣規(guī)范統(tǒng)一。

因?yàn)闊o(wú)論是Ant Design還是其他設(shè)計(jì)語(yǔ)言，都有詳盡的關(guān)于組件的定義方法，我在這里講述一個(gè)產(chǎn)品設(shè)計(jì)更高層面或者更深層面的原因：

組件的規(guī)范統(tǒng)一并不僅僅是為了省時(shí)省力，而是為了使用戶在使用的過(guò)程中達(dá)到認(rèn)知上的統(tǒng)一和行為上的統(tǒng)一，在進(jìn)行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象。

因此在操作相同類的流程時(shí)，用戶會(huì)有更多的掌控感，試想一下：如果你在操作人事相關(guān)的流程后，去填寫(xiě)績(jī)效部分的內(nèi)容時(shí)，發(fā)現(xiàn)一個(gè)迥異的界面或者彈窗，你肯定覺(jué)得這是不是哪里出錯(cuò)了，甚至?xí)岩蛇@是否是同一個(gè)系統(tǒng)。

目前大多數(shù)公司的管理系統(tǒng)經(jīng)過(guò)多次縫縫補(bǔ)補(bǔ)，內(nèi)部的跳轉(zhuǎn)邏輯已經(jīng)異常感人，界面風(fēng)格也大放異彩，但是使用起來(lái)卻無(wú)從下手，深感迷茫。

因此大到界面樣式，小到間距大小，產(chǎn)品設(shè)計(jì)的規(guī)范和統(tǒng)一應(yīng)該是最基礎(chǔ)又不可缺少的原則。

6.龐大的信息錄入，表單內(nèi)部要分步填寫(xiě)，外部可拆分成不同的表單分別填寫(xiě)

對(duì)付復(fù)雜的表單，你需要解決的主要問(wèn)題并不是填寫(xiě)方式或者頁(yè)面設(shè)計(jì)，而是信息分級(jí)和結(jié)構(gòu)拆分。解決了這個(gè)問(wèn)題，基本上就解決了業(yè)務(wù)問(wèn)題，其余部分就跟我們常用的表單一致。

將復(fù)雜度降低并不意味著減少頁(yè)面的信息，而是通過(guò)設(shè)計(jì)師合理的信息劃分，降低視覺(jué)上的復(fù)雜度和流程上的復(fù)雜度，這樣才會(huì)達(dá)到當(dāng)前場(chǎng)景下的“最佳解決方案”。

四、結(jié)語(yǔ)

隨著互聯(lián)網(wǎng)信息化的深入發(fā)展，復(fù)雜是避免不了的。

我知道大家都推崇簡(jiǎn)潔的設(shè)計(jì)，但那只是對(duì)視覺(jué)和樣式的定義，而非對(duì)信息的定義。

我們所處的世界是復(fù)雜的，行業(yè)更是復(fù)雜的。信息的復(fù)雜度與日俱增，想要處理復(fù)雜的信息，就需要從復(fù)雜中尋求規(guī)律，這規(guī)律與業(yè)務(wù)息息相關(guān)。

B端360行，行行深如海，小伙伴們，我們一起慢慢修煉吧~

文章來(lái)源：人人都是產(chǎn)品經(jīng)理           作者：米蘭小鐵匠

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

       看到知乎上的一個(gè)問(wèn)題：如何找到一家好的高端網(wǎng)站設(shè)計(jì)公司？

       把回答的內(nèi)容也轉(zhuǎn)過(guò)來(lái)記錄一下。

       首先回答：何為高端？



       高端與低端是對(duì)應(yīng)的，目前網(wǎng)站設(shè)計(jì)，中低端基本是用模板改改，相對(duì)價(jià)格低，有一些小型公司或不依靠網(wǎng)站運(yùn)營(yíng)收入的公司，“有個(gè)網(wǎng)站就好”，所以可以用這種低投入，內(nèi)容有就行的網(wǎng)站建設(shè)公司，特點(diǎn)是馬上就能用，三五天把內(nèi)容發(fā)布進(jìn)去就可以。備案可能需要一定時(shí)間。



       高端設(shè)計(jì)公司，一般是量身定做，為企業(yè)做網(wǎng)站策劃、分析，按照用戶研究、網(wǎng)站建站的目的來(lái)進(jìn)行網(wǎng)站的定制欄目頁(yè)的設(shè)計(jì)。做競(jìng)品分析、研究對(duì)方的優(yōu)缺點(diǎn)，設(shè)計(jì)的色系和企業(yè)標(biāo)準(zhǔn)色、情感表達(dá)、人物場(chǎng)景、用戶體驗(yàn)思維，越深入，思考越成熟，做的網(wǎng)站品質(zhì)越有保障。所以需要的時(shí)間、精力、投入相對(duì)多。



       因?yàn)橥度胂鄬?duì)多，所以經(jīng)營(yíng)業(yè)績(jī)好的企業(yè)、集團(tuán)公司、營(yíng)銷類大型網(wǎng)站來(lái)定制的比較多。



       我們公司“北京藍(lán)藍(lán)設(shè)計(jì)”就是為定制的高端企業(yè)用戶、政府網(wǎng)站、軟件公司來(lái)服務(wù)的。我們挺喜歡要求高的客戶，這樣能體現(xiàn)出專業(yè)設(shè)計(jì)的水平，這也是我們和其它建站公司區(qū)別開(kāi)來(lái)的地方。



       我們主要是給大型軟件公司平臺(tái)、系統(tǒng)做UE、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)，用戶體驗(yàn)優(yōu)化，這個(gè)，比網(wǎng)站設(shè)計(jì)更難，更專業(yè)。 往往一個(gè)公司的核心產(chǎn)品，值得把精力金錢投入到上面，產(chǎn)出最大的回報(bào)。近年來(lái)，除了做軟件UI，大屏大數(shù)據(jù)可視化項(xiàng)目外，我們也擴(kuò)展了“愿意把公司網(wǎng)站做成核 心產(chǎn)品”這樣的公司成為合作伙伴，更好的為客戶提供全方位的服務(wù)。



       一旦成為我們的客戶，設(shè)計(jì)無(wú)憂。

       我們一定會(huì)把該做的事做好，并提供超值服務(wù)和額外附加值的。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

本篇文章將分享Web端表單體驗(yàn)優(yōu)化等相關(guān)內(nèi)容，分析設(shè)計(jì)師在設(shè)計(jì)B端類產(chǎn)品時(shí)如何讓用戶愉悅并的填寫(xiě)表單。

表單作為基礎(chǔ)通用組件，也是在各個(gè)企業(yè)級(jí)中臺(tái)中出現(xiàn)頻率最高的元素之一。在用戶界面中表單無(wú)處不在，比如：用戶注冊(cè)登陸頁(yè)、支付頁(yè)、用戶反饋、共享信息數(shù)據(jù)錄入等不同類型的表單。當(dāng)我們使用/設(shè)計(jì)表單頁(yè)面時(shí)看似是按鈕、輸入框等表單組件進(jìn)行組合搭配使用，看似簡(jiǎn)單，但是在實(shí)際業(yè)務(wù)使用中卻有著無(wú)數(shù)可推敲的細(xì)節(jié)冒出來(lái)，常常給設(shè)計(jì)師造成較多的困擾。

那么在實(shí)際工作中哪些內(nèi)容會(huì)給設(shè)計(jì)造成困擾呢？舉幾個(gè)例子：在實(shí)際的業(yè)務(wù)中很多產(chǎn)品因?yàn)闃I(yè)務(wù)導(dǎo)向需要入海（非中國(guó)區(qū)方向），所以就存在表單標(biāo)簽對(duì)齊方式問(wèn)題，如果右對(duì)齊可能在中文的情況下表單標(biāo)簽預(yù)設(shè)寬度正好合適，但是當(dāng)用戶切換到多語(yǔ)言時(shí)因?yàn)檎Z(yǔ)言差異會(huì)導(dǎo)致折行嚴(yán)重等一些列問(wèn)題，相當(dāng)影響體驗(yàn)；設(shè)計(jì)師常常疑惑表單標(biāo)簽是頂部對(duì)齊、右對(duì)齊還是左對(duì)齊，他們的差異點(diǎn)在哪呢？必填與非必填項(xiàng)以什么形式告訴用戶會(huì)更加合理呢？表單按鈕放在頁(yè)面哪個(gè)位置體驗(yàn)會(huì)更佳呢？

所以我們不能忽視這些設(shè)計(jì)細(xì)節(jié)，往往一些好的設(shè)計(jì)細(xì)節(jié)提升總會(huì)給用戶帶來(lái)不一樣的用戶體驗(yàn)。針對(duì)以上這些舉重若輕的問(wèn)題我們一一明確、拋出并與大家一起來(lái)進(jìn)行由淺至深的探討「如何提升表單體驗(yàn)」。

重點(diǎn)概覽

一、表單分析

二、體驗(yàn)與優(yōu)化
三、排列與布局
四、寫(xiě)在最后 

表單分析

1.1 表單的重要性

在上面的前言中也提到了表單作為基礎(chǔ)通用組件，也是在各個(gè)企業(yè)級(jí)中臺(tái)中出現(xiàn)頻率最高的元素之一。并且在《Web Form Design》一書(shū)中 Luke Wroblewsk 也提到了“表單決定了最關(guān)鍵的界面中交互的成敗”，當(dāng)用戶使用網(wǎng)站時(shí)會(huì)有一個(gè)特定目標(biāo)，如果設(shè)計(jì)得好，網(wǎng)站將實(shí)現(xiàn)有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環(huán)境下所達(dá)到的特定目標(biāo)，也是設(shè)計(jì)師想要達(dá)成的最終目標(biāo)。表單往往是目標(biāo)用戶和整個(gè)產(chǎn)品的一所橋梁。因?yàn)椋M管人機(jī)交互的發(fā)展進(jìn)步，表單仍然是用戶在網(wǎng)絡(luò)中進(jìn)行交互的主要方式。所以表單是被認(rèn)為完成目標(biāo)的最終，也是最重要的階段。

我們以淘寶來(lái)舉個(gè)典型的例子，淘寶屬于國(guó)民電商平臺(tái)也是亞洲較大的網(wǎng)上交易平臺(tái)，提供各類優(yōu)質(zhì)商品。從平臺(tái)的特性來(lái)講，它以用戶下單并成交作為最終目標(biāo)。其中支付表單起著一個(gè)關(guān)鍵的作用，用戶從購(gòu)買到支付完成以分步形式進(jìn)行，第一步填寫(xiě)基本信息并提交訂單，第二步選擇商品并選擇支付貨款至第三方，第三步買方確認(rèn)收貨并自動(dòng)打款給商家，第四步完成訂單并評(píng)價(jià)。在填寫(xiě)表單時(shí)中間沒(méi)任何阻斷，用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。

1.2 拆分表單

我們簡(jiǎn)單提一下表單組成（網(wǎng)上有很多詳細(xì)的相關(guān)文章），一個(gè)完整較復(fù)雜的表單是由7個(gè)基本組成部分，表單類別、表單標(biāo)簽、表單基本組件、占位提示、幫助信息、按鈕、校驗(yàn)。表單可以包含以上組成部分，但不是一定都要有，比如：移動(dòng)端填寫(xiě)驗(yàn)證碼時(shí)為了減少用戶操作，當(dāng)用戶填寫(xiě)完成之后直接提交表單驗(yàn)證。

表單類別：第一時(shí)間告訴用戶此段落的表單大致內(nèi)容，減少用戶理解并承擔(dān)著概括內(nèi)容的作用；

表單組件：包含了輸入框、下拉框、日期選擇器、時(shí)間選擇器、開(kāi)關(guān)、上傳等十幾種類型，是形成表單的核心內(nèi)容；

表單標(biāo)簽：表單標(biāo)簽承擔(dān)著對(duì)輸入項(xiàng)或設(shè)置項(xiàng)的解釋作用，所以表單標(biāo)簽需要合理設(shè)置，核心點(diǎn)是幫助用戶快速理解每一項(xiàng)字段的作用；

占位提示：使用通用的認(rèn)知提示并且以較弱的方式呈現(xiàn)給用戶，用戶填完信息即消失。注意：占位提示不能替代標(biāo)簽，因?yàn)橄У恼嘉惶崾緯?huì)拉長(zhǎng)用戶的短期記憶，如果沒(méi)有表單標(biāo)簽用戶將無(wú)法在提交表單前檢查他們填寫(xiě)的所有信息。文章下面會(huì)詳細(xì)分析。

幫助信息：當(dāng)表單標(biāo)簽不足以對(duì)輸入項(xiàng)準(zhǔn)確說(shuō)明時(shí)，這時(shí)候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達(dá)到的目的。

按鈕：當(dāng)用戶完成信息錄入時(shí)，按鈕能夠?qū)Ρ韱蝺?nèi)容進(jìn)行校驗(yàn)或提交。

校驗(yàn)：對(duì)用戶信息錄入內(nèi)容進(jìn)行校驗(yàn)并給出對(duì)應(yīng)的錯(cuò)誤提示。如：內(nèi)容是否為空、類型格式是否正確、是否符合業(yè)務(wù)邏輯等等。校驗(yàn)時(shí)有兩種規(guī)則，分別是使用即時(shí)校驗(yàn)（失焦即校驗(yàn)）和點(diǎn)擊提交按鈕以后的最終校驗(yàn)。狀態(tài)分別為錯(cuò)誤、警示、成功。

1.3 表單類型

基礎(chǔ)表單

較為簡(jiǎn)單的一類表單，把所有表單字段平鋪在頁(yè)面中，字段內(nèi)容較少。當(dāng)用戶輸入少量信息即可完成一個(gè)簡(jiǎn)單快速的任務(wù)。例如：此類型表單常常用在簡(jiǎn)單的登錄注冊(cè)中。

分步表單

較為復(fù)雜的一類表單，把一個(gè)相對(duì)復(fù)雜的表單字段拆解為多個(gè)步驟進(jìn)行。根據(jù)業(yè)務(wù)屬性進(jìn)行步驟分組利用步驟條告訴用戶所完成的流程和進(jìn)度，當(dāng)用戶每次填寫(xiě)都意味著一次節(jié)點(diǎn)完成，整個(gè)流程結(jié)束給予明確的結(jié)果反饋，并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復(fù)雜的造成的填寫(xiě)負(fù)擔(dān)，并且能減少用戶表單填寫(xiě)出錯(cuò)率。

分組表單
 將一個(gè)復(fù)雜表單拆解歸類分組。分組表單與分布表單特點(diǎn)較為相似，都可以減輕用戶因?yàn)楸韱未蠖鴱?fù)雜的造成填寫(xiě)的負(fù)擔(dān)，并且能減少用戶表單填寫(xiě)出錯(cuò)率

體驗(yàn)與優(yōu)化

1.1 必填項(xiàng)or可選項(xiàng)

在設(shè)計(jì)表單時(shí)大多數(shù)設(shè)計(jì)師都習(xí)慣性的使用星號(hào)表示必填字段。但那么問(wèn)題來(lái)了，針對(duì)必填項(xiàng)和可選項(xiàng)用那種形式才是最科學(xué)的呢？我們簡(jiǎn)單分析一下。

當(dāng)表單中的必填信息多于非必填信息時(shí)，如果使用紅色星號(hào)表示必填項(xiàng)，那么大量紅色星號(hào)導(dǎo)致增加用戶的認(rèn)知負(fù)擔(dān)，使得用戶無(wú)法快速識(shí)別哪些是必須填寫(xiě)的，哪些是不必須填寫(xiě)。并且使用紅色星號(hào)會(huì)帶給用戶一些恐懼感，它增加了出錯(cuò)的風(fēng)險(xiǎn)并降低了表單填寫(xiě)率。因此在表單設(shè)計(jì)中，當(dāng)必填項(xiàng)多于非必填項(xiàng)時(shí)，隱藏紅色星號(hào)標(biāo)記，通過(guò)暗提示標(biāo)記可選項(xiàng)的形式來(lái)幫助用戶識(shí)別。

紅色星號(hào)對(duì)于不同用戶也會(huì)存在不同的認(rèn)知差異。對(duì)比較有經(jīng)驗(yàn)的用戶可能表意較為明顯，但不代表所有用戶都能理解，比如一些非中國(guó)區(qū)用戶使用國(guó)際化產(chǎn)品時(shí)存在不同認(rèn)知，因?yàn)槊總€(gè)國(guó)家本地化差異較大導(dǎo)致認(rèn)知差異。

還有一點(diǎn)是表單中視覺(jué)噪聲越少可讀性越強(qiáng)，因此當(dāng)必填項(xiàng)多于非必填用非必填字段提示用戶會(huì)更好。

1.2 單列布局or多列布局

多列表單字段會(huì)導(dǎo)致用戶視覺(jué)路徑變長(zhǎng)，因?yàn)槿绻韱沃杏兴较噜彽淖侄危瑒t用戶必須以Z樣式進(jìn)行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長(zhǎng)用戶閱讀時(shí)間。多列表單可能會(huì)存在用戶跳過(guò)他們實(shí)際要輸入的必填字段，將數(shù)據(jù)輸入到錯(cuò)誤字段中。而最終校驗(yàn)信息時(shí)用戶得反復(fù)檢查錯(cuò)誤項(xiàng)導(dǎo)致用戶放棄填寫(xiě)。

如果表單使用單列，則完成的路徑是頁(yè)面垂直向下的一條直線，單列布局能夠給用戶呈現(xiàn)一條清晰的視覺(jué)路。因此，表單較為簡(jiǎn)單時(shí)盡量避免將表單分成多列，在業(yè)務(wù)場(chǎng)景允許的情況盡量使用單列（部分業(yè)務(wù)訴求和一些特定場(chǎng)景要求，多列布局會(huì)更節(jié)省垂直空間，但是多列布局需要考慮字段之間的關(guān)聯(lián)性，這里不強(qiáng)求一定只能使用單列布局）。

1.3 將復(fù)雜的表單分為幾個(gè)簡(jiǎn)單的步驟

在設(shè)計(jì)師設(shè)計(jì)表單時(shí)可能業(yè)務(wù)場(chǎng)景復(fù)雜、字段較多，即使設(shè)計(jì)師把很多不必要的字段都刪除也解決不了根本問(wèn)題。所以，這時(shí)候設(shè)計(jì)師需要將大型任務(wù)分解為一系列較小的任務(wù)，使得表單更加的簡(jiǎn)潔。這種方式的好處是能將步驟以視覺(jué)的方式傳達(dá)給用戶數(shù)量、名稱、說(shuō)明等信息，更加提高用戶滿意度并且能激勵(lì)繼續(xù)填寫(xiě)。

但是設(shè)計(jì)師需要注意的是不要太過(guò)于細(xì)化步驟以及在小型彈出窗出現(xiàn)過(guò)多的步驟，過(guò)多的步驟不利與用戶填寫(xiě)和記憶，反而增加用戶負(fù)擔(dān)。

1.4 按鈕的位置

按鈕放在頁(yè)面左下角比較好還是放右下角比較好？這是設(shè)計(jì)師在設(shè)計(jì)表單時(shí)常常糾結(jié)的一個(gè)問(wèn)題。其實(shí)在14世紀(jì)西方活字印刷術(shù)的發(fā)明人約翰·古騰堡提出一個(gè)概念古騰堡法則（Gutenberg Diagram），又稱對(duì)角線平衡法則。它指出用戶在瀏覽頁(yè)面或一些布局時(shí)，視線往往趨向于從左上角到右下角進(jìn)行掃描。左上角是第一視覺(jué)落點(diǎn)區(qū)（主視區(qū)），而右下角是最終視覺(jué)落點(diǎn)區(qū)（終點(diǎn)區(qū)）。與之相對(duì)，右上角和左下角則是視覺(jué)盲點(diǎn)。用戶的視覺(jué)移動(dòng)端規(guī)則是從上到下，從左到右。

所以，界面中的左上和右下是用戶視覺(jué)最為重點(diǎn)關(guān)注的位置。遵循古騰堡法則，設(shè)計(jì)師應(yīng)該把界面的關(guān)鍵元素放在主視區(qū)，終點(diǎn)區(qū)可以放按鈕、強(qiáng)提示，盲點(diǎn)區(qū)可以用來(lái)放一些相對(duì)次要的內(nèi)容，如輔助圖形、文字信息。

同理，表單中會(huì)出現(xiàn)組合按鈕，比如：取消與確認(rèn)、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時(shí)從第一視覺(jué)落點(diǎn)區(qū)是主視覺(jué)區(qū)(Primary Optical Area)，最終停留在結(jié)尾的終點(diǎn)區(qū)(Terminal Area)。

如下圖是一個(gè)彈窗類型的表單，如果根據(jù)業(yè)務(wù)訴求確認(rèn)操作重要程度強(qiáng)于取消操作，那么確認(rèn)按鈕應(yīng)該放在取消按鈕的右邊。因?yàn)榇_認(rèn)按鈕放在右側(cè)(終點(diǎn)區(qū)) 用戶關(guān)注度會(huì)更強(qiáng)。

1.5 占位提示避免代替表單標(biāo)簽

常規(guī)的占位提示作用是使用通用的認(rèn)知提示并且以較弱的方式呈現(xiàn)給用戶，當(dāng)在字段中填入內(nèi)容這些提示通常會(huì)消失。

設(shè)計(jì)師常常遇到表單字段較多并且頁(yè)面空間有限的情況，為了減少橫向節(jié)省空間設(shè)計(jì)師常常的做法是將表單標(biāo)簽刪除，使用占位提示文本作為信息提示。但是設(shè)計(jì)師必須有意識(shí)知道到這種方式適合使用在較為簡(jiǎn)單的表單中，比如：表格中點(diǎn)擊修改名稱操作，彈出氣泡并且氣泡中只存在一個(gè)字段?；蛘呤窃谟脩舴浅Ｊ熘牡卿涀?cè)等較為簡(jiǎn)單的表單填寫(xiě)時(shí)使用。但是當(dāng)用戶需要填寫(xiě)大量字段信息時(shí)不建議使用占位提示代替表單標(biāo)簽的方式。原因有兩點(diǎn)：1. 當(dāng)用戶選中文本框填寫(xiě)時(shí)，占位內(nèi)容即消失，這時(shí)候用戶無(wú)法檢查并確認(rèn)其所寫(xiě)的內(nèi)容是否符合預(yù)期。2. 當(dāng)用戶看到文本框中已經(jīng)回填內(nèi)容了，誤認(rèn)為占位提示是默認(rèn)回顯內(nèi)容，造成內(nèi)容已經(jīng)填完不需要再操作的錯(cuò)覺(jué)。

針對(duì)上面問(wèn)題也不是沒(méi)有解決方案，在Material Design中有提供針對(duì)上面的問(wèn)題的解決方案，我們這邊暫時(shí)稱其為“浮動(dòng)標(biāo)簽”，默認(rèn)情況下輸入框內(nèi)顯示占位文本，當(dāng)用戶輸入內(nèi)容以后占位文本浮動(dòng)到內(nèi)容上方與內(nèi)容左對(duì)齊。 

1.6 校驗(yàn)反饋及時(shí)并準(zhǔn)確

設(shè)計(jì)師通常認(rèn)為用戶在填寫(xiě)表單時(shí)能夠很順利的完成表單錄入，但事實(shí)相反。在實(shí)際的使用場(chǎng)景中，特別是在一些業(yè)務(wù)較為復(fù)雜的表單中用戶極易發(fā)生錯(cuò)誤，這時(shí)候需要需要明確的校驗(yàn)信息、準(zhǔn)確的校驗(yàn)時(shí)機(jī)、輸入的限制提示。

錯(cuò)誤提示校驗(yàn)

錯(cuò)誤校驗(yàn)提示一般存在于錯(cuò)誤率較高情況下出現(xiàn)，如：在登錄注冊(cè)時(shí)，要求用戶填寫(xiě)手機(jī)號(hào)，如果用戶輸入的手機(jī)號(hào)碼不符合特定的輸入格式，那么這時(shí)候需要明確標(biāo)記錯(cuò)誤原因，準(zhǔn)確的幫助用戶找到問(wèn)題并解決，避免錯(cuò)誤提示描述模糊不清誤導(dǎo)用戶。錯(cuò)誤提示一般會(huì)采用“雙重視覺(jué)強(qiáng)調(diào)”來(lái)顯示錯(cuò)誤，除了輸入框突出顯示外，同時(shí)需要在輸入框下方加入紅色指導(dǎo)文字。如下圖所示為西瓜視頻登錄注冊(cè)場(chǎng)景下的截圖：

限制與格式提示

在表單中如果出現(xiàn)特定格式時(shí)務(wù)必要提前告知用戶?？梢栽谳斎肟蛑酗@示概括回答的方式引導(dǎo)用戶，如：請(qǐng)輸入日期，eg：mm/dd/yy。這樣便于幫助用戶提前感知，減少表單填寫(xiě)錯(cuò)誤率。

校驗(yàn)時(shí)機(jī)

為了避免用戶在提交時(shí)表單時(shí)出現(xiàn)大面積的報(bào)錯(cuò)問(wèn)題，設(shè)計(jì)師可以使用實(shí)時(shí)校驗(yàn)的交互形式。如：在用戶輸入完成之后鼠標(biāo)失焦后進(jìn)行信息校驗(yàn)，但是需要注意的是在實(shí)時(shí)校驗(yàn)時(shí)避免用戶還沒(méi)有輸入完成即出現(xiàn)校驗(yàn)誤導(dǎo)用戶，所以需要準(zhǔn)確判斷鼠標(biāo)是否失焦。如下圖所示為西瓜視頻登錄注冊(cè)場(chǎng)景下的截圖：

1.7 字段長(zhǎng)度與輸入預(yù)期成正比

在實(shí)際業(yè)務(wù)中，設(shè)計(jì)師常常習(xí)慣把每個(gè)表單字段都設(shè)置成相同的寬度，在視覺(jué)效果上看感覺(jué)會(huì)比較統(tǒng)一，但是這種做法實(shí)際上體驗(yàn)欠佳。字段的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度從而減輕判斷負(fù)擔(dān)。在Ant Design 4.0 系列分享的文章《整齊劃一？不如錯(cuò)落有致》中分析到錯(cuò)落有致的排版表現(xiàn)似乎比整齊劃一的左圖更舒適，因?yàn)樵谝曈X(jué)上我們更容易將右圖的空間和內(nèi)容視為一個(gè)和諧的整體。但左圖過(guò)度的對(duì)齊導(dǎo)致暗示隱性的截?cái)?，我們慣性視覺(jué)會(huì)產(chǎn)生表單字段右側(cè)空間缺了一大塊的錯(cuò)覺(jué)。

文章總結(jié)到“表單寬度的處理方式核心旨在解決兩個(gè)問(wèn)題：1. 暗示填寫(xiě)內(nèi)容長(zhǎng)度；2. 表單項(xiàng)布局排列效果，我們通過(guò)設(shè)置合理的默認(rèn)寬度尺寸和描述關(guān)系，就可以讓設(shè)計(jì)師們跳過(guò)部分繁瑣磨人的細(xì)節(jié)思考，快速搭建表單寬度合理且舒適的頁(yè)面?！?/span>如下圖所示：

排列與布局

1.1 定寬or自適應(yīng)？

表單做定寬還是做自適應(yīng)？哪個(gè)“更好”的這個(gè)問(wèn)題時(shí)常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好，它根據(jù)內(nèi)容自適應(yīng)即可，但是當(dāng)遇到Select、DataPicker、Cascader等類型時(shí)就會(huì)開(kāi)始糾結(jié)這個(gè)問(wèn)題。在實(shí)際的業(yè)務(wù)中不論是做理想中的定寬還是自適應(yīng)，很多情況下瀏覽器窗口大小不一可能導(dǎo)致在一些極限情況下都會(huì)產(chǎn)生不盡人意的情況。腦補(bǔ)一下，比如：在筆記本的小屏幕下左對(duì)齊并定寬效果還不錯(cuò)，但是當(dāng)你把頁(yè)面呈現(xiàn)在較大顯示器下，這時(shí)候頁(yè)面右側(cè)又會(huì)呈現(xiàn)出大面積的空白。參考AntDesign提供的典型頁(yè)面以下三種樣式是都會(huì)造成不同的反面效果。

所以在實(shí)際業(yè)務(wù)場(chǎng)景中如果沒(méi)有明確自適應(yīng)和特定自定義寬度的需求時(shí)可以通過(guò)以下幾種方式處理。

將關(guān)聯(lián)性強(qiáng)的字段分組
如果頁(yè)面橫向?qū)挾茸銐虼髸r(shí)，可以將一個(gè)區(qū)域中字段較多、并具有關(guān)聯(lián)性字段進(jìn)行分組，這樣不僅有利于空間布局上的利用，還可以通過(guò)字段之間關(guān)聯(lián)性暗提示幫助用戶更好理解。格式塔心理學(xué)中有多種分組原則，可以使字段之間具有相關(guān)性：接近度，相似度，連續(xù)性，閉合性和連通性。將非結(jié)構(gòu)化字段分組為幾個(gè)機(jī)構(gòu)化的集合提高表單的可用性。

設(shè)置字段寬度梯度

可以給字段設(shè)置幾檔寬度梯度的尺寸，我們可以站在AntDesign這個(gè)巨人的肩膀汲取一些相關(guān)經(jīng)驗(yàn)，其中4.0系列分享的文章中總結(jié)到其經(jīng)過(guò)對(duì)十幾個(gè)業(yè)務(wù)線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據(jù)原理，我們可以假設(shè)原子寬度XS為100，那么通過(guò)尺寸的倍數(shù)+間距的方式來(lái)計(jì)算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過(guò)此計(jì)算方式也是用來(lái)解決視覺(jué)對(duì)齊規(guī)則，如下圖所示：

1.2 表單標(biāo)簽頂部對(duì)齊or右對(duì)齊or左對(duì)齊

在設(shè)計(jì)表單時(shí)到底是左對(duì)齊、右對(duì)齊還是頂部對(duì)齊呢？這個(gè)問(wèn)題也是在實(shí)際業(yè)務(wù)中設(shè)計(jì)師發(fā)問(wèn)頻率較高的一個(gè)棘手問(wèn)題。其實(shí)，不論是哪種方式都有相對(duì)的利弊，需要根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過(guò)關(guān)于表單標(biāo)簽放置的研究，下圖是Matteo Penzo研究總結(jié)得到的瀏覽時(shí)間表：

表單字段頂部對(duì)齊

將表單標(biāo)簽放置在其對(duì)應(yīng)輸入字段的正上方，并垂直左對(duì)齊排列，用戶只需依次向下瀏覽即可看到標(biāo)簽與輸入字段兩個(gè)元素。其優(yōu)勢(shì)是橫向屏幕空間足夠，能夠比較友好的適配多語(yǔ)言適合非中國(guó)區(qū)業(yè)務(wù)表單使用。并且根據(jù)上面Matteo Penzo的時(shí)間表上看，頂部對(duì)齊的瀏覽和填寫(xiě)的效率也是3種常規(guī)的對(duì)齊方式中較高的一種。不足點(diǎn)是會(huì)占用較多的縱向垂直屏幕空間，此外應(yīng)當(dāng)注意每組表單標(biāo)簽和輸入字段與其他字段組的間距，以免層級(jí)區(qū)分度不夠的問(wèn)題。

表單字段右對(duì)齊

將表單標(biāo)簽放置在其對(duì)應(yīng)的輸入字段的左邊，標(biāo)簽右對(duì)齊。其優(yōu)點(diǎn)減少了占用屏幕的高度，并且表單標(biāo)簽與輸入字段關(guān)系較近，所以用戶在填寫(xiě)表單時(shí)效率較高。不足點(diǎn)是由于表單標(biāo)簽的字?jǐn)?shù)不可控（特別是針對(duì)非中國(guó)區(qū)業(yè)務(wù)時(shí)，多語(yǔ)言切換可能會(huì)出現(xiàn)超長(zhǎng)的文案，甚至出現(xiàn)折行的情況），可能會(huì)造成左側(cè)參差不齊的問(wèn)題，導(dǎo)致可讀性不高用戶在查看表單時(shí)比較費(fèi)勁，并且不太適合非中國(guó)區(qū)業(yè)務(wù)。 

表單字段左對(duì)齊
將表單標(biāo)簽放置在其對(duì)應(yīng)的輸入字段的左邊，標(biāo)簽左對(duì)齊。表單標(biāo)簽和輸入字段距離較遠(yuǎn)，用戶從左至右瀏覽時(shí)間變長(zhǎng)，并且根據(jù)上面Matteo Penzo的時(shí)間表上看，左對(duì)齊的瀏覽和填寫(xiě)的效率是3種常規(guī)的對(duì)齊方式中最慢的一種。但是，如果業(yè)務(wù)需要用戶對(duì)表單放慢速度并謹(jǐn)慎填寫(xiě)（復(fù)雜表單或者表單中含有大量高級(jí)設(shè)置的陌生數(shù)據(jù)時(shí)），左對(duì)齊的方式會(huì)減少部分用戶的出錯(cuò)率。但不太適合非中國(guó)區(qū)業(yè)務(wù)。

1.3 表單布局類型 

常規(guī)布局（簡(jiǎn)單）

 在實(shí)際業(yè)務(wù)中當(dāng)表單字段較為簡(jiǎn)單時(shí)可使用，表單字段至上而下單列排列布局，用戶只需縱向閱讀填寫(xiě)，填寫(xiě)完成率較高。

多列布局（較復(fù)雜）
垂直空間有限并且表單含有較多填寫(xiě)字段的復(fù)雜表單時(shí)，可將具有相關(guān)聯(lián)字段放在一個(gè)卡片區(qū)域中進(jìn)行歸類，將多個(gè)字段組合在一行，形成多列排布的暗提示幫助用戶更好理解。

區(qū)域分組布局（復(fù)雜）
表單含有較多填寫(xiě)字段的復(fù)雜表單，可將具有相關(guān)聯(lián)字段進(jìn)行分類并以標(biāo)題區(qū)分的形式進(jìn)行字段分組，并且表單字段都在一個(gè)卡片區(qū)域內(nèi)。

卡片分組布局（高復(fù)雜）
卡片分組布局一般用來(lái)處理高復(fù)雜類型表單。當(dāng)業(yè)務(wù)中希望頁(yè)面承載眾多表單字段時(shí)，可將信息相關(guān)性弱的字段拆分為多個(gè)部分，并通過(guò)多個(gè)卡片分組承載不同類型字段，每個(gè)卡片都需有個(gè)卡片類別標(biāo)題。 

寫(xiě)在最后

本篇文章從分析表單在產(chǎn)品中為何如此的重要，總結(jié)了在日常工作中設(shè)計(jì)師常常遇到的表單類型和布局，設(shè)計(jì)師可通過(guò)文章中的建議和案例進(jìn)而合理的選擇并靈活應(yīng)用。以及在實(shí)際的業(yè)務(wù)應(yīng)用場(chǎng)景中設(shè)計(jì)師如何規(guī)避和注意一些設(shè)計(jì)細(xì)節(jié)進(jìn)而提升表單的體驗(yàn)。文章通過(guò)一些案例進(jìn)行分析，希望大家能夠通過(guò)此篇文章更多的是受到啟發(fā)（而不是限制），能夠在日常工作中靈活應(yīng)用并舉一反三。這里需要強(qiáng)調(diào)的是作為產(chǎn)品設(shè)計(jì)師不論是表單設(shè)計(jì)還是全局的頁(yè)面設(shè)計(jì)，都需要有理解業(yè)務(wù)本質(zhì)的能力和全局的業(yè)務(wù)思考能力，不然常常會(huì)被稱之為“喂，那個(gè)畫(huà)圖的設(shè)計(jì)”。

文章來(lái)源：tob.design

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一、導(dǎo)航的定義

牛津詞典上有對(duì)Navigation一詞在互聯(lián)網(wǎng)領(lǐng)域的解釋：

the way that you move around a website or the Internet when you are looking for information

翻譯為：你在瀏覽網(wǎng)頁(yè)時(shí)四處移動(dòng)尋找信息的方式

也就是說(shuō)用戶看到的，影響其尋找信息的因素都可視為導(dǎo)航。

二、為什么需要導(dǎo)航

交互上：

用戶在使用傳統(tǒng)方式閱讀時(shí)，所處的空間是單向的，只能向前或向后翻頁(yè)；

而在網(wǎng)頁(yè)領(lǐng)域，所有的內(nèi)容都存放在各自的URL里，信息在多維度多空間里相互交錯(cuò)，各有聯(lián)系，可跳躍的閱讀方式讓用戶很容易失去位置感。

試想一下我們?cè)诖笮蜕虉?chǎng)里暈頭轉(zhuǎn)向的場(chǎng)景，會(huì)常常抱怨其導(dǎo)視系統(tǒng)的糟糕，網(wǎng)站有過(guò)之而無(wú)不及。

業(yè)務(wù)上：

從潛在用戶想要了解某個(gè)產(chǎn)品時(shí)，導(dǎo)航就開(kāi)始起作用了

影響點(diǎn)擊量：網(wǎng)站排名高低，搜索帶來(lái)的點(diǎn)擊量

影響轉(zhuǎn)化：網(wǎng)站的易用性，訪問(wèn)者轉(zhuǎn)化為潛在客戶和客戶的概率

設(shè)計(jì)者創(chuàng)造易用的表單，展示有用的信息，建立流暢的交互，這些都要靠導(dǎo)航來(lái)引導(dǎo)用戶達(dá)到。

三、從信息構(gòu)建模式給導(dǎo)航分類

1.內(nèi)容

內(nèi)容涉及到的東西很多，內(nèi)容之間的相互關(guān)系也不確定，因此不同內(nèi)容導(dǎo)航需要不同的導(dǎo)航模式

1）種類

不同行業(yè)，不同業(yè)務(wù)重點(diǎn)對(duì)內(nèi)容的分類方式不同

種類可以是符合大眾認(rèn)知，具有并列關(guān)系的信息，

也可以是按照設(shè)計(jì)者的意圖創(chuàng)造出的種類，并區(qū)分其優(yōu)先級(jí)

種類導(dǎo)航的出現(xiàn)無(wú)形中建立了用戶心中對(duì)某類產(chǎn)品的預(yù)期信息架構(gòu)，使其在瀏覽信息時(shí)更有方向性，例如在瀏覽一家服裝店鋪時(shí)，用戶在進(jìn)入導(dǎo)航列表前就對(duì)種類有了預(yù)期，諸如男士上裝，男士下裝，女士上裝、女士下裝、配飾，包袋等。

2）字母

以字母順序排列信息。適用于信息量超大，且不存在主次、重要級(jí)關(guān)系的內(nèi)容。常見(jiàn)于聯(lián)系人列表，地區(qū)導(dǎo)航，介紹人名，合作伙伴等場(chǎng)景。

3）自然屬性

以時(shí)間，地理位置等屬性組織信息架構(gòu)。

時(shí)間：展示在一段時(shí)間內(nèi)發(fā)生的事情，以時(shí)間為導(dǎo)航可以直觀地感受到信息的變遷，立體感更強(qiáng)。例如一個(gè)企業(yè)的發(fā)展歷史

地理位置：展示在不同地理位置的事件信息，空間感更強(qiáng)

2.層級(jí)

也叫做結(jié)構(gòu)導(dǎo)航，根據(jù)信息的上下級(jí)關(guān)系、主體信息架構(gòu)等因素將信息有序排列。分為全局導(dǎo)航和局部導(dǎo)航。

全局導(dǎo)航往往指頁(yè)眉和頁(yè)腳，存在于網(wǎng)站的大部分頁(yè)面，便于用戶隨時(shí)跳轉(zhuǎn)。 

頁(yè)眉：用戶進(jìn)入網(wǎng)站關(guān)注到的點(diǎn)，將網(wǎng)站進(jìn)行功能分類后，將導(dǎo)航文字放置在頁(yè)眉上

頁(yè)腳：此空間是為隱私和法律鏈接保留的，還會(huì)加上聯(lián)系方式，也有許多內(nèi)容繁重的網(wǎng)站會(huì)把站點(diǎn)地圖放置在頁(yè)腳。

雅各布·尼爾森把全局導(dǎo)航在網(wǎng)站中的作用形象地比喻為機(jī)艙座位下的救生衣 ，你只要知道它哪 ，而不必時(shí)時(shí)關(guān)注它，需要時(shí)立即找到穿上即可。

局部導(dǎo)航是是更深層級(jí)的導(dǎo)航，不作用于全局，存在于特定的功能區(qū)，可分布在頁(yè)面各部分。

3.功能

業(yè)務(wù)上必要的一些功能入口，通常貫穿全局，例如很多網(wǎng)站的個(gè)人信息，用戶需要在大部分時(shí)刻都可直接接觸到該功能。根據(jù)用戶的心理模型，這類功能會(huì)存在于頁(yè)面的右上角。

4.搜索

用戶使用較多，也是最重要的導(dǎo)航方式之一。當(dāng)帶有明確的目的性或無(wú)法通過(guò)內(nèi)容，層級(jí)導(dǎo)航找到想要的信息時(shí)，用戶會(huì)在搜索框內(nèi)嘗試輸入一些信息。

而讓用戶主動(dòng)搜索會(huì)出現(xiàn)下面的情況：用戶無(wú)法清晰表達(dá)或錯(cuò)誤地表達(dá)其想要搜索的內(nèi)容，導(dǎo)致系統(tǒng)無(wú)法匹配上對(duì)應(yīng)的信息，

為了讓搜索導(dǎo)航更有效地發(fā)揮其作用，出現(xiàn)了自動(dòng)填充，模糊搜索，推薦搜索，搜索歷史，搜索糾正等一系列導(dǎo)航功能，這些功能都是為了想辦法將用戶引導(dǎo)到他可能需要的頁(yè)面上。

5.網(wǎng)站地圖

以類似地圖的樣式來(lái)展示網(wǎng)站頁(yè)面之間的層級(jí)關(guān)系，并提供相應(yīng)的鏈接。可視性強(qiáng)，便于用戶找到想要的信息。

四、導(dǎo)航的常見(jiàn)樣式

1.文字與圖標(biāo)

考慮到排版布局，樣式美觀，除了用文字本身的含義用作導(dǎo)航外，圖標(biāo)也經(jīng)常被用作導(dǎo)航，分為純圖標(biāo)導(dǎo)航和文字+圖標(biāo)導(dǎo)航，這里圖標(biāo)的風(fēng)格會(huì)很大程度上影響這個(gè)頁(yè)面的視覺(jué)效果

2.橫向?qū)Ш?

將導(dǎo)航文字橫向有序地排列，獨(dú)立性強(qiáng)，占用空間較少，可放置的導(dǎo)航條目有限，但這個(gè)局限性也可以成為優(yōu)點(diǎn)，它要求設(shè)計(jì)師創(chuàng)造出簡(jiǎn)短，易于理解，且滿足業(yè)務(wù)需求的標(biāo)題。

當(dāng)內(nèi)容過(guò)多時(shí)會(huì)選擇在單個(gè)導(dǎo)航下放置下拉顯示二級(jí)導(dǎo)航，下拉顯示的二級(jí)導(dǎo)航可以很長(zhǎng)或采用滾動(dòng)顯示的方式，這種臨時(shí)的模態(tài)導(dǎo)航可以最大限度地利用到屏幕空間。

很多網(wǎng)頁(yè)的橫向頁(yè)眉導(dǎo)航會(huì)保持滑動(dòng)時(shí)固定的樣式，便于用戶時(shí)時(shí)找到主頁(yè)面的入口。

3.豎向?qū)Ш?

占用空間較多，通常放置在頁(yè)面左邊位置，用不同的底色或分割線將其與主內(nèi)容分開(kāi)，內(nèi)容文字一般采用左對(duì)齊，便于閱讀，導(dǎo)航層級(jí)過(guò)多時(shí)會(huì)采用點(diǎn)擊展開(kāi)的樣式，上下滾動(dòng)的常用交互也讓豎向?qū)Ш饺菁{的內(nèi)容更多。

部分豎向?qū)Ш绞强呻[藏或收縮的

4.混合導(dǎo)航

在擁有復(fù)雜信息的網(wǎng)頁(yè)中，會(huì)將橫向?qū)Ш?，豎向?qū)Ш降绕渌麡邮交旌鲜褂茫?

5.面包屑

面包屑導(dǎo)航是位于頁(yè)面頂部或底部的一行內(nèi)部鏈接，在不同層級(jí)的鏈接之間用“>”分隔，可讓訪問(wèn)者快速返回上一版塊或根網(wǎng)頁(yè)。許多面包屑導(dǎo)航都將內(nèi)容最寬泛的頁(yè)面（通常為根網(wǎng)頁(yè)）設(shè)置為最左邊的首個(gè)鏈接，并在右側(cè)列出更具體的部分。

占用很少的空間并提供主導(dǎo)航實(shí)現(xiàn)不了的深層次定位功能。

面包屑的使用讓網(wǎng)站的結(jié)構(gòu)更加清晰，強(qiáng)化用戶的心理層級(jí)模型，并實(shí)現(xiàn)跨層級(jí)跳躍

6.分頁(yè)與無(wú)限滾動(dòng)

分頁(yè)顯示的內(nèi)容數(shù)量固定，有時(shí)用戶可自定義內(nèi)容數(shù)量，此外頁(yè)面上通常有當(dāng)前頁(yè)，任意頁(yè)，上一頁(yè)，下一頁(yè)，首頁(yè)，末頁(yè)的鏈接。具有定位性，當(dāng)用戶需要回到之前瀏覽過(guò)的某個(gè)位置時(shí)，可采用分頁(yè)的形式

無(wú)限滾動(dòng)希望用戶只注意當(dāng)前頁(yè)的內(nèi)容且不能快速到達(dá)頁(yè)面的底部，適用于無(wú)法預(yù)測(cè)用戶何時(shí)能夠找到需要的信息的情況。在一些圖片展示，內(nèi)容推送的網(wǎng)站上設(shè)計(jì)者不知道用戶想要的內(nèi)容，同時(shí)也要展現(xiàn)網(wǎng)站內(nèi)容豐富，資源庫(kù)深不見(jiàn)底的特質(zhì)會(huì)采用交互上更簡(jiǎn)單的無(wú)限滾動(dòng)模式。

7.突出的版式

一些設(shè)計(jì)者想要用戶優(yōu)先注意到的內(nèi)容，會(huì)采用突出的版面設(shè)計(jì)，通過(guò)改變文字圖形的大小，顏色等與其他一般性內(nèi)容形成對(duì)比或使用海報(bào)，彈窗等形式試圖引導(dǎo)用戶行為。

五、導(dǎo)航設(shè)計(jì)的建議

根據(jù)上面第三和第四點(diǎn)，分別從信息層和表現(xiàn)層給出導(dǎo)航設(shè)計(jì)的建議

信息層

1.信息結(jié)構(gòu)盡可能扁平

多花一些時(shí)間去考慮信息體系結(jié)構(gòu)，可根據(jù)首頁(yè)規(guī)劃全局的導(dǎo)航，首頁(yè)是用戶在網(wǎng)站中導(dǎo)航的起點(diǎn)，考慮如何讓用戶盡可能方便地從網(wǎng)站上的寬泛內(nèi)容（首頁(yè)）轉(zhuǎn)到他們所需的更加具體的內(nèi)容。

2.重視導(dǎo)航的順序

當(dāng)同一級(jí)別的導(dǎo)航數(shù)量很多時(shí)，順序變的更加重要。根據(jù)用戶的認(rèn)知習(xí)慣，開(kāi)頭和結(jié)尾作為關(guān)注度（看到的）和保留度最高（剛剛發(fā)生的）的地方，其內(nèi)容更加突出。

3.SEO優(yōu)化

良好的網(wǎng)站導(dǎo)航結(jié)構(gòu)可以幫助搜索引擎了解哪些是網(wǎng)站站長(zhǎng)認(rèn)為重要的內(nèi)容，盡量用一些具體的描述詞語(yǔ)而非大而寬泛的詞匯，例如“產(chǎn)品”，“服務(wù)”。雖然搜索引擎的搜索結(jié)果是在頁(yè)面級(jí)別提供的，但它也希望了解頁(yè)面在網(wǎng)站這個(gè)更大層面上的角色。導(dǎo)航中關(guān)鍵詞的使用會(huì)影響其在搜索引擎中被搜到的質(zhì)量。

4.創(chuàng)建網(wǎng)站地圖

用于顯示網(wǎng)站結(jié)構(gòu)的一個(gè)簡(jiǎn)單頁(yè)面，通常包含網(wǎng)站頁(yè)面的分層列表。如果在網(wǎng)站上查找頁(yè)面時(shí)遇到問(wèn)題，用戶可能會(huì)訪問(wèn)此頁(yè)面。此外搜索引擎也會(huì)訪問(wèn)此頁(yè)面，以便使抓取范圍盡量覆蓋網(wǎng)站的全部頁(yè)面。

表現(xiàn)層

1.一致性

同一類型導(dǎo)航的視覺(jué)表現(xiàn)與交互操作在整個(gè)網(wǎng)站頁(yè)面中要保持一致，清晰一致的導(dǎo)航可以讓用戶預(yù)見(jiàn)每一步操作的結(jié)果。

2.清晰性

顏色與大小：文字顏色與背景顏色的對(duì)比，標(biāo)題與內(nèi)容的字號(hào)大小，這些最基本的元素直接影響導(dǎo)航的清晰度

留白與裝飾：與平面設(shè)計(jì)中原理一樣，留白讓網(wǎng)站頁(yè)面布局平衡，張弛有度；裝飾與留白相結(jié)合，讓導(dǎo)航表現(xiàn)得更精美，也有助于視覺(jué)分割

強(qiáng)調(diào)與弱化：有些導(dǎo)航起引導(dǎo)作用需要突出，有些起輔助作用需要弱化，強(qiáng)弱對(duì)比結(jié)合豐富了視覺(jué)層次，并讓導(dǎo)航起到它該起的作用

3.凸顯超鏈接

將可點(diǎn)擊的超鏈接文本與常規(guī)文字在樣式和交互上進(jìn)行區(qū)分，常見(jiàn)做法有下劃線，文字顏色，加粗，鼠標(biāo)懸浮變色。

4.在常規(guī)位置放置導(dǎo)航

網(wǎng)頁(yè)發(fā)展的幾十年讓用戶對(duì)網(wǎng)頁(yè)產(chǎn)生了一些常識(shí)性認(rèn)識(shí)，例如用戶會(huì)在進(jìn)入一個(gè)網(wǎng)站時(shí)去頁(yè)眉或側(cè)邊欄尋找主導(dǎo)航，盡量遵循這些常規(guī)用法。

5.導(dǎo)航數(shù)量不宜過(guò)多

無(wú)論是全局或局部導(dǎo)航，數(shù)目越多用戶處理和記住信息的難度越大，可以通過(guò)分組分層來(lái)提高信息瀏覽效率

6.側(cè)邊欄

側(cè)邊欄導(dǎo)航會(huì)占據(jù)一部分的屏幕空間，將其與主內(nèi)容部分進(jìn)行分割有助于用戶，例如用反差較大的背景色形成導(dǎo)航區(qū)與內(nèi)容區(qū)

加入導(dǎo)航收縮功能，以便更好地利用屏幕空間，特別是在一些小尺寸屏幕上。

六、導(dǎo)航設(shè)計(jì)審查：

在做完網(wǎng)頁(yè)設(shè)計(jì)后可以根據(jù)瀏覽網(wǎng)頁(yè)的一般習(xí)慣，通過(guò)以下幾個(gè)方面對(duì)導(dǎo)航設(shè)計(jì)進(jìn)行簡(jiǎn)單審查

問(wèn)自己以及團(tuán)隊(duì)其他成員以下幾個(gè)問(wèn)題

1.這是什么網(wǎng)站

2.網(wǎng)站有哪些主要內(nèi)容

3.導(dǎo)航看上去是否像是導(dǎo)航，可點(diǎn)擊的

4.導(dǎo)航的名稱是否會(huì)引起歧義

5.現(xiàn)在處在網(wǎng)站的哪個(gè)層級(jí)

6.如何進(jìn)退

7.具體的功能是否會(huì)在預(yù)想的地方出現(xiàn)

8.怎么進(jìn)行內(nèi)容搜索

借助工具

9.使用Google Analytics對(duì)網(wǎng)站的訪問(wèn)情況進(jìn)行回顧并進(jìn)行一些評(píng)估

例如一些頁(yè)面的瀏覽量極低于預(yù)期或相較于同類頁(yè)面瀏覽差距過(guò)大，就要考慮是否是指向該頁(yè)面的導(dǎo)航出現(xiàn)了問(wèn)題。

總結(jié)

導(dǎo)航的最終目的是簡(jiǎn)化獲取信息的過(guò)程，具體以何種方式表達(dá)還需要取決于業(yè)務(wù)內(nèi)容，但總體上要以用戶易接受的方式呈現(xiàn)。用戶若是能在獲取信息的過(guò)程中按照設(shè)計(jì)者所想的方式前進(jìn)并感受到暢通無(wú)阻的快感，導(dǎo)航便是成功的。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

    對(duì)于許多公司和品牌而言，使用帶有含義的動(dòng)物logo，能非常準(zhǔn)確的傳遞品牌信息！比如說(shuō)豹子的敏捷，獅子的勇猛，長(zhǎng)頸鹿的優(yōu)雅，獨(dú)角獸的神秘等等！這種品牌意識(shí)在其徽標(biāo)中使用動(dòng)物象征來(lái)策劃。根據(jù)所選動(dòng)物的類型，品牌是強(qiáng)大，快速，奢華，關(guān)懷，神秘和許多其他情感。

在我們?cè)O(shè)計(jì)UI有所疑惑時(shí)，可以參照以下標(biāo)準(zhǔn)做法。

這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對(duì)你的日常UI設(shè)計(jì)工作有所幫助。

我們需要記住一點(diǎn)，設(shè)計(jì)其實(shí)就是跳出框框思考，這意味著，有些時(shí)候我們要打破陳規(guī)。所以，對(duì)我的建議也不要全盤(pán)接受。

1. 設(shè)計(jì)時(shí)使用密度像素（dp），而非像素（pixel）

圖中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素個(gè)數(shù)，簡(jiǎn)稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨(dú)立像素，也寫(xiě)作dip（也有device-independent pixel之說(shuō)，設(shè)備獨(dú)立像素）。

設(shè)計(jì)界面時(shí)，建議大家基于設(shè)備的密度像素，而不是像素。這樣可以保證我們?cè)O(shè)計(jì)出的圖標(biāo)素材比例適當(dāng)，適應(yīng)不同尺寸的設(shè)備。

舉個(gè)例子，假如我們以密度獨(dú)立像素dp為單位，設(shè)計(jì)了一個(gè) 200 x 50的按鍵，那么這個(gè)按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。

因?yàn)橛行┢聊坏膯挝挥⒋绲南袼財(cái)?shù)量要比其他屏幕多，即ppi分辨率大，為了保證設(shè)計(jì)的圖標(biāo)在不同分辨率的屏幕上都一樣大，設(shè)計(jì)師通常只是設(shè)計(jì)一個(gè)尺寸，導(dǎo)出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點(diǎn)的個(gè)數(shù)。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設(shè)計(jì)時(shí)，我會(huì)以414 x 896個(gè)點(diǎn)為尺寸做設(shè)計(jì)，而后導(dǎo)出3x的圖標(biāo)素材。

2. 間距使用8的倍數(shù)（8dp）

為什么UI設(shè)計(jì)的間距都是8的倍數(shù)而不是5的倍數(shù)呢？這里有一個(gè)簡(jiǎn)單的解釋—如果一個(gè)設(shè)備是1.5x的分辨率，我們就沒(méi)法導(dǎo)出一個(gè)奇數(shù)。

另外，現(xiàn)代主流的屏幕尺寸都是以8為單位，以8的倍數(shù)做設(shè)計(jì)可以很好地適應(yīng)這些屏幕。

以8的倍數(shù)設(shè)計(jì)可以保證設(shè)計(jì)的一致性?；谶@種慣例，大家在進(jìn)行設(shè)計(jì)工作時(shí)不用再猜測(cè)間距的數(shù)值，每個(gè)圖標(biāo)都可以完美地與其他圖標(biāo)對(duì)齊。

有關(guān)這個(gè)話題的更全面探討，請(qǐng)參考Bryn Jackson的文章《八像素網(wǎng)格設(shè)計(jì)》。

3. 刪減元素容器的線框

我們?cè)谠O(shè)計(jì)的過(guò)程中應(yīng)該時(shí)常將自己抽離出來(lái)，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過(guò)于雜亂，是否應(yīng)該予以保留。通常這些用以區(qū)隔界面內(nèi)容的線和框可以被邊界留白代替。

我們?cè)O(shè)計(jì)的大部分元素都存在于線框里，簡(jiǎn)單清除掉這些“容器”可以讓界面看起來(lái)不那么擁擠—給元素更多呼吸的空間。

4. 無(wú)障礙設(shè)計(jì)—重視對(duì)比度

善用對(duì)比度不僅僅是為了讓用戶的注意力集中于重要的信息，更是為了使產(chǎn)品更容易訪問(wèn)/使用。

設(shè)計(jì)產(chǎn)品就好比建設(shè)像圖書(shū)館、學(xué)校一類的公共場(chǎng)所，它的適用對(duì)象需要涵蓋每一個(gè)人，包括失明、色盲和視障用戶。

Web內(nèi)容無(wú)障礙指南（WCAG）要求文本或文本圖像的對(duì)比度至少為4.5：1。

為了保證設(shè)計(jì)達(dá)到該標(biāo)準(zhǔn)，我們可以下載Stark這款插件來(lái)檢查設(shè)計(jì)是否是無(wú)障礙的。

5. 基于用戶習(xí)慣，設(shè)計(jì)用戶體驗(yàn)

為什么有些圖標(biāo)元素會(huì)被公認(rèn)為標(biāo)準(zhǔn)？原因有多種。

假如你把一個(gè)按鈕設(shè)計(jì)成圓形，那么當(dāng)我們需要一個(gè)（字?jǐn)?shù)較多的）“Start Free Trial”按鈕時(shí)，它就會(huì)不必要地占用界面中豎直方向上的空間。

另外，用戶期待的是與其他產(chǎn)品相似的體驗(yàn)。如果你設(shè)計(jì)的網(wǎng)站、APP或軟件與用戶的既有習(xí)慣相悖，那么這樣的體驗(yàn)是不直觀的，用戶很可能會(huì)因此受挫。

故而，在我們發(fā)揮創(chuàng)造力的時(shí)候，最好以現(xiàn)有的設(shè)計(jì)規(guī)范為基準(zhǔn)和前提。不要重新設(shè)計(jì)輪子。

6. 善用顏色重量（color weight），建立視覺(jué)層次

每一種顏色都有自己的視覺(jué)重量，我們可以通過(guò)借助顏色的視覺(jué)重量來(lái)建立內(nèi)容的視覺(jué)層次，用顏色的深淺來(lái)呈現(xiàn)內(nèi)容的重要性的層級(jí)。

善用顏色視覺(jué)重量的秘訣是，一個(gè)更為重要的元素，應(yīng)該有更重的視覺(jué)顏色，以便用戶快速瀏覽網(wǎng)頁(yè)，區(qū)分重要和不重要的信息。

大字號(hào)、粗體的信息會(huì)首先被用戶注意到，而后他們會(huì)關(guān)注其下的輔助性信息。

7. 避免使用超過(guò)兩種字體

通常，設(shè)計(jì)界面會(huì)控制使用的字體數(shù)目，兩種不同的字體就應(yīng)足夠—這不是說(shuō)你不能使用更多字體，只是你需要充分的理由。通常來(lái)講，僅用兩種字體會(huì)更好。

設(shè)計(jì)界面時(shí)要善用字體家族。

使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設(shè)計(jì)在保持多變性的同時(shí)兼顧一致性。

選擇字體時(shí)，盡量選擇那些有多種重量（如標(biāo)準(zhǔn)、適中、粗體、特粗）和樣式的（如長(zhǎng)體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經(jīng)驗(yàn)的適用對(duì)象主要為英文字體。）。這樣既會(huì)給設(shè)計(jì)留出可探索的空間，也不會(huì)增加額外的字體種類。

8. 讓用戶認(rèn)知，而非記住

讓用戶去認(rèn)知產(chǎn)品是產(chǎn)品設(shè)計(jì)中所推崇的，因?yàn)?，我們?yōu)槭裁匆層脩粼谑褂玫倪^(guò)程中去思考呢？

結(jié)賬頁(yè)面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認(rèn)知的例子。

在好的設(shè)計(jì)中，結(jié)賬頁(yè)面是不需要讓用戶記住他們所要購(gòu)買的物品的。用戶應(yīng)該可以清楚地從界面中確認(rèn)他要購(gòu)買的物品，而非通過(guò)回憶來(lái)想起。

在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個(gè)過(guò)程不需要過(guò)腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購(gòu)物時(shí)中斷的地方繼續(xù)開(kāi)始購(gòu)物—因?yàn)樗@示了我最近瀏覽過(guò)的物品。

設(shè)計(jì)時(shí)，應(yīng)讓元素、功能、選項(xiàng)明顯可見(jiàn)，最小化用戶的記憶負(fù)荷。用戶無(wú)需自己在操作的步驟中記住信息。系統(tǒng)的操作說(shuō)明應(yīng)該在需要時(shí)很容易看到或查到。

—Nielson Norman Group（尼爾森諾曼集團(tuán)，人機(jī)交互和用戶體驗(yàn)咨詢公司，唐·諾曼是創(chuàng)始人之一）

9. 切忌拖慢用戶體驗(yàn)  

作為用戶，速度和效率是最重要的。用戶使用一個(gè)應(yīng)用程序，是為了解決某個(gè)特定的問(wèn)題。

我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車手）

如果將一張支票通過(guò)手機(jī)存入銀行賬戶這個(gè)體驗(yàn)是非常讓人享受的，那固然很好，但作為設(shè)計(jì)師，千萬(wàn)不要讓你的創(chuàng)造力阻礙用戶實(shí)現(xiàn)他們的目標(biāo)。

關(guān)于動(dòng)畫(huà)和微交互的一條經(jīng)驗(yàn)就是，如果某個(gè)體驗(yàn)只是無(wú)謂地增加了時(shí)間，那么這不是在改善用戶體驗(yàn)。

如果加入的動(dòng)畫(huà)帶有目的性，則可以改善用戶體驗(yàn)；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗(yàn)不會(huì)變得更好。

Dribble上有很多著陸頁(yè)的設(shè)計(jì)—當(dāng)用戶向下滾動(dòng)鼠標(biāo)時(shí)，動(dòng)畫(huà)隨之展開(kāi)。通常，這些設(shè)計(jì)展現(xiàn)出過(guò)火的動(dòng)畫(huà)效果，每個(gè)元素都在淡入淡出，動(dòng)來(lái)動(dòng)去，而幾乎不關(guān)注體驗(yàn)本身。當(dāng)太多事情同時(shí)在界面上發(fā)生時(shí)，用戶很難知道到底哪些信息是應(yīng)該關(guān)注的，這等同于浪費(fèi)用戶寶貴的時(shí)間。

這位Dribble用戶，非常抱歉把你揪了出來(lái):/

無(wú)數(shù)研究表明，界面中動(dòng)畫(huà)的最佳時(shí)間在200到500毫秒之間，這個(gè)數(shù)字是由大腦的特征決定的。任何短于100毫秒的動(dòng)畫(huà)都是一晃而過(guò)，人眼根本無(wú)法識(shí)別；而超過(guò)一秒的動(dòng)畫(huà)會(huì)帶給人無(wú)聊和延遲的感覺(jué)。
—《UX微動(dòng)畫(huà)設(shè)計(jì)指南》

所以，如果你要在界面中使用動(dòng)畫(huà)，那么給它一個(gè)明確的目的，并且不要讓用戶等待超過(guò)500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。

10. 大道至簡(jiǎn)

每次我們想要增加額外的信息到界面中時(shí)，例如按鈕、文字、照片、動(dòng)畫(huà)、插圖等等，它們就會(huì)跟相關(guān)的信息進(jìn)行競(jìng)爭(zhēng)。如果一頁(yè)上有太多東西，那么某些元素的重要程度就會(huì)被削減。

谷歌搜索首頁(yè)就是典范。這個(gè)設(shè)計(jì)將全部的注意力放在了搜索這個(gè)主要功能上，沒(méi)有把用戶淹沒(méi)在不必要的信息海洋里。

對(duì)不起了雅虎，在這必須把你當(dāng)做不好的案例展示

最后，分享給大家一句我最愛(ài)的設(shè)計(jì)箴言：

臻于完美之時(shí)，不是加無(wú)可加，而是減無(wú)可減。

文章來(lái)源：UXRen

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

（編者注：由于本文動(dòng)圖太大，將近100M，為了不影響移動(dòng)端讀者的閱讀體驗(yàn)，本文圖片都是靜態(tài)截圖，動(dòng)圖文章鏈接戳：https://docs.qq.com/doc）

一、項(xiàng)目背景

在過(guò)去一年中，潘洛斯（Penrose）團(tuán)隊(duì)參與了「靈鯤」態(tài)勢(shì)感知系統(tǒng)、「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)等14個(gè)大數(shù)據(jù)可視化產(chǎn)品的設(shè)計(jì)。隨著產(chǎn)品不斷的探索和迭代，積累了一些行之有效的大數(shù)據(jù)可視化設(shè)計(jì)的心得和方法?；凇胳`鯤」這個(gè)案例，分享一下我們?cè)诖髷?shù)據(jù)可視化方向的設(shè)計(jì)和思考，希望能夠給對(duì)大數(shù)據(jù)可視化感興趣的同學(xué)提供一些思路。

「靈鯤」是 MIG 安全云部門(mén)與潘洛斯（Penrose）團(tuán)隊(duì)合作的，基于潘洛斯大數(shù)據(jù)可視化引擎衍生出的一款金融風(fēng)險(xiǎn)監(jiān)控可視化產(chǎn)品。應(yīng)北京與深圳金融辦的需求，搭建靈鯤金融風(fēng)險(xiǎn)態(tài)勢(shì)感知系統(tǒng)，實(shí)現(xiàn)事中風(fēng)險(xiǎn)控制，減少網(wǎng)絡(luò)欺詐損失。

著手設(shè)計(jì)之前，我們需要了解：大數(shù)據(jù)市場(chǎng)規(guī)模和各行業(yè)投入有多大， 政企客戶的大數(shù)據(jù)可視化產(chǎn)品的痛點(diǎn)是什么？對(duì)比深耕多年的競(jìng)品，我們?cè)O(shè)計(jì)的突破口在哪？——挖掘我們的機(jī)遇和發(fā)力點(diǎn)。

二、我們的客戶，目標(biāo)群體

數(shù)據(jù)顯示，2017年中國(guó)大數(shù)據(jù)產(chǎn)業(yè)規(guī)模為4700億元。隨著一系列政策的出臺(tái)，大數(shù)據(jù)國(guó)家戰(zhàn)略正在加速落地，大數(shù)據(jù)行業(yè)將持續(xù)增長(zhǎng)，預(yù)計(jì)2018年中國(guó)大數(shù)據(jù)產(chǎn)業(yè)規(guī)模將達(dá)到6200億元，增幅達(dá)32%。需求層面，預(yù)計(jì)2020年大數(shù)據(jù)應(yīng)用市場(chǎng)需求中，僅政府需求就占比35%，另外包括醫(yī)療、交通、金融等多個(gè)行業(yè)在大數(shù)據(jù)和信息化建設(shè)投入也將持續(xù)增加。

除了旺盛的需求以外，我們還注意到很多政企內(nèi)部數(shù)據(jù)基礎(chǔ)很好，以宜昌為例，宜昌智慧辦匯集了來(lái)自32個(gè)部門(mén)、60個(gè)系統(tǒng)的大量詳盡的實(shí)施城市數(shù)據(jù)。與這些政企單位合作，易形成行業(yè)燈塔，便于規(guī)模復(fù)制。另外，針對(duì)大數(shù)據(jù)可視化，目前政企已不滿足于「面子工程」，更多的希望大數(shù)據(jù)可視化與 AI 結(jié)合，呈現(xiàn)更復(fù)雜多樣的數(shù)據(jù)，以輔助決策。

基于以上的市場(chǎng)潛在規(guī)模的考察和典型客戶研究，在進(jìn)行「靈鯤」產(chǎn)品能力規(guī)劃時(shí)，我們主要考慮以下三類使用場(chǎng)景： 政府機(jī)構(gòu)決策、展會(huì)展臺(tái)及參觀視察。

在金融局等相關(guān)政府機(jī)構(gòu)的日常工作中，決策層和相關(guān)工作人員會(huì)基于實(shí)時(shí)金融平臺(tái)數(shù)據(jù)，針對(duì)日常事務(wù)或緊急事件進(jìn)行決策管理，監(jiān)控大廳也就應(yīng)運(yùn)而生?；谶@種工作方式，我們可以發(fā)現(xiàn)潘洛斯的產(chǎn)品特性非常契合監(jiān)控大廳的使用場(chǎng)景。在監(jiān)控大廳中，用戶是通過(guò)兩種不同的信息界面進(jìn)行工作的，分別是綜合數(shù)據(jù)可視化大屏（總屏）以及工作人員獨(dú)立使用的電腦屏幕（分屏）。其中，在總屏上，呈現(xiàn)的內(nèi)容通常是一些對(duì)于決策者來(lái)說(shuō)至關(guān)重要的信息：正在發(fā)生的事件的狀態(tài)和可能趨勢(shì)（發(fā)生了什么）、值得注意的風(fēng)險(xiǎn)（需要團(tuán)隊(duì)做什么）以及風(fēng)險(xiǎn)的處理進(jìn)度（團(tuán)隊(duì)做的怎么樣）；而在分屏上，主要為工作人員提供數(shù)據(jù)分析及風(fēng)險(xiǎn)事件處理功能，幫助團(tuán)隊(duì)對(duì)事件迅速作出響應(yīng)，協(xié)作。

不同于工作場(chǎng)景，靈鯤產(chǎn)品在展會(huì)中展臺(tái)的主要受眾是參會(huì)人士，除了一般民眾外，更有價(jià)值的觀眾主要來(lái)自于媒體和潛在客戶等。所以在這個(gè)場(chǎng)景中展示的內(nèi)容與實(shí)際工作中的數(shù)據(jù)可視化內(nèi)容有一定的區(qū)別，更多的是對(duì)產(chǎn)品能力的展示、產(chǎn)品的宣傳以及社會(huì)價(jià)值的呈現(xiàn)。如何直觀的呈現(xiàn)產(chǎn)品的能力，并使觀眾快速獲得有價(jià)值的信息并留下深刻印象非常重要。這也決定了在這個(gè)場(chǎng)景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過(guò)控制端讓講演者而流暢的完成產(chǎn)品介紹。

在金融局等政府機(jī)構(gòu)，經(jīng)常會(huì)有上級(jí)領(lǐng)導(dǎo)視察參觀的接待活動(dòng)。這些來(lái)訪的貴賓往往希望了解關(guān)于機(jī)構(gòu)更全面和具體的信息，包括但不限于工作流程、工作成績(jī)等，所以我們認(rèn)為這個(gè)場(chǎng)景綜合了以上兩種場(chǎng)景的主要特點(diǎn)。這里的用戶包括來(lái)訪人員，演示人員以及工作人員，展示的內(nèi)容也往往不局限于金融風(fēng)險(xiǎn)大數(shù)據(jù)的可視化，還會(huì)包括工作方式和流程本身。

三、行業(yè)競(jìng)品對(duì)比，反觀自身發(fā)力點(diǎn)

通過(guò)對(duì)阿里 DataV，AntV、360、帆軟的大數(shù)據(jù)可視化產(chǎn)品的體驗(yàn)，我們從產(chǎn)品呈現(xiàn)、產(chǎn)品體驗(yàn)、產(chǎn)品技術(shù)、部署方式和商業(yè)模式幾個(gè)維度的橫向?qū)Ρ?。阿里的技術(shù)對(duì)可視化效果的局限性很大，優(yōu)點(diǎn)是產(chǎn)品實(shí)現(xiàn)模板化、系統(tǒng)實(shí)時(shí)可交互，用戶可以快速搭建自己的可視化產(chǎn)品；360產(chǎn)品可視化呈現(xiàn)3D化，數(shù)據(jù)呈現(xiàn)效果和數(shù)據(jù)感知度較2D更優(yōu)，但是系統(tǒng)非實(shí)時(shí)可交互，而且搭建周期長(zhǎng)，成本較高；帆軟的可視化是傳統(tǒng)報(bào)表型，可視化效果呈現(xiàn)缺乏競(jìng)爭(zhēng)力。

經(jīng)過(guò)對(duì)比，我們不難發(fā)現(xiàn)3D化數(shù)據(jù)呈現(xiàn)能力和數(shù)據(jù)感知度是最高的。但是局限于目前的技術(shù)，項(xiàng)目成本高、研發(fā)周期長(zhǎng)、難以滿足業(yè)務(wù)的發(fā)展速度。

四、我們的機(jī)遇和挑戰(zhàn)

基于市場(chǎng)需求和競(jìng)品分析，我們從以下三個(gè)方面分別分析了產(chǎn)品的機(jī)會(huì)和突破點(diǎn)：

• 可視化：數(shù)據(jù)和場(chǎng)景的呈現(xiàn)3D化，滿足更多維度的數(shù)據(jù)呈現(xiàn)，支持云+本地實(shí)時(shí)大數(shù)據(jù)呈現(xiàn)能力；
• 產(chǎn)品化：場(chǎng)景、組件、數(shù)據(jù)、圖表全部實(shí)現(xiàn)可云端動(dòng)態(tài)更新和配置的模塊化，降低維護(hù)成本、提高服用率、縮短項(xiàng)目周期，無(wú)縫打包接入業(yè)務(wù)數(shù)據(jù)，提供豐富可自定義的可擴(kuò)展接口；
• 大數(shù)據(jù)+AI：基于公司多領(lǐng)域多業(yè)務(wù)線的大數(shù)據(jù)融合以及 AI 能力提供豐富的基于時(shí)間、空間、數(shù)據(jù)的預(yù)測(cè)預(yù)警、統(tǒng)計(jì)表達(dá)能力。

1. 產(chǎn)品架構(gòu)規(guī)劃

基于對(duì)靈鯤態(tài)勢(shì)感知系統(tǒng)的使用場(chǎng)景、用戶需求以及機(jī)會(huì)點(diǎn)的考慮，我們規(guī)劃了未來(lái)產(chǎn)品的整體架構(gòu)，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進(jìn)行大數(shù)據(jù)可視化呈現(xiàn)?？蛻艄芾矶税▓?bào)表和配置管理等工具，幫助用戶進(jìn)行分析數(shù)據(jù)和策略管理。小屏端主要考慮操作控制和移動(dòng)辦公等移動(dòng)使用場(chǎng)景，提供大屏控制、移動(dòng)審批、監(jiān)管、公眾號(hào)等功能。以上三個(gè)端由云端拉取和更新數(shù)據(jù)。虛屏則提供差異化的大數(shù)據(jù)可視化體驗(yàn)，如增強(qiáng)現(xiàn)實(shí)等新奇有趣的玩法。由于大屏端在我們的規(guī)劃里是態(tài)勢(shì)感知系統(tǒng)的核心，且落地到合作方的模塊，以下分享的內(nèi)容將主要圍繞大屏的內(nèi)容設(shè)計(jì)展開(kāi)，未來(lái)如果產(chǎn)品規(guī)劃中的其他模塊陸續(xù)上線，我們?cè)僮龇窒怼?

2. 大屏內(nèi)容設(shè)計(jì)

本地端引擎

早期我們?cè)O(shè)計(jì)的「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)在對(duì)外在大屏上展示主要是通過(guò) web 端的方式去實(shí)現(xiàn)，雖然適配性尚可，但很多設(shè)計(jì)效果無(wú)法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設(shè)計(jì)效果再做進(jìn)一步提升，但迫于研發(fā)周期和實(shí)際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過(guò)一些過(guò)渡，輸出效果是沒(méi)有問(wèn)題，但如果在展會(huì)上遇到媒體采訪，事情就會(huì)變得異常尷尬。媒體會(huì)詢問(wèn)展示內(nèi)容的真實(shí)性，數(shù)據(jù)的實(shí)效性，甚至采訪的時(shí)候需要停留在某一個(gè)畫(huà)面，我方參會(huì)人員配合起來(lái)非常麻煩。后來(lái)我們也研究過(guò)競(jìng)品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯(cuò)，但是界面、操作極其復(fù)雜，相關(guān)教程和素材在網(wǎng)絡(luò)上極少，授權(quán)費(fèi)用也相當(dāng)昂貴。最終經(jīng)過(guò)我們內(nèi)部商討和研究，也請(qǐng)教了一些 IEG 專家的意見(jiàn)，決定使用游戲引擎作為本地端的顯示引擎。

Unity 和 Unreal 我們也糾結(jié)過(guò)許久，甚至 Unity 上我們也出過(guò)可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個(gè)點(diǎn)：

• 基于前面我們提到的產(chǎn)品架構(gòu)，我們的核心是在大屏，而大屏部署主要依賴 PC 做為計(jì)算平臺(tái)，相較于 Unity，Unreal 在 PC 端的技術(shù)積累要更加深厚，實(shí)時(shí)渲染出來(lái)的光影效果和質(zhì)感表現(xiàn)要更穩(wěn)定于 Unity 的輸出；
• Unreal 自帶藍(lán)圖-可視化腳本系統(tǒng)，這對(duì)于設(shè)計(jì)團(tuán)隊(duì)出身，零代碼開(kāi)發(fā)經(jīng)驗(yàn)的我們來(lái)說(shuō)上手、學(xué)習(xí)起來(lái)更快更方便；
• 線上有大量的視頻教程，各種插件和美術(shù)素材也比Unity更豐富；
• 有《蝙蝠俠:阿卡姆騎士》、《最終幻想15》和《絕地求生》這些3A沙盤(pán)游戲作為先例，Unreal 對(duì)于大規(guī)模的場(chǎng)景渲染能力是可被預(yù)期的，而 Unity 目前還沒(méi)有可以拿得出手的案例。

色彩基調(diào)

為了打造靈鯤產(chǎn)品的可視化，在競(jìng)品中脫穎而出，我們從產(chǎn)品功能、用戶、愿景三個(gè)維度發(fā)散，提煉出設(shè)計(jì)指南的關(guān)鍵詞：智能、直觀、未來(lái)，塑造獨(dú)特的大數(shù)據(jù)可視化風(fēng)格體系。

靈鯤金融態(tài)勢(shì)感知系統(tǒng)內(nèi)容架構(gòu)分為數(shù)據(jù)維度和場(chǎng)景維度，數(shù)據(jù)是核心，場(chǎng)景是大數(shù)據(jù)呈現(xiàn)的承載體；場(chǎng)景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個(gè)性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來(lái)感的高亮色，和場(chǎng)景形成強(qiáng)對(duì)比，使數(shù)據(jù)更為突顯、更具吸引力；為了強(qiáng)化客戶對(duì)于風(fēng)險(xiǎn)的感知，通過(guò)顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險(xiǎn)等級(jí)，更直觀的傳達(dá)數(shù)據(jù)的含義。如：高風(fēng)險(xiǎn)的使用紅色，紅色讓人聯(lián)想到危險(xiǎn)、警報(bào)。

呈現(xiàn)方式

在現(xiàn)有的產(chǎn)品和傳統(tǒng)認(rèn)知中，大數(shù)據(jù)產(chǎn)品內(nèi)容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數(shù)據(jù)可視化內(nèi)容相關(guān)的案例，從視覺(jué)維度上看，主要有這幾個(gè)特點(diǎn)：一、具有很強(qiáng)的空間感，支持多種數(shù)據(jù)同屏呈現(xiàn)，可交叉分析對(duì)比，承載性強(qiáng)；二、高精度的模型和材質(zhì)，豐富的粒子、動(dòng)效，更加貼近現(xiàn)實(shí)的光影呈現(xiàn)；三、互動(dòng)性強(qiáng)，可交互，實(shí)時(shí)演算。

從大數(shù)據(jù)可視化的內(nèi)容維度上看，梳理的3D架構(gòu)，主要包括：數(shù)據(jù)維度>基礎(chǔ)建設(shè)>交通運(yùn)輸>行政分區(qū)>自然條件。

數(shù)據(jù)維度層是最核心的部分，位于場(chǎng)景上方最突出的位置，能夠更清晰的展示風(fēng)險(xiǎn)數(shù)據(jù)的分布、量級(jí)；行政區(qū)域和交通層是城市場(chǎng)景最基礎(chǔ)的數(shù)據(jù)維度，方便用戶進(jìn)行區(qū)域的數(shù)據(jù)對(duì)比和分析；基礎(chǔ)建設(shè)層包括城市的建筑、標(biāo)志性建筑、照明、橋梁、等，還原城市獨(dú)特風(fēng)貌；通過(guò)突出城市的標(biāo)志性建筑，強(qiáng)化城市、區(qū)域的識(shí)別性，輔助數(shù)據(jù)傳達(dá)；自然條件層包括地形、河流、植被、展示真實(shí)的環(huán)境特征，用戶更有代入感。

△ 北京場(chǎng)景

△ 鳥(niǎo)瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數(shù)據(jù)呈現(xiàn)，方便用戶進(jìn)行縱向的數(shù)據(jù)對(duì)比。

△ 場(chǎng)景整體風(fēng)格圖

數(shù)據(jù)表現(xiàn)

靈鯤的3D數(shù)據(jù)樣式有柱狀圖和散點(diǎn)圖。如何把司空見(jiàn)慣的數(shù)據(jù)樣式，設(shè)計(jì)出產(chǎn)品的個(gè)性，是我們重點(diǎn)要解決的問(wèn)題。為了體現(xiàn)大數(shù)據(jù)的力量感，使用科幻電影中的聚合能量、發(fā)光的能量石作為柱狀圖的主圖形；同時(shí)把數(shù)據(jù)采集、融合、分析的過(guò)程具象為動(dòng)態(tài)粒子網(wǎng)絡(luò)，作為輔助圖形。數(shù)據(jù)圖形和結(jié)構(gòu)中都融合了品牌 DNA 的三角圖形，數(shù)據(jù)樣式更具有品牌的個(gè)性。

△ 柱狀圖

△ 散點(diǎn)圖

預(yù)見(jiàn)未來(lái)的功能創(chuàng)新

時(shí)間線：3D的維度基礎(chǔ)上，我們?cè)黾恿藭r(shí)間的維度，通過(guò)拖動(dòng)時(shí)間線查看不同時(shí)間點(diǎn)的數(shù)據(jù)的變化趨勢(shì)，由此對(duì)未來(lái)數(shù)據(jù)進(jìn)行預(yù)測(cè)。為了強(qiáng)化用戶對(duì)于時(shí)間感知，設(shè)計(jì)了白天和晚上兩種風(fēng)格，白天和夜晚隨著時(shí)間變化而變化。

天氣系統(tǒng)：天氣是未來(lái)數(shù)據(jù)分析極其重要的一個(gè)因子，它會(huì)直接影響交通（例如人流、物流、航空）、醫(yī)療(例如疾病傳播、醫(yī)院就診）等領(lǐng)域。所以我們?cè)O(shè)計(jì)了通用的天氣系統(tǒng)組件，呈現(xiàn)實(shí)時(shí)天氣情況，以輔助用戶進(jìn)行數(shù)據(jù)分析。

控制端：符合大屏使用場(chǎng)景和用戶操作習(xí)慣，同時(shí)小屏控制端支持更復(fù)雜更精準(zhǔn)的操作。

組件庫(kù)搭建

為了提升產(chǎn)品搭建的效率，降低了研發(fā)周期和成本，產(chǎn)品功能模塊實(shí)現(xiàn)了組件化，分為3D場(chǎng)景組件、3D數(shù)據(jù)組件、2D數(shù)據(jù)組件。任何一位設(shè)計(jì)師都可以根據(jù)產(chǎn)品需求，搭配組件模塊，快速搭建大數(shù)據(jù)可視化產(chǎn)品。

數(shù)據(jù)內(nèi)容的包裝

通過(guò)該產(chǎn)品，一方面能夠輔助金融局等政府機(jī)構(gòu)領(lǐng)導(dǎo)把控整體金融平臺(tái)風(fēng)險(xiǎn)、輔助做出平臺(tái)整改指導(dǎo)決策意見(jiàn)，展示金融工作成績(jī)；另一方面體現(xiàn)出騰訊大數(shù)據(jù)能力和公司的社會(huì)責(zé)任；最后，通過(guò)從更長(zhǎng)遠(yuǎn)的眼光去包裝產(chǎn)品，打造智慧監(jiān)管標(biāo)桿產(chǎn)品，從而推動(dòng)與政府客戶更深入廣泛的合作。具體內(nèi)容通過(guò)以下兩條線進(jìn)行組織：

橫線：各個(gè)監(jiān)管維度

靈鯤金融風(fēng)險(xiǎn)態(tài)勢(shì)感知系統(tǒng)專注于呈現(xiàn)金融風(fēng)險(xiǎn)數(shù)據(jù)的呈現(xiàn)，主要分為公司層面和用戶層面，綜合體現(xiàn)潛在的風(fēng)險(xiǎn)趨勢(shì)和實(shí)際影響的范圍。除了靈鯤用于監(jiān)管金融數(shù)據(jù)，整個(gè)監(jiān)管平臺(tái)還負(fù)責(zé)展示包括政治、生態(tài)、電信、消費(fèi)在內(nèi)的多個(gè)監(jiān)管維度，這些維度與金融監(jiān)管維度為同一個(gè)內(nèi)容層級(jí)。我們考慮到騰訊的大數(shù)據(jù)能力可以幫助更多城市綜合管理者了解整個(gè)網(wǎng)絡(luò)社會(huì)的全局性風(fēng)險(xiǎn)，所以每個(gè)維度都是智慧監(jiān)管必不可少的一部分，并且每個(gè)維度之間的橫向交叉對(duì)比能夠使智慧監(jiān)管平臺(tái)發(fā)揮出更大的社會(huì)價(jià)值。

縱線：監(jiān)管顆粒度

靈鯤系統(tǒng)中觀眾可以從全局?jǐn)?shù)據(jù)一直下鉆到個(gè)體數(shù)據(jù)，實(shí)現(xiàn)不同顆粒度的監(jiān)管目的。

具體來(lái)講，全國(guó)的安全風(fēng)險(xiǎn)最終是以加權(quán)平均后的指數(shù)形式體現(xiàn)出來(lái)；再到具體的省份和城市，內(nèi)容細(xì)化到具體風(fēng)險(xiǎn)事件的發(fā)生情況，如電信安全監(jiān)管維度，呈現(xiàn)電信詐騙使用的偽基站的位置，以及發(fā)送詐騙短信的數(shù)量等；最后細(xì)化到城市中的機(jī)構(gòu)和建筑，呈現(xiàn)具體機(jī)構(gòu)的運(yùn)行情況和具體高風(fēng)險(xiǎn)企業(yè)所在建筑進(jìn)行實(shí)時(shí)監(jiān)控。

3. 產(chǎn)品演示視頻

https://v.qq.com/x/page/d0742kep4k1.html

結(jié)語(yǔ)

潘洛斯團(tuán)隊(duì)是基于 DNA 設(shè)計(jì)中心下的大數(shù)據(jù)可視化團(tuán)隊(duì)，成員來(lái)自于 MIG 安全和醫(yī)療部門(mén)，早期專注于 To C 端的產(chǎn)品設(shè)計(jì)，過(guò)去一年里隨著公司戰(zhàn)略的變化和部門(mén)業(yè)務(wù)方向的變化，我們逐漸開(kāi)始把產(chǎn)品設(shè)計(jì)的重心和思考放在了 To B、To G 領(lǐng)域，不斷做著嘗試和探索。以前做 To C 的時(shí)候我們關(guān)注的更多是 DAU、轉(zhuǎn)化率、日活、滿意度這些和產(chǎn)品體驗(yàn)相關(guān)聯(lián)的指標(biāo)，滿足絕大多數(shù)互聯(lián)網(wǎng)用戶的訴求是我們首要去解決的問(wèn)題?，F(xiàn)在做 To B、To G 領(lǐng)域的設(shè)計(jì)，我們更多思考的是如何包裝我們現(xiàn)有的業(yè)務(wù)能力，能夠通過(guò)更加簡(jiǎn)單、直接、有效的方式觸達(dá)給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數(shù)據(jù)和算法能力的互聯(lián)網(wǎng)公司如何幫助他們進(jìn)一步提升他們的業(yè)務(wù)效率和產(chǎn)出，給這個(gè)社會(huì)創(chuàng)造更多的價(jià)值，這也是騰訊多年來(lái)想要承擔(dān)的社會(huì)責(zé)任之一。

文章來(lái)源：優(yōu)設(shè)

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。