GUI阅读字号和触点面积设计 （可用性设计）
今天在博客園開啟第一篇，附上我多年工作的研究總結(jié)以表誠意。
此文已收入UXPA大會文集，出版于四川大學(xué)出版社。
《GUI閱讀字號和觸點(diǎn)面積設(shè)計》
--可用性設(shè)計理論研究與實(shí)踐案例?
?作者劉玲
前華為UCD中心交付經(jīng)理
277169188@qq.com
?
摘要:
本文演繹論證了當(dāng)前多終端多分辨率環(huán)境下，GUI設(shè)計中舒適的閱讀字號、觸點(diǎn)面積的設(shè)計方法和原理，并分享了已經(jīng)實(shí)踐檢驗的輔助工具。
關(guān)鍵詞：
掌上電腦、舒適閱讀字號、觸摸熱點(diǎn)面積、設(shè)計輔助工具
引子:
幾個朋友聊天，說到昨天深圳下了半天的暴雨，頃刻間關(guān)內(nèi)關(guān)外大部分路面積水成江，交通事故若干，令下班族阻塞滯留比正常下班多消耗兩小時。于是有人感慨地說，這高樓大廈如雨后春筍琳瑯滿目、世界領(lǐng)先，可真正關(guān)系到百姓切身利益的過街天橋隧道、排水排污系統(tǒng)等良心工程仍需加強(qiáng)。
由此我想到了自己所從事的UI設(shè)計。她既是藝術(shù)創(chuàng)作的個性展示，也是需要充分考慮用戶如何接收信息和互動的可用性工程。高大上的概念設(shè)計好比規(guī)劃各種高樓大廈， 期許客戶和用戶的各種精神需求功能用途，繪制出美麗藍(lán)圖。可每個真實(shí)用戶手里用的是什么終端，她最終看到的至少應(yīng)該是什么效果， 她的閱讀任務(wù)和點(diǎn)擊任務(wù)是否被給予基本的人文關(guān)懷？
?
背景
1.我司為全球運(yùn)營商設(shè)計開發(fā)的APP基本要求覆蓋低中高端各種規(guī)格屏幕的Phone、Pad，480x800、540x960、360x640、240x320、480x360、720x1280、640x960、640x1136、750x1334、1080x1920，小到3.2寸，大到10.1寸，屏幕精度從72ppi，到iPhone 6+ 精度已經(jīng)到達(dá)401ppi。
圖1 多終端多分辨率現(xiàn)狀圖
?
2.終端屏幕的精度很多種類，越做越高，精度越高顯示越精致細(xì)膩。設(shè)置幾號文字易讀不傷眼，讀起來清晰舒適？作為視覺設(shè)計師經(jīng)常遇到這樣的困惑，設(shè)計效果圖在電腦上看著挺舒服，為什么放到手機(jī)上文字小得看不清？提供給前臺開發(fā)的VI規(guī)格里面如何定義字號？沒有樣機(jī)測試，我怎么知道我的字號設(shè)置得是否合適？
3.觸控點(diǎn)面積多少像素點(diǎn)擊起來不費(fèi)勁呢？按鈕的大小合適嗎？是否一戳就中？
?
圖2 閱讀字號思考
?
?
圖3 觸摸屏幕觸點(diǎn)思考
?
正文
本文要論述的正是，GUI字號和觸點(diǎn)面積設(shè)計與終端屏幕適配，設(shè)計的良心工程之一。
?
1.UI字號設(shè)計時，既要有足夠多的像素數(shù)，也要有足夠大的物理尺寸。
像素數(shù)
中文字符不小于12px，英文字符不小于10px.
基于LCD造字的方法限制，一個中文字符至少需要12個像素點(diǎn)構(gòu)成，少于12x12個像素點(diǎn)不清晰。一個英文字符至少需要10x10個像素點(diǎn)構(gòu)成清晰的字型。
下方圖示為放大12x12、16x16、24x24的點(diǎn)陣字示意圖，每一方格表示一個點(diǎn)。
?
?
圖4像素字構(gòu)成
l? 物理尺寸 中文字符不小于7.2pt，英文字符不小于6pt.
基于人眼識別的限制，相關(guān)人因工程研究建議不小于3mm、7.5points，下圖截自IEEE Std 1063-2001。為了方便同英寸的整數(shù)換算，我們設(shè)計實(shí)踐時取值7.2points。這個大小的文字內(nèi)容，人閱讀起來可以兼顧時間最持久讀得最長篇幅。
?
?圖5 7.5磅字號的人因標(biāo)準(zhǔn)
?
UI設(shè)計師在設(shè)計初期需要對不同精度不同尺寸的屏幕進(jìn)行了解掌握。
基于長度單位之間的換算關(guān)系：1 inch = 72 pt ，
精度ppi的計算方法：
?
圖6 ppi計算演練白板
?
可以得出以下結(jié)論，
中文舒適閱讀字號＝ppi x (7.2pt/72)? [如果結(jié)果小于12則顯示為12，一般手持終端的屏幕ppi會造到120ppi以上]
英文舒適閱讀字號＝ppi x (6pt/72)? [如果結(jié)果小于10則顯示為10]
?
便于觀察變化規(guī)律，下面這個表格簡單列出不同精度的終端屏幕上，精度的變化對字號的影響。藍(lán)色格子是字號像素數(shù)下限值，黃色格子是物理尺寸下限值。
??
表1 字號像素數(shù)隨屏幕精度變化規(guī)律表
?
從表格數(shù)據(jù)顯示，當(dāng)屏幕精度提高時，同樣是12像素的字變得越來越小，330ppi（iphone4）的屏幕上12px的字小到2.62pt。
假設(shè)中文7.2pt是人眼舒適的字號，那么iphone 4上的舒適字號大概33px左右。
當(dāng)屏幕精度ppi不同時，對應(yīng)的像素數(shù)可以由這個規(guī)律算出。
?
2.UI觸控面積最小設(shè)置7mm2
單指觸控的面積取決于指頭的粗細(xì)直徑，不同的人的指頭有細(xì)有粗，東方和西方人種也略有差異。在觸摸屏設(shè)計中常將觸控?zé)狳c(diǎn)設(shè)計為7x7mm（歐洲有的用9x9mm），作為使用觸摸屏較為舒適和有效的觸控面積。
基于長度單位之間的換算關(guān)系：1 inch = 25.4 mm
可以得出：
舒適觸控面積＝ppi x (7mm/25.4)?
?
使用本文的理論和方法，在一個480x800像素的4.5寸屏幕上，設(shè)計演練如下。
?
圖7 閱讀字號和觸點(diǎn)面積設(shè)計實(shí)踐舉例
?
英文按6pt計算
英文舒適閱讀字號＝?x (6pt/72)
???????????????? ? ＝16px
那么英文舒適閱讀文本16px，
舒適觸控區(qū)域＝?x (7mm/25.4)
???????????????? ???? ＝55px
?
那么單點(diǎn)觸控面積不小于55x55像素。
?
輔助工具
將公式放入Excel做成輔助工具，幫GUI設(shè)計師省卻計算的煩惱，用輔助工具得到對應(yīng)的終端字號設(shè)計建議，無拘無束事半功倍地進(jìn)行視覺創(chuàng)作。
工具設(shè)置及所含公式如下，歡迎使用和改良。
?
圖8 輔助工具及內(nèi)置的excel公式
?
實(shí)踐案例
MTN伊朗電信APP Store，以下分辨率為典型終端。
l? 240x320的2.8寸屏幕
l? 360x640的3.5寸屏幕
l? 480x800 的4.5寸屏幕
l? 1280x720的4.7寸屏幕
l? 1024x600的7寸屏幕
?
對文字像素數(shù)的設(shè)計如下圖，同在72dpi的畫布上，像素數(shù)越多的屏幕字號設(shè)置得越大。
?
?
圖9相同像素點(diǎn)大小時文字體積示意
?
從另外一個角度，對文字物理尺寸的觀察，同一節(jié)文字內(nèi)容在不同手機(jī)上看，精度高的屏幕和精度低的屏幕，顯示的文字看起來差不多大，因為關(guān)聯(lián)了對應(yīng)的ppi，我們使實(shí)際pt物理尺寸接近一致，保證了良好的一致性和可讀性，類似效果如下圖。
?
圖10實(shí)際物理尺寸的終端及文字體積示意
?
總結(jié)與展望
在智能手機(jī)掀起的這幾年，戰(zhàn)友們在移動APP GUI交付的戰(zhàn)役中，越來越依賴這個工具，足以證明它來得及時和有用。
在人們一起建設(shè)信息社會、奔赴小康的生活道路上，掌上電腦的需求在未來十年仍然會百花齊放，移動APP依然需要源源不斷地供應(yīng)，依然面臨舒適閱讀、和便捷點(diǎn)擊的基本體驗要求，希望此文的輔助工具可以幫助到正奮斗在打磨多終端體驗質(zhì)量的同道中人。一起加入到GUI設(shè)計的良心工程建設(shè)。
?
致謝
感謝與我一起支撐SDP領(lǐng)域海內(nèi)外交付項目的視覺設(shè)計師小段，及她的視覺和前端戰(zhàn)友。
感謝做輔助工具時幫我寫開方公式和判斷語句的湯湯。
?
參考文獻(xiàn)
[1]?????? IEEE Std 1063-2001/
[2]?????? 文鼎科技LTD 官網(wǎng)
[3]?????? 維基百科 “字體度量單位”
?
作者聯(lián)系方式：
277169188@qq.com
轉(zhuǎn)載于:https://www.cnblogs.com/rose-l/p/7205067.html
總結(jié)
以上是生活随笔為你收集整理的GUI阅读字号和触点面积设计 （可用性设计）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 极域电子教室卸载、忘记密码解决方案
- 下一篇： 并发编程之多线程线程安全（下）