0

形式与功能

 2 years ago
source link: https://www.uisdc.com/form-and-function
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

1天前 编辑: 土拨鼠作者: We-Design 评论区 阅读本文需 12 分钟

Sharing

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

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

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

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

本期提纲:

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

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

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

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

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

形式来源于功能

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

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

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

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

1. 剥离表象,发现本质

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

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

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

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

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

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

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

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

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

2. 从问题推导设计形式

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

信息分流

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

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

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

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

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

场景化查找

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

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

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

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

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

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

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

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

功能需要恰当的表达形式

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

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

用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」


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK