相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

设计师必学的UI设计技巧

妮子发布于:2018-11-26 09:04 |原作者: 郗鉴|
妮子
浙江省 绍兴市 GUI设计师
发私信 + 关注
简介: 产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标,用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如ofo的产品图标是字母ofo的组合,同时也是一辆自行车,这暗示了这款产品是共享单车的APP; ...


LOWPOLY风格

我曾介绍过LOWPOLY这种设计风格,这种风格如果应用在产品图标上同样非常抢眼,因为用户的手机上可能安装了很多APP,那么第一眼扫过去一定会注意到最亮眼的图标。而LOWPOLY因为本身造型的独特性非常吸引眼球。当然LOWPOLY也有它的问题,比如容易让图标失去细节等,所以很多产品图标都是使用LOWPOLY作为图形的背景。

潮自拍:潮自拍使用了暖色邻近色渐变的LOWPOLY作为背景,前景使用了一个很潮的S。

潘通色:潘通色本身的最大特征就是色卡,所以使用了LOWPOLY的形式。

美妆相机:通常LOWPOLY的形式是方块,而美妆相机使用了三角作为基础元素,很特别。

人人:人人的产品图标使用了不同的矩形斜度45°,增加了设计的速度感。

设计师必学的UI设计技巧 飞特网 设计理论

潮自拍、潘通色、美妆相机、人人的产品图标

微渐变风格

微渐变也是非常常见的表现手法。在拟物被扁平替代以后,我们会发现无法表达空间上的Z轴。所以用轻微的渐变表现图片的深度非常流行。我认为微渐变可能是众多图标设计风格中最有竞争力的一种。

每日优鲜:每日优鲜在背景上用了很多炫彩的圆球,由于促销时段在原有图标上增加了一个双十一的小标识,在手机中非常抢眼。

陌陌:陌陌图标如果设计成扁平你还会注意到它吗?使用线性图标会使得图标厚度感不够,而微渐变可以非常好地解决这个问题。

全民K歌:使用了紫红色的渐变来塑造一只鹦鹉,如果遇到其他使用场景可以使用扁平版本,这样会让产品图标的使用更加灵活。

Mindnode:这款脑图软件的产品图标使用了三组邻近色的渐变,同时使用了非常微妙的阴影。

设计师必学的UI设计技巧 飞特网 设计理论

每日优鲜、陌陌、全民K歌、Mindnode的产品图标

卡通风格

卡通风格的产品图标会让用户更有好感,所以我们可以为产品设计一个可爱的卡通角色。好多决策者会认为卡通是一种低龄的审美,其实是错误的。卡通可以说是一种通吃的风格,比如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。而卡通本身有不同的风格,比如拟物类的卡通、扁平类的卡通等,也会给人不同的感受。所以如果我们的产品要使用卡通作为产品图标,最好以目标用户群的喜好作为标尺。

开心消消乐:开心消消乐是一个休闲游戏,游戏类APP的产品图标通常是使用拟物风格,这样可以最大地吸引玩家的注意力和兴趣。

映客:映客是直播APP,通常用户年龄不是很大,所以使用了一个很可爱的猫头鹰作为产品图标。

Waze:Waze的产品图标不仅可爱而且突出了Waze的地图查找功能。

BOO!:BOO!是一个儿童社交产品,用户比较低龄,所以更适合使用可爱的卡通作为图标。

设计师必学的UI设计技巧 飞特网 设计理论

开心消消乐、映客、Waze、BOO!的产品图标

图标的网格和参考线

如果我们想设计一个小图标,那么我们可以把画布放大到400%来设计。同时可以使用网格和参考线来作为我们设计的辅助。网格在很多软件里都有,比如在Illustrator中点击视图 > 网格 即可开启网格了。参考线模板则需要下载第三方设计的模板,比如Material Design的参考线模板就有正方形、圆形、圆形和长方形结合等不同形式。如果对齐模板中的形状,即可得到面积相等的长方形、正方形、圆形。这对我们构建视觉上面积相等的图标很有益处。

设计师必学的UI设计技巧 飞特网 设计理论

网格和参考线

设计师必学的UI设计技巧 飞特网 设计理论

不同形状的网格布局

设计师必学的UI设计技巧 飞特网 设计理论

在网格的辅助下可以设计出大小均衡的图标


尺寸

苹果启动图标尺寸

苹果需要很多尺寸的图标用在不同的场景上,比如说在网页端打开iTunes会使用512px的大图标,而在手机、iPad桌面上的图标大小也不同。除了尺寸不同,这些图标的圆角也有不同的数值。为了简化这部分的难度,苹果为开发者提供了模板,有了模板就不用记那么多东西啦。苹果官方HIG下载的这套资源中,有Template-AppIcons-iOS这个文件,这个文件提供了PS、Sketch、XD等不同格式。我比较推荐使用PS的格式。打开这个文件,用我们自己设计的启动图标替换掉任意智能对象里的内容(智能对象都是一个变出来的)。那么打开智能对象就是一个1024x1024px的矩形画布,把我们的产品图标放在这里,保存这个智能对象再关闭它就可以了。这时,你会发现所有尺寸的图标都变成了我们的图标。然后我们把背景隐藏,切出这些图标即可。如果是AI完成的产品图标可以直接Ctrl+C然后在PS智能对象中Ctrl+V复制过来就行。

设计师必学的UI设计技巧 飞特网 设计理论

Template-AppIcons-iOS

安卓启动图标尺寸

安卓启动图标同样需要很多尺寸,主流是需要:1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px这六种。我们提供给程序员的是直角的矩形,然后程序员通过代码进行切割变成圆角图标。在这里我也做了一个智能对象的模板送给您,只要替换其中的智能对象图像,换成您的1024x1024px图标保存即可。

设计师必学的UI设计技巧 飞特网 设计理论

安卓图标模板

11927

好评
27

差评

刚表态过的朋友 (11954 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

妮子
浙江省 绍兴市 GUI设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计