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

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

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

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

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

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

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

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

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

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

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

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

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

簡潔的浏覽器産品：

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

最開始打破規則是誇克浏覽器，在2016年推出的誇克浏覽器，進入首頁之後非常簡潔，體現了簡潔之美，跟其他繁複的浏覽器主頁相比是一股清新脫俗。靠着簡潔界面風格的産品力，收獲了穩定的用戶量。這就是美即适用的最佳案例。

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）工作台基本構成

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

消息通知：一般包含系統消息、業務進展、功能信息三類。系統信息包含功能疊代和産品更新；業務最新進展包含最新業務數據更新；功能信息：包含業務流轉進度和上下級提交審核和被審核的進展。可根據重要程度選擇是否展示在工作台。

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

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

（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才能找到定位到要找的數據。因而折行與截斷原則，我們建議是給出三種：單行截斷、雙行截斷以及自适應截斷，根據具體業務情景選擇。

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

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

本文由 @晨屹 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!