字体的版式设计中,需要了解字体基本结构和字体的空间结构在实际工作运用的时候,你会发现字体上下部分是有一个留白空间的,其实际的高度要比可视的高度要高

 

设计师提供的设计稿与开发出来的文字高度有所不同比如,实际开发出来的会更高一些;iOS 设备与Android 设备也有所不同,比如可以看到同样是显示20号的字体,安卓的行高会偏高一些。在不同的 Android 设备上使用的字体不一样,可能还会出现更多的差别。如果不想办法抹平这差别,就不能真正意义上实现双端一致了。

 

所以设计师在视觉走查时要特别注意,我的习惯是同时用2不一样的手机,一个手机放效果图一个手机安装实际测试程序,2者进行对比,才能更好的看出区别来。

 

我们不难发现,左侧的文章行间距过小,而右侧的行间距看起来更明确和更舒适;大段文字排版时,建议使用左对齐的方式,可读性更高;

 

文字的编排时,如果行首与行尾有标点符号时,阅读起来很不友好,为了更加便于阅读我们需要进行避头尾的处理,甚至为了整齐我们需要对文字区块进行强制对齐;实际运用中可以发现不论是今日头条的新闻详情页还是网易新闻的新闻详情页都是比较整齐的文字排列形式

 

在版式设计中,不论是平面海报还是UI界面设计,我们都需要有一个版心的概念把所有需要展现的内容,都放置在此容器中,让内容更加有条理,具有更好的“透气性”;实际工作中这样的好处是多页面改版会节省很多的工作量,且效果更加统一美观

 

网格系统是提升页面条理性的有效设计方法,通过网格的设定,让排版更加有参考的标准,去设计时有迹可循;在不同设计师配合过程中,也能够避免不同设计师设定的间距不同等造成的效果不一致(关于实际工作中网格的实际运用运用,如果同学们想了解的可以评论区留言,我可以单独拿出一篇文章来讲解)

 

UI版式设计

 

调整画面中的文字或者线条粗细度以及内容明度来增加页面的张弛度,或者叫重量比画面中文字越粗重量感越重,反之越轻线条选择时越粗则越重,越能表现其重要性的分隔色块或者图片越深越鲜艳的则较重,反之越浅越淡的越轻

 

界面设计中,需要突出层次的同时,也需要注意辅助文字或者解释文字的排版,亦或者是元素的“打破常规”;合理的排列这些信息起到展示其功能入口的目的,同时也能够起到点缀和增加画面细节的作用,让画面更加的精致!不论是线条、还是留白还是细小的icon、文字等都可以很好的起到破解画面单调的作用

 

重复性的元素可以是图案、文字、色彩、空间格式等,重复能增强条理性和界面的统一感,节奏和韵律也需要重复来实现。实际工作中经常能够看到很多类似的版式设计

 

亲密性的关系可以让画面形成独立的内容区域或者呈现空间,让产品能够很好的呈现相对独立的信息,减少用户的识别难度,提高效率;不论是常用的线条或者“水槽”分割的形式;还是Google引领的“去线式”设计,亦或者是卡片式设计的绝对亲密特制的形式都可以给人创造出亲密贴近的版式设计感受

 

当你在设计大段文字界面的时候,比如笔记的编辑页面,或者新闻类的详情页时,就需要了解行高应该在一个什么大小,一般常用的间距应该在1.2-2.0大小的文字高度倍数,移动端每行中文字建议20-25个字;在左图可以看到文字的行高/行间距过窄给人一种很压抑不易阅读的感受,而右侧的间距相对更加舒适

 

设计排版的核心要点是要帮助用户,影响用户的使用,提高产品的体验友好度

可以帮助到用户更好的获得喜爱的产品、能够快速的记录心得和感悟、能够减少浏览上的干扰因素、提高识别的效率;设计服务生活、设计可以改善体验、提升体验。

 

青岛青设网络科技有限公司是国内领先设计团队和营销策划服务商,专注于5G技术下平面设计,UI设计,BS系统设计,网站开发,SEO,自媒体,百度百科知道、知乎等百家号,排行榜,删除负面,媒体发文等营销宣传。帮助企业解决5G时代三维动态化站点的设计改造,为客户提供网站一站式解决方案。

 

**本文内容来源网络,经AI自动调整,信息仅供参考**


暂无评论



发表评论

电子邮件地址不会被公开。 必填项已用*标注