《网页设计综合指南》(二):网页设计看这篇

更新时间:2020-05-20 10:32  
 

  设计师和开发人员在构建网站时,需要考虑很多事情,从视觉外观到功能设计。为了简化这个过程,我们准备了这个指南。限于篇幅限制,将这一指南分为三部分,此为第二部分内容。

  内容策略最重要的一点就是聚焦在页面目标上。理解页面的目标,并根据目标安排内容。

  防止信息超载。信息超载是一个严重的问题。用户觉得有太多信息需消化,从而无法下决定或采取行动。有一些简单的方法能最小化信息超载。一个常用的方法就是分块——将内容分成几个模块,帮助用户更好的理解和处理。结账单就是最好的例子。每次最多显示五到七个输入字段,将结帐单拆分到多个页面,必要时才逐步公开字段。

  避免行话和行业术语。页面上出现的每个未知术语或短语都会增加用户的认知负荷。一个安全的方式就是为所有读者编辑内容,并选择所有用户都清楚易懂的词。

  最大限度地减少长内容。根据信息过载的观点,如果网站不是以信息消费为主,尽量避免长文本块。 例如,如果您需要提供有关服务或产品的详细信息,请尝试逐步展开详细信息。 将文本块写的短一些,更方便理解。根据罗伯特·盖宁(Robert Gunning)的“How to Take the Fog Out of Business Writing”这本书,为了舒适的阅读,大多数的句子应该是20个字以内。

  避免所有字母采用大写。全部大写的文本(也就是所有字母都是大写的文本)对于字符量较少的文本是可以的,比如缩略词和图标;但是,请避免在字符量比较大的地方使用(例如段落,表格标签,错误,通知)。正如Miles Tinker在“Legibility of Print”一书中提到的,全部大写会降低阅读速度。另外,大多数读者会觉得全部大写的文本不能快速清晰的理解。

  一个结构合理的页面清楚地显示了每个用户界面元素位于布局中的位置。虽然没有一个适合所有页面的规则,但是有一些指导性原则可以帮助你创建一个坚固的结构:

  网格和布局是设计的一部分,且能适应不同屏幕尺寸的设计场景。Adobe XD的布局网格使设计人员能够针对不同的屏幕尺寸实现一致设计及管理网格中元素之间的比例。

  人们大多数情况是快速浏览网页,而不是阅读所有内容。 因此,如果访客想要查找内容或完成任务,他们将快速浏览网页、找到需要的地方。作为一名设计师,你应该通过设计良好的视觉层次来帮助他们。视觉层次是指以重要性(即应该首先关注哪些、再关注哪些等等)呈现元素。一个适当的视觉层次结构可以让用户更快速地浏览页面。

  网页设计师中流传着一个谎言——用户不会使用滚动。重申:今天,每一个人都在使用滚动!

  鼓励用户滚动。 尽管页面加载后人们通常会开始滚动。但页面顶部的内容仍然非常重要。顶部的内容给观众带来了第一印象和期待。只有在内容有吸引力的时候,用户才会进行滚动。因此,把你最引人注目的内容放在页面顶部:

  提供一个优秀的介绍。 一个优秀的介绍为内容铺设了背景,并回答了用户的问题:“这个网页是关于什么的?

  坚持导航。当您创建冗长的页面时,请记住用户仍然需要方向感(当前位置)和导航(其他可能的路径)。长页面可能会出现导航问题;如果顶部导航栏在用户向下滚动时不可见,则当他们在页面底部时,他们将不得不一直向上滚动。最简单的解决方案是悬浮菜单——显示当前位置,并一直悬浮在页面中。

  Tumbler登录页面劫持了滚动操作。滚动的页面时固定的,而不是自由的。

  内容加载值得进一步强调。即时响应是最好的,但有时候你的网站需要更多的时间向访问者传递内容。一个糟糕的网络连接可能导致一个缓慢的反应,或者一个操作可能需要更长的时间才能完成。但是不管原因是什么,你的网站都应该快速加载。

  确保常规加载不需要很长时间。网民的注意力和耐心是非常低的。根据Nielsen Norman Group research,用户保持注意力的极限是10秒。当访问者不得不等待一个网站加载,如果网站加载速度不够快,他们会感到沮丧并可能离开。如果加载时间过长,即使设计了最漂亮的加载指示,用户仍然会离开。

  加载过程中使用Skeleton Screens。许多网站使用进度指示器显示数据正在加载。虽然进度指标背后的意图是好的(提供视觉反馈),但结果可能是负面的。正如Luke Wroblewski所述,“按照定义,进度指标是对有人需要等待的响应。这就像看着时钟滴答下来 当你这样做,时间似乎变慢。”有一个很好的替代进展指标:Skeleton Screens。这些容器本质上是一个暂时空白的页面版本,信息逐渐加载到容器中。设计师可以使用Skeleton Screens将用户的注意力集中在实际进展上,并为即将到来的事物预测。这意味着事情正在立即发生,因为信息在屏幕上逐渐显示,人们看到网站在等待的时候正在采取行动。

  一张图片胜过千言万语。人类是视觉生物,几乎能立即处理完视觉信息;我们所感知并被传达到大脑的90%信息是可视化的。图像是捕捉用户注意力并区分产品的有效方式。与一段精心设计的文本相比,图像更能被浏览者接收。此外,图像能跨语言障碍。

  随着网速的提高,视频正变得越来越流行,特别是它们延长了用户在网站的时间。今天,视频无处不在。 我们在台式机,平板电脑和手机上观看视频。当有效地使用视频时,能非常有效的吸引用户 它传递更多的情感,真正给人一种产品或服务的感觉。

  Call-to-Action(CTA)是指引导用户实现预期目标的按钮。 CTA的重点在于引导用户进行我们所期望的行动。 一些常见的CTA的例子是:

  CTA应该足够大,稍远距离也能看见;但不能太大。要确认CTA是不是页面上最显著的元素,请尝试五秒钟的测试:浏览网页五秒钟,然后记录您记得的内容。 如果CTA在清单上,它的大小适当!

  在视觉上突出。CTA的颜色是引起用户注意的重要因素。通过颜色,可以让某些按钮比其他按钮更突出,更具视觉冲击力。对比色非常适合用于CTA,使其更加醒目。

  以前的Dropbox主页有一个很好的例子,使用负空间来创建主CTA。蓝色的“免费注册”CTA与背景的淡蓝色相映成辉。

  提示:您可以通过模糊效果快速测试CTA。模糊测试是确定用户的眼睛是否会到达您想要的位置的便捷方法。将网页截图在Adobe XD中应用模糊效果(请参阅下面的示例)。看看页面的模糊版本,哪些元素会脱颖而出?如果您不是正在预测的内容,那就修改。

  填写表单仍然是网页最重要的互动类型之一。事实上,表单通常被认为是完成目标的最后一步。用户在填写表单时,应该避免出现困惑、尽快完成表单。表单就像一个对话,双方之间(用户和网站)应该有逻辑的沟通。

  只留需要的。只要求填写真正需要的东西。添加到表单的每个额外字段都将影响转换率。总之想清楚为什么需要这些信息,以及将如何使用它。

  按照逻辑顺序排列表单。问题应该按照用户逻辑而不是按应用或数据库的逻辑来提出。例如,在名字之前询问地址是不正确的。

  将相关信息集合在一起。将相关信息按逻辑进行分组。从一组问题到下一组问题的流程更像一个对话。且将相关字段分组在一起还有助于用户理解信息。

  越来越多的设计师将动画作为功能元素来加强用户体验。动画不只是为了乐趣,它是提高交互效率的重要方式之一。但是,动画只有在合适的时间和位置才能提高用户体验。好的交互动画有一个目标:它是有意义、有作用的。

  系统状态的可见性。Jakob Nielsen的可用性的10个启发式中,系统状态的可见性是用户界面设计中最重要的原则之一。用户在任何时候都想知道当前的上下文,而不应该让他们猜测——应该通过适当的视觉反馈告诉用户发生了什么事情。数据上传和下载操作是功能性动画的常用场景。例如,一个动画加载栏显示了任务的完成进度,并展示了对任务速度的预估。

  本文系人人都是产品经理翻译团队@吉诺是比利 翻译发布,未经本站允许,禁止转载。

  It is courage to continue that counts.

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。