双11干货!写给运营视觉设计师的交互小技巧

58UXD – 马世光:双十一就要来了,本文为你分享两套运营设计利器。运营视觉设计师不同于UI和交互设计师,运营视觉设计师的工作要求他们更加注重视觉丰富性的表现,难免会淡化交互逻辑层面的思考,优秀的体验需要视觉与交互兼顾,今天我就为运营视觉同胞get两点交互小技巧,方便我们的产出既能视觉爆炸也能体验棒棒!

双11干货!写给运营视觉设计师的交互小技巧

58UXD – 马世光:双十一就要来了,本文为你分享两套运营设计利器。

运营视觉设计师不同于UI和交互设计师,运营视觉设计师的工作要求他们更加注重视觉丰富性的表现,难免会淡化交互逻辑层面的思考,优秀的体验需要视觉与交互兼顾,今天我就为运营视觉同胞get两点交互小技巧,方便我们的产出既能视觉爆炸也能体验棒棒!

触发器

触发器,顾名思义就是任何能够启动交互的东西,通常分为两类:手动触发器和系统触发器。视觉设计主要打交道的就是手动触发器。

双11干货!写给运营视觉设计师的交互小技巧

△  58icon就是一个触发器

那么运营视觉的同学就会说,手动触发器不就是按钮么。没错!但是小按钮也会有大学问,按钮做不好,用户体验自然就上不来。

做好一个按钮,首先,尽可能给用户最少的选项,如果它看起来像一个按钮、就应该像一个按钮一样能被按下,不要破坏视觉的使用情境。

双11干货!写给运营视觉设计师的交互小技巧

画面中首屏除了头图展示外,把专题中重要的两个入口也放在首屏,结合中秋风格来进行设计,即可吸引点击,又不会破坏使用情境。

其次,我们的按钮要设计多吸引眼球呢?最简单的原则就是用的越多(越重要)的按钮就要越引人注目。

双11干货!写给运营视觉设计师的交互小技巧

专题中紧接头图的三个区域占整个专题入口流量的70%,天猫采用大数据推送的方式为用户推送最感兴趣的商品,将「引人瞩目」的形式从视觉表现层面上升为心理需求层面。

我有必要解释一下引人注目的按钮应该是个什么样子:

我们在主动寻找时,会盯住某个东西或区域,希望能从中找到满足自己需要的内容。这时我们的视野会变窄,达到1度或者只有平时视野的1%,这么窄的视野堪比聚光灯和放大镜。此时,我们专注于辨别物体,即对环境中的物体进行识别和归类。我们在辨别物体时,眼睛会寻找熟悉的小几何,就是正方形,三角形,立方体,圆柱体等简单的几何形体,我们的大脑把他们组合起来就能辨别出物体。

既然人眼以小几何体为基本识别单位,那么一些图标形触发器就特别适合设计成某种几何形状。一般来说,只具备一种特征的目标比具备多种特征的目标更容易被找到。因此,要尽量保证触发器看起来简单,尤其是在复杂拥挤的环境下。

双11干货!写给运营视觉设计师的交互小技巧

当这组内容足够丰富时,只要我们采用简单小几何体形式,大脑便会很容易的发现右下角的按钮。

当然我们还有更加吸引人的按钮,比如,移动的按钮。

双11干货!写给运营视觉设计师的交互小技巧

购买按钮虽然没有采用动态形式,但是上面的小小气泡框却十足的吸引了我们的眼球,人类对运动物体要敏感的多。

按钮除了控件部分,标签(文案)也是提升按钮点击的一个关键要素,相信我,如果自己看着按钮里面的文案不爽(不吸引人),自己来条推动产品去优化吧!

双11干货!写给运营视觉设计师的交互小技巧

旧版本中按钮的文案是电话号码,吸引点击的作用并不强,在更换了标签文案后按钮点击率上升了20%

反馈

反馈,简单说就是告诉用户在按下按钮之后会出现什么结果,视觉设计师的工作是设计反馈的形式,当然,反馈除了视觉还有听觉以及触觉的反馈。

当我开始设计一个反馈页面的时候,我们应该注意什么呢,好的反馈又是什么呢?

首先,别让反馈给用户造成压力,反馈应由需求来推动。用户需要知道什么,什么时候知道,做好这些用户体验就自然上升一个台阶

双11干货!写给运营视觉设计师的交互小技巧

△  微信输入语音时,出现浮层动画提示用户的语音输入是有效的

其次,我们应该使用最少的反馈来传达最多的信息,最好的反馈永远不会高深莫测,永远记住少即是多。

双11干货!写给运营视觉设计师的交互小技巧

当用户操作后,界面操作前的状态和操作后的状态不一致。通过这个不一致,给用户反馈的操作得到了提交。

当我们在做视觉反馈的时候,不要显示多余的视觉反馈、任何反馈都必须力求清晰,视觉反馈应出现在用户操作的附近或原地。

当然,如果必须把视觉反馈放在远离视觉焦点的地方,我们可以通过动效来吸引用户的吸引力。

其实我们发现一个App的性格多是通过反馈来体现的,我们可以通过人性化的设计来增加App的情感。

双11干货!写给运营视觉设计师的交互小技巧

△  58帮帮的形象很好的增强了App的人性化和情感

总结

相信视觉设计师已经对触发器和反馈的基本原理有所了解,在实践工作中要活学活用。以上是我get到的针对视觉的小技巧,希望对大家有所启发帮助,谢谢。

欢迎关注58UXD 的公众号:

双11干货!写给运营视觉设计师的交互小技巧

「让你的设计更温暖」

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34414/

(0)
震天下震天下
上一篇 2017-10-31
下一篇 2017-11-01

相关推荐

  • 交互设计的这十大套路,你懂多少?

    在产品设计领域,交互设计同产品经理一样,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心,努力挖掘用户需求,创造和建立人与产品及服务之间的关系。 为了达到这一目的,在交互设计工作中,设计师所要…

    2017-08-01
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 38个界面设计技巧

    1 尽量使用单列而不是多列布局单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2014-10-28
  • 交互设计之对象属性文档

    对象属性文档是描述一个产品的多个角色的文档,通过这些文档后台程序员可以更好、更方便的设计你制定的规则,例如:字段的限制、状态和权限、展示顺序...一.对象属性文档需要写明什么:1.字段的限制:字段是构成后台的最基础单位,他可以表示一个人的name、也可以是一大段文本。我们在设计字段时,绝大部分时候会涉及到限制,一般构成限制的是:字段长度、字段个数、字段构成(例如:金额--货币数量+美元)、字段来源(例如:外来接口、用户上传)、重要程度、...

    2018-03-27
  • 一个完整的交互设计流程是怎样的?

    看到这个图,其实很清楚了,研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么,一个完整的交互设计流程是怎样的呢? 首先,我们先来认识一下产品的五个用户体验的要素     用…

    2015-11-19
  • 用AB测试改进用户体验设计,做出正确决策

    本文转译自TubikStudio,全文有删减。设计师们每天都在面对一些难以抉择的情况。面对这样的问题,有经验的团队会对两者进行测试,来确定哪种方案最好,其中一种流行的方法是AB测试。AB测试将用户分成两组,每组都显示不同的版本,一半看到A版本,另一半看到B版本。AB两个选项的差异根据产品经理来决定,可以是颜色差异,也可以是位置差异等。两个版本的有效性可以用浏览量、点击次数或其他数据来衡量。对于设计师来说,这是分析目标受众群体行为模式和特...

    2018-02-24
  • 实例分析:室内地图交互体验分析

    因为做室内定位项目,需要涉及到室内地图相关功能,故分析、探寻高德地图、百度地图APP的室内地图设计逻辑,以为项目借鉴。本文从室内地图展示,室内地图与导航栏的对应两方面来分析对比,并针对部分内容提出相关建议。

    2017-05-09
  • 设计实战|城市指南网站着陆页是这样设计出来的

    今天咱们要聊的是“城市指南”(Big City Guide)网站这一概念设计案例研究。

    2017-06-06
  • APP切图命名规范:介绍一种通用的命名规则

    今天菜心要分享的内容是关于切图命名的规范,由于最近正在总结这一部分内容,所以拿出来和大家一起分享探讨一下。组件_类别_功能_状态@2x.png模块_类别_功能_状态@2x.png

    2017-05-10
  • 用超多案例,帮你避免交互设计中的「刻板印象 」

    一直在看奇葩说,听到很多次的一个词叫“刻板印象 ”。而人之所以有“刻板印象 ”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象 ”。毋庸置疑,使用“刻板印象”(经验)能无形中提升工作效率;减少沟通和开发测试成本;也不会太多的打破用户习惯。然而,它也会带来负面影响,让我们对真实世界失去客观判断。

    2017-06-21