2021年6月，微软发布了全新的Windows11操作系统，采用FluentDesign平台设计规范，视觉风格进行了大改版，更美观、更柔和、更现代。同时在设计中加入磨砂玻璃模糊材质效果、平滑过渡动画和小元素动画。体验了一段时间后，有几点让我惊喜不已：大圆角、卡片、动效。因为这几点不太像我们脑海中固化的Windows系统方正的设计风格，倒是有点像Mac系统。其中，我发现了一些UI设计的细节和亮点，我觉得在桌面产品风格方面还是有参考价值的，所以分享给大家。图标系统图标方面，常规的图标大小为16px，笔划粗细为1px，矩形外角为2px，线条末端为圆角，更加友好，符合现代年轻用户的审美.在部分场景界面，系统图标采用了双色设计风格，打破了界面的沉闷感，丰富了视觉层次。图标风格方面，同样采用了轻拟物化的设计风格，加入了渐变、高光、阴影等设计手法。可以学习图标的配色和质感。圆角Win11系统使用两种圆角大小：4px和8px。8px圆角用于顶级容器，例如应用程序窗口、弹出窗口和对话框。4px用于页面元素，例如按钮、搜索框和其他控件。从具有一定专业性和统一性的4点格和8点格取值。布局在系统界面上。Win11使用不同的背景色来区分层级结构。主次分明，可以将用户的注意力集中在最重要的内容上。一般分为两个层次：基础层和内容层。基础层是应用程序的基础。它可以使用灰色背景，位于底层。它通常用于导航、菜单和其他相关功能。内容层是主要的信息展示区，通常为白色背景，可以是一张大卡片，也可以是排列成一排的多张小卡片。比如系统应用：微软商店的主界面，大卡片传递到窗口的右侧和底部，用起来还是蛮舒服的。比如系统应用：设置，多个连续的小卡片。这种布局风格简洁新颖。体验下来，我觉得可用性还是挺高的。下拉菜单下拉菜单是一个非常基础和常用的控件。我截图查看界面注释。最好在连续列表之间保持4px的间距。可以避免一个场景：导航菜单栏列表既有选中状态又有悬停状态，避免了背景色粘在一起，圆角不协调的情况。另外，反馈框的上下左右间距为4px，不包括面板描边，视觉感官空间看起来更加和谐。下拉菜单也有一种新的交互形式。点击功能下拉后，下拉菜单直接叠加在功能上，点击切换很爽，但从通用性的角度需要重新评价。选项卡栏选项卡栏中选中和未选中的文本为黑色，选中的行为蓝色。选中状态也比较明显，不会干扰主要内容，颜色噪点也不会太大。动态界面的切换过渡动画和单个元素的反馈动画，体验过后觉得非常爽快有趣。尤其是在单个图标的动画上，有的图标加入了光影渐变变化，感觉很有质感，连下拉箭头都有动画，做的很细致。系统应用MicrosoftStore，左边的导航图标也是动画的，很流畅。动画非常详细。动作前，有一个为动作做准备的姿势。利用重力原理添加变形，并加入一些装饰元素，丰富运动效果。深色模式系统也引入了深色模式，相信桌面产品适配深色模式将是一种趋势。如果设计师能够在前期考虑到深色模式，那么后期的适配将会大大降低各方的成本。总结以上就是我在体验Windows11UI后发现的细节和亮点的总结。在规范层，可以挖掘和打磨图标样式、圆角、界面布局、下拉菜单和标签栏的定义。设计者还需要根据自己的产品调性来考虑系统规范的可用性，不能盲从。在动态层，设计师有很大的发挥空间和价值，可以做更多的创意。
