网页交互设计原则

一致性是产品设计过程中的一个基础原则，它要求在一个(或一类)产品内部，在相同或相似的功能、场景上，应尽量使用表现、操作、感受等相一致的设计。下面介绍网页交互设计原则，希望对您有帮助。

1. 遵循用户的心理模式

用户在使用你产品时，是基于用户的心里和本能意识去操作界面。简单来说，当他遇到一个按钮时，他会想到这个按钮将会触发什么样的动作来满足他的需求。如果这个按钮不是用户预期想的操作模式，那么这个按钮设计就是有问题的。比如说，你每天都会去逛朋友圈，看看好友的动态，当有一天微信把朋友圈关闭了，用户每天的预期行为受到了限制，这样的操作就不符合“人性化”。

2. 符合用户的使用需求

设计一个产品，最基础的原则就是要符合用户的使用需求。确定需求是一个产品经理的基本工作内容，有很多方法和工具可以帮助我们找到用户的需求。例如观察用户行为、分析数据、构建用户场景等等。从产品策划角度，我会把一个产品的体验分为3个层级，分别是能用、可用、易用。

3. 一致性原则

一致性是产品设计过程中的一个基础原则，它要求在一个(或一类)产品内部，在相同或相似的功能、场景上，应尽量使用表现、操作、感受等相一致的设计。一致性的目的是降低用户的学习成本，降低认知的门槛，降低误操作的概率。

4. Less is More

它最初由建筑大师Ludwig Mies van der Rohe提出，是一种提倡简单，反对过度装饰的设计理念。这个原则历史悠久，在很多行业中衍生出了很多不同的解释。在互联网行业，类似“简约的设计风格”、“做减法”、“把不必要的内容收起来”、“7加减2原则”等等说法，都或多或少与这个原则有关。

Less最初的意思是反对“过度装饰”，并不是一味的追求所谓的“简单”。我所理解的Less，是我们要努力降低用户的认知和操作成本，这才是在互联网行业Less的本质。

5. 使用用户的语言与之沟通

产品的最终使用权是在用户，用户不是设计师也不是开发者，他们大多数不懂设计理念和开发过程，对于产品的使用语言和文字要绝对靠向普通用户思维。但不要把用户当成不聪明的人，适当的为中层用户做优化。

6. 设计目的性大于美观性

用户界面设计往往是UI设计师们发挥的最佳领域，美观的产品带来的不仅仅是视觉的冲击感受更是产品的升级迭代。但要注意的是，产品设计的目的性一定要大于美观性，不可因为产品的美观失去最基本的操作模式。大多数情况下，还是要基于标准的普通操作。

7. Don't make me think

这一原则可谓是贯穿于整个用户体验设计。我的理解就是用最简洁的方式和最短的时间，帮助用户完成目标就是好的用户体验。

8. 直觉化

正确的操作部位必须显而易见，而且还要向用户传达出正确的信息，并且这些操作模式不需要学习，仅仅凭生活经验和本能就能操作。

9. 允许犯错原则

允许用户在操作过程中犯错。这很大可能是设计上的问题而不是用户操作的问题。在用户犯错的时候，提供有效的信息引导他去正确的操作。要避免容易发生错误的情况，或者检查并在实际动作前确认选项提示用户。

10. 信息反馈原则

人与机器之间的“交流”，本质上都是信息的传递过程。信息有去有回，才能连贯，才会形成有效的交互与彼此的理解。所以及时有效的反馈和解释尤为重要。

在几乎所有需要人机交互的界面上，当用户进行了某些操作，系统都需要使用变色、形状改变、振动、发光等方式来给用户即时的反馈，目的是告知用户，你刚才的操作我已经知道了。例如下图的iOS 11的控制中心的设计会高亮用户点击的图标并且使用不同颜色，未被点击到的图标则会显示灰色，用户能一眼就了解到自己的操作得到了反馈。

1、交互设计的目的是为了优化用户体验

网站建设本身就是一项重视用户体验的工程：完整的网站地图和面包屑导航、相关的推荐和搜索框等，每一个都是为了能够拉近与用户之间的距离。一个好的交互效果能够很大程度的提升用户在浏览网站时的体验，不仅有利用户了解网站，更有利于留住用户。

2、网站功能性的视觉元素

推己及人，想想我们在访问和浏览网站的时候，都是直观的从网站上获取信息，这时的视觉、重点展现就显得尤为重要。而同等情况对于用户也是一样，要吸引用户，就应该在网站产品特色的视觉元素上一定要明显一点。

3、交互设计上的扁平化设计

扁平化的网站设计一直以来都是网站建设制作中最好的网站交互方式，而其最重要的理念就是简洁、直接!可以让用户在每一个页面以最短的时间和最快的效率找到自己想要的内容。

4、可用性方面的交互设计

相比于网站交互的趣味性设计，网站的实用性设计显得更加重要。实用性设计给用户提供更多产品相关的优质内容和工具，这也是为什么能够更吸引用户的原因，当然，不仅如此，实用性网站还能够更好的提升用户留存和转化效果。

5、交互之外，响应速度更重要

在网站交互设计中，响应时间最为用户体验最重要的因素之一，在设计时在炫酷的交互效果之外一定要考虑到网站的响应速度!如果效果很精彩、很炫，但响应速度很慢，那么一定要以速度为准。因为网站响应速度就好像人与人交流一样，如果半天没有作出回应和反响，自然留不住用户。

用户体验就是商机，每一个来访者每访问网站一次就是在使用和体验企业产品或是服务。汕头网站建设在网站设计上采用了整站页面静态化设计，大大提升了网站的打开速度，网站的打开速度直接影响到访客的跳出率，自然也就降低了网站的咨询转化率。

交互原型设计的简单定义是：用户和产品之间的一种互动关系。在用户体验设计的大背景下，交互设计在塑造用户体验方面发挥着至关重要的作用。特别是在开发复杂应用程序时，交互设计的原则显得尤为重要，一些关键信息不容小觑。在本文中，我将分享交互原型设计的六个关键性原则，以帮助你Get到出色的用户体验。

以用户为中心

以人为中心的设计可以帮助你创建出更完美的用户体验。以用户为中心原则，顾名思义就是要从用户的真实需求出发，充分考虑用户的需求，匹配用户的期望值，为用户提供他们完成各项工作所需的内容，以用户熟悉的方式来构建信息和功能。

交互设计本身是需要与用户之间建立联系和沟通的一种方式，所以设计师们必须做好设计前期的用户调研分析以及后期的用户反馈体验。

极简主义

简约却不简单。在交互设计中，信息获取和传达必须是清楚易懂的，这样用户才能够有效的获取这些信息，并迅速作出反应。用户更重视功能的可用性，并不是功能越复杂越受欢迎。如果你传达的信息过于复杂，用户将承担大量的信息累赘，造成信息过载，影响操作效率，并不能真正的帮助他们解决实际问题，从而增加用户的离开率。

给予用户及时的反馈

反馈是交互原型设计的关键，良好的交互设计总是需要某种反馈，并且应该是迅速，有意义且可感知的，反馈意见帮助用户了解操作结果。例如，当用户点击按钮时，此项操作可能会提示用户他正在做什么以及将会发生什么。设计师可以提供多种反馈方式，例如当鼠标悬停在导航项上时，改变颜色或加载子菜单;在播放视频的时候，点击播放按钮变成暂停或者当我们点击搜索栏时，用闪烁的光标提示用户可以输入。进度条和动画也是常见的反馈机制。

减少认知负荷

托尼·法德尔曾经说过：作为人类，我们的大脑能力有限。所以我们的大脑把日常生活中的习性转化为习惯的事情，这样我们就可以腾出空间去学习新事物。作为设计师，开发人员，我们的工作就是让这种学习和记忆成为可能。我们如何做到这一点?通过使我们的界面直观。为了保持交互的直观性，只需要显示用户需要的有意义且重要的信息。这样，他们没有太多的信息需要处理，用户体验会变得更加流畅。

进行迭代设计

没有人第一次便可成功设计出一款完美的App，就算一些经验丰富的交互设计师也会出现无数次返工的情况。因此，想要创建良好的交互原型，我们需要做好用户分析调研，不断从用户那里获得反馈信息，并对产品进行迭代和重新改造，让你的交互更贴近于你的用户。

选择一款快速和高效的交互原型设计工具

这对于设计师来说至关重要。理想的原型工具是可帮助设计师快速的创建交互原型，并且易于后期的修改，从而节省了大量的工作时间。

经常有一些设计师跟博主反应像Axure，Principle，Origami，Framer类似的工具学起来太难，要不就是需要各种代码参与，学习成本太高。但是呢博主建议大家最好是使用像Mockplus这样简单，快速，高效的交互原型工具，而不是选择一个复杂的，效率低下的编程工具。博主亲测，Mockplus这款交互原型设计工具创建交互来十分简单，不信我们就来瞧瞧吧~

一键拖拽即可完成交互，是不是很简单呢。别急，Mockplus还为大家准备了一份特大惊喜!想知道以下Mockplus原型设计大赛冠军作品中的交互动效是如何做出来的吗?是不是很心动呢?其实不难，马上教你做出高大上的交互动效!

原型本质上是最终产品不完善和粗略的版本，原型不完美也没有必要完美，本意也不需要完美。事实上粗略的原型往往能获得更好的反馈，如果原型未完成，测试者更容易给出反馈。然而在很多情况下，需要更精细的原型，比如商业展会上，粗略的原型就没有什么用。草图或者黑白原型版本无法描绘最终的版本，因此这里要用常识判断原型需要达到什么样的精细程度。大多数情况下，足够好就够了，花最少的时间和精力向受众传达最好的想法、核心概念。

原型有很多优点，其中之一就是投入效益比较低。两种开发模式，一种是传统的瀑布法，另一种是快速的原型设计。传统的瀑布法要先规划好系统的特征和功能，然后才开始开发，通常需要6到9个月的规划周期，之后才能实际的开发系统。而原型开发投入很少，显然减少投入可以减少风险。如果尽早做原型，经常做原型，风险就会降低，还会减少很多烦恼，节省时间、精力和费用。

一、内容优先

对于手机而言，屏幕空间资源显得非常珍贵，为了提升屏幕空间的利用率，界面的布局应该以内容为核心，而提供符合用户心里预期的内容是移动应用获得成功的关键。那么在设计组织内容时，要注意一下几点：
从产品设计开始，就不能抱有将pc上的一切功能都往移动端搬得思想。敢于删除不必要的内容，只抓重点，是对移动设计师德基本要求。

做到内容优先。在浏览内容的过程中，适时的隐藏一些干扰功能，让内容最大化。多采用手势操作，也能极好的隐藏一些操作元素。

二、为触摸而生

在触屏设备上，基于手指的手势操作已经代替了鼠标的点击操作。手势操作灵活多变，交互自然，但也带来识别性差，操作精度不高等缺点。

1、以信息架构为基础，建立手势交互规范

2、优先设计自然的手势交互，而不只是点击

3、引导用户在情境中学习手势操作

4、可出区域必须大于7*7mm，尽量大于9*9mm。在触摸操作设计时，我们已经知道，在界面中的可触物理区域不应该小于7*9mm，为了让用户能在各种情境中都容易操作，建议可触区域不应小于9mm，但是可触区域不同于屏幕中直接呈现的物理大小，为了视觉及审美的需要，有时设计时会把屏幕元素设计得较小。

三、转换输入方式

文字输入是移动端得软肋之一，不论手写输入还是键盘输入，操作效率都相对较低，在行走或单手操作时，输入的出错率也较高。那么在应用设计时要注意尽量避免文字输入，或者使用一些代替方案来提升输入效率。

1、减少文本输入，保留之前输入的内容。如在文本框中输入内容，要做到意外退出后能在返回，依然可以看到之前输入的内容。也可以通过关键字联想，如在搜索时输入一个字，可以通过联想匹配让用户尽快找到目标，而无需输入全部文字。

2、转化输入方式，可以通过将常用的输入框转化为选择控件，或其他自定义控件(如日期、地址、城市等可转化为选择项的)。

3、使用手机已有的传感器输入，如语音、扫描识别(二维码、条形码、文字、图片等)。

四、明确的反馈

屏幕小、硬件性能差、网络不稳定等等，移动产品需要面对各种情景，所以有效、清晰、及时的反馈起着重要作用。它能让用户知道自己的行为正在被后台程序响应和处理。

1、为用户的行为操作提供提供及时的反馈。如点击列表后背景会变灰色，这样在网络缓慢或性能较差的设备上，用户能快速察觉到已经点击成功，从而避免多次点击。

2、提供有价值的状态提示反馈。避免使用模态窗口，打断用户的当前任务。早期的app对模态框的滥用，让用户很容易忽视框中的内容。可以考虑toast、状态栏、导航栏等反馈方式，也可以考虑结合声音、震动、闪光灯等组合方式，让反馈信息更有效。

五、为中断而设计

考虑到移动应用使用情景复杂而不稳定，在移动场景中被打断是很平常的事情，所以确保在各个产出中断的情境下，让用户恢复之前的操作，保持用户的劳动付出。

1、保存用户的操作，减少重复劳动

网络终端状态：在移动应用上行服务数据时，都需要考虑网络状态出现异常的状况。例如新浪微博客户端，当博文发送不成功时会暂存到草稿箱中;iphone发送消息不成功，也会保存内容，标记为发送失败，允许用户重新发送。

编辑中断：在编辑内容的界面中，要考虑在各种中断事件后，保存已编辑的内容，减少用户的重复操作。

2、衔接记忆而不是重头开始

当用户在阅读是被打断，基于内容可分为两种不同的情况，一是书籍类的阅读，用户再次进入界面后，衔接上一次正在阅读的页面而不是书本的首页;另一种是新闻阅读类的阅读，需要根据时间间隔来判断，超过一天时间没有阅读，再次进入后，可以让用户选择是否继续阅读或返回首页最新内容，若时间间隔很短，则直接返回之前的页面内容继续阅读。

六、为用户的误操作而设计

1、在设计产品时，通过页面的设计、重组或特别安排，尽量的防治用户出错，因为比出现错误信息提示更好的是更用心的设计防治这类问题的发生。

2、优逸客表示为了避免用户的误用和误击，应该为用户提供撤销和重做的功能。

3、当用户操作有误需要错误信息提醒时，错误信息应该用语言表达，要较准确地反应问题所在，并且为用户提出一个建设性的解决方案。

七、一致性

一致性是设计的基本原则，它可以让产品更加的易用，降低用户的认知成本，从而带来整体体验的提升。

1、设计上的一致性：基本结构布局、模块化内容、文案、交互行为和视觉风格等方面的设计要遵循一致性的要求

2、于平台环境一致：例如ios屏幕左上角的返回设置，除非产品的特殊设计需要，否则尽量不改变这样的设计，保持与平台的一致性，避免用户在使用上的不习惯。

3、跨平台的一致性：移动产品往往是多平台布局，包括ios、android和web app，内容设计上的处理要追求一致性。