源起

由于之前曾經在后臺系統開發公司工作過的緣故，所以有些后臺管理系統界面的產出。后來雖然從那家公司離職，但也接到過一些后臺界面設計和優化的項目，前前后后也快十來個了。

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

1，定義好表格規范強于為每個表格出設計稿

表格是構成后臺使用界面的重要組成之一，聚合了眾多信息并提供操作入口。并且后臺系統中一般會需要數量眾多的表格。

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

所以這種情況下，定義好表格規范要遠遠強于為每個列表出設計稿。

下圖就是在某系統設計中定義的表格規范，定義了不同信息之間的間距，信息塊內部的浮動間距等

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

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

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

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

3，根據用戶常用的顯示器分辨率設計后臺

一般情況下我們會按1920px的寬度出設計稿，然后再交付給開發做自適應。

但是后來發現頁面信息密度很高時，簡單粗暴的自適應難免會不盡人意。

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

最好的方式當然是與需求方充分溝通，商定設計稿寬度。很多需求部門的電腦都是統一采購的，顯示器分辨率是全部統一的。

2020年某ERP設計項目，一張表單以1920px寬度出了設計稿，后來應甲方需要，另外單獨出了一版1200px版本。

4，與開發討論使用何種組件庫，基于組件庫提供界面優化方案

在實際的后臺項目開發過程中，很多項目并不使用自己定制的組件庫，而是使用第三方框架。這種情形下最合適的方式是與開發討論使用何種組件庫，基于組件庫提供界面優化方案，基于組件庫提供高密度復雜頁面的編排，重難點頁面的設計。

設計的產出應該以實際實現效果為導向，而不是止步于設計稿。

幾個常用的組件庫

https://www.iviewui.com/

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

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

5，嘗試考慮使用卡片展示列表信息

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

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

6，導航區不要過大，盡量給工作區留出空間。

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

7，靈活使用不同板塊樣式，分隔方式區分高密度頁面中的信息

后臺設計中經常會遇到一個頁面需要顯示很多不同類型信息的需求，可以使用不同底色，卡片，不同層級的分隔線來分割版面，實現不同類型信息的區別顯示。

應客戶需要，這張客戶詳情頁面只能以彈窗形式出現。反復使用底色分割，在盡可能簡潔的同時將不同信息區分開來。

結語

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

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

總結

以上是生活随笔為你收集整理的pyqt界面屏幕分辨率自适应_后台系统界面设计踩过的那些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。