4个步骤，设计一个官网高保真原型

向前一步是高保真原型，向后一步是低保真原型。高保真原型是关注细节，是微交互，是一种不将就的态度。更简单的解释：高保真原型=线框图+交互逻辑+UI。

到新产品线上任已近20天了，在梳理所有的业务流程之后，发现原官网的几个问题：

1. 国内有两个域名，根据产品名区分，而实际内容又包括了所有产品的介绍
2. 首页产品描述不够清晰化，不能一眼看出这个产品到底是什么
3. 产品介绍页面，只有价格与几个特点，再无其它，功能无介绍
4. 重点信息突出不明显，比如价格，案例等。

价格一般属于用户比较关心的内容，案例用于向用户展示我们的产品魅力，能增加说服力和可靠性，如果找到了相同类型公司，则合作的概率会大大增加。所以这些信息需要用户在导航栏时就能一眼看到。

我们知道，官网除了是用来树立企业品牌形象、提升企业信誉，同时也是用来做品牌推广、产品展示、传播企业文化、发布资讯的重要渠道，最重要的是增加销售量，在互相网发展的今天，官网的重要性，相信大家应该都明白。

基于以上问题，我重新设计了一个高保真的官网原型，只用了这几步。（参考原型链接：https://jqcgx2.axshare.com）

01、深度理解这个产品

这个产品是做什么的，提供什么样的服务，面向用户群体是谁。

比如：我所负责的这个新产品主要是为用户和企业提供大文件传输服务，提供公有云服务（Saas服务，简称云传）与私有云部署（软件系统）两种服务。云传主要面向C端与B端，软 件系统仅面向B端用户，而这两个产品最大优势就在于一个字，快！上传下载比普通的云网盘或FTP要快上几百倍，无论是大文件，还是海量数据。

02、开始设计官网框架

下面这张是我在做这个官网时做的基本框架，软件类产品基本都可以按照这个框架来做（其它行业的产品就不能用这个框架啦）。由于这个产品主要营收来源是在软件系统，所以按照市场要求，比重放得大一些。也方便后续的SEO。

03、制作原型模板

在整个设计关节，我只用了7种交互技巧，就基本完成了所有的交互设计。

1、母版功能

母板功能真的超级好用，官网结构比较简单和单一，所以只需要一个顶部导航栏和底部引导菜单母版就可以了

这里我们可以选择将母版的顶部导航栏固定到浏览器的最上方，这样就能更方面用户点击更换菜单。

具体操作

打开母版-》选中全部-》右键转化为动态面板-》右键设置固定到浏览器

2、顶部导航栏鼠标移入时显示下拉菜单，移开消失

具体操作

比如：解决方案下拉

1. 将下拉的整个菜单右键设置为“动态面板”
2. 给菜单文字设置移入时设置显示“解决方案”动态面板
3. 在解决方案动态面板周边分别加入热区，实现鼠标移动到这些热区范围时，所有下拉菜单消失。
4. 将解决方案动态面板右键设为隐藏，这样就只有在鼠标移入时，才会显示下拉的解决方案

3、页面跳转

用的最多，同时最基本的就是这个了。

具体操作

选择要跳转的部件-》设置鼠标单击时在当前窗口打开要跳转的页面即可

4、首页Banner的轮播+手动点击切换

具体操作

1. 拖入动态面板，并创建123三个状态
2. 设置交互为“载入时”，动态面板状态设置为"Next"，并设置循环间隔时间。

5、利用内联框架播放视频

具体操作

拖入内联框架-》右键预览图版设置为“Video”-》右键滚动条设置为“从不显示滚动条”-双击内联框架-》选择链接到url->填入视频的url地址即可

6、鼠标悬浮时多级页面切换

具体操作

1）创建动态面板“解决方案应用与行业切换”，添加两个面板，分别为“应用解决方案”与“行业解决方案”。

2）双击进入应用解决方案，在左边创建一个矩形框和一个动态面板“应用解决方案详情”，用来做各种应用的切换。在第一个矩形框的交互做完之后，直接复制，再修修编辑第二个应用，会方便许多。

3）给矩形设置交互样式

鼠标悬停

鼠标选中

4）给矩形添加两个交互

选中状态为true,鼠标移上去时会显示为选中的样式。

设置面板状态为“应用解决方案详情”中对应的那个面板即可。

5）复制并编辑其它应用的矩形框。

行业解决方案同样用此方法，可多个嵌套使用，举一反三，熟能生巧，哈哈。

7、利用变量实现页面跳转到指定页面的对应项

具体操作

1）给产品价格的矩形框设置两种交互

软件的产品价格设置变量值为1，云传的产品价格设置变值为2

在当前窗口打开“价格”页面

2）在产品价格页面设置“页面载入时”的交互项，即

变量为1时，将价格设置为软件价格的动态面板，并设置为选中状态即可

变量为2时，将价格设置为云传价格的动态面板，并设置为选中状态即可

好啦，模板基本就已经建立的差不多了。

另外，在制作过程中，你突然的灵光一闪就可能想到了一句绝句，那就边制作模板，边将想好的绝句填进来，没想好的就先用“XXXXX”来代替。

04、进行内容填充

这个过程需要找研发、运营、市场业务人员一起来完成。

案例通常由市场业务人员提供，哪些可以公布在官网上，哪些不可以，这些他们是最清楚的。

运营通常会需要添加一些利用SEO的词，以及运营人员通常比较擅长于将一些词润色，显得更加专业化。

最后，官网的原型设计就完成了，找上领导、运营、业务等各关键人员一起评审，接下来就可以交由UI人员了。

结尾

怎么样，你get到了吗？如果想要这份原型，可以关注我公众号留下你微信号，或者添加小助理微信：Cloud_Chunxiao,免费送给大家。

ps:认识滴就直接微信暗语”镭速传输官网原型“吧。