网站的旗帜（Banner）广告条字体设计简析

2010-08-05 14:54:51 作者：不详来源：网页设计手册

如何处理banner中文字的构成问题？

关键字：理解-分解-重构

1.理解

在进行文字的编排之前，首先要理解文字的内容。见过很多设计师只注重版式美现而不关注文字内容，文字一拿到手就开始编排，从不考虑文字在说什么，他们的原则是文字一定要服从于版式需要。这是不正确的设计方法，对于一条标题，如果我们不去理解标题所表述内容，就很容易本末倒置。这也是设计师需要和需求方重点沟通的问题，并从中获取需求方的关键字。

2.分解

根据主题关键字所传达情感，分析字体本身的性格属性，综合画面，对其分解；笔划粗细与结构、留白、重心之间的关系，这是活字设计中的一个综合问题，并非一朝一夕就能掌握的，它不但对字的个性要有深刻的理解，而且还要具有非常敏锐的观察力。尤其对于字体本身所设定出来的一个形象，或这种字体通常会在什么地方出现？见到这种字体会想到什么？这是视觉传达中需要长期积累的。

3.重构

字体的设计需要考虑到标题整体组合在画面的均衡性，在不破坏字体的基本识别前提下进行再设计，使文字图形化，字体类别中的衬线字体和无衬线字体（serif vs sans-serif），在组合的时候，不建议把无衬线类字体和有衬线类字体直接组合。

从心理模型可以看出，常规的组合排列中，无衬线字体比衬线字体的常规组合性更好一些，但处理的不好反而会呆板。书法字体，因为书法字体经过历代书法家对字体的追求，使其结构更加牢固，多一点少一点都会影响其本身的字型美感，且气场较强，不适合太小的版式和过长的句子大量使用；学过书法的同学，或许深有体会，在中国书法里是十分讲究“精”“气”“神”，用语言无法表达情绪的时候，书法的字里行间却能透露出来的气场，也就是所谓字的性格。

以上是书法类字体在特定主题情绪表达上的一些处理方式；文字并没有做特别的变形，而是切合主题的做了一些效果。

PS：记得来网易面试时，HR曾经问过我一个问题：“对于视觉设计师这个职位里，你觉得设计师是什么？你能做什么？”我说：“设计师在这里，往往更多的是担任着翻译师的角色，把讯息更快速准确的诠释给所有受众。”

相关热词：旗帜广告 Banner 字体设计

收藏至我的帐号

教程排行榜: 30个基于jQuery框架的幻灯滑块特效设计的网站实例; 30个基于jQuery滑动门技术的网站欣赏; 10个优美精致简约风格的导航菜单欣赏及点评; 38款网页设计应用的JS拉洋片幻灯效果欣赏; 最新收集的50多个专业设计公司网站欣赏; 40+设计独特超漂亮的水平导航网站欣赏; 全球65个设计出众的设计师个人博客欣赏; 35套精美绚丽的创意酷站设计欣赏; 国外颇具特色的电子商务网站设计欣赏(上); 国外颇具特色的电子商务网站设计欣赏(下); 21个精美漂亮的网页幻灯片应用案例欣赏; 20个设计精致漂亮的Photoshop网页设计教程; 网页UI之Banner广告条设计案例赏析; 2011年网站设计的新趋势; 手绘风格的15款超级漂亮网站欣赏; 24个很漂亮用CSS3实现的文本效果演示及教程推荐

下载排行榜: jQuery图片特效代码带缩略图和文字标题简...; 仿淘宝商城天猫首页jQuery多格焦点幻灯图特...; 仿QQ商城焦点图jquery幻灯特效代码; 宽屏flash+xml焦点幻灯图特效代码; 效果媲美flash的jQuery幻灯代码支持多种切换效果; 3D立体效果的flash+xml照片墙相册展示代码; 带标题和数字导航的JS焦点幻灯特效代码; 31款简单实用的CSS+JS下拉菜单脚本; 漂亮的jquery+Lightbox灯箱效果图片展示特效代码; 基于mootools有7种效果的Gallery(画廊)幻灯相册代码; 超酷HTML5图片特效代码支持全屏显示; 漂亮的jquery画廊相册特效支持缩略图和键盘...; 可自动展开和折叠收起的QQ在线客服代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 基于jQuery的首页自动收缩全屏广告代码; 超酷3D摩天轮flash+xml幻灯相册特效源码