首页

创新车载HMI设计:提升驾驶安全与体验的UI设计深度解析

蓝蓝小助手 系统UI设计文章及欣赏

创新车载HMI设计是提升驾驶安全与体验的关键。通过智能仪表盘设计、触控与语音交互优化、个性化与定制化、智能互联与云服务以及情感化设计与反馈等策略,可以实现更加安全、便捷、个性化的驾驶体验。然而,设计过程中也面临着技术挑战、用户体验平衡以及个性化与标准化等难题。未来,随着技术的不断进步和用户体验的不断提升,创新车载HMI设计将为智能汽车的发展注入新的活力。

创新车载HMI设计:提升驾驶安全与体验

蓝蓝小助手 系统UI设计文章及欣赏

随着汽车行业的智能化发展,车载HMI系统已经成为现代汽车不可或缺的一部分。一个优秀的HMI设计不仅能够提供丰富的娱乐和信息功能,更能够显著提升驾驶安全和用户体验。本方案旨在通过创新的车载HMI设计,实现驾驶安全与体验的双重提升。

可视化数据图表——清晰展现关键信息,助力高效决策

蓝蓝小助手 系统UI设计文章及欣赏

合理使用数据图表可以帮助用户更好地理解复杂的数据,提高用户体验和数据的可读性。选择合适的图表类型并遵循最佳设计实践是确保图表有效传达信息的关键。
数据图表是一种非常重要的可视化工具,它能够帮助用户更直观地理解和分析数据。借助于图形化的手段,清晰、快捷有效的传达与沟通信息。从用户的角度,数据可视化可以让用户快速抓住要点信息,让关键的数据点从人类的眼睛快速通往心灵深处。数据可视化一般会具备以下几个特点:准确性、创新性、简洁性

Web端设计语言库——数据可视化

蓝蓝小助手 系统UI设计文章及欣赏

可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。优秀的数据可视化界面,会有一套非常严谨一致的版面。这里的一致性需要考虑到布局、结构和内容。

掌握UI设计:从小按钮看大智慧

蓝蓝小助手 系统UI设计文章及欣赏

按钮设计是UI设计中一个既基础又重要的环节。通过明确功能与目的、保持视觉风格一致、合理安排尺寸与布局、提供及时有效的交互反馈以及考虑无障碍设计等因素,我们可以设计出既美观又实用的按钮,为用户带来更加流畅和愉悦的操作体验。

游戏UI-核心设计思路

蓝蓝小助手 系统UI设计文章及欣赏

什么是UI?

 

UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。

放在游戏行业里,就是游戏的人机交互、操作逻辑、界面设计。

 

我们把这三点铺开来讲:

 

首先是人机交互

它可能是扭转战局的技能释放:按下技能,释放技能,获得团战胜利。

它可能是某个让你肾上腺素飙升的抽奖画面:哇哦,金色传说!

通过你的操作,计算机给予你的响应,交互充满在游戏的各个层面。

 

其次是操作逻辑

它是硬件、软件的底层逻辑。

它是游戏的底层逻辑:你的游戏用什么引擎开发?它是什么游戏类型?

它是人类的基本操作逻辑:你是左撇子还是视觉障碍人士?

 

最后是界面美观

为什么把它放在最后,因为我认为在UI制作流程里,界面美观一定是放在开发的最末尾!

界面美观的通常要求,不外乎几点:层次清晰、风格适配、视觉吸睛。

 

 

 

以上是游戏UI的一些常识,你理解了上述逻辑后,下面我们开始具体的制作流程。

 

游戏不只是单个环节,而是一套整体的工业流程,因此UI只是游戏中的一环,这里我不列举一些包含策划工作,例如:系统功能策划、世界观策划等;美术也会有美术概念设计的内容,整体内容我尽量限制于UI。

 

游戏UI制作流程我整理为4个步骤:关键界面框架-关键界面UX-关键界面风格产出-全界面真图。

 

 

 

一、设计关键界面框架

 

首先游戏立项后,作为UI设计师,要根据游戏类型设计原型初稿。

 

举个例子,一款开放世界动作游戏,策划给到功能文档,美术给定游戏风格图,那ui就可以开始第一步的关键界面框架设计。

关键界面是游戏主界面和重要一级跳转页(通常为属性、装备、背包、地图、设置)。

 

 

首先是主界面:一款动作类型游戏,核心玩法为动作战斗,需要玩家长时间停留在这个界面进行游玩,因此战斗界面即为游戏的主界面。

 

例如游戏的操作系统为手机,因此我们设计符合手机规范的操作逻辑;

例如针对手机不同的尺寸定义不同的以1334x750或2560x1480的的尺寸规范;

 

 

例如按照调查显示大拇指的最佳移动范围去做框架设计图,用的左移动、右攻击的方案定位基础操作位置,符合人体工程学。

 

我们按照策划功能设定条条列出需要的内容快速摆放。

动作控件:移动、技能、攻击。

人物属性:头像、名字、等级、血条、经验条、buff。

怪物:血条、怒气条、buff。

地图:小地图、人物位置、人物朝向、地图朝向、地理图。

任务目标:任务标题、文本、数量,指针。

 

这些内容需要去定义优先级,分布排开。

 

 

然后完成一级跳转页的功能模块,即属性、装备、背包、地图、设置的功能位置。

 

 

按照上述内容设计关键界面框架,完成游戏基本的功能逻辑。

 

 

 

 

二、设计关键界面UX(交互图)

 

关键界面UX一般是指关键界面框架的导向图、控件的交互反馈图。

我们的关键UX设计会依据五个准则:示能,意符,映射,反馈,概念模型。(交互/设计心理学基础)

 

下面我用一张图让你快速get到5个准则是什么意思。

 

图片来自网络

 

 

示能:是指一个物理对象与人之间的关系。例如做成按钮就是想让人明白可以点击。

 

意符:是表达提示。例如“go”文字提示你按钮的功能,我理解他是需要跳转。

 

映射:表示多组要素之间的关系。例如画面中出现的正方形图标回归类为可获得道具。

 

反馈:你执行了命令,就应该给你反馈。例如你点击了“go按钮“这个行为,会有一个按下状态然后跳转至活动界面这样的结果。

 

概念模型:快速告知产品的模型。例如你已经理解了这个活动的模型:签到获取道具!

 

但在实际制作过程中界面的复杂程度远比想象的要困难许多,还需要其他设计准则作为补充。

比如我们可以引入《尼尔森十大设计原则》、《交互设计的7大定律》,有兴趣可以搜索。

理论知识作为重要的逻辑参考,也是最终从结果反推过程的验证,越加复杂的系统会通过理论的取舍达到体验最优解。

 

根据5个准则,制作出我们的关键UX界面图:

 

有了清晰的关键界面框架和关键界面UX图,下一步我们开始关键界面的包装。

 

在这里我要做个小提醒。

一般在实际工作中,我们会需要各部门对效果图。就是拿我们制作的图和制作人、策划、程序、美术共同考虑每个部分的优先级、实现功能的可行性、核心玩法的方向性、动效镜头配合逻辑、界面美术的包装方向等等一系列未来会出问题去做预设,这就需要大量的经验(犯的错越多越好)。

策划考虑玩法是否有意思,UI考虑这个玩法体验的更舒服,拼接考虑资源如何处理、美术考虑怎么包装更牛逼,程序考虑怎么实现玩法更合理,我们需要共同去解决优先级最高的问题。

 

说人话就是开会,开会,开会,开不完的会。但是这一步也是必不可少的,为后续工作避坑。

 

 

 

 

 

三、关键界面风格产出

 

 

1.理论依据

 

界面风格的寻找有很多种方法,比如从游戏体验模型、产品定位、受众群体等方面找灵感。

主要作用是为了去寻找到能够支撑我们设计方向的理论依据,稍后我会着重讲解游戏体验模型(Game Experience Model)的设计方案。

 

举个着重于游戏的主色调方案的例子,主色调方向并非完全根据原画图来作为参考,更重要的是考虑游戏模型、游戏定位、受众群体等去定位游戏的主色调。

 

例如提到科幻游戏类型,大部分的科幻类的主色调会偏向蓝色,这是因为宇宙星空对于视觉效果的映射,主基调会是蓝色,而色相范围会根据受众群体的不同做出调整:硬核玩家的蓝色,受众是年轻人的蓝色偏向感知上会明显不同,这里会用到色彩心理的知识内容。

 

 

 

 

2.快速风格稿

 

回到我们的主界面,我们开始用颜色填充我们的UI层。

 

 

假设我通过以上理论依据完成了我的设计方向,那我在原有的交互功能稿上快速出草稿方案,为进一步的细化做铺垫。

 

这个过程我会建议大家使用色块法来制作,用色块法的原因是这个阶段只是需要看整体效果,不会去关注过多的细节,做的越细对设计师来讲只会越发限制你的发挥。用大色块去覆盖,我们看成套的小图能更快速的发现界面上的问题。 然后处理好黑白灰的关系和文字的排版,以最快速度出效果为目的。

文字的排版我会用到四个原则:亲密性、对齐、重复、对比;

黑白灰关系的原则:素描中主要运用黑白灰来表达物体的质感、量感、层次感;我们通过黑白灰关系确定层次。

 

 

以上,基本上完成了我们的关键界面假图。接下来就是细化假图,让原来的色块看起来更加工整舒适,满足基本可以使用的程度即可。

 

涉及到如此多的知识内容还能坚持住吗,接下来更是重量级的内容。

 

 

3.贴合游戏体验模型

 

我们完成了一套基础UI设计,但是莫得灵魂,没有灵魂的UI即使套用在不同游戏上也不会奇怪。

那么UI的灵魂是什么?或者说游戏美术的灵魂是什么?

 

是属于我们这个游戏独有的世界观和游戏机制。

 

这个阶段我要把界面去贴合游戏世界观,UI的风格走向、细节提炼、风格产出都来源于这一步。 这需要很多人共同去思考、脑暴、寻找、构建在这套世界观下合理的美术表现。

 

例如《王者荣耀》最开始的UI是没有调性和方向的,后来他们通过设计世界观、游戏机制的探索找到了他们的方向,智械飞升新国风(我的定义)

 

 

新版和旧版对比

 

 

这个方法我需要运用到游戏体验模型(Game Experience Model)的知识。

 

 

游戏体验模型(Game Experience Model)

 

 

游戏体验的六个要素以及它们之间的关系:

 

机制 - 行为:机制包括游戏中可能发生的所有动作和所有游戏对象 - 由游戏规则定义的所有内容。动作是机制在每种情况下的运作方式。

 

美学-感官刺激:美学包括旨在唤起玩家情绪的所有感官和认知设计。呈现给玩家的美感称为感官刺激。

 

•故事世界-叙事:故事世界为游戏提供了实质性的内容。那些没有的世界,是因为它们没有被放入游戏中,只是由游戏设计者想象出来的,或者由于所包含的情况而在逻辑上变得必要或可能。 叙述是游戏过程中发生的故事世界中的故事片段。

 

 

故事世界通常是游戏设计师设想的一个无限的宇宙。 叙事是玩家在游戏中体验的故事世界的片段,他们以情节、文字描述、动作场景、声音、艺术等形式对这个宇宙的一部分进行了美学再现,并在游戏过程中作为故事世界中的叙述呈现给玩家。

 

如果能理解故事叙事,那就能推导美学的艺术形式;游戏的机制所表现的玩家行为,能够起到限制/提高美学的效果;优秀的故事会回馈给设计者如何制作核心体验设计;以此达到三者能够互推的良性循环。

 

 

我们回过头来看王者这张图,游戏机制为moba(多人在线战术竞技游戏),世界观是智械飞升新国风

以游戏机制(MOBA)推导出美术形式,体现在游戏的美术设计上,如游戏logo,UI的对立设计,平衡设计。

 

通过独属于他的国风世界观推导出的艺术表现形式,表达在最重要的皮肤表现,游戏的UI上如纹理、圆角处理和色彩走向、古风表现。

 

而独属于智械飞升的设计,从logo的机关小细节、匹配界面的纹理图所表达。

 

 

 

不同的游戏对于游戏体验模型的使用范围不同,例如《超级马里奥》,交互与游戏机制结合。

 

 

而《刺客信条》的UI与故事结合得更加紧密。

 

提到纹理细节表达,例如《刺客信条英灵殿》中的UI细节,会遵循故事背景,本作背景设定在维京时代,因此从时代背景推敲出来许多的纹理:包含符合时代的凯尔特纹、维京纹和海盗纹。

 

这个内容铺开来讲又是一个复杂的内容,有机会可以细聊。推荐去看一些关于纹理设计的书籍。

 

 

当然,把游戏体验模型玩出花,这当然不是一件轻松的工作。

 

 

回到我们的页面,把我们的关键界面按照这个方式去贴合游戏独有的世界观,做出这样的方案。

 

 

或者是这样的

 

 

 

 

四、全界面真图

 

我们完成关键界面设计以后,再一次通过开会、修改、分析、结果收集等进行合理判断。在此基础上确定最终的UI风格。

之后就是建立规范,再去延展设计,最后全方位落地。如何建立规范,完成一套规范,建立控件库、建立组件库、建立素材库、设计手册(不细说)。

 

 

管线思维导图

 

在规范下,开始内容延展:不同UI不同分工,划分不同功能管线,管理者需要把控每一条管线的执行和推进,以此完成我们长线开发的全界面真图(即一个游戏的所有界面)。

 

完成UI后,交付给动效、特效、程序,然后恭喜你,完成了游戏设计的UI部分。

 

 

写在最后

 

通过完成后的游戏成品,作为游戏UI仍要把控后续每一个界面传达的实际效果,是否达到预期;每一个动效反馈、每一个抽奖动画、打击感的震动,排版的舒适性等细节,都需要反复打磨达到让玩家最为舒服的水准。

 

毕竟,同一个动作不同的细节表达,最终的玩家的体验会完全不同。

 

镜头语言也非常重要,电影游戏画的视觉震撼和共鸣,能结合实际制作中,达到类似的效果。

 

例如《蜘蛛侠迈尔斯》各种QTE的镜头动作呈现,电影感拉满。

 



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

image.png

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

image.png

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

按钮的基础应用规范

蓝蓝小助手 系统UI设计文章及欣赏

我们常用的基础按钮主要就分为、次要按钮、主要按钮、文字按钮、图标按钮、在按钮中添加图标、这几种按钮形式。在各大场规范里面,对按钮的分类出发的维度不一样,所以对按钮的类型划分也都不太一样。但无论他们怎么分类,这样我们结合使用场景去用就不会有什么问题。

基于手机APP界面设计中的色彩应用研究

蓝蓝小助手 系统UI设计文章及欣赏

随着智能手机的高度化普及,手机App已经脱离了单一的信息传递的阶段,用户对App的视觉要求越来越高。色彩在App界面设计中非常重要,对App界面设计色彩进行充分的研究,把握其色彩运用规律对App界面设计色彩的发展有着深刻的理论和实际意义。本文章总结国内外UI设计行业的发展现状和趋势,使读者对该行业有一个宏观的了解。从色彩设计的基础理论、色彩在App界面设计中的应用等方面入手。在研究了几十款国内外的成功App案例,对色彩在App界面设计中的应用和色彩感情进行分析。从而提出色彩在App界面设计中的应用方法,希望给设计师用色方向提供一些理论参考。最后笔者运用发展的眼光,对国内App界面的发展做了简单的总结和期望。

暗色模式在UI设计中的优势与应用

蓝蓝小助手 系统UI设计文章及欣赏

随着用户对界面设计要求的提高,暗色模式以其减少视觉疲劳和增强内容可读性的优势,在UI设计中越来越受欢迎。它不仅为用户带来了全新的视觉体验,也为设计师提供了创新的空间。
    未来,暗色模式有望成为更多应用和系统的标准配置,设计师们将更加重视其创新和优化,以提供更优质的用户体验。我们应紧跟这一趋势,探索新的色彩搭配和布局,满足用户的需求和偏好。
    总之,暗色模式在UI设计中的应用和优势已经得到了广泛的认可。作为设计师,我们应该把握这一趋势,不断提升自己的设计能力,为用户创造更加美好的数字生活。

做好UI的卡片设计,这几步就够啦!

蓝蓝小助手 系统UI设计文章及欣赏

将现实中习以为常的物品转化为卡片,通过不断的优化和改进,保持良好的显示效果和可用性,能更好地和用户产生共情。

日历

链接

个人资料

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

存档