App 的设计从0到1(ios篇)

App 的设计从0到1(ios篇)

        一款 App 从无到有:项目立项启动----设计产品原型----设计效果图----进入开发阶段----进入测试阶段----测试将问题反馈给开发人员进行调试----多次测试确认无bug----提交市场、正式上线。

一、界面设计篇

1、设计稿尺寸

       在 iphone 6还没出的时候都是用 640 x 1136px 来做设计稿的,自从 iphone 6发布,所有的设计稿尺寸都以 750 x 1334px 来进行设计。

iphone 界面尺寸

App 的设计从0到1(ios篇)_第1张图片
iphone 界面设计尺寸

iphone 界面设计规范

App 的设计从0到1(ios篇)_第2张图片
iphone 界面设计规范

以 750 x 1334 作为设计稿标准尺寸的原由:

1、从中间尺寸向上或向下适配的时候界面调整的幅度最小,最方便适配;

2、大屏幕时代依然以小屏幕

3、设计安卓版本时只需做最小的设计调整,提升设计效率

ipad 设计规范

App 的设计从0到1(ios篇)_第3张图片
ipad 设计规范

2、图标设计规范

iPhone 图标尺寸

App 的设计从0到1(ios篇)_第4张图片
App 的设计从0到1(ios篇)_第5张图片

3、设计规范

经研究页面内左右距离最好为 24px,当然 30px 也可以,并没有明确的规定

App 的设计从0到1(ios篇)_第6张图片
文字、间距设计规范

字体大小

       字体大小范围:24-36px

       顶部操作栏文字大小:36px         左右两侧文字大小:32px

       标题文字大小:28-36px

        正文文字大小:26-30px

        Tab bar文字大小:20-22px

二、切图标注篇

1、切图


App 的设计从0到1(ios篇)_第7张图片
cutterman

2、标注工具

       PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。

       优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。

App 的设计从0到1(ios篇)_第8张图片
PxCook

       Parker 和 cutterman 是同一家的,Parker能够自动计算尺寸、距离、文字大小、阴影、描边圆角、行高等信息,并按照你的需要进行标注, 它极大节省你标注的时间,大幅度提升设计效率。

但是,parker并不是免费的,而是一款付费软件,需要60RMB

App 的设计从0到1(ios篇)_第9张图片
PxCook

3、界面切图

App 的设计从0到1(ios篇)_第10张图片
1倍、2倍、3倍切图

切图需要切几套

        理论上我们需要切三套图,是为了更好的适配

        实际工作中 ios 只需要切两套图:@2x 和 @3x

切图需要注意以下几点

        切图输出模式必须要有 png24 位、png8 位和 jpg 三种格式

        同一模块内,切图大小需保持一致

        切图输出大小必须保持为偶数

        为了减小包的大小,所有切图尽量压缩后再给开发

三、视觉还原篇

        我们都知道,无论设计师的标注稿多精确,开发出来的产品,多多少少都会有误差,专业来说就是视觉效果落地还原度,视觉还原度越高,与设计稿越接近,APP 就越精细;反之,就越差。

        所以,就需要我们在这个时候,去配合开发对 UI 进行调整,来更加的接近我们做的效果图了。

1、设计视觉调整文档

        视觉调整优化文档,要一目了然,需要注明和效果图不一样的地方是哪里,应该改成什么样,是 iOS 调整、Android 调整还是 h5 调整等,输出为 png 和 jpg 图片格式,最好输出为PDF 格式,开发看起来也方便,比如你写了一个颜色值,开发就可以直接复制了。

App 的设计从0到1(ios篇)_第11张图片
视觉调整文档举例

2、规范的视觉界面设计

        必须按照各平台的UI设计规范去规范的设计界面,用设计规范去知道开发,才是提高视觉还原的的基本前提

App 的设计从0到1(ios篇)_第12张图片

3、视觉 UI 控件的规范输出

        在绝大多数情况下,为了赶项目进度,都是界面先行,设计规范后出,所以要尽可能的保持界面设计和视觉规范同步进行

App 的设计从0到1(ios篇)_第13张图片
设计规范

        设计过程中,可以先输出基础控件元素规范,包括(颜色、文字、图标、蒙板、投影、按钮、输入框、或个别控件),规范是一个庞大而繁琐,极需耐心的工作;过程中注重每一个细节的精准与合理性。

4、规范的切图和精确的标注

        我们的切图和标注,是否规范和精确,直接影响视觉效果的还原度,所以切图和标注一定要做的细致,这样更加有利于提升还原度

5、多和开发沟通交流

四、上线准备篇

        当一款 App 开发完毕,测试通过,这时候就需要准备提交正式上线了,但是在上线之前,我们设计师还需要配合,做一些上线前的工作

1、应用图标

        因为需要的图标非常多,不可能全部加进去,只能选择最好的尺寸:


        1024×1024                             Retina APP Icon for APP Store(高清屏的APP Store)

        512×512                                   APP Icon for APP Store(普通屏幕的APP Store)

        120×1206                             以及以下的主屏幕尺寸

        180×180                               6 plus的主屏幕图标尺寸

        58×58                                   Settings on devices with retina display

        87×87                                       Settings on iPhone 6 Plus

        80×80                                   Spotlight on devices with retina display


注意:ios 系统可以自动把图片裁剪为圆角,所以提交图标的时候,你只需要提交正方的 png 格式即可

        我们来看看苹果官方的APP icon规范:

App 的设计从0到1(ios篇)_第14张图片
苹果图标规范

2、启动页

        我们需要提供4种尺寸给的开发工程师:


        640x960px                              iPhone 4/4s

        640x1136px                             iPhone 5/5s/5c/SE

        750x1334px                             iPhone 6/6S/7

        1242x2208px                         iPhone 6 plus/6S plus/7 plus

        2208x1242px                          iPhone 6 plus/6S plus/7 plus的横屏尺寸,

       如果我们的APP支持横屏模式,你就需要做一张横屏的启动页


注意:启动页面一定要是 png 格式的,建议给开发之前将图片压缩一下

3、商店页

App 的设计从0到1(ios篇)_第15张图片
苹果官方上线提交页面


App 的设计从0到1(ios篇)_第16张图片
添加商店页

        这里就是需要添加商店页的地方,商店页最多为5张,格式为 png 或 jpg 文件格式,并且还支持视频格式

商店页尺寸要求

         ios:750 X 1334px

        安卓:480 X 854px            720 X 1280px


参考自:人人都是产品经理 - @U妹儿----《一款APP设计的从0到1之:iOS篇(精华版)

你可能感兴趣的:(App 的设计从0到1(ios篇))