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

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

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

application_1x

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首页的绘制和构建

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

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

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

APP首页设计稿

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

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

 

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

ios UI控件

 

 

(1)状态栏如何来绘制:

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

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

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

 

(2)导航栏的UI绘制

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

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

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

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

开始学习PS矩形工具

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

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

如下图的图标风格。

app设计

(3)主体视图的UI绘制。

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

APP设计立体效果图

阿里巴巴APP设计

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

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

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

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

 

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

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

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

 

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

14032141

最近APP设计群里,很多新入门的APP设计者,都在想求救APP设计大神来指导或者开APP设计公开课。 于是,25学堂的小编花费了一些心思,在网上收集了这么一套完整的APP界面设计制作视频教程与大家分享。

绘制完成了首页,大家一定的要把APPUI界面放到真机上面测试下。也可以边绘制边到真机上看下UI效果。

1、移动设备中实时预览APP设计效果图的2款国产神器

2、快速在移动终端上预览APP界面设计效果图的方法

确定好APP首页风格之后,就要另存为一个PSD版本,或者把APP首页的所有图层放到一个文件夹里面。

才能继续开始下面的APP列表页面的UI绘制。 这个时候,APP的顶部和底部是通用的。

appmei2

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

每天更新,
全站高品质素材免费下载!