跨屏设计规范

用户头像
上海/UI设计师/6年前/114浏览
跨屏设计规范

跨屏设计规范

我详细分析了双屏硬件趋势的发展状态和未来方向,同时也翻译整理了微软最新的 Windows 10X 操作系统当中,面向双屏硬件的交互设计规范中的前半部分。

图片来自Theverge


      毫无疑问,Windows 10X 很精准地拿捏了市场方向和设计的方向——双屏比柔性屏更容易实现,相应的,接缝是必须解决的基础交互问题。在新系统的交互设计上,微软优先考虑解决接缝的问题。解决了接缝问题,那么接下来,就需要讨论系统和应用程序,在具体交互上,到底有哪些常见的交互模式,和硬件要如何结合。


跨平台的双屏交互设计逻辑

需要在此强调的是,这种双屏的设计范式,其实是跨平台的通用规则——很程度上,这套交互逻辑是不受操作系统限制的,而且微软很鸡贼的一点在于,他们发布的 Surface Duo 和 Surface Neo 并非都使用了 Windows 10X 的系统,其中 Surface Duo 用的是 Android 系统,并且在微软的这套规范当中,还有一半的开发指南,是 Android 平台的!



在开发文档当中,除了很具体地展示出了分别在 Android 平台和 Windows 10X 平台上的界面控件和交互设计范例,而且还加入了相关的代码段示例,具体实现的方式,关键参数等信息。


双屏应用交互模式

之前的规范当中,我们讨论了如何去更好地适配接缝的问题,接下来,我们将会探讨一下双屏的应用模式。

通常,应用程序在双屏硬件当中,通常将会采用下面的5种模式,虽然它们并不是唯一的选择,但是这5种推荐的常用模式,应该能够给你带来足够的想象空间。


就像之前说的,我们开始注意到用户倾向于使用双横屏展开模式(类似摊开书本之后翻转90度的状态)来浏览信息的倾向,因此,你在设计的时候,可以在用户翻转屏幕的时候,改为上屏显示单条目的主视图,而下屏显示详细视图的模式。


可以从这种模式中获益的应用范例:

  • 具有列表或者图库的应用

  • 邮件类应用

  • 事务管理型应用

  • 照片或者图片管理类应用

  • 带有播放列表的音乐类应用

  • 具有复杂多样层级结构的应用



0
举报
|
1
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
3D渐变流体抽象矢量UI背景图
我的钱包-UI界面设计-app
UI界面 组件
盲盒APP UI设计
Security Camera UI kit
智能家居中心 简约 UI设计组件库
新能源APP应用UIKit
高级表盘系列UI源文件
高级感金属拟物 UI设计组件库
科技医疗透明柜UI界面设计
【新年UI图标】汽车icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】体育icon
UI通用设计素材1
APP/小程序商业项目UI模板|99个高保真UI+79个原型
钱包ui模板
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】旅行icon
【新年UI图标】30个图标
手表表盘UI系列
拟物风质感写实UI卡片合集源文件
【新年UI图标】钱包icon
3D卡通UI界面图标可爱插画免扣素
你可能喜欢
相关收藏夹
大家都在看
登录注册