-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
用动效创建的可用性:动效中的用户体验宣言 #1725
用动效创建的可用性:动效中的用户体验宣言 #1725
Conversation
来校对啦~ |
@cdpath 好哒 |
|
||
The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?” | ||
下面这段宣言即是我对这个问题的回答-“做为一个 UX 或者 UI 设计师,我怎样才能知道在什么时候,以及在哪里用动效来支持可用性呢?” |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
短破折号-
-> 长破折号—
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“As a UX or UI, designer, how do I know when and where to implement motion to support usability?”
作为一个UX或者UI设计师,在界面中,如何在合适的时间和位置通过动效的使用来支持可用性呢?
3. Four ways that motion supports usability | ||
4. Principles, Techniques, Properties and Values | ||
5. The 12 Principles of UX in Motion | ||
1. 解答 UI 动效的主题——它并不是你的想象 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it’s not what you think
不是你想象的那样
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“...top brands and design consultancies..."
顶级品牌和设计咨询公司
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“After over fifteen years studying motion in user interfaces..."
通过对用户界面动效超过15年的研究,
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“,and they can be stacked and combined synergistically in a myriad of innovative ways.”
同时它们可以以各种创新形式来进行自由组合协作使用。
|
||
As a quick plug, if you want me to speak at your conference or lead an onsite workshop for your team on the exciting topic of motion and usability, go [here](https://uxinmotion.net/workshops-and-speaking/) . If you want to attend a class in your city go [here](https://uxinmotion.net/workshops-and-speaking/#classes) . Finally, if you want me to consult on your project, you can go [here](https://uxinmotion.net/consulting/) . To get added to my list, go [here](http://uxinmotion.net/joinnow) | ||
以上是一个十分简短的介绍,如果你想要我就令人激动的动效主题以及可用性在你的会议上发言或者为你的团队组织一个现场讨论的话,请移步[这里](https://uxinmotion.net/workshops-and-speaking/) 。 如果你想要在你所在城市参加课程,来[这里](https://uxinmotion.net/workshops-and-speaking/#classes) 。最后,如果你想要向我咨询你的项目,可以看看[这里](https://uxinmotion.net/consulting/) 。添加到我的列表,点击[这里](http://uxinmotion.net/joinnow) 。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
plug 这里是「宣传,推广,广告」。不妨理解为「插播一条小广告」。
|
||
Because the topic of motion in user interfaces is mostly understood by designers to be ‘UI Animation’—which it is not — I feel like I need to create a bit of context before we jump into the 12 Principles. | ||
由于用户界面中动效的概念往往被设计师们与“UI 动画”画上等号——然而这是两回事——我觉得我有必要在12条法则之前插入一段情境。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
被动语态较生硬,转为主动语态试试,「由于设计师往往认为用户界面中的动效就是 UI 动画」。
|
||
‘UI Animation’ is typically thought of by designers as something that makes the user experience more delightful, but overall doesn’t add much value. Thus, UI Animation is often treated like the red-headed stepchild of UX (apologies to red-headed stepchildren everywhere). If at all, it usually comes at the end, as a final lipstick pass. | ||
“UI 动效”往往被设计师们认为是让用户体验更佳愉悦的点缀,但总体上并没有增加什么价值。所以呢,UI 动效总是被看作 UX 的red-headed stepchild(apologies to red-headed stepchildren everywhere)。就算有,也是排在最末位的,作为 a final lipstick pass。(这两处没想到很好的翻译——译者注) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
red-headed stepchild 是非婚生的继子,也就是说姥姥不疼舅舅不爱...
lipstick pass 我也不知道是什么鬼,不过可以推断出是「无足轻重的东西」。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“‘UI Animation’ is typically thought of by designers as something that makes the user experience more delightful, ”
设计师们通常会觉得UI动效的使用可以让用户体验显得更加生动愉悦,
|
||
What most designers think of as ‘UI Animation’ is in fact the execution of a higher modality of design: the temporal behavior of interface objects during realtime and non-realtime events. | ||
大多数设计师认为的“UI 动效”实际上也是设计的更高形式的执行:时效和非时效性事件中界面元素的时序表现。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the execution of a higher modality of design
是不是可以简单理解为「高级设计手法」。
|
||
These distinctions will give us leverage as we continue our journey into the world of the 12 Principles of UX in Motion. | ||
这些差异将为我们继续进入 UX 动效12法则的世界提供更多便利。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「了解这些差异会帮助我们理解 UX 动效的 12 法则」
校对认领 |
@osirism 好哒 |
|
||
#### Expectation #### | ||
期望分为两大领域——用户如何感知对象**是什么**,以及它表现出了**何种行为**。另一种说法是,作为设计师,我们想要将用户期待与用户体验间的差异缩到最小。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
“Another way of saying this is that as designers, we want to minimize the gap between what the user expects, and what they experience.”
换句话说,作为设计师,我们期望尽可能缩小用户期望和用户体验之间的差距。
我……这两天……尽快……改出来……… |
### The 12 Principles of UX in Motion ### | ||
|
||
Easing and Offset & Delay relate to *timing*. Parenting relates to *object relationship*. Transformation, Value Change, Masking, Overlay, and Cloning all relate to *object continuity*. Parallax relate to *temporal hierarchy*. Obscuration, Dimensionality and Dolly & Zoom both relate to *spatial continuity*. | ||
舒缓、偏移和延迟都和**时间**有关。教育涉及到的**对象关系**。变换、值变化、掩蔽、覆盖和克隆都与**对象一致性**有关。视差与**时态层次**有关。模糊,变焦(这三个词的含义不确定——译者注)都与**空间一致性**有关。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Easing = 缓动
Parenting = 父子关系
Transformation = 变形
Masking = 遮罩
Cloning = 生成
Obscuration = 蒙层
Dimensionality = 多维化
Dolly & Zoom = 镜头平移与缩放
|
||
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1000/1*FQwVeyJ8pxngEGAxruGW-A.jpeg"> | ||
|
||
#### **Principle 1: Easing** #### | ||
#### **原理1:舒缓** #### |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Easing = 缓动
校对已完成~ |
@sqrthree 我改好啦~ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
文章这么长真的是辛苦了~ 还有一丢丢小问题辛苦小姐姐再调整下哈。
|
||
**Techniques** can be thought of as the various and unlimited executions of Principles and/or combination of Principles. I think of technique as akin to ‘style.’ | ||
**特性**则是特定的对象因素来将技术转化为现实。这些包括(但不限于)位置,不透明度,比例,旋转角度,定位点,色彩,笔画宽度,形状,等等。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『这些包括(但不限于)位置,不透明度,比例,旋转角度,定位点,色彩,笔画宽度,形状,等等。』=>『这些包括(但不限于)位置、不透明度、比例、旋转角度、定位点、色彩、笔画宽度、形状等等。』
|
||
Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making. | ||
### 准则,技术,特性和值 ### |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『准则,技术,特性和值』=>『准则、技术、特性和值』
|
||
**Values** are the actual numeric property values that vary over time to create what we call ‘animation.’ | ||
所以在这里先停一下(再往前说一点),我们可以说一个假想的动画参考是利用遮蔽原理(?)和“毛玻璃”技术:模糊 25px,不透明度 70%。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个问号是不确定吗?可以和两位校对者或者在群里商量一下哈。如果没有太合适的�中文的话就在括号里保留英文关键词就好。
|
||
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*7rRMvWTms2t7FnR0kyJN3g.gif"> | ||
|
||
Offset & Delay is the second of only two UX in Motion Principles that is influenced by Disney’s Animation Principles, in this case from ‘[Follow Through and Overlapping Action](https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_Through_and_Overlapping_Action).’ | ||
分隔和延迟是 UI 动画两大原则中的第二个,它深受迪士尼动画原则的影响,in this case from “[动作跟随与重叠](https://en.wikipedia.org/wiki/12_basic_principles_of_animation#Follow_Through_and_Overlapping_Action)。” |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『in this case from』可以翻译一下的啦
|
||
To better show you how this works, I’ll show you an example that breaks the Offset & Delay Principle. | ||
为了更好地给你展示它是如何工作的,我会给你举一个没有依照分隔与延迟原则的例子。 | ||
|
||
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*DJHXB3kDHesSwHxLYeJyFg.gif"> | ||
|
||
Credit: [Jordi Verdu](https://dribbble.com/jordiverdu) ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
后面多了半个括号 😂
|
||
Transformation has the effect of ‘chunking’ cognitively separate key moments in the user experience into a seamless and continuous series of events. This seamlessness results in better user awareness, retention, and followthrough. | ||
“模块”的变化产生的影响适当地将用户体验中的关键时间点分离成为一个无缝和连续的事件序列。这种无缝的体验会带来更好的用户感知,记忆,以及后续行为。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『用户感知,记忆,以及后续行为』=>『用户感知,记忆,以及后续行为』
|
||
The numbers and values are representations of things that are happening *in reality.* That reality could be time, income, game scores, business metrics, fitness tracking, etc. What we are distinguishing through motion is that the ‘value subject’ is dynamic and the values are reflecting something from that dynamic value set. | ||
数字和值都是**事实**发生的事件的表征。这个事实可以是时间,收入,游戏分数,商业指标,运动跟踪等等。我们通过动画来区分的是动态的“值的主体”,以及那些反映了动态值的集合的某些东西。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『时间,收入,游戏分数,商业指标,运动跟踪』=>『时间、收入、游戏分数、商业指标、运动跟踪』
|
||
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XhtrzHD5PBpHKuhoJqB7fQ.gif"> | ||
|
||
When new objects are created in current scenes (and from current objects), it is important to narratively account for their appearance. In this manifesto, I argue forcefully for the importance of creating a narrative framework for object origin and departure. Simple opacity fades tend to not achieve this result. Masking, Cloning, and Dimensionality are three usability based approaches to produce strong narratives. | ||
在当前场景中创建新的对象时(来自当前对象),外观上的 narratively account 显得尤为重要。在这份宣言中,我强调了创建一个叙事框架的对象起源和出发的重要性。仅仅是对不同明度的调整达不到这种效果。遮罩,生成,以及数值的变化是三种基于可用性来产生强烈叙事性的方法。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『遮罩,生成,以及数值的变化』=>『遮罩、生成、以及数值的变化』
|
||
这份宣言离不开来自亚马逊的 [Kateryna Sitner](https://www.linkedin.com/in/katerynasitner/) 慷慨耐心的贡献和不断的反馈——非常感谢!特别致谢 [Alex Chang](https://www.linkedin.com/in/alexychang/),他的头脑风暴和坚持给了我莫大的支持,感谢来自微软的 [Bryan Mamaril](http://ficuscreative.com/) 的一双慧眼,感谢 Jeremey Hanson 的笔记编辑整理,感谢疯狂的 UI 动效大师 [Eric Braff](https://www.linkedin.com/in/eric-braff-276504b),[Artefact](http://artefactgroup.com/) 的 Rob Girling 的多年信任,[Matt Silverman](http://www.swordfish-sf.com/) 在 After Effects 会议上鼓动人心的讲话,良心室友 [Bradley Munkowitz](http://gmunk.com/) 为我带来 UI 设计的灵感,[Pasquale D’Silva](https://medium.com/@pasql) 关于动效的令人吃惊的文章,[Rebecca Ussai Henderson](https://medium.freecodecamp.com/@becca_u) for her awesome article on UI Choreography, [Adrian Zumbrunnen](https://medium.com/@azumbrunnen) 在 UI 编排领域的佳作,[Wayne Greenfield](http://www.seattlekombucha.com/) 还有 [Christian Brodin](http://www.theapartmentinvestor.com/author/christian-brodin/) 不断推动我进步的策划兄弟。还有你们,不断创造灵性 gif 的成千上万的 UI 动画师们。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
『 for her awesome article on UI Choreography』好像是漏翻译了。
@@ -1,242 +1,241 @@ | |||
> * 原文地址:[Creating Usability with Motion: The UX in Motion Manifesto](https://medium.com/@ux_in_motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc) | |||
> * 原文作者:[Issara Willenskomer](https://medium.com/@ux_in_motion?source=post_header_lockup) | |||
> * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner) | |||
> * 译者: | |||
> * 译者:[Ruixi](https://github.com/ruixi) | |||
> * 校对者: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
小姐姐,校对者信息又丢了。
|
||
<img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/800/1*XhtrzHD5PBpHKuhoJqB7fQ.gif"> | ||
|
||
When new objects are created in current scenes (and from current objects), it is important to narratively account for their appearance. In this manifesto, I argue forcefully for the importance of creating a narrative framework for object origin and departure. Simple opacity fades tend to not achieve this result. Masking, Cloning, and Dimensionality are three usability based approaches to produce strong narratives. | ||
在当前场景中创建新的对象时(来自当前对象),外观上的 narratively account 显得尤为重要。在这份宣言中,我强调了创建一个叙事框架的对象起源和出发的重要性。仅仅是对不同明度的调整达不到这种效果。遮罩,生成,以及数值的变化是三种基于可用性来产生强烈叙事性的方法。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it is important to narratively account for their appearance
叙事性地解释其外观尤为重要。
account for 是「解释,说明」
已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接,方便及时添加积分哟。 |
No description provided.