设计师进阶:如何用文字性格激发网页的活力

分享到:更多 ()

设计师们在设计网页时,通常会为表达某种情感而选择字体。可以说,除了需要表达文字内容本身之外,设计师在选择一款字体时还应该考虑这款字体是否能与其他设计元素及布局相融合,同时加深网页上的人或事物的特点。

随着更多企业越来越“接地气”,他们开始注重与用户的互动与交流,增强用户的参与感,因此对话式的网站快速受到用户欢迎。这一趋势无形中要求设计师们需要加强对文字性格的把握,以更好的设计实现与用户的“对话”。

正如大家常听到一句话“字如其人”,在看到一种字体后,人们会下意识联想到某种人物形象、性格或感受,比如沉稳、柔美、活泼、可爱、平和等。

因此在设计之前,设计师需要不断问自己:我想让用户觉得,这是一个什么性格的人在和他们对话?我现在采用的这种字体所表现的性格,是我想要表达的特点吗?

通过思考和对比,才能应用恰当的文字性格,把握好网页的设计。

AnyForWeb将通过本文给大家展示收集的不同字体应用案例,希望能帮助设计师们在中文字体设计上加深理解。

我们需要先说明一点,同一类型的字体可以设计成不同的变体美术字,字体的粗细、曲直、疏密不同,在不同风格设计下可能展现不同性格特征。

1.客观、正式、官方的、通用的

基本上看到这几个描述词,大家肯定知道描述的是什么字体了。没错,说的正是宋体。

宋体是与印刷术同龄的出版字体,这种最普通的字体在报刊杂志中常用。在网页设计中,宋体也可以在很多地方使用,非常适合用于大段文字的版块。

2.清秀、方正俊雅、真实可靠

有物电商平台的banner图中采用了楷体和微软雅黑两种字体,大字使用的楷体是汉字主要书体,看起来工整规范、干净利落,给人方正俊雅的感觉,这段文字与图片表达的“手工感”相融合,共同传达出一种认真和质朴的精神。

这里有个细节需要大家注意喽!在这个案例中,楷体文字是嵌入在图片中的,而微软雅黑则是用font-family写在页面的,为什么处理方式不一样?在上一篇文章中AnyForWeb有提到过,详情请参考《常规or创意?别让网页中的文字设计禁锢了你》

从文字的整体结构来看,楷体带有一种书卷味,可以考虑在教育行业的网站上适当采用。

3.强壮、坚韧、压迫、震撼、充满力量感

给人这种感受的字体一般笔画浑厚、浓重,很多情况下采用粗体或加粗的大号文字,在视觉上面积加重,给人一种强壮、震撼的感觉。

比如下面阿迪达斯采用的这款蒙纳简粗雅丽体,在网页上占据的位置非常显眼。

下面案例中节目的Logo位于官网首页,采用了一款纯直线字体,显得硬朗、笔直、棱角分明,给人一种坚决的态度。

还有李宁官网图片中使用的字体,笔画粗细均衡,规律一致,充满了坚韧。

NBA官网和国际飞镖公开赛网站则是采用了微软雅黑字体,加粗的大号的字体略带倾斜,内容标题也同样采用了加粗的微软雅黑。微软雅黑加粗后的视觉效果虽然不像上面几个案例的字体那么强势,但我们依然能在视觉上获得类似“隆重、这是比赛”的感受。

这类字体一般呈现出硬朗、粗犷、棱角分明等特征,适合应用于与运动、比赛、竞技、金属、游戏,以及面向男性用户群体的产品等。一些促销活动也会经常使用这类字体。

4.细致优雅、纤细、柔美、婉转、流畅、精致

给人这种感受的字体一般笔画纤细,婉转流畅,具有曲线美,很多情况下会采用末梢曲线优美的衬线字体。

上文提到让人感觉正式的宋体就是一款衬线字体,在适当的元素搭配中,宋体也能展现出典雅的一面,给人优雅的感觉。比如下面Tiffany的官方网站。

还有拉菲官网也是。

这类字体一般呈现出纤细柔软的特征,适合应用于珠宝、化妆品、珠宝首饰,以及面向女性用户群体的产品等。另外像红酒、餐厅、手工艺品牌、精选类品牌、奢侈品等也会使用这类字体。

有一点不得不说,其实很多品牌在中国区的官网上使用了特殊的自定义字体,但由于浏览器无法识别,浏览器最终以默认的宋体进行渲染,这时的视觉效果可能就不那么美好了。

这个问题怎么解决,我们之后将分享解决方法,我们同样也在《常规or创意?别让网页中的文字设计禁锢了你》中提到过。

5.活泼、可爱、有趣

给人这种感受的字体一般字体末梢圆润,看起来圆乎乎的,显得稚趣、可爱。

比如喜宝HiPP官网采用的圆体。

还有帮宝适采用的幼圆字体。

给人这种感受的字体主要适用于趣味游戏、婴幼儿产品、游乐场、玩具等。另外,像柔软舒适的产品也会选用这类字体,比如某些家居用品等。

6.平和、干净、简单、平静

这类字体一般采用无衬线字体,链接衬线和字干的字弧被去除,字体看起来干脆利落,比如苹果官网的PingHei字体。

魅族官网的方正悠黑字体。

这类字体主要适用于科技行业,包括平台、电脑手机产品等,同样也适用于现代感的产品、简洁风格的产品等。

7.古典、中国风

柒牌采用的行书字体行云流水,形态优美,带着浓浓的中国特色,更好地表达了其品牌所传达的理念。

AnyForWeb为九扇屏设计的网站首页采用了瘦金体,这款字体风格独特,充分展现中国传统文化特色,体现其品牌特征。

此外,很多字体还能给人其他感受,比如费列罗官网的这款字体让人有一种愉悦、温暖的感觉。

加粗的微软雅黑字体在以下案例中让人感到专业、可靠。

黑体看起来刚健、踏实,在建筑行业、机械行业、房地产行业网站上展现出一种专业感。

看到这么多案例后,相信大家已经对字体性格有了基本了解,本篇关于文字性格的介绍就先到这里。了解这些基本的知识后,大家可以进一步学习,根据对不同字体结构、笔画弧度等元素进行判断,在不同场景下合理应用字体,最终能通过文字性格的展现让自己网页设计更有活力。

本文版权归AnyForWeb所有,转载请注明出处。

AnyForWeb UED定期发布Web相关趋势评论文章,涉及视觉、界面、交互等领域,敬请期待!

AnyForWeb和AnyForWebUED的官方微博微信现已正式开通,欢迎大家关注!

新浪微博:@AnyForWeb@AnyForWeb UED

来源:any for web

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 设计师进阶:如何用文字性格激发网页的活力

0
分享到:更多 ()