当前位置:文档之家› UI平面设计技巧

UI平面设计技巧


排版的CRAP原则
亲密性 PROXIMITY
在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注 册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容,如小标题等,属于同一个逻 辑。可使它们的颜色、字体、大小、留白保持相同,这样可以增加条理性和加强设计的统一性。
排版的CRAP原则
对比 CONTRAST
在同一个视觉区域内的逻辑不同的元素应该有所区别,避免视觉上相似。这样就可以有效地区分谁是 主角谁是配角了。为了让主要元素更突出,让次要元素更后退,我们可以尽量使它们的颜色、字体、 大小、留白不同。如果两个元素不尽相同,请让它们截然不同。比如如果你想使用12px的正文与 14px的标题区分明显,不如用12px与40px进行区分反差更大,更容易区分哪个内容是需要优先浏览 的、哪个内容是次要的。对比的方式有以下几种:
文字排版准则
2.理解字间距
草率的字间距调整是设计工作中的大忌。不用多说,这个关键的技能你应该尽快搞定。字体间距微调 整可以使人物角色到产品的转变更合理,更统一。这听起来好像不那么重要,但是一个优秀的字间距 调整工作可以成就一个完全不同的设计。字间距调整的主要目标是确保每个字符之间的空间美学,创 建优美的文本序列。同时,就像Adobe Illustrator之类的软件只能提供字间距调整过程中自动修复错 误的功能。这些错误往往是很微小不易察觉的,尤其是在长句子或段落中。但是对于标题或者标志来 说,一个糟糕的字间距调整可以瞬间毁掉整个设计作品。
3.限制字体使用的种类
设计师在进行字体排版设计过程中,尤其是新手设计师,常见的错误是使用太多的字体和设计风格。如果你需要 使用不止一种字体,一定要限制你的字体在两到三种以内。使用一种字型和大小用在设计主体,一种字体用于标 题,另外一种用于副标题。不要在字库中选择字体时犹豫不决,只要确保字体之间是紧密关联的。使用两种非常 相近的字体可能会是一个错误的选择。有些人会认为你不够仔细,粗心使用了错误的字体。
平V 面学习资Leabharlann 分享V1 平面构成
平面构成
1.点的构成
点是组成平面构成的基础要素。点可以是不 同大小的;可以是不同疏密的;可以是不同 虚实的。可以是整齐的点,也可以是随意排 列的点。在一个画面上也可以有大小、疏密、 虚实、整齐和随意对比的,对比就会产生韵 律感。仅仅依靠点来构建画面时,我们会想 方设法地让画面丰富,体会点的变化。
排版的CRAP原则
①色彩对比
②大小对比
排版的CRAP原则
重复 REPETITION
如果相同的内容(如标题等)属于同一个逻辑,可使它们的颜色、字体、大小、留白保持相同。这样 可以增加条理性和加强设计的统一性。这个原则看似简单,但是新手很容易犯这个问题,所以再次提 醒,一个级别的信息尽量使用一种设计来保持用户的认知,避免用户认为是另一种信息分类。这就是 重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看, 一个注册页面可含有:注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性,那 么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢?注册和其他。那么同一 个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下,用户会因为视觉惯性变成 寻找线索的“僵尸”,会根据线索而顺畅地浏览下去。
排版的CRAP原则
排版的CRAP原则
对齐 ALIGNMENT
任何内容在版面上都尽量应该上下左右 对齐。随意摆放绝对是错误的。这一点 一定要和大家多次强调,比如一个元素 上下左右的间距都要是一样的。大家看 到网页和app设计之中经常会有间距和 留白,留白和对齐都是我们在设计时需 要考量的,留白不是随意的。
平面构成
平面构成的八种形式
平面构成的形式有重复构成形式、 近似构成形式、渐变构成形式、发 射构成形式、密集构成形式、对比 构成形式、肌理构成形式等,如果 平时您发现在工作中排版的图形能 力比较差,那么建议您了解一下构 成形式加以练习。
V
2 排版的CRAP原则
排版的CRAP原则
排版中的逻辑关系
任何一个设计中都需要把各个元素分级分清主次,这样才能更好的抓住重点。你可以想象自己在管理着 一部玛丽苏电视剧,这部剧中谁是主角?谁是女二号?谁是群演?主角需要独立的化妆间和助理;女二 号可能只有一个助理;群演可能就是整个剧里的一个过客。我们的设计也是如此,哪个信息是主角?哪 个信息是女二号?哪些元素又仅仅是群演呢?女主元素首先要站C位(网络流行词,来源center)霸占 画面的中心,然后这个元素要尽量突出,可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出; 女二号信息一定不要抢了女主信息的风头,所以要和女主元素有一定的对比,字号上也要小很多,尽量 让用户第一眼看到主要元素。而群演的元素一定要淡化,仅仅让人感知有这些元素就可以了,比如文字 可以缩小到刚刚能注意到,颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢? 我们就要用到CRAP原则了,CRAP是这四个原则的首字母缩写,分别是对比、重复、对其、亲密性四 个原则。
V
3 文字排版准则
文字排版准则
1.注意字体表达的含义
字体的选择并不是一个随机过程。仅仅通过搜 索你的字库选择喜欢的字体,很少能得到一个 满意的结果。这是因为用户的心理更倾向于有 特定意义的字体样式。在设计过程中,你应当 确保你的字体样式符合用户使用习惯。这不仅 仅意味着你选择的字体是经过完美设计的,更 要保证你设计中使用的字体是符合市场营销需 要的。你不会将精心设计的彩色字体应用于一 本律师事务所的小册子,对么?其实它更适合 用于生日宴会请帖的设计。
平面构成
2.线的构成
线有哪些呢?垂直线、水平线、斜线、曲线 等。垂直和水平都会有稳定的感觉,斜线会 更加有冲击力,曲线会感受更加柔和。由不 同粗细、不同韵律的线条组合,作品将更加 有视觉引导的效果。尝试只用线条构建一个 画面,你会体会到不一样的视觉感受。
平面构成
3.面的构成
面的种类有不规则形状和几何形状两种。在 《纪念碑谷》游戏中有个词叫做“神圣几 何”,我非常的喜欢。几何图形真的是很神 奇的存在,几何形是可以用数学表达出来的, 也是我们在初中时就开始学习的。比如三角 形、圆形、矩形、正方形、椭圆等。这些几 何形在视觉上是非常令人感觉舒适的,如果 你在创作时没有灵感时,可以从几何形中寻 求灵感。不规则形状其实也可以分解成不同 的几何形的组合。
相关主题