首页

【游戏界面设计分享】《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。

 

 

自适应UI设计解读 | Fathom 企业人工智能平台

杰睿 平面设计

Fathom 是一款面向企业级应用的尖端 AI 平台,核心优势在于自适应能力计算机视觉。它不仅能处理复杂的视觉识别与分析任务,还能根据不同行业场景灵活调整算法与工作流程,从而帮助企业提升自主性与运营效率。

imgi_558_original-cfc8f340944bd01924c634d555e72be6.png

imgi_577_original-0fd0acbe1a444df4948ccac15ee7e154.png

imgi_578_original-3c9ad24be39584ad4da43c3662e7694d.png

imgi_593_original-574886f35c53c61f34116c817245732e.png

original-dee23ad37d652ffadb312fd286efa806.png

该平台具备以下特点:
行业通用性 – 无论是制造、物流、零售还是医疗,Fathom 都能快速定制并部署适配的解决方案。
先进计算机视觉 – 高精度图像识别、目标检测、异常监测等能力,为生产与决策提供可靠数据支撑。
创意到落地 – 提供从构思到市场化的一体化工具链,简化研发和上线流程。
高性能架构 – 优化计算资源利用,确保大规模数据处理的速度与稳定性。
Fathom 的定位不仅是一个工具,更是企业在 AI 转型道路上的战略伙伴,让复杂的人工智能能力变得易用、可扩展、可持续。
 
一、设计语言分析
主题色调与氛围
  主色是深紫 + 黑蓝渐变,营造科技感与未来感。
  视觉重心在中上部,暗背景下的亮色文字和光晕效果强化了“高端、尖端科技”印象。
  渐变色和星空背景暗示了“无限可能”“前沿探索”。
字体与排版
  标题使用大字号无衬线字体,简洁且有张力,强调专业性。
  副标题与正文采用中等字重,行距宽松,提升可读性。
  层级分明:H1 > 功能标题 > 描述文字。
信息结构
  顶部:品牌定位(“The World's Leading Computer Vision Platform”)+ 快速行动按钮(CTA)。
  中部:可信度背书(合作品牌 Logo)。
  下部:功能模块 + 价值点 + 成功案例。
  时间轴形式呈现“从想法到落地”的流程,有助于理解产品生命周期。
图形与图标
  圆形、轨道、节点等几何元素强调“系统化”“科技环绕”概念。
  图标色彩与模块背景形成对比,快速区分不同功能。
  动态化暗示(虽然是静态图,但布局让人感觉到运动轨迹)。

二、可迁移的设计要点
视觉风格迁移
  如果你做企业级 AI 或 SaaS 产品介绍页,可以借鉴这种深色渐变背景 + 光晕 + 宇宙/星轨的氛围,强化科技与未来感。
  在其他行业(如金融、医疗)迁移时,可将主色换为品牌色或更温和的深色系,保留渐变和光效结构。
结构布局迁移
  上部:一句话定位 + CTA(方便立即引导用户操作)。
  中部:信任背书(客户 Logo、数据成就)。
  下部:功能模块化 + 价值点图标化。
  收尾:真实案例或用户评价(提升可信度)。
  这种结构可直接迁移到任何产品着陆页。
动线迁移
  从“愿景 → 信任背书 → 功能亮点 → 解决方案 → 案例”的信息节奏,降低用户流失。
  如果迁移到你的 UI/UX 分享内容,可改为“趋势背景 → 案例亮点 → 应用技巧 → 实际案例 → 互动引导”。
视觉细节迁移

金融科技产品主视觉设计

杰睿 平面设计

1.jpg

Renforce
*品牌身份
*创意方向
*数字设计
Renforce 是一个面向复杂技术生态系统组织的运营技术平台,旨在简化对定性与定量信息的端到端管理。借助先进的人机协同技术,Renforce 为日常运营提供稳健、高效且简洁的解决方案。

为了体现 Renforce 在效率与准确性上的价值主张,设计概念取材于“正方形”这一形状。
正方形是人类最常用的几何形状之一,令人着迷的是,如此简单的形态却能支撑从复杂技术到大型建筑的各种应用。它象征着精准、高效与简洁。以正方形为核心元素,品牌标识与设计系统由此构建。

2.jpg

3.jpg

imgi_726_2f9186204124853.66a336e48771d.jpg

imgi_727_728512204124853.66a336e48a7d5.jpg

imgi_729_209e30204124853.66a336e48928e.jpg

imgi_734_e5c9ec204124853.66a336e48867b.jpg

imgi_735_dc8a9e204124853.66a336e4899a3.jpg

imgi_4072_91974c204124853.66a336e3a1863.jpg

 

 

 

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

 

【原创案例分享】插画设计:水处理设备2.5D、2D器械插画设计

杰睿 平面设计

项目背景:

该项目常州科德水处理成套设备股份有限公司委托设计,致力于水处理领域相关设备的视觉呈现,通过精心设计的3D与2.5D插画,生动展现各类水处理设备的结构细节与工作原理。我们旨在以直观、易懂的方式,提升公众对水处理技术的认知与兴趣。
为企业客户提供高质量的软件UI图标设计,助力其在环保领域的品牌形象塑造与市场推广。通过专业的插画设计,我们期望能够提升软件ui美观度和美誉度,引导更多人对水资源保护与可持续利用的关注与思考。

项目概述:

产品定位

产品定位为一款集科普、宣传与营销于一体的水处理设备插画设计。通过3D与2.5D视觉呈现,旨在直观展示设备细节与工作原理,提升公众认知,同时为企业客户提供高质量的视觉宣传素材,助力其品牌形象塑造与市场拓展。

目标用户

目标用户包括广大公众、水处理领域专业人士及企业客户。公众用户希望通过插画了解水处理技术;专业人士则关注设备的结构与原理;企业客户则寻求高质量的宣传素材以提升品牌形象。

设计风格

设计风格以科技感与直观性为核心,结合3D与2.5D技术,注重细节呈现与色彩搭配,营造出既专业又不失趣味性的视觉体验。通过精准的线条与光影处理,使插画作品既具有教育意义,又具备艺术美感。
 
 

2.5D插画风格

2.5D插画风格是一种介于2D和3D之间的插画艺术表现形式,是一种用二维手法表现三维效果的插画风格。它结合了二维的平面简洁和三维的立体空间感,给人既简单又富有深度的视觉体验。
 

气浮装置插画设计

2.5D的插画绘制方法让画面看起来更加的简洁、精美且充满活力。同时,足够丰富的细节装饰会带来耐人寻味的效果,能够迅速吸引观者的眼球。
 
 

刮泥机插画设计

通过二维手法表现出三维效果,让整个装置更具立体感。运用巧妙的透视和光影,在平面上营造出类似真实场景的深度感,能让观众直观地感受到处理装置的各个部分功能的空间位置,清晰的指导工作。
 
 

行车插画设计

2.5D插画不需要像3D绘画那样考虑复杂的模型构建和精细的纹理映射,降低了创作难度,同时降低了设计成本,设计效率也更加高效。
 

2D插画风格

2D插画风格,即二维插画,是一种在平面上展现的艺术形式,具有表现力强、风格多样、易于创作、适应性强、传达信息直观以及情感表达丰富等优点。
 

气浮装置插画设计

通过线条、色彩、形状和构图等元素,对该设备进行2D插画的重新创作,在图形、颜色表意上对各个功能区的分布、作用进行清晰传达。
 
 

刮泥机插画设计

2D插画的绘制过程比较简单,不需要复杂的建模和渲染技术。根据客户给的参考或者沟通讲解,确认符合行业以及设备特点的色彩及元素构成手法,产出精美、准确的设备插画。
 
 
 

行车俯视图插画设计

2D插画能够直观地传达信息,使观众更容易理解和接受。工业产品的设备介绍中应用广泛。
 
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan

UI 设计中的胶囊和弹窗设计

涛涛 平面设计

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

UI设计中的胶囊和弹窗设计

涛涛 平面设计

该网页聚焦 UI 设计中的胶囊和弹窗设计,展示了大量各类商业活动的 banner 设计案例,涵盖电商促销、节日营销、会员福利、课程招生等多个场景,体现了胶囊按钮与弹窗在商业设计中的广泛应用,为相关设计提供了丰富的实践参考。

字体设计中把控 “形与势” 的方法及创意形态的挖掘

涛涛 平面设计

本文主要介绍了字体设计中把控 “形与势” 的方法及创意形态的挖掘

如何设计一个高级的logo?

涛涛 平面设计

在 Logo 设计中,将直观的象征、隐喻与战略性思考相结合,能让 Logo 脱颖而出并引发共鸣,而直觉作为设计的关键过程,可引导设计师找到最易懂的方案。象征符号能跨越语言快速被理解,其视觉简约性带来灵活性和永恒性,隐喻则能在不同概念间建立关联,增添设计乐趣与记忆点。设计时需在核心采用象征或隐喻、存档设计稿、用黑白色设计、确保无限缩放、平衡 Logo 并精确检查,这些原则不仅适用于 Logo 设计,也可延伸到解决个人问题。

Kakao,免费创建和分发新数字字体“Kakao Font”

杰睿

-推出两种针对数字环境优化的字体:“Kakao Big Font”和“Kakao Small Font”

-体现数字通信文化,例如复杂的文本表情符号,就像首辅音是一个字母一样

-开放字体许可,可免费用于个人和商业用途

 

(2025-06-17) 在人们更熟悉打字而非手写、更熟悉滚动而非书籍的时代,Kakao(代表郑信雅)免费推出了一种名为“Kakao Font”的数字字体,任何人都可以轻松地在屏幕上阅读和表达文本。

 

为屏幕而生的文字 'Kakao大字' 'Kakao小字'

“Kakao字体”是一款针对数字屏幕上的可读性和表现力进行优化的字体,包含“Kakao大字体”和“Kakao小字体”两种类型。它并非简单将现有字体进行数字版本化,而是经过全新设计,旨在为智能手机和PC屏幕提供最佳的阅读体验。

 

正如标题所示,“Kakao 大字体”是一款即使在屏幕上也能实现清晰醒目的字体。“Kakao 小字体”是一款适用于正文或标题的字体,通过加宽字母间距并合理安排线条,使其即使在小尺寸下也能清晰可见,从而实现清晰可见而不会模糊。

 

仅用声母‘ ㅋㅋ’和‘ㅇㅇ’即可进行交流…体现数字通信文化

特别是Kakao也抓住了时代的变化,只用“ㅋㅋㅋ”和“ㅇㅇ”等首字母来表达自己的想法已经变得很自然。

 

由于韩语的声母通常被认为与中间元音和尾元音连用,因此现有字体存在着单独使用声母时难以清晰阅读的局限性。为此,Kakao通过增大字体尺寸并精确调整比例,使单个声母即可准确传达含义,并将声母改为独立字母而非字母的一部分。

 

表达情感的特殊符号也变得更加复杂:)

此外,使用特殊字符表达的文本表情符号格式也得到了进一步完善。通过自动将两个或多个符号或字母组合转换为一个的连字功能,当输入特定符号时,它会被转换成简洁的表情符号,即使是文本,也能生动地表达出类似面部表情的情感。

 

例如,像“:-D”这样的笑脸表情符号,由于字母“D”的位置或大小取决于字体,很容易显得突兀。但“Kakao Font”会将整个表情符号以有序的形式输出,帮助用户以简洁平衡的方式使用表情符号。此外,像“->(箭头)”这样的常用符号组合会在输入后立即自动转换,免去了用户单独搜索特殊字符的麻烦。

 

Kakao 将“Kakao 字体”应用于开放字体许可证 (OFL),并免费提供给个人和商业使用。该字体可从 Kakao 公司网站下载。

它也可以通过 RixFont Cloud 和 Adob​​e Font 等云字体服务免费获得。

 

Kakao BX 设计负责人申永燮表示:“Kakao 字体是为了在我们每天接触的智能手机等数字屏幕上提供最佳的可读性和表现力而创建的。”他补充道:“我们将继续理解时代变迁的沟通方式,并通过体现这一变化的字体,为更丰富的数字表现文化做出贡献。”

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

利用 AI 提升设计

lanlanwork

新一轮惊天动地的数字革命已经打响, AI 技术带来的改变令人瞩目,引发了持续不断的惊叹,同时,也带来了一些系列的蝴蝶效益,许多人在思考 AI 是否会取代我们现有的工作,恐慌开始蔓延。

我曾也有过这样的担忧。如果明天我的老板解雇我,用 AI 取代我怎么办?直到我深入研究机器学习和 AI 算法相关领域知识,洞见了一些可能性。

现在,我能够理解为什么大多数人(也包括我在内)会认为人类会被 AI 取代,或许,只是对未知领域充满恐惧或好奇罢了,这正是人类的天性,会这就是我的看法。既然如此,何不去探索一番…

在平面设计、用户体验/用户界面、前端开发和项目管理领域,我发现现阶段的 AI 能力还无法复制人类的创造力和直觉(或许在一个秘密的实验室,AI 机器人已经觉醒)。然而,使用 AI 工具确实能够助力我们更加高效和有效的交付工作!

在本文中,我将重点介绍可用于平面设计和用户体验/用户界面设计的 AI 工具/插件,以及能够提升我们的信心和创造力的优势功能特性。在这之前,深呼吸一下,和我一起探索…

AI 在平面设计中的应用

最近,我们可能看到许多人在社交媒体上发布关于 AI 生成的照片、艺术作品、3D 模型等内容。令人惊叹的是,他们可以通过文本提示生成图像、转换图像,甚至让 AI 创建特定图像。

在我看来,AI 生成的照片、艺术作品和 3D 模型已经基本可以更快速、更轻松且更有创意地表达我们的想象力。

问题是,我们是否可以将 TA 们用于商业吗?

如果我们想将这些生成的图片用于公司或任何行业,我们必须对其进行修改。原因不难猜测,由于每一家企业都有自己的风格偏好、营销背景和品牌形象,现阶段 AI 工具还无法准确生成这些元素(需要我们定向训练 TA ,也需要我们提供设计方向)。为了增加企业那一份独特性和个性化,我们现阶段只能依赖 AI 完成 50% 的设计工作,而将另外 50% 需要我们的创意输入和修改。

设计任务的 50% 已经可以依靠 AI 生成,剩余 50% 仍然需要设计师进行传统化修改。不得不承认,AI 已经可以分担设计师们一大半的任务。因此,那些非设计专业的外行(也包括一部份设计师)会认为 50% 的设计师应该会被取代,然而,这个观点非常肤浅,甚至略显无知。

请看下面的食品海报示例:

使用 AI 工具的好处:

  • 为设计特定元素提供有价值的见解
  • 为情绪板提供创意设计灵感
  • 通过高效的输出节省时间
  • 鼓励在设计过程中跳出框架思考
  • 基于文本提示生成现代、清晰且细致的设计
  • 还有更多

值得探索的 AI 工具和插件:

  • Adobe Firefly – 可以将文本转换为图像并生成惊艳的文字效果。
  • MidJourney – 可以创建几乎任何我们能想到的图像。
  • ChatGPT – 可以回答用户任何想问的问题。(我们可以让 TA 编写特定的提示词来输入给 Adobe Firefly 或 MidJourney 生成图像)

AI 在 UX/UI 设计中的应用

在用户体验(UX)和用户界面(UI)设计中, TA 与前面提到的平面设计有些相似,UX/UI 设计师可以使用 AI 工具来设计网站和移动应用的界面。

只需提供一个文本提示,Uizard 就会生成用户界面,之后我们可以根据需要进行修改。

使用 AI 工具的好处:

  • 在设计网站或移动应用之前,通过头脑风暴帮助我们生成创意
  • 当客户发送大量反馈文档时,可以帮助我们阅读并为总结内容
  • 协助整理必要的信息,以创建网站或移动应用的信息架构
  • 协助进行用户体验文案创作
  • 帮助创建网站或移动应用的元素,例如图标、按钮或可用的艺术设计
  • 协助将草图转换为数字线框图
  • 还有更多

值得探索的 AI 工具和插件:

  • Uizard – 可以在一分钟内将创意转化为设计。
  • Adobe Illustrator – 将文本转换为矢量图形。我们需要寻找一些精美的创意矢量图标, TA 也是一个非常不错的选择。
  • ChatGPT – 可以帮助我们列出优秀的创意、整理重要信息、创建站点地图、设计信息架构、开发用户画像和用户故事,甚至为我们的网站或移动应用撰写用户体验故事。
  • Gemini – 可以识别图像、语音,生成文本,也可以创建图像。

给 Gemini 一个清晰的提示,我们可以获得设计所需的图像和文案。

值得下载的 Figma 的 AI 插件:

在了解所有优势特性之后,现在是时候介绍一些 Figma 的插件了,这些插件可以在 2025 年为用户体验设计师带来诸多好处(包括:节省大量设计时间)。

1、Random Name Generator :一个可以随意生成名称的插件。目前大约有 5 万 9 千名用户在使用该插件。

2、Rendition AI: 我们可以创建应用设计并获取该设计的 Tailwind 代码。目前大约有 3 万名用户在使用该插件。

3、MagiCopy – AI 文本生成器-可以帮助我们获得特定风格的标签、图标等内容。目前大约有 1 万 8 千名用户在使用该插件。

4、Ando-设计师 AI 助手-可以帮助我们从提示、形状和图像中生成数百万个设计创意。目前大约有 7万1千名用户在使用该插件。

5、VisualEyes-可以基于历史数据模拟用户测试行为,并找出潜在的可用性问题。目前大约有 3 万用户在使用该插件。

6、Astrid Text Generator – 可以帮助我们优化文案。我们只需点击几下即可获得个性化的写作反馈建议。目前大约有 2 万 6 千名用户在使用该插件。

7、Magician – 可以将繁琐且耗时的任务自动化,让用户能够将精力集中在工作中更具创造性的方面。目前大约有 16 万 3 千名用户在使用该插件。

结论

虽然人工智能(AI)是一种强大的工具,但是,根据我一段时间的观察和使用,目前的人工智能还并不能取代设计师的创造力。而是,作为一位强有力的战友,增强了设计师的多项能力,并促进了设计交付的稳定性。

不得不承认,在设计领域,AI 技术提升设计能力尤为突出,能够辅助设计师高效地创造积极的成果。

除设计之外,如果我们能够善加运用人工智能,其潜力无可限量,能够打破职业的边界,助力设计师扩展到多个行业领域。我相信,以这种方式利用人工智能,必定将在各种应用中带来显著的优势。

加油,设计师们!带着好奇去探索这个人工智能时代吧!

 

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

日历

链接

个人资料

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

存档