您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

簡化你的網頁設計

 

本教程教你如何簡化網頁設計,以提高網頁設計的“效力”,同時節(jié)省設計和維護的時間。涉及到提高網頁內容的可讀性、簡化界面設計、優(yōu)化代碼、降低維護需求等。

 


在設計領域中,很多人都認同應該簡化設計,以便讓相應的工作更好發(fā)揮作用,設計只是增強視覺的手段。

隨著網站建設技術的發(fā)展,在網頁中實現(xiàn)復雜的功能不再是難事,網頁中功能越來愈多,因此要在用戶的瀏覽體驗和網頁設計的美觀性中取得一個平衡點就顯得非常重要。

網頁設計的簡化法

不同人對網頁設計簡化法會有不同的定義。一個簡單的定義是將復雜的東西濃縮簡化成簡單的東西,當然在簡化的同時,不能丟掉有價值的東西??偠灾?,如果你的網頁設計很臃腫龐大,最好去精簡它。

簡化網頁設計

在具體的網頁設計中,可能是將網站分成幾個部分,并使它們模塊化。將復雜的東西分成幾個模塊,可以方便地組織這些內容并使后期的維護工作更加輕松。

簡化網頁設計意味著精簡網頁,把網頁最重要的東西保留下來,這不僅方便用戶獲取最重要的內容,也可以讓我們清楚自身的產品,以便制定相應的計劃。在實踐中,這樣還節(jié)省了時間和金錢。

關于用戶體驗

我們會花很多時間去策劃網站相應功能,做出用戶需要或者可能需要的各種功能,但是有時候往往事與愿違,最終網頁設計變得臃腫龐大。

簡化網頁設計

網頁設計時,應該只提供給用戶最需要的功能,如果花很多時間在一些沒什么人用得到的功能、內容上,開發(fā)一些僅僅是潛在需要的功能,這樣用戶的體驗會很糟糕。

簡化網頁設計的方法

在網頁設計中,要簡化三個主要的地方

  1. 網頁內容
  2. 代碼
  3. 設計

簡化網頁設計

不論你在精簡網頁內容、代碼還是網頁的設計時,記住一個關鍵點:保留下來的東西一定要確保對用戶來說是最重要啊。

用戶不喜歡在瀏覽網頁中,被混淆或者感覺到對網頁失去控制。讓他們把更多的時間花在閱讀主要內容上,界面設計上要讓他們方便找到自己需要的東西。

網站的質量比數(shù)量更為重要,擁有100個功能還不如一兩個非常實用的功能。

1.簡化網頁內容

簡化網頁內容有很多方法,最簡單實用就是像用戶一樣去閱讀,減少字數(shù)、去掉不相關的內容、并刪掉一些專業(yè)術語和沒有什么價值的內容。

  • 追求網頁內容的質量而不是數(shù)量
  • 用簡潔明了的話去描述
  • 避免專業(yè)術語和技術性語言
  • 從用戶的角度來書寫內容
  • 適當使用一些圖片來減少文字數(shù)量
  • 使用標題來組織文字內容
  • 用列表方式(list)來使文字更容易閱讀

當然網頁的內容不僅僅包括文字,也包含圖像或者一些視覺效果的圖片。使用圖片更重要的是,這些圖片可以幫助你傳達相應信息,減少相應的文字描述,因此在網頁設計時,要適當精簡掉一些沒有實際內容、只是為了視覺美觀的圖片。

簡化網頁設計

2.簡化網頁代碼

簡化網頁的代碼涉及到了建設網站的技術問題,簡化代碼也可以提高網站的訪問速度。

簡化網頁代碼一方面是簡化代碼的書寫方式,這需要程序員良好的書寫習慣和清晰的思路。

另一方面是選擇相應的代碼,例如一個鼠標懸停的效果,如果可以用css來實現(xiàn),就沒有必要使用Flash或者Javascript。

  • 開發(fā)之前做好周密的計劃
  • 頻繁測試代碼并減少代碼的冗余
  • 選擇可以用最少代碼實現(xiàn)功能的方法
  • 花些時間做些測試實驗,看是否能精簡結構
  • 用精簡工具來減少代碼文件的尺寸
  • 如果可以盡量用原始代碼而非插件(如JS的jquery)

簡化網頁設計

3.簡化網頁設計

簡化網頁設計可以從網頁的簡潔性、可讀性和網頁要突出的重點來入手。

我們應該適當去掉一些沒有必要的設計元素,至少做到整個網頁設計不會去干擾用戶的閱讀。

  • 一般而言,如果你懷疑某些網頁上設計元素是否有必要,那你就可以去掉它。
  • 設計上,減少用戶找到需要的內容的鼠標移動和點擊
  • 留出一些空白,避免網頁設計過于臃腫
  • 不要使用一些不需要的底紋或者小組件
  • 去掉一些設計元素以精簡掉不相關的內容

簡化網頁設計

譯文鏈接:Reductionism in Web Design
[教程作者:admin]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.irelandcustomcontracting.com/tutorial/di1277.html
網頁設計案例分析:邊框的使用
2013年網頁體驗設計的四大趨勢分析
圖趣網微信
建議反饋
×