华为资深专家深入解读折叠屏单页面布局设计

  • 时间:
  • 浏览:0
  • 来源:3分彩-3分彩平台_3分彩网投平台

据Adobe提前大选的统计数据显示,肯能APP设计或布局没法 吸引力,38%的用户将直接退出。你什儿 数据说明,两个多多APP体验的好与坏,很大累积取决于页面布局的合理性。而凭借简洁干净、导航方便的框架,单页面布局最近

       据Adobe提前大选的统计数据显示,肯能APP设计或布局没法 吸引力,38%的用户将直接退出。你什儿 数据说明,两个多多APP体验的好与坏,很大累积取决于页面布局的合理性。而凭借简洁干净、导航方便的框架,单页面布局最近在设计中非常受欢迎。单页面布局提供的高度直观的、高效实用的导航将有有助于于确保为用户提供最佳体验,不咋样是在应用在屏幕可自由切换的折叠屏手机上时。

  在上篇《折叠屏 ① | 华为资深专家解读折叠屏应用基础体验要求》中,为开发者详细讲解了应用基础体验要求。今天的文章,亲们一并来聊聊应用迁移到折叠屏设备时,单页面布局设计中应重点关注哪3种拥有持久生命力且优秀的布局法子?

  一界面信息架构及布局设计

  关于折叠屏手机,亲们不妨先提出两个多多问题报告 :当智能手机在手机和平板两种形态之间来回切换时,它的交互会是咋样的?在折叠态下,基本系统交互信息架构沿袭了普通手机竖屏的定义。在展开态下,肯能屏幕的特殊形态,因此产生了如下主要的场景差异:

  · 单页面(布局重排):屏幕高度变宽产生了版面布局优化的肯能,还还要在适当的条件下进行页面版式调整(页面内的元素的位置、大小,这类型数量等处于变化)。

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

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

  相对而言,折叠屏的大屏优势后能 展示更多的内容,雄厚的空间也为探索更多交互肯能提供了条件,将什儿 处于于PC上的交互模式迁移到手机上,实现了双屏互动的肯能。

  二单页面布局设计

  折叠屏展开态下屏幕高度变宽,为折叠屏提供更高效的信息展示或更加沉浸的内容浏览提供了肯能。动态布局是两种针对设备高度变化而进行界面版面优化重排的有效变化法子,后能 提供良好的体验。

  1动态布局

  动态布局还还要细分为“自适应动态布局”以及“响应式动态布局”两类。

  1)自适应动态布局

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

  

  2)响应式动态布局

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

  

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

  · 相对拉伸

  布局特点:相对拉伸的特点是,页面内元素的显示高度详细就有固定值,可是通过相对参照物的法子来挑选其现在开始了和现在开始的位置,当布局的显示大小处于变化时,元素的显示高度随之处于改变。

  · 相对缩放

  布局特点:相对缩放的特点是布局内元素的显示大小详细就有固定值(比例锁定),可是通过相对参照物的法子来挑选其宽肯能高的参数,当布局的显示大小处于变化时,元素的大小随之处于改变。

  · 延伸效果

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

  适应场景:内容呈现型界面,单页面内信息架构扁平,内容元素为单层列表或分组列表形态,如内容门户网站首页面。

  适配规则:保持页面元素尺寸或间距其中之一不变的情况表下,基于屏幕高度的增加,在横向增加显示更多元素。

  · 挪移效果

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

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

  适配规则:首先判断布局的区域的与是是不是明显的“宽高形态”,即横纵比是是不是大于4:3;其次判断横向高度,是是不是能容得下若干个元素,肯能容得下就左右排布,容不下就上下排布。

  · 重复效果

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

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

  适配规则:还还要定义单个组件的高度规则,随着页面高度的变化,⾃动计算还还要重复的元素的个数。

  · 瀑布效果

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

  适应场景:适合用卡片式呈现内容的场景,通过卡片的横纵扩展在⼤屏上展示更多内容。

  适配规则:还还要定义单个组件的高度规则,随着页面高度的变化,⾃动计算还还要重复的卡片个数。

  2栅格布局系统

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

  栅格设计系统有 ❶ Columns,❷ Gutters,❸Margins两个多多基本属性。

  · Columns, 即栅格,是用来辅助布局的主要定位工具,不同的屏幕尺寸匹配不同的Columns数量来辅助布局定位。Columns的高度在保证Margins和Gutters符合规范的情况表下,根据实际设备的高度和Columns数量自动计算每两个多多Columns的高度。

  · Gutters是用来控制元素和元素之间的距离关系,还还要根据设备的不同尺寸,定义不同的Gutters值作为断点系统中的统一规范。为了保证较好的视觉效果,Gutters通常的取值不想大于Margins的取值。

  · Margins是用来控制元素距离屏幕最边缘的距离关系,还还要根据设备的不同尺寸,定义不同的Margin值作为断点系统中的统一规范。

  栅格系统定义了不同水平高度设备对应Columns的数量关系,形成了一套断点规则定义。栅格系统以水平dp值作为断点法子,不想的设备根据自身当前水平高度dp值在不同的断点范围内的情况表,显示不同数量的栅格数。

  0<水平dp<320时:2 Columns栅格;

  320<=水平dp<60 0时:4Columns栅格;

  60 0<=水平dp<840时:8Columns栅格;

  840<=水平dp时:12Columns栅格;

  总的来说,栅格设计系统具有如下优势:

  · 给布局提供两种可循的规律,处置多尺寸多设备的动态布局问题报告 。

  · 给系统提供两种统一的定位标注,保证各模块各设备的布局一致性。

  · 给应用提供两种灵活的间距调整法子,满足特殊场景布局调整的肯能性。

  栅格还还要作为辅助布局的两种有效工具,帮助开发者更全面得考虑多设备形态下的屏幕,肯能依附栅格制定规则,达到更合理且美观的布局效果。

  案例1

  栅格缩进效果

  说明:

  根据人因测试结果显示,为了保证舒适的阅读效果,单行文本的字数不应该不想 。中文的单行舒适字数是3两个多多字符左右;最多可接受的是4两个多多字符左右。英文的单行舒适字数是66个字符左右;最多可接受的是87个字符左右。为了保证舒适的阅读性,建议利用栅格定位体现缩进效果。

  规则:

  两个多多columns时使用两个多多columns;

  8个columns时使用6个columns;

  1两个多多column时使用8个columns。

  场景:

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

  案例2

  栅格重复效果

  说明:

  对于内容运营类列表信息,适合在大屏上展示更多内容。

  规则:

  应用定义单个组件所占用的栅格数,随着设备尺寸和栅格数量的变化,自动计算新的栅格数量,得出还还要重复的元素的个数。

  场景:

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

  在UX设计师看来用户体验是头等大事,为保证用户在折叠屏不同形态切换时体验的连续性,折叠屏手机在系统交互上做了可是设计与考量,以保证屏幕尺寸变化时应用还还要对屏幕上内容布局进行优化调整。相比之下,亲们也都发现了,单页面布局设计的什儿 经典布局模式是长盛不衰的,基本上单页面框架还还要用做可是行业和专业领域的准模板。无论折叠屏设备处于那些情况表,单页面布局设计提供的高度直观、高效实用的效果将有有助于于为用户提供最佳体验。

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

  Tips:目前华为DevEco云测平台已上线折叠屏远程调试功能,点击阅读原文即可使用。

(本内容属于网络转载,文中涉及图片等内容如有侵权,请联系编辑删除)