网站设计中哪些细节最容易被忽视？

时间：2024-02-15 22:55:02 | 来源：网站运营

时间：2024-02-15 22:55:02 来源：网站运营

网站设计中哪些细节最容易被忽视？：对于一个网站来说，最重要的自然是用户体验。从我看来，用户体验其实就是一对细节的集合。只有我们这些细节强迫症患者，才格外追求这个。

所谓用户体验：一句话就是——让用户用着舒服

如果让我想“让用户用着舒服”的第一点，就是“让用户感觉着舒服”。可是这一点就是常常被忽视的细节。下面我列举出一些让用户用着舒服的要素。很多是自己在开发中感受到的，可能并不完整。

UI设计维持同一风格。具体来说就是，网站的界面元素在整个网站中具有一致性。比如说“按钮”，这个非常重要的界面元素。登录界面的“登录”“注册”，发帖界面的“回帖”“发布”，还有“确认订单”。可以看出它们是具有相似的功能的——submit。那么它们在外观上就要保持一致。

UI一致可以让用户凭着自己的直觉找到所需的功能，减少用户的网站使用学习成本。

功能收放有度。我的意思是指在网站首页和网站的其他位置中，功能按钮的折叠和展示情况。有些不常用的按钮一般不需要展示，而是折叠到某个菜单中。而将常用的功能直接设为链接或按钮。这点在制作导航条的时候特别重要（因为导航条会出现在每一个页面上）。这个不仅与网页编程，而且与网页内容设计关系也很大。比如导航栏一般推荐放置3~4个一级导航，如果你有十多个分类，建议再分到几个更大的分类里。导航栏排十多个链接并不是很好看的。

不要让同一元素多次出现在页面上，尤其是这一元素很显眼的时候。比如某网站有很多栏目，首页是这些栏目内容的推荐，网页上充斥着大量的“查看更多>>”按钮，（每个栏目都有一个，边上有个排行榜又来一个。一个网页上十二三个大按钮还都长得一样，看多了就感觉恶心了。）而且按钮元素还非常大。给人感觉特别不好。

网站要简洁，把你复杂的功能隐藏起来，等用户需要的时候再出来。而不是平铺在页面上，不管用不用都在那。这才是设计。

确定页面层叠顺序。（写到这里我发现这点确实容易被忽略。于是单独出一条来写）如果你的网页需要多个层，上面的层有可能会覆盖到下面，这时候要特别小心设置z-index值。不要造成遮挡的问题。比如我就见过某网站弹出对话框，一层透明图片层把按钮盖住了，于是完全无法操作对话框按钮。好吧，这是比较大的bug，还有一些小细节，比如某最近改版了的弹幕视频网站，它的“返回顶部”按钮盖在了评论区域迷你播放器的上面。于是视频部分被遮挡。果壳以前也出现过类似问题。当编辑器过长的时候，比如我这样的一篇长回答。编辑器的顶部工具栏会被固定在页面顶部。这是个非常好的照顾用户的设计。然而果壳当时出了个bug，他们忘记了上面的导航栏，于是编辑器工具栏盖在了导航栏的上面。

精心布置广告位和推荐位。网站的用户总是不喜欢广告的，但是毕竟广告是网站的收入主要来源。现在网页广告屏蔽软件也比较多，如果广告太难看/影响操作，就难逃被用户屏蔽了。广告位/推荐位放置最重要的是显眼。比显眼更重要的是不能影响用户的使用。没有人喜欢右下角弹出广告。

广告最好占据页面的一个固定的位置，不要放在浮动层，千万不要弹窗。广告显示的时候不要影响用户的操作，比如以前的网易、腾讯（网易腾讯这么大，我就黑一黑吧，不说某网站了）广告，会把整个网页的header部分向下压，而且有个动画。更郁闷的是，动画是在载入后才播放的。于是就会出现——我正要点击某个链接，广告出来了，广告的位置占据了我原来鼠标的位置，我点到广告了。这种广告会遭致用户反感，不是大网站或流氓网站千万不要这么干，会把自己搞死的。

网页的title标签和网站的语义化。HTML的title属性是最容易被人忽略的属性之一，然而它非！常！有！用！title的作用非常简单，就是在鼠标停留在上方一小会之后弹出一个工具提示。有的时候为了UI的设计，有些文字的按钮就用一个图形代替了。当你的图形设计比较抽象的时候——用户怎么知道你那个图标代表什么意思。这个时候title的作用就出现了。title还有一个作用是处理...元素。所谓...元素是指元素内容过长，以至于显示了“...”来表示这后面还有更多的东西。这种元素一定要加上title标签表示全部的内容。这样可以在用户鼠标悬停在“...”上一小会后，显示出全部的内容。

图片的alt属性也同理。总是我是推荐图片一定要有alt属性。以及其他的一些语义网需要注意的地方。比如用<h>系列标签来写标题，用<section>标签包裹住文章内容，用<footer>来表示网站底部，在<email>标签中写Email地址等。而不是一味的用div，div，div。。虽然div很重要（这里提一句，如果你的网站还在满篇用table，tr，td，而不是div，你最好去重新找一个前端），但是用各种语义网元素可以帮助其他的程序阅读你的网页，并知道它们是干什么的。这样方便在移动平台等地方更好的显示你的网页，也方便搜索引擎对你网页的内容进行抓取。

减少不必要跳转。有的时候你的网站可能需要处理一些信息而没有显示的网页，有些网站会用一个跳转页来解决。比如登录的时候，会先跳到一个空白页来设置登录状态，修改数据库等操作，然后再将用户定位到登录完成页。不过跳转页的最大缺点就是会增加等待时间。而且容易导致操作失败（用户在这里刷新）。某外卖网站的支付功能在支付成功的时候，从到银行支付成功页点回到商户网站，会跳到一个支付完成页，然后跳到支付正在处理页，然后又是一个支付成功页，最后跳到订单成功页。我看着我的浏览器跳来跳去都觉得好难受啊。

后台可以用curl收发某些消息，也可以在最初的跳转页带上更多的参数，直接让结果页中的sql语句处理全部内容。

背景、边框和底纹。有的时候这些背景，边框和底纹会直接的对用户造成使用上的影响。首先弹出对话框一定要有非透明背景。边框和底纹可以为用户标识操作区域。哪些区域是推荐修改的，哪些是无关紧要的之类的东西。如果提供给用户选择的是几个大区域，那么用不同的边框来标识出用户的选择也是很重要的。

在保证UI设计风格的基础上，不要为了达到某一视觉效果来修改网页。有些网页为了达到某些UI上的要求，比如是间距的特殊要求来用一些空元素。实际上这些空元素对于HTML来说，就是垃圾代码。这种情况下尽量用CSS达到某些要求，如果实在达不到，不应该强求。我一直是认为UI设计不应该要求前端设计100%还原。垃圾代码不仅影响网页运行，还可能导致一些奇怪的bug。

给用户明确的反馈。当你在做一个操作的时候，可能背后的javascript要执行很长的时间。这个时候你必须明确告诉用户你正在处理一些东西。最常用的方法是将鼠标光标切换成wait模式，还有在网页上显示一个小圈圈的动态图。如果你用Ajax登录，那么在点击登录按钮之后应该显示一个“登录中”的提示。如果你的表单验证出错，你应该用红色指示出错误的那一项，并告知错误原因。 有些网站会让那个框闪一闪，甚至直接把输入焦点重定位过去（这在你的表单很长时非常管用）。用ajax载入的东西，默认文本应该设置为“正在载入”，而不是用一个空div。总之就是让用户知道这张网页正在做什么，这样虽然不能减少用户等待时间，但是可以给用户一个心理安慰，告诉它们：我正在忙着处理你的数据。而不要让你的网站表现的像是失去响应一样。

合并css和javascript来保证不用每次载入。一个网站通常都采用的相同的UI，那么你每张网页的CSS可能非常相似，当然也会有一些不同的地方。这个时候你应该合并它们，即使有一些内容在当前页面上用不到。一个网页更应该避免载入多个css。现在的浏览器都可以自动缓存文件，有些服务器也支持发送HTTP 304 Not Modified状态，告诉浏览器使用它缓存中的信息。如果整个网站使用相同的css和javascript文件，那么它们都只需要在主页载入的时候载入一次。在网站中的其他页面间切换的时候，浏览器会在缓存中取出css和javascript而不是重新请求服务器。这样可以节省服务器带宽，也可以让网站载入速度更快。

务必不要忘了支持键盘操作和触摸操作。键盘永远是交互的最重要的接口之一，在你的网站中请不要忘了键盘的使用。最常见的是支持回车提交表单，比如登录的时候，大多数人更习惯输入完账号密码后按回车来登录，可惜的是，网页并不会自动帮你做这件事，你需要自己去处理回车事件。移动互联网发展迅速，你的网页可能大多数人都是在手机上看的。如果你的网页是响应式设计，你很可能需要处理一些触摸事件来让这个页面在手机上更好用。

明确的后退链接。如果你的网页内容比较多，那么用户可能会深陷到一个很深的目录结构里，比如子栏目的子栏目，当他们想回来的时候并不容易。提供一个后退到高级目录的链接（注意不是浏览器的后退链接，因为用户可能从子栏目的一个文章跳到另一个文章。）就可以有效的提高用户体验。如果允许，提供一个面包屑导航栏明显更好。如果你的网站有导航条，那么确保有一个“首页”链接。方便用户在网站各个栏目间跳转可以让用户更舒服。

永远不要相信来自浏览器的任何消息。你的用户可能在表单里乱打。或者胡乱修改你地址栏上的参数。就算是你用javascript检查过了，或者post提交表单，这个世界上仍然有Web-Sniffer等类似的工具可以让用户把信息提交到服务器。所以服务器一定要对用户输入和网址参数再过滤一次。

但是这并不代表你可以不在网页上用javascript验证表单，对表单采用javascript验证可以让用户不必提交就知道自己发生了什么错误，这也是一种良好的用户体验。

网址要好看。网站不同栏目的区分是URL的不同，URL可以区分目录，传递参数。建议编写URL路由来统一目录和参数。举个栗子，这个题目的URL是

http://www.zhihu.com/quesiton/25535246。这个URL就很漂亮。如果这个URL是这样：

http://www.zhihu.com/quesiton.cgi?quesid=25535246。这一种URL就没有上面的好看了。更不用说有些网站的URL是这样的：

http://www.zhihu.com/question.cgi?quesid=25535246&userid=03913583&lastquesid=13931538&jump=Cjdfapfjf3n2rqraeSFA8f2f283ewjjfsfj==。。。。。。在URL上尽量用斜线分隔，让你的参数看起来像目录一样，减少不必要的参数传递，让它们都到session或是cookie里去。网址好看便于用户分享你的链接，用户也更愿意去收藏你的网站。

嗯，我想说的就是这些。

版权许可声明：

CC BY-NC-SA 3.0