怎样从视觉布局和图片设计上提升网站用户体验

时间：2023-02-02 06:52:01 | 来源：电子商务

时间：2023-02-02 06:52:01 来源：电子商务

目前网络上关于网站视觉布局与用户体验方面的文章，基本上都是译自国外，以国外的网站作例子。虽然洋货是我们的榜样，无论视觉前瞻性还是整体、细节等，都非常精妙与讲究，但是不得不说，国内与国外，无论是互联网大环境还是用户的使用习惯、审美习惯方面均有着非常度多的不同，所以这些译文的参考性也会打一些折扣。

本人本身是做设计的，同时喜欢在网上做一些各方面的观察研究与尝试，很多网上项目都尝试过，也得到不少收益和收获。这一两年钻研威客、网赚类项目比较多一点。基本上所有知名相关网站都尝试操作过，由于职业病，也喜欢从网站本身的界面设计、流程设计等等方面对网站进行一些研究。在去年的时候，偶然接触到一个网站：多宝趣，立即被吸引了。立即注册为用户，已然至今。关于网站其它盈利模式、营销等等方面今天就先不说了，刚才说了，这篇文章主要来自于我的职业病：设计。在我看来，纵观类似网站，多宝趣无论是从界面视觉设计、UI、整体规划、流程设计、乃至图片设计等等细节，都是这个业内一流的。我们主要就来聊聊这个网站的设计，主要涉及到web网站的易用性、用户体验，及转化率等方面话题。走起!

一、清晰、简明的顶部菜单设计：

清晰、简明的顶部菜单，可以在第一时间告诉用户网站是干什么的。例如多宝趣的顶部菜单，你一看到，直接知道了该网站可以干3件事情：购物、夺宝、赚钱。就算可能在一些具体功能上用户还需要继续研究，但是最起码的功能，用户已经非常直观的了解了。

注意，这是最主要的划分，大家都知道，主业务下面还有分业务，那么菜单也是一样。多宝趣采用了鼠标移上的方式，很直观的展示了下层功能：

由于多宝趣的夺宝与赚钱功能众多，所以需要较大的面积来展示。可能是为了获得更好的视觉效果，多宝趣采用了60X60的较大图标，这也造成无法在菜单区域展示所有子功能，所以在右侧加上了下拉滚动条。就这一点来说略有瑕疵。上次我与多宝趣的客服交流，她说正在修改这里的呈现方式，希望可以看到更好的呈现效果。

多宝趣的功能确实太丰富了。在不影响核心业务展示的情况下，网站采用了一个“+”更多菜单，鼠标移上，会展示更多丰富的功能。由于该菜单位置显著，所以并不会太多损失用户关注度。可以说在主次平衡上做得非常好。

而这一块也非常巧妙，在非常狭窄的一条上，集成了多功能内容搜索与不同类别的公告展示功能。恰当的下显菜单，极大的节省了空间。

二、简明有序、富有节奏感的整体布局和细节：

全尺寸通栏大图，滚动幻灯焦点。按钮直接呈现标题，让用户一目了然，减少了一个鼠标移上才能查看内容的操作。易用性加分。

这样的步骤及功能引导图，在很多类似网站上都有，不过多宝趣在设计上更胜一筹：简约美观，同时注重图标设计的细节，让用户能感受到是花了心思的。

左侧是最新最热的夺宝活动商品展示，注意”热度“图标会随着数值变化而变化颜色，很用心的细节。右侧是网站推荐的目前最热的夺宝与赚钱的活动。图片本身的设计一看就是经验丰富的设计师制作。值得一说的是，一定要确保图片内容简明扼要。简单明确的信息，可以促进用户点击欲望。

首页的这块，呈现了多宝趣网站两大功能板块：夺宝与赚钱。简明扼要的文字介绍下是明确的按钮。下面动态展示了最新的相关信息，可以直观的引导用户点击按钮，进入下一步流程。什么是转化?这就是转化。

介绍文字看起来很简单，但还是非常直观的表明了传达诉求。清新亮丽的最新潮流图片，是不是能够吸引用户的好奇呢?视觉吸引，然后下一步引入业务，这是最通行的聪明做法。简单而有效。这一块多宝趣也是有细节处理的：鼠标移上图片后，就会出现商品的详细信息。

大家注意到没有，上面一大块通栏整体白色元素之下，紧接着是3块分隔开的、有着绚丽色彩的广告图片。这是随心而为吗?不是的。在设计上，这就叫”节奏”：从白色到彩色的节奏、从整体到分割的节奏、从大块到小块的节奏。界面有了视觉的节奏，才会消除视觉疲劳感，从而确保持续的保留用户的浏览兴趣。看起来很简单?没错，但是真正做好不容易。

由于社区功能相对来说要次要一些，所以多宝趣将其放在了网站首页较下方的位置。展示用户最感兴趣的内容，这点非常重要。多宝趣展示了”晒单“(就是用户获得宝贝后晒出收到的商品)、用户最新的”说说“(类似于QQ的说一句)、以及最新的和最活跃的用户展示。分析一下，晒单，可以直接引导用户了解过往的订单信息，以展示网站的诚信，为引导用户进行下一步操作作准备，而展示用户的动态、新用户等情况，为的是展示网站的人气。每一块内容，都是有其述求的。

    很多网站并不注重网站底部的设计。认为这块位置不是很重要，关注度不高。实际上，做好每一个地方的细节，在提升用户体验上都非常重要。虽然多宝趣的底部展示内容中规中矩，与类似网站展示的内容差不多，但多宝趣也在设计上花了足够功夫：1、采用整体深灰的色调，确保了整体感，不至于太花哨，喧宾夺主(因为这是通用底部，而底部内容又较多，如果全采用彩色的话，会极大的影响用户关注点);2、整体有序的排列，确保视觉感受的舒适;设计感及专业感很强的图标设计，确保了用户的信赖感。

以上，就是对多宝趣网站首页的视觉设计分析。要实际看看网站的，可以看[这里]。在后面，我还会陆续讲解这个网站其它页面的视觉设计及流程设计方面的东东，分析一下，一个好的网站视觉设计及，是如何提升用户体验的。

(待续)