編輯導(dǎo)語：很多產(chǎn)品在使用時，都會有“用戶反饋”這一個設(shè)置，用戶可以將自己的操作體驗反饋給商家，但你真的了解“用戶操作反饋”是怎樣的一個機制嗎？這篇文章詳細講解了“操作反饋”這一設(shè)置，一起來讀一讀吧。

背景

前幾天使用自己產(chǎn)品的時候，點擊作業(yè)列表想要查看作業(yè)詳情，點擊之后沒有反應(yīng)，然后又連續(xù)點擊了好幾下，過了幾秒鐘，界面開始連續(xù)跳轉(zhuǎn)。后來才知道，因為用戶量比較大，產(chǎn)品稍微會有一些卡頓，導(dǎo)致用戶點擊后，產(chǎn)品沒有實時的反饋給用戶，使得用戶也變得不知所措。

那為什么會出現(xiàn)這種情況呢？主要原因就是沒有用戶操作反饋。一個好的產(chǎn)品需要根據(jù)用戶不同的行為操作，實時給出反饋，告知用戶當(dāng)前狀態(tài)或建議，消除用戶因為不確定性帶來的不安感和焦躁感。

可以將用戶整個操作流程簡化為：用戶輸入—平臺反饋—結(jié)果反饋?？梢钥闯龇答伷鋵嵎譃閮煞N：過程反饋（平臺反饋）和結(jié)果反饋。

可以看到無論Google公司推出的Material Design，還是蘋果公司的iOS設(shè)計規(guī)范，都對用戶過程反饋做了細致的設(shè)計規(guī)范。

國內(nèi)也有很多體驗很好的APP對于用戶反饋方面也做的不錯，例如QQ、飛書。

3. 頁面

頁面反饋，相較于彈窗會更重一些。一般也用于比較重要的操作流程的結(jié)果頁面，例如淘寶買完東西的結(jié)果頁面、餓了么下單完成后的結(jié)果頁面。

4. 動畫

動畫的合理使用不僅可以告知當(dāng)前狀態(tài)，還會將用戶帶入當(dāng)前場景，吸引用戶注意力。例如，微博的點贊，會出現(xiàn)一個點贊的動畫，讓點贊變得更加有趣。

微信圖書，點擊進入書本詳情時會出現(xiàn)一個打開書本的動畫，讓用戶帶入實際看書場景，增強沉浸感。

5. 音效

音效的反饋也比較常見，例如ios下載時，會有叮咚一聲，聲音的反饋不僅提升了用戶體驗，對于加強品牌認知也很有幫助。

三、總結(jié)

以上是我對于操作反饋的一些整理和復(fù)盤，其中也借鑒了一些大神的佳作，不到之處，希望和大家一起探討交流。

在實際項目的運用中，也會根據(jù)實際的研發(fā)情況，逐步的去調(diào)整，不斷地完善產(chǎn)品細節(jié)。

本文由 @小太陽不愛吃辣椒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導(dǎo)語：自適應(yīng)設(shè)計指能使界面自適應(yīng)顯示在不同大小終端設(shè)備上的設(shè)計方式及技術(shù)。而內(nèi)容自適應(yīng)則需要對用戶行為進行預(yù)判進而改變設(shè)計內(nèi)容，本文作者將對自適應(yīng)設(shè)計在內(nèi)容上的應(yīng)用進行分享，值得閱讀學(xué)習(xí)。

我們一般說的自適應(yīng)設(shè)計，多半指的是界面自適應(yīng)，即為不同的終端設(shè)計不同的界面布局與操作流程。而內(nèi)容自適應(yīng)，是一種根據(jù)用戶標(biāo)簽與操作行為預(yù)判用戶目標(biāo)所需頁面內(nèi)容的方式，他的優(yōu)點是既能預(yù)測交互意圖，實現(xiàn)信息量的智能輸出，同時也能滿足不同交互需求，改變界面樣式，達到降低人機交互負荷的目的。

以下，是道樂UED團隊 基于查閱的資料以及行業(yè)的積累，帶來的一篇關(guān)于內(nèi)容自適應(yīng)的分享。

目錄：

1. 內(nèi)容自適應(yīng)的界定
2. 適用場景及案例分析
3. 利弊分析
4. 內(nèi)容自適應(yīng)設(shè)計在金融產(chǎn)品上的應(yīng)用思考

一、內(nèi)容自適應(yīng)的界定

目前自適應(yīng)界面在內(nèi)容上的呈現(xiàn)大致包括兩種類型：

1. 實時自適應(yīng)

顧名思義，就是根據(jù)用戶當(dāng)下的操作，實時判斷用戶所需，從而調(diào)整不同的信息展示與布局，他的優(yōu)勢在于能盡量減少頁面上與用戶目標(biāo)不相關(guān)信息的展示，從而提升用戶操作的效率與準(zhǔn)確度

2. 歷史自適應(yīng)

通過用戶標(biāo)簽與過往數(shù)據(jù)的分析，調(diào)整頁面內(nèi)容的展示數(shù)量與優(yōu)先級，僅展示用戶感興趣或可能感興趣的內(nèi)容，從而提高用戶在使用產(chǎn)品中的轉(zhuǎn)化率。

總的來說，內(nèi)容自適應(yīng)更趨向于對用戶行為軌跡的縱向思考，將“用戶尋找信息”的被動服務(wù)模式轉(zhuǎn)化為“信息尋找用戶”主動服務(wù)模式。滿足差異化的用戶需求，提升企業(yè)系統(tǒng)的用戶體驗和人性化服務(wù)水平。

二、適用場景及案例分析

1. 實時自適應(yīng)

（1）搜索

① Google搜索

自適應(yīng)設(shè)計在搜索上的應(yīng)用意味著針對每個用戶的每一次搜索，都會產(chǎn)生一個定制的界面，該界面將自身塑造成所顯示的信息。請看以下示例：如何根據(jù)不同的用例更改搜索結(jié)果頁面。

最近，Google搜索的設(shè)計重點是在用戶點擊搜索結(jié)果之前傳遞信息。為此，Google采用了一種稱為自適應(yīng)設(shè)計的方法。

Google搜索適應(yīng)用戶需求的第一種方法是重新安排導(dǎo)航以適應(yīng)結(jié)果。

• 在“lizzo”的例子中，搜索框下面的導(dǎo)航是：（按順序依次為）圖片、視頻、新聞、購物、更多；
• 在“tel aviv”的例子中，導(dǎo)航是：新聞、圖片、地圖、視頻、更多；
• 搜索“aapl”（蘋果公司的股票代碼），導(dǎo)航顯示：金融、新聞、書籍、購物、更多；

Google有362,880種獨特的方式來排列導(dǎo)航，以適應(yīng)搜索查詢。然而，自適應(yīng)設(shè)計的最大例子是搜索結(jié)果本身的布局。結(jié)果頁面是完全模塊化的：根據(jù)搜索結(jié)果，不同的元素出現(xiàn)在不同的配置中。

例如，音樂家Lizzo的搜索結(jié)果集中在媒體上：一組模塊以本機格式顯示視頻，圖片和歌曲。還顯示最近的新聞，推文和即將舉行的活動，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的個人資料鏈接。直到頁面底部，我們才能看到看起來像傳統(tǒng)搜索結(jié)果的元素。

另一方面，以色列特拉維夫市的搜索結(jié)果為旅行者提供優(yōu)先信息。圖片、地圖、當(dāng)?shù)靥鞖庖约芭c旅行有關(guān)的問題（“特拉維夫?qū)τ慰桶踩珕幔?rdquo;、“特拉維夫以什么聞名？”）優(yōu)先于傳統(tǒng)搜索結(jié)果。模塊促進了特拉維夫的活動以及對附近其他城市的推薦。搜索結(jié)果頁上可能會出現(xiàn)數(shù)千個不同的模塊，從簡單的布局驅(qū)動模塊到完全獨立的應(yīng)用程序。

例如，“aapl”的搜索結(jié)果頁上，股票代碼模塊顯示了當(dāng)前價格和交互式歷史價格圖。

通過自適應(yīng)設(shè)計，所有有關(guān)內(nèi)容、格式和順序的決策都是由算法決定的。設(shè)計人員的作用不再是創(chuàng)建明確的外部布局。

如今，尖端產(chǎn)品的設(shè)計者，以及未來日常產(chǎn)品的設(shè)計者，正在就生成這些布局的規(guī)則做出決策。

② 淘寶搜索

淘寶搜索結(jié)果頁，當(dāng)用戶往下滑動查看更多時，系統(tǒng)判斷你根據(jù)當(dāng)前搜索頁沒有找到想要的內(nèi)容，則根據(jù)不同物品展示物品的更細分的篩選，如啤酒會c展示“德國進口啤、國產(chǎn)精釀、比利時精釀”，方便用戶找到目標(biāo)物品。

③ OTA平臺PC端（去哪兒、攜程等）

攜程/去哪兒pc端中，Tab前置條件是國內(nèi)/國際，在選擇國內(nèi)機票時，默認單程。在選擇“國際/港澳臺機票”時，則默認機票往返。

這樣的功能設(shè)置是基于對用戶需求的深入研究得出的，主要有以下幾個原因：

• 最優(yōu)方案不同：國內(nèi)單程往返的最優(yōu)方案多半有可能不是一個航空公司，要一個一個查詢，（盡管同一航空公司往返有1+1小于2的規(guī)則），會對客人更有利，因為經(jīng)常會出現(xiàn)1+0.5=1.5的情況。國際票往返的最優(yōu)方案通常還是一家航空公司的便宜，這個基本上是定律，所以這個默認設(shè)定是培養(yǎng)消費習(xí)慣之舉。
• 使用場景不同：國際機票的使用場景下，大都有明確時間區(qū)間，簽證限制了用戶在國外停留的時間。用戶不得不提前計劃。且回程可選擇交通工具有限。相對而言，國內(nèi)機票場景較自由，提前計劃必要性相對較弱。
• 觀測數(shù)據(jù)證明：根據(jù)同程的國際機票訂購數(shù)據(jù)顯示，70%以上的用戶選擇了往返。

基于以上充分的原因，這個自適應(yīng)功能設(shè)計就得以開發(fā)并成功提高用戶的使用效率。

（2）根據(jù)用戶靜態(tài)標(biāo)簽優(yōu)化結(jié)果

靜態(tài)標(biāo)簽：用戶主動提供的數(shù)據(jù), 指用戶不變的基礎(chǔ)信息，多為用戶固定數(shù)據(jù)，如姓名、性別、年齡、身高、體重、職業(yè)、地區(qū)、設(shè)備信息、來源渠道等。

定位地區(qū)：大眾點評——切換城市

大眾點評的這個功能經(jīng)常被拿出來說，當(dāng)你到另一個城市，通過獲取定位申請，判斷你是來這座城市旅游的場景，從而頁面展示中入口就改成了跟旅游相關(guān)，這其實也有點內(nèi)容自適應(yīng)的意思，通過用戶不同的操作展示不同的內(nèi)容。

2. 歷史自適應(yīng)

歷史自適應(yīng)主要集中在特定領(lǐng)域的個性化界面定制和推薦等方面。針對不同用戶呈現(xiàn)不同界面，根據(jù)用戶的類型、任務(wù)特點、喜好等提供不同的界面樣式。

（1）根據(jù)用戶動態(tài)/預(yù)測標(biāo)簽算法推薦定制內(nèi)容

預(yù)測標(biāo)簽：平臺介入的數(shù)據(jù)，指根據(jù)用戶在平臺內(nèi)的行為數(shù)據(jù)對用戶未來行為或喜好進行預(yù)測；是設(shè)計千人千面和運營策略的關(guān)鍵；比如某電商平臺，根據(jù)用戶A“月均消費5單，且有數(shù)額過萬的運動商品”的購物數(shù)據(jù)，平臺會給用戶A打“高頻、品質(zhì)敏感性、運動”的標(biāo)簽，后期會更多推薦高品質(zhì)運動商品及相關(guān)運動品牌活動的精準(zhǔn)推送。

用戶標(biāo)簽是構(gòu)成用戶畫像的核心因素，是將用戶在平臺內(nèi)所產(chǎn)生的行為數(shù)據(jù)，分析提煉后生成具有差異性特征的形容詞。即用戶通過平臺，在什么時間什么場景下做了什么行為，平臺將用戶所有行為數(shù)據(jù)提煉出來形成支撐業(yè)務(wù)實現(xiàn)的可視化信息。

① 用戶生產(chǎn)內(nèi)容（UGC）

互聯(lián)網(wǎng)上的許多站點開始廣泛使用用戶生成內(nèi)容的方式提供服務(wù)，許多圖片、視頻、博客、播客、論壇、評論、社交、Wiki、問答、新聞、研究類的網(wǎng)站都使用了這種方式。

② 電商平臺

這種平臺一般會隨著用戶的使用，網(wǎng)站會積累及不斷修正及展示最貼近用戶喜好的產(chǎn)品，從而進行推薦。功能上適應(yīng)了用戶的喜好，會大大增加用戶的粘性。

③ APP Store 應(yīng)用頁面大變動：不同用戶可看到不同功能與內(nèi)容

自定義產(chǎn)品頁功能讓開發(fā)者可以面向不同用戶展示 App 的不同功能，產(chǎn)品頁優(yōu)化功能則讓開發(fā)者們能夠測試不同的截屏、預(yù)覽視頻，甚至 App 圖標(biāo)。

蘋果指出，得益于 App Store Connect 詳實且注重隱私的分析，開發(fā)者可以了解自己用戶的偏好，從而決定產(chǎn)品頁的展示內(nèi)容。

④ SoulAPP創(chuàng)始人：Sou了APP功能符合不同場景的用戶需求

SoulAPP多種匹配機制,功能符合不同場景的客戶需求。Soul利用AI大數(shù)據(jù)，依照性格、興趣等因素,劃分用戶。通過這種精準(zhǔn)的方式分類用戶,以便用戶之間能夠更高效地建立連接。第一次注冊SoulAPP，用戶需要通過系統(tǒng)的一些答題測試,以便于生成符合自己的性格報告。接著就是通過上述數(shù)據(jù)采集，劃分專屬圈子，這里就是大家經(jīng)常說的“星球“，這些都是基于SoulAPP的AI功能。

三、利弊分析

1. 優(yōu)點

• 增強用戶體驗：自適應(yīng)界面不能讓用戶控制自適應(yīng)過程。對用戶動機準(zhǔn)確的判斷和對應(yīng)的自適應(yīng)設(shè)計能有效簡短交互路徑，優(yōu)化用戶的交互體驗。
• 增強用戶粘性：基于精準(zhǔn)人群的需求分析和功能設(shè)計，更容易得到用戶認可，更容易打造產(chǎn)品亮點，提供精準(zhǔn)個性化的服務(wù)，比如對于社區(qū)產(chǎn)品，內(nèi)容個性化推薦將有效提升社區(qū)粘度。
• 利于公司可持續(xù)發(fā)展：一方面使公司更具競爭壁壘，及時洞察市場風(fēng)向，預(yù)測產(chǎn)品所占市場規(guī)模及前景發(fā)展，及時優(yōu)化公司戰(zhàn)略，避免過早陷入發(fā)展瓶頸；另一方面沉淀大批用戶數(shù)據(jù)，既利于孵化創(chuàng)新產(chǎn)品，也豐富盈利模式（比如與第三方合作）。
• 提升產(chǎn)品設(shè)計價值：基于精準(zhǔn)人群的需求分析和功能設(shè)計，更容易得到用戶認可，更容易打造產(chǎn)品亮點，提供精準(zhǔn)個性化的服務(wù)，比如對于社區(qū)產(chǎn)品，內(nèi)容個性化推薦將有效提升社區(qū)粘度。
• 提高運營效率：如今的新用戶獲客成本居高不下的情況下，利用現(xiàn)有用戶畫像，做好存量用戶的維護，通過精準(zhǔn)營銷策略，提升存量用戶的留存與活躍。

2. 缺點

自適應(yīng)界面同樣有一些“小缺點”，違背了一些眾所周知的可用性原則：

• 缺乏控制：自適應(yīng)界面不能讓用戶控制自適應(yīng)過程。
• 不可預(yù)測性：由于用戶不能直接控制界面，用戶不能預(yù)測界面接下來的某些行為。
• 透明度：通常，用戶不能理解在界面中，自適應(yīng)是如何起作用的。在設(shè)計自適應(yīng)界面時的其中一個問題就是讓用戶可以見到多少自適應(yīng)比例。
• 私密性：用戶必須接受基于用戶模型的一種系統(tǒng)，將會一直維持與系統(tǒng)交互的狀態(tài)，持續(xù)收集用戶使用行為。
• 信任度：用戶在系統(tǒng)中的信任是容易改變的，如果自適應(yīng)系統(tǒng)給予了錯誤的指令。
• 開發(fā)成本：提供內(nèi)容的自適應(yīng)度，通常意味著著更多的開發(fā)成本。要把控好自適應(yīng)性設(shè)計的度，而非一味地增加開發(fā)量。

四、內(nèi)容自適應(yīng)設(shè)計在金融產(chǎn)品上的應(yīng)用思考

1. 基礎(chǔ)設(shè)計原則思考

內(nèi)容自適應(yīng)的核心在于，基于用戶過往的操作以及行為路徑的分析，提前預(yù)判用戶下一步需要的內(nèi)容，從而讓用戶能更便捷的使用產(chǎn)品。但是在金融產(chǎn)品的設(shè)計中比較特殊，往往用戶在使用產(chǎn)品的一個核心需求是安全感，產(chǎn)品安全、資產(chǎn)安全、操作安全等都是用戶著重關(guān)注的點，所以如果一味的進行內(nèi)容自適應(yīng)設(shè)計，會讓用戶產(chǎn)生“信息泄露”的擔(dān)憂，從而失去對該產(chǎn)品的信任。

基于以上內(nèi)容自適應(yīng)的分析以及金融產(chǎn)品設(shè)計的特殊性，我們來看看有哪些可以運用到金融產(chǎn)品的設(shè)計中來。

2. 金融產(chǎn)品設(shè)計思考

（1）金融應(yīng)用的[截圖]功能

截圖功能可以根據(jù)用戶場景與用戶目標(biāo)兩個維度進行分析。截圖操作的發(fā)生幾乎會發(fā)生在用戶使用金融應(yīng)用的各個場景，比如瀏覽金融產(chǎn)品、查看產(chǎn)品詳情、查看持倉資產(chǎn)、收益等等，而不同的場景用戶的目標(biāo)也有所不同，我們可以根據(jù)用戶不同的操作目標(biāo)，為用戶提供自適應(yīng)的內(nèi)容來方便用戶的操作。

截圖常見的用戶目標(biāo)大致分為兩類：報錯與分享。我們可以為這兩個用戶目標(biāo)做一些內(nèi)容上設(shè)計。

報錯一般會關(guān)聯(lián)產(chǎn)品的在線客服功能，那么我們在用戶截圖操作發(fā)生后，提供在線客服的入口，同時分析報錯自身的用戶行為，如可能是針對頁面的哪個點或者哪個區(qū)域報錯，那我們可以針對這一點再提供編輯截圖的功能等等。

如此根據(jù)用戶目標(biāo)拆解用戶行為，設(shè)計對應(yīng)的功能來滿足用戶操作，從而減少用戶的操作路徑。

分享可根據(jù)用戶場景設(shè)計不同的內(nèi)容，如：

• 當(dāng)截圖發(fā)生在產(chǎn)品詳情頁，那此時截圖的分享意圖可能是分享此只產(chǎn)品給好友，我們可以為此設(shè)計一個關(guān)于產(chǎn)品信息的分享頁來便于用戶分享；
• 當(dāng)截圖發(fā)生在資產(chǎn)頁，此時的截圖的分享意圖可能是炫耀自己的收益，那我們可以生成收益海報等內(nèi)容給用戶，從而滿足用戶的心理預(yù)期。

（2）金融應(yīng)用的[內(nèi)容管理]功能

買衣服的時候，絕大多數(shù)人在意的是是否合身，對于數(shù)字產(chǎn)品，同樣是如此。在一個金融應(yīng)用的內(nèi)容管理功能當(dāng)中，會推送大量的內(nèi)容給用戶，絕大多數(shù)的用戶幾乎沒有時間來掌控所有的信息，導(dǎo)致部分對用戶有用的信息被忽略，這樣意味著內(nèi)容的可定制化是極其重要的。

內(nèi)容的可定制化體現(xiàn)在不同用戶的分層上，基于分層，我們可以為相同類型用戶推送內(nèi)容。如持有私募基金的用戶，我們可能會更多為其推送關(guān)于此類產(chǎn)品的信息以及高端用戶的優(yōu)惠、活動、資產(chǎn)報告等信息。

（3） 金融應(yīng)用的[搜索]功能

金融產(chǎn)品的搜索，除了具備一般應(yīng)用該有的內(nèi)容，如最近搜索、熱門搜索、搜索排行榜等，也需要基于產(chǎn)品特性來思考還有哪些可以展示的內(nèi)容。

根據(jù)用戶行為與數(shù)據(jù)分析，一般搜索的關(guān)鍵詞為基金名稱或者基金代碼，而搜索的目的是查看該產(chǎn)品的信息以及收益情況，那么基于此類目的，我們可以當(dāng)用戶輸入基金名稱后，展示該基金最近的凈值走勢等內(nèi)容，這樣用戶就可以提前了解部分基金信息，可以提前做一個判斷，需不需要進入搜索結(jié)果頁進一步的了解。

除了提前展示該基金部分產(chǎn)品信息以外，我們也可以展示相類似基金，防止用戶因提前獲知產(chǎn)品部分信息而帶來的流失率，當(dāng)用戶不滿意該只基金的近期表現(xiàn)，我們可以為其提供表現(xiàn)良好的基金供其選擇，從而提高產(chǎn)品的轉(zhuǎn)化率。

五、結(jié)語

通過對自適應(yīng)設(shè)計在內(nèi)容上的應(yīng)用探究，我們對內(nèi)容自適應(yīng)的設(shè)計手法及應(yīng)用場景有了初步的理解，也會繼續(xù)的探究并運用到實際的工作中來，希望這些思考能為大家?guī)硪恍椭?/p>

作者：道樂UED全體成員

原文鏈接：https://www.ui.cn/detail/610302.html

本文由 @道樂科技設(shè)計中心 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導(dǎo)語：智能手機現(xiàn)在對于大家來說都并不陌生，而“陀螺儀”作為手機上的一種先進硬件，可以增強手機的使用感，本文作者介紹了一些運用陀螺儀讓人身臨其境的設(shè)計，讓我們一起來看看吧！

iPhone率先將先進硬件（如陀螺儀、重力感應(yīng)等傳感器）引入手機，讓智能手機的硬件參數(shù)和升級成為用戶的重要選購參考，設(shè)計師們也會在設(shè)計時關(guān)注到硬件的應(yīng)用和潛力挖掘。今天我們淺聊一下“陀螺儀”在增強交互體驗、豐富交互反饋上的實際應(yīng)用。

▲ 智能手機有豐富的硬件能力

一、陀螺儀是什么

在我們的自然交互場景中，視野的變化（如觀察四周）和速度的感受（如拍打搖晃）是和五感非常緊密的體驗。手機中的陀螺儀和加速度傳感器就是這樣的硬件，可以感知我們在使用設(shè)備時的角度、位置和速度變化。

▲ 陀螺儀可測量設(shè)備的方向和角速度

通過陀螺儀傳感器，手機應(yīng)用能感知用戶設(shè)備的角度變化并觸發(fā)相應(yīng)的動作和交互，拓展平面屏幕空間，實現(xiàn)更加有空間操縱感的體驗。比如，最常見的就是的手機橫/豎屏自動切換、導(dǎo)航指路、手機搖一搖等功能。

▲ 手機橫豎自動切換

▲ 地圖方向感知

二、讓體驗增強的應(yīng)用場景

1. 越出靜態(tài)視圖邊界

通常背景氛圍圖片的展示區(qū)域最多只有屏幕寬度，但是結(jié)合陀螺儀的角度感知，通過視差變化可以將視圖延展到原先被限制的空間之外，給用戶更多的視覺信息，形成類3D的空間效果。淘寶人生的套裝展示頁中，當(dāng)轉(zhuǎn)動手機時背景圖和人物模型也會跟隨變化，讓人物及服裝的展示更加生動和有沖擊力。

▲淘寶人生套裝展示

當(dāng)將多幀圖片匹配視角變化時，甚至能帶來裸眼3D的效果。

▲類裸眼3D效果

根據(jù)陀螺儀旋轉(zhuǎn)視角，靜態(tài)圖片可以不僅僅固定在單一位置上，還可以升級為交互性內(nèi)容，模擬現(xiàn)實空間里物品的拋、彈、跳，讓信息交互更有驚喜感，讓用戶身臨其境更有控制欲，不知不覺反復(fù)把玩。

▲ 好好住徽章動態(tài)交互

很多應(yīng)用中，陀螺儀承載了其核心的能力，給用戶帶來突破屏幕的360度的全景體驗。比如在星圖類APP中，跟隨陀螺儀的變化，可以將浪漫的星空變得可識別和觸手可及。

▲ 星空APP–即時星圖體驗

2. 讓游戲更具操縱感

陀螺儀在體感類手游游中可以說是標(biāo)配，幾乎所有需要感知三維空間變化的游戲都需要用到它。尤其是賽車、飛機或者體育類游戲，對角色控制和視角變化有高精準(zhǔn)度要求。通過調(diào)整手機姿勢、上下左右擺動，模擬真實空間的操控性反饋，增強了游戲空間的3D體感，用戶跟隨視角變化在游戲里上下翻飛，有強烈的代入感和沉浸感。

▲ 狂野飆車的鏡頭視角變化

▲ 和平精英體感操作

VR體感游戲中的陀螺儀跟隨用戶肢體的動作，實現(xiàn)虛擬空間物品距離和空間視角的變化。

▲ AR體感游戲

3. 現(xiàn)實空間的互動交互

除了可以操控平面元素，在我們使用3D AR交互功能時，陀螺儀也可以增強與現(xiàn)實空間交互的真實感。和現(xiàn)實世界的自然交互一樣，當(dāng)相機靠近被跟蹤的3D模型時，3D形象需按比例放大，并跟隨相機的視角調(diào)整3D模型的展示視角。

▲ 3D應(yīng)用

▲ AR跟隨并觸發(fā)功能

而且，在有多維空間切換訴求的場景中，可以通過監(jiān)測手機的角度變化，在2D/3D兩種空間中快速輕便切換。比如高德地圖的步行導(dǎo)航，當(dāng)用戶抬起手機能迅速進入AR導(dǎo)航模式，輕松獲得3D實景指引，讓用戶想迷路都難。

▲抬起喚醒AR導(dǎo)航

▲放下恢復(fù)平面導(dǎo)航

▲高德地圖喚醒AR實景導(dǎo)航

在智能玩具中也會用到陀螺儀，例如Smart Car教育機器人。在它的手勢控制手表上就裝有陀螺儀，可以根據(jù)手勢控制機器人移動。

▲ 陀螺儀體感控制

陀螺儀還能植入其他生活用品中，比如在這款潮人喜愛的LED鞋中，它跟隨你腳步的速度和角度，展示炫目的燈光顏色和模式，讓你成為人群的焦點。

▲ 發(fā)光的鞋子通過陀螺儀

4. 讓視聽一體身臨其境

陀螺儀除了可以帶來視覺和體感上的空間感和操縱感，在音頻上也能實現(xiàn)更真實極致的環(huán)繞聲體驗。比如，AirPods Pro內(nèi)置的陀螺儀和加速度傳感器會對佩戴者的頭部進行追蹤，即使你的位置變化也能使環(huán)繞音效保持在固定位置，讓環(huán)境音會根據(jù)人的移動而移動，創(chuàng)造沉浸式的聲音體驗。

▲ Airpods環(huán)繞聲定位

Airpods的空間音頻能力，也可以應(yīng)用到界面交互上。通過把頭部角度變化映射到圖片視角變化，形成視差效果，轉(zhuǎn)動頭部就能看到更多內(nèi)容。

▲ Airpods跟隨示例

三、更多可能

除了陀螺儀，移動設(shè)備還有很多豐富的傳感器硬件能力，如壓力傳感器、光學(xué)傳感器、震動傳感器、NFC等，各種令人印象深刻的交互表達中都有它們的身影。例如，zenly的bump功能通過近場互動快速添加好友和查看信息，字體設(shè)計網(wǎng)站通過屏幕多指觸控可以讓設(shè)計更自由和可控。

▲zenly近場互動

▲多指觸屏設(shè)計字體

在體驗設(shè)計中，我們可以在合適的場景使用硬件能力集成更豐富的功能，創(chuàng)造更加匹配自然行為和有創(chuàng)意的交互和反饋，為用戶帶來更多直接有趣的體驗~

作者：能操縱空間的；

原文鏈接：https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw

本文由 @淘寶設(shè)計 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導(dǎo)語：交互設(shè)計本質(zhì)上就是設(shè)計產(chǎn)品的使用方式的過程，“如何才能做出合理的B端交互決策”是很多人都在思考的問題。在這篇文章里，作者聚焦具體的實戰(zhàn)場景，分享了一些自己做B端交互設(shè)計的經(jīng)驗，一起看看吧。

這陣子想了想關(guān)于交互知識的分享，還是應(yīng)該要拓展成一整個系列的內(nèi)容，包含各類組件、控件和行為的解析。

基于我的分享習(xí)慣，我會盡量避免使用太過理論還是空泛的方式進行講解，而是聚焦具體的實戰(zhàn)場景，幫助大家理解如何做出合理的交互決策。

一、交互的全局框架是什么

交互設(shè)計本質(zhì)上就是設(shè)計產(chǎn)品的使用方式的過程，賬號怎么填寫，表單怎么導(dǎo)出，數(shù)據(jù)怎么篩選，列表怎么排序等等……針對每個功能的使用方式，都可以花很長的時間去考慮其合理性。一個項目的交互，就是這個項目所有功能使用方式的總和。

那設(shè)計師如何開始項目的交互設(shè)計？直接進入細節(jié)，開始跟著原型制定輸入框的狀態(tài)，下拉菜單的展開邏輯嗎？

這樣肯定是不行的，項目的交互內(nèi)容又多又雜，設(shè)計師會很快陷入這些細枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳，容易造成項目細節(jié)缺乏統(tǒng)一性，前后矛盾，體驗割裂。

所以，理解項目交互設(shè)計的正確思路，就要知道在項目中有哪些交互內(nèi)容，它們對應(yīng)的層級和設(shè)計對象是什么。

在這里，我把需要設(shè)計的交互對象拆分成4個種類，它們從大到小依次為：

1. 全局框架：項目的主要模塊排版和布局，產(chǎn)品使用的主要依據(jù)和步驟
2. 功能流程：需要較多操作步驟才可以完成的一個完整的用戶使用目標(biāo)
3. 組件操作：一些復(fù)雜模塊、業(yè)務(wù)組件的完整操作方法和狀態(tài)
4. 控件使用：基礎(chǔ)控件元素的操作方法和狀態(tài)

我們先圍繞在全局框架這個類型進行解釋，什么是項目的主要模塊排版和布局，以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。

比如大家都用過 Adobe 的軟件，應(yīng)該會有個感覺，就是熟悉了其中一款后用下一個，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來感覺就感覺非常別扭，往往要從頭開始學(xué)起，比如對標(biāo) PS 的 Affinity Photo、Pixelmator。

為什么會出現(xiàn)這樣的反差？就是因為 Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架，操作方式，讓全家桶用戶可以用最快的方法適應(yīng)不同的軟件。

包括頂部的屬性欄，左側(cè)的工具欄，中間的標(biāo)簽欄、創(chuàng)作區(qū)域，右側(cè)的不同工作窗口排列形式。

除了主要界面的布局框架外，還包含一些二級窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開 PS 內(nèi)的首選項設(shè)置和屬性設(shè)置窗口，和其它幾個軟件的屬性設(shè)置窗口幾乎一致。

而在 Affinity 中，軟件首選項設(shè)置就沒有使用左側(cè)導(dǎo)航，而是類似 Mac 通用設(shè)置的快速入口分層模式，用慣了 Adobe 再換這個就會有股說不出的別扭。

可能有同學(xué)有疑問，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因為窗口的框架肯定是要考慮功能和場景的，即使使用了多種窗口類型，那也是有規(guī)律的應(yīng)用在操作方式相近的場景中。

再回想一下 PhotoShop 的基本操作流程，就是在創(chuàng)建文件以后，通過左側(cè)工具添加圖層元素到中間畫布區(qū)域進行排版，再在右側(cè)屬性欄中調(diào)節(jié)畫布對象的圖層順序、屬性。

PhotoShop 作為平面領(lǐng)域中的獨角獸，直接影響了絕大多數(shù)同類設(shè)計軟件的框架結(jié)構(gòu)和布局方法。因為絕大多數(shù)設(shè)計師學(xué)習(xí)設(shè)計的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來。

所以，從 Sketch 開始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即時設(shè)計等，都應(yīng)用了幾乎相同的全局框架，所以你只要掌握其中一個就能立馬熟悉其它軟件的使用。

而當(dāng)實際功能和 UI 設(shè)計軟件高度相似的其它幾個 “辦公應(yīng)用” 結(jié)構(gòu)框架不同時，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學(xué)了設(shè)計軟件再去學(xué)這幾個軟件的同學(xué)一定深有感觸。

而其它行業(yè)的軟件，如果沒有一個具備絕對主導(dǎo)性的產(chǎn)品作為標(biāo)桿，那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛，視頻剪輯工具中的 Pr、Finalcut、達芬奇，你就是熟練掌握其中一款，對專業(yè)術(shù)語和必要功能邏輯了如指掌，也需要通過基本教學(xué)才能掌握其它同類軟件。

這就是框架帶來的作用，它是軟件使用方式和操作流程的主要依據(jù)，其它細節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計要從全局框架開始，原因就是設(shè)計師要：

先確定產(chǎn)品整體操作的方式，再去考慮按鈕和表單那些細節(jié)的處理。

二、B端產(chǎn)品的全局框架拆解

雖然前面舉例的都是軟件案例，但只要仔細留意，你們就會發(fā)現(xiàn)網(wǎng)頁端管理系統(tǒng)的操作框架和一般軟件別無二致。只不過相比較五花八門的專業(yè)軟件來說，B 端管理系統(tǒng)的操作框架模式經(jīng)過了長期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例，看起來只是圍繞幾個固定的布局翻來覆去的改顏色和圖標(biāo)。

雖然它們看起來都很像，但依舊包含很多交互細節(jié)是需要設(shè)計師留意和制定的，不是簡單照搬就能設(shè)計出符合項目需要的全局框架。

所以，交互的全局框架到底怎么設(shè)計？

它不是一個個體，而是一個由多個組件、頁面類型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點。

1. 全局框架中的組件

在全局框架的范疇中，包含的組件模塊類型可以分成兩個大類，全局組件和浮層元素。

全局組件是指在項目多數(shù)頁面中都會存在并進行交互的組件，功能往往和當(dāng)前頁面沒有直接聯(lián)系，比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。

而包含的浮層元素，本質(zhì)上也是全局組件，只是它們的共性是不會默認展示，需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認、側(cè)邊抽屜等都是全局化的浮層要素，也是需要在前期做好規(guī)劃的內(nèi)容。

下面就針對這個兩種類型的組件一一展開解釋。

（1）全局組件

a. 導(dǎo)航欄

導(dǎo)航欄不僅僅是 B 端管理系統(tǒng)，也是網(wǎng)站設(shè)計中最重要的組件。優(yōu)秀的導(dǎo)航欄可以清晰的展示項目的頁面層級結(jié)構(gòu)，幫助用戶高效的訪問目標(biāo)頁面。全局框架制定的一步，就是根據(jù)項目的具體情況，選擇合適的導(dǎo)航類型。

導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式：

1. 上方導(dǎo)航：適合選項內(nèi)容較少，預(yù)留更多橫向空間內(nèi)容區(qū)域。
2. 左側(cè)導(dǎo)航：適合選項、層級較多的情況，方便折疊和上下滾動。
3. 混合導(dǎo)航：適合需要有效區(qū)分不同功能區(qū)塊的場景。

確定導(dǎo)航欄的類型，還需要確定導(dǎo)航的操作邏輯，包含幾級菜單，默認、展開、選中、關(guān)閉的交互。

b. 頂部欄

除了導(dǎo)航外，另一個基本必備的組件，就是頂部欄，除了放最基礎(chǔ)的用戶和設(shè)置選項外，它的角色定位要根據(jù)需求決定，最常見的包含下方幾種：

• 標(biāo)題欄：主要用來展示頁面標(biāo)題、副標(biāo)題，或者面包屑控件。
• 工具欄：包含比較多的操作要素，如搜索、新增、邀請、消息管理等。
• 菜單欄：包含較多針對當(dāng)前頁面/模塊的菜單選項和內(nèi)容切換操作。

當(dāng)然，以上幾種情況并不是絕對的。設(shè)計師需要根據(jù)項目的實際需求出發(fā)，去梳理項目包含哪些全局控件或操作，然后再決定如何分配到導(dǎo)航或者頂部菜單上，而不是先定義菜單的類型再往里面填內(nèi)容和字段。

c. 頁面標(biāo)簽欄

頁面標(biāo)簽欄是一個類似瀏覽器標(biāo)簽欄的組件，用來展示和關(guān)閉當(dāng)前項目內(nèi)打開的頁面。

標(biāo)簽欄的使用在遠古時期的 B 端項目應(yīng)用非常普遍，因為已經(jīng)入土的 IE 瀏覽在那個年代是沒有頁面標(biāo)簽功能的，導(dǎo)致開啟多個頁面的切換非常麻煩。

隨著瀏覽器標(biāo)簽的普及，它已經(jīng)不適用于多數(shù) B 端項目，但依舊有一小部分項目是需要結(jié)合它的優(yōu)勢才可以更好的提升操作效率。

在一些需要持續(xù)打開和來回切換頁面的項目，如客服系統(tǒng)、財務(wù)審核、合同審批，因為打開新頁面僅僅需要加載內(nèi)容區(qū)域而不是全局，沒有新建窗口后的空白頁面加載過程，就能帶來更好的體驗。

d. 內(nèi)容模塊

內(nèi)容模塊是用來容納和顯示頁面相關(guān)內(nèi)容的模塊，這是個被很多人忽略的組件類型，包含模塊標(biāo)題欄和操作區(qū)域。

一個成熟的 B 端項目會統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu)，保證大量頁面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。

如果只是簡單做個標(biāo)題再統(tǒng)一間距參數(shù)，那么這個組件也就沒必要在這里提了，因為這僅僅是設(shè)計問題而不是交互問題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場景，并進行統(tǒng)一處理。

例如要應(yīng)用一級分頁標(biāo)簽、多層級分頁標(biāo)簽、操作按鈕、內(nèi)容折疊等。考慮的越全，后面處理起來越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗和操作效率。

內(nèi)容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴設(shè)計師自身的經(jīng)驗判斷。

所以，它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本，然后在完成后續(xù)的頁面中逐漸進行補充、優(yōu)化并替換。

作者：酸梅干超人；

本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash ，基于 CC0 協(xié)議。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

B端設(shè)計規(guī)范如何正確搭建，好的設(shè)計規(guī)范對設(shè)計有什么幫助呢？設(shè)計夾老師在這篇文章中圍繞清晰、高效、友好、可控四個關(guān)鍵設(shè)計原則，帶你一步步建立起設(shè)計規(guī)范，推薦各位設(shè)計er和對交互產(chǎn)品、B端產(chǎn)品設(shè)計感興趣的童鞋閱讀。

Halo，這里是設(shè)計夾，今天為大家分享的是「B端設(shè)計」。B端設(shè)計離不開設(shè)計規(guī)范這個話題，而做好設(shè)計規(guī)范是一個龐大復(fù)雜工程，很多人對這些處于一知半解狀態(tài)。在這個系列文章里通過結(jié)合平時的項目案例來談?wù)勛约簩端設(shè)計規(guī)范的一些理解，希望可以帶來一些啟發(fā)。

本篇先談?wù)勗O(shè)計規(guī)范制作的指導(dǎo)思想–設(shè)計原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計規(guī)范。

一、設(shè)計規(guī)范作用

設(shè)計規(guī)范作為B端設(shè)計中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個方面：

在日常工作中，當(dāng)項目組收到一個新的需求時，如果已經(jīng)具備了成熟的設(shè)計規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：

二、設(shè)計原則

通過前面內(nèi)容我們知道了設(shè)計規(guī)范對于產(chǎn)品設(shè)計意義重大，那么制定設(shè)計規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計原則這個話題，設(shè)計原則是設(shè)計規(guī)范的總綱領(lǐng)，所有的設(shè)計規(guī)范都應(yīng)當(dāng)以設(shè)計原則為基準(zhǔn)。設(shè)計原則主要包含以下內(nèi)容：

接下來就圍繞設(shè)計原則清晰、高效、友好、可控這四個方面展開講解。

(一) 清晰

清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復(fù)四個方面。

1.對比

對比是指界面中為了區(qū)分信息層級，強化元素對比度，使用的很常見的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕；通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關(guān)鍵文字信息。

2.親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，距離就應(yīng)該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。

3.對齊

在界面設(shè)計中，將元素進行對齊，既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線)，也能引導(dǎo)用戶視覺流，讓用戶更流暢地接收信息。

4.重復(fù)

重復(fù)是指相同的元素在項目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時提高這些元素之間的關(guān)聯(lián)性。

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產(chǎn)品操作更加便捷；交互體驗與內(nèi)容更加輕量和簡化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見案例說明如何應(yīng)用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

用戶操作過程盡量減少跳轉(zhuǎn)，以實現(xiàn)交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡…依次類推(優(yōu)先級從高到低：原位＞展開收起＞氣泡＞彈窗＞抽屜＞新頁面)

3.放大點擊熱區(qū)–便捷

放大可點擊按鈕熱區(qū)，相對于較小點擊熱區(qū)，具備更絲滑操作體驗。

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn)，避免信息過于重復(fù)啰嗦，簡化頁面提高閱讀體驗。

5.折疊次要功能–簡化

頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內(nèi)容簡潔。

6.統(tǒng)一樣式–一致

一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。

(三) 友好

友好原則應(yīng)貫穿用戶操作前，操作中及操作后三個階段，給予用戶及時反饋與幫助。

1.操作前

在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。

2.操作中

通過交互效果及頁面樣式讓用戶可以清晰感知到自己當(dāng)前操作。

3.操作后

利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個方面。

1.自由

自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。

2.導(dǎo)航

導(dǎo)航是指用戶隨時知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達目標(biāo)頁面。

最后

通過本篇內(nèi)容我們大概知道了制作設(shè)計規(guī)范主要方向，那么具體到每個組件上，我們該如何去設(shè)計呢？后續(xù)篇章將細分聊聊如何去設(shè)計「B端常見組件」。

編輯導(dǎo)讀：人是視覺動物，相比于文字，人們更容易被圖片吸引。而如何在界面設(shè)計中運用好圖片，給用戶更好的視覺體驗，本文作者有自己的想法，一起來看看吧。

在UI設(shè)計中，配圖的好壞將直接影響著界面的品質(zhì)及用戶的視覺體驗?？v觀如今高質(zhì)量的界面設(shè)計，具有設(shè)計感的配圖不僅是吸引用戶的重要元素，能比原本平淡無奇的文字界面更讓人產(chǎn)生點擊欲望，還能體現(xiàn)出設(shè)計師的品味、以及相關(guān)方面的專業(yè)性。

在這個快節(jié)奏的時代，相比文字，圖像的傳達效率會更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫面基調(diào)、流程引導(dǎo)、視覺平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會存在較大的差異。本篇文章將介紹一些在UI設(shè)計中配圖的基礎(chǔ)知識，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計無從下手時提供靈感，在選擇圖片、后續(xù)處理時如何做到有規(guī)律可循帶來一些思路。

一、了解UI設(shè)計中的圖片

1. 為什么要重視圖片

在文字出現(xiàn)之前，人們都是靠看到的圖像來理解信息內(nèi)容，即便后來文字能表達出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說服力、更容易傳達信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動。

當(dāng)說到UI設(shè)計中的圖片非常重要時，并不是說文字就一定比圖片弱，好的文字也能帶給我們無限的遐想，只能說在更大的概率上圖片和文字哪個更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來的美好。但是，如果非要問我選擇哪一個時，我只能說“只有小孩子才做選擇題，我（設(shè)計師）全都要”，圖片可以表達出豐富的內(nèi)容，再用文字言簡意賅，是一個非常完美的組合。

2. 常用的圖片格式

圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設(shè)計中，最常用的無非JPG、GIF、PNG三種。

JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開和處理，但不能顯示透明底，壓縮后會失去一部分原始信息。

PNG：如需編輯，PNG應(yīng)該算是所有圖片格式中的最佳選擇，支持無損壓縮及透明底，但針對需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。

GIF：動效圖片，支持透明底及無損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來，但對色彩有非常嚴(yán)格的要求，數(shù)量最多不超過256種，相比前面兩種，GIF格式的文件更大。

二、圖片的使用及處理方法

1. 圖片的使用比例

在移動端UI設(shè)計中，我歸納了最常用的幾個圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機的傳感器演變而來。當(dāng)我們不知如何選擇比例時，首先需清楚的了解界面圖片的應(yīng)用場景、來源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對這幾個比例作具體分析。

1）1:1 比例

因為相機結(jié)構(gòu)的原因，早期最傳統(tǒng)的120膠片畫幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。

在如今的電商APP中，商品圖片絕大多數(shù)都遵循了1：1的比例，不管橫向還是縱向都能將信息進行完整化的展示，且方便多場景、頁面的適配。另外，用戶頭像也都使用了這一比例。

2）3:2比例

起初135膠卷的比例就是3：2，主要是因相機取景框的大小而決定。在移動端，這一比例使用也比較廣泛，例如新聞、旅游類型產(chǎn)品，在拍照之后無需裁剪等處理，直接上傳使用，非常方便。

3）4:3比例

隨著攝影的發(fā)展，小/微型相機出現(xiàn)而誕生4：3比例，且移動設(shè)備發(fā)展迅速，在非專業(yè)攝影的情況下，手機能很大程度上代替單反并成為主流拍照設(shè)備，目前市場上主流手機的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點信息。

4）16:9比例

根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為16：9的長方形，所以電視、顯示器及投影范圍的設(shè)計都是基于這個黃金比例。

線上產(chǎn)品不用多說，影視類型的產(chǎn)品均采用16：9的尺寸，例如愛奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個比例在設(shè)定上還沒出現(xiàn)過問題。

在上述4個尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以內(nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類型產(chǎn)品很注重標(biāo)題文案，即會使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺重量；旅游、租房類產(chǎn)品，則可使用4：3的圖片，以傳達更多信息。這種選擇方式雖然不是絕對，但當(dāng)我們陷入兩難的困境時，可作為參考依據(jù)幫助快速決策。

2. 圖片的使用場景

1）單圖布局

全屏：具有很強的視覺沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫或加純色不透明度紋理/遮罩，對圖片細節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動引導(dǎo)、產(chǎn)品介紹背景等頁面。

卡片：以單張圖片作為視覺引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶的流量入口，促使用戶與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁頭圖、推薦頁、專題入口等。

2）圖文列表

在圖文列表界面，很多時候，我們都在想一個問題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級將重要的信息放在關(guān)鍵位置。

單列組合

左文右圖：以文字為主、圖片為輔，主要強調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少減少圖片對文字的干擾，對圖片的質(zhì)量要求不高，很多新聞、資訊類產(chǎn)品都是選用這種方式布局。

左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強調(diào)以圖片直觀的傳達內(nèi)容、吸引用戶的視線，對圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類產(chǎn)品的最佳之選。

上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過兩個內(nèi)容，用戶需要從圖片中獲取大量信息，對圖片的質(zhì)量要求很高，大多有專門的人員審核，以完成對圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類、藝術(shù)類產(chǎn)品會選用此種方式。

雙列組合

并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時向用戶傳達更多信息。

錯位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯位的排版方式增加了版式的趣味性，可緩解用戶在長時間瀏覽下的視覺疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺混亂，且低高度的圖片信息很容易被忽略。

3）多圖組合

規(guī)則：3張或以上的規(guī)則的圖片組合很常見，主要用圖片列表來引導(dǎo)用戶查看更多，通常利用單排左右滑動或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類產(chǎn)品，包括手機相冊、社交圈子等。

不規(guī)則：多圖不規(guī)則比例并不常見，因移動端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯覺。藝術(shù)、拼圖類產(chǎn)品看到的居多，另外，部分社交類產(chǎn)品為了展示不同遠近距離的層級關(guān)系也會用到這種排版方式。

3. 圖片操作的交互手勢

圖片常見的手勢操為：滑動、點擊、雙指縮放，除此之外，還有很多針對所有元素都可以操作的交互手勢，這里就不多說了，下面單獨對圖片手勢作出介紹。

1）滑動

上下滑動：通常在圖文列表或單張圖片內(nèi)容超過一屏的情況下，通過上下滑動查看更多信息。

左右滑動：為了拓展更多內(nèi)容，多用于相同等級的圖片列表或大圖切換，在頁面列表中會將無法同時展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶探索以發(fā)現(xiàn)更多。

2）點擊/長按

單擊：單擊可查看圖片，從縮略圖到詳情或大圖的切換操作；

雙擊：針對圖片本身進行某些操作，比如喜歡、點贊等，另外，部分圖片通過雙擊進行一定比例的放大縮小。

長按：調(diào)出圖片的部分屬性信息、下載圖片等進行下一步操作。

3）雙指縮放

當(dāng)我們需要查看圖片的某些局部信息或細節(jié)時，就會使用雙指（開合）縮放的交互手勢。

三、圖片樣式效果

1. 圖片遮罩

因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會在文字區(qū)域加一個純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過渡更加協(xié)調(diào)，提升視覺美觀度。

2. 毛玻璃（背景模糊）

毛玻璃效果通常出現(xiàn)在應(yīng)用的2、3級頁面，對應(yīng)用性能會有一定的消耗，一般使用封面圖片進行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿足文字內(nèi)容的清晰呈現(xiàn)，又能提供場景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂播放頁面的背景模糊效果了。

3. 摳圖+純色背景組合

對于自營平臺，內(nèi)容較為固定的商品頁面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計風(fēng)格可控，延展性更高。不適配平臺類型應(yīng)用，因為會讓商家產(chǎn)生較高的運營成本。

4. 圓角設(shè)定

圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺，小圓角傳達出安全、專業(yè)的屬性，而大圓角顯得活潑、可愛，更有親和力。

5. 圖片出界

圖片出界常用于運營設(shè)計，例如圖片輪播、膠囊banner、專題頁等，另外，經(jīng)摳圖處理過的圖片也可用在商品詳情頁頂部圖示。這種效果能有效避免呆板，營造出畫面氛圍，制造出更強烈的視覺沖擊力。

四、圖片處理小技巧

1. 符合產(chǎn)品氣質(zhì)

UI設(shè)計中，任何一個設(shè)計思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場景進行合理搭配，好的配圖更能與用戶產(chǎn)生共鳴。

2. 切合主體，表達產(chǎn)品核心內(nèi)容

配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會被多余的元素、效果影響主體視覺導(dǎo)致沒有重點。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。

3. 風(fēng)格統(tǒng)一

圖片以實用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺的不統(tǒng)一，嚴(yán)重影響用戶體驗。設(shè)計師在選圖時需要對風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺。

常見的控制方向有圖片類型（位圖/插畫/形狀）、視角（平視/仰視/俯視）、商品背景（簡約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫）、構(gòu)圖（中心/水平線/對稱/對角線…）等。另外，還有很多抽象的方式但并不是絕對的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達到最佳視覺效果。

4. 顏色豐富

因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶的注意力，讓人想要擁有的感覺，如果色彩不夠飽滿，不管風(fēng)格是多么統(tǒng)一，也達不到良好的用戶體驗。在選好圖片后，可對色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿、豐富。

5. 設(shè)計稿需呈現(xiàn)上線的實際效果

有時候做設(shè)計為了方便，整個界面的圖片直接復(fù)用同一張，即便設(shè)計的再好，也可能隱藏著不易察覺的瑕疵。需要說明的是，一個成熟且專業(yè)的設(shè)計師，首先要對自己負責(zé)，然后才是設(shè)計，即便是初稿，在即將呈現(xiàn)給大家或匯報前，一定要給出上線后最真實的效果，這樣方便他人貼合實際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過的實際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計缺陷，例如版式、字體大小、層級關(guān)系等問題。

6. 文件大小處理

靜態(tài)圖片常用的無非PNG、JPG這兩種格式，文件較大的圖片會影響打開頁面或刷新時的速度，本地圖片更會增加應(yīng)用包的大小。從設(shè)計稿中導(dǎo)出圖片時需要控制文件大小，如無特別（超大圖）情況，切勿主動降低圖片質(zhì)量后再導(dǎo)出，否則會影響界面整體的視覺美觀度。

這里推薦一個線上無損智能壓縮神器：https://tinypng.com，僅限PNG、JPG、WEBP格式的圖片。

△上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。

7. 倍率切圖

切圖不像以前那么麻煩，同一張圖片需要手動導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類似藍湖、摹客等第三方線上應(yīng)用，分享給團隊成員即可各自下載web、Android、iOS對應(yīng)的多套規(guī)范制圖。

設(shè)計師在設(shè)計過程中，一定要按照規(guī)范的最大極限保留原圖，以iOS系統(tǒng)@1x規(guī)范設(shè)計稿為例，如果圖片的寬度是100px，那么導(dǎo)入軟件中的圖片寬度至少要在300以上，然后再進行縮?。≒S中需轉(zhuǎn)為智能對象），如果低于300px，開發(fā)在導(dǎo)出@3x的圖片就會失真，可能會因損失像素而出現(xiàn)模糊的情況。

五、總結(jié)

文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒有更好的方法之前，多多少少能從中得到啟發(fā)。UI中圖片設(shè)計的本質(zhì)在于自身的專業(yè)能力，然后用自己的視覺產(chǎn)出和設(shè)計手段去吸引、打動用戶，從而為產(chǎn)品帶來利益，也能體現(xiàn)出設(shè)計價值。

不得不承認，人們很多時候都是通過視覺表象決定是否需要深入了解、擁有某一件事/物，設(shè)計師就是在做視覺表象的表達，如果圖片用的好，不僅能讓你的設(shè)計更加出彩，還有一定幾率轉(zhuǎn)化用戶，形成商業(yè)價值。

#專欄作家#

大漠飛鷹；公眾號：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導(dǎo)語：動效，是頁面的靈魂，也能讓用戶有更好的體驗。作為設(shè)計師，我們?nèi)绾螌有гO(shè)計得更有簡潔有趣呢？本篇文章中，作者分享了5種動效格式的優(yōu)缺點。感興趣的小伙伴不妨來看看。

動效設(shè)計，可以提升界面的趣味性和引導(dǎo)性，讓用戶瀏覽過程中不會太枯燥，獲得更好的體驗。

最近做的金山知了（后面改名為金山知識庫）官網(wǎng)，頭圖元素加入了緩動效果，第一眼挺新穎的。

金山協(xié)作新年許愿活動，許愿按鈕加入了運動的形象，更能吸引用戶點擊。

不過，輸出動圖和開發(fā)對接的過程中，我也遇到過一些問題：導(dǎo)出的動圖模糊、資源太大、開發(fā)不支持動圖格式等等，當(dāng)時也是想盡辦法地解決。

這次我總結(jié)了幾種常用的動圖格式，也提及我輸出動圖過程遇到的問題和解決方法，以及我們設(shè)計師該如何選擇合適的動圖格式。

• 序列幀
• GIF
• Lottie
• APNG
• SVGA

一、序列幀

剛開始接觸動效，我最先了解到的 PNG 序列幀，就是輸出動圖的每一幀圖片，然后交付開發(fā)，按幀播放圖片實現(xiàn)。

比如這個加載動畫，我的練習(xí)作品，導(dǎo)出序列幀資源很大，所以我平時基本不用這種格式。

導(dǎo)出方法：

AE 輸出選擇 PNG 序列，如果要導(dǎo)出透明背景，通道選擇 RGB+Alpha。

二、GIF

GIF 支持安卓、iOS、網(wǎng)頁，可以說也是比較常用的格式之一。

界面設(shè)計中的小元素可以使用這個格式，比如運營按鈕動畫、點贊圖標(biāo)動畫等，資源不會太大。

像我之前負責(zé)的新年許愿活動，因為是從 0 到 1 的產(chǎn)品，開發(fā)還沒有支持 Lottie，所以許愿按鈕動畫輸出 GIF 給開發(fā)實現(xiàn)，壓縮后資源 300KB。

雖然動圖放大周圍有鋸齒，但是在手機上是看不到的。

導(dǎo)出方法：

1. AE 導(dǎo)出 MOV 格式，再用 PS 轉(zhuǎn)換成 GIF。（注意：可能是因為動畫時間太長、文件太大，導(dǎo)出經(jīng)常失敗，所以我很少用這種方式)

2. AE 安裝 Gifgun 插件，直接導(dǎo)出。

3. AE 導(dǎo)出 PNG 序列，將所有圖片拖進 iSparta，勾選 GIF 輸出。（注意：如果導(dǎo)出 GIF 圖片有問題，需要勾選壓縮質(zhì)量，填寫小于 100 的值就可以解決了）

如果 GIF 文件太大，可以使用無損壓縮軟件：PPDuck。

三、Lottie

Lottie 是一個用于 Android、iOS、Web、Windows 的動畫庫，用于解析使用 bodymovin 導(dǎo)出為 json 文件的 AE 動畫。

動畫通過代碼實現(xiàn)，是矢量的。

動畫庫資源會增加安裝包的大小，客戶端會有推動成本。

不過 WPS Office 有在使用，資源大小和穩(wěn)定性目前來說是可以的。

不支持 AE 效果器直接添加的效果，比如高斯模糊、內(nèi)發(fā)光、投影。

支持用圖片導(dǎo)入 AE 做出的動效，比如金山知識庫官網(wǎng)的頭圖，就是使用 Lottie 方式實現(xiàn)，資源小，動圖也很清晰。

支持顏色漸變，但是導(dǎo)出 json 容易出問題。比如之前設(shè)計的會員卡片動效，漸變顏色導(dǎo)出后變成了黑白漸變。

這時候只需要將所有漸變圖層名稱按順序改為 Gradient fill 1、Gradient fill 2、…，就可以解決了。

導(dǎo)出方法：

AE 安裝 bodymovin 插件，直接導(dǎo)出。（注意：要選擇保存路徑，導(dǎo)出按鈕才能點擊。點擊設(shè)置圖標(biāo)，選擇 Standard 和 Demo，才能導(dǎo)出 json 文件和 demo 預(yù)覽效果）

四、APNG

APNG 是基于 PNG 格式的位圖動畫格式圖片，文件后綴依然是.png，可以在瀏覽器中預(yù)覽動畫。

金山協(xié)作的表情包使用的也是這種格式動圖。

和 GIF 對比，它的優(yōu)勢在于動圖邊緣光滑，不會有鋸齒和顆粒感。

導(dǎo)出方法：

AE 導(dǎo)出 PNG 序列，將所有圖片拖進 iSparta，勾選 APNG 輸出。

五、SVGA

SVGA 是由 YY 團隊開發(fā)出來的一種跨平臺的開源動畫格式，同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式，常用于直播禮物場景，適合炫酷的禮物動效。

因為禮物效果比較復(fù)雜，一般是用 png 序列，一張圖一幀地制作動畫，輸出 SVGA 文件。

它只會生成一個 svga 后綴文件，代碼和位圖元素都被集成在了一起，但是 Lottie 會生成兩個文件：json 代碼文件+img 文件夾。

支持 AE 自帶基礎(chǔ)動畫：位移、縮放、不透明度等，但是不支持圖層漸變（Lottie 支持漸變）和 AE 自帶及外部插件的效果控件特效，所以 UI 動效 Lottie 比較通用，不容易出錯。

六、總結(jié)

講了那么多動效落地方案，那么在實際工作中我們該如何選擇使用呢？

1. 資源大小對比

2. 質(zhì)量對比

3. 使用場景對比

• Lottie：基本適合所有 UI 動圖，比如圖標(biāo)動效、加載動效、插圖動效、運營按鈕動效等，優(yōu)先使用
• GIF：移動端小元素動圖可以使用，比如點贊動效（大尺寸透明背景動圖不建議使用，鋸齒嚴(yán)重）
• APNG：表情包、小元素動圖（比 GIF 質(zhì)量好）
• SVGA：直播禮物炫酷動效
• 序列幀：資源太大，不建議使用

以上就是我的業(yè)務(wù)動效落地經(jīng)驗總結(jié)，大家有需要這些導(dǎo)出插件的可以找我。

作者：ALEI；公眾號：ALEI的設(shè)計思考

原文鏈接：https://www.uisdc.com/motion-design

本文由@ ALEI 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導(dǎo)讀：我們經(jīng)常會收到各種彈窗，它們的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對話的一種方式。但是，彈窗也不是多多益善。如何彈、什么時候彈？這些都是有章法的。本文作者總結(jié)梳理了一套彈窗設(shè)計原則，一起來看看吧。

產(chǎn)品經(jīng)理：我覺得這里要加個彈窗，你去設(shè)計吧。

設(shè)計師：emmm…

彈窗到底該不該加？怎么加？用什么形態(tài)展示？真正的作用是什么？這些真的是產(chǎn)品經(jīng)理說了算嗎？

好的產(chǎn)品通常會在恰當(dāng)?shù)臅r間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗，甚至誤導(dǎo)用戶，從而導(dǎo)致用戶流失。

很多時候，產(chǎn)品經(jīng)理會從商業(yè)角度、公司業(yè)務(wù)、資源限制等方面考慮問題，但這些未必是用戶所需要的，設(shè)計師不應(yīng)該完全按照產(chǎn)品需求做設(shè)計，否則就成了只會照搬產(chǎn)品原型的“美工”。需要做的是從用戶角度出發(fā)，把產(chǎn)品需求轉(zhuǎn)化成設(shè)計目標(biāo)，只有經(jīng)過反復(fù)的推敲、認真分析，最終才能打磨出服務(wù)于用戶的彈窗設(shè)計，所以彈窗該不該加、如何加就成了設(shè)計師不可推卸的責(zé)任和使命。

本篇文章將圍繞著彈窗類型、使用場景、轉(zhuǎn)化率及常見問題為側(cè)重點，將自己對彈窗的理解、設(shè)計經(jīng)驗分享給大家，幫助大家對彈窗組件有更清晰的認識，為后續(xù)避坑設(shè)計出更好的彈窗做準(zhǔn)備。

一、彈窗的基本介紹

1. 彈窗的定義

當(dāng)我們與應(yīng)用產(chǎn)生主動或被動交互時，頁面上層會彈出容器，將可承載的文本、按鈕、選項、標(biāo)簽或表單等任一內(nèi)容與之組合，就可以用來傳遞信息、狀態(tài)反饋、引導(dǎo)用戶等操作，這就是彈窗。

彈窗的目的主要是為回應(yīng)用戶或讓用戶回應(yīng)，是用戶與產(chǎn)品間對話的一種方式，在線上各種場景中都有可能碰到，相當(dāng)于產(chǎn)品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。

2. 彈窗組件的構(gòu)成

彈窗組件的樣式很多，如浮層、對話框、下拉菜單、toast等，且iOS、Android官方平臺也都根據(jù)自身的規(guī)范對組件進行命名，不管如何稱呼，其常見的彈窗組件絕大多數(shù)都是由以下元素組成：

• 容器：作為承載彈窗的文本、圖片等內(nèi)容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
• 蒙層：為了和底層內(nèi)容分離，避免信息混淆，通常會在界面上層（容器下層）設(shè)置一個不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設(shè)蒙層，但會為容器設(shè)置投影，例如篩選器的展開、下拉菜單等；
• 文本：文本是彈窗傳達信息主體的必要條件，如標(biāo)題、按鈕等，即便把文本融入圖片，也能一目了然；
• 圖片：用于運營彈窗傳達更多信息內(nèi)容的方式之一，為了對用戶產(chǎn)生更強的吸引力，還可設(shè)計成動態(tài)效果；
• 表單：為成功進入下一步做準(zhǔn)備，如輸入密碼（iOS設(shè)備下載應(yīng)用前的必要步驟）。也可以是當(dāng)前頁面流程的分支，例如輸入優(yōu)惠券等；
• 選項：條件較少的選項可使用彈窗完成，單選、復(fù)選在選項不超過6個的情況下都可使用；
• 圖標(biāo)：在弱化次要操作的情況下，通常會將關(guān)閉彈窗按鈕設(shè)計成圖標(biāo)放在右上角或彈窗下方，目的是突出主操作，鼓勵用戶從彈窗中進入下一步，另外還有單選、復(fù)選、提示等按鈕；
• 按鈕：是進入下一步或回到上一步（去掉彈窗）的操作入口，部分應(yīng)用也可以點擊彈窗以外的空白區(qū)域讓彈窗消失，但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設(shè)置按鈕。

二、彈窗體系分類

1. 模態(tài)彈窗

用戶在完成任務(wù)的過程中，界面會出現(xiàn)彈窗打斷用戶的操作行為，用戶必須通過主動點擊才可以進行下一步操作，這即是模態(tài)彈窗。

模態(tài)彈窗通常能較好的獲取用戶的視覺焦點，并通過承載的內(nèi)容、按鈕主次層級來引導(dǎo)用戶完成他們的需求，這也會根據(jù)用戶、產(chǎn)品側(cè)重點的不同，彈出樣式也有所不同，常見的模態(tài)彈窗有對話框、動作欄、浮層…等。

1.1 對話框Dialog/Alert

對話框是很常見的彈窗，主要在打斷用戶后并提供選項操作，對用戶的干擾較大，通常會配備1~3個操作按鈕，而且會把用戶最期待的或產(chǎn)品最期待用戶操作的按鈕突出顯示。

對話框類型的彈窗主要分為主動、被動兩種觸發(fā)類型，主動彈窗：信息的二次確認、輸入內(nèi)容、前置條件選擇、風(fēng)險警示等；被動彈窗：版本更新、運營宣傳、消息通知、系統(tǒng)功能授權(quán)等。

1.2 動作欄Actionbar

動作欄是通過用戶主動操作后彈出的內(nèi)容信息，基本都是從底部彈出，屏幕占用比例根據(jù)內(nèi)容量的多少比較隨意，從小區(qū)域、半屏、再到全屏隨處可見。

動作欄相比對話框則能承載更多、更豐富的功能信息，在用戶清晰感知當(dāng)前操作及反饋的情況下，比跳轉(zhuǎn)到新的頁面更有安全感。

1.3 浮層Popover/Popup

浮層是指用戶操作某個功能/內(nèi)容后，會在附近出現(xiàn)一個帶有視覺引導(dǎo)性質(zhì)的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動于頂層窗口并指向觸發(fā)操作的位置。

例如很多社交娛樂類型的應(yīng)用右上角有一個“+”入口，里面會放置部分常用功能。部分浮層底部沒有設(shè)置不透明度的蒙層，為了與頁面信息更好的區(qū)分，會給浮層容器加上投影，避免與底部信息混淆。

2. 非模態(tài)彈窗

相比模態(tài)彈窗，非模態(tài)彈窗屬較為輕量，觸發(fā)后以一種非阻礙的的方式呈現(xiàn)，不會打斷用戶的當(dāng)前操作，主要是給予用戶即時反饋，讓用戶清楚應(yīng)用當(dāng)前的交互后狀態(tài)。非模態(tài)彈窗不強制用戶操作，根據(jù)反饋信息的重要程度及意愿，可在一定的時間內(nèi)自動消失，也可等待用戶操作后消失，常見的有以下幾種：

2.1 提示框Toast/Hud

用于反饋用戶操作成功、警告、錯誤等當(dāng)前狀態(tài)信息，可能出現(xiàn)在任何位置（底部/中間/頂部），在呈現(xiàn)樣式上，相同等級的模塊統(tǒng)一位置、風(fēng)格即可，無需用戶有任何操作，出現(xiàn)2s左右自動消失。

Toast只有純文字提示，例如格式錯誤、刷新成功、刪除成功等；Hud會使用文字+圖標(biāo)樣式，例如添加到購物車、關(guān)注成功等。

2.2 提示對話框Snackbar

Snackbar早期只是Android系統(tǒng)的一種彈窗控件，后在iOS、Web前端都會使用到，可以看作是toast的加強版。一般只出現(xiàn)在屏幕底部，存在的時間比toast長，提供0~1個操作入口，可自動消失，也可與用戶產(chǎn)生交互后消失或者跳轉(zhuǎn)至其他頁面。

Snackbar反饋的重要程度強于toast，例如，某個應(yīng)用今天有重要提醒，同時又不想影響用戶的其他操作，會在用戶首次進入時彈出提醒，并提供關(guān)閉操作入口，等待用戶通過手動關(guān)閉（部分自動關(guān)閉），加強用戶記憶。

2.3 通知Notice

最有代表性的就是消息通知、系統(tǒng)推送，在設(shè)備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動消失，鎖屏后，不同設(shè)備彈出的位置也有所不同。Notice的前提是需要在應(yīng)用設(shè)置中打開消息通知開關(guān)，具備應(yīng)用外推送功能的，需在設(shè)備系統(tǒng)設(shè)置中開啟通知權(quán)限。

2.4 透明指示層HUD

HUD是一種在透明元素上通過填充、反饋用戶當(dāng)前交互操作的指示層，實時生效，例如視頻類產(chǎn)品中的調(diào)整音量、亮度、控制進度條等。

三、彈窗的使用場景

當(dāng)我們對彈窗體系有了一定了解后，就需要清楚什么場景需要設(shè)計彈窗？用什么類型的彈窗？

產(chǎn)品最終都是服務(wù)于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗，我們可以從以下幾點來說明。

1. 打斷用戶的操作

風(fēng)險警示：當(dāng)用戶的某種操作可能存在風(fēng)險，為避免操作失誤，會彈出對話框打斷用戶，并給予一定的風(fēng)險提示引起用戶的注意，讓其有足夠的時間確認是否真的需要進行下一步操作，如：刪除、放棄福利機會、退出登錄等，會彈出對話框提示操作后可能引起的后果。

前置條件：部分任務(wù)在流程中設(shè)有一定的前置條件，需要滿足條件才能進入下一步操作，通常這種情況會根據(jù)內(nèi)容量的多少、重要程度以對話框或動作欄的樣式彈出，例如下單時選擇優(yōu)惠券、支付方式。

任務(wù)關(guān)鍵節(jié)點：用戶在滿足任務(wù)的基本條件后，需要操作一個關(guān)鍵步驟才能成功，則會彈出對話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。

2. 定制化彈窗

這類彈窗主要從產(chǎn)品角度出發(fā)，不會過于在乎用戶是否需要、會不會反感，都會引導(dǎo)或強制用戶操作。

例如產(chǎn)品發(fā)布新版本，會強制用戶更新，否則將無法使用。還有各大電商APP，在進入首頁時會彈出一堆紅包、優(yōu)惠券，刻意將取消/關(guān)閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺、動態(tài)效果突出主題增加吸引力，以達到轉(zhuǎn)化用戶的目的。

3. 二次確認

二次確認也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認，以免操作結(jié)果造成用戶認知上的偏差。雖然從用戶體驗角度出發(fā)，用最少的操作、最簡單的流程滿足用戶所需是產(chǎn)品追求的目標(biāo)之一，但通過權(quán)和利弊之后，二次確認的出現(xiàn)實屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內(nèi)容加深二次記憶等作用。

二次確認使用得當(dāng)，可以避免用戶、產(chǎn)品的潛在風(fēng)險，但若是從主觀角度一味的濫用，就成了對用戶的惡意干擾、影響使用體驗，導(dǎo)致出現(xiàn)因多步驟操作增加任務(wù)完成難度、降低轉(zhuǎn)化率、損害產(chǎn)品形象等問題，所以需要從業(yè)務(wù)（用戶側(cè)、產(chǎn)品側(cè)）實際角度出發(fā)，兩相其害（加-影響使用體驗；不加-造成一定損失）取其輕的考慮是否需要增加二次確認彈窗。

當(dāng)用戶的某個操作可能帶來不可逆轉(zhuǎn)、錯誤嚴(yán)重程度較高時，例如：放棄僅有一次機會的較好福利、手機系統(tǒng)還原、應(yīng)用賬號注銷等，系統(tǒng)都會給予二次確認，降低用戶認知偏差后，以確保用戶是經(jīng)過多次思考才做出的決定，即便后續(xù)給用戶造成損失也不會過于降罪產(chǎn)品，產(chǎn)品也算是“問心無愧”了。

4. 簡單提示

常見于用戶操作之后的狀態(tài)反饋，即便用戶沒有注意到，也不會造成較大的損失、或結(jié)果已經(jīng)注定，相對來說成本較低，大部分出現(xiàn)在任務(wù)過程中的提示（可重復(fù)）和結(jié)果反饋，以確保用戶知曉當(dāng)前所處狀態(tài)。

非模態(tài)彈窗toas樣式居多，例如加載中、操作成功、刷新結(jié)果、清除緩存等，可出現(xiàn)在其他類型的彈窗之后或同時存在。

四、如何設(shè)計有效的彈窗

1. 前提條件

優(yōu)秀的彈窗需要從視覺、交互兩方面思考，視覺上簡潔、易懂，交互上可操作且可控。

視覺層面：首先需要做到的是易懂，這時候就非常注重文案清晰程度及按鈕層級關(guān)系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關(guān)鍵；其次，彈窗屬于一種干擾信息的存在，設(shè)計必須簡潔，在彈出時需要考慮是否會過度影響（影響是一定會有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋（傳統(tǒng)來電），自己會以最快的速度掛掉電話，回到游戲中后發(fā)現(xiàn)自己已領(lǐng)“盒飯”，即便來電是多么的理所當(dāng)然，但心里必定是非常不痛快的，那么，如果來電以彈窗的形式且占據(jù)屏幕很小區(qū)域（如今的來電方式）是不是就給了用戶足夠反應(yīng)時間及緩沖時間呢？

交互層面：彈出的內(nèi)容及操作入口需清晰可操作，雖然有時基于業(yè)務(wù)需求，產(chǎn)品更希望用戶能進行下一步操作而并非回到上一步，即便如此，我們也只能通過弱化次要操作以突出主要操作，用戶有來去自由的權(quán)利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會存在反面作用；另外需注意用戶對產(chǎn)品的可控性，不管產(chǎn)品如何期望用戶進入下一步轉(zhuǎn)化，但不能強制，一定要給用戶提供回去的路（強制版本更新除外），否則，任性的用戶可能會直接結(jié)束應(yīng)用，甚至因產(chǎn)品過于霸道直接卸載。

2. 設(shè)計目的

首先，設(shè)計師應(yīng)該理解產(chǎn)品需求，分別從用戶側(cè)（能給用戶帶來什么？滿足什么樣的需求？避免什么損失?…）、產(chǎn)品側(cè)（能給產(chǎn)品帶來什么？產(chǎn)品如何期望？是否合理？能得到什么樣的結(jié)果？…）分析為什么要加彈窗，然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計目標(biāo)，以確保彈窗根據(jù)不同的需求，在恰當(dāng)?shù)臅r間、適合的樣式合理的呈現(xiàn)給用戶。

其次，在得到設(shè)計目標(biāo)后，同樣需要從設(shè)計側(cè)、技術(shù)側(cè)思考彈窗組件的一致性。從設(shè)計角度，團隊所有成員需要對該組件有清晰且統(tǒng)一的認知，了解組件的使用場景，以確保不會錯用、濫用，如果增加或更換新人設(shè)計師，很容易學(xué)習(xí)和上手，提升效率；站在技術(shù)角度，一致性的常用彈窗組件，便于開發(fā)做組件封裝后續(xù)復(fù)用，減少不必要的重復(fù)工作，大大提高開發(fā)效率。

3. 設(shè)計思路

在UI設(shè)計中，組件的設(shè)計思路基本相通，旨在滿足產(chǎn)品的實用性、視覺的統(tǒng)一性，主要圍繞著以下幾點進行：

• 基礎(chǔ)定義：利用清晰易懂且簡短的文案描述彈窗組件的內(nèi)容及目的。
• 類型及構(gòu)成：明確彈窗的類型，如模態(tài)/非模態(tài)，將其拆分并注明每個小元素的具體信息。
• 規(guī)則用法：彈窗出現(xiàn)的位置、包含的具體內(nèi)容及信息的展示規(guī)則，比如哪些場景可復(fù)用。
• 交互狀態(tài)：交互流程邏輯清晰，擬請產(chǎn)品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。

五、需關(guān)注的問題點

1. 信息的層級關(guān)系

設(shè)計彈窗時需要注意信息的主次層級關(guān)系，優(yōu)先傳達用戶想要的或產(chǎn)品想要讓用戶知道的，以確保重要的信息在第一時間傳達給用戶。

2. 展現(xiàn)形式

彈窗需要根據(jù)實際的場景合理使用，不能為了簡潔而過分刪減內(nèi)容、更不能畫蛇添足。例如一些偏向于操作狀態(tài)、系統(tǒng)報告類的提示可以使用簡單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認。

△ 例如刪除內(nèi)容就需要使用模態(tài)彈窗明確提醒用戶，如果用非模態(tài)很可能被用戶忽略從而帶來不可逆的損失。

3. 文案表述

因彈窗本身承載內(nèi)容有一定的局限性，固文案一定要簡潔且精確，能用一句話說清楚的就不要過于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時間內(nèi)清晰的表達出核心內(nèi)容。

4. 彈出的時機及頻率

針對運營彈窗，如果彈出的時間不對或過于頻繁，可能會造成用戶反感，所以需要把握好彈出時機及頻率。

例如用戶有一張未使用的優(yōu)惠券，如果用戶每次進入應(yīng)用都看到彈出提醒，確實又沒有購買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設(shè)置為每日首次進入應(yīng)用時提示、每累計進入應(yīng)用5次后提示、即將到期提示或者用戶有購買意愿且優(yōu)惠券支持改品類時提示等，總之，需要控制在大部分用戶的可接受范圍內(nèi)。

六、總結(jié)

本篇文章主要系統(tǒng)的分析了彈窗組件分類及使用場景，總結(jié)的雖然不是很全面，但能讓很多新手設(shè)計師清楚認知彈出組件的定義及用法。另外，彈窗不管如何設(shè)計，都需要有一個不斷優(yōu)化的過程，要根據(jù)產(chǎn)品的實際情況不斷思考與打磨，通過腦暴或已知問題作出更好的改善。

能清楚認知、理解、使用彈窗組件是一個成熟UI設(shè)計師必備的條件，當(dāng)然，并不能以此定義設(shè)計師是否優(yōu)秀，在此基礎(chǔ)上，還需通過持續(xù)的學(xué)習(xí)探索，挖掘出更多技巧，不斷提高自身的專業(yè)能力。

#專欄作家#

大漠飛鷹；人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘，利用設(shè)計的手段為受眾用戶帶來更好的體驗，即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于 CC0 協(xié)議

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

2025年，UI/UX設(shè)計領(lǐng)域正迎來一系列令人興奮的創(chuàng)新趨勢。從更具沉浸感的3D元素到人性化的分區(qū)設(shè)計，從動態(tài)排版到模糊與顆粒效果的巧妙運用，再到生物識別技術(shù)的普及和可穿戴設(shè)備的深度適配，這些趨勢不僅讓界面更加美觀，更提升了用戶體驗和情感共鳴。本文將深入探討這些前沿設(shè)計趨勢，為設(shè)計師和產(chǎn)品團隊提供靈感和方向，幫助他們打造出更具吸引力和實用性的數(shù)字產(chǎn)品。

2025 年，數(shù)字設(shè)計領(lǐng)域會有很多新機會，這都得靠創(chuàng)新來推動。設(shè)計師們現(xiàn)在越來越大膽，敢打破傳統(tǒng)套路，設(shè)計出的東西不僅要實用，還得有吸引力，能真正打動人。

比如，會有更多 3D 元素加入設(shè)計里，讓用戶感覺更真實、更沉浸；還有很多設(shè)計會把 “方便用戶” 和 “拉近人際距離” 放在首位，不再只追求技術(shù)炫酷，而是更關(guān)注用戶的實際需求和情感感受。

那么我們來看一下有哪些趨勢~

1、分區(qū)設(shè)計（便當(dāng)格）：像整理抽屜一樣規(guī)劃界面

你有沒有過這樣的體驗？打開一個 APP，信息像 “亂燉” 一樣堆在一起，找半天找不到重點。

2025 年的設(shè)計師學(xué)會了 “斷舍離”

就像日式便當(dāng)盒把飯菜分成不同格子，現(xiàn)在設(shè)計師也把網(wǎng)頁或 APP 界面分成多個 “小格子”，每個格子放不同功能或內(nèi)容（比如數(shù)據(jù)、圖片、文字）。

好處：信息更清晰，用戶一眼就能看出重點，而且設(shè)計師可以靈活排列，讓頁面既整齊又好看。

做到這三點挑戰(zhàn)，產(chǎn)品經(jīng)理只會不斷升值

好的產(chǎn)品經(jīng)理是很稀缺的，懂用戶、懂商業(yè)、懂?dāng)?shù)據(jù)的產(chǎn)品經(jīng)理走出互聯(lián)網(wǎng)，依然是搶手貨。相反，如果只做簡單傳話、低效執(zhí)行、淺層思考的產(chǎn)品經(jīng)理，恐怕走不過未來3-5年的洪流。

查看詳情 >

比如有的網(wǎng)站用這種格子展示不同模塊，重要內(nèi)容更突出，干擾少。

分區(qū)設(shè)計技巧：格子的大小、間距、邊框都有講究！重要內(nèi)容的格子更大、邊框更粗，次要信息的格子更 “低調(diào)”，就像媽媽給你裝便當(dāng)，愛吃的菜永遠擺在最顯眼的位置。

圖片網(wǎng)站鏈接：https://selestial.co/

2、3D 元素：讓界面從 “照片” 變成 “小世界”

以前網(wǎng)頁里的 3D 圖像是 “擺件”，現(xiàn)在它們會 “互動” 了！

3D 效果不是新鮮事，但現(xiàn)在更厲害：能互動、能沉浸！

比如網(wǎng)頁里的物體可以 360 度旋轉(zhuǎn)，虛擬試穿衣服、查看產(chǎn)品細節(jié)，甚至結(jié)合 AR/VR 讓你感覺身臨其境。

現(xiàn)在手機和瀏覽器性能更強了，3D 元素加載更快，甚至能在低配設(shè)備上流暢運行，設(shè)計師可以大膽用毛茸茸的 3D 圖標(biāo)、會 “呼吸” 的動態(tài)按鈕（比如按鈕按下時像真的被按下去一樣凹陷）。

好處：畫面更立體、有趣，用戶體驗像在真實世界互動，不再是死板的圖片和文字。

圖片網(wǎng)站鏈接：https://kevinhilgendorf.com/

圖片網(wǎng)站鏈接：https://labs.chaingpt.org/

3、動態(tài)排版：文字會 “講故事” 了

字體不再老老實實不動，而是會 “跳舞”：大小變化、顏色漸變、跟著用戶操作移動，甚至根據(jù)內(nèi)容情緒調(diào)整動畫（比如錯誤提示字體變紅閃爍，成功提示變綠飄動）。

好處：吸引注意力，傳遞品牌個性，比如讓標(biāo)題動起來，用戶一眼就被抓住。

文字不再是 “死板的符號”，而是會 “表演” 的演員，我們可以做一些交互創(chuàng)意方面的案例假設(shè)

案例1：一個新聞網(wǎng)站的標(biāo)題 “今日熱點”，當(dāng)你滾動頁面時，“熱點” 兩個字會像火苗一樣跳動，吸引你點擊；電商網(wǎng)站的 “限時折扣” 按鈕，文字會從左到右 “跑馬燈” 式滾動，仿佛在喊 “快看我！”。

案例2：社交媒體 APP 的評論區(qū)，當(dāng)有人給你發(fā) “生日快樂”，“生日快樂” 這幾個字會飄出彩色 confetti（紙屑），還會放大縮??；如果收到一條提醒 “網(wǎng)絡(luò)連接失敗”，文字會變成紅色，輕微抖動，像在著急地告訴你 “出問題啦”。

案例3：未來的動態(tài)字體甚至能根據(jù)你的輸入語氣自動調(diào)整！比如你在聊天框里輸入 “氣死我了！”，發(fā)送后文字會變成紅色，扭曲變形，模擬 “憤怒” 的情緒；輸入 “哈哈哈哈哈”，文字會笑著上下彈跳，自帶喜感。

圖片網(wǎng)站鏈接：https://wodniack.dev/

圖片網(wǎng)站鏈接：https://romaingranai.xyz/

4、模糊 & 顆粒效果：給界面加一層 “溫柔濾鏡”

背景不再是純色或簡單漸變，而是加了 “濾鏡”：有的模糊像柔光，有的帶顆粒感像老照片，讓界面更有層次和溫度。

好處：不搶主內(nèi)容的風(fēng)頭，卻能增加細膩的質(zhì)感，讓用戶覺得界面更精致、有 “呼吸感”。

想象一下：你的屏幕不再是冰冷的玻璃，而是像磨砂質(zhì)感的燈罩，透著柔和的光 ——

例如：一個閱讀 APP 的背景，不是純灰色，而是帶點模糊的淺灰，像隔著一層薄霧，文字浮在上面更突出，眼睛看久了也不累；

短視頻 APP 的點贊按鈕背后，有淡淡的顆粒感，像老電影膠片，點擊時還會有輕微的 “沙沙” 聲，復(fù)古又治愈。

例如：有些網(wǎng)站的光標(biāo)變成了半透明的小圓圈，移動時會在背景留下淡淡的拖影，像在雪地上踩出腳??；

購物車圖標(biāo)點擊時，周圍會升起細小的顆粒，像撒了一把金粉，讓操作更有 “儀式感”。

現(xiàn)代人看膩了 “完美到反光” 的數(shù)字界面，這種帶點 “不完美” 的質(zhì)感，反而讓人感覺親切，像摸到了真實的紙張或布料。

圖片網(wǎng)站鏈接：https://breadzine.com/

5、暗色模式：從 “暗黑冷酷” 到 “深夜暖燈”

以前的暗色模式是 “純黑配白字”，刺眼又冰冷，現(xiàn)在設(shè)計師給它加了 “柔光濾鏡”：

不是純黑背景配白字那種刺眼的暗模式，而是柔和的 “低對比度暗調(diào)”：比如深灰配淺灰，帶點淡淡光影，像傍晚的光線一樣舒服。

好處：保護眼睛，減少視覺疲勞，還營造出高級、安靜的氛圍，比傳統(tǒng)暗模式更溫馨。

顏色更溫柔：比如微信的暗色模式，背景不是純黑，而是深海軍藍，文字是淺灰色，圖標(biāo)帶一點淡金色光澤，晚上刷手機像在暖黃色的臺燈下看書，不刺眼還很高級。

場景化設(shè)計：一個助眠 APP 的低光模式，界面會模擬 “月光效果”，背景有淡淡的云層陰影，按鈕像夜空中的星星一樣微微閃爍，配合白噪音，讓你還沒開始冥想就先放松下來。

保護眼睛更貼心：低對比度設(shè)計減少視覺疲勞，尤其適合長時間用手機的上班族、學(xué)生黨，再也不用擔(dān)心晚上刷手機 “亮瞎眼”。

圖片網(wǎng)站鏈接：https://www.chromatique.studio/

圖片網(wǎng)站鏈接：https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page

圖片網(wǎng)站鏈接：https://silverdrive.nl/

6、UX文案：界面里的 “貼心小助手”

你有沒有被 APP或網(wǎng)站 的 “謎之提示” 搞懵過？比如 “操作異常，請重試”—— 到底哪里異常？現(xiàn)在設(shè)計師開始 “說人話” 了

按鈕上的字、提示信息、錯誤提醒…… 這些細節(jié)文字越來越重要。比如 “提交” 改成 “確認發(fā)布”，錯誤提示寫 “網(wǎng)絡(luò)好像斷了，點擊重試” 而不是冷冰冰的 “錯誤 404”。

好處：讓用戶知道該做什么，減少操作困惑，就像有個小助手在旁邊輕聲指導(dǎo)。

按鈕文案更具體：以前 “提交” 按鈕，現(xiàn)在改成 “確認并發(fā)布動態(tài)”，你一下就知道點了之后會發(fā)生什么；購物車的 “結(jié)算” 按鈕變成 “去支付（含 3 件商品）”，清楚告訴你當(dāng)前購物車數(shù)量。

錯誤提示會 “安慰人”：當(dāng)你登錄密碼輸錯，不再是 “密碼錯誤”，而是 “密碼好像不對哦，是不是字母大小寫搞錯了？試試找回密碼吧～”，帶點 emoji 和親切感，讓你不煩躁。

空狀態(tài)會 “引導(dǎo)”：比如一個筆記 APP 的空白頁，不再是冷冰冰的 “暫無筆記”，而是畫著一個小臺燈，配文 “點擊新建筆記，開始記錄今天的小確幸吧～”，鼓勵你行動起來。

圖片網(wǎng)站鏈接：https://clickup.com/

圖片網(wǎng)站鏈接：https://www.headspace.com/

7、生物識別：靠 “臉” 吃飯，告別密碼焦慮

不用記復(fù)雜密碼了！指紋、人臉、語音識別越來越普及，甚至未來可能用眼動或神經(jīng)信號驗證。比如手機刷臉解鎖、支付時掃指紋，又快又安全。

好處：再也不怕忘記密碼，登錄像 “本能反應(yīng)” 一樣自然。 

你還記得自己設(shè)過多少個密碼嗎？郵箱、銀行、社交軟件……2025 年，你只需要 “露個臉”

“掃個指紋”：

生活場景：早上上班，刷臉打開公司門禁；午休用指紋支付買咖啡；晚上回家，虹膜識別解鎖手機，全程不用輸密碼。甚至連銀行 APP 轉(zhuǎn)賬，看一眼攝像頭就能確認身份，安全又快捷。

默默驗證更省心：有些 APP 會 “偷偷” 驗證你 —— 比如你常用手機的手勢是右手拇指解鎖，系統(tǒng)會記錄你的握持姿勢，當(dāng)檢測到左手拿手機且指紋不符時，自動觸發(fā)安全提醒，不用你手動操作，安全藏在細節(jié)里。

特殊場景：比如戴著手套不方便指紋解鎖？未來的可穿戴設(shè)備可能支持 “靜脈識別”，通過血管紋路確認身份，下雨天、運動時也能輕松解鎖。

圖片網(wǎng)站鏈接：https://dribbble.com/shots/23201694-Face-id

8、可穿戴設(shè)備設(shè)計：從 “戴在身上” 到 “長在身上”

智能手表不再是 “縮小版手機”，而是更懂你的 “貼身伙伴”：

智能手表、VR 眼鏡、健康手環(huán)等設(shè)備的設(shè)計越來越難：屏幕小，怎么讓用戶操作方便？

比如用手勢滑動、語音命令，甚至靠眨眼控制；還要考慮戴著舒服（輕、貼合手腕）、續(xù)航久、適應(yīng)各種場景（運動時防水，強光下看得清）。

小屏幕大講究：比如一個運動手表，跑步時屏幕自動切換成 “極簡模式”，只顯示配速、心率、里程，字體超大，你 glancing（掃一眼）就能看清；當(dāng)你停下來休息，屏幕會慢慢顯示更詳細的數(shù)據(jù)，像個貼心教練。

交互方式創(chuàng)新：VR 眼鏡不再靠手柄操作，你眨眨眼就能切換菜單，點點頭就能確認；智能手環(huán)檢測到你睡眠不好，早上會震動提醒 “昨晚睡眠質(zhì)量一般，今天記得多喝水哦”，還會同步調(diào)整手機的屏幕亮度，幫你緩解疲勞。

場景化適配：比如滑雪專用智能眼鏡，強光下自動調(diào)暗鏡片，檢測到你加速滑行時，界面只顯示速度和路線，避免分心；潛水手表接觸到水時，自動鎖定屏幕防止誤觸，浮出水面后又恢復(fù)正常。

圖片網(wǎng)站鏈接：https://inspect-ar.com/en/

圖片網(wǎng)站鏈接：https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI

2025 年的設(shè)計趨勢：“以人為本”

界面不再只追求好看，還要讓用戶用得爽、有情感共鳴：分區(qū)清晰、3D 互動、動態(tài)字體吸引眼球，模糊背景和低光模式讓眼睛舒服；UX 寫作和生物識別減少操作麻煩，可穿戴設(shè)備更懂用戶的使用場景。

本文由人人都是產(chǎn)品經(jīng)理作者【南設(shè)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于 CC0 協(xié)議。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

出海產(chǎn)品面臨著語言、文化和用戶習(xí)慣的巨大差異，這對UI設(shè)計師提出了更高的要求。本文為出海產(chǎn)品的UI設(shè)計提供了全面的干貨指南，從文字、圖標(biāo)、色彩、圖案到交互手勢等多個角度，詳細拆解了設(shè)計師在面對小語種和不同文化背景時需要注意的關(guān)鍵點。

隨著TikTok的海外關(guān)注度和影響力逐漸擴展、小紅書在海外友人的媒體圈炙手可熱，國內(nèi)的互聯(lián)網(wǎng)市場逐漸趨于飽和，互聯(lián)網(wǎng)產(chǎn)品紛紛向東南亞、非洲、拉丁美洲、歐洲擴展商業(yè)版圖，這也為UI設(shè)計師創(chuàng)造了新的機遇。

對于出海產(chǎn)品而言，UI設(shè)計師需要有基礎(chǔ)的語言文化了解，在此基礎(chǔ)上去進行設(shè)計才能真正滿足海外用戶的需求，本文主要從UI的文字、圖標(biāo)、色彩等幾個角度來拆解設(shè)計師在設(shè)計海外項目時需要注意的關(guān)鍵點，避免因為文化習(xí)俗差異而影響產(chǎn)品的易用性。

目錄：

1.小語種文字：超長文本的處理規(guī)則、鏡像語言、小語種適配檢視技巧

2.圖標(biāo)：需要鏡像的典型圖標(biāo)、不需要鏡像的典型圖標(biāo)、圖標(biāo)特例

3.顏色

4.圖案：禁忌圖標(biāo)、禁忌手勢、禁忌物品、禁忌動物

5.交互手勢

一、小語種文字

① 超長文本的處理規(guī)則

當(dāng)在某些語種下出現(xiàn)界面用語超長顯示不完整的情況，應(yīng)按照如下優(yōu)先級進行處理：

（1）精簡界面用語

在保證可理解的前提下，考慮對該語言的翻譯進一步精簡，采用其他較短的近義詞或者精簡表達，如“save number”在界面用語超長時應(yīng)精簡為“save”。

（2）動態(tài)布局

當(dāng)控件周圍沒有其他控件沖突時，控件可根據(jù)界面用語長度動態(tài)擴展，如按鈕。

（3）縮小文字

將文本逐級縮小，建議最小縮小到18sp/dp。

??并列的層級關(guān)系，文本超長時所有文字需要同時縮小字號

（4）多行顯示

在設(shè)計中文時，提前考慮預(yù)留小語種換行空間，??按音節(jié)換行。

（5）跑馬燈

避免同意界面使用過多的跑馬燈，1-3個為宜。過多的跑馬燈會分散用戶注意力，界面顯示混亂。跑馬燈占用系統(tǒng)資源，影響性能，過多的跑馬燈可能會導(dǎo)致卡頓。

（6）打點截斷

顯示不下到文字截斷顯示并在末尾增加“…”

截斷的使用場景：

A.用戶自定義內(nèi)容，如文件名，相冊名

B.某處顯示空間有限，但可以在本層級/上一層級/下一層級查看到全量內(nèi)容。

② 鏡像語言

阿拉伯、波斯語、烏爾都語、希伯來語等語言的書寫都是從右向左書寫，和當(dāng)今世界主流語言（如英語）從左向右書寫的方向相反。

一款產(chǎn)品無到有，產(chǎn)品經(jīng)理需要做些什么？

在一個產(chǎn)品從無到有的過程中，要做好產(chǎn)品經(jīng)理這個角色實在是不容易，除了大家都知道的寫需求、寫需求、寫需求，要做的事多著呢。產(chǎn)品經(jīng)理不是你眼中的只會找你麻煩，提要求..

查看詳情 >

受文字書寫方向的影響，阿拉伯語言的用戶對于左右邏輯的認知和英文等LTR （left to right)完全相反，比如習(xí)慣將右側(cè)作為開始，左側(cè)作為結(jié)束。

為了支持RTL語言和用戶習(xí)慣特點，在UI設(shè)計中，需要在文本，界面布局，手勢操作和動畫，圖標(biāo)等交互元素中滿足RTL的特殊要求。

③ 小語種適配檢視技巧

（1）字串顯示——檢視語言：西班牙語（拉丁美洲）

（2）大字體顯示——檢視語言：西班牙語（拉丁美洲）

二、圖標(biāo)

① 需要鏡像的典型圖標(biāo)

（1）后退，前進

（2）顯示前進方向的圖標(biāo)，如：騎車 發(fā)送 進度條。

▲ 阿拉伯語-顯示前進方向

（3）右側(cè)具有滑塊的音量圖標(biāo)應(yīng)當(dāng)鏡像，滑塊應(yīng)從右向左顯示，如：音量調(diào)節(jié)。

▲ 阿拉伯語-音量調(diào)節(jié)

（4）表達含有文本含義的圖標(biāo)，如：對話框、書寫、備忘錄。

▲ 阿拉伯語-文本含義圖標(biāo)

② 不需要鏡像的典型圖標(biāo)

（1）雖然時間的線性表示在RTL中被鏡像，但圓形時間方向不是。對于RTL需要，時鐘仍然是順時針轉(zhuǎn)動，時鐘圖標(biāo)或帶有箭頭指向順時針圖標(biāo)的刷新圖標(biāo)不應(yīng)該鏡像。

▲ 阿拉伯語-帶有時間含義的圖標(biāo)

（2）國際標(biāo)準(zhǔn)的圖標(biāo)不需要鏡像，如藍牙。

（3）擬物圖標(biāo)不需要鏡像，如SIM卡。

 (4) 斜線不需要鏡像 ，如靜音圖標(biāo)。

▲ 阿拉伯語-特殊免鏡像圖標(biāo)

③ 圖標(biāo)特例

(1)亮度圖標(biāo)需要鏡像：英文習(xí)慣認為左邊暗，右邊亮；阿拉伯語習(xí)慣認為左亮，右邊暗。

(2)阿拉伯語有自己的問號?

(3)阿拉伯語am.pm的位置要移動到時間左側(cè)

三、色彩

1.中東市場：綠色為主、火紅與黃色慎用。綠色象征吉祥，但敘利亞視黃色為不祥之兆，伊朗不喜愛藍色。

2.非洲市場：禁忌多樣。黑色普遍被認為不祥，紅色在乍得、尼日利亞等國也不受歡迎。

3.歐洲市場：白色神圣，黃色慎用。

四、圖案

禁忌手勢

禁忌物品

禁忌動物

五、交互式手勢

RTL語言中，帶左右滑動方向的圖片或者是左右滑動展開功能選項，應(yīng)遵循與英文界面相反的鏡像規(guī)則。

▲

漢語-左滑刪除

以上就是從小語種文字、圖標(biāo)、顏色、圖案、交互手勢等方面總結(jié)的出海產(chǎn)品設(shè)計干貨，希望能讓你有所收獲~