初学者谈谈网站交互设计

由于所在团队的项目原因，开始接触实战的交互设计，第一次使用 Axure 来为一个网站设计一份交互。加入团队的时候，整体站点的功能和需求基本有了一个大框架，所以只提出了一些修改和增减的意见，主要针对网站在功能上的侧重以及交互上的缺失，而主体板块上面则没有做过多的变动。

在『自以为』完成了交互稿之后，看到视觉同学给出的效果图，似乎有点『心满意足』的感觉。很巧地，在人人上遇到了以前的老舍友，目前正在某大型网站做产品经理，于是就冒昧地提出把我做的网站原型拿给他看看，请求提一些建议。

结果是，出乎我的意料，但是又让我非常满意地，提出了很多至关重要的建议（正规公司的培训和自己摸索是完全不同的）。尤其是在学生团队中无论如何摸索也不容易自我觉醒的建议。所以趁热打铁，权当自己是一个初学者的典范，说说初学者对网站交互设计的一些误解。

误解一：交互设计，就是用软件做控件布局和跳转链接

从我和朋友的原型图就能高下立判，一个原型图逼近成品，而我的，则可能好一点的手稿也要比我的原型图清晰和美观。错误地把交互理解为设计主体布局和页面之间的跳转关系，并且简单呈现给视觉，是我做交互设计犯下的第一个错误。单调的页面也仅仅体现了布局，丝毫没有体现出交互，更没有表达出不同的切换效果、换页动画以及呈现方式，这**对视觉以及前端同学的工作造成很多的不便。

误解二：交互设计，只是体现一个大概的设计概念

此条与误解一有些许重叠的地方，总而言之就是设计太潦草和太简单。在我的设计稿中，已知的网站944像素宽度也没有体现出来，是根据目测随意设置的边距，并且每一个页面的边距都不同（因为都是目测随便摆的）。同样地，在高度方面更是没有细致的规划，没有考虑到每一屏所显示的内容，没有考虑到哪些控件可能出现屏幕上『青**不接』的状态。实际交互和原型设计，应该是像素级的工作，应该让视觉和前端的同学明确知道每一个控件的精确位置，而不是让他们来替你做这件工作。工具方面，可以使用网格和屏幕分割线来划分区域，便于设计。

误解三：交互不对内容的排布做充分的考虑

首页过大的 banner **导致分割了首页导航栏和主体内容，过度注重美观则使得内容打了折扣。同时，在活动列表等界面中，尽量保证每一屏中的几个活动所在的位置和体现效果『公平』，否则排序靠后的内容就非常容易被忽略掉（点击量落差巨大）。因此，在交互设计中，除了要确定某一个大区域中放置的内容，对于其中细节内容的排布也应当有所考虑和安排。否则，你的设计就**影响运营同学的工作。

总的来说，交互设计和视觉设计、前端实现构成了网站设计不可或缺的整体，我再次对前期工作的不严谨和不专业对前端以及视觉同学表示深刻的歉意。交互设计，绝不仅仅是使用 Axure 把控件拖来拖去的体力活，也不是拍脑袋决定某一个布局好看或者某一个区域的内容。所有的位置、信息和像素，都是产品的体现、都是需求的满足、都是功能，都是产品经理需要 care 的东西。

最后，大公司对于重要的页面的设计都**有高级负责人亲自过目和确认，保证最终的效果。而在我们团队中，则可能需要产品经理、设觉设计和 Leader 一起来把关。

感谢朋友的无私指导：微博@大李家的小李

本文系作者 王镇雷 投稿发布，转载请注明来源于人人都是产品经理，并保留本文链接