管理中心左侧栏的“黄金分割”宽度浅谈

Recommand
大连/UI设计师/15年前/11660浏览
管理中心左侧栏的“黄金分割”宽度浅谈Recommand

关于“管理中心”的界面设计框架,一般我们都会选择传统的“工”字结构,顶部是形象区,左侧是功能列表区,右侧是操作区,这种结构的功能扩展性和易用性都是非 

        关于“管理中心”的界面设计框架,一般我们都会选择传统的“工”字结构,顶部是形象区,左侧是功能列表区,右侧是操作区,这种结构的功能扩展性和易用性都是非常好的,几乎90%以上的软件系统的后台管理中心都是采用这样的结构。

        在实际设计工作中我们发现,用户总是希望能把操作区的区域尽量变大,以最大限度满足业务工作,提高使用效率。我们对信息的浏览习惯于向下扩展,进行纵向滚动。也就是说在显示器分辨率一定的前提下,信息可以在Y轴进行扩展,而X轴却是固定的,这就需要我们在侧栏上多下功夫了。所以我们一般都会设置1-2个hide按键,来控制顶部栏和左侧栏的消隐,这样以来既可以扩大操作区又不影响导航。

        但是究竟左侧栏的默认宽度多少才是最合适,既能保持美观,最大限度的放大操作区,又可以不影响操作呢。下面我们就此问题进行一下研究。

我们首先将在左侧栏将会用到的元素罗列一下
滚动条:17px   图标:16px  文字(中文宋体):11px 文字间距:1px

左侧栏需要具备的以下几个条件
1.一般来讲左侧会包括最多不超多4级的树形菜单
2.文字为一行不折行,且一般不会超过8个汉字
3.考虑到可能会出现的滚动条

综上所述,我们进行排版。(如下图)

最后我们计算得出左侧栏的“黄金分割”宽度为204px

10
Report
|
135
Share
相关推荐
Material You 为你而来!
Homepage recommendation
文章
3D与UI结合的设计探索
Homepage recommendation
文章
为了设计更好的深色模式
Homepage recommendation
文章
1复盘
1复盘
1复盘
1复盘
作品收藏夹
面向未来的设计师
Homepage recommendation
文章
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
神奇李特WoderLee
Homepage recommendation
MOVA 扫地机器人-活水版
Homepage recommendation
相关收藏夹
1复盘
1复盘
1复盘
1复盘
作品收藏夹
设计/知识
设计/知识
设计/知识
设计/知识
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
作品集
作品集
作品集
作品集
精选收藏夹
作品收藏夹
详情页
详情页
详情页
详情页
精选收藏夹
作品收藏夹
大家都在看
Log in