創建美觀、可用和高效的UI界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升UI設計的高級感。 

1、視覺元素

在互聯網產品日趨成熟的今天，你會發現所有的App越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個App設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的UI設計。本節總結了12個簡單直觀的提升設計感的小細節，一起來學習。

1.1 使用顏色深淺構建層次結構

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。

每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：

• 主要內容使用深灰色（諸如標題，但是不要用純黑）

• 次要內容使用灰色（比如商品介紹）

• 輔助性內容采用淺灰色（比如發布日期）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

• 大多數的文本采用正常的字重（400到500，具體取決于字體）

• 對于需要強調的文字采用較重的字重（600到700，具體取決于字體）

▲主標題字重為600，其他標綠點的文字字重都為400

應當盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經較小，低于400會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

灰色文字在無彩/彩色背景下要分開處理

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。

但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。

1.2 統一色調

選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。

1.3 干凈的陰影

陰影是UI設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。

陰影不一定是黑色的，還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在UI設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。

1.4 個性的圖標設計

合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。

標簽欄作為一個App的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數App都是使用iOS規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。

1.5 Tab的設計感

Tab是App設計中最常見的控件之一，它源自Material Design的設計規范?，F在很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于iOS規范當中的分段選擇器變得不那么常見了。

在視覺表現形式上，Tab和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上，既讓界面視覺獨一無二，又進一步強化了用戶對品牌形象的認知。

1.6 無框設計 去繁從簡

在UI設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

使用陰影

陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內容更聚焦。

使用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。

增加額外的留白

創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

1.7 統一設計元素

在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。

1.8 符合產品氣質的字體

選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。

1.9 第三方圖標風格統一

大多數App都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。

1.10 圖片中尋找色彩

App中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。

1.11 提高圖片質量

圖片的質量影響著整個App的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低App的質感。在App設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。

1.12 卡片式設計

現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。

2、情感化設計

心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。

2.1 提示性文字

語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如App那些push推送通知，因為用戶每天收到的PUSH實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的PUSH文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。

2.2 下拉刷新

下拉刷新是用戶在App使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。

下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。

2.3 頭像設計

個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。

現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。

2.4 缺省頁化解負面情緒

通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。

2.5 標簽欄微動效

情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。

2.6 模擬用戶行為

如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。

情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。

再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。

2.7 有趣的細節設計

俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在UI設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！

有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。

總的來說：UI設計的“高級感”意味著在視覺層面要從細微之處著手，創造出精致富有設計感的畫面；另一方面要從情感化設計出發，使用戶與產品產生情感上的共鳴，獲得更高層次的使用體驗。

作者：印跡_ 來源：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在我們之前的文章中，同理心思維，在工作和生活中有著怎樣的應用？關于產品原創和服務設計都有提到“同理心”，今天想來系統地分享一下。它不僅應用在旅行的產品和服務上，還可以應用在每天生活的方方面面，提高我們生活和工作的效率。

提到B端設計你是否經常聽到這樣的聲音：

• B端不需要怎么設計，直接對著低保真出圖就可以了；
• 不要花時間在這些細枝末節上，參照Ant Design上的規范，在我的需求文檔的基礎上快速出圖；
• 不知道怎么跟需求團隊溝通，感覺他們的設計思維太Low，聊不到一起；
• 產品的圖片設計好看才是設計師的價值，功能體驗這些與設計師無關；
• ……

剛轉B端那段時間，我相信每一個設計師都曾有過這樣的困惑。

設計師在實際工作的時候經常會遇到自己的設計方案與業務需求高度融合，由于B端的行業屬性，缺乏完善的數據驗證，常常到了最后也區分不了設計師真正的能力體現在何處，這就導致團隊成員對設計師的價值認識不夠全面。

那么我們B端設計的價值又該如何體現？今天本文將從4個方面進行闡述，一起來看一下吧~

01 設計價值是什么

B端設計師追求工作中如何體現價值的時候，我們得先明白B端的設計價值是什么。

那么何為B端的設計價值呢？

百度百科中設計價值的含義是：把一種計劃、規劃、設想通過視覺的形式傳達出來的活動過程。今天本文中的B端設計價值分為視覺設計、交互體驗以及業務流程優化，通過信息傳達的改變，幫助客戶降本增效的方式獲取收益。

如果將B端整個生命流程進行剖析，我們會更好的理解其設計價值。

1.1 視覺設計吸引客戶

B端產品與C端產品不同，它需要市場銷售人員利用自身的能力以及資源向目標企業進行銷售或者在一些大型展會上對外演示，據有關資料表明人所感知的信息的80%的信息來自視覺，這就需要對產品的功能進行視覺化展示。

因為競爭激烈，經常需要在眾多競爭者中進行廝殺。在技術水平趨同的情況下，視覺起到了非常大的作用。特別是在展會期間，假如兩家公司技術水平相當，演示的視覺完全碾壓對手，讓客戶有著良好的品牌印象，這將產生快速的口碑影響，而這些將影響用戶的最終決定。

1.2 交互體驗留住客戶

這一步需要我們理念進行升華，將視覺視角切換至體驗視角。

企業是我們B端設計的重要客戶，它是一個具有不同成員角色的群體組織。該組織為了工作管理的效率，會有不同的權限體系。權限的不同關注的信息也有所不同，這需要我們在設計中依據權限，考慮不同信息呈現優先級。

功能繁瑣是很多同學對B端的第一印象。因其有著不同角色的參與，每個角色因為崗位職責的不同，所參與公司的業務流程存在差異，這意味著需要將不同的功能在遵循產品體驗一致性的基礎上匯聚在一起。

1.3 業務價值賦能客戶

業務價值對于B端設計特別重要，這是企業決定購買B端產品的出發點。我們在說業務設計的時候，需圍繞企業“降本增效”理念，讓用戶覺得有用，完成企業的管理需求。

舉個例子，比如我們做了一款報銷系統產品，幫助用戶解決財務報銷過程復雜、冗長的問題。通過前期參與用戶調研，洞察業務，挖掘需求的突破點，找到當前背景下最優的業務流程解決方案。企業員工使用我們的產品后少填寫信息，更快速的拿到了報銷費用，平均比傳統流程節省了20分鐘。假設企業員工平均時薪60元，那么這個100人的企業每周可以節省1.6萬的人力支出，而一年可以節省76.8萬左右的支出。

02 如何體現設計價值

在了解了設計價值的體現后，我們知道B端設計的落腳點在業務價值的賦能上。當我們實實在在的解決了業務問題，而不是產品外層視覺與交互的表層需求，才能讓我們的設計價值最大化，讓設計得到團隊其他成員的認可。接下來結合工作經驗闡述下設計師可以賦能業務的點。

2.1 主動養成系統思維

很多B端設計師都是被動的接到產品經理的低保真，然后根據低保真的需求直接輸出設計稿，妥妥的淪為一個畫圖的美工，這會使得自己在團隊內部被定義為一個工具人。

那我們的發力點該是什么？借用Jesse James Garrett的理論用戶體驗五要素這個專業名稱（表現層、框架層、結構層、范圍層、戰略層）。單純的視覺設計雖然容易感知，但它卻屬于五要素的最頂層，價值有限，無法準確傳達最底層戰略層的含義，我們需要往下突破才能凸顯我們的價值。

當我們在收到需求的時候，需要具備系統化思維，從底層戰略開始，首先了解業務需求背后的價值，同產品經理對其業務目標后，幫助他梳理業務需求，結合用戶目標以及當前的技術能力等多方因素系統性思考最優的設計解決方案。

只有發揮了我們的主觀能動性，改變單點視角，具備系統化思考的能力，才能更好出結果，體現我們的價值。

2.2 更專業的組件規范

功能復雜繁瑣的B端為了最大化的保證設計的一致性、提升開發的效率以及方便產品的迭代優化，組件規范是我們產品必不可少的工具。

那目前市面上的組件規范這么完善，對于我們設計師而言自身的價值是否無法體現了呢？其實它存在2個問題：

1、業務屬性不符。雖然市面上存在眾多的第三方組件，但由于設計的出發點不同（公司不同影響的業務屬性不同），導致市面上的組件不一定與自家產品屬性貼合，需要我們結合產品愿景以及業務規劃進行重新設計；

2、業務特性不貼合。我們見到的很多組件只能歸于基礎組件，可以保證基礎的設計一致性，但由于業務領域的獨特性，在一些專業的場景中有著強烈的業務屬性，需要我們對一些基礎組件進行組合，進行更專業的沉淀，這樣在實際使用的時候會更加高效。例如高級篩選、不同的場景彈框等。

2.3 賦能業務提升價值

不管B端還是C端的設計目的都是為了解決業務問題（業務目標的達成也是KPI考核的重要目標），我們始終要以業務目標作為我們的關鍵目標。

我們設計師需要參與整個行業生態的搭建，做到體驗結構展示清晰，核心信息簡潔明了，降低用戶的操作門檻，通過提高體驗效率（縮減時間成本），節省企業的人力成本。

對業務需求的賦能其實就是要求我們進行需求的挖掘，發現更多的業務增長點，提供當前背景下最優的解決方案。需要例如我們可以主動的進行XX調研活動，給出XX解決方案，最后給公司帶來了XX業務價值。

2.4 復盤沉淀經驗

項目復盤對于我們設計師的能力成長的作用是巨大的。它之所是最快的學習方式，因為它在是實踐中的反饋，這種直觀的經驗沉淀最終會融入自己解決問題的知識體系架構，而這將進一步反輔自己的職業成長。

復盤可以讓我們站在第三方角度，重新對項目流程進行全面的回顧與總結。結合不同的反饋，客觀的了解當前設計在整個業務目標中的價值，這是對我們設計量化最佳途徑。不單單對于個人，團隊內部的其他成員也可以通過復盤加深對設計信任感的建立，他們可以看到我們的設計思路，更深層次的了解我們的設計價值。

03 寫在最后

設計價值的體現建立在一朝一夕的積累上，如果想在B端設計中體現價值，一定要透過現象看本質，站在業務的角度，尋找真正的發力點，讓自己參與業務賦能的同時共同成長。

作者：江鳥的設計生活

轉載請注明：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一.什么是阻力 ？

在百度百科的定義中，阻力是物體在流體中相對運動所產生與運動方向相反的力。自然界中存在許多類型的阻力，比如空氣阻力、水流阻力，各種各樣的生物因此進化出相應的身體特征去減少阻力。如下圖所示，擁有流線型外形的海豚掌握獨特的減少湍流摩擦阻力的游泳方法，這使其游速在某些條件下可以達到每小時 70-100km，遠超現代潛艇的航速。

人類為了擺脫自然界設計的阻力，做了許許多多的努力。采用纖維模仿鯊魚皮膚結構的鯊魚皮泳衣能夠降低 30% 的水阻，提高人類游泳速度。汽車的流線型設計減小渦旋作用或避免渦旋的形成大大地減低了空氣對其的阻力。

在人類社會，人為設計的阻力也無時無刻不在。為了公共安全設立的安檢、為了交通安全而嚴格控制不同區域的最高車速、為了社會安定而設立的法律，諸如此類的阻力都無時無刻規范著人類的行為。

類似地，對于互聯網產品，用戶在使用時也會被刻意地或非刻意地設計出的阻力所影響，這些阻力會阻礙用戶完成目標。

二、為什么會產生阻力 ？

在認知心理學中，我們接受外部世界的刺激之后做出反應的過程中，涉及到我們如何感知、學習、推理、記憶，以及如何把意圖轉化為行為。人類數十萬年的進化過程中，對于感知、學習、推理、記憶的神經結構已經初步進化形成，大多數的人保持著相似的認知能力和認知缺陷。用戶在使用產品時感受到的阻力往往來自于設計師未能充分了解用戶的認知能力，從而設計出容易導致用戶犯下認知性錯誤的產品。以下常見的人類的認知特點影響了我們感知和獲取信息的過程。

2.1 傾向于通過經驗、環境和目標進行判斷

對于一件新事物，我們感知它的方式通常受到三個因素影響：過往的經驗、周圍的環境、當下的目標。我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦產品界面中與用戶的經驗預期相悖，就會產生阻力。

2.2 缺乏耐心和思考

面對一個我們從未使用過的機器設備時，我們很少愿意耐心閱讀完它的說明書再去使用它，而是自信滿滿的希望通過簡單的擺弄和熟悉就能夠了解它的使用方法。《點石成金：訪客至上的Web和移動可用性設計秘笈》一書中的第一條可用性原則就是“Don't let me think（不要讓我思考）”，作者認為設計者在設計一個界面時，最好能夠做到讓界面清晰易懂、一目了然，讓用戶能夠不必過多的思考就能夠使用它，幫助用戶跨越思考過程，讓用戶能夠輕松做出復雜的決策，減少認知壓力。

2.3 心流易被打斷

我們可能都經歷過心流狀態，當我們在極度專注地做某件事時完全沉浸其中并且非常高效，但如果意外地被打擾，會讓我們很煩躁。

有關任務執行的研究文獻中就曾經提到過：中斷會導致錯誤，而且人們容易遺忘之前的位置或狀態。當一個任務打斷了另外一個，重新啟動需要的時間會讓每個任務都變慢。

打擾我們的事情可能是工作時突然的一聲噪聲，也可能是在使用軟件時冗余的彈窗、過多的頁面跳轉、無意的誤操作等等。界面中過多的干擾會打斷用戶的心流，造成用戶的使用阻力。

2.4 無法擺脫的認知負荷

認知負荷理論（Cognitive Load Theory）是在 20 世紀 80 年代由澳大利亞教育學家 J.Sweller 提出，由于對人類學習認知和教學指導提供了新的理論框架，該理論在教育領域成為重要的心理學指導理論，在交互設計領域也存在著借鑒意義，理論的主要內容如下：

認知負荷是指外部信息進入個體短期記憶后中后所需要的注意力資源和記憶容量，被分類為內在認知負荷、外部認知負荷以及相關認知負荷（如下圖）。當任務需要消耗的注意力和記憶容量超出學習者的極限時，就會導致認知超負荷，超出的部分將不會被學習者有效獲取。

不同的呈現形式形成的外部認知負荷是不同的，一般來說，文字>圖式>視聽。因此，為了避免認知超負荷給用戶帶來的使用阻力，我們應該設法簡化信息來降低內在認知負荷，通過更合理的信息可視化形式和信息架構構建降低外部認知負荷。

三、產品設計中的阻力應用

如下圖，基于上述的用戶的認知能力分析，合理的降低阻力，能夠讓用戶在使用產品時效率更高，成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達效率、減少頁面跳轉來達到目的。在降低交互成本方面，我們可以通過降低操作難度、減少用戶思考來實現,同時通過降低認知負荷減少用戶的認知負擔。阻力并不是越小越好，在某些場景下，我們需要增加阻力和提高用戶的使用成本，進而提升用戶體驗或達成產品目標。通過提高防錯能力、提供安全感和營造儀式感來優化體驗。通過篩選用戶和內容把控社區生態。通過功能引導和歧視性策略來迎合商業目的。

四、降低阻力的應用

4.1 提高交互效率

4.1.1 減少操作步驟

類似于一個倒金字塔結構，交互流程中的每一個步驟都伴隨著流失。通過以下減少操作步驟的方法，可以降低用戶行為路徑中的阻力。

使用合適的控件

不同的控件有著不同的應用場景，控件的選用不當會形成多余的操作步驟。我們需要深入了解每個控件的屬性和應用場景才能夠做到靈活運用。

舉一個例子，在微信的朋友圈發布頁中編輯內容后點擊取消后，彈出警告框顯示“不保留”和“保留”按鈕，但是考慮到用戶可能會誤操作點擊取消按鈕的場景，此處應增加一個按鈕讓用戶回到編輯狀態，否則不管用戶選擇哪個選項都會退出發布頁重新進入，從而使用戶多了一步操作。下廚房的發布頁就考慮到了這個問題，使用了默認有返回操作的上拉菜單控件作為提示方式，即使在誤操作場景下也不會增加操作步驟。

控件方面這里就不展開講了，大家可以通過閱讀 iOS 人機交互指南和安卓 Material Design 規范來深入學習。

復雜任務移交系統

任務都存在其復雜性，當我們無法簡化它時，可以考慮將復雜性移交給系統，使其代替用戶操作。

比如我們可以利用用戶已經在產品中填寫過的信息來幫助用戶填寫相關信息。例如通過身份證號碼自動識別出用戶的生日和性別，自動為用戶填充。 

預判用戶行為

預判用戶行為分為兩種方式，第一種是在用戶操作前，預判可能發生的用戶行為，以建議的形式為用戶提供選擇，縮短用戶行為路徑。

比如拍攝照片后，打開微信聊天頁面，微信會以氣泡的形式詢問用戶是否要發送圖片，如下圖。

第二種是由于用戶的認知錯誤進行了非目標操作時，系統提前識別引導用戶進入正確的流程并完成任務。

比如支付寶聊天界面中，很多用戶誤以為可以直接通過輸入框輸入金額數后點擊發送就可以轉賬，但實際上只會發出一條消息。支付寶貼心地在用戶輸入數字后外顯轉賬功能，從而避免了用戶的錯誤操作，如下圖。

優化頁面流程

不合理的信息架構和流程設計會增加用戶的操作步驟。比如最新 iOS13 的信息應用，將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式，導致從一級頁面（A）進入到二級頁面（B或C）后，如果想切換信息列表還需要返回到一級頁面再次選擇，增加了一步操作。iOS13 的這種改動可能考慮到用戶切換信息列表的頻率沒有那么高，希望用戶專注于當前的信息列表，但是我這樣的用戶經常查看過濾信息列表，擔心是否有重要信息被屏蔽，多出的一步操作還是給我帶來不小的使用阻力。

淘寶訂單模塊的做法就比較合理，從一級頁面（A）進入二級的任何頁面（B 或 C）后，二級頁面可以在標簽欄互相切換，而不需要退回一級頁面再次選擇二級頁面，從而節省了一步操作。

快捷方式

快捷方式有跳轉類和功能類兩種，跳轉類的快捷方式可以幫助用戶快速觸達或回退到某個頁面。

比如我們可以通過長按 iOS 應用圖標調出功能的快捷方式使用，減少中間的操作步驟。淘寶可以在大多數頁面通過快捷方式快速回退到首頁。

功能類的快捷方式提供給用戶更快捷的方式完成復雜或較多的任務，比如嗶哩嗶哩的一鍵三連。被蘋果收購的應用快捷指令可以自定義系統以及第三方應用的復雜任務，并且在下次一鍵即可完成。

4.1.2 減少頁面跳轉

米哈里·契克森米哈賴在《心流：最佳體驗心理學》中將“最佳體驗”定義為：當我們在做某些事情時，那種全神貫注、投入忘我的狀態。這種狀態下，我們身心合一，甚至感覺不到時間的存在，技術水平也會達到頂峰，在這件事情完成之后我們會有一種充滿能量和非常滿足的感受。然而，周圍突然的干擾或環境刺激都有可能打破心流體驗。 

用戶在使用軟件產品時很少有心流體驗，因為過多的頁面的跳轉和刷新會中斷用戶心流，冗余的頁面層級會增加用戶的理解成本和操作成本。針對這個問題，我們可以提高單個頁面的動態容量，在不跳轉頁面的前提下使用戶完成任務，為用戶創造在視覺感受層面上的心流體驗，下面是一些方法舉例。

覆蓋層

覆蓋層是出現并覆蓋在原頁面上層的一個彈出窗口，可以由用戶觸發或系統自動觸發，在網頁端和移動端都有著廣泛應用。我們通常可以將其用于輸入內容、附加信息、子頁面信息外顯、顯示操作指令等。

a.模態覆蓋層

模態覆蓋層一般由點擊觸發，通常出現后會伴隨亮盒效果，使用戶聚焦于覆蓋層上的任務，用戶操作完畢后才可以進行覆蓋層外的其他操作。模態覆蓋層的大小不固定，它可以是一個小型的顯示警示信息的彈窗，也可能是一個篇幅很大的信息介紹，在保持上下文的情況下展示更多信息，避免了用戶迷失在各種頁面跳轉中。

如下圖，behance的首頁點擊一個作品后，會在當前頁面上生成一個模態覆蓋層供用戶瀏覽詳細的作品內容，而不是跳轉到新的頁面。在設計師瀏覽單個作品的場景中，一般只需要 1-3 分鐘的瀏覽后就會關閉頁面，模態覆蓋層的方式使得打開和關閉的操作更加流暢，提高了設計師的瀏覽效率。

模態覆蓋層在移動端同樣也有著應用。如果前后兩個頁面存在較強的關聯性，為了避免用戶產生明顯的割裂感，一般適合采用模態覆蓋層的方式展示新頁面。如下圖，知乎使用模態覆蓋層展示評論。

b.詳情覆蓋層

詳情覆蓋層在網頁端通過光標移入觸發，觸發后不需要刷新頁面既可顯示附加信息。如下圖Boss直聘中光標移入某條招聘介紹時，會觸發詳情覆蓋層展示出次級頁面的詳細崗位信息，避免了跳轉新頁面。

嵌入層

嵌入層類似于抽屜，需要的時候將其展開，不需要的時候將其收起。與模態層不同之處在于，展開后也不會遮蓋頁面的其他信息和影響其他操作。嵌入層的主要的應用場景有：拓展內容、展示下級內容。

如下圖，微博的發現頁面的功能圖標可以通過嵌入層進行拓展從而展示更多功能。

Xmind的嵌入層展示了格式的下級內容，可以在保持能夠繼續編輯腦圖的前提下進行格式設置。

標簽頁

對于內容豐富的頁面，希望用戶能夠通過盡可能少的跳轉就能夠觸達。我們可以將列表導航、宮格導航修改為標簽導航或分頁的形式。

4.2 降低交互成本

4.2.1 降低操作難度

把某些操作難度大耗費成本高的操作使用新技術解決，比如人臉識別和 OCR 技術可以降低信息輸入成本，不但幫助用戶使用較少的時間完成任務，也降低了用戶的犯錯幾率和使用阻力。

手勢的優化也是降低操作難度的可行方法，優化的方式有增加多手勢操作和加大熱區。比如在 App Store 首頁進入應用推薦頁后，針對不同使用場景的用戶提供了三種退出的方式，大大降低了操作難度。

舉一個反例，得到的書籍詳情頁中，查看詳情的按鈕熱區只存在于文字上，但是用戶的使用習慣會誤認為整塊區域都可以點擊，因此每次點擊多次失敗后才理解熱區的正確位置，如果將熱區擴大到整個區域就可以降低操作的難度。

想要了解更多交互手勢知識可以拓展閱讀： 交互手勢的容錯性和邏輯性 

4.2.2 減少用戶思考

提供默認選擇

用戶的每一次思考都伴隨著流失的風險。有時用戶對于我們提供的選擇不是很了解，會糾結和疑惑不同選擇之間的區別，最終可能導致放棄選擇進而流失。我們需要做的是為用戶提供默認選擇，同時允許用戶切換到其他選擇，以此來減少思考，降低使用阻力。

以手機淘寶查看相似寶貝功能改版為例，在舊版中，長按淘寶某個商品會出現「找相似」和「找同款」的按鈕選項，點擊后會跳轉到對應頁面。在新版中，長按淘寶某個商品會直接跳轉到「相似寶貝」頁面展示商品，同時可以通過分段控件切換為「同款寶貝」。我猜測的改版原因是，由于舊版的第二步給用戶的兩個選項讓用戶過多思考，導致第二步的流失率過高，很多用戶沒能體驗到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁展示給用戶，同時也很方便地去切換到「同款寶貝」，這種交互形式的變化讓用戶無需思考就可以迅速體驗到功能的特色、并在熟悉后下次會繼續使用。

保持一致性

我們通過過往的經驗將已知概念套用在新事物上，幫助我們理解。一旦交互界面中與用戶的經驗預期相悖，就會產生阻力。

上文提到過，我們習慣于從過去獲得的經驗中獲得對于當下問題的解決方案。甚至對于重復出現的問題，我們已經形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此，當設計缺乏一致性時，不但會導致我們已經形成的條件反射和肌肉記憶失效，還會更容易導致錯誤的發生。此時我們不得不從條件反射的無意識操作轉換為消耗注意力的緩慢操作，從而形成阻力。為了避免這些阻力，我們需要確保按鍵的一致性、交互文案的一致性、交互手勢的一致性。

如下圖，警告框的按鈕位置一旦第一次用戶經過使用熟悉后，之后用戶會進行無意識地快速操作，此時如果某個警告框缺乏一致性就會導致錯誤的發生。

4.3 降低認知負荷

4.3.1 降低內在負荷

內在負荷是任務中包含的信息和用戶固有的認知結構產生交互作品而形成的負荷。體現在界面中的信息就是文案的設計了，它也是產品設計中重要的一環。悖于用戶認知結構的文案設計會帶給用戶理解上的阻力。一份合格的文案設計需要做到簡潔易懂、重點突出、無歧義性和保持一致。

簡潔易懂

如果能夠做到簡潔，就不要冗余。確保每一個字都有其存在的意義。大部分用戶會對冗余的大段文字產生畏難情緒，從而放棄閱讀。詞匯的選擇要符合用戶人群的認知范圍，不應該使用用戶難以理解的各種黑話和行話。在此基礎上，如果能夠通過形象生動的修辭手法幫助用戶快速理解，就更勝一籌了，比如針對垃圾分類，一些網友發明的快速記憶方法就是一個很不錯的例子，如下圖。

重點突出

一段文案中可能有些是重點內容，有些是解釋內容，并不是所有內容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點內容告知用戶，能夠引導用戶下一步行動就足夠了，至于其他解釋性或者不重要的內容弱化即可。

針對前兩條規則，我們以 12306 以及飛豬的學生票和成人票的選擇彈窗作為案例進行對比。如下圖所示，每一次購買火車票的過程中，當我遇到 12306 的這個彈窗，都會讓我用不少時間去進行理解和思考。首先在個人看來，“溫馨提示”在任何彈窗上都是占用空間沒有實際意義的存在，如果沒有標題，直接展示正文即可；其次，正文的內容重點信息不突出，其中有一個句子“請憑購票時所使用的有效身份證件原件和附有學生火車票優惠卡的有效學生證原件換票乘車。”過于長和復雜，很考驗用戶的短期記憶和耐心；最后，按鈕文字沒有提供操作路徑，用戶想知道如何操作需要先閱讀完上面的文案。

飛豬的案例就避免了 12306 所存在的問題，做到了簡潔易懂和重點突出，如下圖。

表意清晰

表意清晰指的是文案傳達的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案，文案的歧義讓用戶疑惑“取消”按鈕是取消約會還是取消本次操作。經過修改后歧義性就消失了。

保持一致

同一個軟件系統中，表達相同概念的用詞一致。模塊中的相似文案，語法表達方式一致。上文提到我們人類很少愿意思考的特點，一旦一個軟件系統出現表示同一個概念，但是名稱不一樣的詞語，我們大腦就不得不開始被迫思考：“這個詞語和之前那個很接近但是有些不一樣，它們是同一個東西嗎？”這個思考過程從而形成了不小的阻力?！墩J知與設計》一書中提到一條規則：“同一個名稱，就是同一個東西；不同的名稱，就是不同的東西。”因此，一致性是撰寫交互文案的一條重要原則。

4.3.2 降低外在負荷

當信息的內在負荷不能再進行降低時，通過改變信息的呈現方式、結構設計和邏輯安排來將復雜信息可視化，降低外在負荷，使信息更容易被用戶接受和理解。這里涉及到信息可視化這個課題，這里就不做展開了。

五、提高阻力的應用

阻力并不是越小越好，在某些場景下，我們需要提高阻力提高用戶的使用成本達成某些目的。

5.1 優化交互體驗

5.1.1 提高防錯能力

類似于馬路上的減速帶，在車輛進入需要低速行駛區域時進行阻礙。我們通常在用戶容易犯錯的操作前設定一定的阻力，減緩用戶的操作的節奏，達到防錯的目的。如下圖，在藍湖中如果要刪除一個項目，就需要先輸入項目的名稱后才能成功刪除，通過增加阻力提高了防錯能力。

5.1.2 提供安全感

針對涉及到用戶隱私的敏感操作，通過設計特定的交互流程讓用戶體驗到安全感，比如通過增加指紋、面部識別等操作降低用戶對于危險和風險的擔憂，增加用戶的確定感和可控感。

5.1.3 建立儀式感

生活中大部分的時刻都是單調乏味的，我們需要使用各種儀式點綴它。與此類似，在用戶的操作行為路徑里增加一些不必要的過程，也能成為用戶體驗旅程中的點睛之筆。

就像多年前堅果手機一代的包裝，設計師別具匠心的將包裝設計為一次充滿著童趣的體驗，雖然拆包裝的過程時間增加，但是給予用戶似曾相識的場景是不可替代的。

看似使用起來費力的微信搖一搖，可以加強用戶的參與感和儀式感，就仿佛融合著一種占卜未知世界的神秘體驗，這種感覺是點擊無法給予的。當初支付寶基于 LBS 和 AR 技術推出了 AR 實景紅包，眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包，并樂此不疲。盡管增加了操作成本和使用阻力，但是這些富于互動性和趣味性的體驗帶給用戶的儀式感也是不可多得的。

5.2 維護社區生態

用戶的屬性和其產生的內容質量對于產品的社區生態建設有很大的影響。對于社區的認同感越高的核心用戶越多，內容質量就越高，進而社區對潛在用戶的吸引力就越大。一旦一些修養低或居心不良的用戶大量涌入社區，就會同時帶來大量的負面內容，造成對其他用戶的干擾，甚至導致他們大量流失。因此，為了讓一個產品的社區生態能夠健康發展，我們需要采取一些篩選方法來設置阻力，以此來篩選出對平臺有益的用戶和內容。

5.2.1 篩選用戶

邀請制

很多產品在冷啟動階段，為了避免垃圾用戶和提高社區質量，會設立邀請制來控制用戶來源，然后根據現有用戶的使用反饋進行可控的優化迭代。這種方式可以有效地降低初期的運營成本，保持服務器穩定，甚至可以制造一種供不應求的感覺，獲得更多的討論度。

價格門檻

網絡騙局在社交類產品屢見不鮮，婚戀類產品更是重災區。很多推行高端婚戀或高端社交的產品為了保證用戶質量，不僅嚴防死守，還會設立價格門檻，不付費直接無法使用，這在現今已經廣泛推行的基礎服務免費、增值服務收費的收費模式中很少見，但是確實有效地進行了用戶篩選。

測試門檻

通過設置測試題將用戶分成不同的群體，進行具有針對性的權限設置。比如 B 站轉正時需要完成具有社區特色的晉級考試，需要花費的時間成本比較高，通過這種方式篩選出真正認同 B 站社區文化的優質用戶，給予這些用戶更多在社區中互動的權限，從而也大量減少了低質量用戶的負面行為。

上述的三種用戶篩選方法是否適用，需要考慮的產品屬性。不同維度的篩選用戶的方法還有很多，這里只是簡單舉例。

5.2.2 篩選內容

不同的內容形式對于社區的價值是不一樣，我們可以通過一定的方式引導用戶生產對于社區建設更有利的內容。比如微信發布朋友圈時并沒有直接給用戶提供純文字信息的輸入方式，如果用戶想要發布純文字內容，需要長按發布按鈕才能進入相應界面。原因是微信官方認為相對于純文字內容，附有圖片的內容對于其他用戶更具有吸引力，通過阻礙用戶使用純文字發布、鼓勵用戶使用配圖發布使得整體的朋友圈社區的內容能夠吸引用戶瀏覽更長的時間，從而也可以使朋友圈廣告得到更多的曝光。

5.3 迎合商業目標

有時產品的商業目標和用戶目標存在一定沖突時，損失一定的用戶體驗滿足商業目標是不得不進行的選擇，這需要我們進行合理的平衡。

5.3.1 功能引導

為了迎合商業目標，我們有時需要針對一些功能設置一定操作阻力將其進行弱化，然后引導用戶去使用我們希望其使用的一些特定功能。這類阻力設計最為常見，比如通過強化按鈕對比進行功能的引導，如下圖。

5.3.2 歧視性策略

歧視性策略常見的的應用方式就是通過 VIP 制度或等級制度將用戶進行身份區分，針對身份等級低的用戶設置使用阻力，以便于引導其投入更多精力和資源，或者通過此方式給予高等級用戶優越感，刺激其進行分享炫耀。

16 年發布的支付寶生活圈就是一個很好的案例，芝麻信用 750 分以上才可以使用的歧視性策略非常簡單粗暴。很多達標的土豪用戶在朋友圈炫耀生活圈的截圖，等待朋友們的膜拜點贊。互聯網產品中，每增加一個動作，用戶都會呈幾何級流失，但是支付寶的歧視性策略給了用戶巨大的動力完成了截圖、保存、打開微信、分享照片等一系列動作，幫助支付寶生活圈實現了刷屏傳播的效果。

六、總結

雖然讓用戶暢通無阻地使用產品是我們的目標，但是有時還需要我們合理地限制。不同的使用場景和商業目的共同影響著設計策略。在如今互聯網產品越來越趨于存量競爭的態勢下，我們更多的工作開始專注于產品的優化。希望本文能夠提供相應的思路，助力你在產品優化探索中找到可行的切入點。

參考資料：

《微交互：細節設計成就卓越產品》作者：Dan Saffer

《心流》作者：米哈里·契克森米哈賴

《web界面設計》作者：Bill Scott / Theresa Neil

《認知與設計》作者：Jeff Johnson

《阻力設計：探索質量和數據間的平衡點》IXDC 演講，作者：王毓瑩

《點石成金》作者： 史蒂夫·克魯克

《設計心理學2:管理復雜》作者：唐納德·A·諾曼

作者：Ballen成明

轉載請注明：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Wonder是一款面向Z世代群體信息獲取的探索型產品，雖然我們在產品探索的路上沒能走的更遠，但作為設計師非常珍視參加創新產品探索的機會，創新本身就是一種積累，在產品搭建過程中深入了解用戶需求，設計上自我突破、追求極致。以下歷程和設計經驗想與大家分享。

///

了解用戶

首先從了解我們的年輕用戶開始。通過桌面、田野用戶調研，我們了解到，在信息內容消費方面，Z世代群體更偏向于個性化、多元化、高顏值的信息內容體驗。再進一步拆解訴求，我們發現用戶大致可以分為效率型及消遣型兩大類，效率型用戶偏向于便捷易用、信息聚焦的消費形式，而消遣型用戶更期望有豐富的內容讓他們逛起來、刷起來。針對兩大類不同的用戶訴求，我們進行了區隔化設計。

///

模式切換，實現多元場域承載

在框架搭建上，我們利用面板可變性和固定性兩個維度來定義框架，首先是首頁場景面板，它具有可變性，可以承載不同的內容例如搜索、信息流場景。再次，定義了位居二層的搜索面板，作為核心場景，具有固定性，是恒定不變的功能位于可變場景之上。最后，兩處功能區具有固定性，頭部承載基礎功能，底部承載兩大消費場景。最終將框架轉化為具體設計，分別承載了豐富的興趣內容分發場景和簡單的聚焦場景。

搜索框位于內容之上跨內容恒定存在，形成了搜索框置底的首頁雙層面板交互形式，和滿足首頁逛起來的內容消費場景、聚焦搜索的簡單搜索場景來滿足用戶的不同訴求。加上兩處固定的功能區域，頭部基礎功能，底部bar承載左效率、右娛樂兩大內容場景，構成了差異化首頁框架。冠以興趣內容躁模式、簡單搜索禪模式姓名，炫酷的交互手勢切換模式加持，最終構成了首頁雙模式、可承載多元場景的框架設計。

同時，頭部留有Doodle品牌區域，在豐富的節日運營活動中，檸檬精通過不同的裝扮和道具，和用戶進行互動

///

深度解讀用戶、體驗再升級

隨著我們對用戶的深入了解，有了更細致的解讀。根據用戶調研我們發現Z世代群體更傾向于基于興趣圈層的信息消費形式，愿意為興趣買單、尋找同好，并致力于為興趣圈層貢獻價值。因此我們對整體的框架和布局進行了體驗升級探索。

///

統一框架，興趣內容開屏即得

我們將用戶訴求拆解為可落實的設計目標，并聚焦「體驗統一」「快速篩選」「特色感知」「重點突出」4個核心設計目標?？蚣軐用?，我們依托星球形象設計，運用頭部循環交互框架形式，使內容直觀清晰呈現，不同星球凸顯不同內容特點，又保證了6大內容體驗統一。

底bar定義為基礎功能承載，語音核心能力固定不變，消息作為社區互動重要基礎能力、個人中心便捷用戶快速回訪社區資產。在頁面的架構上，根據金剛位運營模塊特性，將模塊設計為可組合、可靈活配置，以支持隨時更替的運營訴求。

對于重點互動場景，運用動態入口設計吸引互動，并在二級頁打造全場景的沉浸式互動氛圍。

最后，將UGC無限流至于信息層級底部，打造縱向瀏覽、逛內容體驗。

///

別致年輕化設計語言構建

在項目正式啟動前，組織腦暴會開展年輕化設計語言提煉，結合用戶研究團隊調研報告，通過Image board建立設計理念和模型表達，通過收集、歸納、提煉、總結路徑，提煉設計語言基因。

圈定關鍵頁面、核心控件開展帶有年輕化設計語言基因的方案探索，并擴大覆蓋到重點頁面驗證、聚焦、收攏，最終確定產品的年輕化設計語言。

檸檬精是Wonder App的官方IP形象。取自「我酸了」流行語，以檸檬為基礎原型，設計保留了檸檬最突出的特征，色彩以品牌色—檸檬黃為主色調，整體造型擬人化、年輕化以增強形象的延展性及實體化后的可動性。IP形象與業務屬性及產品氣質也較吻合，同用戶互動場景應用打造差異化記憶點。

不斷完善形象在各種場景中的應用及延展，制作系列表情，用更多元的表現形式將檸檬精的性格描繪得更加豐滿，為品牌注入更多親和有趣的情感，拉近與用戶的距離。

伴隨產品興趣圈層的升級，3D檸檬精也結合星球概念，差異化造型與興趣內容對應，去賦予不同興趣星球特色，幫助年輕用戶找到社區、身份歸屬感，增強人與社區鏈接感。

大星球塑造中，通過不同星球的特色元素構建場景，同用戶產生行為共鳴，吸引用戶進入圈子。

///

精細化概念文案突出“星球”場景感

///

寫在最后

設計一定不是“拍腦袋”的想象，更多是基于用戶特性、訴求、使用場景的一步步推導、演進的結果。設計也并不局限于最終的界面效果呈現，整個產出過程都在設計，也都有設計發揮的空間。記得在日常的設計中多挖掘用戶訴求、洞察機會點，并抱著提供解決方案而非一次性結果的視角，動態的、可延展的看待、設計事物。 

隨暫別應用市場，依然感謝大家的閱讀，期望這趟年輕化設計之旅能夠帶給設計師們一些啟發。期待看到更多有趣的、創新的、別出心裁的年輕化設計。

作者：百度MEUX

轉載請注明：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01

什么是靈動島（Dynamic island）

2022蘋果秋季新品發布會，備受關注的新一代iPhone如期而至，此次發布會最大的亮點是iPhone 14 Pro系列一改之前「劉?！乖O計，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實時變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創新稱之為靈動島（Dynamic island）。

02

靈動島能做什么 / 不能做什么

靈動島其實可以簡單的理解為基于前置攝像頭區域拓展的消息通知和快捷操作的新交互方式。

來電

當有來電時，靈動島會發生變化，并在后臺打電話時顯示通話時間和聲音波紋。

音樂

有點類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進、后退等功能。

Airpods

連接AirPods后，AirPods的型號外觀和當前電量會一起顯示。

導航

顯示導航方向和距離，并且能夠在適當的時候放大顯示更多導航信息。

Face ID

以前Face ID認證會顯示在屏幕中間，現在集成于靈動島的擴展功能之中。

充電

當充電時，會顯示充電的狀態以及當前電量百分比。

當然，目前除了官方展示的這些功能以外，還會有更多的應用方式，在此不一一列舉。但靈動島也并不是萬能的，例如會存在以下的局限性：

重度使用場景

從官方給出的樣例來看，靈動島更多的是承擔了消息通知和提醒的作用，并不適用于重度使用和復雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。

過于復雜的圖形

受限于前置物理攝像頭，靈動島這個區域并不能顯示過于復雜的圖形，并需要避開攝像頭區域，因為該區域是不能顯示任何圖像的。

軟硬件的邊界

靈動島的實際效果并不會像宣傳圖中那樣好，特別是在反光強烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區分。

03

對于靈動島的各方反應

新事物的出現，總會伴隨著支持和反對兩種聲音，此次靈動島的創新交互，自然也是褒貶不一，還需要經受時間的考驗，因為即使是蘋果這樣的公司也難免會犯錯，比如3D Touch、MacBook上的Touch bar等。

支持方認為「靈動島是繼劉海屏之后的又一個成功設計，甚至會超越劉海屏，更受歡迎」。

「靈動島的設計非常討巧，同時也給挖孔屏帶來了更多的想象空間」。

而反對方的理由也十分充分，首先是羅永浩第一時間發表了自己的觀點，表面上是硬贊這個創新，但實則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調整得跟粉底差不多」

很多的輿論認為，靈動島的創新是蘋果的一種無奈和妥協，因為自從第一代iPhone革新性的使用觸摸屏之后，十多年以來手機在工業設計方面并沒有太多的創新，大部分廠家是在屏幕分辨率，后蓋材質，攝像頭像素上面做文章，而蘋果作為一個工業設計創新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創新，被認為是工業設計乏力之后推動交互設計創新的無奈之舉。

但無論支持還是反對，前置攝像頭挖孔屏終究是一個過渡性的方案，最終會被全面屏所替代，而在這個過渡時期，很明顯蘋果的解決思路與國內的絕大多數廠商都不一樣。

04

為什么國產手機不做靈動島

國產手機的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設計都已經非常成熟，但是為什么經過這么多年的迭代，依然沒有創新呢？

思維方式的差異

國產手機廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現階段的技術沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎，把這個區域運用到極致。

缺少創新和引領者

似乎國內的用戶更關心的是電量是否持久、屏幕刷新率高不高、拍照功能強不強大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關注從0到1，因為這樣做的性價比的確不高。

市場的接受和認可程度

當劉海屏第一次出現的時候，很多用戶都在吐槽，其中也包括很多蘋果的忠實用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經過一兩年的審美教育以及國產手機的跟風之后，才慢慢的被更多用戶所接受。因此國內的廠商很難有信心通過一己之力去改變用戶習慣，并贏得市場的認可。我相信，蘋果發布以后，各大廠商已經在積極的學習和模仿，新的一輪內卷即將拉開帷幕。

即便如此，國產廠商也并不是完全沒有在前置攝像頭的區域努力嘗試過。例如魅族曾經在前置攝像頭上顯示當前電量，稱之為「環形電量」，并盡可能的使其與狀態欄的其它信息融為一體。

榮耀的通話時間膠囊和自拍膠囊，都以前置攝像頭為基礎做延展，可以看得出在想盡辦法的規避前置攝像頭所帶來的不好體驗。

雖然VIVO的原子通知不是圍繞前置攝像頭區域拓展，但從效果和想法來看，也與靈動島的概念比較類似。

HTC曾經出過一款HTC U Ultra，當然那時候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。

除此以外，幾乎所有劉海屏的手機都有把劉海隱藏起來的功能。

05

對設計師的影響

靈動島的出現，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規范進行了解構再重做，就好比「劉海屏」首次出現的時候，需要設計師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。

新的交互方式

之所以叫靈動島，就是因為它是「靈動」的，擁有不同的狀態變化，以適應各種功能提示和操作。設計師在使用這個功能的時候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。

新的容器

不同形態的容器可以裝載不同的內容，相比于以往常規的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時候，留給設計師更多的想象空間。

新的表達方式

靈動島相當于一個永遠在桌面上的島嶼，比任何App的優先級都要高，所以會成為各個應用的必爭之地，使用一種好的表達方式，必然能夠達到事半功倍的效果，因此也是考驗設計師在寸土寸金的區域中，通過視覺化手段表達的能力。

最后，我想蘋果的初衷是為了更好的用戶體驗，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會得到用戶的喜愛和市場的認可。

我認為靈動島既是一種創新也是一種妥協，對于工業設計硬件創新乏力的妥協，更是對技術發展的妥協。我也相信，真正的全面屏時代終究會到來，期待那個時候蘋果再一次給我們帶來真正意義上的，里程碑式的，創新！

作者：撿蘑菇的人

轉載請注明：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

潮流是個輪回，不光我們看的衣服、化妝品、哪怕是那些短視頻，同樣的事情也發生在用戶界面（UI）設計中。從模仿現實世界物體的界面到沒有任何修飾的極簡界面，不同的風格優缺點各異。只有學習并了解了歷史上曾流行的趨勢，你才能進行新的嘗試。這對于創新、推動設計行業的發展和提升你自己的設計能力都是至關重要的。下面本文將介紹十大UI設計趨勢，對每位設計師來說都值得一看。

1.擬態主義

擬態主義是用來設計最早的圖形用戶界面的視覺方法。在擬態主義中，設計元素模仿現實世界中的對應物來連接物理世界和數字世界。最著名的例子是回收站的圖標，它模仿了現實生活中的回收站。

當個人電腦或智能手機首次出現時，設計師需要將它們設計成第一次使用的人也能理解的樣子。因此，擬態主義設計將與現實世界的相似性置于視覺吸引力之上，以確保直觀的用戶體驗。

蘋果公司的iOS操作系統便在早期版本中于用戶界面上大量使用了擬態設計。

早期蘋果app和軟件的視覺界面模仿現實生活中的物體，就算是首次使用的用戶也能一眼就看明白

2010年初之前，擬態設計是行業標準。這種設計美學大大方便了人們過渡到數字平臺。但隨著越來越多的人成為數字原住民，缺乏想象的設計元素對用戶體驗而言變得不再那么重要。此外，因為高度擬真，所以擬態主義設計元素需要大量的技術能力。人們數字素養的提升為新的UI設計風格興起鋪平了道路。

2.極簡主義

受極簡主義藝術運動的影響，UI設計領域也開始刮起極簡的風潮。極簡主義的主要原則是 “少即是多”。極簡主義并不是空洞和模糊的設計。它推崇的是 “少即時多”–正如美國作家Joshua Becker的書名所言–意味著要簡化視覺空間，換句話說，使用更少的元素，以便能夠突顯最重要的東西。

極簡主義界面優雅簡潔，注重每個元素的功能，重視負空間和大膽的顏色、字體之間的組合。總的來說，極簡主義的用戶界面可以非常實用，因為沒有任何裝飾性元素。因此–如果設計得好的話–用戶會有一個高度直觀的設計之旅。極簡主義界面往往擁有一種優雅而精致的視覺吸引力。

作家Alan Trotter的網站采用了極簡UI設計，用戶需點擊突出顯示的單詞來查看隱藏內容

極簡主義于20世紀50年代末在紐約興起，其主要特征是秩序、簡單和和諧。極簡主義的 “少即是多 “原則后來被德國工業設計師迪特爾-拉姆斯改編為 “少而精 “，列為他的“好設計原則”之一。也有人解釋這一原則為：”好的設計是盡可能少的設計”。

“一個形狀、一個體積、一種顏色、一個表面，它們是獨立存在的，不應該淪為整體的一部分。形狀和材料不應該被它們所處的環境所改變?！?– 唐納德-賈德，美國藝術家

除了極簡主義本身，許多其他的UI設計趨勢–包括扁平化設計–都或多或少地遵循了極簡主義的原則。

3.扁平化設計

扁平化設計是一種以簡約為中心的UI設計美學，它將界面設計的范式從現實中的物體轉移到元素的圖解簡化。這種UI趨勢代表了一種實質性的技術優勢，尤其是在移動設備上，因為它提升了設備的加載速度。扁平化設計使用極簡的方式處理UI元素，不添加任何陰影或裝飾物。在個性和視覺吸引力上，扁平化設計很大程度依賴于明亮的色彩和高超的字體排版技術。例如，設計師會尋找本身便足夠有趣的字體，但它們的筆畫要均勻，并且符合極簡美學的風格。

扁平化設計在2012年隨著Windows 8、蘋果的iOS 7和谷歌的Material Design的發布而獲得關注。然而，在某種程度上，扁平化設計缺乏視覺功能可見性，用戶有可能不知道哪些元素可以互動。

iOS 7控制中心采取扁平化設計

2.0版本的扁平化設計誕生后，其視覺功能可見性和使用性得到提升。扁平化設計開始利用微妙的陰影或顏色變化來突出互動元素，向用戶表明如何與設計進行互動。這些微妙的變化有助于增加深度和維度，從而提高使用性，扁平化設計的視覺效果干凈整潔不雜亂。

4.包豪斯主義

包豪斯界面設計風格圍繞幾何圖形如半圓形、圓形、矩形、三角形等展開，采用各種創新字體和非干擾、非功能性的細節。這種設計風格依賴于設計元素本身：線條、形狀、顏色。包豪斯主義的特點為抽象的形狀和平衡的形式。

1919年，德國魏瑪開始了包豪斯藝術和設計運動，從而衍伸出了包豪斯用戶界面設計風格。包豪斯藝術和設計運動通過將手工業與藝術相結合，在藝術與工業之間架起了一座橋梁。包豪斯運動的基本原則是 “形式服從功能”。這一原則深刻地影響了后世的設計。根據這一原則，從物體的預期功能或目的出發，設計師設計出簡單的幾何圖形，從而制造出一種極簡主義美學。它倡導的是一種幾何的、抽象的風格，沒有什么情感或情緒，也沒有什么歷史元素。

包豪斯風格下的數字界面有一種優雅、現代和簡潔的視覺吸引力。

“將包豪斯原則運用到現代產品設計中，意味著要勇于面對紛雜的質疑?！? Melanie Daveid，用戶體驗設計師和藝術總監，以及Adobe Live主持人

5.深色模式

深色模式的用戶界面令淺色文本位于深色背景上。這種顏色方案減少了設備屏幕發出的亮度，一些研究指出，它有助于通過減少眼睛的疲勞來改善人體視覺。這種能潛在改善眼睛疲勞的功能對于用戶需要閱讀大量內容的界面特別有幫助。而且深色模式在一定程度上有助于節約電量。深色主題界面的誕生是對暗字明底方案的反擊，后者模擬了墨字白紙的外觀。

深色模式趨勢出現在2016年，當時Twitter試驗了一個暗色底的顏色方案。不過，在深色背景上使用亮色文本的操作其實早已出現–比如說《黑客帝國》電影中深色屏幕上的綠色數字。但深色模式真正流行開來是得益于蘋果。蘋果公司在iOS 13的更新中發布了深色模式選項，從那以后，深色模式成為許多界面中的常見選項，用戶可以在淺色和深色界面之間進行選擇。

深色模式vs淺色模式

深色模式的用戶界面具有鮮明、時尚和現代的特征，對眼睛更加溫和。因此，深色模式的流行可能緣于解決用戶用眼過度問題的需要。如果你的產品需要用戶長時間觀看屏幕，不妨考慮添加一個深色模式選項。

就拿深色模式來說現在身邊很多朋友都在用，所以我們以前不喜歡的，在未來的某一天還是會重新愛上的。

作者：馬克筆設計留學

轉載請注明：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司