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

用戶動機，是每個設計師設計產品時必須考慮的問題。只有激發用戶動機，才能進一步提高轉化率。本篇文章中，作者從福格PAC動機來源模型入手，從3種動機來源介紹如何激發用戶的動機。不妨來看一看，說不定有幫助哦。

交互設計( interaction design, IXD )，從字面上來說，交互即為相互作用相互影響，設計即為理解與傳達。在互聯網產品中，交互設計對用戶體驗產生很大的影響。本文將圍繞交互設計進行分析，與你分享。

前面的文章我們分享了交互設計思維，這篇文章，我們來看看用戶目標與交互目標。交互設計的核心，就是幫用戶拆解這些目標并找到最優路徑，讓他們覺得“這事兒沒那么難”。

在設計一個優秀的互聯網產品時，設計流程往往分為幾個階段，每個階段都有清晰的目標和方法。這不僅幫助我們找到真正的用戶需求，也確保設計思路清晰、可執行。下面，我們用簡單易懂的方式來講解整個設計流程。

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

背景

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

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

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

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

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

3. 頁面

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

4. 動畫

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

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

5. 音效

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

三、總結

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

在實際項目的運用中，也會根據實際的研發情況，逐步的去調整，不斷地完善產品細節。

本文由 @小太陽不愛吃辣椒 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

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

編輯導語：自適應設計指能使界面自適應顯示在不同大小終端設備上的設計方式及技術。而內容自適應則需要對用戶行為進行預判進而改變設計內容，本文作者將對自適應設計在內容上的應用進行分享，值得閱讀學習。

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

以下，是道樂UED團隊 基于查閱的資料以及行業的積累，帶來的一篇關于內容自適應的分享。

目錄：

1. 內容自適應的界定
2. 適用場景及案例分析
3. 利弊分析
4. 內容自適應設計在金融產品上的應用思考

一、內容自適應的界定

目前自適應界面在內容上的呈現大致包括兩種類型：

1. 實時自適應

顧名思義，就是根據用戶當下的操作，實時判斷用戶所需，從而調整不同的信息展示與布局，他的優勢在于能盡量減少頁面上與用戶目標不相關信息的展示，從而提升用戶操作的效率與準確度

2. 歷史自適應

通過用戶標簽與過往數據的分析，調整頁面內容的展示數量與優先級，僅展示用戶感興趣或可能感興趣的內容，從而提高用戶在使用產品中的轉化率。

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

二、適用場景及案例分析

1. 實時自適應

（1）搜索

① Google搜索

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

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

Google搜索適應用戶需求的第一種方法是重新安排導航以適應結果。

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

Google有362,880種獨特的方式來排列導航，以適應搜索查詢。然而，自適應設計的最大例子是搜索結果本身的布局。結果頁面是完全模塊化的：根據搜索結果，不同的元素出現在不同的配置中。

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

另一方面，以色列特拉維夫市的搜索結果為旅行者提供優先信息。圖片、地圖、當地天氣以及與旅行有關的問題（“特拉維夫對游客安全嗎？”、“特拉維夫以什么聞名？”）優先于傳統搜索結果。模塊促進了特拉維夫的活動以及對附近其他城市的推薦。搜索結果頁上可能會出現數千個不同的模塊，從簡單的布局驅動模塊到完全獨立的應用程序。

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

通過自適應設計，所有有關內容、格式和順序的決策都是由算法決定的。設計人員的作用不再是創建明確的外部布局。

如今，尖端產品的設計者，以及未來日常產品的設計者，正在就生成這些布局的規則做出決策。

② 淘寶搜索

淘寶搜索結果頁，當用戶往下滑動查看更多時，系統判斷你根據當前搜索頁沒有找到想要的內容，則根據不同物品展示物品的更細分的篩選，如啤酒會c展示“德國進口啤、國產精釀、比利時精釀”，方便用戶找到目標物品。

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

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

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

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

基于以上充分的原因，這個自適應功能設計就得以開發并成功提高用戶的使用效率。

（2）根據用戶靜態標簽優化結果

靜態標簽：用戶主動提供的數據, 指用戶不變的基礎信息，多為用戶固定數據，如姓名、性別、年齡、身高、體重、職業、地區、設備信息、來源渠道等。

定位地區：大眾點評——切換城市

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

2. 歷史自適應

歷史自適應主要集中在特定領域的個性化界面定制和推薦等方面。針對不同用戶呈現不同界面，根據用戶的類型、任務特點、喜好等提供不同的界面樣式。

（1）根據用戶動態/預測標簽算法推薦定制內容

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

用戶標簽是構成用戶畫像的核心因素，是將用戶在平臺內所產生的行為數據，分析提煉后生成具有差異性特征的形容詞。即用戶通過平臺，在什么時間什么場景下做了什么行為，平臺將用戶所有行為數據提煉出來形成支撐業務實現的可視化信息。

① 用戶生產內容（UGC）

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

② 電商平臺

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

③ APP Store 應用頁面大變動：不同用戶可看到不同功能與內容

自定義產品頁功能讓開發者可以面向不同用戶展示 App 的不同功能，產品頁優化功能則讓開發者們能夠測試不同的截屏、預覽視頻，甚至 App 圖標。

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

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

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

三、利弊分析

1. 優點

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

2. 缺點

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

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

四、內容自適應設計在金融產品上的應用思考

1. 基礎設計原則思考

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

基于以上內容自適應的分析以及金融產品設計的特殊性，我們來看看有哪些可以運用到金融產品的設計中來。

2. 金融產品設計思考

（1）金融應用的[截圖]功能

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

截圖常見的用戶目標大致分為兩類：報錯與分享。我們可以為這兩個用戶目標做一些內容上設計。

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

如此根據用戶目標拆解用戶行為，設計對應的功能來滿足用戶操作，從而減少用戶的操作路徑。

分享可根據用戶場景設計不同的內容，如：

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

（2）金融應用的[內容管理]功能

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

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

（3） 金融應用的[搜索]功能

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

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

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

五、結語

通過對自適應設計在內容上的應用探究，我們對內容自適應的設計手法及應用場景有了初步的理解，也會繼續的探究并運用到實際的工作中來，希望這些思考能為大家帶來一些幫助。

作者：道樂UED全體成員

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

本文由 @道樂科技設計中心 授權發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。

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

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

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

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

一、陀螺儀是什么

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

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

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

▲ 手機橫豎自動切換

▲ 地圖方向感知

二、讓體驗增強的應用場景

1. 越出靜態視圖邊界

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

▲淘寶人生套裝展示

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

▲類裸眼3D效果

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

▲ 好好住徽章動態交互

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

▲ 星空APP–即時星圖體驗

2. 讓游戲更具操縱感

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

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

▲ 和平精英體感操作

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

▲ AR體感游戲

3. 現實空間的互動交互

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

▲ 3D應用

▲ AR跟隨并觸發功能

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

▲抬起喚醒AR導航

▲放下恢復平面導航

▲高德地圖喚醒AR實景導航

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

▲ 陀螺儀體感控制

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

▲ 發光的鞋子通過陀螺儀

4. 讓視聽一體身臨其境

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

▲ Airpods環繞聲定位

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

▲ Airpods跟隨示例

三、更多可能

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

▲zenly近場互動

▲多指觸屏設計字體

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

作者：能操縱空間的；

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

本文由 @淘寶設計 授權發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議

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

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

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

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

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

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

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

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

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

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

1. 全局框架：項目的主要模塊排版和布局，產品使用的主要依據和步驟
2. 功能流程：需要較多操作步驟才可以完成的一個完整的用戶使用目標
3. 組件操作：一些復雜模塊、業務組件的完整操作方法和狀態
4. 控件使用：基礎控件元素的操作方法和狀態

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

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

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

包括頂部的屬性欄，左側的工具欄，中間的標簽欄、創作區域，右側的不同工作窗口排列形式。

除了主要界面的布局框架外，還包含一些二級窗口的框架結構也是統一和固定的。比如打開 PS 內的首選項設置和屬性設置窗口，和其它幾個軟件的屬性設置窗口幾乎一致。

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

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

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

PhotoShop 作為平面領域中的獨角獸，直接影響了絕大多數同類設計軟件的框架結構和布局方法。因為絕大多數設計師學習設計的入門軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應該順著他們已經習慣的方式來。

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

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

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

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

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

二、B端產品的全局框架拆解

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

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

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

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

1. 全局框架中的組件

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

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

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

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

（1）全局組件

a. 導航欄

導航欄不僅僅是 B 端管理系統，也是網站設計中最重要的組件。優秀的導航欄可以清晰的展示項目的頁面層級結構，幫助用戶高效的訪問目標頁面。全局框架制定的一步，就是根據項目的具體情況，選擇合適的導航類型。

導航欄主要使用上方、左側、混合型三種布局形式：

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

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

b. 頂部欄

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

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

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

c. 頁面標簽欄

頁面標簽欄是一個類似瀏覽器標簽欄的組件，用來展示和關閉當前項目內打開的頁面。

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

隨著瀏覽器標簽的普及，它已經不適用于多數 B 端項目，但依舊有一小部分項目是需要結合它的優勢才可以更好的提升操作效率。

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

d. 內容模塊

內容模塊是用來容納和顯示頁面相關內容的模塊，這是個被很多人忽略的組件類型，包含模塊標題欄和操作區域。

一個成熟的 B 端項目會統一制定內容模塊的組件結構，保證大量頁面和模塊之間樣式的統一性。比如下面的模塊案例。

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

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

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

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

作者：酸梅干超人；

本文由 @超人的電話亭 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash ，基于 CC0 協議。

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

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

Halo，這里是設計夾，今天為大家分享的是「B端設計」。B端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態。在這個系列文章里通過結合平時的項目案例來談談自己對B端設計規范的一些理解，希望可以帶來一些啟發。

本篇先談談設計規范制作的指導思想–設計原則，后續文章再展開講一下常見各種組件的設計規范。

一、設計規范作用

設計規范作為B端設計中非常重要的一環，它的作用主要體現在以下三個方面：

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

二、設計原則

通過前面內容我們知道了設計規范對于產品設計意義重大，那么制定設計規范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規范的總綱領，所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容：

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

(一) 清晰

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

1.對比

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

2.親密

如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。

3.對齊

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

4.重復

重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。

(二) 高效

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

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

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

2.盡量減少不必要的跳轉–便捷、輕量

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

3.放大點擊熱區–便捷

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

4.懸停即現–輕量

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

5.折疊次要功能–簡化

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

6.統一樣式–一致

一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業開發成本。

(三) 友好

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

1.操作前

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

2.操作中

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

3.操作后

利用界面中元素變化清晰直觀展示當前的狀態。

(四) 可控

可控主要體現在自由和導航兩個方面。

1.自由

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

2.導航

導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。

最后

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