集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

成都ui设计培训班教程:如何提升图标的点击率

发布者: 成都达内     浏览次数:     发布时间:2018-11-13 10:51:52

图标的设计决定了下载量,如何提升图标的点击率成为设计师十分关心的问题。下面的七点设计师心得分享给APP图标设计的小伙伴。如何提升图标点击率...

  成都ui设计培训班教程:如何提升图标的点击率

  图标的设计决定了下载量,如何提升图标的点击率成为设计师十分关心的问题。下面的七点设计师心得分享给APP图标设计的小伙伴。如何提升图标点击率

  有时候,我们设计出的单枚软件启动图标看起来很炫,但是放到电子市场上后,却不太受用户的喜爱,用户点击率很低。该怎样去提升APP软件启动的图标点击率呢?糟糕的应用图标是无法吸引用户的重要原因之一。

  启动图标是应用软件的关键组成部分。它能传达应用程序的基础信息,并能够给用户带来第一印象感受;它也是一个非常重要的软件入口,能直接引导用户下载并使用应用程序。

  怎样从视觉设计的层面,去提升APP软件启动的图标点击率呢?其实,我们在设计软件启动图标的过程中是有一定共性的设计方法的,这些能够帮助我们提升图标的点击率。

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

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

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

  成都ui设计培训班教程

  为了吸引用户去使用APP软件,设计师必须设计出吸引用户眼球的图标。

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

  再看下面的,这是星巴克的一款应用程序图标设计。星巴克的标志设计是非常好的,但是,星巴克的消费卡的APP图标设计中星巴克的标志比较小,当在下载时看到这枚图标设计,圈形的星巴克标志是难以辨认的。其实设计时,应该放大星巴克的商标,提高标识的可识别。

  成都ui设计培训班教程

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

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

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

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

  如何提升图标的点击率

  从上图中,我们发现以下几个能够第一时间抓住用户眼球的图标,如下所示。

  如何提升图标的点击率

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

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

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

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

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

  成都ui设计培训班

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

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

  成都ui设计培训班

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

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

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

  如下所示,浏览这些图标是很容易被辨认的。但是,图标的设计中,如果你没有突出知名品牌的元素,就会出现在众多的APP图标界面中,前面的那些图标显得很无力,无法与其他图标竞争。

  成都ui设计培训班教程

  如果调整图标设计的局部,改进设计,我们把新的图标放在界面中,试看效果,我们发现通过调整设计,品牌特性更能抓住用户的眼球,如下所示。

  成都ui设计培训班教程:如何提升图标的点击率

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

  在你制作了一个图标之后,不要忘了在各种颜色的壁纸上测试图标的显示效果。另外也不要忘了将你的图标放在文件夹中测试一下显示效果。最后,在用户的设备上,图标会以不同尺寸出现,例如在AppStore中,图标的尺寸最大;在桌面上,图标的尺寸会缩小;而在通知栏中,图标的尺寸最小,你需要确保你的图片在所有尺寸下看上去都很舒服。

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

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

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56