UI界面設計 設計規范 ·

案例分享——后臺系統的UI設計規范

經過幾個后臺系統從無到有的設計,從前期的競品分析、設計規范與設計稿到開發最后產品落地。在整個過程中都會遇到很多需要反復思考,考慮實際情況調整設計方案、優化設計交互的過程。在這個過程中參與討論的有產品、設計及開發,三方并行參與最后落地一個可實施優于用戶體驗及視覺的方案。通過每一些細微的點的重復思考、探索慢慢的形成了一些可適用的大多數場景的可尋規律。文章中放入了一些自己項目中的內容作為示例。

 

設計規范存在的目的

1、多個設計師同步設計

大多數是因為同一個項目存在多個設計師橫向合作設計,以避免同一項目出現設計控件混亂問題。

方便把控視覺統一性,提高效率,減少返工率。

 

2、提高開發效率、減少返工率

以及縱向到前端開發他們有了規范的約束后,在開發項目中會大大提高設計稿的還原度,以及規范建立他們自己的控件庫,提高復用率,減少返工的成本,如果做了規范,程序員從視覺規范中了解到哪些控件是可以一次性寫好并能重復調用。在規范的輔助下,開發在搭建全局共用控件時規則更加清晰明了,如按鈕、行間距、字體大小、色值等等。

(網上截圖)

 

3、輔助設計及開發理解業務

如果產品經理在畫原型圖的時候能夠大概遵循設計規范的交互以及排版格式會減少開發再看原型圖和設計稿之間產生歧義,產品原型圖不需要精確,只需按照項目既定的規范排版即可,這樣既不會給產品造成過多的工作量,也方便了開發查看文檔(這個也看每個公司的合作方式,如果產品經理能夠在一定程度遵循設計規范對下游的工作都是有非常大的好處的)。

(公司的原型圖示例,為他們打電話)

 

4、方便產品迭代

產品在設計過程中,經常會得到經過市場檢驗或者由用戶反映體驗相關的一些問題,這時需要調整某些規范的控件交互或者顯示方式,有了設計規范開發可以快速定位控件位置,并根據新調整的樣式項目整體調整,大大提高了工作率。這樣統一修改的方式不錯出現,A頁面與B頁面統一控件用了兩種不同的顯示方式。

 

如何開始著手整理規范

對于我們設計師來說第一次在評審會上面對一個全新產品的時候是非常迷茫,聽著各種功能邏輯,各種解決方案。懵逼狀態(噓………)在項目還沒開始之前,大多數公司的設計是無法有機會和時間參與到前期的調研和競品分析工作中去的。這個時候我們就應該帶著自己更多的疑問去問我們的上游產品經理,我們的用戶群體是誰、年齡段的范圍、是什么樣的產品、解決用戶的什么問題等等。

對于落地實現我們需要清楚開發適配的分辨率是多少(后臺系統一般基于1920*1080尺寸做,然后適配1366*768的屏),對于某些行業還會考慮到用戶使用的顯示器(你永遠不知道你的甲方爸爸是在什么的環境和情況下使用),將我們能想到的各種因素都考慮進去,讓返工率降到最低。

在我們了解清楚項目的背景之后,就可以開始定位產品的設計風格,根據產品原型出幾張產品風格前期定位的示例設計稿,主要包括項目的主體界面風格包含顏色、按鈕、表格、表單、彈框等相關樣式的提現。出這些前期的示例頁面是為了方便組內討論以及跟領導展示到最后的敲定。

1,顏色

主色調的選擇,一般根據用戶群體、用戶使用場景以及產品的定位來進行思考和選取。當然對于后臺系統來說系統可做皮膚功能的擴展,給定用戶一個基礎的色調,然后做幾套配色好的皮膚,讓用戶可以自由選擇。對于公司來說一個項目可能會兼顧多個客戶,客戶都想要根據自己品牌色來做自己的系統,擁有多套可選擇的方案也給后續維護和銷售提供了便利。

 

2,標準字

后臺系統在字體選擇上都比較單一,中文:微軟雅黑、英文:Arial即可。只是注意在給前端開發培訓規范的時候重點提醒他們需要做字體樣式的重置,不然當你后期走查界面的時候一個頁面同時有宋體、有微軟雅黑強迫癥嚴重受不了啊,會非常影響看界面的心情。體會過走查這一步的設計師都懂。

 

 

3,圖標

圖標現在幾乎不用切圖的方式去做了,都在是制作完成后上傳到阿里巴巴的字體圖標庫中。前端調用方便調整大小和顏色也方便,關鍵是怎么處理都不會失真。

 

4,頁面布局框架

我們在設計過程中,還需要考慮我們基于什么樣的尺寸進行基礎設計。劃分哪些區域需要固定尺寸、哪些需要做適配、菜單是否支持收縮功能等等。據統計,使用中系統的用戶的主流分辨率主要為 1920、1440 和 1366,個別系統還存在 1280 的顯示設備。具體適配最低和最高分辨率也可根據你的用戶使用情況來決定,我們一般基于1920設計,下限考慮1366的分辨率即可。頁面包括頂欄、頁簽、各應用左側菜單、主體內容等區域。各系統有部分差異根據自身情況來定。

 

5,按鈕

最按鈕是交互設計中必備的元素,它在用戶和系統的交互中承擔著非常重要的作用。后臺中常見的按鈕類型分為線性按鈕、面狀按鈕、文字按鈕、圖標按鈕、文字+圖標按鈕。規范中要寫出按鈕的樣式包括寬高、圓角以及文字按鈕的字數一般限制6個以內(這個是給產品同事看,有時候會拿到原型一個按鈕字數特別長。想想看一個正常的按鈕字數太多了用戶都需要花很長時間去讀取這個按鈕的功能然后再操作,非常影響用戶體驗)。

按鈕的寬度給一個常規的寬度和高度,然后操作正常寬度文字離邊框的間間距是多少都需要寫清楚。

以及按鈕的各種狀態:默認狀態、鼠標懸停、焦點獲取、按住/激活、禁用

 

6,表單

常見表單是由多個列表項構成的。而每一個列表項都是由最基本的標簽(標題)和輸入框組成,常規的表單包括單選、多選、下拉選、輸入框、時間選擇、開關選擇、圖片附件上傳等眾多控件。

標簽與控件之前的對齊方式有左標簽、頂部標簽、行內標簽

左標簽是比較常見的對齊方式,對與后臺系統也是比較常用的一種方式,比較符合pc端常規顯示屏橫向空間比較充足的場景

頂部標簽是標簽在控件的上方,標簽可以和控件很整齊的靠左對齊,對于橫向空間不足的情況是一種很好的方案,但它同時也增加了整個表單的豎向高度,表單內容太多時,用戶可能需要多次使用滾動條才能填完整個表單。

行內標簽非常大的節省了空間,但是填寫錯誤率非常高,當空間獲取焦點的時候標簽名就消失了,用戶可能忘記了當前填寫的標簽是什么內容,需要用戶的記憶成本。

每個標簽都有它的優缺點根據自己的產品選擇一種最適合自己產品的方式,規范中確定標簽的對齊方式,每個控件的寬高度,控件之間的間距以及控件的各種狀態(默認、激活、禁用、錯誤提示)。表單填寫中錯誤提示的引導尤為重要,例如我們在填寫手機號碼時,用戶填寫可能少填了一位提示文字如果是“您填寫的號碼有誤”,這時候需要用戶自己去查找錯誤點在哪里。如果我們能快速給用戶定位錯誤點給出提示“手機號不足11位”,這樣的提示能幫助用戶快速正確填寫完表單,提高用戶的工作效率。

 

7,表格

表格,對于大家來說再熟悉不過了,表格在后臺系統設計中應該能占40%左右的比重,它看似簡單橫豎條。卻有著非常多細小卻影響用戶體驗的小細節。總結幾點我每次寫規范會考慮到的

操作列按鈕:每個按鈕字數不得超過6個字。超過4個的按鈕采用折疊方式,用“更多”收縮多余按鈕

列數太多:默認展示范圍:3-8列,若出現更多,可固定重要列,剩余列滾動條展示(做好能支持用戶隊列的自動排序)

列表的寬度:寬度自適應,但根據字段的重要性顯示,重要字段優先完整顯示,出寬度限以“...”代替,鼠標經過展示全部內容

列標題:表頭列標題最多輸入8個字符(在復雜的后臺系統中,會出現字數較多的標題,這些需要和產品共同討論選取簡短又能表達清楚含義的名稱)

表行:表格行高可設置為字體高度的2.5倍到3倍,采用斑馬線方式展示,加強視覺流的橫向引導。表頭與表體的顏色做區分

滾動條:表格內容超過一屏需要顯示豎向滾動條時, 需要固定表頭和頁碼。只需滾動表體內容部分

空數據:表格某部分無數據時用“-”來填充顯示,對于數據為零的單元格,填上0

對齊:表格數值型內容左對齊,非數值型右對齊

 

8,彈框

彈框主要分為兩個大類模態彈框和非模態彈框,他們最大的區別就是是否強制用戶交互。模態彈框會打斷用戶的當前操作流程,只允許用戶在當前彈窗上進行操作,非模態則反之。后臺中常見的有

模態框:對話框、抽屜式側滑窗

模非模態:警示框、氣泡提示框、通知提示

我們在寫彈框規范時,應了解各自項目中需使用彈框的有哪些內容,給出相關大小彈框的比例,哪些為固定尺寸,哪些為適配比例。對于通知提示給出停留多少時間后自動消失。

 

9,缺省狀態

缺省頁面是當頁面沒有數據、用戶沒有建立資料或者網絡連接不通暢的情況下所展現的頁面。為了緩解用戶面對這類情況產生焦慮情緒以及面對這類情況的手足無措,設計師可以用一些插畫和文字的結合來引導用戶進行下一步的操作。

 

總結

經過設計師的規范整理,最終需要落地實現才是最重要的一步。規范確立以后我們需要對前端同事進行規范內容的培訓,讓前端同事清楚每一塊內容的細節部分。規范培訓的這步工作非常重,因為前端同事也會分好幾個人一起項目,同時一個大的產品都會分成多個小模塊來逐步開發,這樣的工作模式是在無形中會增加樣式不統一的幾率。所以我們在開發前期要做好培訓這一步,也會減少后期的返工量。規范也需要給標注(我一般上傳到藍湖),方便前端開發根據規范樣式組建他們的控件庫。在實際工作中,也會有一些特殊的控件是由根據前端提供的控件庫讓我們來選擇合適的控件然后更改樣式。現在各種好用又比較完善的控件層出不窮,選擇現有的控件可以節省開發很多的工作時間。

把公司一個項目的規范發出來大家學習互相討論一下。

 

原文作者:FM_Design?