今天就跟大家唠唠我前段时间捣鼓那个门户网站原型的事儿。这活儿，说难不难，说简单也不简单，反正就是一步步趟过来的。

琢磨需求，先搞清楚要啥

我没急着动手画图。关键是先弄明白，这门户网站到底给谁用？他们想在上面干嘛我就找张大白纸，拿支笔，先把能想到的大模块给列出来。比如，肯定得有新闻发布，可能还得有内部通知、下载中心、员工通讯录什么的。光自己想不行，还得找相关的业务部门聊聊，听听他们的想法。毕竟这网站是给人家用的，不能咱自己瞎琢磨。

搭架子，理顺信息结构

需求摸得差不多，脑子里大概有个谱，接下来就得把这些信息给组织起来。哪个是一级栏目？哪个是二级？用户点进来，先看到再点哪里能找到他要的东西？我就画个简单的结构图，跟树杈似的，把各个页面怎么连起来给捋清楚。这一步挺重要的，要是结构乱，后面用户用起来肯定晕，改起来也麻烦。

选家伙什儿，找个顺手的工具

架子搭好，就该选个工具把想法画出来。市面上的原型工具挺多的，以前我用过Axure，功能是强，但有时候感觉有点重。现在不是流行在线协作嘛像那个啥 Figma ，还有国内的那个叫“即时设计”的，好像用的人挺多，说是方便团队一起看，还能直接在网页上弄。我也看几个，比如 Mockplus 啥的。这回我寻思着，就试试那个“即时设计”，感觉界面看着还挺清爽，拖拖拽拽的，对这回这个门户网站的需求来说，应该够用，主要是想整个轻便点的，改起来方便，给别人看也容易。

画框框，先把骨架搭起来

选好工具，我就开始动手画。先不考虑颜色、图片这些细节，就是用最简单的方框和线条，把页面的大体布局给画出来。比如首页，Logo放哪儿，导航栏怎么摆，主要内容区多大，底部信息搁哪儿。新闻列表页、文章详情页，这些不同类型的页面，都得有个基本的框架。我先把这些主要页面的“骨架”给弄出来。

加点肉，让原型动起来

光有框框还不行，得往里面填点东西，让它看着更像那么回事儿。我就把一些方框替换成实际的文字标题，比如“公司新闻动态”，内容区放点乱七八糟的占位文字。图片也先用个灰色块或者风景图占着位置。最关键的一步，是把这些页面给连起来，做点简单的交互。点导航栏的“新闻中心”，就能跳转到新闻列表页；点列表里的标题，就能看到文章详情。这样，原型就不再是死的图片，能点点看，体验一下流程顺不顺。我用的那个在线工具，做这种页面跳转还挺方便的。

找人看，听听大家的意见

原型能点能看，我就赶紧找项目组的人、还有几个未来的用户代表，让他们实际用用看，提提意见。这叫用户测试？差不多就这意思。旁观者清嘛自己觉得挺好的设计，别人可能觉得不好用，或者找不到想要的功能。收集到反馈，比如有人说导航不清楚，有人说某个按钮位置别扭，我就根据这些意见回去修改原型。来来回回可能得改个几轮。

修修补补，准备交差

改得差不多，大家也觉得没什么大问题，我就再整体检查一遍，看看有没有啥遗漏的，交互是不是都顺畅。有时候，我还会加点简单的标注，说明一下某个设计为啥这么做，方便后面做视觉设计的小伙伴或者开发的哥们理解。这就算基本搞定。

做这个门户网站原型，就是这么个过程。先想清楚，再搭架子，然后选工具画出来，加上交互，找人看、反复改。工具是死的，思路是活的。理解用户需求、理清信息结构，这才是最重要的。每个项目具体情况不一样，但这套流程跑下来，心里就有底多。行，今天就先唠叨这么多。