从零开始做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系统界面的设计软件有哪些?还支持一键套用!不知道刚刚入门的你们在进行 APP系统界面设计时会不会有这样的疑惑,因为刚刚入门没多久,想做一些 APP 系统界面的设计来练练手,但是不知道 APP 系统界面的设计软件有哪些,阻碍了我们学设计、做设计的进程。今天我们就来给大家介绍 7 个 APP 系统界面的设计软件,还支持一键套用,非常的方便。他们分别是:即时设计、https://js.design/special/article/app-system-interface.html
2.APP界面设计软件有哪些?2022年软件排行榜单公布!对于设计师而言,设计APP界面最关键的是,设计师是否选择了一款高效的APP界面设计软件。APP界面设计软件不仅可以帮助UI设计师和产品经理提高设计效率,还是APP界面设计设计灵感的来源。所以,今天Pixso特意为大家整理了2022年十款值得收藏的APP界面设计软件,赶紧码住使用起来吧! https://pixso.cn/designskills/jmshejiruanjian/
3.app界面设计软件有哪些app界面设计分析app界面设计软件有哪些-app界面设计分析 根据客户互动感受,APP网页室内设计师打造出的页面设计,使APP页面设计不但有着与众不同的个性化和品位,还能给消费者产生舒服,随意,优良的視覺感受,更合乎人们在操作过程中的认知能力习惯性,给消费者产生设计方案上客观与方便快捷的双向感受。https://www.dkewl.com/course/detail7444.html
4.APP界面设计用什么软件?推荐9款热门设计软件appAPP界面设计是APP开发过程中的一个关键阶段,APP界面设计的细节决定了APP的成败,APP界面设计是否美观大方,决定了用户对APP直接的视觉评判,大部分用户给予肯定的APP界面设计,必然蕴含着设计师对每一个细节的用心设计,想要创作出令人惊艳的APP界面设计,一款高效的APP界面设计软件必不可少,云南才力罗列了9款热门APP界面设计https://www.yncaili.com/21244.html
5.手机App界面设计专用软件推荐嘿,朋友们!你是不是正在为手机App界面设计苦恼不已?别担心,我给你推荐几款专用软件,让你的设计之路变得轻松愉快!这些软件不仅功能强大,而且操作简单,非常适合设计师和UI爱好者们。快来看看吧! 1.我要推荐的是“Design Tools”(“设计工具”)。这款软件提供了丰富的设计资源和模板,帮助你快速创建出色的手机App界面http://www.apppark.cn/t-53419.html
6.桌面/手机APP软件界面设计软件UI设计经验案例欣赏APP软件界面如何设计?提供桌面/手机软件UI设计经验和案例欣赏。如果您有软件界面设计需求并寻求专业UI设计师帮助,欢迎咨询艾艺-专注于UI设计、交互设计及用户体验设计的公司。http://adt.adinnet.cn/tag-98.html
7.软件界面设计软件UI设计APP资源资源浏览查阅11次。AxureRP6.5-Pro-Setup是一款可视化界面设计器,可用于软件开发行业,讨论流程蓝图时,UI设计APP更多下载资源、学习资料请访问CSDN文库频道.https://download.csdn.net/download/jiejjjie0820/10858353
8.APP或软件界面UI设计APP或软件界面UI设计 风格:2-3k 内页(除去首页)300-500/P,含切图 苹果和安卓双系统按单系统总价的30%计算 Add:上海市宝山区真华路926弄第三空间2号楼710室Tel:18918556877E-mail:cassie@xy-media.cn Copyright ?2023-2025 Shanghai Novel Media Culture Communication Co,Ltd All Rights Reserved沪ICP备110http://www.xy-media.cn/page133?product_id=2630
9.在线设计协作软件,Web/app界面设计工具,免费云端字体自动布局,实现响应式设计 自动适应内容大小:从一个按钮到整个页面的尺寸,可根据内容的大小或数量,自动调整宽高。 响应式设计:设计尺寸、内容有变化,界面将自动调整布局,实现响应式设计。 快速调整位置:移动、增加或减少列表中的元素时,整个列表会自动排列。 https://mastergo.com/design
10.软件程序设计,app功能界面设计模板这是一款经典的svg+css的ui界面,软件程序设计,app功能界面设计模板,3个app功能界面设计,100%响应,可灵活使用,供大家参考。https://www.17sucai.com/pins/55475.html
11.UI设计APP界面网页界面手机端WAP端PC软件端界面设计ui界面设计交互设计,移动应用设计,网页设计,软件界面设计,平面设计,设计一切与图片有关的项目.价格: ¥10.00 立即购买 5.00分 保障: 消保赔付 担保交易 支付方式 若交易失败(退款),您可以额外获得交易额5~10%的消保赔付金。商品详情 交易评价 交易规则 防骗指南 ui设计微信小程序界面设计app设计网页设计psd界面设计后台https://www.huzhan.com/serve/goods4538.html
12.软件界面设计软件界面图片软件界面模板觅知网为您找到3979个原创软件界面设计素材,包括软件界面样式,软件界面图片,软件界面样本,软件界面格式下载服务,更多关于软件界面模板就来觅知网。https://www.51miz.com/so-sucai/1603282.html
13.软件界面设计界面素材图片UI/UX图片素材花瓣网,设计师灵感库,素材图库分发。发现你喜欢的软件界面设计图片,软件界面设计灵感图,将你喜欢的界面软件界面设计素材采集到UI/UXhttps://huaban.com/explore/ruanjianjiemiansheji/
14.软件界面图片软件界面设计素材红动中国素材网提供434个软件界面图片、软件界面素材、软件界面背景、软件界面模板、软件界面海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品软件界面设计素材下载,就来红动中国,最后更新于2024-12-17 19:45:10。https://m.redocn.com/so-moban/c8edbcfebde7c3e6c4a3b0e5.htm
15.触达用户的心,成就伟大的软件!北京UI/UE设计软件界面设计触达设计-触达用户的心,成就伟大的软件!北京UI/UE设计 | 软件界面设计 | 交互设计 | 软件服务设计整体解决方案。http://www.top-ui.com/
16.我要买UI设计软件大屏界面网页前端静态切图移动APP**小程序外包界面原型/框架设计icon/图标设计界面设计行业门户网站电商网站政府门户网站扁平风格3D风格插画风格极简风格 擅长:VI设计 LOGO设计 包装盒设计 包装袋设计 网站UI设计 网站定制开发 PC软件UI设计 APP UI设计 小程序UI设计 智能终端UI设计 案例:公司网站UI网页设计企业政府官网首页界面活动页面专题门户落地,APP手机移动端UIhttps://task.zbj.com/43EytNesNLZcovGV
17.软件界面UI设计软件界面 会员登录 用户名: 密码: 忘记密码 多媒体设计→ 软件界面 ·葡萄牙设计师 Tiago Leitao APP设计[2024-12-17] ·Apple Watch UI-音乐APP设计[2024-12-11] ·金融科技手机银行APP设计[2024-12-10] ·Netlight Smart Home Mobile app设计[2024-12-09]http://www.visionunion.com/interface_topic.jsp?query_subtopic=ebb
18.UI实战教程!从零开始做APP系列之界面设计篇优设网UI 设计师从零开始做一个App 要经历哪些流程?这个系列的文章会为新手一一讲解。本篇会为你讲解界面设计中基础的知识点(设计稿尺寸、图标/字体设计等),实用高效,新手来收。https://www.uisdc.com/basic-interface-design-knowledge/
19.创意UI——Photoshop玩转APP设计1.7.3 常见APP 界面色彩 37 1.8 哪些你不可不知的APP 分类 38 1.8.1 应用程序 38 1.8.2 欢迎界面 39 1.8.3 游戏App 设计 39 1.9 制作APP 常用的设计软件 40 1.9.1 Photoshop CS6 40 1.9.2 Illustrator CS6 40 第2 章 APP 设计的特点和用户体验 https://www.shuyishe.com/bookDetails?id=UB2018100000f1f2
20.谁说安卓软件简陋?最美5款App:简直是一种享受那么利用该设计的App,美观程度到底可以渠道什么程度?我们一起来欣赏一下Google评出的2016年设计最漂亮的5个App! Adobe Illustrator Draw 身为设计行业巨头的Adobe,旗下的软件怎能少得了美观设计!这款Adobe Illustrator Draw,是一款绘制矢量图的App。功能强大自不用说,它的界面也赢得了设计师们的好评。Adobe Illustratorhttps://news.mydrivers.com/1/516/516714.htm
21.app登录界面设计app登录界面图片包图网商用版权放心用,为您提供274张app登录界面设计,app登录界面图片等商用版权内容,帮助用户轻松搞定设计需求,尽在包图网!https://m.ibaotu.com/tupian/2896926.html
22.app开发ui设计需要什么软件?5. Axure RP:Axure RP是一款高级的原型设计工具,主要用于创建复杂的交互式原型。这款软件通过组件库和高度可配置的选项,使设计师能够轻松实现各种交互效果和逻辑。适用于传统的用户界面设计和基于物理设备的产,Axure RP支持文档生成、版本管理和在线共享等功APP开发能。 https://www.yimenapp.com/kb-yimen/26190/
23.手机APPUI界面设计原型草图手机APP界面UI设计原型草图任何一位设计师在设计APP软件时,都会对该APP的功能、界面布局、菜单设置、内容架构等方面进行详细的策划。只有在充分的策划前提下,才能通过应用软件的加工,将脑海中的构想变成一个个的APP界面UI设计图形。凭借草图,设计师也可从宏观的角度时刻把控APP设计的每一个细节。以下为一款购物平台APPhttps://www.renrendoc.com/paper/103933801.html
24.APP工作界面设计图片免费下载APP工作界面设计素材千图网为您找到3682张APP工作界面设计相关素材,千图网还提供APP工作界面设计图片,APP工作界面设计素材, APP工作界面设计模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/APPgongzuojiemiansheji.html
25.Principle6.36界面交互设计软件界面交互设计软件Mac下优秀的移动的界面交互设计软件,提供流畅的动画设计,让交互设计变得更容易。支持多种设备尺寸。 预览 应用介绍 Principle使动画制作和界面交互设计变得更加容易。简短的动画、流畅的交互或复杂的应用程序,都可以用Principle来制作。 Principle支持多种尺寸的原型设计,并且允许链接到其他iOS设备上查看,或https://www.macbl.com/app/graphics-design/principle
26.10大APP界面框架设计模式详解随着移动互联网的发展,移动app已经成为了每个互联网公司的标配了,那作为产品经理,我们如何设计出更加符合用户体验的app产品呢?今天和大家分享的就是10中最常见的app界面光甲设计模式,一起来看看吧。 1.标签导航 标签导航是十大界面框架设计里最常用的界面框架设计,也是被业界之内公认的一种普遍使用的页面框架设计。那么https://www.douban.com/note/580250431/
27.移动端界面设计课件项目34手机APP的界面设计Android系统移动端界面设计 课件 项目3、4 手机APP的界面设计、Android系统.pptx,移动端界面设计 ;任务1——制作APP首页 3.1.1任务情境 小明接到设计师老师的通知,要设计一个APP的首页。这个APP已经确定好功能定位、流程图,已经有了页面的原型图。设计师告诉小明只需要按照IOS二倍图https://max.book118.com/html/2024/0611/8140006125006077.shtm
28.软通动力电信服务根据企业的发展战略、业务流程和现有信息化水平,规划企业业务架构、IT架构和软件研发。 能力优势 技术先进性 SOA的设计模式,使得系统在组织结构梳理、工作流程处理、用户人员操作都更加简捷。 APP和界面设计 众多资深产品策划工程师,根据客户需要提供全面的移动营销产品策划方案。专业的APP和UI设计师,优秀的美工和操作交互https://maimai.cn/article/detail?fid=732606385&efid=RcF_-sSrs_RBYaeJw8kXeQ