干货 | 网页设计要注意啥？

fruit

　　『你是否曾在设计网页时留意过美观、炫酷和可用性之间的平衡？今天小编就为你带来一篇来自Nick Babich发布在Medium上好文，深度解析网页设计时我们应当注意的几大问题。』
　　说到网页设计，这真的是一个非常庞大的话题：当我们在设计网页时，必需要考虑道方方面面事情。因此，为了帮助大家把网页设计这项工作进行简化，我们列了一个清单，其中包含了每个网页设计师在设计过程中都应当考虑到的一些问题。希望能够对大家有所帮助哟~
　　Do's 　　
　　—
　　尽可能统一多平台的体验
　　访问者会使用不同种类的设备来访问你的站点：台式机、笔记本、平板电脑、手机、音乐播放器甚至是智能手表。UX设计中很重要的一点就是：无论用户使用何种方式访问你的站点，（设计者）都需要保证用户能够得到相似的体验。

　　如果用户通过手机来访问你的站点，他们应当能够和在电脑上一样轻松地找到他们需要的信息。
　　设计简单易用的导航
　　导航是我们谈论可用性的基础，请记住：如果用户找不到他们在站点中的位置，那么无论你的网站看起来有多棒都将没有意义。这也是为什么你的导航应当具备以下几点特征：
　　简单　　清晰　　连贯
　　请将你的导航设计得尽可能清晰明了，从而让用户花最少的成本锁定他们在站点中的位置和他们下一步想进行的操作。
　　将已经访问过的链接换个颜色吧
　　链接是一个导航过程中的一个重要环节。如果已访问过的链接没有和未访问的链接用颜色区分开，用户就有可能重复访问他们本不想再看到的页面。

　　做一个便于用户快速浏览的页面
　　当用户访问你的页面时，他们更可能想快速浏览整个屏幕，而不是从头到尾仔细阅读所有内容。因此，如果用户想要寻找某项内容或完成某项任务，他们会一直扫视屏幕，直到找到想要的东西。而作为设计师，其实我们可以用视觉设计来体现内容间的层级关系，从而帮助用户快速锁定他们的目标。这里说的视觉上的层级关系指：将页面中的元素按照他们的重要程度来安排在适当的位置，比如讲最重要/常用的内容（例如标题、登录表单、导航等等）放置在用户打开页面一眼就能看到的地方。

　　『Z』字型浏览的模式
　　仔细检查所有的链接
　　当用户点击了站点中的某个链接，却得到404错误页的提示后，很容易产生消极的情绪。因为当用户在查找想要的内容时，在他们的潜意识里，他们期待着每个链接都是可以指向正确的结果的。

　　oops
　　确保用户能够明白：这是一个可点击的元素
　　页面中每个元素的样子，都应能告诉用户该如何使用。如果页面中某个元素看起来像一个连接或者按钮，但实际上它却不可点击，这会使用户觉得非常费解。（例如，给非链接文字标注下划线；又如把没有超链接的元素设计成可进行『行为召唤』、可进行交互的样子）。因此，用户需要知道：页面中的哪些元素是普通的静止元素，哪些是可以被点击的。

　　你觉得上面这个页面中的橙色方块是按钮吗？答案是NO。因此别把标签或其他元素设计得让人以为是可点击的按钮哦
　　Don'ts 　　
　　—
　　不要让用户等等待页面缓慢加载
　　网站用户的注意力可持续时间往往是非常短的。根据NNGroup研究结果显示：
　　多数用户对于任务的注意力最多只能保持10秒
　　当访问者不得不等着网页慢慢加载时，他们一般会产生不悦的情绪并且会跑去访问别的网站
　　即使loading动画设计得很美，用户也并不会因此在loading界面停留太久

　　Image credit: Ramotion
　　尽量别在新标签页中打开链接
　　这种方式会导致的结果之一就是：如果在新标签页中打开，用户无法通过返回按钮退回到之前的页面

　　如果强行开启新标签页，用户就无法使用后退按钮来返回到之前的页面了。
　　别让促销信息喧宾夺主
　　醒目的促销信息和广告往往会先抓取用户的注意力，使其周围的信息更难被注意到，导致用户难以完成他原本想要做的事情。何况，现在很多用户看到广告也会选择性忽视，更不用说广告周围被夺走关注度的内容啦。

　　通常情况下，任何长得像广告的元素，都会被用户习惯性地忽略或避开，这就是所谓的"banner blindness".
　　别使用强制滚屏
　　所谓的强制滚屏是指：设计师或开发者在页面的滚动条上做文章，使其网页的滚动方式不同于一般的页面。这种强制性的滚屏通常会包含动画效果、固定的锚点，有的情况下甚至连滚动条都被重新设计过。如此一来，用户的主动权被或多或少地剥夺，因此通常会引起他们的厌烦。在设计用户界面时，设计师应当将主动控制权交于用户，让他们来决定自己要怎样来浏览。

　　举个反例：Mac Pro的主页，https://www.apple.com/cn/mac-pro
　　（小编按：小编个人觉得原作者在此处选用的反例并不是太恰当，作为展示类的网页，Mac Pro主页的设计采用的这种模式其实是目前比较流行的方式，在清晰地展现了产品的卖点之余，这种互动性、趣味性都较高的设计其实可以引起用户的好奇并留下更深的印象。所以对于这一点，大家见仁见智啦）
　　别在页面刚打开时自动播放视频/音频
　　当用户打开新的页面时，那些出其不意自动播放起来的音频和视频通常会使它们感到不悦，在使用这些元素时，我们的设计师应当尽可能的谨慎，保证它们只会在最恰当的情况下出现。

　　举个栗子： Facebook的视频在默认情况下都是静音播放的，只有在用户主动和视频内容产生交互后，才会发出声音。
　　别为了“美”而牺牲可用性
　　对用户从界面中摄取信息的过程产生干扰，是UI设计的一个大忌。（在设计时）一定要避免使用复杂的背景纹理以及糟糕的配色，这些问题都会降低内容的可读性、或者削减颜色在UI中的强调作用。

　　低对比度的文字设计，嗯……效果并不尽人意，所以别再用啦~
　　别在页面中使用闪烁效果（通常指文字和广告）
　　页面中不停频繁闪烁或者忽明忽暗的内容有会引起心脏病患者发作的风险（嗯，这不是玩笑）。对于普通用户来讲，即时这种设计不会引起心脏病发作，但也是很恼人的。

　　emmmmm…
　　说道闪烁效果，小编想起来前两天同事在群里发的一张表情：

　　哎呀！我的眼睛……有话好好说

　　好汉饶命！
　　-　　-　　-
　　最后需要补充的一点：上文为原作者Nick Babich在网页设计过程中的心得，可能有些地方和你实践后得出的体会并不相同，其实没关系，由于UX设计产出的评价标准受到方方面面因素的影响，和产品的使用场景、定位、受众所在的地域、文化背景、受众的教育背景、职业、年龄等等都有非常大的关系，因此只要你的设计产出能够经得起用户和时间的考验，那就可以自信地说你的设计是成功的！
　　原文地址：https://uxplanet.org/dos-and-don-ts-of-web-design-8c9d6a5de7c6
　　封面图片Credit: Designer vs. Developer - Rebound challengeby　　Jason Rain　　in　　Rebound Challenge　　on　　Apr 16, 2017

　　感谢您的阅读，如果想了解更多关于设计方面的内容，就请关注我们吧~
　　-　　-　　-