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。這個大小的文字內容，人閱讀起來可以兼顧時間最持久讀得最長篇幅。
?
?圖5 7.5磅字號的人因標準
?
UI設計師在設計初期需要對不同精度不同尺寸的屏幕進行了解掌握。
基于長度單位之間的換算關系：1 inch = 72 pt ，
精度ppi的計算方法：
?
圖6 ppi計算演練白板
?
可以得出以下結論，
中文舒適閱讀字號＝ppi x (7.2pt/72)? [如果結果小于12則顯示為12，一般手持終端的屏幕ppi會造到120ppi以上]
英文舒適閱讀字號＝ppi x (6pt/72)? [如果結果小于10則顯示為10]
?
便于觀察變化規律，下面這個表格簡單列出不同精度的終端屏幕上，精度的變化對字號的影響。藍色格子是字號像素數下限值，黃色格子是物理尺寸下限值。
??
表1 字號像素數隨屏幕精度變化規律表
?
從表格數據顯示，當屏幕精度提高時，同樣是12像素的字變得越來越小，330ppi（iphone4）的屏幕上12px的字小到2.62pt。
假設中文7.2pt是人眼舒適的字號，那么iphone 4上的舒適字號大概33px左右。
當屏幕精度ppi不同時，對應的像素數可以由這個規律算出。
?
2.UI觸控面積最小設置7mm2
單指觸控的面積取決于指頭的粗細直徑，不同的人的指頭有細有粗，東方和西方人種也略有差異。在觸摸屏設計中常將觸控熱點設計為7x7mm（歐洲有的用9x9mm），作為使用觸摸屏較為舒適和有效的觸控面積。
基于長度單位之間的換算關系：1 inch = 25.4 mm
可以得出：
舒適觸控面積＝ppi x (7mm/25.4)?
?
使用本文的理論和方法，在一個480x800像素的4.5寸屏幕上，設計演練如下。
?
圖7 閱讀字號和觸點面積設計實踐舉例
?
英文按6pt計算
英文舒適閱讀字號＝?x (6pt/72)
???????????????? ? ＝16px
那么英文舒適閱讀文本16px，
舒適觸控區域＝?x (7mm/25.4)
???????????????? ???? ＝55px
?
那么單點觸控面積不小于55x55像素。
?
輔助工具
將公式放入Excel做成輔助工具，幫GUI設計師省卻計算的煩惱，用輔助工具得到對應的終端字號設計建議，無拘無束事半功倍地進行視覺創作。
工具設置及所含公式如下，歡迎使用和改良。
?
圖8 輔助工具及內置的excel公式
?
實踐案例
MTN伊朗電信APP Store，以下分辨率為典型終端。
l? 240x320的2.8寸屏幕
l? 360x640的3.5寸屏幕
l? 480x800 的4.5寸屏幕
l? 1280x720的4.7寸屏幕
l? 1024x600的7寸屏幕
?
對文字像素數的設計如下圖，同在72dpi的畫布上，像素數越多的屏幕字號設置得越大。
?
?
圖9相同像素點大小時文字體積示意
?
從另外一個角度，對文字物理尺寸的觀察，同一節文字內容在不同手機上看，精度高的屏幕和精度低的屏幕，顯示的文字看起來差不多大，因為關聯了對應的ppi，我們使實際pt物理尺寸接近一致，保證了良好的一致性和可讀性，類似效果如下圖。
?
圖10實際物理尺寸的終端及文字體積示意
?
總結與展望
在智能手機掀起的這幾年，戰友們在移動APP GUI交付的戰役中，越來越依賴這個工具，足以證明它來得及時和有用。
在人們一起建設信息社會、奔赴小康的生活道路上，掌上電腦的需求在未來十年仍然會百花齊放，移動APP依然需要源源不斷地供應，依然面臨舒適閱讀、和便捷點擊的基本體驗要求，希望此文的輔助工具可以幫助到正奮斗在打磨多終端體驗質量的同道中人。一起加入到GUI設計的良心工程建設。
?
致謝
感謝與我一起支撐SDP領域海內外交付項目的視覺設計師小段，及她的視覺和前端戰友。
感謝做輔助工具時幫我寫開方公式和判斷語句的湯湯。
?
參考文獻
[1]?????? IEEE Std 1063-2001/
[2]?????? 文鼎科技LTD 官網
[3]?????? 維基百科 “字體度量單位”
?
作者聯系方式：
277169188@qq.com
轉載于:https://www.cnblogs.com/rose-l/p/7205067.html
總結
以上是生活随笔為你收集整理的GUI阅读字号和触点面积设计 （可用性设计）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 极域电子教室卸载、忘记密码解决方案
- 下一篇： 并发编程之多线程线程安全（下）