首页

用户体验设计优化 | AI驱动的个性化交互:产品要准备好什么?

杰睿 行业趋势

过去我们聊交互设计,总绕不开“统一流程”和“标准化体验”。一个产品要么好用,要么不好用,大家面对的几乎是同样的界面和操作路径。但现在不一样了——AI正在悄悄改变这个逻辑。未来的产品,更像是一个“会学习的伙伴”,而不是一个冷冰冰的工具。这对产品提出了哪些新要求?我们来分层聊一聊。

 一、体验层面的变化

  1. 界面不再固定 不同的人打开同一个产品,看到的可能是完全不同的界面。比如阅读应用会根据你的阅读速度自动调整推荐模式,有的人喜欢夜间护眼,有的人喜欢大字版,系统会自己学会。
  2. 预测性更强 未来用户可能不需要“找功能”,而是系统主动把下一步放到眼前。比如你习惯早上开日历,系统会自动跳出常用会议室地址、提醒时间,帮你省掉一堆点击。
  3. 极简直觉化 随着AI帮忙减少步骤,用户对“零摩擦体验”的要求更高。他们希望“想到就能做到”,而不是还要研究菜单在哪里。

 二、技术层面的挑战

  1. 实时数据驱动 个性化体验离不开数据。产品必须具备实时收集、分析、反馈的能力。否则“个性化”只是空谈。
  2. 可解释性 用户想知道“为什么推荐给我”。如果一切都是黑箱操作,会让人怀疑甚至反感。所以产品需要给出适当的解释提示,增加透明度。
  3. 灵活的架构 界面和交互逻辑要能动态生成和修改,而不是写死在流程图里。设计师和开发团队要做好“留白”,让AI能自由发挥。

 三、设计与策略层面的考量

  1. 设规则而不是画死流程 设计师未来的任务更像“制定游戏规则”:哪些地方可以变,哪些地方必须稳定。AI在这个框架下去适应不同的用户。
  2. 个性化 vs 一致性 个性化不等于混乱。产品需要保证:即使每个人的界面不同,整体品牌调性和核心价值也不能丢。就像定制西装,花纹可以不同,但版型要保持质感。
  3. 隐私与信任 个性化背后是大量的数据收集。用户必须感到“这是我允许的”,而不是“我被监视了”。清晰的设置和边界,可能比炫酷的AI功能更重要。

 四、商业价值的变化

  1. 差异化竞争 产品更懂用户,本质上就是竞争优势。个性化交互能成为留存和转化的关键点。
  2. 长期信任而非短期刺激 推荐得再精准,如果让用户感觉“被操纵”,他们最终还是会离开。长期的信任感,比短期的点击率更有价值。

AI驱动的交互,不是给界面多加一个“智能推荐”入口,而是重新定义了产品的角色:

  • 从“统一体验”走向“千人千面”
  • 从“被动响应”走向“主动预测”
  • 从“工具”走向“伙伴”
对于交互设计师来说,挑战也在变化。未来不是拼谁画的界面多,而是谁能设计出一套可演化的规则,让AI既能适应用户,又不至于失控。
说到底,未来产品的竞争力,可能不是“谁的功能更全”,而是“谁更懂用户”。

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

 

极简界面设计案例 | 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。

 

交互设计逻辑 | 关于线框和 UI 设计流程(经验向)

杰睿 设计思维

每个设计师都有自己独特的设计呈现方式。根据项目的不同,设计师会使用不同的方式展示他们的设计。Clickdummy 原型是展示屏幕流程最常用的方式,方便简洁。通常情况下,设计师会以“编号+标题”的格式为所有屏幕命名,并通过导出结果中 JPG 文件的顺序来表达屏幕之间关系的逻辑。

我很高兴能使用像 Invision App 这样的工具来理清我的设计。然而,ClickDummy 原型在构建大型复杂的软件项目和功能性应用程序时并不理想。有时,我们会将屏幕放在 Sketch 文件中的不同页面中,以使结构更清晰,但却失去了整体的视觉效果。当你向项目经理、客户和开发人员展示你的设计时,你会发现这个过程效率低下。

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

我们需要一个高效、流畅的流程来优化演示和交接。我的经验是线框图和UI的流程。这是一种非常新颖的方式,但效果很好。

我们知道 Behance 和 Dribbble 上有很多精美的线框和 UI 流程。其实很多设计师也在做同样的事情。我在上海MINGLabs工作的时候,我的法国设计师同事 Lucas 教给我一个方法,它不仅易于理解,而且美观高效,可以作为交接的 UI 呈现流程。后来,这个方法在我的远程自由职业中得到了运用,并不断改进。这对降低沟通成本非常有帮助。

Eric Miller的移动可视化流程图

为什么我更喜欢线框和 UI 设计流程?

  1. 帮助设计师巩固他们的想法
  2. 显示屏幕之间关系的逻辑
  3. 使与客户的沟通更加轻松,呈现的内容更加清晰可见
  4. 使与开发者的沟通更加便捷,降低沟通成本。
  5. 有利于与其他设计师合作
按 Enter 键或单击即可查看完整尺寸的图像

我如何制作流程?

当然,我的应用和网站都是用 Sketch 设计的。我建议从第一个线框图开始设计流程。之后再设计主页和两三个辅助页面。

步骤1

您可以创建一个新的画板。画板大小要足够大,能够覆盖所有屏幕。这样做的目的是为了更容易添加线条和注释,也方便在最后时刻导出完整流程图的概览。不过,现在没必要添加屏幕数量。等您心中有了概览之后,再添加也不迟。

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

步骤2

流程包括 5 个组件:

  1. 屏幕
  2. 画面名称,格式为“ 数字+字母+标题”或者“ 数字+标题”
  3. 动作和位置(红点)
  4. 线
  5. 笔记
按 Enter 键或单击即可查看完整尺寸的图像

步骤3

流程的结构是从左到右组织的。页面位置越靠右,层级就越低。我的习惯是把首页之类的第一页放在左侧。设计流程如下:

按 Enter 键或单击即可查看完整尺寸的图像
树形结构
按 Enter 键或单击即可查看完整尺寸的图像
沃达丰 WLANoMeter 用户界面流程

问题

线框和 UI 流程改善了沟通。但它并不完美,实际上有时甚至有点令人毛骨悚然。

  1. 每次增加屏幕,数字就会乱。我的命名方法可以避免这种混乱,但不是最佳方法。
  2. 一旦移动了屏幕,连接的线就必须重新绘制。
  3. 导出的概览 pdf 无法显示每个屏幕的名称。

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

朴素的交互设计原则

杰睿 设计思维

基本原则
清晰、简洁、一致、可操作暗示以及隐喻(可供性)、反馈、容错、高效、易记忆易学习。

1. 清晰
内容、结构、界面效果都是清晰可见的,加强情感的修饰,注意只使用文字与排版来表达页面,以字体、字号、颜色、版式,精妙动画效果来增加界面的精致性与设计不够。尽量避免平滑、阴影。
2. 简洁
为了用户聚焦,限制明确页面唯一的或者最重要的目标性,不让用户让焦钛的选择感。
3.一致性
界面元素的标准控件化:问题使用系统交互元素,以及界面和用户之间对话风格的统一:标准文本风格、口吻、语气、统一话术。
4.可操作暗示隐以及喻意
让用户看到这个就是可以交互的,按钮要像按钮,与文本内容以及其他界面元素有所区别。另外可增加操作引导,在操作时给予引导,而不是独有的一股脑引发引导。隐喻本可以单独做一个原则,但这里与可操作暗示大约类似,隐喻指的是虚拟界面可以做到让用户经验类似的喻,确实是现实物理世界的隐喻还是虚拟数字世界。让用户无成本迁移感。5
. 反馈
任何操作都要给予可感知的操作反馈,当点击或者其他时,被操作交互的要素要给予短暂的强调,另外通过动画给予进度提示,
6.容错与安全感
降低用户犯错成本,做到高危操作可恢复。应用应该通过使用熟悉的、可预见的交互元素,确认重要的操作、可回溯的取消手段等方式,来让用户觉得自己处于被保护的状态中。此外还有防错原则,采用本质的安全设计方式(固有)安全),比如表单未完成按钮不可用...
7.高效
两个方面,用户高效使用的性以及高效开发的性,要关注网页技术新功能,快速迭代那些优秀且通用改装的新功能。
8.易学习易记忆
这是最后一条,在做到前面的原则之后,这条应该是取缔的,但是由于技术性平台的特殊性,涉及专业性技术术语等等的东西,所以对于一些非技术人员或者不太懂行的技术人员,需要提供提醒文档嵌入,方便用户学习。

 

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

界面设计案例分享 | ComplyContro品牌&UI

杰睿 系统UI设计文章及欣赏

imgi_214_9f0c73226297935.683f29f07b819.png

imgi_775_146bae226297935.683f1fcc7bea5.png

imgi_784_ef7ed4226297935.683f29f07b253.png

imgi_789_2e8849226297935.683f1fcc7a7d5.png

imgi_794_02439d226297935.683f1fcc7a01b.png

imgi_801_e002ed226297935.683f29f0799dc.png

imgi_808_89d252226297935.683f28f9eb07f.png

imgi_817_b4ccb4226297935.683f289fc694a.png

imgi_821_90ae54226297935.6840132c29038.png

 

1. 项目背景 & 设计目标

  • 项目名称与内容:这是为 ComplyControl——一个专注金融领域的前沿 AI 合规模块(具备实时监控、智能检测与欺诈发现功能)的品牌形象与网站界面设计项目 Behance+1

  • 完成时间与平台:发布于 2025 年 6 月 4 日,整合品牌设计、网站 UI/UX 及用户界面,使用 Figma 与 Webflow 等工具进行创作与实现 Behance

2. 品牌视觉识别(Brand Identity)

  • 标志设计:图中展示了简洁现代的标志(logo),结构紧凑且具识别度,呈现强烈的科技感与专业感 。

  • 配色策略:项目运用了对比鲜明的暖色(如橙红)与冷色(蓝色),辅以深色底调,强化视觉冲击力,同时展现了兼具活力与稳重的品牌气质 。

  • 字体风格:在字体展示中可见清晰可读的无衬线体,搭配简洁的数字表现,进一步传达专业且现代的品牌语言 。

3. 界面设计(UI/UX & Website)

  • 移动界面布局:图中呈现了移动设备上的 UI 布局,包括导航菜单与交互按钮,采用扁平化设计,按钮与图标配色清晰,对焦用户操作体验 。

  • 数据可视化:图表或百分比数据显示以清晰简练的方式呈现关键指标(如 95%、40% 等),辅助用户快速理解核心内容 。

  • 整体风格语言:整体风格简洁、科技感强烈,布局逻辑清晰,强调功能与信息可视化,有助于金融产品的信息传递与可信感建立。

4. 工具与创作流程

  • 设计工具:项目中使用了 Figma 进行界面与原型设计,利用 Webflow 实现响应式网页开发与交互效果。同时还运用 After Effects、Photoshop 以丰富视觉表现与动画效果 。

  • 多方协同:项目由 Embacy Design 领衔,联合多位设计师及机构参与,展现了团队协作的深度与创意整合能力 。


总体评价与亮点

优点 描述
清晰品牌定位 通过色彩、字体与视觉元素的统一,传达了“科技 + 合规”的品牌主旨。
现代化视觉表现 配色对比强烈、界面干净、排版有序,符合金融科技产品的使用场景。
信息表达精准 数据视觉化突出、界面交互明确,提升用户理解与体验效率。
专业工具运用 Figma、Webflow、AE 等工具的融合使用提升了设计的实施效率与表现力。

 

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

兰亭妙微案例分享 | 国土空间大数据可视化界面设计

杰睿 大数据可视化设计文章及欣赏

数慧时空(全称:北京数慧时空信息技术有限公司)是以空间信息技术为核心、国内领先的国土资源行业解决方案提供商,具有业务咨询、自主软件研发、数据加工和信息服务的全业务综合服务能力,是国土资源部最重要的信息化合作单位之一。数慧时空基于多年的研发理论与实战经验,蓝蓝设计基于多年的gis地理信息/大数据可视化界面设计实战与理论,强强联合。
融合西方先进的系统设计方法与中国互联网的快速迭代方法,形成了独有的系统性与敏捷性兼具的工作方法。国土一张图软件项目是数慧时空公司从2012年开始研发的重点产品,此次在国土资源部展会上以大屏的形式展示给国家各部委领导,界面设计及研发实力获得一致好评。

深刻理解国土局需求

数慧时空公司从创立公司开始,就一直在国土资源领域做产品,公司所有的产品都是转绕着国土资源开展的,可以说在这个行业中的资深专家了,公司近年来发展的越来越好,频频接到大的单子,对各身各个产品的要求也越来越高,所以,第一次把这么重要的展览会上向各级重要领导演示的产品交给了外部的设计公司。这个项目完毕之后,基于客户的客户的认可和彼此的欣赏,又继续和蓝蓝设计签下三个项目的整体设计合作协议。
在和数慧时空研发团队的配合中,他们给我们印象最深的是通情达理,积极的推进项目,充份的理解和倾听。开始的时候,需求会不断的修改或推翻或补充,会不知道客户想要什么样的风格,以什么为美,在即有布局的原型和元素的基础上如何创新,换一种完全不同的方式去展现有的内容。工作十天左右以后,视觉工作有了新想法,推倒重来也不会怕麻烦。

快速的设计迭代 现场配合

为了共同的目标--让软件产品更卓越,在展会上赢得充份关注,过程中的需求变更、研发、设计难度工作量增加,都不是问题。前一个月完成整体设计,后二个月,我们的前端工程师基本上每天都在现场,实现前端制作的代码实现和程序工程师的对接,互通有无,互相学习,谁会的谁就做,怎样快捷 怎么来,不分彼此,晚上一起加班到十一二点,周未继续。双方工作态度和积极性都极好。最终平等的对话、充份的理解和倾听,快速的设计迭代和现场配合是项目成功的关健。
 
 

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

杰睿 设计资源

当美好的愿望遭遇现实

按 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。

【游戏界面设计分享】《DUNE|Personal Work》

杰睿 平面设计

imgi_34_3db6b6213486985.6747309f530b9.png

imgi_35_773966213486985.6747309f52652.png

imgi_36_9a1e76213486985.67585eae083fc.png

imgi_90_456a13213486985.67585eae07f18.png

imgi_91_80499a213486985.67585eae08911.png

从《沙丘》UI概念设计看游戏界面经验

前几天在 Behance 上刷到一个《DUNE|Personal Work》的 UI 概念项目,整体完成度很高。作为设计师,我觉得这类作品不仅是视觉享受,也能总结出一些值得借鉴的经验点。这里就结合其中的阵营选择界面和整体展示,整理一些观察和思考。


1. 版式与结构:焦点与对称

这类「阵营选择」场景,本质上是一个决策界面。作者采用了很经典的结构:

  • 中央突出:当前选中的阵营(走私者)放在正中间,卡片更大、更亮,带有金色光晕。

  • 对称排布:左右阵营呈对称分布,层级自然清晰,符合玩家的浏览动线。

  • 信息分区:上半部分是角色立绘和阵营徽记,下半部分是机制说明和操作提示。模块分明,不容易迷失。

经验点:在决策型界面中,居中放大+光效高亮,是非常直接有效的焦点策略。


2. 视觉语言:氛围与辨识

《沙丘》的世界观强调沙漠、贵族与荒凉感,UI 也延续了这一氛围:

  • 材质:背景有金属与沙尘质感,带来厚重感。

  • 色彩:每个阵营配有主色(绿色、棕色、蓝色、金色、红色),既强化辨识,又有“品牌”味道。

  • 徽记:几何化的阵营符号,简洁且容易记忆。

经验点:大型世界观游戏的 UI,最好在颜色、图形符号和氛围感上形成自洽体系。


3. 信息呈现:符号化与层次感

在阵营说明区,信息拆解得很合理:

  • 优缺点:红色 V 表示劣势,绿色 ▲ 表示优势。非常直观,不需要额外解释。

  • 叙事与机制结合:不仅给数值效果,还加了剧情描述(例如与弗瑞曼的冲突),让选择更有代入感。

经验点:把理性信息(数值)和感性信息(剧情)结合,能让玩家在选择时既动脑又动情。


4. 交互与引导:清晰的操作提示

底部的操作提示很细致:

  • A 选择 / B 详情 / X 故事,分别对应不同层级的操作需求。

  • 玩家既可以直接做决定,也可以深入剧情,满足不同类型的用户。

经验点:关键节点上提供“浅 → 深”不同层级的操作选项,能兼顾快进型玩家和沉浸型玩家。


5. 作品展示方式:完整体验

Behance 项目整体除了界面,还展示了:

  • 不同场景的 UI(例如主菜单、HUD、资源界面)。

  • 色彩与符号系统,确保整体一致性。

  • 工具说明(Photoshop / Midjourney / 后期合成),透明展示流程。

经验点:在作品集展示中,不仅要秀界面,还要展示系统性思考和设计过程。


总结

这份《DUNE》个人 UI 概念作品给我的几点启发:

  1. 决策型界面要突出焦点,用对称和光效增强层级。

  2. 色彩与符号体系是阵营/角色类 UI 的关键资产。

  3. 信息既要数值化,又要叙事化,提升代入感。

  4. 操作引导要考虑不同层级的玩家。

  5. 作品集展示不仅是炫图,还要有系统设计思路。

如果你正在做游戏 UI 或作品集,这些经验都值得借鉴。

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

 

 

日历

链接

个人资料

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

存档