Sharing

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

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

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

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

本期提纲:

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

从 “色即是空” 引发的思考

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

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

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

形式来源于功能

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

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

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

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

1. 剥离表象,发现本质

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

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

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

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

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

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

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

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

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

2. 从问题推导设计形式

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

信息分流

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

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

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

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

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

场景化查找

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

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

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

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

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

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

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

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

功能需要恰当的表达形式

在功能面前,形式是次要的吗?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 营造热闹的氛围感

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

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

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

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

3. 打造抽奖的仪式感

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

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

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

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

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

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

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

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

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

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

功能与形式缺一不可

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

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

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

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

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

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

总结

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

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

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

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

参考文献:

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

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

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

点赞 15
收藏 22

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。

收藏