header_v0.7.32

cjshadow设计经验谈6-基于环形设计论的功能引导图设计

3年前发布

原创文章 / UI / 教程
cjshadow 原创,如需商业用途或转载请与cjshadow联系,谢谢配合。

cjshadow设计经验谈第六篇,用功能引导图作为案例说明环形设计论的实操方式。


大约1年多之前我写了一片环形设计论的文章,前些时间也在上海举办的《指尖上的设计》的视觉分享会中做了一次关于这个理论的演讲,这次会引用高德地图近几期的功能引导图作为案例来示范这个理论的设计方法。

而对于没有阅读过《环形设计论》的用户,如果看完这一篇文章后觉得对你有用,可以在这里重温里面的理论方法:http://www.zcool.com.cn/article/ZMzg3NjQ=.html

首先简单回顾一下环形设计的方法:<产品-行业-程序-设计>环形结合设计。

那么最开始,先分析地图产品的几个关键点,了解这几个关键的点,才能做针对性的设计!

产品---地图产品中,需要拥有全国的地理位置信息,然后用户通过搜索、查图等方式进行查阅地理位置内容、指定目的地进行导航等服务。这是地图产品的基本属性,那么可以称为“基于地理位置的服务”的产品。

行业---这个行业属于内容提供类型,内容为地理位置信息,地理位置信息包含地点、商铺、景点等多种类型的信息,通过信息的优化可以给用户获得更多的生活化服务。

程序---这里仅针对“引导图”的实现方式,了解其在程序中的特性,优先级,能实现的效果。

设计---根据产品特性、行业特征、程序可实现的方式,定义设计风格和可执行方案。

先从接手的第一个版本开始说起:

最开始拿到的需求,就是在版本迭代中,新增的几个功能点,要做成引导页面告知用户,那么对与刚接触地图产品的我,其实还未能了解的特别透彻,只能从对地图产品最原始的感觉去进行设计。简单的分析后,大概输出了一个草稿方案:


设计的意图:

1.引导图通过滑屏的方式进行每一张的浏览,用插画的方式表现文案内容,那么我们先做了一张连续的图,这样在滑动的时候,不会在图像中间出现“断裂”的画面。

2.因为是在春节期间发布的版本,所以会以假期出行的一个流程,从家里出发,在路上,在景区,然后回到家的一个过程来串联整个过程。

这是第一个版本的最终效果:


总得来说,我们会有一些细节设计在里面,比如最后一张图中男生对志玲姐姐声音的热爱和旁边妹子有点不爽的表情。整体效果也还ok。

小结:这是基于使用地图产品应用场景的设计方式

而在第一个版本上线之后,我们马上就开始要对接下来的版本设计进行更深入的分析。在第二个版本的设计中,我们开始对整个地图产品进行了更多分析和思考,然后采用了“地图式”的绘制方式:


这次的设计采用了风格偏简约的道路平面图,能和本身地图的特征作为结合,利用路线示意的方式来表达我们的功能点。而设计师在一本正经画地图的同时,也会加入一些小细节去增加整个画面的趣味性,如绕弯的公交、躲在草丛中拍照的jc叔叔之类的现实中有趣的场景来引起用户的共鸣。

然后随着版本的发布,设计师们也意外的发现有些网站收录了这个引导图。这让设计师们蛮开心的。当然最过瘾的,还是另一个同类型公司,在他们下一个版本中也用了这种设计方式来表达。嗯,嗯…

小结:基于地图特征的设计表达方式

经过了上两个版本的试验,接下来要做的是需要定位一个可持续沿用的设计风格,这对品牌、设计方向都是有必要的,那么我们又是新的一轮讨论和思考。

再次把产品和行业特性要分析的更加的透彻,同时因为之前两个版本时间太紧张的关系,并没有太多关注在引导图中,程序可以实现哪些效果,包括可操作的,可动态的。

那么,引用“环形设计论”里面的方法,按照:产品、设计、程序、行业这种环形去进行设计指引。

----产品----

从产品的定位分析,我们更希望把高德地图表达为:高德城市的概念。

所以,我们根据这一特征,用“微缩城市”的概念来表达其特性,这样会更有亲和力,更能触发用户内心的实际使用场景,同时也非常吻合地图特征。

----设计----

计算阶段:

根据以往的设计经验,引导图需要输出的平台与尺寸为ios:640X1136. 640x960.320x480

安卓:480x800。那么就需要把几个尺寸的比例进行重叠,然后得出绿色部分的“安全区”,根据安全区的大小进行矢量的图像绘制。

在绘制的区域中,采用游戏领域常用的斜45度角的网格制图方式先计算好网格的大小,然后根据网格进行制图。这样得出的结果角度一致,形体大小可控。即便在之后由其他设计师绘制,也可以风格统一。


绘图的第一步我们会通过草图的方式先进行沟通,通过草图进行沟通能提高沟通的效率,在草图阶段修改也会相当的快捷。


设计阶段:

进入绘制阶段,每个物件的大小根据网格来定义,再耐心的逐像素刻画即可…


----程序----

到了程序实现的部分,考虑在引导图中加入动态效果的可能性,还是可以先用草图的动画效果,用于技术实现成本评估。


对于开发来说,对于相对复杂的动态效果会不容易分析其实现原理。那么作为设计师,需要拆分在动画过程中实现需要用到的技术:

1.图片的放大与缩小  2.图片的透明度变化  3.图片的位置移动  4.图片的遮罩效果  5.图片的动画播放速度(帧率)

如果程序对这5点都可以进行实现,那么接下来就要评估组合后的问题,如是否会过多的占用系统性能,对于安卓适配时切片对位等问题。

当然经过这种拆分式的实现分析,这些效果都是可以轻松实现的,这样我们作为设计师来说,,是可以通过逻辑来了解程序的实现方式与难度,从而可以让自己的设计实现变得更有方法可寻。也是设计师需要了解的知识,这点一般会被设计师忽略。


----行业----

正常来说,设计的整个流程基本都结束,不过还是要考虑到,这个设计应用到对应的行业的中是否适合。

这里需要对行业的思考,其中一点是了解这款软件会在什么场景中使用,从而在设计中应该避免一些使用环境中发生问题。比如司机在夜间使用导航时需要夜间模式,而夜间模式除了颜色的变化还需要加入一些夜间使用时相应参数等,这些都是行业的特性。

那么对于地图产品的引导图的行业特征,需要考虑到在使用的过程中的情况。引导图属于第一次安装或是更新版本后第一次启用后出现的界面,而在一些较为着急的情况下打开地图需要获得帮助时,启动后出现引导图,用户是而需要快速的跳过这个步骤的。那么在这个时候出现这种“酷炫”的动画,会导致使用的时候“卡”在这个过程中,这就不吻合行业特征的设计了。所以这种“需要消耗时间”的动画是不适合出现在这种需要快速跳过的时候出现的。

(这里需要插一句,最近业内流行做动效设计,也在软件中能发现多了很多动态设计,不过往往会过分注重动效的效果,而忽略了动效的作用。动效应该是有目的的存在,而不应该为了做动效而强加进去,动效影响了操作或存在的意义不明确,那就是反效果的。)

那么,我们希望在不影响用户快速跳过的操作的情况下加入动效。然后经过一些思考和尝试,采用Cinemagraph的方式:


这种安安静静的动态效果,既不会影响用户的操作,也更能体现这个“微缩城市”概念。最重要的是,动态的地方刚好能表现我们需要突出的功能点,这样的设计就很吻合了。

下面是一些实现后的效果:

 

回顾一下,从第一个版本的设计,表达的是软件的使用场景,然后第二版表达地图特征,最后演变出“高德城市”的概念,这些推导过程,都是经过对产品、行业的不断了解和深入,从而让设计能更为贴切的使用在其中,而对程序的了解,也能让设计在产品中还原实现。


以上是环形设计论运用在实际操作时的方法。这个方法其实很需要简单粗暴,就是当我们一旦进入设计这个领域,就应该投入更多的时间和精力集中在这个领域中。这样你才能了解这个行业特征、这个产品的特性,从而对设计时会有更多理性思维来验证自己的感性创作思维。这样不管是在提案、实际操作中,都会有理有据,同时也是大家沟通时必要的共同语言。我们不能和非美术人员讲明度饱和度这些专业用语,也许别人只会和你说高端大气上档次,但是我们如果有更多的产品知识、行业知识、专业技能去操作的时候,会更得心应手。

最后说一个小故事:在我刚开始做UI的时候,那时候还是黑白手机的时代,与一个4A公司的设计师在一起吃饭聊天。这个资深的设计师深抽了一口烟,对着我说“你呀,画那些什么图标,这种职业是没有前途的,你现在2千快钱一个月,能干嘛啊?要做就要做这个行业赚钱的事情,你不是会3d嘛,你去做三维效果图,可赚钱了。而且你每天都在加班,你傻啊,老板给多少钱干多少事情,你很吃亏呀。”我默默的点了点头,然后就变得更努力的加班了…也许是我自己天生就不喜欢被别人指点,即便是那时候压根就不存在UI这个职业。不知道现在这位4A的哥哥是不是已经发家致富,反正送我的那句<老板给多少钱做多少事>的“名言”,变成我一直放在心里的一句话,貌似越逆反其道,收获就越多。

小故事说完,不管对你是否有启发,不管你是认同哪一方,我相信你会有一条属于自己的路的。

最后希望耐心看完的你会有一些收获。

Ps:引导图的设计师是我们团队的jellyfishzhi与honfan,大家感兴趣可以去他的作品页看更多的作品。

jellyfishzhi

http://www.zcool.com.cn/u/526898

honfan

http://www.zcool.com.cn/u/353331



529
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功