無論是那些想進入網頁設計殿堂的創意達人,還是需要理解以便管理網頁創意和開發流程的商務精英們,我們要聊一聊的不是怎樣用鑲褶的字體和絢爛的背景樣式搭建個人主頁,我們要探討的是為那些真正的客戶開發商業級別的網站和系統——無論是財富100強還是創業公司,都需要強大的網站和系統以擔當起全球商務中的主要功能。
我們在設計網站的過程中首先需要做的事情就是:建立團隊角色和分工
設計網站是一個浩大的工程,為此需要和整個團隊的人合作——有可能是公司的其它部門、供應商、或者獨立顧問:
面對早已車水馬龍的互聯網,你必須準備一套完整的商業策略和市場計劃才能夠應對。商務和市場人員,不論他們是你的同事還是你的客戶,都需要在早期的時候就介入到網站項目中來,他們將會承擔起下面這些工作。
(1) 制定網站目標和業務需求,你必須時刻將網站的商業目標作為優先考慮的事項。
(2) 定義目標用戶群。市場團隊成員是最接近終端用戶的人。他們應該提供一個網站主要服務的理想客戶的特征描述。
一旦客戶及公司決定開始做一個全新的網站項目,幾乎可以肯定的說,他們的眼界會越來越寬,直至超出預期。由于不了解網站開發的復雜程度,因此他們經常會提出一些不太現實的要求。而產品經理或項目經理的眾多職責當中,最重要的一項就是設定和控制客戶的預期,避免項目偏離軌道。因此產品經理或者項目經理會使用各種工具,例如Microsoft Project 以此來保證項目、團隊、客戶,以及產品預期都始終朝著正確的方向推進。
這個讓人印象深刻的頭銜所稱呼的人,他們每天的工作就是坐下來思考怎樣將整個網站的各個部分組織到一起,以及用戶如何從一個頁面導航到下一個頁面。這個角色也通常由產品經理和項目經理擔任,因為他們是最了解需求的人。信息架構師同時還會承擔起設計人物角色——以及目標用戶的個人檔案——以及在開發流程后期組織用戶測試的工作。信息架構師他們會分析頁面上的每個細節,然后繪制一系列用來表現網站各個主要頁面內容和導航元素的線框圖。線框圖這個說法來源于三維建模當中一項傳統的技術,他的意思是在進行渲染之前,先用鐵絲網一樣的線條在屏幕上粗略地畫出模型的基本形狀。這個概念后來被網站設計行業所吸收,用來代指在視覺設計階段之前那些圖表樣式的頁面原型,這就是是我們常說的網站的原型圖。這是在開始進行視覺設計之前關鍵的第一步。
用站點地圖和線框圖把網站的底層結構定義好之后,接下來就需要視覺設計師將公司的品牌形象和風格加以泛化,并應用到網站的外觀和體驗當中。視覺設計并非僅僅讓網站變得好看而已,它對一個網站的有效性甚至是可用性都起著至關重要的作用。一個優秀的視覺設計師不會只是簡單地給線框圖“上色”。他會重新組織頁面元素,調整元素的位置及尺寸,依照專業平面設計中關于色彩、表單、一致性以及布局方面的原則,突出導航模塊及重要內容,并明確地向用戶指明應該如何在各個頁面上進行交互。
前端開發人員負責將網站頁面上的元素以HMTL(Hyper Text Markup Language,超文本標記語言)以及CSS(Cascading Style Sheets,層級樣式表)的方式組裝起來。開發一個網站的前端(也就是你我瀏覽一個網站是所看到的東西)是一門藝術,因為有非常非常多的瀏覽器和系統環境需要考慮。
非常遺憾的是,盡管W3C(World Wide Web Consortium,萬維網聯盟 www.w3.org)制定了Web標準,卻沒有任何兩個瀏覽器對HTML和CSS的解析是一致的,而且瀏覽器所運行的平臺不同讓這個問題變得更加復雜——Mac,PC,智能手機,還有各式各樣的移動設備。前端人員需要根據不同瀏覽器的解析方式加入一些冗余代碼,只有這樣才能幫助網站實現在不同設備及計算機上都能夠正確顯示的效果。要知道這是一個相當苛刻的要求。
如今的網站項目如果沒有程序團隊的參與是不可能完成的。不論你的網站是一個電子商務網站還是社交網站,這些家伙都能將網站變成一個強大的工具,賦予網站無窮的能量。
相信你平時上網的時候一定已經注意到了,每個網站看上去都有好幾百個頁面。然而,如果看得更深入一點,你會發現這些網站其實是由數據量相對較少的模板構成的。其實對于任何網站,基本只需要5-20個模板頁面就足以支撐起整個網站。而其中的奧秘就是,這些模板文件其實是與存放著網站所有內容的數據庫相連的。這樣的網站在業內被稱為動態網站,這個是因為單個頁面模板可以根據用戶的實際操作,動態地進行配置,顯示出當前所需要的特定內容。
除了使用像PHP(Hypertext Preprocessor,超文本預處理器)或者ASP(Active Server Pages,動態服務器頁面)這樣的腳本語言開發網頁模板外,程序員們還需要創建一個線上數據庫來存儲模板需要的所有信息。建立數據庫是一個復雜的過程,多數情況下,你都會需要一個專業的數據庫開發人員來完成這項任務。
現在我們已經對將要共事的不同類型的專業人士有了一個初步的了解,接下來是時候到產品設計開發中了。
下一章我們將探討網站設計過程中的第二件事情——從概念到執行。