设计基础：从创意到界面

大家好 我叫 Majo 来自设计布道团队 如果你想知道布道团队的工作内容 我来介绍一下 我的工作时间 主要用来帮助设计人员和开发人员 为 Apple 平台打造更优质的 App 我的工作心得是 我们都知道 App 很好用是什么感觉 不好用又是什么感觉 如何以用户的身份发现这种差异？ 这很简单 但是 如何以设计师的身份 打造这种无缝体验？ 这就有点棘手了 这正是我们团队现在 齐心协力开展的工作 我将向大家介绍我的想法 我提出的问题 以及当情况不太对劲时 我如何处理混乱的中间阶段 我们首先说说结构： 如何组织信息 以及如何 定义 App 和它的功能 然后 探讨一下导航： 如何设计清晰明了的导航方式 让用户在浏览 App 时 觉得自信满满、一切尽在掌握 接下来 重点关注内容以及如何 通过组织方式增强内容所传递的意义 清晰地呈现内容并引导操作

最后谈谈视觉设计 我们将看到正确的样式设计如何 塑造 App 的个性和调性 同时助力提高易用性 首先是结构 每个 App 都建立在一定的基础之上 这个基础塑造了 App 的方方面面 用户如何导航 哪些内容引人注目 使用体验给人以什么样的印象 如果做得好 一切都会水到渠成 如果做得不好 好吧 我们都有过这样的经历

为了论证这一点 我要向大家展示 我创建的一个虚构 App 它可以帮助音乐爱好者跟踪记录 自己越来越丰富的黑胶唱片收藏 用户可以滚动浏览自己的收藏 从中获取灵感 决定接下来播放什么 他们可以用收纳箱对唱片进行分组 添加新唱片 跟踪唱片交换 以及保存以后可能想入手的唱片 那么 你的第一印象是什么？ 有没有什么东西让你感到困惑？ 哪些地方做得好？ 又有哪些地方有点不对劲？

当我审视某个 App 时 我希望看到清晰明了的设计 这样可以带来引人入胜的体验 也能帮助我自信地使用这个 App

为此 我首先需要知道自己在哪里 App 应该让用户 一眼就能看清楚这一点 所以我不会琢磨我在哪里 或者我是如何来到这里的 下一个问题是：“我可以做什么？” App 不应该需要我进行猜测 操作应该清晰易懂 最后一个问题是： “我可以从这里去哪里？” 让用户对后续步骤了然于胸 才能保持流畅的操作 也有助于避免犹豫不决或反复猜测 如果可以轻松回答这些问题 App 就能带来引人入胜、操作流畅的感觉 这通常标志着 App 有了坚实的基础 乍一看 这个 App 非常美观 这一点有时可能会误导用户 因为我会想当然地认为它很好用 我们看看它会如何回答这些问题 从顶部开始 我希望知道自己在哪里 但我找到的第一样东西是一个菜单 这并不是理想情况 菜单可能会模棱两可、无法预测 我真正需要的首先是一些上下文 然后 这里有一个标题 但感觉更像品牌宣传 挺好看 但用处不大 我差点就想直接跳过它 而且这个标题可能会让我 很容易错过 App 推荐的内容 尽管这些内容看起来很有用

继续滚动浏览时 我找到了一些专辑 但除了浏览 无法进行其他操作 所以我仍然不知道自己在哪里 也不知道在这里应该做些什么 在最底部 我看到名为“Records” 的标签 它回答了“我在哪里” 这个问题 但来得有点太晚了 结果如何？ 这个屏幕没有对我进行引导 我必须努力拼凑信息 我们都经历过 App 结构不够清晰的情况 用户会犹豫不决、感到困惑 有时甚至会放弃 如果当我打开 App 时 发生的事情 少一些 也许我会觉得操作更简单 这正是信息架构的目标 信息架构是指对信息 进行梳理并划分优先级的过程 旨在让用户轻松找到所需的信息 并带来顺畅无阻的体验 我做的第一件事 是把 App 执行的所有操作都写下来 功能、工作流程 甚至还有 值得添加的功能 这时候 我不会试图 做出判断或进行删减 而是会设法想象其他人 可能会如何使用这个 App 他们会在何时何地使用它？ 它如何融入他们的日常生活？ 哪些地方可以切实帮助到他们？ 又有哪些地方似乎会妨碍他们？ 我将这些答案添加到一份清单中 列好清单后 我就开始进行清理 去掉不必要的功能 重新命名不够清晰明确的内容 并根据自然形成的认知习惯 对功能进行合理分组 完成这一步之后 我清楚地认识到 如果我不清楚必不可少的 重要内容都有哪些 就无法在 App 中传达这些内容 进行简化有助于明确 App 的目的 也为我提供了一个清晰的起点来了解 用户将如何找到各项功能 以及将在什么情况下使用它们 接下来 我们通过导航功能 来进一步探讨这一点 导航是指用户如何浏览 App 不应让用户一味地 通过点来点去进行导航 我希望让用户找到方向感和信心 为此 我将利用 通过信息架构收获的心得 来实现对主要功能的访问 在 iOS 中 用户通过 标签栏组件来访问主要功能 标签栏支持在 App 的 不同部分之间进行导航 并且始终可见 以便用户 随时访问这些功能 简化标签栏非常重要 因为每额外增加一个标签 就意味着用户需要做的决策多了一个 并且可能会让 App 呈现出 远超实际情况的复杂程度 所以我停下来 问自己： 哪些内容是真正必不可少的？ 哪些内容值得拥有标签？ 一个反面例子是“Crates” 这只是一个对唱片进行分组的屏幕 所以我合并了“Records” 和“Crates” 没必要同时提供这两个标签 然后是“Add”标签 它是 App 的 主要操作 因此出现在标签栏中 但我开始怀疑： 这是不是最适合它的位置？ 当我不确定应在何时或如何 正确使用某个组件时 我总会重新查阅 《人机界面指南》 果然 标签是用来进行导航的 不是用来提供操作的 所以要将“Add”移到“Records”内 这是用户最有可能使用它的位置 现在 标签栏包含了三个 功能区分明显的部分 此外 我也在努力增强 标签栏的可预测性 我觉得可以改进一下 这些标签的命名方式 我希望标识和图标可以帮助用户 了解每个标签的用途 这样他们就不必单纯为了 了解标签的用途而进行交互 也不会由于不确定会转到 什么内容而跳过标签 我要采用更直截了当的标识来 重新命名“Swaps”和“Saves” 同时更改图标 以强化每个标签页的含义 我希望这些图标保持一致的视觉效果 所以我没有自己进行设计 (我觉得这件事非常困难) 我将使用 SF Symbols 这是 Apple 的图标资源库 任何 Apple 平台上的用户 都已经对这些符号感到很熟悉 这有助于让用户一眼认出 这些标签的用途 得益于简化的架构、 熟悉的图标和明确的标识 App 的全部范围和用途都显而易见 标签栏也给人以 更加通俗易懂的感觉 信息架构方面的改动 导致一些内容被移到别处 会让用户有点困惑 因此 我们首先通过工具栏 让用户清楚了解这些信息 这是让用户在 App 界面中 找到方向感的绝佳方式 请注意工具栏如何解决了 我一开始遇到的两个问题： “我在哪里？”以及 “我可以做什么？” 这是因为工具栏包含了 以屏幕名称命名的标题 而不是像以前那样 提供菜单或品牌宣传内容 它为用户设定了对屏幕内容的预期 并且有助于用户在导航 和滚动浏览时保持方向感 此外 它还为用户在这个界面中 最需要的操作提供了绝佳位置 这样 用户就不必使用标签栏 由于空间有限 我只使用 SF Symbols 来提供必要功能 让每项操作都易于识别 现在 我可以在 App 内 清楚地回答“我在哪里？” “我可以做什么？”以及 “我可以去哪里？”这些问题 精心设计的体验让刚开始 使用 App 的用户更有信心 这一切都归功于 App 结构上的优化 以及有目的地使用导航组件 回想一下 我意识到 自己一开始做得不对 不过这也是必经的过程 每一轮迭代都会让设计 带给用户更贴心的使用体验 提高可预测性和导航便捷性 现在 我们已经为进行探索 奠定了基础 接下来 我们关注一下 屏幕上实际显示的内容 App 的内容应该井井有条 能够引导用户访问最重要的内容 以及在他们的预期中 应该首先找到的内容 目前为止 我一直在努力让用户 找到 App 中正确的部分 但内容呢？ 感觉很混乱 因为 两种类型的内容混合在一起： 分组和唱片 所以我要尝试采用简单的方式 比如拆分成两个部分 我觉得这是一个不错的开端 至少有一个标题阐明了内容类型 但如果不进行滚动浏览 我就看不到 这个屏幕还提供了哪些内容 如果只显示几个分组 让用户 通过浏览发现更多 效果会怎样？ 这个理念称为“渐进式披露” 核心在于一开始只向用户 显示必要的内容 只要足以帮助他们开始使用就够了 然后随着用户在 App 中进行交互 向他们显示更多内容 这样的设计随处可见 一开始的界面非常简单 然后逐渐提供更多 详细信息或高级选项 其余内容并未消失 只是隐藏了起来 等到相关的时刻 只需轻点一下标题旁边的披露控件 即可显示 这个屏幕打开时 我希望 内容采用相同的排列方式 让人感觉跟上一个屏幕是一体的 就像是上一个屏幕的扩展 正如我在探讨导航时解释过的 每个屏幕都应该让用户找到方向感 这一次 我们不要忘记工具栏 它包含了一些与屏幕相关的操作 以及返回按钮 因此 很容易看懂用户如何来到这里 以及可以如何四处浏览 我最初的设计中存在一些具有装饰性 或没有实质性用途的元素 导致用户难以发现真正重要的功能 现在 我希望在设计方面 做出更明智的选择 找到最清晰明确的方式 来展示布局中的内容 我们来剖析几个例子 通过采用渐进式披露 我朝着正确方向迈出了一步 但网格布局感觉不太对劲 它占用了太多屏幕空间 却只能容纳两个项目 它也不能很好地处理篇幅较长的文本 导致这些内容无法让用户一目了然 我来研究一下这个问题 列表的效果要好得多 这种方式可以 显示结构化信息 并且便于快速浏览 非常灵活易用 也让用户倍感熟悉 此外 列表在垂直方向上 占用的空间也比图片少 这意味着屏幕上可以 同时容纳更多项目 你知道 我不是从零开始设计的 我通过标签栏和工具栏 等组件收获的心得是 在设计中把功能放在第一位 可以带来巨大的回报 所以我使用了 Apple 设计资源中的列表模板 这个模板可以轻松适配我的内容 这个 App 的设计开始让人 感受到更强烈的目的性 并支持更多功能 就像一款真正的 App 一样 是时候看看最后一部分效果如何了 滚动浏览 就能看到其他人 上传到 App 的所有唱片 我之前的目标是一上来就 提供所有内容 让用户能够自由探索 但随着可供选择的唱片数量越来越多 处理这些信息也会花费越来越多精力 我担心用户可能不会浏览这么多唱片 而是可能会倍感压力 于是干脆退出 App 在弄清楚该如何显示大量内容之前 我需要对内容进行梳理 像在信息架构中那样 按主题进行分组 帮助我排除了干扰 专注于重要的内容 App 可以使用一些主题 来让内容保持井井有条 按时间对内容进行分组 最常用的方法之一： 不妨想想 查找最近访问过的文件 或是继续观看上次没看完的 流媒体节目 这些功能多么实用 考虑到季节性和时事的分组方式 也可以带来更具活力、 更贴近生活的体验 按进度分组可以帮助用户 从上一次中断的地方继续进行 比如邮件草稿或是没上完的课程 这是让 App 敏捷适应 现实生活的绝佳方式 因为人们很少一口气把事情做完 按模式分组的核心在于揭示关系 将属于同一类的事物 比如相关产品 分组在一起 通过揭示各种模式 可以让快速浏览 变成更持久的探索 因为这样能让用户看到自己原本 不知道 因此也不会去寻找的联系 这些分组理念并不局限于某一类 App 即使内容不是非常形象直观 或者不会经常更改 它们也有助于减轻选择超载问题 并让 App 带来“先人所想”的体验 就像它知道我们接下来需要什么一样 我知道 我一定会使用这些分组理念 而为了像我需要的那样 显示大量图片 最好考虑使用合辑 合辑为照片、视频或产品等项目 提供了理想的分组显示方式 这些分组可以通过滚动操作 进入和离开屏幕 我很喜欢这种灵动的感觉 为了实现这种效果 我在各个项目之间设置了一致的间距 并避免在这些项目上显示过多文字 我运用前面说到的分组理念 创建了一些合辑 看这里 按时间： 显示适合夏季的唱片 按进度：显示集齐的 成套唱片或作品集 还有按模式：比如风格或类型 对内容进行精心梳理 并采用大家熟悉的平台组件进行布局 可以帮助用户轻松找到重要内容 营造直观且引人入胜的使用体验 吸引用户反复打开 App 最后 如果我打开某个 App 后 感觉一切都恰到好处 那么视觉设计在其中发挥了重要作用 视觉设计可以传达 App 的 个性特征并影响用户的感受 它需要经过深思熟虑 运用 层次、字体、图像和颜色 同时为功能提供支持 为了让 App 的视觉设计 更上一层楼 我需要弄清楚 哪些地方效果不错？ 又有哪些地方存在改进空间？ 我要注意的是字体、颜色 和图象如何结合在一起 当我眯起眼时 我的视线 会直接落在第一个合辑上 因为它具有更厚重 也更多彩的视觉效果 只显示了一半内容 并且缺少专属空间感 这里所缺少的是视觉层次 视觉层次关键在于 引导视线在屏幕上移动 让用户按重要性从高到低的顺序 注意到不同的设计元素 为了改进视觉层次 我要将这条建议变成一个视觉锚点 为此 我让最重要的内容采用 更大的尺寸或更高的对比度 从而顺理成章地 在第一时间吸引用户的注意力 这种方法是行之有效的 视觉效果令人满意 但是它能否经得起考验？ 如果文本篇幅变长、 语言发生变化 或者有人使用了 更大的字号 会怎么样？ 我意识 我需要采用 更加灵活的设计方法 尤其是在字体方面 在这种情况下 系统文本样式 可以派上用场 借助这些样式 我可以轻松创建 清晰的层次并实现出色的易读性 即使在不同的屏幕条件下也不例外 借助这些样式 无论是标题还是字幕 所有文本内容的样式可以保持一致 因此 我可以通过一系列样式来传达 不同的内容重要性程度 无需瞪大眼睛盯着字号 也无需从零开始构建自定样式 我会保持无边距设计 将专辑封面移到背景中 从而为文本留出了固定的空间 而三种不同的文本样式 具有明显的大小和对比度差异 可以成功引导视线 此外 文本样式还支持动态字体 允许用户选择自己看着舒服的字号 让 App 更具包容性 也更方便所有人使用 但是 当文本叠加显示在图片之上时 易读性就很容易出现问题 尤其是在视觉效果繁复 或具有高对比度的情况下 如果遇到这些情况 必须把清晰度放在第一位

有一个简单的方法可以解决这个问题 那就是在文本后方添加微妙的背景 比如渐变或模糊效果 这样可以提高易读性 同时在不破坏 设计的情况下增强立体感 最后 我想重点探讨图像和颜色 如何帮助传达 App 的个性特征 从列表说起 我觉得对列表的简化有点过头了 它埋没在各个组件之间 很难让用户注意到 所以我添加了图像来表示每个分组 让列表更易于浏览 但是 并非每个图像都能收到效果 这些图像在颜色、风格 等方面相去甚远 我开始发现 我真正需要的 是一种具有连贯性的视觉风格 为此 我选择了一个调色盘 并设置了一些简单的使用规则 希望这样可以建立一致的审美标准 并让用户感到赏心悦目 我选择了四种颜色 一些复古风形状 然后进行混搭 对于显示标题的分组 我选择了更粗、更舒展的字体 让这些文本看起来 和列表中的文本不一样 我非常喜欢这样的视觉效果 我觉得 这些选择让 App 的个性更加鲜明 并使它在发展变化的过程中 始终保持一致的风格 此外 我还在调整颜色 令我好奇的是 我还能 在 App 中的哪些地方运用它？ 也许是背景、文本、图标 但这些元素已经有颜色了 只不过 和我从调色盘中挑选的颜色不一样 它们不是黑色或紫色 它们的名称是 label 或 secondarySystemBackground 之类 这些是语义色 以用途命名 而不是以它们的外观命名 因为它们可以动态变化 它们会根据对比度设置、屏幕环境 以及深色或浅色等模式自动变化 我可以在很多地方使用强调色 比如按钮、控件上 以此来显示选中的内容 但我必须非常小心谨慎 确保强调色不会妨碍动态变化、 整体易读性或是用户的舒适体验 我想说 对于任何动态变化的元素 我的系统颜色调色盘 基本就是这样 这些颜色也是 Apple 设计资源的组成部分 为我提供了一组灵活的选项 来构建视觉层次 它可以根据用户偏好的外观 无缝进行调整 无需额外的工作 这也是一种很好的测试方法 让你了解什么时候应该贴近系统风格 以及在什么地方可以彰显个性 有一种做法可能很有诱惑力 那就是 将每个设计元素都视为独立的小项目 在某种程度上这是对的 每个设计元素都值得思考和关注 但这些元素协同工作 才能产生真正的影响 有助于全方位打造更有意义的界面 我最初的设计已经焕然一新 我简化了它的结构和导航 以有意义的方式呈现了它的内容 方便用户执行操作 让 App 变得 简单易用、人见人爱 这个设计中的每个元素 从第一个轻点操作 到最后一个滚动操作 都建立在我们以往决策的基础上 设计永无止境 也没有唯一正确答案 今天 我们探讨了 App 设计的基础 你可利用字体、用户体验撰写和动画 进一步增强 App这方面有无限可能 如果你准备继续精进 请观看前几年的这些讲座 了解全新设计系统 还有很多东西等你探索和学习 所以请保持好奇心并持续发挥创造力 我非常期待看到 大家的创意结出硕果！