在产品设计中如何理解分布与整体的关系!

一. 格式塔原则

首先我想简单介绍一下格式塔原则,格式塔原则分成五个部分:

  • 相近(Proximity):距离相近的各部分趋于组成整体。
  • 相似(Similarity):在某一方面相似的各部分趋于组成整体。
  • 封闭(Closure):彼此相属、构成封闭实体的各部分趋于组成整体。
  • 连续(Continuity):我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。
  • 简单(Simplicity):具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

二. 说明与举例

相近(Proximity)

人们通常把位置相对靠近的事物当成一个整体。我用一幅图来说明一下:

同样都是16个圆形,你会把左图的16个圆形当成一个整体;但是右边那幅图,上面8个圆形和下面8个圆形分别靠近,所以你会把上面8个圆形当成一个整体,下面8个当成另外一个整体。

这里需要注意的是,相近性作为第一条原则,它的「权重」非常大,大到可以抵消其他原则,比如为上面的圆形添加颜色,甚至改变其形状,人们也会把相近的事物当成一个整体:

那么相近性原则的实际应用,又有哪些呢?

最常见的地方就在一些功能列表页面,比如设置,或者像微信的「发现」页面那样的功能列表页面。大家会把「扫一扫」和「摇一摇」、「购物」和「游戏」当成一个整体,这样可以使界面显得更加清晰,同时还能突出重点,这个列表的两头实际上是最突出的,像「朋友圈」和「小程序」。如果没有使用格式塔的相近原则,界面就会显得非常杂乱了。

相似(Similarity)

人们会把那些明显具有共同特性(如形状、大小、共同运动、方向、颜色等)的事物当成一个整体。比如下方第一幅图,大家会把同行的正方形当成一个整体,其他圆形当成一个整体。第二幅图,人们就会把大正方形当成整体,小正方形当成另一个整体。

而这里需要注意的一点是人们对形状、大小、共同运动、方向、颜色的「感受权重」是不一样的,在这里颜色属性会覆盖其他属性的影响:

左边这幅图,大家会把正方形当成一个整体,加了颜色后的右图,就变成竖列圆形+方形是个整体了。

全面提到了一个叫共同运动的东西,估计大家会很陌生,这里我想以安卓的交互规范为例,说明共同运动。安卓的悬浮按钮,就是一个用了相似性(共同运动)的设计,点击右下角的分享,从下往上会出现多个操作按钮,虽然 icon 不是一样的,但是因为同样是从下往上移动,所以人们会把他们当成一个整体。(这里我想强调一点,前面提到的形状、大小、共同运动、方向、颜色等条件,是可以组合使用的。这个悬浮按钮实际上用了共同运动、相同形状、同一颜色,从而达到相近性的目的。)

封闭(Closure)

人会将不完全封闭的东西当成一个统一的整体,所以有些时候完全闭合是没有必要的。比如世界自然基金会的 Logo,就是一个典型地用到封闭原则的设计:

熊猫的头部和背部并没有明显的封闭界限,但是我们依然会把它当成一只完整的熊猫。

那么封闭性原则又在哪些地方使用呢?

这一原则其实很多地方都用到,不过我们一般不叫其为封闭性原则,而是叫截断式设计。为了让用户感知到还有内容,一般我们会使用截断式设计。像微信的钱包页面,底部因为屏幕大小的关系被截掉了部分内容,但是用户可以通过残留的部分,“脑补”出下方仍然有个完整的整体:

连续(Continuity)

我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。首先请大家看看这幅图片:

大家觉得图里的是两个圆形呢?还是两个残缺圆和一个两圆相交的重合?

按照格式塔原则,我猜大家看到的应该是上方左边的两个圆形吧。

这个法则我们在交互设计上用得比较少,但是在视觉设计中会用得多一点,比如某些应用就喜欢把 App Store 上的应用截图做成连续的图片。

简单(Simplicity)

具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。给大家看看一个例子:

左边的界面就是个对称页面,所以我们会觉得左边的各个卡片是个整体,下方还有一个新的卡片。但是右边的卡片就不是了,因为整个页面不是对称的,用户可能会疑惑右边是不是还有卡片。

三. 总结

看了这几个例子,估计各位也发现,其实这几个原则都是可以混合使用的。希望这篇文章可以帮助大家设计出更优秀的界面!不过,在这里我想强调几点:

以前读书的时候,对这些理论不屑一顾,但是真的工作后,才发现熟练使用这些理论可以极大地提高你的工作效率。

原则不是一成不变的,熟练使用这些理论后,可以尝试「打破」这些原则,说不定可以创造出更棒的效果!

别让视觉差欺骗了我们的眼睛!

俗话说眼见为实,但其实我们的眼睛经常欺骗我们。眼睛通过光的反射接收信息,然后经过一次「脑补」最终形成我们所谓「看见」的图像。脑补这个过程会因为各种原因的影响导致我们对于「看见」的事物的理解产生偏差。这一点对图形化操作界面的设计非常影响。既然无法绕过,设计师就要学会如何去「适配」人类的视觉惯性画出“正确”的界面。

一. 物理尺寸与视觉尺寸

长宽 400px 的正方形与长宽 400px 的圆形哪一个更大?假如这样问你的话,那么答案当然是一样大。但是来看看下面这张图,长宽各 400px 的两个图形看起来并不一样大。你的眼睛告诉你 400px 的正方形比 400px 的圆形更大一些。物体的物理尺寸是一样的,但视觉尺寸却有可能不一样。

为了更加准确地证明这个现象的存在,下面这张图给出辅助线,大家好好看看。

我们改变一下圆形的尺寸,看看现在这两个图形的视觉尺寸有没有更接近一些?

每个人的感官可能都不一样,但对于我来说,调整尺寸后的两个图形看起来才是一样大的,至少也不会像图一一样,让人第一眼就认为正方形比较大。为什么会这样?因为我将圆的直径增加了 50px。

现在我们将图形都叠起来看,看看为什么会产生这种那么明显的误差。400px 的两个图形叠在一起,你会发现整个圆形都被包裹在了正方形之内,而正方形多出的四个面积巨大的 a 区域就是造成这种视觉误差的原因。再将 400px 的正方形与 450px 的圆形叠在一起,正方形无法将整个圆形包裹在内了,圆形超出的四个 b 区域又与 正方形多出来的 a 区域在视觉上互相抵消,所以 450px 的圆形与 400px 的正方形在视觉尺寸上更接近,也就是我们常说的“一样大”。

不仅是圆与方,所有的图形都能够造成这样的偏差。当我们追求“看起来一样大”这个目标的时候,某些形状的物理尺寸应该更大一些。

这个现象对于界面造成的影响会有哪些呢?譬如说,当绘制一套 icon 的时候,我们当然是追求每个 icon 都看起来一样大。但假如我们只通过物理尺寸来进行量度的画,画出来的 icon 必然会个大个小,乌七八糟,更糟糕的是,这种问题经常发生,手机里随便打开个 app 都能发现这样的问题。

在画 icon 的时候,一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大,视觉重量大的元素要缩小。建议大家可以去下载 HIG 的标注 icon 与 Material Design 的标准 icon 看看,数百个图标每一个的物理尺寸都不尽相同,但看起来全部都是一样大的,这是高水平的表现,值得细细学习与参详。

抽出几个当做例子,大家看看。

加个粉色等大的边框,或许你会看得更加清楚。

不是每个人都会有空给每个图标加个框来测量视觉尺寸的平衡,这里教个大家一个老司机才会的办法,搞个高斯模糊,如果高斯模糊之下每个图标看起来都差不多大,那么就可以说大致达成了视觉尺寸相等。

面对那些不需要由我们画的 icon,比如分享到 Twitter、分享到 Instagram ,官方已有提供的 icon,用起来也要注意。

下面举个例子,Facebook 和 Instagram 的 icon 是正方形的,而 Twitter 和 Pinterest 的 icon 一个是不规则图形,一个是圆形,所以为了达到视觉尺寸上的相等,当它们一起出现的时候,我们要放大 Twitter 和 Pinterest 的 icon,实际效果如图所示。

另外一个达不到视觉尺寸相等的重灾区就是表单配按钮这种常见的组合。通常是长方形的表单如果和直径相等的圆形按钮摆在一起,必然也会出现圆形按钮看起来比较小的问题。

处理方法相信大家也都知道了,略微放大按钮,这样整个表单和按钮才能达到视觉平衡,视觉尺寸才能相等。

对于这个现象的处理方法并没有那么简单,就拿上面那个例子来讲,有没有除了放大按钮以外的其他处理手法呢,当然是有的。条件允许的话我们可以对按钮添加一些颜色,让它看起来的视觉重量更重,这也能达成视觉尺寸相等。

记住这些点

  • 物体有物理尺寸,但是人眼所见,并对面积或体积自行加以理解后所认知的视觉尺寸并不会与物体的物理尺寸完全相等。
  • 正方形的视觉重量是最重的,越接近正方形的 icon 看起来也会更重,更大,反之更轻更小。
  • 规范建议绘制 icon 的安全区域主要就是为了解决视觉尺寸对等问题,留给设计师的操作空间。

二. 视觉对齐与形状

视觉对齐可以说是视觉尺寸这种现象的一种逻辑上的延伸。还是跟上半部分一样,来看张简单的图,这两个东西对齐了吗?

以物理尺寸的角度来看,它们绝对对齐了,因为这两个长条是一样长的。但是,由视觉的角度来看,上面那一条是不是看起来比下面那一条长一点?

我们修改下长度再看看。

试着增加下面那条长条的长度。让下面那条长条多出 20px,这时候它们看起来才是对齐的,达成了视觉对齐。

再来看看几种常见的样式。

以下这种彩带样式的图相信大家都做过,要让整个图看起来平衡、整齐,就要利用上这种现象,有意识地加长需要加长的部分,才能做到对齐。

我们再看一个实验例子,带背景的文本要如何进行对齐。这时候要根据背景颜色的深浅决定对齐的方式。

如果是浅色背景的话,我们就不需要改变文本的长度,直接添加背景,浅色的背景由于视觉重量轻,尚且不会造成什么不好的影响。

如果是深色背景的话,做法就不一样了。如图所示,我们要让黑色背景与文本对齐,而放置于黑色背景之内的文本要有一定程度的缩进,这样才能达到视觉对齐的效果。

与浅色背景不同,深色背景的视觉重量本身比较重,要让文本看起来更加一体的话,就一定要这样做。否则抓眼的背景会过分突出,让看起来对齐的感觉消失。

这种现象与排列原则最常应用于按钮与输入框。

左边的浅色背景输入框框体不会与标签文字对齐,框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐,而框内容无需与标签文字对齐。再看看发送按钮,左边的发送按钮与浅色背景的输入框为了达成视觉对齐故意地做短了一点点,右边的发送按钮也因为形状的缘故被故意地做长了一点,达成视觉对齐。

看起来非常简单,可是仅仅一个对齐的细节还是非常多的。现在我们单拿一个按钮出来挖掘更多细节。看看下面这个按钮,你会觉得里面的文字是完美居中的对吧。

它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字在物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文字必须靠左一些才能看起来对齐。

说完了水平居中,垂直居中也有非常多的细节要注意。这里告诉大家一个东西,对于大部分操作系统而言或者说较为成熟的设计语言而言,垂直居中必定以按钮文字的首一位大写字母的高度开始算起,但在 Sketch 中,所有的文字都会默认地带上行距,所以在制作文字按钮时,无论是中文还是英文,一定要注意调整行距,这样才能做到你所需要的垂直居中。

以次为排列原则基本上都会让文字(以首位大写字母算起)上下边距相等。大家都这样做的原因是在英文里面,有升部的字母(而大写字母的高度与升部字母的高度大体相似)(l,t,d,b,k,h)要多于有降部的字母(y,j,g,p)。

虽然我们不常用英文,但是多知道一些小常识没有坏处。

说完了文字按钮,再来说说 icon 按钮,相信这个问题你也经常看到过。看看下图,哪一个按钮看起来对齐得比较好?

好吧,希望你能够看出来左边那颗按钮是有问题的,实际上我在画这枚按钮的时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐的方式选错了。一般来说,我们都会默认将飞机当做是一个正方形来进行对齐,但由于图形形状的缘故,这样做必然是错的,将会导致 icon 过于靠左。

右边侧那枚按钮看起来就是对的,面对这种特殊的,带角的形状,一定要保证每个角距离按钮边缘的距离是一样的,而这种对齐的方式不能再将 icon 当做是一颗正方形来看。

这就不能依赖 Sketch 的对齐工具了,你要自己画个圆形作为参考线来进行对齐。

如下图,播放按钮也有三个角,那么做它的对齐工作也要注意啦。左边图那枚按钮就是直接点对齐的产物,看起来非常奇怪,对吧?

记住了,有角的 icon 要保证对齐的唯一方式是保证三个角到对应边的距离相等。

记住这些点

  • 边缘有角的图形要拉长一些才能在视觉上与方形边缘的长度对齐。
  • 制作文字按钮时一定要记得调整行距。
  • 有角 icon 的对齐方法是保证每个角到边的距离相等。

三.视觉圆角

圆角也有细节?不是设置一下就好了么?当然不是,一个简简单单的圆角也有很丰富的细节。我们前面说过了,眼睛看到的东西并不能尽信,先来看看下面五个圆并尝试回答哪个圆最圆。

我问过了很多人,大部分的回答都是 3 和 4 比较圆。第一个圆有点瘦,而第五个又有点胖,都不是很圆。还是学上面用到的套路,我们把 3 和 4 叠起来看。实际上 3 号是一个正圆形,而 4 号圆被做胖了一点点,并不是一个正圆,不过也正因如此,很多人会认为 4 才是一个正圆。

这里存在一个现象,经过一点点修改(变胖)的圆对于人的肉眼来说会比正圆更像正圆,这句话有点拗口,但是就是这个道理。看看下图,左手边的圆是一个正圆,右手边的圆是一个经过修改的圆,你瞧瞧是不是这个感觉。

那么我们又该如何利用这种无法规避的错觉呢?利用这一点最常见的地方就是圆角啦,而最著名的实例当然就是在 iOS 里面最常见的圆角了。

我们常用的几款设计软件,Sketch、PS、Ai 提供的圆角设置用的是非常直接的计算,就是用一个物理正圆来计算你要的圆角,我们上面说到,人眼不会认为正圆是正圆,所以这也是你无法在 Sketch 直接画出 iOS 圆角的最大原因。

打开这些软件做个圆角试试看,人眼对于直线在某个点开始转成曲线非常敏感,软件确实使用了一个完美的正圆来做圆角,但是给人的感受就是生硬且不自然。

我们拿那个视觉正圆来手动做个圆角比比看。

生硬的过渡瞬间消失,用非正圆画出来的圆角非常丝滑。

这枚非正圆因为胖了一些,多出来的那点正好给予了一定的过渡,让直线向曲线的改变更加平顺。这也是更接近 iOS 圆角的圆角制作方法。

我们把两个圆角画法放到一起比较。

圆角按钮也同样适用。

你的眼睛肯定能够察觉得出来右手边的那组按钮的圆角看起来更圆,更自然,也更悦目。

这个技法在 App 的 icon 的制作上也有大量的使用空间,在深入分析之前,我们来看看下面两个 icon。

左边是 Sketch 正圆圆角直出,右边是非正圆手动制作的 icon。很明显,右边那个更像 iOS 的 icon,看起来非常悦目,非常舒服。业界内也将绘制出这样的圆角的曲线称为 Lamé 曲线 (Lamé curve),由一位法国数学家, Gabriel Lamé 发现并命名。

这种曲线的方程式如下,从 iOS7 起,iPhone 所有的 icon 都基于此进行设计。除了那些 blingbling 的细节以外,除了这一种说法之外,还有说是由连个堆成的羊角曲线拼出来的。iOS 还有很多这些内涵深厚的细节,不得不感叹用户界面设计真是一门精深的学问。

一名优秀产品设计师,该做好的5项工作

产品设计师的角色

你要招一些内部设计师,那真是一个好消息!直到现在为止,你大部分的设计工作都依赖于一个外部代理,招一些内部设计师将有助于你组建一个更有效、更可预测的团队。

你的下一个任务是定义公司里产品设计这个角色。这是一个非常重要的角色。你不想只是简单地重现一个代理模型的内部版本。近年来,产品被创造的方式已经发生了重大变化,对于设计来说,新模式是其中至关重要的一部分。

下面将讲述现代产品设计师这个角色所做出的一些重大贡献:

产品定位

在老的模式中,设计师从产品经理那拿到需求或者详细规范来进行他们的设计。现代产品设计师则是不断的和产品经理以及工程师们协作。不仅限于最近项目的“设计阶段”,现代设计师应该参与一个产品从开发到上线到迭代的所有阶段。现代设计师应该和他/她的产品经理,如果有可能的话,和开发这个产品的所有工程师们坐在一起,而不是和年轻的设计师坐在一起。不是用设计工作产量来衡量一个产品设计师,而是用他们产品的成功来衡量。

timg-2

提到这些,好的产品设计师就会有许多和产品经理一样的需要担心的事情。他们深切以真实客户为导向,并且他们产品的价值就是带给这些客户的。他们同样明白,产品是为一个行业服务,并且将这些担心以及约束涵盖进一个产品设计里。设计师应该更进一步理解,对于用户价值来说,用户体验和基本功能同样重要的。

整体体验设计

用户体验(UX)比用户界面更重要。一些人甚至使用术语“客户体验(Customer Experience)”来进一步强调这一点。UX是客户以及终端用户识别你产品价值的某种方式。对于现代产品,它包括随着时间的推移客户对你公司以及产品的全部接触点以及交互方式。对于现代产品,这通常包含了多重不同的UI设计(网页,移动端,桌面等等),也包含了其他的客户触点(邮件,客户支持,通知,在线存储组合等等)。对于一些产品,UX同样包含了线下服务,如乘坐通过Uber召唤的车,或者住在通过AirBnb提供的房子里。

timg

好的产品设计师工作时需要带着一个广阔的UX视野。他们把客户在某一段时间内对产品以及公司的交互作为一个整体。根据产品,触点的列表可能会非常长。好的产品设计师应该考虑像这样的问题:

1、客户首次如何了解这个产品?

2、新用户如何登陆,以及如何(也许是逐渐的)发现新功能?

3、用户在一天中的不同时间段可能会如何产生交互?

4、还有什么其他东西在抢夺用户注意力?

5、一个一个月的老用户和一个一年的老用户有什么不同?

6、我们如何激发一个用户对于这个产品更高水平的承诺?

7、我们如何创造满足时刻?

8、一个用户会如何将他们的体验分享给其他人?

9、解决一个支持问题可能会是什么样?

10、客户如何接收一个线下服务?

11、什么是产品的感知响应性?

原型

现代产品团度最重要的工具之一是原型。探索出用户热爱的产品需要持续和同事协作以及不断和客户以及终端用户确认。原型提供了促进沟通的工具。比起线框图或者截屏,原型是一种更精准的想法呈现,因为他们能够抓取完整用户体验的许多其他方面。

timg-3

过去画原型需要工程师,但是随着原型工具的质量的提高,已经不再需要工程师。也有一些例外,但是现在主要的原型已经不需要工程师了。反而是设计师来画原型,他们能够用来画原型的工具已经戏剧性的提升了。好的产品设计师使用原型作为他们内外部交流思想的主要画布。他们游刃于大量不同的原型工具之中,依据手边的工作使用不同的工具。

用户测试

好的产品设计师会基于真实的用户和客户持续测试他们的想法。他们不仅在一个产品或概念成型的时候测试,而是会将测试纳入他们的周计划里。这种固定的节奏意味着他们能够不断确认、完善想法,同时能够收集一些他们之前也许并没有找到的新方式。这也意味着在他们接触外部客观意见之前,他们不可能过于依赖想法。

用户测试比可用性测试更加宽广。产品设计师以及他们的产品团队利用可用性测试来评估他们想法的价值。客户会实际使用或者购买产品吗?如果不会,它还需要什么?

交互和视觉设计

视觉设计和交互设计曾被当成两个独立的角色。视觉设计包括像布局、字体以及视觉品牌如何会表达类的东西。交互设计通常包括像基础的概念模型(例如一款照片管理应用也许有“照片”、“专辑”、“项目”等等),任务流以及控制图层来管理这些概念。

sleeping_beauty

现代产品设计师也许有不同的特长,但是一般来说都包括视觉以及交互设计的技能。拥有更多具有竞争力的技能,允许他们根据上下环境快速制出不同等级的保真度。它还允许他们单独考虑交互和设计时,能以不可能的方式下设计经验。这在移动端界面中特别重要,当设计师必须要创造一些新的和视觉设计互相交错的交互模型时。

所以现在怎样?

你说,这一切都很好,但这些人很难招到。招到牛叉的人是非常困难的工作,但就像我们需要招聘一个强大的产品经理和强大的工程师一样,招到一个强大的产品设计师也非常重要。

你想尽可能快的为你们组织找到一个强大的设计师,但是强大UX的责任不应该仅仅来自于他们。它同样涉及到产品团队中的其他成员,像产品经理和工程师。你可以立刻提高“对于强大的UX是什么”的意识以及设置对其的期待。确保你的工程师以及产品经理明白产品在用户体验中的价值有多高。鼓励他们在用户了解这个产品之前就开始广泛的思考一个完整的用户体验。让他们用原型以及用户测试去证实他们的想法。

现代产品设计不仅是招聘员工,它将为你的团队和你的进程找到设计重点。

原文地址:http://svpg.com/the-product-designer-role/,由Summer翻译整理发布。