在生活中,擁有目標是非常重要的。特別對於網站設計而言,因為沒有目標就沒有動力,更無法衡量你的成功與否。 目標有助於設計師專注於重要的事情,把握設計方案的走向。目標能幫助設計者設計出令人眼前一亮的網站。
設計任何一個網站,過程都是大同小異的:我完成了一份設計稿,然後把它交給客戶。雖然在一開始,我有我的創意,客戶有客戶的需求,但是我知道我會在最後交出一份令人滿意的答卷。 之後的步驟大徑相同,但每個網站都會因面向的群體不同、定位不同、風格不同而各自產生某些不同的步驟。有時我需要手繪,有時我又必須利用PS、AI等軟體的強大功能。 儘管不同專案的過程可以有所差異,但至關重要的是做一個網站一定會確立一個目標,無論你把它寫下來也好記在心裡也罷,你的設計必須把這一目標體現出來。
我在以下列出的5個目標,是在每一次開始網頁設計時都必須思考的。
1. 力求使用者友好和美觀
良好的使用者介面往往是建立在犧牲掉一個優秀設計的基礎上,然而這兩者同等重要,應該讓他們和平相處。一個設計良好的網站可以幫助使用者輕鬆訪問。網站中的每個元素都應該在客戶習慣的位置,否則他們的存在就必須有特定含義,而設計師必須對使用者進行引導。 例如,導航會放在頁面頂部不是因為它放在那裡比較好看,而是使用者不會拖動滾動條到處找它。 如果你一定要讓使用者拖動滾動條去找導航,就給他們一個理由,比如一些更容易被發現的引導使用者向下看的設計。
該網站是在奧巴馬2008年11月就職時改版的。改版前,網站只專注於提供資訊,卻沒有考慮如何把組織資訊和提高可讀性。 改版後的網站力求使用者友好與美觀,體現了設計對於可用性的專注。以一個柔和的漸變與經典西方建築的圖案為背景,塑造出一個更舒適更賦有現代感的外觀。新導航與資訊的合理組織使使用者更快速、更有效的獲取所需。寬敞的佈局,也同樣是對使用者瀏覽該網站有利的因素。不需要的東西全都去掉,只留下對使用者最重要的部分。
2. 明確目標使用者
我見過很多網站,看上去很華麗卻不適用於它的目標群體。 對於設計工作室或者音樂人來說,一個復古的網站搭配時尚的色彩會是很棒的結合,您的顧客也樂於見到。但這樣的網站並不適合以專業人士和企業使用者為主要群體的律師事務所網站。對於這點,您的客戶具有良好的洞察力,因為他們的工作就是與這次的目標群體打交道。在你做研究的時候看看跟你同型別的公司都在做什麼,你不必做相同的事情,但是網站給人的感受必須的類似的。
該網站是一個很好的例子,出色的設計完全符合目標使用者的口味。網站用柔和的漸變、大尺寸的圖片展現了乾淨、簡約之美。字型非常重要,蘋果網站在標題、字號、位置上都精心考量過。現代的風格精確定位於年輕的偏重技術的使用者。該網站也並沒有嚴肅的那麼徹底,層層細節中不斷滲透出輕鬆的元素,這點也正中年輕白領的下懷。該設計也同樣符合他們產品外觀的特點–時尚、有圓角而整潔的組合。以上幾點都令使用者感到舒適,除此之外,還會產生巨大的吸引力,帶動使用者去看他們旗下所有品牌的產品。
3. 讓使用者介面自由流暢,讓使用者能快速高效地找到他們需要的資訊
良好的導航是優秀網站的關鍵。實現做好網站地圖有助於分配頁面跳轉的去向以及哪些模組應該放在一起。許多網站的導航很繁瑣,是因為他們根本沒有計劃過,哪些資訊放在哪裡最合適。您需要儘量壓縮整個頁面的容量,而讓重要的資訊所佔比重最大化。不用把所有相關資訊都要放在網頁上,因為並不是每個使用者都有耐心去閱讀。精簡導航,確定什麼是最重要的,丟掉其餘的。(注:關於網頁導航,請參見伯樂線上的這篇《每位網頁設計師新手都應知道的10件事》中的第三點。)
案例:http://www.mediatemple.net/
該網站風格偏向沉穩,暗色調的漸變搭配倒影呈現出光滑的質感,突出了高科技的重點。簡潔易用的主導航以及前端有標示的二級導航,都讓使用者很輕鬆就找到所需資訊。 網站的整潔清晰,寬屏的設計讓視野更加開闊,十分有利於瀏覽和閱讀。 點選網頁上的介紹後,明顯的“檢視詳情”的按鈕引導使用者深入網站,最終找到他們的目標網頁,即網站希望使用者到達的網頁。 匹配的按鈕和有效地知道在整個過程中給予使用者有效幫助。
4. 給客戶他們想要的以及需要的
正如眾多設計師所知,客戶往往認為他們才是最清楚的。一般而言,他們肯定比你更瞭解自己的公司,所以有關客戶和產品的描述得聽他們的,因為這是在他們的領域。 然而,對於如何把資訊組織的更加實用以及網頁使用者有何特點,他們可能並不瞭解。因此某些重要的事項你必須為你的客戶講解並讓他們充分的理解–為什麼他們不需要一些看上去很“炫”的東西,例如做一個長達5分鐘的儘管看起來很絢麗的網站介紹。
該網站乾淨、簡約而富有現代感,加上在細節上出色的視覺效果,幫助使用者瀏覽網站。 該網站的目標人群除了企業使用者外,也包括對“手機友好” 感興趣的技術開發人員和網頁設計師。 瀏覽該網站的使用者很可能本身就是網站方面的專家,而來的目的是為了進一步擴充自己的網站。 這個網站的設計,就是一切關於公司銷售移動服務的需求。 該介面簡潔、光滑,正如一個移動裝置給我們的感覺。 導航簡潔易用,在這個現代高科技的網站上清楚明瞭的給予使用者他們所需要的。
5. 用增加程式碼來擴充網站的功能
一個簡單的網站在運用了JS或PHP的一些功能後會變得強大起來。 使用者會享受這些附加功能,設計師也有機會做一個新的嘗試。既然有這麼的技能可以學並植入到網站中,為何不針對每項功能都嘗試一個新的頁面,在設計上也尋找新的突破呢?嘗試一個新的JS教程或一個有趣的PHP指令碼。每當你坐下來設計一個頁面的時候都有成推的東西要學,只要你在做每個網站的時候多學一樣東西,試想一年後你會有多少成長呢。
案例:http://www.authenticjobs.com/
該網站在細節的處理方面做的非常出色,表現在加強了它的使用性和功能性。網站原本非常基本、簡單,但一些JS的運用大大提升了網站的價值,而且讓使用者的使用更生動有趣。 你可以改變工作型別,新增或刪減類別,以便在你點選按鈕時,在他們的工作清單中過濾資訊,讓你在更短的時間裡,找到更精確的結果。這一類的細節,是這個網站的亮點。
總結:確立目標的確是作為一個網頁設計師提升設計水平、前端技巧的重要組成部分。你不可能沒有目標就能提升技巧,並讓你的客戶眼前一亮。每當你開始一個新的頁面之前,思考一下你希望完成一個怎樣的作品。你的目的不是要追求“完美”,而是要最求“優秀”,而且不要放過任何一次機會。
原文:webdesignledger
譯文:Lu7inda