移动端底部的导航多高（移动端底部导航条）

本文目录一览：

• 1、UI设计网页时，导航栏尺寸规格一般是多少
• 2、android导航栏高度是多少
• 3、iphonex导航键多高比较好
• 4、ios7界面设计中官方的标准的底部操作栏的高度是多少像素
• 5、安卓/ios中，app设计时常见的尺寸有哪些

UI设计网页时，导航栏尺寸规格一般是多少

当前最流行的分辨率是1920*1080，在该分辨率下，页面中心区域为1200px以内都可以。在800*600分辨率下，导航栏尺寸规格保持在778px以内；在1024*768分辨率下，网页宽度保持在1002px以内。

如果没有指定的要求，以1920尺寸设计就好（这是目前最普遍的尺寸大小），前端开发人员会自行适配其他的分辨率。

扩展资料：

UI设计网页方法

一、呈现更新颖的内容

设计师在进行网页ui设计的过程中需要注意的是，想要让自己的网页看起来更加与众不同，但也不必过于夸大，可以用一些新鲜的理念和不同的布局来吸引用户访问。比如以一种动态的方式，将信息呈现给用户，以此来赢得用户更多的关注。

二、增强元素的设计感

相对于普通的网页ui设计而言，具有较强的设计感的网页往往会更容易吸引用户的注意。任何一个具有创意的网站开发设计方案，都会把目光更聚焦在网页的基本布局和色彩搭配上，而这也意味着网页上一般存在很多种不同的元素。

三、激励用户更多操作

网站开发的设计制作的类型有很多种，面对不同的类型，要有特定的网页ui设计方案。给用户提供一个寻找目标的简易方法，这样用户就容易沉浸到页面中来，同时也增加了用户操作的几率。

android导航栏高度是多少

屏幕高度都是包括了状态栏和导航栏的高度的 

2.获取控件尺寸

如果我们在onCreate（）方法里直接调用getWidth()、getMeasuredWidth()获得的尺寸为0，这是由于在onCreate()中，我们的控件还没有画好，等onCreate（）执行完了，我们的控件才被测量出来，我们可以注册一个监听器，用来监听测量结果

ViewTreeObserver vto  = mButton.getViewTreeObserver();

vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {            @Override

public void onGlobalLayout() {            //移除上一次监听，避免重复监听

mButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);                //在这里调用getHeight（）获得控件的高度

buttonHeight = mButton.getHeight();

}

});1234567891011

3.获得状态栏/通知栏的高度

public static int getStatusBarHeight(Context context){

Class? c = null;

Object obj = null;

Field field = null;        int x = 0, statusBarHeight = 0;        try {

c = Class.forName("com.android.internal.R$dimen");

obj = c.newInstance();

field = c.getField("status_bar_height");

x = Integer.parseInt(field.get(obj).toString());

statusBarHeight = context.getResources().getDimensionPixelSize(x);

} catch (Exception e1) {

e1.printStackTrace();

}        return statusBarHeight;

}12345678910111213141516

4.获得导航栏高度

public int getNavigationBarHeight(Activity activity) {

Resources resources = activity.getResources();        int resourceId = resources.getIdentifier("navigation_bar_height","dimen", "android");        //获取NavigationBar的高度

int height = resources.getDimensionPixelSize(resourceId);        return height;

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。

具体步骤如下：／导致这种情况的原因主要是……

iphonex导航键多高比较好

iPhoneX导航栏高度 84，普通机型64

在iPhoneX底部显示时，需要往上移动34px，34为底部的安全区域间距。

*iOS11中废弃了automaticallyAdjustsScrollViewInsets，取而代之的是contentInsetAdjustmentBehavior属性，adjustedContentInset属性决定了tableView与边缘的距离。iPhone X竖屏时控制器视图的safeAreaInsets是（44，0，34，0）

ios7界面设计中官方的标准的底部操作栏的高度是多少像素

iOS界面设计尺寸规范

一、尺寸及分辨率

iPhone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。

iPad界面尺寸：1024*768、2048*1536等。

单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。

Ps：作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素

iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。

640*960的尺寸设计下这些元素的尺寸。

· 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px

· 导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px

· 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px

· 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px

[下图说明：]

至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~

三、字体大小

Heiti SC（黑体-简，黑体-简的英文名称为HeitiSC。Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPodnano第五代以来的预设简体中文字型。

黑体-简系为黑体，取代华文黑体成为Mac OS X Snow Leopard的预设简体中文字型。在过去，华文黑体是Mac OS X的预设简体中文字型，因此以前并没有黑体-简。

黑体-简是全新的字型，与黑体-繁同以华文黑体为基础开发，成为Mac OS X Snow Leopard与iPhone OS 3.0（版本4.0后改名为iOS）之后内建并同时为预设的简体中文字型。虽与华文黑体为两套字型，但差异微小，仅排列上有差距，笔画的差距也十分微小。包含“细体”与“中黑”，黑体-简与黑体-繁皆使用.ttc（TrueType Collection）格式，可以在单一档案包含多套字型。其中，黑体-简与黑体-繁的细体在/System/Library/Fonts/STHeitiLight.ttc，黑体-简与黑体-繁的中黑在/Library/Fonts/STHeitiMedium.ttc。

在ios中默认字体分为三类：

第一种：STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体

第二种：_H_Helvetica.ttc和 _H_HelveticaNeue.ttc代表的是英文以及数字字体

第三种：LockClock.ttf代表的是锁屏时间字体

IPhone上的字体英文为：HelveticaNeue 。至于中文Mac下用的是黑体，Win下则为华文黑体。

下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小。

其实还有个更简单的方法就是找你觉得好的app应用，手机截图后放进PS自己比对调节字体大小咯。

我的音乐——34px，我的、淘歌、发现——30px，Muxx——34px，本地音乐——30px，泡沫、邓紫棋——24px

总之，方法是自己找到的，想办法解决问题，自己实践，比别人告诉你印象更深刻不是么？

一、尺寸及分辨率

Android界面尺寸：480*800、720*1280、1080*1920。[单位：像素]

Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。

二、界面基本组成元素

Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。

Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。

状态栏高度为：50px

导航栏高度为：96px

主菜单栏高度为：96px

内容区域高度为：1038px（1280-50-96-96=1038）

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px

Ps：写之前我翻了好多关于Android的界面尺寸教程，都没找到像iOS一样具体的规范，或许因为在安卓中这些控件的高度都能用程序自定义，都没有提到具体的尺寸数值，所以就自己找了Android的设计规范，尺寸都是自己在PS中量的。

Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格，这一风格最明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小

Android 上的字体为：Droidsans fallback，是谷歌自己的字体，与微软雅黑很像。

同样，百度用户体验的调查中，可以看出用户可接受的文字相应问题。

具体大小，还是那句话，找自己喜欢的app界面，手机截图后放进PS自己比对调节字体大小[切记，一定是高清截图哦]

附件 ：包含一些尺寸方面的干货，以及一些UI规范的源文件。

安卓/ios中，app设计时常见的尺寸有哪些

大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”

这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。

而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。

今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是plus版本，这种一般切图命名为@3X。

今天我们的主题就是探讨iOS的界面尺寸规范。

首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。

苹果6s 的尺寸750px * 1334px，6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。

来分析一下界面的尺寸规范：

首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。

而下边的底部栏（导航栏）高度则为98px。

注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？

☆ 关于图标部分

苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。

整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。

☆ 关于分割线部分

注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。

☆ 关于板块与板块之间

板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？

☆ 关于列表中的尺寸规范以及字体要求

☆ 关于左右间隔的安全区域

这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。

☆ 关于切换按钮的尺寸

☆ 关于字体

iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。

主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。

另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。