我们经常会谈到用户体验,其实好的用户体验与设计映射是有很大关系的,今天的设计法则-映射,希望能为你提升产品用户体验度带来一点思考。今天我们来了解一下,设计心理学中的第三个交互设计概念:映射。

同样,这个概念也要结合示能和意符一起来思考。诺曼先生在设计心理学中提到了映射这个概念,但是比较精炼,对于初学者来说只能有个大概的了解。所以今天我们继续用更多的案例来说一说这个概念在我们数字化以及生活中运用的实际场景。

这虽然是交互基础的概念但对我们设计师来说也极其重要,概念虽然很简单,但实际在设计中也会频繁的遇到问题。我们先用比较正紧的文案来描述一下这些比较“枯燥”的概念,映射是一个术语,从数理理论借用而来,表示两组事物要素之间的关系。(书中诺曼先生的原话)上两篇文章我们说的示能和意符,表示了事物本身具备或传达的功能和被交互性,而映射则是表示了控制器和被控制对象的关系。

好的示能和意符的设计,可以让映射变的自然。第一篇示能我们举了一个开关的例子,多控开关之所以让人抓狂首先是缺少了意符的表达,其次是映射的不合理。就如同我们在书中见过的一个煤气灶的案例,4个灶头下方有4个控制开关,左右两种不同的排列方法,体现出好的映射有多重要。

一、映射的三种层次

诺曼老师在如何设计映射中提到,自然映射设计可以分为3种层次:

最佳的映射:控件分布在被控物体的主体对象上

次佳的映射:控件与被控对象相对更接近

第三佳的映射:控件与被控对象在空间分布一致

这三种映射的层次在体验中的满意度与效率一次递减,我们依次在举例说明

1.1控件分布在被控制的对象上

例如门把手在门上,我们就觉得这映射设计的很自然,通过转动把手可以对门进行开和关。再例如我家的洗衣机上有一个用来选择洗涤模式的旋钮,洗涤模式围绕在旋钮的周围,旋钮上有光点,旋转旋钮光点就会旋转到我们需要的洗涤模式上,这也是控件与对象一体的形式,满足用户对控制器与被控制对象的心理预期。

那在数字产品中我们也会遇到类似的情况,例如我们想展开放置在一个卡片中的文字,我们通常最好的方式是在文本的边上设计一个提示展开的“可点击按钮”,再次的方案是放在文案的下方,最不可取的就是放在卡片以外的区域,因为映射关系逐渐减弱到无关。

再举个例子iOS系统中如果要调节音量,可以在音量模块中直接通过手指的滑动来调节,而不需要在模块中或者模块外部加上两个用来增减音量的按钮。不过说实话,华为的曲面屏双击侧边唤出音量控制模块,个人觉得成本还要比物理实体按键更高一点。

除此之外,智能手机在逐渐演变进化的过程中,手势操作功不可没,利用手势代替按钮也节省了更多的成本并且在效率方面也得到了提升。例如视频播放器的应用中,会有相应的控件用来控制视频的播放、暂停、声音、进度、亮度、横竖等等,这些按钮其实就是最佳的映射设计

1.2.次佳:控件与被控对象更接近

这个也就是我们常说的格式塔心理学中的接近原则,因为越靠近越相关,很好理解。某些物件在设计时无法将控件和被控对象结合设计,那么我们只能退而求其次,让他俩能更靠近一些,在映射关系上可以更清晰。

接下来我会给大家看我家的冰箱和电饭煲的操作界面,大家就知道,次佳的映射如果不好好设计,也会显的很糟糕。如图所示,其实界面的信息设计无非就是这样,如果你可以把这些界面的信息设计的有逻辑有层次,那么在其他的用户界面中也能够如法炮制。

例如电饭煲的烹饪模式和其对应的按钮,都是通过点击多次按钮进行控制,而不是在单独的模式中具有单独的按钮,而最好的方法那肯定就是想选什么模式直接选,而不是做一个按钮来多次切换。

这里是因为本身这款电饭煲没有智能面板,所以通过物理按钮只能这么做,否则,按钮一多就更难操作了。那有小伙伴问他能不能和洗衣机一样做个旋钮呢?当然也可以,因为旋起来也比多点几次按钮来的方便,只不过旋钮做上去之后其他的按钮可能也要变成旋钮,在产品设计上就有更多的问题要探讨啦。

所以我们再来看它的按钮分布,发现其实控制按钮和被控制的参数其实缺少了距离关系,当你看着想要控制的参数却找不到控制按钮的时候就会比较抓狂,因为在这个布局中既没有满足最佳也没有满足次佳,甚至连在空间分布上也无法产生对应。

以上就是优漫教育小编为大家介绍的“【UI设计培训】:设计心理学中的映射交互设计概念”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解,并能快速掌握ui设计!

设计心理学中的映射交互设计概念|优漫动游相关推荐

  1. ui设计培训机构内课程包括哪些板块|优漫动游

    UI乃是user interface的缩写,翻译成中文就是用户界面,所谓ui设计即就用户界面进行优化设计,所有对软件展开的交互.逻辑操作优化都属于ui设计范畴,ui设计岗位薪酬较高,初入职场就有10k ...

  2. 输变电工程三维模型GIM文件如何打开?内含什么信息?在设计软件中是如何交互的?

    很多没有接触过三维设计的技术人员问,GIM文件如何打开?GIM文件是怎么构成的?GIM文件包含了什么信息,这些信息在各类三维设计软件中是如何交互的,不同的软件都能打开GIM文件,会兼容出错吗?如果我开 ...

  3. 广州优漫动游公司:高级UI/UE交互设计就业班学什么?

    广州ui设计培训学校,UI交互设计培训,ui界面设计培训,UI培训学校,ui界面交互设计培训,UI培训哪个学校好–高级UI交互设计就业班.UI设计培训,高级UI/UE交互设计就业班. 一.培训特色 项 ...

  4. UI设计中连笔设计怎么做出高级感?|优漫动游

    把文字与文字之间的部分笔画连接起来,是字体设计中很常用的一个技巧,使用得当可以增加字体的设计感.整体感和美感,在标题设计中最常用到.不过对于零基础学ui设计的新人来说,想要灵活的使用这个技巧还是需要有 ...

  5. UI设计中常用的抠图工具特点对比|优漫动游

    UI设计师必学哪些技能?抠图是一个设计师必不可少的技能,不同抠图工具怎么使用?比较常见的抠图方法有钢笔.魔棒.快速选取.通道等.不同的图需要不同的方法进行抠图,每种抠图方法也各有其优点和不足,接下来优 ...

  6. 广州优漫动游公司:UI设计中的详情页怎么设计?

    以淘宝天猫京东这类综合类电商网站为例,一个完整的详情页一般由以下部分组成:首图Banner+产品信息+产品功效介绍+产品外观展示+产品细节展示+其他等,今天优漫动游小编聊一聊详情的设计技巧.这里所说的 ...

  7. 广州优漫动游公司:UI设计中的ps要学多久

    Ps全称为Photoshop,是做设计的基本工具.想学习设计的人都需要学会这一款软件.那么学习ps要多长时间?如何快速学会ps呢?ps要学多久?其实,学习时间的长短主要取决于你采取什么方式进行学习以及 ...

  8. 优漫动游:UI设计是什么?和平面设计有什么区别?

      有很多从事平面设计的朋友问我,UI设计是什么?和平面设计有什么区别,UI设计和平面设计的前景哪个会更胜一筹呢?今天优漫动游小编和大家来说一下.   01.什么是平面设计   平面设计工作是一个主观 ...

  9. 优漫动游:UI设计培训课程的内容是什么?UI设计培训多久呢?

      随着互联网和移动设备的普及,UI设计越来越受到人们的关注和重视.作为一个UI设计师,需要具备丰富的设计技能和经验,才能够设计出符合用户体验的界面和交互效果.那么,UI设计培训课程的内容是什么?UI ...

最新文章

  1. 计算机主板风扇安装,5个装机注意事项 让你装电脑少走弯路
  2. vue项目实现记住密码到cookie功能
  3. python编程单词排序_Python读取英文文件并记录每个单词出现次数后降序输出示例...
  4. [HDOJ2586]How far away?(最近公共祖先, 离线tarjan, 并查集)
  5. gatewayproperties 是空_杨丞琳演唱会踩空,从二楼高台掉到一楼,手脚擦伤,引发网友热议...
  6. python 百度ocr识别_Python使用百度Ocr识别文字保存CSV
  7. http模拟登陆及发请求
  8. 2020年的UI设计师需要会什么软件
  9. Docker学习总结(17)——学会使用Dockerfile
  10. [转]SQL:JOIN用法
  11. 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
  12. bigemap中下载边界_BIGEMAP地图下载器-全能版
  13. 介绍requests+threading多线程爬虫,提取采用xpath 和正则两种,介绍线程锁
  14. 计算机编程 高斯消元,高斯-若尔当消元法
  15. 等保(公安部82号令)
  16. 计算机学报杂志官网在线出版,计算机学报
  17. SM2 生成公钥私钥 签名 加解密 亲测可用
  18. 全国中学生计算机大赛+试题,全国青少年信息学奥林匹克竞赛(NOI2018)正式开幕(附day1试题)...
  19. mac无法通过触摸版、无法通过鼠标拖曳文件?
  20. 前苏联IV-18荧光数码管时钟开发(ИВ-18)

热门文章

  1. 495. 提莫攻击(不会)
  2. Matlab龚珀兹曲线模型预测,统计预测方法及预测模型介绍.ppt
  3. [Rotation Transform] 旋转变换
  4. 关于grafana的界面操作展示loki
  5. CSS世界-第四章 盒尺寸四大家族
  6. Windows下PostgreSQL 8.1版安装图解
  7. python 布莱克舒尔斯_布莱克—舒尔斯期权定价模型
  8. 利用Arduino Esp8266 心知天气API 获取天气预报信息(修改后可以DIY一个小型的桌面气象台)
  9. 机器学习常用性能度量中的Accuracy、Precision、Recall、ROC、F score等都是些什么东西?...
  10. js返回上一页,下一页