zoukankan      html  css  js  c++  java
  • Material Design学习之 Bottom navigation

    转载请注明出处:王亟亟的大牛之路

    礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容。这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译和理解,代码部分还没来得及实验)


    众所周知Android之前一直提倡者”Bar”一系列的东西尽量是在“上面”,而苹果的设计一般在以下

    像这样
    这里写图片描写叙述

    而苹果的一般在以下像这样(拿我的微信做样例,圈掉的部分无视)

    这里写图片描写叙述

    而如今Material Design设计规范中增加底部导航栏也就是我们今天文章的主角Bottom navigation

    来看看官方是怎么形容他的(接下来的翻译全是 我人工翻译。如有不准确可请原谅。临时还没找到字幕组或者什么机构去解释这部分)

    Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.
    底部导航栏让我们能够更轻松的在几个顶层的视图间进行选择和查看

    这是一个给与我们选择和切换试图组用的。

    (就像上面微信,联系人。发现。我这系列做功能卡片切换。TMD怎么拿微信做样例了)


    知道了这是一个干什么用的东西之后我们来看看他的一些要点

    Three to five top-level destinations of similar importance (Alternative: A persistent navigation drawer accessible from anywhere in the app)

    比較推崇3-5个页面的切换,假设过多就不推荐使用Bottom navigation
    那假设过少,仅仅有2个这样的也是不太推荐的。

    推荐
    这里写图片描写叙述

    不推荐
    这里写图片描写叙述

    不推荐
    这里写图片描写叙述

    注意点:
    在与标签相结合的底部导航时要小心。由于在用户使用应用程序时可能会引起混淆。


    Style

    Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons.

    由于底部的导航行为是作为图标的,所以它们应该被用于内容,能够与图标进行适当的沟通,至少要让用户简单的理解这个图标代表了什么。

    颜色不要五颜六色的,仅仅要让用户清楚的理解他选择的是哪个即可了

    推荐
    这里写图片描写叙述

    不推荐
    这里写图片描写叙述

    If the bottom navigation bar is colored, make the icon and text label of the current action black or white.

    假设Bottom navigation本身是彩色的,那么图标和文字尽量用黑色或者白色

    推荐

    不推荐

    这里写图片描写叙述

    Text labels provide short, meaningfully definitions to bottom navigation icons. Avoid long text labels as these labels do not truncate or wrap.

    文字部分不要太长尽量精简,表达意思即可

    推荐
    这里写图片描写叙述

    不推荐
    这里写图片描写叙述

    那假设一定要非常长的描写叙述文字,请把多余部分隐藏掉,不要换行或者缩小字体大小

    推荐

    这里写图片描写叙述

    不推荐
    这里写图片描写叙述

    注意点:
    标签真的多了。就别贴字了。假设仅仅有三个就请字+图标都放上去
    被选中的一定要高亮。高亮,高亮重要的事情说三遍


    Behavior

    Tapping on a bottom navigation icon takes you directly to the associated view, or refreshes the currently active view.

    上拉列表时。隐藏Bottom navigation,下拉列表时,显示Bottom navigation

    这个和我之前写过的一个解放用户操作空间差点儿相同概念(我好66 哈哈哈哈,传送门:http://blog.csdn.net/ddwhan0123/article/details/50352662

    像这样
    这里写图片描写叙述

    推荐点击切换,而不是相似于viewpager形式的滑动切换

    推荐
    这里写图片描写叙述

    不推荐
    这里写图片描写叙述


    Specs

    和其它控件一样也有他的尺寸规格。这边就不详解了,看看即可。

    这里写图片描写叙述

    在不同的屏幕大小下也有着不同的规格体现

    这里写图片描写叙述

    这里写图片描写叙述

    在平板里,又是这样

    这里写图片描写叙述

    最后贴一下视图厚度分布

    这里写图片描写叙述

    原文地址:https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs

    2016.3.25 补上Demo:
    https://github.com/aurelhubert/ahbottomnavigation

  • 相关阅读:
    《Thinking In C#》
    在图片上写字
    在设计期跟踪代码
    VS2003下的重构工具ReSharp
    监视剪贴板的变化
    一次重构导向设计模式的实践
    JENA学习的零散笔记
    jena处理Owl
    Maven库中.lastUpdated文件自动清除工具
    WEB数据挖掘(六)——Aperture数据抽取(2)
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/7274445.html
Copyright © 2011-2022 走看看