主要原则

Fluent Design主要有三条原则：自适应，引人共鸣，美观。

自适应：

Fluent Design 鼓励通过对不同尺寸断点的设计来减少适配不同尺寸设备的难度，然后通过动态变化的布局去自动适应屏幕尺寸。

引人共鸣：

引人共鸣的原则就是使用人们熟悉的交互元素以及根据使用场景做正确的设计。导航，命令界面，控件以及他们的使用条件是支撑起Fluent Design System直观性的主要元素。

美观：

Fluent 体验吸引力十足且令人沉醉。主张运用光线、阴影、动作、深度和纹理这五个主要的元素来构建用户界面，体现真实物理世界的规律和准则，以符合用户已经形成的审美和期望，创造更加自然的用户体验。

光线可以突出显示UI元素，帮助用户聚焦正在操作的区域。

阴影可以制造高度落差来使各UI元素有层次关系，帮助用户理解界面。

动作可以帮助用户在页面跳转和内容变换的时候获得更加连贯和流畅的体验。通过远慢近快的视差营造立体感的深度，帮助用户区分不同的页面内容。

布局

元素布局：

拥有主要的交互式控件及显著的主标题说明。

文本基线确保阅读流畅。

不要用太多的文字颜色，字号。

网格对齐，保证视觉统一，美观。

导航设计在两侧，方便用户识别。

元素周围留有足够的空白。

使用显著的文本引导用户阅读。

提交按钮放于右下角。

可通过降低色彩对比度调整位置等方法弱化次要UI元素。

有效利用屏幕空间：

打开应用时帮助用户调整到合适的窗口尺寸。

没有不必要的滚动。

平衡尺寸比。

改变窗口尺寸：

缩小时移除不必要的元素。

缩小时元素依然可以正常使用。

分组

留出间距分组。

分隔符分组。

分组框分组。

聚合器分组。

动画过渡：

自然符合逻辑。

要提供反馈。

慎重使用，不可以随意使用。

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删