从零开始做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.免费的字体设计用什么软件APP推荐免费的字体设计用什么软件下载在办公和广告推销等领域经常会进行文案的设计和海报推广,字体就显得尤为重要,今天小编来讲一下2022免费的字体设计用什么软件。一些非常有个性的字体能够瞬间抓住读者和观众的注意力,从而达到吸引流量效果。而想要设计出这样字体必须由专门软件辅助,小编推荐这些都是免费使用,而且效果非常好。 https://www.wandoujia.com/bangdan/402118/
2.十大热门手机字体软件手机换字体app哪个好安卓字体软件推荐→字体APP 十大练字软件 荐 十大识字软件 通过设置字体,每个人的手机都能打造出独一无二的风格。现在市面上的字体软件app有很多,那么你知道字体软件哪个好吗?本文中买购小编就带大家看一份热门手机字体软件名单,一起来了解下手迹造字、字体美化大师、字体管家、方正字酷、QQ炫字体、炫字体、花样文字等手机字体修改器https://www.maigoo.com/top/430572.html
3.字体软件app排行榜前十名偏玩手游盒子分享十大字体软件app排行榜前十名手机应用,编辑为您推荐手机字体软件app排行榜第一名到前5名到前十名的应用。找字体软件app有哪些、字体软件app哪个好用,上偏玩手游盒子https://m.pianwan.com/s/zj-1084633
4.字体大全下载安装历史版本 标签:字体设计字体 介绍 小编精选数百款中英文字体, 下载、导出、安装支持字体预览,文案选择,晒图分享可用精美图片+精选文案+你喜欢的字体生成制作属于你的个性图片,用于分享与发送朋友圈 开发者:辽宁鲲鹏科技有限公司 备案号:辽ICP备2020014602号-3A 字体大全app下载安装失败或使用异常,请 -> 一键举报猜https://m.liqucn.com/rj/938483.wml
5.在线设计协作软件,Web/app界面设计工具,免费云端字体免费使用 自动布局,实现响应式设计 自动适应内容大小:从一个按钮到整个页面的尺寸,可根据内容的大小或数量,自动调整宽高。 响应式设计:设计尺寸、内容有变化,界面将自动调整布局,实现响应式设计。 快速调整位置:移动、增加或减少列表中的元素时,整个列表会自动排列。 https://mastergo.com/design
6.字体设计app软件大全字体设计app推荐下载PP助手为您提供字体设计app有哪些大全推荐,在这里我们为您提供字体设计app有哪些软件下载资源,字体设计app有哪些安卓版本、官方版本&老版本下载地址合集,还可查阅相关字体设计app有哪些攻略大全,欢迎到PP助手下载。https://wap.pp.cn/topic/493952/
7.免费更换字体app有哪些免费更换字体app推荐免费更换字体app推荐更换字体app通常具备字体对比功能,让用户能够方便地比较不同字体之间的区别,以便选择最合适的字体,一些高级字体软件还提供字体设计功能,允许用户创建自定义的字体,包括调整字体的字形、大小、粗细等参数,软件可以帮助用户管理计算机上已安装的字体,方便用户查看、筛选和选择合适的字体。https://app.ali213.net/heji/mfghztapptj.html
8.Android实现获取系统免费字体并修改只app内显示字体9. OPPO Sans:一款 OPPO 推出的富有现代感的免费字体 「OPPO Sans」 是 OPPO 全新品牌字体,由 OPPO 与国内知名字体厂商「汉仪」合作开发出的富有现代感和科技感的全新中文字库。 效果如下: 下载地址:又一款免费商用中西文字体:OPPO Sans(附下载) | 设计达人 https://blog.51cto.com/u_16213719/11823068
9.Fontiyapp下载Fontiy(手写字体设计)下载v1.6安卓版Fontiy是一个手写字体设计工具.在手机上制作一款原创手写字体,应用会自动保存您的书写草稿,方便用户随时阅览字体、查看字体设计进度.使用Fontiy软件,轻松制作各种优雅的手写字体.欢迎感兴趣的用户来IT猫扑下载应用! Fontiy app介绍 Fontiy(手写字体)在设置一个你的专属字体,只需要轻松的几步就能将你的手写英文字体变成https://m.itmop.com/downinfo/330327.html
10.免费字体app下载免费字体安卓版下载[系统工具]字体多多是一款汇聚数千种免费字体资源的APP,涵盖卡通、炫酷、书法、手写等多种风格。此外,还提供签名制作、字体设计和时尚背景元素,让用户轻松变身字体达人,尽享创意乐趣。快来加入字体多多的行列,体验字体带来的新潮风尚! 应用介绍 字体多多为您提供数千款新颖字体免费下载,卡通,炫酷,书法,手写等字体https://www.downza.cn/soft/10430381.html
11.免费设计签名的软件哪个最好用免费设计签名的app合集分享免费设计签名的软件哪个最好用-免费设计签名的app合集分享 你也想像明星一样拥有着一个非常炫酷的个性签名嘛,那就下载一款专业设计个性签名的软件,来帮助自己设计一个最炫酷的个性签名吧,这些软件都是免费使用的,不需要担心收费的问题。 总共6款更新时间:2023-06-26https://www.juxia.com/sjwy/heji-9693.html
12.免费logo在线制作,logo设计,logo在线生成,字体logo设计,U钙网U钙网遵循标志logo设计理念的艺术规律,创造性地探求恰当的艺术表现形式和手法,使所设计的标志logo具有高度的整体美感、获得最佳视觉效果。 最新原创设计更多 免费LOGO设计案例 最新图标字母图标动物图标厨师美食房屋建筑植物图标龙凤神兽商标设计文字设计欧式花纹 https://www.uugai.com/
13.RightFont:字体管理工具的入门指南RightFont 立即开始下载并同步 Google 字体库。 所有字体下载成功! 六、如何更快地找到字体 打开RightFont,并点击搜索按钮。 在弹出的窗口内,选择您需要的搜索条件。 搞定! 七、如何使用免费的图标 打开RightFont ,开始搜索。 从搜索结果中选中您想要的图标,并拖拽到您的设计 app 内。图标会保持其各自的矢量形式。 https://www.jianshu.com/p/db8f2e34c74b
14.艺术字设计免费生成器APP生成字体分类发现字体最后更新: 2024-12-16 共 6个字体 简介: 艺术字设计免费生成器APP TT Firs Neue Trial Var Roman语言:英文 下载 Cru-chaipot-mymoon-blod-ltalic语言:英文 下载 Sangreal语言:英文 下载 Dhealova语言:英文 下载 KG HAPPY语言:英文 下载 Betina语言:英文 http://www.qiuziti.com/fontlist2?id=1045366
15.免费更换字体的软件有哪些?手机上可以更换字体的免费app推荐大家日常生活中都有更换手机字体的需求,改变手机电脑画面的字体,轻松定制字体,打造不一样的桌面效果,小编为大家整理了好用的免费更换字体的软件,各种常用的楷体、圆体、宋体等这里都有,还能发挥个人的创意设计独一无二的字体,一键轻松更换字体,满足大家的需求。 http://www.downcc.com/k/ghzt/
16.字体大全免费使用软件app下载1、一键下载喜欢的字体至本地,并通过内置管理器轻松管理,每款字体都附带详细授权说明,保障用户权益,避免法律风险。 2、部分字体附带设计师介绍和创作故事,增加使用的文化内涵,内置设计师交流平台,分享经验,获取行业资讯。 【字体大全免费使用软件app下载 亮点】 http://www.lenosoft.com/down/5957.htm
17.手机字体app哪个好用手机字体app推荐手机字体软件免费下载推荐理由:ROOT精灵是一款超便捷的安卓端一键ROOT工具,能够轻松获取到手机的root权限,可以实现卸载顽固应用、更换手机字体、去除应用广告等高级功能,成为真正的手机主人。root精灵最新版又新增了桌面主题、手机截屏、游戏修 下载大字极速版app 2022-11-2573.4M v4.3.46.03 最新版 推荐理由:大字极速版app下载,一款对https://www.qqtn.com/qqkey/sjztrjdq/
18.字体美化大师2024官方下载字体美化大师app最新版本免费下载在这里,你可以放任自己,充分发挥你的设计灵感!你可以根据个人喜好随意选择和搭配,创作属于自己的主题桌面风格。当每一款精心挑选风格迥异的字体摆在你面前的时候,心中那份小小的激动是不是已无法抑制。来吧,让你的手机主题和桌面与众不同,开始华丽变身吧! 1. 超丰富的字体库:涵盖各种经典的免费字体https://android.myapp.com/myapp/detail.htm?apkName=com.mylikefonts.activity&info=C93401F06315685E8B060E0665E4BC98
19.APP设计常用字体以及字体打包下载(含中英文字体)APP设计字体是我们每一个app设计师必须要下载的字体,下载这些字体尽可能的保证设计稿的效果跟真机上的效果一致。 虽然,25学堂之前分享了一些APP设计字体,https://www.25xt.com/appdesign/13733.html
20.练字大师字体下载手机版免费软件练字大师字体下载手机版免费软件是一款专为练习书法而设计的软件,可以帮助学生和书法爱好者提升书写技巧和水平,用户可以根据自己的喜好和需求,选择字体、字号、墨迹颜色等个性化设置,以更好地适应自己的书写习惯和审美观,而且,练字大师字体下载手机版免费软件具备智能识别功能,能够实时检测用户书写的准确性和规范程度,并提供https://www.wfdown.com/soft/13083.htm
21.字体下载字体电脑版下载字体app2024下载电脑字体软件用于管理、浏览和安装字体,以及进行字体的设计和编辑。电脑字体软件不仅可以帮助用户更好地管理自己电脑中已有的字体,还可以通过下载新的字体来满足用户的需求。同时,它们还提供了丰富的字体效果和特殊字体样式,让用户可以轻松地为自己的文档、设计和网站添http://www.onlinedown.net/zt/80286/
22.免费字体app下载免费字体app大全免费字体app大全:可以免费使用和分发的字体免费下载。这些软件中内置了超多这类的免费字体,具有多种风格和语言支持,以满足不同的排版和设计需求,完全免费没有任何的套路。更新时间:2023/11/10 15:59:37华康少女字体 v1.0 等级: 7.9 2023-11-09 2.2MB 简体中文 下载 推荐理由: 华康少女字体是一款好看的字体,https://www.92sucai.com/ruanj/mfztappdq/