網頁設計常見錯誤及解決辦法
大部分設計師不可避免的會接觸到移動UI設計以外的內容,那就是網頁設計。那網頁設計裡有哪些套路捏?咱們往下看。
1、色彩種類運用過多
為了讓自己的網站表現得熱情而有吸引力,很多朋友非常極端地向其中加入大量色彩鮮豔的文字與邊框,而這些顏色的運用與圖片內容並不協調。這顯然有損訪客對核心內容的關注。
解決辦法
最好的辦法是使用最多三種主色調與素雅的背景。如果大家決定選擇紋理背景,請確保其具體取色不會像霓虹燈般銳利刺眼。
2、字型大小存在問題
這類問題往往存在多種表現形式,包括字型不足12號使得使用者無法看清甚至點不到後退按鈕。
解決辦法
要解決這些難題,最重要的是理解客戶需要——年紀超過40歲的群體往往更喜歡大字型。年紀更大的使用者甚至只能看得清14號以上的字型。
主題文字還應被拆分成更易於管理的區塊,但卻又不能破壞其連貫性。保證資訊的易讀性與快速獲取性是我們的核心設計原則之一。當需要提供大量文字內容時,可以考慮將其劃分成多個不同頁面以簡化內容管理。
3、過度使用GIF、動畫與音效
在某些情況下,GIF動畫非常有趣;動畫能夠讓訪問者獲得更好的使用體驗;音效可能也有助於提升感受。但這些都只是點綴,切記不可畫蛇添足。GIF動畫過多會造成一種庸俗而幼稚的氛圍,而大家對於音效以及音樂的取向也有所不同。有時,我們精心設計,卻難以實現效果。
解決辦法
千萬別讓費盡心力新增的動畫與音效成了刺眼又刺耳的垃圾元素。使用GIF動畫最好能免則免,企業的官方網站絕對不要使用。
4、超大的導航選單
大型的導航選單,對於包含大量不同子頁面的網站而言,似乎是一個很好的解決方案,然而實際情況並非如此。我們常見的網站設計錯誤就是在邊欄及子選單中塞進長長的清單,超大的導航選單對於絕大多數的普通使用者而言,看起來更像是迷宮。這看似滿足了全部使用者的需求,實則會分散使用者注意力,並讓使用者覺得不那麼爽。如果導航、側欄與底欄無法協同工作,那麼網站內容再好也將沒有意義。
解決辦法
資訊分類整合其實是就是為了應對這種情況而存在的,將網站的導航內容規劃為不同的大分類,有了層級,使用者更容易篩選;又或者你可以將導航設計成為更為有趣的圖文式連結,讓它看起來不那麼枯燥,也不失為一個可取的方案。永遠不要低估在螢幕上留白的重要性,因為其是創造平衡美感的重要基礎。
5、乏味無趣的載入頁面
隨著技術的進步,時間對於人們來說越來越寶貴,為了一個20M的網頁在瀏覽器前靜靜坐上1分鐘等待載入,那大多數使用者都會有關掉它的衝動,因為我們會在這個過程中無數次懷疑這個頁面是不是卡住了。如今的網站載入需要的是速度和效率,這符合當前的真實使用者需求。給使用者提供即時的位置、時間和響應對一個優秀的產品來說很重要。
解決辦法
如果你的網站在載入速度上有問題,首先應該載入頁面中較輕的元素,以及整個框架,然後使用載入器將較大和較重的元素逐步填充進去。這樣一來,使用者就不會覺得頁面卡在那兒,而是在逐步載入了。
緩衝應該儘量避免,如果它必須存在,那就應該有趣一點。載入頁面可以是一個載入進度條,一個為浪費使用者等待時間的道歉或者是配有文案的簡單動畫。
6、設計臃腫,內容雜亂
不斷增加的功能會導致需求和交付之間的延遲,這會讓設計逐漸變得臃腫。將各類新聞、連結以及圖片塞進同一頁面只會使其顯得雜亂不堪,導致使用者難以閱讀及導航。
解決辦法
產品釋出上線後能夠覆蓋使用者最常見的.使用情形並提供值得信賴的使用價值;考慮使用者的使用習慣,使你的設計能夠讓使用者集中注意力。堅持增加必要且有價值的功能,儘量避免內容混亂多餘。產品設計的流程應該是:發散,優化,迭代和提煉,直到你們的產品或服務可以提供一個優質的解決方案。
7、對移動裝置不夠友好
智慧手機已經成為人們在網際網路上獲取內容的最佳途徑。大家的多數出站流量很可能都指向智慧手機或者平板電腦。如果各網頁沒有針對移動裝置進行優化,那麼人們可能面對難以進行訪問或者載入時間過長等問題。
解決辦法
目前市面上有著大量免費的應用與外掛能夠幫助我們解決這類難題,而針對移動端擁有出色優化效果的一大例項就是MailChimp網站。
8、複雜的註冊流程
網站構建需要投入大量精力,而其最終目的在於吸引潛在群體並宣傳或者表達自己的產品或觀點,並通過重複訪問帶來收益。在設計網站時,我們往往只考慮自己的個人品味——但正確的作法應該是立足於目標受眾的需要與特點。
解決辦法
大家應當儘可能簡化註冊流程,因為多數使用者對產品或者服務的註冊機制並不感興趣。如果需要填寫的資訊太多或者由於不支援鍵盤而導致流程難於操作,使用者會很快選擇放棄。
9、無限滾動
無限滾動的出現,終於解決了移動端上檢視繁複的分類頁的問題。不過與此同時,無限滾動的設計,還為我們創造了不少從未遇到的新問題。舉個例子,當你要訪問一個重要的頁面,而它正好在長滾動頁面的底部,撇開載入頁面的時間和流量不談,滾到底部去找就已經是一個很蛋疼的事情了。
解決辦法
就像超大的導航選單一樣,想要讓它發揮作用一樣有合理的解決方案。將傳統的移動端頁面和無限滾動兩種模式結合起來使用,讓使用者自己來選擇更適合自己的模式,這有助於提升頁面的可訪問性。
-
製作網頁,dreamweaver的基本步驟
網頁設計的目的就是產生網站。簡單的資訊如文字,圖片(GIFs,JPEGs,PNGs)和表格,都可以通過使超檔案標示語言、可擴充套件超文字標記語言等標示語言放置到網站頁面上。以下是小編為大家搜尋整理的Dreamweaver製作網頁的基本步驟,歡迎閱讀!更多精彩內容請及時關注我們考試...
-
講解HTML中iframe和frame的區別
不知道你在專案中用過frameset屬性沒有,frameset這個屬性是在去年我在一個線上客服系統製作中用過,因為客服系統要有固定的佈局,上面一塊,下面一塊等等,當時就是用的frameset和frame。在我用完了這些屬性之後,我才明白了iframe和frame的`區別。因為在這之前,我專案中...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裡寫入DOM元素。今天這章我們就講這兩個應用(一)對html裡現有的DOM元素進行操作。我上面說了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想說說javascript中函式的隱含引數:argumentsarguments該物件代表正在執行的函式和呼叫它的函式的引數。[function.]arguments[n]引數function:選項。當前正在執行的Function物件的名字。n:選項。要傳遞給Function物件的從0開始的引數值...