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

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

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

誤解一：交互設(shè)計，就是用軟件做控件布局和跳轉(zhuǎn)鏈接

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

誤解二：交互設(shè)計，只是體現(xiàn)一個大概的設(shè)計概念

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

誤解三：交互不對內(nèi)容的排布做充分的考慮

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

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

最后，大公司對于重要的頁面的設(shè)計都會有高級負(fù)責(zé)人親自過目和確認(rèn)，保證最終的效果。而在我們團(tuán)隊中，則可能需要產(chǎn)品經(jīng)理、設(shè)覺設(shè)計和 Leader 一起來把關(guān)。

感謝朋友的無私指導(dǎo)：微博@大李家的小李

本文系作者 王鎮(zhèn)雷 投稿發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理，并保留本文鏈接