1.4 互联网产品原型的设计流程
互联网产品原型的设计流程分为六部分，包括确定整体结构、确定排版布局、确定功能模块、设计制作原型稿、设计交互效果和调试交互效果，如图1-30所示为互联网产品原型设计的步骤展示。
图1-30 产品原型设计的步骤展示
提示
互联网产品的原型设计一般分为整体和局部，整体上更多考虑的是信息架构的设计，如功能结构、导航、菜单和排版布局等方面。而局部更多考虑的是功能上的交互设计，如按钮点击、反馈、页面切换、局部模块的整体展示等。从设计实现的角度来看，由总到分，并逐渐细化的过程是比较合适的。
1.4.1 确定整体结构
任何工作和任务，由总到分，并逐渐细化的过程通常都是最好的实现方法，如制作原型设计时构建的框架结构，整个结构决定了将来的产品走向及产品外观。
产品的结构设计决定了产品未来的功能导航结构。一般来讲，产品经理在做需求分析时，都会把几个主要的功能点罗列出来，将这几个功能点进行浓缩就形成了产品的初步功能结构，如图1-31所示为一个视频App的功能结构。
图1-31 视频App的功能结构
提示
例如，研发团队要做一个会员管理的功能，注册和登录是必不可少的，那么就可以将其列为会员管理下的两个基本结构。其实每个产品最终确定下来的一级导航栏，里面的各个栏目就是产品的主要功能结构。
1.4.2 确定排版布局
确定产品的整体结构之后，一般先会对页面进行布局设计，然后再考虑各个产品页面中的元素排版，工作顺序如图1-32所示。
图1-32 工作顺序
通常做产品设计时，都会遵循已有的、特定的布局结构。图1-33所示的布局结构，都是从之前无数个产品设计中总结经验，得到的布局结构，这些排版布局方式非常适用于设计整体页面。
图1-33 布局结构
细分到具体页面内容时，就需要对每一个内容块的展示位置进行布局，如图1-34所示为一个页面中包括的元素内容，需要对这些内容块进行一定的设计布局，这里的布局结构取决于设计人员对内容编排的把握，不同的布局会产生不同的效果。
图1-34 页面中的元素内容
1.4.3 确定功能模块
功能模块是指数据说明、可执行语句等程序元素的集合。它可单独命名，并且可以通过名字来访问过程、函数、子程序或宏调用。
功能模块化是指将程序划分为若干功能模块，然后每个功能模块完成一个子功能，再使用软件结构图示把这些功能模块组合成为一个整体。
这样做的目的是完善整个系统的功能。功能模块化是根据1+1＞2的理念，意思就是如果一个问题由多个问题组合而成，那么这个组合问题的复杂程度将大于分别考虑多个问题时的复杂程度之和。图1-35所示为1+1＞2的图解。
图1-35 1+1＞2的图解
确定产品的排版布局就相当于决定了某个产品功能模块的放置位置，然后就可以确定模块元素的内容了，使其接近于最终产品的展示样式，如图1-36所示为原型设计的元素分析。
图1-36 元素分析
提示
例如，一个电子商务网站，对内容块和广告块的排版布局就非常讲究，因为不一样的布局，所带来的用户点击量和转化率是不一样的。在这种情况下，如果对某一类产品的布局没有妥善的想法时，可以从竞品的内容布局中寻找灵感，因为竞品已经开始运营并且存活，适当地分析和借鉴可以让团队少走弯路。
当概念图、架构图和流程图准备齐全时，就可以设计功能模块中的元素，如图片新闻，可以用幻灯片效果和图片轮播效果来做，如图1-37所示为一些元素效果，但是具体采用什么样的交互形式来实现功能块的展示内容，取决于产品设计人员的把握、用户的需求和用户体验。
图1-37 元素效果
其中，用户体验是比较宏观的一块内容，如幻灯片效果，如图1-38所示为功能模块的具体效果，每个效果都需要经过仔细考虑之后再做决定，产品经理也可以在设计产品时多跟团队人员讨论沟通，同时参考同类型产品的设计效果。
图1-38 功能模块的具体效果
提示
例如，电子商务网站首页Banner图片的轮播效果，就是幻灯片效果。其实国内各大电商网站的设计大同小异，刚入行的设计师可以多多查看相关网站，在自己做设计时也可以参考借鉴。
1.4.4 设计制作原型稿
按照前面的三个步骤制作出来的原型设计，其实就是原型或者低保真原型。研发团队如果要细化交互设计，就需要在产品功能模块的原型设计上，更进一步完善每个功能模块的原型，补充交互设计和基本的内容排版样式。
设计制作原型稿，就是要让大家明白产品的理念和理念实现的方式。因为每个原型设计都是一个单独的功能模块或交互效果，当研发团队通过某款原型设计工具去实现时，都会有相应的实现原理。图1-39所示为基础的原型设计。
图1-39 基础的原型设计
设计制作原型稿时，因为要使用到设计制作原型的工具，这时，产品经理会不会使用原型设计工具就很重要。
一个团队的产品经理不仅要对产品的需求有所把握，同时必须对原型设计工具有一定的熟悉和了解，否则对着一个产品的手绘图，没有办法将其制作为低保真原型，从而无法进一步展示产品原型。
设计原型也是一个过程，需要多多动手来培养自己的设计能力，积累设计经验，也可以在自己没有思路时，尝试通过揣摩他人的作品，来找寻灵感。初学者可以先手绘出草图再使用设计工具来完善自己的原型稿，如图1-40所示。
图1-40 完善原型稿
实践是检验真理的唯一标准，随着设计制作经验的丰富，设计师的职业素养也会逐渐提高。因此，在设计制作原型时，一定要敢想敢做，然后多多进行动手制作，如图1-41所示为一些手绘的原型设计。
图1-41 手绘的原型设计
1.4.5 设计交互效果
通过对每个功能模块进行相对详细的交互设计，可以将每个功能模块实现的原理确定下来。功能模块在原型设计时的基础准备工作如图1-42所示。做好基础工作之后，就可以开始制作交互设计了。
图1-42 功能模块的基础准备工作
提示
从用户角度来说，交互设计是一种让产品易用并且有效的、可以让人愉悦的技术，它致力于了解目标用户和他们的需求，了解用户在同产品交互时双方的行为，了解“人”本身的心理和行为特点。同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及多个学科，以及和多领域、多背景人员的沟通。
详细的交互设计，包括组件自身的可变效果、交互事件、逻辑设定和触控效果等，具体的行为如图1-43所示。
这部分内容对产品经理的逻辑思维能力要求比较高，特别是做比较复杂的交互效果，思路一定要清晰，否则判断的条件一多，就很容易混乱。
图1-43 组件的交互效果
在交互设计过程中用到的很多逻辑，最终都需要体现到产品需求文档中。因此不管是设计前的分析，还是设计后的总结，都很考验逻辑能力。
想要将产品的功能模块从前到后关联起来，推荐读者在设计原型之前，为每一个拥有操作流程图的原型模块制作思维导图。
在绘制思维导图时，一定要结合产品在用户的实操场景中去设计，切忌盲目主观。否则，设计工作可能会进行到一半就因为灵感的缺失而无法继续下去，最后整个方案将被摒弃，这样的话对研发团队的时间和精力都是非常大的损失。
1.4.6 调试交互效果
很多交互效果都需要进行多次尝试，以及反复修改调整，最终才能达到研发团队想要的理想效果。
提示
在调试交互效果的过程中，设计人员一定要有耐心，如果思路是对的，想法也是可行的，那就顺着思路将效果进行反复实验，争取达到最佳状态。
如果最终没有达到想要的效果，研发团队也可以反过来思考，到底是团队对工具和产品特性不了解，还是团队的知识水平有限，找到失败原因从而解决问题。图1-44所示为设计制作交互过程的三要素。
图1-44 交互过程的三要素
整个调试过程可以让团队明白和理解很多东西，所以多动手很重要，动手是为了更加清楚地学习这个过程。这里还需说明一点，有些需要重复设置或者类似设置，先调试完成一个，其余相同或相似的效果可以沿用之前的方法，设计起来相对较快。
提示
研发团队反复调试交互效果让其达到最佳状态，主要目的就是为了在原型演示时降低沟通成本。一个动态的交互效果，如果使用文档去描述，可能需要一页的文字，还不确定所有的参与人员都能懂。但用原型去描述可能只需要1秒钟，大家就可以直观地明白效果。