网页设计原型图 界面原创设计基地 素马设计出品

说起原型图设计其实大家并不陌生，对于BAT公司来说，这是一道必须上的菜。因为产品设计经过原型图来梳理产品需求、内容完整性和可行性、页面逻辑关系及交互关系之后，再进入视觉设计环节，会大大降低项目设计的风险，也能提升产品用户体验。今天我们素马分享一个首页采用单屏布局的高保真原型图设计作品。

什么是原型图

-

原型图可分为手绘线稿图、中保真原型图以及高保真原型图。

手绘线稿图，如图示

中保真原型图设计，如图示

从上面的效果图可以看出，其实中保真和高保真有相似之处，就是通过效果图都能清楚知道，界面中有哪些内容板块以及内容的主次关系。只不过是高保真效果图的精密度更加高，设计的样式更加接近设计稿。

优秀的高保真原型图可以做到1像素不偏差。

原型图的优势

-

那么，我们在给企业做官网设计时，借鉴BAT公司（B=Baidu=百度，A=Alibaba阿里巴巴，T=Tencent腾讯）开发产品流程的优势，同样可以引进原型图设计这个技术和环节。让网页设计的方向更加可控。企业官网设计最大的风险就是，老板只给方向和感觉，比如我想要一个高大上的官网，却不知道如何落地，这时把所有的任务都抛给了设计公司，而设计公司没有办法化解目标的话，只能是一版又一版的出设计稿，出到跟“老板感觉”沾边后，再反复调整到“中标”为止。

素马设计给企业提供官网定制设计，总结出了一套创意落地行之有效的方式方法——创意通过是视觉端呈现出来，一定离不开版式和图像（包含文字、图片、视频、图标、插图设计等等），以及网页本身的交互动效设计的结合。既然如此，那么版式落地就更加需要原型图设计这个环节来把控。提前把内容可能呈现的形态和体量（网站文字及图片的量），通过原型图设计来梳理和确定下来，最后再把具体的风格样式交给视觉设计师去完成，避免了大量的由于内容不准确而反复修改风格样式的多余尝试。

使用什么软件绘制原型图

-

原型图的设计有很多可用的设计软件，目前我们素马用的是Axure RP 9的版本（目前为最高的版本)。熟悉这个软件的同学应该知道，这个是一个很强大的网页设计软件，除了图像处理之外已经可以把整站设计出来。

原型图的绘制方法

-

原型图的主要用途是用于完整的描述网站每一个页面需要展示的内容、以及展现网站栏目页面之间的逻辑关系，部分大型项目还会通过原型图把交互设计的方式都表现出来，让整个产品几乎就是一个穿着灰色盔甲就上战场的士兵，活生生的，完整无缺的。

明白了原型图的用途后，那么怎么绘制原型图会显得更加有品质一些呢？

首先，把一些栏目或模块组件化（母版）。比如页头（Header）， 页尾（Footer），浮动工具等，都是共用的。这一部分要绘制成母版，每一个页面都会用到。

其次，注意每一个板块的占比。通常一个板块不要超过2屏的高度，否则看起来会很怪异。虽然不是设计稿，但是也要考虑客户审核网页内容时的感受。

最后，就是注意对齐的关系。其实原型图不需要太多的设计样式的。只需要把内容有效的、完整的排版出来，让客户去审核内容准确性就可以了。而对齐关系，往往跟后期的设计版式有很大的关系。这里推荐大家节用栅格系统来布局。

栅格系统（又称网格系统grid systems）运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

高保真原型图案例讲解

-

首屏中，除了header之外，我们可以看到main content区域的左侧氛围，slogan广告语、描述、召唤按钮三个部分，右侧主要就是内容展示的交互方式。通过圆形的切换，不断的更新不同的案例（或产品），并且在屏幕左侧能看到上一个切换过的产品的部分特征，保留一丝神秘感。其中，slogan等与logo对齐。左侧的sns与折叠菜单对齐。slogan主要位于整个拌面的垂直中间处。尽量保持整体内容周边的空隙是一致的，整个版面看起来是平衡的。

好了，以上就是SUMART团队给大家分享的关于企业官网采用原型图设计的基本思路。