兰亭妙微ui设计公司分享：最近在审核团队其他产品经理交付的原型方案时总是发现不少产品同学对一个原型应该写什么、应该怎么写并没有一个清晰的定义和标准；这也导致了在研发过程中总是避免不了被开发吐槽：“我就是按照原型做的”—但因为原型本身没有定义清楚对应的功能说明导致最终上线的内容并不是产品经理原本想要的效果。

为了规范产品同学的原型制作规范，我整理了4大原型制作原则，只要根据这些原则来填充原型内容，保证写出让开发在内心默默赞许“牛逼”的原型方案。

一、关于产品原型本身的分析

在介绍产品原型的设计原则之前，先让我来分析一下原型这个产品本身。按照需求分析的公式拆解，一个完整的需求是由目标用户、使用场景和用户在该场景下想要完成的目标构成的，那么产品原型这个需求就包含了这样几个使用情景：

1. 弱使用场景

a、产品经理接到运营的需求后给出对应的解决方案，并用原型的形式向运营确定这种解决方案是否能达到运营的设想；

b、完成整体的产品方案后，向上级领导进行汇报，确认领导们是否认可整体的方案设计思路或细节。

2. 强使用场景

a、产品经理在需求宣讲会上以产品原型为依据，对开发、测试、设计人员进行需求宣讲，以便所有项目内成员对需求有大体上的了解；

b、开发、测试、设计人员在需求宣讲后依据产品原型对工作量进行拆分并安排工作任务，以便所有项目成员能准确的评估项目完成时间进行科学的工作划分；

c、开发人员在实现过程中，以原型为依据进行技术开发，以便最终上线交付的内容是符合项目整体目标的高质量产品。

由此可以看出：一份产品原型最主要的使用者，就是配合产品经理一起完成上线目标的研发同学们；而一旦因为产品经理在最初的产品原型设计阶段出现了漏写、错写或想不清楚该怎么做导致频繁的需求变更，就会拉长整个团队的工期，也会在研发同学心目中留下“不专业”的负面印象。

二、撰写产品原型的4大原则

遵守以下原则来撰写你的产品原型，一定可以帮助你避免因为原型写的不规范而被程序员（当然也包含其他阅读产品原型的其他人）吐槽的尴尬。

1. 边界清晰性原则

所谓边界清晰是指让当前阅读这份产品原型的人能清楚的意识到，哪些是本次研发项目的内容。这个原则看似简单，但在实际的工作场景中经常会出现因为边界定义不清而导致的分工不明确，任务拆分不清晰。

• 若一个产品是已经上线过的产品，那么此后的产品需求基本上是在已经上线的基础上进行迭代优化 —-在已有产品上做改动时 ，需清晰的标注哪些是新增点、哪些是修改点、哪些是原有不修改的部分；
• 若产品包含多边用户时需准确的说明当前产品的用户是谁，不同的用户对于的操作权限是否有区分；
• 在进行移动端产品设计时，需明确标注每个板块的开发方式是原生还是H5

2. 内容完整性原则

一个完整的产品原型至少要包含哪些内容呢？

一般日常迭代的小型需求至少需要包含的内容有：

• 背景说明 – 让所有的项目参与者明白为什么要做这个需求，这个需求是想要实现怎样的目标？
• 需求清单 – 需求包含哪些内容？
• 流程图 – 需求通过怎样的方式闭环？
• 功能界面 – 具体的需求是怎样的？
• 需求标注 – 要怎样实现需求的效果？

项目型的原型中还需要包含该项目的顶层设计 和 版本规划，便于让所有项目参与参与者知晓整个项目的发展全貌和达成路径，对齐整体的思想高度；

当不得不对需求进行内容变更的时候，需要加上修改记录。

1）背景说明

最简单的方法就是套用5W1H原则交代需求背景

• Who：谁我们的用户？产品或功能为谁设计？
• What：用户可以用这个产品或功能能做什么？产品或功能为用户解决什么问题？
• Where：用户在哪会用这个产品或功能？
• When：用户在什么时候会用这个产品或功能？
• Why：用户为什么用你的产品，而不用别的？为什么需要这个功能？和其它产品有什么区别。
• How：用户如何使用这个产品或功能？

2）需求清单

按照功能性需求和非功能性需求分别罗列该产品方案的需求清单，包含但不限于以下内容：需求编号、所属模块（可继续划分下层模块）、需求概述、开发方式、是否需要设计、优先级、产品负责人。

3）流程图

根据实际需求绘制 业务流程图、功能流程图、页面流程图：业务流程图用于描述完整的业务流程（包括角色、环节），即要完成一项任务所涉及到的操作流程；功能流程图用于明确功能的设计逻辑，以业务流程图为主线，去细化每个环节的功能逻辑（如判断必填项/判断登录状态/判断操作权限等等）；页面流程图用于明确用户在操作产品时，涉及的页面以及页面之间的流向关系。

下面以电商平台在线收集商机的需求来演示一下三种不同的流程图的画法：

4）功能界面

功能界面是原型方案里的重头戏，也是在绘制过程中最容易出错的板块。在进行功能界面的绘制时需要明确：

1. 按照流程绘制内容
2. 确保方案中每个板块的层次是清晰的。

a、按照流程绘制内容

推荐按照业务流程图的顺序来进行内容绘制，切忌打乱流程顺序想到哪里就画到哪里。这样做的好处是产品经理不容易漏掉产品需求中的环节，还能让阅读原型人通过原型里内容顺序快速了解用户的行为路径。

以上图业务流程中描绘的电商平台在线收集商机的需求为例，在进行原型设计时需要依次分别绘制：

1. 在线收集商机的发布入口（首页）；
2. 发布需求在线商机的过程页面（如果在绘制时没有按照用户正常的发布流程绘制，很容易让开发和测试同学误解正确的流程）。

b、确保层次清晰

一份需求文档中可能包含多个产品板块，在进行多板块的产品原型绘制时需要注意每个板块之间的逻辑关系和层次递进。

接着上文举例，当用户的在线商机采集完毕后，下一步需要对商机进行转化并促成成交，那么就会衍生出对在线商机的管理和对成交订单的管理。

这时我们的产品方案中会包含三个模块的内容：

1. 在线商机采集；
2. 商机管理；
3. 订单管理

所以在撰写原型时也要注意这三个板块依次按照商机产生、商机跟进、商机转化的层次来进行绘制。

5）需求标注

完成了以上步骤后，基本上原型已经成型了，但把原型文档交给程序员进行开发时可千万不能少了需求标注。

需求标注也考核一个产品经理基本功的重要指标。一个完整的需求标注至少需要包含4部分的内容：功能默认形态、功能操作反馈逻辑、功能容错性、功能拓展性四方面的说明。

我们以盒马APP的下单界面举例，来看看具体如何进行这四部分内容的标注。

a、功能默认形态

指此功能在默认情况下的状态说明。

以盒马下单界面标注的7个标注点来说，默认形态分别是：

1. 默认每次下单时显示默认地址；
2. 默认每次下单时选择“配送”；
3. 展示包裹的商品图片、标题、规格、单价、数量、标签；
4. 未选择时间时默认显示提示文案“选择时间”；
5. 无备注时默认显示提示文案“点选无接触配送等服务”；
6. 默认选择“默认不开票”；
7. 显示全部商品优惠后的总金额

b、功能操作反馈逻辑

标注功能是否可以进行交互操作，操作的方式是怎样的，操作后会有什么样的变化等。以盒马下单界面标注的7个标注点来说，功能操作反馈逻辑分别是：

1. 点击后进入下级页面，可切换其他已录入的地址；
2. 再次点击配送不可取消；点击门店自提切换到自提模式；
3. 点击后进入对应的商品详情；
4. 点击后从底部弹出选择时间面板；
5. 点击后进入下级页面，可填写或勾选对应的服务内容；
6. 点击后从底部弹出选择开票方式面板；
7. 点击后跳转至收银台

（以上只是简单的举例，在实际的需求标注中还需要更详细的说明）

c、功能容错性

可以理解为当默认形态失效或出错时，需要进行怎样的变化来应对。以盒马下单界面标注的7个标注点来说，功能操作反馈逻辑分别是：

1.当没有默认地址时，默认填入第一个地址；若该用户无任何地址则显示提示“请添加地址”；

4.必选，在点击提交订单后若没有选择时间则自动唤起选择面板；

5.非必选；

7.点击时需校验是否有地址、是否有配送方式及时间

d、功能拓展性

即当某些功能在极限情况下，是否有所变化来包容功能的扩展。以盒马下单界面标注的7个标注点来说，功能操作反馈逻辑分别是：

1.地址最多显示一行，若超出时则“…”；

3.标题最多显示2行，若超出2行则“…”；当产品没有标签时，则标签所在行收起

最后，将以上4个板块的内容拼贴在一起，就是一份完整的需求标注了！这里还要强调一下，这里介绍的4个板块是说在进行需求标注时时刻记住有以上内容需要进行说明，这些内容完整的在一起才是一份标注，千万不要向上文举例过程中这样将四个板块拆开来写哦！

正确的拼接方式是：

盒马下单界面需求说明：

1.默认每次下单时显示默认地址；点击后进入下级页面，可切换其他已录入的地址；当没有默认地址时，默认填入第一个地址；若该用户无任何地址则显示提示“请添加地址”；地址最多显示一行，若超出时则“…”；

2.默认每次下单时选择“配送”；再次点击配送不可取消；点击门店自提切换到自提模式；

3.展示包裹的商品图片、标题、规格、单价、数量、标签；点击后进入对应的商品详情；标题最多显示2行，若超出2行则“…”；当产品没有标签时，则标签所在行收起。

4.未选择时间时默认显示提示文案“选择时间”；点击后从底部弹出选择时间面板；必选，在点击提交订单后若没有选择时间则自动唤起选择面板；

5.无备注时默认显示提示文案“点选无接触配送等服务”；点击后进入下级页面，可填写或勾选对应的服务内容；非必选；

6.默认选择“默认不开票”；点击后从底部弹出选择开票方式面板；

7.显示全部商品优惠后的总金额；点击后跳转至收银台；点击时需校验是否有地址、是否有配送方式及时间。

3. 逻辑严谨性原则

实际上按照边界清晰性原则和内容完整性原则撰写出来的原型质量一般逻辑严谨性也不会太差，此外还有两点需要特别注意的就是：

通畅性：进行原型设计时需确认流程能否顺利跑通、是否有断崖或死循环？

容错性：进行原型设计时需确认方案包含正向流程、逆向流程、异常状态所需的所有功能。

4. 设计合理性原则

原型绘制的好不好看，虽然并不是考察一个产品质量好坏最重要的因素，但一份设计精美具有审美感的原型方案，确实能给阅读者一种专业、可靠的第一印象。想要制作出“好看”的原型，需要注意以下几个最常用的设计小技巧。

1）对齐原则

原型里的每个元素不论是图形还是文字都有其对应的对齐规则。

2）对比原则

加大不同元素或者板块的对比和视觉差异，当需要对某些内容进行强调时通过对比实现分层。

3）亲密原则

相邻的元素之间必须要有相关性，因为如果两个元素靠的很近用户会天然认为他们之间有关系。

4）一致性原则

页面的元素之间在设计上必须保证一致性和连贯性；不同页面如果使用了相同元件和相同的交互，方式必须保证一致性。

总结一下，为了每一个阅读使用产品原型的成员能对齐信息，一个高质量的原型方案至关重要。做好一份原型方案是产品经理的必修课，在撰写原型方案时铭记 边界清晰、内容完整、逻辑严谨、设计合理四大原则 一定可以帮助你的原型水平得到飞跃！

转载：人人都是产品经理

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

兰亭妙微ui设计公司分享：随着苹果首款折叠机型 iPhone Duo 正式登场，折叠屏不再只是安卓阵营的专属赛道。苹果强大的品牌影响力，会直接推动折叠设备快速普及。对于 UI 设计师而言，折叠屏适配已经不再是可选加分项，而是需要在项目前期就纳入考量的界面框架命题。

市面上折叠设备规格繁杂，不同形态的屏幕不能套用同一套适配逻辑。本文将梳理三类主流折叠屏的特征，结合 iPhone Duo 的特性，给出可落地的 UI 适配思路，平衡产品体验与开发成本。

一、认识三类折叠屏设备

当前主流折叠屏分为小折叠、普通折叠、阔折叠，三者屏幕比例、使用场景、适配逻辑完全不同。

1. 小折叠（竖向翻盖）

代表机型：小米 MIX Flip、三星 Galaxy Z Flip 展开后内屏和普通手机屏幕尺寸接近，核心适配难点是折叠后的小外屏。外屏仅用于查看通知、简单交互；完整操作需要翻开屏幕。该机型装饰属性更强，市场占有率有限，多数项目可暂缓深度适配。

2. 普通折叠（横向大屏，接近正方形）

代表机型：OPPO Find N6、vivo X Fold6 外屏是常规手机尺寸，展开后两块手机屏幕拼接，内屏趋近正方形。

• 痛点：屏幕比例特殊，看视频会出现黑边 / 画面裁切，单应用直接适配体验局促。
• 优势：非常适合双应用分屏并行，一边查阅资料、一边操作业务，充分发挥大屏多任务价值。
• 适配策略：优先采用双页布局，左侧展示上级列表页面，右侧呈现详情下级页面。

3. 阔折叠（接近平板比例，iPhone Duo 属于该类）

代表机型：iPhone Duo、华为 Pura X Max、小米 Xiaomi 18 Fold 展开后屏幕比例对标平板（类似 iPad mini），可以直接复用平板成熟的应用生态，解决普通折叠屏适配难的痛点，也是未来折叠屏的主流发展方向。

苹果选择阔折叠形态的核心原因：直接兼容 iPad 应用生态，不需要开发者从零适配全新屏幕比例，快速补齐折叠机软件体验短板。

核心提醒：普通折叠与阔折叠是两套完全不同的适配方案，设计前必须先明确目标设备类型，再选定布局策略，切忌一套设计通吃全部折叠机型。

二、不同折叠类型通用适配方案

1. 普通折叠屏：双页并排模式 内屏优先采用「双手机页面并排」，左列表、右详情的双页结构。

   

不建议直接照搬平板布局：普通折叠内屏高度不足，套用平板样式会造成内容拥挤，可视体验差。

2. 阔折叠屏：复用平板自动布局逻辑 沿用平板适配体系，全部组件开启自动布局，跟随屏幕尺寸变化自动重排元素。竖屏状态下直接复用平板的适配规则即可。

   

三、iPhone Duo（阔折叠）重点适配要点

iPhone Duo 的适配主要聚焦三块：导航工具栏改造、内屏横竖屏布局、特殊弯折形态适配。

1. 导航与工具栏位置调整

传统手机把操作栏放置顶部、底部；在 Duo 展开状态下，操作控件会迁移至屏幕右侧，上下纵向排布。

• 优势：主内容完整保留在左侧区域，操作按钮不会遮挡内容，内容区域保持和普通 iPhone 一致阅读体验；该模式为系统可选模式，项目也可以继续使用自定义布局。
• 注意：精确尺寸需要等待官方 iOS 组件库正式发布。

2. 内屏横竖屏布局适配

竖屏状态

屏幕比例接近常规平板，直接使用组件自动布局，沿用 iPad 适配逻辑，实现成本较低。

 横屏状态（适配难点）

竖屏布局逻辑不能直接复用在横屏，官方推荐「侧边栏 + 主内容区」三栏式结构：左侧边栏导航、中间核心画布内容、右侧检查器 / 工具面板。

但这套理想方案存在现实局限：

• 简单页面：布局重排成本可控，类似网页响应式，通过屏幕断点切换页面排版。
• 复杂多页面项目：每一个页面都要做横屏专属重排，设计、开发工作量会急剧膨胀，即便借助 AI 编码也无法降低业务逻辑层面的成本。

落地决策建议

1. 如果项目页面少、体验优先级高、资源充足：前期就搭建全局交互框架，为横屏做专属重排布局。
2. 如果业务页面复杂、开发资源有限：放弃重度横屏重排，仅做基础自动布局兼容，保证 “可用” 即可。

现实行业现状：不少大厂复杂 App，平板端也只做基础兼容，不会投入巨额成本完成全页面深度适配；当适配成本过高时，厂商甚至会独立开发 HD 大屏版本客户端。iPhone Duo 后续也支持直接安装 iPad 应用，也可以作为备选方案。

3. 特殊弯折形态：半折、站立模式

除常规开合、内外屏之外，设备还支持半折叠、站立摆放等硬件形态。 这类形态属于增值场景，不属于设计强制需求，需要产品经理评估业务价值之后再决定是否适配，不需要全部页面都支持该模式。

四、设计师工作落地总结

1. 先区分折叠设备类型：小折叠、普通折叠、阔折叠，不同类型使用不同适配策略，不要混为一谈。
2. 普通折叠优先双页布局；阔折叠优先复用平板自动布局能力。
3. iPhone Duo 横屏三栏侧边栏是理想方案，但要评估成本，复杂业务不要盲目追求完美适配。
4. 半折、站立等特殊形态，由产品做需求判断，非必做项。
5. AI 可以辅助绘制界面、写代码，但设备形态、体验收益、开发成本的权衡判断，必须由设计师和产品完成，AI 无法替代决策。
6. 短期 iPhone Duo 用户基数有限，立刻全量深度适配的需求不多；但移动端屏幕规格越来越多元，折叠适配是 UI 设计师需要储备的长期能力。

转载：优设

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

兰亭妙微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应用示意，不把它们当成原作已经具备的功能。