`

BANNER中的字体结构分析

阅读更多

  

本来想写“Advertisemen中的字体结构分析”,后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工作中对banner设计上的一点浅见,仅起抛砖引玉的作用。

Banner的传达方式 [TOPIC]
针对网站中的banner

Banner的本身形状:形状决定了其固定的构成方式,一般为矩形,横幅,左右结构和居中;
Banner的文字特点:主题式,一般分为主标题和副标题,文字较多;设计的时候还需要考虑应用到网站各种尺寸推广图的可读延伸性。
Banner的图像特点:辅助主题,增加文字的渲染力。
Banner的传达行为方式:载体为电脑屏幕,IE浏览器的第一屏位置,用户眼睛焦点停留时间约3秒以上。

 

[由于banner一般用于专题类网站,在门户网站的二级页面,用户进来之前,在首页已经对主题有一定的了解和认识,所以banner的作用是在二级页面中起到包装页面的同时增加内容的趣味度和内容方向引导;所以这也是和传统广告中普遍要求第一感官视觉冲击力来强J眼球所不同的地方。] 

 

文字在banner中的重要性

对于文字,我们常常听到需求方提出:“字要大!”
“啊?还要大?已经很大了!“  然后很无奈的拉大一点,其实我们都知道大那么几个像素没有意义;
但细心想想,需求方要的真的只是那么一丁点的追求么?毕竟他们不是设计师,不懂得如何表达自己的想法,而唯一可以让们觉得显眼的方式只有大小的区别而已,或许是因为,字不够显眼,字的处理太普通,背景太抢眼之类的,或许,我们应该理解为:“字要显眼一点“,而”显眼“的方式却有很多种。

 Banner=文字+图像[辅助]

Banner上的文字一般都占据了整个banner的70%的区域,而实际图像只占不到30%,往往很多的设计师更专注于那30%的图像设计,忽视了最重要的70%文字区域,最后只用系统字草草拼凑了之,试问这样的一个banner的设计合理么?

尤其当主题被延伸应用到小尺寸推广图的时候,只剩下放文字的区域时,这个推广图算是彻底完蛋了。

  

中文字和英文字母的属性区别

中文字与英文字母的区别,字母是一种纯粹发音符号,每个字母本身并没有意义,单词的意义来自于这些字母之间的横向串式组合,而汉字的组字方式是以象形为原始基础,也就是每个字都具有特别的意义,一个简单的字在远古时代就代表了一个复杂的生活场景,因而它也是世界上最形象的文字。两者之间的阅读方式和解读方式都有本质的不同,因此,汉字的编排不能照搬英文的编排方式,它们两者之间在编排上有一些客观的区别。

中英文字体的结构分析

a. 同样字号的实际大小不同,英文因为都是字母,字母的构成结构非常简单,屏幕最小可视像素为6px[代表字体:04字体],中文则结构复杂。屏幕最小可视像素为10px[MS明朝/MS UI Gothic]和11px[新细明体/ PMingLiU] 

b. 英文的整体编排容易成段、成篇,视觉效果比较自由活泼,有更强的不连续的线条感,容易产生节奏和韵律感。
中文整体编排容易成句、成行,视觉效果更接近一个个规则的几何点和条块,不容易产生动感的最主要的原因是因为整个结构是闭合的,笔划张力的总和趋于零。

 

c. 英文的篇幅普遍比相同意义的汉字的篇幅要多,在设计时,英文本身更容易成为一个设计主体,而且因为英文单词的字母数量不一样,在编排时,对齐左边那么右边都会产生自然的不规则的错落,这在中文编排时不太可能出现的,中文编排每个段是一个完整的”块”,很难产生这种错落感。

 

d. 英文的结构有大小不同的形状,在字形设计上不可能排列在同一条直线上,如gjpqy等字母齐下方的沉降线,而bdfhkl字母上齐顶线,其它字母才齐上中线和下脚线。然而,英文编排时自然产生的错落其实并不是西方设计师所期望的,他们在细排文字对齐上花大量的时间来调整字距、词距、行距、段前距、段后距等,使得段落更趋向于几何形态。

 

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

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

 理解.

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

 分解.

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

 重构

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

 

从心理模型可以看出,常规的组合排列中,无衬线字体比衬线字体的常规组合性更好一些,但处理的不好反而会呆板。

书法字体,因为书法字体经过历代书法家对字体的追求,使其结构更加牢固,多一点少一点都会影响其本身的字型美感,且气场较强,不适合太小的版式和过长的句子大量使用;学过书法的同学,或许深有体会,在中国书法里是十分讲究“精”“气”“神”,用语言无法表达情绪的时候,书法的字里行间却能透露出来的气场,也就是所谓字的性格。

 

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

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

分享到:
评论

相关推荐

    简单实现的banner

    HTML用于构建基本结构,如`<div>`元素可以作为Banner容器,而CSS则负责样式和布局,如设置宽度、高度、背景色、文字样式等。 2. **响应式设计**:现代网站通常需要适应各种设备屏幕尺寸,因此Banner的设计也需要...

    仿腾讯banner特效

    在提供的压缩包文件"腾讯banner"中,可能包含了完成这些功能的HTML、CSS和JS文件,通过学习和分析这些代码,可以深入理解此类特效的实现方式。 最后,为了保证代码的可维护性和复用性,我们可以遵循模块化原则,将 ...

    168个网页Banner

    设计师可以通过分析这些Banner的色彩搭配、字体选择、图片处理、布局结构等方面,学习和借鉴优秀的设计理念和技巧,提升自己的设计水平。 在实际应用中,网页Banner的设计要考虑以下几个关键点: 1. **目标明确**...

    Banner精选30个,都是经典

    8. **图标应用**:图标是简洁传达信息的有效工具,常用于Banner设计中,以减少文字并增强视觉效果。 9. **素材选择**:高质量的图片、插图或矢量图形是提升Banner专业感的关键,确保素材与主题和品牌相符。 10. **...

    168个网页Banner.rar

    通过分析这些Banner的源代码,可以深入理解CSS的灵活性,HTML的结构化原则,以及何时适当地引入Java或JavaScript来增加互动性。这对于初学者来说是一份宝贵的教育资源,对于经验丰富的设计师则是一个激发创意和灵感...

    网页设计中的banner设计思路

    本文将探讨网页设计中的Banner设计思路,并结合广州白云工商高级技工学校计算机系提供的部分内容,深入分析文字设计在Banner中的应用。 #### 二、文字设计的重要性 文字是视觉传达设计中不可或缺的基础元素之一。...

    手机端banner轮播效果

    在移动设备上,Banner轮播效果是网页设计中常见的元素,用于展示多个广告或重要信息。这个效果使得有限的屏幕空间能高效地呈现多张图片或内容,吸引用户的注意力并提供交互体验。以下是对手机端Banner轮播效果的详细...

    50个banner psd 模板

    3. **分层结构**:每个PSD模板都包含分层结构,设计师可以轻松地修改文字、图像、形状和色彩等元素,调整每个部分的透明度、混合模式或滤镜效果,以实现个性化设计。 4. **无版权问题**:尽管这些模板无需版权,但...

    JS图片banner自动切换效果代码

    文件结构分析** 压缩包中的`6.jpg`可能是示例中的第一张图片,而`images`目录可能包含其他轮播图片。`js`目录可能包含实现自动切换效果的JavaScript文件,如`slider.js`,它将与`index.html`配合工作,实现整个轮播...

    JS企业宣传BANNER效果.zip

    JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的...通过学习和分析这些文件,开发者可以提升自己的JavaScript技能,理解如何在实际项目中应用这些技术,创造出更富有吸引力和互动性的网页内容。

    广告轮播的banner

    4. **HTML与CSS**:在网页中,Banner的实现通常涉及HTML结构和CSS样式。HTML用于构建Banner的基本框架,包括图片、文字和其他元素;CSS则用于控制视觉样式,如颜色、布局、动画效果等。 5. **JavaScript与jQuery**...

    CSS3全屏banner幻灯片自动轮播动画切换代码.zip

    幻灯片自动轮播则是一种动态效果,它会定时切换不同的内容,如图片、文字或其他多媒体元素,以创建视觉上的吸引力。动画切换是通过CSS3的过渡、变换等特性来实现的,可以提供平滑、流畅的过渡效果。 【描述分析】 ...

    banner图 只需改成你自己的图片路径就可以使用

    - 背景颜色、文字颜色、字体粗细、光标样式等细节处理,以区分不同状态下的列表项。 #### 三、扩展功能与优化建议 **扩展功能:** 1. **响应式设计**:根据屏幕尺寸调整图片大小和布局。 2. **过渡动画**:除了...

    banner图片切换焦点图.zip

    1. **CSS (Cascading Style Sheets)**:CSS是网页样式表语言,用于定义网页中元素的布局、颜色、字体等视觉表现。在这个焦点图中,CSS主要负责设置Banner的大小、位置、背景色、过渡效果、图片的显示方式(如轮播图...

    夏季时尚女装淘宝banner设计

    在淘宝banner中,字体可以用来强调促销信息或品牌口号,设计师会根据整体风格选择合适的字体样式和大小。 4. **布局结构**:好的布局能引导观众的视线流动,设计师需考虑主次分明,将重要信息(如促销折扣、新品...

    bnner全屏滚动代码diy.rar_全屏滚动banner

    标题中的“bnner全屏滚动代码diy.rar_全屏滚动banner”暗示了这是一个关于创建全屏滚动横幅(通常称为banner)的项目,其中包含了JavaScript和CSS代码资源。描述中的“js 代码 全 屏 滚 动banner”进一步确认了这个...

    六间房首页banner可关闭广告.rar

    总的来说,"六间房首页banner可关闭广告.rar"这个压缩包中的内容涉及了前端开发中的JavaScript交互设计、网页布局、用户交互体验等多个知识点。通过解压并分析其中的文件,我们可以深入学习到如何利用JavaScript实现...

    Android ViewPager实现Banner循环播放

    LinearLayout包含一个TextView(用于显示Banner文字描述)和一个用于放置小圆点的LinearLayout。 2. **小圆点样式**:为小圆点创建两个XML文件,分别定义选中和未选中的状态,如point_bg_enable.xml和point_bg_...

    美容美发轮播图美团大众抖音店铺装修首页banner海报PSD素材模板

    2. 分析模板中的图层结构,理解每个图层的作用和关系。 3. 自定义文字内容,如店名、优惠信息等,调整字体和颜色以匹配品牌风格。 4. 替换或调整图片,使用自己的产品图片或模特照片,确保图片质量和分辨率满足要求...

Global site tag (gtag.js) - Google Analytics