参与到一个项目中，我们不单单只是做一个图那么简单，而是要把自己的工作对接到整个项目流程中去。

　　

 

　　第一次写稿，大家可以多交流。做UI和交互两年多，在UI设计中，很多开始学UI尤其是自学UI的同事都会问这么一个问题，什么是UI设计?

　　百度百科解释为：UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。

　　但实际中很多从业UI设计只做了界面美化的这一部分。所有有时候也弱化了UI设计范围。因此我今天和大家交流的就是在APP视觉设计这块的工作流程。参与到一个项目中，我们不单单只是做一个图那么简单，而是要把自己的工作对接到整个项目流程中去。

　　第一步

　　我们要知道一个项目中有那些成员，知道你的上游和下游是谁，需要输入和输出那些东西?我们需要交互设计师或者产品经理手中拿到：

　　用户任务

　　页面流程

　　低保真原型图

　　确认并无任何意见，开始着手app视觉设计。有些产品或者交互只会给一个低保真原型图，但尽量要掌握更多的流程和用户信息，可以在设计中通过页面更好的引导用户。

　　第二步

　　设计环节，设计环节主要说一些规格，具体的如何设计页面样式，相信每个人都有自己的风格和想法。再设计中要注重平台插件样式和平台风格，这样更容易赢得用户信赖。

　　新建640x1136xp的画布大小，颜色模式为rgb8，像素率为72(一般设计稿按苹果5s的大小尺寸)

　　确定符合企业品牌的app主色调和材质

　　设计图标

　　设计整个APP页面，注意，细节有误丢失?按钮点击状态、反馈、缺失状态、字数超出、加载中、未加载态、加载失败态，是否都提供了?

　　页面标注

　　切图

　　第三步

　　设计环节的交付物，这个环节对UI新手来说是一个比较短板的环节，像做平面设计一样吧界面设计好了，但该怎么交给开发，让开发实现在产品上去，就难道了一大片。

　　首先我们的知道iOS和Android开发需要的设计交付物至少要有：高保真UI图(设计稿)，标注，切图。并且知道这些交付物对开发有什么样的作用。

　　高保真UI图：

　　高保真UI图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。所以不需要出IOS和Android两套样子一样只有大小不一样的图。

　　标注和切图：

　　标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真UI图的摆放方式做到界面上。

　　那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。如何在一套iOS的高保真UI图上做出两套标注和切图呢?

　　首先ios设计的像素尺寸是640×960/1136(iphone4-5s的尺寸)

　　Android主流的hdpi模式下的像素尺寸是480×800,

　　可以得出他们的换算关系是，iOS@2x像素尺寸*75%=Android的hdpi像素尺寸。(480÷640=0.75宽度比)

　　1>ios尺寸

　　iphone一二三代的：320x480px

　　@2x iphone4-4s：640x960px iphone 5，5c，5s ：640x1136px

　　iphone6：750×1334 px

　　@3x iphone6 puls：1080x1920px

　　2>Android主流尺寸

　　idpi 240x320px 120ppi(像素密度)

　　mdpi 320x480px 240ppi

　　hdpi 480x800px 160ppi

　　xhdpi 720x1280px 320ppi

　　xxhdpi 1080x1920px 480ppi

　　Ios各尺寸的比为@：@2x：@3x = 0.5：1：1.6875

　　Andriod各尺寸的比为idpi：mdpi：hdpi：xhdpi：xxhdpi：xxxhdpi=0.75：1：1.5：2：3：4

　　在iOS切图与Android切图的转换中：

　　因为：iOS@2x像素尺寸*75%=Android的hdpi像素尺寸

　　所以： iOS@2x的切图缩小75%之后，就是Android的hdpi模式下的切图，

　　又因为：hdpi：xhdpi=1.5：2=0.75

　　所以得： iOS@2x的切图就是Android的xhdpi的切图尺寸

　　又以上可以得出，在手机APP设计中，在IOS和Android两套版本的样子一样只有大小不一样设计稿时，我们可以单独做一个ios@2x的设计稿，在切图阶段按照IOS和Android的转换关系的出不同版本不同尺寸所需要的切图。

　　注意：切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调。

　　Andriod的像素尺寸转化为开发尺寸，即：px转化为dp

　　我们以480*800像素尺寸下做的设计图为基准。

　　开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/3。480px*2/3=320dp

　　这也是为什么要让Android部件尺寸能让3整除的原因。如在hdpi模式，480*800像素尺寸设计图中，开发看到300px宽度的标注，会定义其为宽200dp，到这里Android开发才得到一个他们真正会用于开发的数值。

　　综合 上述关系：iOS@2x像素尺寸*75%=Android的hdpi像素尺寸

　　Android的像素尺寸*2/3=Android的hdpi的dp尺寸

　　得出：iOS@2x像素尺寸*75%*2/3=Android的hdpi的dp尺寸

　　所以：iOS@2x里一个宽600px的东西，在Android的hdpi模式下，正好300dp，正好是50%，

　　第四步

　　就是验收开发成果，我们不仅吧页面设计出来，还要让他最终展示在产品中，所以开发完成开发以后，我们需要验收界面效果是不是和我们设计的一致。如果一致，或者因开发原因没有办法实现，我们就要修改设计方案，在设计的时候我们就的注意开发的难易程度。

　　最后总结一下就是在做APP UI设计中，从拿到低保真原型图到验收产品，才是UI设计师在一个项目中参与的本职的工作中。也可以根据个人能力延伸到界面交互，用户任务的交互设计中。

　　这些只是我个人的一些工作经验和一些文章中总结出来的一些东西。希望大家可以吐槽，多交流!

　　本文由 @ 僧可 原创发布。未经许可，禁止转载。

　　题图来自usnplash，基于CC0协议