app导航栏图标（浅谈iOS APP设计规范-按照iphone6尺寸）

本文目录

• 浅谈iOS APP设计规范-按照iphone6尺寸
• 图标规范标准（IOS/Android）
• 极米如何将app添加到导航栏么
• iOS App图标和启动画面尺寸
• 东方财富app怎么删除底部导航栏图标
• 小红书导航栏可以自定义吗
• APP导航常用的四种方式

浅谈iOS APP设计规范-按照iphone6尺寸

现在iOS app 的尺寸也变多了，要适配到各种尺寸需要选择一个折中的尺寸来向上向下适配，以前一般用的是iphone5的尺寸，iPhone6 plus出现后，iPhone6尺寸成了大多数设计师的选择。

一、iPhone6的界面布局是： 屏幕是4.7英寸的，设计稿的大小750x1334px

☆ 状态栏(status bar)：就是电量条，其高度为：40px； ☆ 导航栏(navigation)：就是顶部条，其高度为：88px； ☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px； ☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px

二、关于iPhone6的图标的尺寸是：

☆导航栏的图标高度为44px（绝大部分功能按钮）左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。 ☆关闭按钮34px*34px，返回按钮26px，简单笔画图标40px。

三、常用的可点击高度-登陆框、密码框、功能列表等，统一设成88px。

四、搜索栏、输入框、评论框、地址框的高度，在iPhone6的原型图上，统一设成58px或60px。

五、在iPhone6设计稿中，界面元素之间的常用距离。

常用间距-亲密距离：20px（与边缘距离）；疏远距离：30px； 其它距离-10px，44px等； 区块间隔：30-40px。 A、疏远距离：比如，改图标距离手机屏幕最左边的距离； B、亲密距离：比如，左边图标与右边文字之间的距离。

六、黑白灰颜色常用的数值是：

① 文字黑色#333 ② 文字深灰色#666 ③ 文字浅灰色#999 ④ 边框浅灰色#e5e5e5 ⑤ 背景淡灰色#f2f2f2 ⑥ 按钮背景纯白色#ffffff

一、注意事项

1、在每个项目设计中只使用1-2个字体样式，而在品牌字有明确的规范的情况下，只需要一种字体贯穿全文，通过对字体放大来强调重点文案。字体用的太多，越显得不够专业。 2、不同的样式的字体，形状或系列最好相同，保证字体风格的一致性。 3、字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字选用的规则

在不同平台的界面设计中规范的字体会有不同，像移动界面的设计就会有固定的字体样式，网页中会有常用的几个字体。 以下是在72像素/英寸下的规范

移动端常规字体 IOS:常选择华文黑体或者冬青黑体，尤其是冬青黑体效果最好， 方正兰亭黑和方正黑体简 、方正中等线也运用的比较多。

三、字体的大小

1、导航栏的文字大小是36-38px； 2、标题字号：32px ，34px； 3、内容区域的正文文字大小是：28px，30px； 4、辅助性文字：20px ， 24px，26px； 5、标签栏（或主菜单栏）的图标下方的文字大小为20px； 6、终极原则：不大于所在要件高度的一半; 7、行间距：字号的1.2-1.5倍。 下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小：

图标规范标准（IOS/Android）

IOS篇 本小节中ios图标标准均以iPhone6为例 1.APP图标            APP图标指应用图标，图标尺寸为120x120，如果是游戏类应用，这个图标也会被用在Game Center中。由于IOS应用图标是由于系统统一切圆角，所以设计的时候直接出方形图标即可。设计时可根据需要作出圆角供展示使用。 尺寸规格： 图标尺寸：57x57，圆角10；图标尺寸：114x114， 圆角20；图标尺寸：120x120，圆角22；图标尺寸：114x114，圆角20；图标尺寸：180180，圆角尺寸34；图标尺寸：512x512，圆角尺寸90；图标尺寸：1024x1024,圆角180. 2.APP Store图标 APP Store图标指上传至应用商店的应用图标，尺寸为1024x1024.为了吸引用户可增加更多的设计细节。不过基于效率考虑，一般与APP图标的设计保持一致。此时的图标需要设计圆角，圆角像素为160。 3.标签栏导航图标 标签栏导航图标指底部标签栏上的图标，图标设计尺寸为50x50。 4.导航栏图标 导航栏图标指分布导航栏上的功能图标，图标设计尺寸为44x44 5.工具栏图标 工具栏图标指底部工具栏上的功能图标，图标设计尺寸为44x44 6.设置图标 设置图标指在列表式的表格视图中左侧功能图标，图标设计尺寸为58x58 7.Web Clip图标 Web Clip图标指如果你有Web小程序或者网站，可以制定一个小图标。用户可以把它直接放在桌子上，用户可单击图标直接访问网页内容。图标设计尺寸为120x120。 Android篇 为了简化设计并且兼容更多的手机屏幕，安卓系统平台对屏幕进行了区分。按屏幕像素密度划分为低密度屏幕（LHDPI）、中低密度屏幕（MHDPI）、高低密度屏幕（XHDPI）、和超超高低密度屏幕（XXHDPI）。 密度之间的关系为3:4:6:8:12.使用这些比例，通过简单的计算，我们就可以适配出不同版本的位图，以供开发使用。 安卓尺寸标准： 75x75对应LDPI显示屏；100x100对应MDPI显示屏；150x150对应HDPI显示屏；200x200对应XHDPI显示屏；300x300对应XXHDPI显示屏。 特别提示：这些尺寸要熟练的运用到工作当中，希望大家多积累。 文章更新的速度确实有些慢了，我会加以改正。还望大家多多关注。 ’

极米如何将app添加到导航栏么

1、首先在投影主页面，短按遥控的【菜单键】，即可呼出快捷菜单栏。2、其次选择【导航栏】进入调整页面后，点击右上方有红色图标的栏目，即可移除，有绿色图标的栏目即可添加回主页面显示。3、然后在【已添加导航】项中，长按OK选中栏目，左右键可以改变顺序设置完成后，按返回键即自动保存。

iOS App图标和启动画面尺寸

一. App Icon 在设计iOS App Icon时，设计师不需要切圆角，直接矩形就可以。 下面是App Icon需要的尺寸和命名（尺寸和命名不做解释）： 尺寸 命名 1.57x57 px Icon 2.114x114 px Icon@2x 3.40x40 px Icon-40 4.80x80 px Icon-40@2x 5.120x120 px Icon-40@3x 6.120x120 px Icon-60@2x 7.180x180 px Icon-60@3x 8.72x72 px Icon-72 9.144x144 px Icon-72@2x 10.76x76 px Icon-76 11.152x152 px Icon-76@2x 12.29x29 px Icon-Small 13.58x58 px Icon-Small@2x 14.87x87 px Icon-Small@3x 15.50x50 px Icon-Small-50 16.100x100 px Icon-Small-50@2x 二. 启动页 下面是启动页需要的尺寸和命名（尺寸和命名不做解释）： 尺寸 命名 1.320x480 px Default 2.640x960 px Default@2x 3.640x1136 px Default-568h@2x 4.750x1334 px LaunchImage-800-667h@2x 5.2208x1242 px LaunchImage-800-Landscape-736h@3x 6.1242x2208 px LaunchImage-800-Portrait-736h@3x 三. App内图标 我会把App内的图标分成四类进行规范设计：第一类顶部栏内的图标；第二类底部导航栏内的图标；第三类内容区域的图标；第四类弹窗、浮层内的图标。 1.顶部栏内的图标 在设计顶部栏内的图标时应注意，图标的高度不能超过顶部栏高度的一半。以750x1334 px的尺寸为例，顶部栏高度为88 px，图标不能超过顶部栏的一半就是44 px， 但为了页面的美观感与整体性，图标的高度最好与顶部栏标题的字高度保持一直，一般图标的高度控制在32-36 px左右。 2.底部导航栏内的图标 底部导航栏内不仅只有图标，一般每个图标下都会有对应的文字，这种情况就比较复杂，因为你需要把图标距上间距、图标与文字间距、文字距下间距等因素考虑进去。图标与文字上下间距一般控制在20 px左右，文字大小在20 px左右，图标与文字间距控制在14 px范围内，最终图标的大小在40-44 px左右。 和顶部栏的原则一样，底部导航栏的图标不能超过其高度的一半，若底部导航栏高度为98 px，图标不要超过48 px， 再加上底部导航栏的文字48 px高的图标也不太合适，所以以我的经验之谈，最佳高度是44 px。 3.内容区域的图标 其实仔细研究就会发现，App里的图标分为两种，一种是可点击的，一种是起修饰作用的不能点击的。可点击的图标往往比起修饰作用的图标大。我在做内容区域的图标时为了使整体的App看上去比较统一，图标的大小范围和顶部栏、底部导航栏的图标上下不超过2-4个像素，基本和文字的高度一致。可点击图标范围在32-36 px左右， 不可点击图标范围在24-28 px左右。 上述内容都是我在做App时通过自己的经验和精品的分析得来的，希望会帮助到你。但是有时个别情况也要个别分析，要活学活用。 @2x 为：for iPhone 6/5s/5/4s/4 @3x为：for iPhone6 plus IOS各型号尺寸 APPIcon图片 启动图片设置 图片命名规范 一个简单的命名规范，作用就不说了～～～～ 命名的组成部分： 逻辑板块（可由Tabbar来判断，如果我：My），定位到哪一个页面(personMessage)，哪一个功能描述（比如说设置setting），状态（选中，高亮，不可使用，正常状态） 例：my_personMessage_setting_s 表示个人中心选项卡中的个人信息中的设置图标的选中状态。 除此之外，就是对于一下公共的图片： 这样效果显而易见了，当然在设计目录结构的时候也一定按照相应的层次结构进行设计，千万不要偷懒，放在同一级目录里，版本迭代多了后，你会哭的。 ***隐藏网址***

东方财富app怎么删除底部导航栏图标

通过“桌面管理”功能进行操作删除即可。通过查询东方财富app官网得知，东方财富app可通过“桌面管理”功能进行操作删除底部导航栏图标。

小红书导航栏可以自定义吗

小红书导航栏可以自定义，方法如下。1、打开进入“小红书”APP页面→点击菜单中的加号开始发布。2、找到一张合适图片后，点击“下一步”，点击“标签图标”搜索，自定义标签图标内容。3、完成后即可导航栏自定义。

APP导航常用的四种方式

各种APP导航的范例： 请戳这里 一、标签式导航 标签式导航是苹果ios可以自动生成一种导航控件，开发起来方便。所以这种经典的底部导航栏受到绝大数app设计师的青睐。这种设计符合手机端用户单手操作的习惯，包括新版微信，淘宝，支付宝，百度手机等都采用的这一方式。这个APP导航方式占大多数。 试用项：入口选项数目不多，且用户需要在选项见频繁切换执行多任务。 注意项：这种模式不适合太过复杂和不稳定的结构。 一般为四个导航按钮最为普遍，最方便操作的是第二和第三个按。受制于屏幕宽度的限制，通常采用标签式导航设计方式，栏目的个数是有限的，不能超过5个。4个为最佳选择。过多的话明显不利于用户的切换。从界面布局来看，也降低体验友好度。 目前也有部分APP在标签式导航的基础上，衍生出了一种交互比较好的弹出导航菜单。 如图： 这种方式应该说应用了web端的元素和使用方式，相当于有了二级菜单。很不错的尝试。如果导航菜单很多，除了下面我们说到的抽屉式APP导航设计以外，这种弹出式的导航菜单何尝不是一种选择。 二、抽屉式导航 抽屉式导航追求核心内容的突出，弱化导航界面，常见于一些信息流产品（知乎、path、facebook等）。抽屉式导航在形式上一般位于当前界面的后方，通过左上角的按钮或手势滑动呼出。由于隐藏在屏幕在外，所以导航界面的空间较大，为可扩展性和个性化带来了更多可能。由于导航默认是隐藏的，在选择后需要有明确的提示来告知用户的当前位置。 功能模块化和轻便化。 适用项：以当前内容为核心展示的应用。 注意项：隐藏的导航内容，需要更好的方式调出（如手势） 。 抽屉式滑动导航也分为2种导航布局， 第一种：列表形式如下图。 第二种：图标卡片式布局（ios7侧边导航设计）三、桌面式导航 桌面式导航，是一种类似于手机桌面各个应用入口的导航方式。一般是将全应用信息进行独立分类，做到信息互斥，类别各自有独立入口，内容间基本并列。用户进入到一个入口之后，只处理与此入口相关的内容，如果要跳转至其他入口，必须回到入口汇总界面。 这种导航方式在工具类app中比较适用，每个工具都有一套独立的体系。带来的问题是用户需要更多的操作路径，且不适合在多任务中使用。 适用项：分类清晰，入口独立且固定。 注意项：不适合在交叉类别中使用。 四、移动APP导航之点聚式导航 点聚式导航最早来自于应用path，它将用户最频繁使用的多个核心功能点汇聚在主界面中显示，方便用户随时呼出使用，它不同于传统标签栏那样占据界面最下方一栏，而是通过一个点的方式汇聚这些功能的入口。 由于点聚式导航所占用的空间较小，所以它常出现在一些主要流程界面中，作为全局导航使用。 适用项：需要提取最核心的几个点来展示产品特性。 注意项：汇聚后将使部分导航隐藏，需要良好的引导。 end