一款產(chǎn)品無到有，產(chǎn)品經(jīng)理需要做些什么？
資深UI設(shè)計(jì)者 交互設(shè)計(jì)及用戶體驗(yàn)
交互設(shè)計(jì)( interaction design, IXD )，從字面上來說，交互即為相互作用相互影響，設(shè)計(jì)即為理解與傳達(dá)。在互聯(lián)網(wǎng)產(chǎn)品中，交互設(shè)計(jì)對用戶體驗(yàn)產(chǎn)生很大的影響。本文將圍繞交互設(shè)計(jì)進(jìn)行分析，與你分享。
資深UI設(shè)計(jì)者 交互設(shè)計(jì)及用戶體驗(yàn)
前面的文章我們分享了交互設(shè)計(jì)思維，這篇文章，我們來看看用戶目標(biāo)與交互目標(biāo)。交互設(shè)計(jì)的核心，就是幫用戶拆解這些目標(biāo)并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。
資深UI設(shè)計(jì)者 設(shè)計(jì)管理與成長
在設(shè)計(jì)一個(gè)優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品時(shí)，設(shè)計(jì)流程往往分為幾個(gè)階段，每個(gè)階段都有清晰的目標(biāo)和方法。這不僅幫助我們找到真正的用戶需求，也確保設(shè)計(jì)思路清晰、可執(zhí)行。下面，我們用簡單易懂的方式來講解整個(gè)設(shè)計(jì)流程。
出海產(chǎn)品面臨著語言、文化和用戶習(xí)慣的巨大差異，這對UI設(shè)計(jì)師提出了更高的要求。本文為出海產(chǎn)品的UI設(shè)計(jì)提供了全面的干貨指南，從文字、圖標(biāo)、色彩、圖案到交互手勢等多個(gè)角度，詳細(xì)拆解了設(shè)計(jì)師在面對小語種和不同文化背景時(shí)需要注意的關(guān)鍵點(diǎn)。
隨著TikTok的海外關(guān)注度和影響力逐漸擴(kuò)展、小紅書在海外友人的媒體圈炙手可熱，國內(nèi)的互聯(lián)網(wǎng)市場逐漸趨于飽和，互聯(lián)網(wǎng)產(chǎn)品紛紛向東南亞、非洲、拉丁美洲、歐洲擴(kuò)展商業(yè)版圖，這也為UI設(shè)計(jì)師創(chuàng)造了新的機(jī)遇。
對于出海產(chǎn)品而言，UI設(shè)計(jì)師需要有基礎(chǔ)的語言文化了解，在此基礎(chǔ)上去進(jìn)行設(shè)計(jì)才能真正滿足海外用戶的需求，本文主要從UI的文字、圖標(biāo)、色彩等幾個(gè)角度來拆解設(shè)計(jì)師在設(shè)計(jì)海外項(xiàng)目時(shí)需要注意的關(guān)鍵點(diǎn)，避免因?yàn)槲幕?xí)俗差異而影響產(chǎn)品的易用性。
目錄：
1.小語種文字：超長文本的處理規(guī)則、鏡像語言、小語種適配檢視技巧
2.圖標(biāo)：需要鏡像的典型圖標(biāo)、不需要鏡像的典型圖標(biāo)、圖標(biāo)特例
3.顏色
4.圖案：禁忌圖標(biāo)、禁忌手勢、禁忌物品、禁忌動(dòng)物
5.交互手勢
當(dāng)在某些語種下出現(xiàn)界面用語超長顯示不完整的情況，應(yīng)按照如下優(yōu)先級進(jìn)行處理：
（1）精簡界面用語
在保證可理解的前提下，考慮對該語言的翻譯進(jìn)一步精簡，采用其他較短的近義詞或者精簡表達(dá)，如“save number”在界面用語超長時(shí)應(yīng)精簡為“save”。
（2）動(dòng)態(tài)布局
當(dāng)控件周圍沒有其他控件沖突時(shí)，控件可根據(jù)界面用語長度動(dòng)態(tài)擴(kuò)展，如按鈕。
（3）縮小文字
將文本逐級縮小，建議最小縮小到18sp/dp。
??并列的層級關(guān)系，文本超長時(shí)所有文字需要同時(shí)縮小字號
（4）多行顯示
在設(shè)計(jì)中文時(shí)，提前考慮預(yù)留小語種換行空間，??按音節(jié)換行。
（5）跑馬燈
避免同意界面使用過多的跑馬燈，1-3個(gè)為宜。過多的跑馬燈會(huì)分散用戶注意力，界面顯示混亂。跑馬燈占用系統(tǒng)資源，影響性能，過多的跑馬燈可能會(huì)導(dǎo)致卡頓。
（6）打點(diǎn)截?cái)?/p>
顯示不下到文字截?cái)囡@示并在末尾增加“…”
截?cái)嗟氖褂脠鼍埃?/p>
A.用戶自定義內(nèi)容，如文件名，相冊名
B.某處顯示空間有限，但可以在本層級/上一層級/下一層級查看到全量內(nèi)容。
阿拉伯、波斯語、烏爾都語、希伯來語等語言的書寫都是從右向左書寫，和當(dāng)今世界主流語言（如英語）從左向右書寫的方向相反。
受文字書寫方向的影響，阿拉伯語言的用戶對于左右邏輯的認(rèn)知和英文等LTR （left to right)完全相反，比如習(xí)慣將右側(cè)作為開始，左側(cè)作為結(jié)束。
為了支持RTL語言和用戶習(xí)慣特點(diǎn)，在UI設(shè)計(jì)中，需要在文本，界面布局，手勢操作和動(dòng)畫，圖標(biāo)等交互元素中滿足RTL的特殊要求。
（1）字串顯示——檢視語言：西班牙語（拉丁美洲）
（2）大字體顯示——檢視語言：西班牙語（拉丁美洲）
（1）后退，前進(jìn)
（2）顯示前進(jìn)方向的圖標(biāo)，如：騎車 發(fā)送 進(jìn)度條。
▲ 阿拉伯語-顯示前進(jìn)方向
（3）右側(cè)具有滑塊的音量圖標(biāo)應(yīng)當(dāng)鏡像，滑塊應(yīng)從右向左顯示，如：音量調(diào)節(jié)。
▲ 阿拉伯語-音量調(diào)節(jié)
（4）表達(dá)含有文本含義的圖標(biāo)，如：對話框、書寫、備忘錄。
▲ 阿拉伯語-文本含義圖標(biāo)
（1）雖然時(shí)間的線性表示在RTL中被鏡像，但圓形時(shí)間方向不是。對于RTL需要，時(shí)鐘仍然是順時(shí)針轉(zhuǎn)動(dòng)，時(shí)鐘圖標(biāo)或帶有箭頭指向順時(shí)針圖標(biāo)的刷新圖標(biāo)不應(yīng)該鏡像。
▲ 阿拉伯語-帶有時(shí)間含義的圖標(biāo)
（2）國際標(biāo)準(zhǔn)的圖標(biāo)不需要鏡像，如藍(lán)牙。
（3）擬物圖標(biāo)不需要鏡像，如SIM卡。
(4) 斜線不需要鏡像 ，如靜音圖標(biāo)。
▲ 阿拉伯語-特殊免鏡像圖標(biāo)
(1)亮度圖標(biāo)需要鏡像：英文習(xí)慣認(rèn)為左邊暗，右邊亮；阿拉伯語習(xí)慣認(rèn)為左亮，右邊暗。
(2)阿拉伯語有自己的問號?
(3)阿拉伯語am.pm的位置要移動(dòng)到時(shí)間左側(cè)
1.中東市場：綠色為主、火紅與黃色慎用。綠色象征吉祥，但敘利亞視黃色為不祥之兆，伊朗不喜愛藍(lán)色。
2.非洲市場：禁忌多樣。黑色普遍被認(rèn)為不祥，紅色在乍得、尼日利亞等國也不受歡迎。
3.歐洲市場：白色神圣，黃色慎用。
禁忌手勢
禁忌物品
禁忌動(dòng)物
RTL語言中，帶左右滑動(dòng)方向的圖片或者是左右滑動(dòng)展開功能選項(xiàng)，應(yīng)遵循與英文界面相反的鏡像規(guī)則。
▲
漢語-左滑刪除
以上就是從小語種文字、圖標(biāo)、顏色、圖案、交互手勢等方面總結(jié)的出海產(chǎn)品設(shè)計(jì)干貨，希望能讓你有所收獲~
本文由人人都是產(chǎn)品經(jīng)理作者【Clippp】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對于設(shè)計(jì)者來說，應(yīng)該秉持怎樣的初心來設(shè)計(jì)呢？目前，引導(dǎo)幫助功能又有哪些常見的分類呢？帶著這些問題，我們一起走進(jìn)這篇文章，看看作者為我們的分享。推薦相關(guān)人員閱讀與學(xué)習(xí)。
前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。
因?yàn)橐呱瘫?，所以需要使用社保卡，之前我記得社保結(jié)算都需要去人工窗口，我剛過去就被一個(gè)穿著紅馬褂的大媽攔住說自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開始幫我點(diǎn)擊操作。
她覺得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過來看病的覺得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。
在B端產(chǎn)品中也有很多類似問題，用戶不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些數(shù)據(jù)類產(chǎn)品，專業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請，引導(dǎo)用戶進(jìn)行使用。
邀請就是引導(dǎo)用戶進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在當(dāng)前界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。
例如：飛書-我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請。
另一種方案是任何時(shí)候都顯示邀請，例如：石墨文檔-我的桌面，復(fù)選框一直顯示。
靜態(tài)邀請就是通過直接在頁面上給出交互提示，可以讓用戶隨時(shí)看到期望的界面功能。
靜態(tài)邀請主要有兩種模式：引導(dǎo)操作邀請、漫游探索邀請。
01 步驟引導(dǎo)
例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟
引導(dǎo)操作會(huì)占據(jù)頁面較大的空間，同時(shí)也會(huì)吸引用戶的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁面和信息層。
02 白板引導(dǎo)
另一種引導(dǎo)操作邀請叫白板式引導(dǎo)。
意思很明確：現(xiàn)在只有一個(gè)空白頁面，需要引導(dǎo)用戶創(chuàng)建內(nèi)容。
利用空白區(qū)域“變廢為寶”，如何對該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。
與引導(dǎo)操作邀請關(guān)系密切的是漫游探索邀請。假設(shè)你重新設(shè)計(jì)了某個(gè)頁面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马撁?，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請是向用戶介紹新功能最好的方法。
最佳實(shí)踐：
靜態(tài)邀請適合提示用戶當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶經(jīng)常不會(huì)閱讀指導(dǎo)說明性的文字。而在用戶交互過程中，在他們需要的時(shí)候提供邀請則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請就是在用戶交互過程中的某個(gè)點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。
吸引用戶的一種方式是通過鼠標(biāo)懸停來顯示邀請
例如：飛書消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來吸引用戶，鼠標(biāo)移入上去后提示可以點(diǎn)擊完成，點(diǎn)擊后消息移除列表。
最佳實(shí)踐
唐納德·諾曼將這個(gè)術(shù)語引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門把手，門把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒有物理屬性，不過，由于習(xí)慣、術(shù)語、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。
例如：第一張圖飛書文檔sheet頁“加號”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請。用戶沒觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。
預(yù)期功能邀請之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶順利完成一連串操作。
最佳實(shí)踐
設(shè)計(jì)邀請時(shí)怎么才能猜測用戶的想法，也是一項(xiàng)重要挑戰(zhàn)。如果用戶下一步可能會(huì)執(zhí)行多種操作，而事實(shí)上又不可能準(zhǔn)確判斷用戶想法，那么面臨的困難就會(huì)比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)點(diǎn)后，進(jìn)行第二個(gè)點(diǎn)連接時(shí)，會(huì)有多種可能性，這個(gè)時(shí)候系統(tǒng)也不確定用戶會(huì)怎樣連接，但會(huì)給出對應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來輔助用戶進(jìn)行連接。
例如：這種工作流場景個(gè)人覺得也算是一種，點(diǎn)擊“加號”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。
這種在交互期間以可見方式向用戶表明系統(tǒng)推斷出的用戶想法被稱為推論邀請。
圖片類型的更多邀請，例如：站酷相關(guān)推薦
文字更多邀請，例如：QQ郵箱右側(cè)最近聯(lián)系人
精心設(shè)計(jì)的應(yīng)用能夠通過邀請?bào)w現(xiàn)出各自的細(xì)微差別，無論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個(gè)交互層次的有效方法。
謝謝觀看！
作者：夜鶯YEAH；公眾號：夜鶯B端UX設(shè)計(jì)
本文由 @夜鶯YEAH 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
排序在B端和C端產(chǎn)品中都比較常見，隨著用戶對產(chǎn)品使用的易用性提高，排序在產(chǎn)品交互中也在變化。本文分享B端拖動(dòng)排序的多種場景及交互，希望對你有所啟發(fā)。
很久沒有更新B端產(chǎn)品相關(guān)的文章了，近期工作項(xiàng)目中做了很多新需求，接觸了更多業(yè)務(wù)，也學(xué)到了一些新的交互，后續(xù)將會(huì)根據(jù)我在實(shí)際工作項(xiàng)目中遇到的需求展開總結(jié)。
B端產(chǎn)品設(shè)計(jì)具有較高的業(yè)務(wù)屬性，所以對于ui設(shè)計(jì)師而言也需要有較強(qiáng)的業(yè)務(wù)知識，在完全理解需求后，再針對業(yè)務(wù)場景、用戶體驗(yàn)、交互、布局合理、易用性等多維度展開設(shè)計(jì)。
這一期主要分享關(guān)于B端產(chǎn)品中拖動(dòng)排序功能。
排序在B端和C端產(chǎn)品中都比較常見，前期排序有通過點(diǎn)擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對產(chǎn)品使用的易用性提高，這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。
目前對于排序功能，使用更多的是通過拖動(dòng)排序，通過選中數(shù)據(jù)后長按鼠標(biāo)右鍵，上下拖動(dòng)來完成數(shù)據(jù)的排序。
在B端產(chǎn)品中，我目前接觸的拖動(dòng)排序的組件包含以下兩個(gè)大類：
對于分類2【樹組件多層級排序】又包含兩個(gè)小類：
對于小分類【跨層級排序】又可以細(xì)分為四個(gè)場景：
上面已經(jīng)總結(jié)了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實(shí)際項(xiàng)目設(shè)計(jì)詳細(xì)介紹拖動(dòng)排序的功能。
數(shù)據(jù)默認(rèn)展示類似列表數(shù)據(jù)一樣，平鋪?zhàn)髮R排版，當(dāng)拖動(dòng)排序時(shí)，鼠標(biāo)移動(dòng)到需要排序的數(shù)據(jù)行，長按鼠標(biāo)右鍵并拖動(dòng)數(shù)據(jù)上下移動(dòng)，被拖動(dòng)的數(shù)據(jù)原位置置灰（也可以直接消失）。
同時(shí)，被拖動(dòng)的數(shù)據(jù)跟著鼠標(biāo)走，移動(dòng)到其它位置時(shí)，在將要放下的位置出現(xiàn)藍(lán)色高亮分割線（還可以做到所有數(shù)據(jù)實(shí)時(shí)變化位置效果）這樣能讓用戶更加直觀地看到數(shù)據(jù)位置的變化。
此類需求一般是針對一級數(shù)據(jù)排序，數(shù)據(jù)結(jié)構(gòu)比較簡單，沒有文件夾多級樹狀結(jié)構(gòu)，下面列舉幾個(gè)工作中遇到的需求場景，以及分享幾個(gè)其它產(chǎn)品中遇到的交互，便于大家理解。
由于B端產(chǎn)品具保密性，所以下面分享的截圖非工作實(shí)際數(shù)據(jù)，大家只要明白需求場景和交互即可。
需求場景1：產(chǎn)品業(yè)務(wù)中有很多的表單，表單中的字段順序在不同企業(yè)中不同，應(yīng)該如何設(shè)計(jì)呢？
在設(shè)計(jì)時(shí)，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動(dòng)排序。
需求場景2：飛書中有多個(gè)應(yīng)用，對于每個(gè)用戶而言，自己所關(guān)注的應(yīng)用不同，優(yōu)先級不同，該如何設(shè)計(jì)？
同理，飛書也是對用戶個(gè)人的應(yīng)該設(shè)計(jì)了拖動(dòng)排序功能，可以根據(jù)自己關(guān)注的應(yīng)該排序應(yīng)該的位置，從而更快的找到自己常用的應(yīng)用，提高工作效率。
無論是對于列表數(shù)據(jù)還是卡片數(shù)據(jù)的排序都可以采用這種拖動(dòng)排序的交互。
（1）同層級排序（橫線高亮顯示即將放的位置）
樹組件同層級排序默認(rèn)展示和拖動(dòng)時(shí)效果與一級目錄常規(guī)排序一致。
（2）跨層級排序
父級未展開時(shí)：拖動(dòng)到父級、父級整行高亮
如下圖，當(dāng)需要把文件夾【數(shù)據(jù)名稱顯示004】放在【數(shù)據(jù)名稱顯示003】文件夾中，鼠標(biāo)拖動(dòng)數(shù)據(jù)放在【數(shù)據(jù)名稱顯示003】時(shí)，【數(shù)據(jù)名稱顯示003】整行會(huì)出現(xiàn)藍(lán)色高亮，表示被拖動(dòng)的數(shù)據(jù)即將放在該文件夾內(nèi)。
父級未展開時(shí)：拖動(dòng)長按停留在父級時(shí)，父級自動(dòng)展開子級。
如下圖，按照上面的步驟拖動(dòng)時(shí)，當(dāng)鼠標(biāo)一直停留在【數(shù)據(jù)名稱顯示003】的位置時(shí)，該文件夾會(huì)自動(dòng)展開二級目錄，這是一個(gè)拖動(dòng)排序比較友好的交互，可以讓用戶再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu)，并快速一次性選擇需要放的位置。
父級已展開時(shí)：拖動(dòng)到子級時(shí)，父級整行高亮，拖動(dòng)到的位置出現(xiàn)高亮橫線。
如下圖，在上圖基礎(chǔ)上，當(dāng)鼠標(biāo)繼續(xù)拖動(dòng)數(shù)據(jù)，想要放在二級目錄中時(shí)，數(shù)據(jù)一級目錄同樣會(huì)顯示高亮，告訴用戶當(dāng)前數(shù)據(jù)的層級關(guān)系。
同時(shí)，二級數(shù)據(jù)中會(huì)出現(xiàn)藍(lán)色高亮分割線，標(biāo)識被拖動(dòng)的數(shù)據(jù)即將放的位置，這樣就能清晰的知道被拖動(dòng)的數(shù)據(jù)將放在那個(gè)目錄的那個(gè)位置。
父級已展開時(shí)：拖動(dòng)到子級文件夾時(shí)，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）。
當(dāng)需要將數(shù)據(jù)拖動(dòng)到二級文件夾內(nèi)時(shí)，只需要高亮二級文件夾即可。
關(guān)于樹組件多層級排序的使用場景和交互比較復(fù)雜，上面我根據(jù)不同場景分別列出了交互展示方式，下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說明，因?yàn)榇藞鼍爸饕轻槍换ズ惋@示，所以我就直接拿動(dòng)圖展示，便于大家理解。
本文由 @設(shè)計(jì)小余 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
在互聯(lián)網(wǎng)領(lǐng)域中，人機(jī)之間的互動(dòng)過程就是交互。交互也有一些可預(yù)測的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時(shí)間有個(gè)產(chǎn)品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個(gè)概念有什么區(qū)別？
作為一個(gè)熱心好學(xué)、樂于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個(gè)多小時(shí)，順便總結(jié)下聊天內(nèi)容。
你是不是也經(jīng)常在生活工作中，碰到類似“行為模式、設(shè)計(jì)模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區(qū)別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預(yù)測、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過歸納總結(jié)，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業(yè)模式、營銷模式、行為模式、數(shù)學(xué)模式、語言模式等。
舉個(gè)例子：
簡單說下行為模式，它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。
苦逼打工仔普遍的消費(fèi)模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。
但又有特例，我有個(gè)朋友就特別宅，他只喜歡在上班的時(shí)候，摸魚逛淘寶下單，簡直離譜~
掌握模式，有什么用？
當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個(gè)好處。
我們試著再舉個(gè)例子，加深下對模式的理解，順便學(xué)學(xué)交互設(shè)計(jì)。
什么是交互？
簡單來說，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機(jī)之間的一系列互動(dòng)過程。
我還提煉了 3 種常見模式（簡單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。
現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。
學(xué)完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實(shí)可以有，等我有時(shí)間再編幾個(gè)。。
話說回來，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會(huì)涉及到 N 個(gè)交互模式的任意組合。
常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是，告知用戶當(dāng)前在網(wǎng)站的位置，以及接下來到哪些頁面，這有點(diǎn)像地圖 APP。
上面這張圖中，包含了幾種導(dǎo)航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。
打個(gè)比方，這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。
常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時(shí)，你新增了一個(gè)收貨地址。
打開美團(tuán)叫個(gè)外賣，整個(gè)訂單創(chuàng)建流程，也是輸入模式。
有很多人可能會(huì)把輸入模式和編輯模式搞混。
區(qū)別它們的一個(gè)方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話，那就是編輯模式。
我們在看到一些干貨文章，或好用的小程序想要轉(zhuǎn)發(fā)給朋友，那就要用到分享模式。
分享模式可以很簡單，也可以往復(fù)雜了做，看產(chǎn)品階段去實(shí)現(xiàn)。
引導(dǎo)模式和反饋模式有點(diǎn)像，都是展示特定的內(nèi)容。
那怎么分辨它們呢？
以設(shè)計(jì)師視角來看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動(dòng)顯示。
而要讓用戶特別關(guān)注的信息，那就是引導(dǎo)模式。
模式，即抽象的規(guī)律。——好夕雷
說了這么多概念和例子，你是不是對模式的認(rèn)知更清晰了呢？
模式運(yùn)用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。
如果學(xué)會(huì)了模式，那么無論生活還是工作，相信你一定能輕松應(yīng)對、事半功倍。
本文由 @好夕雷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計(jì)思維與我們常說的產(chǎn)品思維、體驗(yàn)思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計(jì)思維的融合已經(jīng)成為提升用戶體驗(yàn)的關(guān)鍵。兩者看似獨(dú)立，卻可以在實(shí)際設(shè)計(jì)過程中形成互補(bǔ)，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點(diǎn)、融合的價(jià)值，以及實(shí)際應(yīng)用場景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動(dòng)體驗(yàn)。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計(jì)在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計(jì)思維：關(guān)注用戶價(jià)值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計(jì)思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實(shí)現(xiàn)商業(yè)價(jià)值。核心問題包括：
產(chǎn)品設(shè)計(jì)思維更偏向戰(zhàn)略層面，要求對市場、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時(shí)通訊”入手，以簡單的聊天功能切入市場，但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊，構(gòu)建了一個(gè)完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗(yàn)和商業(yè)價(jià)值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計(jì)流暢、直觀的操作流程，提升用戶體驗(yàn)。
產(chǎn)品設(shè)計(jì)思維： 在流暢體驗(yàn)的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊等），實(shí)現(xiàn)商業(yè)目標(biāo)。
案例：美團(tuán)外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計(jì)思維： 在技術(shù)和資源限制內(nèi)，找到實(shí)現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動(dòng)與用戶體驗(yàn)的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計(jì)思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計(jì)
淘寶的個(gè)性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計(jì)確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強(qiáng)購物體驗(yàn)的同時(shí)提升成交轉(zhuǎn)化率。
4）感性設(shè)計(jì)與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗(yàn)，設(shè)計(jì)讓用戶愉悅的互動(dòng)。
產(chǎn)品設(shè)計(jì)思維： 從用戶行為和反饋中提煉需求，找到情感體驗(yàn)的落地點(diǎn)。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計(jì)思維的融合將進(jìn)一步進(jìn)化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動(dòng)態(tài)優(yōu)惠，讓用戶感到“被理解”。同時(shí)，界面交互會(huì)變得更加智能，比如直接通過語音完成點(diǎn)餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗(yàn)設(shè)計(jì)思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗(yàn)。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實(shí)現(xiàn)用戶目標(biāo)與商業(yè)價(jià)值的雙贏。
1）交互思維：聚焦人與界面的高效互動(dòng)
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計(jì)和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗(yàn)設(shè)計(jì)思維：以用戶為中心的全局視角
用戶體驗(yàn)設(shè)計(jì)思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計(jì)到使用的整個(gè)生命周期。其重點(diǎn)在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗(yàn)設(shè)計(jì)思維更像是一位城市規(guī)劃師，考慮如何讓整個(gè)城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗(yàn)的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個(gè)交互動(dòng)作；而用戶體驗(yàn)設(shè)計(jì)思維關(guān)注全局，確保整個(gè)使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個(gè)環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計(jì)與功能設(shè)計(jì)的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗(yàn)設(shè)計(jì)思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計(jì)是兩者融合的一個(gè)關(guān)鍵點(diǎn)，既提升用戶滿意度，又增強(qiáng)產(chǎn)品粘性。
案例：支付寶的完成支付動(dòng)畫
3）用戶需求與設(shè)計(jì)約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗(yàn)設(shè)計(jì)思維則考慮設(shè)計(jì)的合理性和場景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動(dòng)與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗(yàn)設(shè)計(jì)思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實(shí)現(xiàn)功能的個(gè)性化和體驗(yàn)的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺，在交互與用戶體驗(yàn)設(shè)計(jì)的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗(yàn)設(shè)計(jì)思維的融合將進(jìn)入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識別調(diào)整對話語氣，同時(shí)提供即時(shí)解決方案與友好的互動(dòng)體驗(yàn)。
交互思維與界面設(shè)計(jì)思維的融合，是現(xiàn)代產(chǎn)品設(shè)計(jì)中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補(bǔ)，共同打造出功能性與美觀性兼具的產(chǎn)品體驗(yàn)。本文將從兩者的概念、融合的價(jià)值以及實(shí)際案例中剖析如何實(shí)現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點(diǎn)：邏輯性強(qiáng)，重在用戶的操作行為，強(qiáng)調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計(jì)思維：聚焦視覺呈現(xiàn)與情感體驗(yàn)
界面設(shè)計(jì)思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點(diǎn)包括：
特點(diǎn)：更注重感性表達(dá)，強(qiáng)調(diào)用戶的情感體驗(yàn)和對產(chǎn)品的第一印象。
簡單類比：
交互思維像是設(shè)計(jì)產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計(jì)思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對信息進(jìn)行層級劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計(jì)思維： 通過顏色、字體大小、對比等視覺元素，強(qiáng)化信息的層級感和用戶的關(guān)注點(diǎn)。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財(cái)推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動(dòng)效與反饋設(shè)計(jì)的結(jié)合
交互思維： 動(dòng)效作為用戶操作的反饋機(jī)制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計(jì)思維： 動(dòng)效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強(qiáng)整體體驗(yàn)的連貫性。
案例：抖音的點(diǎn)贊動(dòng)效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動(dòng)畫，明確提示“點(diǎn)贊成功”。
界面層面： 動(dòng)效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點(diǎn)擊和跳轉(zhuǎn)。
界面設(shè)計(jì)思維： 通過對頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設(shè)計(jì)
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價(jià)格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計(jì)與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡單高效。
界面設(shè)計(jì)思維： 在視覺設(shè)計(jì)中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點(diǎn)擊一個(gè)按鈕，系統(tǒng)即可快速識別歌曲，操作簡單高效。
界面層面： 啟動(dòng)時(shí)有動(dòng)態(tài)音波效果，識別成功后展示專輯封面和歌詞，增強(qiáng)情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計(jì)思維結(jié)合的經(jīng)典案例：
交互設(shè)計(jì)：
用戶可以通過簡單的下滑操作瀏覽動(dòng)態(tài)，上滑時(shí)加載更多內(nèi)容，操作自然流暢。
點(diǎn)贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設(shè)計(jì)：
動(dòng)態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評論區(qū)域的縮進(jìn)樣式使信息層級清晰。
交互思維與產(chǎn)品思維、體驗(yàn)思維、視覺設(shè)計(jì)思維的融合，是用戶體驗(yàn)優(yōu)化的基礎(chǔ)。在實(shí)際設(shè)計(jì)中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補(bǔ)充，我們能設(shè)計(jì)出既符合用戶需求，又實(shí)現(xiàn)商業(yè)價(jià)值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動(dòng)人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進(jìn)步和用戶需求的多樣化，這種融合將持續(xù)推動(dòng)數(shù)字產(chǎn)品體驗(yàn)的升級，成為提升產(chǎn)品競爭力的核心動(dòng)力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計(jì)思維與我們常說的產(chǎn)品思維、體驗(yàn)思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計(jì)思維的融合已經(jīng)成為提升用戶體驗(yàn)的關(guān)鍵。兩者看似獨(dú)立，卻可以在實(shí)際設(shè)計(jì)過程中形成互補(bǔ)，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點(diǎn)、融合的價(jià)值，以及實(shí)際應(yīng)用場景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動(dòng)體驗(yàn)。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計(jì)在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計(jì)思維：關(guān)注用戶價(jià)值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計(jì)思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實(shí)現(xiàn)商業(yè)價(jià)值。核心問題包括：
產(chǎn)品設(shè)計(jì)思維更偏向戰(zhàn)略層面，要求對市場、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時(shí)通訊”入手，以簡單的聊天功能切入市場，但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊，構(gòu)建了一個(gè)完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗(yàn)和商業(yè)價(jià)值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計(jì)流暢、直觀的操作流程，提升用戶體驗(yàn)。
產(chǎn)品設(shè)計(jì)思維： 在流暢體驗(yàn)的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊等），實(shí)現(xiàn)商業(yè)目標(biāo)。
案例：美團(tuán)外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計(jì)思維： 在技術(shù)和資源限制內(nèi)，找到實(shí)現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動(dòng)與用戶體驗(yàn)的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計(jì)思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計(jì)
淘寶的個(gè)性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計(jì)確保推薦商品的展示方式簡潔、直觀，不打擾用戶正常瀏覽，增強(qiáng)購物體驗(yàn)的同時(shí)提升成交轉(zhuǎn)化率。
4）感性設(shè)計(jì)與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗(yàn)，設(shè)計(jì)讓用戶愉悅的互動(dòng)。
產(chǎn)品設(shè)計(jì)思維： 從用戶行為和反饋中提煉需求，找到情感體驗(yàn)的落地點(diǎn)。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計(jì)思維的融合將進(jìn)一步進(jìn)化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動(dòng)態(tài)優(yōu)惠，讓用戶感到“被理解”。同時(shí)，界面交互會(huì)變得更加智能，比如直接通過語音完成點(diǎn)餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗(yàn)設(shè)計(jì)思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗(yàn)。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實(shí)現(xiàn)用戶目標(biāo)與商業(yè)價(jià)值的雙贏。
1）交互思維：聚焦人與界面的高效互動(dòng)
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計(jì)和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗(yàn)設(shè)計(jì)思維：以用戶為中心的全局視角
用戶體驗(yàn)設(shè)計(jì)思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計(jì)到使用的整個(gè)生命周期。其重點(diǎn)在于：
簡單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗(yàn)設(shè)計(jì)思維更像是一位城市規(guī)劃師，考慮如何讓整個(gè)城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗(yàn)的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個(gè)交互動(dòng)作；而用戶體驗(yàn)設(shè)計(jì)思維關(guān)注全局，確保整個(gè)使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個(gè)環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計(jì)與功能設(shè)計(jì)的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗(yàn)設(shè)計(jì)思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計(jì)是兩者融合的一個(gè)關(guān)鍵點(diǎn)，既提升用戶滿意度，又增強(qiáng)產(chǎn)品粘性。
案例：支付寶的完成支付動(dòng)畫
3）用戶需求與設(shè)計(jì)約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗(yàn)設(shè)計(jì)思維則考慮設(shè)計(jì)的合理性和場景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動(dòng)與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗(yàn)設(shè)計(jì)思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實(shí)現(xiàn)功能的個(gè)性化和體驗(yàn)的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺，在交互與用戶體驗(yàn)設(shè)計(jì)的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗(yàn)設(shè)計(jì)思維的融合將進(jìn)入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識別調(diào)整對話語氣，同時(shí)提供即時(shí)解決方案與友好的互動(dòng)體驗(yàn)。
交互思維與界面設(shè)計(jì)思維的融合，是現(xiàn)代產(chǎn)品設(shè)計(jì)中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補(bǔ)，共同打造出功能性與美觀性兼具的產(chǎn)品體驗(yàn)。本文將從兩者的概念、融合的價(jià)值以及實(shí)際案例中剖析如何實(shí)現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點(diǎn)：邏輯性強(qiáng)，重在用戶的操作行為，強(qiáng)調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計(jì)思維：聚焦視覺呈現(xiàn)與情感體驗(yàn)
界面設(shè)計(jì)思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點(diǎn)包括：
特點(diǎn)：更注重感性表達(dá)，強(qiáng)調(diào)用戶的情感體驗(yàn)和對產(chǎn)品的第一印象。
簡單類比：
交互思維像是設(shè)計(jì)產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計(jì)思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對信息進(jìn)行層級劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計(jì)思維： 通過顏色、字體大小、對比等視覺元素，強(qiáng)化信息的層級感和用戶的關(guān)注點(diǎn)。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財(cái)推薦）隱藏在二級頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動(dòng)效與反饋設(shè)計(jì)的結(jié)合
交互思維： 動(dòng)效作為用戶操作的反饋機(jī)制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計(jì)思維： 動(dòng)效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強(qiáng)整體體驗(yàn)的連貫性。
案例：抖音的點(diǎn)贊動(dòng)效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動(dòng)畫，明確提示“點(diǎn)贊成功”。
界面層面： 動(dòng)效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點(diǎn)擊和跳轉(zhuǎn)。
界面設(shè)計(jì)思維： 通過對頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡潔且層次分明。
案例：京東購物車的設(shè)計(jì)
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價(jià)格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計(jì)與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡單高效。
界面設(shè)計(jì)思維： 在視覺設(shè)計(jì)中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識曲”功能
交互層面： 用戶只需點(diǎn)擊一個(gè)按鈕，系統(tǒng)即可快速識別歌曲，操作簡單高效。
界面層面： 啟動(dòng)時(shí)有動(dòng)態(tài)音波效果，識別成功后展示專輯封面和歌詞，增強(qiáng)情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計(jì)思維結(jié)合的經(jīng)典案例：
交互設(shè)計(jì)：
用戶可以通過簡單的下滑操作瀏覽動(dòng)態(tài)，上滑時(shí)加載更多內(nèi)容，操作自然流暢。
點(diǎn)贊和評論的交互邏輯簡單，長按可以刪除自己的評論，符合用戶直覺。
界面設(shè)計(jì)：
動(dòng)態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評論區(qū)域的縮進(jìn)樣式使信息層級清晰。
交互思維與產(chǎn)品思維、體驗(yàn)思維、視覺設(shè)計(jì)思維的融合，是用戶體驗(yàn)優(yōu)化的基礎(chǔ)。在實(shí)際設(shè)計(jì)中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補(bǔ)充，我們能設(shè)計(jì)出既符合用戶需求，又實(shí)現(xiàn)商業(yè)價(jià)值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動(dòng)人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進(jìn)步和用戶需求的多樣化，這種融合將持續(xù)推動(dòng)數(shù)字產(chǎn)品體驗(yàn)的升級，成為提升產(chǎn)品競爭力的核心動(dòng)力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺層級由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長。
但只是單色修剪，看起來很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來營造氛圍。
對于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來完成移動(dòng)和變形，這樣便能營造出3d旋轉(zhuǎn)的錯(cuò)覺。
對于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來替代文字，讓整體更簡潔。
國外設(shè)計(jì)師Tubik，通過讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過蒙版來控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過修剪這條軌跡來完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見的原因在于其動(dòng)態(tài)效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大?。?/p>
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動(dòng)態(tài)屬性組合方式，所以請不要局限你的想法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn
