如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立，卻可以在實際設(shè)計過程中形成互補，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值，以及實際應(yīng)用場景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動體驗。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計思維：關(guān)注用戶價值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實現(xiàn)商業(yè)價值。核心問題包括：
產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面，要求對市場、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時通訊”入手，以簡單的聊天功能切入市場，但通過持續(xù)擴展支付、朋友圈、公眾號等模塊，構(gòu)建了一個完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計流暢、直觀的操作流程，提升用戶體驗。
產(chǎn)品設(shè)計思維： 在流暢體驗的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊等），實現(xiàn)商業(yè)目標(biāo)。
案例：美團外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計思維： 在技術(shù)和資源限制內(nèi)，找到實現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動與用戶體驗的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計
淘寶的個性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強購物體驗的同時提升成交轉(zhuǎn)化率。
4）感性設(shè)計與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗，設(shè)計讓用戶愉悅的互動。
產(chǎn)品設(shè)計思維： 從用戶行為和反饋中提煉需求，找到情感體驗的落地點。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計思維的融合將進一步進化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠，讓用戶感到“被理解”。同時，界面交互會變得更加智能，比如直接通過語音完成點餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗設(shè)計思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。
1）交互思維：聚焦人與界面的高效互動
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗設(shè)計思維：以用戶為中心的全局視角
用戶體驗設(shè)計思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師，考慮如何讓整個城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個交互動作；而用戶體驗設(shè)計思維關(guān)注全局，確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計與功能設(shè)計的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點，既提升用戶滿意度，又增強產(chǎn)品粘性。
案例：支付寶的完成支付動畫
3）用戶需求與設(shè)計約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺，在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗設(shè)計思維的融合將進入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識別調(diào)整對話語氣，同時提供即時解決方案與友好的互動體驗。
交互思維與界面設(shè)計思維的融合，是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補，共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點：邏輯性強，重在用戶的操作行為，強調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計思維：聚焦視覺呈現(xiàn)與情感體驗
界面設(shè)計思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括：
特點：更注重感性表達(dá)，強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。
簡單類比：
交互思維像是設(shè)計產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對信息進行層級劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計思維： 通過顏色、字體大小、對比等視覺元素，強化信息的層級感和用戶的關(guān)注點。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動效與反饋設(shè)計的結(jié)合
交互思維： 動效作為用戶操作的反饋機制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計思維： 動效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強整體體驗的連貫性。
案例：抖音的點贊動效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動畫，明確提示“點贊成功”。
界面層面： 動效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點擊和跳轉(zhuǎn)。
界面設(shè)計思維： 通過對頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設(shè)計
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡單高效。
界面設(shè)計思維： 在視覺設(shè)計中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點擊一個按鈕，系統(tǒng)即可快速識別歌曲，操作簡單高效。
界面層面： 啟動時有動態(tài)音波效果，識別成功后展示專輯封面和歌詞，增強情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例：
交互設(shè)計：
用戶可以通過簡單的下滑操作瀏覽動態(tài)，上滑時加載更多內(nèi)容，操作自然流暢。
點贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設(shè)計：
動態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評論區(qū)域的縮進樣式使信息層級清晰。
交互思維與產(chǎn)品思維、體驗思維、視覺設(shè)計思維的融合，是用戶體驗優(yōu)化的基礎(chǔ)。在實際設(shè)計中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補充，我們能設(shè)計出既符合用戶需求，又實現(xiàn)商業(yè)價值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進步和用戶需求的多樣化，這種融合將持續(xù)推動數(shù)字產(chǎn)品體驗的升級，成為提升產(chǎn)品競爭力的核心動力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.tuitetiyu.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í)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立，卻可以在實際設(shè)計過程中形成互補，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值，以及實際應(yīng)用場景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動體驗。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計思維：關(guān)注用戶價值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實現(xiàn)商業(yè)價值。核心問題包括：
產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面，要求對市場、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時通訊”入手，以簡單的聊天功能切入市場，但通過持續(xù)擴展支付、朋友圈、公眾號等模塊，構(gòu)建了一個完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計流暢、直觀的操作流程，提升用戶體驗。
產(chǎn)品設(shè)計思維： 在流暢體驗的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊等），實現(xiàn)商業(yè)目標(biāo)。
案例：美團外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計思維： 在技術(shù)和資源限制內(nèi)，找到實現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動與用戶體驗的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計
淘寶的個性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強購物體驗的同時提升成交轉(zhuǎn)化率。
4）感性設(shè)計與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗，設(shè)計讓用戶愉悅的互動。
產(chǎn)品設(shè)計思維： 從用戶行為和反饋中提煉需求，找到情感體驗的落地點。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計思維的融合將進一步進化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠，讓用戶感到“被理解”。同時，界面交互會變得更加智能，比如直接通過語音完成點餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗設(shè)計思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。
1）交互思維：聚焦人與界面的高效互動
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗設(shè)計思維：以用戶為中心的全局視角
用戶體驗設(shè)計思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師，考慮如何讓整個城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個交互動作；而用戶體驗設(shè)計思維關(guān)注全局，確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計與功能設(shè)計的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點，既提升用戶滿意度，又增強產(chǎn)品粘性。
案例：支付寶的完成支付動畫
3）用戶需求與設(shè)計約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺，在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗設(shè)計思維的融合將進入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識別調(diào)整對話語氣，同時提供即時解決方案與友好的互動體驗。
交互思維與界面設(shè)計思維的融合，是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補，共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點：邏輯性強，重在用戶的操作行為，強調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計思維：聚焦視覺呈現(xiàn)與情感體驗
界面設(shè)計思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括：
特點：更注重感性表達(dá)，強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。
簡單類比：
交互思維像是設(shè)計產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對信息進行層級劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計思維： 通過顏色、字體大小、對比等視覺元素，強化信息的層級感和用戶的關(guān)注點。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動效與反饋設(shè)計的結(jié)合
交互思維： 動效作為用戶操作的反饋機制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計思維： 動效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強整體體驗的連貫性。
案例：抖音的點贊動效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動畫，明確提示“點贊成功”。
界面層面： 動效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點擊和跳轉(zhuǎn)。
界面設(shè)計思維： 通過對頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設(shè)計
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡單高效。
界面設(shè)計思維： 在視覺設(shè)計中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點擊一個按鈕，系統(tǒng)即可快速識別歌曲，操作簡單高效。
界面層面： 啟動時有動態(tài)音波效果，識別成功后展示專輯封面和歌詞，增強情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例：
交互設(shè)計：
用戶可以通過簡單的下滑操作瀏覽動態(tài)，上滑時加載更多內(nèi)容，操作自然流暢。
點贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設(shè)計：
動態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評論區(qū)域的縮進樣式使信息層級清晰。
交互思維與產(chǎn)品思維、體驗思維、視覺設(shè)計思維的融合，是用戶體驗優(yōu)化的基礎(chǔ)。在實際設(shè)計中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補充，我們能設(shè)計出既符合用戶需求，又實現(xiàn)商業(yè)價值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進步和用戶需求的多樣化，這種融合將持續(xù)推動數(shù)字產(chǎn)品體驗的升級，成為提升產(chǎn)品競爭力的核心動力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.tuitetiyu.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í)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan
前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個動態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計師在進行動態(tài)設(shè)計時則是針對這3部分。
03 Tab Bar動態(tài)類型
動態(tài)效果由弱到強，視覺層級由低到高依次排序：圖標(biāo)動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。（根據(jù)本文案例效果來排序，但效果不同會有所差異）
▍圖標(biāo)動態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長。
但只是單色修剪，看起來很單調(diào)。我們可以在這個動畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態(tài)，首先在圖標(biāo)周圍繪制幾個圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時間，設(shè)計師們可能會技癢，而將圖標(biāo)繪制的更加豐富，來營造氛圍。
對于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場動畫。
（物理狀態(tài)：該物體在現(xiàn)實場景下的狀態(tài)，上圖獎杯真實世界狀態(tài)通常是放置地面，所以出場方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動態(tài)時會更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個獎杯的距離，并記錄關(guān)鍵幀，然后整體再移動一個獎杯距離。耳朵則調(diào)整路徑來完成移動和變形，這樣便能營造出3d旋轉(zhuǎn)的錯覺。
對于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價值不足，實現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計師可能會用線或點來替代文字，讓整體更簡潔。
國外設(shè)計師Tubik，通過讓點元素在移動時呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態(tài)?
這類動態(tài)少見的原因在于其動態(tài)效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個效果靈感來源于Dribbble設(shè)計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發(fā)現(xiàn)。同一個圖標(biāo)，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動態(tài)效果也有強有弱。好的動態(tài)應(yīng)該是能與其進行匹配，而不是根據(jù)某個產(chǎn)品得出一個絕對的答案。
本文演示了不同類型圖標(biāo)用什么動態(tài)，并不代表只能這樣用。動態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動態(tài)屬性組合方式，所以請不要局限你的想法。
這就是信息的無限性和手機屏幕的有限性之間的矛盾，如何把信息合理的展示給用戶，需要我們重新對信息進行組織分類，使信息能更高效有序地被用戶認(rèn)知。在進行信息設(shè)計的時候，我們會經(jīng)常遇到“扁平化設(shè)計”這個詞，在我的理解看來，扁平化設(shè)計可以理解為：“精簡交互步驟，用戶用最少的步驟就完成任務(wù)”。層級太多了用戶就會看不懂；即使看得懂，層級多了用起來也麻煩，因此：手機上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來看看有沒有辦法減少跳轉(zhuǎn)…
當(dāng)你為你的項目創(chuàng)建有效的，可訪問的，漂亮的ui時，只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設(shè)計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時會出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產(chǎn)生更強、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨的字體。
留白是UI設(shè)計朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計透氣，而且看起來更光亮。
創(chuàng)建長篇內(nèi)容？給20 pt試試。對于長形式的內(nèi)容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因為他們的大小根據(jù)設(shè)定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項目允許，簡單地使用一個有限的調(diào)色板選擇一個基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。
改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候，當(dāng)面對1000個字體選擇，只是去尋找對應(yīng)的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會導(dǎo)致用戶體驗不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容，保持文本左對齊。你的用戶會感謝你的你。
當(dāng)選擇一個多用途的文字，盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項目會要求“只有一種風(fēng)格”
更精致的字體，但對于絕大多數(shù)項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面，對吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時，請增加行高，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性。基本上，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時，確保提供最多經(jīng)常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計具有豐富的視覺趣味和個性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測量，實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調(diào)整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動設(shè)備設(shè)計時，嘗試創(chuàng)建足夠大的可點擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標(biāo)題和正文。當(dāng)你想實現(xiàn)一個好的垂直節(jié)奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標(biāo)，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點，用百分?jǐn)?shù)來顯示當(dāng)前進度，一個簡單的圖標(biāo)，讓他們可以在任何地方取消下載時間。
如果你能保持標(biāo)題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡短，時髦，切中要點。而不是“這是你的風(fēng)格，你的方式”，簡單地使用像這樣的“你的風(fēng)格。你的方式。”人們會瀏覽，保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標(biāo)受眾來決定方法是合適的，相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關(guān)鍵在于找到合適的字體你正在做的項目的聲音。當(dāng)你剛接觸字體時，這似乎是一項艱巨的任務(wù)，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認(rèn)為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設(shè)計中使用要適度。現(xiàn)實世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時，試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達(dá)正確含義和功能的圖標(biāo)否則會引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時，8點網(wǎng)格旁邊使用4點基線
可以為你的設(shè)計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時，可以使用類似的方法。
在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實現(xiàn)這一點有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強的對比。
當(dāng)使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細(xì)微的調(diào)整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救。總是讓用戶了解情況，即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進行確認(rèn)。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。
參考文獻《UI & UX Micro Tips - The Ultimate Collection》
蘭亭妙微(www.tuitetiyu.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í)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。
大體上分為兩類：彩蛋流和體驗流
搜索的本質(zhì)是什么？無疑是內(nèi)容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進一步加強自有產(chǎn)品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關(guān)字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結(jié)果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節(jié)日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經(jīng)形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開學(xué)季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時，頁面上會出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來
而在【活動運營】上，百度也是很有心地進行著創(chuàng)新設(shè)計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié)，搜索結(jié)果頁上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計，各種輕松調(diào)皮的畫風(fēng) 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設(shè)計上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動入口’嵌套‘在結(jié)果頁卡片中間，用活動里的ip形象-雪人「抬著」結(jié)果頁卡片和在上面「滾動」
用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產(chǎn)品易用性。
代表：蘋果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時會自動計算對應(yīng)的結(jié)果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測+搜索對應(yīng)的手機號碼：當(dāng)你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時，系統(tǒng)會直接把該結(jié)果所對應(yīng)的頁面位置調(diào)取出來并懸浮展示。用戶可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會以聚光燈的形式展示各個結(jié)果入口。選擇具體某個結(jié)果時，該入口的聚光燈會更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時，搜索框下方會出現(xiàn)一個滑塊區(qū)。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
讓用戶更方便地將光標(biāo)快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無需觸發(fā)搜索、進入結(jié)果頁才能看到想要查詢的信息。
蘭亭妙微(www.tuitetiyu.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í)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。
對于產(chǎn)品設(shè)計師來說，在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維，這樣才能輸出差異化的設(shè)計方案。而創(chuàng)意離不開優(yōu)秀作品的靈感啟發(fā)，發(fā)現(xiàn)有意思的設(shè)計細(xì)節(jié)也能提高我們的設(shè)計思維。
今天黑馬哥將會繼續(xù)為大家?guī)硪恍﹥?yōu)秀的設(shè)計細(xì)節(jié)，我們一起來反思一下，這樣的設(shè)計想法為啥自己沒有想到呢？
分享目錄
一、營造頂部區(qū)域視覺感與情感化
二、主題化配圖增強視覺感
三、彈幕式標(biāo)簽提高關(guān)注度
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
六、連貫性的插畫突出卡片特色
七、動態(tài)表情化的評價設(shè)計
八、場景化的推薦設(shè)計
九、上下輪播的 Banner 設(shè)計
十、情感化的氛圍營造
一、營造頂部區(qū)域視覺感與情感化
產(chǎn)品頂部區(qū)域的視覺感是吸引用戶的關(guān)鍵，在一些功能單一的產(chǎn)品中，強化視覺表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當(dāng)勞 App 首頁的設(shè)計中，頂部區(qū)域結(jié)合溫馨的場景插畫進行表達(dá)，讓你早上打開麥當(dāng)勞就有種心情愉悅感。動態(tài)的太陽微笑畫面給你一天好心情，情感化的設(shè)計不僅增強了視覺感，也帶給用戶美好的產(chǎn)品使用體驗。
二、主題化配圖增強視覺感
封面圖在產(chǎn)品規(guī)范中相對比較難約束，通過構(gòu)圖、比例、固定元素和配圖質(zhì)量等，在一定程度上可以提高感官體驗。如果是在重點突出的內(nèi)容上面，結(jié)合主題化配圖也可以增強視覺感。
之前在使用優(yōu)酷 App 時，當(dāng)時在重點突出熱劇的設(shè)計中，就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫面風(fēng)格和設(shè)計表現(xiàn)形式填充封面，增強了視覺表現(xiàn)力，以此突出熱劇的吸引力。
三、彈幕式標(biāo)簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部內(nèi)容的關(guān)注度，我們需要在不改變結(jié)構(gòu)的前提下進行創(chuàng)意融入。比如動態(tài)畫面、突出視覺感、內(nèi)容特異化等等，而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個不錯的選擇。
在體驗優(yōu)酷 App 時，在動漫欄目中針對推薦的熱播新番，想要突出的動漫結(jié)合了彈幕式標(biāo)簽進行強化。動感的節(jié)奏會提高用戶的關(guān)注度，在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上，不失為一種有效的解決方案。
四、IP 強化底部標(biāo)簽欄圖標(biāo)設(shè)計
底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計師經(jīng)常發(fā)揮的場景，在一些節(jié)慶主題或者活動中都會定制設(shè)計。
優(yōu)酷 App 在元旦促銷活動期間，就將底部標(biāo)簽欄圖標(biāo)設(shè)計與 IP 形象結(jié)合，默認(rèn)以促銷主題文字展示，點擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動相結(jié)合，不僅突出圖標(biāo)視覺表現(xiàn)，也營造了活動氛圍感。
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
對于靠內(nèi)容吸引用戶參與度的產(chǎn)品來說，提高用戶發(fā)布動態(tài)的意愿度至關(guān)重要，突出動態(tài)發(fā)布的吸引力也能起到促進作用。
會玩 App 在動態(tài)發(fā)布的引導(dǎo)設(shè)計中給出了不錯的思路，未發(fā)布動態(tài)時會以形象化的空狀態(tài)設(shè)計進行引導(dǎo)。動態(tài)發(fā)布的按鈕旁以俏皮可愛的形象進行引導(dǎo)設(shè)計，提高了按鈕的吸引力，讓用戶有種參與的沖動。情感化設(shè)計的引導(dǎo)不僅可以增強感官體驗，也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設(shè)計已經(jīng)成為主流的產(chǎn)品設(shè)計趨勢，信息的歸納感可以提高識別效率。探索卡片設(shè)計的表現(xiàn)特色尤為重要，重點在于卡片造型和內(nèi)部視覺表現(xiàn)力的發(fā)揮層面。
麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計上運用了配送場景插畫，連貫性的插畫突出了卡片特色。插畫場景結(jié)合了品牌圖形，增強了麥當(dāng)勞的品牌曝光度；白天和晚上還以不同配色風(fēng)格和細(xì)節(jié)進行差異表現(xiàn)，無論是想法還是設(shè)計細(xì)節(jié)都非常不錯，是一個挺有創(chuàng)意的案例表現(xiàn)。
七、動態(tài)表情化的評價設(shè)計
用戶評價可以反饋服務(wù)的質(zhì)量，進而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評價的積極性，需要產(chǎn)品設(shè)計師多多探索啦！
最近在使用順豐速運小程序時，完成快遞業(yè)務(wù)之后進行評價，表情化的星級評價非常有意思。不同等級以不同的表情呈現(xiàn)，動態(tài)表達(dá)非常形象生動，讓人不由的挨個體驗。動態(tài)表情的形式提高了評價的關(guān)注度，情感化的表達(dá)讓用戶更愿意參與評價，提高了評價的體驗度。
八、場景化的推薦設(shè)計
針對電商類產(chǎn)品來說，商品/店鋪推薦模塊出現(xiàn)頻次較高，吸引用戶關(guān)注度自然成為了設(shè)計的首要目標(biāo)。
在體驗 Mars App 時，在生活超市推薦的設(shè)計中，模擬了便利店的場景形象。真實感的場景表達(dá)帶給用戶親切自然的購物體驗，同時也提高了用戶對于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計
輪播 Banner 圖算是產(chǎn)品設(shè)計中最常見的模塊，在移動端的設(shè)計中通常左右輪播為主，最近體驗到上下輪播的案例，打破常規(guī)也不失為一種新的設(shè)計思路。
在 Mars App 的首頁 Banner 圖以上下輪播進行交互，左側(cè)固定展示定位城市的天氣等信息，提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上，帶給用戶沉浸式的感官體驗。
十、情感化的氛圍營造
情感化的設(shè)計可以讓產(chǎn)品更有溫度，增加用戶對產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進行表達(dá)是相對比較普遍的形式，會在產(chǎn)品主題和視覺區(qū)域進行氛圍營造。
在清明節(jié)期間體驗飛豬旅行 App 時，頂部區(qū)域以踏春的場景營造氛圍感，還在搜索區(qū)域以青團（青團是江南人家在清明節(jié)吃的一道傳統(tǒng)點心）替代搜索按鈕。情感化的設(shè)計營造不僅體現(xiàn)了產(chǎn)品的溫度，也帶給用戶對于節(jié)日的場景體驗。
小結(jié)
禁錮我們思維的不是我們的技術(shù)，而是我們的眼界和設(shè)計感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計并總結(jié)和轉(zhuǎn)化，才能讓我們打開禁錮的思維，在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計解決方案。
本文對于設(shè)計的理解闡述屬于個人見解，不足之處歡迎大家留言補充，我們互相進步。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.tuitetiyu.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í)成長，咨詢及進群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.tuitetiyu.cn