“网易有钱”sketch使用分享
本文来自网易云社区
写在开头,关于ps与sketch之间的优劣网上已经有很多分享,大家有兴趣可以百度,其中对否我们在这里不予评价。在移动互联网时代每个app从几十到上百张页面,如果用ps绘制一个个页面光文件管理就让人崩溃,这也是为什么adobe出了一款ux的软件,自网易有钱2.0.0开始我们使用sketch到现在迭代到2.4.0版本,在本篇文章里分享一下我们的使用心得与问题希望可以和大家一起交流。
摒弃ps拥抱sketch
自项目之初“有钱”团队中的切图和标注工作由开发同学独立(满脸写满了大大的幸福),此举大大节约了视觉的工作时间,这也是我们可以在半年时间进行12次迭代的可能(15年6月上线~15年底)。同时带来的是视觉走查发现大量的还原偏差,毕竟我们不能指望开发同学在切图和标注做得有多好。不仅如此还需要提供大量的psd文件,即占内存又占传输速度找起文件又慢让我们很是苦恼。所以在研究了sketch的各种优点之后果断在2.0摒弃ps拥抱sketch。
如图为一个需求递交给视觉之后的流程演示,在此过程中我们需要完成需求方的视觉设计确认(在此不多做额外描述仅以有钱的实际案例描述sketch的设计中需要注意的一些事情)-多平台/多屏幕之间的适配(如何以一套尺寸完成ios&Android之间的通用适配)-递交开发(分享什么样的sketch文档是开发心理窃喜的)-视觉走查(不要偷懒,再敬业的开发交付物也达不到100%的还原)
设计工具
我们用到的工具为sketch(暂时仅支持mac版),并且需要付费购买。同时我们需要向ps play一样的设计预览工具“mirror”;此时我们仅需要输出sketch文件给Android&ios开发,由开发自行测量与导出切图。
同时我们还会输出一套由sketch+measure导出的文件给产品/运营/qa和wap前端方便没有mac的同学也能查阅。
(感谢有钱的开发同学帮我们修改了measure,修改了什么稍后会介绍)
基于iphone6尺寸为基准设计
安卓和ios不同的屏幕尺寸需要适配让视觉设计师苦恼不堪,能否一稿适配多平台一直是设计师探索的方向,然而iphone6的出现让这些变成现实,在2x标准下安卓720px 与iphone 750px仅相差30px,30px的概念按有钱的title txt来计算仅仅是一个文字的宽度因此可以忽略不计。详细可见站酷“来自海边的设计师”关于适配的分享有兴趣的同学可以自行查看在这里不多做重复。地址:http://www.zcool.com.cn/article/ZNDA1MzI0.html
制定规范文字与图层样式
在“有钱”的设计中我们更改了以前ps中的控件规范定义,不再以color与txt之间组合搭配而是每一个规范包含从iphone多屏幕的适配规则。
1.文字
在现如今sketch的规范库中,我们与开发约定文字规范:“为上述文字属性定义不同设备下的字号大小不同的颜色分为不同的编号”,视觉同学在新页面设计时很容易找到自己需要用到的文字属性,再也不会出现各种凌乱的懵逼;开发只需要输入文字编号即可适配多个屏幕(如:MKFontStyleCode_024)——一劳永逸。
2.通用图层样式
sketch里不仅可以定义文字规范,还可以定义图层规范库也就是把通用的btn/background/line/cell的颜色进行定义在后续的页面需要用到都可以直接从组件库里调用。与文字一样开发仅输入编号即可。
3.icon/banner/section规范输出
为了便于开发切图以及测量,我们需要把需要切图的icon/banner进行编组,并且在make exportable里进行预先切图。因为我们的设计尺寸是750px icon尺寸为2x尺寸然软件默认导出为1x,所以在导出1x,2x,3x时需要进行调整,如0.5x=1x ,1x=2x,1.5x=3x
众所周知涉及到多平台banner适配比较复杂,单纯的等比缩放会在大屏下看起来巨大无比,因此我们在适配时根据不同的情况以“等比缩放组件/等比缩放+弹性组件”进行适配。
section作为基础的组件,为了利于开发测量,我们根据开发实现方式以及使用习惯从视觉上进行了规范的调整,如图在开发的认知中一个section由多个cell组成,每个cell都是一个独立的区域同时包含分割线可在顶部也可在底部根据需要来定,那么我们如果要做一个130px的cell实际是包含线的高度。
协作输出
做好设计稿之后,视觉需要提供文件给开发,如果你们的开发同样安装了sketch只需把以上所描述的源文件给开发,如果开发同学没有sketch那么就需要用到上文中提到的measure,此插件可以像sketch一样的测量方式真真为视觉省了很大的工作量,间距/字号/透明度/颜色/等完全不在话下,还可以在pt与px单位下直接切换,别提多人性化了。然而measure无法显示我们定义的文字和图层样式代码,一度使我们将要放弃,毕竟花费那么大功夫和时间却无法协作让人很是郁闷。然经过我们开发同学对measure进行了修改,measure plus 横空出世,导出规范编号妥妥的不在话下。附带下载文件,有兴趣的赶快安装使用吧(ps:不知道measure的人可以这里看一看网上有很多描述,我就不详细解说了http://www.uisdc.com/sketch-useful-plugins)
视觉走查
这一步一定不能忽略,根据我们的实测,自从用sketch之后开发的还原度从80%提升到94%,但是还是会有一些方面会有一些小瑕疵,这也是可以理解。因此我们一定需要重视视觉走查,让你的想法可以99%甚至100%的还原也是一件很酷的事情。
特别插入
很多同学关心视觉还原是如何从80%提升到94%,简单的来说视觉还原的问题从两个大角度去分析:1.距离测量不够准确,2.文字实现出来大大小小或者偏上偏下。这两个问题更多的会体现在文章里提到的cell和文字。因此在sketch里我们定义文字与开发库里一致的行高,比如32px的文字实际在开发库里约是40px 这个时候在测量和居中的时候就不会出现以前的问题。
特别鸣谢
有钱视觉团队,有钱开发团队,有钱产品团队,有钱运营团队。
一稿适配多平台,来自海边的设计师:http://www.zcool.com.cn/article/ZNDA1MzI0.html
SKETCH设计教室!带你了解超好用的SKETCH插件:http://www.uisdc.com/sketch-useful-plugins
measure plus下载地址:https://github.com/hite/sketch-measure-Plus
网易云新用户大礼包:https://www.163yun.com/gift
本文来自网易云社区,经作者李宁授权发布。
相关文章:
【推荐】 知物由学 | 你的网络安全问题背后的真正原因
【推荐】 如何实现最佳的跨平台游戏体验?Unity成亮解密实时渲染
【推荐】 时序数据库(TSDB)-为万物互联插上一双翅膀
“网易有钱”sketch使用分享的更多相关文章
- 【转发】网易邮箱前端技术分享之javascript编码规范
网易邮箱前端技术分享之javascript编码规范 发布日期:2013-11-26 10:06 来源:网易邮箱前端技术中心 作者:网易邮箱 点击:533 网易邮箱是国内最早使用ajax技术的邮箱.早在 ...
- 网易视频云技术分享:linux软raid的bitmap分析
网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术,提供稳定流畅.低时延.高并发的视频直播.录制.存储.转码及点播等音视频的PAAS服务,在线教育.远程医疗.娱乐秀场.在线 ...
- 网页设计简史看设计&代码“隔膜”
本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...
- 后端接口迁移(从 webapi 到 openapi)前端经验总结
此文已由作者张磊授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前情提要 以前用的是 webapi 现在统一切成 openapi,字段结构统统都变了 接入接口 20+,涉及模 ...
- DDoS 攻击与防御:从原理到实践(上)
欢迎访问网易云社区,了解更多网易技术产品运营经验. 可怕的 DDoS 出于打击报复.敲诈勒索.政治需要等各种原因,加上攻击成本越来越低.效果特别明显等趋势,DDoS 攻击已经演变成全球性的网络安全威胁 ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
- 分享到xxx
来源百度 一.概述 百度分享代码已升级到2.0,本页将介绍新版百度分享的安装配置方法,请点击左侧列表查看相关章节. 二.代码结构 分享代码可以分为三个部分:HTML.设置和js加载,示例如下: 代码结 ...
- 网易与Google合作,于GDC开幕首日发布开源UI自动化测试方案
[TechWeb报道]美西时间3月19日,在GDC开幕第一天的Google开发者专场,Google发布了一款由网易研发的UI自动化测试方案:Airtest Project. Google方面评价,这可 ...
随机推荐
- 牛客网多校训练第一场 A - Monotonic Matrix(Lindström–Gessel–Viennot lemma)
链接: https://www.nowcoder.com/acm/contest/139/A 题意: 求满足以下条件的n*m矩阵A的数量模(1e9+7):A(i,j) ∈ {0,1,2}, 1≤i≤n ...
- 压缩Windows系统磁盘
compact /compactOS:always #压缩所有 OS 二进制文件并将系统状态设置为"压缩" compact /compactOS:never #减压缩所有 OS 二 ...
- Css3 实现关键帧动画
<div class="person"> </div> <script> var str1 = "@keyframes move{&q ...
- Java中Class类及用法
Java中Class类及用法 Java程序在运行时,Java运行时系统一直对所有的对象进行所谓的运行时类型标识,即所谓的RTTI.这项信息纪录了每个对象所属的类.虚拟机通常使用运行时类型信息选准正确方 ...
- Json中dumps、loads、dump、load函数实例讲解
1.dumps() 1. json.dumps() 用于将字典(dic)类型的数据转成字符串(str),直接将dict类型的数据写入json文件中会发生报错,因此在将数据写入时需要用到该函数. imp ...
- BZOJ2298: [HAOI2011]problem a(带权区间覆盖DP)
Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1747 Solved: 876[Submit][Status][Discuss] Descripti ...
- 分布式网上商城项目-solr搜索功能错误
1.RuntimeException错误 java.lang.RuntimeException: org.apache.ibatis.binding.BindingException: Invalid ...
- 【小尝试】Java获取慕课网原有路径课程列表
作为一个老慕课网(https://www.imooc.com/)粉丝,还记得最开始的慕课网有很多免费的路径课程,练习什么的也特别详细,是入门一门语言的好方法. 现在慕课网发展起来了收费模式,添加了很多 ...
- vuejs 解决跨域访问问题
首先: config/index.js下面的proxyTable配置您的服务访问基本地址,将changeOrigin设置为true即可,然后在你需要访问接口的地方,这样使用,以下是我的工程代码(前提是 ...
- mt7620a拓展串口
mt7620a拓展串口 要修改的文件有两个: mt7620a.dtsi 进入/home/ihid/chaos_calmer/target/linux/ramips/dts/mt7620a.dtsi p ...