小明接到设计师老师的通知，要设计一个APP的首页。这个APP已经确定好功能定位、流程图，已经有了页面的原型图。设计师告诉小明只需要按照IOS二倍图的规范，设计UI界面，并且给小明几张同类型APP首页作为参考。
3.1.2任务分析
APP（应用程序，Application的缩写）一般指手机软件。目前有三大流行的手机操作系统，分别是苹果公司的IOS，谷歌公司的安卓系统，微软的WPhone。在UI设计公司，设计师设计APP手机界面，一般按照IOS的二倍图的尺寸来设计，一稿适配。要求的设计尺寸是750*1334像素。UI设计不同于艺术设计，艺术是感性的，UI设计是理性的，艺术所表达的是设计者的个人意识，而设计师是为了解决用户具体的问题。原型图如图3-1“原型图”：
;APP首页参考图片如图3-2首页1，图3-3首页2，图3-4首页3。;3.1.3任务实施
步骤一：按快捷键Ctrl+K，打开“首选项”对话框，在“常规”中勾选“用滚轮缩放”，如图3-5“首选项-常规”，
;在“单位与标尺”中，选择，“标尺”为“像素”，文字为“像素”，“屏幕分辨率”为“72像素/英寸”，如图3-6首选项-单位与标尺。
;步骤二：新建文件750*1334px，分辨率72像素/英寸，背景白色。这是按照IOS二倍图的尺寸来设计的，如图3-8新建文件所示。
;表3-1IOS手机系统界面设计尺寸
（1）状态栏：显示在屏幕的最上方，栏中包含信号、运营商、电量等信息，如图3-8所示。在IOS二倍图中高度为40px.当运行游戏程序或者全屏观看媒体文件时，状态栏会自动隐藏。
;（2）导航栏：显示当前界面的标题信息，包含相应的功能或者页面间的跳转按钮。在IOS二倍图中，高度为88px。
（3）标签栏：是页面的主菜单，用于切换一页面，提供整个应用的分类内容的快速跳转。在IOS二倍图中高度为98px。
IOS系统各机型的栏高如表3-2IOS系统各分辨率下的栏高所示。
;表3-2IOS系统各分辨率下的栏高
;步骤四：使用“绘制形状”工具绘制宽750px，高128的矩形，填充为白色，描边无，作为状态栏和导航栏。在素材文件中拖入状态栏的电源信号等信息。
步骤五：制作导航栏中的信息。结果如图3-8状态栏、导航栏所示。
;3-9切换字符和段落面板
;在APP界面设计中，状态栏一般和导航栏背景颜色一致，并且和内容区域需要区分开，目前流行的方法一：在导航栏下边缘绘制一条一像素高的浅灰色细线。方法二：给状态栏的矩形背景加图层样式“投影”。打开“图层样式”对话框，如图3-10图层样式对话框，选择“投影”，“不透明度”选择20%，“角度”选择90度，不勾选“使用全局光”，距离选择2像素，扩展为0，大小为4像素，或者“距离”和“大小”参数可以更小，不能过大。
;步骤六：制作标签栏。
绘制宽750像素，高98像素的矩形作为标签栏的背景，填充为白色，描边无。拖入需要的图标，输入文字。标签栏是手机APP中最重要的分类，是一级菜单。设计手机APP界面要考虑到人们的操作习惯，标签栏放置之所以放置在最下端，是因为方便单手拇指操作。
注意：要按照字号和图标的大小计算高度，设置水平方向参考线。
标签栏所使用的字号是整个页面中最小的，一般使用20像素，最小使用18像素。字体选择“苹方”或者“黑体”等无衬线字体，不能使用微软雅黑。
标签栏的图标大小设置在40到50像素之间，44像素左右是比较常用的数值。并且在正常状态下正负形图标不能混用。如果正常态使用负形图标，那么当前图标可以使用正形，或者使用主色来表示图标的选中状态。
;在IOS系统中的APP设计中，标签栏最多可以放置五个图标，有时候放置四个或者三个，图标之间的距离要相同，因此根据图标的大小和个数，一级图标距离边界的距离，计算好数值，设置垂直方向的参考线。
标签栏和内容区域需要区分开，目前流行的方法一：在标签栏上边缘绘制一条一像素高的浅灰色细线。方法二：给标签栏的矩形背景加图层样式“投影”。打开“图层样式”对话框，如图3-11图层样式对话框，选择“投影”