设计app 以及切图 标注 单位

设计app 以及切图 标注 单位_第1张图片

 从上图可以知道,在整个过程中,设计师的工作可以分为做人和做事两大类。

学会做人

楼主将这个放在做事的前面,特意强调了一下它的重要性。人的本质是一切社会关系的总和。

同事之间会有部门、职位、年龄、婚姻状况等各种不同的情况,是除了家人之外跟自己相处时间最久的一类人。跟合作的部门同事相处融洽,信息沟通顺畅,帮助他们解决问题,是用最直接的方式去锻炼自己了解人性,了解人的需求,以及解决这些需求满足这些需求的过程。

在团队中每个人的分工和职责如下:

BOSS:关注的重点在于关注市场的走向,实现商业的盈利,产品的质量,以及控制实现过程中的开发成本。

PM:在和BOSS沟通完善的前提下,输出PRD(Product Requirement Document,即产品需求文档)文档。而MRD(Market Requirement Document,即市场需求文档)、BRD(Business Requirement Document,即商业需求描述)在这里就不是必须的,可能有也可能没有。这样只是效率更高。

开发工程师:分为服务器和APP两部分的开发。负责服务器的开发可能还要考虑产品的架构搭建,负责APP实现的开发则可能关注于APP的逻辑跳转和与服务器数据之间的传输过程。QA负责产品的测试。

设计师:在理解以上三者意愿的情况下,设计出可视化的方案,交与工程师进行开发。

TPM:项目管理者,把控着时间节点,平衡团队资源分配。(可能有的团队这项工作由PM做)

可以看到在人员职责中有两点比较重要,一是负责做事,二是负责把控时间。

学会做事

我们在做事其实是在帮人在解决问题,说到底也是在做人。而这个人,就缩小到社会上某类有共同需求的用户。

设计师在项目开发中落实到实战是在产品设计阶段和开发阶段。

产品设计阶段,在拿到PRD文档之后,开始分析,画出简单的流程图,然后在流程的基础上输出低保真原型图,即low-fi。low-fi的标准是示意,表达出每个页面有哪些元素,页面之间的跳转关系是怎样的。

当low-fi得到大家的一致认同之后,就开始着手到高保真效果图阶段,即high-fi。需要实现页面完整的UI,以及整体的UI规范。画出精致的icon,放上精美的图片。是一项可以真正拿得出手,产生商业价值,让用户可以使用的,拥有完整视觉效果的产品。

high-fi阶段过后,进入制作动态原型阶段。这个阶段的任务就是快速做出可以在手机上演示的demo,让团队成员体会是否有体验不顺畅的地方,如果可以的话拿给用户去体验,进行小规模的测试。这一阶段就是在产品开发之前进行验证,查漏补缺的一个过程,避免产品犯原则性或者交互上出现大的、方向性的错误。

Demo演示完成之后,设计师就需要整理好文档并导出资源,将主要的工作就交给开发人员了。而设计师的工作还没结束,设计师需要随时准备好回答开发人员抛过来的一些问题,得到解决方案。还有,着手下一个版本的设计工作,以及在这一个版本需要改善的体验,都可以开始准备。新的一轮工作又开始了~

设计app 以及切图 标注 单位_第2张图片

创业公司扁平化的管理方式,使得团队精致而又高效。在团队成员密切配合的情况下,可以实现产品的快速开发和迭代,形成小步快跑的节奏。当然也有它的弱点,就是没有太多的时间去做细致。但在市场快速更替的情况下,快速试错然后改正何尝不是一种优点?

立项

在立项的过程中,总时长不确定,如果项目比较赶,可能经过半个月左右的时间去做,如果想考虑更周全,可能2个月左右。现在咱们就拿最短的时间为主进行说明吧。半个月在工作时间来看其实就是,10天(2个礼拜)的工作内容加上最后一天的总结。

主要的思路是:Boss看中一个商机,然后由一个商业机会延伸出来某个产品的功能,再在这个功能上进行产品完善,最终目标是做出MVP(Minimum Viable Product ,即最简化可实行产品,MVP是一种产品理论,这个概念听起来复杂,不过你可以把它想像成是一部电影的剧情大纲,或是一部漫画的角色介绍)。

在立项的阶段,基本上每天都会有会议,会议的参与人主要是PM和设计师以及项目负责人,Boss只是阶段性查看一下成果,工程师偶尔参加。主要由项目负责人来push进度,当然,项目负责人也有可能就是PM本身。

每天大家都会进行一次一两个小时的头脑风暴,根据前一天的结论,大家会后去翻阅资料,自己先给出完整的总结之后,第二天再进行讨论,如此反复。也不那么绝对,可能遇到的问题比较麻烦,大家就多花点时间做研究或者直接做一些demo上手试试看效果。

此时PM的任务非常重要,需要在众多的idea中筛选并且保持产品核心功能和目标用户不变。所以,一个优秀的产品经理,一定是原则性非常强,并且在众多压力下能够有充分的能力让大家信服。

设计app 以及切图 标注 单位_第3张图片

在立项阶段有几个特点:

1. 变动时常有

楼主知道,不管是设计师,程序员,都非常讨厌需求的变动。变动意味着所有的设计稿和代码都得重新进行,一片心血付诸东流。PM也会受到大伙所有的喷子(PM确实不好当啊)。但是在立项阶段,设计师需要告诉自己的是:让自己了解产品更多的走向,给产品更多发挥它价值的空间,不要太限制住自己。哪怕是MVP已经完成,产品走向迭代的过程,也不要抱怨变动,每一次的变动都有可能是纠错的过程,每一次的变动都意味着产品与市场联系地更加紧密。

2. 功能越核心越好,产品越简单越好

在立项阶段,团队的目标就是,用最短的时间做出能够马上放到市场上进行验证的MVP。这个时候市场反馈在产品上最好更改,甚至产品的方向也能马上进行调整。MVP 的功用就是让你拿来接触客户,从很早就根据客户的回馈来改进你的产品。典型的错误就是窝在家里做没人要的产品 ,却自以为很有进度。大家的经验是,使用者要的东西往往是非常容易做的,但是也是最容易被你忽略的,如果你不一开始就跟用户接触,就很难知道这些内幕。

3. 用最接地气的方案,方便工程师进行开发

避免出现太创新的设计方案或交互,让工程师花费大量的时间去实施。用最朴实的设计语言表达最有价值的核心功能就是这个阶段最完美的方案。

立项阶段过后,PM会出基于大家统一的MVP的基础上进行PRD文档的输出,设计师也开始真正上手干活。

然后我们要先来说一下设计的规范:

一. 基础概念

1. 什么是DPI?

DPI(Dots Per Inch):每英寸点数,表示指屏幕密度。是测量空间点密度的单位,最初应用于打印技术中,它表示每英寸能打印上的墨滴数量。较小的DPI会产生不清晰的图片。

后来DPI的概念也被应用到了计算机屏幕上,计算机屏幕一般采用PPI(Pixels Per Inch)来表示一英寸屏幕上显示的像素点的数量,现在DPI也被引入。

设计app 以及切图 标注 单位_第4张图片

安装Windows操作系统的电脑屏幕PPI的初始值是96,Mac的初始值是72,虽然这个值从80年代起就不是很准确了。 一般来说,非retina桌面(包括Mac)的PPI的取值区间在72-120之间,因为这个取值区间能够确保你的作品在任何地方都能保持大致相同的比例。

这里有一个应用实例: 27寸Mac影院显示屏的PPI是109,这表示在每英寸的屏幕上显示了109个像素点。斜角长是25.7英寸(65cm),实际屏幕的宽度大概是23.5英寸,23.5109约等于2560,因此原始屏幕分辨率就是2560x1440px。

设计app 以及切图 标注 单位_第5张图片

屏幕密度计算公式:

设计app 以及切图 标注 单位_第6张图片

1080x1920px屏幕密度:

设计app 以及切图 标注 单位_第7张图片

2. 什么是PPI?

PPI(Pixels Per Inch):图像分辨率;是每英寸图像内有多少个像素点,分辨率的单位为ppi,通常叫做像素每英寸。图像分辨率一般被用于ps中,用来改变图像的清晰度。

设计app 以及切图 标注 单位_第8张图片

二. Android界面设计规范

1. Android各设备屏幕密度

安卓尺寸众多,按每个屏幕去适配肯定是不现实的。

所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了……

以下是Android的密度划分以及代表的分辨率,这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了。

安卓各屏幕密度

设计app 以及切图 标注 单位_第9张图片

U妹来带大家了解一下iPhone各设备的手机屏幕密度:

iphone 4/4S/5/5S/SE/6/7≈320DPI

2. Android开发单位DP和SP

DP:安卓专用长度单位。以160 DPI屏幕为标注,则1DP=1PX

计算公式:dp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1dp x 320 dpi/=2px

SP:安卓专用字体单位。以160 DPI屏幕为标注,则1SP=1PX

计算公式:sp x dpi/160=px

例:以720x1280px (320dpi)为例计算 1sp x 320 dpi/=2px

3. 设计稿尺寸

从目前市场主流设备尺寸来看,我们要用1080 x 1920 PX 来做安卓设计稿尺寸。

设计app 以及切图 标注 单位_第10张图片

以1080x1920px作为设计稿标准尺寸的原由:

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

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

③ 用主流尺寸来做设计稿尺寸,极大的提高了视觉还原和其他机型适配。

所以做安卓设计稿时请以1080x1920px来做设计稿

(sketch用户以540 x 960来做设计稿)

设计app 以及切图 标注 单位_第11张图片
设计app 以及切图 标注 单位_第12张图片

界面设计控件尺寸:

4. 安卓图标尺寸

设计app 以及切图 标注 单位_第13张图片

安卓的图标相对iOS来说较少,我们只需提供以下几个尺寸就可以了,但是需要提高2套,圆角和直角各一套,因为有的地方都会用到。

512x512px、192x192px、144x144px、96x96px、72x72px、48x48px

设计app 以及切图 标注 单位_第14张图片

因为安卓有很多的机型,不同屏幕密度的手机对应的icon大小也是不同的,所以U妹这里没法给你给出相应的icon所被应用的位置。

5. 安卓设计字体

英文字体为 Roboto字体,中文字体为 思源黑体。在Android 5.0之后,使用的是思源黑体,字体文件有2个名称,“source han sans”和“noto sans CJK”。

设计app 以及切图 标注 单位_第15张图片

思源黑体是Adobe和Google领导开发的开源字体,支持繁简日韩,有7种字体粗细。

思源黑体字体下载地址,请戳这里:《免费下载!谷歌携手ADOBE推出超好看的的思源宋体(7种字重)》

6. 常见主流手机尺寸和分辨率

设计app 以及切图 标注 单位_第16张图片

三. Android切图标注

1. 标注设计稿时,使用px还是dp或sp?

答:这个问题需要和安卓工程师沟通,推荐使用dp和sp进行标注(这里指的是在安卓设计稿的前提下)。但目前很多设计师对dp和sp这个单位并不理解,所以有些设计师提供安卓设计稿的时候依旧使用px进行标注,这一点去和你的搭档工程师进行沟通,如果不影响他开发以及他能换算清楚的前提下,你可以考虑使用Px,但是我并不推荐。

设计app 以及切图 标注 单位_第17张图片

这里要记住一点(你只需要记住能帮助你工作就可以):

当屏幕密度为MDPI(160DPI)时,1dp=1px

当屏幕密度为MDPI(160DPI)时,1sp=1px

像素字号=屏幕密度/160 * sp字号 可以根据这个去算算设计稿中的像素字号标注为sp是多少,比如xHDPI下,36px的字标注为sp就是18sp,以此类推。

按照不同的屏幕密度换算,也就是下图所示的意思:

设计app 以及切图 标注 单位_第18张图片

2. 你需要提供几套切图资源?

答:理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。

但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,而且很多奇葩的分辨率也没必要去考虑适配,所以,具体输出几套需要看公司的产品需求而定。

通常我是这么干的:

设计app 以及切图 标注 单位_第19张图片

选取最大尺寸提供一套切图资源,交给开发工程师处理,适配到各个屏幕密度。

这里要注意,这个“最大尺寸”,指的并不是目前市面上Android手机出现过的最大尺寸,而是指目前流行的主流机型中的最大尺寸,这样可节省很大的资源空间。关于最大尺寸选取多少,你需要和你们的安卓工程师沟通,每个安卓工程师对这个问题的结论并不同。(我的安卓搭档,让我提供XXHDPI的切图资源就好,我用的切图工具是Cutterman,切图一键搞定)

3. Android的切图资源提供哪个尺寸给开发哥哥?

答:iOS的切图有@2x,@3x之分,那么Android的切图根据dpi的不同,其实和iOS的类似,只不过是按照dpi来进行资源文件夹的命名,如下图:

设计app 以及切图 标注 单位_第20张图片

根据不同的分辨率进行切图归类,但是你看到了,如果切片特别多,提供5套切图岂不是要累死了?

一般情况下,我们只需要提供3套切图资源就可以满足安卓工程师的适配,分别是HDPI、XHDPI、 XXHDPI 3套切图资源。

设计app 以及切图 标注 单位_第21张图片

目前我使用的办法就是只提供最大尺寸的切图,交给安卓工程师自己去缩放适配其他分辨率吧,所以和你的搭档沟通一下。

其实现在绝大多数公司限于人力物力的限制,没有这么严格的工作方式,基本上就是一个文件夹,命名好了就提供给工程师了。

设计app 以及切图 标注 单位_第22张图片

这里还是提醒各位,没有固定的工作方式和方法,任何方式都是为了提升工作效率而进行的。

4. 在做设计稿时我们遇到的最多问题

① 用哪种尺寸做设计稿?

iOS:用750x1334px来做设计稿。

安卓:就目前的市场来看,XXHDPI属于主流机型;这样无论是标注,还是主流机型都能兼顾的到,所以推荐使用1080x1920px来做设计稿尺寸,这样即使你标注的是px,工程师也可以很方便的进行换算。

设计app 以及切图 标注 单位_第23张图片

② 如何用iOS的设计稿去适配安卓(划重点啦)

现在有一种情况现在非常普遍,那就是一稿两用;设计师都是做iOS版本的设计稿,来适配安卓,现在要给安卓用,应该怎么办?

iPhone的屏幕密度已经达到xHDPI了,用750x1334px的尺寸做设计稿。

实际上,750×1334的@3x的切图资源正好是安卓XXhdpi(1080x1920px)的切图资源;安卓开发用iOS的设计稿自己进行换算就可以了,前提是你必须和安卓工程师沟通。

设计app 以及切图 标注 单位_第24张图片

另一种情况:你可以把750×1334的设计稿等比例调整尺寸到安卓1080×1920尺寸下,对各个控件进行微调,重新提供标注(用dp标注)。也就是说,你需要提供两套标注,一套给iOS的标注,一套给Android的标注。

③ 大家可能还有一个问题,那就是我用cutterman切安卓图片输出的有drawable和mipmap 2个文件夹,到底将哪个给开发工程师呢?

设计app 以及切图 标注 单位_第25张图片

答:以前用的开发工具,是只有drawable, 没有mipmap的,后来新的开发工具里面才有mipmap这个文件夹,专门用来放png格式的图片的,不过drawable里面还是可以放png图片。

所以现在我们给安卓工程师的切图输出文件只需给mipmap-前缀开头的就好。

四. Android开发单位换算

1. 安卓机型各种尺寸下的PX与DP、SP的对应关系

设计app 以及切图 标注 单位_第26张图片

2. 字体单位SP与PX的对应关系

设计app 以及切图 标注 单位_第27张图片

3. 距离单位DP与PX的对应关系

设计app 以及切图 标注 单位_第28张图片

以上就是我借鉴整理的资料

你可能感兴趣的:(设计app 以及切图 标注 单位)