如何做一个好的UI设计

UI设计英文叫User Interface翻译成中文意思就是（用户界面）。UI设计是指对软件的人机交互，操作逻辑，界面美观的整体设计。
说到这个界面设计，其实非常好理解，因为我们每天都在使用。我们手机里面的APP软件，QQ和微信的界面图标设计都属于UI设计师的工作内容
移动端互联网时代，每位同学都有一部智能手机，手机里面看APP界面图标，我们可以称为用户界面，也就是我说的UI设计。简单的来说，UI设计师就是负责设计这些在电子屏幕上显示的产品，（包括游戏UI，网页端，手机，以及目前比较火的VR,AR，其他设备端等）
比如微信界面、里面的图标 文字 整个操作点击 都属于UI设计师要设计的范畴。所以UI设计一直存在于我们的生活！
UI设计起源于美国硅谷，UI设计是2012年由硅谷传入中国，UI设计随着互联网行业的兴起和智能手机的普及而火的一发不可收拾。
UI设计是最近几年在国内火起来的，目前UI设计师的平均薪资是国内设计界薪资最高的行业，在北上广深杭这些一线城市UI设计师的平均薪资1万以上。从薪资不难看出UI设计这个行业目前在国内真的很火。
UI设计师需要做的工作有，APP界面图标设计，视觉设计，运营插画设计，交互动效设计，原型图设计，平面设计，小程序设计等。
好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。
UI设计按行业一般分为4种行业
分别是移动端UI设计，PC端UI设计，游戏端UI设计，以及其它端UI设计。
第一种：移动端UI设计
那么什么叫移动端UI设计呢，移动端UI设计就是手机平板上的APP设计，比如微信聊天界面，QQ聊天界面，手机桌面，手机上看到的所有图标界面点了后会有反应的我们都可以理解成移动端UI设计。
那么我们来讲解一下移动端UI设计师的工作内容有哪些？移动端UI设计师的工作就是我们的APP界面图标文字按钮等，这一块就是我们移动端UI设计师要做的工作，要做好这份工作的话我们需要学习的东西有很多，比如说要懂理论，要懂用什么颜色，要用什么字体，要用什么版试这些都是需要学习的，看似简单的一个设计往往来说难度性都挺高的，并没有看上去那么简单。不然现在的UI设计师的工资也不会这么高了。
第二种：PC端UI设计
PC端UI设计就是我们电脑上的软件和网页按钮，比如电脑版的QQ，微信，电脑管家和网页的一些按钮图标等都属于PC端UI设计。
其实移动端UI设计和PC端UI设计是差不多的，只不过平台不一样。PC端的载休是电脑，移动端的载体是手机。
第三种游戏UI设计
那么什么是游戏端UI设计咧？比如王者荣耀，英雄联盟和一些其它游戏中的登录界面、都是属于游戏端UI设计。
目前游戏端UI设计在近几年发展并以前没有那么好了，主要是因为现在腾讯网易这些大公司已经把游戏的市场站领了，其它的都是一些小公司，所以这个行业发展没有之前那么好了。而且游戏UI对美术基础要求也比较高。
这就是类似游戏的界面，这里面的按钮就是游戏UI设计师用手绘板画出来的，做这个工作的话必需要有美术基础，大公司还要求科班出身，所以这个工作也是比较累的，所以我建议大家做UI工作的话可以选择移动端UI设计，因为目前移动端UI设计比较火。
第四种：其它UI设计
最后一种就是其它端UI设计，像VR界面、AR界面、银行取款机界面、这些都属于其它端UI设计，其它端UI设计用户较少，但又需要，未来有可能很火，有可能保持现状。

想要知道这三者哪个发展比较好，首先我们应该知道他们分别是做什么的，再去分析就业市场如何

什么是插画设计？

插画专业是属于在纯艺术和设计创意中间的一个专业，就业领域相对较广。

什么是平面设计

主要包括美术排版、平面广告、海报、灯箱等的设计制作。简单来说，就是作为设计者的你，在了解了客户需求之后，进行消化，将一些基本图形按照一定的创意在平面上表现图案的过程，而不是简单的堆砌。

什么是UI设计

是指对软件的人机交互、操作逻辑、界面美观的整体设计，也叫界面设计。好的UI设计师，不仅能让软件变得有个性有品位，还能让软件的操作变得舒适充分体现软件的定位和特点。

再来看看这三者就业薪资水平怎么样？

插画师 就业前景如何？

插画设计专业的就业前景非常的广泛，插画专业的学生就业往往选择游戏公司、动画公司、互联网公司、商业插画、平面插画、广告公司等领域。

UI设计师 就业前景如何？

UI设计行业，刚刚在全球软件业兴起，属高薪技术设计产业，目前，国内外众多大型IT企业，例如：百度、腾讯、雅虎等企业均已成立专业的UI设计部门。

学习了平面设计的你，可以涉足报纸、杂志、出版等大众传播媒体，广告公司等相关行业，而工作技术难度各公司要求档次高低不同，工作时间比较不稳定，要求创作速度快。目前，平面设计对人才需求量还是比较大。

从前途角度来说，插画＜平面设计＜UI设计，但成长空间来说插画＞平面设计＞UI设计，虽然UI设计很少会往下退步求次

1、主要用途不同

虽然2款软件都是用于图像处理，但是主要用途有所区别。PS主要处理位图，，即点阵图像；AI主要处理矢量图。

位图和矢量图最大区别在于，不受分辨率的影响，矢量图放大，图像也不会模糊，而位图放大，图像会模糊

2、实际应用不同

ps软件用途广泛，，主要处理数字图像，在图像、图形、文字、视频、出版等各方面都有皆可使用。

ai软件多应用于出版、多媒体、在线图像的工业标准矢量插画的处理，因为矢量图形的特性，该软件被广泛应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理、互联网页面的制作等。

3、基于图形特性不同的区别

矢量图形由路径和锚点组成，影响大小因素主要是路径和锚点，以及它有路径和锚点组成的图形对象所包含的各种信息。

矢量图的特性是，不管图形被放大多少倍，边线依旧清晰光滑，不模糊。位图是由每一个像素组成，决定像素图大小的主要因素是像素的多少和像素所包含的颜色信息。位图的特性是，越放大，越能清晰到像素，图像也就模糊。

参考资料来源：搜狗百科-AdobePhotoshop

参考资料来源：搜狗百科-AdobeIllustrator不分彼此啊，都要用到。

现在大型企业用的都是aiai可以和ps在一起用把置入到ai里后再把拽到ps里这样在ps该后的就可以直接在ai里使用我感觉很便捷。。ai用习惯就好了，ps会用的,ai就很容易上手。快捷键几乎相同。我感觉ai能融合coreldraw里的东西。ps相对于设计专业来说是比较局限。打印嘛。。。用该都一样。。。不过从我的视觉上来说ai打出来的颜色比较鲜艳。UI设计常用软件中，PS和AI的地位举足轻重。于是常看到设计群里，一些新手问经常在问：做APPUI或是网页设计到底用Photoshop还是AI(Adobeillustrator)好AI和PS的区别如下：

1、出生时间

首先看看这2个巨头软件的诞生时间:

illustrator:1987年

Photoshop:1990年

2、第一版本的启动界面

双方都是粗糙的单色像素图像设计

3、最多用在那个方面

illustrator:矢量图形设计

Photoshop:像素图像设计

4、什么用户使用最多

illustrator:设计师

Photoshop:艺术家

5、放大之后

illustrator:放大后，图像依然清晰

Photoshop:放大后，图像会被模糊

注：也就是说，用AI绘制的图形是可以放大而不失真，而PS就不可以，因为PS绘制的图形都是以像素点来画，除非直接使用矢量工具来绘制。

illustrator:可同时新建多个画布工作

Photoshop:只能新建一个画布

7、剪贴蒙版

illustrator:在对象上面

Photoshop:在对象下面

8、选择工具

illustrator:选择的是对象

Photoshop:选择的是区域

illustrator:一个图层可以包含多个对象

Photoshop:一个图层只能包含一个对象

10、Ctrl+Z(撤销)

illustrator:可以多次连续的撤销

Photoshop:只能撤销一次，要按Ctrl+Shfi+Z才能继续撤销操作

注：其实PS是特意这样设计撤销的，如果你想像AI一样，可以直接修改快捷键即可。

11、工作区域

illustrrator:可以在画布以外的区域继续绘制

Photoshop:只能在画面以内的区域绘制，超出会被隐藏

12、保存时间

illustrator:保存快

Photoshop:保存缓慢

这是比较清晰的对比，重点是：

AI适合用来绘制矢量图，比如手机APP、网页设计的布局排版、按钮、图标等矢量元素。PS适合用来做平面广告、插画或后期处理等。5年工作经验UI设计师告诉你，UI设计用的最多是Sketch和Photoshop，再者就是AI，AE，Axure等

与上面所说的恰恰相反，对于UI设计来说，PS适合做手机APP、网页设计。AI适合用来做APP、网页里的图标、LOGO、广告图、插画。

当然UI设计靠的主要还是人，PPT照样能设计UI。PS：如果要制作图标，需要用到矢量绘图软件AI来制作，这样放大才不会失真。

UI设计中还会设计很多饿工具，小编姐姐简单分析如下：

1、Mindnode

Mindnode是在Mac和IOS上的流程图工具，它同时具备专注性和灵活性。是进行头脑风暴和组织规划生活事务的绝佳工具。

2、百度脑图

百度脑图是一个线上，云端操作的思维导图工具。即时存取，方便分享协同，不受终端限制，在任何地方都可以打开。

3、Xmind

同样的，Xmind是一款流行思维导图软件，打造易用、美观、高效的可视化思维管理工具。

4、MindManager

其实，思维导图工具都是大同小异，具体的你用的舒不舒服，需要你亲自实践，你觉得哪个合适你，你就选择用哪一个。

二、原型图工具

所需工具：Sketch(框架图)、POP(初步原型)、墨刀(高保真原型图和交互)

1、Sketch

Sketch是一款强大的界面设计工具，专为UI设计师打造的软件，可让你的界面设计变得更简单，更高效。如果你是一个UX或者UI设计师，那么你一定知道Sketch这个强大的UI界面设计软件。

在Sketch中用户能轻松地设置图层面板，可批量命名图层、智能标注页面、填充头像和文字等，可实现多层式填充、渐变、噪点等操作功能;Sketch提供“全部导出”功能，因为它是基于矢量的，所以可导出PDF，JPG和PNG(可选择2x)等格式。不得不提的就是Sketch为设计师提供了丰富的插件，越来越能满足不同人群的设计需求，所有你需要的工具都触手可及。

a、出色的用户体验；

b、非常简单易用；

c、提供大量实用的插件。

Sketch是一款轻巧、易用的矢量设计工具。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、AppleWatch交互流程包。在原型框架素材的基础上，用Sketch画出符合产品需求的框架图。如下：

2、POP

PrototypingonPaper，一款手机App，把纸上的东西变为原型。拍照后可在手机上编辑热区，手机上快速模拟原型动效。

3、墨刀MockingBot

墨刀，是一款在线的高保真原型与线框设计交互工具，相信很多设计师都用过。可自动标注、代码样式、下载多倍率切图，解决设计师与多平台开发对接时的交付问题。

三、原型交互demo工具

所需工具：Sketch(设计稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互动效)、墨刀(原型交互)、Mockplus(原型界面)

1、Axure

你可以用Skecth设计完后，直接上Marvel，实现高保真交互展示。且Marvel有Sketch插件，可以一键导入。如果你设计的是手机App，用Marvel后，就可以直接在手机上给别人演示啦。

2、Marvel

3、Principle

Principle主要用于实现较复杂的交互动效，操作比Marvel难一些，适合有动画基础的人。

墨刀也是原型工具，也可以实现交互的功能。你比方说，你在墨刀里做了一些原型页面，可以通过交互演示给客户看。这样更直观一些。不多说了。

5、Mockplus

支持平台：Windows&Mac

Mockplus是一款高效简单的app界面设计工具，产品经理圈子中比较流行的一款国产界面原型设计工具。软件提供了封装好的3000多个图标以及200多个组件，拖拽即可进行UI界面设计，学习成本低，无需代码参与，所以对于UI设计师来说是一个非常好的选择。如果一个UI设计师连基本的原型设计能力都没有，怎么和开发进行有效的沟通呢。

值得一提的是Mockplus最近发布的一款摹客设计系统可谓是给UI设计师提供的一大福利了，该系统提供标准色、标准字、图标、布局等等这类大纲，几乎囊括了一份设计规范文档该有的所有内容，并且支持Sketch插件，意思是设计师们可在Sketch中一键复用你自己的设计规范，节省了大量的操作时间。

a、简单，零门槛；

b、丰富的图标及组件；

c、拖拽实现交互效果；

d、小程序预览，随时随地跟客户演示。

四、设计和切图工具

所需工具：PS、AI等(设计)、Cutterman(切图工具)、PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等。

设计过程就不说了，只要你是一位UI设计师，页面怎么做那你肯定清楚。当你设计完成页面以后，要做的工作就是：标注、切图。

1、界面设计工具(Photoshop)

支持平台：Windows&Mac

Photoshop是最流行的图像编辑器之一，UI设计师入门的必备界面设计工具。相信不是设计行业的小伙伴，也略知一二。PS作为UI界面设计神器，有着强大的编辑和处理功能，想要什么的图形都可以用PS来实现，可用于摄影的后期制作，可给图像添加各种滤镜，调整亮度，对比度等，生成高分辨的图形。借助图层面板可非常简单和高效的处理修复;并且PS提供了不同文件格式保存的选项，调整图像大小和分辨率也不会丢失图像质量。

PS：如果要制作图标，需要用到矢量绘图软件AI来制作，这样放大才不会失真。

a、照片处理技术(剪裁背景，裁剪，调整光线，调整颜色，过滤，消除红眼等功能)；

b、强大的图层功能处理副本时保存原件；

c、批量处理照片；

d、兼容其他Abode套件程序，如AfterEffect，InDesign，Illustrator；

e、Photoshop可以将图像保存为各种格式。

2、标注、切图的工具有很多，在这里只不过是推荐几款常用的给你。

1)Cutterman

切图插件，需要你安装到PS插件里。能够自动将你需要的图层进行输出，以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

注：需要安装AdobeAir文件，要不然没有办法安装该插件

2)PxCook

PxCook既可以标注，也可以切图。是高效易用的自动标注工具,生成前端代码,设计研发协作利器。只需点击拖拽,即可轻松获得间距尺寸,字体,阴影圆角等所有信息。PNG,JPG也能手动测量。支持标注单位：PX,PT,DP/SP,REM。还可以生成前端代码，支持Win/Mac,支持PS/Sketch等。

3)Zeplin

Zeplin是配合着Sketch非常好用的一款插件，设计稿完成后，可以直接从Sketch导入到Zeplin中。Zeplin可以帮你自动生成尺码标注、CSS样式代码、需导出的(在Sketch中设好切片的设计稿，在Zeplin中可以直接导出)，以及共享成员间可以备注和评论。

五、动效视觉处理工具

支持平台：Windows&Mac

AdobeAfterEffects简称“AE”是Adobe公司推出的一款关于图形和视频处理的界面设计工具，如今动效设计在UI界面设计中的应用已经越来越广泛，而且国内许多公司开始重视动效设计了，所以作为UI设计师，也应该掌握一些动效设计。动效在UI设计中的应用其实比我们想象中的还要强大，好的动效设计可以给用户提供一个良好的视觉感受，从而加强与用户之间的交互体验。

AE这款界面设计工具可以帮助UI设计师对图像视频进行任何特效处理，是一个灵活的基于层的2D和3D后期合成软件，包含了上百种特效及预置动画效果，可与Premiere，Photoshop，Illustrator等软件无缝结合，创建无与伦比的视觉效果。它还借鉴了许多优秀的软件的成功之处，将图像视频特效合成技术推到一个新的高度。

a、震撼的视觉效果；

b、与Premiere，Photoshop，Illustrator无缝兼容。

六、前端工具

1、Dreamweaver

支持平台：Windows&Mac

Dreamweaver是一款网页代码编辑器，帮助设计师和程序员快速制作和进行网站建设。为什么要把它单独列出来，是因为我觉得UI设计师不仅仅需要掌握一些界面设计工具，还需要学习和了解一些前端的布局和设计，才能够更好的配合前端工程师们做好产品开发的工作。UI设计师如果了解一些基础的代码知识，可作为一个加分项在面试中脱颖而出。

七、项目进度管理的工具

所需工具：Trello(任务管理)、Bearychat(团队沟通)。项目进度管理的工具也有很多，在这里只是推荐几个。ui设计工具大揭秘

1、Trello

Trello是国外非常火的任务管理软件，据说拥有1900万注册用户，国际红十字会、谷歌、美国迪尔公司都在使用。

2、Bearychat

Bearychat是中国版的Slack，聊天群组+工具集成，取代QQ或微信作为团队工作中的及时聊天沟通工具。归根结底，技多不压身，想要成为一名优秀的UI设计师，掌握界面设计工具只是其中一部分，UI界面设计需要设计师们掌握色彩搭配，设计规范，界面排版，沟通能力，切图标注，尺寸标注，用户体验等相关知识。因此需要的就是不断学习，不断坚持，不断的丰富自己的综合能力。希望以上分享的五款界面设计工具可以帮到你们。

相关新闻：

《解析ui设计师工作内容》、《ui设计是什么》、《UI设计7大就业方向》、《浅析ui设计就业前景》、《ui设计原则要素有哪些》、《ui设计培训课程内容》、《UI设计流程大解析》UI设计常用软件中，PS和AI的地位举足轻重。于是常看到设计群里，一些新手问经常在问：做APPUI或是网页设计到底用Photoshop还是AI(Adobeillustrator)好AI和PS的区别如下：