相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

设计师必须要掌握的版式基础

MOGUL发布于:2018-5-17 09:01 |原作者: 郗鉴|
MOGUL
湖北省 黄石市 学生
发私信 + 关注
简介: 设计师必须要掌握的版式基础关于平面设计知识提起平面设计,也许很容易联想到平面设计师。其实平面设计不仅是职业也是一个重要的设计知识体系,在我工作中发现平面设计知识是UI设计和其他设计领域中必备的能力,然而很多朋友认为“平面设计是属于纸媒行业的事”而忽略这部分知识 ...


图文比例

在一个设计中,图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读,实际上人类有阅读能力的历史只有几千年,而欣赏图片的能力是天然的。如果你的需求上文字需求非常多,尝试与需求方商讨减少文字量。文字量越少,图形化设计越多,那么视觉上这个作品看起来就更轻松。

图片比例

在平面设计中,因为最终目的是印刷,对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话,可能会涉及一些需要网站编辑直接上传的图片,如果你的尺寸不是一个固定尺寸,那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序,要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸:4:3,16:9,1:1。4:3的原因是相机的画幅一般是4比3,所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9,所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。

设计师必须要掌握的版式基础 飞特网 设计理论

排版的CRAP原则

排版中的逻辑关系

任何一个设计中都需要把各个元素分级分清主次,这样才能更好的抓住重点。你可以想象自己在管理着一部玛丽苏电视剧,这部剧中谁是主角?谁是女二号?谁是群演?主角需要独立的化妆间和助理;女二号可能只有一个助理;群演可能就是整个剧里的一个过客。我们的设计也是如此,哪个信息是主角?哪个信息是女二号?哪些元素又仅仅是群演呢?女主元素首先要站C位(网络流行词,来源center)霸占画面的中心,然后这个元素要尽量突出,可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出;女二号信息一定不要抢了女主信息的风头,所以要和女主元素有一定的对比,字号上也要小很多,尽量让用户第一眼看到主要元素。而群演的元素一定要淡化,仅仅让人感知有这些元素就可以了,比如文字可以缩小到刚刚能注意到,颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢?我们就要用到CRAP原则了,CRAP是这四个原则的首字母缩写,分别是对比、重复、对其、亲密性四个原则。

对比 CONTRAST

在同一个视觉区域内的逻辑不同的元素应该有所区别,避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出,让次要元素更后退,我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同,请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显,不如用12px与40px进行区分反差更大,更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。对比的方式有以下几种:

色彩对比

在我们排版时首先要产生对比效果的就是背景和文字了。文字是第一阅读元素,背景和文字如果颜色很接近,那么就不容易区分出来引发注意了。一般来说在很多媒介的设计中我们习惯了白纸黑字,即白色背景和黑色文字。我指的不仅是纯黑和纯白,也包括其他类似明度颜色的对比。黑纸白字是另一个选择,深色背景和浅色文字的搭配其实不适合大量阅读,如果你的作品信息不多是没有问题的,但是如果用户阅读很久黑纸白字的界面,就会产生视疲劳(比如再次盯着白色的墙的时候文字还会出现等)不舒服的感受。当然一切取决于用户使用场景,如果我们的设计被应用在夜晚等较暗的环境,黑纸白字更利于阅读。总之,不管你的设计采用橙蓝、黑白、蓝紫配色,一定要记住文字和背景的对比关系。

除了文字之外,图标和其他装饰信息的色彩对比也是非常重要的。辅助信息或者辅助功能的图标尽量淡化以突出主要功能和图标;重要功能如订单等按钮则需要突出和醒目。色彩对比是设计中一个非常常见的手法。

设计师必须要掌握的版式基础 飞特网 设计理论

大小对比

大小对比是指文字、图片、图标等元素为了区分重要性采用的区分方法。比如两行文字:郗鉴和相声演员,同属文字但权重不同:第二行的文字用于解释第一行的内容,所以第二行内容应该通过大小和颜色变成次级,让用户阅读时分清主次。与此类似,比如音乐播放界面中的三个按钮一般并排放在一起:上一首歌、播放、下一首歌,哪个应该更大呢?当然是常用的、重要的功能-播放按钮。当然如果图标同属一个级别也应该放在一个尺寸的级别上。

设计师必须要掌握的版式基础 飞特网 设计理论

重复 REPETITION

如果相同的内容(如标题等)属于同一个逻辑,可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这个原则看似简单,但是新手很容易犯这个问题,所以再次提醒,一个级别的信息尽量使用一种设计来保持用户的认知,避免用户认为是另一种信息分类。这就是重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看,一个注册页面可含有:注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性,那么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢?注册和其他。那么同一个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下,用户会因为视觉惯性变成寻找线索的"僵尸",会根据线索而顺畅地浏览下去。

设计师必须要掌握的版式基础 飞特网 设计理论

对齐 ALIGNMENT

任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调,比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白,留白和对齐都是我们在设计时需要考量的,留白不是随意的。

设计师必须要掌握的版式基础 飞特网 设计理论


16

好评
12

差评

刚表态过的朋友 (28 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

MOGUL
湖北省 黄石市 学生
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计