提升Web用户体验的71个设计要点
2016-11-11 00:00
459 查看
转载地址:http://www.codeceo.com/article/71-tips-improve-web-ue.html
01 尝试使用一列的布局替代多列布局
![](https://static.oschina.net/uploads/img/201611/11122025_VXOI.jpg)
02 给用户一些小的利益,别看上去那么赤裸裸
![](https://static.oschina.net/uploads/img/201611/11122025_qJGr.jpg)
03 合并相似的功能
![](https://static.oschina.net/uploads/img/201611/11122026_ehhK.jpg)
04 尝试展示来自用户的赞扬,而不是自我表扬
![](https://static.oschina.net/uploads/img/201611/11122026_KPt2.jpg)
05 重复核心行动点
![](https://static.oschina.net/uploads/img/201611/11122026_bUoD.jpg)
06 统一视觉规范,提升可识别性
![](https://static.oschina.net/uploads/img/201611/11122026_PQYn.jpg)
07 尝试使用推荐的口吻,而不是让用户感觉面对一台冷冰冰的机器
![](https://static.oschina.net/uploads/img/201611/11122026_hOKA.jpg)
08 给用户吃「后悔药」的机会
![](https://static.oschina.net/uploads/img/201611/11122026_INyq.jpg)
09 告诉用户产品适用的人群,而不是人人都通用
![](https://static.oschina.net/uploads/img/201611/11122026_hrkh.jpg)
10 将文案写得更加的直接,而不是一堆废话
![](https://static.oschina.net/uploads/img/201611/11122026_jj2g.jpg)
11 增强主行动点的视觉冲击力,提升它在页面中的可对比性
![](https://static.oschina.net/uploads/img/201611/11122027_pZyG.jpg)
12 让用户知道你从哪儿来更易于拉近与用户的关系
![](https://static.oschina.net/uploads/img/201611/11122027_1HGx.jpg)
13 将表单做的简单点,确保用户在抓狂之前能进入下一步
![](https://static.oschina.net/uploads/img/201611/11122027_JkJ8.jpg)
14 尽量将用户需要选择的信息展示出来而不是藏起来
![](https://static.oschina.net/uploads/img/201611/11122027_B5sN.jpg)
15 页面的排版需要考虑用户是否会漏掉底部信息
![](https://static.oschina.net/uploads/img/201611/11122027_i3Zp.jpg)
16 如果页面的底部有需要关注的行动点,别让文中过多的外链带走了用户
![](https://static.oschina.net/uploads/img/201611/11122027_tCuM.jpg)
17 确保用户知道自己目前的状态
![](https://static.oschina.net/uploads/img/201611/11122027_70oE.jpg)
18 将利益点融合在行动点中,增强用户的点击欲望
![](https://static.oschina.net/uploads/img/201611/11122027_1FP5.jpg)
19 将行动点与当前信息结合起来
![](https://static.oschina.net/uploads/img/201611/11122027_9A86.jpg)
20 将简要的表单合并到页面中,减少调整页面带来的用户流失
![](https://static.oschina.net/uploads/img/201611/11122027_p2hW.jpg)
21 适当的增加延迟动效,让用户感知到页面的变化
![](https://static.oschina.net/uploads/img/201611/11122027_jvld.jpg)
22 让新用户从尝试产品入手,而不是一来就面对冷冰冰的注册表单
![](https://static.oschina.net/uploads/img/201611/11122028_qEGw.jpg)
23 减少使用线框,这会过多的吸引用户注意力,而且会让页面看上去透不过气
![](https://static.oschina.net/uploads/img/201611/11122028_VrF8.jpg)
24 给用户推销你能给他带来的利益,而不是功能
![](https://static.oschina.net/uploads/img/201611/11122028_ONrM.jpg)
25 一定要注意0结果页面的设计,这也是引导用户的好地方
![](https://static.oschina.net/uploads/img/201611/11122028_faJR.jpg)
26 给用户选择退出的权利,特别是邮件订阅
![](https://static.oschina.net/uploads/img/201611/11122028_hKUt.jpg)
27 注意界面元素的一致性,降低用户学习成本
![](https://static.oschina.net/uploads/img/201611/11122028_dfOy.jpg)
28 给下拉框增加一些预设值,降低用户填写成本
![](https://static.oschina.net/uploads/img/201611/11122028_sM0C.jpg)
29 延续用户日常的使用习惯,而不是重新创造
![](https://static.oschina.net/uploads/img/201611/11122028_xhRx.jpg)
30 尝试告诉用做些事情降低自己的损失,而不是提升收益
![](https://static.oschina.net/uploads/img/201611/11122028_YDHa.jpg)
31 提升页面的视觉层次,增强可阅读性
![](https://static.oschina.net/uploads/img/201611/11122028_hfaE.jpg)
32 将同类的操作合并在一起,降低用户的认知成本
![](https://static.oschina.net/uploads/img/201611/11122028_8k18.jpg)
33 表单及时校验,而不是统一提交后在告诉用户填错了
![](https://static.oschina.net/uploads/img/201611/11122028_F8L5.jpg)
34 尝试将表单输入变得更加宽容,让用户的填写更加简单
![](https://static.oschina.net/uploads/img/201611/11122028_MS18.jpg)
35 通过时间增强紧迫感
![](https://static.oschina.net/uploads/img/201611/11122029_h5yP.jpg)
36 提供用户可预见性的操作,降低用户的心理成本
![](https://static.oschina.net/uploads/img/201611/11122029_J4Ng.jpg)
37 尽可能的帮助用户选择,而不是让用户想破脑袋
![](https://static.oschina.net/uploads/img/201611/11122029_y66V.jpg)
38 尽可能将操作区域放大,降低用户操作成本
![](https://static.oschina.net/uploads/img/201611/11122029_ZKSH.jpg)
39 页面加载速度很重要,尽可能让用户感受到你的网站速度很快
![](https://static.oschina.net/uploads/img/201611/11122029_8CbF.jpg)
40 如果可以,增加键盘快捷键,提升操作效率
![](https://static.oschina.net/uploads/img/201611/11122029_kuqv.jpg)
41 尝试通过对比来让用户感知到性价比
![](https://static.oschina.net/uploads/img/201611/11122029_Tmv7.jpg)
42 尝试对进度条进行「设计」来降低用户等待的焦虑
![](https://static.oschina.net/uploads/img/201611/11122029_rqrN.jpg)
43 根据用户选择逐步展示信息,降低无效信息对用户的干扰
![](https://static.oschina.net/uploads/img/201611/11122029_06t5.jpg)
44 有时候较小的承诺比「夸海口」会更容易让用户信服
![](https://static.oschina.net/uploads/img/201611/11122029_Jwmz.jpg)
45 尝试将提示信息弱化,减少对用户操作的干扰
![](https://static.oschina.net/uploads/img/201611/11122029_FO0Q.jpg)
46 尽量通过系统的功能来简化用户的操作
![](https://static.oschina.net/uploads/img/201611/11122029_IErj.jpg)
47 用文本配合图标来降低用户的认知成本
![](https://static.oschina.net/uploads/img/201611/11122030_Xzkt.jpg)
48 用更自然的语言代替冷冰冰的机器
![](https://static.oschina.net/uploads/img/201611/11122030_2vfF.jpg)
49 放出一些摘要信息来帮助用户识别是否需要进一步了解
![](https://static.oschina.net/uploads/img/201611/11122030_GvKA.jpg)
50 在关键的页面增加用户权益信息,增强用户进一步操作的信心
![](https://static.oschina.net/uploads/img/201611/11122030_Gwkg.jpg)
51 将价格进行换算,让用户感觉这很便宜
![](https://static.oschina.net/uploads/img/201611/11122030_Q8nI.jpg)
52 记得在成功页面感谢用户
![](https://static.oschina.net/uploads/img/201611/11122030_uX2n.jpg)
53 将数字转化成易于用户阅读的形式,而不是冷冰冰的机器语言
![](https://static.oschina.net/uploads/img/201611/11122030_kXiz.jpg)
54 告诉用户选择的权利和自由「诱惑力」
![](https://static.oschina.net/uploads/img/201611/11122030_OgjZ.jpg)
55 尝试让语言更具「诱惑力」
![](https://static.oschina.net/uploads/img/201611/11122030_IREy.jpg)
56 通过设计引导用户的注意力
![](https://static.oschina.net/uploads/img/201611/11122030_0DCx.jpg)
57 通过友好的对比来展示产品,为用户做决定提供帮助
![](https://static.oschina.net/uploads/img/201611/11122030_lbq3.jpg)
58 通过任务机制来提升用户的满足感
![](https://static.oschina.net/uploads/img/201611/11122030_jahO.jpg)
59 让用户了解接下来将要发生什么事情
![](https://static.oschina.net/uploads/img/201611/11122030_qphX.jpg)
60 尝试用更幽默一些的语言文案
![](https://static.oschina.net/uploads/img/201611/11122031_K2PX.jpg)
61 任何操作之后都要给出反馈,让用户知道操作已经生效
![](https://static.oschina.net/uploads/img/201611/11122031_EbWO.jpg)
62 注意动效的真实使用情况(Amazon 的类目菜单就是一个很好的例子)
![](https://static.oschina.net/uploads/img/201611/11122031_WwjW.jpg)
63 注意排版的,不要让信息过于拥挤
![](https://static.oschina.net/uploads/img/201611/11122031_L1pQ.jpg)
64 尝试用讲故事的方式来传递信息,增强用户的代入感
![](https://static.oschina.net/uploads/img/201611/11122031_SjV0.jpg)
65 尽量给用户展示真实的信息,不要欺骗
![](https://static.oschina.net/uploads/img/201611/11122031_6yBE.jpg)
66 随着用户的不断熟悉简化界面
![](https://static.oschina.net/uploads/img/201611/11122031_weuc.jpg)
67 试着用用户的口吻展示信息
![](https://static.oschina.net/uploads/img/201611/11122031_hRqo.jpg)
68 在表单中增加一些提示信息,减少错误的几率
![](https://static.oschina.net/uploads/img/201611/11122031_JD7y.jpg)
69 用简单的文案传递核心关注的信息,少一些废话
![](https://static.oschina.net/uploads/img/201611/11122031_KrZ6.jpg)
70 尝试使用响应式布局
![](https://static.oschina.net/uploads/img/201611/11122031_LIMo.jpg)
71 视觉表达要清晰,而不是模棱两可
![](https://static.oschina.net/uploads/img/201611/11122031_wFqG.jpg)
这71条设计原则虽然针对 Web 设计,但有些部分在移动产品设计中同样有效。翻译过程只保留了图片和标题,更多详细内容可以访问 GoodUI 官网:http://goodui.org/
相关文章推荐
- 提升Web用户体验的71个设计要点
- 用户体验——以用户为中心的Web设计_Chapter3. 战略层:网站目标和用户需求
- Web中的用户体验--1 美观并不等于设计良好
- 用Zepto代替Jquery提升移动Web用户体验
- 用户体验——以用户为中心的Web设计
- 第十五章 提升用户体验 之 设计实现MVC controllers 和 actions
- 最新收集的超棒Mobile/Web UI和用户体验设计
- 超完整的用户体验设计流程,规范化提升产品
- paip.提升用户体验---网站导航栏的设计
- Oboe 提升web 用户体验以及性能
- 用户体验——以用户为中心的Web设计_Chapter1. 用户体验为什么如此重要
- paip.提升用户体验---WEB程序页面的手机及平板浏览器兼容支持
- paip.提升用户体验-----用户注册设计
- paip.提升用户体验---搜索功能设计
- 模块化设计思路:用你的文档提升用户的阅读体验
- 《用户体验的要素-以用户为中心的Web设计》——小结
- 软件设计理念2.0:简化软件操作,提升用户体验
- paip.提升用户体验---高性能web解决 c++ mycp 技术.
- Web 产品(桌面产品)的用户体验设计有必要借鉴移动平板触屏设备吗?
- 用户体验——以用户为中心的Web设计_Chapter2. 认识这些要素