header_v0.7.0

高德地图3D版引导图设计

2年前发布

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

整理了几个高德地图3D版本的引导图与开机闪屏设计理念与制作方法

整理了几个高德地图3D版本的引导图与开机闪屏设计理念与制作方法。

这个3D系列设计根据高德地图版本迭代的功能特性,注重单个功能点的优化,所以化繁为简,将之前的“场景化设计”改成了“单个功能点特征”的设计,让用户在快速浏览的时候能一眼看到更新的功能点。


高德地图目前处于快速迭代的阶段,平均3周会有一个版本,每次的更新都会优化现有功能和增加新功能点。根据这种特性,我们将引导图中的重心放在一个“物”上,由一个图案来表达这个功能点的更新。


两位设计师尝试了两个不同风格的草图:

两种风格都各有其识别性,但是相对于地图行业来说风格并不适合,而且如果带有个人的绘画风格,不利于多人共同制作和统一效果。

所以我们会尝试使用3d建模的方式,统一视觉效果,并且更能吻合地图软件的行业特征。

制作流程就是先通过3D建模,然后在photoshop里面重新绘制形体和着色。这种方式能在3D中方便的塑形和保持一致的透视关系,制作起来也很方便快捷。

以下是成品效果图:

经过两个版本的绘制后,我们将衬托物体的底图也做了一些细节处理,这样画面更为细腻,同时也和物体本身的场景能匹配。

细化新底图后的设计效果:

在应用商店的图片也复用了引导图中的设计元素,能加快设计输出的效率和有不错的视觉效果:

接下来说说闪屏设计。除了普通版本的闪屏,我们还设计了带有广告语的版本,最开始也是比较生硬的把广告语用同样的方式做了草图:

其实整体效果还ok,但是缺乏“行业调性”,有时候就是领导口中常说的“大气”。那么为了更明确的把宣传重点传达出去,经过几个版本的草图试验,最后我们选择了这个角度来表现:

同样是3D建模,然后在photoshop加工润色的方式。


以上是3D版本的引导图和闪屏设计,感谢你的阅读。往期的引导图设计在这两个设计师的空间中,有兴趣可以去看看:


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

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



449

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功