欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

《网页设计综合指南》(一):网页设计看这篇文章就够了

发布时间:2017:12:11 20:07:24 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

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

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

  

《网页设计综合指南》(一):网页设计看这篇文章就够了

 

  本文将重点介绍创建出色用户体验的主要原则、方法和具有启发性的案例;从用户体验地图等整体结构开始,到单个页面的设计;还将介绍网页设计中其他重要的方面,例如移动端适配和测试。

推荐阅读:创意网页设计推广——广州网络建设公司

  目录(加粗部分为本文内容)

  一、设计用户体验地图

  1.1 信息架构

  1.2 全局导航

  1.3 链接和导航选项

  1.4 浏览器的返回键

  1.5 面包屑式导航

  1.6 搜索

  二、页面设计

  三、移动端适配

  四、无障碍设计

  五、测试

  六、开发交接

  七、总结

  一、设计用户体验地图

  1.1 信息架构

  人们经常将网站上的内容列表作为“信息架构”。不对, 虽然它是信息架构的一部分,但它们只是其中的一个方面。

  信息架构是以一种清晰和合乎逻辑的方式组织信息。信息架构有一个明确的目的:帮助用户浏览一组复杂的信息。好的信息架构会创建一个符合用户期望的层次结构。但良好的内容层级和直观的导航并不容易,需要通过用户研究和测试才能实现。

  有很多方法可以研究用户需求。通常情况下,信息架构师会采用用户访谈或卡片分类的方式来获知用户的期望,或者找出潜在用户是如何进行信息分类。信息架构师还需要了解可用性测试的结果,以便查看是否能够高效导航。

  

《网页设计综合指南》(一):网页设计看这篇文章就够了

 

  卡片分类是一种简单的方法,可以根据用户信息找出内容分类的最佳方式。信息架构师喜欢卡片分类的原因之一就是能清晰地得到架构模式。(Image credit: FosterMilo)

  对用户访谈的结果进行分类,然后检验卡片分类是否满足用户的心理模型。UX还会使用“Tree Testing”的方法来检验它的作用。信息架构要在设计具体页面之前完成。

  

《网页设计综合指南》(一):网页设计看这篇文章就够了

 

  Tree Testing是一种确定用户是否能够通过所提议的信息结构解决需求的可靠方法。(Image credit: Nielsen Norman Group)

  1.2 全局导航

  导航是可用性的基石。如果用户在网站迷失了方向,那你的网站内容有多好也无用。因此网站的导航应该遵循几个原则:

  简单的导航。导航应该让用户以最少点击的方式来访问期望内容。

  清晰。不应该让用户猜测导航选项的意义;每个导航选项都应该是明确的。

  一致性:导航系统对网站上的所有页面都应该是一致的。

  在设计导航时需要考虑的一些事情:

  根据用户的需求选择导航模式。导航应该满足大多数用户的大多数需求。若目标群体期望与网站进行某种类型的互动,那么就满足他们的期望。例如,如果大多数用户不熟悉图标的含义,请避免使用汉堡菜单导航。

  设置优先的导航选项。对导航选项进行优先排序的一种简单方法——将不同的优先级选项分配给用户测试,然后将高优先级和频繁使用的路径在导航中突出。

  导航要一直可见。正如Jakob Nielsen说,见到什么比记得什么更容易。通过让所有重要的导航选项可见,可以最小化用户的记忆作用。最重要的导航选项应该随时可见可用,而不只是当我们期望用户使用它们时才可见。

  显示当前位置。“我在哪里?“这是一个基本问题,用户需要一个答案,以便有效地导航。不显示当前位置是许多网站常见的问题。

  1.3 链接和导航选项

  链接和导航选项是导航过程中的关键因素,直接影响用户的体验。遵循这些交互元素的规则:

  认识内部和外部链接的区别。用户期望内部和外部链接有不同的行为。所有内部链接应该在同一个标签页中打开(这样,用户就可以使用“后退”按钮)。如果想在新标签页中打开外部链接,则应在打开之前告知用户,比如添加一段文本到链接文本中,显示“(在新标签页中打开)”。

  更改访问链接的颜色。当已访问的链接不改变颜色时,用户可能无意中重新访问同一页面。让用户知道哪些链接已访问过,避免无意中重新访问。

  

《网页设计综合指南》(一):网页设计看这篇文章就够了

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:Axure教程:如何实现移动端屏幕中内容滚动效果

下一篇:《网页设计综合指南》(三):网页设计看这篇文章就够了

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信