晨屹

為什么會有設(shè)計(jì)師的存在，人們通常認(rèn)為美觀的設(shè)計(jì)更為實(shí)用。

為什么要化妝打造氛圍感美女，因?yàn)樽屇愀泄儆鋹偅瑫r掩蓋缺陷，忽略她身上的不足。

美即適用效應(yīng)你或許聽說過，可能不知道在哪里聽說的，這篇文章我會和你一起探索美即適用效應(yīng)以及對產(chǎn)品的影響。

一、背景

為什么會說到這個話題，是因?yàn)榍岸螘r間在公司內(nèi)部組織了體驗(yàn)分享會，會后固定的吐槽時間，一產(chǎn)品部門的產(chǎn)品經(jīng)理指責(zé)設(shè)計(jì)部門的界面效果不好看，他提到了美即適用原則。我還是想自己應(yīng)該深入了解一下這個效應(yīng)，一方面擴(kuò)充自己的知識庫，另一方面也想積累更多案例。

二、理論介紹

“美即適用效應(yīng)”法則是指一種心理感應(yīng)現(xiàn)象：人們認(rèn)為美好的設(shè)計(jì)更好用。直到現(xiàn)在我們大多數(shù)人也都會認(rèn)為長得好看就是有優(yōu)勢。

許多實(shí)驗(yàn)證實(shí)了這個效應(yīng)，而且設(shè)計(jì)的認(rèn)可度、使用情況和性能都受到了這個效應(yīng)的深刻影響。

美即適用效應(yīng)最早是在人機(jī)交互領(lǐng)域于1995年進(jìn)行研究。

日立設(shè)計(jì)中心的研究員Masaaki Kurosu和Kaori Kashimura測試了26種ATM的UI，要求252名研究參與者對每種設(shè)計(jì)的易用性進(jìn)行評分使用以及美學(xué)吸引力。

他們發(fā)現(xiàn)，參與者的審美吸引力等級與感知的易用性之間的關(guān)聯(lián)要強(qiáng)于參與者的審美吸引力等級與實(shí)際易用性之間的關(guān)聯(lián)。

Kurosu和Kashimura得出的結(jié)論是，即使嘗試評估系統(tǒng)的基本功能，用戶也會受到任何給定界面的美觀的強(qiáng)烈影響。

表觀可?性的決定因素對真實(shí)可?用性的影響系數(shù)?大多在0.000-0.310 之間，而界?美觀度這個數(shù)據(jù)達(dá)到了了0.589。

• 美觀的設(shè)計(jì)會在人們的大腦中產(chǎn)生積極的反響，并使他們相信該設(shè)計(jì)實(shí)際上會更好。
• 當(dāng)產(chǎn)品或服務(wù)的設(shè)計(jì)在美學(xué)上令人愉悅時，人們會容忍忽略較小的可用性問題。
• 外觀美觀的設(shè)計(jì)可以掩蓋可用性問題，并防止在可用性測試過程中發(fā)現(xiàn)問題。

三、優(yōu)秀的產(chǎn)品案例

簡潔的瀏覽器產(chǎn)品：

過去的手機(jī)瀏覽器繼承了pc端的瀏覽器特點(diǎn)，大而全+密密麻麻的各種入口，再加上各種廣告，簡直是噩夢。但在當(dāng)時的年代，除了Safari之外，所有手機(jī)的瀏覽器不管是自帶的還是第三方的都是這樣的主頁，毫無美感和可用性而言。

最開始打破規(guī)則是夸克瀏覽器，在2016年推出的夸克瀏覽器，進(jìn)入首頁之后非常簡潔，體現(xiàn)了簡潔之美，跟其他繁復(fù)的瀏覽器主頁相比是一股清新脫俗。靠著簡潔界面風(fēng)格的產(chǎn)品力，收獲了穩(wěn)定的用戶量。這就是美即適用的最佳案例。

四、B端web產(chǎn)品如何運(yùn)用美即適用效應(yīng)

B端產(chǎn)品的視覺設(shè)計(jì)最常見的設(shè)計(jì)優(yōu)化點(diǎn)是視覺降噪、工作臺設(shè)計(jì)、表格表單設(shè)計(jì)。做好了這幾部分的內(nèi)容模塊設(shè)計(jì)，B端界面的視覺效果就能提升一個檔次了，可以讓我們的產(chǎn)品在一眾B端產(chǎn)品中脫穎而出美即適用。

針對功能龐大、邏輯復(fù)雜的產(chǎn)品，我們要怎么去解決當(dāng)前存在的問題？改動影響面是否超出預(yù)期？通常采用三步走的方法，即問題收集、整理分類、系統(tǒng)分析的方法。通常整理出來的問題分為交互與視覺兩大塊內(nèi)容，本次重點(diǎn)介紹視覺內(nèi)容。

B端常見的視覺問題主要是設(shè)計(jì)風(fēng)格陳舊、頁面信息層級不明確、視覺元素規(guī)范不統(tǒng)一等。針對設(shè)計(jì)風(fēng)格陳舊和視覺元素規(guī)范不統(tǒng)一的問題需要具體產(chǎn)品具體分析，對于頁面信息層級不明確的問題則可以通過視覺降噪的方式優(yōu)化。

1. 視覺降噪

視覺降噪的一個大的核心點(diǎn)就是優(yōu)化信息展示。

（1）減少色彩

B端界面內(nèi)容和操作相對較多，顏色過于豐富的界面會對使用者造成視覺精神壓力，可以通過減少界面中色彩的方式進(jìn)行視覺降噪。

在1.0版本中存在視覺混亂、視覺層級不清晰等情況，用戶在理解層面上存在一定的負(fù)擔(dān)；其中列表視圖是用戶使用場景最多的一個場景視圖。我們通過減少色彩的設(shè)計(jì)手法對界面進(jìn)行了視覺降噪。

（2）優(yōu)化信息展示

在1.0版本中，看板視圖的視覺表達(dá)并不是很清晰，內(nèi)容過多，整體視覺信息層級較弱，容易帶給用戶雜亂的視覺體驗(yàn)。

在2.0改版中我們將字段進(jìn)行了優(yōu)先級分類，字段名稱和內(nèi)容則按照上下結(jié)構(gòu)的方式進(jìn)行展示，從一定程度上為用戶做了視覺排序。

2. 工作臺優(yōu)化

工作臺通常都是B端產(chǎn)品的門戶頁面，是流量最大、涉及用戶角色最多的模塊，并且頁面功能高度聚合，可以說是B端產(chǎn)品里面最重要的頁面。在設(shè)計(jì)上，工作臺對整個系統(tǒng)的角色就是一個能幫助用戶快速掌握工作進(jìn)展、進(jìn)入工作狀態(tài)的導(dǎo)航頁面。工作臺設(shè)計(jì)的好壞直接影響到使用者對產(chǎn)品的第一印象。

（1）工作臺常見功能

a. 統(tǒng)計(jì)業(yè)務(wù)數(shù)據(jù)

用戶根據(jù)業(yè)務(wù)數(shù)據(jù)查看工作進(jìn)度。不同的用戶身份在使用目標(biāo)上有所不同，比如管理者角色，會根據(jù)業(yè)務(wù)數(shù)據(jù)調(diào)整戰(zhàn)略決策、安排下屬的工作內(nèi)容；執(zhí)行者會根據(jù)自己的完成進(jìn)度來安排近期的工作內(nèi)容，識別工作優(yōu)先級。

b. 聚合高頻常用功能

常用功能又稱快捷功能，是指使用者工作中最常用的幾個功能選項(xiàng)。

c. 查看待辦事項(xiàng)

待辦事項(xiàng)跟業(yè)務(wù)數(shù)據(jù)都有查看工作進(jìn)度的作用，兩者的不同點(diǎn)在于業(yè)務(wù)數(shù)據(jù)是以業(yè)務(wù)指標(biāo)為基準(zhǔn)明確工作進(jìn)度，待辦事項(xiàng)是以數(shù)量這個維度來分析和查看。

d. 明晰細(xì)分業(yè)務(wù)

B端產(chǎn)品的業(yè)務(wù)屬性會在工作臺有所體現(xiàn)。比如：匯易聯(lián)，它的產(chǎn)品定位在于幫助企業(yè)全流程管控各類費(fèi)用支出。它們出現(xiàn)在工作臺上，除了幫助用戶快速開展工作，減少細(xì)鉆外，還能夠幫助用戶識別產(chǎn)品的業(yè)務(wù)屬性。

e. 高效獲取業(yè)務(wù)信息

為了方便使用者快速查看，有部分內(nèi)容需要展示在工作臺。比如：匯易聯(lián)的單據(jù)動態(tài)功能，就是在幫助用戶快速查看自己提交的單據(jù)最新動態(tài)，無需點(diǎn)開其他頁面，在工作臺就能快速讀取。

（2）工作臺基本構(gòu)成

• 業(yè)務(wù)數(shù)據(jù)&工作進(jìn)度：一般以數(shù)據(jù)可視化的形式出現(xiàn)，用于告知用戶工作進(jìn)度
• 待辦事項(xiàng)：告知用戶當(dāng)前、當(dāng)周的任務(wù)排期
• 快捷功能&常用功能：快速開展工作或快速跳轉(zhuǎn)至常用頁面，無需在導(dǎo)航上一步步下鉆，節(jié)省時間，提高效率。

消息通知：一般包含系統(tǒng)消息、業(yè)務(wù)進(jìn)展、功能信息三類。系統(tǒng)信息包含功能迭代和產(chǎn)品更新；業(yè)務(wù)最新進(jìn)展包含最新業(yè)務(wù)數(shù)據(jù)更新；功能信息：包含業(yè)務(wù)流轉(zhuǎn)進(jìn)度和上下級提交審核和被審核的進(jìn)展?？筛鶕?jù)重要程度選擇是否展示在工作臺。

個人信息：當(dāng)身份識別為核心功能時時出現(xiàn)，比如使用不同角色的賬號登陸天貓店鋪工作臺，對應(yīng)的功能是不同的，有時同一個賬戶兼職兩種身份，為了識別身份需要展示個人信息；但是在強(qiáng)業(yè)務(wù)屬性工作臺（理賠與續(xù)簽）時無需出現(xiàn)，因?yàn)樵谫~號登錄時就已經(jīng)識別了賬號權(quán)限，展示具體業(yè)務(wù)的內(nèi)容。所以還需具體情況具體分析。

新手引導(dǎo)&幫助中心：當(dāng)用戶首次登錄時，新手引導(dǎo)負(fù)責(zé)向用戶介紹業(yè)務(wù)模塊及對應(yīng)功能，用戶可以【一鍵跳過】，但當(dāng)用戶需要的時候，必須有一個【入口】方便快速找到。當(dāng)用戶從新手轉(zhuǎn)化為常用用戶時，新手引導(dǎo)也就切換成為了幫助中心。

（3）待辦事項(xiàng)模塊參考

待辦事項(xiàng)通常以列表的形式展示，主要是告知用戶當(dāng)前角色崗位的待辦內(nèi)容的數(shù)量和內(nèi)容，方便用戶快速掌握信息并直達(dá)任務(wù)處理。

由于B端行業(yè)業(yè)務(wù)的差異，不同類型的產(chǎn)品所聚焦的業(yè)務(wù)目標(biāo)不同，所以在工作臺中的待辦事項(xiàng)模塊有差異，項(xiàng)目管理類產(chǎn)品突出于各個環(huán)節(jié)的協(xié)作，會將待辦事項(xiàng)區(qū)分很明細(xì)，而通用產(chǎn)品的待辦事項(xiàng)模塊則突出事件的處理狀態(tài)與內(nèi)容。

在設(shè)計(jì)待辦事項(xiàng)模塊的時候首先應(yīng)該分析需要達(dá)到的業(yè)務(wù)目標(biāo)，并且在此基礎(chǔ)上進(jìn)行競品分析借鑒，明確需要重點(diǎn)突出什么信息，弱化什么信息。然后才是使用視覺設(shè)計(jì)能力進(jìn)行美化包裝。以下這三種形式可參考：

（4）業(yè)務(wù)數(shù)據(jù)模塊參考

數(shù)據(jù)看板在工作臺上占有“一席之地”，想做好工作臺上的數(shù)據(jù)模塊，AntV、ECharts是國內(nèi)可視化組件庫中的佼佼者。雖然它們“看著不咋地”，但是核心功能點(diǎn)是很“精致好用”的，經(jīng)得起推敲。我們可以借鑒功能框架，在此基礎(chǔ)上優(yōu)化視覺，不僅節(jié)省設(shè)計(jì)時間，還有效提升開發(fā)實(shí)現(xiàn)的效率，開發(fā)再也不會說實(shí)現(xiàn)不了了。

業(yè)務(wù)數(shù)據(jù)在設(shè)計(jì)上需要做到突出業(yè)務(wù)目標(biāo)，視覺上要減少色彩，色彩控制在4個顏色之內(nèi)，太多的色彩無法突出重點(diǎn)，使界面視覺效果顯得凌亂。以下形式可參考：

（5）常用功能模塊參考

工作臺中的常用功能是作為快捷操作形式存在，點(diǎn)擊后直接進(jìn)入功能頁面而無需從導(dǎo)航層級點(diǎn)擊進(jìn)入，提升了操作效率，聚焦了功能。

設(shè)計(jì)上一般使用icon+文字的形式展示，功能icon承載了表現(xiàn)產(chǎn)品視覺品牌質(zhì)感的責(zé)任，我們根據(jù)B端產(chǎn)品的業(yè)務(wù)屬性去設(shè)計(jì)。icon有兩種設(shè)計(jì)手法，一種是淺色底+深色icon，另一種是深色底+反白icon，無論使用哪種方法切記顏色不宜超過四種。

（6）消息通知

消息通知根據(jù)產(chǎn)品類型決定是否需要展示在工作臺。若需展示在工作臺，可參考網(wǎng)頁類產(chǎn)品的新聞中心設(shè)計(jì)，根據(jù)消息屬性和通知優(yōu)先級進(jìn)行分類展示。

3. 表格頁面優(yōu)化

表格作為組織整理數(shù)據(jù)的結(jié)構(gòu)化展示載體，可以高效的向用戶展示數(shù)據(jù)信息，是B端產(chǎn)品中出現(xiàn)最高頻的模塊之一。

用戶主要通過表格瀏覽獲取信息、對數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等復(fù)雜操作、對比數(shù)據(jù)的差異與變化。好的表格信息展示設(shè)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷的實(shí)現(xiàn)以上場景中的訴求。

表格設(shè)計(jì)中最重要的問題就是如何更好展示表格信息以及更好讓用戶獲取想要的信息，需要做到三點(diǎn)：疏密適度、高效掃視、精簡克制。

（1）疏密適度

常見的表格信息包含文本、標(biāo)簽、狀態(tài)樣式、關(guān)鍵信息Icon等。表格單元格是信息填充的基本單元，行高和列寬的定義決定了表格信息的疏密程度，進(jìn)而決定了表格給用戶的直觀感受。

① 定義合理的表格行高

文字行高可以設(shè)定為字號的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號的1~1.5倍。

根據(jù)用戶場景的不同，來選擇倍數(shù)，需保證系統(tǒng)內(nèi)使用統(tǒng)一的倍數(shù)。例如，針對用戶快速瀏覽獲取大量數(shù)據(jù)場景時，可以選擇1.2倍作為模數(shù)，列表更為緊湊，同樣掃視范圍內(nèi)，可獲取更多信息。

可加入用戶自定義行高的功能，覆蓋用戶角色多樣性。比如個人視力的原因，有些用戶喜歡表格行高值大一些，看起來舒適透氣，便于閱讀。產(chǎn)品為了讓不同用戶都能獲得較好的體驗(yàn)，可以考慮把表格疏密度的設(shè)置開放給用戶，設(shè)置緊湊、標(biāo)準(zhǔn)、寬松三種行高。

② 靈活擴(kuò)展的橫向空間

通過對表格固定位置與列寬的調(diào)整，擴(kuò)大表格數(shù)據(jù)空間，使信息不擁擠，空間更透氣，保證橫向掃視易讀性。

設(shè)計(jì)師需要根據(jù)表格承載內(nèi)容定義表格的列寬，應(yīng)包含最大/最小/默認(rèn)列寬的定義以及使用規(guī)則。我推薦的一個規(guī)則是：

規(guī)則1：當(dāng)相對列少【瀏覽器寬度-頁面其他模塊; 全部列的默認(rèn)寬度和】，則各個列自動等比拉伸，撐滿屏幕；

規(guī)則2：當(dāng)相對列多【瀏覽器寬度-頁面其他模塊; 全部列的默認(rèn)寬度和】，則出橫向滾動條，每列寬度為默認(rèn)寬。

另外需注意最小值設(shè)定時應(yīng)避免信息展示出現(xiàn)【對聯(lián)式表格】。對聯(lián)式表格最大的問題在于，一屏內(nèi)展示的行數(shù)有限，當(dāng)用戶縱向?qū)Ρ葦?shù)據(jù)時，需往復(fù)滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預(yù)覽，而是不停上下左右切換，使用體驗(yàn)不佳。

a. 高效掃視

無論是在表格中明確的定位數(shù)據(jù)，還是順序閱讀，高效掃視都是B端用戶一個很重要的訴求，我們在設(shè)計(jì)表格時可嘗試一些有效手段提升用戶瀏覽獲取信息的效率。

對齊方式：

表格設(shè)計(jì)中最基本的對齊準(zhǔn)則是文字左對齊，符合從左到右的閱讀習(xí)慣；數(shù)據(jù)數(shù)字類信息右對齊，方便對比數(shù)據(jù)大小。

（2）去除視覺噪音，強(qiáng)調(diào)對比

① 謹(jǐn)慎使用斑馬色

斑馬線即隔行變色。它能讓行間界限更為明顯，橫向查看數(shù)據(jù)時避免看錯行。但由于與分割線的作用類似，起到的作用有限，可針對不同場景酌情考慮是否使用。比如在不同類型的數(shù)據(jù)計(jì)算結(jié)果時可使用不同底色進(jìn)行區(qū)分，可以更加區(qū)分不同類型的數(shù)據(jù)。而對同一類數(shù)據(jù)而言，謹(jǐn)慎使用斑馬色區(qū)分，分割線的區(qū)分作用已經(jīng)足夠明顯，再加上表格行的懸浮狀態(tài)，能夠更加強(qiáng)化橫向視覺引導(dǎo)。

② 精簡克制

a. 適當(dāng)隱藏信息

表格中有些數(shù)據(jù)指標(biāo)是綜合維度的，這些信息雖然能起到輔助用戶理解數(shù)據(jù)的作用，但全部展示出來，會讓表格顯得臃腫反而降低了可讀性，此時可考慮將這些信息隱藏起來，把觸發(fā)顯示的決定權(quán)交給用戶，也更符合用戶逐級查看信息的場景。

例如，某些有父子層級關(guān)系的數(shù)據(jù)，可以通過主子折疊表將子信息默認(rèn)隱藏，用戶根據(jù)需要，去展開查看詳細(xì)的子信息。

b. 設(shè)定折行與截?cái)嘁?guī)則

B 端業(yè)務(wù)的數(shù)據(jù)信息復(fù)雜多樣，信息內(nèi)容的長度高度是多樣且不可控的，很多內(nèi)容會超出我們限定的最大列寬，最大列高，我們應(yīng)當(dāng)給出折行與截?cái)嘣瓌t去約束內(nèi)容的展示。

折行截?cái)嘣瓌t設(shè)定時要根據(jù)場景進(jìn)行細(xì)分，如日期時間等固定格式內(nèi)容，在用戶拖動列寬后文字應(yīng)折行而非截?cái)嗾故?，避免影響用戶理解?/p>

還有一部分業(yè)務(wù)特定標(biāo)題內(nèi)容，前面N多個字可能都是一致的，這時候如果簡單的截?cái)啵脩艟托枰鹨籋over才能找到定位到要找的數(shù)據(jù)。因而折行與截?cái)嘣瓌t，我們建議是給出三種：單行截?cái)?、雙行截?cái)嘁约白赃m應(yīng)截?cái)啵鶕?jù)具體業(yè)務(wù)情景選擇。

總結(jié)

設(shè)計(jì)師能夠?qū)⒁粋€界面做的好看，這是一個設(shè)計(jì)師最基本的能力,時刻都不能放棄對美的事物的追求，設(shè)計(jì)師應(yīng)該都是有種強(qiáng)迫癥，看到不好的事物應(yīng)該想著如何用自己的設(shè)計(jì)能力將它變得更好。視覺設(shè)計(jì)就是一種很好的解決不完美的事物的手段。

以上的三種設(shè)計(jì)手法希望能夠幫助大家在工作中設(shè)計(jì)出漂亮的界面。