`
吃饱了就饿
  • 浏览: 68721 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

写给程序猿们的交互设计(转)

阅读更多

写给程序猿们的交互设计

编者按:看到此文时恍惚回到自己学习网页的时候,那时候只知有编程,不知有设计。各个论坛大部分时候讨论的也是如何用 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

分享到:
评论

相关推荐

    一只程序猿告白的网页(转)

    7. **交互设计**:告白网页可能包含了动态的交互元素,如响应式设计,根据用户的操作给出相应的反馈,增加情感的传递效果。 8. **数据可视化**:可能运用到了数据可视化技术,比如用图表、动画等形式展示告白的信息...

    程序猿的告白

    《程序猿的告白》这个主题,显然与程序员的生活、情感表达以及可能涉及的技术工具有关。在这个场景中,"程序猿"是程序员的自嘲式昵称,它揭示了这个群体在工作之余,也有着自己的情感世界。下面将详细讨论相关知识点...

    程序猿表白代码

    "程序猿表白代码"是一个集合了各种创意和技术的项目,它展示了编程语言如何用于创造情感交流的媒介。这个压缩包包含了不同的文件,如网页、小程序等,旨在帮助程序员们制作出富有心意的表白工具。 首先,`rose....

    地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记04 .源码

    Cocos2d-x,作为一款跨平台的游戏开发框架,深受广大程序猿们的喜爱。它支持使用C++编写代码,同时提供了Lua和JavaScript的绑定,使得游戏开发既高效又灵活。本篇将深入探讨"地球人己阻止不了程序猿们学习cocos2d-x...

    程序猿送给女友的的3d相册.zip

    标题中的“程序猿送给女友的3d相册”暗示了这是一个程序员为他的女朋友制作的特殊礼物,一个3D效果的在线相册。这个项目可能是利用编程技术和Web开发技能实现的,旨在提供一种新颖的方式来展示照片,增加互动性和...

    如何做个优秀的程序猿

    人机交互设计和业务流程理解是必不可少的。 2. 软件工程实践:学习并实践软件工程方法,包括需求分析、设计、编码、测试和维护。理解不同开发模型(如瀑布、敏捷等)的优缺点,并根据项目特点选择合适的模型。 3. ...

    程序猿的表白神器

    【程序猿的表白神器】是一种巧妙地利用编程技术来表达情感的方式,特别是在浪漫的情境下,为程序员提供了一种独特而有趣的方式来传达爱意。在这个项目中,主要使用了JavaScript库jQuery来创建吸引人的动画效果,使...

    程序猿表白专用html5网页

    作为一款专为“程序猿”(程序员)表白设计的HTML5网页,它可能包含了一系列利用HTML5特性的创意元素,旨在展示编程世界的浪漫与趣味。 首先,HTML5的新语义元素如`<header>`、`<nav>`、`<article>`、`<section>`、...

    程序猿心形表白源码

    "程序猿心形表白源码"就是一个很好的例子,它利用JavaScript(js)这一强大的前端编程语言,为程序员们提供了制作浪漫表白页面的工具。接下来,我们将深入探讨这个主题,了解如何通过JavaScript实现这种创意的表达。...

    动画爱心 程序猿的浪漫

    "动画爱心 程序猿的浪漫"这个主题揭示了一个程序员通过代码创造的特别方式来表达情感,尤其是在情人节或者其他特殊场合,他们可能会用编程技能来制作一份独特的礼物——一个动态的爱心动画。这种做法不仅展现了技术...

    html程序猿网站模板

     网站模板是预先设计好的网站页面布局和样式,使用模板可以省去从零开始设计和编码的过程,大大缩短了网站建设的时间。开发人员只需根据模板进行相应的修改和调整,便可以快速创建出具备基本功能和美观外观的网站。...

    Android项目源码安卓程序猿面试复习APP

    【Android项目源码安卓程序猿面试复习APP】是一款专为准备Android程序员面试的开发者设计的应用。这个项目源码提供了一个全面的学习平台,帮助开发者巩固和提升Android开发技能,以更好地应对各种面试挑战。通过深入...

    java程序猿面试宝典百问

    《Java程序猿面试宝典百问》是一本专为Java程序员设计的面试指南,旨在帮助求职者全面了解并掌握Java领域的核心知识,从而在面试中展现出扎实的技能和深厚的理论基础。这本书涵盖了从基础语法、面向对象编程、集合...

    程序猿炫酷个人介绍HTML源码.zip

    《程序猿炫酷个人介绍HTML源码》是一个专为程序员设计的、用于展示个人技能和经验的网页模板。这个源码充分利用了HTML5的新特性,结合CSS3的动画效果,打造出一个充满科技感且交互性强的个人简历页面。在Web开发领域...

    Android-猿匹配——国内首个程序猿非严肃婚恋交友应用让我们一言不合就来场匹配吧

    "猿匹配"作为一个程序猿非严肃婚恋交友应用,其背后的技术实现是Android开发的典型应用案例。这个应用不仅涉及到基本的用户界面设计、数据存储与同步,还可能包括社交功能、地理位置服务以及个性化推荐算法等复杂...

    小游戏“程序猿大战产品狗”源代码,参考(抄袭)了浅墨大神的代码“勇士斗恶龙”

    在“程序猿大战产品狗”中,开发者可能自定义了一套事件系统来响应玩家的交互。 游戏中的图形渲染可能借助于OpenGL、SDL2等图形库。这些库提供了绘制2D图形、处理图像和动画的功能。虽然“程序猿大战产品狗”是一个...

    程序猿用代码追喜欢的小姐姐.zip

    本资源“程序猿用代码追喜欢的小姐姐.zip”就是这样一个创新的应用,旨在帮助程序员们利用自己的技能来创造个性化的表白方式。在这个压缩包中,包含了一个名为“表白模板”的文件,它提供了一个使用JavaScript、CSS...

    基于HTML5的程序猿表白专用动画.zip

    这个"基于HTML5的程序猿表白专用动画.zip"压缩包文件显然包含了一个特别设计的HTML5动画,旨在帮助程序员们在情人节这一天向他们的心上人表达情感。 HTML5的核心优势在于其对多媒体的支持,例如音频、视频、图像和...

    程序猿专属_表白,祝福,许愿,惊喜 html源码

    在本资源中,"程序猿专属_表白,祝福,许愿,惊喜 html源码"是一个特别为程序员设计的浪漫工具,利用HTML的灵活性和交互性,为心爱的人创造一个独特的表白、祝福或节日惊喜。 1. **HTML结构基础** HTML文档由一...

    HTML5+SVG+Lottie.js实现万圣节焦躁的程序猿秒变狼人动画效果源码.zip

    在实际应用中,开发者可能首先在Adobe After Effects中设计和动画化转换过程,包括程序猿的表情变化、身体形态的扭曲等细节。然后,使用Bodymovin插件将这个动画导出为JSON文件。JSON文件包含了所有关键帧、形状和...

Global site tag (gtag.js) - Google Analytics