19、界面控件与可操作性设计：原理、案例与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/zero1/article/details/155266927

界面控件与可操作性设计：原理、案例与实践

1. 设计基础考量

在应用设计中，需要基于用户场景和使用环境来做决策。比如，覆盖层的内容有时可能冗长复杂，用户需要时间去理解，所以在用户准备好之前，内容不应消失。对于帮助图标，要求明确点击它是更适合移动设备的解决方案，因为移动设备用户需点击而非悬停来查看内容。

2. 滑动抽屉设计

滑动抽屉可垂直或水平滑动，类似手风琴，通过开合来展示信息。与窄小的手风琴式标题不同，抽屉因空间更大，能展示更多信息。
- Dark Sky应用 ：用滑动抽屉展示全天降雨预报。内容和视觉效果暗示当前降雨预报区域是滑动抽屉，若用户误向下拉抽屉，应用会减缓抽屉移动速度，并显示下方内容的提示，松开抽屉会自动弹回原位。
- JetBlue应用 ：用抽屉展示关键功能，通过设计元素和动画效果确认可操作性。菜单默认位置隐藏部分选项，向上箭头提示可上拉展开，上拉过程中箭头顺时针旋转，展开后箭头向下提示如何隐藏菜单。

3. 利用设计揭示可操作性

融入动态效果 ：视觉设计不仅包括颜色、字体、图像及其在屏幕上的位置和使用方式，还包括界面元素的移动。动态效果能吸引用户注意力，显示状态变化，增强使用体验。例如，在具有俏皮风格的应用中，意外的动画效果会带来愉悦感。
悬停效果 ：最简单的悬停效果通过状态切换产生屏幕上的动态感，类似两页的翻页书。悬停通常用于确认可能的选择，如默认链接悬停时颜色改变，表单下拉菜单中悬停选项会高亮显示。CSS3过渡效果可实现更复杂的悬停效果，包括基于时间的运动、边框和颜色变化、大小变化等。但悬停效果在移动设备上需点击才能启用。
屏幕翻转 ：翻转屏幕部分区域可在同一空间内展示更多信息。iOS将屏幕翻转作为基本UI行为之一，多平台应用也采用此技术在不刷新整个屏幕的情况下显示内容。设计师和开发者有时会用图标揭示屏幕翻转的可操作性，如Flipboard应用，通过动画效果强化翻页概念。
进度指示器 ：进度指示器虽本身无直接可操作性，但能提供关键反馈，确认任务正在运行，有时还能显示预计所需时间。从视觉设计角度看，进度指示器可引入个性元素，如Hipmunk网站用动画花栗鼠作为进度指示器，增添了趣味性。

4. 设计的元原则

一致性 ：确定支持应用主要交互的控件和可操作性后，应在所有相关交互中保持一致。少量具有预期且易懂行为的控件可降低用户学习成本，提高易用性。控件的外观和感觉也应在各屏幕间保持一致。
不一致性 ：有时，不一致性是准确体现重要性和差异的最佳方式。例如，SuperTracker应用中的“Clear All”按钮与其他按钮功能不同，若处理方式相同可能导致危险，改变其视觉特征可提高可用性。
层次结构 ：对于功能性应用，控件及其可操作性应支持用户使用应用的主要目的。视觉层次结构需强化这些主要操作的重要性，如Google主页的设计。UI控件的大小和位置会影响用户对重要性和元素关系的感知，合理的分组和布局能帮助用户更好地理解和操作。
个性：界面控件应与应用的个性相匹配。所有控件及其可操作性的方面，包括颜色、错误高亮显示方式、屏幕翻转的流畅度等，都应协同工作以支持应用的个性。

5. 案例分析：SuperTracker应用

对SuperTracker应用的食物跟踪屏幕进行分析，发现以下问题并提出改进方案：
|问题|改进方案|
| ---- | ---- |
|食物搜索过滤器下拉菜单不能准确反映用户在数千种食物数据库中查找物品的方式，不应与搜索框同等重要|在网页和平板版本中，突出“Find a food”，强化定位食物是主要任务；在手机版本中，将搜索栏置于底部，方便拇指操作|
|跟踪食物这一最重要任务周围元素过多，显得不够重要|无|
|食物组图表和控制其显示的标签相对于食物跟踪区域过大，过于突出|无|
|“Copy Meals”按钮被挤压，位置使其看似比实际更重要|在网页和平板版本中更突出显示该按钮，并添加暗示复制的图标；在手机版本中，通过点击餐名或食物项访问该功能|
|每个食物项区域的操作按钮相对于其影响的信息过大|将“remove”和“edit”选项移至详细屏幕，将原“Favorites”按钮的星星图标单独显示在每个食物项旁边，点击填充黄色表示收藏成功|

同时，为了体现应用对目标用户应有的信息性、友好性和激励性，对控件应用了以下视觉处理：
- 所有可点击/可触摸的文本使用深蓝色，与默认黑色字体形成高对比度。
- 使用俏皮但不幽默的图标强化每个导航类别的概念，便于在各平台上快速找到导航。
- 图标突出关键功能，如选择收藏、收藏物品和复制餐食。“Choose From Favorites”和收藏物品的控制都使用星星图标，“Copy Meals”图标设计为两个颜色略有对比的圆圈。
- 黄色用于吸引对交互元素的注意力，如收藏图标、操作按钮和导航。
- 多处使用圆角，使应用更友好，与大量直线形成对比。
- 谨慎使用阴影，如标签边缘、平板电脑垂直模式的滑动抽屉和手机搜索界面顶部的阴影，增加深度并区分操作区域和静态区域。

6. 避免常见错误

交互区域与只读区域区分
- 用户在填写长表单时容易迷失位置，输入数据时应提供即时视觉反馈，如用边框、色调或两者结合突出活动字段。
- 应用中所有按钮、图标和其他交互点应使用相同图形样式，让用户熟悉视觉语言。
- 不要将只读元素与交互元素同等对待，应给用户明确信号表明只读元素不可操作，如隐藏表单字段边框。
提供反馈
- 视觉设计应考虑系统反馈的位置、外观和显示时间，反馈应放在用户视线范围内，最好靠近控件本身。若需操作多个控件完成任务，反馈应作为结果显示的一部分。
- 在链接、按钮、图标和其他交互点使用悬停效果，在移动设备上依靠其他视觉反馈形式，如按下按钮时改变颜色。
对表单控件应用设计
- 若已对应用其他部分应用设计原则和工具，不要忽略UI控件的设计，简单的基于CSS、JavaScript库或对移动设备控件的最小定制通常足以将控件融入应用的整体视觉设计和个性中。
- 表单字段设计应注重可读性和可用性，可采用如在文本输入框周围使用细边框、为按钮的非活动和活动状态添加颜色等简单处理方式。对于更复杂的设计处理，可考虑使用JavaScript框架，如jQuery或extJS，在移动设备上创建自定义控件样式。

mermaid格式流程图如下：

graph LR
    A[应用设计] --> B[基础考量]
    A --> C[滑动抽屉设计]
    A --> D[利用设计揭示可操作性]
    A --> E[设计元原则]
    A --> F[案例分析]
    A --> G[避免常见错误]
    B --> B1[覆盖层内容处理]
    B --> B2[帮助图标设计]
    C --> C1[Dark Sky应用]
    C --> C2[JetBlue应用]
    D --> D1[融入动态效果]
    D --> D2[悬停效果]
    D --> D3[屏幕翻转]
    D --> D4[进度指示器]
    E --> E1[一致性]
    E --> E2[不一致性]
    E --> E3[层次结构]
    E --> E4[个性]
    F --> F1[问题分析]
    F --> F2[改进方案]
    G --> G1[交互与只读区分]
    G --> G2[提供反馈]
    G --> G3[表单控件设计]

界面控件与可操作性设计：原理、案例与实践

7. 操作步骤总结

为了更好地将上述设计理念应用到实际操作中，下面总结一些具体的操作步骤：

7.1 滑动抽屉设计操作步骤

步骤	操作内容
1	确定抽屉的滑动方向（垂直或水平），根据应用需求和布局选择合适的方向。
2	设计抽屉的外观和尺寸，确保有足够的空间展示信息，同时与整体界面风格一致。
3	添加视觉提示，如可抓取的手柄、箭头等，让用户明确抽屉的可操作性。
4	设置交互逻辑，当用户操作抽屉时，控制其滑动速度和动画效果，如Dark Sky应用中误操作时减缓速度并显示提示。
5	处理抽屉的开合状态，确保在合适的时机显示或隐藏内容，并且在操作完成后能正确恢复位置。

7.2 利用设计揭示可操作性操作步骤

融入动态效果
1. 明确应用的个性和风格，选择合适的动态效果类型，如在俏皮风格应用中使用意外动画。
2. 确定需要添加动态效果的界面元素，如按钮、图标等。
3. 设计动态效果的具体表现形式，包括运动轨迹、颜色变化、大小变化等。
4. 测试动态效果的流畅性和用户体验，根据反馈进行调整。
悬停效果
1. 为应用中的链接、按钮、图标等交互元素设置默认和悬停状态的样式，如颜色、大小、透明度等。
2. 使用CSS或JavaScript实现悬停效果的过渡动画，可参考CSS3过渡效果的相关属性。
3. 考虑在移动设备上的兼容性，若悬停效果不可用，设计替代的交互反馈方式，如点击时改变颜色。
屏幕翻转
1. 确定需要翻转的屏幕区域和翻转的触发条件，如点击特定图标或手势操作。
2. 设计翻转的动画效果，可使用CSS3的旋转、过渡等属性实现平滑的翻转效果。
3. 添加图标或提示信息，向用户揭示屏幕翻转的可操作性，如Flipboard应用中的提示。
4. 处理翻转过程中的内容显示和布局调整，确保信息的完整性和可读性。
进度指示器
1. 根据应用的功能和用户需求，选择合适的进度指示器类型，如圆形、条形等。
2. 设计进度指示器的外观和颜色，使其与应用的整体风格相匹配。
3. 实现进度指示器的动态效果，如旋转、填充颜色等，以显示任务的进行状态。
4. 若可能，提供预计完成时间或任务进度的具体信息，增强用户的等待体验。

8. 设计元原则的应用流程

下面通过mermaid格式流程图展示设计元原则在应用设计中的应用流程：

graph LR
    A[开始设计] --> B[确定主要交互]
    B --> C[应用一致性原则]
    C --> D{是否需要体现差异}
    D -- 是 --> E[应用不一致性原则]
    D -- 否 --> F[应用层次结构原则]
    E --> F
    F --> G[应用个性原则]
    G --> H[设计评审与优化]
    H --> I[完成设计]

在这个流程中，首先确定应用的主要交互，然后应用一致性原则确保控件和可操作性的统一。接着判断是否需要体现某些元素的差异，如果需要则应用不一致性原则。之后应用层次结构原则强化主要操作的重要性，再应用个性原则使控件与应用整体风格相匹配。最后进行设计评审和优化，完成整个设计过程。

9. 案例分析的启示与拓展

从SuperTracker应用的案例分析中，我们可以得到以下启示，并进一步拓展应用到其他设计场景：

9.1 启示

功能与视觉匹配 ：控件的设计应准确反映其功能，避免因视觉处理不当导致用户误解，如“Clear All”按钮的处理。
突出主要任务 ：确保应用的主要任务在界面上得到足够的突出和重视，避免被其他元素干扰。
合理布局与分组 ：根据功能和用户操作习惯，合理安排控件的大小、位置和分组，提高界面的易用性和可读性。
个性体现 ：通过合适的颜色、图标、圆角等视觉元素，体现应用的个性和风格，增强用户的情感共鸣。

9.2 拓展应用

设计场景	应用要点
电商应用	突出商品搜索和购买按钮，合理布局商品展示和筛选功能，使用活泼的颜色和图标体现购物的乐趣。
办公应用	保持界面简洁，强调核心功能的操作便捷性，使用专业的颜色和风格体现正式感。
社交应用	突出用户互动和信息展示，使用动态效果和个性化图标增强社交氛围。