首页

当等待无可避免时,如何优化等待体验?

资深UI设计者

等待体验几乎不可避免、随处发生,无预期的等待还可能让用户心烦意乱。针对等待体验,我们该如何设计?


一、尽量减少用户等待的情况,尽可能缩短等待的时间

如当用户浏览网页的时候,若在用户浏览到已加载内容的倒数第5条再预加载10条内容,可缩短用户浏览接下来内容时的加载等待时间。再如生活中医院的预约挂号系统,用户可以提前一两天挂号,当预约时间到了直接到指定科室看病,避免了长时间的排队挂号。


二、如果是不可避免的等待,该用什么办法去优化等待体验呢?

总的原则是:在用户等待时给予用户反馈,告知状态,且尽量让用户在感知上缩短等待的时间。反馈可根据等待的预估时间不同、场景不同,选取不同形式。

  • 一般情况下理想的响应时间应该控制在 100 毫秒内,一些响应的时长可允许达到1秒,绝不可超过2秒无反馈。

  • 若是等待响应时长为2-9秒时,可设计循环的加载动效(loading),告知用户正在加载中。

  • 若是等待响应时长超过10秒时,可设计带有进度指示的加载动效。此时除了告知用户正在加载中(即告知等待原因和当前状态),还要告知用户预期响应的时间。



可采取分步响应用户的方式,多次反馈,可让用户在感知上缩短等待的时间。

如一些页面内容较多,加载时能分步显示,可按照框架、文本、占位图、图片的顺序加载显示,会在感知上缩短加载时间。又如加载一个新视频,视频前几帧优先显示最小体积的视频资源,等较高清视频内容加载出来时再切换为高清视频资源,可缩短用户等待视频开始播放的时间。



唐纳德诺曼提出过排队等待的6个设计原则,可以很好地帮助我们设计等待体验,6个原则分别是:

(1)提供一个概念模型。

(2)使等待看起来合理。

(3)满足或超越期待。

(4)使人们保持忙碌。

(5)公平。

(6)积极的开始,积极的结尾。


下面我们就说说这6个原则在优化等待体验上的运用:


1. 提供一个概念模型

概念模型是帮助人们把复杂自然现象转变成可用的,可理解的心理模型。概念模型可以帮助用户理解事物,了解事物如何运作以及当前处在哪个阶段、理解当前为什么处在等待状态,以及产生对未来即将发生事情的预估和期待。

如用户通过饿了么下单后,app上会用插画显示商家备货、骑士送货的过程。让用户了解外卖送到手中的整个流程,以及当前处在流程的哪一阶段,距下一阶段预估还有多久。如果是雷雨天,订单页面的插画还会模拟实时天气情况,用户看到插画想到骑士正在雷雨环境下送货取货,也会理解骑士配送辛苦、理解当前配送缓慢,缓解等待时的负面情绪。



2. 使等待看起来合理

使等待看起来合理,即通过概念模型使用户理解为什么要等待,明白等待是有缘由的。

如用滴滴打车时,当我们按下呼叫快车按钮,页面会显示动效光波信号向外扩散,同时会显示当前排队人数。设计师通过设计建立一个简易的概念模型,让用户理解当前的等待的原因,并认为等待是合理的。实际上滴滴派单的算法流程可能与页面显示的流程不同。但用户等待时会理解此时手机正在发出信号请求驾车信息、或此时正有多人在排队、或此时正在等待司机接单。



3. 满足或超越期待

满足或超越期待指用户给等待时间估算时长时,如果用户实际的等待时间比心理预期的等待时间要短,用户会有相对比较好的心理体验。

心理学专家曾做过一个实验,同等时间下,同样长度的进度加载条有三种进度显示方式:进度条速度匀速、速度先快后慢、速度先慢后快。三种相比较发现,当进度条增加速度先慢后快,用户的体验最好。而用户体验最差的是加载速度先快后慢,因为如果开始的时候加载速度比较快,用户一开始就有了较高的心理预期,当速度变慢时便低于用户的心理预期,感知体验就会变差。



4. 使人们保持忙碌

使人们保持忙碌即让用户在等待的时候有事可做。因为当人们非空闲时,对时间的心理感知会比空闲时对时间的心理感知要短。

利用这个原则的设计如:CorelDRAW软件下载安装时,软件安装等待页面除了显示进度条还放映国际优秀设计图片,CorelDRAW用户一般都是设计爱好者或设计从业者,通过让他们浏览优秀设计图片来度过软件安装时间,避免用户纯空闲等待。



5. 公平

当用户正在等待时,如果等待看起来是合理且公平时,不易引起用户的负面情绪。如果等待看起来是不公平的时候,更容易引起用户的负面情绪。如:当你正在排队买票时,同等条件下,你看到后来半小时的人比自己先买到了票。你可能会抱怨,“为什么比我晚来半小时的人都排到了我却还在等”。

针对公平方面的设计如银行的叫号办理业务系统。用户统一到取号机前取号,每当一个窗口的空出来,叫号系统便叫一个最早的号去该窗口办理业务。这比人们直接分散在多个窗口排队会更公平,不会出现早来却因为这个窗口排队慢而导致等待时长比晚来的用户更长的情况。同时把多个小队伍变成一个大队伍,用户感知上也会觉得队伍移动的更快,也有助于降低等待的负面情绪。


6. 积极的开始,积极的结尾

德国心理学家艾宾浩斯曾提出系列位置效应,指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。(来源:百度百科)即人们回忆体验时,在最开始和最后的体验比中间的体验更能让人印象深刻。所以当我们在设计等待流程时,要保证等待开始和等待结束时有较好的体验。


如当我们在餐馆排队结账时,一些餐馆结账台旁边会放着一盘薄荷糖,收银员帮用户办理结账时会对用户说可以拿几颗薄荷糖。这个小奖励会让用户走出餐馆后对刚刚结账时排队等待的不好体验的记忆变弱,而对最后的薄荷糖有更深的印象,从而对餐馆也留一个相对好的印象。

关于等待体验的优化设计案例还有好多,但基本的设计原则是相通的。

我们在实际设计时可先整理用户整个体验流程中可能等待的点,看看哪些是可以通过设计或技术缩短实际等待时间的。针对不能缩短实际等待时间的点,我们先预估每个等待的时长,并设计概念模型让用户理解等待的缘由且能预估等待的时间,且采取合适的方式让用户在感知上尽量缩短等待时间。

文章来源:站酷  作者:酱紫丫

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


2021 年度九个设计趋势分析

资深UI设计者

从 7 大设计领域、400 多个设计案例中,我们总结出了 9 条属于 2021 年的设计趋势。

前言

在 2020 年发生了新冠疫情等许多历史性的大事件,但世界始终保持着对未来的希望,好设计的诞生也不曾停步。

通用信息平台 UED 上海团队历时一个多月,从数字产品、品牌创意、平面视觉、工业、空间、娱乐与时尚等多个领域收集近 400 个 2020 年具有代表性、前瞻性的设计案例,对它们进行聚类分析,并结合下一年的时事变化来预测 2021 的设计趋势。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 团队按领域分组收集素材

2021 的趋势重点

设计与时代背景有着密不可分的关系,我们认为会影响 2021 年的设计趋势的因素主要有以下三个:

1. 后疫情时代的影响

新冠疫情的持续除了改变了大众的生活习惯外,也意外地推动了各行业加速线上化转型、提供「无接触」服务,出行上的限制催生了游戏等线上娱乐市场的蓬勃势态,甚至一定程度上疫情也影响了社会和经济格局,导致了一些新政策的出台。

2. 00 后成长为新主力军

新生代的崛起导致了流行风格的一系列变化:二次元等亚文化成功破圈进入主流消费市场、复古设计的重心从 90 年代向千禧年偏移。他们以更开放多元的思维方式和新视角,影响着下一个 10 年设计题材的选择。

3. 软硬件技术的发展

近年来智能设备的性能上限不断被刷新,诞生了许多创新的设备形态,使更生动的交互体验成为可能,另一方面,AR/VR 技术经过上一个十年的雕琢,性能和效果逐步得到验证,具备了量产的技术沉淀,将迎来一波商用普及的浪潮。

我们从去年的设计作品中提炼设计概念,并结合上述的社会背景推测其在新的一年的变化与发展,最终总结出了视觉表现和体验交互两类共 9 条 2021 年度设计趋势。

2021 年度设计趋势

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Adobe MAX 2020 视觉作品 by Stu Ballinger

概念阐述

「 酸性平面」风格融合「Y2K」美学的未来感,形成了独特的「未来酸性金属风」,典型特征有:

酸性渐变:一种会引起不适但足够刺激的迷幻渐变色。这类配色打破了传统美感的标准,追求感官刺激,给人异次元下致幻而不安的感受。

金属感:以熔融形态在环境光下呈现出诡秘的反射,这种反常规的液态质感所带来的违和,在传统科技感上增添了几分神秘。

透明胶质:液体或是 PVC 半透明胶质,配合流体动感的形态,折射出光的幻彩,给人强烈的亦真亦幻感受。

应用场景

未来酸性金属风反差感兼具未来感的特征,决定了它在时尚、音乐、潮流以及艺术圈有很好的延展性。服装鞋包、艺术家创作,以及传达个性自我的品牌平面广告,都可以看到其身影。

相关案例

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ The Future Vision of Microsoft 365 宣传视频

概念阐述

随着产品硬件性能的不断升级,设计语言也开始追求真实感。相比过去,「类玻璃柔光材质」除了更注重「轻」的概念,在质感上也呈现出更加轻盈、细腻以及自然的趋势。

类玻璃材质的表面呈现微磨砂感的半透明质感,透光而不透视,通过清晰的边缘来强化物理质感,两者对比呈现出一种「虚实结合」的美感。该材质多以轻薄的片状形态悬浮于场景中,减轻重量感以带来轻盈的视觉感受。

应用场景

「类玻璃柔光材质」轻盈与通透的视觉感受,能营造出未来感十足的场景,很适合阐述科技智能的概念。因此该风格成为了一大波科技背景公司的设计首选,其中主要以硬件系统以及 B 端、工具类的产品为主,应用场景包括界面设计、推广视频等。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Louis Vuitton × League of Legends Collection

概念阐述

近年来,品牌跨界合作的对象不再局限于品牌之间或明星名流,众多服装、奢侈品、数码产品等消费市场的强势品牌纷纷向游戏和二次元等虚拟 IP 抛出跨次元合作的橄榄枝。这种合作方式成就了「三次元」品牌与「二次元」IP 的双赢局势,将在 2021 年继续发展并造成更广泛的影响。

应用场景

游戏和二次元元素大热,手机、化妆品、服装等产品通过结合该类元素,以新的形式吸引年轻用户:为像素风格的游戏设计服装、为全息的虚拟偶像捏脸塑形、为动漫人物拍摄杂志封面、在一款电子游戏里搭建新品发布会等,相应地,跨界应用对设计师的涉猎领域和技术跨度也有了更高的要求。

相关案例

一线顶尖奢侈品品牌相比以往与动漫游戏类二次元 IP 合作更频繁,除了经典动漫,也不乏新鲜的热度 IP。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

在《Evangelion 新世纪福音战士》25 周年,OPPO 联名这部影响一代人的动画神作,推出了一款从快递包装、外盒甚至是卡针,里里外外都深度融合 EVA 元素的联名机型。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ OPPO × EVA 定制版手机 OPPO Ace2

美国说唱歌手 Travis Scott 2020 年在《堡垒之夜》(一款线上竞技游戏)中办了一场虚拟演唱会。这场演唱会共吸引了 1230 万玩家同时在线观看。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Photographed by Sean Thomas, Vogue, January 2020

概念阐述

「亲生命性设计」原为建筑和空间设计中的概念,意为「运用天然材料、自然光和植物创造令人愉悦舒适的建筑环境」。受城市化进程加剧及全球疫情的影响,人们渴望亲近自然的欲望和需求变得越来越强。产品和自然元素彼此交融,从主客体关系转为互相依赖的存在,以更为和谐与自然的交互方式与用户进行沟通与连接。

应用场景

自然元素将在不同感知维度以更贴近真实自然的方式融入各个领域的设计,比如在工业产品设计中使用更加贴近自然物体的表面肌理,在建筑设计中将人造空间作为自然空间的延伸,在数字产品设计中使用更拟真的自然音效和光照等等。

相关案例:

2021 时尚界不约而同地强调了自然元素的使用和对环境保护的呼吁,各大品牌都用自己的方式演绎了「自然共生」的服装设计系列。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

还原自然界中的真实材质成为了新的设计灵感,被应用到各种设计中。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

Vivo OriginOs 系统通过行为壁纸系统将常用的系统功能和展现真实自然场景的动态壁纸进行联动。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Vivo OriginOs

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 山水 Mountains & Rivers by Particle (Gao Yang)

概念阐述

近年,国人的文化自信逐渐增强,国家扩大内需、扩大消费的政策导向为国内消费品品牌带来了巨大的机会。「中国设计」的标签已经成为新一代的时尚潮流,带有中国本土个性、体现中式美学的设计受到更多品牌的青睐。

应用场景

越来越多中国品牌开始注重汉字 Logo 的使用和设计,更多现代设计力求为中式美学摆脱民俗、皇家的刻板印象,木、石、竹这些蕴含中式精神内核的元素成为了工业设计、建筑设计中新的缪斯。

随着中国的国际影响力进一步扩大,国际品牌也会提高对中国市场与文化的关注,在设计上融入更多本土元素。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

可口可乐中国与汉字文化推广机构「好字在」和方正字库联合推出的这款字体,反映了可口可乐对中国文化的深入理解和对本地化运营的关注度。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

可口可乐联合推出的中文字体「在乎体」

同仁堂旗下「知嘛健康」在北京开设线下体验店,店铺设计提炼汉字、中药、药房等中式元素作为灵感,用现代化的方式呈现,是极具现代感的「中式」空间设计。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 同仁堂旗下「知嘛健康」线下体验店 by 无象空间建筑

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Microsoft Haptic PIVOT 微软腕带触觉设备

概念阐述

在增强现实中,人机交互将更多发生在物理空间里,虚拟的数字信息将借助形变和震动被模拟为触感。得益于新型传感器的拓展应用,硬件设备实现了对温度、形态、力量的数据监测,同时各大硬件厂商也逐步对震动马达等硬件进行了完善升级,从而为进一步的触觉模态设计提供了支持。

应用场景

涉及领域除了现有的游戏、驾驶、健身等场景外,更有趋势被应用于创新教育、操作培训及有风险的试验演练中。

相关案例

任天堂在健身环 Ring-Con 内加入的力学传感器实现了对力量(张力、拉力、压力等)的监测,并利用 Joy-con 震动来对用户动作的标准性进行反馈提示。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 《健身环大冒险》on Switch

微软研发部开发出了一套 Haptic PIVOT 腕戴触感反馈方案,通过活动的机械结构,更逼真地模拟出物体的握持感。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Haptic PIVOT 使用演示

索尼推出配备了音圈马达的 PS5 DualSense 无线手柄,扳机键内增加了一个由电机驱动的齿轮,通过震动模拟出枪支的后坐力、弹簧的弹力、绳索的拉力等物理效果。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ PS5 DualSense 无线手柄使用演示

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Flight Booking AR application by Bala GN

概念阐述

现实生活中,人与人、人与物接触产生的实体服务称为线下服务,由网络等技术支撑的人与硬件设备交互的服务称为线上服务。在硬件设备、网络技术成熟的当今社会,线下服务向线上服务迁移的过程中融入了更多 AR/VR 等虚拟服务,也带来更多新的设计行为和交互方式。

应用场景

原本需要亲临现场才能完成的体验,现在可以通过线上的方式实现,这不仅体现在因疫情催化产生的线上办公、线上毕业展等强需求场景,也在购物、试衣、健身等更贴近生活的领域应用。

相关案例

用户在 Gucci APP 上挑选自己喜欢的手表后,将手机摄像头对准手腕,就会显示「试戴」效果。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Gucci APP 虚拟试表

各大院校毕业展因疫情无法在线下举行,一些学校通过线上展厅的方式,让学生的毕业作品可以通过网络浏览。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 中央美术学院 云端美院

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 香港理工大学 polyudesignshow

Balenciaga 2020 年用一款电子游戏代替了线下时装发布会。在视频游戏中,玩家能够在五个主题场景中欣赏到 2021 秋季系列的新款服饰。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Balenciaga:《后世:明日世界》

硬件设备的创新使线上健身指导有了更合理的使用场景和更人性化的体验,用户通过线上内容和服务在家也可以获得接近健身房的体验。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Tempo Studio:家庭智能健身设备

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ POPMART 泡泡玛特

概念阐述

「情感疗愈」是一种有温度,无攻击性,注重细节的设计方向。这类设计旨在治愈修补心灵中的创伤,不只注重功能的完善,也更在意情感内涵的打磨。它也可以帮助人们敞开心胸,接纳自己内在的所有面。

应用场景

在产品设计中,一些抚慰人心的小功能、小彩蛋往往带有着治愈人心的力量。在角色形象上,柔软、可爱的造型在带给人无攻击感的同时强调着陪伴的意义。在娱乐领域,也出现不一味强迫用户达成某个目的慢节奏「佛系」游戏。

相关案例

网易云音乐来自「张开双臂拥抱别人」动作灵感的抱一抱彩蛋,让原本只有文字点赞的评论区更有温度。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 网易云音乐的「抱一抱」动效

Switch 游戏《动物森友会》在 2020 年异常火爆,归功于其萌系治愈的风格和追求自然随性的生活方式,也让疫情期间的玩家们暂时逃离严峻紧张的现实生活。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Switch:《集合啦!动物森友会》

盲盒的精神内核是「收集、陪伴、治愈」,泡泡玛特签约的 IP 形象,大多以可爱、萌系为主。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 泡泡玛特的盲盒萌系 IP 形象

Disney 与 Pixar 出品的动画电影《心灵奇旅》用轻松的方式探讨生活的意义和人生的价值,电影用它独特的美术风格和感人的故事斩获超高的口碑和评分。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Disney · Pixar《心灵奇旅》

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ OceanPlastic 废弃塑料重造

概念阐述

2020 年世界各地重大自然灾害频发,环境污染严重,刺激着人类对生活环境的审视。更多品牌开始探索材料再利用的可能性,从自然衍生产物出发,从而降低对大自然的破坏。年轻一代对于再创造产品有更高的接受度,循环材料转化为塑料颗粒,组合成独一无二的花纹和肌理,给人专属限量感,再生材料成为新的流行元素。

应用场景

消费者将继续青睐和卫生健康、环境保护相关的价值品牌,越来越多的快消、包装厂商开始研究材料回溯,组建相关部门,加入循环经济浪潮中。

相关案例

运动品牌 Adidas 与 Nike 都推出了由回收废料制作的充满设计感的产品,在宣传品牌环保意识的同时也引领了再生产品的潮流。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ adidas 与 Parley Ocean 合作推出由海洋回收废料制作的联名产品

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ 同样使用了废弃材料的 adidas 球衣

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ Nike 将生产车间加工过程中产生的边角料转化为产品设计的主要材料

由 99% 废弃奶茶杯+ 1% 废弃原茶渣再生而成的「真垃圾·手机壳」

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ TRASHAUS 真垃圾再生手机壳

Freitag 的 2020 新款 F601 MALCOLM 是一款个性化背包,用一块再生的防水油布保护,并由用空 PET 瓶制成的防水织物制成。

字节跳动出品!2021 年度九个设计趋势分析(附400+案例)

△ F601 MALCOLM

除消费产品外,肯德基的可回重复利用餐盘、星巴克倡导的纸质吸管、外卖行业各公司的环保举措等也体现了餐饮外卖行业对循环经济的重视。

结语

在充满未知的 2021,无论是后疫情时代世界的变化、新技术的发明应用或是国际社会环境的走向,都会影响大众的生活习惯、行为方式和审美取向,同时也决定了未来设计的发展方向。但这其中不变的,是软硬件发展不断突破视觉表现的上限、设计师追求「以人为本」的核心理念以及通过设计去提出和解决问题的目标。

我们期待着上述预测性的分析能在今年的设计中被验证。但设计本身是一个迸发新奇创意的过程,也希望上述的设计趋势能激发设计师们更丰富的灵感、为设计领域提供更多的可能性。

文章来源:优设  作者:今日头条UED

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


遇到不同的运营活动,如何快速找到设计风格?

资深UI设计者

在日常产品运营活动中,用户运营设计是不可或缺的一部分,其展示的内容也是各式各样。本文结合腾讯动漫日常的运营活动设计,浅谈一下在遇到需求时,如何根据不同的活动类型快速定位适合的风格,提高运营活动质量,促进用户转化。

遇到不同的运营活动,如何快速找到设计风格?

什么是用户运营设计

1. 用户运营

从定义来看,即以用户为中心,根据用户特性和运营核心目标,制定相应的运营策略,对策略效果进行收集和验证,以达到运营的核心目标。所以用户运营主要围绕用户、活动、目标来展开,借用增长里的 AAARR 概念来说用户运营的目标:

遇到不同的运营活动,如何快速找到设计风格?

作为用户运营设计师,我们应对用户生命周期 AAARR 模型有一些深刻的理解,以最低的设计成本来获得最大的运营收益。

2. 运营设计团队在做什么

目前我们用户运营设计团队主要负责的项目是:腾讯动漫会员和平台类活动设计、运营推广、增长服务等相关业务。基于用户促活和营收核心目的延展长线运营、用户增长、会员服务、大型促销等工作内容。

遇到不同的运营活动,如何快速找到设计风格?

动漫平台常用设计风格

1. Q 版漫画风格

Q 版在动漫设计中比较常见,风格一般会比较可爱、幽默、搞怪···而且有很强的线条表现力,能有效吸引用户注意力,提升页面的趣味性、友好度和品牌感。

遇到不同的运营活动,如何快速找到设计风格?

2. 涂鸦插画

涂鸦风格是一种有趣且极具创意的风格,在页面中使用涂鸦设计,充满自由和力量感,能够打破扁平化的运营视觉,强化故事感和情感性。

遇到不同的运营活动,如何快速找到设计风格?

3. 肌理插画

肌理插画的色彩明快,画面简洁,这种风格通常会加入杂色,增加颗粒感、质感,也会通过明暗色块增加立体感,适合快速迭代的活动需求。

遇到不同的运营活动,如何快速找到设计风格?

4. 孟菲斯插画

使用高纯度、对比强烈的配色,和无规律可循的排版吸引人的眼球,该风格大胆、活泼且富有表现力,通常会运用描边协调画面并突出重点,给人良好的视觉舒适感。

遇到不同的运营活动,如何快速找到设计风格?

5. 渐变插画

渐变插画运用大量低饱和度的渐变,营造出色彩鲜明、对比强烈的光感,渐变插画细节丰富,时尚、前卫的视觉冲击力,在一定程度上也能够促进用户的兴趣点。

遇到不同的运营活动,如何快速找到设计风格?

6. 划重点

插画在动漫平台用户运营活动中是主要视觉触发器,能瞬间传达大量信息。在日常活动中需结合运营主题和用户的需求,合理选择相应的风格进行设计,强化页面的吸引力。同时也应做好运营插画设计的构图、元素、配色等,注重页面细节,强化活动交互,让用户可以更快理解和操作。

实战案例分享

这里用腾讯动漫开直播系列宣传活动为切入点,进行案例分享。

遇到不同的运营活动,如何快速找到设计风格?

1. 活动背景

腾讯动漫上线全新的系列直播活动,覆盖唱歌、聊天、手工、绘画等多种泛次元内容,需要设计预热期和正式期的页面,宣传本次直播活动同时,为腾讯动漫上线直播产品功能打好基础。

2. 设计分析

在设计过程中,要结合实际运营需求,充分发挥专业能力,产出匹配的设计思路。当需求方在视觉要求上无法输出明确风格偏好时,可利用活动主题挖掘用户核心需求并形成有效反馈,从而找到适合的设计风格。

分析&沟通需求

腾讯动漫将借助此次活动,将平台的直播内容和品牌印象最大限度触及给用户。

遇到不同的运营活动,如何快速找到设计风格?

为此我们确立了本次活动在需求上的目标

  • 品效协同,既能够符合腾讯动漫平台属性又能够吸引不同特性用户为活动带来流量
  • 能够引发用户在社区或者其他渠道进行传播,并对系列直播产生期待
  • 将直播活动带给用户丰富好玩互动的定位,挖掘更多潜在用户

用户定位

直播运营活动离不开主播和用户的参与

遇到不同的运营活动,如何快速找到设计风格?

可以看到直播为观众提供更多与喜爱的画手和偶像互动的机会,同时也为主播作者打开了更快速直接的传播渠道。

交互梳理

1.预热页面

核心:打造用户认知,对直播活动内容的理解,流量分发,促使用户关注接下来的直播活动,以及订阅个人喜欢的主播

遇到不同的运营活动,如何快速找到设计风格?

页面的首屏头部区域是利益点区域和活动氛围搭建。中部是强心智内容,也就是纯运营强控制和活动推荐的内容。最后部分是弱心智内容,主要用于活动流量承接的主播内容推荐。

2.正式活动页面

场景化氛围搭建,内容与形式勾起用户点击欲望。

遇到不同的运营活动,如何快速找到设计风格?

页面头部用主题文案和视觉元素,在首屏加入当前直播视频窗口,让用户快速沉浸于直播场景中。在直播的表现上,坚持视频排版为主,融合直播属性,吸引用户关注。

3. 确定风格

关键词提炼

通过对活动定位和用户进行设计分析,我们把对“腾讯动漫开直播”传递的感觉转化为系列可表达的文字,并提取活动关键词“直播、 互动、弹幕文化、潮流、动漫符号、二次元、沉浸感”进行思维发散。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

视觉化表达

基于这些关键词的概念方向及腾讯动漫直播场景内容,对比目前市面上部分直播类设计风格发现更多关注的是直播氛围营造。因此我们在场景化设计时需将轻质感的二次元化视觉元素融入到画面中,结合常用的插画设计类型,我们选取渐变的插画风格更符合直播沉浸感的主题。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

主色调使用炫目的红黄品牌色渐变设计,应用冷暖对比增加直播场景氛围,优化增加荧光质感与光影,使用蓝紫颜色点缀增加视觉丰富度,凸显细节,并有效划分视觉区域,用色彩使设计整体和谐统一,突出活动主题,与体验者达成情感共鸣。

4.设计发力

直播视觉调性营造

我们立足平台品牌属性,从形、品、质三大纬度提炼视觉因子。

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

  • 手机/弹幕/爱心图形——直播属性的表达
  • 企鹅娘&黑子元素——体现腾讯动漫的品牌属性
  • 渐变艳丽色彩——通过丰富的光影和渐变塑造更多的细节,打造更加精致的设计效果

二次元平台属性融入

遇到不同的运营活动,如何快速找到设计风格?

针对动漫平台的直播场景,探索出符合他们审美的视觉风格,需将二次元的要素融入,包括形态(物体符号拟人化),比如在唱见 icon 上将话筒加入眼睛;样式(元素 Q 版化),比如开播提醒 icon 加上一只软糯的黑子等

插画风格锁定

预热期在风格上选择了以企鹅娘为主体,手机外框作为基本型去组合头图,荧光黑子和视频黑子左右打造直播氛围,同时在画面上迸发出弹幕和拟人小元素,形成强有力的沉浸感。

遇到不同的运营活动,如何快速找到设计风格?

正式期在风格延续预热页面的组成元素,将主题文字作为头图重点,营造与直播相关的场景,使用手机框型作为整体概念图形,来表现屏幕互动,寓意主播与观众的链接。采取弧形切割头图与页面,将用户的视觉聚焦到直播中模块,突出活动的主题。

遇到不同的运营活动,如何快速找到设计风格?

  • 全时期场景兼容性以及风格延续性

用户运营活动不是做完页面的视觉工作就结束了,在上线之前,我们还需要延展一系列的物料设计,如:app 首屏 banner、小纸条、通栏、福利频道等,每种素材的规格不同,要求也不同

遇到不同的运营活动,如何快速找到设计风格?

遇到不同的运营活动,如何快速找到设计风格?

4. 设计总结

面对种类繁多的运营需求,我们可能无法迅速感知哪种风格会比较贴合活动调性,但通过活动定位和用户需求的分析,可以帮助我们找到视觉方向,然后结合自身的设计方法和技巧,灵活应用到工作项目中。这里要求我们掌握更多领域的能力,发挥出更多不同的表现风格。

在有限的时间和资源下,跨团队的高效沟通能够有效的提升效率,针对运营需求风格偏好,快速定位到相应的设计感觉。

不要盲目参考竞品的风格,首先要考虑自身的品牌调性,根据品牌特色和用户特点来确定风格。项目案例中的设计起初就出现了这样的问题,最后融入了品牌的颜色和二次元属性,才让设计变得合理。

针对多时期业务线下的场景搭建,视觉规范化显得尤为重要,在案例中,预热期和直播期元素互通,视觉风格统一,提升活动的品牌感知,降本增效,提升设计效率,确保宣传资源的一致性。

以上是我对运营设计风格选取的一点设计思考,期待与大家一起探讨交流。



文章来源:优设  作者:腾讯动漫TCD

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


做产品是跟世界发生连接的过程:专访潮汐App创始人郎启旭

资深UI设计者

这期节目的嘉宾郎启旭成长在外婆家的鸟叫虫鸣之间。启旭是这样描述他的外婆家的:「我外婆家在贵州的山村,背后有一座山。每次回去,我都会想起小时候在那里度过的一些日子。夏天五六点钟,从森林走到村子里,路上一个人都没有,日光逐渐暗下去,青蛙开始叫,整个山里面都回响起来鸟叫虫鸣的声音,安静、空旷。下雨之后出太阳,如果你在太阳落山的时候去山上,可以采到很多蘑菇。」

后来,启旭离开山村,来到城市生活、读书和工作。他的成长轨迹和我们的很多嘉宾很像,十来岁的时候,开始学电脑、读《大众软件》,在大学里试过创业,毕业之后做了产品经理。那时候,连启旭自己也没有想到,若干年后,他怀念的外婆家的声音,会以一种特别的形式,重新回到他的生命里。

2015 年,那是启旭在职场的第 3 年,他工作忙碌,却也波澜不惊。那时候正赶上国内「创新创业」的热潮,启旭的朋友想拉着他出去创业,但被他婉拒了。同年五月,启旭出差来到硅谷参加会议。会议的间隙,启旭去了硅谷附近的一个海滨小镇。他在小镇的海滩上坐了一下午,听着海浪拍打沙滩,他暂时忘记了太平洋另一端的繁忙,开始了一场跟自己内心的对话。这场对话后来改变了他的职业轨迹。

我想要通过自己的时间、自己付出的努力,去创造什么样的产品?

Hoka:你说你在卡梅尔小镇呆了一下午,你当时脑子里面在想什么?

启旭:我当时就有种很神奇的感觉,有点像你站在太平洋的另外一端,回过头去看原来的自己。会想到我应该做什么选择、要去做什么事情?那种感觉是一种抽离,跳脱出日常的环境跟平时工作的轨迹,让你有机会去思考这些问题。后来好多时候我都会回想起来那个下午。那个下午本身没有给我带来突然的这种伟大的灵感、或者很清晰的决策,但我觉得那样一个状态很多时候会提醒我自己。

回到广州,在每天的日常生活之外,我就开始去思考我想做什么事情?我想要通过自己的时间、自己付出的努力,去创造什么样的产品?这些问题就开始冒出来。

我想要去做一些自己更认可或者说更有成就感的事情。我那个时候应该是 26 岁,也挺年轻的,反正也 nothing to lose。我也一直是一个比较有创造欲的人,想要去做一些自己认可的事情。如果到最后也没有什么结果,我觉得我也 OK,因为我至少去试过了。所以就开始了创业,离开大公司,自己出来做。所以我为什么说我自己不是一个特别典型的创业者,因为我离职的时候,其实连自己做什么都没想好。其实后面回想起来整个过程,我也觉得好像确实还蛮有勇气的。我其实当时没有这个感觉,但是我后面回想起来,觉得确实可能也不是所有人都会做出这样的选择。

Hoka:这之后你就开始创业了,我知道你创业一开始其实做的不是潮汐,而是做了一个 SaaS 软件。你当时是怎么样的一个状态?

启旭:当时我们自己做的那个项目,坦率说,确实从需求的选择、切入点来看,我觉得还是有很大的问题的。因为是第一次创业,所以是一个摸索的过程,包括我那一次也没有融资,都是用自己的钱,所以当时各方面的压力都会很大。一方面是你出来一段时间,你也肯定希望产品上、业务上看到一些进展。第二是你也会有一些现实层面的压力,不管是资金也好,还是团队。当时我们也是有一个比较小的团队,团队的伙伴们其实也需要有一些发展上的考虑。

在公司里面做事情,相对来说业务模式都还是很清晰的,它是一个确定性比较高的事情,它可以提供比较安全的环境,你不需要去操心业务,或者说市场变化。但是你创业,或者说自己去做一个产品、推向市场的话,你考虑的问题、思考的角度(会更复杂),包括你也受限于你自己的现实状况、团队的现实状况,所以会有一个挺正常的焦虑或者压力的过程。再加上那段时间其实自己家里也有一些情况,加到一起,有一段时间挺糟糕的。

Hoka:我在其他报道里也读到过,说你当时压力很大,正好你大学的时候学过冥想,所以想到了可以去做冥想缓解压力。你大学里怎么会想到去上冥想课的?

启旭:当时我们正好有一个哈佛过来的老师,他开设了关于冥想、佛教的一门课,我当时很感兴趣就参加了。我自己在 2016 年这个节点,因为遇到了刚才说的状态,想起来我大学接触了冥想,所以决定开始深入去练习。也是很阴差阳错,就觉得好像可以试一试,从最基础的数呼吸这些事情开始,每天做十几、二十分钟,这样坚持下来,有时候睡前失眠的话也会冥想。

Hoka:我看报道上说这段经历也启发了你去做潮汐。但是潮汐最开始其实是一个白噪音或者说自然声音的产品,自然声音这个部分(的灵感)是哪里来的?

启旭:因为我刚才也分享,我从小是在贵州长大,在一个比较偏原生态、有很多森林、山区的地方,所以这些东西对我来说,还蛮有那种所谓的疗愈作用的。上大学的时候,我是第一次离外婆家那么远,有时候下午两三点钟,我就会想起来,这个时候我外婆家的院子里面在发生什么。其实无非就是白云在飘、院子的光影在流动,太阳从很晒然后到下山,整个世界都很空旷、很安静。但与此同时,我们在城市里面对的是车水马龙,有很多烦心的事情。有些时候我突然就会想起来这个对比,我们觉得这个世界每天都有很多变化,但其实也没有那么多的变化。

志珊:所以是不是当你听到一些自然的声音,它会把你从现在的创业状态带回到另外一种状态,比如回到小时候那种感觉,让你感受到放松。

启旭:对,当时我就是一边做冥想,一边找很多这种自然的声音去听,这个过程给了我自己蛮大的帮助跟支持。所以当时就想,要不就把这样一个放松减压的体验做成一个产品试一试,大概就是这样子开始了最早的潮汐。我们当时挑了五个自然声音,左右滑动就可以切换声音。

Hoka:当时白噪音可能已经有蛮多人在做了,我看那时候潮汐有一个卖点是结合番茄时间,这个还蛮有意思的,你们是怎么想到这个点的?

启旭:因为番茄工作法是 25 分钟工作、5 分钟休息,我觉得如果 25 分钟工作的时候,我能够通过声音来暗示说你需要专注,就相当于把我们在番茄工作法里面的 25 分钟通过声音来填充起来,我觉得这个点就很棒。这其实是一个更完整的时空的概念,休息的时候我就不播声音了,你就可以站起来去喝杯水。

把白噪音或者说自然声音跟番茄工作法结合到一起,我们是在这个领域里面的第一个产品。这样大家会非常明确地对应说这个东西可以帮助我专注。如果我说给你五个自然声音,你能想到能用它来干嘛吗?你其实不太容易想到的,对吧?但是当我们这样设计之后,它就很简单,用户大概就知道这个产品可以用来帮助我专注,帮助我获得心流体验。

我们当时主要的工作还是在做原来的 SaaS,所以这个项目其实是苦闷工作之余的一个调剂,做一个产品来满足一下自己的那种感觉。但是这个产品出来之后也很神奇,明明我们当时所有的宣传语上主打的都是专注、心流体验,但我们发现用户会用它在各种千奇百怪的场景,会有人用它来助眠、用它来敷面膜。敷面膜那个场景我印象特别深刻,因为我觉得好 match,我觉得用户太聪明了,因为敷面模需要大概 15 分钟到 20 分钟,你敷上面膜,打开潮汐,然后开始一个 timer、听自然声音,这基本上就是一个 mini spa 的概念(笑)。

包括还有一个妈妈用户,她自己在家 SOHO 工作带小孩,她小孩刚出生,她一边工作,一边打开潮汐,这个时候她突然发现她小孩也睡着了,好像一箭双雕的感觉。就挺神奇的,用户会挖掘出来很多用法。但是确实最早那个点是提供一个时间跟空间,大家能够随时随地从现实生活、从很繁杂的当下抽离出来。

Hoka:什么时候你开始觉得这么一个最开始你给自己做的小工具,可以变成一个公司、变成一个严肃的事业来做的?

启旭:我们其实在 2017 年的时候就把 SaaS 给停掉了,也是把那个项目关掉之后,开始去想接下来该做点啥。这个时候自然目光就会看到潮汐,发现原来潮汐在当时那一年中间,差不多有一两百万的累计下载。而且我们一开始就做了英文版,还会收到一些海外用户的邮件,大家也知道,海外用户写邮件的方式,就更让你觉得挺有那么回事的感觉。我们当时收到过一个土耳其的用户来信,那段时间好像土耳其的政治格局有点动荡,他就写信来告诉我们说,特别谢谢我们这个产品,让他在那样一个环境下,还能够去获得一些平静跟专注,能够去投入生活、投入工作,这也是我印象很深刻的一个反馈。

所以我们回过来看 2017 年的时候,就发现也积累了一些用户,而且还持续不断地收到很多用户来信,告诉我们他们的需求是什么。其实这个过程中就有很多人说他在冥想了,也有很多人说他有睡眠问题了。所以基本上用户已经把我们接下来该做的事都已经讲清楚了,从那个时候我们就开始填坑了。确实很有意思,你提出来一个想法,可能一开始没有把它讲得那么清晰、完整,但是用户其实能够体会得到你大概在做什么,他会以他的方式去告诉你说他想要什么,你会发现他想要的那个东西,可能跟你最早想要去做的那个更完整的东西是很 match 的。

同时海外像 Calm、Headspace 等一些产品,我发现他们在 2017 年有一个明显的发展的拐点。所以我觉得一方面我们自己有一个验证,有用户的积累、用户的需求、呼声,能够感受到大家对焦虑、压力、睡眠(的需求),包括在信息过载、过度娱乐化、过度消费主义的情况下,其实大家很需要这样的产品和服务,去解决身心健康方面的需求跟烦恼,但是坦率说选项并不是那么多,所以我觉得这个事情肯定是有商业上的机会的,也比较符合我自己做事情的价值观,所以就觉得好像可以严肃地去思考这件事情是不是可以变成一家公司来运作。我们就从那个时候开始正式地成立一个公司,而且 all in 到潮汐,就这么开始了。

这很有可能是你能听到的最好听的鲸鱼的声音

Hoka:现在潮汐已经远远不只是 5 个自然声音了,除了那些比较常见的雨声、海浪这样的声音,我看到你们还有一些挺特别的声音,比如「鲸鱼」,能不能跟我们讲讲「鲸鱼」的故事?

启旭:我们的小伙伴真的找了特别多的鲸鱼,我可以 99% 地确定说我们潮汐的鲸鱼是目前这个世界上你能听到的最好听的鲸鱼的声音。真的,我们找了 9 个月还是 12 个月。(为什么这么久呢)其实电影里面也会有这样的问题,比如说大家真的希望看到真实的 90 年代的场景吗?其实是不一定的,因为大家对 90 年代的场景,或者比如说 30 年代的纽约,大家会有一个想象,但可能它不是真实的。回到鲸鱼也是一样,其实真实的鲸鱼的声音,可能有些人听了会不太舒服的,它可能没有大家想象的那么美好、那么好听的,所以这个时候我们需要在中间去找一个既是真实的、但是也比较符合大家想象的鲸鱼的声音,所以难度就在这里。就蛮奇妙,所以什么东西是真实的呢?我们产品就到处是充满了这样的一些情况:「真实」的东西不见得是大家觉得「真」的东西。

Hoka:你们鲸鱼的音频的时候,是在很多个不同的可选的素材里面一直在听吗?

启旭:对,因为鲸鱼的声音录音本身就不是那么多,所以我们会去主动联系一些录音师,问他们有没有(鲸鱼的声音),是个漫长的「追鲸鱼」的过程(笑)。

Hoka:录音师这种职业是专门去海底、水下录声音的人吗?

启旭:对,其实国外这部分会比较多一些,有一些人可能本身就是摄影师,在做(海底)这方面的工作,然后他可能对(录音)还蛮感兴趣,就录了一些东西。当然国内我们也有一些合作伙伴。

Hoka:除了「鲸鱼」之外,我觉得你们很多声音很有东方传统文化的味道,像什么「竹林」、「泛舟」、「白马」、「猿鸣」,这些感觉像是一个主题下的。能讲讲你们是怎么想到这些的吗?

启旭:对,这个有点像策划一个展览。你可以想象在这个产品里面有不同的房间、不同的空间,根据你今天的心情,去到不同的空间,它的整个颜色、感受和情绪都是不一样的。比如说传统文化确实是一个主题,我自己会觉得这是很东方的东西,也是我们很独特的东西,我们真的非常需要去在意跟珍惜,它有点像是我们这个社会、地域的人的共同想象,也是我们跟历史的联结。当然我们也看到今天很多年轻人也很喜欢中国文化,所以我们也希望能够通过我们的产品去给大家提供一些这样的体验。

包括像「猿鸣」我们是跟缤纷自然(合作),他们是做野生物种保护的纪录片的机构。他们当时拍了一部电影,是关于云南一个特别珍稀的物种,叫天行长臂猿。我们觉得还蛮有意思的,所以当时我们跟他们合作,也在我们场景里面提供了天行长臂猿的声音,也是希望给大家在日常生活里面也提供这样一些关注世界、关注自然的角度。

我们希望推出的声音场景,是大家会用得上、真的有一定的独特价值的声音,所以你可以看到我们没有说特意追求量,我们更多是追求以展览的方式来做这个事情。

我们在非常勤奋地学习如何放松

在白噪音之外,启旭也开始在潮汐里加入冥想相关的内容。我发现,潮汐里的冥想训练很特别,有关于做饭、排队、刷牙的训练,好像乍一听和冥想都没有什么关系。比如说,刷牙训练的画风是这样的:「接下来,你可以轻轻地将牙膏送到口中,开始刷牙。细细地体会牙刷和牙齿接触的感觉。再留意一下,牙膏留在嘴巴里的味道,是怎样的呢?」我问启旭,这些内容和冥想有什么关系。

启旭:冥想本身在欧美是非常流行的生活方式,大家不会把冥想看成好像是一个药,也不会把冥想看成是一个所谓很硬核的、很宗教化的东西,而是会看成是我随时随地都应该去做的一件事情、一种生活方式,这个其实我自己也蛮认可的。我自己理解的冥想或者正念是提倡大家去活在当下,回归内心。你能够有一个 moment,在你的生活中给自己留出来一个空白。所以当时定内容的方向的时候,我们其实首先希望给用户传达的是比较轻松的感觉,而不是一个课程。我们觉得你随时随地可以开始冥想。

我知道也有一些用户会接触到冥想,但是一开始可能接触的是「21 天(学习冥想)课程」这种,其实每次看到这种事情,我会觉得中国人是挺热爱学习的,但是我们也没有那么热爱学习。尤其是当你是在做减压放松这样的事情的时候,我会觉得哪里有点不 make sense,有点奇怪,你知道吗?

Hoka:非常勤奋地学习如何放松?

启旭:对(笑)。但是我觉得(体系化课程)它还是有需求的,我们接下来也会去做,我们现在也有一些。但是我们希望呈现给用户的第一印象是轻松的、放松的,是生活方式的。

岔开一点,有些朋友也会问我说什么是冥想?这个时候我会反问他一句,你有什么爱好吗?有些朋友平时比较喜欢写书法,或者喜欢登山、徒步,有些朋友喜欢养一个鱼缸,看水草、看鱼。我就说其实你在看鱼缸的时候,有没有觉得特别安静,特别平和、沉静,或者你喜欢书法的话,你在写字的时候感受力特别强,没有杂念,其实那个状态就是在冥想。其实很多时候冥想它不是我们想象的那样,是一个特别需要做的事情,其实很多时候它就是一种你能够沉浸在此时此刻,不会担心过去,也不会恐惧未来,你就只是在感受此时此刻的这样一个状态。

所以回到内容设计上,我们的内容理念是将冥想融入生活,bring meditation to life、bring mindfulness to life,我们非常希望用户能够把冥想的体验带到生活当中。我们挖掘了很多适合冥想的瞬间,比如说刷牙的时候,大家可以去感受一下刷毛在你牙齿上的感觉。我们有时候觉得刷牙像是一个负担,但其实可以去感受一下刷牙的过程,它是很奇妙的。包括像很多时候,我们遭遇到一些情绪或者疼痛,当然疼痛本身你肯定还是要去吃药,但是我们也可以换一个角度来看,疼痛它也只是一个感觉。大部分时候,我们跟我们的感觉、情绪连得太紧了,你没办法抽离开,连得太紧之后你就情绪裹情绪、感受裹感受,你就很难受。我们很多人都会有这样的瞬间。但冥想给你的价值就在于说,比如别人说了一句话,你很生气,你可能马上就想一拳打过去,或者直接骂一句回去。当然不是说你一定要变成一个所谓好像很温和,很 gentleman 的,你不可以骂人,不是这个意思。而是说你骂人的时候,你不是下意识地骂人,而是你可能顿了一下,说我现在是不是很想骂他,我很想骂他,那我就接着骂,但是如果我觉得其实骂不能解决问题,我就可以选择不骂。

比如说我们可能无意识会打开手机,打开抖音就刷刷刷。其实这个时候长期练习冥想它给我们的一个收益就在于说,当你要去做一件事情,尤其是无意识地去做一件事情的时候,你是不是可以突然顿了一下,想一想「我是要干嘛?我是真的要刷抖音吗?」这样一个瞬间可以帮助我们恢复我们对生活的掌控感,找回生活的平衡,而不会被我们的情绪、外在的信息牵着走。这个是我们核心要做的事情,或者说冥想对于我们现代生活的实际意义。

怎么用图片表达「痛经」的感受

Hoka:聊了这么多内容,我想听你讲讲潮汐的设计。我用了一段时间潮汐,不管是极简的 UI,还是图片的选择,都能感觉到你们对设计的重视。志珊说之前看到 Twitter 上有日本用户对潮汐有设计上的夸奖,你们的设计是得到很多人认可的。你们会怎么去描述潮汐的设计理念?

启旭:整体来说,我们希望打造一个沉浸式的线上空间,里面有不同的声音场景、声音的房间。回到设计上来讲,你需要去服务于这个目的,所以我们会很强调沉浸式的设计。所以我们大量地使用了有空间感的设计,比如说高斯模糊,来传达出空间的层次。还比如说用大面积的颜色,去传达整体性跟一致性。包括我们设计里面还会有比较多的留白,也是希望有一个呼吸感,因为本身呼吸也是冥想里面的很重要的部分。

我们也会在产品里面有意识地去使用一些隐喻。包括在图片的选择也是,这个时候必须要 cue 一下我们的内容伙伴,现在好很多了,但最早做这件事情的时候真的是逼疯了。比如说大家可以感受一下,我们有一个冥想练习叫「痛经」,其实「痛经」这个选题你去想象一下,你会去选什么图片呢?

Hoka:感觉不是很美。

启旭:对吧?大家可以去看一下「痛经」那张图片,最后我们选择是一个抽象的表达。它是一个油画颜料的渐变。你看到了会觉得,这个应该讲的是跟女性生理周期相关的东西,而且它好像有一些灼热感,这个其实就很好地去呈现出来痛经的感受。

做产品是跟世界发生连接的过程:专访潮汐App创始人郎启旭

△ 潮汐 app 里「痛经」的图片

Hoka:听起来你们挑一张图都要花很多时间。感觉你们花了很多时间去打磨潮汐的设计,但是毕竟你们是一个创业团队,可能也会有各种各样现实的压力,不管是来自投资人,还是团队的,会不会有人质疑你们为什么要花这么多功夫去做这些追求质量的事情?

启旭:这里面我也需要去表达的一点是,设计当然是我们做决策的时候非常重要的一个维度,但是它也不会是唯一的维度。做一个决策,我们会有不同的权重,比如设计上的考量、内容上的考量、用户的角度、产品上的思考,也会包含商业化的思考。在我自己的认知里面,设计在我们整个品类里面,它是一个非常重要的维度。因为用户很多时候除了要解决问题以外,还需要有这种人文性质,或者说感性的、精神性的体验。不同的品类是不一样的,电商产品我觉得就不太需要这种东西,但我们这种品类我觉得它是非常需要的。所以基于业务上的考量,我们会把设计的优先级调得比较高一些。

我们希望如果你的手机里面有 100 个 app,但是你打开潮汐这个 app 的时候,你会发现它跟你打开其他 99 个 app 的感受,从一进来的那一瞬间开始就完全不一样,这个是我们希望在业务上传达的理念。所以基于这个角度我们选择说重视沉浸感、设计感这些事情,但是它不是反过来的,它不是说我们刻意去强调设计,然后最终做出来这样的产品。

做潮汐的过程本身也是一种修行

启旭觉得,冥想不应该只是打坐,而应该融入到像刷牙、敷面膜、痛经这样的日常里。实际上,启旭今天接受采访的时候,也在践行这个理念。在开始录音之前,他觉得有点紧张,所以先花了五分钟来冥想。创业这几年,启旭经历过很多像今天这样的压力事件,这些压力事件,也给了他一个机会,让他在他的日常里实践这个理念。

启旭:比如说当我们去市场上跟不同的人沟通,会听到各种各样的声音。它对于我的压力的点或者考验的点在于说,比如说一个你觉得特别牛逼的人,他跟你讲了一个完全跟你不一样的想法,你这个时候怎么样去消化这件事?

回到业务上来说,因为我们传统讲做一件事情,它除了你自己做的部分以外,还需要所谓的「趋势」,但趋势、市场不一定是你完全能掌控的,它还是需要一些 timing、机缘,来到达一个点。但是坦率说,在那个点没有完全呈现出来的时候,我们整个团队该以怎么样的方式去做这个事情,怎么样去持续地 keep going?我觉得这个时候就是对于一个团队的心力、对于创始人自己相信的事情的一个考验。所以在这些维度上来讲,我肯定也会经受一些压力跟彷徨、焦虑。

对于这些压力,我觉得冥想本身有助于帮我去消化它。真的,比如说当我面临一个事情,我也拿不准的时候,在冥想的状态里面,我会更加清晰我自己的感受跟想法。

其实可能到最后的问题是,真正意义上来说,你做这件事情是为了什么?在这个答案比较清晰的情况下,我觉得它有点像我之前看过的那个电影《云中行走》,是关于一个走钢丝的人,他在纽约双子塔中间走了钢丝。其实创业就像走钢丝,你走上去之后,一开始可能会很有信心,觉得我肯定可以走过去,你可能就很平衡,(产品的)想法也很完整。然后你往前走。走了一段之后,你没有想到,气候怎么突然变化了,风突然刮起来,乌云开始下雨了,这个时候你可能会失去平衡。这个时候你需要快速地把自己再调整回来,再往前走。这好像也有一点像冥想或者说正念理论,就是这样一个(失去平衡再找到平衡的)动态的过程。

对我自己来说,可能某种意义上来说,做潮汐它也是一种修行。你通过这个方式跟世界发生连接,这个过程中接触到不同的反馈,调整自己,认识自己,重新再去实践,再去把你心目当中你觉得更好的东西去呈现出来。这也是我自己本身要做的一个修行。稻盛和夫《活法》里面不就这么说,其实修行也不是说你一定要到山林里面去,某种意义上你每天面对这些现实当中的挑战跟困难,其实它也是一种修行。

文章来源:优设  作者:UXCOFFEE

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


乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

资深UI设计者

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

偶然间发现了一本3年前买入的书《侘(cha第四声)寂》,心里打着哪怕是看上10分钟至少也是没荒废这个假期的念头,读了起来;

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

那么关于“侘寂”,虽然认识不深,但又有一些个小想法,借着假期的余温跟大家唠上一唠:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

百度上对侘寂的解释是:侘寂是现代文学翻译上的一个误解,侘び(WABI)与寂び(SABI)。国人将其整理为侘寂一词。日本美学家冈仓天心的著书《茶之本 Book of tea》把侘び的翻译成“Imperfect”所指的应是侘び美学中,外表的残缺…还有人说“侘寂”是一种思想,一种美学,一种世界观。

我觉得吧,说的太深了不好理解,甚至有点啰嗦了,我尝试着概括了一下,基于在下有限的语言能力大概是这个样子:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

虽然解释中有提到残缺之美,但在我认知里侘寂还真没有什么残缺的感觉,特别是以无印良品为代表的日式自然风格,他们对过于装饰嗤之以鼻,钟情于“不虚张声势,却历久弥坚“的设计;我试图去按照自己的意思揣摩无印良品的设计哲学,结合名词本身,再次总结了一下:侘寂美学不会执着营造表象,取而代之的是尽量流露事物本质,不会随着时间的推移而丧失所谓的“新鲜感”;所以回过头来再看无印良品的设计(不管是平面还是产品),大差不差,我们都会感慨道:真 tm 耐看啊!!!

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

嗯,结合上文,关于“侘寂”这个词,我觉着大概也就是这么个意思了。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

侘寂是 无印良品 / 宜家家居 等产品设计哲学的灵感之源,也是侘寂理念的追随者。但最大牌的死忠粉就不得不提乔布斯和他的苹果了,老乔本人对日本美学的热爱超越任何人,深受日本侘寂美学影响,也因此成就了苹果手机极简风格的设计(说个后话,这种简约是建立在内在高品质和对细节追求的基础之上的,一定程度上对侘寂轻度的人为干预)。

插个题外话,仔细琢磨一下,不难发现 20 世纪中后期,从包豪斯的第三任校长密斯凡德罗到博朗的迪特·拉姆斯和苹果的设计不约而同的在表达类似“少即是多”的设计理念;这种大一统的现象很奇妙,一定程度上结束了工艺美术和装饰艺术对设计界的统治,这既是开始,也为设计风格的轮回做着准备。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

回归下主题,国际知名品牌的设计风格被分析得透透的了,我也不赘述了,主要说国内的深受影响的产品。在我的印象里,oppo 的 color OS 算是其一,特别是当年 color OS 6“无边有界”的概念让人着实兴奋一把:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

坦诚的讲,以侘寂为核心出发的产品在我们的生活中并不少见,他们以突出内容为主,没有其他什么过度的装饰;前有 Instagram,Evernote,也有最近大火的 clubhouse;

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

从产品理念上讲他们注重对主线功能的强调,对诱导性功能不太在乎;再聚焦到用户界面上来讲,他们认为保持最舒适的屏效要比塞满每一个像素更重要;哈,那么问题来了,国内的产品(特别是巨型体量的产品)都不约而同的对屏效有着深深的执念,导致他们看起来难受的一比。这次我们先聊聊屏效:

1. 屏效的取舍 

屏效这个词是“坪效”的演变,后者可以理解成实体店铺每平米的营业额,是一个经营效益的指标。所以类比下来,手机屏幕也可以这样计算,就简单理解成 “每一像素可以带来多少商业效益” 就行了。

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

理论上来讲,一般用户最有用的浏览区域为手机前 3 屏,如果更严格点来说是前 2 屏,按这个思路的话,咱大概就能得这么个结论:每一屏里给用户看到更多的东西,那么收益(浏览量/点击率什么的)也会成正比,所以这个结论就一直被传承下去了。但…如果不是抖音的出现,那么怕是我现在还对以上结论深信不疑:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

哎,不是说单屏内展示的越多越牛 X 么,为什么抖音这一屏一个的做法立刻风靡了全球,甚至还把快手这个老对手拉上了这条新体验的船。带着这个疑问,试图刨根问底,追溯源头,冷静分析下了当前的现状:这大概是形式影响商业价值的一个绝妙的 case 了。先看以前,从互联网产品诞生以来,feed 流的广告形式大概也就是这两种了:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

传统的 banner 理论上就是“CPM”,是一种展示付费广告,根据曝光次数收费,这种形式太多见,我们常用的饿了么 / 美团外卖的顶部 banner 都是这样;CPC 不用过多解释,就是点了广告主就给钱的那种,在今日头条刷新闻的时候经常可以看到,还有公众号的底部广告也是这样的原理。再看看抖音的设计:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

抖音的 GD 单页广告的形式基本上是集各种模式的优点于一身,既有品牌曝光(CPM),也有点击(CPC),甚至还有按时长收费的 CPT 整合进来。我猜测创造这种形式的设计师本身也对美学和商业有深刻的理解,不得不说既保证了体验又提升了商业价值,美的不可方物啊~所以说,通过这个例子也许你会发现,屏效和商业价值并不是“是非题”,更像“多选题”,我们总是对所谓的习惯报以崇高的敬意,但事实上这折射出了人的“奴性”,通常我们认为对的事情也仅仅是习以为常罢了。

话说回来,例子虽然生动且具备说服力,但我猜想你应该跟我一样,未必有机会去做这么颠覆性的设计(即使有机会也未必有胆量哈哈哈哈哈),我试着找了几个例子希望能够帮助你在设计上可以 balance 屏效和商业价值:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

最后再给大家分享个压箱底的小技巧,也是之前看到知乎的广告突然间被启发到的:

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

当然,以上的例子是尽可能的通过屏效来平衡美学和商业之间的关系,总的来说,侘寂这种理念在我国互联网注重运营的土壤上不是那么的好生长,大家尽力就好~

上点小福利

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

尽管我一直坚持输出设计观点,但我发现好多朋友练就了 “一看就会,一用就废” 的日常技能,所以还是准备了一些经过我严选的模版和素材送给铁子们,希望铁子们在学会理论的同时也能手活跟上,眼高手低不可取,眼手双高真牛 B!

乔布斯最为推崇的「侘寂」美学,如何运用到产品设计里?

总结一下

侘寂之美是许多当代设计师所追求的境界,但互联网貌似就是一滩死肥,无论你怎么施肥,也未必能开花结果,各种方案也会相应的受到各种挑战,说白了这种以美学驱动创新本就抽象不可具象,甚至又一些玄学夹杂其中。假如你也希望能够借势突破,不妨以美学为指导思想,以商业价值为突击点去尝试方案的可能性,或许这样说服力才有可能被大幅提升。


文章来源:优设  作者:负能量补给站

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

用户历程图制作指南

资深UI设计者

编者按:这篇文章来自资深设计师 Taras Bakusevych ,他对于产品和体验有着非常深入的理解,这篇文章深入梳理了如何制作用户历程图才是合理和便捷的,是一篇相当给力的用户历程图终极设计指南:

用户历程图(Journey Mapping)可能看起来是一个复杂的东西,尤其是当你尝试在小组讨论的时候把这个东西说清楚,会发现相当不容易。这篇文章将会为你阐明这一强大工具的使用方法,并且提供一个简单的模板,并且帮你创建拥有足够洞察力的用户历程图,让你像真正专业的 UX 设计师一样,创建便利、深入、有效的用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

为什么要绘制用户历程图

在数字产品当中,用户历程图可能是用来呈现用户如何达成目标的最佳、最常用的工具了。当我们故事以可视化的方式呈现出来,就可以沉浸在用户的体验当中。这也是为什么说用户历程的价值是巨大的。

理解用户历程图,会迫使我们以更加结构化的方式来思考整个用户体验,去梳理和定义事件的顺序、关键阶段以及事件之间的过渡。

同时,用户历程图还能建立起用户和设计师之间的同理心,当你随着用户历程图推进的时候,能够更加深入理解用户的痛苦和无奈,从而帮设计师理解用户的动机。

用户历程图还能帮你真正定义痛点,这是至关重要的。每种产品都应该在某种程度上帮助用户,让用户生活更加轻松,如果你对痛点有所了解,自然就可以改善体验。

九个步骤搞定!用户历程图终极制作指南(附模板)

用户历程图的变化

根据实际的使用场景,用户历程图会有很多不同的呈现形式,里面通常会包括一些图形化的元素将整个历程或者流程呈现出来,而余下的元素则采用解释性的文本来作为支撑。

绝大多数的模板会显得过度装饰,且过于复杂,在很多时候,它们会作为项目中的展示性成果展现在PPT当中,而不是作为一种有效的工具,来帮助团队来洞察需求。

九个步骤搞定!用户历程图终极制作指南(附模板)

如果你上网搜索用户历程图,你会发现一大堆各式各样的图,这些图和实际的理解是脱节的。

用户现状历程图 vs 用户未来历程图

用户现状历程图反映的是用户当前的状态,这反映的是用户历程在优化之前、当下的状态。而用户未来历程图则反映的是用户历程在优化过之后,未来理想的状态是什么样的。

用户历程图 vs 消费者历程图

这两者在结构和目标上是不一样的,主要差别在于用户角色的定义上。有的时候,你的用户确实是消费者,而在很多情况下,用户又不一定是消费者,这就是差别所在。

用户历程图 vs 服务蓝图

用户历程图侧重于呈现客户的前端体验,而服务蓝图则重在呈现后端的构成,以及交付方式背后的业务逻辑以及同产品核心之间的关系。

你可以在 Megan Erin Miller 和 Erik Flowers 的这篇文章当中找到更多的信息。

模板越容易,填写起来就越简单

从来就不存在什么完美的用户历程图,不过你可以基于某个版本的用户历程图来着手。而这里准备的这套模板是经过长期测试和实验之后总结出来的一款,它非常容易上手,复杂度也控制得恰到好处,并且它包含你所关注的绝大多数的指标,甚至更多。下面,我将教你如何逐步完成这个用户历程图。

九个步骤搞定!用户历程图终极制作指南(附模板)

你可以在这里下载 PDF 文档

在工作坊模式下如何填写用户历程图

在研讨会或者工作坊模式下,开始用户历程的研究和搭建,是一个不错的练习方式。在这种情况下,即使的团队有较多的人,也最好按照小组来进行(每个小组3-5人)。根据用户历程的复杂度和涉及的内容的不同,通常你应该可以在 1.5 小时候完成整个用户历程图的搭建。至于你能用到的文具,仅仅 需要多种不同颜色的便签纸,笔和红点贴纸即可。在开始之前,你需要和各个小组先声明和解释整个过程,并且确保所有人对于这个过程的流程、原理和方法的认知保持一致。

九个步骤搞定!用户历程图终极制作指南(附模板)

第一步:设置舞台

在这里,我们需要定义地图的内容,用户的整个行为历程,以及他们试图要达成的目标,都有哪些。这很关键,不仅要确保所有的参与者都很清楚用户场景,而且要借此构建出对于后续设计有帮助的内容输出。

演员——这个历程与谁有关?整个历程图应该只和一个角色有关,也就是要经历整个历程的用户角色。

场景和目标——描述参与的用户的行动的情况和状态,从而增加上下文环境的清晰度。描述用户的目标,期望以及动机都有什么。

当前/未来状态——阐明用户历程所在的阶段。

Ps:即使此刻你要做的是某个未来的产品,也最好不要跳过当前状态,洞察当前的用户和产品状态、痛点、习惯,有助于你去验证想法。

九个步骤搞定!用户历程图终极制作指南(附模板)

第二步:定义阶段

接下来,你需要定义整个用户历程的大的阶段。先把各个阶段定义好能够最大程度节省你的时间和精力。最简单的方法,是先定义第一个和最后一个阶段,然后再来填补中间的各个阶段,不要创建太多的阶段,而是将整个用户历程切分成为有意义的部分。

九个步骤搞定!用户历程图终极制作指南(附模板)

第三步:执行推进

按照用户操作流程,来逐个执行梳理各个阶段用户的行为、状态。千万不要试图梳理得过于详尽和细致,尽量专注于关键因素,确定用户需要哪些要素,才能推进到下一个阶段。

九个步骤搞定!用户历程图终极制作指南(附模板)

第四步:想法,情感和情绪

在这个阶段,要开始描述和用户执行操作紧密关联的的想法,涉及到的问题,还有感受。在很多其他的用户历程图模板当中,这个部分通常是和整个用户历程图是分开的,但是实际上,只有合并到一起才是合理的。

九个步骤搞定!用户历程图终极制作指南(附模板)

在这个部分,我不建议将时间花费在用户情感曲线的绘制上,这样做的实际目标更多是为了更加具有视觉吸引力,并不具备实际的价值。

第五步:关键触点

在这个步骤当中,我们会高亮标注出用户在各个阶段会接触到的物理和数字交互点,以及涉及到的工具、人和服务。我相信各个阶段所覆盖的这些触点,能够帮助我们更好地梳理和构建出整个心智模型,并且能够帮助产品和服务,让它们能够更加切合用户的需求,更好地集成到一起。

九个步骤搞定!用户历程图终极制作指南(附模板)

第六步:合并进度

如果你已经和你的团队创建了类似移情图、价值主张画布,那么你无需在这个事情上重新创建相同的内容,因为用户历程图和以上内容中有大量重复的部分,你只需要迁移过来即可。随后,你可以将进度合并到当前的用户历程图当中。

九个步骤搞定!用户历程图终极制作指南(附模板)

第七步:逐阶段填写

这个步骤,需要将各个不同阶段的内容填写进来。

九个步骤搞定!用户历程图终极制作指南(附模板)

第八步:确定痛点

给每个参与者一些红点贴纸,方便他们在整个用户历程图上,对他们认为是痛点的部分进行标记并投票。痛点可能和情绪有关(比如害怕提供个人详细信息),也可能与行为有关(比如手动输入快递地址等)。这就是为什么最好不要为痛点创建单独的行列,因为可能涉及到的点非常多也非常分散。如果需要对痛点进行深入的描述,使用红色便签纸来进行详细阐述。

九个步骤搞定!用户历程图终极制作指南(附模板)

第九步:改进策略,解决痛点

到了最后的阶段。在确定痛点之后,我们就可以开始思考如何缓解或者消除痛点。通常,我们需要通过改进整体策略,完善功能,集成服务,来解决痛点,当然,更多的时候,可能还需要我们拥抱一些更加狂放的构思,通过创新来搞定痛点。

九个步骤搞定!用户历程图终极制作指南(附模板)

完成比完美更重要

在小而无关紧要的细节上进行争论,很容易迷失方向。我经常会看到某些小组会停留在第一阶段,陷入争论,无法推进。从来都没有任何一个用户历程图是完美的,因为用户总会有不同的习惯,并且需要产品设计师从不同的角度来解决问题。

因此,这需要你和你的团队专注于 80%最关键的用例,而不是在所有可能的事情上做复杂的取舍,并且踟蹰不前。


文章来源:优设  作者:Taras Bakusevych

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

凤凰新闻「暗黑模式适配落地」复盘

资深UI设计者

凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配,本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。

项目背景

  • 主流趋势:随着 iOS 13 与 Android 10(Q)系统版本上线深色模式功能。
  • 用户诉求:阅读类产品,满足受众用户“缓解疲劳、沉浸式阅读的使用场景”。
  • 现存问题:对标主流 APP 产品,凤凰新闻 APP 早期的“夜间模式”阅读体验较差,且色值规范缺少统一性,需要一次全面梳理。

改版目标

  • 满足深色模式日间使用需求,并提升用户在深色模式下的阅读体验。
  • 构筑一套新的深色/浅色模式色彩规范,方便管理与记忆。
  • 双端开发建立新的色值代码库,提升沟通协同效率,同时节约设计开发后续的维护成本。

调研平台规范

1. 背景色

iOS 平台在深色模式下的背景色展示是动态的,分为基础、升起(例如,弹出框或半浮层)。如下图中 iOS 系统的两个界面,相同样式的组件在基础层与升起层显示的是不同的两组颜色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

从 iOS14 的色彩规范中可以发现随着界面高度的升起,系统定义的三级背景色也同步进行了一级上升。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果,但相对的开发成本也较高。

再来看看 Android 平台深色模式下不同层级间背景色的显示规律。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级,通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级,Android 的背景色分级逻辑则更加的简单易用。

2. 文字色

iOS 的规范中定义了 4 个等级的文字色,一级文字色为黑白纯色,二到四级文字色为色相偏蓝的半透明色,通过降低同一颜色的不透明度数值来进行分级。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

Android 的文字色分为 3 个等级,与 iOS 的共同点是都用了半透明颜色,也都采用了降低不透明度的方式来进行分级。不同点是 Android 文字色使用的黑色与白色,没有添加色相。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

使用带有透明度的字色能够避免相同字色与背景色相融的问题。以 Android 为例,三级文字色与 10 种背景色叠加后都具有较高的识别度。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

iOS 则通过一套半透明字色可以适应基础与升起两种不同背景色的使用场景。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

3. WCAG

iOS 人机界面准则和 Material design 在深色模式的建议中,都提到了文字信息需满足 WCAG 无障碍阅读的 AA 标准。

WCAG 全称为 Web 内容无障碍指南,其中包含分为可感知性、可操作性、可理解性、可兼容性四项原则的相关建议,这些建议可使网站内容更容易访问。WCAG 从高到低分别是 AAA、AA、A 三个等级。其中 AA 要求文字与背景对比度不小于 4.5:1。

感兴趣的朋友可以通过下面链接进行深入了解: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

也可以通过下面的色彩对比计算器进行对比度检验(下图为翻译后展示)https://www.msfw.com/Services/ContrastRatioCalculator

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

这里我拿 iOS 在深色模式下的主次两级字色与基础、升起背景色做了一下对比度检验,得到的结果均满足 WCAG 无障碍阅读的 AA 标准。这里再给大家推荐一个可以同时对多个颜色进行对比度检验的网站 https://hexnaw.com

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

4. 彩色

iOS 人机界面准则的彩色方案中给出了 9 种颜色。如下图所示的深浅配色方案以 RGB 与 HSB 两种属性进行对比。

  • RGB:是大家所熟知的光的三原色,R 代表红色,G 代表绿色,B 代表蓝色
  • HSB:是颜色的另一种展现形式,H 代表色相,S 代表饱和度,B 代表亮度

https://baike.baidu.com/item/HSB

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

图中左侧以 RGB 属性展示的各项参数差值较大,没有明显的规律性;右侧以 HSB 属性展示的各项参数差值较小,其中靛青与紫色 HS 数值相同,仅有 B 的数值有所差异,但整体来看依然没有一个完整的规律。

相较 iOS 系统彩色方案的单独订制,Android 系统的配色方案则是一整套渐变梯度由“50-900”的色彩库。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在 Android 的色彩工具中还可以自定义配色方案,在色板中选取一个主题色,对应梯度值为 500,通过一套算法来自动获取其他梯度的辅助色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

为了在深色主题中提供更大的灵活性和可用性,Android 官方建议在深色主题中使用较浅的色调(200-50),而不使用默认的主题颜色(饱和色调范围为 900-500)。

  • 选用 500 左右的颜色作为浅色模式的主题色。
  • 选用 200 左右的颜色作为深色模式下的主色。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

总结来看两大平台在深色模式的适配上都各有所长,在整体的视觉体验上 iOS 更加鲜亮突出,Android 则更加柔和舒适。

iOS 更加注重细节体验,在整体的色彩规范中的很多颜色都是单独定义的,这也印证了 iOS 13 发布后苹果官方向用户所表达的“屏幕上的每个元素都经过精心设计”这一理念。而 Android 的色彩规范中无论从背景色、文字色还是彩色都遵循着一个梯度规律。

竞品调研

深色模式改版设计的前期工作除了调研两大平台的指导规范外,我们还对已上线深色模式的竞品 app 进行了调研,调研的主要目标是背景色、文字色的色相与亮度展示效果。(以下截图时间为 2020 年 2 月份)

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

腾讯新闻,主背景无色相,次级背景无色相,一级文字无色相亮度较高,次级文字无色相亮度极低。文字与背景对比度高,主要信息比较突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

网易新闻,主背景色相偏蓝,次级背景色相偏蓝,一级文字无色相亮度较高,次级文字无色相亮度极低。文字与背景对比度高,主要信息比较突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

凤凰新闻,主背景无色相,次级背景无色相,一级文字无色相亮度偏低,次级文字无色相亮度极低。文字与背景对比度低,主要信息不够突出。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以 3 个 APP 首页来对比,可以明显的感觉到凤凰新闻首页的信息展示不够突出,在日间场景下体验极差。

配色方案尝试

深色模式并不是简单的把整个界面反色了那么简单,还是要考虑到所有用户的需求。凤凰新闻作为资讯类 app 用户在夜间使用的场景也有一定的占比。深色模式的改版不仅要在日间满足使用需求,还要保证夜间的视觉刺激相对柔和。所以,在设计配色方案时就不能使用对比度极高的纯黑色背景与纯白色文字,只能在各种灰色中搭配出最优方案。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

经过多稿背景色与文字色的搭配尝试后,最终确定了下图中所框选的配色方案。这个方案整体背景色与二三四级文字色在色相上略微偏蓝,相较于无色相背景更具有活力,在视觉体验上信息层级的区分也更加明确。

在各种方案尝试设计的过程中对颜色的色相、饱和度、亮度的选取都是随机的,目的是在短时间内进行快速试错来确定配色方向。

色彩规范重构

本次改版的目标中还需要重新构建色彩规范,所以还需要对这稿配色的选用进行细致的打磨,在色彩对应的 HSB 参数中进行细微的调整使整套配色方案有律可循。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

最终方案在四级背景的色相与饱和度方面进行了统一,对亮度的递增梯度统一为 5。对比初选方案在视觉上变动也很微弱,却使色彩分级规律一目了然。那么依照此方式也可以对文字色与彩色也进行了一轮打磨。

对于文字色在深色模式优化调整的基础上也对浅色模式下的文字色进行了调整,使深浅模式下两套字色更具有规律性。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在文字色的使用上凤凰新闻没有参照两大平台规则使用带透明度的颜色,主要原因是从自身实际出发,考虑到端内的文字色使用场景部分是用于半透明背景色上的,如果文字色与背景色均带有透明度,叠加后的体验会很差。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

凤凰新闻的功能图标以线性为主,通常搭配文字一起使用,所以对图标颜色的定义与文字色是保持一致的。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在彩色的规范梳理中浅色模式下保持不变,仅对深色模式下颜色的亮度进行了调整,使深浅色模式下颜色的亮度对比有了统一的规则。

当然我们还需要对新的背景色与一二级文字色进行检验,看看是否满足 WCAG 无障碍阅读的 AA 标准,也就是常规尺寸文本对比度高于 4.5 : 1。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

下图就是凤凰新闻客户端的新版色彩规范,在规范中除了上述的主要的通用颜色外也有部分是单独定义的颜色,这些颜色多用于独立或特定的场景下。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

新旧版本对比

在完成色彩规范的重构后,重新输出界面样稿与旧版进行对比。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

通过设计稿对比老版夜间模式与新版深色模式,能够直观的感受到新版在信息浏览上体验更好。

实现与验收

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

1. 色值替换

在着手进行色值替换时,iOS 开发小哥反馈给我凤凰新闻全端跟色值有关的代码有 2000+条,如下图中是日夜间对应的这条代码样式。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

如此多的色值代码多数是相同色值在不同场景中重复使用,但彼此却又完全无关联,还有很多是日积月累的旧色值未被删除。如逐条替换费时费力效率极低,后期的维护也极其麻烦。

为了提高适配效率以及便于后期维护,使得之后的色值替换可以达到全局响应的目的。由设计师与开发人员共同建立一个色值对照表。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

此表中设计命名主要基于色彩规范,用于设计师团队间的沟通协作。工程命名由开发人员提供,主要用于设计师与开发人员的在设计走查中进行高效的沟通协作。

以凤凰新闻 iOS 端为例,优化后的色值代码库如下图,由原来的 2000 多条色值代码变成了 30 多条色值代码「宏」。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

在 iOS 开发工具 Xcode 的可视化文件夹中看起来就更加直观了。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

之后的色值使用开发人员只需要调用代码库中相应的「宏」即可,后续版本迭代中如有对通用色值的调整只需修改相应的「宏」代码即可完成全端替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以这种方式快速完成首轮色值替换后很多页面的色值会出现错误,需要 UI 设计师持续的进行走查反馈,再由开发人员根据反馈进行修改校正。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

以 iOS 端为例在深色模式色值走查过程中设计师分批次以 PDF 格式反馈给开发人员的,开发人员在修改反馈问题的同时设计师也在进行下一批问题的整理,这样同步进行的效率会更高。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

2. 切图替换

切图替换场景相对比较多,同样延用色值走查的协作方式,设计师分批修改开发同步进行替换。开发小哥提供切图的方式就是直接扔过来一个全端切图包,需要设计师修改切图颜色后以原命名重新发回去。当打开切图包后顿感一阵头大,切图总数有近千张之多。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

虽然切图很多但其中有一部分是已经无用的老切图,在替换的过程中也对端内切图重新进行了一轮梳理,删除了很多无用和重复的切图,同时也对凤凰新闻 app 的体积进行了瘦身。

在切图的替换过程中比较费时的是对同一切图存在多张的情况进行整理,梳理出该切图的所有使用场景然后反馈给开发人员进行统一调用,之后如再次修改即可完成全局替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

除 icon 外还需要对默认图与缺省图进行替换。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

3. 特殊适配

凤凰新闻客户端需要进行特殊适配的场景主要是图集与小视频界面,这两个界面仅有一套色值与 icon,界面中的元素需要单独处理,在切换深色模式后避免出现错误。

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

4. 界面展示

超详细!凤凰新闻「暗黑模式适配落地」全方位复盘

结语

Dark Mode 适配是一项费时费力的巨大工程,也是探索和优化用户体验的全新挑战。本文主要描述了凤凰新闻 APP 在 Dark Mode 适配中的一整套心路历程,从规范、设计以及实现的角度对整个项目进行复盘总结。


文章来源:优设  作者:凤凰网设计中心

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

体验设计如何降低成本提高效益?

资深UI设计者

你是否和我有同样的困惑,常常无法客观看待自己的设计,优化的时候又常常不知从哪里下手,看到别的产品设计又无法给出具体的判断依据。



今天学习一下用户体验的结构化衡量标准。不管是日常工作还是作品提升,都可以作为一个方向性的指导。


要想读懂一个信息,多少文字才能解释清楚(认知成本)?网页加载多长时间才算合理(时间成本)?要设置摄像机的时间和日期,设定多少个步骤才算合理(操作成本)?


首先我们来了解一下通用设计法则之——成本效益法则



成本效益法则的概念


百科含义:成本效益法则指的是要从“投入”与“产出”的对比分析来看待“投入(成本)”的必要性、合理性,即考察成本高低的标准是产出(效益)与投入(成本)之比,该比值越大,则说明成本效益越高,相对成本越低;考察成本应不应当发生的标准是产出(效益)是否大于为此发生的成本支出,如果大于,则该项成本是有效益的,应该发生。


从设计的角度来看,成本效益法则一般是用来评估伴随着新功能或新元素出现新增加成本的最后财务回收状况。


用户价值 = 新体验 - 旧体验 - 切换成本


从用户角度来看,成本效益法则也可以用来提高设计的品质。如果与设计互动的相关成本大于收益,就是不良设计;相反,如果效益大于成本,就是优秀设计。用户成本一般包括认知成本、操作成本、时间成本。


体验 = 效益 - 认知成本 - 时间成本 - 操作成本


例如:把走一段路到展览馆看展当作成本,把看展的趣味程度当作效益,如果趣味程度超过走路的成本,那么这个展览设计就是优秀设计。


优秀的展览设计效益大于成本


糟糕的展览设计成本大于效益


每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后,用户觉得获得的效益高于此次互动的相关成本,即是优秀的设计;相反,如果成本高于效益,即是糟糕的设计。



怎么做?


若想提高体验的价值,可以从两方面入手:1. 提高效益;2. 降低成本



提高效益更多是产品层面的决策,所以站在设计师的角度,这篇重点从如何“降低成本”展开。降低成本主要有三方面:降低认知成本、降低时间成本、降低操作成本



PART 1 

降低认知成本


1. 减少冗余信息


a. 去掉累赘文案





为了避免客诉,设计常常会“被迫”在首页做冗长的文案提示,比如美团民宿的“今天入住、明天离店”的文字提示,彷佛在跟着文案做“今天入住+明天离店=1晚”的数学题,过于平铺直述反而增加了用户思考。而且过于具体的文案在小字显示的效果下阅读性也不够好,反而增加了用户阅读文案的认知负担。


同样是 1 晚,Airbnb的文案表达简洁明了,日期间的横杠足以理解是从哪天到哪天的含义。


如果说Airbnb是国外产品,调性不同,那么像马蜂窝的解决方案也是层次与阅读都更加清晰易懂的方式。



b. 去掉多余选项



招行银行的首页功能并不是我会经常要用的功能,但是却无法像支付宝那样自定义编辑首页的功能icon,去掉不需要的功能入口。



2. 内容好理解,减少思考,减少记忆


a. 文案与图片匹配度



文案与图片的契合度高更够帮助用户更有效的理解内容,App Store的推荐卡片在这方面表现的非常优秀。



b. 结构框架好理解——格式塔原理



接近原则中指明物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。京喜首页功能模块区分的相对距离差别不够大,加上商品图的视觉干扰,更加影响信息层次的区分。而淘宝的模块信息分组则清晰明确,信息辨识度高,视觉干扰少,能够有效减少用户区分信息的思考。



c.记忆的局限,降低记忆负担


人们工作记忆的容量有限,大约是 4±1。由于短期记忆的局限,设计师应该确保用户可以简单地识别信息,但不能从之前的对话中回想信息。


比如我们经常会发现考试中的选择题比简答题更容易,这是因为选择题要求我们去识别答案,而不是在记忆里回想答案。


再例如搜索,当搜索结果出现时,我们的注意力自然地从输入的词汇转移到了结果上,因此好的设计应该在搜索结果页展示搜索词。把点击过的结果变色也是帮助用户记忆已点过的内容。



知乎的搜索结果不记忆已阅览的内容,而谷歌搜索则帮助用户记忆已阅览过的内容。



 3. 优先级:信息层级


a.用户优先级、b.功能优先级、c.视觉优先级


d.交互优先级



常见的是弹窗按钮,需要区分信息优先级,不让用户产生选择困扰。



 4. 文字、图标的识别性、易读性



美团Tab icon简洁明了,图形与含义符合,文案简洁清晰。而悦会则显得复杂难以识别,不仅文案复杂,易读性比较差,图标也没有准确表达其寓意。



 5. 一致性


a. 内部的一致性、b. 交互逻辑的一致性、c. 元素的一致性、d. 语词的一致性、e. 信息架构的一致性


f. 视觉的一致性



Airbnb的版式从banner到下面的标题分类,对齐方式与字体对比都保持一致风格,图标和插图都是线与线面的风格。对比之下,携程的设计语言则相对不够完整,不仅icon风格不太一致(面和线都有),banner运营位的版式也是比较随意的(文案没有统一的排版规范)。



 6. 提示、引导、反馈



好的引导反馈能够大大赋能业务目标,相对于躺平的关注引导,好好住的类似提示引导,则生硬了很多,特别是两句文案的切换动作比较刻意,加的笑脸表情也跟引导关系不大。而躺平的引导非常的萌,文案与形象风格都很nice,加上形象手指的动态效果,使引导非常的自然讨喜。



 7. 符合用户习惯


比如,Windows 与 Mac 系统的软件关闭方式。使用windows电脑时,我们形成了右上角关闭的操作习惯。后来开始用Mac电脑,关闭入口都在左上角,在一段时间内,每次关闭都要找一下关闭按钮在哪里。由于Mac的关闭方式没有比windows产生显而易见的体验提升,改变操作习惯成本高,部分用户可能会认为Mac的关闭操作不好用。



当然,假如最开始用的是 Mac 电脑,后面再使用 Windows 电脑,也会感到 Windows 不好用,这是先入为主的观念,一旦产生习惯,改变习惯将产生一定的学习成本



PART 2 

降低时间成本


1. 扭转用户对时间的感知



今日头条通过懒加载的方式,将文字内容优先显示,并且将图片位用默认底色先显示出来,用户可以在图片加载出来之前先看文字内容,大大避免了等待的焦虑。我们应该避免像移动营业厅这样的空白加载页面。


 2.  增加等待过程中的价值



王者荣耀游戏开始前的加载界面会有小技巧的提示,等待的时间可以学习一些小技巧。



PART 3 

降低操作成本


 1. 先价值吸引后行动(先浏览后登陆)



每日瑜伽可以先浏览内容,想要了解更多的时候才引导登录,降低了操作成本。而keep却必须要先登录才可以浏览里面的内容,增加了使用门槛。



 2. 预测用户行为



滴滴出行根据用户经常使用的地点预测用户要去的地方,一键选择地址更便捷。



3. 主动替用户选择



美团外卖支付时主动帮用户选择极速支付选项,一方面让用户更便捷,另一方面也能增加银行卡账户的绑定,赋能业务。



 4. 简化关键节点



淘宝确认订单自动选择优惠券,简化了关键流程,降低操作成本,提高下单转化。现在很多购物平台也都实现了这一点。



5. 减少手动输入操作



以闪送为例,自动读取复制信息——一键粘贴——智能识别——自动填充信息,减少了用户的手动输入操作,大大提高了体验的质量与效率。



降低成本的误区


是不是成本越低,这项设计就是越优秀的设计呢?在成本效益法则下,绝不是成本越低,效益就越高,设计决策需要把互动产生的效益考虑在内。


如果一个交互的复杂度能够提高交互产生的效益,那么就应该适当的增加交互的复杂度。



比如我们常用到的密保键盘,打乱的数字顺序能够防止偷窥者从手势位置窃取密码,因此这项交互成本的提高相应的能够大大了我们资产账户的安全效益。


所以,必要时是可以通过提高成本换取更高的收益。但同时如果技术允许,通过手机短信验证登录与面容识别这种成本更低安全系数更高的方式,还是更好的选择,要根据具体的场景具体对待。



总结


每个设计的品质都可以用成本效益法则来进行衡量。如果与某项设计互动之后,用户觉得获得的效益高于此次互动的相关成本,即是优秀的设计;相反,如果成本高于效益,即是糟糕的设计。


设计师运用成本效益法则提升用户体验的维度主要在降低用户的认知成本、时间成本、操作成本。


降低认知成本包括:减少冗余信息;内容好理解,减少思考,减少记忆;优先级:信息层级;文字、图标识别性,可读性,易读性;一致性;提示、引导、反馈;符合用户习惯。


降低时间成本包括:扭转用户对时间的感知;增加等待过程中的价值、趣味性、小贴士。


降低操作成本包括:先价值吸引后行动;预测用户行为;主动替用户选择;简化关键节点;减少手动输入操作。


同时我们也要注意降低成本的误区,并不是成本越低越好,如果提高成本可以换来更高的效益,也要具体情况具体对待。


文章来源:站酷  作者:水原七秒

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



一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

资深UI设计者

每年年初的 CES 消费电子展,是一个非常适合了解前沿技术,了解消费和产品趋势,甚至在这些量产、准量产以及概念设计产品当中,窥见属于未来的设计趋势。

每年的 CES 都是一个特别适合展示新趋势的地方。虽然很多厂商会倾向于在 CES 上发布新品,但是相比于这些为数不多的新品和发布会,CES 上更加值得一看的是那些正在研发、小范围内投产并且你即将会看到的新技术和有趣的东西,它们所指向的都是消费级的产品,也贴合我们一直在说的「趋势」。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

今年 CES 大会选择了线上举办,不同厂商选择使用直播、视频或者图文的形式发布了自己的产品,有的是概念设计,更多的是后续会量产的产品,类型丰富。这篇文章会按照几个大的类别和趋势,将今年的CES 展上产品进行了梳理,方便和我们之前的设计/技术趋势相互印证。

剑指移动:快速迭代的芯片

锐龙系列的 AMD CPU 以极高的性价比让广大电脑用户喊出了「AMD Yes !」的最强音,而脱离 Intel 阵营的苹果干脆以 M1 芯片,把牙膏厂 Intel 原本的不安全感直接拉满,成为了压垮骆驼的最后一根稻草。在 CES 大会开始之前干脆把 CEO 换成了工程师出身的行业老兵 Pat Gelsinger,试图重拾工程师文化。

在今年的 CES 大会上,试图改变的 Intel 发布了针对高性能轻薄笔记本电脑的芯片,H 系列:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

H 系列采用 Tiger Lake 架构,全系列搭载高性能的 Iris Xe 核显,它的性能足以在 1080p 分辨率下流畅运行《古墓丽影》这个级别的游戏(实际上 M1 的发布会上也同样使用了这款游戏作为性能测试)。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

英特尔的11代桌面端芯片也在性能上又不小提升,采用了全新的 Rocket Lake-S 架构,不过最值得期待的是下半年才会公布细节的12代混合架构 CPU,Alder Lake。

老对手 AMD 在 CES 2021 上则发布了全新的 5000 系列移动端处理器,其中标压的 5000H 系列和低压的 5000U 系列,都用自身的配置和性能解释了“便宜大碗”的概念。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

最高可选 8核16线程的配置,主频可飙升至 4.4GHz,充满电之后日常使用可以达到 17.5小时,电影播放可以长达 21 小时的电影。

而同为御三家之一的 Nvidia 则带来了桌面级的RTX 3060显卡以及移动端的RTX 3080/RTX 3070/RTX 3060。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

当然,无论是桌面端的显卡还是移动端显卡的性能都有着不俗的表现,具体大家可以去官网看看这里就不说了……(一个很重要的原因是由于比特币的疯狂涨幅,导致挖矿需求暴涨以至于这波显卡价格出现了极其疯狂的增长,一卡难求,鬼知道啥时候能恢复正常)

总而言之,移动端芯片(主要是 针对笔记本电脑)在性能提升的同时还控制好续航,无论是CPU本身的算力还是显卡的性能,都有着相当明显的提升。这对于设计和创意从业者而言,意味着有着更加轻薄地电脑和平板可供选择,并且性能足以支撑从平面到3D渲染、 视频剪辑乃至于大型游戏,而且很大程度上,性价比有 「AMD Yes」,高性能可以上 Intel H 系列 + Nvidia ,而习惯使用 macOS 地用户应该也会在未来几个月内等到新的 M 系列芯片和 Macbook Pro 16 和 Macbook Pro 14 ,当然这和 CES 2021 就没啥关系了。

目前这些新芯片本身的强大性能和优良的续航,可能需要到后续的电脑和笔记本上才有所体现,好在 CES 2021 本身还发布了不少性能优秀、设计过硬的电脑类产品。

创意笔电:为创意工作者提供更多可能性

笔记本电脑在历年 CES 大会上都是重要的组成部分。在这些笔电类产品当中,除了一部分迭代更新的量产新款之外,还会有不少基于特定的需求,在设计和功能上高度特化的产品出现。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

比如 HP 的 Envy 14 笔记本就很典型地属于前者,11代英特尔 CPU 和 Nvidia GeForce GTX 系列的显卡,传统的造型和更加精致的工业设计,这种不过不失的产品其实是各大厂商在 2021 年铺货时的中坚力量。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而微软的 Surface Pro 7+ 也只能算得上是小幅更新,多个配置可选,没有太多好说的。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而出自联想的 ThinkBook Plus Gen 2 i 笔记本在继续探索了双屏笔记本的另外一种可能性,A面的超大尺寸电子墨水屏搭配手写笔,简直就是给手绘和笔记爱好者量身定制的创作空间。掀开之后又是一台传统的超极本,13.9 mm 的厚度 和 1.3 KG 的重量也非常符合携带通勤的标准。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

相比之下, 同一谱系的 ThinkPad X1 Titanium Yoga 的翻转设计则显得更加传统,不过在性能和影音上,Dolby Vision HDR和Dolby Atmos扬声器的支持让它在影音娱乐上更加突出,少了电子墨水屏,整体厚度也缩减到了11 mm。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

不过,更有意思的是华硕ZenBook Pro Duo 15 OLED 笔记本电脑,原本 Duo 系列的双屏设计已经相当独特了,这次的新款不仅将配置进一步推升到了 i9 cpu + NVIDIA GeForce RTX 307 的级别,还给副屏增加了一个自然的 9.5 度倾斜,防炫光的同时还更加贴合人体工程学。这可能不一定符合每个人的审美,但是可能正好是某些天天肝视频跑渲染的设计师同学正好需要的东西。

另外一边,游戏本也基本上是在堆配置,Alienware M15 R4和M17 R4 老老实实地把显卡推到了 NVIDIA GeForce RTX 3080,加上 360hz 超高频率的显示屏,内存堆到32GB,存储支持 4TB PCIe,性能够怪兽,但是别的就没啥好说的。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而另外一边的 Razer 推出的 Razer Blade Pro 17 2021 和 Razer Blade 15 2021 这两款笔记本,本质上和外星人家的差不太多,配置有多高堆多高,机身工艺搞好点,RGB 信仰灯炫起来……

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

当然这并不重要,这次 CES 2021 上,Razer 真正的杀手锏是这俩笔记本的配件,Razer Project Brooklyn概念游戏椅:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

只需按一下按钮,这款游戏椅就可以从背面展开60英寸的OLED显示屏,真正沉浸式的游戏体验,带有4D模块化功能的扶手以及折叠可调的桌子,连整个框架都是带有高保真触觉模块的,体验有多好,就要看你和游戏厂商的想象力了。

对于游戏本本体而言,在配置和外观上的设计很大概率只能靠添油战术,互相之间见招拆招,真正能够打出新意,玩儿出花样的,基本都是在外设和配件上。

屏幕延展:智能手机的下一个阶段

智能手机毫无疑问是大家最关心的事情。支持5G频段,AI驱动的后置多镜头模组,前置挖孔/刘海镜头,6英寸屏幕,这几乎是当下绝大多数智能手机的标准配置,也是贴合大众需求的最佳实践。CES 2021 发布的 三星 Galaxy S21 Ultra 5G 就是这种典型,配置到位无懈可击,更重要的是,后置镜头模组的工业设计相当具有识别度,边角凌厉又富有美感。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

不过大家都很清楚未来趋势肯定不会止步于此,柔性屏幕给人带来的想象力太过丰富,包括苹果在内的一线厂商几乎都在这个基础上进行探索。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

三星的 Galaxy Fold 系列已经发不到第二代,Moto 的新生 Razr 也发布了迭代之后的版本,苹果早早申请了环绕式柔性屏幕的设计专利:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

不过,最有意思的还是卷轴屏幕。在 CES 2021 之前,OPPO 就公布过卷轴屏手机的概念设计:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

在今年CES 上, LG 发布的 LG Rollable 则可能是最早量产的卷轴屏的智能手机(预计在今年年内发布):

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

虽然没有 LG 这么快,TCL 也同样带来了自己的卷轴屏智能手机,不过和 LG 的横向拉伸不同,TCL 的屏幕选择了纵向拉伸:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

相比于折叠机构,卷轴式的柔性屏幕将不会因为过大的折叠角度而出现屏幕折痕。不过这种收纳方式在保持优雅的同时,还会面对和升降式摄像头一样的问题:展开和收纳结构的可靠性和开阖时间的控制。

可以确定的是,柔性屏幕设备会逐渐增加,而目前技术的快速迭代意味着在未来2年内会有一大批类似的设备出现。无论是折叠、翻转、卷轴还是翻盖式双屏,都意味着 UI 界面的动态延展,而不同的结构设计带来的是交互方式的百花齐放,这对于UI 和交互设计而言,都是全新的挑战,以及新的机遇。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

不要忽视了这种硬件设计之下的复杂度,即使是最简单的双屏折叠,对于 UI 交互和开发而言,都是巨大的挑战,不信可以先看看微软的双屏设计规范:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

场景细化:智能家居的差异进化

物联网和智能家居从提出来到最终落地为消费级产品,经历了十几年漫长的过程。在今年的 CES 展上所展示的很多智能家居类的产品,确确实实比以往更加「智能」也更加富有想象力。除了各大厂商原本在工业设计和基础技术上的积淀,这些产品大多借助了机器学习技术来提升「智能」程度,并且借助语音交互来保持操控的便捷性。

智能家居的花样就多了。

三星推出的 Bot Care 智能机器人看起来像是一个更具未来感的的 R2D2,不仅能够识别你的语音命令,而且能够借助成熟的 AI 技术识别你的行为,它会学习和了解你的日程安排,能够逐渐了解你的习惯,并且在日常的生活中提供帮助。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而更加进阶的是 Bot Handy 智能家居机器人功能就更多一些了,它不仅可以在室内到处溜达,而且能够能够识别材质和物品,它自带的机械臂能够帮你收拾房间,收拾厨房物品等等等等。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

CareOS Themis 的智能镜子也借助传感器和 AI 实现了诸多传统镜子做不到的事情。通过内置的 IR 温度传感器、UV皮肤分析灯以及相机,CareOS Themis 智能镜子 能够对你的卫生状况、皮肤状况乃至于心理健康状态进行分析,并且提供切实可行的建议。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

传统家居和传感器、数字硬件的结合,将家居设备的安全性、可用性和完备性全方位地进行了提升。比如 LOCKLY Duo 智能锁就加入了双重锁定技术,可以更快打开又保证了安全性:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而 Ampere Shower 这个蓝牙淋浴扬声器,不仅可以让你在淋浴时享受 360 度环绕立体声,想要播放什么内容完全可以用语音控制,而且考虑到它特殊的使用场合,它干脆借助淋浴喷头的水流来进行充电:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而便携式投影仪也是诸多大厂的下一个发力点,在保持高流明、智能可控的特性的同时,进一步缩小提及,提升音响效果,就像华硕的 ZenBeam Latte 的便携投影仪一样:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

传统家电设备则在智能化和场景化的探索之下,呈现更加灵活的新玩法。三星定制的4门 Flex 冰箱可以针对不同的食品进行定制化的管理,而传统固定的冷冻/冷藏式的分区也借用智能化的管理打破,如果你需要更多的冷藏空间,只需要通过设置就能够进行转换和调整。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

当然,智能电视当然是 CES 大会上绕不过去的门类,只是多数厂商的产品都是在自然硬件和性能迭代上「更高、更快、更强」。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

而其中真正称得上有趣的,还是 LG 的升降式透明电视:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

透明屏幕在不同光照条件下的泛用性,应该还是存疑的。毕竟去年8月小米发布透明电视之后,已经有过不少质疑的声音了。不过这些小众产品的不断迭代和推出才有可能让透明屏幕技术上的不断前进,更贴近科幻电影中使用场景的小型透明智能设备的普及才有希望。届时,UI 设计应该又有新的设计需求了吧?

CES 2021 的这些新型的智能家居类设备上,可以更进一步印证之前大家对于趋势的预测:

  • 传统家居设备智能化之后有着极大的拓展空间
  • 相比手机电脑和平板,家居类设备更加仰赖语音交互来进行控制
  • 新型的家居设备需要探索贴合各自特征的新交互模式
  • 不同使用场景下智能家居设备需要不同的控制方式
  • 机器学习是让智能家居设备更加贴合不同用户需求的必要组成部分
  • 新材料和新技术的加入,是家居类设备差异化发展的契机

疫情催化:健康与可穿戴设备的进化

可穿戴设备的热度也一直在逐渐提升。

国外疫情的持续也促使很多厂商开始考虑如何制作更加贴合健康需求的可穿戴设备。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

游戏硬件雷蛇的 Project Hazel N95智能口罩应该是 CES 展上最受关注的硬件之一,它并不仅仅搭配了 N95 级别的防护和可更换滤芯,透明的遮罩充满了未来感,同时雷蛇还将扬声器和信仰灯集成在过滤器的外侧,确保语言交流清晰,视觉风格独特:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

另外,为了确保整体的安全性还附带了专用的紫外线消毒盒:

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

相比于雷蛇的科幻感,AirPop Active +智能口罩就显得更加运动。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

AirPop Active + 则是一个专业的运动口罩,借助内置传感器,这款口罩能够跟踪空气质量以及佩戴者的呼吸状况,并且通过蓝牙和手机同步,方便查看。同时,在滤芯即将耗尽时,也会提醒用户。这款口罩从外观到功能都是明显面向运动爱好者的。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

BioButton 这款设备则是一款新冠病毒感应器,将它贴在颈部,它会跟踪你的呼吸、心率、睡眠和血氧状况等生命体征,并且识别你是否出现了感染新冠病毒的症状,可以说是针对性极强了。不过,对于绝大多数隔离在家的用户,锻炼是更重要的事情。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

NordicTrack Vault 顶级家庭健身房就是一个这样的产品,超大屏幕结合 iFit 的互动健身体系,你可以清晰直观地对自身的动作进行审视和视觉反馈,进一步进行矫正,同时确保在家也可以获得健身教练 1对1 的指导。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

智能手表是可穿戴设备这一领域是一个大类。目前绝大多数的智能手表在各种传感器功能上都做得不错,差异主要是在体验的细节优化、工业设计、品质以及品牌溢价上了。

Fossil 在 CES 2021 上带来了支持 5G LTE 网络的 Fossil Gen 5 LTE,芯片用的高通骁龙 3100,心率、GPS、海拔、环境光等传感器一个不缺。Fossil Gen 5 LTE 提供金色和玫瑰金两种配色

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

相比之下 Amazfit GTR 2e 智能手表则更加关注运动爱好者的细分需求——直接提供了90多种不同的运动模式,它可以识别你是在跑步还是骑车,45 天超长续航,5 ATM 的防水级别,可以说是在专业性上相当到位了。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

此外,飞利浦发布的 Sonicare 9900 Prestige 智能牙刷也相当亮眼。通过传感器,它能够识别不同位置的压力,监控清洁位置和刷牙的运动轨迹,并且提供 AI 实时指导和个性化刷牙动作推荐,同样是通过蓝牙连接手机来实现信息的传达。

其实这些健康相关的可穿戴设备也呈现出几个典型的趋势性的特征:

  • 可穿戴设备已经基于不同人群和需求细分化了
  • 根据不同需求植入有针对性的传感器,让健康数据更加清晰明确
  • 结合机器学习和 AI 来帮助用户了解信息,并且提供优化方案
  • 随着性能逐渐跟上需求,对于个性化的需求已经凸显出来了
  • 在新冠疫情彻底过去之前,还会有不少疫情相关的穿戴设备出现

在可穿戴设备当中,涉及到VR/AR的产品需要单独说一下。

虚拟照进现实:VR/AR/MR/XR

VR 和 AR 你应该比较了解了,虚拟现实和增强现实,那么MR 和 XR 呢?

MR 是混合现实,通俗的说它是介乎 VR 和 AR 之间,虚拟合成的「图像」和真实的世界相互融合,还可以和现实物品进行一定程度的互动。而 XR 是扩展现实(Extened Reality)的缩写,它其实是以上 VR、AR、MR 的一个总称,或者说 VR/AR/MR 是 XR 的子集,XR 所涵盖的领域和范畴比以上几个都要宽泛。

比如虚拟触感就是属于 XR 的。在今年的 CES 大会上,Senseglove Nova 和 bHaptics 推出的紧身衣套装,所带来的体验就是虚拟世界在触感上的投射介质。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

以 bHaptics TactSuit X40全身触觉套装 为例,全身内置 40 个触觉反馈点,15 个小时的续航,在 VR 和 AR 眼镜的支持之下,无论是游戏还是看电影,只要有相关的数据支撑,就能带来真正意义上完全沉浸式的体验,视觉听觉触觉全覆盖,这大概才是真正意义上的「沉浸式体验」吧?

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

Xenoma EMStyle 套装也是一个针对皮肤和肌肉的新玩意,这款可穿戴设备当中包含 24 个电极,胸部4个,腹部4个,每个手臂2个,臀部2个,每条腿4个,它们可以为全身主要的肌肉群提供刺激,并且可以让健身教练在安全距离之外,通过电极刺激的方式提供指导,也算是某种意义上的「虚拟触觉」。

接下来说说我们更熟悉的智能眼镜。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

联想 ThinkReality A3 智能眼镜也算是今年 CES 上关注度较高的产品。其中,ThinkReality A3 又分 PC版和工业版两种,两者硬件配置上相同,但PC版只能和Windows 同步,工业版可以连接到Android智能手机(基于骁龙800系列芯片),并运行使用联想ThinkReality软件平台构建的定制行业应用。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

Vuzix 也在 CES 上发布了下一代智能眼镜,其中集成了MicroLED显示引擎,具有完全透明的高级波导光学器件。Vuzix 使用一对微小的高效 MicroLED投影仪提供动力,从而可以为用户提供高密度像素阵列,在双眼中投射超级清晰的视觉内容。

一年一度的CES 2021消费电子展,有哪些值得关注的设计趋势?

上面的智能眼镜还算得上是科技产品,而 Mojo Vision Len AR 隐形眼镜就算得上科幻级别的产品了。从尺寸上来说,普通眼镜和隐性眼镜就是数量级上的差别,Mojo 的这款智能隐形眼镜使用微电子技术,内置了微型显示屏,可以共享重要信息,用 Mojo Vision 来使用增强现实,不仅无缝,而且无形。

可以说,如今的虚拟现实技术已经走到了一个全新的阶段了:

  • 基于视觉的 AR/MR 技术已经小型化到一个全新的量级了
  • 从传统的虚拟视觉、沉浸式的听觉,已经可以虚拟触觉了
  • 极其学习和人工智能 技术同样支撑着这一领域快速迭代
  • 这一领域需要更多更富想象力的交互设计来予以支持

给设计师的新机遇

新事物正在以无与伦比的速度进化。芯片性能和基础的技术为消费级的硬件提供了最扎实的工业基础,繁盛而多样的企业开始有意识地深耕细分领域的产品,其中留给设计师的空间其实非常大。

各式各样的笔记本类产品,已经针对不同需求的设计师进行了细分优化,不同类型的设计师应该都会找到针对自身领域需求的硬件设备,多屏幕、多输入方式的笔电和周边外设正在快速地丰富起来。

而快速发展的柔性屏幕,则可能正在给 UI、交互设计师提出一个复杂的难题,那就是屏幕延展之后的UI和交互上的提升的问题。而智能家居和虚拟现实相关领域的快速进化,最终的问题同样会压到设计师头上——你要如何为这一新的交互和UI进行设计?

那个时候,交互设计师这个门类应该会真正意义上彻底独立出来,而不是把交互的活儿让产品或者UI设计师来完成……因为交互设计本身的工作量会暴增,而且有着更高的要求和更加复杂的情况要处理。

文章来源:优设  

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


优惠券设计基础知识

资深UI设计者

优惠券是我们电商中最常见的活跃用户的一种方式,简单的设计就能带来巨大的客流量。虽然小小的一张优惠券并不会占用太多的版面,也不会浪费太多的色彩去装饰,但想要知道优惠券的种类、特点,还需要我们认真剖析,仔细揣摩。

今天就和大家分享一下关于优惠券设计的那些事儿~

用一篇文章,帮你了解优惠券设计的基础知识

优惠券的优点

通常在活动、促销、甩卖等场景中,我们最常用到的手段无疑是优惠券了,为什么被众多设计师和商家所喜爱,也是源于它的这几大优点。

1. 提升用户活跃度:

人们总是对 “降价”、“打折” 这样的字眼充满了兴趣,用户也习惯于在了解到商品的价格及优惠力度后再决定购买,所以有优惠的商品才更具有吸引力。

2. 增加产品曝光量:

用户一券在手,总是让人忍不住翻看可以使用的商品,这无形中增加了平台商品的曝光量。同时好的优惠券会在用户的口口相传中得到推广,这对平台、商家和产品来说,都是一个很好的展现自己口碑的机会。

3. 刺激用户的潜在购买需求:

当用户的购买行为背后没有充分的购买动机,交易就会轻易的受到其他因素的影响而中断。优惠券的出现满足了用户 “赚到” 的心理,用户就愿意为潜在的购物需求买单。

4. 提升用户的购买力:

用户的购买力和收入水平成正比,和商品价格呈反比,当价格受到优惠时,用户的购买力也可以得到相应改善。

用一篇文章,帮你了解优惠券设计的基础知识

优惠券的类型

1. 按使用条件划分

体验券

一般针对新品或测试产品向用户免费发放的体验券,意在吸引用户的关注,倾听用户的意见,有时体验券也会以邀请码的形式出现。

用一篇文章,帮你了解优惠券设计的基础知识

△ 体验券(图片来源:京东智联云官网)

代金券(又称现金券)

一般使用门槛较低,不会有金额、数量等方面的要求,可以直接使用,若购买商品不够券面金额,通常情况下是不退还差额的,如:新人大礼包、无门槛红包和员工福利等。

用一篇文章,帮你了解优惠券设计的基础知识

满减券

通常会有订购数量、订单总价、产品种类等方面的要求,满足条件的订单才可享受满减,如:生活缴费商品满 ¥100 减 ¥2 优惠券。

打折券

打折券是直接对商品进行打折,一般商品较贵,购买的用户较少,或者用户订购量大会采用此类型优惠券,如:8.8 折优惠券等。

用一篇文章,帮你了解优惠券设计的基础知识

2. 按使用范围划分

单品券为购买单一商品时使用的优惠券;

系列产品券为购买某种特定系列产品时所使用的优惠券,用户只需要购买指定系列的产品就可以享用这张优惠券,如:购买无线宝 WiFi5 系列产品优惠券等;

用一篇文章,帮你了解优惠券设计的基础知识

品类券为购买某一类商品时使用的优惠券,如:购买清洁类、医药类、生鲜类等优惠券;

品牌券为购买某一品牌商品时使用的优惠券,如:购买华为、京东云等品牌产品所用的优惠券。

用一篇文章,帮你了解优惠券设计的基础知识

3. 按发放的主体划分

店铺优惠券则是店铺自行发放的,如:关注有礼、抽奖、新老顾客回馈等;

平台优惠券是由平台直接发放给用户的优惠券,针对的目标群体范围较广,如:购物津贴、百亿补贴等;

用一篇文章,帮你了解优惠券设计的基础知识

政企消费券成本由政府、企业和平台共同承担,意在提升某些地区消费者的消费能力和消费水平,如:北京消费券等。

用一篇文章,帮你了解优惠券设计的基础知识

优惠券的作用

1. 拉新

说到拉新,我们总会遇到一些一点诚意都没有的优惠券,例如:劳斯莱斯 “5 元代金券”。实际上这也是一种吸引用户关注的方法,成为了人们口口相传的调侃。

下面是 “京东智联云官网活动” 拉新引流的新人礼包,我们可以看到 “新人千元大礼包” 字样,新用户在完成注册任务之后就可以领取相应优惠券。

用一篇文章,帮你了解优惠券设计的基础知识

通常情况下,我们使用 “代金券” 进行拉新。代金券的价值相当于同等金额的现金,购物时直接使用,一般不会有过于苛刻的门槛,用户使用起来方便,所以对新用户的吸引力极大。在设计时我们需要注意以下几点:

设计目标 – 吸引新用户;刺激用户的购买需求;使其真正成为我们的用户。

任务模块 – 除了优惠券本身外,设计时还应该注意各任务模块的衔接与规划,如:用户登录、注册、用户的信息填写等。

门槛值设定 – 门槛值设置较小的优惠券才具有较强的吸引力。对于新用户来说,用户不需要购买太多商品,也不用局限于某个商品的使用。对于设计师而言,需要考虑门槛值和商品成本之间的关系。

用一篇文章,帮你了解优惠券设计的基础知识

面额设定 – 优惠券面额的设定可以很好的反应我们吸引消费者所付出的成本,控制获客成本也是拉新过程中的重要环节,设计师应该清楚了解用户喜好,剖析哪种互动方式可以在降低成本的同时扩大优惠券和商品的吸引力。

时间设定 – 这里可以强调优惠券使用时间的展示,方便用户在有效期内即时使用,避免浪费。

2. 促活

当然,每一种优惠券都有 “促活” 的属性,不管是优惠还是打折无不吸引着消费者的注意。例如:每年的 “京东 618” 和 “京东智联云 11.11 大促(下图)” 都是采用了各种优惠券来吸引用户完成交易的。

用一篇文章,帮你了解优惠券设计的基础知识

促活一般是电商发展的关键时期,设计上会呈现出:短期内让利、时间短促、宣传、优惠券种类不限等特点。

小结:

其实优惠券的作用还有很多,它还可以解决用户存留等问题。由于篇幅有限这里就不过多展开,期待小伙伴们一起思考和挖掘。

优惠券设计的基本要素

收益预估:设计前预先判断本次活动的成交量,计算每单的收益大小以及总收益。

使用范围:根据活动的目的,确定使用范围( “平台”、“品类”、“品牌”、“店铺” 等)。

使用门槛:每种优惠券都有相应的使用门槛,这是保证商家不会亏损的重要环节。

领取上限:设置领取上限,一方面根据商品库存的多少,尽可能照顾到更多有需要的用户;另一方面也可以表明优惠并不是那么轻易就会得到,增加优惠券的吸引力。

使用有效期:如果优惠券的使用期过长或没有有效期,那就和降价没有什么区别了。

用一篇文章,帮你了解优惠券设计的基础知识

展望

通常活动结束后设计师要对本次设计进行复查,通过调研判断优惠券对用户的吸引力。一方面从定量的维度考量,我们要对用户的浏览量、领取量、使用率、实际下单量和用户参与程度进行观测;另一方面从定性的维度分析用户的实际感受,用户在体验完成后是否愿意再次光临或推荐给亲友,也是我们需要考查的方面。

文章来源:优设  作者:JellyDesign

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


日历

链接

个人资料

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

存档