如何避免web設(shè)計(jì)中的錯(cuò)誤 web設(shè)計(jì)師的成長之路

  在web網(wǎng)站設(shè)計(jì)中我們只有經(jīng)歷的痛苦與錯(cuò)誤之后,才會得到進(jìn)步。不過在此之前,一些前輩的經(jīng)驗(yàn),也是可以避免我們在web網(wǎng)站設(shè)計(jì)的道路上避免設(shè)計(jì)上的錯(cuò)誤,成為一名合格的web設(shè)計(jì)工程師。創(chuàng)客學(xué)院web全棧開發(fā)講師今天給大家講一下:如何避免web設(shè)計(jì)中的錯(cuò)誤 web設(shè)計(jì)師的成長之路。

  如何避免web設(shè)計(jì)中的錯(cuò)誤

  如何避免web設(shè)計(jì)中的錯(cuò)誤 web設(shè)計(jì)師的成長之路

  1.錯(cuò)誤的顏色對比

  當(dāng)用戶訪問一個(gè)網(wǎng)站時(shí),他會做的第一件事就是掃描網(wǎng)站以得到網(wǎng)站的要點(diǎn),并看看網(wǎng)站是否可以解決他的問題。如果用戶無法立即找到正確的按鈕,選項(xiàng)或其他的導(dǎo)航形式,很大的可能是他不會再看,并最終離開頁面。這通常是由于不恰當(dāng)?shù)念伾珜Ρ人斐傻模瑢?dǎo)致用戶從直觀上錯(cuò)過了重要的內(nèi)容。

  顏色對比絕對是一個(gè)要做的重要決策,當(dāng)你試圖引導(dǎo)用戶從一個(gè)頁面到另一個(gè)頁面,或引發(fā)動作(Call to Action)的時(shí)候。確保網(wǎng)站上如CTAs這樣的按鈕,能夠顯眼。因?yàn)轱@眼就意味著用戶將能夠迅速找到它們,提高轉(zhuǎn)化率。至于顏色設(shè)計(jì)指南,可以看看來自于谷歌的這個(gè)詳細(xì)工作。它不僅從理論上幫助你,而且還提供了工具幫助你更輕松地完成工作。

  2.忽略圖標(biāo)

  用戶自己會閱讀文本的,你是這么認(rèn)為的吧?那么,為什么有些人會使用圖標(biāo)來代替文本?只提供文本不是更容易嗎?誠然,這可能會更容易,但它有吸引力嗎?大多數(shù)人的回答都會是,NO。純文本的界面通常不會那么美觀,而是會讓用戶覺得枯燥乏味……這就是圖標(biāo)變得必要的原因。并非所有的設(shè)計(jì)師都明白這一點(diǎn),所以他們往往忽略了圖表用來抓住用戶注意力的重要性。

  如果你用純文本編寫,并希望用戶堅(jiān)持并閱讀每一標(biāo)題,那么你可能會大失所望。但是,如果你添加圖標(biāo),那么用戶就能立即知道發(fā)生了什么,同時(shí)頁面不會純是文本而令人兩眼迷茫。所以,請記住要在導(dǎo)航和其他每個(gè)地方的選項(xiàng)旁邊添加小圖標(biāo),以幫助用戶快速識別。需要一些例子嗎?Awwwards收集了一些關(guān)于圖標(biāo)的超棒例子。

  3.內(nèi)容太多

  解釋概念主要有兩種方式:要么使用大量的詞語用實(shí)例和故事來表述氛圍和情景,要么就簡明扼要地直述要點(diǎn)。初次用戶可能不會對閱讀大量的內(nèi)容感興趣,可能只想盡可能快地接收信息。這是因?yàn)樵诘谝淮卧L問時(shí),他們大多會先進(jìn)行掃描,然后決定是否應(yīng)該繼續(xù)深入。你怎么能期望他們會在這種行為上消費(fèi)大量的內(nèi)容?

  要想更好和更容易地辦好這件事,標(biāo)題(尤其是第一頁的)應(yīng)該做成3-7個(gè)單詞的,如果超出這個(gè)長度,那么標(biāo)題就得是對用戶充滿誘惑的。如果你有更多要分享的話,標(biāo)題下面的解釋可以通過“Read More”按鈕包括一到兩行內(nèi)容。但是,要讓用戶自己決定要不要閱讀剩下的內(nèi)容。可以看看Lumosity是如何完美整合這一點(diǎn)的。

  4.不考慮一致性

  一致性對于一個(gè)偉大的網(wǎng)站設(shè)計(jì)是一個(gè)關(guān)鍵因素。很多設(shè)計(jì)師在鋪設(shè)內(nèi)容時(shí)會忽略一致性,忘記設(shè)計(jì)一致性的重要性。

  為臨近的相關(guān)信息片段保持一種類似的格式很重要,并且一致的顏色/模式/等可以幫助用戶創(chuàng)建那些在沒有連貫設(shè)計(jì)時(shí)迷失的連接。保持這些元素相一致是關(guān)鍵。每當(dāng)有指令說明的時(shí)候,任何CTAs,到下一頁的按鈕,或者起著類似作用的任何其他內(nèi)容,都應(yīng)該和整個(gè)網(wǎng)站設(shè)計(jì)保持一致,相同的字體和相同的字體大小,不論它們在網(wǎng)站的什么位置。

  5.沒有做好色彩平衡

  色彩平衡是另一個(gè)經(jīng)常被遺棄的重要問題。細(xì)心的色彩管理可以使得網(wǎng)站顯得清晰和有秩序。如果有太多類似的顏色,區(qū)分就變得很難,另一方面,強(qiáng)烈的顏色沖突會顯得雜亂和毫無吸引力。

  為了保證更佳的可讀性和總體可用性,顏色不應(yīng)該越界。在彼此之間應(yīng)該有一種顏色的和諧,這樣網(wǎng)站才不會顯得突兀和難看。無論是web設(shè)計(jì)還是經(jīng)典藝術(shù)設(shè)計(jì),關(guān)注色彩平衡對于整體外觀有很大的影響。對于初學(xué)者來說,你可以試試這個(gè)超快的顏色生成器:Coolor。

  6.不在意對齊

  如果你想要觀眾閱讀網(wǎng)頁上的大部分信息,那么你需要讓這些信息看起來有用且易消化。對齊在這個(gè)問題上起很大的作用。確定用戶的視角應(yīng)該從哪里開始是對齊的全部內(nèi)容。對齊能慰藉用戶的眼睛。

  網(wǎng)站上的內(nèi)容可以是居中對齊,也可以是左對齊。如果你選擇把內(nèi)容放在中間,那么在左右兩邊就要留出大量的負(fù)空間,否則用戶將很難消化內(nèi)容。另外,可視內(nèi)容,如果有的話,如果放在居中文本的遠(yuǎn)處會顯得無關(guān)。大多數(shù)優(yōu)秀的網(wǎng)站會選擇文本左對齊,因?yàn)樗7铝宋覀內(nèi)绾螌W(xué)習(xí)閱讀印刷文字的方式。網(wǎng)站上的一切內(nèi)容都需要對齊,網(wǎng)格可以幫助你實(shí)現(xiàn)這一點(diǎn)。可以閱讀Tuts+關(guān)于對齊和網(wǎng)格的這篇文章以了解更多信息。

  創(chuàng)客學(xué)院web培訓(xùn)開發(fā)講師提醒大家:如果你是一個(gè)新手設(shè)計(jì)師,并且犯過這些錯(cuò)誤,那么好好查看下你的設(shè)計(jì),看看有沒有可以修復(fù)的地方。一些曾經(jīng)似乎無法挽回的設(shè)計(jì)或許會因此而突然煥發(fā)生機(jī)。不要忘了,專業(yè)的web網(wǎng)站設(shè)計(jì)師曾經(jīng)也是初學(xué)者,他們之所以漸漸變得優(yōu)秀起來,是因?yàn)樗麄兛戏e極地嘗試?yán)斫庖恍┘?xì)微的事情,并且愿意去重新認(rèn)識他們先前忽略了的內(nèi)容。因此,從錯(cuò)誤中學(xué)習(xí)并立刻修改,創(chuàng)建出一個(gè)用戶友好的網(wǎng)站——這是提高設(shè)計(jì)技術(shù)的唯一途徑。



查看更多關(guān)于“web全棧開發(fā)培訓(xùn)”的相關(guān)資訊>>


the end

評論(0)