A5创业网
项目发布
申请报道
扫一扫，联系编辑获得审核机会
符合以下要求，获得报道机会
1. 新公司求报道
2. 好项目求报道
3. 服务商求报道
4. 投资融资爆料
中介交易 网站交易 域名交易 公众号
登录 注册
会员中心 退出
微信 
微博
手机版 
网站导航
找项目 找服务
客服热线：400-995-7855
创业
创业动态 投资融资 创业故事 众创空间
财税
工商注册 公司财税 资质办理
产权
商标 版权 专利
科技
互联网 IT业界 移动 八卦休闲
站长
网站运营 建站经验 SEO 交互设计 好站推荐
营销
营销策划 网络推广 移动营销
电商
电商资讯 电商分析 移动电商
IDC
IDC报告 云计算 服务器 安全 CDN
更多
自媒体 公众号 小程序 产品 域名 会议 数码 游戏 系统 技术
首页
创业
创业项目
科技
站长
产品
营销
电商
域名
会议
A5交易
A5营销
创业服务
当前位置：首页 > 站长 > 交互设计 > 正文 品牌
标签
专题
软文
经验分享：APP视觉设计工作流程 2018-01-24 10:42 来源：人人都是产品经理 我来投稿 我要评论
创业项目优选 好项目来A5招商 ，点击入驻！
参与到一个项目中，我们不单单只是做一个图那么简单，而是要把自己的工作对接到整个项目流程中去。
第一次写稿，大家可以多交流。做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协议
