公司新闻

将想法与观点,与您一起分享~

开发案例插画 插画-树 插画-树

重庆APP设计公司详情APP设计指南

润雪科技 时间:2017-07-04 08:55 浏览量:2969

上周在做一个APP项目开始进行到设计部分了,以前也设计过不少的APP界面,下面重庆APP设计公司整理了一下关于APP设计的流程。

关于APP的设计流程
产品需求 》 设计效果 》 切图 》 时间设计规范 》 开发

APPftWEB幵发在设计流程上也有所区别:

1、WEB的设计和切图,可由2个人完成,一般是UI设计师+前端工程师•

2、APP的路个设计*好由一个人芫成,APP的设twa石较多,精确到像素,只有设计师自己对每个控件的设计样式,以及PSD文档的结构峨了解,换成其他人员参与,往往不会J啦工作效率,反而会增加返工的几率。

3、此切图非彼切图:
WEB的产出物是DIV+CSS,
APP的产出物是JPG或者PNG (包括.9)图片

4、APP增加了标注的流程
因便于客户端开发人员对应用的每个控件在页面中的位置逬行精确控制,以确保效果图和成品的高度契合,所以增加了标注.WEB是没有此项标注工作的.

关于APP的尺寸
对于尺寸,我只按最大的尺寸设计,这样调整小尺寸会比较方便。

1、IOS版本,设计尺寸应定为:640xll36px分辨率:72px/inch
2、 Android版本,设计尺寸应定为:720xl280px分辨率:72px/inch

备注:注意下图的状态栏、导航栏、标签栏,设计中可参考


关于APP的图标
对于图标的形状,我没有特别的喜好,方的,圆的,我都爱!
IOS版本1024xl024px (圆角:160px )
Android 版本96x96px (圆角:6px )


关于APP的切图


android平台有多种不同的分辨率,很多控件的切图文件在被放大拉伸后,边角会横糊失真。"点九"是andriod平台的应用软件开发里的一种特殊的图片形式,文件扩展名为:.9.png

使用点九PNG技术,可以将图片横向和纵向同时进行拉伸,以实现在多分辨率下的完美显示效果。

为什么叫M点九PNG",其实相当于把一张图分成了9个部分(九宫格),如下图所示,分别为4个角,4条边,以及一个中间区域,4个角是不做拉升的,所以还能一直保持圆角的漓晰状态,而2条水平边和垂直边分别只做水平和垂直拉伸,所以不会出现边会被拉粗的情况,图片也不会走样。


关于APP的标注

提起这个是一件很痛苦的事情,第一次做好效果图发开发,开发让我做标注•花了一天时间做了所有的标注,可手和脖子也不是自己了,有这样的问题,有没有一个软件便的做标注呢?

以前设计网页我最軎欢给前端发一个软件,好色鬼,其实这个软件对设计和前端都^常的好用

APP设计前沟通
设计前努必要要跟产品及开发沟通以下细节,否则很容易造成返工。

1. 要做几个平台?安卓还是IOS ? IOS是否还有pad ?安卓的最大尺寸?
2. 和客户端开发团队沟通具体切图方式。是否采用.9切图?
3. 和产品及运营明确目标用户,确定设计风格。
4. 在客户端开发之前,务必参该项目的需求评审,明确页面及页面之间的逻辑,如产品规划时就已经缺失,需要及时补充说明,否则开发完成再去梳理,势必返工并造成工期延误。


对于网页设计师,大幅的活动效果图做起来很酷很玄,小尺寸的APP因为空间小,东西过,空间排列需要更加重视,形式服从功能,设计的最本质。现在愈来愈习惯在方寸之地大展拳脚,这样的事才有真正的挑战性。


来源声明:本文【重庆APP设计公司详情APP设计指南】由润雪科技编辑原创或采编整理,如需转载请注明来自润雪科技。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系。

TAG标签:网站开发 网站设计

相关文章
  • 前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码

    前端react项目使用prettier来格式化(美化)各种代码,包括javascript、php、java、typesctip、css、less、json、sql等都可以美化

  • php用Mpdf将html文档转为pdf

    php用Mpdf将html文档转为pdf

    php将html文档转成pdf保存到服务器

  • php用libreoffice将ppt转为pdf

    php用libreoffice将ppt转为pdf

    1、先安装libreoffice:yum install libreoffice;2、由于ppt中都是中文,执行命令转ppt的时候中文可能乱码,我的解决办法是在liunx系统中安装中文字体,把windows的字体直接全部拷贝到liunx服务器中,直接把所有字体都上传到服务器

  • php利用imagick扩展将pdf导出成图片

    php利用imagick扩展将pdf导出成图片

    需要先安装php的imagick扩展,两种方式,第一种是使用php,第二种是使用命令执行;随便用哪种执行需要修改nginx配置文件增加:proxy_read_timeout 600s;使其链接60秒后不断,不然pdf一旦过大60秒无法完成工作就断开链接了

  • apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    apache配置转发,如使用workerman 或 webman等框架的时候配合apache

    在使用workerman 或 webman等框架开发应用的时候需要配合nginx 或 apache进行转发,官网的文档只有写nginx,下面的apache的配置,前提是apche需要开启这两个模块

  • 一个class类几个函数即可调用各种微信支付场景

    一个class类几个函数即可调用各种微信支付场景

    真在的只需要一个class类文件几个函数就可以调用微信的所有支付,不管是微信公众号、h5、app、小程序支付,加密方式都是一样的,对比下微信的支付文档,只需要修改第一步传入的参数不同,下单地址不同,加密方式都是一样的,所以只要看懂下面的第一个函数,将搞定微信的任何支付。

如果您感觉我们的案例非常不错,请与我们取得联系~
立即咨询
获取方案及报价 023-6288-5285
网站建设流程 需求沟通
网站建设流程 签订合同
网站建设流程 项目开发
网站建设流程 上线/运营维护

张经理

186-9655-6121

邹经理

188-1980-6503

润雪科技二维码
电话咨询 在线咨询 微信咨询