您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

成长值达到300分以上才可以发布哟!~

先看看别人的即刻>

UWP 响应式程序设计介绍

自译外文 分类: 规范/资料 版权: 原作者: 微软
7968 27 23 1
2015-05-03
0.0
普通推荐

翻译自 Windows 开发人员中心 Design Basics:Responsive design 101 for UWP apps

[一些关于发售前产品的信息可能在正式发售前做出较大调整。微软不对这里的信息提供保障,通知或许诺]

在 UWP(Universal Windows Platform 即 Windows 通用平台)程序介绍中,我们解释了如何让 UWP 程序在平台上运行。你不需要为所有屏幕尺寸定制界面;Windows 确保你的用户界面在所有设备上都合理显示。然而,你也可以为特定设备调整界面。比如每当你的程序运行在台式机或笔记本电脑上的时候,你可能想让它展示更多的内容,但这些内容展现在小屏幕上时又十分混乱。

使用这些方法为特定的屏幕尺寸优化程序,有些简单快速,有些则需要费些功夫。

设计有效像素

面向设计师的 Windows 通用平台程序介绍》中,我们谈到了如何设计 UWP 程序,你设计的不是真实物理像素,而是有效像素。

有效像素可以让你专注于 UI 元素的感知大小,无需为像素密度与使用距离担心。比如,当你设计一个“1”比例的元素,这个元素会在不同设备上合理呈现,在大屏高分辨率屏幕上这个元素的物理像素是 200x200,而在手机上,他的物理像素会是 100x100

所以,这对设计程序的方式有何影响呢?

  • ·你可以忽略像素密度和实际的屏幕尺寸,转而注意屏幕尺寸等级(下文有解释)和有效像素。
  • ·当系统缩放你的界面时是以 4 的倍数进行缩放。为了确保显示正确,请在 4x4 的网格中进行设计:界面的空白,尺寸,位置和字体的位置(无需考虑字体尺寸)都要是 4 的倍数。

下图展示了在 4x4 像素网格上设计的界面元素。这些元素会清晰锐利地显示在任何平台上。

下图展示了不符合 4x4 像素网格的设计元素。这些设计元素在某些设备商会很模糊

提示:当设计界面原型图片的时候,你可以将 DPI 调整到 72 并且将图像大小调整到你针对的尺寸类别(下文有推荐的几个屏幕尺寸级别)。

为什么为特殊的尺寸定制界面?

之前我们讲到 UWP 是如何使用有效像素并让你的程序适应所有 Windows 设备的。那为什么还要为特殊的尺寸定制界面呢?

备注:Windows 不会告诉你你的程序运行在哪一个具体设备上。但它可以告诉你正在运行在哪一类设备上(如移动,桌面等),有效像素和屏幕可用空间(程序窗口尺寸)

·确保屏幕空间的利用率,减少导航的需求

如果你设计的程序在小屏幕上显示良好,比如在手机上。但当它运行在大屏幕 PC 的时候,会浪费很多屏幕空间。你可以定制大屏幕运行时的界面,来显示更多的内容。比如,手机上的购物程序一屏可能只显示一种商品类别,但是在 PC 和笔记本电脑上运行的时候会同时显示两个类别。

由于显示了更多内容,用户使用导航的次数就会减少。

·充分发挥设备的能力

特定的设备会拥有特定的能力。比如,手机上搭载了定位装置和摄像头,PC上一般没有这些。你的程序可以检测设备有哪些能力和特性并且运用他们。

·输入优化

通用控件库兼容所有输入方式(触控,笔,键盘,鼠标),但是你仍然可以为特殊的输入方式进行优化。比如手机用户可能喜欢把导航按钮放在屏幕底下,因为他们很好被触摸到,但是 PC 用户希望他们出现在屏幕的上方。

响应式设计技巧

当你为特殊屏幕尺寸进行优化的时候,你就是在创建响应式设计程序。你可以用一下六条响应式设计技巧优化你的程序。

·调整位置

你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子:为了确保同时展示两个元素,在手机上我们必须采用纵向滚动界面,而在平板电脑上,我们可以调整框架的位置,变为横屏滚动界面。如果你用网格设计这些位置,你也可以不改变内容框架,但其他 UI 元素可以使用响应式设计。

这是一个图片应用的例子,内容框架在大屏幕上被改变了位置。

·调整尺寸

你可以通过调整空白和 UI 元素的尺寸来优化框架,比如下面这个例子,可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。

·调整顺序

通过调整 UI 元素的顺序和方向,优化内容显示效果。举个例子,在大屏上运行时,可以再添加一栏,并且加入分类列表,这些都是合理的。

这个例子展示了在手机上使用一栏纵向滚动,而在平板上使用两栏横向滚动的优化。

·展现

你可以基于屏幕的真实大小,设备支持的功能,特定的情况或者屏幕方向展示界面。

下图是一个含有相机按钮的 Tab 的例子。平板电脑和台式机可能没有摄像头,所以相机按钮不被显示出来。另一个例子是媒体播放器,小屏幕上这些按钮通常是被删减的,但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。

选择何时显示更多元数据也是这项技巧的一部分。当真实尺寸比较小的时候,应当更少地展现元数据。PC 和笔记本上应该多展现一些元数据。一些展现和隐藏元数据的例子:

Email 程序,显示用户头像

音乐程序,显示更多关于专辑和作者的信息

视频程序,显示更多关于影片或节目的信息,比如时间表和职员表

任何程序中,去除分栏并展现更多细节

任何程序中,将垂直折叠界面摊开,变成水平界面。手机或者 Phablet 上使用垂直折叠,而在大尺寸屏幕上使用水平界面可以显示更多项目和元数据

·换位

这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单:小屏幕上他是隐藏在汉堡菜单中纵向排列的,但是在大屏幕上,更大的 Tab 是更好地选择。

·改变结构

你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。

下图是一个智能家庭程序,运用了改变结构的技巧

屏幕尺寸级别转换点

Windows10 生态系统中的屏幕尺寸众多,为每一个尺寸进行优化很是费力。我们推荐为几个关键的尺寸级别进行优化(也叫“转换点”):320,720,和 1024px

提示:当为这些转换点设计的时候,请流出屏幕空间,因为当他们全屏运行的时候才符合转换点尺寸,但通常他们不是全屏运行的,那样看起来就会比较小。底下这个表格是推荐的尺寸级别。

MakicLin

CCA,准专业视觉设计师,永远是学生。

85粉丝/14关注

当仁不让lv.1首页新秀原创达人勤学标兵lv.1
Google Play 图标重设计KOBE30
0
心随风

给力

精彩!

MakicLin

MakicLin

CCA,准专业视觉设计师,永远是学生。

当仁不让lv.1首页新秀原创达人勤学标兵lv.1

扫描二维码
去手机端查看海报

MakicLin

TA已经获得5枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了