是不是像极了我们日常浏览到糟糕的网页的时候的状态。小蓝还是在一个设计师的视角说，信息一目了然，很轻易就可以找到信息了，为了自证清白他要演示给小红看。在设计师小蓝的眼睛里面，这里网站早就有一个清晰的分类了，所以理所当然的用户在浏览的时候，通过标题也很快就能明白，这个网站的分类都是什么。小蓝甚至感觉自己是发现了一种新的网页设计形式，还沉浸在沾沾自喜中。但是在小红这里看来，这里糟糕透了，毫无逻辑。作为一个用户怎么有耐心，去一个一个理解标题，然后形成分类呢？小蓝继续说，这个网站已经修改了很多次了，他可以轻松地找到自己想要的信息。非常的方便。小红最后还是忍不住了，以一大串问候语结束了对话，然后关闭了这个网站。这个时候小蓝是一头雾水，什么情况，明明这么为用户考虑了，怎么用户就这么不明白呢？这里我们重新看一下小蓝说的话，里面全部都是以我为主，全都都是一个以设计师的身份去说的话，完全没有考虑过用户的感受和体验。其实小蓝的问题就在于，完全不懂用户的思维。设计师不该把寻找信息的责任交给用户，而是应该最大限度的降低用户寻找信息的难度，这样才能最大限度的发挥网页的功能性作用。我们重新回到这个网页，这个网页的布局十分清晰，想要的信息可以快速地查找到，大大降低了用户的查找信息的难度。编排合理，这样才是可以让用户最短时间识别，网页内的不同模块的内容是什么。而不是小蓝的全新方法。设计师在设计元素的时候，应该尽量减少没有必要的干扰，不要设计反常识的一些元素。我们浏览网页大部分时间是为了寻找信息，它不像游戏那样，我们的一些反常识的内容会给用户带来快乐。网页中的反常识的部分，往往会给用户带来困惑和烦恼。当我们访问网页的时候，每个问号都会加重我们的认知负担，把我们的注意力从要完成的任务拉开。也许这种干扰是很轻微的，但是它们会累积起来，尤其是总把时间花在决定什么地方能点，什么地方不能点的时候。如果做不到一切那么自然地进行怎么办？可以添加一些解释信息，减少用户的疑问。这个网站就添加了，解释的信息来说明这个按钮的意思是什么。要使网页有效，必须在用户第一眼看到时将信息展示出来，而要做到这一点，最好的方法是创建不言而喻的网页，或者至少也要做到自我解释。现在我们知道了，想要做好一个网页或者应用，首先应该学习如何去除主观化，并且带入用户的视角去进行思考。这样的话可以让你更好地去从一个用户的角度，反推出怎么优化自己的产品。理解用户会作为你长期的一个工作之一。长此以往的去除主观化，你就会越来越明白用户的思维有哪些，并且针对用户的需求和习惯，去不断的改进和提升自己的产品。去除主观化不仅仅作用于网页设计，还可以拓展到方方面面，这里就需要你们去发散自己的思维了。好，除了观念上的转变，我们还需要知道，用户在使用网页时的真正习惯有哪些。先将之前我们看到的网页转换成线框，减少这些内容对我们进行的干扰。小蓝，他在设计网页的时候，给用户设计了一个他自认为完美的，视觉阅读顺序。而小红在看的时候则是，只针对自己感兴趣的东西看，整个阅读的视觉循序，是完全无序的。这个时候设计师小蓝懵了，感觉自己的完美阅读顺序被打乱了。还是用同样的方式，将这个网页转换成线框的形式，减少干扰。在浏览这个网页的时候，视觉就相对来说有了一定的踪迹可寻。而这个视觉的浏览顺序，也基本吻合了“F”型的浏览顺序，这个原因是什么呢？因为这个网页的信息的编排和划分明确，我们在浏览的时候，我们的视线会自然的进行移动，最后就形成一个“F”型的网页浏览真相一，我们不是在一个字一个字的阅读网页，而是在对网页进行一个扫描。互联网时代基本上把我们每一个接触互联网的人，训练成为了一个人肉扫描仪。我们已经很少这样阅读一个网页了，除非你在阅读非常难明白的文献，一个字一个字的阅读，不仅会耗费我们大量的精力，并且浪费大量的时间。我们在观看网页的时候,通常是在一目多行的状态。一目十行才是我们正常的阅读方式。也就是扫描的过程原因是我们总是有任务在身：网页用户的行为更像鲨鱼，他们不得不一直移动，因为我们是在寻找信息，完成自己的工作的过程。如果静止了一直慢慢地看一个信息，耗时又耗精力，慢慢我们的耐心就不见了，所以完全没有必要来阅读那些不必要的内容。某宝也是运用这个原理，各种品类的商品混杂在一起，当我们浏览某宝的一个页面的时候。想要购买一双球鞋，那就只会看到球鞋，而忽略了其他的东西。同样想买镜子的时候，就会忽略掉其他的内容。电车难题基本大家都听说过，一个疯子把五个无辜的人绑在电车轨道上。一辆失控的电车朝他们驶来，并且片刻后就要碾压到他们。幸运的是，你可以拉一个拉杆，让电车开到另一条轨道上。然而问题在于，那个疯子在另一个电车轨道上也绑了一个人。如果只给你很短的时间考虑，需要你迅即作出决定的时候，这个时候我们会有巨大的压力，所以一定会选择一个当时觉得满意的答案，而不是一个最合适的答案。电车难题有的时候很像我们浏览网页的状态，在极短的时间内去决定浏览那个网页。这里同样两个选择，网页A信息通俗易懂，好查找，但是价值一般。网页B信息专业需要自己找，但是价值较高。这个时候我们只有极短的停留时间你会怎么选择。通常大家都会选择a，这也是为什么，专业书籍价值高但是很少人阅读，通俗读本价值一般，但是却很畅销的原因。我们再来一个版本的电车挑战，现在你有这非常长的时间，这个时候你就可以有多重选择了，甚至你可以去解救下面的六个人。同样我们时间充足时，我们也会选择B网页，去钻研寻找出自己的需要的资料。这里的最佳选择其实一直是B，而我们是因为时间的原因，更多的会去选择A。这也是因为我们在浏览网页的时候，通常没有那么多的停留时间，找不到合适的信息，我们就会选择退出进入别的网页了，我们不选择最佳，只选择满意就行。而日常的生活中，我们几乎不可能遇到电车挑战这么极端的内容，没有人质，甚至你可能只是拿着一个马桶搋子路过。如果猜错了，也不会产生什么严重的后果，对选择进行权衡并不会改善我们的机会。那我们在重新看到AB网页时，我们自然就会去选择信息编排清晰明了的A网页了，B网页就被淘汰掉了。然后再进行扫描。这里我先问大家一个问题。一般等价物/想象共同体/信任的代表，这个定义是指的什么东西？其实这个是我们日常生活中最常见的钱的概念。而那个也只是钱的基本定义，展开的话更加复杂。对于我们大多数人来说，主要我们能正常使用，是否明白事物背后的运行机制并没有什么关系。这并不是智力低下的表现，而是我们并不关心。所以我们用户在浏览网页的时候，不会在意这个网页的背后的运行逻辑是什么？如果没有什么选择的情况下，这个网站也是可以供用户使用很久的。但是如果有一天，无意中发现了新的网站，并且感觉这个网站更好用。那原来的网站就会立刻在用户的脑袋里面被删除掉。而后这个网站且变成了首选的网站。同理，当用户在发现更好的C网站的时候。原来的网站也就会立刻被删除掉，几乎不会再使用。而C网站就会变成首选网站。而这个其实是用户使用网站的效率逐步提升的过程，舍弃之前不好的难用的网站。选择更好的网站，一步一步的递进。这也就从反方向促使，网页设计师要不断的去优化自己的网站，从而保留住更多的用户。网页设计主要是面向用户的，只有充分的了解了，用户的实际对网页的看法和用法，我们才能更好的去优化自己的网页作品。在工作的时候，很多的小伙伴其实很难接到一个艺术类型的网站，或者是一个变化形式很多的网站。我们大多数的时候，接手的都是一些很普通的网站，这个时候，是需要设计师合理的将网页的信息传递出来给用户，而不是给用户创造多大的视觉冲击。信息的有效传递永远在网页设计中一直处于一个非常重要的地位，接下来我给大家讲解一个，CRAP设计理论，在你们日常的网页设计中，只要合理的使用这个理论，就可以更好的编排出，信息清晰明了的网页。CRAP分别是，对比（contrast）、重复（repetition）、对齐（alignment）和相近（proximity）。这个网页是接下来我们要修改的网站，是不是有一种小红愤怒的感觉呢？信息糟乱并且区块的划分也十分的紊乱。不利于我们去查找自己想要的信息。对比的定义是，避免版面上的元素过于的相似，可以使用字号大小的对比，文字与图片的对比，重要信息与次要信息的对比。为了减少杂乱信息对大家的干扰，我把这个部分转换成了线框的形式，更利于大家观察。截取的这个部分，大家有发现吗？这个板块的标题、内文的标题以及内文，字号基本上是一致的。这样我们在阅读的时候，视觉识别会产生紊乱，难以阅读。这里我们只需要调整一下线框的粗细度，整个的信息层级就可以很快区分出来了。调整后信息就变的更好的识别了。将线框转换成文字，信息的层级就可以立马展现出来。与原来的文字形式进行对比，信息的识别度提高了很多。对齐则要求版面上的项目不能随意的安排，一个版面上每个元素应该与其他元素有某种视觉上的关联性。这样会让这个版面更整洁、更精致。整件作品中，可以重复使用相同的视觉元素。包括字号大小，文字组的形式、空间配置等。重复有助于整体的架构安排，也可以强化一致性。在网页设计中，往往大量的出现重复类型的设计。老样子，我们提取线框进行观察。这里的文字是一个没有对齐的状态，我们在观看的时候，就感觉十分的凌乱。只需要稍微调整一下，让他们向右对齐，是不是在视觉上就整齐了很多这样在我们浏览的网页的时候，信息就可以很好的传递出来了。右侧这个部分其实就是在不断重复的过程。最后一个原则就是相近。版面上相关联的项目要进行分组，这样原来零散的项目就会变成一个整体，可以将不同的信息区分开。减少杂乱，让用户清楚的了解整个网页的架构。按照这个网页架构，对其重新进行了标记，我们会发现，原来的网页中，明明是重要的A部分，占比竟然小于A1这个部分，这个架构明显是有问题的。重新调整后，突出了A 与 A1的信息的层级，下方B与C上下排列 这样更适合用户的浏览习惯。根据相近的原则，不同的信息模块，距离要远一些。让用户浏览的时候，视觉是一个“F“型。首先绘制版面网格。这个网格的可视范围是1200px。根据网格置入图片和线框图，观察效果。根据线框图添加文字，整体的信息变得清晰明了。添加横线区分信息，信息层级就凸显出来了。放大的观察一下。接着添加按钮的部分。这里按钮使用的线框转实色的动效，可以非常容易的让用户进行操作。而右排的文字则是使用，加下划线的动效，方便用户点击跳转页面。这里也是继续前面的步骤，将我们编排好的文字置入，网页中的按钮的形式大小以及字号的大小对比，依然是依照重复的原则，增加网页的整体性。置入最后一个部分的内容，整个网页的框架就已经做好了。置入图片后和原来的网站进行对比，信息的有效传递性大大的提升。根据我们前面的原则，原来的网页也就不会在用户的选择范围内了。一个网页设计师在工作的过程中，应该多去以一个用户的心态去设计和调试自己的网页，可以大大的提高自己的网页的实用性。如果很难做到去主观化，可以邀请几个用户进行实际操作，进行可用性的实验，同样也可以很好的理解用户的思维习惯。总结起来就是，网页设计是以用户为主体的设计。在设计的过程中，牢记CRAP的设计原则，这样会让你的网页，在不出现大的错误的同时，还能提升信息的有效传递性，留住更多的用户的群体。好的，那我们的课程今天就到这里了，我们下期见，拜拜。
（图片来源网络，侵删）
0 评论