您的浏览器版本似乎过旧
我们的网站在最新版本浏览器上会表现更好
好的

网站建设之如何在网页中形成视觉层次

TMO Group2014年12月08日
网站建设之如何在网页中形成视觉层次

阅读文章我们习惯从左向右,由上至下;这是我们多年来已经养成的习惯,当然古代的人可以忽略,我们谈的是现代的阅读方式(那位小兄弟,古代之乎者也从右往左的阅读方式就不要拿出来了),在如今网络时代,估计我们浏览网站的频率要大于书本了,那么在浏览网页时,我们还是这种习惯吗?今天,小编就与大家一起探讨如何在网页中形成良好的视觉层次。

用户带着自己的目标来到一个网站,比如说购物,阅读。而网站的信息量一般很大,若每一点都要涉及则会让人应接不暇。这就要求网站需要抓住主流用户特征,突出重点,吸引用户的目光,引导用户进行深入阅读。

那我们在网页设计中怎么去形成视觉层次呢?小编整理了三点内容与大家一起探讨。

 第一,    先决定你不需要展示什么

页面简洁的重要原因是页面无赘余,即网页所呈现的内容都是必须的。先做减法,再开始考虑其他问题。

在传统的家居遥控器上,它上面的大多数功能使用量很少,几乎为零。右图将不常用的功能键做了简单的删除,大家有没有感觉现在的让人看起来轻松很多呢?

第二,    对信息进行深度加工

简单的文字罗列使得页面枯燥乏味,用户需要静下心来慢慢阅读,而且有时候还可能出现阅读偏差。图文结合方式活化页面布局,给用户留下的影响会比较深。

如我们网站上的服务页面,采用了图片加文字的布局,把我们的服务清晰直观的展现给了访客,通过对以往案例图片的展示,让访客知道我们具体做了什么,比如中国电子商务解决方案这个页面,流程用图片展现出来,比文字更能增加页面的可读性,让浏览者清晰直观的明白网站想要传达的内容。

 第三,    恰当的对表达信息进行组合

并列,关联,包含,因果等信息关系除了语言上的描述,更加可以通过视觉表现形式来传达。下面,小编带着大家来看一些例子,以Excel表格为例:

上图某一数据表格的优化过程。第一版为简单的信息罗列;第二版则去掉了重复的文案,并对表格进行适当的调整,显得清晰多了;第三版对重点信息描粗凸显,改变文案排版方式;第四版则将非重点文案进行隐藏,只有当鼠标点击后才能显示,当然这种类型是适用于那些长期使用该表格的用户。

在做网站设计时,设计师们都知道,在此也和大家一起分享:面对以个看似简单的表格,你需要知道网站页面的主旨是什么,在抓住重点信息的基础上优化的空间将不断增加!

 第四, 有层次显示信息,进行详略展示

在做网站策划时,当我们的策划人员梳理了信息之间的关系之后,接下来就需要考虑页面的整体规划——把握住整体页面的重点,对页面进行详略分布安排。下面,我们来 看一些案例(拿airbnb来看):

 

上图为租房信息的详细页面。作为租客,他们最关心的信息是什么?无非是房间实景、价格和房东的信息。那我们再看到上图网页的布局,租客最关心的三个问题都在最明显的位置显示,那租客就可以在第一时间内掌握房子的基本信息。如果他有兴趣就会继续查看更多详情。

总结下在网页中形成视觉层次需要注意的几个关键点:简约,加工,组合,详略呈现。每个点的具体例子都可以从上文中查找,我们的分享只是抛砖引玉,如果在网站设计中有其他的更好的创意请联系我们。

最后,TMO探谋网络科技希望今天的分享能够让大家在策划网站的视觉层次时少走弯路,将重点信息呈现出来,把网站越做越好,客户越来越多!

分享: 
微信扫码分享
下载

相关洞察

所有洞察
All
Market guide
Industry report
Outlook
Localization
Data pack

与我们交谈

获取助力您业务增长的解决方案
联系我们