編輯導(dǎo)語：動(dòng)效，是頁面的靈魂，也能讓用戶有更好的體驗(yàn)。作為設(shè)計(jì)師，我們?nèi)绾螌?dòng)效設(shè)計(jì)得更有簡潔有趣呢？本篇文章中，作者分享了5種動(dòng)效格式的優(yōu)缺點(diǎn)。感興趣的小伙伴不妨來看看。

動(dòng)效設(shè)計(jì)，可以提升界面的趣味性和引導(dǎo)性，讓用戶瀏覽過程中不會(huì)太枯燥，獲得更好的體驗(yàn)。

最近做的金山知了（后面改名為金山知識(shí)庫）官網(wǎng)，頭圖元素加入了緩動(dòng)效果，第一眼挺新穎的。

金山協(xié)作新年許愿活動(dòng)，許愿按鈕加入了運(yùn)動(dòng)的形象，更能吸引用戶點(diǎn)擊。

不過，輸出動(dòng)圖和開發(fā)對(duì)接的過程中，我也遇到過一些問題：導(dǎo)出的動(dòng)圖模糊、資源太大、開發(fā)不支持動(dòng)圖格式等等，當(dāng)時(shí)也是想盡辦法地解決。

這次我總結(jié)了幾種常用的動(dòng)圖格式，也提及我輸出動(dòng)圖過程遇到的問題和解決方法，以及我們?cè)O(shè)計(jì)師該如何選擇合適的動(dòng)圖格式。

• 序列幀
• GIF
• Lottie
• APNG
• SVGA

一、序列幀

剛開始接觸動(dòng)效，我最先了解到的 PNG 序列幀，就是輸出動(dòng)圖的每一幀圖片，然后交付開發(fā)，按幀播放圖片實(shí)現(xiàn)。

比如這個(gè)加載動(dòng)畫，我的練習(xí)作品，導(dǎo)出序列幀資源很大，所以我平時(shí)基本不用這種格式。

導(dǎo)出方法：

AE 輸出選擇 PNG 序列，如果要導(dǎo)出透明背景，通道選擇 RGB+Alpha。

二、GIF

GIF 支持安卓、iOS、網(wǎng)頁，可以說也是比較常用的格式之一。

界面設(shè)計(jì)中的小元素可以使用這個(gè)格式，比如運(yùn)營按鈕動(dòng)畫、點(diǎn)贊圖標(biāo)動(dòng)畫等，資源不會(huì)太大。

像我之前負(fù)責(zé)的新年許愿活動(dòng)，因?yàn)槭菑?0 到 1 的產(chǎn)品，開發(fā)還沒有支持 Lottie，所以許愿按鈕動(dòng)畫輸出 GIF 給開發(fā)實(shí)現(xiàn)，壓縮后資源 300KB。

雖然動(dòng)圖放大周圍有鋸齒，但是在手機(jī)上是看不到的。

導(dǎo)出方法：

1. AE 導(dǎo)出 MOV 格式，再用 PS 轉(zhuǎn)換成 GIF。（注意：可能是因?yàn)閯?dòng)畫時(shí)間太長、文件太大，導(dǎo)出經(jīng)常失敗，所以我很少用這種方式)

2. AE 安裝 Gifgun 插件，直接導(dǎo)出。

3. AE 導(dǎo)出 PNG 序列，將所有圖片拖進(jìn) iSparta，勾選 GIF 輸出。（注意：如果導(dǎo)出 GIF 圖片有問題，需要勾選壓縮質(zhì)量，填寫小于 100 的值就可以解決了）

如果 GIF 文件太大，可以使用無損壓縮軟件：PPDuck。

三、Lottie

Lottie 是一個(gè)用于 Android、iOS、Web、Windows 的動(dòng)畫庫，用于解析使用 bodymovin 導(dǎo)出為 json 文件的 AE 動(dòng)畫。

動(dòng)畫通過代碼實(shí)現(xiàn)，是矢量的。

動(dòng)畫庫資源會(huì)增加安裝包的大小，客戶端會(huì)有推動(dòng)成本。

不過 WPS Office 有在使用，資源大小和穩(wěn)定性目前來說是可以的。

不支持 AE 效果器直接添加的效果，比如高斯模糊、內(nèi)發(fā)光、投影。

支持用圖片導(dǎo)入 AE 做出的動(dòng)效，比如金山知識(shí)庫官網(wǎng)的頭圖，就是使用 Lottie 方式實(shí)現(xiàn)，資源小，動(dòng)圖也很清晰。

支持顏色漸變，但是導(dǎo)出 json 容易出問題。比如之前設(shè)計(jì)的會(huì)員卡片動(dòng)效，漸變顏色導(dǎo)出后變成了黑白漸變。

這時(shí)候只需要將所有漸變圖層名稱按順序改為 Gradient fill 1、Gradient fill 2、…，就可以解決了。

導(dǎo)出方法：

AE 安裝 bodymovin 插件，直接導(dǎo)出。（注意：要選擇保存路徑，導(dǎo)出按鈕才能點(diǎn)擊。點(diǎn)擊設(shè)置圖標(biāo)，選擇 Standard 和 Demo，才能導(dǎo)出 json 文件和 demo 預(yù)覽效果）

四、APNG

APNG 是基于 PNG 格式的位圖動(dòng)畫格式圖片，文件后綴依然是.png，可以在瀏覽器中預(yù)覽動(dòng)畫。

金山協(xié)作的表情包使用的也是這種格式動(dòng)圖。

和 GIF 對(duì)比，它的優(yōu)勢(shì)在于動(dòng)圖邊緣光滑，不會(huì)有鋸齒和顆粒感。

導(dǎo)出方法：

AE 導(dǎo)出 PNG 序列，將所有圖片拖進(jìn) iSparta，勾選 APNG 輸出。

五、SVGA

SVGA 是由 YY 團(tuán)隊(duì)開發(fā)出來的一種跨平臺(tái)的開源動(dòng)畫格式，同時(shí)兼容 iOS / Android / Flutter / Web 多個(gè)平臺(tái)的動(dòng)畫格式，常用于直播禮物場(chǎng)景，適合炫酷的禮物動(dòng)效。

因?yàn)槎Y物效果比較復(fù)雜，一般是用 png 序列，一張圖一幀地制作動(dòng)畫，輸出 SVGA 文件。

它只會(huì)生成一個(gè) svga 后綴文件，代碼和位圖元素都被集成在了一起，但是 Lottie 會(huì)生成兩個(gè)文件：json 代碼文件+img 文件夾。

支持 AE 自帶基礎(chǔ)動(dòng)畫：位移、縮放、不透明度等，但是不支持圖層漸變（Lottie 支持漸變）和 AE 自帶及外部插件的效果控件特效，所以 UI 動(dòng)效 Lottie 比較通用，不容易出錯(cuò)。

六、總結(jié)

講了那么多動(dòng)效落地方案，那么在實(shí)際工作中我們?cè)撊绾芜x擇使用呢？

1. 資源大小對(duì)比

2. 質(zhì)量對(duì)比

3. 使用場(chǎng)景對(duì)比

• Lottie：基本適合所有 UI 動(dòng)圖，比如圖標(biāo)動(dòng)效、加載動(dòng)效、插圖動(dòng)效、運(yùn)營按鈕動(dòng)效等，優(yōu)先使用
• GIF：移動(dòng)端小元素動(dòng)圖可以使用，比如點(diǎn)贊動(dòng)效（大尺寸透明背景動(dòng)圖不建議使用，鋸齒嚴(yán)重）
• APNG：表情包、小元素動(dòng)圖（比 GIF 質(zhì)量好）
• SVGA：直播禮物炫酷動(dòng)效
• 序列幀：資源太大，不建議使用

以上就是我的業(yè)務(wù)動(dòng)效落地經(jīng)驗(yàn)總結(jié)，大家有需要這些導(dǎo)出插件的可以找我。

作者：ALEI；公眾號(hào)：ALEI的設(shè)計(jì)思考

原文鏈接：https://www.uisdc.com/motion-design

本文由@ ALEI 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

蘭亭妙微(m.wtxcl.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ì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

隨著TikTok的海外關(guān)注度和影響力逐漸擴(kuò)展、小紅書在海外友人的媒體圈炙手可熱，國內(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ǔ)的語言文化了解，在此基礎(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)、禁忌手勢(shì)、禁忌物品、禁忌動(dòng)物

5.交互手勢(shì)

一、小語種文字

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

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

（1）精簡界面用語

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

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

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

（3）縮小文字

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

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

（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)嗟氖褂脠?chǎng)景：

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

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

② 鏡像語言

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

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

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

查看詳情 >

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

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

③ 小語種適配檢視技巧

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

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

二、圖標(biāo)

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

（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)，如：對(duì)話框、書寫、備忘錄。

▲ 阿拉伯語-文本含義圖標(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)該鏡像。

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

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

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

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

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

③ 圖標(biāo)特例

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

(2)阿拉伯語有自己的問號(hào)?

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

三、色彩

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

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

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

四、圖案

禁忌手勢(shì)

禁忌物品

禁忌動(dòng)物

五、交互式手勢(shì)

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

▲

漢語-左滑刪除

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

用戶體驗(yàn)是一個(gè)老生常談的話題。在進(jìn)行 UI & UX 設(shè)計(jì)時(shí)，我們經(jīng)常會(huì)忽略一些細(xì)節(jié)，雖然我們并沒有覺得有什么問題，但往往會(huì)極大地影響用戶的體驗(yàn)，從而影響整個(gè)產(chǎn)品。作者在本文中提出了 6 條提升用戶體驗(yàn)的微技巧，一起來學(xué)習(xí)吧！

在設(shè)計(jì)高效、易讀和漂亮的 UI 界面時(shí)，只需要小的改動(dòng)就能讓你的設(shè)計(jì)眼前一亮。在這篇文章中，我為你帶來了另一些容易付諸實(shí)踐的 UI 和 UX 微技巧。這些技巧只需很小的改動(dòng)就可以幫助你提升用戶體驗(yàn)。讓我們開始吧！

一、通過色彩讓設(shè)計(jì)更一致

如果你有一個(gè)設(shè)計(jì)項(xiàng)目，可以讓你在顏色選擇方面有比較多的自由，不要總是傾向于用彩虹般的顏色來進(jìn)行設(shè)計(jì)。

如果你走的是彩虹路線，你很快就會(huì)發(fā)現(xiàn)很多內(nèi)容看起來都不匹配。簡單地使用一個(gè)基礎(chǔ)色，然后將該顏色的色調(diào)和明暗進(jìn)行變化并應(yīng)用，可以令你的設(shè)計(jì)更加協(xié)調(diào)和一致，并且看起來更專業(yè)，而不需要那些閃亮的彩虹和需要色彩理論學(xué)位。

二、突出選中目標(biāo)吸引用戶注意

UI 可以是干凈的、極簡的和直截了當(dāng)?shù)模@毋庸置疑。但不能以犧牲用戶體驗(yàn)為代價(jià)。對(duì)于像選項(xiàng)菜單這樣簡單的東西，要確保用戶只需快速瀏覽一下，就能夠找到選擇的項(xiàng)目。

你不需要在這里追究更多細(xì)節(jié)。簡潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標(biāo)，而且他們的輸入已經(jīng)得到反饋。

三、加深輕字重文字 提升可讀性

當(dāng)涉及到長篇文字內(nèi)容時(shí)，你可能會(huì)傾向于使用灰色的中間色調(diào)，這可能沒什么問題。但如果你同時(shí)使用更輕字重的字體，就會(huì)發(fā)現(xiàn)這影響了這段內(nèi)容在任何尺寸屏幕上的可讀性。

不要讓用戶因?yàn)檫@種原因退出頁面。可以通過將文字的顏色加深來簡單地解決這個(gè)問題，讓每個(gè)人都更加易讀。對(duì)于較輕字重的字體，只需將其顏色加深幾個(gè)級(jí)別，就能顯著的改善其可讀性。

四、明確元素優(yōu)先級(jí)

你希望用戶的眼睛每次都能快速、有效地注意到頁面上最重要的元素，并將認(rèn)知的努力降到最低。通過使用視覺層級(jí)原則，如字體大小、字重、顏色和布局，僅舉幾例，你可以通過這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗(yàn)，并有助于引導(dǎo)用戶以更直接、準(zhǔn)確地方式使用產(chǎn)品。

五、不要讓用戶猜測(cè)

在用戶進(jìn)行操作之前，特別是點(diǎn)擊某些 CTA 按鈕之前，要確保他們不會(huì)被蒙在鼓里，知道接下來會(huì)發(fā)生什么。在執(zhí)行操作之前，始終讓用戶清楚地了解他們?cè)邳c(diǎn)擊突出顯示的 CTA 按鈕時(shí)可以期待些什么。改善每一步的用戶體驗(yàn)，不要讓他們?cè)诼贸讨腥魏我粋€(gè)觸點(diǎn)產(chǎn)生疑問。

六、為CTA按鈕單獨(dú)設(shè)定一種顏色

CTA 按鈕在頁面中哪怕不是最重要的部分，也是最重要的之一，讓它在頁面中突出出來!

不要讓用戶將它與頁面上其他類型的元素（例如通知或標(biāo)簽）混淆。它需要很容易地被分辨出來，而這可以通過簡單地為 CTA 設(shè)置單獨(dú)一種顏色就做到。當(dāng)然，你可以在尺寸、形狀等方面做更多的細(xì)節(jié)，但只要為你的 CTA 保留一種顏色，僅此一點(diǎn)就可以減少大部分問題。

我希望通過這幾條簡短的小貼士，你能意識(shí)到對(duì)你的設(shè)計(jì)進(jìn)行小的調(diào)整也能帶來完全不一樣的用戶體驗(yàn)。

關(guān)于“管理模式下是否需要確認(rèn)按鈕”這一問題，作者結(jié)合自己最近的一次設(shè)計(jì)方案復(fù)盤，從三個(gè)維度展開分析，希望對(duì)你有所啟發(fā)。

背景

需求：在課程章節(jié)頁面，老師希望可以對(duì)章節(jié)、單元編輯名稱和調(diào)整順序。

設(shè)計(jì)問題：

1. 操作功能入口放在哪里？
2. 是實(shí)時(shí)保存同步，還是點(diǎn)擊確認(rèn)按鈕保存同步？
3. 樹結(jié)構(gòu)下的排序如何設(shè)計(jì)？

一、操作功能入口放在哪里？

最開始想到的就是放在章節(jié)單元后，增加更多 icon，用戶點(diǎn)擊更多進(jìn)行章節(jié)單元的編輯刪除，拖拽直接調(diào)整排序。可是這種設(shè)計(jì)方式讓章節(jié)看起來復(fù)雜很多，而且老師使用頻率很低，一般只有在學(xué)期剛開始，備課時(shí)設(shè)置，后期幾乎不再會(huì)進(jìn)行調(diào)整。

為了降低頁面復(fù)雜度，我把編輯排序放在統(tǒng)一入口，點(diǎn)擊后，再進(jìn)行操作。我給這個(gè)入口命名為管理。點(diǎn)擊管理，進(jìn)入到管理模式，調(diào)整章節(jié)、單元的名稱和層級(jí)結(jié)構(gòu)。

二、是實(shí)時(shí)保存同步，還是點(diǎn)擊確認(rèn)按鈕保存同步？

1. 實(shí)時(shí)保存

實(shí)時(shí)保存就是用戶的每一步操作都會(huì)立即生效。比如一些標(biāo)題的編輯，鼠標(biāo)hover上去會(huì)展示輸入框，光標(biāo)消失即保存成功。或者知乎編輯文章時(shí)，也會(huì)告訴你保存中。

實(shí)時(shí)保存相較于確認(rèn)保存少一步操作路徑，每一步操作立即生效同步更新，相對(duì)來說效率較高。由于人們總是會(huì)忘記收尾工作，實(shí)時(shí)保存也避免了讓用戶承擔(dān)忘記點(diǎn)擊確認(rèn)按鈕而使數(shù)據(jù)丟失的風(fēng)險(xiǎn)。

實(shí)時(shí)保存也有缺點(diǎn)，比如當(dāng)用戶想要反悔撤銷的話，就會(huì)比較困難。一般會(huì)根據(jù)具體需求搭配撤銷按鈕、歷史版本等方式，給用戶一個(gè)反悔撤銷的機(jī)會(huì)。

2. 確認(rèn)按鈕保存

用戶進(jìn)行的一系列操作，都不會(huì)立即生效，而需點(diǎn)擊確認(rèn)（保存等）按鈕后，所有操作才會(huì)生效。比如飛書管理后臺(tái)對(duì)于會(huì)議室預(yù)約規(guī)則的設(shè)置。默認(rèn)是查看模式，修改字段進(jìn)入編輯模式，展示取消、保存按鈕，點(diǎn)擊保存更新修改，取消則回到編輯前的狀態(tài)。

這種方式的好處是，減少用戶修改過程的心理壓力。用戶在修改過程中可以隨意調(diào)整，內(nèi)容不會(huì)被同步，修改好后點(diǎn)擊確認(rèn)按鈕統(tǒng)一保存，內(nèi)容同步。

為什么用戶在編輯時(shí)會(huì)有心理壓力？重點(diǎn)就在于同步給誰，以及同步的內(nèi)容是什么。

3. 用戶

內(nèi)容修改后只同步給自己。

例如微信標(biāo)簽管理，進(jìn)入管理模式后，對(duì)于標(biāo)簽的排序，刪除都實(shí)時(shí)保存更新，沒有確認(rèn)按鈕。標(biāo)簽修改后的結(jié)果只會(huì)同步給自己，而自己在管理標(biāo)簽的過程已經(jīng)知道了修改結(jié)果，如果增加確認(rèn)按鈕倒顯得較為繁瑣。

內(nèi)容修改后會(huì)同步給其他用戶。

例如飛書管理后臺(tái)對(duì)于會(huì)議室預(yù)約規(guī)則的設(shè)置，設(shè)置結(jié)果會(huì)影響其他用戶預(yù)約會(huì)議室，比如能不能約、幾點(diǎn)能約，所以同步設(shè)置結(jié)果就必須要謹(jǐn)慎一些。而多一步確認(rèn)（保存）按鈕可以幫用戶再次確認(rèn)自己的操作行為，讓同步結(jié)果更謹(jǐn)慎。

以上可以總結(jié)為，如果內(nèi)容修改后只同步給自己，則實(shí)時(shí)保持更便捷。如果內(nèi)容修改后會(huì)同步給其他用戶，則需考慮增加確認(rèn)按鈕讓操作行為更謹(jǐn)慎。具體還需考慮內(nèi)容本身。

4. 內(nèi)容

如果內(nèi)容對(duì)其他用戶影響不大，也可以使用實(shí)時(shí)更新。

比如飛書管理后臺(tái)對(duì)于會(huì)議室名稱的修改，修改后，光標(biāo)移開即保存成功。會(huì)議室名稱對(duì)于用戶來說只有信息的傳遞，沒有功能上的制約，甚至也不影響用戶行為目標(biāo)?？梢运伎枷?，當(dāng)用戶想約會(huì)議室時(shí)，什么會(huì)影響用戶決策？比如位置-用戶會(huì)考慮距離是否合適、或者狀態(tài)-是否當(dāng)前被占用等，但會(huì)議室名稱幾乎不會(huì)影響用戶預(yù)約決策。所以內(nèi)容對(duì)用戶影響較小，使用實(shí)時(shí)更新。

編輯者對(duì)于內(nèi)容的重視程度。

比如知乎內(nèi)容發(fā)布后，二次編輯，需點(diǎn)擊保存更新才會(huì)同步給其他人。創(chuàng)作者寫文章耗費(fèi)了自己的時(shí)間成本，好的內(nèi)容可以幫創(chuàng)作者帶來流量和價(jià)值感，所以創(chuàng)作者會(huì)更重視文章內(nèi)容的完整性。而實(shí)時(shí)同步編輯過程所展示的內(nèi)容是不完整的，會(huì)影響讀者閱讀內(nèi)容的感受。所以點(diǎn)擊保存更新，統(tǒng)一同步內(nèi)容可以避免這些問題的發(fā)生。

三、我的方案

回到自己的產(chǎn)品上，老師對(duì)于章節(jié)的管理操作會(huì)同步給學(xué)生，調(diào)整結(jié)果會(huì)影響學(xué)生查看章節(jié)結(jié)構(gòu)。作為學(xué)生，主要任務(wù)是完成章節(jié)或者單元下的學(xué)習(xí)活動(dòng)。所以調(diào)整的內(nèi)容并不影響學(xué)生完成學(xué)習(xí)任務(wù)，按照我們所總結(jié)的規(guī)則，內(nèi)容對(duì)于同步者影響不大，可以使用實(shí)時(shí)更新。

再來看編輯者對(duì)于內(nèi)容的重視程度。老師會(huì)在學(xué)期前開始備課，管理層級(jí)結(jié)構(gòu)屬于備課環(huán)節(jié)，教學(xué)內(nèi)容一般都是固定的，所以后期調(diào)整層級(jí)結(jié)構(gòu)的頻率很低。操作行為低頻且優(yōu)先級(jí)不高，內(nèi)容固定，對(duì)于老師來說，重視程度一般。所以也可采用實(shí)時(shí)更新。

由于老師編輯章節(jié)或單元已有保存按鈕，如果管理模式還存在保存操作的話，對(duì)于編輯功能來說需 2 次保存才算是真的保存，理解成本過高。選擇實(shí)時(shí)保存方式更合適。

根據(jù)以上 3 點(diǎn)，我的方案選擇實(shí)時(shí)保存，實(shí)時(shí)更新。

最后

以上是我對(duì)于工作內(nèi)容中關(guān)于管理模式的復(fù)盤思考，最終設(shè)計(jì)方案的產(chǎn)出還是需要結(jié)合自己產(chǎn)品的業(yè)務(wù)，在體驗(yàn)和功能的權(quán)衡之下做出最合理的設(shè)計(jì)。

關(guān)于第三部分排序放在下次在寫….

大部分產(chǎn)品中都含有一些引導(dǎo)幫助的功能，這些功能有什么作用呢？對(duì)于設(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í)候你需要提供一些邀請(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)就是通過直接在頁面上給出交互提示，可以讓用戶隨時(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ù)頁面較大的空間，同時(shí)也會(huì)吸引用戶的眼球。所以在設(shè)計(jì)時(shí)需要思考一下，你希望引導(dǎo)用戶執(zhí)行什么操作，用戶是否可以多次查看，這樣有利于設(shè)計(jì)出明晰的頁面和信息層。

02 白板引導(dǎo)

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

意思很明確：現(xiàn)在只有一個(gè)空白頁面，需要引導(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è)頁面并添加了一組全新的功能，怎樣才能保證用戶恰當(dāng)?shù)厥褂眯马撁?，同時(shí)發(fā)現(xiàn)新添加的功能呢？漫游邀請(qǐng)是向用戶介紹新功能最好的方法。

最佳實(shí)踐：

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

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

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

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

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

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

最佳實(shí)踐

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

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

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

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

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

最佳實(shí)踐

• 通過人們習(xí)以為常、司空見慣的概念來引出新的、不熟悉的交互方式。
• 使用可感知的預(yù)期功能來給出邀請(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)位來輔助用戶進(jìn)行連接。

例如：這種工作流場(chǎng)景個(gè)人覺得也算是一種，點(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)用能夠通過邀請(qǐng)?bào)w現(xiàn)出各自的細(xì)微差別，無論是靜態(tài)還是動(dòng)態(tài)，都是引導(dǎo)用戶順利進(jìn)入下一個(gè)交互層次的有效方法。

謝謝觀看！

在視頻播放器中，合理的手勢(shì)交互設(shè)計(jì)可以幫助用戶提升操作上的便捷性，從而實(shí)現(xiàn)更快捷的觸達(dá)。那么如果想在已有的手勢(shì)交互上實(shí)現(xiàn)設(shè)計(jì)升級(jí)，產(chǎn)品或設(shè)計(jì)一側(cè)可以怎么做？本篇文章里，作者針對(duì)手勢(shì)交互優(yōu)化一事進(jìn)行了解讀，一起來看。

一、前言

視頻播放器中承載著極其豐富的內(nèi)容畫面和播控功能，尤其是在寸土寸金的移動(dòng)端視頻播放器中，為使內(nèi)容更沉浸消費(fèi)，需盡可能克制界面中的功能元素/入口直接外露。基于此種場(chǎng)景下，合理的手勢(shì)設(shè)計(jì)不但可為界面“減負(fù)”，還可幫助用戶更快捷觸達(dá)功能、提升操控便捷性。

視頻場(chǎng)景中目前已有部分的常規(guī)單向手勢(shì)已被用戶廣泛接受并形成習(xí)慣認(rèn)知，如「單擊 →暫?！埂ⅰ鸽p擊→點(diǎn)贊」、「長按→快進(jìn)」、「橫滑→導(dǎo)航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢(shì)。

那么如何在保留用戶對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來在手勢(shì)進(jìn)階交互上的重點(diǎn)探索方向。

本次針對(duì)百度APP中的視頻播放器場(chǎng)景，為提升手勢(shì)操控效率，我們?cè)噲D將常規(guī)的基礎(chǔ)通用手勢(shì)進(jìn)行打散重組、并結(jié)合實(shí)踐案例梳理出「組合手勢(shì)」設(shè)計(jì)模型，以探索如何在視頻場(chǎng)景中構(gòu)建便捷高效的進(jìn)階手勢(shì)體驗(yàn)設(shè)計(jì)。

二、什么是「組合手勢(shì)」

「組合手勢(shì)」是基于常規(guī)手勢(shì)的組合擴(kuò)展，其通常由兩種或兩種以上的常規(guī)基礎(chǔ)手勢(shì)所構(gòu)成，若組合方式及使用場(chǎng)景得當(dāng)，可助力用戶更便捷的觸達(dá)功能。

以前述的視頻場(chǎng)景常規(guī)手勢(shì)為例，其觸發(fā)機(jī)制一般可分為兩個(gè)階段：step1交互信號(hào)→step2執(zhí)行任務(wù)，即用戶通過某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過程是線性的，手勢(shì)擴(kuò)展性十分有限且難以滿足視頻場(chǎng)景對(duì)于手勢(shì)擴(kuò)容的訴求。

于是我們?cè)诂F(xiàn)有常規(guī)手勢(shì)兩階段觸發(fā)機(jī)制的基礎(chǔ)上，嘗試引入「意圖識(shí)別」環(huán)節(jié)，并梳理出「組合手勢(shì)」的設(shè)計(jì)模型，以探索不同基礎(chǔ)手勢(shì)相互組合后的擴(kuò)展可行性。

「組合手勢(shì)」觸發(fā)一般可分為三個(gè)階段：step1交互信號(hào)→step2意圖識(shí)別→step3執(zhí)行任務(wù)，前兩階段均可由對(duì)應(yīng)的基礎(chǔ)分支手勢(shì)構(gòu)成并進(jìn)行組合搭配、以尋求最高效的手勢(shì)組合觸發(fā)路徑。

由于「組合手勢(shì)」并不像常規(guī)手勢(shì)那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設(shè)計(jì)靈活度，尤其需根據(jù)具體的使用場(chǎng)景進(jìn)行綜合考量。

三、「長按組合手勢(shì)」激活快捷菜單

1. 項(xiàng)目背景

百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。

隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。

2. 競品調(diào)研及選型

通過對(duì)競品進(jìn)行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢(shì)作為切入口以觸發(fā)相關(guān)播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨(dú)立播控面板、長按觸發(fā)浮層播控選項(xiàng)、長按觸發(fā)特定播控功能。

• 選型A「長按觸發(fā)獨(dú)立播控面板」：通過長按手勢(shì)可激活從屏幕底部彈出的獨(dú)立播控面板，此方案擴(kuò)展性較強(qiáng)，但對(duì)視頻沉浸觀感體驗(yàn)有一定的打斷感；
• 選型B「長按觸發(fā)浮層播控選項(xiàng)」：通過長按手勢(shì)可觸發(fā)置于視窗上層的浮層選項(xiàng)入口，一定程度上可延續(xù)視頻觀看的沉浸體驗(yàn)，但浮層擴(kuò)展性有限；
• 選型C「長按觸發(fā)特定播控功能」：通過長按手勢(shì)觸發(fā)特定的某個(gè)播控功能（如長按“快進(jìn)”），一定程度上可滿足此功能的重度用戶，但對(duì)于長按手勢(shì)的使用效率較低。

3. 設(shè)計(jì)方案

1）長按手勢(shì)交互擴(kuò)容

針對(duì)目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務(wù)對(duì)上述三種長按交互選型方案進(jìn)行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項(xiàng)」作為設(shè)計(jì)切入點(diǎn)。我們意圖將部分高頻播控功能從基礎(chǔ)菜單中拿出進(jìn)行前置，并探索一套更便捷的觸發(fā)機(jī)制，以此對(duì)視頻場(chǎng)景中的播控菜單進(jìn)行設(shè)計(jì)升級(jí)。

但隨之而來的難點(diǎn)是我們目前播放器中的長按手勢(shì)已被“快進(jìn)”功能占據(jù)，用戶對(duì)此功能的使用頻率高、并已形成較深的操控認(rèn)知，若直接下線“快進(jìn)”功能則會(huì)對(duì)用戶使用習(xí)慣產(chǎn)生較大影響，尤其是視頻場(chǎng)景的重度用戶。

那么如何在兼容用戶已有長按操作習(xí)慣的基礎(chǔ)上再拓展“快捷菜單”呢？是否有可能將“快進(jìn)”和“快捷菜單”進(jìn)行融合？這也是本次項(xiàng)目對(duì)于便捷手勢(shì)體驗(yàn)的重要設(shè)計(jì)探索點(diǎn)。

基于此，我們決定嘗試使用「組合手勢(shì)」設(shè)計(jì)模型來對(duì)視頻播放器中的長按手勢(shì)進(jìn)行重新定義，通過「長按+滑選」的機(jī)制觸發(fā)快捷菜單功能項(xiàng)，以縮短視頻常用功能路徑。對(duì)應(yīng)到設(shè)計(jì)模型的三個(gè)階段分別為：

• step1：以“長按手勢(shì)”創(chuàng)建一個(gè)新模式，即發(fā)出交互信號(hào)并喚出浮層菜單；
• step2：若用戶未松開手指，則系統(tǒng)默認(rèn)開始識(shí)別用戶意圖，是否有以“拖拽手勢(shì)”滑選至目標(biāo)功能項(xiàng)以選擇功能；
• step3：用戶滑選錨定至目標(biāo)功能后，松手釋放即可完成最后的功能執(zhí)行確認(rèn)。

• 「長按+向上滑選」快捷觸發(fā)對(duì)應(yīng)功能項(xiàng)；
• 「長按+向下滑選」快捷觸發(fā)“快進(jìn)”（一定程度上兼容老用戶對(duì)于此功能的使用習(xí)慣）。

2）容錯(cuò)性兼容

在設(shè)定「長按+滑選」組合手勢(shì)的同時(shí)，考慮到兼容主流的長按習(xí)慣、以及對(duì)于滑選手勢(shì)需要有一定的適應(yīng)過程，我們同時(shí)也支持點(diǎn)選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點(diǎn)選的方式觸發(fā)對(duì)應(yīng)播控功能項(xiàng)。

3）易用性打磨

差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長按+滑選」組合手勢(shì)的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問題進(jìn)行快速打磨優(yōu)化。

我們根據(jù)測(cè)試目標(biāo)、用戶類別、測(cè)試前序準(zhǔn)備及測(cè)試步驟等環(huán)節(jié)提前擬好必要的測(cè)試腳本，并邀請(qǐng)了10+名不同年齡段的目標(biāo)用戶進(jìn)行訪談測(cè)試。

測(cè)試訪談的過程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/p>

同時(shí)，我們通過觀察用戶操作行為及用戶主動(dòng)反饋，發(fā)現(xiàn)仍有部分易用性細(xì)節(jié)可進(jìn)一步打磨優(yōu)化。

① 擴(kuò)展觸發(fā)熱區(qū)

考慮到單手握持手機(jī)的使用場(chǎng)景，可盡可能擴(kuò)大定義長按手勢(shì)的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。

② 支持跟手觸發(fā)

長按后浮出的快捷功能項(xiàng)，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。

③ 實(shí)時(shí)提示及響應(yīng)反饋

靈活判斷當(dāng)前手勢(shì)觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時(shí)給出相對(duì)應(yīng)的引導(dǎo)提示或振感反饋，以幫助用戶快速適應(yīng)新的手勢(shì)觸發(fā)機(jī)制。

4. 方案上線及驗(yàn)證

以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yàn)證：

• 「對(duì)照組」效果：長按觸發(fā)“快進(jìn)”（各播控功能入口仍歸置于基礎(chǔ)菜單面板之中）；
• 「實(shí)驗(yàn)組」效果：長按觸發(fā)“快捷菜單”選項(xiàng)（支持滑選和點(diǎn)選模式）。

小流量實(shí)驗(yàn)上線后，經(jīng)過近半個(gè)月的觀察，大盤指標(biāo)穩(wěn)定、播放完成率等滿意度指標(biāo)穩(wěn)步提升。

「實(shí)驗(yàn)組」長按快捷菜單中的功能使用率相對(duì)「對(duì)照組」均有大幅提升，說明用戶對(duì)部分高頻功能的確有很強(qiáng)的快捷觸發(fā)訴求。

「實(shí)驗(yàn)組」的“快進(jìn)”雖多了一步觸發(fā)步長，實(shí)驗(yàn)前期“快進(jìn)”使用率不及「對(duì)照組」，但隨著用戶對(duì)于「長按+滑選」手勢(shì)整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進(jìn)”的操作習(xí)慣也快速被培養(yǎng)起來，對(duì)于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。

5. 二期擴(kuò)展方案

隨著長按快捷菜單的上線推全，長按手勢(shì)的滲透率也持續(xù)走高，用戶逐漸對(duì)視頻場(chǎng)景更多的播控功能有了長按觸發(fā)的訴求，于是我們對(duì)長按菜單進(jìn)行了二期的設(shè)計(jì)升級(jí)，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場(chǎng)景所有的播控功能，用戶通過長按后的可選播控項(xiàng)增多，播控功能整體的使用量得到進(jìn)一步提升。

四、「組合手勢(shì)」拓展探索

手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無論是基礎(chǔ)手勢(shì)還是組合類高級(jí)手勢(shì)，都須符合用戶認(rèn)知習(xí)慣、并融入具體的使用場(chǎng)景中進(jìn)行設(shè)計(jì)。

以「組合手勢(shì)」設(shè)計(jì)模型為指導(dǎo)基礎(chǔ)、并結(jié)合具體的項(xiàng)目實(shí)踐，我們進(jìn)一步對(duì)視頻播放器中更多功能場(chǎng)景進(jìn)行了便捷手勢(shì)的設(shè)計(jì)擴(kuò)容探索。

1. 「右滑返回手勢(shì)」激活“小窗播放”

“小窗播放”旨在退出當(dāng)前視頻落地頁、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。

基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。

2. 「雙指手勢(shì)」激活“滿屏播放”

“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。

五、結(jié)語

便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領(lǐng)域、并進(jìn)一步探索更貼合用戶使用場(chǎng)景的手勢(shì)交互體驗(yàn)。

按鈕是產(chǎn)品中十分常見的交互元素之一，好的按鈕設(shè)計(jì)可以很大程度地提升用戶體驗(yàn)。那么，怎么打造出符合用戶需求、深受用戶喜愛的優(yōu)秀按鈕？這篇文章里，作者對(duì)按鈕UX設(shè)計(jì)進(jìn)行了拆解分析，一起來看一下。

一、引言

在數(shù)字產(chǎn)品中，按鈕是最常用的交互元素之一。一個(gè)好的按鈕設(shè)計(jì)可以提高用戶體驗(yàn)和產(chǎn)品的使用率。

本文將探討一些關(guān)于按鈕UX設(shè)計(jì)的方法，包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標(biāo)簽和描述、考慮交互方式、測(cè)試和優(yōu)化等。

通過綜合考慮這些因素，我們可以打造出符合用戶需求的優(yōu)秀按鈕，提升產(chǎn)品的用戶體驗(yàn)和競爭力。

二、按鈕的基本要素

1. 按鈕的定義和功能

按鈕是一種用戶界面元素，用于觸發(fā)特定的操作或行為。

它可以是文本、圖像或交互式元素，通常位于頁面的底部或頂部，以便于用戶快速訪問。

2. 按鈕的類型和分類

根據(jù)不同的用途和設(shè)計(jì)風(fēng)格，按鈕可以分為多種類型和分類，例如：

• 確認(rèn)按鈕：用于確認(rèn)用戶的輸入或操作，通常為綠色或藍(lán)色。
• 取消按鈕：用于取消用戶的輸入或操作，通常為紅色或灰色。
• 導(dǎo)航按鈕：用于跳轉(zhuǎn)到其他頁面或頁面的一部分，通常為下拉箭頭或回車鍵。
• 搜索按鈕：用于在網(wǎng)站或應(yīng)用程序中搜索內(nèi)容，通常為放大鏡圖標(biāo)。
• 提交按鈕：用于提交表單數(shù)據(jù)或執(zhí)行其他操作，通常為“提交”或“完成”按鈕。
• 重置按鈕：用于重置表單或應(yīng)用程序的設(shè)置，通常為“重置”或“恢復(fù)默認(rèn)值”按鈕。

以上僅是一些常見的按鈕類型和分類，實(shí)際上還有很多其他的類型和分類。在設(shè)計(jì)按鈕時(shí)，需要根據(jù)具體的場(chǎng)景和目的選擇合適的類型和分類，并結(jié)合用戶體驗(yàn)和產(chǎn)品需求進(jìn)行優(yōu)化。

三、按鈕的布局和位置

1. 按鈕的位置和大小

按鈕的位置和大小對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來說，按鈕應(yīng)該位于用戶視線的中心位置，以便于用戶快速訪問。同時(shí)，按鈕的大小也應(yīng)該適中，不要過大或過小，以免影響用戶的操作。

在實(shí)際設(shè)計(jì)中，可以通過以下幾種方式來確定按鈕的位置和大?。?/p>

• 根據(jù)頁面布局來確定按鈕的位置和大小，通常將按鈕放置在頁面的中央位置，并根據(jù)頁面元素的大小和間距來進(jìn)行調(diào)整。
• 根據(jù)用戶行為來確定按鈕的位置和大小，例如，將常用的按鈕放在頁面的頂部或底部，以便于用戶快速訪問。
• 根據(jù)設(shè)備屏幕大小來確定按鈕的位置和大小，例如，在移動(dòng)設(shè)備上，可以將按鈕放在屏幕的底部或頂部，以便于用戶單手操作。

2. 按鈕的布局方式和排版規(guī)則

除了位置和大小之外，按鈕的布局方式和排版規(guī)則也非常重要。合理的布局方式和排版規(guī)則可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。以下是一些常見的按鈕布局方式和排版規(guī)則：

• 水平布局：將多個(gè)按鈕橫向排列在一起，適用于需要同時(shí)操作多個(gè)功能的場(chǎng)景。
• 垂直布局：將多個(gè)按鈕縱向排列在一起，適用于需要按順序操作多個(gè)功能的場(chǎng)景。
• 對(duì)齊方式：將多個(gè)按鈕按照左對(duì)齊、右對(duì)齊、居中對(duì)齊等方式進(jìn)行排列，以便于用戶快速找到目標(biāo)按鈕。
• 間距規(guī)則：通過調(diào)整按鈕之間的間距來增加可讀性和可操作性，例如，可以設(shè)置相鄰按鈕之間的間距為20像素。
• 文字排版規(guī)則：通過調(diào)整按鈕文字的大小、顏色、字體等方式來提高可讀性和美觀度。

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

按鈕的顏色對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來說，按鈕的顏色應(yīng)該與產(chǎn)品的品牌色或主題色相匹配，以便于用戶識(shí)別和記憶。同時(shí)，按鈕的顏色也應(yīng)該具有明顯的對(duì)比度，以便于用戶在不同的背景下快速找到目標(biāo)按鈕。

以下是一些常見的按鈕顏色選擇原則：

• 單色按鈕：使用單一的顏色作為按鈕背景，適用于簡單明了的場(chǎng)景。
• 漸變色按鈕：使用漸變色作為按鈕背景，可以增加視覺效果和層次感。
• 反色按鈕：使用與背景形成鮮明對(duì)比的顏色作為按鈕背景，可以提高可讀性和可操作性。
• 白色按鈕：使用白色作為按鈕背景，適用于簡潔明了的場(chǎng)景。

2. 按鈕樣式的設(shè)計(jì)要點(diǎn)

除了顏色之外，按鈕的樣式設(shè)計(jì)也是非常重要的。合理的樣式設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。

以下是一些常見的按鈕樣式設(shè)計(jì)要點(diǎn)：

• 圓角按鈕：將按鈕的邊角設(shè)置為圓角，可以增加界面的柔和感和親和力。
• 陰影按鈕：在按鈕周圍添加陰影效果，可以增加立體感和層次感。
• 描邊按鈕：在按鈕周圍添加描邊效果，可以突出按鈕的輪廓和形狀。
• 圖標(biāo)按鈕：在按鈕上添加圖標(biāo)或圖形元素，可以增加視覺效果和表達(dá)意義。
• 放大鏡按鈕：在按鈕上添加放大鏡效果，可以增加交互性和趣味性。

五、按鈕的文字和標(biāo)簽

1. 按鈕文字的設(shè)計(jì)原則

按鈕文字的設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來說，按鈕文字應(yīng)該簡潔明了、易于理解和記憶，同時(shí)要符合產(chǎn)品的品牌形象和主題風(fēng)格。

以下是一些常見的按鈕文字設(shè)計(jì)原則：

• 簡短明了：按鈕文字應(yīng)該簡短明了，不要過于冗長，以便于用戶快速理解和操作。
• 可讀性強(qiáng)：按鈕文字應(yīng)該具有較強(qiáng)的可讀性，字體大小適中，顏色鮮艷，避免使用難以辨認(rèn)的字體或顏色。
• 表達(dá)意義明確：按鈕文字應(yīng)該能夠準(zhǔn)確地表達(dá)按鈕的功能和意義，避免產(chǎn)生歧義或誤解。
• 與品牌形象相符：按鈕文字應(yīng)該與產(chǎn)品的品牌形象相符，符合產(chǎn)品的定位和風(fēng)格。

2. 按鈕標(biāo)簽的設(shè)計(jì)要點(diǎn)

除了文字之外，按鈕標(biāo)簽也是非常重要的。合理的標(biāo)簽設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。

以下是一些常見的按鈕標(biāo)簽設(shè)計(jì)要點(diǎn)：

• 標(biāo)簽內(nèi)容簡潔明了：標(biāo)簽內(nèi)容應(yīng)該簡潔明了，不要過于復(fù)雜，以便于用戶快速理解和操作。
• 標(biāo)簽位置合理：標(biāo)簽的位置應(yīng)該合理，不要遮擋按鈕的主要內(nèi)容，也不要過于靠近邊緣，以免誤觸。
• 標(biāo)簽樣式統(tǒng)一：標(biāo)簽的樣式應(yīng)該統(tǒng)一，不要出現(xiàn)多種不同的字體、顏色或樣式，以保持界面的整潔和一致性。
• 標(biāo)簽語義明確：標(biāo)簽的語義應(yīng)該明確，不要產(chǎn)生歧義或誤解，以便于用戶理解和操作。

六、按鈕的交互設(shè)計(jì)

1. 按鈕的點(diǎn)擊效果和反饋機(jī)制

按鈕的交互設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。合理的點(diǎn)擊效果和反饋機(jī)制可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。

以下是一些常見的按鈕點(diǎn)擊效果和反饋機(jī)制：

• 點(diǎn)擊效果：按鈕的點(diǎn)擊效果應(yīng)該明顯而流暢，可以使用淡入淡出、彈跳、放大縮小等效果，以增加用戶的互動(dòng)性和趣味性。
• 反饋機(jī)制：按鈕的反饋機(jī)制應(yīng)該及時(shí)、準(zhǔn)確地告訴用戶操作的結(jié)果，可以使用聲音、震動(dòng)、提示框等方式進(jìn)行反饋，以增強(qiáng)用戶的感知和滿意度。
• 錯(cuò)誤提示：當(dāng)按鈕操作出現(xiàn)錯(cuò)誤時(shí)，應(yīng)該及時(shí)給出錯(cuò)誤提示，以避免用戶產(chǎn)生困惑或不滿。

2. 按鈕的動(dòng)畫效果和過渡效果

除了點(diǎn)擊效果之外，按鈕的動(dòng)畫效果和過渡效果也可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。

以下是一些常見的按鈕動(dòng)畫效果和過渡效果：

• 漸變色：將按鈕的背景顏色漸變?yōu)橥该骰虬胪该?，可以讓用戶感覺到按鈕正在被點(diǎn)擊或激活。
• 放大縮?。涸诎粹o被點(diǎn)擊時(shí)，可以將按鈕的大小放大或縮小，以增加視覺效果和趣味性。
• 旋轉(zhuǎn)：在按鈕被點(diǎn)擊時(shí)，可以將按鈕進(jìn)行旋轉(zhuǎn)，以增加動(dòng)態(tài)感和趣味性。
• 彈出框：在按鈕被點(diǎn)擊時(shí)，可以彈出一個(gè)提示框或確認(rèn)框，以增加用戶的確認(rèn)感和安全感。

七、按鈕的測(cè)試和優(yōu)化

1. 按鈕測(cè)試的方法和流程

按鈕的測(cè)試和優(yōu)化對(duì)于提高產(chǎn)品的用戶體驗(yàn)和可用性非常重要。合理的測(cè)試和優(yōu)化策略可以發(fā)現(xiàn)并解決產(chǎn)品中存在的問題，提高產(chǎn)品的品質(zhì)和用戶滿意度。

以下是一些常見的按鈕測(cè)試方法和流程：

• 功能測(cè)試：對(duì)按鈕的功能進(jìn)行全面的測(cè)試，包括點(diǎn)擊效果、反饋機(jī)制、錯(cuò)誤提示等?？梢允褂檬謩?dòng)測(cè)試和自動(dòng)化測(cè)試相結(jié)合的方式進(jìn)行測(cè)試。
• 兼容性測(cè)試：對(duì)按鈕在不同設(shè)備、不同瀏覽器、不同操作系統(tǒng)下的兼容性進(jìn)行測(cè)試，以確保產(chǎn)品能夠在各種環(huán)境下正常運(yùn)行。
• 性能測(cè)試：對(duì)按鈕的性能進(jìn)行測(cè)試，包括響應(yīng)時(shí)間、加載速度、資源占用等，以確保產(chǎn)品能夠快速響應(yīng)用戶操作。

2. 按鈕優(yōu)化的策略和技巧

除了測(cè)試之外，按鈕優(yōu)化也是提高產(chǎn)品用戶體驗(yàn)和可用性的重要手段。以下是一些常見的按鈕優(yōu)化策略和技巧：

• 簡化設(shè)計(jì)：將按鈕的設(shè)計(jì)簡化到最少，只保留必要的信息和功能，以便于用戶快速理解和操作。
• 提供反饋：為按鈕提供及時(shí)、準(zhǔn)確的反饋，讓用戶知道他們的操作是否成功，以增強(qiáng)用戶的感知和滿意度。
• 增加互動(dòng)性：通過動(dòng)畫效果、過渡效果等方式增加按鈕的互動(dòng)性，以提高用戶的趣味性和參與度。
• 考慮用戶習(xí)慣：根據(jù)用戶的使用習(xí)慣和心理特點(diǎn)，合理設(shè)計(jì)按鈕的位置、大小、顏色等，以提高用戶的使用體驗(yàn)和便利性。

八、總結(jié)

按鈕UX設(shè)計(jì)對(duì)于提高產(chǎn)品的用戶體驗(yàn)和可用性非常重要。合理的按鈕設(shè)計(jì)可以增加用戶的參與度、趣味性和便利性，從而提高用戶對(duì)產(chǎn)品的滿意度和忠誠度。

在進(jìn)行按鈕UX設(shè)計(jì)時(shí)，需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機(jī)制等多個(gè)方面，以確保產(chǎn)品能夠滿足用戶的需求和期望。同時(shí)，還需要進(jìn)行測(cè)試和優(yōu)化，發(fā)現(xiàn)并解決產(chǎn)品中存在的問題，提高產(chǎn)品的品質(zhì)和用戶滿意度。因此，按鈕UX設(shè)計(jì)對(duì)于現(xiàn)代產(chǎn)品開發(fā)和用戶體驗(yàn)設(shè)計(jì)都具有重要的意義和必要性。

將大東西進(jìn)行拆解為小的東西，逐步解決問題，解決了小問題，大問題也解決了，在產(chǎn)品設(shè)計(jì)中也是一樣。在面臨圓角直角的選擇時(shí)，我們來看看作者如何做選擇

在當(dāng)今數(shù)字化時(shí)代，UI設(shè)計(jì)已成為創(chuàng)造引人入勝的用戶體驗(yàn)的關(guān)鍵要素。一個(gè)成功的UI設(shè)計(jì)不僅需要技術(shù)知識(shí)，還需要對(duì)細(xì)微之處的深刻理解。本文將探討兩種基礎(chǔ)但極為重要的圖形元素：圓角和直角。它們?nèi)绾斡绊懹脩舻母兄突?dòng)，如何在設(shè)計(jì)中恰到好處地應(yīng)用它們，以及它們?cè)趯?shí)際案例中的運(yùn)用。

一、圓角與直角的特性

在介紹“圓角與直角”前，先給大家分享一個(gè)心理效應(yīng)“bouba/kiki效應(yīng)。”

這個(gè)效應(yīng)最早由德國心理學(xué)家沃爾夫?qū)?middot;科勒在1929年提出。

• “kiki”這個(gè)詞的尖銳、快速的音調(diào)與尖銳的星狀圖案相呼應(yīng)
• “bouba”這個(gè)詞的圓潤、流暢的聲音則與圓潤的云狀圖案相呼應(yīng)

最早在1929年沃爾夫?qū)?middot;科勒做了一個(gè)實(shí)驗(yàn)，該實(shí)驗(yàn)展示了兩種形式，并詢問讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒有明確說明，科勒暗示人們強(qiáng)烈傾向于將鋸齒狀形狀與“takete”配對(duì)，將圓形形狀與“maluma”配對(duì)。

在2001年的另一組實(shí)驗(yàn)中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個(gè)詞重復(fù)了科勒的實(shí)驗(yàn)，詢問美國大學(xué)本科生和印度講泰米爾語的人，“這些形狀中哪個(gè)是bouba，哪個(gè)是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。

這個(gè)效應(yīng)主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”

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

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

查看詳情 >

那么我們不妨擴(kuò)展一下，把這這種效應(yīng)延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽名字“羊”和“狼”就可以潛意識(shí)的認(rèn)為“喜羊羊”就相當(dāng)于“bouba”、“灰太狼”相當(dāng)于“kiki”，“羊族”一聽就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛愛的卡通人物”大部分就是以圓形為基礎(chǔ)“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級(jí)大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺形狀和語音上”。

如果聽完這些你還是不懂，那么最簡單的例子一個(gè)堪比吳彥祖的帥哥叫“文軒沒有大腦袋”，那當(dāng)你見到他時(shí)一定會(huì)去觀察這個(gè)人到底有沒有“大腦袋”

那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進(jìn)行UI思考，就可以大致了解“圓角與直角”大致的特性

1. 圓角

1）定義

• 圓角指的是元素邊角被設(shè)計(jì)為圓滑的形狀，而非尖銳的直角。
• 它通常通過設(shè)定一個(gè)半徑來實(shí)現(xiàn)，半徑越大，角越圓滑。

2）特性

• 視覺友好：「圓角被認(rèn)為更溫和、更友好，因?yàn)樗鼈內(nèi)狈怃J的邊緣，給人一種安全和柔和的感覺。」
• 現(xiàn)代感：「在現(xiàn)代設(shè)計(jì)中，圓角被廣泛使用，它們通常與新穎、時(shí)尚的設(shè)計(jì)理念相關(guān)聯(lián)?！?/li>
• 提高注意力聚焦：「圓角可以引導(dǎo)用戶的視線流動(dòng)，幫助減少視覺干擾，使用戶更容易聚焦于界面的關(guān)鍵部分。」
• 適用性：「在移動(dòng)應(yīng)用和網(wǎng)站設(shè)計(jì)中尤其流行，特別是在按鈕、輸入框、卡片和其他交互元素中。」

2. 直角

1）定義

• 直角是指元素的邊角以90度角的形式呈現(xiàn)。
• 它是最基本的形狀之一，在許多傳統(tǒng)和經(jīng)典的設(shè)計(jì)中常見。

2）特性

• 專業(yè)感：「直角通常給人一種更加正式、專業(yè)的印象?！?/li>
• 清晰界定：「直角在視覺上提供了清晰的界定，使元素的邊界更加明確，有助于信息的組織和分隔?！?/li>
• 傳統(tǒng)感：「在某些情況下，直角與傳統(tǒng)、經(jīng)典的設(shè)計(jì)風(fēng)格相聯(lián)系?！?/li>
• 適用性：「直角在各種應(yīng)用中都很常見，尤其是在需要傳達(dá)清晰、直接信息的界面中，如表格、列表和布局結(jié)構(gòu)?！?/li>

那么回想一下“bouba/kiki效應(yīng)”，今后在設(shè)計(jì)中當(dāng)我們看到某個(gè)產(chǎn)品大量的使用“直角/圓角”我們就可以分辨這個(gè)產(chǎn)品的大致風(fēng)格，同樣字體搭配也是相似的效果，通過不同的banner可以大致看出運(yùn)營活動(dòng)的大致目的。

二、圓角、直角的使用場(chǎng)景

在實(shí)際的使用場(chǎng)景中，我們就從最常見的“按鈕、卡片”兩個(gè)場(chǎng)景來舉例分析“圓角、直角”的作用。

1. 按鈕

我們首先具體聚焦在UI設(shè)計(jì)中對(duì)于“按鈕”這一元素的圓角和直角的使用：

1）圓角按鈕

• 用戶友好性：「圓角按鈕通?？雌饋砀佑押煤腿菀捉咏?，它們給用戶一種溫饌和舒適的感覺，適合于鼓勵(lì)用戶交互的場(chǎng)景?！?/li>
• 移動(dòng)設(shè)備適應(yīng)性：「在移動(dòng)設(shè)備上，由于屏幕尺寸較小，圓角按鈕更易于觸控，尤其是屏幕邊緣的按鈕?！?/li>
• 減少視覺沖擊：「圓角可以減少視覺上的尖銳感，使界面看起來更加柔和，適合于尋求輕松視覺體驗(yàn)的應(yīng)用?！?/li>

2）直角按鈕

• 專業(yè)和正式感：「直角按鈕給人一種更加正式和專業(yè)的感覺，在一些傳統(tǒng)的或者保守的設(shè)計(jì)風(fēng)格中，直角按鈕更為常見，例如一些服裝品牌（Yohji Yamamoto、CONFIRMED）、學(xué)校（各學(xué)校官方網(wǎng)站）等。」
• 內(nèi)容和功能區(qū)分：「直角按鈕在視覺上更加突出，能夠有效地區(qū)分不同的功能和內(nèi)容，尤其是在需要用戶做出明確決策的界面上。」

那么這里我們會(huì)有一個(gè)疑問，那就是“移動(dòng)設(shè)備適應(yīng)性”，這里我們可能會(huì)想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？

我們從兩個(gè)方面來解答

1）觸控面積

• 實(shí)際上，無論是圓角還是直角，按鈕的觸控面積通常是由其外接矩形決定的。這意味著，即使按鈕的視覺元素有圓角，觸控面積實(shí)際上仍然包括了這些圓角區(qū)域。
• 在實(shí)際應(yīng)用中，操作系統(tǒng)或應(yīng)用平臺(tái)通常會(huì)為按鈕元素提供一個(gè)默認(rèn)的“觸控目標(biāo)大小”，這個(gè)大小是為了確保良好的觸控體驗(yàn)而設(shè)計(jì)的，無論按鈕的視覺樣式如何。

2）視覺感知與觸控體驗(yàn)

• 圓角按鈕在視覺上看起來更加柔和和親切，這可能使得用戶更傾向于觸摸和與之交互。這種心理效應(yīng)可能會(huì)導(dǎo)致用戶覺得圓角按鈕更“容易”觸控，即使實(shí)際的觸控面積與直角按鈕相同。
• 在移動(dòng)設(shè)備上，圓角按鈕的另一個(gè)優(yōu)勢(shì)是它們的形狀與設(shè)備的圓潤邊緣相協(xié)調(diào)，這在視覺上創(chuàng)造了一種和諧感，可能會(huì)無形中增加用戶的觸控舒適度。

通過這兩方面，我們是不是又能聯(lián)想到“bouba/kiki效應(yīng)”，介于“圓角本身的屬性”我們會(huì)更容易去點(diǎn)擊他。

2. 卡片

對(duì)于卡片我們還是先對(duì)比，在進(jìn)行詳細(xì)的分析。

1）圓角卡片

• 視覺風(fēng)格：「圓角卡片提供了一種柔和、友好的視覺感受。它們的圓潤邊緣可以減少視覺沖擊，創(chuàng)造出更輕松和親切的外觀?！?/li>
• 用戶體驗(yàn)：「圓角的設(shè)計(jì)通常被認(rèn)為更加現(xiàn)代和用戶友好。它們可以使界面看起來更輕松、更易于接近，這在提高用戶的互動(dòng)意愿方面很有效?！?/li>
• 適用場(chǎng)景：「圓角卡片通常用于需要提供溫馨、輕松體驗(yàn)的應(yīng)用中，例如社交媒體、娛樂內(nèi)容展示、個(gè)人博客，或者任何強(qiáng)調(diào)用戶友好和易用性的設(shè)計(jì)?！?/li>
• 功能效果：「在功能上，圓角卡片可以幫助區(qū)分不同的內(nèi)容模塊，同時(shí)保持界面的整體一致性和流暢性?！?/li>

2）直角卡片

• 視覺風(fēng)格：「直角卡片提供了一種清晰、專業(yè)的視覺效果。它們的直線和銳角創(chuàng)造了一種結(jié)構(gòu)化和有序的外觀。」
• 用戶體驗(yàn)：「直角設(shè)計(jì)傳達(dá)了一種正式和權(quán)威的感覺，適合于需要展示專業(yè)性和準(zhǔn)確性的應(yīng)用?！?/li>
• 適用場(chǎng)景：「直角卡片通常用于更正式或?qū)I(yè)的環(huán)境，如企業(yè)網(wǎng)站、在線商務(wù)平臺(tái)、教育平臺(tái)，或任何需要清晰展示大量信息的界面。」
• 功能效果：「直角卡片在功能上有助于清楚地區(qū)分和組織內(nèi)容，特別是在數(shù)據(jù)密集或信息密集的應(yīng)用中。」

這里更要值得注意的一點(diǎn)是視覺效果方面的“圓角對(duì)于用戶的視覺效果要強(qiáng)于直角”，巴羅神經(jīng)學(xué)研究所對(duì)角落進(jìn)行的科學(xué)研究發(fā)現(xiàn)，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產(chǎn)生更強(qiáng)的虛幻顯著性”，這里角越尖，看起來就越亮。角落越亮，就越難看。

通過上述對(duì)比我們可以得到一個(gè)結(jié)論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內(nèi)信息”這是因?yàn)閳A角向內(nèi)指向矩形的中心。這會(huì)將焦點(diǎn)放在矩形內(nèi)的內(nèi)容上。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，還可以輕松查看哪條邊屬于哪個(gè)矩形。尖角向外，從而減少對(duì)矩形內(nèi)部內(nèi)容的關(guān)注。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，它們還使得很難判斷兩條邊屬于哪個(gè)矩形。這是因?yàn)槊總€(gè)矩形邊都是一條直線。圓角矩形的邊是獨(dú)特的，因?yàn)榫€條朝著它所屬的矩形彎曲。

三、案例分析

那么對(duì)于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個(gè)產(chǎn)品來分析看一下這兩個(gè)產(chǎn)品對(duì)于“直角、圓角”的應(yīng)用。

1. CONFIRMED

CONFIRMED（Adidas旗下網(wǎng)站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）

作為Adidas旗下產(chǎn)品發(fā)售平臺(tái)，CONFIRMED更多的是發(fā)售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個(gè)應(yīng)用程序旨在為Adidas的高需求和限量產(chǎn)品提供一個(gè)更加公平和直接的購買渠道，通常涵蓋了品牌與設(shè)計(jì)師和藝術(shù)家的合作款，以及特別版的運(yùn)動(dòng)鞋。

那么我們從“產(chǎn)品定位、用戶群體、主要功能流程”來分析一下

1）產(chǎn)品定位

• 獨(dú)家發(fā)售平臺(tái)：「CONFIRMED 專注于提供 Adidas 的獨(dú)家發(fā)售和限量版產(chǎn)品，特別是鞋類和高端服裝。它的目標(biāo)是成為品牌與其最忠實(shí)粉絲之間的直接連接點(diǎn)」
• 品牌營銷工具：「通過這個(gè)平臺(tái)，Adidas 能夠加強(qiáng)其品牌形象，特別是在時(shí)尚和高端運(yùn)動(dòng)裝備領(lǐng)域。CONFIRMED 作為一個(gè)專門平臺(tái)，也強(qiáng)化了 Adidas 在潮流和限量產(chǎn)品市場(chǎng)中的地位?！?/li>
• 市場(chǎng)分析和消費(fèi)者洞察：「CONFIRMED 還可能被用作市場(chǎng)研究工具，通過分析用戶行為和購買模式來更好地理解目標(biāo)市場(chǎng)?！?/li>

2）用戶群體

• 潮流愛好者：「對(duì)最新潮流和設(shè)計(jì)保持關(guān)注的消費(fèi)者，他們追求限量版、獨(dú)家合作系列?！?/li>
• Adidas 忠實(shí)粉絲：「品牌的忠實(shí)支持者，對(duì)于品牌的新產(chǎn)品和特別發(fā)售保持高度興趣?！?/li>
• 運(yùn)動(dòng)鞋收藏家：「對(duì)于限量版運(yùn)動(dòng)鞋有收藏價(jià)值的消費(fèi)者，這些人往往愿意為獨(dú)特和罕見的設(shè)計(jì)支付高價(jià)。」

3）主要功能流程

• 產(chǎn)品預(yù)覽和信息：「用戶可以在應(yīng)用程序中瀏覽即將發(fā)售的產(chǎn)品，并獲取詳細(xì)信息，如價(jià)格、設(shè)計(jì)特點(diǎn)、發(fā)售日期等?！?/li>
• 注冊(cè)和參與抽簽：「對(duì)于感興趣的產(chǎn)品，用戶需要在特定時(shí)間內(nèi)注冊(cè)參與抽簽。這通常涉及填寫個(gè)人信息和選擇購買尺碼等。」
• 抽簽結(jié)果通知：「抽簽結(jié)束后，用戶會(huì)收到是否中簽的通知。如果中簽，用戶將有機(jī)會(huì)購買這些限量產(chǎn)品?！?/li>
• 購買和支付：「中簽用戶可以在應(yīng)用程序內(nèi)完成購買流程，包括支付和選擇配送選項(xiàng)?！?/li>
• 社區(qū)互動(dòng)和內(nèi)容：「CONFIRMED 還可能提供與品牌相關(guān)的內(nèi)容，如設(shè)計(jì)師訪談、品牌故事等，以增強(qiáng)用戶參與和品牌忠誠度?！?/li>

這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過多講述App功能）

每款產(chǎn)品可以在一個(gè)直角卡片中展示，其中包括產(chǎn)品圖片、名稱和一些基本信息。這里在App的“首頁、發(fā)售信息、會(huì)員權(quán)益”這三個(gè)模塊最為突出，這種布局有助于用戶快速瀏覽和識(shí)別不同的產(chǎn)品

4）功能展示

這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發(fā)售的產(chǎn)品、已經(jīng)發(fā)售的產(chǎn)品、品牌故事等，幫助用戶快速定位他們感興趣的內(nèi)容。這里使用通過卡片元素的方式來詳細(xì)展示產(chǎn)品，會(huì)使整個(gè)產(chǎn)品的調(diào)性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗(yàn)會(huì)更直觀的感受產(chǎn)品（這里會(huì)發(fā)現(xiàn)一個(gè)很有趣的細(xì)節(jié)，貌似好的國外、跨境電商的App都會(huì)采用這些大的直角卡片）

接下來我們就講述關(guān)于“CONFIRMED”按鈕元素使用的分析：

5）突出的功能

直角按鈕通常用于突出最重要的操作，例如“購買”、“注冊(cè)抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設(shè)計(jì)而容易被用戶注意到。

6）風(fēng)格統(tǒng)一

使用直角按鈕可以與應(yīng)用中其他直角設(shè)計(jì)元素（如卡片）保持視覺一致性，為用戶提供一致且簡潔的視覺體驗(yàn)。

7）視覺引導(dǎo)

這些按鈕通常配有“CONFIRMED”的顏色（藍(lán)色），用于引導(dǎo)用戶的注意力，幫助他們快速識(shí)別應(yīng)用程序中的不同功能。

這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應(yīng)用中的應(yīng)用可能主要體現(xiàn)在其用戶界面的設(shè)計(jì)上，通過清晰、有序的布局和直觀的用戶交互，提升用戶的體驗(yàn)。

2. 汽水音樂

提到“汽水音樂”大家都不陌生，前段是時(shí)間各大“rapper、流行歌手”發(fā)歌都在汽水，這個(gè)App是可以和抖音聯(lián)動(dòng)的，所以播放音樂的模式?jīng)]有采用大家常見的“點(diǎn)歌、切歌”操作，而是換成隨機(jī)曲子和“抖音”向下滑動(dòng)切換一樣，這樣既新穎又能容易使用戶養(yǎng)成操作習(xí)慣，不至于一下子新的交互方式無法適應(yīng)。那么我們同樣從“產(chǎn)品定位、用戶群體、主要功能來分析”

1）產(chǎn)品定位

• 汽水音樂是一款音樂流媒體應(yīng)用，旨在與主要競爭對(duì)手如騰訊音樂和網(wǎng)易云音樂抗衡。
• 它不僅是一款單純的音樂播放軟件，還與抖音緊密結(jié)合，使得用戶可以在兩個(gè)平臺(tái)之間無縫切換音樂播放列表，顯現(xiàn)出對(duì)社交媒體和音樂流的綜合運(yùn)用。

2）用戶群體

• 汽水音樂的主要用戶群體是中國市場(chǎng)上的年輕用戶，尤其是那些已經(jīng)使用抖音并尋求更豐富音樂體驗(yàn)的用戶。
• 考慮到字節(jié)跳動(dòng)在短視頻領(lǐng)域的強(qiáng)大影響力，汽水音樂會(huì)吸引那些對(duì)新興、流行音樂以及個(gè)性化推薦感興趣的年輕群體。

3）主要功能流程

• 個(gè)性推薦：「這里“汽水音樂”通過算法推薦“個(gè)性電臺(tái)”、“歌單推薦”、“3個(gè)榜單”」
• 與社交媒體的整合：「能夠與用戶的抖音賬號(hào)同步，提供跨平臺(tái)的音樂體驗(yàn)。用戶可以在抖音中發(fā)現(xiàn)音樂，并在汽水音樂中繼續(xù)播放，反之亦然?！?/li>
• 播放：「汽水音樂的播放方式與抖音同步營造區(qū)分于其他音樂App不同的交互體驗(yàn)」

那么我們從卡片開始分析，卡片主要應(yīng)用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”

那么他們起到的作用分別是

• 提高用戶體驗(yàn)：「圓角卡片的設(shè)計(jì)通常比直角設(shè)計(jì)更柔和、更易于接受。這種設(shè)計(jì)能夠減少視覺疲勞，使應(yīng)用界面看起來更加友好和現(xiàn)代化?！?/li>
• 增強(qiáng)視覺吸引力：「圓角卡片因其流線型的外觀，在視覺上更加吸引用戶。這有助于提升用戶對(duì)應(yīng)用的整體印象和興趣?！?/li>
• 組織信息：「圓角卡片可以有效地將信息分組，如將不同的歌曲、專輯、播放列表等內(nèi)容區(qū)分開來，使得用戶瀏覽和選擇時(shí)更加直觀和方便?！?/li>
• 提升操作便捷性：「在觸摸屏上，圓角卡片可以提供更好的觸摸目標(biāo)，使得用戶在進(jìn)行選擇和導(dǎo)航時(shí)更加方便。」
• 增強(qiáng)內(nèi)容的層次感：「圓角卡片可以通過陰影、邊框或顏色的變化，為界面添加層次感，使得內(nèi)容更加突出和易于閱讀。」
• 提升品牌形象：「現(xiàn)代的界面設(shè)計(jì)往往傾向于使用圓角元素，使用這種設(shè)計(jì)可以使應(yīng)用看起來更加時(shí)尚，從而提升品牌形象?！?/li>
• 圓角卡片在提升用戶體驗(yàn)、美化界面、優(yōu)化信息展示和操作便利性等方面發(fā)揮著重要作用。這些設(shè)計(jì)元素有助于提高應(yīng)用的整體吸引力和用戶的使用滿意度。
  

“圓角按鈕”對(duì)于“汽水音樂”的作用有：

• 視覺焦點(diǎn)：「圓角按鈕可以作為視覺焦點(diǎn)，吸引用戶的注意力，特別是對(duì)于重要的功能，如播放按鈕或搜索按鈕?！?/li>
• 界面美觀性：「圓角按鈕增加了界面的美觀性，與整體設(shè)計(jì)風(fēng)格協(xié)調(diào)一致，提升了應(yīng)用的整體視覺效果?！?/li>
• 一致性和標(biāo)準(zhǔn)化：「在應(yīng)用中使用標(biāo)準(zhǔn)化的圓角按鈕可以提高界面的一致性，使用戶更容易理解和使用不同的功能?！?/li>

其實(shí)通過對(duì)比，我們會(huì)發(fā)現(xiàn)“圓角”在社交、音樂等偏娛樂方向采用的更加多，因?yàn)檫@些產(chǎn)品屬性需要“產(chǎn)品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向?qū)I(yè)領(lǐng)域、正式的場(chǎng)合以及一些小眾的產(chǎn)品。

四、總結(jié)

了解并應(yīng)用這些元素的特性，不僅能夠提升設(shè)計(jì)的美觀性，還能夠在更深層次上與用戶產(chǎn)生共鳴。作為UI設(shè)計(jì)師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達(dá)我們想要表達(dá)的信息，在了解簡單的形狀如何影響感知后，我們就可以有目的地進(jìn)行設(shè)計(jì)，將每一個(gè)微小的視覺元素加在一起，形成用戶潛意識(shí)中感知的一致、獨(dú)特的品牌個(gè)性。

排序在B端和C端產(chǎn)品中都比較常見，隨著用戶對(duì)產(chǎn)品使用的易用性提高，排序在產(chǎn)品交互中也在變化。本文分享B端拖動(dòng)排序的多種場(chǎng)景及交互，希望對(duì)你有所啟發(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ù)屬性，所以對(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)品中都比較常見，前期排序有通過點(diǎn)擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對(duì)產(chǎn)品使用的易用性提高，這種排序方式在產(chǎn)品交互中已經(jīng)漸漸的被舍棄。

目前對(duì)于排序功能，使用更多的是通過拖動(dòng)排序，通過選中數(shù)據(jù)后長按鼠標(biāo)右鍵，上下拖動(dòng)來完成數(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)長按停留在父級(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)景，下面我們就一起來看看不同組件在不同場(chǎng)景下的具體交互，通過實(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ù)行，長按鼠標(biāo)右鍵并拖動(dòng)數(shù)據(jù)上下移動(dòng)，被拖動(dòng)的數(shù)據(jù)原位置置灰（也可以直接消失）。

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

在一個(gè)產(chǎn)品從無到有的過程中，要做好產(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)比較簡單，沒有文件夾多級(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í)，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動(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)用，提高工作效率。

無論是對(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)長按停留在父級(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ù)需求列舉案例說明，因?yàn)榇藞?chǎng)景主要是針對(duì)交互和顯示，所以我就直接拿動(dòng)圖展示，便于大家理解。

交互規(guī)范有效地規(guī)定了產(chǎn)品如何與用戶進(jìn)行交互的規(guī)則和標(biāo)準(zhǔn)，這篇文章里，作者便梳理了B端產(chǎn)品的交互規(guī)范，一起來看看，或許會(huì)對(duì)產(chǎn)品經(jīng)理、產(chǎn)品開發(fā)人員、交互設(shè)計(jì)師等人群有所幫助。

序言

從業(yè)B端產(chǎn)品7年+，大大小小公司對(duì)交互規(guī)范有著不同的要求，但是萬變不離其宗，交互總有其底層規(guī)范要求，那么接下來跟大家詳細(xì)說明一下交互規(guī)范細(xì)則，超級(jí)詳細(xì)的交互規(guī)范來啦！

WHAT：交互規(guī)范是什么？

產(chǎn)品交互規(guī)范，也稱為界面交互規(guī)范或用戶界面規(guī)范，是一套規(guī)定產(chǎn)品如何與用戶進(jìn)行交互的規(guī)則和標(biāo)準(zhǔn)。它包括設(shè)計(jì)元素的布局、動(dòng)作反饋，以及對(duì)產(chǎn)品的使用流程和功能邏輯等各個(gè)方面的設(shè)定和控制。

交互規(guī)范重點(diǎn)在于人機(jī)交互的友好性和流暢性，用起來順手且符合商業(yè)目的就是交互規(guī)范最好的詮釋。

WHY：目的及意義

• 提高用戶體驗(yàn)：好的交互規(guī)范能夠幫助用戶更好地了解和使用產(chǎn)品，從而提高用戶體驗(yàn)。
• 提升開發(fā)效率：通過制定交互規(guī)范，可以使得設(shè)計(jì)師和開發(fā)者在開發(fā)過程中有明確的指導(dǎo)。
• 提升品牌形象：通過統(tǒng)一的交互規(guī)范，可以使得品牌的各個(gè)產(chǎn)品在交互方式上保持一致，從而提升品牌形象。

WHO：適合哪些讀者

產(chǎn)品經(jīng)理，產(chǎn)品開發(fā)人員，交互設(shè)計(jì)師，產(chǎn)品UI設(shè)計(jì)人員。

一、色彩

1. 色彩體系

分成兩個(gè)層面：系統(tǒng)級(jí)和產(chǎn)品級(jí)。

1）系統(tǒng)級(jí)色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn，螞蟻組件對(duì)整體交互規(guī)范有著細(xì)致且順滑的操作演示。假設(shè)公司內(nèi)部有專門的設(shè)計(jì)部門，可以設(shè)計(jì)部門整體定義公司色系以及字體等等。

2）產(chǎn)品級(jí)色彩體系進(jìn)一步去突出產(chǎn)品本身色彩調(diào)性以及功能屬性。

2. 產(chǎn)品級(jí)色彩體系

1）品牌色的應(yīng)用

品牌色體現(xiàn)產(chǎn)品以及品牌特色，加深使用者對(duì)品牌的印象。比如支付寶系列操作均是藍(lán)色為主，微信主色調(diào)為綠色和白色，抖音是黑色系。

B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升

B端產(chǎn)品經(jīng)理面臨的第一大挑戰(zhàn)，是如何正確的分析診斷業(yè)務(wù)問題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

2）功能色

功能色代表了明確的信息以及狀態(tài)，比如錯(cuò)誤提示，失敗提醒，成功提示等等。在一套產(chǎn)品體系下，功能色盡量保持一致，比如新增，刪除等功能按鈕色彩需要跟主題色保持一致。

3. 系統(tǒng)建議

公司重要對(duì)外宣傳系統(tǒng)以及內(nèi)部主系統(tǒng)均使用品牌色，突出公司特色；

另外一個(gè)頁面盡量不要超過3種顏色，并且是在同一標(biāo)準(zhǔn)色彩體系內(nèi)，盡量不要自己去色彩庫隨意選取色彩。

二、字體

1. 字體定義

字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。

在中后臺(tái)視覺體系中定義字體系統(tǒng)，我們建議從下面四個(gè)方面著手考慮：主字體，字階與行高，字重，字體顏色。

2. 主字體

為了保證在多數(shù)常用顯示器上的用戶閱讀效率最佳，根據(jù)電腦顯示器距離舒適度以及用戶觀感舒適度，確認(rèn)導(dǎo)航為16px，標(biāo)題為16px，正文為14px，說明為12px。

3. 字階與行高

字階是指不同尺寸的字體。行高就是一行字的高度，包裝在字體外的邊框盒子的高度。

建議的主要字體為 14，與之對(duì)應(yīng)的行高為 22。其余的字階的選擇可根據(jù)具體情況進(jìn)行自由的定義。建議在一個(gè)系統(tǒng)設(shè)計(jì)中，字階的選擇盡量控制在 3-5 種之間，就跟衣服搭配一樣，顏色不要過多，簡潔舒適為宜，字體字號(hào)在一個(gè)區(qū)間范圍內(nèi)。

4. 字重

字重為字體的粗細(xì)程度，建議用 regular 以及 medium 的兩種字體重量。

5. 字體顏色

黑色為主，正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。

三、對(duì)齊

文案類最好為左對(duì)齊，數(shù)字類最好為右對(duì)齊，表單類間距建議8px，文字右對(duì)齊，結(jié)尾沒有冒號(hào)。

四、按鈕

市面上比較主流的為這四種按鈕，主按鈕，線性按鈕，次按鈕和純文字按鈕。具體使用規(guī)則和使用場(chǎng)景如何呢？我們應(yīng)該從哪些方面下手去設(shè)計(jì)按鈕？下面給大家一一進(jìn)行解答。

1. 主按鈕

主按鈕為主要的按鈕。引導(dǎo)用戶進(jìn)行點(diǎn)擊操作，一個(gè)按鈕區(qū)域最多使用一個(gè)主按鈕。

場(chǎng)景應(yīng)用：可應(yīng)用于確認(rèn)、新增、保存等等，你想引導(dǎo)用戶做何操作，就可以把視覺焦點(diǎn)集中在哪個(gè)按鈕上。比如退款操作時(shí)，商家本質(zhì)希望用戶不退款，主按鈕為返回或是再想想的按鈕。

需要注意的是不要在同一個(gè)表單中使用多個(gè)主按鈕，1-2個(gè)即可，次按鈕或是線性按鈕多于5個(gè)時(shí)可以向上折疊收起。

2. 線性按鈕&次按鈕

線性按鈕&次按鈕兩種按鈕均可點(diǎn)擊，但是功能均弱于主按鈕。如果希望引導(dǎo)用戶進(jìn)行點(diǎn)擊，可以選擇線性按鈕；若希望用戶盡可能少點(diǎn)擊或是不點(diǎn)擊可以選擇次按鈕。

場(chǎng)景應(yīng)用：一般在大表單頁面批量導(dǎo)入，下載均為次按鈕或是線性按鈕。

3. 純文字按鈕

純文字按鈕就是有顏色的文字按鈕，可進(jìn)行點(diǎn)擊。

場(chǎng)景應(yīng)用：一般應(yīng)用于表單中大面積需要點(diǎn)擊的操作，比如查看，刪除，編輯等等，對(duì)表單中每一行進(jìn)行的操作。

4. 謹(jǐn)慎按鈕

謹(jǐn)慎按鈕用于特殊情況下防止誤操作的按鈕。

場(chǎng)景應(yīng)用：一般應(yīng)用于刪除/付款/退款/修改權(quán)限/移除等危險(xiǎn)操作，大部分都需要再次確認(rèn)才可以。

5. 按鈕順序

前面介紹了那么多種按鈕以及應(yīng)用場(chǎng)景，那么按鈕應(yīng)該如何進(jìn)行排列，需要遵循何種規(guī)則呢？

1）閱讀習(xí)慣

大家可以閉著眼睛想一下，正常我們閱讀的習(xí)慣是從左到右，從上到下，表單信息閱讀完畢后需要進(jìn)行操作，最好都放在右上方。

2）相關(guān)性原則

讓相關(guān)的操作按鈕更相近，比如上一步和下一步，保存和取消，增刪改查，讓這些兄弟按鈕距離挨得更近一些。

五、導(dǎo)航

導(dǎo)航是B端系統(tǒng)的地圖索引，幫助用戶可以順利到達(dá)目的地。導(dǎo)航對(duì)于B端產(chǎn)品交互而言，是系統(tǒng)之眼，一方面清晰展示系統(tǒng)結(jié)構(gòu)，另一方面幫助用戶快速找到他們想要的信息。好的導(dǎo)航清晰操作順滑，差的導(dǎo)航會(huì)讓用戶沒有二次進(jìn)入的想法，所以好的導(dǎo)航是系統(tǒng)成功的一半。

市面上主流的導(dǎo)航交互為全局導(dǎo)航和頁內(nèi)導(dǎo)航，好的導(dǎo)航如何進(jìn)行設(shè)計(jì)，我們需要選取哪種導(dǎo)航模式？繼續(xù)一起探索吧。

1. 全局導(dǎo)航

1）側(cè)邊豎向?qū)Ш?/strong>