惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
Docker
Simon Willison's Weblog
Simon Willison's Weblog
H
Help Net Security
F
Fortinet All Blogs
H
Heimdal Security Blog
S
Schneier on Security
L
LangChain Blog
博客园 - Franky
酷 壳 – CoolShell
酷 壳 – CoolShell
NISL@THU
NISL@THU
P
Palo Alto Networks Blog
J
Java Code Geeks
博客园 - 【当耐特】
The Last Watchdog
The Last Watchdog
W
WeLiveSecurity
www.infosecurity-magazine.com
www.infosecurity-magazine.com
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
V
Vulnerabilities – Threatpost
I
InfoQ
Recorded Future
Recorded Future
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
C
CERT Recently Published Vulnerability Notes
T
Tenable Blog
腾讯CDC
C
Check Point Blog
量子位
M
MIT News - Artificial intelligence
GbyAI
GbyAI
罗磊的独立博客
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
B
Blog
小众软件
小众软件
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
C
CXSECURITY Database RSS Feed - CXSecurity.com
Stack Overflow Blog
Stack Overflow Blog
P
Proofpoint News Feed
P
Privacy & Cybersecurity Law Blog
V2EX - 技术
V2EX - 技术
T
Threatpost
Engineering at Meta
Engineering at Meta
Attack and Defense Labs
Attack and Defense Labs
T
Tailwind CSS Blog
S
Securelist
The Cloudflare Blog
博客园 - 叶小钗
L
LINUX DO - 最新话题
T
Troy Hunt's Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
爱范儿
爱范儿

月光博客

AI编程从零开始:环境配置到开发调试-月光博客 母亲被保健品诈骗-月光博客 向身体低头,向岁月妥协:我的高血压“还债日记” -月光博客 月光博客电子书:《信息安全指南》 谷歌发布2025年度搜索排行榜 中国2025社会热点大事记 2025年十大流行语发布 7天3次,骗子骗走我母亲95万元 “技术男”设三重安全墙,母亲95万存款还是被骗走了 电信诈骗后的复盘:母亲的95万元,是怎么从手机银行里消失的 母亲被电信诈骗95万元的全过程 阿根廷警察被谷歌街景相机拍到裸照 网信办开展“清朗·整治恶意挑动负面情绪问题”专项行动 翟欣欣敲诈勒索案一审获刑12年 《绝命毒师》影评:力工觉醒后的梭哈至死 《人工智能生成合成内容标识办法》正式施行 用AI分析你的财务信息 腾讯子公司实习HR怒怼求职者后被开除 OpenAI发布最强模型GPT-5,免费向所有用户开放 用AI解构你的日记 用AI分析你的游戏偏好 用AI分析你的观影偏好 用AI分析你的听歌偏好 《白鹿原》人物分析:乱世浮沉中的人性剖析 乌托邦的捷径:让AI治理“失败国家” 苹果AI的“路径错误”:为什么它在大模型时代掉队了? 《暗黑破坏神3》第35赛季开荒指南 我对特朗普的看法 欧·亨利十大经典小说鉴赏 HBO电视剧《最后生还者》第二季影评 播客自动化更新分发教程 《围城》人物分析:知识分子的时代困局 NotebookLM音频概览支持中文 《暗黑破坏神3》国服回归 《暗黑破坏神3》国服赛季开荒指南 《网络数据安全管理条例》正式发布实施 契约之下的自由:社会契约论 如何去除文章的AI味道 电影《好东西》影评 我的价值观:义务论和效益论 《魔兽世界》正式服PVP教程 电影《哪吒2》影评 中医理论不是科学理论 DeepSeek与主流AI模型对比评测 TikTok停止在美国服务 我的三观(世界观、价值观、人生观) 《无限暖暖》游戏评测 2024年财经年度总结 月光博客2024年推荐阅读文章 IMDb公布2024年热门电影和电视剧 2024年十大流行语发布 谷歌发布2024年度搜索排行榜 中国2024社会热点大事记 Google Adsense税务居住地证明申请教程 极狐GitLab回应前员工实名举报公司高管:恶意诽谤造谣 升级FTTR千兆光纤带宽 字节跳动起诉前实习生索赔800万 看完历届奥斯卡最佳影片后的体验 李子柒已经正式改名并恢复更新 苹果历年新春短片 “姜萍事件”调查结果公布 胡锡进社交平台恢复更新 上海女子沙白自杀的伦理道德分析 京东与杨笠一起玩火 字节跳动大模型训练被实习生攻击,涉事者已被辞退 《加勒比海盗》系列电影 《夺宝奇兵》系列电影时间线 《侏罗纪公园》系列电影时间线 《终结者》系列电影时间线 华为禁止用户从外部手动安装安卓应用(APK文件) 《炉石传说》国服回归一片混乱 官媒辟谣苹果手机被远程引爆 小米回应摄像头里出现陌生男子说话 环球人物:民族大义不是流量密码,盲目排外没有土壤 《异形》系列电影时间线 看完IMDb250后的体验 暴雪《炉石传说》国服开启预约 网易DD参与代打《魔兽世界》事件的深入分析 福建男子四年前“翻墙”浏览境外网站被行政处罚 《魔兽世界》正式服开服两周游戏体验 暴雪游戏足迹查询:查看暴雪游戏的数据 用AI分析你的推特社交网络数据 胡锡进停更三个月 国家网络身份认证公共服务管理办法向社会公开征求意见 苹果将部分产能转回中国 Windows全球大范围蓝屏 电影《V字仇杀队》影评 微软中国员工禁用安卓手机:只能用iPhone 《魔兽世界》怀旧服“巫妖王之怒”游戏体验 百度旗下萝卜快跑已在多个城市开放载人测试 我为什么不喜欢华为这家企业 胡锡进:强烈谴责苏州袭击日本人的凶手 20美元在美国超市的购买力 华为紧急辟谣“是国内最大的牛肉进口商” 苹果公司公布2024年Apple设计大奖获奖名单 自动生成电影剧本:人工智能技术的崭新里程碑 电影《芳华》人物分析 Steam账号被盗号的解决方法 中文互联网内容正在逐步消失 马斯克:推特域名已全部转移到X
提高WEB用户体验至关重要的几点
投稿 · 2015-04-12 · via 月光博客

一个精通算法经验丰富的后端工程师,也不一定能够完成出色的前端页面,对逻辑经验丰富的程序员来说,html/css显得繁琐低效,即便是SASS、LESS这样的框架也难以让传统程序员理解前端工程师,多数人眼中前端是编程与设计各占一部分的新职业,特别是在众人把用户体验挂在口中时,更让人觉得前端应当对此有独特的理解。其实在我看来,用户体验这东西不管是从哪方面来说都没有一个确切的定义,可能前端可以更多的用经验来认识它,亦有可能在不同人眼中的web用户体验有所差别,只不过方向相同而已。

笔者也从自己的经验中总结了一些WEB中用户体验的实际细节,当然也不可能面面俱到,限于篇幅笔者就只分享几个包含显著特征容易被认可的细节:

AJAX

看到这里肯定有人忍不住笑出声,的确这已经不算什么新技术,但要让我站在用户的角度来评价网站技术上的变化中给访问者带来最大友好性的一项,我肯定会选AJAX.

记得在我刚刚开始学会上网时候,不管是注册页面还是登录都是我最烦的,那时候网速又不快,打开一个注册页面就要几秒时间,然后从上往下有几十个选项要全部填满,比如其中有一项让我填写“密码保护问题”,这个设计简直让人想吃电脑,因为很多人一看这种问题应该都会和我一样随便写几个数字就提交,然后等几秒加载完网页提示“密码保护问题”不允许有数字,同时之前填写的十几项数据全部清空需要重新再来一遍,再花几分钟写完之后提交又提示不允许有字母,再来一遍,有时候还会提示字符太短太长有空格超时之类,总之如果你第一次注册这种页面,至少要花掉十几分钟,而且还是在重复做一件事。从网站运营者角度来看这也很烦,重复十几分钟填写表单很容易就失去很多潜在用户。

在AJAX的异步请求出现之后,这种情况明显的改善,给用户的体验感最明显。用户并不知道何时已经提交请求,就拿刚才表单的例子来说,如果每填写一项都会在当前表单的最后提示具体错误类型(在用户未点击时已经异步提交了请求并且用返回数据更新部分页面),这就给用户很直观的提示,这种即时的互动让访问者能够很直观的感受到这是一个友好的网站。(当然用javascript也能做到部分表单验证,这只是举一个例子)。在不重新加载整个页面,通过操作DOM来改写小部分数据这点上也能给访问者带来极大的交互感,现在流行的微博就是最好的例子,在发送微博/评论/转发之后用户会发现不用刷新等待整个页面加载,操作之后立刻会有小部分的页面发生变化,虽然看起来微不足道,但对一个访问者来说,这足以让他们欣喜。

网页字体

网站中所有的文字内容表达方式都是通过字体,合理的字体无疑会给用户更好的体验感。在业内来说豆瓣可能是对字体研究最多的一个网站,拿豆瓣读书都来他们用Helvetica和Arial这两种差别非常小的字体,这种非衬线字体很容易让人一目了然同时富有一些科技感,豆瓣本身就是以图片加上简短语句组成,让人能够从字体中快速找到重心是设计的目标所在。

有人担心非衬线用作正文对阅读体验有影响,实际上不难发现国外很多网站都用非衬线字体来处理正文,当然也不排除他们可能考虑的更多是英文。其实我还是非常喜欢非衬线体,它们看起来更富美感,而且如今大量的文字在互联网上比较少见,一些活泼具有现代感的非衬线字体也逐渐被更多的开发者认同而且使用。

除去这些,字体还可以在选择上再细分一些,记得曾经看过一篇统计,不同的字体会影响用户对站点权威性的信赖程度。比方说在一个公司网站上大量使用类似于幼圆、Cursive一类字体,很容易让访问者不信任网站,当然如果是以娱乐为主的网站也不能过于严肃和简朴,在使用时既要考虑到大众用户的接受程度,也要知道自己的网站是什么定位,当然技术性的问题也不能忽略,像是火狐比IE区分sans-serif要更模糊一些,有的字体“O”和“0”、“L”和“1”容易让人难以区分(代码较多的站点需要考虑)等等,这样综合对比选择得到的字体无疑能让网站更有魅力,从而留下更多的用户。

顺便一提,在使用字体时注意版权。

加载速度

很多用户在还未见到你出色的设计和内容之前就已经离开了页面,这是因为网站加载时间实在是太长,已使访问者失去耐心。其实很多的访客不关心脚本和图片的加载顺序,他们只要看到网站的整体结构能够迅速的加载出来就可以开始浏览,即便是其他元素逐渐加载也可以接受,基于这点,我们可以使用很多延时加载的方法来使用户更快的见到页面。除此之外还有很多因素可能会对加载速度造成影响,也有逐一优化的办法,之前我已经写了两篇相关文章来解决此问题(提高网站加载速度的解决方案有多少),不再细述。

结构设计

不知道大家发现没有,近来很多网站都喜欢把菜单fixed在顶部(维特博客就是个例子),只要这个菜单选择项不是太多,访客对这样的固定菜单接受程度还是很高的,这只是设计中的一个小例子,相类似的有很多,比如在表单中以深浅颜色区分每一行,以提高可阅读性;在激活窗口时为当前控件添加一个边框,使用户能够更建议的分辨自己在操作哪个窗口等等。很多的设计与排版方式都已经得到了大众认可,可以作为网站设计时的参考。

网站结构设计的好看不好看对访客来说虽然有影响,但也不至于立刻离开,而且即便是非常精致的页面却对用户不怎么友好,想必也不会有多少人愿意访问。

举个例子,以前我用好搜(360搜索)的时候总感觉怪怪的,没有google和百度顺手,研究了一段时间之后才发现好搜的的主页搜索框比百度和google要低一些,Google到顶部固定菜单的距离是286px,百度是192px(未登录238px),而好搜则是328px。相比之下,好搜的搜索框更趋向于屏幕中间,而百度与Google则是在屏幕中上方,对于已经常年习惯了百度和Google搜索的用户来说,想要改变这个习惯来适应好搜多少有些困难,除此之外搜索框还有结果页也有几个问题不一一细述,360这样做无外乎两点,一个是不在乎/不知道/不关心用户体验,一个就是故意有所不同,想要培养自己的用户习惯。(在我看来也不怎么成功)

细节决定成败

乔布斯的父亲是个木匠,曾经教给乔布斯一个理念,就是橱柜的背面里层也要细致处理甚至是打磨光滑,即便用户看不见。在理想主义的伟大试验品“麦金塔”出世之后,有人甚至感叹,就连电路板上的电路图都能当作艺术品,的确如此,乔布斯就曾经开除一个对电路图美学设计不满的员工。一个伟大产品的诞生并不是一蹴而就的,必然经过了长期的沉淀积累与琢磨,但仅此依旧不能称之为伟大,只能算成功。一个产品细节上的最后润色可能才是决定它价值的关键。对于WEB开发者来说,更是如此。

很多时候用户体验应遵循“less is more”,堆积如山的垃圾信息不仅无用还破坏了整体的用户感受,这也就是所谓的设计细节决定成败。

如果把WEB用户体验展开来说,就算说个一天一夜也说不完,太多的细微之处需要我们留意,而且想要做好任何一处都并不是简单的事。对于开发者来说,对用户体验有更深更实际的理解就是把自己视为用户,在逐渐满足自己细枝末节体验感的同时,也丰满了站点的用户体验感受。

来源:维特博客投稿,原文链接

提高WEB用户体验至关重要的几点