網頁設計中的規則和禁忌
網頁設計是一個棘手的話題。當你創建網站時你需要考慮很多事情。爲了簡化這個任務,我這裏準備了一個列表,每個網頁設計師在設計網頁時都應該考慮這些注意事項。好消息是,這都是一些簡單的設計原則。
讓我們開始吧!
應該做什麼:
1.不管設備如何,都應該提供相同的用戶體驗
用戶會使用不同的設備來訪問你的網站:他們可通過臺式電腦或筆記本電腦,平板電腦,手機,音樂播放器甚至手錶上訪問您的網站。UX設計很關鍵的一部分是要確保用戶應該具有類似的用戶體驗,不論他們是通過什麼來訪問你的網站,不論他們是使用什麼樣的設備。
如果用戶是通過手機訪問你的網站,他們應該能毫不費勁的找到他們需要的所有東西,就像他們在家裏通過桌面端查看你的網站一樣。
2.設計一個簡潔,易用的導航
導航是可用性的基石。請記住,這不關乎於一個網站設計的有多好,但必須確保用戶可通過自己的方式進行瀏覽。這就是爲什麼你的網站上的導航應該設計成這樣。
簡單(每個站點都應該有最簡單的結構)
簡潔(導航選項對訪客而言必須清楚易懂)
一致(主頁的導航系統應該在每個頁面上都一樣)
設計導航方式,儘可能減少點擊次數而幫助用戶到達他們想去的網頁。同時,應易於瀏覽並能輕易找到他們想去的地方。
3.更改已訪問鏈接的顏色
鏈接是導航過程中的關鍵因素。當已訪問的鏈接沒有改變顏色時,用戶可能會無意中重複訪問相同的頁面。
瞭解用戶已訪問過哪些頁面可以避免讓他無意中重複訪問相同的頁面。
4.輕鬆瀏覽你的頁面
當用戶訪問你的網站時,他們更有可能快速掃描屏幕,而不是閱讀頁面的所有內容。因此,如果訪問者想要查找內容或完成某項任務,他們將一直瀏覽直到找到他們需要的內容。而作爲設計師,你可以通過設計好的視覺層次結構來幫助他們。視覺層次結構是指以暗示重要性的方式安排或呈現元素(例如,他們的眼睛應該集中在拿了? 第一、第二等)
將屏幕標題,登錄表單,導航項目或其他重要內容等重要內容標記重點,以便訪問者可立即查看。
Basecamp使用的Z掃描模式
5.仔細檢查所有鏈接
當用戶點擊站點上的鏈接並收到提示404錯誤頁面時,用戶可能很容易變得沮喪。當訪問者正在搜索內容時,他們希望每個鏈接都可以將它們帶向所指的地方,而不是出現404錯誤的提示或者其他一些他們不想去的地方。
6.確保可點擊的元素對用戶顯而易見
一個物體的外觀可告知用戶如何使用它。視覺元素看起來像是鏈接或按鈕,但不可點擊(即,有下劃線的單詞沒有鏈接,具有文字動作的元素,但不是超鏈接)這樣很有可能會使用戶混淆。用戶需要知道頁面的哪些區域是純靜態內容,哪些區域是可點擊的'。
應讓用戶明白哪些是可點擊的元素
橙色的盒子是一個按鈕嗎?答案是:不。形狀和標籤使其看起來像一個按鈕,但它不是。
不應該做什麼:
1.讓你的訪客等待網頁加載
網頁用戶的注意力和耐心往往很差。根據NNGroup研究:
10秒是將用戶的注意力集中在此任務上的最低限度
當訪問者必須等待你的網站加載時,如果你的網站加載速度不夠快,他們會變得沮喪,並可能離開你的網站。如果加載時間過長,即使你有設計精美的加載指示器,也可能迫使用戶離開網站。
2.不要在新標籤頁中打開鏈接
這種粗魯的行爲會禁用Back按鈕,而這是用戶返回到以前的站點的常規方式。
3.讓促銷掩蓋內容
促銷和廣告可以掩蓋他們旁邊的內容,並使用戶更難完成任務。不要說任何看起來像廣告的東西通常會被用戶忽略(這種現象被稱爲旗幟盲點)
4.劫持滾動
劫持滾動是設計師和開發者通過操縱滾動條來使網站表現的不同。包括動畫效果,固定滾動點,甚至滾動條本身的重新設計。被劫持滾動是許多用戶最煩人的事情之一,因爲其不受用戶控制。當你設計網站或用戶界面時,你希望讓用戶通過網站或應用程序掌控其瀏覽速度和移動。
MacPro頁面使用一些令人煩惱的滾動效果。它使用單頁視差佈局,其中的點表示頁面的每個部分。
5.用聲音自動播放視頻
在後臺自動播放視頻,音樂或聲音會刺激用戶。這些元素應謹慎使用,只有在適當的時候和可預期的情況下才能使用。
Facebook視頻設置爲自動播放,但不會出現任何聲音,除非用戶有意圖以某種方式觀看視頻(例如通過視頻進行交流)。
6.爲了美而忽視可用性
站點或用戶界面的設計不應影響用戶在屏幕上閱讀內容的能力。重要的是要避免內容繁瑣,色彩不均勻,其會妨礙網站的可讀性或導致顏色對比度不足(例如下面的示例)。
字體的低對比度總是一個糟糕的做法。
7.使用閃爍的文字和廣告
閃爍的內容可能會觸發敏感個體的癲癇發作。它不僅可以引起癲癇發作,而且對於一般使用者來說,這可能讓人討厭或導致分心。
-
一年級教案設計
作爲一名辛苦耕耘的教育工作者,就難以避免地要準備教案,編寫教案有利於我們準確把握教材的重點與難點,進而選擇恰當的教學方法。那麼你有了解過教案嗎?下面是小編幫大家整理的一年級教案設計,歡迎閱讀與收藏。一年級教案設計1指導思想根據《語文課程標準》的要求,圍...
-
設計作文(優選5篇)
在學習、工作或生活中,大家一定都接觸過作文吧,寫作文是培養人們的觀察力、聯想力、想象力、思考力和記憶力的重要手段。你知道作文怎樣寫才規範嗎?以下是小編爲大家整理的設計作文5篇,希望對大家有所幫助。設計作文篇1教學目標:1、弄清什麼是作文的選材;2、掌握選材...
-
設計作文6篇【必備】
無論是身處學校還是步入社會,大家都經常接觸到作文吧,寫作文可以鍛鍊我們的獨處習慣,讓自己的心靜下來,思考自己未來的方向。一篇什麼樣的作文才能稱之爲優秀作文呢?下面是小編收集整理的設計作文6篇,僅供參考,大家一起來看看吧。設計作文篇1教學創意:運用符號法批改作...
-
[精]我是小小設計師作文5篇
在平日的學習、工作和生活裏,大家都寫過作文,肯定對各類作文都很熟悉吧,藉助作文人們可以反映客觀事物、表達思想感情、傳遞知識信息。作文的注意事項有許多,你確定會寫嗎?下面是小編收集整理的我是小小設計師作文5篇,僅供參考,歡迎大家閱讀。我是小小設計師作文篇1說...