陌北默

arrange fonts in the interface_00

前言

@朝阳、@乐橙 我们都知道在设计中,文字是一种重要的视觉语表达言,具有很强的功能性,通过合理的编排,能在一定程度上表现作品的主题。在UI设计的工作中,我们会遇到很多界面需要编排文字来表现界面主题,比如Banner、启动页、引导页、以及H5活动界面等。所以我们今天来探讨通过保持界面中的主体文字统一性,来打造出风格统一的界面效果。

 

法则1 统一文字方向控制版面整体倾向

统一文字排列方向能有效的控制界面的整体倾向,加强版面的整体特征,使其具有明确的视觉走向,为读者带来一种整齐划一的视觉感受。在文字编排中,所谓统一文字方向编排是指将版面的主体文字按照一个单一的方向进行排列,使其与界面中图形元素保持一致,赋予版面整体的视觉倾向。

arrange fonts in the interface_01

将文字按照不同的朝向进行编排,给读者带来的视觉感受也截然不同。例如,将界面中的主题文字按照一定的单一方向,使其以整体倾斜的方式进行排列,使版面呈现出一种动态的美感,产生具有较强视觉冲击力的画面效果。

arrange fonts in the interface_02

 

法则2 统一字体斜度使版面更具动感

将版面中的文字以统一的字体斜度进行排列,能使版面具有较强的动感和活力。字体斜度是指文字笔画偏左或偏右所产生的倾斜度。

具有统一倾斜度的文字字体,不仅能够有效地加强版面的整体性与美观性,而且在一定程度上还可以提高版面的注目度,加深读者对其的印象。

arrange fonts in the interface_03

 

法则3 统一字体笔画粗细增强版面平衡感

在进行界面设计时,设计师为了使作品呈现出均衡、统一的画面效果,通?;岽油骋晃淖值谋驶窒阜矫嫒胧?,将字体的笔画按照一定的比例和规格就行编排设计,以增强界面的平衡感,使其符合人们的阅读习惯。

如果界面中文字笔画出现过于杂乱的视觉效果,给读者阅读造成一定的阻碍,因而保持字体笔画的粗细统一,能在一定程度上提高页面的易读性。进行统一的字体笔画,能使版面具有规整感与视觉整合力。

arrange fonts in the interface_04

 

法则4 统一字体整体风格表现版面独创性

使作品具有独特个性化的风格特征是设计师们一直追寻的目标,而统一的字体风格能够形成完整的视觉体系,使版面具有独创性与视觉感染力,并将作品的设计主题直观地展现出来。

arrange fonts in the interface_05

抖音APP以抖动作为品牌的主题,以红蓝原色作为主题的视频属性,选用受到电波干扰的抖动效果字体对APP版面中的文字进行编排设计,让用户建立对品牌的联想效果,使抖音APP的品牌延展和用户感知度更强。

arrange fonts in the interface_06

有时,设计师为了使版面具有统一的效果,并且具有强烈的风格意识,通?;峤痔逡苑绺裢骋坏某橄蠡翁斜嗯?,这样的文字往往能给人以深刻的印象。

arrange fonts in the interface_07

在设计与儿童有关的产品时,可以通过将版面中的文字以活泼,可爱的风格进行风格统一的字体编排设计,使其达到预想的视觉效果,以其独特的识别性吸引这一受众群体的目光。

 

法则5 统一字体空间保持版面形态美

在对版面中的字体进行编排设计时,为了使版面具有较高的形态美感,可以通过把握文字字体间的间距,使其达到视觉空间上的统一。

arrange fonts in the interface_08

不同的文字字体,其文字所遗留的空间也不尽相同。为了解决这种视觉空间上的差异,可以通过设置不同的字间距,文字的排放位置等,使其形成空间统一,具有美感的视觉效果。

 

法则6 统一字体色调强调版面第一印象

色彩作为设计中主要的视觉构成元素,在很大程度上决定了版面给予读者的第一印象,而版面中文字字体色调的编排也是版面主要的色彩构成之一。将字体色调进行统一的编排设计,能加强读者对版面的记忆度。

arrange fonts in the interface_09

当文字的色调选用了与版面图形元素同类的色调时,能使版面具有和谐统一的视觉效果,给读者以较为柔和的视觉印象。

arrange fonts in the interface_10

在对版面中的文字进行色调统一的编排时,设计师常?;嵫∮糜氡尘吧鞣床罴蟮纳识宰痔迳鹘猩柚?,以强劲的视觉冲击力使作品更具吸引力。

 

误区

在一个界面中的主体文字基本上会同时存在这几种法则,每种也会相互影响,也要同时考虑这些法则以及其他规律,下面就列举几个常见的使用误区。

arrange fonts in the interface_11

 

总结

以上就是总结一些在UI设计的工作中,我们编排文字来表现界面主题需要遵循的几个文字统一法则??煞治父龇矫?,分别为方向统一、笔画统一、风格统一、斜度统一、空间统一和色调统一等,使文字与界面形成统一的视觉效果?;乖诘仁裁?,快来试一试吧!

arrange fonts in the interface_12

转载请注明:学UI网—UI设计师学习教程平台 » 界面中字体怎么排

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
「译」苹果官方 iPhone X 人机界面指南「译」苹果官方 iPhone X 人机界面指南
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
天猫双11品牌:官方首度曝光设计全过程天猫双11品牌:官方首度曝光设计全过程
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
?