Windows 11 有哪些 UI 设计细节?我总结了这7个! - 优设网 - UISDC
source link: https://www.uisdc.com/windows-11-ui-design
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2021 年 6 月,微软发布了全新的 Windows 11 操作系统,采用了 Fluent Design 平台设计规范,视觉风格进行了大改版,更美观、更柔和、更现代。同时,设计上加入了毛玻璃模糊的材料效果、流畅的过渡动画和小元素动画。
我体验一段时间后,有几个点感到挺惊喜的:大圆角、卡片、动效。因为这几点不太像我们脑海中固化的 Windows 系统方正设计风格,倒有点 Mac 系统味道了。
其中,我发现了一些 UI 设计细节和亮点,觉得在桌面端产品风格上还是有参考价值的,所以和大家分享下。
在系统图标方面,常规图标尺寸是 16px,描边粗细是 1px,矩形外圆角是 2px,线条末端是圆角,更加亲和,符合现代年轻用户的审美。
在部分场景界面,系统图标采用了双色的设计风格,打破了界面的枯燥感,视觉层次更加丰富。
图标风格上,还采用了轻拟物设计风格,加入了渐变、高光、阴影设计手法,图标配色和质感可以学习下。
Win 11 系统采用了两种圆角尺寸:4px 和 8px。8px 圆角用于顶级容器,比如应用程序窗口、弹出窗口和对话框。4px 用于页面内元素,比如按钮、搜索框等控件。从 4 点网格和 8 点网格取值,具有一定的专业性和统一性。
在系统界面上,Win 11 使用了不同背景色来区分层次结构,主次清晰,可以将用户的注意力集中在最重要的内容上。
一般分为两个层次:基础层和内容层。基础层是应用程序的基础,可以用灰色背景,位于底层,常用于导航、菜单等相关功能。内容层是主要信息呈现区域,一般为白色背景,可以是一张大卡片或者多个连续排列的小卡片。
比如系统应用程序:Microsoft Store 主界面,大卡片通到窗口右侧和底部,使用起来还是挺舒服的。
比如系统应用程序:设置,多个连续的小卡片。
这种布局风格简洁、新颖,体验后,我觉得可用性挺高的。
下拉菜单是很基础通用的控件,我特地截图查看了界面标注。
连续的列表之间保留 4px 间距,这点挺好的,可以避免一种场景:导航菜单栏列表同时存在 selected 态和 hover 态,避免背景色黏在一起、圆角搭配不和谐的情况。
还有,反馈框上下左右的空白处间距是 4px,不包含面板描边,视觉感官间距看起来比较和谐。
下拉菜单也出了一种新的交互形式。点击功能下拉后,下拉菜单直接覆盖在功能上方,点击切换蛮爽的,不过从通用性维度需要再评估下。
标签栏选中态和未选中态文字都是黑色系,选中线为蓝色,选中态也挺明显的,又不会很干扰主体内容,色彩噪音不会很大。
界面的切换过渡动画、单个元素的反馈动画,我体验下来觉得挺惊喜、挺有趣的。特别是在单个图标的动画上,有些图标加入光影渐变变化感觉挺有质感的,连下拉箭头也有动画,真细致呀。
系统应用程序 Microsoft Store,左侧导航图标也加入了动画,挺顺滑的。动画很有细节,运动前有起势准备动作,利用重力原理加入了形变,还加入一些修饰元素,丰富运动效果。
该系统也推出了深色模式,相信桌面端产品适配深色模式将是个趋势。设计师如果早期能够把深色模式考虑进去,后面适配将大大降低各方成本。
以上就是我体验 Windows 11 UI 后发现的细节和亮点总结。在规范层,图标风格、圆角、界面布局、下拉菜单、标签栏的定义都挺多细节可以挖掘打磨的,设计师也需要根据自身产品调性考虑该系统规范的可用性,不能盲目跟随。在动效层,设计师发挥的空间和价值挺大的,可以多做些创意。
欢迎关注作者微信公众号:「ALEI的设计思考」
Recommend
-
7
从 12 月 16 日知乎发布了《我的知乎十年历》开始,一年一度的账单时刻拉开了大幕。今日头条、高德、网易云音乐、QQ 音乐、支付宝等都发布了自己的年度账单或报告。 目前从传播效果上来看,网易云音乐可谓是一枝独秀,真的是刷...
-
5
大厂实战!上亿人使用的百度「一刻相册」是如何从零开始设计出来的?项目背景 随着手机拍摄能力和通讯行业的不断发展,使用手机拍照已经成为人们的一种生活习惯,在这个每天都要拍摄、查看、接收、存储、发送照片,以及手机里大部分的内存都贡献给了相...
-
3
设计该如何看待「抄袭」这件事?我总结了5个方面! 7天前 编辑: 土拨鼠作者:
-
6
如何做好搜索设计?我总结了三个原则! 作者:子牧先生 2022-02-22 09:58:09 搜索设计看似简单,展现形式上只有一个输入框和搜索按钮就可以了,但是里面隐藏了很多交互细节。最近工作中刚好有搜索相关的设...
-
8
如何做创新的设计?我总结了这六个方法!-51CTO.COM 如何做创新的设计?我总结了这六个方法! 作者:不一 2022-03-01 15:23:02 我们作为设计师一职在一个项目制的环境里,要产生颠覆行业的创新是...
-
3
Tabs 标签页又称选项卡(以下简称标签页),它是一种高效的屏幕空间利用手段,映射非常接近卡片的目录索引,用户可以基于索引标签,快速定位到目标中内容中去,这也是大多数用户来自现实世界的经验。在 Web 页面中,它的使用场景也较为简单,当页面的内...
-
6
全新的 iOS 16 锁屏设计,我总结了这10个功能要点! 收藏 7小时前 推荐:
-
6
在移动互联网的高速发展的今天,我们如何才能让 B 端产品在移动化时能更好的满足用户诉求与期望呢?本篇文章小编将以「门店通 – 汽配门店管理系统」作为案例,分析并总结B端产品移动化的设计思路。移动化的趋势随着移动场景...
-
2
编辑导语:产品设计应符合产品通用化、系列化、模块化的标准化发展要求。坚持创新和继承相结合的原则,在创新的基础上,提高产品设计的继承性,提高产品零件、部件的通用化程度。本篇文章作者为大家讲解如何构建有效的设计标准化体系。...
-
2
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK