全栈设计师指南 - 不正经的设计师

在日常工作中，设计需要懂前端，前端其实也需要懂设计。因为工作中经常有个尴尬的问题：前端不仅吐槽你不懂代码实现，也会对你认真输出的设计指指点点，甚至他晚上加班写页面的时候突然打个电话给你：喂，设计，我觉得你这设计图的颜色用的丑，按钮的颜色也不好看，你看人家微信的设计。

此时怎么回答？承认自己做的不好？不存在的，你的设计是辛苦做了那么多版本才确定的，是你让中国的PSD全球遥遥领先的。那这尴尬的事怎么办呢，你是一本正经的和他谈下设计理论或者配色之道，还是不正经的随口敷衍的连diss都不想。

在各自专业领域里，我们都有未知的盲区，而美和丑的成因不过是因为每个人的欣赏观点和美感层次不那么统一，我们需要深入了解对方才能予以纠正。

回到正题，我们就说说这个与设计师下游最密切的职位：前端开发，也是学习全栈设计必经之路。

前端开发又分为网页端和原生客户端，同时由于这两个端实现语言的差别导致他们所引发的问题和解决的难度也都不一样，后续我们会讲到设计师如何在没有前端开发的情况下输出完整网页。

一、先说网页端

网页端又分为了传统的PC端和强势占比的移动端，比较具象一点的关键词是：公司官网、后台管理系统、大促专题、H5、APP；就其核心实现语言来说：HTML、CSS、JS是网页端的基础，APP客户端中安卓是用Java、iOS是用Objective-C和Swift，与之对应的还有更深层的技术，譬如网页端还有jquery、react、sass、vue等，坑深预警。

所以在做全栈设计师这个事情上，要分等级，大部分情况下你不会抱着写代码的心态去学前端，这跟你做了三四年设计却一直没学画画没学摄影基本一个意思，我们只是需要懂得一些实现的逻辑和难度以及在专业术语上不弱势。

当然还有另外一个等级，你是想在一个完整项目里扮演设计师和前端开发两个角色，这就需要我们细细说来，甚至我们有必要促膝长谈，因为的确还是有很多应用是设计开发一个人独立完成的，其设计和体验也都很好。

二、再说说客户端

目前客户端主要是指Android端和iOS端。

UI设计师一般需要手动切图和标注，然后分发给安卓和iOS，而这中间如果需求改动或者被你的像素眼看穿，可能你就得把座位移到两个端的开发中间去反复讲解调试。现在有很多解放生产力的工具可以导图和快捷标注，甚至如蓝湖，可以直接上传就生成了切图（需要预先处理下图层）和标注，而sketch天生就是干UI设计的，在这方面的优势更突出，measure一键导出，但是只有Mac端。

在精准还原设计图这条路上，前端开发走的还是颇为尴尬的，最早的网页端因为IE低版本浏览器的兼容性问题，可能精准还原都基本不可能，特别是后期的各种特效（渐变、阴影、动画等）。一般都是保证能够不错乱的显示，或者完全不去支持IE8及以下，那低版本的浏览怎么办呢？提示升级是常规做法，要么用Chrome或者QQ浏览器之类的双核浏览器。

而客户端开发由于不需要自己切图和标注，还原上能精准很多，但是依然逃不过像素眼的你，撸起袖子就是左左右右上上下下各5像素，可能大讲个几天进展还是那么缓慢，但是此时如果你会用客户端的开发工具，是不是如虎添翼，说不定还有即时灵感加持。

三、最后说下切图

这个出错概率不多，但是也会有命名和格式的问题。

切图的注意事项中，一般而言：

◌动图导出gif（也可以用png序列处理成动画）；

◌颜色丰富的图片导出JPG（品质60%）会让尺寸小很多；

◌颜色单一的图标类可以导出PNG格式，有条件的可以处理成svg或ttf字体，这样清晰度和大小都能得到有效控制；

◌也可以转成webp格式（支持纯图和动图），压缩率很大，图片质量也较高，但是兼容性不好，特别是IE上；

◌还有腾讯的TPG格式，不过第三方应用的不多；

◌iOS端可以只切一倍的pdf，矢量图任性；

◌安卓端会有点9切图稍微有点难度，不过现在也都有工具可以快速绘制。

在学习的进程上，我觉得除了知己知彼，还要先把本职工作做完整，所以我们打开PS，等待下一篇的操作。

PS：文中难免有疏漏，但还是希望大家喜欢，轻拍求关注公众号：全栈设计邦 ( fullDesigner ) 。