如何在移动端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能适应各种尺寸屏幕，这些都是矢量图形应用时的小功能。矢量图形能让你在一个长期的项目不会抓狂的渡过。

在面对自适应、加载时间或retina屏等问题时，基于矢量图形的解决方案已成为基本解决方案了，就像CSS效果，为不同用户设计高质量的WEB UI，由于近期浏览器在自定义字体上的较好的支持，很多美工甚至将它们的icons做成web fonts，这一样是基于矢量图形好处理由。

作为一名移动端的美工，花费了太多时间在切割、组织、打包图形上，我曾好奇是否可以在native的app上应用这项高级的web技术。

希望能够不再关注分辨率、设备尺寸，真正关注于设计本身的工作,我决心使用图标字体(icon fonts)来增强IOS和ANDROID APP的UI

在应用属性列表内加载项目文件夹内用户自定义字体

对于可缩放的自适应设计来讲，Icon fonts是一种惊人的解决方案。

在开发native app时，你应该记住icon fonts技术有多项超过位图的高级特性，这些特性所带来的好处会影响你的设计工作流，以及产品的最终品质。

可缩放性（Scalability）：

基于字体的icon是与分辨率无关并能缩放到任何想要程度的技术。你的图标看起来毫不关心retina,HDPI,XHDPI等等屏幕，但渲染时会根据目标设备自动调整，你将有能力应对任何当下，未来，或大多数任意规格的设备

尺寸（Size ）：

裁剪到正确的比例，icon font的文件的大小要比起位图小到难以置信的程度，使用icon font时，你不需要根据不同设备准备不同的图片，你的APP只需要在启动时加载一次icon font文件即可。

可维护性（Maintainability）：

自你的icon打包进一个字体文件，在项目自始至终你仅需要维护这个单一的字体文件。

通过管理字体文件你可以很自然的组织你的icon集合，任意的进行修改或扩展

可推广性（Adoption）：

然而，应用这样的icon fonts可能会影响你和你同事之间的工作流程，但说服让他们采用这样的技术也非常简单，有数款免费或收费的工具帮你轻松达到目的并能看到很好的应用结果，在几乎任意（手机）移动平台、浏览器或操作系统

灵活性（Flexibility）：

应用icon fonts技术中最有意义的一项能力是可以操纵icon fonts，改变颜色，大小，仅仅几行代码就可以在瞬间改变外观

可交互性(Interactivity)：

由于灵活性以及能够通过代码方便的操纵，icon fonts 是独一无二的在运行时被操纵，通过应用icon fonts技术，你能轻松的在不同状态显示对应的不同效果，创建动画。

虽然icon fonts为设计提供了众多好处为一些有趣的设计提供可能性，自然地，它也不是全权的解决方案。一旦你的设计中需要的颜色超过一种，实现复杂的视觉设计，icon font就有限制了。无认如何，主流与非主流的icon fonts都能在互联网上找到，在我们使用之前web设计界已经很流行了，并有很多服务帮你创建梦幻的icon fonts集合

通过xcode中的outlet connection, 在view呈现后，你还能很方便的改变label

Using icon fonts on iOS

在IOS中使用字体图标

在IOS中应用icon font非常的简单粗爆。在一开始你最好通过使用Fontello或IcoMoon收集一些图标并整合进你的APP。另一种方法是你自己花时间自己做出来，但创造性的工作的总要花掉你很多时间。

那么现在我们仅仅需要将得到的icon整合进我们的APP

你只需要懂得IOS开发基本的文件结构以及.tff后缀的字体文件icon font

为了测试icon font技术，我们在Xcode内新建一个Single View Application的工程。工程建完后就把你的字体文件复制进工程目录，如果不出什么意外，你应该在你的Project Navigator中看到对应的字体文件了

为了让Xcode理解你将要如何使用导入的文件，你得在你的应用程序的Info.plist内建立“链接”。这个plist文件在Supporting Files文件夹内，表现为meta data即可理解为hash表。为了在编译app时能包含进你的字体文件，在list上简单新建一行（右键然后add row）名字选择为Fonts provided by application，在其下给字体文件取个名字，名字就是你的应用程序中用来识别你的字体文件的。在我们这个测试工程中，值为fontello.ttf。现在Xcode知道了我们导入的文件能干什么，我们能在程序中使用导入的字体文件了

把你的app切换到storyboard模式，在view中你喜欢的地方放一个label组件用来显示icon，在设置完label后，我们需要建立一个outlet。

在storyboard中做这些事情都很简单，在Assistant Editor Mode模式下

此模式下显示了你的图形界面和ViewController界面。现在简单的按住ctrl键，从label组件拖动就会现线条，直接拖线条到ViewController到@interface这行代码上放开就会弹出一个小界面，输入名称，比如 iconLabel，outlet就建成了，代码中你会发现多了下面这样一行：

@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"]]; 
}

添加的第一条代码用来定义字体应用于label并设置字号，这里我们设置了130pt

在使用这些命令时要注意字体名称，这里要填写字体的真实名称，即在字体簿打开的字体名或任何其它编辑器内能显示的字体名称。特别注意这点，因为字体名很可能与字体文件名称不一样

在第二行中文字用Unicode字符 Hammer and Pick (2692)编码。

虽然有点神秘，获取icon字体的unicode字符编码还是比较容易的。可以使用字体编辑器，或者直接上传到Icon Moon这类网站，你可以毫不费力的将icon字体转换成unicode编码

你可以通过Android XML 语法来申明任何你想要的UI属性

Colours, gradients and shadows

现在icon“引用”已经建立，你都搞定了。在我们通过代码操作label前，你得先运行看看你的工作成果。最终，这也是你将icon字体合并进app所要做的。从现在开始有趣的事儿才开始。文本的所有操作都由你掌控了，例如：颜色，透明度，渐变，阴影。

例如应用以下几行代码，让icon变成红色+阴影：

iconLabel.textColor = [UIColor redColor];

iconLabel.shadowColor = [UIColor blackColor];

iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);

有许多效果可以使用。一些相对来说比较复杂，但所有文本效果都通用。动画或任何复杂的操作只要你能想到的都可以做了

Using icon fonts on Android

在Android中应用字体图标

同样的，在开发Android应用时也一样能使用icon fonts就像用在ios上面一样，能得到一样的好处。

就应用范围而言，Android更加有意思更有用。因为Android有着更多不同分辨率，不同屏幕的设备平台。最重要的是Android默认不支持矢量图形，这对开发者和设计人员面对不同Android设备时可是一个重大打击

在开始开发你的新Android应用之前，你仅需要知道一个app最基本的文件构架，同样的icon font文件也是.tff后缀，使用包含了Android ADT的Eclipse IDE，你可以开始新建一个Blank Activity的Android Application Project。在项目设置后，复杂.tff文件到你的资源文件目录内。一旦复制成功，Package Explorer面板内应该能看到

接下来，在你的Main Activity View内创建一个TextView。你可以在layout文件夹内找到你的资源文件。文件名应该是 activity_main.xml。在多数情况下，Android SDK已经将一个文本为“Hello world”的TextView放到了你的View内，我们就能使用这个TextView了。

在定义Icon各属性后，你能在模拟器内看到你的icon了。

为了操作TextView,我们需要将图形模式切换到切换到XML View内。现在为TextView添加一个ID，以便接下来UI和代码建立引用关系

你的TextView应该看起来像下面这样

<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

总结一下

在开发native app时使用icon fonts有着难以置信的好。考虑到icon fonts的可缩放性，在你设计任何移动设备APP时，你几乎可以忽略屏幕大小及分辨率。最大的好处莫过于，在app中icon fonts的灵活性，在整个app运行过程中中都可以操作，支持实时效果和动画。此外由于icon fonts较容易的适配，在设计工作和主要管理工作中可以增强整体工作流程事半工倍，无论面对的是何种分辨率或屏幕密度。

译者的话

要应用字体图标，首要的条件还是要拥抱扁平化的设计

为什么要扁平化？

让设计从技术实现上更简单
苹果，谷歌，微软，都相继推出扁平化或类似的设计语言
在手持设备或车载设备上，扁平化的大色块设计更容易识别与操作
HTML5实现扁平化的UI性能更好
扁平化大色块的设计，使用PNG图片拥有更好的压缩比率，图片文件更小

========================================================

英文原文，可能需要翻qiang：

http://www.creativebloq.com/app-design/icon-fonts-in-apps-21410734

英文水平有限，凑合着翻，全当自我学习欢迎交流学习

转载处请注明：博客园(王二狗,池中物)willian12345@126.com