首页

审美积累 | 移动端仪表盘

杰睿

refero.design Checker (1).jpg

refero.design Checker.jpg

refero.design FoodNoms.jpg

refero.design Gentler Streak.jpg

refero.design GrowPal (1).jpg

refero.design GrowPal.jpg

refero.design Plantum.jpg

refero.design Roots.jpg

refero.design StrideGate.jpg

在数字化时代,移动端仪表盘作为各类应用与用户交互的核心界面之一,其设计的优劣直接影响用户体验与对产品的认知。本次为大家推荐的这些移动端仪表盘设计,堪称行业内的优秀范例,从多维度展现了出色的设计理念与实践。
这些仪表盘并非单纯追求视觉上的炫酷,而是将功能需求与视觉表达完美融合。以 “Checker” 系列为例,界面布局清晰明了,各类数据指标通过简洁的模块与直观的图表呈现,用户能快速获取关键信息,同时整体视觉风格简约大气,没有冗余元素干扰,让功能的实用性与视觉的美观性相得益彰。
色彩在移动端仪表盘设计中起着烘托氛围、引导视觉焦点的重要作用。像 “FoodNoms”,色彩搭配清新自然,契合美食类应用的属性,能瞬间唤起用户的愉悦感;“Gentler Streak” 则采用更具活力与动感的色彩,很好地呼应了运动健康类应用的主题,助力用户快速感知数据所传递的信息与情感。
数据可视化是仪表盘的核心功能之一,这些设计在这方面表现卓越。“GrowPal” 系列通过圆形进度条、折线图等多种可视化形式,将复杂的数据转化为直观易懂的图形,让用户能轻松把握数据的变化趋势与当前状态;“Plantum” 也借助清晰的图表与标识,把植物生长相关的数据清晰呈现,降低了用户理解数据的门槛。
优秀的仪表盘不仅要 “好看”,更要 “好用”。“Roots” 的界面交互逻辑清晰,操作反馈及时且明确,用户在浏览与操作数据时流畅自然;“StrideGate” 的交互设计同样贴心,从页面切换到数据筛选,每一个交互动作都能给用户带来顺畅、舒适的体验,提升了整体使用感受。
这些移动端仪表盘设计,从布局、色彩、数据呈现到交互体验,全方位为我们展示了移动端界面设计的优秀思路与方法,无论是从事 UI/UX 设计工作,还是对设计美学有兴趣,都值得深入研究与借鉴,为自身的设计审美与实践积累宝贵经验。

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

审美鉴赏 | 虚拟服务器 | Server Rental Website Design

杰睿

imgi_143_36b859233768497.68b64075665db.jpg

imgi_230_6b3f91233768497.68b64075653a4.jpg

imgi_232_042793233768497.68b6407565c1b.jpg

imgi_233_0d6153233768497.68b64075649f0.jpg

imgi_1227_114830233768497.68b63f8b8cebf.png

一、整体布局与风格

简洁现代:整个页面采用简洁且现代的设计风格,布局合理,信息层级清晰。
对称与留白:页面留白充分,内容分区明显,易于阅读和浏览。
响应式设计潜力:模块化的设计结构,有利于响应式布局,适配不同屏幕。

二、色彩与视觉效果
浅色模式(图1)
  以白色为主背景,搭配蓝色按钮和黑色字体,视觉清新、专业。
  彩色的渐变装饰图形为空间带来活力,避免了页面单调。
深色模式(图2)
  采用深蓝黑背景,文字和按钮颜色对比明显,增强夜间浏览舒适度。
  渐变装饰图形更显炫酷,科技感更强。

三、内容结构分析

顶部导航
  1.   简洁的导航条包含主要栏目(Services, Partners, Contacts, Info)。
  1.   语言切换、登录、注册按钮布局合理,便于操作。
  1.   夜间模式切换按钮(第二图右上)细节考虑用户体验。
主视觉区
  1.   大号标题“Start your business, our routine is your profit”简洁有力,明确核心价值主张。
  1.   配合引导性的注册按钮(Sign up),转化路径清晰。
  1.   视觉焦点明确,吸引用户注意力。
产品类别展示
  1.   “Virtual Servers”和“Dedicated servers”两大核心产品分区简明。
  1.   配有简短描述,方便用户快速理解服务内容。
  1.   交互箭头暗示点击进入详细页。
优势说明(Advantages)
  1.   四个关键卖点(Support, Fast activation, Unlimited traffic, Any workload)分栏展示,图文结合,直观有效。
常见问题(FAQ)
  1.   折叠式设计,保持页面整洁。
  1.   首条问题默认展开,减少用户疑虑。
  1.   内容针对用户关心的技术细节,体现服务专业性。
页脚
  1.   简洁的版权信息和网站链接,支持联系信息完整。

四、设计细节亮点

字体:标题使用较粗的黑体字,强调内容,正文采用较细的字体,阅读体验佳。
按钮设计:圆角蓝色按钮色彩鲜明,且足够大,适合点击。
装饰元素:抽象渐变环形元素科技感强,且不喧宾夺主,丰富视觉层次。
交互提示:FAQ折叠式设计和箭头提示,用户体验友好。

五、更多思考

导航栏透明度或悬浮效果:可考虑增加导航栏的透明度渐变或滚动悬浮,提升交互感。
按钮反馈效果:注册按钮点击时增加微交互动效,提升体验。
多语言支持:语言选择功能明显,但可以考虑增加更多语言选项。
图形装饰位置:装饰图形虽好,但部分区域略显拥挤,可根据屏幕尺寸微调位置。
 
 
 

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

审美积累 | “一站式”的健身与运动平台界面设计

杰睿

imgi_1179_748816226412609.682df589e2c9d.png

imgi_1200_530f88226412609.682e265634c9c.png

imgi_1196_9659ea226412609.682df589e573c.png

一、项目概览与核心亮点

  1. 概述与发布时间
  • 项目发布于 2025 年 5 月 22 日,源自乌克兰团队 Codeska Software Development,参与者来自多个城市:基辅(Kyiv)、敖德萨(Odesa)、哈尔科夫(Kharkiv)以及捷克布尔诺(Brno)等
  • 该应用定位为一个“一站式”的健身与运动平台,帮助用户寻找并预订健身教练,支持 iOS 和 Android 平台
  • 界面设计:采用清新现代的 UI,支持暗/亮模式,包含流畅动画与简洁导航
  • 功能模块丰富:涵盖教练搜索、地图与筛选过滤、日程安排、订阅支付、消息通讯、统计报表等功能
    • 支持根据位置、技能、评分进行筛选,服务范围涵盖个人训练与团体课程
    • 后台技术栈包括 React Native(跨平台前端)、Node.js 后端开发、Vue.js 支持 Web 端
  • 开发流程与成果:Codeska 围绕用户研究、原型设计、开发、测试等全流程负责,初期反馈显示用户对设计和预订流程满意度较高;应用还显示了留存率、参与度、Beta 测试结果等成果统计

二、设计与用户体验分析

  1. 视觉和交互设计
  • 整体视觉风格现代、干净,明暗主题的切换为用户提供个性化体验。动画和过渡自然流畅,提升了使用的舒适感。
  • 图标、配色、排版等品牌设计细节完善,有助于建立专业与信任感
  1. 功能逻辑与使用流程
  • 用户路径清晰:从搜索教练 → 筛选 → 查看日程 → 预约 → 支付 → 通讯,都在同一平台完成,减少步骤流失。
  • 支持实时可用性查看与预约,让用户无需反复确认时间,提高效率;同时内嵌消息模块方便沟通。
  • 预约系统、支付和日程整合做得很到位,适配常见的健身需求场景。
  1. 技术与可扩展性
  • React Native + Node.js + Vue.js 构成了跨平台且高效的技术架构,适合未来功能延展与维护
  • 项目结构清晰,展示了从分析、设计到上线的阶段进展,让观者了解过程完整性与专业性。

三、优点总结与建议

优点

优点 描述
UI/UX 设计出色 现代、清晰且具有吸引力;暗/亮两种主题增强用户体验。
功能全面 整合了搜索、预订、支付、消息等一站式用户路径。
技术栈合理 跨平台 + Web 支持,兼顾性能与开发效率。
项目完整性强 全流程展示,包括用户反馈与项目成果统计。
 
这是一个整体非常成熟、设计优秀、功能规划丰富的一站式运动健身应用概念。UI/UX 精致,功能体验连贯,技术架构现代。展现的不仅是设计能力,更体现了团队从用户视角出发、兼顾功能落地的思维。若在用户研究与数据反馈深度上进一步加强,将能更具市场竞争力。

界面设计解读 | Redesign Health - Services 医疗页面设计

杰睿

imgi_209_c8fe8d231964913.689314418396e.png

imgi_210_23ea7a231964913.68931e4655546.gif

imgi_213_edad57231964913.6893155e184dc.png

imgi_218_c645aa231964913.6893166847f66.png

imgi_220_c70cfc231964913.6893166847028.png

imgi_224_af669e231964913.689317d9e7c5e.png

imgi_225_95dbaa231964913.689317d9e8c7d.png

imgi_227_ff9274231964913.689317d9e7654.png

imgi_231_6d45b9231964913.689317d9e6fb0.png

imgi_801_fb2330231964913.68931fd0d4b59.gif

imgi_802_fb2330231964913.68931fd0d4b59.gif

 

Redesign Health - Services 页面设计


 1. 整体风格

  • 视觉气质:整体基调偏 理性、专业、低调,采用米色背景 + 黑灰文字,辅以少量紫色/渐变作为强调色,既保持了沉稳,又带来了一点现代感。

  • 风格走向:属于 极简主义 + 企业级设计,强调可读性和内容层次,而不是过度的装饰。

 

 2. 布局与信息架构

  • 双栏布局:左侧为主内容区,右侧为补充信息区(Case studies、Impact 等),符合 B2B 网站“叙事+数据”的信息逻辑。

  • 模块化结构:整页分为“服务介绍 → 合作伙伴 → 核心方法 → 案例 → 数据 → 页脚”,层次清晰,便于用户快速扫读。

  • 留白运用:边距和行距充足,让密集的信息不会显得压迫。


3. 字体与排版

  • 字体选择:大标题用衬线字体,正文与导航用无衬线字体,形成了“理性 + 权威”的组合感。

  • 层级对比:大字号的引语(客户推荐语)、醒目的数字(16、0.35),在页面中承担“视觉锚点”,让用户浏览时有重点停留。


 4. 色彩与图像

  • 主色调:米白+深灰,低饱和、温和,符合医疗健康行业对“信任感”的需求。

  • 强调色:紫色作为关键数字/图表的点缀色,既突出重点又不会过于跳脱。

  • 图片选择:多为真实的会议、交流、合作场景,营造出“可信赖、有人情味”的氛围。

 5. 信息传达方式

  • 数据可视化:用简洁的折线/柱状可视化来传递成果(例如 0.35、16 这样的数字),强化专业性。

  • 案例驱动:通过真实案例(Global Pharmaceutical Partner / Medical Center)让抽象的“服务价值”更具象。

  • 客户引语:引用客户高管的话语,用来增加背书和信任感。


6. 亮点

极简界面设计案例 | lgm/ – 创建极简力量的品牌窗口

杰睿

2025 年 6 月,法国设计师 Pierre Patrault 出品“lgm/”网页设计项目。该作品以 Web UI/UX、品牌识别、落地页面为设计主轴,旨在通过最简结构与视觉语言,打造清晰直观的线上品牌窗口。

本项设计秉持“少即是多”的原则:简洁的版式结构、统一的视觉元素与留白设计,让每一个视觉焦点都直指品牌核心;用户在浏览中自然而然地获得信息层级,引发情感共鸣。

项目由 Pierre Patrault 主导创意设计与用户界面;Teddy Vermeulin 负责开发落地页面,并与品牌与视频代理 Advitam 合作完成整体传播支持。三者协作默契,将创意、技术与品牌传播融为一体。

“lgm/”的发布,不仅是一次视觉尝试,更是一次品牌线上表达的新实践:精准、高效、富有引导性的设计语言,助力品牌与用户间建立清晰、信任与温度兼备的数字连接。
创意理念
“基于简洁现代的视觉语言,lgm/ 项目以极简主义为核心,将品牌形象与用户体验无缝融合,致力于在首屏即传达品牌精髓,赋予每一次交互以直观引导。”

3. 设计与体验亮点

结构清晰:落地页布局明晰、信息层级分明,让用户轻松抓住核心内容。

极致简约:利用充足留白、统一调性、统一视觉元素,降低视觉干扰,提升品牌沟通效率。

交互细节(若有):如鼠标悬停动画、滚动触发效果等,可写出“精致微互动增强用户参与感”。

imgi_521_b54a2c228930055.685bea4883f26.jpg

imgi_525_b2b378228930055.685bea4883446.jpg

imgi_527_76b8d4228930055.685bdef28d499.jpg

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

 

从无人阅读的文档到生动的设计系统

杰睿

当美好的愿望遭遇现实

按 Enter 键或单击即可查看完整尺寸的图像
我们用来记录 Notion 上的设计系统组件的模板

改变一切的研究

按 Enter 键或单击即可查看完整尺寸的图像
按 Enter 键或单击即可查看完整尺寸的图像

将文档重新想象为一种生活工具

我们不需要要求团队适应我们的系统,如果我们的系统适应他们呢?

我们的新理念:展示,而不是讲述

新的文档架构

组件标题

按 Enter 键或单击即可查看完整尺寸的图像
Accordion 组件的新标题

视觉规格

按 Enter 键或单击即可查看完整尺寸的图像
组件文档的第一个面板:组件本身及其所有变体

情境指导

按 Enter 键或单击即可查看完整尺寸的图像
表格组件的上下文指南

注意事项

按 Enter 键或单击即可查看完整尺寸的图像
选择卡组件的注意事项部分

应用内示例

按 Enter 键或单击即可查看完整尺寸的图像
在应用程序中使用 Accordion 组件的示例

最终结果

按 Enter 键或单击即可查看完整尺寸的图像

结果

建立在成功的基础上

教训

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

5 个优秀的 UX UI 作品集,供您参考(2025 年)

杰睿

按 Enter 键或单击即可查看完整尺寸的图像
Diego Rappi 产品设计师
按 Enter 键或单击即可查看完整尺寸的图像

伊莉扎维塔·比利亚耶娃

按 Enter 键或单击即可查看完整尺寸的图像
按 Enter 键或单击即可查看完整尺寸的图像
Jay Park 作品集

朴宰范

注意事项

应该做的

注意事项

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

如何使用 AI 实现 Figma 工作流程自动化

杰睿

步骤 1:连接 Figma 以获取评论

按 Enter 键或单击即可查看完整尺寸的图像
Figma 组件的设置

第 2 步:在将评论输入 AI 之前对其进行格式化

按 Enter 键或单击即可查看完整尺寸的图像
工具组件的设置
按 Enter 键或单击即可查看完整尺寸的图像
Figma 组件的直接输出

步骤 3:使用 AI 对 Figma 评论进行分类、总结和格式化

按 Enter 键或单击即可查看完整尺寸的图像
Gemini AI组件的设置

1. 为什么选择 Google Gemini AI

2. 提供用户文本

以下是来自设计文件的 Figma 评论列表。- 严格根据内容将其分为最多 **4 个类别**。- 使用**Figma 评论中的确切措辞**,无需修改或编造内容。- 每个类别应包括:  - 使用 `<h2>类别名称</h2>` 的**标题**。  - `<p><b>此处为摘要文本</b></p>` 内的**加粗摘要**。  - `<ul><li>“实际 Figma 评论”</li></ul>` 内的**真实示例列表**,列表前有空格。  - **每个类别最多限制 4 个要点**。- **请勿添加新示例。仅使用格式化注释中提供的内容。**- 如果评论不属于这 3 个类别之一,请将其放在“其他”下。- **您只能以 HTML 格式回复**并且必须使用以下标签:  `<h2>`、`<p>`、`<ul>`、`<li>`、`<b>` 和 `<a>`。---### **Figma 评论(从文件动态提取):**{{formatted_comments}}

3. 设置输出令牌和温度

步骤 4:连接到 Google 文档

按 Enter 键或单击即可查看完整尺寸的图像
Google Docs 组件的设置

附录

1. 文本解析器不再是必要的。

按 Enter 键或单击即可查看完整尺寸的图像
文本解析器组件的设置

2. 对回应进行尽职调查。

3. 调度功能很有用。

按 Enter 键或单击即可查看完整尺寸的图像
日程设置

 

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

设计工具 | 7 种工具助您实现 Figma 工作流程的自动化

杰睿

Figma 是设计师的游乐场,但有时感觉滑梯坏了,沙盒里充满了错误。

你怀着设计精美作品的崇高目标打开文件……然后花了 90 分钟调整按钮、命名图层,还和自己争论字体大小。真有意思!

值得庆幸的是,有一些工具可以帮我们摆脱这种缓慢疯狂的循环。这些工具可以帮我们处理那些无聊、重复的工作,这样你就可以真正专注于设计,也就是你擅长的部分。

以下 7 种工具可自动化您的 Figma 工作流程。

1. MadeinFigma:跳过无聊的东西

将显示缩放图像
MadeinFigma.com 网站模型

让我们从最明显的开始。

MadeinFigma专为那些厌倦了第 47 次设计相同登录屏幕的人而设计。它包含预置的产品套件、UI 组件、网站版块、仪表板和产品流程。

从真实完成的布局开始,然后逐步构建,无需拖拽矩形框耗费三个小时。只需复制粘贴、调整,即可完成。

它不仅节省时间,还能让你把脑力投入到实际问题上,比如如何为客户设计一个美观的身份验证流程。

2. 内容卷轴:别再输入“John Doe”了

将显示缩放图像
ContentReel 模型

你正在填写表格。你需要一些示例姓名、邮箱、头像和地址。你盯着屏幕。你的大脑却无法想象出一个令人信服的虚拟人物。

这就是Content Reel发挥作用的地方。它会立即用真实的数据填充您的设计,这样您就不必再假装每个用户都被命名为“测试用户 3”。

使用它来插入看起来真实、行为真实的内容,并且不会让您的 UI 看起来像是在真空中制作的。

3. Autoflow:轻松连接屏幕

将显示缩放图像
AutoFlow 模型

想要绘制流程图吗?厌倦了在 18 帧之间手动绘制箭头吗?

Autoflow可以自动完成这一切。选中两个框架,砰,连接线就画好了。这是 Figma 严重缺失的智能连接工具。

它非常适合展示用户旅程,而不会让您的画布看起来像旧的犯罪调查委员会。

4. Similayer:像老板一样管理你的图层

将显示缩放图像
Similayer 模型

你的 Figma 文件有 300 个图层。你想更改所有按钮的颜色。手动选择它们是一种数字自残。

Similayer允许你选择所有具有相同属性的图层,例如文本样式、填充、描边等。只需单击一下,即可将所有图层整合在一起进行编辑。这真的很让人满意。

使用它来进行清理、批量编辑,或者在周一早上感受强大的力量。

5. Iconify:无尽图标,零遗憾

将显示缩放图像
Iconify 模型

没有 Iconify 的设计就像没有清单去买东西。你以为你会记得你需要什么,结果回来时却只带了一罐豆子,心中充满了深深的恐惧。

Iconify让您无需离开 Figma 即可访问超过 100 个图标集,包括 Material、Feather、FontAwesome 等。

非常适合当您的设计尖叫“在这里添加一个图标”时,您尖叫着回答“哪一个?!”

6. FigGPT:让人工智能来做

将显示缩放图像
FigGPT 模型

我们生活在人工智能时代,老实说,我们最好也倾向于人工智能时代。

FigGPT是一个 AI 插件,它可以帮助生成占位符副本、建议布局想法,甚至在你的大脑退出聊天时命名你的框架。

它并不完美。它仍然把按钮叫做“请点我”。但在截止日期前,它是个不错的数字伙伴。

7. Design Lint:捕捉你错过的东西

将显示缩放图像
设计 Lint 模型

你知道吗,当你完成设计,准备展示的时候,有人指出你的行高正好有一帧不对吗?是的,我也遇到过这种情况。

Design Lint会检查您的文件是否存在不一致、缺少样式、未链接的元素、异常颜色,这样您就不会在下次审核中受到批评。

这就像一个一丝不苟的实习生,他唯一的目的就是指出你的错误,但是很客气。

提示:不要让自动化让你变得懒惰

这些工具可以提供帮助,但它们并不能取代实际的品味和判断。

使用自动化可以节省时间,减少错误,避免重复做 400 次相同的任务。但仍然需要检查间距。仍然需要调整字体排版。仍然需要进行一些巧妙的设计,让最终产品更具人性化。

因为虽然机器人很擅长替换你的 lorem ipsum,但它们仍然无法决定你的号召性用语应该是“立即购买”还是“开始旅程”。

 

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

如何为 AI 设计和代码生成器编写更好的提示

杰睿

由于 AI 设计和代码生成器在设计过程中迅速发挥积极作用,因此了解如何充分利用这些工具至关重要。如果您使用过 Cursor、Bolt、Lovable 或 v0,您就会知道,输出的好坏取决于输入。

以下是我用来引导 AI 实现实用、可用且美观的 UI 的结构化提示格式。它包含 5 个部分:

  1. 上下文(你想要构建什么)
  2. 描述(AI 应该考虑的事情;设计优先级)
  3. 平台(您的目标平台)
  4. 视觉风格(你希望在 AI 生成的设计中看到的视觉属性)
  5. 要包含的 UI 组件(您希望在页面/屏幕上看到的特定组件列表)

快速提示:如果您想了解如何使用此提示格式生成真实的 UI,请查看本教程:

1. 背景

首先用一句话清晰地定义你的设计内容。这有助于 AI 在深入视觉效果之前理解页面/屏幕的目的和范围。

定义 context 时执行以下操作

  • 为现代投资应用程序设计一个时尚、信息丰富的主屏幕。 ”
  • 为食品配送应用程序创建一个最小的结账屏幕。 ”
  • 生成用于跟踪健身进度的移动仪表板 UI。 ”

定义上下文时应避免这种情况

  • 为医疗保健应用程序制作漂亮的 UI 屏幕。 ”
  • 为儿童玩具创建一个很酷的主页。 ”

2. 描述

描述应该简短扼要地阐述此设计最重要的方面。解释最重要的方面:用户目标、内容优先级和交互细节。这将引导 AI 朝着正确的方向发展,使其专注于功能,而不仅仅是美观。

撰写描述时请执行以下操作:

  • 用户应该立即看到关键投资组合统计数据、最近的变化,并通过清晰度和数据层次结构获得信心。 ”
  • 突出显示每日变化和见解,同时保持‘查看投资组合’等操作易于访问。 ”

快速提示:在解释 AI 在设计屏幕/页面时应该考虑哪些因素时,请尝试将重点从输出转移到结果。“帮助用户了解当前的市场趋势,并提供快速操作,以便他们能够根据看到的信息快速采取行动。”

3.平台

指定设备和操作系统以帮助符合平台指南和限制,例如屏幕尺寸、布局行为和该平台上可用的本机组件。

这样做

  • iOS 17 / iPhone 14(390 x 844),使用人机界面指南
  • “Android Material 3 / Pixel 6 Pro (360 x 800)”
  • “桌面分辨率(1440x1024)的 Web 应用程序,响应式布局”

避免这种情况

  • 移动” (太模糊)

4.视觉风格

定义基调和感觉。你希望你的设计如何被用户感知?它应该平静吗?企业风格?还是年轻?添加可访问性需求(例如对比度或可读性)和样式方向(例如,模块化、卡片式、微妙的渐变)。

在描述视觉风格时这样做:

  • 专业、冷静、值得信赖。使用海军蓝、森林绿和柔和的灰色。
  • “模块化卡片布局,带有微妙的阴影和渐变。”
  • “字体在小尺寸下也应该优雅且清晰。”

描述视觉风格时应避免这种情况

  • 使它美丽”(美丽是主观的;描述属性)

快速提示:为 AI 提供对比度和可访问性指导:“确保文本对比度为 4.5:1。支持暗模式和亮模式。 ”

5. 需要包含的 UI 组件

分解屏幕上需要显示的内容。思考结构(顶部导航、正文、页脚)和叙事(用户首先看到的内容以及他们应该采取的操作)。使用占位符和示例来支持描述,以便 AI 准确呈现细节。

描述组件时请执行以下操作:

  • 从上到下开始。思考一下在页眉、正文和页脚中添加哪些组件。
  • 在描述 UI 组件时,请提及它应该具有的具体内容,例如视觉属性或功能行为。
  • 提供内容和交互示例——例如容器的内容(即 UI 中卡片的内容)、表单输入字段的占位符文本等。这将使您的设计与您正在解决的任务更加相关

日历

链接

个人资料

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

存档