引人注目的UX設(shè)計(jì)背后的心理學(xué)

前言

在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計(jì)發(fā)展方向，為接下來的2021的開篇帶個(gè)好頭。本文在了解這些趨勢的同時(shí)，分析特點(diǎn)并舉例落地實(shí)例，來幫助大家啟發(fā)創(chuàng)意設(shè)計(jì)工作的思考切入點(diǎn)。

流行趨勢跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實(shí)——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計(jì)霸屏的這幾年，設(shè)計(jì)風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢就是一個(gè)輪回。設(shè)計(jì)風(fēng)格沒有絕對(duì)的好壞，在審美達(dá)到一定疲勞時(shí)，就會(huì)開始出現(xiàn)新的設(shè)計(jì)風(fēng)格。每一個(gè)新風(fēng)格都值得設(shè)計(jì)師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗(yàn)。 

而在進(jìn)入下一個(gè)十年的過程中，我們對(duì)數(shù)字產(chǎn)品和體驗(yàn)的依賴將日益增長，預(yù)測真正勝出的將會(huì)是3D動(dòng)畫和用戶界面/用戶體驗(yàn)設(shè)計(jì)的結(jié)合設(shè)計(jì)，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計(jì)趨勢吧。

（注:圖片來自網(wǎng)絡(luò)，均標(biāo)明出處及作者，若有侵權(quán)請告知?jiǎng)h除）

1、3D與UI結(jié)合

隨著且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開始變得越來越受歡迎，而在這之前，UI界面一直被平面設(shè)計(jì)所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動(dòng)效、電商到平面視覺，在所有的設(shè)計(jì)類型中都能找到它，3D現(xiàn)實(shí)主義已是各個(gè)領(lǐng)域的大勢。

圈中也出現(xiàn)了很多免費(fèi)或付費(fèi)的3D預(yù)設(shè)元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。

特點(diǎn)：

? 直觀感受；

? 立體真實(shí)；

? 形態(tài)豐富；

▲Izmahsa

▲Mike

▲Tran Mau Tri Tam ?

▲Vikiiing

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

實(shí)例應(yīng)用：

各大廠都開始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個(gè)品牌靜態(tài)頁面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時(shí)間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開始慢慢運(yùn)用到更多的界面交互、H5活動(dòng)中。

▲閑魚、QQ、花椒直播的3D啟動(dòng)頁

▲得物（毒）的3D空間動(dòng)效

網(wǎng)易云音樂每年的音樂總結(jié)報(bào)告都追隨著的設(shè)計(jì)潮流，今年還可以自由選擇人物形象，增強(qiáng)了用戶的主觀代入感，以下是每年的設(shè)計(jì)風(fēng)格變化：

▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景

▲2020-總結(jié)陳詞H5

▲總結(jié)報(bào)告Banner的動(dòng)效

其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運(yùn)營場景，高度還原現(xiàn)實(shí)世界，給小朋友帶來最真實(shí)的學(xué)習(xí)互動(dòng)體驗(yàn)。

▲洪恩識(shí)字（3D學(xué)習(xí)場景）、騰訊開心鼠英語ABCmouse

▲IP在播放兒歌時(shí)的互動(dòng)

值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標(biāo)還加入了3D維度的擬物視覺層次。

蘋果的 mac OS 的人機(jī)交互指南中也明確指出：“圖標(biāo)不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達(dá)應(yīng)用程序的主要目的并暗示用戶體驗(yàn)?！边@次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計(jì)趨勢。

2、軟漸變（Soft gradients）

過于強(qiáng)烈的漸變不再是趨勢，大多數(shù)設(shè)計(jì)師都開始喜歡使用非常簡單和微妙的漸變，如果產(chǎn)品的目標(biāo)用戶人群需要輕松溫和的視覺環(huán)境，那么此風(fēng)格再適合不過。

軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標(biāo)、icon等設(shè)計(jì)中。

特點(diǎn)：

? 低調(diào)溫和

? 微妙漸變

? 清新愉悅

2.1、柔和背景

在設(shè)計(jì)網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創(chuàng)造多彩的模糊背景。它使設(shè)計(jì)看起來非?，F(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺焦點(diǎn)。

▲Vladimir Gruev

▲Sajon

▲Anton Mikhaltsov

▲Ghani Pradita

實(shí)例應(yīng)用：

▲咔咔、美柚

▲https://takearecess.com/

2.2、柔和陰影

柔和的彩色陰影使UI有了更微妙的深度變化，在圖標(biāo)設(shè)計(jì)中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(shè)計(jì)元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。

▲Ghani Pradita

▲Sèrgi Mi

▲Taro Huang

實(shí)例應(yīng)用：

▲有道數(shù)學(xué)（已下架）

▲Uki

3、玻璃擬態(tài)（Glassmorphism）

去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會(huì)出現(xiàn)問題，新擬態(tài)更適合用在局部的少量元素點(diǎn)綴，無法完整地使用在整套應(yīng)用程序中。

▲Alexander Plyut

伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計(jì)思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur的圖標(biāo)也加入了 3D 質(zhì)感設(shè)計(jì)，設(shè)計(jì)語言更為時(shí)尚簡潔。蘋果設(shè)計(jì)師 Alan Dye 在發(fā)布會(huì)上也提到了設(shè)計(jì)風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。

而的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細(xì)微的淺色邊框，整體效果就是讓元素之間有虛實(shí)結(jié)合的特殊空間。毛玻璃運(yùn)用在界面中對(duì)關(guān)鍵信息起到強(qiáng)調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實(shí)的玻璃一樣。

特點(diǎn)：

? 透氣磨砂

? 層級(jí)空間

? 簡潔擬物

▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的作品也朝著玻璃擬態(tài)變化

▲Kostia Varhatiuk

▲Ghani Pradita

▲Ibrahim emran

▲Queble

實(shí)例運(yùn)用：▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時(shí)的 OS X Yosemite 也大量使用了這種設(shè)計(jì)語言

▲的MacOS Big Sur操作系統(tǒng)

▲圖標(biāo)的變化

4、暗黑模式

暗黑模式是白色界面的相反版本，適用于午夜時(shí)分。之前用了很長時(shí)間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。

 暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對(duì)比亮度；夜間模式則專為夜間場景設(shè)計(jì)，重在降低對(duì)比度，以降低在暗光環(huán)境下屏幕對(duì)人眼的刺激。

特點(diǎn)：

? 突出內(nèi)容

? 減輕干擾

? 沉浸體驗(yàn)

▲Tom Koszyk

▲Victa Wille

▲Golo

▲https://www.awwwards.com/inspiration/3d-hover-number-reveal

▲Tran Mau Tri Tam ?

實(shí)例應(yīng)用：

▲有道詞典

▲愛范兒（ifanr）

最常使用暗黑模式的車載系統(tǒng)：

▲小度車載

暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗(yàn)還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計(jì)：

▲MOO音樂(可手動(dòng)切換顏色模式)

▲Space FM

5、多彩高對(duì)比度界面

受Material Design調(diào)色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對(duì)比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風(fēng)格，我個(gè)人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。

顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對(duì)比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞，而在2021一趨勢還將會(huì)繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。

特點(diǎn)：

? 活潑大膽

? 對(duì)比鮮明

? 潮流科技

▲Amy Martino

▲Halo Mobile

▲Anastasia

▲Paolo Spazzini

在網(wǎng)站設(shè)計(jì)中的應(yīng)用：

▲https://www.theartcenter.nyc/

▲https://www.squadeasy.com/en/

▲https://takeboost.com/

實(shí)例應(yīng)用：

▲GoFun出行

▲開言英語

6、抽象幾何元素

從上世紀(jì)初開始，抽象構(gòu)成中的簡單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細(xì)節(jié)，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計(jì)看起來既規(guī)則又有趣。

幾何圖形可以運(yùn)用到UI設(shè)計(jì)中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號(hào)的記憶點(diǎn)。

特點(diǎn)：

? 規(guī)則組合

? 品牌印象

? 重復(fù)記憶

▲Johnny Nova

▲Vladimir Gruev

實(shí)例應(yīng)用：

最近看到的一組原色視覺剛好融合了高對(duì)比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍(lán)三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。

▲專輯的主視覺

當(dāng)然，幾何形狀不止用于色彩圖案細(xì)節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計(jì)方法受到越來越多的關(guān)注。

7、極簡風(fēng)

極簡設(shè)計(jì)的前身是2010年代中期精巧又花哨的設(shè)計(jì)，這種設(shè)計(jì)已經(jīng)存在很長一段時(shí)間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會(huì)選擇更簡潔專一的界面。

特點(diǎn)

? 專注信息

? 清晰易用

? 簡單操作

▲RonDesignLab

▲Quan

▲BAOLIN

▲Gregory Loshakov

▲https://snp.agency/en

談到極簡主義，就不可避免會(huì)涉及到無鍵趨勢，因?yàn)榘存I越少就意味著設(shè)計(jì)越簡潔，而這種簡化過的設(shè)計(jì)將讓手勢操作和語音交互更為流行。

▲Taras Migulko

▲Gleb Kuznetsov?

實(shí)例應(yīng)用：

▲夸克瀏覽器的夸克寶寶

8、將視頻應(yīng)用到UI中

在 2020 年，信息的觸達(dá)的速度將會(huì)變得更快，而視頻是很好的載體，各個(gè)年齡段的用戶都喜歡觀看引人入勝的動(dòng)畫，無論是選擇通過短視頻還是電影的方式來推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強(qiáng)用戶忠誠信任感。

特點(diǎn)：

? 營造氛圍

? 類型多樣

? 品牌調(diào)性

▲Fireart Studio

▲Ehsan Rahimi

實(shí)例應(yīng)用：

▲moo音樂登錄頁

▲蝦米音樂歡迎頁

9、插畫與3D的界線越來越模糊

藝術(shù)插圖從2017年開始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計(jì)行業(yè)，是設(shè)計(jì)領(lǐng)域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個(gè)品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計(jì)中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。 

在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細(xì)節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對(duì)比強(qiáng)烈的大色塊擴(kuò)大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！

▲3D人物的畫筆觸感

▲畫面光源處由波普圓點(diǎn)組成的背景

▲紙本漫畫書中的“聲音詞”

▲漫畫經(jīng)典線條

▲Entei Ryu在3D建模使用插畫質(zhì)感

▲Minh Pham ?在ui界面中的嘗試

實(shí)例應(yīng)用：

騰訊旗下音樂平臺(tái)JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個(gè)風(fēng)格之間來回切換，給我們帶來了一個(gè)多元的音樂世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號(hào)“UoU_Studio”觀看完整視頻。

在3D開始迅速發(fā)展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強(qiáng)互動(dòng)性，而3D插畫與動(dòng)效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。

10、更多的微交互動(dòng)效

最后一點(diǎn)，還是要強(qiáng)調(diào)動(dòng)效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗(yàn)方面扮演著非常重要的角色。它們在 UI 設(shè)計(jì)中決定了一個(gè) App 或網(wǎng)站是普通還是優(yōu)秀，從點(diǎn)擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計(jì)增加了動(dòng)態(tài)性，交互性和直觀性。

動(dòng)效起到的作用：

? 引起人們對(duì)應(yīng)該做什么或接下來將要發(fā)生的事情的關(guān)注；

? 創(chuàng)造流暢和視覺愉悅的過渡；

? 帶給使用者美觀的享受；

? 指導(dǎo)我們進(jìn)行復(fù)雜的操作；

? 確認(rèn)用戶使用旅程中的操作。

▲Jakub Antalik

▲Forever D.

▲Kingyo

▲Eugene Paryhin

▲Leo Natsume

▲Taras Migulko

實(shí)例應(yīng)用：

▲GoFun選擇車輛后的頁面轉(zhuǎn)場動(dòng)效

結(jié)尾：

2020的趨勢在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達(dá)，還會(huì)根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供的豐富體驗(yàn)。

借用Adobe設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款A(yù)pp、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計(jì)。

設(shè)計(jì)趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術(shù)，每個(gè)設(shè)計(jì)人員都可以找到自己喜歡的方向，不管哪種趨勢，最重要的是如何學(xué)習(xí)并合理地運(yùn)用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計(jì)商業(yè)價(jià)值。

文章來源：UI中國   作者：_阿丹a_

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

柵格系統(tǒng)知識(shí)點(diǎn) 

使用柵格系統(tǒng)很有幫助，它有助于在不同布局之間保持一致性，并加快設(shè)計(jì)決策的速度。柵格可更地控制不同屏幕尺寸之間的對(duì)齊方式及布局。本文重點(diǎn)介紹響應(yīng)式柵格的重要知識(shí)點(diǎn)，以及產(chǎn)品設(shè)計(jì)師如何在設(shè)計(jì)工作流中調(diào)整柵格。

柵格結(jié)構(gòu)

柵格由3個(gè)主要組件構(gòu)成，包括列、槽和邊距。

列

列是虛構(gòu)的垂直塊，用于對(duì)齊內(nèi)容。我們用百分比（％）或固定值定義列寬。

柵格中的列

槽

它是列與列之間的空間，有助于分隔內(nèi)容，我們將槽的寬度定義成固定值。

柵格中的槽

邊距

邊距是內(nèi)容和屏幕邊緣之間的空間。我們將邊距寬度定義為固定值，該值決定每個(gè)屏幕尺寸的最小空間。彈性邊距指的是列，槽和側(cè)邊距組成柵格后剩下的空間，它會(huì)根據(jù)不同的屏幕尺寸而變化。

柵格中的頁邊距和靈活邊距

如何使用柵格設(shè)計(jì)界面？

信息內(nèi)容（圖像，文本或UI元素）常常會(huì)被放置于可見和不可見的內(nèi)容塊中?？梢妰?nèi)容塊具有明顯的邊框或填充區(qū)，而不可見內(nèi)容塊則不具備，多數(shù)是透明底?？梢姷母讣?jí)內(nèi)容塊包括卡片，橫幅等組件。

卡片形式的可見內(nèi)容塊

不可見的內(nèi)容塊包括文本或功能按鈕。

內(nèi)容塊應(yīng)與列的邊緣對(duì)齊，避免與槽邊緣對(duì)齊。內(nèi)容塊中的信息是獨(dú)立的，不一定非要與列對(duì)齊。

內(nèi)容塊的列對(duì)齊

列結(jié)構(gòu)

用于構(gòu)成柵格的列數(shù)稱為列結(jié)構(gòu)。8、12、16和20是用于響應(yīng)式布局的一些最常見的列結(jié)構(gòu)，設(shè)計(jì)師可以根據(jù)設(shè)計(jì)要求選擇具體結(jié)構(gòu)。

8/12/16/20列柵格結(jié)構(gòu)

12列結(jié)構(gòu)是最靈活的，它可以進(jìn)一步分解成為4–4–4或3–3–3–3大小的內(nèi)容塊。

響應(yīng)點(diǎn)

當(dāng)屏幕尺寸到達(dá)響應(yīng)點(diǎn)，那么頁面布局也會(huì)有對(duì)應(yīng)更改，以實(shí)現(xiàn)最佳的布局視圖。列結(jié)構(gòu)，列寬，槽寬度和邊距都取決于響應(yīng)點(diǎn)。內(nèi)容塊則根據(jù)不同的響應(yīng)點(diǎn)堆疊或縮放，以重新調(diào)整獲得最佳視圖。

柵格縮放和堆疊

如果較小的屏幕具備足夠空間來呈現(xiàn)，其實(shí)縮小比例就能展示完整了。如果屏幕實(shí)在是太小，就會(huì)垂直堆疊成一列。

柵格的呈現(xiàn)類型

柵格有3種呈現(xiàn)形式，一起來看下吧！

固定柵格

固定柵格有固定寬度的列以及頁面邊距，且固定的柵格具有固定的內(nèi)容塊寬度，該寬度在響應(yīng)點(diǎn)范圍內(nèi)不會(huì)出現(xiàn)變化，并且頁面邊距會(huì)占據(jù)剩余的空間。

固定寬度柵格

流動(dòng)或全寬柵格

流動(dòng)?xùn)鸥窳械膶挾仁遣欢ǖ模酆晚撁孢吘喽际枪潭ǖ?。流體柵格具有靈活的內(nèi)容塊寬度，該寬度根據(jù)屏幕大小來變化。流體柵格中，列會(huì)隨著可用空間變大或是縮小。

流動(dòng)?xùn)鸥?

混合柵格

混合柵格同時(shí)具有流動(dòng)寬度和固定寬度。在現(xiàn)代布局中，一些元素會(huì)完全脫離柵格。常見的例子比如頁眉，頁腳，或是出血的圖片內(nèi)容塊。

混合柵格

如果內(nèi)容塊寬度大于可用的屏幕尺寸，則固定柵格會(huì)轉(zhuǎn)變?yōu)榱鲃?dòng)?xùn)鸥駚磉m應(yīng)屏幕。

如何在原型制作工具中設(shè)置柵格系統(tǒng)？

電腦視窗

不要以1440×900、1600×900或1920×1080等高分辨率進(jìn)行設(shè)計(jì)。1280×800是電腦端內(nèi)最小的分辨率，以1280×800設(shè)計(jì)的流動(dòng)與固定寬度的布局都可以適應(yīng)更大的屏幕。

固定寬度柵格設(shè)置

要設(shè)置固定寬度的柵格，我們對(duì)槽和列都應(yīng)固定好數(shù)值。建議設(shè)置列寬為74px、槽寬32px以及16px的邊距。

固定寬度柵格設(shè)置

列寬74px、槽寬32px可以生成1240px的內(nèi)容塊寬度（不包括兩端的16px側(cè)邊距），最大化的利用了可用屏幕尺寸。在不同的響應(yīng)點(diǎn)，固定內(nèi)容寬度大于當(dāng)前屏幕尺寸時(shí)，則固定寬度柵格開始變?yōu)榱鲃?dòng)?xùn)鸥瘛?

流動(dòng)?xùn)鸥裨O(shè)置

要設(shè)置流動(dòng)寬度柵格，對(duì)槽使用數(shù)值，對(duì)列使用自動(dòng)計(jì)算的值（以％為單位）。

流體布局柵格設(shè)置

流動(dòng)?xùn)鸥窭谜麄€(gè)屏幕尺寸作為主要內(nèi)容的寬度，每側(cè)留出16px的側(cè)邊距。

移動(dòng)視窗

在移動(dòng)端使用流動(dòng)?xùn)鸥?，槽和頁邊距的寬度推薦設(shè)置成16px。因?yàn)橐苿?dòng)設(shè)備的屏幕分辨率較小，若再分成12個(gè)獨(dú)立的列、槽和邊距的話，設(shè)計(jì)起來也會(huì)很麻煩。

移動(dòng)端的流動(dòng)?xùn)鸥裨O(shè)置

因此，我們將3列中的每列合并以創(chuàng)建4個(gè)粗列，從而使布局柵格既簡潔又方便，快速對(duì)齊。

平板視窗

平板設(shè)置柵格的方式與移動(dòng)設(shè)備非常相似，推薦槽寬和邊距分別設(shè)置為32px與16px，可以在768×1024大小的畫板上為平板設(shè)計(jì)界面。

平板電腦流動(dòng)?xùn)鸥裨O(shè)置

將12列優(yōu)化成6列，讓柵格清晰明了，谷歌的材質(zhì)設(shè)計(jì)曾建議使用24px寬的槽與頁邊距，實(shí)際應(yīng)用時(shí)，不妨都試下看哪個(gè)效果更好。

布局樣式

柵格布局的變化決定了主要內(nèi)容的結(jié)構(gòu)，針對(duì)不同的布局要求，使用不同的柵格系統(tǒng)，而頁面中的內(nèi)容塊數(shù)量決定了頁面布局的變化。

單列布局

單列布局或全寬布局，是著陸頁和首頁的風(fēng)格之一。還可以合并12列來創(chuàng)建一個(gè)單列內(nèi)容塊，也可以將12列分配到父級(jí)內(nèi)容塊中。

一級(jí)頁面常應(yīng)用單列或全寬柵格布局

雙列布局

該布局有兩個(gè)內(nèi)容塊。通常，其中的一個(gè)內(nèi)容塊會(huì)占據(jù)比較多的區(qū)域進(jìn)行信息展示。

在雙列布局中，列要么分布在9–3或8–4父級(jí)內(nèi)容塊中，其中的一個(gè)組合列區(qū)域，用來創(chuàng)建主要內(nèi)容。帶有單個(gè)邊欄的界面是兩列布局的常見呈現(xiàn)形式。

三列布局

三列布局具有三個(gè)內(nèi)容塊，主要內(nèi)容塊占據(jù)最大的展示區(qū)域，在三列布局中，列分布在3–6–3或2–8–2父級(jí)內(nèi)容塊中。

固定寬度的側(cè)邊欄布局

固定寬度的邊欄布局稍有不同。邊欄寬度在一組響應(yīng)點(diǎn)范圍內(nèi)固定，剩余空間由固定寬度或流動(dòng)寬度的內(nèi)容塊占用。

側(cè)邊欄固定布局

移交開發(fā)

在原型工具中，設(shè)計(jì)布局和編碼有很大的不同。代碼可以合并列或?qū)⑵涠询B，比如合并12列以創(chuàng)建單個(gè)列布局，或?qū)?2列分布到一組，用來創(chuàng)建不同布局變化的內(nèi)容塊。在原型設(shè)計(jì)工具中設(shè)計(jì)布局時(shí)，你需要確保開發(fā)人員清楚了解電腦端，移動(dòng)設(shè)備和平板設(shè)備上設(shè)置的列寬、槽寬及邊距。像Bootstrap，Zurb Foundation等開發(fā)軟件，其中對(duì)柵格值的設(shè)置會(huì)有出入。

自定義柵格

設(shè)計(jì)師可以多嘗試不同的柵格值設(shè)置，以找到最適合自己的呈現(xiàn)形式。如果交付開發(fā)的時(shí)間非常緊急，請使用文中建議的數(shù)值，更保險(xiǎn)也不會(huì)出錯(cuò)。

文章來源：站酷   作者：UX辭典

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)知名的電商平臺(tái)，它的成功背后卻有一個(gè)很難讓人理解的設(shè)計(jì)邏輯：成功的設(shè)計(jì)不一定是美觀的。為什么會(huì)這么說呢？本文將從四個(gè)維度展開分析，希望對(duì)你有幫助

對(duì)于產(chǎn)品設(shè)計(jì)師來說，在日常工作中做的產(chǎn)品類型主要是兩種：一是B端項(xiàng)目，另一種是C端項(xiàng)目。近些年來，互聯(lián)網(wǎng)進(jìn)入下半場，C端用戶增長觸及天花板，流量的紅利逐漸消退。很多企業(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ì)有很大的不同。那么今天這篇文章，我們就一起來聊聊B端和C端產(chǎn)品設(shè)計(jì)的差異性。

直接進(jìn)入正題，本文將從目標(biāo)用戶、使用場景、產(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ì)這類用戶開發(fā)的系統(tǒng)型軟件、工具或平臺(tái)。例如：CRM 系統(tǒng)、 ERP 系統(tǒng)、OA系統(tǒng)、SAAS等等。

02使用場景

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

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

03產(chǎn)品需求

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

C端：

B端：

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

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

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

C端：

B端：

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

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

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

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

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

文末福利

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

產(chǎn)品團(tuán)隊(duì)的溝通離不開原型，今天為大家推薦的原型設(shè)計(jì)工具M(jìn)ockplus，更快更簡單，5分鐘制作一個(gè)交互原型頁面。支持團(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ǎn)品需求、產(chǎn)品本質(zhì)及特性、產(chǎn)品設(shè)計(jì)思維、設(shè)計(jì)原則上都有所差異，但是C端和B端產(chǎn)品也有很多共同點(diǎn)，如：都要求產(chǎn)品簡單實(shí)用和有效準(zhǔn)確，都是為了更好的滿足用戶的需求，解決用戶的痛點(diǎn)等。如果能做好以上這些關(guān)鍵點(diǎn)，無論是做C端還是B端，都會(huì)是非常優(yōu)秀的產(chǎn)品。

轉(zhuǎn)自：ui

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

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

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

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

一、導(dǎo)語

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

面臨的問題:

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

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

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

2. 流程較長，操作繁瑣

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

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ì)使填寫的人失去定位，產(chǎn)生迷惑。

二、解決方案

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

根據(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è)入口錄入。因此在填寫長表單的時(shí)候，如果能從系統(tǒng)中自動(dòng)獲取到數(shù)據(jù)，就可以自動(dòng)為其填充，可根據(jù)業(yè)務(wù)場景，判斷是否讓其修改和更新。

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

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

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

如果一個(gè)長表單，需要多個(gè)不同的業(yè)務(wù)域的人來填寫，那么需要協(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)離開焦點(diǎn)區(qū)域或定位到下一個(gè)字段的時(shí)候，提示其填寫有誤；這樣做的目的是減少后續(xù)修改的次數(shù)，在長表單下，統(tǒng)一提示其填寫錯(cuò)誤會(huì)是一場災(zāi)難。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

但是在存在分組瀏覽導(dǎo)航和頂部懸浮標(biāo)簽的情況下，不建議使用快速返回頂部的按鈕，因?yàn)樵谔顚懕韱蔚臅r(shí)候，使用快速置頂?shù)膱鼍氨容^少。

2. 提供分組模塊收起展開功能

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

3. 步驟提供信息填寫完成度提示

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

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

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

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

因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

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

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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ǎng)站設(shè)計(jì)公司？

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

       首先回答：何為高端？



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



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



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



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



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



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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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í)如何讓用戶愉悅并的填寫表單。

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

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

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

重點(diǎn)概覽

一、表單分析

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

表單分析

1.1 表單的重要性

在上面的前言中也提到了表單作為基礎(chǔ)通用組件，也是在各個(gè)企業(yè)級(jí)中臺(tái)中出現(xiàn)頻率最高的元素之一。并且在《Web Form Design》一書中 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)?，盡管人機(jī)交互的發(fā)展進(jìn)步，表單仍然是用戶在網(wǎng)絡(luò)中進(jìn)行交互的主要方式。所以表單是被認(rèn)為完成目標(biāo)的最終，也是最重要的階段。

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

1.2 拆分表單

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

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

表單組件：包含了輸入框、下拉框、日期選擇器、時(shí)間選擇器、開關(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ì)拉長用戶的短期記憶，如果沒有表單標(biāo)簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會(huì)詳細(xì)分析。

幫助信息：當(dāng)表單標(biāo)簽不足以對(duì)輸入項(xiàng)準(zhǔn)確說明時(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ǔ)表單

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

分步表單

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

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

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

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

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

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

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

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

1.2 單列布局or多列布局

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

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

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

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

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

1.4 按鈕的位置

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

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

同理，表單中會(huì)出現(xiàn)組合按鈕，比如：取消與確認(rèn)、提現(xiàn)與充值。根據(jù)古騰堡法則，用戶使用界面時(shí)從第一視覺落點(diǎn)區(qū)是主視覺區(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ì)師常常遇到表單字段較多并且頁面空間有限的情況，為了減少橫向節(jié)省空間設(shè)計(jì)師常常的做法是將表單標(biāo)簽刪除，使用占位提示文本作為信息提示。但是設(shè)計(jì)師必須有意識(shí)知道到這種方式適合使用在較為簡單的表單中，比如：表格中點(diǎn)擊修改名稱操作，彈出氣泡并且氣泡中只存在一個(gè)字段。或者是在用戶非常熟知的登錄注冊等較為簡單的表單填寫時(shí)使用。但是當(dāng)用戶需要填寫大量字段信息時(shí)不建議使用占位提示代替表單標(biāo)簽的方式。原因有兩點(diǎn)：1. 當(dāng)用戶選中文本框填寫時(shí)，占位內(nèi)容即消失，這時(shí)候用戶無法檢查并確認(rèn)其所寫的內(nèi)容是否符合預(yù)期。2. 當(dāng)用戶看到文本框中已經(jīng)回填內(nèi)容了，誤認(rèn)為占位提示是默認(rèn)回顯內(nèi)容，造成內(nèi)容已經(jīng)填完不需要再操作的錯(cuò)覺。

針對(duì)上面問題也不是沒有解決方案，在Material Design中有提供針對(duì)上面的問題的解決方案，我們這邊暫時(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)為用戶在填寫表單時(shí)能夠很順利的完成表單錄入，但事實(shí)相反。在實(shí)際的使用場景中，特別是在一些業(yè)務(wù)較為復(fù)雜的表單中用戶極易發(fā)生錯(cuò)誤，這時(shí)候需要需要明確的校驗(yàn)信息、準(zhǔn)確的校驗(yàn)時(shí)機(jī)、輸入的限制提示。

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

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

限制與格式提示

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

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

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

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

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

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

排列與布局

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

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

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

將關(guān)聯(lián)性強(qiáng)的字段分組
如果頁面橫向?qū)挾茸銐虼髸r(shí)，可以將一個(gè)區(qū)域中字段較多、并具有關(guān)聯(lián)性字段進(jìn)行分組，這樣不僅有利于空間布局上的利用，還可以通過字段之間關(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)過對(duì)十幾個(gè)業(yè)務(wù)線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據(jù)原理，我們可以假設(shè)原子寬度XS為100，那么通過尺寸的倍數(shù)+間距的方式來計(jì)算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計(jì)算方式也是用來解決視覺對(duì)齊規(guī)則，如下圖所示：

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

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

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

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

表單字段右對(duì)齊

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

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

1.3 表單布局類型 

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

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

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

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

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

寫在最后

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

文章來源：tob.design

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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)頁時(shí)四處移動(dòng)尋找信息的方式

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

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

交互上：

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

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

試想一下我們在大型商場里暈頭轉(zhuǎn)向的場景，會(huì)常常抱怨其導(dǎo)視系統(tǒng)的糟糕，網(wǎng)站有過之而無不及。

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

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

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

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

設(shè)計(jì)者創(chuàng)造易用的表單，展示有用的信息，建立流暢的交互，這些都要靠導(dǎo)航來引導(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)無形中建立了用戶心中對(duì)某類產(chǎn)品的預(yù)期信息架構(gòu)，使其在瀏覽信息時(shí)更有方向性，例如在瀏覽一家服裝店鋪時(shí)，用戶在進(jìn)入導(dǎo)航列表前就對(duì)種類有了預(yù)期，諸如男士上裝，男士下裝，女士上裝、女士下裝、配飾，包袋等。

2）字母

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

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)航往往指頁眉和頁腳，存在于網(wǎng)站的大部分頁面，便于用戶隨時(shí)跳轉(zhuǎn)。 

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

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

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

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

3.功能

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

4.搜索

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

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

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

5.網(wǎng)站地圖

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

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

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è)頁面的視覺效果

2.橫向?qū)Ш?

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

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

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

3.豎向?qū)Ш?

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

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

4.混合導(dǎo)航

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

5.面包屑

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

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

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

6.分頁與無限滾動(dòng)

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

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

7.突出的版式

一些設(shè)計(jì)者想要用戶優(yōu)先注意到的內(nèi)容，會(huì)采用突出的版面設(shè)計(jì)，通過改變文字圖形的大小，顏色等與其他一般性內(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ù)首頁規(guī)劃全局的導(dǎo)航，首頁是用戶在網(wǎng)站中導(dǎo)航的起點(diǎn)，考慮如何讓用戶盡可能方便地從網(wǎng)站上的寬泛內(nèi)容（首頁）轉(zhuǎn)到他們所需的更加具體的內(nèi)容。

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

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

3.SEO優(yōu)化

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

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

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

表現(xiàn)層

1.一致性

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

2.清晰性

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

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

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

3.凸顯超鏈接

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

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

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

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

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

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)頁設(shè)計(jì)后可以根據(jù)瀏覽網(wǎng)頁的一般習(xí)慣，通過以下幾個(gè)方面對(duì)導(dǎo)航設(shè)計(jì)進(jìn)行簡單審查

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

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)站的訪問情況進(jìn)行回顧并進(jìn)行一些評(píng)估

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

總結(jié)

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)