网站不仅仅是通过链接连接的一组页面。它是一个界面，一个空间，不同的事物（在这种情况下，一个人和一个公司或个人的Web形象）会面，交流并相互影响。这种互动为访问者创造了一种体验，作为一名网页设计师，确保体验尽可能好是您的工作。
关键是首先，始终和永远考虑您的用户。
值得庆幸的是，虽然网页设计是一门相对较新的学科，但它很大程度上归功于人机交互（HCI）的科学研究。这些直接来自HCI研究的9条实用指南将帮助您在设计网站和应用程序时专注于用户。
界面设计着重于界面功能的布局，是用户体验设计的子集，用户体验设计着眼于更大的图景：即整个体验，而不仅仅是界面。
1.了解您的用户
最重要的是，您必须了解内部和外部用户的身份。是的，这意味着知道您的分析应用程序可以提取的所有人口统计数据。但更重要的是，这意味着知道他们的需求，以及阻碍他们实现目标的方式。
要达到同等水平，不仅需要仔细分析统计数据。它需要了解使用您网站的人。这意味着与他们面对面交谈，看着他们使用您的产品（可能还有其他产品），并向他们提出比“您如何看待这种设计？”更深入的问题。
他们的目标是什么？他们实现这些目标的方式是什么？网站如何帮助他们克服或应对这些挑战？
不要停止了解您的用户想要什么。深入挖掘并找出他们的需求。毕竟，欲望只是需求的产物。如果您可以解决用户的根深蒂固的需求，那么您将在满足他们最基本需求的同时满足他们的需求。
您将从分析数据和与用户交谈中发现的见解将指导您做出的每个决定，从人们如何使用您的界面到您将在该界面中突出显示的内容类型。
2.定义人们如何使用您的界面
在设计界面之前，您需要定义人们将如何使用它。随着基于触摸的设备的普及，这是您可能想不到的更为关键的问题。看看
火种：该应用程序的用户体验实际上是由简单的滑动即可实现的。
人们以两种方式使用网站和应用程序：直接（通过与产品的界面元素进行交互）和间接（通过与产品外部的ui元素进行交互）。
直接互动的例子
轻按一个按钮
刷卡
用指尖拖放项目
间接互动的例子
用鼠标指向和单击
使用按键命令/快捷方式
输入表单字段
在Wacom平板电脑上绘图
有时，交互太简单了。
您的用户是谁，以及他们使用什么设备应在这里深刻地影响您的决定。如果您是为老年人或其他手脚灵活性有限的人设计的，那么您就不想依靠刷卡了。如果您是为主要通过键盘与应用程序交互的作家或编码人员设计的，则需要支持所有常见的键盘快捷键，以最大程度地减少使用鼠标的时间。
3.设定期望
与网站或应用程序的许多交互都会产生后果：单击按钮可能意味着花钱，删除网站或对奶奶的生日蛋糕发表贬低的评论。每当有后果时，都会有焦虑。
因此，请务必让用户知道在单击该按钮之后将要发生的情况。您可以通过设计和/或复制来做到这一点。
通过设计设定期望
突出显示与所需操作对应的按钮
与复制结合使用广泛使用的符号（例如用于删除按钮的垃圾桶，用于添加内容的加号或用于搜索的放大镜）
选择具有相关含义的颜色（绿色表示“开始”按钮，红色表示“停止”）
用副本设定期望
编写清除按钮副本
在空状态下提供定向/鼓励性副本
发出警告并要求确认
对于具有不可逆转后果的操作，例如永久删除某些内容，最好问人们是否确定。
在InVision中，单击垃圾桶图标不会立即删除屏幕。相反，它询问您是否确定，并告知您无法撤消。
4.预期错误
>犯错是人的；原谅，神圣。
亚历山大·波普（Alexander Pope），《批评论文》
人们会犯错误，但他们（永远）不必承担后果。有两种方法可以减少人为错误的影响：
防止错误发生
提供在它们发生后修复它们的方法
您会在电子商务和表单设计中看到很多防止错误的技术。在填写所有字段之前，按钮将保持不活动状态。表单检测到电子邮件地址输入不正确。弹出式窗口会询问您是否真的要放弃购物车（是的，我愿意，亚马逊-不管它有多可悲，它都会吓到你）。
预期错误通常比尝试在发生故障后予以纠正的沮丧程度要小。这是因为它们发生在可以单击“下一步”或“提交”按钮所带来的令人满意的完成感之前。
也就是说，有时您只需要让事故发生即可。那是真正的详细错误消息出现的时候。
在编写错误消息时，请确保它们执行以下两项操作：
解释问题。例如，“您说您是在火星上出生的，人类还没有殖民过。然而。”
说明如何解决。例如，“请在地球上进入出生地。”
请注意，对于非错误情况，您可以从同一本书中摘录。例如，如果我删除了某些内容，但可以还原它，请告知我，带有一行复制内容，例如“您始终可以通过移至回收站并单击还原来还原已删除的项目。”
预期用户错误的原理称为poka-yoke原理。Poka-yoke是日语术语，翻译为“防错”。
5.快速提供反馈
在现实世界中，环境为我们提供了反馈。我们说话，而其他人则回应（通常）。我们抓挠猫，猫会发出嘶嘶声或嘶嘶声（取决于猫的喜怒无常以及猫抓挠时的吸吮程度）。
数字接口常常无法提供太多回报，这使我们想知道是否应该重新加载页面，重新启动笔记本电脑，还是只是将其弹出最近的可用窗口。
所以给我加载动画。当我点击该按钮时，使其弹出并弹回，但不要过多。当我做某事时，给我一个虚拟的高五，我同意这太棒了。（感谢MailChimp。）
计划或发送电子邮件时，MailChimp会提供反馈和鼓励。
只要确保一切都快速进行即可。Usability.gov将超过1秒的任何延迟定义为中断。超过10秒钟，中断。而且后者很慷慨：对于大约一半的美国人口来说，三秒钟足以引起反弹。
如果页面将在5秒钟内加载，请不要显示进度条，因为它实际上会使加载时间看起来更长。而是使用不暗示进度的可视化效果，例如Mac臭名昭著的“死亡风车”。但这不是。如果确实在网站上使用进度条，请考虑尝试一些视觉技巧以使加载看起来更快。
6.仔细考虑元素的放置和大小
菲茨定律是人机交互（HCI）的基本原理，它指出：
获取目标的时间取决于目标的距离和大小。
换句话说：物体越近和/或越大，将光标（或手指）放在上面的速度就越快。显然，这对交互和用户界面设计技术具有各种含义，但是最重要的三个是：
将按钮和其他“点击目标”（如图标和文本链接）设置得足够大，以方便查看和点击。这对于排版，菜单和其他链接列表尤为重要，因为空间不足将使人们一次又一次地点击错误的链接。
将最常见操作的按钮放大并突出显示。
将导航（以及其他常见的交互式视觉元素，如搜索栏）放在屏幕的边缘或角落。最后一个看上去似乎违反直觉，但它之所以有效，是因为它减少了对准确性的需求：用户无需担心过高的点击目标。
在考虑元素放置和大小时，请始终牢记交互模型。如果您的网站需要水平滚动而不是垂直滚动，则需要考虑在何处以及如何将这种异常的交互类型提示用户。
7.不要忽视标准
作为具有高度创造力的类型，设计师倾向于喜欢重塑事物，但这并不总是最好的主意。
为什么？因为熟悉的交互或界面的改进版本增加了“认知负担”：它使人们重新考虑他们已经学习的过程。显然，您可以重新发明所有想要的轮子，但前提是要切实改进设计。
此经验法则解释了为什么Google文档的菜单栏几乎具有与Vista之前的Microsoft Word相同的所有选项：
在Vista之前的Microsoft Word菜单栏。
2015年Google文档菜单栏
这也解释了为什么几年前Pocket必须更改其Android应用程序中存档按钮的位置。
更改单个按钮使其与Android的设计模式更加一致，使新用户继续使用Pocket的可能性增加了23％。
截止到2013年秋季，存档按钮位于屏幕的左上角，即Android设计规范所说的“向上”按钮应位于的右上角。Pocket希望人们将注意力集中在阅读体验上，而不是复制现有的硬件控制，但是这种不一致的位置导致新用户不小心关闭并存档了他们正在阅读的文章，而不是简单地按预期返回他们的阅读列表。
这一微小的变化“使[新用户]从现在起继续使用Pocket的可能性增加了23％”。
8.使您的界面易于学习
在简单性方面，人们经常引用哈佛心理学家乔治·米勒（George Miller）发表的一篇论文，标题为“神奇的数字7，正负2：对我们处理信息能力的限制”。这篇文章建议人们在短期记忆中只能拥有5到9种东西，而没有任何可靠性。米勒本人称这是一个巧合，但这似乎并没有阻止任何人引用他。
就是说，逻辑越简单，在短期内记住起来就越容易。因此，只要有可能，就限制一个人有效使用界面需要记住的事物数量。您可以通过对信息进行分块来简化此过程，即将其分成可消化的小块。
这个想法与Tesler的“复杂性守恒定律”相吻合，该定律指出UI设计人员应使其界面尽可能简单。这可能意味着在可能的情况下掩盖简化界面后的应用程序的复杂性。Microsoft Word是产品不遵守该法律的流行示例。
大多数人在Word中只做一些事情（例如键入），而其他人则可以使用它来做各种功能强大的事情。但是在世界各地，每个人都使用相同的UI打开相同版本的Word，而普通的Joe（不是超级用户）会被他们可能永远不会使用的各种选项所淹没。
这导致了一个称为渐进公开的概念，其中高级功能隐藏在辅助接口上。您经常会在网站的首页上看到此信息，其中短篇幅的副本介绍了产品或功能，然后链接到用户可以了解更多信息的页面。（这也是移动设计的最佳实践，在该设计中，强大的导航始终是一个挑战。）
专家提示：避免在链接和按钮中使用“了解更多”以及类似的非特定文本。为什么？因为它不会告诉用户他们将“了解更多”的知识。通常，人们只是浏览页面以寻找将他们带到想要去的链接，而“学习更多”（重复15次）无济于事。对于屏幕阅读器的用户来说尤其如此。
9.简化决策
太多的网络尖叫着我们：“横幅广告”突然扩展为全屏广告。模式弹出，迫使我们订阅我们还没有机会阅读的博客。视频插页式广告将我们挡在了轨道上，迫使我们观看宝贵的秒数。甚至不要让我开始使用小部件，弹出按钮，工具提示...
有时候，我渴望一个平静的网络-希克斯定律给了我们所有人建立一个网络的理由。这个想法就像最终结果一样简单：向用户展示的用户界面选项越多，他们做出决定的难度就越大。
这几乎影响了我们构建的所有内容：
整体布局
导航菜单
定价页面
博客索引
内容提要
清单继续。但是结果是：我们进行的设计越简单，用户做出我们希望他们做出的决定的速度就越容易。这就是为什么登陆页面和非新闻邮件仅应号召采取行动的原因。
专家提示：有时，您实际上确实希望用户放慢速度并考虑他们的选择。这就是Pinterest，Dribbble和许多博客的平铺设计实际上运行良好的原因。毕竟，您必须决定的选项越多，找到适合您的选项的可能性就越大。
10.聆听数据
尽管我们都希望我们的设计纯粹是根据其艺术价值进行评估，但现实是，优化设计以实现其目标同样重要。
尽管我们都希望我们的设计纯粹是根据其艺术价值进行评估，但现实是，优化设计以实现其目标同样重要。
尽管用户研究和测试在指导设计决策实现站点目标方面非常有用，但是启动后收集的数据仍然非常宝贵。
因此，请为您的网站设置分析并定期进行分析。有很多不同的分析工具，但我建议根据项目类型使用Google Analytics（分析）和/或Mixpanel。
Mixpanel专注于事件，因此它根据访问者在您的网站上执行的操作来收集数据，而Google Analytics（分析）则更具行为性，为您提供会话时间，访问量来源等。虽然这两种工具都可以提供两种形式的数据，但它们的确在闪耀他们的重点领域，因此请选择最适合您的需求。
注意：这两个工具最多可免费使用一定数量的数据点。Webflow和类似平台通常通过简单的API密钥交换使分析设置变得容易。
Webflow网站中出色的交互设计
许多使用Webflow的设计师已应用这些准则来构建直观且引人入胜的交互。这里有几个例子。
展开圆圈导航
Waldo Broodryk创建了一个有趣的移动和桌面友好动画菜单。在页面加载时，右下方的圆圈显示为“菜单”。单击时，它会展开以显示可用的页面并更改为X，从而允许用户关闭菜单并重新关注内容。
这是一个清晰而引人入胜的设计的绝佳组合，并且密切关注Fitts定律：最容易将链接定位到屏幕边缘。当您不想在导航中隐含层次结构时，循环导航是一个有趣的选择。
你给那个女孩喝一杯吗？
设计师Shane Hurt汇集了这个令人惊叹的交互式决策树，可帮助您决定是否向该女孩购买饮料。该设计包含大量内容，但让您专注于手头的任务：回答当前问题，然后继续进行决策。Shane是保持界面简单的方法。
优衣库重新设计
uniqlo替代主页
一天，设计师Tim Noah在Uniqlo网站上购物时，他意识到他们的导航系统多么复杂和独特。受此启发，他决定“ 以更加平板电脑和移动设备友好的方式重新创建它。”
我最喜欢的事情是他如何将Uniqlo的多级导航转换为单页体验，该导航需要几次单击和页面加载才能遍历该品牌的实际桌面网站。（公平地说，优衣库在其移动网站上做同样的事情，但这是一个移动子域，而不是其桌面网站的响应版本。）
注意：此重新设计仅是个人项目，绝不与优衣库相关。
领先运动加速器
开始领导
2017年初，设计师Jaro Quastenberg开设了一个网站，该网站真正展示了Webflow中视觉交互的力量：Lead Sport Accelerator。
该站点确实具有上述两个技巧。第一：了解您的用户。Lead Sports Accelerator知道他们正在努力吸引产品制造商，为此，他们必须通过其网站给人留下深刻的第一印象。第二是提供反馈。无论您是滚动，悬停还是单击页面上的元素，它都会立即以生动有趣的方式响应访问者的动作。
从菜单到滚动交互–这是关于某些人认为是艺术作品的优化功能的一个很好的例子。
好的，您已经掌握了基础知识
现在继续制作一些华丽的可用界面。并且随时可以分享您在评论中在全球范围内看到的最佳和最差的UI设计示例。
