产品设计

    今日:62| 主题:15655
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 教程 | 手把手教你做好App端的banner设计

[复制链接]
Deleter回忆 发表于 6 天前
44 3

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
世界要看脸,App也要看banner,作为一条与用户连接的关键纽带,门面当然要漂亮。banner虽然是一个小小的资源位,但却承担着巨大的使命,但凡需要在页面上呈现信息的产品,就离不开它。如何做好App端的banner设计?
   banner在不同产品上,不同载体里, 甚至是不同使用场景下, “好”的定义都不同。
   有些banner的主要目的是吸引眼球, “骗”人点击就算成功了; 有些banner还要体现出想表达的事情, 方便用户做简单判断和筛选。 而今天,我们暂时不说这些大概念, 只唠唠App端的banner该如何设计。
    话说banner好重要!
    在说banner的重要性之前,我们要先摆脱一个错误的认识: “banner仅仅是用来装饰,抓取用户眼球的”。   
    我们之所以把banner称为 “资源位” ,是因为它除了要承担吸引用户眼球的责任外,还需要向用户传达信息。让用户感受到视觉冲击的同时,也能接收到要输出的信息。所以说, 一切不以传达有效信息、有效传达信息为目的的banner都是耍流氓。  
   另外,在传达信息的基础上,banner的另一个作用就是促使用户产生行动。使他们在看过banner上呈现的信息后,产生想点进去参与的欲望,这就是我们通常说的Call To Action。
    如何合理设计一款banner
   当然,我们也许早就知道了banner的重要性,可是真动起手来做却显得有些吃力。很多人也表示,不知道如何开始做一款banner,拿到需求脑袋是懵的。而这些问题背后的原因无非是看得太少,做得太少。今天运营君就和大家一起来梳理下设计出一款banner的基本步骤。
    确定传达给用户的信息
   通常来说,明确传达给用户信息这一步和审美、视觉设计都没关系,而是要求你对自己希望表达的内容、所面向的用户,有明确的掌握。
   
教程 | 手把手教你做好App端的banner设计-1 (banner设计,产品,承担,漂亮,如何)

   比如,小牛助驾调研问卷banner要传达出来的信息有:
   调研问卷和参与调研的时间
   这是我们要传达的核心信息。只不过这看起来有些单调,需要其它元素的辅助,更形象化地展现出来。所以,我们又添加了一些元素,让核心信息表现得更加生动。
   品牌形象
   让用户看到小牛助驾的卡通形象一眼就知道这是谁家的调研问卷。这就是所谓的视觉认知。当然,这种视觉认知的形成需要一定的重复次数,通过反复强化视觉形象来加深用户脑海中的印象。
   引导语言
   通过激励性质的语言“牛粉们赶快行动起来吧!”辅助banner表达主要信息,进一步点燃用户点击banner的欲望。
    明确各信息的优先级
   虽然上面的banner中有3类信息,但是优先级肯定不同,所以对应到设计上,放置在板块的位置、大小、颜色的突出是需要区别开的。
    掌握用户视觉路径
   遵循用户视觉路径设计banner最大的好处就是在用户接触到banner之初,就有了明确的“视觉中心”。当他们的视觉被聚焦后,设计师就可以从聚焦点开始引申,促使用户产生接下来的行动。
   用户的视觉路径通常是按照阅读的“从上到下,从左到右”的顺序,所以一般会将重要的内容放在左上角。但小牛助驾选择了从中间向外扩散设计,重要的内容自然是放在了中间。但我们从辅助元素(品牌形象、调研问卷图标、引导语)的位置也能看出,整个banner的设计遵循了用户的视觉路径。
    了解标准识别颜色
   做一款banner,配色自然是十分重要的。如果实在是“配色弱”,那就去网上找找配色图表补补课吧……
    做好视觉排版
   所谓视觉上的排版无非是在信息优先级已经确定的情况下,让他们变得更好看些,视觉呈现上更有层次感。多注意一些视觉排版中的要素,例如:对齐、图标样式、字体数量等等。
    掌握三个Appbanner进阶技巧
   要想做好一款App端的banner,除了要了解上面的基本问题外,还需要掌握三个常用的进阶技巧才能让你设计…….完美!
    平铺风格
   平铺风格banner最大的好处就是可以让主题、文案得到突出,再加上展示的产品多、画面丰富,很容易营造出场景氛围,吸引用户的关注,从而使banner的打开率升高。但也因为产品展示得多,对产品质量和角度有很高的要求,在设计时耗时较长。
   下面是几个典型的平铺banner

教程 | 手把手教你做好App端的banner设计-2 (banner设计,产品,承担,漂亮,如何)

友荐云推荐




上一篇:用户讨厌你做营销,不如试试这4种方法
下一篇:技术干货|Axure小众使用技巧分享
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

昆仑之巅 发表于 3 天前
呵呵,低调,低调!
回复 支持 反对

使用道具 举报

life 发表于 前天 02:41
啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

沦的岱码 发表于 前天 03:03
鸳鸳相抱何时了,鸯在一边看热闹。  
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表