关于折叠屏手机交互设计的一些思考（三）

上一篇文章给大家简单聊了一下折叠屏手机交互设计的响应式布局，下面就给大家总结一下响应式布局的设计技巧，一起来看看吧！

响应式设计技巧包括以下6点：

A. 调整位置 ：你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。
B. 调整尺寸 ：你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。
C. 调整顺序 ：通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。
D. 展现 ：你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。
E. 换位 ：这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。
F. 改变结构 ：你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。
以上6点引用了Windows 开发人员中心 Design Basics:Responsive design 101 for UWP apps，链接：https://www.ui.cn/detail/49641.html

下篇文章给大家分享“场景化设计”的一些思考，以及相关注意事项，继续去看完吧，相信你会有所感悟，也欢迎大家发表自己的观点。

以上就是“关于折叠屏手机交互设计的一些思考（三）”的内容了，如果你还想了解其他相关内容，可以来 产品壹佰 官方网站。