15款设计师必备的UI和UX工具

人人都是产品经理社区推出产品经理培训课程，让BAT产品总监手把手带你学产品吧！

如今的设计师有很多机会可以接触到不同领域的设计。于是，在各种平面设计和网页设计之间流转的设计师们，逐渐进入了UI和UX设计领域。UI和UX与其他的创意工作，如logo设计，2D/3D动画，信息图形，动画等等略有不同。UI设计是一个制作前端页面以实现人机交互的过程。而UX设计则包括研究人机交互的各个方面，如可用性，功能性，交互设计，信息架构设计等等。

设计师们常常使用各种各样的工具和资源以达到他们的设计目的。市面上也有许多测试，原型，仿真和其他的工具可供UI和UX设计师使用。以下为笔者总结的一些可以帮助设计师们开展工作的线上工具和资源。

Proto.io是一款应用开发的原型工具。里面包含了大量的UI库和交互UI的组件。这个工具同时也提供调整颜色，滤镜，多文件上传等功能。Proto.io可与DropBox保持同步，使团队间的协作变得更加实时和便捷。

Pidoco是一款针对web，移动端和企业应用开发的原型软件。该软件提供基于云服务的平台，用于制作线框图，移动仿真，实物模型和U原型。Pidoco内部包含了许多模板，可以实现快速制作原型，同时也提供了实时协作功能。 有了Pidoco，你就可以设计交互原型的同时在IOS和安卓设备上实时运行了。

InVision一款强大的转换工具，它可以根据功能，比如动画，手势，特效等，将静态的设计转换成交互原型。该工具同样提供了基于云服务的平台，可以实时协作正在制作的移动端原型或企业应用原型。invison也支持设计Apple Watch和Android Wear的原型。

UserTesting是一款用于测试网站、应用、原型和其他台式机、平板电脑和移动设备的工具。 UserTesting就是一个用户研究平台，可以让你的目标用户来测试你的网站或APP。最后通过视频，指标和统计数据等等来向你提供有价值的目标用户的反馈。

唔，好工具，可惜要收费。

PowerMockup是一款PowerPoingt用户专用的模型和线框图工具。应用提供了PowerPoint中缺少的UI设计组件。这些元素可用于在PowerPoint中创作多种移动设备、web和桌面应用的原型。PowerMockup也提供了强大的协作和分享功能。

PickFu是一个调查平台，可以帮助设计和市场人员找到解决方案。这也是一个接收建议、评论和反馈的工具，在这里，你可以收到来自美国用户的关于logo设计、封面设计和UI设计等等的建议，评论和反馈。

Myna是一款优秀的A/B测试或对比测试工具，被图形设计师和Web开发人员们广泛使用。这个工具对单个访问者执行测试并给提供产品各个版本的细致反馈。可用于网页设计，Email设计，广告和UI设计等等。

Ace UI是一款IOS8专用的移动应用UI工具。它提供了大量的字体，PSD模板和其他的UI元素。此外，它也提供了线框图和原型工具包，可以帮助提升APP开发效率。

Form是一款强大的原型工具，支持在设备上构建和定制本地原型。它还提供了最新的MD部件，还可以创建自定义部件。

MouseStats是一款流行的UX分析工具，提供了多种监测用户在网站上交互的功能。这个工具提供了许多服务，像视频记录浏览器会话、滚动热图、统计数据和调查等等。

POP或者Prototyping On Paper是一款相当酷的应用，它可以把手绘的操作和模型转换成交互原型。该应用可在多平台多种设备下工作，同时也整合了DropBox可以实现实时协同。

Gliffy是一款支持在线协作的专业设计应用。这个工具支持设计专业流程图， 技术图纸，线框图，流程图，网络图和站点图等等。

Antetype是一款用于制作UI原型的软件应用。这个应用400余个预设计的主流平台的组件。它也提供了动态布局，响应设计功能，属性绑定，断点，演讲模式，内嵌，注释等等功能。

Wirify是一款非常出色的UX工具，它可以一键将多个网页转换成线框图。这个工具可以让你检查页面结构和网页布局。而且，还支持编辑线框图并把他们导出到其他群的设计应用中，比如Baslsamiq或者Omnigraffle。

Naview是一款强大的工具，可以用来设计导航原型和测试导航原型可用性。使用Naview，你可以预览信息架构和网站地图。此外，这个工具还可以用来设计下拉式菜单甚至可以直接在浏览器中编辑导航结构。

总结:

一般来说，在web界，有三种图形用户界面。分别是工具型用户界面，桌面型用户界面和过程型用户界面。随着计算机技术在各个方面的应用，UI和UX设计范围变得越来越显著。我们可以期待未来即将出现的可以辅助UI和UX设计的工具。

当下的UI和UX工具都有许多内置的功能，可以很大程度地辅助设计师的工作。就UI和UX设计而言，这些工具也在提高视觉和功能方面带来了许多创新的成果。

以上所列仅为笔者在工作中接触并使用的工具，如有遗漏，欢迎补充。

#专栏作家#

康小胖，人人都是产品经理专栏作家，产品经理。专注专注O2O电子商务，坚决拥护用讲故事的思维做产品，关注旅游行业及移动互联网，爱好圆珠笔涂鸦。

微信朋友圈

热评文章

人人都是产品经理社区（woshipm.com）是中国最大、最活跃、最具人气产品经理学习、交流、分享平台，微信公众号woshipm。成立5年以来举办线上活动500余场，线下活动数百场，覆盖北京、上海、广州、深圳、成都、杭州等30多个城市，在互联网业内得到了广泛关注和高度好评。社区目前拥有300万忠实粉丝，其中产品经理占比50万， 中国75%的产品经理都在这里。

Copyright © 2015 WOSHIPM.COM - 人人都是产品经理 - 粤ICP备14037330号-1

返回顶部"

零基础 UI 入门（一）：解析UI设计概念和就业形势

从第一篇，也是最早的一篇零基础学 UI 文章《设计干货 | 从零基础学习 UI 设计》到现在已经过去很多年了，UI 设计师的职能、工具、知识体系，都经历了大量的变更和革新。不仅越来越碎片化，也越来越难上手学习，零基础入门成本大幅提升了。

所以，我们打算开启一个新的系列，输出一部完整的 UI 零基础学习指南。根据 UI 新手系统学习 UI 设计的顺序，陆续会输出 12-15 篇不同模块的系列性文章。

系列文章声明

1. 写作目标：

我们的目标是通过这个系列，帮助新手高效、系统性地完成对 UI 职业的知识的入门。

UI 是一个完全面向职场的工作技能，它基本无法成为个人陶冶性情的爱好。学习这个技能，就是为了在真实的工作环境中进行应用，是一门以实用主义为内核的学科。

所以，在内容制定上我会避开过于概念、学术性的内容，完全以职业市场的实际需要为导向。同时我自己也非常讨厌 “不讲人话” 的写作风格，全篇避免 “高大上” 的专业词汇和行业黑话过度使用。

2. 面向人群：

这套干货内容，适合从零开始想接触或学习 UI 的同学。当然，如果已经接触过一段时间但感觉自己的基础知识体系还是非常不牢固的同学也适合。

同时，如果是和 UI 相关联的岗位，如产品、交互、用研、运营、前端开发，也可以通过这套分享来了解 UI 设计师的知识体系、工作方法和思维逻辑，更好的配合 UI 设计师完成工作。

3. 内容声明：

除用来举例的线上案例外，所有知识点和图文内容都由我们原创输出，会整合部分我们以前创作过的内容进来。如 UI 尺寸、字体规范、项目管理等。

因为网上有大量洗稿、抄袭和无声明转载我们的内容的账号，所以如果当你觉得看到的内容好像在别的地方看过，那只可能是我写的或者别人转载的。

4. 免费声明：

这套分享将是完全免费的，不用担心写到一半变成付费内容。同时，文章中包含的各类网盘素材，一方面受不可抗力的影响，链接会不断失效，另一方面我们会持续变动更新（如软件安装包）。

整篇内容完成以后，也会合并成一篇完整的 PDF 电子文档供大家查阅。

UI相关概念知识扫盲

1. UI 与设计

UI (User Interface) 也叫交互界面、图形界面、人机界面，是我们今天无时无刻不在接触不受影响的伟大发明。

理解 UI 是什么，我们只要关注 2 个重点（敲黑板，划重点）：

计算机是一个用来输入指令，完成处理，返回结果的设备。比如问计算机 1+1 等于几，你就要考虑你怎么输入 1+1 并让计算机处理结果，计算机又要通过什么形式告诉你结果是什么？有效的把指令、结果进行传递是非常困难的事情。

早期人类使用打孔卡片的方式做信息的媒介，人类和机器通过打孔来完成信息的输入和识别。随着技术的进步，屏幕成为新的媒介，我们可以直接往计算机中输入更复杂的英文字母了。

于是，计算机开始支持命令行的输入形式，即使用一些固定的单词、语法，来完成信息的输入，计算机再以文本形式返回对应的计算结果。

虽然这一步大大优化了信息输入、获取的流程，但是依旧不能让我们满足。因为它的门槛太高了，需要背下一整本操作指令手册，而且用途非常有局限性。

再往后，就是图形界面被发明了出来。比如桌面有个我的硬盘图标，你使用鼠标或键盘打开，那么打开的窗口就会显示该硬盘下级包含的文件或文件夹，你可以轻松选中这些文件再进行操作。

这个发明是跨越性的，因为它让信息输入、获取变得更高效，也让使用计算机设备的门槛更低，为计算机设备进入普通群众生活提供了必要条件。

之后伴随智能手机的兴起，智能设备的普及。UI 界面已经成为了我们日常生活不可或缺的一部分，我们通过界面来操控设备、获取信息，它是我们驾驭智能硬件、复杂程序的桥梁。

图形界面的本质是信息的载体，完成信息的输入和获取的 “使用价值” 才是它的核心价值。UI 设计的目标，即根据信息输入和获取的需要，设计相关图形样式和排版的设计。

所以，UI 设计是一个辅助用户来使用硬件、程序的工具，观赏性并不是它的唯一指标。理解 UI 设计最大的误区就是仅仅以美观角度切入，而忽视它的使用价值（后面会重点解释）。

虽然 UI 设计是针对所有电子设备图形界面设计的统称，包括穿戴设备、智能家电、车机系统等，但它在国内主流语境指的是移动端 APP 界面的设计。

在后续的内容中，我们的核心也将围绕 APP 的界面设计展开解释。

2. 交互设计是什么

前面声明了，UI 界面本质上是一种工具，它为什么不像平面海报、卡片一样仅仅是用来输出信息或展示视觉效果的？

因为 UI 界面是可以进行 “交互” 的视觉内容。交互（Interaction Design，IXD）这个词汇对于新手来说一直是理解的重灾区，因为它的概念太模糊，且牵扯的其它领域太多。

简单解释，交互就是人和设备相交（产生接触）并进行互动的过程。比如你拿起手机解锁，就是一次交互，打开 APP 是一次交互，点击购买按钮也是一次交互。

交互设计，虽然用的也是 “设计” 一词，但它指的是制定这些交互事件的方法和过程，并不是指视觉样式的制作。

比如关注按钮，在视觉领域中，在意的是它的长宽比、图标样式、文字占比。但在交互领域，关注的是它包含的所有状态和互动反馈。

当然，只关注这些最初级的交互元素非常简单，很难对它展开独立的设计。

难点在于，产品提供的服务往往需要非常多的操作步骤才能完成，且整个操作流程中包含了各种状况，需要我们独立展开制定，才能确保后续 UI 界面设计的流畅性。

例如，用购物流程来举例，我们要做一个购物流程的交互设计。先假定产品本身的一些要求：

根据上面的要求进行交互层面的考虑，就要想在哪个环节增加数量选择，是直接进订单页还是商品页？什么时候判断商品配送范围到没到，如果配送超了怎么让用户知道？库存不够的状态该怎么显示，如果是在订单未付款状态最后一个库存先被别人买了，怎么提示？

可以发现，这些问题和设计出什么视觉风格、配色、创意，并没有什么直接关系，我们要给出的解决方案，就是交互设计的输出内容。

交互设计主要输出的产物是交互原型，用来表现交互流程、事件的原型图例。比如下方，我针对配送范围判断的原型案例：

在这个简单的产品功能中，就需要一系列的交互方案进行配合。

随着产品的复杂度增加，交互的难度也就成几何倍数增加，如果交互没有制定清楚，那么就无法保证产品正常运作或产生系统 BUG（库存没有了还能下单）。

这也是为什么我们不得不重视交互的原因。

3. 体验设计是什么

体验设计（User Experience Design）在网上搜解释，是以用户为中心的一种设计手段，以用户需求为目标而进行的设计。

但用户体验是一个比交互还抽象的词汇，它描述的范围太模糊，各行各业始终把用户体验挂在嘴边，对我们理解会产生非常大的障碍。

简单来说，用户体验，就是使用产品服务过程中产生的实际感受。这个感受可好可差，受产品的服务质量与各方面细节影响。而体验设计，即通过有目的性的调整产品服务、细节，提升用户实际感受。

例如上方案例，交互层面我们提供了各种防御性措施，提示用户商品没有库存、配送超出范围。虽然在功能上满足业务要求，但不代表它们产生的用户体验一定是优异的。

所以这时候就有两个关键的问题产生了：

第一个问题就是整个体验设计中的核心问题，我们要获取用户对某些定向功能、流程的体验评价。那么你就需要展开用户研究，通过制定一个测试、研究方案，来获得想要的结果。到这一步，让人眼花缭乱的科学方法论、研究方式就轮番上阵了。

假设我通过制定了一些用研的方式获取了用户对这套方案的评价，普遍反应体验较差，兴冲冲的要下单结果过一会儿没货，或是填了老半天收货信息结果告诉他没货。

于是，我就定位到了影响体验的关键因素，在后面我就可以思考该问题的体验改进方案：

这两个改进是今天普遍应用在自营配送的电商、外卖、生鲜等产品，相信大家一点也不陌生。而这些改进，完全是基于改善体验出发，而不是仅仅解决交互的问题，或者界面视觉问题。

上述案例只应用了 “提出问题 – 进行论证 – 给出解决方案” 的基础线性流程，虽然它很实用，但远不足以覆盖真实项目的所有体验设计实践。

所以，为了让体验设计的本身具备更清晰、细致的流程，不同的企业、组织、团队都开始搭建体验设计的标准化（花里胡哨）流程和方法论。

不管你看到的方法论有多复杂，添加了多少辅助线、介绍图形。它们都只是社会科学研究方法的不同拓展形式，没有本质上的区别。

在学习 UI 的前期阶段，并不需要真的去深入理解各个大厂的体验设计流程和思路。只需要知道，体验设计不是直接动手做设计的设计类型，而是一种通过研究分析行为来找出提升用户体验，再输出相关方案的设计。

当前就业形式分析

1. UI 对口岗位分析

学习 UI 可以入职的岗位不仅仅是 UI 设计师一种，到目前已经发展出包含 UE、UX、全链路等不同岗位。我们首先要认识一下具体有哪些，以及他们各自的职能。

UI / 界面设计师：

首先介绍老本行，UI 设计师也叫界面设计师。核心职能就是根据老板、产品的需求，提供界面的视觉方案。并输出相关的设计规范、设计说明、设计切图。

UE / 交互设计师：

理论上，UE 是 User Experience 用户体验的缩写，但在国内招聘中，UE 一直被当成交互设计师头衔来使用。交互设计师的主要输出内容，就是在获得产品需求后输出交互原型和文档。

UX / 体验设计师：

UX 设计师，体验设计师，就是专门针对体验进行设计的岗位。理论上体验设计师是做用户研究和制定体验方案。但不同公司对体验设计师的要求完全不一样，实际工作的内容重心可能是用研，也可能是交互或者界面。

体验设计师是目前职责最难清晰定义的岗位，完全取决于用人企业对体验设计本身的理解（参差不齐）。

全链路 / 产品设计师：

之前阿里提出了设计全链路的概念，很多人理解成是全知全能的 “全栈设计师”。实际上指的是可以深度参与产品业务和决策中，更好发挥设计商业价值的 UI 或 UX 设计师。

虽然输出内容很接近，但对于业务参与的要求会更高。

UI 动效设计师：

动效设计是 UI 设计的其中一个环节，普通项目对动效的需求和难度要求都不高。但在如直播、社交等特定项目中，需要大量的动效堆砌，这时候就需要有独立的动效的设计师来负责，专注在和产品有关的动效和视觉特效上。

2. 当前的就业形式

第二个问题，就是新手非常感兴趣的就业形式了。网上对 UI 行业前景的分析大多充满抱怨和负面情绪，认为对新手不友好，对没有背景、基础的人关闭大门等。

一条条反驳这些内容是没有意义的，如果只是听信这些负面情绪而退步，那么确实不适合学习和进入这个行业。因为连自己的立场和坚持也没有，又怎么能顺利面对后面必然会出现的挫折和苦难（任何职业都有）。

UI 设计师是一个完全和互联网行业深度捆绑的职业，现状随互联网行业的起伏而波动。探讨 UI 设计前景，就一定要结合互联网发展的趋势来分析。

首先，撇开宏观的各种政策和分析，我们可以确定一个观点，就是互联网技术的发展与应用，在未来几十年里依旧会突飞猛进。UI 设计师不可能在这个期间被取代和抛弃，要驾驭越复杂的技术和硬件，就越需要优秀的界面作为载体。

其次，UI 设计和编程，都是非常容易衡量真实水平的职业。企业招聘的目的是为了让职业人才输出高质量的成果赚取利润，如果只靠学历和科班，消费者是不买账的。

相比编程来说，UI 设计领域还有个优点（其实应该是悲剧），那就是新人 —— 众生平等。科班设计教育……懂得都懂。

总之，完全不需要担心科班生在 UI 产出上能有什么特殊的优势，他们需要学习的 UI 基础，和你没有任何区别，并且依旧要依仗自学或者培训班。这些外因确保了 UI 设计是互联网产品团队中综合门槛最低的那一个，如果多接触和分析大厂团队，你们就会发现设计永远是团队中学历最差的那一个……

因为门槛低，所以冲高薪想转行的人数也是最多的。经常可以在网上搜索几百个人竞争一个 UI 职位的新闻，但实际上，90% 以上的新人，真实水平是惨不忍睹的，直接可以体现在求职的作品集上。

面向大众渠道招聘收上来的简历，是一场大型的 “菜鸡互啄” 现场，只有头部 10% 以内的人是有机会的。这里并不是强调竞争有多激烈，而是大多数新手不是学习的方向不对，就是作品集滥竽充数，只有剩下的 10% 不到的人，处于真正的竞争状态。

在 UI 行业，“菜” 才是原罪，实力就是硬通货。而后面的系列内容，就是要帮助大家在学习中走上正确的道路……

3. 职业的薪资发展

受互联网行业影响，UI 设计师的平均工资远高于一般设计行业。在网上各个渠道搜索 UI 薪资的统计，都可以得出这样的结论。

以阿里 P6 的职级来区分，1 线城市 15K 以下的设计师，基本只能属于入门阶段。15-30K 的设计师，属于资深阶段。到达 30K 以上的，就进入专家以上水平。当然，这还只是说月薪，不包含年终奖、股票等其它福利。

当然，很多新手 UI 设计师会说自己工资怎么就没那么高，我和姚明平均身高两米，有意义嘛？

答案是有意义。因为工资不是身高，除去天花板，行业中上水平工资，是普通人可以通过努力获得的。高工资也不是 BAT 大厂特有的，有大量中小型规模的优质互联网团队，是会开出有竞争力的工资的。

那么为什么还有很多 UI 设计师处于低薪状态？因为公司的三六九等并不是单纯从规模上来考量的，而是 “互联网化” 程度。

会用心打磨产品的团队，和吃人情关系的外包公司、老板脑子一热做的家族企业是完全不同的。前者和后者的设计师水平，必然也有非常大的差异。就像在广告平面行业，路边广告文印店也有平面设计师，国际 4A 广告公司也有平面设计师，都是平面设计，两者平均下来有价值嘛？

想要获得高薪，除了大厂，就是面向这些围绕在互联网产业输出有价值，有竞争力的产品团队上，他们才能代表这个行业的真实情况和水平。而如果你所有的面试、Offer，都是来自老板家族型企业、有上顿没下顿的小外包公司，并且薪水微薄。那么主要的问题，不要怨环境，而是因为 —— 菜。

有很多新手，包括我自己，在我们刚开始入行的时候，确实只能进入到这些一言难尽的公司和团队中。但这不是职业的全部，不要将未来和现状捆绑起来。我们是可以通过持续提升自己的硬实力切换所处的环境，提升自己薪资水平的。如果现在只有 5-6 千，可以朝 1 W 进发，如果已经过 1W 了，就往 1W5 的水平努力，以此类推。这个行业有充分的上升空间和拓展的弹性。

树立正确的认识，建立长远的目标，你才可以在这个行业中走的更远，获得更多的回报。

相关问答

UI和MIUI都是指小米公司的用户界面,但是它们有一些不同之处。UI(UserInterface,用户界面)通常是指应用程序的用户界面,包括应用程序的图形化元素、布局、...

1、UI设计基础课程初识UI:UI设计师的角色定义和价值体现,UI的含义、UI设计师的含义手绘造型:学习设计基础、字体、构图、手绘等基础技能,快速培养UI...

以下是一些常用的UI设计工具:1.Sketch:Sketch是一款流行的界面设计工具,它拥有强大的功能和易于使用的界面,适用于iOS和Android应用程序的设计。2.Figma:Fi...

UI即UserInterface(用户界面)的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的...

ui是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由、充分体现软件的定...

UI设计都需要学些什么?1、GUI即GraphicUserInterface图形设计师,需要充分了解软件产品,致力于提高软件用户体验的产品外形;2、Interactiondesigner...

UI的本意是用户界面,是英文User和Interface的缩写。从字面上看是用户与界面2个部分组成,但实际上还包括用户与界...区别:【设计思路的不同】对于平面设计:...

平面中也有UI设计指的是视觉传达设计。而软件设计中的UI设计指的是软件界面、操作逻辑、人机互动的设计,APP指的是安卓系统应用软件设计。个人了解,供参考。...

UI,全称是用户界面(UserInterface),是指用户在产品(如软件、网页、移动应用等)中所能看到、听到、触摸到的所有元素和交互操作。这些元素包括文字、图像...

随着APP开发的企业不断增长,导致应用市场的APP应用正呈几何倍数增加,这极大程度上增加了企业APP应用取得成功的难度。此时,单纯做好一个APP应用上线应用市场,...