一个网站不光仅是一组链接过的页面，而是一种施展，一个空间。在这个空间里，分歧的人、组织会碰见、沟通、交互。这些互动能为接见者供应体验。作为一名网页设计师，我们的工作就是尽或者地使体验感触更好。
个中的要害就在于优先而且始终考虑你的客户。
幸运的是，固然网页设计照样一门较新的学科，但它对人机交互（HCI）的科学研究的匡助很大，而我们这篇文章就将会由9个来自HCI研究的准则，他们都能匡助你在设计网站和法式时，更好地专注于用户。
界面设计偏重于界面功能的结构，用户体验设计则偏重于更大的局势，也就是整个别验，界面设计只是个中的一个子集。
1. 认识客户的需求
最主要的是，我们需要定位用户——表里都需要。这就意味着我们的应用能吸引几多流量，更主要的是，认识个中客户地需求，以及他们在知足需求的道路上所碰到的障碍。
而要做到这种水平的剖析，我们需要更仔细的统计数据，这就需要深入认识网站的用户了。与用户面临面攀谈，旁观他们的使用流程，扣问相关的问题，好比“你对这种设计有什么见解？”，或是其他更深的问题。
用户的需求是什么？是什么在阻碍他们知足本身的需求？而我们的网站将会若何匡助他们解决或是战胜这些阻碍？
万万别梦想你的用户想要什么，你需要实地深入挖掘。究竟，欲望只是需求的产品，若是我们可以知足用户深条理的需求。就能知足他们的一些愿望，以及更多的根基要求。
经由数据剖析以及与用户的沟通，我们可以获得很多问题的谜底，这些问题或者是从若何使用界面，或是界面的重点应该放在哪里。
2. 界说界面的使用方式
在设计界面之前，我们需要想清楚它的使用方式。跟着触屏的普及，视察比想象更能施展感化。
亮点：应用法式的用户体验大多来自轻松和流通的横向触摸。
人们有这么两种方式来使用网站和应用法式：经由与产物进行交互的直接方式，与经由与产物外围进行交互的间接方式。
直接交互的例子:
点击按钮
刷卡
使用指尖进行拖拽
简介交互的例子:
使用鼠标点击
使用键盘号令/快捷键
键入表单输入域
在Wacom上画图
有时交互很简洁。
用户定位以及用户所使用的设备会在很大水平上影响我们的决意。若是是为老年人或是手部受限的人群进行设计，我们就不需要太多的横向滑动。若是是在为经由键盘来与应用法式进行沟通的编程人员或是作家进行设计，那么我们需要支撑所有常见的快捷键体式，以最大限度地削减鼠标使用时间。
3. 设定预期
很多网站或是应用都邑显现如许的情形：单击按钮就进入付款界面、删除网站或是一些不是很好的界面。每一次点击都有究竟，有时还会带来焦虑。
是以，必然要让用户知道若是点击了这个按钮会发生什么。我们能够经由设计或是复制来做到这一点。
经由设计设定预期:
凸起显露所需的按钮
使用商定俗成的符号，如用垃圾桶代表删除、加号代表添加内容，放大镜用来透露搜刮
选择具有相关寄义的颜色，如绿色代表“进步”，红色代表“住手”
经由复制设定预期:
注释清楚按钮的感化
在空白处供应具有导向性和鼓励性质的文字解说
适时发出警告并要求确认
对于弗成逆的行为，如永远删除某些内容，则需要扣问用户是否确定。
在InVision中，单击垃圾桶图标并不会立刻删除，网站会扣问你是否确定，并示知把持不克撤销。
4. 展望或者显现的错误
人都邑犯错，而神明会原谅犯错。——Alexander Pope《论指摘》
人老是会犯错，也老是不得不承担后果。这里有两种方式能够削减错误的影响：
1.防止错误发生
2.亡羊补牢，为时不晚
我们能在好多电子商务网站以及表单设计中看到好多规避错误的方式：在填写完所有空格钱，按钮并不被激活；表单经常会检测到电子邮件地址错误；以及弹出扣问窗口扣问你是否真的想清空购物车。
与亡羊补牢比拟，展望错误从而规避往往没那么沮丧，究竟点击“下一页”或是“提交”时在发现错误的确太忧伤了。
在写防错解说时，我们需要确定解说说清楚了两件事：
1.把问题注释清楚了，例如，“你说你出生在火星，但人类并没有在火星上殖民，所以失足了”。
2.将问题的解决方式注释清楚。例如，“请选择地球上的一个出生地”。
此外，请注重我们还需要一个保留之前的某些状况，好查察之前并没有显现错误的情形。例如，若是我不小心删除了某些主要文件，但实际上能够复原文件，请使用一行文字让我知道有这个功能，就像“您能够转到垃圾桶还原已删除的项目”一般。
展望用户错误的道理称为poka-yoke道理，这是一个..术语，意为“防错”。
5. 反馈敏捷
在实际世界中，情况老是赐与我们反馈，我们说话，别人回应；我们撸猫，猫则会发出咕噜声或是嘶嘶声，当然这取决于它的表情。
数字界面往往不会赐与我们反馈，我们老是不知道是否该从新加载页面、从新启动笔记本电脑，照样将它封闭，从比来可用窗口中删除。
所以我们能够设计一个加载动画。当我们点击它时，让谁人按钮弹出并反弹，当然幅度不要太大。若是我完成了一些事的时候，也能够设计一个虚拟的“击掌”，让我知道我的完成情形。
MailChimp在用户放置或许发送电子邮件是供应反馈和建议
但要确保反馈最够敏捷。Usability.gov将任何冲过1秒钟的延迟界说为休止，跨越10秒根基能够说是受损了。但实际上，只需要三秒钟，就能让美国一样的生齿受到影响。
若是页面只能在5秒摆布加载好，就不需要显露进度条了，因为这会使得加载时间看起来更长了。单能够使用并不明示进步的可视化，例如Mac的“灭亡风车”。若是我们需要在网站上使用进度条，请考虑测验使用一些视觉技能，如许能让加载看起来更快一些。
6. 细心考虑元素的位置和巨细
Fitt定律是人机交互（HCI）的根基道理，它是指：
获取方针的时间是方针距离和巨细的函数。
换一句话说，若是元素越大或是越近，我们就能更快地把光标放在上面。这句话对人机交互和UI设计来说意义深挚，但个中最主要的有三个：
我们需要使得按钮和其他需要点击地元素大到可以轻松地被点击和查察。这对于菜单一类地保持列表来说十分主要，若是空间不足，我总会点进错误的链接。
为更常用的把持制造更大更凸起的按钮。
在屏幕的边缘或是角落防止导航，或许是其他常见的交互元素，例如搜刮栏。或者你会感觉这有违常识，但在边缘就削减了瞄准确性的要求，用户就不消担心点到局限外去了。
在考虑元素的放置位置和巨细时，请始终记得考虑交互体式。若是你的网站是水平滚动而不是垂直滚动的，就需要考虑在何处、若何给用户提醒这一特别的滚动体式。
7. 不要轻忽尺度
作为创意性职业，设计师老是倾向于重塑食物，但这并不老是最好的主意。
为什么？因为熟悉界面的改善会增加我们的“认知负荷”，这使得用户要再次思虑本身的进修过程。我们切实能够随心所欲地从新设计车轮的外形，但这一切都要竖立在实用的根蒂上。
这一轨则正好注释了为什么Google文档的菜单栏几乎与Vista系统之前的Microsoft Word的菜单栏沟通：
Vista系统之前的Microsoft Word
Google 文档菜单栏，2015
这也注释了为什么Pocket为什么要在其Android应用法式中更改归档按钮的位置。
更改按钮位置后的界面更相符Android的设计气势，也使得新用户持续使用Poket的或者性增加了23%。
在2013年的秋天，归档按钮被放置在了屏幕的左上角，右侧是Android设计规范所说的“向上”按钮。Pocket想让人们更存眷阅读体验，而不是简洁地反复一些简洁的把持，但更悛改后的位置会使得新用户以外封闭并归档他们正在阅读的文章，而不是像预期那样顺利地返回到他们地阅读列表中。
这一微小地转变，增加了新用户持续使用Pocket23%的或者。
8. 增加界面的可读性
当谈到可读性时，人们经常会引用哈佛大学心理学家George Miller的论文《神奇的数字7（+-2）——我们信息处理能力的一些限制》，文章提出，人们在短期的记忆中只能有效地处理5-9件事。米勒本人称这是巧合，但这并不阻碍这句话地撒布。
也就是说，简洁的事情更轻易合乎逻辑，在短期内更轻易被记住。是以，我们需要掌握界面中需要记住的事情的数量，以提高界面的可读性。我们能够经由分块来达到这一目的，即将信息分成更轻易消化的小块。
这一设法与Tesler复杂性珍爱定律不约而同，该定律认为UI设计师应该尽或者简化他们设计的界面。这或者意味着尽或者地袒护界面背后应用法式的复杂性。但Microsoft Word是一款没有很好遵守此定律的风行产物。
大多数人只会用Word来打字，但另一些人能够用Word来做各类高级的事。在全球局限内，每小我都使用沟通的用户界面打开沟通版本的Word，这就使得只需要打字的人被好多他们或者永远不会使用的选项所覆没。
从而就有了渐进式公开的概念，个中高级功能被隐藏在了次级菜单中。我们在网站中经常碰到这种情形：介绍产物的文本往往对照短小，然后能够链接到更多具体信息的页面。这也是移动射击的最佳时间，若何构建一个壮大的导航也是我们一向面临着的挑战。
专业提醒：避免在链接和按钮中使用过多的“认识更多”和雷同的非特定文本。为什么？因为这些文本并不克敷陈客户他们会知道更多什么。平日人们只是浏览界面以找到一个保持到他们西昂区的处所的链接，即使反复15次“认识更多”，也并不会使得用户更存眷这里，屏幕阅读器的用户尤其如斯。
9. 使决议变得简洁
如今的网站老是如斯的喧嚣：横幅倏忽进化成了全屏告白，新闻弹出、满是恳求我们订阅但我们却没有机会阅读的博客，视频插页式的告白迫使我们消费贵重的旁观秒数，甚至各类小部件、弹出窗口、对象提醒……
有时候我十分盼望拥有一个平静的收集，Hick轨则也敷陈我，我真的需要一个如许的收集。Hick轨则是说，给用户供应的选择越多，他们就越难做出决意。
这几乎影响了所有我们所构建的内容：
总体结构
导航菜单
价钱页面
博客索引
内容撮要
列表还很长，不外究竟都一般：我们设计得越简洁，用户做出我们进展他们做出的决意就越快越轻易。这恰是好多上岸页面和非实时电子邮件只有一个号召性用语的原因。
专业提醒：有时候，我们又需要用户放慢速度并细心选择。这就是为什么Pinterest、Dribbble和很多博客得平铺设计都运行精巧。究竟，经由抉择，用户更或者选择了一个更适合本身的选项。
10. 以数据为参考对象
尽管我们都进展我们可以以纯粹的艺术价格来对待我们的设计作品，但事实上，借以设计来实现目的同样主要。
尽管借助用户调研，我们能在设计中更好地进行决议，以实现设计地目的，但启用设计后的数据仍具有极大地指导意义。
是以，我们能够为网站设置一个剖析后台，并按期进行剖析。如今有好多分歧的剖析对象，但我建议使用Google Analytics或是Mixpanel，具体就要视项目类型而言了。
Mixpanel专注于事件，是以它会凭据接见者在您的网站上的把持收集数据，而Google Analytics更具有行为性，可为您供应把持时间和流量起原等。固然这两种对象都能够供应这两种形式的数据，但它们的偏重点各不沟通，我们需要选择最适合需求的那一款。
注重：这两种对象都能够在必然数量内免费使用。Webflow和雷同..平日经由简洁的API密钥交流使得剖析设置变得加倍轻易。
Webflow中值得称道的交互设计
很多Webflow的设计师已经使用这些原则来构建直观且惹人饮茶入胜的交互，好比说：
扩展的圈式导航
Waldo brooodryk设计了一个有趣的可移动的，而且对桌面十分友好的动画菜单。在页面加载时，右下角的源泉显露菜单，单击时，它会睁开以显露可用页面和对X的更改，从而许可用户封闭菜单并用心于内容。
这是一个设计简练且迷人的组合，同时十分符合Fitts轨则：在屏幕边缘防止链接是最适用的。当用户不进展在导航中隐含条理构造时，轮回导航会是一个不错的选择。
你会为这位女孩买杯酒吗？
设计师Shane Hurt将这个互动决议放在了一路，以匡助您决意是否为这位女孩购置一杯酒。如许的设计其实包含了好多内容，但能让用户专注于面前的义务：回覆此时的问题，并持续朝着我们想要的决意进步。这也是一种连结简练的方式。
从新设计优衣库
有一天，设计师Tim Noah在优衣库网站上购物时，他发现他们的导航系统十分复杂，他想要重塑这一元素，采用更平板化、对移动端更友好的体式。
我最喜欢的，就是他将优衣库的需要几回点击和页面加载才能遍历完的多层级导航从新设计成了单页体验。平正地说，优衣库在他们的移动端网站上做了同样的事情，但他只是一个移动子域名，并不是桌面网站的响应版本。
需要注重的是，此次从新设计只是一个小我行为，和优衣库无关。
引领活动加快器
2017岁首，设计师Jaro Quastenberg推出了一个真正显现Webflow视觉交互能力的网站——引领活动加快器。
这个网站在前面所提到的亮点上十分凸起。第一，认识客户。引领活动加快器知道他们需要吸引产物制造商的注重力，而他们的网站则会留下第一印象。第二，供应反馈。无论是滚动、悬停照样点击跳转，网站都邑立刻响应接见者的把持，而且照样一些令人惊喜的体式。
从菜单到滚动的交互，这些都是功能优化的很好的例子了。
至此，你已经把握根基常识了
如今就能够去一些网站，看看这些UI设计是否合理~
