智帝设计
扫描关注网站建设微信公众账号

扫一扫微信二维码

以访客至上的网页设计

智帝设计2016-09-20用户体验

阅读过Steve Krug 所著的《Don't make me think》-访客至上的的网页设计秘笈,从中学到了很多交互设计方面的知识,在这里和大家分享。

之前写过一章,“我们是如何使用Web”的,今天我们来说一下广告牌/banner设计的要点。



广告牌设计101法则

未扫描设计,不为阅读设计



如果用户们都是一览而过,那么,你需要注意以下5个重要方面,来保证他们尽可能地看到了,并理解了你的网站:


  • 在每个页面建立清楚地视觉层次
  • 尽量利用习惯用法
  • 把页面划分成明确定义的区域
  • 明显标示可以点击的地方
  • 最大限度的降低干扰



建立清楚的视觉层次

让页面在瞬间明白易懂的一个好办法是确保页面上所有内容的外观—所有可视线索---清楚,而且能准确地表述页面上内容之间的关系;哪些内容相关,哪些内容是其他内容的组成部分,换句话说,每个页面都应该有清楚地视觉层次。

一个视觉层次清楚地页面有三个特点:

  • 越重要的部分越突出。例如,组重要的标题要么字体更大,更粗,颜色更特别,旁边了有更多的空白,要么更接近页面的顶部—或者,以上几点的综合。

Image title


  • 逻辑上相关的部分在视觉上也相关。    例如,可以把内容相近的分成一组,放在同一个标题之下,采用类似的显示样式,或者把他们全部放在一个定义明确的区域之内。

Image title


  • 逻辑上包含的部分在视觉上进行嵌套。    例如,一个分类标题“名著书籍”出现在某本具体书籍书名上面,在视觉上包含书籍区域,因为该书籍属于这个标题,而且书籍的标题也要横向覆盖描述这本书的元素。          

Image title



 对于视觉层次,没有什么特别的。例如在我们阅读报纸的时候,会发现每张报纸都用突出、分组和嵌套的方式为读者提供关于报纸内容的有用信息。这张图片和这个新闻内容是一起的,因为它们位于同一个标题的覆盖范围之下。这个新闻内容最重要,因为他采用了最大的标题,最宽的栏目,并占用页面最突出的位置。


我们每天都会对视觉层次进行分解—不管是在网络上还是在报纸上,但是这种分解发生得太快了,因此我们经常只有在不能这么做 的时候才能模模糊糊地感觉到了他—也就是,当这些可视信息线索(或可视信息线索的缺乏)迫使我们思考的时候。


好的视觉层次通过预先处理页面,用一种我们能快速理解的方式对页面的内容进行组织并区分优先级,从而减少了我们的工作。


但是,如果一个页面没有清楚的视觉层次,例如,所有内容看起来都一样重要,我们会降低扫描页面的速度,寻找关键的文字和短语,然后拼凑出我们感觉重要的内容和内容的组织方。这样就增加了很多工作。


而且,和其他媒体一样,我们在网站上,也希望得到编辑的引导。没有人比网站发布者更清楚哪些内容更重要,更有价值,更流行了,一次我们为什么不帮我们把这些内容标识出来,免得给我们带来麻烦?


分解一个视觉层次上有问题的页面,例如,一个标题涵盖了不属于它的内容,就像是读一个病句一样。


即使我们通常能猜出这个句子的意思,但他还是让我们花了点时间,迫使我们不得不进行一些不必要的思考。


文章关键词