B端產(chǎn)品經(jīng)理的能力模型與學(xué)習(xí)提升
2025-4-4 杰睿
交互規(guī)范有效地規(guī)定了產(chǎn)品如何與用戶(hù)進(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ī)范，也稱(chēng)為界面交互規(guī)范或用戶(hù)界面規(guī)范，是一套規(guī)定產(chǎn)品如何與用戶(hù)進(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)部有專(zhuān)門(mén)的設(shè)計(jì)部門(mén)，可以設(shè)計(jì)部門(mén)整體定義公司色系以及字體等等。
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ù)常用顯示器上的用戶(hù)閱讀效率最佳，根據(jù)電腦顯示器距離舒適度以及用戶(hù)觀感舒適度，確認(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 之間的顏色。注釋類(lèi)的文字建議選用#999999。
文案類(lèi)最好為左對(duì)齊，數(shù)字類(lèi)最好為右對(duì)齊，表單類(lèi)間距建議8px，文字右對(duì)齊，結(jié)尾沒(méi)有冒號(hào)。
市面上比較主流的為這四種按鈕，主按鈕，線(xiàn)性按鈕，次按鈕和純文字按鈕。具體使用規(guī)則和使用場(chǎng)景如何呢？我們應(yīng)該從哪些方面下手去設(shè)計(jì)按鈕？下面給大家一一進(jìn)行解答。
主按鈕為主要的按鈕。引導(dǎo)用戶(hù)進(jìn)行點(diǎn)擊操作，一個(gè)按鈕區(qū)域最多使用一個(gè)主按鈕。
場(chǎng)景應(yīng)用：可應(yīng)用于確認(rèn)、新增、保存等等，你想引導(dǎo)用戶(hù)做何操作，就可以把視覺(jué)焦點(diǎn)集中在哪個(gè)按鈕上。比如退款操作時(shí)，商家本質(zhì)希望用戶(hù)不退款，主按鈕為返回或是再想想的按鈕。
需要注意的是不要在同一個(gè)表單中使用多個(gè)主按鈕，1-2個(gè)即可，次按鈕或是線(xiàn)性按鈕多于5個(gè)時(shí)可以向上折疊收起。
線(xiàn)性按鈕&次按鈕兩種按鈕均可點(diǎn)擊，但是功能均弱于主按鈕。如果希望引導(dǎo)用戶(hù)進(jìn)行點(diǎn)擊，可以選擇線(xiàn)性按鈕；若希望用戶(hù)盡可能少點(diǎn)擊或是不點(diǎn)擊可以選擇次按鈕。
場(chǎng)景應(yīng)用：一般在大表單頁(yè)面批量導(dǎo)入，下載均為次按鈕或是線(xiàn)性按鈕。
純文字按鈕就是有顏色的文字按鈕，可進(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)的地圖索引，幫助用戶(hù)可以順利到達(dá)目的地。導(dǎo)航對(duì)于B端產(chǎn)品交互而言，是系統(tǒng)之眼，一方面清晰展示系統(tǒng)結(jié)構(gòu)，另一方面幫助用戶(hù)快速找到他們想要的信息。好的導(dǎo)航清晰操作順滑，差的導(dǎo)航會(huì)讓用戶(hù)沒(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í)，用戶(hù)下鉆縱深體驗(yàn)稍差。
2）頂部橫向?qū)Ш?/strong>
使用規(guī)則：
優(yōu)點(diǎn)：
缺點(diǎn)：
1）面包屑
面包屑幫助定位菜單以及返回菜單，可以顯示當(dāng)前頁(yè)面的路徑，是比較常用的導(dǎo)航方式。
使用規(guī)則：
顯示當(dāng)前頁(yè)面路徑，方便用戶(hù)進(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ù)。
蘭亭妙微(www.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn