1. 什么是SUS ？
SUS 全稱 System Usability Scale ，系統(tǒng)可用性量表。SUS最初是Brooke于1986年編制，可以科學(xué)地量化用戶體驗(yàn)，用于完成一系列任務(wù)場(chǎng)景后，對(duì)產(chǎn)品或系統(tǒng)整體宏觀的感知可用性測(cè)量。
一款產(chǎn)品無(wú)到有，產(chǎn)品經(jīng)理需要做些什么？
在視頻播放器中，合理的手勢(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ì)」是基于常規(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)行綜合考量。
百度APP視頻場(chǎng)景早期的播控功能較少，如“視頻下載”等個(gè)別特色功能入口一般都融合于基礎(chǔ)菜單之中。
隨著后續(xù)視頻場(chǎng)景的功能建設(shè)日漸完善，我們便在基礎(chǔ)菜單面板中拓展了一行視頻菜單，專門用于承載視頻場(chǎng)景特有的播控功能。但當(dāng)前播控功能已達(dá)10余項(xiàng)，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無(wú)章且觸發(fā)成本高。
通過(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ā)特定播控功能。
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è)階段分別為：
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開(kāi)發(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ī)制。
以AB實(shí)驗(yàn)對(duì)本次設(shè)計(jì)方案進(jìn)行定量測(cè)試驗(yà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)的整體收益是大于折損的。
隨著長(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ì)交互是用戶在現(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ò)容探索。
“小窗播放”旨在退出當(dāng)前視頻落地頁(yè)、并可將當(dāng)前視頻切換成以懸浮視窗的形式進(jìn)行延續(xù)消費(fèi)。
基于用戶的此種操控意圖，我們以“右滑返回手勢(shì)”發(fā)出交互信號(hào)而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢(shì)”的行為來(lái)判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗(yàn)的連續(xù)性。
“雙指拖拽手勢(shì)”可拖拽并清屏視窗畫面，以此手勢(shì)發(fā)出交互信號(hào)，若在“雙指拖拽手勢(shì)”基礎(chǔ)上有識(shí)別到“雙指擴(kuò)張手勢(shì)”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗(yàn)。
便捷手勢(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)。
作者：百度APP用戶體驗(yàn)
來(lái)源公眾號(hào)：百度MEUX（ID：baidumeux），百度移動(dòng)生態(tài)用戶體驗(yàn)設(shè)計(jì)中心，負(fù)責(zé)百度移動(dòng)生態(tài)體系的用戶/商業(yè)產(chǎn)品的全鏈路體驗(yàn)設(shè)計(jì)。
本文由人人都是產(chǎn)品經(jīng)理合作媒體 @百度MEUX 授權(quán)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
按鈕是產(chǎn)品中十分常見(jiàn)的交互元素之一，好的按鈕設(shè)計(jì)可以很大程度地提升用戶體驗(yàn)。那么，怎么打造出符合用戶需求、深受用戶喜愛(ài)的優(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)力。
按鈕是一種用戶界面元素，用于觸發(fā)特定的操作或行為。
它可以是文本、圖像或交互式元素，通常位于頁(yè)面的底部或頂部，以便于用戶快速訪問(wèn)。
根據(jù)不同的用途和設(shè)計(jì)風(fēng)格，按鈕可以分為多種類型和分類，例如：
以上僅是一些常見(jiàn)的按鈕類型和分類，實(shí)際上還有很多其他的類型和分類。在設(shè)計(jì)按鈕時(shí)，需要根據(jù)具體的場(chǎng)景和目的選擇合適的類型和分類，并結(jié)合用戶體驗(yàn)和產(chǎn)品需求進(jìn)行優(yōu)化。
按鈕的位置和大小對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕應(yīng)該位于用戶視線的中心位置，以便于用戶快速訪問(wèn)。同時(shí)，按鈕的大小也應(yīng)該適中，不要過(guò)大或過(guò)小，以免影響用戶的操作。
在實(shí)際設(shè)計(jì)中，可以通過(guò)以下幾種方式來(lái)確定按鈕的位置和大小：
除了位置和大小之外，按鈕的布局方式和排版規(guī)則也非常重要。合理的布局方式和排版規(guī)則可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。以下是一些常見(jiàn)的按鈕布局方式和排版規(guī)則：
按鈕的顏色對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕的顏色應(yīng)該與產(chǎn)品的品牌色或主題色相匹配，以便于用戶識(shí)別和記憶。同時(shí)，按鈕的顏色也應(yīng)該具有明顯的對(duì)比度，以便于用戶在不同的背景下快速找到目標(biāo)按鈕。
以下是一些常見(jiàn)的按鈕顏色選擇原則：
除了顏色之外，按鈕的樣式設(shè)計(jì)也是非常重要的。合理的樣式設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕樣式設(shè)計(jì)要點(diǎn)：
按鈕文字的設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。一般來(lái)說(shuō)，按鈕文字應(yīng)該簡(jiǎn)潔明了、易于理解和記憶，同時(shí)要符合產(chǎn)品的品牌形象和主題風(fēng)格。
以下是一些常見(jiàn)的按鈕文字設(shè)計(jì)原則：
除了文字之外，按鈕標(biāo)簽也是非常重要的。合理的標(biāo)簽設(shè)計(jì)可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕標(biāo)簽設(shè)計(jì)要點(diǎn)：
按鈕的交互設(shè)計(jì)對(duì)于用戶體驗(yàn)和產(chǎn)品可用性非常重要。合理的點(diǎn)擊效果和反饋機(jī)制可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕點(diǎn)擊效果和反饋機(jī)制：
除了點(diǎn)擊效果之外，按鈕的動(dòng)畫效果和過(guò)渡效果也可以提高用戶的使用體驗(yàn)和產(chǎn)品的可用性。
以下是一些常見(jiàn)的按鈕動(dòng)畫效果和過(guò)渡效果：
按鈕的測(cè)試和優(yōu)化對(duì)于提高產(chǎn)品的用戶體驗(yàn)和可用性非常重要。合理的測(cè)試和優(yōu)化策略可以發(fā)現(xiàn)并解決產(chǎn)品中存在的問(wèn)題，提高產(chǎn)品的品質(zhì)和用戶滿意度。
以下是一些常見(jiàn)的按鈕測(cè)試方法和流程：
除了測(cè)試之外，按鈕優(yōu)化也是提高產(chǎn)品用戶體驗(yàn)和可用性的重要手段。以下是一些常見(jiàn)的按鈕優(yōu)化策略和技巧：
按鈕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)品開(kāi)發(fā)和用戶體驗(yàn)設(shè)計(jì)都具有重要的意義和必要性。
本文由 @MO魚山寨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
將大東西進(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年提出。
最早在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)中拉馬錢德蘭和 愛(ài)德華·哈伯德使用“kiki”和“bouba”這兩個(gè)詞重復(fù)了科勒的實(shí)驗(yàn)，詢問(wèn)美國(guó)大學(xué)本科生和印度講泰米爾語(yǔ)的人，“這些形狀中哪個(gè)是bouba，哪個(gè)是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。
這個(gè)效應(yīng)主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”
那么我們不妨擴(kuò)展一下，把這這種效應(yīng)延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽(tīng)名字“羊”和“狼”就可以潛意識(shí)的認(rèn)為“喜羊羊”就相當(dāng)于“bouba”、“灰太狼”相當(dāng)于“kiki”，“羊族”一聽(tīng)就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛(ài)愛(ài)的卡通人物”大部分就是以圓形為基礎(chǔ)“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級(jí)大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”。
如果聽(tīng)完這些你還是不懂，那么最簡(jiǎn)單的例子一個(gè)堪比吳彥祖的帥哥叫“文軒沒(méi)有大腦袋”，那當(dāng)你見(jiàn)到他時(shí)一定會(huì)去觀察這個(gè)人到底有沒(méi)有“大腦袋”
那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進(jìn)行UI思考，就可以大致了解“圓角與直角”大致的特性
1）定義
2）特性
1）定義
2）特性
那么回想一下“bouba/kiki效應(yīng)”，今后在設(shè)計(jì)中當(dāng)我們看到某個(gè)產(chǎn)品大量的使用“直角/圓角”我們就可以分辨這個(gè)產(chǎn)品的大致風(fēng)格，同樣字體搭配也是相似的效果，通過(guò)不同的banner可以大致看出運(yùn)營(yíng)活動(dòng)的大致目的。
在實(shí)際的使用場(chǎng)景中，我們就從最常見(jiàn)的“按鈕、卡片”兩個(gè)場(chǎng)景來(lái)舉例分析“圓角、直角”的作用。
我們首先具體聚焦在UI設(shè)計(jì)中對(duì)于“按鈕”這一元素的圓角和直角的使用：
1）圓角按鈕
2）直角按鈕
那么這里我們會(huì)有一個(gè)疑問(wèn)，那就是“移動(dòng)設(shè)備適應(yīng)性”，這里我們可能會(huì)想到“直角按鈕”的面積看起來(lái)要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？
我們從兩個(gè)方面來(lái)解答
1）觸控面積
2）視覺(jué)感知與觸控體驗(yàn)
通過(guò)這兩方面，我們是不是又能聯(lián)想到“bouba/kiki效應(yīng)”，介于“圓角本身的屬性”我們會(huì)更容易去點(diǎn)擊他。
對(duì)于卡片我們還是先對(duì)比，在進(jìn)行詳細(xì)的分析。
1）圓角卡片
2）直角卡片
這里更要值得注意的一點(diǎn)是視覺(jué)效果方面的“圓角對(duì)于用戶的視覺(jué)效果要強(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)用。
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)品定位
2）用戶群體
3）主要功能流程
這里我們先從“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ì)元素（如卡片）保持視覺(jué)一致性，為用戶提供一致且簡(jiǎn)潔的視覺(jué)體驗(yàn)。
7）視覺(jué)引導(dǎo)
這些按鈕通常配有“CONFIRMED”的顏色（藍(lán)色），用于引導(dǎo)用戶的注意力，幫助他們快速識(shí)別應(yīng)用程序中的不同功能。
這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應(yīng)用中的應(yīng)用可能主要體現(xiàn)在其用戶界面的設(shè)計(jì)上，通過(guò)清晰、有序的布局和直觀的用戶交互，提升用戶的體驗(yàn)。
提到“汽水音樂(lè)”大家都不陌生，前段是時(shí)間各大“rapper、流行歌手”發(fā)歌都在汽水，這個(gè)App是可以和抖音聯(lián)動(dòng)的，所以播放音樂(lè)的模式?jīng)]有采用大家常見(jiàn)的“點(diǎn)歌、切歌”操作，而是換成隨機(jī)曲子和“抖音”向下滑動(dòng)切換一樣，這樣既新穎又能容易使用戶養(yǎng)成操作習(xí)慣，不至于一下子新的交互方式無(wú)法適應(yīng)。那么我們同樣從“產(chǎn)品定位、用戶群體、主要功能來(lái)分析”
1）產(chǎn)品定位
2）用戶群體
3）主要功能流程
那么我們從卡片開(kāi)始分析，卡片主要應(yīng)用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂(lè)盲盒”
那么他們起到的作用分別是
“圓角按鈕”對(duì)于“汽水音樂(lè)”的作用有：
其實(shí)通過(guò)對(duì)比，我們會(huì)發(fā)現(xiàn)“圓角”在社交、音樂(lè)等偏娛樂(lè)方向采用的更加多，因?yàn)檫@些產(chǎn)品屬性需要“產(chǎn)品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向?qū)I(yè)領(lǐng)域、正式的場(chǎng)合以及一些小眾的產(chǎn)品。
了解并應(yīng)用這些元素的特性，不僅能夠提升設(shè)計(jì)的美觀性，還能夠在更深層次上與用戶產(chǎn)生共鳴。作為UI設(shè)計(jì)師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達(dá)我們想要表達(dá)的信息，在了解簡(jiǎn)單的形狀如何影響感知后，我們就可以有目的地進(jìn)行設(shè)計(jì)，將每一個(gè)微小的視覺(jué)元素加在一起，形成用戶潛意識(shí)中感知的一致、獨(dú)特的品牌個(gè)性。
本文由 @文軒沒(méi)有大腦袋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)授權(quán)，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
排序在B端和C端產(chǎn)品中都比較常見(jià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)目中遇到的需求展開(kāi)總結(jié)。
B端產(chǎn)品設(shè)計(jì)具有較高的業(yè)務(wù)屬性，所以對(duì)于ui設(shè)計(jì)師而言也需要有較強(qiáng)的業(yè)務(wù)知識(shí)，在完全理解需求后，再針對(duì)業(yè)務(wù)場(chǎng)景、用戶體驗(yàn)、交互、布局合理、易用性等多維度展開(kāi)設(shè)計(jì)。
這一期主要分享關(guān)于B端產(chǎn)品中拖動(dòng)排序功能。
排序在B端和C端產(chǎn)品中都比較常見(jià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ù)的排序。
在B端產(chǎn)品中，我目前接觸的拖動(dòng)排序的組件包含以下兩個(gè)大類：
對(duì)于分類2【樹(shù)組件多層級(jí)排序】又包含兩個(gè)小類：
對(duì)于小分類【跨層級(jí)排序】又可以細(xì)分為四個(gè)場(chǎng)景：
上面已經(jīng)總結(jié)了排序的組件和場(chǎng)景，下面我們就一起來(lái)看看不同組件在不同場(chǎng)景下的具體交互，通過(guò)實(shí)際項(xiàng)目設(shè)計(jì)詳細(xì)介紹拖動(dòng)排序的功能。
數(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ù)原位置置灰（也可以直接消失）。
同時(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í)樹(shù)狀結(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)排序的交互。
（1）同層級(jí)排序（橫線高亮顯示即將放的位置）
樹(shù)組件同層級(jí)排序默認(rèn)展示和拖動(dòng)時(shí)效果與一級(jí)目錄常規(guī)排序一致。
（2）跨層級(jí)排序
父級(jí)未展開(kāi)時(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í)未展開(kāi)時(shí)：拖動(dòng)長(zhǎng)按停留在父級(jí)時(shí)，父級(jí)自動(dòng)展開(kāi)子級(jí)。
如下圖，按照上面的步驟拖動(dòng)時(shí)，當(dāng)鼠標(biāo)一直停留在【數(shù)據(jù)名稱顯示003】的位置時(shí)，該文件夾會(huì)自動(dòng)展開(kāi)二級(jí)目錄，這是一個(gè)拖動(dòng)排序比較友好的交互，可以讓用戶再次看到該目錄下的數(shù)據(jù)結(jié)構(gòu)，并快速一次性選擇需要放的位置。
父級(jí)已展開(kāi)時(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í)已展開(kāi)時(shí)：拖動(dòng)到子級(jí)文件夾時(shí)，父級(jí)不需要高亮，子級(jí)文件夾目錄整行高亮（子級(jí)已展開(kāi)和未展開(kāi)的交互與父級(jí)同理）。
當(dāng)需要將數(shù)據(jù)拖動(dòng)到二級(jí)文件夾內(nèi)時(shí)，只需要高亮二級(jí)文件夾即可。
關(guān)于樹(shù)組件多層級(jí)排序的使用場(chǎng)景和交互比較復(fù)雜，上面我根據(jù)不同場(chǎng)景分別列出了交互展示方式，下面再根據(jù)實(shí)際業(yè)務(wù)需求列舉案例說(shuō)明，因?yàn)榇藞?chǎng)景主要是針對(duì)交互和顯示，所以我就直接拿動(dòng)圖展示，便于大家理解。
本文由 @設(shè)計(jì)小余 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
交互規(guī)范有效地規(guī)定了產(chǎn)品如何與用戶進(jìn)行交互的規(guī)則和標(biāo)準(zhǔn)，這篇文章里，作者便梳理了B端產(chǎn)品的交互規(guī)范，一起來(lái)看看，或許會(huì)對(duì)產(chǎn)品經(jīng)理、產(chǎn)品開(kāi)發(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：目的及意義
WHO：適合哪些讀者
產(chǎn)品經(jīng)理，產(chǎn)品開(kāi)發(fā)人員，交互設(shè)計(jì)師，產(chǎn)品UI設(shè)計(jì)人員。
分成兩個(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)性以及功能屬性。
1）品牌色的應(yīng)用
品牌色體現(xiàn)產(chǎn)品以及品牌特色，加深使用者對(duì)品牌的印象。比如支付寶系列操作均是藍(lán)色為主，微信主色調(diào)為綠色和白色，抖音是黑色系。
2）功能色
功能色代表了明確的信息以及狀態(tài)，比如錯(cuò)誤提示，失敗提醒，成功提示等等。在一套產(chǎn)品體系下，功能色盡量保持一致，比如新增，刪除等功能按鈕色彩需要跟主題色保持一致。
公司重要對(duì)外宣傳系統(tǒng)以及內(nèi)部主系統(tǒng)均使用品牌色，突出公司特色；
另外一個(gè)頁(yè)面盡量不要超過(guò)3種顏色，并且是在同一標(biāo)準(zhǔn)色彩體系內(nèi)，盡量不要自己去色彩庫(kù)隨意選取色彩。
字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。
在中后臺(tái)視覺(jué)體系中定義字體系統(tǒng)，我們建議從下面四個(gè)方面著手考慮：主字體，字階與行高，字重，字體顏色。
為了保證在多數(shù)常用顯示器上的用戶閱讀效率最佳，根據(jù)電腦顯示器距離舒適度以及用戶觀感舒適度，確認(rèn)導(dǎo)航為16px，標(biāo)題為16px，正文為14px，說(shuō)明為12px。
字階是指不同尺寸的字體。行高就是一行字的高度，包裝在字體外的邊框盒子的高度。
建議的主要字體為 14，與之對(duì)應(yīng)的行高為 22。其余的字階的選擇可根據(jù)具體情況進(jìn)行自由的定義。建議在一個(gè)系統(tǒng)設(shè)計(jì)中，字階的選擇盡量控制在 3-5 種之間，就跟衣服搭配一樣，顏色不要過(guò)多，簡(jiǎn)潔舒適為宜，字體字號(hào)在一個(gè)區(qū)間范圍內(nèi)。
字重為字體的粗細(xì)程度，建議用 regular 以及 medium 的兩種字體重量。
黑色為主，正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。
文案類最好為左對(duì)齊，數(shù)字類最好為右對(duì)齊，表單類間距建議8px，文字右對(duì)齊，結(jié)尾沒(méi)有冒號(hào)。
市面上比較主流的為這四種按鈕，主按鈕，線性按鈕，次按鈕和純文字按鈕。具體使用規(guī)則和使用場(chǎng)景如何呢？我們應(yīng)該從哪些方面下手去設(shè)計(jì)按鈕？下面給大家一一進(jìn)行解答。
主按鈕為主要的按鈕。引導(dǎo)用戶進(jìn)行點(diǎn)擊操作，一個(gè)按鈕區(qū)域最多使用一個(gè)主按鈕。
場(chǎng)景應(yīng)用：可應(yīng)用于確認(rèn)、新增、保存等等，你想引導(dǎo)用戶做何操作，就可以把視覺(jué)焦點(diǎn)集中在哪個(gè)按鈕上。比如退款操作時(shí)，商家本質(zhì)希望用戶不退款，主按鈕為返回或是再想想的按鈕。
需要注意的是不要在同一個(gè)表單中使用多個(gè)主按鈕，1-2個(gè)即可，次按鈕或是線性按鈕多于5個(gè)時(shí)可以向上折疊收起。
線性按鈕&次按鈕兩種按鈕均可點(diǎn)擊，但是功能均弱于主按鈕。如果希望引導(dǎo)用戶進(jìn)行點(diǎn)擊，可以選擇線性按鈕；若希望用戶盡可能少點(diǎn)擊或是不點(diǎn)擊可以選擇次按鈕。
場(chǎng)景應(yīng)用：一般在大表單頁(yè)面批量導(dǎo)入，下載均為次按鈕或是線性按鈕。
純文字按鈕就是有顏色的文字按鈕，可進(jìn)行點(diǎn)擊。
場(chǎng)景應(yīng)用：一般應(yīng)用于表單中大面積需要點(diǎn)擊的操作，比如查看，刪除，編輯等等，對(duì)表單中每一行進(jìn)行的操作。
謹(jǐn)慎按鈕用于特殊情況下防止誤操作的按鈕。
場(chǎng)景應(yīng)用：一般應(yīng)用于刪除/付款/退款/修改權(quán)限/移除等危險(xiǎn)操作，大部分都需要再次確認(rèn)才可以。
前面介紹了那么多種按鈕以及應(yīng)用場(chǎng)景，那么按鈕應(yīng)該如何進(jìn)行排列，需要遵循何種規(guī)則呢？
1）閱讀習(xí)慣
大家可以閉著眼睛想一下，正常我們閱讀的習(xí)慣是從左到右，從上到下，表單信息閱讀完畢后需要進(jìn)行操作，最好都放在右上方。
2）相關(guān)性原則
讓相關(guān)的操作按鈕更相近，比如上一步和下一步，保存和取消，增刪改查，讓這些兄弟按鈕距離挨得更近一些。
導(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）側(cè)邊豎向?qū)Ш?/strong>
使用規(guī)則：
需要特別注意豎向?qū)Ш降呐帕许樞?，較為復(fù)雜的企業(yè)級(jí)系統(tǒng)從上到下一般依次為：
優(yōu)點(diǎn)：
缺點(diǎn)：
層級(jí)入口較多時(shí)，用戶下鉆縱深體驗(yàn)稍差。
2）頂部橫向?qū)Ш?/strong>
使用規(guī)則：
優(yōu)點(diǎn)：
缺點(diǎn)：
1）面包屑
面包屑幫助定位菜單以及返回菜單，可以顯示當(dāng)前頁(yè)面的路徑，是比較常用的導(dǎo)航方式。
使用規(guī)則：
顯示當(dāng)前頁(yè)面路徑，方便用戶進(jìn)行返回操作，最好大于等于3個(gè)層級(jí)進(jìn)行使用；
2）Tab
使用規(guī)則：
較常應(yīng)用于顯示頁(yè)面不同內(nèi)容構(gòu)成，比如人力詳情頁(yè)顯示Tab欄為基礎(chǔ)信息、公司任職信息、獎(jiǎng)懲信息等等。
3）步驟條
使用規(guī)則：
較常應(yīng)用于一步步按照某種提示去完成任務(wù)，任務(wù)有明確的先后順序；步驟一般為1-5步。
產(chǎn)品交互規(guī)范的內(nèi)容模塊還是較多的，希望這篇文章對(duì)你的產(chǎn)品交互能力有所提升！另外交互規(guī)范是產(chǎn)品架構(gòu)的基礎(chǔ)的地基，具體樓房蓋成什么樣還需要用心去思考以及借助公司內(nèi)部UI和UE的力量。
本文由 @月亮漫談 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在互聯(lián)網(wǎng)領(lǐng)域中，人機(jī)之間的互動(dòng)過(guò)程就是交互。交互也有一些可預(yù)測(cè)的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見(jiàn)的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時(shí)間有個(gè)產(chǎn)品童鞋，他剛加我就問(wèn)了一大串問(wèn)題。
什么是模式（Pattern）？什么是模版（Template）？這兩個(gè)概念有什么區(qū)別？
作為一個(gè)熱心好學(xué)、樂(lè)于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個(gè)多小時(shí)，順便總結(jié)下聊天內(nèi)容。
你是不是也經(jīng)常在生活工作中，碰到類似“行為模式、設(shè)計(jì)模式、語(yǔ)言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區(qū)別，搞懂了又有什么用？
別急，我們花幾分鐘，先來(lái)嘮嘮什么是模式。
可預(yù)測(cè)、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過(guò)歸納總結(jié)，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見(jiàn)的商業(yè)模式、營(yíng)銷模式、行為模式、數(shù)學(xué)模式、語(yǔ)言模式等。
舉個(gè)例子：
簡(jiǎn)單說(shuō)下行為模式，它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。
苦逼打工仔普遍的消費(fèi)模式，一般是工作日花錢少，到了周末都愛(ài)到商場(chǎng)逛街和購(gòu)物。
但又有特例，我有個(gè)朋友就特別宅，他只喜歡在上班的時(shí)候，摸魚逛淘寶下單，簡(jiǎn)直離譜~
掌握模式，有什么用？
當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個(gè)好處。
我們?cè)囍倥e個(gè)例子，加深下對(duì)模式的理解，順便學(xué)學(xué)交互設(shè)計(jì)。
什么是交互？
簡(jiǎn)單來(lái)說(shuō)，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機(jī)之間的一系列互動(dòng)過(guò)程。
我還提煉了 3 種常見(jiàn)模式（簡(jiǎn)單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。
現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。
學(xué)完就能用，趕緊卷起來(lái)~
有人就問(wèn)了，還有更多交互模式嗎？
確實(shí)可以有，等我有時(shí)間再編幾個(gè)。。
話說(shuō)回來(lái)，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會(huì)涉及到 N 個(gè)交互模式的任意組合。
常見(jiàn)的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是，告知用戶當(dāng)前在網(wǎng)站的位置，以及接下來(lái)到哪些頁(yè)面，這有點(diǎn)像地圖 APP。
上面這張圖中，包含了幾種導(dǎo)航組件呢？
搜索，是各大電商 APP 常見(jiàn)的交互模式。
搜索模式允許用戶輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。
打個(gè)比方，這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號(hào)、名稱、年齡。
常見(jiàn)的反饋模式組件，涉及了對(duì)話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場(chǎng)景是，告知用戶一些信息或提示，比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時(shí)，你新增了一個(gè)收貨地址。
打開(kāi)美團(tuán)叫個(gè)外賣，整個(gè)訂單創(chuàng)建流程，也是輸入模式。
有很多人可能會(huì)把輸入模式和編輯模式搞混。
區(qū)別它們的一個(gè)方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話，那就是編輯模式。
我們?cè)诳吹揭恍└韶浳恼?，或好用的小程序想要轉(zhuǎn)發(fā)給朋友，那就要用到分享模式。
分享模式可以很簡(jiǎn)單，也可以往復(fù)雜了做，看產(chǎn)品階段去實(shí)現(xiàn)。
引導(dǎo)模式和反饋模式有點(diǎn)像，都是展示特定的內(nèi)容。
那怎么分辨它們呢？
以設(shè)計(jì)師視角來(lái)看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動(dòng)顯示。
而要讓用戶特別關(guān)注的信息，那就是引導(dǎo)模式。
模式，即抽象的規(guī)律。——好夕雷
說(shuō)了這么多概念和例子，你是不是對(duì)模式的認(rèn)知更清晰了呢？
模式運(yùn)用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。
如果學(xué)會(huì)了模式，那么無(wú)論生活還是工作，相信你一定能輕松應(yīng)對(duì)、事半功倍。
本文由 @好夕雷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
關(guān)于動(dòng)效節(jié)奏的問(wèn)題，有什么好的方法可以提供？這算一個(gè)常見(jiàn)疑問(wèn)，我總結(jié)收到的問(wèn)題反饋，基本都是「動(dòng)畫節(jié)奏應(yīng)該怎么做呀」「做完的動(dòng)效一卡一卡的感覺(jué)不流暢怎么整」，索性借著今天的契機(jī)，我整理了這樣一篇主題文章，分享我對(duì)于動(dòng)效節(jié)奏的一點(diǎn)經(jīng)驗(yàn)與思考，僅代表個(gè)人觀點(diǎn)，歡迎交流探討～
在當(dāng)今數(shù)字時(shí)代，動(dòng)效設(shè)計(jì)已然成為了產(chǎn)品和服務(wù)中不可或缺的一部分。
無(wú)論是手機(jī)APP、網(wǎng)頁(yè)界面還是智能設(shè)備，動(dòng)效設(shè)計(jì)或是引導(dǎo)用戶操作的微小提示，或是增強(qiáng)用戶體驗(yàn)的交互反饋，又或是塑造品牌形象的視覺(jué)元素，它們都以其獨(dú)特的方式，為用戶帶來(lái)更加直觀、生動(dòng)的互動(dòng)體驗(yàn)，因此流暢的觀感體驗(yàn)很重要。
提到流暢度，那動(dòng)效節(jié)奏的重要性不言而喻。
動(dòng)效節(jié)奏，簡(jiǎn)單來(lái)說(shuō)是動(dòng)態(tài)呈現(xiàn)中各個(gè)元素動(dòng)作的速度和時(shí)長(zhǎng)安排，它決定了動(dòng)效的快慢、強(qiáng)弱、起伏和變化，從而影響著用戶的感知和情緒。
一個(gè)優(yōu)秀的動(dòng)效設(shè)計(jì)，不僅要考慮單個(gè)元素的動(dòng)效表現(xiàn)，更要考慮整個(gè)界面的動(dòng)效節(jié)奏，使界面動(dòng)效更加自然、流暢，也更加符合用戶的心理預(yù)期，從而提升用戶體驗(yàn)。
所以，想入門動(dòng)效領(lǐng)域并深耕，我認(rèn)為深入理解動(dòng)效節(jié)奏是尤為重要的，學(xué)會(huì)如何運(yùn)用動(dòng)效節(jié)奏來(lái)提升用戶體驗(yàn)，讓用戶在享受科技帶來(lái)便捷的同時(shí)，也能感受到藝術(shù)的魅力。
動(dòng)效可以增強(qiáng)界面的可理解性，例如下圖中廣告推送，有一個(gè)手機(jī)圖標(biāo)的旋轉(zhuǎn)動(dòng)態(tài)示例，
以及多多視頻模塊中的上滑操作指引等，幫助用戶更好地理解界面功能和操作方式，從而更有效地去使用應(yīng)用。
動(dòng)效可以提升界面的可用性，例如上傳文件的操作，通過(guò)提供及時(shí)的反饋和指引，降低用戶的學(xué)習(xí)成本和操作難度。
動(dòng)效還可以增加界面的吸引力，例如購(gòu)物軟件中模擬實(shí)際鞋盒開(kāi)箱的形式，展現(xiàn)鞋品，通過(guò)生動(dòng)有趣的動(dòng)效表現(xiàn)，提升用戶的使用欲望和滿意度。
提到動(dòng)效設(shè)計(jì)，了解其背后的基本概念和原則，才是賦予動(dòng)效靈魂和意義的關(guān)鍵。
這里要提到三個(gè)關(guān)鍵詞：
1）首先是時(shí)間
時(shí)間在動(dòng)效設(shè)計(jì)中扮演著至關(guān)重要的角色。它決定了動(dòng)畫的快慢、停頓和節(jié)奏，從而影響用戶的情感體驗(yàn)。
例如，一個(gè)緩慢漸入的動(dòng)畫可能傳達(dá)出優(yōu)雅、穩(wěn)重的感覺(jué)；
而一個(gè)迅速閃現(xiàn)的動(dòng)畫則可能帶來(lái)刺激、緊張的感受。
2）其次是空間
空間是指動(dòng)畫發(fā)生和存在的虛擬環(huán)境。在動(dòng)效設(shè)計(jì)中，空間的布局、層次和透視關(guān)系都至關(guān)重要。
它們不僅影響動(dòng)畫的可視性和可讀性，還影響用戶的認(rèn)知和行為。
例如，合理的空間布局可以使用戶更容易理解和操作界面元素，而不合理的布局則可能導(dǎo)致用戶的困惑和誤操作。
3）最后是構(gòu)圖
構(gòu)圖是指動(dòng)畫元素的排列組合和視覺(jué)平衡。
一個(gè)良好的構(gòu)圖可以突出重點(diǎn)、引導(dǎo)視線，并營(yíng)造出和諧、統(tǒng)一的視覺(jué)效果。
相反，一個(gè)糟糕的構(gòu)圖可能會(huì)分散用戶的注意力，甚至引發(fā)視覺(jué)疲勞。
動(dòng)效設(shè)計(jì)的目標(biāo)不僅僅是實(shí)現(xiàn)技術(shù)上的可能性，更是為了創(chuàng)造出讓用戶愉悅、滿意且易于使用的體驗(yàn)，在美感和技術(shù)要求之間尋找平衡點(diǎn)，是我認(rèn)為需要不斷練習(xí)，積累總結(jié)經(jīng)驗(yàn)的。
在動(dòng)效設(shè)計(jì)中，能讓靜態(tài)元素動(dòng)起來(lái)形成生動(dòng)流暢的動(dòng)態(tài)效果，需要用到兩大元素：關(guān)鍵幀與動(dòng)效節(jié)奏。
關(guān)鍵幀代表了在特定時(shí)間點(diǎn)上某個(gè)參數(shù)的值。在動(dòng)效制作過(guò)程中，通過(guò)設(shè)置關(guān)鍵幀，可以控制對(duì)象在不同時(shí)間點(diǎn)的狀態(tài)，從而形成連續(xù)的動(dòng)作。
關(guān)鍵幀就像是動(dòng)效世界里的路標(biāo)，它標(biāo)記了在動(dòng)效呈現(xiàn)中某些重要時(shí)刻物體的樣子。比如說(shuō)，我想讓一個(gè)球跳起來(lái)，那我就得告訴電腦，在開(kāi)始的時(shí)候球在地上，然后在某個(gè)瞬間球在空中最高點(diǎn)，最后又回到地面；這些重要的時(shí)刻就是關(guān)鍵幀。
關(guān)鍵幀之間的變化可以是線性的，也可以是曲線的，后者可以創(chuàng)造出更為自然和復(fù)雜的動(dòng)態(tài)效果。
線性或曲線變化，統(tǒng)稱動(dòng)效節(jié)奏，是指在一定時(shí)間內(nèi)，通過(guò)一系列有規(guī)律的動(dòng)效元素的組合和排列所產(chǎn)生的節(jié)奏感。
常見(jiàn)的四種動(dòng)效節(jié)奏形式有 勻速、緩入、緩出、緩動(dòng)。
1）勻速（Linear）
勻速運(yùn)動(dòng)指的是物體在動(dòng)畫過(guò)程中速度保持不變的運(yùn)動(dòng)方式。這種節(jié)奏簡(jiǎn)單直接，沒(méi)有加速或減速的過(guò)程。
上面的小球彈跳呈現(xiàn)的效果，就是勻速運(yùn)動(dòng)，有些機(jī)械，缺乏實(shí)際場(chǎng)景中的動(dòng)感。
在AE中，默認(rèn)的菱形關(guān)鍵幀之間就是勻速運(yùn)動(dòng)，例如生活中常見(jiàn)的時(shí)鐘，上圖中鐘表秒針旋轉(zhuǎn)是平穩(wěn)、機(jī)械的，這就是一個(gè)典型的勻速運(yùn)動(dòng)。
2）緩入（Ease In）
緩入是指物體在動(dòng)畫開(kāi)始時(shí)速度較慢，隨著時(shí)間的推移逐漸加速到最大速度的運(yùn)動(dòng)方式。
一般元素離開(kāi)畫面或者物體加速階段使用，例如上圖中摩托車駛出畫面的部分、進(jìn)度條加載緩慢到快速的節(jié)奏等，它可以增加動(dòng)畫的真實(shí)感和生動(dòng)性。
在AE中，以圓球?yàn)槔?，從空中下落的過(guò)程，就可以使用緩入的加速曲線；
調(diào)出圖表編輯器，調(diào)節(jié)曲線弧度如圖「速度圖表」所示，使曲線開(kāi)始時(shí)平緩，越靠近出點(diǎn)速度逐漸上升，完成加速運(yùn)動(dòng)，此時(shí)結(jié)尾有些生硬。
加一個(gè)小知識(shí)點(diǎn)：曲線調(diào)節(jié)有兩種形式，一種為速度圖表，一種為值圖表；
速度圖表顧名思義，看曲線的弧度，圖中球的開(kāi)始入點(diǎn)曲線弧度較緩，結(jié)尾出點(diǎn)曲線斜度較大，則代表加速度節(jié)奏變化；
值圖表分別代表X，Y軸曲線變化，如圖中球的Y軸位置發(fā)生變化，因此對(duì)應(yīng)綠色線條的曲度變化是球體的動(dòng)效節(jié)奏變化，下落過(guò)程中加速，則區(qū)別于前半段的直線，入點(diǎn)平滑，出點(diǎn)更陡峭。
3）緩出（Ease Out）
緩出與緩入相反，是指物體在動(dòng)畫結(jié)束時(shí)速度逐漸減慢直至停止的運(yùn)動(dòng)方式，如元素入畫、人物行走至停下等，它能給人一種平滑和自然的結(jié)束感，是先快后慢的減速運(yùn)動(dòng)。
同樣以圓球?yàn)槔蚵涞睾蠓磸椀倪^(guò)程，就可以使用緩出的減速曲線；
調(diào)出圖表編輯器，調(diào)節(jié)曲線弧度如圖「速度圖表」所示，使曲線結(jié)束時(shí)平緩，調(diào)節(jié)出點(diǎn)的手柄桿，完成減速運(yùn)動(dòng)。
4）緩動(dòng)（Ease In Ease Out）
緩動(dòng)是最接近真實(shí)世界物體運(yùn)動(dòng)規(guī)律的一種方式，適用于大多數(shù)動(dòng)態(tài)場(chǎng)景，尤其是那些需要表現(xiàn)自然、流暢動(dòng)作的畫面呈現(xiàn)。
緩動(dòng)曲線結(jié)合了緩入和緩出的特點(diǎn)，物體在動(dòng)畫開(kāi)始時(shí)速度緩慢上升，中間達(dá)到最高速度，最后在結(jié)束時(shí)速度逐漸降低。
示例繼續(xù)完善小球的曲線節(jié)奏，我想讓它看起來(lái)更順滑、更有彈跳感覺(jué)，通過(guò)球的大小比例（縮放）的變化，增加模糊變化的細(xì)節(jié)，這樣球跳起來(lái)的動(dòng)作就會(huì)像真實(shí)世界里那樣，既有起跳的沖勁，又有落地的緩沖，整個(gè)過(guò)程更加生動(dòng)有趣。
在AE中，緩動(dòng)曲線沒(méi)有具體的數(shù)值，多數(shù)時(shí)候需要結(jié)合不同場(chǎng)景表達(dá)，去嘗試不同的曲度形式，通過(guò)反復(fù)預(yù)覽檢驗(yàn)，找到自己滿意、適合畫面感呈現(xiàn)的形式。
日常積累動(dòng)效節(jié)奏，我會(huì)分析電影或MG動(dòng)畫中的經(jīng)典鏡頭，比如角色走路、跑步的動(dòng)作呈現(xiàn)，元素的出入場(chǎng)變化，以及自然界中的運(yùn)動(dòng)現(xiàn)象，如樹(shù)葉飄落等。
多做分鏡腳本的拆分練習(xí)，多臨摹實(shí)踐，就可以逐漸掌握常見(jiàn)的運(yùn)動(dòng)規(guī)律，自己在做設(shè)計(jì)內(nèi)容時(shí)，也可以更清晰知道怎樣的節(jié)奏更適合當(dāng)下場(chǎng)景呈現(xiàn)。
總的來(lái)說(shuō)，創(chuàng)造流暢體驗(yàn)對(duì)于動(dòng)效設(shè)計(jì)來(lái)說(shuō)還是很重要的，而要實(shí)現(xiàn)這一目標(biāo)，掌握并靈活運(yùn)用好動(dòng)效節(jié)奏則是必不可少的手段之一。
萬(wàn)變不離其宗，多看、多思考、多練習(xí)，通過(guò)實(shí)踐去總結(jié)復(fù)盤規(guī)律、梳理SOP流程，整理出一套適合自己記憶、使用的方法論與行動(dòng)標(biāo)準(zhǔn)，提高自己對(duì)動(dòng)態(tài)的感知，以及節(jié)奏力的把控，也能有效提升工作效率。
「想不如做，知行合一」，想讓學(xué)到的知識(shí)和技巧，生長(zhǎng)到自身，唯一要做的就是立馬行動(dòng)！在做的過(guò)程中解決一個(gè)個(gè)卡點(diǎn)，迭代出更適合自己的方法。
作者：Shirley_雪
本文由 @Shirley_雪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
SUS 全稱 System Usability Scale ，系統(tǒng)可用性量表。SUS最初是Brooke于1986年編制，可以科學(xué)地量化用戶體驗(yàn)，用于完成一系列任務(wù)場(chǎng)景后，對(duì)產(chǎn)品或系統(tǒng)整體宏觀的感知可用性測(cè)量。
翻譯過(guò)后可以得到下面的中文表，參與者在使用產(chǎn)品后對(duì)每個(gè)題目下面打鉤來(lái)對(duì)產(chǎn)品進(jìn)行5點(diǎn)評(píng)分。（小伙伴們可自行保存）
SUS提供整體可用性評(píng)估度量，由10個(gè)題目組成，奇數(shù)項(xiàng)為正面陳述，偶數(shù)項(xiàng)為反面陳述。
第4，5，10三項(xiàng)構(gòu)成的子量表為“有效性”（Effectiveness）&“易學(xué)性”（Learnability） ；第2，3，7，8四項(xiàng)構(gòu)成的子量表為“使用效率”（Use Efficiency）&“可用性”（Usability）；第1，6，9三項(xiàng)構(gòu)成子量表“滿意度”（Satisfaction）。
SUS適用范圍廣泛，產(chǎn)品新舊版本迭代之間對(duì)比，同類型競(jìng)品之間對(duì)比，同一產(chǎn)品不同終端之間對(duì)比均可使用?？刹捎镁€上線下問(wèn)卷調(diào)研的方式，簡(jiǎn)單高效的采集真實(shí)用戶反饋。避免在初期過(guò)早的關(guān)注細(xì)節(jié)。
當(dāng)收集好用戶問(wèn)卷反饋過(guò)后，步驟如下：
1. 對(duì)于奇數(shù)序號(hào)的問(wèn)題，將其得分減1；（比如第1題分?jǐn)?shù)為4，得分為4-1=3分）
2. 對(duì)于偶數(shù)序號(hào)的問(wèn)題，將其得分被5減去；（比如第2題分?jǐn)?shù)為3，得分為5-3=2分）
3. 將所有問(wèn)題最后的得分加在一起，然后乘以2.5；（每個(gè)題目的得分范圍記為0~4，最大值為40，SUS可用性得分的范圍在0~100，換算后乘以2.5）
4. 計(jì)算出的結(jié)果即為產(chǎn)品的SUS可用性得分。
Tips 注意事項(xiàng)：
1. 填寫之前不要進(jìn)行總結(jié)或討論；
2. 應(yīng)當(dāng)要求用戶快速完成各個(gè)題目，不要過(guò)多思考；
3. 第二題和第六題對(duì)于參與者可能難以理解，需要解釋清楚；
4. 如果用戶因?yàn)槟承┰驘o(wú)法完成其中某個(gè)題目，就視為用戶在該題上選擇了中間值。
SUS分?jǐn)?shù)等級(jí)與百分等級(jí)的區(qū)別：
我將其翻譯過(guò)后得到中文表，可以大體上感知得出的SUS分?jǐn)?shù)對(duì)應(yīng)的用戶可接受范圍。
更加細(xì)化的SUS用戶感知，可參照SUS分?jǐn)?shù)曲線分級(jí)范圍表：
注意到這里SUS分?jǐn)?shù)等級(jí)與百分等級(jí)的區(qū)別。對(duì)照SUS分?jǐn)?shù)曲線分級(jí)范圍表，如果你的SUS分?jǐn)?shù)為68，說(shuō)明你的產(chǎn)品比市面上50%的產(chǎn)品可用性要好。也就是說(shuō)這個(gè)產(chǎn)品的用戶體驗(yàn)算是合格了，表明需要進(jìn)行較小的改進(jìn)。50%中值點(diǎn)對(duì)應(yīng)SUS分?jǐn)?shù)68。（（59-41）/ （71-65）= 3 故中值點(diǎn)為65+10/3≈68 ，68分是均值，因此對(duì)應(yīng)百分比是50%。）
1. 量表公開(kāi)免費(fèi)，題目簡(jiǎn)單，只需參與者打分，實(shí)施便捷，操作簡(jiǎn)單；
2. 適用范圍廣泛，產(chǎn)品初期測(cè)試驗(yàn)證，競(jìng)品分析，新舊版本對(duì)比等等；
3. 研究證明SUS在樣本量有限時(shí)，可以最快達(dá)到效果，可信度系數(shù)高；
4. 快速宏觀有效區(qū)分可用系統(tǒng)（產(chǎn)品）和不可用系統(tǒng)（產(chǎn)品），避免在初期過(guò)早的關(guān)注細(xì)節(jié)；
5. 當(dāng)團(tuán)隊(duì)內(nèi)產(chǎn)生分歧時(shí)，SUS讓更多的人員參與代替少數(shù)意見(jiàn)領(lǐng)袖說(shuō)了算的形式，定量不追求定性。
6. 小樣本量時(shí)依然呈現(xiàn)高度的內(nèi)部一致性，產(chǎn)生真實(shí)可靠的反饋結(jié)果。
作者：設(shè)計(jì)師豆?jié){
鏈接：https://www.zcool.com.cn/article/ZMTI4NTgyMA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在數(shù)字產(chǎn)品設(shè)計(jì)日新月異的今天，打造卓越用戶體驗(yàn)已成為產(chǎn)品成功的關(guān)鍵。這篇文章精準(zhǔn)解析了UX設(shè)計(jì)的六大核心支柱，從用戶研究到無(wú)障礙設(shè)計(jì)，為讀者提供了全面且實(shí)用的設(shè)計(jì)框架。
開(kāi)啟用戶體驗(yàn)設(shè)計(jì)探索之旅，首要任務(wù)是全面掌握其核心構(gòu)成要素——這些是構(gòu)筑絕佳用戶體驗(yàn)的基石需求。事實(shí)上，在蘋果、微軟和谷歌等設(shè)計(jì)推動(dòng)型科技巨頭中，這些因素的關(guān)鍵性是不言而喻的，甚至因此催生了專屬職業(yè)與角色的誕生。在這六大核心維度中，有一個(gè)更是脫穎而出，以至于一個(gè)全新的職能部門因此得以形成。接下來(lái)，讓我們深入剖析這些零部件如何共同定義卓然出色的用戶體驗(yàn)設(shè)計(jì)版圖及行業(yè)切入點(diǎn)。
在深入分析用戶體驗(yàn)設(shè)計(jì)的六大核心要素之前，我們需要先厘清其核心內(nèi)涵。從本質(zhì)上看，用戶體驗(yàn)設(shè)計(jì)是一門創(chuàng)造愉悅且功能強(qiáng)大的體驗(yàn)藝術(shù)，確保產(chǎn)品既具有效性又兼具高效性、易用性和用戶滿意度。它涵蓋了一個(gè)整體性的設(shè)計(jì)循環(huán)，通過(guò)不同維度的優(yōu)化來(lái)最終實(shí)現(xiàn)這些目標(biāo)?？梢园延脩趔w驗(yàn)設(shè)計(jì)比喻成一把“統(tǒng)籌性的大傘”，其下輻射的每個(gè)要素都是推動(dòng)卓越體驗(yàn)構(gòu)建的重要一環(huán)。本篇文章將沿著這把傘的思維體系，逐步探索這些不可或缺的構(gòu)建模塊及其影響力。
用戶研究（亦稱 UX 研究）之所以能在設(shè)計(jì)領(lǐng)域占據(jù)重要地位，其原因顯而易見(jiàn)——它是產(chǎn)品設(shè)計(jì)的一大核心要素。隨著其價(jià)值的日益凸顯，越來(lái)越多的企業(yè)開(kāi)始設(shè)立專門的用戶研究團(tuán)隊(duì)。這一趨勢(shì)背后的驅(qū)動(dòng)力是什么？源于對(duì)用戶洞察的深入理解直接決定了能否創(chuàng)造出卓越的產(chǎn)品體驗(yàn)。在探索方案的過(guò)程中，用戶研究永遠(yuǎn)都是優(yōu)先級(jí)最高的起點(diǎn)。這個(gè)關(guān)鍵過(guò)程的核心在于定義所謂的“用戶”——通過(guò)全面梳理他們的使用體驗(yàn)，挖掘其需求、期望與操作行為，從而描繪出清晰的用戶畫像。這正是用戶研究的精髓之所在。更具體地說(shuō)，用戶研究是圍繞用戶的需求、目標(biāo)、行為模式以及心理動(dòng)機(jī)，所展開(kāi)的系統(tǒng)化調(diào)研與分析。執(zhí)行用戶研究有多種專業(yè)化方法工具，包括深入訪談、結(jié)構(gòu)化調(diào)查、現(xiàn)場(chǎng)可視采樣以及定性和定量化的可用性評(píng)估測(cè)試，每一步都旨在深刻理解目標(biāo)人群，優(yōu)化體驗(yàn)閉環(huán)。
交互設(shè)計(jì)是產(chǎn)品設(shè)計(jì)中的關(guān)鍵環(huán)節(jié)，此階段負(fù)責(zé)精細(xì)化用戶與系統(tǒng)之間的互動(dòng)路徑與體驗(yàn)設(shè)計(jì)。設(shè)計(jì)師需要梳理并規(guī)劃用戶操作觸發(fā)的系統(tǒng)響應(yīng)——例如按鈕點(diǎn)擊后的動(dòng)作反饋。從提示的生成到任務(wù)處理的閉環(huán)，每一個(gè)交互流程都經(jīng)過(guò)精致打磨。對(duì)交互表現(xiàn)的設(shè)計(jì)需通過(guò)深度用戶研究與高頻次的可用性測(cè)試進(jìn)行不斷優(yōu)化，以確保全流程交互體驗(yàn)既順暢又高效。
我的清單中提到的第三項(xiàng)是信息架構(gòu)，這是在設(shè)計(jì)過(guò)程中理解內(nèi)容與功能的關(guān)鍵環(huán)節(jié)。它的核心是對(duì)內(nèi)容和功能進(jìn)行科學(xué)的分類組織和標(biāo)記，以確保產(chǎn)品的功能與結(jié)構(gòu)清晰易懂，能夠有效地滿足不同用戶的認(rèn)知需求?？梢园研畔⒓軜?gòu)理解為產(chǎn)品的結(jié)構(gòu)藍(lán)圖，為用戶提供在界面元素間高效切換和操作的導(dǎo)引路徑。它的價(jià)值在于將內(nèi)容與功能資源以邏輯和體系化的方式呈現(xiàn)。那么如何精準(zhǔn)定義哪些要素歸屬于頂層導(dǎo)航、次級(jí)導(dǎo)航或細(xì)化導(dǎo)航？此時(shí)，一種名為“卡片分類法”（Card Sorting）的用戶體驗(yàn)研究方法便派上了用場(chǎng)，它幫助設(shè)計(jì)師優(yōu)化信息層級(jí)，制定更具洞察力和用戶思維的導(dǎo)航設(shè)計(jì)決策。
*卡片分類法：卡片分類法是一種用戶體驗(yàn)研究方法，用于幫助設(shè)計(jì)師理解用戶如何組織和分類信息。參與者通過(guò)將內(nèi)容項(xiàng)（如網(wǎng)站頁(yè)面或功能）進(jìn)行排序和分組，提供了關(guān)于信息架構(gòu)的見(jiàn)解。其主要步驟為：首先，每張卡片上寫一個(gè)內(nèi)容項(xiàng)；其次，招募目標(biāo)用戶；再次，用戶根據(jù)理解將卡片分組并命名；最后，識(shí)別共同的分類方式。此方法有助于優(yōu)化網(wǎng)站和應(yīng)用的導(dǎo)航結(jié)構(gòu)，提高用戶體驗(yàn)。
接下來(lái)重點(diǎn)分析用戶界面設(shè)計(jì)環(huán)節(jié)，也就是我們通常所提到的視覺(jué)設(shè)計(jì)，這是 UX 設(shè)計(jì)中至關(guān)重要的一環(huán)，主要關(guān)注產(chǎn)品的視覺(jué)展現(xiàn)層。UI 設(shè)計(jì)師的職責(zé)在于打造具有吸引力且直觀自然的視覺(jué)體驗(yàn)。他們通過(guò)對(duì)色彩體系、排版字體、圖形視覺(jué)以及插畫風(fēng)格的細(xì)膩打磨，為產(chǎn)品的整體視覺(jué)編碼賦予獨(dú)特且一致的品牌形象。
UX 寫作，亦稱微文案，是文案寫作領(lǐng)域下的一個(gè)細(xì)分學(xué)科，聚焦于數(shù)字產(chǎn)品中的文本設(shè)計(jì)。UX 寫作者的核心職責(zé)是優(yōu)化數(shù)字界面中的文案，不僅要貼合用戶需求，還要顯著增強(qiáng)整體用戶體驗(yàn)。他們善于運(yùn)用精準(zhǔn)而貼近用戶心智的表達(dá)方式，撰寫既通俗易懂又情感共鳴強(qiáng)的界面文案，從而最大化提升用戶的可讀性與互動(dòng)效率。
最后，我們需要聚焦于可訪問(wèn)性——這是確保所有用戶（包括有特殊需求的群體）都能高效且無(wú)障礙地使用產(chǎn)品的核心要素。作為設(shè)計(jì)從業(yè)者，共情能力是我們?cè)O(shè)計(jì)哲學(xué)的重要基石。但這種共情不僅局限于通用用戶，還要涵蓋那些需要特殊支持的用戶群體。在每一次 UI 語(yǔ)義和交互設(shè)計(jì)中，我們必須以可訪問(wèn)性優(yōu)先，確保無(wú)論用戶的能力如何，都能獲得最佳的可讀性和充分的視覺(jué)對(duì)比體驗(yàn)，真正實(shí)現(xiàn)一視同仁的包容性設(shè)計(jì)。
作者：Abhi Chatterjee
譯者：李澤慧
審核：李澤慧
編輯：丁怡豪
本文由人人都是產(chǎn)品經(jīng)理作者【TCC翻譯情報(bào)局】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
對(duì)九類交互狀態(tài)的深入理解和不斷創(chuàng)新，將為產(chǎn)品設(shè)計(jì)帶來(lái)更大的提升空間，為用戶帶來(lái)更加卓越的體驗(yàn)，推動(dòng)產(chǎn)品在競(jìng)爭(zhēng)激烈的市場(chǎng)中不斷發(fā)展和進(jìn)步。
交互狀態(tài)在產(chǎn)品設(shè)計(jì)中起著至關(guān)重要的作用，它直接關(guān)系到用戶體驗(yàn)和產(chǎn)品的可用性。良好的交互狀態(tài)設(shè)計(jì)能夠讓用戶在使用產(chǎn)品的過(guò)程中感受到便捷、高效和愉悅，從而提高用戶對(duì)產(chǎn)品的滿意度和忠誠(chéng)度。
從用戶體驗(yàn)的角度來(lái)看，交互狀態(tài)可以增強(qiáng)用戶參與感和控制感。例如，在人機(jī)交互設(shè)計(jì)中，互動(dòng)性和反饋機(jī)制能夠讓用戶覺(jué)得他們對(duì)系統(tǒng)有一定的掌控能力。當(dāng)用戶進(jìn)行操作時(shí)，系統(tǒng)能夠及時(shí)給予反饋，如按鈕按下后出現(xiàn)的狀態(tài)變化、鼠標(biāo)懸停時(shí)的提示信息等，讓用戶清楚地知道他們的操作產(chǎn)生了什么效果。這種即時(shí)的反饋可以幫助用戶理解系統(tǒng)的運(yùn)作邏輯，減少用戶的操作失誤，提升用戶的效率和滿意度。
在產(chǎn)品的可用性方面，交互狀態(tài)的設(shè)計(jì)也至關(guān)重要。例如，在電子產(chǎn)品設(shè)計(jì)過(guò)程中，實(shí)現(xiàn)人機(jī)交互可以為消費(fèi)者提供良好的使用體驗(yàn)。設(shè)計(jì)師需要考慮不同人群的需求，如設(shè)計(jì)操作簡(jiǎn)單的老人機(jī)，以滿足老年人的使用需求。同時(shí)，將人機(jī)交互理念融入產(chǎn)品設(shè)計(jì)中，能夠提升消費(fèi)者對(duì)產(chǎn)品的喜好程度，使設(shè)計(jì)出來(lái)的產(chǎn)品能夠滿足人們對(duì)電子產(chǎn)品設(shè)計(jì)的要求。
此外，交互狀態(tài)的設(shè)計(jì)還能夠影響產(chǎn)品的整體品質(zhì)。例如，在 B 端產(chǎn)品的 UI 設(shè)計(jì)中，深入了解用戶需求與場(chǎng)景，進(jìn)行簡(jiǎn)潔直觀的界面設(shè)計(jì)，可以提升產(chǎn)品的可用性。通過(guò)用戶研究方法，了解用戶的工作環(huán)境、使用習(xí)慣和設(shè)備網(wǎng)絡(luò)條件等，將用戶需求轉(zhuǎn)化為具體的設(shè)計(jì)元素和功能，為用戶提供更加貼合實(shí)際的使用體驗(yàn)。
綜上所述，交互狀態(tài)在產(chǎn)品設(shè)計(jì)中具有重要的地位，它對(duì)用戶體驗(yàn)和產(chǎn)品可用性有著重大的影響。產(chǎn)品開(kāi)發(fā)者和設(shè)計(jì)師應(yīng)該充分重視交互狀態(tài)的設(shè)計(jì)，以提高產(chǎn)品的競(jìng)爭(zhēng)力，在市場(chǎng)中脫穎而出。
加載類型：除了電商 APP 和計(jì)算器應(yīng)用的不同加載方式外，一些社交平臺(tái)在加載用戶動(dòng)態(tài)時(shí)也會(huì)采用類似的漸進(jìn)式加載。當(dāng)用戶打開(kāi)社交平臺(tái)，首先會(huì)看到最近的幾條動(dòng)態(tài)，隨著用戶不斷下拉刷新，更多的動(dòng)態(tài)內(nèi)容逐步加載出來(lái)。這樣既保證了用戶能夠快速看到部分內(nèi)容，又不會(huì)因?yàn)橐淮涡约虞d過(guò)多數(shù)據(jù)而導(dǎo)致等待時(shí)間過(guò)長(zhǎng)。
加載狀態(tài)：在加載狀態(tài)中，不同的產(chǎn)品會(huì)有不同的表現(xiàn)形式。例如，一些在線學(xué)習(xí)平臺(tái)在加載課程視頻時(shí)，除了會(huì)有旋轉(zhuǎn)的加載動(dòng)畫外，還會(huì)顯示加載進(jìn)度條，讓用戶清楚地知道視頻加載的進(jìn)度。如果加載成功，會(huì)有一個(gè)短暫的提示音，增強(qiáng)用戶的感知。而如果加載失敗，除了提示用戶檢查網(wǎng)絡(luò)連接外，還會(huì)提供一些常見(jiàn)問(wèn)題的解決方案，如清理緩存、更換網(wǎng)絡(luò)環(huán)境等。
中斷：中斷情況在實(shí)際應(yīng)用中較為復(fù)雜。以在線辦公軟件為例，如果在編輯文檔過(guò)程中出現(xiàn)網(wǎng)絡(luò)中斷，軟件會(huì)自動(dòng)保存當(dāng)前文檔的進(jìn)度，以防止數(shù)據(jù)丟失。同時(shí)，會(huì)提示用戶網(wǎng)絡(luò)中斷，并嘗試重新連接。如果長(zhǎng)時(shí)間無(wú)法連接，用戶可以選擇將文檔保存到本地，待網(wǎng)絡(luò)恢復(fù)后再進(jìn)行上傳。
深度 / 夜間模式：除了閱讀類應(yīng)用，一些視頻播放平臺(tái)也提供夜間模式。在夜晚觀看視頻時(shí)，開(kāi)啟夜間模式可以降低屏幕亮度，減少對(duì)眼睛的刺激。同時(shí)，夜間模式下的界面顏色通常會(huì)更加柔和，營(yíng)造出舒適的觀看氛圍。
存在沉浸模式插件：在一些在線教育平臺(tái)中，也會(huì)有類似沉浸模式的功能。當(dāng)學(xué)生進(jìn)入課程學(xué)習(xí)時(shí)，平臺(tái)會(huì)自動(dòng)隱藏?zé)o關(guān)的通知和廣告，讓學(xué)生專注于學(xué)習(xí)內(nèi)容。同時(shí)，學(xué)生可以通過(guò)特定的快捷鍵退出沉浸模式，方便隨時(shí)查看其他信息。
輸入：除了即時(shí)通訊軟件，一些辦公軟件在輸入方面也有很多優(yōu)化。例如，在文檔編輯軟件中，當(dāng)用戶輸入一些特定的關(guān)鍵詞時(shí)，軟件會(huì)自動(dòng)彈出相關(guān)的文檔模板或格式設(shè)置選項(xiàng)，提高用戶的輸入效率。
點(diǎn)擊：在電商平臺(tái)的商品詳情頁(yè)面，點(diǎn)擊商品圖片通常會(huì)放大顯示，讓用戶更清楚地看到商品的細(xì)節(jié)。同時(shí)，點(diǎn)擊購(gòu)買按鈕后，會(huì)有一個(gè)短暫的確認(rèn)彈窗，讓用戶再次確認(rèn)購(gòu)買信息，避免誤操作。
重復(fù)點(diǎn)擊 / 惡意操作：在一些金融類應(yīng)用中，對(duì)于重復(fù)點(diǎn)擊或惡意操作的防范更加嚴(yán)格。例如，在股票交易軟件中，如果用戶連續(xù)多次提交相同的交易指令，系統(tǒng)會(huì)自動(dòng)鎖定該用戶的交易功能，并提示用戶聯(lián)系客服解決問(wèn)題。
極值：在旅游預(yù)訂平臺(tái)上，用戶在選擇酒店價(jià)格區(qū)間時(shí)，系統(tǒng)也會(huì)進(jìn)行極值限制。價(jià)格下限通常為平臺(tái)上的最低價(jià)格，價(jià)格上限則會(huì)根據(jù)當(dāng)?shù)鼐频甑氖袌?chǎng)價(jià)格和用戶的搜索歷史進(jìn)行動(dòng)態(tài)調(diào)整，確保用戶能夠得到合理的搜索結(jié)果。
邊界：在一些圖形設(shè)計(jì)軟件中，除了畫筆工具的邊界限制，其他工具也有類似的限制。例如，當(dāng)用戶使用裁剪工具時(shí)，裁剪區(qū)域不能超出畫布的范圍，否則無(wú)法進(jìn)行裁剪操作。
時(shí)間：在在線考試系統(tǒng)中，時(shí)間限制尤為重要?？荚囬_(kāi)始前，考生只能看到考試的相關(guān)信息和注意事項(xiàng)，無(wú)法進(jìn)入答題頁(yè)面?？荚囬_(kāi)始后，系統(tǒng)會(huì)精確計(jì)時(shí)，一旦考試時(shí)間結(jié)束，答題頁(yè)面會(huì)自動(dòng)提交，無(wú)法再進(jìn)行答題。
網(wǎng)絡(luò)中斷：在在線游戲中，網(wǎng)絡(luò)中斷會(huì)對(duì)玩家的游戲體驗(yàn)產(chǎn)生很大影響。當(dāng)網(wǎng)絡(luò)中斷時(shí)，游戲會(huì)自動(dòng)暫停，并提示玩家網(wǎng)絡(luò)中斷。如果玩家在網(wǎng)絡(luò)中斷前已經(jīng)保存了游戲進(jìn)度，那么在網(wǎng)絡(luò)恢復(fù)后可以繼續(xù)游戲；如果沒(méi)有保存進(jìn)度，可能會(huì)丟失部分游戲數(shù)據(jù)。
信號(hào)不佳 / 不穩(wěn)定：在視頻會(huì)議軟件中，當(dāng)網(wǎng)絡(luò)信號(hào)不佳時(shí)，軟件會(huì)自動(dòng)降低視頻的分辨率和幀率，同時(shí)關(guān)閉音頻中的一些高級(jí)功能，如降噪和回聲消除，以保證會(huì)議的基本溝通需求。
流量形式切換：在一些音樂(lè)播放軟件中，用戶可以根據(jù)自己的網(wǎng)絡(luò)環(huán)境手動(dòng)切換流量形式。例如，在 Wi-Fi 環(huán)境下，用戶可以選擇自動(dòng)播放高清音樂(lè)視頻；而在移動(dòng)數(shù)據(jù)環(huán)境下，用戶可以選擇只播放音頻，以節(jié)省流量。
沒(méi)有內(nèi)容：在在線文檔協(xié)作平臺(tái)中，如果一個(gè)文檔沒(méi)有內(nèi)容，系統(tǒng)會(huì)提示用戶 “此文檔為空，請(qǐng)?zhí)砑觾?nèi)容”，并提供一些常用的文檔模板供用戶選擇，方便用戶快速創(chuàng)建內(nèi)容。
敏感 / 違規(guī)內(nèi)容：在電商平臺(tái)上，對(duì)于商品描述中的敏感或違規(guī)內(nèi)容，系統(tǒng)會(huì)進(jìn)行嚴(yán)格的審核。如果發(fā)現(xiàn)違規(guī)內(nèi)容，商品會(huì)被下架，并通知賣家進(jìn)行整改。同時(shí)，平臺(tái)會(huì)對(duì)賣家進(jìn)行警告，嚴(yán)重的可能會(huì)關(guān)閉賣家的店鋪。
站外內(nèi)容：在一些知識(shí)分享平臺(tái)中，當(dāng)用戶點(diǎn)擊站外鏈接時(shí)，平臺(tái)會(huì)提示用戶 “該鏈接為站外內(nèi)容，請(qǐng)注意安全”，并提供一個(gè)返回平臺(tái)的快捷按鈕，方便用戶隨時(shí)返回。同時(shí)，平臺(tái)會(huì)對(duì)站外鏈接進(jìn)行安全檢測(cè)，確保鏈接的合法性和安全性。
橫豎屏：在一些圖片編輯軟件中，橫豎屏切換會(huì)影響用戶的操作體驗(yàn)。當(dāng)用戶將手機(jī)從豎屏切換到橫屏?xí)r，軟件會(huì)自動(dòng)調(diào)整界面布局，將工具菜單和編輯區(qū)域分別放置在屏幕的兩側(cè)，方便用戶進(jìn)行操作。而當(dāng)用戶將手機(jī)從橫屏切換回豎屏?xí)r，軟件會(huì)恢復(fù)到原來(lái)的布局。
分辨率：在一些游戲開(kāi)發(fā)中，開(kāi)發(fā)者會(huì)根據(jù)不同設(shè)備的分辨率進(jìn)行優(yōu)化。例如，在高分辨率的設(shè)備上，游戲畫面會(huì)更加細(xì)膩，特效也會(huì)更加豐富；而在低分辨率的設(shè)備上，游戲會(huì)自動(dòng)降低畫質(zhì)，以保證游戲的流暢運(yùn)行。
清晰度：在一些在線視頻教育平臺(tái)中，清晰度的選擇會(huì)影響用戶的學(xué)習(xí)體驗(yàn)。在網(wǎng)絡(luò)條件好的情況下，用戶可以選擇高清或超清的視頻清晰度，以便更清楚地看到教學(xué)內(nèi)容；而在網(wǎng)絡(luò)條件差的情況下，用戶可以選擇標(biāo)清或流暢的清晰度，以保證視頻的播放流暢度。
不同版本：在一些軟件的不同版本中，功能和界面會(huì)有所不同。例如，在一款繪圖軟件的專業(yè)版中，會(huì)提供更多的高級(jí)功能和工具，而在免費(fèi)版中，功能會(huì)相對(duì)較少。同時(shí)，軟件會(huì)在界面上明確標(biāo)識(shí)出不同版本的特點(diǎn)和優(yōu)勢(shì)，方便用戶根據(jù)自己的需求進(jìn)行選擇。
硬件調(diào)用：在一些智能家居控制軟件中，當(dāng)用戶需要調(diào)用攝像頭進(jìn)行監(jiān)控時(shí)，軟件會(huì)彈出請(qǐng)求授權(quán)的提示框。在獲得用戶授權(quán)后，軟件會(huì)提供實(shí)時(shí)監(jiān)控畫面，并支持遠(yuǎn)程控制攝像頭的角度和焦距。
硬件聯(lián)動(dòng)：在一些智能辦公場(chǎng)景中，硬件聯(lián)動(dòng)可以提高工作效率。例如，當(dāng)用戶在會(huì)議室中使用智能投影儀時(shí)，投影儀可以與會(huì)議室的燈光和音響系統(tǒng)聯(lián)動(dòng)，根據(jù)投影內(nèi)容自動(dòng)調(diào)整燈光亮度和音響音量。
未登錄 / 已登錄：在一些在線教育平臺(tái)上，未登錄用戶只能瀏覽部分公開(kāi)的課程內(nèi)容，無(wú)法進(jìn)行課程報(bào)名和學(xué)習(xí)進(jìn)度跟蹤。而已登錄用戶可以享受更多的服務(wù)，如個(gè)性化課程推薦、學(xué)習(xí)記錄保存等。
新用戶 / 老用戶：對(duì)于新用戶，一些在線購(gòu)物平臺(tái)會(huì)提供新人專享優(yōu)惠券和折扣，幫助新用戶快速熟悉平臺(tái)的購(gòu)物流程。對(duì)于老用戶，平臺(tái)會(huì)根據(jù)他們的購(gòu)買歷史和瀏覽記錄，為他們推薦個(gè)性化的商品和促銷活動(dòng)。
游客賬號(hào)：在一些在線音樂(lè)平臺(tái)中，游客賬號(hào)可以讓用戶試聽(tīng)部分歌曲，但無(wú)法下載和收藏歌曲。當(dāng)游客想要享受更多功能時(shí)，可以通過(guò)注冊(cè)賬號(hào)成為正式用戶。
普通 / 會(huì)員賬號(hào)：以在線閱讀平臺(tái)為例，會(huì)員用戶可以享受無(wú)廣告閱讀、優(yōu)先閱讀新書等特權(quán)。同時(shí)，平臺(tái)會(huì)在會(huì)員專屬內(nèi)容上進(jìn)行明顯標(biāo)識(shí)，吸引普通用戶升級(jí)為會(huì)員。
內(nèi)網(wǎng) / 外網(wǎng)賬號(hào)：在一些企業(yè)內(nèi)部的項(xiàng)目管理軟件中，內(nèi)網(wǎng)賬號(hào)可以訪問(wèn)企業(yè)內(nèi)部的項(xiàng)目信息和文件，外網(wǎng)賬號(hào)則只能查看一些公開(kāi)的項(xiàng)目進(jìn)度和報(bào)告。在設(shè)計(jì)這種賬號(hào)體系時(shí)，軟件會(huì)明確區(qū)分內(nèi)網(wǎng)和外網(wǎng)賬號(hào)的權(quán)限，確保企業(yè)信息的安全。
管理員賬號(hào)：在一些社區(qū)論壇中，管理員賬號(hào)可以對(duì)用戶的發(fā)言進(jìn)行審核和管理，維護(hù)社區(qū)的秩序。同時(shí)，管理員賬號(hào)還可以進(jìn)行系統(tǒng)設(shè)置和插件管理，提升論壇的功能和性能。
通過(guò)對(duì)九類交互狀態(tài)的深入分析，我們可以清楚地看到交互狀態(tài)在產(chǎn)品設(shè)計(jì)中的重要性。無(wú)論是加載相關(guān)、特殊模式，還是操作相關(guān)、限制相關(guān)等各個(gè)方面，交互狀態(tài)都直接影響著用戶對(duì)產(chǎn)品的使用體驗(yàn)和滿意度。
例如，在加載相關(guān)方面，合理的加載類型和狀態(tài)顯示能夠減少用戶的等待焦慮，中斷處理機(jī)制則能在意外情況下最大程度地保護(hù)用戶數(shù)據(jù)和操作進(jìn)度。在特殊模式中，深度 / 夜間模式和沉浸模式插件為用戶提供了更加舒適和專注的使用環(huán)境。操作相關(guān)的輸入、點(diǎn)擊和防范重復(fù)點(diǎn)擊 / 惡意操作等設(shè)計(jì)，確保了用戶操作的準(zhǔn)確性和安全性。限制相關(guān)的極值、邊界和時(shí)間限制，使得產(chǎn)品的使用更加規(guī)范和合理。網(wǎng)絡(luò)相關(guān)的處理能夠在不同網(wǎng)絡(luò)狀況下為用戶提供盡可能好的體驗(yàn)。內(nèi)容相關(guān)的處理確保了用戶在面對(duì)不同內(nèi)容情況時(shí)都能得到恰當(dāng)?shù)囊龑?dǎo)和提示。站外內(nèi)容相關(guān)的設(shè)計(jì)保障了用戶在訪問(wèn)外部鏈接時(shí)的安全。設(shè)備相關(guān)的橫豎屏、分辨率、清晰度、不同版本、硬件調(diào)用和聯(lián)動(dòng)等設(shè)計(jì)，適應(yīng)了不同設(shè)備和用戶需求。角色相關(guān)的不同狀態(tài)設(shè)計(jì)，為不同類型的用戶提供了個(gè)性化的服務(wù)和體驗(yàn)。
展望未來(lái)，隨著科技的不斷進(jìn)步，交互狀態(tài)的設(shè)計(jì)也將不斷發(fā)展和創(chuàng)新。一方面，人工智能、大數(shù)據(jù)等技術(shù)的應(yīng)用將使交互狀態(tài)更加智能化和個(gè)性化。例如，通過(guò)分析用戶的使用習(xí)慣和偏好，自動(dòng)調(diào)整加載策略、推薦適合的操作模式等。另一方面，虛擬現(xiàn)實(shí)、增強(qiáng)現(xiàn)實(shí)等新興技術(shù)的發(fā)展將為交互狀態(tài)帶來(lái)全新的體驗(yàn)。例如，在虛擬現(xiàn)實(shí)環(huán)境中的交互狀態(tài)設(shè)計(jì)將更加注重沉浸感和自然交互。同時(shí)，隨著物聯(lián)網(wǎng)的發(fā)展，硬件之間的聯(lián)動(dòng)將更加緊密和智能，為用戶提供更加便捷和高效的服務(wù)。
本文由 @用戶體驗(yàn)王叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn