这8条走心的建议,帮你设计出更加优秀的排版 - 优设-UISDC

这8条走心的建议,帮你设计出更加优秀的排版

2017/09/05 19400评论区

排版是设计师同用户沟通的一种方式。在数字产品设计当中,界面的视觉和可读性对于用户体验的影响是极为巨大的。曾经有一位著名的平面设计师曾经说过:“排版设计不仅仅是可见的,而且是可被听见的。你创建出一个宏大的场景,那么演员就可以在此登场表演了。”排版能够呈现情绪、营造氛围、传递精神,所以优秀的排版能够为设计发声。今天的文章为你提供一些排版设计上的小建议,虽不复杂,但是也需要你仔细揣摩,才能用好。

层次让排版发挥作用

想要创建出能被用户感知到的、令人愉悦的设计,设计作品应该拥有良好的组织结构和清晰的导航模式。而设计师可以通过建立视觉层次结构来明确整体的结构,视觉元素在这个框架下被组织起来,用户则可以更为清楚地感知其中的内容。

视觉层次可以被分为不同的部分,其中只与文本元素相关的部分被称为排版层次。排版层次是通过将文本内容划分为标题、副标题、正文等不同的类型,从而让文本各司其职,具备良好的层次。不同的文本类型使用不同的大小、字体、色彩来显示,从而区分出彼此。

清晰的层次结构让文本具备良好的可读性。此外,文本中的关键部分还能高亮显示,从而吸引用户的注意力,甚至关联到特定的交互和操作上去。

兼顾到上下文场景和用户

当你在为特定部分的文本选取字体的时候,需要考虑它所处的环境,所在部分的特征。每种字体都有其特定的功能、适合的场景和情绪,有的友好,有的有趣,有的严肃,有的看起来很商业,所以字体和情绪要保持一致。

在你选取字体之前,要清楚产品这个部分的特征,了解客户的目标,以及目标受众的需求和偏好。字体的视觉效果会直接影响用户从你的产品中所获得的第一印象。如果这种字体不符合产品当前内容的情绪,会在用户那边产生误会的。如果是一个相对严肃的商业网站,在其中采用有趣或者拙稚的字体,用户会对这个企业和服务产生质疑。如果是针对青少年或者年轻人,太过于正式、沉闷的字体,则会让页面看起来很无聊。

深入关注移动端的排版

设计师常常会试图使用实验性的布局,来让设计看起来更加原创。但是这样非常规的排版布局迁移到移动端设备上,就不一定具备良好的可用性了。移动端屏幕太小,难以适配过于独特的设计,这种限制会使得设计师难以兼顾到功能和视觉。设计师需要特别注意移动端排版布局的细节,从字体尺寸到间距和缩进,这些细节对于整体效果的影响是非常明显的。

与桌面端的设计相比,移动端的排版更难以达到良好的识别率。在小屏幕上,字体首先要控制到一个相对较大的尺寸,这样不会因为难以识别而造成混乱。但是太大的字体又会让设计看起来不够优雅。同时,设计师还要特别注意内容的对比度,因为移动端设备周遭的环境常常会特别的复杂,如果对比度不够好,用户阅读困难,对视力的损害就不可避免了。

此外,设计师还需要考虑排版布局的功能性。如果文本中存在可点击的内容,设计师需要确保它们能够且易于被点击到,还不能误触其他的地方。

通盘考虑移动端排版的全部细节,设计师才能为用户带来有价值的产品。

极简主义的设计不是没有道理的

在不久前,许多设计师还会在一套设计当中使用大量的不同的字体与样式,这样的设计之下,排版布局中充斥着大量令人分心的细节,难以营造一致的、合理的情绪和氛围。

经验丰富的设计师,通常会在整个排版布局中,沿用2到3种字体,确保了文本元素之间的对比度,还节省了设计成本,确保了整体的平衡,以及信息传递的准确性。在字体样式上,设计师也会对粗体、斜体这样的效果保持克制,对真正重要的部分进行强调,避免混乱。

除此之外,文案内容也需要足够的简明,不要让无效信息干扰用户。

呼吸感很重要

字母之间的间距,行间距和字间距,是可读性的主要影响因素。调整间距和留白,是排版设计中的重要环节,也是控制整个布局呼吸感的关键。

缺乏留白,或者间距控制不好,最终会影响内容的可读性:字母难以辨析,单词看不清楚,视觉上不够舒适,每行和每个段落看起来不够舒服,都会影响整体的统一性和内容的阅读体验。有密有疏,疏密有致,才有呼吸感。

像科学家一样排版,像艺术家一样定制

排版是一个涉及到许多规则和条例的复杂学科,只有充分掌握了这些规则,才能作出足够干净、整饬的排版。但是这还不够。客户总是需要一定的原创性,希望你能通过排版布局传递去情感,而这些是排版规则无法帮你实现的。

作为设计师,你的灵魂中是应该有艺术的特质。想象力和对没的感知,能够为你的设计赋予原创性和独特性。在严格的规则和独特的构思之间,找到平衡点,你会发现自己的能力已经超出了你的客户和你自己的意料。

彩色排版需要深思熟虑

有人认为,成熟的排版设计中没有色彩的位置,但是也有人认为色彩是视觉设计的必需品,哪怕是传统的排版设计,也必须具备。不过,在实际排版设计当中,色彩的出场比例并不低,所以这种情况不应忽略。

色彩在排版设计当中,不仅可以强化视觉,而且能够为UI增加情感因素,吸引用户的注意力,强化趣味感。不过,用色本没问题,但是色彩一定要控制好。色彩多而混乱的失败案例多不胜数,在排版中用色一定要深思熟虑。下面是排版设计中用色的一些技巧:

  • 构成对比。在排版中用色很容易造成混乱,让内容难以辨认。主要控制好文本和背景之间的对比度。
  • 不要使用太多色彩。太多颜色很容易让整个UI变得更加混乱。
  • 让配色协调。配色是设计的基本功,善用色轮和成熟的配色方案。
  • 小心使用特效。文本上尽量少用特效,绝大多数情况下,特效并不会让文本的视觉效果更好。

了解排版的基础知识

也许这么说有点直白,但是确实有很多设计师压根不了解排版设计的基本知识。他们大多依靠各种工具中自带的排版工具来做排版布局,他们只需要在选取自己的时候调动自己的审美知识就可以,而排版个诸多规则他们并不确知,只是基于经验,似是而非地“有所了解”而已。

不了解排版知识,设计师是无法发挥出排版的真正潜力的,这也是为什么同样的素材在别的设计师的排布之下,就是要比自己做的来得漂亮。基础知识很重要,这并非是一句空话。

那些看起来很枯燥的字体设计书籍,当中蕴藏着干货。学好排版的基础知识绝对是磨刀不误砍柴功。

【更多排版设计好文】

  1. 《对比这10个注意事项,你的网页文字排版达标了么?》
  2. 《用一个实战案例,教你学会复杂界面的布局设计》
  3. 《专业科班方法!帮你学会网格工具这个理性的排版利器》
  4. 《科班高手的方法!16个简单实用的排版小TIPS》

原文地址:uxplanet
原文作者:Tubik Studio
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/8-typography-tips-for-designers

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里