GUI图形用户界面设计在现实操作设备中经常会遇到,比如将文档移动到桌面上的“回收站”中,单击图标以启动应用程序,又或是将文件从一个文件夹移动到另一个文件夹。简而言之,GUI图形用户界面可帮助用户在设备、平台、程序或应用程序中执行操作,而无需在这过程中键入命令或了解操作背后的编码,本篇将带你了解GUI图形用户界面的基本知识。

1. GUI图形用户界面设计原则

1.1 简单易操作

任何对GUI图形用户界面设计本身的关注都会干扰用户的主要任务——在尽可能短的时间内实现操作目标。这就是为什么必须删除所有不必要的元素并润色现有元素以获得最大简单清晰度的原因。

建议:

  • 你可以通过删除所有不必要的细节来减少屏幕拥挤,只保留对用户任务最重要的元素。

  • 让用户更容易发现重要的元素或动作。即设计需要突出重要功能,隐藏不常用功能。

1.2 美学可用性效应

良好的美学设计可以提高用户对GUI图形用户界面的感知,因此创建让用户满意的设计非常重要。

1.3 一致性

设计视觉和功能的一致性至关重要,你可以通过一些设计软件来解决这个问题。比如Pixso,拥有丰富的组件和设计模板供你选择,同时还有企业资源库,所有团队成员可同时开展创作,帮助你达到设计的一致性。

1.4 用户熟悉度

谈到GUI图形用户界面设计,产生让用户感到熟悉的体验是重中之重。具体的我们通过以下两点来说明。

  • 使用单个元素的启示来帮助用户理解它们的含义。可供性是对象的视觉属性,向用户展示他们可以采取的行动。

  • 遵循常理或约定。当设计师打破常规时,他们会让用户更难与产品交互。

Pixso社区资源插画

1.5 产品消化率

在设计GUI图形用户界面时,应努力让UI易于理解。我们尽量不要用太多信息使其过载,同时要优化内容和功能元素,实现快速扫描。

建议:

  • 确保所有文本清晰易读。信息应该让用户易于扫描和阅读。

  • 创建适当的元素视觉层次结构。页面上元素的排列和对齐应该引导用户首先、其次等步骤。

  • 优化内容和功能元素以实现快速视觉扫描。最常见的扫描模式是F 形和Z 形。

1.6 效率

使用GUI图形用户界面预测用户的需求将帮助他们更快、更轻松地实现目标。

  • 练习预期设计。预测任务的自然进程,并在用户需要时准确地提供相关信息和操作。

  • 通过将屏幕元素分组对齐,最大限度地减少眼球运动。

  • 最小化交互成本。菲茨定律指出,用户将指针移动到目标所需的时间是到目标的距离除以目标大小的函数。将控件放置在用户想要控制的对象附近。

1.7 响应和控制

良好的响应和控制有助于在人机对话中保持不错的节奏。系统应该始终传达正在发生的事情,这样可以帮助用户保持控制感。

  • 提供良好的性能。用户希望快速执行操作,不产生延迟。

  • 让用户控制交互。允许用户中断或终止操作,并允许支持“撤消”操作。

  • 提供适当的反馈。你设计的系统应该通过相关反馈快速响应用户的请求。反馈帮助用户了解系统收到了他们的命令。如果没有反馈,用户可能会多次进行相同的操作。

1.8 可访问性

让所有类型的用户(包括残障人士)都能访问GUI图形用户界面也很重要。对于无障碍 HCI 设计,你需要考虑视觉、听觉和移动性问题。

2. GUI图形用户界面如何设计

Pixso社区资源插画

2.1 收集需求

优秀的图形用户界面设计务必需要先深入了解用户的需求,将这些信息转化为功能需求。在这一步结束时,设计师需要能够回答以下问题:

  • 用户希望系统能做什么?

  • 产品应该支持哪些功能?

  • 产品将如何融入用户的日常活动?

  • 用户将在哪里与系统交互?

2.2 设计信息架构

对用户来说,与图形用户界面设计的交互应该是轻松简单的,这意味着功能和内容要与用户需求保持一致。这里介绍一种可行方法:通过创建页面层次结构来帮助用户轻松找到信息。

例如,当用户启动文档编辑应用程序时,他们希望在顶级菜单中找到所有编辑选项。如果隐藏或更改关键控件的位置,用户很难与产品实现交互,用户体验感便不太好了。

2.3 制作原型

图形用户界面设计是一个迭代过程,根据图形用户界面设计的阶段,原型设计可以是任何东西,从低保真线框到看起来几乎像成品一样的高保真原型。关于原型的具体制作方法与技巧,在Pixso设计技巧栏目中有非常多的设计师文章可以为你提供帮助,比如《产品体验不好?可能是原型设计出bug了!》,感兴趣的话可以进一步阅读相关内容。

2.4 进行测试

我们很难第一次尝试就创建一个完美的图形用户界面设计方案。找目标用户进行测试,将帮助你了解你的图形用户界面设计方案还有哪些需要改进的地方。优秀的设计团队遵循构建-测量-学习,直到他们创建了一个对用户来说足够好的图形用户界面设计方案。

3. 推荐使用新一代协同设计工具Pixso

Pixso认为,良好的GUI图形用户界面设计,可以用更加美观又不单调的形式向用户传达其操作导致的界面状态变化,在带来良好视觉体验的同时,也开启了简洁高效的工作。通过阅读上文内容,相信你心中对于GUI图形用户界面设计已经产生了初步的了解与想法。如果你想要高效GUI图形用户界面设计,必然少不了设计工具的鼎力相助。这里为大家推荐一位得力干将——Pixso。Pixso是国产团队的一款设计协作工具,支持多人同时在线协作工作,同时操作简单易上手,设计小白也能掌握。

Pixso官网

  • 轻松绘制原型,开启高效工作

Pixo社区提供了丰富的设计资源、原型模板供你免费利用。为你免去了大量不必要的时间浪费,开启敏捷高效工作。

  • 绘制高保真原型,带来更佳用户交互

Pixso支持交互事件演示,提供丰富的转场动画,以及即时、溶解、智能动画、推动、滑入、滑出等多种渐入渐出动效,帮助设计师轻松构建出色的用户体验交互。

  • 团队共同协作,内容在线共享

Pixso提供企业协作资源库,面对一个复杂的多成员设计项目,可以通过链接邀请团队成员,进行多人云端协作设计,团队成员还在设计稿内在线评论,更高效地完成意见反馈收集,实现需求调研。