Apple 致力于讓每件產(chǎn)品都賞心悅目，與其說官網(wǎng)是產(chǎn)品展示平臺，倒不如說它是蘋果產(chǎn)品分支的延續(xù)。從 Apple.com 找設(shè)計靈感是每一位設(shè)計師都做過的事，那它到底有何魅力？文章對Apple的網(wǎng)頁設(shè)計展開了梳理分析，與大家分享。

一、沉浸與交互式體驗

每當(dāng)有新產(chǎn)品發(fā)布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發(fā)布的 iPad Pro 也一樣。

這背后是 Apple 基于 webGL 技術(shù)，創(chuàng)造的一種沉浸與交互式產(chǎn)品體驗。

1. 連續(xù)性

我們在產(chǎn)品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現(xiàn)連續(xù)性。

一方面，滾動作為大多數(shù) Web 用戶最自然的操作，學(xué)習(xí)成本極低。

另一方面，在冗長的頁面下，滾動能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場銜接。

iPad Pro 的連續(xù)性

2. 趣味性

另外，采用了大量的動畫式轉(zhuǎn)換（animated transition），即操作時展示的動態(tài)效果，以此來增加趣味性。

伴隨著豐富的、若隱顯現(xiàn)的章節(jié)文案，就像電影的旁白一樣，娓娓道來。

通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進(jìn)或后退，毫無樂趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

說到言之有序，我們看 iPad 的頁面介紹。四款產(chǎn)品，分別是：iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感，可謂妙不可言。

iPad的秩序感

• iPad Pro 的拍攝角度接近于正側(cè)面。
• iPad Air 是四分之三側(cè)面。
• iPad 是正面。
• iPad mini 是俯視。

如此一來，即顯得有序，也不會導(dǎo)致視覺疲勞。

2. 設(shè)計語言

其次，官網(wǎng)與 iOS 保持協(xié)同的設(shè)計語言，給用戶呈現(xiàn)了一致的感官體驗。

從 iOS 11 開始，蘋果就采用了 Large Title 大標(biāo)題的字體風(fēng)格。字重也從 Regular + Light 的組合，轉(zhuǎn)向的 Medium + Bold ，以此增強(qiáng)信息傳播中的識別力。

HomePod

另外，高斯模糊的標(biāo)題欄背景、產(chǎn)品的投影等設(shè)計語言也保持系統(tǒng)一貫的風(fēng)格。我們可以很清晰的看到 Web 設(shè)計的同步轉(zhuǎn)變。

三、層次

1. 視差

第三是視差帶來的層次感。

蘋果奉行包豪斯的無裝飾和極簡的理念。當(dāng)然，它不是那種附庸的美觀及外表的光鮮，而是將復(fù)雜難懂的技術(shù)以簡潔的形式傳達(dá)給用戶。

Mac Pro 視差滾動

在信息層次方面，Apple 的編排設(shè)計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達(dá)圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

2. 視覺張力

不僅如此，樣式上富有視覺張力?；驍U(kuò)張、或收縮、或吸引、或排斥之感覺，呈現(xiàn)刺激與震撼。舉兩個例子：

A13芯片的擴(kuò)張力

擴(kuò)張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴(kuò)張。采用發(fā)散式的視覺引導(dǎo)，視覺張力就出現(xiàn)了，讓人感覺巍峨壯觀。

Pro級攝像頭的排斥力

排斥力：通過元素的大小對比，可以形成一定強(qiáng)度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達(dá)空間意識。視覺上被其構(gòu)圖、美感觸動。

四、高級感

再聊聊蘋果的高級感是怎么來的？

1. 視覺降噪

我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。

iMac Pro 高級感

回過頭來看蘋果官網(wǎng)的大部分頁面，除了產(chǎn)品界面色彩 和 按鈕藍(lán) 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。

甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。

換言之，減少使用顏色的數(shù)量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產(chǎn)品高級感的效果。

iPad 留白

除此之外，恰當(dāng)?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容，讓重要的信息更準(zhǔn)確的傳達(dá)。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現(xiàn)一種意境美。

所以我們做設(shè)計時應(yīng)當(dāng)多做減法，避免無意義的視覺元素堆砌，反而能讓你的設(shè)計更有高級的氣質(zhì)。

這又印證了現(xiàn)代主義建筑大師密斯·凡德羅的那句話：Less Is More。

2. 配圖

當(dāng)然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。

蘋果官網(wǎng)大部分的產(chǎn)品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果，這一點能看到蘋果對于品質(zhì)的追求。

Designed by Apple in California

不僅如此，蘋果產(chǎn)品圣經(jīng)《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個幕后制作視頻，相當(dāng)硬核。

3. 蘋果式文案

做過英文 Web 的設(shè)計師都知道，英文往往比中文更好設(shè)計，相同的布局英文出來的效果也更好看。

這不是崇洋媚外，心理學(xué)有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產(chǎn)生一種廉價感（實際上是羞澀感）的心理感受。

老外也一樣，你可以看到美國企業(yè)：蘋果、麥當(dāng)勞、星巴克都是使用圖形 Logo，而日本企業(yè)不用母語，而是用英文，比如 SONY、TOYOTA、Canon。

你的下一臺電腦，何必是電腦。

回到蘋果官網(wǎng)，我們看到一部分文案是英文產(chǎn)品名稱，這個不會感覺羞澀。

那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團(tuán)隊用了完全不對仗但押韻、奇怪的排比、雙關(guān)、重復(fù)等修辭手法。雖然語感很差，但基本上能明白字面意思。

其實這樣做的目的就是為了創(chuàng)造一種陌生感、一種獨特的語言風(fēng)格，來凸品牌氣質(zhì)。舉幾個例子：

• 重復(fù)：比如說 iPad Pro「你的下一臺電腦，何必是電腦?！?/span>
• 雙關(guān)：比如說 AppleWatch 的「它會時時關(guān)心你的心?！?/span>
• 排比：比如說 iMac的「從極速，到神速，任你提速?！?/span>
• 押韻：比如說 配件 的「可重復(fù)充電，又可圈可點?！?/span>
• 對比：比如說 iPad mini 的「身量小，能量大。」

4. 儀式感

最后一點。生活要有儀式感，蘋果官網(wǎng)也有儀式感。

國際婦女節(jié)專題

在一些特殊的日子里，例如三八節(jié)當(dāng)天，友商選擇打廣告促銷。而蘋果推出了國際婦女節(jié)專題，致敬女性的偉大，這一做法頗具人文情懷。

不過話又說回來，感動歸感動，還是參與友商的打折活動香。

#相關(guān)閱讀#

Apple 的設(shè)計哲學(xué)：交互篇

Apple 的設(shè)計哲學(xué)：UI 篇

Apple 的設(shè)計哲學(xué)：聲音篇

文章來源：人人都是產(chǎn)品經(jīng)理           作者：阿洋

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

人有七宗罪，其中就有懶惰，懶是人的天性，是刻在骨子里的基因。

現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品幾乎都是在滿足人的懶，買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等，互聯(lián)網(wǎng)的發(fā)展把人慣得越來越懶，也正因如此，才成就了許許多多的產(chǎn)品。

為用戶多想一步，就是思考用戶的行為目的是什么，然后在設(shè)計上為用戶提供快捷的操作方式，這樣就能提高產(chǎn)品的使用體驗。

設(shè)計產(chǎn)品時不能總以自己慣有的思維方式去設(shè)計，要能把自己變成當(dāng)下產(chǎn)品的用戶，站在用戶的角度去尋找答案解決問題。

我們從更高一個層面去思考這個問題，是哪些人創(chuàng)造了互聯(lián)網(wǎng)盛世，又是哪些人推動了社會進(jìn)步，絕對不是懶的學(xué)習(xí)、懶的改變自己的人，而是那些善于思考想要改變“懶”的人。

文章來源：站酷-吳星辰

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

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

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

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

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

重點概覽

一、表單分析

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

表單分析

1.1 表單的重要性

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

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

1.2 拆分表單

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

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

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

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

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

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

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

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

1.3 表單類型

基礎(chǔ)表單

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

分步表單

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

分組表單
 將一個復(fù)雜表單拆解歸類分組。分組表單與分布表單特點較為相似，都可以減輕用戶因為表單大而復(fù)雜的造成填寫的負(fù)擔(dān)，并且能減少用戶表單填寫出錯率

體驗與優(yōu)化

1.1 必填項or可選項

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

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

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

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

1.2 單列布局or多列布局

多列表單字段會導(dǎo)致用戶視覺路徑變長，因為如果表單中有水平相鄰的字段，則用戶必須以Z樣式進(jìn)行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段，將數(shù)據(jù)輸入到錯誤字段中。而最終校驗信息時用戶得反復(fù)檢查錯誤項導(dǎo)致用戶放棄填寫。

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

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

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

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

1.4 按鈕的位置

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

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

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

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

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

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

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

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

1.6 校驗反饋及時并準(zhǔn)確

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

錯誤提示校驗

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

限制與格式提示

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

校驗時機(jī)

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

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

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

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

排列與布局

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

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

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

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

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

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

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

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

表單字段頂部對齊

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

表單字段右對齊

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

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

1.3 表單布局類型 

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

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

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

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

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

寫在最后

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

文章來源：tob.design

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

文章來源：站酷    作者：百度MEUX

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

以下是百度網(wǎng)盤UE團(tuán)隊近期對會員中心體驗進(jìn)行優(yōu)化，希望對大家做商業(yè)化產(chǎn)品有所幫助。

項目背景

會員中心是承載著產(chǎn)品增值權(quán)益展示、購買、管理的「集合地」。自2016年起推出會員和超級會員兩項增值服務(wù)至今已有4年時間，隨著時間推移，用戶對網(wǎng)盤會員的訴求越來越多樣，會員中心也不僅僅承載著支付能力，更多地是獲取福利信息和情感上的尊享感知，同時在產(chǎn)品框架上的拓展性和效率也有待提升，因此有了本次會員中心改版項目。

對于設(shè)計師而言，我們發(fā)起這個項目所面臨的挑戰(zhàn)，不僅停留在用戶體驗的優(yōu)化還需要兼顧商業(yè)轉(zhuǎn)化。接下來將從確定目標(biāo)、會員中心框架重構(gòu)、視覺語言升級、沉淀通用組件等方面，跟大家分享下改版背后的設(shè)計思考。

確認(rèn)目標(biāo)

在著手推進(jìn)項目設(shè)計前，我們通過定性和定量的分析，并組織多角色對本次升級的目標(biāo)進(jìn)行確認(rèn)，本次升級的目標(biāo)是：提升用戶決策效率；提升用戶尊享感；沉淀設(shè)計組件庫。

1. 為什么要提升用戶決策效率？

會員中心是價值與信息的洼地，用戶需要在眾多特權(quán)、優(yōu)惠信息中做出決策。整個框架清晰、直觀、易懂，是提升用戶決策效率及滿意度的關(guān)鍵所在。

我們通過支付轉(zhuǎn)化漏斗分析并結(jié)合用戶反饋發(fā)現(xiàn)，改版前，會員中心信息架構(gòu)比較扁平和單一，缺乏關(guān)鍵性信息的直觀展示，比如：優(yōu)惠信息、會員服務(wù)信息，導(dǎo)致部分用戶無法在付費(fèi)過程中更好地做決策。

此外，在支付流程上，操作鏈條較長，容易引起用戶厭倦，導(dǎo)致用戶流失。基于這些考慮，我們將對現(xiàn)有框架進(jìn)行升級，以提升用戶的決策效率。

2. 為什么要提升用戶尊享感？

會員中心也是用戶感知身份變化、感知會員尊享的第一步。改版前，不同身份用戶（未開通/會員/超級會員）看到的會員頁面卻是相同的，無法直觀感受到不同身份的差異。

通過UER的用戶訪談我們也發(fā)現(xiàn)，很多用戶出現(xiàn)以下場景：

購買會員后用戶，產(chǎn)生疑惑「是否購買成功了嗎？」；身為超級會員用戶，「感受不到任何尊享感受」；快過期的會員用戶，「對會員/超級會員快過期的也感知不到，導(dǎo)致特權(quán)中斷，影響使用體驗」…

因此，我們需要對整體身份的感知進(jìn)行升級，讓用戶更清晰地感知到自己身份的層級。

3. 為什么要沉淀設(shè)計組件庫？

對于產(chǎn)品而言，會員中心也是會員類活動的主要運(yùn)營渠道。

在日常「小步快跑」迭代需求中，為了提升項目組的開發(fā)效率以及更好地實現(xiàn)產(chǎn)品側(cè)多場景模塊靈活調(diào)用的訴求，需要對復(fù)用率較高且靈活多變的模塊（尤其是支付模塊、特權(quán)模塊）進(jìn)行組件化。因此我們也對多個模塊進(jìn)行組件沉淀，提升產(chǎn)品迭代效率。不僅于此，組件化也能給用戶提供更加統(tǒng)一的認(rèn)知，做到產(chǎn)品體驗上的統(tǒng)一和規(guī)范化。

設(shè)計落地

明確了目標(biāo)后，我們從以下維度進(jìn)行設(shè)計升級，解決現(xiàn)存問題：懂你所想，會員中心框架重構(gòu)；凸顯尊享感知，視覺語言升級；提升迭代效率，通用組件沉淀。

1. 懂你所想，會員中心框架重構(gòu)

我們本次框架重構(gòu)的關(guān)鍵詞就是「懂你所想」，只有更了解用戶，才能提供更符合用戶的選擇，從而提升用戶決策效率。因此，我們在交互框架層面上，做了以下幾件事：打造分層布局；強(qiáng)化關(guān)鍵信息；縮短支付步長；智能化推薦。

打造分層布局

進(jìn)入會員中心的用戶，根據(jù)會員成長周期可被劃分為：歷史未付費(fèi)用戶、會員開通中用戶、會員即將過期用戶、會員已過期用戶。

因此，在這次框架設(shè)計中，我們根據(jù)身份、動機(jī)、行為的差異進(jìn)行分層布局。改變以往的「多人一面」的布局架構(gòu)，打造出新的「多人多面」的靈活分層頁面布局。

當(dāng)用戶是歷史未付費(fèi)用戶時，我們更加突出用戶的特權(quán)介紹和商品支付，便于用戶了解會員服務(wù)和商品信息；當(dāng)用戶是開通中的用戶，我們更加突出用戶可尊享的福利信息，突出尊享感；當(dāng)用戶為即將過期用戶或已過期用戶時，我們展示用戶常用特權(quán)信息，喚醒用戶付費(fèi)意愿，并為用戶提供便捷的續(xù)費(fèi)能力。

下面是改版前后效果對比，從單一身份感知到多元分層處理。

強(qiáng)化關(guān)鍵信息

關(guān)鍵信息也是用戶更為「關(guān)心」的信息，通過調(diào)研發(fā)現(xiàn)，網(wǎng)盤用戶更加關(guān)注會員優(yōu)惠活動信息、服務(wù)到期提醒以及會員之間的差異性，因此在本次升級中，我們對用戶所關(guān)心的決策信息進(jìn)行強(qiáng)化，恰如其分地展示便于用戶決策，同時提升用戶的付費(fèi)意愿。

新增運(yùn)營渠道

通過用戶訪談，了解到很多用戶總是錯過網(wǎng)盤的福利活動，不知道在哪里能接受到一手信息。

因此，本次升級我們在會員中心中新增了運(yùn)營位，增加用戶關(guān)注的優(yōu)惠活動的曝光。

服務(wù)到期提醒

針對即將過期或已過期的用戶，我們會展示用戶常用特權(quán)功能的即將到期的信息，避免用戶特權(quán)功能到期后，給用戶日常使用帶來困擾，比如使用視頻原畫備份等功能，我們也會提前告知給用戶：「3天后即將到期，將不再享有視頻原畫備份和在線解壓等11項特權(quán)」，讓用戶提前做決策。

強(qiáng)化特權(quán)的差異對比

此外，我們還強(qiáng)化了特權(quán)對比的差異，分別展示了普通用戶、會員用戶、超級會員用戶擁有特權(quán)功能的差異性，便于用戶根據(jù)自身需求選擇對應(yīng)更為合適的會員服務(wù)，避免買錯等一系列不便或者多花冤枉錢的行為。

縮短支付步長

為了更方便用戶進(jìn)行支付，讓用戶付費(fèi)行為更加順暢絲滑，我們摒棄以往全頁面跳轉(zhuǎn)形式，采用了浮層收銀臺的方式，減少用戶在頁面間的跳轉(zhuǎn)而帶來的迷失感，達(dá)到簡化支付路徑的目的。

也在用戶即將過期等狀態(tài)，保留了原有前置展示商品和支付操作的方式，讓用戶一鍵完成續(xù)費(fèi)，方便又快捷。同時，也會在用戶選擇商品支付時，展示用戶帳號信息，避免用戶買錯的問題。

智能化推薦

與以往不同，我們不局限于通過理性的信息展示，讓用戶自己搜尋信息、被動匹配，同時我們也在不斷嘗試采用更加擬人化、對話感的方式觸達(dá)用戶，推送給用戶更為關(guān)注的信息，更加精細(xì)化地探索多樣的運(yùn)營場景。

比如：針對已付費(fèi)用戶，結(jié)合用戶的使用場景，更多展示特權(quán)信息，如：「周末看視頻，2倍速、2K、極速加載缺一不可」；

當(dāng)我們上了會員新特權(quán)的時候，也會及時告知用戶，讓他們享受更加豐富的權(quán)益。

2. 凸顯尊享感知，視覺語言升級

本次對會員中心的視覺呈現(xiàn)也做了全新升級，不僅凸顯會員的尊享感、情感化，同時兼顧用戶的識別效率及后續(xù)拓展性，針對這一目標(biāo)，我們做了以下優(yōu)化：卡面升級，提升身份感；品牌色優(yōu)化，確保拓展性；icon重塑，強(qiáng)化識別性；驚喜彩蛋，提升情感化。

卡片升級，提升身份感

會員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設(shè)計中，在卡片比例上，盡可能接近于實物卡片，并在卡面肌理表達(dá)上，采用磨砂質(zhì)地，更貼合用戶自然認(rèn)知，卡片顏色結(jié)合會員品牌色進(jìn)行設(shè)計。同時結(jié)合網(wǎng)盤品牌基因中的logo的「云」，提升品牌差異化。

當(dāng)用戶進(jìn)入會員中心時，采用光影動效，同時描繪「云」型，提升視覺層次感，同時加深用戶認(rèn)知。

品牌色優(yōu)化，確保拓展性

我們還重新定義了會員體系的品牌色，超級會員選用黑金配色來突顯最高級別身份。

主題色延續(xù)了網(wǎng)盤會員色系，超級會員為金色，會員為紅色，在此基礎(chǔ)上調(diào)整色彩明度。新配色在產(chǎn)品界面和運(yùn)營活動上，能給用戶帶來更加直觀的身份感知。

輔助色為黑白，因為它是色彩世界中的 「 經(jīng)典 」 ，給人以簡潔、純粹的審美感受和視覺享受。以黑白色作為會員體系的輔助色，可以襯托出黑金配色的尊享感。

icon重塑，強(qiáng)化識別性

在特權(quán)icon設(shè)計中，強(qiáng)化識別性是本次優(yōu)化的重點，因為圖標(biāo)的目的是用來輔助用戶識別，幫助用戶做決策的。

我們在icon表現(xiàn)手法上，從「線性」改成「面性」，增強(qiáng)視覺比重；去除底部圓形襯底，采用異型圖標(biāo)，強(qiáng)化icon之前的差異化，同時異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間，提升拓展性。

比如，當(dāng)用戶是未付費(fèi)時，特權(quán)icon僅作為輔助圖形，因為在這種場景下，icon遠(yuǎn)沒有文案更能幫助用戶清晰理解，避免用戶買錯。

因此異型、面性、無襯底的icon處理手法，也是在拓展方面較優(yōu)選擇。

以下是icon優(yōu)化后的整體效果。

驚喜彩蛋，提升情感化

尊享感，不僅體現(xiàn)在功能、視覺層面，還體現(xiàn)在情感化關(guān)懷，因此我們通過彩蛋式翻卡的觸發(fā)形式，采用對話的方式，展示互動文案。

當(dāng)用戶首次進(jìn)行翻卡時，它會貼心問候：「很高興你與你相遇，愿美好時光與你相伴?！?；當(dāng)用戶日?；訒r，它風(fēng)趣幽默：「據(jù)說超級會員，法力無邊！」「你喜歡的樣子超級會員都有~」；當(dāng)有用戶關(guān)注的重要消息時，它會及時預(yù)告式通知：「4.11日即將有一大波優(yōu)惠福利襲來，超級會員最高5折哦」，從而營造一個風(fēng)趣又貼心的小管家，也讓我們的網(wǎng)盤會員服務(wù)變得更加貼心。

3. 提升迭代效率，通用組件沉淀

會員中心包括個人信息展示、身份卡片、商品和支付、尊享特權(quán)、尊享福利、成長體系、專屬內(nèi)容、積分兌換等模塊。

其中有多種模塊會在多場景中進(jìn)行復(fù)用，為了節(jié)省開發(fā)及設(shè)計成本，同時保證體驗一致性，我們本次也沉淀出能夠靈活調(diào)整各個模塊的位置的組件，來提升產(chǎn)品及運(yùn)營效率。

比如：支付模塊；特權(quán)展示模塊。

支付模塊

支付模塊承載了會員類商品信息的展示，會在多個場景出現(xiàn)，比如：浮層收銀臺、會員中心頁面、全端收銀臺，以及會員類運(yùn)營活動。為了保證支付體驗的一致性，我們優(yōu)先對支付模塊進(jìn)行統(tǒng)一和規(guī)范，包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。

為了便于用戶感知到會員與超級會員之間的差異，避免錯誤購買帶來的困擾，我們通過品牌色（超級會員的金色，會員的紅色）進(jìn)行區(qū)分。

支付模塊的統(tǒng)一和差異，既能保持支付體驗的一致性，也能避免用戶對會員權(quán)益產(chǎn)生誤解，為用戶帶來了更規(guī)范的支付體驗。

特權(quán)展示模塊

對于特權(quán)展示模塊進(jìn)行特權(quán)展示的優(yōu)化，針對以往特權(quán)數(shù)量多占用空間大，以及特權(quán)展示信息過少用戶看不懂的問題，不再采用平鋪的方式，而是采用利用橫向空間的側(cè)滑方式展示，節(jié)省更多空間；不再采用原有的特權(quán)圖標(biāo)+特權(quán)名稱的方式，而是同時展示輔助特權(quán)信息，便于用戶更加了解特權(quán)內(nèi)容。

并將特權(quán)展示方式進(jìn)行組件化，當(dāng)有新特權(quán)上線時，可直接通過后臺配置進(jìn)行上線，無需進(jìn)行開發(fā)，提升效率。

同時，我們還完成了運(yùn)營位、專享內(nèi)容、專屬推薦等多個模塊的組件化，也根據(jù)會員商業(yè)化的設(shè)計規(guī)范，形成會員中心的組件庫，提升合作效率及用戶統(tǒng)一的認(rèn)知體驗。

總結(jié)

以上就是本次會員中心改版項目的全過程，從前期用戶調(diào)研、目標(biāo)確定（1.提升用戶決策效率；2.提升用戶尊享感；3.提升迭代效率），到通過多維度地將目標(biāo)落地（1.懂你所想，會員中心框架重構(gòu)；2.凸顯尊享感知，視覺語言升級；3.提升迭代效率，通用組件沉淀），不僅優(yōu)化了體驗、提高了效率，也對付費(fèi)轉(zhuǎn)化率有所提升。

本次會員中心改版，是網(wǎng)盤所有同學(xué)的共同努力，同時也是會員中心提供給用戶更多選擇、更率、更多服務(wù)的第一步，它不再是機(jī)械的信息展示和冰冷的支付平臺，而是更懂用戶、提供給用戶更多元服務(wù)的聚集地。

目前還有很多不足和待完善的地方，我們也在盡最大努力為用戶提供更好更有價值的服務(wù)，感謝大家一致以來的支持與陪伴 。

文章來源：優(yōu)設(shè)    作者：百度UE團(tuán)隊

為什么大爺大媽們總對排隊情有獨鐘，為什么平常不想要的東西一打折就買一堆……震驚！原來套路你的竟然都是自己的大腦！

如今想要成為一名合格的用戶體驗設(shè)計師，首要就是對目標(biāo)用戶的理解和把控。而為了實現(xiàn)這一目標(biāo)，掌握一些心理學(xué)知識就顯得尤為重要。當(dāng)我們能在設(shè)計中合理利用心理學(xué)的時候，就離創(chuàng)造出讓用戶感慨「深得朕心」的體驗不遠(yuǎn)了。

這次要介紹的是設(shè)計心理學(xué)中與我們?nèi)粘Ｉ蠲芮邢嚓P(guān)的認(rèn)知偏差 (Cognitive bias) ，了解它的基本定義之后再結(jié)合相關(guān)案例探討如何在設(shè)計中利用認(rèn)知偏差來創(chuàng)造更好的用戶體驗。

什么是認(rèn)知偏差

網(wǎng)絡(luò)上的定義是這樣的：人們在知覺自身、他人或外部環(huán)境時，常因自身或情境的原因使得知覺結(jié)果出現(xiàn)失真的現(xiàn)象。

簡單來說，就是大腦創(chuàng)造了一些快捷方式，在處理信息時自然地去調(diào)用這些快捷方式，只是這種操作在快速的同時，也會對我們的決策過程產(chǎn)生危害，比如我們會選擇性忽略一些信息，或是自發(fā)地對信息進(jìn)行腦補(bǔ)。這樣的認(rèn)知模式導(dǎo)致我們產(chǎn)生了非理性的偏差。

△ 圖：大腦的操作

認(rèn)知偏差種類豐富，已經(jīng)被提出的就有幾百種，有很多尚未被完全驗證。下圖總結(jié)了現(xiàn)有的認(rèn)知偏差，它們大概可以分為四類：信息過載，信息的意義不明確，大腦來不及認(rèn)真作出反應(yīng)以及大腦存不下所有的記憶。通過這張圖，我們可以更清晰地了解不同認(rèn)知偏差背后的成因。

△ 圖：認(rèn)知偏差寶典

認(rèn)知偏差在體驗場景中的應(yīng)用

那我們該怎么在設(shè)計中利用認(rèn)知偏差呢？我根據(jù)日常工作中經(jīng)常接觸的消費(fèi)場景和學(xué)習(xí)場景總結(jié)了以下幾個方面：

△ 圖：章節(jié)概覽，也叫懶人速讀版

1. 引導(dǎo)用戶決策

作為體驗設(shè)計師，我們需要為用戶的決策創(chuàng)造合適的環(huán)境，來引導(dǎo)其按照我們設(shè)計的方向去達(dá)成他們的目標(biāo)。

錨定效應(yīng)

錨定效應(yīng)（Anchoring）是比較常見的一個被利用在消費(fèi)場景中的認(rèn)知偏差。它指的是人在做決定的時候，會在很大程度上依賴于其接觸到的信息。

比如商場里原價 2000 現(xiàn)價 500 的商品，原價的存在會讓人覺得這件商品的價值就是 2000，現(xiàn)在 500 簡直是撿了大便宜。

在體驗設(shè)計中可以借鑒這種做法，通過前后對比放大來優(yōu)惠感知，進(jìn)而促進(jìn)用戶做出有利于我們的決策。

△ 圖：利用錨定效應(yīng)推薦會員套餐，對比差價確實誘人

從眾效應(yīng)

從眾效應(yīng)（Bandwagon Effect）是另外一個常見的用于消費(fèi)場景的認(rèn)知偏差，指的是人們做決定時通常會和他人保持一致。

下圖是售前頁一般的設(shè)計技巧，通過展示購買人數(shù)和滾動播放購買信息來體現(xiàn)出該商品的熱門，讓正在猶豫的用戶「隨大流」下單購買。

基于此，我們在設(shè)計中可以營造出一種群體選擇的效果來吸引更多的用戶。

△ 圖：這么多人選擇，跟隨大家不會錯，買它

內(nèi)群體偏差

前面提到的認(rèn)知偏差之外，內(nèi)群體偏差 (ingroup bias) 也一般被用來引導(dǎo)用戶決策，它是指人們會在認(rèn)知上傾向于自己所屬的群體。

比如 Booking 在查看評論的區(qū)域加入了篩選評論語言這一按鈕，雖然設(shè)計的本意可能是為了方便用戶更好地理解評論內(nèi)容，但是在真實的使用過程中可以發(fā)現(xiàn)，用戶更加信任自己所選標(biāo)簽內(nèi)的評論內(nèi)容，因為同語言往往意味著來自相同的國家或者相近的文化背景，用戶通過這種方式找到一個小群體，然后被影響進(jìn)而做出與群體內(nèi)人們更為相似的決策。

△ 圖：同胞的評價更可靠

因此在體驗設(shè)計中利用內(nèi)群體偏差的關(guān)鍵點在于打造群體歸屬感，借由小群體的力量影響用戶的決策。

2. 提高用戶粘性

引導(dǎo)用戶做出于我們有利的決策之外，同樣，我們可以利用認(rèn)知偏差提高用戶粘性，增強(qiáng)用戶和產(chǎn)品之間的聯(lián)系，使他們對產(chǎn)品「愛不釋手」。

宜家效應(yīng)

宜家效應(yīng) (The Ikea Effect) 是指消費(fèi)者對于自己投入勞動、情感而創(chuàng)造的物品的價值產(chǎn)生高估的價值判斷偏差的現(xiàn)象，消費(fèi)者對于一個物品付出的勞動（情感）越多，就越容易高估該物品的價值。利用宜家效應(yīng)提高用戶粘性的核心是創(chuàng)造低投入、高回報、高貢獻(xiàn)價值的任務(wù)，保證用戶能夠完成任務(wù)的基礎(chǔ)上貢獻(xiàn)自己的價值。

在學(xué)習(xí)場景中我們可以利用宜家效應(yīng)提高用戶粘性，將用戶留下來堅持學(xué)習(xí)。

首先需要保證用戶能夠完成任務(wù)。懂你英語 ®A? 產(chǎn)品中，我們會在用戶設(shè)置目標(biāo)時描述該目標(biāo)的表現(xiàn)，用戶以此選擇自己的目標(biāo)。這種方式下的用戶對于任務(wù)結(jié)果的預(yù)見性提高，能清楚的知道如果完成任務(wù)會達(dá)到什么效果，更能被促使順利地完成任務(wù)。

△ 圖：目標(biāo)展示與貢獻(xiàn)積累

其次，用戶對產(chǎn)品粘性增強(qiáng)需要能夠感知到自己所做出的投入，學(xué)習(xí)場景下這種投入感知更多體現(xiàn)在知識的累積上。在懂你英語 ®A? 課程中，我們將用戶與目標(biāo)之間的距離設(shè)計為學(xué)習(xí)路徑，用戶每完成一個階段的學(xué)習(xí)便會在路徑上明顯前進(jìn)，日積月累下來用戶能看到自己前進(jìn)的印記，清晰感知到自身知識的累積，也就因此對產(chǎn)品有更高的價值感受。

3. 情感化激勵

負(fù)向偏見

由于學(xué)習(xí)的「反人性」，學(xué)習(xí)場景下的用戶在體驗流程中產(chǎn)生消極情緒的概率要大于其余場景，比如學(xué)習(xí)效果不好，難以堅持等。此類消極情緒對于學(xué)習(xí)產(chǎn)品影響很大，是因為負(fù)向偏見 (negativity bias) 的存在，人們對不好的事情的記憶比快樂的記憶更加清晰，更經(jīng)常回憶。

因此在學(xué)習(xí)場景下我們需要給用戶更多的正面積極的反饋來抵消掉負(fù)面體驗的影響。在懂你英語 ®A? 課程設(shè)計中，我們在學(xué)習(xí)結(jié)果頁根據(jù)用戶不同的學(xué)習(xí)表現(xiàn)給出不同的反饋，即使是偏低的成績，也依然會給出一個較為積極的反饋，以期鼓勵用戶堅持學(xué)習(xí)。

△ 圖：做得不好也不要灰心

除了簡單抵消掉用戶的負(fù)面偏見，我們甚至可以通過設(shè)計去完全扭轉(zhuǎn)局面，變困境為有趣的體驗。最經(jīng)典例子便是谷歌斷網(wǎng)時的小恐龍游戲，不知道有多少人會故意關(guān)掉網(wǎng)絡(luò)來玩這個游戲。

△ 圖：谷歌的斷網(wǎng)小恐龍

最后

作為設(shè)計師我們可以通過了解和利用認(rèn)知偏差來創(chuàng)造既讓用戶滿意又平衡商業(yè)的雙贏體驗。但由于設(shè)計師本身也是人類，與用戶擁有同樣的思考機(jī)制，因此在日常的調(diào)研分析和設(shè)計的過程中也要警惕認(rèn)知偏差的影響，不斷深入了解用戶以及使用科學(xué)的測試方法來完善自己的設(shè)計，持續(xù)迭代反思，不因為某個方案自己傾注了很多心血，就覺得它是最好的。用戶可能并不買賬呢。

文章來源：優(yōu)設(shè)    作者：流利說設(shè)計團(tuán)隊

微信是一種生活方式。作為月活超 10 億的國民級產(chǎn)品，它有著獨特的設(shè)計之道。

同時，微信也是互聯(lián)網(wǎng)界的一個異類，張小龍曾在微信公開課上回應(yīng)道：「我們只是守住了做一個好產(chǎn)品的底線，居然就與眾不同了」。

好產(chǎn)品自然是體驗和價值至上。下面，我就為大家解讀微信的用戶體驗設(shè)計。

二次確認(rèn)的微創(chuàng)新

先從最簡單的二次確認(rèn)講起。

微信針對首頁消息和收藏列表的刪除操作，做了二次確認(rèn)的微創(chuàng)新。像同類 IM 聊天工具，如 iOS 短信、Facebook Messenger、飛聊等等，二次確認(rèn)都是采用底部系統(tǒng)彈窗。這樣做，從程序架構(gòu)的角度來看兼容性和通用性更強(qiáng)。

而從體驗設(shè)計的角度來看，則剛好相反，因為從第一次刪除操作，到第二次確認(rèn)系統(tǒng)彈窗。之間的目標(biāo)距離太長，耗時也就變長了。根據(jù)菲茨定律（Fitts’ Law），獲取目標(biāo)的時間取決于目標(biāo)的距離和大小。這意味著提升交互的效率，不僅需要減少距離，同時還要增加目標(biāo)大小。

△ 收藏列表

回過頭看來微信，就是這樣設(shè)計的。二次確認(rèn)是在第一次的基礎(chǔ)上延展，距離幾乎為 0，同時，目標(biāo)按鈕的寬度也增加了幾倍，大大地提升了交互效率。

互動體驗廣告

其實，商業(yè)和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。

通過豐富有趣的互動體驗式創(chuàng)意，或畫圓、或畫方、或畫愛心，吸引大家主動參與互動。

1. 開放首條評論

另外，首條評論功能讓品牌像朋友一樣與大家對話，利用明星效應(yīng)，從而帶動更多人參與評論，有效提升評論區(qū)活躍度和廣告點擊率。

△ 朋友圈劉雯廣告

以劉雯發(fā)布的朋友圈廣告為例，大表姐把款的 vivo X30 系列手機(jī)交到你手中，并在首條評論中邀請你幫她拍照。數(shù)十萬用戶積極回復(fù)劉雯，評論率高于歷史均值 40 倍+，「你這么漂亮怎么拍都好看」、「天天給你拍」，大表姐的魅力折服了眾多用戶，有效提升了品牌的親和力與好感度。

2. 打開儀式 · 最強(qiáng)震動級別

在交互方面，如果你是 iPhone 用戶，可以體驗到 Taptic Engine 線性震動馬達(dá)，通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻，它給你的是最強(qiáng)震動級別，滿滿的儀式感！整個微信應(yīng)該找不到第二個這樣級別的震動了。

提供反饋信息

再舉一個震動的例子，當(dāng)你的好友拍攝了時刻視頻后，可以看到 TA 的頭像右上角多了一個藍(lán)色的小圈圈，雙擊它就能看到好友的時刻視頻了。

當(dāng)然，你雙擊沒有拍攝時刻視頻的好友，TA 的頭像會左右晃動，并且會有 Failure 的震動反饋，動畫和震動節(jié)奏完美匹配，這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。

△ 沒有時刻視頻時的反饋

我們做產(chǎn)品設(shè)計時也一樣，對于用戶的操作，應(yīng)當(dāng)給予清晰明了的反饋，幫助用戶更好地理解信息。

跨平臺能力

微信的起步階段是基于手機(jī)來做 App，不基于 PC 來做，PC 端只是輔助，而現(xiàn)在，它的跨平臺能力也逐漸增強(qiáng)。

一周前，微信 PC 版「微信測試版 for Windows」發(fā)布了 2.9.0 的內(nèi)測，同步了移動端的新功能，主要有兩點：

支持打開小程序，也可以玩「貪吃蛇」「跳一跳」等小游戲了。

△ Windows 微信客戶端

另外，此前的微信 PC 端只支持引用文字消息，也沒有達(dá)到手機(jī)上引用消息的視覺效果。此次更新中，還新增了很多支持的應(yīng)用類型，包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。

如此看來，Mac 端的更新也不遠(yuǎn)了，可以期待一下。

語音實時翻譯

最近的微信更新了，除了引入深色模式之外。值得一提的是，語音消息的交互體驗得到了優(yōu)化，上滑轉(zhuǎn)文字更方便了。

此前的方式是按住說話，滑到轉(zhuǎn)文字按鈕，說完松開手指后，才把語音解析成文字。

現(xiàn)在交互則少了一步操作，達(dá)到了實時邊說邊轉(zhuǎn)文字的功能。別小看這一步界面上的優(yōu)化，它背后代表的是微信語音識別能力上的技術(shù)突破。

△ 語音實時轉(zhuǎn)文字

錨點定位

微信有很多隱性和顯性的錨點，隱性錨點就比如你打開的這篇文章，關(guān)閉后，再重新點進(jìn)來，還是顯示上次閱讀的位置。

△ 訂閱號列表

顯性的錨點就比如上面這個：當(dāng)你刷公眾號列表時候，如果有新文章更新，標(biāo)題欄會出現(xiàn)一個錨點按鈕，點擊它讓你快速回到頂部，方便查看文章。

△ 朋友圈「跳到還沒看的位置」

基于此，在新版微信朋友圈中，增加了一個「跳到還沒看的位置」。很多信息流產(chǎn)品是往下刷內(nèi)容，直到給你一個分界線提示：下面內(nèi)容已經(jīng)看過了。而微信這是一個逆向操作，我認(rèn)為這個功能還是很有必要的，因為經(jīng)常會有刷朋友圈刷到一半聊天退出去，當(dāng)回來查看朋友圈時，需要重新拉到底部，費(fèi)時費(fèi)力。

自然的語音聽筒播放

《在你身邊，為你設(shè)計》一書中有提到語音聽筒播放的優(yōu)化。大家都知道，手機(jī)帶有距離感應(yīng)器，在感應(yīng)到耳邊貼近時，屏幕會關(guān)閉以節(jié)省電力，并且避免由于耳朵與屏幕的觸碰導(dǎo)致的誤操作。

微信在聊天界面中，也啟用了距離感應(yīng)，以實現(xiàn)手機(jī)貼近耳邊時，自動將語音從揚(yáng)聲器切換到聽筒進(jìn)行播放，這樣你可以用最自然的姿勢來聽語音，這是一個很好的體驗。

但要完美地實現(xiàn)這個體驗，就需要解決距離感應(yīng)器的時延問題。播放語音時，如果你非常迅速地將手機(jī)移至耳邊，這時候距離感應(yīng)器并不會同樣迅速地對這個動作產(chǎn)生反饋。大約在延遲了 300 毫秒后，感應(yīng)器發(fā)出信號，微信將 iPhone 的屏幕關(guān)閉。而在這個時間內(nèi)，你的耳廓極有可能已經(jīng)觸碰到了 iPhone 的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區(qū)域。于是很容易出現(xiàn)手機(jī)移至耳邊，語音戛然而止。

△ 延時響應(yīng)判斷流程圖

為了解決這個問題，微信設(shè)計了一個解決辦法：在響應(yīng)返回操作時，先等待 500 毫秒，這時候如果偵聽到距離感應(yīng)器有發(fā)出信號，則認(rèn)為是貼耳的動作，此情況下不執(zhí)行返回操作，如上圖所示。而 500 毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。

總結(jié)

在微信的產(chǎn)品設(shè)計中，我們看到了交互的細(xì)微迭代和背后的技術(shù)突破，我們看到了商業(yè)創(chuàng)意與用戶體驗的平衡。給用戶帶來希望，讓創(chuàng)造者體現(xiàn)價值，這就是微信的設(shè)計之道。

文章來源：優(yōu)設(shè)    作者：洋爺

好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單，但實際上設(shè)計師已經(jīng)做出了非常多的設(shè)計思考。用戶越少的去思考界面，用戶就越能專注他們要完成的目標(biāo)。在瀏覽頁面時，用戶的注意力不應(yīng)該停留在界面和設(shè)計上，他們更應(yīng)該關(guān)注的是如何達(dá)成他們的目的。所以作為設(shè)計師的首要工作就是通過事先清除障礙，為用戶提供直達(dá)目標(biāo)的途徑。

“通常，飛速行駛的貨車不可能輕松地停下來。因為運(yùn)用更多的動能去改變運(yùn)動狀態(tài)是非常困難的。與其強(qiáng)迫人們從他們的主任務(wù)上轉(zhuǎn)移注意力，不如直接帶他們?nèi)ニ麄兿肴サ牡胤健！?

——Luke Wroblewski，谷歌產(chǎn)品總監(jiān)

換個思路來看。復(fù)雜和混亂的界面會迫使用戶去尋找解決問題的方法，而通常情況下，這些方法并不是一目了然的。用戶會因為過多的選項、界面、導(dǎo)航等感到困惑，用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓，也足以讓用戶離開。

這種過度的思考就被稱為認(rèn)知過載，在這篇文章里，我們將為你解釋如何避免認(rèn)知過載。首先，我們需要明白我們大腦中存在過載風(fēng)險的原因。

認(rèn)知超負(fù)荷的科學(xué)根源
認(rèn)知過載是指工作記憶中腦力處理的信息總量過多。當(dāng)你的工作記憶接收到的信息超出其可以輕松處理的信息時，就會發(fā)生認(rèn)知過載，從而產(chǎn)生挫敗感。
但這究竟意味著什么？工作記憶到底是什么？針對這些我們又應(yīng)該怎樣進(jìn)行設(shè)計呢？那就讓我們先來了解一下認(rèn)知負(fù)荷理論的起源吧。

JOHN SWELLER和認(rèn)知負(fù)荷理論
雖然對認(rèn)知的研究可以追溯到幾個世紀(jì)，但直到20世紀(jì)80年代，澳大利亞教育心理學(xué)家約翰·瑞勒才將這項研究應(yīng)用于教學(xué)設(shè)計當(dāng)中。Sweller試圖為每一種類型的學(xué)習(xí)者找出最適合他們的學(xué)習(xí)方法，讓他們可以記住他們學(xué)到的所有知識。換句話說，怎樣的課程設(shè)計才是最佳的呢？
Sweller在1988年出版了“ 認(rèn)知負(fù)荷理論，學(xué)習(xí)難度和教學(xué)設(shè)計 ”，這使他的研究工作達(dá)到新的高峰，于1994年重新修改并重新發(fā)表。他的研究中運(yùn)用了數(shù)據(jù)組織結(jié)構(gòu)中的圖表數(shù)據(jù)庫，講述了有效和無效的教學(xué)方法，而他對于工作記憶負(fù)荷極限的研究結(jié)果才是設(shè)計師們找到的最有用內(nèi)容。
Sweller的研究在許多方面擴(kuò)展了George Miller的信息加工理論。George Miller是一位認(rèn)知心理學(xué)家和語言學(xué)家，他在20世紀(jì)50年代測試出短期記憶的極限。Miller的研究在于數(shù)字化設(shè)計，尤其是分塊技術(shù)方面，這將在后面討論。另外，Miller還創(chuàng)作了論文“ The Magical Number Seven, Plus orMinus Two“，這個理論促使許多設(shè)計師將菜單項的數(shù)量限制在5和9之間。
雖然這些理論最初是針對教育領(lǐng)域的，但它們同樣適用于用戶體驗（UX）設(shè)計。

工作記憶
如果你每次打開冰箱，都必須回答一個像謎語一樣的問題，“什么東西小的時候四只腳走路，長大了以后兩只腳，而老了以后有三只腳？”這是一個老段子。但是，根據(jù)認(rèn)知負(fù)荷理論，使用這種讓人無奈的用戶體驗設(shè)計會讓用戶產(chǎn)生挫敗感。

要理解認(rèn)知負(fù)荷理論，你必須要了解什么是工作記憶，大腦在短時間內(nèi)用于完成任務(wù)的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶，并在需要時從長期記憶中抽取。通俗一點說，工作記憶相當(dāng)于計算機(jī)內(nèi)存，而長期記憶則相當(dāng)于硬盤驅(qū)動器。
工作記憶和短期記憶通?？梢曰Q使用，但它們略有不同。工作記憶是處理信息的過程，而短期記憶更像是一個信息的便簽本，它雖然重要，但卻沒有長期記憶重要。
讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候，你可能會遇到一個用藍(lán)色字體書寫的陌生概念。你的工作記憶需要知道藍(lán)色文本是什么意思，才能夠理解文章更深層的含義。你的長期記憶知道藍(lán)色文本表示鏈接，因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時，你的短期記憶會記住你在文章中的位置，這樣當(dāng)你從外部頁面返回時你不會迷失，但到了第二天早上，該位置就會被遺忘掉。

設(shè)計中的應(yīng)用
Steve Krug（史蒂夫·克魯格）是一位很有影響力的作家，他在網(wǎng)頁設(shè)計中極力推崇認(rèn)知負(fù)荷理論。他的書《Don’t make me think》被許多設(shè)計師認(rèn)為是有巨大影響力的著作。
書中記錄了許多寶貴的經(jīng)驗，下面就列舉一些的：
1、每一個頁面都要清晰明了。
2、用戶傾向于“滿意” - 也就是說，采取一個最簡單的解決方案來解決他們的問題，而不是最好的解決方案。此外，作為習(xí)慣的生物，用戶將一遍又一遍地使用相同的方法解決問題，而不會刻意尋找一個更好的選擇。
3、當(dāng)新用戶可以熟練使用該系統(tǒng)來實現(xiàn)他們的目標(biāo)時，系統(tǒng)的可用性就足夠了。
4、用戶使用網(wǎng)絡(luò)的絕大部分是想要節(jié)省時間。因此，用戶的行為通常會像鯊魚一樣“保持移動，否則就會死亡”。
5、后退按鈕是Web瀏覽器最常用的功能。
6、屏幕上顯示的主頁按鈕即使從來不被用戶使用，但也能讓用戶感到放心。
總之，用戶在瀏覽網(wǎng)站過程中哪怕是一瞬間的思考，也會對他們的工作記憶造成負(fù)擔(dān)。例如 “這個可以點擊嗎？“首頁按鈕在哪兒？”和“我怎么保存？”等等問題，都會不同程度破壞用戶體驗。

認(rèn)知超負(fù)荷最常見的原因
許多設(shè)計元素都有可能對用戶的大腦造成超負(fù)荷，外界環(huán)境中會有更多的因素它們超出了設(shè)計師的控制范圍。例如：一個用戶瀏覽網(wǎng)站的同時會擔(dān)心第二天的工作報告，或者被窗戶外裝修的噪音所打擾，此時，無論你的網(wǎng)站設(shè)計多么簡單，這些都會耗盡他們的工作記憶。
我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關(guān)注的用戶更能專注于你的網(wǎng)站。不經(jīng)常上網(wǎng)的用戶往往比經(jīng)驗豐富的網(wǎng)絡(luò)用戶思考的更多。
雖然我們無法量化所有的認(rèn)知過載，但我們可以盡量的去避免他的產(chǎn)生，下面，我們對網(wǎng)頁設(shè)計中最常見的類型以及避免它們的最佳方法進(jìn)行了分類說明。
1.不必要的操作
用戶的每一步操作都會增加他們的認(rèn)知負(fù)擔(dān)。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標(biāo)上，所以多余的操作將迫使用戶投入更多的精力，這樣就需要更多的工作記憶才能完成任務(wù)，所以，那些不必要的操作步驟很考驗用戶的耐心。
速度和節(jié)奏是讓認(rèn)知負(fù)荷最小化的基本因素。用戶希望以輕快，目的性很強(qiáng)的步驟來完成任務(wù)，所以應(yīng)該提前消除一切延遲。

用戶希望在他們提交郵箱地址之前就知道他們將要進(jìn)入什么網(wǎng)站，但Touch of Modern卻要求用戶在使用之前必須進(jìn)行注冊！這個強(qiáng)制而又多余的行為將會嚇跑很多的潛在用戶。
解決方案
下面這個方法，可以幫助我們找到不必要的操作有哪些：列出用戶要完成任務(wù)必須要去做的步驟。例如發(fā)送電子郵件：
1、點擊電子郵件圖標(biāo)。
2、點擊“發(fā)送到”輸入框。
3、輸入電子郵件地址。
4、點擊“主題”輸入框。
5、等等....
現(xiàn)在，重新審視列表并且找出可刪減的操作步驟，想到什么了嗎？你可以通過將光標(biāo)一開始就自動定位在“發(fā)送到”字段就可以刪除步驟2.這將減少用戶的操作，雖然很微小，但你消除的每一步對于用戶來說都是友好的。

我們來看看谷歌的主頁。光標(biāo)一開始就在搜索輸入框當(dāng)中，因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗，所以不要忽視它們。
2.過度刺激
雜亂無章的頁面會分散用戶的注意力，使用戶無法專注他們想要完成的目標(biāo)。就像有好幾個人同時與你交談時你會很難集中注意力，當(dāng)頁面上太多的圖片、動畫、圖標(biāo)、廣告、文本類型和鮮艷的顏色奪取你的注意時，就會很難集中注意力。
記住，每個人的工作記憶在完成目標(biāo)的過程中，會因為外界的刺激對每一步工作重新排序。每一次分心，尤其是視覺上的強(qiáng)烈刺激，都需要消耗用戶的一部分注意力。

LINGsCARS就是個極端的例子，你可以看到有強(qiáng)烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上，即便在兩個不同位置同時進(jìn)行的動效依然會對用戶造成過度刺激。
解決方法
首先，減少一切不必要的元素。僅保留必要的內(nèi)容通常是最佳的選擇，減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網(wǎng)站，而不是視覺上復(fù)雜的網(wǎng)站。
你還可以進(jìn)行內(nèi)容區(qū)分以達(dá)到平衡的效果。太多相同的內(nèi)容（比如文字或圖像）會讓用戶感到厭煩。所以，視覺內(nèi)容要進(jìn)行合理的組合，圖像、視頻、信息圖表等，能夠使頁面和諧，并便于用戶理解。
影視網(wǎng)站IMDb本可以在很大程度上輕松地只依靠圖片進(jìn)行排版，但它反而運(yùn)用同量的文字內(nèi)容來平衡網(wǎng)站頁面。

在抽取出一個頁面上必須要展示的元素之后，你應(yīng)該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解，也就是說，用一種方式，盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適，而這樣的結(jié)構(gòu)也能讓界面交互更容易。
下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單，右中是一個有特色的凍酸奶交易文本描述，插在文本中間的照片和色塊的使用，分分鐘創(chuàng)造出一個讓人喜愛的沙漏結(jié)構(gòu)。
下面來看看Groupon是如何將它的垂直菜單（中間偏左）和描述凍酸奶的文字（中間偏右）進(jìn)行布局的吧。大圖居中被文字包圍著，這樣就打造了一個舒適自然的沙漏形狀。

對稱不僅僅是在屏幕的兩側(cè)應(yīng)用相同的布局，它是視覺重心和視覺方向的平衡。通過這種方式，非對稱頁面也能看起來很有組織性，如下圖的OTHR所示。

將你的頁面內(nèi)容精減到只包含簡單的和非競爭性的元素，這只是完成了預(yù)防過度刺激工作的一半。。不要忘記要以簡單的布局呈現(xiàn)這些元素。
3、太多選項（希克定律）
這有點自相矛盾：用戶需要更多的選擇，但是往往太多的選擇會使他們的大腦超負(fù)荷。

席克定律（選擇困難癥）為我們揭示出了一種現(xiàn)象：用戶擁有的選擇越多，他們做出決定的時間就越長。

作為設(shè)計師要去理解庫克定律，可以把每個選項看作是明亮的閃光燈，如下所示，太多的閃光燈會過度刺激用戶。

甚至像Rakuten這樣的知名網(wǎng)站也會犯類似的錯誤，因為他們沒有真正的理解這個設(shè)計原則。給用戶需要的而不是給他們認(rèn)為他們需要的。
解決方案
假如你已經(jīng)解決了不必要的和多余的選項，你可以將他們分別放入不同的組進(jìn)行分類，你可以在百貨商店的網(wǎng)站上看到很多例子，這些網(wǎng)站擁有廣泛的產(chǎn)品選擇。
它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單，抽屜和拉出其中的一種方式隱藏一些選項，那么你將獲得兩全其美的效果，這些超級菜單雖然為用戶提供了許多選項，但一定程度上不會給用戶帶來很大的負(fù)擔(dān)。

但是，隱藏式的導(dǎo)航欄不利于發(fā)現(xiàn)，因此電子商務(wù)和新聞等行業(yè)的設(shè)計人員應(yīng)該注意。你可以通過放置其他類似產(chǎn)品的鏈接使缺點最小化（比方說亞馬遜的“相關(guān)購買”）從而最大限度地減少隱藏菜單的缺點?；蛘吣憧梢詺w納導(dǎo)航菜單的類別，將它們精簡為單行導(dǎo)航（如Apple和CNN那樣）。

你還需要注意應(yīng)該如何組織整個網(wǎng)站的導(dǎo)航。許多與庫克定律有關(guān)的問題可以通過管理信息架構(gòu)（IA）來處理，我們將在下面的“難以查找的頁面和功能”部分中討論。
4.太多內(nèi)容
就像過度刺激和選項過多的問題一樣，提供過多的內(nèi)容會將用戶的工作記憶拉向不同的方向。
顯然，你希望展現(xiàn)的只是重要的內(nèi)容，但對于一些網(wǎng)站來說，一切都是重要的，如果你的網(wǎng)站也有非常多的內(nèi)容，為了避免讓用戶產(chǎn)生困惑，應(yīng)該對內(nèi)容信息進(jìn)行和里的組織規(guī)劃。

Arngren的問題并不是它展示了很多的產(chǎn)品，而是它同時展示了太多的產(chǎn)品。在組織結(jié)構(gòu)上的調(diào)整將會給網(wǎng)站帶來更好的體驗。
解決方案
如上所述，George Miller的解決策略是“分塊”，將需要展示的大量內(nèi)容以可管理的方式組合起來，以便于記憶，電話號碼分為國家代碼，區(qū)號，一組三位數(shù)和兩組四位數(shù)字便于記憶，而一連串的11個數(shù)字會很難被記住。
你想在商店主頁上放大量產(chǎn)品的圖片嗎？比起將它們?nèi)苛_列出來，不如通過他們的類型將他們分組羅列。Etsy通過根據(jù)不同的店鋪將產(chǎn)品進(jìn)行分組展示。

還有文本組塊，文本組塊包括簡短的自然段，合理利用標(biāo)題和副標(biāo)題以及足夠的留白。
對于需要大量數(shù)據(jù)的長表單字段，可以嘗試采用多步驟表單。長表單可能會令人生畏，有時會導(dǎo)致用戶流失。你可以將表單的信息分在不同的頁面里，減少信息過量給用戶帶來的影響。記得一定要有一個進(jìn)度標(biāo)記來讓用戶知道還剩下多少頁。（可以總結(jié)為復(fù)雜的頁面簡單化）

購買機(jī)票總是涉及填寫大量的信息，其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗：選擇航班，填寫乘客信息，輸入付款詳細(xì)信息等。將所有這些信息放在一個長頁面上會對用戶造成負(fù)擔(dān)，也有可能會放棄購買。
5.模棱兩可的界面
認(rèn)知超負(fù)荷的罪魁禍?zhǔn)紫染褪怯脩艚缑婊靵y。永遠(yuǎn)不要讓用戶花費(fèi)大量的時間來弄清楚他們?nèi)绾尾拍芡瓿上胍哪繕?biāo)，以及花費(fèi)時間來弄清楚圖標(biāo)的含義是什么。

并非所有用戶都是經(jīng)驗豐富的，從而可以理解SpeedCrunch這種含義模糊的圖標(biāo)。即使他們能夠識別代表Windows系統(tǒng)和Mac OS X系統(tǒng)的符號，那么位于右下角的那兩個圖標(biāo)也會讓用戶迷茫。
解決方案
使用用戶已經(jīng)熟知的視覺提示。用戶通常會用他所熟悉的符號來進(jìn)行操作，即便是在以前從未使用過的網(wǎng)站上也是這樣。如果你覺得沒有新意，可以融合品牌特征巧妙的結(jié)合成為用戶所熟悉的形式。Home Depot雖然運(yùn)用了較為普遍的圖標(biāo)，但同時也賦予了他們品牌獨有的橙色。

標(biāo)準(zhǔn)標(biāo)簽（如“聯(lián)系人”和“提交”）的按鈕比非傳統(tǒng)標(biāo)簽（如“地址”或“開始”）更容易識別。通常已知的標(biāo)簽可以提高用戶的瀏覽體驗，而不常見的標(biāo)簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
另外，你如果真的需要一個從未見過的圖標(biāo)該怎么辦呢？如果這樣，可以運(yùn)用現(xiàn)實生活中的場景展示來讓圖標(biāo)進(jìn)行自我解釋，這種做法是連接現(xiàn)實和虛擬的橋梁。例如：早期的互聯(lián)網(wǎng)先驅(qū)選擇了一個信封來代表電子郵件，因為信封是郵件系統(tǒng)的明顯標(biāo)志。
此外，要避免含義模糊的圖標(biāo)，特別是可能還會被誤認(rèn)為是其他含義的圖標(biāo)，就像下列Issuu的圖標(biāo)，有些是被人熟知的，但有一些卻不是。如果用戶必須通過點擊這個圖標(biāo)來發(fā)現(xiàn)它的功能，這就會中斷他們的操作進(jìn)程。

任何一個表意不清的圖標(biāo)都應(yīng)該附帶說明，告訴用戶怎樣操作。新的并且不常見的用戶界面，就需要更多的分步教程。例如，Slack就給出了一個完整的視頻引導(dǎo)來說明界面的操作流程。

6.難以查找的頁面和功能
即使用戶已經(jīng)擁有他們所需要的一切，但他們可能還是不知道如何去尋找它。這樣就會讓用戶費(fèi)盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素，導(dǎo)航應(yīng)該放在明顯的地方，給用戶信心去任意瀏覽網(wǎng)站而不會迷失。

如果你覺得漢堡包圖標(biāo)不好，那可以在看看Mojo Yogurt，它會要求你將鼠標(biāo)懸停在左上角的徽標(biāo)上以顯示導(dǎo)航菜單。

雖然圍繞著Logo有個小的動效，但對于整個屏幕的顏色和動效來說，它并不夠明顯。
解決方案
根據(jù)用戶的偏好理順你的信息架構(gòu)。你的目標(biāo)用戶群可能并不認(rèn)可你的做法。因此，要想他們學(xué)習(xí)如何組織網(wǎng)站，卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進(jìn)行分類。

如果你還希望通過組合頁面和菜單項來消除多余的頁面。設(shè)計工作室Waaark通過將其工作室的簡介，團(tuán)隊成員簡介和聯(lián)系信息這三個頁面合并到一個頁面來簡化他們的導(dǎo)航。

如果某些功能或特征比其他功能或特征更重要，可以運(yùn)用視覺手段來吸引他們的注意，增加大小，添加動畫以及使用對比色以此來吸引用戶的眼球。

PayPal期望有更多的老用戶而不是新用戶，并通過設(shè)置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
7.內(nèi)部不一致
假設(shè)網(wǎng)站的主頁使用標(biāo)準(zhǔn)的藍(lán)色和帶下劃線的文本來表示鏈接，但另一個頁面僅使用藍(lán)色而沒有下劃線。當(dāng)用戶瀏覽其他頁面時就會停下來去想，“它沒有下劃線，這還是個鏈接么？”他們甚至可能不會再去關(guān)心鏈接，而會被其他頁面的不統(tǒng)一分散注意力從而影響整體的用戶體驗。
要記住，最好的用戶體驗是不會被用戶所察覺的，而像上面這樣通常都會被注意到。
總結(jié)
1、認(rèn)知過載是影響工作記憶的因素。當(dāng)過多的信息阻礙決策和整體經(jīng)驗時，就會發(fā)生認(rèn)知過載。
2、使用不同的內(nèi)容類型和結(jié)構(gòu)化頁面組合，可以避免視覺混亂。
3、隱藏式菜單可以幫助用戶一次管理可用選項的數(shù)量，但降低了可發(fā)現(xiàn)性。
4、“分塊”和“步驟”等的方式可以防止認(rèn)知過載。
5、UI元素和圖標(biāo)應(yīng)該基于用戶現(xiàn)有的認(rèn)知上，這樣他們就不需要過多的思考，新的獨特的功能要加上解釋說明。
6、圍繞用戶的實際思考方式構(gòu)建你的信息架構(gòu)?？ㄆ诸惖瓤捎眯詼y試可以為你的目標(biāo)群體揭示最直觀的導(dǎo)航方案。
7、視覺和功能的不一致，以及打字錯誤和語法錯誤，都會分散用戶的注意力。
8、盡可能減少冗余。另外，請留意如何最大限度地減少用戶操作步驟量和他們必須花費(fèi)的精力。

文章來源：UI中國

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

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