用2个实战案例，聊聊设计的形式与功能

Sharing

功能合理、形式饱满的两个产品（图片来自网络）

设计界从来没停止过关于形式与功能的关系的讨论。很多时候，形式被看作是一种装饰，是脱离了功能的非必要部分。然而，实际情况真的是这样吗？

本文从佛教中 “色” 与 “空” 的概念出发，在项目实践中重新思考了设计中形式与功能的关系——形式与功能应该是一个整体，达到精神上的契合。

本期提纲：

• 从"色即是空"引发的思考
• 形式来源于功能
• 功能需要恰当的表达形式
• 功能与形式缺一不可
• 总结

从 "色即是空" 引发的思考

不管你是否对佛教文化感兴趣，生活中总是能见到 “色即是空” 这样的表述。佛教中对色与空是这样解释的：色，是五感所感知到的世间万物表象；空，是剥离所有附加物后的世间万物本源①。

"色即是空" 告诉我们，直接感知到的东西并不真实，所以不要执着于表象，要看清事物的本质。这不禁让人联想到设计中的形式与功能的概念。色可以认为是设计的表现形式，而空可以认为是设计背后的功能或逻辑。

对于设计而言，是不是也不需要执着于形式，而重点关注功能？形式与功能的关系是什么？他们之间哪个更重要？

形式来源于功能

让我们来看一个自然界中的案例。太平洋的小岛上有 11 个物种的地雀，它们鸟喙的形状都各不相同：有的尖细，有的粗短。之所以有这么多种不同形态的鸟喙，是因为这些形状满足了捕食特定种类食物的功能，每种喙对应着一种食物，才在自然选择中被保留了下来。

在自然界中，动物的身体形态是为了满足特定功能需要演化而来的；在设计中，亦是如此。

下面以搜索运营门户改版项目为例，探讨在设计中如何处理形式与功能的关系。

1. 剥离表象，发现本质

搜索运营门户是搜索部门员工内部使用的工具网站，通过它可以快速导航到近百个搜索运营工具，满足数据查询、问题分析等需求，产品、开发、设计等不同业务角色都需要使用。

最初产品经理提出运营门户非常混乱，希望对 UI 进行大刀阔斧地改造，把它变得更好看一点。

直接改造视觉表现形式，真的能让体验变好吗？试想如果我们住在拥挤逼仄的城中村中，不管如何粉饰墙面，都很难有良好的居住体验。在分析后发现，真正的问题并非来自视觉表现，而是门户过于庞大、需要提供的工具项过多，导致用户的使用难度增加，带来了混乱的感受。

因此，我们重新设定了目标：面对混乱的系统，如何对其进行拆解使其更加易用。

依据新的目标，我们对部门同事进行了调研，将他们在使用过程中对于“乱”的感受具象化，挖掘出了本质的问题：

1. 系统功能繁重，工具太多，有些是用不到的。
2. 查找门槛高，难以找到想要的工具。

回过头来看，如果我们一上手直接对 UI 改造而不分析背后的原因，很可能掉入为改造而改造的陷阱，没有触及本质问题。

2. 从问题推导设计形式

在设计方案中，我们针对以上问题进行了逐个解决。

信息分流

应对功能繁重问题，可以用信息分流的方法进行减负，删减掉用户不会用到的工具。

最初我们想到的方法是按职能分流，即开发人员只看到开发相关的功能。但与产品沟通后得知, 不同职能要用的功能很多是重合的，因此这条路径行不通。

另一个方向是按业务分流。当前门户中，用户可以同时看到搜一搜和看一看两个业务的工具，但不会同时用到他们，因为这两个业务的人员架构与业务模式是互相独立的。因此我们对门户进行了拆分，分为搜一搜和看一看两个门户，每个门户中只有对应业务的工具。在登录时，系统会自动识别用户所属的业务并登录到对应的门户，不需要额外的操作。

通过按业务信息分流，可以帮助用户过滤掉大量的无用信息，降低信息负担，提升查找的效率。

场景化查找

因为工具的数量过于庞大，用户在导航栏中找到目标工具比较困难；且用户对工具的准确名称并不了解，搜索也不一定能成功。

更简单有效的查找方式是什么样的？

回顾调研内容，我们发现受访同事往往会带着明确的目标来到门户，比如：“想分析一个不好的搜索结果”、“想查一下某个词的搜索量”，而这些目标可以被提炼成不同的使用场景，比如上述两个目标可分别归纳为：搜索问题查询与分析、数据监控与运营。

按照这种从场景到工具的模式，我们收集了最常见的使用场景，按场景组织了不同工具形成了使用指南。

通过使用指南，那些对门户不是很熟悉的用户以及想探索新功能的用户，有了更简单和便捷的查找路径。

在上述项目中，每个设计方案中的“样式”变化，都是来自对问题的分析和功能的推导。

形式来源于功能，即使是产品经理口中的“样式美化”需求，也应该明确样式要满足什么需求、解决什么问题。

功能需要恰当的表达形式

在功能面前，形式是次要的吗？

在搜一搜品牌专区的抽奖组件的迭代过程中，我就深刻感受到了形式对功能表达的重要性。搜一搜品牌专区是搜索结果中品牌信息与服务的聚合卡片，品牌方可以在专区中设置运营活动，比如优惠券活动、抽奖活动等。

最初设计抽奖组件时，我根据抽奖的本质机制：点击抽奖 - 看到抽奖结果，快速设计了一个最简化的产品形态，配合产品经理快速上线的目标。

然而在方案评审时，这个设计很快受到了质疑：“没有氛围感”、“奖品在哪？”、“不太像抽奖”。

为什么大家没有直观地感知到它就是一个抽奖组件呢？

认知科学中有一条理论：大脑会根据以往的经验，猜测我们看见了什么，达到更快地解析周围的世界的目的。

回想在现实生活中或游戏里抽奖的经历，我们脑海里记住的视觉感受是：充满诱惑的奖品池和引人注目的热闹感。而在这版方案中，因为缺乏这些匹配经验的形式，用户的识别受到阻碍，进而产生了疑惑。

满足功能的最简形式，不一定是最合适的形式。上述案例过度简化了抽奖中必要的表现形式，所以即使功能逻辑是完备的，也会让用户产生困惑。

如何设计更合适的抽奖形式呢？

在抽奖核心功能不变的情况下，我在表达形式上进行了探索。在迭代过程中主要用到了以下三种方法：

1. 放大元素自身的独特性
2. 营造热闹的氛围感
3. 打造抽奖的仪式感

1. 放大元素自身的独特性

基于品牌专区原有的组件设计规范，我快速调整了奖品池的展示样式，将奖品以图片的形式呈现。

但是，品牌专区除了抽奖活动还有多种形态相似的活动组件，如果基于规范采取相似的形态，用户会难以感受到抽奖活动的特殊性，仍然无法达到快速识别的目的。

在规范无法适用时，可以尝试突破规范。我提炼了抽奖活动的特殊性，将这些特殊性加以放大，在原有规范上打破重组:

1. 突出奖品信息，视觉上放大奖品的面积；
2. 增大抽奖操作并弱化标题，因为奖品及操作已经能代替标题解释活动；
3. 将一等奖奖品进一步放大，在形式上直观传达“奖品分等级”的概念。

打破重组后的抽奖组件的视觉重心落在了奖品与按钮上，与原来左文字右按钮的结构形成了较大的差异。

2. 营造热闹的氛围感

最初版本的抽奖组件配色用了品牌绿色，而这种冷色调用在抽奖活动上显得有点冷静，没有氛围感和热闹感。

如何营造抽奖活动的热闹感呢？

大家一定有抢微信红包的经历，而红包封面的配色往往采用引人注目的红色，搭配有金钱暗示的金色，烘托热闹的氛围并给人想抢的冲动。而抽奖与抢红包类似，都是有可能获得高额奖励的行为。因此最后的方案用了相似的配色思路：采用金色底色搭配显眼的红色按钮，提升活动的氛围感，让其更接近一个热闹的活动场。

3. 打造抽奖的仪式感

完成抽奖组件的样式改造后，功能终于顺利地上线了。

然而抽奖活动上线没几天，就有用户发来了这样的质疑：“我点完抽奖结果直接就跳出来，说我未中奖，这抽的也太快了吧！没有一点仪式感，你们的结果是不是内定的？”

用户的疑惑是因为当前的流程中并没有抽奖的等待过程。

在开发层面上，用户在点击抽奖时结果在后台其实已经确定了，一个类似“加载中”的抽奖过程的确没有实质作用。然而从用户反馈来看，抽奖的等待过程是一个不可或缺、有仪式感的环节，抽的过程很“爽”；同时，它还承载着证明抽奖真实性的作用，展示系统真的在随机抽取奖品，消除用户疑虑。这时候的等待不再是一种阻碍用户快速完成任务的拦路虎，而变成了一种有价值的体验。

最终，我们补充了这种富有体验感并且易于理解抽奖过程：随机抽取一张卡片，翻转卡片展示是否中奖。

抽奖过程看似是没有实质功能性的环节，但对用户的情感体验起到了重要的作用。

对比第一版方案和最终方案，虽然完成的是相同的功能，但后者采用适当的形式突出了奖品，增加了对用户的吸引力；用红和金的配色，烘托了更热闹的氛围；增加了抽奖过程，提升了仪式感。

功能需要恰当的形式，才能让被顺畅且优雅地表达。

功能与形式缺一不可

在内部工具门户的改版项目中，产品经理原来“变得更好看一点”的需求，作为设计师的我们是通过定位问题、推导功能来解决的：定位到门户信息混乱问题，针对性地使用信息分流与场景化查找的方法解决。

在抽奖组件的项目中，注重功能性的我也深刻地体会到了必要的形式对功能表达的作用：通过设计更符合直觉认知、满足情感诉求的组件样式，实现了体验更完整的抽奖功能。

这两个项目的设计思路，一个侧重在功能，一个侧重在形式，展示了设计中两种典型的视角：

形式来源于功能，是更关注“空”的设计师视角。在设计师视角下，我们关注本质，理性严谨地根据表象推导问题，并简单有效地解决；

功能需要恰当的形式，是更关注“色”的用户视角。在用户视角下，我们代入用户情境，设身处地地思考，用浅显易懂的“色”表达晦涩难懂的“空”，帮助用户顺利完成任务。

在面对复杂的挑战时，设计往往难以完美地解决问题。设计师能做的，是找到兼顾多方利益的平衡点，因此必须要综合考虑设计师视角和用户视角，当然，还有产品视角、开发视角、平台视角、生态视角等，任何一方视角的缺失都会破坏平衡。

总结

让我们再回到开篇的思考：形式与功能的关系是什么？

佛教经典《心经》中除了提到“色即是空”，还提到了另一句话——“色不异空”：色离不开空，色与空本是一体的。

形式与功能的关系也是如此：形式来源于功能，功能需要恰当的表现形式，功能与形式缺一不可。他们一体两面，共同服务于场景和用户需求。

如同建筑大师赖特所言：“形式和功能应该是一个整体，达成精神上的契合。”

参考文献：

• 铃木俊隆：禅者的初心
• Alex Zhu：Six And Half Philosophies for Design & Innovation
• Susan Weinschenk：100 things Every Designer Needs to Know About People

欢迎关注作者微信公众号：「We-Design」