• 网站建设
  • 手机站建设
  • 网站模板
  • 微信开发
  • 成功案例
  • 资讯中心
  • 域名注册
  • 云服务器
  • 联系我们
  • 优云网络红包功能上线,吸粉利器!
    学习营销找优云网络
    微商城+微分销,全网营销解决方案
    优云网络红包功能上线,吸粉利器!
    学习营销找优云网络
    微商城+微分销,全网营销解决方案
    当前位置:优云网站建设首页 >> 资讯中心 >> APPUI制作设计工作流程

    APPUI制作设计工作流程

    作者:优云网络 发布时间:2018-09-10 17:34:35 点击:

      很多开始学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 1080x1920px480ppi


      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设计师在一个项目中参与的本职的工作中。也可以根据个人能力延伸到界面交互,用户任务的交互设计中





    ----------------------------------------------------------------------分隔线----------------------------------------------------------------------

    版权说明:如果您觉得本文不错,请转载分享给您的好友,并留下出处!谢谢!
    本文链接地址:http://www.youyuncn.com/news_2616.html


    ----------------------------------------------------------------------分隔线----------------------------------------------------------------------

    优云网络从事网站建设多年,积累多年行业经验,是石家庄专业的微信小程序制作优秀品牌!
    如果您有【网站建设】需求,和【微信小程序】加盟意向,都可以随时与我们在线取得联系!
    优云网络24小时客户服务热线:188-3010-8130(微信同号 何经理)




    Copyright 2008 - 2018 优云网络 版权所有 违者必究 / All Rights Reserved
    手机/微信:18830108130 QQ:81810632 公司地址:石家庄裕华区建华南大街蓝山国际A座1506室
    工信部备案:冀ICP备15005251号-1 技术支持:优云网络
    石家庄优云网络公司10年专注于石家庄网站建设服务,石家庄网站制作石家庄网站设计团队。服务满意客户近百家,欢迎来电洽谈合作!
    亲,扫一扫
    关注微信公众号
    亲,扫一扫
    添加微信好友