快捷搜索:  as  2018  FtCWSyGV  С˵  test  xxx  Ψһ  w3viyKQx

凯发k8旗舰厅手机app下载:华为资深专家深入解读折叠屏单页面布局设计



据Adobe公布的统计数据显示,假如APP设计或结构没有吸引力,38%的用户将直接退出。这个数据阐明,一个APP体验的好与坏,很大年夜部分取决于页面结构的合理性。而凭借简洁干净、导航方便的框架,单页面结构近来在设计中异常受迎接。单页面结构供给的高度直不雅的、高效实用的导航将有助于确保为用户供给最佳体验,分外是在利用在屏幕可自由切换的折叠屏手机上时。

在上篇《折叠屏 ① | 华为资深专家解读折叠屏利用根基体验要求》中,为开拓者具体解说了利用根基体验要求。本日的文章,我们一同来聊聊利用迁移到折叠屏设备时,单页面结构设计中应重点关注哪3种拥有持久生命力且优秀的结构要领?

一界面信息架构及结构设计

关于折叠屏手机,我们不妨先提出一个问题:当智妙手机在手机和平板两种形态之间往返切换时,它的交互会是如何的?在折叠态下,基础系统交互信息架构沿袭了通俗手机竖屏的定义。在展开态下,因为屏幕的特殊形态,是以孕育发生了如下主要的场景差异:

单页面(结构重排):屏幕宽度变宽孕育发生了版面结构优化的时机,可以在适当的前提下进行页面版式调剂(页面内的元素的位置、大年夜小,同类型数量等发生变更)。

组合页面(信息架构重构):将本来两个或多个页面的内容,合并到一个新页面中以分栏或其他形式出现出来,形成跨页面的交互,从而在得当的场景下构建出新的页面组合样式和新的用户体验凯发k8旗舰厅手机app下载。

利用内多义务:给予用户可以并行处置惩罚多个义务的能力,因为多义务之间没有深度的关联性,是以,在信息架构上是互相自力的分支,每个义务在形态上应该给予用户充分的操作余地,如进入到多义务状态的机会与交互要领、义务之间的切换,窗口的开启关闭和形式切换等,都应该维持统一的规则。同时,因为多个义务在同屏同时运行,跨窗口之间的信息拖拽和通报也成为了可能。

相对而言,折叠屏的大年夜屏上风能够展示更多的内容,富裕的空间也为探索更多交互可能供给了前提,将一些存在于PC上的交互模式迁移得手机上,实现了双屏互动的可能。

二单页面结构设计

折叠屏展开态下屏幕宽度变宽,为折叠屏供给更高效的信息展示或加倍沉浸的内容浏览供给了时机。动态结构是一种针对设备宽度变更而进行界面版面优化重排的有效变更要领,能够供给优越的体验。

1动态结构

动态结构可以细分为“自适应动态结构”以及“相应式动态结构”两类。

1)自适应动态结构

跟着屏幕设备规格的变更,界面中所出现的信息量有增添,但信息架构不变。常见的自适应动态结构的体现形式为:相对拉升,相对缩放,延伸效果等。

2)相应式动态结构

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

下面请看常见的6个动态结构的变形形式:

相对拉伸

结构特征:相对拉伸的特征是,页面内元素的显示宽度不是固定值,而是经由过程相对参照物的要领来确定其开始和停止的位置,当结构的显示大年夜小发生变更时,元素的显示宽度随之发生改变。

相对缩放

结构特征:相对缩放的特征是结构内元素的显示大年夜小不是固定值(比例锁定),而是经由过程相对参照物的要领来凯发k8旗舰厅手机app下载确定其宽或者高的参数,当结构的显示大年夜小发生变更时,元素的大年夜小随之发生改变。

延伸效果

结构特征:延伸结构的特征是当组件内元素横向结构,元素间的间隔凯发k8旗舰厅手机app下载是固准时,结构可显示元素的数量可跟着显示宽度的改变而发生变更。

适应场景:内容出现型界面,单页面内信息架构扁平,内容元素为单层列表或分组列表布局,如凯发k8旗舰厅手机app下载内容门户网站首页面。

适配规则:维持页面元素尺寸或间距此中之一不变的环境下,基于屏幕宽度的增添,在横向增添显示更多元素。

挪移效果

结构特征:挪移结构的特征是,结构内的元素根据结构的宽度来选择是高低排布照样阁下。

适应场景:利用/页面类型:内容出现型,单页面内信息架构层级少,如门户网站首页面,内容详情页面等。

适配规则:首先判断结构的区域的是否有显着的“宽高特性”,即横纵比是否大年夜于4:3;其次判断横向宽度,是否能容得下多少个元素,假如容得下就阁下排布,容不下就高低排布。

重复效果

结构特征:重复结构的特征是,使用屏幕的宽度上风,将相同属性的结构组件(例如:歌单列表,利用列表等),横向并列同时排布。

适应场景:对付内容运营类列表信息,得当在⼤屏上展示更多内容。

适配规则:可以定义单个组件的宽度规则,跟着页面宽度的变更,⾃动谋略可以重复的元素的个数。

瀑布效果

结构特征:瀑布结构的特征是,使用屏幕的宽度上风,将原本单列线性纵向排布的结构,拓展变为两列/多列的纵向结构。

适应场景:得当用卡片式出现内容的场景,经由过程卡片的横纵扩展在⼤屏上展示更多内容。

适配规则:可以定义单个组件的宽度规则,跟着页面宽度的变更,⾃动谋略可以重复的卡片个数。

2栅格结构系统

栅格设计系统是一套能够适配不合屏幕尺寸和屏幕朝向的相应式结构的根基设计机制,它可以确保跨设备的同等性。

栅格设计系统凯发k8旗舰厅手机app下载有 ❶ Columns,❷ Gutters,❸Margins三个基础属性。

Columns, 即栅格,是用来帮助结构的主要定位对象,不合的屏幕尺寸匹配不合的Columns数量来帮助结构定位。Columns的宽度在包管Margins和Gutters相符规范的环境下,根据实际设备的宽度和Columns数量自动谋略每一个Columns的宽度。

Gutters是用来节制元素和元素之间的间隔关系,可以根据设备的不合尺寸,定义不合的Gutters值作为断点系统中的统一规范。为了包管较好的视觉效果,Gutters平日的取值不会大年夜于Margins的取值。

Margins是用来节制元素间隔屏幕最边缘的间隔关系,可以根据设备的不合尺寸,定义不合的Margin值作为断点系统中的统一规范。

栅格系统定义了不合水平宽度设备对应Columns的数量关系,形成了一套断点规则定义。栅格系统以水平dp值作为断点依据,不用的设备根据自身当出息度宽度dp值在不合的断点范围内的环境,显示不合数量的栅格数。

0案例1

栅格缩进效果

阐明:

根据人因测试结果显示,为了包管舒适的涉猎效果,单行文本的字数不应该过多。中文的单行舒适字数是32个字符阁下;最多可吸收的是42个字符阁下。英文的单行舒适字数是66个字符阁下;最多可吸收的是87个字符阁下。为了包管舒适的涉猎性,建议使用栅格定位表现缩进效果。

规则:

4个columns时应用4个columns;

8个columns时应用6个columns;

12个column时应用8个columns。

场景:

纯段落文本 / 上图下文 /卡片的结构布局的场景,在其对应的栅格规格下,缩进的规则占用栅格数量进行结构。

案例2

栅格重复效果

阐明:

对付内容运营类列表信息,得当在大年夜屏上展示更多内容。

规则:

利用定义单个组件所占用的栅格数,跟着设备尺寸和栅格数量的变更,自动谋略新的栅格数量,得出可以重复的元素的个数。

场景:

内容运营类信息展示元素。例如(利用市场,音乐等模块)

在UX设计师看来用户体验是优等大年夜事,为包管用户在折叠屏不合形态切换时体验的继续性,折叠屏手机在系统交互上做了很多设计与考量,以包管屏幕尺寸变更时利用可以对屏幕上内容结构进行优化调剂。比拟之下,大年夜家也都发清楚明了,单页面结构设计的有些经典结构模式是长盛不衰的,基础上单页面框架可以用做很多行业和专业领域的准模板。无论折叠屏设备处于什么状态,单页面结构设计供给的高度直不雅、高效实用的效果将有助于为用户供给最佳体验。

以上内容为《折叠屏UX设计规范》中的单页面结构设计的相关内容,后续我们还将推出组合页面设计规范以及各领域利用的场景设计案例等系列折叠屏适配系列文章,敬请关注!

Tips:今朝华为DevEco云测平台已上线折叠屏远程调试功能,点击涉猎原文即可应用。

您可能还会对下面的文章感兴趣: