首页

Carplay 设计规范(上)

涛涛


传统的汽车中控系统,大多是相对固定的硬件组合到一起,共同构成中心的控制台,控制着包括导航、收音机、播放器、空调等在内的各种功能。一直到 2000 年前后,汽车的中控台都一直以这样相对固定的物理按钮和旋钮来搭建,用户也可以通过官方或者第三方服务,来升级功能,比如将磁带播放器升级为CD播放器乃至于内嵌电视功能等等。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

随着移动端技术的发展,iOS 和 Android 等智能软件系统的完善和提升,汽车的中控系统也不再受限于固化的硬件功能。平台化的软件体系让中控系统有了更多的可能性,影音娱乐开始更加丰富,而已然完善的移动端触摸式交互生态,则为汽车中控以屏幕替代物理按钮打下基础,各类原本存在于手机电脑的新型的 APP 、功能、服务也逐渐出现在汽车中控系统上,而特斯拉更是一步到位,以一块巨大的触摸屏彻底革新了中控的交互体验,OTA 升级,有机多样的UI交互,彻底释放开了汽车中控交互体验上的想象力。新的问题出现了,新的方法在迭代,新的趋势也得到了印证。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

宝马奔驰保时捷等顶级的汽车厂商大都在中控台的设计上,探索了各自的可能性,国内厂商也毫不示弱,不过其中绝大多数的系统都基于我们熟悉的 Android 或者是 Android Auto 作为基础来进行定制和优化,而苹果则基于自家 iOS 生态,在 2013 年推出了 iOS in the Car 服务,目前正式名称为 Carplay。而目前各大厂商所青睐的 Android Auto 也上在 Carplay 发布之后所跟进并发布的。

目前,Carplay 和 Android Auto 都已经上行业标准级别的存在,今天这篇文章, 我们先聊聊 Carplay。

关于 Carplay

想做好车载设计?先掌握这份 Carplay 设计规范(上)

CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽车展览上。

Carplay 本身并非完全独立的存在,它本身会和 iPhone 一起联动,让iPhone 成为你的车钥匙和辅助管理系统。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

CarPlay 车载让你能够在驾驶车辆时智能、安全地使用各项 iPhone 功能。你可以开导航、打电话、收发信息、听喜欢的歌。所有这一切,都整合在车内的中控显示屏上。在 iOS 14 中,CarPlay 车载还引入了全新的 app 类别和适用于 CarPlay 车载仪表盘的自定墙纸。

Carplay 以 苹果自身在移动端交互和用户体验上的深厚积淀,总结和梳理出了一套可供学习和值得参考借鉴的规范。

这些规范对于需要考虑车载使用场景的厂商以及正在布局车载移动端软件或者系统的厂商的设计师而言,都有着相当的参考和学习价值。

Carplay 核心原则和功能

作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景,而它的设计原则也围绕着这一场景来规划:

  • 成熟。基于最熟悉的 iOS 应用,来设计界面元素,并提供熟悉、直观的体验。
  • 简短。采用尽可能简短的交互,不过度引人瞩目
  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策
  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

1.1、音频应用

Carplay 当中会有提供音频内容的 APP,诸如 Podcasts,网络电台,新闻,音乐,体育节目等等,这些服务和 APP 将会通过内置的屏幕显示,并且借助最常见的「标签栏+列表」来呈现基本的框架,并且必须包含「播放」界面。尽管这类服务和应用是借由内置的界面框架来呈现,但是依然有值得注意的要点:

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  1. 即使数据不可用,也始终要提供内容。考虑到内容可能会受到网络状况的影响,在这种情况下,请依然使用占位符。
  2. 请将内容层次结构控制在3个级别,或者更少。
  3. 使用多个标签页来组织内容,并且尽量简化标签导航的数量和结构。
  4. 优先显示相关度最高的内容,减少用户不必要的操作。
  5. 在最顶层界面中,提供包括单点击触摸即可播放的功能,比如「播放」按钮和「随机播放」等选项。
  6. 行驶过程中,对内容进行智能过滤。比如超速的时候,系统会进行语音提示,此时智能暂停播放的内容,并在界面中呈现正在播放的内容的相关信息。
  7. 提供尽可能简洁的标题和说明。
  8. 提供补充性的可视化内容,比如专辑封面等等,更加一目了然。
  9. 不要在 Carplay 中内置登录和设置的选项和功能,确保 APP 开箱即用。如果需要,尽量让这类操作在 iPhone 上进行,并且尽早完成。想做好车载设计?先掌握这份 Carplay 设计规范(上)

使用此图标代表明确的、本地的的内容。

想做好车载设计?先掌握这份 Carplay 设计规范(上)使用此图标来标识在线的内容,确保用户知道内容来自网络,并且会耗费网络流量。

在进行音频内容播放的时候,Carplay 会显示「正在播放」的界面,并且会使用如下界面:

想做好车载设计?先掌握这份 Carplay 设计规范(上)

在设计这个相关的界面功能的时候,需要注意以下几点:

  • 播放音频时,提供有用的、准确的信息,并且可以进行明确的控制。
  • 不要重新定义播放控件的含义。
  • 在中断播放一段时间之后,适时恢复并继续音频播放。

1.2、汽车厂商应用

Carplay 能够内嵌到不同厂商的车中,自然也可以控制车内的硬件。这一部分的硬件驱动支持通常是由厂商提供,并且借由 Carplay 内的界面,提供统一的交互体验。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 将控件和内容限制在与汽车本身相关的范畴以内,不要加入无关的功能
  • 首选标准UI控件,包括按钮、标签、导航、表单等控件,具体可参阅系统元素
  • 不要重新设计标准控件,确保整体的视觉和体验的一致性
  • 切勿模仿汽车本身的UI 界面设计,确保 Carplay 内的统一性

1.3、信息传递和 VoIP应用

VoIP 也就是基于 IP 的语音传输功能,而在 Carplay 中,VoIP 应用主要借助 Siri 服务,并且全由 Siri 操控,它并不为用户提供直接的交互界面,因此无需专门设计 UI 界面。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

它支持阅读信息和编写/回复消息,不过需要用户授予权限

想做好车载设计?先掌握这份 Carplay 设计规范(上)

2.1、信息标识

当你的 APP 有推送信息未读的时候,通常会在 APP 的右上角增加一个红色的小红点标识,并且其中会有一个白色数字用来标识未读信息的数量。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 尽量让信息标识足够直观。让用户打开APP之后能够看到推送信息。
  • 保持克制。不要让推送信息大量而频繁,在这个场景下会让用户感到迷惑。
  • 注意重要信息的呈现。在标签栏和APP内的重点位置凸显重要信息,不要仅靠信息标识来凸显关键信息推送。
  • 避免使用警报提示来作为信息标识的补充。即使有重要的信息,用户也不希望你在打开APP的时候出现警报弹出框来推送信息。这些信息应当是可见,显著,但是用户选择是否要打开和点击的。
  • 始终保持信息标识是最新的。

2.2、错误推送

对于错误信息,应当妥善处理,并且绝对是要在必要的时候才推送报错信息。

  • 通过 Carplay 推送错误信息,而不是推送到连接的 iPhone 上去。
  • 优先以非侵入性的状态推送来推送报错信息,而不是直接弹出警报。

2.3、加载状态

在加载内容的时候,使用黑屏或者静态的界面,可能会让它整体上看起来像是死机了一样,者可能会导致用户离开。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

  • 进行加载的时候,尽量明确显示加载状态
  • 加载时,尽快显示主要内容,使用文本和图片占位符来呈现内容布局,并且在完成之后替换,如果可能,尽量预加载已有内容,再更新。

2.4、导航模式

在 Carplay 当中,有2种常见的导航模式:

横向导航。通常使用标签栏来进行导航,不同内容横向排布,用户可以快速点击不同标签切换。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

分层导航。用户在屏幕上点选不同选项,通往不同的子界面。其中地图应用采用的是这种结构。

想做好车载设计?先掌握这份 Carplay 设计规范(上)

音乐类应用可以使用横向导航,也可以使用分层导航,在设计导航的过程中,应当注意:

  • 尽可能让用户快速而轻松地获取内容。结构化信息,让用户以最少点击、滑动来找到他们想要的东西。
  • 用户在进行返回操作的时候,请保留之前的界面,防止用户迷失。避免音频自动播放,除非它是主要功能。
  • 为每一个界面分配一个固定清晰的路径。
  • 尽可能使用标准的导航组件,比如使用选项卡菜单栏和列表视图。
  • 使用导航栏应该能够遍历所有的层次结构。
  • 使用标签页选项卡的时候,显示同一级的内容或者分类。

2.5、测试

全面的测试,是确保应用可用性的重要前提。

  • 请在实际与 Carplay 兼容的显示器上进行测试,最好是在真实的车上进行测试。
  • 在恶劣的网络条件下测试,比如穿越隧道或者网络覆盖状况较差的区域。
  • 测试安装和设置的流程中有没有问题,并且密切注意涉及到登录和隐私相关的问题。

3.1、音频内容

无论音频是否是你的 APP 的主要内容呈现形式,你都需要了解用户对于音频有哪些期待,并且尽量去贴合这些需求。

  • 只有当准备好播放之后,才会切换到「正在播放」的屏幕页面。
  • 音频加载完毕之后就可以开始播放,即使描述性的信息依然在加载。
  • 尽量避免自动播放。
  • 如果被别的程序和提示打断,在暂停之后再继续恢复音频播放。
  • 在必要的时候,自动调整当前内容的音量,而不是整体的音量。
  • 在系统发出短提示音的时候,使用系统音量。比如警报。

3.2、汽车数据

在管理汽车功能的页面当中,厂商提供的功能和数据将会无缝的接入到 Carplay 当中,比如气候、网络、GPS 等等。当数据不可用的时候,尽量提供合理的响应方式。

比如当汽车通过隧道,没有 GPS 信息的时候,尽量以不打扰的方式来告知用户。

3.3、iPhone

Carplay 是和 iPhone 连接起来使用的,并且在程序数据上也相互兼容互通,只是Carplay 本身提供的是简化之后的 UI ,并且针对驾驶的场景进行了优化。

  • 当 Carplay 处于活动状态时,隐去 iPhone 上的 APP 交互。
  • 请不要将 iPhone 和相关用户置于 Carplay 范畴以外,因为正常使用的时候需要 iPhone 的数据接入。
  • 确保当 iPhone 锁定或者在后备箱中的时候,你的程序可以正常使用。

3.4、旋钮和控件

支持 Carplay 的车辆通常会有物理按钮和旋钮,它们可以作为 Carplay 交互的辅助。当物理按键作为用户的主要交互介质的时候,通常至少会存在一个 Siri 按钮,导航控件,选择控件,以及后退控件。

这些控件和 Carplay 应当高度对应,无论是播放、暂停、上一首/下一首 都应该做出准确的相应。具体可以参阅:MPRemoteCommandCenter

想做好车载设计?先掌握这份 Carplay 设计规范(上)

当 Carplay 投射的屏幕不支持触摸的时候,还有基于旋钮的焦点式交互方式,当用户拧动旋钮的时候,能够让光标从一个元素切换到另一个元素,激活并交互。

文章来源:优设 作者:陈子木

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



Carplay 设计规范(下)

涛涛

3.5、触摸屏交互

用户可以通过内置的触摸屏来与 Carplay 直接进行交互。高保真屏幕可能会比低保真屏幕,在交互效率上更高,更低延迟,支持更多手势。Carplay 的交互基本采用的都是单指交互,具体可以参考下方列表:

想做好车载设计?先掌握这份 Carplay 设计规范(下)

在设计交互的时候,尽可能少地使用触摸交互,避免用户在驾驶过程中分心。

3.6、Siri

Siri 是 Carplay 的基本功能,无干扰的语音让用户和程序之间的交互更加自然和安全

即使看不到 Carplay 的屏幕,依然可以使用方向盘上的语音命令按钮来激活 Siri。激活后,Siri 会针对语言进行处理和分析,并且转换为可用的指令。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 快速响应,最大程度地减少交互。
  • 使用自定义词汇表,提升 Siri 的识别准确度。用户可以通过特定的术语来提升语音识别准确度。

具体可以参与 SiriKit 编程指南

4.1、动画

动画可以让屏幕上的元素,拥有一层附加的视觉效果。如果方法得当,动画还能呈现状态,提供反馈,增加用户直接操控时候的感觉,并且告知用户可视化操作的结果。

4.2、品牌设计

成功的品牌设计并不只是把 LOGO 塞到 APP 当中,出色的 APP 能够巧妙地使用字体、配色和图像来构建独特的品牌形象。

关于这方面的设计,可以详细参考 iOS 设计规范中的 配色、版式以及 图标和图像 这三个章节。

在品牌设计上,Carplay 要求设计师:

  • 尽可能将品牌设计以精致醒目的方式呈现出来。由于车内的使用场景,人们不会使用 Carplay 来查看广告,最佳的用户体验则是他们最需要的东西。
  • 着重呈现品牌的一致性和功能性。确保你的 Carplay 界面是直观且易于导航的,并且提供驾驶时真正有用的功能。
  • 遵守 Apple 的品牌设计准则。具体可参考:Apple Trademark List 和 Guidelines for Using Apple Trademarks

4.3、配色

通常,配色可以提供交互性,提供视觉连贯性,并且对界面赋予生命力。

  • 你需要选择和你的品牌LOGO可以搭配使用的配色方案。
  • 避免让交互性元素和非交互性元素使用相同的配色。
  • 在实际汽车环境下,对你的配色方案进行测试。
  • 尽量使用深色背景。
  • 注意不同文化对于色彩的理解,以及色盲用户的需求。
  • UI中采用足够明显的色彩对比。

4.4、布局

Carplay 支持不同像素密度不同纵横比的显示,但是这也意味着在实际布局设计的时候,要格外小心,尽量让你的设计在不同的屏幕分辨率和长宽比之下,都显得足够正常。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 以整洁的布局提供有用的信息,让驾驶者可以一目了然地扫视到信息。
  • 在整个 APP 内部保持一致的外观。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 确保主要内容足够清晰醒目,并且感觉上是可用的。
  • 使用对齐的方式来保持清晰的层次结构,一目了然。
  • 为交互元素留出足够的间距和交互空间。
  • 基于驾驶员的位置来排布元素,尽可能顺手。
  • 考虑物理控件对于界面的影响。

4.5、字体版式

Carplay 采用的字体是苹果的 SF 字体。你可以在这里下载到字体

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 最小程度使用文本,使用图像信息传递速度更快。
  • 强调重要信息。通过色彩和字体粗细,来凸显最重要的信息。
  • 避免使用自定义字体。
  • 尽可能使用内置的文本样式。
  • 使用正文文本样式作为主要内容的字体。
  • 使用 SF 字体的时候,Carplay 会根据最佳的文本大小自动适配间距。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.1、图片尺寸和分辨率

和 iOS 类似,在 Carplay 当中,屏幕分辨率也分为 1x 2x 和 3x。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.2、APP 图标

想做好车载设计?先掌握这份 Carplay 设计规范(下)

每个 Carplay APP 都应该有一个显著突出的图标,确保在驾驶的时候可以轻松点击到。

  • 可以直接使用 iPhone 的 应用图标。
  • 不要使用黑色作为图标的底色。
  • 设计图标的时候,图标应该有视觉焦点。
  • 采用简单且易于理解的图标设计。
  • 确保图标本身是不透明的,并且让图标背景足够简单。
  • 不要在图标当中使用照片、截图或者其他界面元素。
  • 不要在APP的具体界面当中使用 APP 图标,避免混淆。
  • 设计完成的图标应该是方形的,系统会使用蒙版将边缘处理为圆角矩形。
  • Carplay 的图标尺寸分别为 @1x 60x60px ;@2x 120x120px ;@3x 180x180px

5.3、自定义图标

如果你设计的 APP 当中,需要的图标并不存在于系统图标当中,或者系统图标与你的 APP 并不匹配,可以自定义图标设计。

  • 创建简单的,可识别的图标设计。不要加入过多的细节,确保可读性。
  • 设计图标的时候,使用透明背景、抗锯齿且无阴影的纯色图标。
  • 保持图标在风格、尺寸以及各个规格上的高度一致。
  • 在设计选项卡图标的时候,选择两种不同版本的图标,分别是选中状态和未选中状态的。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 不要在标签栏图标当中使用文本,如果需要,则在标签栏下方的标题中说明。
  • 自定义图标尺寸要求如下:

想做好车载设计?先掌握这份 Carplay 设计规范(下)

5.4、系统图标

系统本身内置了许多小图标,服务于日常各种不同的任务,通常这些小图标会使用在导航栏和标签栏当中,尽可能使用这些内置的图标。

  • 按照用户习惯和预期来使用这些系统图标。
  • 如果找不到满足需求的图标,就请使用自定义图标。
  • 在导航栏中使用图标的时候,具体可参阅这份文档:UIBarButtonItem

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 在标签栏中使用图标,请参考这份文档:UITabBarItem

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.1、上拉菜单(Action Sheets)

上拉菜单是一种特定的弹出菜单,通常从屏幕底部弹出,并且包含2个以上的选项。不过在 Carplay 当中应该尽量避免使用上拉菜单,在 iPhone 上倒是可以使用它,但是不要在 Carplay 中显示。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.2、活动指示器(Activity Indicators)

在内容加载的过程当中,请勿让屏幕保持静止,或者空白,使用活动指示器确保它看起来没有静止。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

如果可以的话,可以在加载过程中提供对用户有帮助的信息。具体可以参考 UIActivityIndicatorView

6.3、警告(Alerts)

警告会用来通知用户一些关键性的信息,警告通常由标题、可选信息以及一个或者多个按钮组成。除此之外,警报的视觉系统是静态的,无法自定义。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

警告最小化呈现。由于警告本身会破坏用户体验,所以请在重要的情况下使用警报。
相关开发人员可以参考这份文档:UIAlertController

  • 尽可能编写足够简单的、描述性的文本标题。
  • 请尽量使用简短完整的句子。
  • 避免让文本听起来上指责、评判或者侮辱。
  • 不要对警报按钮进行解释。
  • 单键警告仅仅具备通知的作用,通常采用有2个选项的两键警告。
  • 给警告按钮以足够简明的逻辑和标题。
  • 在右侧放置常用的选项,在左侧放置取消按钮。
  • 对取消按钮采用正确的文本标签。
  • 对于涉及删除的破坏性操作,应该采用特别的样式标识出来,具体可以参考
  • UIAlertActionStyleDestructive 和 UIAlertAction 这两份文档。
  • 允许通过点击「Home」按钮来消除警告。

6.4、按钮(Buttons)

按钮通常可以用来触发一些特定的操作,具有可自定义的背景,并且可以包含标题和图标。和 iOS 不同,Carplay支持的按钮样式非常有限。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 在按钮标签中使用动词。
  • 保持标题足够简短
  • 仅在必要的时候,添加边框和背景
  • 更具体的开发参考 UIButtonTypeSystem 和 UIButton

6.5、标签(Labels)

标签是推送到屏幕上的一条短消息,这个标签可以显示任意数量的静态文本。在设计标签的时候,尽量保持标签清晰易读。具体开发可参考UILabel

想做好车载设计?先掌握这份 Carplay 设计规范(下)

6.6、导航栏

导航一般在屏幕的顶部,通常导航栏右侧会有返回按钮,中央是标题。有时右侧会有其他的可交互的控件。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 在导航栏中间显示当前视图的标题。
  • 避免在导航栏上放过多的控件。
  • 不要包含多段式面包屑导航。
  • 导航栏标题应该给按钮留下足够的空间。
  • 使用标准的返回按钮。
  • 开发请参考 UINavigationBar 这份文档

6.7、滚动视图(Scroll Views)

滚动视图让用户可以浏览到更多的内容,用户可以用滑动或者轻拂来进行浏览信息。

  • 不要将一个滚动视图嵌套到另外一个滚动视图当中。
  • 通常,一次只显示一个滚动视图。
  • 开发可以参考文档:UIScrollView

6.8、标签栏(Tab Bars)

标签栏通常出现在屏幕顶端,并且用户可以借此快速切换。逻辑上标签栏可以包含无限多的 Tab,但是可见的标签数量,会根据实际显示尺寸而有所不同。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 通常标签栏展现的是平铺的信息层次结构。
  • 选项卡功能不可用的时候,不要删除或者禁用该选项卡。
  • 严格使用标签栏来进行导航。
  • 通常使用 3 个到 5 个选项卡。
  • 使用图标来标示标签栏,会更加通俗易懂。
  • 具体开发可参考文档:UITabBar

6.9、表格(Tables)

表单通常会以单列的样式存在,干净有效地呈现大量信息。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

  • 考虑表单的宽度,避免难以读取。
  • 尽可能快速地显示表单的内容。
  • 在加载的时候,结合活动指示器呈现进度。
  • 具体参考开发文档:UITableView

在具体的表单条目的设计上,也有详细的规格要求。

想做好车载设计?先掌握这份 Carplay 设计规范(下)

默认样式,左侧可放置图片,并且标题也是靠左对齐的。具体参考文档:UITableViewCellStyleDefault 以及 UITableViewCell

想做好车载设计?先掌握这份 Carplay 设计规范(下)

副标题样式。这是包含标题和副标题的一种样式,两者靠左对齐,上下排布。具体参考文档:UITableViewCellStyleSubtitle 和 UITableViewCell

想做好车载设计?先掌握这份 Carplay 设计规范(下)

Value1 样式。标题靠左对齐,副标题靠右对齐。具体参考文档:UITableViewCellStyleValue1 和 UITableViewCell

想做好车载设计?先掌握这份 Carplay 设计规范(下)

Value2 样式。标题和副标题文本都靠右对齐,具体参考文档:UITableViewCellStyleValue2 和 UITableViewCell

  • 保持文本足够简介,避免无法完整显示。
  • 点击选择之后,记得显示反馈。
  • 为非标准表格设置自定义样式。


文章来源:优设 作者:陈子木

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




值得反复学习的「交互设计5大定律」

涛涛

推导

在介绍重新定义的交互设计定律之前,我们先来回顾一下经典的《交互设计 7 大定律》

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

费茨定律告诉我们要节省操作时间应该怎么做:放大目标对象,减小目标距离。

席克定律告诉我们要节省决策时间应该怎么做:尽可能的减少选项的数量。

米勒定律告诉我们人类记忆的上限,所以要将信息数量控制在 4±1 内。

接近法则告诉我们相邻≈相关,所以要根据信息亲密性组织其位置关系。

泰思勒定律告诉我们复杂性是守恒的,我们要平衡复杂性的天平向谁倾斜,以实现整体效益最大化。

防错原则告诉我们用户出错是不可避免的,我们只能减少并降低其犯错的可能性。

奥卡姆剃刀原理告诉我们如无必要,勿增实体,设计要尽量的简约。

不知道你看完以上 7 个定律有什么感受,我的感受是,他们彼此之间有些重合(奥卡姆剃刀原理、席克定律、米勒定律都在传达信息要精简),但用其概括交互设计的精髓,又觉得不够完整(做到这几点就够了吗?),整体交互设计的精髓要义并没有表达地很清楚(如何用一句话来概括交互设计的目标?)

带着这几点疑问,我重新去思考到底什么是交互设计的底层设计目标?到底哪些交互设计定律能更好的体现其本质?以下是我思考的结果:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

交互设计的终极目标是改变和影响用户的行为,达到期望的业务结果,比如下单率、搜索率等结果指标,结果指标因产品而异,不具有普适性,不可一言以概之。而在交互设计的过程中,以交互设计定律为指导的过程指标是通用的,几乎可以说放之四海而皆准,我把这四个过程指标概括为四字箴言:少快好省。怎么理解呢?

  • 所谓少,就是信息功能要精炼,要一目了然,要尽可能减少功能/信息的复杂度。
  • 所谓快,既是性能也是效率,指的是要尽可能快的响应用户的操作,达成用户目标。
  • 所谓好,就是产品的设计必须达成行业一流的设计标准,让用户用的顺手、满意。
  • 所谓省,就是省心省力省时,能够帮助用户节约时间,降低操作和认知负荷。

基于这样的过程指标,我挑选了 5 个设计定律来进行设计指导,下面我们逐一来看。

奥卡姆剃刀原理

奥卡姆剃刀原理告诉我们:如无必要,勿增实体,即“简单有效原理”。对于工业产品适用,对于软件类产品也是如此。因为任何增加的非必要信息和功能,都会带来生产/维护成本的增加,以及用户认知/操作成本的增加。在现今这个注意力稀缺的时代,复杂会让人望而却步,也容易使人迷失,而精简的产品更利于人们的理解和操作。

典型案例:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

小米的电视遥控器设计和传统遥控器设计相比,对奥卡姆剃刀原理的运用非常极致,相信大家都可以感受到精简前后的视觉/操作/认知负荷的降低。

我们再来看一个互联网产品设计的案例:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

19 年初,外销浏览器做了一次视觉焕新大改版,从交互结构到视觉界面变化都比较大,所以我们就增加了新版本的滑屏引导,告诉用户有哪些界面及功能的变化,结果新版灰度期间,信息流渗透率下降了 33%,搜索下降了 18%,经过仔细的数据排查,发现都是滑屏引导惹的祸,当把滑屏引导去掉后,搜索和信息流的数据都恢复正向了。

19 年底,我们做的另一个运营活动也经历了类似的教训。当时锦鲤很火,我们就做了一个锦鲤大作战的小活动,画面精致,奖励也比较诱人,但是发现活动上线后转化率效果却不及预期,我们再次把矛头对准了蒙层引导,通过去掉蒙层引导,CTA 按钮场景化,并增加微动效,转化效果立刻得到了提升。去掉不必要的引导,让界面自己会说话,这也是奥卡姆剃刀原理的一个体现。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

米勒定律

米勒定律告诉我们:人们工作记忆平均能记住的元素数量仅为 4±1。所以我们在设计时,首先要运用奥卡姆剃刀原理,尽可能的去做减法,尽量将数量控制在 4±1 的范围内。如果选项较多,且减无可减时,就需要对信息/选项进行分类和分组,保证类别的数量在 4±1 的范围内。

典型案例:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

对于像手机号、银行卡号、身份证号这种类型的信息,因为其固有的信息长度无法做精简,所以在信息组织时就会采取分组的方式,保证分组的数量控制在 4±1 的范围内。

另一个案例也是关于我们的外销浏览器:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

左一是改版前的页面,功能有 12 项之多,且产品认为减无可减了。我们的交互设计师通过对页面功能使用频度及产品功能的重要程度进行分析,将功能划分为了三大类:重要功能,常用功能,必备功能。然后通过强化、保持和收纳的方式将其进行右图所示的呈现,界面复杂度迅速降低,功能清晰度和操作便捷度显著提升。

多尔蒂门槛

多尔蒂门槛告诉我们:系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。

先来看一组模拟的响应效果:

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

△ 图片来自作者「超人的电话亭」

从这组图片可以感受到,当图片在 400ms 内时,是勉强可以接受的,但当时间延长到 600ms 及以上时,人们就会感受到明显的延迟、等待和卡顿感。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

多尔蒂门槛对响应时间的上限给出了参考,而后续的研究则给出了更细致的响应标准,比如元素的点击反馈应控制在 0.1s 左右,尽量不要超过 0.14s,单个元素入场退场时间应控制在 0.2s 左右(入场一般比退场稍慢),而页面的转场时长根据页面大小和转场动效的复杂度尽量控制在 0.3s-0.4s 之间。只有响应时间符合上述标准,才不会让用户对产品的流畅性有所怀疑。

雅各布定律

用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人的有相同的操作方法和使用模式。雅各布定律告诉我们:作为设计师,我们必须要多研究把玩各种 App,这样我们才能够对当下产品的设计趋势有更直观的感受。

对于新入行的设计师,我会建议大家好好研究一下 ios 和 android 的 OS 规范,了解平台的特性,同时再翻翻下面这些书籍,了解各种常见的设计模式,丰富自己的设计组件库。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

此外,在做某种特定类型的产品设计时,也非常有必要做行业及竞品分析,这样才能确保我们在做产品设计时,可以延续用户的主要视觉及行为习惯,减少用户的学习及使用成本。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

以视频 App 为例,行业内的头部产品在产品框架及元素布局上都具有高度的一致性,这也是雅各布定律的一个体现。

可感知性原则

操作前有预期,操作时有反馈,操作后可撤销。这是十年前我入行时接触到的一句话,我不知道是谁提出来的,但却是这些年我做交互设计最重要的一条参考原则,我将其简单命名为可感知性原则。

操作前有预期,指的是要符合视觉认知原理,符合行业设计习惯,让用户一看就懂。

操作时有反馈,指的是操作时要即时反馈,就近反馈,并且反馈合理。

操作后可撤销,指的是任何操作都尽量让其可撤销,让用户无后顾之忧,安心探索。只要存在用户行为的交互,这个准则都是可以用来检验的,以下图为例。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

当我们想要删除某张照片时:

操作前有预期:工具栏位于默认的底部位置,有删除图标+文字明确示意的功能按钮,让用户一看就知道应该选择哪一项操作。

操作时有反馈:点击删除按钮时,删除按钮有一个灰色的点击态,随后马上出现一个确认弹窗,而且是就近位置出现,确认弹窗上提示简单,按钮用的是 CTA 的形式,操作交互一目了然。

操作后可撤销:当用户确认删除后,照片消失,但是还可以去最近删除的文件夹中,恢复照片。

结语

到这里,交互设计 5 大定律就全部介绍完成了,围绕交互设计的过程指标,少、快、好、省依次展开,给大家介绍了奥卡姆剃刀原理、米勒定律、多尔蒂门槛、雅各布定律、可感知性原则。

值得反复学习的「交互设计5大定律」,一篇带你全部学完!

也是为了满足米勒定律的 4±1 原则,我将交互设计定律浓缩成了 5 条,如果在此基础上加一条的话,我会在「好」的指标下,增加一条「格式塔原理」,它包含的 7 大设计原则。格式塔原理是做设计排版的基石,绝对值得所有设计师反复学习、研究和运用。

文章来源:优设  作者:VMIC UED.Joyce

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

微信朋友圈被“折叠”,透露出怎样的产品设计思路?

涛涛

微信作为一个用户体量庞大的一个熟人社交平台,在我们日常生活和工作中都会用到;而微信经过不断地发展也更新了很多新的社交功能,并且具有商业价值,朋友圈也是其中一个;本文作者分享了关于微信朋友圈被“折叠”的产品设计思路,我们一起来看一下。

最近微信朋友圈被“折叠”的设计引起了网友热议,褒贬不一。

有的人认为每天不用被铺天盖地的刷屏广告“淹没”了,有动力多刷一会朋友圈,终于有机会在茫茫广告里找到朋友的动态;但也有反对的声音,认为微信管的太宽了,如果不需要看,用户早就主动“屏蔽”了,希望微信团队可以改回来。

微信背靠10亿用户,每一个小的设计改动,都有可能引起“全民轰动”;面对如此庞大的用户群体,以及千人千面的需求,微信团队表示:

“朋友圈是用户分享和关注朋友们生活点滴的空间,一直以来批量或高频次发送营销性信息的行为,存在侵扰用户安宁、减损用户朋友圈体验的问题,(因此)被较多用户投诉。”另外,团队还表示:“根据《微信个人帐号使用规范》,此类内容(营销信息)一经发现,腾讯将根据违规程度对微信帐号采取相应的处理措施,包括但不限于折叠内容、将内容处理为仅发布者自己可见等。”

当产品面临质疑时,如何从众多的声音中,抽丝剥茧,删繁就简,找到与产品定位真正匹配的核心需求?通过下述三方面思路分析,我们一起来看看要如何抓住产品的核心用户。

一、共情

解读他人的真情实感,即为共情,又叫做同理心,是体验他人内心世界的能力。

它包含三个方面的含义:

  • 观察、收集用户的言行举止,深入用户内心去体验他们的情感和思维;
  • 透过用户的经历和个性,理解他们的本质性需求;
  • 运营设计语言和信息传达技巧,把对用户的共情传达给用户,并影响用户取得真实反馈。

最近娃哈哈集团和斗罗大陆热门IP联合,推出新版低糖风味酸奶饮品,深度共情年轻消费群体。那么,他们是如何做到的呢?

结合了腾讯视频热播国漫《斗罗大陆》最新剧情,女主小舞“献祭”而死,而广告恰恰演绎了,喝了酸奶饮品小舞即刻“元气回归”。

首先对观众遗憾的心情,给予及时“补偿”;其次,运用广告语言,分别让男女观众产生强烈的带入感,比如:

  • 小舞说:“哥,你真不愧是唐门营养师”。(满足男性用户的成就感)
  • 唐三说:“每一种滋味都是为你”。(满足女性用户的安全感)

我们在来看看小红书上面的部分评价内容,提到剧情、口味,低糖、适合谁喝,颜值高,均透露出对饮品的关注和喜爱。

娃哈哈集团借用《斗罗大陆》IP作为桥梁,将用户渴望找到安全感、成就感的自我体验,寄托在自己的产品上,叫做“心理投射”式营销。

所谓“心理投射”说得直白一些,就是“借物传情”,“借景抒情”,人们把自己内心的感受和内容,通过客观世界反应出来;因此,常常可以从一个人对他人对看法、以及自身的兴趣爱好,推测这个人的心理特征和意图,而不仅仅通过语言来解读他们的需求。

二、不自觉欲望

在访谈的过程中,提问是研究用户动机的可行性方法之一,但访谈不仅仅是语言交流,还包含肢体语言、微表情以及隐藏在内心深处的冲突和欲望,这些需求属于用户的不自觉欲望。

如果说自觉欲望是用户清晰的知道自己想要什么,那么不自觉欲望,就是连用户自己也说不清,道不明的欲望;如果把用户的自觉欲望比喻成冰山表面,不自觉欲望就是冰山深入海平面以下的部分。

比如,明知道吃蛋糕要长胖,但是还是忍不住要吃;明知道熬夜对身体不好,但是还是忍不住刷手机到午夜。

那种“忍不住”的感觉就是人们最深层的需求,吃甜食、刷手机可以让人心情愉悦,让人产生放松的感觉;而“控制”需要人们用意志力去规范,而非出于“本性”。

娱乐性产品重在激发人们的不自觉欲望,释放本性,比如《和平精英》为了让新手尽快融入游戏,自动匹配“机器人”和玩家战斗,让玩家赢得“很爽”,等玩家对游戏产生情感依恋,再逐渐增加和真人匹配的战斗。

而教育类产品要运用用户本性,鼓励用户形成良好自律性;比如在记单词第一天,写下学习计划并鼓励分享出去,在为用户细化目标的同时,“分享”行为形成一种“自我形象压力”,设计者撬动用户内心,向往自己变得更好的本性,慢慢让用户形成学习习惯。

三、透过数据看本质

以上我们从“释放-压抑”的纵向深度上讨论了用户面对自己欲望的处理方式,接着,我们在“自我-适应”的横向纬度来看看用户的处理方式;在社会中,人们在归属群体和独立自我之间进行权衡,两者向来也是此消彼长的关系。

比如,年轻群体在选择“追求自我”还是“适应环境”方面,也有了新的突破和巧妙的和解,具体体现在95后大多属于独生子女;他们是互联网最原始的居民,童年伴随着网上社交一起成长,更乐于在互联网上寻找志同道合的朋友,而非身边的熟人社交;形成一种“独而不孤”的社交氛围,在“独处”和“融入”环境方面相得益彰。

通过上述纵横两个纬度的标尺,我们可以建立消费动机分析模型,来解读大数据行为标签背后消费群体的渴望。

以B站为例,通过分析B站用户的兴趣标签,“顺藤摸瓜”式的洞察B站用户群体的核心需求;数据清洗后,我们收集到以下12个纬度的兴趣热门标签:

游戏高玩、漫画达人、生活记录、音乐家、好奇心学霸、吃货军团、时尚潮人、运动健将、铲屎官、数码发烧友、爱豆粉丝、汽车科技。

根据对上述兴趣的理解,每个标签可以按照如下表格进行拆分解读,最后对每种倾向进行统计。

合计出心理动机倾向最明显的三个象限是:乐享释放、融合沟通、活力探索。

而这些心理特性,正是符合B站作为24岁以下,年轻用户最爱的,文化社区的产品定位,把B站打造成用户释放自我、融合沟通、活力探索的平台。

B站的激励机制,极大鼓励up主的创作细胞,同时开发了他们探索的内在需求,为B站产出海量内容;而这些内容更好的满足了广大用户乐享释放、融合沟通的诉求,形成“自产自销”的良性循环。

2020年,B站弹幕频率出现最高的词语是“爷青回”,折射出年轻群体对青春、活力生活的渴望与留念;它频繁出现在B站弹幕上,也从另一个侧面反应出在B站是可以让这样的情绪栖息的场所,是B站深根目标用户,并获得良好反馈的体现。

四、基于情感共鸣的取舍之路

最后,我们再来看看陪伴我们每个人的微信,产品定位很明确的指出是:“用户分享和关注朋友们生活点滴的空间”,旧版微信的开屏画面,暗示着“孤独”的个人与世界“相连”的深深渴望。

而刚刚升级的8.0版本,开屏动画简单的几句:“我看见你,我看见笑脸,我看见烟花,我看见一首歌,我看见你看见的”迅速让用户产生共鸣感,拉近产品和用户之间的距离,激活用户的“有你陪伴不孤单”的不自觉欲望;而新功能鼓励用户分享情感,情感外化的设计也很快上来热搜。

朋友圈自动折叠的内容,通常是用户直接复制、粘贴的内容;对于众多微信创业者来讲,思考如何做出有个人特色IP的朋友圈,想办法不断输出优质内容来打动你的朋友,才是事业成功的制胜法宝。

微信团队在庞大的用户群体中,做出与产品定位匹配的“取舍”决策,也将对产品的稳定发展,具有深远意义。

文章来源:人人都是产品经理  作者:设计师的翻车日记

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


二次确认的设计思路

涛涛

二次确认的主要作用是防止误操作,以及警示操作带来的后果,避免用户无意之间执行了本不想做的操作。从用户流程图中我们不难看出,二次确认是一种打断用户流程的设计,只是迫不得已的折中方案。所以在是否使用,如何使用上需要有一定的考虑,否则会适得其反。

从这3个方面,帮你掌握二次确认的设计思路

我们可从操作的可逆性,严重性,复杂度和操作频率进行前期分析,即用户的操作是否可以撤回,是否会造成严重或有涟漪效应的后果,是否经常做这样的操作。下文将操作的危险程度分了三个级别,对不同类型的二次确认模式进行说明。

低危操作

对于低危操作我们可以不设置二次确认,或只在危险程度升高时再和用户确认。

1. 操作基本无害,不设置二次确认

一些非常常规,很好注意到变化,或者容易回滚的操作无需配置二次确认。例如新建文件夹,复制文件,完成一个代办事项等。

从这3个方面,帮你掌握二次确认的设计思路

2. 达到危险性后再进行确认

这种场景比较特殊,我们用一个例子说明。比如当用户处于一个有两层级别的托盘,第二级的新表单没有完成填写,就点击了表单托盘的关闭按钮。我们可以让页面滚动到用户没有完成的地方,通过条幅提示,标红或闪烁等交互方式提醒用户。按照此时危险级别,我们仅需采用低强度的沟通方式,让用户明白操作的问题即可。

从这3个方面,帮你掌握二次确认的设计思路

然而假如用户点击的是浏览器的标签页关闭按钮,其危险级别就很高,系统很可能抛弃用户未完成的表单导致数据丢失。此时我们可以通过前端技术,在用户点击浏览器的刷新或关闭按钮时,弹出二次确认对话框。

从这3个方面,帮你掌握二次确认的设计思路

中危操作

日常的一些操作,如提交表单,删除文件,发送交易等,若被用户在没有明确后果的情况下执行,会造成难以补救的不良影响,但后果不至于完全不可挽回。我们可以在此危险范围内,配置不同形式的二次确认流程。

1. 即时撤销

撤回提醒一般针对操作频率高且容易回滚的操作。例如在线上网盘删除或移动文件后,通常会弹出一个 toast 提示,告知用户成功执行了操作,并显示“撤回”按钮,让用户在误操作时可以快速回滚。

从这3个方面,帮你掌握二次确认的设计思路

2. 提示信息

提示信息是二次确认最常见的一种,适用场景广泛。系统会在用户执行操作时打断,提示后果并询问是否继续。其界面表现形式比较丰富,例如购物时的结算账单页,转账时的确认页,退出程序时的文件保存弹窗等等。

从这3个方面,帮你掌握二次确认的设计思路

3. 垃圾桶或类似的临时承接结构

临时承接结构适用于有不良后果但操作频次高的场景。如果用户经常需要做一些有破坏性的操作,我们可以在系统中布置一个用来临时承接这些操作的结构,而不直接执行破坏性操作。如此设计有两个优点:用户不仅可以随时反悔,而且避免了系统总是打断用户的高频操作。

从这3个方面,帮你掌握二次确认的设计思路

例如大部分操作系统删除文件时只是将文件移动到垃圾桶,并不会造成实质伤害。二次确认只会出现在用户需要清空垃圾桶时。这便通过临时承接结构缓冲了用户的破坏性操作,同时避免了频繁打断用户。

高危操作

执行后果极其严重且无法挽回的操作,例如删除账号,删除虚拟币钱包,抹除设备数据等时,系统需要用户仔细想清楚,完全理解即将发生的事情并接受后果,此时可采用拦截性强,步骤多的确认方式。但请务必注意,即将列举的几种设计会给用户带来一定程度的挫败感。除非万不得已,尽可能考虑上文中的设计方式。

1. 按钮倒计时

在确认按钮上倒计时,给用户一段冷静的时间,倒计时完成后按钮才变回可用状态。

从这3个方面,帮你掌握二次确认的设计思路

2. 多次询问

多次询问是一种较为粗暴的确认形式,通过不断地警告让用户确认。大家可能依稀记得苹果手机的重置流程:首先需要输入苹果账号密码和设备密码验证身份,再通过两层二次确认弹窗,系统才会开始抹除数据。

从这3个方面,帮你掌握二次确认的设计思路

3. 勾选并接受后果

将说明部分拆解成复选框,用户依次勾选并接受后果之后,执行按钮才会变成可用状态。通常用于有严重或复杂连带后果的操作。例如删除虚拟币钱包时,软件会让用户接受:未备份密钥的资产将永久丢失;没有服务商可以找回资产;软件方不承担任何连带责任。

从这3个方面,帮你掌握二次确认的设计思路

4. 输入操作对象名称

常见于底层目录的删除等操作。用户需要正确输入操作对象的名称才能执行,步骤较为繁琐,非常耗费用户精力,但很大程度上可以规避用户操作错误的对象。

从这3个方面,帮你掌握二次确认的设计思路

5. 冷静期(非二次确认)

当注销脸书等账号后,服务会将账户信息继续保留一段时间,若冷静期内用户重新登录,账号信息会自动恢复。冷静期的设计原理和 2.3 节介绍的临时承接结构有异曲同工之处,其并不属于二次确认的范畴,但针对高危操作给予了用户反悔的余地,故补充在这里。

从这3个方面,帮你掌握二次确认的设计思路

注意事项

无论是从人本主义还是功能的角度,二次确认都应让用户能够快速理解弹窗的意图并作出判断,减少使用中的挫败感。下面罗列了一些能够提升使用体验的设计点。

1. 文案的编写

无论是从人本主义还是功能的角度,二次确认都应让用户能够快速理解弹窗的意图并作出判断,减少使用中的挫败感。

标题文案为简明的疑问句。

用户映入眼帘的应是一个问题,也就是程序为什么打断了用户,需要用户确认什么操作。同时标题的内容不宜过长,对操作后果的详细解读可作为描述信息放到弹窗内容中。

从这3个方面,帮你掌握二次确认的设计思路

不要强加说明语句。

尽可能减少常规型二次确认打断用户的时长,如果能够用一句简单的标题讲清楚,则无需增加说明,让用户快速理解,快速决断。

从这3个方面,帮你掌握二次确认的设计思路

按钮文案指明操作后果且无歧义。

有些操作比如“取消订单”中包含了“取消”一类的字眼,为避免歧义,按钮的文案应尽量不使用“确定/取消”。可将操作带来的后果直接写在按钮上,减少误会。

从这3个方面,帮你掌握二次确认的设计思路

2. 避免滥用

在设计时不仅需要从操作的可逆性,严重性,复杂度和操作频率来考虑配置何种形式的二次确认,甚至绕开或不配置二次确认,尽可能减少对用户的惊扰,否则不仅降低体验还可能会让用户忽略真正的威胁。这里举三个日常很容易接触到,通过流程优化避免了二次确认的例子:

免密支付:

用户可以设置在一定数额范围内转账时不进行密码确认。在此数额内的交易即便发生异常,损失也比较轻微,而且平台可以帮助追回。

从这3个方面,帮你掌握二次确认的设计思路

草稿:

当用户在聊天软件的对话中输入了内容,或是在邮件服务上新写了邮件,但没有发送就退出了程序,用户重新启动后,大部分聊天或邮件服务会以草稿的形式将写入的内容保留下来。既避免了退出时的二次确认,也没有造成数据丢失。

从这3个方面,帮你掌握二次确认的设计思路

底层的版本控制功能:

苹果电脑的操作系统内建了文档版本控制功能,用户关闭文档时系统不再询问是否需要保存,因为文档每隔一段时间就会在后台自动生成一个版本。用户可以随时回滚到旧版本,甚至从旧版本中拷贝内容。

从这3个方面,帮你掌握二次确认的设计思路

结语

与任何界面设计的原则相同,二次确认的设计重点仍然是人文关怀。要让用户从容使用系统的同时,避免触发无意的操作。本文的由来在于做项目时发现目前网络上对二次确认模式的讲解大多偏理论,所以后期对该界面模式做了一些梳理并分享出来,希望有帮助到大家!

文章来源:优设  作者:京东设计中心JDC

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端产品设计的潜规则

涛涛

那些关注用户体验的人们经常问我一个问题:什么是B端的用户体验?它与C端的用户体验有何不同?作为一名过去5年多主要从事B端IT产品的设计师,在这里给大家讲述一些我的想法。

首先,B端产品通常有2种类型:企业内部产品(Internal Solutions)和企业对企业的服务产品(B2B)

企业内部产品的用户体验设计有一些独特性:

 

你的工作(可能)永远与你的作品集无缘

很遗憾,几乎所有企业内部产品或项目都被严格的保密协议(NDA)保护着。

绝大多B端项目都是为特定用户提供的专门内部流程。这意味着除了那些每天盯着它用的用户,其他任何人都可能不会看到你的设计。即使你设法获得了将其放入自己作品集的权限,也需要抹掉所有敏感的数据才行。

不过幸运的是,大多数有足够能力来构建自己的定制IT解决方案的公司通常规模很大,而且它们的品牌可能带有足够的“影响力”,这样,项目身价得以抬高,也能让设计师进入面试的下一步流程。

 

测试对象虽然意愿很高,但总是很忙

设计企业内部所用产品的优点:你的未来用户将会是你的同事们。因此,在进行可用性研究时,你无需担忧任何层面的法律问题。另外,由于大多数内部项目都是为了优化和改进现有的工作流程,你的用户往往会非常愿意配合你的调研工作。因为设计不当的产品让他们的工作饱受折磨,因此尽早获得反馈对他们来说是最有利的。

但这其中的弊端是,由于你的同事们需要平衡全职工作,你很可能无法占用他们的宝贵时间。如果你能解决这个问题,他们通常会提供比您预期更多的反馈。

 

 

关于B2B的一些潜规则

您可能无法(完全)满足最终用户

对于C端产品,如果太丑或不好用,消费者可以拒绝使用。而B端产品即使学习成本比较高,但企业仍然可以“命令”所有员工学习这些用于开展业务的专用软件。

B2B产品最终将出售给业务决策者,然后再推给(最终)用户。他们更关心的是量化提升效率(efficiency)和安全性(security)同时预防错误(preventing errors)。大多数组织都在寻找一种解决方案来替代和/或优化现有流程。

这并不是说企业软件不应以用户友好为目标,但通常情况下,只要能够实现某些被企业视为至关重要的目标,其他能省则省。对底线(bottom line)的影响有时会成为最重要的因素。

全球各大企业的用户体验设计领导者仍在争夺一席之地,以证明优质设计的价值。不幸的是,许多企业的用户体验设计师只能在满足业务目标、技术要求和用户需求之间无奈徘徊。

像在大多数项目中一样,在企业领域里,如果可以证明更好的用户体验可以量化地提升生产率,比如可以节省金钱,这样你就有了一个绝佳的机会和挑战。

 

被“鲸鱼用户”左右

如果你在B2B领域工作,可能会很熟悉“鲸鱼用户(whales)”的概念。通常,他们是带给我们最多收入的客户,因此在某个特定产品的路线图中拥有极大的影响力。由于较少的鲸鱼用户简化了需求收集和确认过程,有时你的工作会非常顺畅,但不幸的是,这也可能导致你忽视掉很大一部分用户群体的意见。

我们见过诸多“被需要”的功能看起来并不适合大多数工作流程的案例(因为这是鲸鱼用户的特性)。通常,决策只是为了“去执行”,因为销售团队已经在下一个版本中承诺了这一点,而这个核心客户占产品收入的40%。这通常会使得产品对于其他用户而言就有些随机且不合逻辑了。

通常而言,在设计师进入管理层之前,他们很难影响到销售团队等强大的利益相关者的决策。潜在的利益冲突无疑是需要整个设计团队共同去面对的,大家需要平衡产品的长期愿景和立竿见影的“快速制胜”二者之间的冲突,以便为产品提供可拓展的设计和构建道路。

 

企业总是在旧版系统上运行

几乎所有财富500强的公司都是通过并购而成长为庞然大物的。

每一次的并购,都会将一个完全不同的系统和工作流程修补到现有的系统和工作流程中。很多开发于90年代的软件仍在诸多大型公司中运行。尽管从概念上看,“整合一切(consolidate everything)”似乎很容易,但是协调数据库和系统的过程着实很繁琐,且需要足够的时间。

B端用户体验的大部分工作是将用户从一套旧版(有时是手动)的工作流程中解放出来的艰巨工作。这涉及到对用户目标及多个系统的深入了解,需要我们列出规划,识别冗余和协同效应,然后将其与边缘案例相结合,以检验它产出的结果是否与当前操作模式的产出一致(如果不能优化的话)。

尽管过程并非总是如此艰难,B端软件依旧比C端复杂得多,因为即使其概念是“从0开始做新系统”,其数据还是全部来自于一堆与之配套的旧系统。在系统级别上思考流程、提出正确的问题并有效记录文档的能力是此类项目中最有用的技能。

我不是开发人员,所以我不知道我从Google里找的这张图片是否是能够准确展示典型的后端体系结构。

我所知道的是,对于每个项目来说,开发人员都会创建一个外观相似的图表,该图表展示了数据的来源和去向,它非常复杂,并且在提取,存储和推送数据时可能受到一系列限制。

 

条款和规则

大多数企业或组织需要遵循一套严格的政策法规,并且通常受到各种管理要求的约束。

常见的例子包括:法律/隐私要求(例如GDPR),国际化要求(例如日期格式,语言),无障碍(例如WCAG&ARIA),安全性等等。

这些规则中的每一条都来自于某领域的专家、某类别的检查清单(checklist)抑或是一系列更为模糊情景下的最佳实践(这些实践基于特定的方案和用例)。C端APP监管日渐常规化,同时,由于诸多企业或组织掌握的敏感数据极具货币价值,其受到的监管和审查也在不断增加。

当然,这个问题的答案显而易见,你的确切问题是存在第三方解决方案的,但是由于某些规则或规定,你可能根本无法使用它。

由于必须满足很多这样或那样的标准,对于用户来说,最终的设计往往不太理想,虽然乍一看可能并不明显,但这也是历史上许多政府软件的设计看起来很蠢的原因之一。

 

慢慢改进

与上面的观点类似,B端产品用户的独特之处在于他们对变化的抗拒心理。这意味着你需要认真思考工作流程改变后的结果,诸如使用不同的颜色,或是调整页面内某个按钮的位置等简单变化。

我们甚至还没有谈及信息架构。当你开始做信息架构时,卡片分类研究可能会告诉我们现有的导航设计是完全错误的,或是导航里的某些分类实际上应该嵌套到其他地方。不过你很快就会发现,当实际执行这些变化时,你将面临巨大压力。

知道何时依赖自己的研究和专业知识,何时推进,何时放慢步伐是很关键的,这样你才可以避免疏远过多的用户。毕竟对于这些用户来说,过去几年的工作流程已经根深蒂固,他们需要时间、资源和指导来学习或重新学习这些系统的使用。

尽管他们可能会拒绝改变,但这绝对不代表我们作为UX专业人士就无法引领他们拥抱变化,我们要做的便是了解他们的痛点并在设计时时刻考虑到用户的最大利益。

 

信息密度

许多旧版的B端app产品都有一个共同点,那就是它们的信息密度非常高。

理想的解决方案也许是隐藏所有不必要的信息,仅显示刚需的信息,但是“隐藏掉错误内容”的风险可能非常巨大,以致于不得不将其保留在不断增加的的实体屏幕上。

这就容易导致打包的屏幕设计极大增加了用户的认知负担。而这些负担之所以被用户“接受”,就是因为他们必须且只能“学习”如何使用该软件来完成工作任务。

此外,对于许多管理或监控类的产品,用并别模式查看信息进行比较和参考是非常重要的。复杂的非线性(Complex non-linear)的工作流使得界面设计更具挑战性,因为许多选项都需要既可随时访问又不能妨碍其他操作。

有个很好的例子:为什么Bloomberg(上图)的UI看起来比Robinhood(下图)复杂1000倍?

结论便是,B端产品的界面里,需要牺牲留白空间以展示更多信息的情况并不少见,因为用户经常需要查看更多信息以便完成更复杂的任务。

 

你的机遇

随着公司或组织越来越依赖技术,B端产品的用户体验设计将成为许多公司的主要竞争优势。

如果你具有拥抱复杂性、平衡多个利益相关方观点,并在约束内进行创新的能力,你便能轻而易举的杀入B端软件设计领域。

随着机器学习等诸多振奋人心的新技术出现,各种业务会带着其庞大而杂乱的数据库排队等候。UX将站在如何产生有价值的见解的最前沿,以便弄清用户想要从这些数据中获取什么以及如何对其进行操作和访问。

虽然在很长一段时间里,dribbble(追波)上的精美视觉设计仍将占有一席之地,但更繁重的任务还会落在那些不起眼的B端设计师身上:比如设计电子表格、数据集、草图原型、投入调查以及数小时与用户和利益相关者的交谈和测试。

最终出现在用户面前的内容可能并不完全整洁和简单,但请你相信,在成为备受瞩目的明星B端产品前,其每一处基准点都经过了UX设计师的严格审查。我们的用户已经全力以赴地使用这些产品努力工作,我们的产品也通过清除一些障碍来减轻用户的负担,这已经很不错了。

翻译:April.H  审校:戴猫子 |   UXRen翻译组 #366译文
作者:Yichen He
原文标题:《Designing for enterprise vs. designing for consumers》

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

信息容器的归类与应用

涛涛

信息有各种形式,图、文、视频、音频等,而承载信息的形式也多种多样。
本文意将信息容器进行整理归纳,以总结出一些经验规律。



Part 1

————————

信息容器的概念


信息容器是承载信息的载体,位于内容层。要理解信息容器的概念,首先要理解界面中的层级关系。一个界面除了竖直方向和水平方向维度,还有纵深维度


从底层(远离用户)到顶层(靠近用户),基本上可以分为以下几层:

  1. 背景层

  2. 信息层

  3. 局操作(各种常驻于屏幕的bar、悬浮按钮等)

  4. 浮出层(模态类型的浮出层还需要有蒙版进行隔断)



本文要讨论的“信息容器”,指的是信息层上,装载信息的载体。信息的类型多种多样,可以是文字、图片、视频、各种操作控件等。




Part 2

————————

信息容器的常见类型


常见的信息容器主要有2大类:列表卡片


在整理案例的时候,我不禁产生了一个疑问,到底什么是列表,什么是卡片?如何界定和区分两者?这个问题乍一听有点无厘头,列表不就是列表吗,多个布局一致的狭长单元组合在一起,就形成了列表。那么什么是卡片呢?和屏幕两侧保持一定间距,带圆角的就是卡片吗?


我们不妨先看看下图案例:




2.1 列表和卡片该如何界定?

为什么类似的布局形式,上图中,图1给人感觉是列表,图2给人感觉是卡片,图3既像列表又像卡片?

从内容层面来说,包含的信息类型有:文字、图标/图片、按钮。几乎没有太大区别。

是什么导致我们观感上的不同呢?

电商案例也许可以给出答案。



从电商产品的商品列表页中可以看到,用户可以自主选择两种不同的商品展示模式:列表模式卡片模式

这两种模式几乎可以对应“列表”和“卡片”两种信息容器样式。完全一致的信息量:主图、标题信息、价格信息、辅助信息,相似的展示效率(一屏展示约4.5个商品),不同的信息容器展示形式给人不同的感觉。


单纯从信息层面或者视觉层面都不能界定列表和卡片,如果多维度叠加限定又太繁琐,因此本文给出的列表和卡片直接的区别界定是:可以自主定位关键线索,规划视觉浏览动线。如果视觉浏览大方向是竖直的,那么就归入列表范畴,浏览动线不是竖直而是折线的,都算在卡片范畴。



2.2 常见的信息容器分类:

除了上面说的,最常见的两类信息容器:列表和卡片之外,还有另外两种形式,分别是:无容器和复合容器。

这些容器具体有哪些特点,我们一一来看。






Part 3

————————

列表


列表的定义:将结构一致的信息单元在竖直方向上铺陈下去,形成的信息集合。

不同场景要呈现的信息侧重不同。


举例几种常见的列表形式:

  1. 用户/消息列表

  2. 图文列表

  3. 功能列表

  4. “卡片型”列表


3.1 用户/消息列表

用户/消息列表的内容结构很清晰,头像+身份+内容提要+辅助信息。

图片天然地比文字更具有吸引力,视觉上的优先级排序是头像>身份>内容提要>辅助信息。

当然用户可以很方便地选择关注的对象是图片还是文字,这体现了列表的优越性,浏览动线竖直,可以方便用户根据自己想要的索引快速定位。


这里值得讨论的是头像用方形还是圆形的问题,相信大家都想到过这个问题,同样是社交产品,qq是圆头,微信是方头,这里边有什么原因呢?

本文尝试分析一下,仅是个人意见,欢迎讨论。



按照理论,圆头亲切的形状感知更加适合轻松基调的产品,方头严谨的形状感知更加适合严肃基调的产品。这解释了电商类型产品(淘宝、京东)的信息通知一般都是圆头的,匹配轻松愉悦的网购体验,而金融类产品(支付宝)多是方头。对于同是熟人社交类产品的微信和qq来说,qq用户层年龄偏低,属性相对更加活跃,更加轻松的圆头可能更适合此类用户。


以iOS为例,当用户向左滑动列表时,呼出针对该列表单元的操作。具体列表对应具体操作,操作项数量不同。


方案A:

优点:操作底板宽度适应文案,不会出现空间局促的现象。

缺点:当文案字段长时,列表被推出屏幕外的内容较多,当用户操作分心时,可能会忘记正在操作的对象,虽然这种情况极少发生。


方案B:

优点:操作底板固定,文案折行规则明确,既不会造空间拥挤,被挤出屏幕外的列表区域可控。


方案C:

优点:搭配图标,视觉更丰富。

缺点:图标占据了一定高度,导致文案无法折行,列表被推出屏幕外的内容较多,与方案A类似。


综上,个人认为方案B是最合理的,对于文案长度的宽容度高,即便文案较长,也可以保证视觉和谐,并保留较多列表内容。


用色策略上,使用的是为大众所接受的“语义色”,一些具体的颜色在长期经验积累中形成了固定的语义。


当用户触发了带有一定破坏性的操作时,需要用户进行二次确认

并不是所有情况都需要二次确认,二次确认的样式也有多种。


同样都是模态视图,要表达的信息也相似,都是要求用户进行选择,为什么有些产品选择将对话框居中,有些产品选择将对话框放在底部?这里涉及到关于模态视图的相关知识点,本篇文章旨在讨论信息层面的内容,模态视图涉及到了浮出层的内容,将在下篇文章中进行详细探讨。本篇文章不做过多延展。



3.2 图文列表


信息流产品一般是由图片+重点文案+标签(可有可无)构成。

不同性质的产品想要突出的重点不同,根据内容的重要性权重来分配视觉占比。


从上方几个例子中我们可以看到:

在图文比例从左到右依次提升;

图文布局案例1-3使用了左文右图的方式,案例4-7使用了左图右文的方式。


搞清楚如何图文布局和设置图文比例,就基本解决了资讯流页面最关键的问题。



资讯列表或称feed流,主要根据用户喜好定向推送内容。除了从用户日常浏览、搜索等行为中提取用户喜好信息,用户主动反馈的信息精度更高,用户不惜花费更多操作成本来提示产品,对内容不感兴趣。


从视觉上说:

1、提交反馈的入口(小而浅的icon)都不明显,有些产品用“更多”来提示用户,有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时,才会注意到屏蔽入口。常规浏览时,该图标不会影响用户注意力。

2、反馈形式采用模态对话框,用户需要选择具体操作,是屏蔽内容或作者、还是举报或不感兴趣。

3、对话框是否有指向性:从表意明确的角度上来说,带有箭头的气泡更有利于用户定位对象。


从交互上说:

反馈入口热区较小,容易误触,大多数情况下,用户不会注意和点击该图标,用户是以浏览为主要行为。




3.3 功能列表


列表索引一般还是定位文字为主要形式,不同用户的认知水平不同,图标表意始终是一大难点,多用为辅助记忆或单纯提升视觉美观。图标虽然是体现设计风格的重点,但是在具体情境下,如设置页,用户更加在意快速找到自己要找的内容,多度的图标样式,实际上会折损用户的检索效率。


一般功能页面或放置许多功能,常常会超过十几项,这种情境下,检索效率低下是一个痛点。

如何提高检索效率?—— 分组



分组给用户提供了认知线索,根据格式塔原则,用户总是倾向于把距离近的、样式统一的元素归位同类。

毫无分组显然对于检索是不利的,用户需要逐一浏览,该情况适用于列表项无法分组时,如果有分组条件,务必分组,帮用户节约筛选成本。


UI界面中,列表的分割方式常见的有以下3种:

  1. 线条分割

  2. 块面分割

  3. 间距分割



3.4 “卡片型”列表

在我们的固有观念里,大圆角,不通栏,有投影的形象就是卡片。

这种样式也越来越盛行,许多产品尝试将列表也用“卡片化”进行包装。

虽然是相当细节的点,但是精细化处理之后的结果就立刻会与批量化处理的结果拉开差距。

产品级的风格统一来源于点滴细节。





Part 4

————————

卡片


卡片的类型繁多:单列大卡片、泳道、内容流(两列网格、瀑布流)、宫格


4.1 大卡片

从内容展示效率上来讲,单张大卡片就占据占据屏幕(刘海屏)超出一半的高度,用户需要不断滑动屏幕浏览下方内容,操作成本较高。大卡片形式对内容本身,如图片的质量要求很高。这种模式常见于图片社区或垂类电商产品,图片社区(如躺平)本身较为小众、即便是UGC(用户产生内容)单元,用户上传的图片素材平均水平也较高,垂类电商(如Nike)图片品质由编辑控制,质量高且稳定。以上类型产品不以量吸引用户,用户往往更加在意内容本身是否优质。用户没有带着明确的目标,心智更加类似于浏览杂志。产品提供什么内容,就进行浏览。从上方案例可见,除了微信读书之外的3款产品首页都没有突出搜索功能,而是以信息流呈现为主。


与列表分割一致,卡片也有对应分割方式。


大卡片占据屏幕面积大,理论上大卡片的内容质量是经审查的。部分产品不存在大卡片容器的交互,点击卡片直接进入详情页。部分产品通过比较低调的方式向用户收集对于内容的意见。如微信读书长按卡片,可以选择不再显示该卡片内容,产品收集反馈,对于用户喜好的描述可以进一步具象准确。长按不是一个高频手势,用户触发该手势往往是试探性的,代表用户确实对于内容有意见要传达。躺平使用了简约三小点样式的“更多”图标来收纳不常用的收藏和举报操作。




4.2 泳道

何为泳道?顾名思义,常见的滑动手势是上下方向滑动,但有时也会出现横向滑动的情况。一系列对象在一条横向轨道内左右滑动,该类型的形式组合在一起,就好比泳道赛道一般。


可以横向滑动以查看内容的呈现形式,称为“泳道”。泳道可以有多种形式。



停止位置随机:

内容与手势相关度高,比较自由,但停止位置随机,不能保证停下后用户能完美看到当前卡片的所有信息,需要用户微调卡片位置。


停止位置固定:

根据用户滑动速率,模拟物理惯性和摩擦,判断最终展示哪张卡片,并将卡片呈现在屏幕中部,确保卡片上的信息都可以读取。这种交互更加合理,给滑动设置卡点,类似banner效果。




4.3 双列卡片

双列卡片可以看成是大卡片(单列)的另一种表现形式。这种形式更加提高了空间利用率,对于单一信息展示更加克制。平衡了效率和效果,是电商、图片社区、视频等产品类型的首选表现手法。


双列卡片可以细分为两大类:

卡片流(对齐)瀑布流


卡片对齐:

优点:规整统一,视觉动线清晰,浏览舒适。

缺点:对主图尺寸要求高,确定的比例会对商品展示有一定局限。


瀑布流:

优点:图片尺寸宽容度高,满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。

缺点:不容易进行比较,若要进行图片间的对比,比较困难,视觉动线混乱。



两列式的卡片布局需要注意内容层与背景层的区分。

大多数产品的背景层是浅灰色,内容层是白色,色差可以建立区分。部分产品背景层是白色,或者说取消了背景层的概念,那么要建立卡片之间的区分,就需要通过间距或者卡片加底色的方式。


个性化推荐模块对电商产品尤其重要,准确地将用户可能感兴趣的产品推荐出去,可以减少用户的搜索、筛选步骤,提升购买效率和愉悦感,从而提升用户对产品的评价。因此,不断收集用户的喜好相当重要,尽管各种算法已经让产品显得越来越智能,但依旧要给用户留下提建议的入口。

上文介绍了资讯类产品中,用户如何给出对于具体信息的反馈,电商类产品原理也大同小异。


从功能上来说,淘宝、闲鱼、京东,都是通过用户手势(点击图标或长按卡片或两者皆可)来呼出选项,用户通过选择来表达意见,从而使推送更精准。


从视觉上来说,淘宝和闲鱼的反馈形式类似,都是在卡片上添加一个黑色半透明蒙版,将有限的选项竖直码放在卡片上,类似小型模态的概念(但是这里不同于严格的模态视图,没有限定用户必须要做出选择,用户可以直接划走)。而京东的逻辑不同,使用了传统阻断性模态视图的处理方式,将下方卡片用蒙版遮挡,希望用户专注于选择。


从阻断感上说,京东的阻断干是最强的,将用户从原本的浏览行为中提取出来,请用户严肃地做出对于当前商品的反馈。这样收集信息的效率更高。由于选项是盛放在带有指向性的小气泡之上,针对性足够,且延展性好,气泡的高宽都可以调整,而淘宝和闲鱼的处理方式,在极端情况下,如选项超过5项时,所有内容放在卡片之上,空间就很紧凑。


这类操作比较隐晦,可点击按钮很不明显,长按手势也不常用。同样是当用户有明确反馈需求时,才会寻找反馈入口,一般情况下,用户不会注意到。以用户常态下的浏览行为为最优先。


闲鱼的交互做的很细致,蒙版出现采用了水波的形式,用户抱着要吐槽的心态,这种精致有巧思的小动效在一定程度上可以缓和用户的烦躁的心理。



除了电商类产品,部分视频类产品长按卡片也会呼出对应效果。

案例1和案例2,长按卡片,都是出现视频片段的预览。效果类似iOS的3Dtouch,在相册中按压具体照片即可预览。而案例3,点击“更多”图标,呼出操作。然而选项只有1项,不符合逻辑,单一的选项无法构成“选择”,这会让人有点摸不着头脑。



4.4 宫格/网格

如果把界面看作是一张大网格,不同的内容占据着不同位置、不同面积的页面区域。

除了我们已经熟悉的“有序”布置,如从上到下依次排列内容(大卡片),或者从左往右依次排列内容(泳道),还有更加灵活多变的排布方式可供选择。

布局的本质是分配界面面积,用以盛放内容,同时运用面积对比进行突出。除了面积对比的方式外,还有其他方式可以突出关键内容。





Part 5

————————

无容器 & 复合容器


无内容的呈现形式比较简单:内容直接置于背景层之上。减少视觉负担,内容为主,形式为辅。

复合容器是指超过一种的容器形式的组合,如卡片中包含列表、卡片中包含泳道等。


5.1 无容器


5.2 复合容器




Part 6

————————

组合与强调


不同的信息容器组合在一起,搭建一个分工明确的界面。界面中不同的信息需要套用合适的形式去呈现。有层级就有对比,对比越大,层次拉得越开,重点就越突出。


建立对比的策略:

色彩对比、面积对比、样式对比、Z轴高度对比、静态动态对比



文章来源:站酷  作者:doo_W

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

B端表单设计思路总结

涛涛

大家是不是时常困惑于,B 端的表单设计体现不出高级感?设计发挥的空间特别的少?

那是你没用对发力点~

B 端:设计表单页面时,一方面须尊重用户的习惯,不要在不必要的地方体现差别。总结了 4 个思考问题:

案例:以创建公众号消息自动推送为例

  • 思考用户用产品做什么事?用户会用该产品创建公众号消息推送,根据用户触发事件,推送相关信息
  • 用户用这类产品最关心的是什么?核对触发事件,检验消息发送状态
  • 用户有哪些思维定势?这里就不举例了(条件不变时,能迅速地感知现实环境中的事物并作出正确的反应)
  • 用户用过什么类似的产品等?……

另一方面要考虑信息层次。

搞定了基本要素后,我们开始考虑如何表现信息层次。

  • 封装度高、信息密度低
  • 如何判断采用哪种布局方式

什么是封装度高且信息密度低?

在了解什么封装度和信息密度前,我先跟大家讨论一下。什么是表单之间的关系。

我所认为表单之间的关系分为 3 种:

1. 常规结构

优点:

平铺所有需要填写的信息,适合内容项较少、内容项无法按照相关性分组的表单

缺点:

  • 表单页中需要填写内容众多,容易造成信息密度过高
  • 操作需要的视觉元素越多,用户的认知负担越重

使用场景:

当需要完成一个简单快速的任务,输入少量信息即可完成创建

B端表单设计没有高级感?那是你没用对发力点!

2. 树状结构

优点:

用于复杂任务时,拆解任务进行编排,适当的任务分割,可以降低用户出错率

缺点:

  • 无法在表单页中根据内容量进行合理地布局
  • 视觉噪点过多,无法兼顾页面展示和用户填写效率

使用场景:

适用于大型、复杂任务

B端表单设计没有高级感?那是你没用对发力点!

3. 显/隐结构

优点:

减少不必要(非重要)的输入项,能适当的减轻用户认知负担

缺点:

  • 虽然减轻用户输入负担,但无法高效的判定任务分割的容错率
  • 用户确认信息有一定难度,无法兼顾页面展示

使用场景:

特殊场景下使用

B端表单设计没有高级感?那是你没用对发力点!

那么用一条完整的链路来表达就是:

B端表单设计没有高级感?那是你没用对发力点!

了解完表单的结构关系知晓利弊后,那么应用在我们实际的场景中表达就是如图所示:

封装密度高且信息密度低

B端表单设计没有高级感?那是你没用对发力点!

△ 图中案例,仅做示例说明

将一个复杂的任务表单,进行封装后,看起来任务量是不是也变少了?操作起来也不是很复杂了?

小结:

分析了解表单的结构关系,判断表单,寻找共性的内容,将他们封装为一个卡片,也可以封装成一个组。主要的目的就是减少用户认知负担,提升操作/使用效率。

如何判断采用哪种布局方式?

关于使用何种布局方式的判断,应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型,选用相应的信息呈现方式,选用合理的布局方案来承载详情页的内容。

1. 信息的复杂度和相关性模型

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/research-form-cn

2. 区隔方式

根据各个信息之间的相关性,判断各个信息模块之间的亲密度,通常情况下,相关性强的内容尽量靠近,相关性弱的的内容尽量拉开层次。

  • 不通栏分割线:将相关内容分开;
  • 通栏分割线:将内容分成多个部分;
  • 卡片:放置一个主题;
  • 页签:对象描述信息最顶层组织方式,如按版本组织、按意图组织、按阶段组织;

B端表单设计没有高级感?那是你没用对发力点!

△ 来源:Ant Design;来源链接: https://ant.design/docs/spec/detail-page-cn

3. 注意事项

  • 表单内容数量 <7 项,不建议分组;
  • 表单内容数量 7~ 15 个建议分组;
  • 表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样式。

文章来源:优设  作者:交互思维铺子

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



费茨定律在设计中的运用

涛涛

费茨定律由心理学家 Paul Fitts 提出,用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关,距离越大时间越长,目标越大时间越短。举例来说,你伸手去拿桌子上的咖啡杯,开始你的手臂迅速地往杯子位置移动,接着你会放慢速度直至找到杯子把手,这个杯子把手的大小与你“抓住”它有着一定的关系。

用一篇超全面的文章,帮你读懂经典的费茨定律

如上图所示,如果光标现在在任易地点想要去点击目标 target,最短路径一定是 D,最短路径上容错的最长路径是 D+W,只要水平上移动超过了 D+W 你就点不到了,而这个点击动作所耗的时间是一个常数加上一个以 D 为正比 W 为反比的函数的和。

让我们来看下面这个例子:图中右侧的红色方块代表目标,虚线代表从起点至目标的移动轨迹,其范围是用户到达目标前微调以弥补误差的区域,在右方有一个较大的目标,因为面积很大所以用户从任意点快速点击都会很容易,在目标上停下来之前不需要做太精细的调整。

用一篇超全面的文章,帮你读懂经典的费茨定律

相反,如果把右边红色方块缩小,用户快速点击目标会困难得多,需要做一系列精细的调整动作。

用一篇超全面的文章,帮你读懂经典的费茨定律

但如果同样大小的目标距离很近的话,因为到达目标范围所需的初始动作很小,所以准确点击它的难度也会小很多。距离越近, 初始动作因为幅度太大而超出目标区域的风险就越小。

用一篇超全面的文章,帮你读懂经典的费茨定律

按钮越大越容易点击

在页面中,大而近的目标区域意味着用户不需要做太精细的调整就可以轻易的到达目标。比如页面中的大按钮。

用一篇超全面的文章,帮你读懂经典的费茨定律

将按钮放置在离开始点较近的地方

夸克浏览器的搜索栏就放在离手最近的屏幕底部区域,相比常见顶部搜索栏更方便操作,效率更快。

用一篇超全面的文章,帮你读懂经典的费茨定律

相关按钮之间距离近点更易于点击

在设计注册、登录界面的时候,通常将「注册」和「登录」放到一起,不仅可以在视觉上增强用户对他们相关性的认知,还可以减少在他们之间的距离 。

用一篇超全面的文章,帮你读懂经典的费茨定律

△ 设计图来自网络 侵删

适用边界

费茨定律鼓励减少距离,增加目标大小以提升用户效率,但反过来亦适用,比如 iPhone 关机,不使用按钮点击,而采用滑动操作,这样虽然降低了用户操作效率,但增加用户操作时间,以起到警示用户谨慎避免误操作的目的,所以“取消”按钮放在底部方便点击的地方。

用一篇超全面的文章,帮你读懂经典的费茨定律

App 弹窗经常把“关闭”按钮放在卡片的右上角离手远的地方,还有开屏广告,广告商希望用户花尽量多的时间停留在广告内容上,这时候广告主会把“跳过”按钮放在难以点击的右上角,以降低用户的误触机率提高转化。

总结思考

按钮越大越容易点击,在移动设备上通常增加按钮点击热区范围以便用户不必精准地点击目标也能操作成功,但是可点击对象大小尺寸要合理不要过分的大;

让相关的内容更靠近彼此,在视觉上增强用户对它们相关性的认知,不过也不能过分靠近,会造成点击压力;

将按钮放置在离开始点较近的地方,比如屏幕底部易操作区域;

屏幕的边角很适合放置像菜单栏和按钮这样的元素,因为在屏幕边缘和角落位置时它们是“无限可选中”的,可以大胆操作而无需“微调”;

定律的反向使用可以适用一些特殊场景,比如想达到某种目的而降低按钮被点击的可能。


文章来源:优设  作者:印迹拾光

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


设计师如何分析需求?

涛涛

在工作中,我们会经常与产品经理对接需求、理解需求,站在交互设计师角度,我想分享如何分析需求,如何解决正确的问题。


关于需求


1、什么是需求:

这里的需求指业务需求,即现状无法满足需要,从而为达到某种目标而制定的。需求主体未必只有用户,也可能是企业、产品、运营、技术。


2、需求的分类:

需求可以大致分类两大类,内部需求和外部需求。


什么是内部需求?

内部需求即由企业内部发起的,基于企业、产品本身商业(产品、运营)、体验(设计、技术)等层面的诉求而提出的。

产品的需求:由产品侧发起,最为常见,通常基于对产品发展目标、商业目标、竞品动向、行业变化等层面考虑的需求。

运营的需求:由运营侧发起,通常基于运营活动、玩法等层面考虑的需求。

设计的需求:由设计侧发起,通常基于对体验、视觉等层面考虑的需求。

技术的需求:由技术侧发起,通常基于对产品技术体验、性能优化等层面考虑的需求。

领导的需求:由公司上层发起,一般与产品经理发起的需求类似,但有时也可能临时想法。

···


什么是外部需求?

外部需求即所有在企业以外发起的,基于对企业产品的诉求、要求得不到满足而提出的。

用户需求:主要来自 C 端产品,用户对于产品的反馈,或企业对用户的调研而得出的需求。

客户需求:主要来自 B 端产品,客户对于产品功能、性能等层面考虑的需求。

政策需求:主要来自相关政策法规,通常基于对产品合规性、用户隐私权限等层面进行规范要求而整改的需求。

···


以上列举的是常见的需求类型,可以发现需求类型其实是多样的,设计师对于需求类型的鉴别也需要有一定的认知。


3、产品经理与设计师的需求分析


在互联网公司中,常见的职能角色主要有:产品经理、交互设计(主要分布在中型、大型互联网公司)、UI 设计、研发、测试。但除了产品经理之外,设计师对于需求分析的了解也有很大的必要性。


上面提到,产品是需求的主要发起者,所以理所应当有很大一部分工作量就是需求分析。设计师的工作,最常见的就是对接需求,然后将需求转化为设计。而这个流程中的关键点,就是作为交互、UI 设计师,应该如何正确的分析需求。


有人说,分析需求不是产品经理的事情吗?交互设计师只要会画框架框架不就行了?如果这么想,那是还没有对“分析需求”本身有足够清晰的认知。


如果从用户体验五要素的层面对需求分析进行划分,可以发现:

  • 战略层告诉我们“什么是产品目标、用户需求”

  • 范围层告诉我们“什么方式、内容、功能可以满足需求”

  • 结构层告诉我们“如何分布这些满足需求的内容、功能“

  • 框架层告诉我们”如何设计这些满足需求的界面框架、信息呈现”

  • 表现层告诉我们“如何设计符合产品定位、风格、需求特征的最终展示外观”


结论:

产品经理的需求分析:侧重于从商业维度考虑产品目标,考虑用户的需求是什么,以及用什么样的东西去满足用户需求。

设计师的需求分析:更侧重于基于对产品需求的正确理解,从用户、商业的层面考虑,并采用合适的设计形式来实现。


对齐需求:正确沟通


在体量较小的公司,产品经理会肩负需求分析、交互设计等工作。而在体量较大或者更重视用户体验的公司,设计师则可以更加聚焦于如何权衡商业与用户体验。


这时,摆在产品经理与设计师面前的会有 2 道鸿沟:


1、需求理解的鸿沟:


产品经理是设计师最常见的需求对接者,基本上是产品经理发起需求,设计师执行。这个过程是先后关系,大部分情况下也是单向传递的。

当产品经理比较强势时,即使设计师对需求有疑问,也只能当成意见补充,而是否接受很大程度上是产品经理决定。这里面的沟通很关键,因为这条鸿沟决定着设计师是否能够正确理解需求背后的本质,理解本质需求就是跨越这条鸿沟的桥梁。

正确的沟通姿势是理解需求的第一步,而这一步基本定义了整个交互、UI 的设计走向,需求目标会影响设计师的思考方式,当没有将需求目标透彻理解时,会使思考方式严重受限,比如产品需求是让设计一个弹窗,设计师就原原本本的设计一个弹窗,而不去思考为什么要设计这个弹窗。


我们该如何正确理解需求?


关注本质

产品输出需求文档的时候,大多会输出初步的交互框架想法或者视觉设计建议,但在需求沟通时,最关键的一点是关注本质需求,避免一开始就陷进具体的需求细节。这里并非说产品提供的方案不好,事实上,有时交互方案与产品提供的方案一致,这是不可避免的,当目标相对清晰的时候,不需要为了特地设计而设计。

但是,如果沟通需求时,过于关注细节,容易导致看不清需求的本质。所以,当与产品经理沟通时,可以多问问为什么要做这个需求,是为了达到什么目标,满足什么需求,然后从交互体验、创意性等角度出发,思考更好的交互方案。


甄别需求

无论是内部需求还是外部需求,一般都会汇总到产品经理,再由产品经理与设计侧以及其他职能同事对接。需求来源多样,特别是用户需求,我们都知道用户表达或反馈的需求未必是用户的真实需求,所以在沟通时,应该甄别哪些需求不合理。设计师有用户体验的立场,站在不同立场上,往往可以发现不同的问题,将问题在需求阶段暴露出来,避免执行过程反复调整。


2、意见冲突的鸿沟:


产品经理与设计师职能不同,所以立场、关注点都会有差别。

首先,我们需要接受产品经理与设计师的意见是一定会产生冲突的,所以不要觉得为什么与产品经理怎么总是意见不合。

其次,站在双方的共同目标都是让产品变得更好的角度,我并不认为意见冲突是不好的,相反,这是在前期基于双方不同立场对于需求本身合理性的充分讨论,达到双方都认同的意见,然后共同将产品做好。


如何跨过产品经理与设计师意见冲突的鸿沟?


理解目标

要看清这个问题,需要回归到产品经理与设计师立场的差异上,设计师习惯性的会站在用户体验的角度上思考问题,也往往需要为体验负责,而产品经理需要考虑更多产品策略方面的问题,有业务的 KPI。

在沟通需求时,双方意见不合主要是关注的目标不一致。这时,设计师不该只从体验好与不好、这么做好不好看的角度出发思考问题,而是需要基于用户体验并在理解商业目标的基础上进行沟通。作为设计师,不能盲目接受需求,更不能盲目拒绝需求。


提前介入

不同企业的产品流程会有一些差异,但大部分是产品需求过了几轮评审之后,流转到设计。此时就算设计师对需求有不同意见且产品也同意调整,在某些情况下也可能造成项目延期的风险。

如果条件允许,设计师可以提前介入到需求评审阶段,即在需求评审初期可以表达设计侧对需求的看法,而需求评审可以充分进行需求讨论。此外,某些产品需求(比如要求较多的设计创意发散)可能会强依赖于设计、动画等职能角色参与,提前介入可以在需求前期有充分表达设计观点的机会。


拆解需求:5W1H 法


5W1H 分析法也叫六何分析法,是一种思考方法,也是工作方法。可以帮助我们避免只关注某个细节或者具体的需求方案,而是从顶层开始思考的方式。


大部分人都听过这个方法,但是日常工作中不太知道应该如何使用,个人理解,这个方法在很小的需求方面不太适合。但是在处理比较中型/大型的需求、设计师对需求本身疑惑时、甚至与产品经理意见分歧时,有很大的用处。


原因( Why):

需求的背景是什么,产品在当前遇到了什么问题,比如数据差、体验反馈差等。

想要达到什么目标,是商业需求还是用户需求?

产品所在行业的竞品情况如何,市场趋势如何?

对象( What):

需求的内容是什么,基于需求的背景、目标,产品即将做什么事情?注意不能局限于做某个具体形态的事情,可以尝试描述这件事情如何满足需求。

场景( Where):

什么场景出现这个需求?

需求的最终产物会在什么场景/页面/模块出现?

时间(When):

什么时间节点出现这个需求?

需求的最终产物会在什么时间节点出现?

用户(Who):

产品的用户是谁?这个“谁”不是只某个个体,而是产品的某类典型群体。

用户需求是什么?用户遇到了什问题?可以将用户需求枚举出来,但是需要注意用户需求不一定等于产品需求。

方法(How):

需求所要做的这件事情,实现方式是怎么样的?

有没有其他可能的方式可以更好的实现这件事情?


思考产品提出的需求建议方案,与需求目标是否一致。设计师理解并同意以上拆分的结论,那就证明需求本身层面是没有异议的,接下来就是需求实现层面的问题了,此时设计师的工作,就是思考是否还存在更好的实现方式能够满足这个需求。如果以上问题不够明确,那么可能需求本身可能有值得商榷的部分。


以需求目标为导向,是判断方案是否可行的最直接方法。这种沟通方式,可以帮助设计师与产品经理构建相同目标、场景等变量信息,帮助产品经理与设计师对齐设计目标,减少后续方案返工的情况。我们通过梳理这些信息,尽管未必能够马上思考出方案,但是能够初步判断哪些方案可能不太合适。


以上是对于 5W1H 的基本拆解,下面我会尝试举一个虚拟例子进行解释。


某天,产品经理提了一个需求:

需求内容:

优化用户取消订单的挽留弹窗。线上的样式是底部弹窗,但是底部弹窗容易点击“取消订单”按钮,且文字提示不够清晰。初步方案是将弹窗样式改成居中弹窗,对于用户提醒层面会更加明显,如下图:

你觉得很奇怪,把弹窗从底部改为居中样式,尽管提示更明显了,但是真的能够降低用户的取消率吗?实际上,你甚至不清楚这个弹窗对于用户是否有帮助,也不清楚是否能解决需求的问题。你可能会思考,假如你是用户,会因为这个弹窗就不取消订单吗?

很多产品都会设计页面退出时的挽留弹窗,常见的如“确定退出页面吗? 退出/取消”,但这经常是一种为了做而做的挽留弹窗。对于这种弹窗,是否可能不仅不能带来目标效果,反而容易引起用户的反感。


我们在分析需求时,可以尝试简单拆解一下这个需求:


原因(Why):

需求的背景:行业内,用户下单之后都有取消订单的操作,本平台的订单取消率处于行业中的平均水平,基于对产品的优化,希望可以降低订单的取消率。

对象(What):

通过某种方式,降低订单取消率。目前比较合适的方式是优化取消订单的挽留弹窗。

场景(Where):

我的订单页,目前其他场景无法取消订单,所以场景比较明确。

时间(When):

用户已经下单(已支付/未支付)之后,点击【取消订单】按钮后触发挽留弹窗。

用户(Who):

目标用户:已经下单的用户。

用户需求:枚举用户遇到的问题,如:点错了、忘记支付密码、不想买了、收货地址填错了、其他原因…

方法(How):

初步想法:把底部挽留弹窗改成居中挽留弹窗。

其他想法:是否还有其他方式降低取消率?


你会发现,这个需求其实是可以被拆解的。在这个需求里,你会发现,尽管原因(Why)很清晰,但是用户(Who)是推导出来的结论方法(How)是有些问题的。当从用户角度出发 ,仅仅一个居中挽留弹窗是无法解决用户需求的。


这里需要警惕一个点,即设计“挽留弹窗”这件事情,先不管最终产物是不是一个弹窗的形式,但是不能一开始就陷入“我要设计一个弹窗”的思维,可以先思考下,我需要通过什么方式降低用户的取消率?


但是我们如何发现潜在的更优方案呢?

可以尝试多几个问号:用户为什么会取消订单?设计挽留弹窗,是否就真的对降低取消率?设计挽留弹窗,能否解决用户在这个场景遇到的问题?是否可能不用挽留弹窗降低取消率?

通过上面用户需求列举,你可能会发现部分取消订单原因,是不需要用户取消了订单才能解决的,比如“地址填错了”,并且这部分用户在本平台订单取消率中占了一大部分。


这时需求的解决方式,可能变成:

· 通过向用户提供修改收货地址的入口降低订单取消率。此时弹窗的动机不再是为了“阻挡”用户,而是推测用户操作意图,帮助用户解决问题。相比于单纯的阻挡弹窗,这种处理方式的好处是:通过找到并解决部分操作的根本原因,以减少负向操作,帮助平台更好分析用户取消订单的原因以改善产品体验;


· 如果填错地址的用户占了订单取消率的很高比重,是否可能尝试优化下单流程?比如将让用户更明确感知订单地址,避免用户选错地址。从而通过优化本质的问题,减少用户取消订单的比例,也减少弹窗出现的频次。


最后你会发现,设计出来的方案可能会以弹窗作为表现形式,也可能通过优化下单流程降低取消率。这个方法主要是将需求梳理清楚,让我们明确这个需求的来龙去脉,减少遗漏的问题。



发现真正需求:双钻设计模式


2005年,英国设计协会(the British Design Council)首次提出这种双发散—聚焦设计模式,被称作双钻设计模式(double-diamond design process model)。英国设计协会将设计过程分为四个步骤:“发现”和“定义”,确认正确问题的发散和聚焦阶段;然后是“构思”和“交付”,制定正确方案的发散和聚焦阶段。”


迄今为止,我们其实可以看到许多设计方法,这些方法可以让我们避免从初始问题直接思考解决方案,避免因为忽视真正的、根本的问题而设计价值不大的设计方案。双钻设计模式,与上面的 5W1H 分析法都是属于设计分析方法,也同样可以帮助我们如何分析需求、拆解需求、解决正确的问题。

设计师在需求分析过程中,要明确需求是某种方案,但未必是最终结果。尽管从效率层面看起来像是在倒退,因为明明产品经理已经提供了方案,而设计师还要重新思考。但实际上,这种思考方式,恰恰可以避免局限于某种职能视角思考问题。


为什么称为双钻模型?

1、设计师会先质疑问题,接着扩大问题的范围,思考问题之下隐藏的根本原因,接着聚焦于其中某一个问题的描述。

2、在思考解决方案阶段,会先扩展可能的方案,再进行一次发散思考。最后,将这一切重归于某个合适的方案。

拿到问题——发散——聚焦——发散——聚焦,看起来像是两颗并列的钻石,所以称作双钻模型。


发现问题

对现状进行深入研究。包括了解用户特征、产品当前状况、用户如何使用产品以及用户对产品的态度、竞品现状等,此时我们不会将聚焦于某一个问题,而是穷举尽可能多的潜在问题。

定义问题

确定关键问题。这一阶段,我们关注的焦点是:用户当前最关注、最需要解决的问题是哪些,需要根据团队的资源状况作出取舍,聚焦到核心问题上。

构思方案

寻找潜在的解决方案。在方案发散阶段,我们不需要过多考虑技术的可实现性。

交付方案

把上阶段所有潜在的解决方案,逐个进行分析验证,选择出最适合的一个或多个方案。 我认为在这个阶段,设计师可以尽可能地发散想法,但是就绝大多数国内企业、产品现状而言,很难将多种想法一一尝试,因为开发成本、项目时间等问题,可能导致投入产出比不高的情况,所以设计师应该提升对好方案的判断能力。


我们该如何使用双钻设计模式,同样在此我会举一个虚拟例子进行解释。


你们是内容资讯类产品,某天,你接到一个需求:

需求内容:

优化某应用 App 首页搜索栏,包括将搜索栏高度加高、设计颜色更加明显,以提升搜索栏的点击率。

需求背景:

对比了同行业竞品,发现竞品的搜索栏点击率比我们高了20%。我们的搜索栏点击率为 5%,而竞品为 20%。同时,通过对比发现,竞品搜索栏高度更高,搜索栏颜色更加明显,除此之外,页面其他信息区别不大。


初步分析:

这个需求问题很明确,就是我们搜索栏点击率比竞品低。但这个问题归因真的全因搜索栏高度、设计样式的影响吗?

其实未必是这个原因,搜索栏的点击行为本身更倾向于目的性点击,也就是说有相对明确的目的去点击,而目前高度虽然不高,但是足够明确。


采用双钻设计模型分析:



通过双钻模型“发散——聚焦”的分析和验证,我们发现最终解决方案不仅仅是最初的方案,这四个阶段不是孤立存在的,而是彼此联系。当然这种举例是为了更加便于理解,实际项目中一定会遇到很多问题是很复杂且很难顺利解决的。但是这种设计模式帮助我们减少用局限性的眼光进行设计,发现正确的问题,发现正确的解决方案。



分析思维:结构化思维


首先,什么是结构性思维?


有人这么解释:以事物的结构为思考对象,来引导思维、表达和解决问题的一种思考方法,逻辑框架像金字塔结构,以上统下,归纳总结。


我理解中的结构化思维,是灵活可变的。比如上述提到的的 5W1H ,就是结构化思维的一种,因为这里体现的是一种结构,并非必须 5W+1H ,在合适场景也可以演变成 5W+2H 等。


当我们面对一个需求时,我们是如何进行分析的?出了方案应该如何和其他人描述?如何判断方案的合理性?


一种人看了需求,了解需求概况,然后开始找参考找灵感,找到相同页面类型的,然后看看有没有什么可以借鉴(抄)的,开始发散思考表现和形式,提出的方案不清楚优劣性。这是不是像许多人平时思考需求、思考问题的方式?


而使用结构化思维的分析方式是:

一、仔细推敲需求产生的原因、背景,而不是单纯只看需求,然后结合需求得出初步的改进目标。

二、分析需求的相关用户群体。不同产品的相关用户群体不一致,比如电商产品相关用户群体是普通用户、商家;网约车相相关用户群体是用户和司机;B 端产品相关用户群体有客户(负责购买)和用户(负责使用)

三、结构化的分析竞品,而不是单纯找灵感。如看竞品是如何做的,而看竞品如何做并不是为了单纯只看表象,也会从不同维度进行分析:竞品为什么这么做,结果是什么?如果竞品做得不如我们,他们的不足之处在哪里?竞品这么做对我们有没有参考意义?分析竞品有助于我们通过别人的方案,帮助我们更清晰地分析目标的意义。围绕目标,再发散思维,此时的方案会比第一种人更加紧密围绕需求和目标,而不是单凭感觉去发散。我们提出的方案,相对而言也会更加具备理论、数据、分析的支撑。

四、分析方案的意义,方案对产品本身、对团队等方面是否有更多的意义。举个例子,你做的方案是否考虑到团队其他成员的复用性?是否考虑到对当前业务的数据变化以及后续维护?更甚于,对自己的意义,是否能从中学习更多内在方法?

五、···


一个需求可以拆解成多个点进行解析。比如:产品问题+产品目标+产品定位+竞品分析+相关用户群体+体验地图+ ... + 需求类别特性(不唯一)。但是,并非每个需求都需要把产品定位、体验地图拿出来遛一遍,这样子就变成了生搬硬套,我们需要根据具体需求思考不同的分析点。


我们在需求分析中,最常用到的是以下几种,当然还有一些其他的拆分点,根据不同产品类型,分析的结构也不一致。

问题:我们产品当前遇到什么问题?

目标:针对当前的问题,我们期望达到什么目标?

竞品分析:竞品分析几乎做需求前必做的,关键在于参考其他产品的设计思路,以及别人能够做到什么样的程度。基于目标,侧重于从交互、UI 的设计层面进行分析、类比。

相关用户群体:最基础的当然是普通用户,此外根据不同产品或者不同功能类型有:商家(电商类)、UP 主(B 站等)、CP(内容提供商)、司机(网约车类)等,甚至同一产品不同功能模块需要考虑的相关用户群体也不同。

需求类别特性:基于不同需求的相关内容而言的,这种变量会更聚焦于某需求的具体内容,但是一个具体需求是可以被拆分成多种维度,比如信息维度、框架维度、设计风格维度。假如你在做一个搜索的需求,分析的变量就是搜索操作类型、搜索推荐方式、搜索结果呈现规则等。假如你在做一个信息流的需求,分析的变量就是信息推荐规则、信息卡片呈现方式等。


结构性思维,无论是在沟通、处理分析问题上,对我们都有很大的帮助。在设计中,我们可以通过这种思考方式,避免让方案过于发散而不聚焦,更好地判断方案对于业务、团队、自身的意义,以达到清楚方案的优劣性的目的。



结语


1、本文介绍了设计师在项目中如何更好的沟通需求的方法,当然除了上述的方法之外,还有更多方法可以帮助我们解决问题,但我认为本质上是学会如何用全局的眼光看待需求,避免局限于具体解决方案。

2、在实际项目中,我们会遇到多种类型的需求,特别是遇到较大的需求时,运用合适的分析方法特别重要,这能够很有指导性的帮助我们有意识、有节奏的看待需求。

3、避免为了使用某种方法论而强行使用,需要根据不同的需求场景使用不同的方法。

4、作为设计师,很关键的一点是判断什么需求是真实需求、什么需求是伪需求,这在需求沟通、需求分析中会形成较大差异。当然这并非一朝一夕可以提升的,需要通过不断学习对用户行为及体验的理解、对商业的理解才能提升。


文章来源:站酷  作者:热风_

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档