ssw6618

新闻资讯

时时了解最新动态

惊!淘宝UI设计师总结最详细的UI文字应用

2020-06-12  
接触过久UI的人来说,知道UI是最注重排版的,然后排版归根到底是对文字的排列和图片的布局。
今天给大家带来杨浦网站建设之淘宝UI设计师总结最详细的UI文字应用
 
当然图片的精致和配色是基础,最后还是要被文字撑起来,文字是整个APP的核心部分。不讲多了先带大家来“如何正确的设置文字做出正确的设计”?
 
 
一、文字知识讲解
文字无非分为两种,排版属性和文字属性
 
1、文字属性
 
大家知道不是所有的设计,字体都是有的,如果你运用的字体,在客户系统里没有,那么显示样式就会和设计稿上的不一样,所以各大平台都会有默认的字体,比如安卓默认中文字体是“思源黑体”
IOS默认中文字体是“平方”英文有两个系列的字体,一个是黑体 「SF Pro」 另一个是衬线体 「NewYork」。我们可以根据需要选用 SF Pro 或者 NewYork 作为主要用字,但作为系列字体,
而这两个字体的区别,在于当我们使用的字号小于 20 时,使用 SF Text,大于或等于 20 时,则使用 SF Display,这需要我们在设计英文界面时手动进行切换。以及,每个 SF Pro 字体下包含了接近 20 种字重,直接让设计师体会英文排版的复杂性。
 
 
2、字号
 
字号的设置需要根据实际场景决定,但首先要了解它在界面中的限制。在中文中,字号如果小于10pt,那么就会因为太小无法被正常识别,而英文和数字的最小字号约为 9pt。最大的字号通常为iOS 的大标题 34pt
 
3、字重
 
字重就是文字的粗细,有些排版,比如标题,字往往要粗一些,常见的字重通常分为三个等级,粗 (Blod)、常规 (Regular)、细 (Light),如果字重较为丰富的字体则会在每个等级中包含更丰富的字重。
 
4、字体颜色
 
这里就不多说了,UI设计中字体颜色还是只能用纯色,且不能用一些刺眼且复杂的颜色,页面给人舒适感最重要
 
 
二、文字排版知识讲解
 
1、文本区域
 
文字排版类型大致分为:水平适应,定宽模式,固定尺寸
 
如图是水平适应,水平适应就是最常见的内容可以无限向右延伸,只有按回车键才可以对文字换行。
 
如图是定宽模式,就是我们可以规定文字在某个宽度范围内显示,文字到达某个宽度会自动换行。
 
如图是固定尺寸模式,就是把文字的显示区域的长和宽都定死,只能在这个范围内显示,超过这个范围就不显示 
 
 
2、对齐方式
 
相信这个大家都很了解了,大致分为三种:左、中、右三种对齐方式。当我们使用了一个固定尺寸的文本区域以后,就可以设置文本内容的上、中、下对齐。
 
 
3、文本框设置
 
我们通常会使用定宽模式进行排版,也就是输入文字前像置入矩形元素一样拖动一个文本区域出来。
 
如图:

 
我们使用文本框以后,那么当文字与其它元素计算间距与对齐时,是以文本框的边缘为标准,而不是使用文字的图形边缘,实际上这么排列的文字即使没有文本区域的影响,也需要适当下移才能带给我们更好的视觉体验。
 
以上是零零碎碎的总结中对文字进行排版和设置,希望对大家在UI设计中有帮助。


声明:本站转载自网络,版权归原作者所有,文章所述观点并非翼好网络的观点,如有侵权请第一时间联系我们时间进行删除。翼好网络是一家正规的上海网站建设公司,欢迎前来咨询建站业务!