首页

十分钟认识界面设计中卡片式设计技法

博博

正确认识卡片式设计,什么是卡片、总结卡片优势、卡片正确设计知识通过设计两个案例进行讲解,卡片在运用时的技法,望能帮助大家

好久没有发文章了,今天顺叔和大家一起聊一聊卡片式设计,无论是WEB还是APP卡片式设计运用的比较多,很多UI设计师比较偏爱这样的表现,卡片式设计会给人一种视觉上的享受,也能对于界面具有层次感。但往往在卡片设计中有一些技法还是需要了解,不能因为卡片式设计而卡片式设计,要能更好的应用到界面场景中。希望在这次分享中一些知识点能帮助到大家,之后的几篇系列文章中,顺叔会从界面中比较趋势的设计技法进行分析,希望能帮助到一些设计的小伙伴。


教程前的引言

卡片式设计这几年比较流行,同样这样的设计表达也是个趋势,应用在APP PC界面中至今还流行着,从事UI设计的都会知道卡片式设计,具有把内容整合模块化,从视觉,个性化体验上进行呈现,是设计师在设计时常用的一种表现,同样也具有独特的创新概念。

在一些项目中,一些客户会说这个设计的APP界面有点太白,没有层次感怎么办,那这时你应该和客户说在APP设计中运用了现在比较流行的一个表现手法,卡片式设计,可以解决在画面中有个性化 、变化、 层次感的设计。那客户又问什么是卡片式设计呢?


一、什么是卡片

无处不在的卡片设计具有个性的美感和很好的易用性,是以文字标题,小标题, 图形或图片组成的模块化,以块状形式规整的整合内容,让内容更规整化,视觉上更个性化,也是操作上快捷的内容信息入口。更直观的表达内容信息和快捷跳转操作。成为当今在设计中一个比较流行趋势,而卡片在设计中也占用一定的优势,让整体更加的有层次感,在运用起来也比较方便,从视觉、体验、交互都具有不错的优点


设计效果图展示

顺叔为了这个文章特意设计了两个案例,通过这两个案例进行一些讲解。请见下图:


二、卡片设计优势

1.趋势

无论是大平台 还是小平台的产品都会运用这样的卡片式,跟风式设计趋势,也让卡片式设计成为了一个现在常用的优势,不过卡片式设计的确有很好的效果

2. 层次感

具有一定的层次感,能在页面版式中起到设计上的不同,个性化变化,页面层次感区分强烈,能更好的体现提炼出内容

3. 规整化

卡片式设计以图片、 图标 、LOGO、 标题、 整合到一起 以块状的形式在界面中展示,更规整的排版呈现。虽然内容多会导致页面乱,一个模块包含内容之后就会规整不少,也给页面设计上带来了更好的视觉

4. 视觉体验

卡片式给整个页面会增加视觉上的体验,特别那种大图片卡片式更具有视觉上的冲击力,背景衬托出前景卡片式设计。同样对卡片式也感觉到舒适感。卡片式设计还是需要根据整个布局、 产品需求 、功能进行设计。以达到最好的用户体验、视觉体验。

不要为了卡片设计而卡片设计。

5. 易用性

卡片式设计在易用性和灵活性上比较高,在响应式设计中同样应用的也比较多一些。能更好的有序排列。

6.简约设计

简约设计会更显得品质,不需要过多的进行装饰,哪怕就是一个白色的色块,上面点缀有色彩的图标和标题 副标的变化,也会觉得显得高大上,就算是一个带有颜色的色块卡片,也无须过多的设计 内容上的标题 、图标、 按钮就足以支撑起卡片

7. 交互效果

在卡片式的设计中会有一些动效交互,比如整体卡片放大、 缩小 、左滑、 右滑,可以整模块化滑动 缩放。整体效果增加了不错的视觉交互体验


三、卡片正确设计知识

一般在界面设计中卡片的存在的意义和表现手法都是什么样的呢,下面为大家举例了几种常用的正确的设计表达姿势。希望小伙伴在设计的同时有所灵感和参考,把一些表现手法加入到自己的设计中,适合才最重要。卡片式设计还是要根据整个风格和整个布局而进行展示,在做进一步的对比和布局中以最好的效果为最终展示方式,总结分析几个常见代表例子,如有不全请讨论补充,下面就是一些例子


1.卡片式形式一

以色块为主体并用现在比较流行的渐变色组成,其中四边为圆角,同样色块下边阴影衬托出主题,这个是在卡片中设计比较常见的运用手法,卡片的长高在设计中也是根据结构,内容功能而进行设定。正方形,长方形都是一个表现得手法,在色块上面标题文字,图标,图形是整个卡片的布局的形式,无非就是左右布局和上下布局

应用场景:卡包、天气、类别、入口、优惠劵,卡劵

此图片来自于网络

2. 卡片式形式二

这种形式共同点都是在头部C位出现的卡片式设计,其中承载着标题,副标题,以及图文版式,不难发现,如果图片有颜色,那么下面是白色底,这样在白底上面色块的出现还是比较简约凸显卡片,如果背景有颜色,卡片也有颜色那么卡片的凸显程度就不会那么强,图二很多在会员卡设计中常用的比较多,也比较简约,另外两个共同特点背景有颜色,一般底部背景颜色就是整个界面的主色调,背景有色块,上面就用白色卡片,卡片上方标题、 文字、 图片呈现。只不过排版的方式有所不同而已,在很多APP设计中,这样的表达也很多,通过主色调可以很融合的把上面的状态栏,导航栏融为一体视觉上统一性,底部背景颜色延续下来,上面凸显白色卡片,这样更具有视觉感和层次感。白色的卡片不需要过多的修饰,更能体现的上面的文字和图片。

应用场景:会员卡,滑动卡片,图文标题,入口

此图片来自于网络

3. 卡片式形式三

这种形式上图下文字,或者是上标题,下图片的形式,这种形式特别在图片素材的选择上尤为重要,有视觉效果好的图片通过剪切,处理,合成,摄影,插画等等方式,出现的图片质量上好的话可以带动整个设计的逼格,通过有效的图片传达,文字传达,让用户更清晰的了解。这样的形似一般在入口或者列表的形式出现的比较多,同样也能体现出整体化和视觉化

应用场景:滑动卡片,图文标题,入口,列表

此图片来自于网络

4. 卡片式形式四

大图卡片式,一般以摄影图片,插画形式,文字压与图片之上,这样的效果更具有冲击力,也能显得出比较潮流。体验也很不错,放大视觉,展示内容,图片相结合,让浏览者更愿意多看一会。表达的图片与文字内容相符,做到图文交融的程度。一般这样对于图片的选择上还是比较要求严格的。没有质量的图效果会降低。

应用场景:列表,说明,入口,天气


此图片来自于网络

5.卡片式形式五

列表卡片设计,这种形式一般白色的卡片,上面标题,头像,按钮,扁平插画形式体现,更多应用在一级页面的下方内容,以及二级页面的列表页或者集合页,整体弱化背景以白色为主,给予圆角及阴影承托出层次感同时,体现上面内容部分。每个模块的单元体具有统一的视觉。

应用场景:列表,集合页,入口

此图片来自于网络

6. 卡片式形式六

大卡片式设计,表现为一块特大的卡片式,上面会有标题,按钮等信息,同样表现出突出层次感,个性化设计的特质。体现出内容,一般背景有颜色上面卡片为白色,如下面背景为白色,那么卡片的形式也可色块,在对比上有个反差,才能突出卡片的作用性。

应用场景:提示,说明,优惠劵,劵,入口

此图片来自于网络

以上总结的几种卡片的形式,在设计中可以根据情况而设计,卡片多样化,布局多样化,适合自己产品的才最重要,虽然在界面设计中常用的设计,但不要盲目的为了卡片而卡片套用设计,这样起不到作用反而效果达不到理想程度。希望几个卡片形式总结能给大家带来一些灵感和启发。

同样在这些卡片中会有一些基本的共同的特点

共同的特点是

1. 四个角都是圆角

2. 根据潮流渐变色或白卡片

3. 色块下的阴影,色块下的阴影更能体现出层次

4. 卡片上面组成部分,标题,副标题,图形,按钮,图片,头像

5. 字体大小,字体颜色的变化

6. 一般卡片应用在会员,列表,说明,优惠劵,分类,类别,集合页,欢迎页等场景常见


三、卡片正确设计知识

为了讲解文章,顺叔临时构思一个产品原型,而快速进行了简单的设计,一个第一版,一个优化版,主要为了讲解一下这个卡片设计一些问题,

以下此图为构思的原型图

经过分析原型图之后开始进行设计,首先设计一个版本的,如果这样卡片布局设计,这样色彩搭配的情况下,会怎么样呢,整体设计用了蓝紫色为主色调,首先铺蓝紫色的色块作为背景,然后上面放白色卡片,以至于卡片上详细的内容,比如数字,图形 能更好的丰富支撑卡片。同样数据流也是比较重要的C位。也是比较重要的位置。接着根据原型图下面有两个卡片,通过扁平化设计,以色块为主设计一个蓝色,一个橙色的卡片,上面并有图标,头像,以及标题,两个颜色的对比,更让视觉有冲击力,整体看这个设计并没有什么,但有个问题在于单个模块拿出来效果的确都不错,但组成之后上面的卡片C位让下面的两个带颜色的卡片抢了视觉,当打开这个界面的时候视觉落点在彩色卡片上,那么这个整体设计上就出现了问题,上面的数据,白色卡片其实是比较重要的,而且整个画面都是卡片毫无设计上的变化,

那么只能在这个基础上在进行优化,其实大家在做设计的同时也这样,在考虑功能模块前提下,用户体验,也要考虑视觉体验,那么视觉从哪方面来,色彩、层次、版式等等方面。那么能不能在进行一下优化呢,其实还是有空间在进行优化。以下图为第一版

设计第一版

根据上面的设计在进行优化,同样保留白色卡片部分元素,在卡片与卡片之间放一些颜色的图标,这样更好的给功能上快捷入口,也能给卡片设计增添了变化。使得整个画面更灵活

虽然白色卡片,但有一些色彩的点缀,也让白色卡片活跃起来,把颜色的卡片改成白色卡片,从上到下的版式舒服多了,也没有那么跳。整个风格更简约,同时功能也更全面。

调整后

从原型图,在到设计第一版,在到优化调整之后,证明一点,卡片不要因为卡片而套设计,反而会失去效果,考虑功能模块,用户体验,视觉体验也一定让整体舒服。一直都说,绘画中需要有主有次,设计中也一定要有主,有次的进行设计。这样层级关系才能更清晰。

但这些条件一定是从,体验、色彩、布局、版式等方面进行对比和研究的。设计不要先着急做设计,前期的进行思考,逻辑清楚了,在进行设计的时候会更加的顺畅。卡片式设计,大家都在应用,希望这个文章能给大家带来一点点知识点,那就不枉费我在熬夜写这篇文章。

不为别的,只是一个喜欢分享的肉团子。这篇文章就写到这里,如果喜欢请给个赞吧。如内容有没说到的地方,各位可以进行补充,以上两个图你稀罕哪个呢?


    • 文章来源:站酷   作者:张增顺

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

      蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
      BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



留白设计和UI设计准则

博博

接上一篇文章叙述留白设计准则以及UI设计的排版准则,希望在这个隔离的日子里,大家一起努力克服疫情,加油!






    • 文章来源:站酷   作者:赤鲸

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

      蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
      BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


UI设计中色彩理论和实用的调色板指南

博博

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。

颜色是感知的问题。每种颜色代表不同的定义波长,但是我们每个人对颜色的感知都取决于我们的感知能力。此外,我们都有与颜色相关的不同文化或背景关联。

有很多很棒的文章和视频,介绍了色彩理论和色轮,还有许多用于生成调色板的工具。但是有时您会在实践中发现这些文章不太好用,颜色组合不完全匹配或所生成的调色板在您的项目环境中效果不佳。

所以你会怎么做?您如何开始思考和查看颜色,使它们更易于选择以及调整您的需求?

诸如互补和单色,饱和度和亮度之类的色彩理论术语并没有吸引他们。

因此,我开始以不同的方式分解色彩,方法是从绘画和室内设计等传统视觉和图形艺术中汲取灵感,并以对我们作为UI设计师所做的方式有意义的方式对其进行取景。

匹配调色板并平衡配色方案

也许您已经按照所有的色彩协调和颜色理论教程进行了准备,并生成了一个免费的调色板,但是您注意到这些颜色似乎不太匹配,也许它们看起来比较粗糙或不专业。

创建良好的配色方案就是与色调,阴影和温度匹配的平衡。要在设计应用程序中成功做到这一点,您需知道要拉动哪些杠杆。

色彩理论提供了一些公式,可用于启动调色板,这是理解调色板的重要基础。但是创建漂亮的调色板不仅与这些公式有关,还与平衡色调,阴影和温度有关。

这些是我们可以推拉的“杠杆”,可以为我们的UI设计实现更加平衡和独特的颜色组合。

因此,首先,回顾一下这些杠杆的作用。

色相是用于描述所见到的每种色调的通用术语。

饱和度指的是我们正在查看的特定颜色的主要颜色系列。白色,黑色和灰色通常被称为无彩色。

明度也指颜色的明暗程度。色调相同的颜色,明暗可能不同。例如,绛红色和粉红色都含有红色,但前者显暗,后者显亮。

色温-色温更多地是关于我们如何感知所看到的色相。并且我们倾向于将它们分为暖色和冷色。

暖色-通常是通过增加色调中的红色或黄色来获得的颜色。这些往往会唤起激情,舒适,活力和运动的感觉。他们使我们想起阳光和热量。

冷色-是增加蓝色和绿色的颜色。这些趋向于唤起,清新,冬天,静止,平静。他们使我们想起冰,雪和水。

色彩模型和色彩空间

要获得一些技术知识,您可能听说过3种不同的颜色模型,这将有助于我们更好地理解光和颜色的协同作用。

CMYK使用减法混色。它指的是光线反射物理白页的方式。颜色的重叠导致黑色。由于页面无法投射光线并向您发光,因此页面必须具有反射光。将这些颜色混合在一起就可以掩盖页面的白色,从而减少了可以反射的光量。

RGB称为光的加法混合。它指的是数字屏幕向我们投射光的方式。您在全亮度下的颜色会导致我们看到白色的重叠。有点像被明亮的泛光灯所蒙蔽。

HSB-代表色相,饱和度和明度

HSB颜色模型为我们提供了放射状的颜色,其中我们具有一定范围的色相,饱和度和明度值。

这就是我们的眼睛和大脑如何解释颜色HSB就是我们的眼睛所看到的一切,而与它是从屏幕还是在纸上投射的光线无关。

因此,出于为UI设计选择颜色的目的,我们将使用HSB颜色模型。

颜色属性

您经常会听到两种较大的颜色分组。暖色和冷色。

暖色通常被认为是主动色,这意味着它们会引起更多关注。

冷色通常被认为更被动且后退一些。

根据色彩的丰富程度和它们如何平衡,您可以使柔和的暖色充当被动元素,而更鲜艳的冷色则扮演主动角色。

现在,您了解了颜色如何在屏幕上显示以及如何设置我们的设计应用程序。让我们谈谈如何在我们的设计软件中使用和推动这些杠杆,并平衡我们的配色方案和调色板。

为了得出这些不同的颜色类别,我们将集中于推和拉色调,饱和度和亮度(HSB)的控制杆。

在数字屏幕上,我发现有一个公式和安全范围的饱和度和亮度,可以每次为每个类别创建一个完美的调色板。

为简化起见,我将主要颜色分为6种通常可以识别的主要颜色类别。这些反映了我们在日常生活中谈论颜色时通常倾向于指代颜色的方式:

1.宝石色调

S:83-73,B:76-56

这些颜色是饱和度很高的色调,以宝石命名,包括宝石蓝,宝石红,紫水晶紫色,柠檬黄和翠绿色。想一想红色宝石项链或皇家紫色的魅力。这些颜色富丽堂皇,深沉,并赋予豪华感。

2.粉彩

S:14-21,B:89-96

柔和的颜色属于浅色系。粉色,淡紫色和淡蓝色是常用的柔和色。这个家庭的颜色通常被描述为“舒缓”。我们通过降低饱和度和调整色彩来创建这些颜色。

3.大地色调

S:36-41,B:77-36

这些是自然界中常见的颜色。可以通过将纯色与白色,黑色或灰色相结合来创建它们。从广义上讲,这些是中性色。它们受到树木,森林,海洋和天空的色调的影响,被用以模仿自然色彩。我们通过增加饱和度和调整色调来创建大地色调。

4.中立

S:1-10,B:99-70

纯中性色包括黑色,白色,米色和所有灰色,而接近中性色则包括棕色,棕褐色和深色。这些是通过使色彩去饱和来创建的。它们可以与以上任何类别配对以创造平衡。我们通过降低饱和度并调整色调,色调和阴影来创建中性色。

5.荧光灯/霓虹灯

S:100-63,B:100-82

在物理世界中,这是由霓虹灯管或紫外线反应涂料的颜色创造的,但在数字世界中,我们可以通过将非常明亮和高度饱和的颜色应用于我们的设计来获得相同的效果。我们通过增加亮度和色调来创建它们。

6.阴影

S:0-0,B:0-100

两种主要的阴影是黑色和白色,其他阴影也包括不同程度的灰色。

UI颜色组合

最佳的用户界面设计结合使用一种颜色类别以及中性和阴影。

您实际上只需要这些类别中的1或2种颜色即可设计参与整个用户界面。

我们为什么不这样谈论颜色

作为数字设计师,我们倾向于避免给这些配色方案分类,因为术语似乎是为混合自然色彩的画家,印刷设计师和室内设计师保留的。但是从实际的角度来看,当我们仍在学习色彩理论并使我们的眼睛习惯于选择可以一起使用的色彩时,我发现以这种方式引用色彩在UI和数字屏幕设计中可以非常有用。

这不是一门精确的科学,但是您会看到如何以这种方式思考颜色并掌握一些杠杆和数字,以指导您帮助用户创建更令人愉悦和精致的调色板。

理解色彩理论的基础和原理很重要,特别是当涉及到实际应用时,它就显得尤为重要。引用不同的学科并找到对我们有用的类比可以带来很大的不同。

作为UI / UX设计师,最重要的是,无论您如何去实现,您都能够有效地使用颜色来传达信息并为用户创造最佳体验。


    • 文章来源:站酷   作者:对啊设计君

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

      蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
      BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


UI 设计:如何做到理性?

博博

有哪些理性,以及如何做到理性



UI 设计,是用理性方法,来满足需求,并带来美学享受。


本篇探讨 UI 设计如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性吗。



01 UI 设计:有哪些理性?


UI 设计主要有四类理性:基本原则,基础知识,风格设定,风格把控。四类理性有一个共同核心:活学活用



1 基本原则


共有四个基本原则:对齐,对比,亲密,重复。



先说对齐


秩序产生美。对齐作为一种基本秩序,主要事关整齐美观阅读体验


对齐一般分左对齐、右对齐和居中对齐。


从阅读体验角度来讲,左对齐通常胜过居中对齐,所以绝大部分文章和 UI 界面都是左对齐为主。


从美感角度来讲,居中对齐往往胜过左对齐,所以一些强调美感胜过强调阅读效率、篇幅不长、同时需要细品的诗或歌往往采用居中对齐。



从空间利用率角度来讲,右对齐往往是左对齐的一种补充。比如微信的发现页面,最重要的图标和文字左对齐,次要的右箭头和其它信息右对齐。


UI 设计追求阅读体验、美感和高空间利用率,所以这三种对齐方式大部分时候都会同时出现。整体而言,是以左对齐为主,居中对齐和右对齐为辅。


再说对比


嘈嘈切切错杂弹,大珠小珠落玉盘。音乐讲究韵律和节奏,设计也追求错落有致的节奏感。这种节奏感,很大程度上靠对比实现


好的对比可以带来视觉张力,就是抓人眼球的吸引力,同时也能起到主次分明和视觉引导的作用,最终带来良好的阅读体验。


一定程度上,对比是无处不在的。只要存在不同,就存在对比。比如大小之间的对比,不同颜色之间的对比,文字与图标/图片之间的对比,不同对齐方式之间的对比,等等。


一般而言,对比需要果断:若不同,就彻底不同。因为一般情况下,充分的对比能带来更好的视觉张力和更好的阅读体验。


第三说亲密


设计就是分类,张小龙曾如是说。分类中最重要的原则是亲密,还有一个副产物是留白。


性质相同或相似的元素,我们会让它们看起来离的更近,关系更亲密。亲密成就分类,分类能化繁为简


最后说下重复


设计追求一致性,一致性主要靠重复来实现。被大量“重复”的元素,比如这篇文章里的字体大小和字体颜色,既保证了一致性,又提高了效率。


2 基础知识


基础知识主要包括:手绘、颜色、版式设计、字体设计、品牌设计、动效设计、插画设计等专业知识。


UI 设计师可能不用画卡通人物或插画,但一定会画图标和 logo,这些也会用到手绘。作为造型基本功,需要掌握一定手绘技能。


颜色方面,最重要的是能够很好感受和理解颜色传达出来的感觉,也即颜色的“精神之美”,这块主要依赖审美和练习。


配色方面,推荐软件里的 HSB(色相、饱和度和亮度) 模式,这种模式很好理解,也方便调色。另外还强烈推荐从照片中吸取颜色,因为照片往往会和“生活”、“自然”有一定关联,“生活”和“自然”是非常重要的素材和灵感来源。从色卡中选择颜色也是一个不错的选择。


版式设计就像是选秀节目中练习生的舞台表演,考验的是唱跳、表情管理、舞台魅力、临场应变等综合实力


“活学活用”环节,会结合例子分享版式设计。


字体设计、品牌设计、动效设计、插画设计等方面,个人经验不多,就不分享了。文末会附一份推荐书单,囊括基本原则和部分基础知识。


3 风格设定


风格设定,即上篇提到的“精确描述”,是在动手设计之前,先探索出合适的风格,并把它精确描述出来。


好的开始是成功的一半。风格设定是一个开始,极其重要。如果风格设定只做到 60 分,稍微打点折扣的执行结果就是不及格。所以,如果要把设计做到 85 分,风格设定一般要做到 90 分。


风格设定犹如在茫茫大海中行船,首要目标把握方向,核心诉求是精准。海上并无现成道路和导航可循,只能依靠繁琐而严谨的推理和计算。


风格设定的次要目标划一个既清晰界定风格、又清晰指明“发挥范围”的“圆圈”,核心诉求是周密。因为需要清楚知道“圆圈”以内代表什么,“圆圈”以外代表什么。


在“精准”和“周密”上同时做到优良,风格设定才能做到优良。


既精准又周密的风格设定,通常无法一蹴而就:“风格设定”阶段一般只能做到七成,剩下三成需要在设计过程中继续探索和打磨。下一大段会结合案例分享具体方法。


4 风格把控


风格把控有两层含义,一是实现当初设定的风格,二是在实现的基础上做到统一和规范


只要严格在“圆圈”里发挥,实现当初设定的风格并不难。那做到统一和规范难吗?往难了说就是需要做大量琐碎工作:以联系的眼光看待所有设计元素,并把它们分类规整好,注意分类不宜过多,同时分类逻辑上不能出现明显问题。往简单了说就是大量复用已有的设计样式。


风格把控就是在划定的“发挥范围”内,利用设计知识和经验,以规范的方式实现规划好的风格。


5 活学活用


活学活用作为四类理性的共同核心,最典型的应用场景是版式设计。


活学活用有两个要点:正反结合,风格第一



所谓正反结合,是指设计知识既能正着用,也能反着用。最常见的例子是对齐原则,大部分时候是正着用,但如果想要营造活泼的感觉,也会反着用:故意打破对齐原则。


除了对齐原则,其它设计知识,比如重复原则,也可以反着用。


本文配图就是一个例子:图片左上角、右上角和右下角分别散布着装饰元素(横线、圆环)和 logo,在装饰元素的出现次数上,没有用重复原则。过年家里挂灯笼一般至少挂两个,同一装饰元素一般至少出现两次,以达到一种和谐和较为热闹的装饰效果。



我在装饰元素的出现次数上没有用重复原则,而在出现位置(相似位置)、元素大小(相似大小)和元素颜色(相似颜色)上用了重复原则,同样达到了和谐效果。之所以没在装饰元素的出现次数上用重复原则,是想放一个隐喻在这里。


所谓风格第一,是指设计风格永远第一,设计知识永远第二。知识服务风格,切不可重知识轻风格。


《倚天屠龙记》中,张三丰教张无忌练习太极剑时,要他忘记剑招,只记剑意。某种程度上,版式设计也要将“剑意”放在第一位,“剑招”服务“剑意”


对比原则也有反着用的时候。有一条关于对比的知识:对比要果断,若不同,就彻底不同。这条知识能解释百事可乐 logo 里红色与蓝色的强烈对比,但解释不了山本耀司旗下大部分服装那千篇一律的黑色——单色,无对比。



设计最重要的是感染力,感染力主要来自个性、态度、价值观这些风格层面的东西,而非设计知识这些技法层面的东西。


当一个设计,技法高超而风格不足时,感染力和魅力就会不足,这也是设计师经常会犯的错误,大家需要注意。



02 UI 设计:如何做到理性?


可以简单分成三步:规划,成形,细化。下面结合微信 Redesign 这个案例来说明。



1 规划:用“红绿灯”法设定风格


设定风格,用到的方法姑且称之为“红绿灯”法。“红绿灯”法借鉴并改良了我在网上看到的一种“红黄绿卡片法”(在红、黄、绿三种颜色的卡片上写下不同的设计关键词),并和“情绪板”法有相似之处:都包含关键词定位图片参考两部分。


先说关键词定位,共有两步。


第一步类似头脑风暴,结合产品属性、用户属性、市场情况、个人喜好等因素,把能想到的设计关键词全部写下来。合适的不合适的都要写,只要想到了就写下来,确保有二三十个。如果关键词数量不够,这个步骤可以多重复几次,直到够了为止。这一步设计师和需求方都要参与进来,在提供关键词上双方是平等关系。


这个微信 Redesign 是个具有探索性质的小练习项目,基于微信 7.0,有两个目的:首先保留原有交互体验和品牌识别度,其次在视觉上更年轻、更流行。可以通俗理解成:一款微信“皮肤”,主要给年轻用户和赶新潮的中老年用户用。


结合产品属性(社交类、工具类、内容类)、用户属性(年轻用户为主)、市场情况、个人喜好这些因素,这一步想到的关键词如下图所示。



第二步是归类,就是把第一步产生的所有关键词归成“红黄绿”三类。如果关键词不够,还可以再补充。这一步依然是需求方和设计师共同参与,但需要设计师来主导。


红色关键词代表不能踩的红线:不能这样做黄色关键词代表黄灯警告:这样做不太合适绿色关键词代表畅通无阻:应该这样做


需要注意的是,绿色关键词最好控制在 3-4 个之间,如果超过 4 个,就需要分成主绿关键词和次绿关键词,主绿关键词依然要控制在 3-4 个之间。这样做有两个考量,一是确保简单和重点突出,二是也更容易实现。


回到第一步的关键词上来。设计中当然可以用“拟人”、“隐喻”等手法,所以“拟人”这个关键词显得意义不大,故删去。“温润”和“亲和”,“老少皆宜”和“大众”在语义上都存在一定的重复,所以删去后者。删除这类不合适的关键词后,剩余关键词就按“红绿灯”法归类,归类后情况如下。


(微信 Redesign 之按“红绿灯”法归类后的设计关键词)


关键词定位已就绪,再来找参考图片。


可供参考的图片有两大类:照片和 UI 界面。UI 界面也有两类:线上作品(真实项目、练习作品等)和上线作品。


做 UI 设计,参考什么样的图片?个人建议,做什么类型的设计,就重点参考什么类型的图片。比如 UI 界面就重点参考 UI 界面,banner 就重点参考 banner。


UI 界面的设计,个人喜欢重点参考知名产品的上线作品。单从视觉角度来说,上线作品的质量可能比不过一些线上练习作品。但是已经上线的知名产品的 UI 设计,其风格的形成往往都会经过很多推敲,会有很多比较成熟的设计思路在里面。


参考别人的设计,最重要的是参考设计思路,其次才是参考表现形式。这种设计思路,有时候能从网上找到,但更多时候靠自己推测


微信 Redesign,根据“很多年轻人在用,且风格比较流行”这条主线,找来了 QQ、抖音、B 站、小红书、陌陌、Soul、腾讯视频、爱奇艺等产品的截图。这些产品的截图,看完一圈后,就会面临一个问题:以图标为例,这几个产品的图标,风格各异,但基本都具备“年轻”和“流行”的特点,那应该参考哪一个?



这时就要求助关键词定位。除了“年轻”和“流行”,主绿关键词还有一个“轻微老少皆宜”。最符合“轻微老少皆宜”的是爱奇艺和腾讯视频:很多老人和小孩也会用这两个 App 看视频,网上公开的数据也能佐证这一点,所以它们的设计一定会照顾中老年用户的审美。


最后,出于个人偏好,我选择重点参考爱奇艺的图标风格,具体而言就是:深浅双色、较粗(1.5pt)描边、圆润风格。


2 成形:按照规划,实现风格


红黄绿三色关键词及重点参考图片就绪后,就可以动手设计。


我一般会把界面设计粗略分成三大部分:版式风格、元素风格、元素大小,元素为图标、图片、按钮等,然后去一一实现。


先说版式风格


用的主要绿色关键词是“更流行”和“更年轻”。“更流行”包括:更大字号的页面标题、尽可能用留白代替分割线和卡片的“无界”风格、圆形头像、更多留白更多舒适、等等。“更年轻”包括:更圆润的搜索框、输入框和图标、更年轻更具活力的配色、等等。


再说元素风格之图标风格。


图标主要参考爱奇艺 App:其一,底部导航和发现页的图标都是深浅双色加较粗的描边;其二,除了更圆润以外,部分图标还变 Q 了。


最后说元素大小


以这个小项目为例,最主要的元素大小是图标大小和字体大小,它们会影响整个设计的感觉。通常情况,元素越小,给人感觉越精致、越高端,此其一;其二,可能是年轻人和老年人视力存在差别的原因,越小的元素往往代表年轻人的审美,反之则代表老年人的审美。


元素大小主要运用的绿色关键词是“轻微老少皆宜”。也就是说,需要在年轻人和中老年人的审美中找到一个平衡,所以元素大小基本直接参考了微信 7.0 的设计,个别地方做了微调。


最后,出来的效果如下图所示。



3 细化:打磨优化


这份设计我发在了网上,部分网友留言说看着不够好,不太舒服,有一个表达的比较具体——“虽然用了大面积留白,却让人感到紧迫...”。


基于网友的留言,我仔细审视了这个设计,最后发现问题主要出在页面(发现页为例)左右两侧:留白过小。



当初之所以这么设计,是想通过页面左右两侧较少的留白制造一种内容将要撑破屏幕的感觉,从而营造一种活泼的感觉。注意,彼时“活泼”还没出现在“黄色”关键词里,上文两张关于关键词的图都省略了中间探索和优化的过程。


很多网友之所以没有感受到活泼而只是觉得不太舒服,至少有两个原因:第一,整个设计的基调是简约、清爽,有一定的年轻感和流行感,但没有太明显的活泼感,硬往里面某个地方塞“活泼感”并不和谐,大家也难以感受到;第二,单纯就“活泼感”而言,做的依然不到位,比如图标与右侧文字的留白,可以比图标与左侧边界的留白大,方能更好彰显活泼与活力。


考虑到“轻微老少皆宜”这个绿色关键词及微信主要是工具型和内容型产品,“活泼感”用在这里并不十分合适,于是放弃,并将“活泼”归为“黄色”关键词。此处留白的目的就回归其本职工作:整体和谐与舒服。于是就把留白相应调大了。



另外一个优化的点是“眼睛”的形状:微信图标、看一看图标、表情图标、朋友圈里将点赞和评论折叠起来的图标都有一双“眼睛”,这双“眼睛”起初是竖着的椭圆形,很萌,也比较低龄化。为了尽可能的“轻微老少皆宜”,这里统一把“眼睛”由竖着的椭圆形改成了圆形,弱化了“萌”和“低龄化”的感觉。



还有一块是颜色上,拍摄视频动态的图标有用到蓝紫色。这个紫色基本符合“更年轻”、“更流行”,但不太符合“轻微老少皆宜”,所以最后放弃了紫色,保留了蓝色。



遵循主绿关键词里的“轻微老少皆宜”,其它优化的点有:微信图标尖角处的圆角调小,删除启动页与黑色"WeChat"字形成对比的绿色圆点。另外还有一些视觉层面美观、和谐、舒适度的优化,比如颜色、留白、圆角大小、字体大小方面的微调。


优化后的微信 Redesign,整体效果如下图所示。



凡事预则立,不预则废。UI 设计如何做到理性最核心的是设计风格,规划、成形和细化都紧密围绕设计风格展开。


最后,尝试总结下“红绿灯”法的优势,主要有四点:精确、周密、稳妥、高效



关于设计风格,传统规划方法一般只有三四个“绿色”关键词。


“红绿灯”法拥有“红灯”、“黄灯”和“绿灯”三种颜色的关键词,从而确保大方向更准确。“红绿灯”法会产生20个以上的红黄绿关键词,从而确保划出来的“发挥范围”更周密,极少有疏漏。


在“成形”这个设计环节,一旦踩到“红线”和“黄线”,规划好的红黄绿关键词都会马上发出警报,从而大大降低“违规踩线”行为的发生次数,确保设计执行环节的稳当可靠。


“红绿灯”法通俗易懂门槛低,需求方可以较为深度参与“规划”环节。需求方在“规划”环节的深度参与,理论上可以降低后期的返工和修改次数,从而确保整个设计过程的高效。同时理论上也能够提高设计师和需求方双方合作的愉快程度。



03 UI 设计:止步于理性吗?


UI 设计,始于理性,但无法止步于理性,还需要超越理性。注意,这里的理性,仅指设计知识的相关理性。


超越理性主要有两点:直觉,其它知识



1 直觉


直觉是指一种能够快速感受和评估设计优劣的感觉。良好的直觉往往快而准。


感知和评价别人的设计时,用到的几乎全部是直觉。审视自己的设计时,也离不开直觉。


在审视自己的 UI 设计时,直觉主要发挥两个作用:第一,囿于知识储备或表达能力,有些地方就是解释不清,这个时候就要靠直觉去感受去判断;第二,直觉往往会作为检视设计的最后一道关卡,也是最重要的一道关卡。


直觉来自哪里?


个人观察是,直觉往往和审美正相关。比如一个设计师,他掌握的设计知识有限,经验有限,对自我的要求也不高,最终的作品往往不出彩。但如果他审美好的话,往往能够分辨出不同设计方案之间孰优孰劣。


如果你想就设计稿征求别人的意见,请去找那些审美好的人。


2 其它知识


其它知识是指设计知识以外的所有其它知识。比如 iPhone 上删除应用前应用图标的抖动,其灵感应该来自生活中的摇头求饶或吓得发抖,抖动的幅度和频率则需要利用物理学和数学方面的知识。


优秀的设计,一定会从生活中汲取大量灵感,并广泛利用社会类、人文类和理工类学科的知识。就拿数学来说,在好的设计中,一定是个常客:因为你需要不停的按计算器,从而计算不同设计元素之间的比例关系和各自的大小。


汝欲学诗,功夫在诗外。遣词造句这些文字技巧只能是写诗的基础,而非关键。写诗的关键在于你对生活、对世事的积累和感悟,在于你的思想是否深刻,情怀是否充足。


写诗如此,做设计亦如此。设计知识只是做设计的基础,而非关键。做设计的关键在于“其它知识”。“其它知识”非本文重点,就不展开了。



结语


UI 设计里的理性,主要是各类设计知识。理性的核心在于活学活用各类设计知识


理性严谨的做 UI 设计,可以简单分成三步:规划,成形,细化。好的开始是成功的一半,一个高质量的规划显得尤为必要。


用“红绿灯”法做规划,并指导成形和细化工作,会更精准、周密、稳妥和高效。


UI 设计,是七分理性,三分直觉。审美越好,直觉越准


优秀的 UI 设计,一定会从生活中汲取大量灵感,并广泛利用设计以外学科的知识。








推荐书单  


[美]Robin Williams《写给大家看的设计书》

[日]佐佐木刚士《版式设计原理》

[日]伊达千代《色彩设计的原理》

[日]小林章《西文字体1、2》

左佐《设计师的自我修养》

左佐《治字百方》




原文链接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


    • 文章来源:站酷   作者:SnowDesign

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

      蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
      BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



12个PC网页的UI设计趋势(上)

博博

实际上所有的网页设计趋势都是由:大型化(Big UI)、较低的密度(Low Density)、长页面(Long Page)这三个设计思想所衍生出来的。而影响这些设计趋势的人,不是设计师,不是硬件制造商,而是用户的行为。


   因为智能手机的普及,用PC浏览的网站关注度正在下降。但是,托B2B数字营销的福。PC网站今后也变成战略中心。即使在B2C的领域,PC网站也是不可或缺。


   对于在硬件方面没有太大变化PC的网页设计来说,也有技术被固定化的印象,实际上现在也正在接受时代的潮流而发生着变化。特别是下面那样的环境变化,也给与PC网站的UI设计带来很大的影响。


•显示设备的多用化。

•智能手机应用的普及化

•电子设备触摸屏的普及


   如果迎合趋势将会取得成功不是吗?这个基础就是抓住用户动向的变化,有必要完全理解这一变化。因此这篇文章是PC网页 UI设计的最新动向,基于那些背景下的推测汇总。



1.Big UI / low Density / Long Page的潮流

   举例说曾经的PC网站有很多是在有限的空间内填入了大量元素的设计。但是现在UI部件变得有:大型化(Big UI)、较低的密度(Low Density)、长页面(Long Page)的倾向。



   以前是海外以创意型,初创型为中心网站所采用的设计,进入日本的海外企业和前卫的网页设计师,采用那些理念设计的企业网站,渐渐地在日本也被广泛应用,这个趋势也与扁平化设计相呼应。2013年以后以Big UI / Low Density / Long Page 为基础的设计理念在网站更新中使用增多了。



   这样的趋势,不能单单看起来时兴,其有合理的存在理由。在开发的立场,让响应式网站更容易实现。如果在用户的立场来看,更容易浏览、更容易理解、不再迷茫,除了所说的这些以外,让网站更好的利用触摸屏,作为其更大的优点。


   近些年不只手写板,笔记本电脑也安装了触屏。对于在没有准备手机网站的情况,在智能手机上,网站的页面也被要求需要有一定程度的浏览。


   触摸屏,因为用手指的点击,不能进行精准操作。因此用户界面会变大。元素之间的必需留出充分的空间。如果用户界面变大,密度变低,当然页面中表现元素要少,页面变长,以滚动为前提了。


   这篇文章之后要介绍很多趋势,都是从Big UI / Low Density / Long Page的潮流中派生出来的。这不是最时尚的流行,但是现在是最适合用户行为的设计思想。



2.1栏布局

   作为Big UI / Low Density / Long Page合适的布局,就是1栏布局。


   曾经左右两栏布局的PC网站是UI设计主流。在电子商务网站等有大量信息的网站中,3栏布局也很常见。但是现在去掉左右栏,只焦点于内容部分,1栏布局正在增加。



   对于用户,不再有不必要的杂音映入眼帘,集中真正必要的内容。文字更容易阅读,图片被展示的更大。


   另一方面,映入眼帘的信息量减少,广告等会变得有些分散。因此,对于用户活动线路的设计,必须要更加谨慎。


   另外,在侧边栏设置局部的导航条手法,与其他层级的网站相关,有让用户不再迷茫的突出优点。去掉侧边栏的导航条,让网站的层级降低,尽可能减少菜单,不止限于1页内的布局意味着网站全体的设计方法需要重新考虑。


   反过来说,多层级化的前提是与网站的庞大度有关。有很多的1栏布局不能让内容被准确的理解,据此判断需要谨慎使用。




3.中对齐

   1栏布局的一个问题是文字换行吧。文字充满整个宽度时候会显的很长,很难保持布局的美观。如果1行的文字数量超过40个字,人们就会觉得难以阅读。不能因为是1栏就什么也都不考虑,宽度被文字占满,是不可避免的。


   解决这个问题的一个思路就是中间对齐。说到宽度很宽1栏的布局,中对齐和左对齐如何很好的组合,变成设计的要点。



   中对齐的正确使用有一些值得注意的点。首先,必须避免用户的视线忽视中间。例如,如果长文本中对齐,文章的开始点就会因此改变,变得难以阅读。如果使用中对齐,短文章不必要换行,长文章必须左对齐。


   还有,接近元素宽度充满的时候,虽然用中对齐,也不能很好的解决。但是,宽度被占满的情况是不存在的,看到中对齐不完整的位置就像悬浮一样。为此,必须要在运用盒子和边缘等下功夫,中对齐才不会出现违和感。





4.固定的顶部和顶部的超薄化

   固定的顶部也很普遍。在很多的时候,这里搭载的是导航条。无论能进入页面内哪个位置,都能立即回到主要部分。固定顶部的UI没有侧边导航,当页面较长时,能确保使用的敏捷度。



   但是,固定的顶部没必要的时候,会有占据一些空间的缺点。因此,顶部只能加工的变薄。像曾经PC网站的外观那样,采用多段式并且较厚的顶部是很困难的。


   这就意味着必须在页面内限定元素。如果元素容纳的多,页面就会变厚,很难被固定化。菜单的数量应该被限定,相对于以前,这方面的意识必须要加强。



5.固定的左边导航

   近年可以看到一些布局将导航条设置在左侧。说起来也与曾经2栏布局为主流时代的左导航在构造和功能上有所不同。


   画面左边被固定,最近有很多追随滑动的按钮。另外,内容部分基本使用1栏布局,跟随画面宽度的进行伸缩的液态布局被使用的数量也很多。



   这样的设计会带来应用程序的操作感。另外,有容易应对多设备的特点。移动端优先的设计,响应式网站和液态布局即是使用PC也能对应多种情况,有采用这样的构造的倾向。


   但是,必须注意的是这样新式布局,对于一般的用户有很难留下第一印象的危险性。另外,对于菜单的多层级化的时候,连接和鼠标经过引出下一级菜单的操作是必要的,因此提高了操作的难易度。


从使用能力,全部的构造等固定左导航的缺点来看,有必要搞清导入的妥当性。



6.液态布局

   在设备多样化中,画面的分辨率呈现前所未有的变化。以前,宽度符合960~980px就可以解决问题的这个规律变得难以通用。对于分辨率多用化的一个回答就是,符合画面宽度的布局也就是液态布局。


   液态布局是,元素和图片不是用像素而是使用%。因此,无论看到什么样的尺寸,分辨率的画面,都会被布局成有一定的平衡。可以解决符合小画面的时候的缺点和符合大画面的时候的缺点。



   必须留意的是,对各个页面“最合适化”的布局是不存在的。设想一下各种各样的分辨率的画面,汇集了最少破绽并被认为是有共同的妥协点的布局手法。有些特定的尺寸会感到平衡被打破,有些程度是必须被允许的,意味着会布局成像网页的网页。


   未完待续...




出典:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

翻译:SISENdesign



原文链接:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

    分享此文一切功德,皆悉回向给文章原作者及众读者.

    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
    BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

交互设计中排行榜设计详解

博博

排行榜设计有几种展示方式?排行榜入口引导怎么做?视觉表现有那些?看这一篇,带你全面了解排行榜的背后思考及做法!

“今天吃什么啊?”

“不知道啊,看看大众点评,哪家店比较靠前”

“一会去看什么电影?”

“我看豆瓣上,这部片子评分特别高,我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时,会发现当你面对的选择越多时却越不知道该如何做决定,或者当下做了决定后会一直思考做的这个决定是不是最好的,这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式,帮助用户做决定的同时,引导用户购买目标产品,极大的降低了用户的选择成本,其中排行榜就是平台的常用套路。用户的选择成本是什么?排行榜为什么能够帮助用户降低选择成本?如果排行榜仅仅是用来降低用户的选择成本,为什么所有商家都对排行榜趋之若鹜?下面带你了解为什么人人都爱排行榜,及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配


排行榜的本质是一个没有感情的信息筛选机制,将所有相关的同类事物之间通过比较,从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可,比如我们买衣服会首选淘宝,电子类产品会首选京东,看电影会看豆瓣评分,这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选,由于锚定效应使得用户降低自己的选择成本,可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应,也会对上榜主体产生强烈的品牌认可,为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签,比如:B站的百大up主,各个平台排行榜的销量冠军、朝阳地区必吃榜第一名,那么这一切背后的原理是什么?


一个完整的排行榜是由平台、上榜主体、用户三大组成部分,俗话说屁股决定脑袋,不同的定位决定了排行对三大组成部分不同的作用,当然背后的原理也不尽相同。


1.选择类排行榜-降低用户选择成本

在没有各种应用前,当我们决定购买什么东西或去哪家消费时,前期需要花费大量的人力、物力去搜集相关的信息进行整理集合对比集合信息后才能做出决定,也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后,做出择优决策阶段发生的成本或费用都是用户付出的选择成本(前两个阶段发生的成本是交易费用,而不是选择成本)。在备选集的建立过程中,包含的选择越多,用户选择的难度就越大选择成本就会越高

选择性排行榜在备选集建立完成后,利用沉锚效应在用户心理建立潜意识的目标参照,帮助用户完成择优决策,降低用户的选择成本。(另一方面平台在帮助用户降低选择成本的同时,也影响着用户的最终选择,在接下来的平台侧方面会有详细的分析)。

比如说:当我需要买个耳机时,如果在没有各大应用的前提下,我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解,收集信息建立备选集,但由于京东在电子设备购物方面的权威性,我会优先查看京东的耳机类排行榜,也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立,而用户出于对平台权威性的信任,根据平台给出的维度参照、品牌参照、价格、标签参照等信息,最终快速的完成自己的选择。整个过程就是用户在对锚的寻找,以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中,当个人的生理需求和安全需求被满足时,与他人建立情感联系或关系成为人们最强烈的需求,即社交需求。社交又分为:为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如:QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通沟通的本质则是信息的流通,但当双方都没有可以沟通的信息时则社交不成立,而类似:微博热搜、今日头条、澎湃新闻等信息类排行榜,则给有社交需求的用户提供了可以展开话题相通的谈资

选择类排行榜中,提到的从众心理(又称羊群效应),是指人类由于对信息压力规范压力,会希望融入到群体中寻求安全感的特性,即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感,会热衷于浏览此类排行榜来获取实时信息,融入群体生活。每天早上,在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件,在上班电梯或工作间隙讨论各自掌握的信息,及对事件的见解,甚至在与他人有相同的见解或之后,会对对方产生莫名的亲近感等等,这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜,不知道你有没有参与到其中,并把这些报告的截图分享到自己的朋友圈!在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序,人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外,还需要清楚自身在大数据下的自我确认,通过各种各样自我测试类榜单,判断自身的能力、情绪、价值等等,来达到自我认同,否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台,人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程,我们想要呈现给观众怎样的形象,需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己,为了维持自身的平衡防止崩溃,人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己,让用户更加清楚的认知自己,同时通过分享,满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜,如果有小伙伴想到其他类型欢迎在评论区提出,大家一起参与讨论。

无论哪种排行榜,用户信任的基础都来自对平台的信任,那么用户为什么信任平台?排行榜对平台意味着什么?背后原理是什么?下面我们来讨论排行中平台的影响及背后的原因。


对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性,选择成本是品牌经济学的核心,而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起,我们对世界的认识来自我们的父母或老师,而这些教导我们什么是对、什么是错的长辈或老师,对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家,比如:医生、律师、教授等,认为处于权威地位的人在某一领域相对普通用户的判断更可靠,可以帮助普通用户节省研究这一领域问题的工作,做出更轻松的决定虽然不一定是正确的

搜索我们会第一时间想到百度,需要观看影视、书籍会想到豆瓣,想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性,形成品牌号召力,推动着用户做出需求决策。另一方面排行榜中也会说明数据来源,比如京东会在排行榜页面有明确的榜单说明,豆瓣根据平台数据更新,汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明,减少用户做出决定中的思考、猜测,获得用户的信任,增强平台的权威性。那对于平台来说权威性的建立意味着什么?

2.平台权威性—平台侧

  • 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力,在减轻用户的决策压力的同时,也影响着用户做出平台所需的决策方向

  • 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度,加大平台承载内容的传播范围。比如,每年苹果发布会都会带来范围极大的热度讨论,而app store内的热门推荐自带话题度和讨论热度

  • 输出口优化

排行榜作为内容输出口,在平台权威性的背书下,产品优化自身的价值,而平台也可以通过排行榜优化自身平台价值。

  • 平台盈利

平台权威性下,可以通过多种方式达到盈利,比如苹果app store应用商店内的付费应用,百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后,部分平台开始利用排行榜进行商业变现,比如百度、58的竞价排名等,现在大部分应用会使用明显的方式告知用户,防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”,淘宝、小红书推荐猜你喜欢的“广告”。


上榜主体作为整个排行榜的内容中心,由于排行榜自带的竞争机制、筛选机制,使得上榜用户会很乐于分享出去,比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度,以及各种潜在资源,比如:流量、资源、人脉、某一领域影响力、平台背书等等,这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感,比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户,为平台带来更多的新用户,加强平台权威性,形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量,带走平台用户的情况。比如去年和热闹的“巫师财经推出b站,签约西瓜视频”,各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果,很重要的充分条件就是相同需求好友基数足够大,这样才能构成排行榜设计成功的必要条件。

  • 同系同门资源导流

对于已有成功产品的公司,可以借助平台相互间的导流完成初试资源的搭建,比如:微信初期借助QQ好友流量,带来好友初期的爆发;抖音最初的活跃借助今日头条的流量输入。

  • 自建用户体系

不断推送已关注好友的信息流,当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交,你要先有这个人联系方式才能要求好友,关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等,不断社区建设推送动态信息流和好友卡片推荐。

  • 伪造

当应用建立初期,没有很多的资源和内容时,需要平台自行填充内容,使得排行榜信息量大,增加用户活跃,才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等,或是平台pgc发布推送的内容。


面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化,根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成,其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现,多出现在以UGC或文字信息为核心的产品,以内容信息为主,常见以信息热度为主要功能的资讯、新闻类应用。比如:知乎、今日头条、36氪。

知乎热榜内容完全展开;36氪分为话题榜、人气榜,话题榜仅展示前5条,人气榜展示10条,仅在前5条有名次图标,在36氪热榜的中部还会出现收藏榜,综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”,点击“查看更多”后,展开“头条热榜”及“今日关注”“北京热榜”,整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标,优先级较高,常见自带推荐属性,能够帮助用户快速选择,减少选择成本,比较依赖榜单的应用。比如:豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多,在图标点击开后,在当前页面平铺不同维度榜单类型,用户进行点击跳转;腾讯动漫相对榜单类型较少,在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时,可能会希望能够横向对比同类商品,才能最终决定购买那件商品。常见于电商类应用,比如:京东、拼多多、得物等。点击后进入不同的榜单页面,获取更多产品信息进行筛选。(淘宝的商品详情页没有排行榜,但在首页却存在隐形排行榜,在隐形排行榜模块会有详细说明)。

4.搜索-筛选(无明确搜索目的)

当用户没有明确搜索目的时,搜索框的下方,平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户,比如:微博热搜、淘宝热卖、抖音热榜等。


没有明显排名及规则,但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前,位置越靠前,在用户心目中的默认位置越靠前,比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现,这时候就需要平台人工有目的的推荐一些内容,不同于“猜你喜欢”建立在用户的行为数据下,编辑推荐更多的平台希望用户看到的内容,一方面作为平台内容的输出口引导用户,另一方面内容是平台自己发布内容,也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期,并且存在大量的平台用户使用数据,“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性,各大应用平台适用性强,一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜,这些其实是用户自己确定了解自己,且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓,清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》,那是我最早关于排行榜的印象,里面会有各种最佳动作片总结、最佳男配角总结等等,以香港电影偏多,是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐,这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜,从众多选择中选择出部分答案,给出理由,而用户只需在已被筛选过的内容中进行决定,节省选择成本,比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定,但可以迎合用户对确定性需求的各种盘点性质的排行榜,比如抖音的TOP榜哥就是盘点各种内容,人物。

5.搜索-筛选(有明确搜索目的)

相比其他排行榜,筛选后的内容已经体现了用户的具体需求,高效明确的给用户提供选项,引导用户快速选择。


排行榜一般由必需的榜单头部、上榜主体,及非必需的榜单规则、更新信息构成;而上榜主体由必需的主体信息排序,以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点,引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时,通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出,增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况,为了平台的统一性、降低后期的维护成本,一般会使用可复用的榜单头部,如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配,但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案;马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式,通过更换文案底图达到适用不同主题;京东就相对比较简单,只是更换标题的文案达到多主题适配。


排行榜上榜主体由于不同的场景业务需求,一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式,其中主体信息及排序为排行榜必须信息,而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容(或标题)加排名的形式出现,常见以信息为主的排行榜,比如微博、知乎、今日头条等以信息为主要关注点的应用,或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准,因此会在标题及排位外,增加各种突出热度信息的表现形式,如关注热度人数,或是“热”“新”“爆”等等表示热度的标签,如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化

2.图文结合形式

相对于纯文字形式,图文结合的排行榜因为图片信息的增加,使整个榜单主体占居更多的空间也可以展示更多的产品信息,辅助用户进行选择。

  • 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式,延续了用户阅读新闻类资讯的习惯;而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图,因此沿用至线上使用的也是竖版图片形式;而京东、大众点评、马蜂窝则使用方版的图片形式,大概是因为产品的多样性需要考虑多种图片的适配问题。(视频、游戏类由于使用场景大部分采用横版图片形式;但由于游戏封面、宣传海报也会有竖版的形式,比如:游民星空、小黑盒)。

  • 左文右图VS左图右文

每当设计图文结合的部分,首先要考虑到底是采用左图右文还是左文右图的形式呢?可能很多人会说这两种形式没有什么大的区别啊,有什么可纠结的!或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的,因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式,包括:古腾堡图(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中产品列表页中最常使用的就是F型布局模式,F型布局是雅各布·尼尔森(Jacob Nielsen)在公司进行眼动追踪研究后首次提出的。与其他模式相同的是,眼睛从上/左,水平移动到上/右,然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后,向右扫动的次数会越来越少,并且会随着向下移动,眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面,即自左向右自上而下的阅读模式,越向下信息获取效率会越低

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式,比如:腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台,很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜,平台用户的注意力大部分集中在第一名,而领奖台的形式模仿现实生活中的奖励形式和仪式感,将整个排行榜的关注范围从第一名扩展至3名,另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系,增加了第一名的高度。(目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到)


榜单规则是排行榜规则的描述,是平台权威性的体现。榜单规则有些平台本身具有数据库,会有相关的平台数据支持如京东;而汽车之家则依靠“汽车工业协会”外部的数据支持,增加平台的权威性及榜单的可信度;

信息更新一般存在在榜单头部和上榜主体的中间,有些是固定时间更新,也有类似微博热搜是实时更新的模式,而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。


排行榜的成功看似是人们对于选择困难、信息获取的解决方案,但归根到底因为人们对于不确定性的惧怕,无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式,结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同,排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑,以及用户操作行为背后的思考及心理效应,提出合理的设计,帮助用户了解产品功能,满足用户需求。



资料来源:

  • 社交的本质

  • 社会心理学对用户体验的影响系列:权威性原则

  • 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

  • 交互分析:排行榜应该如何设计?

  • 如何利用好排行榜产生榜单效应?

  • 万字长文深度分析:产品排行榜的设计和玩法

  • 关于排行榜的设计,这有一份7000字干货手把手教你做!

  • 淘宝“有好货”竞品分析:淘宝为何要把排行榜藏起来?

  • 我们晒网易、支付宝年度榜单,其实只是在晒自己?

      文章来源:站酷   作者:9号自习室

      分享此文一切功德,皆悉回向给文章原作者及众读者.

      免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

      蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
      BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


界面设计中的那些版式-图版篇

博博

这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。


    作者:王铎(Micu设计)


    这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧。

     

    界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率。留白就是为了凸显层次、突出内容。

    手持设备屏幕较小,决定了信息显示是有限的。用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少。妄想满屏都是信息是不可能的。用户越来越受不了满屏的信息了。

    让用户接受该接受的有效信息,是关键。

     

    在设计界面的时候,因为内容和页面都比较多,为了保证页面与页面的统一性,首先需要设定页面内容四周的留白。在设定页面的间距后相应的内容图标,图片等的安排就确定下来了。用这样的方法能使调整出来的页面更为条理化。

     

     

    红色色的部分就是内容。在页面中一般会有导航的存在,那么内容区的版面是从导航下面计算的。

    界面四周增加留白。这样的界面很容易集中用户的视线到少数的内容上去,突出了焦点,整体给人一种典雅高级的感觉。

     

     

     


    反之,缩小留白或者不留白,页面会显得更丰富更充满活力。而图片的展示空间会增加,冲击感增强,让界面更显得富更有张力。

    根据页面的内容不同和功能点,适当的调整界面周边的留白非常重要。一般图片本身比较有意境,可以直接采用“出血”的方式,不留白或者少留白。

     

     

     

     

    下面介绍一些版面的小规律、小技巧。

     

    1.取其精华,一块颜色也能定天下!


     

    提取主要的信息,通过对整个页面的颜色进行调整,从而提高版面使用率。将一个或多个功能点作为主信息,提到首页中进行设计,从达到想要的视觉效果。这样处理后的界面设计不仅能显得大气有张力,而且展现出来的信息聚合度高。

     

    在缺少图像素材的情况下,如何让界面显得有张力,整体感强,呈现出来的版面率高。

     

     

    单色背景留白,凸显主要信息。要求图标或者文字,相对简洁,能够很好地和背景色融为一体。再通过线条和规则的图形来分割留白区域,增加层次感。

    做好这些的前提是,设计师要明确主要信息,以及它们之间的关系。 

     

     

    结合产品特点巧妙的运用大色块,将变化的信息用颜色区分出来。让用户最直观的感知信息的变化。

     

     

     

     

    2.多色块灵活分割,加强内容使用率



    图片素材少,还可以采用多色块进行分割,让界面显得不那么单调。

    加强内容使用率可以通过色块(临近色或是互补色)的延伸或是图像的重复来组织页面版式。将图片和色块进行统一化排版布局,整体基调能使页面丰富化。图片与相同大小的色块可以保持界面的统一性与简洁性,色调的一致的统一性和连续性使页面更为整体,这样看起来的页面就像一张图片一样有张力。并且这种方式让用户感觉点击的区域也会增加,从而操作也变得便捷起来。

     

     

     

    3.构图不拘一格,找到最合适的内容版率。


     

    横向和纵向分割,使界面显得整齐、稳定,而斜向分割让界面冲击感强。

    使用不同的构图方式,穿插性地将少量的图片整合在构图的形状中,能让界面变得活跃而富有活跃性。这样的表现方式还能将产品的气质融入进去,淋漓尽致地展现。有节奏感的设计更为取巧地加强了版式率。在界面设计中,图文的穿插可以引导用户的视线,让原本简单的内容变得有趣。在层次上,也可以区分内容的主次性,让阅读更加的轻松。

     

     

     

     

     

    4.简约化桌面或主页,让界面越近越美


     

    常用方式:图标、加大文案字号、序号、数字等来达到加强版式率的运用,提高视觉上的丰富性。

     

    图标表达

     

    人们越来越认同扁平化,一方面是因为扁平化的图标看上去清新简洁,用户理解快。另一方面,与图标搭配的背景更加单纯,要么留白,要么炫简,尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节,而是着重凸显有效的信息。

     

    图标是最为直接的表达方式,简单明确的图形,能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰,功能明确。

     

     

     

     

    信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分,也能好的将软件的特性和品牌展现出来。

    把图形融入到界面中,可让内容更为丰富,层次更加的分明。

     

     

     


    5.突出重点文案,调整版面率,让信息更清晰。

     

    调整文字大小将调整版式的使用率,使原本空的界面内容显示的更为饱满,用户阅读起立更为直接。使用较大的字号进行加强页面使用率能让页面显得更为信息。突出重要的引导文案,加强了软件的情景感和带入感。快速引导了用户对功能的理解,从而准确的使用。

     

    在页面中我们可以强调重点数据或功能词等来区分界面中的层次感。让用户的视线更为集中。

     

     

    6.串联图片,让它们讲故事,视图化版面。

     

    这种设计方法更多的是将文案用图形或插图展现出来。在数据页面和引导页中最为常见。

    一段文案一副插图的引导页更为有特色,给用户的情怀感更强。这种设计手法也是最容易体现产品特质和吸引眼球的。图案的易读性高,能在极其短暂的时间内快速传达给用户信息。用图像来讲故事,是设计中最根本的表现方法,也更是最为受欢迎的表达方式。

     

     

     

     

     

     

     

    图在界面中的运用

     

    三种方式:抠,边界关系,残缺

     

    1.切抠弄,制造纯色留白!



    在处理图片素材的时候,常常会碰到图片背景杂乱,产品不够突出的问题。在设计之前我们可以对素材先进行处理,将产品直接抠出来。利用这种方式可以找到产品的形状,越明确的形状越能反映用户对产品的认知度。产品的独特性能快速明确的表达给用户,用户从潜意识第一时间的判断到产品的类型和使用特性。

    下面是一个曲奇饼干的网站,将主饼干的勾出来,进行层次感的区分。在产品介绍中采用了侧面的实物抠图,体现出了曲奇饼干最为真实的厚度。运用碎落的饼干块虚化拉开产品的层次。深色的背景与饼干对比强烈,直接凸显了实物的形状。让用户一目了然,食欲大增。从而增了用户的购买欲望。

     

     

    在很多的电商APP中也常采用抠图,去除多余杂乱的信息,利用产品的形状直接体现不同商品的特点。这样的界面用户阅读起来轻松愉悦。

     

     

     

    2.建立边界,再打破边界,破出重围

     

    如果需要展示的信息较多,采用分割区域的方法,可以使界面显得整齐干净。而当信息较少时,设计师可以大胆选用“局部出血”的方式,建立边界,再突破它,增加层次感和冲击力,以凸显主题。

    一定要记得设定好的内容范围是为了让页面显得整体化,而不仅仅是摆放和拼图。

     

    在网页设计中有时候会见到这种方式,其实在手机、平板等UI设计中我们完全可以套用。

    运用图片的穿插来区分背景和产品或形象的层次感,处理完的界面更加富有生命力。放大需要突出的主形象,把它作为第一焦点展现在用户的眼前,有种强烈的“面对面”感受。

     

    在APP中采用将图片局部突出出来,能拉开信息的层次,将需要突出的图片信息第一时间展示给用户。一方面可以方便和引导用户点击,另一方面在上下滚动的长副瀑布流里,适当地打破平衡,可以丰富页面的节奏感。

     

     

     

     

    在ICON的设计中我们也常用到破图的方法。在统一的圆角矩形中,将表达寓意的图形局部超出,使图标更为有空间感和灵活性。

    采用这种方式设计的图标空间感强,层次感强烈,能使产品形象显得更为突出。

     

     

     

     

     

    在字体中也经常运用到破图的方法,让字体更为生动。在破字的过程中也能引发出不同的创意点。

    大美青海字体设计我把数字9破出了方块。而在优车尚品字体的设计中,我通过品字的破图找到了车的联想,让整个字体设计的更为贴切灵动。

     

     

    3.冲出画面,只保留局部,让产品再大一点!


     

    有时候,我们拿到素材,在处理后发现,图片比较平常,用户一眼就知道是什么。这个时候,可以考虑保留局部的方式,营造残缺美,增加时尚感。不要小看用户的的脑补能力,当然,这种方案还是要与客户或者产品经理及时沟通,残缺美不是所有人动能接受的。

     

    我们将图片进行放大,找出产品特点。选择能撑起整个页面构图的位置,切除不必要的图形,让图片冲出画面!这样处理后,页面显得非常富有张力,激发了用户想看到产品整个形象的欲望,起到产品预热的效果。

     

     

     

     

    在WATCH的预热官网中,设计师将图片放大,裁取有特点的部位进行展示,引导了用户点击观看产品的整体形象,激发了用户更多的去了解产品的特性。

    从版面角度看,局部放大裁切图片,增加了留白,增加了版式率,让整个页面显得饱满,微距的效果使用户与产品更贴切。

     

    这一篇主要理顺了一下版面和图形使用知识,并不全面,大家还是以欣赏为主。看完了能有个留白、破图的印象就不算白看。

    设计大方向上的东西终于絮叨得差不多了,我知道其实大家都懂,就是不知道从何下手而已,下一篇来点小方向的实用东西,欢迎大家留言。

    文章来源:站酷   作者:micu设计

    分享此文一切功德,皆悉回向给文章原作者及众读者.

    免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
    BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


语音用户界面设计 - 对话式体验设计原则

博博

文章包括三部分:1.智能语音对话系统;2.了解 VUI 相关知识;3.语音用户界面基本设计原则。

最近在阅读关于智能语音方面的书籍,将最近零零碎碎的笔记重新整理了一番,希望能让读者更加快捷、高效的认识智能语音方面的基础知识点。



智能语音对话系统


语音交互界面是近年来最重要的趋势之一,它不仅可以依托于智能手机而存在,而且可以和智能家居、车载导航、智能电视、智能音响等一系列产品结合到一起。越来越多的人更加频繁地使用 Siri、Google Assistant、Cortana、小爱同学等。越来越多的应用也都已经涉及到智能语音技术。





1、语音和语言有何区别?


我们首先需要了解「语音」和「语言」的区别。


语音是语言的信号载体,语音是人的发音器官发出的,承载一定的语言意义,而语言才承载人类的智慧。通俗的讲,语音是天生就存在的,婴儿刚出生的哭喊声也算是语音。它是人的发音器官发出具有一定社会意义的声音。其物理基础主要有音高、音强、音长、音色四要素构成。而语言则是需要学习不断进化的。在智能语音中,我们需要考虑的是如何确保在复杂的现实环境下,把干扰信息过滤,获取到准确的信息。




2、语音界面之间的关联



唤醒:Amazon Echo 和 Google Home 之类的语音驱动设备不断地在等待唤醒词(“Alexa ...”或“OK,Google ...”)从而进入唤醒状态。


反馈:一旦唤醒,设备会将随后接收到的音频发送到云端的AI平台。 该平台使用自动语音识别(ASR)和自然语言理解(NLU)的组合来识别用户的意图并将其发送到支持应用程序。 


回复:应用程序处理请求并通过文本进行响应(如果支持则提供可视化信息)。该平台将文本转换为语音并通过设备播放。




3、对话系统概述


对话系统:能够与人进行连贯对话的计算机系统,可以采用文本、语音、图形、触觉、手势及其他方式与人进行交互,常以语音交互为主。



而如今的智能设备能够“理解你所说的话并且采取行动”,是两个重要技术结合的结果:一个是自动语音识别(ASR),另一个是自然语言理解(NLU)。


自动语音识别(ASR) — 通过声学模型和语言模型,将人的语音识别为文本的技术

自然语言理解(NLU)— 对用户输入的文本进行语义理解,包括用户意图识别和语义槽填充


对话状态跟踪(DST) — 根据所有对话历史信息推断当前对话状态St和用户目标

对话策略学习(DPL) — 基于当前状态生成下一步操作

自然语言生成(NLG) — 获取结果文本,主要依据模板或深度生成的模型生成用户可以理解的自然语言文本

从文本到语音(TTS) — 结果播放给用户听,将自然语言文本转化成语言输出




4、语音交互设计需要遵循什么原则?


遵循合作原则:「听者」和「说话者」为了能够顺利交谈,必须互相合作。Paul Grice 提出了这个观点,并将其分为以下4个准则。


质的准则:说真实信息,做不到的话不要说。

举例:对用户说:“有什么可以帮您的吗?”,而实际上整个 VUI 系统仅仅能提供查询话费余额。


量的准则:保持对话交流简洁,减少认知负荷。

解释:删除多余的措辞。比如“请您注意听,因为我们的选项可能已经变了”。


相关准则:所说的话需与当前对话有关,不干扰当前任务进行。

解释:比如用户想知道天气,你给他推荐旅游的地方。


方式准则:说话需清晰、明了,不要拐弯抹角。

解释:不要使用让用户难以理解的「专业术语」。







了解 VUI 相关知识


语音交互界面(VUI)指的是为用户提供可进行语音交互的计算机平台,它能够实现自动化的服务并且提供完整的相关流程。而设计 VUI 的时候,设计师需要侧重于用户的语音交互过程,并设计出相应的语音应用系统。由于 VUI 是面向用户的交互界面,因此满足用户的实际需求是至关重要的。




1、语音用户界面 VUI 简史


20世纪50年代:贝尔实验室建立了一个单人语音数字识别系统。


20世纪60、70年代:语音数字系统的这项研究仍在不断拓展可识别的词汇,并且致力于实现“连续语音”的识别。


20世纪80年代:技术进步让语音识别更具实用性,使日常语音的识别成为可能。


20世纪90年代:诞生了第一个可行的非特定人的语音识别系统。简称 IVR


21世纪初期,IVR 系统成为了主流,任何人都可以通过一个普通的固定电话和语音进行股票询价、机票预定、银行转账、处方药品预定、本地电影排片查询以及收听交通信息等。




2、那什么是 IVR 系统?


交互模式的语音应答,简称为 IVR。我们后续简称为:交互式语音应答(IVR)系统


它可以通过电话线路理解人们的话并且执行认为,一般都广泛的应用在运营的客服方面,即使是现在三大运营上的机器客服还是采用了这种语音应答的方式。但是通过电话拨号的方式开始语音的问答还存在很多的缺点,例如只能应用在单轮任务的问答,交互方式比较单一,不能进行中途打断等缺点。


IVR,即语音增值业务,是移动运营商由2002年开始启动的业务。移动的 IVR 分为两大品牌:音信互动和娱音在线,联通的 IVR 品牌为联通。





3、IVR 系统设计与移动设备


21世纪初,IVR 系统已逐渐普及。起初“按键+语音”的混合形式(请按“1”或者说“1”),是很常见的模式,比如10086的查询功能。人们创造了 IVR 系统,希望它可以自动处理一些事物,这样客户就不会总是需要找一个真人来解决问题了。相比与真人客服交谈,很多用户实际上更喜欢使用 IVR 系统,因为他们可以花很长时间反复咨询信息而不会觉得他们是在“打扰”一个人类客服。


移动 VUI 设计需要注意:


1、确定它是否需要一个视觉化的呈现,比如一个虚拟角色。


2、确定你的 VUI 在什么时候允许用户说话?可以被打断吗?是否需要按键功能?




4、VUI 的优势是什么?



速度快:语音输入的方式比手动输入快很多,同样的时间可以输出更多的信息。


释放双手:释放双手与机器进行交互,比如驾驶状态下,通过语音输入完成用户需求,安全和便利。


直觉性:说话更自然,更容易。可以直接通过语音输入的方式来表达你的意愿。


同理心:语音包含了语气、音量、语调和语速,且传递了大量的感知信息,不仅仅是文字那么简单。




5、哪些场景不适合使用 VUI ?


公众场所:开放的环境办公,比如:咖啡馆、图书馆等。环境影响因素较大,不利于用户语音的录入和接收。


不适应对计算机说话:并不是每个人都喜欢对计算机大声说话,即使是在私人空间。


更喜欢打字:许多人习惯每天在手机上花几小时,大部分的时间都是在打字。


隐私安全:比如身份证、银行密码等。GUI 比 VUI 更加适合高效安全输入。




6、哪些场景适合使用 VUI?


使用场景需要腾出双手,比如车载导航、智能音响。


作为家庭的控制中心,打造智能家具居控制的切入点。


语音记录病历,不管对医生来说还是患者来说,都是提高看病效率的很好助手。


帮助用户简单记录、查询、照顾用户的作息时间等。




7、VUI 设计师的工作内容


VUI 设计师思考的是在系统和终端用户间,从开始到结束的整个对话过程。他们思考正在解决的问题以及用户需要什么来达成他们的目的。VUI 设计师在项目中扮演着非常重要的角色。通常会参与项目全程的工作,并与团队合作完成在技术、体验、设计上的优化。



如果 VUI 需要与后端系统进行交互,他们要考虑需要处理的请求。如果流程中有人的因素,比如客服需要交接,那么设计师需要考虑如何进行交接,以及如何培训客服。







语音用户界面基本设计原则



1、对话式用户界面


对话式设计定义:思考如何与 VUI 系统进行一轮以上的交互。


因此,需要设计一轮以上的对话,并思考用户接下来可能会做什么。不要强迫用户展开新一轮对话,而是去尝试了解用户的意图并允许用户继续交谈,同时有必要为用户近期所说的话保留历史记录。





2、多模态界面


与 IVR 系统不同的是,在移动设备上我们可以增加一个可视化组件。


比如在向用户传达信息、确认信息,以及告诉用户什么时候轮到他们说话等。(比如:百度地图的小度,他会告诉用户什么时候可以说话,目前所处的状态,说完之后给予的反馈)


如果有一个可视化组件,则会让移动设备增强优势。允许用户同时使用语音和屏幕进行交互。(手机上虚拟助手,有些虽然以语音交互为主,但是在用户的智能手机上也会有一个配套的APP)。





3、设定用户期望


优秀的对话式设计不仅仅是精心制作的友好提示。Google 交互设计师 Margaret Urban 建议:如果你不能理解答案,就不提问。


“当某个人成功完成了一次语音交互,伴随着脑内咖(endorphin)的升高,用户会获得一种成就感和满足感。此时正是一个绝佳的时机来告诉用户”你做的很棒,要不要再试试这个?”


是否让我们想到了网页登陆验证的时候,需要完成一块拼图,但是你再慢他也告诉你超越全球96%以上的人。


“如果你已经设计了一个设置闹钟的功能,但是你没有提供用户取消设置的方式,这就像给人一条浴巾但是没给他香皂一样。如果你设置了可以完成某项任务的语气,请务必考虑与之相关的任务。”





4、确定策略时需注意的几点


输入确认:必须确保用户感觉到自己是被理解的,同时有助于让用户知道,什么时候 VUI 不理解他们所说的话。


1、确认错误的后果是什么?比如:预定错误的航班?制定错误的任务?播放错误的歌曲?


2、系统将如何反馈?比如:会有音频提示吗?是否有视觉反馈吗?比如Amazon Echo上的光环。


3、是否拥有屏幕?比如:车载导航、手机屏幕、智能手表。


4、选择合适的确认形式?比如:明确确认、含蓄确认、混合式的确认。




5、确认策略的两种方案


显性确认:重要信息,需强制用户确认信息。


隐性确认:让用户知道他的话接收到了,但不需要他们确认。




6、确认信息的方式




三级置信度:


系统将在一定的阈值内,以明确的形式确认信息,拒绝较低置信度的信息,并以隐性确认来确认置信度超过80%阀值的信息。


1、80%以上,使用隐性确认。如果是误识别代价高的话,考虑采取显性确认。

2、45%-80%,使用显性确认,以明确的形式确认信息。

3、45%以下的,拒绝确认信息。


举例:用户:帮我再买一份口香糖。

VUI:(置信度大于80%,使用隐性确认)好的,已经为您再购买一份口香糖。

(置信度45%~79%,使用显性确认)您是想再多买一份口香糖,是吗?

(置信度小于45%)对不起,我没有听清您讲的话,您想买什么?



隐性确认:


1、只使用隐性确认,不要求用户进行操作。

2、将「答案」和连同「原始的问题的一部分」一同回复,让用户知道系统识别到的是哪个问题。

3、当置信度高的时候,也可以不用连同问题,这样更自然流畅。



非语言式确认:


1、仅需行动反馈,而不需要口头响应。

2、通过视觉确认,比如小米智能家居,可以通过语音交互打开灯光、电视、窗帘等。

     a、如果没有延迟,没必要再对其回复。

     b、如果有3-5秒延迟,需进行回复,让用户知道并不是设备没有听到她的声音。

3、使用一个“声音标识”,即简短的、有识别度的声音。这样有助于帮助用户快速知道他们已经到了哪一步。



通用确认:


1、在某些对话式系统中,最好不要询问用户具体说了些什么 - 哪怕是隐性确认。

2、通用确认可以让用户分享更丰富的体验,因为这类反馈能适应用户输入的各种信息,并让对话继续进行。通常人与人之间的对话,也不会句句必回复,也会有 “嗯” “哦 ”“啊” “然后呢”等。 



视觉确认:


1、确认一个项目清单,通过屏幕显示进行沟通会更加有效。人的记忆有限,通常用户一次性不能记住超过大约7个听觉项目。

2、用来确认用户的选择。用户可以通过说话或按下按钮来回复。而 GUI 的反馈指令更加明确。




7、判断你的 VUI 适合哪种类型


目前大多数的 VUI 系统都是“命令 - 控制”模式,这意味着当用户想要说话时,必须给出明确的指示。


1、用户可以随时向系统询问 / 发出命令吗?


2、是否参与一个有明确开始和结束的封闭式对话?




8、命令-控制模式



唤醒系统方式:按键通话(车载导航、Siri等)、直接进行关键词呼叫(“OK Google”“小度”等唤醒词)。


唤醒系统反馈:系统检测到用户说话完成,通常会使用某种非语言的音效进行提示,然后做出相应处理(比如:“啵”的一声或者视觉反馈:声波线、点状动效、设备逐渐发光等)。


系统聆听时间:用户说出唤醒词或按下按钮后,系统保持聆听状态的时长,根据经验来看,10秒 是个不错的起始时间段。



唤醒响应时间与反馈方式


唤醒响应时间与唤醒反馈方式有关,不同唤醒反馈方式下,最佳响应时间不同:


1、当唤醒反馈为"灯光"反馈时,唤醒响应速度越快越好,在200ms时,用户响应舒适度最高(对响应时间评价为刚刚好的用户比例),73%的用户对速度满意。


2、当唤醒反馈为"灯光+音效"时,唤醒响应速度的舒适时间为300ms左右,76%的用户对速度满意。


3、当唤醒反馈为"灯光+人声"时,唤醒响应速度的舒适时间为500ms左右,74%的用户对速度满意。


数据来源:百度人工智能交互设计院智能音响时间测试实验



唤醒等待时间体验感


用户请求及反馈阶段响应时间对等待体验的影响:


1、1250ms以内是用户认为响应速度较优的区间,其中650ms为最佳体验值。在450ms时,少量用户觉得响应速度太快了,用户会感觉到紧迫感和压力,难以接受。


2、在1450ms时,有53%的用户开始感觉响应有延时,但仍能够接受。


3、从2150ms开始,有20%的用户认为音箱响应太慢,不能够接受。我们认为20%的用户不满意,已经不足以被称为一个优秀的产品。


数据来源:百度人工智能交互设计院智能音响时间测试实验




9、对话模式


1、不要强迫他们不断地去表明他们将要开始说话,自然地对话技巧进行话轮转换。


2、通过更精细的设计,使 VUI 系统可以处理一些常见的微妙表达方式。(用户处理完毕说“谢谢”,你可以设置系统忽略这种情况,或回复“不用客气”,而不是提示或者报错。)


3、不要问你都无法理解的反问句。


4、打破话轮转换的情况,用户在系统说完之前就进行提问。


5、在命令 - 控制模式和对话模式之间进行切换。唤醒之后进行自然的对话。




10、对话式标识


使 VUI 更加人性化、更具吸引力,对话式标识是让用户了解交谈进展以及进展情况的重要方式,当系统在对话中使用了一些基本的对话礼仪后,用户的参与度会更高,并且会以同样的方式进行回复。



反面案例:

虚拟助理:你昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:你昨晚吃药了吗?

用户:吃药。

虚拟助理:再见。


正确案例:

虚拟助理:我会问你几个有关你身体健康的问题。第一个问题,昨晚你睡了几小时?

用户:大约7个小时。

虚拟助理:不错。你昨天吃了几份水果和蔬菜?

用户:大概有4份。

虚拟助理:了解了。最后一个问题,你昨晚吃药了吗?

用户:吃药。

虚拟助理:好的,暂时就这些了,我明天还会再问你的,回见。




11、异常处理


“当你与人类交谈时,永远不会出现不可恢复的错误状态。”

— ABI JONES, Google 设计主管


“你偶尔因为犯错和不知道某些事情导致评分降低造成的影响,比你每次做对一件事情重要百倍。” 

— 英特尔语音助手部经理 Pilar Manchon


如果处理的得很好,错误情况就不会影响用户,你可以让用户回到正常流程,并顺利完成任务。但如果处理不好,用户不仅这次无法完成任务,他们以后都可能再也不用你的产品了。


一个好的设计师应该知道,你不能只设计正常的情况, 你还要对出错的情况做出设计。这对于 VUI 设计来说尤为重要,因为出错情况是家常便饭。



未检测到语音 / 检测到语音,但没有识别


1、什么情况下可以明确说出来?

     a、你的系统只使用语音

     b、用户没有其他的回复方式

     c、必须要用户回复后,系统才能继续进行任务 / 对话


2、什么情况下可以什么都不做?

     a、用户可以通过其他方式进行下一步操作(比如通过按键选择)

     b、就算什么也不做,也不会中断对话

     c、系统没有理解时,用视觉信息提示告诉用户,比如:提示列表等

     d、利用虚拟表情形象反馈,疑问、微笑等动作表达



其他异常处理


1、当出现:语音被正确识别,但系统无法处理

     a、程序对关键属性理解不明,写了错误的回复

     b、没有针对一些情况的回复

解决:对用户可能会说到的所有情况做更完善的预测,通过数据收集来避免此问题


2、当出现:部分语音识别错误

     a、什么也不去处理,因为这不是你想要的结果

     b、匹配错误的行为

解决:可以用 N-Best 列表来智能匹配最有可能的识别结果


3、增强错误提示

     a、当需要用户说话的时候,使用这种增强错误提示策略

     b、必要的情况下,进阶错误行为提示可以更为详细,并提供更多的帮助

     c、如果你正在设计一个可以提供真人辅助的系统,可以为错误数量设置一个阈值,当达到该阈值时,将用户转移给人工助手  




12、新手和专家用户


如果你的用户会定期使用你的系统,那么在设计中就需包含不同的策略。


“务必确保你的目标不是简单的训练你的用户,应当适应用户的行为,而不是用已有的命令让用户感到厌烦。”

— Google 交互设计师 Margaret Urban


我们在 VUI 设计上该如何更好的交互设计?


1、减少冗长指令以及其他引导提示。通过计算 APP 使用次数和频率来确认是否切换模式。


2、缩短解释性提示。但是请务必使用“对话式标识”。


3、启动效应。



什么是启动效应?


指某人受到某种特定的刺激后(例如一个词语或者图像)会影响他们对之后刺激的反应。首先让用户预先知道你会问他们几个确定数量的问题,为后面会发生的事情提供了暗示,用户就会知道如何去准备。比如以下情况:


1、当给人们呈现一个还没完成的草图,随着这个草图越来越完整,人们就越来越辨认出这张图画的是什么。之后,再给他们呈现其他还没完成的草图时,他们会更早辨认出这张图画的是什么;


2、如果当给人们呈现一组汉字,假如里面含有 “河” 这个字,随后让他们写出部首是 “氵” 的字时,这些人回答 “河” 的几率会更大。



谈谈自己对新手和专家用户的理解


01、专家型用户:代表老用户且愿意探索你的产品或服务,有着很大的包容度。并会积极提出各种改进的建议和享受产品带来的惊喜感。


02、新手:什么叫新手,就是刚刚下载你的产品,准备使用的用户,对产品功能都还处于陌生摸索的阶段。他们不会因为你的技术而使用你的产品,使用你的产品目的是完成某项任务。他们有兴趣使用更高级更复杂的产品,但却不愿意接触全新的东西,要想让他们认可,那么产品就必须足够简单。




13、持续跟踪上下文


持续跟踪信息并不容易,但如果不跟踪这些信息,你的 APP 就只能做单轮的对话行为。


指代:用两个不同的词语指同一个东西。比如: “他”  “哪些”





14、帮助和其他通用部分


我们在设计 IVR 系统时,我们会确保每个状态都包含一组通用组件:重复、主菜单、帮助、操作和再见。





15、延迟


产生原因:糟糕的连续性能、系统处理进程、数据库访问


处理方式:告知用户关于延迟的情况(比如:“请稍等,正在查找相关记录”)、非语音和视觉的提示(比如:延迟提示音以及加载状态)、可视化效果(比如:加载中的动态图标)


处理细节:延迟的时长可能为0~10秒,在没有延迟的时候最好也插入几秒的延迟。因为如果在系统说“请稍等”之后,紧接着就继续对话的话,会给用户带来异样的感受。很多设备针对唤醒词采用了本地化识别的方式,这样唤醒的会更快。




16、消除歧义


问题来源:用户只会提供执行命令所需的部分信息,而没有提供所有的细节。


举例:用户可能会询问某地的天气,而很多地方都有叫这个名字的地点,诸如“湖南路”那边的天气怎么样。


解决方案:


1、依靠任何已知的信息来确定答案,而不是再次询问用户。


2、根据上下文线索进行判断。


3、反问用户进行确认,确保系统对用户同一个问题的各种各样的回复形式都有良好的适应性。


4、指令不明确。比如“给胡歌打电话,拨打工作电话还是家庭电话?”,系统以隐性的形式对名字进行了确认,系统对这个名字有很高的置信度,并且仅有一个胡歌。


5、用户回答的信息超初了你的 VUI 系统可以处理的范围时,你可能需要缩小范围消除歧义。




17、设计文档


我们需要制作:示例对话(sample dialogs)和会话流(dialog flow)文档外其他一些情况。例如:在设计过程中,你还需要创建提示列表、完善对话每个状态指定完整的语法规则等等。





18、无障碍设计


“一开始,我就很讨厌屏幕阅读器的工作方式。为什么它会被设计成这样?当以视觉的方式来展示信息没有任何意义时,屏幕阅读器只是简单地将文字转换成音频。所有那些应用花在创造完美用户体验的时候和精力此时都变得没有任何意义,甚至有的给盲人用户带来了更糟的体验。”    — 克里斯·莫里(Chris Maury)





19、典型 VUI 项目交付项内容


示例对话:系统和用户之间可能产生交互行为的预设对话,对话看起来就像电影剧本一样,包括两个主要角色之间来回往复对话。


流程图:展示下一个状态分支的所有方式,不一定要罗列所有的交互或示例对话,也可以是功能的分组、文本的分组等。


提示列表:如果没有屏幕可以使用配音演员或语音合成来播放提示列表。


产品原型:如果这是一个多模态产品,有屏幕、支持触摸交互。




参考文献:

《语音用户界面设计:对话式体验设计原则》-【美】Cathy Pearl(凯瑟 彼尔)

语音交互入门:从概念,原理到如何设计VUI产品 - 杜松

AI时代的语音设计经验漫谈 - 少夫白杰

语音用户界面设计 - 对话式体验设计原则 - walle_x






文章来源:站酷   作者:Sabaku_no_Gaara

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

交互设计知识总结

博博

不懂交互的UI,不是好美工。
本文约一万字,考验耐心的时候到了。

一、什么是交互设计?

先来看一下百度百科的定义

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和”用户体验“两个层面上进行分析,关注以人为本的用户需求。简而言之,交互设计是解决特定场景下的人群如何高效使用机器或软件的目标行为。


为什么要做交互设计

在使用网站,软件,消费产品或各种服务的时候(实际上是在同它们交互),使用过程中的感觉就是一种交互体验。随着网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候,可能为当初的使用者本身就是该行业的专家,没有人去关注使用者的感觉;相反,一切都围绕机器的需要来组织,程序员通过打孔卡片来输入机器语言,输出结果也是机器语言,那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。因此交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了。


从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达到使用者的目标,这就是交互设计的目的。


二、交互设计常用原则和定律有哪些?


尼尔森十大可用性原则


1、状态可见原则

系统应该让用户时刻清楚当前发生了什么事情,也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是在合适的时间给用户适当的反馈,防止用户使用出现错误。

即在用户操作界面功能时给予实时反馈,例如:页面加载状态提示、按钮点击后的状态变化、进度条提示等。

2、环境贴切原则

设计的一切表现和表述,尽可能贴近用户所在的环境,将现实环境的操作功能巧妙的转化为线上功能,使其贴近用户。使用用户能听懂的专业术语,涉及到专业化语言时要转化成用户熟悉的语言。

即模拟真实的事物,使用户更容易理解。例如:天气应用中的天气插图、音乐播放器的胶片都是生活中熟悉的场景和物品,降低理解成本。

3、操作可控原则

对于用户的误操作,提供二次确认或者撤销的功能,这样可提高用户的操作可控性。

例如:删除联系人二次确认提示、消息可撤回操作。

4、一致性原则

遵循统一的产品设计规范/逻辑。这里的一致性包含产品和跨平台产品之间的一致性。

一致性包含视觉交互、文案描述、组建样式等,例如:微信小程序设计规范。

5、防错原则

设置防错的机制,减少用户犯错。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。

例如:用户名称校验提示、手机号码位数限制等。

6、易取原则

减少用户记忆负荷,在适合的时机给用户需要获取的信息。

例如:验证码读取、找人转账提示等。

7、灵活高效原则

提供灵活的操作和高效的获取信息能力。

例如:手机号码一键登录、消息关键字识别等。

8、优美简约原则

保留产品最主要的信息,如果不是优先级最高,要尽一切可能避免去影响产品的简洁和美观。

9、容错原则

用户在使用产品过程中出现了问题,及时准确的告知用户出现问题的原因。

例如:信息输入提示、搜索无结果等。

10、提供人性化帮助

在用户需要的时候提供必要的帮助说明。

例如:新功能引导、解释说明文案等。



七个交互设计定律


1、菲兹定律

点击一个目标的时间同以下两个因素有关:

(1)设备当前位置和目标位置的距离(D)。距离越长,所用时间越长;

(2)目标的大小(S)。目标越大,所用时间越短。

该定律经常运用于鼠标从点A到点B的运动。

例如常用按钮的尺寸设计等。

2、希克定律

一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。

交互设计中要合理设置选项,以免用户使用中决策时间过长,降低使用效率。

3、米勒7±2定律

乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。

例如:手机号码的分位显示、应用中标签栏数量等

4、邻近性法则

人们通常将距离近的事物划分为一组。

界面设计中可以用对象间的相对距离来区分信息层级。

5、复杂性守恒定律

每个应用程序都具有其内在的、无法简化的复杂度。无论在产品开发环节还是在用户与产品的交互环节,这一固有的复杂度都无法依照我们的意愿去除,只能设法调整、平衡。

例如:在智能手机出现之前,手机上的操作按钮都是实体按钮。在智能手机出现手,手机被整个屏幕占据后,所有的操作都集合在了手机系统之中,等于把物理操作转移到了系统操作中,其本身的功能复杂程度并没有发生改变,只是转移了而已。


6、防错原则

大部分的意外都是由设计的疏忽,而不是人为操作疏忽。因此,在设计中要有必要的防错机制;在此,特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

例如:登录时用户名校验,手机号码位数限制等。

7、奥卡姆剃刀原则

“切勿浪费较多东西去做,用较少的东西,同样可以做好的事情。

”这个原理称为“如无必要,勿增实体”,即“简单有效原理”。

在设计中可以使用户关注最主要的信息而非其它无关紧要的事物,从而提升使用效率。




三、交互设计如何开展工作


首先在交互设计师拿到需求后不要急着打开软件开始绘制线框图,而是要先分析需求,了解产品的战略层和范围层的业务目标。把握产品设计大方向,只有方向对了后面的工作才是有价值的。

把握了产品方向,下面就该进行需求的分析,

首先针对需求考虑5个问题:

1、为什么要做这个功能?(业务需求)

2、产品期望得到怎样的成果?(业务目标)

3、谁来使用?(目标用户)

4、他们要怎样使用?(用户需求)

5、如何让他们都来使用?(将业务目标转化为用户行为)

清楚这5个问题后,再根据交互设计流程进行一步一步的进行

这实际上就是对需求的战略层分析。

我们进一步分析业务需求(业务目的、业务目标)和用户需求(目标用户、用户体验目标),把握关键因素(用户的动机、担忧和影响目标达成的障碍)。

归纳这些需求,明确设计策略。


将“业务目标”转化为“用户行为”,通过引导用户的使用来帮助产品实现目标。

从设计“用户行为”到设计“用户界面”,用户行为决定了用户界面,用户界面也导致了用户会出现什么样的行为。

设计需求分析方法就是要帮助用户创造动机、排除担忧、解决障碍。



四、如何进行用户研究,方法有哪些


评估的形式及方法


常见的评估形式分为三类:

1、评估主体:根据评估的主体不同来进行区分,即谁来做评估。

按照评估主体来区分主要有两个主体:用户和专家

用户评估主要靠收集用户使用数据,也就是用户测试,它的数据相对客观,但时间和费用较多,评估范围较窄。

专家评估是让工程师及设计师等专家基于自身的专业知识和经验进行评估的一种方式。专家评估相对主观,但费时少、费用少、评估范围窄。

两种评估方法可以相互补充,并结合使用。


2、评估性质:例如定性评估、定量评估或着其它方式。

按照评估的性质来区分可以分为定量评估和定性评估。

定量评估是指对可以计量的部分进行评价,如点击量、使用率等,可以用数据来说明。

定性评估是指对非计量性的部分进行评价,如流畅度、舒适性、创造性等进行评价。它只能表示一个度,无法准确用数据来说明问题。


3、评估过程:按照评估的过程来进行区分。

从评估的过程来区分可以分为理性评估和感性评估。

理性评估相对客观,从客观的角度出发判断客观事物。

感性评估更为主观,评估结果并没有客观规律。

在实际应用中也需要将理性评估和感性评估结合使用,才能完整的完成我们的任务,达到我们的目标。


常见的评估方法有四种:

1、原型评估方法:在产品研发过程中,对于界面设计以及程序的测试来获得用户的反馈是至关重要的。以用户为中心和交互式设计的重要因素之一就是原型方法,原型方法的目的是将界面设计与用户的需求进行匹配。

一般来说原型评估方法分为三大类型:

(1)快速原型:原型迅速成型并分配实施,在原型实验收集的信息基础上,系统从草案中得以完善。

(2)增量原型:应用与大型系统,从系统的基本骨架开始,需要阶段性的安装,及系统的本质特征是在初次安装完成后允许阶段性测试,以减少遗漏的重要特征。

(3)演化原型:对前期的设计原型不断进行补充和优化,直到成为最后的系统。


2、简易测试评估方法

在条件不允许的情况下,可以采取简易的方法来对用户体验进行评价。步骤是:

(1)实验室环境准备:准备好测试用的电脑或其他媒介。两个房间,房间1用来对被测试者进行测试,房间2用于设计师和工程师的观察。

(2)被试选择:分为用户组和专家组。

(3)进行测试:房间1中被试者根据自己的选择进行操作和测试,同时说出自己的内心想法,观察员在调查表上记录被试者的每一次的操作情况,包括出错情况和被试者的口语描述,当被试者在测试过程中遇到困难或操作无法进行时,观察员要给予一定的客观提示。房间2中通过相关设备将房间1的情况传输到房间2,设计师和工程师实时观察和记录被试者的情况,以便今后对产品做进一步的修改和完善。

(4)结果分析:通过多次测试后,将测试结果汇总,提取出交互设计中存在的问题,以及对交互设计有益的建议形成测试报告。


3、眼动评估方法

眼动追踪可以用来评价对产品(包括硬件产品和软件产品)设计的感性意象,评测产品设计特征。眼动评估的主要指标有注视热点图、搜索过程测量指标、兴趣区域即用户视觉注意的焦点区。可以结合口语分析法了解用户的所想 和所做。


4、脑电评估方法

通过对脑电信号的分析,研究者可以探索大脑的认知加工过程和受试者的心理状况。近年来脑电评估方法在人机交互心理学等领域应用广泛,被用来评估交互设计、人机界面、产品设计等方面的内容。但是脑电评估也有一定的缺陷,例如空间分辨率上的局限性,因而对某些认知过程和脑区的定位并不是很准确。第二,在许多相似的实验研究中,由于研究者采用了不同的实验材料和方法等,实验结果也存在差异性。第三 ,由于采集记录时间的滞后性,脑电所记录的并不一定是当下被试者所想到的内容。


采取哪种方法来开展用户测试和评估,要根据不同的任务结合不同的环境来开展,比如:时间、成本、资源等。



启发式评估法

是专家评估法的一种,也被称为经验性评估,最初由Nielsen博士提出。简单来说,启发式评估是一种简易的可用性评估方法,使用一套相对简单、通用、有启发性的可用性原则,让几个评审根据专业知识和经验来进行评估,发现产品潜在的可用性问题。


启发式评估的两大要素:评估者和评估参照的原则。   


对评估者的要求主要有四个方面:

(1)人数:推荐3-5人,有时会更少

(2)知识:最好同时具有可用性知识及设计知识

(3)身份:最好是非设计者本人,否者不具有客观性

(4)岗位:设计师或用户研究员


评估参照的原则有:尼尔森十大可用性原则、八项黄金法则、首页可用性指南、ios设计指南、拓展原则、HHS网页设计与可用性指南等。具体需要根据实际项目来选择,常用的是尼尔森十大交互原则。


什么时候适合使用启发式评估法?

交互设计和UI设计阶段、测试优化和产品发布后的阶段。


启发式评估的优缺点有哪些?

优点:成本低、效率高、发现大多数可用性问题,甚至是用户测试时不会出现的问题。

缺点:不能代表真实用户,相对主观、有时候发现问题过多、对评估人员知识背景要求较高。


什么时候适用?

(1)适合时间、资源有限的情况下快速发现可用性问题,降低风险及成本。

(2)版本变动不大的情况下,小成本检验。

(3)作为可用性测试的之前准备。


启发式评估流程是什么?

(1)准备阶段:确定范围、背景调查、参考评估原则、评委邀约、材料准备

(2)执行阶段:任务走查、整体走查、结果记录

(3)分析阶段:汇总讨论、报告总结、优化方案



可用性测试


先来看一下我们在平时工作中常常会听到这样的问题

产品经理:我们的用户觉得产品好不好用?使用过程中会不会遇到问题?他们是否满意?

设计师:设计的过程有一些纠结的地方,不知道实际用户是怎么理解和操作的怎么办?

产品开发后:想在大推前检验一下产品是否靠谱,适不适合大推?


当我们遇到这样的一些问题时,如何找到方法快速得到答案呢?

那就是接下来要介绍的可用性测试方法。


可用性测试是一种常用的、高效的方法。

它的定义是:通过观察具有代表性的用户,完成产品的典型任务,从而找出产品可用性问题并解决,目的是为了改善产品,让产品更容易使用。


什么时候适合做可用性测试呢?

一般是在:交互设计或UI设计、测试优化、正式发布三个阶段来做。当然是越早做越好,可以尽早发现问题并及时调整。


类型分为两种:形成式和总结式

形成式特点:小样本、发现问题为主、不能做定量对比。

总结式特点:大样本(30人以上)、定量的评估、可以做对比评估


可用性测试可以解决什么样的问题?

1、发现问题,产品在体验上是否存在问题

2、检验实现,期望的设计目的有没有达成,是否满足了用户的期望

3、产品评估,用户是否会满意

4、理解用户,了解用户行为习惯,了解用户认知,找到某些问题的原因


测试流程是什么?

整体上分为4个阶段:1、准备  2、测试  3、分析  4、优化


1、准备阶段要做的有哪些?


确定目标:确定测试目标决定了后面测试过程要怎样去设计

常见的测试目标有:

·对整个产品做可用性评估

·对新增的功能模块进行评估

·提前观察新方案对新老用户有怎样的影响

·提前检测改版是否达到预计目标

·设计时存在争议,如何选择解决方案

·某个环节流失率较高,检测是否为设计原因导致

·需要拓展某一类特殊用户,测试针对这类用户在设计上是否需要作出调整


准备测试方案

方案中应当包含以下内容:

·测试目的:明确测试的目的及范围,测试目的决定了测试方案

·测试关注点:与负责的设计师一起梳理测试中要关注的问题

·用户招募:招募要求,样本配比,招募渠道

·经费预算:奖励的形式和额度

·时间计划:用于把控时间计划


撰写测试脚本:设计测试任务,通过用户行为去观察提问来获得我们想要的内容

基本的流程有:

·暖场:3min,简单聊天,消除用户的紧张情绪

·测试说明:2min,对测试内容规则做说明

·测试前访谈:10min,了解用户基本信息

·简单试用:3min,让用户熟悉产品

·测试执行:30-45min,提示任务并观察

·事后访谈:15min,针对疑点问点追问,填写评价表

·道别:5min,支付礼金,送用户离开


招募用户

招募什么样的用户呢?

·根据测试目的来定,找出与测试目标有关的筛选纬度

·特别考虑用户使用行为相关的特征,例如竞品使用经验,使用产品的目的,用户的活跃度等

·挑选最核心的纬度,转化成用户招募的条件,并尽量客观化,具体化,可衡量

·避免设置交叉条件过多,导致样本代表性降低

·学会辨别真假的用户信息


招募多少用户合适?

·以发现问题为目的快速可用性测试,6-8名即可

·考虑产品的复杂性,覆盖人群差异性,适当做调整,拓展到10-15名


招募渠道有哪些?

·公司内部

·现有产品用户库

·公司其他产品用户库

·熟人,朋友等

·推广渠道:官微、公众号、门户网等

·社区,论坛,qq群等

·第三方调研公司


准备测试素材:低保真或高保真原型,或线上已经可以使用的产品,也可以准备一些量表工具来辅助测试。在测试

过程中需要用到的电脑或手机设备,摄像头,纸,笔,桌椅等。


测试场地选择:

·专业可用性测试实验室:一般对测试质量要求较高,旁听人数较多且需要采集丰富的数据的时候采用此方法。实验室有两个房间,一个测试间,一个观察间,中间有单向玻璃分隔。测试间中有多角度的摄像头,用来记录测试过程,观察间可以同步看到测试间里的情况,

·普通测试环境:在观察人数较少(小于3人),条件有限时使用。


预测试阶段:正式测试前进行预测试,保证测试流程通畅

·走查:记录可能出现的问题

·预测试:找人先测试一下

·调整:调整测试流程


正式测试阶段

测试参与人员有

·主持人:引导整个测试流程

·记录员:记录操作行为,访谈内容,发现问题等

·产品团队:参与旁听,观察,结束后交流

·用户:完成测试及访谈任务


测试过程中需要观察的要点:

·用户是否独立完成了任务

·是否存在无效操作或不知所措的情况

·用户是否满意


结果分析

边测试边总结,越及时越好

·测试完一个用户,做一次小结

·测试结束当天写小结,与设计师当场讨论

·重要问题反馈后再总结分析报告

·边测边改,边改边测

结果分析4个步骤:1、对发现分类  2、整理不确定项  3、评定优先级  4、结果记录


撰写报告

从4个方面来写:

·总体如何

·有哪些问题

·严重程度如何

·建议是什么

·除此之外,还可以围绕关注的问题,未满足需求补充分析


优化跟踪

在测试之后需要出优化的方案,测试优化的过程是循环的。

测试之后如果还有其他问题没有得到解决,可以结合其他的一些测试方法来得到。



问卷调研

问卷调查法是以书面提出问题的方式搜集数据的一种研究方法,研究者将所要研究的问题编制成问题表格,让受访对象以邮寄、当面作答、在线作答或追踪访问的方式填写,从而了解被试者对某一现象或问题的看法和意见。问卷调研可以用于需求挖掘阶段,也可以用于产品上线后的评估阶段。

如果是想了解用户对产品上线后的满意度,可以使用问卷调研的方法。它比较适合去了解用户的认知态度,也可以附带了解用户的行为习惯,


问卷调研的优缺点

优点:统一性、灵活性、量化性、匿名性

缺点:(1)只能获得书面的信息,而不能了解到生动、具体的情况。(2)缺乏弹性,很难做深入的定性调研。(3)调查者难以了解被调查者是否认真作答,是不是自己填写的。(4)填写问卷比较容易,有些别调查者会随意选择,或者按照社会主流观点选择,这样会使调查失去真实性。(5)回复效率低,对无回答者的研究比较困难。


问卷调查的使用场景

适用于:(1)需要进行定量分析的调研。(2)需要匿名进行调研的问题。(3)对已有假设进行检验。(4)寻找问题隐藏的关联。(5)对产品设计用户认知及态度的评估。

不适用于:(1)发现和描述具体问题。(2)探索受访对象的模糊态度。(3)获取创新想法。(4)获取精确的行为数据。


问卷调研流程

1、确定目标:确定调研目的、对象、分析目的和应用对象。

2、调研方案:通过访谈、经验、理论等,确定调研框架,题目选项,分析思路,投放渠道,相本配比等。

3、问卷设计:问卷设计,问题美化,投放渠道。

4、问卷测试:多人测试,确保问卷的可读性,逻辑通畅

5、问卷投放:按照计划好的投放渠道进行投放,回收数据,数据清洗

6、问卷分析及填写报告:分析及报告填写,调研结果落地



数据分析

概述:通过在网站或应用中进行数据埋点,获取用户对产品的使用和行为数据,并进行基于产品体验优化的数据进行分析。


数据分析可以做什么?

1、可以做到用户从哪里来,来了多少

2、获取用户属性,用户地域,用户设备

3、访问了哪些页面,使用了哪些功能,消费了多少钱,消耗了多少时间

4、哪些流量可能存在问题,忠诚度如何,活跃度如何,有没有达到目标,和行业相比如何

5、流失情况如何,离开之后是否还回来

可以作为产品的眼镜和大脑,提供客观衡量的依据,可以持续优化改进。


数据获取方式的对比

日志文件:优势,完整的服务端请求记录。

                  缺点,日志的获取和清洗有过滤成本,许多页面操作无法记录。

JS页面标记:优势,数据获取可控、灵活,可以对页面操作记录进行记录,获取数据比较完整丰富。

                      缺点,需要在页面植入JS标记代码,某些情况下无法获取,如当用户禁用JS功能时。


常用的数据监控平台

1、第三方监控平台:如Google Analytics、百度统计、腾讯云分析等

2、自研平台


数据分析流程

1、监控  2、定义  3、埋点  4、测量  5、分析  6、优化


Web分析常用的指标

PV:是指页面浏览量,网页浏览数实施评价网站流量最常用的指标之一,用户每一次访问网站中的页面均被记录,对统一页面多次访问,访问量累计

UV:是指独立访客,是通过互联网访问、浏览这个页面的自然人

UPV:是指唯一身份综合浏览量

访问:是指在一定时间范围内,网站所有访问者对网站发起访问的总次数,从访客来到网站到最终关闭网站所有页面,记为一次访问

识别用户的方式:IP、IP+User Agent、cookie、User ID、设备ID、其他


复合指标

跳出率:指用户来到网站,只浏览了一个页面就离开的访问次数,占全部访问次数的百分比,简称“来了就走”。跳出率可以被用来衡量流量和页面质量,高跳出率表示访问者对着陆页面不感兴趣,没有继续访问更深入的页面。也可能页面设计存在问题,也可能是导入的用户不匹配。跳出率可以通过调整广告渠道,优化页面内容来降低。

退出率:访问者离开网站一次被记录为一次退出,某一范围内退出的数量/该范围的综合访问量就是退出率。如果关键流程中的某一页面退出率高,代表某一页面可能出现了问题。

访问时长:网站停留时长,页面停留时长,应用使用时长。访问量是访问质量的一个衡量指标,较长的访问时间说明用户与产品进行了较多的互动。

访问深度:可以理解为单个用户平均访问的页面数,是PV/UV的比值。访问深度也是访问质量的一个衡量指标,可以考察用户是否和网站进行了较多互动。这个比值越大,代表网站的粘性越高。

转化率:指在一个统计周期内,完成转化目标行为的次数占总访问次数的比率。根据设置不同目的进行计算,例如注册转化率、付款转化率等,是一个重要的分析指标。


移动端基础指标

移动端的基础指标监测与web端略有不同,但分析思路大致相同。指标分为:新增设备、累计设备、启动次数、单词使用时长。


常见分析内容

流量分析(哪里来?)、用户分析(什么样的用户?)、行为分析(如何使用的?)、路径转化(表现如何?)、流失分析(粘性如何?)



A/B test

A/B测试是一种帮助网页优化实验的方法。A/B测试的目的在于通过科学的实验设计和采集数据的方式,来获得具有代表性的实验结论,从而寻找到更好的产品策略。

简单来说,就是为同一目标制定两个方案,让一部分用户使用A方案,另一部分使用B方案,记录用户的使用情况,对比两个方案的结果,选择更符合的方案。

A/B test一般会在产品改版正式上线之前使用,来验证新的设计是否可以提高产品的表现。


A/B test可以测试的元素有:标题、图片、颜色、社交元素、段落文本、按钮、导航、任务流程、页面布局、价格、视频等。可一次只改变一个元素或一次改变多个元素的方式来测试,这就是两个测试类型单变量测试和多变量测试。


A/B test工具

Google Website Optimizer:搜索巨头提供的免费A/B test工具,一个很好的入门级工具,但是没有一些先进的功能。

Visual Website Optimizer:一个易于使用的A/Btest测试工具,包含功能有所见即所得的编辑器,单机地图,访问者分割和标签等。

Unbounce and Performable:集成着陆设计的A/B测试工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企业级测试工具

App Adhoc Optimizer:国内A/B Test工具,同时支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB测试服务的专业Saas平台

Optimizely:是网上现有的最专业的AB测试工具之一,它的价格要比其他的工具高很多(也可以免费使用一个月),它提供了一些非常好的功能。

Unbounce:对于登录页面的测试来讲非常不错,而且它不仅仅是个测试工具,还可以在无需自己编写任何代码的情况下来创建登录页面。


如何做A/Btest

1、确定目标,例如提高网站的付费转化率,降低跳出率等

2、测试方案,建立假设:购买按钮的颜色会影响点击率?缩短流程可以提高复费率?改变导航可以降低跳出率等?

3、创建相比较的两个版本,改变其中的变量

4、发布测试,将部分流量导向B方案,但不一定是5:5

5、数据分析,收集数据,对比AB版本的转化率、跳出率、留存率等



感谢阅读!



文章来源:站酷   作者:_微光

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、
BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

界面设计中素材的处理技巧

博博

用科学合理的方法找到最合适的素材

UI设计中,除了界面整体的布局,还有一些图标、插画的设计,大部分都是素材的填充,而这么重要的部分往往被设计师所忽略。


对于素材的随意挑选,殊不知选图的技巧和方法有很多,众多素材中如何找到我们心仪的配图呢?这就是今天要和大家分享的主题,用科学合理的方法找到最合适的素材。



一、选择配图的常见错误


在为产品寻找配图素材时,是一个长久过程。所以素材的运用即能帮你提升界面的效果,也能拉低界面的效果,很多设计师不在意选材的重要性,往往因为配图后界面效果还不如原型图看起来规范好看。下面我总结出三个方法可以提升配图的效果。



1、素材与用户预期:


不真正调研产品的用户群里和心里。搭配的素材必然达不到用户预期。每款产品的使用人群是不同的,我们的素材配图要符合产品使用人群的预期。


如下图:是一款有关于售车的界面效果,此项目的用户的目标已经确定,主为高端用户,我们来看看左右配图的区别。



左图中我们在找配图时如果不能保证对高端车的认知,必然会有低端车的产品图的出现,由于不符合产品的使用人群,给用户造成心理落差;而右图则是我们了解高端车后的选图,内容是符合用户心理预期的,同时通过配图再次提升产品的逼格。


PS:我上面说到图片内容的心理预期与用户不符,其实在关于选图上,也是存在这个问题的,例如左侧是通过百度找到的素材,不够精致,无法提高界面的整体效果,而右侧则是在站酷海洛找到的素材:


只要进行裁剪,缩放比例即可使用,界面整体档次也提升很多。



2、素材与主视觉:


说到主视觉,就先要说说有关颜色的归类,颜色主要分为暖色系,冷色系和中性色系三种,在界面中不同的颜色可以带来不一样的感受,如果不理解主视觉所要表达的感受,便找不到合适的配图,无法提升界面效果。所以我们在选择配图时一定要追寻界面的主色系所以传达的情感。


如下图:左侧是以冷色为主的直播界面,右侧是以暖色为主的产品详情页。



左图由于忽略了主视觉的关系,配图为颜色过多,页面整体表达出来的情感不够直观,无法产生共鸣。


右图中我们通过控件可知主色为暖色系,选择同色系的素材进行搭配,通过素材和主视觉的完美搭配才能明确传达产品想要给用户的感受。



3、素材与素材:


这是最容易出现的错误,我们通常只关注于素材的整体感觉,反而忽略同类素材之间的差异,不是所有的同类素材都可以放到一起来用的,我们还要注意素材与素材内容的差异化。


如下图:左图为一款外卖食品列表的效果图,右图为商品列表的效果图,大家可以分别感受一下左右两侧的哪个更舒服些。


左图中列表的素材与素材的内容是不同的,虽然都是食物图,但有的是实物,有的是适量图,给人的感觉是不同的,这也是大家总是觉得哪里不对,却又说不出来的问题。


再看右图中的列表,配图元素统一,同为国外真人模特,符合素材与素材之间风格的统一。


PS:我们平时在做概念稿时,找同类型的产品图消耗的时间也是很大的,不是图片少,而是同质量的素材太少了。


所以一定要在专业的素材平台找查找,因为专业的素材平台会根据设计师的需要提供方便快捷的素材集合。



例如上图,我在站酷海洛中的搜索水果,便的到各个角度和不同风格的同质量图片,可以有更多的选择去搭配。



二、运用配图的常见错误


上面我们说的是如何选择素材,而下面一部分主要是让大家了解到没有量身定做的素材,不是什么素材都可以拿来直接用的,理想是丰满的,现实是骨感的。


辛辛苦苦找到的素材,就差一步便可以提升作品的效果,却因为嫌修改麻烦而失之交臂,我们来看看下面三种方法是如何将素材进行优化的。




1、统一素材比例:


在设计界面时,素材被拉伸变形,填充不满等低级问题出现的已经越来越少了,所以这里要说的不是基础的尺寸问题,而且是素材内容的占比比例。要保证素材中的内容与背景的占比是一致的,才能提升界面规范性。


如下图:两张运动类产品的界面列表,我们来分别单独预览两个界面,有没有发现同样的界面同样的产品,但预览产品的顺序是不同的,这是什么原因导致的呢?我们往下看。


左图中的产品展示内容与背景的占比不统一,可能是按现实中的比例进行摆放的,有大有小,界面显乱,干扰用户的阅读顺序。


右图通过更改图片比例后,统一了图片内容与背景的比例,不会干扰用户阅读界面的顺序。



2、统一素材角度:


素材因为角度不一,给人的感受也是不同的,在一个界面中的素材如果角度各式各样,会影响到用户的点击欲望。所以在挑选素材时应该注意参考图的角度,统一的拍摄角度可以让界面变得更有秩序。


如下图:左右两张界面的产品展示部分。



左侧界面中产品配图角度各异,有正视拍摄,有俯视拍摄的界面毫无秩序感。而右侧则对配图进行了规范,都为正视图,让界面看起来更统一规矩。



3、统一颜色:


很多素材的构图和内容都很棒,但放到界面中却显得格格不入,主要原因在于颜色之间的差异。选用素材后,如果对差异较大的颜色不做改变,便会造成颜色混乱,弱化了主视觉的颜色,用户对其产品的认识便会渐弱。


如下图:播放器界面中唱片封面的颜色差异。



左图我们为播放器寻找到了合适的素材封面,但素材的颜色是橙色的,素材与整体的颜色调性是不融洽的,破坏了界面的统一性,并不适合。


所以我们可以将封面改变其颜色变为符合我们界面中按钮以及播放时长的进度条的蓝色即可。



三、线上运营用图


前面说到的都是关于概念稿选择素材用到的一些技巧,可能大家看了会觉得这是概念稿,在实际的线上是没办法控制的,这个观点我并不同,实际线上的配图就真的没办法提升了吗?还是我们选择性忽略了呢?也许我们最初的选择就是美丽的谎言。



1.确保真实用图:


在设计初期我们就应该使用真实的运营图片进行设计,防止上线后才发现图片与设计风格不符的情况,为时已晚。


如下图:两组图为图书展示模块区域。



左图为设计时摆放的封面,都是精心挑选的优质素材,美化了模块的效果。


而右侧为线上效果,无法保证封面设计的统一性,所以切勿使用与实际上线不符的图片,会影响产品最终效果的判断。



2.不可重复用图:


很多设计师在做设计稿时,通篇只用一张素材图,交给开发,其实这样做出的设计,和原型无太大差异。


但是我们的设计稿是为了给运营提供参考的基础模版,为了能和线上效果保持一致,所以设计稿中的素材不可在一个界面中出现两次。


如下图:视频App中的频道页,左侧为复用素材设计,右侧为选择不同素材设计。



左侧的复用设计其实和原型区别不大,无法根据界面中的素材选择运营图,可利用性不大。而右侧更贴近线上效果,可以给运营提供找素材图的方向,避免返工。



3.图片的清晰度:


模糊的图片会使用户的视觉体验变得糟糕,现在的用户对于图片的浏览量每天都是不计其数的,如果想要在配图上得到用户的亲睐,就必须要清晰且看着舒服的图片。


如下图:两张同样的界面展示,分别用了模糊的素材和清晰的素材。



左图中图片清晰度不够,影响用户的浏览,同时也会给用户造成未加载完成的错觉。


右图中的素材则清晰可见,增加界面的美观度。所以我们在用图时,不可以用小尺寸的图片强行拉伸,会导致图片模糊不清,请选择高清大尺寸的配图。



4.图片比例:


同一张图片可能需要在多个界面中进行展示,而展示的尺寸也有可能存在差别,所以我们需要统一制定界面中运营图的尺寸规则,也可以做好安全区,避免界面因比例不对造成的图片拉伸或者显示不全等情况。


如下图:下面的图片是原图素材,接下来要将原图分别放入不同的区域内,他们的尺寸也不同。



在左侧界面中,如果任由系统自动适配比例就会出现前两种的错误,留白或变形,所以我们应该把较大的图片制作规范,画出安全区。


如右图banner通过上面等比例缩放到刚好填充满即可,下面的素材也是等比缩放大填满整个摆放区域后在进行裁剪。



5.元素太多不使用:


很多运营的用图元素过多,一心想把能放的都放进去,最后图片内容中没有重点,用户看的也是一头雾水,元素少,突出重点的图来使用。


如下图:同为视频App中热播模块,同样的美剧和字段,只是素材有所不同。



左侧素材中元素过多,影响用户对图片阅读,无重点,没有点击欲望。


而右侧的配图简单清晰一目了然,不会给用户带来阅读负担,更是挑选影片中简单清晰的画面作为封面使用,增加用户点击欲望。所以我们要选择元素少的运营图作为配图。



6.格式太大:


图片格式过大是一件很严重的问题,用户预览时加载速度过慢影响用户体验的流畅性,图片过大也会增加用户流量的使用费用。所以我们在导出运营用图时,一定要记得压缩图片,对于压缩到什么程度,要看图片本身的大小,只要保证压缩完依然清晰就可以。


如下图:两张同样的素材图,他们的清晰度是一样的,可大小却有区别。



左侧为原图大小,右侧为压缩后的图片大小,我们可以看到压缩后的图片明显占用的内存更小了。



7.不要使用白色背景:

目前线上产品中白色背景的产品占比还是很高,所以我们在选用素材时,要避开白色背景的素材,当界面背景也为白色时,会造成无边缘感。


如下图:两个模块中选择用了不同背景底色的素材图。



左侧素材中用了大量的白色背景的素材,无法判断图片与图片之间的距离,同时也会造成图片大小不一的错觉。


右图中使用有背景色的素材,可以清晰的区分每一个模块的间距,整齐规范。


总结

我们在做概念稿时都知道需要精心选择配图,为什么在做线上稿时,图片的质量就变得那么差,是一件需要思考的事情,难道没有好的素材,我们就放弃了产品的美观度吗?


我们不应该把美化调整运营图变成日常的流程中吗?这样才能保证产品的最终质量。好看的素材不是找出来的,而是通过我们优化出来的。


文章来源:站酷   作者:海边来的设计师

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档