設計一個優秀的網站看起來是個巨大的挑戰,但如果你看來以下幾條原則,你會發現網頁設計過程是有趣而且愉快的。我們列出的是網頁設計中最基本的原則,還有更多更好的方法可以幫助你設計更好的網站。
你可以設計世界上最好的網站,甚至無人超越,并使用的豐富的色彩,大膽而藝術化的文字。但不幸的是,你的客戶想要的是一個以橙色和粉色為基礎色的網站,那么,縱然你是最好的設計師,此刻你也被淘汰了??蛻魮碛袡嗔褪沁x擇自己喜歡的作品。
1、研究客戶的企業形象以及客戶告訴你的他們欣賞的網站。這些不僅會提示你客戶喜歡什么,也會給你的設計提供一些獨特的思路。
2、如果你認為上面提到的橙色和粉色搭配的網站會極其難看,那么看一下國外某公司推動某一產品而設計的網站。沒有不可能,只是我們還沒想到!
不論客戶的網站是什么性質(信息性、商業性、娛樂性),他們網站建設的主要目的就是要讓別人看到他們的網站。作為網頁設計師,你需要做的重要工作之一就是要了解你設計的作品要給誰看,他們的鼠標會落在網頁的什么位置,以及他們怎樣才會記住這個網頁。
1、如果你認為“如果網頁美工很好,訪客自然會留下來”,那么你就錯了,并不是所有的網站都是房地產那樣展示形象。例如下面這個網站,設計簡潔、大氣,有大面積的白色空間,訪客打開網站后,目光自然就落在了中間作為重點的圖片上。
2、網站越大,內容越多,條理性越要清晰。例如下面這個網站,頁面信息繁多,廣告繁雜,顏色花哨,訪客很難在最短時間內找到自己想要的信息。
從上面兩個案例可以看出,訪客關心的重點不是網站的美工設計,他們更想要找到他們想要的信息。
你了解了客戶喜歡什么,訪客在尋找什么,現在你需要花時間將這些內容完美的表現到你的設計作品上。
首先,將圖片和文字內容按重要性、層次性設計到一個模板上,然后再在這個模板上創建元素。這些元素包括:
1、頭部(Header)。頭部一般是網站每個頁面出現的公共部分,包含了標志、網站名稱(企業名稱)、菜單按鈕以及網站細節的鏈接(例如:關于、聯系方式)。實踐證明,將菜單欄的第一個按鈕作為返回首頁的鏈接是一個很好的做法。
讓我們看看蘋果是怎么做的。
正如蘋果其他產品一樣,蘋果網站首頁保持了干凈、整潔的設計風格。注意菜單欄,每個按鈕都是按產品的邏輯順序排列的,同時加上了搜索按鈕,提升了用戶體驗,如果你的網站支持搜索,建議你加上搜索功能。下面,讓我們看看Ipad的著陸頁面(你當前瀏覽的頁面):
菜單欄中Ipad的按鈕變為暗色。
著陸頁面左上角變成了Ipad,同時右側出現新的菜單方便用戶對產品有更詳細的了解。如果你點擊這些子菜單,你會看到每一頁都提供新的主題和內容,但是布局和設計是相同的。
每點擊一個新的主菜單,二級菜單都是不同的,當然你也可以使用下面這種彈出菜單的樣式。這將很大程度上方便訪客的瀏覽。
2、側邊欄(Side bar)。側邊欄在很多網站上被使用,主要因為它會很大程度方便客戶的瀏覽。側邊欄是網頁上很重要的一個元素,需要精心設計,盡量直觀、避免不必要的混亂。
3、內容區(Body)。內容區域可以豐富多彩,但也是設計中變數最多的部分。例如,如果你正在設計一個電子商務網站,你可以將一個產品的信息放在內容區,同時又想展示其他20個正在銷售的產品。你所需要做的工作就是讓它們合理的結合在一起而視覺上顯得不雜亂。盡量使用相近的顏色、字體和界面元素會更好一些。
4、頁腳(Footer)。頁腳并不是每個網站都有的內容。頁腳往往是展示訪客經常瀏覽的內容或者提供網站的部分重點內容。下面就是一個頁腳的案例:
定位網站每一個網頁上相同地方的各種元素,如標題,側邊欄,標志,圖形和文字,它們會讓你的網站通暢和直觀。
每一網頁的頭部保持一致。無論你的網站內容本身有多少重復的元素,但必須確保每一頁的頂部是相同的。
網頁設計要有邏輯。在每一個頁面上的元素要按重要性或主題進行邏輯布局,網站的各個頁面也應該這樣做。
在網站結構一致的前提下,網頁的風格主題要和諧。
堅持使用兩個或三個主色調,并確保他們協調好。
避免使用太多的字體樣式或大小,如果你打算幾個交替,確保它們以同樣的方式出現在每一頁上。
使用層疊樣式表(CSS)來管理統一的風格,并使其更容易改變,而不必去到單獨管理整個網站上每一頁面的元素。
為了讓你的文字更容易閱讀,分解成較小的部分。
使用副標題和適當的間距分開內容的每個部分。
使用粗體或不同大小的字體顯示的主題的層次結構和重要性。
注重對文本的處理。不要使字體太小,擴大行距使大塊的文本更具可讀性。 大塊的文本將更難閱讀。
使用標準的HTML、標簽及功能和插件,讓網頁內容適用于每一個品牌或版本的瀏覽器。
盡管現代的瀏覽器和計算機可以處理復雜的圖像,但是如果你是用的圖片尺寸過大,一切都將變得不迅捷。對網頁上的內容進行優化,保持速度和質量的平衡。
確保每個鏈接都正確,而不是死鏈(鏈接無法打開),并確保圖片都正確顯示。
你需要目標受眾測試網頁的清晰度和易用性,然后反饋給你。
如果你還沒有這樣做,買一個域名、空間。定期檢查鏈接以確保它們仍然存在,并聽取網站訪問者的建議。