听说这样能使你的UWP应用体验更好一点？

UWP（Universal Windows Platform）是微软在windows 10上提出的概念，可以在Win 10 Mobile/Surface(Windows平板电脑)/PC/Xbox/HoloLens等平台上运行，意思是它并不是为某一个终端而设计，而是可以在所有windows10设备上运行，所以只要遵从微软UWP设计规范，在不同终端有着优良的用户体验不是不可能的。嗯，前提是遵从微软UWP设计规范。

UWP最重要的理念是响应设计，就是在不同终端会有不同的交互和视觉效果，也可以根据不同终端定制额外内容。响应设计最最最重要是使用有效像素进行设计。例如，在设计 1 英寸 X 1 英寸的元素时，该元素在所有设备上都将显示为大约 1 英寸。在像素密度较高的相当大的屏幕上，该元素可能是 200 x 200 物理像素，而在手机等较小型设备上，它可能是 150 × 150 物理像素。所以千万不要写死实际像素，因为会在其他终端看起来很恶心。

由于不同终端有不同的体验和习惯，UWP根据不同的屏幕大小可以对交互框架进行排布，例如导航的位置的摆放，命令的展示和收起，对内容的排布。如下图，在大屏模式下可以将上下层关系在同一层中展示。

与iOS和Android不同，UWP更强调导航，内容和命令（使用户能够执行诸如发送电子邮件、删除项或提交表单等操作的交互式 UI 元素）独立。以上和其他相关细节都可以从微软官网查阅https://dev.windows.com/zh-cn/design

微软也提出了一个相当新颖的概念CONTINUUM：把手机连接显示器即变成PC或者平板插上键盘变成PC（但mobile win10和PC win10还是有一定区别的）

以下为CONTINUUM相关介绍：

那么可能你会问到切换时界面转变需要考虑过渡动画吗？岂不是很复杂？还好微软帮我们解决了这问题，在手机打开的应用需要在PC模式下重新打开应用，所以是不需要考虑过渡动画的。

如何在UWP设计规范的基础上能把体验做得更好？

以下是在使用中发现的几点：

1. 尽量不要遮盖状态栏

使用CONTINUUM时状态栏会变蓝且弹出控制模式；点击红圈部分手机会变成触摸板（包括充当光标和键盘使用），若状态栏被遮盖住，用户一时不知道在哪里可以用手机操控系统，所以尽量不要遮罩状态栏。

2. 在代码层面真正地实现响应设计

以Bilibili和微软财经应用为例：

B站有4种状态：

1.Mobile状态

2.Mobile状态下使用 CONTINUUM

3.使用 CONTINUUM后打开B站

4.Win10电脑上的B站

相比于B站，微软财经应用就只有两种状态：

1. Mobile状态

2.大屏状态（包括 CONTINUUM和win10电脑 ）

很明显，B站（包括国内其它UWP应用）的工程师没有对CONTINUUM模式进行适配，没有真正意义地实现有效像素这个概念，导致win10手机用户使用CONTINUUM时感觉到不适。

若采用Hybrid模式开发，切记对Web内容进行mobile和PC web相关设计，尽量不要使用不同域名管理不同mobile和PC web（或者两者域名能针对不同状态下的浏览器进行相对应跳转）

3. 当CONTINUUM模式切换时，需要对内容进行重新加载

还是针对以上案例，B站在CONTINUUM切换时没有对整个页面重新加载，导致出现了下图状态

以上为在做UWP设计时发现的几个细节，希望能对大家有所帮助，谢谢您的阅览。

以上就是小编这次带来的更新，小编叫薛志荣，如果你对小编写得文章感兴趣，可以关注小编的公众号（Designer_Oliver）及将此文章分享给你的好友，小编会尽力写一些好的文章推送给大家的。以下是小编公众号的二维码，长按即可关注，谢谢