手机界面的底部标签栏用css怎么写

一、导航栏位置

在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。在安卓上，Google公司在MaterialDesign中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（TopAppBar）。

导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。很多人疑惑，为什么标签栏不能叫做底部导航？因为标签栏是构架了多个屏幕之间平级页面的内容切换，和导航的定义没有任何关联。

二、导航栏UI设计规范与实际项目的应用

基本的导航栏容器一般承载的信息可能会有：标题；导航按钮；内容控件按钮；其他控件（比如搜索栏、分页标签或分页控件等）；千万别忘了还有分割线。

1、导航栏标题设计规范

2017年以前的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhoneX等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。

于是现在iOS与MaterialDesign在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。

常规标题是指在高度为88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px（34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定）。

大标题是将导航栏栏高增加到192px（iOS@2x），保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。

大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置；采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。

2、导航按钮及内容控件按钮设计规范

iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；MaterialDesign中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉或者关闭图标-关闭工具栏。

与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。在内容控件上iOS与MaterialDesign也大相径庭，MaterialDesign不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。真实的项目中我们经常为了快速落地，会存在一稿适配双平台的情况。这时候我们应该遵从哪一个平台的规范呢？答案是：许多大厂的做法已经向我们验证，规范不分家。

在iOS诸多的应用中溢出菜单早已普及，尽管这是MaterialDesign提出的设计理念。虽然国内遵从MaterialDesign进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。

3、分割线设计规范

分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。MatetialDesign提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。

4、其他控件

关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。

国内的应用程序早已将导航栏容器的作用发挥到极致，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

导航栏用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用，在一个页面发挥着重要作用，设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合 *** 作还能给用户带来极大的体验增益。因此掌握好导航栏的设计技巧对一名设计师来说尤为重要！

搜索框

在视觉上以下两点比较需要注意：

1、放大镜图标

使用图标。我不想对其会增加找到搜索栏的速度进行强调。越简单越好。越少的细节能够保证用户能快速地扫视它。虽然，只有一个图标本身而没有一个可输入的容器或按钮实际上会使搜索变得更加困难。人们通常会意识到，一个放大镜图标显示的是一个搜索工具，即使它没有标签。但是糟糕的是，只有一个图标则会使搜索更加困难。

2、一个真实的搜索按钮

并非每个人都是学会在网上冲浪的千禧一代，这意味着，并不是每个人都知晓在他们输入查询之后需要按下Enter键。在搜索输入旁边添加一个实际的按钮将帮助用户确认他们的下一步行动，进而减少用户所需的认知负荷。

输入特色：

确保可输入的长度不会太短。诺曼集团的相关研究表明，一个能输入27个字符的输入框，可以满足90%的用户需求。

可以输入5个字符与26个字符的搜索框的简单例子

明确占位符

在输入的占位符文本中使用适当的副本是很重要的，通常用户可以通过搜索得到提示。这会确保他们知道要搜索什么，也不会因为写不明白所要查询的问题而感到失望且无措。最近，web工具允许人们轻松地添加提示作为HTML5中的占位符来实现这一点。

添加占位符可以帮助过滤用户查询行为

众所周知，在使用ActionBar的时候，一堆的问题：这个文字能不能定制，位置能不能改变，图标的间距怎么控制神马的，由此暴露出了ActionBar设计的不灵活。为此官方提供了ToolBar，并且提供了supprot library用于向下兼容。Toolbar之所以灵活，是因为它其实就是一个ViewGroup，我们在使用的时候和普通的组件一样，在布局文件中声明。
Part1：ToolBar的引入step1：设置style主题，主要任务是去除原本的ActionBar
<style name="AppBaseTheme" parent="ThemeAppCompatLightNoActionBar"><!--LightDarkActionBar表示默认的黑色主体的Actionbar-->
<!-- Customize your theme here -->
<item name="colorPrimary">@color/sky_blue</item>
<item name="colorPrimaryDark">@color/deep_blue</item>
<item name="colorAccent">@color/material_deep_teal_200</item>
<item name="android:textColorPrimary">@color/white</item>
</style>
colorPrimary表示标题栏ActionBar的颜色；colorPrimaryDark表示状态栏的颜色； colorAccent表示输入框，按钮等被选中时的颜色； textColorPrimary表示标题栏（ActionBar或者ToolBar）中字体的颜色
当然啦，第一步的实现也可以在程序代码中或者style里静态或者动态地去掉ActionBar
step2：在你需要引入ToolBar的布局文件中引入ToolBar：
<androidsupportv7widgetToolbar
android:id="@+id/main_toolbar"
android:theme="@style/ThemeOverlayAppCompatDark"//这里的主题可以用来反衬toolBar的overFlow颜色
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/sky_blue"
></androidsupportv7widgetToolbar>
因为colorPrimary是给ActionBar设定颜色的，因此如果我们使用ToolBar，就需要自己去设定ToolBar的背景颜色
setp3：在代码中获取ToolBar控件以及实例化：
Toolbar toolbar = (Toolbar) findViewById(Ridmain_toolbar);
toolbarsetNavigationIcon(Rmipmapic_toc_white_24dp);//设置ToolBar头部图标
toolbarsetTitle("ToolBar");//设置标题，也可以在xml中静态实现
setSupportActionBar(toolbar);//使活动支持ToolBar
Part2：ToolBar里各SearchView的引入：
setp1:在menu/xxxxxml的菜单布局文件将SearchView以菜单条目的方式加入到ToolBar中
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_search"
app:actionViewClass="androidsupportv7widgetSearchView"
app:showAsAction="ifRoom|collapseActionView"
android:inputType="textCapWords"
android:imeOptions="actionSearch"
android:title="search" />
这中添加条目的方式和添加普通控件的方式是一样的，这里需要对showAsAction具体说明以下：
ifRoom表示当toolBar空间足够时，显示图标在标题栏中，否则将它隐藏到ToolBar末端的overFlow中，点开overFlow只显示item的title
CollapseActionView表示当前空间点开之后占据整个ToolBar空间
always表示总是显示在标题栏中，当我们长按该item后，就会以Toast的方式显示出它的title
never表示总是隐藏在overFlow中
step2：在Java程序代码中实例SearchView
覆写onCreateOptionsMenu方法，为什么要在这个方法里实现对SearchView的实例化呢？因为toolBar里的点击事件都以菜单的形式实现的，如果我们需要让它隐藏到overFlow中，并且点击菜单键并唤出，那么就只需要把它的显示方式设置为never即可。
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflaterinflate(Rmenumenu_main, menu);
MenuItem menuItem = menufindItem(Ridaction_search);//在菜单中找到对应控件的item
SearchView searchView = (SearchView) MenuItemCompatgetActionView(menuItem);
Logd("Tag", "menu create");
MenuItemCompatsetOnActionExpandListener(menuItem, new MenuItemCompatOnActionExpandListener() {//设置打开关闭动作监听
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
ToastmakeText(MainActivitythis, "onExpand", ToastLENGTH_LONG)show();
return true;
}
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
ToastmakeText(MainActivitythis, "Collapse", ToastLENGTH_LONG)show();
return true;
}
});
return superonCreateOptionsMenu(menu);

10801920
状态栏:24dp

APPBAR（导航栏）最小高度:56dp

菜单栏高度（包含底部）:48dp
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
图标和字体大小:

a、启动图标（home页或app列表页）整体大小为48 x 48 dp 没有空白的区域的7”完整图标。 当然也可以是包含空白区域的图标等于48dp。
b、 *** 作栏图标，代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ，图形实际区域为 24 x 24 dp。
c、小图标/场景图标，提供 *** 作或特定项目的状态。

比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ，图形实际区域为 12 x 12 dp 。
d、通知图标

如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。
对图标尺寸进行分类整理，便于界面整体调一致。
第三部分、android的按钮和d出层的设计规范参考。
在720 x 1280 px 的设计稿上，有两个按钮（比如登录、注册）并排一行放置，按钮尺寸最小范围均为240 x 80 px ，换算为android开发单位就是 120 x 40 dp 。
Android APP设计字体单位： Sp 与 Px 的换算

sp与px的换算公式：spppi/160 = px

ldpi（240320）:120

mdpi（320480）:160   倍率为1

hdpi（480800）:240

xhdpi（7201080）:320

xxhdpi（10801920）:480

xxxhdpi:640（14402560）:4
字体规范

注释最小字体12sp

文本字体14sp

文章标题/图标名称18sp

导航标题22sp
ppi为240时字体高度:

注释最小字体:18sp

文本:21sp

文章标题/图标名称:27sp

导航标题:42sp
字体:

Android 系统默认的英文字体 Roboto，默认中文字体都是droid sans fallback、思源黑体
material design字体规范:英文字体使用Roboto，中文字体使用Noto。
Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。

Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
字体配色:

颜色不宜过多，选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化，构成配色方案。

appbar背景使用主色，状态栏背景使用深一级的主色或20％透明度的纯黑。

小面积需要高亮显示的地方使用辅助色

其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。

黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]

白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]
行距

用sp与px之间的关系进行换算。
元素之间间距间距:

所有可 *** 作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
顶部状态栏高度：24dp

Appbar（导航栏）最小高度：56dp

底部导航栏高度：48dp

悬浮按钮尺寸：56x56dp/40x40dp

用户头像尺寸：64x64dp/40x40dp

小图标点击区域：48x48dp

侧边抽屉到屏幕右边的距离：56dp

卡片间距：8dp

分隔线上下留白：8dp

大多元素的留白距离：16dp

屏幕左右对齐基线：16dp

文字左侧对齐基线：72dp
另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。
单行、多行间距要控制下，做出规律。

标题42点（14sp）  副标题36点（12sp）

主标题与副标题间距12sp

注释:多行主标题行间距为8sp

标题48点（16sp）  副标题42点（14sp）

主标题与副标题（单行）间距8sp

标题42点（16sp）  副标题42点（14sp）

主标题与副标题（单行）间距10sp

带分割线的列表上下间距等分，距离为16sp

不带分割线的列表上下间距为32sp。

解释说明类的列表项上下间距为22sp。

悬浮按钮距离底部的距离为:18sp

文字排版

常用字号：

。12sp 小字提示14sp（桌面端13sp）

。正文/按钮文字16sp（桌面端15sp）

。小标题20sp Appbar文字24sp

。大标题34sp/45sp/56sp/112sp 超大号文字

长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。

心得与体会:设计时，可参照设计规范进行设计，具体到项目时可根据项目的具体情况制定规范。

尝试8的倍数，如果不合适，在3的倍率中能够被3整除。

设计来源于细节，再小的细节中也要分等级。

ps cc 2017

adobe xd 交互设计神器。

adobe stock

svg格式字体

9最小点击区域不足48dp48dp

---