图标:小小符号说这么多并发挥巨大作用成功用户界面(UIs)是否你期望用户界面设计师或UX设计师想刷新视觉设计技巧,图标设计过程对工具箱至关重要
说到设计新图标集从零开始新项目时, 分配足够时间到进程是至关重要的还有一些指南需要记住 帮助确保图标识别易用
引导中,我们将一步步走过图标设计过程第一,我向你们展示7个关键考量,从零开始设计图标时要记住这些考量。并实践理论 从头到尾设计摄像头图标
分解成两节
非称盾下潜
开工图标设计过程:7金规则
本节将分七大关键考量 记住设计图标
开工留意网格
数字设计中多事物受网格支配图标不变设计图标时,要密切关注像素网格和图标适应方式
最容易确定图标嵌入像素网格的方法是粘贴全数小数点避免所有代价-这些家伙产生模糊边缘来看看实践上像什么
下方我画了个简单家图标 留下像素网格开关左侧会看到图标由划线组成 完全适应像素网格右侧中风略微下降透视线组成像素网格-即直接切穿中风
现在,让我们看看对角学 搭建屋顶一秒网格上不完全选电网由垂直横向线组成,不对角线组成,因此无法令电网适配在这种情况下,我们确保起点和端点组成对角置网格
二叉先环游
设计全新疯狂新图标或集归根结底,我们有创意不过,我们有标准想坚持渐渐熟悉表示标准功能的具体图标
放大镜不是唯一能表示搜索的东西使用不同图标需要用户学习新事物,并因此减慢速度并不利于平滑用户体验
设计图标前,环游查找需要记住的任何标准表示没有空间实现创用自由幸运的是,它不如果图标不代表受标准约束的功能, 我们可以让我们的创用果汁流if it is, we still可以开创新曲折只要图标和函数仍可即时识别, 添加自定义设计技巧是完全可以的!
3级别去细节疯狂
微小地方常拍图标像iPhone标签栏事物变小后 太多细节开始失落
设计时对选择包含的细节有策略性轻点小部件,确保图标清晰读取,即使是小尺寸读取
4级步调一致
当我们设计一套图标时,它们应该像家庭外观特征相似 令感知相联
设计时 一致定型选择举个例子,如果你使用圆角并端为一图标, 确保所有剩余部分都使用此点 。定型化精度和详细度应一致帮助建立一致性视觉语言-Barking关键部分
5级留意空白
注意小细节或元素 彼此关系太近小小小小小小小小小小小项目若不小心漏空,读起来难读,并开始失去意义
6级测试你的工作
保证图标与用户清晰快速通信的最佳方式是测试它们。完成图标设计后 快速测试是良好实践
显示图标朋友或团队中其他人请求他们告诉你第一件事 当他们看到时会想到如果它与你意图通信一致,你状态良好
7简单形状构建
所有事物都可分解成基本形状记得上方房子图标我们设计用两个矩形和三角形
定义图标后,尝试分解成简单形状最佳方法开始构造并简化图标
二叉如何从零设计图标:一步步
设计图标时考虑什么现在,让我们实践要做到这一点,我们将经历过程 搭建简单相机图标
我会使用Scletch可复制Figma等设计软件中的以下步骤无法判断工具时退步Figma和Scletch比较.
步骤1:熟悉主题
开始吧,让我们熟悉摄像头长什么样简单方法就是谷歌设计谷歌摄像头结果如下
显示各种摄像头 形状大小不一然而,它们有一些共同定义特征:
- 大镜头 中间体
- 闪电
- 按键让我拍
将这三个特征都写进设计中 因为它们能令摄像头图标 易为广大观众识别
步骤2:拆分
下一步,我们将开始寻找基本形状是否有圆形或矩形可用构建浏览几幅素描迭代帮助识别
发现下方
- 相机体可用圆矩形设计
- 透镜闪存圈重造
- 按钮可以是矩形
将建构成块
步骤3:开始构建
有了所有这些信息,我们准备移动计算机启动程序创建艺术板24x24px,命名它为Camera图标,并启动像素网格工作空间应该像这个
开始绘制基本形状 组成三个定义特征确保所有形状都像下例那样粘贴像素网格
万一像素不破网格,请查看边框设置确定边界设置到外或内不居中设置边框居中,风险归结像素网格外元素
组合各种形状使用布尔运算简化作业.表示想为镜头添加更多细节, 增加大圆环居中角:我们可以从相机体切出大圆圈,
第四步测试
保证我们的工作读得清晰点, 我们想测试它与同事或朋友分享工作问他们所见立即识别图标摄像头,或
第五步:提调上
完成图标前双试小数点看探长内的数字 并确认它们是全局
步骤6导出
保存并导出它分享世界
设计出简单相机图标 最小细节和划线常增复杂性设计风格过程和关键事物应始终相同
欢乐设计了解更多用户界面设计,请查看下列文章: