青于藍

您現在的位置是:首頁 > 視頻教程 > 前端設計

前端設計

別讓這些鬧心的套路,毀了你的網頁設計

2019-05-08前端設計
無限滾動的出現,終于解決了移動端上查看繁復的分類頁的問題。不過與此同時,無限滾動的設計,還為我們創造了不少從未遇到的新問題。舉個例子,當你要訪問一個重要的頁面,而它正好在長滾動頁面的底部,撇開加載頁面的時間和流量不談,滾到底部去找就已經是一個很頭疼的事情了。
網頁設計和做人一樣,需要少一些套路,多一些真誠。那么下面就為大家揭穿那些看似好用,但用戶體驗并不好的設計模式。另外再附上解決辦法,避免網頁設計中出現這些問題。

1、色彩種類運用過多
很多站長為了讓自己的網站更有吸引力,往往會給網站增添一些絢麗的顏色,加入大量色彩鮮艷的文字與邊框,而這些顏色的運用與圖片內容并不協調。降低了網站內容的可讀性。所以如何更好的把握網站<訪問者的喜好,為用戶提供一個可讀性更強的網站?這其中顏色就起到了相當大的作用。

解決辦法:最好的辦法是使用最多三種主色調與素雅的背景。
1、推薦給大家兩篇關于顏色搭配的文章《6條網頁設計配色原則,讓你秒變配色高手》以及《Web Color Design——設計師談網頁配色藝術
2、如果你還在為獲取web顏色而煩惱的話,建議你使用Color Scheme Designer取色工具,以不同的模式,可以讓你一下獲取相近的四個顏色。



2、字體大小存在問題
這類問題往往存在多種表現形式,包括字體不足12號使得用戶無法看清甚至點不到后退按鈕。很多網頁的上的字體都是正常大小,對我們來說剛好,但是父母來說網頁上的字就會偏小了。

解決辦法:一般中文的字體大小是12px或者14px。隨著顯示器分辨率不斷提高,12px的文字在大于1440*900的顯示器里看起來會顯得比較小,閱讀起來不是很容易,所以現在網頁設計里面用12px的已經比較少了,特別是文章正文部分,普遍都會用14px。

對于font-family,一般來說14px及以下大小的文字,應當設置為宋體,當然也可以設置為微軟雅黑。不過在XP下默認是沒有雅黑字體的,所以在css里面可以這樣設置字體: font-family:"Microsoft Yahei",simSun,Arial; 把幾個字體用逗號隔開,如果系統沒有第一種字體,就用第二種,如果沒有第二種就用第三種,以此類推。 對于大于14px的文字,特別是大于16px的文字,宋體看起來就比較丑陋了,所以建議是用黑體或者微軟雅黑,看起來回舒服一些。

3、過度使用GIF、動畫與音效

在某些情況下,GIF動畫非常有趣;動畫能夠讓訪問者獲得更好的使用體驗;音效可能也有助于提升感受。但這些都只是點綴,切記不可畫蛇添足。GIF動畫過多會造成一種庸俗而幼稚的氛圍,而大家對于音效以及音樂的取向也有所不同。有時,我們精心設計,卻難以實現效果。

解決辦法:千萬別讓費盡心力添加的動畫與音效成了刺眼又刺耳的垃圾元素。使用GIF動畫最好能免則免

4、超大的導航菜單



大型的導航菜單,對于包含大量不同子頁面的網站而言,似乎是一個很好的解決方案,然而實際情況并非如此。我們常見的網站設計錯誤就是在邊欄及子菜單中塞進長長的清單,超大的導航菜單對于絕大多數的普通用戶而言,看起來更像是迷宮。這看似滿足了全部用戶的需求,實則會分散用戶注意力,并讓用戶覺得不那么爽。如果導航、側欄與底欄無法協同工作,那么網站內容再好也將沒有意義。

解決辦法:信息分類整合其實是就是為了應對這種情況而存在的,將網站的導航內容規劃為不同的大分類,有了層級,用戶更容易篩選;又或者你可以將導航設計成為更為有趣的圖文式鏈接,讓它看起來不那么枯燥,也不失為一個可取的方案。永遠不要低估在屏幕上留白的重要性,因為其是創造平衡美感的重要基礎。

5、乏味無趣的加載頁面


隨著技術的進步,時間對于人們來說越來越寶貴,為了一個20M的網頁在瀏覽器前靜靜坐上1分鐘等待加載,那大多數用戶都會有關掉它的沖動,因為我們會在這個過程中無數次懷疑這個頁面是不是卡住了。如今的網站加載需要的是速度和效率,這符合當前的真實用戶需求。給用戶提供即時的位置、時間和響應對一個優秀的產品來說很重要。

解決辦法:

如果你的網站在加載速度上有問題,首先應該加載頁面中較輕的元素,以及整個框架,然后使用加載器將較大和較重的元素逐步填充進去。這樣一來,用戶就不會覺得頁面卡在那兒,而是在逐步加載了。

緩沖應該盡量避免,如果它必須存在,那就應該有趣一點。加載頁面可以是一個加載進度條,一個為浪費用戶等待時間的道歉或者是配有文案的簡單動畫。

6、設計臃腫,內容雜亂

不斷增加的功能會導致需求和交付之間的延遲,這會讓設計逐漸變得臃腫。將各類新聞、鏈接以及圖片塞進同一頁面只會使其顯得雜亂不堪,導致用戶難以閱讀及導航。

解決辦法:堅持增加必要且有價值的功能,盡量避免內容混亂多余。

7、對移動設備不夠友好

智能手機已經成為人們在互聯網上獲取內容的最佳途徑。大家的多數出站流量很可能都指向智能手機或者平板電腦。如果各網頁沒有針對移動設備進行優化,那么可能會面對難以進行正常訪問等問題。

解決辦法:讓你的網頁代碼適應各種手機、平板等不同分辨率大小

8、無限滾動


無限滾動的出現,終于解決了移動端上查看繁復的分類頁的問題。不過與此同時,無限滾動的設計,還為我們創造了不少從未遇到的新問題。舉個例子,當你要訪問一個重要的頁面,而它正好在長滾動頁面的底部,撇開加載頁面的時間和流量不談,滾到底部去找就已經是一個很頭疼的事情了。

解決辦法:就像超大的導航菜單一樣,想要讓它發揮作用一樣有合理的解決方案。將傳統的移動端頁面和無限滾動兩種模式結合起來使用,讓用戶自己來選擇更適合自己的模式,這有助于提升頁面的可訪問性。
 

文章評論

河北时时彩开奖