当前位置:首页 > 新闻资讯 > 技术动向

解决方案 | 精讲人机交互界面优化设计原则及理念

发布者:恒歌科技    时间:2022-03-17 09:11:42


人机交互界面是人与设备沟通的窗口,操作上友好易用是基本,视觉上美观舒适是升华,工作重心是软件功能的实现。而现实是即使有心建设良好的操作界面,也因缺乏设计的专业知识和疲于应对复杂的功能逻辑而心有余力不足。

想要改变由开发人员个性决定界面风格的时代,需要融入一些设计元素进去,用设计+开发的分工模式,由专业的设计人员根据软件需求、用户习惯、应用场景等因素绘制软件界面效果图,得到用户认可后,再由开发人员根据效果图开发软件。

恒歌科技在界面开发与设计中一直遵循着以用户体验为核心的设计原则,风格迥异的界面设计灵活把控,我们将通过多个案例展示,深度解析界面设计的核心理念及原则



     案例展示


① 信息展示软件界面

1副本.jpg
2.jpg
3.png


② 浅色/深色扁平风格

4.jpg
5.png


③ 监控系统

6.jpg
7副本.png


④ 仿真场景

8.jpg
9.jpg



下面我们将深度解析恒歌科技在人机交互界面设计的核心--设计原则与设计理念。


    01 UI设计



1 | 设计目标

Design goals


① 功能目标

▪ 梳理软件业务模块的功能逻辑,以用户目标为导向归纳分析并重新划分各个功能模块及其子功能模块;

分析用户角色,提炼用户行为,并结合业务需求以用户的角度合理设计界面各要素的呈现信息和交互方式;

▪ 紧密结合业务需求,合理设计界面各要素的呈现、交互以及反馈方式,输出页面交互说明。

② 视觉目标

根据用户需求、喜好、使用场景、品牌调性等定制化设计相应视觉风格。

③ 体验目标

交互上简单易用,降低用户的认知和操作成本,提升工作效率与体验。



2 | 设计理念

Design concept


① 视觉感知

视觉是用户获取信息的首要方式,设计中遵循人的心理认知和自然规律对视觉元素(色彩、图形、信息表达方式)进行呈现,能够有效降低用户的认知成本。

色彩:颜色是用户能够首先感知到的视觉内容,设计中首先对颜色进行定义和分类,以适用不同的使用场景,使用户准确的感知信息,同时结合人对色彩情绪的认知和色彩的自然变化规律建立整个色彩体系。

图形化:图形的信息承载量大于文字信息,设计中选取用户已经有一般认知的页面信息,在表现形式上将其转换成清晰易读的图形,使用户快速获取信息,同时也可丰富视觉效果。

▪ 可视化:对数据用合理的视觉元素进行创新组合,让数据表达更符合用户心理,使用户最快的获取更多信息。

② 交互流畅

在与系统的互动中,首先分析用户、操作环节、任务目标间的关系,明确工作目标,让每个交互行为都围绕主目标达成,同时为每个行为,辅以恰当、即时的反馈,引导用户完成操作流程,让人机交互行为更自然。

③ 理性克制

将页面元素进行归纳整理,以最简的设计展现内容,在界面元素已经表达出预期效果后,对不必要的元素理性使用,不分散用户注意力,让用户专注于目标达成,而非界面本身。

④ 以用户为中心

从页面的布局到组件的位置和形式,都基于用户的习惯和认知进行设计,消除用户的陌生感,同时在圆角、排版等细节上进行情感化设计,缓解用户情绪,拉近人机距离。


3 | 设计原则

Design principles

基于设计理念衍生出的一般设计标准,通过具体的设计技巧将设计理念体现在界面中。帮助用户建立对界面的基本认知,主要采用以下设计原则:

① 易识别性

让页面中的元素建立一种有组织的层次结构,或能够符合用户的认知特性,让用户轻松辨识,降低认知成本,主要采用以下设计方法:

 对齐(连通性):统一视觉起点,引导用户的视觉流向,使用户潜意识认为对齐元素间具有关联性。

 对比(层级性):通过主次关系对比,强化或弱化视觉元素,增强视觉效果,同时也能在不同元素之间建立一种有组织的层次结构,让用户快速识别关键信息。

 重复(相似性):相同的元素或采用相同形式组合的元素集合,在整个界面中不断重复,使用户能够识别这些元素具有同样的功能与层级,有效降低用户的学习成本。

 关联度(邻近性):如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。关联度的根本目的是实现组织性,让用户对页面结构和信息层次一目了然。

② 易用性

易用性是指产品对用户来说意味着易于学习和使用、减轻记忆负担、使用的流畅性等。

 表意准确:对页面信息的表述应用词准确,达到望文知义,不使用模棱两可的文字。

 简化交互:尽量简洁的设计用户操作,同样也尽可能减少界面的层级,使用户最快的完成交互路径。

 人性化:在部分常规的交互上应该符合实际用户群体的使用习惯,使用户在操作时不会感到突兀。

 状态可见(信息反馈):在必要时向用户反馈操作结果或传达消息;在页面异常或数据为空等情况下,使用空白页解释页面的异常状态,减少用户的困惑;同时用户在交互过程中的点击,悬停等行为,对应的组件应展示不同的状态,对用户进行反馈。

 过渡自然:界面的交互都是关联的,所以要认真地考虑到下一步的交互是怎样的,并且通过设计将其实现。当用户已经完成该做的步骤,应提供自然而然继续下去的方法,以达成目的。

③ 一致性

一致性的目的是使用户能够熟悉设计的流程和模式,使用户快速适应整体设计,提高用户对界面的信任感,也能够提高协作效率,一般从以下三点确保一致性:

 目标一致:各个组件与系统要有一个统一的设计目标,使用户使用起来能够建立起精确的心理模型,能够通过一个页面推导出另一个页面的操作。

 交互一致:在设计中的页面跳转逻辑和操作模式都需要保持统一;同一种类的行为被触发之后,要有一致的反馈。

 视觉一致:设计风格、色彩、图标、间距和布局都应该采用统一的标准。

④ 美观性

界面设计中的美观多数情况下指各个视觉单元的有序呈现,达到视觉效果的统一、协调和区分明确的目的。

 色彩协调:注重整体色调的把控,在此基础上添加辅助色,颜色搭配不应过于杂乱;提示色需要明确醒目,同时需要考虑系统的使用环境进行明度和纯度的调整。

 风格贴合:视觉风格应贴合业务,视觉元素围绕整体风格设计。

 图形表达:当页面元素单一时,对部分元素进行图形化处理,丰富页面效果。

⑤ 安全性

FreeX 产品微信公众号

恒歌科技微信公众号

恒歌科技视频号