蓝宇程序

您身边的百度小程序专家!

当前位置:首页 / 百度小程序公开课 / 百度唐娴:如何为自己的小程序打造一个有识别度的logo

百度唐娴:如何为自己的小程序打造一个有识别度的logo

栏目:百度小程序公开课   日期:2019-01-26   浏览量:676
摘要:

用户看到小程序的的时候,首先看到就是小程序logo,打造一个有识别度的logo,让用户快速一瞥中对你的智能小程序留下印象。

当我们完成了小程序的架构流程,阅读的排版以及颜色以后,接下来我们要为它打造一个有识别度的logo,帮助我们的小程序递给用户这第一张名片。以下内容由蓝宇程序根据百度智能小程序公开课上唐娴分享整理而来,蓝宇程序,您身边的百度小程序专家!

为自己的小程序打造一个有识别度的logo

百度唐娴:为小程序打造一个有识别度的logo

这张名片大家可以联想一下自己接到名片的方式,可能也就是看个两秒钟就结束了,所以当我们在递给小程序用户的这一张名片的时候,首要要保证图形清晰可以辨识,这样用户在快速一瞥中才能对你的智能小程序留下印象。

智能小程序学院LOGO设计

举个例子,当我们接到智能小程序学院的logo设计的时候,如果我们像左图这样把长长的一串名称生硬的嵌套进到一个logo里边,这个方式是非常不可取的,首先它的识别度非常不好。其次它因为过度的留白会导致logo欠缺一个基础的美感。像右图一样,我们把这些文字通过视觉创意的方式转化成一个图形化的设计,这样能让我们整个logo显得构图更加饱满,表达也非常的清楚,在整个小程序传播的过程中,他给用户的记忆点是会更加深刻的。

一、跟界面呼应的小程序logo设计案例

这张名片最好还能跟界面有所呼应,在用户打开小程序之前这个logo其实已经在向用户传达,这是一个怎么样的小程序?

小程序logo映射产品特点

比如说我们的爱说唱小程序的logo,它使用了一个镭射的渐变色,整合了一系列高明度高纯度的亮色,丰富多彩的颜色层次配合上这一个跳跃的涂鸦字体,能够让用户知道这是一个年轻的独特的时尚的小程序。

而右侧的分诊助手的对比就非常明显,它使用了一个分诊器,配合上心形的一个结合,这个创意设计克制地使用了蓝白两个配色,彰显了他作为一个医疗属性的小程序,非常克制非常专业非常严谨的一个特点。

二、小程序logo会显示为图形

我们这么辛苦地打造好了一个识别性好的小logo了,千万不要在最后一步掉链子,为了我们自己的logo完完整整的展现,我们需要在输出图片的时候注意这个细节。我们在开发者平台的时候上传小程序的logo文件是一张正方形的图片,但是当这个图片在手百内展现的时候,它会被裁切成圆形。

正确输出完整展现logo

因此我们需要重点关注这张圆形图片的最后的效果,比如说像左图,其实长隆动物园的logo在方形的时候展现的非常好,但是它一旦被裁切,他的文字就发生了遮挡,信息可读性就不太好了。最好的方式实际上是右边这种logo,他把主要的元素控制在了红色的区域,也就是我们俗称的七分码,每一个主要的区域占到logo的70%左右,能保证logo展现完全,并且留出适当的留白,让logo看起来更加的舒服。

三、如何让你的小程序脱颖而出

做好以上的几步,我们的小程序完完全全可以跟用户见面了。但是正如前面提到一样,这么多小程序怎么样才能脱颖而出?

动效设计增加小程序趣味

运用生动的动效设计

我们建议大家多做一步,也就是运用生动的动效设计,适时适度的动效,能够使我们的小程序交互更加的顺畅,并且能为小程序增加很多人情味。比如说当动效用于交互转场引导的时候,在左图的压力事件放松练习里,随着它使用了一个光阴上移的方式,然后巧妙地把用户视线往上移,然后把结果带了出来,这个就非常的自然。而在图2中,当这一个动向用于交互的互动增强时,随着用户手指触碰屏幕的方式,它会触发一个免疫的动效层层弹开,然后让这一个交互行为有了更多的趣味性。而最后当这个动效用于流程衔接的时候,比如说我们的爱说唱小程序,它其实在歌曲等待的合成中时间挺长的,在这个过程中引入了老师的一些点评,不但能缓解用户在整个等待流程中的焦虑感,还能带给用户一些氛围上的小惊喜。

四、唐娴推荐2种常用的动效设计工具

其实动效的学问很多,然后是市面上的工具也很多,我们今天就不展开,只介绍我们团队内常用的两种设计的方式。

小程序动效制作工具和方法

第一种是使用了一种交互型的动效,使用Principle软件,它可以提供一个PRD文件,这个文件能够提供准确的动效参数,从而帮助我们的开发者能够精准地实现我们自己想要的效果。第二种是展现型的一个动效,我们推荐After Effects加上Lottie这一个插件,输出一个JSON文件以后,开发同学只需要调用这个JSON文件就可以完美的展现动效了,非常的简单。

五、小程序全面屏适配

最后我还想跟大家分享两个设计上的小细节,这两个小细节即使是我们团队在平常的设计工作中也经常会被忽略,包括我刚才看到在前面的视频中也有不少的小程序踩了这个雷区,这个就是全面屏适配的问题。

小程序设计全面屏适配的问题

随着全面屏手机的一个普及,我们需要注意全面屏的适配以及他们的系统特性。我们可以看到左图,当这个小程序没有很好的适配一个全面屏的时候,它不仅不美观,而且还可能会因为它的操作功能过于靠近底部的操作系统按钮导致无法正常使用。解决这个问题其实非常简单,只需要像右图一样引用我们的智能小程序的全面屏适配参数,就可以完美地保证功能的可用性和界面的美观程度。

六、注重设计细节:空态

第二个小细节,不知道大家在平常使用小程序的时候是否遇到过,我叫它困惑的白屏,就是页面白茫茫真干净,令人经常发出灵魂的讨论,我在哪?我要干什么?

智能小程序设计细节空态

这一个空白页面的产生可能会是因为网络突然断开,或者是升级,需要升级手机百度或者是需要用户增加一些新的数据,为了填补这些空白,我们团队也总结了一些常用的空态情况,并且放在了视觉组件库中,大家可以去使用,希望智能小程序里边这些令人困惑的空白会越来越少。

1、智能小程序视觉组件库

最后为了大家更好地实践我们的设计六部曲,我们向大家推出了一些设计工具。第一个是智能小程序的一个视觉组件库,我们为大家准备了Sketch和Photoshop两个版本,方便各位设计师使用。里边除了一些视觉组件以外,还有刚才我们提到的一些空态等常用的页面,能够帮助我们的开发者节省设计成本。

百度小程序视觉组件库

2、百度小程序设计总查表

第二个是我们的智能小程序的设计总查表,虽然说它的名字叫做设计总查,但是我希望整一个开发团队能够紧密配合,收藏并且下载这个使用设计总查表,在日常的工作中能够为自己查漏补缺。

3、智能小程序官方示例

第三个是刚才前面两位同学经常提到的智能小程序的官方示例,它展示了我们智能小程序交互组件以及能力的一些应用,大家可以通过百度APP搜索智能小程序官方示例或者直接使用手机百度扫码体验一下。

不知不觉我这一次的分享已经接近了尾声,后续如果大家有更多想了解的一些设计的内容和故事,可以去我们的智能小程序官网里边的文档平台里去下载,去查看我们的智能小程序体验指南,里边提供了一些智能小程序的设计原则,里面总结了我们交互和视觉上的一些建议,还提供了前面说到的一些设计资源工具。

智能小程序体验设计指南

后续还会把我们在智能小程序设计中的故事慢慢的书写进去,也欢迎大家在开发者论坛中提出更多跟视觉设计交互设计相关的一些内容,希望能听到大家更多关于智能小程序的声音。以上就是我今天想跟大家分享的智能小程序体验设计指引,从智能小程序是更美观更流畅更丰富的应用产品开始,我们阐述了智能小程序中的设计六部曲,并且在最后为大家准备了一些常用的设计工具,希望对大家有所帮助。

微信扫一扫,分享到朋友圈

百度唐娴:如何为自己的小程序打造一个有识别度的logo
微信扫码关注蓝宇程序
微信扫码关注蓝宇程序
蓝宇数据(广州)有限公司 地址:广东省广州市科学城 电话:400 -080 -7157
Copright © 2020 蓝宇数据 All Rights Reserved. 粤ICP备18144795号 站点地图