切图小贴士

切图小贴士:

用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！



我们经常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处理图片的一种特殊的形式，由于文件的扩展名为：“.9.png”，所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下，发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源，可谓切图利器。
“点九”的制作工具为“draw9patch”，具体制作步骤这里不多讲了，插播小贴士第一条：舍弃这个制作工具吧，减少繁琐的步骤，不要再每张图片都拖到工具里画啦！直接用ps＋铅笔就可以画哦。
“点九”的学问当然很大，但Android切图不仅需要清楚“点九”的方法，还有其他各种小技巧。下面为大家分享我在工作中总结的几个关于切图的心得。

(一)站在开发的角度来切图

了解技术实现方式，就像了解一位开发同学，更多的了解，会让工作更加顺畅。

如为下图按钮做“点九”图，一部分同学可能会这样做：


这是一张高度不变左右拉伸的“点九”图片，内容显示区域为整个按钮范围。按钮效果图上看，文字是垂直居中显示的，开发同学拿到这张“点九”图片，就会在代码里写上center的属性，此属性就是设定让文字在按钮的垂直居中位置。说到这，有没有察觉出问题呢？先让我们看一下实现出来的效果怎么样。


拥有像素眼的设计师们，立刻会察觉文字偏下了。然后找开发同学调整文字的位置，“把文字向上n个像素吧，没有居中”等等，这是很经常发生的对话，开发同学会增加代码微调文字的位置以达到效果图效果。事情圆满解决了吗？不然。其实是我们错了。
当我们了解开发同学实现方法后，我们可以试试用逆推法验证这张“点九”图片是否还有进一步精确的可能。


如上图，设计效果图中红色区域是文字排版区域，是理想化的位置，1和2的高度是相等的；而实现效果图中3和4的高度是相等的。问题出现了！在我们画点九的时候，把投影的高度也画进去了，所以视觉上文字就偏下了。
我们通常的画法应该是：

1. 在高度不拉伸的情况下，在空白区域点一像素的点。

这是与开发同学之间约定俗成的习惯，凭着默契就知道此按钮高度不进行拉伸，而且就是被拉伸了，拉伸的是空白区域，视觉上也不会造成影响。
对比如图所示：

2. 内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。

“点九”图片的内容显示区域，我喜欢称为内容排版区域。在切图的过程中，还会发现不同的情景，要时刻想着你要的结果，通过对此区域的仔细处理，可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定，就可以实现效果图上精确的布局。同时减少不必要的开发，精简代码，提高产品的性能，积少成多，带给用户更好的体验感受。

(二)选择更优的切图方式

当我们遇到异形或较为复杂的切图时，往往需要抛开固有的思维程式，去找到更适合的切图方式。举例如为下图浮层切图的时候，我们还可以用我们的利器“点九”么？


首先分析一下此浮层的几个特点：一是半透明渐变有厚度又有投影的效果；二是有三角异形，而且位置不固定。在切图的时候先走了一下小弯路，用固有思维把浮层分成了上下两个部分，下面方形做成“点九”，上面三角形单独一个切图，用拼接的方式去实现。这是符合开发同学的原子拆分设计模式的，把会变化的部分取出并封装起来，让其他部分不受到影响。所以开发同学很快做好了实现，但效果不尽人意。我们其实可以预想得到，因为有投影效果上下拼接一定有重叠，这样拼接处就会有一条明显的线。
那怎么办呢？经过设计师的进一步思考，终于找到了一种更适合的切图方式：


左右分割成两个“点九”图片，这样即能保证连接处的效果，又能灵活三角指向的位置。思考好如何切图的同时也要跟技术同学沟通能否实现，衡量实现的成本。最后值得高兴的是，实现出来的效果­跟设计效果图没有任何出入。

(三)尽可能的减小资源的大小

切图的时候尽可能减小资源的大小，为产品安装包瘦身。

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

(在上面的例子当中，为了保持看得清楚，没有缩小到最小情况，在实际工作中可以稍加注意。)

2.当我们遇到有纹理的背景或有纹理的按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺，可以想象中图案叠加的原理。

第一种纹理背景，如输入法多媒体中随写输入的界面，不同的信纸，我们就用了尽可能最小的切图去平铺而实现的。如下图：


这是我们输入法中信纸的切图，遵循用最小切图的原则，按照不同纹理的规律调整到最小的切图，所以可以看出不同纹理的切图尺寸是不一样的。
第二种有纹理的按钮，我们一般会这样处理：


我们的目标是把按钮分成三段，保留左右圆角部分，找到中间纹理可复用平铺的部分，同事确保中间纹理可以与左右两张图无缝连接，这样按钮的长度就变成可控的了，可以适用于不同的场景。
首先找到纹理的规律，这里的斜线纹理只需切宽为3px的图即可；然后用纹理图片去尝试左右圆角部分，连接到圆角部分的纹理就成功咯。遇到其他类型纹理切图时，思路是可以复用的。

3.适当压缩图片质量，在单色或没有过多效果时可存储为png8位或索引模式。

这里就不做举例了。

小结

设计师在提供设计规范后愁苦实现效果不尽如人意的同时，可以尽可能的利用一些切图手段，帮助你的设计达到零差别的呈现，同时也帮助开发同学减少了很多不必要的开发负担，对于产品本身也有提高运行速度等很多不言而喻的好处。让设计师同学与我们亲爱的开发同学成为更贴心更默契的合作伙伴吧！
以上为工作中关于Android切图的一点小经验，如有错误或不足的地方请大家指正，同时欢迎大家分享更多的切图经验与技巧。






转载请注明出自”百度MUX”

翻越GFW-技术总结和指南

        为了迎接斯巴达，GFW进行了大规模的升级，原来经常使用的一些翻墙手段纷纷落马，被清除差不多了，比如OpenVPN、SSH等。向往自由是人类的天性，墙高了一尺，无奈我们也只有练就更高深的内力，才能自如地飞檐走壁。这篇文章是这段时间研究GFW的一些心得，同时在对最近新出现的一些翻墙方法和工具进行研究之后，也给出了怎么翻墙的一些对策和建议。

要想越过GFW，了解它是必要的。WIKI维护的词条“防火长城”是非常好的起点。

• 防火长城（英语：Great Firewall，常用简称：GFW或功夫网，中文也称中国国家防火墙[1]、长城防火墙或万里防火墙）是对中华人民共和国政府在其管辖互联网内部创建的多套网络审查系统（包括相关行政审查系统）的称呼。起步于1998年[2]。其英文名称得自于2002年5月17日Charles R. Smith所写的一篇关于中国网络审查的文章《The Great Firewall of China》[3]，取与Great Wall（长城）相谐的效果，简写为Great Firewall，缩写GFW[4]。随着使用的拓广，中文“墙”和英文“GFW”已被用于动词，“GFWed”及“被墙”均指被防火长城所屏蔽。

        如果你对网络技术缺乏了解，可能会难以理解WIKI对GFW的解释。简单的类比下，你可以把互联网想像成一个交通网络，在这个网络里，比较特殊的是每辆车都有一个GPS装置记录了每次上路的起点和终点。为了让这个交通网络顺畅，能让每辆车都到达想要的目的地，必须要对网络进行一些规则和限制，所以要在每个路口设置红绿灯。在互联网上，把这些红绿灯称为路由器。现在，你可以把GFW看成是在关键路口上设卡的一伙交通警察，它们偷偷的操控红绿灯，主要任务就是阻止你到达一些特定的地方。为此，它们所采取的方法有：

粗暴的阻断。就是直接在路上设卡，检查你的目的地，如果你这辆车要到达的地方在黑名单上，GFW会直接将车扣下。甚至对某些地方会直接封路，谁也不让过。这是比较简单的方法，包括IP地址封锁、IP地址特定端口封锁。早期GFW主要采用的这些技术，比较容易绕过。

• 巧妙的诱骗。在交通网络中，当我们想到达某个目的地时，需要一个路线来规划走哪些路？在哪转弯？就象GPS需要路径规则一个，在互联网上使用DNS、路由和BGP协议来共同完成这个任务。GFW从很早就开始干扰DNS（正式的名称叫DNS投毒污染），在你想访问黑名单上的网站时，GFW就伪装成你的GPS，告诉你一条根本无法到达的路线。早期的DNS干扰是在运营商的DNS服务器直接完成的，方式比较粗暴，可以通过简单的设定一个国外的正确DNS服务器绕过，这也是早期通过修改DNS和Hosts文件翻墙的由来。后期，GFW干扰DNS的方法取得了巨大进步，直接通过DNS协议投毒。想像一下，在你的车向GPS请求路线的时候，GFW直接叫住了给你送路线的邮差，将里面的正确路线替换成了一条永远到不了的绝路。在进步到DNS协议投毒后，修改DNS服务器的方法事实上已经失效了。好在在繁忙的互联网上，各种请求路线的DNS数量巨大，GFW并没有完全过滤，所以作为补充方法，在有些时候修改DNS还是有些用处的。要彻底排除GFW的DNS投毒干扰，还有待DNSSEC协议或是dnscrypt这样的工具的发展。DNSSEC是可以验证DNS查询数据可信的协议，dnscrypt是加密DNS通信的工具，都可以加密DNS查询。可惜的是现在支持DNSSEC和dnscrypt的DNS Server还不多，基本都是些试验性或开源的服务器，速度较慢。而且GFW已经开始对DNSSEC和dnscrypt进行试验性的干扰，所以这一方法还有待发展。
• 关键字阻断。在网络中，就象交通网络中运行数量和运载数量都最多的公共大巴一样，最常使用的就是HTTP协议。如果你以前在查询或是点击某些链接时突然出现了“服务器被重置”这样的错误，很可能你遇到的就是GFW的关键字阻断。就象交通网络中的设卡查车一样，GFW对道路中的所有大巴车（也就是HTTP协议）进行检查，如果里面有长得比较象通缉犯（也就是类似“江”、“youtube”、“刘晓波”这样的关键字）的人，就全部拦截下来。GFW从很早就对HTTP协议进行了关键字阻断，这些年间又经过了不小的发展，比如对google各种服务的定时干扰、增加对email电邮和eD2k电驴协议的审查等等。要知道，GFW的关键字阻断可是高精尖的技术，要从众多的流量里过滤并阻断这些关键字，需要大量的计算资源，GFW为此在骨干网和各省运营商的出口都部署了大量设备。不得不说，就是作为一个纳税人，个人都觉得太心痛了。为了绕过GFW的关键字阻断，广大翻墙者发展了不少有用的方法，常见的比如VPN、SSH等代理，其原理基本就是将大巴车（HTTP协议）伪装成私家车（VPN协议），从而避开GFW的检查和阻断。
• 协议封锁。这么多年来，GFW逐渐为人所熟悉，翻墙的人也越来越多。就象交通网络中伪装的私家车多了，交通警察就会查车一样。使用VPN的人多了之后，GFW近两年开始对VPN进行干扰，很多ISP已经封锁了PPTP VPN，象自由门、无界浏览之类的翻墙软件也被定点清除。由于个人翻墙者使用OpenVPN搭建VPN服务器比较多，最近的18大召开，GFW甚至发展到对OpenVPN进行定点清除，所以如今单独使用VPN翻墙也不是那么可靠了。
• 记录。相比检测、阻断和干扰等，最可怕的可能还是GFW的记录功能。 GFW对连接境外网络的起始时间、源地址、目的地址、端口和服务类型等进行了记录，有很大可能对VPN、SSH、HTTP、HTTPS、POP3、SMTP和IMAP也进行了相应记录。GFW近期发表的很多论文有很多数据融合、聚类和分类的内容，各种神经网络、概率模型、人工智能的应用了不少，至少从论文看，对记录的应用还在理论阶段。一旦在模型和应用方面有突破，这货留下来的记录有可能恢复任意人的浏览记录，简直都有点象“黑客帝国”里的天网了。

         GFW对境外网站的封锁，使得很多人的正常工作和生活被严重干扰，为此人们发展出了形形色色的翻墙技术。下面简单分析一下：

• 修改Hosts。因为对于添加到了Hosts中的主机，就不用再去DNS查询目的地址，所以这是对付DNS投毒的好办法。这一方法的问题是修改比较繁琐，使用上不方便。
• 修改DNS。在不使用其它代理技术的情况下，这个只能避开ISP的DNS干扰，对于GFW的DNS投毒无能为力。但与其它代理技术结合，修改DNS就是必要的了，使你能够查询到真正的目的地址。
• VPN、自由门、无界等其它代理方式。在你的电脑与VPN服务器之间建立一个隧道，从隧道通过VPN服务器再去浏览网络，VPN服务器在墙外时你已经翻过GFW的高墙了。之前这是比较靠谱的翻墙方法，可惜现在GFW已经对VPN特别是用OpenVPN实现的VPN隧道进行了定点清除，连接成功率大幅下降，而且即便连接成功也会被定时切断。市场上还有一些可以翻墙的路由器，其实大多是在底层绑定了VPN，也属于这一类。这些产品的使用简单，缺点就是移动不便，还有就是质量严重信赖供应商，选择靠谱的供应商非常重要。
• Goagent、西厢等HTTP代理方式。在OpenVPN被定点清除之后，HTTP代理方式反而成了比较靠谱的翻墙方式。因为建立隧道使用的是HTTP协议，隐藏在无穷无尽的HTTP浏览流量之中，GFW也很难识别。当然你的Goagent服务器必须可用，GAE已经被GFW定点清除，在GAE搭建的Goagent服务器并不稳定，最好是使用自建的服务器。
• ShadowSocks等Socks代理方式。比HTTP代理更难识别，Socks代理直接使用TCP建立隧道。只要你的ShadowSocks服务器没有被定点清除，这种翻墙方式是最难被发现的，也是最靠谱的。可惜ShadowSocks使用的是Socks代理，不是所有软件都支持，特别是iOS在不越狱时就不支持。

        除了以上所说的翻墙方法，还有一些辅助方法也是非常有用的，比如：

• PAC。PAC并不是用于翻墙，而是为了改善翻墙的体验。使用VPN、Socks等代理翻墙的时候，会感觉访问墙内的网站速度特别慢。这是因为所有流量都通过代理绕回来访问了，当然速度会慢。 设置好之后， PAC可以识别要访问的网站，如果在墙内就直接访问，如果在墙外再通过代理访问。这样显著改善了上网浏览的速度。
• obfsproxy。obfsproxy是著名的TOR项目组开发的开源软件，主要目的是将各种网络通信封装为一种混杂通信。obfsproxy可以混杂Goagent、ShadowSocks等其它代理技术一起使用，对经过这些代理的数据包进行加密，并且混杂一些无用信息，使得GFW难以侦测到有效流量，从而降低被屏蔽的可能性。

        GFW发展至今，已经建立了一套探测、封锁的方法体系， 翻墙的难度越来越高，这样的趋势大概会不断继续下去。不过，需要翻墙的人从不需担心，只要不是真正的物理断网，实际上总是能有方法的。

        翻墙时最关键的一点就是伪装。GFW不是封锁所有境外网站，只需将访问被封锁网站的流量隐藏在访问没有被封锁网站的流量中，就可以自如地翻越GFW，畅游无锁的互联网世界。Goagent、ShadowSocks由于使用私有协议，将翻墙流量隐藏到了几乎无穷无尽的http和tcp流量中，就是这类GFW很难封锁的代理的典型代表。而HTTPS、VPN、SPDY这类标准协议，GFW对流量进行统计学模型匹配，封锁的准确率是相当高的。但这类标准协议有一个好处是因为标准化，客户端的支持特别好，使用也很简便，所以有些时候也是必不可少的。在选择这类代理服务器时就应该选择相对小众的，流量较少的供应商，比较安全。

我目前使用的翻墙方法是：修改DNS+PAC+GAE Goagent，因为使用的是GAE的免费空间，所以是零成本。在我的电脑上，用GoAgentX作为代理客户端，结合SwitchySharp和PAC，几乎感觉不到GFW的存在。在我的手机上，则使用了Goagent iOS。此外，我维护了一个ShadowSocks server作为万一Goagent不能用时的备份，也是使用的国外免费空间。

GFW的封锁是多管齐下的，所以在翻墙时也不要指望能一种方法包打天下，结合使用不同方法，各施其责，就能轻松越过。GFW的封锁也不是一成不变的，所以也不要指望能够一劳永逸。

        为了自由的互联网，翻越GFW的战斗将是一个长期的过程，我们能够也应该在一起努力。