兰亭妙微ui设计公司分享：不管是前台PM还是后台PM，在工作中或多或少都要进行原型设计。原型可以说是产品、开发、测试之间进行交流沟通最重要的文档之一，那么怎么把原型画得又快又好呢？

从设计流程上看，原型设计节点包括但不限于梳理需求大纲、规划页面结构、完善信息结构、绘制原型及进行说明标注。前面三个节点个人有个人的方法，今天主要想和大家分享一下后两个——绘制原型及说明标注的提效小技巧，希望对你有帮助。

一、制作全局说明

通俗地说，全局说明就是那些你懒得写第二次的东西。比如说网络异常/加载失败/没有数据，这些这是任意页面都可能会碰出现的情况，如果分开写，每个页面都要写一次，改的话得同时改很多地方，费事费力而且不利于需求的统一管理。所有，把这些通用性的东西写在一个地方，既可以简洁原型文档，降低开发、测试、设计等人员的阅读成本，又可以少写点字，何乐不为呢？

全局说明可以是适用于全文档的，也可以是适用于某个迭代的。像是一些和迭代相关度高的名词解释。写在全文档性的说明里就有些冗余，写在迭代内全局说明中就刚刚好（个人见解）。

根据通用性，可以将全局说明分成两种：通用说明和业务说明。通用说明是在大多数产品/页面内都可以通用的，比如页面状态、加载状态、通用手势、弹窗遮罩等；而业务说明则不同，这类说明和业务高度相关，相同内容在不同业务间有较大差异，比如时间展示规则、昵称长度等。下面给大家举几个栗子：

1. 通用说明

移动端全局说明具体可见浪子写的文章，很详细：https://zhuanlan.zhihu.com/p/22270169

2. 业务说明

最近一条消息时间展示规则：

图中是微信的展示规则。手动试出来的，不对的地方欢迎指正。

最近一条消息展示规则：

图中微信的展示规则。手动试出来的，不对的地方欢迎指正。

产品上架/下架/浏览时间展示规则：

第一版设计的规则里跨年时间也是带「时时:分分」的，后来因为产品列表地皮实在放不下，就把后面的具体时间砍掉了（都跨年了，具体时间没那么重要了叭）。所以具体的展示规则是和实际系统密切相关的。

二、建立字段说明表

可以把用到的数据用表格的形式罗列出来，清晰且一目了然。

三、取用元件库进行原型绘制

在绘制原型时，有一些控件会被经常用到。如果每次用到都重新制作，不仅无法保证交互效果的统一性，而且会占用很多工作时间。为了咱岌岌可危的发际线，我向大家使用Axure元件库功能。

什么，你说Axure自带的元件库丑？

网上有不少大公司的设计的元件库，找个你喜欢的导入就行。比如蚂蚁金服、饿了么、有赞等。

什么，你说懒得找？

那我这给大家推荐几个。

1. Vant 移动端组件库

非常全面的一个组件库，自带交互。除了通用组件，还有带有电商业务组件，用来绘制移动端原型很方便。

设计网站：Zan Design

资源下载：Zan Design 移动端元件库

2. Ant Design 移动端组件库

支付宝风格的组件库，组件没有Vant那么多，但是通用性强。

设计网站：Ant Design

资源下载：Ant Design 移动端元件库

3. Ant Design 后台组件库

这个不用多说了吧，后台产品必备。UI 样式可配置，拓展性强，大多数产品风格都能轻松适应。

设计网站：Ant Design

资源下载：Ant Design 移动端元件库

大厂设计的组件库当然不错，但是用起来也会碰到一些问题。比如和自己的设计风格不一致呀，有无用的组件呀，部分组件需要微调等等。所以建议每个PM都自己积累元件并长期更新。不用一次完成，平时工作中碰到新的就维护进去，这样不会占用很多时间，而且可以保证原型整体的视觉统一。

我司后台部分用的是蚂蚁金服组件库，基本不用修改，所以没有制作元件库。APP端因为有些特殊组件，通用组件库里没有就积累了一些，基本是Ant Design 和Vant 的混合版，这里就不献丑了……

四、建立交互需求说明库

如果系统用的是某个开源的UI项目的话，组件的交互基本都是确定好了的，交互说明文档可以少些甚至不用写。如果没有用开源项目，所有的轮子都是百度或者自己造的话，那交互说明文档就必不可少了。碰到一些常见、使用频率高的组件，可以建立一个“交互说明库”，用到的时候贴一个链接或者copy一下，可以减少开发的理解成本。

PM或多或少会碰到被开发围攻的情况，大部分情形可能都是因为需求描述不准确导致的。如果有一个规则模板参考，是不是就可以减少遗漏的情况呢？

需求说明基本分为三个部分：需求说明、交互说明、交互预览。

1. 需求说明一般包含：前置事件、后置事件、初始化、加载/分页、排序、正常和异常结果等，具体看组件类型；
2. 交互说明一般包含：不同组件的说明会有较大差异，如果想描述得很详细，可以参考开源项目的API文档；
3. 交互预览一般包含：输入状态/选中状态/聚焦状态、禁止状态、加载状态等等。

五、进行交互自查

输出完后先对照交互自查表把每个细节梳理一遍，让原型更加更加全面和缜密。

自查表是之前存的，忘记是哪篇文章了。如果你知道的话欢迎补充～

好了，以上就是个人平时画原型积累的一些技巧和感悟，完全是出于个人习惯和主观经验得来的，欢迎评论区一起探讨。

参考文章：

1、浪子，善用Axure写PRD，全局规范一个都不能少

2、交互设计自查表

转载：人人都是产品经理

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

一、下达指令前，先绘制线框图

兰亭妙微ui设计公司分享：直接用文字描述需求，AI 很容易在布局上自由发挥。我们可以先用 Excalidraw 白板工具，用简单方块、线条搭建页面框架，截图后交给 AI，补充指令：按照这张线框图还原 UI 结构，输出的精准度会大幅提升。

举个例子，当你只输入文字 “帮我做一个登录表单”，AI 需要自行脑补大量不确定细节：Logo 靠左还是靠右？第三方登录按钮放在表单上方还是底部？

纯文字指令会留下大量信息空白，AI 只能依靠自身理解去补全，最终效果往往和预期偏差很大。而提供线框图，可以让 AI 从 “自由想象” 切换为 “临摹实现” 模式。

实操步骤：

1. 使用 Excalidraw，仅用方块、线条勾勒页面整体布局；
2. 将绘制完成的线框截图；
3. 提交截图，附带指令：按这张线框图实现 UI 组件。

二、拆分组件，投喂参考截图

在 Dribbble、Pinterest 看到心仪的 UI 效果，不要直接把整页截图丢给 AI。正确方式是按组件拆分，局部投喂参考素材。

导航栏、价格卡片、首屏视觉区、页脚，分开截取每一个模块的效果图。完整页面的信息体量过大，一次性输入容易造成 AI 理解混乱。分开指定：“导航栏参考这张图的风格”“价格卡片沿用该布局”，才能拿到高还原度结果。

我在使用 Claude Code 开发前端时，也习惯直接上传 Figma 稿或者组件截图。“做得好看一些” 这类模糊文字，每一次都会被 AI 解读出不同效果；一张局部截图，就可以精准传递你的设计感受。

三、制作情绪板，锁定明确配色

即便提示词反复强调 “现代、温暖”，AI 依旧高频输出标志性的蓝色调界面。

问题不在于 AI 能力，而是抽象形容词本身没有统一标准。同样是 “温暖”，可以是橘调、米调，也可以是陶土色系，人与人之间理解尚且存在分歧，更难让 AI 精准拿捏。

改用情绪板传递色彩需求，效果会稳妥很多。

实操步骤：

1. 收集 3‑5 组你喜欢的配色方案；
2. 制作情绪板图片，整理色板并标注完整 HEX 色值；
3. 搭配提示词：UI 配色严格参考这套色板。

四、编写代码前，预先定义设计系统

正式生成代码之前，先把品牌色、字体、间距栅格、圆角等基础规则全部确定，再给到 AI。

不少 Vibe Coding 产出的项目观感零散拼凑，根源就在这里。不同页面之间，色彩、字重、按钮间距、卡片圆角数值来回变动，8px、12px 随意切换。每生成一个新页面，AI 就会重新解读一次 “好看”，全局视觉一致性就此瓦解。

我的实操方案：把 Design Tokens 写入CLAUDE.md配置文件。定义一次，全项目所有页面自动复用同一套视觉规范。如果跳过这一步，哪怕单个页面再精美，整套产品界面依旧会割裂杂乱。

五、使用设计 Skill，建立禁止清单

目前有大量面向 AI 设计的 Skill 工具，内置成套的风格、配色、字体规范，能够有效规避流水线式 AI 设计。

除了调用现成 Skill，我会在DESIGN.md文档中，整理一份明确的禁止清单：

1. 禁止生成蓝紫渐变类 AI 默认渐变效果
2. 禁止使用 Inter 字体
3. 禁止仅使用 Lucide 图标库
4. 禁止直接套用系统默认样式

告诉 AI “不要做什么”，和告诉它 “需要做什么” 同等重要。当没有约束指令时，AI 就会回退调用内置默认模板；明确禁用默认选项，才会驱动它产出差异化的设计。

六、以截图标注作为核心修改沟通方式

修改界面切忌笼统描述 “把这里做得好看点”。AI 擅长临摹具象信息，却很难读懂抽象感受。

不要说 “这里留白再大一点”，直接在截图圈选区域标注：此处留白修改为 24px； 不要说 “按钮圆角调大一些”，直接写明：圆角修改为 4px。

可视化截图 + 明确数值，是提升修改准确率的黄金组合。

我日常迭代界面，会直接截取浏览器预览页面，圈出需要调整的位置，下发指令：修改红圈标注区域。相比大段文字描述，这种沟通方式效率会高出很多。

七、替换默认字体与图标库

AI 生成界面有一个非常明显的识别特征：默认搭配 Inter 字体 + Lucide 图标。把十份 Vibe Coding 作品放在一起，八成会出现这套组合，这也是 “AI 感” 的重要来源。

想要跳出模板，直接替换两套资源即可。

• 字体：选用 Google Fonts、思源系列字体，或是其他适配项目的定制字体，避开 Inter。
• 图标库，摒弃单一 Lucide，可选择：
  1. Phosphor：提供 6 种粗细，图形表现力丰富；
  2. Tabler：6000 + 开源免费 SVG 图标，造型简约清爽；
  3. Heroicons：Tailwind 官方图标，简洁易用。

写在最后

以上 7 个技巧，可以总结成一个核心原则：别让 AI 想象，让 AI 临摹。

1. 依靠线框图、参考截图、配色情绪板，用视觉素材传递设计意图；
2. 借助设计 Skill、禁止清单，用硬性规则约束 AI 输出；
3. 替换默认字体图标，脱离 AI 固有的模板素材池。

输入素材的质量，直接决定 AI 输出界面的上限。给 AI 提供越具体、越完备的参考与规则，就越能摆脱千篇一律的 AI 模板，得到具备真实产品质感的 UI。

转载：优设

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

兰亭妙微持续关注国内外优秀网页设计作品，分享页面结构、视觉表达与交互思路。本期为第三方案例赏析。

一、案例背景

LEAPRUS 是面向山地酒店的公开网页改版方案，以雪山环境、交通路线与住宿选择组织内容。页面把户外目的地的视觉气质和日期、人数等预订条件放在一起，适合观察特色住宿网站如何承接旅行者的了解与选择过程。

图 1  雪山首屏与住宿查询

黑白雪山摄影衬托黄色品牌字形，右侧目录保留酒店介绍、住宿和联系等入口。底部查询栏将两个日期字段、人数选择与红色按钮横向排列，让环境展示与预订条件同时出现。

图 2  路线说明与地图参照

交通说明以不同出行方式组织段落，地图在右侧提供位置参照，雪地背景贯穿整个区块。此处可借鉴文字与空间线索的并置方式，实际落地时还应提高地图标注的对比度。

二、设计策略

设计以黑白雪山摄影和带磨损质感的黄色字形建立户外氛围，红色用于预订相关按钮，形成品牌表达与行动提示的分工。页面将路线说明、住宿选项和酒店介绍拆成连续区块，房型用照片叠放的卡片呈现，并在下方固定费用与按钮位置。环境大图与文字说明交替出现，使目的地印象、抵达信息和住宿条件逐步衔接。

图 3  住宿选项与双层操作

两种住宿选项以相同结构并排呈现，照片、名称、费用和按钮沿统一位置排列。叠放照片延续旅行记忆的视觉感受，红色预订按钮与灰色详情按钮区分直接行动和继续了解。

三、浏览路径与操作入口

首屏把入住日期、离店日期和人数选择并排放置，日历图标与下拉箭头明确提示输入类型，查询按钮紧随其后。住宿卡片区分预订与查看详情两个动作，路线区提供文字和地图线索；让交通信息与房型选择保持衔接。

图 4  酒店场景与住宿说明

酒店外部环境大图先展示住宿场景，随后以文字介绍设施与空间，并配合室内照片和餐饮图片补充细节。预订按钮在两处重复出现，使浏览背景信息后仍能找到下一步入口。

四、设计启发

特色住宿网站可以让目的地照片承担情绪表达，再用路线、住宿条件和预订字段补足决策信息。关键按钮应在不同区块保持一致，地图标注则需要足够对比度，避免背景氛围影响识读；费用也应明确对应人数和时间单位。

如有酒店官网、旅游住宿网站或在线预订页面设计需求，欢迎联系兰亭妙微。

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

本篇为设计师个人经验随笔，核心观点：用户体验是完整全链路，不等同于界面设计，并引入《用户体验要素》五要素模型，厘清产品、交互、UI、前端之间的协作关系。

本文基于大量真实案例剖析聊天机器人 / 聊天助手现存体验缺陷、用户心理、价值边界，最后给出聊天机器人 UX 设计实操指南。

一张图表单独看很漂亮，放到整个后台里却不一定好用。同一个指标在不同页面换了颜色，相似图表的单位不一致，图例又藏在不同位置，都会让人反复学习。今天兰亭妙微分享 Nezar Mansour 在 Supernova 发布的近期图表设计系统文章。下面只选几张公开示例谈阅读方式，不逐项复述各个系统的版本与状态；应用场景为我们独立提出的设计讨论，图中的演示数据也不代表任何客户的真实业务结果。

欣赏一个网站时，我们很容易先记住首屏的大图和标题。但当访客真的带着问题进来，接下来能否找到合适内容，同样影响对网站的判断。今天兰亭妙微分享 Ridwan Soleh 关于 Urbanouse 的设计文章。原作配图主要是住宅网站首页样机，下面会把这些视觉观察与筛选、卡片、联系入口的应用讨论分开；补充的搜索界面已标为AI概念示意，不把它冒充原作页面或已经验证的转化方案。

业务软件的难处，经常藏在一条记录后面。页面上看是一处物业，实际上还关联客户、合同、负责人和下一次跟进。今天兰亭妙微分享 Ridwan Soleh 关于 Deal Mate 的近期设计文章，借这个房产业务后台话题聊聊桌面端界面设计。已取得的原作配图主要展示房源卡片和移动端画面，因此文中的交易表格及合同详情是单独标注的AI应用示意，不把它们当成原作已经具备的功能。

AI进入客服后台后，页面里增加的往往不只是一条回复建议，还可能有摘要、情绪提示、推荐动作和相关资料。功能多起来，客服人员的视线会怎样移动，输入会不会被打断，值得重新看看。今天兰亭妙微分享 Ridwan Soleh 刚发布的 CareSync 设计文章，结合原作中的会话与工作台画面展开讨论。它展示的是UI套件，下文的工作场景和评审方法属于我们的延伸观察，不能作为原作使用效果的证明。

工业质检页面给人的第一印象，常常是图表很多、数字很多。但真正使用时，人更关心正在检查哪件产品、画面里的标记对应哪里，以及眼前的问题应该交给谁处理。今天兰亭妙微分享 Ridwan Soleh 近期关于 Defect Zero 的设计文章，并结合公开画面聊聊这些信息怎样相互衔接。原作属于界面套件展示，下面涉及业务流程的例子是设计讨论，不代表我们参与过该项目，也不代表画面数据已经通过生产验证。