管理中心左侧栏的“黄金分割”宽度浅谈
2010-08-25 01:03
387 查看
关于“管理中心”的界面设计框架,一般我们都会选择传统的“工”字结构,顶部是形象区,左侧是功能列表区,右侧是操作区,这种结构的功能扩展性和易用性都是非常好的,几乎90%以上的软件系统的后台管理中心都是采用这样的结构。
在实际设计工作中我们发现,用户总是希望能把操作区的区域尽量变大,以最大限度满足业务工作,提高使用效率。我们对信息的浏览习惯于向下扩展,进行纵向滚动。也就是说在显示器分辨率一定的前提下,信息可以在Y轴进行扩展,而X轴却是固定的,这就需要我们在侧栏上多下功夫了。所以我们一般都会设置1-2个hide按键,来控制顶部栏和左侧栏的消隐,这样以来既可以扩大操作区又不影响导航。
但是究竟左侧栏的默认宽度多少才是最合适,既能保持美观,最大限度的放大操作区,又可以不影响操作呢。下面我们就此问题进行一下研究。
我们首先将在左侧栏将会用到的元素罗列一下
滚动条:17px 图标:16px 文字(中文宋体):11px 文字间距:1px
左侧栏需要具备的以下几个条件
1.一般来讲左侧会包括最多不超多4级的树形菜单
2.文字为一行不折行,且一般不会超过8个汉字
3.考虑到可能会出现的滚动条
综上所述,我们进行排版。(如下图)
最后我们计算得出左侧栏的“黄金分割”宽度为204px
在实际设计工作中我们发现,用户总是希望能把操作区的区域尽量变大,以最大限度满足业务工作,提高使用效率。我们对信息的浏览习惯于向下扩展,进行纵向滚动。也就是说在显示器分辨率一定的前提下,信息可以在Y轴进行扩展,而X轴却是固定的,这就需要我们在侧栏上多下功夫了。所以我们一般都会设置1-2个hide按键,来控制顶部栏和左侧栏的消隐,这样以来既可以扩大操作区又不影响导航。
但是究竟左侧栏的默认宽度多少才是最合适,既能保持美观,最大限度的放大操作区,又可以不影响操作呢。下面我们就此问题进行一下研究。
我们首先将在左侧栏将会用到的元素罗列一下
滚动条:17px 图标:16px 文字(中文宋体):11px 文字间距:1px
左侧栏需要具备的以下几个条件
1.一般来讲左侧会包括最多不超多4级的树形菜单
2.文字为一行不折行,且一般不会超过8个汉字
3.考虑到可能会出现的滚动条
综上所述,我们进行排版。(如下图)
最后我们计算得出左侧栏的“黄金分割”宽度为204px
相关文章推荐
- 左侧固定宽度 右侧自适应
- 用CSS、HTML编写一个两列布局的网页,右侧宽度为200px,左侧自动扩展。
- 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏
- 两列布局——左侧宽度固定,右侧宽度自适应的两种方法
- css实现右侧固定宽度,左侧宽度自适应
- 浅谈自适应浏览器宽度变化的瀑布流布局的实现
- css实现右侧固定宽度,左侧宽度自适应
- 两列布局 左侧宽度不变右侧宽度自适应
- CSS左侧宽度固定,右侧自适应
- css实现右侧固定宽度,左侧宽度自适应
- 左侧固定宽度,右侧自适应宽度的CSS布局
- CSS:浅谈自适应宽度圆角按钮实现
- CSS实现左侧固定宽度右侧自适应的固比布局
- css实现左右布局,左侧div固定不变,右侧div宽度自适应
- 页面左侧宽度固定,右侧自适应或者右侧固定宽度,左侧自适应
- 求css左侧宽度固定右侧宽度自适应的办法
- 表单左侧自动调整,应用广泛,不用单独添加宽度
- 老生长谈:CSS实现右侧固定宽度,左侧宽度自适应(转)