移动排版：迈向强大UI的8个步骤
移动设计在很大程度上取决于它所包含的每一个细节。屏幕非常小，因此设计师需要周到地选择元素，尽量不要让用户界面过载。这种特殊性使得移动版的排版创作变得相当艰巨。移动版式需要对从适当字体到引人注目的跟踪和对齐的细节进行深入关注。
无论听起来多么具有挑战性，设计师都努力构建有效的移动设计，因为智能手机是我们生活的重要组成部分。这篇文章描述了引人注目的移动排版的基本原则。
高清晰度
易读性是文本中单词和字符的可区分性和可识别性的级别。强大的排版的主要目标是让用户毫不费力地感知清晰的文本。移动设备的小屏幕和环境光可能成为创建清晰排版的一个问题。为了避免易读性问题，设计师需要考虑影响文本清晰度的所有因素。
字体大小
在移动版式方面，大小确实很重要。有些人可能认为在小屏幕上小字体效果最好。这是一个错误的信念。明亮的手机屏幕上的小字体会使用户的眼睛因紧张而受伤并带来头痛。当然，现代设备允许屏幕缩放仍然不总是方便用户省去不必要的努力。移动 UI 中的字体应该足够大，以便用户轻松阅读，但又不能太大以节省排版层次。合适的字体大小是取悦用户体验的关键。
主导
正如我们在上一篇文章中提到的，行距是副本基线之间的间距。在移动界面中，与桌面版本相比，行距通常较小。宽行距可能会破坏文本的视觉统一性，而太短的行距会使文本难以辨认。如果引导正确，读者可以快速从一个文本行转到另一个文本行，并且大块的副本变得清晰易读。
To-Do List App
线长
为了让身体拷贝在移动界面中阅读时变得舒适，设计人员考虑了所有参数，包括文本线的长度。桌面屏幕的最佳线长对于移动设备来说不会相同。过长的线条会超出屏幕边界，这就是为什么建议设计师将每行字符数保持在 30-40 以内的原因。
空白空间
当设计元素紧密地聚集在一堆，用户界面看起来凌乱，导航是相当困难的。设计师需要给元素空间呼吸，让用户的眼睛和心灵松一口气。大小移动屏幕不允许使用太多空白空间这就是为什么必须找到元素之间的平衡。
Wine Year App
层次结构级别更小
视觉层次结构应用在界面中清晰地组织内容，以便用户能够根据其物理差异（如大小、颜色、对比度、对齐度等）区分布局对象。层次结构将内容划分为帮助用户逐步学习复制内容的级别，无需费力，即可在数字产品中定位。
Web 设计通常包含三个级别的复制内容，其中包括标题、子标题、机身副本、CTA 按钮和标题等元素。但是，小型移动屏幕不能为三个级别提供足够的空间，因此设计人员仅应用两个级别。二级元素（如子标题）退到一边，使 UI 看起来干净。
Moneywise App
字体简洁
有效移动 UI 的一个关键功能是简单。设计应清晰，导航易于使用，因此字体选择必须基于要求。首先，建议将多种字体保留在两到三个字体内，使文本看起来坚固。设计师通常停止选择两种类型的移动界面字体，因为它需要的层次结构水平比网页设计少。
此外，各种字体也应该适合简单和干净的风格。新颖和装饰字体在小屏幕上看起来可能难以辨认。设计师定期结合衬线和无衬线字体，以在布局中创建足够的复制元素对比度。此外，减少移动字体的阴影等效果也不错。在桌面屏幕上，它们可能工作得很好，但会使小型移动屏幕看起来超载。
Book Swap Interactions
细腻的对比
对比度是设计师的高效工具。它有助于突出重要的UI元素，并有助于提高文本的可读性。但是，说到移动接口，反差可能会开一个坏玩笑小屏幕、环境光和短字体使对比图像看起来不令人不快。减少背景和复制元素之间的对比，设计师帮助用户在移动屏幕上阅读文本时感到舒适。
不仅可以通过颜色创建对比度，还可以通过字体大小来设置视觉层次结构。然而，移动接口缺少用于巨型标题的空间，因此尺寸对比度也应降低。
Jewellery E-Commerce App
响应式排版
人们通过今天可用的所有设备上网。这就是为什么响应式设计是成功数字产品的关键条件。排版是设计响应能力的重要组成部分。字体的大小、宽度和位置错误对整个构图有很大的影响。即使是最微不足道的变化也可能打破所有设计元素之间的平衡。
为数字产品创建排版，设计师需要考虑它在不同设备上的外观。规划这样的事情额头有助于避免不必要的问题在未来。
Cinema App
优先级内容
为了使移动界面简单实用，设计师需要注意明智的内容组织。用户希望快速访问他们正在寻找的信息，而移动屏幕可能会使过程变得复杂。
移动 UI 没有多余的复制元素的空间。应该只有经过深思熟虑的重要内容。根据用户的需求和偏好，设计师设置了一个结构，帮助人们在产品中导航并找到他们正在搜索的内容。文本元素按大小变化以及不同的宽度或字体类型进行优先排序。
Book App
文本对齐方式
根据产品类型，设计人员对文本块应用适当的对齐方式。它可以放置在左侧、右侧、中央或可以对齐。然而，在谈到移动设计时，许多设计师往往会选择左侧对齐。这种形式的文本每行的开头均等放置，并且破布看起来类似于楼梯。这种结构可以帮助用户轻松地从一个文本行转到另一个文本行并快速轻松地扫描文本。
Healthy Food App
功能排版
虽然计算机用户进行点击和滚动与产品交互，但移动屏幕应该提供更多的功能。有很多文本元素在移动界面中，允许用户完成某些操作，如购买产品、拨打电话、访问网站和其他操作。
设计人员需要确保用户了解文本元素的工作原理，并使他们能够完成操作。功能排版应在其他元素中突出显示，可点击元素应足够大，可以点击它们。
菜单交互
最后
极简主义。移动屏幕空间不足，因此尽量不要超载。简单的字体，干净的风格，和最少的元素将做他们的工作。
先测试最小的。移动设备的尺寸各不一，但最大的问题是最小的。根据小屏幕上的外观首先创建您的设计。准备好后，您可以轻松地将其调整到更大的尺寸。
避免装饰和草书字体。它们不能在小屏幕上正确呈现。此外，装饰字体过载界面与不必要的细节。
可读性第一。当然，制作漂亮的吸引人的 UI 是有好处的，但有时所有的颜色、对比度、原始字体可能会损害复制内容的清晰度。好看的文字是不够的。确保它清晰易读，否则用户将无法正确阅读信息并正确使用您的产品。
每个移动用户界面设计项目都是一个有趣的挑战。满足它的知识和结果会取悦你。
原作者： Alina Arhipova
推荐阅读
相关文章
本页面最后更新于 2021年06月18日 11:25
