GUI阅读字号和触点面积设计（可用性设计）

今天在博客园开启第一篇，附上我多年工作的研究总结以表诚意。

此文已收入UXPA大会文集，出版于四川大学出版社。

《GUI阅读字号和触点面积设计》

--可用性设计理论研究与实践案例

作者刘玲

前华为UCD中心交付经理

277169188@qq.com

摘要:

本文演绎论证了当前多终端多分辨率环境下，GUI设计中舒适的阅读字号、触点面积的设计方法和原理，并分享了已经实践检验的辅助工具。

关键词：

掌上电脑、舒适阅读字号、触摸热点面积、设计辅助工具

引子:

几个朋友聊天，说到昨天深圳下了半天的暴雨，顷刻间关内关外大部分路面积水成江，交通事故若干，令下班族阻塞滞留比正常下班多消耗两小时。于是有人感慨地说，这高楼大厦如雨后春笋琳琅满目、世界领先，可真正关系到百姓切身利益的过街天桥隧道、排水排污系统等良心工程仍需加强。

由此我想到了自己所从事的UI设计。她既是艺术创作的个性展示，也是需要充分考虑用户如何接收信息和互动的可用性工程。高大上的概念设计好比规划各种高楼大厦，期许客户和用户的各种精神需求功能用途，绘制出美丽蓝图。可每个真实用户手里用的是什么终端，她最终看到的至少应该是什么效果，她的阅读任务和点击任务是否被给予基本的人文关怀？

背景

1.我司为全球运营商设计开发的APP基本要求覆盖低中高端各种规格屏幕的Phone、Pad，480x800、540x960、360x640、240x320、480x360、720x1280、640x960、640x1136、750x1334、1080x1920，小到3.2寸，大到10.1寸，屏幕精度从72ppi，到iPhone 6+ 精度已经到达401ppi。

图1 多终端多分辨率现状图

2.终端屏幕的精度很多种类，越做越高，精度越高显示越精致细腻。设置几号文字易读不伤眼，读起来清晰舒适？作为视觉设计师经常遇到这样的困惑，设计效果图在电脑上看着挺舒服，为什么放到手机上文字小得看不清？提供给前台开发的VI规格里面如何定义字号？没有样机测试，我怎么知道我的字号设置得是否合适？

3.触控点面积多少像素点击起来不费劲呢？按钮的大小合适吗？是否一戳就中？

图2 阅读字号思考

图3 触摸屏幕触点思考

正文

本文要论述的正是，GUI字号和触点面积设计与终端屏幕适配，设计的良心工程之一。

1.UI字号设计时，既要有足够多的像素数，也要有足够大的物理尺寸。

像素数　　

中文字符不小于12px，英文字符不小于10px.

基于LCD造字的方法限制，一个中文字符至少需要12个像素点构成，少于12x12个像素点不清晰。一个英文字符至少需要10x10个像素点构成清晰的字型。
下方图示为放大12x12、16x16、24x24的点阵字示意图，每一方格表示一个点。

图4像素字构成

l 物理尺寸　中文字符不小于7.2pt，英文字符不小于6pt.　
基于人眼识别的限制，相关人因工程研究建议不小于3mm、7.5points，下图截自IEEE Std 1063-2001。为了方便同英寸的整数换算，我们设计实践时取值7.2points。这个大小的文字内容，人阅读起来可以兼顾时间最持久读得最长篇幅。