2023年5千字深度解析B端產(chǎn)品的美即適用效應

千字深度解析B端產(chǎn)品的美即適用效應為什么會有設(shè)計師的存在，人們通常認為美觀的設(shè)計更為有用。

為什么要化妝打造氛圍感美女，由于讓你感官愉悅，同時掩蓋缺陷，忽視她身上的不足。

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

一、背景

為什么會說到這個話題，是由于前段時間在公司內(nèi)部組織了體驗共享會，會后固定的吐槽時間，一產(chǎn)品部門的產(chǎn)品經(jīng)理指責設(shè)計部門的界面效果不好看，他提到了美即適用原則。我還是想自己應當深化了解一下這個效應，一方面擴充自己的學問庫，另一方面也想積累更多案例。

二、理論介紹

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

很多試驗證明了這個效應，而且設(shè)計的認可度、使用狀況和性能都受到了這個效應的深刻影響。

美即適用效應最早是在人機交互領(lǐng)域于1995年進行討論。

日立設(shè)計中心的討論員MasaakiKurosu和KaoriKashimura測試了26種ATM的UI，要求252名討論參加者對每種設(shè)計的易用性進行評分使用以及美學吸引力。

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

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

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

美觀的設(shè)計會在人們的大腦中產(chǎn)生樂觀的反響，并使他們信任該設(shè)計實際上會更好。當產(chǎn)品或服務的設(shè)計在美學上令人愉悅時，人們會容忍忽視較小的可用性問題。外觀美觀的設(shè)計可以掩蓋可用性問題，并防止在可用性測試過程中發(fā)覺問題。三、優(yōu)秀的產(chǎn)品案例

簡潔的掃瞄器產(chǎn)品：

過去的手機掃瞄器繼承了pc端的掃瞄器特點，大而全+密密麻麻的各種入口，再加上各種廣告，簡直是噩夢。但在當時的年月，除了Safari之外，全部手機的掃瞄器不管是自帶的還是第三方的都是這樣的主頁，毫無美感和可用性而言。

最開頭打破規(guī)章是夸克掃瞄器，在2022年推出的夸克掃瞄器，進入首頁之后特別簡潔，體現(xiàn)了簡潔之美，跟其他繁復的掃瞄器主頁相比是一股清爽脫俗?？恐啙嵔缑骘L格的產(chǎn)品力，收獲了穩(wěn)定的用戶量。這就是美即適用的最佳案例。

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

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

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

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

1.視覺降噪

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

（1）削減顏色

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

在1.0版本中存在視覺混亂、視覺層級不清楚等狀況，用戶在理解層面上存在肯定的負擔；其中列表視圖是用戶使用場景最多的一個場景視圖。我們通過削減顏色的設(shè)計手法對界面進行了視覺降噪。

（2）優(yōu)化信息展現(xiàn)

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

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

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

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

（1）工作臺常見功能

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

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

b.聚合高頻常用功能

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

c.查看待辦事項

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

d.明晰細分業(yè)務

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

e.高效獵取業(yè)務信息

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

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

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

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

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

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

（3）待辦事項模塊參考

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

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

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

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

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

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

（5）常用功能模塊參考

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

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

（6）消息通知

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

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

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

用戶主要通過表格掃瞄獵取信息、對數(shù)據(jù)進行篩選、排序以及相關(guān)業(yè)務處理等簡單操作、對比數(shù)據(jù)的差異與變化。好的表格信息展現(xiàn)設(shè)計，應當是能夠幫助用戶高效便捷的實現(xiàn)以上場景中的訴求。

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

（1）疏密適度

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

①定義合理的表格行高

文字行高可以設(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)品為了讓不同用戶都能獲得較好的體驗，可以考慮把表格疏密度的設(shè)置開放給用戶，設(shè)置緊湊、標準、寬松三種行高。

②敏捷擴展的橫向空間

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

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

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

規(guī)章2：當相對列多【掃瞄器寬度-頁面其他模塊;全部列的默認寬度和】，則出橫向滾動條，每列寬度為默認寬。

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

a.高效掃視

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

對齊方式：

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

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

①謹慎使用斑馬色

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

②精簡克制

a.適當隱蔽信息

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

例如，某些有父子層級關(guān)系的數(shù)據(jù)，可以通過主子折疊表將子信息默認隱蔽，用戶依據(jù)需要，去綻開查看具體的子信息。

b.設(shè)定折行與截斷規(guī)章

B端業(yè)務的數(shù)據(jù)信息簡單多樣，信息內(nèi)容的長度高度是多樣且不行控的，許多內(nèi)容會超出我們限定的最大列寬，最大列高，我們應當給出折行與截斷原則去約束內(nèi)容的展現(xiàn)。

折行截斷原則設(shè)定時要依據(jù)場景進行細分，如日期時間等固定格式內(nèi)容，在用戶拖動列寬后文字應折行而非截斷展