从零开始做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.50个设计简约的移动APPUI设计作品设计达人对于设计师来说,经常浏览一些新颖的设计作品是非常重要的,特别是入门或进阶级别的设计师更需要多看、多想、多做,以便获得更好的灵感、创意,并追求不一样、不重复的设计来提高自己的水平。 今天和大家分享50个设计简约的移动 APP UI 设计作品,所有界面都是以简洁风格为主,看起来舒服美观,案例包含注册页、数据页、商...https://www.shejidaren.com/50-simple-app-ui-designs.html
2.做页面设计的软件有哪些APP推荐做页面设计的软件有哪些下载豌豆荚做页面设计的软件有哪些榜单为您提供最新做页面设计的软件有哪些大全,这里不仅有做页面设计的软件有哪些安卓版本APP、历史版本应用下载资源,还有类似做页面设计的软件有哪些的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/397385/
3.APP下载页面设计图片免费下载APP下载页面设计素材千图网为您找到264张APP下载页面设计相关素材,千图网还提供APP下载页面设计图片,APP下载页面设计素材, APP下载页面设计模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/APPxiazaiyemiansheji.html
4.App中的空白页面设计指南空白页面,或者说缺省数据页面(例如没有任何联系人的通讯录和没有任何聊天记录的微信),通常都是在设计过程的最后阶段才被考虑。有些时候,甚至会被遗忘。直到某个开发同学提出疑问,『这个页面,如果没有数据的时候,应该显示什么内容呢?』 今天翻译的这篇文章,作者从用户首次接触产品,还没有内容/数据/好友的情况入手,...https://www.bandianxiang.com/info/olYAeC
5.移动APPUI页面设计设计服务花瓣美思APP产品原型设计 ¥1999/个 H5页面设计 ¥2399/个 加急服务 加急服务,3天完成 ¥259 Rocky27聊天 实名认证已认证 UI设计师,3年设计工作经验,目前服务于广州麦光信息科技有限公司任产品及设计总监职位,负责公司整体产品、视觉、UI等设计管理及指导工作,曾在电信翼支付任产品经理职位负责产品设计工作,设计侧重企业商务...https://muse.huaban.com/services/1MaQSUHZLSC
6.APP的引导页面设计理念APP的引导页面设计理念 当你第一次打开一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的好坏会极大地影响到后续的产品使用体验。因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜。那接下来我跟大家一起来探讨关于引导页的设计。 https://www.sdada.edu.cn/info/1092/2575.htm
7.app首页app首页图片app首页设计模板酒店网站公寓旅行住宿下单页面设计立即下载 全套生鲜商城APP页面设计立即下载 智能wifi灯全套APP界面设计立即下载 手机端算命首页模板立即下载 简约音乐APP界面设计立即下载 信用卡app首页模板立即下载 投资产品ui界面立即下载 支付钱包APPui界面立即下载 兼职服务类app首页模板立即下载 ...https://so.redocn.com/tupian/617070cad7d2b3.htm
1.一文帮你从零开始学习APP页面设计3、明确 APP 页面设计尺寸和页面设计规范 草图绘制完成之后,是不是觉得就可以直接绘制低保真原型了呢,其实不是的。在绘制低保真原型之前要明确自己设计的 APP 界面尺寸和界面设计规范。在制作 APP 页面时,APP 界面尺寸和界面设计规范极为重要,它们的准确性越高,后续工作就会越顺利,反之,准确性越低,后续过程将越繁...https://js.design/special/article/app-page-designing.html
2.app页面设计素材app页面设计图片app页面设计模板设图网为您提供app页面设计设计素材、app页面设计图片、app页面设计背景、app页面设计设计元素、app页面设计模板在线下载。更多app页面设计设计素材,就选设图网。https://www.shetu66.com/so-sucai/appyemiansheji/
3.手机app页面设计图片在线编辑魔力设在线设计平台提供手机app页面设计图片在线编辑和下载,包括手机app页面设计模板、手机app页面设计图片、手机app页面设计素材。即可下载PSD源文件,也可以直接在线编辑制作,无需PS,1分钟快速出图。http://www.51mo.com/s-templates/270655.html
4.uni个人中心页面很常用,几乎每个app里面都少不了。同时个人中心页也较简单,可以作为UI项目练手,熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面,并详细介绍从零的实现过程,分享给有需要的小伙伴,需要的可以收藏。 基本流程 在uni-app中设计个人中心页面,通常需要考虑以下步骤: ...https://blog.csdn.net/yyz_1987/article/details/139260302
5.剖析APP启动页面设计剖析APP启动页面设计 不管一个产品的启动页呈现哪种形式,都不应该忘了启动页存在的根本原因:为了减少用户在等待APP启动时的焦虑感。 心理学上有一个“7秒理论”,说的是,一个人对另一个人的印象,在初次见面的七秒内就会形成,最近更有研究表明,这个时间可能更短——不到1秒。所以初次见面所展示的形象真的很重要...https://www.cdcxhl.com/news/165136.html
6.UI设计中的APP页面有哪些?UI设计必须知的APP页面分享身为UI设计者,我们需要了解一款APP主要由哪些主要页面组成,每个页面的功能和特点。只有将APP的页面给弄懂了,那么才能够合理化的进行UI设计出一个满意的UI设计作品!说到这里,可能不少新手UI设计师对于APP的页面有哪些都不知道,因此本期主要为大家分享一下UI设计中的APP页面,这些UI设计APP页面必须知道~另外,想要深入学...https://www.yutu.cn/news_36084.html
7.app界面个人中心页面设计模板app个人中心页面模板 相关标签 个人中心app界面设计手机app界面设计app界面手机app导航菜单ajax选项卡选项卡滚动切换3d标签云上下文字滚动text文本框邮箱提示表格内容筛选浮动框顶部弹出层竖直滑动门投票打分日期选择器水平滚动条美化hover导航插件文字特效竖直手风琴select图表插件 ...https://www.17sucai.com/pins/14919.html
8.华人创业者的短视频App,Clapper冲到总榜第4澎湃号·湃客从App 的页面布局上看,Clapper 和 TikTok 引入 friends 菜单之前的页面设计更像。主页按照“我的关注”、“推荐”和“同城”分成了 3 条信息流,短视频右侧也设置了音乐模板、点赞、评论和分享按键。 不同的是,Clapper 允许用户点踩视频、但无法收藏短视频,而是可以直接下载至本地、而在短视频右侧,Clapper 专门设...https://www.thepaper.cn/newsDetail_forward_22490965
9.H5设计与App界面设计有什么不同?当我们谈论H5与APP界面设计的差异时,首先要明确二者的本质区别。APP是安装在手机上的独立应用程序,而H5页面则是可在浏览器和微信等平台上打开的网页。这种差异导致了它们在开发周期、更新迭代、传播性和多平台支持方面有着显著的不同。 在开发周期上,H5页面通常基于现有的前端技术进行快速开发,而APP则需要同时开发前端...https://www.yoojia.com/ask/17-14059420169100412890.html
10.以旅游APP设计为例,聊聊UI设计师分析设计需求的思维方法只有这样,设计师才能非常清楚的明白,每个页面需要重点向用户传达什么样的信息,从而设计出合理且符合用户喜好的页面视觉效果。因此,学会有效的分析原型需求是非常必要的。那么,UI设计师拿到原型图,该从何处着手进行分析?需要分析些什么?今天,Pixso设计师以旅游APP为例,分享UI设计师对原型进行需求分析再设计出UI视觉稿的...https://pixso.cn/designskills/a-ui-designers-way-of-thinking-about-design-requirements/