从零开始做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.程序员作图工具和技巧,你get了么?我最常用的思维导图软件是XMind,使用方便、主题丰富: 但一般我不会直接在 XMind 中去写思维导图,而是先编写好 Markdown 文档,然后直接在 XMind 中导入文档就能自动根据标题、列表等元素自动生成思维导图了: 我之前的前端、Java、全栈学习路线的思维导图都是用这种方法生成的,自己一个个编辑真的要累死。 https://xie.infoq.cn/article/9da8fc6e9090c946ab746e158
2.界面原型设计工具怎么布局界面界面原型设计工具如何画界面原型图摘要:设计一款软件时,软件界面的设计是很重要的,一般设计初期会使用原型设计工具来进行界面原型设计,并绘制界面原型图。界面原型设计工具布局界面时,主要考虑界面区域的划分、功能区域的规划和作业区的分类;绘制界面原型图则先画好草图,然后通过原型设计工具绘制即可。下面一起来了解一下界面原型设计工具如何画界面原型图吧https://www.maigoo.com/goomai/265856.html
3.用户体验至上:9款软件界面设计工具分享软件设计工具即时设计——可实时在线编辑的专业设计工具 https://ad.js.design/online/ui/?source=csdn&plan=xy805即时设计作为一款专业的在线合作UI设计软件,可以实现视觉效果、互动效果、体验效果的一站式成型,为您的目标用户创造流畅的体验。 轻松绘制原型:借助即时设计社区设计资源和原型模板,开始敏捷高效的工作。与产品经理一https://blog.csdn.net/2301_79599164/article/details/140926262
4.5分钟轻松上手即时设计交互功能即时设计是由国内设计师团队自研的一款协作式 UI 设计工具,全中文操控界面,省去了使用国外复杂设计工具的”水土不服",同时拥有强大的设计功能,集原型、设计、UI\UX、开发交付于一体,可一站式完成产设研无需切换工具,而且支持矢量图性编辑和高保真交互原型。即时设计可导入 Figma、Sketch、XD 等文件,无缝衔接以往工作https://js.design/special/article/instant-design-software.html
5.最全无代码NoCode和低代码LowBildr构建交互式网站的强大方式。界面就像一个设计工具(例如Figma)而不是标准的网站建设 uibakery:使用其可视化构建器构建前端UI组件,并导出格式良好的Angular代 BubbleVisual Web app builder。空间中的领导者。您可以使用Zeroqode的模板开始或使用他们的如何构建教程 https://www.tanmer.com/blog/707
6.软件开发整体方案详解系统各功能之间的界面包括覆盖范围,模块间功能调用涉及到的系统模块及方法,全局数据格式,系统性能要求等。 第五章 系统详细设计 5.1 系统结构设计及子系统划分 对系统的组成及逻辑结构进行设计前确认。 划分系统功能模块或子系统(如果有或者有必要,特别是大型的软件系统)。 https://www.yjbys.com/edu/J2EE/199522.html
7.《优化》优秀教学设计(通用12篇)《优化》优秀教学设计 9 授课题目: Windows优化大师 教学内容: Windows优化大师的使用方法 教学目标: 1、了解系统优化的目的以及目前已有的优化手段; 2、掌握系统优化工具的使用方法以及不同场合不同对象优化时的手段。教学重点:Windows优化大师的使用方法 https://www.ruiwen.com/doc/1231348547.html
8.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
9.ps学习计划精品文本工具使用方法:点击工具栏中的文本工具图标,选中画布上某一位置,直接输入文本。Ctrl+Enter可以完成输入。可以设置文字大小、字体、颜色、排列等多种参数。 二、PS常用技巧 在使用Photoshop进行设计时,有些技巧会让我们的工作更加高效和便捷。 Ctrl+J:复制图层。选中某个图层,按下Ctrl+J即可复制该图层。 https://www.jy135.com/xuexijihua/1974348.html
10.软件开发实习报告(通用10篇)1)帮助界面的实现,使得学生掌握实验平台的使用方法; 2)实验类别的在线远程更新,用户下载量的统计; 3)UI(用户界面)的调整; 四、任务完成情况 经过两个多月的不断学习和努力,实习项目大部分都顺利的完成了; 首先是天气预报的项目,从百度api获取所查询的城市的天气数据,对其进行解析,在展示到界面上的同时保存最近搜https://www.oh100.com/a/202302/6168148.html
11.ps学习计划在今天这个多媒体时代,图像处理软件成为了设计师必备的一项工具。而其中Photoshop是最被广泛使用的一种,据统计全球有超过90%的设计从业者使用Photoshop。相信很多设计学习者都有一个共同的疑问,如何学习学好Photoshop?这就要求我们需要有一个合理的学习计划。 https://www.unjs.com/fanwenwang/gongzuojihuafanwen/xuexijihua/20230908070023_7539347.html
12.axure是什么软件详细介绍axure原型工具axure软件介绍 Axure RP,简称Axure,Axure(发音:Ack-sure)是一款专业的快速原型设计工具,主要用于创建交互式的、高保真度的原型,以及进行用户体验设计和界面设计。帮助设计师和?产品经理快速创建和共享原型,以便团队成员之间进行沟通和反馈。Axure提供了丰富的交互组件和功能,如可交互的按钮、链接、表单元素等,使用户能https://www.bnocode.com/article/what-is-axure-soft.html
13.基于MatlabGUI的模拟带通滤波器的设计AET也有许多公司开发了相关的滤波器设计软件,如 AnsoftDesigner,Filterlab等,但是它们大多数使用起来不容易上手,而且价格比较昂贵。Matlab中的图形界面编程环境GUIDE为用户开发软件界面提供了强有力的工具。在图形界面编程环境GUIDE下,设计好滤波器的设计工具界面后,对界面上各个控件的回调函数进行编写就能设计出交互式滤波器的http://www.chinaaet.com/article/60501
14.普通物理学(一)课程教学大纲使学生掌握库仑定律、电场强度、电势的定义及计算方法,理解静电场高斯定律、环路定理,掌握电场力做功。 第十章 静电场中的导体和电介质 1.教学内容 导体的静电感应、电介质的极化、电容、电容器、电场能量。 2.教学要点 使学生掌握导体静电平衡条件,理解电解质的极化,掌握电容器及其组合的计算方法,掌握电场能量的计算https://physics.suda.edu.cn/6f/8f/c1873a28559/page.htm
15.Aegisub先进的字幕编辑器软件下载您可以通过使用Lua语言来编写宏或导出滤镜来扩展程序的功能。Aegisub本身也内置了一些现成的脚本,便于您更快捷地生成属于您自己的卡拉OK字幕效果。 Aegisub 软件使用方法 1、在本站下载安装Aegisub软件。 2、安装完成后,打开软件界面如图: 3、首先设置字体的颜色、大小、字体、边框、阴影等属性,尽量不要使用中文。 https://huajiakeji.com/software/2020-05/3283.html
16.AltiumDesigner20电路设计与仿真从入门到精通Altium Designer 20作为新一代的板卡级设计软件,以Windows的界面风格为主,同时,Altium Designer 20独一无二的DXP技术集成平台也为设计系统提供了所有工具和编辑器的兼容环境,友好的界面环境及智能化的性能为电路设计者提供了优质的服务。 Altium Designer 20有什么特点?如何安装Altium Designer 20?PCB的总体设计流程有哪https://www.epubit.com/bookDetails?id=UBbf365ac27387
17.Axure中的格式刷使用方法Axure中的格式刷使用方法 大家好,我是小溜,相信很多小伙伴都不知道Axure中怎么使用格式刷,那么为了能给大家带来帮助,下面小溜就来给大家分享下方法,希望本文内容能够给大家带来帮助。 溜溜自学网还有超多“Axure RP”视频课程,欢迎大家点击查看 工具/软件https://zixue.3d66.com/article/details_139687.html
18.BIM软件使用指南:快速入门功能介绍与最佳实践BIM免费教程BIM(Building Information Modeling)是一种基于数字化建模的技术和过程,它提供了一种综合的、协调的建筑设计、施工和运维的方法。BIM软件是实现BIM技术的关键工具,它能够帮助建筑设计师、工程师和施工人员更好地协同工作,提高项目质量和效率。本文将详细介绍BIM软件的使用指南,包括快速入门、功能介绍和最佳实践。 https://m.tuituisoft.com/bim/62162.html
19.7000字超多神器!腾讯设计师也在用的高效设计工具优设网随着云计算的发展,界面设计工具也在逐步走向云端化。设计从本地转向云端,不再依赖于本地硬件的性能,云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制,只要有网络,设计师可以随时随地的工作,临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方,变成发送链https://www.uisdc.com/design-tools
20.MasterGo我们知道 Sketch 和Figma 都是国际流行的设计工具,但 Sketch 仅有 Mac 版,Figma 也因美国制裁禁止大疆使用的事件闹得沸沸扬扬。加上定价都很高,使得这两者都难以适合国人。 MasterGo 是一款能替代 Sketch、Figma、AdobeXD 甚至是 PS 的国产免费 UI / UX 矢量设计工具!它提供了产品界面设计、交互原型制作、网页/https://www.iplaysoft.com/mastergo.html
21.python做232通讯python做通讯软件图2.4 新建工程方法2 图2.5 基本配置 图2.6 工程界面 图2.7 新建一个Py文件 输入文件名之后,然后我们回车,即可在工程目录下创建一个py文件,这里示例的是“mainsample.py”文件,如图2.8所示。 图2.8 程序主界面 3 软件界面设计 3.1 打开设计工具 若您还未配置工具,请点击访问参考 https://blog.51cto.com/u_16213637/7378498
22.共有13款界面原型设计工具开源软件菰☆淚共有13款界面原型设计工具开源软件软件过滤:排序:收录时间|浏览数界面原型图绘制工具PencilPencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样。Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击这里安装)。更多Pencil信https://www.cnblogs.com/xly1208/p/3464666.html