如何在移动端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(图形界面)编程的过程中图标是不可少的.近些年随着网络的繁荣和移动应用的繁荣,矢量图的应用越来越火. 矢量图是一种用数学方法描述的.由一系列点和线组成的图,因此相比 ...
随机推荐
- PAT 甲级 1005 Spell It Right
https://pintia.cn/problem-sets/994805342720868352/problems/994805519074574336 Given a non-negative i ...
- 解决pciss_spc导入提示表空间不存在以及扩展失败的问题
select NAME FROM USER$ ORDER BY NAME ; CREATE USER pciss IDENTIFIED BY pciss ; GRANT DBA TO pciss ; ...
- 更新 pip & setuptools
python -m pip install -U pip setuptools
- JMeter脚本增强之参数化
JMeter测试脚本录制或者编写,在Web应用和App上的操作方式可能有一点点区别(其实也差不多,哈哈),但是当脚本录制好了之后,对测试脚本的强化,包括参数化.关联.文本检查.集合点设置,甚至再往后的 ...
- jmeter 兼容bug 记录一笔
这个问题我也遇到过,然后网上搜到了这篇文章! 先说下问题: 我在做性能测试时,使用JMeter搞了100个并发,以100TPS的压力压测十分钟,但压力一直出现波动,而且出现波动时JMeter十分卡,如 ...
- 【前端学习笔记02】JavaScript字符串、数组的一些操作方法
字符串操作: //str.length "micromajor".length // 10 //str.charAt() "micromajor".charAt ...
- NOIP2015运输计划题解报告
这题在洛谷上可以找到提交 P2680运输计划 题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航 ...
- SCWS中文分词,词典词性标注详解
SCWS中文分词词典条目多达26万条之巨,在整理的时候已经把很多明显不对的标注或词条清理了 ---- 附北大词性标注版本 ----Ag 形语素 形容词性语素.形容词代码为a,语素代码g前面置以A. a ...
- 【loj6059】Sum
Portal --> loj6059 Solution 看过去第一反应是..大力数位dp!然后看了一眼数据范围... 但是这没有什么关系!注意到我们不需要考虑前导零了,可以直接快乐dp ...
- C++之面向对象编程20170912
/*************************************************************************************************** ...