交互規範有效地規定了產品如何與用戶進行交互的規則和標準,這篇文章里,作者便梳理了B端產品的交互規範,一起來看看,或許會對產品經理、產品開發人員、互動設計師等人群有所幫助。
交互規範有效地規定了產品如何與用戶進行交互的規則和標準,這篇文章里,作者便梳理了B端產品的交互規範,一起來看看,或許會對產品經理、產品開發人員、互動設計師等人群有所幫助。
從業B端產品7年+,大大小小公司對交互規範有著不同的要求,但是萬變不離其宗,交互總有其底層規範要求,那麼接下來跟大家詳細說明一下交互規範細則,超級詳細的交互規範來啦!
WHAT:交互規範是什麼?
產品交互規範,也稱為介面交互規範或用戶介面規範,是一套規定產品如何與用戶進行交互的規則和標準。它包括設計元素的布局、動作反饋,以及對產品的使用流程和功能邏輯等各個方面的設定和控制。
交互規範重點在於人機互動的友好性和流暢性,用起來順手且符合商業目的就是交互規範最好的詮釋。
WHY:目的及意義
WHO:適合哪些讀者
產品經理,產品開發人員,互動設計師,產品UI設計人員。
一、色彩 1. 色彩體系
分成兩個層面:系統級和產品級。
1)系統級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn,螞蟻組件對整體交互規範有著細緻且順滑的操作演示。假設公司內部有專門的設計部門,可以設計部門整體定義公司色系以及字體等等。
2)產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。
2. 產品級色彩體系
1)品牌色的應用
品牌色體現產品以及品牌特色,加深使用者對品牌的印象。比如支付寶系列操作均是藍色為主,微信主色調為綠色和白色,抖音是黑色系。
2)功能色
功能色代表了明確的信息以及狀態,比如錯誤提示,失敗提醒,成功提示等等。在一套產品體系下,功能色儘量保持一致,比如新增,刪除等功能按鈕色彩需要跟主題色保持一致。
3. 系統建議
公司重要對外宣傳系統以及內部主系統均使用品牌色,突出公司特色;
另外一個頁面儘量不要超過3種顏色,並且是在同一標準色彩體系內,儘量不要自己去色彩庫隨意選取色彩。
二、字體 1. 字體定義
字體是體系化介面設計中最基本的構成之一。
在中後台視覺體系中定義字體系統,我們建議從下面四個方面著手考慮:主字體,字階與行高,字重,字體顏色。
2. 主字體
為了保證在多數常用顯示器上的用戶閱讀效率最佳,根據電腦顯示器距離舒適度以及用戶觀感舒適度,確認導航為16px,標題為16px,正文為14px,說明為12px。
3. 字階與行高
字階是指不同尺寸的字體。行高就是一行字的高度,包裝在字體外的邊框盒子的高度。
建議的主要字體為 14,與之對應的行高為 22。其餘的字階的選擇可根據具體情況進行自由的定義。建議在一個系統設計中,字階的選擇儘量控制在 3-5 種之間,就跟衣服搭配一樣,顏色不要過多,簡潔舒適為宜,字體字號在一個區間範圍內。
4. 字重
字重為字體的粗細程度,建議用 regular 以及 medium 的兩種字體重量。
5. 字體顏色
黑色為主,正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。
三、對齊
文案類最好為左對齊,數字類最好為右對齊,表單類間距建議8px,文字右對齊,結尾沒有冒號。
四、按鈕
市面上比較主流的為這四種按鈕,主按鈕,線性按鈕,次按鈕和純文字按鈕。具體使用規則和使用場景如何呢?我們應該從哪些方面下手去設計按鈕?下面給大家一一進行解答。
1. 主按鈕
主按鈕為主要的按鈕。引導用戶進行點擊操作,一個按鈕區域最多使用一個主按鈕。
場景應用:可應用於確認、新增、保存等等,你想引導用戶做何操作,就可以把視覺焦點集中在哪個按鈕上。比如退款操作時,商家本質希望用戶不退款,主按鈕為返回或是再想想的按鈕。
需要注意的是不要在同一個表單中使用多個主按鈕,1-2個即可,次按鈕或是線性按鈕多於5個時可以向上摺疊收起。
2. 線性按鈕&次按鈕
線性按鈕&次按鈕兩種按鈕均可點擊,但是功能均弱於主按鈕。如果希望引導用戶進行點擊,可以選擇線性按鈕;若希望用戶儘可能少點擊或是不點擊可以選擇次按鈕。
場景應用:一般在大表單頁面批量導入,下載均為次按鈕或是線性按鈕。
3. 純文字按鈕
純文字按鈕就是有顏色的文字按鈕,可進行點擊。
場景應用:一般應用於表單中大面積需要點擊的操作,比如查看,刪除,編輯等等,對表單中每一行進行的操作。
4. 謹慎按鈕
謹慎按鈕用於特殊情況下防止誤操作的按鈕。
場景應用:一般應用於刪除/付款/退款/修改權限/移除等危險操作,大部分都需要再次確認才可以。
5. 按鈕順序
前面介紹了那麼多種按鈕以及應用場景,那麼按鈕應該如何進行排列,需要遵循何種規則呢?
1)閱讀習慣
大家可以閉著眼睛想一下,正常我們閱讀的習慣是從左到右,從上到下,表單信息閱讀完畢後需要進行操作,最好都放在右上方。
2)相關性原則
讓相關的操作按鈕更相近,比如上一步和下一步,保存和取消,增刪改查,讓這些兄弟按鈕距離挨得更近一些。
五、導航
導航是B端系統的地圖索引,幫助用戶可以順利到達目的地。導航對於B端產品交互而言,是系統之眼,一方面清晰展示系統結構,另一方面幫助用戶快速找到他們想要的信息。好的導航清晰操作順滑,差的導航會讓用戶沒有二次進入的想法,所以好的導航是系統成功的一半。
市面上主流的導航交互為全局導航和頁內導航,好的導航如何進行設計,我們需要選取哪種導航模式?繼續一起探索吧。
1. 全局導航
1)側邊豎嚮導航
使用規則:
需要特別注意豎嚮導航的排列順序,較為複雜的企業級系統從上到下一般依次為:
優點:
缺點:
層級入口較多時,用戶下鑽縱深體驗稍差。
2)頂部橫嚮導航
使用規則:
優點:
缺點:
1)麵包屑
麵包屑幫助定位菜單以及返回菜單,可以顯示當前頁面的路徑,是比較常用的導航方式。
使用規則:
顯示當前頁面路徑,方便用戶進行返回操作,最好大於等於3個層級進行使用;
2)Tab
使用規則:
較常應用於顯示頁面不同內容構成,比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。
3)步驟條
使用規則:
較常應用於一步步按照某種提示去完成任務,任務有明確的先後順序;步驟一般為1-5步。
結語
產品交互規範的內容模塊還是較多的,希望這篇文章對你的產品交互能力有所提升,歡迎螢幕前的你點贊收藏支持一下。另外交互規範是產品架構的基礎的地基,具體樓房蓋成什麼樣還需要用心去思考以及藉助公司內部UI和UE的力量。
本文由 @月亮漫談 原創發布於人人都是產品經理。未經許可,禁止轉載。
題圖來自 Unsplash,基於 CC0 協議