APP界面设计规范一（ios版）

转

 

草莓部落 

 ：https://www.ui.cn/detail/297025.html

好东西不能藏着、掖着，一定要告诉大家，与大家一起分享。本文纯属个人收藏整理加之经验之谈，不足之处希望大家指出，希望与大家共同进步！

 

前言

       对于刚入行的UI设计师，往往会遇到一个基础问题，就是设计移动APP时，使用什么尺寸或者用哪种屏幕的尺寸是最适当的？有的同学花了很长时间也不知道怎么做，为了解决这个问题，今天小编为大家梳理一下ios移动端设计尺寸规范。

 

       Ps:Android端的小伙伴不要着急，下次小编整理Android设计规范，大家静静等待哦！

 

       我本身是一名GUI设计师，所以我只站在设计师的角度去把自己所学所了解的东西告诉大家。可能公司不同，大家设计习惯不尽相同，但是终究还是能有些帮助。依旧声明：这里写的只是我个人的使用习惯，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用~

 

 

开始介绍之前先帮大家梳理一下本文内容，方便各位亲们更好的掌握并了解本文：

 

一、ios全部界面尺寸及规范

 

下图为是iphone全部型号对应的尺寸：

二、尺寸总结

 

2.1启动图标尺寸输出列表（单位：px）

 

1024x1024    180x180    120x120    114x114    87x87    58x58    57x57    29x29

 

2.2引导页图片尺寸输出列表（个别情况要去掉状态栏高度）

 

Iphone1/2/3（@1x）:640x960px（640x920px）

iphone4/4s（@2x）:640x960px（640x920px）

iphone5/5c/5s/SE（@2x）:640x1136px（640x1096px）

iphone6/7/6s/7s（@2x）:750x1334px（750x1294px）

iphone6 plus/7 plus/6s plus/7s plus（@3x）:1242x2208（1242x2148px）

iphone6 plus/7 plus/6s plus/7s plus横屏（@3x）:2208x1242

 

三、按钮

 

3.1图标按钮

 

      标签栏中的按钮icon应该有两种状态：默认状态下的1或者1.5pt笔画宽度的轮廓样式，以及纯色填充的活跃状态。

 

 

注：

     不要再按钮上添加任何额外的效果，比如阴影、渐变等。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状作为遮罩。

     每个互动的元素需要有充足的空间，从而让用户容易操作这些内容和控件；

     普通屏幕中所有能点击的按钮/图片，最小可点击区域为：44x44 px；

     Retia屏幕中所有能点击的按钮/图片，最小可点击区域为：88x88px（实在小的图标可以且上空白像素以满足需求）；

 

3.2按钮状态及样式

 

     按钮状态主要分为普通（normal）、选中（selected）、按下（highlighted）、不可点（disabled）四种，大部分按钮都包含了这4种状态。

 

     按钮样式包括三种：第一种是直角；第二种是圆角（圆角为8px）；第三种是全圆角。

 

四、常用设计元素

 

4.1状态栏(Status bar)

 

      包含了最基本的系统信息，例如：电量、时间、运营商、电池状态等，它在视觉上是与导航栏一起的，并且使用相同的背景填充。

 

 

4.2导航栏(Navigationbar)

 

      导航栏通常在屏幕的顶部，状态栏下方。默认情况下，导航栏颜色是半透明的，也可以是纯色的、渐变的、或者是自定义的位图形式，在长页面中导航栏下面还有模糊的背景。

 

 

4.3工具栏(Tool bar)

 

      工具栏通常在屏幕的下方，包含用于管理或者操作当前视图中内容的一些操作；和导航栏类似，工具栏的背景填充也能调整，默认情况下工具栏本身是半透明的，在其下方还有模糊的视图内容。

 

 

      当一个特定视图要求三个以上主要活动，但放在导航栏上又显得凌乱时，建议可以使用工具栏（作参考）。

 

4.4搜索栏(Search bar)

 

      搜索栏默认有两种风格：突出的和最小化的。两种类型的搜索栏在功能上是一样的。

 

      1.只要用户没有输入文本，搜索栏中会展示占位符文本。

      2.键入搜索项目后，占位符消失，一个清晰的删除按钮会出现在搜索栏的右侧。

搜索栏可以利用一个提示--一个短句来介绍搜索的上下文环境。比如"输入标签名、用户名"

 

 

4.5标签栏(Tab bar)

 

      标签栏通常在屏幕的底部。默认情况下，导航栏颜色是略半透明的，在长页面中标签栏下面也有模糊的背景。

 

 

      一般iphone上最多展示5个标签，一旦标签数量超过了可容纳的最大数量，更多的标签将隐藏在更多标签中，并且有一个选项可以重新排列标签的顺序

 

4.6视图(view）

 

（a）表视图（Table view）

 

      表视图以单列或者多列形式展示少数或者多个列表风格的信息，并有能将内容分组的选项。根据你展示的数据类型，通常可使用两种基本的表视图风格：

 

    无格式的：

 

分组样式：

 

 

      分组表视图允许用户对内容进行分组。每个分组可以有页眉（最佳用法是描述类组的上下文环境）和页脚（适用于帮助文本等）。一个分组的表视图至少需要包含一个类组，并且每个类组至少要包含一行内容。

      对于以上两种表视图类型，可用几种风格来展示数据，以方便用户快速扫描、阅读和适当调整内容。

 

默认：

 

 

默认的表视图有一个居左对齐的可选图片和标题。

 

带有副标题:

 

在每行标题下展示小字号的副标题，适用于进一步的解释说明或者简短描述。

 

带有数值:

 

      带数值表类型可展示与行标题相关的特定数值。类似默认的类型，每行都有一个居左对齐的图片和标题。在该类型中，数值居右对齐，通常使用比标题淡一点的文本颜色。

 

（b）活动视图（Activity view）

 

      活动视图用以展示特定的任务。这些任务可以是系统默认的任务，比如通过可用选项分享内容，或者是完全自定义的活动。当为自定义任务按钮设计icon时，你应当遵从活跃状态和栏按钮icon的一些设计指南--纯色填充、无任何效果、以及在一个透明背景上。

 

      活动：活动页面用来执行可用操作列表中的单项操作，并且强迫用户确认或者取消某个活动。

      在竖屏模式下（以及尺寸比较小的横屏模式下），活动以按钮列表形式滑入，并呆在屏幕的底部。这种情况下，活动列表应该有一个取消按钮来关闭视图和执行任何列表中的Action。

 

（c）提醒视图(Alert view)

 

提醒视图的目的是用来通知用户一些关键性的信息，并有选择地迫使用户做出选择。

 

      提醒视图通常包含一个标题文本（最好不要超过一行）、一个（纯信息提醒，比如"好"）或者两个按钮（要求用户做出决定，比如"取消"或"好"）。

 

（d）编辑菜单（Edit menu）

 

      用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作，但是编辑菜单的视觉外观是设定好的，不能重新配置，除非你设计一个完全自定义的编辑菜单。

 

（e）弹出视图（Popovers）

 

      当某项特定操作要求多个用户输入才能继续进行时弹出视图就非常有用了。在水平方向上，弹出视图可通过箭头指向展示下方相关的控件（比如按钮）。弹出控件的背景透明度稍有降低，可展示其下方的模糊内容，像iOS 7以后其他很多UI元素一样。

      弹出视图是一种非常强大的临时视图，可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加，其窗口也能滚动展示。

 

五、字体

 

5.1字体的选择

 

下面是主流字体设计方法：

 

5.2字体的大小

 

      APP内的文字大小设置，与所在页面、所在层级、所表达内容属性密切相关，以为APP本身层级、结构、属性很复杂，所以字体大小的设置长长会将设计师搞的晕头转向，最终使得APP页面中的字体不清晰、不统一、不美观。

今天小编整理了一下不同尺寸下不同功能字体大小，如下图所示：

5.3UI规范命名常用字

 

normal（正常）、pressed（按下）、selected（选中）、disabled（禁用）、visited（已访问）、hover（悬停）、btn（按钮）、icon（图标）、sign（标记）、list（列表）、menu（菜单）、view（视图）、panel（面板）、sheet（薄板）、bar（栏）、statusbar（状态栏）、navbar（导航栏）、tabbar（标签栏）、toolbar（工具栏）、switch（切换开关）、slider（滑动器）、radio（单选框）、checkbox（复选框）、bg（背景）、mask（蒙版/遮罩）

 

六、工作流程

 

6.1 项目流程

 

（1）需求沟通和评估

 

      完善的公司会把项目相关人员（产品、设计、开发、后台、测试、运营）聚集起来，产品经理会把产品详细的用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，明确此款app要实现的效果，属于哪个类型的app，逻辑跳转演示一下；之后评估项目用时，各部门协调，项目启动；

 

（2）设计用户界面，创意策划

 

      项目正式启动后各个部门进行项目的碰头会议，设计部门开始设计UI（产品界面）和UE（用户体验），针对产品开展创意设计，形成初步的效果图；

 

（3）DEMO展示、代码开发

 

      设计部门最终确认高保真视觉图，并且完成标注、切图，工程师开始进入研发阶段；

 

（4）测试上线

 

      经过工程师的一段时间研发，产品基本成型，正式开始测试，测试包括对App内容测试、性能测试、功能测试、视觉测试。测试合格，确认没有bug后开始打包提交上线；

 

（5）推广维护

 

      成功上线后的app就可以通过企业自身的运营推广让app成功脱颖而出，在运营推广中不断与时俱进，维护更新，让APP永保活力。

 

            具体的我们可以看下这个APP开发标准流程信息图：

                                                    

6.2 UI项目文件规范

 

（a）项目立项，归档整理

俗话说：不以规矩不能成方圆，好的规矩和习惯会帮助我们更好地完成工作，并且节约了我们的时间，方便我们后期对自己过往的作品进行整理。

（b）设计稿

一般设计稿都是以iphone6（750*1334）作为基准尺寸来进行设计，原因如下：

1.从中间尺寸向上/向下适配时，界面调整的幅度最小，750px适配到640px和1242px偏差不会太大；

2.iphone6 plus分辨率为1242*2208px（即iphone6的1.5倍），很多情况下这两种尺寸可以用1.5倍直接等比适配；

3.大屏时代依然以iPhone 5/iPhone 5s小尺寸为设计基准，显然不合时宜，设计师的视角、思路都会被小屏幕束缚；

综上所述，iphone中750*1334px最适合做基准尺寸。

 

（c）页面标注

1.标注神器：Mark Man、Parker

2.图标模块的宽高，彼此之间的间距；

3.导航、注释、文章内容、注释等的文字大小及颜色；

4.背景颜色、透明度；

5.按钮在不同状态下的颜色；

 

（d）切片资源输出

1.切图神器：cutterman

2.所有切图尺寸均为偶数，格式为png_24；

3.考虑最小点击范围88*88px，如果按钮较小，周围空出来切88*88px的大小；

4.切片命名方法：

   iphone1/2/3：模块_类别_功能_状态@1x.png

   iphone4/5/6/7：模块_类别_功能_状态@2x.png

   iphone6 plus/6s plus/7 plus/7s plus：模块_类别_功能_状态@3x.png

   装换关系：@1x（非Retina屏）：@2x：@3x=1:2:3

   举例：home_nav_menu_pre@2x.png

5.启动页需要另外命名

   iphone1/2/3：Default.png

   iphone4/4s：Default@2x  .png

   Iphone5/SE： Default-568h@2x.png

   Iphone6/6s： LaunchImage-800-667h@2x.png

   Iphone6 plus/6s plus： LaunchImage-800-Portrait-736h@3x.png