如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps
在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标.
移动端的设计变的越来越复杂。原因在于多样的屏幕尺寸与不同的分辨率。 Native版APP几乎无法提供像素级别完美的视觉体验。
当我们设计APP界面中各种图标时,我们不得不面临两方面,好的一面是,使用真实的icons,即使用像素设计出吸引用户的交互界面,这样的交互界面能更好的帮助用户理解和使用你的APP,不太好的一面就是繁琐乏味的“重复工作”。一旦你的杰作完成了,你得开始切片、组织、优化、适配等工作,在开发人员将你的视觉设计应用于不同设备中时,这些工作始终惯穿于每个项目。
基本上我非常爱用像素图标,但我最近发现我花太多时间在清理文件夹,寻找不同规格的目标设备。尽管市面上有众多的插件帮你从单个图片源导出成多种方案的图标与图形,追踪优化各种分辨率、操作系统下图片的优化是项可以避免的苦差事儿。让我们看一看基于矢量的图标字体(icon fonts)
利用Fontello网站的图标字体生成器,我们分分钟就可以生成一组图标
Friends with benefits (炮友?)
当在设计产品UI时,我们许多美工都尽量不使用像素图片,而更倾向于使用矢量图,是有各种原因的。举个粟子,在一个需要快速变更需求又要求保质的的团队中工作。保持文件大小的可维护,以及让UI能适应各种尺寸屏幕,这些都是矢量图形应用时的小功能。矢量图形能让你在一个长期的项目不会抓狂的渡过。

可缩放性(Scalability):
尺寸(Size ):

Using icon fonts on iOS
在IOS中使用字体图标

- @property (weak, nonatomic) IBOutlet UILabel *iconLabel
现在你就能通过代码来控制label组件了,通过编辑ViewController(.m后缀的文件)设置label。在viewDidload方法内加入以下几行代码,就像下面那样
- ( void)viewDidLoad{
[super viewDidLoad];
- [iconLabel setFont:[UIFont fontWithName:@"fontello" size:]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}

- iconLabel.textColor = [UIColor redColor];
- iconLabel.shadowColor = [UIColor blackColor];
- iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);
有许多效果可以使用。一些相对来说比较复杂,但所有文本效果都通用。动画或任何复杂的操作只要你能想到的都可以做了
Using icon fonts on Android
在Android中应用字体图标

- <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />
通过使用ID,我们能够在APP内任何地方操作TextView。现在你可以切换到MainActivity.java文件添加一些代码来加载icon font了。在MainActivity内有一个方法名为onCreate的方法。加载和应用icon fonts都在此方法内,如下
- TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");
和上面的IOS例子很像,通过引用到label组件,我们告诉Android应该使用哪个自定义字体到TextView上面。之后几行使用Unicode字符编码,这次以JAVA方式而已。运行程序后你就可以看到你的icon在Main Activity的View上了
在应用成功后,你可以根据你的需要操作icon了。Android UI构建通常由interface builder或组织XML文件来实现,要添加一些效果,只要回到Main Activity的XML部分找到添加了Label ID的地方,添加一些代码就可。例如添加以下代码会让你的icon变大,带点透明的红色,并伴有阴影。
- android:id="@+id/iconLabel"
- android:textSize="120dp"
- android:textColor="#ccff0000"
- android:shadowColor="#99000000"
- android:shadowRadius="2" />
有很多的效果可以应用。就像在IOS中一样,动画或者复杂的操作都由你掌控了。最大的好处是自定义的icon fonts可以广泛的适配各类操作系统。任何支持自定义icon fonts的平台都允许你使用全新的这些效果
使用字体编辑器,你能优化现存的icons或解放你的思想让你创建出自己的杰作
Wrap up
总结一下
译者的话
要应用字体图标,首要的条件还是要拥抱扁平化的设计
- 让设计从技术实现上更简单
- 苹果,谷歌,微软,都相继推出扁平化或类似的设计语言
- 在手持设备或车载设备上,扁平化的大色块设计更容易识别与操作
- HTML5实现扁平化的UI性能更好
- 扁平化大色块的设计,使用PNG图片拥有更好的压缩比率,图片文件更小
英文水平有限,凑合着翻,全当自我学习欢迎交流学习
转载处请注明:博客园(王二狗,池中物)willian12345@126.com
如何在移动端app中应用字体图标icon fonts的更多相关文章
- 如何在移动端app中应用字体图标icon fonts (转)
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
- AngularCli项目中添加字体图标(Font)详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- 如何在微信小程序中使用字体图标
微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...
- 字体图标Icon Font
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...
- 在WPF中使用字体图标
一.源码描述 这是一款基于WPF窗体应用程序的字体图标示例源码, 该源码简单易懂使用于初学者和实战项目应用, 感兴趣的朋友们可以下载看看哦. 二.功能介绍 1.用ICO字体代替 ...
- vue之placeholder中引用字体图标
先说一下问题:在placeholder中想使用字体图标,结果渲染不正确,代码如图 效果如图 在网上get到了解决方法: 在VUE组件中,给placeholder添加图标,需要注意以下几点: 1.不要给 ...
- 使用iconfont管理项目中的字体图标
先来说说字体图标的好处: 很容易任意地缩放: 很容易地改变颜色: 很容易地产生阴影: 可以拥有透明效果: 一般来说,有先进的浏览器支持: 可以使用CSS来装饰(可以得到CSS很好支持): 可以快速转化 ...
- 初学者--bootstrap(六)组件中的字体图标----在路上(9)
组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用: 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...
- WPF中应用字体图标
一.什么是字体图标 我们在进行GDI(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比 ...
随机推荐
- Jmeter 快速入门--简单的http压测
1.添加线程组 打开jmeter主窗口后,选择左侧树形结构里的"测试计划",然后右键选择添加,选择"threads(users)",选择"线程组&qu ...
- 在MySQL中如何使用覆盖索引优化limit分页查询
背景 今年3月份时候,线上发生一次大事故.公司主要后端服务器发生宕机,所有接口超时.宕机半小时后,又自动恢复正常.但是过了2小时,又再次发生宕机. 通过接口日志,发现MySQL数据库无法响应服务器.在 ...
- Laravel 5.4 数据库迁移一次之后就不起作用!
https://segmentfault.com/q/1010000010806351 我在命令行中生成了一个新的迁移脚本: 当我执行命令:php artisan migrate 时 显示迁移成功,并 ...
- HDU4759_Poker Shuffle
这是一个很好的题目,来自2013长春网赛. 题目的意思是给你2^N张扑克牌,每次洗牌前分别把从下开始数为奇数和偶数的牌分别拿出来放在一堆,两堆可以任意一个放在上面. 现在问你是否存在一种情况使得经过若 ...
- HDU2460-Network
题目 给一个\(n\)个点\(m\)条边的无向连通图,\(Q\)次往图中加边,每次加边后问图中的桥有多少个.(加边后边留着). \(n\le 10^5,m\le 2\times 10^5,Q\le 1 ...
- BZOJ 2186 沙拉公主的困惑(预处理逆元+欧拉函数)
题意:求1-n!里与m!互质的数有多少?(m<=n<=1e6). 因为n!%m!=0,所以题目实际上求的是phi(m!)*n!/m!. 预处理出这些素数的逆元和阶乘的模即可. # incl ...
- Git Gerrit Repo User Manual
Git Repo Gerrit User Manual Revision History Revision # Description Date Author ...
- BZOJ4953 Wf2017Posterize(动态规划)
设f[i][j]为前i种强度选了j种且其中第i种选时前i个的最小误差.转移枚举上个选啥前缀和优化即可. #include<iostream> #include<cstdio> ...
- CF17E Palisection manacher
题面:洛谷(带翻译) 题解: 直接求相交不太好求,所以考虑求不相交的回文串对数. 设ll[i]表示以i为开头的回文串个数,rr[i]表示结尾<=i的回文串个数. 然后不相交的回文串对数显然就是对 ...
- 【BZOJ3437】小P的牧场(动态规划,斜率优化)
[BZOJ3437]小P的牧场(动态规划,斜率优化) 题面 BZOJ 题解 考虑暴力\(dp\),设\(f[i]\)表示强制在\(i\)处建立控制站的并控制\([1..i]\)的最小代价. 很显然,枚 ...