首页

怎样设计体验友好的APP登录表单

用心设计

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

 

不要小看一个登录界面,它内里包含很多细微的东西,除去外观视觉,更多要注意的是交互的操作体验,比如一些动画、一些文案提示等细节都要注意,如果你是UI设计师,建议看看这次经验文章,附上了大量案例,也许能助你未来更好的去设计一个用户体验友好的APP登录界面。

下面通过几个关于登录界面的UX策略指南,让你更好的应用和实践。

给文本输入框增加提示

如果用户使用你的服务必须登录,那么信息字段是你必须要做的主要功能(即输入框中的提示语,如:输入手机号码,输入验证码。)

使这些字段清楚可视,并且不要强迫用户到处寻找,或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。

奖励提示:相比于使用常见的“登录”“登陆”的按钮,可以更富有创造性,并要包含可直接输入区域。确保记住用户的数据,这样他们就不需要每次输入信息。

“注册”和“登陆”不应该放在一起。

更多地时候,我们看到注册和登陆按钮被放置的靠近彼此,但是这会对用户产生反作用。

这两个动作都包含了相同的动词,并且看起来也很相似,所以他们会混淆用户的选择。在有限的时间内进入问题,他们可能会感到沮丧并且离开。

基本上,任何界面上不应该有使用户“暂停”和“思考”的元素。

如果你想让他们的体验完美无瑕,分开这注册和登陆两个区域,并且使差别清晰可见。另外,你可以使用不同的动词或者简单解释不同的字段是什么。

在登录和注册部分,增加不同的输入字段。

除了动词“Sign”是事实之外,另一个另用户感到困惑的是,登录和注册部分通常有相同数量的输入框(用户名,密码,和邮箱)。

为了完全地区分,最小化新用户尝试直接登录的机会。用不同的输入字段。

让密码可被看到

当大多数用户的密码由于安保原因被打了马赛克,用户频繁遇见的另一个问题是打错他们的密码。

这甚至会发生在很有经验的打字员身上,特别是当他们在移动设备上登录的时候。

防止这种情况发生的做法是:在密码字符旁边包含一个“显示密码”的单选框或图标。

让他们知道什么是错误的

如果应用监测到一个错误的密码组合,和用户名,但是没有明确的报告给用户问题是什么,用户可能会多次尝试后,很生气的退出应用。

这是为什么你应该考虑通用的回复(例如“你的密码或邮箱不符合”),并且给他们立马回复怎么解决这个问题。

问下邮箱地址或电话号码,而不是唯一的用户名

为什么人们登录时人们很少记住“用户名”?如果使用用户名登录,你会面对很多可避免的困难:用户名必须是一个唯一的,这意味着人们会重复尝试输入一个系统里目前还没有的用户名,或者最终使用其真实姓名。

过了一会儿,用户想出了一个唯一的登录名,但是只过了一小会儿就忘记了,因为这个用户名对他没有任何的意义。

另一个事情可以促进登录,是提供给用户几个登录选项,并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。

需要一个“忘记你的密码”的流程

忘记密码发生在所有人身上,这也是为什么,你急迫的给到用户一个机会来恢复密码,那么就直接在登录界面这么做吧。

所要做的就是,在输入框下增加一个“忘记你的密码”的链接,并让系统能给用户的邮箱或电话号码发送验证码。

不要锁了用户的账号而不告知他们

为了避免强迫进入和暴力攻击,许多网页和应用在一系列的错误尝试之后关闭账户。

安全第一,但是你至少要尝试告诉用户,在多少次尝试后,在关闭账户前,他们必须离开。你也可以分享更多的细节,例如,在试错后的十分钟才可以再次尝试的事实。

登录样式灵感

如果在过去,都是在用相同的无风格和定制化的登录页。现如今,给你的应用,创造一个独特的登录页设计是非常重要的事情,尤其是你想要围绕你的应用和服务来创造品牌。

设计师和开发人员也有承认意识到登录表单的重要性。这是事实,特别对于移动环境下,用户界面相比于“桌面”网站,扮演了更重要的角色。

当为一个应用和移动站设计这个元素的时候,设计师花很多的精力,使它既好用又美观。

在这篇文章里,你会看到很多移动端用户界面设计的案例灵感,关于一个移动端登陆页面应被设计成什么样,给你一些线索。

Roostio Login Screen

Login Screen

Job Board – Company Profile / Login

Shopping app

Tailslife: Login

Moody Sign Up/In Screen

Bandio App Login & Sign Up

Parts – login dark side

Login Screens

ZSSK – login and route detail

DailyUI Day001

Skype Redesign

Sign Up Window – Daily UI #001

结尾思考

对用户来说,登陆已经很困难了,所以,使之变得更复杂,对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式,并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧,并且帮助他们享受你所提供的服务。

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

网页设计 & 灵感 » 当扁平化UI转拟物化设计后

用心设计

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


在设计领域,设计风格总是多变的,也有很多随着流行趋势而不断变化,但是存在着N多的争议。

当扁平化UI转拟物化设计后

对于扁平化和拟物化,说白了,只是风格的不同,最终的设计目的是一样的,但是,却还是会有很多的朋友会纠结于是扁平还是拟物化设计,争论是扁平好还是拟物好,怎么说呢,各有各的优点,各有各的不足,这是今天,我们要带大家看的!

当扁平化UI转拟物化设计后

Michael Fugoso,一位来自圣地亚哥,加利福尼亚的插画家和设计师,帅小伙!

他说,关于他自己,就各像其他人一样,他喜欢旅行,他喜欢吃比萨和海鲜,他非常的重视家庭,家庭总是以他的第一位!他也喜欢分享,因为分享会让别人的生活更容易,帮助别人成功,他觉得,这有助于他成为一个好的设计师。同时,他也喜欢自私地做自己想做的事情,因为他觉得,这有助于他成为一个好的艺术家。

今天,带大家看一组他的作品,在他的这些作品中,很好的反映了扁平与拟物的关系,扁平的背景,搭配上拟物的元素,其视觉效果非常棒,冲击力十足,震撼性十足!

扁平与拟物,数不清的恩怨情仇!道不尽的爱恨纠缠!

这是一张扁平化的插画!

当扁平化UI转拟物化设计后

当它变成拟物后

当扁平化UI转拟物化设计后

你觉得哪个的视觉冲击力更强一些?

我们接着看!

这是一张扁平化作品!

当扁平化UI转拟物化设计后

他开始在矢量程序上呈现

当扁平化UI转拟物化设计后

开始色彩的调整与细节的完善

当扁平化UI转拟物化设计后

最终的效果呈现

当扁平化UI转拟物化设计后

这是一台扁平化的车

当扁平化UI转拟物化设计后

添加装饰元素

当扁平化UI转拟物化设计后

调整颜色后,得到一个扁平化的结果

当扁平化UI转拟物化设计后

把车元素单独提取出来

当扁平化UI转拟物化设计后

在矢量程序上呈现

当扁平化UI转拟物化设计后

上色,添加细节

当扁平化UI转拟物化设计后

对细节的刻画简直不能再棒

当扁平化UI转拟物化设计后

调整色调

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

最终的对比

当扁平化UI转拟物化设计后

再往下看,你可能会被美哭

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

扁平与拟物的碰撞

不一样的花火

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

这些火箭,看得人热血澎湃阿

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

当扁平化UI转拟物化设计后

看了感觉效果如何


 


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

像看电影般的酷站:Oat the Goat

用心设计

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


这是一个以故事形式来展现网站:Oat the Goat,动画很有感觉,虽然小编目前的水平还做不出这类网站,但看看也可以增加点灵感、阅历,原来网站还能这样做的,一个网站,一个温暖的故事,来一起欣赏电影般的酷站,Enjoy!

网站名称:Oat the Goat
网站地址:http://oatthegoat.co.nz/

(请在PC端欣赏,浏览该网站时记得打开声音哦~)

故事是从一只羊咩咩的历险开始,他翻山越岭,途中遇到一些困难和遇到困难的小伙伴们,接着一起去克服,然后越来越多的小伙伴们一起去冒险,经过重重险阻,最终…… (还在让大家自己欣赏才有 Feel 的)

所有的画面非常的漂亮,就像在看电影一样,同时网站还带有一至交互体验,让用户去选择。

截图:羊咩咩遇到第一个有困难的小伙难了哦,我们继续看看……

截图:要选择你要怎么做了

故事结局如何?请自行观赏,同时您可以在下方评论处说出你的想法:)


 


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

避开"灰"画面至少提高几个层次

用心设计

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


大家平时在画素描的时候经常会遇到颜色深不下去、颜色对比不强烈等问题。画面的颜色总是显得很灰,体现不出立体的效果。不管多使劲颜色就是重不下去,有时把纸都涂破了,依然没有效果。这到底是为什么了?究竟如何才能把颜色重下去了?接下来我们就一探究竟吧~

 

什么样的画面是偏灰、偏脏的画面呢?

画面中这种暗部不暗,亮部不亮,颜色处于一个区别不大的状态,画面就会显得灰;而亮面上色的时候笔触太粗,灰面颜色磨得太多,整个亮部区域颜色就会显得很脏。


这些问题之所以出现,是因为大家没有将画面的“黑、白、灰”表达清楚。

要在白纸上画出立体的图形,需要我们加强明暗之间的颜色对比;通过强烈的光影营造立体的视觉效果。而快速表现出大的黑白灰关系是我们塑造的关键:


首先,我们找到所画物体自身颜色最深的地方。用软一点的铅笔(8B、12B)排上调子,依次过渡灰面,留出并轻轻刻画亮部,加上投影和背景。让画面先有一个基本的黑白灰,确定出最黑的地方,灰面的位置以及高光的分布。

然后,在这个基础上我们找到物体的明暗交接线。


先从明暗交界线开始加深颜色并往暗部边缘逐渐的过渡,运笔排线的力度越来越轻,让暗部形成一个有深浅颜色变化的面。靠近明暗交界线的地方颜色就重一点,靠近投影的地方颜色就浅一点,然后通过压深投影的颜色,衬托暗部的反光,让这个暗部颜色更加透气。


再回到明暗交界线,往亮部方向用4B、2B将颜色逐渐过渡,画出灰面来,但物体的灰面不宜画得过多,一多画面就腻了;灰面塑造的标准就是颜色一定要比暗部浅,灰面颜色如果加深那暗部的颜色也要同时加深,始终要保持这两个面的颜色区别。

接下来,就是对比一下整个暗部区域和背景颜色的深浅程度。如果暗部的颜色比背景深就将暗部边缘的颜色压重一点点,如果背景的颜色更深,那么就像画投影一样,沿着物体的暗部边缘叠色,加深背景的颜色;不管哪一种情况都要将暗部和背景的颜色区分开。


最后,我们有稍微硬一点的铅笔(如2H、HB)排线将亮部表现一下,主要是将高光收拢,除了不锈钢和玻璃其他物体都是越靠近高光用的铅笔越硬(HB、2H、4H),亮部刻画时排线一定要细腻,可以刻意排几组特别精准的线条加强物体的质感,这样高光和亮部会显得更白,从而就会衬得暗部的颜色更黑更深。

完成的物体黑白灰的塑造之后,最后看一看整个物体各边线与背景颜色的深浅对比,还是通过加强区部的颜色对比,完善画面整体的明暗对比。

总而言之,暗部的黑并不是独立存在,是因为周边的颜色都比它浅,于是乎,它就深了下去,如果与周围的颜色区分不开,那即使将纸张揉破颜色依旧难深下去。所以,暗部叠色就是一边画一边比较,不停的调整,才能始终确保暗部能重下去。








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

总结页面打开的交互方式,很全面!

用心设计

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

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨,给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础,在设计的过程中,或多或少都会遇到选择的困扰,尤其是产品功能复杂,层级较多时,如何让用户按照自己的意愿清晰的浏览信息,保持操作连贯性,是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中,团队对链接操作的打开方式产生了分歧,借此机会整理了一些案例与资料,就这个问题进行分析探讨,也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接,主要有按钮、icon 以及文字链接,设计中常用的打开方式则主要有以下三种:

1. 当前页打开

点击操作链接后,在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后,在浏览器中新开一个独立的标签页面,进行内容显示与操作。

3. 弹出框

点击操作链接后,在当前的浏览器页面中,弹出一个小尺寸的对话框,进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中,target目标有「target=_blank」和「target=_self」两种属性,分别代表「新窗口打开」和「当前窗口打开」,下图是这两个参数的属性描述。

从这两个参数的属性上来看,「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一,用户也形成了一致的习惯,但国内的形式则不尽相同,以至于一直颇具争议,不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论,可以听到两种不同的用户声音,并且都站在各自的角度阐述其道理。

举个例子,我们以同类型网站(淘宝和亚马逊)的打开处理方式进行对比,来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先,我们确定一致的功能场景:用户从首页中根据各种筛选条件,查找到心仪的商品。来看一下两个网站的处理方式:

可以看出基本是两个极端,差异非常明显,再来看个有意思的现象,亚马逊中国的商品搜索方式竟然又和淘宝一致了,难道链接打开方式的差异竟是中外用户习惯的差异?

这确实占了很大一部分原因,那么造成这种差异的原因主要有:

  • 早期的 W3C标准不支持 target=”_blank”(HTML语言中,在新窗口中打开链接)的属性,国外互联网普及也比国内早,于是用户慢慢养成了习惯。
  • 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面,可以鼠标中键、按住ctrl点击链接或者右键新窗口打开,此时用户更有选择权,可以自己决定打开方式;如果默认新开页面,则让用户失去了选择权。
  • 早期国内互联网发展较为浮躁,网站想通过新标签页打开方式,提高PV。
  • 国内网络普及晚,部分用户尤其很多老年人不习惯甚至或许不知道,页中有个后退前进按钮、面包屑可用,新开页面便于他们的操作。

那么,淘宝中所有的页面打开方式都是新开吗?不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部,如此区别设计的原因我认为有:

  • 用户的目的较为明确,查找对象确定。(用户想要查看的对象是确定的,如购物车中的产品,用户有明确的目标,找到链接打开页面即可,不像搜索查找商品,需要一步步缩小范围甚至比对查看)
  • 链接入口常驻在网站的信息栏,用户可以随时切换,操作方便,且不存在重新输入的成本。

关于这两种打开方式,到底哪种操作更顺畅,确实难分高下,就跟「确定和取消哪个在左,哪个在右」是一种性质的问题,没有好坏之分,关键是要看在哪种场景下使用更合适。

新页面打开适用的场景:

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:产品中的外链。
  • 存在多页面「比较」的操作,需要经常切换。如:淘宝商品详情。
  • 需要保留住前一页的操作不丢失。如:知乎上过滤出来的结果列表。
  • 功能分支存在穿插,当路径发生交叉时,最好新开页面。如:产品内部的跳转链接,导致信息关联的层级发生改变。
  • 具有辅助功能的操作。如:使用文档(PDF、图片等)需要来回参照。

当前页打开适用的场景:

  • 流程性的功能页面,前后操作存在关联和影响。如:下单支付、按步骤新增。
  • 同一层级内容间的操作。如:tab栏的切换。
  • 同一路径中的操作,用户当前的操作会对主页的内容产生影响。如:编辑一个配置,用户操作完,会回到当前页查看结果。
  • 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重,如果就「用户体验」一定要分出个高下,我个人还是比较支持默认「当前页打开」,从体验角度分析,「当前页打开」略胜一筹的主要原因有以下两个:

  • 尊重用户的决定。当前页打开,将更多选择机会留给用户(鼠标中键、按住ctrl点击链接或者可以右键新窗口打开),一个具有良好用户体验的产品,在用户做操作的时候,总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权,因为不同的人有不同的浏览习惯和使用需求。
  • 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候,可以顺畅的知道、理解,并且能预料到将会发生什么,不会被分神,也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计,而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时,或许「不强制用户」才是最好的体验。因为我们面临的用户多样,电脑操作熟悉程度多样,因此不同用户对于打开方式的习惯也具有多样性,这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下,在当前窗口打开链接,不失为一个选择,尊重用户自己的决定,让用户对交互界面自主可控。

三、弹出框

弹出框(弹层)又叫模态对话框,是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上,避免了页面跳转。

弹出框通常是为了显示一个单独的内容,在不离开整体页面的情况下有一些互动,提供信息和交互。

如下图知乎中的「写想法」,用户可以快速的在弹出框中记录个人想法,记录发布后,很顺畅的回到之前的路径上继续操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建,也都会采用弹出框的交互方式,当然前提是在弹出框中编辑的内容不是很多,此时弹出框不仅承载了信息编辑的功能,还可以作为上下文的跳转,帮助用户衔接路径。

如 iconfont 中的新建项目,用户新增后,页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景:

  • 内容简单,没有复杂的操作,且具有临时性。如:新增一个收货地址,进行简要的输入编辑。
  • 更为详细的辅助说明,是对当前内容的快速扩展。如:缩略图,点击放大查看。

因此,弹出框可以较好的实现上下内容层叠的感知,不打扰用户的主路径,同时作为页面承载元素和用户操作的补充,起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然,以上总结也是基于我个人的理解与经验,没有统一的用法和标准,在具体设计实践中,仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师,如何规划用户浏览路径,是个需要严肃对待的命题。没有绝对的好与坏,但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

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

论打造用户体验和数值系统,你得看看游戏类产品

用心设计

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


互联网产品有很多种,比如电商类、工具类、资讯类、财经类。但在看过很多产品之后,作者发现论产品体验,最强的是游戏类。当然游戏做为一种特殊的产品,有时候不会被列入以上类型,且游戏的产品经理一般被叫做游戏策划以及数值策划,分别负责不同的内容。

一、为什么说游戏的产品体验很好?

之所以这样说是因为游戏类产品有一个特点即它是没有用的,或者说它的唯一用途就是好玩。这样有一个问题便显而易见了,即对于大多数产品来说用户体验好是锦上添花的事情,而对于游戏类产品而言,这可能是唯一的卖点以及生死线。

举几个例子来说明:

  • 单位或者学校的官网,相信用过这些的人都会发现它们是多么的难用,而且很多年从不更新,但是你没有得选,只好使用它;
  • 微信以及 QQ 也是同理,虽然不是必选,但是以其覆盖率来讲,大多数人依然无法选择不使用它们。因此微信有足够的理由不全力以赴,腾讯完全可以将精力和人力投入到更加赚钱的网游领域。当然,最近新型社交软件(抖音、快手)的崛起似乎是给了腾讯一定的威胁,让它不得不再次严阵以待;
  • 而抖音和快手就得好好做了,必须足够好玩以及新奇,毕竟这并不是刚需,如果没有足够好的用户体验完全可能被删除。毕竟删除了他们对于用户而言几乎没有任何不便,还能节省不少时间;
  • 那么再进一步呢,再进一步就到了游戏类产品。游戏类产品的刚需性更加弱,而且还被全社会妖魔化,最近 steam 入华不利,以及孩子跳楼怪绝地求生又将它推向了风口浪尖。让不少人不得不呼吁「管管孩子,救救游戏」。

通过上面几个例子不难看出,随着刚需的减弱以及依赖性的降低,产品对于用户而言不可替代性就越低。比如单位或者学校的官网哪怕做成非图形界面,恐怕员工和学生都得自学了接着用。而游戏则不然,不仅面临着用户随时可以放弃的情形还得时刻注意政策动向。

因此即使不去使用产品,我们也不难猜出游戏类产品的用户体验必须非常好才行。毕竟只有有依靠的产品才能够做到有恃无恐,而游戏类产品则是时刻在刀尖上舞蹈,用户和政策都不敢得罪,必然得绞尽脑汁才能生存下去。

人都是有惰性的,一旦有恃无恐将没有多少人和公司愿意继续创新,毕竟你没得选。

二、以崩坏3为例谈谈用户体验

1. 从侧面展示其用户满意度

为何选崩坏3呢?原因很简单,因为它的推广模式以及用户体验都是一流的,不仅做游戏,而且 CG,漫画,周边同步推进。选择了3D萌风格后又通过哔哩哔哩这一平台进行了推广,对用户的了解之深入让人佩服。

b站的推广对于崩坏3而言,绝对是最好的选择可能都没有之一。原因很简单,两者用户重叠度太高了,且 b站专门有崩坏3类似的模块MMD 3D。当崩坏3到达b站后,up主们则自发的开始了宣传,例如热门中的第四位就是崩坏3的内容。

如果搜索崩坏3的经典角色 CG女王降临,可以得到如下结果:

仅前面几个视频的播放量可能就有近300w,而且是精准用户的300w次播放,其宣传的成功不难理解。当然这里你可能要问了,不是谈用户体验嘛,说这些和用户体验有什么关系。

其实是有关的,通过下面这张图很容易从侧面反映出用户对其热爱的程度。

这些视频全都是用户自制的,这种热爱是很切实的。试想当初最火的魔兽世界上映,很多人穿着联盟或者部落的衣服去电影院不就是对游戏最大的认同吗。

这里也是一样,你会为一个你不喜欢,用户体验差到崩溃的产品花费几天甚至一个月的时间去做它的周边视频吗,所以其优秀其实是毋庸置疑的。

2. 分析其用户体验

这张图片即该游戏的欢迎界面,接下来让我们细细来分析其用户体验点好在哪里。

上图即为游戏界面展示,仅一个界面就有很多点设计来增强用户体验。

  • 感叹号:代表了可以领取的奖励,大家领取奖励的时候是开心的,所以就给了最醒目的标志;
  • 波纹效果:次一级的提示,表示该功能下有可以做的事情,算是任务发布;
  • 收起功能:点击可以收起,然后截一张图,截图如上上图所示,很完美的效果,用户有炫耀的心理,所以可能会将其发朋友圈或者作为桌面,增强传播。当然这里不玩游戏的人可能不好理解,其实有的角色是非常难获得的,加上皮肤价格会很高,用户有足够的动力去炫耀;
  • 拍照功能:如上上图所示,可以对图像进行拍照,虽然也可以截屏,但确实是很贴心的功能;
  • 和看板娘对话:这样的做法并不少见,即给产品一个人设,增加用户的认同感,比如小冰等,这里的看板娘对话根据角色的不同而不同,甚至有的用户会为了看不同人物的对话而去收集人物,在增强用户体验的同时也增加了用户购买欲,一举两得;
  • 全屏VR:画面并不是静止的,如果手机旋转,图像会移动,给人手机屏幕后的场景是真实场景的感觉,虽然幅度不是很大,但还是有一定的 VR感的。

当然其优秀的用户体验点完全不止这些,作为一个体积3G多的程序有许许多多的界面,但介于游戏和产品的逻辑还是有区别的,就不展开继续讲了。但有一点是值得注意的,即整个游戏的任何界面几乎都是在用心去做,将用户体验做到了。

三、以崩坏3为例谈谈数值系统

数值系统顾名思义就是一个产品的数值设计,比如:得多少积分用户可以升级,在搞活动的时候是否应该赠送 VIP,如果赠送了 VIP 多久比较好,VIP 应该有哪些权限,如果各种等级的 VIP 功能是不同的,那么一个级别应该差多少。

以上仅仅是产品的数值体系,而游戏的数值体系就更复杂了,比如:游戏货币的产出量以及回收机制,维持整个游戏世界的装备价值以及金币价值,防止产生通货膨胀。

产品和游戏有这样的区别很正常,毕竟产品只是提供一种服务,而游戏更像是打造一个世界,要考虑的东西在一定程度上和现实世界有相似之处,比如:交易方式、税收、货币体系、资源体系、玩家社群、不同势力的实力均衡。

现在让我们来简单分析,当然我们只分析在产品中也存在的数值体系,毕竟相信本文的读者都是产品人而不是游戏迷。

1. 崩坏的VIP体系

VIP体系对于企业而言是非常重要的,因为这是企业收入最主要的来源之一。

所以诱导充值是所有企业都必须面临的问题,那么大多数产品有哪些套路呢,一般有以下三个常见方式:

  • 首冲优惠:第一次充值会比较便宜,降低用户付费门槛,而当用户真的使用过 VIP 之后,再回到非VIP 就比较难了,可能将一个本来不想充值的用户转化为 VIP用户,即由奢入俭难;
  • 连续包月:不少用户懒于去取消掉这个功能,对于那些对价格不敏感且摇摆不定的用户而言,让他们通过连续包月进行消费是不错的策略;
  • 活动赠送:完成一定的任务,赠送VIP,理由和首冲优惠很相似,都是降低用户进入门槛。

现在让我们再来看看崩坏3是如何设计其 VIP体系的。

初始奖励非常丰厚:让用户忍不住想要充值,如上图所示,只需要充值非常少的钱,就可以获取以上奖励,而这些奖励非常不错。这点最大的意义在于让用户愿意去尝试充值,只要充值一次,以后就有可能继续消费。

限时购买:促销虽然老套,但却十分有用,这种倒计时总能够刺激用户的消费欲望。

月卡系统:很有意思的系统,充值一次之后可以每天都领取奖励,而效果是直接购买奖励的十倍。但只有每天不断的进行领取才能够达到获得奖励的目的。这种模式其实就是用日活换金币,虽然用户节省了钱但却必须每日登录才能够获取这些金币。

类似的策略拼团也有使用,不过不是用日活换金币而是用用户换金币。

2. 数值系统

数值系统对于游戏而言是生命所在,史玉柱曾说过:我不担心别人抄走我的系统,因为数值体系他们抄不走。

崩坏3的数值系统就不提了,因为太过复杂,而且与产品相关性也不是很大。

对于产品而言,数值系统没有那么意义重大,但也需要很好平衡各方的利益,否则可能让产品迅速衰落。

一个简单的例子即会员该有多少权利,不同等级的会员权利应该如何区分。比如以视频网站为例,假设有两种级别的会员,大会员和小会员。那么用户就有三种,免费用户,小会员以及大会员。假设会员的作用是看高清视频,而视频的级别有五个,等级越高质量越好。

那么该如何设置他们的权限呢,可能的方式有以下几种:

  • 方式一:普通用户等级一,小会员等级二,大会员等级三;
  • 方式二:普通用户等级一,小会员等级三,大会员等级四;
  • 方式三:普通用户等级一,小会员等级四,大会员等级五;
  • 方式四:普通用户等级二,小会员等级三,大会员等级四;
  • 方式五:普通用户等级二,小会员等级四,大会员等级五;
  • 方式六:普通用户等级三,小会员等级四,大会员等级五。

当然一般的 VIP 肯定不止有视频权限,还会附带一些其他权限,比如可以有打赏用的币,可以有更好看的头像框,文字的颜色是可以选的等等。

不难发现,这将是非常复杂的一个体系,哪种体系都对一些用户有利,对另外一些用户不利,如何合适的定制产品的数值系统就是一个很复杂的问题。如果体系偏向免费用户,可能让付费用户付费意愿降低,如果偏向付费用户,可能让免费用户觉得没有存在感,直接离开。

四、游戏给产品的启示

用心做产品是有用的:如今流量获取非常困难,产品的成功很大程度上取决于是否有流量扶持。这对于产品人而言是比较沮丧的现状,毕竟辛辛苦苦做一个产品结果比不上某些巨头产品的一个入口有效。这种情况确实是存在的,但我们也要相信产品的优秀绝对不是没有意义的;

可以用日活换收益:现在的产品VIP系统大多都是充值后获得权限,但完全可以做以下这样一个策略。比如:视频网站的 VIP 是一个月15元,那么我们可以推出一个套餐,一个月只要5元,但是这个套餐有个条件是每天登录后第二天可以享受 VIP服务,如果用户有一天未登录,那么第二天就没有 VIP服务可以享受,这种策略其实就是用10元钱换取了一个用户的每日登录;

精准营销事半功倍:崩坏3在 b站的广告效果非常好,而且直接引起了 up主的关注,他们会再次创作内容对崩坏3进行推广。但如果将这个广告投到58同城呢,可能就没有什么意义了;

数值系统平衡各方:免费用户和付费用户的关系非常复杂,两者既有利益冲突又可能相互转化,因此做好平衡非常重要,不要得罪任何一方。




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

案例研究:一款助眠APP的UI设计分析

蓝蓝设计的小编

现在,我们发现健康类APP越来越多了:健身应用程序、跟踪器、卡路里计算器、水和食物日记、活动提醒等等,这些APP的确对我们保持日常健康提供了帮助。

过瘾!这17个海报设计小技巧,果断收藏了!

博博

过瘾!这17个海报设计小技巧,果断收藏了!

图片来源:古田路9号、优秀网页设计、微博

最近设计界有两个段子火了

甲方爸爸说:

“用PS不专业要用photoshop”

过瘾!这17个海报设计小技巧,果断收藏了!

另一个就是

女设计师和甲方爸爸网恋,被骗稿!!

过瘾!这17个海报设计小技巧,果断收藏了!

讲真,大大君我看到这两个段子

默默心疼设计师几秒钟

如果以后还遇到这种奇葩

就把这篇文章砸他脸上

劳资设计一张海报这么难,你的脸够本吗?

过瘾!这17个海报设计小技巧,果断收藏了!

今天大大君我就教大家

17种常见的海报设计技巧吧!

文字分散法则

字体分散的海报设计技巧是我们经常见的一种设计手法,通过将字体拆分重组、改变字体大小、排版来起到吸引目光的效果。

例如下面这些

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

故障效果的设计法则

故障效果的海报设计通常会用把设计的主视觉图形或文字,进行幻影、扭曲、重合叠加等形式去呈现,能迅速将人的眼球吸引过来。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

色彩叠加海报设计法则

色彩叠加法则其实是海报色彩设计技巧中的细分领域,其特色是利用两种或者两种以上的颜色进行画面的切割、重组、渐变、叠加等设计手法,去突出整体画面的主焦点,若色彩搭配好了,会起到非常震撼的视觉效果。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

文字切片海报设计法则

文字切片其实也就是把文字按视觉呈现的需求,进行切割,其设计的优势在于字体呈现较为立体,画面的节奏感强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

图文叠加的海报设计法则

图文叠加的海报设计法则,多用于电影海报,将人物或者场景与文字叠加,营造一种重复错落的视觉感。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

液态效果的海报设计法则

液态效果的海报设计通常会选择用较为丰富的颜色进行渐变,高斯模糊或者扭曲的形式去呈现,画面的视觉大多以抽象的概念去呈现。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

双重曝光的海报设计法

双重曝光的海报设计用人或者动物与第三方元素进行重合、它最大的特点是利用光与影的结合,打造出比较跨时空的错落感,这种设计手法多用于电影海报。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

单字母的海报设计法则

英文字母的玩法有很多种,叠加,变形、重组等,单个的英文字母同样也可以这样玩,打破画面的单一性,变得趣味性很强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

正负形海报设计法则

正负形的海报设计其亮点在于利用负空间形成巧妙构图。一张图中隐藏着另一个画面。

大多数的设计师会选用负空间的方式,将视觉中心聚焦在一个比较小的物体上,并在周围留出视觉呼吸空间。将文本置于负空间内,来吸引视线。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

立体海报设计法则

3D视觉效果的海报设计一直都是设计师们比较热衷的表现手法,将字母或者图案加上阴影效果,让主视觉画面凸出来。或者融入几何的图形元素,将平面的主视觉变得立体化。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

文字海报设计法则

文字海报设计包含很多种表现形式,利用满版、留白、S型等排版形式布局画面,让文字代替图形去表达主画面。这也是较为常见的海报设计形式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

纸质效果的海报设计法则

纸质效果的海报设计其实也属于立体海报的一种,形象和感觉的组合,是纸质效果海报设计的关键。

过瘾!这17个海报设计小技巧,果断收藏了!

而纸张给人的感觉是质感和厚重这两种形式,所以画面的呈现因围绕这两种形式进行展开。

过瘾!这17个海报设计小技巧,果断收藏了!

照片切割法则

照片切割也就是和文字或图形进行重合、叠加、打散的表现手法来增加海报设计的层次感。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

透明效果海报设计法则

海报设计中,如果画面的颜色太过单调,可以将部分块面用较为鲜艳的颜色进行突出,这种表现形式通常适用于海报中文字较多的处理方式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

复古风格的海报设计法则

复古风的海报设计通常会选用颜色饱和度较低的颜色,搭配毛笔字体或肌理的触感进行呈现,这种设计手法,大多会用于电影海报或者艺术展览之类的范围。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

插画风格的海报设计法则

插画风格的海报设计具备很强的讲故事能力,无论是小清新的画风还是较为夸张的插画手法,都能将整个画面变得生动活泼了很多,这也是很多设计师最常用的海报设计的表现形式。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!

渐变的海报设计法则

渐变色系的海报设计,用很多种颜色进行巧妙融合,画面分为简洁和个性两种形式呈现,视觉冲击力很强。

过瘾!这17个海报设计小技巧,果断收藏了!

过瘾!这17个海报设计小技巧,果断收藏了!


设计方法:用问题引出答案,群策群力绘制用户体验地图

蓝蓝设计的小编

周五参加了港大space学院的工作坊,感谢Google张英惠老师的精彩授课,学到了通过发问找到解决问题的方法,群策群力绘制用户体验地图。IMG_20170922_152217.jpg

烦人的“小妖精”:浅谈小红点的设计

资深UI设计者

导语

随着各类App的业务功能不断丰富,小红点已经成为互联网从业者们最常使用的运营工具之一,每当有新的运营内容或新功能上线,大家的做法往往是“在那放个红点就行了”。然而简单粗暴的形式以及不加节制的投放,让小红点变成了人人厌烦的“小妖精”。本文从设计的角度出发浅谈小红点的一些设计细节,期望引起大家对小红点的关注,在这里抛砖引玉,也期待感兴趣的小伙伴一起探讨。

烦人的小红点

人类似乎天生对不对称,不和谐的事物有厌烦心理,并且想要去纠正这些“错误”,简而言之就是大家平时所说的“强迫症”。而小红点则完美利用了这一人性的弱点,它就像白嫩脸颊上长出的一颗小痘痘,让人忍住不去要去挤破它。因此,小红点也成为了一把产品运营利器,只要投放在某个业务入口,就几乎没有用户会对它熟视无睹,而当用户忍不住要去轻触消除它时,产品侧为业务导流的目的也就达到了。

那么问题来了,用户喜欢小红点吗?在Google和必应上搜索关键词“App 小红点”,几乎有一半的搜索结果是“教你如何消除小红点”。

日历

链接

个人资料

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

存档