软件设计·用户界面设计

本文探讨了用户界面设计的核心原则,包括黄金规则,如用户控制权、减轻用户记忆负担和保持界面一致性。同时,介绍了用户界面分析和设计过程,强调了响应时间、错误处理等设计问题的重要性。针对WebApp,提出了预判用户需求、沟通反馈和一致性等关键设计原则,并概述了WebApp的工作流设计步骤。
摘要由CSDN通过智能技术生成

一、黄金规则

黄金规则可以应用于所有与人交互的技术产品,构成了一系列用户界面设计原则的基础,有些原则可以知道软件设计的重要方面

1. 把控制权交给用户(place the user in control)

很多情况下,设计者为了简化界面的实现可能会引入约束和限制,其结果可能是界面易于建构但是回妨碍使用,这条规则的具体内容如下:

  • 以不强迫用户进入不必要的或者不希望的动作的方式来定义交互模式(define interaction modes in a way that does not force a user into unnecessary or undesired actions),用户应该能够几乎不用做任何动作就能进入或者退出某个模式
  • 提供灵活的交互(provide for flexible interaction):软件可能允许用户通过键盘、鼠标、数字笔、触摸屏等进行交互
  • 允许用户交互被中断或者撤销(allow user interface to be interruptable and undoable):用户能够中断动作序列去做其他的事情,而不会失去已经做过的工作
  • 当技能水平高的时候,可以使得交互流线化并允许定制交互(streamline interaction as skill levels advance and allow the interaction to be costomized):当用户发现他们其实重复地完成相同的交互序列,那么就可以让高级用户定制界面
  • 使用户和内部技术细节隔离开(hide technical internals from the casual user)
  • 设计应该允许用户和出现在屏幕上的对象直接交互(design for direct interaction with objects that appear on the screen)

2. 减轻用户的记忆负担(reduce the users' memory load)

只要可能,系统应该“记住”相关的信息并通过有助于回忆的交互场景来帮助用户

  • 减少对短期记忆的要求(reduce demand on short-term memory):通过提供可视的提示,使得用户能够识别过去的动作
  • 建立有意义的默认设置(establish meaningful default):初始的默认集合应该 对一般的用户有意义,但是,用户应该能够说明个人偏好,并且应该让用户能够自己定义初始默认值
  • 定义直观的快捷方式(define shortcuts that are intuitive) : 使用助记符(Alt + P 激活打印功能等)完成系统功能的时候,助记符应该以容易记忆的方式联系到相关的动作
  • 界面的视觉布局应该基于真实世界的象征(the visual layout of the interface should be based on a real-world metaphor): 一个账单支付系统应该使用支票簿和支票登记册来指导用户的账单支付程序
  • 以一种渐进的方式揭示信息(disclose information in a progress fashion): 关于某任务、对象或者行为的信息应该首先在高抽象层次上呈现

3,保持界面一致(make the interface consistent)

(1)按照贯穿所有屏幕显示的设计规则来组织可视信息

(2)将输入机制约束到有限集合,在整个应用中得到一致使用

(3)从任务到任务的导航机制要一致定义和实现

  • 允许用户将当前任务放入到有意义的环境中(allow users to put the current task into a meaningful context): 提供指示器(e.g. 窗口标题、图标、一致的颜色编码)帮助用户知晓当前工作环境,另外,用户应该能够确定他的来处以及转换到新的任务的途径
  • 在完整的产品线上保持一致性(maintain consistency across a family of applications):一个应用系列都应该使用相同的设计规则
  • 如果过去的交互模式已经建立起用户期望,除非有不得已的理由,否则不要改变它(if past interactive models have created user expectations, do nor make changes unless there is a compelling reason to do so)

二、用户界面分析和设计

用户界面设计模型 

  1. 软件工程师建立用户模型(user model), 确立系统最终用户的轮廓(profile)
  2. 软件工程师创建设计模型(design model)
  3. 用户最终在脑海里对界面产生映像,称为用户的心理模型(mental model)
  4. 系统的实现者提供实现模型(implementation model) 

用户界面设计过程 

这是一个迭代的过程,包括4个不同的框架活动:

  1. 界面分析和建模
  2. 界面设计
  3. 界面构建
  4. 界面确认

界面分析和建模:

在用户界面设计中,理解问题就意味着了解:

  • 通过界面和系统交互的人(end-user)
  • 最终用户为完成工作要执行的任务
  • 作为界面的一部分而显示的内容
  • 任务的处理环境

在任务建模和分析中,可以使用很多分析技术:

  • 用例(use case): 描绘参与者和系统的交互方式,大多数情况下采用第一人称而且以非正式形式书写
  •  任务细化(task elaboration):细化处理任务
  • 对象细化(object elaboration)
  • 工作流分析(workflow analysis): 理解在涉及多个成员的时候,工作过程是如何完成的

界面设计(interface design)

尽管已经提出了很多不同的用户界面设计模型,但它们都建议结合以下步骤:

  1. 定义界面对象和动作
  2. 确定事件(用户动作),也就是回导致用户界面状态发生变化的事件
  3. 描述每个状态的表示方式
  4. 说明用户如何利用界面提供的信息来解释每个状态 

在进行用户界面设计的时候,总会遇到问题,很多设计人员总是在很晚才注意到这些问题,导致不必要的反复、项目拖延和用户的挫折感,最好的方法是在设计初期就将这些设计问题(design issue)加以考虑,因为这个时候方便修改

  1. 响应时间(response time)
  2. 帮助设施(help facilities)
  3. 错误处理(error handling)
  4. 菜单和命令标记(menu and command labeling)
  5. 应用的可访问性(application accessibility)
  6. 国际化(internationalization)

实现 

从建立一个可供场景评估的原型开始,随着迭代设计过程的进行,一种用户界面的成套工具会被用来完成用户界面的建构

用户界面确认 

  1.  用户界面要能够正确完成每一个用户任务和一系列用户动作,同时满足左右的用户需求
  2. 用户界面要易于使用和学习
  3. 软件能够作为用户工作中的有用工具,用户接受度高 

三、WebApp的用户界面设计 

有效的用户界面在视觉上是明显而且易于操作的,用户不用考虑系统的内在工作机制同时,有效的应用和服务会应用其最大的工作量

WebApp的用户界面设计原则

  1. Anticipation: 能够预估用户的下一步动向,及时提供引导或者方便用户动作的要素
  2. Communication:系统应该及时反馈用户开始的任何动作序列的结果
  3. Consistency:一致性体现在控制菜单、图标和审美设计上
  4. Controlled autonomy:给用户有底线的控制自由
  5. Efficiency: 提高用户的工作效率
  6. Focus:能够让用户专注于自己现有的工作,而不是分散注意力
  7. Fitt's Law:图标之间的距离
  8. Human Interface object: 要设计大量可复用的人机交互图标等
  9. Latency reduction: 多任务并行处理来使得用户能够按照自己的进度推进任务
  10. Learnability: 最小化网站的学习时间
  11. Maintain work product integrity: 工作结果要被及时的保存,防止因为error丢失
  12. Readability : 能够被所有人群读懂
  13. Track state:记录状态,用户退出之后再进入可以回到上一次访问的地方
  14. Visible navigation: 把导航和指引永远放在一个地方

WebApp的工作流 

  1.  检查分析模型中包含的信息,并根据需要进行改进
  2. 设计一个大致的WebApp界面的模版
  3. 将用户的需求和特定的交互动作练习起来
  4. 定义一个用户动作集,将用户动作和每个软件任务练习起来
  5. 将每个交互动作的流程列出
  6. 精化流程和用户界面的审美设计
  7. 识别所有需要用来实现用户界面的交互物件(图标等)
  8. 建立一个用户和界面交互的流程
  9. 建立交互的行为展示
  10. 描述每个状态下的界面显示
  11. 精化和评审 
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值