Java海阔天空

编程是我的生活,但生活不仅仅是编程。

我们,来谈谈界面设计之一:重心


一个物体要保持平衡,最重要的是校准重心的位置,一个平衡的物体看上去让人心生愉悦,凌乱的姿势会扰乱人的内心。这个世界是由无数个平衡体构成的,就像地球之于宇宙、单车之于速度,平衡产生美感和视觉冲击。

界面设计亦然。现在的应用越来越强调用户体验,在web页面设计中,重心是基础。校准重心就是让页面有平衡感,所见之处爽心悦目。平衡有两种,一种是整体平衡,一种是局部平衡。淘宝、百度百科、QQ空间等网站在这两种平衡上都做得很好,即考虑到了信息的充分传播,又考虑到了视觉的协调性。信息和视觉其实是网站最具价值的两个因素。

现在显示器的分辨率非常多,有标准屏但更多的是宽屏,而宽屏又有不同的比例,在这种大背景下,页面兼容显得尤为重要,这里带来了两个问题:一是如何让屏幕空间不浪费,二是如何兼容各种奇葩的分辨率。百度百科采用的方案值得我们参考。

 


 

上图中,百度百科的导航栏宽度是100%设置的,但正文内容的宽度被固定为1024个像素,显然这是为了兼容过去的标准屏。但是,整个页面看上去平衡感非常好,显示屏效果充实而饱满,内容也很好的展现出来了。我们注意到导航栏中的文字并不是靠左边的,而是与正文内容对齐,这其实就是为了保持重心位置,让重心落实到平衡感最强的那个点上。

有时候,为了保持页面的重心,不得不做一些有价值的平衡工作。我们在阅读新闻时,如果新闻内容占满整个页面宽度,顿时变得毫无水准,为了体现出页面的设计感,往往采用两栏或三栏的形式来展现内容,这是目前所有网站的做法。下面以株洲网为例。

 


 

这样看起来似乎很糟糕,的确,左边是内容,右边空空如也,重心偏移,平衡感打破了,需要对其进行调整。右栏可放的东西很多,不过,放与本条新闻有关联的内容保证信息的聚合显然更符合用户的期待。我们可以从时间、空间、主观、客观等方面进行考虑。下面是解决方案。


 

现在我们来看一个反面案例。对汽车感兴趣的人会上“汽车之家”这个网站,该网站有一个论坛,在论坛的首页,有一个最新精华帖列表。


 

我们从重心的角度来讨论该页面的设计问题。选项卡左边是标题“最新精华帖”,右边是“更多”链接,重心在中间,保持了平衡感。问题在于表格的标题行与内容行有重心偏移现象。第一列是帖子内容,标题“论坛精华帖”居中,但内容靠左,这二者之间的重心是不同的,造成了失衡。对于表格来说,要尽可能让标题与内容位于同一重心。有一点要注意,如果单元格内容很多,占用了比较大的宽度,居左让重心偏左看起来更舒服,如果单元格内容很少,只有三五个字符,不管是居左、居中还是居右只要让标题和内容保持一致都不会有太大的问题。

界面设计是一个锈花工作,大到整体布局,小到一个像素的宽度,一个地方做得不到位都会让设计失去价值。关注开发中的方方面面,这是一种习惯,一种信仰,一种生活态度。这不仅仅是工作。

 


二〇一四年三月四日

 

 

 

posted on 2014-03-04 10:43 李赞红 阅读(1529) 评论(3)  编辑  收藏

评论

# re: 我们,来谈谈界面设计之一:重心 2014-03-04 11:14 海边沫沫

有道理。  回复  更多评论   

# re: 我们,来谈谈界面设计之一:重心 2014-03-04 16:07 博客互推联盟

看到博主分享这么多内容,特别想把这些内容让更多博友看到,如果博主能够经常跟其他博友互动,希望博主能够加入到“博客互推联盟”,这里有很多很勤奋的博友,和您一样,每天在坚持为大家分享好的内容。
在这个互联网快速变革的时代,我们还在坚持,但我们不想孤军奋战,让更多博友看到你,让我们彼此多一点交流,一起发展。  回复  更多评论   

# re: 我们,来谈谈界面设计之一:重心 2014-06-05 10:42 Mr陈

李老师感觉你写的相关技术方面的文章很棒,很精细,但是唯一的缺点就是更新的太少,希望李老师以后可以多多分享  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

<2014年3月>
2324252627281
2345678
9101112131415
16171819202122
23242526272829
303112345

统计

常用链接

留言簿(12)

随笔档案(28)

相册

技术友情博客

搜索

最新评论

阅读排行榜

评论排行榜