资讯频道 → Web前端
阅读更多

17顶
0踩

Web前端

转载新闻 写给程序猿们的交互设计

2013-05-21 16:19 by 副主编 WnouM 评论(4) 有14885人浏览
设计 交互 UI 程序员 编程


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

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

Via medium.com & 36kr
  • 大小: 174.2 KB
  • 大小: 25.2 KB
  • 大小: 19.7 KB
  • 大小: 23.3 KB
  • 大小: 4.6 KB
  • 大小: 19 KB
  • 大小: 28.3 KB
  • 大小: 139.5 KB
  • 大小: 51.7 KB
  • 大小: 127.8 KB
  • 大小: 388.7 KB
来自: 36氪
17
顶
0
踩
评论 共 4 条 请登录后发表评论
4 楼 lzyboy 2013-05-27 15:57
文章写的很好。。受教了。。
3 楼 bug-x 2013-05-24 09:42
很受启发，谢谢！
2 楼 damoqiongqiu 2013-05-22 12:23
不错，很好
1 楼 sky_lichao 2013-05-22 09:50
很不错，很受启发，逐步向这靠拢

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 程序设计也要懂点心理学

    《设计师要懂心理学》 无论你是程序猿、前端、需求分析师。都需要换位思考都需要懂心理学。 但是高深的心理学 学起来费时费力。我们这门课程选材贴近软件，贴近交互式设计。对你的开发设计工作更有帮助。   让...

  • 交互设计与计算机编程,写给程序猿们的交互设计

    编者按：看到此文时恍惚回到自己学习网页的时候，那时候只知有编程，不知有设计。各个论坛大部分时候讨论的也是如何用 Frame 实现页面的分区，如何做出圆角，以及写一大段 ...视觉传达思想开始陆续进入程序猿与产品...

  • 写给程序猿们的交互设计 - 转

    http://kb.cnblogs.com/page/178458/ 转载于:https://www.cnblogs.com/mrdo/p/3237950.html

  • 程序猿必看交互设计

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

  • 软件概要设计如何写（文档恐惧症的程序猿必读）

    而概要设计、详细设计属于软件开发的阶段 按照传统软件工程的软件过程,区别如下: 1.需求分析--产生 软件功能规格说明书,需要确定用户对软件的需求,要作到明确、无歧义。不涉及具体实现方法。用户能看得明白，开发...

  • 写给程序猿的把妹指南

    写给程序猿的把妹指南:概述篇 每个女人都是一套系统 每个女人，都是一套复杂的系统，只不过，这套系统不是由程序员创造的，而是由大自然进化而成的。大部分程序猿不太懂得如何泡妞，是因为你不熟悉女人这套系统，...

  • 强烈安利一波，程序猿学习网站

    菜鸟，几年积累下来的一些程序猿学习网站，安利一波！！！ 一、IT技术社区 1.CSDN 网址：https://www.csdn.net/ CSDN是全球知名中文IT技术交流平台，创建于1999年,包含原创博客、精品问答、职业培训、技术论坛...

  • 设计模式--程序猿必备面向对象设计原则

    最少知识原则LKP(Least Knowledge Principle)或称 迪米特法则（LoD） 这个原则用来指导我们在设计系统的时候，应该尽量减少对象之间的交互，对象只和自己的朋友谈话，也就是只和自己的朋友交互，从而松散类之间的...

  • 新技术加持下前端程序猿的未来在哪里？

    随着新技术的不断涌现，前端开发工程师的工作方式及内容也在不断演进。未来，前端开发工程师需要持续学习和更新自己的技能，以跟进技术的持续发展。...更加丰富的特效和交互体验。随着WebGLCanvasSVG。

  • 交互设计软件 html,5款优秀的交互动效设计软件推荐，让你用到爽

    今天学堂君给大家整理出了10款优秀的动效设计软件。你看哪些你听过或者用过呢?第一款动效设计软件:Adobe After EffectsAE这个软件我想大家都知道，火得一塌糊涂，如果没猜错的话，它目前属于设计师学动效的首选。...

  • IOS应用的产品设计、交互设计理念断想

    (术）IOS应用的产品设计、交互设计理念断想  最近辞职在家，无意之酝酿,多有开发感触，故想做道法术器四文《(道)良性成瘾开发习惯养成策略》《(法)平衡出最优的team生产力组合》《(术)产品、交互设计...

  • 西门子S7-200SMART与V20变频器基于Modbus通讯的稳定控制及应用

    内容概要：本文详细介绍了西门子S7-200SMART PLC与V20变频器通过Modbus RTU协议进行通信的具体方法和技术要点。首先阐述了硬件连接方式，强调了正确的接线和参数设置对于稳定通信的重要性。接着深入讲解了PLC程序的设计，包括Modbus主站初始化、启停控制、频率设定以及断电自恢复等功能模块的实现。此外还分享了一些实用的经验技巧，如避免通讯冲突、处理浮点数转换等问题。最后提到该方案已在实际生产环境中成功应用，表现出良好的稳定性和可靠性。 适合人群：从事自动化控制系统集成的技术人员，特别是熟悉西门子PLC和变频器产品的工程师。 使用场景及目标：适用于需要将旧型号PLC与变频器进行高效集成的企业，在不影响原有设备的基础上提升系统的智能化水平，减少人工干预，提高生产效率。 其他说明：文中提供了大量具体的编程实例和参数配置指南，有助于读者快速掌握相关技能并应用于实际工作中。同时提醒读者注意一些常见的错误及其解决方案，帮助规避潜在的风险。

  • 西门子PLC电机控制程序：封装好的功能块助力高效工业自动化

    内容概要：本文详细介绍了西门子PLC中用于电机控制的封装功能块，涵盖正转、反转、变频控制等多种功能。通过简化底层代码，提高编程效率和系统可靠性。文章展示了如何使用功能块实现正转、反转、变频控制、模拟量处理、故障处理等功能，并结合用户自定义数据类型（UDT）和多重背景技术，实现对大量电机的高效管理。此外，还提供了具体的代码示例，帮助读者更好地理解和应用这些功能块。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是那些需要频繁处理电机控制任务的人群。 使用场景及目标：适用于需要简化电机控制编程、提高系统可靠性和可维护性的工业环境。主要目标是减少重复编码的工作量，提升开发效率，确保系统稳定运行。 其他说明：文中提供的代码示例和方法不仅有助于初学者快速入门，也为有经验的工程师提供了优化现有系统的思路。通过使用这些功能块，可以在短时间内完成复杂电机控制系统的搭建和调试。

  • 腐败感知指数（CPI）数据和各种治理指标数据集

    全球腐败感知数据（2000-2023）——3000行 33个指标 关于数据集 该数据集包含3000行和33列，涵盖了2000年至2023年的腐败感知指数（CPI）数据和各种治理指标。它包括国家排名、分数和其他指标，如公共部门腐败、司法腐败、贿赂指数、商业道德、民主指数、法治、政府效率、经济指标和人类发展指数。 这些数据可用于： 腐败趋势分析 腐败对GDP、人类发展指数和治理的影响 跨国比较 数据可视化和机器学习模型 该数据集对研究人员、数据分析师、政策制定者和对研究全球腐败趋势非常有用。

  • 朔州市-平鲁区-街道行政区划_140603_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

  • 脑机接口基于贝叶斯优化的FBCCA参数自动调优系统设计与实现：EEG数据处理及优化流程详解

    内容概要：本文档详细介绍了将贝叶斯优化应用于FBCCA（滤波器组公共空间模式）参数调整的完整解决方案，包括代码实现和优化流程。首先，通过MNE库加载并预处理EEG数据，进行7-30Hz的预滤波处理，提取相关事件片段。接着，定义了FBCABayesianOptimizer类，该类包含创建动态滤波器组、获取模型参数以及定义优化目标函数的方法。其中，参数空间由离散和连续参数组成，涵盖了滤波器数量、CSP组件数、起始频率、带宽、交叠率等，并通过Optuna库进行多维搜索。优化过程中采用5折交叉验证机制，同时引入智能早停策略以提高效率。最后，提供了优化结果的可视化工具，如优化轨迹图、参数重要性图和滤波器组配置图，帮助用户更好地理解和分析优化过程。 适合人群：具有一定编程基础，尤其是对机器学习、脑电数据分析及贝叶斯优化感兴趣的科研人员和技术开发者。 使用场景及目标：①通过动态滤波器组生成算法，捕捉频段间的过渡特征；②利用混合参数空间设计，探索不同参数组合的效果；③借助高效交叉验证机制和智能早停策略，提高优化效率；④通过可视化工具，直观展示优化过程和结果。 阅读建议：此资源不仅展示了完整的代码实现，还深入探讨了FBCCA参数调整的理论基础和实际应用。建议读者在学习过程中结合理论知识与代码实践，逐步理解每个步骤的原理，并尝试调整参数以观察不同设置对优化效果的影响。同时，可根据自身硬件条件，考虑扩展建议中的GPU加速、分布式优化和在线学习等高级特性。

  • 临汾市-古县-街道行政区划_141025_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

  • 邯郸市-成安县--街道行政区划_130424_Shp-wgs84坐标系.rar

    街道级行政区划shp数据，wgs84坐标系，直接使用。

  • 临汾市-大宁县-街道行政区划_141030_Shp数据-wgs84坐标系.rar

    街道级行政区划shp矢量数据，wgs84坐标系，下载直接使用

Global site tag (gtag.js) - Google Analytics