产品设计:鸡肋的黄金比例

哲学分两大派系:经院哲学和街头哲学。如果没有经院哲学,街头哲学将变得语无伦次;如果没有街头哲学,经院哲学将变得无关紧要。经院哲学和街头哲学的关系就好比“理论”和“实践”,理论对实践具有指导性意义,但却无法百分百的应对所有问题!

产品设计:鸡肋的黄金比例

我们身边每天充斥的各种专业理论的专业文章,但一到落实阶段就显的有些鸡肋,例如黄金比例。

1.黄金比例的常见用法

黄金比例在平面的视觉设计中被广泛应用到,例如我们常看到的海报设计,平面设计师往往需要的借鉴黄金比例来确定海报的版式骨架、以及各元素的摆放位置和最佳视觉消失点。

产品设计:鸡肋的黄金比例

2.黄金比例不是万能的

黄金比例的比例数据是否能与我们实际的设计百分百相契合?我们通过实际的线上产品的界面设计为例进行比对分析,例如金刚区的图标设计以及页面在整体布局设计中的比例关系。

2.1.图标设计

在金刚区的 icon 设计上,大家都或多或少的都听过这个方法:用外轮廓面积乘以 0.618 ,得出内部 icon 图形的黄金比例面积大小。

产品设计:鸡肋的黄金比例

黄金比例的这种方法论与实际设计真的百分百相契合么?我们通过已经画好的比例参考线对京东和亚马逊的金刚区的图标设计进行比例比对:

产品设计:鸡肋的黄金比例

京东和亚马逊的金刚区图标设计统一在2x倍率下进行比例比对,我们通过提前计算好的比例圆环关系图进行对比,我们可以明显看出内部的图形大小并不符合预期中黄金比例关系,内部的图形明显超出或者小于黄金比例的范围值,甚至在亚马逊的金刚区中底部的图标根本没有按照黄金比例关系的进行设计,所以黄金比例的方法论并不能百分百适用于金刚区的图标设计。

3.界面版式设计

在实际的产品界面版式设计中,借助黄金比例对界面进行分割并不是很合适。或许大家在在设计概念稿的时候会借助黄金比例对界面的版式布局进行分割,但是一旦落实到实际的业务中,它们的关系并不是对等的。

产品设计:鸡肋的黄金比例

我们以实际落地项目作为参考依据,统一在2x倍率下与已计算好的黄金比例的比例分割线进行对比,这里我们以支付宝的首页为例,在不同功能数量的情况下界面的版式布局都没有遵循黄金比例的分割线进行排布。

产品设计:鸡肋的黄金比例

我们再以网易新闻、今日头条、新浪新闻等 app 为例 我们发现在这种 feed 流的使用场景下,feed 流的目的是不断给用户提供内容,在设计形式上会以平铺内容模块为主,所以黄金比例在 feed 流的设计当中不具备实际参考意义。

产品设计:鸡肋的黄金比例

4.为什么黄金比例会如此鸡肋

在金刚区图标和页面版式布局的例子中黄金比例并不适用,甚至显得很鸡肋。出现这种状况很大一部分原因是我们忽略了实际线上产品的“业务属性”和界面设计自身的“动态属性”。

4.1.业务属性

在产品设计中我们首先要考虑的就是它的业务属性,我们的设计是否能够满足用户对业务的需求!其次是考虑设计中的目的性,例如我们当前的业务目标是提升某核心模块的点击率,这个时候设计的工作是更好的引导用户去点击选择该模块,通常我们会通过多种方式去提高该模块视觉识别性。

我们回到实际线上的例子当中,这里以京东的金刚区的图标设计为例,金刚区的首要目标是为其它业务进行导流,而不是精致的黄金比例!所以为了提高视觉识别性会将图标做的尽量大一些,而不是简单的遵循黄金比例的设计方法论。

产品设计:鸡肋的黄金比例

再例如亚马逊的金刚区设计,其中有一半的业务是海外直邮的业务,具有很强的目的性,所以首要的任务是突出它业务的视觉识别性,亚马逊这里直接使用各国的国旗进行图形的遮罩处理,简单直白,用户能够快速识别,节省了认知成本。假设使用黄金比例进行换算设计,缩小关键的图形设计则大大影响图标的视觉识别性,进而导致影响业务的点击率。

产品设计:鸡肋的黄金比例

4.2.页面的动态属性

页面并非一成不变的,更多的是随着功能增减页面发生动态的变化,例如一些产品会为用户提供更多选择的权限,用户可以根据自身的需求将自己常用的功能设置在首页,随着功能的增减整个功能模块的高度也会发生动态的变化。

在支付宝的首页功能模块中,用户可以根据自身的实际需求进行编辑,通过编辑功能图标我们可以看到该模块的高度尺寸是根据用户需求进行动态变化的,并非一个固定值,所以在这里黄金比例的借鉴也无从谈起。

产品设计:鸡肋的黄金比例

4.3.交互的动态属性

页面也并非是静止的,它需要和用户进行实时的交互,所以界面中的各个元素是不断变化的。例如 feed 流的设计,它不需要不断的为用户展示新的内容,具有很强的交互性,需要用户不断的去滑动屏幕下拉刷新,这个时候黄金比例并不能为整个界面设计提供很好的版式设计参考。

在我们常用的资讯类型的 app 中,大多数都采用了 feed 流的设计,用户在浏览的时候需要不断的下拉刷新内容,处于一个实时交互的动态场景,黄金比例的版式布局自然也没有什么参考价值。

产品设计:鸡肋的黄金比例

4.4.界面的适配

在界面的适配中,界面的元素是动态的。在适配中我们需要注意两个主要的问题:倍率和手机分辨率。首先是倍率的问题,在不同倍率下界面适配的内容的高度尺寸会发生变化,导致界面中所显示的内容也有所不同。例如支付宝首页在 iphone6 和 iphone6 plus 上显示,分别是2x 倍率和3x 倍率,通过图例我们可以看出,在3x 倍率下的内容会比2x 倍率下的内容更多。

产品设计:鸡肋的黄金比例

手机的分辨率也是影响界面适配的重要因素,在同倍率下,手机分辨高的界面比手机分辨低的界面显示的内容更多,例如支付宝首页在同等3x 倍率下, iphone Xs 所显示的内容明显要比 iphone6 多出一个模块。

产品设计:鸡肋的黄金比例

由于适配的动态变化,同一个界面在不同的显示倍率和手机分辨率的情况下,显示的内容也会根据实际的适配情况发生改变,面对动态变化的适配设计黄金比例显的十分鸡肋。

5.画重点

  1. 优秀的设计可能并不能与设计理论百分百相契合,因为在理论知识面前更加重要的是对实际业务和最终实际落地的分析。
  2. 黄金比例在实际设计中显得鸡肋的原因主要有两点:首先是忽略了产品的实际的业务目标,产品始终会以业务为主;其次是忽略了界面自身的动态属性,其中导致动态属性变化的因素有:一是功能的自定义变化、二是页面的交互动效、三是界面适配情况。
业界动态

教育行业实操分享:从零开始做教育行业的运营流程(中)

2019-11-22 17:28:40

业界动态

产品运营:用五大要素,做出漂亮的商品详情页(上)

2019-11-22 17:54:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索