术与道 移动应用UI设计必修课
上QQ阅读APP看书,第一时间看更新

1.1.2 UI的学习方法

了解完基础的概念后,如何开始学习UI设计呢?下面介绍一些UI设计师学习的基础方法。


1.图形基础

UI设计确实需要很好的图形基础,目前国内知名的UI设计师接触UI时大多从学习画图标开始,这样充分锻炼了设计师绘制图形的基础。手机界面就是设计师的画板,各种漂亮的界面图标就是设计师的绘画成果。

在过去一段时间内,扁平化风格比较流行,图标设计主要以线性和色块为主。很多人质疑还有没有必要去练习写实图标,我的意见是需要的。国内的设计专业都有基础课:素描、速写和色彩。这是绘画入门的三大基础课题,如图1-3所示。我们学习图形设计的过程也是以这个顺序逐步递进的。

图1-3 绘画入门的三大基础课

可以理解为学习写实图标就是练习素描基本功。我们要在电脑上对现实世界的物体进行细致准确的描绘,就需要更仔细地观察事物。这个物体的透视是如何的,光照射的角度是如何的,在对应的形状中表现出怎样的明暗分布,随着写实功力的递增,你就会逐渐培养出一双洞察细节的眼睛。在设计过程中可以考虑提炼图形,对原有的写实细节进行取舍,只保留核心的抽象图形,我们可以理解为这个过程就是速写。最后通过学习一些软件使用技法对图形进行样式的渲染,这是最终的色彩课。所以我认为学习绘制写实图标是一项综合性的设计基础课,这个过程会锻炼你对设计和形体做出本能的反应,分析它们的美丑,找出核心所在。


2.设计软件

软件的掌握是一种硬技能,不管我们有多好的想法,都需要使用软件来实现。我们需要掌握软件的基础操作,如Photoshop中的形状工具、钢笔工具、文字工具和图层样式等。也需要了解曲线和色阶这部分图像调整功能。这些基础操作不在本书的讨论范围,读者可以阅读相关软件基础教程书籍。下面介绍一些在UI设计中常见的软件,如图1-4所示。

图1-4 常用设计软件

Photoshop:Photoshop是一款老牌像素处理软件。各种设计行业图形处理都会用到Photoshop,可以满足UI界面设计的日常需要。本书默认所有的设计演示都通过Photoshop完成。

Illustrator :Illustrator是矢量软件,在处理一些复杂的图形路径时,可以考虑使用Illustrator,也有设计师在Illustrator中完成所有图标的设计制作,然后连接嵌入到Photoshop中。

PS Play:这是腾讯开发的一款软件,通过Wi-Fi网络连接手机和电脑,在终端设备上实时预览电脑上Photoshop的设计稿,可同步调试及截图保存到移动终端。

After Effects:现在扁平化设计成为主流,所以动效设计成为不可或缺的一部分,可通过After Effects软件设计动效平滑切换界面。

Mark Man:一款标注软件,在移动设计中并没有前端的角色,需要设计师自己对设计图进行标注切图。


3.设计规范

我们设计的应用是基于iOS系统和Android系统运行。这两个系统都有其官方设计规范,这些规范详细罗列了一些通用性设计框架,如iOS系统下的设计图需要创建多大的尺寸,Android系统下是多大的尺寸,各自的系统状态栏、导航栏和标签栏高度是多少,手机屏上最适字号是多大,能看清的最小字号是多少,iOS系统用什么字体,Android系统用什么字体等。这些会在本书后面章节中进行详细介绍。

当然,官方设计规范可以理解成一份通用的指南,如果想做出自己的特色,必须遵守而又不拘泥于规范,那就需要根据产品特性制定出自己的一套设计规范。本书也介绍了制定设计规范的方法。


4.临摹学习

理论与实践并行,我们熟悉相应的理论知识后,还需要做大量的设计练习。把设计知识融入实际的工作中,这个过程中手要勤、眼要宽。

手勤就是多练习,业余时间多临摹成熟图标界面设计作品,再在合适的时机借鉴到实际的工作中。智慧源于心胸,心胸源于眼界,眼宽就是多去看设计网站,开拓自己的眼界,如站酷(ZCOOL)、UI中国和追波(Dribbble)等,如图1-5所示。多年以来笔者形成的一个习惯就是每天花一个小时浏览这些设计网站,看看最新的设计师作品。

图1-5 知名设计网站

5.参与项目

经历一整套完整的设计流程是最好的学习锻炼方式。从一开始讨论原型图到出效果图,再到切图以及标注给开发者。效果图要不断导出在手机上预览,核对电脑上的设计稿与手机上预览的差距,你会不断在实践中提高。当然有设计师会说,我目前正在学习阶段,还没有参与到移动设计工作中,这也不是问题,网上有大量的现成设计案例,你可以按照你的想法二次重新设计,这种方法叫Redesign(再设计)。通过假想的设计项目,思考整个项目的流程,精益求精的推翻和改变,不放过每个小图标等细节,同时能把自己设计思路完整展示说明出来。业界有这样的案例,某设计师不满Facebook的界面,按自己的想法独立重新设计了界面,并在设计网站上展示,由于二次设计效果出色,赢得了很多网友的赞誉,也吸引了Facebook的注意,最终收到了Facebook的Offer。所以设计师们,赶紧动起手来吧。