设计沉思录

UI中的平面设计原则

2017-03-20  本文已影响77人  Rab

很多设计师在大学时期都是学习绘画,动画,或者视觉传达类的学科,大学里一般也没有UI的专门学科。因为人机界面交互,用户体验,都是非常综合的领域,需要方方面面的知识。

我以前做游戏时,UI更多是凭借视觉感觉。现在做互联网产品时,UI更像是一种接近工业的学科。它不是一张海报,一张原画,或者是动画短片,强烈的艺术风格可以说明一切。UI在互联网十几年的发展下,从电脑软件界面,到手机移动界面,已经形成了标准化视觉。用户已经习惯,设计师不必造轮子。抛开交互,在阅读体验上,比如,信息的排版,网格系统,都需要向已经发展的很成熟的平面设计学习。

搜一搜UI,就像工厂里的零件,这些基本的零件本身的质量早已经有了行业标准,通过各种官方规范文档就可以了解。

这些零件该如何组装起来,让它可以舒服的被人使用;以及如何打造出可以给人留下印象的东西。这是设计师需要主要思考的地方。

无论是在什么客户端上,无论是什么类型的UI,平面设计中基本的,通用的准则,是每个设计师都需要具备的知识。

UI设计 首先要保证信息的清晰呈现,让信息易读,让操作易用。
其次才是在信息清晰呈现的基础上,加入视觉设计,增加表现力。让UI提现产品的气质,风格或者文化。

这个主次关系不可以颠倒。


同时,如果你看过一些设计书,就会知道在平面设计领域的四大原则:

简要说明下这四个原则:

亲密性

彼此相关的项应当靠近,归组在一起,组成视觉单元
有助于组织信息,减少混乱,为阅读者呈现清晰的结构

对齐

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
能从排版中看到虚拟的“线”和“边框”

对齐 表格的对齐原则

重复

视觉要素重复出现,可以重复颜色,形状,材质,空间关系,线宽,字体,大小和图片等等。
增加条理性和统一性。

重复代表是经过思考的重复

对比

对比的基本思想是,要避免页面上的元素太过相似。如果元素不相同,那就让他们截然不同。
在需要引人注目的地方,一定要加强对比。

字号的对比 色相对比 如互补色对比

同样也可使用邻近色,和对比色对比,同一颜色的明度和纯度对比。不多加赘述。

排版中的实例

在实际排版中,尤其是文字的排版,有一个很重要的概念就是注意行高。

在前端开发中,文字都有默认的行高数值。在使用PS等设计工具时,设计师容易忽略这个数值的变化, 当文字字号变大时,其行高也要相应的变化。(PS默认的行高多为「自动」,距离较小。当文本内容较多时,需要手动将行高调整到字号的1.5~2倍)

行高与行间距

如下图,当我们拿到最左边这样的文本内容后,虽然它已经给标题加粗处理了,但是仍然不易阅读,所以我们需要按照亲密性原则,讲文本内容分组,调大它们之间的距离。

同时,将加大标题字号,加强对比。(此时比较重要的是,当文字字号变大时,文字行高也变大了,所以我们要相应的加大它的行间距) 这样就是一个相对舒适的排版了。
也可以考虑增加一些缩进来加强从属关系。

文字排版中的间距

另一组实例

以下是一个抽奖转盘的活动规则页面。

某活动规则页面案例 文本排布过于松散平均时,可按照亲密性缩小间距,上下留白加大,形成视觉单元 亲密性与视觉单元

利用移动端8px原则,设置网格

网格系统有秩序之美,在传统书籍平面中,网格是排版的基础。而在界面设计中,我们可以将网格设置成我们需要的像素单元,实现有规律的对齐。

8px原理由来
1.由于IOS技术开发是以320*480px为标准开发的,所以设定此尺寸为1,算出各个尺寸的比例。
2.各个尺寸比例的值乘以4时,各个尺寸都能够满足是整数,且保证开发时不会模糊。
3.设计稿尺寸为开发尺寸的2倍,所以我们选择为最小尺寸单位。

8px基准 利用网格布局

字号推荐

相比网页而言,手机屏幕小,信息集中。所以字号不宜过小,而且现在也有流行大字的趋势。很多新闻类APP的内容也已经有杂志化的走向,标题文字都会相应加大。
还是那句强调,文字加大时,间距一定也要加大。要留足空间。

再看一组综合实例


排版细节变化的设计思路

设计中同样可以利用网格。快速完成准确的布局。然后在此基础上再做进一步的需求化,风格化调整。

在此主要分享了一些最基本的平面设计的小注意点,这些细节看似简单易懂,但是实际设计中很容易被忽略无视,新人设计师更是会信马由缰,全凭感觉。UI设计不是学几个软件,抄几个界面,做几个ICON就可以了。
仅仅从平面视觉的易读性来讲,需要学习平面设计原理;
另一个层面,为了易用性,在产品需求,人机交互,用户感官心理方面需要不断研究;
进一步实现艺术和创意的表现,体现产品的风格,品牌和文化。

扯两句名言:
设计是为了解决问题;
真正的设计并非令人从表象察觉到有何不同,而在于无形中从设计上受益。

当然,我们不是要被这些规则限死,从而让所有的设计都看起来一样。
而是在打破规则之前,首先明白规则是什么。

上一篇 下一篇

猜你喜欢

热点阅读