UI设计| 002

上期我们搞清楚了UI设计是什么、移动UI设计做什么。  今天更进一步，设计要在哪些系统上运行？要和哪些人配合？用什么软件才能高效产出？ 最后我们还会亲手分析一个茶道App的用户需求，把理论变成实战。

一、移动端UI设计平台：你的设计要跑在哪些设备上？

移动UI设计不是一稿通吃。不同操作系统有自己的设计规范，比如导航方式、字体、间距、图标风格都不一样。

1. Android（安卓）

全球用户量最大的系统，由Google主导。  

设计规范：Material Design（材料设计），强调卡片、阴影、真实物理动效。  

适配难点：屏幕尺寸和分辨率极多，需要做响应式布局。  

常用单位：dp（密度无关像素）。  

2. HarmonyOS（鸿蒙）

华为推出的分布式操作系统，不仅用于手机，还用于平板、车机、智能家居。  

设计特色：万能卡片，可以在桌面直接展示信息，无需打开App。  

设计工具：华为官方提供鸿蒙设计套件（Figma插件等）。  

注意点：需要同时考虑手机、平板、折叠屏的切换体验。

设计工具：华为官方提供鸿蒙设计套件（Figma插件等）。  

注意点：需要同时考虑手机、平板、折叠屏的切换体验。

3. iOS 和 iPadOS

苹果的移动系统，设计规范叫Human Interface Guidelines（人机界面指南）。  

设计特点：大圆角、半透明毛玻璃效果、边缘手势返回。  

适配：iPhone有刘海/灵动岛，iPad支持分屏和Apple Pencil。  

单位：pt（点），与px有换算关系（@2x、@3x）。

4. Wear OS 和 watchOS

智能手表系统，屏幕极小。  

设计原则：一眼可见，一触即达。 

不要做：密密麻麻的按钮、需要精确点击的小元素。  

常见场景：消息提醒、心率显示、计时器。

二、移动UI设计常用软件：选对工具，效率翻倍

下面这些软件不需要全部精通，但每个类别至少会一个

1. 思维导图与原型：XMind 和 Axure RP

XMind：做用户旅程地图、功能结构图。在画界面之前，先用思维导图理清App有哪些页面。  

Axure RP：老牌中保真/高保真原型工具，可以做复杂的条件判断、动态面板。适合做交互演示给开发看。

2. 图像处理与矢量设计：Photoshop 和 Sketch

Photoshop：处理图片、合成、切图。不适合做UI布局。  

Sketch：曾经的UI设计王者，只支持Mac。特点是符号和共享样式。

3. 新一代协作工具：Adobe XD 和 Figma

Adobe XD：轻量级，与PS、AI联动好，但协作功能弱。  

Figma：目前行业标准，免费、网页端、多人实时协作、自动切图、设计稿在线分享。强烈推荐新手从Figma学起。

4. 标注与切图辅助：PxCook 和 Assistor PS

PxCook（像素大厨）：把设计稿拖进去，自动生成标注，开发可以直接看。  

三、任务一：分析移动UI设计的需求（以茶道App为例）

1.5.1 任务分析——移动UI设计需求分析

以茶道App为例：

| 维度 | 分析结果 |

|------|----------|

| 目标用户 | 25-45岁，对茶文化感兴趣，有一定消费能力，喜欢慢生活 |

| 使用场景 | 在家泡茶时看教程、买茶叶时比价、在茶友社区发帖交流 |

| 核心痛点 | 想学茶道但没人教；买茶叶怕被坑；找不到同好交流 |

| 核心功能 | 视频教程、茶叶商城、社区论坛、泡茶计时器 |

1.5.2 任务实施——茶道App的用户分析

我们可以画一个简单的用户画像：

姓名：XXX 

年龄：XX岁  

职业：互联网公司运营  

茶龄：X年

每天使用场景：  晚上8点，饭后想泡一杯普洱，打开App看“熟普冲泡教程”  周末想买一款红茶，在商城看评分和评论 ,偶尔发帖问“紫砂壶怎么开壶”，收到老茶友回复 

设计启示：  教程页面要有清晰的步骤进度条,商城要有“入门推荐”专区,社区发帖要支持上传图片和视频

需求文档输出：

功能列表：首页（推荐教程/茶叶）、学堂（分类视频）、商城（商品列表+详情）、社区（帖子列表+发布）、我的（个人中心）  

非功能需求：加载速度快、支持暗黑模式、字体可调节大小（照顾中老年茶友

四、避坑：移动UI设计新手最常见的3个误区

1. 只用一种尺寸设计  

  只在iPhone 15 Pro Max（390pt）上画图，到了小屏iPhone SE上按钮挤成一团。  

  解决办法：使用Figma的自动布局和约束，并经常在多种尺寸预览。

2. 忽略手势与拇指热区  

  把重要操作放在屏幕左上角。  

  解决办法：把发布，购买等核心按钮放在屏幕右下角。

3. 不给开发留状态” 

  只画了理想界面，没有画加载中、无网络、空状态、错误提示。开发上线后，用户看到空白页面以为App坏了。  

  解决办法：为每个界面补充至少4种状态：默认、加载、空数据、报错。

五、总结拓展

1. 四大移动平台的设计差异（Android、鸿蒙、iOS、手表系统）。  

2. UI设计必须配合的三种角色（产品、视觉、后端），以及如何高效沟通。  

3. 常用工具链：XMind（结构）→ Figma（设计）→ PxCook（标注）。  

好的UI设计师不仅是画图员，更是用户体验的翻译官。多去了解开发原理、多和产品经理聊业务、多观察真实用户怎么用手机，你的设计才会有灵魂。

六、测试

选择题

1. 以下哪个是Android的设计规范名称？  

  A. Human Interface Guidelines  

  B. Material Design  

  C. Fluent Design  

  D. Harmony Design

2. 开发说“你只画了有数据的情况，那网络断开时显示什么？”请问这是UI漏画了什么状态？ 

  A. 加载状态  

  B. 空状态 

  C. 错误状态  

  D. 所有状态

判断题

1. Figma只能用在Mac上。（ ）  

2. 手表UI设计可以把手机上的复杂表单直接缩小放上去。（ ）

创新题

请你为“茶道App”设计一个泡茶计时器的界面：  

要求能选择茶类（绿茶、红茶、乌龙茶等）  

每个茶类有推荐冲泡时间（秒） 

有一个大大的倒计时数字和开始/暂停按钮  

倒计时结束时震动并响铃 

答案下期公布

可以把你的设计草图发到公众号后台，我会挑选优秀作品在下期展示。

优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！

优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。