澳纽网

优设 - 澳纽网Ausnz.net聚合阅读



文案信息较多时,该如何编排版面才会好看?

相信刚接触设计或者工作时间不长的设计师,多多少少都会遇到各种各样的编排问题。今天这篇文章就是源于一位设计师提出的问题,他说:「当文案信息较多时要如何编排,版面看上去才能美观一些」。我相信大部分人都遇到过类似的情况,为此我收集了不少相关的设计作品,从中也总结出了一些编排的方法分享给大家。

往期回顾:

不过编排方法部分我放在了文章的最后,因为在编排前还有不少细节要注意,下面我就带着大家先从最基本的建立页面开始逐步过渡到编排。

在我们订阅号之前的文章中提到过这样一个观点:版面是承载信息的一个载体。而一个版面承载信息的数量,完全取决于版心的大小。想要放下大量的信息,版心一定要大。但到底要多大才合适呢?

除去天头地脚、左右页边距以外,剩下的空间就是版心所在的区域。也就是说确定好天头地脚,左右页边距后版心就被确定好了。

设定页边距的方式有两种,第一种是:等距设置,也就是天头地脚、左右页边距的大小都是相同的。第二种是:不等距设置,天头有可能大于地脚,左页边距也可能大于右页边距。而在这两种设置方法中,等距设置是最常用的。

不管是在海报、书籍、网页还是包装中,等距设置都会让版面看起来非常稳定。所以在设定页边距时,四边的大小最好是一致的,尤其是左右页边距。因为,如果左右页边距设定的不一样,版面很有可能会出现重心不稳的情况。

当左页边距大于右页边距时,重心可能会偏向右边。同理,当右页边距大于左页边距时,重心就可能会偏向左边。

不过存在即合理,虽然不等距设置会使版面重心变得不稳。但利用这个特性故意将天头地脚、左右页边距设置得不一样时,也能给版面带来动感。

我们来看这组对比,左边的两幅海报明显是不等距设置,跟右边的等距设置相比,左边的海报少了四四方方的平稳感,却多了一些随意又轻松的活跃感。

但是也不能以偏概全,因为即便是等距设置的版面也同样可以做出动感,比如现在我们看到的这些海报就是很好的例子。画面给人带来什么样的印象,取决于版面的编排方式,而不等距设置只是众多方法中的一种而已。

在实际操作中设定不等距的页边距时,可以用一个边的大小做参考,然后其他三边都与它呈一定的倍率关系。假设我们以天头作为参考,将它的边距设为 1,地脚可以是天头的 2 倍,也就是 2。左页边距也可以是天头的 2 倍。右页边距可以是天头的 1 倍,也就是等于天头的大小。

虽然边距的大小可以自由设置,但是如果没有一个参考标准的话,一开始可能会无从下手,所以接下来我会根据不同尺寸的版面、文字数量的多少,列举出一些标准的页边距数值,供大家参考使用。当然在实际操作中,如果发现有不合适的地方,可以根据具体的需求来做调整。

这是我们常用的纸张规格:A0-A4、B0-B4。有一点要跟大家说明的是,不管是从 A0-A4 还是 B0-B4,它们只是纸张大小发生变化,而长宽比例是不变的。

因为一张完整的 A0 尺寸的纸张,只要从长边的中点对开一次就可以得到两张 A1,如果 A1 能够等比放大的话,还是一个 A0 的大小。后面的变化以此类推,我们常用的 A4 就是由 A0 对开四次得到的。

针对 A0、B0 尺寸的版面,信息量多时页边距可以设定在 25~40mm 之间;信息量少时页边距可以设定在 40mm 或 40mm 以上。

针对 A1-A3、B1-B3 尺寸的版面,信息量多时页边距可以设定在 7~12mm 之间;信息量少时页边距可以设定在 12mm 或 12mm 以上。

针对 A4、B4 尺寸的版面,信息量多时页边距可以设定在 7~10mm 之间;信息量少时页边距可以设定在 10mm或 10mm 以上。

当信息量较少时,页边距的设定有两个选择:可以大也可以小。而当信息量较多时为了编排考虑,页边距只能设定的小一些,好为版心腾出空间来。

我们可以看上面这两张对比图,在同一个箱子里放置衣物时,左边的箱子非常凌乱而且明显装不下,而右边的箱子却非常整洁东西全都装进去了,因为右边的箱子是整理过后的。这是我想说的另一件事,在确定好版心后想要在其内部编排大量信息的话,首先要学会整理信息。

群组化

不知道大家在看我们之前的教程时,有没有注意到一个词叫「群组化」。我们在整理信息时,最简单又有效的手段就是「群组化」,将不同的信息按照类别来进行分组,这样就可以完成既容易理解又不会造成误会的设计。而且对文案信息进行分组既能帮到设计师,也能帮到观看版面的受众群体,为什么这么说呢?下面我们来说一下「群组化」的优点都有哪些。

1. 使读者快速理解版面信息

在以上两个版面中,哪个版面内部的信息更易于理解呢?我相信很多人已经有判断了。跟左边的版面比,右边的版面元素分类明确,信息一目了然。

2. 减少读者观看版面的时间

减少读者的获取信息的时间这一点这非常有意义。要知道一张招贴海报,它被阅读的时间只有几秒钟,如果我们设计师还故意给读者制造阅读上的障碍,这只会影响信息的传播效率。

还是之前那个例子,通过对比大家也可以看出,群组化后的版面阅读起来更为轻松,读者也能在最短的时间内获取更多的信息。因为群组化后信息是比较集中的,视线不用在版面上来回跳跃,节省了这段时间,阅读版面的速度自然会得到提升。

3. 优化负空间使留白更完整

处理好留白问题,版面就不会显得凌乱,通过这个对比图就能看出,右侧版面经过群组化之后的信息更加清晰易读,留白部分也更加完整。

版面元素是彼此相关的,也是构成页面的主角。在编排时要刻意将存在关联的信息放在一起,这是群组化的基本原则。而这个原则也有一个名称叫做「亲密性原则」(即接近原则)。

亲密性原则

亲密性原则是由格式塔组织律中的邻近性原则转变而来的。说的是相互接近的元素比起相互远离的,更具有成组的倾向。利用亲密性原则,我们可以做到让页面内的信息排布疏密得当,元素与元素之间的联系即符合逻辑又满足视觉认知的要求,这大大降低了读者在浏览版面时的视觉负担。可谓是版面编排设计的重中之重。

简单来说,亲密性原则就是将存在关联性的信息进行群组。但是要如何判断信息与信息之间,是否存在关联性呢?这也是我接下来要讲的重点了。我们就以一张展览海报中一定会出现的文案信息来举例子。

我将这些信息都拟人化了,目的也是为了让大家更好的理解,什么是亲密性原则。首先是小明的爷爷,他对应着标题,小明的奶奶对应着的副标题,小明的叔叔对应着标题或副标题的英文翻译,小明的爸爸对应着时间,小明的妈妈对应着地点,而小明自己对应着主办方、协办方等说明信息。

我们可以看到,标题和副标题可以成为一组,因为小明的爷爷和奶奶是夫妻关系,英文和时间信息可以成为一组,因为小明的叔叔和爸爸是兄弟关系,地点和主办协办信息可以成为一组,因为小明和他的妈妈是母子关系。这是最基本的一个信息分组方式,关系也很明确。接下来看看在实际的海报中,分组的方式都有哪些变化。

首先看这张海报,它的的分组方式是:将标题、副标题以及英文翻译归为一组,时间地点主办方等信息归为另外一组。我们通过家族体系表来看看,他这么分组的依据在哪呢。

通过家族体系表我们发现,他的分组逻辑是这样的:小明的爷爷奶奶本就是一组的,再加上叔叔也很合理,因为他们之间是亲子关系。而时间地点和主办方成为一组,它们分别对应着小明和他的爸爸妈妈,同样也是亲子关系。

再来看看这张海报的分组方式是什么。设计师将标题和副标题组合在了一起,而英文翻译单独存在,再接着就是时间地点主办协办方等信息。

通过家族体系表我们发现,这个分组方式和上一张海报的非常类似,唯一的区别在于英文翻译独立存在了。这就引出了分组时要注意的第一个要点:

1. 存在关联的信息可以成组也可分离

接着看这张海报的分组方式:标题独立存在、副标题也独立存在,英文翻译和时间地点等信息成为一组,没有主办协办方等信息。

之前也说过了,存在关联的信息既可以成组也可以分离。所以标题、副标题独立存在没有任何问题,那英文翻译为什么可以和时间地点成组呢?因为,小明的叔叔和爸爸是兄弟关系,小明的爸爸和妈妈是夫妻关系。但是这里我们要注意,即使是互相存在关联的信息也存在着强弱之分。这就是在分组时要注意的第二个要点:

2. 互相存在关联的信息也有强弱之分

再看一下原海报,我们也可以发现这个特点,即便是在同一个组内,英文翻译与时间地点之间还是有一定距离的。

我们再看这张海报,它的分组方式有点特殊了,设计师将标题副标题、时间地点、主办方等信息分成了一组,英文翻译独立存在。

之所以这么分组,依据在于小明的爷爷和奶奶本就是一组的,而小明的爸爸和他们之间是亲子关系,小明与他的爸妈之间也是亲子关系的。所以可以将标题副标题、时间地点、主办协办等信息全部划分在一个组合内,但要注意好关系之间的强弱之分。英文翻译单独出现理由前面已经说过了就不再赘述。

最后我们再来看看这张海报,设计师将所有的信息都整合在了一起,这又是什么分法呢?

因为他们都是一家人,彼此之间都存在关联性,因此将所有的信息组合在一起也同样是合理的。

说完分组的方法后,再来说说组合数量的问题吧。在这一组的海报中,从左至右,文字组的数量逐步递增,随着组合数量的增加版面的编排难度也在增加,组合的数量越多版面的编排难度也就越高,所以大家在分组时千万不要贪多,那会给你的版面规划带来困扰。

通过距离我们能判断出,一个版面中到底存在有多少个组合,因为离得越近越有成组的倾向。

值得一提的是组合也有大小之分,一般大组合中都会包含几个小组合。因为,所谓的大组合就是由这些小组合组成的。

我们单独来看上面这张海报中的大组合,发现里面包含许多小组合,这些小组合之间也都存在距离,这个距离就是「组间距」。

组间距

组间距的大小由亲密性原则控制,关系越亲密组与组之间的距离也就越小。但这个距离是有个度的,离得近不代表就要挨在一起,离得远也不代表就要彻底拉开。

1. 组间距的大小由亲密性原则控制

为了方便大家理解组间距的设定方式,我们看一下下面这个例子。

这个组合它的组间距是怎么设定的?是随意摆弄的吗?肯定不是。设定组间距是有方法的,比如关系较为亲密的信息之间,间隔的距离可以参照小字号文字的字高。

在这个组合中小字号的文字有三组,我用蓝色标出。

我挑选了这组文字作为参考。因为它的大小适中,用它能避免信息与信息之间发生粘连。而关系较为疏远的信息之间,间隔的距离则可以参照大字号文字的字高。

在这个组合中最大的字号就是中文标题了,我选择用它作为参照,那些间隔较大的距离就是这么设定的。

仔细看大家能发现,我并没有百分百严丝合缝的去卡字高,因为没有必要这么做,知道一个大致的距离就可以了。如果你就是想严丝合缝的对齐上也没问题。

如果出现因信息量较多,导致像上图这样无法设置组间距时该怎么办呢?这个时候我们可以使用「相似原则」或者「闭合原则」来解决这个问题。

相似原则

相似原则,即彼此相似的元素容易被认知为一个整体,如:色彩相似、形状相似等等。

拿色彩相似来说,运用的方式非常简单就是最基本的换色。通过给文字组换上不同的色彩来进行区分。

色彩相似是换色,同理形状相似就是换字体。各个字体的外形都不一样,给文字组换上不同的字体,是可以起到区分作用的。不过,这需要设计师对字体有较深入的研究才能做好。

因为不同字体混搭在一起,稍有不慎就会导致版面看起来非常凌乱,字与字之间仿佛在打架非常不和谐。总的来说我更推荐大家使用色彩相似,操作难度低且容易出效果。

闭合原则

闭合原则就是通过框选的方式来进行分组的。被框在一起的元素容易被认知成一个整体。

比如这张海报,就是通过框选的方式进行分组的。

如果不想进行多个框选的话,还可以像这样单纯使用线条来进行分割,同样能起到闭合的效果。

这是为什么呢?格式塔原理大家都不陌生吧,我们在之前的文章中有专门讲过,用格式塔原理中的封闭原则就可以解释这一现象。

我们看左边的图形时第一眼感受到的,除了三条线段以外还有一个圆形。因为我们的视觉系统,强烈倾向于看到完整的物体,以至于大脑能将一块空白的区域解析成一个图形。

上面这张海报就是一个很好的例子,去除掉文字后我们能明显的感受到,版面被线段裁切成了 5 份,而每一份都是一个独立且封闭的图形。

讲到这大家还记得开篇处那位同学的问题吗:「当文案信息较多时要如何编排,版面看上去才能美观一些」。其实之前讲的所有理论部分,都是给编排部分做铺垫用的。因为只有当确定好版心以及整理完信息后,我们才需考虑要编排问题。另外我还附带了一个内容,那就是图片数量对版式的影响。

为什么要加这个内容呢?因为,我们在编排版面的时候不光要排文字还要排图片,图片数量不同对应的编排方式也有所不同。下面就给大家介绍一下,针对信息量较多图片数量又不同的版面,都有哪些编排的方式。

图文穿插

排法一:图文穿插。信息量多,图片数量在 4 张或是 4 张以上时,我们可以使用图文穿插的手法。

它的表现形式就是图片或是图形,与文字信息相互穿插排列。用这种相对活泼的方式可以用来缓解阅读大面积文字时所产生的压力。

图文穿插可以分为:规则型与不规则型两种。

1. 规则型

报纸我们都知道,它是用来承载大量信息与图片素材的一个载体,它就是一个很好的规则型的例子。

其中最值得我们借鉴的,就是早期报纸的编排方式。将不同的文字组安排在划分好的区域内,然后用框或是用线来区分文字组。这是属于有规则的图文穿插形式,讲究的是秩序美。

2. 不规则型

不规则型的图文穿插,跟规则型比起来更为灵活多变。不过难点在于,需要设计师有较强的编排功底才能驾驭。

图字叠压

排法二:图字叠压。信息量多,图片数量少时可以使用图字叠压的手法。因为是叫图字叠压,所以图既可以叠在字上,字也可以叠在图上。

1. 图叠字

首先,我们来看看图叠字的表现形式。手法非常简单,就是图片叠压在文字上方,而被叠压的文字大多都是标题或者标题的英文翻译。在实际操作时有一点要注意的是,我们要确保被压住的文字能被识别出来,也就是说叠压的幅度不能太大。

如果遇到因叠压幅度太大,导致文字无法被识别出来时,大家可以试试在图片的上方,再叠压一层描边后的文字;运用这个方法能使被压住的文字恢复一些识别性。

2. 字叠图

字叠图和图叠字一样,就是位置转换了一下而已。图叠字要注意的是文字,而字叠图要注意的就是图片了;在运用字叠图时,要记住文字不能挡住图片最吸引眼球的地方。

比如人物类图片不能遮挡面部,因为我们的视觉习惯已经决定好了,第一眼看的就是脸,除了脸以外还有眼睛,这也是不能被遮挡的。

如果图片没有特别吸引眼球的地方,就可以不用考虑遮不遮挡的问题。像这种常见的物体类图片;可以随意叠压,因为这类图片并没有非常突出的地方。

还有当图片充当底纹用的时候,也可以随意的进行叠压。

文字叠压

最后一个排法:文字叠压。文字信息量多且无配图时,可以使用文字叠压的手法,也就是文字与文字之间进行叠压。为什么没有图片时要使用这个手法呢?因为面对空无一图的版面时,受众的阅读欲望是非常低的。这时版面中就需要有一个亮点来吸引受众的视线,而字叠字就是用来创造亮点的手段。

在使用字叠字时也分两种形式:一、文字充当底纹;二、为了保证文字的识别性而使用的正片叠底。充当底纹大家都懂,那什么是正片叠底呢?

当两组相互叠压的文字,填充了对比色或是互补色时,为了使双方的识别性都不受到影响,就会使用图层混合模式中的「正片叠底」选项。正片叠底后文字被遮挡的部分就会浮现出来,这就是正片叠底形。

案例演示

文案信息包括:标题信息、标题翻译信息、作者译者信息、卖点信息、以及装饰信息等 5 大部分。下面为大家拆解一下这些信息都有哪些合理的分组逻辑。

前三个部分描述的是:书名、书名的翻译、以及这本书的作者和译者,它们是可以成为一个组合的。

接下来卖点信息部分,它主要描述的就是这本书的概况,也是对书名的一个补充。总的来说所有卖点信息都和标题有关系,但关系的强弱之分我已经标明出来了,从卖点 1 到卖点 4。而在这四个卖点中与标题关系最近的就是卖点 1,也就是说能和标题单独成组的只有卖点 1,因为它最简洁有力就像广告语一样。因此,如果其它三个卖点想要和标题成组的话,那也一定要带上卖点 1,而不能脱离卖点 1 与标题单独成组。

最后就是装饰信息部分,它就是作为装饰存在的属于「有用的无用信息」,说它有用是因为它能解决一些版面中的负空间问题,比如说版面中有个地方显的很空,需要有元素来填补一下,这时就可以用上它。而说它无用是因为这类信息在版面中的字号大多偏小,读者基本都会忽略它们的存在。

案例一

图文穿插规则

我将所有的文字信息分成了 9 组,这个分组数量是属于偏多的,依据就是「存在关联的信息可以成组也可以分离」。

这是要用到的图片素材,一共有 6 个。

这本书籍的开本接近于 a4 大小,当信息量多时,页边距的宽度可以设定在:7~12mm 之间,而我这次设置的是 6mm,与参考值差了 1mm。这也是之前说过的要根据实际情况调整,所谓的标准数值就是一个参考。

定好版心后,首先沿着页边距的中间处,也就是 3mm 的地方拉一个矩形出来,书脊处也要,这个矩形就是用来整合那 9 个组合用的。

先将第一个标题组合编排出来,位置放在右上角。为什么要放在这里呢?因为当文字竖排时我们的阅读顺序是:从上至下从右至左的。标题组合内部的组间距大小我参考了英文翻译的字宽。

接着在标题文字组的左侧,拉两根辅助线宽度为 6mm,然后在中间处添加一根与标题组合一样高的线条用于区分。

然后再根据标题组合的高度,将组合 2、组合 3 以及组合 4 一同编排出来,它们之间的间隔也都是 6mm,同样用线区分。到此上半部分就编排完成了。

紧接着在上方组合的底部拉两根辅助线,宽度依然是 6mm,然后添加一根线用于区分。之后将组合 5 编排出来整个横跨版面,它的作用就是分割上下空间。

继续添加一根线条用于区分,然后根据上半部分组合的结构,将下半部分的组合编排出来。编排完成后版面中还留有一块空白区域,这块空白区域的作用,就是为了再放置一组与标题组合做呼应的信息。

这组信息我选择了重复标题的英文翻译以及作者的英文名。因为是和标题组合做呼应用的,所以多少要和标题挂钩。同时为了削弱重复内容的印象,我故意换了字体,将之前的衬线体换成了无衬线。组合呼应上之后呢,色彩也要呼应上。挑选些重要的信息填充上与素材相同的色彩就可以。

在下半部分的组合中间添加好线条用于区分,方式与之前一样。最后将书脊编排出来第一个案例也就完成了。

案例二:图字叠压「字叠图」

第二个案例的组合数量比第一个少了两组,其中最后一个组合,我几乎将所有的卖点信息都汇聚在了一起。而这一大块信息我会放在腰封处,最后大家会看到一个有疏密对比的版面。

图字叠压适合图片少时使用,所以图片素材我会用标蓝的这两个。

页边距跟上一个案例一样还是 6mm,版心定下来后接着将网格绘制出来,腰封我选择占横向上的双栏网格暂且用蓝色块代替。

第一步还是先将标题编排出来,然后在对角处编排第二个组合,组合 2 与标题做对角呼应。组合 2 内部的组间距参考的是英文翻译的行距。这也是我之前没有提到的,在没有小字号的情况下可以试试用行距来作为参考。

右上与左下角编排完成后,接着将左上与右下角的信息给编排出来。基本上所有的组合,都是按照网格来进行布局的,包括图中标蓝的文字组,它对齐的是隐藏网格。

这个隐藏网格就在横向第一栏的四分之三处,我用蓝线标出的位置。

接着把组合 3 编排在版面上方最吸引眼球的地方,因为组合 3 是一个很重要的卖点信息,我打算着重强调一下。它的位置关系是和卖点 3 作底部对齐的,到此整个书封的上方部分也就编排完成了。

剩下的就是将腰封处编排出来,也就是组合 7 整个卖点部分。这个大组合内部的组间距设置,参考了卖点 2 信息的字高。文字信息编排的差不多了,接下来我们将作为底纹的图片素材置入进版面中。

现在看着发现文字的识别性有点差,而且整个图片素材因面积和色彩的关系,显得非常跳跃很是抢眼必须要削弱它。

解决的方法就是给背景填充一个与图片色彩同属于同色系的颜色。

再把腰封标出来,恢复腰封处文字的识别性。最后在版面的上方挑选一些信息填充上白色,与腰封的色彩做一个呼应,而腰封处也要挑选一些信息填充上橙红色,与书封整体的颜色作一个呼应。最后的最后将书脊编排出来第二个案例也就完成了。

案例三:文字叠压「正片叠底」

最后一个分组的方式跟之前那两个案例不同,只分了三组。

页边距以及网格依然沿用第二个案例,唯一不同的是我将腰封的位置往上提了半格,因为腰封处我打算编排更多的内容。

第一步,先创造出视觉焦点,对标题与标题的翻译使用正片叠底的手法。将组合 3 也就是装饰信息编排在标题组合的负空间处,右侧再添加一个卖点信息用于完善标题组合,使标题组合更丰满一些。

接着将剩余的卖点 3 以及作者译者等信息,分别编排在标题组合的上方与下方后,整个标题组合才算是刻画完成了。

我们来看看整个标题组合内部的组间距是怎么设定的:卖点 3 与作者译者信息,跟标题之间的间隔距离为一个字高的大小。

给腰封填充上橙红色,让暖色成为主色调。因为这是一本关于肉类的书籍,在没有图片素材的情况下,我想通过色彩来唤起读者对肉类的想象。

换完色彩后,将腰封处的信息都给编排出来,而整个腰封组合内部的组间距,则参考了卖点 2 信息的字高。

最后还是老套路,挑选一些重要的信息换上色彩作呼应,再将书脊编排出来,最后一个案例也就编排完成了。

以上就是这篇教程的所有内容了,希望大家能够熟练掌握,并灵活运用。好了,那本期的教程就到这里了,我们下期再见,拜拜~

欢迎关注研习设的微信公众号:「Yanxishe2017」

Source: 优设网 – UISDC | 30 Mar 2020 | 6:59 am(NZT)

壹周速读:交互是如何影响着 UI 设计的?

对于 UI 设计师而言,UI 的技能和对交互的理解都是必不可少的能力,交互为体,UI为用,两者缺一不可。如何将两者更好地结合起来?上周的文章当中,有答案。

UI·交互

微信在3.23号上线了传闻已久的 「暗黑版」,用来适配 iOS 的深色模式,相信不少同学已经安装并体验上了,虽然网上有很多批评的声音,但我们先别急着参与网上的声讨,现在站在设计师的角度,来评价一下迟到的微信深色模式:

这两篇实用性极强的文章,都来自同一个资深设计师 Taras Bakusevych,他通过大量的商业实战项目之后总结下来的经验,总结得非常到位——相比于抽象的原则,他梳理的经验和建议非常实在,其中的一些想法和总结无疑是在大量的实战踩坑当中沉淀下来的:

在界面落地后,「标签栏」恰巧是在表现层层面向用户展现产品框架的最直接控件。虽然设计好标签栏,也许依旧无法让你把控一个产品的体验走向,毕竟战略层、范围层、结构层也是很重要的。但如果框架层和表现层垮了,那用户体验一定是糟糕的,并且和你有最直接的关系。那么体验优秀的「标签栏」要怎么设计呢?看这里:

随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。所以数据可视化设计,绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化设计,肯定是一头雾水,不知从何入手。这篇文章结合最近设计案例,分享大屏可视化设计过程中遇到的一些问题以及设计思路,供大家一起交流与学习:

为什么那么多人觉得应该先学UI设计再学交互设计?因为UI门槛低所以入手快。但是,交互比UI更早出现,从需求理论可以看出人们在追逐主观体验的感受,在基础需求未被满足前是不会出现更高层次的需求的。如果底层的交互和产品的可用性未被满足,那么UI做的再好也是徒劳,这篇文章,具体分析了这个这当中的原理:

UI 和交互这两个词汇是一对孪生兄弟,有非常密切的联系,我们在前期了解 UI 的时候「交互」这个词总是形影不离,出现的频次极高。但是,从开始学习 UI 起,我们常常被它困扰,并不是苦于如何在实战中应用,而是在中文语境下,交互有关的词义实在是太「玄学」了,那么怎么来通俗地理解它呢?看这里:

也许你对于交互设计有相对清晰的概念,但是对于最常见的交互设计概念真的有足够清晰的理解、能够进行准确的表达嘛?这篇文章梳理了10个交互设计必懂的基础术语:

视觉·排版

在人的视觉层次中,色彩占据着第一顺位,最先被人的视觉所感知,所以较图形、文字有着在短暂的时间中吸引观众视觉注意力的显著效果,而且有效距离也更远。好的配色往往依靠设计师审美、感觉搭配出来,但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑,这篇文章总结了一些简单有效的配色方法,希望能给新手「色」计师一些启发:

色彩是感性的元素,我们总是仰慕一些对色彩天赋异禀的设计师,总能不拘绳墨给作品带来惊艳的视觉效果。我们难以偷习他们的天赋,但或许你有没有想过,干脆我们另辟蹊径,用理性推导来制定一套色彩系统?这里有方法:

设计稿都做了 100 版了,但产品经理还是不满意,是设计不行吗?产品目标、用户目标都标得清楚了,但总找不好设计关键词?产品目标明确了,设计关键词也有了,但为什么做出来的稿子不是太概念,就是跟竞品太像呢?这篇文章,通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题,整理出 7 个帮你从 0 ~ 1 设计一款软件的步骤:

这篇文章来自设计师 「箫灬西人生」,从实习期间无从下手到现在的轻车熟路,他将这几年的图标设计的流程和经验借用疫情在家休假的时间,梳理了出来:

你是否会在阅读文章的时候觉得很吃力?在阅读过程中市场迷惑在换行过程中?其实这样的问题都是文字编排不当引起的。文章正文强调的是文本「读」的功能性,版面中内容多则用户需要长时间阅读,这个时候,合理的排版就很重要了。吸纳个要提高阅读的流畅性和舒适度,有哪些技巧呢?戳这里:

神器·干货

接下来要推荐两款实用性极强的开源免费字体:「未来荧黑」和「jf open 粉圆」,这两款字体前者是基于思源黑体修改而来,后者则是基于「小衫圆体」来修改,两者都是免费可商用,快来下载吧:

时代已经改变,怎么能不享受智能化带来的便利呢?今天就给大家带来一个智能又好玩的网站。在「AI智能换脸」这个网站上,你只需要动动手指,就可以轻松换脸成为大片中的角色,契合度高达 80%:

这篇神器两连发为大家带来两个动听、美丽又实用的网站,一个是关于海洋的声音网站,闭上眼睛,就能够满足你想要去海边,听大海声音的愿望;另一个是可以免费生成简单的矢量雪花图案的网站,调节参数可以改变雪花的粗细和疏密程度,上百种雪花样式为你所用:

Source: 优设网 – UISDC | 30 Mar 2020 | 6:51 am(NZT)

那些很熟悉但又叫不出名字的设计法则:工作记忆模型

前言:停更了一年,因为二手换了份工作,也换了个领域——车联网,初踏入这个领域,满眼懵X,作为设计师,不能单单从把自己固定在「设计」这个职位上,如果要想让自己的天花板更高,一定要让自己在这个领域成为一个「专家」,只有这样,做出来的设计,才会更有「深度」,这一年,二手要补充大量的专业知识,研究不同的竞品,要让自己从一个「爱好者」 变成一个「从业者」。

接下来,二手会恢复更新,下一期二手会跟大家聊聊这一年的跨领域感想。

专题回顾:https://www.uisdc.com/zt/design-rules

概念

工作记忆( Working Memory) 是认知心理学提出的有关人脑中存贮的信息的活动方式。

人作为一种信息加工系统,把接受到的外界信息,经过模式识别加工处理而放入长时记忆。以后,人在进行认知活动时,由于需要,长时记忆中的某些信息被调遣出来, 这些信息便处于活动状态。它们只是暂时使用,用过后再返回长时记忆中。信息处于这种活动的状态,就叫工作记忆。这种记忆易被抹去, 并随时更换。

△ 图1-工作记忆模型

实际上,工作记忆也是指短时记忆,但它强调短时记忆与当前人从事的工作的联系。由于工作进行的需要,短时记忆的内容不断变化并表现出一定的系统性。短时记忆随时间而形成的一个连续系统也就是工作记忆。

解释

Baddeley工作记忆包含以下几个四个内容:

感觉记忆指的是人视觉、听觉、触觉等感官系统所接收到的信息,例如:我们在专注开车的时候,对周围环境的感知。和感觉记忆相比,短时记忆拥有更长的时间进程(几秒至几分钟)和更为有限的容量,一般需要脑内不断复述才能维持,例如:我们要快速记住一个电话号码,不断的重复来记忆。工作记忆是短时记忆的一种特殊形式。被存储相当长时间的信息被称为长时记忆,例如:肌肉记忆。

怎么用

1. 提高信息获取效率

美国哈佛商学院有关研究人员的分析资料表明,人的大脑每天通过五种感官接受外部信息的比例分别为:味觉1%;触觉1.5%;嗅觉3.5%;听觉11%;视觉83%。

△ 图2-五种感官接受外部信息比例

在座舱中会使用除味觉的四种感官,其中视觉和语音偏向工作记忆(短时记忆),触觉和嗅觉偏向长时记忆。例如:我们在导航一段不熟悉的路时,更多依赖的视觉感官和听觉感官的工作记忆结合。其中语音会不断重复当前的路况,这是因为在专心驾驶场景中的用户,语音是一种感觉记忆,那些导航语音信息就好像萦绕在用户脑海的回声,即使在用户并未刻意注意的时候也存在。当用户尝试足够快地提取它时,用户会发现它仍在那里。感觉记忆可以保持几秒钟。

△ 图3-2007 Thomson Higher Education(图片源自网络)

触觉多指肌肉记忆,是长时记忆的一种,例如:座舱中的硬按键或者中控的一些盲操作手势。福特Mustang-Mach-E设计团队在调研中表示很多用户希望使用车载娱乐信息系统的原生应用,他们并不希望花费太多时间去学习新的东西。得到反馈后,团队很快输出了装有物理旋钮中控屏的创意,这个设计得到了调研团队的积极肯定。

充分理解场景的情况下,合适的多感官相互协作,可以提高信息的获取效率,降低用户认知负担。

△ 图4-全新福特Mustang-Mach-E-15.5英寸大尺寸触摸屏(图片源自网络)

2. 信息获取通道的多样性

当下的趋势,中控屏尺寸越来越大,Tesla Model 3 甚至去掉了仪表,这就意味着有更多信息集中在中控之中,这无形中给用户视觉更多的认知压力。语音可以分担视觉上的认知压力,语音获取效率是仅次于视觉。语音作为最接近自然的交互方式,发展愈加成熟。但是在人动驾驶情况下,语音具有临时性,视觉具有持久性,所以如果是逻辑性强或者复杂程度高的不建议使用语音感官。

△ 图5-Tesla Model 3 座舱(图片源自网络)

3. 用户记忆管理

情景缓冲区的视觉,听觉和运动提示的能力有限,因此不允许轻松构建技能或肌肉记忆的人机界面很容易使其负担过重。这反过来又导致驾驶员由于认知过载而造成的糟糕决策和挫折感。通过几个设计策略,可以减轻工作记忆局限性,减少认知负担。

3秒交互原则

据统计,车载系统的单次操作行为无法超过3秒。0-1s时驾驶者对车机进行扫视,1-2s内用驾驶者需要完成操作行为,而2-3s时驾驶者操作完成后,需要有明显的反馈告知驾驶者操作是否成功。

在设计上面,对于用户经常使用的功能要明确显现,减少用户操作层级,同时尽量固定位置,方便用户从工作记忆转化为长时记忆,方便肌肉记忆。

神奇的数字「4」与格式塔原理

最早对工作记忆容量做出测量的是美国心理学家George A. Miller,他在1956年发表了一篇名为《神奇的数字7加减2:人类信息加工容量的某些局限》的论文,认为人类工作记忆的容量大约为7。事实上,之后大量的研究表明,人类工作记忆的容量其实大致只有4。

实际上,脑内同时处理信息的容量是按「组块」(chunk)来衡量的。每个「组块」可以包含多个数字、字母,也可以是词语或其他形式,不同类型「组块」的分类方式和大小一般不同。这些「组块」间划分的主要依据是:单个「组块」的内部要有较强的联系,而「组块」之间的联系要较弱。

所以将相似的功能可以作为「组块」区分,例如:在记忆电话号码的时候,182-1758-****比1821758****会更方便记忆。

希克定律

希克定律表示做决定所花费的时间,与选项数目多少息息相关。这个法则可以用来测量人们面对多重选择,需要多少时间才能做出决定。

希克定律方程式:T=a+b log2(n)

T=反应时间,a=总的认知时间,b=对选项认知的处理时间(实证衍生出的常数,对人来说约是0.155秒),n=选项的数量。从方程式可以看出,用户面对的选项(n)越多时,所需要的反应时间(T)就越长。

网易云音乐在正常播放模式和Carplay映射到车机上面就减少了很多了选项,用户在驾驶时只有很短的时间来操作播放器,减少选项,才会让用户在更短的时间内做判断。

△ 图6-网易云音乐Carplay映射(截图)

参考资料:

欢迎关注作者的微信公众号:「二手设计」

Source: 优设网 – UISDC | 30 Mar 2020 | 6:00 am(NZT)

设计师私单赚钱多?5 个你不知道设计师私单真相

小吴是我几年前我的一个同事,那会我们都还是刚毕业两三年的小鲜肉,当时他的工资不到 5000 块,所以一直想接点私活赚赚外快,有一天,一个不错的机会找上了他,他前公司的一个客户总监想自立门户,并从原公司接了一些项目出来,其中就有需要设计师配合的部分,但毕竟不是什么大项目,在设计方面预算并不多,所以他找到了前同事小吴。

机会难得,小吴开始用空余时间帮他处理设计工作,但我们毕竟是一家广告公司,加班是很平常的事情,有时周末也是避免不了,后来客户的需求越来越多,而且开始抱怨小吴的进度太慢,于是小吴经常要加班到凌晨一两点才能把工作做完,上班迟到的现象也越来越多,甚至在上班的时候还会打瞌睡。

与此同时,他也变得越来越排斥加班,因为一加班他就没有时间做私活了,上级慢慢发现他的状态出了问题。小吴也知道,继续这样下去不是办法,两头都会耽误,于是果断辞职专门靠接设计私活为生。

为了显得更专业、更有决心一点,小吴特地租了一个房子作为自己的工作室,但由于他从这个客户那里赚到的钱并不多,所以他什么脏活累活都得接。就这样,很快一年多的时间就过去了,小吴发现自己除了相对自由一点外,赚的钱居然跟打工也差不多,而且客户资源也越来越少了,继续这样下去他觉得自己很难有什么起色,还是得去上班才行。

然而他知道自己在过去的一两年里设计水平并没有什么提升,可能比较难再进一家比较好的设计公司,就算进去了拿到的待遇可能并不会比以前高,还有可能会不适应,于是他开始去企业面试,几番对比后,他选择了去待遇稍高,且加班少的某企业做设计师。

辗转两三年,小吴换了好几家企业,公司越来越大,但仍是做着设计师的事情,慢慢地他发现在企业做设计,既得不到重视也难有提升,于是开始往策划和市场经理的方向发展,后来还真完全脱离了设计行业,再后来的情况,我也不太清楚了,我相信他应该做得不错。

故事讲完了,不同的人可能会从这个故事中读到不同的信息,有的人会觉得接私单可以改变自己的人生,有的人感叹早早接私单会毁了自己的设计生涯,有的人想通了,原来设计师并不是非得一直做设计,还有的人可能只关心小吴是怎么接到私单的。

小吴做设计私活的经历虽然只是他一个人的行为,却是很多接私活设计师的缩影,他的一些想法和遭遇很多人都应该有过,比如我自己。下面葱爷再给大家揭露几个设计师兼职接私活背后的真相:

真相一:大部分设计师几乎接不到私单

能频繁接到私单的一般为这几类人:

其他类型的设计师几乎接不到啥私活,特别是资历浅的设计师。有的人无奈之下只能跑去威客网接单,但对威客网有所了解的人应该都知道,一是在威客网上接单的成功率非常低,二是威客网上的设计费都是白菜价。一个 500 元的 logo 设计项目可能会有几十个甚至上百个人来跟你抢,我前两天甚至听一个读者说,一设计群里有人从某威客网接了个 50 块钱的 Logo。

真相二:很多设计师并不具备接私活的能力

这个能力包括设计能力和服务能力。大部分设计师在公司做设计时都会有人指导,甚至在设计前还会有人帮你整理资料、梳理设计需求和设计方向,并且,设计师(乙方的)通常不用直接面对客户。

而做私活时,一切都变了,甲方可能是很不专业的小客户,需求说不清楚,甚至连资料都要让你来整理,这就够头大的了。更关键的是没了主管或总监的把控与指导,你可能会碰很多次壁,改稿多了你难免厌烦,设计师的坏脾气终于藏不住了。

你怪客户不专业,客户则质疑你的能力和态度,很快你们就可能一拍两散,轻者丢失了以后与客户合作的机会,重者会收不到尾款,甚至连一分钱也捞不到(事先没要求甲方先交定金的那种)。

所以你如果有客户资源,还不如介绍给熟悉且比较资深的设计师做,并大大方方跟他要一些介绍费(一般为 10%-20%),或许你还可以趁机跟他学点东西。

真相三:靠接私活赚到很多钱的设计师少之又少

真正能靠兼职接设计私活都能赚不少钱的人,一般都是很资深的设计师,因为他们客户资源较多、设计费较高、而且完成的质量和效率也比较高。

而资历比较浅的设计师想靠接私活赚很多钱几乎不可能,原因参考真相一和真相二。所以,那些说工资低的设计师,靠兼职接私活每月赚的钱是工资好几倍的鬼话,要么是胡编乱造,要么就是拿个别设计师的个别案例来说事,完全没有参考价值。

真相四:太早接私活对提升设计水平并没有什么帮助

有人可能会说,做私活也是做设计,边实践边学习不是进步最快的吗?其实事实并非,想要更快速地进步、走得更远,把基础打好才是最重要的,我们需要针对设计师的核心能力、以及自己的短板做刻意练习,比如创意、版式设计、字体设计、软件、手绘、合成等等,并一段时间内只做好某一两件事。

这就好像篮球运动员,如果只是每天不断地打比赛,运动员很难到达一定的高度,所以他们每天都要完成一定量的运球次数、投篮次数,以及一些体能训练。

还有一个原因是因为大多数初级设计师接的私活都是一些杂活,且对方要求并不高,给的钱又少,这样的工作本身就缺乏挑战性,你也很难非常认真地对待,自然对提升设计水平不会有多大帮助。

真相五:接私活太频繁会影响工作

一有空余时间就想腾出来做私活,除了上班时间,你可能再也不会愿意为工作多花哪怕一点时间,甚至还会影响到你工作时的精神状态。

无论你的能力好坏,当你的态度和责任心得不到上级的认可时,你就很难在公司里爬到很高。

当然,接私活也有好处,比如多少能赚到一些钱,比如可以增加自己独自完成项目、对接客户的经验,所以我并不反对设计师接私活,只是我不建议大家在基础还没打扎实的情况下,就满脑子想着如何靠接私活多赚点钱,这是急功近利、本末倒置的想法。如果非要我给出一个适合接私活的期限,我希望至少是有五年设计经验以后(参照 1 万小时定律)。

设计师赚钱难吗?难,但也没有很多人想象的那么难,从一些大佬身上大家也可以看到,如果你能力真的过硬,又肯吃苦,你会有很多赚钱的途径,把目光放长远一点,切勿因小失大。

总结

前两年我读过一本日本平面设计大师田中一光的自传,书中他很骄傲地说:如果谁有机会在他手下做事,就算资质不是很好的人,做个十年也能够具备自立门户的能力,当然,他的标准肯定比较高,但在大师手下做事都得用十年,那我们是不是更应该虚心一点。

欢迎关注作者的微信公众号:「葱爷」

Source: 优设网 – UISDC | 30 Mar 2020 | 5:40 am(NZT)

高手常用这5个方法,快速提升空状态设计价值!

我们做体验设计的时候很容易忽视空状态设计的价值与可能性,通常用一张插画,一句文案就完成了所有空状态页面的设计。

空状态设计 ≠插画+文案

但实际上空状态的体验是可以有更多可能的,首先我们要了解空状态是指在用户体验产品流程中出现的除主流程状态反馈外没有其他数据展示的情况,而缺少数据或内容的原因有很多种,例如搜索无结果、无网络、默认初始无数据状态等。

对应不同原因分场景展示对应的内容有助于提升用户体验,同时提升业务转化。接下来我们来看看提升空状态设计价值的 5 个方式:

行动指令引导用户进入体验流程

在一款产品的新手用户使用流程中,经常出现各类初始无数据的空状态场景,比如空着的购物车,空着的关注列表,空着的书架等等。

这时的新用户对产品没有过多了解,需要我们引导告知用户接下来该做什么,让用户快速地进入到产品使用中,减少新用户流失。比较常见的做法是使用带有「行动性指令」文案的操作按钮。

行动性指令是指给用户明确行为操作的指令,如「去使用」、「去逛逛」、「赞一个」等等,这些明确的行动指令会比其他文案更引导用户点击。

△ 滴答清单:「试试这些事情」引导用户完成第一笔记录

除了常规的操作按钮以外,我们也可以尝试摒弃显而易见的空状态文案提示,尝试带有「行动性指令」的轻交互动效来进行用户引导。

△ 抖音:动态气泡引导用户发布第一个视频

预显示吸引用户注意力

在很多特定产品中,某些功能的使用与否直接影响整体业务运转,例如社交产品的关注功能、社区论坛类产品的发帖功能等。如果用户对于这些功能不了解或者不感兴趣就会造成很大问题。

但大部分这些功能在初始进入的时候都是空数据状态,那么该如何在「空」的状态下抓住用户的注意力,让他们开始感兴趣呢?我们可以试试把有趣的内容或者功能部分直观地外放在空状态页面,增强对用户的吸引度。

△ Instagram:显示相关用户信息,吸引用户关注并开启产品使用

△ 豆瓣:用户可滑动查看记录功能与格式话题卡片,吸引用户参与感兴趣的话题从而完成自己的动态信息发布

「猜你喜欢」提升业务转化

前 2 点如果还有同学觉得不过瘾,我们再上一波价值。

商业设计考虑的核心在于业务转化,而不同产品都有自己对应业务指标,比如电商类产品有商品浏览率、下单率等指标;招聘类产品有简历投递率、面试撮合率等指标。

如果要让设计真正赋能业务,在空状态的设计中我们也可以考虑加入对业务转化有影响的体验模块。这些通过算法精确匹配的推荐模块可以有效激活用户操作,使整体用户路径不会轻易终止,从而提升业务指标。

△ 淘宝:空购车里的「猜你喜欢」模块(很常见了)

△ 拉勾:投递完一个简历后会出现又一波「一键投递」推荐

IP故事线打造品牌

上完体验商业价值观之后,我们再来聊聊品牌视觉的价值。

大部分设计师研究缺省页的方向都在于插画的样式,没有最好看,只有更好看。但比起好看的插画样式,一个可以推动产品建立用户品牌心智的插画显然更有商业价值,因为它让用户更容易记住一款产品,并对之产生一定情绪记忆。

那么我们要如何利用缺省页插画来营造品牌感呢?可以试试用 IP 来讲故事,而故事的表演主会场就是空状态页面,让每个独立的空状态页插画都是一个连续故事中一个画面,激发用户使用产品的好奇心,同时让 IP 品牌的形象深入人心。

△ 多面-对标职场新人的产品:IP-Domi与他的朋友们-职场新人们的小友谊故事

全屏化创意带给用户惊喜

无论是阿里的五度模型还是 Google 的 heart 模型,都有一条基于用户感官感受的标准就是「愉悦度」/「满意度」,因此我们才总谈交互体验设计如何给用户带来惊喜,因为惊喜是情绪中最极致的愉悦与满足。

那如何在小小的缺省页里也能给用户带来惊喜而不是平淡无奇呢?我们可以试着在大屏/折叠屏的终端演变趋势下,将空状态页的设计思路拓展到全屏化。

与普通的空状态设计相比,全屏场景化不拘泥于小框的限制,把整个空状态页都当做一个场景画布布局内容,配备细节创新有趣的文案,可以为用户带来足量惊喜与视觉冲击。

△ 猫呼:暂无好友消息空状态

△ 阿里家的「躺平」:暂时收藏空状态

小结一下

再小的细节也可以创造价值

其实在用户体验设计的每一个细小环节,哪怕是空状态这样的小页面,都是可能创造设计价值的。

因此我们除了每日沉浸在日常业务需求的画图海中,也要学会抽离自己发现更多设计自驱提升的小点做一些推进,养成关注细节、善于自驱的习惯会对在座的职业晋升及钱兜子都带来巨大的力量~

空状态设计方法:

欢迎关注作者的微信公众号:「Nana的设计锦囊」

Source: 优设网 – UISDC | 30 Mar 2020 | 5:37 am(NZT)


想提高银行用户体验设计?我总结了四个常见问题+解决方法

一直在做金融行业产品的用户体验设计,深刻地意识到用户的金融行为习惯和观念正在发生变化。

曾经,办理银行业务我们依赖的是物理网点,动不动就需要一趟趟的跑。

如今,越来越多的用户选择在手机银行线上办理业务。通过手机银行,日常的转账、缴费、还款、理财、小额贷款等都可以轻松完成,再也不用局限于网点柜台办理。

根据中国银行业协会发布的《2016年度中国银行业服务改进情况报告》,2016 年银行业平均离柜业务率为 84.31%,且已经有 15 家银行离柜业务率超过了 90%。各家银行都在主动适应新形势,主动去探索与客户接触的新方式。

未来银行想要吸引和留住用户,手机银行的体验设计扮演着举足轻重的作用。国内手机银行 APP 在体验方面仍存在很大的提升空间,体验设计需要进一步优化。

以下是在日常工作和 APP 体验中,遇到的四点通用性问题,以及尝试性的提出相关设计策略。

盘点现象,梳理问题

设计策略

1. 强化品牌、升级视觉

可以考虑从一致性、简洁度、控件化三个角度来着手改进。

一致性:颜色的一致性、icon图标的一致性、前后名称的一致性

建立一个一致性的色调板,它可以影响用户的第一印象。

对于每个模块,一致的 icon 图标会让整个 app 显得很专业。

重复使用的那些名词,一定保证前后名称的一致性,不要给用户造成困惑。

简洁度

在有限的屏幕空间,清晰的展示内容永远是最重要的。

视觉设计需要注意分隔,提高留白,为内容留出干净、清爽的视觉空间。

要注意的是由于银行产品的多样性,要避免过于拥挤的模块设计。

控件化

建立模块控件,统一 UI 和交互设计规范,可以让整体视觉看起来更加规范和专业

2. 优化操作,简单交互

尽量简化功能点的操作逻辑,在做流程设计时,停下来想一想,有没有更便捷的操作方式。

适当借助最新科技的植入,可以方便用户更快速地进行操作。例如最近在做的注册改造项目,登录加入支持刷脸登录的快捷方式,可以满足用户快速登录的需求。

如果步骤繁多,需要注意两点:进度的提示设计、反馈设计。

首先,多步骤流程下,用户处于一种失控和未知状态,做好明显的进度提示设计,可以避免使用户产生厌烦感跳出界面,从而顺利完成相关交互操作。

其次,步骤越多,出错的几率就越大,设计师需要考虑出现异常状态该怎么办?这就需要做好及时的反馈设计,让用户清晰知道目前状态,从而具备掌控感。

3. 做好调研分析,提炼主次功能

手机银行的众多功能中,可以通过用户调研、数据分析等手段,明确本行目标用户常用的功能。

对常用的转账、存款、还款等功能做突出清晰化设计,方便用户日常操作需求。只要打开 APP,用户就可以快速找到他所需要的功能,体验自然就好。

平铺一样的功能结构设计,是无法给用户带来最好的舒适感的。

4. 跳出高大上术语,通俗化用词

由于手机银行是直接面向用户使用,用户根据手机银行上的图形和文字说明,进行相应的操作。

不同于在物理网点,如果你看不懂某一个词语,可以直接面对面询问工作人员。在虚拟的屏幕空间,即使有线上客服作解释(更别提有很多银行还没开通线上客服),理解也会大打折扣,而且还给用户造成麻烦的直观感受。

在设计之初,详细斟酌放到手机银行上的术语,不要那么晦涩,少一点高大上,多一点通俗化,更便于用户快速的理解。

银行体验设计是个很有意思的领域,还有很多要深入探索的问题,后续产品的完善和优化,仍需要结合业务、数据、调研等方面持续打磨。

如果您在使用金融系产品中,有碰到什么特别好的感受、特别差的体验,欢迎留言一起探讨。

欢迎关注作者微信公众号:「书灵的织梦国度」

Source: 优设网 – UISDC | 30 Mar 2020 | 5:03 am(NZT)

如何管理UED团队?收下这份实战经验总结!

刚开始担任团队 UED 管理时,一度十分迷茫,不知道工作该如何开展推进。团队系统众多,且情况复杂,并不像原来一样,只需要做好某一个模块的设计管理或者某一个项目的设计执行就可以。

新团队的各项情况和原来的团队都不太一样,大家还没有建立相关的设计意识,需要经常跨组跨部门的推进沟通,去评审推进不同系统的 UED 设计规划。

所以,一开始,真是很痛苦,苦苦思考团队用户体验工作该如何开展。好在,经过不断摸索和尝试,同时私下也和很多同行交流过。新晋设计管理者,该如何摆正自己的位置,明确要做的事,顺利推进 UED 设计团队工作的开展。现在慢慢找到一些方法,今天就把这些经验做一个小小的总结。

角色和心态需要转换

作为一个专业设计师,我们需要做的就是将一个任务完成,以专业的水准交付方案和设计稿,更多的是一个执行和创造的角色。如果我们走到设计管理岗位时,那所需要的要求和能力又会有所不同。

入行之初,我给自己画了一份个人职业成长路径要求图,构想我在设计师职业生涯上,自己理想中的成长路径应该是什么样的。现在看来,目标在一步步实现,当然每到一个节点,都经历很多的探索和成长,我也时刻提醒自己要注意角色和心态的转换。

△ 设计师职业成长路径图

作为初级小白身份时,我给自己定下了三条要求:专业能力、执行能力、多面尝试。

初级设计师一般就是开始跟着前辈们做一些简单的小功能设计,那在日常工作中就是在项目中不断提高目前岗位所需的专业能力,同时学会高效执行手头的任务。

在此之外,可以结合自己的天赋、擅长度不断的去尝试做加法,比如你是做UI的,在做项目过程你发现突然对交互很感兴趣,那就不要太局限,在UI工作做好之余,抽一些时间研究和学习交互,多多尝试,就能知道自己的兴趣点和擅长点在哪。

后来,慢慢的技能熟练,也积累了一些专业知识。我开始做聚焦收缩,将自己的专业、行业不断挖掘定位,找到适合自己的那一项,开始通过项目、同行、练习等方式深入研究一到两项,同时我意识到只在技能上提升还不够,要想成长更多,还需要具备设计思维,所以这个阶段也要求自己有意识的把点变成线。

之后,能以高级设计师的身份去完整的去做一个项目了,又开始了新的一轮登山。这个时候,光有技能术法的加持已经不够了,开始要求自己慢慢的去拓宽眼界,吸收更多行业内的优秀经验。有意识的做整合总结,让自己从「一」变成「T」字型设计师,什么意思呢?就是光具有广博的设计知识面已然不够,还要深入所处行业,不让设计飘在业务流程上,要深入扎根去了解业务需求,去为业务赋能。

现在,刚刚到达设计管理者的第一级台阶。对自己的期望是「T变「∏」。不仅要在用户体验专业方向继续深入研究,了解自己所处行业的业务需求,还要开始学习管理能力。

也就是说,新的成长组合将会变成「专业+行业+管理」,同时要通过这个组合去思考如何体现团队的价值。这也是一个不小的挑战,希望今年能有所突破。

打通「上中下」级,有的放矢

新晋设计管理者,再也不是做好执行的角色就可以了。我总结了下,这个时候,需要做到「上中下」各级沟通。还是看图说话吧。

△ 打通「上中下」级

1. 向上沟通

首先是要和你的直属上级经常保持沟通,明确他今年想在用户体验方向重点发力的方向。明确上级想要你做的,确保你的工作步调是与整个部门的方向是一致的。根据大的方向,再细化沟通具体执行的任务。

举个例子,当时刚进部门,一心想要把部门整体的系统用户体验都做一些改版和提升,后来在与上级沟通的过程中,发现当前阶段他最关注的是系统规范一致性和小步试点改进这两大方面。

所以,在不断的沟通和领悟下,我们当时确定了年度优先级高的任务和持续推进的任务。先从视觉规范建立、关注度高的交互问题开始着手,不做大规模整体的改版,同时明确规范试点范围,管理策略,防止跨度太大,做太多的无用功。明确了方向,接下来的工作开展就相对来说好多了,要不然我可能现在还拧巴在大改版上呢。当然,改版也是后续要推进的问题啦。

要点二是从领导那「偷师学艺」。我们大领导也很nice,只要你愿意和他交流,用心学习,也可以学到不少管理的方法。比如他当时就和我讨论:「如何去管理不同系统的设计师,确保他交付的产物尽可能的高质量。」我们当时梳理了一个模型,我给取了个名,叫「N*M验收法」。随意感受下图灵魂画风。

△ N*M验收法

方法思路其实就是如果有N个页面,M个设计要素,那么总共会有N*M个评审条目。那么作为最后的把控者,我不可能每一条都去看,但是又要保证验收的设计质量相对较好。那怎么做呢?首先让各设计师先做N*M的设计自查,设计管理者根据专业经验筛选出重点的、可能出错的要素,去抽检B个不符合项。

那从系统资源利用和验收质量角度来说,只需要管住这B个不符合项,全局上基本就不会有太大问题。

要点三就是做到及时汇报。当工作交办下来后,先确认自己理解对了,然后开始协调相关资源,做任务的分工和时间的排期,有个初步计划后,先向上级做一个方向性汇报。

在后续项目推进中,定好阶段性里程碑,阶段性汇报,确保整体项目的设计方向没有脱离上级的要求。毕竟,后期推翻改稿是很痛苦的~~

2. 平级协作沟通

他们都是谁呢?比如团队内的产品大哥、研发大佬、测试姐姐这些leader们,系统负责人们,虽然大家平时难免为了产品相关「撕」,但是其实大家还是同心协力的为了完成目标而努力的啦。

那在这个层级,主要关注三点:重视评审、协商沟通、达成一致。在具体推进项目过程中,大家总会有不同的立场,所以会有不同的意见。但是一个产品从来不会是十全十美的,他总需要各方的妥协沟通,后面才能出来一个较优的结果。

所以,在这个过程中,重要的就是一定要前期协同大家评审,沟通达成一致意见。千万不要去唱独角戏,要组成团队网络,只有这样才好推进和多方协调资源。

3. 面向下级设计师

面向新人设计师,总结了三点:目标分解、给予鼓励、帮助成长。

首先要把任务目标做明确的分解,设定一个合理的deadline,方便小萌新能够快速上手做一些小功能点的设计和审查。另外对优秀的设计师,会放手让他去思考设计方案,给予他一些思路上的建议即可,这样可以让设计师们充分的去思考,慢慢的去变专业。

第二就是要经常性的给予鼓励。入门的设计师其实自信心是最不足的,总觉得自己有很多东西不会,各项能力都不够好。但是其实每个人都是从那个阶段过来的,所以我也经常告诉自己要经常性的给予他们鼓励。比如夸夸他这次方案的思路明显比上次考虑的周全了,你看上次没有考虑到这个输入框出错时怎么设计,这次已经考虑到了,还提前做了友情暗提示,已经很棒了。我想,工作嘛开心还是最重要的,氛围不用弄的那么紧张。

最后就是尽自己能力去引导他们思考。其实很多系统的设计师悟性是很高的,几乎都是一点就通,只是原来大家没有这样的意识而已。

比如,有一次做方案评审,记得好像是个用户评分的页面设计。他做的一版方案交互逻辑还比较复杂,需要对各个部门的打分页面反复的关闭打开,看似可以清晰的看到每一个部门的信息,实则信息堆叠造成的效果并不好。

后来,我问他,你觉得后台产品设计目标应该是什么?这个目标应该是高效、快捷完成任务,那这种反复的打开关闭弹窗的页面方式能达到效果吗?经过一两个问题追问之后,他立刻就明白了,改成了「单个页面上下浏览+右侧快速回到顶部按钮」设计。相比之下,操作高效多了。

所以,我也会有一个转变,授人以鱼不如授之以渔,直接告诉他答案并不好,应该引导他去思考这个设计方案出来的过程。

慢慢也意识到打通「上中下」各级,工作才好有的放矢。当然,设计管理这条路我也才刚刚开始,还有很多要向优秀的同行学习的。以上仅是日常项目的经验之谈,如有不妥,多多包涵咯~

欢迎关注作者微信公众号:「书灵的织梦国度」

Source: 优设网 – UISDC | 29 Mar 2020 | 5:12 am(NZT)

2020 年东京奥运会,居然闹出过这么多设计事故?

相信大家都听说了东京奥运会要延期一年的消息,之前日本各级政府反复发言,说奥运会要按期举行,在严重的疫情下,终于还是低下了头。

回过头看东京奥运的整个筹备过程,真的是幺蛾子不断。尤其是在设计领域,闹出了两个很大的新闻,今天 Canva 酱就带大家盘盘。

Logo抄袭事件

2015 年 7 月 24 日,东京奥运 logo 设计大赛公布结果,获奖者为日本设计师佐野研二郎,他的设计是这样的:

能为奥运会制作设计无疑是莫大的荣耀,然而仅三天后,比利时设计工作室 Studio Debie 发文称,此设计抄袭了他们为比利时列日剧场设计的 logo。

△ 佐野奥运会logo与比利时列日剧场logo

事情还没完,后来又有人发现,奥运会 logo 的配色与西班牙设计工作室 Hey Studio 为东日本大地震制作的祈福图案极为相似。

此事一经曝光,便引起了轩然大波。8 月 5 日,佐野和奥组委召开了记者会,对抄袭问题进行解释。

他表示设计灵感来自 Didot、Bodoni 等字体的「T」。

logo 标准制图以九宫格分割,暗藏一个圆,这是对 1964 年龟仓雄策设计奥运 logo 的致敬。

△ 龟仓雄策1964奥运会logo设计

在此 logo 基础上可以延伸变化出一整套拉丁字体,设计有出处,有思考,有完整的延展方案,他不认为是抄袭。

但这并没有让事件平息,不满的民众开始扒佐野的其他设计,发现他为 SUNTORY 设计的环保袋中,确实有一些涉嫌抄袭。

如何界定抄袭:

△ 日本网友挖出的证据

8 月 13 日,佐野发表声明,相关罪证并不明确,但出于对甲方的尊重,已经协商将有争议的设计下架。

但是不知道为什么,隔天佐野就怂了。再次发表声明,表示这个单子是公司合力完成的,是员工犯了错,自己作为管理者没有尽到责任,对不起大家。

△ 那时候佐野工作室门口都是这样的

8 月 28 日,奥组委再次召开记者会,公布了佐野参赛初稿,以及延展设计。

他们在后来的商标注册中,发现了类似商标,因此改成了终稿的样子。奥组委表示完整度高才是此设计当选的重要原因。

△ 发布会公布的初稿与修正案

为证明佐野方案的完整性,会上公布了很多方案图:

但是舆论依然不领情,甚至又扒出初稿和设计师 JanTschichold 某次展览中的字体相似,而且根据佐野推特的记录,他还真的去过那次展览。

面对汹涌的舆论,佐野主动提出希望撤销此 logo。9 月 1 日,奥组委第三次召开记者会,宣布撤销 logo。

后来奥组委又进行了一次竞选,最终的赢家是野老朝雄,灵感来自江户时代的市松纹。

△ 日本传统市松纹

采用日本传统蓝,三种不同大小的四边形组合,表达各国在国情、文化、思想三方面的差异,还是在融合成了一个圆,表达包容的奥利匹克精神。

主场馆方案事件

2012 年,东京奥运会主场馆设计竞赛结果出炉,赢家为已故的著名建筑师扎哈·哈迪德。

△ 扎哈·哈迪德

这是一位个人风格非常鲜明的建筑师,流线、未来感是她的标签,望京 SOHO 也是她的作品。

△ 望京SOHO

她为东京奥运会设计的场馆是这样的:

依然是标准的扎哈风格,流线型的外观,肌肉型的纹理,主体结构两端由棱形外壳构成,多个椭圆形开口作为入口,总之未来感十足。

然而结果一公布,立刻引起了日本建筑师的强烈不满。

2019 普利兹克奖得主矶崎新写了一封言辞激烈的公开信抗议,里面提到这个方案是「一只乌龟,伸着脖子等着日本岛沉没后好快速逃跑。」

△ 矶崎新

1993 年普利兹克奖得主槙文彦召集了一众建筑大师反对扎哈的设计,参与者有伊东丰雄、隈研吾、藤本壮介、山本理显等人,可以说日本建筑界有头有脸的人物都出来表达了不满。

△ 槙文彦

该设计过于昂贵的造价与过于庞大的尺度,过于先锋化的造型,完全没有考虑到与周遭环境的和谐,都是争议的核心。

2015 年,日本决定重新选设计,扎哈很生气,发了公告,大概意思是这样的:

「这个方案贵大家都知道,当初不说话,这时候反悔了?而且我一直做这个类型的建筑,成本控制已经非常优秀了,根本没有外面传的那么夸张。」

可不管怎样,新一轮的竞赛又开始了。扎哈不服气,也跟着参赛了,当然,不会让她赢的。最终赢家是日本建筑师隈研吾。

新场馆以「木与绿色的竞技场」为出发点,采用了大量的日本雪松,灵感来自日本传统木结构建筑法隆寺,日本传统韵味非常浓重。另外,造价比扎哈方案便宜了很多。

扎哈依旧非常生气,发表声明,「日本官方与建筑师勾结起来,共同排斥国际设计师所提交的项目方案」,并提出隈研吾方案中的座位布局与规划和自己方案非常相似。

然而这一切都随着扎哈的去世不了了之。

写在最后

佐野的 logo 是否算抄袭,业界有不同的看法。但无论怎样,这件事都给奥组委和佐野本人带来了巨大的麻烦。

扎哈的设计到底创意还是傲慢,同样有两派人为之争论,这些外围事件给东京奥运会不断地制造热度,同时也让东奥会看起来问题重重。

希望一年后,奥运会真的能顺利举行。山川异域,风月同天!

欢迎关注作者的微信公众号:「Canva设计」

Source: 优设网 – UISDC | 28 Mar 2020 | 5:02 am(NZT)

多年可视化设计老司机,给你梳理了这10条避坑提速指南

编者按:这篇文章来自 Taras Bakusevych 的文章《10 rules for better dashboard design》

控制面板,或者我们也经常称之为仪表盘,它是经常需要设计的。企业总期望能够设计出足够一目了然的控制面板,能够一眼看清总体上的信息,趋势如何,风险何在,最近更新了什么——这样的控制面板能够带来更好的收益和更加出色的财务状况,这意味着光明的未来。

控制面板——Dashboard ,它本身就是基于汽车和飞机仪表盘这一隐喻,它是一个综合性的中控台,让用户以最便捷的方式来掌控信息并进行操纵。

在企业中工作多年,我设计来无数的控制面板,每一次新的设计对我而言都是难得的挑战。每一个优秀的控制面板的设计,其实都来之不易。根据我的经验,我整理来10条非常有用的建议,它将会为你提供帮助。无论你是经验丰富的设计师还是新手,应该都可以从中找到一些有用有趣的东西。

1、定义控制面板的用途

控制面板从来都是有着特定功用的,搞错来,你的所有努力都会付诸东流。有很多流行的方法可以用来界定控制面板的功能:战略分析、运营、战术操作,等等。为了简化这个概念,我将它划分为2大类:

操作面板

操作面板的目的,是在用户处理时间紧迫的任务的时候,将关键的信息快速传递给他们。操作面板的主要目的是为用户快速清晰地呈现数据的变化和偏差,显示当前的状况。它旨在帮助用户主动、快速和高效地掌控情况。

分析面板

和操作面板不同,分析面板主要功能是为用户提供用来分析和决策的快速信息,它对时间的敏感度低,并不专注于立刻操作。这种面板主要是帮助用户更快地了解数据,分析趋势,并且推动决策。

你需要设计哪种控制面板,主要是由你用户的类型来决定。当然,你的产品可能会面对多种不同类型的用户角色,每个用户都有着独立的唯一控制面板。负责一线操作的经理可能需要操作面板,而公司高层的管理可能需要的是分析面板,而设计师在设计的时候,有可能会将两者混为一谈。而在普通用户层面,可能会提供混合型的控制面板,这就要看具体需求了。

2、选择正确的数据表现形式

当我们讨论控制面板的时候,我们讨论的问题本质上是图表的呈现形式。数据呈现是一个非常复杂的任务,尤其是当你希望在面板中呈现多种类型的信息的时候,它们有的是静态的,有的则会随着时间动态变化。这是非常有挑战性的。选择错误的图表类型可能会让用户迷惑,甚至导致错误的理解。

在开始之前,请务必多看内部的说明和文档,从中获得启发。如果你要从头开始,那么这里有一些可视化设计的建议:

可以帮你查看数据关系的图表类型

散点图主要用来阐述相关性和分布情况的图表,气泡图有助于将第三个维度引入到二维的图表,而散点网络图则可以更好地呈现元素之间的关系。

可以帮你进行比较的图表类型

使用视觉化的图表来呈现一个或者多个数值之间的差异,要比看数字来的直观得多。柱状图、折线图是最常见的,下面是建议:

这些图表能够帮你查看组成情况

而对于饼状图和环形图而言,在可视化领域并不算太受欢迎,但是它们是最常用的图表,并且是最容易被滥用的图表。当参数中包含太多近似的数值的时候,它们的可读性就非常差了,而设计到角度和面积的时候,人眼其实是很难分辨的。

这些图表可以帮你查看分布状况

分布图可以帮你查看异常状况、正态分布以及中值分布情况。

需要规避的图表类型

有一些图表类型必须完全规避开。在此之前,信息化设计大规模流行的时候,什么类型的数据都图表化,其中有不少 3D 的图表,或者是模拟一些现实物品的图表,可读性极差,因此不要使用它们。

不同图表的使用场景

为了帮你选择正确的图表类型,请先问自己下面几个问题:

·你想在图表中现实多少个变量?
·数据是随着时间变化,还是用来做对比参考的?
·每个变量需要显示多少个数据点?

3、遵循清晰一致的时间格式和命名方式

虽然控制面板主要的目标是一目了然地呈现信息,但是基础的信息同样非常重要。使用清晰一致的框架,最大的好处是让整体保持良好的一致性。如果你使用一致的命名方式,那么可以让信息传达更加轻松。

4、按照优先级定义布局和流程

网格可以帮你更加轻松地确保对齐和一致性,并且为你的设计创造基本的框架。网格系统能够让你的整个设计都在一个系统中运行,并且合理地优化你的构图,这对于控制面板的设计至关重要,因为你需要无缝地组织大量的信息。

在决定诚信啊哪些信息的时候,请记住以下几点:

5、使用统一的结构来构建区块

在我们定义好网格之后,我们可以使用多个不同的控件来搭建整个控制面板,这些图表空间将会呈现用户需要的信息。卡片化的设计是最为便捷的,让它们保持响应式也不难,这样可以让图表按照需求,在卡片容器内轻松缩放。

卡片是保持控件一致性和布局一致性的重要基础。你可以将所属图表的名称放在卡片的左上角,然后让不同卡片合理排布。当整体样式和结构统一了之后,用户就有可供遵循的获取信息的模式了,在他们所期望的地方,找到想要的信息。

使用响应式的设计,让布局更加灵活。当卡片缩放的时候,基本的信息仍在对应的位置,这对于开发、用户乃至于未来的设计,都有着极大的好处。

6、间距翻倍

终于要说到留白的问题了。留白是保持视觉平衡和信息流畅自然的重要因素,如果留白不够,整个控制面板会显得极为局促,所以,为了确保整体的协调度,图表所在的部分的留白最好要比文本和普通图表当中的留白间距更大,最好是增加一倍。

12px 留白和 24px 留白的差别

7、不要隐藏信息,也不要过度依赖交互

控制面板的核心目标之一是一目了然,因此依赖滚动、悬停这样的交互,会削弱功能,背离初衷。

设计长的、可滚动的控制面板是最常见的错误之一。试图使用清晰的方式呈现更多信息,将所有的内容都平铺在面板上,但是这样可能会让用户不知所措。用户可能只会注意首屏的信息,下面的内容可能会被很多用户忽略掉,那又有什么意义呢?

解决方案是先确定优先级,通过用户访谈和调研之后,你应该能够确定核心的信息,然后将这部分在首屏呈现,你不用事无巨细地呈现全部信息,而是要学会总结,呈现关键。其他的次要信息可以借助交互来呈现,这样避免用户不知所措。

交互有助于呈现次要的辅助信息。完全依赖控制面板来呈现全部信息是错误的。从上面的范例当中,我们可以看到,用户需要痛苦地在多个选项卡之间来回选择,才能看到完整的图景,这和将关键信息隐藏在首屏之下,存在的问题是一样的。

而强行将所有信息都密集呈现在首屏当中,同样是错误的,人类处理信息的能力是非常有限的。一屏当中,用户最多处理 5 ~7 个控件。

8、个性化优先于定制化

用户希望看到的信息,肯定是和他们的需求息息相关的。个性化和自定义都是能够帮用户进行选择的重要手段。

个性化的样式,通常是由系统自行提供。而系统本身,通常会为不同的用户提供和他们角色相匹配的功能、内容和体验,个性化是应有的功能之一。定制化则不同,定制化是用户根据自己的需求,进一步针对功能和布局乃至于参数进行更加深入的修改,以满足用户本身的特定需求,它不是系统内置的直接可选项。

只要系统具备了基础的个性化设置,在此基础上再提供定制化,是一个好主意。不过,定制化功能过于自由,通常是控制面板的设计者搞不清楚用户需求的一个借口——反正用户可以自己设置。这所导致的结果就是,用户为了达成基本的需求,而必须进行繁琐的自定义设置。

9、数据表格请确保它是交互式的,且正确对齐

当你需要的控制面板中,涉及到大量原始数据信息的时候,数据表格始终还是最好的方案。比如说需要将涉及到许多人的 ID、状态、联系人、上次活动时间等具体信息列举出来的时候,还是要用表单。表单充分利用空间,提供了轻松的体验和足够的伸缩性,简化开发,并且另外一个很重要的前提是,很多人已经习惯了 Excel,因此对于这样的内容,用户并不会反感,这是查找信息的重要控件,只不过,需要注意它的对齐样式,以及可交互,比如复制粘贴等等。

10、最后再设计控制面板

的确,控制面板被呈现出来的瞬间是令人激动的,但是,这应该是最后一件事。设计控制面板到底意味着什么?意味着你需要将大量的功能、内容、信息最终汇总到一个控制面板当中,而一旦中间有信息被调整和修改了,那么你的控制面板就需要进行对应的修改,这也就意味着你先设计控制面板,会需要不停返工,而这是不合理且浪费时间的。当你完成了信息的汇总,和基本的对应的小控件的设计之后,最后再进行控制面板整体布局,就会轻松很多。

结语

这10个建议是经历过大量实战之后,在血的教训中总结出来的有效经验,希望对你有帮助。

本文作者 Taras Bakusevych 的另外一篇超赞的文章:

而关于信息可视化,这些文章也相当值得看看:

Source: 优设网 – UISDC | 27 Mar 2020 | 7:43 am(NZT)

如何从零到一设计产品?有道设计师总结了这7个步骤!

手把手教你 「如何 7 步从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件!」

据不完全了解,身边大部分的 UI 同事都从 0 到 1 参与过一款或多款软件的设计,设计过程中不知道你是否有过这样的疑惑:

在解决这些困惑之后,我总结了一套自用的,适合从 0 ~ 1 进行软件设计或项目改版的方法 ,并在其他项目上进行了二次验证。

以实践项目 —— 有道少儿词典为例,上线一年期间,用户次日留存峰值 36% 以上,也非常幸运,被 App Store Today 推荐 4 次,App Store 编辑推荐 8 次,被 App Store 纳入 2019 本土优秀 App 盘点中,同时被预装到苹果线下直营店,作为样机体验软件之一。所以,这个方法亲测有效!

这篇文章,通过分析如何解决类似「产品经理不满意、设计关键词不对、设计风格无区别」这些问题,整理出 7 个帮你从 0 ~ 1 设计一款软件的步骤。

文章较长,大概需要花费 15 分钟,建议大家先看大纲,优先阅读符合自身情况的部分。

产品经理为什么不满意?

从 0 ~ 1 进行软件设计,免不了要多出几个设计稿,但做了 100 稿,产品经理对页面设计还是不满意的话,很有可能有 2 点原因:

原因 1:目标不明确

一拿到需求就开始做,很容易忽略需求背后的目标,从 0 到 1 做一款新软件更是要了解业务目标和用户目标。

在提出解决办法前,我们需要先捋清楚以下 2 个问题:

为什么要了解目标?

公司开发软件是为了达到某些目标或是实现某个目的的,只有了解目标才能更好地为公司创造价值。

什么是业务需求、业务目标和用户目标?

平时产品经理跟我们说,要设计一个页面,设计 一个流程,这就是一个业务需求,而这个需求的背后,能够解释清楚这个需求是为了什么,要做到什么程度,这就是业务目标(通常包括用什么手段,给用户带来什么价值,达到什么目的)。而软件的目标用户,他们在一个具体的时间、地点、环境下做了什么操作,想达到什么程度,满足自己的什么要求,这可以理解为用户目标。

解决办法 :多使用 「为什么+动词」 的问法,向产品经理了解业务目标、用户目标。

从 0 ~1 做软件需要了解的业务目标和用户目标,我们都可以从产品经理那里得到。

少儿词典的产品经理很早就给出了业务目标和用户目标。但,当我们需要更多细节的时候,可以使用「为什么+动词」这样的问法。例如:

  • 「我们要做一个少儿查词软件,定位是一款拥有权威释义背书,在视、听、触方面打造良好体验,紧扣教材和教学大纲的适合少儿和家长使用的伴学词典。你来做吧!」「为什么做这个?」
  • 「现在儿童教育KOL越来越多,很多家长都很关心k12教育问题。市面上的很多产品都不太适合孩子使用」
  • 「为什么这样的定位可以满足用户需求呢?」「为什么是适合少儿和家长使用呢?」
  • 「为什么……」

在少儿词典项目中

原因 2 :没有对产品关键词形成共识

我们既了解产品的业务目标,也知道用户目标的情况下,方案还是被 pass 的话,可能是因为你给出的方案和产品经理想要的不是同一个东西。为什么业务目标在这里不起作用了呢?怎么才能弄清楚产品经理想要的是什么?我们可以用产品关键词来回答这个问题。

为什么业务目标在这里不起作用了呢?

我们常见的业务目标的内容是很长的,用户目标的内容也是很长的,在这种所有已知内容都很长的情况下,如果没有准确理解内容,没有对重点内容达成一致,就很容易产生偏差。例如我要向你描述一位美女,她的头发很柔顺,脸蛋很漂亮,身材比例很好,衣品很好等…… 90% 的可能,我们脑海中想的不是同一个美女。但是,如果我跟你说,这是一个跟芭比娃娃很像的美女的时候,我们脑海中的形象会接近很多。

怎么才能弄清楚产品经理想要的是什么?

就像设计师在进行页面设计时,需要设计关键词一样,产品经理在描述自己的业务目标的时候,也需要能概括业务目标重点,突出卖点的产品关键词,这个产品关键词能帮助设计师弄清楚产品经理想要的东西。

部分产品经理为了方便大家达成共识,会早早亮出产品关键词,如果当你们的产品经理没有办法提供产品关键词的时候,我们要学会在讨论中找到。

解决办法 :从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词

从业务目标和用户目标开始跟产品经理讨论项目信息,在讨论的过程中,我们可以留意产品多次提到的几个形容词,写下来,然后跟产品反复核对确认,最后双方确认且保留下来的这 3~4 个形容词,就是这个项目的产品关键词。

少儿词典的产品关键词是:权威内容,寓教于乐,适合孩子使用。这些关键词被我贴在屏幕的显眼处,就怕自己哪天忘记了。

设计关键词为什么总是找不对

寻找设计关键词,是设计师非常熟悉的步骤,但常常也在这里翻车,甚至还会出现,不管做什么软件,反反复复就那几个关键词的情况,我们可以把原因归结为:

原因:对用户不够了解

为什么不了解用户会导致关键词找不对?

我们的用户在选择软件、使用软件的时候,最先了解到的是软件的设计、体验和功能。用户下载软件时,他们已有的认知会影响他们对软件的幻想。就像给小男孩的衣服是天蓝色,小女孩的衣服是嫩粉色一样,如果用户想要一件天蓝色的衣服,而我们给他展示的是深蓝色或是嫩粉色的衣服,这都会让用户产生疑惑甚至离开。因此,如果对用户了解不准确,会导致我们输出错误的设计关键词。

而了解目标用户是又一件复杂的事情。

首先,我们的目标用户可能是一类人,如有道词典,下载软件用户和使用用户大概率是同一个人。目标用户也有可能是两类人或是更多,如少儿词典,下载用户是家长,使用用户是家长和孩子,企业协作软件也类似。

从接触软件,下载软件,使用软件,到判断是否继续使用软件,不同的阶段的目标用户是不一样的,目标用户在不同阶段的需求也是不一样的。

其次,开发软件的周期是很长的,在开发软件的过程中,我们的用户在不断地接收新的知识和观点,用户的喜好,认知可能会发生很大的变化。

因此,为了更好地了解用户,我们需要找到用户跟软件之间的交互关系,以及影响用户喜好的因素。一共有 2 个步骤:

步骤 1. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料

在这一步骤中,我们加入了 2 个概念,接触点和未来趋势。

什么是接触点?

接触点指的是用户与产品发生交互的关键点,用来捋清楚我们刚刚提到 「用户跟软件之间的交互关系」。以少儿词典为例,家长和软件之间的接触点,可以罗列为:家长听说少儿词典 – 到应用中心下载软件 – 打开软件 – 使用软件……可见要想打造一款用户好评度高的好产品,仅仅优化软件的体验是不够的。

为什么要从未来趋势和用户当前认知角度去收集用户资料?

刚刚有提到新软件的周期是较长的,前期定好的风格、关键词等,到了开发上线后却不适用了,既浪费人力,也浪费资源,因此要考虑未来趋势对用户的影响。同时,用户在选择软件的时候,已有的喜好/预期/经验等用户认知会影响用户对软件的判断。就像大家想到夏天的冷饮时,脑海中会浮现冰块、西瓜等元素,因此雪碧、西瓜等符合用户对夏天认知的食品在天气炎热时会热销,但是受到大部分买家越来越注重卡路里这一未来趋势的影响,低卡的西瓜冷饮也可能在未来一段时间大卖。

接触点和未来趋势、用户认知之间有什么关系?

了解用户接触点之后,我们就可以猜测用户在这一接触点的需求和心理,加入未来趋势和用户认知,能让我们做出来的东西更符合用户预期。

寻找接触点。我们了解到,少儿词典的目标用户群体是 1~6 年级的学生和他们的家长,即 6~12 岁孩子,和 30~44 岁家长。然后,我们粗略地将用户的接触点划分为,筛选软件 – 下载软件 – 使用软件 – 判断是否再次使用软件,孩子、家长跟接触点之间的关系就可以展示为:

孩子是软件查询、练习、核心功能体验者,家长是内容审核者、软件筛选者、伴学时软件使用者。

找到接触点之后,我们还需要把影响用户认知的内容具象化。

例如,我们想了解夏天做什么口味的饮品更好,我们可以从夏日饮品口味销量排行榜,夏日新品类型,夏日广告等角度来获得更清晰的用户认知。应用到少儿词典中就是,家长在筛选软件时,老师的要求,未来孩子考试的内容、日常辅导内容、大 V 推荐的内容等会影响家长对下载软件的判断。每个接触点都可以使用这样的方式,来联想更多影响用户认知的内容。然后我们将得到类似下面的表格:

根据表格,我收集了 近 10 页的用户信息

步骤 2. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词

杂乱无序的信息只有经过归纳之后才能被大家使用。

怎么归纳总结杂乱的信息呢?

UI 设计师都清楚,在进行界面设计时,大标题、缩进、分层等排版方式能让我们的页面看起来更清晰易读。处理杂乱的信息也同理,最先要做的是找到信息的重点,然后把信息归类,最后再用一句对内容进行总结,方便大家理解。应用到我们提取关键词的环节中就是,挑选重要信息、放入四象限中、总结出能归纳这些信息的关键词。

挑选重要信息。以家长筛选软件为例,当我们将热门大 V 推荐的教学方法、内容,进行整理的时候,会发现美学、乐感、编程、外文图书、儿童心理教育、英文教学方法(自然拼读)等内容出现的频率很高,在一堆内容中挑选跟少儿词典相关的内容,如美学、外文图书、儿童心理教育等。

放入四象限中。在这一方法中,我们将四象限划分为设计和用户认知 2 个方向,其中设计划分为视觉风格和体验风格,用户认知划分为当前认知和未来趋势 。以刚刚挑选的儿童美学教育为例,这是一个属于未来家长会越来越关注的少儿视觉发展方向,所以我们放在视觉风格、未来趋势这一象限中。其他内容也类似,不断地提取出现频率高、用户热点高的内容,并根据内容类型放入四象限中

总结出能归纳这些信息的关键词。以视觉和未来趋势象限为例,我们收集到大 V 的美学教育,未来的课本发展趋势,小学建筑风格发展趋势,他们都有一个特点,颜色柔和无攻击,色彩丰富,因此,我们总结出一个视觉关键词是柔和多彩。

其他内容也采用相同的方法进行总结,少儿词典的视觉关键词是柔和多彩,轻质感,亲和陪伴,体验关键词是,探索多变,感官刺激和重复熟悉。

为什么做出来的设计稿不是太概念就是没风格?

视觉关键词出来了,产品的业务目标也出来了,从关键词到页面样式的逻辑也很严谨,但出来的风格却会觉得跟关键词不太搭,或是跟竞品差异不大,在多款 App 实践后,我们发现可能是这样的原因:

没有把关键词的作用发挥出来

引用一句说烂了的名言 「一千个人眼中就有一千个哈姆雷特」。大家在对关键词的理解是有差异的,以「年轻」为例子,一款针对活力的年轻人的衣服和一款针对潮流的年轻人的衣服,设计风格上可能是隔好几条街的。因此,仅仅得到几个视觉关键词和体验关键词还不足以让我们找准方向,我们还需要将关键词组合和具体化。一共有 2 个步骤:

步骤 1. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则

为什么将关键词结合能让关键词的作用发挥出来呢?

我们的目的是要做一款满足产品需求,符合用户认知的软件。

从问题 1 和问题 2 中,我们得到了符合产品需求的产品关键词,和符合用户认知的视觉关键词和体验关键词,想要同时满足产品需求和用户认知,我们需要找到他们的重合点。如下图所示,将产品关键词和视觉关键词、体验关键词分别结合,这样的出来的规则就能最大限度地符合我们的要求,既满足产品需求,又符合用户认知。

具体怎么做呢?下面将分别从视觉和体验角度举例子。

视觉角度,以权威内容和柔和多彩结合为例:

「权威内容」 要求我们输出的内容是符合教材,符合老师标准的,内容是准确无误的、来源是可靠的;「柔和多彩」 要求我们在进行页面设计的时候减少大面积颜色的使用,色彩柔和,且颜色多样。

将两者结合,我们得到的规则是:

根据这些内容,我们将得到下面的 4 个颜色和圆形叠加的形式。(ps:通过这样的形式确定的是规则,如:以橙色为主结合另外 3 个颜色,圆形,使用深浅色搭配。具体颜色和叠加形式需要在具体页面中进行调整)

体验角度,以权威内容和探索多变为例:

体验上,「权威内容」要求我们的操作形式是跟老师的教学相似,学习方法需要参考成熟且有效的方法;「探索多变」要求我们在交互形式上可以采用多种形式,给孩子探索未知的机会,交互形式要符合儿童操作习惯,如涂抹、翻转、拖拉等

将两者结合,我们得到的规则是:

其他几个关键词的结合也是使用这样的形式,这里就不一一展开。下图是少儿词典的视觉关键词和产品关键词结合后的样式。

步骤 2. 选择复杂的核心页面,把具象化的体验规则、视觉规则融进页面中,确定设计风格

规则梳理出来后,我们就要挑选一些重要页面进行风格尝试,以结构复杂的中文查词单字结果页为例:

分析小学一年级到六年级的考试内容,我们了解到部首、笔顺笔画、跟写、发音等汉字的基础信息是低年级用户(小学三年级及以下)会使用到,他们要求信息完整且准确;像词组、造句这些信息则是针对高年级学生,要求快速准确定位到具体的内容板块。

分析完内容结构后,我们就需要根据内容布局,加入表格中总结的体验规则:

最后,梳理好页面的体验形式之后,我们开始给页面添加视觉规则:

对比产品原型和市面上的一些竞品,我们可以发现,查词软件在内容布局上相差无几。如果没有找到符合我们产品业务目标,同时符合用户认知的规则,我们将被淹没在一群查词软件中。

步骤 3. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作

最后一步,相信很多设计师都会在设计过程中建立一套方便好用的设计规范库,这里就不展开来说了。

总结

最后,再对上文的所有内容进行概括。从 0 到 1 进行软件设计我们需要用到下面这 7 步:

  1. 多使用「为什么+动词」的问法,向产品经理了解业务目标、用户目标。
  2. 从业务目标开始跟产品经理讨论项目信息,直到获得双方达成一致的产品关键词。
  3. 分析不同用户跟软件之间的接触点,从未来趋势和用户当前认知角度收集用户资料。
  4. 提取收集到的信息,并放入四象限中,总结出2~4个视觉关键词、体验关键词。
  5. 分别组合产品关键词和视觉关键词,产品关键词和体验关键词,找到同时满足 2 组关键词的规则。
  6. 选择复杂的核心页面,把具体化的体验规则、视觉规则融进页面中,确定设计风格。
  7. 建立一个画板,把用到的颜色、规则、字体、间距等内容罗列出来,并给他们限定使用范围,方便自己查阅和团队合作。

完成这 7 步,将可以让你从 0 ~ 1 设计一款产品经理一稿过,设计风格明确,用户粘性高的软件。

拓展阅读:

Source: 优设网 – UISDC | 27 Mar 2020 | 6:33 am(NZT)

实战经验!可视化大屏设计案例全方位复盘!

随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。所以数据可视化设计,绝对是热门的设计之一。很多 UI 设计师突然会接到公司数据可视化设计的需求,如果不了解数据可视化设计,肯定是一头雾水,不知从何入手。本文结合最近设计案例,分享大屏可视化设计过程中遇到的一些问题以及设计思路,供大家一起交流与学习。

往期回顾:

△ 最终动态效果图

案例分解

首先放的是项目改版前的页面:

1. 需求介绍

某某应用云,分为五大云平台模块:云端综合调度、数据查询通道、数据应用处理、数据存储管理、管理运行维护。每个大模块下⾯有若干个子系统。

可视化⼤屏首页需要展示的内容包括:

2. 需求分析

分析大屏可视化的一些共性:

结合大屏的一些共性特点针对看到的线上旧版本设计,分析存在的问题。

3. 布局

整合数据,分析出主要数据、次要数据、总量数据、细分数据、各数据的维度等等。首先优化页面布局,可以先在纸上画一画,然后脑子里有大概思路以后再用电脑绘制,如下图:

采用栅格化对称布局,让整体视觉左右平衡。

4. 风格

一提到数据可视化大家往往能想到科技、数据、蓝色等一些普遍关键词。

了解到客户是想做一个科技感强、炫酷的视觉效果。可以在网上找一些效果图或是自己曾经做过的案例供客户选择,确定一个大致的风格,然后结合具体的业务场景进行设计。

5. 颜色

颜色上结合产品使用场景,以及整个产品调性还是以蓝色为主,背景选用深色调,让视觉更好聚焦,内容部分采用比较透亮的蓝色系,保证内容与背景有一定的对比关系,便于业务信息传达。

6. 主体地图

地图为大屏的主要展示内容,首先分析展示的目的是为了看清各个城市间的不同分布情况,和城市数据的汇集效果。

如图:

改版前:地图过于单薄,没有立体感,太平缺乏层次,颜色黄色不符合产品调性。

改版后:主色调改为科技蓝,在原有地图上增加外发光和多层阴影叠加,增加地图的立体感,地图上增加科技线条上升的效果代表每个城市数据变化的提升,地图背景采用比较弱化的转动线条圆形,衬托地图主体,使得画面更加丰富。

7. 地图效果的实现方法

首先用 ps 拉框助手新建一个山东的地图(拉框助手的使用获取方法可以参照上篇文章)。

完成后会得到一个叫 map 文件夹的地图分层文件,如图所示。这里需要对每个城市的颜色进行调整,为了区分每个城市之间的数据不同关系。

调整完块之间的颜色后,就需要给地图整体增加立体效果。

首先,是整体给地图加了一个描边和外发光。描边是为了强化地图边缘,外发光是为了地图与背景有一个区分。

其次为了增加地图立体感,需要给地图增加多层阴影叠加的效果。复制现有形状层,拼合成一个山东省的地图,如下图:

最后,把拼合好的图层移动到 map 文件夹下面,阴影可以添加多层,这里针对每一层进行不同颜色大小的调整,就是下面的这种效果了,地图的体积厚度感也就出来了。这里只是提供一个大概的思路,大家可以多去尝试。

整体地图效果调整完成后,就是给地图增加些纹理,和上升线条这些细节上的效果了。纹理可以用图案叠加,或者找一张纹理图剪切蒙版实现,最后再添加上升线条的效果,地图的效果就完成了。

最后加上线条上升的动态效果:

8. 数据图表拆分

在选定数据图表之前,首先要确定图表之间的关系,可以从以下四个维度进行思考分析:

可以参照下面这个图:

△ 图片来自于网络,侵删

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

传统的图表比如 echarts 图表在视觉上展示可能不是很美观好看,可根据选择的图表在其基础之上进行美化设计,总之选定图表最重要的两个点就是:易理解、可实现。

易理解:就是要考虑最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形及元素。

可实现:主要是跟开发前期沟通好实现方式,一般都采用开源组件库的居多,比如 echarts 组件库,我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps/Ai/Ae 这些工具模拟时会发现比较困难。同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、死磕不放。

案例中在图表选择上,强化科技感元素,条形图打破传统条形图的展示形式,采用电池晶格的展示形式,在保持图表功能的同时更加凸显科技感。

从页面的整体看,已经有两处用到了条形图、柱状图,如果这里还是条形图,那么页面看起来会很单调,图表也没有表现出多样性,所以现在设计要体现图表的多样性也能够有排名的直观呈现。以下图表采用科技圆盘的形式,运用科技线条的上升状态代表排名的先后顺序,所有图表都采用数据降序来展示排名更加直观。

改版前的图标样式比较单一,改版后针对每组数据不同的对比形式,采用比较贴合的图表进行展示,篇幅原因就不一一做展示了。

附上最终视觉效果图:

总结

大屏设计需要注意的点:

以上是我对数据可视化大屏的案例总结,希望能帮助到你。除此之外还有很多地方没有涉及到,包括具体设计的操作方式、选取图形元素的具体方法,以及在各种大屏中所需要的相对应的组件等,在庞大的可视化大屏设计系统中,还有很多值得学习参考和优化的知识,欢迎沟通交流,大家一起努力。

欢迎关注作者微信公众号:「小六可视化设计」

Source: 优设网 – UISDC | 27 Mar 2020 | 5:54 am(NZT)

教你9个正文编排技巧,从新手进阶优秀设计师

你是否在阅读过程中一次次迷失在文字换行中,导致阅读体验极差?本文为大家提供 9 个正文编排小技巧,分享如何通过合理排版,提升阅读体验的方法,希望对你有所启发。

更多文字排版技巧:

欢迎关注作者的微信公众号:「艺海拾贝Design」

Source: 优设网 – UISDC | 27 Mar 2020 | 5:33 am(NZT)











© 澳纽网 Ausnz.net