1、草图
草图意思就是使用笔和纸去手绘产品页面的草图，以便快速的和产品经理以及客户等进行讨论，这样会使产品更具体化。
2、低保真原型
低保原型图意思就是在草图的基础上通过电脑软件由简单的线框和文字去绘制这个界面，另外还要进行一些简单的交互 *** 作，也就是动态设计，这样可以简单地进行体验一下这个设计，尽可能去发现问题修改问题。
3、高保真原型图
高保原型图意思就是在线框图的基础上进行视觉设计，再将这个视觉设计稿制作成可以进行交互 *** 作的原型图，这个效果可能和最后成品相差无几，甚至可以在手机上进行模拟的 *** 作。这个原型图一般都可以交付给开发和测试那边，然后开发人员按照这个原型图进行开发，测试人员将会以这个原型图为基准，对开发人员交付的产品进行测试。
分享一些我切身体验后的一些原型设计软件，你可以根据自己实际需求来选择~
Axure：发展较早的一款原型设计软件，因而名声较大。无限画布，适合做低保真到中保真度的原型。功能很多，也让学习起来有点难度，网上有很多axure教程就不多说了。本地型软件，可以下载html文档预览，手机预览不方便。
墨刀：国产的一款原型设计协作工具，比起axure来非常容易学会，内置组件很多，创建页面跳转也比axure简单太多。因为是一款在线工具，可以云端保存工作，这点确实很便捷。另外，通过分享链接就可以分享原型给别人看了，如果涉及到跟同事对接什么的，选择在线的工具更方便。支持sketch文稿导入和自动标注。个人认为性价比最高。
Invision: 可以说目前是国外发展最大的在线原型设计工具，主打“交互原型”和“协作”，支持sketch和ps设计稿导入做交互。近来出的 Invision studio 对标sketch，想满足更精细的设计需要。国外一些大牛公司像airbnb和amazon都在用。不过对于国内用户来说会有服务器速度的问题，而且，贵。（土豪公司无视）
Marvel: Marvel 也是海外知名度较高的一款原型设计协作工具，支持PS和sketch设计稿导入做交互原型，本身也支持中度保真程度的设计。也有自动标注功能。库对接unsplash，这样来自unsplash的很多精美的免费可以直接用。价格比Invision稍便宜。
POP（Prototyping on Paper）：这款比较另类，是给拍照的手画草图直接做交互。 *** 作轻巧简单：先用手机拍下草图原型(存到POP app内)；然后开始编辑的哪个区域（按钮）链接到什么页面，添加跳转链接热区，就可以在手机上给小伙伴们演示了。内嵌的交互动作 如侧滑、展开、消失等，即可满足一般的动态演示需要。但功能较为简单，对更深的需求无法满足。
Protoio：也是国外的一款手机原型开发平台。支持在大多数的浏览器运行，共享和协作 *** 作方便，可以直接在真实的移动设备上对原型进行测试。拥有较为丰富的UI组件，支持自定义。另外它有不错的用户测试功能，支持视频录制。并且在移动组件时，能够实时在画布看到组件之间的距离。另外由于服务器的原因，有国内用户反应速度有点慢；收费较高，性价比一般吧。
Moqup：支持线框图，原型，和逻辑流程图。里面组件数量蛮多，像表格这些也有，做web项目比较便利。支持在线预览和分享，支持评论，不支持标注。上手较容易，不过没什么模板，UI有点过时感。
希望对你有帮助~有疑问的地方欢迎追问！
废话不多说，直接上干货！
1Axure80
说起设计原型图，在产品经理眼中，Axure绝对是一款经典软件。组件多，交互效果多，高手想做高保真原型图的话，可以玩出花来。如果是低保真原型图的话，那更是不在话下。
2墨刀
国产软件，收费，但是真好用！有模板，可以快速创建原型图，逻辑流程清楚，熟手的话，一款需求明确、三四十个页面随手拈来，有一会儿就能搞定。墨刀支持标注，同样支持sketch插件，产品设计协同办公，简单方便！
尤其在做手机原型图的时候，墨刀几乎是大部分产品经理的首选之一。
国产经典！
3sketch
目前只支持mac，轻量级矢量设计工具，一张大画布，让所有图的逻辑清清楚楚，作图也好，切图也好，逻辑也好，都非常好！
对稍微有点设计功底的产品经理来讲，完全可以摒弃原型图，直接用sketch来上手做效果图。说得再狠点，加了颜色那就是第一稿的效果图。
对产品经理的审理和设计功底有要求，大概只有小众的拥有设计功底的PM才敢直接上手sketch这款神器！
4mockplus
又称为摹客，可以快速设计原型图，业内口碑不错。
随着互联网行业的发展，如今市场对于UI设计师的要求越来越高，对应的UI设计的学习内容也越来越多。如果你现在还想拿着一项大多数人都会的基础技能找高薪工作，这基本不太现实。
互联网刚刚兴起之时，UI设计的门槛很低，也许你只会平面设计或者单纯的网页设计就能找到一份很不错的工作。但现在，随着智能手机的普及、5G时代的来临，网民基数越来越大，大家对于界面的要求也越来越高，对应的企业的要求也发生了很大的变化。产品生产的人性化意识日趋增强，越来越多的企业开始注重交互设计、用户测试方面的投入。企业不仅需要UI设计懂设计，还需要懂交互、懂用户心理，甚至还要会代码、AE制作动效、以及插画、手绘等等。
说了这么多，那我们如何学习UI设计？又如何成为市场上需要的UI设计呢？我现在从一个成熟的UI设计课程去拆分讲解具体的学习步骤，以及学习中的注意事项。
一、那我们如何学习UI设计？又如何成为市场上需要的UI设计呢？
1、手绘以及软件基础---软件水平
手绘
没有美术功底可以学UI设计吗？
答案肯定是可以，但是有美术功底的UI设计师在一定程度上会使自己的竞争力更加突显。创意想法对于UI设计来说是很重要的，但这只是一方面，能通过不同方式与途径准确地表达出自己的创意想法又是另一方面。对于有美术基础地设计者来说就会有更多地表现形式来表达自己的想法，比如常用的手绘、插画、写实图标等。
所以我们要学会在今后的UI设计工作中，利用手绘。在这个部分的学习中，其目的是通过手绘掌握并了解形体的结构，光感和空间关系。后期才可以将手绘渗透到作品中，把手绘和鼠绘结合，从零到一的进入到插画，进一步渗透到项目作品中，比如电商首页/专题页/APP闪屏/缺省页等。
学习手绘，并不是需要大家达到专业美术生的水平，而是让大家学会利用手绘更好的表达自己的作品。因为软件 *** 作带来的灵感远没有手绘带给我们的思路敏捷。每一个成熟的设计师来讲，好的创意和想法一定不是先来自于电脑，而是先来自于本上，手绘是创意和灵感最好的表现及表达方式，养成手绘的习惯和会手绘这件事能够更加拓展设计师的思维，把你对图形的需求快速呈现草图上进行快速的演变图形尝试对比，进而提高工作效率。
所以针对手绘部分，将手绘结合项目中的设计，可以有以下学习流程：
通过静物练习了解物体，透视/光影/三面五调
通过饱和度、明度、色调等理解色彩关系、通过剖析每个颜色的正向负向心理暗示，了解色彩情感表达
运用ps软件手绘图标，提升软件熟悉度
手绘鼠绘结合绘制技巧（插画临摹）
软件
软件是UI设计不可缺失的辅助工具，工具的学习并不在多，而在于你是否能熟练的使用工具将自己的想法表达出来，让工具化身为左右手去协助自己完成设计。每一类设计工具选择一到两熟练 *** 作，在今后的工作中遇到类似工具是可以很快上手的。
其实，学习工具最快的方法是带有目的的学习，使用反推法学习可以让你更清晰更直观的了解这个功能存在的意义。以案例入手从案例中学习新的工具，让工具和技法和案例融合一体，从而加深对软件及其综合能力的入门和提高。
那什么是反推法学习呢？下面我们选取PS、AI这两个设计中常见的工具来简单介绍一下，其他工具也可以参考这样的学习模式。至于软件的熟练度就需要你自己花时间反复练习。
（1）PS，Adobe Photoshop，是由Adobe Systems开发和发行的图像处理软件。相信不是设计行业的小伙伴也对它久仰大名，更是设计专业人员必须掌握的设计工具。 Photoshop主要处理以像素所构成的数字图像，其重点在于对图像的加工处理。
初次接触PS，我们需要自学掌握PS基础、工具详解、布尔运算、图层样式、混合选项、蒙版、调整图层、滤镜、混合模式、图像等。我们如何一步步将这些功能摸清楚用明白呢？
PS基础：了解工具详情、图层样式//图层调整。（案例演示）
学习ps布尔运算，并运用到图形绘制中。
通过海报合成案例，掌握混合模式/蒙版。
利用图像调整（曲线、色相饱和度、色彩平衡等），调整合成素材颜色、光影等统一性。
海报合成中利用滤镜达到远近、虚实、锐化、扭曲等目的/利用camera raw做合成最后调整。
我们只有不断的通过对商业实战的分析，通过结果的反推，让软件和设计思维相结合。在反推和临摹的过程中，让我们的工具基础更加扎实。
（2）AI, Adobe illustrator，是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件。它的功能强大，用户界面体贴，是大多数设计师选择矢量编辑软件的不二选择。
对于AI，我们需要掌握AI的图形符号功能及使用技巧，AI的渐变、混合工具、25D插画。再到绘图工具的精通，通过主流插画风格的学习及风格的转换，学习插画中的色彩。最后实现logo图形的绘制技巧及字体设计等。
ai基础：通过学习路径查找器掌握图形减去、相交、相加等能力/掌握图形符号，增强图形或设计美感。
适量插画绘制，加强对物体结构/光影/颜色的理解。
顺应当下流行趋势，通过人物、风景深入了解主流矢量插画表现形式。
以上这些其实只是对工具有个基础的认识，让你了解工具的功能，然后反复去熟悉工具。至于如何利用这些工具，还需要继续进阶学习。
2、设计基础、设计理论--设计思维
没有设计思维，工具用的再熟练，设计出的作品也不会被大众认可。所以我们必须学习设计的原理，掌握设计基础。将理论和实践结合，完美的将自己的想法合理的展示出来。
这个阶段中可以引入Logo设计、字体设计和VI手册设计，在理论中穿插实 *** ，让学习富有目的性，在 *** 作中反推设计思维。
什么是logo？如何入手做原创logo？logo的常见表现形式？这里将Logo和文字设计相结合来讲解一下学习步骤。
学习平面构成：点线面，了解平面空间的基本元素。以设计的手段来让元素变得更精致更富视觉冲击力。
习平构基本形式重复、近似、渐变、变异等，培养逻辑思维和造型能力以便我们能够将其运用到实际的设计当中。
从Logo设计头脑风暴中开发自己，思维空间从宏观到微观提取设计关键词。
学习Logo草图绘制多种方案，这里就要用到之前学习的手绘技巧啦。然后选其中一种进行继续优化。
通过不同关键词相互组合，做图形提炼、结合、重组、赋予关键词图形化，图形化优化定稿。
根据字体横竖撇捺等了解文字结构字面、重心、独体合体字、中宫处理等，掌握字体变形设计，完善Logo提案效果图增强过稿概率。
Logo文字部分提取重新设计
Logo图形文字结合定稿
在Logo设计中我们学习了平面的构成、字体设计等，在画册学习中我们同样会穿插设计知识。比如设计的色彩心理学、色彩对比及配色技巧，vi基础+应用部分规范及内容，场景应用效果图及尺寸和材质等。通过自己模拟项目，去深入掌握vi手册基础部分。
学习VI视觉手册规范，重点提炼VI视觉手册页眉页脚设计。
模拟练习项目从甲方、用户等多角度深入掌握vi手册基础部分：企业标志、标准色、标准字体、中英文印刷规范、辅助图形、错误应用，并以企业特性进行基础部分规范设计。
VI手册应用部分，以使用场景、材质、工艺、尺寸、展示环境等，给出甲方专业成品落地建议及效果展示。
完善VI手册提案效果图。
3、Web网页/电商运营设计
平面设计是UI设计的基础，我们通过平面设计去学习了设计基础、设计思维，减少了UI设计学习阶段中的很多疑惑。
互联网时代，绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么重要。这些潜在客户对你的公司及产品印象的好坏，很大程度上取决于你在网站设计上投入精力的多少。企业站和电商平台也是互联网环境下企业必不可少的传播平台和C端自主交易平台，是互联网产业下的主流。
所针对网页设计，要求你熟悉和掌握Web端设计的规范，了解网站基本架构和栅格化布局，重点掌握企业站界面设计规范和输出规范，且能够根据企业真实需求设计页面。掌握网页中的版式设计/构图排版/网页中的色彩/文字/搭配，掌握企业站首焦图的设计技巧。
而电商部分则需要电商行业设计要求与设计规范，学习电商行业不同类型的设计方法和店铺包装方法，掌握电商设计全流程以及电商Banner版式设计。
知识这么多，看起来都头大。别急！！！我们将这些知识进行拆分，一步步带你飞。
（1）企业响应式网站/一屏网站设计：掌握网页设计流程及规范，网页设计配色、排版技巧。
Web设计基本规范：单位、分辨率、尺寸、字体、颜色等/通过案例展示了解网站组成架构（首页设计）
网页设计中的版式扩散与界面设计
通过栅格化布局，增强网页设计版式，深入研究网页中构图/色彩/字体/使用等，提升整体页面细节。
响应式移动端设计规范：设计尺寸、适配设备、排版布局转化形式。
企业网站界面设计
（2）后台设计：掌握数据图形化，及图形数据配色。
目前，根据招聘市场信息反馈可视化和后台也是网页阶段的标配，所以后台首页又有那些学习要点呢？
企业网站界面设计
掌握一屏式网页设计及页面中交互效果设计（一屏首页设计）
通过设计案例了解后台设计规范及后台 *** 作流程和功能
后台首页设计
将后台数据通过柱状、饼形、走势图等手法以增强观赏阅读性为目的做数据可视化处理
（数据图形化设计）
（3）电商设计： *** 作掌握首页、专题页、详情、主图、直通车、钻展、后台装修，移动端与pc端设计规范，并且通过店铺实际 *** 作掌握电商详情页的设计技巧和版式技巧。
通过淘宝电商平台了解首页移动端与pc端设计规范。
掌握主图、直通车、钻展设计规范，以及在后台推广窗口了解更多运营推广图设计板块。
通过项目案例分析展现专题页设计构图/以真实案例剖析：项目流程、关键点提取、视觉推导图。
淘宝电商平台首页、专题页设计
详情页设计规范及内容构成，站在用户角度去考虑设计
淘宝电商平台详情页设计
通过申请自己的淘宝店，在电商后台实 *** 装修/商品上架（切图/上架/后台装修实 *** ）
（4）C4Dbanner：掌握3D场景设计，运用到设计作品中，丰富画面视觉效果。
C4D软件基础/场景搭建，利用3D场景提升设计空间立体感，增强视觉冲击力。
（白模场景搭建）灯光材质/渲染输出/C4dbanner（场景贴材质/打灯光/渲染设置并输出应用到Banner中）。
Banner设计中的版式与Z轴拆分。
提升电商Banner，画面中融入更多插画元素。并多以矢量插画风格展现。
C4D风格Banner设计制作。
3、移动端设计
划重点啦！！！
随着移动互联网的发展，大家对于手机的需求也越来越高，人们用手机娱乐、消费、学习，所以UI设计无时无刻不体现在我们的生活中。在这一部分，我们不仅要学习设计，还要学习用户体验、交互设计、运营设计，让我们的产品更贴近目标用户的使用习惯。
（1）用户体验、竞品、原型图：了解项目开发、产品调研、项目流程，掌握交互原型。
通过市场调研或大数据分析，做项目竞品分析。利用大数据统计分析用户对产品的痛点及体验反馈，模拟用户画像分析用户对本项目的痛点、需求、受众、职业等等。通过数据比对及资料搜集做市场分析。
学习Axure软件，绘制低保真原型图。
结合产品分析和竞品分析，用Xmind制作思维导图。
分析App页面流程图/功能框架/界面跳转逻辑，利用axure绘制App原型图。
（2）图标、胶囊、界面设计：通过整体性设计界面去掌握图标、状态栏、导航栏、标签栏、闪屏、启动、欢迎页/引导页，d窗页面等界面设计。
以剪影图标、扁平图标、线性图标、面性图标、微质感图标、轻拟物图标认识图标的多样性。
探究金刚区、功能图标、装饰性图标设计的特性，及不同板块应该使用的图表类型及设计。
了解Ios/安卓界面设计规范：尺寸、字体、颜色、大小、行距等，再深入探究界面中组成部分如：状态栏、导航栏、标签栏等尺寸可点击空间大小等。
通过成熟的App，了解胶囊/d窗设计形式及组成部分，深入分析闪屏/启动/引导页/三者之间的设计特性和运营思维用户体验等
最后，从0到1按照用户思维和产品思维整体性设计界面
（3）运营界面、AE交互动效、制定视觉规范设计：电商中的运营思维与产品设计结合，以用户思维审查界面寻找用户痛点，提升整体运营界面，达到营销推广目的。AE交互动画设计，增强界面交互 *** 作体验感。
以运营思维延展推广类界面设计。（多看优秀电商产品，去反推运营思维与设计）
突出促销活动专题页、d窗、闪屏设计氛围，增强视觉感染力，促进用户点击浏览量。
运营界面设计。（从模范开始，到加入运营思维设计运营界面）
以案例掌握AE软件基础：图形变形、移动、大小、透明动画
深入AE功能：节点缓动、速度图表使用让画面更柔和顺畅自然、利用滤镜达到更多动画效果，以界面交互动画、跳转效果动画做练习及项目展示。
掌握视频导出MP4、Png序列、Quicktime方式。
4、WEB前端：UI设计不一定要精通Web前端，但是如果了解前端基础知识，可以更好和程序员沟通，以实现自己想要的效果。
掌握Web前端的基本知识，熟悉Html5和Css3熟悉框架布局
通过学习Html5和Css3的学习,把自己设计的企业站解析成网页。
通过以上的学习，我们具备UI设计技能，进入UI设计行业后，更需要保持持续的学习去提升自己的审美、设计、技能等。所以多去看别人的设计，不是要抄袭，而是去思考学习别人的优点，去提升自己的设计思维。
这是关于原型设计规范的第二篇文章。最早听说原型设计规范这个词，还是刚入行没多久，处于自我感觉超级好的打鸡血阶段，有时候接到新的项目或产品需求，一天可以画几十张原型图，反正就是 各种堆砌图标、组件和文字，加链接跳转，最后简单的左右居中对齐 ，这样的状态持续了小半年之久，一句话总结是：熟练无比，乐此不疲！
直到有一天，公司组织开了个内部产品分享会，主题是 什么样的原型最适合开发（设计）？
其中有个环节是让每个产品经理当场演示自己的原型HTML ，其他产品和各项目组主设、主程评价打分。已经不记得当时我得了多少分，反正轮到我讲的时候全程面红耳赤，感觉分分钟要被开除的节奏。在总结的阶段，有个UI转岗的资深女产品重点提了原型设计规范，概括性的讲了几分钟。此后，我就有意识的开始查阅搜集产品原型设计规范的相关文章和资料。
一、产品原型图有哪几种？（多图预警）
归纳可分为三种：分别为原型草图（需求版）、低保真原型（标注版）、高保真原型（交互版）。
以上三种原型图，最常见的是低保真原型，需求评审或开发时经常使用。高保真原型一般只有公司层面的汇报或者产品商务演示才需要用到。而在沟通需求的时候，会使用手绘版的原型草图来辅助理解。
但是，真正适合UI设计和程序开发的原型图，其实是灰模原型。
二、什么是灰模原型？
>>灰模原型是基于信息架构和功能列表的
>>灰模原型一般使用尺寸：375667 或 320480（App）
>>制作灰模原型时，一定要所有组件之间的对齐，需对齐到像素级
>>所有的元素，除了组件自带的颜色，只用黑白灰三色
>>只用最基本的矩形、直线表现整个原型，矩形可变换成圆形、三角形等，现在我会增加灰度的ICON
>>不用设计交互，所有页面分开展示，每个功能的状态都需要表明
关于灰模原型，我会在原型说明的文章中详细阐述，这里仅将这个原型的要素先列出来。
三、常用元素大小尺寸说明
PS:若尺寸记忆繁琐，亦可参考将iPhone 6的尺寸缩小1倍作为原型尺寸。
四、页面编号规则说明
关于页面编号我使用的是文档的编号规则，abcd ,最多到4级，使用页面标题名称作为页面名。
这样编号的好处有两点：
>>可以很清楚的看出来每个页面父子层级关系，便于快速理解功能信息结构。
>>可以很清楚的看到页面层级数量，若出现4级或以上页面，就需要重新思考产品页面层级是否合理（层级越多，产品易用性越差）。
关于原型的元素组件命名，我一般都默认不命名，只在做动态交互的时候，针对可触发的元素进行统一命名。如果想要全面了解命名规则，可以搜索UI切图命名规范。
低保真是原型图。
低保真也称作为交互原型，一般由交互设计师完成，它可以被理解为任何界面的设计蓝图，无论是应用程序还是网站。完整的UCD团队一般会先出低保真，然后再出高保真(视觉稿)。
lo-fi(低保真)，最早是摇滚音乐上的一种说法，也即是hi-fi(高保真)的反义词，通常使用粗糙、怪异、不和谐的音色和生硬、歪曲的演奏技巧，着力营造出一种噪音效果。
交互设计：
交互设计（英文Interaction Design，缩写IXD)，是定义、设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使之互相配合，共同达成某种目的。
交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。
产品研发流程简介
下两副图是产品研发简化流程图，交互设计环节被增加在提出需求与视觉设计之间，可以直观看到交互设计起到了承上启下的作用，但实际上交互设计师做了什么，如何与其他岗位更好的合作，下面将进行详细的解说。在此之前，我们先记住交互设计的本质：规划交互行为方式，设计达成行为的最有效形式。
没有交互设计的研发流程
有交互设计的快速研发流程
产品研发的六个层次
产品研发可以分为上图的六个层次，其实也就是《用户体验的要素》中提到的五层理论再加上一个实现层，这样拆分后，可以比较清楚的分析出产品由抽象到具象的过程，了解各个岗位的职责。下面将详细分析每个层次都做什么，交互设计师在各个层次的职责和作用：
战略层
内容：定义产品的方向、概念、定位、目标等;
一般是老板们高瞻远瞩，产品经理们深思熟虑绞尽脑汁，用研、市场、交互等同学出谋划策，就不多说了。
范围层内容：策划产品的规则、入口、功能、内容
负责人：产品经理
合作者：交互设计师
输出物：需求文档
在需求定义阶段，产品经理常会犯个错误——依靠描述用户行为和界面形式来表达需求：
产品经理往往必须借住自己对形式的观察和设想，或者从用户的角度描述其 *** 作过程，才能明确自己想要的需求，甚至必须借助自己画的图来表达需求。为什么这么说，看看电脑里自己或别人的需求文档就知道了，如图示(这些都是产品经理交给交互设计师的需求文档中的)：
需求说明示例一
需求说明示例二
产品经理依靠描述用户行为和界面形式来表达需求，有三个坏处：
1你写的或画的不一定合理，这方面交互设计师更专业;
2交互设计师得按照文档想出一副画面或故事，绕着弯去研究你到底要啥，期间还得不断找茬;
3你浪费了自己的时间，说严重点，你浪费了定义产品需求的时间，偏了重点;
所以需求文档中，最好不要完全借助用户行为和界面形式的描述来表达需求，而应明确写出产品功能、目标等等，可以加上参考图辅助理解。如果产品经理们真的很难表达，或不确定自己要什么，最好就和交互设计师一起先讨论，交互设计师可以帮助你分析其他产品为什么要这么设计、或者你想要的一个未曾见过的功能可以怎么表达，讨论好了再制定需求，甚至直接出功能和内容列表都可以。
产品经理在范围层的重心，一定得放在怎么做才能实现产品战略目标了。
结构层
内容：需求的内容规划、主任务的用户行为 *** 作流程、界面结构或信息架构
负责人：交互设计师
合作者：产品经理
输出物：流程图、架构图等
流程图
架构图
交互设计师在这个层面要梳理需求，找出用户的主要任务，定义好任务 *** 作流程，规划好界面结构、各自功能、连贯性，期间要不断预测和规划功能的表现形式和用户使用细节。在此过程中，交互设计师可能会发现一些需求不合理之处，产品经理也可能会根据流程图、信息架构图等等，发现一些无法达到产品目标的问题，例如某个功能多余、入口过于分散、结构不够简单等等，二者一起完善需求、优化方案，力求主线清晰简单。
框架层
内容：产品的基本形式，包括布局、控件、位置、大小、一些 *** 作细节;
负责人：交互设计师
合作者：产品经理、视觉设计师
输出物：静态线框图、可演示低保真原型等
交互原型图一
交互原型图二
在这一阶段，交互设计师就开始绘制用来表达行为的形式了，确保所用形式可以很好的让用户知道重点是什么、下一步要做什么、怎么做、不常用的功能去哪找等等，交互设计师这一阶段要做到：
1主任务流程突出明确简单，其他任务完整易懂;
2满足可用性要求(易学、易见、易用)、用户体验优秀、连贯;
3逻辑正确完整、极限情况处理完善;
4可扩展;
5符合产品所在设备系统及平台的设计规范，例如windows的控件规范、iPhone、安卓的设计指南等等，不要轻易创造不规范的控件;
6视觉设计师可以在此基础上美化发挥;
这也是为什么会出现交互设计师这一岗位，因为产品经理或视觉设计师都没有通常精力来做这些，或者从未做过甚至从未考虑过这些。
交互原型图输出时，产品经理就可以预测视觉稿是否能达到产品定义时期望的效果，查看交互图中的对内容和功能的侧重是否能满足产品需求了，审核并提出建议;但有的产品经理会要求交互设计师如何设计，例如说"我就要XX这个样子的"、"我不能接受这种布局"等等，这个时候，请产品经理认清自己和交互设计师的专业职责，让专业的人做专业的事，大家应该一起各抒己见、向用户、成本、时间妥协，讨论出对于用户和产品而言最好的方案，而不是让对方服从自己主观的想法。
此外，若视觉设计师在此阶段就参与讨论，对产品会更有帮助。视觉设计师要对产品非常熟悉、了解细节始末，实时关注交互原型图的进展，提出建议，将更有利于产品快速开发、减少后期因"交互原型图美化后不好看、不生动、界面太挤"之类的原因而修改交互稿。例如对于"锻造"这个过程，交互设计师设计成了A+B+C=D这种长条形布局，而做效果图时，视觉设计师才说难以体现游戏感，希望能画个炉子，在炉子的周围摆上材料，炉子中间为锻造成品，这个时候又要交互设计师重新设计就浪费精力和时间了。
另外，如果该项目较为重要，最好在主要界面交互原型图输出后，主动邀请权威角色评审，以免后期才得到意见，再修改就来不及或重复工作。
表现层
内容：产品外观、企业形象、视觉情感;
负责人：视觉设计师
合作者：产品经理、交互设计师
输出物：效果图、动画等等
在表现层，视觉设计师会根据交互原型图进行绘制，在交互图的基础上，可以对布局、控件的形状、形式进行微调，设计图标按钮等等，此时交互设计师应该实时关注，以确保图形及色彩的认知效果，以及是否有不太合适的更改，或未达到预设的地方;
上图为玩家列表的交互原型图和效果图。交互图中蓝钻、年费、昵称的位置格式是QQGAME的蓝钻规范，昵称上限为24位字符，如果按照效果图摆放，一个是不符合平台规范，另外在列表中也会因为实际昵称长短不一，导致蓝钻、年费图标显得较乱。欢乐豆数字上限为9位数，为容易阅读加上顿号分割，效果图没有预留上限位置，也去掉了顿号。
虽然不建议在交互原型图经过了全员评审后又修改方案，但实际上，在效果图发出后，往往仍会因为各种"觉得不好看"、"看起来很挤"、"达不到产品目标"等主观或客观原因要修改效果图乃至交互原型图布局甚至改动功能，这种风险因素很难避免，只能尽量弱化，特别是权威角色若未持续保持关注、在大型评审时可能会提出颠覆性意见。我的建议是交互设计师输出主要界面的原型图且通过全员评审后，视觉设计师马上输出对应效果图，效果图评审通过全员后，交互设计师再去全面补充剩余的交互原型图，这时候若要修改，成本就会小很多。
什么时候写《产品设计文档》
待主界面效果图通过评审后、视觉设计师开始补充剩余的交互原型图时，交互设计师就可以开始着手写交互说明。如果提前写了，一旦效果图有修改，就要跟着修改各种逻辑和细节，挺伤脑细胞的，也浪费时间、容易遗漏。待效果图完成后，将需求文档、交互说明、效果图合并为产品设计文档(合并这活可以由产品经理或交互设计师来做，另一方来审核即可)，交与开发。
为什么要合并成一份《产品设计文档》
看看开发、测试同学每次要对着需求文档、交互原型及说明、效果图三种输出物来工作是有多崩溃就知道了，另外一份文档更新和同步起来也比较方便。在更新时，效果图和交互内容的更改由交互设计师维护，其他需求内容由产品经理维护，互相知会。
实现层
内容：设计审核、开发、测试、发布等;
负责人：伟大的程序员
合作者：产品经理、交互设计师、视觉设计师
输出物：活生生的产品
其实实现层不仅仅是开发过程，在前期产品设计阶段，开发人员也需要时刻参与审核把关，确保开发成本和时间合理，及时提出"无法实现"、"耗时"、"漏了XX"等问题，避免后期才提出要改动或修补交互方案。
不能边设计边开发(前端)
我们现在的开发阶段常常在交互方案还未确定时就启动了，其实这是对产品设计很不好的(当然，仅仅是开发底层或后台等不太影响)，因为：
1一旦开发将用户行为过程、界面布局写入了代码，再修改就较为困难、代价高，而事实上此时一切用户行为和形式都还未被完全确认;
2给了设计师较大的时间压力，可能会影响设计思路、逻辑的严密性、方案的质量;
因此，建议开发同学最好是在产品设计完全完成后，才启动前端开发。最早也应该在主界面效果图确认之后，期间任何未确认的东西先不要急于实现，或者和交互设计师确认后再实现。
此外，PM要监督和帮助下面两点的实施：
1如果一名交互设计师需要同时跟进多个项目(理想状态下当然不推荐这样)，可能无暇随时跟进、不能及时的发现版本问题，而产品经理是时刻盯着项目的，所以常常遇到这种状况——开发同学遇到交互问题(如方案无法实现或细节不完整)，不问交互设计师而去问产品经理，或者产品经理发现交互问题后自己提出解决方案，等到交互设计师审核版本时发现这个解决方案不合理，要修改已经代价颇高了。因此，开发过程中，遇到任何产品设计相关问题，PM或开发人员最好拉上产品经理和交互设计师一起沟通解决。
2应该严格仔细的按照产品设计文档进行开发，不要弄错一个流程、写一个错别字、弄错一个图标、错位一个像素，因为后期的每次找茬都是令人崩溃的，而且还不一定能遇到这个错误。虽然"细致"这是个传统美德，但还是不知道有多少开发GG伤害了交互妹纸的心。
研发流程步骤总结之前我们这边的研发流程是需求写完经过需求评审后，交互设计师输出全套交互原型图、交互说明文档，经过开发评审，美术再投入进来，前端开发再正式启动。这个流程的应用过程中出现过非常多的问题，主要问题在前文中已经提到，经过和其他交互设计师、项目组成员的讨论，我在自己参与的几个项目中进行了流程优化，效果不错，新流程的具体步骤为：
产品设计阶段(此阶段每一步都需要通过全员评审尤其是开发的评审)：
第1步：产品经理输出功能内容需求列表，期间与交互设计师密切讨论;
第2步：交互设计师输出主任务的用户行为 *** 作流程、界面结构或信息架构，期间与产品经理密切讨论;
第3步：交互设计师输出主要界面交互原型图，期间与产品经理、视觉设计师密切讨论，通过全员审核;
第4步：视觉设计师输出主要界面效果图，期间与产品经理、视觉设计师密切讨论，通过全员(尤其是权威角色)审核;
第5步：交互设计师补充剩余交互原型图，视觉设计师补充剩余效果图，通过全员审核;
第6步：交互设计师输出交互说明文档，通过开发评审;
第7步：产品经理将需求文档、交互说明文档、效果图合并为产品设计文档;
正式开发阶段：
第8步：开始正式开发，期间与产品经理、交互设计师密切讨论(此过程最好不要有大的变更);
第9步;测试阶段，交互设计师等各种角色提出细微修改建议(理论上此过程不能出现任何变更);
理想的研发流程VS快速研发流程
理想的研发流程
实际上最理想的产品研发流程是在开发前制作出可 *** 作的高保真原型(既不是效果图也不是用axure简单演示的原型，而是主线任务完整的、至少可以进行可用性测试的原型，详见《启示录》一书)，并不断进行可用性测试、专家评估，循环修改，然后按照最终确定的原型进行开发，再不改变任何内容。这样可以极大程度的免去需求变更导致开发重做的可能，并且预防因赶时间而放弃迭代修改，此外还可以免去阅读冗长拗口的说明文档，但更重要的是，将发出的产品已经有了相当有把握的验证。
像苹果、以及国内有些重视用户体验的网站就是采用的这种理想的开发流程。但网站类产品胜在可以快速实现前端DEMO、输出高保真模型，而国内的软件市场就很少有这么做的，基本上都要求产品快速产出，尽快去真实市场占个坑，再去验证和修改，根本不会给产品设计相关人员这么多时间和成本去仔细设计和验证。所以快速研发流程实际上是最常用的，虽然不算最完美，但却很快速，在架构和平台比较成熟的公司比较适用。
对比之下，快速研发流程中显示出一个很严重的风险，在版本出来之前谁也不知道真正的体验是怎样的，所有的过程都是依据经验的预测，如果版本出来后才发现问题，小的还可以改改，大问题根本来不及改正。所以评审和经验就显得尤为重要，这也造成了这种流程中，各种角色都保守异常、纠结致死，更是鲜有创新突破，只敢在小地方微创新一下。
因此全新的软件产品最好用理想研发流程，除非改起来非常简单，而快速移植类或系列产品可以用快速研发流程，但坚决不能边设计边开发，产品经理和设计师们必须提前足够的时间先启动。
TheEnd
最后，祝每一个项目组都找到自己心仪的交互设计师，祝每一个交互设计师的脑细胞都能更强壮!没有交互设计师的项目组，那就让你们的产品经理们担负起交互设计师的责任吧
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）