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

背景

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

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

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é)看起來(lái)復(fù)雜很多，而且老師使用頻率很低，一般只有在學(xué)期剛開始，備課時(shí)設(shè)置，后期幾乎不再會(huì)進(jìn)行調(diào)整。

為了降低頁(yè)面復(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ì)來(lái)說(shuō)效率較高。由于人們總是會(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)。

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

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

3. 用戶

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

例如微信標(biāo)簽管理，進(jìn)入管理模式后，對(duì)于標(biāo)簽的排序，刪除都實(shí)時(shí)保存更新，沒(méi)有確認(rèn)按鈕。標(biāo)簽修改后的結(jié)果只會(huì)同步給自己，而自己在管理標(biāo)簽的過(guò)程已經(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ì)于用戶來(lái)說(shuō)只有信息的傳遞，沒(méi)有功能上的制約，甚至也不影響用戶行為目標(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)作者帶來(lái)流量和價(jià)值感，所以創(chuàng)作者會(huì)更重視文章內(nèi)容的完整性。而實(shí)時(shí)同步編輯過(guò)程所展示的內(nèi)容是不完整的，會(huì)影響讀者閱讀內(nèi)容的感受。所以點(diǎn)擊保存更新，統(tǒng)一同步內(nèi)容可以避免這些問(wèn)題的發(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í)更新。

再來(lái)看編輯者對(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ì)于老師來(lái)說(shuō)，重視程度一般。所以也可采用實(shí)時(shí)更新。

由于老師編輯章節(jié)或單元已有保存按鈕，如果管理模式還存在保存操作的話，對(duì)于編輯功能來(lái)說(shuō)需 2 次保存才算是真的保存，理解成本過(guò)高。選擇實(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ì)者來(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)橐呱瘫?，所以需要使用社?？?，之前我記得社保結(jié)算都需要去人工窗口，我剛過(guò)去就被一個(gè)穿著紅馬褂的大媽攔住說(shuō)自助機(jī)也可以用社保，要我掃她胸前掛的碼（可以快速到達(dá)電子社保二維碼界面），掃完她就開始幫我點(diǎn)擊操作。

她覺得我應(yīng)該不會(huì)操作，所以讓我看一遍，其實(shí)這個(gè)操作并不難，只是因?yàn)槲也恢雷灾鷻C(jī)上可以用，自助機(jī)周圍也沒(méi)引導(dǎo)操作流程。而且她這種方式讓很多年紀(jì)大的人和外地過(guò)來(lái)看病的覺得你是個(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ǔ)、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。

例如：第一張圖飛書文檔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ù)纳舷挛闹?，特別是要靠近交互的主體。

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è)人覺得也算是一種，點(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è)交互層次的有效方法。

謝謝觀看！

在視頻播放器中，合理的手勢(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)行了解讀，一起來(lái)看。

一、前言

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

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

那么如何在保留用戶對(duì)于常規(guī)通用手勢(shì)認(rèn)知的基礎(chǔ)上，進(jìn)一步對(duì)視頻場(chǎng)景中的手勢(shì)交互進(jìn)行擴(kuò)容升級(jí)？這也是我們接下來(lái)在手勢(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ù)，即用戶通過(guò)某一基礎(chǔ)手勢(shì)發(fā)出交互信號(hào)，系統(tǒng)收到信號(hào)確認(rèn)后便可立即執(zhí)行任務(wù)，但整個(gè)過(guò)程是線性的，手勢(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)行綜合考量。

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

1. 項(xiàng)目背景

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

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

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

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

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

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

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

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

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

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

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

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

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

2）容錯(cuò)性兼容

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

3）易用性打磨

差異化的創(chuàng)新設(shè)計(jì)形式在前期總會(huì)面臨質(zhì)疑和挑戰(zhàn)，本次項(xiàng)目也不例外。我們擔(dān)心用戶能否接受并認(rèn)知「長(zhǎng)按+滑選」組合手勢(shì)的操作形式，于是在DEMO開發(fā)完成后便進(jìn)行了一次小范圍內(nèi)的定性可用性測(cè)試，以預(yù)期在上線前可先收集一波體驗(yàn)問(wè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è)試訪談的過(guò)程中，被測(cè)用戶在進(jìn)行1至2次嘗試操作之后，均可掌握如何使用「長(zhǎng)按+滑選」的組合手勢(shì)，這也為我們?cè)鎏砹瞬簧傩判摹?/p>

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

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

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

② 支持跟手觸發(fā)

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

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

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

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

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

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

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

手勢(shì)交互是用戶在現(xiàn)實(shí)世界行為的映射，無(wú)論是基礎(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)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。

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

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

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

五、結(jié)語(yǔ)

便捷手勢(shì)的設(shè)計(jì)出發(fā)點(diǎn)是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費(fèi)。希望本次基于視頻播放器場(chǎng)景的手勢(shì)體驗(yàn)設(shè)計(jì)實(shí)踐能給大家?guī)?lái)幫助和啟發(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)行了拆解分析，一起來(lái)看一下。

一、引言

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

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

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

二、按鈕的基本要素

1. 按鈕的定義和功能

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

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

2. 按鈕的類型和分類

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

• 確認(rèn)按鈕：用于確認(rèn)用戶的輸入或操作，通常為綠色或藍(lán)色。
• 取消按鈕：用于取消用戶的輸入或操作，通常為紅色或灰色。
• 導(dǎo)航按鈕：用于跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面的一部分，通常為下拉箭頭或回車鍵。
• 搜索按鈕：用于在網(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)品可用性非常重要。一般來(lái)說(shuō)，按鈕應(yīng)該位于用戶視線的中心位置，以便于用戶快速訪問(wèn)。同時(shí)，按鈕的大小也應(yīng)該適中，不要過(guò)大或過(guò)小，以免影響用戶的操作。

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

• 根據(jù)頁(yè)面布局來(lái)確定按鈕的位置和大小，通常將按鈕放置在頁(yè)面的中央位置，并根據(jù)頁(yè)面元素的大小和間距來(lái)進(jìn)行調(diào)整。
• 根據(jù)用戶行為來(lái)確定按鈕的位置和大小，例如，將常用的按鈕放在頁(yè)面的頂部或底部，以便于用戶快速訪問(wèn)。
• 根據(jù)設(shè)備屏幕大小來(lái)確定按鈕的位置和大小，例如，在移動(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ī)則：通過(guò)調(diào)整按鈕之間的間距來(lái)增加可讀性和可操作性，例如，可以設(shè)置相鄰按鈕之間的間距為20像素。
• 文字排版規(guī)則：通過(guò)調(diào)整按鈕文字的大小、顏色、字體等方式來(lái)提高可讀性和美觀度。

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

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

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

• 單色按鈕：使用單一的顏色作為按鈕背景，適用于簡(jiǎn)單明了的場(chǎng)景。
• 漸變色按鈕：使用漸變色作為按鈕背景，可以增加視覺效果和層次感。
• 反色按鈕：使用與背景形成鮮明對(duì)比的顏色作為按鈕背景，可以提高可讀性和可操作性。
• 白色按鈕：使用白色作為按鈕背景，適用于簡(jiǎn)潔明了的場(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)品可用性非常重要。一般來(lái)說(shuō)，按鈕文字應(yīng)該簡(jiǎn)潔明了、易于理解和記憶，同時(shí)要符合產(chǎn)品的品牌形象和主題風(fēng)格。

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

• 簡(jiǎn)短明了：按鈕文字應(yīng)該簡(jiǎn)短明了，不要過(guò)于冗長(zhǎ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)容簡(jiǎn)潔明了：標(biāo)簽內(nèi)容應(yīng)該簡(jiǎn)潔明了，不要過(guò)于復(fù)雜，以便于用戶快速理解和操作。
• 標(biāo)簽位置合理：標(biāo)簽的位置應(yīng)該合理，不要遮擋按鈕的主要內(nèi)容，也不要過(guò)于靠近邊緣，以免誤觸。
• 標(biāo)簽樣式統(tǒng)一：標(biāo)簽的樣式應(yīng)該統(tǒng)一，不要出現(xiàn)多種不同的字體、顏色或樣式，以保持界面的整潔和一致性。
• 標(biāo)簽語(yǔ)義明確：標(biāo)簽的語(yǔ)義應(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)畫效果和過(guò)渡效果

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

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

• 漸變色：將按鈕的背景顏色漸變?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)品中存在的問(wè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)化策略和技巧：

• 簡(jiǎn)化設(shè)計(jì)：將按鈕的設(shè)計(jì)簡(jiǎn)化到最少，只保留必要的信息和功能，以便于用戶快速理解和操作。
• 提供反饋：為按鈕提供及時(shí)、準(zhǔn)確的反饋，讓用戶知道他們的操作是否成功，以增強(qiáng)用戶的感知和滿意度。
• 增加互動(dòng)性：通過(guò)動(dòng)畫效果、過(guò)渡效果等方式增加按鈕的互動(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)品的滿意度和忠誠(chéng)度。

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

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

在當(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)最早由德國(guó)心理學(xué)家沃爾夫?qū)?middot;科勒在1929年提出。

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

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

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

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

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

在一個(gè)產(chǎn)品從無(wú)到有的過(guò)程中，要做好產(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í)大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺形狀和語(yǔ)音上”。

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

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

1. 圓角

1）定義

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

2）特性

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

2. 直角

1）定義

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

2）特性

• 專業(yè)感：「直角通常給人一種更加正式、專業(yè)的印象。」
• 清晰界定：「直角在視覺上提供了清晰的界定，使元素的邊界更加明確，有助于信息的組織和分隔?！?/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)格，同樣字體搭配也是相似的效果，通過(guò)不同的banner可以大致看出運(yùn)營(yíng)活動(dòng)的大致目的。

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

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

1. 按鈕

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

1）圓角按鈕

• 用戶友好性：「圓角按鈕通?？雌饋?lái)更加友好和容易接近，它們給用戶一種溫饌和舒適的感覺，適合于鼓勵(lì)用戶交互的場(chǎng)景?！?/li>
• 移動(dòng)設(shè)備適應(yīng)性：「在移動(dòng)設(shè)備上，由于屏幕尺寸較小，圓角按鈕更易于觸控，尤其是屏幕邊緣的按鈕?！?/li>
• 減少視覺沖擊：「圓角可以減少視覺上的尖銳感，使界面看起來(lái)更加柔和，適合于尋求輕松視覺體驗(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)容，尤其是在需要用戶做出明確決策的界面上?！?/li>

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

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

1）觸控面積

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

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

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

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

2. 卡片

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

1）圓角卡片

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

2）直角卡片

• 視覺風(fēng)格：「直角卡片提供了一種清晰、專業(yè)的視覺效果。它們的直線和銳角創(chuàng)造了一種結(jié)構(gòu)化和有序的外觀?！?/li>
• 用戶體驗(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)，或任何需要清晰展示大量信息的界面?！?/li>
• 功能效果：「直角卡片在功能上有助于清楚地區(qū)分和組織內(nèi)容，特別是在數(shù)據(jù)密集或信息密集的應(yīng)用中?！?/li>

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

通過(guò)上述對(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)部?jī)?nèi)容的關(guān)注。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，它們還使得很難判斷兩條邊屬于哪個(gè)矩形。這是因?yàn)槊總€(gè)矩形邊都是一條直線。圓角矩形的邊是獨(dú)特的，因?yàn)榫€條朝著它所屬的矩形彎曲。

三、案例分析

那么對(duì)于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂(lè)”這兩個(gè)產(chǎn)品來(lái)分析看一下這兩個(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è)更加公平和直接的購(gòu)買渠道，通常涵蓋了品牌與設(shè)計(jì)師和藝術(shù)家的合作款，以及特別版的運(yùn)動(dòng)鞋。

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

1）產(chǎn)品定位

• 獨(dú)家發(fā)售平臺(tái)：「CONFIRMED 專注于提供 Adidas 的獨(dú)家發(fā)售和限量版產(chǎn)品，特別是鞋類和高端服裝。它的目標(biāo)是成為品牌與其最忠實(shí)粉絲之間的直接連接點(diǎn)」
• 品牌營(yíng)銷工具：「通過(guò)這個(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)研究工具，通過(guò)分析用戶行為和購(gòu)買模式來(lái)更好地理解目標(biāo)市場(chǎng)?！?/li>

2）用戶群體

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

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è)人信息和選擇購(gòu)買尺碼等?！?/li>
• 抽簽結(jié)果通知：「抽簽結(jié)束后，用戶會(huì)收到是否中簽的通知。如果中簽，用戶將有機(jī)會(huì)購(gòu)買這些限量產(chǎn)品?！?/li>
• 購(gòu)買和支付：「中簽用戶可以在應(yīng)用程序內(nèi)完成購(gòu)買流程，包括支付和選擇配送選項(xiàng)?！?/li>
• 社區(qū)互動(dòng)和內(nèi)容：「CONFIRMED 還可能提供與品牌相關(guān)的內(nèi)容，如設(shè)計(jì)師訪談、品牌故事等，以增強(qiáng)用戶參與和品牌忠誠(chéng)度?！?/li>

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

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

4）功能展示

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

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

5）突出的功能

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

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

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

7）視覺引導(dǎo)

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

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

2. 汽水音樂(lè)

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

1）產(chǎn)品定位

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

2）用戶群體

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

3）主要功能流程

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

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

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

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

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

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

其實(shí)通過(guò)對(duì)比，我們會(huì)發(fā)現(xiàn)“圓角”在社交、音樂(lè)等偏娛樂(lè)方向采用的更加多，因?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á)的信息，在了解簡(jiǎn)單的形狀如何影響感知后，我們就可以有目的地進(jìn)行設(shè)計(jì)，將每一個(gè)微小的視覺元素加在一起，形成用戶潛意識(shí)中感知的一致、獨(dú)特的品牌個(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)圖展示，便于大家理解。

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

序言

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

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ī)交互的友好性和流暢性，用起來(lái)順手且符合商業(yè)目的就是交互規(guī)范最好的詮釋。

WHY：目的及意義

• 提高用戶體驗(yàn)：好的交互規(guī)范能夠幫助用戶更好地了解和使用產(chǎn)品，從而提高用戶體驗(yàn)。
• 提升開發(fā)效率：通過(guò)制定交互規(guī)范，可以使得設(shè)計(jì)師和開發(fā)者在開發(fā)過(guò)程中有明確的指導(dǎo)。
• 提升品牌形象：通過(guò)統(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ù)問(wèn)題。 這也是最難的部分，產(chǎn)品設(shè)計(jì)知識(shí)對(duì)這部分工作基本沒(méi)有幫助，如果想做好業(yè)務(wù)分析診斷，必須具備扎實(shí) ...

查看詳情 >

2）功能色

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

3. 系統(tǒng)建議

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

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

二、字體

1. 字體定義

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

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

2. 主字體

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

3. 字階與行高

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

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

4. 字重

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

5. 字體顏色

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

三、對(duì)齊

文案類最好為左對(duì)齊，數(shù)字類最好為右對(duì)齊，表單類間距建議8px，文字右對(duì)齊，結(jié)尾沒(méi)有冒號(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)用：一般在大表單頁(yè)面批量導(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ì)讓用戶沒(méi)有二次進(jìn)入的想法，所以好的導(dǎo)航是系統(tǒng)成功的一半。

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

1. 全局導(dǎo)航

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