所有分类
  • 所有分类
  • 未分类
Material Design 设计语言(二)栏

Material Design 设计语言(二)栏

Material Design(原质化设计)是谷歌开发的一种视觉设计语言,它遵循了优秀设计的经典原则,同时还结合了创新理念和新技术。   栏(Bars) 一、应用栏:底部(APP Bars:bottom) 底部的应用栏在移动屏幕底部用于显示导航和关键性操作。 ...

Material Design(原质化设计)是谷歌开发的一种视觉设计语言,它遵循了优秀设计的经典原则,同时还结合了创新理念和新技术。

  栏(Bars)

一、应用栏:底部(APP Bars:bottom)

底部的应用栏在移动屏幕底部用于显示导航和关键性操作。


       

底部应用栏提供了访问抽屉导航的入口,以及最多可放置4个操作按钮,包括悬浮操作按钮(FAB)。


原则


1、可操作的


底部的应用栏突出显示重要的屏幕操作,并且让浮动操作按钮更显眼。


2、灵活的  


底部应用栏的布局和操作会根据屏幕的需要而变化。


3、人体工学


底部应用栏可以通过移动设备上的手持位置轻松到达。

何时使用


应该:


  • 仅限移动设备

  • 访问底部抽屉导航

  • 屏幕有2~5个操作


避免:


  • 已有底部导航栏的APP

  • 屏幕只有1个或没有操作

             

布局

底部应用栏基于FAB的存在及其在栏中的位置,有三种不同的布局。这些布局决定了可以包含在栏中的操作数。

       

1、FAB居中


在主屏幕上使用底部应用栏,其中包含抽屉导航控件和突出操作按钮(例如FAB)。可以在栏的另一侧放置最少1个,最多2个附加操作。

               

2、FAB位于边缘


在次级页面上使用FAB,需要悬浮操作按钮和3~4个其他操作。

              

3、无FAB


当不需要悬浮操作按钮时,底部应用栏可以防止更多菜单里的操作,并且在相对边缘上最多可以放置4个操作图标。

      

悬浮操作按钮


若有悬浮操作图标,那么悬浮操作按钮(FAB)将以以下列两种方式,显示在底部应用栏上:

 

  1. 重叠:FAB的水平高于底部应用栏(基于Z轴),并且对条形的形状没有影响。

  2. 插入:FAB与底部应用栏处于同一水平,并且栏形状改变,以便于FAB可刚好放在底部应用栏中的凹槽中。

             

特别注意


1、覆盖


底部应用栏可以被键盘和其他临时元素覆盖。如果你的APP需要长时间/经常遮住底部应用栏,则应使用其他的组件。

             

2、导航


底部应用栏可以显示菜单图标以打开底部导航抽屉,但该栏本身不应包含任何导航操作(例如返回上一页面或关闭页面的图标)。APP的导航应放置在其他组件中,例如顶部应用栏或嵌入在屏幕上。

              

3、与顶部应用栏配对


与底部应用栏一起使用时,顶级应用栏可以提供向上的导航和其他操作。在整个APP中,应该在两个栏上明确组织和划分操作。


  • 将单个导航菜单控件放在底部应用栏中(用于访问)

  • 将单个更多菜单控件放于底部应用栏的边缘操作

  • 将搜索操作(例如搜索图标)放置在整个应用中一致的位置

  • 破坏性操作放置在顶部应用栏中,例如“删除”

             

4、Snackbars


Snackbars 与 Toasts 应在垂直于底部应用栏上方的位置进行动画处理显示,避免遮盖底部应用栏。

      

二、应用栏:顶部 (App bars: top)

顶部应用栏显示与当前屏幕相关的信息和操作。

             

原则


1、持久性


顶部应用栏始终显示在APP中每个页面的顶部,并且可以在滚动时消失。


2、引导性


顶部应用栏提供了引导用户浏览应用的可靠方式。


3、一致性


顶部应用栏的位置和内容应一致,以提高熟悉度。


类型


常规的顶部应用栏

       


下文操作栏


上下文操作栏为所选项提供操作。顶部应用栏可以转换为上下文操作栏,保持可操作状态直到执行操作或将其取消。

        


布局


对于从左往右看的语言,建议在顶部应用栏中放置元素:


  • 将导航放在最左侧

  • 将标题放在导航的右侧

  • 将上下文操作放在导航的右侧

  • 将更多菜单放在最右侧

对于从右往左看的语言,应该翻转放置位置。

               

1、两种表现方式


突出的顶部应用栏可包含更长的标题、背景图片,或为顶部应用栏提供更强的存在感。

              

在突出型的顶部应用栏中使用背景图片的注意事项:

               

2、导航图标


导航图标是可选的。当它出现在应用栏中时,它会与 Bar 的左侧对齐。它可以是:


  • 菜单图标,用于打开导航抽屉

  • 一个向上箭头,用于浏览APP的层次结构

  • 后退箭头,返回上一个页面


3、标题


应用栏标题可用于描述:


  • 用户当前所在的屏幕

  • 用户当前所在的部分

  • 正在使用的应用程序


4、操作项和更多菜单


将最常用的操作放在左侧,更少使用的操作依次向右放置。任何不适合应用栏的剩余操作项都可以放入更多菜单。


5、滚动


在滚动时,顶部应用栏可以保留在原位,也可以通过以下方式进行转换:


  • 向上滚动时隐藏顶部应用栏

  • 向下滚动时显示顶部应用栏

下文操作栏


用法


顶部应用栏可以转换为上下文操作栏,以便于为所选项目提供上下文操作。


例如,当用户从图库中选择照片时,顶部应用栏将转换为具有与所选照片相关的操作的上下文应用栏。

 

当顶部应用栏转换为上下文操作栏时,会发生以下更改:


  • 栏的填充色发生变化

  • 导航图标被替换为关闭图标

  • 应用栏标题文字转换为上下文操作栏文字

  • 顶部应用栏操作将替换为上下文操作


关闭后,上下文操作栏将转换回顶部应用栏。

布局


当顶部应用栏转换为上下文操作栏时,栏应该更改颜色以指示状态的更改。


三、底部导航 (Bottom Navigation)

底部导航栏使用户可以在APP中的主要页面之间自由切换。

       

底部导航栏位于屏幕的底部,通常显示3~5个入口。每个入口都由一个图标和一个文本标签(可选)表示。


点击底部导航图标时,用户将被带到与该图标关联的页面。


原则


1、人体工学


在手持移动设备上,底部导航栏很容易被触及。


2、一致性


若使用底部导航栏,其将显示在每个屏幕的底部。


3、关联性


通过底部导航栏进入的页面,应同等重要。


何时使用


应该:

  • 优先级最高的页面/功能,应该从APP的任何位置都可以访问的

  • 支持3~5个入口

  • 仅限手机和平板使用


避免:

  • 单个任务,例如查看单个电子邮件

  • 用户首选项或设置


布局

              

根据入口数量:

  • 3个入口:显示所的图标和文本标签。

  • 4~5个入口:只有选中的入口才显示图标和文本标签。未选中的显示图标,如果空间允许,则可以同时放置文本标签。

              

注:国内APP一般很少遇到文本很长的状态,如果做国外APP项目的,可以参考上图这种方式。

标记


底部导航图标可以在右上角加标记。这些标记可以包含动态信息,例如许多待处理请求。

             

  1. 标记

  2. 带有数字的标记

  3. 具有最多字符数的标记

– 推 荐 阅 读 

Material Design 设计语言(一)概述

iOS平台设计规范-精简总结篇

iOS平台设计规范(八)控件-Controls

iOS平台设计规范(七)视图-Views


本文来自:宛苏    作者:宛苏

原文链接:https://www.uiya.cn/15778.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?