手机客户端设计师与程序员的那点事---字号小谈

写在前面

手机客户端设计中，设计师和程序员有很多故事：可能一个设计师配备几个开发人员；可能一个开发人员面对一个设计师和一个切图人员；每个开发人员的开发习惯也不一样，有的人需要点九图，有的人甚至需要你把字体都放在图标中一起切出来；安卓开发人员苦命地进行屏幕适配时，也得不断寻求设计师的协助；设计师的交互及视觉工作，与程序员的开发工作很多时候是并行的，切图资源的命名不可避免发生冲突……这些现实问题又不可避免导致后面的问题：资源库中堆积了没用的切图，要么花好几天时间清理，要么安装文件无形变大；一些公共资源被开发人员忽视，反复找切图人员要资源；开发出来的Demo与实际效果图出入很大，需要反复不断地检查，才能达到预期效果……

在这里笔者将在一年多的设计历程中，遇到的问题都梳理出来，争取能够提高设计师与开发人员的沟通效率，提升产品质量。也请经验人士指正，造福更多设计人员。

本期就先讲一讲字体的大小问题。

 

1、手机客户端字体大小设计的重要性

手机客户端的各个页面不可避免涉及到字体、字体大小和字体颜色的考虑，其中在手机屏幕这个特殊媒介中，字体大小显得更为重要。为了不违反设计意图，同时考虑到手机显示效果的易看性，必须了解在电脑做图时采用的字号和开发过程中采用的字号。

我们通过例子看看为什么字体大小对设计的影响，尤其是在电脑做图与手机适配的过程中。左图是电脑设计效果，本页面的设计意图是：会议第一天----有几个会场---每个分会场之下的日程安排，因此设计中“会议第一天”的视觉区域最重，“会场”其次，而日程内容视觉应该再轻于分类tab。然而在手机上适配GUI时，日程列表的主标题和副标题字号必然需要增加才能达到易看性，但字号一增加，内容页的视觉份量便会重于分类tab，于是导致的后果是：用户并没有一眼理解出日程内容是在各个分会场之下的，从而达不到设计意图，造成体验问题（记得眯着眼睛看罗，很多时候眯着眼睛看可以发现空间层次、配色、主次关系等很多方面的问题）。 

最后这个问题是这样解决的：通过加深分类tab（即会场栏）的颜色来加重其份量，让日程内容被包含其中。见下图：

2、让设计与开发顺利接轨的字体规范

我们知道，用photoshop画效果图时，字体大小我们一般直接用“点”做单位，然而在开发中，一般采用“sp”做单位（有关安卓中的dp/sp/px，有兴趣的童鞋，可以看看这个

http://hi.baidu.com/wzc520168/item/bacd8fff8131f37c3d198b22）。如何保证画图时的字号选择和手机适配效果一致呢？下面以几个常用应用的字体效果来说明在Photoshop中和开发中字号的选择。

（1）   列表的主标题

v  如微信、下厨房等应用首页的列表主标题，字号在photoshop中应采用22--24号左右，一行大概容纳18个字。然后开发程序中对应的字号是16sp。

v 百度新闻、QQ通讯录首页的列表主标题的字号在ps中应采用24--26号左右，一行大概容纳16个字。开发程序中对应的字号是18sp。

v  多米音乐首页的歌曲列表主标题的字号在ps中应采用26--28号左右，一行大概容纳14个字。开发程序中对应的字号是20号字。

（1）   列表的副标题：

列表的副标题的字号一般没有太多的要求，基本原则是保证字体颜色和字号小于主标题即可。

（2）   正文：

正文字号的大小一般需要保证每行不多于22个字，如果过小，影响阅读。在电脑设计中大概保证不小于16号字体，在开发程序中不小于12号字。

3、总结和注意

找准以上对应关系，下次你就可以直接告诉开发者，这个页面中不同层级的内容分别用多大字号。很牛滴。

最后需要注意的是：同样的字号，不同的字体，显示的大小可能不一样，需要注意。这也是以上表格中没有对将点和sp完全一一对应的原因。如下是三类同样字号的字体的对比效果：