由于所在團隊的項目原因，開始接觸實戰的交互設計，第一次使用 Axure 來為一個網站設計一份交互。加入團隊的時候，整體站點的功能和需求基本有了一個大框架，所以只提出了一些修改和增減的意見，主要針對網站在功能上的側重以及交互上的缺失，而主體板塊上面則沒有做過多的變動。

在『自以為』完成了交互稿之后，看到視覺同學給出的效果圖，似乎有點『心滿意足』的感覺。很巧地，在人人上遇到了以前的老舍友，目前正在某大型網站做產品經理，于是就冒昧地提出把我做的網站原型拿給他看看，請求提一些建議。

結果是，出乎我的意料，但是又讓我非常滿意地，提出了很多至關重要的建議（正規公司的培訓和自己摸索是完全不同的）。尤其是在學生團隊中無論如何摸索也不容易自我覺醒的建議。所以趁熱打鐵，權當自己是一個初學者的典范，說說初學者對網站交互設計的一些誤解。

誤解一：交互設計，就是用軟件做控件布局和跳轉鏈接

從我和朋友的原型圖就能高下立判，一個原型圖逼近成品，而我的，則可能好一點的手稿也要比我的原型圖清晰和美觀。錯誤地把交互理解為設計主體布局和頁面之間的跳轉關系，并且簡單呈現給視覺，是我做交互設計犯下的第一個錯誤。單調的頁面也僅僅體現了布局，絲毫沒有體現出交互，更沒有表達出不同的切換效果、換頁動畫以及呈現方式，這會對視覺以及前端同學的工作造成很多的不便。

誤解二：交互設計，只是體現一個大概的設計概念

此條與誤解一有些許重疊的地方，總而言之就是設計太潦草和太簡單。在我的設計稿中，已知的網站944像素寬度也沒有體現出來，是根據目測隨意設置的邊距，并且每一個頁面的邊距都不同（因為都是目測隨便擺的）。同樣地，在高度方面更是沒有細致的規劃，沒有考慮到每一屏所顯示的內容，沒有考慮到哪些控件可能出現屏幕上『青黃不接』的狀態。實際交互和原型設計，應該是像素級的工作，應該讓視覺和前端的同學明確知道每一個控件的精確位置，而不是讓他們來替你做這件工作。工具方面，可以使用網格和屏幕分割線來劃分區域，便于設計。

誤解三：交互不對內容的排布做充分的考慮

首頁過大的 banner 會導致分割了首頁導航欄和主體內容，過度注重美觀則使得內容打了折扣。同時，在活動列表等界面中，盡量保證每一屏中的幾個活動所在的位置和體現效果『公平』，否則排序靠后的內容就非常容易被忽略掉（點擊量落差巨大）。因此，在交互設計中，除了要確定某一個大區域中放置的內容，對于其中細節內容的排布也應當有所考慮和安排。否則，你的設計就會影響運營同學的工作。

總的來說，交互設計和視覺設計、前端實現構成了網站設計不可或缺的整體，我再次對前期工作的不嚴謹和不專業對前端以及視覺同學表示深刻的歉意。交互設計，絕不僅僅是使用 Axure 把控件拖來拖去的體力活，也不是拍腦袋決定某一個布局好看或者某一個區域的內容。所有的位置、信息和像素，都是產品的體現、都是需求的滿足、都是功能，都是產品經理需要 care 的東西。

最后，大公司對于重要的頁面的設計都會有高級負責人親自過目和確認，保證最終的效果。而在我們團隊中，則可能需要產品經理、設覺設計和 Leader 一起來把關。

感謝朋友的無私指導：微博@大李家的小李

本文系作者 王鎮雷 投稿發布，轉載請注明來源于人人都是產品經理，并保留本文鏈接