IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Banner设计

阿里巴巴(中文站)用户体验设计部博客 2010-09-26 08:57:06 累计浏览 2,642 次
本机暂存

    Banner设计心得

    前几天,我受到了一次打击,之前海盐的紧固件的专场上线后,实际的效果与我原本的设计相去甚远。究竟是什么原因造成了这样的差异呢?在经过一些对照比较后发现,问题就出在“Banner的设计”上。线上的版本只是将一些简单的未经处理的图片放了上去,话说术业有专攻,倒也是为难了运营的同学。一个好的页面是由若干个优秀的点组成,今天在这里就以首页Banner工业品类为例,进行模板化的粗浅总结,以期望对往后在保证Banner设计质量的前提下提高工作效率有所帮助。

    我将一块好的Banner设计总结出了3大条件:

    1. 明确的信息传达;之所以将这一条列为第一点是因为Banner最主要的目的在于告诉用户我们要干什么,我们要告诉他们什么。在网络世界里,我更倾向认为其是一个能真正体现个人意志的地方,如果我们不能在最短的时间内把我们想说的传达给用户的话,那用户会毫无顾虑的选择离开,而不用考虑什么“情面”。在具体的Banner设计中,信息的传达方式无外乎2种――图片和文字;图片是一种最直接的传达模式,也是用户理解成本最低的信息接受渠道,因此图片一定要选择明晰的,一眼看上去就知道到底在卖什么,要表达什么。

    而文字,是要进一步的告诉用户,我们这个是干什么呢,能给用户带来什么,是打折呢还是新货上市?因此,我们要按照我们的利益点的轻重来依次展现,例如我们最大的卖点就是“2折销售”,那么毫无疑问,“2折销售”的字样一定要大,要醒目,其余的则需要相应的弱化。

     2.合适的创意;一直以来我都认为我们做的其实是“戴着脚铐”的设计,我们需要在一定的框架内进行设计,否则网站的整体性从何谈起,毕竟我们做的是设计不是艺术。

    那Banner具体如何来“创意”呢?(之所有选择“创意”这个词,是因为“设计”包含文字排版,整体创意等,而这里说的是具体的创意)也许Banner的创意有千万种,但是有一种是较容易实现并能在之后的其他设计中通用的,这便是“氛围的营造”。所谓“氛围的营造”就是指根据具体产品的特性来烘托周围的气氛,这个气氛可以是一个很小的相关元素,例如下图,所有的设计都在于机器迸发出的火花,这虽然只是一个元素,但是却可以让死气沉沉的工具“活起来”,最为关键的是这个元素承载了多种电动工具的“共性”,换句话说就是在不同的电动工具的Banner设计中都可以使用到。

     3.优良的素材;很多时候,一个拙劣的素材会毁掉一个很好的创意,可以说素材是Banner设计中的点睛一笔。那么什么样的素材算是好的素材呢?我个人觉得有2点:一是较好的摄影效果,虚实有别才能形成较好的空间感;二是要靠设计师自身去辨别寻找。我总是认为,没有丑陋的事物,只是我们没有发现独特的美。就拿下面两幅图来说,同样的元器件,差别在哪里?

    如何定义模板:

    模板不仅仅是字号、颜色,而是包括了信息传达方式、排版、字体、创意、素材等一系列要素,我们所要做的一是规范二是找到共性。下面将从文字、创意、素材3大类来进行分析与设想。

    1.信息传达的一劳永逸――文字与图像;首先文字在于图像的层次之上,文字的排版、字号、字体都应有所规范,我们可以定义出不同文字量的排版方式,例如主题4个字的排版方式、8个字的排版方式等,相应的辅助文字对应主题如果排列;文字的层次关系需要明确,字体的选择尽量统一在3种字体选择内,当然在具体的设计中可以有所改变,但是至少要给设计师以参考。图片作为背景可以贯穿整个Banner,主体图片位于右侧,所占Banner比例约为三分一,这样整个Banner不会显得太拥挤,文字的辨别也较为明晰。

    2.创意的一劳永逸――“氛围”是虚的东西,只要保持核心的意思不变就可以,所有的材质、素材都可以更换,例如下图其“核心”在于体现机械的冲击感,背景材质,主体产品甚至于那个洞都可以更换,但是无论怎么更换,其总体的感觉是相似的。这便是创意的模板,一个创意可以在不同的产品上使用多次,而这其实是找到不同产品中的共性而已。

     3.素材寻找的一劳永逸――我们可以自己去拍素材:有一些产品,即使看起来很丑陋的产品,我们都可以发现它身上独特的一点,刚硬的美、柔软的美、简单的美、复杂的美。只是我们没有发现而已。同一个产品不同的角度能体现不同的特点,就像模特一样。6个角度我们可以使用6次,为什么不可以?

    收集素材的重复使用率:有多少我们电脑里的素材我们是使用三次以上的?又或是我们总是在不停的寻寻觅觅中。

    其实关键在于不要总是听同一首歌:一首歌,再好听,天天听也要腻的,但是如果隔了一段时间,你再听却会有不同的感受。(我们可以准备3套创意,三个素材,如此组合就有9个不同的BANNER。)

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  3. 网易微博平面视觉项目执行 (累计阅读 10,034)
  4. sns视觉设计分享 (累计阅读 9,523)
  5. 图书馆的世界纪录 (累计阅读 9,507)
  6. 网站导航设计的6大分类 (累计阅读 9,298)
  7. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,199)
  8. 概念视觉设计 (累计阅读 5,826)
  9. 2011年手机产品设计趋势(1):精致实用的界面 (累计阅读 5,526)
  10. Fn和CTRL的故事 (累计阅读 5,076)