恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【系列】一款APP设计的从0到1之:视觉还原篇
0.0°
2019-05-22 原创文章 经验/观点 举报 4599 59 23 2

《一款APP设计的从0到1》这是一篇系列文章干货,上次严哥讲的是关于切图标注篇,今天严哥来说一下,视觉还原。


往期回顾:

    《一款APP设计的从0到1之:项目立项篇》

    《一款APP设计的从0到1之:项目预估时间篇》

    《一款APP设计的从0到1之:界面设计篇》

    《一款APP设计的从0到1之:切图标注篇》


这次严哥接着上次的茬继续,继续之前先来看看整个目录(满满的干货) 


严哥列了一个小小的目录:

1、 项目立项

2、 项目预估时间

3、 界面设计

4、 切图标注

5、 视觉还原

6、 上线准备


视觉还原篇


一款完整的APP,经过这样的一个流程:项目立项启动→设计产品原型→设计效果图→进入开发阶段→开发成功后进入测试阶段→测试将问题反馈给开发人员进行调试→多次测试确认没有bug→提交市场、正式上线。

Image title


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


所以,就需要我们在这个时候,去配合开发对UI进行调整,来更加的接近我们做的效果图了(简单了说,就是给开发挑毛病,指出和效果图不一致的地方,是不是很开心哈)


差1px,我也要挑出来(像素眼就是这样炼成的)


一、设计师如何做视觉还原?


1. 设计视觉调整文档


团队较大,建议设计一份视觉调整文章,这样对整个开发进度和效率都是比较高的,因为团队人数多,你不可能跑到iOS开发哥哥那里说一次要调整的地方,然后再去跟Android哥哥再说一次,你有时间,人家不一定有时间,所以设计视觉调整优化文档是很有必要的。

Image title


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

Image title


2. 带上你的板凳,过去和开发一起调UI


这种方法很适合3-4人的小团队,亲自上阵,口述问题,效率也是比较高的,你需要备好你的效果图和开发后的雏形,有对比才有伤害(有图有真相,不一样的地方就得让开发改)


二、如何让效果图高还原度落地?


1、规范的视觉界面设计


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

Image title


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


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

Image title


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


3、规范的切图与精确的标注


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

Image title


4、多和开发沟通交流


严哥一直说的一句话:沟通是解决问题的最有效方法,所以多和开发哥哥接触沟通交流,如果有条件允许的话,请与开发坐一起;遇到问题及时面对面协商解决、达成共识、修改、敲定、解决。

Image title


关于视觉还原篇就说到这里,严哥这里说的只是一种工作方法,好的工作方法才能自己事半功倍,在具体工作中也要灵活拥有,一定要多和开发沟通交流,良好的沟通才是解决问题的唯一方法,有疑问题也可给严哥留言,我们下期再见!

Image title


微信公众号:UI严选

更新:2019-05-22

收藏

59人已收藏

小小方方

微信公众号:UI严选

  • 94

    作品

  • 7241

    粉丝

  • 20

    关注

  • 动效落地,方案怎么选?
  • 告别手动!如何三分钟快速搞定AE动画,附插件安装包
  • 潮流、潮牌、手撕褶皱、抽象几何图形、潮流样机素材,请注意查收
  • AE避坑 | AE动效落地时常见问题解析和注意事项

    猜你喜欢

      2019-05-22 原创文章 经验/观点 举报 4599 59 23 2

      【系列】一款APP设计的从0到1之:视觉还原篇

      0.0°

      你确定要举报【系列】一款APP设计的从0到1之:视觉还原篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      23
      59
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录