澳纽网

优设 - 澳纽网Ausnz.net聚合阅读



正在流行的10大动态设计神器!设计老手都在用!

「葡萄美酒夜光杯」。喝葡萄酒就要用夜光杯,古人都知道好的东西就要用好的器皿来盛,才会显示出好东西的美感、价值。

同样,一份好的设计作品,如果配上灵巧的「动态」效果,那画面简直令人赞叹。比如,下面这两页 PPT 设计作品。

△ AbleSlide × TalkingData

△ AbleSlide × 成都市双流区

这是 AbleSlide 操刀过的经典发布会 PPT 作品。

与常规静态页面不同,这两页 PPT 加入动态效果,不仅提升了页面的精致感,更让内容演示逻辑性更强,结合超宽屏,极大增强了现场观众的沉浸体验。

这也就是为什么 AbleSlide 的作品一经发布,就会惊艳全场。

△ AbleSlide × 融创

观众的眼睛总是挑剔,单纯的静态视觉呈现已经难以抓住他们的眼球。

从文字到图片,再到视听语言、3D动画甚至是VR……技术突破不断催生着更高的演示需求。

回归 PPT 演示的本质,动效的加持不仅能让页面更生动,内容表达更到位,更能让演示扣动人心。

但是,对于更多数的设计师/ PPTer而言,炫酷操作往往意味着较高的技术门槛,动辄Ai、Pr、Ae、C4D……

幸好总有这么一些人,提供了高效便捷的解决方案。比如我们准备的这10个正在风靡全球的动态设计神器,分享给你们,希望你们会喜欢。

Panzoid 炫酷片头生成器

试玩地址:Panzoid.com

神器简介:在线生成炫酷视频片头

使用场景:PPT 动态封面、视频片头

上面的炫酷片头不用 Ae 如何制作?只需要一个神器网站 Panzoid 就能轻松生成。

Panzoid 官网提供海量动画视频模板,配合动感 BGM,瞬间制造炸裂感。

更燃的是,Panzoid 强大的编辑器功能可以让你自由进阶,创作更多炫酷效果。

操作简单直接,进入官网选择想要的模板,单击在 Clipmaker 中打开。

点选「Objects」,找到「Text」,直接修改文本和字体效果,注意文本一般是多层,需要逐层修改。右侧编辑区能够实时预览效果。

设置完成后,渲染下载,不出5分钟搞定。

当然,这只是很初级的玩法,Panzoid 强大的编辑器功能能够让你轻松实现不亚于主流视频制作软件的体验,具体怎么玩,看你的了。

划重点:神器本身默认的是英文文本,如果想使用中文文本,需要上传字体。具体操作看图:

如果仅仅制作片头已经满足不了你,接下来这个神器能够让你轻松上手制作商业级「大片」。

Biteable 在线动画视频制作器

试玩地址:app.biteable.com

神器简介:快速生成动画视频

使用场景:根据模板定制多种场景视频

这同样是一个非常适合小白上手的视频制作神器。

打开网站,你可以看到详细归类的模板,随便点开一个,都是专业级的。

最贴心的是,Biteable 将模板以视频分镜的形式呈现,直接上手就能修改,比套用 PPT 模板还直接。

修改之后,还能进一步编辑色彩和选用音频。

当然,Biteable 也不排斥进阶使用,你可以根据自己的内容和它提供的素材自由发挥。

你可以去看看官方的宣传视频,感受一下效果有多赞。

另外,Biteable 团队在 Facebook 的官方账号会经常性地更新他们最新推出的内容,感兴趣的可以去关注。

不想直接动手?OK,无版权视频素材库了解一下?

Mixkit 免费视频素材网站

试玩地址:mixkit.co

神器简介:免费无版权视频素材网站

使用场景:PPT 动态视频背景素材

这个神器网站每周提供10个免费的视频素材下载,分类齐全,视频质量高。

这意味着,你的 PPT 可以肆无忌惮地使用高清无码无水印的素材。

而对于这样免费无版权的视频素材下载网站,我们还为你准备了一打,请放心食用。

Videezy:https://www.videezy.com/

IgniteMotion:https://www.ignitemotion.com/

Footagecrate:https://footagecrate.com/

这就解锁了一片视频素材的海洋,那下面这样的 PPT 对你来说是不是就轻而易举了呢?

聊完了视频,我们再来看看另一个维度——动态元素。

由于 PPT 软件限制,动态元素一般都只能以 Gif 格式图片来呈现。所以要搞定动态元素,首先得搞定 Gif。

Screen to Gif Gif动画录制神器

试玩地址:screentogif.com

神器简介:小众的 Gif 录制软件

使用场景:各种形式的 Gif 制作

这是一个轻量软件,安装包仅2.7M,但是功能却相当强大。

主要提供了4种形式的 Gif 制作:录屏、摄像头、画板以及媒体转换。

界面非常简约清爽。

借助这个软件,你就可以轻松获取许多高级的 Gif,比如下面这波肆意的放射……

这个神器还提供了专业的编辑器,相信许多功能能够让你真正体验到编辑 Gif 的乐趣。

问题来了:使用上面这个神器制作的 Gif,效果确实很赞,但图片体积也十分庞大。

大多数时候我们对 Gif 的体积要求很严格,有没有什么办法输出高质量又小体积的 Gif 呢?还真有!

Ezgif 全能型在线Gif编辑优化神器

试玩地址:ezgif.com

神器简介:在线 Gif 编辑优化神器

使用场景:Gif 压缩、特效制作

这个神器可以完美解决你在面对 Gif 时的各种问题,堪称全能。

压缩与转换功能绝对是这个神器的一大亮点,你可以通过上传视频或者 PO 视频 URL,将视频转化为 Gif,也可以直接上传体积过大的 Gif 原图。

一键优化,一键导出,质量高,体积小。

不仅是PPT,对于长期被「2M图片大小限制」折磨的新媒体小编想必也是解锁了新姿势吧。

这还没完,在网站的最下方还链接着一打的格式转换工具,包括 Gif 向 MP4 的转换,甚至还有 pdf 向 Gif 的转换……更关键的是,统统免费。

搞定了 Gif,我们对于动态元素的发掘和应用就可以为所欲为了。

imagemotion 图像动态效果生成器

试玩地址:mikesreda.com/imagemotion/

神器简介:秒做动态海报的PS插件

使用场景:静态图片动态化

这是一款 PS 插件,首先你得进行下载安装,其次,为了保证使用效果,建议将 PS 切换至英文环境。

操作十分简单,在拓展里找到 imagemotion,根据插件提示,用画笔描出需要添加动效的主体,然后调整起始点和终点位置,轻松获得大片级动态海报。

一张图,一根笔,想动哪里动哪里。

当然,这款神器能实现的远不止这么简单,在它的官网,你能够看到脑洞大开的设计师们是如何将它「玩」到极致的。

制造一波沙尘弥漫的动感。

又或者,燃起一团烈焰。

这样极具冲击力的视差动画也可以秒杀。

什么?打开PS太麻烦?别急,这样的动效并非 PS 的专有。

长期紧盯@Simon_阿文 微博的我,发现他最近又有了新动作,这几张打卡又一次惊艳到我了。

深挖之下,终于探索到这款炸天的手机APP——Pixaloop。

功能上与 imagemotion 类似,同样是将静态图片处理成动态效果,不同的是,操作换成了手指。

至于体验有多好,我相信阿文的打卡已经证明了一切。

所以,还有什么能阻止这个世界燥动起来?

Codepen 巨量炸裂视觉生成器

试玩地址:codepen.io

神器简介:通过代码生成炸裂视效,结合录屏神器转换为动态元素

使用场景:获取炫酷视效背景

大名鼎鼎的 codepen 作为代码发烧友的聚集地,收录了超多视效炸裂脑洞大开的代码,全是由大神自发上传。

单纯对于 PPT,可能并不需要运行到那么复杂的代码,但是换个思路,这些炫酷的视觉呈现不正是我们制作 PPT 的极好素材吗?

至于怎么获取,相信掌握 Screen to Gif 和 Ezgif 的你,不会有太大压力。

甚至有些素材本身,只需轻轻截图,就堪称惊艳,比如这种浮动粒子效果:

还记得阿文推荐过的各种生成器吗?有很多就是在这里挖掘到的。

在搜索栏检索「Generator」,瞬间找到一堆生成器,比如这个渐变流动层生成器。

或者这种骚气的「Art of Noise」。

试试搜索关键字「Art」、「Design」等,说不定你能探索到更多炫酷的神器。

这里还帮你整理了几款有趣的,你可以拿去随意把玩。

Circlez:https://codepen.io/chambaz/pen/zyPBMW

Parallel dimension:https://codepen.io/funxer/pen/Zvjebx

Bokeh Wallpaper Generator:https://codepen.io/ajm13/pen/Bvczj

随便试玩了一个,打卡出这样的动感页面也只是分分钟的事情呢。

穿梭过代码的浩瀚世界,下面我们聊点「小东西」。

Preloaders 动态icon下载平台

试玩地址:icons8.com/preloaders/

神器简介:提供免费动态icon下载

使用场景:动态icon

icon 的使用在 PPT 中属于常规操作,但如果让 icon 自己动起来呢?

比如这样:

你的 icon 动起来要几步,我不管,反正我只需要一步。

进入 Preloaders 网站,随便点击一个分类,就能看到很多动态icon,大多数可以直接免费下载。

在下载界面,你还可以调整 icon 的大小、颜色等参数。

但也有问题。用这个神器下载的动态 icon,不时会带有白色的背景,放在非白色背景中会显得非常丑。

别忘了 PPT 里自带的设置透明色功能,秒去白底。如果追求精致,还可以打开 PS 进行优化。

其实,还有一个类似的神器网站 LoadingBar (https://loading.io/progress/)。

相比起来,LoadingBar 的动态 icon 质量更高,资源更丰富,甚至还可以完全自定义动态icon的颜色、动画……

可能唯一的缺点就是,需要付费订阅。

搞定了动态 icon,接下来,我要向你展示一个让阿文「爆粗」的神器。

Vectary 在线 3D 建模工具

试玩地址:Vectary.com

神器简介:一款让阿文爆粗的在线3D建模工具

使用场景:在线3D建模

作为一款3D建模工具,它的操作门槛并不高,功能却十分强大,堪称实时渲染的在线版 C4D。

或许你还可以试试结合 PPT 3D 功能和平滑切换,体验一把 PPT 与3D动感的完美结合。

几张阿文的打卡作品感受一下,顺便膜拜一下这位坐我隔壁的大神。

具体玩法没有太多好说的,主要考验创意脑洞和空间感。

特地为你找来了官方提供的视频,真的很厉害。

口袋动画PA 极致PPT动画插件

试玩地址:papocket.com

神器简介:一键生成高端 PPT 动画

使用场景:PPT 动画特效

PPT演示更有动感,肯定不能缺少 PPT 动画的应用。

作为一名 PPTer,对口袋动画一定不陌生,但我依然要吹爆强推。

口袋动画PA 对 PPT 动画的深度研究已经到了令人震惊的地步。

插件涵盖了包括片头、转场、智能动画在内的一系列操作,只需要稍微设置,就能生成惊艳的动画效果。

玩法真的太多,由于篇幅原因,这里只给你简单介绍几个。

片头动画,适合于进行 PPT 封面设置。

文本动画,针对文本内容进行炫酷动画设置。

录制动画,顾名思义,就是能够让对象根据录制好的路径、效果进行随心所欲的运动。

此外,口袋动画PA 还提供了专业模式,结合函数、公式,PPT也能造「大片」。

总结

做出有动感的 PPT,让你的演示燥动全场,我推荐给你这十个神器:

如果你还不会使用上面10大动态设计神器,我们制作好了一份「全套神器操作流程PPT」。

下载链接:https://pan.baidu.com/s/16Fz6NhlI3LdJfmVu4Yu7mA 提取码:qab6 ,就能得到。

如你所见,从 PPT 设计出发,但这些神器已经远远超离了 PPT。

也如你所见,并不是每一个神器都有很高的门槛,都难以接近。

神器能够被称作神器,并不在于它本身有多复杂,而是在于它能够启发一种新的思维和视角,或者带来一种独到的解决方案。

正如阿文所说,与其把自己圈在 PPT 中坐井观天,整天妄想着逆袭 PS 逆袭 AE,不如保持好奇心,跳出来看看外面的世界。

你的脑洞和创意,才是最新锐的设计神器。

优设大课堂

Source: 优设网 – UISDC | 27 Mar 2019 | 3:22 am(NZT)

同样加素材,为什么你是堆砌,而高手就是在做设计?

平面设计被定义为:通过各种手段创造和结合图片、符号、文字、色彩(构成要素),借此做出用来传递信息的视觉表现。关于设计的构成要素很好理解,而关于创造与结合这些要素的手段,很多人只是做到了堆砌,以至于做出来的设计很不整体。有人可能会问,什么是整体?设计中的整体是指画面中各个元素要结合得很自然,要达到1+1+1=1的效果。

我们拿砌房子举例,如果只是把砖头、水泥、钢筋、木材堆在一起,那还是一堆杂物,但如果通过建筑工人把它们按照一定的架构建成房子,它们就成为了一个真正的整体,设计师要做的也是这样的事。

那么如何解决设计不够整体的问题呢?葱爷概括了5个增加设计整体性的技巧,不过这5个技巧主要针对的都是图片和图形元素,而非文字。

使相连元素的轮廓形成互补

当版面中相连元素在轮廓上形成互补时,感觉就像它们之间彼此有作用、互有影响,所以看起来会更自然一些。

例如在下图的作品中,标题部分与左下角、右上角这两个卡通人物在轮廓上都没有互补关系,这两个卡通人物只是被机械地堆砌在标题周围,融合得比较生硬,所以该画面是不整体的。

调整之后的方案刻意把标题做了错位处理,使左下角和右上角形成两个刚好能融合卡通元素的缺口,从而使这三个元素结合起来不再突兀。

这样的效果就整体多了,这里为了增加画面的空间感,还把标题做了透视处理。

统一画面的色彩、风格和字体

统一是设计最基本的原则之一,指同一画面内的色彩、元素风格、字体要统一,比如主色和字体最好都不超过三种,元素的风格只能保持一种(混搭风格除外)。缺乏统一的画面不协调,自然也会显得不整体。

举个例子,在下面这款包装设计中,很明显小孩与其他元素的风格不一样。比如其他元素都没有黑色描边,而小孩图形却描了很厚的黑边,牛奶飘带等元素是通过渐变方式来创造体积感,而小孩图形却是用比较硬的明暗色块强化体积感。所以我们可以感觉到小孩与整个画面有点格格不入,也就是不整体的表现。

正确的做法应该是把小孩的风格与整体的风格统一,如下图:

把元素集中摆放

有些人在做设计的时候喜欢把所有空白都填上元素,这么做不仅会造成画面拥挤不透气,还会使得画面很散。如果版面中的元素东一个西一个,像一盘散沙一样,那也会显得很不整体,因为画面的视觉不集中,各元素之间也就很难关联起来。

下图的海报就是这样,版面的上下左右都有元素,而且很分散。

正确的做法是把各元素集中排列,使各元素紧密相连,当然,个别元素也可以与「大部队」分散开来,创造出鲜明的稀疏对比,如下图:

除了通过移动元素使其集中起来,其实也还有另一个技巧可以达到此效果,即在元素之间增加一个元素把它们贯穿起来。比如在下图中,文字下方的元素就很散。

所以设计师没有这么处理,而是在元素下方增加了一个九宫格色块,于是这些元素就形成了一个整体。

创造一个视觉焦点

前面我们刚说了元素要集中摆放,但做到了集中也不一定会整体,画面还需要有一个视觉焦点。

比如在下图的 banner 中,所有元素都集中在画面中间,但是感觉仍不整体,因为画面缺少主次之分,没有重点的画面就像没有将军的部队,会缺乏凝聚力。

所以在方案二中,人物被拉大了好几倍,装饰的圆圈图形也拉开了大小对比,使得人物部分成为视觉焦点,于是画面的整体性就加强了。

强化不同元素之间的过渡

元素与元素之间有过渡的话,它们的衔接就会更自然一些,也会更像一个整体。

这一点其实主要体现于合成图中,合成就是将原本不在一起的元素组合在一起,并尽量达到真实、整体的效果,而如果各元素之间没有过渡,结合起来就会很假。

那过渡在设计中具体指代什么呢?举个例子:下图是一张简单的合成海报,从图中可以看出云朵、天空、海水与背景明显没有融合成一体,下面的海草也没有融入大环境,这都是因为元素与元素的结合处缺乏过渡。

所以要提升天空与背景接触地方的亮度,加强海草的明暗对比度,并且在水草下方增加了一层水波,目的都是为了让元素与元素之间的过渡更自然。

总结

我们经常说细节决定成败,但是这个说法成立的前提是你已经把整体做得足够好了,整体既指设计的调性要协调、构图要平衡,也指画面中的元素要结合得有章法,要以一个整体、一栋房子的形象呈现在受众面前。

欢迎关注作者的微信公众号:「葱爷」

优设大课堂

Source: 优设网 – UISDC | 27 Mar 2019 | 2:16 am(NZT)

创造优质成熟产品的启发式评估是怎么回事?

编者按:无论是APP还是网页或者某项服务,在完成设计之后,投入市场之前,总需要通过专业的测试和评估来尽可能减少潜在的问题。专业的评估方法和测试团队,才能把好发布之前的最后一道关。今天设计师 Adam Fard 将会分享一套完整的评估测试策略——「启发式评估」。

当我们想到一个产品的设计时,首先想到的是它看起来怎么样:它引人注目吗?这些颜色互补吗?它是否具有吸引消费者的审美吸引力?所有这些技术层面的努力都是必要的,但是一个真正好的设计远不止如此。因此你不仅要确保产品外观完美,而且还要提供无缝的用户体验。

「好的设计实际上比糟糕的设计更难被注意到,部分原因在于好的设计非常符合我们的需求。好的设计是无形的。」
– Donald Norman.

良好的可用性反映了产品的质量。因此,可用性越好,就会有越多的用户参与到产品中来——投资回报率也就越高。这是一个成功产品和满意用户的终极循环。

创造一种看起来不错的产品很容易,但如何设计一种实用的产品呢?这需要做各种可用性测试,以确保你的产品是用户友好型的。最有效的方法是启发式评估。

究竟什么是启发式评估,你的产品真的需要它吗?让我们通过本文来找出答案。

什么是启发式评估?

启发式评估是设计一个杰出产品的关键部分,用户可以很容易地参与其中,并在他们的互动中发现价值。它是对产品的用户界面的全面评估,其目的是检测用户与产品交互时可能出现的可用性问题,并确定解决这些问题的方法。

启发式评估过程是根据一组预先确定的可用性原则(我们称其为启发式方法)进行的。这个过程依赖于几个可用性专家运行的一次深度测试。尽管启发法有很多,但在可用性检查中最常用的标准是Jacob Nielsen在1995年开发的,称为用户界面设计启发式方法

除此之外,其他启发式方法包括Ben Shneiderman的8条界面设计黄金法则、Jill gerhard – powals的10条认知工程学原理以及Alan Cooper的《About Face 2.0:交互设计的本质》。如果你是第一次做启发式评估,我们强烈建议使用尼尔森的启发式方法。这个特定的启发式集合包含10条经验法则,这些经验法则已经被证明可以产生优秀的用户体验设计。

此外,还有几种启发式评估的检查方法——启发式分析、认知演练和用户测试。虽然最终的目标是相似的,但每种方式的效率和有效性是不同的。

启发式分析、认知演练和用户测试之间有什么区别?

通常情况下这些术语是可以互换使用的。然而,它们的功能还是存在差别的,并且各有千秋。为了更好地说明每种可用性评估方法,让我们仔细对其进行研究。

认知演练

用户测试

启发式分析

这三种可用性检查方法中,启发式评估因为测试更加严格,过程更为体系化,因此它是最严谨的。评估人员还需要深入理解启发式方法、人的可变性、交互设计(IxD)、人机交互(HCI)和用户体验设计。此外,评估人员通常具有相关学科的背景,如心理学、计算机科学、信息科学和商业等。

这就是为什么我们将启发式评估作为完美用户体验设计的检查方法的原因所在。

使用启发式分析进行可用性评估

5-8名启发式评估人员通常可以识别出80%以上的可用性故障。

启发式分析是一种可用性检查技术,它是由一小群可用性专家(理想情况下是5到8人)测试指定数字产品的UI。启发式评估人员使用产品并在出现可用性问题时标记问题,将测试结果与给定的启发式方法进行比较。

在评估过程中,评估人员都会根据问题的严重性级别来进行标记。这样,项目经理和设计团队就可以根据每个问题的严重性等级来组织人员解决问题。他们会对任务进行优先级排序,并确定哪些问题需要立即进行干预,然后按顺序逐一解决。

审查结束后,启发式评估人员将提供关于数字产品可用性状态的全面报告。虽然一个经验丰富的评估人员能够标记出最关键的UX问题,但同时使用几个评估人员的服务是更稳妥的选择。任命5到8名启发式评估人员可以识别80%以上的可用性故障。这应该足以提高你的产品设计的质量。

为什么需要进行启发式评估?

除非你想要一个平庸(或糟糕)的产品——既不能吸引新用户,也留不住老用户——否则你迫切需要一个启发式的评估,并认真对待评估结果。进行启发式评估对于改进数字产品的总体设计非常重要。

如果你想知道为什么你的产品性能这么差,那么可用性检查会给你答案。也许你需要更清晰的导航或者更短的注册表格。但如果你不做这些测试,你就永远不会知道答案。所以不要再拖延下去了。

启发式评估的优缺点是什么?

在开始启发式评估之前,了解它的优点和缺点是很重要的。

优点

缺点

如何进行有效的启发式评估?

准确的启发式评估需要做详尽的准备工作,并要求严格遵循指定步骤。跳过一个步骤可能会使测试结果无效。以下是有效的启发式评估的展开步骤:

第一步:界定评估范围

首先要做的是根据预算和截止日期,确定你的评估范围。是要测试产品的每个方面,还是专注于特定的用户流程?如果您需要在短时间内确定主要问题,那么最好限制范围并将重点放在精确的参数上。

思考需要测试的特定可用性参数:例如注册、登录/退出、电子邮件注册、导航、购物车和结帐。有限的范围更容易控制和评估。

问问你自己:需要测试什么?

第二步:了解终端客户

了解终端用户的身份及目标将有助于可用性评估。这是规划用户流的一个重要部分,因为不同的用户群体有不同的期望。例如,一些用户可能不觉得注册有什么问题,而另一些用户可能认为这是一个过于繁琐的步骤,因此放弃了你的产品。

用户动机取决于各种因素,包括人口统计、个人偏好、技能集等等。了解终端用户并创建高级用户角色,这在评估过程中对评估人员非常有帮助。

问问你自己:产品为谁而设计?

第三步:选择特定的启发式方法

为评估人员选择测试过程中所使用的启发式方法。这将确保他们在整个评估过程中使用相同的指导方针。我们在上文中提到了一些最流行的启发式方法,不妨去回顾一下。

如果没有选定的启发式,可用性评估的结果将是不可靠的、不一致的且无用的。可以说你所有的努力都付诸东流了。

问问你自己:应该遵循哪种可用性原则?

第四步:建立评估系统并识别出问题

确定评估人员评估产品的可用性的整套体系和方法。尝试建立一个简单的评估系统,使用严重性评级(严重问题、正常问题、次要问题、良好实践)或交通灯方案(红色、橙色、黄色、绿色)来构建系统。无论你选择哪种评估体系,都要事先与评估人员讨论,以确保大家每个人的意见都一致。

此外,评估人员应详细记录他们在哪里遇到问题以及问题的严重级别,以此实现对问题的追踪。这将有助于以后组织设计团队的后续处理。

问问你自己:评估人员将如何评估和报告可用性问题?

第五步:分析总结

随着评估接近尾声,就可以开展收集、比较和总结结果的工作了。使用多个评估人员的一个重要优势是,他们可以发现同行遗漏的问题。

首先删除重复项,并根据每个问题的严重性级别组织数据。这将有助于设计团队确定工作流程的优先级。以此作为改进用户体验设计和全面改进产品的起点。

问问你自己:结果如何?

应该为启发式评估付费还是自己做?

对于是否应该为启发式分析这项业务付费,许多公司都是持观望态度。有些人可能会说他们已经有了一个由UX设计师组成的内部团队,为什么还要支付额外的费用呢?另一些人会觉得如果这样做从长远来看对他们的产品有益,他们就愿意付钱。

但是完成完整的设计在进行启发式评估,所有的过程加到一起可能会超出团队的承受极限。虽然您的产品可能有一个很棒的UX设计师团队,但是您需要考虑在评估他们自己的设计时可能出现的个人偏好,尽管他们也不是有意为之。

花费数小时对设计进行研究、查看和测试将耗费相当多的精力。在这种情况下,为启发式评估付费是一个不错的选择。

如果你想确保自己的设计在进行启发式分析时符合所有条件,明智的做法是寻求专业的UX设计机构的帮助。

话虽如此——拥有第三方和你以及你的团队一起工作是没有问题的。从长远来看,这个小小的投资会节省你的时间和(很多)钱。因此,在回答「是否应该为启发式评估付费」时,先问问自己以下两个问题:

  1. 你相信你的用户体验设计团队会100%客观地进行评估吗?
  2. 你能承担一个可能阻碍你的产品成功的有偏见的启发式评估吗?

答案是显而易见的。

结语

你会惊讶于你的产品可能会有多少可用性问题。一个可用性专家进行启发式分析就足以识别和修复用户体验设计中的主要问题。一旦进行了必要的更改,您就会注意到用户参与度、回弹率、产品销售和用户保留率方面的差异。

此外,不要将自己局限于一种可用性检查方法。将启发式分析与认知演练和用户测试相结合到一起,可以确保您的产品设计符合标准——从设计专家和终端用户的角度来看都是如此。

归根结底,关键在于你是想开发出一款强大的产品,还是开发出一款注定会失败的产品。你希望消费者在使用你的产品时满头黑线,还是享受其中?选择权在你,请做出明智的选择。

题图来自设计师 Rei Kacanja

转载请注明原文链接:What Is Heuristic Evaluation?

优设大课堂

Source: 优设网 – UISDC | 27 Mar 2019 | 12:03 am(NZT)

高手出品!快速提升设计感的7个版式小妙招

看了很多版式技巧仍排不好版?懂得很多套路仍做不好设计?其实也正常,因为大部分技巧都比较笼统,每个人用起来也会有不同的效果,所以葱爷特地总结了7个比较具体的小技巧,算是属于一学就会且很容易出效果的排版小妙招,希望能帮你解决一些比较具体的问题。

文叠文

该技巧操作起来很简单,就是在标题或内文下面,增加相关的英文单词或阿拉伯数字就可以了。不过在处理下面的文字时要注意:

之所以这么处理是为了增加版面的层次、对比,以及丰富元素。

给标题增加小色块

这是增强标题设计感的另一种处理方式,单纯的文字标题难免显得单调,我们可以通过增加辅助元素使它变得更丰富一点,比如在文字的基础上加小色块。

色块的高度最好大于笔画厚度,小于文字的高度,加上去的方式可以是叠加于文字之上,或是置于文字底部,创造出文字的一部分在色块内一部分在色块外的对比效果。还有,色块的颜色最好来源于版面中的其他元素。

用斜线或点填充空白

在做设计的时候常常会遇到这两种情况,一是版面中会多出一些影响版面平衡的空白,但已经没有合适的内容可以填充了,如果硬塞一些装饰文字或者图案,很可能会弄巧成拙;二是有的区域小元素小信息比较多、比较散。怎么办呢?

这两种情况都可以通过该方法解决。把斜线或点重复排列成一个矩形,然后把它填充在空白处就可以平衡版面,且不会造成突兀的感觉,如下图案例:

要点:线条不宜太粗,点也不宜太大,而且此方法只适合填补小空白,不适合填补大面积的空白。

在比较散的元素下方排一组斜线,可以把各个分散的元素联系起来,使其成为一个整体。如下图:

把背景分成两个斜切的色块

背景能很大程度地影响版面的设计感,这一点应该都有体会,常规的处理方式是把背景作为一整个色块,而如果把背景分割成两个几何色块时,设计感立马就会增加不少。

分割的方式好比用一把刀在背景的黄金分割处,划一条倾斜的直线贯穿版面,使整个背景一分为二,而这两个色块的颜色对比要比较强烈。另外,在横版中用左右分割,竖版中用上下分割效果会比较好。

给图片加圆形色块

增加对比关系是加强设计感的最有效技巧,我们也可以用此方式来优化图片。如果版面中的配图是没有背景的产品或人物,那么在这些图片上加一个圆形的色块,创造出虚与实的对比,通常也能得到不错的效果。

要点:

给每行文字都加一个色块

该手法在画册和海报设计中比较多见,与直接在一段文字下方加一个大色块不同,而是要根据每行文字不同长度,单独加一个相应长短的色块,所以这些文字每一行的长短最好是不一样的。

这种处理方式可以使整段文字看起来更整体,增加文字视觉冲击力,而且还能使文字与背景区隔开,加强文字的识别性。

要点:

用飘带装饰包装上的文字

如果你看过的食品包装够多,你应该能发现,很多包装上的产品名称、广告语或者卖点等信息,都会摆放在一条飘带上。这么处理的效果通常不错,因为飘带具有礼品、赠送的寓意,用在哪里都不会太唐突,而且飘带的形式简单、有细节、变化丰富,很适合用作装饰元素。

还有一点也很重要,飘带的形式一般都是柔软的曲线,这与版面中其他直线元素可以形成鲜明的对比,加强版面的灵活性。

结语

以上的七个小妙招是不是既简单又实用,你们在做设计的时候记得拿出来试试。不过这些也确实只是小技巧而已,只能优化局部,不要指望用上这几招就能做出很好的设计,而且它们也不一定适合所有情形,在实际操作中一定要具体问题具体分析,灵活运用。

欢迎关注作者的微信公众号:「葱爷」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 9:50 pm(NZT)

想给儿童做设计?来看高手总结的8个设计原则!

近些年儿童行业越来越热,大量的资本和人员投入进来,生产出了大量的儿童产品。但这些产品中,有许多没有认真思考就被推出到市场上,儿童成了被实验的小白鼠。

产品失败了只是一个版本,但不合理的功能、错误的价值引导对于孩子的影响呢?

正如我们一直倡导的:

为儿童设计不只是一句口号。

对这个幼小的群体,我们需要倾注更多的尊重和爱。尊重表示着孩子们需要被认真对待,而不是被想当然的认为就是简单、幼稚。爱表示着我们要为孩子们创造优秀的产品及体验,而非当前那些充斥在他们生活中的大量粗制滥造的儿童产品。

下面是团队在为儿童设计的研究与实践中,总结出来的几点基本设计原则。希望能给那些想为儿童创造优秀产品的从业者带来启发。

安全

确保产品对儿童是安全的

这个年龄阶段的儿童还没有能力自我保护,不要把责任推给父母。他们容易轻信一些内容和陌生人,产品中要有机制屏蔽不好的内容(一些儿童APP 加入广告,却不对广告内容做控制)。保护儿童的数据隐私,不要授权给第三方。硬件产品的材料、大小及外形等务必考虑使用时的安全性。

案例:Youtubekids 中的时间管控界面,孩子单次观看时间过长时会出现。时间管理在儿童产品中基本上是一个标配,这里涉及到儿童的护眼、注意力时间、教学内容的安排等。

Chrome 里家长可以设置或屏蔽孩子可访问的网站,相当于浏览器的儿童模式。在一些允许孩子搜索内容及社交的产品中,必须要有一些安全的规则。例如筛选安全内容、建立屏蔽体系、限制社交方式及内容等。

柴田文江的一些儿童产品设计作品。硬件产品除了符合安规外,要根据产品的使用场景,考虑儿童使用的安全性。

变化

明确儿童的年龄阶段

孩子变化很快,针对2岁孩子设计的产品基本上很难适应6岁的孩子。在做儿童产品设计的时候,需要我们确定核心受众儿童的年龄阶段,尽可能聚焦。对于需要跨年龄阶段的产品,在内容及交互体验上,要能满足儿童的成长需求。

案例:lingokids 是一款语言学习类APP,根据用户创造个性化的学习方式是其最大的特点。根据孩子的语言水平及年龄阶段(后续可调整),制定不同的学习方式及内容。不但要考虑产品的针对性,也要能满足不同孩子的差异性,给予孩子自主选择的权利。

趣味性

更加愉悦和多变的体验

无论是成人还是孩子都喜欢产品中的趣味性设计。孩子们天性中的好奇心更加强了他们对趣味性产品的热爱。他们注意力时间短,需要趣味性的设计来吸引他们。

案例:Petting Zoo 是由艺术家 Christoph Niemann 创作的 APP,其中的互动动画极具趣味性。一个点击的反馈、互动的音效、夸张的动画、无意中的捣乱等等,这些都需要我们的精心设计。

激励

针对性的激励策略

记得小时候我们期待的小红花么?激励是对孩子努力的肯定,获得成就的时刻。能够有效地引导孩子持续的进行探索。激励对于不同年龄阶段的孩子,形式及内容也会有所不同。对于一个4岁的孩子,装扮及一些可收集的小东西是对他们的激励。如果是对一个8岁的孩子,分值和排名就会更有吸引力。

案例:sagomini APP,小朋友可以选择不同的装扮元素进行互动和装扮。有时候奖励也可以是一个互动时候的反馈,一个正向的音效等。《实战案例!一款儿童AR启蒙产品从0到1的设计过程》中有这方面的实践。

例如,愤怒小鸟互动中的分值变化,结束后的星星评级。

反馈

丰富及有趣的互动反馈

孩子们在与产品进行互动的时候,喜欢得到视觉和听觉上的反馈。反馈可以帮助孩子了解当前所发生的情况并引导下一步的行为。有趣的互动反馈,更有机会获得孩子的喜爱。

案例:Little Fox 中丰富有趣的互动反馈,点击画面中的元素,动作和音乐的反馈。在设计互动反馈的时候,注意清晰和一致。

例如,Hatchimals 魔法蛋玩具的丰富反馈。

挑战

恰当的挑战设计

挑战能很大程度上增加儿童的成就感,他们常常能从挑战中获得快乐。在设计挑战时,既不能太过于简单,也不能太难以至于成为阻碍。对于较小的孩子,挑战可以是明确可以完成的任务伴随一些简单的重复动作。对于大点的孩子,可以是一些阶梯性难度的内容及操作。

案例:早教玩具,依据孩子的身体和思维能力进行设计。

Toca Dance,孩子可以调节角色的动作来编辑舞蹈,一共可以编辑6小节。只需要拖拽、移动即可编辑,若要最后呈现出比较不错、流畅的舞蹈,就需要一定的练习了。

探索

给予空间去自由探索

儿童会主动探索来学习和认识新的事物。产品要能让孩子上手就能体验,鼓励孩子的好奇心,有空间去自由探索。简单明确的交互方式、清晰的视觉层次、引导性的反馈是保证让孩子自由探索的前提。

案例:Tinybop 奇妙的机械,孩子可以自由选择并操作,探索不同的物理原理。对于复杂的模块,可以进行拆解并逐渐引入。

minecraft 我的世界,火遍了全球。

容错

鼓励探索和保护好奇心

儿童在成长的过程中,他们缺乏精准的控制能力,严谨的推理判断。在儿童产品中要充分考虑到这一点,允许孩子犯错,并避免让他们产生挫败感。点击的热区的增加,交互动作精准度的降低都是必要的。在操作上要设置可逆性,鼓励探索,并允许孩子随时退出。

案例:Sago 的探索系列 APP 中,只需要按住屏幕上下左右移动即可。遇到预设的区域会自动触发一些互动。小点的孩子,操作的精准性和控制性都还比较差,给予更大的操作热区,更容易的触发并达成目标。

欢迎关注作者的微信公众号:「KDC儿童设计」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 7:50 pm(NZT)


为什么会写作的设计师,在春招季能收到更多Offer?

姜正 :金三银四好时节,相信很多同学都准备好了作品集蠢蠢欲动,准备为自己的职场发展和薪资再次树立一个新的标杆。

最近我的朋友小A也在面试,有一天我们聊到关于面试的问题,他告诉我他的一次面试经历,他去一家知名互联网公司面试,在简单的寒暄之后,他开始向面试官介绍自己,其中讲到:我是一个善于学习,会定期总结自己的工作学习经验;深入了解产品交互知识等等。

面试官反问道:你善于学习的具体表现是什么?

小A:浏览专业的设计网站、看书等等。

面试官:读的什么书?书里讲了什么?对你的工作学习生活有什么帮助?

小A:读的《用户体验设计》,对我的学习……

面试官:你说你深入了解产品交互知识,那你的产出是什么?

小A:产出?什么产出?做的图?

面试官:那你按照你的理解讲一下吧。

小A:……

面试官:好,那我们今天先到这里,你暂时回去等我们的消息吧!

这无疑是一次失败的面试,小A最终也没有拿到 offer。

单纯的视觉无法满足市场需求

相信大家身边总是有同学凭借一份不错的作品集赢得了一份不错的工作,他再告诉自己身边的朋友,以至于大家对此深信不疑,认为面试就是准备「作品集」,作品集就是视觉,视觉设计无疑被认为面试中最重要的事情。

人总是按照自己经验和认知去判断事物,所以一旦这个观念深入就很难发生改变。随着时间的推移行业也会发生变化,从不成熟到相对成熟,行业对于UI设计人才的需求也不只是会作图那么简单了。

这就好比一个小孩子穿衣服,随着时间的增长去年的衣服很难再穿进去,行业也在不断发展,需求也在不断地变更,难道你还想拿着前几年的思维来赢得当下理想的工作?那几乎是不可能的。

我们需要在工作中展现自己一定的产品和交互能力,以及自己的学习能力,而这些能力当你面试的时候可无从展现,而这个时候需要你日常的产出来证明自己的能力。无疑「写作分享」成为最佳的产出方式,首先写作能够有效的量化产出,其次通过平台分享获得反馈,增加个人的价值。

我们回顾小A的经历,如果小A平时能够及时地将自己的工作学习进行总结,或许就不会出现那么尴尬的场景。

量化工作学习产出

如果我们无法量化产出那就很难证明自己工作学习中所获所得。我们可以通过视觉作品集来量化自己的视觉工作,但是作为 UI设计师这远远是不够的,我们还需要对自己在工作中用到产品、交互等知识进行总结归纳,并能够量化产出。否则就像小A的经历一样,很难给面试官一个具有说服力的答案。

写作可以说是我们工作学习中进行量化产出的最佳方式。写作是我们「在思考」的一种行为方式,我们需要对日常的工作学习中总结的经验方法进行反思,就像我们在做「Redesign」一样,我们对产品的功能以及交互进行重新思考,重新进行结构的优化和组织。相信大家在书写自己的工作学习经验的时候一定不是在写流水账,我们需要重新思考之前的工作学习流程,反思其中的问题,再次进行优化。

锻炼思考能力

我们在自己的工作岗位上执行工作任务,逐渐会形成一套适合自己的工作方法,看似小有成就,但也逐渐陷入自己的舒适区。时间久了也懒得再去思考,接到工作任务就直接去执行,看似提高了工作效率,实则已经沦为纯体力劳动。

身材完美的模特必须保持有规律的健身锻炼才能维持自己美好的外在形象,而我们想在职场中有所发展就必须不断地锻炼思考能力。

通过写作能够有效地锻炼我们的思考能力,从文章开始的选题到整篇文章的梳理以及文章句式的细节思考,到最后的总结归纳都是我们要思考的点。

写作本身就是一种思考的行为,当我们准备写一篇「工作心得」的时候,虽然脑海中已经有明确的思路,对这个方法也是运用地炉火纯青,但是当我们落实到写作的时候还是会遇到问题。首先我们需要转换角度,将自身熟悉的方法论传达给别人,还必须让别人听「明白」,从一个执行者转化成了一个分享者。

让别人听懂是一个基础条件,或许不少同学认为这太过于简单,实则不然。例如我们自身处在一个自身熟悉的环境当中,工作中的专业术语和思维逻辑早已倒背如流,但是我们作为分享者考虑到被分享者的感受,可能大家从事相同的行业但所负责的职能各有不同,所以当你在分享给别人自己的经验与心得的时候要尽量避免工作中的专业术语,要做到这一点就很难,因为本来「一个词」就能解释清楚的事情可能需要你用「一句话」去讲明白。句式的转变导致我们表达逻辑也要发生转变,这一部分需要我们耗费大量的精力去思考组织语言。

我们的分享不是在表演哑剧,我们需要吸引读者的注意力,这个时候我们要考虑到文章的结构,梳理文章分享的节奏也需要不断地思考。

这里我向大家推荐 PREP模式,即为:

这是日本著名的经营顾问大石哲之提出的工作交流的模式,同样也适用于我们的写作,我们可以参考其中叙事的逻辑结构应用到我们的文章当中。

总结

面对行业的变迁,我们需要不断地学习并提升自己,我们不能期待之前旧的产出能在新的行业环境里赢得一份满意的工作。我们写作的目的不仅仅是量化我们的产出,更是锻炼我们的思考能力。在长期的职场发展中,唯有不断锻炼自己的思考能力才能保证自己不被行业的发展所淘汰,写作能力已经成为设计师必备的能力之一了。

欢迎关注微信公众号:「海盐社」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 4:52 pm(NZT)

想提高面试通过率?这10个常见问题的标准答案在这!

之前UI黑客发表了一篇《面试了50多位UI设计师,我总结了这些求职技巧!》的文章,在网上得到很多设计师的认可。

文章列举了我在面试的时候经常问的三个问题,但是没有进行详细解答。其中有位网友回复说:收到比较满意的答案是什么呢,能分享一下吗?这次我把这三个问题结合工作实际详细解答下,同时也整理了之前在面试过程中经常问的其他几个问题。这些都是在实际工作中总结的,也许你在面试中也碰到过。

在面试的过程中还发现一个比较普遍的现象:一些 UI设计师认为,只要界面做的漂亮、炫酷就行,很少考虑项目的整体性、交互性、可用性、协作性、扩展性,导致对很多新的 UI技术知识完全不了解,在公司实际项目中跟产品、技术的协作很糟糕,不能解决问题,反而拖累了开发进度,无法满足公司实际需求。现在都在讲全链路设计师,在UI行业,仅仅视觉能力突出,可能在分工细化的大型公司会受到青睐,但是对众多中小和创业公司来说,主要还是考察整体的能力。

所以,在面试的时候,除了对视觉设计能力的考察之外,我更多的是对公司实际工作中将会遇到的问题进行提问。

这里总结了10个问题,其实大家在面试的时候或多或少都遇到过,每位面试官都有不同的回答标准,那么我作为面试官看到什么样的回答会比较满意呢?一起来看下。

简单说下你对iconfont的了解

这个问题面试了50多位设计师,做了个小统计,80%的回答是:「阿里巴巴的iconfont矢量图标库,海量的图标类型,有矢量、有png位图,还能在线改颜色呢,非常方便下载。」

仔细想想,不过分要求的话,这样的回答也对,本来就是Iconfont——阿里巴巴矢量图标库。

可是,这只回答了最基础的三分之一,还有一大半没有回答上来,对阿里iconfont的使用也仅仅停留在方便搜索和下载图标这个层级上。

其实 iconfont 的意思是字体图标,即用字体来显示图标。例如做一个网站,早些年设计师提供的 icon 切图大多是 png,如果遇到一个 icon 有多个状态色,就需要全部切出来,而且随着视网膜屏越来越多,以前的1倍切图,在视网膜屏上就会模糊。现在即使用2倍切图,在一些高端机型上面还是模糊,要升级到3倍。

Iconfont 就完全没有这个问题,技术可以通过给 icon字体添加不同的 color色值,来获取不同状态的 icon。而且 iconfont 本质是矢量的格式,不存在一倍图两倍图之说,体积也比 png 小很多,所以是一个非常好的图标解决方案。目前的天猫、淘宝等大型网站都有使用,技术已经很成熟了。

设计师可以把自己设计好的 icon,通过阿里 iconfont 这个网站转化为技术可用的字体代码,并且生成在线链接,和技术形成一个协作流程。

所以仅仅是回答能通过 iconfont 网站方便下载图标,是完全不够的。

面试指点

简单说下Material Design

这个问题在当时面试的时候,不知道是不是我英文发音不准,导致一些设计师一脸迷茫:啥?是什么design?当然也有很多设计师立马就知道。

好吧,就当我发音不准,但是当我说「谷歌很热门的材料设计,安卓设计规范」这个也不知道的时候,那就是你的问题了。

Material Design 是谷歌推出的安卓平台UI设计规范,为手机、平板、台式机和其他平台提供更一致、更广泛的外观和感觉。与iOS相比,在界面结构、动效、交互都有一些区别。

在目前国内 APP 市场中,MD 风格的设计其实并没有那么多,同一个 APP 在安卓上也是延续使用 iOS 的界面,导致很多 UI新手对这个概念完全不了解,UI老手也由于对应项目的缺乏而对其感到生疏。实际上,国内项目很少用到。

但是这个不能成为你不去了解它的理由,在优设网等平台,有很多相关介绍文章。有些公司的项目还必须根据 MD 的风格来设计,以提高技术的开发效率。

所以这个问题也是一个很基础的视野性问题,UI设计包含很多方面的知识,对接的上下游也很多,需要不断地去学习理论、扩展技能。UI 和新技术的发展是紧密联系的,一场苹果发布会足以更新和变革 UI设计师的众多知识点。

面试指点

列举一个自己最满意的项目

这个问题和「请说下你的优点」一样,属于自信展示类的题目。

面试需要自信,自信能加大你的气场,让面试官感到你才是主角,从而掌握住整个面试的主动权。记住一点,你的表现要配得上你希望的薪资。如果像只乖乖羊一样,言谈举止间没有一点自信,那么哪个公司敢把项目交给你来设计呢?

同时对自己的作品也要自信,用通俗的话来讲,就是你的面试作品一定要有品质感,不要拿一些自己都觉得不好的作品充数量,作品在于精而不在于多,一个不好的作品会减很多分。之前在《面试了50多位UI设计师,我总结了这些求职技巧!》这篇文章中也讲过。所以大家一定要准备好至少一个自己觉得满意且有品质的作品。

但是也不能简单地只给面试官说界面如何好看、用了什么设计手法、包含了什么设计理念等等,除了外观上的品质感之外,这个项目之所以让你满意还体现在项目开发的过程中。

任何一个项目,从头脑风暴到上线运营,整个过程你都会和产品、技术、测试、运营同学产生交集,遇到问题、进行协作。比如你最满意A网站项目,项目会遇到很多问题,比如切图、响应式、动效解决等等,就把问题从发现到解决这个流程整理记录下来,这样面试的时候会真正吸引面试官注意,让他感觉你很有经验,聘用了你会解决很多公司项目问题。

面试指点

举一个你比较喜欢的APP

这是一个开放性的题目,没有固定答案,相信大家都会遇到。主要是考察设计师对 APP 产品设计的涉猎范围。

一个合格的 UI设计师我认为也应该是一个应用迷,对热门的、独特的、富含美感的应用都会去试着下载然后把玩。会为一个设计上的瑕疵而对其冷嘲,也会为一个交互中的细节而对其赞叹。所以你看到过的、体验过的产品越多,那么将来在公司中发挥出来的能力就越大。

面试中,很多设计师对于为什么喜欢这个 APP,仅仅是停留在兴趣爱好上,在设计细节、交互方式上表述不多。所以这就要求我们多看、多体验,善于发现和总结。

此外,这里有个小窍门,就是除了自己喜欢的之外,再列举和这个公司相关的或者竞品APP,这样面试官就会被吸引,增加你的表现时间,毕竟如果你入职后,接手的任务也与此相关。当然了,这就要求我们在面试前对目标公司和产品做好充分了解,认真对待每一次面试。

面试指点

更具体的方法请看 → 《UI设计师该如何正确地“把玩”APP?》

在公司实际解决的一个设计问题

一定要记住:公司招聘你来是帮助解决设计问题的,并不是仅仅找一个画图的劳动力。如果仅仅是完成界面设计,那对于一些公司来说还不如找外包来的实惠,何必养一个人呢?所以,你一定要从解决问题这个点来回答,从而体现你的价值。在一定程度上,公司请你来是利用你的经验提高项目开发效率,填补项目未来可能遇到的问题。

问题从哪里来呢?从你日常工作中来。我们每天都会和公司中不同的人打交道,总会遇到各种问题让你觉得焦虑。有问题很正常,发现不了问题才是最可怕的。有一次面试,求职的设计师对这个题目完全没有考虑过,导致紧张,影响了后面面试的发挥。所以在面试前,一定要好好回忆下自己在公司中遇到的各种问题。

实在想不到的话,这里给大家列举一些问题示例,可以自己考虑下如何去解答。

以上问题大家或多或少都会遇到,而且会牵扯到很多其他部门,如果不解决就会慢慢影响整个团队的工作效率。所以 UI设计师在公司中就不仅仅是一个简单的画图职位,还应该是一个设计类问题的解决方案提供者。

此外,我们在回答的时候,不要从大的宏观角度出发,而要从实际工作中遇到的细节考虑。人类天生对故事充满兴趣,空洞的描述都会让人感到乏味,所以最好的表述方法就是把问题故事化,让面试官对你的故事描述感兴趣,这样面试的节奏就会慢慢掌握在自己的手中。

面试指点

你的文件整理习惯是怎样的

在对设计师面试进行统计的过程中,发现这样一个现象:大多数设计师会自带电脑,少部分会只带手机或平板。对于带不带电脑这个问题,我个人偏向于带,因为会显得你更专业、准备更充足,而且能力展示会更全面。

但是带电脑属于一把双刃剑,因为这样会暴露自己的文件结构。如果没有良好的文件整理习惯,带电脑反而会造成减分。

文件整理本质上属于一个操作习惯问题,每个人的习惯都各不相同。但是,你并不是一个人在工作,总要和其他设计师、产品、运营、技术甚至是直属上级进行协作。看似简单的文件整理,如果做的不好,会严重影响整个团队的工作效率。

所以,如果带电脑进行面试,这个问题就很好解答,直接给面试官看自己的文件目录和源文件,比没有说服力的口头描述要好很多。这里大家一定要注意下面两点。

1. 个人文件整理

如果你的电脑桌面很乱,密密麻麻全是文件,这个已经造成减分了。如果在找一个文件的时候花了很长时间,甚至不由自主地说:怎么找不到了呢?那么减分更多。

个人文件的整理其实也代表了设计师的一个逻辑思维程度,清晰严谨的文件分类有助于提高工作效率。所以大家在面试的时候如果带电脑,一定要先把自己的文件整理好,尤其是桌面。

2. 源文件图层整理

对于图层混乱的源文件,各位设计师肯定都被坑过。有一次面试,我让设计师把中间的内容往上面移动,结果对方是一个个图层去选择,发现有点慢于是去框选,结果选中了很多其他图层,最后这个操作持续了快一分钟……

所以建议大家平时多去注意一下自己的图层和分组,面试前针对性地把一些源文件整理好。如果自己平时也没注意这点,面试前只需提供一两个整理好的源文件即可。

文件和源文件整理对设计师来说和仪容仪表一样重要,谁也不喜欢看到一个邋邋遢遢的面试者吧,这方面很多设计师会忽略,所以我们一定要重视起来。

面试指点

个人图库平时是怎么维护的

这个问题其实隐藏了两个点:你是否有个人图库;图库是否进行了维护。

对于个人图库,如果你是一个刚毕业的或者刚参加工作的设计师,没有个人图库可以理解,毕竟还在慢慢积累中,经验还不足。但如果是工作过三五年的设计师,没有个人图库就显得太业余了。

在设计师开始一个项目之前,肯定会去花瓣、behance 等网站去找参考。但是网上的作品质量参差不齐,设计师都会在海量的资源中进行精华的筛选和保存,这样慢慢地就形成了个人图库。

个人图库主要分为以花瓣为主的在线式和以 Eagle 为主的本地式。不管哪种方式我们都会通过文件夹、标签、关键字、命名等进行分类,从而能在海量资源中快速找到需要的参考。比如最常用的就是根据内容来进行分类,比如APP、网页、动效、字体等等。分类因人而异,每位设计师都会有自己的分类习惯,只要能提高效率就是好方法。

但是,如果有个人图库而不去维护的话,那么就会花费大量的时间在搜索上,个人图库的意义就大打折扣。其实个人图库维护和文件整理本质一样,都是方便我们快速、及时、方便地为设计服务。

所以平时没有好好对待个人图库的设计师,建议花时间完善一下。当然了,最好还是使用本地式图库,不用担心服务器、网络问题。

面试指点

谈谈对响应式设计的理解

响应式设计,流行了很多年,但是对于许多 UI设计师来说还是比较陌生。同时在面试的时候发现这样一个「怪现象」:一些设计师能力面狭窄,只做过 APP项目,网页端设计一点经验也没有,导致对响应式设计一头雾水。而在实际项目中,响应式是每个 web项目都需要面对的问题。

响应式主要使用在 Web设计领域,由于用户使用的设备尺寸五花八门,手机的小屏幕肯定不适合显示电脑页面,所以响应式设计就是会根据用户的操作和使用的设备进行智能布局,让同一个网站在手机、平板、电脑上都正常显示。

当然如果说背概念,每个人都会,但实际上在面试的时候我会让对方列举对应的例子。如果你有响应式的项目经验,拿着项目直接说最好,如果没有任何响应式经验,这里给你推荐两个例子。

一个是全局响应,网站在手机、平板、电脑三端都会显示不同的效果。这里举 CSS禅意花园( http://www.csszengarden.com/)这个例子。看下图,随着浏览器宽度的变化,页面分别从电脑端过渡到平板,最后过渡到手机,确保在任何设备中都完美展示。

一个是非全局响应,在电脑端会有响应效果。这里举天猫(https://www.tmall.com/)的例子。看下图,随着浏览器宽度变化,宽屏和窄屏会有内容上的区别,其中左侧的品牌闪购这一列在小屏幕电脑上会消失,所以在小屏幕电脑上不会出现水平滚动条,内容得以完整呈现。不过再缩小下去不会变成手机界面,天猫有自己独立的手机网页端,所以和上面例子相比不是全局性的。

面试指点

在团队中,你是如何进行协作的

这属于一个开放性问题,答案不唯一。主要考察设计师的协作能力,是否能有效率地利用团队的力量去快速解决问题以及提高自己的能力。对于大多数设计师来说,自己并不是一个人在战斗,而是和其他小伙伴一起去解决问题。

协作分为两种情况:本部门和跨部门。

1. 本部门

可能是一个垂直的设计团队,也可能是一个完整的产品团队,总之,部门中的同事都互相认识,共事的时间长。通过工作中的例子,简单阐述下团队如何使用设计规范,如何进行创意头脑风暴,如何解决团队遇到的问题等等。这里要着重介绍下自己的特长,以及在团队中担任的主要角色。

2. 跨部门

在规模比较大的公司中,很多时候设计师也会接到跨部门的任务,如何与陌生的同事共同完成一件事情,对一些公司来说也是比较重要的。即使自己没有进行过跨部门任务,如果面试公司规模很大的话,建议自己进行一些模拟任务练习,这样面试的时候就会游刃有余。

关于协作这块,有点像小组面试,需要把自己描述成主角,突出自己在部门中的作用。但是一定不要撒谎,一些专业的面试官会通过技巧让你跳进自己挖的坑中。

之前一篇《教你用Mac共享,轻松打造自己团队的Sketch Libraries!》文章里,讲关于团队协作的一个方法,希望能给大家带来一些启发。

面试指点

简单阐述下设计规范

说起设计规范,大家都不陌生,在很多设计网站都能发现设计规范相关的作品,看起来相当专业和严谨。很多设计师也会在自己的项目作品中加一点规范的内容,增加自己作品的专业度。

在面试的时候,规范类的相关作品肯定是要带上了,面试官有很大概率是要看的。所以平时没有注意整理设计规范的同学,建议面试前,把自己要展示的作品整理下,千万不要忘记这一块。

不过,规范是做起来容易,应用起来可就没那么简单了。在平时工作和接触过的设计师中,有很多是为了规范而做规范。

比较典型的例子是A同学做一个网站项目,等项目快结束了,最后抽几天时间把规范总结一下,做成炫酷吊炸天的规范界面。旁人一看直呼:好专业。然而,实际上界面并没有严格遵循规范,里面存在很多样式的坑,后期要花费大量的时间在 UI规范的指导下重新修改界面。

UI规范除了是一把尺子指导界面设计之外,更重要的是加快了界面的设计效率。一般情况下,在做几张界面、定好风格基调后,就应该制定 UI规范了。

此外 UI规范还对前端程序员起着指导作用。开发之前,建议和程序员一起熟悉下设计规范,程序员在做界面之前也会把常用的文字、按钮、输入框、下拉框、表单、标题、切换等组件做成常用样式,就和我们用 Sketch 做 symbol 组件一样。

在实际开发中,很多项目也用了现成的 UI框架来开发,对设计师来说 UI规范其实更加容易维护。但是 UI设计师需要对框架的样式组件比较了解和熟悉,这样才能真正利用好这些现有的规范,甚至和技术一起对框架样式进行二次定义和开发。

比较著名的 UI前端框架有 Ant Design、Bootstrap、Taro UI等等,具体的可以看这篇文章→《2019年最流行的10个前端框架,设计师快来收藏!》

面试指点

总结

以上10个面试中我常问的问题已经总结完了,总共4000多字,写的过程中自己也在不断思考,也是对目前工作的一个经验总结。现在正是求职季,希望这篇文章能给面试中的设计师带来启发。

欢迎关注作者的微信公众号:「UI黑客」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 1:30 pm(NZT)

壹周速读 vol.01

上周热点与干货,一网打尽不错过!

一、看热点

1、阿里出手,给你彻底告别字体侵权的解决方案

做设计总归是难以绕不过字体侵权的困境,逐个购买字体无论是对于设计师还是企业,都是一件极其糟心的事情。同一字库的字体似乎不足以满足所有的设计需求,而去各字库逐个挑选似乎更加麻烦。

在这样的局面下,一个合理的中间平台来对接字库和设计师,应该是大势所趋。阿里巴巴官方所推出的字体素材平台就是这样的存在。字库直接针对平台进行授权,而需要字体的设计师和店铺则按需购买字体,获得相应授权来进行使用,彻底告别了复杂的版权纠纷。

当然,这一解决方案目前还只是覆盖了阿里旗下的电商平台,但是这已经是很大的一块市场了,值得持续关注。

具体的细节戳这里了解:《告别字体侵权!阿里巴巴官方字体素材平台正式上线!》

2、从拯救抑郁到贴心陪伴,10 个动人的产品细节

数字产品冰冷的外壳之下,同样可能藏着一个温暖你的灵魂。

而对于产品设计师和用户体验从业者而言,满腔的柔情要如何外化为数字化的皮肤,让用户感知到产品的温度,并不是一件容易的事情。这也使得优秀的情感化设计细节,是非常值得学习和参考的。

无论是抑郁到想自杀的绝望者,还是孤独者训光的追梦人,每一个屏幕背后都藏着一个未曾言说的情感诉求。你要如何用设计去敲开他们的心扉?

小白的这篇文章梳理了10个值得学习的情感化产品设计细节,给你参考:《当我敲下“自杀”两个字,才发现产品经理都是天使》

3、在这里,设计师会被360度无死角被夸奖

懂得你的不易,明白你的辛苦,在这个专门为设计师所创建的夸夸群里,你有一千个群友用全身的力量来夸奖你,把你从委屈、纠结、不甘中打捞出来,帮你消减痛苦、郁闷、无奈的情绪,给你最需要的认可、愉悦、感动!

如果你想被彩虹屁淹没,如果你想给晦暗疲惫的生活增加一抹亮色,在对抗全世界之前拥有更多的动力,那么不妨了解一下这个设计夸夸群:《我们建了一个设计夸夸群,请立刻把聊天记录发给甲方学习!》

二、谈趋势

1、别只顾着闷头撸图,人工智能时代的设计趋势又变了

迭代升级之后的人工智能,已经能够轻松支撑复杂的多轮对话,更加成熟的语音合成技术和你聊天的 AI 不仅拥有以假乱真的语音语调,更是具备了明确的「人设」!

越发成熟的 AI 技术开始影响产品形态,交互方式悄然改变,以人脸识别和手势和更为自由多变的交互模式,一定会波及和影响到现有的设计体系。触控、语音、手势、人脸等多重交互模式会逐渐融合成为全新的交互通路,触觉、嗅觉甚至其他的心理信号,也会加入到整个交互系统当中,你能想象下一代的数字产品会是如何么?

更为直观的变化,则是 AI 将会以更加主动的姿态切入用户的生活,情感化的细节处理,针对不同人群的细分优化,润物细无声。改变正在发生,这份报告值得你细细研读:《大牛出品!2019 年AI人机交互趋势研究报告》

2、即将大范围普及的折叠双屏手机,要如何设计交互

从华为到三星,量产的折叠屏手机几乎触手可及。柔性屏幕的成本将会在未来几年的大规模生产中逐渐降价,平价柔性双屏手机几乎触手可及。不同的屏幕折叠方式,自然而然地会给你带来交互上的全新想象空间,交互设计的新蓝海就在这里。

当然,未来的设计多少都会依托于已有的产品形态,柔性双屏可以提供什么样的交互方案?硬件和软件上的交互逻辑要如何接驳嵌套?你要的答案,就藏在这篇新鲜出炉的文章当中:《最近超火的折叠屏手机,应该如何做交互设计?》

三、有秘技

1、自学插画这件事情,大神已经蹚出一条明路

虽说自学这件事情上,自己的管理和约束是最主要的影响因素,但是方法技巧同样非常重要。自学过程中,设计师 Katarzyna Dziaduś 摸索过很多技巧和方法。从习惯的培养到练习时间段的选取,从独自练习到组队共同进步,从参考别人的设计到独自寻求灵感,Katarzyna 几乎已经蹚出一条成熟的自学道路。

深入了解一下她的自学成长之路,也许你也能成:《如何提高插画能力?国外大神给出了他的自学过程!》

2、80% 的动效都是用这个方法搞定的,Google 大神手把手教你

看着满世界华丽风骚的动画效果,很难觉得动效设计是一件简单的事情。但是在 UI 设计这个领域当中,绝大多数的动效设计,其实并没有那么绚丽复杂。作为 Material Design 设计团队中动效规则的制定者和布道者,Jonas Naimark 直接上手教你绝大多数的 UI 转场动效,他们是如何制作完成的。下载 Jonas 所提供的文档,上手练习,你的下一个设计就可以动起来了:《为你揭秘 Google的动效设计师是怎么制作 UI 动效的》

3、金三银四求职季,最有用的指南就这篇了

一站式的服务总是最得人心的,尤其是在这个设计师找工作的黄金时期,这篇覆盖了设计师求职相关的全部信息的万字长文,就帮你把求职这件事安排得明明白白。从不同类型招聘的介绍到个人作品集的细节处理,从简历投递的注意事项到面试入职的全部流程,你关心的,都在这里面:《春招季节,给你一份上万字的设计师求职指南》

四、好工具

1、设计完页面,展示效果就靠它了

毫无疑问,设计完页面之后,你的工作还没有完!无论是发布在 Dribbble 、Behance 还是放在自己的作品集当中,一个带有背景的展示图总是必须得有的!尤其当你正准备求职,还得梳理好几个G 的作品集的时候!好了,多余的介绍不说了,戳进文章了解一下 Screely 这款工具的用法吧:《春招刚好用上!超实用的网页展示效果在线生成器》

2、每月干货大合集,看过的都懂

每个月的干货大合集正经是设计师捡漏掘金的最佳场所,指不定哪个工具正好就是你心心念念一直想要的。无论你是前端,还是设计,是运营,还是测试,每个月都不会缺席的干货大合集总会有一两款工具满足你的需求:《收藏吧!2019年3月超实用设计圈干货大合集》

五、有见地

1、这些冷知识里面藏着多少设计秘密?

Adobe 的名字到底有何深意?

鼠标光标为何被故意设计成不规整的?

人民币的设计师为何会把自己画上钞票?

吉利汽车的LOGO里到底藏着多清奇的脑洞?

为什么老外一聊「蓝色电影」就那么兴奋?

30个设计界冷知识第一期,为你揭晓这些秘密:《涨姿势!30条设计界冷知识,最后一个好暖心!(一)》

2、UX设计行业的巨大泡沫?!

看似惊悚的标题背后,藏着的反思并非危言耸听。对于设计师和用户体验行业之间关系的争论,其实从来没有停过,这中间的迷思和矛盾,值得每一个从业者审视和思考。到底我们要如何面对用户体验设计?不妨先听听 Maciej Lipiec 的说法:《从UX 到产品设计,聊聊用户体验行业的巨大泡沫》

3、当甲方不再追求五彩斑斓的黑,你该慌了

好吧,甲方终于还是看破了设计圈里面的鸡贼,开始实实在在地关注设计了,这个时候小鸡贼不好使,就该看硬实力了。将硬实的细节藏在简约的设计当中,同样喜欢抠细节的甲方,也许正拿着放大镜等着你。所以,这些方法以及相应的实战技巧,你可千万别错过:《比五彩斑斓黑更难的,是客户让你简约藏着细节》

六、面对面

这真的是一篇访谈,但是这也不止是是一篇访谈那么简单。稍微关注优设早一些的读者应该没少在优设上看到这前辈 Julie Zhuo 所分享的文章。可是这次的访谈不同以往,Julie 对面的访谈人是同样华裔出身的资深设计师王欣。Julie 的这次访谈,是王欣深耕硅谷科技圈之后所输出的诸多内容之一,读下去,也许还有一些意外之喜:《从Facebook 实习生到设计副总裁,专访顶尖设计大咖 Julie Zhuo》

七、一句话

这是一个新栏目,如果你有啥好建议,请给我留言吧!(不出意外《灵能百分百》第二季今天就能看到最后一集了!)

P.S. 仔细看了一下,我确实搞错了!灵能百分百第二季是13集!下周才完结!

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 1:00 pm(NZT)

Sketch 54 Beta版本探秘,超多好用新功能等你发现!

Sketch 最近一个月都没有新版本的信息,最新的版本是53.2。不过就在前两天,Sketch 悄悄发布了54Beta版本,UI黑客在第一时间下载并测试,梳理出了54 Beta版本的主要更新点,一起来看看吧。

Beta版本是 Sketch 为了测试用的,一般再过一星期左右会发布正式版。为了区分之前的正式版,Beta版采用了蓝色的大钻石图标。

官方中文版,从此告别汉化插件

Sketch 终于有了官方中文版本,再也不用安装汉化插件了。不过对于习惯英文版的设计师来说可不是什么好消息,打开后直接就是官方中文版。在没有新的英文版插件出现前,如何换回曾经熟悉的英文界面彰显个性呢?

Sketch 54 Beta版调用了用户 Mac系统语言。国内大部分用户使用的是中文Mac系统,所以打开 Beta 后就是中文界面。我们需要这样操作切换为英文版:系统设置 – 语言与地区 – 添加英语 – 重启。之后再打开 Beta版本就是英文版了。

但这也是临时解决方案,毕竟只有很少的用户使用英文Mac系统。希望大神们赶紧出个英文插件吧。

此外,既然变成中文版了,一些自定义快捷键也需要更换,比如我们最常用的收起所有组。英文版的时候是「Collapse All Groups」,中文版就要变成「折叠所有编组」。在设置 – 键盘 – 快捷键中设置。

直接切换深色和浅色程序外观

Sketch53 想变为深色模式,必须要把 Mac系统变为深色。现在可以直接切换,而不用把系统变为深色。

画布可以切换为深色和浅色

看惯了浅色的画布?来试试深色的画布吧,虽然深色看起来很奇怪。

插入智能对象和文本的时候新增参考线提示

以前版本中,在插入形状的时候会出现参考线,现在插入智能对象和文本时也会出现参考线。

新增蓝色测距参考线

之前的参考线是红色的,现在新增了一种蓝色参考线,专门用来测量距离,比之前更加明显。

当然了,参考线的颜色是可以自定义的,可以在设置里面的画布选项修改颜色。

在用键盘移动图层时,显示参考线和距离

在之前版本中,我们用鼠标移动图层的时候可以显示距离和参考线,键盘移动不显示。现在用键盘移动图层的时候也会显示参考线和距离,方便对图层微调。

在拖动文本或形状时,相同的间距会有色块提示

元素之间有相同间距,在拖动的时候元素间会有更明显的色块提示,比之前的线段提示更加明显。

数据源功能可以在颜色的图像填充中使用

这个功能UI黑客用的比较少,一般是使用蒙版来填充图片的,这样方便控制尺寸。

描边的虚线可以用鼠标拖动改变数值

之前的透明度值、描边宽度值可以用鼠标拖动改变,现在增加了虚线和间隔值的鼠标拖动。

新增加了几种画板预设

新增 Galaxy S10 以及新的 iPad 尺寸画板。

symbol组件增加可以全局显示隐藏的切换功能

以前只能一个个勾选隐藏,遇到很多文本的时候就比较麻烦。现在增加全部显示隐藏按钮。

总结

以上就是 Sketch 54 Beta版本的主要更新点,还有一些很小的点暂时无法复现,所以就不列举了。

此次更新是在53版本上进行的操作体验优化,新出的中文版让非英文界面用户感受到了 Sketch 官方的诚意。

最后还有一点各位设计师要明确:54Beta版本的文件,用之前低版本打开会有兼容警告提示,大家千万不要用 Beta版本打开自己的现有文件,以防后期打不开。

欢迎关注作者的微信公众号:「UI黑客」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 3:27 am(NZT)

实战案例!一款儿童AR启蒙产品从0到1的设计过程

此次项目所介绍的是一款儿童拼音启蒙AR产品,核心用户为3至6岁的学龄前儿童。整个设计团队在项目中结合儿童认知、家长诉求、产品价值诉求,努力探索为儿童创造更好的体验。本文着重介绍产品从0到1的体验设计过程。产品已上市。

用户诉求及产品定位

1. 玩与学

儿童产品的从业者都要面临的一个问题是,产品的购买决策者是家长,使用者是孩子。一款好的儿童教育类产品必须要能平衡好这两者的需求。对于孩子而言,玩是一切的核心,而对于家长更多的是学方面的需求。关于玩与学在儿童产品中的思考会在后续文章中与大家分享。

在此次 AR拼音项目中,对于孩子:我们的定义是以 IP 引导互动方式,结合游戏化的测试与任务。对于家长:在内容上体现专业及权威性,反馈上突出清晰和及时。

2. 孩子的特点

3-6岁这个年龄阶段的儿童正处在混乱的学龄前阶段,他们注意力极易转移,对待这群小家伙们的产品设计中要减少令他们分心的元素,把学习内容拆分为简短易于操作的任务,着重加强反馈与激励。

设计语言

在公司 AR系列设计风格的基础上,融合更多拼音自身产品的特性元素。

1. 色彩使用

基于拼音内部 IP形象提取出主要的三种自然色彩,并向外衍生出少量辅助色。我们选取饱和度适中的颜色作为中间色,通过调节明度获得上下层衍生色。

在视觉的处理上保持用色简单层次分明,用清晰明确的色彩突出主要元素,用低饱和度、高明度的色彩弱化背景元素,让视觉重心聚焦于主流程。

2. 玩法场景

我们将原本冗长的学习流程切分成「听说读写」四个简短的部分,通过独立的小游戏来进行教学。

这个年龄段的孩子对自然有着强烈的探索意愿,热爱动植物。所有的小游戏都尽可能采用源于自然或贴近生活的场景。

画面和元素结合现实事物来绘制,用形和用色上在可理解的范围内进行简化。

3. 多维互动

不同的小游戏与不同的素材之间的组合,产生出多种互动体验。在互动上通过 IP 的引导,结合实体卡片,产生出了能调动孩子多感官的互动方式。已购用户反馈孩子们很喜欢这部分的互动方式。

4. IP故事引导

拼音派对以 IP 寻找拼音字母串联整个学习的故事主线,IP 以小伙伴的形象出现在每个环节,在开始和每个关卡叙述故事情节,参与到不同游戏的场景互动中,并给予正确或错误的明确反馈,帮助孩子们认识拼音完成任务。

5. 字体设计

我们设计了专用字体,主要原因是:

经过重新设计的字体完全符合新版拼音教学的书写规范,同时字形圆润流畅,笔顺清晰,平衡了各字母间的比重,能更好地运用在软硬件的各个视觉环节。

同时,这套字体也会应用于硬件卡片的设计中,保持书写的一致性。

AR产品设计中的注意点

AR 在儿童产品设计中的想象空间很大,结合此次项目抛出几个设计上需要关注的点。

1. 场景

定义好使用场景并清晰地传达给家长,同时考虑针对不同的使用环境提供差异化的功能。

像此款产品可以这样描述:建议在客厅或书桌上(大于50cm),光线按照平时读书的标准。

2. 引导

在 AR 产品的引导上尽可能以渐进的方式。先让孩子去熟悉 AR 的体验模式,学习能简单上手的操作,拆解动作并通过音效与动效反馈,再逐步提升。

3. 创造连续性的体验

首先 AR 产品就要避免不必要的中断,因为每次进入 AR模式需要重新环境探测分析等。加上儿童这个群体的耐性,容忍度更低。

4. 交互

在反馈上注重音效、动效和触感(震动等)的结合,体验比成人设置更加简短,并且在间隙中加以鼓励的反馈。

不止是 AR 类的 APP ,交互上对于儿童来说,尽量以点,滑动,拖动来完成。避免双击,缩放,长按等操作。可以适当的增加有趣且互动的交互方式,例如吹气,问答,拍手等。此次项目中就加入了吹气球和跟读的交互方式,这两个方式就很受孩子们的喜欢。

品牌物料设计

结合产品需求,延展了相关的物料,如:打卡拼音表、贴纸、周边等。

后记

此次项目,设计团队一共耗时一个半月左右。产品在上市后,得到了许多家长及孩子的认可与喜爱,当然也有一些不足。经过此次项目,团队对儿童认知与体验设计上的结合这点有了更深刻的认识及实践。

做儿童产品需要我们倾注更多的尊重和爱。认真去了解他们所处年龄阶段的心理及认知水平,而不是想当然的认为孩子就是简单、幼稚。为孩子们创造优秀的产品与体验,而非当前那些充斥在他们生活中的大量粗制滥造的儿童产品。

KDC(Kids Design Center)是由一群大龄儿童组成的儿童设计咨询机构。这群大龄儿童(包括设计师、儿童心理学家、儿童插画师、用户研究员等)多年来一直专注在儿童产品设计领域。后续会陆续分享儿童相关的设计实践及研究,欢迎大家一起探讨。

欢迎关注作者的微信公众号:「KDC儿童设计」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 2:27 am(NZT)

用一篇文章,让你掌握能让用户快速增长的AARRR 模型

AARRR模型因其掠夺式的增长方式也被称为海盗模型,是Dave McClure 2007提出的,核心就是AARRR漏斗模型,对应客户生命周期帮助大家更好地理解获客和维护客户的原理。

互联网行业发展至今人们一直都在关注如何获取更多用户,在获客阶段投入了大量的资源,购买流量寻找最优的获客渠道等。但是现如今人口红利逐年消失,获客成本剧增,ROI 越来越低等都是需要我们面对的问题。

激活用户的重要性

最近拼多多发布自公司 IPO 以来的首份全年财报,截至2018年12月31日,平台当年销售费用为134.418亿元,较2017年同比增长900%,2018年Q4,平台以促销补贴活动和品牌推广为主的销售费用为60.24亿元,较2017年同比增长699%。亏损超出预期。公司股价随之暴跌,其背后的真相是公司巨额的营销投入,公司解释获客成本高,但是资本市场并不买账。

在日益增长的获客成本时期,企业更应将资源投入到激活存量用户上。其性价比远高于投入获客阶段。Greylock Partners 风险投资人前Facebook、Twitter 增长团队负责人 Josh Elman 也表示,公司应该花和产品开发至少一样多的精力资源在激活用户上,甚至是更多。

△ 左:App留存;右:激活影响留存提升

将资源投入激活阶段,不仅仅是高ROI,而且激活用户有利于用户留存的提升,市场上一些数据显示,绝大多数 App 在第二天就流失了超过70%的用户,早期用户「激活率」提升一点点,就对后期的用户留存和盈利都会有极大影响。

如何激活用户提高留存

首先我们要了解何为激活用户?激活用户指的是那些正在使用你的产品的人,他们注册并使用你的产品一段时间或者用户创建他们的第一个项目及相关任务,最重要的是他们开始了解到你产品的价值主张并考虑长期使用你的产品。

△ 激活用户释义

通过上图我们可以了解到,激活阶段最核心的任务是如何让用户最快感受到产品的价值。每次我们使用一个产品,当学会它的核心功能时或者感受到它给我们带来的价值时,都会不由自主地发出一个 Aha。例如:我们第一次使用美颜相机的时候,打开美颜那一刹那,哇(Aha),拍照这么美!对,这就是产品的 Aha时刻。

所以我们要找到产品的 Aha时刻,让更多用户体验到它,认识到产品的价值所在,将陌生用户变成我们的忠实用户。这是一个酒香也怕巷子深的年代,如果用户没有感受到你产品的价值,那很快将会成为流失用户。

值得注意的是,并不是我们认为的 Aha时刻就是用户感受到的 Aha时刻,这两者也许存在巨大的差异。

我们可以运用设计思维找到我们产品的 Aha时刻,组织产品利益相关者来一场 workshop,利用卡诺模型定义出你们认为可能和用户长期留存有关系的关键行为及功能,产品的魅力功能通常也是最容易让用户能感受到 Aha时刻的,再通过数据分析找到和长期用户留存正相关性最强的行为。例如:3月10号使用了功能A的用户比使用了功能B的用户7日留存率高23%,那功能A极大可能让用户感受到了 Aha时刻,用户愿意再次来使用产品。最后可以通过用户访谈快速验证前面定义的结果,找到用户的 Aha时刻。

△ 设计思维发现产品Aha时刻

超全面的设计模型总结:《高级设计师常用的设计模型都在这儿了》

每个产品的 Aha时刻都不一样,不一定是一个功能,也许是一系列的行为。可以总结为:(谁)在(多长时间内)完成(多少次)(什么行为)。

△ 不同产品不同Aha时刻

找到了 Aha时刻,我们需要将它用数据指标量化,这样才能方便我们后续跟进及不断改进,衡量我们的设计结果。通常使用激活率量化:激活率 = 新用户在一定时间内完成激活行为的比率。例如:Dropbox激活率 = 注册一周内上传了一个文件的用户 / 总注册数,需要说明的是,该激活率需要根据你产品的 Aha时刻定义。

接下来最重要的事就是我们应该帮助用户尽快体验到 Aha时刻,提升激活率。可以快速按以下四步进行产品试验,验证激活率是否有提升:

△ 设计思维提升「激活率」

为了提升激活率 Dave McClure 也提供一系列帮助用户感受到产品价值产生 Aha 体验的7条策略:

看这些理论可能比较生硬不好理解,那么下面将以 Dropbox 为例分析下他们是如何利用这些策略激活用户,让用户感受到产品的 Aha时刻。

Dropbox案列

Dropbox 通过数据分析得出他们用户的 Aha时刻是:一台设备上安装有一个 Dropbox,并且里面有一个文件。

Dropbox团队首先梳理了用户体验地图,找到用户的关键触点,数据分析哪些触点用户流失严重,流失的原因是什么,优化流失严重的触点及关键触点。在每个触点上强调产品的价值及吸引用户完成指定任务,让用户尽快能体验到产品的 Aha时刻。

△ 新手引导

Dropbox 安装完成后,一系列的引导页,除了介绍核心功能外,还引导用户向 Dropbox 文件夹拖放第一个文件,目标是让用户尽快感受到 Aha时刻。

△ 空白状态

设计师不放过任何一个触点,利用页面的空白状态,使用插画及文案介绍再次强调 Dropbox 的核心功能,引导用户添加文件及共享文件。

△ 提供帮助

利用动效吸引帮助用户完成上传文件操作,提供动力。

△ 定期给用户发送邮件,激活用户

当你注册安装了 Dropbox后,官方会向你的邮箱发一封邮件,邮件内容同样是在强调 Dropbox 的核心功能,文案为「您的Dropbox有点孤单。快来添加一些文件!」吸引用户向 Dropbox 添加文档。尽早体验到 Aha时刻。

以上就是 Dropbox 利用一些设计策略,围绕着 Aha时刻展开的设计,目标只有一个尽早让用户体验到 Aha时刻,感受到产品的价值激活用户并提高用户留存。

配合其他一些策略,例如:非常著名的 Dropbox 用户推荐系统,以及不断地实验,最终 Dropbox 用户增长达到一个质的飞跃。

优化设计时,除了 Dave McClure 提供的激活用户的策略外,我们还可以利用 bj Fogg模型激活用户。

△ Fogg Behavior Model

总结

获客成本的增加,激活存量用户,提高用户留存也许是我们做用户增长的另一个更好的选择。找到产品的 Aha时刻,定义激活率指标,通过数据分析,发现阻碍用户体验Aha时刻的触点,根据设计策略进行优化,不断试验,最终提升激活率,激活存量用户达到用户增长的目标。

参考文献

欢迎关注作者的微信公众号:「业余体验设计」

优设大课堂

Source: 优设网 – UISDC | 25 Mar 2019 | 1:48 am(NZT)

最近超火的折叠屏手机,应该如何做交互设计?

随着折叠屏手机的发布,我们看到未来手机的形态可能会朝着柔性手机方向发展,那么,让我们来思考一件事:如何在折叠屏手机上做交互设计呢?

最近三星、华为和柔宇各发布了一款折叠屏手机,它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种,也是我目前最看好的手机形态之一(未来手机的形态应该是柔性手机,现在已知有柔性电路板的存在了)。通过几天的观察和思考,我认为折叠屏手机有以下好处:

以上基于「展开」态的想法,在折叠状态下还有一些不错的想法供大家思考。

外折叠设计

华为在MWC2019上演示了一个名叫「镜像智拍」的功能,它可以让被拍摄的人实时看到拍摄效果,并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍,妹子们再也不用担心自己的男朋友把自己拍得很丑了。

在折叠状态时可以把背面当做一个附加的交互空间,实现一些简单的交互操作,例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放,这种背部触控方式并不是什么新鲜事,在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。

除了附加的交互空间,我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序,例如我们可以用主屏幕玩游戏,在加载游戏时翻转屏幕刷个微博,操作起来十分方便。

折叠屏当然不只有展开和折叠两个状态,还有翻折状态,它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上,实现中远距离的自拍;同时它可以进行多角度拍摄,成为制作 VR 内容的利器。在玩法上,翻折状态可以通过两面屏幕的不同内容引入多人互动的概念,但这种应用场景比较难想象。

内折叠设计

相比外折叠设计,内折叠设计玩法相对较少,在这里我只想到了任天堂NDS 的概念:在翻折状态时它就是两块独立屏幕,它可以独立显示不同的内容,例如上屏显示内容,下屏显示操作区域,打游戏时翻折状态明显要比其他状态舒服。

个人观点:从以上案例来看,外折叠设计在交互和玩法上都比内折叠设计好,未来很有可能以外折叠设计为主。

折叠屏手机交互设计的改变

  1. 响应式布局

当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大,而是要考虑响应式布局设计。

描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器,那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上,但现在手机也应该考虑响应式设计,以下是设计时需要考虑的细节。

它不是简单的响应式设计。从上文得知,「展开」态时要考虑是平板模式还是双屏幕模式,如果是平板模式,那么内容应该在一个整体里;若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。

考虑通过 Fragment(片段)来设计。Fragment 是 Android3.0提出的 API,出现的初衷是为了 UI 更灵活地适应大屏幕的平板电脑。以下是 Android 对 Fragment 的官方介绍:「Fragment 表示 Activity 中的行为或用户界面部分。您可以将多个 Fragment 组合在一个 Activity 中来构建多窗格 UI,以及在多个 Activity 中重复使用某个 Fragment。( Activity 可以理解为一个页面,Android 开发中最重要的概念之一)」

参考微软的 UWP 设计概念。UWP 即 Windows 10中的 Universal Windows Platform(Windows 通用应用平台)。UWP 应用的理念并不是为某一个终端而设计,而是同一套代码和设计可以在所有 Windows 10设备上运行,包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。

它的响应式设计的设计技巧包括以下6点:

调整位置:你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子:为了确保同时展示两个元素,在手机上我们必须采用纵向滚动界面,而在平板电脑上,我们可以调整框架的位置,变为横屏滚动界面。如果你用网格设计这些位置,你也可以不改变内容框架,但其他 UI 元素可以使用响应式设计。

调整尺寸:你可以通过调整空白和 UI 元素的尺寸来优化框架,比如下面这个例子,可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。

调整顺序:通过调整 UI 元素的顺序和方向,优化内容显示效果。举个例子,在大屏上运行时,可以再添加一栏,并且加入分类列表,这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动,而在平板上使用两栏横向滚动的优化。

展现:你可以基于屏幕的真实大小,设备支持的功能,特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子,小屏幕上这些按钮通常是被删减的,但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。

换位:这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单:小屏幕上他是隐藏在汉堡菜单中纵向排列的,但是在大屏幕上,更大的 Tab 是更好地选择。

改变结构:你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。

以上6点引用了Windows 开发人员中心 《Design Basics:Responsive design 101 for UWP apps》

  2. 场景化设计

考虑用户翻转折叠屏幕时的场景和动机是什么,从而优化现有界面及交互流程,举几个例子。

以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面,使游戏的沉浸感更强;当玩家采用大屏模式时,我们可以认为玩家需要获取更多信息,这时候把聊天、装备等相关功能界面展示出来。

当用户在微信里查看定位信息有新消息提醒时,手机变成大屏模式时应该同时存在地图界面和聊天界面。

相关注意事项

Google 在2018年11月就宣布了对折叠屏的支持,包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验,必须考虑以下两个方面:生命周期管理以及转场动效。

生命周期管理

目前大部分手机应用为了有更流畅的体验会做适量的生命周期管理,例如退出页面时会释放相关内存。因此设计师在设计折叠屏交互时要考虑哪些页面不能被销毁,一定要让用户进行展开、折叠等操作, 应用任务不中断重启,产品可以自动适应各种屏幕下的静态布局规格。

转场动效

从目前 Google 公布的新版 Android系统来看,已经可以做到当折叠/展开设备的时候,页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。

参考案例:

华为基于HUAWEI Mate X发布的折叠屏官方适配方案,相关链接:https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i

注:由作者撰写的《AI改变设计——人工智能时代的设计师生存手册》已经上架了,欢迎购买 → http://product.dangdang.com/26485737.html

欢迎关注作者的微信公众号:「薛志荣」

 

优设大课堂

Source: 优设网 – UISDC | 24 Mar 2019 | 6:38 am(NZT)











© 澳纽网 Ausnz.net