首页

比五彩斑斓黑更难的,是客户让你简约藏着细节

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

看过或听过一大堆理论知识的你,有没有被很多自相矛盾的设计原则搞混过?比如你把做好的设计发给总监看,然后他告诉你太乱了,要统一,于是你苦苦调整了一番。当再发给他看时,他却说太平淡了,要有对比。你心想,一会要统一,一会要对比,这不是自相矛盾吗?当然不是,其实你自己心里明白,只是你不知道如何平衡这两者的关系。

类似这种「矛盾」的设计原则还有好几对,接下来葱爷要把它们一一理清,让这些理论知识能真正指导设计实践。

对齐与变化

对齐是版式设计最基础的原则之一,具体指版面中的字与字、字与图、图与图要对齐,常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁,更便于阅读,比如下面这些作品都用到了大量的对齐关系。

我们来举个实例,假设你现在要设计一则手机banner图,目的是宣传某款手机的拍照功能,文案如下:

这种图不难做,你打算直接用一部手机和几张摄影作品作为画面的主视觉,于是去图片网站找了几张能体现该手机拍照功能好的图片:

图片找好后,你把其中一张图片填充到手机里作为屏幕背景,其余图片分散在手机周围,然后你把整个视觉主体放在了版面中央,文字则按主次排在了两侧,大致效果如下:

你盯着画面,正琢磨着还要加点什么的时候,总监不知何时出现在了你身后,他面无表情地盯着你的电脑,嘴里慢吞吞地吐出几个字:「太乱了,好LOW」,之后就消失了。你很聪明,立刻明白了总监是想要自己排得更整洁、更有序一点。

在目前的版面中虽然个别元素之间有对齐关系,但是缺乏整体的对齐,且图片采用了自由式排版,所以会显得混乱。于是你尝试把图片对齐排列,文字则以图片为基准进行对齐。

△ 左边的文字部分与右边的图片部分保持上下对齐,标题与内文为左右两端对齐,icon 与文字则是左对齐。

上图很「完美」地执行了对齐原则,整个版面干净、整洁了许多,视觉流程也更简单了。这下总可以了吧,然而事情并没你想的简单。因为总监不知何时又出现在了你的身后,他瘪着嘴一脸嫌弃地说道:「太呆板了,有点变化好不好?」

变化?难道又要调回改之前那种状态啊?当然不是,你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里,既要对齐,又不能机械地对齐;既要整洁有序也要灵活有变化。如何做到这一点呢?我的理解是:要在对齐中制造一点变化,在变化中找到对齐关系。比如下面这些作品:

现在你知道了,上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐,所以需要改变其中一个版块。该版面的视觉主体是图片,所以调整图片更合适。由于文字是呈水平排列的,那么图片部分是不是可以倾斜摆放形成一定的反差呢?这样既可以制造变化还能加强版面的空间感。

△ 除了把图片倾斜之外,LOGO也与内文错开移到了左上角,最下边的直线也可以延伸到了版面之外。

我们现在再回过头来看看这件作品是否符合前面我说的,「要在对齐中制造一点变化,在变化中找到对齐关系」这一要素。

从上图中可以看出,图片虽然做了倾斜,却是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线,但是没有哪一个元素是孤立的,每一个元素都与版面中的其他元素有对齐关系。更重要的是,左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的,所以整个画面才得以平衡。

统一与对比

虽然设计的构成要素只有文字、图片、色彩,但是每一个要素都有无数种表现形式,不同的字体、字号、色值、质感、风格、图片、方向等等。如果在一个版面内含有太多不同的东西,会显得很杂乱,从而让人心生厌烦,所以,需要通过某种方式把这些「不同」统一起来,以达到舒适、协调的效果。

以一则运动品牌的轮播图设计为例,文案如下:

这类设计以运动员作为主体最容易出效果,所以我们需要找一个正在奔跑的人物图片。

△ 这个人的姿势不错,就他了。

运动品牌最重要的是要设计出动感和时尚感,所以我把背景分割成一红一蓝两个倾斜的色块,然后把人物放在画面中央,文字分布在左右两边,以制造出强烈的视觉冲击。

由于有一个动感十足的模特和背景,所以整体看来还是比较符合运动海报的调性,但视觉上有点乱,因为有很多细节没有统一,比如人物倾斜的角度和背景色块、标题倾斜的角度不一样,主要文字的字体风格不一样(NIKE和JUST DO IT的字体比较硬朗,而蓄势待发的字体相对较柔),元素的风格也不统一(圆角的了解更多按钮与整体风格不搭),还有各元素的颜色也缺少联系等等。

那该怎么办呢?这里就需要用到统一的原则了,我们可以试着把上面提到的不统一的地方都统一起来,如下图:

△ 调整后的方案二,字体都是简洁有力的黑体字,而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了,「了解更多」的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。

调整之后确实不乱了,但是也有了新的问题,因为各元素太过统一使得画面缺乏层次和对比,该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则——对比。

对比,是把具有明显差异、矛盾和对立的双方安排在一起,进行对照比较的表现手法,目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。

想要处理好统一与对比的关系,需要记住两个要领:

  • 各元素的调性要统一、元素的呈现方式要有对比。
  • 要保证画面中的对比关系不会破坏整体的协调性。

顺着这样的思路,我们来给上图增加一些对比关系,例如方案二的标题倾斜角度太大,不美观,所以我干脆把它的倾斜方向改为垂直倾斜,既保留了动感也增强了对比,更加美观。在文字的字号上,我选择突出品牌名缩小广告语,加强了大小对比,并且还恢复了之前把背景一分为二的做法,只是增加了一点空间感,并把人物服装的颜色与背景色做了统一。调整后的效果如下:

我们可以观察一下,方案三确实比方案一更协调,比方案二更有层次和视觉冲击力,且整体调性依然年轻、时尚、有动感,这里就是运用了统一与对比的原则。

简单与丰富

简单应该是大家听得最多的设计原则,简约、极简风格的设计也非常受欢迎,但是我们也很困扰,因为自己做的所谓极简设计经常会被人说太单调、不够丰富;而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢?我们先来正确地认识一下简单与丰富。

简单并不是指做设计要用最少的元素、不做任何修饰,而是指设计主旨要简单,视觉流程要清晰,视觉要聚焦,主次要分明。

△ 上图的设计虽然元素和色彩都很多,但整体给人的感觉也还是简单的。

而丰富也不是指画面中一定要有很多元素或叠加一堆的效果,而是指有细节、有层次、有品质感。

△ 上图的设计虽然整体看来很简单,但是并不会显得单调。

为了方便理解,我们还是来举个例子:一款农产品册子的封面设计。该封面的必要元素很简单,只有一个 Logo 和一句文案,因此,我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文字,再配一款特种纸,做点工艺,就可以显得很高大上,很多大品牌也是这么做的。

这也是一种还过得去的解决方案,但表现手法确实太过简单,既体现不出设计师的设计功底,也没有体现出农业品牌的调性和特色,且缺乏吸引力,所以我们需要做加法,让其变得更加丰富。

怎么丰富呢?最直接的办法就是引入图片和色块,由于品类为农产品,且文案重在强调健康和安全,所以我们可以找一张绿色、生态的图片。

为了与狭长的版面保持统一,我把图片也裁剪成了竖版的矩形,并与一个同样大小的绿色色块结合在一起,组成版面的主视觉,logo放在图片左侧,如下图:

这么做还是有些设计感的,也增加了品类属性,不过缺少细节、不耐看,所以还需要加点东西。当然,新增加的元素只能作为辅助,不能太过抢眼,图片方面我很快想到了叶脉,叶脉与图片中的叶子元素也能产生关联,且适合做底纹,于是我又找来了一张叶脉的图片。

把叶脉图片放在图层最底部作为背景处理,这里会遇到三种情况,一是如果把叶脉纹完全平铺的话,整个版面就没有留白了,所以会显得压抑;二是把整片叶子都显示出来,但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面,与图片部分形成呼应,这样的效果看起来是比较舒服的。

图片部分得到了改善,但现在画面中还缺少一点小的装饰元素,增加一点文案是个不错的思路,所以我把文案和品牌名的英文加了进来。

做完加法后整个画面变得丰富了不少,层次也拉开了,而且给人的感觉依然比较简单,既不杂乱也不压抑,因为各元素主次分明,既有联系又没形成干扰。不过做加法的时候也要把握度,例如下图就有点堆砌过度了,看起来很繁杂、不精致。

想要处理好简单与丰富的关系,需要注意两点:

  • 要保证主体单一且足够精致;
  • 要保证有简单的装饰元素与主体形成互补。

规范与打破

规范与打破是存在于版式设计中的一对矛盾原则,规范是指把版面中的元素要按某种规律,或是在特定的范围内设计布局,目的是为了让画面更有条理和秩序,也更像一个整体。

△ 上图的主要元素都规范在一个矩形中,然后各个小矩形又组合成一个大矩形,看起来很整体,很有设计感。

与规范对立的是打破,指打破规范、打破束缚、打破平静,目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。

△ 用色块或图片来创造束缚感,然后把部分元素冲出色块,是规范与打破的一个经典组合形式。

可以说经过了严格规范而变得很好看的优秀设计很多,而有些设计却选择了打破规范,也得到了很惊艳的效果。那什么时候该严格遵守规范?什么时候应该打破规范呢?其实在一件完整的设计中最好两者都要有,而平衡这两者的要领就是:先规范后打破,即在规范好的基础上选择一些局部来打破。

葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动云服务平台方案介绍的册子,文案如下:

很明显该封面的视觉调性应该要有科技感,要能体现互联网、信息、大数据这些关键词,所以我找了一张看起来很有科技感的图片。

这类画册的版式通常应该偏向简洁、规矩,所以我决定用网格系统来辅助排版。以图片作为封面的主视觉,除了Logo,所有元素都排列在矩形图片内,并且所有文字都按照网格的设定保持左对齐,所有元素的高度、宽度,以及各元素之间的间距,都严格按照网格来排版。

△ 经过规范的版面整体看起来十分严谨。

不过这么做也造成了版面缺少变化、太过规矩等问题,所以我们可以尝试在此基础上做一些「打破」。

比如原本的 LOGO 与图片靠得太近,显得很压抑,这里就不必完全按照网格来排版,我们可以根据自己的感觉将 LOGO 与图片分得更开一些;中文标题、短线、英文标题这三者也太拥挤了,可以挪开一点;文字部分不一定全部都在图片范围内,所以我给英文标题加了一个蓝色块,并把色块移出了图片区域;以及把最下面的公司名称排在了图片下方等。调整后的效果如下:

△ 调整后的方案,构图也相应发生了变化,之前为上下构图,现在变成了对角构图。

在规范的基础上做了打破之后,我们可以看到,版面的整洁性依然在,整体的调性也依然简洁、严肃,但相比调整之前显得更灵活、更有设计感。

结语

设计不是简单的加减法,也不是只要做到对齐、统一这些很简单,方向很明确的原则就可以了,因为根本不存在什么原则可以让我们直接通向设计的终点,但是我们的目标是明确的,就是要做有效的设计,所有的设计原则、设计手段都要为这个目标服务。

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

设计心法 谈谈事理学-认识论

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


目录


引言

一、对设计的认识

二、设计观念

三、设计原则

四、设计思维


引言


前段时间在学习python语言的时候,我了解到在程序界有一种叫做“算法”的存在,其实“算法”就像武侠片里面的内功心法,内功心法越好就能激发越强的武功招式。在程序编写时大部分的程序语言都可以使用“算法”来优化程序的流畅度。比如,当大量用户同时使用程序时,“算法”就可以合理配置服务器资源防止服务器的崩溃。在设计的过程中其实也存在这样的通用心法,事理学的认识论其实就有点类似于“算法”,所以这一期我的分享题目叫《设计心法》。


一、对设计的认识

 

·内部因素与外部因素:

 

设计中我们可以将设计问题化分为外因(人,时,地,事)与内因(技术,工艺,材料等),在上一期文章中我们谈到设计可以定义为:人有目的创造活动,往往现代生活中设计的目的不是唯一的,这就好比佩戴手表时我们可能不仅仅是为了查看时间,还可能是为了在潜水时防止手表被泡坏。因此,物“应该是什么样”表现的是对不同人与环境的适应,就如同生物多样性表现了对环境的适应一样。

Image title


除却外部的环境因素,我们还要考虑的制作产物时所需要技术、工艺、材料、形态、结构。内部的因素其实代表了一种可能性,是一种可变通的元素组合。比如同样是防水手表,我们可以采用耐浸泡的材料,也可以运用防水工艺。(ps:在《事理学论纲》中内部因素没有成本,但是小胖认为成本其实也算是设计中应该考虑到的内在因素,所以在这里我也将其归纳了进来。)

Image title


总的来说外部因素代表了限定性,而内部因素代表了可能性。设计的过程中应当了解外部的需求与限定,然后组织内部结构。在内外因素之间找出一个契合点,设计就发生在这个契合点上。

 Image title

·目标与目标系统

 

窗帘、太阳镜、电焊面罩、等等这些看似风马牛不相及的物品,却有着共同的目标—— 遮挡强烈的光。在实际设计过程中目标往往是抽像的,而目标系统是具体的。目标系统既包含特定的外部因素的限制也包含内部因素的选择。

 Image title

同样是手表,同样是为了看时间,从技术到外观在使用因素的限制下,也就决定了其品种的千差万别。建立目标系统是对实现目标的外部因素限制的研究过程,也是从外部角度观察、分析、归纳实现目标条件的认知过程、叙述过程。设计师应将抽象的目标转化为目标系统,完善的目标系统才是优秀设计的创意源泉。

 Image title

·“使用”的意义

 Image title

在“使用”物品的过程其实包含两个方面,一是使用者——人的动作:二是被使用者——物的动作。人的动作是人生理结构和生存需要指示下的延伸,在动作的引导下人的大脑对外界的刺激作出反应,留下印象,形成经验,储存信息,成为意识。当再次遇到类似的问题是,人会逐渐总结经验并形成知识的迁移。物的动作是人使用过程中人的动作在物上的反应,这就包括器物的变形、移动、或是其他信息(比如声音,灯光等等)。

 

在人使用物的过程中,为了使物更加符合人意志,自然要对物进行改进,使物更加适合人的生理结构和需求目标。比如在原始社会原始人类为了更有效地的获取猎物,在原有的石头上进行敲击加工使之更加符合使用习惯。在“使用”中人和物不断磨合,这一过程实则就是产品迭代的过程。“使用”的意义在于它是一种积极的思维方法,是一种能启发创造的设计起点。Image title

 

·方式与合理

Image title

方式在设计中不是指的具体的某一个动作,而是使用时产生的一系列动作,人的行为与各动作相对应的物与物组成的环境组成了一个特定的社会现象,我们称为“方式”。物是动作对象,环境是行为条件。同样,动作使物有用行为使环境具备社会意义。

 

合理是指合乎客观规律,合乎时代观念,合乎社会准则,合乎人类理想。合理是人类经验、教训的总结,是认识的升华、沉淀;是道德、行为、情操的法庭;也是在历史的基础上对未来的规划。当人在追求欲望的过程中,合理更像是一种约束人类行为的标准,通过合理的约束来引导人类的行为方向。

 

综上合理的使用方式其实是设计的原则,通过合理的评估系统和反馈可以制约不合理的设计行为,在的设计活动中,以“创造合理的生存方式”作为第一原则才能促进人类往更好的方向发展

 

二、设计的观念

 

·设计生态观

 

自然界的生态系统是一个封闭的、可以自给自足的系统。在此系统中没有开始也没有结束,任何一环的在生态环境中都扮演着至关重要的角色。反观现代设计生态却并不存在这样的循环。

 Image title

现代经济学被认为是研究人类需求与稀缺资源之间关系的学科。经济学中的生产者(企业)将有限的资源整合变成可盈利的“商品”,而消费者是在有限收入下实现“效用最大化”的行为个体。消费者购买行为发生后进入“使用”阶段,直至使用的物品失去使用价值。“物”从资源直到被销毁经历了四个阶段,这四个阶段分别是产品、商品、用品、废品。

Image title


现代市场经济下人的物质需求被极大满足,市场经济的增长依赖消费增长,反观人类的自然资源总体上却在急剧减少。设计者除了的满足生产者、消费者、使用者的需求之外,还应该思考如何将“废品”分解利用形成设计生态闭环。

 

·设计美学观

Image title

人类文明的发展大致经历了三个阶段,这三个阶段即古典主义、现代主义、和后现代主义。这三种文明的美学观也可称之为再现主义、表现主义和共生美学。这三种美学观点的发展是相互交错的,只是主体上有区别。

 

当代设计和艺术是以思考、感召、联想的手法,以同观众、使用者共同创造为目的,以多种美学观重叠、并行、综合为基础的共生美学观为审美取向。技术与艺术共生,技术与各种美学观共生,这就是当代设计——后现代主义的美学特征。

 

三、设计原则

 Image title

·有限理性原则

 

在艺术的创作中美可以被分为很多种,梵高的油画是美的,米开朗基罗的雕像也是美的。其实任何事物,任何美都是相对的,在不同的时代背景和使用场景下我们对于美的定义都不同。

 

类比设计,衡量设计的标准不是对与错,而是相对满意与不满意。设计应该遵循“有限理性”的原则,即设计的目的并不是寻找“最优解”,而是“满意解”。“最优化理论”只适合作为设计中的一种技术方法使用,而且只有当目标属性十分明确,可以用数量化衡量时才可运用。

 

·适应性原则

 

上文说过设计就发生在内部因素和外部因素的“关系”中,而这其中的“关系”其实就是适应的过程,设计还可以理解为是以一定的目的、一定的方式来达到与客观条件内部关系相适应的人为适应系统。设计的内部因素、外部因素和设计目的是设计过程中应当遵守的具体内容。

 

多数时候外部因素在适应系统中是人们行为方式的主要决定因素。系统的复杂行为主要是其所处外部的复杂性的表现,而内部因素少量限定属性的制约,这才是完整的适应性系统。

 

四、设计思维

 

设计思维实际上是围绕着“问题”来展开的。所谓“问题”是指设计各要素交织在一起时,所产生的关系矛盾。好的设计一定是“问题”的良好协调统一体。研究“问题”的方法通常是通过观察问题——分析问题——归纳联想——评价修正的模式来巩固的。

Image title


观察问题其实是在用户调研中最常用的方法,定性调研中研究人员常常会使用观察法来记录用户的行为,之后用研人员会使用“五问分析法”来抽象出用户的真实需求。其实在事理学中也提出了类似的观点。


  观察法的几个原则:


  1. 目标明确——从现象到本质(五问分析法)

  2. 忠实于对象——感官+体验

  3. 扩延、比较——搜寻同类比较共性

  4. 由表及里、去粗取精——总体到局部再到整体

 Image title

需求分析中有一块人物画像的部分,其中情景分析和故事板就是分析人物使用产品的外因和内因,撰写故事版时不妨按照以下路径来展开。

 

  分析问题中应当结合设计中的基本路径来分析:


  1. 寻找“物”存在的外在限制——人、环境、时间、条件等制约。

  2. 析出“物”的内因与外因的逻辑“关系”——寻找现象依据

  3. 比较相似“物”的内、外因的关系——透析共性基础上的个性

 

具体的归纳、联想和创造都应该明确设计“目的”,结合实际中遇到的外部因素来具体创意创造。最后我们通过建立评价体系,优化设计产物在设计生态中的体验和循环。

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

如何让动效完美还原?送你两个超厉害的免费插件!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

作为视觉设计师你是否会遇到这样的问题,当需要做一个 loading 或者其他动效的时候,总会或多或少的出现一些问题,如何使用更轻量的 Sketch 直接将矢量图形转到 AE 制作动效,如何不再受 GIF 导出的失真问题困扰,如何让开发完美还原我们的动效设计稿等,如果你也存在这些疑问,那以下介绍的2款插件就可以完美的解决这些问题。

AEUX

AEUX 是由 Google 团队推出的,运用在 Sketch 和 AE 的一组插件,能将 Sketch 里的图层以及整个画板一键导入到 AE 里,同时能在 AE 里解决图形分组和分层的问题,减少导出图片或者转入 Illustrator 处理带来的不必要的重复动作。

以下是我做的一个简单小案例,通过此次案例将介绍怎么更好的使用这个插件:

首先在 Sketch 内将图层进行分组,在多图层的情况下,需要在前期进行动效构思,根据构思在 Sketch 里对图层进行分组,所做的分组将会是你在 AE 里的合成分组。

分好组后该如何导入才能让两者图层统一?

方法一:直接复制选中图层

安装好插件后,打开 AEUX,选择你将导入到 AE 里的图层,点击 Send selection to Ae,同时在AE里打开安装的 AEUX插件,在 BUILD COMP 区域出现了从 Sketch 导入的图层数量,勾选 Precomp groups,点击将自动加载入 AE 合成里。

方法二:导出json文件

从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件,打开 AE 的 AEUX 面板勾选中 Precomp groups,将导出的 json 拖入到 BUILD COMP 区域,或者点击「曲别针」icon打开 json 文件。

这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。

避坑指南

如果在 sketch 内,分组图层不在同一组内,导入 AE 后会出现变形和位移的情况。

如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时,导入 AE 后将出现投影消失,渐变消失,形状变形的情况,在遇到这种情况时,会通过导出图片的方式处理。

导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups,多图层导入的情况下,组内的图层都会生成在 AE 中的同一个合成中。

Sketch的AEUX面板其他功能介绍

1. Detach symbols

这是一个解除 symbol 的功能,在 sketch 内如果没有解除 symbol,导入到 AE 里将出现图形位移和变形的情况。

2. Flatten shapes

AEUX 支持布尔运算,但是在一个组中混合不同的运算符(如添加然后减去)对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形。

3. Images to symbols

Sketch 只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界,复制到 AE 内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况。

AE的AEUX面板其他功能介绍

1. Come size multiplier:切换倍数

可以设置 sketch 画板的倍数合成。

2. Auto build artboards:自动构建合成

导入前勾选此功能,在 sketch 的 AEUX面板中复制图层后,在 AE 里不需要任何操作,它会自动复制图层导入到创建合成中。

3. Convert to precomp:创建合成

同时选中单一图层,可以将他们建立一个新的合成。

4. Un-Precomp group:解除合成分组

点击可以解除合成的分组,变成单一的一个一个的图层

5. Toggle Visibility:可以一键隐藏和显示所有的父级图层

6. Delete group layers:删除父级图层

虽然现在 AEUX 有些上面所讲的功能不能支持,但是在一步步完善,希望可以帮助一些习惯用 sketch 画插图的设计师提高动效制作效率,减少不必要的操作步骤。

Bodymovin

在动效制作好后,通常我们会导出 mov 然后导入 PS 里生成 gif 格式,但是 gif 会出现质量过低的情况,比如渐变分层,边缘有毛边等情况,所以由2017年 Airbnb 团队开发的 lottie 动效可以完美的解决这些问题,而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin 的插件。

Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放,在制作动效时导出 json 文件直接给到开发,可以帮助提高实现动效效率,同时提高动效质量。

1. 它还有很多的优点

  • 它可以支持 Android、iOS平台;
  • 导出的文件体积小,方便开发使用;
  • 实现效果佳,可以支持渐变等效果。

2. 在使用中有几点注意

  • 在使用前期,这种方法是否适合你现在所做的动效,lottie 是针对矢量动画开发的,不太适合图片过多的情况,图片过多会增加文件负荷,所以最好是将图片转化为路径动画。
  • 在 AE 里导入到 Lottie 的图层不能识别矢量渐变。
  • 不能支持外置插件的效果,比如粒子、光效等。
  • 需要与前端开发沟通,他们是否愿意使用。
  • 导出给开发的文件中需要有完整视频参考,开发可以通过完整视频知道 loading 位置和效果,同时如果出现 json 导出错误的情况,开发可以查看,遇到不一样的地方可以询问设计师。
  • 开发完成后需要走查,看是否与你预期一致。

3. 所需软件

ZXP installer

  • LottieFiles(移动版)
  • 插件:bodymovin

下面是一组之前做的页面加载loading效果,开发小哥哥反馈:实现挺。

4. 步骤

下载ZXP installer:https://aescripts.com/learn/zxp-installer/

下载bodymovin:https://github.com/airbnb/lottie-web

下载之后,点开刚下载的 ZXP,点开顶部 file-open,打开 bodymovin插件。

当出现以下界面时代表已经安装成功。

意外情况:在用 ZXP 安装 bodymovin插件的时候出现以下提示。

原因是没有通过 Adobe Creative Cloud 下载 AE,需要重新通过 Adobe Creative Cloud 下载。

打开AE,After Effect CC – 首选项 – 常规,勾选允许脚本写入文件和访问网络。

打开窗口 – 扩展查看是否添加成功。

调出 Bodymovin 面板,选择需要导出的合成。

点击你要保存的 json文件地址,点击 Render。

点击 Brown 载入刚导出的 json文件,检查动效是否有误。

这时候就可以把 json 文件给到开发,如果 AE 合成中有图片,需要把图片放在文件夹内一起提供给开发,同时也会给到一个 gif文件,如果实现有不一样的地方,开发可以询问设计师。

如果想在移动端上浏览可以打开网址:https://www.lottiefiles.com/,下载安装移动端客户端(ios/Android)

注册登录成功后打开 Lottie Preview 添加 AE 里用 bodymovin 导出的 json文件。

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

 

B 端产品如何做动效设计?用实战案例告诉你!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在无限的信息体量和有限的用户浏览范围之间求得平衡,让用户看到全部创作中他最想看到的那一面。

在B端产品的设计过程中,我深切体会到动效能在很多体验领域起到四两拨千斤的作用。于是我将自己这些年来做动效的思考,结合B端产品的一些固有特点,来和大家聊一聊动效设计在B端产品体验设计中的意义。

既然是谈B端产品的体验设计,那么就免不了要与C端产品做对比。在我看来,B端产品与C端产品在大的体验趋势上是趋同的。对于大多数用户而言,都希望自己在工作与生活中是顺利、愉悦的,而用户体验就是为了让用户顺利、愉悦而生的。也就是说,不管是B端产品还是C端产品,其体验的本质都是围绕着使用的效率与愉悦感为核心展开的。那么这次我们就将目光聚焦在B端产品,来看看在这个领域都有哪些亟待解决的设计难点。

针对这四个特点,我沉淀出一套解决B端产品体验问题的方法,它们分别是:信息折叠、路径梳理、提升效率、概念物化。接下来,我将通过具体的案例,来详细展现动效在B端产品体验设计中的意义。

涉及案例简述:

  • Dataphin:一款将阿里建设数据中台的能力商业化的产品
  • QuickBI:一款用于数据可视化分析的BI工具

信息折叠

1. 切换式:不同信息共用同一区域

案例1:

问题分析:初次进入 Dataphin,我们会提供一张业务流程图来解释 Dataphin 的工作流程。为了降低理解成本,我们对每个流程都添加了文字说明。然而由于流程本身已经很复杂,页面排版中加入说明性文字会使得流程的排版拉长,用户很难通过一屏浏览完整的功能流程,体验不佳。

解决方法:我们发现用户一开始关注业务的全流程展示,然后才会仔细查看每个业务的详细说明。当用户将注意力放在查看详细说明的时候,是顾不上看全流程的。因此我们将「看流程」和「看说明」的场景区分开,共用同一块区域,从而优化信息排布。

案例2:

问题分析:在QuickBI中,同一套 icon 需要应对两种不同的使用场景,当用户没有选中任何图表的时候,点击任意类型的图表icon,即可新建一个图表;当用户选中某一创建好的图表时,再点击图表icon,则是为该图表切换类型。所以为了确保用户的认知清晰,我们需要将两套使用场景区分开。

下图中,我们尝试了静态的布局思维,虽然可以区分场景,但也造成了导航条过高,导致空间冗余,压缩了创作空间。

其实这个问题不止我们家有,用过 AE 的同学应该清楚,AE里面的形状工具体验也很鬼畜,用户不选择任何图层的时候,使用形状工具可以新建形状,当用户选中某个图层的时候,使用形状工具是针对该图层创建蒙版,两种不同的功能却没有任何样式或操作上的区分,对新手用户来说是相当不友好的。

解决方法:用户创建图表和切换类型是两种不同的场景,不可能同时存在,在布局上没有必要让两套 icon 同时存在于界面。因此使用切换式,利用鼠标对图表的点击、失焦可以灵活切换两套使用场景。

2. 交叠式:不同入口内容共用同一区域

问题分析:图1是用户在 Dataphin 中所创建的一张逻辑表,我们需要保证用户在屏幕内尽可能多的获取信息,因此逻辑表中的空间利用就显得很重要。在原有交互中,我们为用户提供了搜索功能,同时我们也在思考有没有更优的信息布局方案,可以为用户展示更多的数据。

解决方法:在图2中,我们需要在顶部区域寻找与用户搜索操作不重合的场景,并把它们重叠起来。这里我用到交叠式的思路,即将搜索框收起来,只在顶部保留搜索入口,这样在布局上就可以让搜索与标题交叠使用同一块区域,优化了布局。

3. 衣柜式:在原有入口上扩展出更多信息

问题分析:在下图中,侧边导航的信息过多,压缩了创作区域,我们需要为导航「瘦瘦身」。

解决方法:通过用户调研,我们发现导航的名称对于新用户来说很有必要,但随着用户对产品的逐渐熟悉,名称重要性渐渐下降。我们需要通过动效,找到合理的展示形式,来兼顾新老用户的使用需求。

4. 设计的价值

通过动效优化信息布局,既保证了单位面积内尽可能多的展示有效信息,又避免了信息过载带来的干扰与阅读疲劳,使得用户每次只需要专注眼前的使用场景,提高了获取数据的效率,这便是视觉设计师在项目中的价值。

路径梳理

1. 层级路径梳理:解释类目之间的层级嵌套关系

问题分析:在 Dataphin 中一共包含了80多个功能点,我们将这些功能点梳理归纳成5个大类目和20个子类目。因此我们既希望用户能明确每个类目下包含的子类目,又希望用户在选中子类目的同时,也能明确感知自己处在哪个大类目下。

下图中,用户从首页切换到数据资产版图,我们想要让用户明确信息的嵌套层级,静态的思维只能用双Tab 形式展现。虽然解释了层级关系,但也使得导航高度过高,压缩内容区域,加之案例中的资产版图本身还包含三个子类目,于是,同一个页面出现了三层 Tab。

解决方法:将嵌套路径通过动效的方式展现,运动轨迹可以暗示用户子类目从哪里展开,其余类目被收到了哪里,用动效的方式解释了层级嵌套路径。明确了层级嵌套关系,节约了为解释嵌套路径而铺展出的信息所浪费的页面空间。

2. 操作路径梳理:解释操作流程的递进关系

在 Dataphin 中,用户在创建逻辑表之前,会经过一系列繁琐的配置工作,如下图中,用户需要经过「定义维度」-「定义主键&来源逻辑」-「定义层级」三个步骤。由于操作流程复杂,我们为用户设计了铅笔线动效,让用户时刻明确自己操作所处的位置,也方便回退操作。

3. 设计的价值

通过动效梳理路径,使得B端产品复杂的产品逻辑更为清晰,降低用户的理解成本,缩短因查找路径浪费的时间,提升工作效率。同时,将操作路径巧妙地隐藏在运动路径当中,可以节约为了展示路径关系而浪费的页面空间。

提升效率

1. 借位式:尽可能多的展示信息,缩短操作路径

问题分析:在 QuickBI 仪表板中,用户需要导入已有的数据集以配置图表内容。数据集由用户自行创建,一般来说,B端产品用户文件命名比较偏长,正常情况下下拉框很难直接把名称显示完全,用户还需要将鼠标hover 到名称上才能查看完整的名称,操作路径被拉长了。

解决方法:我们在侧边栏展开的一瞬间向两侧借一部分空间,使得名称获得了更多展示空间。尽可能多的展示信息,缩短操作路径,提率。

2. 响应式:每一步操作都有回应,引导式的体验

问题分析:在 QuickBI 仪表板中,用户创建图表的操作为,先拖动字段进入对应轴区,轴区便能读取字段内的信息并生成数据可视化。这一所见即所得的操作对老用户而言是的,但对于新用户而言认知成本却有些高。

设计思路:我们需要通过响应式的设计来引导用户学会这样一个操作。首先,用户的鼠标滑过字段,字段会高亮响应,提示用户此处可点击,从而吸引用户学会点击拖动字段。接下来,我们通过轴区内的文字提示,告诉用户字段可以被拖入该轴区。用户将字段拖入轴区的时候,对应的轴区会高亮响应告诉用户字段可以被拖入轴区,同时字段会根据拖入路径是否正确给出响应。如果正确,字段会划入轴区;如果错误,会给出错误提示;如果用户执意操作,字段会弹回原处。这样我便构建了一套完整的响应流程。通过层层响应的方式,减少用户在每一步操作上的困惑时间,帮助用户快速掌握这一操作手法,提升工作效率。

3. 元素联动:强化元素间的关联关系

工具型产品中很多操作是相互关联的,而且这样的关联关系通常是细微的,因此需要我们通过动效强化元素之间的关联关系。案例中图表的每一列指标可以自由配置,通过微动效,让用户一眼就能找到新增的指标,提升操作效率。(苹果在新版的 Mac 系统中也有采用类似的设计,体验很棒)

4. 框架联动:强化框架层面的关联关系

联动关系在框架层面也同样适用,比如导航区域与创作区域之间就存在拉伸联动。这样的动效前提,建立一整套元素的适配规范,便于开发与团队协作。这个过程会很繁琐,也是B端产品看不见的巨大工作量。

5. 设计的价值

每一个微小细节的打磨才能汇聚成的用户体验。提升效率的点小而且零散,总结起来即是用户的操作是强反馈的,从而增加用户尝试的信心;用户的操作是有引导性的,即增加用户继续探索的信心;用户的操作路径是尽可能被缩短的,以节约时间。满足这三点均可被看作是设计在提升效率方面的价值。

概念物化

1. 视效运用:运用视觉设计的能力,物化抽象的概念

问题分析:QuickBI 中有一个叫「创作区」的模块,是用来介绍 QuickBI 产品能力的。我们需要在这个区域向用户展示 QuickBI 所具备的能力与工作流程。由于 QuickBI 是面向行业分析师的 BI工具,其所要传达的概念对于新用户来说比较生涩复杂,这就需要我们在产品流程展示设计上尽可能简单易懂。

下图是1.0版本中的效果,其对流程的设计仅停留在图形的堆砌,对业务的表述不够清晰,也就很难向用户传递我们的产品价值。

那我们来看看视觉设计是如何物化抽象的概念的。

首先我梳理出 QuickBI 工作的四个步骤:获取数据、创建数据集、数据分析、数据展示。

接下来我们思考一下,当我们需要对某人讲述一个很复杂的概念的时候,我们通常会打个比方。那么我接下来要做的,就是为这套抽象的概念「打个比方」,因此我要为它们构建一个有故事性的场景,那么这四个步骤应该是某种静止且持续运转的工厂,它们之间需要某些动态的介质将其串联起来。

于是我进一步挖掘视觉样式,构建出了场景原型图。

进一步完善视觉效果,得到了最终的成品:零散的代码被收集车间收集,产出数据表进入加工工厂,工厂将其加工成数据集,运输进分析台,分析台通过「仪表板、电子表格、数据全屏」三种方式对数据进行可视化分析,最后将分析结果通过数据门户和邮件订阅的方式对外分享。

2. 设计的价值

通过动效设计,将抽象的概念具象化,将复杂的流程简单化,大大降低了新用户的学习成本,使之可以快速上手。

最后,我将我的动效设计方法沉淀成一套以方盒为载体的方法论——方盒理论:「置身于三维空间下,信息的体量是无穷的,我们需要为其寻找合适的载体,在无限的信息体量和有限的用户浏览范围之间求得平衡。即让用户看到全部创作中他最想看到的那一面。」这即是我所构建的以六面方盒为基础的信息载体,并为我的一切动效解决方案提供了理论支点。

B端产品并非大家印象中那样的索然无味,其中有很多体验是值得深挖的。动效仅仅是其中的一个层面。随着近几年B端领域功能点逐步完善,用户对体验提出了更高的要求,B端产品的体验设计需求也会渐渐升温,也希望有更多这个领域的优秀设计师能和我做朋友。

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

用第一性原理告诉你:什么是交互设计?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

为什么是第一性原理

最早提出这个概念的是亚里士多德。他说:在任何一个系统中,存在第一性原理,是一个最基本的命题或假设,不能被省略,也不能被违反。

后来「硅谷钢铁侠」埃隆·马斯克在一次采访中提到「第一性原理」:

我们运用第一性原理,而不是比较思维去思考问题是非常重要的。我们在生活中总是倾向于比较,对别人已经做过或者正在做的事情我们也都去做,这样发展的结果只能产生细小的迭代发展。第一性原理的思想方式是用物理学的角度看待世界,也就是说一层层拨开事物表象,看到里面的本质,再从本质一层层往上走。

所以,我希望用第一性原理的思维方式,发现交互设计的本质,从而更好地理解和运用它。

什么是交互设计

交互设计,又称互动设计(英文Interaction Design,缩写 IxD 或者 IaD)是定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the「interaction」即人工制品在特定场景下的反应方式)相关的界面。——百度百科

读完上面关于交互设计的权威解释,相信有读者和我一样,在短时间内很难弄明白:到底什么是交互设计?

下面,我们一起用第一性原理,拆解和分析交互设计的本质。

小学语文老师教会我们一种名次解释的方法——拆词法,那么,交互设计可以拆解成:交互层和设计层。

交互层是什么

交互,即交流与互动。具体点说,在某个场景下,一个对象为了某个事件目标,与其他对象产生信息的交流与互动。在笔者看来,交互的本质是信息的交流与互动,包含用户、目标、场景,它们共同构成交互设计的交互层,这是交互设计的前提。

而用户、目标、场景,也正是辛向阳教授定义的交互设计5要素其中的3个。

案例1:我们为「餐厅点餐」这个事件进行交互设计,那首先要知道这个案例的交互层是什么,也就是信息的交流与互动是怎样的。

这个例子的交互层是:用户(我们)需要在某个场景(餐厅),与其他对象(餐厅/服务员)产生信息的交流与互动,才能达到目标(完成点餐)。

案例2:我们为「地铁上听音乐」这个事件进行交互设计,按照上面的思路,我们知道这个事件的交互层是:用户(我们)需要在某个场景(地铁上),与其他对象(音源)产生信息的交流与互动,才能达到目标(听音乐)。

我小结一下,帮你理解交互设计的交互层。

当我们为某个事件进行交互设计时,首先要知道自己在一个什么样的事件前提下开展交互设计,而这个前提就是我所说的交互层,即用户在某个场景下,与其他对象产生信息的交流与互动,从而达到目标。

所以,在交互设计里的交互层,本质是信息的交流与互动,包含用户、目标、场景,主角是信息交流互动的双方或多方。

设计层是什么

在说交互设计的设计层之前,我们先来看「什么是设计」。

设计是把一种设想,通过合理的规划、周密的计划、通过各种感觉形式传达出来的过程。——百度百科

现在我们将上述解释放到「交互设计」里去理解。交互设计里的设计,就是在交互层的前提下,为一个事件合理的规划/计划(行为),并传达(媒介)出各种感觉(用户体验)。

所以,在交互设计里的设计层,本质是找到解决问题的手段,包括媒介和行为,主角是设计媒介和行为的设计师。

我们继续用前面的两个案例,理解交互设计的设计层。

案例1:为了完成「餐厅点餐」的交互设计,我们依据交互层这个前提,开始找到解决问题的手段,并为之设计媒介和行为。

在一些餐厅,用户还是通过纸质菜单,用口述的方式完成点餐。这里的媒介是纸质菜单和服务员,行为是口述。

在另外一些餐厅,用户用手机扫码点餐、下单、结账、评价等。这里的媒介是餐厅点餐的二维码和用户的手机,行为是用手机扫码、点餐、结账等一系列动作。

案例2:为了完成「地铁上听音乐」的交互设计,在非智能手机的时代,我们基本上是通过一个可存储的音乐播放设备和耳机完成这个目标的,那时候的媒介是播放器和耳机,行为是打开播放器播放音乐、在播放器调整音乐。

随着互联网和智能手机的普及,蓝牙传输技术的升级(aptX/LDAC等),以及用户诉求的升级和多样化,我们可以设计出更多贴近交互层(用户、目标、场景)的媒介和行为。比如音乐APP、蓝牙播放器、蓝牙耳机、线控耳机等。

此外,笔者认为:媒介和行为是相辅相成的关系,二者在交互设计的过程中会互相促进和限制。举个例子,一些带线控的蓝牙耳机自动连上手机后,按一下耳机上的播放键,就能直接启动音乐APP 开始播放了。这个「开始播放」的行为就可以设计在耳机上,而不仅仅是音乐APP里。

小结

用第一性原理,我将交互设计拆解成交互层和设计层,并结合辛向阳教授定义的交互设计5要素,得出结论:交互的本质是信息的交流与互动,由用户、目标、场景构成;设计的本质是找到解决问题的手段,由媒介、行为构成。

交互设计的本质:设计师为用户设计出在某个场景下信息交流与互动的媒介和行为,从而达成目标。

如何做好交互设计

1. 把握交互设计的行业差异化

本文从我个人的角度和经验,给大家分享了我对交互设计这个底层概念的理解,在我研究的过程中,最大的体会是,交互设计不仅仅表现在屏幕上,其实在线下场景下,同样有很多体现,比如现在热门的服务设计,我觉得它是对交互设计的场景化应用和延伸。

由此看来,交互设计会因行业和产品形态的不同,而存在差异化。拿B端产品来说,用户行为是完成某一项规范化的工作,而这项工作,往往具备行业和岗位专业性,设计师需要更好地理解行业和专业,才能贴近交互层(用户、目标、场景),设计出好的媒介和行为。

2. 具备相关思维

项目思维。交互设计师的工作往往贯穿调研、需求、设计、研发、测试等环节,我们需要把每一个设计Case 当成自己的项目一样去对待,而项目经理就是自己,充分发挥主动解决问题的意识和能力。

用户思维、产品思维、逻辑思维等。这3个思维网络上有很多解释,在这里就不赘述了。

3. 充实知识储备

点击下方标题,查看已更新的知识篇文章:

4. 提升专业技能和底层能力

《从今天起培养这5个好习惯,让你在 2019 年快速成长!》

写在最后

本文从构思到写完,断断续续有1个多月了,总希望找到一个合适的方式去解读交互设计,把这个概念说明白,但事实是越研究越觉得复杂,我需要了解的还有很多。

所以,我写这篇文章的目的不仅仅是分享我对交互设计的浅见,还希望用「第一性原理」这个拆解、分析、解决问题的思维方式,去研究「什么是交互设计」这个问题。

交互设计这个概念或领域,远比我写的要复杂和深入,我在研究「交互设计」路上才刚起步,希望能与读者朋友一起交流这个话题。

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

商业化思维:如何创造价值,驱动产品/业务运转?

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

商业化思维的本质就是:创造价值,通过为客户创造价值和交换价值来驱动产品以及业务的运转。那么,如何为用户创造价值和交换价值呢?价值属性会跟着用户属性的不同而产生变化,所以,在探究这个问题之前,要根据将用户划分为不同的群体,再从不同的方面着手。

商业化思维这个字眼乍看上去很高大上,确实往大了说,商业化思维可以套用到各种宏观微观的商业模式当中。但我们的目的是让商业化思维能够成为一个活动运营真正日常可用的能力项,所以我们对这个部分要解读的商业化思维的定义稍微做一些边界设定。

——基于商业化思维的本质:创造价值。

我们将探讨:如何通过创造价值去驱动一个产品/业务?

通过创造价值驱动产品/业务运转是一种完全不同于体验驱动(也就是产品思维)的模式,也是绝大部分互联网从业者少有接触的(电商&广告类的业务接触可能较多一些),能够综合使用价值驱动和体验驱动来帮助你策划一个业务形态,就会极大拓展你的思路(比如:你能够策划出趣头条类似的广告费转移为用户成本的模式)。

同时,也能够朝着我们的核心目的:让一个业务叫座又叫好去演进。

再次回顾一下产品思维和商业化思维模式的概念:

  • 体验驱动(产品思维):如何让用户使用便捷、有趣、解决用户的某种问题和需求?
  • 价值驱动(商业化思维):如何为用户/客户创造价值和交换价值?

用户/客户分类

那么如何为用户创造和交换价值?

价值属性是跟着用户属性在变化的,要探讨如何创造和交换价值,我们需要先对用户/客户做一个分类:

C用户:个人用户。

  • 素人用户:就是最普通的个体用户,看新闻的、买东西的、薅羊毛的、刷视频的普通大众们。
  • 达人用户:依赖一些内容平台生存的,往往以创造内容换取价值的内容生产者角色。

B用户:机构/商家/团体等任何非个人用户。

  • 职业经理人B用户:一般是大企业/机构里的业务负责人/对接人,他们并不在意公司的业绩,主要在意的是领导的认可。
  • 生意人B用户:一般是小企业/个人店铺的直接负责人或者就是老板本人,整虚的对他们从来没有用,他们只想要赚钱。

一般互联网的各种业务形态,会面对的用户种类基本上就是以上四种,代表着完全不同的四种价值诉求。

我们对这四种角色分别进行价值创造以及交换的理解和研究,就能够帮助你在业务规划当中,真正有效的运用到商业化思维。

当然这只是商业化思维最基础的入门,感兴趣的可以基于这个原理再深入研究。

C用户——素人用户的价值

在面对素人用户的时候,商业化思维主导的用户价值和产品化思维主导的用户价值有一些交叉和模糊的地带,为了便于理解和明确另外一种思维模式,我们相对粗暴的定义商业化思维的价值更多在于“创造”,区别于产品化思维的“满足”。

怎么理解呢?

用户有购物的需求,打造一个电商购物产品属于“满足”需求。而在购物需求满足之后,我们让用户去进行商品分享,通过用户分享进来的订单我们给予一定的分拥,这就“创造”了额外的赚钱的价值,可以交换用户社交关系链曝光的价值。

当然,实际并没有这么明确的区分,用户购物本身也是一种商业行为,商品的品牌溢价、促销手段(买三减一)等也都可以归类为价值创造的范畴。不过,这个不重要,我们关键要理解的是创造价值的思维模式。

常见的可以额外创造的素人用户价值:赚钱、省钱、炫耀、情感共鸣等不属于用户刚性需求(购物,变美,解决问题)的这类可以额外创造的价值。

而常见的你可以置换的用户价值:额外的成本付出、用户的个人关系链(自主推广)、用户的时间、用户的内容创造等。

商业化思维在素人用户部分,提供一种截然不同的业务策划模式:并不是考虑用户的需求是什么,然后针对性的策划一个产品。而是先思考你想要交换的用户价值是什么,然后,思考你如何创造额外的价值可以有效的置换到用户的价值。

在这个思维模式下,我们并不以体验和操作为优先去考虑业务形态,用户付诸成本是核心考虑因素,成本小于价值这个业务模式就有效,反之则无效。

这个思维模式也解释了:为什么很多体验优秀的产品就是没有用户愿意去使用?

目前业内新兴的一些社交产品拥有比微信更优秀的体验,但是产品在社交上创造的额外价值并没有大过用户的关系链迁移成本(想要去交换的价值)。而一些价值巨大但体验糟糕的产品用户还是愿意一遍又一遍的尝试想要成功走通——一个分佣50%的商品,再复杂的操作用户也愿意去钻研和使用。

当然,通过成本-价值的模式去思考和规划业务模型,并不妨碍我们同步去进行产品体验的完善,以帮助进一步减少用户在操作上付诸的成本。

商业化思维在业务中的一种典型运用场景,基于一个明确的用户价值交换业务目的,我们进行价值交换过程的建立,以找到合适的业务模式。

例如:我们希望用户能够主动进行分享(而这个过程往往基于已经满足了用户基本需求的状态上,比如说一个电商网站用户已经完成了购物,但是我们还想要额外榨干用户的价值),贡献他们的社交关系链价值。

首先,我们需要进行的思考是:用户进行分享需要付诸的成本是什么?

——分享到朋友圈后造成的个人形象影响,思考和检索适合的分享对象的成本,分享动作的操作成本(可以通过体验优化极大降低)。

那么思考,基于业务特性,我们能够提供给用户合适的交换价值是什么?

——可以通过和商家分摊成本的额外现金激励?基于稀缺或者高价产品的炫耀内容?或是商品本身附带的情感属性?明确的定义清楚这个具体的价值是什么。

然后完整的对比,你创造的额外价值是否大于综合成本,当然这个对比不是一个绝对的数学对比过程,还掺杂了很多主观因素。

所以,一定程度的用户调研或者简单一些的自我洞察能够帮助你得出有效的结论。如果做不到价值大于成本,那么这个业务就是不成立的。其实这个思维模式的逻辑是显而易见的,但又往往被忽略。所以,很多分享10元满减优惠券的策划被创造出来,而根本没有人思考过10元满减优惠券的价值其实远远低于我分享到朋友圈的成本。

琢磨一下以上的过程,是不是提供了一种全新的思路。帮助你的不仅是简单的思考“我想让用户做什么,所以理所当然的策划一个产品去引导用户”,而是真正的考虑清楚业务是否成立的根基,然后再从容不迫的去优化体验。

时刻保持“成本-价值交换”的思维模式,不仅能够帮助你打造有效的价值交换业务形态,还有一个非常有用的场景。

基于一个明确的用户诉求,我们进行价值交换过程的分析,以找到业务的关键点。

我们还是用电商业务场景来举例:在电商场景中,用户付诸的最大成本是金钱,而购物操作的成本实际上优先级并不靠前。用户在价值交换过程中最优先的价值是:“买到想要的东西”和“足够的划算”。

所以,在电商业务的重点一定是:提供更丰富的商品库和更优惠的价格,能够极大提升价值的含金量。

而优化购物操作体验,页面动线逻辑等是其次的,可以一定程度减少用户成本但解决不了价值不足的问题。

这也解释了:为什么一个创造了诸多优秀产品(常规产品主要面对的用户成本确实是操作成本,而价值是比较单一明确的,例如邮箱)的大厂投入了诸多心血打磨产品体验但最终还是在电商战场战败了?

一个擅长做价值交换的电商大厂在一个社交产品(用户的主要价值是社交,成本是难以独立完成的关系链迁移)上投入了大量的推广资源和利益诱导确留不下用户。

你看,大家都在说的基因的本质问题,其实本质并不复杂。当然大厂的成败并不只取决于思路的差异,还有历史以来积累的资源类型和用户心智,这些也都是基因的构成部分。

我们也不需要操心这么多,学会运用这个新的思路足以在业务策划中帮助自己抓住真正的重点。

C用户——达人用户的价值

首先明确我们这里所讨论的达人用户,并不是普通用户当中乐于分享和创造低质量内容的那群人(当然也有高质量的但并不普遍),而是以内容生产为职业,创造真正专业有价值内容,能够构成你的平台核心竞争力的那群人。

区别于普通用户,我们希望置换的达人用户价值是比较高的,平台依赖这些达人用户去不断供给符合平台导向的优质内容,而内容生产的成本极大,也就需要更大的价值来进行置换。
达人用户常见价值诉求:变现、曝光、独特的内容生产能力、有效的粉丝互动和管理能力。

达人用户需要付诸的成本:内容生产成本。

基于创造价值大于成本的逻辑,要打造优秀的面相达人用户的业务,就可以从几个方面着手(增加提供的价值):

提供足够价值的变现能力:

专业的达人往往以此生存,和普通用户一样的分佣价值只能作为额外的补充价值,并不能达到达人的标准。

所以,如果你的业务希望依靠变现价值来让达人自发留下,那么你需要考虑的核心问题和需要寻找打造的案例就是:有没有达人可以在你的平台赚钱养活自己。

当然如果没有内容独家协议的限制,达人可以依靠多平台存活,对你的要求就不会那么高,但变现的价值也一定是生存级别的(几千元)而不是福利级别的(几百元甚至以下)。达不到这个标准,你的业务逻辑确实就不成立。

提供足够多的曝光量级:

当然这个和你的用户规模以及流量分配机制有关,需要考虑的问题是:你给的曝光是不是有效的曝光?你的达人用户能否有效的把曝光转化为强关系的粉丝,或者是个人品牌认知用户?

这个目的达不到只是粗暴的给曝光并没有用(例如:很多内容平台会找我要稿子,一些平台只会放作者名字而不愿意曝光作者个人公众号,我就非常抗拒为他们提供稿件)。

很多冷启动的业务面对的是达人内容量级和用户量级循环驱动增长的问题,在这个逻辑下一定程度的达人内容补贴是常用的手段。但不能偏离的是,你的激励要做用户这个循环,要求仍然是激活的内容一定要对用户有价值而不只是凑数,达人的补贴规模也要达到生存级别。

提供独有的内容生产能力(生产素材):

或者说独特的有效的粉丝互动管理能力等产品层面的价值也是一种办法。但说实话国内互联网KOL行业发展多年已成定局,大的MCN机构已经垄断了大的流量和真正专业的内容生产者,平台迁移成本极低;大流量主产品能力的抄袭门槛又不算高。

所以,除非你能纯粹的全面培养素人成为达人,否则这类型的手段可能只作为补充,要真的撬动达人价值还是要回归到以上两个点。

降低创作的成本:

当你的产品不足以让一个达人在这里养活自己,那么你可能就很难得到独家的内容。

要让达人愿意在你这里搬迁内容或者一定程度的定制创作,可走的路就只有尽量减少内容生产的成本——快速搬迁,极低门槛的排版能力,和行业通用规则一致的产品形态等等。

接下来,我们看一下另外一个截然不同的面对B客户的领域。

B客户相比于C客户,目的更加明确,愿意投入更大的成本交换更大的价值。在B的领域,商业化思维的主导就更加明确,价值的创造和交换成为了唯一的话题,产品体验起到的作用微乎其微,除非你提供的价值本身就是产品的体验(比如说:一些企业服务工具)。

B客户——生意人价值

要理解生意人B的价值诉求,先从一个个人经历的故事开始:

曾经牵头过一个面向B商家服务的工具平台,商家支付费用使用工具和流量等整合的服务。

在工具平台搭建的早起,我们以非常产品导向的思维进行了规划,重点考虑的是工具的各种功能、平台使用体验、对平台的流量等价值贡献等问题,设定了工具平台的点击率、跳转率、转化率等关键考核指标,在这些导向下不断的去优化工具平台。

然后,我们召开了第一次的商家推广大会,准备了精美的PPT,详尽的介绍了工具平台各种先进的能力,复杂的逻辑和优秀的体验,其华丽程度首先把我们自己都感动了。

但是,现场反应平平,几乎所有商家全程都在玩手机,似乎对我们精彩的演讲丝毫不感兴趣。

会后我们找到几个资深的商家咨询了原因,其中一句关键的点播对我们产生了至关重要的影响:

“我们只想知道在你这里能不能赚钱,投入多少回报多少,流量成本吧如何,比其他平台有没有优势。其他的真的不太在意。”

这一句话真正引起了我们关于“什么是商业化?”“怎么样才叫做生意?”的思考。

面对着实打实要和你做生意的商家,一切形式化的虚无的东西都没有任何意义,只有唯一关键的话题:赚钱(当然不同的业务模式又有其他的一些核心价值例如获客等但逻辑都是可以套用的)。

回去以后我们快速调整了整个业务的导向,弱化了所有关于体验的考核指标——点击率,转化率(还要保留的原因是:这个产品还涉及到C端的用户体验),而把一切涉及到投入产出,能不能挣钱的指标——流量成本,拉新成本,费用的投入产出比,作为主要的考核导向来指导所有的工作方向。

至此为起点,这个产品开始真正的在市场上迎来了爆发,每一次宣讲会后(新的宣讲会我们只强调投入产出效果)开放的名额都被一抢而空。

以上的故事即是我对与生意人B合作的商业化思维理解:剥离掉生意场各种复杂的规则和概念,要撬动生意人B的投入,实际上也是在和他们做生意。能不能帮他们赚钱是唯一应该考虑的问题。任何经过包装的,浮夸的,虚无的内容在真实的投入产出效果下都没有任何意义。

B客户——职业经理人价值

当你合作的对象从一个想要赚钱的生意人变成了一个大公司内部的职业经理人,你将面对的价值又从单纯的赚钱变成了更复杂的职业经理人价值。

一个职业经理人心里在意的价值第一优先级,并不是帮助公司更多的盈利和获取价值(虽然这个理念并不道德但这是现状你不得不面对),而是他在和领导汇报这次合作价值的时候是否能得到认可。

所以,面对职业经理人这样的B端客户,并不能仅仅考虑实现业务目标,你还需要从他的角度考虑:能否过让这次的合作有更多的标杆价值、项目意义能够挖掘和包装出来,以帮助他形成一个漂亮的汇报文件。

所以,和B端客户做生意,需要更多讲故事的能力。除了业务目标的承诺外,你还能够在方面销售合作谈判的时候,能够完整的描述出:未来他在做汇报时候能够拿到的完美的报告是什么样子的?

以此去考虑:你在一开始要销售方案应该如何设计?业务应该增加哪些模块?合作应该提供哪些支持?就能够更好的帮助你搞定一个职业经理人的客户。

以上便是基于活动运营应该掌握的最基本的一些商业化思维业务运用介绍,除了常规的运用外,更重要的还是要强调互联网非技术工种人员应该都要具备“创造体验”和“创造价值”两种思维模式,能够真的帮助你创造出叫好又叫座的策划。

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

为什么你的设计改了又改?这4个方法帮你一稿过

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

大多数设计师在实际工作中,经常会碰到设计稿改来改去,改得焦头烂额,甚至怀疑自己的设计水平,这是为什么呢?又有什么解决的方法?这篇文章为你答疑解惑。

「设计」这一门工种,似乎是永远避免不了「改稿」这一环节的,即便是非常顶尖的设计师,不为甲方不为外部原因所妥协,也会在自我实践中寻求改变。但是,「改设计」也未必是越改越好,如果沟通不当,也会存在越改越糟的结果。所以,作为设计师,一方面我们要吸取不同的意见,另一方面也要全面提升自己的知识架构、坚守自己的原则。

接下来以「UI设计」为例,剖析我们日常工作中「改了又改」的问题。在实际工作中,UI设计师通常会面临来自老板、产品、运营、开发等各方人员的意见,也常常会因为字体的粗细、间距的大小、颜色的选择等等问题各执一词、争论不休,就像下图一样:

为什么会这样呢?其实,在UI设计中,频繁改稿主要存在三种情况:

  • 第一种:在与产品经理需求对接的时候沟通不到位导致理解有偏差,产生方向性错误,这是信息传递的问题;
  • 第二种:设计师经验不足、设计能力有限导致产品经理的需求得不到最佳程度的实现,这是UI设计师本身的问题;
  • 第三种:UI都已经做到一半或者已经输出了,产品需求又变动了,这是产品经理或老板的需求不确定的问题。

针对以上问题,在实际项目中怎样避免陷入频繁改稿的死循环,从而提高工作效率、推动项目进展,提升自己作为设计师的成就感呢?

认清工作流,保持全方位的沟通

首先我们来了解一下UI设计的工作流,只有清楚自己岗位的流程,才能更好地拿捏设计。每个公司的类型和规模可能都不太一样,但基本一致,无非就是5个阶段:需求 – 设计 – 开发 – 测试 – 上线。如果按职位划分就是:产品经理 – 交互设计师 – UI设计师 – 前后端开发工程师 – 测试人员 – 产品上线。

所以我们UI设计师是处于流水线中游的状态,向上对接产品,向下对接开发。在这个流程中,要做到减少设计修改的频率:

向上要明确产品经理的需求,将原型需求准确恰当的视觉化;

向下要考虑开发实现以及时间成本,因为如果一个设计做的非常绚丽,但是开发实现不出来或者很难实现或者实现的时间成本很大,那么肯定需要对设计方案做出调整,采纳折中方案。

所以,不想让自己的设计改了又改,那么一定要全方位的多沟通,一定不要「闭门造车」。

确定需求,吃透交互原型

UI设计师接到产品原型后,一定要弄清这几点,再开始设计:

1. 原型是否确定,会不会存在变动?

我们在接收到产品经理递交过来的交互原型稿之后,先和对方确定收到的需求是否完整,是否是最终稿件以及是否会存在变动。一般来讲,在大型企业里面流程都比较规范,产品经理输出最终原型之后,后期变动的可能性较低。但在中小型企业,通常因为项目时间紧张,流程不够完善,反复的可能性较多。一些大型需求,产品经理有可能会分模块、一部分一小点的流转到UI设计,这样存在的问题隐患比较多,因为经验较少的产品经理全局概念较差,虽然口头上说这一部分的需求已经完善了,实际上当所有需求汇总之后极有可能需要再次调整。所以作为UI设计师,我们尽可能不要去接局部输出的原型,需要再次确认无误后,我们再着手设计,这样就避免了原型需求的变动造成设计的变动。

还有一点,在产品经理给到交互原型时,我们是被动的接受,还是在需求沟通之中也能及时参与呢?最好在产品需求的评审阶段,对应的UI设计师可以积极参与讨论,一起沟通。一来可以熟悉产品思考的整个过程,二来可以在原型的沟通中站在设计的角度及时发现问题,提出建议,避免在原型定稿后再去修改的尴尬。

2. 项目的时间周期

在接到产品的原型后,一定要及时确认项目的时间周期,通常产品经理会主动告知项目的周期,询问UI设计完成时间,我们根据需求的复杂程度给出UI输出的预计时间,再根据这个时间节点来划分每一天完成的工作量。如果产品经理给的时间周期比较短,那么尽可能的阐述原因申请设计时间。如果时间过于仓促的话,设计思考的时间就少,考虑的问题很难全面,不利于界面效果的最佳呈现,导致后续改稿的可能性也很大。

3. 理清设计意图,处理好信息层级

接到产品原型,一定要理清设计意图,处理好信息层级。

当产品经理递交给我们确定的需求原型之后,切莫盲目开始设计,UI设计并不是把原型框架进行简单的排列,我们需要理清设计意图,熟悉功能架构、掌握交互逻辑,明白产品经理想要解决什么问题,达到什么程度以及具体的设计方向。

信息层级这个问题,好像我们在实际工作中经常会提起,但是要做到恰如其分的标准还是有点难度的。准确把握界面的信息层级还需要跟产品经理多方面的沟通,因为有些时候我们以为的,并不是产品想要的,所以一定要多次确认,才能精准把握。

△ 上图左侧是lofter首页列表,右侧是我统一梳理层级关系之后的效果

改动的重点:

  • 将配图采用四周留白的卡片式布局,让界面更通透,增强呼吸感,视觉焦点更为集中;
  • 优化标题与标签话题的展现形式,通过文字大小及字色深浅拉开主题文字与话题标签的层级关系;
  • 将热度与喜欢、评论、转发的实时数量跟随图标后面,增加用户参与的积极性。

多个设计稿比较,让每一处设计有理有据

在实际设计过程中,当碰到一个设计模块拿捏不准的时候,可以在 sketch 或者 ps 中建立多个画板,将几种不同的设计方案平铺展开,进行视觉对比分析。如果自己拿不准,可以叫组员或者其他部门的「小白」来进行选择投票或者提出改善性建议。不要小看「小白」,不要觉得他们不懂设计,提的建议对设计无用。其实不然,我们的设计最终目的是给人用的,而且要好用,所以一定要多结合小白用户的多方面意见,才能让自己的设计更经得起推敲。

上图为笔者在处理个人中心界面效果拿捏不准的时候,布局了多个效果进行对比,通过对比的呈现后,就可以清晰判断每一个界面存在的问题。

另外,UI设计中,不要停留于表面,不要用「好看或不好看」去做简单评断,在设计过程中我们的界面布局、颜色把控、字符间距、icon设置等多方面都要经得起推敲:为什么这样设计?换一种设计合不合适?

只有让每一处设计都有理论的支撑,深思熟虑后,才会让设计更切实际,才能让人信服,才能实现产品指数的增长,也更能体现设计师的价值。

以产品为核心,尊重各方立场

当设计稿出来之后,一般会组织 UI评审,UI设计师一定要将自己的设计理念表达清楚,将设计中考究的观点输送给参与评审的各方人员,这样会让你的设计更有信服力。如果在评审过程中,产品、运营或开发对设计稿提出不同的意见,我们首先不要急于否定,要确定立场:大家都是以产品为核心去思考问题,也不要人云亦云,要清楚他们为什么会提出这个意见,是不是自己的设计哪里没有展现好?即便对方的建议本身没有可取性,那么你也要站在你的视角用你的观点解释给对方听。这决定于每个设计师的自身知识架构和理论支撑,所以一定要让自己不停地吸收,才能让自己的设计更经得起推敲。

以上是我在实际工作中的一些比较浅薄的总结,如有阐述不周的地方大家可以相互探讨。

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

字体用的好,感觉不会少!

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在设计中,字体的样式往往起到辅助文案传递的作用,所以如何在不同的设计风格中用好字体尤为重要。字体如果用得好,在设计中常常会给读者所需要的感觉,这里我们例举几种常见的感觉:


目录

1.「注」入重量感

2.「空」出高级感

3.「圆」有亲近感

4.「装」出华丽感

5.「质」换画面感

6.「写」出文艺感

Image title

一.「注」入重量感

突出重量感是大多数设计师常用的技巧,在设计中,为了提高文案或者标题的视觉层级,很多设计师往往会从字体的重量感进行思考,给字体注入内容往往能加大字体视觉重量,字体的重量感也就是版面中的“存在感”,“存在感”一旦提高,视觉层级也伴随着提高。


一般我们在突出字体重量感的方法上常常会选择线条较粗的字体、加大描边或者设计成立体字来突出“重量”,甚至可以缩小字体间距,营造紧张的感觉,使文字更具“重量"。另外在颜色上,黑色物品相对于浅色物品在视觉上显得更重,这一点在字体上也同样适用的。

Image title

二.「空」出高级感

字体的高级感一般体现在品等产品的设计上,利用大量的留白,在字体的颜色上尽量选择近乎无彩色如灰色,做到简洁大方、少即是多。而在字体类型的选择上,衬线体往往比非衬线体更具有格调,宋体往往比黑体更加高雅,利用传统字体也能给读者一种信赖感。


看到这里也许有人会说:“从用户体验角度思考应该使用非衬线体,因为其更易读、字形更简洁。”而在《设计师要懂心理学》一书中表明研究发现:常规的衬线体和非衬线体两者在理解难易度、阅读速度和使用倾向并无差异。

Image title

三.「圆」有亲近感

字体所展示出的亲近感主要体现在于字体端角的圆滑上,先从生活常见的例子讲起,在人类的常识里尖锐的物品往往会给人冰冷、危险和难以靠近的感觉,而圆滑的东西往往让人有亲近感,更利于吸引读者接近。这里最形象的例子要数按钮和图标的演变,按钮和图标的设计从直角到圆角的演变,其中不乏也有以上原因。


在突出亲近感时,圆角类型的字体所表达的感觉如果还不够强烈,这里不妨可以选用较粗的线条字体再加上暖色系的颜色,这样亲近感就更加强烈了。

Image title

四.「装」出华丽感

一般文字是用于阅读,而为了博人眼球,设计师也慢慢让文字字体有了装饰,利用线条的不规则粗细来突出文字的“美”,从而体现出华丽感,华丽感较强的字体大多数用于女性品牌的产品,装饰性高的文字,不仅引人注目的效果,还能强调了产品的“贵”。要注意的是修饰性的文字不利于阅读,不适合大量文字,容易视觉疲劳。

Image title

五.「质」换画面感

材质感的字体往往用在游戏的设计上比较多,将武器或游戏场景等有质感的东西贴在字体上,间接展示游戏场景、风格等。因此,运用材质的字体往往更具有画面感,从而影响读者视觉对大脑的影响,产生了身临其境的感觉,于是在脑海中留下对产品认知。


质感的字体往往容易让人感觉到“力量”,这也和第一点注入内容说法一样。

Image title

六.「写」出文艺感

手写的字体,会让读者感觉到手的温暖与肤触的温柔,这里被利用到的应该算淘宝商家的感谢信了,利用牛皮纸加上手写字体,可谓是为了好评诚意满满。


手写的字体还常常与手绘贴图一起出现在手帐本,或可爱优雅、或呆萌粗线条;另外,你或许还能在文艺菜单上看到它,朴实无华却清晰温暖,文艺感十足。

Image title

后言 

没有最好的字体,只有合适的字体,字体的难度并不在于设计和选择上,而是在于你选择或设计的字体给读者的感觉是否符合产品所想表达的亦或是读者所需要的。


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

 

拨动情绪的内容设计

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

短视频产品成为年轻用户社交娱乐的主场景,QQ在短视频社交的耕耘过程中,打造了丰富的发表能力,让用户更方便的记录生活精彩瞬间,同时也更方便的与好友互动,今天我们对设计过程进行复盘,将过程难点与设计思路从能力建构、设计切入、设计亮点引入、设计亮点深挖简述供各位参考。

Image title



二 发表能力建构

————————

同质化竞争突围


发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈,建构了除了拍摄以外,轻量主观表达的文字视频,不受时空与题材影响发表动机的影集,勾引起共同参与及话题的游戏,最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够,以解决发表量与观看量不对等的问题,在小游戏与问答等发表方式,除了可以营造社交场景以外,创新的玩法也能与竞品拉开差异,在众多的短视频产品中具有自身的特色。

Image title


然而单纯的发表能力差异容易被模仿,能够保持自身优势与特色的时间十分短暂,建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感,举个例子,前段时间笔者至上海出差数日,意料之外的一份小礼物却促使我成为该酒店的常客,这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。


Image title



三 设计切入角度

————————

建立情感连接,是视频设计“双面性”的一面


参考诺曼的理论,情感化设计分为本能,行为,反思三个层面。在打造视频制作工具的过程中,满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求,可以参照过去设计工具的手法,保证架构流程界面反馈每一环节的使用效能和低理解成本,而反思的范畴则与内容相关。为制作视频内容而设计,需要将用户的经验,喜好,文化转化成特殊符号,以触及情感连结最重要的反思环节。


Image title


用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段,若在每个阶段都能与用户保持情感连接,必能逐步加深用户印象,达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点,制定相应设计策略和方案,从而达到此目的。




四 设计亮点引入

————————

唤起情感,拉近与用户的距离


为了让用户更主动的发表相册视频,QQ团队在影集发表模块上规划了智能相册的能力,借助用户回忆塑造超级符号,把用户的亲身经历与产品功能建立联系,提高使用意愿。在影集的引导步骤中,寻找合宜的契机,把零散的照片按特定线索重新组织,经过精心包装以回忆墙的方式重新呈现给用户。

影集功能的重新包装:

Image title



4.1 场景搭建


QQ经授权后访问用户相册,沿时间和位置线索用聚类算法对照片归类,产生与特定场景关联的照片组,再用图像识别技术从照片组中精选特定n张合成视频,为后续情绪升级埋下基础。

Image title



4.2 意境传达


为视频搭配转场音乐是主要增色手段。

转场效果设计要以情绪传达为目的,过渡动画和快慢节奏的灵活搭配打造大片质感,叠加细节让画面生动不僵硬。

Image title


Image title


在配乐标准上,我们基于用户习惯推导,明晰场景+节奏的音乐选择维度。


Image title


转场和音乐的挑选需贴合场景特征。在“聚会”场景中,设计师选用翻转重组的效果传递欢快愉悦氛围,曝光和光晕细节可以模拟真实光影效果。“往年今日”则表现出安静氛围,沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛,涟漪波动仿若时光倒流。


Image title


4.3 捕捉时机,宣传专属回忆


在信息架构层的设计使用卡片横滑的方式,一方面可以暗喻时光隧道,另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。

Image title


4.4 案例回顾


我们采用情感符号引导发表的策略,得到数据的支撑,影集发表总量和发表转化率均有明显提升。经过市场横向对比,QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。



五 设计亮点深挖

————————

打造情感体验峰值,强化用户印象


在任何体验中,都应该重视体验过程中的情感峰值,如同丹尼尔卡曼说,体验产品时能够被记住的只有峰值与终值的体验,我们在智能相册的环节之中建立起与用户情感上的链结,而链结后的情感峰值,则选择在发表成本最高发表频率的文字视频中深挖,让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。


5.1 过程颇折


文字视频上线后发现用户发表意愿未达预期,症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路,

1 降低理解成本,体验对齐于常见动态发表界面。

2 支持自定义背景,用带场景暗示的背景烘托情绪氛围。对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作,是为更佳方案。


文字视频的初期方案和优化方向:

Image title



5.2 策略制定


QQ团队基于对用户发表场景统计,确定以传达心情和高频发表时间点为线索,策略制定是考虑到既要与用户表达有耦合但不能具体有所指。

Image title




5.3 意境传达


背景模版设计有以下原则:

1 界限分明,背景效果不要干扰主体信息。

Image title


2 意象与认知相符,有情理之中意料之外的惊喜,引起用户好奇心。

Image title


3 表义避免太具象。抽象表达腾出更大想象空间,让用户创意不受缚于环境。

Image title


以下是全部模版效果展示。

Image title

Image title


5.4 案例回顾


经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点,后续团队结合运营策略,在特殊节日或特殊事件前更新模版可以持续刺激拉升文字视频发表量,该策略的运用屡建奇效。




六 总结心得

————————

设计经验


产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备,产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值,加深印象。成熟期创造互动机会,让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进,在用户心理推波助澜。


Image title

好设计是能影响用户非理性,改变情绪最终影响他的行为。设计的高境界在于只影响不明说,用户不需要领会设计意图,但情绪已经被感染了,在情绪的作用下,按照设计者预定的轨迹,自然做出选择。


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

在这些大师身上,我找到了非凡创意诞生的原因

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

我们的文化中会将大师们捧上天,凸显他们和常人差别最大的那个部分。大师当然是有属于他们的秘诀的,可是他们的成功同样植根于他们生而为人的烟火气。从一个人的视角来解读大师,在崇敬的同时,我们也应当对自己有信心——他们已经替我们走出了一条,可供参考的道路。

创造力是我们每个人与生俱来的,我们天生就是创造者。人人都可以创造,而且大多数人都以不同方式进行着创造。毫无疑问,创造新事物时,我们是最快乐的。

不幸的是,许多人会找借口不去创造,比如:「我没有足够的创造力或天赋。」这是不对的。在重新审视简·奥斯汀(Jane Austin)、毕加索(Picasso)、爱迪生(Edison)、蒂凡尼(Tiffany)和丘吉尔(Churchill)等著名人物的经历之后,我意识到,创造力和我们常说的天赋,只是勇气和不懈努力的副产物。

每个人都是有创造力的。众生平等,人人皆可创造。个体性和独立性只是用来发掘和完善内心世界的。因此我们每个人都是有创造力的。

正如我在上文中提到的,勇气是与创造力和创新直接相关的。对此 Paul Johnson 赋予了最好的定义:

创意往往反映出巨大的勇气,尤其是当艺术家不向最终的敌人——年龄或衰老,低头的时候。

我开始探索,我想知道创造力是什么。为什么有些人能够通过他们的创造改变历史的进程?是什么引导他们创造?他们的工作背后有什么秘诀吗?为什么有的人名垂青史而另一些则不然?

最终我发现了一个残酷的事实——以创造为事业的人每天都在不知不觉中辛苦工作,而且前途未卜。正如约翰逊所写的,你必须能够战胜时间和任何可能出现的身体缺陷。比如贝多芬不得不和他的听觉缺陷作斗争;爱迪生失败了几千次才发明出最后的灯泡;瓦格纳生活贫困,经常向人要钱;艾米丽·狄金森从不顾及公众的态度,无论是鼓励或批评,始终独自一人写诗。

在我致力于研究不同性格的人的时候,最让我惊讶的是每个创作者总是在前人的基础上创作。没有人凭空创造出好作品,而这打破了我一直以来所持有的刻板印象。

所以让我们深入研读一下创造者们的经历,看看他们是如何工作的,让他们如此特别的秘密,就在其中。

毕加索:绘画第一,咖啡第二

「如果我没有足够的天赋,又有很多竞争对手,那么我将每天创作一幅画,直到让世人知道我是活着的最伟大的画家。」这无疑是毕加索踏上成为历史上最成功的艺术家的道路时,一直秉持的信条之一。

毕加索出生于西班牙的马拉加,仅有的绘画启蒙知识是由他的父亲传授的。至于其他方面,我们可以很容易地说毕加索是自学成才、自我推销,在他所居住城市的街道上接受教育的。从很小的时候起,他就一直密切关注着市场,因此他总能知道什么才是可以卖出去的。

不同于等待灵感的到来,找寻上帝赋予才华的人们,毕加索每天都在创作。他的工作原则是速度胜于准确和努力。他是我们所知道的最不安分、最具实验性的创造者之一。他做的每件事都必须尽快完成,不会对作品精雕细琢。

毕加索做过许多工作。除了绘画,他还做雕塑、面具。无论是在画布上、纸上,石头上,陶瓷上还是在金属上,他都是卓越的艺术大师。对他来说,没有任何物质障碍。他是一个绝对的实验主义者,每十年都会改变他的风格,对于颠覆从前的自己从不畏惧。

他还设计过海报、标志、广告、戏剧服装和服装。毕加索离世前留下了超过3万件作品,这是有来源的(catalogue raisonne – 1932-1978)。毕加索是一个有数量观念、强烈的职业道德和实验精神的人。

温斯顿·丘吉尔:终生写作

也许你不会想到这份名单上会出现这位政坛人物,但我这样做是有充分理由的。他是一位首相,二战后他在历史上赢得了一席之地,但他确实值得被列入名单,因为他也是一位画家和文字大师。

丘吉尔是如何开始写作的?父亲离世后,丘吉尔悲痛万分。他觉得丧失了自我,也失去了内心的平静。因此,他决定写一本完整的传记献给他的父亲。在那之后,他发现了自己对文字的热爱和激情。丘吉尔不知道什么是创造力,他只知道「努力工作」这几个字。

温斯顿日以继夜地工作。感谢上帝,他很好,只有在8小时睡眠不足的情况下才会感到疲倦。——丘吉尔的妻子 Clementine Churchill

很少有人知道丘吉尔一生中写作超过1000万字。这其中包括他的演讲稿、书籍和文章。这种写作量比任何作家写的都多。他从小就有写下所有他感兴趣或参与之事的习惯。

他不仅练就了写作技能,而且还从中赚钱。每次他去不同的国家,或者参与一场战争,他都会写相关的文章卖给报纸或期刊。他写了三本关于二战的书,共有约200万字,是关于那个时期覆盖范围最广、最有价值的资料之一。

语言是唯一不会消亡的东西。——温斯顿·丘吉尔

当他不写作、不娱乐、不与政治斗争时,他就画画。他发现画不仅可以作为爱好,而且可以成为面对困境时的避风港。因为画画的时候你要保持心无旁骛,这样便可以放松你的大脑。

他从不逃避艰苦的工作,相反,他竭尽全力地工作:议会、行政、地缘政治、写作、绘画、建造田园诗般的房屋和花园。丘吉尔自命不凡,他的创造力流淌在他的血液中。他希望自己所见的一切,都能亲自动手实现,这就是他有别于他那个时代的其他人的特质。

克里斯托巴尔·巴伦西亚加:不见天日地工作

在所有创意大师中,克里斯托巴尔·巴伦西亚加是最专注于创造美好事物的创造者。工作渗透了他生活的方方面面,他将自己全部的精力交付于工作。

作为著名品牌巴黎世家的创始人,他是怎么进入时尚圈的?三岁时他参加了一个缝纫班,他对此表现出极大的热情。在接下来的74年里,他的缝纫技术炉火纯青。在他的余生中,他每天都要做一件针线活以保持手的灵活度。他是当时唯一一个在服装设计上独当一面的设计师,他做过缝纫、剪裁、选料等一切与制衣相关的工作。他唯一不会做的事就是画画,需要助理代为完成。

他的工作量巨大,整日都待在工作室里。以至于人们一度认为「克里斯托巴尔·巴伦西亚加」是一个假名,也许并无其人。几乎没有人采访过他或是见过他,也几乎没有他的照片。他从不参加社交活动,除了和一两个老朋友相聚外,他很少出去吃饭。

这一切都使他得以专注于创作能永远流传的作品。他孜孜不倦地工作和创造。这就是为什么现在几乎没有设计师能够创造出像他在上世纪五六十年代那样的创作作品,这些作品正如同其他人所说的——那都是馆藏级的作品。

他工作非常努力。巴黎世家每个系列都有200-250个设计,所有这些都是他自己完成的,因为他几乎不信任任何助手。他甚至拒绝了年轻有为的纪梵希(Hubert de Givenchy)的帮助。

从他三岁到生命的最后几天,他每天都努力工作。在上世纪60年代最艰难的时期,他停止了工作,因为心脏病发作,大师最终离世而去。

蒂芙尼:玻璃之心

路易斯·康福特·蒂芙尼痴迷于用玻璃制作窗户和灯具,并以玻璃进行珠宝创作。他的父亲查尔斯·路易斯·蒂凡尼(Charles Lewis Tiffany)生于1812年,1837年在纽约开了一家商店,销售文具和精美的器皿。他似乎继承了他父亲的品味,把平凡与非凡融合在一起。

蒂芙尼是一位真正的创造者,他勇于尝试,乐于为自己设定不可能完成的任务。尽管他父亲是个商人,他早年还是选择了学习绘画。但从本质上讲,他也是组织者、领导者和商人,也是一个挥霍无度的人和收藏家。如果要给出一个定义,蒂芙尼是一位创造者和推动者,他的远见卓识和组织能力使这一切成为了可能。

在二十世纪初,他雇用了100多名玻璃行业的出色工人,鼓励他们试验自己的想法,并辅以化学方法,对这些想法进行进一步的研究和推动。

他利用他的珠宝工作室实验特殊的金属反应。这些金属与彩色玻璃结合在一起,形成了「宝石花瓶」。他一直在研究他在旅行或参观博物馆时挑选的古代玻璃碎片。他在寻找可以用于复刻它们的化学方法。

蒂凡尼对探索发现和实验有着一种无法言喻的渴望,这让他能够创作出如今每件价值超过100万美元的作品。他经常去不同的国家旅行,研究与玻璃有关的古代文化。他保存了旅途中的许多发现,参观博物馆都会留下详细的笔记。

重要的一点是,蒂芙尼喜欢与他人合作或从其他风格中获得灵感,但他从不抄袭。他写道:

神赐给我们的才干不是要我们模仿别人的才能,而是要我们运用自己的头脑和想象力。即使是在团队中工作,艺术家的个人风格也是通向真正美丽的道路。——Charles Lewis Tiffany

他还创造了一种表面粗糙的昂贵玻璃,之后他为其取名「熔岩」。「熔岩」的灵感来自他在维苏威火山附近发现的碎片。他对古代的研究发现,埋在灰烬中的瓷砖(如庞贝古城)经过了2000年的化学变化,产生了光泽。这个变化过程可以在工厂实现。不久,他卖的瓷砖比花瓶还多。

爱迪生:向艺术家借鉴才能

要成为一个创造者,就必须成为一个艺术家?大错特错。发明家和商人托马斯·阿尔瓦·爱迪生背后有1000多项专利。大多数发明家在现代社会发展中发挥了至关重要的作用。他们的灵感来自于解决他人需求的渴望,以及与艺术家合作。

他的灵感来源于给予人们闻所未闻的东西。例如,他发明第一台录音机的灵感来自伟大的歌手和乐器演奏家的声音。他想给他们更好的创作工具。

他在电力方面的贡献也是如此。他信任与其他创作者和艺术家的合作。他鼓励蒂芙尼将燃气灯换成电灯,这样生意会更好。后来他与蒂芙尼合作,设计了纽约第一家完全使用电灯照明的剧院,帮助许多舞者寻找新的可能性来发展自己的演艺事业。

天才是1%的灵感加上99%的汗水。——爱迪生

他的实验室看起来更像是画室,而不是科学家的工作室。有时他沉迷工作就会睡在地板上的衣服里。他的名言「天才是1%的灵感和99%的汗水」诠释了他的职业道德观。做一个创造者不是一句空话,而是一种生活方式。

我没有创造力,需要灵感?

有句话说,只有业余爱好者才需要别人给灵感,专业的创作者靠的是自己日复一日重复工作。我多么不希望这是真的,但别无他法。或者就像我的一个朋友说的:「如果你不利用各种信息,你就不可能保持灵感。」他所说的信息是指读书,看电影,听音乐,去画廊,和聪明有趣的人交谈,旅行和探索一个新的国家。这可以看作一种「消费」。一旦你「消费」了,你就必须创造并回馈世界。

创造者都是相似的吗?是,也不是。

在阅读了这些创造者的故事后,我们可以看到所有人都有一个共同点——努力工作。所有的创造者都有一个人生座右铭——不断创造。其他的部分只是他们的个性。

做一个创造者不是一个头衔,而是一种生活方式。这不是三天打鱼两天晒网的事,也不仅仅是一个爱好,这是你的生活。当然,他们能够坚持下去,也因为他们内心对于这件事情足够热爱。

我们不需要上帝般的灵感来创造非凡。真正的创造者总是在收集周遭各种各样的信息,无论是在自然中、在不同的国家、在书籍中、在电影中、在音乐中、在食物中,还是在与艺术家或其他像你这样的创造者的合作中。

同样值得注意的是,创作者在创作时通常都是以自我为中心的。他们不允许其他人越俎代庖,因为他们想确保他们的工作朝着自己认同的方向发展。而且,这是因为他们喜欢创造自己的生活,而不是让别人为他们创造生活。当然,在大多数现代环境中,在工作中以自我为中心是不现实的,也是不的。但每个人都有自己的方式。有些人是推动者,有些人是独裁者。

PS:当然还有更多伟大的创造者值得我们去写(无论男女)。这个名单仅代表个人观点。

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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档