欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

经验分享:APP视觉设计工作流程

发布时间:2018:01:24 18:00:28 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1517个文字,预计阅读时间4分钟
导语
参与到一个项目中,我们不单单只是做一个图那么简单,而是要把自己的工作对接到整个项目流程中去。

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

  

经验分享:APP视觉设计工作流程

 

  第一次写稿,大家可以多交流。做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

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:控件解析系列之《警告框》

下一篇:系统讲述重新设计Adobe文件类型图标全过程

  • 18895 文章总数
  • 2309074访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信