Icons8 Web APP 重設計，除了使用新的圖標，整個設計風格上都進行了調整。

確定頁面布局結構

頁面的布局結構，是頁面基本框架，后續(xù)的設計都是在這個大的框架下完成的，所以確定頁面基準設計尺寸后，需要跟交互設計師或產品經理配合，根據實際業(yè)務情況討論確定頁面布局結構。

一般來講，后臺系統(tǒng)有兩種最典型的頁面布局結構：左右布局與上下布局。

△ 上下布局

上下布局的結構在傳統(tǒng)網頁中非常常見，而在后臺系統(tǒng)中并不常用。這種布局的優(yōu)點是符合用戶認知，遵循用戶從上而下瀏覽頁面獲取信息的習慣；貫穿全屏的導航欄設計也使頁面顯得正式穩(wěn)重，除卻導航欄之后相對較大的空間也為內容展示提供了比較充足的空間。

缺點是頂部一級導航受頁面寬度限制，數量會比較局限，同時導航層級較深時，交互效率也不夠理想。所以該布局適合那些導航層級較少，內容展示充分的后臺系統(tǒng)設計。

△ 左右布局

擁有側邊導航的左右布局頁面結構，是在后臺系統(tǒng)中更常見的頁面布局形式。側邊導航欄可以固定也可以收起，相對比較靈活，同時文字橫向排列的形式可以在豎向上展示更多內容，因此側邊導航比頂部導航能容納更多一級內容，而層疊式的內容展示也使得一、二、三級導航內容關聯(lián)更為順暢，可擴展性也得到加強；

由于側邊欄可以常駐在頁面左側，所以對于右側內容的指示性也優(yōu)于頂部導航，切換起來也更加方便。但同時，因為側邊欄的常駐，導致右側內容區(qū)域空間被擠掉部分，所以相對上下布局的結構，左右布局的結構，內容區(qū)域空間會比較??；

一般為了與頁面其它區(qū)域做區(qū)分，導航部分會用更深的顏色、安排更多的圖標和文字，這也導致了在視覺上左右布局的頁面不夠平衡，會有左邊重右邊輕的感覺。

這塊的重點是如何把我們設計師的想法更可視化更直觀準確的傳達給開發(fā)工程師。所以那張表是啟發(fā)而非標準。

△ 控制臺（Dashboard）頁面示例（素材圖片作者：Coderthemes）

△ 表單（Form）頁面示例

簡約設計

這個簡約的網站就是給時下正在流行的 Atomize Design System 所搭建的，它闡述了這種設計系統(tǒng)的運作機制和最佳實踐。

差不多就寫完了...大家覺得有幫助的話，記得點贊和轉發(fā)～