• 想让界面优雅易读?跟你聊聊移动端字体的7准则! - 优设网 - UISDC

    想让界面优雅易读?跟你聊聊移动端字体的7准则!

    2015/02/10 10083评论区

    7-simple-rules-mobile-typography-1

    @十萬個為什麽?:可能你听过这说法,好的字体是隐形的,不过更准确来说,应该是好的字体让阅读?#24418;?#27627;不费力。今天分享移动端字体7个准则,希望能帮你快速提升移动端的易读性 >>>

    界面设计的技巧:《涨姿势!怎么样让用户觉得简洁的界面有细节?》

    当视线掠过一?#24418;?#23383;时,它是跳跃前进的,我们称之为扫视。你读的不是字母,甚至不是?#35270;錚?#32780;是文字某部分的影像,大脑会补上它预期的内容。如果超出大脑预?#24076;?#23427;会促使眼睛回去核?#23548;?#35774;十分正确。通过在字里行间创造平顺的视觉流动,好的字体极度减轻了眼睛的负担。

    对任何字体工作者而言,在移动设?#24178;?#35201;面临与生俱来的挑战:空间有限,环境光通常比较微弱。不过将已经用于web端的技巧稍加调整,我们就可以提升移动设备的易读性。

    一、留足空间

    与普遍观点恰好相反,字体并非?#32842;?#19978;弯弯曲曲的线条排列;它主要在于周围和相互间的空间。

    字母本身对字体的影响,与构成它的空间相比,要小得多。

    要理解这一点,?#31169;?#23383;体从何而来很有帮助:字母o(还有b、c、p等等)中间的?#37096;?#34987;称作“凹槽”。在最原始的印刷机上,铅字由金属雕刻而成,这些凹槽来自雕刻成型、排列在盘中的金属活字。第一个字体设计师所处理的模具,?#23548;?#19978;并不能用于印刷。字母本身对字体的影响,与构成它的空间相比,要小得多。

    谈到层次时,我们通常指的是h1到p,有时候还会到h6。但另外还有一种层次在影响着行或段落的视觉流,这是特殊的层次:字母间距小于字间距,字间距小于行间距,?#28304;?#31867;推。

    要在移动端创造最佳易读性,尤其要注意这些特殊层次,这些格式塔式的?#35270;鎩?#34892;、段落的文字组合,在自然光环境下同样至关重要。

    二、行宽

    行宽是一?#24418;?#23383;的长?#21462;?#25110;者确切的说,是一?#24418;?#23383;的理想长度,因为很难让每一行都精确吻合。

    众所周知,舒适阅读的理想行宽是65个字符左右。行宽产生的物理长度,取决于字体的设计、字间距(见下文)和你使用的具体文字。本文开篇的65个字符(译者注:此处请参见英文原文),用PT Serif字体是26.875em宽,用Open Sans是28.4375em宽,用Ubuntu字体是27.3125em宽。如果再加入斜体、大小写和一大堆其他字体细节,还会有更大的差异。

    在桌面端浏览器中,65个字符很难触及边?#25285;?#20294;在移动设?#24178;希?5个字符(如果至少大到看?#20204;澹?#20250;超出浏览器的边界。所以,在移动设?#24178;希?#20320;必须?#30431;?#20943;行宽。

    移动端并没有普遍认可的行宽标准。不过传统上,报?#20132;?#26434;志上每一个窄列都会趋向于39个字符。鉴于这个理想行宽已经经历了数个世纪的考验,它在移动端字体上也运转良好。

    三、宽松行距、紧凑行距

    行距是行之间的空间,行距太紧凑,会让视线难?#28304;有形?#25195;视到下一行首。行距太宽松,字间距会开始形成队列,产生了我们通常意义上的河流,阻断了行的视觉流。

    leading

    从左至右:理想行距、太紧凑、太宽松。

    行距的标准通常是1.4em,但以我的经验,这对于?#32842;?#26469;说太紧凑了:在?#32842;?#19978;表现良好的字体?#21152;?#19968;个关键特征——大的凹槽,大凹槽需要更大一些的行距来保持空间层次。

    反过来,更短的行宽需要更小的行距。所以你可能需要将桌面端的行距设得宽松点,同时记得将移动端的设置?#23186;?#20945;些。

    四、找到最佳状态

    所有字体至少?#21152;?#19968;种最佳状态,在?#32842;?#19978;展现最佳的尺寸,还有在浏览器中最能保持字形的抗锯齿选项。

    最佳状态下,多数笔画通常都能排列在像素网格?#23567;?#20687;素字体,如果你还记得的话,那些字体仅仅在字号调整到最佳状态下才?#34892;А?/p>

    将字体设为最佳状态能形成更强烈的对?#21462;?#20026;移动端设计时,对比尤其重要,因为户外的强光可能分散注意。

    你会发现,微调行距会使每行脱离完美像素匹配。我觉得,在移动设备?#32842;?#19978;,对比的重要性胜过行距。所以如果你不得不在行距上妥协,来保持每行契合像素网格,那就这么做吧。

    通常设计师通过基线网格来排?#24418;?#23383;。但在移动设?#24178;希?#25105;们需要使用x高度来代替(x高度顾名思义,就是小写字母x的高度)。从易读性研究中,我们知?#26469;?#33041;识别的是文字顶部,而不是底部。所以要成就更加平顺的视觉流,我们要确保字符顶部最契合像素网格。

    五、不要忽视起伏边

    起伏边是?#27426;?#25991;字的边缘。你读的多数内容是居左?#20113;?#30340;(至少对于拉丁语系而言),导?#25504;?#36793;沿参差不齐。

    当视线?#26377;形?#36339;至下一行首时,大脑最好要能判断出下一次跳跃的角度和距离。把?#30475;?#36339;跃都想象成跑过跳板,如果间距保持一致,就会快很多。因此,文字左侧边缘应该是平的,每行从同一个地方开始(对于从右至左的语言,恰好相反)。

    因此你绝不应该将两三行以上的文字居中?#20113;搿?/p>

    通常文字会设置成两端?#20113;耄?#36825;意味着每?#24418;?#23383;所占空间相等,所以两侧都不会有起伏边。我怀疑两端?#20113;?#30340;流行和响应式设计有关,它教设计师们以块状形态思考。两端?#20113;?#30340;文字产生的留白不统一。最糟的情况会导致一行中只有几个字,相当不协调。更窄的行宽会加重两端?#20113;?#30340;问题,所以两端?#20113;?#30340;文字在移动端是难以阅读的。

    alignment

    从左至右:左?#20113;搿?#23621;中?#20113;洹?#20004;端?#20113;搿?/p>

    如果整洁真的非常重要,那么使用连字符号来让起伏边更?#20132;?#32477;不能在移动端使用两端?#20113;搿?/p>

    文字右侧是起伏边在移动端还有一项额外好处:人们通常在易分心的场合阅读文字,读者视线频繁地从文字上移开——查看站名,或是接电话。起伏边创造了一个随机形状,让?#31227;?#23376;的视线可以通过重读最少的文字,回到刚才的位置。

    六、减少反差

    增强文字与背景对比的同时,我们也要减少不同层次文字间的反差。

    在移动端,?#23548;?#21487;见的文字更少,所以反差?#29615;?#22823;了。

    其原因是我们的大脑基于环境来判?#29616;?#35201;性。在桌面端,标题可能是正文字号的两倍甚至三倍,因为?#32842;?#19978;有更多文字,所以这是?#34892;?#30340;。在移动端,?#23548;?#21487;见的文字更少,所以反差?#29615;?#22823;了。

    多数设计师使用斐波那契数列式的字号组合。在移动端,应该缩小比率来减少字号间的反差。?#28909;紓?#22914;果你使用?#24179;?#27604;例1.618与字号相乘。在移动端,应该用更小的比例1.382来替代。

    scale

    桌面端?#32842;?#27604;移动端容许更夸张的字号缩放。

    七、按比例调整字间距

    为移动端调整字号时,我们要意识到字间距发生了必要的变化。

    (先说一句,不应该调整固有字距。固有字距是两个字母相互组合时的距离,使它们的间距与其他字母间距在视觉上统一。创作字体时,就纳入了固有字距的考量,这个过程可能要花上数月。如果你选用了一款专业的字体,它的固有字距就是合适的,如果你觉得不对,请换一个字体。)

    字间距并不是固有字距。字间距是字体中应用在所有字符上的间距。通常你也不应该调整字间距。

    大字号是个例外,拿标题和小号文字(?#28909;?#33050;注)举例。大号文字需要减少字间距,小号文字需要增加字间距。前者是考虑到分组,后者则是为了增强对?#21462;?#22914;果你在调整标题,或是用了通常字间距紧密的艺术字体,缩小时可能就需要把字间距放开一点。

    总结

    字体是一门工艺,设计师终其一生都在精心打磨。的确如此,因为每个文字、每种字体和每项技术都带来了新的挑战。没有一成不变的普?#20351;?#24459;。

    假如你?#38750;?#26131;读性,要牢记三条原则:行内的视觉流要平顺,空间层级要清晰,要有足够的对?#21462;?#36825;尤其适用于移动端页面。

    没有不可撼动的规则,全凭你双眼决断。不过本文的指南可以作为理想的出发点,让你在移动设?#24178;?#20248;美地排?#24418;?#23383;。

    【可乐橙同学的人气好文】

    强烈推荐收藏的学霸自学?#22987;牽?#27604;官方文档还棒!
    《重磅教程!帮你全面彻底搞定MATERIAL DESIGN的学习?#22987;恰?/a>

    LOGO设计超全面指南好文中篇!
    《超赞!2014 LOGO设计新手指南(中篇)》

    来看可乐橙同学如何通过自学成为设计师!
    《?#24378;?#29677;的我如何成为一名设计师?》

    原文地址:webdesignerdepot
    译文地址:colachan
    译者:@十萬個為什麽

    【优设网 原创文章 投稿邮箱:[email protected]

    ================关于优设网================
    “优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
    【特色推荐】
    设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
    设计微博?#27827;?#26377;粉丝量90万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
    设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
    官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?#21051;?#21152;优设哥微信号:youshege

    chat-yinliu-pic

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/7-simple-rules-mobile-typography

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看?#31227;?#30460;的小眼神...

    版式设计 设计师 扁?#20132;?#35774;计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 2019天天酷跑现在最强搭配 遮天之逆战苍穹 36选7开奖结果11072 勇士vs火箭季后赛 英雄联盟之绝对嚣张txt免费下载 末世之黄金农场网盘 09年ac米兰积分 2014天天飞车刷分教程 热火科尔 波尔多液的配制方法及使用 幸运盖尔免费试玩 cf手游吧甜筒 内斯塔转会ac米兰 伯恩茅斯天气预报 武汉佛罗伦萨小镇 综艺大哥大