移动手机用户界面设计技巧的探究

2022-08-31张修竹

电脑知识与技术 2022年18期

张修竹

摘要：如今随着移动互联网的到来，智能手机的普及使用，移动应用程序也随之丰富;用户对界面的审美要求也有较大的提高。對于刚入行的界面设计师（UI设计师）如何快速地、更好地设计出符合用户审美要求的界面;在界面设计时，如何找对设计方向，对板块布局、文字大小、色彩搭配，能做出一个正确的结果？该文对常见的设计问题如界面设计规范、像素网格的设置、布局大小分析以及字体规范、字行间距，色彩搭配和元素运用提出了一些解决方案。

关键词：移动手机;用户界面;界面设计

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2022）18-0071-03

开放科学（资源服务）标识码（OSID）：

对于新的用户界面设计师来说，在进行用户界面设计时，常常会为界面布局而困惑，怎样才能使某些文本块大小设置更合理，或如何增加（或减少）元素周围的空白量更加合理。对于色彩设置而言：应该更暗，还是更亮？在整个移动手机用户界面设计过程中如何遵循限制和规则？可以通过多种设计方式在用户界面中组合元素，来到达一定的效果，因此需要设置一些规范和限制，没有规则和限制可能会让设计师失去方向，试图在许多“正确”选项中选择最佳选项。通过设置一些基本规则，可以使用户界面的看起来更加一致。

1 设计规范的重要性

在界面设计前期需要先整理出一套完整的设计规范，在整个设计流程中必须按照设计规范来执行，这可以避免在设计中设计师出现思维混乱，元素使用不统一等情况。以下为设计规范的内容。

图标规范：菜单栏图标、金刚区图标、常用图标（编辑、删除、点赞等）。

按钮规范：可点击按钮、不可点击按钮。

字体规范：标题、副标题、正文、标签、图标字体。

间距规范：版块间距、字体间距、图标间距。

文档规范：设计稿文件、切图文件、标注图文件。

设计规范可以帮助设计师在进行界面设计的时，在规范内进行有效的设计与思考从而提高工作效率，对于开发人员而言，一个严谨性强的设计规范可以大大提高他们的工作效率。

2 移动手机用户界面设计的技巧

2.1 8像素网格

如何让整个界面看上去整洁干净？需要将每个版块及元素的距离设置测量值，然后确定所有尺寸。但通常情况下，最好的选择是遵守一些经过验证的规则。这些规则之一是将元素调整大小和间距使用八个像素，该规则可以简化设计。

注意px与dp：除了像素（px），dp是屏幕设计和原型设计中使用的术语。dp是dip：device independent pixels（设备独立像素）[1]。dp是一种与密度无关的像素单位，在每英寸160点的屏幕上，1dp = 1px。该单位相对于160-dpi屏幕，因此1dp在160-dpi屏幕上等于1个像素，在320-dpi屏幕上等于2个像素，以此类推。数值公式为. px = dp* （dpi/160）[2]。

所以在使用较小的元素或对象时，可以使用4像素增量而不是8像素。8是一个很大的数字，它可以被四和二整除。如果使用8，则可以轻松调整任何元素的大小而不会以半像素结束，例如 8/ 2 = 4、4/ 2 = 2和2 / 2 = 1[1]。另一方面，如果从10开始，最终会得到5个像素，然后是2.5个像素，然后是1.25个像素。在设计界面时，尽可能避免半像素。通过使用整个像素，设计中的元素才能精确地对齐像素边界，让界面看起来更清晰。

8的倍数（8、16、24、32、40、48、56、64、72、80 等）与二进制值（1、2、4、8、16、32、64、128、256 ， 512 等）[3]。

作为界面设计师，8像素网格可以提高设计效率，使设计工作更快、更高效。对于整个开发团队而言，可以创建一个8像素网格系统。可以使开发人员在需要对界面调整的情况下进行快速更改，开发人员可以以8像素为增量调整参数的值，就可以确保一致性和规范性。

同时用户在使用时体验感和视觉上也会更加舒适，对整个产品也更加信任，如图1所示。

2.2 使用网格来布置所有元素

在界面设计中如何让版块布局更加合理？设计界面时可用网格来帮助设计师准确地将所有元素放置在数字画布上。网格构成了界面的骨架，并确定了可以放置元素的位置。它定义了清晰的边界，以便设计更加一致。有了网格的参考，就可以轻松地解决元素放置的问题。随着设计经验的提高，也可以根据需要更新边界，如图2所示。

水平网格布局：

列的数量和大小可能是随机的，取决于个人的需要。设计越详细，网格所需的列就越多。

垂直网格布局：

与保持水平和谐类似，在设计中保持垂直距离一致也很重要。就像电子表格中的行一样，它们可以帮助以均匀的间隔保持文本的间距。这些行应该有多大？取决于设计内容和设计师个人。但可以使8像素或8的倍数（例如16），来定义要对齐元素或文本的边界。

2.3 布局中的空间元素

在界面设计的布局中，可以用平面设计的思维方法去理解UI界面中的空间元素结构分布和对应关系，为了使阅读更有效，使用不同的标题大小、不同的版面比例或不同的颜色背景进行层次划分，线分割和空间分割的区别在于，分割线给人一种压力感，而空间分割给人一种更放松的阅读体验。

2.4 确认字体大小

规范性较好的界面设计其字体大小都是一致性的。除了必需的系统字体以外，在banner设计上、一些入口图标上，可以用到2至3种字体。

系统字体：

Android系统中文字体为“思源黑体”， iOS系统中文字体为“苹方”。

字体大小：

首先定义整个项目中使用的关键字体大小。不要使用23px、25px、27px、29px、31px等奇数的字体，相反应使用偶数字体。标准的字体大小能使界面更加一致和美观，也可以加快设计过程并提高效率。当定义字体大小时，请确保不要以相同的增量增加大小，当放大文本时，应该是非线性的。

这意味着创建的文本越大，增量应该越大。假设一段内容字体大小为24 px的文本，如果要将其放大一点，那就应该是26px。如果是一个大标题像素为40px，并且想把它变大。并不是直接增加2px，从 40px到42px。从视觉上看，标题文本需要更大的变化。就需要将其增加24px，所以应是64px的标题。

简而言之，这意味着希望文本越大，需要使用的增量就越大。这个非常简单的原则不仅适用于文本，也适用于按钮的大小、空白区域和其他所有内容。

它通常基于几何级数。这是一个非常有用的图表，展示了字体比例，如图3所示。

对于常用的字体比例为 12px、14px、16px、18px、20px、24px、30px、36px、48px、60px 和72px[4]。

文本行高：

定义了所有字体大小，就需要注意行距。对于行高，再次使用4px的增量。例如，对于16px的文本，将行高设置为24px。如果想让文本空间更多，那么将行高增4px，为28px。这个就是所谓的“+4法则”。

2.5 定义颜色

由于颜色有着较为烦琐的组合方式，需提前制定出界面中的涉及的颜色，便于在设计时有一个清晰的方向。

首先，在整个项目中不要定义单一颜色为设计色。通常是以一个主色和多个辅助色，来定义整个界面颜色。

比较实用的方法为：同一颜色，设置多个色调，这样色调在整个设计项目中都是一致的。每种颜色的目标是5到10种色调。推荐使用每种颜色定义9种色调。

优点是颜色命名。无论使用的是图形编辑器还是CSS代码。每个阴影都将被分配一个数字，例如 100、200、300、400、500、600、700、800 和 900[5]。

其次，9是定义颜色的方便数字。准备色调的最佳方法是准备一排9个正方形并用颜色填充这些正方形。中间为基色。然后，定义最亮的阴影（最左侧）和最暗的阴影（最右侧）。下一步是选择介于两者之间的色调，如图4所示。

2.6 准备不同大小、类型和状态的元素

在进行设计时，通常会使用无数的图标、按钮和其他组件。需要提前为该元素设置多种大小不同的尺寸，但尺寸大小不能设置过多，一般设置1至4种尺寸便可。在设计过程中，不要添加其他尺寸，也不要试图调整组件的尺寸。相反，只需使用已经定义的组件，整个设计会更加一致和干净。

以按钮为例。开始时，需要定义它们的层次结构。因此，制作一个具有主要操作的按钮和一个具有次要操作的按钮，也许还需要另一个具有不太重要的操作的按钮。对于每个按钮，指定其状态（可点击、无法点击）和颜色变化。始终尝试将元素的数量减少到最重要的元素。

2.7 如何设置阴影

用户界面设计师经常在设计工作中使用阴影。然而，对于经验不足的设计师来说，阴影有时会很困难。创建阴影时，必须设置阴影沿 x 轴和 y 轴的距离，以及模糊半径、颜色和透明度。阴影可能需要大量时间来微调，这就是为什么需要在深入设计之前准备好。准备一组阴影（使用与颜色相同的方法）很有帮助，然后在整个设计过程中应用它们。

此外，请注意将使用的元素的所有其他属性，例如角半径、透明度和颜色渐变。

2.8 留白

適当的页面留白很重要。无论是从外部（边距）还是从内部（填充）偏移元素，都应该再次依赖8像素。将偏移量增加8个像素（小元素为4个）。与字体大小一样，想要的间隙越大，增量就必须越大（同样，需要提前定义这些增量）[3]。

3 结束语

想要使用户界面保持干净且一致，需要在设计前定义一些边界和清晰的流程路径。在处理设计的每个元素时，请记住以下几点：

是否已经在设计中的某个地方使用过它。如果是这样，可以简单地复制该元素。

遵循水平和垂直节奏，并使用开始时定义的步骤调整元素的大小。

避免复杂的决策和无休止的像素调整。

不要多次创建相同的元素。如果在界面设计前期，设定了标准的设计规范，那么在界面设计工作时就会更好更有效率，能更快地迭代，设计师能更轻松地与开发人员沟通。开发人员也将设遵循设计师设计样式的变量，因此请明确定义设计规范。将获得简洁的设计，开发人员将能够创建更好、可持续的代码。

参考文献：

[1] 刘春骅.应用中国元素创新UI界面设计的对策探讨[J].艺术科技，2017，30（12）：108，186.

[2] 严晨，柴纯钢，徐娜.多媒体界面设计[M].北京：电子工业出版社，2011.