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

背景

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

設計問題：

1. 操作功能入口放在哪里？
2. 是實時保存同步，還是點擊確認按鈕保存同步？
3. 樹結構下的排序如何設計？

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

最開始想到的就是放在章節(jié)單元后，增加更多 icon，用戶點擊更多進行章節(jié)單元的編輯刪除，拖拽直接調整排序?？墒沁@種設計方式讓章節(jié)看起來復雜很多，而且老師使用頻率很低，一般只有在學期剛開始，備課時設置，后期幾乎不再會進行調整。

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

二、是實時保存同步，還是點擊確認按鈕保存同步？

1. 實時保存

實時保存就是用戶的每一步操作都會立即生效。比如一些標題的編輯，鼠標hover上去會展示輸入框，光標消失即保存成功?；蛘咧蹙庉嬑恼聲r，也會告訴你保存中。

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

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

2. 確認按鈕保存

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

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

為什么用戶在編輯時會有心理壓力？重點就在于同步給誰，以及同步的內容是什么。

3. 用戶

內容修改后只同步給自己。

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

內容修改后會同步給其他用戶。

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

以上可以總結為，如果內容修改后只同步給自己，則實時保持更便捷。如果內容修改后會同步給其他用戶，則需考慮增加確認按鈕讓操作行為更謹慎。具體還需考慮內容本身。

4. 內容

如果內容對其他用戶影響不大，也可以使用實時更新。

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

編輯者對于內容的重視程度。

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

三、我的方案

回到自己的產品上，老師對于章節(jié)的管理操作會同步給學生，調整結果會影響學生查看章節(jié)結構。作為學生，主要任務是完成章節(jié)或者單元下的學習活動。所以調整的內容并不影響學生完成學習任務，按照我們所總結的規(guī)則，內容對于同步者影響不大，可以使用實時更新。

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

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

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

最后

以上是我對于工作內容中關于管理模式的復盤思考，最終設計方案的產出還是需要結合自己產品的業(yè)務，在體驗和功能的權衡之下做出最合理的設計。

關于第三部分排序放在下次在寫….

大部分產品中都含有一些引導幫助的功能，這些功能有什么作用呢？對于設計者來說，應該秉持怎樣的初心來設計呢？目前，引導幫助功能又有哪些常見的分類呢？帶著這些問題，我們一起走進這篇文章，看看作者為我們的分享。推薦相關人員閱讀與學習。

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

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

因為要走商保，所以需要使用社?？?，之前我記得社保結算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保，要我掃她胸前掛的碼（可以快速到達電子社保二維碼界面），掃完她就開始幫我點擊操作。

她覺得我應該不會操作，所以讓我看一遍，其實這個操作并不難，只是因為我不知道自助機上可以用，自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。

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

邀請就是引導用戶進行操作前的提醒和暗示，通常包括實時的提示信息和預期功能，以表明在當前界面或下個界面可以做什么，這是成功的交互式界面關鍵所在。

例如：飛書-我的空間，當鼠標停留在可編輯區(qū)域上時，就會實時地顯示邀請（復選框），這個例子的缺點是鼠標如果不處于相應區(qū)域上，就不會顯示邀請。

另一種方案是任何時候都顯示邀請，例如：石墨文檔-我的桌面，復選框一直顯示。

二、靜態(tài)邀請

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

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

1. 引導操作邀請

01 步驟引導

例如：華為云HECS服務器產品就給出1、2、3操作步驟

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

02 白板引導

另一種引導操作邀請叫白板式引導。

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

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

2. 漫游探索邀請

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

最佳實踐：

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

三、動態(tài)邀請

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

1. 懸停邀請：在鼠標懸停期間發(fā)出邀請

吸引用戶的一種方式是通過鼠標懸停來顯示邀請

例如：飛書消息列表鼠標移入后， 背景變化的同時會有一個“勾”圖標來吸引用戶，鼠標移入上去后提示可以點擊完成，點擊后消息移除列表。

最佳實踐

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

2. 預期功能邀請：使用熟悉的事物引出新事物

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

例如：第一張圖飛書文檔sheet頁“加號”圖標與第二張圖“三個點”圖標，就是一種預期功能邀請。用戶沒觸發(fā)之前就能猜到觸發(fā)后會是什么效果。

預期功能邀請之所以有效，是因為利用人們已知的習慣與認知引入交互，從而讓用戶順利完成一連串操作。

最佳實踐

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

3. 推論邀請：用于交互期間

設計邀請時怎么才能猜測用戶的想法，也是一項重要挑戰(zhàn)。如果用戶下一步可能會執(zhí)行多種操作，而事實上又不可能準確判斷用戶想法，那么面臨的困難就會比想象的大很多。

在google sketchup （ 3D）繪圖工具中，當鼠標點擊某個點后，進行第二個點連接時，會有多種可能性，這個時候系統(tǒng)也不確定用戶會怎樣連接，但會給出對應的提示，比如：端點、中點、背面、側面等點位來輔助用戶進行連接。

例如：這種工作流場景個人覺得也算是一種，點擊“加號”右側會滑出面板，給出你可以添加的動作。

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

4. 更多內容邀請：用于邀請用戶查看更多內容

圖片類型的更多邀請，例如：站酷相關推薦

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

5. 邀請的優(yōu)點

精心設計的應用能夠通過邀請體現(xiàn)出各自的細微差別，無論是靜態(tài)還是動態(tài)，都是引導用戶順利進入下一個交互層次的有效方法。

謝謝觀看！

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

一、前言

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

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

那么如何在保留用戶對于常規(guī)通用手勢認知的基礎上，進一步對視頻場景中的手勢交互進行擴容升級？這也是我們接下來在手勢進階交互上的重點探索方向。

本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。

二、什么是「組合手勢」

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

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

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

「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。

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

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

1. 項目背景

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

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

2. 競品調研及選型

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

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

3. 設計方案

1）長按手勢交互擴容

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

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

那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。

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

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

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

2）容錯性兼容

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

3）易用性打磨

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

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

測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。

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

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

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

② 支持跟手觸發(fā)

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

③ 實時提示及響應反饋

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

4. 方案上線及驗證

以AB實驗對本次設計方案進行定量測試驗證：

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

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

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

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

5. 二期擴展方案

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

四、「組合手勢」拓展探索

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

以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。

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

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

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

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

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

五、結語

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

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

一、引言

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

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

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

二、按鈕的基本要素

1. 按鈕的定義和功能

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

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

2. 按鈕的類型和分類

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

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

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

三、按鈕的布局和位置

1. 按鈕的位置和大小

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

在實際設計中，可以通過以下幾種方式來確定按鈕的位置和大小：

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

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

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

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

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

按鈕的顏色對于用戶體驗和產品可用性非常重要。一般來說，按鈕的顏色應該與產品的品牌色或主題色相匹配，以便于用戶識別和記憶。同時，按鈕的顏色也應該具有明顯的對比度，以便于用戶在不同的背景下快速找到目標按鈕。

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

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

2. 按鈕樣式的設計要點

除了顏色之外，按鈕的樣式設計也是非常重要的。合理的樣式設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕樣式設計要點：

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

五、按鈕的文字和標簽

1. 按鈕文字的設計原則

按鈕文字的設計對于用戶體驗和產品可用性非常重要。一般來說，按鈕文字應該簡潔明了、易于理解和記憶，同時要符合產品的品牌形象和主題風格。

以下是一些常見的按鈕文字設計原則：

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

2. 按鈕標簽的設計要點

除了文字之外，按鈕標簽也是非常重要的。合理的標簽設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕標簽設計要點：

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

六、按鈕的交互設計

1. 按鈕的點擊效果和反饋機制

按鈕的交互設計對于用戶體驗和產品可用性非常重要。合理的點擊效果和反饋機制可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕點擊效果和反饋機制：

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

2. 按鈕的動畫效果和過渡效果

除了點擊效果之外，按鈕的動畫效果和過渡效果也可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕動畫效果和過渡效果：

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

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

1. 按鈕測試的方法和流程

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

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

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

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

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

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

八、總結

按鈕UX設計對于提高產品的用戶體驗和可用性非常重要。合理的按鈕設計可以增加用戶的參與度、趣味性和便利性，從而提高用戶對產品的滿意度和忠誠度。

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

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

在當今數(shù)字化時代，UI設計已成為創(chuàng)造引人入勝的用戶體驗的關鍵要素。一個成功的UI設計不僅需要技術知識，還需要對細微之處的深刻理解。本文將探討兩種基礎但極為重要的圖形元素：圓角和直角。它們如何影響用戶的感知和互動，如何在設計中恰到好處地應用它們，以及它們在實際案例中的運用。

一、圓角與直角的特性

在介紹“圓角與直角”前，先給大家分享一個心理效應“bouba/kiki效應。”

這個效應最早由德國心理學家沃爾夫岡·科勒在1929年提出。

• “kiki”這個詞的尖銳、快速的音調與尖銳的星狀圖案相呼應
• “bouba”這個詞的圓潤、流暢的聲音則與圓潤的云狀圖案相呼應

最早在1929年沃爾夫岡·科勒做了一個實驗，該實驗展示了兩種形式，并詢問讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒有明確說明，科勒暗示人們強烈傾向于將鋸齒狀形狀與“takete”配對，將圓形形狀與“maluma”配對。

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

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

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

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

查看詳情 >

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

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

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

1. 圓角

1）定義

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

2）特性

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

2. 直角

1）定義

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

2）特性

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

那么回想一下“bouba/kiki效應”，今后在設計中當我們看到某個產品大量的使用“直角/圓角”我們就可以分辨這個產品的大致風格，同樣字體搭配也是相似的效果，通過不同的banner可以大致看出運營活動的大致目的。

二、圓角、直角的使用場景

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

1. 按鈕

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

1）圓角按鈕

• 用戶友好性：「圓角按鈕通常看起來更加友好和容易接近，它們給用戶一種溫饌和舒適的感覺，適合于鼓勵用戶交互的場景。」
• 移動設備適應性：「在移動設備上，由于屏幕尺寸較小，圓角按鈕更易于觸控，尤其是屏幕邊緣的按鈕。」
• 減少視覺沖擊：「圓角可以減少視覺上的尖銳感，使界面看起來更加柔和，適合于尋求輕松視覺體驗的應用。」

2）直角按鈕

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

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

我們從兩個方面來解答

1）觸控面積

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

2）視覺感知與觸控體驗

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

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

2. 卡片

對于卡片我們還是先對比，在進行詳細的分析。

1）圓角卡片

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

2）直角卡片

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

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

通過上述對比我們可以得到一個結論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內信息”這是因為圓角向內指向矩形的中心。這會將焦點放在矩形內的內容上。當兩個矩形彼此相鄰時，還可以輕松查看哪條邊屬于哪個矩形。尖角向外，從而減少對矩形內部內容的關注。當兩個矩形彼此相鄰時，它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的，因為線條朝著它所屬的矩形彎曲。

三、案例分析

那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產品來分析看一下這兩個產品對于“直角、圓角”的應用。

1. CONFIRMED

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

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

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

1）產品定位

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

2）用戶群體

• 潮流愛好者：「對最新潮流和設計保持關注的消費者，他們追求限量版、獨家合作系列?！?/li>
• Adidas 忠實粉絲：「品牌的忠實支持者，對于品牌的新產品和特別發(fā)售保持高度興趣?！?/li>
• 運動鞋收藏家：「對于限量版運動鞋有收藏價值的消費者，這些人往往愿意為獨特和罕見的設計支付高價?！?/li>

3）主要功能流程

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

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

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

4）功能展示

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

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

5）突出的功能

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

6）風格統(tǒng)一

使用直角按鈕可以與應用中其他直角設計元素（如卡片）保持視覺一致性，為用戶提供一致且簡潔的視覺體驗。

7）視覺引導

這些按鈕通常配有“CONFIRMED”的顏色（藍色），用于引導用戶的注意力，幫助他們快速識別應用程序中的不同功能。

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

2. 汽水音樂

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

1）產品定位

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

2）用戶群體

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

3）主要功能流程

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

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

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

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

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

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

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

四、總結

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

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

很久沒有更新B端產品相關的文章了，近期工作項目中做了很多新需求，接觸了更多業(yè)務，也學到了一些新的交互，后續(xù)將會根據(jù)我在實際工作項目中遇到的需求展開總結。

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

這一期主要分享關于B端產品中拖動排序功能。

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

目前對于排序功能，使用更多的是通過拖動排序，通過選中數(shù)據(jù)后長按鼠標右鍵，上下拖動來完成數(shù)據(jù)的排序。

一、拖動排序的多種組件和交互

在B端產品中，我目前接觸的拖動排序的組件包含以下兩個大類：

1. 一級目錄常規(guī)排序（非樹結構）
2. 樹組件多層級排序

對于分類2【樹組件多層級排序】又包含兩個小類：

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

對于小分類【跨層級排序】又可以細分為四個場景：

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

二、拖動排序場景和交互實操

上面已經(jīng)總結了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設計詳細介紹拖動排序的功能。

1. 一級目錄常規(guī)排序（非樹結構）

數(shù)據(jù)默認展示類似列表數(shù)據(jù)一樣，平鋪左對齊排版，當拖動排序時，鼠標移動到需要排序的數(shù)據(jù)行，長按鼠標右鍵并拖動數(shù)據(jù)上下移動，被拖動的數(shù)據(jù)原位置置灰（也可以直接消失）。

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

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

查看詳情 >

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

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

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

需求場景1：產品業(yè)務中有很多的表單，表單中的字段順序在不同企業(yè)中不同，應該如何設計呢？

在設計時，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動排序。

需求場景2：飛書中有多個應用，對于每個用戶而言，自己所關注的應用不同，優(yōu)先級不同，該如何設計？

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

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

2. 樹組件多層級排序

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

樹組件同層級排序默認展示和拖動時效果與一級目錄常規(guī)排序一致。

（2）跨層級排序

父級未展開時：拖動到父級、父級整行高亮

如下圖，當需要把文件夾【數(shù)據(jù)名稱顯示004】放在【數(shù)據(jù)名稱顯示003】文件夾中，鼠標拖動數(shù)據(jù)放在【數(shù)據(jù)名稱顯示003】時，【數(shù)據(jù)名稱顯示003】整行會出現(xiàn)藍色高亮，表示被拖動的數(shù)據(jù)即將放在該文件夾內。

父級未展開時：拖動長按停留在父級時，父級自動展開子級。

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

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

如下圖，在上圖基礎上，當鼠標繼續(xù)拖動數(shù)據(jù)，想要放在二級目錄中時，數(shù)據(jù)一級目錄同樣會顯示高亮，告訴用戶當前數(shù)據(jù)的層級關系。

同時，二級數(shù)據(jù)中會出現(xiàn)藍色高亮分割線，標識被拖動的數(shù)據(jù)即將放的位置，這樣就能清晰的知道被拖動的數(shù)據(jù)將放在那個目錄的那個位置。

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

當需要將數(shù)據(jù)拖動到二級文件夾內時，只需要高亮二級文件夾即可。

關于樹組件多層級排序的使用場景和交互比較復雜，上面我根據(jù)不同場景分別列出了交互展示方式，下面再根據(jù)實際業(yè)務需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。

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

序言

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

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

產品交互規(guī)范，也稱為界面交互規(guī)范或用戶界面規(guī)范，是一套規(guī)定產品如何與用戶進行交互的規(guī)則和標準。它包括設計元素的布局、動作反饋，以及對產品的使用流程和功能邏輯等各個方面的設定和控制。

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

WHY：目的及意義

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

WHO：適合哪些讀者

產品經(jīng)理，產品開發(fā)人員，交互設計師，產品UI設計人員。

一、色彩

1. 色彩體系

分成兩個層面：系統(tǒng)級和產品級。

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

2）產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。

2. 產品級色彩體系

1）品牌色的應用

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

B端產品經(jīng)理的能力模型與學習提升

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

查看詳情 >

2）功能色

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

3. 系統(tǒng)建議

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

另外一個頁面盡量不要超過3種顏色，并且是在同一標準色彩體系內，盡量不要自己去色彩庫隨意選取色彩。

二、字體

1. 字體定義

字體是體系化界面設計中最基本的構成之一。

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

2. 主字體

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

3. 字階與行高

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

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

4. 字重

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

5. 字體顏色

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

三、對齊

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

四、按鈕

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

1. 主按鈕

主按鈕為主要的按鈕。引導用戶進行點擊操作，一個按鈕區(qū)域最多使用一個主按鈕。

場景應用：可應用于確認、新增、保存等等，你想引導用戶做何操作，就可以把視覺焦點集中在哪個按鈕上。比如退款操作時，商家本質希望用戶不退款，主按鈕為返回或是再想想的按鈕。

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

2. 線性按鈕&次按鈕

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

場景應用：一般在大表單頁面批量導入，下載均為次按鈕或是線性按鈕。

3. 純文字按鈕

純文字按鈕就是有顏色的文字按鈕，可進行點擊。

場景應用：一般應用于表單中大面積需要點擊的操作，比如查看，刪除，編輯等等，對表單中每一行進行的操作。

4. 謹慎按鈕

謹慎按鈕用于特殊情況下防止誤操作的按鈕。

場景應用：一般應用于刪除/付款/退款/修改權限/移除等危險操作，大部分都需要再次確認才可以。

5. 按鈕順序

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

1）閱讀習慣

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

2）相關性原則

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

五、導航

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

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

1. 全局導航

1）側邊豎向導航

使用規(guī)則：

• 適用于企業(yè)級產品，尤其是較為復雜且操作較為繁瑣的系統(tǒng)，比如人力系統(tǒng)，CRM系統(tǒng)，ERP系統(tǒng)等等；
• 建議1-3個層級使用，可以承載多個層級；
• 建議6-8以上菜單使用，可以承載多個菜單。

需要特別注意豎向導航的排列順序，較為復雜的企業(yè)級系統(tǒng)從上到下一般依次為：

1. 首頁（工作臺、駕駛倉）：主要展示整體系統(tǒng)主要功能入口以及一些主要數(shù)據(jù)，內容信息等等。
2. 主要功能菜單：主要展示系統(tǒng)較為重要的功能菜單，比如人力系統(tǒng)展示入職管理，活水管理，離職管理等等。
3. 數(shù)據(jù)統(tǒng)計（數(shù)據(jù)記錄）：主要展示較為重要的數(shù)據(jù)統(tǒng)計或是數(shù)據(jù)記錄，比如客服系統(tǒng)的在線會話記錄，在線會話統(tǒng)計，外呼記錄、外呼統(tǒng)計等等。
4. 系統(tǒng)配置：主要展示系統(tǒng)內部的功能配置，權限配置等等，比如人力系統(tǒng)的人員配置，菜單配置等等。
5. 消息中心（幫助中心）：主要展示系統(tǒng)內部消息，意見反饋，幫助中心等等，比如發(fā)貨系統(tǒng)中連接上下游的發(fā)貨信息，數(shù)據(jù)下載消息通知，服務更新通知等等。

優(yōu)點：

• 多層級，拓展性較好，可以支持多欄目多菜單；
• 導航為固定形式，用戶在操作和瀏覽時可以快速定位和回到首頁，操作效率高；
• 左側導航可以進行收縮，可擴大頁面寬度。

缺點：

層級入口較多時，用戶下鉆縱深體驗稍差。

2）頂部橫向導航

使用規(guī)則：

• 適用于較為簡單的企業(yè)級系統(tǒng)或是官網(wǎng)，欄目較少，可以給用戶更好的沉浸式體驗；
• 建議1-3個以內層級使用，可以承載多個層級；
• 建議2-6以內菜單使用，菜單字數(shù)需要去適應整體屏幕的寬度；
• 需要特別注意的是橫向菜單從左到右，權重依次減少。

優(yōu)點：

• 整體頁面排版較為簡單，方便用戶輕便操作；
• 用戶能做沉浸式體驗，體驗感較好。

缺點：

• 承載內容有限，層級拓展性較差；
• 橫向中文或是英文命名需要受整體屏幕寬度的限制。

2. 頁內導航

1）面包屑

面包屑幫助定位菜單以及返回菜單，可以顯示當前頁面的路徑，是比較常用的導航方式。

使用規(guī)則：

顯示當前頁面路徑，方便用戶進行返回操作，最好大于等于3個層級進行使用；

2）Tab

使用規(guī)則：

較常應用于顯示頁面不同內容構成，比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。

3）步驟條

使用規(guī)則：

較常應用于一步步按照某種提示去完成任務，任務有明確的先后順序；步驟一般為1-5步。

結語

產品交互規(guī)范的內容模塊還是較多的，希望這篇文章對你的產品交互能力有所提升！另外交互規(guī)范是產品架構的基礎的地基，具體樓房蓋成什么樣還需要用心去思考以及借助公司內部UI和UE的力量。

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

前段時間有個產品童鞋，他剛加我就問了一大串問題。

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

作為一個熱心好學、樂于助人的產品仔，我當然和他暢聊了一個多小時，順便總結下聊天內容。

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

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

別急，我們花幾分鐘，先來嘮嘮什么是模式。

一、什么是模式？

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

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

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

舉個例子：

簡單說下行為模式，它分為了“習慣模式、消費模式、學習模式”等等。

苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。

但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~

什么是B端產品經(jīng)理？和C端產品經(jīng)理有什么區(qū)別？

B端產品經(jīng)理中的B是Business，商業(yè)的意思，B端產品經(jīng)理首先就要理解這個職位的重要性，要設計出更適合這個項目需求的產品方案，B最終產品經(jīng)理在日常工作中...

查看詳情 >

掌握模式，有什么用？

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

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

二、C 端交互設計的 7 種常見模式

我們試著再舉個例子，加深下對模式的理解，順便學學交互設計。

什么是交互？

簡單來說，交互指的是在互聯(lián)網(wǎng)領域中，人、機之間的一系列互動過程。

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

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

學完就能用，趕緊卷起來~

有人就問了，還有更多交互模式嗎？

確實可以有，等我有時間再編幾個。。

話說回來，如果是一些特別復雜的業(yè)務規(guī)則，可能會涉及到 N 個交互模式的任意組合。

1. 導航模式

常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。

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

上面這張圖中，包含了幾種導航組件呢？

2. 搜索模式

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

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

打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。

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

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

3. 反饋模式

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

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

4. 輸入模式

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

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

5. 編輯模式

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

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

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

6. 分享模式

我們在看到一些干貨文章，或好用的小程序想要轉發(fā)給朋友，那就要用到分享模式。

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

7. 引導模式

引導模式和反饋模式有點像，都是展示特定的內容。

那怎么分辨它們呢？

以設計師視角來看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動顯示。

而要讓用戶特別關注的信息，那就是引導模式。

三、總結

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

說了這么多概念和例子，你是不是對模式的認知更清晰了呢？

模式運用在產品領域，就有了這 7 種交互模式，分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。

如果學會了模式，那么無論生活還是工作，相信你一定能輕松應對、事半功倍。

關于動效節(jié)奏的問題，有什么好的方法可以提供？這算一個常見疑問，我總結收到的問題反饋，基本都是「動畫節(jié)奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」，索性借著今天的契機，我整理了這樣一篇主題文章，分享我對于動效節(jié)奏的一點經(jīng)驗與思考，僅代表個人觀點，歡迎交流探討～

在當今數(shù)字時代，動效設計已然成為了產品和服務中不可或缺的一部分。

無論是手機APP、網(wǎng)頁界面還是智能設備，動效設計或是引導用戶操作的微小提示，或是增強用戶體驗的交互反饋，又或是塑造品牌形象的視覺元素，它們都以其獨特的方式，為用戶帶來更加直觀、生動的互動體驗，因此流暢的觀感體驗很重要。

提到流暢度，那動效節(jié)奏的重要性不言而喻。

動效節(jié)奏，簡單來說是動態(tài)呈現(xiàn)中各個元素動作的速度和時長安排，它決定了動效的快慢、強弱、起伏和變化，從而影響著用戶的感知和情緒。

一個優(yōu)秀的動效設計，不僅要考慮單個元素的動效表現(xiàn)，更要考慮整個界面的動效節(jié)奏，使界面動效更加自然、流暢，也更加符合用戶的心理預期，從而提升用戶體驗。

所以，想入門動效領域并深耕，我認為深入理解動效節(jié)奏是尤為重要的，學會如何運用動效節(jié)奏來提升用戶體驗，讓用戶在享受科技帶來便捷的同時，也能感受到藝術的魅力。

一、動效設計基礎認知

1. 動效設計在用戶體驗中的價值

動效可以增強界面的可理解性，例如下圖中廣告推送，有一個手機圖標的旋轉動態(tài)示例，

以及多多視頻模塊中的上滑操作指引等，幫助用戶更好地理解界面功能和操作方式，從而更有效地去使用應用。

動效可以提升界面的可用性，例如上傳文件的操作，通過提供及時的反饋和指引，降低用戶的學習成本和操作難度。

動效還可以增加界面的吸引力，例如購物軟件中模擬實際鞋盒開箱的形式，展現(xiàn)鞋品，通過生動有趣的動效表現(xiàn)，提升用戶的使用欲望和滿意度。

2. 簡述動效設計的基本原理與最佳實踐

提到動效設計，了解其背后的基本概念和原則，才是賦予動效靈魂和意義的關鍵。

如何定義B端產品及B端產品經(jīng)理方法論

相較于C端產品，B端產品最大的特點是：面向特定領域用戶，且數(shù)量少得多，但更注重對用戶專業(yè)領域操作流程的深度挖掘——也就是專業(yè)性更強，與業(yè)務的結合更緊密。

查看詳情 >

這里要提到三個關鍵詞：

1）首先是時間

時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節(jié)奏，從而影響用戶的情感體驗。

例如，一個緩慢漸入的動畫可能傳達出優(yōu)雅、穩(wěn)重的感覺；

而一個迅速閃現(xiàn)的動畫則可能帶來刺激、緊張的感受。

2）其次是空間

空間是指動畫發(fā)生和存在的虛擬環(huán)境。在動效設計中，空間的布局、層次和透視關系都至關重要。

它們不僅影響動畫的可視性和可讀性，還影響用戶的認知和行為。

例如，合理的空間布局可以使用戶更容易理解和操作界面元素，而不合理的布局則可能導致用戶的困惑和誤操作。

3）最后是構圖

構圖是指動畫元素的排列組合和視覺平衡。

一個良好的構圖可以突出重點、引導視線，并營造出和諧、統(tǒng)一的視覺效果。

相反，一個糟糕的構圖可能會分散用戶的注意力，甚至引發(fā)視覺疲勞。

動效設計的目標不僅僅是實現(xiàn)技術上的可能性，更是為了創(chuàng)造出讓用戶愉悅、滿意且易于使用的體驗，在美感和技術要求之間尋找平衡點，是我認為需要不斷練習，積累總結經(jīng)驗的。

二、關鍵要素：動效節(jié)奏

在動效設計中，能讓靜態(tài)元素動起來形成生動流暢的動態(tài)效果，需要用到兩大元素：關鍵幀與動效節(jié)奏。

1. 關鍵幀

關鍵幀代表了在特定時間點上某個參數(shù)的值。在動效制作過程中，通過設置關鍵幀，可以控制對象在不同時間點的狀態(tài)，從而形成連續(xù)的動作。

關鍵幀就像是動效世界里的路標，它標記了在動效呈現(xiàn)中某些重要時刻物體的樣子。比如說，我想讓一個球跳起來，那我就得告訴電腦，在開始的時候球在地上，然后在某個瞬間球在空中最高點，最后又回到地面；這些重要的時刻就是關鍵幀。

關鍵幀之間的變化可以是線性的，也可以是曲線的，后者可以創(chuàng)造出更為自然和復雜的動態(tài)效果。

2. 常見的四種動效節(jié)奏形式

線性或曲線變化，統(tǒng)稱動效節(jié)奏，是指在一定時間內，通過一系列有規(guī)律的動效元素的組合和排列所產生的節(jié)奏感。

常見的四種動效節(jié)奏形式有 勻速、緩入、緩出、緩動。

1）勻速（Linear）

勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節(jié)奏簡單直接，沒有加速或減速的過程。

上面的小球彈跳呈現(xiàn)的效果，就是勻速運動，有些機械，缺乏實際場景中的動感。

在AE中，默認的菱形關鍵幀之間就是勻速運動，例如生活中常見的時鐘，上圖中鐘表秒針旋轉是平穩(wěn)、機械的，這就是一個典型的勻速運動。

2）緩入（Ease In）

緩入是指物體在動畫開始時速度較慢，隨著時間的推移逐漸加速到最大速度的運動方式。

一般元素離開畫面或者物體加速階段使用，例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節(jié)奏等，它可以增加動畫的真實感和生動性。

在AE中，以圓球為例，從空中下落的過程，就可以使用緩入的加速曲線；

調出圖表編輯器，調節(jié)曲線弧度如圖「速度圖表」所示，使曲線開始時平緩，越靠近出點速度逐漸上升，完成加速運動，此時結尾有些生硬。

加一個小知識點：曲線調節(jié)有兩種形式，一種為速度圖表，一種為值圖表；

速度圖表顧名思義，看曲線的弧度，圖中球的開始入點曲線弧度較緩，結尾出點曲線斜度較大，則代表加速度節(jié)奏變化；

值圖表分別代表X，Y軸曲線變化，如圖中球的Y軸位置發(fā)生變化，因此對應綠色線條的曲度變化是球體的動效節(jié)奏變化，下落過程中加速，則區(qū)別于前半段的直線，入點平滑，出點更陡峭。

3）緩出（Ease Out）

緩出與緩入相反，是指物體在動畫結束時速度逐漸減慢直至停止的運動方式，如元素入畫、人物行走至停下等，它能給人一種平滑和自然的結束感，是先快后慢的減速運動。

同樣以圓球為例，球落地后反彈的過程，就可以使用緩出的減速曲線；
調出圖表編輯器，調節(jié)曲線弧度如圖「速度圖表」所示，使曲線結束時平緩，調節(jié)出點的手柄桿，完成減速運動。

4）緩動（Ease In Ease Out）

緩動是最接近真實世界物體運動規(guī)律的一種方式，適用于大多數(shù)動態(tài)場景，尤其是那些需要表現(xiàn)自然、流暢動作的畫面呈現(xiàn)。

緩動曲線結合了緩入和緩出的特點，物體在動畫開始時速度緩慢上升，中間達到最高速度，最后在結束時速度逐漸降低。

示例繼續(xù)完善小球的曲線節(jié)奏，我想讓它看起來更順滑、更有彈跳感覺，通過球的大小比例（縮放）的變化，增加模糊變化的細節(jié)，這樣球跳起來的動作就會像真實世界里那樣，既有起跳的沖勁，又有落地的緩沖，整個過程更加生動有趣。

在AE中，緩動曲線沒有具體的數(shù)值，多數(shù)時候需要結合不同場景表達，去嘗試不同的曲度形式，通過反復預覽檢驗，找到自己滿意、適合畫面感呈現(xiàn)的形式。

3. 刻意練習-節(jié)奏感積累

日常積累動效節(jié)奏，我會分析電影或MG動畫中的經(jīng)典鏡頭，比如角色走路、跑步的動作呈現(xiàn)，元素的出入場變化，以及自然界中的運動現(xiàn)象，如樹葉飄落等。

多做分鏡腳本的拆分練習，多臨摹實踐，就可以逐漸掌握常見的運動規(guī)律，自己在做設計內容時，也可以更清晰知道怎樣的節(jié)奏更適合當下場景呈現(xiàn)。

三、結論

總的來說，創(chuàng)造流暢體驗對于動效設計來說還是很重要的，而要實現(xiàn)這一目標，掌握并靈活運用好動效節(jié)奏則是必不可少的手段之一。

萬變不離其宗，多看、多思考、多練習，通過實踐去總結復盤規(guī)律、梳理SOP流程，整理出一套適合自己記憶、使用的方法論與行動標準，提高自己對動態(tài)的感知，以及節(jié)奏力的把控，也能有效提升工作效率。

「想不如做，知行合一」，想讓學到的知識和技巧，生長到自身，唯一要做的就是立馬行動！在做的過程中解決一個個卡點，迭代出更適合自己的方法。

作者：設計師豆?jié){
鏈接：https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

蘭亭妙微(www.363858.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan