初學者談談網站交互設計

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

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

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

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

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

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

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

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

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

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

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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,048評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,414評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,169評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,722評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,465評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,823評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,813評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,000評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,554評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,295評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,513評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,722評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,125評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,430評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,237評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,482評論 2 379

推薦閱讀更多精彩內容