美文网首页UI资源库UI设计传UI设计素材
UI设计教程,新手如何快速出一套界面图标

UI设计教程,新手如何快速出一套界面图标

作者: 1633897ac30b | 来源:发表于2018-05-18 17:14 被阅读403次

    在开始给你分享之前,对于新手刚开始接触想学习UI设计的朋友。

    建议先了解什么是UI设计?

    UI设计需要学习那些软件?

    这样你才能更好的开展自己工作学习计划,废话不多说!

    UI设计需要学习的软件,分别有PS,AI,AE,ARP,思维导图等软件。

    Adobe Photoshop CC 2018简称PSCC2018

    Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。

    在UI设计中PS的使用率在90%以上,所以作为一个合格的UI设计师。PS是肯定得掌握的。

    PS可以在UI设计中,绘制界面设计,图标设计等。

    Adobe Illustrator CC 2018简称AICC2018

    Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件

    AI可以用来从事,平面设计,网页设计,UI设计等多种设计工作。

    在UI设计中AI的使用率也是非常高的,主要可以用来绘制图标,界面等设计。

    Adobe After Effects CC 2018简称AECC2018

    Adobe After Effects简称“AE”是Adobe公司推出的一款图形视频处理软件,适用于从事设计和视频特技的机构,

    包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。

    在UI设计中PS主要用制作交互动效图。

    Axure RP Pro 8.0简称ARP

    Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。

    Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等,

    另外,架构师、程序开发工程师也在使用Axure。

    在UI设计中ARP主要用制作交互原型图。

    Mindjet MindManager简称思维导图

    MindManager,中文商标译作C,俗称“脑图”,又叫“心智图”,是一款创造、管理和交流思想的通用标准的绘图软件,

    由美国Mindjet公司开发,界面可视化,有着直观、友好的用户界面和丰富的功能。

    在UI设计中主要用来整理交互逻辑思维层。

    好,简单的和大家说了UI设计常用的的设计软件,那如何去设计呢······

    别着急咱们继续往下看,如何设计出3种风格统一系统图标呢?

    如果我下面的分享带给你一些启发和灵感,就请你帮我转发此文章,我将感激不尽,谢谢!

    图标是决定一个APP风格的重要构成元素,要设计一款讲究的APP,成为一个讲究的设计师。掌握如何设计一套统一风格的icon是基本要求。

    APP中的图标的类型多种多样,最常出现的有:面形图标,线形图标,扁平描线图标。文章主要讲这3种图标。图标的形式没有绝对的对错,只要在当下是合适就是最好的。设计圈有点像时尚界,有些反复,时不时会流行复古,时不时又流行现代……

    一. 面形图标

    面形图标的视觉占比大,有比较强的视觉表达力,通常用在应用中的主要入口。最新的苹果iOS 11底部标签栏就使用了面形图标。那么面型图标的风格要如何统一呢?

    在APP界面中,面型图标通常有两种使用方法:正形和反白。我将分别讲下这两种使用情况下,如何进行统一。

    1.正形

    上图是面形图标的正形使用,要统一风格,要注意的是:

    a. 面的面积

    b.负形的面积

    c. 线条的统一

    d. 形的统一。可以从形的形状,圆角进行统一

    示例中的icon,在面的形上也进行了统一,全部用了圆形进行布尔运算,这种统一在需要画大量功能性icon时,并不是必要条件。满足以上3个条件,基本就可以做一套风格统一的面形icon了。

    2.反白

    上图是面形图标的反白使用,反白使用时,除了正形图标的3个注意点,还需注意图标和背板的尺寸比例,比例并没有严格的规定,但是建议用0.618黄金比例。

    注意点如下:

    a. 面的面积

    b. 负形的面积

    c. 线条的统一

    d. 形的构成统一。比如:圆角统一

    e. 背板和图标的比例

    二.线形图标

    线形图标比较轻量化,减少视觉干扰,让用户集中在产品核心功能上。在iOS11以前,iOS原生应用的导航栏,标签栏,工具栏全部采用了2px线框的图标设计。

    线形图标的使用也有两种:正形和反白。不建议线形图标的反白使用,因为从设计逻辑上讲,背板结合线形图标是互相矛盾的。

    正形

    上图中线形图标,要统一风格,有以下几点:

    a. 线的形状

    b. 闭合区域的大小

    c. 线的粗细

    d. 线的断点

    三.扁平描线图标

    扁平描线图标其实是面形和线形的结合,一开始这种设计形式,主要用来做复杂度比较高的插画,后来逐渐在标签栏,首页功能入口这些位置开始应用。这类图标相对于纯面形,纯线形来说,风格明显,个性化程度更强。有一款APP叫“想去”,它的分类图标就用了扁平描线图标,有兴趣的同学可以去看下。

    扁平描线图标,统一风格,除了要注意线形图标设计以外,要注意填色区域的大小。

    a. 线的形状

    b.线的粗细

    c. 线的断点

    d. 填色区域的大小,颜色

    基础已经讲完了,当你掌握了统一图标风格的基本方法以后,就可以开始创新,有自己APP特色的图标了。

    下面是近期做的一些APP图标,

    供你看看参考

    图标设计有专业的参考网格,按照参考网格设计可以很大程度的使图标大小更为统一,但是我建议千万不要太拘泥于网格,视觉统一最重要,参考网格是帮助设计的工具,不要被它所限制。理论结合实践,实践的过程中不断的自我总结,才能不断的成长。

    今天的分享就先到这里,如果你想从零基础学习了解更多UI设计内容,关注公众号:UI设计传,全国UI设计师学习交流平台,你想的都在这里啦,咱们下节见!

    相关文章

      网友评论

      本文标题:UI设计教程,新手如何快速出一套界面图标

      本文链接:https://www.haomeiwen.com/subject/oqagdftx.html