页面规划中,怎么让字体和图像调配得愈加美观?



有人说,中文页面的规划本来没有字体规划这一环节,因为在页面中能用到的中文字体十分有限,能用的也只要黑体、宋体、微软雅黑等,这给中文页面的美感带来了折损。比较英文对字体的酌量,页面上的中文字体显得太随意。
当然,这种说法有必定的正确性,但咱们应当换个视点看。中文的页面中的字体的确是限制在这几款字体中,但不代表中文页面就没有字体规划这一环节。
知道页面规划中的“字”
首要,咱们简略将页面里的文字分为可替换和不行替换两个有些。
可替换的文字也便是能通过后台办理进行修正的文字,例如博客文章、商品阐明等。不行替换的文字是在页面制造进程中所定下的,后台办理并不供给文字的修正条件,通过页面代码才干修正,例如导航、Banner等。不行替换的文字并非彻底不能修正,仅仅修正一次会消耗必定的本钱,因而修正的间隔时长,比方导航的修正需求通过代码,而Banner里的文字的修正也需求从头规划Banner 图像。
可替换的文字只能运用页面所答应给定的字体,因而中文字体的挑选面较窄。但不行替换的文字则能够通过图像等方法展现,将其制造成通明布景的图像,这时,字体的运用和排版都是灵敏的,规划师就会有满足的发明自由度。
下面这个规划中所运用的字体就通过了必定的规划,字体替换并不十分简单。



这儿所谓的与图像的调配,也是指的这类能够通过规划的文字。
字形的调查
字体首要是一种图形,然后再是可承载信息的文字,因而,当你挑选一款字体来调配图像的时分,你需求会集去调查文字的形状特征是不是和图像和谐。
在挑选字体之前,首要调查图像里的形状特征。假如配图是以插画的方法呈现,那么插画里的个性细节,以及此类个性所表达出的时代感和空间空气,都供给给你挑选与其所调配字体的依据。比方英文中的无衬线体通常较为现代,而衬线体较为古典。
下面的页面中的配图通过曲线外型,因而,与此调配的文字选用了Adelle无衬线体,能够看出字体中的圆弧处理和配图中曲线的流通外型相照应。



如下规划里的配图都是零星的矩形,因而与此相应选用的字体为graphik,这个字体的特色也是表现出十分明晰的几许边际。



以上的字形所带来的形状特征与配图相照应便是一个能让图文完成完美调配的方法之一,此外,咱们知道一些格外的个性化字体也能表达出格外的空气。
例如下图中的机器看上去十分有80时代的机械感,而这种外型也营建一种技能国际里的复古感,因而像素文字更合适与此相调配。



从这几款英文字体的实例图文配中,咱们需求配以对“形”的调查解构才干。也一起需求对字体所承载的个性特征作出必定的归类。非但英文需求精挑细选,中文也需求仔细的酌量,而不能以等待偶遇一款美观的字体,以美观为意图进行规划,终究成果都是失利之作。
字体还能够通过必定的规划,在原有的字体基础上进行必定的“变形”,这当然就更不能频频替换。依据主题而进行必定的“微调”,让空气表达得愈加饱满立体。
如将圆圆的字母中空的有些填实添加了心爱感,与配图的人物形象也十分调配。



字距和行距
调查字形,用你敏锐的规划师的眼光来差异不相同字体的特征,这是挑选比较大的字体时需求具有的才干。因而,十分合适用在首图、Banner等需求将文字做成图像所展现的情况下。而咱们的字体还有构成阶段进行展现的时分。这时,形的特征逐步隐去,咱们更多重视字与字之间的联系,即字距。
通常情况下,字距的挑选老是依据字体自身以及其和空间的联系来决议,当字距较小时,传递出一种紧凑感,而字距宽松又能表达出一种轻松感。
比方大型展现字体的间隔老是以彼此接近为佳,因为字体自身现已占有了满足的空间,假如再在字体间添加空间就会让全部空间被填满。因而,咱们也能够说,字距依据全部空间进行调整断定。与此一起,配图也是以较为会集感的方法展现,全部箭头真是“万夫所指”,因而字距减小,略有会集感。



而相对较小的字体,略带轻松和闲适,与此调配的图像也是成堆木材,联想到木匠的天然惬意感。
在中文的国际里相同适用,但是不相同的是,中文字体的间隔应当愈加远一点,以坚持单个字体的共同展现度。因为中文的每个单字都能够当作一幅图像,具有必定的意境,因而,坚持字距是中文展现能坚持美感的一个要害。



当字体变为笔直展现时,更应当拉宽上下字距。这是因为咱们人眼并不了解上下次序的阅览习气,假如字距较近则简单构成字与字的视觉粘连。
而行距则不相同,当你调查行距时,这时字体现已变成了阶段,成片呈现的字体则是阶段,你要重视的就应当是全部阶段的灰度值。所谓灰度值便是字体的疏密。
较大的行距和较大的字距相同都能传递出紧凑和轻松的不相同之感,一起,行距也相关着字体自身的颜色、字距以及字体大小以及字体终究的形状。英文的行距能够以1.5倍作为规范标准,但是全部规矩都是依托条件而存在,假如在格外的场合,仍然能够选用更大或更小的行距展现。
这一阶段的字体等组织合作了配图中所传递出的孩童的教学生长这一主题,选用较为圆润的字体,字距较宽松,体现出轻松的空气。字体自身选用和LOGO相同的颜色,比黑色字体更透露出兴趣。



跋文:
厘清字体的字距所发明的疏密,行距带来阶段的灰度几许,合作字体自身的展现形状,你才干非常好的挑选与此相等的配图。多了解字体,对不相同个性的字体的形状有大致的了解,在运用时才不会手忙脚乱去盲目找寻合适的字体,平常对字形的堆集极为重要。记住为自个树立一个字库,才会在图文调配时称心如意。



上一页:网站制造个性应以公司实践状况为根据下一页:还在犯错 网站规划中多见交互规划过错
关注微信
  • 微信
联系电话
  • 13770851495 联系电话
回到顶部