对于我们通常所看到的网站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),在组合的时候,不建议把无衬线类字体和有衬线类字体直接组合。

  从心理模型可以看出,常规的组合排列中,无衬线字体比衬线字体的常规组合性更好一些,但处理的不好反而会呆板。
  书法字体,因为书法字体经过历代书法家对字体的追求,使其结构更加牢固,多一点少一点都会影响其本身的字型美感,且气场较强,不适合太小的版式和过长的句子大量使用;学过书法的同学,或许深有体会,在中国书法里是十分讲究“精”“气”“神”,用语言无法表达情绪的时候,书法的字里行间却能透露出来的气场,也就是所谓字的性格。
  以上是书法类字体在特定主题情绪表达上的一些处理方式;文字并没有做特别的变形,而是切合主题的做了一些效果。
  还记得当初来现在所在的公司面试时,HR问:对于视觉设计师这个职位,你觉得设计师是什么?你能做什么?我答:设计师在这里,往往更多的是担任着翻译师的角色,把讯息更快速准确地诠释给所有受众。笔者是这样说的,在此后的设计生涯中也是这样勉励自己的,希望同行们也是如此。

本文来源:www.16xh.com

转载于:https://blog.51cto.com/4400083/774815

网站设计分析:banner中的字体结构相关推荐

  1. 下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍

    HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...

  2. 【链环科技】网站建设过程中如何选择字体

    很多企业在建设网站时,往往将重心放在图片设计.页面布局.栏目分类.内容排版上.忽略了最常见的也是所占篇幅最大,最能直接接触用户的一部分–字体选择.创建网站的过程中,合理的采用字体能为网站提升浏览体验, ...

  3. 网站首页banner的高度计算

    很快一周又过去了 这周收获到的,工作中的知识点总结 一, 网站首页banner的高度计算 网站首页在设计banner的高度的时候,需要保证一进入页面的时候,屏幕至少能显示一半出来,也就是说banner ...

  4. HTML列表的简单使用以及在我们网页编程中的单位你了解多少??CSS中的字体样式你又了解多少,进来康康!!HTML、CSS(三)

    文章目录 列表 无序列表 有序列表 列表嵌套 定义列表 单位 长度单位 像素 px 百分比 em 颜色单位 颜色名为单位 RGB值 字体样式 字体分类 衬线字体 非衬线字体(无衬线字体) 字体的其他样 ...

  5. 一个banner的设计——字体字形篇

    一个banner的设计--字体字形篇 作者:LipengBian 筒子们好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍 ...

  6. html中特殊字体图标,Awesome图标和css特殊字体的使用方法_html/css_WEB-ITnose

    作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome 下载后这些文件, 现在的版本是4.2,Font Aweso ...

  7. 五大影响网站在GOOGLE中的排名因素

    五大影响网站在GOOGLE中的排名因素,以下通过关键词.内外部链接.流量.体验.内容等方面详细列举了网站在google搜索引擎排名的影响因素 Google排名有利因素(一) 关键词: 1.url中的关 ...

  8. 【Interfacenavigation】XML中的字体(27)

    原 Android 8.0(API级别26)引入了一项新功能,即XML中的字体,它允许您将字体用作资源.您可以在font文件res/font/夹中添加文件以将字体捆绑为资源.这些字体在您的R文件中编译 ...

  9. 如何提升网站在搜索引擎中的排名?

    对于很多企业尝试投身于网络营销中时,需要将自家的企业品牌提升在搜索引擎中的排名,这样才能为企业提升曝光度,让更多的用户有机会发现品牌.点击品牌网站以及浏览站内内容.但是对于一个非专业从事网络销售的企业 ...

最新文章

  1. Jquery真的很棒
  2. # 可视化工具资源汇总
  3. sketch软件_Sketch又又又又卡了,设计师你的电脑总是卡怎么办?
  4. Servlet异常处理
  5. gephi java教程_Gephi的使用--以社交网络图为例
  6. docker web程序本地化_Docker-01-Docker介绍
  7. 使用Sqlserver事务发布实现数据同步
  8. java考前复习之Scanner 类
  9. RegisterHotKey在XP系统下的运行问题
  10. python计算器小程序源码_python练习-计算器小程序
  11. java6_64.tar配置,Ubuntu 下Java-JDK6的安装与环境配置
  12. Java常用开发工具有哪些?
  13. 阳阳智能开关固件2.0版本
  14. 百度程序员开发避坑指南(前端篇)
  15. JAVA测试人员考核_自动化测试的绩效考核
  16. .net NPOI读写Doc文件
  17. 能否用一种语言来培养编程思维以及养成世界观
  18. 前端白屏问题_首页白屏优化实践
  19. PHP通过HTTP_USER_AGENT判断是否为手机移动终端的函数
  20. URL编码和Base64编码

热门文章

  1. 基于智慧路灯杆的老旧小区改造方案
  2. Task02——支持向量机(Support Vector Machine,SVM)
  3. 如何最简单、通俗地理解Python的pandas库?
  4. python 股票行情_Python结合钉钉实时自动监控股票行情,上班炒股再也不怕老板发现...
  5. Matlab外部程序接口
  6. 《原则》读后感(一)
  7. Android 之 打开相机 打开相册
  8. 转《魏炜的举世无双大博客》
  9. 2021年第一季度中国电竞行业网络关注度分析报告
  10. 由浅入深,66条JavaScript面试知识点