一、要點說明

之前的ONLINE ERP系統的設計風格還是10年前的風格，新客戶看到ONLINE ERP系統就會說這系統怎么這么老舊，再加上現在客戶的電腦屏幕越來越大、分辨率高，屏幕顯示非常高清，ONLINE ERP系統的字顯得很小，用戶看起來會很吃力，還有自定義單據和流程圖，在大屏幕時會顯示在左上方，使整個屏幕中間和右邊會顯示很空曠，為解決以上問題，ONLINE ERP系統進行了UI新修改。

主要修改如下：

1、ONLINE ERP 扁平化設計

2、文字大小用戶自選

3、簡繁不同字體，簡體使用微軟雅黑，繁體使用微軟正黑體，字體更清晰好看

4、頁面布局自適應屏幕大小

適用版本：2022-1-20以后的365A、365B版本。

二、功能說明

1、客戶端、瀏覽器新登錄界面

2、扁平化的設計-系統畫面

◇ 扁平的信息架構意味著更好的被各年齡層用戶所接受，用戶在產品上完成一個任務，必然會從一個地方探索著到達目的地，在產品中清晰的 UI導航是非常重要的。

◇ 本次設計沿用現有的優良信息架構、交互模型，研發減少時間成本，用戶減少學習成本。

3、文字大小用戶自選

◇ ONLINE ERP 為用戶提供了小、中、大三種文字大小選擇，切換到大字體時，欄位名稱、欄位內容和按鈕上的文字都不會有遮擋或顯示不全的問題。

4、簡繁使用不同字體，字更清晰更好看

◇ 簡體使用字體：微軟雅黑

◇ 繁體使用字體：微軟正黑體

5、頁面布局自適應屏幕大小-WIN單據頁面

◇ 表頭原3列欄位調整成4列欄位，大屏幕時欄位不會再偏左邊留右邊一片空白，現欄位會全屏自適應擺放。

◇ 表頭變成4列欄位，表尾不常用的欄位也調整到表頭，可通過表頭的系統字段設計把不使用的欄位停用隱藏，這樣表身輸入區域空間更大，避免了原來屏幕在低分辨率時表身只有兩三行輸入區域空間的問題。

6、頁面布局自適應屏幕大小-WEB單據頁面

◇?WEB單據頁面以[報銷單WEB]頁面為例說明，原表身可視輸入區域空間只有幾行，現有調整表頭欄位和附件區位置，讓表身輸入區域空間更大

◇?按鈕、圖標和背景的顏色有足夠高的對比度，更可視直觀

◇?文字視覺更清晰

7、頁面布局自適應屏幕大小-流程圖

◇?流程圖原畫布是固定大小，大屏幕時會顯小，現增加支持自定義畫布大小，可放大

◇?流程圖的按鈕和文字都增加支持自定義大小和顏色

◇?大屏幕時流程圖原來會偏左上角顯示留右邊一大片空白區，現會屏幕自適應居中顯示

8、頁面布局自適應屏幕大小-自定義單據

◇?自定義單據的布局顯示也做了調整，大屏幕時原來單據內容會偏最左邊開始顯示，留右邊一大片空白，現在單據內容會按屏幕剩余空間以2：8比例自適應顯示