Learn | UI | UI设计必修课:交互-机构-视觉

https://e.dangdang.com/pc/reader/index.html?id=1901211576

用户体验要素

用户体验的分类

• 信息架构: 针对产品试图传达的信息而创建基本组织系统的过程。
• 交互设计: 向用户呈现组织系统结构的方式
• 形象设计: 彰显产品的个性和吸引力。

信息架构

是对信息组织、分类的结构化设计，以便于信息的浏览和获取。

• 信息架构的方法：

  • 从上至下
    • 从对网站目标和用户需求的理解出发直接进行结构设计。
  • 从下至上
    • 根据对信息内容和功能设计的分析而来的。
  • 通常，从上至下的信息架构方法用于网站的整体结构组织和框架上，而从下至上的方法则用于局部设计细节的处理上。

• 信息结构的结构类型：

  • 层级结构
  • 矩阵结构
  • 自然结构
  • 线性结构

• 信息结构的组织原则：

  • 精确性组织原则是将信息分成定义明确的区域或互斥区域
  • 模糊性组织原则是按照信息的意义进行分类
  • 通常情况下，网站结构中高层的信息组织应该符合网站的目标和用户需求，低层的分类应该考虑产品的内容与功能。

信息架构是在符合设计目标，满足用户需求的前提下，将信息条理化，不管采用何种原则组织分类信息，重要的是要能够反映出用户的需求。

交互设计

交互设计直接影响着用户体验，它决定如何根据用户信息架构进行浏览，如何安排用户需要看到的内容，并保证用最清晰的方式及适当的重点来展现合适的数据。

• 交互设计的四个方面：

  • 任务流
    • 指进行某项正确操作所必需的一连串动作。研究任务流包括了解人们按照什么顺序查看要素:对下一步有什么期望，他们需要什么反馈，结果是否符合他们的预期。
  • 界面的可预见性和一致性
    • 确定用户需要多少可预见性操作才能顺畅执行任务流，以及不同任务流需要多一致才能够让用户感到熟悉。
  • 站特征和特定界面要素重点之间的关系
  • 不同受众
    • 与熟练用户相比，初次使用的用户需要不同特性，使用方法也不同。如果产品要服务于不同目标市场，应该要知道市场想要什么，以及他们能用什么产品

• 交互设计的一般步骤：

  • 用户调研
  • 概念设计
  • 创建用户模型
  • 创建界面流程
  • 开发原型以及用户测试
  • 实现
  • 系统测试

视觉形象设计

视觉设计师的工作是传达区别于竞争对手且同时和公司其他产品保持一致的形象。视觉设计师关心产品的直接体验，而不是市场对产品品牌的认知和接受程度。

用户体验的要素模型

5个层面

从具体到抽象。

• 表现层
  • 表现层主要是网站的视觉效果设计。
• 框架层
  • 在表现层下面的是框架层，框架层利用按钮、控件、照片及文本区域位置等元素来优化网站的设计布局，使这些元素的使用效果和效率达到最大化，确定很详细的网站页面外观、导航和信息设计。
  • 在框架层中主要是对页面中不同的内容区域进行划分，确定网站页面的布局，从而方便对网站页面的视觉表现效果的设计。
• 结构层
  • 在框架层下面的是结构层，框架是结构的具体表现方式。
  • 框架层设定网页上交互元素的位置，而结构层则用来设计用户如何到达某个页面，以及访问结束后能够去到哪里。
  • 框架层定义了导航栏中各要素的排列方式，允许用户浏览不同的分类，而结构层则确定哪些类别应该出现在哪里。
• 范围层
  • 结构层确定网站各种特性和功能最适合的组织方式，而所有这些特性和功能就构成了网站的范围层。
  • 简单来说，范围层主要用于设定网站中所包含的内容及功能。
  • 举例：例如，大多数电商网站都提供了这样一个功能，使用户可以保存以前的收货地址，这样当用户再次购买商品时可以直接使用所保存的地址，这个功能就属于“范围层”要解决的问题。
• 战略层
  • 成功的用户体验，其基础是一个被明确表达的战略。网站的范围基本上是由网站的战略决定的。这些战略不仅包括网站经营者想从风站得到什么，还包括用户想从网站得到什么。
  • 战略层决定了网站的定位，由用户需求和网站目标决定。

表现、框架、结构、范围和战略这5个层面中，每一层我们需要处理的问题既有抽象的，也有具体的。在最下面的战略层，我们不需要考虑网站、产品或者服务最终的表现形式，我们只关心网如何满足我们和用户的需求。在最上面的表现层，我们则只需要关心产品所呈现的具体细节。随着层面的上升，我们要做的决策会逐渐从抽象变得具体。

要素模型

信息和功能成为网站的两个方向。

用户体验的五层要素模型，为了解决上述的双重性问题，模型中把这五个层面从中间分开。在左边，这些要素用于描述功能型的平台类产品;在右边这些要素用于描述信息型的媒介类产品。

• 战略层：
  • 无论是功能型产品还是信息型产品，战略层所关注的内容都是一样的。
  • 在战略层面要考虑用户希望从网站获取什么。
• 范围层：
  • 对功能型产品而言，范围层需要创建功能规格，也就是对产品的功能组合的详细描述。
  • 而对于信息型产品来说，范用层需要定义内容需求，也就是对各种内容元素要求的详细描述。
• 结构层：
  • 在功能型产品一侧，结构层将从范围转变成交互设计，主要定义系统如何响应用户的请求。
  • 在信息型产品一侧，结构层则是信息架构，主要是合理安排内容元素从而促进用户理解信息。
• 框架层：
  • 框架层被分成了信息设计、界面设计和导航设计3个部分。
  • 信息设计是指通过合理的设计使得信息的表达更加清晰、明确，用户更容易理解。不管是功能型产品还是信息型产品，都必须完成信息设计。
  • 界面设计是针对功能型产品而言的，指的是安排好能让用户与系统的功能产生互动的界面元素。
  • 导航设计就是信息型产品的界面设计，指的是屏幕上的一些元索的组合，允许用户在信息架构中穿行。
• 表现层：
  • 不管是功能型产品还是信息型产品，在表现层都需要为最终产品创建感知体验，其中最主要的就是视觉设计。

战略层详解

明确的战略是用户体验设计成功的基础。

导致失败最常见的原因不是技术，也不是用户体验，而是在之初，我们没有明确两个问题：

• (1) 我们要通过这个网站得到什么?
• (2) 用户通过这个网站可以得到什么?

这两个问题其实就是我们明确网站的定位和用户的需求，这是我们在用户体验设计过程中做出任何决定的基础，但很多产品在进行用户体验设计时对此并没有明确的认识。

• 战略层：
  • 网站定位：
    • 商业目标
      • 赚钱
      • 省钱
    • 品牌识别
      • 概念系统
      • 情绪反应
    • 成功标准
      • 页面浏览量
      • 活跃用户数
  • 用户需求：
    • 用户细分
      • 人口统计
      • 心里图谱
      • 对技术的观点
      • 内容了解程度
    • 可用性和用户研究
      • 市场调研
      • 现场调查
      • 人物分析
      • 用户测试
      • 人物角色
  • 团队写作：
    • 战略文档
      • 简洁有力
      • 及时改进

确定产品定位

对于任何一款产品，都不可避免地要同时考虑商业价值和用户集求。因为只有让用户满意，愿意使用产品，企业才能够从中获得商业价值。商业价值提升了，企业才能够花费更多的时间和精力在提升用户体验上。因此商业和用户两个因素，缺一不可。

在实际工作中，需要从商业、用户技术二个角度来亚衡考虑需求。

• 需求：
  • 从商业角度出发
  • 从用户角度出发
  • 从项目角度出发

产品定位是产品设计的方向，也是需求文档和设计产出的判断标准。

产品定位实际上是关于产品的目标、范围、特征等约束条件，它包括两方面内容:产品定义和用户需求。

• 产品定位：

  • 产品定义
    • 使用人群
    • 主要功能
    • 产品特色
  • 用户需求
    • 目标用户
    • 使用场景
    • 用户目标

• 什么是产品定义?

  • 产品定义包括使用人群、主要功能和产品特色;
  • 产品定义中的主要功能、产品特色和用户需求中的目标用户形成了产品定位中最核心的内容，是产品设计最主要的方向和依据。
  • 产品定义就是用一句话来概括某个产品。如果你的产品很难用一句话描述清楚，那么很可能是因为你的产品定位不够清晰、方向不够明确。
    • 使用人群: 明确产品主要为谁服务，所有的功能、内容、设计风格的设定都围绕这类人群来进行。
    • 主要功能: 划定了功能的范围和限制。
    • 产品特色: 使产品区别于同类竞争者，让所开发的产品在同类产品中脱颖而出，更具有竞争力。

• 产品定义的作用是什么?

  • 首先，产品定义可以迫使产品经理努力去思考产品的方向和机在激烈的竞争中杀出一条血路，其次，产品定义为产品限定了大会，致的范围，让团队成员不至于在千头万绪中感到无从入手、难以取舍最后，产品定义使团队成员的凝聚力更强、思想更统一，而不是各自为政。

了解用户需求

• 什么是用户需求？

  • 用户需求包含目标用户、使用场景和用户目标。
  • 一条用户需求可以看作是“目标用户”在“合理场景”下的“用户目标”，其实就是解决“谁”在“什么环境下”想要“解决什么问题”。
  • 用户需求其实就是一个个生动的故事，告诉我们用户的真实境况。

• 在目标用户、使用场景、用户目标3个因素中，目标用户是最关键的。

  • 一方面，明确明标人群可以使你更专注于服务某一类特定人群这样更容易提升这类人群的满意度，你的产品也更容易获得成功;
  • 一方面，目标用户的特征对使用场景和用户目标有较大的影响。因此目标用户的选择是非常关键的。

• 用户细分：

• 可用性和用户研究：

战略应该是设计用户体验流程的起点，但这并不意味着在项目开始之前你的战略需要完全确定下来。当战略被系统地修正与校正时这些工作就能够成为贯穿整个过程的、持续的灵感源泉。

范围层详解

在范围层，我们从战略层的抽象问题“为什么要开发这个产品”转而面对一个新的问题“我们要开发的是什么”。

• 范围层:
  • 定义价值
    • 过程
    • 产品
  • 项目说明文档
    • 建设什么
      • 功能
        • 收集
          • 用户交流
          • 头脑风暴
          • 功能规划文档
        • 优先级
          • 满足战略层
          • 产品特性
          • 技术
          • 人力
          • 财力
          • 时间
      • 内容
        • 收集
        • 管理
    • 不建设什么

从哪里获得需求

采集需求的主要方式有用户调研、竟品分析、用户反馈(上线后)、产品数据 (上线后)等，这些方法都是产品经理和设计师需要密切关注的。

• 产品需求
  • 用户调研
    • 要想真正了解用户的需求，就要尽量走到用户中去了解他们的想法，深入了解目标用户在真实使用环境下的感受、痛点、期望等。
  • 竞品分析
    • 找到有代表性的同类产品，对比产品之间的优势、劣势，从而发现产品的突破口。
  • 用户反馈
    • 产品在测试阶段或正式发布后，我们可能会收到很多用户反馈这些反馈可以帮助我们了解用户使用中存在的问题。
  • 产品数据
    • 产品上线后，就可以收集到产品的相关数据了，比如常规的访问浏览数据、浏览痕迹、点击痕迹、在每个页面上的浏览时长、整体的浏览顺序等。

对需求进行分析筛选

• 需求筛选流程：
  • 筛选明显不合理的需求
    • 目前不可能实现的
    • 不合常理的
    • 价值不大的
    • 无适合场景的
  • 挖掘用户目标
    • 用户的真是需求是什么
  • 匹配产品定位
    • 用户目标
    • 主要功能
    • 产品特色
  • 考虑项目资源定义优先级
    • 实现成本
    • 商业价值
    • 用户价值

确定需求优先级

我们先确定产品定位，然后通过不同的方式来收集大量的需求识别这些需求的有效性和真实性后，根据定位和项目资源情况筛选提炼出产品需求，定义出需求优先级。

通过使用KANO模型来确定用户需求的优先级，该模型定义了三个层次的用户需求：基本型需求、期望型需求和兴奋型需求。

基本型需求:用户认为产品必须拥有的功能和内容。当产品无法满足基本型需求时，用户会对产品非常不满意。

期望型需求:用户要求提供的产品或服务比较优委，但并不是少须拥有的功能和内容。在市场调查中，用户谈论的通常都是期望型雪求。期望型需求在产品实现得越多，用户对产品越满意。

兴奋型需求:要求提供给用户一些完全出乎意料的产品功能或服务，使用户产生惊喜。当产品提供了这类需求中的服务时，用户就会对产品非常满意，从而提高用户的忠诚度。

结构层详解

• 结构层
  • 交互设计
    • 关注
      • 如何影响执行
    • 概念模型
    • 错误处理
      • 预防
      • 改正
      • 修复
  • 信息架构
    • 关注
      • 如何表达信息
    • 分类体系
      • 自上而下
      • 自下而上
      • 容纳成长和适应变动
    • 结构方法
      • 层级
      • 矩阵
      • 自然
      • 线性
    • 组织原则
      • 战略层
      • 范围层

交互设计

交互设计关注与描述“可能的用户行为”，同时定义“系统如何配合与响应”这些用户行为。

信息架构

在以内容为主的网站上，信息架构着重工设计组织分类和导航的结构，从而让用户可以高效、有效地浏览网站内容。信息架构与信息检索的概念密切相关，即设计出让用户容易找到的信息系统。

框架层详解

结构层界定了我们的产品将使用什么方式来运作，框架层则用于确定用什么样的功能形式来实现。

• 框架层
  • 界面设计
    • 关注
      • 安排和选择界面元素
    • 重要的东西
      • 一眼看到
      • 过程容易
      • 结果满意
    • 不重要的东西
      • 忽视或去除
  • 导航设计
    • 关注
      • 识别和定义核心导航系统
    • 目标
      • 促进跳转
      • 传递内容关系
      • 传递与当前页面的关系
    • 导航系统
      • 全局
      • 局部
      • 辅助
      • 上下文
      • 友好
    • 远程导航
      • 网站地图
      • 索引
  • 信息设计
    • 关注
      • 防止和排列信息组成部分的优先级
    • 习惯和比喻
      • 概念模型
      • 经验联想
    • 指示指标
      • 排版
    • 线框图
      • 进行整合

界面设计

一个设计良好的界面要组织好用户最常使用的行为，同时让这些界面元素用最简单的方式被获取和使用，让用户达到目标的过程变得容易。

导航设计

网页中的导航主要是为了方便用户浏览网站，快速查找所需信息。

信息设计

信息设计常常充当一种把各种设计元素聚合到一起的黏合剂的有色，更重要的是让用户更好地理解，对散乱,的信息进行分组和整理优化信息的展现形式。

线框图

线框图是框架设计中非常重要的一个工具，它将信息设计、界面设计和导航设计整合在一起。

线框图通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设;通过放置和排列信息组成部分的优先级来整合信息设计。

通过把这一者放到一个文档中，线框图可以确定一个建立在基本概念结构上的架构，同时指出视觉设计应该前进的方向。

表现层详解

在框架层，我们主要解决的是放置元素的问题，界面设计考虑可交互元素的布局，导航设计考虑在网站中引导移动元素的安排，而信息设计则考虑传达给用户的信息元素的排列。在表现层，我们则要解决弥补网站框架层的逻辑排布的视觉呈现问题。

在表现层中，产品的内容、功能和美学聚集到一起产生一个最终设计，完成前4个层面的所有目标，满足用户的感官感受。

• 表现层

  • 评估标准
    • 应该是
      • 运作是否良好
    • 不是
      • 是否具有美感
  • 忠于眼睛
    • 视觉轨迹
      • 路径清晰
      • 提供指引
  • 吸引用户
    • 对比
      • 突出差异
    • 一致性
      • 统一形象
    • 配色方案
      • 容易阅读
    • 字体选择
      • 传递品牌

• 如何评估网站的视觉设计

• 对比

• 一致性

• 配色方案

• 字体选择

用户体验的一般设计流程

• 原型
• 模型（设计稿）
• 演示版（开发交付）