杭州ui培训
达内杭州ui培训中心

0571-56020830

热门课程

平面设计的排版中文字元素

  • 时间:2018-05-24 16:30
  • 发布:杭州UI培训
  • 来源:疑难解答

1. 字体

字体是排版中最重要的元素,也是最直接的信息传达方式。一般来说设计师通常需要了解的字体有中文和西文字体两种:西文字体由来已久,由最早的罗马字体到我们现在苹果手机里的SFUI字体,西文字体经历了许多的设计上的变革。西文字体可以分为:罗马字体或衬线体(roman,serif)、无衬线体(sanserif)、手写体(s cript)、雕刻字系(glayphic)、典籍体字系(Classical)、装饰体字系(decorative)、展示体字系(Display)、当代字体字系(Contemporary)、符号字系(Symbol)等。中文字体由于起先版权不够重视其实并没有西文字体发展得顺利,数量上也远远落后于西文字体甚至是日文字体。好在中国设计正在崛起,在一大批设计师前赴后继的努力中,中文字体的数量正在呈指数级别增加。中文字体分为三种:第一种是黑体(笔画上没有装饰的字体)。黑体也有不同的具体字体如苹方、微软雅黑、思源等;第二种是由书法作品演变来的字体如从宋代活字印刷而来的宋体(对了,日本因为误解原因将宋体叫做明朝体)、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体以及钢笔书写的字体;第三种是美术字体,比如综艺体、美黑体、水柱体、娃娃体等。

2. 族类(generic family)

这里我引用了前端工程师在CSS样式表(一种用来表述网页样式的代码)中的族类概念。常见的族类有五种:衬线体(serif)、非衬线体(sans-serif)、手写体(cursive)、梦幻字体族(fantasy)、等宽字体族(monospace)。衬线体的特点就是笔画结尾处有装饰的处理,比如我们熟悉的Times New Roman、Georgia、宋体等。非衬线字体粗细比较均匀,比较现代并且在缩小的情况下依旧保持了可读性。非衬线字体如Arial、Helvatica、幼圆、楷体等。手写字体族就是由手写而产生的字体,比如迷你简黄草、Caflisch s cript等。梦幻字体族听上去稍显非主流,但是也是字体中不可忽视的一支力量。常见的梦幻字体族有WingDings、WingDings 2等。等宽字体族将西文的二十六个字母全部变成等宽,这样做的好处就是排版大大地轻松了。常见的等宽字族有Courier、Prestige等。总体来说字体的族类是衬线体和非衬线体两个大类,大家可以简洁地记忆:衬线就是笔画处有装饰的字体族,非衬线就是笔画较为相同粗细的字体族。

3. 字族(font family)

一个族类下面是不同的字体,然而一个字体又可能有好几个字族。字体文件中通常会包含几个字族,如果你安装了Helvetica,在Photoshop中你会发现字体选择器下包含了三十多个前缀是Helvetica的字族。原因很简单,字体设计师除了设计从A到Z的大小写字体、从0到9的数字、标点符号后,还为我们设计了同样字体的不同族类来协助我们在不同地使用场景下表达合适的意思。字族一般有:正常(Regular)、窄体(Narrow)、斜体(Italic)、粗体(Bold)、粗体斜体(Bold Ltalic)、黑体(Black)等等。虽然字体的字族有多有少,但是一般都具有正常、斜体、粗体、粗体斜体四种基本字族。应用场景上:粗体通常表示强调、斜体表示引用、正常是正文。很多时候我会发现很多设计师乱用斜体,其实斜体的设计并不是为了好看,而是在书中代表本段文字来自引用另一个著作的含义。

4. 字重(Font Weight)

一个字族中的任何一个字体也会有不同的笔画粗细变化。这种粗细变化的字体称之为字重(Font Weight),字族后面的字重选项如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一个字族下的不同粗细变化。实际上,国际标准 ISO组织规定了九种字重,但是由于有些字重不常见,我们就记忆以上七种字重即可。中文字体也有相应的字重,如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中,如果我们需要强调一个内容,比如标题时,一般会用粗体;如果在正文的设计中,那么就会用常规或标准等字体。英文也类似,这些字重是为了我们突出文字使用的。注意一点:在PS中我们也可以通过字体面板给文字人工加粗,这种加粗如果变成形状时会提示「该字体使用了加粗样式,不能变换」,所以可见这种人工加粗是有一点缺陷的。

5. 字体的气质

任何字体都具有自身的气质。比如一款圆角萌萌的字体会给人温柔调皮的感觉;而边角锋利的字体会给人一种强硬的感觉;书法字体会让用户觉得充满中国风和个性;瘦长纤细的字体会给人一种未来感等等。每个字体都具有一定的感受,这与色彩心理学中每种颜色带给人不同的感觉一样,字体的外形和笔画也会给人一些心理暗示。

6. 全角与半角

全角指一个字符占用两个标准字符位置。中文字符、全角的英文字符、国标GB2312-80中的图形符号、特殊字符都是全角字符。半角指字符占用一个标准的字符位置。

通常的英文字母、数字键、符号键都是半角字符。半角全角主要是针对标点符号来说的,因为正常情况我们没有打全角英文的需求。

半角英文 english

全角英文 english

半角符号 ,.’」;:{}_+!@#$%^&*()

全角符号,'";:{}_+!@#$%^&*()

计算机编程基于英文,也就是半角字符。所以在编程中符号一定都是半角的,如:

name=”郗鉴”

全角符号编程就会无效,如:

name=「郗鉴」

在我们设计作品时也一定要记得中文搭配全角符号,英文搭配半角符号。不要出现如「好的.」或者「thanks。」这样的错误。全角半角的切换在中文输入法下按SHIFT+空格可相互转换,这个知识点虽然非常基础,但是无疑我们经常看到用错的设计。

7. 文字排版八条定律

第一,保证文字是可读的。

第二,不要在一个版面中使用三种以上的字体。

第三,如果英文标题或单独进行排版时,尽量全部使用大写而非首字母大写。中文标题或单独进行排版时结尾不需要句号。

第四,文字之间的间距在UI设计中一般设置为0,行距一般为字号本身的1.5倍到2倍。但是考虑到用户使用场景,比如用户在地铁内阅读新闻时可能地铁会出现晃的情况而导致串行,就需要我们考虑增加行距。总之字间距和行距以及文字大小都要依据实际场景来决定。在UI设计中文字大小单位须设置成PX(像素),大小必须是偶数。如:24px、26px、28px等。

第五,文字阅读需要清晰地背景区分,比如黑纸白字和白纸黑字原则。

第六,除非不得已尽量避免在一个版式中使用中英文混排。

第七,文本左边对齐同时右边也需要对齐。可以通过PS中的段落面板设置间距组合和避头尾法则,但是有时半角符号可能会让我们很棘手,那就要通过调整间距和空格等方式让文本尽量对齐。

上一篇:从零基础到设计大师
下一篇:平面设计构成详解
选择城市和中心
贵州省

广西省

海南省