• 配色被说不好看?高手这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 系列软件当中,常用软件的免费和付费替代品,如果你正在寻求这些软件的替代品,不妨看看这张信息图。

  • Apple music用户体验分析,原来苹果也没有把这些做好

    设计动态 2022-08-16
    编辑导语:Apple Music是苹果推出的一款具有付费订阅流媒体服务功能的新音乐产品,但是用户体验似乎并没有想象中优秀,本文作者整理了一些Apple music存在的体验问题,感兴趣的朋友一起来看看吧。 Hi,我是彩云。 我自从在2014年入手了第一台苹果本

    编辑导语:Apple Music是苹果推出的一款具有付费订阅流媒体服务功能的新音乐产品,但是用户体验似乎并没有想象中优秀,本文作者整理了一些Apple music存在的体验问题,感兴趣的朋友一起来看看吧。

    Hi,我是彩云。

    我自从在2014年入手了第一台苹果本后,就把身边常用的手机,耳机之类的常用设备都换成了苹果系列,也算是资深果粉了。对于苹果的软件产品,也非常信任,毕竟是业界的体验标杆了。但即使如此,它们也并不完美,我个人觉得最失败的就是苹果鼠标的设计,充电的时候居然要插在底部,每次没电了就不能工作了,不知道你怎么看?

    当然,今天这篇文章是以国外一位产品设计leader的视角来分析Apple music的很多体验问题,看看他是如何分析一个标杆产品的使用体验吧。

    一、Apple Music诞生的原因? 我是果粉,在过去的10年里一直在用苹果产品,很欣赏乔布斯早在那时就倡导的优秀设计理念。在那些年里,我迷上了苹果的生态系统,因为对我来说,“它太好用了”。

    其中一个便是iTunes。我会花大量的时间仔细整理我的音乐库,并将它同步到我的iPod上。

    在中间,我发现了Spotify,几年后,我曾经喜欢的iTunes乐库已经积灰了。

    在大量的猜测和谣言之后,苹果最终加入了流媒体竞争——完全放弃iTunes,并推出他们的新音乐产品,带有付费订阅流媒体服务的可选功能,名为“Apple Music”。

    Source: Apple

    在用了Spotify多年后,我决定给苹果一个机会,重新尝试用苹果的音乐产品,到现在用了苹果音乐大概一年。

    不多废话了,以下是我作为一个产品设计师和一个想听音乐的普通用户整理的一些想法,分析下Apple music存在哪些体验问题。

    二、Apple Music存在的体验问题 1. 搜索 音乐APP的一个关键功能就是搜索,在APP中它的使用频率很容易排到前三。那么,Apple music的搜索功能我觉得做的还不够好。

    假设我们想要搜索一个知名的摇滚乐队Weezer,他们是一个很酷的乐队。

    我们正确输入了Weezer,自动提示似乎已经出现了。但是等等——这是自动提示吗?

    让我们试着输入“Wezer”,假装我们拼错了乐队的名字,以再次确认这确实是一个自动提示,帮助我们确认它与苹果库中的Weezer匹配。

    看到这个结果,我猜这应该不是一个很好的自动提示。为了确定是否真的做了自动提示功能,我们换一个关键词,这次选另一个非常受欢迎的摇滚乐队-Queen。

    这次好像终于是有自动提示了,但为什么Queen能快速出关联结果而Weezer没有?

    好吧,让我们继续寻找线索。点击那个下拉列表,看看它将带我们去哪里。

    结果出现了一个全新的“结果页面”。如果能够完全跳过这一页就好了(就像我们搜索Queen的时候),因为我真正想做的是直接进入Weezer的音乐。

    此时想想我们下一步要做什么。我不记得我最后去了哪里,但我知道我想回到最初的位置。我们该怎么做呢?可能像我们在浏览器一样有一个后退按钮,对吧?但没有找到。

    事实证明,没有后退按钮。至少,它没有通用的后退按钮来撤消你所做的任何导航操作。你能猜到为什么吗?

    2. 导航 我不知道你怎么想,但我发现Apple Music的导航是它最令人困惑的方面之一。优秀应用不会让你思考你在哪里,每一个页面都会是清晰的且可以很容易撤消和回到你之前的地方。

    苹果iOS的人机界面指南为应用提供了三种类型的导航,苹果似乎也在macOS中使用了这些概念,苹果音乐就使用了平行导航。

    (彩云注:这里我跟大家解释下iOS的三种类型导航模式)

    层级导航 (Hierarchical navigation)。这个导航模式只能在每个屏幕做一个选择到达一个目的地。为了到达另外的目的地,你必须重新开始你的步骤或者从起点重新开始,做出不同的选择。设置和邮箱就使用这种导航样式。 平行导航 (Flat navigation)。这个导航模式允许在多个内容目录之间转换。Music和AppStore使用这种导航样式。 内容驱动或者体验驱动导航 (Content-driven or experience-driven navigation)。这个导航模式在内容间自由移动,或者依据内容本身定义导航。游戏,图书和其他沉浸式app基本使用这种导航方式。)

    Apple music有一个侧边栏,但我觉得这样意义不大。平行导航在移动端体验中非常好用,因为屏幕面积很小。如果你经常使用导航栏,你可以知道你在哪个标签页上,还可以独立于其他选项卡更深入地探索一个选项卡。

    这是一个自iPhone发布以来一直保持的惯例,人们不会轻易混淆自己在哪里。那么这在桌面上是如何工作的呢?

    简而言之,这也意味着侧边栏中的每一项都有自己独立的导航。现在让我们看看Spotify是如何处理桌面导航的。

    注意到了吗?Spotify似乎结合了侧边栏的优点,无论你点击应用的哪个位置,它都允许你轻松地回溯你的步骤。

    为什么在我看来这比苹果的设计更好?

    它可以减少认知负荷。人们没有时间去记住他们上次在应用中的位置。人们习惯于使用他们的浏览器的后退键。Spotify利用了这一点,使新用户的行为符合心理预期。

    它还降低了用户焦虑感,允许用户自由探索,而不用担心搞砸或无法解决问题。

    3. 系统反馈与探索 点击是任何应用的一个重要部分,因为你需要点击来操作。但Apple music的点击体验有点糟糕。

    就拿这个正在播放的状态来说吧。

    自从iTunes诞生以来,这在很大程度上保持着相同的功能一致性,一种查看当前正在播放的歌曲的方式。

    当你听着Weezer的一首新歌,然后想,“嗯,这支乐队太棒了,让我看看他们其他的目录!”让我们从这里点击Weezer !

    当我们点击了标题和专辑,但毫无效果。你能猜到这里具体要怎么操作才能达到我们想要的效果吗?

    你猜不到的是居然要点击“更多”菜单,浏览列表,然后在列表底部看到“在Apple music中显示”。

    但在应用的其他地方呢?你可以点击歌曲、专辑或艺术家吗?好像也不行。

    在这一点上,你可能会想,我为什么要在这个问题上做文章?因为我认为音乐应用的全部意义,尤其是在一个巨大的流媒体库中寻找新音乐的意义:是点击、探索,并轻松地找到歌曲、专辑和艺术家。

    我认为用户不应该因为不遵守应用希望使用它的方式而受到阻碍。

    (彩云注:这里作者想要表达的问题是交互上不应该让用户去遵循产品的规则,而应该尽可能的满足用户的心智模型,用户在这里的需求很清晰,打通这里的流程问题很重要)。

    4. 响应时间 一款好的应用不会让你等待。我们知道加载时间会极大地影响网页的跳出率,我不认为我们必须区别对待本地应用。

    这让我想到了使用Apple Music时最大的痛苦之一:

    在页面之间等待,等待。想知道下一个糟糕的行为会是什么?失去当前的状态提示。因为延迟,无响应的问题,不知道当我点击“播放”时,我的歌曲是否会真正播放。

    三、总结 我相信好的设计应该是令人向往的。我想喜欢Apple music,更重要的是,我相信苹果仍然有很强的设计原则。但我这次在apple music中没有让我享受到该有的好体验。这是一个遗憾,因为作为一项服务,Apple music还是有很多优点。

    从策划的角度来看,我发现苹果选择的曲目质量很高。从人工挑选的歌曲(比如上面显示的播放列表)到算法根据我的听歌习惯为我提供优秀的音乐。这感觉非常像苹果,我一直惊讶于它的选择是多么的好。 从音频的角度来看,我实际上更喜欢音乐的质量,这一点要Spotify要好。 这些优点反而让我更加失望,因为这个产品本身不容易使用。

    说到底,真正的问题在于苹果没有明确定义他们的产品是什么。如果说音乐应用是iTunes的继承者,那么不幸的是,它没有达到目标,因为他们试图将流媒体服务(Apple music)嵌入到传统模式中。如果Apple Music是他们的重点,他们并没有让它作为一个独立的服务脱颖而出。

    有一件事是肯定的,桌面版的Apple Music如果要达到一个像样的可用性水平,还有很多工作要做。

    你觉得呢? 你在体验苹果产品时,还遇到哪些痛点?

     

    原文作者:Jake Dragash

    原文链接:https://uxdesign.cc/apple-musics-ux-problem-e8f5fac756de

    译者:彩云Sky,腾讯高级视觉设计师;公众号:彩云译设计

    本文由@彩云sky 翻译发布于人人都是产品经理,未经许可,禁止转载。

    题图来自 Unsplash,基于CC0协议。

    给作者打赏,鼓励TA抓紧创作!

    {{{path> 赞赏

  • 苹果用户体验:几张动图带你直观设计背后的简单原则

    设计动态 2022-08-16
    编辑导语:如何提升用户的产品使用体验?也许,简单、明晰、便捷的交互操作是影响用户体验的关键因素之一。而苹果手机的交互设计逻辑也许可以在设计原则层面上给你一定启发,不如一起来看看作者的解读吧。 今天的苹果手机拥有十亿用户。苹果是这个世界上最有价值的企业,虽然有很

    编辑导语:如何提升用户的产品使用体验?也许,简单、明晰、便捷的交互操作是影响用户体验的关键因素之一。而苹果手机的交互设计逻辑也许可以在设计原则层面上给你一定启发,不如一起来看看作者的解读吧。

    今天的苹果手机拥有十亿用户。苹果是这个世界上最有价值的企业,虽然有很多不同的原因使得它成为拥有 2 万亿市值的第一公司,设计始终是其中最强大的原因之一。

    Steve Jobs 对此有一个绝妙的形容:我们是一家设计公司,只是刚好做的是电脑产业。

    是什么使得苹果设计如此的简洁又令人赞叹?他们的设计来源于现实生活,我们和手机的交互正如我们在现实生活中所做的一样。

    就像是真实的世界中一样,当你通过数码产品导航的时候,人们需要知道自己现在在哪里,到目的地的路怎么走,以及选择什么样的交通工具。这就是为什么各部分之间应该有清晰的空间逻辑。

    一、流畅的操作感意味着它在隐喻着物理世界 打开 IOS 的文件夹就像是在现实世界打开了一个盒子。“扩展”的动画效果代指着打开文件夹的后续行为:就像是我们在现实生活中打开了一个文件夹并把它拿到眼前去查看里面的东西。

    在IOS上打开APP

    二、人们有时候也需要接触一些物理世界不存在的数字原生操作方式 举个例子,IOS 用户经常打开列表来推入下一个页面或点击底部的按钮来查看另一个页面。操作这些按钮在物理世界中并没有对应的行为,但是在成百上千次重复中用户习惯了这个操作。作为设计师,我们应该尽量的使用同样的设计语言以方便用户认知。

    打开一个列表单元格

    点击TAP栏

    三、清晰的空间逻辑使用户更顺畅的使用产品 这里对通过向下滑动页面以到达 IOS 通知中心以及安卓控制中心进行了比较。在 IOS 系统里,通知中心页面和启动页面之间的空间逻辑关系是非常直接的。

    通知中心页面在启动页面的上方,在滑动的过程中,手势和屏幕的移动是同步的。因为这里含有物理世界的隐喻,因此我们可以非常直观的理解。

    在iOS上向下滑动以获得通知屏幕

    对比来看,类似的操作在安卓上就不是那么的清晰了。在屏幕上的任何地方向下拉,启动页会先进入一个白色的蒙层,物理世界中不会发生这样的事情。

    操作页面,黑色背景和白色蒙层之间的空间逻辑关系无法通过视觉表达清晰的说明。他们是在同一个层级?或者说黑色背景是放在下方的?对比而言,IOS 中通过对上方层级的模糊玻璃效果清晰的对这种空间层级关系进行了说明。

    用户当然可以通过多次重复使用习惯这种操作,但是缺少空间逻辑容易造成认知失调。像这样的细微处的操作困难会使产品感觉不那么流畅,因此质量也较差。

    在安卓上向下滑动控制中心

    四、流畅的动效在建立空间逻辑和提升产品质量方面也发挥着巨大作用 让我们看看在 IOS 里开启和关闭软件的动效。当打开一个软件,软件图标扩大并逐渐消失,软件界面则在用户面前渐出并逐渐占据整个屏幕。

    这个动效告诉用户这个软件在手机界面上的存在空间逻辑:这个软件存在于这个 icon 内部。关闭软件的动效就像是开启动效的镜像效果,就如同用户所期待的一般,软件界面缩回成了原本icon的样子。

    在IOS上打开和关闭APP

    在IOS上打开和关闭一个应用程序的速度变慢了

    对比一下,安卓上的软件打开/关闭动效比较零碎。但是我不会多说,你可有看一看下面的示例自己来比较一下。

    在安卓上打开和关闭APP

     

    原文作者:Hiten Saxena(本文翻译已获得作者的正式授权)

    原文地址:https://bootcamp.uxdesign.cc/space-logic-can-make-the-design-of-your-product-easier-a1b8ffe4cfa2

    译者:郑伊妮;编辑:李莉好;微信公众号:TCC翻译情报局(ID:TCC-design);连接知识,了解全球精选设计干货

    本文由@TCC翻译情报局 翻译发布于人人都是产品经理,未经许可,禁止转载

    题图来自 Unsplash,基于 CC0 协议

    给作者打赏,鼓励TA抓紧创作!

    {{{path> 赞赏


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