【问题标题】:Material design conventions: toolbar text content材料设计约定:工具栏文本内容
【发布时间】:2016-06-09 22:43:57
【问题描述】:

前言:虽然这似乎是一个基于个人喜好的问题,但我相当肯定有针对材料布局的既定准则,提供了要遵守的规则。 (我似乎找不到他们)

为了为即将到来的考试做准备,我为我和我的同学制作了一个简单的测验应用程序,该应用程序会回答考试中可能会被问到的问题。主问题屏幕的布局如下所示。

如您所见,我没有使用工具栏来显示标题(“测验屏幕”),而是使用它来显示整个问题和问题编号。此外,我禁用了后退按钮。现在的问题是:这种布局和工具栏的使用是否符合材料设计指南?我浏览了https://www.google.com/design/spec/material-design/introduction.html,人们期望在其中找到这样的信息,相当广泛,但没有找到这个问题的答案。

提前致谢。

【问题讨论】:

    标签: android android-layout material-design


    【解决方案1】:

    据我所知,工具栏用于提示当前屏幕中的数据是关于什么的。它不应包含超过两行文本。(对于两行文本,使用collapsing toolbar,对于单行,使用普通工具栏)。来到你的应用程序,我建议你把问题编号放在工具栏中,即“问题 3”,问题应该是一个普通的文本视图,文本大小约为 24sp。此外,从屏幕上删除 FAB 并改用flat button。绝不能滥用FAB按钮

    【讨论】:

    • 非常感谢扁平按钮的建议,一定会改变的。
    • 我只是将问题变成纯文本视图的问题是它使应用程序看起来非常......线性和无聊。我之前尝试过,甚至将包含问题 TextView 的布局作为我的主光色作为背景,但它看起来并不神奇。而现在,因为工具栏的背景是应用程序的主要颜色,所以问题真的跳到了前台。但是,如果指南说这不是工具栏的使用方式,我会遵守 :)
    • 也许可以为问题和工具栏尝试一些大胆的颜色。尝试使用 HEX 颜色值为 #FFC107 的琥珀色作为工具栏的颜色,然后添加问题编号作为文本,就像我在“问题 3”之前告诉你的那样,但将其设置为 textcolor #747474 和字体 roboLight。问题的文本颜色也应该是#747474,但不在工具栏中。它的文本应该比答案大很多,可能是 32sp 或 36sp。最后,为答案#bebebe 设置文本颜色(这是一种漂亮的灰色)。 [阅读本文] (google.com/design/spec/style/color.html#color-color-palette)
    • 非常感谢您的帮助和参考。您可能会说,我对 android/material 设计相当陌生。这绝对会派上用场!
    • 不客气!!如果您需要一些 UI 设计灵感,请查看dribbble,您会在那里找到很多设计。考试顺利
    猜你喜欢
    • 2017-09-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-05-02
    • 1970-01-01
    相关资源
    最近更新 更多