互联网设计师
互联网设计师
互联网视觉设计师
UI设计师是什么呢？UI是User Interface Design (即界面设计)的简称。这个界面可以是手机界面、网站界面、软件界面、智能设备界面等一切人机交互可视化的媒介。人机交互指的是人类与计算机的交流，这种交流从最早的图灵计算机依靠纸条来和计算机交流，到形形色色的屏幕上的按钮，再到我们现在的各类语音交互，以及像科幻电影一样的AR、VR或各类脑电波交互，这都是人与计算机越来越方便的沟通方式。可是人与计算机目前最高效的沟通还是停留在屏幕上，屏幕仍然是人机交互方式中最有效率的，这样的交互界面就需要由我们来设计成更有效率、更容易让用户看懂的界面。让普通大众更好地理解计算机的意图，这就是我们的职责了。总结一下：UI设计师的职责是设计供人机交互使用的图形化用户界面，并使界面更加易用和友好。
早期采用GUI设计的Xerox 8010 Star
我们完成的图形化界面又叫GUI（Graphic User Interface），它要求易具有用性（Easy to use）和友好性（Friendly）。易用性，即界面不需要复杂的思索即可容易地使用；友好性，即对用户友好，容易被理解。好的GUI应该是易用和友好的，比如我们手机上的微信和支付宝等为人熟知的APP界面。互联网的发展很多行业被重新整合，设计师也被重新定义了。UI设计、动效设计、交互设计、平面设计被逐渐整合成一个职业，这个职业不能单纯地设计界面和排版，还需要能绘制图形、掌握平面能力、懂交互等，这个职业有不同的名字，比如全链路设计师、全栈设计师等，但是我认为最合适的称呼是：互联网视觉设计师。目前国内名企招聘时也会使用这一名称，来区分只会排版和套用规范的界面设计师。互联网视觉设计师担负着我们这个时代的主流媒介——互联网的设计。无论叫什么，我们的职责没有改变：解决人机交互问题。
iPhone界面中的UI设计
互联网视觉设计师或UI设计师一般依附于互联网产品团队之中，不像平面设计师或服装设计师一样成立很多设计公司。我们打交道的人不一定都是同行，可能是互联网从业者中的其他角色，如产品经理、程序员、技术团队、运营团队等。如果我们所在的团队不只有设计师，我们就需要有清晰的表达能力和足够的耐心让周遭的人理解我们的工作。互联网视觉设计师的工作主要有移动端设计、网站设计、运营设计等。如今随着UI设计师的数量越来越多，行业越来越成熟，UI设计师需要肩负的责任也越来越多，比如我们需要了解交互知识、懂平面设计、擅长手绘，等等。UI设计涵盖的范围越来越广泛，想成为UI设计师的门槛也越来越高。
互联网公司里的产品团队
美剧《硅谷》中的创业团队
互联网公司的产品线是一个流水线。互联网产品团队，指的是整个团队围绕一个产品所打造，并且以设计、开发、完成该产品为目标的团队，比如微信团队、支付宝团队等。互联网产品有可能是移动端产品或电脑端产品，也可能移动端和电脑端同时开展。按部门，我们可以把他们划分为：管理层、产品部、研发部、市场部。设计团队可能单独成立部门也可能融合在产品部门里。互联网产品团队按角色可分为：
高层 （leader）
一个团队的领袖，由董事会、董事会主席、首席执行官CEO（Chief Executive Officer）、首席技术官 CTO（Chief Technology Officer）等组成。他们负责决策公司的关键事物。
主要输出：idea
使用软件：Office
用研团队 UR (User Research)
通过用户研究的手段，调查老板的想法靠不靠谱。用研团队保障着公司与用户之间的联系，确保研发的产品是用户所喜欢的。研发前、研发中、研发后的反馈都需要用户研究团队及时参与收集数据。
主要输出：用户研究报告
使用软件：Office、眼动仪等
产品经理 PM (product manager)
产品经理负责策划产品从无到有的过程，细化产品逻辑。产品经理需要（或交互设计师）设计原型图（原型图用来和老板汇报和交付设计师）。产品经理首先的职责是在产品策划阶段向管理层提交产品文档。产品文档PRD通常包括产品的规划、市场分析、竞品分析、迭代规划等。然后在立项之后负责进度质量的把控以及各个部门的工作协调。在产品管理中，产品经理是领头人，是协调员，是鼓动者，但他并不是老板。作为产品经理，虽然针对产品开发本身有很大的权力，可以对产品生命周期中的各阶段工作进行干预，但从行政上讲，他并不像一般的经理那样有自己的下属，但又要调动很多资源来处理工作事务，因此如何做好这个角色是需要相当技巧的。
主要输出：产品需求文档（PRD）、市场需求文档（MRD）、原型图（Layout）等
使用软件：文档书写软件（Office）、原型图软件（Axure、蓝湖、墨刀等）。
项目经理 （Project manager）
项目经理指企业建立的以项目经理责任制为核心，对项目实行质量、安全、进度、成本管理的责任保证体系，同时为全面提高项目管理水平而设立的重要管理岗位。项目经理是为项目的成功策划和执行负总责的人。这个职位在很多公司可能由产品兼任。项目经理负责的是项目进度的把控和项目问题的即时解决。
主要输出：项目进度表
使用软件：文档书写软件(Office)
交互设计师 UX 或UE (User Experience Designer)
主要负责把产品需求文档(PRD)优化成可交互的原型图交给设计师和技术人员。
主要输出：交互图（prototype）
使用软件：Axure RP、墨刀、Adobe XD等
互联网视觉设计师 或 UI设计师（User Interface Designer）
互联网设计师不仅仅是给原型上色，设计师会根据实际具象内容和具体交互修改板式，甚至重新定义交互等。同时需要提供给技术人员切图文件或PSD源文件。一些出现过的别名，比如美工、全链路设计师、全栈设计师、UID、UI设计师、视觉设计师等等，都是在说我们。接到原型图或交互图后，我们会根据原型图的内容来进行交互优化视觉设计，由总监确认后交付给开发人员。如果是对接网页项目的话，我们只需要交付给开发人员：PSD源文件、设计规范。如果是对接移动端项目的话，我们需要交付给开发人员：切图文件、标注文件、设计规范。为什么给网页开发工程师（前端）不需要切图而直接给PSD源文件即可呢？因为前端工程师其实最早和我们的职位一起并称美工，他们是有PS操作能力的。
主要输出：设计稿 设计规范 切图 标注等
使用软件：Sketch Ps Ae Ai 等
前端开发 RD （Research and Development engineer）
开发人员有数据库端和用户端两种，一般来说我们接触的是用户端开发，他们负责还原设计。做网页用户端开发的工程师叫作前端工程师；做安卓设备开发的叫Android工程师；做苹果设备开发的叫iOS工程师。他们做的都是用户端开发，用户端就是用户看到的一切界面。目前用户端我们接触的是电脑、安卓、IOS三种主流设备，它们开发使用的代码不一样，所以对特殊效果（如动效、阴影等）的支持有所不同。
后端工程师 或 程序构架师 RD （Research and Development engineer）
后端工程师或程序构架师的主要工作是做数据存储。我们平时使用产品过程中产生的数据，如头像、昵称、聊天、对话、图片等，均是通过互联网传输到服务器再交换信息分发回去，这些资料存储的架构都是后端工程师的工作。
运营 或 市场拓展 BD
产品完成后进入运营阶段，可能会根据运营情况调整产品设计或设计运营图等。运营直接面对市场，所以对市场的需求也更加明确。以此倒推出市场和运营的目的往往更加直接。有时运营的盈利目的和产品以用户为中心的思想会有冲突，这对设计师的要求就更高了，如何平衡设计审美、运营目的、以用户为中心几种需求就成了设计师的难题。
测试工程师 QA
测试工程师在企业中一般称为软件开发测试工程师（Software Development Engineer in Test，SDET）。有良好经验的测试工程师可以成长为产品/项目组的测试组长（SDETLead）或软件质量经理（SQA Manager），负责软件质量的保证，同时进行测试管理、领导测试团队。软件质量的把控包括体验与视觉部分，通常设计师需要与测试工程师合作来完成对产品视觉还原度的测试工作。
大型互联网公司
大型互联网公司人员配备较为齐全：高管负责决策、用研团队负责研究用户对于产品的反馈、产品经理负责制定产品发布的时间表、交互设计师负责优化交互图、视觉设计师优化交互并设计视觉后输出切图和标注并且完成设计规范、前端工程师负责实现界面还原和与数据库的对接、后端工程师负责程序构架和数据库结构、测试工程师负责测试整个程序是否可用、商务部门负责后期运营。除了完整的产品线外，大型互联网公司还配备了人力资源部门、后勤部门、协调部门等，分工很成熟。但是往往会出现大公司病，行动比较缓慢。注：此图为产品流程的主要关系图，真实的工作中关系错综复杂，并不只是线性顺序。
大型互联网公司结构图
中型互联网公司
中型互联网公司人员配备中等：高管负责决策、产品经理负责制定产品发布的时间表和交互图、视觉设计师优化交互并设计视觉后输出切图和标注并且完成设计规范、前端工程师负责实现界面还原和与数据库的对接、后端工程师负责程序构架和数据库结构、测试工程师负责测试整个程序是否可用、商务部门负责后期运营。中型互联网公司人员也比较整齐，但是和大型互联网公司相比，设计师会承担更多的责任。
中型互联网公司结构图
小型互联网公司
小型互联网公司人员配备较为简单：高管负责决策和担负产品经理的角色、视觉设计师优化交互并设计视觉后输出切图和标注并且完成设计规范、前端工程师负责实现界面还原和与数据库的对接、后端工程师负责程序构架和数据库结构、测试工程师负责测试整个程序是否可用。小型互联网公司人员很少，决策很快，但是由于每个人负责的部分太大，所以经常有学杂而学不精的地方，而且人员较少所以进步更加需要依靠自己。
小型互联网公司结构图
分工
Leader的工作
找投资：作为一个团队的领袖，第一要务是解决团队生存问题。我们在面试时总会看到某公司处于A轮或者B轮融资阶段，这是什么意思呢？投资根据项目成熟度分为：路演、天使轮、A轮、B轮、C轮、上市等状态。相应的投资阶段也代表着项目的成熟度。这一点大家也可以在找工作时加以权衡。
招合伙人：一个好的团队领袖不应该事事躬亲。除了CEO之外还应该找到CTO等多个高管的人选。
创业咖啡文化成为热潮，图为北京某咖啡馆内众多创业团队在工作。来源：网络
用户研究的工作
用户研究的方式主要有可用性测试、焦点小组、问卷调查、用户访谈、眼动测试、用户画像、用户反馈和大数据分析。
可用性测试：通过筛选让不同用户群来对产品进行操作，同时观察人员在旁边观察并记录。可用性测试的要求用户是产品的真实用户群体，而不可以是互联网从业者。
焦点小组：一般由6-12人组成，一名专业人士主持，依照访谈提纲引导小组成员各抒己见，并记录分析。在焦点小组的房间里会有一扇单向玻璃窗，用户看不到里面有谁的。在里面坐着的通常是开发团队，他们可以清晰地看到用户是如何吐槽他们的产品的，但是他们没有权利直接和用户进行解释。
问卷调查：可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题，制成文档让用户回答，并分析整理相关结果。问卷调查是一种成本比较低的用户调查方法。
用户访谈：邀约用户来回答产品的相关问题，并记录做出后续分析。用户访谈有三种形式：结构式访谈（根据之前写好的问题结构）、半结构式访谈（一半根据问题一半讨论）、开放式访谈（较为深入地和用户交流，双方都有主动权来探讨）。用户访谈设置时要注意：用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。
眼动测试：使用特殊的设备——眼动仪，来追踪用户使用产品时眼睛聚焦在哪里，盲区是哪里。网站通过眼动测试可以知道，用户视觉会自动屏蔽网站广告的常见位置，这时如果希望提高广告的点击，就可以把广告放置于用户聚焦时间较长的位置。眼动测试的设备比较专业，通常在小公司较难开展。
用户画像：根据产品调性和用户群体，用户研究团队可以设计出一个用户模型，这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的，通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后，每个功能可以完成自己的用户故事：用户在什么场景下需要这个功能。以此，我们所设计的功能就会更接近用户的实际需要。
用户反馈和大数据分析：根据市场提供的反馈和数据，得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点，用户反馈主要是由用户通过产品的反馈入口，主动向开发者提出意见。
图为美剧《硅谷》中焦点小组测试桥段
产品经理的工作
产品经理负责协调整个团队的进程，工作十分复杂，他们的产出很大一部分是在沟通和协调上。如果单纯提炼输出文件，有PRD、MRD、原型图等。
PRD，即产品需求文档(Product Requirement Document)，此文档的受众是项目组、开发组、测试组、策划组、体验组等等人员。文档中表述了此产品的概念，规划了产品各个步骤的完成时间，产出内容包括产品界面、产品流程、功能需求、测试需求、体验需求等。
MRD，即商业需求文档(Business Requirement Document)。此文档的受众是商务、运营、市场等人员。文档表述的是产品的业务模式，明确产品的用户人群，产出内容包括产品模式、业务模式、运营模式市场模式等。
原型图：也称为线框图，即用线条、图形绘制出的产品框架。
图为产品需求文档PRD模板
交互设计师的工作
交互图：表现出操作行为后对象之间的关系，以及触发的下一步信息。与产品经理设计出来的线框图或原型图不同的是，交互设计师完成的交互图更加细腻，并且可以在手机上运行，模拟APP完成以后的使用效果。
图为交互图案例
UI设计师的工作
优化原型图：根据具体视觉元素对交互图提出优化方案。
视觉设计：依据人机交互、操作逻辑等原理，对原型图进行界面的设计与美化。
切图：根据不同平台尺寸，输出相应倍数的图片。
标注：利用工具在输出页面上标注各个元素之间的尺寸与情况备注。
项目走查：开发完成后，选择主流机型进行画面审查工作。
视觉总结：对设计作品中的字体、字号、颜色、icon、模块等元素做出展示并说明。
图为UI设计稿
前端工程师的工作
网页前端工程师：完成网页前端界面的编程工作。从视觉设计师手中接过PSD后切图并用网页代码重新组建好页面，并且和数据库端给到的接口联调，没问题后放到服务器上网站就可以访问了。使用的代码语言主要有：HTML、CSS、JS等。
苹果软件工程师：完成iOS平台上app的程序开发，并从视觉设计师手中接过切图和标注，完成客户端编译，并和后端工程师联调后上线。主要使用的代码语言有：Object-C、Swift等。
安卓软件工程师：也称为Android开发工程师。完成安卓平台上APP的开发，并从视觉设计师手中接过切图和标注，完成客户端编译，并和后端工程师联调后上线。主要使用的代码语言有：Java、Kotlin等。
图为前端HTML代码
后端工程师的工作
数据库编程：分为网状数据库、层次数据库、关系数据库，利用数据库编程来存储管理数据。主要使用的语言有：PHP、JSP、Java等。
图为后端编译部分代码
测试工程师的工作
黑盒测试：按照用户的视角进行摸黑测试。
白盒测试：按照产品需求文档的功能点逐一测试。
灰度测试：直接给30%的用户发送新版本升级，70%用户没有发放灰度包。这种测试方法就是把我们的产品直接发放给部分用户来听取反馈意见。
运营人员的工作
运营项目：运营的具体手段主要分为渠道运营、内容运营、活动运营、品牌运营等。即通过各种手段进行不同的组合，将用户与产品更好地连接，得到特定数据的增长，并完善产品、持续其商业价值。
五谷杂粮 运营图插画 作者：冯珊珊
维护人员的工作
维护服务器：即提供计算服务的设备。服务器的组成包括处理器、硬盘、内存等，与普通计算机类似，但是它的性能更强大、更稳定。一个互联网公司的服务器一般可以寄托在服务器农场里或者放在公司内部。如果不是寄存那么就需要维护人员实时去关注。
人力资源的工作
招聘人员：确定人员需求、制定招聘计划、发布信息、人员甄选、办理入职等工作。
办理离职：告知离职信息、准备离职面谈、办理相关离职手续、配合交接工作、资料存档等工作内容。
福利薪酬管理：制定企业员工的福利薪酬制度，日常考勤、绩效考核、福利发放等工作。
产品设计思维 UED
UED
UED是User Experience Design(用户体验设计)的简称。用户体验设计师是进行产品策划的主力之一，他们能够用自己的互联网知识来设计出行业专家想实现的操作，从而付诸以商业营销。UED团队包括交互设计师(Interaction Designer)、视觉设计师(Vision Designer)、用户体验设计师(User Experience Designer)、用户界面设计师(User Interface Designer)和前端开发工程师(Web Developer)等等。
UED是以用户体验为中心，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。可见，UED这种理念贯穿到设计、代码、运营等方方面面。UED是一个以用户体验为原则的团队。
UCD
UCD（User Centered Design）是指在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。在进行产品设计、开发、维护时从用户的需求和用户的感受出发，以用户为中心进行产品设计、开发及维护，而不是让用户去适应产品。无论产品的使用流程，还是产品的信息架构、人机交互方式等，以UCD为核心的设计都时刻高度关注并考虑用户的使用习惯、预期的交互方式、视觉感受等方面的内容。
衡量一个好的以用户为中心的产品设计，有三个维度：
1. 产品的有效性（effectiveness）
2. 产品的效率（efficiency）
3. 用户主观满意度（satisfaction）
特别说明：大家可能总是误会UED和UCD是某个部门。产生这种误会的原因是因为很多大公司都专门设置了用户体验部门，如腾讯网UED、阿里巴巴国际UED等团队。所以UED和UCD的含义不仅仅是特指某一个部门，更是指一种团队的模式。
设计师必备的能力
通过前文阐述的内容，我们知道了互联网视觉设计师在团队中的主要职责。归纳一下，我们的工作主要是：第一，根据原型图和PRD文档优化原型图和交互图的交互设计；第二，根据需求完成视觉设计并完成设计规范；第三，根据技术的需求完成切图、标注、命名PSD、设计动效等工作；第四，设计师有时还会担负起公司的运营设计和企业形象设计或者公司内部的平面设计等职责。设计师的工作越来越趋向于复杂化，这就要求我们所掌握的知识也要越来越多。
目前互联网设计师需要具备的三种能力
从目前来看，互联网设计师需要掌握的能力主要包含了下列内容：排版能力，交互知识，图标绘制，插画绘制，手绘，运营图设计能力，专题设计能力，网站设计能力，移动端规范，基本代码原理，展示作品的能力， PPT设计能力，表达能力，H5设计能力，LOGO设计等。
UI设计师所使用的软件
界面设计软件
Adobe Photoshop 简称PS。三十年的老店不会让你失望。使用来自在这个行业具有垄断地位的Adobe公司所开发出来的软件，其好处就是你不用担心研发公司因倒闭而导致软件停止更新。同样由于Adobe开发公司的实力强大，所以PS能够同时支持Windows平台和Mac平台。这个好处是毋庸置疑的。PS在过去的三十年中推出的版本数不胜数，而我们应该永远学习最新的版本。除此之外，PS是Sketch和AI无法代替的。
Photoshop
Adobe Iullstrator 简称AI。该软件同样来自母公司Adobe，其诞生时间比PS略晚。由于这两款软件都是Adobe公司旗下的软件，所以它们的文件可以互通甚至可以直接相互拷贝，两者的配合度要比不同厂家间的软件高得多。PS在UI设计中主要负责界面设计和图形处理，而AI可以负责线性图标的设计，设计后的文件直接拷贝进PS里即可。之所以不能直接用AI作图，是因为AI不具备切图和标注与团队合作等多种PS可以轻松搞定的功能。
Illustrator
Sketch 看完了上述两种软件，你一定还是心有不甘，希望能用AI的矢量作图功能，配合PS可以切图标注的扩展性对吧？于是它就应运而生了。Sketch在作图的功能上更加接近AI，不但拥有矢量图形的功能，而且其切图标注甚至比PS更加方便快捷。遗憾的是它并非Adobe公司出品，所以和PS、AI文件之间的协作上差了一些。此外由于该软件不是大公司出品，总有一些不放心。比如与苹果决裂后，Sketch需要在官方实物购买并安装软件包，而并非直接从苹果应用商店下载；再如由于PC盗版现象严重，Sketch暂时在Windows系统下是不可用的等等。即便如此这款软件现在依然很受UI设计师喜爱。
Sketch
Adobe XD 全称Adobe Experience Design。这是一款集原型、设计和交互于一体的设计软件， 传言将会是Sketch的劲敌。强大的厂商背景决定了它也支持Windows操作系统，而且XD的优势是原型图和设计都可以搞定，并且在两个平台都可以免费使用。现在使用XD的设计师越来越多了。
Adobe XD
Adobe Fireworks 列出来这款软件并不代表大家必须要学习，因为这款初心是为网页设计师所开发的软件已经退役了。
动效软件
Adobe After Effects 由于同样来自于Adobe公司，所以该软件文件和PS与AI都可以直接导入，互通有无。这一点非常的酷。然而，因为该软件的初心并不是做UI的动效设计，而是做影视后期，所以美中不足的是我们使用这款软件完成的动效只可以沿着时间线播放，而不可以交互。此外，这款软件复杂的插件也都是为了影视后期而设计的，对于新手来说学习起来会比较难。但是总体来说这款软件还是一款大家必学的软件。
After Effects
Principle Sketch没有动效小伙伴怎么办？别着急，Principle出现了。这款软件可以直接点击大钻石导入Sketch文件并设计出在手机中可交互的动效，堪称UI设计师的福音。但是不足之处和Sketch一样，就是不支持Windows系统。
Principle
Flinto是一款交互原型利器，只可以在Mac平台使用。
Flinto
Origami是交互原型和动效方面的一个轻巧的工具，只可以在Mac平台使用。
Origami
Framer 是交互设计和原型图设计工具，偏代码方向。只可以在Mac平台使用。
Framer
原型图工具
墨刀 是国产原型图工具，中文语言优势加上服务器响应速度快，并且是一款Web应用，也就是说通过浏览器访问网站即可设计出原型图来。
墨刀
Axture RP 是老牌产品经理原型图工具，有多式多样的插件可以实现多种效果的原型图。
Axture
前端工具
Adobe Dreamweaver 是前段编译工具，Adobe生产，有设计和代码模式。
Dreamweaver
Adobe Muse 是Adobe公司生产的网站开发工具，支持可视化设计，并且可以生产出网页前端代码。
Muse
好UI的标准是什么
好用
以用户为中心
功能清晰
Don’t make me think
好看
满足用户画像群的审美
达到需求方的目的
比要求完成得更美；审美教育义务
好实现
可以实现：设计须可以实现
效率：须考虑对载体效率和性能的影响
为实现设计 回头根据实现角度调整
无论做什么，只要你拥有一套好的方法论加上刻苦练习都会获得很好的结果。UI设计是崇尚经验的工作，随着经验的积累和方法论的沉淀，我们最终一定能够取得不错的进步。所有真正喜欢并执着于互联网设计的人都能够实现自己的职业目标。