| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 移动开发 -> APP视觉稿该怎么切图和标注 -> 正文阅读 |
|
[移动开发]APP视觉稿该怎么切图和标注 |
本篇教程跟大家分享UI设计的一些知识,就是APP怎么切图和标注,还不懂的同学,赶紧了解一下。 首先:哪些东西要切出来? 简单来说就是代码不好实现的东西就直接切成一张图放到软件里面展示,例如图片,小图标,和一些不好实现或者实现成本太高的效果。下面以支付宝和QQ为例。
知道了哪些东西要切,那就很简单了,我们知道ps里面有一个切片工具,可以做一些切图,切切简单的还行,遇上APP需要切几套图那这个小米加步枪的家伙就肯定不能让你装逼让你飞了。所以我们可以选择一些切图神器:这里我推荐cutterman,可以去官网上下载,注意这个插件只能安装到完整版的ps上,所以小伙伴们要用的话不要装绿色版哦,具体怎么装可以去看官网介绍。 以下是cutterman界面,我们看下它有三个选项卡,分别对应的是切苹果的,安卓的,pc的,看过上篇文章的看下这个界面就应该知道怎么用吧,先选切那种系统下的,然后再选择切哪种分辨率的。操作比较简单,不做详细讲解,不懂的可以去看我录的切图适配视频教程。 选择好保存的文件夹,然后选中图层点击导出选中图层就会自动切出你想要的图了,简单到没朋友。
当然切图的插件也不只这个,网上有很多,装不好ps完整版的人也可以去找找其他支持绿色版的切图插件。 关于切图命名: cutterman在切图的时候是直接根据图层名命名的,可以先把图层命好名再切,在软件开发里面图片名一般都是用英文的,因此切图应该用英文命名。至于选择哪种英文命名法,般程序里面有三种命名方法,匈牙利命名法, 骆驼命名法,帕斯卡命名法,团队开发一般会选择一种统一下,没有写过程序的孩子对这些是没概念的,所以这些东西最好先和程序员沟通一下使用哪种。如果程序员哥哥心地善良,说不定你直接给他中文的他也会答应滴。不过因为APP切图要切多套,让程序员每套图去命一次名也麻烦,因此设计师切图时最好先命好,以后要改个图也方便。 关于标注: 为了更好的还原设计效果,设计师除了要给切图外还要给一套标注图。标注方面网上也有很多插件,比如cutterman的作者也做了一款叫Parker,不过要花钱买,也有很多免费的,如马克鳗,像素大厨等,选择一种自己用的习惯的即可。 至于哪些要标注,这个没什么严格的规定,你尽量标详细点让程序员好理解就行,不要老想着是不是不专业,这些工作只是为了降低沟通成本并使设计效果更好的还原,不需要那么多套路。标注图是给程序员看的,所以如果不清楚要及时跟程序沟通。 关于标注单位是用px还是dp/pt,这个也问题不大,问下程序要哪种你就给他标哪种,只要搞清楚设计稿在哪个ppi等级下做的就行,例如你如果用7501334的设计,那么你要用pt/dp标注直接像素除以2即是,用7201280设计也是一样,不用分安卓ios也没事,都是像素值除以2。如果是用1242x2208尺寸设计,那么就得除以3,一般以iPhone设计的情况下标注用px即可,让开发自己除以2换算成pt/dp也是很快的。
关于规范: 我们在网上经常能看到很多设计师写的这种UI设计规范,在很多公司里为了使不同的设计师统一视觉方向会做一套视觉规范,很多大公司都会有,国外一些公司要求尤其严格。但是要搞清楚这个东西主要还是给设计师看的,你要真给一个这玩意给程序员开发,他会分分钟会给你做成渣的,以程序员的心态他才不会认真看这堆东西。我们看到站酷等很多设计平台上很多设计师发作品喜欢写个这东西,其实就是为了显得专业点,实际开发中用途有限,程序员还是愿意看你的详细标注,而标注再详细,你不去盯一下还是会给你做的各种粗糙,所以为了保证效果最后还是得去验收一遍。 在团队合作中,如果要写这种规范,要想清楚这些东西用途在哪,给谁看再去写。如果在创业公司小团队里仅仅为了显得自己专业而去花时间写个这东西,意义就不大了。
|
|
移动开发 最新文章 |
Vue3装载axios和element-ui |
android adb cmd |
【xcode】Xcode常用快捷键与技巧 |
Android开发中的线程池使用 |
Java 和 Android 的 Base64 |
Android 测试文字编码格式 |
微信小程序支付 |
安卓权限记录 |
知乎之自动养号 |
【Android Jetpack】DataStore |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 17:41:58- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |