网页banner设计理论:工作中对banner设计的理解

网页制作Webjx文章简介:Banner广告条中的字体设计.

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

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

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

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

 

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

文字在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曾经问过我一个问题:“对于视觉设计师这个职位里,你觉得设计师是什么?你能做什么?”
我说:“设计师在这里,往往更多的是担任着翻译师的角色,把讯息更快速准确的诠释给所有受众。”

时间: 2024-08-18 05:12:37

网页banner设计理论:工作中对banner设计的理解的相关文章

什么是交互设计?工作中的交互设计

文章描述:那些工作教会我的事情(1):关于交互设计. 自从被知道成为交互设计师的那一天起,邮箱或IM上,间歇性地,会收到很多师弟师妹的信息,让我说说这个职位,谈谈感想,说说见解,给他们指明一条平坦的道路.(可惜我一路走来颇为争扎.)这快2年的时间,搪塞了不少没法回答的问题,也忽悠了一些不靠谱的人.但总体而言,写这篇文章除了给师弟师妹们一个解答之外.也是给自己的一种总结:让自己的知识显性化,有所积淀,有所运用与传承. 什么是交互设计? 交互设计,又称互动设计,(英文Interaction Desi

用户研究设计:实际工作中总结用户访谈经验心得

文章描述:最近做了一些项目的用户访谈,总结出些许经验心得,这里先就一些访谈过程的关键点作为一个开头,后续再来补充其他技巧等方面,大家也可以共同补充,同时欢迎大家拍砖. 最近做了一些项目的用户访谈,总结出些许经验心得,这里先就一些访谈过程的关键点作为一个开头,后续再来补充其他技巧等方面,大家也可以共同补充,同时欢迎大家拍砖. 1.明确用研目的 研究目的是做用户研究首要需明确的问题.产品的需求是否可以通过用研来解决,如果可以解决,采用哪种方法,是定量还是定性,定性是座谈会还是用户访谈等等,这都要根据

交互设计理论:我们眼中的交互设计

交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义.设计人造系统的行为的设计领域.人造物,即人工制成物品,例如,软件.移动设备.人造环境.服务.可佩带装置以及系统的组织结构.交互设计在于定义人造物的行为方式(the "interaction",即人工制品在特定场景下的反应方式)相关的界面(Wikipedia).通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的. 从用户角度来说,交互设计是一种如何让产品易用,有效

用户体验设计教程:平面设计中的标题设计技巧

网页制作Webjx文章简介:视觉设计中的标题文字设计. 之前我把平面设计的视觉呈现分为:构图,调子,元素和内容四大部分组成,所以我分四部曲来讲,其中元素部分又分为标题,主体和大场景三部分,今天讲的就是标题部分.在讲标题设计之前,先说说这四部曲的基本前提: 序 目标我们做设计究竟是为了什么?公司请视觉设计师做美术包装广告究竟是为了什么? 赚钱! 宗旨我们公司是上市运营公司,公司存在是为了盈利为了赚钱,我们视觉设计师是包装,我们目的是把公司产品美术包装做好,让用户有视觉享受,更好的引导去花费,赚用户

设计理论:WordPress博客导航设计技巧

我的博客的导航的内容主要分为以下几种:博客分类导航(即放在页面顶部或者左侧/右侧的导航).标题.翻页/分页导航.其他导航(文章内链接.关键字.友情链接.文章内容导航等). 博客分类导航 1.导航的放置位置会影响到访客对博客内容的关注度和二次点击.在设计博客导航之初,只有页面的导航,而且习惯性地放在了头部(header.php).后来我发现,网页访客统计里有很多访客在点击顶部的页面(page),点击数大大超过了访问量最多的单篇文章的点击量,所以我在头部的导航里又加入了博客文章分类的导航,设计的时候

用户体验设计理论:互联网新产品的设计

写在前面:最近因一些原因思考新产品,或者说大公司里的新产品开发,有些不太成型但也又试图想得完整些的想法,暂列如下.整个产业和产品背景都被去掉了,有点干巴巴. >>>>产品的决策路径 -产品战略为什么要开发这个产品,即是否需要这个产品?公司的资源能不能支持这个产品的开发与运营?产品是什么? -产品决策何时决策开发?何时完成开发? -产品决定产品设计是不是对?产品设计是不是好? -资源运用如何利用内部资源?如何利用外部资源? -运营策略如何运营,包括团队.节奏.手段等等?如何获&quo

设计理论:用户界面UI的icon设计

一个icon 设计的好坏,除了好看与否以外,还有是功能性的考量- 是否容易.准确地让用户理解到其所想表达的意思.每一个UI 上的icon (符号)背后其实都是一个「隐喻」,运用真实世界所熟悉的概念来描述某功能. 其中一个影响icon 表达能力的因素是icon 的真实度(realism).在<现实主义在用户界面设计>一文中作者举出了如下例子: 可见 icon 的呈现并不是越真实越好.一个优秀的 icon 必须抽丝剥茧,把不必要的细节去除掉,同时又不能过于抽像.事实上,一个icon 的认知度跟细节

设计理论:用户体验流程设计

用户体验中的流程是十分重要的,因为好的产品要尽量减少用户在使用中的多余操作,以使得用户得到最好的体验效果,一下我们将讨论流程中最简单的一种"单线流程" 什么是单线流程我所理解的单线流程是指,当用户进入某个流程时,只能"前进" "后退" 或者"退出",而没有多余的干扰流程.当然纯粹的遵守单线流程在实际的产品设计中没有任何意义,我们在做得更多的是让产品流程更接近单线流程.接下来我会举一些实际的例子. A到B的流程(这里的"

用PS设计APP过程中改进IOS设计流程的30个密诀

设计是一个漫长和痛苦的过程,期间可以用点技巧来减少痛苦,30+ tips to improve your iOS design workflow (in Photoshop)一文总结30个实用的技巧可以借鉴和学习. ----–以下为译文------- 在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法.许多的技巧适用于一般的UI设计.注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键. 1.保持尺寸为偶数 你是首先