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

  • 时间:
  • 浏览:0

据Adobe组阁 的统计数据显示,机会APP设计或布局没人 吸引力,38%的用户将直接退出。这个 数据说明,5个多 多APP体验的好与坏,很大主次取决于页面布局的合理性。而凭借简洁干净、导航方便的框架,单页面布局最近

       据Adobe组阁 的统计数据显示,机会APP设计或布局没人 吸引力,38%的用户将直接退出。这个 数据说明,5个多 多APP体验的好与坏,很大主次取决于页面布局的合理性。而凭借简洁干净、导航方便的框架,单页面布局最近在设计中非常受欢迎。单页面布局提供的层厚直观的、高效实用的导航将利于确保为用户提供最佳体验,不如可是我在应用在屏幕可自由切换的折叠屏手机上时。

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

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

  关于折叠屏手机,一点人不妨先提出5个多 多疑问:当智能手机在手机和平板一种生活行态之间来回切换时,它的交互会是如可的?在折叠态下,基本系统交互信息架构沿袭了普通手机竖屏的定义。在展开态下,机会屏幕的特殊行态,但会 产生了如下主要的场景差异:

  · 单页面(布局重排):屏幕层厚变宽产生了版面布局优化的机会,时需在适当的条件下进行页面版式调整(页面内的元素的位置、大小,这个型数量等所处变化)。

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

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

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

  二单页面布局设计

  折叠屏展开态下屏幕层厚变宽,为折叠屏提供更高效的信息展示或更加沉浸的内容浏览提供了机会。动态布局是一种生活针对设备层厚变化而进行界面版面优化重排的有效变化依据,也能提供良好的体验。

  1动态布局

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

  1)自适应动态布局

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

  

  2)响应式动态布局

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

  

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

  · 相对拉伸

  布局特点:相对拉伸的特点是,页面内元素的显示层厚都有 固定值,太多太多太多太多我通过相对参照物的依据来选者其结束了和结束了的位置,当布局的显示大小所处变化时,元素的显示层厚随之所处改变。

  · 相对缩放

  布局特点:相对缩放的特点是布局内元素的显示大小都有 固定值(比例锁定),太多太多太多太多我通过相对参照物的依据来选者其宽机会高的参数,当布局的显示大小所处变化时,元素的大小随之所处改变。

  · 延伸效果

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

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

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

  · 挪移效果

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

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

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

  · 重复效果

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

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

  适配规则:时需定义单个组件的层厚规则,随着页面层厚的变化,⾃动计算时需重复的元素的个数。

  · 瀑布效果

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

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

  适配规则:时需定义单个组件的层厚规则,随着页面层厚的变化,⾃动计算时需重复的卡片个数。

  2栅格布局系统

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

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

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

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

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

  栅格系统定义了不同水平层厚设备对应Columns的数量关系,形成了一套断点规则定义。栅格系统以水平dp值作为断点依据,不不的设备根据自身当前水平层厚dp值在不同的断点范围内的状态,显示不同数量的栅格数。

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

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

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

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

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

  · 给布局提供一种生活可循的规律,处理多尺寸多设备的动态布局疑问。

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

  · 给应用提供一种生活灵活的间距调整依据,满足特殊场景布局调整的机会性。

  栅格时需作为辅助布局的一种生活有效工具,帮助开发者更全面得考虑多设备行态下的屏幕,机会依附栅格制定规则,达到更合理且美观的布局效果。

  案例1

  栅格缩进效果

  说明:

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

  规则:

  5个多 多columns时使用5个多 多columns;

  8个columns时使用6个columns;

  15个多 多column时使用8个columns。

  场景:

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

  案例2

  栅格重复效果

  说明:

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

  规则:

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

  场景:

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

  在UX设计师看来用户体验是头等大事,为保证用户在折叠屏不同行态切换时体验的连续性,折叠屏手机在系统交互上做了太多太多太多太多设计与考量,以保证屏幕尺寸变化时应用时需对屏幕上内容布局进行优化调整。相比之下,一点人也都发现了,单页面布局设计的一点经典布局模式是长盛不衰的,基本上单页面框架时需用做太多太多太多太多行业和专业领域的准模板。无论折叠屏设备所处哪些地方状态,单页面布局设计提供的层厚直观、高效实用的效果将利于为用户提供最佳体验。

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

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

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