从零开始做APP之界面设计和切图标注技法!界面设计切图UI设计

目前在行业里,关于APP界面设计规范也是层次不齐,很多都还停留在6的设备和iOS9的系统之上,而现在最新的是iPhone8和iOS11了(更新换代真的很快),我这里说的是最新的iOS界面设计规范(Android设计规范,下次再说)

一.关于设计工具

俗话说:工欲善其事必先利其器,好的工具可以让我们的工作效率更高,做界面设计我们用的最多的软件就是PS和AI了,如果你是Mac用户,可以使用Sketch,软件的版本当然是推荐高版本,因为功能更强大,作图的速度也就更快。

刚接触PS是从8.0开始,8.0–CS4–CS5–CS6–CC–CC2014–CC2015-CC2017一直到现在的最新版本PSCC2018,深刻体会,新的版本更好用,功能更多,效果更快,根据个人习惯,选择自己电脑适合的版本就好。

如果你的电脑系统是64位的建议安装最新版本2018版,如果你电脑系统是32位的,就只能安装CS系列版本,由于32位的系统配置太低,不支持安装最新版本。

二.设计稿尺寸

在看设计稿尺寸之前,我们先来了解一下APP界面设计构成。

界面构成由:布局层、图文排版层和图标层。

在iPhone6还没出的时候,都是用640×1136px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334px来做设计稿尺寸。

再带大家来看看,到目前为止所有iPhone的尺寸(1-3代就不用考虑了):

iPhone界面设计规范:

iPhone界面尺寸:

以750x1334px作为设计稿标准尺寸的原由:

1.从中间尺寸向上和向下适配的时候界面调整的幅度最小,最方便适配。

2.大屏幕时代依然以小尺寸作为设计尺寸,会限制设计师的设计视角。

3.设计安卓版本时只需做最小的设计调整,提升设计效率。

所以做设计稿时请以750x1334px来做设计稿。

在文档建立参考线是一个很好的习惯,我希望大家也可以养成这个习惯,上下很容易设置,左右我习惯设置24px的距离。

我通过对国内外很多APP就行了对比,总结是24px更合理,这个是我的个人习惯,所以也不要当做是明文规则,你设置为30px,也是可以的。

这里再给大家略过下iPad的设计规范:

三.图标设计

iPhone图标尺寸:

图标设计请用栅格化系统进行设计。

设计尺寸:1024x1024px,尽可能的采用黄金比例设计。

四.设计字体

先来看一下字体的历史演变过程

iOS9:英文字体为HelveticaNeue

iOS9:中文字体由为冬青黑

iOS10:英文字体为SanFrancisco

iOS10:中文字体为苹方

字体大小的问题:

顶部操作栏文字大小34-38px

标题文字大小28-34px

正文文字大小26-30px

辅助性文字大小20-24px

Tabbar文字大小20px

文字大小只是一个范围,这要根据设计的视觉效果来决定,不要死记硬背,但是切记,字体大小要用偶数。

上面讲了界面设计,我们设计完界面,下面就开始讲下UI切图和标注。

一.切图工具和标注工具

1.切图工具:

Cutterman:一款PS的插件,切图非常方便,而且对PS版本要求比较高,针对CS6旧版本已经不维护更新了。推荐安装官方完整版PSCC及以上版本。

AssistorPS也是一款PS的切图标注插件,也被誉为神器;我使用了一下,感觉还可以,但是切图和标注上体验还是不高,但是AssistorPS的其他辅助功能还是很不错的,比如参考线辅助,圆角大小,磁铁功能。

需要学习软件的同学,大家可以百度搜索锦子会,去锦子会官网下载更多学习资源!如想要了解我的,请百度搜索罗锦,欢迎了解更多我的设计之路!

2.标注工具:

PxCook(像素大厨),是一款切图标注设计工具软件。自2.0.0版本开始,支持PSD文件的文字,颜色,距离自动智能识别。

优点在于将标注、切图这两项设计完稿后集成在一个软件内完成,支持Windows和Mac双平台。

标注功能包括:支持长度,颜色,区域,文字注释;从2.0.0版本开始,整体效率有了很大的提高,值得推荐的是自动智能识别标注。

但是,Parker并不是免费的,而是一款付费软件,需要60RMB。

MarkMan,也是一款高效的设计稿标注工具,支持Win/Mac,可免费使用基础功能,免费版的在体验上也是差强人意,毕竟是免费的,如果需要高级功能也是需要付费的60RMB。

以上工具各有优点和缺点,在选择上主要还是看个人的习惯,你觉得哪个用着顺手就选择哪个都可以。

二.页面标注

标注是非常重要的,前端开发哥哥能不能完美的的还原设计稿,很大一部分取决于我们的标注;如果不清楚你该怎么标,一定要和开发哥哥沟通!

沟通是非常有效解决问题的途径!

在这里我大致的说一下我的标注习惯,不需要将每一张效果图都进行标注,你标注的页面能保证开发能把每个页面都能顺利进行就可以了。

我拿我标注过的页面做个示例:

我们从上面的标注图可以看出,需要标注的内容有:

文字:字体大小、字体颜色

布局控件属性:控件宽高、背景色、透明度、描边、圆角大小

列表:列表高度、列表颜色、列表内内容上下间距

间距:控件之间的距离、左右边距

段落文字:字体大小、字体颜色、行距

全部属性:如导航栏文字大小、颜色,左右边距,默认间距等,你可以提前跟开发哥哥说好,不用标注

所有的页面标注总结起来就是:标文字,标间距,标大小,标区域

注:标注颜色格式是使用16进制(如:#FF0000),还是RGB(255,0,0)?你需要和开发哥哥商量一下,根据他的开发习惯,一般采用16进制色值就好了。

三.界面切图

我还是拿图举例来说明:

icon_alipay.png→iPhone1-3代的手机(已经不考虑了)

icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7对应尺寸,这就是我们通常所说的2倍图

icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸,这就是3倍图

可以简单的理解为倍数关系,如果你使用750x1334px(iPhone6/6S/7)尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。

其他总结

1.到底哪些资源需要切图,哪些不需要切图?

只要是无法用代码来实现和表达出来的,就需要切图

如果实在不清楚要不要切图,多和开发沟通,他会告诉你哪些是需要你切图。

2.切图需要切几套?(这里我只以iOS作为标准,安卓下次再说)

理论上,我们需要切3套图,是为了更好的适配

在实际工作中,iOS只需要切2套图就可以,分别为:@2x和@3x

3.切图需要注意以下几点:

切图输出格式必须为png24位、png8位、jpg格3种格式

同一模块内,切图大小应保持一致

切图输出大小必须保持为偶数

为了减小包的大小,所有切图尽量压缩后再给开发

关于UI切图和标注的基础知识就说到这里了,如果在UI设计工作中,不清楚该怎么切怎么标的时候。

请多和前端开发程序员交流,良好的沟通才是解决问题的唯一方法,切记不要一个人在那瞎琢磨。

UI设计是一个高薪的行业,选择好了再努力,工资必定上涨。

详细了解:零基础学习UI,如何4个月入职互联网公司?

那么如果你是零基础想学好UI设计或者是想转行UI设计,改变自己。

课程详情了解:

零基础学习UI,如何4个月入职互联网公司?

详情了解:

报名VIP课程可以获得什么权限(价值上万)

往期回顾:

人为什么宁愿吃生活的苦,也不愿吃学习的苦?(详情请点击链接跳转)

30岁之前,逼自己一把,让自己成为这样的人(详情请点击链接跳转)

请看下面的详细版课程介绍。

报名VIP课程可以获得什么权限(价值上万)(详情请点击链接跳转)

报名UI设计全能就业班成为VIP学员可学习UI设计全套完整超清课程,随时随地可学。

详情了解:2018年能让你成为月薪过万的UI设计师机会!

努力4个月,换一份高薪UI设计师工作值不值

想系统学习我们的UI设计全能班课程的同学请点击下面》如何正确学习UI设计

如何正确学习UI设计

更多精彩:

你们会教到什么软件呢?

我们的课程中主要会讲到4款软件,

分别是Photoshop,Illustrator,AfterEffects,AxureRP8。

简称,PS,AI,AE,ARP软件。

AI主要用于制作UI设计中的图标设计,也可以对UI中的一些引导页的插画图进行设计。

AE主要用于制作UI设计中的交互动效,在现今的UI产品中很多都是需要用动效的。

ARP主要用于制作UI设计中的原型图,线框图,流程图的设计。

学历低可以学习吗?

可以,一般UI设计工作的公司都为互联网公司,互联网公司卡能力严格一些,学历相对较低,不像传统企业卡的很严格,一般大型互联网公司有大专学历就行了,小型互联网公司有初中毕业就可以了。如果你有足够好的作品,就算学历真的是初中也是可以去大型互联网公司的。而且学历其实也可以提升的,通过成人高考,远程教育,自考等方式都可以提升。

THE END
1.设计小白变身指南!这20个免费工具拯救你免费批量制图软件这20个免费工具拯救你 前言 每位设计师都有自己独特的工具箱。在设计过程中,素材、字体、配色和图片处理都是不可或缺的元素。借助这些工具的支持,我们能够轻松创造出令人满意的作品! 今天,我将为大家分享一些经验丰富的设计师常用的设计工具和网站,快来看看吧!这篇文章将帮助你从设计小白成长为高手!https://blog.csdn.net/xl801801/article/details/141228070
2.9款平面图设计工具推荐,简单易上手!在寻找适合初学者且功能强大的平面图设计工具吗?这里为您推荐9款简单易上手的选项,帮助您快速入门并提升设计效率。 1. **即时设计**: 作为国内首款专业级的UI设计工具,即时设计能够高效完成PC端网页、移动端App及小程序页面的设计。其特色在于深度整合了设计资源与设计工具,提供大量专业免费的设计资源,并支持一键保https://www.yoojia.com/ask/17-14364088798185728473.html
3.第一波!2024年11月精选实用设计工具合集优设网上次有同学说 AI 工具太多,传统的设计类的素材少了,这次我更新一波相对「传统」的设计素材,有最新的灵感网站合集、Notion 风格的头像制作工具、设计师优选的 Figma 插件库、PS替代工具全搜集合集、免费的矢量转化工具,当然,结尾我额外附上 2 个免费的生图工具,这也同样非常实用。 https://www.uisdc.com/2024-11-design-resources-vol1
4.免费制作有哪些APP推荐免费制作有哪些下载二三维测量,支持二维测长度、测坐标、连续测,三维距离、圆测量等;5.CAD批注,支持语音/照片/文字多样式;6.绘图工具,CAD绘图编辑、复制删除、圆角倒角等; 7.分享与同步,微信、QQ图纸打开与分享,账号三端同步; 8.丰富工具,可打开PDF,CAD与PDF格式转换、导出图片,文字查找,块统计等;9.项目协作,支持多人沟通与https://www.wandoujia.com/bangdan/1042945/
5.CAD自学网CAD自学网是一个永久免费的设计软件自学网,提供AutoCAD、Catia、UG、Pro/E、Creo、Solidworks、CAXA、PS、Revit、3dmax、sketchup,天正CAD等设计软件与教程的下载,致力于为设计师提供便捷的软件、教程和图纸下载。https://www.cadzxw.com/
6.IronCAD2023破解版设计协作套件IronCADDesignCollIronCAD2023是一款功能强大且完善的设计协作套件,包括IRONCAD,INOVATE,IRONCAD DRAFT,IRONCAD COMPOSE和Native Translators等部分,它为用户提供了实用的2D和3D设计工具,使用IronCAD设计协作套件,可围绕核心3D建模软件IRONCAD设计的全套CAD程序 ,优化您的工程团队的设计流程,轻松地在3D和2D之间移动,并支持整个组织内外的无http://www.sd173.com/soft/7758.html
7.字由字由解决了大家在做设计时找字体、下载字体、预览和试用字体的各种烦恼,一站式地解决了字体问题,可以说是设计师以及爱好者们必备的字体管理利器! 而且支持 Win + macOS 平台以及支持数据同步,也让该软件更加适合双平台的用户以及经常需要换电脑做设计的朋友。最后值得注意的是,字由工具本身是完全免费的,不过一些非免费https://www.iplaysoft.com/hellofont.html
8.UI设计教程UI教程UI视频教程千锋教育UI视频教育频道为UI设计师提供原创UI教程、UI视频教程、UI设计教程,UI自学方法等高清优质视频教程,免费提供在线观看下载,让UI设计初学者快速入门,短期内迅速掌握UI设计实战技能.https://video.mobiletrain.org/ui/
9.101种最热门的EdTech工具更好的是Canvas为教师提供了一个免费的计划,有大量的功能,所以真正的障碍就是让学生通过这个平台提交作业。一旦他们做到了这一点,教师们就有了一系列的标记工具,让他们能够给出反馈和建议,这比简单地使用预览或谷歌表格(Google Sheets)要容易得多。 值得注意的是,Canvas确实是一个面向学校和学校系统的企业级平台,但https://36kr.com/p/829435155242882
10.2024最强AI集合!12个领域,47款AI工具,每一个都变态又好用!打工AI 工具千千万,到底哪款最好用?深度体验了上百款AI工具后,今天和大家一起从搜索、翻译、写作、PPT生成、AI绘画、视频、数字人等各个维度来彻底地盘一盘。 除了各领域Top3外,我还会给出国内免费可用的方案。应该是目前全网最全的一个盘点,大家可以动动手指先收藏再看。 展开更多https://www.bilibili.com/list/ml3242089091
11.SiemensPADSStandardPlusVX2.11中文特别版PADS? Standard基本的 PCB 设计软件,价格令人怦然心动高质量的 PCB 原理图和 PCB 设计工具价格实惠,可轻松进行扩展PADS Standard Plus完整的 PCB 设计流程,包含用于硬件工程的高级工具专为还需要分析和验证功能的 PCB 设计人员而配置易用性与功能性兼备高级Layout 和高速约束https://www.5aixz.com/fuzhusheji/439.html
12.常用生物软件(windows)全面介绍Oligo 6.57 引物分析著名软件,主要应用于核酸序列引物分析设计软件,同时计算核酸序列的杂交温度(Tm)和理论预测序列二级结构。 Primer D'Signer 1.1 免费的引物设计辅助软件,专门用于pASK-IBA和pPR-IBA表达载体,简化引物设计工作。 Array Designer 2.00 DNA微矩阵(microarray)软件,批量设计DNA和寡核苷酸引物工具 https://www.antpedia.com/html/06/n-2300229.html
13.IT编程工具下载最新即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。 AI+设计46.83M 工具下载 Flinto Flinto-是一款轻量、高效的综合性交互原型设计工具,您可以使用它创建任何原型, AI+设计21.08M http://yun.itheima.com/gongju
14.不收藏就亏了!27款超级实用设计工具大合集!PS入门全套笔记|Adobe CC2018 全家桶|CC2018最新版|Adobe CC2015大师版(需全部下载下来)|Adobe安装破解|设计、广告、运营人必备神器|马赛克拼贴图神器|交互原型工具|交互设计入门指南|写给还想入行UI设计的你|设计师的革命宣言|让甲方漂洋过海来找你|为什么别人家的LOGO值800万?|你的一个小时值多少钱? https://www.jianshu.com/p/b4ec3242006f
15.从Cadence到AltiumDesigner的转换,为何设计中面临越来越多挑战1994年,Altium 提出客户端/服务器端架构,以整合各种EDA设计工具; 1998年,Altium 发布Protel 98 -- 针对Microsoft Windows NT/95/98的全套32位设计组件。 2004年,Altium 发布ProtelDXP— 一款完整提供PCB设计工具集的产品; 2006年,Altium 发布了Altium Designer 6,世界上首个原生3D PCB设计软件 https://www.elecfans.com/d/640791.html
16.创客贴平面设计作图神器免费设计模板创客贴,极简好用的平面设计作图软件,在线图片编辑器,免费使用.提供免费设计模板,有海报、名片、公众号图片、PPT、邀请函等65个场景模板,一键搞定设计印刷https://www.chuangkit.com/
17.PBL项目化学习设计全套6册项目化学习工具:66个工具的实践手册作者:夏雪梅等著出版社:教育科学出版社出版时间:2022年10月 手机专享价 ¥ 当当价降价通知 ¥287.50 定价 ¥299.80 配送至 北京 至北京市东城区 服务 由“启航盛世图书专营店”发货,并提供售后服务。 关联商品 国际学习科学手册预见新学习PBL项目化学习设计全套6册PBL项目化学习设计全5册周振宇教育2册 跨学科http://product.dangdang.com/11342953718.html
18.14个免费设计协作工具面临这样困境的设计者,其实可以另辟蹊径,从设计应用工具上寻找解决方案,让使用者方便快捷得到回复,设计方案获得通过的过程更加及时、专业。这种方法特别适合于财政较为紧张的自由设计者和小型设计公司,不仅速度快,而且成本低廉。 下面要介绍的是从众多网上工具中选择了14种协作优化应用工具,这些应用中大都免费,需要付费的https://www.douban.com/note/294424841/
19.3DMax2014VRay3.6渲染设置参数3DMax2018+Vray室内外设计全套教程 本套课程主要讲授室内、室外效果图教程。课程包含:室内家装全套设计、 家具全屋定制工装效果图设计、 展示店面设计、舞台设计等多套实训案例。 徐飞老师 3.09万人在学 基础入门 免费学习> 特别声明:以上文章内容来源于互联网收集整理,不得将文章内容用于商业用途,如有关于作品内容https://zixue.3d66.com/article/details_97063.html
20.工程师必备之10款精选免费设计工具CEDAR逻辑模拟器是一个用于逻辑设计教学或简单的数字设计测试的交互式的数字逻辑模拟器。SourceForge上的主应用程序窗口,允许用户在进行多个项目时在10个不同的页面间来回移动,这使得CEDAR逻辑模拟器成为不错的免费工具。 2. Logisim 2.7.0:类似于CEDAR逻辑模拟器的另一工具 https://www.cbeureka.com/centerdetail/4362
21.iconfonticonfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具https://www.iconfont.cn/
22.简单设计EasyDesign简单设计是一款专业强大的在线设计工具,图片处理工具,包含海报设计、封面图片设计,LOGO设计、图片压缩、图片裁剪、图片格式转换等功能,是一款良心好用的设计神器。https://www.jiandan.link/
23.Affinity创意套件V2发布:648元一次性购买,重新设计UI和数百尽情布置内容 - 只需手指轻触,就可以轻松无缝地制作出精美的布局和设计,以便进行打印或数字出版。 最流畅的工作流程 – 就像台式机版一样,如果您拥有其他 Affinity 应用程序,那么无需离开 Publisher,就可以在它们的各种工具集之间切换。 针对iPad 优化 请浏览下面的一系列功能截图,或查看我们的技术规格页面以了解更多https://www.ithome.com/0/653/516.htm
24.几个免费的设计工具harrychinese我的选择的方案是, 免费, 并且操作要方便(既然是设计工具, 操作一定要方便, 不然就会妨碍我们的思维) ObjectAid(Eclipse插件, 支持Eclipse 3.4.x以上版本). 有时候, 觉得画class diagram是就为了设计而设计, 其实我更习惯直接用IDE写代码, 思维更自由, 还可以随时做refactor, 最终的代码可能和原来的class diagramhttps://www.cnblogs.com/harrychinese/archive/2011/07/13/some_free_design_softwares.html
25.30多个必看的免费网页设计工具从向网页添加 CSS 到插入一些 JavaScript,网页设计师可能会在昂贵的软件上花费数千美元。 对于大型网页设计公司来说,这似乎不是一笔大投资,但自由网页设计师或企业主的预算可能有限。 幸运的是,Internet 上有许多免费的设计工具。 这里有一些免费的 网页设计工具 我们绝对爱。 https://www.itaoda.cn/blog/1592.html