首页

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务



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

博博

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


    作者:王铎(Micu设计)


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

     

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

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

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

     

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

     

     

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

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

     

     

     


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

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

     

     

     

     

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

     

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


     

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

     

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

     

     

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

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

     

     

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

     

     

     

     

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



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

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

     

     

     

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


     

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

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

     

     

     

     

     

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


     

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

     

    图标表达

     

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

     

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

     

     

     

     

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

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

     

     

     


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

     

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

     

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

     

     

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

     

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

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

     

     

     

     

     

     

     

    图在界面中的运用

     

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

     

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



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

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

     

     

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

     

     

     

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

     

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

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

     

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

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

     

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

     

     

     

     

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

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

     

     

     

     

     

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

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

     

     

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


     

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

     

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

     

     

     

     

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

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

     

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

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

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

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

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

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


“手把手教你设计”—12个最佳手机APP界面设计教程

seo达人

如何使用Photoshop来设计手机UI界面

1. How To Set Up Photoshop For UI Design

如果你是Photoshop的新手,又在做UI设计,这个教程教你如何使用常用的Photoshop设置来达到更好的效果。本文是以iPhone为实例告诉你怎么在UI设计中使用Photoshop,完全是初学者的教程。

 

2. How to Design an iPhone App in Photoshop

这篇文章将为我们介绍使用Adobe Photoshop为iPhone设计一个简单的3页目录列表应用程序。并且将一步步地指导你完成这些步骤,还涵盖了使用Photoshop设计iPhone应用程序的所有基本原则。

 

3. Design an App Landing Page in Photoshop

在这个教程中,我们可以看到一个应用程序着陆页的详细设计过程。设计师使用Tuts Android应用程序进行演示,强调其功能和优势,利用多个CTA来完善整个着陆页的设计。

 

4. How To Design a Mobile App Signup Screen in Adobe Photoshop

如果你想要设计一个像Facebook或者Instagram这样成功的登录界面设计,那么这个完全是你必看的基础教程,视频中教你如何选择颜色,设计按钮以及详细的步骤来展示登录界面的设计过程。视频虽然是四年前的,但是里面的设计依旧不过时。

 

如何使用Sketch来设计手机UI界面

1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

开始一个新的设计项目是很难的,无论你是自由设计师,还是在知名的产品公司工作,时常会感到迷茫。本文将一步步的教你如何使用Sketch开始一项新的APP设计项目。

 

2. Food App UI • Sketchapp Tutorial / Sketch 4 Tutorial

视频主要是介绍如何使用Sketch制作一个美食类APP 菜单栏UI设计,简单易懂。

 

3. Sketch 3 for iOS App Design Step by Step

Sketch 3是一款优秀的矢量设计和图形程序,很适合用于设计iOS应用程序。在这个视频中,设计师使用Sketch 3来设计一个iPhone APP用户界面。

From Idea To Reality: Designing An App With Sketch And Xcode 》这篇文章是进阶版的APP 设计教程,从理论到具体的例子讲解,非常受益。

 

4. Sketch App Tutorial – Build a music app landing page in Sketch

Sketch 作为当下主流的设计工具,似乎有超越Photoshop的趋势。本视频介绍的是如何使用Sketch来制作一个音乐APP登录页设计,可以说是手把手的教程,每一步都非常的详细细致,非常适合初学者。

看了前面的音乐类APP登录界面的教程, 你是否也想设计出一个属于自己的音乐APP呢?接下来我将介绍如何通过结合Sketch和原型设计工具设计一款音乐类的APP(Prototype an music app with prototyping tool)

 

TIMING

这款原型音乐类的APP在Mockplus设计大赛中斩获头筹,设计师通过采用Sketch以及Mockplus的结合,做出了高保真原型。这个APP主要体现一种复古的视觉效果,磁带转动的效果是这次视觉上的设计重点。

 

必读的手机界面UI设计好文

1. The 10 principles of mobile interface design

计算机和手机是人们日常工作和生活必备的通讯工具。但在许多方面,手机往往更加强大,手机更加的私人化,与我们的联系更紧密。鉴于移动手机和计算设备之间的许多差异,移动设计与桌面设计的设计大不相同。这篇文章详细的向我们介绍了移动界面设计的基本原则,帮助设计师们开发移动应用程序的独特力量。

 

2. UI Design Do’s and Don’ts

iOS良好的优化了用户面设计,并提供给用户优质且具有吸引力的用户体验。在开始你的iOS设计之前,一定要清楚Apple官网的关于iOS常见的设计原则,来在增强手机应用的可用性和吸引力。更多关于优秀的iOS界面设计,请阅读《iOS人机界面指南》。

 

3. How to use colors in UI Design

颜色可以说在UI设计中至关重要。用的好,那就成功了一半,用不好,可能导致整个应用失败。在你的配色方案中,最好只使用三种主色跳,使用的颜色越多。越难实现平衡。这篇文章不但提到基础的用色知识加上实例解释,还有常用的工具介绍。

 

4. 10 Best APP UI Design for Your Inspiration

每位UI设计师都梦想着做出最出色的界面(UI)设计, 能够脱颖而出的手机界面设计则少之又少。设计师们在设计UI界面时,往往会参考来自不同设计师的设计,这篇文章列出了2017年最出色的的10个手机应用界面设计范例,给设计师们谋福利。

 

总结

移动设计不断地在发展,如果你想跟上这个时代,你需要不断阅读和观看高质量的教程或文章。在本文中,我收集12个最佳教程的示例来教初学者如何学习手机UI界面设计,希望你们能从中受益。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》“手把手教你设计”—12个最佳手机APP界面设计教程


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



10个最新优秀手机应用界面设计实例

seo达人


1). YONO.MP3 mobile app – 音乐软件

*设计师:Anton Shmatko, Green Shark Studio, Pavel Khenkin

*软件介绍:YONO.MP3是一款即可欣赏音乐, 也可收听广播节目, 了解最新时讯和趣事的手机端音乐软件。它会是你闲暇时搜索和分享歌曲,歌手和专辑的理想工具。

*亮点:该款软件采用了一个极具特色的配色方案 — 所有界面整体使用黑红两种颜色的对比, 经典而不失大气。 而局部渐变色的使用, 也让其功能和按钮更加突出,极具层次感。而且, 软件图片, 按钮和图标的层级叠加, 也使整个界面更加的时尚柔和。总之,软件界面设计整体简洁漂亮而不失易用性。

 

2). Watering Tracker App – 生活类软件

*设计师:Tubik

*软件介绍:Watering Tracker app, 顾名思义,就是一款可以追踪盆栽或植物的水分情况,及时提醒用户浇水的生活类手机应用。

*亮点:首先,这种能够监测植物水分情况,通知用户浇水的创意,新颖且有趣。其次,界面背景和局部添加的绿色植物图片使整个界面更加的直观舒适,带给用户好心情。 当然,作为植物监测的工具,同时也设置了显示各株植物水分,湿度,光照之类细节信息的功能区,即点即可了解到植物的具体生长情况,简单易操作。而且,配色方面,黑色背景搭配白色和绿色图片及按钮,符合整个植物主题的同时,也更易于用户接受和使用。

 

3). Listen – 音乐软件

*设计师:CD UXT

*软件介绍:Listen是一款致力于为喜爱不同音乐风格的用户提供独特且愉悦体验的音乐软件。整个界面设计简洁清晰,用户可以简单的通过不同频道(例如最新歌曲,电台,主体和专辑等)和不同场景(例如驾车,运动,工作和约会等)快速的搜寻到最喜爱的歌曲。而且,软件还特别为用户提供了根据不同心情播放不同音乐列表的功能,更具个性。总之,喜欢闲暇时沉浸在自己的音乐世界的你,它会是你最佳的选择。

*亮点:软件整体采用经典的蓝色背景搭配白色字体和同色系图片,更加柔和舒适。一系列插画风格 的场景和频道对应图片,也使整个界面设计更加美观有趣。结合明亮阴影的图标和按钮让软件对应功能更加凸显的同时, 更能易于用户识别使用。 针对不同部件添加的灵活交互,也能够使用户具有更加流畅且愉悦的体验。总之,它是一款以用户愉悦体验为基础而设计的软件原型,值得尝试。(点击这里查看原型详情

 

4). NightOwl Coffee – 咖啡预定软件

*设计师:Queble Solutions

*软件介绍:NightOwl Coffee是一款能够帮助用户根据自己的需要快速订购各式咖啡的手机应用软件。

*亮点:软件整体采用了独具特设的插画风:主页添加的由明亮颜色和各种几何元素呈现的卡通咖啡机,可爱且切合主题。纯色的背景搭配上灰色插画以及黄色图标和按钮,使整个软件界面更加干净整洁,易于用户使用。

 

5). Roomframes app – 管理型软件

*设计师:Adrain Rudzik

*软件介绍:Roomframe app是一款适用于iOS手机端的应用软件,能够帮助用户记录并珍藏他们所旅行过的地方的相关记忆,尤其是他们旅行中所居住过的房间的珍贵记忆。所以,从这方面来讲,它是一款生活管理型手机应用。

*亮点:软件多处使用了框架设计,方便用户根据不同的旅店,工作区和相关新增地点,添加对应的日期,图片和描述。其简单的白色背景,使用户信息更加明显,也易于用户随时回顾或与家人朋友分享这些难忘的回忆。

 

6). iOS App Slide Car – 生活类软件

*设计师:Melany Roa

*软件介绍:iOS App Slider Car是一款专门针对iOS手机研发的应用软件,能够帮助用户分类搜索各式汽车信息,并实现在线交易的一种手机端应用。同时,它也是一款能够帮助用户结交不同汽车爱好者的社交工具。

*亮点:简单纯色的背景,使用户专注于汽车图片,价格,描述和所有者等信息。搜索界面添加各种搜索参数,用户简单点击即可实现汽车信息搜索。总之,整个界面简单,整洁而实用。

 

7). Karoline – 购物软件

*设计师:Varduhi Adami

*软件介绍:Karoline是一款手机端服装购物软件,提供了各类服装的详细信息和购买渠道。

*亮点:软件整体的粉色系配色,柔和甜美,对女性购买者极具吸引力。所有界面以服装图片为主,更易于用户根据喜好挑选。而且,添加的简单且易识别的图标和按钮,方便用户搜索和查询相关服装细节。软件界面丰富,例如主页,我的账号,我的订单,我的购物车,要请朋友,设置,购买等,能够满足用户购买时各方面的需求。所以,如果你有通过手机在线购买服装的打算,它会是不是错的尝试。

 

8).Space – 管理类软件

*设计师:Doeun Shin

*软件介绍:Space是一款能够帮助用户更加有效的管理日常生活的手机端应用。主要提供了两项特色服务:早上,自动结合用户的日常习惯,提供有用的日程管理信息和建议,例如交通和天气情况等; 晚上,通过自动分析用户语音日记,提供符合用户心情的主体和提示音等等。

*亮点:该软件以插画风为基础,添加了各式动画按钮及图片,直观生动。蓝色主题,漂亮舒适,无论早上还是晚上使用,用户都不会反感。而且,软件本身添加多样的功能性界面,例如语音日记,心情日历,日常服务,节日简介等等,简单全面。总之是一款极具吸引力的管理软件。

 

9).QuickBee – 广告类软件

*设计师:Monish Mohanan

*软件介绍:QuickBee是一款广告分类管理软件,提供了生活中各个方面的信息,例如汽车,房地产,求职和教育等风方面面信息。使用者只需创建账号,即可搜寻所需生活信息,了解流行趋势,浏览各类特色广告。

*亮点:软件设计简洁,颜色搭配极佳。彩色按钮呈现多样的生活分类,整洁美观。各式框架呈现流行趋势和特色广告,简洁有序。矢量图标简单易识别。添加多种界面,满足用户各方面的需求。

 

10).Wallet – 理财类软件

*设计师: uixNinja

*软件介绍:Wallet一款能够帮助使用者理财的移动端软件。

*亮点:软件使用黑色,红色和紫色三种颜色的对比和渐变,极具特色,漂亮时尚。简易图标和多色几何图形,是软件界面更加简洁使用,令人印象深刻。

 

结语

这些就是我们所搜集的10款最新的优秀手机端软件UI设计作品。 希望他们不仅能给你新的设计带来灵感,同时也能帮助你把握和预计2018年手机应用UI设计的发展趋势。

 

原文地址:Mockplus

作者:jongde

 转载请注明:学UI网》10个最新优秀手机应用界面设计实例


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



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

博博

文章包括三部分: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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

【译文】移动应用界面设计7宗罪

博博

本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行移动设计时应该特别注意的禁忌,大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。

【译者注】本文是移动原型工具Proto.io的设计团队8月份在自家博客上发表的一篇“软文”,通过与移动设计界大牛们的对话,帮助大家了解在进行 移动设计时应该特别注意的禁忌,顺便推了一下Proto这个工具。大家可以回顾一下自己团队的应用正在触犯哪些禁忌,想必会有点意思。读完本文,相信你能 找到优化自家移动应用设计的方向。


规则就是用来打破的?这完全取决于规则本身。在移动应用界面设计(后续简称:移动设计)的世界里,大家对美学、手势和动效的看法略有不同。有时一个简单的功能性应用比华丽的应用带来的效果更好,而有时候却恰恰相反。


不过,有些基本规则是人们不愿意去打破的。如果你的移动设计使得用户无法顺利触达关键功能,这显然是行不通的。假使你的文字字号过小导致没人能顺利完成阅读,那么你得回炉重做。浅色背景搭配白色文字?重来吧。

我们试图了解优秀的设计师们心目当中移动设计的7宗罪是什么。经过垂询三组设计专家,我们得到了三个略有区别的结果,看看你是否能从其中找到一致的地方呢。


0c0156e773ac32f875520f0b7ce5.jpg




来自AKTA的意见


Alyssa Burke与Macy Nguyen是AKTA(一个数字体验咨询公司)的设计师,俩人都曾为财富500强的公司以及迅速增长的创业公司效力,参与过原生移动设计项目,为某些机构的顶级项目贡献设计输出。以下是他们认为无法接受的移动设计7宗罪:


1、忽略上下文情境


目标用户的个人档案(年龄、生活习惯、技术潜能等)与他们的物理环境(室内室外,在线离线,早晨晚上等)会影响许多设计决策。移动设计师应该在迭代流程中 充分考虑上下文因素,以降低可用性不足的风险。即使拥有平滑的过渡转场、光滑的按钮和美丽的字体,一些应用也会因为整体界面设计不符合特定用户场景(深色 界面用于户外场景:糟糕的移动设计)而失去成名机会。


2、闭门造车


设计和开发数字产品是一项需要团队协作的工作。即使有项目成员(开发、新人、极客、狂热者、朋友、陌生人、你的哥们儿和设计师潮人)对具体项目内容完全不 了解,将设计工作及早并及时推广到整个项目周期中的不同角色之间也是非常关键的。我们需要让他们了解到必要的上下文信息,并持续保持相关信息互通。与其在 发布后修复问题,不如在项目进程早期预留调整空间。


3、怠慢开发人员


程序员和工程师(以及偶尔酗酒的码农)不仅是你的同伴,而且是技术先导。他们除了知道哪些能够在现实中奏效之外,还能够如你设想的那般确保你的想法得到完 美落地。有些移动设计在技术上行不通,有些或许可行,但这些都需要很多努力或时间在项目中验证。如果不问你或许永远无法确定能否做到。在项目交付时,开发 人员会把你的设计成果实现出来,此刻,他们可能很欣赏你,也可能很讨厌你。


4、低估动效设计


随着物联网逐步成熟,数字界面在人们与周围真实世界的互动中扮演了更重要的角色,界面设计的这一部分需要被设计师更加慎重的对待。人类拥有与生而来的本 能,从所处环境的变化中得到不同的感知与反应。使用合理的界面动效是一种呈现优先级和重要内容的有效方式。在某些情形下的恰当运用,甚至能够引发用户的愉 悦。有兴趣的读者可以了解下迪斯尼动画的12项基本法则。


5、字号太小


比起纸质内容,人们在手机屏幕上进行阅读的精确度和深入度略有不足。正如移动设计拇指触控规则所定义,数字界面的字号最少应该两倍于印刷字号。不同情形适 用不同的字体和设置,尤其当用户试图在移动设备上完成多类任务时。为了避免字号太小,还需要优先考虑按钮形状、图片及交互等界面元素对整体体验有何影响。


6、忽略触控目标


许多移动设计师仍然对用户手指大小不同的现状缺乏重视。一旦涉及行动或者任务导向的触控目标,尽可能的使它简单而且容易点击。为老人设计时要考虑触控时的 抖动因素,同样为儿童设计时需要考虑点击的不准确性。建议为图形资源周围增加留白区域,以便本质上提升触控面积,帮助提升完成任务的速度。


7、死抠平台规范


在Android和iOS平台上统一一套设计方案有一定局限性,也容易对全局体验目标带来副作用。两个平台上有各自用户熟悉的设计模式,设计师不应该只熟悉规范,而应该探索在两个平台上流行的应用。


230656e773cb6ac7255885014da5.jpg




来自Moblico Solutions的意见


我们同Moblico Solutions(一家提供移动关系管理方案的企业,其目标是协助品牌“打造更多有意义的移动瞬间”)的一些员工进行了交流,他们不仅为诸多行业客户提 供了“如何让他们的移动应用体验更棒”的建议,而且掌握移动设计方面的窍门。以下是他们认为移动设计的7大禁忌:


1、在用户设备上占用过多容量只为了体现存在感


当用户收到“磁盘空间不够”的提示时,会马上遍历手机上已经安装的应用并开始选择删除的对象。如果一个移动应用体积很大,占用了过多的容量却并未提供等同的价值会怎么样?后会有期,用户肯定拿你开刀。记得保持应用在体积上足够轻量,这样至少用户不会轻易把你删掉。


2、在应用启动时及要求允许权限控制(推送、地理位置、摄像头等)


回想下,有多少次我们兴冲冲的下载一个应用并准备开始使用时,一个对话框立马跳出来扫了兴?我不关心这个对话框描述什么内容,只想马上关掉它并继续使用应用功能。它是啥?好吧,菜鸟应用!


3、下载后在使用前就要求登录、注册甚至收费


实际上,这条或许应该排为第一禁忌,很难让人忍受。你能对用户所做最糟糕的事情就是:在他们下载你的应用后告诉他们必须付费才能使用。烂,烂,烂,重要的事情说三遍,赶紧删之。


4、设计的移动应用界面看起来像网页


如果这样,还需要移动应用干嘛呢?要说有一件事情可以毁掉一个移动开发者,那就是把网页的体验缩小到移动端并且称之为移动应用。移动应用应该有其具体优势,只提供缩水的网页体验远不能满足用户期望。


5、粗暴投放广告,或者只提供极难点击的广告关闭按钮


当你在滚动浏览移动站点时,只是手指不小心长按了某张图片就触发了浏览器广告,这难道不是让人烦躁的事情?偏偏还提供极小的关闭按钮,谁能点得到?想要点击简直跟赌博一样。尝试点击关闭的时候还总是因为手指触控面积较大误触了广告,真是要了命!


6、消息推送过载


没错,现在你的应用出现在数百万人的手机屏幕上,它有巨大的影响力。不过,在推送之前请三思,扪心自问:推送是否与用户相关?用户是否真的需要它?当然,你可以在你的移动店铺每次上新时都推送一下,但真的至于么?影响力越大,责任也越大,慎重使用消息推送吧。


7、移动账号缺乏单点登录支持


当移动开发者认同并尊重用户不愿意重复劳动的想法时,最好的体验才可能产生。没人愿意为你的应用重新登录一次。我们得接受单点登录的现行趋势,Facebook在这点上非常成功,继续加油吧。


208456e773e232f875520f8802a6.jpg




来自Ideaware的意见


Andres Max是数字创新机构Ideaware(致力于帮助创业团队和财富500强的公司打造有竞争力的移动应用)的创始人。在创建Ideaware之前,Max 是Mashable设计团队的    负责人。经历过为众多行业巨头设计移动产品之后,Max对移动设计7宗罪有自己深刻的见解:


1、用户点击后无反馈


看在上帝的份上,当用户在你的应用中进行点击后请给予及时的反馈吧,否则用户会以为你的应用挂了,并且马上退出。


2、无休止的引导


如果使用自己的手机,我只想快速完成相关任务。别问我各种问题或者让我填写乱七八糟的内容。


3、触控热区尺寸不对


请停止把按钮和输入框做的太小,这不是网页。我的手指需要轻松触及行动按钮,而不是要进行精确到像素级的点击。


4、使用古怪的导航模式


想让用户可以快速熟悉你的应用?那就不要以自己独特的方式来组织导航。Apple的人机交互规范和Google的设计指南就是最好的参照标准。导航设计方面别引入争议,从而给潜在用户一个卸载应用的理由。


5、选取糟糕的配色色系


给眼睛一些休息的空间,你不必采用黄黑色文本那样的出挑配色。


6、留白


移动应用需要很多留白空间,把各种视觉元素进行区分,按钮得加大处理,所有一切都依靠留白来提供视觉缓冲。移动端首屏的概念没有网页那么夸张,所以切忌把所有东西都塞到首屏当中。


7、无休止的推送


为了上帝,请不要每天推送20条消息给用户了。用户在收到几条推送后,就会深深的感觉到想要卸载应用的那股冲动。


3a6956e773f26ac7255885dc59a7.jpg



你心目中的移动设计7宗罪是什么呢?


尽管不同设计师心目中的7宗罪不尽相同,我们依然可以看到不少相似点和共识。最重要的两条是:1、除非确有必要,避免推送消息;2、通过使用符合习惯与直觉的导航,以及提供其当尺寸的视觉元素,让你的移动设计具备可用性。


我们还能想到的一条是:忽略数字原型。在原型设计阶段能够发现很多移动设计问题,以及让它们更具可用性更加出色的宝贵反馈。这也是Proto.io为什么坚持提供强大又易用的原型解决方案的原因。




译者:1688事业部/无线交互/舒舟
文章来源:站酷   作者:阿里巴巴CBU设计

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

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

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


把握“时间”显示的诀窍

鹤鹤

背景


“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。



“时间”元素的分类


按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:


A.事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。 


B.行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。


C.内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。


在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。




“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和"时间间隔“的概念。


拿开会举例子:“下午4:30会议开始”、“下午6:00会议结束”描述的是事件开始、结束的时间点,而“整个会议持续1.5小时”、“会议时间为下午4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在1.5小时后结束”。


通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午6:00”是绝对时间,而“1.5小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。



时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是12日15:15:20),对用户的激励作用越明显(如距抢购结束仅剩00时01分23.6秒)。


1.绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。




在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。


时间颗粒度的选择依情况而定,一般场景总结如下:




2.相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于push通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。



在使用相对时间是,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。



总结


在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。



当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。


当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。


当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。



 

原文地址:站酷
作者:vivo互联网UED

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


3D to H5工作流应用手册:理论篇

涛涛

前言

设计师需求中 3D 视觉平移到互动 H5 中的项目越来越多,three.js 和 PBR 工作流的结合却一直没有被系统化地整理。

和各位前端神仙一起做项目,也一起磕磕碰碰出了爱与痛的领悟。小小总结,希望 3D 去往 H5 的道路天堑变通途。

本手册主要分为两大部分:

Part 1 理论篇:主要让设计师了解计算机到底是如何理解和实时渲染我们设计的 3D 项目,以及 three.js 材质和预期材质的对应关系。

Part 2 实践篇:基于 three.js 的实现性,提供场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

本文主要面向刚接触 3D 图形学的设计师,仅截取了最常用的理论知识和大家一起学习;部分涉及技术美术或计算机图形学的描述可能不甚严谨,希望大家多多交流讨论哈。

其实无论 H5 开发用到的是哪种 webGL,设计相关的材质制作基本还是基于 PBR 思路进行的,所以这边建议各位亲可以先去阅读一下 Substance 官方宝册《The PBR Guide》。

Part 1 理论篇

设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题:为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大?

其实这是我们对实时渲染引擎(UE、Unity、three.js 等)和离线渲染工具(Redshift、Octane、Vray 等)的差异存在误解:一是离线渲染工具是基于真实光照环境来计算每颗像素的着色,实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照(没个好显卡都开不动光追)。

虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊,但在实际项目,尤其是需要兼容低端设备的 H5 来说,渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说,流畅的互动体验优先级往往高于画面精细度,所以牺牲视觉保性能也是常见情况。

硬核干货!3D to H5工作流应用手册:理论篇

图 1-Octane 离线渲染效果 vs three.js 实时渲染效果:材质细节、全局光照及投影、以及抗锯齿表现差距明显

当实时渲染效果与设计预期差距过大时,设计师能多了解一些基础的计算机图形学,也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案(以及更多 Battle 的筹码)。

1. 着色器与着色算法差异(硬核预警)

首先我们要知道计算机之所以能在 2D 屏幕上画出 3D 的图像,是因为有着色器(Shader)在绘制,它将我们三维空间里的模型与光照信息进行转换,并光栅化为二维图像。在计算机图形学中,着色器是用于对图像的材质(光照、亮度、颜色)进行处理的程式。

常用的着色器分为四种:像素/片元着色器(Pixel/Fragment Shader)、顶点着色器(Vertex Shader)、几何着色器(Geometry Shader)、细分曲面着色器(Tessellation Shader)。

像素/片元着色器与顶点着色器(Vertex Shader)在 webGL 处理过程中都有使用,顶点着色器先将模型中每个顶点的位置、纹理坐标、颜色等信息进行转换装配,再由片元着色器对 3D 信息光栅化并转换成 2D 屏幕信息。(关于着色器差异,感兴趣的同学可以直接跳到附录查看。)

着色器是怎么把顶点中所带有光照、纹理等信息转换并重建在二维图像的像素中呢?GPU 中是透过不同的着色算法来实现的。

一种是获取每个三角形的插值(Interpolate)来实现,这种方法称作 Per Vertex Lighting,但是当三角型很大的时候,插值往往不够精准。此时还可以引用另一种方法 Per Pixel Lighting,计算每个像素的光照信息,获得更好的渲染效果,但是往往也带来更大的计算量。

一般常见计算机图形着色算法有三类:Flat Shading、Gouraud Shading、Phong Shading。这些算法虽然看起来和我们设计师没啥关系,但事实上在后面了解 three.js 材质时,就会发现他们在呈现时的差异。

硬核干货!3D to H5工作流应用手册:理论篇

图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]

平直着色法 Flat Shading

这种着色法认为模型中所有面都是平的,同一个多边形上的任意点的法线方向都相同。着色时,会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型,也比较适合使用在高速渲染的场景。值得注意的是,这种着色法难以做出平滑高光效果。

高洛德平滑着色法 Gouraud Shading

这是一种平滑的着色方法,在着色时会先计算三角形每个顶点的光照特性,利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节,而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。

但是在渲染高光时,可能会因为无法获取精确的光照值而出现一些不自然的过渡(或 T 型连接容易被错误绘制),此时可以考虑对模型进行细分或使用漫反射材质。

Phong 平滑着色法 Phong Shading

与 Gouraud Shading 不同的是,它会对顶点的法线进行插值,并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面,但是计算量较大。Blinn-Phong 是 Phong 的进阶版,着色性能更好,且高光弥散更自然。

2. 基本光照模型 Illumination Model

简单了解计算机如何绘制 3D 图形后,再来看看它要如何具体理解我们所设计的 3D 场景。

3D 转换成 2D,也就是 3D 栅格化的过程中,每一个像素的颜色是需要基于它所在的环境计算出来,而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型(Illumination Model)或光照模型(Light Model),透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制(Surface Render)。

*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型,而是指模型对象表面光照效果的数学计算模型。

影响光照模型的因素有两大方面,一是本身给渲染物体材质设置的各种光学特性(颜色反射系数、表面纹理、透明度等),二是场景中光源光及环境光(场景中各个被照明对象的反射光)。

传统光照模型都是对漫反射和镜面反射的理想化模拟,如果要还原基于真实物理世界的效果,光照模型需要遵循能量守恒定律:一个物体能反射的光必然少于它接受的光。在实践层面则表现为,一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光,反之亦反。

硬核干货!3D to H5工作流应用手册:理论篇

图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]

光照模型与着色组合在不同的渲染需求下也会有不同的应用:

  • 真实感渲染(Photorealistic Rendering):目的是基于真实物理世界对 3D 场景进行仿真还原。
  • 非真实感渲染(Unphotorealistic Rendering):也被成为风格化渲染(Stylistic Rendering),会更抽象化地对模型进行重绘。

硬核干货!3D to H5工作流应用手册:理论篇

图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]

真实感渲染 Photorealistic Rendering

考虑到真实感渲染对硬件的依赖,目前 webGL 中使用的一般以简单的局部光照模型为主(只计算光源对物体的光照效果,不计算物体间的相互影响,我们看到的“假反射”通常透过贴图来进行模拟),根据反射形态,经典的光照模型有下列几种:

  • Lambert 漫反射模型:

这种模型的粗糙表面(如塑料、石材等)会将反射光从各个方向反射出去,而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体(Lambertian Reflectors),也就是我们熟悉的橡胶材质。

硬核干货!3D to H5工作流应用手册:理论篇

图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]

  • Phong 镜面反射模型:

这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射,但 Phong 模型在高光处的表现有过渡瑕疵。

硬核干货!3D to H5工作流应用手册:理论篇

图 6-Phong 镜面反射模型视觉构成 [ F5 ]

  • Blinn–Phong 模型:

是在 OpenGL 和 Direct3D 里默认的着色模型,一种调优后的非物理的 Phong 模型,顶点间的像素插值使用 Gouraud 着色算法,比 Phong 着色算法性能更好,而且高光效果也更平滑。

硬核干货!3D to H5工作流应用手册:理论篇

图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]

  • Cook-Torrance/GGX 光照模型:

如果你用过 C4D 的默认渲染器,那么一定在材质的反射通道设置中见过它俩。

这是相对高级的光照模型,不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟,这两个光照模型基于不同物理材质加入了微表面(Microfacet)的概念,并考虑到表面粗糙度对反射的影响,对镜面反射进行了调优,使得高光的长尾弥散更加自然,也是目前 PBR 渲染管线(Unity、UE)中较常用的光照模型。

硬核干货!3D to H5工作流应用手册:理论篇

图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]

  • 次表面散射模型 Subsurface scattering/SSS:

终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时(皮肤、液体、毛玻璃等)的散射现象。现实生活中,大部分物体都是半透明的,光会先穿透物体表面,继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

BSSRDF(双向次表面反射分布函数)是用于描述入射光在介质内部的光照模型,目前也被应用在最新的虚拟角色皮肤实时渲染中;但由于 SSS 材质的计算需要依赖深度/厚度数据,所以 webGL 对这种高级光照效果的还原程度还是相对有限的。

硬核干货!3D to H5工作流应用手册:理论篇

图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]

非真实感渲染 Unphotorealistic Rendering

也就是我们常说的 3 渲 2,非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出,目前也被大量应用在动画及游戏中,像《英雄联盟:双城之战》《蜘蛛侠:平行宇宙》都是顶级三渲二大作。

硬核干货!3D to H5工作流应用手册:理论篇

图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]

  • Cel Shading/Toon Shading:

卡通着色,一种最常见的以 3D 技术模拟扁平风格的着色形式,通常以极简的颜色、渐变及明确的外框线等漫画元素作为风格特征。

硬核干货!3D to H5工作流应用手册:理论篇

图 11-Blender 中不同类型的 Toon Shader 效果 [ F10, ©️Blendernpr]

日本创意编程师 Misaki Nakano 制作了一个非常有趣的 Toon Shading H5 互动页面,大家可以体验一下不同着色形态下非常模型的视觉表现。点击体验: https://mnmxmx.github.io/toon-shading/dst/index.html

硬核干货!3D to H5工作流应用手册:理论篇

图 12-Misaki Nakano 的 Toon Shader 互动网站 [ F11, ©️Misaki Nakano]

  • Customized Shading:

目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理,以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色(Gooch Shading),以及更具绘画质感的素描着色(Hatching)及油画水墨画等自然媒体着色,都已经深入到了我们日常的创作之中。

硬核干货!3D to H5工作流应用手册:理论篇

图 13-在 Unity 中,基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]

3. Three.js 材质着色对比

说完真实感与非真实感渲染差异后,我们再来看看 Three.js 中的材质。

和许多渲染引擎一样,除了原生材质外,webGL 的材质和着色都是可以根据需求进行定制的,但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景,下表罗列了 Three.js 原生材质的对比,包含了材质特性优势、贴图差异及适用场景,大家可以基于项目需求快速选择并混合使用:

硬核干货!3D to H5工作流应用手册:理论篇

图 15 – three.js 材质对比表

4. 色彩描述与管理 Color Space

虽然着色、光照模型以及材质渲染对 3D 表现有着最为直观的影响,但 3D 工作流仍有一个隐秘而关键的环节——色彩管理。

真实世界中按照物理定律,如果光的强度增加一倍,那么亮度也会增加一倍,这是线性的关系。理想状态下,像素在显示屏上的亮度也应为线性关系,才能符合人眼对真实世界的观察效果(如图 b:横坐标为像素的物理亮度,纵坐标为像素显示时的实际亮度)。

但是显示器的成像由于电压的影响,导致输出亮度与电压的关系是一个亮度等于电压的 1.7-2.3 次幂的非线性关系,这就导致了当电压线性变化时,亮度的变化在暗处转换时变慢,如果显示器不经过矫正,暗部成色也会整体偏暗(如图 c)。目前大多数显示器的 Gamma 值约为 2.2,所以也可以理解 Gamma2.2 是所有显示器自带的一个遗传病。

硬核干货!3D to H5工作流应用手册:理论篇

图 15-红色上曲线=Gamma0.45=sRGB Space;绿色下曲线=Gamma2.2=显示器真实成像缺陷;蓝色斜线=Gamma1.0=Linear Space 真实物理世界线性关系

为了矫正显示器的非线性问题(从图 c 校正回图 b),我们需要对它进行一个 2.2 次幂的逆运算(如图 a),在数学上,这是一个约 0.45 的幂运算(Gamma0.45)。经过 0.45 幂运算,再由显示器经过 2.2 次幂输出,最后的颜色就和实际物理空间的一致了,这套校正的操作就是伽马校正(Gamma Correction)。

而我们常见的 sRGB 就是 Gamma0.45 所在的色彩空间,是 1996 由微软与惠普共同开发的标准色彩空间。当照片素材一开始储存成 sRGB 空间,相当于自带一个 Gamma0.45 的遗传病抗体,当它被显示器显示时,就自动中和了显示器 Gamma2.2 的缺陷,从而显示出与物理世界相符的亮度。

另一个校正原因是因为人眼在接受光线时的敏感度也不是线性的,人对于暗部的感知更敏感,对高亮区域感知较弱,而且人眼感知光强度与光的物理强度也刚好是对数关系。为了在暗部呈现更多人眼可感知的细节,Gamma0.45 的色彩空间中(如图 a),像素的实际亮度也会高于它的物理亮度。

硬核干货!3D to H5工作流应用手册:理论篇

图 16-人眼感知光强度与发射光真实物理强度对比

上面那一大段确实有点绕,但也就说回来为什么建议渲染时使用线性空间(Linear Space)了。因为在计算机图形中,着色器的运算基本上都是基于物理世界的光照模型来保证渲染真实性的,如果模型的纹理输入值是非线性的(sRGB),那么运算的前提就不统一,输出的结果自然就不那么真实了。

而在大多数工作流及渲染软件中,大部分贴图资源都是默认输出 sRGB 的(设计师作图环境一般也在 sRGB,所见即所得),而法线贴图、光线贴图等纹理(纯数值类纹理,只用于计算)又是 Linear 的,这个部分就需要我们根据渲染引擎本身的特性,来判断是否需要对不同的贴图进行不同的“去 Gamma 化”处理了(WebGL、Unity、Octane 等)。

将所有贴图进行去 Gamma 化,统一为 Linear 空间后,再在渲染输出时由引擎统一进行 Gamma 校正,这个时候在显示屏里显示的就是接近真实世界的效果了。

更多色彩空间的实际效果比较,大家可以看下 Unity 的文档:《Linear/Gamma 渲染比较》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

回到 H5 所用的 Three.js,它的着色器计算也是默认在 Linear 空间,如果最终渲染时不转化为 sRGB,在设备显示时可能会造成色彩失真。在 three.js 中色彩管理的工作流会根据导入模型 Asset 的差异而有所不同,如果贴图与模型是分别导入场景,则建议可尝试以下流程:

1. 输入贴图数据 sRGB to Linear: 含色彩的贴图(基础材质、环境、发光)设编码为 sRGB(texture.encoding = sRGBEncoding),或将渲染设置 renderer.gammaInput 设为 True,可将原为 sRGB 的贴图转换为 Linear,而原纯数值类贴图(法线、凹凸等)仍旧保持 Linear;这一操作可保证贴图输入数据的正确性与统一性。

2. 刷新材质:当材质编码类型被修改后,需要设置 Material.needsUpdate 为 True,以重新编译材质。

3. 输出渲染 Linear to sRGB: 校正渲染输出值的 Gamma:

renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供显示屏正确显色。

《Part1-理论篇》就先告一段落啦,如果你偶发失眠,建议可以反复咀嚼延伸阅读的内容。

《Part2-实践篇》会继续完善 three.js 场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

2022,咱们需求再见。

附录

1. 着色器差异

像素着色器 Pixel Shader

也称为片元/片段着色器(Fragment Shader), 为二维着色器。它记录了每一个像素的颜色、深度、透明度信息。最简单的像素着色器可用于记录颜色,像素着色器通常使用相同的色阶来表示光照属性,以实现凹凸、阴影、高光、透明度等贴图。同时,他们也可以用来修改每个像素的深度(Z-buffering)。

但是在 3D 图像中,像素着色器可能无法实现一些复杂的效果,因为它只能控制独立的像素而并不含有场景中模型的顶点信息。不过,像素着色器拥有屏幕的坐标信息,可以依据屏幕或邻近像素的的材质进行采样并增强,例如,Cel Shader 的边缘强化或一些后期的模糊效果。

顶点着色器 Vextex Shader

是最常见的 3D 着色器,他记录了模型每个顶点的位置、纹理坐标、颜色等信息。它将每个顶点的 3D 位置信息转换成 2D 屏幕坐标。顶点着色器可以处理位置、颜色、纹理的坐标,但是无法增加新的顶点。

几何着色器 Geometry Shader

是最近新兴的着色器,在 Direct3D 10 和 Open GL3.2 中被引用。这种着色器可以在图元外生成新的顶点,从而转换成新的图元(例如点、线、三角等),而优势也是在于可以直接在着色中增加模型细节,减低 CPU 负担。集合着色器的常用场景包括点精灵(Point Sprite)生成(粒子动画),细分曲面,体积阴影等。

细分曲面着色器 Tessellation Shader

在 OpenGL4.0 和 Direct3D 11 中出现,它可以在图元内镶嵌更多三角体。为传统模型新增了两个着色步骤(一是细分控制着色,又称为 Hull Shader,二是细分评估着色,又称为 Domain Shader),两者结合可以让简单的模型快速获得细分曲面。(例如,含细分曲面效果的模型加上置换贴图就可以获得极其逼真细腻的模型)

2. 一些术语的简单理解

GL: Graphics Library, 图形函数库。

webGL:Web Graphics Library,Html 5 可接入的 3D 绘图协议/函数库,可以为 H5 Canvas 提供 3D 渲染的各类 API。

Z-Buffering:深度缓冲,3D 图像在渲物体的时候,每一个生成的像素的深度会存储在缓冲区中。如果另一个物体也在同一个像素中产生渲染结果,那么 GPU 会比较两个物体的深度,优先渲染距离更近的物体,这个过程叫做 Z-Culling。当两个物体靠很近的时候(16-bit),可能会出现 Z-Fighting,也就是交叠闪烁的现象,使用 24 或 32bit 的 Buffer 可以有效缓解。

Rendering Pipeline:渲染管线/渲染流水线/像素流水线,为 GPU 的处理工作流,是 GPU 负责给图形配上颜色的专门通道。管线越多,画面越流畅精美。

硬核干货!3D to H5工作流应用手册:理论篇

图 17-渲染管道细节工作流 [ F12 ]

Rasterization:光栅化/点阵化/栅格化,就是将管线处理完的图元转换成一系列屏幕可视的像素,过程包括:图元拼装(Primitive assembly)-三角形遍历(Triangle Traversal)- Pixel Processing-Merging。

文章来源:优设 作者:ISUX


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

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

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


深度解析|流量时代私域H5营销设计的流量密码

鹤鹤









一、由销售演变成运营


在我看来,当今互联网行业的经营实际上与传统行业的销售并无区别,我们可以从以下两个行业的业务结构图看出,互联网行业的经营实际上是从传统行业的销售模式转变而来。



1.1 传统行业的销售

按照传统行业的业务结构可分为“采购、生产、加工、销售、财务”四个环节。一提起销售大家肯定都不陌生,指的是企业生产的产品通过销售人员的销售手段,将企业的产品卖出来兑换成货币,流入企业的财务。



1.2 互联网行业的运营

在互联网行业中业务结构还可分为“采购、PM/开发、运营、财务”。就流程而言,互联网行业的经营实际上存在着传统销售的影子,在将企业的产品(成品)转化为财务的这一环节之前,需要经历销售或运营这两个环节。


不像传统企业销售,运营不直接负责卖,更多地是负责推广。不直接负责销售,更多的是负责推广。换言之,互联网企业的产品并不直接兑换成货币,而是通过“引流、活动、转化、流失”等一系列运营操作,提升用户体验,将产品好服务卖给用户。


·引导用户使用产品:我们可以将传统销售中的初次拜访客户当作运营中的引流;

·保持用户黏性:把传统销售中的维护客户关系当作运营中做的活动和转化;

·用户流失管理:将传统销售中挽回客户这个动作当作运营中用户流失这个动作。

因此,互联网行业更加重视运营而不是销售。






二、运营设计的核心目标


在简单了解了互联网的运营之后,我们再谈一谈最新出现的一个新词“运营设计”。



2.1 运营设计并不是运营

运营设计在我看来是一个相对模糊的词汇,我能清楚地讲明白什么是品牌设计、界面设计、工业设计、平面设计、产品设计,但总觉得说不明白什么是运营设计。


比如说品牌设计是品牌,界面设计设计的是界面,而运营设计不是运营设计,好像运营设计无法用一个专业的方向来描述。


但在国内的互联网市场中,产品的运营又是一件必不可少的事情,从企业盈利的角度来看运营设计的地位不亚于UI设计和产品设计。在我看来运营设计是介于“运营”与“设计”之间的一个岗位。


·菜鸟运营设计师:多是帮助运营经理完成运营活动的投放物料,按时上线。

·老鸟运营设计师:通过较为多样的手段(合理的规划)和技能(设计感觉形式)更好地实现“用户获取&用户付费”等目的,并且在这个过程中可以“更好实现已有用户的维系”。



2.2 增长设计(海盗模型)

实际上,运营设计也被称为增长设计,一提到增长,我的第一反应就是《增长黑客》中的海盗模型,也就是AAARR模型。


AARRR(海盗模型)是《增长黑客》中最为重要的理论——用户生命周期的模型,因为这个模型和运营设计有许多相似之处,也有人将其作为业务流程的模型。运营的流程需要经历:先拉新,再促活,接着提高留存,然后获取收入,最后实现自我传播这5个环节,可以和模型中的概念一一对应上。


*对于海盗模型的知识点,我在这篇文章《一文读懂|数据好体验就好吗?—数据认知篇》里面讲过,这里我就不做过多地赘述了。


对用户生命周期AAARR模型的理解是一方面,最重要是要学会用模型中的关键数据指标去衡量活动,毕竟我们做运营设计的最重要的是以最低的设计成本来获得最大的运营收益。模型只是一种工具,对于不清楚怎么使用模型的同学,我建议看看我写的《史上最全|数据体验好就好吗?—体验度量篇》



2.3 以运营目标推导运营形式

运营经理的运营手段可谓是百花齐放,变化莫测,这里我们不展开讨论。一般运营活动属于推广这个动作,在推广的这个环节里面不会特指某一个目标,而是包含多个目标,所以对于运营设计师而言目标不能是一个,而应该多个。常规的以产品运营为核心提出来运营目标大致是“拉新、促活、回流、营收”等这四种。


如果把运营的目标需求转换成我们设计师的目标需求的话,逃不出我们常见的“用户增长、品牌传达、营销策略、商品成交量”这四个范畴。


把运营侧的目标转换为产品是为了帮设计更准确理解运营经理的需求,以目标确定活动类型、以类型快速定位适合的风格,提高运营活动质量,促进用户转化,如图


·基于用户的活动运营:如果是以用户为目标的活动,设计应该偏向于符合用户属性的风格,比如我们的用户都是年轻的用户,那在页面的设计上就应该多有“年轻化、博人眼球的、好玩有趣”等元素的呈现。


·基于营收的活动运营:如果是以营收为目标的活动,设计应该偏向活动场景对于入口的设计优化,比如Banner、落地页等物料设计。通过优化入口,提高转化率,完成产品体验的优化的目标。


·基于品牌的活动运营:如果是以品牌宣传为目标的活动,设计应该偏向企业品牌形象的树立以及传播,把产品的特色传递给用户,与其他竞品拉开差距,提升自己产品的核心竞争力。





三、私域的精细化运营

与运营有关的“私域”这俩词,最近火得不行,哪里都可以见到。为什么互联网企业这么重视私域的运营呢?主要是因为在互联网时代,大家都认同有了私域流量就相当于有了盈利这个观点。


3.1 什么是公域运营

首先我要简单地描述一下什么叫流量,流量的本质就是指用户,但是“用户”这个词过于抽象了,常常都用阅读量,粉丝量,点赞量,播放量等这些数据维度去衡量流量的体积。


打个不恰当的比喻,流量就像是一条河,如果无人管理的话,那就叫公域交通。您在河边挖一条水沟,将河水引到自己事先制作好的蓄水池里面,这个蓄水池里面的河水就叫做私域流量。


3.2 什么是私域流量

如上例所说,我们将能够自主运营的流量或用户(蓄水池),可以反复触达、“骚扰”、交流,获取反馈的流量统称为私域流量。典型的产品形态有微商、拼团群、朋友圈、微信公众号。私域流量相对于公域流量来说,是一种更精准,更容易被转化的流量。


简单的理解就是可以为所欲为的流量,比如我在我自己的微信公众号里面可以随意地删减用户的评论,典型产品形态有微信公众号、微商、拼团群、朋友圈等。


如今许多互联网产品都是私域流量与公域相结合的产品,比如说大家经常使用的站酷这个平台,如果我发布的作品没有上首页的推荐,只会在我的个人主页展示,获得的粉丝就属于私域流量;反之我的作品获得了首页推荐,在站酷首页展示,获得粉丝增长量就属于公域流量。


许多企业老板都明白这样一个道理“用户在哪里,私域流量就在哪里,生意就在哪里,企业的盈利就在哪里。”因此,企业老板们都希望把公域流量吸引到自己产品的中,成为私域流量,这样企业的流量即相对公域流量而言更加可控、高效、精准,后期盈利也有保障。



3.3 精细化的运营模式

正是因为许多企业开始注意到私域流量的重要性,互联网从之前的流量粗放运营模式,逐渐变成用户精细化运营模式,这是流量思维到用户思维的转变。精细化运营简单理解就是基于庞大的数据分析,让企业的产品为不同的用户推送不同的运营内容(或者是用户感兴趣的内容)。


提出“精细化运营”这一个概念行业里面最早最有名气的应当是号称一分钟出8000张Banner的鹿班平台,鹿班平台最大的意义不在于取代设计师这一个岗位,而是阿里巴巴在精细化运营的第一次尝试,为不同的用户推送自己所需要的商品内容。当然了,除了鹿班平台京东集团也有羚珑营销内容创意平台,有兴趣的同学可以查看一下。


在精细化运营中还有一个很专业的名词叫“千人千面营销策略”,这个营销策略的概念是指每一个用户看到的每一个内容都是不一样的,仔细想想这是人力所不能及,只有AI的大数据才能做到的,例如用户A的收藏夹是衬衫品类比较多,那淘宝Feed流推送的商品衬衫比重会多一些,用户B的购物车首饰品类比较多,那产品中推送的内容珠宝首饰占多数;用户C喜欢电子产品,那么产品推送的将会是电子类产品比较多。





四、了解运营设计师的工作内容

在公司里,产品体验设计师(又被称为界面设计师、UI设计师)在公司中扮演着美化产品的角色,随着互联网行业的业务扩张、人才涌入后会把UI设计师这一角色进行更加精细化的分类,在互联网企业中会把设计师按照工作内容进行两种类型的分类,分别是产品体验设计师和运营视觉设计师。



4.1 产品体验设计师

工作职责:产品体验设计师的工作职责,主要以提升产品功能体验为主。在分析产品逻辑和交互逻辑后,从视觉层面把控产品界面设计,并通过视觉设计高效传达有效的信息,并制造出愉悦的用户体验。

设计工具:Figma、Sketch、Axure、问卷工具等。



4.2 运营视觉设计师

工作职责:运营设计工作职责是在短期内达成提升相关运营活动的指标。他们以运营活动设计为主,运用视觉语言吸引用户参加对应的活动,加深用户对产品的印象,从而促使用户参与活动,完成活动中完成引流、成交、复购、传播等行为。

设计工具:PS、AI、AE、C4D等。



4.3 运营设计师需要具备的能力

运营设计师的主要工作内容就是协助企业中的运营经理做好产品的用户运营、内容运营、产品运营和活动运营。运营设计师应该参与到运营活动的策划中去,帮助运营经理想一些更有趣更好的设计策略,并且在这个过程中更好地提高自己的运营策略、数据分析、文案能力和视觉表现能力。


4.4 运营设计的工作范畴

运营设计师这个一个岗位更多的是内容驱动型(音乐、视频、教育应用等)、交易驱动型(电商、o2O服务等)产品中。它的工作范畴是一个很繁杂的事情,不仅需求数量大而且频率高,最繁杂的一点是需求种类比较多,比如有广告位Banner、专题页面设计 、活动专题、Icno图标等内容,并且需要批量处理的各种资源入口图,线下活动的海报、印刷物料等等。










如今运营活动可谓铺天盖地,手机端也能经常见到各大企业产品的优惠活动设计,比如活动图,落地页,优惠券,战略楼层等设计。国内的运营设计推广形式多以落地页(H5)的形式帮助企业做推广企业产品或者树立企业形象的活动。


由于,这类狂轰滥炸式的运营活动,让用户倍感无味,致使运营活动流量不高,设计师在实际的工作中往往会遇到以下三类问题,导致我们的运营活动流量不高,达不到预期的运营目的,如图





一、用形式解决内容过长问题

近些年在市面上落地页的推广形式多以长页面为主,比如电商的推荐页、商品的宣传页。由于企业想要表达的内容过多,使落地页的长度越来越长,这种形式虽然可以更全面地介绍商品优势,但是在快节奏的互联网市场,用户自然会觉得很臃肿。


针对落地页内容过长,视觉呈现不佳的问题,我们最快能想到的办法就是删减字段,但是如果运营经理不同意删减字段那怎么办?因此,删减这是一个办法,但不是最好的办法。


既然不能删减,我们不妨换个思路来解决这个问题。刚刚谈到内容过长导致用户感觉臃肿,感觉臃肿的核心所在是“内容”对用户没意义,按着这思路延展下去解决问题的关键在于“突出重点”,这里我提供四个方法帮助大家解决困扰。



1.1 优化头图的尺寸

许多设计设计师由于没有考虑清楚手机到最终的预览效果,导致很多重要的元素出现在低活跃的区域 ,用户第一眼看不到能吸引自己的内容,从而失去往下滑动了解更多内容的动作,造成运营推广的效果大打折扣。


因此在设计这种长图时要事先考虑好首屏要呈现什么内容,一般的运营头部高度一般定在600px-750px左右,如果是内容较多的话,我建议把头图的高度控制在460左右,这样可以促使用户在首屏看到更多的信息,引导用户有兴趣向下滑动,用户的点击率也随之上升。


1.2 手机海报的表现形式

除了缩减头图的高度之外,实际上利用海报宣传的方式进行设计也是可以的。在朋友圈或其他社交平台上经常看到这种带有二维码的宣传海报,用户通过扫码直接进入运营活动中心。


这类海报形式有着短小精悍,言简意赅、便于传播的优点,是一种提高运营活动流量很好的表现形式。



1.3 九宫格拼图的表现形式

虽然现在是抖音的天下,但是这类九宫格拼图的表现形式,在微博(微信、微淘)如日中天的时代也是风靡一时的,这里提出九宫格拼图的形式也是给大家提供一个思路,是否采用还需要考虑企业主要运营的平台。



1.4 闪屏的表现形式

闪屏这种表现形式虽然点击率并不高,但是一种很好蹭热度的方法。对闪屏的设计,设计师只需要思考好用什么呈现表现形式为闪屏物料注入新的活力,例如用下面这种只突出主体物和标题的表现形式,把内容更加精简、准确地传递给用户,这种表现形式就很好。





二、了解兴趣低的原因

在第二部分里,我想分为4个模块——了解兴趣低的原因、用形式提高用户兴趣、让标题文案更加突出、用猎奇心理引起用户兴趣,来谈一谈我对“用户兴趣”的理解。


2.1 解决用户兴趣的方法

早期的互联网产品以工具为主,例如百度就是用来搜索的、QQ就是用来聊天的、淘宝就是用来买东西的,这些产品呈现的感觉都以简洁清晰为主,但随之互联网越来越普及,娱乐产品出现与工具类产品越来越多的差异性趋势发展,尤其对于运营设计,简洁清晰变得没那么重要,个性、趣味才是占据主导。想要运营设计做得让用户有兴趣,不妨试一试我下面所说的四个技巧。



2.2 为什么要“动”会引起用户兴趣

以图片+内容的这种展现形式在市场出现很久了,对用户的吸引度不免有减弱的趋势,在这一阶段我们需要寻找一种更加有趣的形式来吸引用户。


兴趣可以用更为科学的方法“注目度”来解释,当我们眼睛在看到某一个事物的时候,大脑会根据事物的形态给一个由“强”到“弱”的排序,去支配眼睛去观察事物,如下图所示,我们可以直观地看到“动画”这个类目是排在前面的。大部分用户在看到运营活动内容的精神状态(注目度)是分散的,所以要抢占用户的时间,设计用户第一眼的吸引力。




三、用形式提高用户兴趣


3.1 加入更多的动效

根据上面的结论,在提高用户兴趣这个问题上,我们完全可以增加展示效果的动效来做到,很多产品也是这样做的。


比如今年拼多多的Banner上,做了一些标题旋转、优惠券飞出的动画效果:

  


像京东购物节中做一些开场的动画效果:

  



在活动流程上面的动效,比如在一些抽奖环节模拟真实物体的运动轨迹:

  




在图标或者标签上面加一些位移、渐隐渐显的动画效果:

  


在一些弹窗上面加上一圈光效,也是一个不错的选择:

  


如今在运营活动上加入更多的动效是设计师必备技能之一,最常规的就是把画面中的某一个元素变大,像是下面的按钮,采用放大缩小的动效。

  


或者是按钮旁边加上一个手指的元素,也可以起到吸引用户的目的。

  


元素围绕主题物周边沿着运动轨迹活动。

  


关于动效的案例,这里我就不一一举例说明了,大家可以登录蚂蚁设计服务平台 - 犸良这个平台获取灵感。



2.2 以静制动

对于不会动效软件的同学也没有关系,也可以着重对画面的张力进行设计,以静至动,以下我就分享几个以静至动的方法。


·元素之间的动势:合理的运营元素之间的组合关系可以营造出有动的感觉,如果单单放一个开飞机的场景可能并没有感觉在飞,但如果加上飞翔的红包、模糊的背景,那就感觉真的在开飞机。


·有力的指引力:如果单单地放一张优惠券,不会产生吸引人的观感,但设计四只手从四个方向争抢的画面,就会感觉画面有力量有争抢的感觉。


·以破形产生动感:画面中从左侧设计一张卡片,远处门的入口塑造的,大胆地破形处理,很容易营造出一种动态感觉。


·夸张的构图设计:当然了不同的视角和构图也可以让画面感觉生动,如下面这样的构图就会给用户营造出一种画面外还有画面的感觉。


·营造运动画面感:下面这套海报采用硬朗的直线和运营动作的完美结合,通过营造强烈的运动感给用户传达动的感觉。



2.3 视频推广的形式

由于短视频领域的兴起,朋友圈中转发视频的用户也日益增加,如果设计师可以给运营经理在以视频形式进行运营活动的推广的需求上出谋划策的话,也是一个很专业的设计师了。





四、让标题文案更加突出


造成用户不感兴趣的原因还有可能是信息传递效率不高,用户无法通过标题知道这是什么活动,怎么可能引起用户的兴趣而点击?

标题的文案可谓是用户判断信息的首要思想要素,他能迅速让用户了解活动主题,传达活动兴趣点,激发用户参与。


4.1 选择识别度高的字体

设计师是一个创造美的职业,但是也要有取舍,在我看来漂亮固然重要但高效的信息传递更为重要,尤其是在运营活动的标题设计上应该尽量选择一些识别度高的字体,先让用户清楚地知道该活动是干什么的,再用特殊的技法去吸引用户点击。


在标题字体上我比较推荐使用无衬线字体,因为黑体去掉过多的衬线装饰,是横平竖直,笔画粗细均衡,使字更为精练并且醒目。例如下面这张效果图,都是在黑体的字体基础上做的设计,光看标题就可以清楚活动大致是个什么类型的了。



4.2 给字体加点效果

如果觉得以上的方法并不能给用户起到视觉冲击力的效果,不妨给标题的字体加一点效果图,比如立体效果、加装饰物、更改字体结构等等,如图

我推荐一个我自己作图的习惯,就是先做标题文案的样式设计,再做配图元素的设计,我觉得这个方法既可以突出标题文案字体设计又很高效。博大精深,有机会后期会写一篇字体设计的文章,敬请期待吧。





五、用猎奇心理引起用户兴趣


以下内容不算是设计技法的内容了,算是运营思维方面的小窍门,我认为身为运营设计师,还是有必要知道的。



5.1 倒计时营造紧张感

如果在手机海报的表现形式上,加入以下这种“倒计时”主题,有助于激发起用户期待感和代入感,起到事半功倍的效果。


5.2 明星的效应

如果活动中有明星素材可以使用,千万不要放过这个机会,因为明星自带流量和话题,也是吸引用户兴趣,提高流量的好办法。


5.3 节日的热点

一年中有很多节日或者节气的时间节点,这些时间节点自带吸睛功能,可以把他们当成借势营销的主题,有的放矢地制作活动宣传图,增加曝光度,保证营销的新鲜度。


接下来,让我们谈一谈第三个问题——用户审美疲劳。









随着市场上充斥大量运营活动,对用户来说不免会造成审美疲劳,而用户出现审美疲劳的情况也是造成运营数据下降一个重要的因素。



一、了解什么叫审美疲劳


1.1 审美疲劳的概念

所谓审美疲劳,源于一个经典的心理学概念——刺激适应(Sensory Adaptation),就是用户长时间接触一种类型或者表现形式的事物而产生的厌倦、麻木的心理,最终都会被“适应”(即令人无感觉)。


这里我列一个例子,比如每天打你一棍子,你当然很不爽。但是连续打你一年后,你并不会感觉到不爽了,因为它变成了你生活的一部分,你已经没有感觉了——这就是刺激适应。


1.2 为什么会出现审美疲劳

审美疲劳的出现,有其客观必然性,多数情况造成用户审美疲劳的原因可以分为两种:


内容上眼花缭乱:是指一方面市场的运营活动太多,另一方面是活动内容让用户提不起兴趣,久而久之自然就会产生审美疲劳的心理。


时间上的心生厌倦:这是人正常的心理状态,当人从外部获得了幸福感(升值、金钱、美食)多会随着时间的推移最终回到基础水平。

这里我列一个例子,比如刚收到名校录取通知书的大学生,感觉到幸福感爆棚,但也最多持续几个月——等他入学后,日复一日地上课下课和高中生活一样,慢慢地觉得索然无味。



二、审美疲劳的解决方法

对于内容让用户提不起兴趣这一点,我在前一章我已经阐述了自己的观点,这里不做过多赘述了。但是我们可以就“时间上的心生厌倦”这一问题出发,来讨论设计方面的解决方法。


在我看来设计侧的解决方法其实就一个词——新颖,我总结设计师可以从以下5个方面着手进行设计方案的确立——夸张视角、细致刻画、多种风格、故事性、游戏化。



2.1 设计一些新奇的视角

这种方法属于吸引眼球而追求的形式上的“奇特”,比如我们看看第一幅设计稿(植美村的页面),夸张的鱼眼大透视配合风格感十足的原画级页面,至少第一眼就把我震撼了。


或者以微观视角看世界的视角去做设计稿,比如说OPPO的运营图设计,正常视角中人永远都是比手表大的,但如果反过来去观察,就好比自己像是一个小微生物去观察这个视觉,会给用户一种很新奇的感觉。



2.2 把刻画发挥到极致

形、色、质、构是搭建一个画面的基础,其中质感是拉开差距的关键,它是细微的,往往有质感的视觉感受会给用户一种高级的感觉,吸引用户点击或者是向下滑动浏览更多的内容。身为设计应该更专注于自己观察方法和技法的提升,一个图层达不到想要的效果,那两个图层呢?那把其中一个图层的图层样式调整成“正片叠底”呢?


质感虽然是一个相对抽象的词,但是做出质感并没有想象中的那么难,最重要的就是有耐心多做一些层次,如下图,不管是以文字或者图像为主形象的效果,都是因为考虑了字体变形、字体结构、投影、高光、色块对比等细节,才会让整体的效果给人一种很有质感的感觉。


*设计技法的提升是一个很漫长的过程,比较注重于直觉和感性的认知能力的培养,要多观察、多尝试,要相信自己总会有成功的那一天的。



如果你会3D类型的软件那就太好了,因为3D类型的工具最终呈现的画面本身就带有空间关系并且由于可以渲染不同种类质感的材质,画面天生带有一种质感,比如下面这两张图如果单单地铺上一个大色块点缀一些图形元素和3D类型的作品对比来看,质感还是差一截子。左侧是质感相对较弱的落地页,右侧是质感较好的落地页,如果你是用户的话,你会点击哪个?又会向下划动查看哪个呢?


并且现在的移动端设备的性能都有提升,并且5g的技术也在市场中出现,以前的3D场景加载卡顿的问题也逐渐在消失,我们不妨事先在运营活动中多加入一些3D的效果,来博取用户眼球。


就目前来看视觉观感偏向越来越立体化,而不是简单的平视扁平效果,以下这种成系列的设计稿,是深受用户所喜欢的,并且成系列的设计稿,也很容易让用户产生记忆点,是一个我非常推荐的做法。



2.3 多种风格的探索

为什么要做多种风格的运营设计呢?从设计美学的角度上来讲,用户的审美性质在发生变化,由过去“专注式”的审美在强大的信息流影响下变成娱乐式的“快餐式”审美,所以做多种风格这是适应市场趋势的必然结果。


每个企业的目标并不是为了用户设计出更好的视觉作品,企业的目的是在于用“创意”快速吸引用户眼球。有点儿像是铅笔和钢笔的关系,不是为了最好的铅笔而是钢笔,而是为了设计出可以代替铅笔的钢笔。


例如下图中的描边MBE风格、孟菲斯、噪点插画、复古等风格都可以运营到设计中。


今年大火的酸性设计(最早出现在西方60年代迷幻摇滚(Aicd Rock)文化中)是一种打破传统美感的设计,暗调的背景和镭射材质的素材搭配镂空的字体设计,在视觉感受上制造出一种迷幻绚烂的氛围,特别适合用在一些需要体现“潮流、新锐、个性”的视觉设计中。文章结尾我也给大家准备了素材,需要的去获取吧。



2.4 有故事性活动延展

大多数用户都喜欢听故事,在故事中包装自己的产品,告诉用户可获得什么好处的这种方法也是提高运营活动的数据的一种好办法。


这种形式早在2017年的offo就有用过,当时ofof的产品有借助于《神偷奶爸3》中小黄人的形象,设计了一系列新的自行车造型,以一系列报纸的形式设计,以小黄人车潜入车间为主要故事,了解 OFO小黄人版是如何造出来的,某种程度上说很好地宣传了 OFO。


例如《德芙Dove x故宫》的H5项目中,用长卷的表现形式绘制了从清朝至现代的过年场景,意指“以前宫里人也吃德芙,现在将德芙的福气传到千家万户”,让用户眼前一亮的同时,也宣传了企业产品。


《当代清明上河图》,快手品牌宣传H5项目中,设计师将现代与古代结合,通过长图绘制生活百态,用不同的故事来讲述励志故事和暖心故事,是故事性宣传企业品牌的经典案例。



2.5 活动ip的游戏化

用户对简单的商品宣传(运营活动)是没有什么兴趣的,但是如果把运营活动包装成一个游戏,却能俘获用户的芳心。很多企业正是抓出用户的这个心理,在自己企业的ip形象上做足了功夫,阿里巴巴集团就是这样一个典型的企业,只要是过节,ip形象总能参与其中发挥其最大的商业价值,是典型把ip形象加入运营活动游戏化的企业。


每年支付宝都会有积攒5福的游戏,在2021年他们还升级了自己的ip形象,让用户体验更加升级。ip形象的游戏化,未来也会成为一个趋势,每年应该都会有吉祥物来送钱。




三、构图好就成功了一半

画面清晰、构图合理应该是做运营设计的第一准则,尤其是大家都审美疲劳的今天,有一个好的构图,可以起到事半功倍的效果。


接下来我就介绍运营活动中常用的四种构图方法,便于大家在工作中有规律有节奏地排版画面上的图形、文字、元素之间的关系。



3.1 上下构图法

“上下的构图法”是将布局分成上、下两个部分,或使整个画面元素呈上下分布的趋势,主要信息(标题)常常融入图片中,放在主空间成为主体,阅读性文字放在次空间,这种构图的特点是内容的冲击力比较强。



3.2 左右构图法

“左右构图法”是占据图片和文字的一部分,形成左右两个独立的空间,产生良好的阅读体验。很实用的一种构图方式。这种构图的特点所占图幅较小,但要求文案的数量需要精简,尽量不超过6个字。



3.3 三分构图法

“三分构图法”是将画面中的内容三等分,并突出c位的信息,旁边有装饰元素围绕增添画面的气氛,具有稳定性又可以避免使用中心构图形成的呆板感。



3.4 中心构图法

“中心构图法”是把主体放置于画面视觉中心,形成视觉焦点,再利用其他信息烘托与呼应主体。其特点是能够突出重点信息,让用户一目了然。



3.5 对角构图法

“中心构图法”是指对画面进行等值分割,并将所要表达的信息对角排列。这种构图方式,会让页面显得更灵活,有动势,让画面有更多可能性。



3.6 倾斜构图法

“倾斜构图法”是版面整体或部分元素以倾斜的角度呈现在画面上,能很好地营造出轻松、动感、刺激等气氛感,一般游戏类活动也会比较常用。









好的运营活动会为企业带来可观的短期收益这是众多互联网企业所认同的,也是每一个企业所需要的,以下是我对运营设计的一些经验心法,希望对你有所帮助




一、如何最大限度地规避返工风险

对于设计者来说,最苦恼的是改稿,特别是那种做许多叠加质感光效的效果图,改起来成本很高,改稿这件事对运营设计师来说可以说是最头疼的事。


针对这种返工改稿的情况,我个人认为问题多数出在“沟通”这个环节。在沟通环节中最要解决的核心问题就是要进行有效的沟通,如果需求方(运营经理)和设计师之间的沟通是无效的,改稿那是必然结果,下面是我对于“高效沟通”上的3点经验。



1.1 明确项目的目标

身为设计师的你遇到一次两次交付后要改稿的情况倒是没有关系,有些协同的同事是初次合作,难免有些观点不对齐的情况,这属于正常的,但是经常遇到这种情况就要引起重视了。


需要反思一下是不是自己对项目的目标没有搞清楚,在做项目之前我建议直接让需求方说出痛点,多问问目标用户群体是谁?投放平台和渠道是哪些?上线时间和排期?尺寸大小等问题,把目标明确下来。


1.2 从抽象化到具象化

人和人受到教育不同,理解能力是不同的,有的需求方上来就说了很多概念词汇,比如我希望这次运营活动是高端、大气、上档次的,这很难让设计师正确地理解。


对于这种情况,我建议找一些可用的真实案例给到需求方,将抽象的概念具象化,事先搞清楚需求方心中的画面是什么样子的,特别是要明确设计风格、配色方案、背景元素、图文板式结构等信息。



1.3 提前弄清楚运营活动的要求

关于版权的问题是有可能导致项目无法上线的,我之前的一个项目就因为C4D这款软件侵权收到了一份律师函,需要将带有3D效果的在线元素全部替换。


因此在项目启动前可与需求方确认有关字体版权、图片版权、软件使用权等问题,避免在效果图出来后再去调整,耗费公司人力成本。



1.4 除了沟通还应该设立审核环节

这个并不属于交流的范畴,但是我觉得他也是影响设计师反复改图的重要原因之一,还是有必要说一下的。


运营活动上线都是有明确时间节点的排期安排的,所以设计稿审核的环节要特别重视,尤其是大型的运营活动不要等到最后的环节再去审核,因为如果审核不通过有可能会重新做,所以在设计过程之中应多设立几个审核环节,保持和需求方的想法是时时同步的,千万不要等交付时间快到了再进行审核,到时候谁加班谁痛苦。详细审核环节设置,大家可以参照下面的图片:






二、运营设计其实也可以增效

“增效”这个词近几年火得不行,尤其是和老板说增效的事情,他会非常感兴趣的。以下是我亲身经历的一个项目,也正是从这个时候开始,我开始思考团队增效的事情。



2.1 明白运营经理想要什么

以前遇到一个运营活动落地页的项目,需求方说;“我们不需要绘制复杂的插画放在Banner里,简单画点喜庆的元素,把活动标题展现清楚就好了,设计同学也不需要花那么多时间来设计,你们能多久给到我呢?。”


我相信有不少小伙伴曾经遇到过这个情况,通过以上案例,不难看出设计师想要的跟运营经理想要的并不一样。大部分运营经理更在意的是文案的露出、能多快地交付;而大部分运营设计师更在意的是图片美不美、炫不炫,整体的图形表达最终给用户的感觉是否和设计师所想的一致。



2.2 增效的两种方式

在理解了运营经理他们所在意的事情之后,我发现针对有严格交付时间的运营项目而言,运营设计的增效是很有必要的。一般来说“增效”有两种方式,一种是提高输出效率,另外一种是降低人工成本。


提高输出效率:我知道在行业内,58集团自主研发的运营页面设计平台——斑马智能物料设计审核平台和灵动编辑器算是两款增效的工具,这两款工具为运营工作提供高效且高质量的输出环境。


降低人工成本:我相信大多数同学的公司是没有这类平台资源,不用担心,没有我们可以自己搭建简略版的组件代替,比如公司里有些运营活动要跟上新闻热点,如果我们事先做好3-5个尺寸一致的模版套件,当新闻热点来的时候只需要插入图片更新标题就可以先推送出去,这种做法会极大地降低设计师的制作成本。


再比如组内成员可以利用平时的工作时间做一些通用的组件如红包、优惠券等,在要求快速完成运营活动的时候,可以挑选风格合适的样式替换。





三、做好运营需要了解用户心理

纵观市场,会发现大部分设计师都是作图高手,那些能够在前期参与策划运营活动,帮助运营经理想一些更有趣好玩儿的idea的人才是凤毛麟角的。



3.1 需要有正向、反向思考角度

记得看过一次求职类节目,一位求职者推销颈椎治疗仪的案例让我印象深刻。因为他的推销过程很精彩,他用了两种方法去推销产品。


第一种思路:介绍产品的优点,表示你买了我们的颈椎仪脖子的酸痛问题会得到缓解。

第二种思路:如果你不买我们的颈椎仪,你很有可能因为颈椎不舒服而失去良好的睡眠质量。


当然那个应聘者也得到了心仪的企业offer,那时候我就觉得这位应聘者很聪明,聪明的点在于对犹豫不决、不想买的用户都设计了自己的对策。


对犹豫不决的用户来说,通过正向介绍产品优势,从而获取用户青睐;对于不想买的用户则利用反向思维讲述这个产品会和你睡眠质量有关系。


设计师是一个很重视用户同理心的一个职业,当我们越是了解用户的想法,就会知道用户最需要什么,做的设计也就能更好地贴合用户需求,最终完成提高运营活动的数据的运营目标。



3.2 触发点击行为和用户心理有关系

2009年,斯坦福大学行为科学教授福格(Fogg)提出了一种人体行为模型,简称为 FBM。根据这一模型,他提出促使一个人的行为的发生离不开三个因素:行为动机(Motivation),行为能力(Ability)和触发条件(Triggers),用公式表达就是B=MAT。用户行为的产生需要动机、能力、触发等有机结合,通过对动机、能力、触发等干预可以影响使用者的行为。


引发用户点击行为,本就是运营设计师必须要做的事情,但是触发用户点击这个行为就要洞察到用户心理所想。这里我推荐《飞书官方-认知偏差知识手册》,大家可以从这本书里面了解一些用户基础的心理学知识。


这里我还想补充一点,设计师为什么要学习心理学。如果有人问你设计是什么,很多人都会回答设计就是解决问题,这是一个很标准的答案。在我看来,设计解决两个问题,第一个就是实现,把以前没有的东西做出来,第二个就是推广,把已有的东西卖出去让更多人知道。很明显运营属于第二种。


但是需要大家注意的是主语,上一句话的主语是“设计”而不是“设计师”。设计师更像是一个翻译官的角色,其本质在于精准地表达,设计师利用擅长的图形、色块等元素给用户传递信息,比如说格式塔原理就在于能帮助设计师,清晰地规划出用户先看到什么,提早预测出用户看到这张图会产生什么感受,做到可以通过设计技巧,让用户感受到设计师想传递的信息和感受,这就是我们要学习心理学的原因——为了更科学地了解用户使用习惯(如格式塔原则可以科学地构建效果图的阅读顺序),做贴合用户需要的设计,让用户满意,从而完成盈收的运营目标。总结一句话,运营设计师不仅要询问用户想要什么,更要询问运营经理想表达什么。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷 作者:斜杠7湿兄
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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




日历

链接

个人资料

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

存档