Google 所提出的「整體(tǐ)網頁設計(jì)」最近被越來(lái)越多(duō)地提起。對于設計(jì)師(shī)和(hé)開(kāi)發者而言，它所涉及到的內(nèi)容并沒有(yǒu)表面上(shàng)看起來(lái)那(nà)麽粗犷簡單。

用最簡單的方式來(lái)解釋，所謂的整體(tǐ)網頁設計(jì)是将整個(gè)項目視(shì)為(wèi)一個(gè)整體(tǐ)來(lái)審視(shì)，來(lái)看待和(hé)處理(lǐ)，深入理(lǐ)解和(hé)洞悉整體(tǐ)中每個(gè)環節之間(jiān)的關系，把控全程。如果視(shì)覺設計(jì)不理(lǐ)想，再好的內(nèi)容都無法脫穎而出，它們應當是一體(tǐ)的。同樣的，如果世界上(shàng)視(shì)覺設計(jì)最優秀的網頁卻缺少(shǎo)可(kě)用性，那(nà)麽它也難以在用戶面前立足。這些(xiē)都是沒有(yǒu)借助整體(tǐ)網頁設計(jì)的方法而出現的常見問題，也是絕大(dà)多(duō)數(shù)網頁設計(jì)項目所亟待解決的問題。

以下是「整體(tǐ)網頁設計(jì)」的工作(zuò)原理(lǐ)。

整體(tǐ)設計(jì)理(lǐ)念

整體(tǐ)網頁設計(jì)的核心是設計(jì)的過程。在借助整體(tǐ)網頁設計(jì)方法來(lái)推進項目的時(shí)候，設計(jì)和(hé)開(kāi)發團隊的執行(xíng)流程和(hé)之前可(kě)能會(huì)截然不同，不過在內(nèi)容和(hé)細節處還(hái)是有(yǒu)許多(duō)共通(tōng)之處的。

從設計(jì)師(shī)的角度上(shàng)來(lái)看，設計(jì)、技(jì)術(shù)、性能表現和(hé)業務影(yǐng)響是主要的影(yǐng)響因素。策劃和(hé)研究等階段通(tōng)常是由其他人(rén)來(lái)進行(xíng)，但(dàn)是如果項目是由一人(rén)負責那(nà)麽通(tōng)常也就得(de)由設計(jì)師(shī)一人(rén)包攬了。這些(xiē)環節還(hái)可(kě)以繼續往小(xiǎo)了分解：內(nèi)容和(hé)信息傳達，UI設計(jì)，UX設計(jì)，視(shì)覺設計(jì)，測試，培訓和(hé)反饋等等。

所有(yǒu)的這些(xiē)步驟看起來(lái)都不盡相同，具體(tǐ)執行(xíng)則取決于誰來(lái)規劃。WebdesignerDepot 曾經出過一個(gè)詳細的清單列表，其中包含了詳細的注意事項。其中有(yǒu)六個(gè)問題，在你(nǐ)做(zuò)任何決策的時(shí)候，最好先問問你(nǐ)自己這六個(gè)問題。

在網頁的設計(jì)和(hé)開(kāi)發過程中，前後因果關系通(tōng)常是非常明(míng)晰的。你(nǐ)所做(zuò)的每一個(gè)決策都會(huì)影(yǐng)響到你(nǐ)的用戶，你(nǐ)自己，你(nǐ)的同事或者員工，你(nǐ)的股東，以及一些(xiē)你(nǐ)甚至還(hái)沒考慮到的人(rén)。最終整個(gè)産品都會(huì)作(zuò)用于你(nǐ)的生(shēng)活，無論這種作(zuò)用是好還(hái)是壞。

規劃和(hé)研究

在網頁設計(jì)項目的規劃和(hé)研究階段，你(nǐ)應該做(zuò)三件事情：

确定項目的目标

定義項目的範疇

定義受衆和(hé)目标用戶的角色形象

這些(xiē)要素将決定了項目中各個(gè)環節要如何結合到一起，并且确定了各個(gè)部分之間(jiān)要如何推進。如果項目中的組件不符合目标或者超出了範圍，那(nà)麽就需要重新調整或者評估。

設計(jì)

設計(jì)階段通(tōng)常是整個(gè)設計(jì)項目當中最有(yǒu)趣的部分，設計(jì)師(shī)在這個(gè)環節通(tōng)過線框圖勾勒框架，填充內(nèi)容，并且最終定義視(shì)覺效果，慢慢将內(nèi)容和(hé)視(shì)覺統一到一個(gè)體(tǐ)系當中。

這一過程，設計(jì)師(shī)的任務包括：

繪制(zhì)網站(zhàn)地圖和(hé)線框圖（基于項目的界定範圍）

創建和(hé)搜集所有(yǒu)的內(nèi)容，包括圖片、文本、視(shì)頻和(hé)動畫(huà)等創建視(shì)覺元素，從情緒闆到配色方案等

設計(jì)清晰明(míng)确的布局、層次結構和(hé)高(gāo)效的信息架構

技(jì)術(shù)和(hé)性能

網站(zhàn)最重要的功能和(hé)技(jì)術(shù)緊密關聯，而它的極限也同技(jì)術(shù)相關。

你(nǐ)設計(jì)的網站(zhàn)功能是否能夠最終實現出來(lái)？用戶能否完全理(lǐ)解這些(xiē)功能，并且能夠正确地使用它們？

而影(yǐng)響網站(zhàn)的打開(kāi)速度和(hé)性能的技(jì)術(shù)問題，可(kě)以列出一個(gè)長長的列表，想要達成你(nǐ)計(jì)劃中的效果，可(kě)能需要整合再整合才行(xíng)。根據以往的經驗，網站(zhàn)需要真正服務于網站(zhàn)的所有(yǒu)者（以他們理(lǐ)解的方式搜集正确的數(shù)據）和(hé)用戶（網站(zhàn)必須快速且易于理(lǐ)解和(hé)使用）。

說到性能，就繞不開(kāi)搜索這個(gè)問題。由于用戶獲取信息的方式通(tōng)常和(hé)搜索引擎緊密關聯，絕大(dà)多(duō)數(shù)網站(zhàn)的流量和(hé)搜索引擎的協助是分不開(kāi)的。在設計(jì)和(hé)開(kāi)發的過程中，一定要将 SEO 的策略納入到整個(gè)環節當中，在一開(kāi)始就要考慮到它的存在。

這樣一來(lái)，就要求你(nǐ)根據項目的目标和(hé)範疇來(lái)權衡使用哪些(xiē)工具和(hé)服務來(lái)進行(xíng)開(kāi)發，CMS系統的構建過程中采用哪些(xiē)技(jì)術(shù)或者插件。總之，你(nǐ)需要明(míng)白，技(jì)術(shù)和(hé)性能相關的問題從來(lái)都沒有(yǒu)一個(gè)通(tōng)用的解決方案，靈活機變是必不可(kě)少(shǎo)的。

業務影(yǐng)響

當你(nǐ)擁有(yǒu)了一套堪稱完美的設計(jì)之後，你(nǐ)的工作(zuò)并沒有(yǒu)完成。一個(gè)良好的網站(zhàn)項目，在戰略上(shàng)不僅要着眼于設計(jì)和(hé)功能，還(hái)要幫助公司和(hé)團隊實現業務目标。這也是為(wèi)什麽要将網站(zhàn)首先就視(shì)作(zuò)為(wèi)整個(gè)産品戰略的一部分。

網站(zhàn)設計(jì)是如何影(yǐng)響整個(gè)業務的？它是否有(yǒu)幫助人(rén)們找到有(yǒu)用的信息并且了解這個(gè)公司？它是否牽涉到銷售或者電(diàn)商？

除此之外，還(hái)需要考慮這個(gè)問題：在客戶端的另一頭是誰在使用或者維護它？有(yǒu)哪些(xiē)信息反饋、投資說明(míng)或者分析圖表，能夠表明(míng)當前項目是可(kě)行(xíng)的，甚至是成功的？

你(nǐ)需要一開(kāi)始就考慮這個(gè)問題的答(dá)案。你(nǐ)可(kě)能需要為(wèi)電(diàn)商平台設計(jì)一個(gè)完全不同的界面，而不是單純隻依靠一個(gè)信息化的網站(zhàn)。根據總體(tǐ)目标，你(nǐ)可(kě)能需要基于差異化的策略設計(jì)出完全不同的品牌頻道(dào)。

這當中，最重要的可(kě)能是反饋機制(zhì)的建立。當用戶在點擊網站(zhàn)的時(shí)候，每一個(gè)點擊都在傳遞一些(xiē)關鍵性的信息。你(nǐ)可(kě)以使用這些(xiē)信息來(lái)輔助設計(jì)，讓用戶「正确」地同內(nèi)容進行(xíng)交互，也可(kě)以借此針對網站(zhàn)內(nèi)容進行(xíng)更為(wèi)有(yǒu)效的調整。

千萬不要忘記那(nà)些(xiē)忠實的用戶。對此，WebdesignerDepot 給出了如下的建議：

許多(duō)修改和(hé)調整可(kě)能意味着完全抛棄現有(yǒu)的用戶，湯恩比是當你(nǐ)去除或者隐藏之前他們所喜愛(ài)的舊(jiù)有(yǒu)的功能。如果你(nǐ)的用戶每天都會(huì)使用你(nǐ)的網站(zhàn)，那(nà)麽你(nǐ)一定要考慮修改和(hé)調整對他們的工作(zuò)和(hé)生(shēng)活所産生(shēng)的影(yǐng)響。

結語

當你(nǐ)使用全面網頁設計(jì)的方法來(lái)推進網頁項目的時(shí)候，你(nǐ)需要同時(shí)考慮和(hé)規劃更多(duō)的事情，上(shàng)一步和(hé)下一步之間(jiān)的影(yǐng)響，經常針對每一個(gè)步驟來(lái)衡量它們是否符合目标和(hé)整個(gè)項目的範疇。一切都是關聯的，更全面的思考将會(huì)帶來(lái)更成熟的産品。