2023年第一季度，手机驱动 全球网站流量的58%. 即使 移动用户体验 不断改进，用户在手机上完成越来越多的任务, 至少有一项活动是桌面的实际屏幕具有优势的:解析仪表板上显示的复杂信息.

移动仪表板对于需要保持最新发展的移动用户很有价值, 基于数据的智能和快速响应时间敏感信息. 不幸的是, 许多手机仪表板都是对桌面网络应用的拙劣模仿，它们让用户感到沮丧，而不是起到有效的作用 可视化工具 这是他们自己的立场.

移动仪表板可能无法提供桌面仪表板的全部功能, 但它仍然可以为用户提供一个可扫描的顶级数据和统计视图，让他们做出明智的决定. 它还可以为管理人员和执行人员提供快速批准订单所需的工具, 合同, 以及程序和政策文件.

在本文中, 我借鉴了自己在包括保险在内的多个行业设计数十个仪表板的经验, 医疗保健, IT, 并探讨数据恢复响应性的四个基本方面 仪表盘的设计:导航、表格和图表、按钮设计和交互状态. 这些见解可以帮助设计师创造用户期望的直观移动体验.

平滑的导航

让我们从导航开始，因为这是用户熟悉仪表板并找到他们想要的信息的方式. 如果你的移动仪表板导航笨拙或脱节，或者你的搜索栏或 导航菜单 不太适合基于触摸的交互，你很可能会让用户失去兴趣.

视觉优先级是关键. 响应式移动仪表板 是否应该快速沟通信息，并在清晰的视觉层次中对其进行优先排序. 另一个 仪表板设计最佳实践 使用的原则是 进步的信息披露 只在用户需要的时候显示信息.

Coinbase提供了一个有效的移动仪表板的例子. 比较桌面版和移动版还能揭示更多的信息.

这个移动仪表板有效地利用空间来优先考虑最重要的选项. 桌面左侧面板上的关键按钮变成了移动设备的底部导航栏, 移动菜单的标准，因为位置落在 “Z”页扫描模式 用户的注意力往往会落在哪里.

顶部导航栏保留了搜索和通知等关键功能, 以及一个汉堡包菜单，用户可以点击更多选项. 不过，值得注意的是，Coinbase并没有简单地把所有东西都折叠成汉堡包菜单. 而, 移动仪表板在第一视图中优先考虑基本内容，并允许用户在打开新屏幕之前进行初步选择，以提供更广泛的选择.

这些移动导航策略使用户能够采取重要的行动，但不会使小屏幕上的信息和选项过载.

响应式表格和图表

设计响应 移动表格和图表可能是一个挑战, 但根据我的经验, 它提供的客户满意度是值得的.

一般来说，我主张 响应式网页设计 它向所有设备发送一个代码集，但使用流体网格和媒体查询来根据设备的大小和方向改变元素的外观. 在移动仪表板中使用这种常见而有效的方法，将表行标头折叠为一组堆叠的列标头, 可以垂直滚动的独立卡片. 这种方法提供了一种优雅的移动显示，避免挤压细胞, 同时允许用户快速浏览大量数据.

但是叠牌也有缺点. 假设您希望通过年度经常性收入等关键绩效指标来比较一长串SaaS公司, 平均合同价值, 获得客户的成本. 为每个公司分配自己的卡片意味着用户一次只能查看一个或两个公司的绩效指标, 这会使比较变得困难(除非用户有极好的短期记忆)。. 但是对于用户不需要比较列的用例, 例如IT设备订单汇总表, 垂直布局效果很好.

没有放之四海而皆准的解决方案:数据表的上下文以及用户与之交互的方式应该决定您选择的策略.

华沙的用户体验设计师michaowjarosz 概述了几种聪明的方法 到设计响应式数据表，每种都有其优点和缺点. 一种方法是他所谓的“可移动”解决方案, 只看到表格或图表的一部分的, 用户必须横向滑动才能看到隐藏的内容. 具有成本效益和 易于开发, 这种方法在短期内很有效, 宽的表格和保持内容在折叠之上, 但它将用户在任何时候都能看到的东西原子化, 使得比较行变得困难. (更糟糕的是，它可能会产生令人头晕的效果.)

Steven Hoober是一位移动用户体验设计顾问，他对响应式移动桌面持批评态度 一篇文章 对于通过省略多余列来简化表的UXmatters, 使用缩写和图标代替文本, 减小字体大小, 应用对齐规则来区分列中的文本层次结构都是可以节省空间和改进表表示的策略. 根据用例，将表替换为 数据可视化 甚至可能是最好的方法.

选择最佳策略需要评估用户的需求, 与知识渊博的开发人员协作, 可能会有一些尝试和错误:在各种设备上测试断点, 看看它们是什么样子, 反复迭代，直到找到最佳点.

按钮设计

可以说, 创建响应式移动仪表板的最大挑战之一是按钮的大小和排列. 为什么? 因为, 与桌面不同, 你触摸它们, 而不是用光标或键盘命令选择它们. 它们需要足够大，间距足够大，以便方便地轻拍, 和, 由于屏幕空间有限, 有些将不得不折叠成子菜单，甚至隐藏.

标准 按钮设计 原则应该适用于你的手机设计. 我倾向于将按钮设计分为两个主要原则:您应该以一系列样式(大小)呈现按钮, 颜色, 和 shapes) that denote their relative importance through visual cues; 和 the text label or icon associated with a button should connote its semantic meaning 和 intended function—for instance, 按钮是否确认操作, 选择工具, 导航到新页面, 或取消一个动作.

大多数用户都熟悉这种视觉效果 图解 按钮的组合:它们能识别出一个朝右的三角形会在iTunes上播放一首歌, 或者Google文档的上层切换菜单中的字母B, 一次选择, 将允许他们以黑体字输入. 移动设备的棘手之处在于，苹果和谷歌都有自己的设计指导方针，规定了移动触摸目标尺寸(44x44 pt的iOS 和 Android的48x48像素). 为了安全起见，最好创建48点高的按钮.

坚持这些指导方针可能意味着你无法在移动显示器上放置用户需要的所有按钮. 假设你在一个水平面上有多个按钮，这些按钮太小了，当它们靠近移动显示器时，无法用手指或拇指轻松操作. 不要简单地缩小按钮之间的距离，这样会增加用户出错的风险——没有人喜欢按错按钮——你可以用三个圆点的椭圆状图标(一个“烤肉串”或“肉丸”按钮)来打开一个下拉菜单，用户可以在其中做出自己喜欢的选择.

但你可能有无法隐藏的重要按钮. 作为烤肉串菜单的替代品, 您可以简单地增加按钮大小以满足移动指南，然后垂直堆叠它们. 另一种选择是让最重要的按钮保持全尺寸，用图标代替文本标签，使次要按钮变小. 在考虑使用哪种技术时，要确定每个页面上最重要的按钮.

通常情况下，你需要同时应用几种策略. 在所有情况下, 适当的间距, 屏幕上的易读性, 移动设备的触控需求应该成为你的指南.

互动状态

交互状态提供有价值的信号，帮助用户预测其行为的结果，并向他们保证这些行为正在产生预期的效果. 例如, 如果一个按钮被轻击并且有一个处理延迟, 按钮可能会被禁用，并显示一个旋转器，向用户显示操作正在进行中. 如果没有这种反馈，用户可能会沮丧地关闭页面，认为按钮失败了. 不幸的是，交互状态在移动仪表板中很容易被忽视或误用.

谷歌的材料设计指南 在Android平台上提供了全面的交互状态描述，而苹果也做到了 类似的指导方针 为iOS. 从这些指导方针中最重要的收获之一是启用状态(视觉提示)，让用户知道他们可以参与文本, 菜单, 动画, 按钮, 或其他交互元素)或禁用状态(用户在启用之前无法操作的“灰色”交互元素)需要保留在移动平台上.

某些仪表盘功能无法在移动设备上复制，因为它们的屏幕是基于触摸的交互性. 其中最常见的一种是所谓的“悬停状态”,这是一种让用户将光标放在屏幕元素上以查看其反应或查看更多信息的交互方式. 例如, 当你把光标放在Gmail界面右上角的齿轮图标上时，会出现一个阴影圈, 还有“设置”字样.“但你不能在移动设备上悬停，因为它没有光标.

这不是一个新问题，有一些方法可以解决它. 到目前为止，最简单的方法是完全删除描述性悬停文本和工具提示. 大多数手机仪表板用户都熟悉从桌面借用的图标——他们知道点击一个小图标就会回到应用程序的主屏幕. 然而, 在某些情况下，即使是经验丰富的桌面用户也需要复习一下移动设备上比较模糊的符号和功能. 一个简单的解决方案是添加一个工具提示按钮，在点击时提供更多信息. 工具提示对于图表来说尤其不可或缺, 它们通常使用预先存在的库或框架构建(施加限制).

在最近的一个医疗保健客户项目期间, 我开发了一个图表，其中包括几个条形图和详细的工具提示，它们以悬停状态的形式出现在桌面上. 在移动设备上，我设计的工具条只在用户实际点击工具条时显示工具提示. 我还减少了在任何给定时间可见的条数，以确保触摸目标足够大，以便用户能够舒适地与它们进行交互. 最后，我在每个图表的顶部添加了“点击条形图查看数据”的说明.”

主要结论是? 每个交互状态都应该在手机上清晰地解读，并由用户的手势触发可预测的响应.

手机仪表板UI设计:非事后考虑

当项目范围和预算允许时, 在构建桌面版本时，考虑响应式移动仪表板的外观和功能是最有效的. 这将在产品生命周期后期节省时间和开发成本, 这也将有助于确保不同设备的品牌一致性. 聘请一名熟练的开发人员来评估各种设计方法的可行性也是至关重要的, 和, 在需要的地方, 为重新配置表格和图表定义CSS规则. 最重要的是, 尽量忠实地重建尽可能多的桌面体验:您可能不得不删除一些特性和功能, 但重要的是不要简化设计并遵循 用户体验设计流程.

移动仪表板UI 不应该是事后才想到的. 如果设计得谨慎而有远见，移动仪表板可以为用户提供重要的价值.