教你如何绘制风格统一的APP界面图标

此教程针对新手阶段刚开始做APP界面的同学,如果你是资深老司机看到这篇小教程可以自动忽略,当然也可以来互撩

初次做APP的同学,绘制图标是占界面问题比重较大的一块内容,虽然网络资源很多, 但仍旧做不好一套统一风格及趣味性的界面功能图标,特此,来专门举证说一下这个问题, 如何绘制风格统一的APP界面图标?

在这里我们先从最主要的功能图标做起,也就是tabbar一级功能图标,相对来说这里的图标不需要过多装饰,做出富有自己产品风格的图标就可以,需要注意的是,一级功能的图标需要做两套,即 默认的 和 点击之后 的,通常点击之后的图标需要更突出一些,你可以用颜色来区分或者线条转为块状来区分。

首页 :即APP界面中的第一个页面,相当于用户即将进入产品、了解产品、 从而使用产品,所以很多首页都会以房子的外观形式来表示,当然你也可以结合你的产品内容来变换首页图标的展示形式。

分类 :即APP界面中的第二个页面,仅次于首页,意为该产品有多项选择内容可供用户使用,查看分类,大概就会了解该产品主要内容是什么了。

发现 :这个页面多用于在主要产品展示后,用户会有新的发现内容,比如发表个人动态,查看关于这个产品的话题精选之类。

我的:也可以名为“个人中心”,是所有APP都会具备的功能页面,因为用户进入新的产品都应该有自己的账户,那么就需要用户来管理自己的账户,所以通常会有人物头像来做为图标造型。

当我们把功能图标的寓意都理解清楚了,就可以绘制自己的初稿图标了,这里我们通常用AI软件的钢笔工具绘制线性图标,为了更方便精准的控制图标大小,你可以建立网格线来作为绘制图标的基准,点击菜单“编辑/首选项/参考线和网格” 为网格线设置一下参数,然后对齐网格。网格线间隔1px,次分割线1, 这样设置过后,每个网格和间距都是1px。

在这里需要注意一下视觉重量,以上的图标高度一致,线条粗细一致,但是在视觉效果上总觉得大小不一,我们来举例说明下这个问题

我们可以看到上面的三个图形在软件里的物理尺寸宽和高都是相等的,但是我们观察它们各自的负空间(红色区域)并不一样大。从而我们得出结论:它们只是宽度和高度相同而面积却不同,那么我们就需要加大三角形和圆形的面积,来让视觉重量达到一致的效果。

三角形和圆形分别往外延伸,这个延伸多少合适呢,一般情况,以眼睛看到的视觉大小舒适自然就可以,当然如果你要精算一下各自的面积也可以。那么我们知道这个原理之后,就可以着手来做我们的图标了。

尺寸调整

这里说明下,一级功能图标的线条最好略微粗一些,一般我会用3px,最少也不要低于2px, 一级功能嘛,自当让它看起来有些分量的。

细节调整

在调整阶段,最好是复制出一份来做调整,你想换几种样式就复制几份来做相应调整,不要在初稿里直接做调整,那样如果你再次去换种样式调整的话,可能就比较麻烦了,良心忠告!!

确认风格定稿

首页功能与我们一级功能图标操作一致,但是!!因为是在界面首要的功能入口,我们需要花点心思来提升图标的设计感,以此丰富界面的展示效果。在这里我们还是以导图里面的功能为例进行操作

最初的图形绘制好之后,我们就开始来给它美化上妆了,比如给它调整构图然后换个不同背景,大家应该都会想到加背景肯定就是圆形或者圆角了,圆形都能理解,但是圆角会有不同的表现方式,不同的圆角形式,效果也会不一样。

以上除了羊角螺线复杂一些之外,想必大家都能够理解了,当然复杂的东西我已经为大家做好了,文章最后会长传一份源文件供大家参考学习使用。最后定好风格颜色后可以调整下细节做出自己满意的效果就大功告成了。

怎么样,是不是很Q 很弹 很好吃的样子啊:-), 哈哈,当然大家也可以根据自己的创意做出不同风格的主题icon, 在这里我们只是演示最通用的方式。

图标颜色这块也涉及到配色的知识,如果要详细来说的话可能又要写一篇了,哈哈,在这里我把自己配色图标的简单和大家分享下,我们还是以首页功能图标为例。

首先不管你的功能图标有几个,第一个图标始终是以主色来调和的,比如我的主色是蓝色,那么我的第一个图标就是一个弱渐变的蓝色为主,这样可以更贴合你的界面风格。 需要注意的是:虽然我说明了第一个图标为界面主色,但这并不是固定的规则,并且也不需要一定按照你的主色色值来做,你只需要保证色相一致,饱和度和明度可以根据情况来调整。

当你把第一个图标的颜色调整完成之后,复制出一个,在复制出来的图标里,只需调整色相就可以,饱和度或明度可以进行微调,到这里你基本可以自己掌握了。

从调色板里可以看出,我调整过的这四个图标明显的能看出色相的变化,但是明度和饱和度几乎都是在一个区域的,并且大家会发现,我是按照一冷一暖的色调来搭配的。看到这里,你是否已经明白了图标的配色技巧呢。

定好单色调之后,弱渐变的调整就简单多了,只需要在渐变一头的滑块颜色调的更亮一些就ok了,渐变色最好是上面浅下面深,90度或者斜角度渐变都可以,加上投影让它更有立体感哦。关于图标内容的层次就不多说了,主要是不同透明度的改变。嗯,希望本次分享能够帮到大家解决实际中的一些问题哦。

OK,那么本次分享就到这里,喜欢本篇小教程的同学请点个赞吧!

作者:丸子

(0)

相关推荐

  • “手把手教你设计”—12个最佳手机APP界面设计教程

    UI/UX 设计确实是需要一定的和学识才能真正在这个行业立足,并不是所有想成为设计师的人最后都能如愿以偿.他需要对设计有基本的了解,清楚设计的基本原则. 用户界面设计师和其他行业设计面临一样的挑战,那 ...

  • 手机APP界面颜色搭配案例

    今天25学堂跟大家聊聊手机APP界面设计规范之标准色彩规范.如何教大家使用色彩这个很神圣的工具. 我们先来回顾下.什么是手机APP界面设计规范? APP设计规范指对APP界面进行风格统一,对界面元素的 ...

  • Ai简单绘制app启动图标质感

    Ai简单绘制app启动图标质感 操作方法 01 在Ai软件中,新建一个800*800的文档,选择矩形工具,按住shift画一个正方形,并填充颜色,如图所示 02 然后选中正方形到效果-风格化-圆角,如 ...

  • App界面中的透明度

    小编话:说起透明度,大家应该是相当熟悉的吧!在UI设计中,我们经常要运用到它.对比度与清晰度的调整都需要用到透明度来辅助.特别是在界面的设计中,一个合适的透明度可以带来视觉上不同的体验.今天大家就一起 ...

  • APP界面构图怎么做?

    网页的构图文章解析的非常多,页面排版的也是随手能找到.而APP界面设计的构图却少得可怜,可是这才是UI设计中的痛,UI设计师们日常工作中必须直面的任务,这篇文章像是及时雨出现,带给大家雨露.超级完整的 ...

  • 手机界面app界面设计分析

    本篇详细讲解手机界面app界面设计分析 操作方法 01 项目背景分析,手机音乐app是一个集在线.搜素.下载于一体的音乐播放器软件 分析: 1.界面干扰因素不易过多 2.分析不同场景下的网络环境.光线 ...

  • AE制作APP界面gif动画效果

    我们在进行交互设计的时候,大部分时间是基于界面和功能逻辑的考虑,也适当的进行了交互效果的考虑,那么我们如何把交互的效果直观的表现出来呢,除了用axure做出交互的动态效果,ps绘制GIF图,代码设计动 ...

  • 2014年11月最新的手机APP界面(UI PSD免费下载)

    今天小编给大家带来的是2014年11月最新的手机APP界面合集,是当下流行的扁平风格界面设计,绝对值得拥有.这些都是很有用的.有很多漂亮的APP界面,也有很多漂亮的网页界面,有些极简,有些质感 , 还 ...

  • 如何做出这种有厚度的 APP 界面图片?

    小编:资深的UI设计师需要不断的创作出新颖的.杰出的作品,小白UI则需要不断的临摹和学习来提升自己-但是,不论是资深的还是新手,当我们完成一份优秀的作品后都需要来包装他,可是有时候找到的素材并不能完全 ...