【网页设计】如何更好的设计高质量的后台系统

Icons8 Web APP 重设计，除了使用新的图标，整个设计风格上都进行了调整。

确定页面布局结构

页面的布局结构，是页面基本框架，后续的设计都是在这个大的框架下完成的，所以确定页面基准设计尺寸后，需要跟交互设计师或产品经理配合，根据实际业务情况讨论确定页面布局结构。

一般来讲，后台系统有两种最典型的页面布局结构：左右布局与上下布局。

△ 上下布局

上下布局的结构在传统网页中非常常见，而在后台系统中并不常用。这种布局的优点是符合用户认知，遵循用户从上而下浏览页面获取信息的习惯；贯穿全屏的导航栏设计也使页面显得正式稳重，除却导航栏之后相对较大的空间也为内容展示提供了比较充足的空间。

缺点是顶部一级导航受页面宽度限制，数量会比较局限，同时导航层级较深时，交互效率也不够理想。所以该布局适合那些导航层级较少，内容展示充分的后台系统设计。

△ 左右布局

拥有侧边导航的左右布局页面结构，是在后台系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起，相对比较灵活，同时文字横向排列的形式可以在竖向上展示更多内容，因此侧边导航比顶部导航能容纳更多一级内容，而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅，可扩展性也得到加强；

由于侧边栏可以常驻在页面左侧，所以对于右侧内容的指示性也优于顶部导航，切换起来也更加方便。但同时，因为侧边栏的常驻，导致右侧内容区域空间被挤掉部分，所以相对上下布局的结构，左右布局的结构，内容区域空间会比较小；

一般为了与页面其它区域做区分，导航部分会用更深的颜色、安排更多的图标和文字，这也导致了在视觉上左右布局的页面不够平衡，会有左边重右边轻的感觉。

这块的重点是如何把我们设计师的想法更可视化更直观准确的传达给开发工程师。所以那张表是启发而非标准。

△ 控制台（Dashboard）页面示例（素材图片作者：Coderthemes）

△ 表单（Form）页面示例

简约设计

这个简约的网站就是给时下正在流行的 Atomize Design System 所搭建的，它阐述了这种设计系统的运作机制和最佳实践。

差不多就写完了...大家觉得有帮助的话，记得点赞和转发～