实例讲解:网页设计中字体设计在移动端上的重要性

发布时间:2015-09-25编辑发布:迪麦互动

就移动屏幕上的局限性,所以对于网站设计工作者而言这是一种挑战,空间有限,环境光通常比较弱,很难看清东西。因此,当涉及到移动端的排版时必须要非常小心。不过将已经用于WEB端的技巧做出调整,那大可提升移动设备的可读性。以下几点可以帮助你在移动端的版式:文字的可读性、大小、对比度和间距。

可读性

可读性是指用户为了阅读而努力的理解文本。这是一个非常重要的可用性问题,不应该被低估作为文本是一种信息沟通网络,运行。

大小

如果因为文本太小,用户而不能阅读,这是一个非常严重的问题。在移动设备上他们可以将文本放置更大,是的,但事实是他们不需要这样做,别忘了加深用户的友好体验。

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

在桌面端浏览器中,65个字符很难触及边缘,但在移动设备上,65个字符(如果至少大到看得清)会超出浏览器的边界。所以,在移动设备上,你必须得缩减行宽。

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

对比性

在网站设计中就像一个蓝色的背景上配上红色的文字是一种禁忌,它在移动设备上也是一个禁忌。然而,当你还在纠结如何在移动设备上设计字体的可见性时,避免使用浅灰白色背景彩色文本,使用对比能够更好的帮助用户看到,解决手机暗的阅读困境。

间距

最后一件事你应该记住,间距字母,单词和行文本从一个另一个也是一个至关重要的部分在建立坚实的文本的可读性。无论多么大的字母,它仍然是难以阅读时挤压在一起。

因此,给他们足够的空间让他们休息,容易阅读。当谈到整个段落和文本框,提供间距和空间,显然彼此分开,页面的其余部分。很乏味的阅读文本形式的页面开始的地方就结束了,它还可能看搞砸你的设计。

这个设计的色彩组合是美妙的,特别是对于大尺寸的排版。它是完美的。

这个排版设计是通风的,足够空间的,让页面清爽更具有可读性。

此屏幕上的对比是完美的。字母的黑暗足以突出甚至在阳光最强烈的、最恶劣的环境。

这个设计是美丽的,清爽的白色文本是站在自己的蓝色背景和白色的图标。

这个设计的行高是刚刚好。虽然文本不是太大,由于它作为一个光背景较暗的颜色而脱颖而出。

间距和对比是杀手锏

结论:字体设计在网页设计中是一门艺术,每项技术将给项目带来挑战。没有一成不变的普适规律。全靠经验和双眼判断,本文的原则可以作为出发点作为参考,追求文本的易读性,行内的视觉流畅,间距合理清晰,足够的对比和空间。这样在移动设备上优美的排列一个文字页面毫无压力。


本文由广州网页设计、广州网站设计、广州网站建设、终端界面设计-迪麦互动编辑,转载请注明!

分享至: