• 配色被说不好看?高手这160种配色方案直接拿去用!

    UI交互 2022-08-16
    颜色可以在很大程度上影响一件设计作品的调性和美观性,要想抓准一件设计作品的调性,选择一个合适的色彩搭配组合尤为关键,为此,葱爷花两天时间整理了 19 大设...

    颜色可以在很大程度上影响一件设计作品的调性和美观性,要想抓准一件设计作品的调性,选择一个合适的 色彩搭配 组合尤为关键,为此,葱爷花两天时间整理了 19 大设计调性,多达 160 种 配色方案 ,赶紧收藏起来以备不时之需吧。

    拯救配色废!让配色效率暴涨10倍的预览神器 Palettemaker 大家好,这里是设计神器挖掘前线记者花生为您发回的实时报道 ~ 配色一直是我们设计师比较关注的话题,可能大家都收藏了很多个自动生成配色方案的网站,但会发现在网站上看着不错的配色用起来却不太行,没办法就只能再重新找,非常浪费时间。

    阅读文章 >

    1. 高端

    视觉调性高端的色彩,通常具有明度低、饱和度低、颜色数量少等特点,所以很多高端的设计都会以深色作为背景色,因为深色更显低调、更具神秘感,所以给人的感觉更高贵。然后以亚金色、银色、桔红色、白色等作为辅助色。

    2. 科技

    想要表现科技感,色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色。比如以深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果。

    3. 时尚

    其实所有调性的配色都应该要尽量时尚一点,即使是想表现复古,也不能太土,所以这里所说的时尚特指偏向年轻、潮流的时尚。这种色彩通常具有饱和度高、明度适中、色相对比较大等特点。葱爷这里概括了两类,一类是以纯色作为背景,这种色彩比较适合于品牌设计、网页设计、画册设计等;一类是以渐变色作为背景,这种色彩比较适合于电商设计、广告设计等。

    4. 酷炫

    酷炫是指那种视觉效果特别张扬、甚至是极具个性的色彩搭配,比如近几年比较火的蒸汽波风格、酸性风格、赛博朋克风格、故障风格,其色彩就属于酷炫类的。该类设计通常也是以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多。

    5. 好吃

    即让人感觉很有食欲的色彩搭配,这种色彩通常以暖色为主,比如红色、橙色、黄色。饱和度较高、明度较低的组合方式通常用于餐饮行业;而饱和度较低、明度较高的色彩组合通常用于甜点、饮料等行业。

    6. 夏天

    目前正值火热的夏季,所以葱爷专门整理了一些适合表现夏季的好看色彩,该类色彩通常会以蓝色、青色、绿色这种冷色系最为主要颜色,然后以黄色或红色、白色作为辅助色,这种色彩组合会给人清凉、快乐的感觉。

    7. 清新

    小清新的视觉感受为轻松、柔和、淡雅,要达到这样的效果,颜色的明度通常是比较高的,饱和度偏低,常用的颜色有浅青色、浅绿色、浅黄色、粉红色等,在奶茶、女性护肤品的相关设计中比较常见。

    8. 快乐

    快乐是张扬的、是活泼的,所以快乐的色彩饱和度较高、明度不会太低、色彩的种类会比较多,通常也是以暖色为主,但是会搭配冷色一起使用。黄色具有很强的快乐、阳光属性,所以想要表达快乐,黄色通常是少不了的。

    9. 可爱

    跟儿童、年轻女性相关的设计,通常需要表现出可爱的调性,这类色彩通常是用冷色和暖色相互组合,颜色的明度同样不会太低,否则会有压抑的感觉,另外饱和度也不要过高,饱和度稍低一点效果会更柔和一些。

    10. 健康

    想到健康我们立马就会想蓝天白云、青山、绿色的草地和树叶,还有黄色的小野花等等,所以蓝色、绿色、青色、黄色、白色都是常用于表现健康的色彩,红色也可以偶尔作为点缀色加进来。由于健康的调性也是要给人一种舒适、轻松的感觉,所以整体的颜色明度不要太低。

    11. 运动

    要想让色彩动起来,对比一定要强,可以是色相对比、也可以是明度对比和饱和度对比。橙色和黄色是两个很具活力的的颜色,所以常用于表现运动的设计里。

    12. 科幻

    这是一些科幻电影、机动游戏的海报设计常用的色彩搭配组合,给人的视觉感受是稳重而大气,科技感和神秘感并存,所以背景色通常也比较暗,喜欢用青色和黄色这种比较亮的颜色作为点缀。

    13. 喜庆

    在设计节日海报或促销海报时,通常需要表现出喜庆的调性,有些设计师会局限在大红色、黄色、和橙色里,这样搭配出来的色彩容易土,而想要解决这个问题,一方面可以加入冷色搭配使用,另一方面颜色的饱和度和亮度也不要过高。

    14. 复古

    这类色彩的特点是颜色的饱和度会相对低一点,而且大多数情况下,整体的明度通常也不会太高,常用类比色搭配和对比色搭配。

    15. 中国风

    具有中国风特色的颜色和色彩组合有很多,葱爷这里仅列举了 8 个组合。这类色彩同样饱和度不会达到最高,有点复古和充满文化气息的感觉。胭脂(暗红色)、缃色(中黄)、绀青(深蓝色)、黛(褐色)等是中国风常用的颜色。

    16. 梦幻

    梦幻具有奇妙和神秘的感觉,好像在黑暗中找到了一点曙光,奇遇了惊喜一般,所以大多数情况下,背景色会使用从深色到亮色的渐变。颜色相对会比较丰富,而且以渐变色居多。

    17. 女性

    女性是温柔的,是感性的,所以该类色彩组合通常为类比色,偶尔会用一点对比色作为点缀,以增加画面的活泼气息,颜色的明度和饱和度都不能太低,当然饱和度最好也不要过高,粉色、紫色是常用于表现女性的色彩。

    18. 优雅

    优雅可以理解为低调、高级、温和、安静,所以这类色彩的对比通常不会太强,饱和度也会比较低,整体的色彩调性会偏中性,常用卡其色、麻色,还有单色组合及类比色组合。

    19. 经典色彩组合

    除了以上十八大调性,葱爷还给大家推荐一些经典的配色,很难把它们具体归为哪一类,但是我们在做很多设计时,用上这种配色总能得到不错的效果,比如红黄黑、红白蓝、黄绿黑、等等,在很多平面海报设计中经常能看到。

    结语 以上所列举的色彩组合,矩形色块为背景色,圆形色块为画面中图片元素或文字使用的颜色。根据需要可以把其中的某些纯色转变为单色渐变,或者也可以把某些单色渐变转化为纯色。另外,在不包含黑白灰的色彩组合里,仍可以根据需要自行加入黑白灰,比如用于填充文字的颜色。

    当然,能体现以上这些调性的颜色还有很多,大家可以自行补充,建立起自己的色库。

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

  • 5000字干货!拟物化设计的消亡与复兴史

    UI交互 2022-08-16
    拟物化设计曾经风靡一时,真实的体积和细腻的质感给人们留下了深刻印象。 在不断发展中,界面又逐渐向扁平化演变,拟物化材质出现得越来越少。 近些年,我们发...

    拟物化设计 曾经风靡一时,真实的体积和细腻的质感给人们留下了深刻印象。

    在不断发展中,界面又逐渐向扁平化演变,拟物化材质出现得越来越少。

    近些年,我们发现设计师重新开始使用拟物的阴影和纹理,帮助用户提供逼真的体验和富有吸引力的外观。

    拟物在设计中起到了什么价值?又带给设计师怎样的帮助呢?或许了解从拟物风潮从兴起到衰落,最后再次复兴的原因,能帮助我们更好审视 拟物化 的现实意义。

    2022 年,「粘土拟物化」将会引领新一轮的 UI 设计趋势 设计趋势预测师 Michal Malewicz 又搞事情了。

    阅读文章 >

    1. 诞生——从装饰开始 拟物最初以装饰的形态出现。制作者通过模仿生活中常见的形象来装饰手工艺品和工业制品,唤起人们对熟悉事物的记忆。

    拟物化(Skeuomorphic)一词最早出现在 19 世纪英国考古学家 H.Colley March 所著的《装饰的意义》中,他提到在古陶器中会出现这种模仿生活中常见事物结构或形态的现象。出于装饰目的,人们会模仿其他物体的外形捏制陶器的轮廓,或者绘制出木栅栏、渔网等事物的纹理。

    新石器时代,船形彩陶壶。从器形到纹样都让人都让人联想到渔船、渔网、捕鱼活动等水上生活场面

    在此之后,拟物的装饰手法也出现在工业制品中。最初的汽车车身多数采用了木质框架。在当时的工艺条件下,木质框架既能保证车身的强度,又有不错的性价比。在 20 世纪初,福特推出了木本旅行车。小伙子们开始驾驶着木本旅行车把冲浪板带到海边,吸引着姑娘的目光。这种价格便宜、外观独特,内部空间也非常宽敞的老式木质车型开始受到大量年轻冲浪者的喜爱。随着冲浪文化在美国的流行,这种木质车身也逐渐变成一种流行风格(woodie 风格)。

    随着金属工艺的完善和木材的减少,车厂开始普遍生产钢架车身。曾经风靡的 woodie 风格也变成了一种复古风潮,人们开始怀念质感细腻的木质车身。1957 年,福特为大量 woodie 风格爱好者推出了“水星殖民公园”,车身采用乙烯基塑料和钢模仿木材质感。

    在这个时期,这时拟物的形态还是以装饰产品外观为主。人们将熟悉的场景、喜欢的事物经过加工美化后,还原在某种制品上。本意是希望让使用者在体验新事物的同时,唤起原有事物的相关回忆,感受到原有事物的美感。

    2. 发展——数字时代的宠儿 在数字时代,拟物化设计伴随图形界面的发展,成为连接人与虚拟世界的重要方式。

    1973 年,施乐就最早开发出被称为施乐之星的 Xerox 8108 系统,引入了“桌面”的概念和看起来像文件夹或是纸片的图标。受到施乐的启发,Apple Lisa、GEM、Microsoft Windows 1.01 也紧随其后,研发出了带有 GUI 的计算器系统。

    Xerox 8108

    姆斯·吉布森于 1977 年提出了功能可供性理论,这一理论也深刻影响了拟物化设计。他认为可供性是环境给人提供的行动可能性。比如看到一个木棍,人们可以感知到多种对它的使用方式。比如用棍子敲人、支撑身体、当作燃料等等。图形界面中的拟物化正是利用到这种可供性,通过模仿某种事物来暗示元素的内容,将功能直观的呈现给用户。

    计算机界面对当时的大多数用户是一个完全陌生的概念。拟物化可以帮助用户理解全新的数字界面交互,降低用户的学习成本。它借用人们对现实文件夹的认识,来表达数字世界的文件。通过隐喻让用户认识到文件夹的功能,比如可以打开关闭、内部存有文档等。

    早期界面也广泛参考了物理世界的可操作表面,Mac OS 最初的控制中心就模拟了重型机械或普通家用开关的控制面板。其通过模仿真实按键、旋钮的形态,还有模块的布局体现了不同功能的区分度和可操纵性。

    随着数字屏幕技术和界面设计的发展,界面上的图像也更加完善精细,力求达到与数字程序无缝交互。随着图像不断细化,拟物化的界面元素不仅模仿了现实产品的外观,也可以做到表现产品的材质和体积。

    MacOS X10.0 推出的 Aque 系统,就在界面上绘制出细腻的材质和体积效果。这种材质最突出的质感是半透明塑料和水滴状晶体,灵感来源于当时的 mac 硬件外观。真实细腻的拟物效果不光具有装饰美感,同时也强化了可点击的操作暗示。

    MacOS X10.0

    iPhone 1 首次采用电容触摸屏幕,并且移除了物理键盘,仅保留 home 键。为了让触控操作更加自然、直接,iPhone os 也绘制了精细的拟物风格界面,通过大量使用阴影高光来体现体积效果,让用户可以更直观出哪些按钮是可交互的。

    3. 衰落——扁平化风潮 随着计算机和智能手机的普遍使用,人机界面的普及程度也越来越高。一代人已经接掌握了人机界面的交互逻辑,这时候一味追求实体化世界的体验会增加更多的不必要信息。

    人们开始尝试简化界面的装饰元素,扁平化的设计风格逐渐成为主流。最初的扁平化设计受到 20 世纪初兴起的国际主义排版风格启发。国际主义排版风格主要强调版面的干净、易读,更注重内容的清晰展示。主要特点有:

    符号化、图形化,只保留最基本的视觉元素。 推崇无衬线字体。 文字遵从栅格系统进行工整的布局。

    Brockmann 的海报作品,将文字和图片进行混合排版的模式,也影响了后期的扁平化设计

    扁平化设计也推崇相同的设计原则。设计师不再一味的追求和真实物体外观上对应,而是希望通过更加简洁的元素来突出重点信息。2010 年 Windows 推出首款移动系统“Metro”,采用纯色的背景和大量的卡片作为基本布局。Metro 界面去掉了多余的装饰,更注重提高信息的传递效率。

    微软称其为 Metro (地铁)是因为它“既现代又干净。速度快,而且在运动。”

    Jony Ive 在乔布斯去世后接管了界面设计的工作,在他的主导下 iOS 也一改乔布斯最喜欢的精致拟物风格。在 2013 年发布的 iOS 7.0 中,苹果将大部分阴影和纹理删去。

    虽然 Flat 一词并没有出现在苹果的设计规范中,但《福布斯》说出了大部分人想说的话:拟物化已死(It Was Time For Skeuomorphism To Die)。

    但拟物化真的被人们抛弃了吗?

    4. 复兴——拟物化的“回归” 拟物化和简单高效并不矛盾。正如 iOS 7.0 推出后,苹果在官网所写的:“真正的简单不仅仅是没有杂乱或去除装饰。我们所创作的一切,从不只是为了看起来美观而设计。”

    拟物化最常见的是绘制外形、材质和体积来模拟事物的外观,但也可以模仿熟悉的操作模式,方便用户上手使用。

    从苹果计算器的演化就可以看出,虽然界面逐渐转简化,但都没有脱离拟物的本质。iOS 1 的计算器灵感来自于博朗计算器,并模仿了博朗使用色彩进行功能分区的设计方式。后期苹果虽然对按键归类进行了调整,但这套操作也一直在苹果计算器沿用了下来。

    iOS 的计算器一贯使用色彩进行功能分区设计

    拟物化的材质和体积经过简化后,同样可以作为扁平界面中的元素,并维持原有的功能属性。

    在 iOS 7.0 中的“毛玻璃”沿袭自 MacOS X10.0 的半透明塑料材质。iOS 7 剔除材质中多余的装饰后,这种半透明的质感更强化其功能特性。在删去大量阴影后,页面的空间层次变得难以区分,iOS 正是使用了这种半透明的材质有效的拉开了界面层次。

    尽管删去了阴影,但页面的空间层次还是存在

    合理利用体积也可以在平面起到画龙点睛的作用。iOS 13.0 的备忘录中,涂鸦画笔从线条变成立体的形态。线条的版本中,画笔工具更像是在纸上绘制的符号。新版用平面-立体的区分暗示出了备忘录和画笔,突出需要操作的内容。

    而过于追求视觉效果上的极简,反而会走向效率的反面。在微软后续推出的 Windows 8 中,对扁平化界面的争论达到了高潮。Windows 8 使用磁贴卡片替代拟物的图标和按钮,应用信息直接以文字加图片的形式呈现在磁贴上。在规整的卡片布局下,页面中的复杂信息看起来也可以变得简单又整洁。

    但 Windows 8 的磁铁设计却带来了大量的负面反馈。页面上众多平面元素缺少可进行交互的线索,导致用户不知道哪些可以点击。为了提高应用的吸引力,Windows 支持在磁贴卡片上配置背景图片。但是丰富多彩的背景让应用图标本身变得更加无法识别。用户对 Windows 8 扁平的界面产生了更多困惑。

    Windows 8 启动页,没有名称的应用和背景图

    研究显示在界面中删除可点击感知和层级提示后,用户的操作效率会降低。Kate Meyer 的眼动实验将 9 个不同类别的界面分别改造成强化版(拟物)和轻量版(扁平)两个版本。71 名测试者将对 9 个页面进行体验(每个页面将随机抽取轻量/强化版本其中一个),体验前会设定一个目标让其完成,最后统计所有测试者完成的时间和查找过程中的视觉动线。

    统计发现了两个关键点:

    使用轻量版的用户比使用强化版的多花了 22% 的时间找到目标。 使用轻量版的用户比使用强化版的多出 25% 的视线焦点。

    限定任务为:您将看到航空公司航班的页面。请找到在上午 8:00 到下午 3:00 之间起飞的航班。

    可以看到强化版(拟物)的界面主要用渐变和阴影强调了界面上的重要元素,如按钮、搜索框等。在删除了这些元素后,虽然界面变得更加干净,但是用户使用时也更加费力,视线在界面扫视了很多地方才完成目标。

    在扁平化兴起之前,页面上有多种视觉要素可以提示页面的层级关系。而当这些“多余的装饰”被删除后,我们更需要思考如何处理元素的层级关系。

    Material Design 就在扁平化设计的基础上,提出了更多构建页面层级的手法。比如引入页面的高度,并使用阴影、色彩和不透明度区分不同高度的元素。在保持干扰信息尽可能少的情况下,也可以提示出页面的层级。

    Material Design 像是把手机屏幕简化成了一个向内的小盒,每个元素按自己的分层整理在一个小空间中。

    虽然界面已经逐渐转向了一种更扁平、更抽象的表达形式,但拟物化仍然在界面空间关系和视觉隐喻中存在,但是更加微妙和含蓄了。

    5. 可能性——难以替代的拟物化 人机界面发展的不同阶段,拟物化的形态也在发生变化。但直到现在,拟物化仍然在数字界面上发挥着难以替代的作用。

    近年随着可穿戴设备、AR 和 VR 的兴起,拟物化的作用更加显著。在《Painting VR》这款 VR 应用中,人们绘画时仍然在使用笔+调色板的传统操作模式。可能是 VR 环境太具有创造力,所以开发商们所打造的绘画软件看上去都很酷炫,繁多的功能和复杂的操作也让普通绘画爱好者望而却步。兼顾到虚拟空间的自由度,和用户上手的门槛,正是《Painting VR》在众多 VR 绘图应用中脱颖而出的原因。尽管已经非常熟悉数字世界,用户上手新的操作模式同样需要参考熟悉的对象。

    6. 对我们的启示 拟物化最初作为一种装饰手法,在数字时代到来后被赋予了更强的功能属性。其核心是通过模仿用户熟悉的事物达到降低用户学习成本的目标。至少在人们完全成为“数字世界原住民”前,我们无法抛弃拟物化设计方法,每当需要使用视觉手段对用户进行提示时,参考现实世界中的线索都可以帮助到我们。

    当我们需要使用拟物化设计时,我们可以从过往实践中获得一些启发:

    把元素与现实世界的事物关联,可以省去大量解释成本。 拟物化不是单纯的装饰手法,同样可以参考用户熟悉的操作模式。 不要拘泥于扁平,可以使用材质和体积构建页面的层级。 参考文献:

    Sam Judah,What is skeuomorphism?[N],BBC NEWS,[2013] Lancashire and Cheshire Antiquarian Society,Transactions of the Lancashire and Cheshire Antiquarian Society[M],[1883] Tim Worstall,Apple’s iOS7, Well, It Was Time For Skeuomorphism To Die[N],Forbes,[2013] Adrian Zumbrunnen,Skeuomorphism In Conversational Design[EB/OL],[2017] Tamara Julaton,The Digitization of Reality[EB/OL],[2018] 欢迎关注作者微信公众号:「We-Design」

  • 第三波!2022年8月精选实用设计干货合集

    UI交互 2022-08-16
    各位8月好!这是本月的第三波设计干货,这期合集的类别有所不同,包含了2款高素质的字体,同时还有每日更新的设计素材和工具合集网站,有代码图片和视频生成工具,...

    各位8月好!这是本月的第三波 设计干货 ,这期合集的类别有所不同,包含了2款高素质的字体,同时还有每日更新的设计素材和工具合集网站,有代码图片和视频生成工具,全新的渐变色彩合集,还有设计师针对 Adobe 全家桶的替代品制作的信息图,还有 3D 设计素材,如果有你感兴趣的设计工具和素材,一定记得收藏!

    当然,在此之前记得看看往期干货中有没有你感兴趣的素材:

    第一波!2022年8月精选实用设计干货合集 各位8月好!

    阅读文章 >

    第二波!2022年8月精选实用设计干货合集 各位8月好!

    阅读文章 >

    下面我们具体看看这一期的干货:

    1、全新的在线渐变配色工具 https://gradientify.com/

    Gradientify 是一个全新的渐变设计工具,无需安装,直接在浏览器中使用即可,这个工具当中内置了 100 多个不同的、精心设计的渐变配色,你可以直接提取这些渐变色的配色,也可以直接复制 CSS 片段,也可以下载 PNG 素材,满足不同的需求。

    2、代码截图+视频在线生成工具 https://recoded.netlify.app/

    很多开发者在生成代码展示的图片和视频之时,通常会使用截图或者录屏来实现,但是受限于软件和服务,通常不会那么好看,而这个工具则不同,它专门为方便开发者而设计,背景和代码界面都可以编辑,可以选择对应的编程语言,可以输出图片和视频,无需安装任何功能,浏览器里面就可以搞定一切。

    3、剔透有趣的抽象 3D 素材 Pinxo https://www.pinxo3d.com/

    这个其实是付费的 3D 素材,其中内置了 150+ 优质的抽象 3D 素材,可以直接使用 Figma 和 Blender 进行编辑,这些3D 抽象图形的素质极高,可以直接应用在网页、 APP 、社交媒体等不同的场合使用。这些抽象的 3D 素材默认有 红黄蓝三种颜色可选,方便你进行不同形式的搭配。

    4、每天更新的设计素材工具合集 https://thestocks.im/

    优质的设计素材很多,这个名为 The Stocks 的网站会每天、每周专门汇集一些的新出的设计素材,这些素材会在网站的侧边栏汇集到不同的分类当中,你可以透过这个网站获取不同类型的素材,也可以安装插件,获取每日更新的新素材。

    5、优雅细腻的手写西文字体 Canora https://www.r-typography.com/fonts/canora

    这个名为 Canora 是一款风格极为优雅的西文花体字,字体有着复古但是极为优雅的笔触,而且字体本身还带有向左和向右两种不同的倾斜方式。这款字体本身是付费的,不过官网提供免费的试用,一定不要错过。

    6、复古而极具美感的字体 Firelli https://typejockeys.com/font/firelli

    Firelli 是一款在视觉风格上极为规整的英文字体,字体本身有多种不同的粗细,不同粗细轮廓也有差异,总体给人感觉复古,但是较粗的庄重,较细的优雅,整套字体适用范畴可以说是相当广了。看看这个素质,这套字体当然也是付费的,不过同样提供免费试用。

    7、常见设计软件的免费替代品 https://blog.red-website-design.co.uk/2022/07/18/adobe-alternatives/

    在设计过程中,我们很大程度上是依靠 Adobe 全家桶来进行多媒体设计,不过考虑到全家桶的价格,很多设计师在实际工作中可能还是会依靠一些替代品,设计师 Mark Walker-Ford 制作 一张信息图,信息图上他标注了Adobe 系列软件当中,常用软件的免费和付费替代品,如果你正在寻求这些软件的替代品,不妨看看这张信息图。

  • 腾讯万字干货!如何让设计创新源源不断?(激进篇)

    UI交互 2022-08-16
    创新,引领突破现状。 前言 上一篇设计策略|源源不断的创新思路(渐进篇)我们介绍了渐进式创新和激进式创新,并详细展开了渐进式创新的设计策略,...

    创新,引领突破现状。

    前言 上一篇设计策略|源源不断的创新思路(渐进篇)我们介绍了渐进式创新和激进式创新,并详细展开了渐进式创新的设计策略,本篇激进篇希望帮助 设计师 们在渐进创新的基础上为产品带来更大的突破,也将通过创新启动、创新过程、创新决策三个部分出发,通过具体的策略方法结合案例或思维过程帮助大家在工作中制造自己的灵感永动机。

    腾讯万字干货!如何让设计创新源源不断?(渐进篇) 前言 创新在产品设计和驱动商业中有着不可或缺重要性。

    阅读文章 >

    本篇讲述:激进式创新 激进式创新(Radical Innovation)是相对罕见的,它同时依赖革命性的技术和创新的商业模式来解决问题,激进创新的发生往往伴随着产品的创新、组织创新等连锁反应甚至引起产业结构的变化。科技的创新带来了很多革命,iPhone 开创了电容触屏时代,ARVR 打开了元宇宙之门;新的商业模式利用现有的资源引起行业巨变,如 Uber 和滴滴用物联网技术关联私家车和出行乘客,连接异地旅者和房东的 Airbnb 等都是激进式创新。

    作为设计师,我们在技术和用户间承接着场景和体验,了解激进式创新的方法可以让我们在工作更好地帮助团队突破。很多具有划时代意义的创新产品其实都有设计师创始人的身影:颠覆传统酒店行业的 Airbnb(爱彼迎)的联合创始人 Rian Chesky 和 Joe Gebbia,首创了华夫格底跑鞋的 Nike(耐克)创始人 Bill Bowerman,设计开发了凹凸面圆点拼接积木的 LEGO(乐高)创始人 Ole Kirk Kristiansen,颠覆内容传播权威、开启全民播客时代的 Youtube 联合创始人 Chad Hurley…他们都是设计师出身,基于自己对行业、产品和用户需求的洞察革新了行业。

    激进创新启动 / 策略 2 则

    上一篇提到渐进式创新的起点难度主要在于沟通和传达,而激进式创新依赖创意突破,有两类需求命题可能会让创意发散变得艰难。其中一种是需求命题过于具体,这可能会限制创意的发散空间;另一种则是需求命题过于宏大,无边无际让设计师不知从何着手调研和发散。针对这两种状态,下面的方法将针对性地帮助设计师们解题。

    策略 1. 问题挖掘 Dig Deeper 命题过于具体很可能会限制创意的发散空间,仿佛解决方案已经有了安排,那设计师很可能会被限制在已有思路中。问题挖掘就是针对这类命题打破砂锅问到底,从而帮助自己更好地获得发散思路。问题挖掘就是写下所有能想到的问题,挖掘前因后果,了解内外机会和风险。

    提问可以从以下三种工具角度着手:

    问题: 5W1H

    5W1H 分别是:是什么,是谁,为什么,在哪里,在何时,如何。从这六个提问开始着手列出所有想问的问题,并继续发散关联的子问题。然后尝试自己回答刚刚列出的问题,有些问题可能和命题无关则跳过。当我们自行完成了梳理筛选后,就可以将这些问题在和需求方沟通和访谈时提出,进行深入了解,获得灵感。

    是什么 (What) “我们的创新想要解决什么问题?关键假设是什么?”… 是谁(Who)“产品创新的购买者是谁?用户是谁?相关利益人是谁?”… 为什么(Why)“为何这个问题重要?为何发生这个问题?为何之前未能解决?”… 在哪里(Where) “这个问题发生在哪里?之前在哪里解决?还有哪里有相似的问题? ”… 在何时(When)“这个问题何时发生?问题何时开始?何时可以解决?” … 如何(How)“如何解决?已经尝试了哪些解决办法?”… 5 个为什么(5Why)

    经典的连问 5 个为什么。如果我们针对看到的结果,只问一个“为什么”,很容易停在第一层的表象原因,只有不断的深入挖掘才可以层层递进,找出最关键的底层原因。

    “机器为什么停下来?” 电路过载,使保险丝熔断。 “为什么?” 轴承润滑不足,因此被锁定。 “为什么?” 机器人上的油泵没有循环足够的油。 “为什么?” 泵入口被金属屑堵塞。 “为什么?” 泵上没有过滤器。 层层扩散

    如果五个为什么是向内层层递进,那层层扩散就是向外发问。以最为基础的命题问题作为中心点扩散,向外展开相关因素:产品的核心问题,相关结构技术,外部文化和法规…

    “这个产品我们要解决一个什么问题?为什么要解决这个问题?” “别人对这个产品的当前印象和期待是怎样的,需求发起者是谁?” “这个产品的开发方式,有什么背景,历史渊源,复杂的代码历史,变动难度?” “这个产品拥有的资源?” “这个产品有什么文化、政治、法规背景” “我们的外部优势和劣势是什么?” … 策略 2. 设置边界 Planting Limits 都说设计是戴脚镣跳舞,你是否接到过抽象空泛且听起来没有任何限制的命题?创作条件没有限制也许意味无限可能,但更常意味着难以聚焦。适当的束缚有时可以帮助更好地放飞想法。所以如果面对的命题太庞大,可以尝试给自己设限,或思考可能存在的限制,就能抓到一个相对靠谱的起点。

    “这个项目要控制成本投入,用最少的资金,最少的人力。” “最大程度保留用户的现有体验,尽可能减少用户学习成本。” “新创意最大程度满足原来的代码框架,使用最小的开发成本。” “新的产品体验要极简,将用户路径缩短到三步以内。” “在链路上需要用户使用的媒介最少化。” …

    例. 重新设计支付流程

    原体验:原本用户需要携带钱包出门,钱包里会有多张信用卡,储蓄卡,还会有很多现金。而用户出门手机也必不可少。

    设置边界: 在优化的支付流程里,尽可能减少用户支付需要携带的东西;在用户支付流程中减少遇到的阻力,提升消费。

    新体验:

    让用户可以用软件进行转账,输入需要支付的价格,双方确认后输密码转账。 让用户可以直接扫码进行支付,无需输入价格,无需人工核对。 让用户用指纹确认,或开通多少元以下免密码支付,无需输入密码。 让用户直接手机感应支付,无需打开手机或软件。 扫脸进行支付,即使不带手机也可以进行支付。 激进创新过程 / 策略 3 则 上一篇渐进式创新介绍的方法和原则在激进式创新同样适用,而本文将介绍三则对于命题较大的激进式创新非常适合的过程方法,分别是:创意矩阵,逆向思考,多问“如果”。

    策略 1. 创意矩阵 Creative Matrix 如果需要用创意解决一个较为庞大的主题,尤其是激进类创新设计,那创意矩阵可以迅速排列组合进行发散,且不遗漏内容。

    创意矩阵以表格的形式,让 X 轴和 Y 轴上的内容进行交叉碰撞,强制、批量地激发创意的方法。如在 X 轴写下选择一类用户和主题间的需求(目的 / 流程 / 用户类型 / 特点 / 心理等…),Y 轴写下解决问题的方式(内外部新机会 / 实现方式 / 科技 / 环境 / 媒介 / 分发渠道 / 政策等…),横纵碰撞在一起,就会有一张完全覆盖的创意表格,之后可找出亮点、分析可行性进行创意选择和组合。

    例:设计一个针对工业设计的 3D 建模软件,打破市面上常见的软件功能和体验。

    我们以 Gravity Sketch 的 3D 建模产品为例,用创意矩阵倒推思考的流程。

    (1)首先确定 XY 轴发散方向。能带来革命性改变的体验往往依赖技术层面的实现,技术革新会带来在流程、建模方式的革新。所以我们将 3D 软件依托的技术和媒介为 Y 轴,在媒介的放散方向上同时考虑建模现有媒介(传统的 PC 端和云端软件等)是否还有新的机会;再考虑相对激进、未来的媒介(如 pad 端、VR 端等)。3D 建模的工程经常会涉及到协作分享等流程,选择以整体设计步骤为 X 轴。从这个矩阵开始进行发散,交叉重合的部分思考结合出的设计,再选取其中的亮点向产品方向创新。

    (2)梳理亮点。在梳理发散过程中可以看出,VR 客户端和 pad 用移动端有相对创新的亮点,不同于较为传统的 PC 端和云端。如果 pad 端和 VR 端可以满足 3D 建模软件所需要的性能,这样的创新就可以被支持。

    (3)继续探索。针对每一个流程步骤,可以聚焦到里面的每一个分步骤,探索亮点。比如创作阶段的流程可以展开到具体设计到建模的步骤。当把步骤进行分解之后,可以发散出各个阶段利用 VR 的创作优势。

    (4)梳理亮点。在草图和草模阶段,VR 内直接创作可以节约物理材料,支持无死角设计不用重复出图,帮助立体想象、可视、模拟真实尺寸体验,打通草图到建模的链路…颠覆草图到建模阶段的设计流程,提升整体效率和可能性。

    策略 2. 逆向思考:程序 / 观念 / 状态 逆向思维缔造了许多打破常规的创意。上一篇我们介绍了在渐进式创新中实用的原理/功能/结构三种逆向思路。这里介绍 3 类更适用于激进式创新的逆向思路和具体的案例,为激进式创新赋能。

    程序或方向逆向 | 颠倒事物发展变化的构成顺序、排列位置。

    例 a. C 端服务直接收费 C 端服务免费,其他项盈利

    很多产品在收费时直接向 C 端用户收取服务费用,但是容易面临 C 端有付费意愿的用户量数不多。不如让用户免费使用体验服务,扩大用户留存的基础上,通过向 B 端等有更多支付意愿的商家收取费用。QQ、微信等通讯软件的出现让用户免费使用通讯、社区等功能,通过用户的留存从其他商业化项目收费,如收取在软件内的广告费用。

    例 b. 主动检索 算法推荐

    以前用户浏览信息的方式,偏重于主动搜索需要或感兴趣的内容,但是检索流程相对繁琐,用户可能并不够了解自己的喜好。逆向思路让用户被动接收信息,由算法基于用户的浏览喜好状态进行推荐,无需用户进行检索即可将信息推送给用户。短视频等产品就是通过算法推荐匹配出用户感兴趣的视频,让用户享受“刷”视频的过程。

    观念逆向 | 设计者反转看待问题的观念,或针对人们的观念逆向设计。

    例 a. 少即是多 多才是多

    现代主义建筑大师 Ludwig Mies Van der Rohe 提出“少即是多(Less is more)”的极简设计理念改变了很多产品和建筑设计,之后许多设计师都遵循”少即是多原则进行设计,罗伯特·文丘里 (Robert Venturi)逆向而行从设计思路上“反叛”,开创了“少则无聊(Less is bore)”观念,让设计的建筑更符合街道氛围和文化。BJARKE INGELS B.I.G 事务所则喊出了“多才是多(Yes is more)”,设计出造型夸张有趣的建筑,并从外观出发让设计带有更多丰富的能力。

    例 b. 追随变化 锁定不变

    在日新月异、瞬息万变的互联网,很多企业和产品都在努力拥抱、追随变化,但很少有人去思考什么是不变的。Amazon(亚马逊)创始人 Devin Beverage 在亚马逊创立之初就选择思考未来十年,什么是不变的,并得出了三件极其普通但是消费者最核心在意、不会变化的三件事情:无限选择,最低价格,快速配送。在用户的底层需求上出发,并且长期、持续地投入让亚马逊成长为现在的头部企业,支持经典的包括支持自营&第三方卖家平台(Marketplace)、开放给消费者的比价工具、Prime 会员两日达、影视服务等开创性产品设计。

    状态(过程)逆向 | 改变现在的状态,如正变负,进变退、动变静、硬变软等等,获得创新。

    例 a. 人在路上跑动 跑步机跑道带动

    过去跑步都是人在道路上跑动锻炼身体,人动路不动。但在艳阳天、雨天等天气下在室外的环境就会不适合跑步运动。跑步机的诞生就让用户可以随时在室内环境中舒适、不占空间地进行运动,让“地”动起来,人在原地跑动。不但可以调节跑步机跑带的角度速度等模拟各类环境,还可以监控记录用户的跑动、健康状态,一举多得。

    例 b. 人去商店购物堂食 外卖快递送上门

    过去的购物体验基本都依赖用户到店进行。但这样商店能辐射的客户范围会相对狭小、用户也必须出行才能购物和享用美食。比起提升到店体验,支持送货上门,让用户足不出户体验到购物的乐趣和便捷。不但让顾客可以享受到更远距离、甚至海外的商品,商家同时可以辐射更远距离的顾客,也不用依赖实体门店进行销售。

    策略 3. 多问”如果”,What if… 多问些异想天开的问题,别害怕天马行空的发散。我们总是可以把解题思路再聚焦到一个盒子,所以不用最初就把盖子盖上。阿尔伯特·爱因斯坦甚至说过:“如果一开始这个想法不荒谬,那么它就没有希望了。” 在发散的过程中要敢于想象发散,才能带来突破式创新。当我们想要解决问题的时候可以首先大胆发问、设想出“如果”的场景后,再去考虑实现该场景所需要用到的技术;也可以从技术出发,畅想落地场景的“如果“。

    对于市面上一些带有亮点的产品,我们也可以倒推去思考当初设计者问出的“如果”是什么。这几年全球都在疫情的不断反复中挣扎,我们可以以远程工作场景为例,来思考一些“如果”。

    例. 远程协作

    发散:如果我们远隔万里还能面对面、身处一个空间工作交流…

    如果远程状态下我们还可以像在办公室一样一起查看模型…

    如果在查看模型的基础上我们还可以调整、比对修改方案,及时看到反馈…

    结果:空间感知设计评审

    Microsoft Mesh 使人们能够与全息状态联系,跨空间共享,并从世界上任何地方进行协作。 通过为组织引入支持 Mesh 的混合现实体验,可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议,从而大幅提高工作效率。

    Mesh 通过允许用户使用任何设备在任何位置加入任何位置来增强 3D 设计评审。 无论是物理存在还是全息,同事都可以实时查看和批注 3D 模型。 所有内容都在设计会话之间持续存在,因此团队可以从他们中断的地方快速开始交流理解,激发创造力。

    例. 远程培训和维护

    发散:如果维修人员不能上门工作,是否有人能远程教学我修理电器…

    如果维修人员可以远程修理我的电器就好了…

    如果他们能看到我看到的内容,完全基于我的视角指导我…

    如果还能在我的视觉标记、说明、演示操作方法…

    如果在工业界专业领域,也能这样进行教学、监督、指导…

    结果:远程培训和学习

    Hololens 利用 AR 技术进行远程培训,特别是关于手术、设备维护和交通管制等复杂主题的培训,很难与讲师在同一个房间,并从多个角度查看同一组对象。员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习,有助于提高虚拟培训的效率,同时降低差旅和物流成本。

    激进创新决策 / 策略三则

    Warren Bennis 说,“创新—任何新想法—根据定义,一开始都不会被接受。在创新被组织接受和内化之前,需要反复尝试、无休止的演示、单调的排练。这需要勇敢的耐心。”激进式创新需要经过的等待和挑战可能非常漫长,在这个过程中,更需要谨慎地筛选想法和推进。下面的三则方法可以帮助我们在决策中减少试错成本。

    策略 1. 考虑实现时间和所需要的技术系统 九宫格视窗可以帮助进一步决策,将创意灵感在“系统结构”和“实现时间”两个维度进行排列选择,之后根据需求的资源和达成所需时间进行选择和规划。突破式的创新往往需要大量的时间来完善技术和系统,所以在筛选想法的过程中结合这两个因素,可以保证持续性的创新。

    例. Netflix 播放创新

    现在我们熟知的 Netflix 网飞是一家会员订阅制的流媒体播放平台。

    DVD 及蓝光租赁提供商

    最初在 1997 年刚成立时,Netflix 曾经是一家在线 DVD 及蓝光租赁提供商。当时 DVD 技术刚诞生,轻质的材料代替了原本笨重的 VHS 电影格式存储,让邮寄 DVD 成为了可能。Netflix 创新地使用线上下单、往返邮寄的租赁模式,让用户通过免费快递信封租赁及归还 Netflix 库存的大量影片实体光盘,并以此打败了线下租赁连锁店百视达。

    付费订阅流媒体

    2006 年在线点播技术兴起,随着新技术的出现 Netflix 转向通过互联网流式传输视频,提供更广泛的内容选择,并且可以无限观看、点播、低价,高质量的影视内容,并最终吸引了对手 Blockbuster 的核心客户。Netflix 的付费订阅模式和 Apple 的 iTune 下载、Youtube 的免费模式成为当时最热门的三个细分市场。

    Netflix 的创新帮助他们在市场上站稳脚跟并不断突破,但如果在 1997 年 Neflix 就把流媒体视频作为目标进行创新、不考虑当时的现实技术和研发时长,那公司可能在漫长的科技发展等待中生存,也就没有后来的故事了。所以对于突破性的创意,按照时间维度、技术实现给出逐步创新的节奏,通常能更好地帮助产品持续创新。

    策略 2. 考虑可推动性&可实现性 如果你的创意需要在大公司里进行落地和推进,可以使用“传播速度和可实现性”矩阵逐步选择,第一步聚焦适应速度和传播速度,将决策者对产品的影响也放入考察。第二步,审查可实现性和财务可行性,之后做出相应选择和推动。

    这个矩阵也可以用于对外部环境的判断,在第一步骤中考虑想法在文化、政治、地缘等因素下的适应和传播速度,在第二步骤中考虑市场技术或包容度是否能支持该想法的推动。

    例. 出行产品的本地化决策

    以出行领域的产品设计为例,我们可以看看在这个领域里一些创新决策考虑。我们熟悉的 Uber,滴滴等打车平台通过利用空闲的私家车来接送乘客,降低了打车花费、难度和空闲汽车的利用率,颠覆了原本的出租车打车市场。而在决策想法时,这类出行产品需要考虑当地的具体交通、运输工具、出行状态等现实因素进行推送。

    UberEats 在美国部分城市用汽车送外卖

    Uber 优步是起源美国的打车平台,2016 年该品牌在美国本土开启外卖业务。当时中国已经成熟的外卖业务主要是由骑手骑电瓶车来完成外卖服务,但在美国一些城市自行车作为工具的出行道路十分有限,人们居住的距离也相对遥远。所以 Uber 从他们已有的打车系统上汲取了思路,在这些城市让司机用汽车送外卖解决了路程遥远的问题,同时让他们可以有机结合接送乘客和接送外卖的订单,系统规划路线后不但提高效率,也让司机增加了收益。

    Gojek 在印尼用摩托车送乘客

    2015 年,当来自美国的 Uber 和来自新加坡的打车平台 Grab 在印尼打得火热、且都使用出租车和私家车作为接送乘客的交通工具时,印尼市场的 Gojek 则聚焦印尼的国情,把打车平台的思路运用在打摩的上,规范化摩的市场。在交通严重拥挤的印尼,摩的的快速穿梭远比汽车出行更适合本土,这让 Gojak 成为了印尼的第一大出行平台,并在后来拓展出庞大的本地生活产品体系。

    策略 3. 小心鸿沟 “如果解决方案意味着与他们习惯接受的标准有太大的偏离,那么成年公众的口味不一定准备好接受符合他们要求的合乎逻辑的解决方案。” ——Raymond Loewy,著名的可口可乐瓶、壳牌石油标志背后的工业设计师这样说。

    如果你的创意需要很多解释,大量的培训和“帮助”功能,那么这样的设计可能过于先进或复杂,不易被大众理解。产品创意在初期会辐射到的创新者、早期使用者与普通使用大众间可能存在着差距,在一些案例中,早期使用者觉得有趣认可的解决方案并不被大众所买单,所以在选择创意和推进过程中,设计师也要考虑这种差距。

    例. Airbnb 如何更好地衔接早期大众

    Airbnb 将寻求经济实惠住宿地点的旅行者与想要租房或备用房间的人联系起来,这个想法现在已经被大众熟悉。但在 2009 年业务的第一年,这个创意是非常具有创新性的,尚不为大众熟知。

    好创意却不得市场认可

    当时虽然早期使用者的反馈非常好,但团队仍然面临着严峻的用户增长和收入挑战,甚至一度每周只赚 200 美元。为什么这样一个对租客和出租者都互惠互利的创新,却不能在市场上得到良好的反馈呢?一天下午,团队正在与 Paul Graham 一起思考纽约市的搜索结果,试图弄清楚为什么他们增长。Paul Graham 给出了一个简单的建议:前往纽约,租一台相机,花一些时间与客户一起列出他们的房产,并用美丽的高分辨率照片取代业余摄影。因此,团队成员飞往纽约,与 Airbnb 在网站上列出房产的客户会面、拍摄高质量照片。结果收入迅速增加了 100%(400 美元)。

    照片减少沟通鸿沟

    究其原因,其实是虽然当时 Airbnb 的想法已经在市场上独具突破性,但团队没有考虑到早期使用者和早期大众之间的差距。早期使用者往往乐于尝试新事物且有很强的需求(特别体验、更低成本出行等),而早期大众会和他们现有的酒店体验进行比较,安全、正规、优质、温馨的入住体验是他们的强需求,那些非高清、非精美照片很难在第一印象上说服早起大众这些品质。弥补上这个预期差距后,也就有更多的用户愿意尝试了。在后续的迭代中,Airbnb 也也在系统改进上不断强化安全、正规,更好地满足用户。

    结语 激进式创新往往依赖团队基于用户需求、市场、技术等多维度内容的理解。在创新过程中,设计师更多了解相关领域和创意方法就能更有益启迪想法。希望本文激进篇、上文渐进篇的设计策略可以帮助设计师们更好地创新发散。

    创新思维可以被学习累积,设计师可以保持多看多思考的习惯,从其他优秀的设计和产品上反推创意思路。 设计创新 时要相信推进的过程,如果对题目感到无从下手,相比纠结现有思路是不是最优解,不如用文中的方法把想法全部写下来并原型尝试。许多时候我们离优秀的想法只是一步之遥,也许转个弯就柳暗花明了。

    参考:部分策略启发/提炼自以下著作和文章:

    《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist) 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick(Author),Nadia Langensand(Artist) 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters 《Thinking, Fast and Slow》Daniel Kahneman 《Cross the Chasm》Geoffrey A. Moore 《The Innovator‘s Dilemma》Clayton M. Christensen 《Lean Startup》Eric Ries https://www.interaction-design.org/literature/topics/5-whys https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8 https://www.viima.com/blog/types-of-innovation https://designsojourn.com/design-processed-explained/ https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71 https://news.airbnb.com/2021-release/ https://www.producthunt.com/posts/clipdrop-2 https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73 https://docs.microsoft.com/zh-cn/mesh/get-started 欢迎关注作者微信公众号:「腾讯ISUX」

  • 5000字干货!拟物化设计的消亡与复兴史

    UI交互 2022-08-16
    拟物化设计曾经风靡一时,真实的体积和细腻的质感给人们留下了深刻印象。 在不断发展中,界面又逐渐向扁平化演变,拟物化材质出现得越来越少。 近些年,我们发...

    拟物化设计 曾经风靡一时,真实的体积和细腻的质感给人们留下了深刻印象。

    在不断发展中,界面又逐渐向扁平化演变,拟物化材质出现得越来越少。

    近些年,我们发现设计师重新开始使用拟物的阴影和纹理,帮助用户提供逼真的体验和富有吸引力的外观。

    拟物在设计中起到了什么价值?又带给设计师怎样的帮助呢?或许了解从拟物风潮从兴起到衰落,最后再次复兴的原因,能帮助我们更好审视 拟物化 的现实意义。

    2022 年,「粘土拟物化」将会引领新一轮的 UI 设计趋势 设计趋势预测师 Michal Malewicz 又搞事情了。

    阅读文章 >

    1. 诞生——从装饰开始 拟物最初以装饰的形态出现。制作者通过模仿生活中常见的形象来装饰手工艺品和工业制品,唤起人们对熟悉事物的记忆。

    拟物化(Skeuomorphic)一词最早出现在 19 世纪英国考古学家 H.Colley March 所著的《装饰的意义》中,他提到在古陶器中会出现这种模仿生活中常见事物结构或形态的现象。出于装饰目的,人们会模仿其他物体的外形捏制陶器的轮廓,或者绘制出木栅栏、渔网等事物的纹理。

    新石器时代,船形彩陶壶。从器形到纹样都让人都让人联想到渔船、渔网、捕鱼活动等水上生活场面

    在此之后,拟物的装饰手法也出现在工业制品中。最初的汽车车身多数采用了木质框架。在当时的工艺条件下,木质框架既能保证车身的强度,又有不错的性价比。在 20 世纪初,福特推出了木本旅行车。小伙子们开始驾驶着木本旅行车把冲浪板带到海边,吸引着姑娘的目光。这种价格便宜、外观独特,内部空间也非常宽敞的老式木质车型开始受到大量年轻冲浪者的喜爱。随着冲浪文化在美国的流行,这种木质车身也逐渐变成一种流行风格(woodie 风格)。

    随着金属工艺的完善和木材的减少,车厂开始普遍生产钢架车身。曾经风靡的 woodie 风格也变成了一种复古风潮,人们开始怀念质感细腻的木质车身。1957 年,福特为大量 woodie 风格爱好者推出了“水星殖民公园”,车身采用乙烯基塑料和钢模仿木材质感。

    在这个时期,这时拟物的形态还是以装饰产品外观为主。人们将熟悉的场景、喜欢的事物经过加工美化后,还原在某种制品上。本意是希望让使用者在体验新事物的同时,唤起原有事物的相关回忆,感受到原有事物的美感。

    2. 发展——数字时代的宠儿 在数字时代,拟物化设计伴随图形界面的发展,成为连接人与虚拟世界的重要方式。

    1973 年,施乐就最早开发出被称为施乐之星的 Xerox 8108 系统,引入了“桌面”的概念和看起来像文件夹或是纸片的图标。受到施乐的启发,Apple Lisa、GEM、Microsoft Windows 1.01 也紧随其后,研发出了带有 GUI 的计算器系统。

    Xerox 8108

    姆斯·吉布森于 1977 年提出了功能可供性理论,这一理论也深刻影响了拟物化设计。他认为可供性是环境给人提供的行动可能性。比如看到一个木棍,人们可以感知到多种对它的使用方式。比如用棍子敲人、支撑身体、当作燃料等等。图形界面中的拟物化正是利用到这种可供性,通过模仿某种事物来暗示元素的内容,将功能直观的呈现给用户。

    计算机界面对当时的大多数用户是一个完全陌生的概念。拟物化可以帮助用户理解全新的数字界面交互,降低用户的学习成本。它借用人们对现实文件夹的认识,来表达数字世界的文件。通过隐喻让用户认识到文件夹的功能,比如可以打开关闭、内部存有文档等。

    早期界面也广泛参考了物理世界的可操作表面,Mac OS 最初的控制中心就模拟了重型机械或普通家用开关的控制面板。其通过模仿真实按键、旋钮的形态,还有模块的布局体现了不同功能的区分度和可操纵性。

    随着数字屏幕技术和界面设计的发展,界面上的图像也更加完善精细,力求达到与数字程序无缝交互。随着图像不断细化,拟物化的界面元素不仅模仿了现实产品的外观,也可以做到表现产品的材质和体积。

    MacOS X10.0 推出的 Aque 系统,就在界面上绘制出细腻的材质和体积效果。这种材质最突出的质感是半透明塑料和水滴状晶体,灵感来源于当时的 mac 硬件外观。真实细腻的拟物效果不光具有装饰美感,同时也强化了可点击的操作暗示。

    MacOS X10.0

    iPhone 1 首次采用电容触摸屏幕,并且移除了物理键盘,仅保留 home 键。为了让触控操作更加自然、直接,iPhone os 也绘制了精细的拟物风格界面,通过大量使用阴影高光来体现体积效果,让用户可以更直观出哪些按钮是可交互的。

    3. 衰落——扁平化风潮 随着计算机和智能手机的普遍使用,人机界面的普及程度也越来越高。一代人已经接掌握了人机界面的交互逻辑,这时候一味追求实体化世界的体验会增加更多的不必要信息。

    人们开始尝试简化界面的装饰元素,扁平化的设计风格逐渐成为主流。最初的扁平化设计受到 20 世纪初兴起的国际主义排版风格启发。国际主义排版风格主要强调版面的干净、易读,更注重内容的清晰展示。主要特点有:

    符号化、图形化,只保留最基本的视觉元素。 推崇无衬线字体。 文字遵从栅格系统进行工整的布局。

    Brockmann 的海报作品,将文字和图片进行混合排版的模式,也影响了后期的扁平化设计

    扁平化设计也推崇相同的设计原则。设计师不再一味的追求和真实物体外观上对应,而是希望通过更加简洁的元素来突出重点信息。2010 年 Windows 推出首款移动系统“Metro”,采用纯色的背景和大量的卡片作为基本布局。Metro 界面去掉了多余的装饰,更注重提高信息的传递效率。

    微软称其为 Metro (地铁)是因为它“既现代又干净。速度快,而且在运动。”

    Jony Ive 在乔布斯去世后接管了界面设计的工作,在他的主导下 iOS 也一改乔布斯最喜欢的精致拟物风格。在 2013 年发布的 iOS 7.0 中,苹果将大部分阴影和纹理删去。

    虽然 Flat 一词并没有出现在苹果的设计规范中,但《福布斯》说出了大部分人想说的话:拟物化已死(It Was Time For Skeuomorphism To Die)。

    但拟物化真的被人们抛弃了吗?

    4. 复兴——拟物化的“回归” 拟物化和简单高效并不矛盾。正如 iOS 7.0 推出后,苹果在官网所写的:“真正的简单不仅仅是没有杂乱或去除装饰。我们所创作的一切,从不只是为了看起来美观而设计。”

    拟物化最常见的是绘制外形、材质和体积来模拟事物的外观,但也可以模仿熟悉的操作模式,方便用户上手使用。

    从苹果计算器的演化就可以看出,虽然界面逐渐转简化,但都没有脱离拟物的本质。iOS 1 的计算器灵感来自于博朗计算器,并模仿了博朗使用色彩进行功能分区的设计方式。后期苹果虽然对按键归类进行了调整,但这套操作也一直在苹果计算器沿用了下来。

    iOS 的计算器一贯使用色彩进行功能分区设计

    拟物化的材质和体积经过简化后,同样可以作为扁平界面中的元素,并维持原有的功能属性。

    在 iOS 7.0 中的“毛玻璃”沿袭自 MacOS X10.0 的半透明塑料材质。iOS 7 剔除材质中多余的装饰后,这种半透明的质感更强化其功能特性。在删去大量阴影后,页面的空间层次变得难以区分,iOS 正是使用了这种半透明的材质有效的拉开了界面层次。

    尽管删去了阴影,但页面的空间层次还是存在

    合理利用体积也可以在平面起到画龙点睛的作用。iOS 13.0 的备忘录中,涂鸦画笔从线条变成立体的形态。线条的版本中,画笔工具更像是在纸上绘制的符号。新版用平面-立体的区分暗示出了备忘录和画笔,突出需要操作的内容。

    而过于追求视觉效果上的极简,反而会走向效率的反面。在微软后续推出的 Windows 8 中,对扁平化界面的争论达到了高潮。Windows 8 使用磁贴卡片替代拟物的图标和按钮,应用信息直接以文字加图片的形式呈现在磁贴上。在规整的卡片布局下,页面中的复杂信息看起来也可以变得简单又整洁。

    但 Windows 8 的磁铁设计却带来了大量的负面反馈。页面上众多平面元素缺少可进行交互的线索,导致用户不知道哪些可以点击。为了提高应用的吸引力,Windows 支持在磁贴卡片上配置背景图片。但是丰富多彩的背景让应用图标本身变得更加无法识别。用户对 Windows 8 扁平的界面产生了更多困惑。

    Windows 8 启动页,没有名称的应用和背景图

    研究显示在界面中删除可点击感知和层级提示后,用户的操作效率会降低。Kate Meyer 的眼动实验将 9 个不同类别的界面分别改造成强化版(拟物)和轻量版(扁平)两个版本。71 名测试者将对 9 个页面进行体验(每个页面将随机抽取轻量/强化版本其中一个),体验前会设定一个目标让其完成,最后统计所有测试者完成的时间和查找过程中的视觉动线。

    统计发现了两个关键点:

    使用轻量版的用户比使用强化版的多花了 22% 的时间找到目标。 使用轻量版的用户比使用强化版的多出 25% 的视线焦点。

    限定任务为:您将看到航空公司航班的页面。请找到在上午 8:00 到下午 3:00 之间起飞的航班。

    可以看到强化版(拟物)的界面主要用渐变和阴影强调了界面上的重要元素,如按钮、搜索框等。在删除了这些元素后,虽然界面变得更加干净,但是用户使用时也更加费力,视线在界面扫视了很多地方才完成目标。

    在扁平化兴起之前,页面上有多种视觉要素可以提示页面的层级关系。而当这些“多余的装饰”被删除后,我们更需要思考如何处理元素的层级关系。

    Material Design 就在扁平化设计的基础上,提出了更多构建页面层级的手法。比如引入页面的高度,并使用阴影、色彩和不透明度区分不同高度的元素。在保持干扰信息尽可能少的情况下,也可以提示出页面的层级。

    Material Design 像是把手机屏幕简化成了一个向内的小盒,每个元素按自己的分层整理在一个小空间中。

    虽然界面已经逐渐转向了一种更扁平、更抽象的表达形式,但拟物化仍然在界面空间关系和视觉隐喻中存在,但是更加微妙和含蓄了。

    5. 可能性——难以替代的拟物化 人机界面发展的不同阶段,拟物化的形态也在发生变化。但直到现在,拟物化仍然在数字界面上发挥着难以替代的作用。

    近年随着可穿戴设备、AR 和 VR 的兴起,拟物化的作用更加显著。在《Painting VR》这款 VR 应用中,人们绘画时仍然在使用笔+调色板的传统操作模式。可能是 VR 环境太具有创造力,所以开发商们所打造的绘画软件看上去都很酷炫,繁多的功能和复杂的操作也让普通绘画爱好者望而却步。兼顾到虚拟空间的自由度,和用户上手的门槛,正是《Painting VR》在众多 VR 绘图应用中脱颖而出的原因。尽管已经非常熟悉数字世界,用户上手新的操作模式同样需要参考熟悉的对象。

    6. 对我们的启示 拟物化最初作为一种装饰手法,在数字时代到来后被赋予了更强的功能属性。其核心是通过模仿用户熟悉的事物达到降低用户学习成本的目标。至少在人们完全成为“数字世界原住民”前,我们无法抛弃拟物化设计方法,每当需要使用视觉手段对用户进行提示时,参考现实世界中的线索都可以帮助到我们。

    当我们需要使用拟物化设计时,我们可以从过往实践中获得一些启发:

    把元素与现实世界的事物关联,可以省去大量解释成本。 拟物化不是单纯的装饰手法,同样可以参考用户熟悉的操作模式。 不要拘泥于扁平,可以使用材质和体积构建页面的层级。 参考文献:

    Sam Judah,What is skeuomorphism?[N],BBC NEWS,[2013] Lancashire and Cheshire Antiquarian Society,Transactions of the Lancashire and Cheshire Antiquarian Society[M],[1883] Tim Worstall,Apple’s iOS7, Well, It Was Time For Skeuomorphism To Die[N],Forbes,[2013] Adrian Zumbrunnen,Skeuomorphism In Conversational Design[EB/OL],[2017] Tamara Julaton,The Digitization of Reality[EB/OL],[2018] 欢迎关注作者微信公众号:「We-Design」

  • 腾讯万字干货!如何让设计创新源源不断?(激进篇)

    UI交互 2022-08-16
    创新,引领突破现状。 前言 上一篇设计策略|源源不断的创新思路(渐进篇)我们介绍了渐进式创新和激进式创新,并详细展开了渐进式创新的设计策略,...

    创新,引领突破现状。

    前言 上一篇设计策略|源源不断的创新思路(渐进篇)我们介绍了渐进式创新和激进式创新,并详细展开了渐进式创新的设计策略,本篇激进篇希望帮助 设计师 们在渐进创新的基础上为产品带来更大的突破,也将通过创新启动、创新过程、创新决策三个部分出发,通过具体的策略方法结合案例或思维过程帮助大家在工作中制造自己的灵感永动机。

    腾讯万字干货!如何让设计创新源源不断?(渐进篇) 前言 创新在产品设计和驱动商业中有着不可或缺重要性。

    阅读文章 >

    本篇讲述:激进式创新 激进式创新(Radical Innovation)是相对罕见的,它同时依赖革命性的技术和创新的商业模式来解决问题,激进创新的发生往往伴随着产品的创新、组织创新等连锁反应甚至引起产业结构的变化。科技的创新带来了很多革命,iPhone 开创了电容触屏时代,ARVR 打开了元宇宙之门;新的商业模式利用现有的资源引起行业巨变,如 Uber 和滴滴用物联网技术关联私家车和出行乘客,连接异地旅者和房东的 Airbnb 等都是激进式创新。

    作为设计师,我们在技术和用户间承接着场景和体验,了解激进式创新的方法可以让我们在工作更好地帮助团队突破。很多具有划时代意义的创新产品其实都有设计师创始人的身影:颠覆传统酒店行业的 Airbnb(爱彼迎)的联合创始人 Rian Chesky 和 Joe Gebbia,首创了华夫格底跑鞋的 Nike(耐克)创始人 Bill Bowerman,设计开发了凹凸面圆点拼接积木的 LEGO(乐高)创始人 Ole Kirk Kristiansen,颠覆内容传播权威、开启全民播客时代的 Youtube 联合创始人 Chad Hurley…他们都是设计师出身,基于自己对行业、产品和用户需求的洞察革新了行业。

    激进创新启动 / 策略 2 则

    上一篇提到渐进式创新的起点难度主要在于沟通和传达,而激进式创新依赖创意突破,有两类需求命题可能会让创意发散变得艰难。其中一种是需求命题过于具体,这可能会限制创意的发散空间;另一种则是需求命题过于宏大,无边无际让设计师不知从何着手调研和发散。针对这两种状态,下面的方法将针对性地帮助设计师们解题。

    策略 1. 问题挖掘 Dig Deeper 命题过于具体很可能会限制创意的发散空间,仿佛解决方案已经有了安排,那设计师很可能会被限制在已有思路中。问题挖掘就是针对这类命题打破砂锅问到底,从而帮助自己更好地获得发散思路。问题挖掘就是写下所有能想到的问题,挖掘前因后果,了解内外机会和风险。

    提问可以从以下三种工具角度着手:

    问题: 5W1H

    5W1H 分别是:是什么,是谁,为什么,在哪里,在何时,如何。从这六个提问开始着手列出所有想问的问题,并继续发散关联的子问题。然后尝试自己回答刚刚列出的问题,有些问题可能和命题无关则跳过。当我们自行完成了梳理筛选后,就可以将这些问题在和需求方沟通和访谈时提出,进行深入了解,获得灵感。

    是什么 (What) “我们的创新想要解决什么问题?关键假设是什么?”… 是谁(Who)“产品创新的购买者是谁?用户是谁?相关利益人是谁?”… 为什么(Why)“为何这个问题重要?为何发生这个问题?为何之前未能解决?”… 在哪里(Where) “这个问题发生在哪里?之前在哪里解决?还有哪里有相似的问题? ”… 在何时(When)“这个问题何时发生?问题何时开始?何时可以解决?” … 如何(How)“如何解决?已经尝试了哪些解决办法?”… 5 个为什么(5Why)

    经典的连问 5 个为什么。如果我们针对看到的结果,只问一个“为什么”,很容易停在第一层的表象原因,只有不断的深入挖掘才可以层层递进,找出最关键的底层原因。

    “机器为什么停下来?” 电路过载,使保险丝熔断。 “为什么?” 轴承润滑不足,因此被锁定。 “为什么?” 机器人上的油泵没有循环足够的油。 “为什么?” 泵入口被金属屑堵塞。 “为什么?” 泵上没有过滤器。 层层扩散

    如果五个为什么是向内层层递进,那层层扩散就是向外发问。以最为基础的命题问题作为中心点扩散,向外展开相关因素:产品的核心问题,相关结构技术,外部文化和法规…

    “这个产品我们要解决一个什么问题?为什么要解决这个问题?” “别人对这个产品的当前印象和期待是怎样的,需求发起者是谁?” “这个产品的开发方式,有什么背景,历史渊源,复杂的代码历史,变动难度?” “这个产品拥有的资源?” “这个产品有什么文化、政治、法规背景” “我们的外部优势和劣势是什么?” … 策略 2. 设置边界 Planting Limits 都说设计是戴脚镣跳舞,你是否接到过抽象空泛且听起来没有任何限制的命题?创作条件没有限制也许意味无限可能,但更常意味着难以聚焦。适当的束缚有时可以帮助更好地放飞想法。所以如果面对的命题太庞大,可以尝试给自己设限,或思考可能存在的限制,就能抓到一个相对靠谱的起点。

    “这个项目要控制成本投入,用最少的资金,最少的人力。” “最大程度保留用户的现有体验,尽可能减少用户学习成本。” “新创意最大程度满足原来的代码框架,使用最小的开发成本。” “新的产品体验要极简,将用户路径缩短到三步以内。” “在链路上需要用户使用的媒介最少化。” …

    例. 重新设计支付流程

    原体验:原本用户需要携带钱包出门,钱包里会有多张信用卡,储蓄卡,还会有很多现金。而用户出门手机也必不可少。

    设置边界: 在优化的支付流程里,尽可能减少用户支付需要携带的东西;在用户支付流程中减少遇到的阻力,提升消费。

    新体验:

    让用户可以用软件进行转账,输入需要支付的价格,双方确认后输密码转账。 让用户可以直接扫码进行支付,无需输入价格,无需人工核对。 让用户用指纹确认,或开通多少元以下免密码支付,无需输入密码。 让用户直接手机感应支付,无需打开手机或软件。 扫脸进行支付,即使不带手机也可以进行支付。 激进创新过程 / 策略 3 则 上一篇渐进式创新介绍的方法和原则在激进式创新同样适用,而本文将介绍三则对于命题较大的激进式创新非常适合的过程方法,分别是:创意矩阵,逆向思考,多问“如果”。

    策略 1. 创意矩阵 Creative Matrix 如果需要用创意解决一个较为庞大的主题,尤其是激进类创新设计,那创意矩阵可以迅速排列组合进行发散,且不遗漏内容。

    创意矩阵以表格的形式,让 X 轴和 Y 轴上的内容进行交叉碰撞,强制、批量地激发创意的方法。如在 X 轴写下选择一类用户和主题间的需求(目的 / 流程 / 用户类型 / 特点 / 心理等…),Y 轴写下解决问题的方式(内外部新机会 / 实现方式 / 科技 / 环境 / 媒介 / 分发渠道 / 政策等…),横纵碰撞在一起,就会有一张完全覆盖的创意表格,之后可找出亮点、分析可行性进行创意选择和组合。

    例:设计一个针对工业设计的 3D 建模软件,打破市面上常见的软件功能和体验。

    我们以 Gravity Sketch 的 3D 建模产品为例,用创意矩阵倒推思考的流程。

    (1)首先确定 XY 轴发散方向。能带来革命性改变的体验往往依赖技术层面的实现,技术革新会带来在流程、建模方式的革新。所以我们将 3D 软件依托的技术和媒介为 Y 轴,在媒介的放散方向上同时考虑建模现有媒介(传统的 PC 端和云端软件等)是否还有新的机会;再考虑相对激进、未来的媒介(如 pad 端、VR 端等)。3D 建模的工程经常会涉及到协作分享等流程,选择以整体设计步骤为 X 轴。从这个矩阵开始进行发散,交叉重合的部分思考结合出的设计,再选取其中的亮点向产品方向创新。

    (2)梳理亮点。在梳理发散过程中可以看出,VR 客户端和 pad 用移动端有相对创新的亮点,不同于较为传统的 PC 端和云端。如果 pad 端和 VR 端可以满足 3D 建模软件所需要的性能,这样的创新就可以被支持。

    (3)继续探索。针对每一个流程步骤,可以聚焦到里面的每一个分步骤,探索亮点。比如创作阶段的流程可以展开到具体设计到建模的步骤。当把步骤进行分解之后,可以发散出各个阶段利用 VR 的创作优势。

    (4)梳理亮点。在草图和草模阶段,VR 内直接创作可以节约物理材料,支持无死角设计不用重复出图,帮助立体想象、可视、模拟真实尺寸体验,打通草图到建模的链路…颠覆草图到建模阶段的设计流程,提升整体效率和可能性。

    策略 2. 逆向思考:程序 / 观念 / 状态 逆向思维缔造了许多打破常规的创意。上一篇我们介绍了在渐进式创新中实用的原理/功能/结构三种逆向思路。这里介绍 3 类更适用于激进式创新的逆向思路和具体的案例,为激进式创新赋能。

    程序或方向逆向 | 颠倒事物发展变化的构成顺序、排列位置。

    例 a. C 端服务直接收费 C 端服务免费,其他项盈利

    很多产品在收费时直接向 C 端用户收取服务费用,但是容易面临 C 端有付费意愿的用户量数不多。不如让用户免费使用体验服务,扩大用户留存的基础上,通过向 B 端等有更多支付意愿的商家收取费用。QQ、微信等通讯软件的出现让用户免费使用通讯、社区等功能,通过用户的留存从其他商业化项目收费,如收取在软件内的广告费用。

    例 b. 主动检索 算法推荐

    以前用户浏览信息的方式,偏重于主动搜索需要或感兴趣的内容,但是检索流程相对繁琐,用户可能并不够了解自己的喜好。逆向思路让用户被动接收信息,由算法基于用户的浏览喜好状态进行推荐,无需用户进行检索即可将信息推送给用户。短视频等产品就是通过算法推荐匹配出用户感兴趣的视频,让用户享受“刷”视频的过程。

    观念逆向 | 设计者反转看待问题的观念,或针对人们的观念逆向设计。

    例 a. 少即是多 多才是多

    现代主义建筑大师 Ludwig Mies Van der Rohe 提出“少即是多(Less is more)”的极简设计理念改变了很多产品和建筑设计,之后许多设计师都遵循”少即是多原则进行设计,罗伯特·文丘里 (Robert Venturi)逆向而行从设计思路上“反叛”,开创了“少则无聊(Less is bore)”观念,让设计的建筑更符合街道氛围和文化。BJARKE INGELS B.I.G 事务所则喊出了“多才是多(Yes is more)”,设计出造型夸张有趣的建筑,并从外观出发让设计带有更多丰富的能力。

    例 b. 追随变化 锁定不变

    在日新月异、瞬息万变的互联网,很多企业和产品都在努力拥抱、追随变化,但很少有人去思考什么是不变的。Amazon(亚马逊)创始人 Devin Beverage 在亚马逊创立之初就选择思考未来十年,什么是不变的,并得出了三件极其普通但是消费者最核心在意、不会变化的三件事情:无限选择,最低价格,快速配送。在用户的底层需求上出发,并且长期、持续地投入让亚马逊成长为现在的头部企业,支持经典的包括支持自营&第三方卖家平台(Marketplace)、开放给消费者的比价工具、Prime 会员两日达、影视服务等开创性产品设计。

    状态(过程)逆向 | 改变现在的状态,如正变负,进变退、动变静、硬变软等等,获得创新。

    例 a. 人在路上跑动 跑步机跑道带动

    过去跑步都是人在道路上跑动锻炼身体,人动路不动。但在艳阳天、雨天等天气下在室外的环境就会不适合跑步运动。跑步机的诞生就让用户可以随时在室内环境中舒适、不占空间地进行运动,让“地”动起来,人在原地跑动。不但可以调节跑步机跑带的角度速度等模拟各类环境,还可以监控记录用户的跑动、健康状态,一举多得。

    例 b. 人去商店购物堂食 外卖快递送上门

    过去的购物体验基本都依赖用户到店进行。但这样商店能辐射的客户范围会相对狭小、用户也必须出行才能购物和享用美食。比起提升到店体验,支持送货上门,让用户足不出户体验到购物的乐趣和便捷。不但让顾客可以享受到更远距离、甚至海外的商品,商家同时可以辐射更远距离的顾客,也不用依赖实体门店进行销售。

    策略 3. 多问”如果”,What if… 多问些异想天开的问题,别害怕天马行空的发散。我们总是可以把解题思路再聚焦到一个盒子,所以不用最初就把盖子盖上。阿尔伯特·爱因斯坦甚至说过:“如果一开始这个想法不荒谬,那么它就没有希望了。” 在发散的过程中要敢于想象发散,才能带来突破式创新。当我们想要解决问题的时候可以首先大胆发问、设想出“如果”的场景后,再去考虑实现该场景所需要用到的技术;也可以从技术出发,畅想落地场景的“如果“。

    对于市面上一些带有亮点的产品,我们也可以倒推去思考当初设计者问出的“如果”是什么。这几年全球都在疫情的不断反复中挣扎,我们可以以远程工作场景为例,来思考一些“如果”。

    例. 远程协作

    发散:如果我们远隔万里还能面对面、身处一个空间工作交流…

    如果远程状态下我们还可以像在办公室一样一起查看模型…

    如果在查看模型的基础上我们还可以调整、比对修改方案,及时看到反馈…

    结果:空间感知设计评审

    Microsoft Mesh 使人们能够与全息状态联系,跨空间共享,并从世界上任何地方进行协作。 通过为组织引入支持 Mesh 的混合现实体验,可以增强虚拟会议、进行虚拟设计会话、远程帮助他人以及举办沉浸式虚拟会议,从而大幅提高工作效率。

    Mesh 通过允许用户使用任何设备在任何位置加入任何位置来增强 3D 设计评审。 无论是物理存在还是全息,同事都可以实时查看和批注 3D 模型。 所有内容都在设计会话之间持续存在,因此团队可以从他们中断的地方快速开始交流理解,激发创造力。

    例. 远程培训和维护

    发散:如果维修人员不能上门工作,是否有人能远程教学我修理电器…

    如果维修人员可以远程修理我的电器就好了…

    如果他们能看到我看到的内容,完全基于我的视角指导我…

    如果还能在我的视觉标记、说明、演示操作方法…

    如果在工业界专业领域,也能这样进行教学、监督、指导…

    结果:远程培训和学习

    Hololens 利用 AR 技术进行远程培训,特别是关于手术、设备维护和交通管制等复杂主题的培训,很难与讲师在同一个房间,并从多个角度查看同一组对象。员工可以通过全息传送、全息共享和可视化效果从任何地方一起学习,有助于提高虚拟培训的效率,同时降低差旅和物流成本。

    激进创新决策 / 策略三则

    Warren Bennis 说,“创新—任何新想法—根据定义,一开始都不会被接受。在创新被组织接受和内化之前,需要反复尝试、无休止的演示、单调的排练。这需要勇敢的耐心。”激进式创新需要经过的等待和挑战可能非常漫长,在这个过程中,更需要谨慎地筛选想法和推进。下面的三则方法可以帮助我们在决策中减少试错成本。

    策略 1. 考虑实现时间和所需要的技术系统 九宫格视窗可以帮助进一步决策,将创意灵感在“系统结构”和“实现时间”两个维度进行排列选择,之后根据需求的资源和达成所需时间进行选择和规划。突破式的创新往往需要大量的时间来完善技术和系统,所以在筛选想法的过程中结合这两个因素,可以保证持续性的创新。

    例. Netflix 播放创新

    现在我们熟知的 Netflix 网飞是一家会员订阅制的流媒体播放平台。

    DVD 及蓝光租赁提供商

    最初在 1997 年刚成立时,Netflix 曾经是一家在线 DVD 及蓝光租赁提供商。当时 DVD 技术刚诞生,轻质的材料代替了原本笨重的 VHS 电影格式存储,让邮寄 DVD 成为了可能。Netflix 创新地使用线上下单、往返邮寄的租赁模式,让用户通过免费快递信封租赁及归还 Netflix 库存的大量影片实体光盘,并以此打败了线下租赁连锁店百视达。

    付费订阅流媒体

    2006 年在线点播技术兴起,随着新技术的出现 Netflix 转向通过互联网流式传输视频,提供更广泛的内容选择,并且可以无限观看、点播、低价,高质量的影视内容,并最终吸引了对手 Blockbuster 的核心客户。Netflix 的付费订阅模式和 Apple 的 iTune 下载、Youtube 的免费模式成为当时最热门的三个细分市场。

    Netflix 的创新帮助他们在市场上站稳脚跟并不断突破,但如果在 1997 年 Neflix 就把流媒体视频作为目标进行创新、不考虑当时的现实技术和研发时长,那公司可能在漫长的科技发展等待中生存,也就没有后来的故事了。所以对于突破性的创意,按照时间维度、技术实现给出逐步创新的节奏,通常能更好地帮助产品持续创新。

    策略 2. 考虑可推动性&可实现性 如果你的创意需要在大公司里进行落地和推进,可以使用“传播速度和可实现性”矩阵逐步选择,第一步聚焦适应速度和传播速度,将决策者对产品的影响也放入考察。第二步,审查可实现性和财务可行性,之后做出相应选择和推动。

    这个矩阵也可以用于对外部环境的判断,在第一步骤中考虑想法在文化、政治、地缘等因素下的适应和传播速度,在第二步骤中考虑市场技术或包容度是否能支持该想法的推动。

    例. 出行产品的本地化决策

    以出行领域的产品设计为例,我们可以看看在这个领域里一些创新决策考虑。我们熟悉的 Uber,滴滴等打车平台通过利用空闲的私家车来接送乘客,降低了打车花费、难度和空闲汽车的利用率,颠覆了原本的出租车打车市场。而在决策想法时,这类出行产品需要考虑当地的具体交通、运输工具、出行状态等现实因素进行推送。

    UberEats 在美国部分城市用汽车送外卖

    Uber 优步是起源美国的打车平台,2016 年该品牌在美国本土开启外卖业务。当时中国已经成熟的外卖业务主要是由骑手骑电瓶车来完成外卖服务,但在美国一些城市自行车作为工具的出行道路十分有限,人们居住的距离也相对遥远。所以 Uber 从他们已有的打车系统上汲取了思路,在这些城市让司机用汽车送外卖解决了路程遥远的问题,同时让他们可以有机结合接送乘客和接送外卖的订单,系统规划路线后不但提高效率,也让司机增加了收益。

    Gojek 在印尼用摩托车送乘客

    2015 年,当来自美国的 Uber 和来自新加坡的打车平台 Grab 在印尼打得火热、且都使用出租车和私家车作为接送乘客的交通工具时,印尼市场的 Gojek 则聚焦印尼的国情,把打车平台的思路运用在打摩的上,规范化摩的市场。在交通严重拥挤的印尼,摩的的快速穿梭远比汽车出行更适合本土,这让 Gojak 成为了印尼的第一大出行平台,并在后来拓展出庞大的本地生活产品体系。

    策略 3. 小心鸿沟 “如果解决方案意味着与他们习惯接受的标准有太大的偏离,那么成年公众的口味不一定准备好接受符合他们要求的合乎逻辑的解决方案。” ——Raymond Loewy,著名的可口可乐瓶、壳牌石油标志背后的工业设计师这样说。

    如果你的创意需要很多解释,大量的培训和“帮助”功能,那么这样的设计可能过于先进或复杂,不易被大众理解。产品创意在初期会辐射到的创新者、早期使用者与普通使用大众间可能存在着差距,在一些案例中,早期使用者觉得有趣认可的解决方案并不被大众所买单,所以在选择创意和推进过程中,设计师也要考虑这种差距。

    例. Airbnb 如何更好地衔接早期大众

    Airbnb 将寻求经济实惠住宿地点的旅行者与想要租房或备用房间的人联系起来,这个想法现在已经被大众熟悉。但在 2009 年业务的第一年,这个创意是非常具有创新性的,尚不为大众熟知。

    好创意却不得市场认可

    当时虽然早期使用者的反馈非常好,但团队仍然面临着严峻的用户增长和收入挑战,甚至一度每周只赚 200 美元。为什么这样一个对租客和出租者都互惠互利的创新,却不能在市场上得到良好的反馈呢?一天下午,团队正在与 Paul Graham 一起思考纽约市的搜索结果,试图弄清楚为什么他们增长。Paul Graham 给出了一个简单的建议:前往纽约,租一台相机,花一些时间与客户一起列出他们的房产,并用美丽的高分辨率照片取代业余摄影。因此,团队成员飞往纽约,与 Airbnb 在网站上列出房产的客户会面、拍摄高质量照片。结果收入迅速增加了 100%(400 美元)。

    照片减少沟通鸿沟

    究其原因,其实是虽然当时 Airbnb 的想法已经在市场上独具突破性,但团队没有考虑到早期使用者和早期大众之间的差距。早期使用者往往乐于尝试新事物且有很强的需求(特别体验、更低成本出行等),而早期大众会和他们现有的酒店体验进行比较,安全、正规、优质、温馨的入住体验是他们的强需求,那些非高清、非精美照片很难在第一印象上说服早起大众这些品质。弥补上这个预期差距后,也就有更多的用户愿意尝试了。在后续的迭代中,Airbnb 也也在系统改进上不断强化安全、正规,更好地满足用户。

    结语 激进式创新往往依赖团队基于用户需求、市场、技术等多维度内容的理解。在创新过程中,设计师更多了解相关领域和创意方法就能更有益启迪想法。希望本文激进篇、上文渐进篇的设计策略可以帮助设计师们更好地创新发散。

    创新思维可以被学习累积,设计师可以保持多看多思考的习惯,从其他优秀的设计和产品上反推创意思路。 设计创新 时要相信推进的过程,如果对题目感到无从下手,相比纠结现有思路是不是最优解,不如用文中的方法把想法全部写下来并原型尝试。许多时候我们离优秀的想法只是一步之遥,也许转个弯就柳暗花明了。

    参考:部分策略启发/提炼自以下著作和文章:

    《Creative Strategies》by Fridolin Beisert (Author), Jessie Kawata (Artist) 《The Design Thinking Playbook: Mindful Digital Transformation of Teams, Products, Services, Businesses and Ecosystems》Michael Lewrick(Author),Nadia Langensand(Artist) 《Zero to One: Notes on Startups, or How to Build the Future》by Peter Thiel, Blake Masters 《Thinking, Fast and Slow》Daniel Kahneman 《Cross the Chasm》Geoffrey A. Moore 《The Innovator‘s Dilemma》Clayton M. Christensen 《Lean Startup》Eric Ries https://www.interaction-design.org/literature/topics/5-whys https://cwodtke.medium.com/how-i-stopped-worrying-and-learned-to-love-design-thinking-f1142bab60e8 https://www.viima.com/blog/types-of-innovation https://designsojourn.com/design-processed-explained/ https://medium.com/user-experience-design-1/10-design-principles-every-designer-should-know-a03e12f8deca https://blog.prototypr.io/shaping-user-behaviour-is-better-than-changing-them-47997f36e71 https://news.airbnb.com/2021-release/ https://www.producthunt.com/posts/clipdrop-2 https://dodo-africa.medium.com/how-design-turned-airbnb-from-a-dying-startup-to-a-billion-dollar-business-b7f711e9ef73 https://docs.microsoft.com/zh-cn/mesh/get-started 欢迎关注作者微信公众号:「腾讯ISUX」

  • 第三波!2022年8月精选实用设计干货合集

    UI交互 2022-08-16
    各位8月好!这是本月的第三波设计干货,这期合集的类别有所不同,包含了2款高素质的字体,同时还有每日更新的设计素材和工具合集网站,有代码图片和视频生成工具,...

    各位8月好!这是本月的第三波 设计干货 ,这期合集的类别有所不同,包含了2款高素质的字体,同时还有每日更新的设计素材和工具合集网站,有代码图片和视频生成工具,全新的渐变色彩合集,还有设计师针对 Adobe 全家桶的替代品制作的信息图,还有 3D 设计素材,如果有你感兴趣的设计工具和素材,一定记得收藏!

    当然,在此之前记得看看往期干货中有没有你感兴趣的素材:

    第一波!2022年8月精选实用设计干货合集 各位8月好!

    阅读文章 >

    第二波!2022年8月精选实用设计干货合集 各位8月好!

    阅读文章 >

    下面我们具体看看这一期的干货:

    1、全新的在线渐变配色工具 https://gradientify.com/

    Gradientify 是一个全新的渐变设计工具,无需安装,直接在浏览器中使用即可,这个工具当中内置了 100 多个不同的、精心设计的渐变配色,你可以直接提取这些渐变色的配色,也可以直接复制 CSS 片段,也可以下载 PNG 素材,满足不同的需求。

    2、代码截图+视频在线生成工具 https://recoded.netlify.app/

    很多开发者在生成代码展示的图片和视频之时,通常会使用截图或者录屏来实现,但是受限于软件和服务,通常不会那么好看,而这个工具则不同,它专门为方便开发者而设计,背景和代码界面都可以编辑,可以选择对应的编程语言,可以输出图片和视频,无需安装任何功能,浏览器里面就可以搞定一切。

    3、剔透有趣的抽象 3D 素材 Pinxo https://www.pinxo3d.com/

    这个其实是付费的 3D 素材,其中内置了 150+ 优质的抽象 3D 素材,可以直接使用 Figma 和 Blender 进行编辑,这些3D 抽象图形的素质极高,可以直接应用在网页、 APP 、社交媒体等不同的场合使用。这些抽象的 3D 素材默认有 红黄蓝三种颜色可选,方便你进行不同形式的搭配。

    4、每天更新的设计素材工具合集 https://thestocks.im/

    优质的设计素材很多,这个名为 The Stocks 的网站会每天、每周专门汇集一些的新出的设计素材,这些素材会在网站的侧边栏汇集到不同的分类当中,你可以透过这个网站获取不同类型的素材,也可以安装插件,获取每日更新的新素材。

    5、优雅细腻的手写西文字体 Canora https://www.r-typography.com/fonts/canora

    这个名为 Canora 是一款风格极为优雅的西文花体字,字体有着复古但是极为优雅的笔触,而且字体本身还带有向左和向右两种不同的倾斜方式。这款字体本身是付费的,不过官网提供免费的试用,一定不要错过。

    6、复古而极具美感的字体 Firelli https://typejockeys.com/font/firelli

    Firelli 是一款在视觉风格上极为规整的英文字体,字体本身有多种不同的粗细,不同粗细轮廓也有差异,总体给人感觉复古,但是较粗的庄重,较细的优雅,整套字体适用范畴可以说是相当广了。看看这个素质,这套字体当然也是付费的,不过同样提供免费试用。

    7、常见设计软件的免费替代品 https://blog.red-website-design.co.uk/2022/07/18/adobe-alternatives/

    在设计过程中,我们很大程度上是依靠 Adobe 全家桶来进行多媒体设计,不过考虑到全家桶的价格,很多设计师在实际工作中可能还是会依靠一些替代品,设计师 Mark Walker-Ford 制作 一张信息图,信息图上他标注了Adobe 系列软件当中,常用软件的免费和付费替代品,如果你正在寻求这些软件的替代品,不妨看看这张信息图。

  • PPT 超全自学指南(7):进击的版式之观察逻辑(下)

    UI交互 2022-08-16
    进击的版式简而言之就是分享一些我观察设计作品的方法,从整体到细节都会讲到。如果一个作品GET不到,就带大家多看一些(我也不想这么中二的,如果有更好的名字欢...

    进击的版式简而言之就是分享一些我观察设计作品的方法,从整体到细节都会讲到。如果一个作品GET不到,就带大家多看一些(我也不想这么中二的,如果有更好的名字欢迎评论。

    往期回顾:

    PPT 超全自学指南(1):明确目标+软件操作 历时一个月的精心制作,用轻量有趣的图文,帮你轻松自学 PPT 设计。

    阅读文章 >

    PPT 超全自学指南(2):搜索能力和逻辑能力 历时一个月的精心制作,用轻量有趣的图文,帮你轻松自学 PPT 设计。

    阅读文章 >

    PPT 超全自学指南(3):图示能力和设计审美 历时一个月的精心制作,用轻量有趣的图文,帮你轻松自学 PPT 设计。

    阅读文章 >

    PPT 超全自学指南(4):深入发展和学习资源 历时一个月的精心制作,用轻量有趣的图文,帮你轻松自学 PPT 设计。

    阅读文章 >

    PPT 超全自学指南(5):8个常见问题解答 历时一个月的精心制作,用轻量有趣的图文,帮你轻松自学 PPT 设计。

    阅读文章 >

    PPT 超全自学指南(6):进击的版式之观察逻辑(上) 进击的版式简而言之就是分享一些我观察设计作品的方法,从整体到细节都会讲到。

    阅读文章 >

    阅读指南:先看原图,看自己可以获取多少信息并思考,之后对照长图。

    比如你可以问自己:为什么这个标题没有横着摆放呢?思考后,然后试图从中找到答案。如果横着放,其他会涉及到什么变动会让新的版式成立呢?

    分享的是我平时看图的方法,如果思考后有疑问的可以评论留言,我们一起解决~

    设计原图来自Pinterest,以后图源清晰的都会标注原作者。

    案例四:

    案例五:

    总结 通过前面几个案例,主要想为大家建立起一个从整体到细节的有结构的观察方法,基本都是没有特殊元素的图文排版。每期都有不同内容,建议从《进击的版式-观察逻辑(上)》开始看哈~

    在这些步骤中,我们借助辅助线和色块来分析设计,除去直接照搬设计来临摹学习之外,还可以把色块内的内容更换、改变色块的位置和大小等方式来创造新的版式和二次设计,这样就可以通过一个版式延展出很多不同版式。

  • 让购物简单快乐!京东 APP 11.0 深度解读:视觉篇

    UI交互 2022-08-16
    在 APP11.0 深度解读系列的第一篇文章中,剖析了基于生态进行体系化大改版的解读与思考,本文将聚焦于视觉设计,阐明我们对此版本的设计主张与思路,在各个...

    在 APP11.0 深度解读系列的第一篇文章中,剖析了基于生态进行体系化大改版的解读与思考,本文将聚焦于视觉设计,阐明我们对此版本的设计主张与思路,在各个场景是如何外化以辅助达成改版目标的。

    如何进行体系化大改版?京东 APP 11.0 深度解读! 在受到不确定性扰动的外部环境下,今年的 APP11.0 升级格外不同。

    阅读文章 >

    11.0 设计理念 随着 京东 用户群体、服务场景的多样化,对于体验设计来说也迎来进一步挑战。在精细化服务的背景下,我们期望在 10.0 设计理念上进行升级,打造能够为用户提供更纯粹的购物体验。因此,“让购物变得简单快乐”的 11.0 应运而生,同时也成为我们在体验上追求的重要目标。通过对目标的拆解,得到视觉关键词和产品关键词。11.0 的设计主张也会持续在品牌、产品、运营设计上进行渗透和升级。

    品牌设计升级 | 通过 JOY 实现与用户的交流 1. 简化图标

    秉承极简的设计原则,在不增加用户重新认知成本的前提下,我们尽可能降低 ICON 中体积、光源、空间等其他繁杂的物理限制,压缩中间过渡的灰色色调,拉开明暗对比度来提高瞬间识别度。

    同时我们反复调整 JOY 脸部边线的细微曲率,降低原生图像的有机感,让他更为耐看,带来更简洁高效舒适的使用体验。

    ICON 的质感来自普通纸张折叠产生的折痕阴影,取其生活化的自然趣意,体感加载速度更敏捷轻量。

    启动图中的字体也简化为与品牌调性更契合,简单轻松的手写体,圆润笔尖更快乐,疏朗笔划更清晰,上扬 6.18 度植入品牌基因,更有速度感和生命力。

    2. 强化互动

    在 ICON 与开屏的设计上我们还运用了视觉暂留的特性做了响应式互动设计,尝试为大家带来些新体验。从点击侧面待命状态的 ICON 进入开屏,变成转过脸来打招呼的立体 JOY,意在模拟日常沟通中即时响应,营造情感化互动,在进入 app 的购物前环节,先建立亲切敏捷的品牌印象。而在 2 个静态页面间创造多一层动态视觉信息,赋予其动态含义,同时实现质感和情绪上更饱满的递进,比纯静态分离画面更有助于提高信息传达的效率和密度。

    3. 运营阶梯递进

    大促版的 icon 与开屏同样贯穿了互动的思路。同样是响应设计,日常状态为侧面待命,表达的是贴心不打扰,大促时则采用正面形象紧贴屏幕,拉近距离主动沟通,头部下移,匀出更多空间呈现运营场景的丰富性以突出大促主题,点击以获得肯定时才打开开屏场景化的新世界。

    运营设计升级 | 用运营思维活化产品体验 基于品牌的运营设计与产品设计相结合,我们希望通过 IP 的拟人化表达,在京东 APP 内进行品牌渗透,从而让 APP 更具情感与趣味。

    1. 内外联动

    本次主要尝试以首页 TOP LOGO 和用户登录注册页进行内外联动,使用了统一的主题概念,来传达简单快乐的感官体验。登录注册页的主题场景化运营渗透与之联动,增加视觉可玩性与互动性,有利于提高用户在登录注册时的操作宽容度,降低负面体验感。

    2. 渲染大促氛围

    同时在上述设定中,在大促时期也代入了促销概念,烘托营销氛围。未来我们也会持续探索更多关于 IP 场景化运营的模式。

    外宣设计升级 | 用符号打造升级意象 1. 提炼策略

    版本符号的作用在于让用户形成专属 APP11.0 的视觉记忆。今年我们希望从解读升级策略中获得关于符号的灵感。本次升级的主题是新生态、新体验、新增长。而新生态、新体验、新增长最终需要达成的目标正是开拓运营新赛道,从而使用户获得更好逛、更贴心、更好买的体验。基于这个解读推导,我们决定以“开拓”作为关键设计概念。

    2. 意念视觉化

    视觉化的过程中,我们选择以“门”作为视觉符号。“门”代表了“开拓”,也代表了“打破空间壁”。

    同时我们考虑到了材质的使用,基于 APP11.0 的视觉风格——极简、有趣,我们使用玻璃作为材质,追求轻盈和通透视觉感受。

    3. 应用延展

    宣传物料方面,我们使用“围绕旋转的门”表达“新生态”,使用“向外扩展的门”表达“新体验”,使用“螺旋上升的门”表达“新增长”。这三个形式的“门”应用于各个宣传物料当中。

    外宣设计升级 | 用开屏打响升级心智

    用户在更新 11.0 版本后,在开机时会先看到一个启动视频,这个视频会说明这次更新的亮点,也需要突出主站品牌的调性,还需要用户产生耳目一新的感觉。

    1. 抓住产品亮点

    基于视频大小与用户耐心程度的考量,开机视频的市场锁定在 15s 以内。在这个时长里,版本更新的细节不可能事无巨细的娓娓道来,于是我们先锁定了用户感知最为明显的三个部分:首页改版,视频化,频道广场,并选择了准确、精炼、亲切的文案风格来进行功能阐释。

    2. 统一材质

    “去噪”是近几次京东改版的内在方向,11.0 的版本符号使用了玻璃卡片的轻质感形式,体现出轻量化与品质感。我们决定就用玻璃卡片为开机视频的核心视觉元素,通过玻璃卡片的不同演绎将改版内容表现出来。这也让 11.0 在整体运营上的视觉元素做到了统一。色调由开场的冷色逐渐过渡到结尾的红色,也是在侧面传达出变化的主题。

    外宣设计升级 | 用外宣视频传递功能亮点 1. 表达重心转移

    去年的 App 10.0 外宣视频,我们选择了定格动画的形式来切入六一儿童节的营销节点借势宣传。而今年,除了在视频号、微博等传统媒体渠道进行投放外,外宣视频也同时上线 App store 和各大安卓手机的应用市场。因此,相比时效性强的营销宣传,今年的视频表达的重心由运营造势转移到内容表达上来,意在让内容更明确清晰和具体,也希望用这种直接的语言传递出京东务实高效的品牌性格。

    2. 内容排布

    由于内容更加强调产品改版的具体功能与业务,视频的重点就落到了如何高效且有趣地传递信息上来。近年改版用户关注度最高也是观感最直接的部分,就是 Joy 的形象变化,因此我们在剪辑结构上把这部分放在了最开头,借此吸引观看者的兴趣。针对产品改版内容我们进行提炼浓缩并以更接地气更好理解的方式呈现,希望观看者在兴趣降低之前快速高效的传递完内容。最后结尾,我们推动视频的节奏与情绪达到高点,落到了整个 11.0 的视觉符号,与“不负每一份热爱”的 slogan,完成扣题结尾。

    3. 包装演绎

    旁白文案是除画面以外最直接最高效的信息创达方式,我们重新整理并用更易懂、更接地气的语言讲述,以确保每个最普通的消费者快速理解。同时旁白也串起了整个视频内容的主线。

    另外,围绕着主线我们对内容选取合适的画面进行配合,并对界面功能的展示进行了 3D 化、动态演绎、场景演绎的视觉语言等方式进行丰富表达。

    11.X… 11.0 版本正如京东 APP11.0 的版本一样持续开放的大门,我们希望以此为起点,对上半年的经验进行收归吸收,在下半年的 11.X 中继续探索与创造更多 APP 上的视觉表达,致力为大家带来更简单快乐的生活体验。

    欢迎关注「JellyDesign」的小程序:


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通