我要做一个产品(三):原型图

一、什么是原型图

原型图简单的来说,就是一款产品成型之前的一个简单的框架,就是将页面的排版布局展现出来,每个功能键的交互,使产品的初步构思有一个可视化的展示。

二、原型图的作用及重要性

之前我们做的信息结构图和产品结构图把产品的整个脉络梳理清楚了,但是产品的表现形态并不清楚,而原型图就可以 让自己提前看到产品的界面样式,每个按钮的功能和效果,也可以看到产品 的基本框架和运作机制,会获得更真实的感受。

因为原型图不是最终设计稿,当有需求需要修改,或者逻辑交互不符合需求时,修改起来也是比较方便,不会很麻烦,能够在开发前排除相当一部分的潜在问题和故障。

让 UI 和开发人员更清楚我们产品的意图,让他们能更好的设计产品和开发产品 ,而不是按自己的理解来,不然做出来功能不是自己想要的,最后就会出现产品和开发互相推卸的情况。

三、原型图的三种类型

1. 草图

可以用纸笔画,也可以使用软件(如Axure)画草图。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/633e8392-ad85-443f-bc92-f7d847b36bde/Untitled.png/

2. 线框图

线框图是一个网站或APP图形化的骨架,引导一个页面的内容及概念,能够帮助设计师和客户讨论具体的网站层次和导向。

一个简单的线框图只需要使用线条、方框和灰阶色彩填充,黑白色的布局整体呈现为低保真设计图,主要呈现主体信息群,勾勒结构和布局,表达用户交互界面的主视觉和描述。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5daf9ea5-e1b3-46c9-b6fd-727d6ed381b2/Untitled.png/

3. 高保真原型图

这个一般由 UI 设计师来完成,一般来说就是产品的最终形态了。

因为它们不仅拥有细致到位的视觉设计,同时尽可能的模拟真实的产品界面和功能上的交互,提供完整的产品体验。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b70bfa7e-df25-4ac5-8c88-3686e6b2dfb4/Untitled.png/

四、极客猿导航原型图

这里就先画线框图了,不讲究什么好看不好看,主要是把页面元素,布局大致的分好,具体的界面让 UI 去完善,老规矩,直接上图:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3712cd6-b1a5-493e-b9a9-ac619bed7bc3/Untitled.png/

为什么使用Figma

专业的制作原型的工具是老牌 Axure,为什么这里我使用的是 UI界新宠的 Figma,原因大致有两个:

  1. 避免重复劳动:线框图不是最终稿,如果使用Axure来做,我在 Fiama上还要再搭一布局,调整元素,我使用 Figma 的话,到时候美化界面的时候只需要找找icon,调整下颜色就OK了。
  2. 熟练度更高:我更喜欢使用Figma,它各种快捷键,插件之类的我都比操作Axure更加熟悉一点。

原型图解析

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/41862f96-3f8c-44c5-aa03-01cb91598b57/.png/原型图我是根据产品结构图来设计的,首页内容可分为两大块,左侧栏和右内容区,左侧栏有logo和导航菜单,右边区域有顶部公告,登录和网站推荐,主内容是导航列表。

设计的时候我没有犹豫再三,这一切都要归功于产品结构图。

总结

至此,我们原型图这一节就介绍完了,我们今天主要学习了原型图的基本概念和重要性,再就是通过案例学习了怎么做原型图,希望对你有一点点启发。

产品需求文档开发课程接下来的几期内容:

  • PRD文档

本文系作者 @ 原创发布在 极客猿小兵的博客。未经许可,禁止转载。


极客猿小兵 » 我要做一个产品(三):原型图

4 评论

  1. 针不戳

    1. 有收获就好

  2. 学到了,谢谢

    1. 一起加油

回复 geekape 取消回复