编者按:看到此文时恍惚回到自己学习网页的时候,那时候只知有编程,不知有设计。各个论坛大部分时候讨论的也是如何用 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 关于如何加载内容的示范。
动作化界面的设计原则
你明白的,我不能把很具体的产品名字些在这,但是,有些产品的确是走极端了,一种是界面极端漂亮但没有一点交互,另一种是拿交互动画当装饰完全失去交互的本质。所以我列出以下几项原则来定义真正的交互:
一、 动画干净利落
二、 节奏一致、过渡自然
有些人的想法让我很无语,他们从不认为可以添加时间元素到界面中。难道,你们不知道交互能提供更多更有用的信息给用户么,还是你们觉得这样做对你们来说太复杂了?
相关推荐
交互式CAD系统的总体设计 设计交互式CAD系统首先应该具备一个控制系统的主控窗口,就是交互式CAD的界面。主控模块分绘图、编辑、缩放三个子模块。我做的系统虽说主要围绕缩放功能,但也是以绘图模块所绘制的图形来...
为了让业务可以流畅的运行并且给用户一个好的交互体验,我们需要根据业务场景预估达到的并发量等因素,来设计适合自己业务场景的高并发处理方案。在电商相关产品开发的这些年,我有幸的遇到了并发下的各种坑,这一路...
作者给大家分享了产品架构图的设计与画法,架构图将可视化的具象产品和服务,抽象成信息化、模块化、层次结构以及关联关系清晰的架构,并通过不同分层的交互关系、功能模块的组合、数据和信息的流转,来传递产品的...
要不 要请个程序猿和设计狮呢? 下⾯我们来看看⼩程序如何制作。 微信官⽅简易教程 我们先来看看微信官⽹给出的简易教程。 起步基础,注册⼩程序帐号之后,需要安装开发⼯具,然后在官⽅开发⼯具⾥⾯输⼊代码制作。 ...
基于Java+SpringBoot的医疗病历交互系统毕业设计(源码+演示视频+说明文档+数据库).rar 【项目技术】 开发语言:Java 框架:springboot 架构:B/S 数据库:mysql 【演示视频】 https://pan.quark.cn/s/5cda95b17ee0 ...
设计简洁、用户界面友好,符合微信小程序的交互规范,提供良好的用户体验。 用户可以通过微信账号快速登录,无需额外注册,降低了使用门槛,提高了用户的便利性。 提供多种功能模块,包括音乐创作、音乐分享、个人...
SSM项目weixin263微信小程序跑腿平台的设计与实现ssm.zip是一个使用Java语言开发的Web应用,它采用了SSM(Spring Spring MVC MyBatis)框架,并结合了微信小程序前端技术。该系统旨在为用户提供一个便捷的跑腿服务...
使用Spring MVC进行前后端数据交互,采用RESTful风格的API设计,实现与微信小程序的数据传输和交互。 结合MyBatis框架进行数据持久化操作,管理用户信息、明星信息、应援活动等。 明星列表与详情: 用户可以浏览...
VB交互式CAD系统开发与实现(系统+论文+答辩PPT)_计算机毕业设计源代码.rar
VB用VB开发交互式CAD系统(源代码+系统+答辩PPT)_计算机毕业设计源代码.rar
B端产品总体建设流程 业务调研 业务分析框架 整体设计 业务建模 角色与流程设计 交互设计 报表设计 权限设计
用户友好的界面设计,符合微信小程序的交互规范,提供简洁清晰的学习界面。 学生可以通过微信账号快速登录,无需额外注册,减少了登录流程的繁琐性。 提供多种学科分类,如数学、语文、英语等,以及学习计划、考试...
基于微信小程序的互助学习小程序的设计与实现结合SSM框架,旨在为学生提供一个共享学习资源、互助学习的平台,包括问题发布、资源分享、在线答疑等功能。以下是系统的主要特点和功能描述: 微信小程序端: 提供...
用户友好的界面设计,符合微信小程序的交互规范,提供简洁清晰的操作流程。 支持学生通过微信账号快速登录,无需注册独立账号,减少了用户的注册繁琐性。 提供多种二手物品分类,如教材、电子产品、生活用品等,以及...
使用Spring MVC进行前后端数据交互,采用RESTful风格的API设计,提高系统的灵活性和可扩展性。 结合MyBatis框架进行数据持久化操作,管理帖子信息、用户信息、评论信息等,确保数据安全和一致性。 论坛功能: 用户...
该小程序源码项目是个人高分毕业设计项目源码,已获导师指导认可通过,都经过严格调试,确保可以运行!放心下载使用。 基于微信小程序的新闻资讯系统是一个为用户提供各类新闻资讯的平台,利用Spring Boot框架构建...
阅读建议:此资源为开发简化版微信小程序商城,不仅是代码编写实现也更注重内容上的需求分析和方案设计,所以在学习的过程要结合这些内容一起来实践,并调试对应的代码。 免费微信小程序源码wechat商城源码微信小...
使用Spring MVC进行前后端数据交互,采用RESTful风格的API设计,提高系统的灵活性和可扩展性。 结合MyBatis框架进行数据持久化操作,管理商品信息、订单信息、用户信息等,确保数据安全和一致性。 商品浏览与搜索: ...
ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单、方便的编程工具。ASP的网页文件的格式是.asp,现在常用于各种动态网站中。 ASP是一种服务器端脚本编写环境,可以用来...
最新小程序“音乐播放器的设计与实现Ssm.zip”是一款基于SSM(Spring, Spring MVC, MyBatis)框架开发的微信小程序,旨在为用户提供一个简洁、高效的在线音乐播放服务。通过结合微信生态和SSM框架的技术优势,该应用...