童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

一招带你了解交互设计前沿理论

12月20日 喵小咪投稿
  在我们日常生活中到处都充满着交互设计,有时候你在使用某个APP的时候,你觉得很好用,而有的却很难有,这是为什么呢?本文通过了两个实际案例,跟大家讲解了交互设计语言在实践中的作用!enjoy
  一、我们生活中充满着交互设计
  每天滑手机的你,能想像在荧幕上做的那些简单的点击、滑动等等动作都暗藏着玄机吗?你是否也曾经感受到某些App的界面很难用,某些却用的很舒服?
  上述所描述的问题,都是可以通过交互设计来解决。
  电脑的出现开启了另一波科技革命的时代,交互设计也应此而诞生。
  它是基于图形用户界面的基础,发展到现在仍是个较年轻的学科。相较于传统的工业设计,交互设计学科的很多知识体系尚不成熟和完善。
  也因此,在团队合作中常常出现沟通不良的问题,交互设计师想表示A,产品经理解释成B,程序员理解成C,最后的产物,令人感到惊吓的程度常常多过于令人惊喜呢!
  二、拖拽和甩动的区别是什么
  还记得第一次上交互设计课的我,所受到的冲击。
  当时教授问我们一个相当简单的问题:拖拽和甩动的区别是什么?
  台下所有的同学都举起手指,朝空气中划一划,皱着眉头和左右同学互看一下。大家七嘴八舌但没有一个标准。
  后来教授又出了一道题目,他请两个同学一组,面对面前后坐着,面向白板荧幕的同学能够看到Smartwatch界面图,请这位同学向背向白板的同学说明界面的样子并请他画出来。
  经过一番折腾,我的伙伴总算理解我的意思,但当她转过去面对白板时,“啊~”的一声,原来,我所描述的和她理解还是有些距离。
  于是我开始思考:交互设计不需要自身独特的语言去准确地传达设计师的意图吗?
  为了解决这个疑问,我去查了相关的资料,发现如何有效沟通交互设计的议题并不多,不过有一个比较完整的理论叫做“交互设计语言”。一开始不知道如何应用这门语言时,有种雾里看花的感觉;然而,一但概念通了之后,对于交互设计有了更深层的见解,仿佛打开了交互设计领域的另一扇窗。
  三、交互设计语言的魔力
  在交互设计语言中,最基础的概念就是控件、联动和物件,当控件发生变化的时候,物件也随之发生变化,即控件通过联动控制了物件(如图)。“控件”和“物件”作为“物”有着很多属性,例如大小,角度,颜色,位置等。当两个属性之间有对应关系,可以通过“控件的属性”来改变“物件的属性”,我们就可以感受到“控制力”。
  我们通过鼠标控制光标的位置,然后光标控制图标在桌面上的位置,这个过程有两个操控关系。在不同的操控关系中,光标可以是“物件”也可以是“控件”(如图);而我们的双手,通常是控件,毕竟是我们在操控某个对象。
  交互设计语言里,将操控关系称为联动,在实际应用上,因为通常不只一个联动,而使情况变复杂。在交互设计语言中,还有像相对联动、绝对联动、循环边界等详细描述交互细节的概念。
  下面我们通过两个案例来说明交互设计语言在实践中的作用!
  四、实战的威力
  案例一:公交路线App
  大众交通类App是我们生活中不可或缺的工具。由于公车路线多且繁杂,所以每一条公交路线都需要单独界面来表示。公交路线的介面一般用两种形式来呈现。
  第一种是,将两个方向的终点站连起来,延展成一条长长的线(影片1);
  另一种方式则是,在路线介面上方,设置一个方向控制的按钮,来改变路线的方向(影片11)。但因为有些公车会从终点掉头返回起点,有些则不一定延着原路进行,这样的设计常常让使用者混淆而找不到目的地。
  该如何解决这个问题呢?
  影片1(左)影片11(右)
  操控力视角的重要性
  我们以韩国的Tmap大众交通App的改进方案为例,来说明操控力视角的重要性。首先,交互设计语言在看待这个问题时,会先以“操控力视角”去着手。
  为了让公交路线更直观地显示方向,利用操控力的概念,通过滚动列表来“控制”路线图显示的方向。因为人们在向上滚列表的时候,会下意识去查看往下的站点,所以显示下行线,反之,往下滚列表时,则会下意识地查看往上的站点,所以显示上行线,因此用户可以透过滚动列表轻松地切换上下行线。
  然而,如果用户反复上下滚动,进行上下行线的来回切换,会对用户造成不必要的干扰,所以我们利用操控力视角的概念,用一个复选框来控制这个“操控关系”的开关(如影片2)这样一来使用者在查询公交路线就可以快速达成目标。
  案例二:微信的返回方式
  当你沉浸在看微信里的文章时,突然收到一条新讯息必须确认,或是想到有一笔费用要缴,这时候的你,不得已要反覆操作“返回”的键去处理,这个过程中,不仅复杂,有时候还会发现讯息并不重要,读文章的思路还被打断(如图)。
  交互设计语言在面对这个问题时,首先会以操控力的思维来思考。要如何利用操控力,快速地在不同层之间转换呢?经过一连串的交互设计语言来理清思路后,发展出新的解决方法。
  在从左至右拖动页面返回上级的过程中稍微停顿一会,就会激活层级预览和跳转菜单。然后手指垂直移动就可以“操控”相应的层级(收付款、微信、浮窗等等),并且位于当前的页面会根据手指位置而产生页面变化。
  举例来说,当我们在阅读朋友圈的文章时,可以利用这个功能,不关闭当前的文章,“撇见”消息发送者及内容简要;又或者轮到我们结帐时,可以迅速地到收付款的页面。这样跨越式地完成了层级之间的跳转,大大缩短了操作步骤。(如影片)
  Part5:起掌握与万物对话的艺术吧!
  其实与万物的交互都可以用“控制力”来解释,它是一个抽象的视角,从中有无限的可能性。我们很长时间,在物理规律的限制下简单地对物理实体进行“操控”。随着技术的进步,我们开始控制能量并开始更精确地“控制”物质。计算机技术更让我们对“操控力”有更近一步的理解。交互设计领域,确实需要一套语言来了解其奥理,让团队沟通更顺畅并创新。
  交互设计语言能够帮助交互设计师能更清楚理清问题的脉络,进而达成更有效的团队沟通。
  传统的设计流程需要多次的开发原型迭代才能不断改良,成本高且周期长(图1);应用交互设计语言的设计流程,则是在思维层面进行多次迭代,成本低且周期短,能够减少不必要的迭代,并且最大化每一次的价值(图2)。
  传统设计流程:
  (图1)
  应用交互设计语言的设计流程:
  (图2)
  注:微信案例、解锁案例中所用的交互设计,已在中国和韩国申请了设计专利。
  
投诉 评论 转载

交互设计:让人困惑的三大交互组件及用法本篇文章中,笔者带我们了解了三大交互组件专有名词的用法,并结合实际案例进行了解释说明,与大家分享。希望通过此文能够加深你对交互组件及其用法的理解和分析。最近有很多同学来问……显而易见的UI通常是最好的UI设计师的脑子里总是由天马行空的点子,但是考虑到用户体验,最好先考虑清晰易用的问题。用户追求的是清晰的交互,而非聪明的交互用户体验设计师ThanhTran所作的插图……学习交互设计,这几个问题必须关注对于非交互设计的同学,要怎么去学习交互设计呢?在其中要着重关注那些问题点呢?销售同学:想了解设计相关知识,有没有什么好的课程?或者推荐的链接学习下?市场同学:交互设……场景化设计的4个步骤本文作者围绕什么是场景化设计、有哪些场景化设计的例子、为什么要进行场景化设计和场景化设计的具体方法对场景化设计做了全方位的解读分析,希望通过此文能够加深你对场景化设计的认识。……后台产品交互规范有这篇就够了!这些年一直在从事产品相关的工作,从自身经历以及与同行之间的交流发现,“交互体验”“交互规范”“用户体验”时常被挂在嘴边,但是目前依然有很大一部分公司对交互规范不重视。本文结合自……体验设计师应该具备商业思维吗?答案是肯定的。文章标题虽然是疑问句,但我的回答和这篇文章的主题一定是肯定句。因为行业早已如此。阿里做为行业标杆在今年举办的UCAN设计大会上,提出的“设计让商……用户增长指导体验设计(一)设计分析本文基于用户增长模式,探索体验设计驱动增长的作用、方法,与大家分享。一、用户增长背景、重要性越来越多的公司开始关注用户增长概念,因为依靠人口红利获得持续发展的时代已……一招带你了解交互设计前沿理论在我们日常生活中到处都充满着交互设计,有时候你在使用某个APP的时候,你觉得很好用,而有的却很难有,这是为什么呢?本文通过了两个实际案例,跟大家讲解了交互设计语言在实践中的作用……交互例推:好设计看得见(2)《交互例推:好设计看得见》是我在体验互联网产品过程中对一些产品设计案例进行交互推导与分析的专题集合。他山之石可以攻玉,关注这些好设计,给自己的设计思路带来启发,同时积累设……12个案例告诉你:交互设计的决策要素有哪些?同样的功能,每个APP的设计方案却并不相同。为什么?影响交互设计的决策因素有哪些?本文作者结合实际案例对此进行了分析探究,与大家分享。大家在把玩各种App的时候,应该经常……交互设计三板斧:思维、方法、工具(基础篇)笔者从认知、思维、方法和工具四个方面详细阐述交互设计,帮助大家更深刻地理解什么是交互设计,意识到交互设计的价值与重要性。同时,掌握一套通用的设计思维和方法,适应C端和B端数字产……“诱惑”这种含蓄的艺术第一篇文章主要从交互的表层进行分享,第二次是“交互设计该如何展开诱惑”,那么这一次我将围绕“诱惑”展开分享诱惑,其实也是一种含蓄的艺术。之所以选择阐述“诱惑”这个话题,是因为通……
旅程映射,构建移动应用的用户体验B端产品的需求应该怎么理解?善用KANO模型,做需求分类与评估优先级“先试穿再购买”的电商平台订单模块的重构心得案例分享:数据可视化大屏设计经验分享(高级篇)如何设计APP评论点赞的显示机制?小红书“支付时间”的策略分析互联网产品“筛选功能”分析与思考实战复盘:我是怎么做搜索优化的?电商场景下“智能导购机器人”的原理与设计步骤从0到1设计产品,你需要了解这些内容以语言交换产品为例:看产品设计从0到1全流程

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界