少妇无码一区二区三区,曰韩亚洲AV人人夜夜澡人人爽,亚洲天堂男人影院,丰满的闺蜜2中文字幕 欧美日韩亚洲第一AⅤ影院_国产精品午夜无码试看_亚洲视频中文字幕更新_中文无码字幕中文有码字幕

本文深入分析了B端彈窗設(shè)計(jì)的尺寸規(guī)范問題，提供了科學(xué)定義彈窗尺寸的方法和思路，旨在幫助設(shè)計(jì)師提升操作效率并確保良好的用戶體驗(yàn)，希望對(duì)您在彈窗設(shè)計(jì)上的決策有所啟發(fā)。

相信大多B端設(shè)計(jì)師對(duì)web彈窗設(shè)計(jì)的規(guī)范都不陌生：比如彈窗按交互形式可分為模態(tài)彈窗和非模態(tài)彈窗；

按承載內(nèi)容類型分為：提示類、操作類、展示類彈窗；按彈窗承載信息量的大小可以分為：小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近，在做一個(gè)操作提效的需求設(shè)計(jì)時(shí)遇到了需求方對(duì)彈窗尺寸的規(guī)范挑戰(zhàn)~

大致需求是這樣：為節(jié)省彈窗內(nèi)對(duì)選項(xiàng)選擇的時(shí)間，現(xiàn)將原本彈窗內(nèi)的級(jí)聯(lián)選擇下拉框改成平鋪按鈕的形式。（見下圖）ps：本平臺(tái)為人工審核平臺(tái)，使用用戶為審核員，平臺(tái)設(shè)計(jì)要為審核員的審核效率負(fù)責(zé)，審核效率一般表示為：單人單天（8小時(shí)）xxx條審核量。

問題點(diǎn)：承載內(nèi)容信息量不固定原因：彈窗內(nèi)用戶選擇項(xiàng)為不通過原因，而此選擇項(xiàng)是用戶根據(jù)自身企業(yè)的風(fēng)險(xiǎn)標(biāo)簽來自定義配置，這就涉及到級(jí)聯(lián)選擇數(shù)量的問題，有的客戶風(fēng)險(xiǎn)標(biāo)簽體系細(xì)，多則幾百個(gè)，有的客戶只需要粗粒度標(biāo)簽，例如只有一級(jí)標(biāo)簽，總數(shù)可能不超過十個(gè)…

設(shè)計(jì)思路

1.與用戶溝通-明確信息量的承載量級(jí)范圍

需求方：我要一個(gè)這么大的彈窗！好讓信息呈現(xiàn)更全面！

但做設(shè)計(jì)從來不是憑空定義一個(gè)彈窗大小，要做到有理有據(jù)；前期選擇先跟使用此平臺(tái)的審核負(fù)責(zé)人溝通，來確定目前已接入的客戶在此處自定義配置的原因數(shù)量量級(jí)并整理出溝通結(jié)論：

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

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

查看詳情 >

存在少量客戶10個(gè)以內(nèi)的原因個(gè)數(shù)、常規(guī)客戶在30個(gè)左右的原因個(gè)數(shù)、現(xiàn)存一家客戶使用最大量級(jí)100+原因個(gè)數(shù)。但由于控制權(quán)在客戶方，原因量級(jí)不可控，未來也可能出現(xiàn)幾百的數(shù)量。在以上結(jié)論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個(gè)最為合適需要進(jìn)一步判斷。

2.確定彈窗彈窗尺寸

在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對(duì)其進(jìn)行判斷。操作效率層面：

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)：

若不同寬度時(shí)，都選擇第一個(gè)處置原因，根據(jù)交互方法論–菲茨定律，指點(diǎn)設(shè)備到達(dá)目標(biāo)的與兩個(gè)因素有關(guān)：（1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長，所用時(shí)間越長；（2）目標(biāo)的大?。⊿）。目標(biāo)越大，所用時(shí)間越短。

由此可見此操作的最終目標(biāo)按鈕為右下角的確定按鈕，目標(biāo)按鈕大小不變，但整體的選擇距離是相對(duì)兩個(gè)較小彈窗要遠(yuǎn)的。D3>D2>D1，所用時(shí)間 T3>T2>T1。由于對(duì)審核員任務(wù)操作時(shí)間和效率要考慮到秒或毫秒級(jí)別，此大小對(duì)用戶快速完成此操作起到負(fù)向作用。

另外，當(dāng)原因個(gè)數(shù)10個(gè)以內(nèi)時(shí)，可見此時(shí)彈窗寬度過寬，導(dǎo)致空白區(qū)域過大。

當(dāng)原因個(gè)數(shù)在30個(gè)以下時(shí)，操作效率評(píng)分：

1200px ????

800px ??????

600px ??????

當(dāng)超過100個(gè)原因個(gè)數(shù)時(shí)：1200px 一屏內(nèi)展示完全，不需要滾屏滑動(dòng)；800px 可在兩屏內(nèi)展示完全，需要滾屏滑動(dòng)；600px 超出兩屏展示才可展示完全，需要滾屏滑動(dòng)。

當(dāng)原因個(gè)數(shù)超過100時(shí)，操作效率評(píng)分：

1200px ??????

800px ??????

600px ????

適配性層面：

根據(jù)市面主流屏幕分辨率尺寸調(diào)研：

市面上存在部分 1024 分辨率的顯示屏，所以：600px能夠適配所有市面主流分辨率顯示器；800px能夠適配所有市面主流分辨率顯示器；1200px不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內(nèi)顯示完全，固適配性相對(duì)較弱。

綜合三種彈窗大小的操作效率和適配性：

800px的表現(xiàn)最優(yōu)，固選取800px的彈窗大小。

3.確定彈窗基本規(guī)范

高度規(guī)范：由于信息量的不同可以根據(jù)內(nèi)容多少進(jìn)行自適應(yīng)高度，限定max high 700px。由于一般超出800px可能出現(xiàn)瀏覽器外滾動(dòng)條，所以選取高度為600-800px之間。

滾動(dòng)條規(guī)范：限高后，若信息超出max high支持出現(xiàn)內(nèi)滾動(dòng)條。瀏覽器適配規(guī)范：瀏覽器窗口>800px，彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應(yīng)。瀏覽器窗口<600px，彈窗寬度保持600px，出現(xiàn)瀏覽器外滾動(dòng)條。

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

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

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

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

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

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

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

一、什么是模式？

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

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

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

舉個(gè)例子：

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

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

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

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

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

查看詳情 >

掌握模式，有什么用？

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

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

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

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

什么是交互？

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

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

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

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

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

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

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

1. 導(dǎo)航模式

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

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

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

2. 搜索模式

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

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

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

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

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

3. 反饋模式

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

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

4. 輸入模式

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

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

5. 編輯模式

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

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

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

6. 分享模式

我們?cè)诳吹揭恍└韶浳恼?，或好用的小程序想要轉(zhuǎn)發(fā)給朋友，那就要用到分享模式。

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

7. 引導(dǎo)模式

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

那怎么分辨它們呢？

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

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

三、總結(jié)

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

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

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

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

關(guān)于動(dòng)效節(jié)奏的問題，有什么好的方法可以提供？這算一個(gè)常見疑問，我總結(jié)收到的問題反饋，基本都是「動(dòng)畫節(jié)奏應(yīng)該怎么做呀」「做完的動(dòng)效一卡一卡的感覺不流暢怎么整」，索性借著今天的契機(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ù)中不可或缺的一部分。

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

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

動(dòng)效節(jié)奏，簡單來說是動(dòng)態(tài)呈現(xiàn)中各個(gè)元素動(dòng)作的速度和時(shí)長安排，它決定了動(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é)奏來提升用戶體驗(yàn)，讓用戶在享受科技帶來便捷的同時(shí)，也能感受到藝術(shù)的魅力。

一、動(dòng)效設(shè)計(jì)基礎(chǔ)認(rèn)知

1. 動(dòng)效設(shè)計(jì)在用戶體驗(yàn)中的價(jià)值

動(dòng)效可以增強(qiáng)界面的可理解性，例如下圖中廣告推送，有一個(gè)手機(jī)圖標(biāo)的旋轉(zhuǎn)動(dòng)態(tài)示例，

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

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

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

2. 簡述動(dòng)效設(shè)計(jì)的基本原理與最佳實(shí)踐

提到動(dòng)效設(shè)計(jì)，了解其背后的基本概念和原則，才是賦予動(dòng)效靈魂和意義的關(guān)鍵。

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

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

查看詳情 >

這里要提到三個(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)重的感覺；

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

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)畫元素的排列組合和視覺平衡。

一個(gè)良好的構(gòu)圖可以突出重點(diǎn)、引導(dǎo)視線，并營造出和諧、統(tǒng)一的視覺效果。

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

動(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)的。

二、關(guān)鍵要素：動(dòng)效節(jié)奏

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

1. 關(guān)鍵幀

關(guān)鍵幀代表了在特定時(shí)間點(diǎn)上某個(gè)參數(shù)的值。在動(dòng)效制作過程中，通過設(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í)刻物體的樣子。比如說，我想讓一個(gè)球跳起來，那我就得告訴電腦，在開始的時(shí)候球在地上，然后在某個(gè)瞬間球在空中最高點(diǎn)，最后又回到地面；這些重要的時(shí)刻就是關(guān)鍵幀。

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

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

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

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

1）勻速（Linear）

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

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

在AE中，默認(rèn)的菱形關(guān)鍵幀之間就是勻速運(yùn)動(dòng)，例如生活中常見的時(shí)鐘，上圖中鐘表秒針旋轉(zhuǎn)是平穩(wěn)、機(jī)械的，這就是一個(gè)典型的勻速運(yùn)動(dòng)。

2）緩入（Ease In）

緩入是指物體在動(dòng)畫開始時(shí)速度較慢，隨著時(shí)間的推移逐漸加速到最大速度的運(yùn)動(dòng)方式。

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

在AE中，以圓球?yàn)槔?，從空中下落的過程，就可以使用緩入的加速曲線；

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

加一個(gè)小知識(shí)點(diǎn)：曲線調(diào)節(jié)有兩種形式，一種為速度圖表，一種為值圖表；

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

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

3）緩出（Ease Out）

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

同樣以圓球?yàn)槔?，球落地后反彈的過程，就可以使用緩出的減速曲線；
調(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)場景，尤其是那些需要表現(xiàn)自然、流暢動(dòng)作的畫面呈現(xiàn)。

緩動(dòng)曲線結(jié)合了緩入和緩出的特點(diǎn)，物體在動(dòng)畫開始時(shí)速度緩慢上升，中間達(dá)到最高速度，最后在結(jié)束時(shí)速度逐漸降低。

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

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

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

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

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

三、結(jié)論

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

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

「想不如做，知行合一」，想讓學(xué)到的知識(shí)和技巧，生長到自身，唯一要做的就是立馬行動(dòng)！在做的過程中解決一個(gè)個(gè)卡點(diǎn)，迭代出更適合自己的方法。

在當(dāng)今這個(gè)信息爆炸、競爭激烈的市場環(huán)境中，用戶體驗(yàn)已成為企業(yè)核心競爭力的關(guān)鍵因素。在這一背景下，我們啟動(dòng)了一項(xiàng)名為“簡單設(shè)計(jì)”的專項(xiàng)優(yōu)化項(xiàng)目，旨在通過化繁為簡，重塑用戶體驗(yàn)，提升B端產(chǎn)品的用戶滿意度和忠誠度。

在當(dāng)今信息爆炸、競爭白熱化的市場大環(huán)境下，企業(yè)核心競爭力的內(nèi)涵已悄然變遷，不再單純聚焦于產(chǎn)品或服務(wù)本身，而是將重心逐漸傾向于用戶體驗(yàn)這一關(guān)鍵維度。

于招聘領(lǐng)域而言，B 端產(chǎn)品作為銜接招聘方與求職者的關(guān)鍵紐帶，其設(shè)計(jì)的合理性、操作的便捷性以及語義的明晰度，猶如三把密鑰，直接決定著用戶滿意度與忠誠度的高低。

今年，58招聘B端開啟了“簡單設(shè)計(jì)”專項(xiàng)優(yōu)化的征程，作為項(xiàng)目主導(dǎo)設(shè)計(jì)師，我全程深度參與了從調(diào)研、剖析、設(shè)計(jì)至實(shí)施的各個(gè)環(huán)節(jié)，在這一過程中，深刻領(lǐng)悟到設(shè)計(jì)對(duì)于提升用戶體驗(yàn)的非凡意義。

01 深入業(yè)務(wù)前言，洞見用戶痛點(diǎn)，錨定設(shè)計(jì)方向

項(xiàng)目伊始，我們即對(duì)58招聘B端產(chǎn)品的現(xiàn)有用戶展開了全面且深入的調(diào)研行動(dòng)。

我們深知，唯有精準(zhǔn)洞悉用戶需求與痛點(diǎn)，方能打造出契合用戶期望的產(chǎn)品。

為此，設(shè)計(jì)團(tuán)隊(duì)全員深入一線，置身于用戶的實(shí)際使用環(huán)境，與各行業(yè)用戶進(jìn)行深度的面對(duì)面溝通。同時(shí)，我們運(yùn)用多種調(diào)研方法，包括問卷調(diào)查、用戶訪談、數(shù)據(jù)分析等，多維度、全方位地搜集用戶信息。

在調(diào)研過程中，一系列影響用戶體驗(yàn)的關(guān)鍵問題浮出水面。

其中，操作繁瑣成為用戶反饋?zhàn)顬橥怀龅膯栴}。眾多用戶抱怨，在使用B端產(chǎn)品時(shí)，完成諸如客戶認(rèn)證、發(fā)布職位、篩選簡歷等簡單任務(wù)，往往需歷經(jīng)多個(gè)復(fù)雜步驟。

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

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

查看詳情 >

這種繁復(fù)的操作流程，不僅耗費(fèi)大量時(shí)間與精力，更易引發(fā)用戶的挫敗感和不滿情緒，宛如一道無形的屏障，拉遠(yuǎn)了用戶與平臺(tái)的距離。

此外，語義晦澀難懂也是普遍存在的問題。

B端產(chǎn)品中的專業(yè)術(shù)語和復(fù)雜表述，對(duì)于非專業(yè)用戶而言，仿若天書，極大地增加了學(xué)習(xí)成本，甚至可能導(dǎo)致誤解和誤操作，嚴(yán)重?fù)p害了用戶體驗(yàn)。

這些問題的根源，經(jīng)深入分析，與傳統(tǒng)產(chǎn)品設(shè)計(jì)理念的局限、對(duì)用戶體驗(yàn)的忽視以及用戶研究與溝通的不足密切相關(guān)。

基于此，我們決定從這三個(gè)層面入手，重塑設(shè)計(jì)思路，以提升用戶體驗(yàn)。

02 解構(gòu)問題根源，重構(gòu)設(shè)計(jì)理念之維

在扎實(shí)調(diào)研的基礎(chǔ)上，我們對(duì)問題進(jìn)行了抽絲剝繭般的分析。

我們深刻意識(shí)到，若要從根本上解決用戶問題，必須對(duì)設(shè)計(jì)理念進(jìn)行大刀闊斧的革新。

首先，我們毅然摒棄傳統(tǒng)的以產(chǎn)品為核心的設(shè)計(jì)理念，轉(zhuǎn)而擁抱以用戶為中心的設(shè)計(jì)哲學(xué)。用戶作為產(chǎn)品的最終使用者，他們的需求和體驗(yàn)是產(chǎn)品設(shè)計(jì)的靈魂所在。因此，我們將用戶需求與體驗(yàn)置于首位，重新審視產(chǎn)品的功能布局、操作流程以及語義表達(dá)等各個(gè)維度。

其次，我們將用戶體驗(yàn)的重視程度提升至前所未有的高度。用戶體驗(yàn)，作為產(chǎn)品競爭力的核心要素，貫穿于設(shè)計(jì)的全過程。我們通過簡化操作流程、優(yōu)化界面布局、明晰語義表述等手段，致力于提升用戶的操作效率和滿意度，打造流暢、高效的用戶交互體驗(yàn)。

最后，我們強(qiáng)化了用戶研究與溝通機(jī)制。深知只有深入了解用戶需求與痛點(diǎn)，才能設(shè)計(jì)出符合用戶期望的產(chǎn)品。因此，在與用戶的每一次接觸中，我們都用心收集他們的意見和建議，為產(chǎn)品設(shè)計(jì)與優(yōu)化注入源源不斷的智慧源泉。

03 以用戶為中心，雕琢極致體驗(yàn)之境

基于對(duì)問題的深度剖析，我們開啟了具體的設(shè)計(jì)工作。

設(shè)計(jì)，作為解決問題的關(guān)鍵環(huán)節(jié)，需要我們充分施展設(shè)計(jì)師的專業(yè)素養(yǎng)與創(chuàng)新能力，以用戶為中心，對(duì)招聘B端產(chǎn)品進(jìn)行全方位的重塑。

在操作流程優(yōu)化方面，我們對(duì)現(xiàn)有流程進(jìn)行了細(xì)致梳理和深度優(yōu)化，大刀闊斧地去除了冗余步驟和環(huán)節(jié)，使操作流程如行云流水般簡潔明了。

例如，在發(fā)布職位這一關(guān)鍵功能上，我們簡化了信息填寫步驟，并貼心地提供模板和自動(dòng)填充功能，極大地降低了用戶操作難度和時(shí)間成本，讓用戶在操作過程中感受到前所未有的便捷。

在語義表述清晰化上，我們對(duì)界面上的專業(yè)術(shù)語和復(fù)雜表述進(jìn)行了精心簡化和優(yōu)化，使其通俗易懂且易于記憶。同時(shí)，對(duì)重點(diǎn)文案和標(biāo)題進(jìn)行突出處理，便于用戶快速抓取關(guān)鍵信息，清晰知曉每一步操作的目的，輔助用戶迅速?zèng)Q策，從而進(jìn)一步提升用戶體驗(yàn)。

在界面布局精簡方面，我們對(duì)界面進(jìn)行了精心雕琢，去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配，提高了界面的可讀性和美觀度，營造出簡潔大氣的視覺體驗(yàn)。此外，增加搜索和篩選功能，使用戶能夠快速定位所需信息，進(jìn)一步提升操作效率和滿意度。

在整個(gè)設(shè)計(jì)過程中，我們充分發(fā)揮設(shè)計(jì)師的專業(yè)能力和創(chuàng)新精神，運(yùn)用多種先進(jìn)的設(shè)計(jì)方法和工具，如用戶畫像、設(shè)計(jì)原型、用戶體驗(yàn)測(cè)試等，確保設(shè)計(jì)方案的科學(xué)性和有效性。同時(shí)，與產(chǎn)品經(jīng)理、開發(fā)人員等團(tuán)隊(duì)成員緊密協(xié)作，形成強(qiáng)大的合力，共同推動(dòng)項(xiàng)目順利前行。

04 持續(xù)優(yōu)化迭代，升華用戶體驗(yàn)之峰

設(shè)計(jì)完成后，項(xiàng)目進(jìn)入實(shí)施階段。

我們深知，實(shí)施是設(shè)計(jì)落地生根的關(guān)鍵一步，需要團(tuán)隊(duì)充分發(fā)揮協(xié)作精神和強(qiáng)大執(zhí)行力，確保項(xiàng)目順利推進(jìn)。

在實(shí)施過程中，我們采用敏捷開發(fā)方法，通過持續(xù)迭代和優(yōu)化，不斷提升產(chǎn)品的功能和性能。定期收集和分析用戶反饋意見，及時(shí)對(duì)產(chǎn)品進(jìn)行調(diào)整和改進(jìn)。同時(shí)，加強(qiáng)與用戶的溝通，通過多樣化的用戶調(diào)研方式，積極捕捉用戶的每一個(gè)意見和建議，為產(chǎn)品的持續(xù)優(yōu)化提供堅(jiān)實(shí)支撐。

經(jīng)過不懈努力，“簡單設(shè)計(jì)”專項(xiàng)已取得顯著成效。用戶操作效率和滿意度大幅攀升，產(chǎn)品留存率和口碑亦顯著改善。然而，我們明白，設(shè)計(jì)優(yōu)化是一場永無止境的修行。隨著用戶需求的持續(xù)演變和技術(shù)的不斷革新，我們需持續(xù)探索與創(chuàng)新，以維持產(chǎn)品的競爭力和生命力。

展望未來，我們將堅(jiān)定不移地秉持以用戶為中心的設(shè)計(jì)理念，持續(xù)優(yōu)化產(chǎn)品功能和性能。同時(shí)，進(jìn)一步加強(qiáng)用戶研究與溝通，通過持續(xù)收集和分析用戶信息與意見，不斷改進(jìn)和優(yōu)化產(chǎn)品設(shè)計(jì)。我們堅(jiān)信，在全體設(shè)計(jì)師的共同努力下，58招聘B端產(chǎn)品將為用戶帶來更便捷、高效、愉悅的使用體驗(yàn)，成為招聘領(lǐng)域的璀璨之星。

總之，“簡單設(shè)計(jì)”專項(xiàng)不僅是產(chǎn)品設(shè)計(jì)層面的優(yōu)化與提升，更是對(duì)用戶需求深度洞察與積極回應(yīng)的生動(dòng)實(shí)踐。未來，我們將繼續(xù)堅(jiān)守這一理念，為用戶創(chuàng)造更多價(jià)值與驚喜，同時(shí)不斷提升自身設(shè)計(jì)能力與創(chuàng)新力，為產(chǎn)品的持續(xù)優(yōu)化與創(chuàng)新注入源源不斷的動(dòng)力。

在效率至上的數(shù)字時(shí)代，釘釘硬件卻走出一條“溫暖設(shè)計(jì)”之路，從愉悅體驗(yàn)到隱私守護(hù)，再到多感官協(xié)同，它是如何讓冰冷機(jī)器擁有心跳，重塑B端硬件設(shè)計(jì)準(zhǔn)則的？一起來探尋。

釘釘自2015年推出后，逐步構(gòu)建“軟硬一體”生態(tài)，其智能硬件以“簡單高效，底色溫暖”為核心，通過普惠（幾何美學(xué)/曲率連續(xù)）、專注（層級(jí)顯隱/寧靜科技）、平衡（功能-成本-環(huán)境）三大準(zhǔn)則，將復(fù)雜B端需求轉(zhuǎn)化為簡約設(shè)計(jì)，設(shè)計(jì)出的產(chǎn)品斬獲iF/Reddot等眾多國際大獎(jiǎng)，服務(wù)超1500萬企業(yè)。

四、愉悅

如今用戶的需求已不再局限于實(shí)用功能，更追求情感層面的滿足。

這種轉(zhuǎn)變就像從”需要一臺(tái)電腦處理工作”到”渴望一個(gè)能提供陪伴的機(jī)器人助手”——本質(zhì)是從單純的功能需求升級(jí)為情感連接。

通過洞察用戶從本能需求到行為習(xí)慣，再到情感共鳴的完整鏈條，我們不斷優(yōu)化產(chǎn)品，讓科技與人的關(guān)系變得更加緊密溫暖。

愉悅-人機(jī)工學(xué)

產(chǎn)品與人的配合度決定了使用體驗(yàn)是否安全順手，更是用戶獲得愉悅感的關(guān)鍵。我們建議從三個(gè)維度展開研究——人的使用習(xí)慣、設(shè)備性能特征、使用場景特點(diǎn)，通過實(shí)際測(cè)試與綜合分析，最終得出科學(xué)可靠的最優(yōu)方案。

愉悅-情感化設(shè)計(jì)

讓冰冷的工具性產(chǎn)品因?yàn)椴馁|(zhì)的改變而富有溫度，讓設(shè)備的立桿因?yàn)榻嵌鹊母淖兌兊糜袃x式感和尊重感，以人為本的情感的設(shè)計(jì)賦予產(chǎn)品價(jià)值，形成用戶對(duì)品牌的認(rèn)知性與認(rèn)可度。

愉悅-價(jià)值認(rèn)同

2030年的碳中和戰(zhàn)略和可持續(xù)目標(biāo)已經(jīng)是全球的趨勢(shì)共識(shí)，這意味著產(chǎn)品不僅為今天創(chuàng)造價(jià)值，也為明天創(chuàng)造價(jià)值，釘釘建議從產(chǎn)品級(jí)的3R原則 (Reduce、Reuse、Recycle) 再到系統(tǒng)級(jí)的LCED（產(chǎn)品生命周期設(shè)計(jì)）的設(shè)計(jì)標(biāo)準(zhǔn)去思考如何給用戶帶來產(chǎn)生正向的綠色價(jià)值認(rèn)同感和愉悅感的產(chǎn)品，再到通過設(shè)計(jì)領(lǐng)導(dǎo)力帶來理念變革與循環(huán)經(jīng)濟(jì)。

現(xiàn)今無處不在的智能產(chǎn)品和共享數(shù)據(jù)在帶來變革的同時(shí)帶來了巨大的安全風(fēng)險(xiǎn)， 釘釘設(shè)計(jì)非常注重可感知的用戶隱私信息保護(hù)（PBD），一直致力于通過最好的手段來守護(hù)用戶安全隱私，消除用戶在使用產(chǎn)品中“被監(jiān)視”來的不安定感。

五、隱私

在隱私性設(shè)計(jì)上應(yīng)考量如下維度：

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

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

查看詳情 >

• 主動(dòng)-在隱私泄露發(fā)生前預(yù)判風(fēng)險(xiǎn)，而非事后補(bǔ)救
• 全鏈-排查設(shè)備物理結(jié)構(gòu)、數(shù)字界面等所有接觸點(diǎn)，監(jiān)控信息從收集、存儲(chǔ)到共享的全生命周期。
• 可感-用聲音提醒、呼吸燈閃爍或震動(dòng)反饋，讓用戶清晰感知設(shè)備何時(shí)開啟/關(guān)閉數(shù)據(jù)采集。
• 可控-以用戶為中心，用戶始終擁有數(shù)據(jù)主權(quán)，可隨時(shí)一鍵停止數(shù)據(jù)收集或撤回歷史授權(quán)

策略-隱私保護(hù)不是成本負(fù)擔(dān)，而是產(chǎn)品核心競爭力。

眼睛看到的不等于全部體驗(yàn)。我們始終相信，當(dāng)視覺與聽覺的韻律、觸覺的肌理、嗅覺的記憶、味覺的驚喜交織成網(wǎng)（五感聯(lián)動(dòng)），產(chǎn)品才能真正叩擊人心。這種立體的感官交響，不僅塑造獨(dú)特的品牌印記，更能在用戶腦海中種下記憶錨點(diǎn)。要讓感官設(shè)計(jì)真正釋放能量，設(shè)計(jì)師們需要一套系統(tǒng)化的設(shè)計(jì)指南——就像指揮家需要樂譜來統(tǒng)籌交響樂團(tuán)。

六、多感官

多感官-光響應(yīng)

釘釘設(shè)計(jì)一直致力于協(xié)調(diào)所有感官輸入，以提供關(guān)于品牌價(jià)值的豐富信息和功能表達(dá)，光作為其中一條重要媒介，即是交互媒介也是內(nèi)容更是品牌記憶點(diǎn)，其中包含了光的色彩，明暗，變化形式，以帶給產(chǎn)品獨(dú)特的識(shí)別度和無限的可能性。

多感官-聲音識(shí)別

聲音的反饋能夠在恰當(dāng)?shù)膱鼍敖o予用戶明確的指向和好的用戶體驗(yàn)，同時(shí)也能很好得傳達(dá)出品牌和價(jià)值主張，汽車關(guān)車門的聲音是感官設(shè)計(jì)方法中最著名和最常用的例子，許多頂級(jí)汽車品牌都有獨(dú)立的車門開發(fā)團(tuán)隊(duì)，例如梅賽德斯 SUV 的車門被調(diào)教得聽起來更重，以傳達(dá)它們的堅(jiān)固性。

七、產(chǎn)品細(xì)節(jié)

色彩（Color）

色彩是除了造型以外最能影響產(chǎn)品設(shè)計(jì)視覺體驗(yàn)的關(guān)鍵設(shè)計(jì)因素，中性的黑白灰建議作為產(chǎn)品主基調(diào)，能夠適配更多場景的同時(shí)也能覆蓋更多受眾，限定色一般做根據(jù)產(chǎn)品定位的特殊版，或者局部的顏色點(diǎn)綴。

材質(zhì)（Material）

材質(zhì)是產(chǎn)品外觀效果實(shí)現(xiàn)的物質(zhì)載體同樣也是凸顯產(chǎn)品定位的重要媒介，我們主張通過引入功能&情感導(dǎo)向材質(zhì)的概念，來進(jìn)行不同產(chǎn)品定位上的區(qū)分，同時(shí)保持理念透出的一致性。

工藝處理&圖案（Finish）

工藝處理&圖案是外觀效果最后一步，為營造溫潤感和保證多場景下的耐用性，表面處理應(yīng)注意以下兩點(diǎn)：

1.主殼體表面處理應(yīng)避免大面積高亮，避免使用大面積金屬拉絲，表面質(zhì)感光澤低于4分光，素色為主，可點(diǎn)綴亮色，避免大面積純度過高的顏色噴涂，除窗口鏡片外避免大面積亮鍍，

2.肌理圖案應(yīng)選擇低調(diào)克制的圖形，以功能性為導(dǎo)向，例如在關(guān)鍵物理交互點(diǎn)上給予適當(dāng)?shù)挠|感引導(dǎo)或輔助。

在產(chǎn)品落地過程中，設(shè)計(jì)師應(yīng)在量產(chǎn)限制與工藝要求之間平衡出最優(yōu)化解，并將其沉淀成相應(yīng)準(zhǔn)則。

小結(jié)

在效率至上的數(shù)字時(shí)代，釘釘硬件的設(shè)計(jì)選擇了一條不同的路——不讓技術(shù)成為壓迫用戶的工具，而是化作理解人心的伙伴。上篇提出的“簡單高效”生態(tài)，不是把復(fù)雜功能簡單堆砌，而是像拼樂高一樣，用“普惠、專注、平衡”三大準(zhǔn)則搭建出真正懂用戶需求的硬件；下篇揭示的“溫暖設(shè)計(jì)”，則讓冷冰冰的機(jī)器擁有了心跳：它可能是電腦支架上一個(gè)微微傾斜的弧度，讓你工作時(shí)挺直腰背的瞬間，感受到被尊重的儀式感；也可能是設(shè)備上一盞呼吸節(jié)奏的指示燈，用光的明暗變化悄悄告訴你：“數(shù)據(jù)已加密，請(qǐng)安心”；或是關(guān)機(jī)時(shí)那一秒類似合上書頁的“咔嗒”聲，讓結(jié)束工作的動(dòng)作變得像放下咖啡杯一樣自然。這些細(xì)節(jié)背后，是釘釘對(duì)產(chǎn)品的三個(gè)堅(jiān)持：

1. 隱私不是口號(hào)，而是底線——從攝像頭物理遮擋到數(shù)據(jù)授權(quán)隨時(shí)可撤銷，把“用戶掌控權(quán)”刻進(jìn)產(chǎn)品基因；
2. 環(huán)保不靠貼標(biāo)簽，而是真行動(dòng)——舊設(shè)備零件像積木一樣拆解重組，讓一部會(huì)議終端的壽命從三年延長到十年；
3. 體驗(yàn)不只靠屏幕，而是五感聯(lián)動(dòng)——就像頂級(jí)汽車品牌會(huì)專門調(diào)校關(guān)車門的聲音，釘釘?shù)脑O(shè)備提示音也藏著“聽得見的安心”。

說到底，好的設(shè)計(jì)從不需要刻意標(biāo)榜“高大上”。當(dāng)科技能讀懂人的疲憊、尊重隱私的敏感、在乎環(huán)境的未來，甚至在意你觸摸機(jī)身時(shí)的指尖溫度——這便是“芥子納須彌”的真正含義：用最小的人文微光，照亮最深的數(shù)字叢林，讓每個(gè)人在智能時(shí)代依然能體面地工作、自在地生活。

許多設(shè)計(jì)團(tuán)隊(duì)在面對(duì)復(fù)雜的業(yè)務(wù)需求時(shí)，往往忽視了側(cè)邊欄設(shè)計(jì)的細(xì)節(jié)和靈活性。本文將深入探討B(tài)端側(cè)邊欄的設(shè)計(jì)要點(diǎn)，并結(jié)合實(shí)際案例，分享如何根據(jù)不同行業(yè)、業(yè)務(wù)場景和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì)，供大家參考。

很長一段時(shí)間我都覺得做B端的中臺(tái)時(shí)間沒什么技術(shù)含量，不就是第三方的組件，拼積木一樣，拼接就好，甚至很多團(tuán)隊(duì)也是這么想的，早期很多的中臺(tái)都沒有設(shè)計(jì)師；

但是隨著這幾年越來越深度的B端中臺(tái)的設(shè)計(jì)，做了太多各式各樣的后臺(tái)的設(shè)計(jì)系統(tǒng)，深入的進(jìn)入業(yè)務(wù)，才發(fā)現(xiàn)設(shè)計(jì)過程中必須考慮很多細(xì)節(jié)和維度，甚至很小的點(diǎn)，也是有考究的。

最近我們?cè)谧鰝?cè)邊欄的升級(jí)，我做了市場上50+中臺(tái)的側(cè)邊欄目調(diào)研，看了上萬張圖，越看越越是能發(fā)現(xiàn)針對(duì)不同的行業(yè)，不同的業(yè)務(wù)場景、信息層級(jí)和用戶習(xí)慣進(jìn)行靈活設(shè)計(jì)選擇，需要具體問題具體分析及處理。

下面我就來總結(jié)一下我調(diào)研的這些側(cè)邊的設(shè)計(jì)分類及設(shè)計(jì)規(guī)則。

一、B端側(cè)邊欄的設(shè)計(jì)分類

按布局形態(tài)分類

細(xì)欄（垂直導(dǎo)航）：以圖標(biāo)為主，文字輔助，適用于模塊較少、內(nèi)容區(qū)域需最大化展示的場景。

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

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

查看詳情 >

優(yōu)勢(shì)是簡潔高效，但要求用戶對(duì)圖標(biāo)含義有較高認(rèn)知。

寬欄（混合導(dǎo)航）：圖標(biāo)與文字并存，支持多級(jí)菜單，兼容性強(qiáng)，適合復(fù)雜業(yè)務(wù)層級(jí)。這也是常見的側(cè)邊欄樣式。

通過分組和標(biāo)題提升信息密度，但可能壓縮內(nèi)容區(qū)域。

按結(jié)構(gòu)層級(jí)分類

單級(jí)導(dǎo)航：直接展示所有一級(jí)菜單，適合功能模塊較少的中小型系統(tǒng)（如藍(lán)湖、Coding）。

遵循“7±2”原則，菜單數(shù)量控制在5-9個(gè)，避免用戶選擇疲勞;

多級(jí)導(dǎo)航：通過折疊面板或樹形結(jié)構(gòu)收納子菜單，適用于大型企業(yè)級(jí)系統(tǒng)（如ERP、CRM）。

需明確可點(diǎn)擊項(xiàng)與純分類項(xiàng)的區(qū)分，避免交互混淆 ；

按交互模式分類

平鋪模式：菜單完全展開，用戶可快速定位功能（如新紅小紅書后臺(tái)、抖音抖店等等模塊）。適用于高頻操作場景；

折疊/懸浮模式：側(cè)邊欄可收縮為圖標(biāo)或隱藏，適應(yīng)窄屏設(shè)備或需專注內(nèi)容的情境（如飛書的icon展開收起）。需提供顯性觸發(fā)按鈕（如漢堡菜單）

二、B端側(cè)邊欄的設(shè)計(jì)規(guī)則

側(cè)邊欄設(shè)計(jì)需平衡功能性與視覺體驗(yàn)，核心規(guī)則如下：

視覺對(duì)比與層級(jí)劃分

背景色差異化：通過深色或淺色背景區(qū)分側(cè)邊欄與內(nèi)容區(qū)域，避免視覺干擾。例如，深色背景可突出白色內(nèi)容區(qū)，但需確保品牌色符合無障礙標(biāo)準(zhǔn)（對(duì)比度≥4.5:1）

信息分組與留白：使用分割線、標(biāo)題或間距對(duì)功能模塊分組，減少信息密度。

圖標(biāo)與交互細(xì)節(jié)

圖標(biāo)設(shè)計(jì)原則：B端圖標(biāo)需簡約且具辨識(shí)度，避免過度裝飾。選中狀態(tài)可通過填充色、微動(dòng)效或標(biāo)識(shí)線強(qiáng)化（如Ant Design的選中高亮）

交互反饋優(yōu)化：鼠標(biāo)懸停時(shí)圖標(biāo)變色、文字浮現(xiàn)；選中狀態(tài)結(jié)合背景色與文字加粗，提升操作感知

拓展性與一致性

響應(yīng)式適配：窄屏下自動(dòng)切換為圖標(biāo)模式，確保移動(dòng)端可用性（如飛書后臺(tái)的側(cè)邊欄收縮功能）

規(guī)范復(fù)用：建立統(tǒng)一的字號(hào)、間距、顏色規(guī)范（如主文字14px、輔助文字12px），降低用戶認(rèn)知成本

業(yè)務(wù)導(dǎo)向的優(yōu)先級(jí)

高頻功能前置：將常用模塊置于頂部（如“更多功能、功能設(shè)置等等”），低頻功能收納至底部折疊區(qū)

teambition：不僅做了更多功能，有意思的他還做了自定義導(dǎo)航欄的功能，支持排序，做到低成本的定制化。

權(quán)限分級(jí)展示：根據(jù)角色動(dòng)態(tài)顯示菜單（如管理員可見“系統(tǒng)設(shè)置”，普通員工僅顯示“任務(wù)列表”），減少信息冗余

三、典型案例解析

飛書：平鋪式動(dòng)態(tài)導(dǎo)航

設(shè)計(jì)亮點(diǎn)：頂部導(dǎo)航進(jìn)行功能入口切換，左側(cè)平鋪核心功能，圖標(biāo)與文字比例均衡；通過級(jí)分類提升信息層級(jí)

適用場景：設(shè)計(jì)協(xié)作工具，功能模塊清晰且用戶操作高頻

小鵝通：混合式寬欄導(dǎo)航

設(shè)計(jì)亮點(diǎn)：頂部導(dǎo)航切換業(yè)務(wù)大類，側(cè)邊欄展開子模塊；有一級(jí)也有多級(jí)菜單通過折疊面板收納，層級(jí)深度可控。

適用場景：復(fù)雜業(yè)務(wù)，需支持多業(yè)務(wù)線交叉跳轉(zhuǎn)

千牛商家后臺(tái)：多層級(jí)側(cè)邊欄

設(shè)計(jì)亮點(diǎn)：分兩欄導(dǎo)航，窄屏下收縮為圖標(biāo)或者圖標(biāo)+簡短文字；第二欄按照層級(jí)排列，客一級(jí)或者多級(jí)。

適用場景：企業(yè)級(jí)后臺(tái)系統(tǒng)，業(yè)務(wù)場景復(fù)雜，需要多種場景切換，導(dǎo)航多層級(jí)切功能極多的情況

微贊直播：可自定義導(dǎo)航

設(shè)計(jì)亮點(diǎn)：可自定義導(dǎo)航，包含排版、顏色。相對(duì)來說體驗(yàn)感更加，不過對(duì)應(yīng)屏幕自適應(yīng)要求更高。

適用場景：針對(duì)C端，功能復(fù)雜的情況

老版設(shè)計(jì)

新版設(shè)計(jì)

Ant Design Pro：規(guī)范驅(qū)動(dòng)的側(cè)邊欄

設(shè)計(jì)亮點(diǎn)：遵循原子設(shè)計(jì)方法論，定義圖標(biāo)尺寸（24px）、間距（8px倍數(shù)）、選中態(tài)（主色填充），確保開發(fā)與設(shè)計(jì)一致性 ，便于快速搭建新平臺(tái)

適用場景：中臺(tái)型系統(tǒng)，需快速復(fù)用組件庫

四、總結(jié)

側(cè)邊欄設(shè)計(jì)需以業(yè)務(wù)邏輯為核心，考慮信息層級(jí)與用戶角色，同時(shí)兼顧視覺清晰度與交互效率。

未來趨勢(shì)上，側(cè)邊欄的“C端化”設(shè)計(jì)（如情感化微交互、個(gè)性化皮膚）可能成為提升B端產(chǎn)品吸引力的新方向。

總的來說，做設(shè)計(jì)這些年，當(dāng)遇到問題的時(shí)候，我覺得最好的解法就是看案例，看很多案例，爆炸式的研究一下，很多問題就有了解法。