关于网站的页面设计, 有几点要注意的地方就是:
页面的美观并不意味着我们要使用很多的图片、很多种颜色。
有时候, 你会发现, 某某网站页面并没有使用什么图片, 也没有使用很多颜色, 而是很简介。但却给人的感觉是很美观。这或许是一个牛人设计师的杰作。但是作为一个普通网站开发人员来讲, 如果能够好好把握以下几点。 同样都可以让页面达到美观的效果。
编码过程中, 我们需要基于:文字、图片和控件这3类元素来思考。
借鉴一下《写给大家看的设计书》一书中所提到的几点排版原则,那就是:
重复——同样作用的元素的风格、颜色统一
对比——不同作用的元素,要有鲜明的对比,可以使用字体、颜色等等方面来达到对比的效果。
对齐——灵活使用左对齐、右对齐、居中对齐等对齐方式,让元素的排列显得整齐、规矩。
亲密性——有关联的元素要尽可能“亲密”地排列,而无关联的元素之间要有足够的“距离”来产生美。
还是用例子来说明,首先我们来看图4中的界面:

图4 示例界面
这个界面中有不少问题,让我们采用上面的四点原则来检查一下。
重复:这一点界面上体现的还不错,各种文字和界面的风格还是很统一的。
对比:这里的问题在于上面的标题部分和下面的内容部分之间的对比不够强烈,仅仅是对字体加粗,不能够给人一种很醒目的感觉。
对齐:内容部分的文字标签和控件都采用了左对齐,但第二行的文字过长,看起来比较乱;并且下面的两个按钮与内容框之间没有对齐(应该是右对齐)
亲密性:文字标签和控件本来应该是比较“亲密”的关系,但是却因为都采用左对齐的方式,离得比较远。
针对以上问题,我们可以对上面的界面做出一些调整,如图5所示:

图5 调整后的界面
首先我们把标题的字体调大,加强了与内容文字的对比,显得更加醒目;然后把标签文字设为右对齐,与相应的控件的亲密性大大加强;最后调整最下面的按钮,使其与内容框右侧对齐,达到了美观的目的。
由此看来,只要我们理解并使用好这九个字,就能够设计出比较美观的界面了。
本文内容摘自于: http://blog.csdn.net/lingyun2005/article/details/6596859
除非注明,干草博客文章均为原创,转载请以链接形式标明本文地址
