如何做出符合产品个性的视觉设计?(实操篇)

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

此文档关于BANNER的规范设置,只是规范在目前情况下,为了提高团队伙伴们的工作效率和维护平台风格的统一而制定的,但是,作为一名合格的设计师,是在不需要规范的情况下,能深入理解产品,了解市场,了解用户,而独立做出有创意的优秀作品。

如何做出符合产品个性的视觉设计?(实操篇)

随着IOS10的发布,现在的设计趋势就是「大而简,简而精」。

如何做出符合产品个性的视觉设计?(实操篇)

Instagram改版

如何做出符合产品个性的视觉设计?(实操篇)

Airbnb改版

如何做出符合产品个性的视觉设计?(实操篇)

Apple Music改版

在这股趋势下,未来的设计将更注重产品的内容和操作体验,降低其他因素对用户使用上的干扰,这对设计师来说,是不小的挑战,因为越简单的东西越难设计,特别是如何在界面设计中去把握「大」和「简」的程度以及如何通过更有限的手段和空间来传达更多的信息和指引用户来达到「精」的目标,这是我们在未来需要不断考虑、探索和解决的问题。

由于我负责的一款产品由之前的社区O2O服务的产品改变为目前的以促销购物刺激消费达成购买为目的的电商属性,所以我们的设计也产生了相应的变化。

未来商业模式的变化,体现在生活首页的整体变化中,首页所有的模块中80%的属性被定义为广告位。表现在图版变得更多,位置更拥挤,视觉上会更不可控。

提出问题

因为位置和模块的变化,预计出现的问题将会是:

  1. BANNER设计混乱,风格不一,定位不明。
  2. BANNER设计花费的时间较长,工作效率低下。
  3. 用户体验不好,无法达成产品最初的设计目的。

根据BANNER的类型,我利用思维导图将BANNER的类型、目的、设计方法等进行了如下的分析,并进行了PPT文档的说明。

分析问题

混乱的上传入口,不可控的视觉效果,我们应该如何来避免这种情况的出现呢:

通过订立BANNER设计规范,从版面、字体、色彩上去进行控制。

解决问题

需要将产品定义为刺激消费达成购买为目的的电商平台。

在版面上,我们进行了五种版面的编排,提示设计师进行设计。

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

如何做出符合产品个性的视觉设计?(实操篇)

总结

除了对BANNER进行规范设计外,还需要建立BANNER视觉库,按BANNER类型进行分类,便于大家在未来的工作中,根据运营需求进行定性-分类-并进行参考设计。我们产品整体的设计风格要求:正品/高级/低饱和,构图饱满,空间布局合理,透气。规范上我们只做80%的设定。另外20%我们留给不确定和其它情况。

另外,此文档关于BANNER的规范设置只是规范只是在当下为了提高大家的效率和维护平台风格的统一,而作为一名优秀的设计师,是在不需要规范的情况下,能深入理解产品,了解市场,了解用户,而做出有创意的优秀作品的。

 

作者:李汉江(简书ID:设计师李奥),A股上市公司怡亚通高级视觉设计师,十多年品牌设计及互联网产品视觉设计经验。服务过的品牌有:华侨城地产/万科地产/朗诗地产/中国平安/安奈儿童装等。

本文由 @李汉江 原创发布于人人都是产品经理。未经许可,禁止转载。

随意打赏

如何做出好产品ui视觉设计视觉设计师做出贡献
提交建议
微信扫一扫,分享给好友吧。