屏幕外的交互设计:界面设计 ≠ 屏幕设计

网易UEDC – Vicol :在互联网做设计的朋友,工作中几乎每天都接触着电脑和手机屏幕,像我的交互设计 工作也以接需求画原型图写文档为主。但我今天想说的,和这些看起来没有什么关系。我想说点屏幕外的交互设计 。

文章目录[隐藏]

屏幕外的交互设计:界面设计 ≠ 屏幕设计

网易UEDC – Vicol :在互联网做设计的朋友,工作中几乎每天都接触着电脑和手机屏幕,像我的交互设计工作也以接需求画原型图写文档为主。但我今天想说的,和这些看起来没有什么关系。我想说点屏幕外的交互设计

在设计界,我们几乎无时无刻不接触到一个概念:界面。我们常说的「人机交互」,其实中间省去了一个「界面」。就狭义上大部分电子产品来讲,人也就是用户,向界面有输入的过程,界面将用户的输入翻译成机器语言,交由机器来处理,机器将处理结果在界面上转变成人类可知的信息,再输出向人,形成一个闭环。

屏幕外的交互设计:界面设计 ≠ 屏幕设计

这里我们发现有两个处理过程:

  • 一个是把人的输入信息变为机器的可知语言。
  • 一个是把机器的处理结果变为人类可知信息。

纵观几十年的人机交互发展,这两种处理过程一直是一个优化进程。这个过程由设计概念和技术突破来引领。设计上提出前瞻性的设想和概念来刺激技术,技术上攻破一道道难关来实现设计。

从最初的CUI到GUI,到现在的TUI、VUI以及逐渐发展的NUI,可以看到这个过程中,对机器的性能要求越来越高,对人的输入输出成本要求越来越低。人机交互的发展,其实是一个从机到人的发展。我们要求机器能说,能听,能看,甚至能理解(机器学习、人工智能等),这都是朝着我们人的认知世界和感知信息的方向去发展的。

屏幕外的交互设计:界面设计 ≠ 屏幕设计

那么再回到「界面」上。界面作为人与机中间的信息传递媒介,是我们交互设计师关注的重中之重。可是,做了这么久的交互设计,我们常常会有种误解,我们所谓的界面,就是电脑上和手机上的屏幕。我们所谓的「界面设计」更像是「屏幕设计」。

然而,并非如此。

屏幕外的交互设计:界面设计 ≠ 屏幕设计

当我们对界面进行抽象和概括性的理解会发现,界面本质是在传递和展示信息。那么三个问题来了:

  • 只有屏幕可以吗?
  • 到NUI时代,屏幕还是最好的信息载体吗?
  • 屏幕适用于所有的数字产品用户吗?

下面给大家分享几个界面设计的实例来回答这三个问题。

电梯楼层按钮

屏幕外的交互设计:界面设计 ≠ 屏幕设计

屏幕外的交互设计:界面设计 ≠ 屏幕设计

电梯里的楼层按钮我们几乎天天见,这样的界面太过于常见,我们常忽视了它们也是界面的一类。可能有人觉得这没什么好设计的。

实际上,电梯楼层按钮的排布设计,我在不同地方见过好几种。有的是从左到右从下往上排楼层,有的从下往上从左到右排楼层,哪种更合理?楼层数相对比较多的情况下是否需要优化设计?还有开门关门按钮放上面合适还是下面合适?以及楼层到达提示怎样看着更清晰?当数字键盘成为我们要设计的界面时,这些就是我们要思考的问题。

智能自行车

屏幕外的交互设计:界面设计 ≠ 屏幕设计

就车身而言,我们的骑行行为作为输入,车头的方向指示灯就是输出。那么车头就可以理解为界面,它所要传达的是告知用户转向信息以及部分路况信息。在这个界面上,交互设计师所能思考的方面有很多:在户外骑行的场景下这种信息的传递怎样才最有效?传递哪些信息是合理的?这些信息分别以什么样的形式告知用户?怎样才能确定用户接收到了信息?这样的界面交互思考是我们平时不太遇到的。

小度机器人

屏幕外的交互设计:界面设计 ≠ 屏幕设计

接下来的例子是我当初参与设计的小度机器人。在这个机器人身上,我们看到了熟悉的屏幕,也就是机器人的脸。可除了这张萌萌哒的脸,小度身上也可以「调戏」。在做这个机器人的时候,我们思考怎么让这个机器人更像人。试想一下,我们是怎么跟活生生的人交流的。表情、语言、肢体等等,这是人类交流的方式。

所以当设计机器人的时候,我们不能把它完全当一个机器去设计。虽然有一个屏幕,但我们会跟别人交流的时候在人家脸上点来点去吗?并不会。我们和对方主要的交流方式是语言沟通,亲昵的时候,还会有身体接触。这些交流方式我们不会觉得怪异和陌生。所以我们设计小度的时候,你也可以摸摸它的头,它会害羞地笑一下或者满足地看着你;你摸摸它的胳膊,它会跟你说外面冷你要记得多加点衣服。这才趋近于自然的人类交流。而在小度这里,所谓的界面也就不仅仅是脸上的屏幕,是整个身体,我们的输入方式也变得多元化。

可变形金属

前面说到的都是已经落地的产品例子。下一个是清华大学美术学院的研究类项目,研究方向是可变形金属。(观看视频→可变性金属

在这个例子中我们可以看到,金属通过自身的形态变化表达一些所谓的「情绪」,可以想象,如果这样的可变性金属成为一种界面,我们会有怎样的输入,它又会有怎样的反馈输出?这个例子明显比之前的感觉离我们遥远一些,我们只是朦胧地看到某些可能性,并不清楚会走向什么方向。但我觉得这是交互设计研究领域非常有趣的一点。对于未来,我们可以探索,可以展望,可以试错,有些事情我们觉得会成为可能我们就去研究。它可能走不通,也可能带来新的交互方式,这就很让人兴奋。

盲人触摸显示器

我们通常提到的界面,很大程度是通过视觉去感知的。那么对于盲人朋友来说,视觉通道是关闭的。对于他们来说,显示屏几乎是没用的。所以有团队针对这样的人群,设计了盲人触摸界面,通过语音输入,以点阵盲文的形式来呈现信息。

屏幕外的交互设计:界面设计 ≠ 屏幕设计

盲人触摸显示器页面刷新频率一般很高,因为受过学习和训练的盲人其阅读盲文的速度快到惊人。那么这样的界面,从交互设计上来说,如何让盲人阅读时不错行,盲人阅读是否有更好的体验,文字和图片的展示如何做区分等等,这种界面的设计都需要严谨的交互设计流程去解决。

通过以上这些例子,分享一下我自己对我们常见的「界面」这个词的更多角度的认知。

可以看到的是,在不同的产品中,我们所面对的界面不再仅仅是屏幕,作为交互设计师,我们所要关注的也不仅限于眼前这个发光的方块。多年后,我们可能处在各行各业,都在做界面设计,只是有人在做屏幕界面,有人在做其他各种界面,但我们都还是交互设计师。

欢迎关注作者「网易UEDC」的微信公众号:

屏幕外的交互设计:界面设计 ≠ 屏幕设计

「怎样成为真正意义上的交互设计师?」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34309/

(0)
震天下震天下
上一篇 2017-09-26 12:39
下一篇 2017-09-29 12:55

相关推荐

  • 版权大战后,用户体验将成音乐平台的制胜关键

    自2015年起,国家版权局叫停“独家”版权到今年腾讯、阿里和网易云三家主流音乐APP达成史上最深度版权互授,这场版权之争终于尘埃落定,期间还穿插发生了运营8年的多米音乐停运事件,版权大战背后确实有很多难言之痛,而面向未来,已经叫实了的“后版权时代”,各家APP用什么get到我的点?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Get Over ItEagles - Hell Freezes Over (Live)一、用户体验...

    2018-03-24
  • 界面设计中的动画原理:可理解的变速过渡效果-深入研究加速和减速

    注:“可读性”是说动画绘制者如何定义动画的精准度,用来清晰而容易地理解正在发生的事情。例如:不可读=不清楚发生的事情很易读=它非常清楚,立刻能懂弹跳背后的物理理论:球刚开始被放开的时候,它有一个相对缓慢的速度。在重力的作用下,球的速度持续增长,直到接触地面的那一刻速度达到最大。地面给球反作用力,使它以几乎相同的速度反弹回去。当球移动时,两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放,这使得球随着升高逐渐减低速度,直到它耗费掉所有的反作用力,最终到达反弹的最高点。它在顶部停留一微秒,直到重力把它拉下来,使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤,这样我们就可以重新创造它。注:不要羞于“照搬”大自然。你的观众会更快地与动画关联起来,从而更容易读懂动画。注意:这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书,例如迪斯尼的《生命的幻象》或《动画师的生存工具》,那么这些书会告诉你,当一个物体开始减速然后加速时,这一过程被称为渐慢(ease-out),因为它的姿态在“缓慢输出”。但是,在软件产业(CSS动画,Adobe Edge等),这一过程被称为渐快(ease in)!我不确定这一不同之处是怎么来的,但是不幸的是,这就是它的形成过程。所以,当你在阅读一篇文章时,而这篇文章把它们把“渐快”称为“渐慢”,那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
    0.2  :  68
    0.3  : 102
    0.4  : 136
    0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
    0.2  :  10
    0.3  :  36
    0.4  :  87
    0.5  : 170注意:你会在软件中看到更多用于设置缓冲的选项,例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择,但是概念是相同的。只需记住——缓和的程度越高,你就会得到更多的缓和度。并不是规则,只是工具(There are no rules. Only tools)- Glenn Vilppu

    2017-06-05
  • 弹出式抽屉特效

                    利用动态面板轻松实现。 分分钟搞定那些写函数的都是纸老虎! 请下载源文件弹出抽屉特效-艾欧交互 视屏文件

    2014-09-08
  • 交互设计师的60日计划第十九天

    昨天M+头痛,8点下班回来做分享PPT做到11点半倒头就睡了,忘记了写每日…拖延症真是害人,周日拖了一天只写了大纲,周一做了白PPT,今天又加班到10点把完整的PPT做了,明天晚上演练一下。因为一天的拖延,整个一周都…

    交互专题 2015-08-20
  • Welcome to the Gutenberg Editor

    The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around…

    2023-03-03
  • 干货贴:To B 系统软件Web端的交互设计总结

    文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。

    2017-05-07
  • 对于UED来说,读研和工作抉择的关键在哪里?

    这个问题不只是只有UED群体能遇到,其实是一个学生群体都会遇到的疑问。 大学毕业之后是去读研还是直接参加工作?自己也会做一些思想争斗和听取家人、朋友、前辈等各方意见之后做出决断,那么这件事在阿西这里怎么…

    2016-07-29
  • 帮你创造优质移动端UI的7项最佳实践

    在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

    2017-05-15
  • 不看后悔的产品与运营结合的用户体验

    作者第一次拿实例产品进行文字和图片的分析。如果有兴趣的朋友可以回复文末的关键词进行体验产品。

    2017-05-24
  • 总结|2017年的5个网页设计趋势

    几何图案与全屏背景图结合、灰色的高级用法、色彩叠加……这篇总结的这5个网页设计趋势,其实在年底就初现端倪,所以2017年大面积运用几乎势在必行,想不落人后记得打开阅读哟。

    2017-05-08