提到輪播首先可能想到的是廣告，我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner，不管在移動端還是網(wǎng)頁上通常點(diǎn)擊數(shù)據(jù)都是非常差的，本篇文章帶你深入了解banner輪播。

如果需要設(shè)計(jì)一個輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗(yàn)更好？如何避免輪播常見的問題。

本篇文章通過以下幾點(diǎn)探索輪播的特性，預(yù)計(jì)閱讀20分鐘

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進(jìn)度展示

4、輪播定位

5、輪播的切換

6、對輪播進(jìn)行分類

7、使用縮略圖進(jìn)行預(yù)知

8、輪播異形化

9、輪播時間

10、總結(jié)

一、用戶真的使用輪播嗎

用戶是否對輪播有感知，這個則需要根據(jù)不同的場景進(jìn)行判斷，包括每個產(chǎn)品中的每個輪播對用戶用戶的定位也不相同，常見的應(yīng)用場景品牌曝光、活動營銷、產(chǎn)品展示，每個場景下相關(guān)的數(shù)據(jù)也不相同。

促銷輪播banner

品牌推廣輪播banner

產(chǎn)品介紹輪播banner

同時還有個關(guān)鍵因素，輪播的占比，這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內(nèi)容為主的產(chǎn)品，輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。

輪播的頁數(shù)

用戶在使用產(chǎn)品時會默認(rèn)忽略輪播區(qū)域，一般輪播都會有自動輪換機(jī)制，一定時間后自動輪放下一張banner，那么每當(dāng)頁面上進(jìn)行輪播時便會吸引用戶進(jìn)行關(guān)注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。

還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。

如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。

國外一家公司在針對輪播中進(jìn)行了相關(guān)的研究測試，隨著頁數(shù)的增加用戶的點(diǎn)擊逐步下降。

那么如果想讓產(chǎn)品中的輪播更具有效果，則需要根據(jù)不同的場景設(shè)定策略達(dá)到目的。

二、輪播的輪換形式

不管在移動端還是手機(jī)端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點(diǎn)擊切換兩種。

如下圖某藝術(shù)網(wǎng)站，它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn)，同時也符合用戶目標(biāo)。

在看下面這個醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換，并且占比也是鋪滿首屏，在醫(yī)美領(lǐng)域用戶更關(guān)注美感，而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。

而在移動端輪播的形式就比較統(tǒng)一，大多都是自動播放+手指滑動進(jìn)行切換。

三、輪播的進(jìn)度展示

在網(wǎng)頁中輪播都會有當(dāng)前的定位點(diǎn)，許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo)，不用一張一張切換，但是在有些產(chǎn)品中會忽略這一點(diǎn)，設(shè)計(jì)中會做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好，如下圖中的banenr進(jìn)度點(diǎn)設(shè)計(jì)上過于小導(dǎo)致點(diǎn)擊上有些阻礙。

如以下網(wǎng)站去除進(jìn)度定位的方式，通過縮略圖預(yù)覽來告知用戶下一個banner的內(nèi)容，空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息，幫助用戶提前預(yù)知在體驗(yàn)上相對較好。

以下國外某網(wǎng)站在進(jìn)度定位的設(shè)計(jì)上采用了標(biāo)簽文案方式進(jìn)行設(shè)計(jì)，能夠幫助用戶更加全局的了解banner內(nèi)容

四、輪播的定位

定位主要是用來指示當(dāng)前輪播的進(jìn)度，像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。

以下網(wǎng)站的設(shè)計(jì)中則把定位與進(jìn)度相結(jié)合，進(jìn)度條展示該banner預(yù)計(jì)多久會切換下一張，對于自動切換的產(chǎn)品輪播這個更直觀的進(jìn)度展示體驗(yàn)上相對較好。

以下是某個國外網(wǎng)站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當(dāng)前位置

隨著市場上產(chǎn)品同質(zhì)化嚴(yán)重，產(chǎn)品的競爭力也更依賴體驗(yàn)，在下圖中的數(shù)據(jù)可視化的網(wǎng)站上，在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。

五、輪播的切換

在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計(jì)上都很有創(chuàng)新性，但是需要注意一個點(diǎn)，在輪播中不只有自動播放，還需要考慮用戶手動切換，因?yàn)樵趯?shí)際用戶瀏覽中可能會對產(chǎn)品的播放時間達(dá)不到預(yù)期，此時則會使用手動切換，除去可點(diǎn)擊的進(jìn)度點(diǎn)，還需要上一張和下一張的入口切換。

在此基礎(chǔ)上需要注意，在處于最后一張banner時，下一張切換還能不能點(diǎn)擊，第一張時上一張切換還能不能切換，這個取決于產(chǎn)品特性和輪播張數(shù)，如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放，如果過多的頁數(shù)則第一步和最后一步不可點(diǎn)擊。

切換的距離和位置

上一張和下一張的距離遠(yuǎn)近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。

如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因?yàn)樾^(qū)域banner用戶能夠更加全局的觀看，在使用上不會猶豫。

反觀移動端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕，移動端更加依賴手勢交互。

六、對輪播進(jìn)行分類

當(dāng)輪播banner過多時利用標(biāo)簽進(jìn)行分類，用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。

此方式更適合一些電商平臺、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品

如下圖國外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。

七、使用縮略圖進(jìn)行預(yù)知

在banner首屏中，顯示的內(nèi)容越多，越能激發(fā)用戶進(jìn)行點(diǎn)擊，像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示，當(dāng)然不僅局限于這種形式，如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。

相對于縮放圖，圖標(biāo)展示效果上也較好，空間占用更少，使用這種方式需要謹(jǐn)慎，對圖標(biāo)的識別性要求較高，我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng)，讓產(chǎn)品抽象化展示。

在移動端也存在這種設(shè)計(jì)手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。

八、輪播個性化

輪播最大的缺陷則是像剛開始講的用戶會默認(rèn)為廣告，對此可以使用個性化設(shè)計(jì)突破用戶心理障礙，使輪播banner更具備親和力。

如下圖中的數(shù)碼科技網(wǎng)站，利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。

再例如下圖中蘋果官網(wǎng)入口，結(jié)合百度的定制化功能在大搜中進(jìn)行個性化處理，把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示，同時卡片承載產(chǎn)品動畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。

蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁后會發(fā)現(xiàn)，蘋果把輪播結(jié)合鼠標(biāo)滾輪營造沉浸式觀看，每個屏效內(nèi)都展示產(chǎn)品一個功能特點(diǎn)，打破傳統(tǒng)banner的展現(xiàn)形式。

九、自動輪播時間

自動播放的輪播會根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級，如我們平常使用產(chǎn)品時會忽略banner廣告，我們會更加關(guān)注移動中的東西，特別是在移動端上通常是banner進(jìn)行輪播時才會關(guān)注。

谷歌設(shè)計(jì)團(tuán)隊(duì)曾對banner輪播的時間進(jìn)行測試，測試結(jié)果得出5s-7s的輪播時間最佳，在這個時間內(nèi)用戶有足夠的時間對輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。

如下圖谷歌商店的輪播時間設(shè)定在6s。

同時還需要注意，在自動播放的過程中如果用戶鼠標(biāo)hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內(nèi)容。

十、總結(jié)

本文從輪播的樣式、特性、用戶對輪播的認(rèn)知等多方面的介紹，在實(shí)際產(chǎn)品中輪播有很多可用性上的問題存在，我們在設(shè)計(jì)中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

一、好的收藏體驗(yàn)該怎么做？

用戶喜歡在網(wǎng)上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個用戶都為此而樂此不疲。

很多互聯(lián)網(wǎng)產(chǎn)品在用戶點(diǎn)擊收藏后，讓用戶去選擇收藏夾。其實(shí)用戶并不喜歡去選擇，他們只想簡單的把自己喜歡的東西收藏下來。

選擇本身并不是一件很容易的事情，尤其是對于那些有選擇困難癥的人來說。實(shí)際上，我每次都是選默認(rèn)那個。

這并不是一個好的用戶體驗(yàn)。

微信收藏潤物細(xì)無聲

當(dāng)然也有一些做的很好的體驗(yàn)，比如微信的收藏，收藏后會出現(xiàn)一個“收藏成功”的非模態(tài)反饋。

同時可以添加標(biāo)簽，但這個并非強(qiáng)制，為了滿足那些有這種需求的用戶。添加標(biāo)簽的目的是為了方便用戶在日后的檢索。

在收藏列表，微信會根據(jù)收藏的內(nèi)容自動分成鏈接、文件、圖片和視頻等，最近使用位于第一位。

也就是說并不需要用戶去創(chuàng)建自定義分類。

你也可以搜索標(biāo)簽來找到之前收藏的內(nèi)容。通過這些方式基本上滿足了大部分用戶的需求。

拼趣（pinterest）智能識別收藏夾

網(wǎng)站會根據(jù)你采集的圖片在極短的時間內(nèi)，自動識別出圖片對應(yīng)的收藏夾類型?？梢灾苯硬杉綄?yīng)的文件夾。

然而經(jīng)過測試，經(jīng)常會出現(xiàn)誤差。因?yàn)閳D片的分類其實(shí)很復(fù)雜的，屬于高度自定義，很顯然，智能識別并不是一個好的解決方案。

花瓣的快速采集

花瓣是一個設(shè)計(jì)師收集靈感的網(wǎng)站，該網(wǎng)站常見的用戶使用場景是，設(shè)計(jì)師在瀏覽素材時，會大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。

后來花瓣網(wǎng)加入了快速采集的功能，其邏輯是網(wǎng)站會默認(rèn)選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。

而如果你需要選擇其他文件夾則可點(diǎn)擊普通采集。這兩種采集方式滿足了設(shè)計(jì)師的不同需求。

二、互動信息的隱私保護(hù)

社區(qū)類產(chǎn)品有各種點(diǎn)贊，收藏等互動信息，但用戶又不想被別人知道這些信息。

因此，在規(guī)劃產(chǎn)品時需要考慮到用戶互動隱私的保護(hù)，這是用戶側(cè)的剛性需求。

私密的點(diǎn)贊列表

抖音個人主頁的點(diǎn)贊列表，我記得剛開始是公開的，且不能設(shè)置為私密。

用戶點(diǎn)贊的視頻會出現(xiàn)在這里，卻少有人希望這些信息被別人看到，總有些點(diǎn)贊視頻你并不想被別人看到。

如果點(diǎn)贊列表可見，那么用戶在點(diǎn)贊的時候就會有所顧慮，這不利于平臺的互動率。

特別是隨著抖音上熟人也越來越多，強(qiáng)關(guān)系社交場景在漸漸加強(qiáng)。

抖音后來也發(fā)現(xiàn)了這個問題，把它設(shè)計(jì)成了默認(rèn)隱藏。（當(dāng)然可以自己設(shè)置為公開，但只有極少數(shù)用戶會這樣做。）

由于點(diǎn)贊是私密的，用戶可以隨心所欲的點(diǎn)贊自己喜歡的視頻，毫無社交壓力。

這是為何？

源于人性心理學(xué)：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。

不然為何如今的QQ空間基本上都設(shè)置了權(quán)限，畢竟，誰想被別人窺視當(dāng)年那個煞筆的自己呢？

公眾號“在看”和視頻號“私密贊”的邏輯

現(xiàn)在訂閱號打開率越來越低，朋友圈分享曾是訂閱號流量來源的一大入口。

朋友圈早已淪為了一個人設(shè)打造的陣地，現(xiàn)在的人發(fā)圈越來越謹(jǐn)慎。

用戶似乎越來越不愿意在朋友圈分享文章了，除非是有利于自己人設(shè)打造的內(nèi)容。

為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。

用戶點(diǎn)了“在看”后，此文章會出現(xiàn)在看一看這個模塊，且七天前的分享將不可見，這就相當(dāng)于一個弱化版的分享功能。

這將大大減輕用戶分享的社交壓力。對于公眾號主來說，相當(dāng)于增加了一個流量入口，激發(fā)他們創(chuàng)作更多的內(nèi)容。

視頻號點(diǎn)贊也是同理，會被朋友看到，導(dǎo)致用戶在點(diǎn)贊的時候就會有所顧慮。

他會考慮，我點(diǎn)贊了這個視頻，我老師、上司、父母、親戚、朋友會不會看到？他們會怎么想？

但他在抖音上點(diǎn)贊是沒有這么多顧慮的，單純的喜歡就行。

第一，抖音是弱關(guān)系平臺；

第二，抖音上的點(diǎn)贊默認(rèn)是私密的。

因此，微信才推出了私密贊的功能，需要長按才能觸發(fā)。

這并是一個優(yōu)雅的解決方案，一是操作成本有點(diǎn)高，二是用戶存在較高的學(xué)習(xí)成本。

微信作為一個強(qiáng)關(guān)系社交場景，這正是微信與抖音不一樣的地方。

以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。

三、確定按鈕放左邊還是右邊？

同時用過mac OS和windows系統(tǒng)的用戶不知是否發(fā)現(xiàn)，這兩個操作系統(tǒng)的彈窗按鈕“確定”和“取消”的位置是不一樣的？

mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過來，確定在左，取消在右。

為什么會有這樣的差異？哪一種更加合理？

模態(tài)反饋定義

在交互設(shè)計(jì)中，這種彈窗叫做模態(tài)反饋，艾倫·庫珀在《About Face 4》中提到：模態(tài)模式一種臨時模式，它通過遮罩將用戶當(dāng)前看到的內(nèi)容和之前看到的內(nèi)容區(qū)分開來，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態(tài)的優(yōu)勢在于讓用戶專注于完成某個任務(wù)而不被干擾。

哪個優(yōu)先級更高

首先我們要明白這兩個按鈕哪個使用率更高，一般來說，“確定”的點(diǎn)擊率要遠(yuǎn)遠(yuǎn)高于“取消”。這是因?yàn)榇蠖鄶?shù)用戶對于自己的操作行為是明確的。

所以這兩個按鈕在視覺上一定要做出差異化，“確定”的視覺層級要高于“取消”，這樣用戶才會一目了然，不會感到困惑。

兩者背后的邏輯差異

回到剛才的問題，逆向思考這兩者背后的邏輯差異。

windows彈窗的背后邏輯：

人的閱讀習(xí)慣是從左到右，所以把點(diǎn)擊率更高的按鈕放在左邊更加符合人的正常閱讀習(xí)慣。

mac彈窗的背后邏輯：

根據(jù)一般的任務(wù)的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進(jìn)入下一步任務(wù)流程。

看上去似乎都有道理，這兩種交互方式本身沒有絕對的對與錯。只要在整個系統(tǒng)中保持一致性，讓用戶形成操作習(xí)慣就沒有啥問題。

從個人的使用習(xí)慣而言，個人更傾向于mac的這種方式。

四、手機(jī)的實(shí)體鍵怎么放才合理？

手機(jī)上的實(shí)體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側(cè)或都放在右側(cè)，前者以iPhone為代表，后者以安卓手機(jī)為代表。

這兩種方式有什么區(qū)別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。

用戶場景

我們先來看看都放在右側(cè)會有什么問題，以下使用場景相信用戶不會陌生：

用戶a，在地鐵上玩王者，聲音有點(diǎn)大，想把聲音調(diào)小，結(jié)果不小心按到了電源鍵，導(dǎo)致手機(jī)息屏，而此刻你正在激烈的團(tuán)戰(zhàn)，內(nèi)心有一萬只“草尼瑪”奔騰而過……

用戶b，每次按電源鍵（解鎖或鎖屏）都會不小心同時按到音量鍵，結(jié)果直接就截圖了！這種情況發(fā)生了不止一次，因?yàn)檫@兩個按鍵離的太近了……

用戶c，自家的小米11，電源鍵位于中間位置，右手拿時大拇指會觸碰到，左手拿時中指剛好會觸碰到，而電源鍵又有指紋鎖功能，導(dǎo)致手機(jī)在不斷的解鎖，而你毫無察覺……

通過上面的案例，可以得出結(jié)論：若按鍵都放在右側(cè)，會導(dǎo)致用戶經(jīng)常誤觸而造成不必要的麻煩。

放在兩側(cè)就不會有這樣的問題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔(dān)心按錯，減少誤操作的幾率。

電源鍵并非一開始位于右側(cè)

值得一提的是，iPhone手機(jī)的電源鍵一開始是位于頂部位置，這是為何？

因?yàn)閯傞_始時手機(jī)都是小屏幕（3.5～4寸左右），對于iPhone5S及以前的手機(jī)來說，單手操控，拇指Home，食指電源，剛剛好。

所以電源鍵放在頂部既按得到又可以減少誤操作。

后來隨著手機(jī)大屏的趨勢（4.7寸以上），這個時候單手已經(jīng)不方便按到頂端了，從6代開始就把電源鍵放在右側(cè)了。

但無論是哪種方式， 兩個按鍵都是分開放。

按鍵不在中間的原因

還有一個小細(xì)節(jié)，iPhone的實(shí)體鍵不是在右側(cè)正中間，而是在靠上的位置。

iPhone設(shè)計(jì)理念是單手持握，并且大多數(shù)人右手握手機(jī)，大拇指經(jīng)常會碰到右側(cè)邊框，若果放中間，這樣會造成誤觸音量鍵和靜音鍵。

其實(shí)上面的案例3就已經(jīng)說明了按鍵放在中間的弊端。

我想起了當(dāng)年的錘子T1，左右按鍵一樣大且位于兩側(cè)的中間，這是典型的為了追求完美的對稱而向用戶體驗(yàn)妥協(xié)。

iPhone從初代開始就已經(jīng)建立了自己的設(shè)計(jì)理念，不管是工業(yè)設(shè)計(jì)還是界面設(shè)計(jì)，并沿用至今。

五、iPhone靜音鍵有存在的必要么？

從初代開始，iPhone機(jī)身左側(cè)音量鍵上方就有一個靜音鍵。

這些年來，iPhone一直在減少各種實(shí)體按鍵以及外部接口，比如3.5mm耳機(jī)孔、home鍵。

但直到如今這個靜音鍵卻一直保留下來，為何iPhone對于這個按鍵情有獨(dú)鐘？

靜音鍵開啟后，任何來電或通知都是無聲的，震動也會消失。

在無需點(diǎn)亮屏幕的情況下實(shí)現(xiàn)一鍵靜音，方便快捷，深受用戶的青睞。

哪些場景用戶會開啟呢？

根據(jù)自身的使用習(xí)慣以及用戶研究，無非以下幾種使用場景，比如看電影、開會、上課等：

1.進(jìn)電影院看電影前，我一般都會撥一下，避免在看電影的過程中被來電鈴聲打擾，影響了自己和別人觀影。

2.開會的時候也會撥一下，以防在開會的時候突然被來電鈴聲所打擾，避免不必要的尷尬。

3.學(xué)生黨在上課前一般也會開啟，這樣整節(jié)課都不怕打電話進(jìn)來了。

總之，就是不希望自己的手機(jī)鈴聲打擾到自己和別人，帶來不必要的麻煩。

如果是虛擬靜音鍵，需要先解鎖手機(jī)，對著手機(jī)屏幕一頓操作。

而實(shí)體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。

安卓手機(jī)為何沒有實(shí)體靜音鍵？

這個按鍵這么重要，卻很少看到安卓手機(jī)上有（除了一加基本上沒有）。

實(shí)體靜音鍵并非蘋果首創(chuàng)，之前的Palm、Blackberry（黑莓）早已有這樣的設(shè)計(jì)。

可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統(tǒng)還可以把靜音按鈕直接放在桌面上，設(shè)置靜音非常方便，也就沒必要再多加一個實(shí)體鍵了，顯得多余又徒增成本。

一加三段式按鍵

上面提到過的，作為安卓陣營唯一的靜音鍵，一加手機(jī)引以為傲的三段式按鍵，該設(shè)計(jì)可以通過物理鍵直接實(shí)現(xiàn)在靜音、免打擾與正常模式當(dāng)中快速切換。

但個人認(rèn)為這個設(shè)定復(fù)雜了，三種模式遠(yuǎn)比兩種模式復(fù)雜。用戶并不一定能搞明白，有一定的學(xué)習(xí)成本。

iPhone設(shè)計(jì)靜音實(shí)體鍵的初衷

在早期，iPhone的控制中心并沒有靜音按鈕，想要設(shè)置個靜音并不是一件容易的事情，而這個功能又是必須的，蘋果索性直接做了一個實(shí)體物理鍵。

這樣靜音的時候只需要把靜音鍵撥過來就可以了，一步到位，使用體驗(yàn)也很好，所以一直保留至今。

雖然現(xiàn)在iPhone的控制中心已經(jīng)加入了勿擾模式，但考慮到老用戶的使用習(xí)慣，以及品牌調(diào)性，蘋果對于這個實(shí)體按鍵的去掉還是顯得很謹(jǐn)慎。

考慮到之后iPhone在防水、機(jī)身內(nèi)部空間的改進(jìn)，不排除蘋果終有一天會取消iPhone上這個靜音鍵。

靜音鍵的缺點(diǎn)

靜音鍵雖好，但也并非沒有缺點(diǎn)。用戶有時候會無意中觸發(fā)這個按鍵而不自知，或者開啟后忘記關(guān)閉，導(dǎo)致錯過了一些重要的電話。

靜音并非絕對

雖然開啟了靜音鍵，但并不是絕對的靜音。如果是鬧鐘，鈴聲還是會響起，因?yàn)轸[鐘的優(yōu)先級要遠(yuǎn)高于靜音模式。

蘋果這是考慮到了如果有用戶不小心觸發(fā)了靜音鍵，或者開啟后忘記了關(guān)閉，害怕用戶耽誤了重要事情。

這就很好的解釋了為何明明開啟了靜音模式，卻還可以調(diào)解音量大小的原因所在。細(xì)微之處方見真功夫。

六、經(jīng)典的旋鈕式交互

在日常生活中，旋鈕是個很常見的東西，比如音箱，微波爐，收音機(jī)，老式電視，車載旋鈕……

在機(jī)械產(chǎn)品上，旋鈕凸起的把手和它下面的圓盤刻度，是最明顯不過的旋轉(zhuǎn)暗示，符合人的自然感知。

旋鈕式交互是個人非常偏愛的一種交互方式，我認(rèn)為這種交互跟iPhone的home鍵一樣經(jīng)典，主要原因有三：

1.操作簡單

旋鈕操作簡單，看到這種按鈕，一歲小孩子都會忍不住用手去抓。對于用戶來說，幾乎不需要學(xué)習(xí)成本。

2.盡在掌控

在旋轉(zhuǎn)的過程中，可調(diào)大調(diào)小，一切盡在用戶的掌控之中，用戶感覺到有十分的安全感。

3.即時反饋

在調(diào)節(jié)的過程中，調(diào)大調(diào)小都能立刻收到即時的反饋，這是用戶最喜歡的交互方式。

我們在觸摸屏上很少看到這種旋鈕式交互，因?yàn)檫@種交互是要建立在抓住旋鈕實(shí)物的感受。

而觸控屏是個二維的世界，沒有真實(shí)抓握的手感，無法還原出三維世界的真實(shí)手感。

汽車上最常見的旋鈕就要數(shù)音量和空調(diào)了。然而自從特斯拉在車上推廣大屏幕后，越來越多的國內(nèi)廠家開始盲目跟風(fēng)，把絕大部分的功能按鈕集成到屏幕中，比如空調(diào)，不僅不方便，行車中使用還容易造成危險駕駛。

車上的觸控體驗(yàn)跟手機(jī)上是完全是兩碼事，使用場景也完全不同。最大的區(qū)別在于后者沒有安全問題。

都知道開車不玩手機(jī)，可是行車時操作中控屏跟玩手機(jī)有什么兩樣？

車載旋鈕有什么優(yōu)勢？

1.駕駛更加安全

對于駕駛員來說更加安全，通過旋鈕調(diào)節(jié)空調(diào)，熟悉后完全可以實(shí)現(xiàn)盲操，邊開車邊操作毫無壓力。

如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。

而安全是汽車駕駛的重中之重。

2.更加真實(shí)的反饋

用戶的操作有真實(shí)的物理反饋，旋鈕阻尼。

屏幕上虛擬按鍵反饋根本無法與實(shí)體旋鈕相提并論。

3.更加穩(wěn)定的機(jī)械結(jié)構(gòu)

軟件系統(tǒng)用久了會變卡，可能會死機(jī)，難免會有bug。而這些不穩(wěn)定因素將成為汽車駕駛的潛在危險因素。

一旦屏幕失靈，或者系統(tǒng)死機(jī)了，那所有按鍵都失效了。

雖然特斯拉為了提升其車載系統(tǒng)的穩(wěn)定性下了很大功夫，但是問題從來都沒有停止過。

但是硬件基本上很少會出問題，物理旋鈕才讓人100%放心。

無論廠家如何吹噓，虛擬屏幕按鍵在大多數(shù)情況下都不會比實(shí)體按鍵有更好的使用體驗(yàn)。

因此，有一些實(shí)體鍵出于安全駕駛的考慮還是應(yīng)該保留，將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實(shí)體按鍵變?yōu)橛|摸按鍵存在安全隱患。
文章來源：站酷   作者：CdzhcHappy

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

目錄

1.百度網(wǎng)盤 ：會員標(biāo)識

2.當(dāng)當(dāng)：搜索記錄隱藏

3.當(dāng)當(dāng)：分享動效 ? 一鍵制作朋友圈分享海報

4.抖音：點(diǎn)擊復(fù)制 ID

5.飛書：效率工作—語言自動轉(zhuǎn)化

6.美團(tuán)：優(yōu)惠卷新到提示

7.墨跡天氣：一鍵登錄（大部分應(yīng)用已上線該功能，部分應(yīng)用仍未上線）

8.起點(diǎn)讀書：長按可進(jìn)行互動

9.騰訊視頻：亮度調(diào)節(jié)的動效設(shè)計(jì)

10.微博：點(diǎn)贊動效設(shè)計(jì)

11.知乎：刪除搜索記錄

12. QQ：可隱藏會話

13. QQ 音樂：搜索入口的聽歌識曲

14. QQ 閱讀：長按復(fù)制的放大設(shè)計(jì)

一、百度網(wǎng)盤：會員標(biāo)識別

在開通會員后百度網(wǎng)盤會進(jìn)行對于應(yīng)用圖標(biāo)的更換，使得應(yīng)用圖標(biāo)更加高級，在分享鏈接時也會加入會員分享的標(biāo)識。

屬于用戶激勵體系中的一個板塊，增強(qiáng)用戶的標(biāo)識和身份。

二、當(dāng)當(dāng)搜索記錄隱藏

搜索隱藏功能設(shè)定。

我們在使用各大應(yīng)該的搜索功能時總會遇到過這樣的場景，當(dāng)你要某人或者在某種場景下需要進(jìn)行搜索時，來不及刪除自己的搜索記錄出現(xiàn)社死的情況。

而當(dāng)當(dāng)?shù)乃阉麟[藏就可以完美的解決這個問題，退一步講我們可以思考一下為什么別的成熟型應(yīng)用，沒有采用這樣的方式。大部分是沒有這個功能，其余則是在搜索這一個功能上已經(jīng)添加了其余用戶體驗(yàn)的設(shè)計(jì)。所以在這一塊就沒法加入這個設(shè)計(jì)。

三、當(dāng)當(dāng)：分享動效 ? 一鍵制作朋友圈分享海報

在當(dāng)當(dāng)應(yīng)用中點(diǎn)擊分享進(jìn)入頁面后不同于傳統(tǒng)的分享頁面，而是把分享到微信和分享到朋友圈進(jìn)行了動態(tài)設(shè)計(jì)。并且在分享到朋友圈的右上角加上了海報的標(biāo)識。我們點(diǎn)擊會自動跳轉(zhuǎn)生成海報。

這樣的設(shè)計(jì)可以更加吸引用戶的眼球并且自動生成海報可以激發(fā)用戶在朋友圈轉(zhuǎn)發(fā)的次數(shù)。

動效展示

四、抖音：點(diǎn)擊復(fù)制 ID

主頁 ID 點(diǎn)擊可進(jìn)行復(fù)制  很多應(yīng)用都有 ID 。但是當(dāng)我們要進(jìn)行 ID 搜索的時候，我們便需要一遍一遍的反復(fù)查看或者記住這個 ID 然后再進(jìn)行搜索。

目前部分的應(yīng)用也上線了類似的功能,讓用戶點(diǎn)擊 ID 區(qū)域可進(jìn)行復(fù)制。對于用戶體驗(yàn)的提升有著很顯著的效果。

五、飛書：效率工作語言自動轉(zhuǎn)化

飛書屬于一款協(xié)同辦公類的應(yīng)用

在飛書的設(shè)置用有語音直接轉(zhuǎn)換文字的說明，飛書本身便是一款協(xié)同辦公類的產(chǎn)品。此產(chǎn)品效率便是產(chǎn)品關(guān)鍵詞之一，所以加入這樣的設(shè)置可極大的提升用戶的體驗(yàn)。

六、美團(tuán)：優(yōu)惠卷新到提示

有提示用戶新到多少張優(yōu)惠卷的提示

可以促進(jìn)用戶消費(fèi)的同時能幫助和提醒用戶去使用消費(fèi)卷不僅提高了商家的銷量還使得用戶在消費(fèi)中發(fā)現(xiàn)自己的優(yōu)惠卷及時使用

七、墨跡天氣：一鍵登錄（大部分應(yīng)用已上線該功能，部分應(yīng)用仍然未上線）

一鍵登錄

應(yīng)用登陸中目前主流為（1.第三方登錄，登陸之后需要再次綁定手機(jī)號。2.手機(jī)號注冊登陸，登陸之后可選擇是否綁定第三方。3.一鍵登錄，登陸之后可以選擇是否綁定第三方）在設(shè)計(jì)流程中，設(shè)計(jì)開發(fā)者需要盡可能的減少對流程的復(fù)雜化。

一鍵登錄在為看來是最喜歡的一種登陸方式。導(dǎo)致現(xiàn)在如果需要各種注冊綁定，除非必要的情況下，我會直接放棄這款應(yīng)用。

八、起點(diǎn)讀書：長按可以進(jìn)行互動

長按頁面可以框選當(dāng)前的段落，并且出現(xiàn)互動選項(xiàng)。

 

增加用戶和用戶之間，用戶和作者之間的互動。使得用戶在讀書的同時有著較強(qiáng)的參與感。

九、騰訊視頻：亮度調(diào)節(jié)的動效設(shè)計(jì)

滑動可調(diào)節(jié)亮度

 

左邊的小動效的設(shè)計(jì)加上右邊的漸變進(jìn)度條，使用戶可以更加明確的知道自己所處于一個什么樣的觀看環(huán)境，并且加入了漸隱漸現(xiàn)的出場和入場。

 

用一個小巧的動效設(shè)計(jì)幫助用戶確定自己的亮度屬性，

動效展示

十、微博：點(diǎn)贊動效設(shè)計(jì)

點(diǎn)擊點(diǎn)贊會出現(xiàn)彩色的波浪并且不斷擴(kuò)散的同時有小表情彈出。

增加趣味性和互動性。

動效展示

十一、知乎：刪除搜索記錄

清空時會在進(jìn)行確認(rèn)，再次點(diǎn)擊全部刪除方可刪除。

在下方列表中可逐一刪除，上面清空中不是點(diǎn)擊后就全部清空。而是再次出現(xiàn)，起強(qiáng)調(diào)和確認(rèn)的作用。

增加用戶體驗(yàn)，幫助用戶進(jìn)行二次確認(rèn)和防止用戶誤觸。作為一款咨訊類應(yīng)用用戶的搜索記錄也是比較重要的。

十二、QQ：可隱藏會話

前幾天發(fā)現(xiàn)的一個神級功能（雖然我已經(jīng)不用 QQ 進(jìn)行社交了），當(dāng)時我外甥和我講述了這個功能他么00后戲稱為養(yǎng)魚神器。

在好友的設(shè)置中可隱藏會話，開啟隱藏會話以后。此聯(lián)系人發(fā)來的消息不會顯示在聯(lián)系人列表。需要自己手動去設(shè)置隱藏會話列表去尋找。

應(yīng)用的功能更加多樣化滿足多種不同的需求。

十三、QQ 音樂：搜索入口的聽歌識曲

在搜索入口加入了聽歌識曲且進(jìn)入界面后可進(jìn)行聽歌識曲和哼唱識別的切換

搜索歌曲界面的使用場景為：1.用戶得知該歌曲的名稱或者歌詞進(jìn)行搜索。2.用戶聽到了某一首很好聽的歌曲想進(jìn)行搜索。此時在場景二的情況下，正好可以進(jìn)行聽歌識曲。聽歌識曲此功能在比較舊的版本屬于主頁中的一個模塊，把聽歌識曲放到搜索入口處更加符合用戶場景。

對用戶場景進(jìn)行細(xì)致的研究，增加了用戶體驗(yàn)。

十四、QQ 閱讀：長按復(fù)制的放大設(shè)計(jì)

長按復(fù)制會有放大鏡設(shè)計(jì)

當(dāng)用戶處于復(fù)制文案的場景下時，由于復(fù)制需要拖動，在拖動的過程中會按壓住自己所處于的復(fù)制內(nèi)容位置。所以在用戶進(jìn)行復(fù)制時加入放大鏡的設(shè)計(jì)會使得用戶清楚的明白自己復(fù)制到哪里，不需要后續(xù)用戶在進(jìn)行刪減。

極大的加強(qiáng)了此場景下的用戶體驗(yàn)

動效展示

文章來源：站酷    作者：張陽光Designer

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

一、GUI和VUI的定義：

1.1GUI

GUI（Graphical UserInterface）圖形界面，市面上最常見的交互方式。點(diǎn)觸，滑動，作為主要輸入方式。圖像顯示作為主要輸出方式。

1.2VUI

VUI（Voice User Interface）語音界面，常見沒有屏幕的智能音箱/耳機(jī)，靠語言輸入和交流，如我們常見的小艾同學(xué)，天貓精靈等。

二、GUI和VUI的發(fā)展歷程：

2.1GUI的發(fā)展歷程

1973年第一個可視化操作的Alto電腦在施樂帕洛阿爾托研究中心（Xerox PARC）完成。Alto是第一個把計(jì)算機(jī)所有元素結(jié)合到一起的圖形界面操作系統(tǒng)。它使用3鍵鼠標(biāo)、位運(yùn)算顯示器、圖形窗口、以太網(wǎng)絡(luò)連接。

1981年施樂公司推出了Alto的繼承者Star，Alto曾首次使用了窗口設(shè)計(jì)。

1983年蘋果電腦公司推出Apple Lisa個人電腦，是全球第一款搭載圖形用戶界面（GUI）的個人電腦。

1984年蘋果電腦公司推出Macintosh。

1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。

1988年IBM發(fā)布OS/2 1.10標(biāo)準(zhǔn)版演示管理器（Presentation Manager），這是第一種支持Intel計(jì)算機(jī)的穩(wěn)定的圖形界面。

1992年微軟公司發(fā)布Windows 3.1，增加了多媒體支持。

1995年微軟的Windows 95發(fā)布，其窗口操作系統(tǒng)的外觀基本定型。

1996年微軟發(fā)布Microsoft Bob，此軟件具有動畫助手和有趣的圖片。

1996年IBM發(fā)布OS/2 Warp 4，它的交互界面得到顯著改善，至今仍有不少ATM機(jī)運(yùn)行這樣的系統(tǒng)。

1997年KDE和GNOME兩大開源桌面項(xiàng)目啟動。

1997年蘋果電腦公司發(fā)布Mac OS 8，這個系統(tǒng)具有三維外觀并提供了SpringLoaded Folder功能。

2000年蘋果電腦公司推出Mac OS X系統(tǒng)的默認(rèn)外觀Aqua。

2001年微軟發(fā)布Windows XP，實(shí)現(xiàn)了主題支持。

2003年Mac OS X v10.3提供了一鍵單擊訪問任何已打開窗口的功能。

2003年Sun公司的Java桌面系統(tǒng)為GNOME桌面添加了和Mac類似的效果。

2006年微軟發(fā)布Windows Vista，對此前其視窗操作系統(tǒng)的外觀作了較大的修改，實(shí)現(xiàn)了Aero功能。

2.2VUI的發(fā)展歷程

20世紀(jì)90年代，誕生了第一個可行的、非特定的（每個人都可以對他說話）的語音識別系統(tǒng)，交互式語音應(yīng)答（Interactive Voice Response，IVR）系統(tǒng)的出現(xiàn)代表了VUI的第一個重要時期。人通過電話線路進(jìn)行交互并執(zhí)行任務(wù)，如機(jī)票預(yù)訂、銀行轉(zhuǎn)帳、業(yè)務(wù)查詢等。

目前很多像siri、Google這類集成了視覺和語音信息的APP，以及Amazon Echo這類純語音的設(shè)計(jì)產(chǎn)品，逐步發(fā)展并成為主流。隨著語音識別技術(shù)、AI技術(shù)、互聯(lián)網(wǎng)技術(shù)的發(fā)展，我們已經(jīng)可以在手機(jī)設(shè)備中用語音處理很多事情，但還有很多事情目前無法通過語音完成，需要我們探索。

三、GUI和VUI的設(shè)計(jì)要領(lǐng)：

3.1GUI

        交互的多樣性：

不同于PC機(jī)通過鼠標(biāo)來點(diǎn)擊，在觸控設(shè)備上通過手指點(diǎn)按，由于手指的精確度相對于鼠標(biāo)指針差很多，所以子啊移動頁面設(shè)計(jì)當(dāng)中的交互元素一定得辨識作用，手機(jī)并沒有懸停操作所以圖標(biāo)如果特征不明顯時一定要加文字識別，設(shè)計(jì)時也應(yīng)注意圖標(biāo)和菜單元素的尺寸。

拖拽和移動是很相似的交互工作，被拖拽的元素始終跟隨著緊貼屏幕的指尖

除了使用單指之外，還可以用兩個手指放大，縮小圖片，如果設(shè)計(jì)了一些新的多指交互一定要給用戶提示和指導(dǎo)。

3.2VUI

3.3VUI的適用場景

智能家居

在智能家居領(lǐng)域VUI應(yīng)用越來越廣泛，相信在不久的將來我們一定能夠享受到更多的VUI所帶給我們的便利。

輔助駕駛

車載語音交互系統(tǒng)使得我們可以在開車的同時接聽電話、聽廣播等。

企業(yè)應(yīng)用

未來大型企業(yè)中將會多領(lǐng)域應(yīng)用VUI，用于書寫、記錄等工作。

醫(yī)療教育

智能記錄病例、管理病例的出入。

四、VUI的語言設(shè)計(jì)注意事項(xiàng)

過多的聲音干擾，不但會增加用戶的心智負(fù)擔(dān)，將會引起用戶感到厭煩，尤其是，語音在資訊的負(fù)荷量上又比單純的聲音來的更多，考量是否存在存在的必要性就放在格外重要。而言，可以尋找替代的方式，透過震動和燈光甚至狀態(tài)變化來提示，減少使用者的認(rèn)知負(fù)荷，并確保聲音只會在特定的時間點(diǎn)出現(xiàn)，并提供使用者自行設(shè)定關(guān)閉聲音的功能

除了聲音本身的設(shè)計(jì)外，還要考慮整體環(huán)境的影響因素，可能周遭受非常的吵雜。換句話說，在KTV的包廂，吵雜的環(huán)境，會使用者無法聽到消防警鈴響，而容易造成危險事件的產(chǎn)生。也因?yàn)槿绱耍谰彽穆曇纛l率設(shè)計(jì)就應(yīng)該介于2kM到4kM，因?yàn)檠芯恐赋鋈祟惖亩鋵τ谶@個范圍的聲音最敏感

從音量的角度來看，耳朵對不同頻率的音量有不同的感知程度，有些聲音聽起來很響亮，有些則是很沉悶因人而異，但比較客觀的量化體驗(yàn)指標(biāo)就是分貝（decibel，dB） ，在尺度上超過70分貝以上，會讓人產(chǎn)生憂慮不安，并引發(fā)各種癥狀，因此要盡量避免尺寸大小過大的設(shè)計(jì)， ，，降低主動的侵入性?；谶@些因素總和來說，還要考量到用戶和產(chǎn)品間的距離，與產(chǎn)品愈近，對于體積的需求量較大，反之為然

在聲音體驗(yàn)設(shè)計(jì)（Amber Case，2018）一書指出，當(dāng)警告或提示音出現(xiàn)的頻率愈高，就應(yīng)該設(shè)計(jì)成愈短，但不足就是，如果把聲音設(shè)計(jì)成短而急促，從而使用者需要集中相反地，事件發(fā)生時間間隔長且久，則聲音提示更需要明顯且激烈的聲音來提醒用戶，例如手機(jī)鈴聲響時，需要告知用戶

文章來源：站酷    作者：張陽光Designer

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

保持好奇，巧妙融合，追求卓越，自然而然

一家之言，未必全面，甚至未必正確。歡迎交流探討。

01

交互設(shè)計(jì)的驚喜，是什么？

之前的文章，有簡單定義過交互設(shè)計(jì)的“驚喜”，即為：超出用戶預(yù)期，并讓用戶開心。

具體而言有兩類，分別是：小驚喜、大驚喜。

1 小驚喜

所謂小驚喜，是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。

先說趣味性。常見的有兩類，第一類是比較好玩的動效，第二類是一些小功能。第二類有時也會包含第一類。

動效這塊，大家比較熟悉的，有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動，仿佛是嚇的發(fā)抖，也可能是在搖頭求饒；還有移動端登錄 B 站、輸入密碼時，動畫人物的捂眼捂臉動作。

(B 站登錄頁面)

小功能這塊，也可以分成兩類。一類是隱藏的小功能，一類是有趣的小功能。

很多隱藏功能，頭幾次用的時候，多少會有一些驚喜之感。

比如在訂閱號消息列表頁，某個公眾號你已經(jīng)幾個月沒看過，對它失去了興趣和信任。這時，嘗試長按這個公眾號的頭像或名稱，會呼出一個包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號消息列表)

還有些隱藏功能，既能讓用戶覺得驚喜和方便，又能引發(fā)用戶思考。這種思考，可能會讓用戶感嘆設(shè)計(jì)之妙，也可能也會給用戶一種猜對謎語的欣喜之感。

比如用墨刀的時候，嘗試按數(shù)字鍵 1，會呼出“內(nèi)置組件”這個使用頻率非常高的功能，會讓人覺得墨刀很聰明。

如果再仔細(xì)看一下，會發(fā)現(xiàn)，“內(nèi)置組件”的縮略圖標(biāo)，和其他 4 個諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo)，并成一列。這 5 個縮略圖標(biāo)的排列順序（上到下），和它們快捷鍵（"、"鍵和數(shù)字鍵1、2、3、4）的排列順序（左到右），是完全一致的。不得不說，這是一個簡單又巧妙的設(shè)計(jì)。

再比如朋友圈里，某個不熟的好友每天都發(fā)集贊的小廣告，搞的我們不勝其煩。長按其頭像，會呼出設(shè)置權(quán)限（屏蔽等）的功能。

有意思的是，長按好友名字，則不會呼出這個功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁的；另外剛才那個例子，長按公眾號頭像或名字，也都能呼出取關(guān)的彈窗。

個人的理解，生活中，我們用力長按一個人，通常是表達(dá)強(qiáng)烈不滿，比如打架時。比起長按名字，長按頭像更像是長按真人，所以也更能表達(dá)我們的不滿。

說完隱藏的小功能，再說下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布，微信給朋友發(fā)生日快樂后漫天飄落的蛋糕，拍照軟件里的貼紙，等等。

最后說下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見的有如下類型：幫助弱勢、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。

幫助弱勢這塊，比如 iPhone 的輔助功能，里面有針對視力障礙的放大鏡功能、有針對不識字群體的旁白功能。

關(guān)照情緒這塊，很重要的一點(diǎn)，就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除，被刪時我們很難察覺到，而且微信也不會通知我們。個人覺得，微信之所以不通知我們，其中一點(diǎn)，就是不給我們添堵。類似的還有，微信消息沒有“已讀”功能，這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊，比較為人所知的例子，5 月 20 號這天，微信紅包的限額，從 200 元升到了 520 元。還有一個例子，在微信聊天里發(fā)一個“ohh”，長按并點(diǎn)翻譯，結(jié)果也是一個驚喜。

保護(hù)隱私這塊，比如借助 iPhone 的“引導(dǎo)式訪問”功能，可以讓小朋友只能訪問你的某個視頻應(yīng)用來看動畫片。再比如別人用你電腦的時候，如果你不想讓對方看到你的微信，就可以通過手機(jī)微信來鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜，是指那些系統(tǒng)性大創(chuàng)新，并且能夠引領(lǐng)潮流、代表未來的交互設(shè)計(jì)。通常而言，這些大驚喜，最開始給用戶的感覺，就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone，帶來了當(dāng)時的大屏幕：3.5 寸屏幕，以及純觸摸屏，和極為靈敏的觸控體驗(yàn)。

2011 年，Siri 同 iPhone 4S 一起問世，為我們帶來了語音交互。如今，在 100 元就能買到品牌類智能音響的情況下，依靠語音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時代的 iPhone 創(chuàng)新不如以前，但不可否認(rèn)的是，時至今日，iPhone 依然在引領(lǐng)潮流，在給我們大驚喜。比如這幾年流行的手機(jī)無線充電和以 AirPods 為代表的極簡的無線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì)，還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購一條床單，但是不知道床的尺寸，家里又沒有尺子。這時，打開 iPhone 里的測距儀這款 App，就可以量出床的尺寸，會不會覺得有點(diǎn)酷。

(測距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹，比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時又不用下載的產(chǎn)品，也正在引領(lǐng)新一輪的潮流。

還有一個比較酷的功能，就是以圖搜圖。筆者最早用過百度和谷歌的相關(guān)功能，主要是在電腦上搜索相似的圖片，使用頻率極低。

假設(shè)一個場景，比如在路上看到一個陌生人的外套很好看，但又不好意思上前問，就可以拿起手機(jī)，利用淘寶的拍立淘功能，拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒有搜到類似商品，還可以用微信的掃一掃識物。和拍立淘相比，區(qū)別之處有兩點(diǎn)。第一，不用拍，直接能識別，不過通常得等 1-3 秒；第二，識物結(jié)果里面，除了商品，可能還會有百科詞條和資訊。

02

交互設(shè)計(jì)：如何做到驚喜？

個人覺得，有 4 個要點(diǎn)：既要有好奇心，又要有卓越心；既要天馬行空，又要保持自然。

聽起來可能有點(diǎn)亂，且聽筆者一一道來。

1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩，發(fā)現(xiàn)，當(dāng)大人聊天時，特別是談?wù)聲r，小孩特別喜歡坐在旁邊聽，而且聽的很認(rèn)真。小孩有時也會說兩句，或是問問題，或是發(fā)表自己的看法。

看得出來，小孩對成年人的世界，懷有極大的好奇心。實(shí)際上，不止于成年人的世界，小孩對周遭世界都有比較強(qiáng)烈的好奇心。

整體而言，成年人對周遭世界的好奇心，遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì)，有什么關(guān)系？

交互設(shè)計(jì)，某種程度上，也是一種創(chuàng)作。好的創(chuàng)作，一定來自生活。這就需要我們?nèi)ビ^察生活。

觀察生活，非常重要的一點(diǎn)，就是好奇心，對周遭人、事、物要有足夠的好奇心。

比如上文提到的例子，在 iPhone 上刪除應(yīng)用前，應(yīng)用圖標(biāo)會抖。這種抖是一種趣味隱喻，既可以理解成嚇的發(fā)抖，也可以理解成搖頭求生。如果對生活沒有足夠的好奇心，是很難留意到這種生活細(xì)節(jié)，并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心，還有一種特質(zhì)，也是在小孩身上表現(xiàn)突出，同時也和本文主題有關(guān)，那就是：童趣。

還是上文的例子，在 B 站 App 上輸入登錄密碼時，動畫人物會捂眼睛。這個設(shè)計(jì)，可能不會打動所有用戶，但至少一部分用戶會覺得比較有趣。如果我們內(nèi)心沒有一點(diǎn)童趣，可能也會覺得，這個設(shè)計(jì)，沒啥意思。

玩是人的天性。對于比較好玩的交互設(shè)計(jì)，大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上，據(jù)筆者觀察，我們大部分從業(yè)者是有童趣的。我們比較缺的，是好奇心。

那么，怎樣判斷自己是否擁有足夠的好奇心，其標(biāo)志是什么？

個人觀點(diǎn)，有兩個標(biāo)志。第一，是對與個人利益無關(guān)的生活小事的關(guān)注，遠(yuǎn)多于對個人利益本身的關(guān)注。第二，觀察和思考，遠(yuǎn)多于評價和自大；追本和溯源，遠(yuǎn)多于偏見和傲慢。

為什么會提到個人利益？

因?yàn)?，通常而言，個人利益，尤其是短期利益(比如少花時間設(shè)計(jì)和修改原型)，往往會和用戶體驗(yàn)存在一個此消彼長的關(guān)系。

如果過于關(guān)注個人利益，不僅很難照顧到用戶體驗(yàn)，甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來驚喜，就更無從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時代洪流面前，好奇心的兩個標(biāo)志，顯得很難，該如何實(shí)現(xiàn)？

關(guān)鍵在于找到背后的源動力。這個源動力，在筆者看來，有兩點(diǎn)，分別是：求知若渴、淡泊寧靜。

求知若渴，可以源源不斷的驅(qū)動我們?nèi)ビ^察、去思考萬事萬物的規(guī)律和聯(lián)系。

淡泊寧靜，正如諸葛亮在《誡子書》中所說，“非淡泊無以明志，非寧靜無以致遠(yuǎn)”。人的心力和精力終歸是有限的，如果我們沉迷名利、物欲、享樂，就難有興趣和精力去琢磨萬事萬物了。

所以，只要找回自己童年的那種求知若渴，同時修身養(yǎng)性到淡泊寧靜，這份好奇心，就會回來。

2 巧妙融合

某種程度上，很多帶給我們驚喜的交互設(shè)計(jì)，都是一種巧妙融合。

筆者把這種巧妙融合，初步分成了三類，分別是：簡單融合、直接融合、委婉融合。

簡單融合，最常見的就是隱藏功能。把一個較為簡單的操作動作，比如長按、雙擊、下拉、左滑等，和一個合適的功能，融合在一起。用電腦時我們常說的快捷鍵，也屬于這一類。

通常而言，操作對應(yīng)什么功能，講究的是合適，并無固定章法束縛。比如在微信朋友圈，發(fā)表文字的功能可以靠長按（相機(jī)圖標(biāo)）喚起，設(shè)置權(quán)限的功能也可以靠長按（好友頭像）喚起。所以，簡單融合這塊，可供我們發(fā)揮的空間很大。

另外，簡單融合最常見的形式——隱藏功能，既實(shí)現(xiàn)了界面的簡潔，又帶來了一定驚喜。

簡單融合，既簡單，又實(shí)用。建議大家充分開發(fā)這一塊。

直接融合，是指將生活中的趣味性，直接搬到軟件中，搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布，以及漂流瓶、抽獎等。

這一類融合，有點(diǎn)像商場里的電玩城，雖然我們不會經(jīng)常去玩，但確實(shí)比較好玩。

委婉融合，是指用明喻或隱喻的手法，將生活中微不足道的一些細(xì)節(jié)，移植到交互設(shè)計(jì)中。

這種移植，有時是直白的。比如 Mac 上打開應(yīng)用時，其圖標(biāo)會在 dock 欄里有規(guī)律的彈跳，這會讓我們聯(lián)想到皮球的彈跳。

這種移植，有時是隱晦的。比如 iPhone 上刪除應(yīng)用前，其圖標(biāo)會抖。這種抖，是害怕還是求饒，任憑我們想象。

這種移植，有時是無聲的。比如在朋友圈，要想呼出隱藏的設(shè)置權(quán)限功能，只能長按頭像，長按名字則不行。這個設(shè)計(jì)，不乏想象空間。如果不嘗試長按名字，則不會發(fā)現(xiàn)這個細(xì)節(jié)。

委婉融合，有時會帶一些趣味性。更為重要的是，它能夠引發(fā)我們的思考和想象，所以是一種很出彩的融合。這種融合，也會賦予交互設(shè)計(jì)，一種禪的味道。

整體而言，筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜，則保持好奇心、并做到巧妙融合，基本足矣。

如果目標(biāo)是大驚喜，則需要雄心壯志，需要舍我其誰，需要追求卓越。

日常工作中，可能會有這樣的對話?！斑@個動效/功能，實(shí)現(xiàn)不了”。

大驚喜里的幾個例子，比如初代 iPhone 的觸控體驗(yàn)，iPhone 里的測距儀，微信的掃一掃識物。這種設(shè)計(jì)，意味著要修一條最好的長城，背后往往有很多技術(shù)難題要攻克，有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì)，那么，“實(shí)現(xiàn)不了”這句話，估計(jì)就聽不到了。取而代之的，可能是：“還在研究中”，“下個大版本能上”。

4 自然而然

提到驚喜，還有一款值得研究和學(xué)習(xí)的產(chǎn)品，那就是錘子手機(jī)的 Smartisan OS。

個人觀點(diǎn)，在小驚喜方面，Smartisan OS 頗有建樹。在大驚喜方面，Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說小驚喜，比如華麗而細(xì)膩的桌面翻頁動畫，比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能，比如靜音可以設(shè)置時間，比如方便的長截屏。

(靜音可設(shè)置時間)

(長截屏)

再說大驚喜。2016 年 10 月發(fā)布的一步和大爆炸，是比較大比較系統(tǒng)的功能，在當(dāng)時也很新。錘子公司也一直有宣傳這兩個功能。所以相對而言，這兩個功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī)，身邊也有朋友在用錘子手機(jī)。以一步為例，這個功能，筆者體驗(yàn)過很多次。但平常很少用，身邊朋友的情況也類似。

(一步)

根據(jù)使用情況和主觀感受，個人覺得，一步這個大驚喜，還存在進(jìn)步空間，主要有兩個方面。

第一，宏觀層面。一步作為新生事物，好比一顆新種子。種子破土而出時，是一顆嫩芽，而不是一棵大樹。新生的一步功能繁多，猶如一棵破土而出的大樹，一方面有違自然規(guī)律，另一面因?yàn)楣δ芊倍啵芏嘤脩魺o法一下子看懂，看不懂可能就不想用了。

第二，微觀層面。一步這棵新大樹，結(jié)了很多不同的果子，比如拖拽圖片到其他應(yīng)用、切換后臺應(yīng)用、展示最近圖片/文件等。這些果子，是用戶真正需要的嗎？這個是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個設(shè)計(jì)。通常而言，我們發(fā)到朋友圈的圖片都是精挑細(xì)選的，會占用一定量的時間，比如旅游或聚會結(jié)束后發(fā)的照片。一步解決的是效率問題。發(fā)朋友圈的時候，少點(diǎn)幾下這種效率問題，優(yōu)先級是比較靠后的，我們沒那么在乎。

還有拖拽圖片/文件這個交互動作，大家通常在電腦上用的比較多，在手機(jī)上是沒有這個習(xí)慣的，實(shí)際上應(yīng)用場景也少。在手機(jī)上，大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺應(yīng)用這塊，大家第一個想到的，一定是系統(tǒng)自帶的，已經(jīng)用慣了。而且喚起速度比一步快，點(diǎn)擊面積也比一步大。

總的來說，微觀層面上，比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后，總結(jié)一下。對于領(lǐng)先時代、引領(lǐng)潮流的交互設(shè)計(jì)，需要做到自然。

具體而言，就是，大驚喜是一種系統(tǒng)性的大功能，好比一棵大樹。這棵大樹，最好有一個從種子到果子的生長過程，這樣最自然，生命力也會最旺盛。

因?yàn)?，從破土而出的嫩芽階段，就可以通過用戶反饋和數(shù)據(jù)來檢驗(yàn)，這種嫩芽，是不是真的對用戶有價值。如果價值不大或沒有價值，還可以再調(diào)整。如果長成大樹結(jié)滿果子，再去調(diào)整，就很難了。

結(jié)語

交互設(shè)計(jì)小細(xì)節(jié)，如果有一定的趣味性或人文屬性，則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì)，如果最初感覺很酷，而且能引領(lǐng)潮流、代表未來，則是大驚喜。

始終保持孩童身上那種非功利的好奇心，用心觀察并思考生活中的小事；

將生活小事和交互設(shè)計(jì)巧妙融合起來；

以上兩點(diǎn)，可以幫我們做出小驚喜類的交互設(shè)計(jì)。

追求卓越，獨(dú)立思考，做最酷最好的交互設(shè)計(jì)；

酷是結(jié)果也好，是目標(biāo)也好，都不是最重要的。最重要的是，避免刻意和心切。醞釀大驚喜，猶如培養(yǎng)一個新生的孩子，需要投入極大耐心和精力，需要讓孩子自然成長。沒有家長會教半歲的孩子唱歌、把 3 歲的孩子送到高中念書。

再加上以上兩點(diǎn)，可以幫我們做出大驚喜類的交互設(shè)計(jì)。

最后，用愛因斯坦的一句話來共勉。

想象力比知識更重要。

文章來源：站酷    作者：SnowDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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)應(yīng)該在合適的時間內(nèi)通過適當(dāng)?shù)姆答?始終讓用戶了解正在發(fā)生的事情——尼爾森

自我理解：用戶無論在界面上做什么，都應(yīng)該及時告知他發(fā)生了什么或者進(jìn)展到什么程度。可以理解為人與人的溝通，界面需要及時告訴我們做了什么，現(xiàn)在是什么情況。

a.  這種告知應(yīng)該是及時的。

加載任務(wù)在互聯(lián)網(wǎng)中是最常見的，在加載過程中應(yīng)當(dāng)及時傳達(dá)加載過程，減少用戶的心理等待時間。在外部加載總時間無法優(yōu)化的時候，使用何種方式能有更好的用戶體驗(yàn)是設(shè)計(jì)時需要考慮的。

b.  應(yīng)當(dāng)告知用戶你在哪里

你的界面需要引導(dǎo)用戶來操作，即作為用戶應(yīng)該清楚的明白我在什么位置，我下一步可以去做什么操作。

現(xiàn)在app的很多設(shè)計(jì)基礎(chǔ)包括頂部的導(dǎo)航分欄和底部的tab bar都是為了告訴用戶他在哪里。

在做一些概念設(shè)計(jì)時候，如果單純是為了更好的視覺效果，就對這些基礎(chǔ)分欄進(jìn)行大刀闊斧的設(shè)計(jì)，最終導(dǎo)致了好看是好看，可是用戶都不知道這頁面是干什么的結(jié)果，很明顯是違背了最基本的交互原則 狀態(tài)可見原則。

c.  應(yīng)當(dāng)告知用戶事情怎么樣了

用戶在你的界面是要做什么事情，這是你在設(shè)計(jì)之前應(yīng)該思考的問題。

如何把用戶要做的這件事情更好的呈現(xiàn)給用戶，反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的，這包括過去發(fā)生的信息和即將發(fā)生的信息，也包括正向反饋和負(fù)向反饋。（這種操作是否成功了？這種操作進(jìn)展到什么程度了？如果這樣操作會有什么后果？點(diǎn)擊之后會達(dá)到什么頁面？這里是否可以點(diǎn)擊？）

很多概念性的設(shè)計(jì)很酷，從交互的角度上來看也是因?yàn)榻缑鎸π畔⑦M(jìn)行了很好的反饋，比如下面的設(shè)計(jì)就是對登山的信息進(jìn)行了很直觀的反饋。（來自設(shè)計(jì)設(shè)計(jì)師anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept）

自我理解：不同的人生活在不同的環(huán)境里面，不同的界面也有不同的外部環(huán)境。盡量保證界面在自己產(chǎn)品定義的風(fēng)格里面，如果有機(jī)會還原真實(shí)世界的狀態(tài)也很好。

a.  根據(jù)用戶制定產(chǎn)品語言

在制定產(chǎn)品語言時，要了解產(chǎn)品的用戶人群，使用相對應(yīng)的用戶群體所熟悉的文字語言 圖形語言  板式結(jié)構(gòu)  配色方法。要讓我們的用戶覺得這個產(chǎn)品很符合自己，而不是讓一個老大爺去滑滑梯的感覺。一般來講即便是同一產(chǎn)品，在國內(nèi)外的產(chǎn)品語言也是有所不同的。

a. 模擬真實(shí)環(huán)境

產(chǎn)品在一些展示上模仿現(xiàn)實(shí)世界的樣子，可以讓用戶快速接受，并感受到真實(shí)易懂。不僅僅局限于靜態(tài)外觀的模仿，還包括模擬真實(shí)物品的動態(tài)效果 聲音等 都能給用戶良好的使用體驗(yàn)

很多逼真的動效也是來自真實(shí)世界的映照。比如下面的可樂瓶的晃動就和真實(shí)世界很接近，讓用戶有很強(qiáng)的代入感。（作品來自設(shè)計(jì)師dannniel 原地址：https://dribbble.com/shots/6351526-Select-Drink-Animation）

自我理解：為了不讓用戶進(jìn)入一個錯誤的場景或者結(jié)果，對于一些特殊操作應(yīng)該給予撤回重做，讓用戶能夠充分的確定接下來的行為。

a.  返回到原始狀態(tài)

可以理解為悔棋，即已經(jīng)發(fā)生的行為返回到原始的頁面狀態(tài)，這個條件的設(shè)置也應(yīng)該有一些條件的限制，不能一直無限返回。

自我理解：君子常常言行一致，好的產(chǎn)品也是一樣。保持為一個統(tǒng)一的整體，包括產(chǎn)品內(nèi)部和產(chǎn)品外部，也包括線上和線下。

a.  與競品保持一致

很多人講現(xiàn)在的同一類產(chǎn)品的同質(zhì)化現(xiàn)象嚴(yán)重，其背后也是有一定原因的。相同或相似產(chǎn)品的用戶習(xí)慣保持一致，即意味著用戶需要更少的時間去學(xué)習(xí)甚至不需要學(xué)習(xí)。從產(chǎn)品設(shè)計(jì)上講，用戶使用越方便易用，產(chǎn)品設(shè)計(jì)的越成功。和相關(guān)主流競品做出比較大差異化設(shè)計(jì)時候，雖然擺脫了同質(zhì)化的問題，但是很多常規(guī)操作卻需要用戶重新學(xué)習(xí)，這樣帶來的后果很有可能就是用戶流失。所以，沒有充分的理由，請與競品保持一致。

b.  請建立一套完整的規(guī)范

一套完整的規(guī)范包括組件 色彩 間距  版塊結(jié)構(gòu) 等。規(guī)范可以讓你的產(chǎn)品一致性更強(qiáng)，你要讓用戶能夠?qū)δ愕漠a(chǎn)品產(chǎn)生一定的規(guī)范性印象，當(dāng)他看到一張頁面就能聯(lián)想到這是什么產(chǎn)品。

c.  請保持產(chǎn)品迭代的一致性

現(xiàn)在隨著互聯(lián)網(wǎng)市場的不斷穩(wěn)定，很多產(chǎn)品進(jìn)入了穩(wěn)定的迭代期。但是在迭代期也應(yīng)該以保持產(chǎn)品語言 用戶使用習(xí)慣的一致性為一大重要原則，版本的迭代也應(yīng)該逐步進(jìn)行，不要急功近利。盡量保持原有的設(shè)計(jì)元素一致性，新功能的創(chuàng)新也盡量不要損害原有用戶的使用體驗(yàn)。

自我理解：再發(fā)生錯誤之前采取措施來避免。

a. 引導(dǎo)用戶，不要讓錯誤出現(xiàn)。

很多app迭代更新之后會有操作指引，目的就是為了讓用戶學(xué)習(xí)，減少錯誤操作。很多引導(dǎo)頁也有相類似的功能。

b. 給予提示，尤其是用戶在做一些重要操作的時候

一些重要的敏感操作，產(chǎn)品通過二次詢問得到用戶的確認(rèn)，

自我理解：能讓你的軟件產(chǎn)品來記住，就不要讓你的用戶來記。盡可能的在設(shè)計(jì)產(chǎn)品的時候，不要讓用戶去記憶，把用戶當(dāng)傻瓜。

a 記住用戶的使用操作記錄

這個記錄不單單是在某一設(shè)備上，一般來講都是跨設(shè)備進(jìn)行同步。用戶在使用的時候不用來回調(diào)整，體驗(yàn)感是很強(qiáng)。

 

b  讓用戶選擇信息而不是填寫

填寫是一件成本極大的事情，很多用戶不愿意在這上面花費(fèi)時間。所以產(chǎn)品在設(shè)計(jì)的時候要盡量讓用戶去選，而不是去寫。

c 自動讀取

思考產(chǎn)品一些功能的使用場景，有沒有自動智能化的需要。即不用問候產(chǎn)品使用者，自動提供解決方案。注意，這里講的是提供方案，不是解決方案。提供大多數(shù)的解決方案，可以節(jié)省使用者的交互步驟或者瀏覽時間等，也是易用性高的表現(xiàn)。

d 提供適量的信息

其實(shí)另外一個交互定律法則（以后會講）其實(shí)提到了選擇的數(shù)量，移動端的選項(xiàng)一般不會超過五個，超過五個用戶的頭腦就會混亂。所以要考慮信息的擺放位置在哪里，一方面是需求決定的，另一方面也應(yīng)該控制每一個選項(xiàng)的數(shù)量，不要讓用戶感到焦慮。

自我理解：一般來講產(chǎn)品的用戶群體是多樣化，用戶的使用熟悉度也是有差別的。要照顧到絕大多數(shù)用戶群體的使用體驗(yàn)，所謂的高頻是每一個用戶群體比較常使用。

a.  設(shè)置快捷/重復(fù)入口

講產(chǎn)品常用或者主打的功能放在產(chǎn)品容易操作的位置或者重復(fù)出現(xiàn)，用戶可以高效的完成自己的需求。

一般來講用戶的使用頻率越高越要放在操作熱區(qū)和表面，反之亦然。

b.  用戶自定義常用功能

照顧到不同用戶對于某些功能的需求不同，對產(chǎn)品的部分功能進(jìn)行用戶自定義化操作，提高用戶使用的靈活性。

c.  給用戶默認(rèn)選項(xiàng)

將用戶經(jīng)常使用的選項(xiàng)作為默認(rèn)，減少用戶操作時間，達(dá)到靈活高效的目的。像淘寶都會設(shè)置默認(rèn)的收貨地址，每次下單不用每次都輸入，十分高效。（當(dāng)然也有翻車的時候）

自我理解：互聯(lián)網(wǎng)用戶閱讀產(chǎn)品的一個很重要的特點(diǎn)就是快。即不是來閱讀不是來看，而是掃一眼。所以要求頁面上的內(nèi)容能夠清晰可見，方便用戶快速捕捉到自己喜歡閱讀的信息，減少不必要的干擾，簡潔高效。

a.  清晰的板塊劃分

把頁面內(nèi)容的優(yōu)先級別進(jìn)行分級，清晰的板塊劃分將會引導(dǎo)用戶操作。還可以將頁面的主推內(nèi)容向用戶展示，避免用戶分不清重點(diǎn)。

b.  減少視覺噪音

注意頁面的主角是誰，在平面設(shè)計(jì)中也有相同的概念。不要讓背景或者裝飾嘩眾取寵，而影響主要信息的傳遞，視覺設(shè)計(jì)是來輔助業(yè)務(wù)表達(dá)的。如果核心需求沒有傳遞好，那就會單純地成為一件藝術(shù)品，而不是設(shè)計(jì)作品。所以在設(shè)計(jì)過程中，要權(quán)衡視覺點(diǎn)，減少不必要的噪音干擾。

c. 嚴(yán)格遵守設(shè)計(jì)的四大基本原則：親密  對比  重復(fù)   對齊

落實(shí)到界面上包括間距 字號 字重 版式節(jié)奏 。其實(shí)看到看到很多界面做的不精彩不優(yōu)美，就是基礎(chǔ)性的原則就沒有完全落實(shí)貫徹。這里就不舉例，基本所有的設(shè)計(jì)都要遵守的原則，很重要，很重要，很重要。

自我理解：要考慮到頁面可能發(fā)生意外，錯誤發(fā)生后要及時彌補(bǔ)。

a.  提供清晰地說明和解決方案

考慮到可能會達(dá)到的錯誤界面。在發(fā)生的錯誤結(jié)果上，使用明確清晰的語言告知錯誤的原因，并給予解決方案。

自我理解：要考慮到頁面可能發(fā)生意外，錯誤發(fā)生后要及時彌補(bǔ)。這一部分其實(shí)主要進(jìn)行一些說明，讓用戶操作方便，相當(dāng)于使用說明書。

a.  無需文檔

進(jìn)行新頁面的設(shè)計(jì)盡量直觀清晰，符合用戶習(xí)慣，無需引導(dǎo)即可使用。

b.  一次性提示

改版引導(dǎo)或者新功能引導(dǎo)給予一定的提示

c.  常駐性提示

對于產(chǎn)品的操作性功能或者操作必須注意到的問題，產(chǎn)品需要進(jìn)行一定說明

d.  幫助文檔

用來解釋一些常見問題。

文章來源：站酷    作者：花城丶

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

用戶體驗(yàn)，是用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。

 

解讀用戶體驗(yàn)，可以有很多視角。本文提供一個以人為本的視角：用戶體驗(yàn)四維度。具體如下。

 

HI X：Human Interface Experience，人與界面的交互體驗(yàn)。

HC X：Human Content Experience，人與內(nèi)容的交互體驗(yàn)。

HH X：Human Human Experience，人與人的交互體驗(yàn)。

HB X：Human Brand Experience，人與品牌的交互體驗(yàn)。

用戶體驗(yàn)四維度

 

 

01 四維度的概念

 

怎樣判斷一款產(chǎn)品有幾個維度？這就要從四維度的概念說起。

 

1. HI X（人與界面的交互體驗(yàn)）

 

HI X 是指用戶在瀏覽、閱讀、操作界面過程中產(chǎn)生的主觀感受。

 

HI X 既受信息架構(gòu)、交互設(shè)計(jì)和UI設(shè)計(jì)的影響，也受根需求和功能架構(gòu)的影響。主要依托手機(jī)和電腦的互聯(lián)網(wǎng)產(chǎn)品，天然存在界面。所以，HI X 屬于基礎(chǔ)屬性，所有產(chǎn)品都有。

 

2. HC X（人與內(nèi)容的交互體驗(yàn)）

 

HC X 是指用戶在消費(fèi)內(nèi)容時，內(nèi)容本身帶給用戶的主觀感受。

 

這里的內(nèi)容，既包括衣服、鞋子等實(shí)體商品，也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品，以及公眾號、Instagram、抖音等 UGC 產(chǎn)品，都具備 HC X 屬性。

 

3. HH X（人與人的交互體驗(yàn)）

 

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時產(chǎn)生的主觀感受，或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

 

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間，是指當(dāng)用戶扎堆或溝通交流時，交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間，是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時，產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

 

關(guān)于第一層含義，不管是更強(qiáng)調(diào)社區(qū)屬性的產(chǎn)品，比如天涯社區(qū)、豆瓣小組、百度貼吧，還是更強(qiáng)調(diào)內(nèi)容屬性的產(chǎn)品，比如公眾號、微博、小紅書的筆記，都具備 HH X 屬性。

 

關(guān)于第二層含義，常見的 HH X 由客服人員提供。如果是電商產(chǎn)品，提供人員還包括快遞員和售后人員等。

 

4. HB X（人與品牌的交互體驗(yàn)）

 

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放?，或使用品牌的產(chǎn)品、體驗(yàn)品牌的服務(wù)時，品牌帶給用戶的主觀感受。

 

只要一款產(chǎn)品做成了品牌，它就有 HB X 屬性。

 

HB X 會直接影響到我們是否信任、喜歡一個品牌，以及是否會使用它的產(chǎn)品和服務(wù)。所以，我們對 HB X 往往會有一個抓重點(diǎn)的綜合評價。就像一個外向活潑的女生，雖然在外向程度方面和一個內(nèi)向安靜的男生不一致，但雙方也可能會選擇在一起，因?yàn)閮?nèi)向、外向并非雙方關(guān)注的重點(diǎn)。

 

因?yàn)?HB X 牽涉到對品牌的綜合評價，所以就像工作都有一段試用期、戀愛都有一段了解期一樣，HB X 的形成往往也需要較長時間，通常至少要 3~5 年。

 

 

02 四維度的價值

 

每一個維度，各有什么價值？

 

1. HI X（人與界面的交互體驗(yàn)）

 

作為基礎(chǔ)屬性，HI X 的價值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品，比如視頻會議產(chǎn)品 Zoom，那于這款產(chǎn)品而言，HI X 就是一切，這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

 

如果是一款同時具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品，比如 B 站、快手這些視頻類產(chǎn)品，那此時的 HI X 就會扮演一個類似交通出行（基礎(chǔ)設(shè)施）的角色。如果 HI X 比較差，這個“出行”過程就會像出去玩時的塞車一樣，讓人難受；如果 HI X 很優(yōu)秀，這個“出行”過程就會像準(zhǔn)點(diǎn)的高鐵、飛機(jī)一樣，又快又爽。

 

2. HC X（人與內(nèi)容的交互體驗(yàn)）

 

HC X 主要從內(nèi)容層面影響用戶滿意度。

 

如果 HC X 比較好，用戶消費(fèi)時的決策時間就會被大大縮減，同時用戶滿意度也會比較高。比如淘寶上就有一些原創(chuàng)設(shè)計(jì)、質(zhì)量不錯、價格不貴的精品小店，很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫天貓旗艦店這些質(zhì)量不錯、設(shè)計(jì)不錯、價格適中的店鋪買 東西時，也會很快很省心。

 

以上說的是電商產(chǎn)品，對于 UGC 類的內(nèi)容產(chǎn)品，也是類似的道理。比如站酷上的首頁推薦和編輯推薦，相對而言，HC X 比較不錯，所以看這些內(nèi)容的用戶也會比較多。

 

3. HH X（人與人的交互體驗(yàn)）

 

HH X 是用戶情緒的最大影響因素，在情感方面對用戶具有最大吸引力。物以類聚，人以群分。HH X 良好的產(chǎn)品，會像一場談笑風(fēng)生、其樂融融的聚會，吸引用戶去扎堆。

 

良好的 HH X 往往意味著良好的氛圍，它不僅能帶給我們諸如輕松、愉快等積極情緒，還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果，就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好，具體而言就是彈幕氛圍比較歡樂友好，這樣的氛圍帶給用戶的感覺是比較好的，用戶也喜歡在 B 站就著彈幕看視頻。

 

4. HB X（人與品牌的交互體驗(yàn)）

 

HB X 事關(guān)品牌能不能以正面形象住進(jìn)用戶心里。

良好的 HB X，往往意味著良好的品牌美譽(yù)度和忠誠度。HB X 良好的產(chǎn)品，就像你信任和喜歡的男/女朋友一樣，他/她會在你心里占據(jù)一定的分量和地位，讓你樂意介紹給家人和朋友認(rèn)識。比如蘋果的 Mac，就有很高的品牌美譽(yù)度和忠誠度，用戶也很樂意把 Mac 推薦給身邊的朋友。

 

 

03 四維度的關(guān)系

 

四維度之間存在怎樣的關(guān)系?

 

1. HI X 是另外三個維度的基礎(chǔ)

 

HI X 作為基本維度，相當(dāng)于“水之源，木之本”。如果把用戶體驗(yàn)四維度比作一個金字塔的話，塔底的基石一定是 HI X，塔尖則是 HB X。

 

2. HC X 通常是 HH X 的基礎(chǔ)

 

HH X 的產(chǎn)生，通常離不開 HC X。也就是說，通常得有一個合適的“內(nèi)容”或“主題”，才能把人聚攏過來。比如結(jié)婚的時候，你可以邀請到很多親朋好友來參加婚禮，但在平時，你很難邀請到這么多人。我們在 B 站看視頻的時候，彈幕通常比較歡樂友好，氛圍不錯，但如果沒有這些視頻，也就不會有這些彈幕，以及不錯的社區(qū)氛圍。

 

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

 

HC X、HH X 和 HI X 一樣，都可以成就 HB X。

 

以早期 Keep 為例，剛開始只有課程這個功能，也就是說只有 HI X 和 HC X 這兩個屬性。其中，HI X 還可以，HC X 比較優(yōu)秀。在此基礎(chǔ)上，慢慢發(fā)展出了社區(qū)功能（HH X 屬性），而且做得不錯。再往后，有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下，Keep 有了不錯的品牌美譽(yù)度和忠誠度。也就是說，HC X、HH X 和品牌精神等因素，一起成就了良好的 HB X。

 

4. HB X 也可以僅有 HI X 這一個基礎(chǔ)

 

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個屬性，而是僅有 HI X 這一個屬性。單憑一個良好的 HI X，也可以成就良好的 HB X。

 

比如 Zoom，作為一款開視頻會議的工具應(yīng)用，它最初只有 HI X 這一個屬性。但是因?yàn)楹芎糜?，HI X 很優(yōu)秀，所以如今的 Zoom 即便沒有內(nèi)容（HC X）和社區(qū)（HH X）屬性，依然成了一個在全球都很受歡迎的品牌，擁有了不錯的 HB X。

 

總的來說，在四維度的金字塔里面，它們的關(guān)系如下圖所示。

用戶體驗(yàn)四維度的金字塔關(guān)系

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

背景

在 B 端設(shè)計(jì)領(lǐng)域中，不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開發(fā)，還是外部產(chǎn)品、設(shè)計(jì)師等，總能聽到關(guān)于界面「屏效」方面的訴求或吐槽。

「屏效」狹義理解是「界面過度留白」；廣義理解，「屏效」源自諧音“坪效”，指的是每坪的面積可以產(chǎn)出多少營業(yè)額(營業(yè)額/專柜所占總坪數(shù)）。而「屏效」對于界面而言可以指屏幕單位時間、單位面積內(nèi)的信息可以帶來多少商業(yè)效益/效率提升。

為了探索在 B 端產(chǎn)品中用戶為何對「界面過度留白」或「屏效」問題如此敏感，于是我們展開了「屏效」專題的設(shè)計(jì)探索與實(shí)踐?！钙列А箤ｎ}探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開，將實(shí)踐過程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊，同步將部分功能進(jìn)行工程化，確保可以開箱即用。

探索階段-為誰在何時何地設(shè)計(jì)

用戶聲音｜不同的故事相似的訴求

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺產(chǎn)品滿意度調(diào)研》問卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%；認(rèn)為提升屏效對體驗(yàn)有提升的終端用戶占 50.6%。

外部知乎上針對《Ant Design 4.0 設(shè)計(jì)價值觀》的 13 條反饋里，其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。

通過了解不同用戶和產(chǎn)品類型發(fā)現(xiàn)，不同的用戶在工作場景的產(chǎn)品使用中有著相似的特征：

案例收集｜發(fā)現(xiàn)問題，大膽假設(shè)

縱觀 B 端產(chǎn)品界面，發(fā)現(xiàn)普遍問題和收錄在解決屏效問題上實(shí)踐得比較好的案例，為了逐步突破問題，選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn)，通過線上跨產(chǎn)品多端地毯式的體驗(yàn)走查，發(fā)現(xiàn)表格三個層次的問題：

視覺、交互層在無需理解業(yè)務(wù)場景和用戶目標(biāo)的情況下，都較容易發(fā)現(xiàn)，屬基礎(chǔ)問題，但很多「過度留白」的屏效問題往往是信息被組織方式的差異導(dǎo)致的「過度留白」。

綜上我們提出假設(shè)：為提高屏效，可從視覺、交互、信息三個層次解決

視覺層為提高信息查閱速度，可以通過提高信息密度；交互層為提高操作速度，可以縮短當(dāng)前手勢到目標(biāo)之間的距離；信息層為提高信息被理解的速度，可以通過重組織等方式。

基于假設(shè)，我們進(jìn)行了進(jìn)一步的桌面研究，查閱論文等書籍，尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。

競品分析｜尋找實(shí)踐證據(jù)，謹(jǐn)慎驗(yàn)證

我們知道視覺上界面留白過多（過疏會增加滾屏成本，過密因易串行而影響閱讀效率），以表格「行高」為例，探索各表格在字號、字高和行高的關(guān)系，因?yàn)椴煌煮w的同字號實(shí)際像素高度會有差異，因此選擇的是字高（即文字垂直高度的視覺大小）而非字號或字行高，決定留白的兩個重要因子是字高和表格行高，以次推演，界面元素和元素間距的留白關(guān)系，探究在視覺層怎樣的留白率能保證甚至提升屏效。

以數(shù)據(jù)產(chǎn)品中的表格為例，通過直接和間接競對的方式，分別從數(shù)據(jù)的查閱（視覺）、分析（交互）維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對，來看看優(yōu)秀產(chǎn)品是如何解決屏效問題。

直接競對：內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競對：同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格；間接競對：谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表（一維表格）

通過競品分析可以發(fā)現(xiàn)，數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低（信息密度高），尤其是金山和微軟的電子表格，其次是同類面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù)，而谷歌郵箱等工作臺常用的常規(guī)列表緊湊版本中，留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。

緊湊版的使用場景也常常是面對數(shù)據(jù)量巨大的信息呈現(xiàn)，通過切換緊湊主題，提升信息的快速瀏覽，而這也非常適合數(shù)據(jù)分析場景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大，而在實(shí)際案例實(shí)踐中，也已經(jīng)將表格行高優(yōu)化至 30px，克制的使用留白。

除此外，競品其他層次的設(shè)計(jì)也做了比對，總結(jié)來看整體設(shè)計(jì)做法：高密度、少屏數(shù)、少留白等。

文字陷阱：中英文字高不等于字號

舉個容易犯錯的競品參考是，谷歌在緊湊版主題下字號 12px，列表行高是 28px，但在 AntD Table 中同樣的 12px 和列表行高 28px 就會發(fā)現(xiàn)非常擁擠，缺乏呼吸感。

原因在于谷歌的 12px 是英文字體，實(shí)際字高只有 10px，而 AntD Table 的語境是中文字偏多，實(shí)際字高有 12px，所以留白的差異在于一個是 18px（28-10），一個是 16px（28-12），這也是為什么決定決定留白的兩個重要因子是「字高」和表格行高，而非「字號」和表格行高，進(jìn)一步推演，決定界面留白的是「元素視覺高度」和「元素間距」。

論文查閱｜尋找理論證據(jù)，謹(jǐn)慎驗(yàn)證

研究表明，低密度認(rèn)知負(fù)荷低，但高密度任務(wù)完成率高，用戶更喜好

參考資料：論文《基于眼動的網(wǎng)頁對稱性和復(fù)雜度對用戶認(rèn)知的影響的研究》

對于信息，用戶需要需要閱讀（視覺），思考和理解（認(rèn)知），需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字（行動），在人機(jī)工程學(xué)中，統(tǒng)稱為負(fù)荷。即認(rèn)知（記憶）負(fù)荷、視覺負(fù)荷、動作負(fù)荷，即分別對應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個層級，信息/視覺/交互。而負(fù)荷所花費(fèi)資源從多到少依次為：認(rèn)知 > 視覺 > 行動。

認(rèn)知負(fù)荷，舉個例子，看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音，雖然很多（信息密度小，輸出效率低），但可以一直刷下去并且刷很久；而看一門 C4D 教學(xué)視頻，即使就短短十來分鐘（信息密度大，輸出效率高），但是卻要看上半天。因?yàn)樗⒍桃曨l時，你的輸入效率遠(yuǎn)高于作者的輸出效率，而看一門 C4D 教學(xué)視頻時，你的輸入效率遠(yuǎn)低于作者的輸出效率?？墒?，輸出效率是客觀的，輸入效率是主觀的。如果輸出效率很高，你可以通過提高自己的輸入效率（比如讓自己成為 C4D 專家）來跟上作者，從而變強(qiáng)；否則輸出效率很低（信息質(zhì)量低），你的輸入效率很高（很專業(yè)），信息于你而言都是無效的。

假設(shè)負(fù)荷總量不變的情況下，那么以上三類場景界面需要對用戶負(fù)擔(dān)分配大致如下，官網(wǎng)品宣類需要低認(rèn)知成本，低視覺負(fù)擔(dān)，視覺要求高，用戶才會被吸引過來閱讀，甚至酷炫的交互更能增加互動體驗(yàn)而帶來的趣味感，比如蘋果官網(wǎng)，信息量極少、圖版率高帶來極具藝術(shù)的視覺體驗(yàn)、進(jìn)而吸引用戶愿意跟隨屏幕滾動漸進(jìn)式接受信息，而 B 端應(yīng)用因?yàn)槭菍I(yè)使用，首先認(rèn)知方面隨著員工的專業(yè)度提高而降低，因此可以通過提高視覺負(fù)擔(dān)，來降低行動負(fù)擔(dān)，進(jìn)而減少操作用時，當(dāng)然最佳情況是三個維度能整體降低負(fù)擔(dān)，讓總負(fù)擔(dān)降低，就需要更多設(shè)計(jì)巧思了。

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中，設(shè)計(jì)師常用的 Top 3 做法為：【信息層】隱藏不必要信息、【視覺層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。

實(shí)踐階段-如何設(shè)計(jì)

通過以上的探索，我們可以確定的是，B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中，提高屏效可從視覺、交互、信息三個層次進(jìn)行，視覺層-高密度，即提高屏幕信息密度；交互層-低跳轉(zhuǎn)，通過減少頁面跳轉(zhuǎn)、手勢與常用操作的距離等；信息層-有效性，通過重組織或輔助信息幫助用戶理解，甚至提供幫助手冊等以提高用戶專業(yè)能力。

基于以上的總結(jié)，對產(chǎn)品進(jìn)行優(yōu)化。下面以一個簡單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營同學(xué)想對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，尋找運(yùn)營機(jī)會點(diǎn)。

如下表格經(jīng)過高屏效策略優(yōu)化前后對比圖，優(yōu)化前相同維度下不同人群數(shù)量的對比需要視線來回跳動比對，而優(yōu)化后的表格內(nèi)容，更符合用戶看差異場景下分析目的數(shù)據(jù)查閱，視線鎖定相同維度，即可快速比對數(shù)值大小。

下面以視覺、交互、信息三個層次解剖設(shè)計(jì)過程背后的思考。

視覺層｜高密度-克制的留白

眼動理論：研究表明，人眼最小可視視角 0.3 度，水平最大眼動舒適轉(zhuǎn)動區(qū) 30度，垂直最大眼動舒適轉(zhuǎn)動區(qū) 55度?？傻贸鋈搜圩钚∽R別范圍 12px，水平視野舒適眼動寬 1200px，垂直視野舒適眼動高 2200px。參考資料：論文《基于眼動交互的用戶界面設(shè)計(jì)與研究》

如圖，縮小表格行高的同時，目標(biāo)信息之間的眼動距離隨之縮短，在眼動舒適區(qū)內(nèi)看到更多信息，便于信息的高效獲取。

交互層｜低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ)：菲茨定律是用來預(yù)測從任意一點(diǎn)到目標(biāo)位置所需時間的數(shù)學(xué)模型，它由保羅·菲茨在1954年首先提出。這個模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對距離、目標(biāo)的大小、移動的最短時間。三者之間關(guān)系公式為：T=a+blog2(D/W+1)，W為其中目標(biāo)的大??；D為到目標(biāo)的距離；T為移動到目標(biāo)所用最短時間。參考資料：菲茲定律

表格單元格借助交互狀態(tài)，增加懸浮出現(xiàn)的信息組件，前置顯示目標(biāo)單元格明細(xì)信息，同時通過交互出現(xiàn)的指示器輔助行列信息的獲取，高頻操作考慮手勢位置放置，縮短與操作目標(biāo)的距離，以提高整體操作效率。

信息層｜有效性-信息重組織

理論基礎(chǔ)：交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料：《簡約至上》

用戶為了對比 A、B 兩不同人群在相同維度（白領(lǐng)-有信用卡）下的人數(shù)差異，但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動條來查看，根據(jù)用戶目標(biāo)，將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列（即將要對比的人群放置列頭），即可快速查閱，減少眼跳距離。

結(jié)語

設(shè)計(jì)趨勢中常見的大字體大留白界面，但在 B 端場景中，面對緊張的工作節(jié)奏，時間和注意力變得尤為可貴，相對而言，基于復(fù)雜度守恒定律， B 端信息量大且高頻訪問的產(chǎn)品中，「用得快」要比「看得美」更重要，「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時間」，少一次點(diǎn)擊，少一次跳轉(zhuǎn)，少一份等待，就多一份時間和效率。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)

用戶體驗(yàn)地圖是什么 | WHAT

用戶體驗(yàn)地圖（Experience Maps）旨在通過描述用戶歷程和故事，使設(shè)計(jì)師、產(chǎn)品經(jīng)理等項(xiàng)目成員更好地了解用戶和洞察訴求。所以對于用戶體驗(yàn)地圖，我們可以將其定義為以下內(nèi)容：

- 是一種描述用戶故事的可視化工具；

- 是一種幫助設(shè)計(jì)師、產(chǎn)品經(jīng)理等更好地了解用戶的共創(chuàng)工具；

- 從用戶視角出發(fā)，直觀展現(xiàn)產(chǎn)品流程各個觸點(diǎn)上用戶的痛點(diǎn)、需求和情緒；

- 用戶體驗(yàn)地圖繪制的形式并不唯一，可以根據(jù)項(xiàng)目需求，增減內(nèi)容。

通常在接觸到需求之后，設(shè)計(jì)師就可以開始梳理現(xiàn)有流程、使用用戶體驗(yàn)地圖了。要注意的是：

- 需要梳理的功能不分大小，都可以使用；

- 做之前，務(wù)必要先調(diào)研和訪談用戶使用產(chǎn)品的情況。

建議時長：

- 重要項(xiàng)目：120～180 分鐘- 日常項(xiàng)目：60～120分鐘

參與者：

- 必選：設(shè)計(jì)師、產(chǎn)品- 可選：研發(fā)、市場、其他

工具：

- 電腦或白板+便利貼

 

為什么需要用戶體驗(yàn)地圖 | WHY

需要發(fā)現(xiàn)和拆解產(chǎn)品現(xiàn)有問題，梳理用戶流程時使用用戶體驗(yàn)地圖，可以在聚焦階段，整合用戶訴求和業(yè)務(wù)訴求，共創(chuàng)機(jī)會點(diǎn)，找出解決方案，通常在以下場景中使用：

- 新產(chǎn)品設(shè)計(jì)：需要對需求進(jìn)行拆解和優(yōu)先級排序；

- 產(chǎn)品優(yōu)化：發(fā)現(xiàn)產(chǎn)品現(xiàn)有問題，洞察設(shè)計(jì)發(fā)力點(diǎn)。

 

由此可見，在設(shè)計(jì)過程中使用用戶體驗(yàn)地圖作為設(shè)計(jì)工具，有以下益處：

- 更好的以用戶視角來看產(chǎn)品的體驗(yàn)；

- 通過共創(chuàng)，項(xiàng)目成員達(dá)成共識；

- 確認(rèn)觸點(diǎn)，作為我們的設(shè)計(jì)方向；

- 通過用戶痛點(diǎn)找到機(jī)會點(diǎn)；

- 幫助梳理產(chǎn)品流程。

△ 用戶體驗(yàn)地圖共創(chuàng)現(xiàn)場

 

用戶體驗(yàn)地圖操作流程 | HOW

我們通常會將流程分成4 個階段：定義原則和目的 —— 梳理階段流程 —— 洞察痛點(diǎn) —— 尋找機(jī)會點(diǎn)。

1. 定義原則和目的

首先要了解我們做用戶體驗(yàn)地圖的原因和目的，包括用戶是誰、解決什么問題、用戶的目標(biāo)、產(chǎn)品的整體目標(biāo)、限定條件等等，對用戶群體、整個項(xiàng)目背景和共創(chuàng)任務(wù)目標(biāo)有清晰、全面的認(rèn)知。

2. 梳理階段流程 

首先是劃分階段，將用戶的行為拆分成幾個大的階段，在整理時要注意：

- 在整個產(chǎn)品的范圍之內(nèi)盡量把故事、流程講完整；- 以廣度優(yōu)先，而非深度，不要過早的沉浸到細(xì)節(jié)中。

接下來我們要將主要階段拆分成單個任務(wù)，并梳理具體的任務(wù)和觸點(diǎn)，羅列出過程中的任務(wù)和各個觸點(diǎn)，要做到事無巨細(xì)。

然后根據(jù)任務(wù)和觸點(diǎn)，整理對應(yīng)的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進(jìn)行梳理，客觀的描述事實(shí)，切勿自說自話或是將自己的情緒代入其中，也不要急于猜想與分析。

3. 洞察痛點(diǎn)

這一步需要我們匯總用戶的痛點(diǎn)，并將痛點(diǎn)分級，洞察用戶痛點(diǎn)背后的真實(shí)訴求。這個過程中可以先讓大家在一定時間內(nèi)寫出自己的想法，每一條寫在一張卡片上，做到先相互不干擾，之后再統(tǒng)一整理和總結(jié)。

4. 尋找機(jī)會點(diǎn)

通過上述總結(jié)，思考新的機(jī)會點(diǎn)、解決方案、優(yōu)化整體流程，并對新流程下的功能做優(yōu)先級排序。可以通過準(zhǔn)備一些問題來刺激大家腦爆出更多的內(nèi)容，比如：用戶還有其他選擇么？怎么做用戶才能更爽？其他用戶來到這里該怎么處理？等等。在這個階段需要：

- 對內(nèi)容進(jìn)行對標(biāo)、討論，把公認(rèn)的點(diǎn)保留下來，無用的點(diǎn)剔除出局；- 根據(jù)實(shí)際情況和項(xiàng)目成本、進(jìn)度等條件，對新流程下的功能做優(yōu)先級排序。

 

如何為過程提效 ｜TIPS

在實(shí)際的工作過程中，因?yàn)轫?xiàng)目時間都非常緊張，繪制這樣一個完整的用戶體驗(yàn)地圖比較耗費(fèi)時間，所以推薦大家?guī)讉€提效的技巧，既可以減少時間浪費(fèi)，也可以提高共創(chuàng)質(zhì)量：

1. 事前

充分做好用戶調(diào)研，提前準(zhǔn)備好用戶地圖模板，可以在開始之前的一到兩天發(fā)給參會人員，讓所有人對產(chǎn)品有一個整體梳理和思考，有助于提高大家的產(chǎn)出質(zhì)量。

2. 事中

如果是優(yōu)化的產(chǎn)品，可以將設(shè)計(jì)稿 demo 或者線上產(chǎn)品截圖打印出來，這樣可以增強(qiáng)大家的代入感，有利于想法的輸出。

3. 事后

整理電子版體驗(yàn)地圖，需要跟隨產(chǎn)品的演進(jìn)進(jìn)行更新，上傳到項(xiàng)目共享空間隨時查看。

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.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ù)