下载掌阅APP，畅读海量书库
立即打开
在开始设计网站之前，首先要经过深思熟虑，多参考同行的页面，汲取前人的经验教训，然后在纸上写下来。随着工作经验的积累，设计、架构、软件工程以及可用性方面都会积累很多有益的经验，这些经验可以帮助我们避免犯前人所犯的错误。
创建网站时，可以通过遵守以下8个原则，以获得良好的用户体验。
对于一个刚刚进入网站的用户，为了确保能够找到他们感兴趣的内容，通常需要了解4个方面的内容。
1.明确用户位置
首先通过醒目的标识以及一些细小的设计提示来指示位置。例如Logo图标，提醒访问者正在浏览哪一个网站；也可以通过面包屑轨迹或一个视觉标志，告诉访问者处于站点中的位置。当然简明的页面标题，也是指出浏览者当前浏览什么页面的好方法。
这是“网易”网站中的某个新闻内容页面，在该页面中可以看到给用户提供了非常清晰的指引，首先在页面左上角显示网站Logo，Logo图标的右侧使用红色背景突出显示当前的频道版块名称，然后在新闻标题的上方还使用面包屑路径的方式指示用户当前的位置，给用户明确、清晰的指引。
2.用户要寻找的内容在哪里
在设计网站导航系统时，要问问自己“访问这个网站的人究竟想要得到什么？”，还要进一步考虑“希望访问者可以快速找到哪些内容？”。确认了这些问题并将它们呈现在页面上，会对提升用户体验的满意度有很大帮助。
3.怎样才能得到这些内容
“怎样才能得到？”可以通过巧妙的导航设计来实现。将类似的链接分组放在一起， 并给出清晰的文字标签。通过特殊的设计，例如下画线、加粗或者特效字体使其看起来是可以单击的，以起到好的导航作用。
这是“工商银行”的官方网站，在导航菜单中按照业务类型对导航菜单选项进行分类放置，方便用户的查找。在页面左侧为不同的用户提供了不同的登录入口。再往下是通过图标的方式来分类展示相应的业务种类，这样的选项设置方式都是为了方便用户快速找到自己想要的信息，为用户提供最便捷的信息查找方式。
电商网站中由于商品种类繁多，在这方面设计尤其突出。针对不同水平的用户，在网站中既提供了便于高级用户直接查找特定商品的商品搜索框，也为初级用户提供了非常详细和易操作的商品分类导航，并且在商品详细分类中还对一些热销或活动类商品使用了特殊颜色表现，用户在网站中查找非常方便。
4.用户已经找过哪些地方
这一点通常是通过区分链接的“过去”和“现在”状态来实现的。要显示出被单击过的链接，这种链接被称为“已访问链接”。通常的做法是将访问过的链接设置一种新的颜色，用来保证用户不在同一区域反复寻找。
在“新浪”网站中为文字超链接设置了3种状态：默认状态，新闻标题超链接文字显示为蓝色无下画线的效果；鼠标悬停和点击状态，新闻标题超链接文字显示为橙色有下画线效果；点击后状态，新闻标题超链接显示为灰蓝色无下画线效果。这样用户能够轻松地分辨出哪些信息已经阅读，哪些信息还没有阅读。
专家提示： 之所以点击过后状态与默认状态的超链接文字颜色比较相似，主要是从页面的整体视觉风格来考虑的，如果将点击过后状态的超链接文字设置为一种其他颜色，那么在这种文字链接较多的新闻网站中，就会破坏整个页面的视觉效果。
还有一些网站只使用链接的默认状态和鼠标悬停状态这两种状态，主要是提醒用户该文字是可点击的超链接文字，通常应用于文字链接较少的网站页面中。
技巧点拨： 移动端页面中，超链接文字有时候只有一种状态，也可以称为静态链接。在不同的使用场景会因为当时的情况选择合适的交互体验设计。有的情况下还会加上音效，使用户体验更畅快，这在移动端使用的情况会较多一些。
用户在网页上单击链接、按下按钮或者提交表单时，并不知道将出现什么情况。这就需要设计者为每一个动作设定相应的期望，并清楚地显示这些动作的结果。同时还需要时刻为用户提供反馈，使用户清楚当前正处于所进行操作的什么阶段。
这是“天猫”购物网站中的某商品详情页面，当用户将鼠标移至按钮上方悬停时，会给用户反馈，当单击该按钮后将出现页面提示。这样及时的信息反馈可以很好地满足用户的期望，为用户的下一步操作给出指引。
技巧点拨： 有时候用户必须等待一个过程完成，而这可能会耗费一些时间。为了让用户知道这是由于他们的计算机运行太慢造成的这种等待，可以通过提示信息或动画提醒用户，以避免用户由于等待产生焦虑。
浏览网站的用户数以亿计，每个人的情况都不相同，为了能够为不同的用户尽可能提供良好的用户体验，在设计页面的时候也要充分考虑人体器官：手、眼睛和耳朵的感受。
例如根据大多数人都是右手拿鼠标的习惯，为页面右侧增加一些快速访问的导航。针对眼睛进行设计时，要考虑到全盲、色盲、近视和远视的情况。设计网站时，要确认网站的主体客户是视力极佳的年轻人，还是视力模糊的老年人。然后确定网站中的文字大小。针对耳朵进行设计时，不仅要考虑到聋人，还要考虑到人在嘈杂环境中倾听的情况，保证背景音乐不会让上网的人感到厌烦。
在该企业网站的设计中，因页面内容较多，所以很贴心地在页面地右侧设置了跟随页面滚动的快速导航，用户通过快速导航可以很方便地转到主要内容的位置，并且可以随时返回页面顶部。在页面的设计中遵循了文字内容与背景高对比的配色原则，即使是色彩分辨较弱的人群，依然可以非常清晰地阅读页面中的内容。
一致的标签和设计给人一种专业的感觉。在设计页面时，首先要明确你的网站有哪些约定，想打破这些常规一定要三思而行。同时还要通过事先制定的样式指南约束设计师，从而确保设计风格保持一致。
该网站是一个产品宣传介绍网站，可以看到该网站的不同页面，无论是从页面的布局、配色、表现形式等各方面都保持了一致性，从而使整个网站的视觉风格统一，也便于用户在网站中不同页面之间进行操作。网站中一致的设计和细节表现，能够有效增强用户的浏览体验。
为了避免用户在浏览网页时出现不能处理的错误，而产生悲观情绪，可以在网站页面中设计预防、保护和通知功能。
首先是通过在页面中添加注释，明确地告诉用户选择的条件和要求，避免出现错误，例如用户的注册页面。也可以通过添加暂存功能保护用户的信息，例如电子邮箱的保存草稿功能。当用户在操作时出现错误时，要及时以一种客观的语气明确地告诉用户发生了什么状况，并尽力帮助用户恢复正常，例如未能正确输入用户信息等。
网站中的表单填写提示和错误纠正提示是为用户提供纠错支持应用最为广泛的地方。例如在该用户注册表单页面中，在各表单元素文本框中使用浅灰色文字首先给了用户相应的填写提示（左图），引导用户正确填写表单内容。当用户完成某表单项内容的填写时，系统会自动检测用户所填写的内容是否符合要求。当不符合要求时会马上在该表单元素的右侧使用特殊颜色的图标与文字及时指出用户的错误（右图），并给出所出现的问题，便于用户及时纠正，体现了“处处为用户着想”的思想。
对于互联网上的用户来说，大多数人的记忆是不可靠的，大量的数据如果只通过记忆保存是很难实现的。在设计页面时可以通过计算机擅长的记忆功能帮助用户记忆，例如用户登录后的用户名和搜索过的内容等。将记忆的压力转嫁给计算机，用户对你的网站的体验感受就会更胜一筹。
如果用户需要经常使用某个网站，而每次使用都需要登录操作会非常烦琐，很多网站会为用户登录添加几天内自动登录的功能，这样就是通过系统记住用户的登录状态，避免了用户在短时间内频繁的登录操作，非常实用、方便。
在很多APP应用中，当用户进入到搜索界面时，会自动在搜索框下方列出用户最近的历史搜索记录及推荐的热门搜索关键词，方便用户快速搜索。当用户在搜索文本框中输入内容时，系统会根据用户所输入的内容在搜索文本框下方列出相应的联想关键词，这些细节都大大提升了用户体验。
首先应该正确理解“用户”，“用户”是一个随时间而变化的真实的人，他会不断改变和学习。网站的设计应该有助于用户自我提升，达到一个让他满意的级别，帮助用户上升到自己更觉理想的程度，并不需要用户都成为专家。
例如“淘宝网”针对于不同的用户采用了不同的操作界面，同时又提供了丰富的辅助工具，帮助新用户购物或管理店铺，老用户则可以完善美化店铺，获得更好的销量。
用户在完成某个可能很复杂的任务时，不可避免地需要帮助，但往往又不愿请求帮助。作为设计者，要做的就是在适当的时候以最简练的方式提供适当的帮助。应当把帮助信息放在有明确标注的位置，而不要统统都放到无所不包的Help之下。例如为首次登录网站页面的用户制作一个简单的索引页面，引导用户快速进入网站，找到需要的内容。
这是一个邮箱改版的提示说明，这种方式在网站与APP改版和添加新功能时非常常用。当用户进入到该邮箱时，即给用户明确的提示，用户可以根据指引一步步了解新版的功能与相应的操作，帮助用户快速地了解和熟悉新功能的操作，并且将新功能的操作说明与整个界面相结合，与纯文字的帮助相比更加便于用户理解，很好地提升了用户体验。