拟物设计又回来了么 | AI时代，新拟物设计的应用与探索
我们梳理了风格演变的过程，然后通过设计案例与问卷调研对新拟物进行了分析，希望可以启发你的思考
前言
80年代以来，界⾯视觉⻛格从扁平到拟物，然后⼜回归扁平，设计⻛格交替登场。近两年， 新的⻛格涌现，其中不得不提的就是Neumorphism（新拟物），它的出现让不少设计师思考：拟物设计⼜回来了么？对此我们梳理了⻛格演变的过程，然后通过设计案例与问卷调研对新拟物进⾏了分析，希望可以启发你的思考。
01 技术发展与界面风格演变
互联网设计这份职业由于技术变革而出现，设计手段、设计风格也注定受到技术最为直接的影响。通过下图可以看到，界⾯设计⻛格在技术驱动下经历的多次更迭。
△ 界⾯设计⻛格演变
1-1 从初期的扁平化到拟物化
1983年，苹果推出全球首款搭载图形用户界面的个人电脑，从此GUI进入大家的生活。但早期受限于设备分辨率，主流操作界面均为扁平化设计；随着显示技术升级，开始出现追求真实质感的拟物风格，即通过阴影、高光、纹理等技法使设计对象更加接近现实世界。当然，此演变也适用于移动互联网时代，其本质都是借用拟物化降低用户的认知成本、学习成本，消除用户的“陌生感”，这一点对新手用户来说非常重要。
△ 扁平⻛格与拟物⻛格对⽐（来源：⽹络）
2012年，研报显示全球互联网用户已达24亿，智能终端全面普及，用户对于界面的操作心智已经成熟。另一方面，内容丰富度的爆发，使拟物化设计风格的缺点日益凸显，如：设计成本高、焦点分散、视觉疲劳等，设计师们逐渐意识到信息与效率优先的重要性。
1-2 扁平化的流行
2013年9月，苹果正式推出iOS7，界面设计语言彻底重构，视觉上摆脱了拟物映射，不再追求纹理、透视等效果，通过扁平化风格构建了一套信息优先、简单实用、统一的设计语言，成为扁平化进程的重要推手。
扁平化的回归不是偶然，它首先解决了拟物设计长期积累的诸多矛盾，其次满足了用户对于内容、效率的诉求。它不单是风格的扁平化，更是围绕内容做设计的思维转变。
△ 拟物化与扁平化界⾯⻛格对⽐（来源：⽹络）
扁平风格作为主流至今仍被广泛应用，其在可识别性、可读性方面的优势较为突出，但多年的体验和实践，让大家开始审视扁平化的一些“软肋”：1.个性化设计空间有限，产品容易出现雷同；2.多层次信息呈现困难，信息也被“扁平化”；3.过度去装饰化，页面缺少情感； 面对这些问题，一方面我们在观察扁平化能否自我修正，另一方面也在不断探索新的风格。
1-3 “新”拟物的萌芽
2019年11⽉，乌克兰设计师 Alexander Plyuto 在多个平台发布了⼀组名为《Skeuomorph Mobile Banking / 新拟物手机银行》的UI作品，以⼲净、轻盈、⽴体的设计⻛格在短时间内获得⼴泛好评，掀起⼀场新的⻛格热潮，⼀⼤批此类⻛格的设计作品涌现，⼈们将这种新的物种命名为“新拟物”、“新拟态”。
△ Alexander Plyuto 作品（来源：Dribbble）
新拟物可以看做是介于扁平与“旧”拟物之间的融合方案，既保留了信息的突出，又赋予元素立体的质感，它的精髓在于对光线的绝妙运用，以及对背景色、高光色、阴影色的严谨处理。但不同于“旧”拟物的是，新拟物没有重拾装饰化，而是用更轻盈的手法模拟现实世界，呈现出一种真实物体的微质感，给用户带来新颖、有趣的界面体验。
△ “新”拟物设计特征
△ 新拟物与“旧”拟物的差异
近些年，智能设备实现跨越式发展，性能不再是内容的制约因素，反⽽成为推动内容创新的⼒量；同时我们已经逐步迈⼊AI时代，机器学习、智能搜索、⾃然语⾔处理等技术对⽣活影响深远：
· 内容侧：AI已经成为内容重要的⽣产者和推⼿，⽽其群智开放的特点加速了现实与虚拟的融合，就像物联⽹、⻋联⽹，现实与虚拟的边界更加模糊，极⼤丰富了智能终端为⽤户所呈现的内容类型。
· ⽤户侧：AI打开了我们的感官，多彩的世界让每个⼈的兴趣更加多元化，⼈们对于内容、形式的个性化诉求愈加强烈；
△ 设计导向的迭代路径
新的形势下想获取⽤户注意⼒更加困难，扁平化对此显得⼒不从⼼，⽽新拟物的出现，让设计师看到了⼀个新的突破⽅向。新拟物微凸的质感，让以往扁平的⻚⾯与“真实世界”建⽴联系， 多年审美疲劳后新拟物使⽤户感受到久违的熟悉感，“旧”拟物的情怀重新被点燃。
综上，我们可以看到40年的⻛格演变史，其实就是处理与技术、内容、⽤户关系的历史：
· 技术受限时，设计尽可能降低形式的资源占用而凸显内容；技术成熟后，设计得以施展，开始追求形式的美感；
· 内容的增多与拟物化的过度，促使我们开始关注信息可读性，在效率面前选择回归扁平；
· 智能、多元的今天，我们聚焦⽤户，期望通过设计获得⽤户更多的注意⼒，因此不断进⾏⻛格的融合探索。
02 新拟物风格的应用与分析
为了深⼊了解新拟物，我们收集了⼀些具有代表性的应⽤案例，并进⾏了⼀次问卷调研，从多种⻆度来分析新拟物⻛格的优缺点。
2-1 应⽤案例
QQ⼩世界内测版
QQ在今年上半年发布了“⼩世界”内侧版本，它主打年轻⼈的兴趣分享。⻚⾯中，在关键按钮、卡⽚等元素上运⽤了新拟物⻛格，带给⼈⼀种新鲜感。然⽽在发⽂前不久，⼩世界进⾏了⻚⾯迭代，其中⻚⾯底⾊、按钮样式均进⾏了优化调整，部分细节已脱离新拟物特征。
△ QQ小世界内测版界面（来源：QQ）
Hillman Synth
Hillman Synth是⼀款⾳乐合成器app，灵感源于⽼式组合⻛琴以及弦乐器。界⾯采⽤了新拟物⻛格，模拟真实触感的合成器按钮，具有“隐喻”的视觉体验让⽤户在真实世界和虚拟界⾯中⾃由切换。
△ Hillman Synth界面（来源：App Store）
Spotify
Spotify 是⼀个⽉活⽤户⾼达2.5亿的⾳乐服务平台，其内容形式丰富，包含卡⽚、滑块、列 表、⽂本等⻚⾯部件，层次结构表现极具挑战。设计师 Sangeeta Baishya 于5⽉份发布了其使⽤新拟物⻛格对 Spotify 重新设计的⽅案。
△ Spotify概念方案（来源：uxdesign）
⼩⽶遥控器
设计师 Igor Erema 在Dribbble上发布了⼩⽶智能遥控器App的概念设计⽅案，⽤新拟物⻛格模拟了遥控器按键，给IOT领域的界⾯设计带来了新的尝试和启发。
△ ⼩⽶遥控器概念设计⽅案（来源：Dribbble）
收集案例时我们发现，概念设计⽅案有很多，但实际落地产品少之⼜少，两者的数量对⽐鲜明。出现这种情况，我们认为原因可能有3个：
① 新拟物⻛格出现的时间较短，很多设计师还没有认知；
② 没有成熟的新拟物设计指引，设计容易，设计好却很难；
③ 最重要的⼀点，就是还没有明确的数据或⽤户反馈证明新拟物能对产品形成正向助⼒。 因此，在没有明确的预期收益下对于新拟物的落地都⽐较冷静克制。
2-2 新拟物⻛格问卷调研
为了在案例之外获得⼀些真实⽤户的反馈和数据，透过相对理性的视⻆审视新拟物，我们在疫情期间，选择了相对便捷的问卷⽅式对⽤户的⻛格感知、⽤户偏好等内容进⾏了调研。问卷内容和形式不免存在局限性，⼤家可辩证看待问卷结果。
问卷以《APP界⾯设计⼩调研》为主题，通过模拟真实⽤户界⾯，成对呈现新拟物和扁平化设计，让⽤户进⾏偏好选择，包含简单的弹窗、开关、按钮、卡⽚，还包含多组件综合运⽤的复杂⻚⾯；然后通过语义差异量表，测量⽤户对不同⻛格的感知；问卷最后设置了收集偏好原因 的开放题⽬及关键⼈⼝学信息。为保证填答有效，问卷题量控制在19道，发布概况如下：
△ 调研问卷概况
就问卷的结果来说，整体趋向⼀致，部分偶有差异，主要总结为以下⼏点：
· 功能操作型界⾯，以提示弹窗、深⾊模式切换⻚、闹钟开关列表⻚为例，⽤户更偏向扁平化。
· 内容展示型界⾯，以信息卡⽚、关注⻚为例，新拟物的信息卡⽚更被喜欢，但当卡⽚放在关注⻚中时，⽤户则⼜偏向了扁平。
· 综合型界⾯，以常⻅的⾸⻚为例，⽤户仍然更喜欢扁平化，但值得关注的是新拟物的偏爱占⽐逐渐变⾼，与扁平化的差距在缩⼩。
· 对于扁平化⻛格，⽤户认为其简洁、⼲净、轻便，也⽐较柔和；对于新拟物⻛格，⽤户认为有质感、⼲净、⽴体、⾼级；其中扁平的⼲净感知数值⾼于新拟物。
△ 问卷设置-⽤户偏好题举例
两个⻛格中⽤户依然最喜欢扁平，且倾向⾮常明确，这个结果颇有些意外，对此我们的分析是：
· 功能操作型界⾯，对于识别、理解、判断信息，扁平⻛格的显示更加清晰明确，操作效率上优于新拟物。
· 内容展示型界⾯，信息数量及应⽤场景都是偏好的影响因素；信息数量少、场景简单时，⽤户容易关注视觉，新拟物的视觉表现⼒更好；信息数量多、场景复杂时，⽤户更在乎信 息的呈现，新拟物厚重感强，颜⾊偏灰偏冷，反⽽降低了信息的识别度，扁平⻛格的轻便简洁，优势凸显。
· 综合型界⾯，⽤户主要聚焦信息的浏览，注意⼒转移让新拟物的部分缺点被遮盖，这也是新拟物喜爱度提升的原因，但整体颜⾊依然会被感知，扁平仍略胜⼀筹。
2-3 新拟物优缺点及应⽤建议
通过以上对新拟物的深⼊认识，是时候总结⼀下了：
优点
① 真实：⽴体表达⽐扁平⻛格更加符合真实世界，代⼊感强，容易拉近与⽤户的距离，相⽐“旧”拟物也更轻量化。
② 趣味：阴影⾼光产⽣的前后层次，营造出⼀定的空间感，结合可视化信息可增加⻚⾯的趣味性，吸引⽤户体验。
③ 转化：新拟物的点击感强，传递了明确的⾏为召唤，很容易吸引⽤户注意⼒，提升⻚⾯元素的点击转化率。
缺点
① 形式影响信息识别：元素与背景的统⼀融合，缺乏清晰边界，视觉对⽐度低，部分情况下（如屏幕亮度低、视障⽤户）严重影响内容识别。
② 应⽤场景⾮常有限：新拟物有明确的触发感、点击感，适于结合操作类元素，信息呈现类 元素使⽤时容易引发歧义，造成误判。
③ 不适合⼤⾯积使⽤：阴影、⾼光等元素的⼤量增加，导致⻚⾯信息难以聚焦，同时信息层级拉不开，重点信息⽆法突出。
④ ⾼度依赖设计能⼒：使⽤新拟物⻛格需考虑的因素（功能、场景、信息数量等）较多，难以形成设计规范，⻚⾯质量把控困难。
⑤ 开发⼯作量增加：对于开发来说，需要写框架来⽀持实现新拟物UI效果的 css 代码，⽽且⽆法在移动端使⽤，代码的⼯作量增加。
应⽤建议
① 注意场景适配度：新拟物更加适合功能单⼀、层级简单的⼯具类⻚⾯（如物联⽹操作⻚⾯），有时⻚⾯元素在现实中有实体，新拟物可呈现真实物体的质感，让⻚⾯富有趣味性。
② 尊重内容优先级：严控新拟物元素数量，选择性、针对性的使⽤，如优先级⾼、吸引⽤户聚焦、期望提升点击转化的信息元素。
③ 增加视觉对⽐度：通过颜⾊、粗细等⼿段进⼀步增强视觉对⽐度，解决新拟物⻚⾯偏灰的特点，信息承载⼤，层级关系复杂的产品，谨慎使⽤新拟物⻛格。
④ 要符合既有认知：新拟物可以增强滑块、开关、按钮等组件的操作感知，但有些组件并不适合，如临时出现的模态框、下拉框等，新拟物反⽽会误导⽤户认知。
03 理性看待，⼤胆尝试
关于新拟物，我们看过太多悲观、否定的态度，⼈们更愿意相信它是“昙花⼀现”，很多讯息似乎也在佐证着这⼀观点，但我们要看到⼀个事实，⻛格只是解决问题的⽅法，⽅法没有对错， 是否能解决问题才是关注的重点。⻛格演变过程告诉我们没有⼀个⻛格可以解决所有问题，⽽且随着时间推移，新的问题不断出现，我们需要新的⻛格，新的解题思路。新⽣事物有它独有的魅⼒，也必然存在潜在的“问题”，我们要理性看待，⼤胆尝试，不执着于⼿段，聚焦解决问题，敢于突破任何⻛格的条框，去尝试去探索。
未来，⼈⼯智能发展、5G普及、新的智能终端诞⽣等每⼀步都在推动整个时代往前迈步，界⾯⻛格也会不断迭代演变，⾯对未知与挑战，让我们保持激情与敬畏~
----------------------------------------------------------------------------------
有 /奖/互/动
看完上⽂，你对新拟物⻛格是否有了新的认识和启发呢～你觉得未来的界面风格趋势是什么样的呢？欢迎在下⽅区评论表达你的看法，还可以到官方微信（DUDESIGNER）、微博（百度DUBEST / DUDESIGN）参与互动，我们准备了精美礼品，等你来拿哦～
// 获奖规则
➀ 参与互动，填写问卷
➁ 转发本⽂
以上2条，均需在官方微信、微博平台完成哦～
// 奖品设置
一等奖：USB小生态加湿器
二等奖：100元京东卡
特等奖：50元京东卡若干张
// 公布方式
获奖用户将于9月23日18:00在微博公布，敬请期待哦～
以上内容，最终解释权归【DU DESIGN】和【百度DUBEST】所有；
