阅读更多

13顶
0踩

Web前端

转载新闻 一枚app图标的设计文化

2011-07-21 18:17 by 见习记者 lihuapi 评论(2) 有8364人浏览



启动图标是每一个iOS中应用软件的关键组成部分。 它能传达给你应用程序的基础信息,并能够给用户带来第一印象感受。 它是一个非常重要的软件入口,能直接引导用户下载并使用应用程序。它的重要性在这个智能手机时代被大家所认知。

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

怎样从视觉设计的层面,去提升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软件的用户体验,从视觉设计的角度去提升软件图标的用户点击率。

  • 大小: 38 KB
  • 大小: 9.1 KB
  • 大小: 65.2 KB
  • 大小: 14.1 KB
  • 大小: 12.4 KB
  • 大小: 55 KB
  • 大小: 79.8 KB
  • 大小: 11 KB
  • 大小: 79.8 KB
  • 大小: 28.4 KB
  • 大小: 115.5 KB
  • 大小: 30.5 KB
  • 大小: 117.4 KB
  • 大小: 58.7 KB
来自: baiduux
13
0
评论 共 2 条 请登录后发表评论
2 楼 huangwei_joy 2011-07-22 12:23
写的好,每个环节都是那么重要!
1 楼 bewithme 2011-07-22 09:23
太高端了,一般人不懂。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 一个C#+ASP.NET+XML开发的WEB工作流程图组件源码

    一个优秀的的WEB流程图组件,VS2005+C#+ASP.NET+XML开发,含组件源码!

  • 基于多输入模型及句法结构的中文评论情感分析方法

    点击上方蓝字关注我们基于多输入模型及句法结构的中文评论情感分析方法张宝华1,张华平1,厉铁帅2,商建云11北京理工大学计算机学院,北京 1000812中央军事委员会政法委员会,北...

  • 山东大学2019级软件工程应用与实践——基于人工智能的多肽药物分析问题(五)

    2021SC@SDUSC 基于人工智能的多肽药物分析问题 主题:肽与HLA分子结合预测研究(5) 论文学习 循环神经网络 用于训练的模型架构由三层双向门控循环单元(BiGRU)和一个注意力层堆叠而成。GRU是RNN的一种变体。与RNN类似,GRU具有循环隐藏状态,以此处理可变长度序列,该状态的每次激活都依赖于前一次的激活。GRU和RNN的区别在于循环隐藏状态的更新,这是克服训练模型中梯度消失或爆炸以捕获长期依赖的核心部分。具体而言,GRU建议推导每个时间步 t 的隐藏状态 hth_tht​ 的向量表示,如下

  • 武汉大学计算机学院 情感分析,基于神经网络模型的产品属性情感分析

    [1] CHEN L, WANG W B, NAJARAJAN M, et al. Extracting diverse sentiment expressions with target-dependent polarity from twitter[C]//Proceedings of the Sixth International AAAI Conference on Weblogs and...

  • 一枚app图标的设计文化(译文)

    一枚app图标的设计文化(译文)评论[25] [2011-07-21|视觉设计] 启动图标是每一个iOS中应用软件的关键组成部分。 它能传达给你应用程序的基础信息,并能够给用户带来第一印象感受。 它是一个非常重要的软件入口...

  • 向阅读致敬!微信读书产品设计策略推导

    全文11250字,拆解页面80个,3大理论设计模型,100多个产品设计细节,通过对【微信读书】的设计策略推导,为你提供一份读书类APP产品解题宝典!一、序言1.1 适合人群UI/交互设计师跳出执行层的思维,从产品设计策略...

  • 那些最聪明的产品设计TOP20

    一、谷歌CardBoard 2.0 如果想要体验虚拟现实,那么你只需要几样东西就可以了:一个高分辨率的屏幕,传感器,镜头,...在2015年的谷歌I/O开发者大会上,展示了最新款的谷歌CardBoard 2.0设计,可以支持屏幕更宽

  • 数字藏品APP系统开发|数字藏品系统引见

    数字藏品能够在区块链网络中标志其具有者并追溯其后续流通,包括但不限于数字图片、音乐、视频、电子门票、数字留念品等方式。简单来说,数字藏品 APP 系统 开发就是经过区块链技术确认权益,能够追溯和流通的数字...

  • C#.NET+XML流程图组件

    .NET+XML流程图组件(C#): 对NET与VS的支持 可将流程图存为XML文件 不只是流程图开发,任何种类的图形设计器都可以开发 内置大量的数据结构算法 功能非常强大都是2D模型,不支持3D建型模

  • XML绑定到Table

    XML描述的数据是可以绑定到表格上的.下面是一个例子:HTML代码如下:html>script>...function test()...{    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");    xmlDoc.async="false";    xmlDoc.load("cd_catalog.xml");    var node

  • 菜谱分享APP/基于android菜谱分享系统

    菜谱分享APP是一个使用Hbuildex作为手机客户端和后台服务系统的开发环境, MySQL作为后台数据的管理的Hbuildex手机APP。它主要满足了人们只要动动手指头就可以获取自己所喜欢的菜谱信息,可以跟随菜谱在家亲自下厨做...

  • UI设计规范

    规范篇 首先你需要学习的是三大平台的...需知,他山之石可以攻玉,在这些规范中都有一些理念是通用的,学习别家平台的设计可以为本平台的设计提供新思路。 苹果人机界面指南 谷歌 Material

  • 智能电子校徽方案/案列/APP/软件/硬件/项目

    校徽,即学校徽章,是一所学校的象征和标志。在校园里,校徽是一种很普遍的消费产品,一般校徽用于当作佩戴的名片使用。随着电子技术的发展,学校认识到实现数据化管理是一件非常重要的事,校园一卡通被广泛使用。...

  • Google Glass界面设计指南分析

    Google前几天公开了SXSW大会上演示Google Glass ...我自己大概将其理解为砍掉手机上所有的APP图标入口,只剩下Dock上系统内置的电话短信等主功能,然后把通知系统放到更加重要的位置。接下来和大家分享一些我自己的

  • NFT行业周报——2022年5月第一期

    NFT行业周报5月第一期

Global site tag (gtag.js) - Google Analytics