工作中常用的10条交互原则

总结最近学习的交互知识，希望可以帮助自己和你们清晰了解交互设计中常用的10条原则，并能运用到实际工作中。

本文案例只是从APP一个小维度中寻找，没有涉及线下，游戏APP，人机交互等大维度的案例，如果你的工作涉及，可以尝试利用这些原则寻找和你工作相关的案例，如果对你有帮助，希望可以在评论区得到你的反馈，thanks~

容错性即用户在使用APP时，如何避免出现错误以及错误后如何被提醒和如何解决。

1.【置灰无效信息】

微信登录页面，在未输入密码前，登录按钮置灰显示，提前告诉用户在没有输入密码时，不可执行登录操作。

2.【慎重决策，操作路径稍变复杂】

菜鸟在删除包裹的时候，会询问用户是否确定要删除，为用户提供二次确认的机会，防止误删。

3.【设置明显的限制】

知乎在输入验证码页面，在操作之前就将验证码位数限定为6位，每输入一位就跳转到下一个输入框，减少用户多输或少输的错误概率。随着技术的迭代，目前已经可以实现在通过读取手机短信的形式直接输入验证码，提高效率，减少错误。

4.【提前展示提示信息】

京东小金库针对理财用户，给出了建议转账金额，目的是为了引导新手用户形成理财认知。引导和提示要明显，确保用户在操作前就能引起注意。

1.【根据操作给出提醒】

大众点评输入评论页面，当开始输入评论时，右下角提示还需要输入几个字就可以发布，给用户的操作进行明确提醒。

2.【适当限制用户的某些交互操作】

京东言良设置界面，给出开关操作，将一些特殊设置收起展示，用户需要是点击开关在在展示出来。适当限制某些操作让用户聚焦当前内容。

1.【错误发生时给出反馈】

淘宝在断网情况下，告知了网络错误状态，并给出了刷新试试的解决方案。在用户操作页面出错后给出反馈。

2.【给出可以撤销的方式】

微信聊天中，给用户的话增加了撤回功能，允许用户犯错，并给出能够撤销的指令。

遵循一致性原则，减少用户认知和记忆负担，提高产品易用性。同时也减少了用户在使用过程中产生的困惑，提高了用户使用产品的愉悦感和流畅感。一致性原则在设计中包含视觉一致性、行为一致性和感知一致性3个方面。

【淘宝】

淘宝首页商品图墙和搜索商品图墙和店铺宝贝页商品图墙，都采用了相同的布局结构，字体颜色，在不同页面也能快速了解商品信息，减少用户认知和记忆负担，提高产品易用性。同时也减少了用户在使用过程中产生的困惑，提高了用户使用产品的愉悦感和流畅感。

【大众点评】

在店铺详情，电影详情，内容详情页面分别点击分享按钮都弹窗相同的分享控件。操作一致性也可以说是交互动作一致性，就是指用户在操作相同的功能时，他们的操作方式应该是一致的，如点击打开、左滑删除、长按显示更多操作、截图出现自动分享等在各个页面表现一致。

【哔哩哔哩】

手机端和PC端保持了相同的视觉调性，风格，操作方式，一件三连的操作，课程选择的列表，以及相同内容的推荐，在不同端的视觉调性，信息内容保持一致，降低用户学习成本。

【植物保姆】

整个APP在文案用词语气上都洋溢着满满的活力和亲和的感觉。语句的结尾都用了“喔”这样俏皮的语气词和感叹号结尾。所有的文案里都避免使用专业术语类的词汇，帮助用户更好的理解信息含义，也使得产品整体风格统一。

意符一词，是唐纳德·A·诺曼在《设计心理学》中提出的概念，他指出，“意符”这个词指的是能告诉人们正确操作方式的任何可感知的标记或声音。在APP中狭义的正确的意符，是指ICON和文案是符合正确含义的表达，可以让用户对产品使用理解上事半功倍。icon精准设计，一眼就能大概知道含义。文案引导要清晰准确，符合功能特点。

饿了吗首页，大众点评我的页面都使用符合用户常识认知的图标，表达文字匹配的信息，并且契合度很高，不用看文案也可以大致猜出ICON所表达的含义，ICON设计简明扼要，更容易辨识，用户也更容易上手使用。

使用简明扼要的语言，清晰准确的表达出信息，帮助用户快速了解，并作出判断。文案使用避免复杂啰嗦和专业术语的使用。

【哔哩哔哩】整个APP在文案用词语气上都洋溢着二次元的感觉。无论弱网情况下时的玩命加载数据，发送弹幕时的见证当下还是个性签名里这家伙很懒，所有的文案里都避免使用专业术语类的词汇，语气用词也符合产品个性，拉进与用户的距离，增加用户对产品的好感。但在勋章墙页面的文案使用上，应避免使用“您”，产品应营造和用户平等的感觉。

 微博在我的页面有两个模块，分别是【我的经常访问】和【为你推荐】，文案在使用中要尽可能的统一人称，理清产品是在对话用户，还是把用户带入产品。

对于规则说明，帮助说明这类有大量信息的文字出现时，采用小标题拆分的方式，将信息内容拆解为小段，提高内容易读性。

从而帮助用户快速理解信息含义，提高决策效率。

反馈还可以用来帮助用户操作，实时反馈能直接告知用户当前状态正确与否，而不是等到用户提交的时候再告知哪里有错误导致操作失败。

用户发起的所有操作都应该伴随有一个反馈，避免用户因对系统状态的未知产生迷惑。同时反馈的操作中融入情感化的表达，突出产品个性。

【网易音乐】

网易音乐监测到用户截图的动作，给出分享截屏的弹窗，缩短用户分享路径给用户及时反馈，让用户快速完成分享，提升用户使用体验。

【抖音搜索】

抖音搜索，在输入框里根据输入的信息匹配出联想的关键词，不用等全部写完就及时给出结果。

【微博】

微博详情页点赞按钮长按弹出彩虹🌈和表情。增加了互动的趣味性，提高用户是用产品的惊喜感。

每个产品都是有边界的，当用户的操作超出产品边界时，需要提示用户。比如：上滑露出刷新，给出重新加载的动画；滑动列表到底部，需要提示用户已经没有更多内容了；购买票务超出了票务的使用时间；输入密码时用户输入了一个特殊字符，需要提示用户密码所能包含的字符类型有哪些。

【哔哩哔哩】

在下拉刷新操作时，小电视跳动动画刷新完成，融入品牌形象，可以很好的把品牌传递给用户；把产品的特性通过场景化的方式运用到下拉刷新给用户趣味性让用户对品牌产生更好的印象，提升使用率。

【淘宝】

弱网情况下，通过先加载部分商品，减少用户心理等待时间，再通过温和的语言引导用户尝试刷新，提升用户使用体验。分布加载方式可以通过先加载部分数据，在整个过程中内容一点点展示的过程给用户及时反馈，让用户忽视加载过程，提升用户使用体验。

【猫眼】

购票付钱的时间错过了电影开场时间，再次提交购买按钮时，给出预定失败的弹窗，告知用户错过该场次，并给出建议选择其他场次。

产品的正常使用，依赖于服务器正常、网络正常、设备正常等外部条件，如果因设备未连接网络而不能发信息，应该及时提醒用户当前网络状态不佳。这时候需要注意的是，在给出无法完成任务的反馈前，应该先进行多次尝试，比如，尝试多次连接网络。

【马蜂窝】

网络遇到故障时，加载页面提示‘服务器开小差’，并给出重新加载按钮，告知用户系统外部出现了问题。当网络信号差时，通过预先加载本地缓存信息，减少用户心里等待时间。

【微信】

发送消息遇到断网情况，显示转圈的loading，并在重新连接网络之后，及时将消息发出，采用不打扰的方式反馈给用户，并能通过产品功能主动帮助用户完成任务，解决问题。

未完待续~