一個(gè)可以算得上是成功的項(xiàng)目往往是好的設(shè)計(jì)加上直觀有效的內(nèi)容以及一點(diǎn)點(diǎn)運(yùn)氣的結(jié)合。通常情況下，設(shè)計(jì)很容易會(huì)被一些簡(jiǎn)單的但是錯(cuò)誤的用戶(hù)體驗(yàn)所破壞，這些錯(cuò)誤會(huì)破壞內(nèi)容，并干擾整個(gè)網(wǎng)站流程的預(yù)期操作。

以上問(wèn)題可能造成用戶(hù)很容易忘記他們?yōu)槭裁丛谀抢?，以及接下?lái)他們應(yīng)該做什么。幸運(yùn)的是，許多這樣的設(shè)計(jì)錯(cuò)誤很容易識(shí)別和糾正(接下來(lái)這篇文章所舉的例子都是正確的案例，你可以把它們當(dāng)作參考）。

1.難以辨認(rèn)的字體

關(guān)于網(wǎng)站設(shè)計(jì)，曾幾何時(shí)是有那么一個(gè)短暫的階段流行使用新奇的字體。雖然這本身并不是問(wèn)題，但當(dāng)這些詞如果很難被閱讀或識(shí)別的話(huà)，它確實(shí)會(huì)造成嚴(yán)重的后果(如果用戶(hù)不知道信息表達(dá)的是什么，那么內(nèi)容在網(wǎng)站設(shè)計(jì)中又有什么意義呢)。

當(dāng)你必須使用新奇的字體來(lái)提升你的整體網(wǎng)頁(yè)設(shè)計(jì)時(shí)，你需要注意字母與你將要使用的單詞的搭配，有些組合可能比其他組合能更好地工作。注意使用的字體和數(shù)量，特別是用新奇的字體。

你如何判斷一種字體是否對(duì)于用戶(hù)來(lái)說(shuō)是不容易被識(shí)別的呢？其實(shí)很簡(jiǎn)單，小心那些帶有極端傾斜的字體，或者過(guò)于緊湊的和被壓縮的字體，過(guò)于復(fù)雜的線(xiàn)條、帶有不尋常形狀的字體等，這些都可能給用戶(hù)的閱讀帶來(lái)一些難度。

解決辦法：用更寬的或更常見(jiàn)的字體，把不可讀的字體替換出來(lái)。你不需要改變所有的方式去使用Helvetica，但是你需要去做一些更有利于可讀的和有趣的事情。

正確示范：LeadGen

2.糟糕的對(duì)齊方式

左對(duì)齊？右對(duì)齊？居中對(duì)齊？怎樣的對(duì)其格式是適合你當(dāng)前的網(wǎng)頁(yè)設(shè)計(jì)呢？

我們不討論各種排列方式的優(yōu)點(diǎn)，但是，你需要知道的最重要的是：保持格式的一致性是真正重要的事情。類(lèi)型和元素在網(wǎng)格中的視覺(jué)表現(xiàn)應(yīng)該是舒適的，避免出現(xiàn)鋸齒狀或參差不齊的邊緣。

不協(xié)調(diào)所存在的問(wèn)題是，它會(huì)破壞整體的視覺(jué)流動(dòng)，使得用戶(hù)很難在設(shè)計(jì)中從一個(gè)元素過(guò)渡到下一個(gè)元素。他們可能會(huì)迷失在混亂中，可能會(huì)錯(cuò)過(guò)最重要的內(nèi)容。

解決辦法：為元素設(shè)置統(tǒng)一的對(duì)齊樣式。比如圖片是以中心對(duì)其還是按照左圖右文的形式？創(chuàng)建一套規(guī)范的設(shè)計(jì)指引，調(diào)整設(shè)計(jì)，堅(jiān)持規(guī)則。

正確示范：Lorem Ipsum

3.不適當(dāng)?shù)氖褂脠D像

使用不恰當(dāng)?shù)膱D像是最常見(jiàn)的內(nèi)容“殺手”。它可能會(huì)創(chuàng)建一個(gè)與文本無(wú)關(guān)的視覺(jué)連接，或者讓用戶(hù)摸不著頭腦。

如何判斷你所使用的圖像正是你需要的？對(duì)于錯(cuò)誤的圖像，這里往往有一些危險(xiǎn)的信號(hào)：

· 愚蠢的或過(guò)度使用的圖片：如果這張照片看起來(lái)不真實(shí)(每次你或者用戶(hù)看到總是會(huì)忍不住笑起來(lái))，或者你在其他類(lèi)似的網(wǎng)站上看到過(guò)，那就避免它。

· 質(zhì)量差的圖片：如果照片沒(méi)有焦點(diǎn)，明暗過(guò)度或構(gòu)圖不好，不要使用它。

· 低分辨率圖像：像素化圖像總是最壞的選擇。高分辨率屏幕的優(yōu)勢(shì)和普及，使得幾乎在幾年前所做的設(shè)計(jì)工作中的許多照片規(guī)則都需要修改。

· Fluff圖像并不會(huì)提高內(nèi)容：不要僅僅因?yàn)槟阆胍褂茫词顾c內(nèi)容沒(méi)有任何關(guān)系，也不能僅僅因?yàn)槟阌X(jué)得實(shí)在是沒(méi)有適合的圖片可以使用。圖像應(yīng)該增強(qiáng)內(nèi)容，而不是使其變得混亂。

解決辦法：仔細(xì)審核你所使用的圖片。檢查你的設(shè)計(jì)，刪除有關(guān)的上面的任何圖片。如果你真的美喲適合的圖片可以使用的話(huà)，你大可不必使用圖片，考慮使用其他的相關(guān)元素。

正確示范：Xpand Laces

4.忽視移動(dòng)端的細(xì)節(jié)

眾所周知，網(wǎng)站設(shè)計(jì)的前期考慮應(yīng)該最大程度在響應(yīng)性框架上，但是響應(yīng)式模板并不是一個(gè)一站式的解決方案。設(shè)計(jì)必須根據(jù)不同的屏幕尺寸進(jìn)行調(diào)整。

很多時(shí)候，細(xì)節(jié)往往最容易被忽視。尺寸太小或圖像尺寸大小的響應(yīng)，以及與移動(dòng)設(shè)備不同縱橫比的比例。這些小細(xì)節(jié)會(huì)嚴(yán)重影響用戶(hù)。

解決辦法：花些時(shí)間在你的移動(dòng)端的設(shè)計(jì)上。注意那些看起來(lái)不合適的細(xì)節(jié)，檢查文本大小、圖像、加載時(shí)間、按鈕位置，并進(jìn)行必要的調(diào)整，以提供無(wú)縫的體驗(yàn)。

正確示范：And Co

5.“瘋狂”的顏色

一個(gè)無(wú)聊的設(shè)計(jì)師會(huì)創(chuàng)造一個(gè)脫節(jié)的設(shè)計(jì)。其中最常見(jiàn)的一種表現(xiàn)形式是使用瘋狂的色彩或缺乏固定的調(diào)色板。

太多的顏色會(huì)讓人分心，而且經(jīng)常給人一種業(yè)余的感覺(jué)。除非你的品牌指導(dǎo)方針要求使用這種配色方案，否則不要使用它(不過(guò)，如果你的品牌有這樣的指導(dǎo)方針，我想對(duì)于方針中的這一條，你可能需要重新考慮一下了)。

解決辦法：創(chuàng)建一個(gè)統(tǒng)一的調(diào)色板。從一個(gè)主色開(kāi)始，并使用一個(gè)或兩個(gè)輔助顏色。如果你需要更多的差異，請(qǐng)使用該調(diào)色板中的色彩的不同混合(并為這些內(nèi)容創(chuàng)建規(guī)則)。不要添加更多的顏色。

正確示范：Rush Flyer Printing

6.沒(méi)有用戶(hù)可以參與的操作

想象一下，你登入到一個(gè)在視覺(jué)上你很滿(mǎn)意的網(wǎng)站上，但卻不知道下一步該做什么。滾動(dòng)嗎？還是點(diǎn)擊？是否有更進(jìn)一步的操作內(nèi)容呢？

應(yīng)該有。

一個(gè)好的網(wǎng)站設(shè)計(jì)是一個(gè)由頁(yè)面到頁(yè)面之間的連續(xù)的動(dòng)作、交互和移動(dòng)的過(guò)程。目標(biāo)是讓訪問(wèn)者盡可能多地在路徑上與期望的操作聯(lián)系在一起。

解決辦法：設(shè)計(jì)中的每一頁(yè)都應(yīng)該包含一個(gè)動(dòng)作的調(diào)用。用戶(hù)應(yīng)該確切地知道每個(gè)頁(yè)面的目標(biāo)是什么，是希望點(diǎn)擊按鈕？填寫(xiě)表單？玩游戲或者購(gòu)買(mǎi)產(chǎn)品？設(shè)計(jì)結(jié)構(gòu)應(yīng)該包括大膽的用戶(hù)界面元素，以鼓勵(lì)點(diǎn)擊按鈕到可操作的指令。

正確示范：Vinebox

7.濫用趨勢(shì)

不要過(guò)度使用你認(rèn)為超酷的元素或正流行的設(shè)計(jì)趨勢(shì)。

如果你有一個(gè)剛好很符合情景或內(nèi)容的插圖的話(huà)，你可以使用它，并使用強(qiáng)調(diào)的設(shè)計(jì)技巧來(lái)使它更具有對(duì)比，但不要把它和其他的圖像或插圖搞得亂七八糟。

同樣的，圖標(biāo)或者任何其他的技巧在吸引用戶(hù)并讓他們產(chǎn)生需求心理的同時(shí)，如果沒(méi)有把握住度的話(huà)，可能會(huì)給他們?cè)斐梢欢ǖ睦_或壓力。這聽(tīng)起來(lái)很簡(jiǎn)單，但實(shí)際上卻很難(試想一下,你買(mǎi)了一個(gè)相關(guān)的圖標(biāo)集，感覺(jué)你需要用到里面所有的圖標(biāo)你才對(duì)得起你花出去的這個(gè)錢(qián))。

解決辦法：采用少即是多策略。只使用可以增強(qiáng)內(nèi)容的元素。針對(duì)當(dāng)前你所做的網(wǎng)站設(shè)計(jì)，想象從每一頁(yè)中拿走一個(gè)元素，這個(gè)設(shè)計(jì)會(huì)更好嗎？

正確示范：Art Lovers Australia

總結(jié)

每個(gè)設(shè)計(jì)師或多或少的都會(huì)犯一些設(shè)計(jì)錯(cuò)誤。但你能找出問(wèn)題并恢復(fù)嗎？

你應(yīng)該從認(rèn)識(shí)錯(cuò)誤和改正錯(cuò)誤的方法開(kāi)始，在這個(gè)方向上有一個(gè)好的開(kāi)始。當(dāng)你犯了一個(gè)設(shè)計(jì)錯(cuò)誤，調(diào)整并繼續(xù)前進(jìn)，不要感到不好意思。