「设计师问设计师」第3期 如何避免“为规范而规范”

「设计师问设计师」第3期 如何避免“为规范而规范”

本期问题

如何避免为了视觉的规范而规范,忽视各业务场景的不同诉求?

—— Hotdog 等读者

这期的问题,本质上还是上一期“设计规范”这一主题的延续。

上一期我们邀请的三位设计师,都是从一次大改版中设计规范主设计师的角度分享了自己对于制定统一规范的理解。

而从后台的留言中小编发现,许多小伙伴更关注的是另一个角度——从具体业务场景设计的角度,如何避免“为规范而规范”、忽视实际场景中的业务诉求。

因此,本期我们决定继续就设计规范进行更深层次的讨论,只是这次我们邀请的3位设计师都来自淘宝具体的业务场景,看看他们是如何理解这个问题的。

淘宝的内容详情页涵盖了大量不同品牌、不同场景特色的细分类型,是一个设计规范问题上很典型的场景,首先来看看负责内容详情的设计师的想法吧!

回答1
收紧整体框架,开放内容主体

最开始,不同内容详情交由各个业务分别开放设计,这时产生了平台整体性缺失的问题,并且大量时间重复花费在与内容特色无关的框架设计上。

于是针对这个问题,我们推动了内容统一化的改版。在1.0阶段,我们从模块设计统一开始切入,将内容拆解成各种模块统一进行优化,将内容详情页的不同元素统一为典型模块之后,让各个业务方去拼接。

但这一策略又带来了新的问题:

1. 无品牌感知;

2. 场景特色模糊;

3. 拼接方式各异,依旧避免不了整体性缺失;

于是,在内容化2.0阶段,我们采取了收放结合的原则,收紧整体框架,开放内容主体

「设计师问设计师」第3期 如何避免“为规范而规范”

对于内容详情的整体框架,需要遵循统一的交互/视觉规范,给用户一个整体的淘宝内容心智认知,但是在体现内容特色的内容主体部分,充分开放给各业务的设计师,进行场景化的内容表达,将精力更多的放在内容本身的设计而非框架上。这样整体的统一、深化和提升可以更顺利的进行,而各业务的场景、特色也能够充分得以保证。

from 定春

在手机淘宝视觉规范的接入中,商品详情场景的设计师又是如何考虑的?

回答2
重要的前置判断:场景心智

商品详情作为手机淘宝流量最为集中的场景之一,在组控件样式、字号边距、宝贝坑位样式等设计细节上都非常严谨地执行了淘宝的全局视觉规范。

这里仅就提问的小伙伴最关系的问题,举一个很简单又很典型的例子来说明,在什么地方不应该“为规范而规范”。

细心的小伙伴也许发现,今年焕然一新的淘宝从首页到各个具体体验节点,很多地方都可以看到风格统一、应用灵活而优雅的圆角卡片,而宝贝详情页中却鲜有卡片化的踪影。

实际上,在设计提案过程中,也曾经考虑过让宝贝详情的不同信息区块分别进行卡片化的处理。

首先,越来越多的内容类型、业务玩法接入后,商品详情确实在应“万能的淘宝”的要求变得更加丰富、多元和“万能”,但究其本质,对用户的心智仍然是一个消费决策末端“该有的信息都完整呈现”的表单。而卡片更多情况下的定位仍然是一个信息外透入口的心智。入口型心智决定了,可以在柔和的圆角界定出的卡片空间内,更优雅地呈现截断后的摘要文本、起预览作用的缩略图,对首页、微淘、频道、店铺等导购场景都非常合适。而对商品详情这样一个平面化、表单型心智的场景而言,这样的处理并不符合希望看到最完整信息的用户预期。

其次,一个更实际的问题就是信息承载量,同等空间和条件下,卡片是不如通栏设计的空间利用率高的。一个非常直观的变化就是卡片化处理中左右边距的增加,至少给每行的文本展示量带来了3-4个字符的损失。这对力求尽可能(在无需跳转、展开、浮层等二次交互行为的情况下)展示完整信息的宝贝详情而言,并不是一个合理的选择。

除此之外,在具体的设计细节上,内容类型、业务特色、品牌差异性这些原因,也都可能要求设计师对“是否固守全局设计规范”这个问题通过自己的经验做出不同的决定。

但希望能通过这个小例子说明,有时需要先放眼完整的体验链路,从场景心智的角度做出更重要的判断。

from 思塬

或许很多读者小伙伴所负责的并不是淘宝这样一个典型To C产品,那么纵观To B和To C,来听听对两端设计都有深刻理解的设计师如何是说。

回答3
活用规范:设计阶段与产品类型

什么时候用规范?

“如何避免为视觉的规范而规范”,我理解是,不要让过于具象的规范影响你的设计思路,尤其是前期的设计思维的发散。这就需要注意视觉规范的使用场合了。

规范的制定是为了让各个业务产出的设计都有一致性,以降低用户的认知成本,保持一致的操作习惯。

所以规范通常只定义最基本的元素和风格,像主色、圆角、间距、字号等。

我认为视觉规范最重要的作用应该是在整个设计流程靠后的阶段,而前期设计师应该更聚焦于业务的诉求,这个阶段可以理性分析,也可以充分发挥创意。先设计合适的功能架构,再使用规范去保持与平台的一致性。

活用规范

规范定义的是设计中最常使用的元素,这就肯定不能覆盖所有的设计场合。当遇到规范之外的设计时,可以通过充分理解规范的风格,以寻求一个和谐的设计。

如果遇到规范和需求有冲突时,就要权衡考虑了。如果是toB类的产品,一致性和高效比较重要,那大可使用规范的UI Kit,不重复造轮子也是这个道理。但to C类的产品,场景大有不同,可能一个细微的变化就会影响用户的感觉。所以可以在规范的基础上做一定范围的自定义,甚至可以推动规范去细化这个业务场景。

from 目想

设计规范的话题延续了两期,但相信对设计规范的思考和执行过程中的拿捏,是每个互联网产品设计师在整个职业生涯都将不断思考的问题,也是见证或判断设计师成长、蜕变的重要判据,共勉。

以上是本期回答的全部内容,希望提问和围观的小伙伴们满意:)

「设计师问设计师」第3期 如何避免“为规范而规范”

往期回顾

「设计师问设计师」第2期 淘宝的设计规范是如何统一的?

「设计师问设计师」第1期 在淘宝有没有不会画画的设计师

「设计师问设计师」问题持续征集中……

是对淘宝某个界面、功能设计背后的故事非常好奇?想了解进阶之路上的技能树攻略?对体验设计的未来发展存在困惑?想了解图标、动效等具体设计过程中的思路与技法?想八卦淘宝设计师们的工作环境、日常爱好……

无论你的问题是什么,都可以随时向我们提问!

参与本栏目提问,请在公众号后台直接留言(或本系列文章下方留言区亦可),问题前加“#设计师问设计师#”前缀。

还等什么,马上参与吧!

原文始发于微信公众号(淘宝设计):「设计师问设计师」第3期 如何避免“为规范而规范”

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码