移动端应用内的图标规范有统一规范么

  在这个移动程序流行的时代,持续增长的应用程序经济充满了商业机遇。任何对应用程序设计感兴趣的人,将会喜欢上这里的50个独特的 Android 应用程序图标。这些例子中的图标能够让应用程序的设计更具吸引力。
您可能感兴趣的相关文章
您可能感兴趣的相关文章
本文链接:
编译来源:
阅读(...) 评论()选择登录方式:
阿里妈妈MUX文章分享
如何在移动设备上应用iconfont
随着IOS7普及,扁平化设计在移动设备的应用越来越多,iconfont在移动设备上应用的话题也越来越受前端工程师关注,下面是阿里妈妈MUX团队在移动平台应用的一些经验教程;&阅读全文iconfont的优点iconfont在web上的应用已经很广泛,如淘宝、一淘、sina、豆瓣等大网站都已经在自己的网站上应用了iconfont技术;它能有效的解决分辨率的问题,并且在应用的时候非常便捷,节省前端、设计很多重复改图、调色的工作。在移动设备上众多DPI设备更是一个困扰问题设计师、前端的大问题;一个app在适配高低版本iphone手机及分辨率众多的安卓设备的时候设计师需要设计很多版本的图片,而iconfont这种矢量图形就能很好解决这种重复设计的工作;&在Android中使用iconfont图标以下教程的icon均来自在Android设备中使用iconfont图标实例应用步骤step1:从iconfont平台选择要使用到的图标,并下载至本地;复制字体文件到项目 assets 目录;step2:打开从iconfont平台下载下来的文件,并在目录中打开demo.html,找到图标相对应的 HTML 实体字符码;step3:打开 res/values/strings.xml,添加 string 值;&string name="icons"&㘅 &#x35 &#x35 &#x35&/string&&step4:打开 activity_main.xml,添加 string 值到 TextView:&&&TextView& & android:id="@+id/like"& & android:layout_width="wrap_content"& & android:layout_height="wrap_content"& & android:text="@string/icons" /&&step5:为 TextView 指定文字:&import android.graphics.T&protected void onCreate(Bundle savedInstanceState) {& & super.onCreate(savedInstanceState);& & setContentView(R.layout.activity_main);& & Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");& & TextView textview = (TextView)findViewById(R.id.like);& & textview.setTypeface(iconfont);}&&图例&&在IOS中使用iconfont图标在IOS中使用iconfont图标实例应用步骤step1:将您从IconFont平台下载的字体文件(.ttf)添加到工程中;打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“step2:使用IconFont字体:UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];label.font =label.text = @"\U \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";[self.view addSubview: label];&&这里有两个地方注意下:&1、创建 UIFont 使用的是字体名,而不是文件名;2、文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如:"店" 对应的 HTML 实体 Unicode 码为:0x3439 & &转换后为:\U就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符&更多参数设置可以参考:
在swift 1.2 或者 2.x中 \U 报错 无法使用
window xp 中 iconfont显示不全
图片挺全的,要是像 iconmoon 来个离线端插件或者客户端 那就完美了
淘宝装修教程:/
不错 wordpress?
loading...移动应用中的图标使用技巧 - 简书
移动应用中的图标使用技巧
从计算机早期图形开始,图标的应用就一直有限。从人机交互上的应用上来说,图标可能比文本有更有优势,有以下几个理由:简单、直白、友好,他们能够代替一大段无聊的文字占位少,节省空间,而且随着屏幕越来越小,图标会非常受欢迎视觉美感,他们能增强设计的美感最后但同样重要的一点,大多数的移动应用都使用图标,对用户来说,图标已经是一种熟悉的设计模式了。忽略这些潜在的优势,在设计图标时,如果没有考虑图标的不足,也会导致一些易用性问题。在这篇文章里,我尽量总结在使用图标时遇到的问题,并据此提出一些解决技巧。你可以从利用这些技巧开始,让你的图标更好的服务于你。1.图标应该传达意义有时候设计师把功能隐藏在图标背后,实际上非常难以辨认,打破了图标最重要的特性——传达意义。根据定义,图标是一个事物或动作的形象代表。如果这个事物或者动作对用户来说不是很清楚,图标就失去了它的实际价值,而变成视觉噪音。有一些图标能够获得用户广泛的辨识,这些图标是主页、打印、搜索放大镜,如下:
Easily recognizable icons. Image credit:
但是除了这些栗子之外,多数的图标代表的意义仍然模糊两可,用户无法想到他们代表的意义。比如游戏中心 图标,是一组色彩丰富、透明的圆圈。这个游戏中心图标表示什么呢?它又是怎么和游戏联系在一起的呢?
Game Center icons fails to convey game concept.
来看另一个栗子:当谷歌决定简化gmail的UI而把一切隐藏在一个抽象的图标后时,就遇到了一系列的问题,比如“我的谷歌日历去哪了?”
Gmail user interface for desktop.
不管一个图标有多大意义,只要你知道它的目的是形象代表,对首次使用的用户来说,它就是一个完全不同的体验。假设用户了解抽象图形,这是设计时常见的一个错误。图标的主要目标是引导用户去他们想去的界面,因此,要想保证图标能达到这些目标,你要记住两个原则:利用5秒原则:如果你需要花长于5秒的时间才能弄清楚一个图标代表什么事物,那么这个图标就不能有效的传达那个意义。选择熟悉的图标:用户对图标的理解是基于之前的经验。用与你的竞争对手和已有平台经常使用的相似的图标,对你的用户来说更易于理解。2.使图标保持简单和简略大多数情况下,图标不是体现创造力的渠道。我不是说创新的图标不好,但是创新性太强且抽象的话,对用户体验有消极影响。如果你想掌握一些设计技巧,你可以借助其他的设计元素来传达你的产品信息,同时保持的图标简单、现代和友好性。每个图标都应该减小到最小规格,突出图标的代表的意义。简单的图标可以减少学习成本。好的图标能一眼就辨认出来,因为这些设计使每个地方都保持可读和清晰。3.包含一个可读的文本标签好的用户体验可以从很多方面定义,一种方式是要尽量不要让用户思考。意思清楚是一个伟大界面最重要的特征。你的图标应该帮助你的用户在不使用脑力时做他们需要做的事情。不过,有问题的图标也有可能是因为人们基于他们过去的经验 ,不同的事物联系起来。另一个常见的错误是假设手机用户为了弄清楚每个图标的作用,要把不同的图标都使用一遍。
The Apple Mail customization screen. Are you able to correctly identify what each icon is supposed to represent? Image credit: ia
事实上,用户经常因为使用不同的界面而胆怯,不愿意离开他们的舒适区。为了解决几乎所有的图标都面临的歧义的问题,可以在图标边上放一个文本标签。在用户点击你的图标时,你需要设置清楚用户的预期。
Here is the same choice of icons with labels. Labels explain icons, so adding labels improves usability. Image credit: ia
通过用户测试,我们也对图标标签vs无标签” 进行了测试“,我们发现:对有标签的图标,88%的用户能够正确的预测当他们点击图标时会发生什么。对无标签的用户,这个数值减少到60%。而且如果这个图标是唯一的且没有用标签,只有34%的用户点击时能正确预测将要发生的事情。有三点需要慎重考虑:对更复杂的动作或者抽象的功能来说,图像代表有它自己的缺陷。因此他们应该和一个合适的文本标签一起展示。在用户没有任何交互时,图标标签应该一直保持可视。标签和图片合在一起比单独存在更好。
Swarm app use popover hint in attempt to educate users.
4.让图标易于点击人们用手指进行交互。所以UI设计应该足够捕捉手指的操作。下图说明了成年人的手指平均宽度大概是11毫米,一个婴儿的手指平均宽度是8毫米,有的篮球运动员手指甚至比19毫米还长。
People often blame themselves for having “fat fingers.” But even baby fingers are wider than most touch targets. Image credit: Microsoft
给触摸屏的推荐的目标尺寸是7-10毫米。下面是对苹果谷歌平台导航的推荐:苹果推荐最小尺寸为44像素宽、44像素高。因为物理像素随着屏幕分辨率变化,苹果的像素具体尺寸是适应于苹果的320*480、3.5英寸的手机。谷歌标准如下:点击区域最少48*48dp。在多数情况下,他们应该被9dp分割,来保证平衡信息的可视性和可用性。
Clearance area. Icon: 24dp
Touch target on both: 48dp. Image credit: Material Design
Placement. Image credit: Material Design
需要考虑以下几点:在两个触摸目标之间有一个最小间距,主要理由是防止用户在点击过程中不小心触摸到其他地方。这种间距在平板上最小2毫米。5.不要使用平台确定好的图标如果你在搭建你的安卓/IOS app应用,不要把其他平台上的主题UI元素拿到这里来。平台提供的经典的图标是用来服务于大众功能,比如分享、新建文档或者删除。如果你正把你的app迁移到另一个平台,你应该使用他们图标的另一种表现。
Icons for common functionality from Android (top) and iOS (bottom)
6.测试你的图标你正在使用的图标需要大量的关注,一直要做可用性测试。一旦你习惯于一种交互,就很难用新鲜的眼光发现你的图标是不是有直观意义。因此,观察真实的、第一用户界面中你的图标的表现非常重要,因为它将帮助你决定你的图标是不是很清晰:测试图标的辨识度。问用户期望这个图标代表的意义是什么。避免设计图标时让人们迷茫他们做了什么,因为没有人会不厌其烦的寻找。测试图标的可记忆度。图标经常难以被记住。在告诉这个图标代表的意义之前,问问用户,看他们能否记住这个图标的意思。总结象征意义变成了UI设计的核心:它能增强或者破坏一个界面的易用性。跟其他用户体验设计方面一样,界面里的任何一个图标都应该服务一个目标。如果图标使用正确,图标能帮助你引导用户在不需要依赖太多的情况下,只完成一个任务。主要译自2015年5月 移动开发大版内专家分月排行榜第一2015年4月 移动开发大版内专家分月排行榜第一2014年9月 移动开发大版内专家分月排行榜第一
2015年3月 移动开发大版内专家分月排行榜第二2014年8月 移动开发大版内专家分月排行榜第二
2015年4月 移动开发大版内专家分月排行榜第二
2015年5月 移动开发大版内专家分月排行榜第三2015年3月 移动开发大版内专家分月排行榜第三2014年10月 移动开发大版内专家分月排行榜第三
2015年5月 移动开发大版内专家分月排行榜第一2015年4月 移动开发大版内专家分月排行榜第一2014年9月 移动开发大版内专家分月排行榜第一
2015年3月 移动开发大版内专家分月排行榜第二2014年8月 移动开发大版内专家分月排行榜第二
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。}

我要回帖

更多关于 app图标设计规范 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信