深入解读折叠屏单页面局设计_黑白LCD屏-电阻触摸屏-TN屏
2020-04-23

应用基础体验要求

由于折叠屏手机具有折叠态和展开态随时切换的特性,在切换前后对连贯性有明确要求,其适配的标准不仅仅是兼顾手机/平板模式那么简单。根据《折叠屏UX设计规范》中提到的体验连续、体验增值等体验诉求,对比于普通屏幕手机,为了保证体验连续性,需要满足界面信息展示、用户交互、设备特征适配等基础体验要求。

屏幕变大,手机在平板之间来回切换,这样就要求开发者的App在可折叠设备展开时,当前应用页面必须无缝延续到另一个屏幕,并可自动调整大小匹配新的布局,反之亦然。折叠屏时代的界面信息展示会是什么样的呢?黑白LCD屏
界面信息展示:
图片、视频等视觉元素不应发生变形、裁剪等信息缺失。
展开态字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。
一般情况下,不应出现单页面内的内容元素数量减少,或图形化元素的分辨率下降、模糊,视觉体量减小等损失。
屏幕上的显示内容在信息结构上不应发生明显的缺失或变化。黑白LCD屏
除了上面提到的界面信息展示,以新技术主导的折叠屏设备背后,更多挑战则是深入折叠屏设备的用户交互层面。屏幕宽窄的变化给交互设计也会带来相关的变化。在做用户交互的过程中,应该避免哪些情况发生?
用户交互:
不应出现操作路径急剧变化、操作步数严重增加,操作更复杂等体验下降情况。
不应破坏应用内原有的体验沉浸的状态,避免仅仅为了扩充内容或强制应用分屏而过度改变用户体验和用户习惯的情况。黑白LCD屏

在手机创新匮乏的市场背景下,折叠屏手机无疑是一项颠覆性的技术创新。在没有“前车之鉴”的基础上,对于开发者而言,在适配过程中,应用需要满足哪些要求呢?
设备特征适配:
由于折叠屏在展开态下的屏幕显示比例接近方屏,因此横屏的体验跟手机和平板不同,需要做对应的适配。针对方屏,应用需要满足如下要求:
支持横竖屏显示。
横竖屏布局一致。
应用不强制旋转显示方向,只在用户需要的时候进行旋转,避免造成用户额外的操作负担。
以上内容为折叠屏UX设计规范系列内容的折叠屏UX基础体验规范,后续软件绿色联盟会继续发布针对折叠屏单页面布局设计规范、组合页面设计规范深度解读文章,敬请持续关注!黑白LCD屏

接下来,我们一同来聊聊应用迁移到折叠屏设备时,单页面布局设计中应重点关注哪几种拥有持久生命力且表现优秀的布局方式?


界面信息架构及布局设计

关于折叠屏手机,我们不妨先提出一个问题:当智能手机在手机和平板两种形态之间来回切换时,它的交互会是怎样的?在折叠态下,基本系统交互信息架构沿袭了普通手机竖屏的定义。在展开态下,由于屏幕的特殊形态,因此产生了如下主要的场景差异:
单页面(布局重排):屏幕宽度变宽产生了版面布局优化的机会,可以在适当的条件下进行页面版式调整(页面内的元素的位置、大小,同类型数量等发生变化)。

组合页面(信息架构重构):将原先两个或多个页面的内容,合并到一个新页面中以分栏或其他形式呈现出来,形成跨页面的交互,从而在适合的场景下构建出新的页面组合样式和新的用户体验。黑白LCD屏

应用内多任务:给予用户可以并行处理多个任务的能力,由于多任务之间没有深度的关联性,因此,在信息架构上是相互独立的分支,每个任务在形态上应该给予用户充分的操作余地,如进入到多任务状态的时机与交互方式、任务之间的切换,窗口的开启关闭和形式切换等,都应该保持统一的规则。同时,由于多个任务在同屏同时运行,跨窗口之间的信息拖拽和传递也成为了可能。

相对而言,折叠屏的大屏优势能够展示更多的内容,充裕的空间也为探索更多交互可能提供了条件。



单页面布局设计

折叠屏展开态下屏幕宽度变宽,为用户提供了高效便捷的使用体验。动态布局是一种针对设备宽度变化而进行界面版面优化重排的有效变化方式,能够提供良好的体验。
1
动态布局黑白LCD屏
动态布局可以细分为“自适应动态布局”以及“响应式动态布局”两类。

1)自适应动态布局

随着屏幕设备规格的变化,界面中所呈现的信息量有增加,但信息架构不变。常见的自适应动态布局的表现形式为:相对拉升,相对缩放,延伸效果等。








相对拉伸
内容随布局
按间距拉伸
相对缩放
内容随布局
按比例缩放大小
延伸效果
内容随布局
大小扩展
2)响应式动态布局黑白LCD屏

随着屏幕设备规格的变化,页面内的信息架构会发生变化,常见的响应式动态布局的变形形式为:挪移效果,重复效果,瀑布效果等。








挪移效果
内容从上下布局
变为左右
重复效果
内容单列
变为多列
瀑布效果
内容变为
布局流形式

下面请看常见的6个动态布局的变形形式:
相对拉伸

布局特点:相对拉伸的特点是,页面内元素的显示宽度不是固定值,而是通过相对参照物的方式来确定其开始和结束的位置,当布局的显示大小发生变化时,元素的显示宽度随之发生改变。黑白LCD屏

相对缩放

布局特点:相对缩放的特点是布局内元素的显示大小不是固定值(比例锁定),而是通过相对参照物的方式来确定其宽或者高的参数,当布局的显示大小发生变化时,元素的大小随之发生改变。

延伸效果

布局特点:延伸布局的特点是当组件内元素横向布局,元素间的距离是固定时,布局可显示元素的数量可随着显示宽度的改变而发生变化。

适应场景:内容呈现型界面,单页面内信息架构扁平,内容元素为单层列表或分组列表结构,如内容门户网站首页面。
适配规则:保持页面元素尺寸或间距其中之一不变的情况下,基于屏幕宽度的增加,在横向增加显示更多元素。
挪移效果

布局特点:挪移布局的特点是,布局内的元素根据布局的宽度来选择是上下排布还是左右。

适应场景:应用/页面类型:内容呈现型,单页面内信息架构层级少,如门户网站首页面,内容详情页面等。
适配规则:首先判断布局的区域的是否有明显的“宽高特征”,即横纵比是否大于4:3;其次判断横向宽度,是否能容得下若干个元素,如果容得下就左右排布,容不下就上下排布。
重复效果黑白LCD屏

布局特点:重复布局的特点是,利用屏幕的宽度优势,将相同属性的布局组件(例如:歌单列表,应用列表等),横向并列同时排布。

适应场景:对于内容运营类列表信息,适合在⼤屏上展示更多内容。
适配规则:可以定义单个组件的宽度规则,随着页面宽度的变化,⾃动计算可以重复的元素的个数。
瀑布效果

布局特点:瀑布布局的特点是,利用屏幕的宽度优势,将原来单列线性纵向排布的布局,拓展变为两列/多列的纵向布局。

适应场景:适合用卡片式呈现内容的场景,通过卡片的横纵扩展在⼤屏上展示更多内容。
适配规则:可以定义单个组件的宽度规则,随着页面宽度的变化,⾃动计算可以重复的卡片个数。
2
栅格布局系统

栅格设计系统是一套能够适配不同屏幕尺寸和屏幕朝向的响应式布局的基础设计机制,它可以确保跨设备的一致性。

栅格设计系统有 ❶ Columns,❷ Gutters,❸Margins三个基本属性。
Columns,即栅格,是用来辅助布局的主要定位工具,不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的宽度在保证Margins和Gutters符合规范的情况下,根据实际设备的宽度和Columns数量自动计算每一个Columns的宽度。
Gutters是用来控制元素和元素之间的距离关系,可以根据设备的不同尺寸,定义不同的Gutters值作为断点系统中的统一规范。为了保证较好的视觉效果,Gutters通常的取值不会大于Margins的取值。黑白LCD屏
Margins是用来控制元素距离屏幕最边缘的距离关系,可以根据设备的不同尺寸,定义不同的Margin值作为断点系统中的统一规范。

栅格系统定义了不同水平宽度设备对应Columns的数量关系,形成了一套断点规则定义。栅格系统以水平dp值作为断点依据,不用的设备根据自身当前水平宽度dp值在不同的断点范围内的情况,显示不同数量的栅格数:
0<水平dp<320时:2 Columns栅格;
320<=水平dp<600时:4Columns栅格;
600<=水平dp<840时:8Columns栅格;
840<=水平dp时:12Columns栅格;


总的来说,栅格设计系统具有如下优势:
给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。黑白LCD屏
给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。
给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。
栅格可以作为辅助布局的一种有效工具,帮助开发者更全面得考虑多设备形态下的屏幕,如果依附栅格制定规则,达到更合理且美观的布局效果。
案例1:栅格缩进效果
说明:根据人因测试结果显示,为了保证舒适的阅读效果,单行文本的字数不应该过多。中文的单行舒适字数是32个字符左右;最多可接受的是42个字符左右。英文的单行舒适字数是66个字符左右;最多可接受的是87个字符左右。为了保证舒适的阅读性,建议利用栅格定位体现缩进效果。
规则:
4个columns时使用4个columns;
8个columns时使用6个columns;
12个column时使用8个columns。黑白LCD屏
场景:纯段落文本 / 上图下文 /卡片的布局结构的场景,在其对应的栅格规格下,缩进的规则占用栅格数量进行布局。


案例2:栅格重复效果
说明:对于内容运营类列表信息,适合在大屏上展示更多内容。
规则:应用定义单个组件所占用的栅格数,随着设备尺寸和栅格数量的变化,自动计算新的栅格数量,得出可以重复的元素的个数。
场景:内容运营类信息展示元素。例如(应用市场,音乐等模块)黑白LCD屏

为保证用户在折叠屏不同形态切换时体验的连续性,是需要在系统交互上做很多设计与考量的。或许大家也都发现了,单页面布局设计中的有些经典布局模式是长盛不衰的,是可以用做很多行业和专业领域的准模板。无论折叠屏设备是折叠还是展开,单页面布局设计提供的高度直观、高效实用的效果将有助于为用户提供最佳体验。


黑白LCD屏_电阻触摸屏_TN屏_TFT液晶屏_华之晶厂家



我们为您工作

自由咨询
如果您有任何疑问或建议,请给我们留言,我们将尽快回复您!
标准或自定义 lcd 显示模块,什么更适合您的项目?

联系人:尹小姐 :

欢迎光临华之晶
如果您有任何疑问或建议,请给我们留言,我们将尽快回复您!

首页

产品

关于

联系