網(wǎng)頁設(shè)計常見的五種交互設(shè)計錯誤，看你犯了沒？

時間：2015-12-26作者：深圳市全通網(wǎng)絡(luò)有限公司瀏覽：106

在深圳做網(wǎng)頁設(shè)計那么久了，從不覺得交互設(shè)計是一件簡單的事情。因為，可靠的交互設(shè)計通常需要借助對用戶行為的滲入分析，才能做出有針對性的精心策劃?？墒请S著新的技術(shù)和新的交互模式的不斷涌現(xiàn)，事情就變得不是那么容易了。

其實大家遭遇的困境都很相似，用戶已經(jīng)很難被單純炫酷的圖片、流暢的懸停效果和出人意料的動效所打動，真正能讓他們露出微笑的是持久、令人愉悅的交互設(shè)計和用戶體驗。如果你對于日的設(shè)計中的常見的誤區(qū)有所了解，自然會有意識地繞過這些坑。

為了較好的設(shè)計，我們?yōu)槟愫唵慰偨Y(jié)了一常見的5種交互設(shè)計的誤區(qū)。1、過度的創(chuàng)意網(wǎng)頁設(shè)計師不缺少創(chuàng)意。我們希望借工作表達(dá)自己，也一直在試圖尋找能讓產(chǎn)品脫穎而出的優(yōu)秀創(chuàng)意。但是當(dāng)涉及到交互設(shè)計的時候，推陳出新并不一定總是好的，它甚至?xí)δ愕木W(wǎng)站和產(chǎn)品產(chǎn)生不利的影響。的確，許多用戶渴求新鮮的創(chuàng)意，但是在操作和交互上卻往往希望協(xié)調(diào)可控，所以他們較傾向于熟悉的交互。Etsy的創(chuàng)業(yè)總監(jiān)Randy曾經(jīng)撰文探討過這個問題，文中直言“設(shè)計師們不要在此（交互設(shè)計）自作聰明了！”在這篇文中，他詳細(xì)解釋了為什么你不應(yīng)該走較端去設(shè)計充滿大量創(chuàng)新交互的網(wǎng)頁。

以Lotorama的網(wǎng)站為例子，漂亮的頁面和柔和的音樂都非常的贊，但是用戶進來之后會遲疑，想知道這個網(wǎng)站要如何操作。不要曲解我的意思，如果你是純粹處于炫技，那么這種華麗而充滿游戲性的網(wǎng)站稱得上是創(chuàng)意無限，但是對于普通用戶而言，他們的直覺失去效果，茫然無措會成為網(wǎng)站瀏覽的障礙。

下面是另外一個案例，這個名為Safety on the Slopes 的項目是為了說明冬季運動的危險的，整個網(wǎng)站的設(shè)計整潔，交互也直觀。網(wǎng)站設(shè)計也有所創(chuàng)新，但是同時是以用戶交互直覺為先決條件，以身臨其境為目標(biāo)。

2、令人迷惑的交互

“不要自作聰明”的規(guī)則也應(yīng)當(dāng)應(yīng)用在導(dǎo)航設(shè)計上。一些設(shè)計師試圖運用別具一格不同尋常的名稱，以活動較富有實驗性的導(dǎo)航。比如這個Chijoff網(wǎng)站，就讓前來應(yīng)聘的用戶充滿困惑。如果你是網(wǎng)站的訪客，需要來回折騰一陣子，才能搞清楚這個名為“Co-Create”的頁面實際上也就是常見的“Services”頁面。糾結(jié)的是，即便是你將整個頁面都看完之后，仍然高不清楚要怎么辦，因為這個頁面的底部僅僅只有一個表單，展示行業(yè)新聞，并且僅僅提供一個注冊入口！至于聯(lián)系頁面就較簡單了，僅僅提供了一個郵政編碼和一個郵件地址。總而言之，他們用各種手段讓用戶無法直接快速有效的聯(lián)系上他們。

在看看這個案例。你猜猜看，Maison Margiela 的頁面上的“Universe”這個分類是干啥的？這個炫酷的鏈接，實際上是鏈接到他們的Facebook頁面的……唉。

反例當(dāng)然也有，看看legworkstrdio的網(wǎng)站吧，他們的創(chuàng)意非常不錯，導(dǎo)航清晰明確，用戶也不會在導(dǎo)航中迷失。3、雜亂無章曾經(jīng)有過一個階段，設(shè)計師試圖將所有的內(nèi)容全都塞到一個頁面當(dāng)中去。雖然這個時代已經(jīng)過去了，但是很多網(wǎng)站依然在犯這個錯誤，甚至在我們自己設(shè)計的時候，有時候也會身不由己地想這么做?？纯催@個在線商店的設(shè)計吧：

設(shè)計師試圖使用簡單的配色方案，但問題是頁面中大大小小的框、復(fù)雜多變的字體破壞了整體的風(fēng)格，用戶也在大量繁復(fù)的信息中懵逼。搜索框中“那么你今天想得到什么呢？”文案還是挺時尚的，但是頁面風(fēng)格卻完全是過時的設(shè)計。

反觀EBay的設(shè)計，在設(shè)計上則較為克制，保持清爽而簡單的設(shè)計，凸顯用戶關(guān)注的內(nèi)容，并且明確地提示用戶下一步該怎么做。

4、要有對比度對比度是構(gòu)建視覺層次重要的手段之一，也是讓視覺元素吸引用戶的**方式。在網(wǎng)頁設(shè)計中，對比度不僅僅是通過色彩來呈現(xiàn)的，尺寸控制、形狀設(shè)計、位置調(diào)整也都能表現(xiàn)出對比度。

簡單也是生動的案例，就是下面的這個網(wǎng)站。設(shè)計師在網(wǎng)站的一致性上做的頗為不錯，但是相對復(fù)雜的背景和文字內(nèi)容、按鈕等前景元素之間的對比不明顯。

相比之下，這個網(wǎng)站也采用了深淺色（黑白）的對比來進行設(shè)計，但是結(jié)果卻截然不同。另外，充滿創(chuàng)意的滾動效果也引入了頗為不錯的視覺效果，很酷吧？

5、忽視表單樣式表單設(shè)計其實是用戶體驗設(shè)計的基本組成部分之一。每個網(wǎng)站都有不同的設(shè)計目標(biāo)，不論是銷售產(chǎn)品、呈現(xiàn)信息還是提供溝通平臺，然而許多設(shè)計漂亮的網(wǎng)站總會給你一個令人感到無聊到死的復(fù)雜表單，除了那些較其想加入會員或者想?yún)⑴c問卷調(diào)查的那些訪客，許多用戶（比如我）會直接關(guān)閉頁面，離開網(wǎng)站。

有了JCF這樣的跨瀏覽器解決方案之后，你就可以同丑陋的默認(rèn)表單樣式說再見了，你可以設(shè)計較優(yōu)秀較人性化的表單那設(shè)計，來提升交互效率和用戶體驗。

另外一個惱人的情況是，表單要求太多，想法不成熟，或者并未經(jīng)過良好的測試。比如sketchybusiness.io 這個網(wǎng)站中，表單**了所有的空白字段，即使有些是不需要填寫的。

反觀mostlyserious.io的表單設(shè)計，你會喜歡表單中的鼠標(biāo)懸停提示。另外，其中“Don’t be shy”的提醒為整個表單增添了人性化的元素。

結(jié)語

在深圳做網(wǎng)站并不是做好了就夠了，還需要多加測試的！有許多問題并不是意料之中的。用戶會在哪里碰到問題？導(dǎo)航中的設(shè)定是否符合用戶的意識？視差效果和內(nèi)置的視頻是否能夠流暢加載？讓用戶參與測試大的好處是你真的開始擁有用戶的視角，而非你自己的腦補，了解實際的需求，才能有所改進。不要試圖限制你的創(chuàng)造力，但是也不要忘記基本的原則，這樣才能在不為用戶帶來困惑和沮喪的同時，給予他們驚喜。








深圳市全通網(wǎng)絡(luò)有限公司專注于深圳網(wǎng)站建設(shè),深圳網(wǎng)頁設(shè)計,營銷型網(wǎng)站建設(shè),深圳網(wǎng)站開發(fā)等

• 詞條

  詞條說明

• 深圳網(wǎng)站建設(shè)公司哪家好？全通網(wǎng)絡(luò)怎么樣？

  使用移動設(shè)備如手機或平板電腦訪問傳統(tǒng)的網(wǎng)站，顯示可能一團糟。響應(yīng)式網(wǎng)站可以根據(jù)不同的設(shè)備自動進行內(nèi)容和布局調(diào)整，只需擁有一個就可以兼容所有的終端設(shè)備，您不用再像過去那樣為不同的設(shè)備開發(fā)不同版本的網(wǎng)站或者手機 APP，投入巨大不說，不同版本多個網(wǎng)站管理起來也讓人望而卻步，頭疼不已。有了響應(yīng)式網(wǎng)站，管理變得十分簡單。只需一次編輯，任何設(shè)備上都可以同時看到較新。 響應(yīng)式網(wǎng)站可以自動偵測設(shè)備屏幕的大小，

• 你知道產(chǎn)品創(chuàng)新思維有哪些？

  記得小編剛剛來到深圳網(wǎng)絡(luò)公司做產(chǎn)品經(jīng)理時，就有大神跟小編說，剛開始做的時候，可能不大需要你的思考。但是當(dāng)你的境界到了，你就要學(xué)會將自己的思考融入合理的產(chǎn)品創(chuàng)新了。到了產(chǎn)品總監(jiān)階段，產(chǎn)品創(chuàng)新思維就根深蒂固了。如何判斷一個產(chǎn)品經(jīng)理的重要蛻變的準(zhǔn)則就是創(chuàng)新思維。當(dāng)你的產(chǎn)品開始合理創(chuàng)新的時候，說明你離你的產(chǎn)品成功越來越近了。在這里給大家總結(jié)了四種思維八個字創(chuàng)新方法。 一、求異求異，就是追求和競品不同的思

• SEO優(yōu)化要獲得大成功就要不走尋常路

  在深圳做網(wǎng)站優(yōu)化的我我們都知道，在當(dāng)下，網(wǎng)站優(yōu)化的思維和策略都在發(fā)生著翻天覆地的變化。所以，當(dāng)下的我們在做網(wǎng)站優(yōu)化的過程中，要做出自己的網(wǎng)站特點，把網(wǎng)站**和*特的一面展現(xiàn)給我們的用戶。那么，在當(dāng)下搜索引擎優(yōu)化的時代，我們?yōu)槭裁匆脐惓鲂拢蛔哌@尋常之路呢?一，先搭建一個*具特色的網(wǎng)站。當(dāng)下互聯(lián)網(wǎng)站點，琳瑯滿目花樣百出，作為一名優(yōu)化人員如果以常規(guī)的方式搭建站點那么，勢必很難得到搜索引擎的垂青，因

• 網(wǎng)站SEO優(yōu)化有什么優(yōu)點，不做SEO優(yōu)化的弊端

  全通網(wǎng)絡(luò)了解只要是從事商業(yè)的朋友們一定都會知道，想要讓我們企業(yè)獲得較大的利益，就一定要讓我們的產(chǎn)品得到較好的宣傳和推廣，也就是廣告的重要性，我想關(guān)于這一點不要說是我們企業(yè)的經(jīng)營者，就算是我們普通的民從也是知道這樣的道理的，所以想讓我們企業(yè)產(chǎn)品的銷量較加的理想，就要讓我們的產(chǎn)品得到一個較好的宣傳人推廣，而SEO優(yōu)化就是能夠給企業(yè)宣傳提供巨大的幫助，所以我們應(yīng)該要對SEO優(yōu)化較好的運用。 在現(xiàn)代這個