后臺系統(tǒng)界面設(shè)計踩過的那些坑

2022-6-10    博博

超實用的后臺設(shè)計避坑指南

源起


由于之前曾經(jīng)在后臺系統(tǒng)開發(fā)公司工作過的緣故,所以有些后臺管理系統(tǒng)界面的產(chǎn)出。后來雖然從那家公司離職,但也接到過一些后臺界面設(shè)計和優(yōu)化的項目,前前后后也快十來個了。

這里想分享下一些關(guān)于后臺界面設(shè)計的觀點(tucao)。





一,定義好表格規(guī)范強(qiáng)于為每個表格出設(shè)計稿


表格是構(gòu)成后臺使用界面的重要組成之一,聚合了眾多信息并提供操作入口。并且后臺系統(tǒng)中一般會需要數(shù)量眾多的表格。


這種情況下如果每張表格都出設(shè)計稿,是一件很費時費力的事情,更關(guān)鍵的是對開發(fā)落地不一定有什么實際意義。

所以這種情況下,定義好表格規(guī)范要遠(yuǎn)遠(yuǎn)強(qiáng)于為每個列表出設(shè)計稿。


下圖是在某系統(tǒng)設(shè)計中定義的表格規(guī)范,定義了不同信息之間的間距,信息塊內(nèi)部的浮動間距等。




二,考慮未來頁面信息密度增高的情形,避免使用過大的組件。


2019年在某系統(tǒng)設(shè)計中,由于初期頁面內(nèi)容比較少,為了讓用戶擁有更大的點擊操作區(qū)域,利用頁面空間,所以讓下拉菜單,輸入框等控件略微大了一點點。


后來頁面內(nèi)容逐步增多,特別是篩選功能越來越多時,就尷尬了。使用原有的控件,篩選區(qū)域就會臃腫不堪,擠占信息展示區(qū)域的空間。新設(shè)計控件又會與其他頁面不統(tǒng)一,修改工作量會很大。


所以即便頁面信息少,也要考慮頁面信息密度增高的情形,避免是使用過大的組件。




三,根據(jù)用戶常用的顯示器分辨率設(shè)計后臺


一般情況下我們會按1920px的寬度出設(shè)計稿,然后再交付給開發(fā)做自適應(yīng)。

但是后來發(fā)現(xiàn)頁面信息密度很高時,簡單粗暴的自適應(yīng)難免會不盡人意。


并且實際工作環(huán)境中,很多后臺的使用者幾乎全部情形都是用筆記本,這種情形下使用筆記本的尺寸設(shè)計更為合適,或者使用1440px的寬度出設(shè)計稿,平衡對大小屏幕的設(shè)計考慮。


最好的方式當(dāng)然是與需求方充分溝通,商定設(shè)計稿寬度。很多需求部門的電腦都是統(tǒng)一采購的,顯示器分辨率是全部統(tǒng)一的。


2020年某ERP設(shè)計項目,一張表單以1920px寬度出了設(shè)計稿,后來應(yīng)甲方需要,另外單獨出了一版1200px版本。




四,與開發(fā)討論使用何種組件庫,基于組件庫提供界面優(yōu)化方案


在實際的后臺項目開發(fā)過程中,很多項目并不使用自己定制的組件庫,而是使用第三方框架。

這種情形下最合適的方式是與開發(fā)討論使用何種組件庫,基于組件庫提供界面優(yōu)化方案,基于組件庫提供高密度復(fù)雜頁面的編排,重難點頁面的設(shè)計。


設(shè)計的產(chǎn)出應(yīng)該以實際實現(xiàn)效果為導(dǎo)向,而不是止步于設(shè)計稿。



幾個常用的組件庫

https://www.iviewui.com/

https://element.eleme.cn/#/zh-CN/resource

https://ant.design/docs/spec/introduce-cn



五,嘗試考慮使用卡片展示列表信息


后臺頁面中經(jīng)常會存在大量列表的情形,如果某個列表字段不多并不會隨便增加,可以嘗試一排信息放在一張卡片上,使用卡片展示列表信息,改變頁面單調(diào)的版式。


不過字段,操作按鈕一旦增加,就比較麻煩了。




六,導(dǎo)航區(qū)不要過大,盡量給工作區(qū)留出空間。


如果使用固定寬度的導(dǎo)航區(qū),過寬的導(dǎo)航區(qū)會擠占工作區(qū)的空間,在筆記本等小屏幕電腦上會更加明顯。所以需要合理控制大小。




七,靈活使用不同板塊樣式,分隔方式區(qū)分高密度頁面中的信息


后臺設(shè)計中經(jīng)常會遇到一個頁面需要顯示很多不同類型信息的需求,可以使用不同底色,卡片,不同層級的分隔線來分割版面,實現(xiàn)不同類型信息的區(qū)別顯示。


應(yīng)客戶需要,這張客戶詳情頁面只能以彈窗形式出現(xiàn)。反復(fù)使用底色分割,在盡可能簡潔的同時將不同信息區(qū)分開來。




結(jié)語


以上的觀點僅代表個人的看法,可能有一些無法令人接受,歡迎各位一起探討,或者給出更好的解決方案。


感覺有幫助的話點個贊喲~


作者:目醒設(shè)計

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

分享本文至:

日歷

鏈接

個人資料

存檔