很多设计师在大学时期都是学习绘画,动画,或者视觉传达类的学科,大学里一般也没有UI的专门学科。因为人机界面交互,用户体验,都是非常综合的领域,需要方方面面的知识。
我以前做游戏时,UI更多是凭借视觉感觉。现在做互联网产品时,UI更像是一种接近工业的学科。它不是一张海报,一张原画,或者是动画短片,强烈的艺术风格可以说明一切。UI在互联网十几年的发展下,从电脑软件界面,到手机移动界面,已经形成了标准化视觉。用户已经习惯,设计师不必造轮子。抛开交互,在阅读体验上,比如,信息的排版,网格系统,都需要向已经发展的很成熟的平面设计学习。
搜一搜UI,就像工厂里的零件,这些基本的零件本身的质量早已经有了行业标准,通过各种官方规范文档就可以了解。
这些零件该如何组装起来,让它可以舒服的被人使用;以及如何打造出可以给人留下印象的东西。这是设计师需要主要思考的地方。
无论是在什么客户端上,无论是什么类型的UI,平面设计中基本的,通用的准则,是每个设计师都需要具备的知识。
UI设计 首先要保证信息的清晰呈现,让信息易读,让操作易用。
其次才是在信息清晰呈现的基础上,加入视觉设计,增加表现力。让UI提现产品的气质,风格或者文化。
这个主次关系不可以颠倒。
同时,如果你看过一些设计书,就会知道在平面设计领域的四大原则:
- 亲密性
- 对齐
- 重复
- 对比
简要说明下这四个原则:
亲密性
彼此相关的项应当靠近,归组在一起,组成视觉单元
有助于组织信息,减少混乱,为阅读者呈现清晰的结构
对齐
任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。
能从排版中看到虚拟的“线”和“边框”
重复
视觉要素重复出现,可以重复颜色,形状,材质,空间关系,线宽,字体,大小和图片等等。
增加条理性和统一性。
对比
对比的基本思想是,要避免页面上的元素太过相似。如果元素不相同,那就让他们截然不同。
在需要引人注目的地方,一定要加强对比。
同样也可使用邻近色,和对比色对比,同一颜色的明度和纯度对比。不多加赘述。
排版中的实例
在实际排版中,尤其是文字的排版,有一个很重要的概念就是注意行高。
在前端开发中,文字都有默认的行高数值。在使用PS等设计工具时,设计师容易忽略这个数值的变化, 当文字字号变大时,其行高也要相应的变化。(PS默认的行高多为「自动」,距离较小。当文本内容较多时,需要手动将行高调整到字号的1.5~2倍)
如下图,当我们拿到最左边这样的文本内容后,虽然它已经给标题加粗处理了,但是仍然不易阅读,所以我们需要按照亲密性原则,讲文本内容分组,调大它们之间的距离。
同时,将加大标题字号,加强对比。(此时比较重要的是,当文字字号变大时,文字行高也变大了,所以我们要相应的加大它的行间距) 这样就是一个相对舒适的排版了。
也可以考虑增加一些缩进来加强从属关系。
另一组实例
以下是一个抽奖转盘的活动规则页面。
某活动规则页面案例- 首先这种长文本一般不适用于第二张图的居中,阅读视线会非常忙乱。
- 第三张图是公司的实习生交给我的成品,当时看了强迫症就要犯。文字没有分组,同时各种不对齐,(另外乱打AAABBB是很不好的习惯,因为有时候字间距和标点也是要考虑的)
- 第四张图调整了文字和对齐和行间距,阅读体验好了很多。
- 第五张图则更加加强了标题的对比,弱化分割线,利用文本的分组和对比来做区分,更好一步。
利用移动端8px原则,设置网格
网格系统有秩序之美,在传统书籍平面中,网格是排版的基础。而在界面设计中,我们可以将网格设置成我们需要的像素单元,实现有规律的对齐。
8px原理由来
1.由于IOS技术开发是以320*480px为标准开发的,所以设定此尺寸为1,算出各个尺寸的比例。
2.各个尺寸比例的值乘以4时,各个尺寸都能够满足是整数,且保证开发时不会模糊。
3.设计稿尺寸为开发尺寸的2倍,所以我们选择为最小尺寸单位。
字号推荐
相比网页而言,手机屏幕小,信息集中。所以字号不宜过小,而且现在也有流行大字的趋势。很多新闻类APP的内容也已经有杂志化的走向,标题文字都会相应加大。
还是那句强调,文字加大时,间距一定也要加大。要留足空间。
再看一组综合实例
排版细节变化的设计思路
- 图1乍一眼看没什么毛病,但是仔细看,排版间距略平均,标题无对比,阅读视线无重点。
- 图2 调整了间距亲密关系,让新闻列表区域作为整体,靠的更近,同时加强了标题文字的颜色对比。
- 图3 进一步加强文字对比,弱化板块标题,将视线重点留在 “晨报”和新闻标题上。同时将新闻列表间距更加靠近。
- 图4 为了使界面排版更加简洁,将缩略图边距去掉,并放大图片尺寸,图片所带来的垂直空间,可以帮助标题文本拉出空间,不至于像图3过度拥挤。
设计中同样可以利用网格。快速完成准确的布局。然后在此基础上再做进一步的需求化,风格化调整。
在此主要分享了一些最基本的平面设计的小注意点,这些细节看似简单易懂,但是实际设计中很容易被忽略无视,新人设计师更是会信马由缰,全凭感觉。UI设计不是学几个软件,抄几个界面,做几个ICON就可以了。
仅仅从平面视觉的易读性来讲,需要学习平面设计原理;
另一个层面,为了易用性,在产品需求,人机交互,用户感官心理方面需要不断研究;
进一步实现艺术和创意的表现,体现产品的风格,品牌和文化。
扯两句名言:
设计是为了解决问题;
真正的设计并非令人从表象察觉到有何不同,而在于无形中从设计上受益。
当然,我们不是要被这些规则限死,从而让所有的设计都看起来一样。
而是在打破规则之前,首先明白规则是什么。
网友评论