當前位置:才華齋>設計>網頁設計>

移動端網頁介面設計技巧

網頁設計 閱讀(3.2W)

網頁設計的工作目標,是通過使用更合理的顏色、字型、圖片、樣式進行頁面設計美化,在功能限定的情況下,儘可能給予使用者完美的視覺體驗。下面小編來給大家分享移動端網頁介面設計技巧,希望對大家有幫助!

移動端網頁介面設計技巧

1. 讓他可讀性高

無論如何你的網站上的文字必須使人容易閱讀。如果一個網站的文字閱讀起來很有挑戰,使用者很顯然不會去看它,這意味著你將失去潛在的客戶。在移動端螢幕變小,還有各種反光和倒影會讓文字更難讀。移動端文字有它固有的標準(如:一般在2×的設計稿中文字最小可讀是24PX),文字不能過於單薄也不能有太多色彩,所有的“手段”都必需使文字更加容易閱讀。

2. 建立視覺層次

訪問者一般用快速掃描的方式檢視你的網站。在視覺設計上用一些技巧告訴使用者那些文字是最重要的,他們應該集中注意力看。

你可以突出你的網站優勢,因而讓使用者去關注你希望他們關注的'內容上。那怕是在移動端,使用者再如何快速的掃描資訊,也不致於忽略關鍵內容,一旦產生興趣,他們就能成為潛在客戶,產生購買、成為會員、或者你會收穫更多。

 3. 考慮使用者

想想使用者使用網站的場景,您的網頁設計元素應該讓他們感到溫馨。

如果他們習慣了網站上使用那些現代而精緻的字型,如果突然出現其他字型,他們會覺得蹩腳或不知所措。

你的網站的字型選擇應該有一個基調,讓訪問者舒適,並熟悉。

 4. 對比的創意

在平面設計中 玩對比已經是一種常見的方式。您必需使用對比色,來增加可讀性。如果文字的色彩很重,那麼配色淺色的背景會更加易讀,背景和字型色彩過於相似會難以閱讀,或者背景過於花哨也會顯得閱讀困難和檔次低。

也可以在排版中用文字玩對比(如粗細對比、大小對比和疏密對比等),如果所有的文字都很相似,你的作品將失去視覺層次,並顯得很平庸。

5. 使用同一套風格的字型去設計

網頁設計中字型的選擇是一件困難的事情,那麼多的字型可選,會讓人困惑。

最好的組合方式是使用同一個系列的字型,或者是由同一個設計師設計的字型。

在一些情況下,字型並沒有粗體和多個字型樣式供我們使用,這個時候你可以找找同一個設計師做的字型,它們可能擁有相似的特性,讓你的設計顯得更加“和諧”。

 6. 限制字型的種類

不管你如何使用字型設計和排版,有一條不變的法則,不要使用太多字型,專家建議使用2到3種適宜。

雖然這條建議非常好,但是也不是絕對,一些情況下,多種字型也能做出特殊效果。但是大多數情況下,過多的字型意味著缺乏設計和亂。

讓網站呼叫系統字型不僅僅影響網站的視覺外觀而且會對WEB頁面的效能有巨大影響,英文最好使用woff (Web Open Font Format),可惜中文由於字型數量大導致檔案體積過大,不適合做woff。

字型太多 = 較慢的載入時間,一個網站載入時間過長則意味著使用者的流逝。

 7. 不要忘記測試體驗一下

如果你不去實踐,任何的規則和理論都是沒有意義的。

用各種移動裝置去試試你的網頁,看看文字閱讀是否流程,在小螢幕可讀性還是否OK。什麼樣的設計概念都是用來打破的,一旦你運用到實踐中,可能你就需要有調整,以便於獲取最佳效果。