在实际项目中设计交互行为方式的时候,我们该怎么去运用的这些交互设计原则呢?

通常我们在设计过程中,会提到设计要满足一定的交互设计原则,而对于一名交互设计师来说,原则是在设计过程中遵循的一种大众认可的,经过可用性测试过的一些在pc端,移动端形成的一种定义性的标准。在不改变用户固有习惯的前提下,仅可能的采用符合用户行为习惯和用户感知的方式去实现我们的设计意图。

所谓的原则不外乎是大家都知道影响交互设计的尼尔森原则,实际上尼尔森原则通常在界面设计中不是通过视觉层现出来的,而是通过感知触控反应出来的。

例如在设计过程经常提及的用户感知,系统反馈,其实就是行为与界面的交互,在这个交互的过程中会存在友好的,或者是有障碍的交流。通常我们认为,友好的交互和有障碍的交互是传递给以用户为主体的人。

那么在我们设计交互行为方式的时候,我们都怎么去运用的这些交互设计原则的呢?

笔者一直认为,产品交互设计一定是通过行为和主动反馈感知出来的,用户的行为目的是否通过我们设计的信息而达到。并且是一个顺畅的交互流程而达到的。

我们先了解一个消息中心的需求:

背景:消息中心作为系统平台重要信息的通知方,接收后台发送的重要信息。要求用户能够主动接受查看信息,系统能够主动提示重要的信息。让用户感知重要信息的存在,以免错漏重要信息的阅读。该消息提示为全局提示。

页面信息:在此就不再分析页面的跳转逻辑,只就页面场景,状态等来说明每个细节的设计原则:

就下图而言,我们思考的两种状态:

一是“未读信息”没有阅读完时,有新的消息时如何提示用户如何显示?

二是“未读信息”阅读完时,如何显示和提示,如何引导用户查看信息?

1. 消息显示策略,按时间排序显示最近10条未读信息,显示信息标题,间隔5s上下轮播,并显示未读信息条数。

交互原则:按消息显示策略显示,当没有“未读消息”时,有必要的引导式提示语言:“查看更多消息”,帮助用户可进入消息列表。该消息提示为全局消息提示,用户在任何页面操作时,有新的消息接收,此时为系统主动提示用户,同时在用户登录系统时,如有“未读信息”系统将主动提示一次,且不能打断用户当前的操作行为。

结合当前操作不同的场景状态,考虑可能出现的情况,制定合理的应对策略,遵循一个环境切贴,不遗漏场景状态。

2. 接下来我们在结合上面的提示,来看下面的需求,希望点击消息,出现一个下拉选择某条消息的操作,并且还有不可见的隐藏消息,能收起当前的状态。

于是,我们又会思考两个问题,用户目的达成和操作路径的问题,用户目的,一是准确查看某一条具体的信息内容,二是,选择性查看对用户有用的信息。

我们知道,达成用户目的,理论上是希望用最短的时间和最快的操作达成,那么就有一个路径选择的问题了,我们通过下图可以看出,实际上是一个阻碍路径,操作次数多且没有达到目的的行为。

查看消息时,跳转到消息列表内,用户还得对信息进行一次选择,会再次增加页面跳转,路径增加且用户未能达到目的。还是一样,用户操作的每一步,我们试去思考用户场景,如果消息列表和内容的落地页占用当前系统内容页面,势必会打断所在页面的任务操作,并且无法定位到当前的位置,如果是在系统的二级三级页面,打开消息列表占用页面,那么用户在系统或者浏览器的返回成本大大增加。那么如何将路径减少路径,不打断用户的行为操作呢?

交互原则:减少用户操作路径,同时满足用户两种目的的诉求,点击消息,直接进入消息列表,如果用户查看具体的某条信息,就定位到消息列表中,并显示具体详情。这里的消息传递的是信息内容,提供给用户的更多是可阅读性,提示性的作用,告知用户的方式。所以我们要达到的目的是让用户知道消息内容即可。并标记“已读”“未读”,两者可以相互标记。不做手动删除功能,系统自动保留时间区间的消息。考虑无消息时的显示提示状态。

通过全局消息提示进入消息列表,交互方式采用弹窗方式显示内容,可减少路径操作,快速达到用户查看目的,且不打断用户停留的页面的操作行为。查看完毕后关闭窗口,直接回到用户此前的操作页面。在弹窗中的标记性操作,当前页面没有跳转关联,用户的行为操作,系统中有必要的tost提示。满足交互的人性化帮助,系统能友好的和用户对话交互。

以上是一个很简单的实操例子,在设计交互方案时,原则性的运用是个思维思考的过程,也是一种为什么要这样做的理由,只有在这个思维过程中站在用户的使用场景去思考,才能不遗漏太多,才能还原使用场景中会出现的情况和状态。不同的使用场景,我们会思考不同的交互原则,原则是一个既定的基础规则和思考方向,其目的就是如何更好的为用户减少障碍,提高可用性,和易用性。

本文由 @海大爷 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

数据仓库中宽表的设计原则_实际项目中交互设计原则的运用相关推荐

  1. 软件观念革命:交互设计精髓_万字干货,交互设计精髓105条设计原则(附中英PDF资料)...

    <About Face: 交互设计精髓>称得上是交互设计的圣经,用"工作必备,常看常新"来形容也不为过.书中的每句话对平时的实践都有着指导意义.更难能可贵的是,这本圣经 ...

  2. div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...

  3. HTML5期末大作业:鲜花超市网站设计——鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:鲜花超市网站设计--鲜花超市(4页) HTML+CSS+JavaScript HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 作品介绍 1.网页作品简介 ...

  4. 【交互设计】用户体验之手势交互设计原则

    转载自:老二牛车教育 » [交互设计]用户体验之手势交互设计原则 手势识别指的是计算机设备侦测并识别人类手势.近几年来,随着手势识别技术的高速发展,以及3D传感器的广泛采用,手势交互已经得到广泛的普及 ...

  5. 期末作业成品代码——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...

  6. jsp 中提交表单后在firefox、chrome 中中文显示为正常,但在IE中中文显示为乱码?...

    如题: jsp 中提交表单后在firefox.chrome 中中文显示为正常,但在IE中中文显示为乱码? 备注:框架:spring 和hibernate 提交表单后,在IE中提交的数据传到Contro ...

  7. HTML5期末大作业:婚庆网站设计——红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

    HTML5期末大作业:婚庆网站设计--红色的婚庆(18页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...

  8. HTML+CSS网页设计期末课程大作——XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作

    HTML+CSS网页设计期末课程大作--XXXXX (X页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  9. HTML5期末大作业:甜品奶茶网站设计——甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作

    HTML5期末大作业:甜品奶茶网站设计--甜品奶茶店(19页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...

最新文章

  1. php权限二进制,了解二进制权限,二进制权限的应用(PHP演示)
  2. C 语言的实际运用 ---150809124
  3. 【XAduio2】6.如何枚举音频设备
  4. 转-SQL 2005修改系统表
  5. 软件连接oracle失败怎么办,【编程开发工具】navicat连接oracle失败怎么办
  6. python爬虫scrapy连接mongodb_爬虫框架scrapy和数据库MongoDB的结合使用(二)实战
  7. 家境一般但被中外合资大学录取了,现在家庭气氛紧张
  8. 后端ajaxPost请求传给前端的显示乱码问题
  9. [bzoj1878][SDOI2009]HH的项链
  10. CMD窗口居中的方法(转)
  11. c语言数组的斐波那契数列
  12. 蓝桥ROS机器人之CoppeliaSim_Edu_V4_2_0
  13. 国医眼科大师-唐由之-干眼症熏方
  14. 中国企业学习管理系统(LMS)市场趋势报告、技术动态创新及市场预测
  15. 微信二维码1-服务号推广(将网页存储为图片存储到服务器)
  16. SecureCRT for Linux
  17. 400,405,404 ,500是什么错
  18. SQLServer 统计数据量
  19. 【Hexo】实现博客的动态说说功能
  20. 微信小程序入门--快递查询小程序的制作

热门文章

  1. 比特币现金在奥地利成为主流
  2. Java 集合类(一)
  3. 在echarts中自定义提示框内容
  4. 记一次数据库查询语句的优化
  5. iptables 定义规则
  6. call/apply/bind 的理解与实例分享
  7. win7安装redis
  8. IAS的工作原理(一)作为 RADIUS 服务器的 IAS
  9. chromedriver与chrome版本映射表(更新至v2.30)
  10. linux awk(good)