移动产品的交互设计

用户头像
天津/设计爱好者/6年前/367浏览
移动产品的交互设计

希望通过这篇文章,来和大家交流一下移动产品的交互设计

PART 1      

五个基本心理学概念:示能、意符、映射、反馈和概念模型

作为一名ui设计(地域限制,需要做交互设计和视觉设计),对于这几个含义理解之后,融合到app设计的情境下,会让你对之前工作流中的『交互设计』有全新的认识。

       众所周知,交互设计借鉴了心理学/设计/艺术和情感等基本原则来保证用户得到积极愉悦的使用、情感和操作体验。交互设计之所以可以成为一门学科,本质在于可交互,而可交互的前提,是可以被感知,那么被感知的方式,往往是和人的五感(眼、耳、鼻、舌、身或者叫触,听,视,味,嗅觉)有关。

       其实不管是触、听、视、味、嗅,。只要能被人的五感所感知到,不管是和人或者机器,甚至机器和机器之间,只要发生了共情,就能称之为交互。

       在人的五感之中,视觉视觉占比达到了惊人的83%。(其中听觉11%,嗅觉、触觉、味觉机加起来占比6%),而不管是什么设计,如果可视性不佳,都不能算得上优秀。

唐纳德·诺曼将交互的可视性原则归纳为和五种基本心理概念相关,这五中基本概念分别是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反馈(Feedback)和概念模型(Conceptual Models)。

一、示能:(Affordance)

示能指的是物品与人之间的关系,具体来说是:物品的特性与决定物品预设用途的主体的能力之间的关系。这句话有些绕,来看个例子。

椅子可以提供支撑,人们可以坐上去。其中大多数椅子可以被一个人携带,但是有些椅子一个人就无法搬动,比如下面这个四连座,对于单个人来说没有可移动性。有些椅子提供了滑轮,对人们来说这个椅子除了搬移还可以轻松拖动。这种物品表现出来的,让人们看一眼就知道自己能不能移动它,可以搬动还是拖动它的这种关系就是示能。

相对的,物品表现出来的不可操作性也应该被表现出来,也就是反示能。比如透明的玻璃,看起来有通透性,但其实并不能穿过,这时候就要在玻璃上做些标记,告诉人们这个不可通过性,也就是反示能。

二、意符

意符是一种提示,告诉用户可以采取什么行为,以及应该怎么操作。一些意符是生活中的符号、标签和图样,比如门上的“推;拉”,指示箭头等。一些意符是预设用途,比如门把手,电脑屏幕上的矩形按钮。但是预设用途可能误导人,比如可能看起来像门,其实却是一块不能打开的玻璃。看起来是一个按钮,却无法点击。

意符必须是可感知的,否则起不到沟通的作用,沟通是良好设计的关键,沟通的关键是意符,所以设计师要把重点放在意符上。这个沟通不仅局限于说话,打字。一个按钮、一短文本、一个把手同样也是在沟通。

下面来举个例子,帮助大家区分下示能和意符。比如破窗效应就是一个示能和意符的例子。玻璃易碎的性质让人们看到玻璃感受到不要用力敲打不然会碎这个示能,一旦有人打碎了一块玻璃,那么这块坏了的玻璃就变成了意符,告诉其他人,邻近的玻璃也可以被打碎。示能是抽象的关系,而意符是看得见、摸得着的。

三、映射

映射表示两组事物要素之间的关系,通常用在控制与显示的设计上。比如房间里哪个开关控制哪个灯。

有些映射比较复杂,比如控制轮椅的时候,需要控制左右轮的速度和前进方向来达到改变方向的目的,而不是像汽车一样左右转方向盘就可以了。

在产品设计中,最好使用简单的自然映射,自然映射有这么几种:利用空间类比、文化的或者生物的习惯用法、视知觉的原理。

利用空间类比,比如把一个房间灯的开关放在一起,使用和灯的布局一样的布局来放置开关,就像房间的俯视图或者侧视图那样。比如需要向上移动物体,就想上移动按钮。

文化或者生物的映射,比如向上指就是增加数量或者强度。这里注意不同文化间的差异。比如加好表示新增、创建,减号、垃圾桶可以表示删除。

视知觉原理,比如利用格式塔心理学,安排相关控件应该组合在一起还是靠近要控制的对象。比如手机app中的一条item旁边的按钮,表示这个按钮只能控制这条item。

四、反馈

反馈,大家都知道反馈要及时,也要注意到反馈要提供有用的信息,同时要避免滥用反馈。比如用户左滑banner的图片,那么banner图最好有从右向左更换的过程,至少不应该是从左到右的动效。避免滥用反馈就是说糟糕的反馈、或者过多的反馈会占用用户本不需要付出的注意力。太多占用用户的注意力,容易引发用户忽视真正重要的反馈。

五、概念模型

下面来看看系统映像和概念模型。系统映像就是产品提供给用户的信息组合。这些信息可以有有关的文章、说明书、广告、产品网站、产品本身、销售人员的介绍等等。用户会根据这些信息,在自己的心里构建出一个使用产品的路数。给这个路数一个专业的名字心理模型。心理模型是概念模型的一种。

概念模型是高度简化的说明,告诉用户产品如何工作。比如电脑里的文件夹、文件,就是在帮助人们建立一些概念模型。其实电脑根本不是按照文件夹这种方式存储文件。所以概念模型不一定展示真正的产品实现方式。

并且即使给两个用户提供同样产品相关信息也就是系统映像,这两个用户也极有可能形成不同的概念模型。这取决于用户自身的经验和操作产品的能力水平。比如技术开发人员心目中的概念模型可能更倾向于产品的实现模型,普通用户的概念模型可能更简单、更多的使用生活中的隐喻、映射等。也就是心理模型。

那么为什么要帮助用户建立概念模型?一个好的概念模型,能够让用户预测自己行为的结果,更好的操作产品,达到自己的目的。那么什么是好的概念模型,产品的呈现模型越接近用户心理模型就是更好的概念模型。

概念这种东西看起来很抽象,工作中貌似也无法带来直接的好处,但是了解这些设计理论可以让设计师透过现象看本质,了解这样设计的原因。

现在大家对待的知识的态度有点像快餐,大家恨不得看一篇文章立马就能照着用到自己的工作中,但是缺乏深度的理解,只是让大家其自然不知其所以然,无法灵活使用,也无法在方案PK中说服别人。

PART 2

一个人和一部(未通电的)手机(这是默认屏幕,不针对个别去做手机反面的例子),在不借助道具的情况下到底能衍生出多少种交互方式?从五感出发去深入剖析的话大概分为:

  • 嗅觉:用鼻子闻一闻这块屏。(哦?发现并没有味道)

  • 听觉:用耳朵听那块屏发出的声音。(嗯?发现并听不到什么声音)

  • 味觉:用舌头舔一舔这块屏。(咦?是不是有点汗味?)

  • 视觉:用眼睛去看这块屏。(这是一块光滑的类似于玻璃的物体)

所以,当我们看到一块屏幕设备,这块屏幕设备的视觉示能最终导向了,人和屏幕的交互手段被定位在触觉上,而脚趾相对于人类来说没有手指灵活,所以最终我们把交互规定到手与屏幕的交互(简称交互手势)。

触觉:我们来看看手指和屏幕的交互方式(图片来自Graphicpear)

不要纠结于图,其实现今的所有的手势交互,我们基本操作分为:

  1. 一根手指:单击、双击、长按、拖动、上下滑、左右滑。

  2. 两根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

  3. 三根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

  4. 四根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

  5. 五根手指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转、捏按。

  6. 双手双指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

  7. 双手十指:单击、双击、长按、拖动、上下滑、左右滑、扩张放大、收缩缩小、旋转。

上部分先写到这里,

最后,为每一个看完的你点赞。

再次谢谢大家读完。


4
举报
|
6
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
我的钱包-UI界面设计-app
Security Camera UI kit
拟物风质感写实UI卡片合集源文件
【新年UI图标】钱包icon
【新年UI图标】旅行icon
【新年UI图标】汽车icon
钱包ui模板
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
科技医疗透明柜UI界面设计
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
高级表盘系列UI源文件
盲盒APP UI设计
UI 登录界面设计模板包
3D渐变流体抽象矢量UI背景图
UI通用设计素材1
UI界面 组件
【新年UI图标】体育icon
【新年UI图标】会员icon
【新年UI图标】活动icon
【新年UI图标】秒杀icon
新拟态风格 UI设计组件库
智能家居中心 简约 UI设计组件库
你可能喜欢
大家都在看
登录注册