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

Icons8 Web APP 已重新设计。 除了使用了新的图标之外，整个设计风格也进行了调整。

确定页面布局结构

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

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

△ 上下布局

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

缺点是顶级导航受页面宽度限制，数量也会受到限制。 同时，当导航层次较深时，交互效率并不理想。 因此，这种布局适合导航层级较少、内容显示足够的后台系统设计。

△ 左右布局

带有侧边导航的左右布局页面结构是后端系统中比较常见的页面布局形式。 侧边导航栏可以固定也可以折叠，比较灵活。 同时，文本的水平排列可以垂直显示更多的内容，因此侧边导航比顶部导航可以容纳更多的一级内容，而层叠内容的显示也使得一级、二级和三级的关联性——层级导航内容更加流畅，扩展性也增强；

由于侧边栏可以永久位于页面左侧，因此它比顶部导航更能指示右侧的内容，并且切换也更方便。 但同时，由于侧边栏的永久存在，右侧的部分内容区域空间被挤出。 因此，与自上而下的布局结构和左右布局结构相比，内容区域空间会更小；

一般来说，为了与页面的其他区域区分开来，导航部分会使用较深的颜色，并安排更多的图标和文字。 这也导致页面的左右布局在视觉上不平衡，有左侧比右侧重的感觉。

本节的重点是如何更直观、更直观、更准确地将我们设计师的想法传达给开发工程师。 所以这张桌子是一个灵感而不是一个标准。

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

△ 表单页面示例

简单的设计

这个简单的网站是为流行的 Atomize 设计系统构建的。 它解释了该设计系统的运行机制和最佳实践。

快完成了...如果觉得有帮助的话记得点赞转发哦~