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

  • 时间:
  • 浏览:0

据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云测平台已上线折叠屏远程调试功能,点击阅读原文即可使用。

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