安卓篱笆

  • 400-800-1234
  • 为您定制专业的垂直门户
搜索
猜你喜欢
查看: 2661|回复: 0
打印 上一主题 下一主题
收起左侧

UI设计中应用图标设计原则

[复制链接]

308

主题

307

帖子

1097

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1097
跳转到指定楼层
楼主
发表于 2018-1-4 11:26:55 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,,享用更多功能,让你轻松玩转本站。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
应用图标是一个用户对你的应用的第一印象,用户可以透过应用图标就能在心中做出评判,这个应用是否精美和友好。很大程度上来说,一个好的产品应该具有一个好的应用图标,而一个好的应用图标应该清晰地传递出产品的内涵,能让用户体验由外到内都和平统一。因此,设计师在设计应用图标时需注意以下8大原则。

1.可识别性

优秀的图标设计的首要前提是表意准确,能让用户一眼就识别出它所代表的含义,能够贴近用户心里的隐喻。因此,可识别性是商标设计的第一重要原则。自从扁平化设计风格成为流行趋势开始,拟物化图标逐渐消失,取而代之的是弱化质感后的扁平图形。这其实对设计提出了更高的要求,原来我们可以用很具象的图形来表现,现在只能通过抽象的图形来传递正确的信息,在iOS中,系统音乐应用的图标是非常好的设计范例,而游戏中心的隐喻性就很差,用户很难从几个彩色的气泡中读懂它的含义,无法从中获得相关的信息。下图前三个应用用户能很轻易地识别它们的产品属性,最后一个应用图标虽然带有鲜明的个性特征,但单从视觉上很难传递给用户。相机、拍摄、照片'等信息。

2.差异性

App Store有数以百万的应用,搜索常见的产品名称可以出现几十上百个结果,它们许多的应用图标都大同小异。要想让你的应用从众多的同类产品中脱颖而出,设计师在进行商标设计时,必须在突出产品核心功能的同时表现出差异性来,避免视觉同质化。

3.延续产品界面

从产品界面中提取设计元素作为应用图标的参考依据,让用户通过应用图标一眼就知道它是什么类型的产品、主色调是什么、设计语言是什么、里面的界面长什么样等,这是最完美的设计方法。在同类产品中,Clear称的上是最佳的范例,它的应用图标设计不但带有强烈的隐喻,同时还延续了产品界面的设计风格,简单的形状通过鲜艳明亮的色块叠加出来的效果使得Clear独一无二。

4.谨慎白色背景

有越来越多的设计师为了追求极致的美感,将应用图标设计成白色背景。无可否认,从单个视觉上来看使用白色背景的图标即突出了主体,也显得非常简洁。但是,考虑应用到不同的桌面壁纸上,白色背景的图标容易淹没在其他色彩鲜亮的图标里。尤其是当手机壁纸是白色时,白色背景的图标呈现出釆的画面就如同像是Android不规则的图标。在本章节开始我们就提到不规则的应用图标排列在一起时,画面会变得非常不整齐。

5.突出品牌

在设计知名品牌产品的应用图标时,应充分利用它们的品牌Logo,这些图形已经在用户心里留下深刻的印象,非常易于识别。例如,QQ在长达十年的时间里一直使用一只呆萌的小企鹅作为品牌形象,已经深深印刻在用户心里,不管是听到、看到企鹅总能第一时间想到QQ.即使是去掉企鹅形象所有的装饰,只保留简单的剪影图形,用户也不会错认。这就是品牌的魅力,在应用图标设计时也应该好好利用,延续品牌的生命力。

6.色彩鲜活

iOS 10人机界面指南中提供了一套设计规范,其中阐明了色彩搭配,内置的应用程序选择使用那些看起来更具个性的,纯粹又干净的颜色,电话短信使用绿色、天气和浏览器使用蓝色,备忘录和提示使用黄色等。设计应用图标时使用明亮的色彩,会让你的应用更能抓住用户的注意力。

7.使用栅格线

设计师在设计应用图标时应随时使用IOS栅格线作为设计依据,它能让你的设计与IOS系统保持和平统一。采用栅格线方式进行设计的图标越多,在界面中就能更好的彼此匹配,界面中图标的整体感就越强。

8.多场景测试

我们最终设计的应用图标会以不同的分辨率出现在手机主屏幕、AppStore和界面等环境中,设计师需要在多种图标的应用场景中进行设计测试、尽可能完美适配。在App Store。图标尺寸为1024 ×1024 px,意味着设计师可以有很大的发挥空间,可以描绘许多细节。而在手机主屏幕,图标尺寸为120 × 120 px,当大回缩放成为小图,一些细节就会丢失,使得画面变得模糊。这时就需要设计师对小尺寸图标进行细微调整,去除不必要的装饰元素,以确保应用图标在小分辨率场景下也能保持清晰的辨识度。做完这一切,还必须在移动设备上测试你的设计,如果是在Photoshop中设计绘图,可以连接PsFlay投屏到手机上进行确认。
回复

使用道具 举报

*滑动验证:
使用 高级模式(可批量传图、插入视频等)
您需要登录后才可以回帖 登录 | 立即注册

关闭

站长推荐上一条 /3 下一条

快速回复 返回顶部 返回列表