人机交互学习-6 交互式系统的设计

news2025/2/21 23:45:12

交互式系统的设计

  • 设计框架
    • 定义外形因素和输入方法
    • 定义功能和数据元素
    • 决定功能组合层次
    • 勾画大致的设计框架
    • 构建关键情景场景剧本
    • 通过验证性的场景剧本来检查设计
  • 设计策略
    • 删除
    • 组织
    • 隐藏
    • 转移
    • 简化设计策略的组合
  • 设计中的折中
    • 个性化和配置
    • 本地化和国际化
    • 审美学与实用性
  • 软件设计的细节
    • 加快系统的响应时间
    • 减轻用户的记忆负担
    • 减少用户的等待感
    • 设计好的出错信息
  • 交互设计模式
    • 模式
    • 交互设计模式
      • 从何处开始设计?
        • 切分内容

设计框架

Allan Cooper建议不要过早地把重点放在小细节、小部件和精细的交互上会妨碍产品的设计,应先站在一个高层次上关注用户界面和相关行为的整体结构
Allan Cooper提出的交互框架不仅定义了高层次的屏幕布局,同时定义了产品的工作流、行为和组织。它包括了6个主要步骤:

定义外形因素和输入方法

  • 外形因素
    设计什么样的产品?
  • 产品输入方法
    产品与用户互动的形式
    取决于产品的外形和人物角色的能力和喜好
    哪种方式或者组合更适合设定的人物角色

定义功能和数据元素

  • 数据元素
    交互产品中的基本主体,如相片、电子邮件、订单
  • 功能元素
    对数据元素操作的工具以及输入或者放置数据元素的位置
  • 在智能电话人物角色Vivien,满足其需求的功能元素包括:(使用场景剧本检验)
    声音激活控制(声音数据和联系人关联起来)
    快速拨号键
    从地址簿中选择联系人
    从电子邮件、约会项以及备忘录中选取联系人
    在某些情境下自动拨号键(比如即将到来的约会事项)

决定功能组合层次

对定义的高层次数据元素和功能元素进行分组,并决定其层次。

  • 元素分组
    更好地在任务中和任务间来帮助促进任务角色的操作流程
  • 需考虑的内容
    哪些元素需要大片的视频区域
    容器如何组织才能优化工作流
    哪些元素是被一起使用的等
    产品平台、屏幕大小、外形尺寸和输入方法的影响
    1)容纳对象的容器之间有比较关系或者要放在一起使用,则其应该是相邻的
    2)表达一个过程中多个步骤的对象通常也要放在一起,并且遵循一定的次序

勾画大致的设计框架

最初阶段,界面的视觉化工作应该非常简单

  • 方块图阶段
    用粗略的方块图来表达并区分每个视图
    方块图对应窗格、控制部件(如工具栏)
    为每个方块图添加上标签和注解
    在这里插入图片描述
    不要被界面上某个特殊区域的细枝末节分散了精力

构建关键情景场景剧本

  • 描述了人物角色如何同产品交互
    这些场景剧本描述了人物角色最频繁使用界面的主要路径
    必须在细节上严谨地描述每个主要交互的精确行为,并提供每个主要线路的走查
  • 使用低保真草图序列的故事板
    在这里插入图片描述

通过验证性的场景剧本来检查设计

验证性的场景剧本不用具备很多细节,但包含一系列“如果怎样,将怎样”的问题。
下面介绍三种验证性的场景剧本:
(1)关键线路的变种场景剧本
关键途径的替代:如果Vivien决定不给Frank打电话,而是发电子邮件
(2)必须使用的场景剧本
必须要被执行但又不是经常发生的情况:智能电话中如果该手机被买卖,则需要删除原用户所有个人信息的功能
(3)边缘情形使用场景剧本
非典型产品具备,但不太常用的功能:如Vivien想添加两个同名联系人

设计策略

注:important
增加的功能越多,越难发现对用户而言真正有价值的功能,同时还可能使遗留代码变得越来越沉重,系统的维护成本越来越高。
交互设计策略的目的就是让软件产品变得简单,并借此提高大多数用户的用户体验。

删除

  • 最明显的简化设计方法
    64%的软件功能“从未使用或极少使用”
  • 删除杂乱的特性
    可以让设计师专注于把有限的重要问题解决好
    有助于用户心无旁骛地完成自己的目标

如何删除?

  • 关注核心
    关系到用户日常使用体验的功能
    能够消除用户挫折感的功能
  • 砍掉残缺功能
    删除实现的不够理想的功能
    为什么要留着它?”而非“为什么应该去掉它”
  • 把注意力集中到客户的目的上面,而非流程

消除错误
消除错误也能提供简单的用户体验:如银行对账单查询
在这里插入图片描述
删除策略不仅适用于界面上的功能,还适用于界面上的文字:
删除视觉混乱

  • 减少用户必须处理的信息,集中注意力在真正重要的内容上
  • 方法:
    使用空白或轻微背景来划分页面,不要使用线条
    尽可能少使用强调,仅加粗就可以了
    别使用粗黑线,匀称、浅色的线更好
    控制信息的层次,标题、子标题、正文
    减少元素大小的变化
    减少元素形状的变化

删除文字

  • 几乎任何句子都能够精简,几乎任何文字都可以删除
  • 精简句子的方法:
    不使用介词(对于/根据/为了/基于/通过/关于)
    不使用is的动词形式,尽可能使用其他表达方式
    把被动句式转换为主动句式,如:时间是被这个项目所需要的->这个项目需要时间
    删除索然无味的开头,开门见山
    删除不必要的说明和解释

不要删减过多
人们希望自己能够掌控局面:

  • 让人们能够控制结果
  • 足够多的控制可以让他们消除因基本需求得不到满足而引发的焦虑
  • 要避免控制太多导致他们因选择而浪费时间

组织

  • 最快捷的简化设计方式
  • 分块
    可对命令分块,如菜单
    可以按字母表或时间顺序排列的清单
    分块越少,选择越少,用户的负担就越轻
  • 围绕行为进行组织
    人们希望按照某种特定的步骤做事
  • 确定清晰的分类标准
    建议多找一些用户,询问他们的分类标准
  • 利用不可见的网格来对齐界面元素
    在这里插入图片描述
  • 大小和位置
    重要的元素要大一些,不太重要的界面元素应该小一些
    把相似元素放在一起
  • 感知分层的实现方式
    眯起眼睛观察屏幕,看是否能区分不同的层
  • 期望路径
    在描述用户使用软件的路径时,千万不要被自己规划图中清晰的线条和整洁的布局所迷惑

隐藏

  • 隐藏是一种低成本的简化方案
    1)用户不会因不常用的功能分散注意力
    2)可作为删除不必要功能的开始
    3)必须仔细权衡要隐藏哪些功能
  • 隐藏什么
    1)主流用户很少使用,但自身需要更新的功能
    2)事关细节(对服务器进行配置或设计邮件签名)
    3)选项和偏好(修改绘图应用的单位)
    4)特定于地区的信息(如时间和日期需频繁自动更新的信息)
  • 自定义
    1)是否应该给用户自己选择的权利?
    自定义可能是一件非常耗费时间的事,且要求对软件中各种各样的功能了如指掌
    2)主流用户感兴趣的是展示自己的个性
    3)如果自定义的工具很简单,还是有价值的
  • 渐进展示
    1)隐藏精确的控制部件
    2)对于用户期望的功能,要在正确的环境下给出明确的提示
  • 适时出现
    1)过分强调隐藏功能会导致混乱
    2)成功的隐藏
    尽可能彻底地隐藏所有需要隐藏的功能
    在合适的时机、合适的位置上显示相应功能
  • 让功能易于发现
    1)怎样介绍被隐藏在幕后的附件项?
    为隐藏功能打上标签:更多,高级
    把标签放在哪里比把标签做多大重要得多
    2)用户关注点
    用户在遇到问题的时候,过于关注屏幕上问题区域就算标签再大,放在用户关注点之外,用户也看不到

转移

  • 设备间的转移
  • 用户间的转移

简化设计策略的组合

  • 删除不必要的
  • 组织要提供的
  • 隐藏非核心的

设计中的折中

个性化和配置

问题:是否应该让产品具有用户定制功能?

  • 个性化
    人们喜欢改变周围的事物,使之适合自己
    必须简单易用
    在用户确定选择之前给他们一个预览的机会
    必须容易撤销
  • 配置
    移动、添加或者删除持久对象
    富有经验的用户所期望的
    包含多种配置形式

本地化和国际化

  • 调整软件,使之能适用于不同语言及地区的过程
  • 国际化
    指在设计软件时,将软件与特定语言及地区脱钩的过程
    当移植到不同的语言及地区时,软件本身不用做内部工程上的改变或修正
    意味着产品有适用于任何地方的“潜力”
    只需做一次
  • 本地化
    当移植软件时,加上与特定区域设置有关的信息和翻译文件的过程
    为了更适合于“特定”地方的使用,而另外增添的特色
    针对不同的区域各做一次

审美学与实用性

  • 一个漂亮的界面不一定就是一个好的界面!
  • 审美与实用的冲突
    为确保文本的可读性,文本的背景采用较低的对比度
    复杂而强烈的对比可能获奖,但不实用
  • 交互设计角度
    根据语义和任务因素来进行视觉组织是最重要的
    视觉美学的重要性稍低
    换句话说,先实现一个良好的基本布局,然后再在这个基础上进行改进来实现好的美学效果
    组件之间的空白非常重要
    在这里插入图片描述
    组件的对齐会影响界面的可理解性和易用性
    在这里插入图片描述

软件设计的细节

加快系统的响应时间

  • 软件的空闲时间被浪费了
    CPU除了等待,没有做任何事
  • 如何利用程序的空闲时间
  • 需要以全新并更主动的方式来思考软件能够怎样帮助人们实现其目标和任务

减轻用户的记忆负担

  • 为了使用软件来完成某些任务,必须记住两类信息或知识
    和软件如何操作相关:应当选择哪个命令或操作、文件存在哪个目录中等
    和该任务所需的领域知识相关:哪些系统函数可以使用,这些函数的参数及返回值是什么
  • 好的软件通过回忆用户上次的行为预测用户可能的操作
    程序可以使用用户以前的设置作为默认值,如文档存放目录、窗口位置等

减少用户的等待感

  • 以某种形式的反馈让用户了解操作进行的进度和状态
    如进度对话框
  • 以渐进方式向用户呈现处理结果
    分成多个连续的部分来顺序地把结果提供给用户
    先传输全局概括,再传输细节
  • 给用户分配任务,分散用户的注意力
  • 减低用户的期望值

设计好的出错信息

四个简单原则 :

  • 使用清晰的语言来表达,而不要使用难懂的代码
  • 使用的语言应当精炼准确,而不是空泛而模糊的
  • 对用户解决问题提供建设性的帮助
  • 出错信息应当友好,不要威胁或责备用户

交互设计模式

模式

模式就是某个情形下某个问题的解决方案,描述了问题和解决方案,并说明了它成功应用于何处。
模式捕捉的只是良好设计中不变的特性,具体实现,将取决于环境和设计者的创造性。

举例
问题
当人们有一种选择的时候,总是倾向于进入两边透亮的房子中,离开一边透亮的房子,使其处于闲置状态
解决方案
定位每个房间,使得至少在其两边的外部有户外空间。然后,在两边的墙上设置窗户,结果自然光能从多于一个方向照射进来

交互设计模式

Allan Cooper将交互设计模式分为三种类型:
1)定位模式:应用于概念层面,帮助界定产品对用户的整体定位。
2)结构模式:解答如何在屏幕上安排信息和功能元素之类的问题。
3)行为模式:旨在解决功能或数据元素的具体交互问题。
模式不是拿来即用的商品,每一次模式的运用都有所不同。
向导模式:在界面上一步步引导用户按预定的顺序完成任务

从何处开始设计?

  • 画草图?
    可能将思路限定在最开始画出来的设计上
    在把应用的总体组织方式设计出来之起,需要在一段时间内保持灵活性和创造性
  • 如何进行高层组织?
    切分内容,把系统的内容从它的外在表现上分离开来
    物理结构,把内容用页面、窗口、面板等元素表达出来

切分内容

  • 大多数应用程序或网站基于如下角度组织:
    对象列表
    动作或任务列表
    某种主题类别的列表
    工具列表
  • 如何进行选择:
    软件的本质和所在的领域
    用户的领域知识
    用户的计算机熟练程度
    用户的心智模型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/652450.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang context 实现原理与源码分析

0 context入门介绍 context是Golang应用开发常用的并发控制技术,主要在异步场景中用于实现并发协调以及对 goroutine 的生命周期控制,它与WaitGroup最大的不同点是context对于派生goroutine有更强的控制力,它可以控制多级的goroutine。 con…

DataGrip使用技巧

DataGrip介绍 DataGrip是JetBrains提供的面向开发人员的数据库管理产品。提供智能查询控制台、高效的架构导航、智能SQL补全等功能。 同类的产品有navicat、dbeaver。本文中使用的DataGrip版本为2023.1 显示数据库其他类型的数据库结构 DataGrip中如果某类型数据库结构数量为…

GaussDB单SQL性能慢分析

文章目录 问题描述问题现象告警单SQL性能慢分析步骤一:确定目标SQL步骤二:收集统计信息、提前排除影响步骤三:分析SQL性能瓶颈 单SQL性能慢-视图分析流控导致慢SQL并发锁冲突导致慢SQL表膨胀导致大量的死元组业务语句不优、计划不优 问题描述…

8自由度并联腿机器狗实现姿态平衡

1. 功能说明 本文示例将实现8自由度并联腿机器狗保持姿态平衡的功能,当机器狗在一个平台上原地站立,平台发生倾斜时,机器狗能够自动调整姿态,保证背部水平。 2. 机器狗的稳定性分析 稳定性是机器狗运动中很重要的一部分&#xff0…

Leetcode | 35 搜索插入位置

35 搜索插入位置 文章目录 35 搜索插入位置题目我的思路[官方题解](https://leetcode.cn/problems/search-insert-position/solutions/333632/sou-suo-cha-ru-wei-zhi-by-leetcode-solution/ "官方题解")欢迎关注公众号【三戒纪元】 题目 给定一个排序数组和一个目标…

Rocky linux 9.0系统安装MySQL5.7

前言 本文将带你在Rocky linux 9.0上折腾一个MySQL5.7, 说干就干。 文章目录 前言安装环境下载mysql 包开始安装启动测试总结 安装环境 删除系统中可能存在的包: [rootmufeng ~]# rpm -qa |grep mysql [rootmufeng ~]# rpm -qa |grep mariadb [rootmu…

Ansible概述和模块解释

Ansible概述 Ansible介绍 Ansible是一个基于Python开发的配置管理和应用部署工具,现在也在自动化管理领域大放异彩。它融合了众多老牌运维工具的优点,Pubbet和Saltstack能实现的功能,Ansible基本上都可以实现。 Ansible能做什么 Ansible能…

Linux---详细讲解linux计算机体系结构

前言 Linux是一种开源的操作系统,它的核心思想是基于冯诺依曼体系结构。在本文中,我们将深入探讨Linux的基本原理和操作系统的概念。 Linux是一款基于Unix操作系统的开源软件,它的核心是由Linus Torvalds在1991年开发的。Linux的出现&#x…

认识 Vue.js

node版本管理工具 nvm - 简书 Vue介绍 Vue.js(简称Vue) 是一套用于构建用户界面的渐进式前端框架。(其实就是使用js开发的一个框架) Vue.js 核心实现 : 响应式的数据绑定:当数据发生改变,视图可以自动更新,不用关心D…

「有问必答」Go如何优雅的对时间进行格式化?

昨天 交流群 关于「Go如何优雅的对时间进行格式化?」展开了讨论: 咋搞捏? 如何在不循环的情况下,把列表数据结构体的时间修改为咱们习惯的格式,而不是UTC模式 我们要实现的效果如下: created_at 是go语言原生的方式&#xff0…

Android Framework分析Zygote进程的启动过程

Zygote进程是Android系统中的一个重要进程,其主要作用是预热Java虚拟机和启动应用进程。本文将着重分析Zygote进程的启动过程,结合代码注释和示例代码,让读者更好地理解Zygote的内部工作原理。 Zygote进程的启动过程 Zygote进程的启动过程包…

Python3 里面的四舍五入

目录 1.一般的四舍五入 : 使用内置的round函数 1.1官方文档: 1.2 举例说明: 2.python3里的格式化输出 format 2.1 记忆法则 :填齐宽 逗精类 2.2 format实质就是通过设置精度间接使用了等效round函数,但是不要把格式化输出和四…

chatgpt赋能python:Python是如何帮助确定location的?

Python是如何帮助确定location的? 什么是location? 在SEO中,location指的是特定页面、文章或者商铺在搜索结果中的排名位置。通常来说,更高的location意味着更多的点击率和流量,因此在SEO中,确定location…

独立站思考:Facebook选品测品

导语:对于独立站而言,获取稳定的流量是至关重要的。本文将探讨如何利用Facebook的选品测品功能,精准找到用户并提高点击率,以及如何通过数据分析优化,提高转化率并快速产生订单。 第一部分:精准定位用户的方…

Nodejs五、Express

零、文章目录 Nodejs五、Express 1、初识 Express (1)Express 简介 Express是什么 官方给出的概念:Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架。 通俗的理解:Express 的作用和 Node.js 内置的 …

Swift 5.9 有哪些新特性(一)

文章目录 前言if 和 switch 表达式Value 和 Type 参数包 前言 虽然 Swift 6 已经在地平线上浮现,但 5.x 版本仍然有很多新功能-更简单的 if 和 switch 用法、宏、非可复制类型、自定义 actor 执行器等等都将在 Swift 5.9 中推出,再次带来了一个巨大的更…

矩阵补全文献汇总

[1] Nguyen L T , Kim J , Shim B .Low-Rank Matrix Completion: A Contemporary Survey[J].IEEE Access, 2019, PP(99):1-1.DOI:10.1109/ACCESS.2019.2928130. 几根棒子的一篇工作。基本结构可以借鉴。 适用于秩未知的矩阵补全文献汇总 [1] Fornasier M , Rauhut H , Ward…

报表岗位如何快速升职加薪?卷的心态要放平,工具要选对!

最近下班时一直看到做报表的部门每个人埋头苦干,不用说,这是又在忙半年度报告了。 现在,报表内卷现象十分严重,大家可能用的是一样的数据集,虽说每个人输出的报告可能结果差异不大,但懂得怎么利用工具&…

在HR眼里,IE证书早就不值钱了

大家好,我是老杨。 最近项目实在是忙,内容都写的少了一些,真的是有点力不从心的意思,人年纪大了,比不起当初年轻的自己了 和同事领导在一块儿的时间越多,就免不了聊到今年的就业环境。 我不提&#xff0…

Vue中如何进行代码编辑器与实时预览?

Vue中如何进行代码编辑器与实时预览? 在现代Web应用程序中,代码编辑器和实时预览已经成为了必不可少的一部分。Vue作为一款流行的JavaScript框架,也提供了一些工具和库,方便开发者在Vue中集成代码编辑器和实时预览功能。本文将介…