解锁手机界面设计全攻略：从基础到实战

一、手机界面设计是什么意思

手机用户界面是用户与手机系统、应用交互的窗口，手机界面的设计必须基于手机设备的物理特性和系统应用的特性进行合理的设计。手机界面设计指的是专门为智能手机的屏幕设计和构建应用程序（App）或网页的视觉外观、交互方式和用户体验的过程，包含两个核心层面：UI 和 UX。这是个复杂的有不同学科参与的工程，其中最重要的两点的就是产品本身的UI 设计和用户体验设计，只有将这两者完美融合才能打造出优秀的作品。

二、手机界面设计分类

1、手机操作系统界面设计

一般的手机操作系统都是指智能手机的操作系统，主要完成网络、流媒体等功能，一定程度上取代电脑成为网络终端。手机操作系统界面设计需要从整体风格到细节图标、元素的全面把握，另外还需要掌握一定嵌入式方面的技术知识。

2、手机应用界面设计

手机应用作为手机第三方程序，已逐渐把用户带入使用本地客户端上网的时期。手机应用种类多样，其中一些应用软件功能类似，但都在设计与使用上有所差异，“良好的用户体验”已成为 APP 竞争的标配。

三、手机界面设计原则

1、对齐原则

对齐是手机 UI 设计中最基本也是最重要的原则之一。对齐可以让手机界面有一个整齐的外观，同时给用户带来一致性且流畅的浏览体验。

2、对比原则

对比原则主要通过尺寸、色彩、造型等的改造突出界面中的重点元素，从而引起用户的关注。对比可以使手机应用开发的层级更加清晰，同时还能聚焦用户视线，让用户的焦点放在我们想让他们看到的元素。

3、亲密性原则

亲密性原则主要是将相关的同类元素靠近，同时远离不相关的元素。亲密可以提高手机 UI 设计的可读性，以及清晰地区分好界面中的各个层级。

四、手机界面设计尺寸规范

1、PS 工具设计 IOS 界面

(1)、画布尺寸

新建 750×1334 分辨率 72，像素/英寸。

(2)、常见的字体大小

24px、26px、28px、30px、32px、34px，36px 等等。记住是偶数的。最小字号 20px。

(3)、常用字体

中文用苹方黑，英文用 San Francisco，如果安不上也可以用 Helvetica 代替。

(4)、界面里的小图标常见的尺寸

注：ios 开发里单位是 pt。750×1334 尺寸的换算关系 1pt = 2px，也就是说程序员拿到我们的 px 单位的标注稿，自己除以 2 就是 pt 了。24px、32px，48px 等，记住 4 的倍数比较好。注意图标的尺寸要统一尺寸，以眼睛观察为主调整尺寸看上去一样。方形的比圆形的看着要大，需要调整下。

界面上的间距和元素尺寸

以偶数为单位，不清楚的可以截图量大公司的 APP 界面作为参考。750 x 1334 设计稿尺寸：状态栏高度：40 px；导航栏高度：88 px；标签栏高度：98 px。

2、PS 工具设计安卓界面规范

(1)、画布尺寸

如果想一稿适配 ios，那就新建 720×1280 分辨率 72，像素/英寸。如果单独设计安卓 MD 新规范的，那就新建 1080×1920 分辨率 72，像素/英寸。

(2)、720×1280 常见的字体大小

24px、26px、28px、30px、32px、34px，36px 等等。记住是偶数的。最小字号 20px。

(3)、常用字体

中文用 Noto/思源黑体（是一个字体，叫法不同而已），英文用 Roboto。

(4)、界面上的间距和元素尺寸

最新规范 MD 的做法：8dp 原则：栅格系统的最小单位是 8dp，一切距离、尺寸都应该是 8dp 的整数倍。常见一般常用做法：直接把 ios 的设计稿照搬过来，只不过状态栏，导航栏，标签栏按照安卓的来。720 x 1280 设计稿尺寸：状态栏高度：50px；导航栏高度：96px；标签栏高度：96px。

五、手机界面设计流程

1、产品需求分析

当一个 UI 设计师拿到项目或者需求之后，正常情况是交互设计师细化过后的交互文档，里面包含交互原型。而作为 ui 设计师所要做的就是理解并吃透文档，包括里面交互逻辑，具体的操作方式，流程，反馈等，需要不断核对和确认。

2、深层次的用户体验研究与分析

对已定义的目标用户群体及特征进行深层次的剖析，包括目标用户群体的年龄，性别及目标户群体的一些情感习惯，心理特征等，这样就可以有针对的对这个产品构想设计出一个大概的色系搭配及元素控件设计。

3、初稿设计

结合产品设计原型和自己对产品的体验研究分析结合起来设计初稿。（大概的色系搭配，框架布局，元素控件，图标 ICON 等设计都可以在这一步呈现出来）

4、视觉规范设计及细节优化设计

初稿设计完成后，就是要做好视觉规范设计及细节优化设计。视觉规范设计就是要对整个产品的颜色，字体，字号，元素控件，图标 ICON，间距及交互效果做个统一的规范，这样才可以做出一个成熟的产品，对前端制作也是有很大的好处的。

5、前端对接

确认完设计稿后，进入 ui 设计师与前端工程师对接的阶段，ui 设计师需要提供切图，标注，设计说明文档以及设计图给到前端工程师。这个阶段需要保持跟开发频繁地沟通，确保可以很好地还原设计稿（实际工作中很难苛求百分百还原），特别是需要设计师自身要懂得一点前端代码知识，可以更好地进行沟通。

6、测试与反馈

产品进入到测试阶段，需要测试人员介入，一般这个时候是先部门内部进行可用性测试，然后扩大到整个公司，反复测试几轮之后确保没有很大的问题之后才可以发包给客户测试或者上线，而 ui 设计师这个时候就要收集反馈，收集意见，与产品一起讨论改进方案。

六、手机界面设计注意事项

1、按钮状态

一般按钮会有四态，不可点击效果、可点击效果、聚焦状态、按下状态。如果你的按钮此时处于不可用状态，那么一定要灰掉，或者拿掉按钮，否则会给用户误导。

2、菜单层次太深

菜单项以 4~6 个为宜，如果有二级菜单，就要注意合理的菜单分类，不能有太多层级的菜单，否则很难预期，也很难找到，寻找和返回都会变得很麻烦。

3、文字过于沉余

手机界面很小，寸土寸金，一页只能显示下 6~10 个列表，一行只能显示下 16~24 个字，标题栏的字数以 5 个以内为宜，标签栏也以 2~4 个为宜，那么这时候出现文字过长的情况，一定要定义一下处理方式，如果是选择型的，一般是截断或者打点缩略；如果是内容阅读型的，可以折行。但最合理的方式还是精简文字内容，缩短文字长度。

4、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终，用户是为了完成某个任务而使用软件的，交互设计师除了关注界面元素、跳转逻辑和交互反馈之外，还要关注用户任务，分得清主要任务和次要人物，给主要任务一个畅通无阻的清晰流程，不要给予太多可能的分支，干扰主要流程。

5、相关的选项离的很远

UI 设计中相关选项一定要具有操作上的延续性，虽然手机屏幕看起来比电脑屏幕要小的多，但是手机在屏幕上移动的代价，却要比鼠标在电脑上移动的代价大的多，如果手机上相关选选离得很远的话，用户一是容易迷失，找不到下一步操作，二是需要移动手指，到屏幕另一端触发操作。

6、点击范围过小

我们都知道移动端有个神奇的数字"44"，根据食指最小点触距离 7mm、拇指最小点触距离 9mm，可以推导出做设计的时候，最小的点触距离是 44*32 px。你可以设计一个精美的小图标，但是在定义它的点触大小的时候，却可以做放大处理，但你千万不要设计一个傻大的图标，点触范围却比图标要小，这样会给用户带来明显的误操作挫败感。

7、尽量减少用户的文字输入操作

这一点非常得要，因为受手机硬件设备的限制，在手机上输入文字依然不是很方便，企业手机网站制作时为了能够给用户带来方便，一定要尽可能的文字输入操作给用户带来的麻烦。如用户名、密码等操作应尽量简化。

七、手机界面设计常用工具

1、Adobe Photoshop

Adobe Photoshop 是一种优质的网页设计工具。它有很多选项来创建和编辑您的 Web 模板。它适用于图像，您可以为您的网页设计创建图形。通过无限的颜色和渐变选项，可以制作出最佳的模板设计。它为您提供了一个空白的画布，让您的想象力生动。您可以按照自己的方式附加图像，移动元素，绘制框，裁剪边缘以及编辑模板。它适用于图层，这使您的工作非常简单。您可以显示/隐藏图层以有效管理 Web 设计元素。

2、Sketch

Sketch 是适用于 Mac 设备的网页设计软件。它是专注于创建 Web 模板和设计的专业工具。它适用于矢量图像，因此您将获得最佳，最高分辨率的结果。工具栏和选项非常简单。Sketch 提供了创建和管理 Web 设计项目的完全灵活性。它具有镜像功能，允许在多种设备（如手机或平板电脑）上测试您的网页设计模板，可以 100％确定您的网页设计将如何在不同的屏幕尺寸上显示。

3、Figma

Figma 是一个多用户网页设计软件。它允许您与设计团队联系以使用相同的 Web 模板。它是与客户共享项目并在模板设计上进行实时更改的智能工具。Figma 将网页设计提升到一个全新的水平，它的编辑面板中包含字体，颜色和其他设置。用于创建图标或完整的 Web 模板时，工具和选项非常棒。

4、Adobe Illustrator

Adobe Illustrator 提供了一个完美的像素级设计环境，您可以在其中创建灵活且流畅的 Web 元素。它为您提供了创建清爽利落的 Web 布局所需的一切，包括矢量图形、响应式媒体图标、可伸缩组件、CSS 生成、SVG 导出、线框以及可重复使用的符号。

5、Adobe XD

adobe 家打造的一款集页面设计和交互原型为一体的设计工具，支持多人在线实时协作功能。另外在兼容性上优势最大，能跟全家桶产品进行联动；但是在资源和功能这两方面相对于前面两款就比较弱势了。

6、Canva

Canva 是一款免费的设计工具。它不能被认为是一个成熟的网页设计软件，但你可以使用 Canva 创建有趣和有吸引力的设计来支持你的网页模板。它非常适合构建可以添加到 Web 设计中的图像。它配备了数百个模板，使您的工作更轻松。如果您没有任何设计技能，可以使用 Canva 中的模板，轻松地为您的 Web 模板构建具有专业外观的图像。