浅析网站后台设计(简述后台设计的步骤)

关于后台系统设计的项目,参与了好几个。遇到的问题,非常多,客户对界面风格一直不满意,导致返工率很高!

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

浅析网站后台设计(简述后台设计的步骤)

后台系统本身就是数据的统计及展示,所以常见的界面也就那样子了,所以针对后台系统做了总结归纳。

确定页面布局结构

01

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

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

左右布局

02

上下布局的结构在传统网页中非常常见,而在后台系统中并不常用。这种布局的优点是符合用户认知,遵循用户从上而下浏览页面获取信息的习惯;

贯穿全屏的导航栏设计也使页面显得正式稳重,除却导航栏之后相对较大的空间也为内容展示提供了比较充足的空间。

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

上下布局

03

拥有侧边导航的左右布局页面结构,是在后台系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起,相对比较灵活,

同时文字横向排列的形式可以在竖向上展示更多内容,因此侧边导航比顶部导航能容纳更多一级内容,而层叠式的内容展示也使得一、二、三级导航内容关联更为顺畅,可扩展性也得到加强;

由于侧边栏可以常驻在页面左侧,所以对于右侧内容的指示性也优于顶部导航,切换起来也更加方便。

但同时,因为侧边栏的常驻,导致右侧内容区域空间被挤掉部分,所以相对上下布局的结构,左右布局的结构,内容区域空间会比较小;

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

总结

04

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

表单(Form)页面示例

咳咳咳,紧接着,我来插播一条广告~~~,下面是我的简书二维码,我在简书等你哦~

发表评论

登录后才能评论