童话说说技术创业美文职业
投稿投诉
职业母婴
职场个人
历史治疗
笔记技能
美文纠纷
幽默家庭
范文作文
乐趣解密
创业案例
社会工作
新闻家居
心理安全
技术八卦
仲裁思考
生活时事
运势奇闻
说说企业
魅力社交
安好健康
传统笑话
童话初中
男女饮食
周易阅读
爱好两性

向研发交付设计稿时,需要注意两个方面

11月7日 温柔冢投稿
  当一个页面做完以后,需要交付给研发的东西的离不开这两个重要的部分,即页面标注和切图。
  在一个产品开发的流程中,UI设计师离不开和研发打交道,UI做出来的图都需要研发这边去实现,所以我们也要站在研发的视角去考虑问题,这样可以减少不必要的沟通成本,提升工作效率。
  每个研发有不同的性格。在我们团队中,有的研发需要你每个地方都标注得很清楚,不然他会不断地来找你,有的研发则不需要,这些都需要慢慢去磨合,找到彼此觉得舒服的方式。下面主要是我写我自己工作上和研发合作的一些总结,已经结合网上的一些文章,内容也比较基础,大神可以忽略我。
  当一个页面做完以后,需要交付给研发的东西的离不开这两个重要的部分。
  页面标注
  切图
  页面标注
  以什么单位进行标注
  先来了解一下这几个单位:px、dp、sp
  px:pixel像素,电子屏幕上组成一幅图画或照片的最基本单元,设计时使用的单位。
  dp:dip,Densityindependentpixel,是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度
  sp:scaleindependentpixel,安卓开发用的字体大小单位。
  具体要使用什么单位进行标注,请和研发沟通好。目前有些设计师提供设计稿的时候依旧使用px进行标注,但如果不影响他开发以及他能换算清楚的前提下,理论上是可以的。但这不是一个最好的选择,建议使用dp或sp。
  那怎么换算呢?
  (1)px转dp
  安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:
  1dp定义为像素密度值为160ppi时的1px,即,在MDPI时(分辨率为320480),1dp1px。
  以mdpi为标准,这些屏幕的密度比为:ldpi:mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi0。75:1:1。5:2:3:4。即在HDPI的密度下,1dp1。5在xHDPI情况下,1dp1。5px。以此类推。
  所以当我以使用分辨率为10801920(即xxHDPI)来做图时,假设间距是48px,那标注时应该是16dp。
  (2)px转sp
  dp和sp都是安卓的开发单位,sp与dp类似,但是sp可以根据用户的字体大小首选项进行缩放。就是说Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),如下图,如果我以sp为单位时,当把文字改为“大”时,应用内部也会进行字体的相应缩放,dp则不行。一般情况下可认为1sp1dp
  进入系统的设备显示可调字体大小
  当然目前也有一些工具可以帮你更好的进行标注,不需要你自己去换算。建议利用好能够提升效率的工具。
  间距
  需要标注的地方很多,比如图与字的间距、字图与界面两边的间距、字与字的间距等
  标注的方法也可以有不同,可以以边框、附近的元素作为标准,也可以告知具体坐标
  重点讲一下字与字的间距:在实际的开发中,两个字体的间距在手机上的显示效果要比标注图的间距要大。这是因为在一个字体中,字母的高度可能会有所不同,系统会默认给字体增加一个高度,但每个手机增加的高度也不同,你可以按你的图来进行标注,再由研发进行判断和调试,ui也需要一起跟进。
  间距的标注也需要考虑在不同机型上显示会出现什么问题,这个问题是否严重,这个比例大不大等。
  字体大小及粗细
  在一个页面下,常用的字号有:12、14、16、20和34sp。
  除了标注字体大小外,还需要标注字体的粗细,你还可以根据需要设置字距,行距等。
  也支持打包其他字体。
  颜色
  (1)按元素种类来分,需要标注的有:背景色(遮罩的颜色)、字体颜色,按钮颜色,点击色
  如果是通过不同的颜色来表示不同的状态也需要标注说明。
  (2)按颜色的数量来分:单色,多色(渐变色)
  如果是渐变色,那渐变的角度也要说明,是从左往右,从上到下还是从中间到四周等。
  已经是否有透明度等
  这里强烈建议在项目开始之初能够建立基本的设计规范(包括颜色,字体大小等),建立完后不要就扔在共享就不管了,一定要让负责这个项目的每个UI、研发人员都知道。
  这里补充一个小点:如果你的文字是有带透明度的,那你标注的时候可以采用以下方式:因为研发采用十六进制的代码,就是说当你给研发一个80的白色时,其实也可以给对应代码:CCFFFFFF,前两位是CC是表示透明度,后面六位FFFFFF是表示具体的色值。
  最后提醒一句:如果不清楚你该怎么标,一定要和研发沟通!而且也不需要每一张效果图都进行标注,能保证研发工作顺利进行即可。
  切图
  安卓尺寸众多,按每个屏幕去适配肯定不现实,所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。
  这和前面提到的单位有关系,下图为在不同分辨率下对应切图的倍数关系。要切多少套的问题,根据实际开发来定。这里建议大家安装切图插件,一键可以导出多套非常方便。这个部分网上教程很多,就不多说了。
  截图来自wuseyun
  在切图之前你应该明白哪些图是可以不需要切的,那些图是一定要切的。
  以下图为例:
  截图来自AceCleaner
  要切的地方有(红色部分):四个主要的功能图标,侧边栏入口,右上角的商店入口以及小红点(切点九)
  不需要切的地方有(黑色部分):两个色块以及上面的小动画图
  总的来说就是当程序实现不了的时候,就需要你切图。程序实现有个很大的好处就是能减少包体的大小。
  记得压缩!记得压缩!记得压缩!
  除了这两部分,还有交互方式说明,有动画效果的进行详细描述,这部分写起来也很多,下次讲。
投诉 评论 转载

电商第一步:初识购物车的产品框架天下熙熙皆为利来,天下攘攘皆为利往。源于《史记货殖列传》很高兴有一个愉快的周末,因为每次我都有时间去调整和回顾一下走过的一周,应该说这一周还是很有意思的!高考6月7……细节经验:输入框设计的4个细节要点很多新人朋友由于工作经验少,常常会心理没底,因为对一些工作上的设计细节并不了解,不过没关系,以后菜心会多分享一些关于工作上的细节经验,希望对大家有所帮助。我们常常会看到网……令用户费脑的认知设计,该如何规避?今天和大家聊聊“认知负荷”。最近看了一些文章深受启发,我们在我们日常设计中如何去避免一些让用户费脑而抓狂的设计,本文我将会集合我们日常生活中的产品和大家聊聊。认知负荷理论……电商网站设计系列(3)商详页改版设计的复盘思考前段时间笔者主导了网站wap端的商详页改版设计,这次终于腾出时间来好好分析总结下。虽然从这个项目中能够获得的经验远远低于我的预期,但这个小项目多少也融入了笔者很多思考,当然其中……从短视频出发,浅谈UGC产品的商业价值及设计逻辑笔者最近在筹划一款UGC产品的开发,故把这段时间在许多前辈身上学到的知识以及自己的一些思考整理成下文。从最近很火的短视频出发,浅谈平台发展UGC背后的商业价值以及UGC产品的设……APP中,Screenshot的设计要领和各发布渠道的要求screenshot的设计原则跟APP的跳转流程设计原则,非常契合,都是从场景出发,还原用户在某种特定的条件下会产生什么样的需求,然后帮助用户去实现。在APP设计环节中,……向研发交付设计稿时,需要注意两个方面当一个页面做完以后,需要交付给研发的东西的离不开这两个重要的部分,即页面标注和切图。在一个产品开发的流程中,UI设计师离不开和研发打交道,UI做出来的图都需要研发这边去实……设计与思考:驾校一点通APP5。0改版设计回顾这次5。0版本改版的使命不仅要整体提升驾校一点通App的用户体验,也需要与行业内的其他产品形成差异。在改版期间,驾校一点通从App、PC、Wap端到品牌logo做了一系列体验升……触及用户的消息系统:9类通用消息机制浅析本文汇总了目前比较通用的消息机制,并做了简要的介绍。在PC时代,产品没有便捷送达用户消息的途径,用户只有主动打开电脑登录了产品,才能看到产品推送而用户的消息。移动时代,随……浅析会员权益与商品售价的三种关联配置在产品设计过程中,如何有效地关联配置商品和会员权益呢?本文作者将展开阐述三种关联配置在产品设计上的应用。在商品售卖过程中,有个很常见的场景。同一个SKU,面向不同等级不同……推荐策略设计的Notes推荐算法的基本原理表述起来比较简单,但是具体实施起来还是比较复杂。没有任何一个标准的推荐系统,可以适用全部的情形,在真正实现的过程中,需要对算法有融汇贯通的掌握,以及对业务本身……从微信版本历史,学产品功能迭代和用户体验(上)本文从微信诞生的大环境背景,初期与米聊的对比以及奠定移动互联网即时通讯类应用霸主地位前的重要版本更迭的分析来见证一个伟大的产品的成长之路,学习产品的功能设定、优先级排列,用户心……
在按钮置灰时,该如何提供给用户反馈?设计基础:电视交互设计的一些事怎样设计一个更好用的日期选择器?一篇文章搞懂语音交互的来龙去脉设计师如何通过作品集,让能力值呈现PLUS?如何使你的设计变得更好?只要加糖就可以了,视觉糖一种性价比极高的了解用户的方法:创建移情图设计总结如何更好地表达活动品牌?浅谈“以目标为导向”的交互设计(三)浅谈“以目标为导向”的交互设计(二)视觉层次构建的9个技巧浅谈“以目标为导向”的交互设计(一)

友情链接:中准网聚热点快百科快传网快生活快软网快好知文好找作文动态热点娱乐育儿情感教程科技体育养生教案探索美文旅游财经日志励志范文论文时尚保健游戏护肤业界