小白学习APP界面设计，从设计APP首页开始

今天25学堂跟大家分享一套非常完整的而且快速上手的APP界面设计流程。开始设计APP界面的之前，首先你的会一点UI设计。或者说是对PS软件使用有一定的基础。

至于你还没有来得及去看下APP设计规范，也没关系，通过这个系列教程，可以让你快速的理解和操作APP界面设计。

25学堂就从从PS文档的建立，设计稿出图，标注，切片资源输出的各个方面写出来，包括切片命名和一些切片技巧分享给大家。

第一步：PS文档的建立。

据到今天为止，iphone手机常用的有iphone4、iphone5、iphone6和iphone6 plus系列。

25学堂跟大家讲解的APP设计流程的界面尺寸是iphone6 的尺寸 【全部的APP设计尺寸】

尺寸大小：750*1334    

iphone6  目前是我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问我的设计总监(从业12年)应该用什么尺寸设计，他是就用IP6的尺寸吧，好适配，切出来就是@2x了，上下都能照顾到。如下图：

第二步：APP首页的绘制和构建

一个完整的APP界面包括状态栏、导航栏、内容视图和标签栏。

文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计师可以养成更完美的工作习惯。

上下的参考线很容易设置，因为是根据IPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。

上图当中的首页视图区域是设计师自由发挥的区域。这里25学堂绘制了一个banner区域、主题导航区域和其他区域三个部分。

在第一屏幕有限空间里面 25学堂的老谭同学建议大家放置3到3.5个重要的栏目即可。

操作系统的规范课外阅读：在ios系统当中总共包含7个栏：点击查看详细的解读

（1）状态栏如何来绘制：

一般新手设计师要去绘制它，其实不用了。为了教大家快速上手设计APP界面。

直接可以挪用设计大神们已经设计好的状态栏。比如从APP设计模板当中去获取。

在这里，25学堂已经分享了一个状态栏的UI控件。从百度网盘下载

（2）导航栏的UI绘制

导航的布局一般分为：左边图标  ——中间主体文字（字体大小34-38px）—— 右边图标

如果你还没有独立绘制图标形状的能力，可以从网上下载相应的图标素材下来使用。

比如：25学堂图标素材库  和  阿里巴巴矢量图标字体库或者是你自己收集的那些常用APP图标素材库当中挑选出来，拖到到我们刚刚建立的APP界面PSD当中。

从这里开始，我们就要反复多效率的使用ps里面的矩形工具。如下图：

使用矩形工具的所有工具搭配我们收集的图标素材，组合成我们想要表达啊APP图标效果。

这里就不多讲啦，各位可以去尝试下各种图标风格。

如下图的图标风格。

（3）主体视图的UI绘制。

这块只要你找准一个跟你需要绘制的同行或类似的APP来临摹即可。比如下面的APP首页设计。很简单的吧！ 就是几个图标和一个背景图。 作为一名APP设计新手，你可以完成临摹别人设计好的APP效果图。

当然你可以先从 绘制首页主体框架之后，再去绘制里面的细节模块。

你可以   从整理布局到分模块设计的设计理念进行绘制。

一般来说，如果前期交互原型和产品风格确定了，一天可以出八到九个页面是没有问题的，一个项目如果50多个界面，大概一周就可以完成。 至于临摹慢的问题，APP设计其实有规范，包括不同模块的字号，大小。

速度跟不上，一是规范不熟，二是做的少，临摹APP其实没必要去分毫不差，重点在视觉效果的协调，即使是已经上线的APP,它的设计本身也可能存在问题，所以临摹要灵活！

第四部分：就是绘制标签栏的UI。

一般情况下，APP标签栏最多放置4-5个菜单栏目。

标签栏的UI组成也很简单，先等分划分区域，每块区域是图标+文字的组合。

最后，25学堂奉上一款APP设计视频教程。对于UI设计不是很熟练的小白可以照着视频的步骤开始设计吧！

以上是25学堂的原创文章。关于APP设计的第一篇文章。下面我们继续跟大家分享APP设计。