首页

从优秀到卓越的 UI 动画技巧 改善 UI 微交互的实用建议。

杰睿 设计资源

使标签中的内容滑动。

将显示缩放图像
左侧的内容淡入淡出。右侧的内容随标签滑动。

连接卡片的共享元素。

将显示缩放图像
左侧的内容会打开一个新的屏幕并向上滑动。右侧的卡片会展开并填满整个屏幕。

在您的内容中使用级联效果。

将显示缩放图像
左边的卡片通过滑动和淡入出现。右边的卡片具有相同的动画,但每张卡片都有短暂的延迟。

使内容将其他元素推开。

将显示缩放图像
左侧的动画在其他内容之上进行动画处理。右侧的动画随着内容的扩展而将其推出。

使菜单在上下文中显示。

将显示缩放图像
左侧菜单从下方飞入。右侧菜单从创建它的操作展开。

使用按钮来显示不同的状态。

将显示缩放图像
左侧的按钮显示指示状态的文本。右侧的按钮使用容器来显示不同的事件。

引起对重要事物的关注。

将显示缩放图像
左侧的示例使用颜色和位置来突出元素。右侧的示例使用微妙的动画来吸引用户的注意力。

结论

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

打造高影响力产品的 5 步 AI UX 策略

杰睿 设计资源

在打造推动客户实质性改进的 AI 体验时需要考虑的战略因素。

图文并茂:AI UX 手册 — 5 步打造卓越用户影响力

每个人都在争相打造 AI 体验,但产品真的能达到预期效果吗?作为用户体验领导者,掌控产品方向是我们的荣幸。这意味着我们要思考 AI 如何在用户体验中呈现,以及它对用户的实际意义。

启动变革性人工智能的秘诀

仅仅拥有AI功能已经远远不够了。AI成本高昂,如果执行不力,还会给用户带来更多不便。其他设计师和技术人员之前也曾抱怨过这个问题,所以我就不再赘述了。那么,作为一名用户体验领导者,你该如何才能更好地定位你的公司和团队,从而有效地推出AI技术呢?

  1. 出于正当理由
  2. 组建你的 AI A 团队
  3. 了解你的工作内容
  4. 奠定基础
  5. 共同塑造未来

第一步:出于正确的理由

回归本源

不要仅仅为了 AI 而构建。要识别用户最紧迫、最普遍的问题。需要注意的危险信号:

  • 产品主题或计划应以“为我们酷炫的产品线打造生成式人工智能聊天机器人”之类的形式呈现,而不是“利用人工智能简化我们酷炫产品线的客户工作流程”
  • 该组织正在寻找将 AI 添加到产品中的方法,而不是识别可以通过 AI 提高 10 倍或 100 倍的体验缺陷或手动交互

与产品负责人、业务利益相关者和客户拥护者进行交流,探讨如何推动变革。与客户沟通,了解他们的工作方式,并提供可靠的数据来验证你的假设。

人工智能是正确的选择吗?

好了,你确定了主要问题,但人工智能真的是正确的方法吗?数字公共服务中心的评估报告《人工智能是否是正确解决方案》提供了一些指导,可以帮助你入门:

  • 所需的数据充足且使用安全合乎道德
  • 任务规模较大重复性较强
  • 有助于在现实世界中取得成果

来到耶稣面前的时刻

如果人工智能很合适,答案不应该总是聊天机器人,但很多公司却这么认为。如果你的公司也这么认为,那么你还有很多工作要做。首要考虑因素应该是价值,而秘诀在于组织对价值的认同。

定义贵组织的AI 愿景和目标——参考 Thrive 文章《如何创建 AI 愿景声明》中的建议,共同制定愿景和目标。运用 AI 技术,增强用户体验 (UX) 或产品团队的目标声明。

第 2 步:组建你的 AI A 团队

确定可以支持您的团队及其 AI 计划的联系人。

  • 客户拥护者——找到与客户有直接联系的人
  • 最终决策者——了解批准计划并签署支票的领导者,正如他们所说
  • 关键影响者——找出对人工智能充满热情或组织内值得信赖的顾问
  • 主题专家——了解您的团队需要咨询哪些专家
  • 执行功能——找到拥有合适技能的团队成员来实现你的愿景
AI A 团队矩阵(客户拥护者、最终决策者、关键影响者、主题专家和执行职能),详细说明每个人的重要性、示例角色或头衔、他们如何提供帮助等
与你的 AI A 团队建立关系对于你的 AI 之旅至关重要

虽然您可能没有能力动员这些同事或工作伙伴,但建立联系并寻求建议仍然有助于进一步推动您的计划。

在整个组织内培养关系对于让你被看到并建立信任非常重要。

获得认可并引起轰动

在这个部分,您需要进行认真的、有时可能令人不快的对话,以通知、协作、获得批准或召集 AI A 团队的各个成员。

  • 在整个组织内传播愿景
  • 验证发现、决策等
  • 协调行动项目和后续步骤
  • 让人们对愿景和人工智能之旅感到兴奋

步骤 3:了解您正在处理的内容

引导您和您的团队更好地了解您正在建设的环境。

衡量产品智能成熟度

您的组织或产品在智能化道路上处于什么阶段?您是从零开始,还是只实现了少量自动化,还是已经拥有许多 AI 功能?这里需要考虑的重点是当前状态,而不是路线图或理想的未来。

产品智能成熟度规模:手动工作流程、业务逻辑自动化、机器学习和狭义人工智能
简化的产品智能成熟度量表
  • 手动工作流程——完全没有自动化
  • 业务逻辑自动化——特定功能的静态业务规则
  • 机器学习和狭义人工智能——仅限于特定任务的卓越能力
  • 通用人工智能和超级人工智能——未纳入该范围,因为它们仍处于理论阶段

通过大致了解您的组织所处的状况,您可以确定您的组织为了实现愿景必须达到的成熟度级别。

评估平台技术准备情况

UI 的底层隐藏着什么?它是否采用了合适的技术架构来支持 AI 开发?在真正投入 AI 工作之前,你需要解决多少技术债务?

在架构师和开发人员的帮助下,您的团队可以全面评估您的平台的定位。虽然我不推荐 Domo,但他们有一篇很棒的文章《AI 就绪性:评估您的业务的完整指南和免费清单》,您可以参考。

  • 基础准备——包括基础设施平台、数据源和软件包
  • 运营准备——包括指导方针、人员配备、治理、合规性和风险

了解这一点可以告诉你,你的努力是否会实现、是否会被推迟,或者是否会徒劳无功。

第四步:奠定基础

指导工作的是什么

定义AI 设计原则,打造富有影响力的用户体验。您可以从 VUX 的AI 设计原则中找到灵感。通过补充和完善概念的原则,强化既定的 AI 愿景和目标。

设计师的驱动力

不断提升您的 UX 实践以提供完善的 AI非常重要。

  • 确保您的团队掌握最新的设计最佳实践,例如Maria Margarida 撰写的《使用 AI 进行设计:用户体验和最佳实践》这篇文章
  • 在自己的设计工作流程中积极使用人工智能,亲身体验人工智能,并通过实践获得见解
  • 定期互相分享提示、资源和学习成果
  • 做好你每天要做的事情——磨练用户体验专业知识,改进研究和设计实践,并定期与客户互动

是什么让团队继续前进

与工作伙伴保持定期沟通并遵循最佳实践。

  • 知道何时让参与
  • 建立异步渠道和会议节奏

经验告诉我们什么

您的团队是否渴望开始深入研究数据?对于注重工程设计的组织,或者为了实现并行方法,您的团队也可以专注于数据准备。您可以先清理和准备一些基础数据集,以及一些您认为能够带来价值的专业数据集:

  • 帐户和用户数据
  • 记录应用程序和传感器数据
  • 所需第三方的 API
  • 元数据和标签

通过清理信息并将数据输入 AI 模型,您仍然可以在现有路线图上开展工作,同时为 AI 计划取得一些进展。这样,您就可以在对现有数据集执行深度学习关联时让数据为您提供指导,从而进一步研究特定经验用例。

第五步:共同塑造未来

AI交互模式

要利用 AI 解决客户问题,团队必须仔细思考 AI 如何在系统中运行,以及它将如何影响用户体验。请使用下方矩阵来指导讨论和决策。

  • 参与——要求与人工智能进行主动、明确的互动
  • 嵌入式——精心策划的集成 AI 体验
  • 隐形——用户无法与人工智能直接互动
AI 交互模式矩阵,突出显示参与、嵌入和隐形模式的属性
用于战略讨论的人工智能交互模式矩阵
Microsoft Copilot 参与式 AI 交互模式示例的 GIF
参与式 AI 交互模式示例——Copilot 的语义索引
Microsoft Copilot 嵌入式 AI 交互模式示例的 GIF
嵌入式 AI 交互模式示例 - 使用 Copilot for PowerPoint 重写

真正的用户倡导者提出的问题

  • 这会增加用户的交互需求吗?会增加多少?付出的努力是否值得?
  • 这将对我们的客户的生活质量产生哪些具体的影响?他们是否有能力或意愿付费来实现这些收益?
  • 实施这一举措是否需要客户采取额外的措施?扩大规模后,还需要付出多少努力才能保持这种模式?

通过令人信服的研究综合做出决策

确保不错过任何机会,分享在探索过程中、通过用户反馈或分析所获得的经验。及时向业务和产品利益相关者汇报研究结果,确保路线图的优先事项得到数据支持。

可视化路线图里程碑

用户体验团队还可以通过有效的可视化,在帮助利益相关者更好地确定工作优先级方面发挥关键作用。与产品经理合作,模拟代表最终愿景、第一步以及最终实现之前的几个中间阶段的英雄体验,这些体验可以映射到交付时间表和阶段。

衡量影响

确保你能定量和定性地衡量结果。包括领导层的投资回报率 (ROI) 和产品团队的关键绩效指标 (KPI)。虽然我不推荐这些方法,但Arounda 的《人工智能用户体验:完善人工智能产品指标的 10 个技巧》提供了很好的例子:

  • 用户参与度、用户保留率
  • 转化率、采用率和使用率
  • 效率和生产力

底线

如果您已经为客户提供了良好的服务,那么打造高影响力的 AI 体验应该轻而易举。但陷阱在于,组织对 AI 愿景或目标的看法不一致,以及您的产品技术能力尚未为 AI 做好准备。作为一名设计领导者,您拥有独特的优势,只需稍加挖掘、拓展人脉,并打破常规思维,就能引领变革。

步骤:1. 出于正确的理由去做 2. 组建你的 AI A 团队 3. 了解你的工作内容 4. 奠定基础 5. 共同塑造未来
TLDR:打造高影响力产品的 5 步 AI UX 策略手册

进一步阅读

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

✨ 审美积累 | Misso 工作平台设计赏析

杰睿 设计资源

信息密度高,也可以呼吸感十足。
今天分享一组我非常喜欢的 Web UI 作品——Misso 工作效率平台设计。项目来自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 场景,设计在视觉和信息组织之间达成了很好的平衡。
这组设计最吸引我的是**「信息密度与视觉节奏的平衡」**。它大量使用网格和卡片进行内容分区,同时通过圆角、灰阶配色和轻量图标,削弱了B端界面的压迫感。
核心亮点:
  • 主色冷静理性,大量留白让复杂信息不拥挤
  • 字体层级明确,搭配简洁图标强化指向性
  • 模组化卡片设计,兼容多种信息类型、适配响应式场景
  • 微交互动效自然,增强可用性但不喧宾夺主
使用感受:
这类视觉风格在“效率类”工具平台中非常常见,但 Misso 的版本尤其**“亲切”**,不像传统 B 端那么冷峻。可以作为 CRM、任务管理、数据看板等平台的风格参考。
适用场景建议:
适合 B 端 Web 产品、数据仪表盘、工作流工具等高信息密度的页面,特别适合希望在「专业感」与「友好性」之间找到平衡的产品团队。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

表盘设计分享【一】

杰睿 设计资源

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

在数字产品设计中,响应式设计早已成为连接功能与体验的关键路径。智能手表的表盘,作为最核心的信息承载区,正在向“可感知、可适配、可延展”的方向不断演进。而我们将其类比为“数字卡片”,正是因为二者在设计逻辑上的高度契合:都追求信息层级的清晰展现、内容与场景的灵活适配,以及操作的直观反馈。

卡片设计以模块化、结构清晰、响应灵活著称,能在不同屏幕与使用场景中自如调度内容展示方式。而智能手表的表盘设计同样需要在极小的显示空间内,精准传递时间、健康、通知等多维度信息。通过响应式设计的引入,表盘可以根据环境光线、使用者习惯、交互状态等动态变化,自动调整元素的排布与表现形式,实现“信息即所需,界面即交互”。

例如,在运动状态下表盘可自动突出心率与步数;而在夜间,它又能切换为更具护眼性的低亮模式。这种“感知上下文”的能力,让表盘从一个静态的界面,变为一个贴近用户、主动适应的智能卡片。

响应式的表盘设计,不仅提高了使用效率,更拓展了产品体验的边界。它像一张随时变化的数字卡片,安静却聪明地陪伴在你腕间,把复杂的系统逻辑转化为可感知的温柔细节。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何通过单个视觉组件将信息可视化

杰睿 设计资源

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

单个视觉组件实现信息可视化,并非简单的图形替代文字,而是通过视觉语法构建信息的传递路径,让接收者以最低认知成本获取核心内容。
以最基础的柱状图为例,若仅展示单一数据维度,确实显得单薄。但通过优化设计,它能承载更丰富的信息:柱体高度对应数值大小(基础信息),柱体颜色饱和度区分数据可信度(附加维度),柱体顶部的小三角标记同比增长率是否为正(关联指标)。这三个设计元素共同作用,使一个柱状图既能呈现具体数值,又能说明数据质量与增长态势,信息密度提升却未增加理解难度。
视觉组件的有效性,取决于信息层级的清晰划分。像仪表盘的设计,指针指向的刻度是核心信息(当前值),表盘颜色分区(绿色、黄色、红色)界定正常、预警、危险区间(判断标准),指针末端的细微抖动表示数据采集的实时性(动态属性)。这种设计让观者先捕获核心数值,再通过辅助视觉元素理解数值所处的语境,符合人类认知的递进规律。
关键在于找到数据间的内在关联性,并转化为可感知的视觉关联。例如用树状图展示公司组织架构时,方块面积对应部门人数(数量关系),方块间的距离表示协作频率(关联强度),方块颜色表示绩效等级(评价维度)。三个视觉变量相互配合,一个组件就能说清 “有多少人”“协作如何”“表现怎样” 三个层面的信息,且这些信息通过空间布局形成有机整体,而非孤立存在。
优质的单个视觉组件,是在有限视觉空间内建立信息的有序结构,让每个视觉元素都承担明确的信息传递功能,既不冗余也不缺失,实现 “一图抵千言” 的精准传达。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

如何用ChatGPT的新图像生成器创建UI(4o)

杰睿 设计资源

ChatGPT 是否有可能生成 UI?

我之前测试过几次,但结果却令人失望。

下面是我两个月前在一份时事通讯中分享的一个例子。

升级前通过 ChatGPT 生成

它看上去太卡通了,不太实用。

然而,上周,OpenAI 推出了一个重大更新,所以我决定再次尝试。

根据我的提示,我能够生成更好的UI模型。我甚至可以根据自己的需求创建多个设计选项:

通过 ChatGPT 生成

今天,我将向你们展示我进行的实验、我使用的提示以及过程中的一些惊喜和收获。

让我们开始吧。

背景

OpenAI 宣布,现在可以使用 GPT-4o 在 ChatGPT 中生成高质量图像,而不是使用较旧的 DALL·E 模型。

它更擅长遵循指令,并且可以更好地呈现图像中的文本。

上周,许多人尝试将照片转换成人工智能艺术作品——这就是吉卜力风格艺术潮流流行的原因。

我也尝试过:

通过 ChatGPT 生成

但在网上看到很多有趣的艺术作品后,我想:

如果我可以使用 ChatGPT 生成对产品设计师真正有用的 UI 会怎么样?

实验就是从这里开始的。

实验

1. 创建详细的提示

我使用 ChatGPT 来帮助我生成我想要的 UI 的详细提示。

# 为名为“SkillVerse - 热门微课程”的应用设计一个简洁、现代的移动 UI 界面(iOS 风格)。布局应遵循以下结构化部分。## 1. 状态栏(顶部)- **样式**:标准 iOS 布局(顶部安全区域)---## 2. 标题部分- **居中标志**:“SkillVerse”  - **字体**:中等粗细,小尺寸  - **颜色**:蓝色文本  ---## 3. 特色课程轮播(水平滚动)- **风格**:具有圆角和柔和阴影的可滑动卡片  - **卡片**:    -**卡 1**      - 标题:**动态设计简介**      - 字幕:*4 月 2 日开始*      - 视觉:动画缩略图    -**卡 2**      - 标题:《自由职业者精通 Excel》      - 字幕:*3 月 31 日开始*      - 视觉:生产力图标  ---## 4. 导航标签-**标签**:    - **趋势**(活跃,**粗体标签**带有**蓝色下划线**)    - 受到推崇的    - 已注册    - 已保存  ---## 5. 过滤行- **过滤器(下拉菜单)**:    - **过去 7 天**(基于时间)    - **所有主题**(类别)    - **所有级别**(难度)  ---## 6. 热门课程列表- **布局**:可重复课程项目的垂直堆叠:  - **左**:圆形缩略图    - **中心**:      - 课程名称      - 级别(例如,初学者、中级等)    - **右**:保存图标  - **底部**:入学人数 + 趋势(例如,入学人数 2.4k,+12%)   ---## 7. 底部导航栏-**标签**:  - **主页**(活动,突出显示颜色)    - 搜索    - 活动    - 轮廓  - **风格**:    - 下方有标签

然后我将其粘贴到 ChatGPT 中的新聊天窗口中,然后单击“生成”图标。

2. 生成代码支持的 UI

令人惊讶的是,ChatGPT 在右侧打开了一个额外的面板,触发了它的 Canvas 功能。然后它开始生成代码。

这立刻让我想起了克劳德的神器功能。

ChatGPT 的屏幕截图

然后我点击了右上角的“预览”按钮。

生成了响应式、代码支持的 UI。

ChatGPT 的屏幕截图

看起来很有趣,但似乎不如克劳德那么精确/精致。

3. 要求提供视觉模型

由于我的目的只是生成一个图像(一个可视化模型)而不是一个代码支持的 UI,因此我请求后续提示来纠正它:

创建一个可视化模型。而是一个视觉模型。

结果如下:

通过 ChatGPT 生成

结果出乎意料地好,尤其是与 ChatGPT (DALL·E) 之前生成的版本相比。这是一个巨大的提升。

测验:你能在上述 AI 生成的 UI 中找到多少个拼写错误?:)

4. 要求缩小用户界面

尽管用户界面看起来不错,但我仍然对图像截断感到有点困扰,所以我问了:

顶部和底部看起来有点截断。您能将 UI 缩小 20% 左右,让它整体更小一些吗?顶部底部看起来有点截断。您能将 UI 缩小20%左右, 让它整体更小一些吗?

结果如下:

通过 ChatGPT 生成

看起来不错!

5. 要求生成设计选项

然后我开始更有创意了……我想,如果我让它生成多个设计方案供我参考会怎么样?那会更有帮助!

所以我写了这个:

创建三个设计选项。使用相同的核心内容,但根据以下描述改变布局、UI 元素和视觉重点:选项 1. 大胆且引人入胜- 优先考虑视觉冲击力和品牌表达选项 2. 功能强大且快速- 优先考虑速度、清晰度和生产力- 紧凑的用户界面,卡片更小,信息层次更密集选项3.个性化和温暖- 优先考虑联系、信任和个性化- “为你推荐”轮播,包含人工智能策划的课程建议- 社会证明(头像、徽章、朋友活动)- 添加“社区”选项卡,用于同行共享内容

结果如下:

通过 ChatGPT 生成

再次,我对 GPT-4o 图像生成能力的提升感到震惊。

虽然这三个选项看起来仍然非常相似,但如果仔细观察,就会发现一些小细节 - 例如“搜索”图标、社交证明和副本 - 试图使每个版本都与其他版本区分开来。

不过,结果肯定还有改进的空间。例如,由于一张图片中包含了大量信息,ChatGPT 的精度开始下降。你可能会注意到,部分文本变得无法识别/扭曲。

6. 将设计转换为 Figma 文件

接下来,作为一个有趣的测试,我使用Codia AI 的插件根据 ChatGPT 生成的视觉模型生成 Figma 设计。

Figma 中的屏幕截图

所有组件(包括文本)都可以在 Figma 中编辑。

它使用的字体系列是 Intel。

好得可怕。

如果我想进行更改,这使我能够自定义 UI 模型。

最后的想法

ChatGPT 生成 UI 视觉模型的能力是一个巨大的提升。与之前版本相比,它提供了更高的精度和对提示的遵循性。

话虽如此,速度还是有点慢,准确率还有待提高。有时图像生成到一半就停止了;有时结果很随机,而且与指令不完全一致。

当我要求 ChatGPT 根据设计选项创建 3D 模型时,事情变得有点扭曲和奇怪——但还不算太糟。

通过 ChatGPT 生成

不管怎样,这已经是一次很棒的升级了。我现在能生成以前无法生成的东西了。

这一切都在 ChatGPT 聊天窗口内完成。多么方便啊?

我非常兴奋并希望未来会有更好的升级。

审美积累 | UI设计中的“刻度”设计【一】

杰睿 设计资源

刻度设计在复杂与模糊之间,它提供了一种可感知的秩序,建立人与界面之间的信任锚点
 
 
刻度设计是界面里的“呼吸感”
你有没有注意过那些不动声色却让界面莫名安心的设计?
比如一个滑块的刻度,或者仪表盘上细微的分隔线——
它们不说话,但你总觉得:“嗯,这个界面有逻辑。”
 

2a4b2036-0a43-48d3-af0b-056b37310c5a.jpeg

3f5fa7f8-353c-4149-8ee0-0ec46f6609d6.jpeg

32d7a208-0ccc-4b43-8bcf-be5ac49a5b9d.jpeg

1280X1280 (1).JPEG

1280X1280.JPEG

ba7a63e2-3dd1-451a-bfb5-568c32e85264.jpeg

d771f67f-a6f1-446d-8ec1-e9ae9e911b91.jpeg

eab201ff-36a2-422b-96e6-71684a7412cc.jpeg

output.jpg

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计|提高审美|极简扁平过时吗?

杰睿

在做UI界面时,极简扁平一直是个稳妥又高适配的选择。它没有复杂的质感和装饰,更强调清晰、直接和功能导向,能快速搭建出干净、有秩序的界面,适合大多数场景落地。
但是也确实有太多太相似的极简导致确实辨识度,这中间要怎么平衡?平淡的极简扁平风格已经过时了吗?

999817119037557.61deac4aa9171 (2).jpg

DM_20250527234137_001 (1).JPG

DM_20250527234137_001 (2).JPG

DM_20250527234137_001 (3).JPG

DM_20250527234137_001 (4).JPG

DM_20250527234137_001 (5).JPG

original-5cb00744f2589b4d9ea4fc8e5b355f26.png

original-6c39ea5c4b1001b13b0bad964c266a26.JPG

original-9e2e1af05af9a1337d76981d6fa961c0.JPG

original-1681ab12ce8ed1787e5836b2fbc06e92.JPG

original-4820af566a0239fa574d7ae876bc7178.gif

original-96947351752ea6576802c130a69393d1.JPG

original-b1c5d1370e23c8c5f5a76a36add69d28.png

核心特点:
无阴影、无渐变,色彩纯净,强调色块区分信息
图标和控件极简化,风格统一,识别度高
多用系统字体或无衬线字体,方便信息阅读
布局以网格为基础,留白充足,逻辑清晰
适合场景:
工具类 / B端后台 / 数据展示类产品
教育、资讯类平台,注重信息承载与阅读体验
想快速搭建产品雏形、做组件库规范的项目
使用体验: 对设计师来说,扁平风是效率高、容错率低的一种经典实用风格。它能帮助我们聚焦在信息结构、交互流程和排版逻辑上,适合组件复用、团队协作、甚至快速出图。 而对用户来说,扁平风界面看起来更“轻”,更容易理解和操作,没有过多干扰。
你在工作中还会用扁平风吗?有没有遇到难把控“简约不等于简单”的情况?欢迎一起讨论~

 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

杰睿

大脑在处理和组织看到的信息时会使用一套快捷方法,了解这些方法是设计成功的关键要素。本文介绍了十一条有效的设计准则,用形象的图解帮助读者更好地理解设计准则在设计工作中的运用,帮助你利用这些方法更快捷地开展设计。适合关注产品设计的小伙伴阅读。

感知力是大脑将不同的信息连接和组织成一个连贯整体的机制。例如我们将相似的对象分组并连接起来,能够轻松地区分出不属于该组的对象。

大脑在处理和组织看到的信息时会使用一套快捷方法,了解这些方法是设计成功的关键要素。

在UI设计时,我们应该有意识地运用感知力,用足够的事实来验证设计,有依有据地解释为什么这个图形元素要这样设计?背后的原因是什么?

提升感知力有助于清晰地解释设计方案,避免常见的设计错误,引导我们将设计做得更好、更容易理解!

一、邻近原则

彼此靠近的元素会被自动理解为一组。把它们的位置放得更远,会给人一种这些元素是完全独立的个体的印象。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在UI设计中,可以利用邻近原则将相似的界面元素组合在一起,把控总体布局。

邻近规则适用于主导航、卡片、按钮、内容和图标等。我们还可以使用适当的留白将不同的元素进一步分开,创建一个层级更清晰的界面结构,以此来帮助用户浏览和理解不同类型的信息。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

邻近原则是直接影响界面可用性的基本规则之一。如果随意控制元素的位置和间距,有可能会让整个产品变得混乱和难以理解。

二、相似原则

视觉上相似的元素会被视为同一组,视觉上不同的元素,大脑会下意识将其视为单独的元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

利用相似性可以来定义界面的特征,例如颜色、形状、尺寸、纹理或空间位置等。最容易区分的是颜色相似,其次是尺寸和形状相似。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

如果一个元素和界面中其他的元素都不同,无法融入到其他元素组中,那么这个元素就会变得非常显眼。

我们可以利用这种差异化的效果来突出一些具有引导性或者功能性的元素,例如登录按钮或者加入购物车按钮等。

三、闭合原则

一组不相连的元素组合在一起,我们会下意识地自动补充这些元素之间的空白,得到一个完整的、可识别的形状。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

闭合原则有多种不同的用法。例如一个虚线箭头,我们会填补空白并把这些点连接在一起,得到一条完整的线段。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

闭合原则还有助于识别抽象的图标形状并赋予更多的含义。在图标设计中,为了避免信息过载,大多数图标的设计都很简洁,更方便用户理解。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

运用闭合原则的经典案例包括用不同虚线构成的IBM标志、利用正负形空间组合而成的WWF熊猫标志。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

四、对称原则

UI界面中的元素一旦有对称性,就会产生秩序感,我们很快就能看到并理解这种形式。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

我们天生喜欢对称的物体。对称排列的元素在视觉上更令人舒服,也更美观。

可能有人觉得对称设计过于呆板,这种想法在平面广告或视觉设计中可能正确,但在UI设计中对称布局是相当重要且实用的界面排版形式。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

对称布局让设计更容易理解,也更友好,缺乏对称会导致界面混乱,不知道该关注哪个元素。当然,如果想让某个模块突出展示,也可以尝试打破对称性,这样不对称的元素就能在界面中脱颖而出。

五、连续性原则

界面中沿着同一条线对齐的元素会被认为属于同一组。

在浏览界面时,视线会第一时间寻找最顺畅的视觉动线。这也解释了为什么在使用连续性原则时,需要确保直线(或曲线)是均匀和可预测的。

线条越均匀,生成的形状越容易被用户正确识别。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

连续性有助于界面保持上下垂直滚动时的节奏,相似的内容应始终保持对齐。如果某个元素打破了这种连续性,我们的浏览节奏会被打乱,浏览速度也会变慢。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

当下的UI设计中,流行带有圆角的卡片和按钮效果。其中的一个原因是我们对于直角的处理速度稍慢,视线需要停顿并旋转90度,而更圆滑的导角效果能帮助我们的视线更快地转换。

六、共同命运原则

按相同方向、以相同速度运动的元素被认为是一组。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在设计轮播、下拉列表、过渡动画等场景时,共同命运原则会很有帮助。例如我们的视线既跟随轮播图水平移动,还跟随下拉列表向下展开。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

七、希克定律/米勒定律

  • 希克定律:可供选择的选项越多越复杂,就越难做出选择。
  • 米勒定律:我们的大脑在同一时间只能处理大约7±2个对象。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

根据希克定律,可供的选择数量应该有限制。有太多东西可供选择可能会导致用户迷失方向,做出判断的时间加长,甚至会感到压力。

米勒定律提到,大脑处理信息的能力与认知负荷有直接的关系。我们大脑一次能处理的信息量大约是7个对象。对象数量越多,处理它们所需的时间就越长。

在设计时,尽量不要超过七个选项,为了获得最好的体验,应尽量将选项保持在4-5个。这意味着需要控制主导航数量、按钮数量、下拉选项和轮播图数量等。

当需要用户做选择时,最好能突出显示最受欢迎或最推荐的选项,帮助用户更快做出决策。

八、前景/背景

我们能够本能地区分界面中的图形元素和背景。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

界面由不同类型和样式的图层组成,每个图层都有不同的层次结构。

为了避免层次结构混淆,我们需要清楚地定义界面的所有元素。背景不需要设计设计的太花哨,有可能会抢夺用户对主要内容的注意力。

辅助内容和功能不需要太明显,并且需要与主要内容在设计上做出区分。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

可以使用对比关系、位置关系和阴影等方法帮助用户区分内容和背景。

九、审美可用性效应

用户通常认为具有视觉吸引力(美观)的产品更实用。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

根据这个原则,流行、对称、美观的界面会对用户产生更积极的影响。如果视觉效果给人足够好的第一印象,用户可能会忽略一些可用性问题。

审美可用性的基础在于具有一定的可用性,之后才会起作用。如果产品本身的功能就很糟糕,那么再美观的界面也无济于事。

高质量、美观的界面有助于建立用户信任。相反一个看起来混乱的设计会让用户感到不靠谱。即使用户不能确切说出界面视觉的问题,但他们也会觉得这个产品有风险或者不正规。

高质量的UI设计对于银行类、金融类和医疗类产品来说尤为重要,尤其是在需要用户提供个人信息或涉及交易的使用场景中。

十、串行位置效应

我们最容易记住一组当中的第一个和最后一个元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

将最重要的内容或元素放在每组的第一个或最后一个,吸引用户注意力,方便高频操作。而次要的内容操作频率相对较低,则放到中间位置。

例如在构建导航、下拉列表等场景中,将重要的操作放到首位。

十一、隔离效应

在一组看起来相似的元素中,我们总是会记住与其余元素不匹配的那个元素。

为了一次性掌握这些UI/UX设计准则,我准备了20张设计图解!

在UI设计中,隔离效应意味着将界面中重要的内容或关键的操作在视觉上与众不同。

最典型案例是界面中的CTA(号召性用语)按钮。通过改变CTA按钮的颜色、尺寸等,与界面中的其他按钮区分开来,第一时间引起用户的注意。

专栏作家

作者:Clippp,每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自 Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

 

兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

产品经理必备!2025最受欢迎的10款原型交互设计软件

鹤鹤

产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
原型设计是每一个产品经理都需要具备的基础能力,因此有一款称手好用的原型设计软件,更是产品人手中不可或缺的利器。相比其他设计软件,原型设计软件的重点之一是交互设计,它需要动态模拟用户操作,精准呈现产品的交互流程,这样才能感受真实的用户体验,帮助产品优化迭代。
那么,有哪些优秀的原型交互设计软件呢?本文盘点了10款备受产品经理喜爱的原型软件,助你2025年设计更高效更简单~
 
1、
摹客RP
摹客RP是一款高效易用的原型交互设计软件,界面直观、交互全面,可在线协作使用,能帮助产品经理快速构建产品原型。它还拥有海量的模板组件,组件自带交互,拖拽即用,用户无需经验也可创建复杂的交互效果。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)全面的交互类型:不仅包含页面交互,还有画板级、组件级、状态级交互,交互效果细腻,产品原型更逼真。
2)自制交互组件:可根据项目所需,自制复杂组件,自定义样式以及交互细节,原型交互设计不受限。
3)组件库和模板:内置丰富的组件和设计模板,包括各种按钮、输入框等交互控件,用户可快速调用。
4)拖拽式编辑:只需鼠标拖拽,一步到位,即可快速添加交互效果。
5)实时预览编辑:支持实时预览设计稿,多个成员可以在同一项目中编辑,大大提升了协作效率。
价格:
可免费使用
学习难度:
简单,新用户也能快速上手
使用环境:
支持Web、Windows、MacOS
推荐理由:
摹客RP大幅降低了原型交互设计的门槛,简单易用、操作流畅,交互效果也很全面。而且,它的团队协作功能突出,非常适合需要快速构建交互原型的产品团队。
推荐评级:
⭐️⭐️⭐️⭐️⭐️
 
2、
Axure
Axure是一款经典的原型交互设计软件,交互功能强大灵活,在产品经理和UX设计师中享有盛誉,特别适合需要复杂交互和逻辑实现的中大型项目。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)高级交互设计:支持拖拽式创建动态面板、条件逻辑和变量操作,实现高复杂度的交互效果,精准模拟用户体验。
2)组件丰富:内置按钮、表单、图表等多种控件,可通过配置实现多样化的交互设计。
3)交互逻辑编辑:支持条件分支、逻辑判断和变量传递,满足复杂业务流程的原型设计需求。
4)文档生成:支持自动生成详细的原型文档,便于交付和开发参考。
价格:
$29/月起
学习难度:
Axure操作复杂,对初学者来说难度较大。
使用环境:
客户端使用,支持Windows、MacOS
推荐理由:
Axure适合对交互设计有较高要求的专业团队,其强大的逻辑功能和动态效果让用户能够细致地还原产品交互过程,是中大型项目不可或缺的利器。
推荐评级:
⭐️⭐️⭐️⭐️⭐️
 
Justinmind是一款功能全面的原型交互设计软件,专注于帮助用户从低保真到高保真阶段快速构建交互原型。它不仅支持丰富的交互动作,还内置大量预设模板和控件,是一款集原型设计、交互开发和团队协作为一体的全能型工具。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)交互设计支持:通过可视化界面实现页面跳转、动态面板、悬停效果等交互行为,无需编程即可完成复杂交互设计。
2)模板与组件库:内置丰富的UI组件库和交互模板,可快速拖放使用,提升设计效率。
3)导出功能多样:可以将原型转换为功能齐全且可交互的 HTML,还可导出导出为 SVG 和 PNG。
4)团队协作:支持团队成员在线评论和文档共享,让协作更加高效。
价格:
$19/人/月起
学习难度:
简单
使用环境:
支持Web、Windows、MacOS
推荐理由:
无需输入任何代码,即可用Justinmind创建可交互的原型,还能用它继做UI设计、VR和AP设计,功能全面,值得尝试。
推荐评级:
⭐️⭐️⭐️⭐️⭐️
 
4、
ProtoPie
ProtoPie是一款专业的高保真交互原型设计工具,专注于通过逻辑和交互动作的直观设置,构建接近真实产品的交互体验,特别适合需要创建复杂交互的产品经理和设计师。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)无代码交互创建:通过触发器、动作和对象的组合,无需编程即可轻松实现复杂的交互逻辑。
2)跨设备交互模拟:支持多设备之间的交互,例如手机与平板、手机与电脑的联动效果。
3)传感器支持:独特支持设备传感器(如陀螺仪、重力感应、语音输入等),更真实地模拟用户场景。
4)高保真原型预览:所见即所得的预览功能,可快速验证交互效果。
5)插件和集成:与Figma、Sketch等工具无缝对接,快速导入设计资源。
价格:
$12/用人/月起
学习难度:
中等,新手需要一定时间学习
使用环境:
支持Windows、MacOS
推荐理由:
ProtoPie是专门构建高度复杂和真实交互的设计工具,适合对产品交互设计要求较高的团队,其独特的传感器支持和多设备联动功能,受到不少产品经理的喜爱。
推荐评级:
⭐️⭐️⭐️⭐️
 
5、
Uizard
Uizard是一款新兴的AI驱动原型设计工具,它的独特之处在于智能化和易用性,即使是没有设计经验的用户,也可以通过简单的操作快速构建具有交互功能的高质量原型。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)AI生成设计:支持将手绘草图自动转化为数字化原型,大幅提升设计效率。
2)简单交互设计:通过点击即可实现页面跳转和基本动态交互,满足初期验证需求。
3)模板库:内置大量行业通用的UI模板和组件,用户可以直接使用或调整,快速完成设计。。
价格:
$15/人/月起
学习难度:
简单
使用环境:
基于wed端使用,适用于所有主流浏览器
推荐理由:
Uizard的特点是:快速、智能、简洁,非常适合需要快速构思和验证产品创意的团队或个人。特别是对于时间有限的初创团队来说,Uizard提供了从草图到原型的一站式解决方案。虽然其交互功能较为基础,但对于早期原型制作来说够用了。
推荐评级:
⭐️⭐️⭐️⭐️
 
6、
Marvel
Marvel是一款全流程原型设计工具,专注于快速创建交互原型和用户体验测试,适合快速原型制作,但不适合高保真的复杂交互设计。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)快速交互设计:通过简单的链接设置和拖放操作,即可创建页面跳转、动画效果等交互行为。
2)用户测试工具:支持收集用户反馈,通过点击热图和可用性测试,优化设计流程。
3)团队协作与评论:团队成员可在设计文件中直接评论和标注,沟通更高效。
4)与第三方工具集成:与Sketch、Figma等设计工具无缝衔接,支持导入设计文件进行交互设置。
价格:
$12/人/月起
学习难度:
简单
使用环境:
基于wed端使用,适用于所有主流浏览器
推荐理由:
Marvel操作直观、团队协作功能强大,它的用户测试功能为产品优化提供了很多支持,对于小团队和初创企业来说,它是一个性价比较高的选择。
推荐评级:
⭐️⭐️⭐️⭐️
 
7、
Proto.io
Proto.io是一款强大的原型设计工具,提供了从设计、交互到用户测试的一站式服务,它的的优势在于高度灵活的交互设计功能和广泛的设备适配能力,非常适合需要快速验证复杂交互的团队。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)高度灵活的交互设计:支持页面跳转、动态效果、动画、条件逻辑等多种交互功能,无需编码即可实现复杂设计。
2)丰富的组件库和模板:提供大量内置UI控件和行业模板,可直接拖拽使用并快速定制。
3)动画编辑器:支持创建时间轴动画,轻松实现复杂的动态效果。
4)用户测试功能:支持与用户共享原型链接或QR码,收集反馈并优化设计。
价格:
$24/月起
学习难度:
中等,新手需要一定的时间学习
使用环境:
基于wed端使用,适用于所有主流浏览器
推荐理由:
Proto.io不仅交互设计功能强大,还支持动画设计,提供从设计到测试的全面支持,非常适合需要复杂交互逻辑的项目。
推荐评级:
⭐️⭐️⭐️⭐️⭐️
 
8、
Balsamiq
Balsamiq是一款专注于低保真原型设计的工具,其手绘风格的界面设计独具特色,旨在快速构思和验证产品想法,是产品经理和开发团队早期规划的绝佳工具。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)手绘风格低保真设计:通过手绘风格元素,帮助用户快速创建清晰的线框图,避免过多关注视觉细节。
2)丰富的UI控件库:内置大量UI组件,包括按钮、表单、导航栏等,可快速拖拽到画布中。
3)简单交互设计:支持基本页面链接和跳转功能,用于模拟导航流程。
4)云端协作:支持多人协作编辑,方便团队在早期阶段快速迭代和验证。
价格:
$9/人/月起
学习难度:
简单,初学者也能快速上手
使用环境:
支持Web、Windows、MacOS
推荐理由
Balsamiq是低保真原型设计的标杆工具,其简单、高效和专注的设计理念,特别适合项目早期的头脑风暴和结构规划。
推荐评级:
⭐️⭐️⭐️⭐️
 
9、
Figma
Figma是一款基于云端的协作式设计工具,在原型交互设计领域备受推崇。它以实时协作、高效的原型设计和无缝的团队沟通功能为核心亮点,是产品经理和设计师的强大助手。Figma无需安装,直接通过浏览器即可使用,突破了传统设计工具的限制。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)实时协作:多成员可同时在线编辑同一文件,实时查看修改,显著提高团队效率。
2)组件和设计系统:提供强大的组件管理功能,支持组件复用和全局更新,确保设计的一致性。
3)简单交互设计功能:支持创建动态交互和动画,包括页面跳转、悬停效果和状态切换等。
价格:
$12/人/月起
学习难度:
简单,还有丰富的教程文档
使用环境:
基于wed端使用,适用于所有主流浏览器
推荐理由:
Figma凭借实时协作能力和直观的交互设计功能,成为团队协作和快速设计的最佳选择之一。特别是在远程办公和分布式团队中,它的云端优势更加突出。
推荐评级:
⭐️⭐️⭐️⭐️
 
10、
Visily
Visily 是一款智能化的原型设计工具,它通过AI功能和直观的界面,帮助用户快速创建交互原型,是初创团队、产品经理和非设计背景团队的理想选择。
产品经理必备!2025最受欢迎的10款原型交互设计软件
 
 
功能亮点:
1)AI设计助手:利用AI技术,将手绘草图或现有的设计图转化为数字化原型,大幅提升效率。
2)简单交互功能:支持页面跳转、链接和基本动态效果,便于快速模拟用户流程。
3)预设组件和模板:提供丰富的UI组件和行业模板,适用于多种设计场景。
价格:
$10/人/月
学习难度:
简单
使用环境:
基于wed端使用,适用于所有主流浏览器
推荐理由:
Visily的AI设计功能是最大亮点,降低了原型设计门槛,对没有设计背景的用户来说很友好。此外,Visily组件丰富,适合快速制作低至中保真原型。
推荐评级:
⭐️⭐️⭐️⭐️
 
以上10款原型交互设计软件各具特色,能够满足不同团队和项目的需求。希望你能找到一款最适合自己的工具,用它打造出更出色的产品吧!

作者:摹客设计云
链接:https://www.zcool.com.cn/article/ZMTY1MDIwMA==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档