APP视觉稿该怎么切图和标注

本篇教程跟大家分享UI设计的一些知识,就是APP怎么切图和标注,还不懂的同学,赶紧了解一下。

首先:哪些东西要切出来?

简单来说就是代码不好实现的东西就直接切成一张图放到软件里面展示,例如图片,小图标,和一些不好实现或者实现成本太高的效果。下面以支付宝和QQ为例。

在这里插入图片描述
以上圈出来的就是需要切出来的,广告栏的是获取已经做好的广告图所以不用切,只需要标注出大小就行,QQ的头像都是用户可以自定义的,程序会直接获取用户设置的头像,所以也不用切,只需要确定大小。

知道了哪些东西要切,那就很简单了,我们知道ps里面有一个切片工具,可以做一些切图,切切简单的还行,遇上APP需要切几套图那这个小米加步枪的家伙就肯定不能让你装逼让你飞了。所以我们可以选择一些切图神器:这里我推荐cutterman,可以去官网上下载,注意这个插件只能安装到完整版的ps上,所以小伙伴们要用的话不要装绿色版哦,具体怎么装可以去看官网介绍。

以下是cutterman界面,我们看下它有三个选项卡,分别对应的是切苹果的,安卓的,pc的,看过上篇文章的看下这个界面就应该知道怎么用吧,先选切那种系统下的,然后再选择切哪种分辨率的。操作比较简单,不做详细讲解,不懂的可以去看我录的切图适配视频教程。

在这里插入图片描述

选择好保存的文件夹,然后选中图层点击导出选中图层就会自动切出你想要的图了,简单到没朋友。

在这里插入图片描述
这里注意一下:使用cutterman切安卓图的时候会生成十个文件夹,有drawable和mipmap两种类型的文件夹,这是因为安卓开发软件Android Studio里面有了mipmap 目录和drawable 目录,其实两者都是一样的,有的安卓开发采用了mipmap的目录结构,然后对应的设计师找Cut君提需求,说每次都要把drawable目录名字改成mipmap,很烦人,希望能生成mipmap的目录,于是现在输出安卓的时候,会同时生成drawable和mipmap两个目录,里面的图片是一样一样滴,大家根据自己的研发需要,给对应的目录即可,目前用的最多的还是drawable。

在这里插入图片描述

当然切图的插件也不只这个,网上有很多,装不好ps完整版的人也可以去找找其他支持绿色版的切图插件。

关于切图命名:

cutterman在切图的时候是直接根据图层名命名的,可以先把图层命好名再切,在软件开发里面图片名一般都是用英文的,因此切图应该用英文命名。至于选择哪种英文命名法,般程序里面有三种命名方法,匈牙利命名法, 骆驼命名法,帕斯卡命名法,团队开发一般会选择一种统一下,没有写过程序的孩子对这些是没概念的,所以这些东西最好先和程序员沟通一下使用哪种。如果程序员哥哥心地善良,说不定你直接给他中文的他也会答应滴。不过因为APP切图要切多套,让程序员每套图去命一次名也麻烦,因此设计师切图时最好先命好,以后要改个图也方便。

关于标注:

为了更好的还原设计效果,设计师除了要给切图外还要给一套标注图。标注方面网上也有很多插件,比如cutterman的作者也做了一款叫Parker,不过要花钱买,也有很多免费的,如马克鳗,像素大厨等,选择一种自己用的习惯的即可。

至于哪些要标注,这个没什么严格的规定,你尽量标详细点让程序员好理解就行,不要老想着是不是不专业,这些工作只是为了降低沟通成本并使设计效果更好的还原,不需要那么多套路。标注图是给程序员看的,所以如果不清楚要及时跟程序沟通。

关于标注单位是用px还是dp/pt,这个也问题不大,问下程序要哪种你就给他标哪种,只要搞清楚设计稿在哪个ppi等级下做的就行,例如你如果用7501334的设计,那么你要用pt/dp标注直接像素除以2即是,用7201280设计也是一样,不用分安卓ios也没事,都是像素值除以2。如果是用1242x2208尺寸设计,那么就得除以3,一般以iPhone设计的情况下标注用px即可,让开发自己除以2换算成pt/dp也是很快的。

在这里插入图片描述
虽然这些东西在新手看起来有点专业,但是要明白,所有的这些工作都是为了把产品做好,即使标注的再详细在实际开发过程中还是会有很多问题,很多程序员看到那么多密密麻麻的数字也不一定都会去认真看,因此有时间还是要去盯一下,不然做出来的产品肯定会有很多细节问题,要做好一款好的软件产品,都是各方面的同事努力拼出来的。正因为如此在互联网团队里面要多和小伙伴们沟通,多去了解别人的工作。不要以为写个规范标注下就完事了。

关于规范:

我们在网上经常能看到很多设计师写的这种UI设计规范,在很多公司里为了使不同的设计师统一视觉方向会做一套视觉规范,很多大公司都会有,国外一些公司要求尤其严格。但是要搞清楚这个东西主要还是给设计师看的,你要真给一个这玩意给程序员开发,他会分分钟会给你做成渣的,以程序员的心态他才不会认真看这堆东西。我们看到站酷等很多设计平台上很多设计师发作品喜欢写个这东西,其实就是为了显得专业点,实际开发中用途有限,程序员还是愿意看你的详细标注,而标注再详细,你不去盯一下还是会给你做的各种粗糙,所以为了保证效果最后还是得去验收一遍。

在团队合作中,如果要写这种规范,要想清楚这些东西用途在哪,给谁看再去写。如果在创业公司小团队里仅仅为了显得自己专业而去花时间写个这东西,意义就不大了。

在这里插入图片描述
最后,希望大家看了文章能多去想,一个问题要想完全明白,一定要去搞清楚它的原理,我知道很多小白看完了还是会有很多东西不清楚,比如点9的图怎么做,标注要不要百分比…留点坑给你们自己补吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/332242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

skynet.fork_Apache Ant 1.10.6发布–用于junitlauncher的fork模式以及新的jmod和链接任务

skynet.forkApache Ant 1.10.6已于本周发布。 此版本包含许多错误修复以及一些非常令人兴奋的新功能。 完整的发行说明可在此处获得 ,下载本身也可以在此处获得 。 在本文中,我将介绍该版本中引入的一些新功能。 使用junitlauncher任务在派生的JVM中运行…

使用MRUnit,Mockito和PowerMock进行Hadoop MapReduce作业的单元测试

0、preliminary 环境搭建 Setup development environment Download the latest version of MRUnit jar from Apache website: https://repository.apache.org/content/repositories/releases/org/apache/mrunit/mrunit/. For example if you are using the Hadoop version 1.…

python奇偶求和_python 判断奇偶并求和,运行过程有错误,希望高手给指导一下。...

问题是:b) Add to the condition in the while loop so that it will stop if either the user inputs a zero or the sum is larger than limit (if limit is None then ignore the second stopping condition). Do not use a break statement to implement this f…

产品经理如何进行需求管理?

文章目录交付需求第一步:提交需求1、流程图2、结构图3、原型图4、产品需求文档第二步:需求评审制定需求实施计划1、和研发确定开发计划2、和设计人员确定UI设计计划3、和运营人员确定运营计划管控需求变更1、分析需求2、分析变更的可行性3、 变更需求需求…

sap wad_使用网真和WAD热部署Kubernetes

sap wad在Kubernetes环境中测试企业应用程序时,更改,重新打包和重新部署应用程序的周转率可能会很高。 网真旨在通过将本地运行的进程代理到我们的Kubernetes集群中来缓解这种情况,就像本地进程是集群的一部分一样。 如果我们将这种方法与诸如…

关于产品的核心问题

文章目录交互设计产品方向产品定位产品使命产品愿景产品逻辑用户价值用户体验产品价值什么样的产品才是合格的?什么样的产品才是优秀的?产品经理关注的核心点做产品前产品经理必须明确三个问题交互设计 定义和设计系统的行为就是交互设计,说…

正则表达式总结之查找

【0】、写在前面 以下内容总结于shell脚本学习指南 【1】我们说查找文本要用到三种文本匹配程序 : 1.1)grep 使用的是基本正则表达式(basic regular expression,BRE) 1.2)扩展式grep 使用 egrep&#xf…

java hipster!_通过Java Hipster升级Spring Security OAuth和JUnit测试

java hipster!“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证。 使用单元测试和集成测试来验证代码质量是一种很好的方式来表明您对代码…

在 Mac 上显示或隐藏文件扩展名

文章目录对于一个文件对于所有文件通过命令来设置更改扩展名显示警告对于一个文件 在 Mac 上,选择文件,然后选取“文件”>“显示简介”,或按下 Command-I。 点按“名称与扩展名”旁边的三角形来展开下面的部分。 若要显示或隐藏文件扩展…

dism++封装系统使用教程_客栈管理系统“订单来了”客房订单盒子使用教程

原标题:客栈管理系统“订单来了”客房订单盒子使用教程「订单来了」是非标住宿行业领先的移动互联云PMS,是以PMS为基础,聚合全渠道的营销管理生态平台,为客栈/民宿提供信息化一体解决方案。已累计服务国内外400城市、30000商家&am…

文本替换sed+字段处理cut,join+awk重新编排字段

【1】sed工具(Stream Editor)——流编辑器 sed 本身也是一个管线(管道)命令,可以分析 standard input 的啦! 而且 sed 还可以将数据进行取代、删除、新增、截取特定行等等的功能呢!…

netsuite 数据集成_Java中带有NetSuite数据实体的对象关系映射(ORM)

netsuite 数据集成对象关系映射(ORM)技术使使用关系数据源更加容易,并且可以将逻辑业务模型与物理存储模型联系在一起。 遵循本教程,将NetSuite数据的连接集成到基于Java的ORM框架Hibernate中。 您可以使用Hibernate将面向对象的…

python内置装饰器property_python之内置装饰器(property/staticmethod/classmethod)

python内置了property、staticmethod、classmethod三个装饰器,有时候我们也会用到,这里简单说明下1、property作用:顾名思义把函数装饰成属性一般我们调用类方法成员,都是如下写法:class propertyTest():def __init__(…

关于bochs用X11启动的说明

关于网络上有很多关于 bochs启动时 连接到X Windows 报错: cannot connect to X display . 昨天搞了半天晚上 今天早上 直到现在 才搞懂。 主要的原因 是我使用了终端 比如 xshell or putty 去连接 centos ,而以这种方式的连接 是只能够 传递字符&a…

在MyEclipse中访问MySql

Window 选项卡 选择 Open PerSpective 选择 MyEclipse Database Explorer,打开数据库视图 在 DB Browser 中单击右键,选择 New … 在 Database Driver 界面配置 a. Driver template: 连接的数据库模板 b. Driver name: 自定义的名字 c. Connection URL&a…

自动化测试框架 2019_2019年用于自动化的5个最佳Java测试框架

自动化测试框架 2019几十年来,Java一直是开发应用程序服务器端层的首选编程语言。 尽管JUnit一直在与开发人员一起帮助他们进行自动化的单元测试,但随着时间的推移和测试的发展,当自动化测试不断增长时,已经开发了许多基于Java的开…

X86汇编语言中的registers相关

0、写在前面 本文中总结于王爽老师的汇编语言,建议有兴趣的都买一本,以支持王爽老师的辛勤付出。再者,这本书写的确实很nice。 8086CPU共有14个registers:AX, BX, CX, DX, SI&#…

代码流程图生成器_【进阶Python】第五讲:迭代器与生成器

点击蓝字关注我迭代是Python中常用且非常强大的一个功能,它可以用于访问集合、列表、字符串、字典等数据结构的元素。我们经常使用循环和条件语句,我们也清楚哪些是可以迭代访问,但是具体它们之间有什么有什么异同之处?有哪些特点…

生成最简单的验证码图片的Java代码

后端代码: package priv.lwx.servlet.sl.web; /*** description** author liaowenxiong* date 2022/3/25 09:56*/import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.…

cognito_将Amazon Cognito与单页面应用程序(Vue.js)集成

cognito在本文中,我们将研究使用OAuth协议通过Amazon Cognito对单页应用程序(使用Vue.js构建)进行身份验证。 在上一篇文章中,我们将服务器端应用程序与Amazon Cognito集成在一起。 搭建单页应用程序 我们将使用vue-cli创建一个空…