虽然ehr系统白底黑字赫然显示工作岗位是交互设计师，但作为被项目组公用的资源以及集交互、用户体验、界面设计于一身的“综合型岗位”，项目组的UI部分通常也是由我来完成的，好吧，这里不把自己说的bi格那么高了，毕竟很多可（zhao）爱（shi）的攻城狮们，包括前端和后台，会经常大喊一声，这是美工给的方案，赤裸裸的剥开我华丽的伪装，╭(╯^╰)╮，已懒得辩解，美工就美工！虽然自己是从一枚生物狗转行UI，又到交互设计，但自认虽不优秀但还是一个合格的UI的，那今天就写一下作为UI的基本技能，从底层开始，希望给刚入行的UI一点借鉴，因为现在的大形势是视觉UI偏饱和，游戏UI没接触过，不懂，两个方向可拓展自己，了解前端知识，或者做用户体验。所以对UI的综合能力的要求越来越高，当然了，对于设计团队，可能对专业技能更看重，但绝大多数UI，最后都是进了中小公司，身兼数职不足为奇，所以以下均为个人经验之谈，同行可阅，莫喷。
1.配色的能力####
这里一定很奇怪，为什么我会认为配色如此重要，甚至超过了对基础软件的使用，因为在很多人眼里，UI不就是画图标的么。这篇文章如果是一年前写，我会和2.交换一下，但现在阿里巴巴的iconfont以及google已经提供了资源丰富的图标以供下载免费使用，而且格式也从png到svg到icon font，应有尽有，甚至毫不夸张的说，如果一个小公司有一个具备审美能力的前端，那么UI的岗位，不是可有可无，而是根本不需要。这里不是耸人听闻，也不是灭UI的威风，因为前端们只要把这些图标down下来，改一下颜色，对于目前的扁平化风格，足够应付很多页面。所以，就目前情况来说，UI一定要有良好的配色能力。那么，配色能力哪里来？
这里，我的建议是，少去那些专业的配色网站，色环，相近色，互补色，我敢保证，对于普通的UI来说（高阶的除外），这些一点帮助都没有，想一下，除了基础的黑白灰，去掉企业色，允许你自由发挥的颜色并不是很多了，简单的方法是什么？经常上dribbble之类的设计网站，保存各种你最欣赏的页面，然后，找和你设计方案相似的，OK，直接拿来用。为什么我说配色网站帮助不大，这里我举个例子说明。
这是我从日本传统色NIPPON COLORS取下来的两个颜色，一红一绿，名字很美，也是我比较喜欢的两个颜色。
这里我要设计一个登录界面，然后我拿这两个颜色怎么办？做出下面这种界面么？
而如果有一个页面设计是下面这种，认为还不错的：
然后同样登录界面，我在不改变任何界面元素的情况下，只用它的配色方案生成一版看一下效果
好像还不错。
当然了，这里我举得例子有点不太恰当，但只是想通过这种方式来说明，很多配色，大神们已经帮我们做好了，我们直接拿来用，十有八九不会出错。
颜色美好≠界面美好，对于初级UI，配色的最佳方案是拿来主义，随着水平的提升，再形成自己的风格。
2.做图标的能力####
这个毋庸置疑是最基础的，也是我当时转行UI的一个优势，我自己是从02年开始接触photoshop，从7.0一直到现在的2017CC，虽然不是科班出身，一直通过各种教程自学，什么工具都用，当然，也修图，但毕竟十几年的实战经验，对于软件的使用还是很娴熟的。因为ps的功能太过强大，那么作为UI，最需要掌握的是布尔运算。
第一，尽量只用基本图形的加减，第二，图标风格的统一。
图标的格式除了常见的PNG-24，还要知道svg，icon font，以及透明背景的bmp（是的，你没有看错，这个用处不多，我也只做过一次，需要了解有透明通道的位图是什么以及如何生成）。具体我们的图标用什么格式，资深UI不用说了，小白们问前端，什么时候需要做雪碧图，什么时候需要单独切图，负责的前端开发人员会告诉你的。
图标风格的统一，往复杂里说，要求非常精细，比如描边的宽度，基本图形的圆角半径等等，能统一的地方尽量都统一，但往简单里说，把握一点，线条图和块状图，一组图标只能选择一种，不可混搭。同样，举例说明，还是刚才的登陆界面，如果线条图和块状图混搭，会造成很不和谐的页面效果，尤其是当图标元素比较多的时候。
如果你想要线条图，那么你可以都改成下面这种样式
关于图标，这里多说几句，除非你有特别好的创意，否则用最基础的永远不会出错，比如齿轮代表设置，笔代表编辑，前后两张纸代表复制，心或星表示收藏，不要担心因为做了没有特色的图标而被人说水平很low，通常情况下，开发人员和BOSS都不会太过于关心图标是不受标新立异，反而中规中矩，更容易被接受。依旧举例说明：
这是打印的图标，左侧的最简单，1分钟吧，然后，你可能觉得太过简单了，冥思苦想设计出来右侧的这种，你为此可能还特意去看了办公室的打印机，尽可能真实的还原了打印机的按钮，包括纸张的进出口，还做了透视效果以及精致的折角（为了想这个相对复杂的造型，我用了>10分钟）。只是这样对比的话，嗯，右边的貌似精致对不对？满满的设计感对不对？打住！因为在实际使用过程中，你看到的可能是下面这样的：
是的，尺寸被压缩了，这时复杂的设计带来的后果就是造型各种看不清，而简单的设计最大的好处就是它即使缩小了，仍能清楚的表达图标想要传递的意义。
说到图标，新晋UI一定要知道什么时候用雪碧图，什么时候单个切图，什么时候要做@2X的图，那就是：看前端攻城狮的心情！！哈哈，此言不假，换句话说，在UI还没有能力主导项目的情况下，他要什么就给什么就是了，so easy。
photoshop一定要用最新版的，途径自己解决，反正我现在办公用的2017CC，家里因为机器配置的原因，勉强跑得起来2014CC，对比很明显，新版本的功能就是强大，插件推荐cutterman，切图必备，界面标注自然是Mark man，正版比体验版好，我是自费解决的。
这里为什么单独提到了AI，其实很多UI是只用photoshop的，AI在平面设计中用的更多一些，但现在以及以后前端的发展，svg格式真的不可忽略，当然了，2015CC以上的版本，可以拷贝svg格式，对于svg sprite图，ps无能无力，这里需要用到AI的符号面板。后面我会单独写一篇文章来介绍svg sprite图的制作和使用场景。还有svg动图等等，都需要在掌握AI的基础上才能做出很炫的效果。
另外，附上两段代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
<path fill="#EA5514" d="M6.7,5.1L3.7,2.1c-0.2-0.2-0.2-0.5,0-0.7l0,0c0.2-0.2,0.5-0.2,0.7,0l2.9,2.9c0.2,0.2,0.2,0.5,0,0.7l0,0
C7.1,5.2,6.8,5.2,6.7,5.1z"/>
<path fill="#EA5514" d="M7.3,5.1L4.4,8C4.2,8.2,3.9,8.2,3.7,8l0,0c-0.2-0.2-0.2-0.5,0-0.7l2.9-2.9c0.2-0.2,0.5-0.2,0.7,0l0,0
C7.5,4.6,7.5,4.9,7.3,5.1z"/>
</svg>
这是AI生成的。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="112px" height="192px">
<path fill-rule="evenodd" fill="rgb(242, 155, 118)"
d="M106.510,107.314 L27.314,186.510 C21.065,192.758 10.935,192.758 4.686,186.510 C-1.562,180.261 -1.562,170.131 4.686,163.882 L72.569,96.000 L4.686,28.118 C-1.562,21.869 -1.562,11.739 4.686,5.490 C10.935,-0.758 21.065,-0.758 27.314,5.490 L106.510,84.686 C112.758,90.935 112.758,101.065 106.510,107.314 Z"/>
</svg>
这是ps生成的。
对比后会发现，AI生成的svg会有viewbox属性，这个大小是画板的大小，这意味着什么？就是我们交给前端开发的时候连透明区域都可以定义好了。
（关于这里，我纠正一下自己的错误，ps的新的保存功能键 ctrl+Alt+shift+w支持SVG格式，但冗余代码有点多，也是有viewBox属性的，而且把样式文件单独分离了出来放进定义的样式文件里<defs><style></style></defs>，这里设计师可以自己尝试一下比较一下区别）
必须熟练掌握的软件：Photoshop、AI（会越来越重要）
图标风格的统一性体现了专业水准。统一的重要性远大于设计的图标的复杂度。
3.构图的能力####
如果你是平面设计转行的UI，可能构图能力不是什么问题，但对于非设计专业出身，这点可能需要好好的把握一下。对于UI来说，构图并不像平面设计那样，讲究画面的平衡感，只要记住一点就好，尽可能的对齐，这里就要求按照内容和边距先规划好最小单元。
以web版为例，放上两张栅格化布局的示意图看一下：
栅格的建立方法，低版本的photoshop推荐插件guideguide，现在新版本的有福音了，“新建参考线版图”，真是好用的不要不要的，妈妈再也不用担心我一根根的新建参考线了。
这里特别强调一下，用栅格布局的时候一定要灵活，具体需要自己领会，就是不要生搬硬套，移动端的话，页面元素相对少一些，对齐主要是垂直方向的，只要稍微注意些，别让自己的设计太过随意，而且我们在发给前端界面标注的时候，方便的话，就顺手发一张带参考线的，因为现在项目的保密性，我就不把自己做的放上了。
养成良好的栅格化布局的习惯，让界面元素尽可能的对齐。带参考线的界面效果图会让开发认为你是经过严谨的设计思考的。
4.做基本的交互原型图的能力####
说到这里，可能很多UI会说，这是交互设计的工作嘛，注意，我用到的一个词是“基本”，就是说，这些做交互原型图的软件，选个最常用的，只需要会用一个功能就可以了，我拿Axure举例说明：
是的，就是这个热区！软件安装时间，10分钟，了解软件的面板和发布功能，10分钟，学习热区功能，5分钟，总之学习成本非常低。
对于一般的UI来说，并不要求你做高保真原型图，那用热区做原型图的目的主要是方便给产品经理和开发人员演示页面之前的跳转关系。如果需要继续进阶的话，需要掌握的就是动态面板，这个是做各种特效的基础元件。动态面板用好了，Axure的一半功能就已经掌握了，对于UI来说也足够了，如果再有继续的追求，那就玩到中继器，掌握条件语句设置和函数，恭喜你，这时你已经成功晋级交互设计师了。或者，严格来说，已经具备交互设计应该有的基本技能了。
除了Axure之流，也要尝试使用Xmind之类思维导图，便于自己理清思路，Visio可以做流程图，当然，用纸和笔手绘的也行，但实际情况是，专业软件做出来的发给上司看会显得更加专业哦。但一个人的精力毕竟有限，所以这些工具类的不用纠结，哪怕会一种就行，AI也可以做流程图，甚至PPT都能做交互原型，最重要的还是逻辑思维。
Axure、Mockup等等，会用一个就行，能实现最简单的页面跳转就可以，当然，如果能做各种交互效果，毫无疑问的加分项。思维导图、Visio，可以会一点基础的功能。
5.获得最新知识的途径####
这个我认为是非常重要的一个能力，行业在发展，如果一直停滞不前，这里不要求设计风格处于前沿，但要了解很多的行业动态。举例说明，这两年一直很火的low poly（低多边形风格），比如上司认为QQ登录的那种背景很时尚，如下，你想在作品里实现怎么办？
首先，动态效果，我们要问一下前端开发能不能搞定（这个由他们的水平决定，但网上明明有实现的方法，但有时候我们要原谅前端的无能为力 ……），他们能实现的话我们只要给配色方案就好，那万一前端搞不定，我们也不能束手无策，静态图片虽然是下策，但也勉强可用。怎么实现呢？靠手绘？！No！在线生成工具！
一键生成，而且可以随意改变色系，改变晶格大小，以及，还能生成svg格式。
对于UI来说，需要获取的信息很庞大，除了流行的设计风格，还要尝试了解前端技术的发展，互联网动态，新兴的电子设备，等等，总之，越杂越好，（但一定是相关的哦，B站的二次元动漫不算哦）
因为说过自己也是转行的，总感觉专业知识体系不到位，所以在平时有空闲时间的情况下，我也会看一些偏学术类的文章，包括硕士论文，截一张我整理的部分专业文章的图
来源就是中国知网了，账号需要自己解决，成本可控。
多上国外的设计网站，dribbble上follow几个排行前几名的大神，国内的话推荐掘金，UXRen，不要局限于自己的专业，注意扩展。就系统化的知识而言，论文要更好些。
6.把基础的图层样式转换成代码语言的能力####
说到这点，很多UI可能会不服气的说，我又不是开发人员，怎地还要会代码了？！其实讲起来没有那么高深，就是很基础的CSS语言，对于UI来说，随着CSS3的崛起，这个技能一定要掌握，这也是优化你的应用的很重要的一部，比如，我想做下面两种按钮效果。
然后你怎么处理呢？要切图？如果尺寸不同还要切成三部分？
不，正解就是这是CSS样式完全复现的。因为你交给前端的是这样的代码：
normal状态按键
border-radius:6px;
box-shadow:0px 2px 2px rgba(0,0,0,0.5)
background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#FEFFFF), to(#CFD0D4))
text-shadow:0px 1px 0px #FFFFFF;
press状态按键
border-radius:6px;
无阴影效果
background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#D4D4D4), to(#9c9ea1))
文本无阴影
你可能会说，现在扁平化时代，扁平化！我要这些立体/凹陷效果作甚，这不一夜回到十年前了嘛！那你不可否认的Material Design风格，还有现在的柔和渐变和漫射投影，这些都是可以用样式直接实现的，如果你不能把这些效果转换成CSS语言，那前端开发人员可是非常为难的，他们并不像UI那样能看出对比不是非常明显的深灰浅灰渐变以及外发光的大小、色值等等。
关于图层样式和CSS3的一些基本的关系，也会专门新建一篇详细说明。
图层样式借助在线的CSS3样式生成器转换成代码无疑是最简单的途径。
7.综合能力####
这一条汇总一些我认为其他有帮助的技能和知识领域，比如逻辑思维能力，我认为就非常重要。在很多公司，UI甚至不知不觉中肩负了产品结构的构建，（是结构不是架构哦），“逻辑”这种说不清道不明的鬼东西，只有多看多想多积累，就一定会提升。
如果你要一些动态效果，可能还会给前端这种运动速率曲线设定值。
canvas能实现滤镜效果你造嘛？JS框架和各种插件库你造嘛？不知道不可怕，可以从现在开始，试着去了解。
除此之外，建议UI多了解一些基础的词汇，比如延迟加载，数据库，变量，缓冲页，等等等等，总之，你可以不会，但不能在别人和你交流的时候一脸天真傻白甜。
但万万注意的是，不能让这些“旁门”占据你主要的时间，只是建议在做完手头工作想刷刷淘宝购物、刷刷朋友圈的时候提醒自己还有很多未知领域等待区探索，每天花费半个小时左右的时间，足够。
除自身专业外，其他相关的多多益善且浅尝辄止。
UI入门门槛很低，培训机构出来（只要认真学习过）都可以直接上岗工作，但要成为一名真正的界面设计，而不是美工的话，需要进阶的技能真的很多很多。我自己非设计专业出身，且没经过任何培训，但一步步靠自学也积累了部分经验。无论如何，要有自己的思想，一名失败的UI是开发让做几*几的图然后画个图标，产品经理说这里缺张广告图就昵图上搜一张然后改改，而一名成功的UI则是参与到产品的设计中，并用自己的专业知识告诉周围的人，我这种设计思路的意义何在。over。
