在打造一個產品時，不僅僅需要考慮它的好用與功能價值，同時也應當考慮產品在美感方面的設計，一個美觀的設計會影響用戶觀感。本文將探索美即適用效應以及對產品的影響，希望對你有所啟發。

為什么會有設計師的存在，人們通常認為美觀的設計更為實用。

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

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

一、背景

為什么會說到這個話題，是因為前段時間在公司內部組織了體驗分享會，會后固定的吐槽時間，一產品部門的產品經理指責設計部門的界面效果不好看，他提到了美即適用原則。我還是想自己應該深入了解一下這個效應，一方面擴充自己的知識庫，另一方面也想積累更多案例。

二、理論介紹

“美即適用效應”法則是指一種心理感應現象：人們認為美好的設計更好用。直到現在我們大多數人也都會認為長得好看就是有優勢。

許多實驗證實了這個效應，而且設計的認可度、使用情況和性能都受到了這個效應的深刻影響。

美即適用效應最早是在人機交互領域于1995年進行研究。

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

他們發現，參與者的審美吸引力等級與感知的易用性之間的關聯要強于參與者的審美吸引力等級與實際易用性之間的關聯。

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

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

• 美觀的設計會在人們的大腦中產生積極的反響，并使他們相信該設計實際上會更好。
• 當產品或服務的設計在美學上令人愉悅時，人們會容忍忽略較小的可用性問題。
• 外觀美觀的設計可以掩蓋可用性問題，并防止在可用性測試過程中發現問題。

三、優秀的產品案例

簡潔的瀏覽器產品：

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

最開始打破規則是夸克瀏覽器，在2016年推出的夸克瀏覽器，進入首頁之后非常簡潔，體現了簡潔之美，跟其他繁復的瀏覽器主頁相比是一股清新脫俗?？恐啙嵔缑骘L格的產品力，收獲了穩定的用戶量。這就是美即適用的最佳案例。

四、B端web產品如何運用美即適用效應

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

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

B端常見的視覺問題主要是設計風格陳舊、頁面信息層級不明確、視覺元素規范不統一等。針對設計風格陳舊和視覺元素規范不統一的問題需要具體產品具體分析，對于頁面信息層級不明確的問題則可以通過視覺降噪的方式優化。

1. 視覺降噪

視覺降噪的一個大的核心點就是優化信息展示。

（1）減少色彩

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

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

（2）優化信息展示

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

在2.0改版中我們將字段進行了優先級分類，字段名稱和內容則按照上下結構的方式進行展示，從一定程度上為用戶做了視覺排序。

2. 工作臺優化

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

（1）工作臺常見功能

a. 統計業務數據

用戶根據業務數據查看工作進度。不同的用戶身份在使用目標上有所不同，比如管理者角色，會根據業務數據調整戰略決策、安排下屬的工作內容；執行者會根據自己的完成進度來安排近期的工作內容，識別工作優先級。

b. 聚合高頻常用功能

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

c. 查看待辦事項

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

d. 明晰細分業務

B端產品的業務屬性會在工作臺有所體現。比如：匯易聯，它的產品定位在于幫助企業全流程管控各類費用支出。它們出現在工作臺上，除了幫助用戶快速開展工作，減少細鉆外，還能夠幫助用戶識別產品的業務屬性。

e. 高效獲取業務信息

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

（2）工作臺基本構成

• 業務數據&工作進度：一般以數據可視化的形式出現，用于告知用戶工作進度
• 待辦事項：告知用戶當前、當周的任務排期
• 快捷功能&常用功能：快速開展工作或快速跳轉至常用頁面，無需在導航上一步步下鉆，節省時間，提高效率。

消息通知：一般包含系統消息、業務進展、功能信息三類。系統信息包含功能迭代和產品更新；業務最新進展包含最新業務數據更新；功能信息：包含業務流轉進度和上下級提交審核和被審核的進展?？筛鶕匾潭冗x擇是否展示在工作臺。

個人信息：當身份識別為核心功能時時出現，比如使用不同角色的賬號登陸天貓店鋪工作臺，對應的功能是不同的，有時同一個賬戶兼職兩種身份，為了識別身份需要展示個人信息；但是在強業務屬性工作臺（理賠與續簽）時無需出現，因為在賬號登錄時就已經識別了賬號權限，展示具體業務的內容。所以還需具體情況具體分析。

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

（3）待辦事項模塊參考

待辦事項通常以列表的形式展示，主要是告知用戶當前角色崗位的待辦內容的數量和內容，方便用戶快速掌握信息并直達任務處理。

由于B端行業業務的差異，不同類型的產品所聚焦的業務目標不同，所以在工作臺中的待辦事項模塊有差異，項目管理類產品突出于各個環節的協作，會將待辦事項區分很明細，而通用產品的待辦事項模塊則突出事件的處理狀態與內容。

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

（4）業務數據模塊參考

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

業務數據在設計上需要做到突出業務目標，視覺上要減少色彩，色彩控制在4個顏色之內，太多的色彩無法突出重點，使界面視覺效果顯得凌亂。以下形式可參考：

（5）常用功能模塊參考

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

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

（6）消息通知

消息通知根據產品類型決定是否需要展示在工作臺。若需展示在工作臺，可參考網頁類產品的新聞中心設計，根據消息屬性和通知優先級進行分類展示。

3. 表格頁面優化

表格作為組織整理數據的結構化展示載體，可以高效的向用戶展示數據信息，是B端產品中出現最高頻的模塊之一。

用戶主要通過表格瀏覽獲取信息、對數據進行篩選、排序以及相關業務處理等復雜操作、對比數據的差異與變化。好的表格信息展示設計，應當是能夠輔助用戶高效便捷的實現以上場景中的訴求。

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

（1）疏密適度

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

① 定義合理的表格行高

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

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

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

② 靈活擴展的橫向空間

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

設計師需要根據表格承載內容定義表格的列寬，應包含最大/最小/默認列寬的定義以及使用規則。我推薦的一個規則是：

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

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

另外需注意最小值設定時應避免信息展示出現【對聯式表格】。對聯式表格最大的問題在于，一屏內展示的行數有限，當用戶縱向對比數據時，需往復滾動多次，記憶壓力大；橫向掃視時，閱讀視線不能一直保持左右橫向預覽，而是不停上下左右切換，使用體驗不佳。

a. 高效掃視

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

對齊方式：

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

（2）去除視覺噪音，強調對比

① 謹慎使用斑馬色

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

② 精簡克制

a. 適當隱藏信息

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

例如，某些有父子層級關系的數據，可以通過主子折疊表將子信息默認隱藏，用戶根據需要，去展開查看詳細的子信息。

b. 設定折行與截斷規則

B 端業務的數據信息復雜多樣，信息內容的長度高度是多樣且不可控的，很多內容會超出我們限定的最大列寬，最大列高，我們應當給出折行與截斷原則去約束內容的展示。

折行截斷原則設定時要根據場景進行細分，如日期時間等固定格式內容，在用戶拖動列寬后文字應折行而非截斷展示，避免影響用戶理解。

還有一部分業務特定標題內容，前面N多個字可能都是一致的，這時候如果簡單的截斷，用戶就需要逐一Hover才能找到定位到要找的數據。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自適應截斷，根據具體業務情景選擇。

總結

設計師能夠將一個界面做的好看，這是一個設計師最基本的能力,時刻都不能放棄對美的事物的追求，設計師應該都是有種強迫癥，看到不好的事物應該想著如何用自己的設計能力將它變得更好。視覺設計就是一種很好的解決不完美的事物的手段。

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