首页

APP注册流程及视觉优化

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

本次分享阐述了我关于理财APP注册流程的视觉及结构上的改进,分为理论阐述、竞品分析、改版实践三个部分。

主要向大家讲解一下当一个UI设计师在做UI设计改版的时候,他在思考什么,他做出这一步设计的原因是什么。同时在大家的讨论反馈中,我作为一个UI设计师,也能更好的明白产品看待一个界面设计的角度。

一、关于注册

一旦用户体验时涉及到资金进出,留言互动以及定制个人信息等内容,那么就会触发注册或者登录环节。

目前,手机已经成了移动互联网时代的天然身份证,而且可以实时验证。这也是互联网金融领域基本都采用的注册方法。

手机注册都是通过手机短信获得验证码,注册效率极高。好的注册页,就是“简约而不简单”,做到体验流畅又抓住了核心。

二、设计中“5w+1H”原则的实践

1.WHAT(目标):

石投金融移动端注册流程+视觉的优化

现版本石投金融移动端的注册截图

其实光从视觉上,我们的APP其实属于市面较大众的类型,没有追求设计趋势,但是中规中矩,在很多网贷APP中都能见到。但是我们应该思考的是,注册作为吸引新用户的重要一环,我们能否做的更好?

2.WHY(优化原因):

石投金融目标用户为40岁的中年人,我对此设定其实是不太同意的,使用过程中我注意到其实对于产品的结构流程来说,

3.WHO(目标用户):

中净值用户(年龄结构为30-45岁之间,对互联网新事物有开放性心态,对APP的设计水平有一定要求,并且操作流程不可像PC端一样交互繁琐死板。产品偏好:安全保障三件套(风险准备经+阳光保险+资金托管)+高收益,运营拉新策略:促销+再促销+拉好友+再拉好友)

4.WHERE(使用场景):

互联网金融领域方向的移动端APP。用户、需求和场景是产品设计前必须要考虑的三大核心要素,只有能满足目标用户在特定场景下特定需求的产品,才有可能成长为独角兽产品。

5.WHEN(何时使用):

用户体验时涉及到资金进出及个人信息等内容。

6.HOW:

后文阐述。

三、产品的注册流程

定了这个研究主题之后,我着手研究了APP的注册流程。用户点击【我的】icon之后,弹出登录页面,注册按钮位于次要按钮区域,用户需要点击之后才能进行注册。首先我考虑的是,对于一个刚下载APP的用户来说,登录是比注册更高优先级的交互吗?从第一步开始,我们的流程就在消耗用户的手指点击次数。点击次数越少,用户使用产品感受越舒适流畅,注册转化率越高。

然后用户点击注册之后,会让他输入手机号。这时又涉及到一个小的交互缺陷,就是用户需要再次点击输入框才会弹出键盘开始输入,又消耗占用了一次用户的手指点击次数,属于无效交互。

下面我们终于到了输入手机号的环节,用户输入手机号,如果用户早就注册了我们的产品,但是忘记了,输入了已经注册的手机号之后,我们产品现版本的流程是【弹窗告知用户“您的手机号已注册”】,需要用户点击“确认”才能关闭这个弹窗,然后就什么操作都没有,停留在这个输入手机号的页面。用户需要手动点击“登录”文字按钮才能切换到登录界面。如果是一个40岁的中年人,他的使用APP经验不多,他可能会适应这个硬中断的过程,反应一下确实是自己操作问题,是自己的过错,而乖乖的去点击“登录”按钮,但是如果是一个30岁左右的年轻人,在各种APP如亲妈一般的母爱关怀下,他可能就很不舒服,对APP的印象不好从而流失。

现版本注册错误的界面交互

四、相关理论——分步注册

1.分步注册适合移动端设计:移动端屏幕小、加上弹出键盘,假设将多个输入项放在一个页面,会给用户造成拥挤感,然而分步注册则可以较好地解决该问题。

2.分步注册可减少用户点击输入框的次数:几乎所有的注册关键步骤中都有:输入手机号、获取验证码、设定密码这3个步骤。如果这三个步骤在同一个页面,则需要用户手动点击输入框呼出对应键盘来填写这些信息。如果遵循分步注册,分成三个页面的话,进入每个页面都会自动置入焦点并弹出键盘,将减少用户手动点击输入框的次数。

3.分步注册在一定程度上可以提高转化率:Facebook曾经针对分步注册与非分步注册做过A/B Test,其结果指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面倒不如拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

上页我们讲述了【分步注册】的理论,结合这个理论我们来看APP的第二步——输入验证码及输入密码。属于非分步流程。虽然看似减少了用户的操作步骤,但是使用过程中用户需要经过等待验证码——点击唤出数字键盘——输入验证码——点击唤出英文键盘——输入密码——点击注册(如果验证码或者密码有一项错误,便会弹出错误提示之后停留在此页面等待用户重新点击输入框自己删除输入的数据然后重新填写)这样的流程。写到这里我的头有点疼,所以不做过多阐述,大家可以自己体会。

五、竞品分析

由于市面上网贷APP数量太多,但是注册流程都一致为【输入手机号】-【输入验证码】-【输入密码】这类三要素流程,所以我选取了A级网贷产品微贷网、翼龙贷、拍拍贷及支付宝(副参考)作为分析对象。由于我没有可用于注册的多余手机号,所以很多流程没有进入输入验证码之后的下一步,但是已经足够看出一个APP关于注册流程的优化思路。

拍拍贷

拍拍贷的流程其实跟我们产品的比较一致,最后一步属于非分布流程。但是第一步的注册登录判定以及设计上的通过字号对比让用户明确自己所处的位置这样的iOS11设计理念值得我们参考学习。拍拍贷的最后一步点击完成注册之后如果输入有误的体验也不好。我还有不满意的地方是拍拍贷的整体界面设计偏简洁清晰、以内容为主,而作为最重要的页面之一的登录注册页颜色大面积的使用了他们产品不怎么突出强调的蓝色,视觉观感非常的沉重,跟整个产品的基调严重不符。

微贷网

前不久刚发布版本——“七年微贷”的微贷网的注册流程是与我的改版方向高度一致的,这点我感到很荣幸。它从用户页面就开始合并登录和注册的判定。用户点击【登录/注册】按钮之后自动弹出数字键盘,用户输入手机号之后系统判定是否注册,如果已注册,引导用户进入登录界面,自动弹出英文键盘填写登录密码,如果没有注册,引导用户填写自动发送的验证码并跟随页面切换自动弹出数字键盘,减少用户的点击次数,优化产品使用体验。

翼龙贷

翼龙贷的注册流程中规中矩,从注册中就让用户感受到自己是传统金融企业的这个概念。它有很多可取之处,包括注册首页的活动拉新(但是做成入口图形式会让用户一直想点击并且分散其它信息的注意力)、通过主色调红色的步骤进度条让用户明确流程总共几步和自己所处的位置,最后的奖励回馈,还有开通存管账户的适当引导都是我可以从中学习到的一些设计思路,跟我们的产品理念也非常一致。

我们的注册完成奖励反馈提示。作为小白用户以及30岁左右的目标人群的我来说,我看懵了,反应不过来这些奖励对我来说意味着什么,我不知道积分是啥概念,我也不知道投标本金是什么概念,而且关闭或者开通存管账户之后我也不知道这些奖励具体去哪里找和使用。但是这个不属于注册流程的优化,所以我只做了部分改动,具体可能会在以后分析改进。

支付宝

爸爸的APP,不想多夸。采用了分步注册设计保证了用户每步操作的视觉焦点都在自己要输入的内容上。输入4位验证码之后自动判定验证码是否正确,如果不正确,清空所有验证码并且配合手机震动和错误提示红字抖动告诉用户输入错误,减少弹窗打断,降低错误反馈造成用户心里的不愉快。之所以账号已经注册的提示放在输入验证码之后,是因为用户点击【立即登录】的话,会直接登录,而验证码就自动变为登录需要接收的验证码,这点也是做得挺出乎意料的。

六、最终改版结果

首先,我对产品做了一个视觉上的改版。采用了iOS11大对比的设计理念。首先分析页面信息优先级,将页面信息按权重排序,依次为核心步骤层、内容输入层、辅助信息层,还有包含可点击交互操作的操作引导层。然后通过字号、字色与字重拉开信息层级间的差距,最终将用户聚焦到核心信息上来。

a.核心步骤层:是指用户在短暂时间内浏览页面时,能让其一目了然的获知当下应该操作的某个步骤。例如“输入手机号码”是这个页面的重点核心内容,其设计需要重点突出,且精炼文字。

b.内容输入层:是指用户被核心步骤层吸引后,需要进行相关内容的输入,例如昵称和密码的输入等等。其设计需要引导用户进行输入操作,并且在输入中给用户带来便捷性。例如包括密码明文/暗文的切换,以及输入验证码到最后一位后直接进入下一步,来确保便捷性。

c.辅助信息层:是指用户理解了以上两个信息层后,辅助信息层会有更多信息让感兴趣的用户去了解。这里往往提供更多说明或者跳转链接,例如使用条款和隐私政策等。

我在视觉上使用了CR设计语言(iOS11的设计风格)。Complexion Reduction设计语言是指使用更加简化的界面颜色,更大更突出的标题字体,以及简洁的图标,来拉开页面信息层级,突出页面主要功能。作为用户体验设计师应该进行“最小化设计”和“逐步简化”的设计模式,毫不留情的砍掉“没有重要功能的元素”,使用户快速关注到信息的本质。

改版前:

改版后:

1.简单且突出的告知用户在页面中需要做的唯一一件事

2.减少零碎信息的展现,最大限度的精简文案

3.各类信息分组,拉大信息战线层级

七、具体改动内容

1.增大了输入内容的字号,简单清晰明了。延续旧版本,对手机号码进行344的分布

2.增加一键清空icon

在输入时偶尔会出现输入错误,如果没有清除的icon,用户只能一直按键盘中的清除按钮,需要一直按住直到输入框为空。点击注册时候,注册按钮变为加载状态,清空icon与键盘同时消失/收起。

3.优化了不可点击状态的按钮状态表达

旧版本不可点击状态为灰色,比较老旧过时,并且颜色的视觉层次不高。

4.手机号位数不对/格式错误时,按钮为不可点击状态

当input为空时,关联按钮为disabled的状态,这是采用了防错的原则:如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免误按,这是在提交之前的视觉验证输入的另一种方式。

5.修改了按钮上按钮的名称

表单按钮应该准确描述用户正在执行的任务——创建帐户或登录等。

另外,我还优化了文字的显示层级,共分为五类

涉及到文字/色彩规范是一个很大的工程,我们的理财APP在这点做的不是很好,因为这次改版设计是私下在做,所以我便做得随心所欲了一点,甚至重新定义了品牌色:)。

关于负反馈的处理

所谓负反馈,指用户行为出现问题时出现,比如投资金额小于可投金额,或者密码不正确等等。虽然负反馈在产品交互设计中对于警示用户不该做的行为或者是该行为会导致不良后果的可能时起到了不可或缺的作用。但是显然更多的时候人们不愿意收到负反馈,任何用户在得到负反馈的时候都会感到沮丧,因此尽量减少通过特定的反馈页面来进行负反馈。

1.尽量减少用户犯错的机会,包括突出的标题及重要文字,清晰的文案,分步输入等

2.输入验证码步骤中,如果用户输入的验证码有误,验证码自动清空并且输入栏返回第一个,降低用户操作及点击数。

3.采用了手机振动+文字震动加文字标红的方式提示用户的输入错误,用比较轻量化的反馈来弱化。

1.优化文案

·将会让用户看晕的奖励文案整合至【我的奖励】中,方便后续查看。

·增加了银行存管的解释文案,使强突出按钮更有指向性,也更好的引导用户去开通银行存管。

2.优化主辅按钮表达

这里我参考了翼龙贷的设计思路,但是做了一个优化,将主按钮调整到右侧。大数据表明,一般将倾向于用户点击的按钮放在右侧,点击率更高。

七、最终成果动效展示

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

你的设计,用户真的看得懂吗?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

前段时间个人所得税app 上线,用户可以在线办理个税专项扣除申报。我自己也尝试使用了一波,在申请房贷利息抵扣的时候发现了一个问题。

在房贷信息模块里需要我输入证书编号,但是我根本不知道到底要哪个证书编号。输入提示非常的简洁,就三个字「请输入」,到底要输入什么?这样的表单在很多产品中都可以看到,让用户输入生日,但没有告知日期的格式。日期格式真的太多了,用户到底选择哪种?

设计师经常犯的一个错误就是上帝视角,高估了用户的理解能力。一顿操作猛如虎,结果用户可能根本没看懂你的设计。

更快:交互层

有的时候用户并不是看不懂你的设计,而是没时间看你的设计。如果我们做了一个抽奖活动,用户看了一眼主界面没有弄明白是怎么玩的,那么这个抽奖大概率是失败的。你或许会不服,我明明把活动规则已经写在下方了,可是用户根本不会看。因为他们真的很「懒」。

所以让「用户看懂你的设计」,首先我们应该做到「让用户更快的看懂」。我们需要提升信息的传递效率。

1. 信息可视化

俗话说「字不如表,表不如图」。用户对于具象元素(表格、插画、icon和图像等)的感知能力更强,具象元素也更能传递情绪。例如:道路两旁的路标多数是以图形为主体的。这是因为在车子高速行驶的过程中,司机没有足够的时间阅读标示上的文字。

场均122.4分,30.6个助攻,45.0个篮板……这些数据对于我们来说只是冷冰冰的数字,我们很难理解其背后的含义。雷达图对球队数据进行了可视化处理,提升了信息的可读性。因为相较于纯文本,大脑处理图形的速度要快得多。

以谷歌日历为例,如果我要做瑜伽,那么就会在日程详情页配一个瑜伽垫的插画;如果我要跑步,那么就会配一幅跑鞋插画。用户甚至不用看文字,通过插画上所描绘的场景就可以知道自己接下来的行程。用户可以更快地看懂。

2. 合适的组件

选择合适的组件可以降低用户的学习和操作成本。以上面的生日为例,与其通过输入提示告诉用户日期格式,还不如直接给用户提供一个日期组件。

多数的选择场景中我们都会使用底部动作栏来承载选项,如选择优惠券/银行卡。参考了一些产品,发现他们都在底部加上了关闭/确定按钮。我们不妨来思考:动作栏界面底部需不需要提供关闭/确定按钮?

决定一个元素的去留,我们需要明白它的作用是否可以被替代。底部的按钮是供用户点击关闭底部动作栏的,光看「关闭动作栏」这个动作,底部按钮并不具备不可替代性。因为点击上方的空白区域或者把关闭按钮放在右上角都可以关闭动作栏。

这样一看,底部的按钮是可以删除的。那为什么其他的产品都保留了呢?因为我们忽视了组件的信息属性,我们没有考虑如果没有它是否会对用户了解系统当前的状态造成影响。

没有底部的按钮,用户无法确定底部动作栏是否正常加载。用户不知道我是只有一张银行卡还是只加载出来一张银行卡。

更准:文案层

前段时间去体检,发现排队显示屏中有的人前面有咖啡图标,有的人没有。好奇的我特地找护士问了一下,发现咖啡意味着接下来的体检项目不需要空腹,你可以去吃早饭了。图标的确很简洁,可是有多少人看到这个咖啡图标会立刻意识到自己可以吃早饭了呢?

过度追求信息传递的效率,而忽视了精度,从一个极端走向另一个极端——简洁易懂的文案是保障信息准确性的重要措施。

前段时间针对报错文案做了一个梳理,发现了一些文案中的共性问题。

1. 没有提供解决方案

一个合格的报错文案应该由:报错场景、报错原因和解决方案共同构成。首先告知用户具体遇到了什么样的报错场景并且解释原因,最后提供解决方案。多数文案都只做到第一步,只描述了报错场景,这并不能满足用户的需要。

  • 如果照片上传失败,用户需要知道是因为格式不对还是图片太大了。
  • 如果因为系统升级,导致服务暂停,用户需要知道什么时候可以再次提供服务。
  • 如果把报错场景看成是一个坑,那么报错文案应该告诉用户你掉进了一个什么样的坑,为什么掉进来以及怎么样才能爬出去。

2. 拥抱数字

多数的文案都不爱提供数字,用户能获取的信息也比较模糊。我们尽量给用户提供准确的数字,包括时间、金额、次数等,让用户对当前的状态有一个准确的认识。

输入手势密码错误是有次数限制的,可是你并没有告诉用户今天还剩几次机会。

我们经常会遇到资料审核的场景,最常见的方法就是告诉用户「资料审核中」,非常的省事。但是用户会疑惑到底要审核多久,给用户提供一个大致的审核时间,让用户有目的的去等待。

备胎:在线客服

如果前面两个方法都不能解决用户的疑问,那么我们只好给用户提供在线客服了。

1. 入口的必要性和统一性

客服的入口一般在首页或者用户的个人信息页,除此之外我们需要在用户有客服诉求的场景中给用户提供客服入口。如果不提供入口,用户遇到问题就要返回到首页或者我的页会很繁琐。如果用户在一个表单页中录入信息,突然对某一项内容不确定,返回到首页找客服咨询。这样可能会导致用户之前填写的信息丢失,用户需要重新输入一遍。

以下图为例,这是一个借款的表单页,用户在这里录入借款信息。我们会给用户推荐一款借款人安全险的保险产品,提示文案是「保费60元,贷款利息可节约55.33元」。

但是用户反馈不知道这个60元的保费是一次性扣除还是每月都会收取,并且这个利息节省是什么意思。因为对收费标准不确定,用户的购买意愿也会受到影响。这里的文案表述不清楚,我们可以给用户提供一个客服的入口。

因为在线客服是一个共有的模块,不同的业务线都可能会调用。那么在入口的设计上,我们需要注意一致性。当然我们也不能过于死板的追求一致性,因为不同场景用户对于客服的诉求是不一样的。就以支付宝为例,生活缴费和蚂蚁借呗两者在线客服的入口是不一样的。

因为相对来说,用户对借钱的场景更加敏感,有更多的疑问去确认。这笔贷款的利率怎么算的?还款方式是怎么样的?会不会影响我的个人征信?所以在借呗页中,用户对于客服的诉求更高,所以在布局上会放在更加显眼的位置。

2. 对话式交互

用户进入客服系统不意味着立马可以跟客服小姐姐聊天。咨询问题一般会经历以下几个步骤:

  • 提供猜你想问的问题;
  • 客服机器人;
  • 真人客服。

以支付宝为例,首先会根据你的来源给你推荐你可能想问的问题。例如:你从充值中心进入客服,首先会给你推荐充值缴费相关的问题。

如果提供的问题列表里没有用户想问的,用户就需要手动去查找问题。这时客服机器人登场,根据你输入的关键词,给你提供相应的解决方案。如果客服机器人不能解决你的问题,那么可以召唤真人客服来帮你解答。

京东金融与支付宝的客服流程大同小异,其中的一个区别在于它额外提供搜索框来查找问题,而支付宝是通过对话式交互来查找问题。

对话式交互也是近年来比较热门的一个话题。对话式交互主要的优点在于学习成本低,我们现有的交互体系都是建立在人工智能不够智能的基础上。如果足够的智能,未来的产品界面可能就是两个对话框,你只要打出或者说出你的需求就可以了。

年初一下午我要看韩寒的新电影,帮我预定一张票。系统根据你的行程和之前的观影记录,猜测出你当天观影的影院和时间顺便根据你的喜好选好座位,生成了一个订单或者同时生成好几个订单供你选择,你确认一下就可以。

当然这只是一种设想,目前的技术还无法实现,系统无法真正分析出用户的真实意图并且做出反馈。例如,在现实人与人的对话中,同样的一句话,不同的语境下有着不同的意思。

把这个场景带入客服中,我们输入「修改」可以发现有这么多相关的问题。如果我从白条页面中进入客服,我输入「修改」,那么应该优先从白条相关的问题中筛选出与「修改」相关的问题。而目前来说,不管从哪个模块进入客服,输入「修改」给你推荐的问题都是一样的,没有考虑语境。在这种不够智能的情况下,对搜索结果的展示上传统的搜索框模式更加合适。

总结

以上是我简单的分析和总结,如果你有不同的看法和建议欢迎留言。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

平面中的构图技巧

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

平面中的9种构图,但有的同学还不是太明白,所以小编今天细说里面其中一种构图:视觉引导线,加深大家的理解。

视觉引导线构图

什么是视觉引导线?(视觉动线)

视觉动线会将观众视觉引导到特定的方向,先创造一个视觉中心点,之后会提供一条让观众可隐约跟随的视觉路径,划分视觉阶级明显让观众知道元素之间的相对重要性。引导线是运用元素本身的原始形象或直接画出实体线条,借用这些引导线观众的视线可以被指向画面的其它元素哦。

上图中使用了视觉动线 + 留白,留白可以让海报中的「手」更加抢眼,使观众第一眼就会看那只手。接着就是视觉引导线了,引导线不一定是实体线条,它可以是元素本身的原始形状、人物视线以及元素组合等等,借用这些引导线让观众的视线可以被指向画面中的其它元素。

说到这里,我想大家也知道上图的引导线是什么了吧?引导线是手与线的组合,观众的第一视线是手,然后会顺着手拉的线方向延伸,最后停留到右下角的小字里。这几行小字就是作者要表达的主要信息。

但为什么不直接居中非要弄个引导线?虽然可以用这些中规中矩的构图,但往往会显得无趣,也不一定能吸引用户去看了。

下面小编用一些案例来让大家更好理解。

案例:

上面的海报设计是很好的例子,首先利用视觉中心点让观众集中到大字区域,然后顺着线条查看下方的内容,先是 bla 的内容,接着就是 zer,所以这图主要信息应该是 RYDER BLAZER(但小编不知道是啥……)

上图中,人物的视线也可以算是一种引导作用。

总之好的视觉引导线可以让作品富有故事性和艺术性,还能提升作品视觉上的观赏度。所以我们创造时应该重视构图。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

原来日本设计还能这么萌!53岁老顽童的“脑洞之作”风靡日本!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

说起日本设计,你脑子里冒出的第一个印象是不是「性冷淡」

MUJI、优衣库、nendo工作室,清一色的简单灰白挂,看了就让人想到「断舍离」。

但是,并非所有的日本设计,都是这个调调的,也有可能是下面这样的。

平淡无奇的红绿灯,摇身一变竟然变成了枫叶的形状?

绿、黄、红三色正好对应不同季节下枫叶的颜色,有了它就算一路碰到红灯,情绪也不会暴躁咯。

那些乘电梯永远不看脚下的小孩,银杏落叶铺成的电梯,足够吸引你的目光了吧?这玩意儿可比「注意脚下」的标语好使多了。

以上这些脑洞大开的设计全都来自于日本GOES公司创始人前田贤刚,他是个53岁的老顽童,低调到日站君只能找到他的这么一张小照片。

虽然公司总共就5个人,但却和资生堂、奥林巴斯、加拿大观光局等大客户都合作过。

看了他们的作品之后,或许会颠覆你对日本设计的认知。原来日本人认真卖起萌来,也是一把好手呐!

居家好物篇

看到这个日站君忍不住哼出声「童年的纸飞机终于飞回我手里~」

但是千万别真飞出去,因为它的真实身份其实是一个盐罐。

「灵魂撒盐」都弱爆了,「纸飞机撒盐」了解一下,做饭的时候还能顺便追忆下童年。

欸,这堆雪是干嘛的?

答案揭晓,其实这是一个门挡。

或者用来做书立也可以。永远不化的积雪,简直圆了南方孩子一个「看雪梦」,以后再也不用花5块钱,雇北方人在雪上写名字了。

虽然摸清了前田贤刚「不按套路出牌」的秉性,但日站君看到下面这个还是迷茫了,曲别针被掰弯了?

而它的实际用途竟然是固定海报的钉子!一眼扫过去,毫无违和感。不知道的可能还想求链接,哪家的回形针这么刚连墙都能戳穿。

回形针都能钉海报了,所以这肯定不是普通办公用的燕尾夹。

没错,从底部的杆子就能看出些端倪,人家就是个吧台椅。

事情变得没那么简单了,看GOES家的作品,仿佛演变成了一个「猜猜我是谁」的游戏。偶尔加班来一瓶啤酒,还挺有情调的。

哈哈你又猜错了,它只是提醒你工作的便利贴。

有情调的来了,磁带卷笔刀。

高科技仪器卷笔刀,连削铅笔都能变成一件有仪式感的事。

吃货篇

一块吐司,看上去松软香甜,让人忍不住想咬上一口。

不过别真咬,因为它是个如假包换的手机壳。这样的手机壳千万别给我,我每天都会饿醒的。

藏了块「蛋糕」的茶杯,有了它喝水都是甜甜的。

一箱来自远方的包裹,中间透出的红苹果又大又圆,任哪个快递小哥看了,都会轻拿轻放吧。

嘿嘿又被骗啦,人家只是一卷胶带,就是长得逼真了点。

夏日炎炎,来把「五花肉扇子」扇扇风。友情提醒,别在午饭前夕使用,不然可能会惨遭同事群殴!

再穿双「牛排拖鞋」,总觉得脚底板好像油油的。

冰淇淋挂钩,牢固性有待检验,总担心天一热就化了……

还有新鲜出炉的「蔬菜瓜果戒指」,青椒、草莓、胡萝卜、玉米,应有尽有,敢戴出去的,日站君敬你是条汉子。

萌宠篇

之前的巧克力总算知道是被谁偷吃的了,巧克力上的猫脚印透露了一切。

想和你家阿喵玩躲猫猫吗?纸袋子就是个不错的藏身处噢,露出的一截小尾巴,能萌死个人。

往袋子里一瞅,果然在这儿躲着呢。

喵星人款「暗中观察」插座,你家主子盯着呢,看你还敢忘拔插头!

路障也贴上阿喵的照片,醒目值立马翻了个倍。

这只萌萌的小兔子表盘,总觉得少了点什么。

如果你穿的是小白鞋,调整好角度抬眼看,少的两兔子耳朵终于补齐了。

难以想象,这些居然全出自一个大叔之手,所以说,千万别小看大叔,他可能比20多岁的你更有少女心。

宅男篇

一个画着美女的扇子,就能够成为宅男爱用品了吗?

那是你没get它的正确使用方式,只要角度找的好,就能营造出下图的场景,简直是单身男性的福音哇。

谁说露肩装是女性的专属?

男生照样可以拥有。穿上它,保准你是整条街最靓的仔。

精神病人思维广,中二少年欢乐多,漫画式镜子专为每一位中二魂爆棚的你而设。

每天起床一照镜子,谁还不是故事的主人公。

一般的伞都不够符合中二少年的气质,得撑这一把才行。

别人在明你在暗,再也不怕和陌生人进行迷之眼神对视了。

要是嫌那把不够炫酷,八星八箭全钻石豪华版足够闪瞎你的眼了吧?

下面是新时代年轻人必备的手机三件套,自带打光板的手机,绝对的合影利器!

手机也得好好防晒,「脸基尼」也给用上。

手指不够长的少年,只需一根「手指加长器」,单手按到手机屏的各个角落,从此不再是梦。

这突破银河系的脑洞,日站君不禁想为它们双击666。

GOES公司的理念是要做「引人注意而独特的idea」,看了他们的作品应该没有人会觉得他们没做到吧。

人们总会忽视眼前的风景,前田把生活中的小物件摘出来,再融入自己的脑洞。

于是当大家再看到它们时会眼前一亮,然后会心一笑,感受到创意的美好,这就是设计的意义吧。

当性冷淡、极简风大行其道,他们却致力于把普通平凡的事物玩出新花样,告别无聊的日常。果然有趣的灵魂才是万里挑一!

以上小物均为良心介绍,如有种草概不负责,别问日站君要链接,因为日站君也没有。2019年都到了,我们也稍微来点改变呗,或许比起性冷淡,不如卖萌来的赞。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

2019广告营销案例抢先看

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

2018年已过,转眼又到了2019,但营销圈中战火从未消停过……

2018年各大品牌营销玩出了新花样,优秀的营销案例层出不穷,揽获了众人的芳心。

面对2019新的一年到来,各大品牌当然也不会放过一个大好的借势营销黄金机会,都争先恐后搭上了这趟“借势营销”的顺风车,为打响2019年第一炮,自然是无可厚非的。

然而,迎来2019新年,各品牌纷纷借势“耍花招”,精彩不输往年,各种多元化新玩法碰撞在一起产生了巨大的火花,再次燃烧整个营销界。因此,在这个竞争激烈的营销战场上,频繁出现了众多品牌活跃的身影,各种刷屏级的案例也相继诞生。

下面为大家盘点的刷屏案例,看看这些品牌都是如何借助“新年”这个热点事件的势能,迅速抢占超级流量,赚足众人的眼球?

特仑苏

主题文案:更好的2019,做更好的自己!

点评:往年的特仑苏代言人只有陈道明、靳东,而今年又有两位新代言人加入特仑苏——张钧甯和邓伦。特仑苏邀请了这四大代言人共同拍摄了2019广告,又以一个全新的面孔面向用户。

广告中花式植入产品,将产品巧妙融入到画面情境中,以达到潜移默化的宣传效果,顺理成章地符合了产品植入讲究“随风潜入夜,润物细无声”的最高境界。

四大代言人共同拍摄广告,无疑是突破了传统的广告模式,强大阵容助阵,可大大体现出明星在营销中的号召力与影响力,明星背后带着庞大的粉丝群体,推动这次广告更广泛地覆盖目标受众。加大了此次广告营销的宣传力度,从中也表达了特仑苏坚持“从更好的开始”的品牌主张。其次,对于用户而言,特仑苏这波新年广告带给大家更多的是惊喜与新年的美好祝愿:更好的2019,努力做更好的自己。

京东白条

主题文案:“一点当典行”网红店横空出世

点评:就在2018年尾声已敲响时,京东白条又出来“搞事情”了,竟然在京城“四大凶宅之首”—— 朝内81号开了快闪店,使得拥有百年历史的“京城第一鬼宅”, 摇身一变,成为了一家网红店,吸引众多时尚潮人前来打卡,深夜排队的壮观场面实在令人惊叹。

京东白条精准洞察年轻人现实痛点和情感需求,以及抓住了他们的猎奇心理,将无数传说的冒险胜地——朝内81号,首次改造成京东白条“一点当典行”,为大众提供了全新的刺激潮玩体验。让年轻人通过【当与换】的仪式感,把负能量、情绪、杂念统统“分期”丢掉,切身感受“一点改变,好过一成不变”,告别社畜、废青的过去,获得新生,在2019开始更好的人生。

京东白条“一点当典行”网红店的问世,可谓打破传统印象中的金融理财玩法和当铺玩法,从一点事务局到一点当典行,京东金融始终在突破体系和行业的限定,持续打造坐拥“潮人”人设的品牌。同时也彰显出一个拥有年轻人的潮玩精神、有温度的品牌,更有效建立了品牌与用户深度沟通的情感纽带。不得不说,这一反常态玩起时尚新潮,简直是颠覆了人们对京东白条的印象,京东白条这波营销实在是妙!

据悉,2019年将会有5期系列活动陆续落地全国,既佛系又丧的年轻人,不可错过!

OLAY

主题文案:下一站,无惧年龄

点评:新的一年里,BBDO广州携手OLAY,带来无惧年龄的《下一站》,OLAY这支反逼婚广告,戳中了多少人的心窝?相信,给了你不少启发。

广告中讲述的是一个发生在“年龄列车”上的故事,女主手握一张名为“年龄”的车票,正在寻找着自己的位置,突然惊奇发现这里的车厢都是按照年龄划分的。通过这极为扎心的故事情节激发更多“大龄剩女”的思考,但也引发了更多女性产生坚定的想法,不应该因为年龄而仓促步入婚姻的殿堂。

其实,这一广告刷屏朋友圈,那是因为这广告基于对女性的心理洞察,找准众多女性的痛点,让人产生强烈的代入感,更能给予女性启发,正确面对自己的每一个年龄阶段。由始至终,OLAY给人传达了一种“不畏年龄,勇敢做最真实的自己”的精神,无形中体现了OLAY对用户的最切实的关怀,使得其品牌深得人心。

迪士尼

主题文案:“梦想成真”

点评:迎来新的一年,这支由迪士尼推出的暖心广告正式上线后,获得众多网友的一致好评,都称这已被故事中的“小白鸭”所吸引。

广告片讲述了一只小白鸭费尽千辛万苦,终于和偶像唐老鸭见面的故事。以呆萌的“小白鸭”形象,然后制造感人的故事,直击用户的内心深处的情感,从而引起用户的共鸣,加强了用户对品牌的认同感。

这次广告贴合了现实生活,从用户的情感出发,唤醒人们的梦想,不忘初心,勇往直前,因此,迪士尼给人传递的不只是对美好生活的向往,更多的是对梦想的追求与执着。还有向用户表达了:尽管我们都长大了,迪士尼还在守护我们最童真的梦想。所以,迪士尼通过这一波触动人心的情感营销,为品牌与用户之间架起了一座真正的情感桥梁。

荣耀手机

手机性能测试

(扫描二维码观看视频)

点评:说到手机的耐摔性,很多人都会想到诺基亚,但诺基亚在现如今的手机市场普及性明显不如其他品牌。而在今年,荣耀手机开始耍出了新招——推出一创意广告,铁证荣耀手机才是“坚强者”。

这是一支荣耀测试手机性能的宣传片,让手机历经各种考验,包括油烟考验、零下40度的超低温测试、高达55度的超高温测试、残酷的刮擦实验等,最后用结果彰显:荣耀手机的性能强大。

所以,荣耀手机通过展示这优质的手机性能来加强用户对其产品的认知,刷新用户的荣耀手机原有的印象。从用户的角度考虑,用实验证明,体现产品的最大价值,从而满足用户对手机产品的各种需求,也引导用户对荣耀手机产生正面的认识。最后也突显了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用实力说话”的产品广告,自然会把人征服得心服口服。

网易云音乐

主题文案:“遇见你真好”年度听歌报告

点评:2018年的网易云音乐的年度报告,居然在2019年的第四天才迟到出现,网易云音乐的“遇见你真好”年度听歌报告,又双叒叕刷屏了……

众所周知,网易云音乐于2013年4月23日正式发布,也是国内首个以“歌单”作为核心架构的音乐APP,每次网易云音乐的营销与“走心”产生了密不可分的关系,大众千呼万唤始出来的网易云音乐年度总结报告终于出来了,虽然QQ音乐、酷狗音乐也在年前亮出了年度音乐总结,但偏偏是网易云音乐的年度听歌报告刷屏了。

这次的年度总结,满足了用户对音乐的需求,也满足了一些有情怀的用户,而且其歌单给予用户满满的成就感,轻易地完成了一次阶段总结。吸引更多用户参与其中,纷纷晒出自己的年度歌单报告,使得这次网易云的年度听歌报告,引发了广泛的传播。

屈臣氏

主题文案:“做自己,美有道理”

(扫描二维码观看视频)

点评:就在2019年到来的钟声一响起,大家便纷纷立了新的flag,而屈臣氏上线的H5,彰显着“做自己,美有道理”的品牌主张,刚好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

视频中的“四位小姐姐”show出了“不跟随、不妥协、不伪装”的模样,还有人的语言配合动感的画面,折射出现实生活中年轻女生渴望表达自我,追求个性与态度。呼唤大家在新的一年,立起了2019新flag。同样也展现了屈臣氏就是一个有态度的品牌。

只想说,在这2019新年之际,屈臣氏推出了这一波满满正能量的广告,能俘获用户的芳心也是毋庸置疑的了。

纵观以上品牌营销案例,可谓各有千秋,但共同点旨在使得品牌深入人心。

然而,众多品牌营销过程中需要从用户角度出发,都说,一个成功的营销,是因为“走心”,在传达品牌产品信息的同时,也能使得受众与品牌成功产生情感的共鸣,让用户更深刻地记住其品牌。

当然,我们也更期待2019,品牌主们能推出更多刷屏级的好案例。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

关于产品的需求分析方法,这篇全帮你总结好了!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

随着互联网产品的不断向前发展,「产品设计导向」一类的概念已经不仅限于大公司中,在往日越来越注重「短期效率」的小公司也都纷纷开始注重产品设计方面的建设。

所谓的「产品设计导向」指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的「功能增删改」,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。

另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的 UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期 UI设计师的工作效率,所以现在「全链路思维」已经从刚出现时的「概念化思维」变成了「主流化趋势」。所以现在很多的 UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。

但是很多设计师的分析环节明显就是为了证明「有」而去「做」,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:「男、七十岁、目标是给自己的儿子购买婚房」。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。

本篇主要讲述产品设计中的一些分析方法,范围从「个人练习式设计」到「团队合作式运作」,适合初级产品经理、交互设计师,在工作中职能范围与产品规划有关的 UI设计师,想要学习产品设计的新人阅读。

产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程。

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。

个人思考方法(一):空·雨·伞

上面讲到了设计师的「全链路思维」现在已经成为了一种主流的观点,将来前期的铁三角「产品经理、交互设计师、UI设计师」很有可能结合变成是「交互视觉二合一」甚至是「产品交互视觉三合一」的状态。所以现在很多的设计师开始尝试自己去 DIY 一个需求或者做ReDesign 这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要、直接、简化不必要的流程,以培养自己的分析能力为主。在这种场景下,空·雨·伞就是一个非常好的思考提升方法。

简单概述「空雨伞」思考方式:观察(事实) → 思考(内在) → 产出(解决方案)。

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。「空·雨·伞」因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的「拍脑门儿」式的主观臆测,对于分析能力提升没有丝毫帮助。

个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是「逻辑树」。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。

简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个「树枝」,并标明这个「树枝」代表什么问题。一个大的「树枝」上还可以有小的「树枝」,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。

如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。

举个例子:在2017年我创建了自己的个人号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。

逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现问题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。

总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。

实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于 UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量 UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及。作为设计者,大多数设计师已经开始在设计的过程中心有余而力不足。

造成这种现象的主要原因是随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然地赋予给用户大量无用的东西,偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。

下面是我整理的在用户调研过程中的几点认知。

1. 保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?例如:提升部分页面转化率,收集用户对于产品不满意的地方,通过用户使用产品发现用户潜在的痛点。

2. 有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标。

3. 适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)。

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重。

4. 调研过程中

在调研过程中,我们可以适当结合上文讲述到的「空雨伞」方式去进行调研观察,收集用户需求。

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循「不干扰」、「不引导」、「记录客观」等原则,这样才可以保持用户行为记录的准确性。

5. 获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大。

需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的「逆袭」、「口碑急剧上升」,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。

所以这驱使着团队中负担「用户体验」职能的角色对用户需求进行正确的分类和排序。

这个时候就可以运用到卡诺模型(KANO模型)。

KANO模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类。

1. 基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品「必须有」的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是能快速地上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注意不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。

2. 期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈。

例如对于一些 O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕的体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

3. 兴奋型需求

兴奋型需求又称魅力型需求,指的是不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。

4. 无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。

5. 反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照 KANO模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

最后

对于设计师来讲,不管是个人设计练习还是团队项目,都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展,那就更需要下定一些功夫去学习相关的知识,学会形成自己的思考方法。一开始可能会很痛苦很累,但是如果一味的试图走捷径,最后只会得不偿失。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


轻量级的时尚主题

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

目前从官方介绍来看,UI组件还相当齐全,可用它来快速搭建漂亮、时尚的网页和UI设计作品,下面一起来看看介绍。

bootstrap 4 主题:shards

关于 Shards 这个主题虽然免费,但并不代表它只有「表面」,制作者还为性能性能考虑,压缩版仅12KB大小,实在太好了,以这样的大小,制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式,所有的组件都是重新设计,以便得到统一的风格!

着陆页演示

这是非常不错的UI KIT素材 ,它还包含了10个额外的自定义组件,可以让使用者快事制作着陆页。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件,网页端常用的元素几乎包含了,大方便用户自由定制。

颜色:

字体

图标支持900+ Material icons 和 Font awesome 两大图标库!

表单上的细节,也不容忽视:

还有日期组件的设计:

卡片

按钮

导航菜单

我想这些漂亮的元素,已经足够你设计一般的网页,即使不够,也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

交互设计、人机交互、用户体验设计三者有何异同

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本文将从历史沿革、现有状况、未来发展三个方面,对交互设计,人机交互,用户体验设计进行详细分析。

关键词:交互设计,人机交互,用户体验设计。

在学习和生活中,我们经常会遇到三个名词:“交互设计”,“人机交互”,“用户体验设计”。这三个名词是否是同一个意思呢?如果不是,他们的异同点又是什么呢?本文尝试从历史沿革,现有状况,未来发展三个方面,对这交互设计,人机交互,用户体验设计进行分析。

一、历史沿革

1.1 交互设计起源

交互设计起源于网站设计和图形设计,但现在已经成长为一个独立的领域。现在的交互设计师远非仅仅负责文字和图片,而是负责创建在屏幕上的所有元素,所有用户可能会触摸,点按或者输入的东西:简而言之,产品体验中的所有交互。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.1 比尔.摩格理吉

交互设计在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。

交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔·摩格理吉(Bill Moggridge)在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时的玩具“椰菜娃娃(Cabbage Patchdoll)”,他后来把它更名为“Interaction Design”,即交互设计。

1.2 人机交互起源

1959年美国学者B.Shackel从人在操纵计算机时如何才能减轻疲劳出发,提出了被认为是人机界面的第一篇文献的关于计算机控制台设计的人机工程学的论文。

1960年,Liklider JCR首次提出人机紧密共栖(Human-Computer Close Symbiosis)的概念,被视为人机界面学的启蒙观点。

1969年在英国剑桥大学召开了第一次人机系统国际大会,同年第一份专业杂志国际人机研究(IJMMS)创刊。可以说,1969年是人机界面学发展史的里程碑。

浅析交互设计,人机交互,用户体验设计三者的异同

 图1.2 人机工程学

在1970年成立了两个HCI研究中心:一个是英国的Loughbocough大学的HUSAT研究中心,另一个是美国Xerox公司的Palo Alto研究中心。

1970年到1973年出版了四本与计算机相关的人机工程学专著,为人机交互界面的发展指明了方向。

20世纪80年代初期,学术界相继出版了六本专著,对的人机交互研究成果进行了总结。

人机交互学科逐渐形成了自己的理论体系和实践范畴的架构。

理论体系方面,从人机工程学独立出来,更加强调认知心理学以及行为学和社会学的某些人文科学的理论指导;实践范畴方面,从人机界面(人机接口)拓延开来,强调计算机对于人的反馈交互作用。人机界面一词被人机交互所取代。HCI中的I,也由Interface(界面/接口)变成了Interaction(交互)。

1.3 用户体验设计

浅析交互设计,人机交互,用户体验设计三者的异同

图1.3 唐纳德.诺曼

用户体验这个词最早被广泛认知是在上世纪90年代中期,由用户体验设计师唐纳德·诺曼(Donald Norman)所提出和推广。身为电气工程师和认知科学家的Don

Norman加盟苹果公司之后,帮助这家传奇企业对他们以人为核心的产品线进行研究和设计。而他的职位则被命名为“用户体验架构师”(User Experience Architect),这也是首个用户体验职位。

1.4 历史沿革分析结论

由上述资料不难看出:交互设计这个名词起源于计算机领域,软件专家在进行设计时发现人和计算机的交互产生许多问题,于是交互设计这一名词应运而生。人机交互则是由人机工程学发展而来,是以人与机器的关系为切入点开始进行研究的。和交互设计与人机交互这两个名词不同,用户体验是以心理学和认知科学为基础提出的,从心理学和认知科学的角度对人和外界环境的关系进行探讨。

二、现状

2.1 定义整理

在这里,首先整理出权威的交互设计,人机交互,用户体验的定义。

交互设计:英文叫做Interaction Design。

交互设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是使用产品。

交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来[1]。

人机交互:人机交互(Human-Computer Interaction, 简写HCI):是指人与计算机之间使用某种对话语言,以一定的交互方式,为完成确定任务的人与计算机之间的信息交换过程。有很多著名公司和学术机构正在研究人机交互。在计算机发展历史上,人们很少注意计算机的易用性。现在,很多计算机用户抱怨计算机制造商在如何使其产品“用户友好”这方面没有投入足够的精力[2]。

用户体验:英文叫做User Experience,缩写为UE, 或者UX。

它是指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉,是否成功,是否享受,是否还想再来/使用。他们能够忍受的问题,疑惑和BUG的程度[3]。

2.2 分析和结论

由交互设计,用户体验,人机交互三者的定义可以得出:在现阶段,交互设计,用户体验,人机交互都有研究人和外界环境关系的含义。但相对而言,交互设计研究的是人和产品互动的机制。人机交互研究的是人和计算机的对话过程。用户体验研究的是研究用户访问产品时的体验。从研究对象广度上说:用户体验》人机交互》交互设计。这三者既有相似之处,也有不同之处可以得出分析图如下:

浅析交互设计,人机交互,用户体验设计三者的异同

图2.1 交互设计,用户体验,人机交互三者之间的关系

2.3 数据分析

浅析交互设计,人机交互,用户体验设计三者的异同

图2.2 交互设计,人机交互,用户体验在媒体中出现频率(数据来源:百度指数)

由图2.2可知,从2011年到2018年九月,在交互设计,人机交互,用户体验三个词中,媒体报道最多的词汇是用户体验,其次为人机交互,最后为交互设计。作为一个互联网名词,用户体验传播最广,人们对于它也更为了解。而人机交互和交互设计则在一定程度上属于专业名词,还尚不为人们所熟知。

三、未来发展

3.1 数据分析

人工智能是近年来新出现的名词,这里结合人工智能对交互设计,人机交互,用户体验的发展趋势进行分析。

浅析交互设计,人机交互,用户体验设计三者的异同

图3.1 人工智能与三个词的匹配程度(数据来源:百度指数)

要结合人工智能对交互设计,人机交互,用户体验发展趋势进行分析,就要看,三个词汇中哪个词与人工智能的相关度最高,当用户搜索“人工智能”的同时搜索“用户体验”,就说明“人工智能”和“用户体验”存在相关性。在这里收集了用户搜索“人工智能”和“交互设计”;搜索“人工智能”和“人机交互”;搜索“人工智能”和“用户体验”的数据,用以研究人工智能和这三者的相关性。

由图3.1可知,人工智能与交互设计的相关性最强(用户搜索人工智能的同时搜索交互设计的数量最多),其次为用户体验,最后为人机交互。

下边从时间维度分析人工智能与三个词汇的相关性变化

浅析交互设计,人机交互,用户体验设计三者的异同

图3.2 人工智能和三个词的搜索指数变化(数据来源:百度指数)

由图3.2可知,随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性越来越明显(当人工智能搜索量增加时,用户体验,人机交互,交互设计的搜索量也增加)。

3.2 结论

随着时间的推移,人工智能与用户体验,人机交互,交互设计的相关性逐渐增强。其中,人工智能与交互设计的相关性最强。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

 

用迪士尼动画原则,提升UI动效体验

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。

用迪士尼动画原则,提升UI动效体验

一、挤压和拉伸

在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。

在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易的做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于UI中的任何交互元素上。

按钮在交互时的挤压和拉伸

挤压和拉伸被应用于侧边栏

二、预期动作

让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳、正在跑步的人要停止跑步前会逐渐变慢步伐等等。

在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。

悬停的交互通常会暗示这个按钮是可以点的

在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。

三、时间节奏

在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。

时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦,速度太快,用户又会错过一些内容。一般来说,大多数UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细的解释了每种动画类型的持续时间。

一些设计系统,如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。

右边的过渡动画显得太过于漫长,繁琐。

四、渐快与渐慢

在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才变会变快。

左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。

给UI中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。

五、呈现方式

舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。

在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。

比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。

六、弧形轨迹

一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。

在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。

通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。

七、附属动作

在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。

在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。

按钮边上的粒子效果强化了主按钮的点击效果

八、夸张和吸引力

场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。

在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。

FAB 夸张的交互形式

对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意

九、跟随动作和重叠动作

想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。

在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)

界面有一定的回弹,会显得更加自然。

当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)

总结

界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉静感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。

这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档