Second slide

您现在的位置是:网站首页前端技术-网站建设 > 文章内容

[译]网站设计综合指南

admin 2018-11-01 20:27:09 浏览

A Comprehensive Guide To Web Design

网站设计综合指南

摘要

(此博文为赞助博文) 网站设计往往是个棘手的问题。在设计网站时,设计师和开发者往往需要考虑很多要素,从视觉表现(网页看起来如何)到功能设计(网站用起来如何)。为了细化网站设计任务,我们为读者呈上此文。

本文将着重讲述设计主旨,设计启发,设计方法,为你的网站打造更好的用户体验。我们从大方向着手,例如用户旅程(怎样定义网站“骨架”),细化到单一页面(网页设计需要考虑什么)。同时我们也会提及其他的设计要素,例如移动端支持与测试。

目录

设计用户旅程 Designing The User Journey

  1. 信息架构 Information Architecture
  2. 全局导航 Global Navigation
  3. 链接与菜单项 Links and Navigation Options
  4. 浏览器的“后退”按钮 “Back” Button in Browser
  5. 面包屑导航 Breadcrumbs
  6. 搜索栏 Search

设计独立页面 Designing Individual Pages

  1. 内容策略 Content Strategy
  2. 页面结构 Page Structure
  3. 视觉层级 Visual Hierarchy
  4. 滚动行为 Scrolling Behavior
  5. 内容加载 Content Loading
  6. 按钮 Buttons
  7. 图像 Imagery
  8. 视频 Video
  9. CTA 按钮 Call-to-Action Buttons
  10. 网页表单 Web Forms
  11. 动画 Animation

移动端支持 Mobile Considerations

  1. 响应式网页设计 Practice Responsive Web Design
  2. 从鼠标点击到手势 Going From Clickable to Tappable

无障碍设计 Accessibility

  1. 弱视用户 Users With Poor Eyesight
  2. 色盲用户 Color Blind Users
  3. 盲人用户 Blind Users
  4. 键盘流用户体验 Keyboard-Friendly Experience

测试 Testing

  1. 迭代测试 Iterative Testing
  2. 网页加载时间测试 Test Page-Loading Time
  3. A/B 测试 A/B Testing

开发者交接

结语

Designing The User Journey 设计用户旅程

Information Architecture 信息架构

“信息架构”(IA)这个术语通常被误用来表示网站的目录结构。但其实这是不正确的,尽管网站菜单是信息架构的一部分,但它也仅仅是一个方面。

信息架构指,将信息以清晰逻辑的方式组织。这种结果遵循一个目标:帮助用户在复杂信息集合中导航。好的信息架构提供了与用户预期一致的层级结构。然而优秀的层级结构,直观的导航都不是偶然出现的,而是用户调研和用户测试的结果。

调研用户需求的方法众多。通常来说,信息架构多用于用户调研(如用户访谈,卡片分类法):调研人员倾听用户期望,观察潜在用户如何将复杂的信息组进行归类。信息架构同样需要可用性测试的结果,来看用户是否可以方便地导航。

 

 

卡片分类法简单实操,志于帮设计人员弄清:如何最优地基于用户输入将内容组织分类。信息架构与卡片分类法相似,都能典型地呈现出清晰的模式。(图片来源: FosterMilo

在设计网页界面前,往往要进行例行步骤:设计者基于用户访谈设计网站导航结构,用卡片分类法测试该结构是否符合用户的思维模式,用户体验研究者用“树形测试法”对导航结构进行验证。

 

 

树形测试法能够可靠地验证,用户能否根据现有目录结构进行导航。 (图片来源: Nielsen Norman Group) (点击查看大图)

Global Navigation 全局导航

导航是可用性的基石。如果用户在网站中难以定位,无所适从,网站再怎么好也没用。网站导航设计需要遵从下列原则:

  • 简易性 导航应以这样的方式设计,访问者到达目的地点击次数越少越好。
  • 清晰性 用户不需要猜测导航选项的含义,每一个菜单项对于来访者来说不言自明。
  • 一致性 对于整个网站的所有页面,导航体系必须统一。

设计导航时需要考虑如下几点:

  • 根据用户需求选择导航模式 导航设计必须遵循主流用户的需求。目标用户群期望某种特定类型的网站交互,那就以你独到的方式,让用户满足预期吧~例如:如果大部分用户都不知道汉堡包图标是啥意思,就避免使用该图标展示导航。
  • 将导航选项区分优先次序 有一种简单的方法来区分导航选项优先级:将用户行为任务按照不同优先级排序(高级,中级,低级),然后在布局中突出显示高优先级的用户行为路径,以及被频繁访问的节点。
  • 使重要选项可见 正如 Jakob Nielsen 所言,识别出某事比回忆起某事容易。为了减小用户记忆负担,将所有重要菜单项设为一直可见。这些最重要的菜单项应该一直可用,而不仅在我们预期用户需要的时候展现。
  • 传达当前位置信息 “我在哪”是用户进行有效导航时需要回答的最基本问题。许多网站有此常见错误:不显示用户的当前位置,因而如何定位的问题也值得深究。

Links and Navigation Options 链接与菜单项

链接、菜单项是导航过程中的要素,直接作用于用户旅程,这些交互元素遵循下列规律:

  • 区别站内链接与外部链接 用户期望站内链接和外部链接为不同的交互行为。所有内部链接应当在当前标签页打开,这样用户便可以在当前窗口使用“后退”按钮。如果决定在新窗口打开外部链接,应当在自动打开新标签页/新窗口前提醒用户。这可能需要声明(在新窗口打开),将其以文本的形式添加到链接文本中。
  • 标记已经访问过的页面 如果访问过的链接没有修改颜色标记,用户很可能无意中重复访问。

 

 

用户通过颜色标记,识别出曾访问过的页面,避免无意重复访问同一页面。
  • 认真核实所有链接 当用户点击链接却返回 404 错误时,会极其不爽。当访问者浏览内容时,期望所有的链接都指向链接所指,而不是其它不相关页面,更不能容忍 404 页面。

 

 

“Back” Button in Browser 浏览器的“后退”按钮

后退按钮是浏览器上第二重要的界面控制(仅次于最最重要的 URL 地址栏),要确认“后退”按钮符合用户预期。当用户跟着链接来到某页面,然后点击“后退”键时,他们期望恰好返回到前一网页的离开的位置。尤其要避免点击“后退”按钮却回到了原页面顶端的情况。失去用户原先的焦点会使用户被迫重复浏览已读内容。由于没有恰好“后退”原位,用户会迅速失去耐心。

Breadcrumbs 面包屑导航

面包屑导航是系列链接的集合,用于索引网站的当前位置。它是一种次级定位规则,常用于显示用户当前在网站的位置。

虽然该元素不需要过多解释,有几点还是值得注意:

  • 不要使用面包屑作为主导航的替代品 主导航是引导用户的主导元素,然而面包屑只是支持元素。使用面包屑而非其他元素作为主导航,通常意味着导航设计较差。
  • 使用箭头作为分隔符,而非斜杠。清晰分离导航层级 推荐使用大于号(>)或右箭头(→),因为此类符号包含方向信息。不推荐在电商网站中使用左斜杠(/)作为分隔符。如果你非要用的话,请确保商品类别不包含斜杠。

 

 

此面包屑的层级关系简直难以分辨 (点击查看大图)

Search 搜索栏

有些用户为了某特定目标访问网站,他们并不想使用导航功能。此时用户只想在搜索栏输入文字,提交搜索查询,返回他们寻找的页面。

设计搜索栏时考虑下列基本规则:

  • 将搜索栏放在用户所期望的地方 下图是基于 A. Dawn Shaikh 和 Keisi Lenz 的研究,通过对 142 名参与者的问卷调查,画出的用户对于搜索栏的期望位置。这一研究发现,搜索栏的最佳摆放位置是网站的左上角和右上角。这样用户通过"F-型"浏览模式可以轻易找到搜索栏。

 

 

  • 富文本网站中突出显示搜索功能 如果搜索功能是你的网站重要功能,显著地显示出来,因为这可以是用户探索的最快路径。
  • 合理设计输入栏尺寸 输入框太窄是设计者的常犯错误。诚然,用户可以在短文本框中输入长文字,但是一次只能显示部分文字。这固然是不好的设计,因为不能同一时刻显示整个查询条件。实际上,当搜索栏很短时,用户被迫使用短小,模糊的查询条件,因为搜索条件太长看不到。Nielsen Norman Group 推荐使用 27-字符输入框 ,适用于 90% 的查询。

 

 

  • 在所有页面放置搜索栏 在所有页面放置搜索栏的好处是,当用户不能定位他们想要查看的内容时,便会尝试搜索功能,无论他们当时在页面哪个地方。

Designing Individual Pages 设计独立页面

Content Strategy 内容策略

内容策略的重点在于页面对象的设计。理解页面目标,根据目标定位绘制页面。

我们提出如下提高页面内容理解的实践技巧:

  • 避免信息过载 信息过载是非常严重的问题,它阻碍了用户交互和用户决策,这是由于用户感到信息量多到难以消化。减小信息过载有一些简单的方法。最常用的方法便是组块算法 —— 分解内容为更小的内容块,这有助于用户更好地理解整个流程。结账表单便是一个很好的例子。在同一时刻最多显示五到七个输入框,将整个结账流程分解在不同页面,渐进地按需展示字段。

 

 

(图片来源: Witteia) (点击查看大图)

  • 避免生僻词和专业术语 页面上任意一个生僻难懂的术语都会激增用户的认知负载。最安全的策略是将受众定位所有阶段用户,选择清晰易懂的词语以适应不同类组的用户。
  • 长段落细分 对于信息过载这一点,除非网站定位主打内容消费,否则在设计时要尽量避免长段文字。举例说明,如果你想写个服务介绍或产品介绍,尽量一步一步来,慢慢展开细节。使用短小、视野内可见的模块以让用户逐步探索。根据 Robert Gunning 的《看透商业评论编写》,一句话字数最好在 20 个字以内。

 

 

(图片来源: The Daily Rind)

  • 避免所有字母大写 英文内容中,全字母大写的模式,仅适用于短小文字如缩略语或 Logo。避免对长单词使用全大写模式:段落、表格标注、错误提示、通知信息等。正如 Miles Tinker 的 《字体的可读性》所说,全字母大写会使阅读速度骤减,且多数读者会感到全字母大写的可读性较低。

作者:horizon13th
链接:https://juejin.im/post/5a5abb97518825733f6df3d9
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

上一篇:第一页

下一篇:最后一页