--- title: 网站建设之如何在网页中形成视觉层次 date: 2014-12-07T16:00:00Z modified: 2024-07-04T08:52:04Z permalink: "https://www.tmogroup.com.cn/insights/other-20961/" type: post status: publish excerpt: "" wpid: 100830 categories: - 其他资讯 tags: - 其他资讯 - 网站建设 - 网站开发 - 网站设计 featured_image: "https://www.tmogroup.com.cn/wp-content/uploads/2024/07/网页设计六要素，让你的首页亮的飞起-1.png" timestamp: 2024-07-04T08:52:04Z --- 阅读文章我们习惯从左向右，由上至下；这是我们多年来已经养成的习惯，当然古代的人可以忽略，我们谈的是现代的阅读方式（那位小兄弟，古代之乎者也从右往左的阅读方式就不要拿出来了），在如今网络时代，估计我们浏览网站的频率要大于书本了，那么在浏览网页时，我们还是这种习惯吗？今天，小编就与大家一起探讨如何在网页中形成良好的视觉层次。 用户带着自己的目标来到一个网站，比如说购物，阅读。而网站的信息量一般很大，若每一点都要涉及则会让人应接不暇。这就要求网站需要抓住主流用户特征，突出重点，吸引用户的目光，引导用户进行深入阅读。 那我们在网页设计中怎么去形成视觉层次呢？小编整理了三点内容与大家一起探讨。 ## **第一， 先决定你不需要展示什么** 页面简洁的重要原因是页面无赘余，即网页所呈现的内容都是必须的。先做减法，再开始考虑其他问题。 在传统的家居遥控器上，它上面的大多数功能使用量很少，几乎为零。右图将不常用的功能键做了简单的删除，大家有没有感觉现在的让人看起来轻松很多呢？ ## **第二， 对信息进行深度加工** 简单的文字罗列使得页面枯燥乏味，用户需要静下心来慢慢阅读，而且有时候还可能出现阅读偏差。图文结合方式活化页面布局，给用户留下的影响会比较深。 如我们网站上的服务页面，采用了图片加文字的布局，把我们的服务清晰直观的展现给了访客，通过对以往案例图片的展示，让访客知道我们具体做了什么，比如[中国电子商务解决方案](https://www.tmogroup.com.cn/china/)这个页面，流程用图片展现出来，比文字更能增加页面的可读性，让浏览者清晰直观的明白网站想要传达的内容。 ## **第三， 恰当的对表达信息进行组合** 并列，关联，包含，因果等信息关系除了语言上的描述，更加可以通过视觉表现形式来传达。下面，小编带着大家来看一些例子，以Excel表格为例： 上图某一数据表格的优化过程。第一版为简单的信息罗列；第二版则去掉了重复的文案，并对表格进行适当的调整，显得清晰多了；第三版对重点信息描粗凸显，改变文案排版方式；第四版则将非重点文案进行隐藏，只有当鼠标点击后才能显示，当然这种类型是适用于那些长期使用该表格的用户。 在做[**网站设计**](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)时，设计师们都知道，在此也和大家一起分享：面对以个看似简单的表格，你需要知道网站页面的主旨是什么，在抓住重点信息的基础上优化的空间将不断增加！ ## **第四， 有层次显示信息，进行详略展示** 在做[**网站策划**](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)时，当我们的策划人员梳理了信息之间的关系之后，接下来就需要考虑页面的整体规划——把握住整体页面的重点，对页面进行详略分布安排。下面，我们来 看一些案例(拿airbnb来看)： 上图为租房信息的详细页面。作为租客，他们最关心的信息是什么？无非是房间实景、价格和房东的信息。那我们再看到上图网页的布局，租客最关心的三个问题都在最明显的位置显示，那租客就可以在第一时间内掌握房子的基本信息。如果他有兴趣就会继续查看更多详情。 总结下在网页中形成视觉层次需要注意的几个关键点：简约，加工，组合，详略呈现。每个点的具体例子都可以从上文中查找，我们的分享只是抛砖引玉，如果在网站设计中有其他的更好的创意请联系我们。 最后，[TMO**探谋网络科技**](https://www.tmogroup.com.cn/wp-content/uploads/wp-mfa-exports/page/home.md)希望今天的分享能够让大家在策划网站的视觉层次时少走弯路，将重点信息呈现出来，把网站越做越好，客户越来越多！