欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

UI设计12讲!NO.01 图标分类及设计规范

时间:2022-08-22
B站视频:av602361142
类别:其他教程
水平:入门
这个网站全是宝藏!老板看到都夸棒!1W多篇宝贵的进阶经验等你来刷 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

UI设计12讲!NO.01 图标分类及设计规范

本集讲师:@桃子

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

本集教程内容概要

本集视频是 UI 设计基础入门自学手册系列教程「UI 设计12讲」的第一集,讲师桃子教大家通过即时设计来设计几个图标,并讲解图标的分类和其设计规范

编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程。

1、工具介绍

即时设计是一款在线可协作的UI设计工具,目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

如果想要了解即时设计的基本功能和操作用法,可以观看即时设计入门系列教程:

今天讲解的图标设计主要会涉及到图形的使用、钢笔工具、布尔运算、图层样式等。

UI设计12讲!NO.01 图标分类及设计规范

2、图标分类

图标主要分成标志性图标和功能性图标。标志性图标主要是手机应用图标,也就是手机桌面上的启动图标:

UI设计12讲!NO.01 图标分类及设计规范

功能性图标经常出现在界面内,用于对用户的指示和引导。功能性图标主要分为纯图标和图文结合图标,有的可交互,有的不可交互。交互与否主要与产品需求有关。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

3、设计风格

图标的风格上主要分为线性、面性和线面结合图标:

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

其他风格还有一些轻质感、写实风格图标和3d图标。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

设计规范上常用尺寸会有从16px、24px到1024px大小等等,不过尺寸并不是固定的,在实际设计中也会存在特殊的尺寸。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

4、Keyline(辅助参考线)

keyline 可以帮助我们在设计同系列图标时,让各个图标的面积占比相近,也就不会出现太高太瘦或者太矮太胖的图标。它是由几个不同比例的区域来辅助设计范围的。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

5、案例讲解

我们以24x24像素为例,在即时设计软件中设计几款图标。分别是计时、心率、定位、打卡。

画一个24x24的矩形,设计的时候最外圈留出一部分不要占满。新手可以用keyline来辅助设计,这里我们大致框出20x20像素的区域,可以理解为出血线。这个区域就是设计图标可以画到地方,不要超出去。

UI设计12讲!NO.01 图标分类及设计规范

接下来做时钟的图标,圆形之后做一根短线,再复制它旋转一下。要注意的是线段的端点要整体统一,在右侧描边里可以设置。

UI设计12讲!NO.01 图标分类及设计规范

然后做心率图标。画一个矩形和两个圆形,一起选中后使用并集,选择轮廓化。细节处使用钢笔工具,剪掉一个节点以后再连起来。去掉填充,使用描边。 再用钢笔工具画上心跳。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

拉一个圆形,使用回车或者双击,选择最下面的节点,把它变成直角,拖到keyline这个底边。再在中间画一个小圆。这样定位图标就好了。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

再来相机图标:使用两个矩形、一个圆形。矩形改成梯形,再做一下并集。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

接下来把这几个线性图标改成面性图标。

UI设计12讲!NO.01 图标分类及设计规范

选中图形后勾选填充,把描边去掉。填充颜色里面选择线性渐变。分别选择想要的颜色,我这里选择了一些马卡龙色系。调整渐变角度和长度。这里的渐变可以拉长一点点,可以让渐变显得更柔和。

UI设计12讲!NO.01 图标分类及设计规范

UI设计12讲!NO.01 图标分类及设计规范

最后感兴趣的同学可以尝试设计一款自己喜好风格的图标作为练习。通过持续的练习,相信大家都会设计出更多更出色的图标。

UI设计12讲!NO.01 图标分类及设计规范

下一集将会给大家带来有关金刚区图标设计方面的信息,请持续关注我们的教程,我们下一期再见~

6 收藏 13

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片