晨屹

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

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

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

一、背景

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

二、理論介紹

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 視覺(jué)降噪

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

（1）減少色彩

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

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

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

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

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

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

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

（1）工作臺(tái)常見(jiàn)功能

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

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

b. 聚合高頻常用功能

常用功能又稱快捷功能，是指使用者工作中最常用的幾個(gè)功能選項(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ù)量這個(gè)維度來(lái)分析和查看。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（5）常用功能模塊參考

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

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

（6）消息通知

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

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

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

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

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

（1）疏密適度

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

① 定義合理的表格行高

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

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

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

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

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

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

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

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

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

a. 高效掃視

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

對(duì)齊方式：

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

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

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

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

② 精簡(jiǎn)克制

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

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

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

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

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

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

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

總結(jié)

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

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