網站(zhàn)建設中五種錯誤網站(zhàn)設計(jì)
交互設計(jì)從來(lái)都不是簡單的事情。可(kě)靠的交互通(tōng)常需要借助對用戶行(xíng)為(wèi)的深入分析，然後有(yǒu)針對性的精心策劃。可(kě)是随着新的技(jì)術(shù)和(hé)新的交互模式的不斷湧現，事情就變得(de)不是那(nà)麽容易了。其實大(dà)家(jiā)遭遇的困境都很(hěn)相似，用戶已經很(hěn)難被單純炫酷的圖片、流暢的懸停效果和(hé)出人(rén)意料的動效所打動，真正能讓他們露出微笑的是持久、令人(rén)愉悅的交互設計(jì)和(hé)用戶體(tǐ)驗。如果你(nǐ)對于日常的設計(jì)中的常見的誤區(qū)有(yǒu)所了解，自然會(huì)有(yǒu)意識地繞過這些(xiē)坑。
為(wèi)了更好的設計(jì)，我們為(wèi)你(nǐ)簡單總結了一下最常見的5種交互設計(jì)的誤區(qū)。
1、過度的創意
網頁設計(jì)師(shī) 絕對不缺少(shǎo)創意。我們希望借工作(zuò)表達自己，也一直在試圖尋找能讓産品脫穎而出的優秀創意。但(dàn)是當涉及到交互設計(jì)的時(shí)候，推陳出新并不一定總是好的，它甚至 會(huì)對你(nǐ)的網站(zhàn)和(hé)産品産生(shēng)不利的影(yǐng)響。的确，許多(duō)用戶渴求新鮮的創意，但(dàn)是在操作(zuò)和(hé)交互上(shàng)卻往往希望協調可(kě)控，所以他們更傾向于熟悉的交互。Etsy的創業 總監Randy曾經撰文探討(tǎo)過這個(gè)問題，文中直言“設計(jì)師(shī)們不要在此(交互設計(jì))自作(zuò)聰明(míng)了!”在這篇文中，他詳細解釋了為(wèi)什麽你(nǐ)不應該走極端去設計(jì)充滿大(dà)量創新交互的網頁。
以Lotorama的網站(zhàn)為(wèi)例子，漂亮的頁面和(hé)柔美的音(yīn)樂都非常的贊，但(dàn)是用戶進來(lái)之後會(huì)遲疑，想知道(dào)這個(gè)網站(zhàn)要如何操作(zuò)。不要曲解我的意思，如果你(nǐ)是純粹處于炫技(jì)，那(nà)麽這種華麗(lì)而充滿遊戲性的網站(zhàn)絕對稱得(de)上(shàng)是創意無限，但(dàn)是對于普通(tōng)用戶而言，他們的直覺失去效果，茫然無措會(huì)成為(wèi)網站(zhàn)浏覽的障礙。
下面是另外一個(gè)案例，這個(gè)名為(wèi)Safety on the Slopes 的項目是為(wèi)了說明(míng)冬季運動的危險的，整個(gè)網站(zhàn)的設計(jì)整潔，交互也直觀。網站(zhàn)設計(jì)也有(yǒu)所創新，但(dàn)是同時(shí)是以用戶交互直覺為(wèi)先決條件，以身臨其境為(wèi)目标。
2、令人(rén)迷惑的交互
“不要自作(zuò)聰明(míng)”的規則也應當應用在導航設計(jì)上(shàng)。一些(xiē)設計(jì)師(shī)試圖運用别具一格不同尋常的名稱，以活動更富有(yǒu)實驗性的導航。比如這個(gè)Chijoff網站(zhàn)， 就讓前來(lái)應聘的用戶充滿困惑。如果你(nǐ)是網站(zhàn)的訪客，需要來(lái)回折騰一陣子，才能搞清楚這個(gè)名為(wèi)“Co-Create”的頁面實際上(shàng)也就是常見的 “Services”頁面。最糾結的是，即便是你(nǐ)将整個(gè)頁面都看完之後，仍然搞不清楚要怎麽辦，因為(wèi)這個(gè)頁面的底部僅僅隻有(yǒu)一個(gè)表單，展示行(xíng)業新聞，并且 僅僅提供一個(gè)注冊入口!至于聯系頁面就更簡單了，僅僅提供了一個(gè)郵政編碼和(hé)一個(gè)郵件地址。總而言之，他們用各種手段讓用戶無法直接快速有(yǒu)效的聯系上(shàng)他們。
在看看這個(gè)案例。你(nǐ)猜猜看，Maison Margiela 的頁面上(shàng)的“Universe”這個(gè)分類是幹啥的?這個(gè)炫酷的鏈接，實際上(shàng)是鏈接到他們的Facebook頁面的……唉。
反例當然也有(yǒu)，看看legworkstrdio的網站(zhàn)吧(ba)，他們的創意非常不錯，導航清晰明(míng)确，用戶也不會(huì)在導航中迷失。
3、雜亂無章
曾經有(yǒu)過一個(gè)階段，設計(jì)師(shī)試圖将所有(yǒu)的內(nèi)容全都塞到一個(gè)頁面當中去。雖然這個(gè)時(shí)代已經過去了，但(dàn)是很(hěn)多(duō)網站(zhàn)依然在犯這個(gè)錯誤，甚至在我們自己設計(jì)的時(shí)候，有(yǒu)時(shí)候也會(huì)身不由己地想這麽做(zuò)。看看這個(gè)在線商店(diàn)的設計(jì)吧(ba)：
設計(jì)師(shī)試圖使用簡單的配色方案，但(dàn)問題是頁面中大(dà)大(dà)小(xiǎo)小(xiǎo)的框、複雜多(duō)變的字體(tǐ)破壞了整體(tǐ)的風格，用戶也在大(dà)量繁複的信息中懵逼。搜索框中“那(nà)麽你(nǐ)今天想得(de)到什麽呢?”文案還(hái)是挺時(shí)尚的，但(dàn)是頁面風格卻完全是過時(shí)的設計(jì)。
反觀EBay的設計(jì)，在設計(jì)上(shàng)則更為(wèi)克制(zhì)，保持清爽而簡單的設計(jì)，凸顯用戶關注的內(nèi)容，并且明(míng)确地提示用戶下一步該怎麽做(zuò)。
4、要有(yǒu)對比度
對比度是構建視(shì)覺層次最重要的手段之一，也是讓視(shì)覺元素吸引用戶的絕佳方式。在網頁設計(jì)中，對比度不僅僅是通(tōng)過色彩來(lái)呈現的，尺寸控制(zhì)、形狀設計(jì)、位置調整也都能表現出對比度。
最簡單也是最生(shēng)動的案例，就是下面的這個(gè)網站(zhàn)。設計(jì)師(shī)在網站(zhàn)的一緻性上(shàng)做(zuò)的頗為(wèi)不錯，但(dàn)是相對複雜的背景和(hé)文字內(nèi)容、按鈕等前景元素之間(jiān)的對比不明(míng)顯。
相比之下，這個(gè)網站(zhàn)也采用了深淺色(黑(hēi)白)的對比來(lái)進行(xíng)設計(jì)，但(dàn)是結果卻截然不同。另外，充滿創意的滾動效果也引入了頗為(wèi)不錯的視(shì)覺效果，很(hěn)酷吧(ba)?
5、忽視(shì)表單樣式
表單設計(jì)其實是用戶體(tǐ)驗設計(jì)的基本組成部分之一。每個(gè)網站(zhàn)都有(yǒu)不同的設計(jì)目标，不論是銷售産品、呈現信息還(hái)是提供溝通(tōng)平台，然而許多(duō)設計(jì)漂亮的網站(zhàn)總會(huì)給你(nǐ)一個(gè)令人(rén)感到無聊到死的複雜表單，除了那(nà)些(xiē)極其想加入會(huì)員或者想參與問卷調查的那(nà)些(xiē)訪客，許多(duō)用戶(比如我)會(huì)直接關閉頁面，離開(kāi)網站(zhàn)。
有(yǒu)了JCF這樣的跨浏覽器(qì)解決方案之後，你(nǐ)就可(kě)以同醜陋的默認表單樣式說再見了，你(nǐ)可(kě)以設計(jì)更優秀更人(rén)性化的表單那(nà)設計(jì)，來(lái)提升交互效率和(hé)用戶體(tǐ)驗。
另外一個(gè)惱人(rén)的情況是，表單要求太多(duō)，想法不成熟，或者并未經過良好的測試。比如sketchybusiness.io 這個(gè)網站(zhàn)中，表單突出了所有(yǒu)的空(kōng)白字段，即使有(yǒu)些(xiē)是不需要填的。
反觀mostlyserious.io的表單設計(jì)，你(nǐ)會(huì)喜歡表單中的鼠标懸停提示。另外，其中“Don’t be shy”的提醒為(wèi)整個(gè)表單增添了人(rén)性化的元素。
網站(zhàn)并不是做(zuò)好了就夠了，還(hái)需要多(duō)加測試!有(yǒu)許多(duō)問題并不是意料之中的。用戶會(huì)在哪裏碰到問題?導航中的設定是否符合用戶的意識?視(shì)差效果和(hé)內(nèi)置的視(shì)頻是否能夠流暢加載?讓用戶參與測試最大(dà)的好處是你(nǐ)真的開(kāi)始擁有(yǒu)用戶的視(shì)角，而非你(nǐ)自己的腦(nǎo)補，了解實際的需求，才能有(yǒu)所改進。不要試圖限制(zhì)你(nǐ)的創造 力，但(dàn)是也不要忘記基本的原則，這樣才能在不為(wèi)用戶帶來(lái)困惑和(hé)沮喪的同時(shí)，給予他們驚喜。
