网页设计与图形用户HMI界面设计有何区别?

首先,从技术角度分析两者的包含关系。

GUI(图形用户HMI界面是计算机出现后用于帮助用户与机器交互的工具。

图形用户HMI界面(GUI,简称GUI)是计算机操作的图形化用户HMI界面。与早期计算机使用的命令行HMI界面相比,图形HMI界面更易于用户接受。然而,此类HMI界面需要更多的计算能力,以通过在屏幕特定位置显示多种美观、非单调的视觉信息,来“提醒用户”状态变化,而这比简单的信息展示所需的计算能力要高。

What-is-the-difference-between-web-design-and-GUI-design (1)

图形用户HMI界面(GUI)是一种人机交互显示格式,允许用户通过输入设备(如鼠标)操作屏幕上的图标或菜单选项,以选择命令、调用文件、启动程序或执行其他日常任务。与通过键盘输入文本或字符命令来执行常规任务的字符HMI界面相比,图形用户HMI界面具有诸多优势。图形用户HMI界面通过窗口、下拉菜单、对话框及相应的控制机制,在各类新应用中实现了标准化,即相同操作始终以相同方式呈现。在图形用户HMI界面中,用户所见及操作均为图形对象,这体现了计算机图形学技术的应用。

随着中国信息技术产业、移动通信产业和家用电器产业的快速发展,产品人机交互HMI界面设计水平日益落后,这无疑对提升行业综合质量和增强与国际同行的竞争力起到了制约作用。

图形用户HMI界面的广泛应用是计算机发展的一大成就。它极大地方便了非专业用户的操作。人们无需记忆大量命令,即可通过窗口、菜单、按键等方式轻松操作。嵌入式图形用户HMI界面需满足以下基本要求:轻量级、占用资源少、性能高、可靠性高、易移植、可配置等。

UI=用户HMI界面指软件中人机交互的整体设计、操作逻辑及美观HMI界面。UI设计分为实体UI与虚拟UI,互联网领域所称UI设计即虚拟UI,UI是User Interface(用户HMI界面)的缩写。优秀的UI设计不仅能使软件个性化、美观化,更能让软件操作舒适、简便、自由,并充分体现软件的定位与特性。

因此,UI设计师的主要职责通常包括三个方面:一是图形设计,即软件产品的“外观”设计。二是交互设计,主要涉及软件操作流程、树结构、操作规范等设计。软件产品在编码前需要完成交互设计,并建立交互模型和交互规范。三是用户测试/研究。此处的“测试”旨在验证交互设计的合理性和图形设计的审美性,主要通过向目标用户发放问卷调查的形式,衡量UI设计的合理性。

What-is-the-difference-between-web-design-and-GUI-design (1)

研究HMI界面图形UI设计师

中国大多数UI从业者从事此类工作,他们是了解软件产品并致力于提升软件用户体验的产品外观设计师。

人与HMI界面交互设计师

在图形HMI界面发明之前,UI设计师长期担任交互设计师。交互设计师的职责是设计软件操作流程、树结构、软件结构及操作规范(SPEC)等。软件产品在编码前需要完成的交互设计,即建立交互模型和交互规范。

研究员:用户体验工程师

任何产品都需要进行质量测试,软件代码需要测试,自然的UI设计也需要测试。这种测试与编码无关,主要测试交互设计的合理性和图形设计的审美性。测试方法通常是使用焦点小组,以目标用户问卷的形式来衡量UI设计的合理性。

总结:UI设计包含GUI。

What-is-the-difference-between-web-design-and-GUI-design (1)

若查看UI设计师的能力模型,应具备四个能力维度:

1. 沟通与文档编写能力

如果UI是人机交互的桥梁与纽带,那么UI设计师就是连接软件开发者与终端用户交互时间的桥梁与纽带。如果UI设计师缺乏良好的沟通与理解能力,无法撰写出优秀的指导原则和规范,就无法体现开发者与客户的双重价值,也无法胜任本职工作。

2. 卓越的技术能力

你可能不会编写Java代码,但你必须清楚Java是什么以及它能做什么。即使你不会编写代码,你也应该知道如何“实现”它。例如,如果你想创建一个网格控件,首先你应该知道有哪些数据格式可用以及它们如何存储。你可以从HTML标记、JSON对象、数组、XML甚至字符串中获取数据。其次,你需要知道在当前环境下,在服务器端还是客户端实现更合适。所有这些都依赖于强大的技术能力和丰富的经验。不了解技术的UI设计师无法做出合理的設計,也无法与开发人员有效沟通。简而言之,UI设计师至少应精通主流的展示层开发技术(若从事网页展示层开发,通常需精通HTML、CSS、JavaScript、XML技术,甚至JSP、Java以达到工作层要求),并具备对主流设计模式、技术路线及市场主流开源框架的足够理解。可以说,UI设计师在技术能力上应努力成为一名尽可能优秀的展示架构师。

3. 图形设计能力与原型开发

图形设计与原型开发可能是UI设计师工作中最重要的部分,因此我们先来谈谈什么是原型开发。原型设计是迭代开发设计阶段的常见方法。原型设计应贯穿需求分析、方案设计和详细设计三个阶段。其目的是将设计转化为用户可理解的“HMI界面语言”,同时指导开发人员(甚至成为开发过程的一部分)。用户HMI界面原型设计的价值在于,它能帮助软件设计师在设计各阶段提前发现缺陷,解决潜在问题,从而显著降低软件开发风险和成本。这与传统的瀑布式开发模式本质上不同。目前,国内大多数企业仍采用瀑布式开发模式,将UI设计置于开发后期。这种做法不仅导致UI设计师无法充分发挥其优势,还导致产品存在致命缺陷,无法满足客户需求。因此,企业中的“艺术家”并非UI设计师职业本身,而是过时且不完善的软件开发方法的产物。事实上,UI设计师只是一个通用术语。在UI设计行业中,存在多种角色:可用性与交互设计师、视觉规划师、用户体验研究员、图形用户HMI界面设计师等。UI设计师即GUI设计师,其核心职责是视觉布局与创作。若UI设计师缺乏扎实的图形设计能力,便无法表达对美的构想,也无法实现“沟通”。图形设计技能是每位UI设计师入门时必须具备的基本技能,也是衡量UI设计师水平的最佳标准。

4. 人因理论与认知心理学

这是一个宏大的概念,但每位UI设计师都应在职业生涯中不断探索。可以说,设计的本质是“人”,以人为本的HMI界面自然需要对人和行为的理解。例如,你不能在同一屏幕的不同位置同时显示两个重要信息——因为人类一次只能专注于一件事,这是生物学决定的,而非个人判断。再举一个例子,为什么每次Windows更新后,你会发现它与之前版本有相似之处?这可能被视为微软的设计风格。不,这不是风格,这是习惯。曾经是微软的习惯。现在你使用Windows,所以你养成了这个习惯。苹果和微软的操作系统哪个更好?答案是,你喜欢哪个就用哪个。是的,这是一个多么简单的真理——喜欢就是习惯,你怎么能确定你认为的“正确”设计正是人们喜欢的?仅以ExtJS为例,Ext风格,简而言之,就是传统的桌面交互风格(WMIP)。什么是Web风格?如果我必须说,我更喜欢Web是一个开放的杂志,是设计师展示才华的热土。为什么这么说?因为Web的不确定性和开放性。WebUI设计,根据我的经验,是软件UI设计中最困难、最受限制(且往往充满不确定性)的领域之一。一个优秀的WebUI设计师即使转行到桌面UI设计或移动设备HMI界面设计,也能相对成功。因此,作为WebUI设计师,他因习惯或个人偏好而拒绝桌面UI风格是可以理解的。

What-is-the-difference-between-web-design-and-GUI-design (1)

扩展信息

UI设计师要求:

  1. 负责公司产品在智能电视、PC及移动终端上的页面/应用程序的整体设计;
  2. 基于用户体验、人机交互、图形设计、HMI界面设计等前沿理论实现产品风格设计;
  3. 充分理解产品规划的理念和概念,与产品经理及研发人员协作,实现各类产品HMI界面的视觉设计;
  4. 建立并完善产品HMI界面视觉设计规范;
  5. 根据交互设计和产品规划,完成与产品相关的用户HMI界面视觉设计(包括iPhone、Android、Web平台APP及网站);
  6. 在产品开发过程中与图形HMI界面(GUI)设计团队协作。
  7. 完成产品相关推广活动主题页面及FLASH的设计与制作;
  8. 与研发团队充分沟通协作,确认可控错误范围并确保视觉效果最终实现;
  9. 根据视觉设计发展趋势及用户研究结果,持续优化产品图形HMI界面(GUI)。

    滚动至顶部