现在位置首页 / 产品设计 /正文

开发者应该了解的产品交互设计

作者: IT小兵 | 2013年8月19日| 热度:℃ | 评论: |参与:

从一开始参加工作,作为一个linux服务器的维护人员,只懂一些linux shell命令,

到工作上被“逼着”学习asp、jsp页面编程,html简单的排列组合,

一步一步到现在算是成为了一个开发人员吧,但是越来越觉得开发不仅仅是开发,

不是噼噼啪啪打字,用if else 就行了。其实开发工作是一个创造的工作,

是你脑力思维通过开发ide,按照流程用代码呈现出来的一个艺术工作。

如果只是当做工作的工具,真的是“民工”了。

程序员开发交互设计

                (开发人员是不是都和我这么帅??!)


而很多时候,我们往往把自己定位为纯技术性的,涉及到写个文档、画个流程图说明你的想法的时候,

我们都感觉很难。尤其涉及到交互设计,现在项目开发中非常重视,但是开发人员一旦想到这个问题,

就会第一个念头就是交给美工实现、交给产品经理完全画出来交给我。只要是产品经理没有想到的,

开发中就不实现,结果导致页面流程功能都实现了,但是使用起来非常的粗糙,不够流畅。

下面的文章与大家分享,希望在开发中能够多做多想多写。开发过程中,最好能够体现自己作为专家的主动性。

推荐另一篇给大家:[结合用户体验说说web开发的自我主动性]

正文如下:

看到此文时恍惚回到自己学习网页的时候,那时候只知有编程,不知有设计。各个论坛大部分时候讨论的也是如何用Frame 实现页面的分区,如何做出圆角,以及写一大段 javascript代码或者做个 flash 只为让页面看起来更眩一点。后来 css1.0, 2.0陆续出现,html 4.0 4.1 以及如今的 html 5也逐渐淘汰掉了表现样式的标签。视觉传达思想开始陆续进入程猿与产品经理的视线,从网页到现在的APP,经历过野蛮生长阶段后,只有那些功能与视觉传达同样优秀的产品才能笑到最后。

2007 年苹果给业界带来了耳目一新的感觉,之后无数 APP展现了几乎无限的让人惊艳的新概念,但是,不是每一个新奇的想法都能被称作设计。设计师需要经过严格训练,才能把想法转化为最终的设计,而在整个转化过程中,无数的想法是经不起仔细推敲的。设计师更多的时候在观察生活,观察自然,灵感不是随时就有,但是一个经过严格训练的设计师可以把普通的生活细节经过加工融入设计,最终打造出合格甚至优秀的产品。

本文作者 Pasquale D'Silva 是 Elepath的一位交互设计师兼产品设计师,在本文中,他从交互的角度阐释了优秀的设计应该具有的一些品质,或者说,优秀的产品该如何实现与用户的自然沟通。

不得不说,有太多程序猿或者美工(注意,是美工,真正的设计师不会这么干)误把技术当艺术、把漂亮当设计了,真正重要的交互部分反而被忽略,你可以看看,一大批的产品都是近乎静态的,许多操作诡异至极,诸如你想添加一个条目到列表里,它就生硬的出现在那;你想删除,它就直接消失。这样的产品经理,你们到底有没有考虑过用户的感受,有没有考虑过产品的感受,这种完全不合逻辑的东西也亏你们做的出。

当然,还有一部分产品是有交互的,但是,悲哀的是,那些交互完全被用作另一种形式的美化,天才知道那些人在想什么。

交互真正革命性的意义在于,它把时间这一魔幻般的属性带入静态的产品之中,通过对动作、速度、显现等等的定义,让产品的操作体现出真实感,使得用户能自然而然的理解每一个动作的含义。不过这不是那些高中时候整天泡妞、看不起书呆子的人能理解的。

一些简单的例子

这些例子的目的是向各位读者介绍动画的精髓,告诉各位读者时间轴和空间对于动画意义。而动画对于交互的意义不言而喻。

例:缓冲效果

以下三个 demo展示了在最传统的动画中,如何通过控制关键帧来控制整个动画的效果。

在这三段 25 帧的动画中,设计师只需要定义第一帧、最后一帧和关键帧(第 13帧),其余 22帧由计算机自动填充,但是,计算机没想像中那么聪明,它只能线性的填充空白帧。优秀的动画师和动作设计师需要花费大量时间来学会如何控制计算机按照自己设计的效果工作。有兴趣的读者可以自己做些实验,本文重点在于阐述概念,所以不着过多笔墨于技术方面。

另一些稍复杂的例子:交互动画所能营造的真实感

这些例子的目的在于告诉设计师们,交互所能代替的一些旧功能以及实现以前所不能做到的功能。

例一 插入元素

以下是三个关于向列表里添加/删除元素的demo,来展示不同的交互动画所产生的效果

Demo 1 没有进行任何加工,既生硬又粗糙,不能给人以任何自然的感觉。

Demo 2添加了一些关键帧使得添加的动作顺畅了很多,这样的动画已经能给用户一些暗示了。

最后一个 demo是最贴合自然状态的,就象我们平时把一本书插入书架一样,需要先腾出空间,然后再插入/取出。

例一最后一个 demo的设计让人一目了然,因为这和生活中的动作完全相似,用户不需要其他提示就知道这样的动作所代表的含义。这样的交互动作在之前的非触摸屏上没有多大用处,但对于如今遍地的
APP 意义重大。

例二 展开/弹出菜单

同样是三个 demo,分别展示不同的展开效果所带来的不一样的感觉。

第一个是最典型的展开样式,但是不具有体验上的一致性,这个动作在现实中并不存在,所以没有办法让用户轻易的明白它的含义。

再观察下第二个,这样的样式是不是给了你更多的信息?

最后一个样式可以使关键内容突出,可以用来表示强调。

切记,不要试图把多种样式放在一个产品/功能中,这样会导致用户不明所以的。

例二后两个 demo的设计可以代替老式导航栏,用户可以很容易记得自己的动作,从而知道自己所处的位置。

当然,所有的例子都不是万金油,需要视情况而使用。放在这里的目的只是让大家明白,干净利落但是逻辑性强的动画对于改善产品体验的作用。

想要更多的了解动画在具体产品中的效果,可以体验下Thinglist,这是我与Kyle Bragger 合作为 Elepath 开发的一款产品。下图是该 APP关于如何加载内容的示范。

动作化界面的设计原则

你明白的,我不能把很具体的产品名字些在这,但是,有些产品的确是走极端了,一种是界面极端漂亮但没有一点交互,另一种是拿交互动画当装饰完全失去交互的本质。所以我列出以下几项原则来定义真正的交互:

一、 动画干净利落

二、 节奏一致、过渡自然

有些人的想法让我很无语,他们从不认为可以添加时间元素到界面中。难道,你们不知道交互能提供更多更有用的信息给用户么,还是你们觉得这样做对你们来说太复杂了?

有些人的想法让我很无语,他们从不认为可以添加时间元素到界面中。难道,你们不知道交互能提供更多更有用的信息给用户么,还是你们觉得这样做对你们来说太复杂了?

起初,这份文档只是用来培训内部员工,后来我们觉得如果公开来讨论可能会更有用,而且我也愿意与更多同行交换意见。如果有兴趣可以在推特@pasql。或者在Branch参与我们的讨论

读者福利:一些值得读或者看的材料(原文有四个链接,但其中两个已经无效,故只取以下两个):

The Animator's Survival Kit by Richard Williams

Prologue - Designing Fictional Interfaces for Iron Man 2

编后语:

我们不要求每个开发人员都变成优秀的产品设计师,也不要变成ui设计师,

关键是在开发中,能站在用户的角度,加入自己的创造,能完善功能节点。


点击阅读本文所属分类的更多文章: 产品设计 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询