你所在的位置: 首页 > 正文

华为资深专家解读折叠屏组合页面设计

2020-01-30 点击:906

组合页面设计(Combined page design)是将两个或多个原始页面的内容合并成一个新页面,并以列或其他形式呈现出来,形成跨页交互,从而在合适的场景下构建新的页面组合样式和新的用户体验。

在此之前,软件绿色联盟已经推出了折叠屏幕的UX设计规范系列①和②。除了《折叠屏 ② |低跳出,高留存的折叠屏单页面布局设计就该这么做!》描述的单个页面内的动态布局之外,它实际上还可以使用组合页面设计的构造方法。组合页面设计使版面设计更加生动有趣,淡化单调的设计,赋予页面更强的生命力。让我们来看看规范的细节~

组合页面设计

无论什么样的折叠方法,都给用户增加了一个可折叠的屏幕,这个新屏幕比2大1 1,手机可以转换成平板。UX设计师首先需要考虑的是,折叠屏幕不仅可以在一个页面上展示更多的内容,还可以同时显示不同页面的内容,为用户创造新的操作体验。

当应用程序中的两个页面直接相关时,可以考虑合并页面以提供更好的体验。组合页面之间的关系类型直接影响到如何组合和呈现页面信息。应用程序需要根据每个不同的关系类型选择适当的信息架构风格。

组合页面之间有三种类型的关系:

1。层次关系

2。主从关系

3。并行关系

1分层关系

分层关系有两种类型:多级和单级。

多级多级关系具有完整的多级结构,如复杂的系统设置菜单、海量内容门户(如综合电子商务产品、视频、图片或音乐媒体资源、新闻网站海量新闻)和多级分类子页面。

这种类型的交互式逻辑功能:

?除了第一级基本分类之外,次级分类也以列表的形式呈现。

,最终列表页面中的元素是最小的内容元素,如单一商品、单一媒体材料、单一新闻等。

信息架构设计要求:

?应同时满足两个条件:“用户可以感知当前位置”和“需要时可以找到所需内容”。

,为了满足“用户可以感知当前位置”的要求,避免用户迷失方向的感觉,页面组合中的左边页面需要固定显示根列表,用户可以通过左边的操作随时返回一级子列表;您还可以通过在主列表中选择一个分支条目来快速输入另一个主分支。

,页面组合中右边页面的操作可以保持普通手机的“逐层深度”,并使用返回操作的导航定义“逐层退出”。

,为了满足“需要时可以找到”的要求,建议在屏幕上的固定位置保留一个固定的搜索入口,以帮助用户随时找到他们需要的元素或类别。

单层

单层结构通常以“列表详细信息”的形式呈现。列表中的每个元素都是一个结束元素,并且该元素中没有二级分类列表。基于内容的元素列表,如邮件、信息、备忘录等。

这种类型的交互式逻辑功能:

?列表中只有单个元素,没有子列表,左侧和右侧的内容属性是固定的,丢失的用户较少。

,点击左边的条目,打开右边相应的详细信息。

,用户可以点击左边列表中的任何项目,快速打开右边相应的详细内容,实现快速的内容切换。“层次递进关系”的信息架构风格采用栏目布局风格。

列左侧的列表表单是信息架构的概念性列表。它可以是一个普通的文本列表,也可以是一个适合组合媒体元素(如宫格和瀑布)的列表。

,为了确保列左右两侧内容的平衡,页面分隔线的位置可以由系统或应用程序标准化和定义(例如,纯文本类型的列的左右页面的宽度比设置为4:6,或者网格布局系统采用8个网格下的:5的比率)。

在主sl中

这种类型的交互式逻辑功能:

辅助侧取决于主侧的存在。如果主页面关闭或切换,辅助页面不能单独存在,需要同步关闭或切换。

,内容呈现的主要方面,没有中断和中断,继续保持最佳沉浸状态。

,辅助内容用户可以滚动浏览,适合信息流数据,用户可以参与交互。

主从关系的信息架构类型主要有以下几种。应用程序可以根据特定的场景进行选择:并行列以及主部件和辅助部件并行显示,并且可以单独滚动。从属部分取决于主导部分的存在。

图平行栏

悬挂窗口面板

图悬挂面板

侧栏

下级信息默认以侧栏的形式显示。依赖关系通过界面比例和视觉效果显示,不影响主信息的显示,能够快速浏览或操作下级信息。

Fig侧边栏

push

Fig push

在应用程序示例

小视频应用,左侧为视频播放页面,点击视频作者头像打开视频作者个人主页,左侧为视频播放页面,右侧为左侧视频的辅助页面。

3并行关系

在某些情况下,用户需要比较同一类型的两个内容。对于这种类型的关系,这两页是相同类型的,具有相同的状态。对于

并置关系,主要有以下类型的信息体系结构样式。可以根据特定场景选择应用程序:

具有相同内容类型的页面并置:两侧具有相同的页面布局,并且每段信息都相互对应。

不同类型的内容页面是并列的:这两个页面的布局和内容是不同的,但它们是相互关联的。

图不同类型的内容页面与两侧不同的页面布局和内容并列,但它们是相互关联的。

在应用程序示例

shopping应用程序中,在下订单之前会详细比较两种相似商品的情况。在现有的普通手机上,用户需要在多步操作后退出产品A的细节,切换到产品B的细节。细节通过记忆进行比较。整个比较过程增加了用户的记忆成本,同时画面效果比较也不直观。因此,平行比较式的页面组合关系便于用户更详细地比较两种商品的信息内容。

在这个组合页面下,左右页面是相同类型的内容,状态相同,彼此之间没有主、次或从属关系。

因此,页面分割比率应该是1:1。

图商品比较

今天解释的这些组合页面的设计布局是随着时间的推移而改进的经典设计。选择正确的设计趋势与这些布局相结合通常会带来好的结果。以上内容与《折叠屏UX设计规范》中复合页面的设计规范相关。稍后,我们还将推出一系列关于折叠屏幕适应的文章,例如应用于各个领域的场景设计案例。请继续注意!

提示:目前华为DevEco云平台已经上线,具备折叠屏幕远程调试功能。单击阅读原文以使用它。

日期归档
科尔沁资讯网 版权所有© www.rcgclub.cn 技术支持:科尔沁资讯网 | 网站地图