UI图标规则

用户头像
北京/设计爱好者/3年前/436浏览
UI图标规则
用户头像
亰墨

图标是强调对象特征的符号,是比其他语言更普遍理解的视觉语言。虽然占据狭窄的领域,但可以传达意义,因此被使用在多种领域

Usage

在UI设计中,图标主要用于应用程序图标和系统图标。用于显示品牌的应用程序图标和用户快速理解和行动信息的系统图标。

Style

图标的表现方式有Line, Fill, Colored和Image。根据图标使用空间的不同,其用途也不同,主要用于对其行为的反馈和提高关注度。

Line, Fill: 以基本的形式布置在设计中。

Colored: 我们经常使用它来反馈我们的行为,或者提高我们的关注度。

Image: 当你需要高度关注时使用。使用Colored或个性图标。

Properties

图标的构成要素有粗细,末端形状,阴影,重叠等,为了给用户识别图标时所必需的最小限度的变化而统一表现规则。

Thickness:数字屏幕使用1px和2px,因为它将无法表达的小数点四舍五入。(随着智能手机配置的提高,也会使用小数点)

End & Join:有棱角的末端,圆形的末端,为了表现柔和,经常使用圆形。

Radius:同样的规则用于End、Join和一致性同样的规则也常用于柔和的表达

Grid

眼睛用视觉网格和轮廓线区分图标。视觉网格是指在相同大小的区域内,各种形状的图标具有相同重量和重心的网格。几何学解体的对象,按照由圆,正方形,矩形,正三角形组成的网格来制作。

Scale

为了在各种环境中进行良好的管理,8px, 16px, 24px, 32px等8的倍数作为基础线使用。主要在移动狭窄领域使用的系统图标,也可以作为4px倍数使用,以保证其通用性

Clarity

设计成用户能够快速理解的最小要素。你可以把它变成你熟悉的形状,如果你需要,你可以使用简单的隐喻。复杂的图标可能无法理解或需要很长时间才能理解用户的意思。

Detail

图标是最重要的目标,为了“快速传递信息”,最好在狭窄的领域内将细节最小化。特别是进入狭窄领域的系统图标,最好只留下能知道传达内容的最低限度的要素,去除其他装饰性要素。

Consistency

在一个服务中,功能相同的图标会以相同的风格显示。Fill和Line可以根据不同的语境同时使用,但是在相同的语境中使用的图标会显示相同的属性。

Perspective

尽可能将远近制作成从正面看到的模样。实际上数码设备是平面的,主要用于平面卡片空间上的图标如果感觉到空间感,就会感觉到认知不协调。虽然会有一定的用途,但我们不提倡

Optical Correction

平面设计工具的局限性,有时需要视觉校正。对于下面播放按钮,图形工具会根据层的末端进行排序。但实际上,三角形的重心和圆或四方形不一样,所以需要调整。

10
举报
|
29
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
手表表盘UI系列
户外旅行飞机情侣假日出行
【新年UI图标】相机icon
UI界面 组件
【新年UI图标】活动icon
【新年UI图标】体育icon
科技医疗透明柜UI界面设计
高级表盘系列UI源文件
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
高级感金属拟物 UI设计组件库
盲盒APP UI设计
智能家居中心 简约 UI设计组件库
UI应用平面图标
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
新能源APP应用UIKit
钱包ui模板
【新年UI图标】积分icon
【新年UI图标】银行卡icon
我的钱包-UI界面设计-app
【新年UI图标】美食icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
你可能喜欢
相关收藏夹
大家都在看
登录注册