最近深度體驗(yàn)了多款銀行 APP，發(fā)現(xiàn)優(yōu)秀的 UI 交互設(shè)計(jì)真的能讓使用體驗(yàn)直線飆升！今天就和大家分享那些讓人驚艷的交互設(shè)計(jì)細(xì)節(jié)，原來(lái)銀行軟件也能這么 “懂人心”！

一、數(shù)據(jù)可視化：讓金融數(shù)據(jù)會(huì) “說(shuō)話”

傳統(tǒng)銀行界面里，資產(chǎn)總覽可能就是一串冷冰冰的數(shù)字，讓人看完毫無(wú)波瀾。但在一些采用先進(jìn)交互設(shè)計(jì)的 APP 中，數(shù)據(jù)可視化徹底改變了這種局面。比如某銀行 APP 的資產(chǎn)看板，運(yùn)用動(dòng)態(tài)折線圖實(shí)時(shí)展示近 30 天的資金變動(dòng)趨勢(shì)，當(dāng)收益上漲時(shí)，折線會(huì)以流暢的動(dòng)畫向上攀升，還搭配輕快的音效，直觀又有趣；而當(dāng)支出增多時(shí)，折線下滑的同時(shí)，圖表區(qū)域會(huì)變成醒目的黃色預(yù)警色，提醒用戶注意消費(fèi)情況。

再比如理財(cái)產(chǎn)品對(duì)比界面，不再是密密麻麻的文字介紹和參數(shù)表格。設(shè)計(jì)師將不同產(chǎn)品的風(fēng)險(xiǎn)等級(jí)、預(yù)期收益、投資周期等關(guān)鍵信息，轉(zhuǎn)化為雷達(dá)圖、柱狀圖結(jié)合的形式。用戶只需輕輕滑動(dòng)屏幕，就能 360 度旋轉(zhuǎn)雷達(dá)圖，全方位對(duì)比各產(chǎn)品的優(yōu)劣勢(shì)，這種可視化交互讓復(fù)雜的理財(cái)選擇變得一目了然，就像有個(gè)專屬理財(cái)顧問(wèn)在身邊為你講解。二、人性化交互流程：告別繁瑣操作

過(guò)去在銀行 APP 轉(zhuǎn)賬，可能要經(jīng)歷選擇轉(zhuǎn)賬類型、輸入卡號(hào)、填寫金額、核對(duì)信息等多個(gè)步驟，流程冗長(zhǎng)且容易出錯(cuò)。而經(jīng)過(guò)精心設(shè)計(jì)的交互流程則大不相同。某頭部銀行 APP 采用了 “智能轉(zhuǎn)賬” 交互模式，當(dāng)用戶點(diǎn)擊轉(zhuǎn)賬按鈕，系統(tǒng)會(huì)自動(dòng)識(shí)別用戶最近的轉(zhuǎn)賬對(duì)象和金額，將其展示在快捷轉(zhuǎn)賬列表中，用戶只需一鍵點(diǎn)擊，就能快速完成轉(zhuǎn)賬操作。如果是給新用戶轉(zhuǎn)賬，在輸入卡號(hào)時(shí)，系統(tǒng)會(huì)實(shí)時(shí)校驗(yàn)卡號(hào)有效性，并通過(guò)顏色變化提示用戶輸入是否正確，避免因輸錯(cuò)卡號(hào)導(dǎo)致轉(zhuǎn)賬失敗的尷尬。

在賬戶管理方面，下拉刷新的交互方式已經(jīng)屢見不鮮，但有一款銀行 APP 卻玩出了新花樣。當(dāng)用戶下拉刷新賬戶余額時(shí)，界面會(huì)出現(xiàn)一個(gè)可愛的小動(dòng)畫，比如一只小錢包 “咻” 地打開，金幣 “嘩啦” 掉落，同時(shí)余額數(shù)字以動(dòng)態(tài)效果更新。這種充滿趣味性的交互，讓原本枯燥的刷新操作變得生動(dòng)起來(lái)，給用戶帶來(lái)了愉悅的使用體驗(yàn)。

三、沉浸式用戶體驗(yàn)：細(xì)節(jié)之處見真章

交互設(shè)計(jì)的魅力還體現(xiàn)在對(duì)用戶情感的關(guān)注上。在一些銀行 APP 的登錄界面，除了常規(guī)的密碼輸入方式，還加入了指紋識(shí)別、面容 ID 等快捷登錄方式，并且在用戶選擇這些方式時(shí)，會(huì)有柔和的光影效果和輕微的震動(dòng)反饋，仿佛在和用戶進(jìn)行 “親密互動(dòng)”。當(dāng)用戶忘記密碼時(shí)，找回密碼的流程也不再是冷冰冰的提示，而是通過(guò)引導(dǎo)式的交互界面，一步一步帶領(lǐng)用戶完成身份驗(yàn)證和密碼重置，整個(gè)過(guò)程就像在和一個(gè)貼心的客服人員對(duì)話。

這些優(yōu)秀的 UI 交互設(shè)計(jì)案例，不僅讓銀行 APP 變得更加易用、有趣，也真正實(shí)現(xiàn)了從 “功能導(dǎo)向” 到 “用戶體驗(yàn)導(dǎo)向” 的轉(zhuǎn)變。希望未來(lái)能看到更多銀行在交互設(shè)計(jì)上發(fā)力，為我們帶來(lái)更出色的使用體驗(yàn)！大家在使用銀行 APP 時(shí)，有沒(méi)有遇到過(guò)哪些讓你印象深刻的交互設(shè)計(jì)呢？歡迎在評(píng)論區(qū)分享！

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.lzhte.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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è)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

前面的文章我們分享了交互設(shè)計(jì)思維，這篇文章，我們來(lái)看看用戶目標(biāo)與交互目標(biāo)。交互設(shè)計(jì)的核心，就是幫用戶拆解這些目標(biāo)并找到最優(yōu)路徑，讓他們覺(jué)得“這事兒沒(méi)那么難”。

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

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

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

目錄：

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

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

3.顏色

4.圖案：禁忌圖標(biāo)、禁忌手勢(shì)、禁忌物品、禁忌動(dòng)物

5.交互手勢(shì)

一、小語(yǔ)種文字

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

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

（1）精簡(jiǎn)界面用語(yǔ)

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

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

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

（3）縮小文字

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

??并列的層級(jí)關(guān)系，文本超長(zhǎng)時(shí)所有文字需要同時(shí)縮小字號(hào)

（4）多行顯示

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

（5）跑馬燈

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

（6）打點(diǎn)截?cái)?/p>

顯示不下到文字截?cái)囡@示并在末尾增加“…”

截?cái)嗟氖褂脠?chǎng)景：

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

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

② 鏡像語(yǔ)言

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

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

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

查看詳情 >

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

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

③ 小語(yǔ)種適配檢視技巧

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

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

二、圖標(biāo)

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

（1）后退，前進(jìn)

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

▲ 阿拉伯語(yǔ)-顯示前進(jìn)方向

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

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

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

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

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

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

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

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

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

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

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

③ 圖標(biāo)特例

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

(2)阿拉伯語(yǔ)有自己的問(wèn)號(hào)?

(3)阿拉伯語(yǔ)am.pm的位置要移動(dòng)到時(shí)間左側(cè)

三、色彩

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

2.非洲市場(chǎng)：禁忌多樣。黑色普遍被認(rèn)為不祥，紅色在乍得、尼日利亞等國(guó)也不受歡迎。

3.歐洲市場(chǎng)：白色神圣，黃色慎用。

四、圖案

禁忌手勢(shì)

禁忌物品

禁忌動(dòng)物

五、交互式手勢(shì)

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

▲

漢語(yǔ)-左滑刪除

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

大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對(duì)于設(shè)計(jì)者來(lái)說(shuō)，應(yīng)該秉持怎樣的初心來(lái)設(shè)計(jì)呢？目前，引導(dǎo)幫助功能又有哪些常見的分類呢？帶著這些問(wèn)題，我們一起走進(jìn)這篇文章，看看作者為我們的分享。推薦相關(guān)人員閱讀與學(xué)習(xí)。

一、用戶怎么知道此功能的使用方式？

前幾天眼睛不太舒服，去醫(yī)院做了一個(gè)檢查（視疲勞導(dǎo)致）。

因?yàn)橐呱瘫＃孕枰褂蒙绫？ǎ拔矣浀蒙绫＝Y(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開始幫我點(diǎn)擊操作。

她覺(jué)得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒(méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺(jué)得你是個(gè)騙子，后面好幾個(gè)人都還是去了窗口。

在B端產(chǎn)品中也有很多類似問(wèn)題，用戶不知道有這個(gè)功能、也不知道這個(gè)功能怎么使用，特別是一些數(shù)據(jù)類產(chǎn)品，專業(yè)性比較強(qiáng)。產(chǎn)品、技術(shù)都認(rèn)為用戶和他們一樣都懂，實(shí)際上并不是，這個(gè)時(shí)候你需要提供一些邀請(qǐng)，引導(dǎo)用戶進(jìn)行使用。

邀請(qǐng)就是引導(dǎo)用戶進(jìn)行操作前的提醒和暗示，通常包括實(shí)時(shí)的提示信息和預(yù)期功能，以表明在當(dāng)前界面或下個(gè)界面可以做什么，這是成功的交互式界面關(guān)鍵所在。

例如：飛書-我的空間，當(dāng)鼠標(biāo)停留在可編輯區(qū)域上時(shí)，就會(huì)實(shí)時(shí)地顯示邀請(qǐng)（復(fù)選框），這個(gè)例子的缺點(diǎn)是鼠標(biāo)如果不處于相應(yīng)區(qū)域上，就不會(huì)顯示邀請(qǐng)。

另一種方案是任何時(shí)候都顯示邀請(qǐng)，例如：石墨文檔-我的桌面，復(fù)選框一直顯示。

二、靜態(tài)邀請(qǐng)

靜態(tài)邀請(qǐng)就是通過(guò)直接在頁(yè)面上給出交互提示，可以讓用戶隨時(shí)看到期望的界面功能。

靜態(tài)邀請(qǐng)主要有兩種模式：引導(dǎo)操作邀請(qǐng)、漫游探索邀請(qǐng)。

1. 引導(dǎo)操作邀請(qǐng)

01 步驟引導(dǎo)

例如：華為云HECS服務(wù)器產(chǎn)品就給出1、2、3操作步驟

引導(dǎo)操作會(huì)占據(jù)頁(yè)面較大的空間，同時(shí)也會(huì)吸引用戶的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁(yè)面和信息層。

02 白板引導(dǎo)

另一種引導(dǎo)操作邀請(qǐng)叫白板式引導(dǎo)。

意思很明確：現(xiàn)在只有一個(gè)空白頁(yè)面，需要引導(dǎo)用戶創(chuàng)建內(nèi)容。

利用空白區(qū)域“變廢為寶”，如何對(duì)該區(qū)域應(yīng)有的功能給出提示，是誘導(dǎo)用戶創(chuàng)建內(nèi)容（填補(bǔ)空白）的有效方式。

2. 漫游探索邀請(qǐng)

與引導(dǎo)操作邀請(qǐng)關(guān)系密切的是漫游探索邀請(qǐng)。假設(shè)你重新設(shè)計(jì)了某個(gè)頁(yè)面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马?yè)面，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶介紹新功能最好的方法。

最佳實(shí)踐：

1. 漫游功能用戶可能不想用，所以需要有可選功能，也就是可以跳過(guò)或關(guān)閉；
2. 漫游功能不是“創(chuàng)可貼”不要亂用，只有針對(duì)精心設(shè)計(jì)的界面使用才能發(fā)揮價(jià)值；
3. 設(shè)計(jì)漫游的關(guān)鍵在于保持簡(jiǎn)單，讓它容易開始也容易停止。漫游應(yīng)該只是頁(yè)面本身的一個(gè)演示。脫離頁(yè)面的“教程”式漫游很難起到作用。

三、動(dòng)態(tài)邀請(qǐng)

靜態(tài)邀請(qǐng)適合提示用戶當(dāng)前界面中包含什么功能。然而，許多調(diào)查試驗(yàn)表明，用戶經(jīng)常不會(huì)閱讀指導(dǎo)說(shuō)明性的文字。而在用戶交互過(guò)程中，在他們需要的時(shí)候提供邀請(qǐng)則是一種不錯(cuò)的方式。動(dòng)態(tài)邀請(qǐng)就是在用戶交互過(guò)程中的某個(gè)點(diǎn)上吸引用戶，并引導(dǎo)他們繼續(xù)下一步操作。

1. 懸停邀請(qǐng)：在鼠標(biāo)懸停期間發(fā)出邀請(qǐng)

吸引用戶的一種方式是通過(guò)鼠標(biāo)懸停來(lái)顯示邀請(qǐng)

例如：飛書消息列表鼠標(biāo)移入后， 背景變化的同時(shí)會(huì)有一個(gè)“勾”圖標(biāo)來(lái)吸引用戶，鼠標(biāo)移入上去后提示可以點(diǎn)擊完成，點(diǎn)擊后消息移除列表。

最佳實(shí)踐

• 當(dāng)操作沒(méi)有內(nèi)容重要，而且希望界面整潔時(shí)，使用懸停邀請(qǐng)。
• 在實(shí)現(xiàn)懸停邀請(qǐng)時(shí)，可以通過(guò)改變光標(biāo)、改變背景和顯示提示條共同配合表明所邀請(qǐng)的操作。
• 在交互的不同階段，盡量點(diǎn)綴一些用戶熟悉的元素，通過(guò)熟悉的概念引出新概念有助于用戶快速理解新功能。最常見的元素是按鈕、鏈接、下拉箭頭和眾所周知的圖標(biāo)。
• 通過(guò)距離表明邀請(qǐng)操作的目標(biāo)對(duì)象。

2. 預(yù)期功能邀請(qǐng)：使用熟悉的事物引出新事物

唐納德·諾曼將這個(gè)術(shù)語(yǔ)引入到設(shè)計(jì)領(lǐng)域。最經(jīng)典的例子是門把手，門把手的預(yù)期功能是可以抓握、扭轉(zhuǎn)或按壓。屏幕元素可感知的預(yù)期功能沒(méi)有物理屬性，不過(guò)，由于習(xí)慣、術(shù)語(yǔ)、圖形及一致性等原因，用戶能夠在某種程度上感覺(jué)到他們可以操作這些元素。

例如：第一張圖飛書文檔sheet頁(yè)“加號(hào)”圖標(biāo)與第二張圖“三個(gè)點(diǎn)”圖標(biāo)，就是一種預(yù)期功能邀請(qǐng)。用戶沒(méi)觸發(fā)之前就能猜到觸發(fā)后會(huì)是什么效果。

預(yù)期功能邀請(qǐng)之所以有效，是因?yàn)槔萌藗円阎牧?xí)慣與認(rèn)知引入交互，從而讓用戶順利完成一連串操作。

最佳實(shí)踐

• 通過(guò)人們習(xí)以為常、司空見慣的概念來(lái)引出新的、不熟悉的交互方式。
• 使用可感知的預(yù)期功能來(lái)給出邀請(qǐng)?zhí)崾?例如，用向下的箭頭表示可以打開下拉菜單，而用向上的箭頭表示可以關(guān)閉菜單)
• 把邀請(qǐng)安排在適當(dāng)?shù)纳舷挛闹校貏e是要靠近交互的主體。

3. 推論邀請(qǐng)：用于交互期間

設(shè)計(jì)邀請(qǐng)時(shí)怎么才能猜測(cè)用戶的想法，也是一項(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ì)給出對(duì)應(yīng)的提示，比如：端點(diǎn)、中點(diǎn)、背面、側(cè)面等點(diǎn)位來(lái)輔助用戶進(jìn)行連接。

例如：這種工作流場(chǎng)景個(gè)人覺(jué)得也算是一種，點(diǎn)擊“加號(hào)”右側(cè)會(huì)滑出面板，給出你可以添加的動(dòng)作。

這種在交互期間以可見方式向用戶表明系統(tǒng)推斷出的用戶想法被稱為推論邀請(qǐng)。

4. 更多內(nèi)容邀請(qǐng)：用于邀請(qǐng)用戶查看更多內(nèi)容

圖片類型的更多邀請(qǐng)，例如：站酷相關(guān)推薦

文字更多邀請(qǐng)，例如：QQ郵箱右側(cè)最近聯(lián)系人

5. 邀請(qǐng)的優(yōu)點(diǎn)

精心設(shè)計(jì)的應(yīng)用能夠通過(guò)邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無(wú)論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個(gè)交互層次的有效方法。

謝謝觀看！

排序在B端和C端產(chǎn)品中都比較常見，隨著用戶對(duì)產(chǎn)品使用的易用性提高，排序在產(chǎn)品交互中也在變化。本文分享B端拖動(dòng)排序的多種場(chǎng)景及交互，希望對(duì)你有所啟發(fā)。

很久沒(méi)有更新B端產(chǎn)品相關(guān)的文章了，近期工作項(xiàng)目中做了很多新需求，接觸了更多業(yè)務(wù)，也學(xué)到了一些新的交互，后續(xù)將會(huì)根據(jù)我在實(shí)際工作項(xiàng)目中遇到的需求展開總結(jié)。

B端產(chǎn)品設(shè)計(jì)具有較高的業(yè)務(wù)屬性，所以對(duì)于ui設(shè)計(jì)師而言也需要有較強(qiáng)的業(yè)務(wù)知識(shí)，在完全理解需求后，再針對(duì)業(yè)務(wù)場(chǎng)景、用戶體驗(yàn)、交互、布局合理、易用性等多維度展開設(shè)計(jì)。

這一期主要分享關(guān)于B端產(chǎn)品中拖動(dòng)排序功能。

排序在B端和C端產(chǎn)品中都比較常見，前期排序有通過(guò)點(diǎn)擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對(duì)產(chǎn)品使用的易用性提高，這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。

目前對(duì)于排序功能，使用更多的是通過(guò)拖動(dòng)排序，通過(guò)選中數(shù)據(jù)后長(zhǎng)按鼠標(biāo)右鍵，上下拖動(dòng)來(lái)完成數(shù)據(jù)的排序。

一、拖動(dòng)排序的多種組件和交互

在B端產(chǎn)品中，我目前接觸的拖動(dòng)排序的組件包含以下兩個(gè)大類：

1. 一級(jí)目錄常規(guī)排序（非樹結(jié)構(gòu)）
2. 樹組件多層級(jí)排序

對(duì)于分類2【樹組件多層級(jí)排序】又包含兩個(gè)小類：

1. 同層級(jí)排序（橫線高亮顯示即將放的位置）
2. 跨層級(jí)排序

對(duì)于小分類【跨層級(jí)排序】又可以細(xì)分為四個(gè)場(chǎng)景：

1. 父級(jí)未展開時(shí)：拖動(dòng)到父級(jí)、父級(jí)整行高亮
2. 父級(jí)未展開時(shí)：拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí)，父級(jí)自動(dòng)展開子級(jí)
3. 父級(jí)已展開時(shí)：拖動(dòng)到子級(jí)時(shí)，父級(jí)整行高亮，拖動(dòng)到的位置出現(xiàn)高亮橫線
4. 父級(jí)已展開時(shí)：拖動(dòng)到子級(jí)文件夾時(shí)，父級(jí)不需要高亮，子級(jí)文件夾目錄整行高亮（子級(jí)已展開和未展開的交互與父級(jí)同理）

二、拖動(dòng)排序場(chǎng)景和交互實(shí)操

上面已經(jīng)總結(jié)了排序的組件和場(chǎng)景，下面我們就一起來(lái)看看不同組件在不同場(chǎng)景下的具體交互，通過(guò)實(shí)際項(xiàng)目設(shè)計(jì)詳細(xì)介紹拖動(dòng)排序的功能。

1. 一級(jí)目錄常規(guī)排序（非樹結(jié)構(gòu)）

數(shù)據(jù)默認(rèn)展示類似列表數(shù)據(jù)一樣，平鋪?zhàn)髮?duì)齊排版，當(dāng)拖動(dòng)排序時(shí)，鼠標(biāo)移動(dòng)到需要排序的數(shù)據(jù)行，長(zhǎng)按鼠標(biāo)右鍵并拖動(dòng)數(shù)據(jù)上下移動(dòng)，被拖動(dòng)的數(shù)據(jù)原位置置灰（也可以直接消失）。

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

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

查看詳情 >

同時(shí)，被拖動(dòng)的數(shù)據(jù)跟著鼠標(biāo)走，移動(dòng)到其它位置時(shí)，在將要放下的位置出現(xiàn)藍(lán)色高亮分割線（還可以做到所有數(shù)據(jù)實(shí)時(shí)變化位置效果）這樣能讓用戶更加直觀地看到數(shù)據(jù)位置的變化。

此類需求一般是針對(duì)一級(jí)數(shù)據(jù)排序，數(shù)據(jù)結(jié)構(gòu)比較簡(jiǎn)單，沒(méi)有文件夾多級(jí)樹狀結(jié)構(gòu)，下面列舉幾個(gè)工作中遇到的需求場(chǎng)景，以及分享幾個(gè)其它產(chǎn)品中遇到的交互，便于大家理解。

由于B端產(chǎn)品具保密性，所以下面分享的截圖非工作實(shí)際數(shù)據(jù)，大家只要明白需求場(chǎng)景和交互即可。

需求場(chǎng)景1：產(chǎn)品業(yè)務(wù)中有很多的表單，表單中的字段順序在不同企業(yè)中不同，應(yīng)該如何設(shè)計(jì)呢？

在設(shè)計(jì)時(shí)，可以將表單所有的字段羅列出來(lái)，然后用戶通過(guò)自定義排序字段即可，這里的交互就可以直接采用上下拖動(dòng)排序。

需求場(chǎng)景2：飛書中有多個(gè)應(yīng)用，對(duì)于每個(gè)用戶而言，自己所關(guān)注的應(yīng)用不同，優(yōu)先級(jí)不同，該如何設(shè)計(jì)？

同理，飛書也是對(duì)用戶個(gè)人的應(yīng)該設(shè)計(jì)了拖動(dòng)排序功能，可以根據(jù)自己關(guān)注的應(yīng)該排序應(yīng)該的位置，從而更快的找到自己常用的應(yīng)用，提高工作效率。

無(wú)論是對(duì)于列表數(shù)據(jù)還是卡片數(shù)據(jù)的排序都可以采用這種拖動(dòng)排序的交互。

2. 樹組件多層級(jí)排序

（1）同層級(jí)排序（橫線高亮顯示即將放的位置）

樹組件同層級(jí)排序默認(rèn)展示和拖動(dòng)時(shí)效果與一級(jí)目錄常規(guī)排序一致。

（2）跨層級(jí)排序

父級(jí)未展開時(shí)：拖動(dòng)到父級(jí)、父級(jí)整行高亮

如下圖，當(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)。

父級(jí)未展開時(shí)：拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí)，父級(jí)自動(dòng)展開子級(jí)。

如下圖，按照上面的步驟拖動(dòng)時(shí)，當(dāng)鼠標(biāo)一直停留在【數(shù)據(jù)名稱顯示003】的位置時(shí)，該文件夾會(huì)自動(dòng)展開二級(jí)目錄，這是一個(gè)拖動(dòng)排序比較友好的交互，可以讓用戶再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu)，并快速一次性選擇需要放的位置。

父級(jí)已展開時(shí)：拖動(dòng)到子級(jí)時(shí)，父級(jí)整行高亮，拖動(dòng)到的位置出現(xiàn)高亮橫線。

如下圖，在上圖基礎(chǔ)上，當(dāng)鼠標(biāo)繼續(xù)拖動(dòng)數(shù)據(jù)，想要放在二級(jí)目錄中時(shí)，數(shù)據(jù)一級(jí)目錄同樣會(huì)顯示高亮，告訴用戶當(dāng)前數(shù)據(jù)的層級(jí)關(guān)系。

同時(shí)，二級(jí)數(shù)據(jù)中會(huì)出現(xiàn)藍(lán)色高亮分割線，標(biāo)識(shí)被拖動(dòng)的數(shù)據(jù)即將放的位置，這樣就能清晰的知道被拖動(dòng)的數(shù)據(jù)將放在那個(gè)目錄的那個(gè)位置。

父級(jí)已展開時(shí)：拖動(dòng)到子級(jí)文件夾時(shí)，父級(jí)不需要高亮，子級(jí)文件夾目錄整行高亮（子級(jí)已展開和未展開的交互與父級(jí)同理）。

當(dāng)需要將數(shù)據(jù)拖動(dòng)到二級(jí)文件夾內(nèi)時(shí)，只需要高亮二級(jí)文件夾即可。

關(guān)于樹組件多層級(jí)排序的使用場(chǎng)景和交互比較復(fù)雜，上面我根據(jù)不同場(chǎng)景分別列出了交互展示方式，下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說(shuō)明，因?yàn)榇藞?chǎng)景主要是針對(duì)交互和顯示，所以我就直接拿動(dòng)圖展示，便于大家理解。

在互聯(lián)網(wǎng)領(lǐng)域中，人機(jī)之間的互動(dòng)過(guò)程就是交互。交互也有一些可預(yù)測(cè)的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。

前段時(shí)間有個(gè)產(chǎn)品童鞋，他剛加我就問(wèn)了一大串問(wèn)題。

什么是模式（Pattern）？什么是模版（Template）？這兩個(gè)概念有什么區(qū)別？

作為一個(gè)熱心好學(xué)、樂(lè)于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個(gè)多小時(shí)，順便總結(jié)下聊天內(nèi)容。

你是不是也經(jīng)常在生活工作中，碰到類似“行為模式、設(shè)計(jì)模式、語(yǔ)言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區(qū)別，搞懂了又有什么用？

別急，我們花幾分鐘，先來(lái)嘮嘮什么是模式。

一、什么是模式？

可預(yù)測(cè)、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過(guò)歸納總結(jié)，就變成了某一種模式。

我們的生活中，就有許多模式的影子。

比如常見的商業(yè)模式、營(yíng)銷模式、行為模式、數(shù)學(xué)模式、語(yǔ)言模式等。

舉個(gè)例子：

簡(jiǎn)單說(shuō)下行為模式，它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。

苦逼打工仔普遍的消費(fèi)模式，一般是工作日花錢少，到了周末都愛到商場(chǎng)逛街和購(gòu)物。

但又有特例，我有個(gè)朋友就特別宅，他只喜歡在上班的時(shí)候，摸魚逛淘寶下單，簡(jiǎn)直離譜~

做交互設(shè)計(jì)10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？

真正轉(zhuǎn)崗之后，我發(fā)現(xiàn)很多工作還是超出了自己的想象。產(chǎn)品經(jīng)理的工作確實(shí)比較雜。理論上，產(chǎn)品經(jīng)理的工作包括了產(chǎn)品的方方面面，從市場(chǎng)研究、用戶調(diào)研、數(shù)據(jù)分析...

查看詳情 >

掌握模式，有什么用？

當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個(gè)好處。

1. 信息壓縮：把信息精簡(jiǎn)成特定的模式，記憶傳播更容易了，教給別人更是輕輕松松；
2. 知識(shí)萃取：通過(guò)學(xué)習(xí)模式，掌握系統(tǒng)化的知識(shí)，就像搭樂(lè)高拼積木，簡(jiǎn)單易懂、一學(xué)就會(huì)、舉一反三；
3. 簡(jiǎn)化問(wèn)題：用模式來(lái)解決問(wèn)題，意味著它不再是一團(tuán)亂麻，成為了可分割的部分，原來(lái)苦惱的事，現(xiàn)在輕松搞定；
4. 識(shí)別規(guī)律：當(dāng)你摸清了模式的現(xiàn)象規(guī)律，就像旅游帶著地圖，走到哪里都不慌；
5. 提高效率：把模式進(jìn)行泛化使用，可以大大提高你的工作產(chǎn)出，蓋章可比畫圖快太多了；
6. 組合創(chuàng)新：試著把你學(xué)會(huì)的各種模式，打亂排序、重新組合，說(shuō)不定會(huì)拼出一些新玩意；
7. 預(yù)測(cè)未來(lái)：搞懂了特定領(lǐng)域的模式，意味著你熟知并能運(yùn)用自如，自然而然學(xué)會(huì)了推演未來(lái)。

二、C 端交互設(shè)計(jì)的 7 種常見模式

我們?cè)囍倥e個(gè)例子，加深下對(duì)模式的理解，順便學(xué)學(xué)交互設(shè)計(jì)。

什么是交互？

簡(jiǎn)單來(lái)說(shuō)，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機(jī)之間的一系列互動(dòng)過(guò)程。

我還提煉了 3 種常見模式（簡(jiǎn)單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。

現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。

學(xué)完就能用，趕緊卷起來(lái)~

有人就問(wèn)了，還有更多交互模式嗎？

確實(shí)可以有，等我有時(shí)間再編幾個(gè)。。

話說(shuō)回來(lái)，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會(huì)涉及到 N 個(gè)交互模式的任意組合。

1. 導(dǎo)航模式

常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。

導(dǎo)航模式的主要作用是，告知用戶當(dāng)前在網(wǎng)站的位置，以及接下來(lái)到哪些頁(yè)面，這有點(diǎn)像地圖 APP。

上面這張圖中，包含了幾種導(dǎo)航組件呢？

2. 搜索模式

搜索，是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。

打個(gè)比方，這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號(hào)、名稱、年齡。

3. 反饋模式

常見的反饋模式組件，涉及了對(duì)話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場(chǎng)景是，告知用戶一些信息或提示，比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。

4. 輸入模式

輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時(shí)，你新增了一個(gè)收貨地址。

打開美團(tuán)叫個(gè)外賣，整個(gè)訂單創(chuàng)建流程，也是輸入模式。

5. 編輯模式

有很多人可能會(huì)把輸入模式和編輯模式搞混。

區(qū)別它們的一個(gè)方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。

改數(shù)據(jù)的話，那就是編輯模式。

6. 分享模式

我們?cè)诳吹揭恍└韶浳恼拢蚝糜玫男〕绦蛳胍D(zhuǎn)發(fā)給朋友，那就要用到分享模式。

分享模式可以很簡(jiǎn)單，也可以往復(fù)雜了做，看產(chǎn)品階段去實(shí)現(xiàn)。

7. 引導(dǎo)模式

引導(dǎo)模式和反饋模式有點(diǎn)像，都是展示特定的內(nèi)容。

那怎么分辨它們呢？

以設(shè)計(jì)師視角來(lái)看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動(dòng)顯示。

而要讓用戶特別關(guān)注的信息，那就是引導(dǎo)模式。

三、總結(jié)

模式，即抽象的規(guī)律。——好夕雷

說(shuō)了這么多概念和例子，你是不是對(duì)模式的認(rèn)知更清晰了呢？

模式運(yùn)用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。

如果學(xué)會(huì)了模式，那么無(wú)論生活還是工作，相信你一定能輕松應(yīng)對(duì)、事半功倍。