，大家有没有发现Facebook最近的改版也开始在扁平化的界面中加入一些拟物化的元素。作为一名UI和UX设计师，我也趁着这波疫情的自我隔离期，加入了挑拨离间的行列。本文将教大家如何用修改后的mask3.0界面风格界面制作拟物化。（注：由于作者是中国台湾设计师，措辞略有不同，不影响文章阅读。）疫情期间，数字化转型的成功带给人们安全感，以及从2017年开始由疾控部门和DeepQ共同开发的“疾病管家”（@taiwancdc），帮助用户减少了很多这段时间的焦虑。此次改造使用的APP，也是最近用户激增的“国民健康快易通”和里面的“eMask”系统。关于“全民医保快易通”APP，如果不是因为疫情下载订口罩，我永远不知道这款由全民医保局发行的APP有多少实用功能。△台湾人请大声说出你的答案！国民健康保险快车道和口罩实名制2.0其实，国民健康保险局在国民健康保险快车道上已经默默耕耘了很长时间。国健快通的《改革日记》中提到，让病历上云，创造医患双赢。105以来，服务开始改革创新。「国健快通」的用处在于，除了疫情期间网上预购口罩「eMask」外，还有主要功能：医院查询、健康存折、改革日记、医药速查、服务基地、医保规章制度、急诊等候床、急救、常见问题解答等十大功能。△快易通和eMask主页面的大部分实用功能都储存在“健康存折”中，例如：近三年西医、牙科和中医病历和用药信息、就医日历、过敏信息……族群多得装不下。相信这部分功能可以进一步分层，根据不同年龄段或使用习惯，将用户最先使用的功能移至首页。口罩实名制3.0与拟物化设计的挑战虽然在这次尝试中，页面流不是设计的重点，线框部分也是以原APP为原型，但我还是做了一些调整首页的功能键，将可以作为本APP主打功能的超级实用功能放在主界面，因为真的是超级功能，不能作为主打功能。此外，eMask还分为：口罩预购、订单记录、药房查询。如有不合理之处，请多多指教。在此总结一下，本次全新拟物化风格改造将针对以下三点进行优化：界面组件全新拟物化设计，针对口罩实名制3.0。新增“家庭成员联购”功能。只需登录医保卡，即可取代家庭成员预购的口罩，并将其他贴心功能，如：用药查询、刷牙提醒等，放在首页。只需三个简单的步骤即可创建新的拟物化风格。一开始学习如何制作拟物化风格的新界面时，参考了很多国外的设计师。对于教学，大部分文章只教第一步。但万事开头难。只要掌握了基本概念，就已经掌握了一半的概念。赶快打开Sketch、Figma或Photoshop试试吧。以下是我整合的三个步骤，供大家参考：第一步：基本概念选择高光、物体、阴影三种颜色。首先选择光线打到的高光、物体主体、物体下方阴影的颜色，物体和背景的颜色要一致。也可以选择其他颜色，但要避免使用饱和度过高的颜色，会使光影形成光晕。第二步：搭建构件确定光源位置，营造凹凸效果在给构件添加光影时，首先要规划好光线的角度。如果你想营造一种恰如其分的恐怖感，或许你可以假设光线是从下方呈90度角射进来的。但一般来说，45度角的光线是最自然的阳光。如上图所示，黄线代表45度斜光。如果元器件突出平面，就会在前光中产生亮点，在逆光中产生阴影。如果是凹面，对着光的地方会变成右下角的凹槽，左上角的凹槽会产生阴影。如果是平的，就不会有光影。将上一步准备好的色块的分量和阴影，按照高光、物体、阴影进行排列组合，然后对高光和阴影进行高斯模糊（柔化）。至于模糊的程度，根据每个人的喜好来调整。需要考虑的一件事是，如果界面要模拟的材质是粗糙的（例如：纸、布、皮革），那么模糊的程度会更大，因为打在物体上的光线会漫反射；如果界面的材质是比较喜欢可以反光的材质的话，那么模糊的程度可以小一些。第三步：做一个有“深度”的界面根据组件的可点击性来区分不同层次的页面组件。接下来将上面的光影概念应用到界面组件上！在开始设计界面组件的时候，可以先想想哪些组件适合凹界面效果，哪些组件适合凸界面效果，哪些组件基于平面界面（无光影）可以表达？同样，我的分类规则提供如下，供大家参考：首先，我将成分分为四个等级：-1、0、0.5、1。因此，根据元件特性，以凹、平、凸、凹凸的方式模拟界面。△界面组件的四种类型Level-1：凹界面的遮挡，给人一种没有完成的感觉，会让人想补上Level0：平面界面，是承载其他组件的区域并简单提供信息Block（一般为平面）Level1:Convexinterface会让人想要按下点击blockLevel0.5:Convex-concaveinterface当凸界面上的元素被按下时，会形成一个临时的凹面还有一件事情添加到状态：如果要强调界面上方最靠近用户/块的组件，可以使用比背景更白的白色（例如：Header、NavigationBar、TabBar）附加步骤：细节控制设计师唯有利用好内在的光晕，才能打造出诱人的立体弧线△细节就是细节！毕竟我们玩的是拟物化风格。作为产品设计师，我们怎么能放过任何一个可以表达产品细节的地方呢？你也喜欢实体按键上的半立体涂层，会让人想用指尖捏一下，所以用InnerShadow来表达按键上图标/文字的立体效果。△按键欠压，全家都欠压！记得大学里的模型老师告诉我们，做模型要“胆大心细”。我们可以大刀阔斧地尝试做出任何形状和外观，但最终还是要注意细节。虽然新的拟物化风格能用的产品真的不多，但是新手设计师可以借此熟悉元器件，提高对元器件和光影的把握，增强元器件/符号在软件中的制作能力.终于，大热的UI元素在屏幕前诞生了。△排队，阿西~结语不知道大家有没有注意到，我保留了原有界面中已有的跑马灯元素。跑马灯是否适合展示最新消息还有待商榷，但我个人认为，只有看到跑马灯，才会有身处公共机构的感觉。最后，呼应新拟物化设计Neumorphism让UI和UX设计师重新思考的5件事，这里总结一下新拟物化设计的好处：，让用户专注于吸收信息，专注于采取行动。四级凹凸组件，让用户下意识地产生自然的可操作性
