手机用户的数量是 呈指数增长 几乎每个用户都在这些设备上访问Internet。由于这一趋势,它对每个企业设计的趋势 网站 在每个设备上渲染。由于每个网站的最大部分包含文本,排版要求特别注意。

有助于格式化,造型和布置印刷文本的技术称为排版。换句话说,它是将文本集成到网站中的方式。大多数设计师在选择的同时考虑业务类型和最终用户 网站的排版

以下是一种创造性地使用排版的示例。 

有了这一说,让我们深入了解移动网络设计的最佳实践。

1.字体的大小

作为拇指规则,字体大小应至少为移动网站的16px。如果您选择较小的尺寸,它可能会导致视觉挑战性的个人可观差。此外,较大的字体大小可能使读取内容更加艰难。

根据 尼尔森诺曼集团,短串文本令人保证更快地阅读,如果它们以常规刻字宽度和4mm尺寸而不是3mm,则更好地理解。

看看刚刚创意的开口线 - 所有帽子,都是完全可读的。 

2.颜色和对比

选择正确的颜色 当涉及到您网站的图像,文本和设计元素时很重要。除了字体的基础颜色外,保持对比度和背景同样重要。

想象一下黄色背景和写在它上的白色文本。 

它很难看,对吧? 

我们当然不希望网站设计中的一个问题。

根据这一点 Web内容可访问性指南,对比度为4.5:1是您在文本和背景之间的最小对比度,以便您具有良好的可读性。

此规则的例外是:

  1. 如果您的文本为18分或以14分以粗体为18分,3到1的对比度会很好。
  2. 只有网页的活动部分中显示的文本必须遵守此规则。
  3. 品牌标志可以根据设计师的偏好进行对比。

如果您无法确定字体和背景颜色之间的比率, web can assist you.

这是一个屏幕截图来解释你是如何工作的。

3.跟踪

简单地,跟踪有助于控制移动网络设计中的密度,并调整文本块的空格。一条线应该有upto 仅限30-40个字符 并且跟踪有助于控制此长度而不插入任何其他字符。如果违反此规则,它不会读取。您的跟踪应该能够诱使读者通过文本,然后“确信”转换。

4.领导

Neilsen诺曼集团 建议将内容放在桌面上的折叠上方 监视器 在4英寸的小型移动设备上,30英寸等于五个屏幕。这反映了用户必须进入整个网站的努力。

怎么看 莫比的旅行 已修改其网站布局和排版,以减少读者的滚动。 

资源: //typecast.com/blog/a-more-modern-scale-for-web-typography

作为最佳实践,您应该为移动设备创建另一个版本,为所有这些用户提供平滑体验。根据 WCAG. ,线之间的间距应为1.5或150%。保持段落间距高达2.5或250%之间的间距。

5.兼容字体

重要的是要考虑android和Apple的字体默认值,以了解字体的兼容性。 对于谷歌,它是诺托和机器人。 Roboto是主要默认字体,而NOTO是退回字体,以防网站使用不支持Roboto的语言。 另一方面,Apple在为iOS和系统类型脸部设置的典型指南是旧金山。这种字体的美丽是它是一个基本的Sans Serif字体和Apple不建议使用大胆的风格化或古怪的大小,前导或跟踪规则。这是援助,从系统默认字体开始始终更好。它是移动设备中排版的最安全投注。

6.白色空间

您应该保留足够的空间空间,以便网站副本看起来不像文字墙。通常,观察到移动网站试图适应背景图像,纹理,任何其他内容面板等所有设计元素。这导致移动屏幕上的杂乱设计。为避免这种情况,您可以在身体中的任何颜色或纹理消除并减少主要内容区域外的边距。只需有一个简单的单余余量,您将有足够的白色空间来让您的副本呼吸。 

用于移动设备中排版的重要点

  1. 强烈建议您使用SANS Serif或Serif字体。对于使用花哨字体的桌面网站,使用传统的移动设备字体。但是,并不意味着您应该完全脱离花哨的字体。您可以随时使用一些定制,非传统字体,使您的网站视觉上有吸引力。
  1. 最多使用移动设备的两个字体。在网站上有太多字体将在视觉上令人不安。两个字体应相互补充。您应该考虑使用具有相同字符宽度的面。它很可能是每张脸都有一个独特而鲜明对比的设计,但您应该尝试为移动用户保持统一性。
  1. 避免使用不具有不同字符的字体。最常见的例子是字母“i”在大写中,小写字母“L”,并且数字1放在一起。弄清楚要弄清楚什么是令人困惑的。同样适用于字母“o”和零,字母“r”和“n”彼此相邻放置在“旅程”之字中。您的访客与您一样繁忙,因此确保文本可读性尤为重要。
  1. Arial,Courier New,Georgia,Verdana,Trebuchet MS,Tahoma和时代新罗马是每个设备上均匀显示的最兼容的字体。
  1. 左侧对齐是移动排版时最安全的赌注。如果副本有几行,则左对齐文本看起来最好。另一方面,居中文本对标题和短副本很好。

简而言之

用于移动设备的设计都是关于细节,功能和视觉吸引力。遵循上述提示和技巧肯定会帮助您在没有任何缺陷的小屏幕上创建清晰的用户界面和体验。如果您有任何其他版本的想法 移动应用程序开发, 我们很想听到您的声音。

发表评论

请输入您的评论!
请在这里输入您的姓名