有过软件启动图标的设计经验的设计师,经常会遇到这样一个问题: 设计出的单枚软件启动图标看起来很炫,但是放到电子市场上后,却不太受用户的喜爱,用户点击率很低。

怎样从视觉设计的层面,去提升app软件启动的图标点击率呢?

其实,我们在设计软件启动图标的过程中是有一定共性的设计方法的,这些能够帮助我们提升图标的点击率。

1. 运用视觉隐喻的同时,需要保证图标的可识别性。

如图一,这里很多图标设计是没有经过仔细思考而设计运用的。我们通过App商店去查找,会发现有非常少的app图标的设计是吸引眼球的。 例如, "绕口令"的搜索,你会看到这样的图标分类:

图一的第一行第五个图标,表现方式是将绕口令的英文文字写在渐变的图标背景色块上,视觉效果表现很平,没缺乏设计感。

为了吸引用户去使用app软件, 我们必须设计出吸引用户眼球的图标!

我们可以运用隐喻的设计表现手法,传达给用户"绕口令"的信息,让用户看到图标能够感知、想象、理解图标的意思。图一右侧被放大的图标,在这几种图标设计中,比较吸引用户去使用。它的设计采用的就是隐喻的视觉表现手法,让用户理解绕口的含义,再加上有趣的形象设计,让用户容易理解图标的含义,这样的精致隐喻的图标容易在第一时间吸引用户的眼球,受用户的喜爱。

如图二,这是星巴克的一款应用程序图标设计。星巴克的标志设计是非常好的,但是,星巴克的消费卡的app图标设计中星巴克的标志比较小, 在App Store上看这枚图标设计,圈形的星巴克标志是难以辨认的。其实设计时,应该放大星巴克的商标,提高标识的可识别。

因此,我们在使用视觉隐喻的手法去表现图标的同时,需要确保图标设计的识别性。

2.分析同类app图标,整理设计思路注重图标创新。

我们在itunes里搜索效率软件会发现很多相似的图标。如图三所示,这里面哪些图标会吸引用户的眼球呢?过目之后,我们会发现,那些有层次设计感、和特定质感的精致图标会吸引用户关注。

设计app图标的另一种方法是增加图标的层次感设计和质感表现。设计好图标后,放在同类别app图标中,去审视自己设计的图标是否能够抓住用户的眼球。

下面是图三中的几个能够第一时间抓住用户眼球的图标:

2Do -这个图标就像一堆文件有序处理的感觉。缝制的皮革质地和洁净便条形成质感的对比,图标整体质感表现细腻饱满。

Put Things Off -是一个很好设计。设计者经过仔细的思考,表现方式与众不同,富有创造性和趣味性。图标采用文件箱子和"前进"的箭头的视觉元素表现,表达事件处理的迅速效率的感觉;色彩上,运用了纯度很高的鲜亮的色彩去设计,能够抓住了用户的眼球,让用户很快的理解了这款软件的功能特性。

Taska -图标看起来像一堆办公桌整齐地堆放在一个文件。 视觉表现上没有给人留下很深刻的印象,但是这个图标画的非常精致,纸张的堆积效果表现出了图标的层次感,背景木材纹理的效果表现提升了图标设计的质感。

3. 运用软件界面中的图形元素,体现图标设计的连续性。

有一种设计方法,可以确保图标的表现和软件具有连续性。方法是启动图标的设计运用和应用程序界面图形相匹配的设计元素。 Expenditure是一个很好图标设计例子,非常准确地描述了跟踪功能的应用程序。

4.采用用户好奇的图形元素设计,抓住用户的好奇心。

用高雅的轮廓、优美的线条去表现一款瑜伽应用程序图标。唤起用户的好奇心,吸引用户使用。

5.突出品牌,抓住用户眼球。

如果你正在设计一个知名品牌的应用程序,请恰当使用它的品牌LOGO! 生活中,这些品牌标志已经留给用户很深刻的印象,非常容易从众多app的图标中胜出。因此,在设计知名品牌的app启动图标时,应该充分使用它的品牌LOGO。

不管你想设计成什么,不要浪费了一个知名品牌的现有的元素!

例如,浏览几个图标,是很容易被辨认的:

但是,图标的设计中,如果你没有突出知名品牌的元素,会是什么样子呢?如图六的图标设计,在图七的众多的app图标界面中,图六的这些图标显得很无力,无法与其他图标竞争。

如果,调整图标设计的局部,改进设计:

我们把新的图标放在界面中,试看效果:

通过思考和实验,调整设计,让品牌特性抓住用户的眼球。

6. 设备测试预览图标的效果,微调色彩或亮度达到最佳效果。

采用在设备上测试你的图标设计,是一个很好的方法。

Photoshop里查看或者iphone模拟器里查看效果是不够的。图标在实际设备上的视觉效果和电脑上是不同的。 为什么呢? 有几个原因:

• 电脑显示器的色彩和亮度与触摸屏移动设备不同。

• 并非所有的触摸屏显示器是一样的。 例如, iPhone屏幕质量高于iPod触摸屏的显示质量。

因此,设备测试是很有必要的。

7.多场景测试,保证图标设计的上线质量。

App的商店有:

• itunes电脑商店;

• iPhone 不同分辨率的商店;

• itouch 不同分辨率的商店;

• iPad平板电脑商店。

这意味着图标的应用环境有多种,因此在图标上线前,设计师需要在多种图标的应用场景中进行设计测试。尽可能做到在多种商店场景下,在同类产品的用户查看界面,都能吸引用户的眼球。

以上几点app软件图标设计的方法你在设计时都用到了么?没用过的方法可以尝试使用。

这些共性的图标设计方法能够帮助设计师控制图标设计的效果和市场中的用户体验,能真正的从用户的角度去设计一枚图标,能提升你的app软件的用户体验,从视觉设计的角度去提升软件图标的用户点击率。

如何让你的App图标杀出重围?相关推荐

  1. app图标圆角角度_?APP图标造型分析

    规范布局强化设计空间 文/祝艳妮 单从视觉效果上看,图标都有一个标准尺寸的外形,借助图标的规范模版,我们方便控制图形大小.空间安排.结构比例.移动终端体积小,一般是近距离观看.适应这一使用特性,APP ...

  2. UI培训教程分享:APP图标设计的6种风格都有哪些?

    在从事UI设计师这个岗位的时候,相信大家会经常遇到关于产品设计的工作,尤其是APP图标这块,在日常工作中,常见的图标风格主要有渐变风格.剪影风格.长投影风格.卡通风格.轻质感风格和拟物风格6种.今天小 ...

  3. UI设计培训分享:app图标设计要遵循哪些原则

    APP图片设计是UI设计工作中经常会遇到的,一个好的APP产品,图标的设计是非常重要的,本期小编为大家分享的UI设计培训教程就是app图标设计要遵循哪些原则?来看看下面的详细介绍. UI设计培训分享: ...

  4. UI设计APP图标设计规范介绍

    ​ UI设计所涉及的内容是比较多的,其中关于APP图标的设计就是常见的一种,UI设计师需要掌握不同的UI设计规范.今天小编就帮助大家了解下移动端APP图标设计规范: 很多设计师以为UI设计就是设计图标 ...

  5. 乐视视频 App 图标改为“欠 122 亿”,网友:我在别家分红包,却在你家随份子!...

    作者 | 苏宓 出品 | CSDN(ID:CSDNnews) 不知从何时起,春节成为了各家互联网公司的"高考"以及营销大比拼的另一个"战场". 这不在 2021 ...

  6. (0042) iOS 开发之iOS10.3新特性:如何动态更换APP图标

    iOS新特性: iOS10.3教你如何动态更换APP图标? 1.iOS 10.3 开放了更换 app 图标的 API,核心方法是下面这个: [[UIApplication sharedApplicat ...

  7. Android自定义app图标,自定义app图标(Icon) - Cordova中文网

    自定义图标(Icon) 这节将介绍如何为不同的平台配置一个app的图标.对启动画面(splash screen)的支持已经被移动到Cordova自己的插件中了.配置选项可以在Splashscreen插 ...

  8. Xcode更改ios app图标

    在XCode中upload到App Store时会提示没有App icon会无法传过去构建版本. 修改ios app图标的位置: 1.找到Xcode下的General 2.往下拉找到App Icons ...

  9. 快速设置 App 图标 - iOS/Android

    icon.wuruihong.com/ 问设计要一个 1024 大小的图 丢到上方的网站中 快速帮你生成 iOS.Android 的App图标 然后直接整个文件拖到项目文件夹中就行 iOS 这里图标的 ...

最新文章

  1. 彻底搞懂 Git-Rebase
  2. 使用Notepad++ 删除非连续的列内容操作实例
  3. JavaScript高级程序设计20.pdf
  4. 网站图片下载 Python
  5. 【博弈论】【SG函数】bzoj1777 [Usaco2010 Hol]rocks 石头木头
  6. Docker实践(四)Dockerfile
  7. epoll模型与select模型的区别(宿管大妈的例子)
  8. 【转载】为什么要用黑莓?
  9. 从 阿西莫夫机器人三大定律 谈起
  10. 阿里云边缘计算又要放大招了,7月24开发者大会现场揭秘,邀你参加!
  11. 怎么使用QQ音乐api搭建个人音乐站点
  12. 领扣(LeetCode)最长和谐子序列 个人题解
  13. python画太极八卦图_先天太极八卦图的唯一正确画法
  14. BLDC无刷直流电机之电机驱动的控制原理示意
  15. C语言实现FFT算法
  16. java实现简单窗口小游戏“扫雷”
  17. Android动画之AnimatorSet联合动画用法
  18. Java多线程实现跑步比赛【比赛详解】
  19. 02-分类算法:knn、朴素贝叶斯、决策树和随机森林
  20. 快速掌握 jQuery 操作 HTML 节点

热门文章

  1. 【论文理解】DQN:Playing Atari with Deep Reinforcement Learning
  2. Java8学习笔记:计算两个时间的间隔及相隔天数、秒数等
  3. 软件分析——数据流分析2
  4. hpv(宫颈癌)疫苗科普
  5. 腾讯云云硬盘快速入门-创建云硬盘
  6. 服务器端 PHP 压缩文件,客户端JS解压缩
  7. 通过PS1设置命令行提示符
  8. linux操作系统的五大支柱,Linux 的五大支柱
  9. 9、数码相框编写程序之框架分析
  10. vant-weapp