大发快三最新网站华为资深专家深入解读折叠屏单页面布局设计

  • 时间:
  • 浏览:0
  • 来源:大发3分快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<500时:4Columns栅格;

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

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