• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 提高网站可用性的10个小技巧

提高网站可用性的10个小技巧

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含网站,可用性等相关知识,佚名 希望在学习及工作中可以帮助到您

不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。

可用性是用户体验的一种度量,它可以用访问者完成网站功能的方便程度来描述——无论是通过自身知识还是通过学习新方式来完成这种功能。我认为Jakob Nielson的解释非常到位,他说:

可用性是评估网站易用程度的一种属性。同时“可用性”这个词也指在设计过程中提高易用性的方法。

在本文中我希望能够提供一个可用性清单,内容覆盖了从视觉设计,到可以用在任何项目中的简单导航提示等多个方面 。

 

1. 当前位置导航

要让用户在任何时候都知道自己身处哪个模块,或者在浏览那个分类。对任何网站来说,这都可以极大提升可用性。在这一点上,创建当前位置导航可以算是最有效的提升可用性方式。

当前位置导航的理想方式是在服务端创建,这样可以大量节省HTML和CSS代码。如果不方便在服务端创建导航,那么使用CSS操纵你的body元素 从而直接定义每个导航标签也是一个不错的方法。

另外,你可以方便的 使用JavaScript创建当前位置导航菜单 。

要注意,你的当前位置导航最好和鼠标滑过样式保持不同,这是很多网站缩不注意的。

 

提高网站可用性的10个小技巧



2. 可用的表单标签和按钮

使用HTML的label属性,可以让用户通过点击注释标签来激活表单元素,这是HTML的一个伟大的内置功能,但不幸的是,很少有用户知道这回事。

怎样让用户了解这个功能呢?你可以通过改变鼠标指针形状的方式来提醒用户,这只需要一两行代码就可以实现。

 

提高网站可用性的10个小技巧

做成这样之后,用户就很容易的知道这标签是可以点的,我经常觉得HTML标准里没有把这些可以点的元素统一设置为小手指针是非常不应该的,所以我通常我会这样统一定义:

label, button, input[type="submit"]{cursor:pointer;}

 

 

3. 将你的LOGO链接到首页

我认为logo不链接到你的网站首页是一件令人沮丧的事情,恰恰有很多网站没有这样做。用户研究表明,这样做是很有必要的,用户需要它!

如今越来越多的网站意识到,给LOGO加链接的重要性。用户已不满足于一个标记为“主页”的文字链接,用户希望点一下logo就可以回到首页。

拿Facebook为例,它为每一个导航元素增加了“ref”属性来跟踪用户点击。如下图:

 

提高网站可用性的10个小技巧

 

4. 加大链接的点击面积

大约一年前,37Signals 的 Ryan Singer 写了一篇文章来介绍它们在 Basecamp 项目中如何增大链接的可点击面积 。这又是一个提升网站可用性的小细节,它只需要你增加链接周围的 padding 值就可以有效增大点击面积。

对任何网站来说这都是一个值得尝试的方法,它可以方式用户误点或点不到链接。并且对于手机网页的设计更为重要,因为很多用户使用手指来点击触摸屏上的链接,增大面积可以帮他们更方便的浏览网页。

 

 

提高网站可用性的10个小技巧

5. 表单元素焦点显示

为处于激活状态的表单元素添加焦点显示,越来越成为UI设计的一种趋势。它让用户了解自己做了什么,在做什么。这是一种简单但有效的向用户传递有用细节信息的方式。

 

提高网站可用性的10个小技巧

 

6. 提供有用的404错误页面

让网站呈现给用户一个大大的 Apache 错误信息会让人很不爽,创建一个友好的、有用的404错误页面是一个不错的解决方法。因为对非开发者来说,“404”这些数字没有任何意义和价值,用户只希望在网站上找到自己需要的信息。

要建立一种可以帮助用户正确的找到他们需要的信息的错误提示页面,比如显示一些抱歉的同时,加上搜索框、推荐文章或首页链接等,努力把用户留在网站上,而不要把责任都推给用户输入了错误链接。

这里有一些优秀的404页面欣赏:  极富创意的404错误页面欣赏

 

提高网站可用性的10个小技巧

 

7. 创造一个舒适的文字环境

如今,网站文案撰写已成为了一个很大的话题,做网站有越来越多的细节需要考虑。

从古到今,关于网站文字内容的讨论从未间断并且其标准在一直变化。当年Steve Krug 曾主张缩减掉一半的文字内容,转而用列表的形式呈现它们。

但现在不同了,我们需要用和朋友对话的方式来撰写文案,让用户感觉到一种舒适温馨的氛围。这样用户就会少一些局促感,即使他们遇到了使用上的问题,他也会心情愉悦的在网站帮助中寻找解决的办法。

 

提高网站可用性的10个小技巧


8. 调整行距增强可读性

行距是可以从书报杂志等传统媒体直接过度到网页上的元素之一,这些内容的研究和改进已经进行了数百年,已经积累了大量优秀的经验。所以你下次设计之前,大可以先翻翻杂志找找灵感。

行距是网页设计中经常被忽视或滥用的地方,我通常从1.4倍行距出发开始设计,然后根据设计和内容进行调整。

 

 

提高网站可用性的10个小技巧

9. 使用空白来区分和归类元素

将内容元素归类组合是显示内容的一种方式。你可以使用图片、边框或者仅仅是使用空白来归类区分。使用空白归类内容元素可以创造自然和谐的用户体验,即使是匆匆的一瞥,内容也会一目了然。

用户一眼扫过网页(比如阅读TOP10列表时),首先会注意标题。我们首先希望的是,我们的网站内容很有趣,能吸引用户进一步阅读。但是对用户进行正确的引导,会对内容的展示起到促进和相得益彰的作用。

 

提高网站可用性的10个小技巧

10. 无障碍浏览

这里并不是指“508法案” ( 即section 508,美国法律,大体上描述为:某些特殊用户群体,如残疾人,浏览某网站时,如果无法正常获得所期望的信息,那可以依据相关法规,对该网站依法起诉。 )  这里所说的“无障碍”,指的是为你的用户考虑到方方面面,让他们轻松的找到需要的东西。

您可能想查找下面的文章:

  • 使你的网站快速跑起来
  • 网站前端性能优化之javascript和css篇
  • 人人必知10个网站易用性技巧
  • 巧用扁平化风格来设计网站的方法
  • 高性能网站优化指南
  • 美妆造型类网站 颜色搭配技巧的方案及效果展示
  • 站长应该注意的9个提高网站易用性的代码优化技巧
  • WEBAPP开发技巧小结(手机网站开发注意事项)
  • 如何让一个网站前端有气质可以吸引住用户
  • 用ps两分钟做个xhtml+css的网站首页

相关文章

  • 2018-08-23超全面!这可能是你见过最全的弹窗设计解析
  • 2017-08-06搜索文本框焦点离开时文本位置跳动问题解决方法
  • 2018-08-2310分钟了解兵器榜排行第一的Sketch插件:CRAFT
  • 2017-08-06网站的视觉设计路径应顺应用户习惯
  • 2017-08-06网页设计心得:页面布局的简单规则
  • 2018-08-23长文揭秘!全新的大众点评V10版本是如何做品牌升级的?
  • 2018-08-23为了拖尾款,甲方竟然要当我的男朋友…
  • 2017-08-06IE下打开ClearType后透明字体问题的解决方法
  • 2017-08-06使用字符代替圆角尖角研究心得分享
  • 2017-08-06网页乱码问题当设置编码为utf-8乱码的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 高手怎么做,才能让文字编排更出彩?
    • 如何构建Web端设计规范之设计理念篇
    • 新手建站入门教程⑨:如何建一个门户网站
    • 超实用!轻松4步搞定一个APP的LOGO设计
    • 设计道理谁都懂,为什么换自己就不会?
    • 看完转系列!甲方虐稿指南+设计师生存法则
    • 亚马逊语音交互设计规范(二)用户说的内容
    • 为了用户!让你的UI更加安全稳妥的5种设计策略
    • 新年新气象!这3个趋势正在引领2018年1月的网页设计
    • 如何简化操作流程?来看这篇超全面的总结!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有