一款產品無到有，產品經理需要做些什么？
排序在B端和C端產品中都比較常見，隨著用戶對產品使用的易用性提高，排序在產品交互中也在變化。本文分享B端拖動排序的多種場景及交互，希望對你有所啟發。
很久沒有更新B端產品相關的文章了，近期工作項目中做了很多新需求，接觸了更多業務，也學到了一些新的交互，后續將會根據我在實際工作項目中遇到的需求展開總結。
B端產品設計具有較高的業務屬性，所以對于ui設計師而言也需要有較強的業務知識，在完全理解需求后，再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。
這一期主要分享關于B端產品中拖動排序功能。
排序在B端和C端產品中都比較常見，前期排序有通過點擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對產品使用的易用性提高，這種排序方式在產品交互中已經漸漸的被舍棄。
目前對于排序功能，使用更多的是通過拖動排序，通過選中數據后長按鼠標右鍵，上下拖動來完成數據的排序。
在B端產品中，我目前接觸的拖動排序的組件包含以下兩個大類：
對于分類2【樹組件多層級排序】又包含兩個小類：
對于小分類【跨層級排序】又可以細分為四個場景：
上面已經總結了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設計詳細介紹拖動排序的功能。
數據默認展示類似列表數據一樣，平鋪左對齊排版，當拖動排序時，鼠標移動到需要排序的數據行，長按鼠標右鍵并拖動數據上下移動，被拖動的數據原位置置灰（也可以直接消失）。
同時，被拖動的數據跟著鼠標走，移動到其它位置時，在將要放下的位置出現藍色高亮分割線（還可以做到所有數據實時變化位置效果）這樣能讓用戶更加直觀地看到數據位置的變化。
此類需求一般是針對一級數據排序，數據結構比較簡單，沒有文件夾多級樹狀結構，下面列舉幾個工作中遇到的需求場景，以及分享幾個其它產品中遇到的交互，便于大家理解。
由于B端產品具保密性，所以下面分享的截圖非工作實際數據，大家只要明白需求場景和交互即可。
需求場景1：產品業務中有很多的表單，表單中的字段順序在不同企業中不同，應該如何設計呢？
在設計時，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動排序。
需求場景2：飛書中有多個應用，對于每個用戶而言，自己所關注的應用不同，優先級不同，該如何設計？
同理，飛書也是對用戶個人的應該設計了拖動排序功能，可以根據自己關注的應該排序應該的位置，從而更快的找到自己常用的應用，提高工作效率。
無論是對于列表數據還是卡片數據的排序都可以采用這種拖動排序的交互。
（1）同層級排序（橫線高亮顯示即將放的位置）
樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。
（2）跨層級排序
父級未展開時：拖動到父級、父級整行高亮
如下圖，當需要把文件夾【數據名稱顯示004】放在【數據名稱顯示003】文件夾中，鼠標拖動數據放在【數據名稱顯示003】時，【數據名稱顯示003】整行會出現藍色高亮，表示被拖動的數據即將放在該文件夾內。
父級未展開時：拖動長按停留在父級時，父級自動展開子級。
如下圖，按照上面的步驟拖動時，當鼠標一直停留在【數據名稱顯示003】的位置時，該文件夾會自動展開二級目錄，這是一個拖動排序比較友好的交互，可以讓用戶再次看到該目錄下的數據結構，并快速一次性選擇需要放的位置。
父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現高亮橫線。
如下圖，在上圖基礎上，當鼠標繼續拖動數據，想要放在二級目錄中時，數據一級目錄同樣會顯示高亮，告訴用戶當前數據的層級關系。
同時，二級數據中會出現藍色高亮分割線，標識被拖動的數據即將放的位置，這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。
父級已展開時：拖動到子級文件夾時，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）。
當需要將數據拖動到二級文件夾內時，只需要高亮二級文件夾即可。
關于樹組件多層級排序的使用場景和交互比較復雜，上面我根據不同場景分別列出了交互展示方式，下面再根據實際業務需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。
本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在互聯網領域中，人機之間的互動過程就是交互。交互也有一些可預測的、重復出現的規律，作者總結了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時間有個產品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個概念有什么區別？
作為一個熱心好學、樂于助人的產品仔，我當然和他暢聊了一個多小時，順便總結下聊天內容。
你是不是也經常在生活工作中，碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預測、重復出現的現象或規律，通過歸納總結，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業模式、營銷模式、行為模式、數學模式、語言模式等。
舉個例子：
簡單說下行為模式，它分為了“習慣模式、消費模式、學習模式”等等。
苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。
但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~
掌握模式，有什么用？
當你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個好處。
我們試著再舉個例子，加深下對模式的理解，順便學學交互設計。
什么是交互？
簡單來說，交互指的是在互聯網領域中，人、機之間的一系列互動過程。
我還提煉了 3 種常見模式（簡單反饋、數據操作、業務判斷），比較粗糙湊合也能用。
現在試著再系統總結下，我常用的 7 種 C 端交互模式，主要有：導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。
學完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實可以有，等我有時間再編幾個。。
話說回來，如果是一些特別復雜的業務規則，可能會涉及到 N 個交互模式的任意組合。
常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。
導航模式的主要作用是，告知用戶當前在網站的位置，以及接下來到哪些頁面，這有點像地圖 APP。
上面這張圖中，包含了幾種導航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關鍵詞，然后系統返回搜索結果。
打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。
常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯了、展示訂單取消的注意事項”等。
輸入模式主要用于新數據創建，例如淘寶下單時，你新增了一個收貨地址。
打開美團叫個外賣，整個訂單創建流程，也是輸入模式。
有很多人可能會把輸入模式和編輯模式搞混。
區別它們的一個方法是，交互流程涉及新數據創建，還是改舊數據。
改數據的話，那就是編輯模式。
我們在看到一些干貨文章，或好用的小程序想要轉發給朋友，那就要用到分享模式。
分享模式可以很簡單，也可以往復雜了做，看產品階段去實現。
引導模式和反饋模式有點像，都是展示特定的內容。
那怎么分辨它們呢？
以設計師視角來看，反饋模式需要用戶觸發，系統被動顯示。
而要讓用戶特別關注的信息，那就是引導模式。
模式，即抽象的規律。——好夕雷
說了這么多概念和例子，你是不是對模式的認知更清晰了呢？
模式運用在產品領域，就有了這 7 種交互模式，分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。
如果學會了模式，那么無論生活還是工作，相信你一定能輕松應對、事半功倍。
本文由 @好夕雷 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
在前面的文章中，我們定義了交互思維和流程、目標，接下來我們分享交互設計思維與我們常說的產品思維、體驗思維等的融合。
在現代產品開發中，交互思維與產品設計思維的融合已經成為提升用戶體驗的關鍵。兩者看似獨立，卻可以在實際設計過程中形成互補，打造出更加契合用戶需求的產品。本文將從兩者的特點、融合的價值，以及實際應用場景中如何落地等角度出發，深入探討它們的結合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產品的互動體驗。它關注的是：
交互思維傾向于優化用戶的操作路徑，將復雜的技術邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設計在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產品設計思維：關注用戶價值與商業目標
產品設計思維則是更全局的，它關注的是產品能否滿足用戶需求并實現商業價值。核心問題包括：
產品設計思維更偏向戰略層面，要求對市場、用戶和商業有全局的理解，并制定產品的發展方向。
例子：微信從“即時通訊”入手，以簡單的聊天功能切入市場，但通過持續擴展支付、朋友圈、公眾號等模塊，構建了一個完善的生態系統。
兩種思維的結合，能夠更好地兼顧用戶體驗和商業價值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業目標
交互思維： 設計流暢、直觀的操作流程，提升用戶體驗。
產品設計思維： 在流暢體驗的基礎上，引導用戶完成關鍵行為（如購買、注冊等），實現商業目標。
案例：美團外賣的下單流程
2）用戶需求與技術限制的平衡
交互思維： 關注用戶直觀感受，簡化復雜操作，讓用戶專注于目標任務。
產品設計思維： 在技術和資源限制內，找到實現用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數據驅動與用戶體驗的結合
交互思維： 基于用戶行為數據優化界面和流程，提升操作效率。
產品設計思維： 基于數據分析判斷用戶需求的優先級，調整產品功能布局。
案例：淘寶推薦算法與界面設計
淘寶的個性化推薦系統通過AI分析用戶瀏覽和購買行為，推薦相關商品。交互設計確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強購物體驗的同時提升成交轉化率。
4）感性設計與理性分析的結合
交互思維： 關注情感體驗，設計讓用戶愉悅的互動。
產品設計思維： 從用戶行為和反饋中提煉需求，找到情感體驗的落地點。
案例：支付寶的“年度賬單”功能
隨著AI技術的深入發展，交互思維與產品設計思維的融合將進一步進化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據天氣、飲食偏好提供動態優惠，讓用戶感到“被理解”。同時，界面交互會變得更加智能，比如直接通過語音完成點餐和支付。
在數字產品開發中，交互思維和用戶體驗設計思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產品體驗。兩者的融合不僅能提升產品的使用效率，還能激發用戶的情感共鳴，最終實現用戶目標與商業價值的雙贏。
1）交互思維：聚焦人與界面的高效互動
交互思維主要關注用戶與產品之間的操作過程，旨在通過直觀的界面設計和高效的交互方式，幫助用戶輕松完成任務。其核心要素包括：
2）用戶體驗設計思維：以用戶為中心的全局視角
用戶體驗設計思維是以用戶需求和用戶感受為核心的一種方法論，涉及產品從設計到使用的整個生命周期。其重點在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗設計思維更像是一位城市規劃師，考慮如何讓整個城市的交通系統高效且宜居。
1）從細節到全局，滿足用戶操作與體驗的雙重需求
交互思維注重細節，優化每一個交互動作；而用戶體驗設計思維關注全局，確保整個使用流程的流暢性和一致性。兩者結合能讓用戶在每個環節都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設計與功能設計的結合
交互思維解決“怎么用”的問題，用戶體驗設計思維則深入到“為什么用”和“用后感受如何”。情感設計是兩者融合的一個關鍵點，既提升用戶滿意度，又增強產品粘性。
案例：支付寶的完成支付動畫
3）用戶需求與設計約束的平衡
交互思維幫助優化操作路徑，而用戶體驗設計思維則考慮設計的合理性和場景適配性。在技術和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規劃與確認
4）數據驅動與用戶感知的結合
數據分析是用戶體驗設計思維的重要部分，而交互思維則利用這些數據優化每一次用戶操作。兩者的結合能實現功能的個性化和體驗的精準化。
案例：淘寶的商品推薦系統
抖音作為短視頻平臺，在交互與用戶體驗設計的結合上表現得尤為出色：
隨著AI的普及，交互思維與用戶體驗設計思維的融合將進入新的階段：
案例展望：智能客服系統
未來的智能客服不僅能準確理解用戶問題，還能根據情緒識別調整對話語氣，同時提供即時解決方案與友好的互動體驗。
交互思維與界面設計思維的融合，是現代產品設計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現，彼此互補，共同打造出功能性與美觀性兼具的產品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現這種深度結合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優化用戶操作的每一步，降低操作復雜度，提升使用效率。
其關注的主要問題包括：
特點：邏輯性強，重在用戶的操作行為，強調功能可達性和可用性。
2）界面設計思維：聚焦視覺呈現與情感體驗
界面設計思維則以視覺表現為中心，關注界面的美感和信息傳達的有效性。其關注點包括：
特點：更注重感性表達，強調用戶的情感體驗和對產品的第一印象。
簡單類比：
交互思維像是設計產品的操作說明書，確保邏輯清晰易懂；而界面設計思維則為產品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導的結合
交互思維： 根據用戶操作邏輯，對信息進行層級劃分，優先展示關鍵信息，隱藏次要內容。
界面設計思維： 通過顏色、字體大小、對比等視覺元素，強化信息的層級感和用戶的關注點。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉賬、收付款）被放置在顯眼的首屏區域，次要功能（如理財推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區分，用戶一眼就能找到核心功能。
2）動效與反饋設計的結合
交互思維： 動效作為用戶操作的反饋機制，提示操作結果或狀態變化。
界面設計思維： 動效的風格和節奏與界面整體視覺風格保持一致，增強整體體驗的連貫性。
案例：抖音的點贊動效
交互層面： 用戶雙擊屏幕后，出現心形動畫，明確提示“點贊成功”。
界面層面： 動效的色彩與抖音的品牌風格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點擊和跳轉。
界面設計思維： 通過對頁面布局的優化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設計
交互層面： 重要操作（如全選、去結算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價格信息展示，讓用戶輕松理解購物車內容。
4）情感設計與功能優化的結合
交互思維： 通過優化功能滿足用戶需求，讓操作過程簡單高效。
界面設計思維： 在視覺設計中融入情感化元素，讓用戶感到愉悅或被關懷。
案例：網易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點擊一個按鈕，系統即可快速識別歌曲，操作簡單高效。
界面層面： 啟動時有動態音波效果，識別成功后展示專輯封面和歌詞，增強情感連接。
微信的朋友圈功能是交互思維與界面設計思維結合的經典案例：
交互設計：
用戶可以通過簡單的下滑操作瀏覽動態，上滑時加載更多內容，操作自然流暢。
點贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設計：
動態展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統一，評論區域的縮進樣式使信息層級清晰。
交互思維與產品思維、體驗思維、視覺設計思維的融合，是用戶體驗優化的基礎。在實際設計中，我們既需要從全局出發，規劃產品戰略，也需要關注用戶的每一步操作細節。
通過兩者的互相補充，我們能設計出既符合用戶需求，又實現商業價值的產品，更精準地滿足用戶需求，讓產品不僅好用，還能打動人心。為用戶和企業帶來雙贏的結果。
未來，隨著技術的進步和用戶需求的多樣化，這種融合將持續推動數字產品體驗的升級，成為提升產品競爭力的核心動力。
本文由 @ DesignLink 原創發布于人人都是產品經理。未經作者許可，禁止轉載
蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在前面的文章中，我們定義了交互思維和流程、目標，接下來我們分享交互設計思維與我們常說的產品思維、體驗思維等的融合。
在現代產品開發中，交互思維與產品設計思維的融合已經成為提升用戶體驗的關鍵。兩者看似獨立，卻可以在實際設計過程中形成互補，打造出更加契合用戶需求的產品。本文將從兩者的特點、融合的價值，以及實際應用場景中如何落地等角度出發，深入探討它們的結合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產品的互動體驗。它關注的是：
交互思維傾向于優化用戶的操作路徑，將復雜的技術邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設計在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產品設計思維：關注用戶價值與商業目標
產品設計思維則是更全局的，它關注的是產品能否滿足用戶需求并實現商業價值。核心問題包括：
產品設計思維更偏向戰略層面，要求對市場、用戶和商業有全局的理解，并制定產品的發展方向。
例子：微信從“即時通訊”入手，以簡單的聊天功能切入市場，但通過持續擴展支付、朋友圈、公眾號等模塊，構建了一個完善的生態系統。
兩種思維的結合，能夠更好地兼顧用戶體驗和商業價值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業目標
交互思維： 設計流暢、直觀的操作流程，提升用戶體驗。
產品設計思維： 在流暢體驗的基礎上，引導用戶完成關鍵行為（如購買、注冊等），實現商業目標。
案例：美團外賣的下單流程
2）用戶需求與技術限制的平衡
交互思維： 關注用戶直觀感受，簡化復雜操作，讓用戶專注于目標任務。
產品設計思維： 在技術和資源限制內，找到實現用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數據驅動與用戶體驗的結合
交互思維： 基于用戶行為數據優化界面和流程，提升操作效率。
產品設計思維： 基于數據分析判斷用戶需求的優先級，調整產品功能布局。
案例：淘寶推薦算法與界面設計
淘寶的個性化推薦系統通過AI分析用戶瀏覽和購買行為，推薦相關商品。交互設計確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強購物體驗的同時提升成交轉化率。
4）感性設計與理性分析的結合
交互思維： 關注情感體驗，設計讓用戶愉悅的互動。
產品設計思維： 從用戶行為和反饋中提煉需求，找到情感體驗的落地點。
案例：支付寶的“年度賬單”功能
隨著AI技術的深入發展，交互思維與產品設計思維的融合將進一步進化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據天氣、飲食偏好提供動態優惠，讓用戶感到“被理解”。同時，界面交互會變得更加智能，比如直接通過語音完成點餐和支付。
在數字產品開發中，交互思維和用戶體驗設計思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產品體驗。兩者的融合不僅能提升產品的使用效率，還能激發用戶的情感共鳴，最終實現用戶目標與商業價值的雙贏。
1）交互思維：聚焦人與界面的高效互動
交互思維主要關注用戶與產品之間的操作過程，旨在通過直觀的界面設計和高效的交互方式，幫助用戶輕松完成任務。其核心要素包括：
2）用戶體驗設計思維：以用戶為中心的全局視角
用戶體驗設計思維是以用戶需求和用戶感受為核心的一種方法論，涉及產品從設計到使用的整個生命周期。其重點在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗設計思維更像是一位城市規劃師，考慮如何讓整個城市的交通系統高效且宜居。
1）從細節到全局，滿足用戶操作與體驗的雙重需求
交互思維注重細節，優化每一個交互動作；而用戶體驗設計思維關注全局，確保整個使用流程的流暢性和一致性。兩者結合能讓用戶在每個環節都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設計與功能設計的結合
交互思維解決“怎么用”的問題，用戶體驗設計思維則深入到“為什么用”和“用后感受如何”。情感設計是兩者融合的一個關鍵點，既提升用戶滿意度，又增強產品粘性。
案例：支付寶的完成支付動畫
3）用戶需求與設計約束的平衡
交互思維幫助優化操作路徑，而用戶體驗設計思維則考慮設計的合理性和場景適配性。在技術和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規劃與確認
4）數據驅動與用戶感知的結合
數據分析是用戶體驗設計思維的重要部分，而交互思維則利用這些數據優化每一次用戶操作。兩者的結合能實現功能的個性化和體驗的精準化。
案例：淘寶的商品推薦系統
抖音作為短視頻平臺，在交互與用戶體驗設計的結合上表現得尤為出色：
隨著AI的普及，交互思維與用戶體驗設計思維的融合將進入新的階段：
案例展望：智能客服系統
未來的智能客服不僅能準確理解用戶問題，還能根據情緒識別調整對話語氣，同時提供即時解決方案與友好的互動體驗。
交互思維與界面設計思維的融合，是現代產品設計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現，彼此互補，共同打造出功能性與美觀性兼具的產品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現這種深度結合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優化用戶操作的每一步，降低操作復雜度，提升使用效率。
其關注的主要問題包括：
特點：邏輯性強，重在用戶的操作行為，強調功能可達性和可用性。
2）界面設計思維：聚焦視覺呈現與情感體驗
界面設計思維則以視覺表現為中心，關注界面的美感和信息傳達的有效性。其關注點包括：
特點：更注重感性表達，強調用戶的情感體驗和對產品的第一印象。
簡單類比：
交互思維像是設計產品的操作說明書，確保邏輯清晰易懂；而界面設計思維則為產品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導的結合
交互思維： 根據用戶操作邏輯，對信息進行層級劃分，優先展示關鍵信息，隱藏次要內容。
界面設計思維： 通過顏色、字體大小、對比等視覺元素，強化信息的層級感和用戶的關注點。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉賬、收付款）被放置在顯眼的首屏區域，次要功能（如理財推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區分，用戶一眼就能找到核心功能。
2）動效與反饋設計的結合
交互思維： 動效作為用戶操作的反饋機制，提示操作結果或狀態變化。
界面設計思維： 動效的風格和節奏與界面整體視覺風格保持一致，增強整體體驗的連貫性。
案例：抖音的點贊動效
交互層面： 用戶雙擊屏幕后，出現心形動畫，明確提示“點贊成功”。
界面層面： 動效的色彩與抖音的品牌風格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點擊和跳轉。
界面設計思維： 通過對頁面布局的優化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設計
交互層面： 重要操作（如全選、去結算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價格信息展示，讓用戶輕松理解購物車內容。
4）情感設計與功能優化的結合
交互思維： 通過優化功能滿足用戶需求，讓操作過程簡單高效。
界面設計思維： 在視覺設計中融入情感化元素，讓用戶感到愉悅或被關懷。
案例：網易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點擊一個按鈕，系統即可快速識別歌曲，操作簡單高效。
界面層面： 啟動時有動態音波效果，識別成功后展示專輯封面和歌詞，增強情感連接。
微信的朋友圈功能是交互思維與界面設計思維結合的經典案例：
交互設計：
用戶可以通過簡單的下滑操作瀏覽動態，上滑時加載更多內容，操作自然流暢。
點贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設計：
動態展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統一，評論區域的縮進樣式使信息層級清晰。
交互思維與產品思維、體驗思維、視覺設計思維的融合，是用戶體驗優化的基礎。在實際設計中，我們既需要從全局出發，規劃產品戰略，也需要關注用戶的每一步操作細節。
通過兩者的互相補充，我們能設計出既符合用戶需求，又實現商業價值的產品，更精準地滿足用戶需求，讓產品不僅好用，還能打動人心。為用戶和企業帶來雙贏的結果。
未來，隨著技術的進步和用戶需求的多樣化，這種融合將持續推動數字產品體驗的升級，成為提升產品競爭力的核心動力。
本文由 @ DesignLink 原創發布于人人都是產品經理。未經作者許可，禁止轉載
蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎才能便于理解內容。
你有沒有注意過，App底部的圖標是如何變成選中的？大多數產品是將靜態圖標替換（硬切過渡），來完成狀態切換。
當我看完上百個動態后，找到了更有趣的方式...
02 App底部導航構成
通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產品只使用圖標或文字），但設計師在進行動態設計時則是針對這3部分。
03 Tab Bar動態類型
動態效果由弱到強，視覺層級由低到高依次排序：圖標動態 — 裝飾元素動態 — 底板卡片動態。（根據本文案例效果來排序，但效果不同會有所差異）
▍圖標動態?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調整百分百參數來控制線條生長。
但只是單色修剪，看起來很單調。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調整不同顏色圖標的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉等基礎屬性則是更好的選擇。
通用的方法是調整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調整圓的縮放即可。
在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。
對于這類圖標，只需要參考它們的物理狀態[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調整基礎屬性，便能制作出細節豐富的出場動畫。
（物理狀態：該物體在現實場景下的狀態，上圖獎杯真實世界狀態通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態應該是掛在墻上，所有出場方向是從上到下）
當然如果去掉高光和投影，在制作一些動態時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形，這樣便能營造出3d旋轉的錯覺。
對于結構復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業價值不足，實現成本高，所以這里也只是提供一些創意練習思路）
在一些年輕化產品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現心電圖樣式，讓人眼前一亮。
通過動態效果，甚至能體現出產品行業屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產品嗎？
又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產品。
通過調整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態下的圖標出現。
假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態?
這類動態少見的原因在于其動態效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調整卡片大小）
完成圓滑處理后，修改其他元素的基礎屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數。
這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調整基礎屬性。
此方案目前還沒有在其他產品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發現。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創意的產生，并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創意。
最后再說兩句：
每個產品都有自己的調性和目標用戶，動態效果也有強有弱。好的動態應該是能與其進行匹配，而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態，并不代表只能這樣用。動態效果類型遠遠不止這些，而以上只是最常見的動態屬性組合方式，所以請不要局限你的想法。
這就是信息的無限性和手機屏幕的有限性之間的矛盾，如何把信息合理的展示給用戶，需要我們重新對信息進行組織分類，使信息能更高效有序地被用戶認知。在進行信息設計的時候，我們會經常遇到“扁平化設計”這個詞，在我的理解看來，扁平化設計可以理解為：“精簡交互步驟，用戶用最少的步驟就完成任務”。層級太多了用戶就會看不懂；即使看得懂，層級多了用起來也麻煩，因此：手機上能不跳轉就不跳轉。那我們就來看看有沒有辦法減少跳轉…
當你為你的項目創建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性。基本上，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創建慷慨的熱區。當為移動設備設計時，嘗試創建足夠大的可點擊區域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發現他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現一個好的垂直節奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點，用百分數來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區分開來，輕松掃描您的網站或應用程序。按鈕，在大多數情況下，將優先，所以確保他們是最突出的。項目在屏幕上，并很容易區分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度。現實世界中的陰影，在大多數情況下幾乎是不可察覺的，而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經常用于內容豐富的網站，通過最小的調整，你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒，但是當過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應該是最優先的。
在ui中使用已建立的圖標，為了避免給用戶造成混淆。在你的設計中添加圖標時，試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑，成為用戶的認知障礙。不要在這些圖標上過于叛逆。
在眾多經過嘗試和測試的設計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程，表明彼此之間的關系，這有助于加快用戶的認知。
4pt基線網格+ 8pt網格=單一網格。當使用類型時，8點網格旁邊使用4點基線
可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4，使用的行高值為4的倍數（16、20、24、28等）
為什么4？我發現在過去使用特定的文本大小時，按8的倍數縮放是不太合適。
減少標題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的，顏色方案快速。當你需要快速將顏色調和到混合中時，可以使用類似的方法。
在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲，從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效，不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產生任何混淆。
養肥了，字體大小為最佳易讀性。當設置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標，避免讓用戶的眼睛疲勞。
試著為你要呈現的內容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當內容與他們交談當它不是。正確的字體選擇是至關重要的，使您的內容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救。總是讓用戶了解情況，即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循，并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
參考文獻《UI & UX Micro Tips - The Ultimate Collection》
藍藍設計的小編 http://m.lzhte.cn
