在长期的网站建设过程当中,渐渐的认识到网页布局是那么的重要,无论是布局还是设计,个性如果独特,必然会让网站增色不少。对于如何进行网站布局与各种设计提一些建议性的意见。
、记住,如果不是特别重要的文字说明,一般情况别轻易让文字居中和使用粗体或斜体字符。
第二、利用短的段落,加点列示,适当的整块引用文字,用水平线分节,用影像地图指引主要链接,使你的页面能吸引人和容易阅读。
第三、不要在每一个页面里使用不同风格的图标。
第四、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力。彩色分隔条也能在不扰乱带宽的情况下增强图形感。
第五、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读。要把背景做得好,光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含有图像,对比度要较低才不至于过于分散读者的注意力。
第六、在添加图片的时候,即img标签里记得要加上alt标记。
第七、也可以在分隔条上使用ALT标记,这样就使得使用基于文本的浏览器的读者能看到一些更有趣的东西,而不只是一条直线。
第八、把重要的内容尽量的放在页首,而不是页尾,之所以要这样做,是因为一般的网站浏览者是不会往下看那么远的。
第九、不要让什么东西看起来象是一个按钮却不起按钮的作用。
第十、带有下划线的文本和元素
很意外地发现大家近争先恐后地使用下划线这种元素。当然,能够在各式各样设计元素中灵活运用的下划线,自然不是设计工具默认的下划线效果或者文本链接下的那种文本下划线。
下划线原本运用在文本当中,用来强调内容,提醒用户关注特定的文本信息。当下划线和不同的元素搭配起来使用的时候,尽量让两者在风格和细节上保持一致,确保它们在设计上是无缝而一致的。
让下划线看起来是有意为之,但是又不会造成干扰,这样的设计是成功的。虽然在许多设计当中,下划线的加入会让文本看起来略显拥挤,但是实际上通过留白可以适当地缓解这个问题。
在下面的案例当中,Simon Lee Gallery 和 Hoohaa Design 均是通过下划线吸引用户注意到特定的文本。在 Simon Lee Gallery 当中,下划线和小字的搭配让它们不再显得单薄,在视觉上更重了。而 Hoohaa Design 中,下划线则是出于平衡视觉重心的目的来使用的,设计师想要突出站点的名称。
Abel Design Group 这个网站中,设计师并没有直接采用传统意义上的下划线,而是使用橙色的线条置于文本前方,起到了和下划线相似的功用。
第十一、被遮挡的文本
我们在探讨设计的时候,文本的可读性往往被作为相当靠前的一个标准来提,但是现在要说的设计趋势其实是和这一规则相悖的:被遮挡的文字。虽然你不一定会喜欢,但是确实有许多近期的设计作品会选择这样的设计。
当然,从技术层面上来说,有不少设计在运用这一技巧的时候并未拿捏太好。有的可能是因为字体设计的原因,有的可能是所选的用来遮挡字体的元素没有挑选好。这个中间的度其实并不好控制,尤其是当用来遮挡文本的元素是响应式、动态的时候。遮挡的元素、文本和背景之前要构成足够好的对比,但是又不能太过突兀,这是许多出问题的设计所面临的状况。
不过,如果能把遮挡的区域、遮挡元素和文本的对比以及运动的轨迹都设计好的话,实际上所创造的效果是非常醒目的,想要运用好文本前景的遮盖元素,你需要注意下面几点:确保文本中的词汇足够常见,易于理解,比如 Root Studio 网站中的单词 Root、遮盖元素不会遮挡太多部分、确保遮挡不会造成不必要的识别障碍、使用足够简单的字体,不会因为字体风格和障碍物造成识别障碍、保持其他部分的设计足够简单,这样用户可以更机轻松的关注核心的文本,并且识别出来。
第十二、经典的黑白配色
谈到色彩相关的趋势的时候,我们通常会认为色彩能够反应出设计者的心绪。黑白配色在这几年越来越常见,而在过去的这段时间当中出现的越来越多,是因为天气转冷设计师们的心情都越来越沉郁了么?
当然,和以前那种强调形式感的黑白摄影网站不同,现在的黑白色调的网站所覆盖的网站类型更多了,当然,在细节上可能还会点缀以其他的色彩,但是总体上是黑白色调没跑了。
因为缺乏丰富的色彩元素,黑白色调之下,这些网站所呈现出来的情绪是很接近的。
在单纯的黑白配色之下,文本的可读性往往是设计中所碰到的实际的问题。尽管可用的色彩不多,但是设计师可以通过创造一些有趣的东西,来达到效果。
正如同前面所说的,主要色调是黑白,这个时候适当的加入一点点其他的色彩,比如红色或者蓝色,一点色彩就能从整个设计当中跳脱出来,醒目。
当然,黑白之间的过渡色有很多,适当的使用能够让整个设计更为丰满。还是一句话,个性的网页设计与布局,必然为网站建设增色不少。