本文讲解UCD 以用户为中心的设计，不只是界面技巧，而是一套完整方法论，强调把用户纳入产品开发全周期，给出完整实操流程、调研手段、需求过滤方法。

本文剖析 UX 设计里唯数据论的风险，提出数据只可以作为探测工具，不能独自决策；需要将客观数据、设计师的场景直觉、用户主观反馈三者结合，建立完整决策闭环。

兰亭妙微ui设计公司分享：UI 设计有成熟的设计规范，原型图同样也需要一套自己的设计准则。

一切图形化表达的载体，制定规范最大价值就是提升信息传递效率。人是视觉动物，排版整洁的原型更容易获得关注；而杂乱无序的原型，会给阅读者直接传递出逻辑混乱的主观感受，这就是原型的 “卷面分”。

本文就来聊聊原型图的规范化怎么做。 所谓规范，就是建立一套统一执行标准，涵盖元素样式、布局排布、色彩运用等维度。 但原型不等于 UI 高保真，不需要做到像素级抠细节。绘制原型要兼顾时间成本与工作效率，产品经理的核心精力应当放在方案设计、需求文档撰写上。规范只是一套参考标尺，我们在绘制时尽量向标准靠拢即可。

原型图 12 项规范化方法

1. 尺寸规范

手机、PC、平板、车机等不同终端产品，首要差异就是画布尺寸，绘制原型前要先确定画布基准。

• 移动端：推荐首屏画布 375×667px（iPhone8 基准尺寸），这是原型最小首屏高度，内容过长直接向下延伸画布高度即可。
  • 状态栏：375×20px
  • 导航栏：375×44px
  • 底部 Tab 栏：375×49px

  该尺寸流传广，大量 Axure 组件库基于此开发，适配性更好，也可选用其他主流手机尺寸，不作强制限制。

• PC 端：推荐 1440×900px。 虽然当下主流显示器分辨率为 1920×1080，但 1440 宽度可以实现 “原型画布 + 需求说明” 在同一屏幕完整展示，无需左右滚动查看，评审体验更佳。

  

• 平板端：推荐 768×1024px。

  

2. 颜色规范

根据项目是否有 UI 设计师介入，区分两套配色思路：

1. 有 UI 参与项目：优先使用黑白灰中性色。 可以直接取用 Axure 自带色板，也可参考大厂设计系统的中性色定义，不必花费大量时间调试色彩。如果使用自定义色值，可以收藏到 Axure 色板，方便复用。

   

2. 无 UI 参与项目（大多后台管理系统）：可以适度增加功能色。 后台多为内部系统，一般基于 Ant Design、Element 等成熟组件库开发，可选用蓝色作为主色；红绿黄用作语义色，分别代表成功、警告、错误状态。

   

3. 文字规范

文字规范包含字体、字号、字重、行间距，直接决定页面信息层级。

• 字体：优先使用 Axure 默认Arial；苹方、微软雅黑显示效果更好，但如果协作方设备未安装对应字体，导出后会发生字体错乱，这点需要留意。

  

• 字号 & 字重（基于 375×667、1440×900 基准画布）

  表格

  层级	字号	字重	颜色
  一级标题	20px	加粗	#000000
  主标题	18px	可选加粗	#000000
  次标题	16px	可选加粗	#000000
  小标题	14px	可选加粗	#000000
  正文	14px	可选加粗	#000000 / #333333
  辅助文字	12‑14px	常规	#333333 / #555555
  次级备注文字	10‑12px	常规	#555555 / #7F7F7F

简易记忆技巧：以 14px 正文为基准；层级越高，字号 + 2、加粗、颜色加深；层级越低，字号‑2、常规字重、颜色变浅。画布尺寸放大时，字号同步上调。

• 行间距：原型中优先级较低，Axure 会根据字号自动适配；大段文本场景下，可手动加大行间距提升可读性。

  

4. 图标规范

原型图标追求表意，不追求精致还原：

1. 图标 + 文字组合：直接用圆形、矩形占位，不使用系统自带难看占位符，选用浅中性色。表意模糊时，直接附加文字标注（icon、扫一扫、设置等）。
2. 纯图标场景：从 iconfont、IconPark 下载 SVG 图标，粘贴进 Axure 使用。
3. 无 UI 介入项目：产品经理选定图标源文件，交付前端开发。

5. 图片规范

原型中不需要真实业务图片，统一用矩形占位，标注img/ 封面 / 头像等说明文字，不使用 Axure 自带图片元件。 可以约定图片宽高比例：1:1、4:3、3:2、16:9，不强求严格执行，用于统一页面观感。

6. 圆角规范

圆角在原型中权重很低，UI 阶段才会精细定义。如果要设置圆角，建议选用 2 的倍数，直角、圆角两种形式原型均可。

7. 阴影规范

原型阴影非必需。如需添加，统一设置色值#000000，透明度 30%，模糊 5，保持全局统一。

8. 对齐规范

对齐是版式基础，善用工具对齐功能：左对齐、右对齐、顶部对齐、底部对齐、居中对齐。

Axure 实操提示：多选元素后使用顶部工具栏对齐；以第一个选中组件作为对齐基准；不同模块先Ctrl+G组合，再执行对齐。

9. 分布规范

重复出现的同类元素，使用水平 / 垂直平均分布，保证元素间隙完全一致，页面更加整齐。

实操提示：不同子模块需要先组合，再执行分布。

10. 间距规范

间距区分模块间、子模块间、元素内部间距。 移动端建议以5px 倍数调整间距；PC 端画布更大，以10px 倍数调整。 遵循亲密性原则：同一信息组间距小，不同信息组间距拉大；也可以配合对齐、分布工具自动生成间距，不必死记像素。

11. 组件规范

组件就是可复用的元件组合，对应设计领域的原子化设计思路。 把尺寸、颜色、文字、间距等基础规则确定后，把基础元件拼装成按钮、弹窗、表单、卡片等通用组件，搭建个人 / 团队组件库，后续绘制原型可以直接复用，保证全项目原型风格统一。

12. 内容贴合真实业务

原型尽量填充贴近上线的真实业务内容，重点覆盖极值场景：数据最多、文字最长、多状态并存等边界情况。

• 多个相同列表模块：一个模块填写真实示例，其余模块可以使用字段名；
• 同一个组件有多套业务状态，原型把全部状态都表现出来，提前暴露布局风险。

写在最后

建立规范是为了高效落地，不是僵化束缚。绘制原型时尽量向标准靠拢，长期训练形成良好习惯。一份整洁规范的原型，在面试、项目评审中，都是非常重要的加分项。

但切记不要过度拘泥规范，原型的核心使命是清晰表达产品功能逻辑，它不是 UI 高保真图。对产品新人而言，原型是基本功，但功能方案永远是第一位。

转载：人人都是产品经理

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

让每天的小事，都能被温柔而清楚地提醒。

兰亭妙微专注 UI 与用户体验设计，持续关注国内外优秀作品，分享界面设计与交互思路，进行设计审美积累。今天分享 Wellness，一组围绕长者日常、用药提醒与情绪记录展开的关怀型 App 设计。任务、沟通和回顾被放进同一套柔和界面中。

一、项目背景：为不同日常任务建立熟悉感
查看今天的安排、确认用药、回顾心情，这些动作需要不同内容，也需要容易辨认的共同规则。Wellness 用重复的卡片与主动作，把分散事务串成连续的日常节奏。

 图 1  当日活动的任务卡片

时间、图标与活动名称集中在任务卡片中，前后排列呈现当天计划的节奏。紫色背景让白色卡片浮现，黄色按钮接住主要动作，轻柔配色也有清楚的任务焦点。

图 2  位置 用药与语音沟通

位置、用药与视频留言分别使用地图、提醒卡片和人物画面，同一套紫色与黄色贯穿其中。场景不断切换，圆角组件和按钮关系仍然熟悉，日常关怀因此保持连贯。

二、设计策略：用柔和底色与醒目动作保持亲和
①信息架构：当日任务、位置、沟通与记录各自成组，先呈现当前事项。②视觉语言：紫色空间容纳白色圆角卡片，黄色标出关键动作；图标、人物画面与较简短的说明共同营造照护氛围。

Wellness Aging Care Mood and Meds | 界面细节与设计启发    

图 3  一周心情与当天记录

一周心情以趋势线展开，当天记录通过白色卡片补充时间与文字。总体变化与具体心绪放在一起，让数据回顾保留个人生活的细节，画面也显得柔和、舒展。

图 4  心情 日历与提醒的一致布局

这组并列界面展示心情确认、日期选择与用药提醒。黄色动作、圆角卡片和顶部层级重复出现，共同支撑不同任务；同样的视觉规则让每天的操作逐渐形成熟悉感。

③场景化交互：任务卡片围绕时间展开，用药与沟通页面沿用相近的动作位置，心情页把周趋势与当天记录连接起来。不同事情拥有熟悉的页面节奏，也保留各自需要的图形与信息。

三、设计启发：关怀感也来自稳定、可辨认的重复
紫色与黄色提供情绪印象，持续出现的卡片、层级与动作则建立熟悉感。做长者服务或日常健康产品时，可以积累这种温和表达；真正落地还要把字号、对比度与触控范围放到实际使用中检验。

如有养老服务、日常健康管理类 App的 UI/UX 设计需求，欢迎联系兰亭妙微，交流产品场景与设计需求。

兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

文章将用户行为数据分析与以用户为中心的设计（UCD）相结合，讲解数据指标、分析价值、UCD 评判标准、实践要点，探讨什么时候要遵循用户习惯，什么时候可以适度颠覆习惯。

文章引用唐・诺曼观点：产品不是孤岛，是一套完整聚合的综合体验，要覆盖从初次使用、帮助服务到后期维护全链路站酷(ZC...。本文厘清 UX、UI、可用性概念，完整讲解一套 “卓越体验计划” 的设计思想、项目流程、调研与设计产出要点。

一套品牌素材经常要同时进入官网首屏、手机页面和社交平台。第一次做出满意的画面之后，下一次换商品、换尺寸，还能不能保持同一种气质？今天兰亭妙微分享 Figma 介绍 Weave 的近期文章。它把图片生成和编辑组织在相互连接的工作步骤中，方便团队回看与复用。我们更想借这篇文章聊聊：在持续的 ui设计服务 中，怎样把品牌判断、素材版本和交付要求留在流程里。

手机界面的动效很适合拿来做灵感积累：卡片展开、商品切换、底部导航回应手势，都能让页面更有记忆点。真正要继续讨论方案时，我们还需要知道它被什么动作触发，结束后落在哪个状态。今天兰亭妙微分享 Figma 近期介绍代码图层应用的一篇文章。原文包含多个团队的探索画面，我们结合其中的手机UI展示，聊聊移动端UI设计怎样把动效变成能够一起推敲的原型。

地图界面很容易显得丰富：底图、路线、标记和侧栏都能往里加。真正难的是，当人带着一个具体问题看图时，能不能迅速找到线索。今天兰亭妙微分享 Figma 对 Lufthansa Systems 设计团队的访谈，原文讲到他们用更接近真实数据和行为的原型讨论复杂地图。对交互设计公司的方案工作而言，这也是一个很好的阅读入口。我们借此聊聊信息层级的设计判断，后文园区和物流场景为独立概念讨论，不是航空操作规范。

桌面软件里，一个数值、一行状态和一个操作按钮，经常需要共同说明同一件事情。界面能画出来之后，真正费心的是它们在不同状态下能否保持一致。Qt 官方近期介绍了面向 Rust 和 C# 的 Qt Bridges 技术预览：界面使用 QML 与 Qt Quick，后端继续使用对应语言。今天兰亭妙微借这条更新，分享 QT界面开发前值得先讨论清楚的设计问题。下文设备场景为概念示例，配图不代表 Qt 官方演示或已经实现的客户系统。