Google 所提出的「整體網頁設計」最近被越來越多地提起。對于設計師和開發者而言，它所涉及到的內容并沒有表面上看起來那么粗獷簡單。

用最簡單的方式來解釋，所謂的整體網頁設計是將整個項目視為一個整體來審視，來看待和處理，深入理解和洞悉整體中每個環節之間的關系，把控全程。如果視覺設計不理想，再好的內容都無法脫穎而出，它們應當是一體的。同樣的，如果世界上視覺設計最優秀的網頁卻缺少可用性，那么它也難以在用戶面前立足。這些都是沒有借助整體網頁設計的方法而出現的常見問題，也是絕大多數網頁設計項目所亟待解決的問題。

以下是「整體網頁設計」的工作原理。

整體設計理念

整體網頁設計的核心是設計的過程。在借助整體網頁設計方法來推進項目的時候，設計和開發團隊的執行流程和之前可能會截然不同，不過在內容和細節處還是有許多共通之處的。

從設計師的角度上來看，設計、技術、性能表現和業務影響是主要的影響因素。策劃和研究等階段通常是由其他人來進行，但是如果項目是由一人負責那么通常也就得由設計師一人包攬了。這些環節還可以繼續往小了分解：內容和信息傳達，UI設計，UX設計，視覺設計，測試，培訓和反饋等等。

所有的這些步驟看起來都不盡相同，具體執行則取決于誰來規劃。WebdesignerDepot 曾經出過一個詳細的清單列表，其中包含了詳細的注意事項。其中有六個問題，在你做任何決策的時候，最好先問問你自己這六個問題。

在網頁的設計和開發過程中，前后因果關系通常是非常明晰的。你所做的每一個決策都會影響到你的用戶，你自己，你的同事或者員工，你的股東，以及一些你甚至還沒考慮到的人。最終整個產品都會作用于你的生活，無論這種作用是好還是壞。

規劃和研究

在網頁設計項目的規劃和研究階段，你應該做三件事情：

• 確定項目的目標
• 定義項目的范疇
• 定義受眾和目標用戶的角色形象

這些要素將決定了項目中各個環節要如何結合到一起，并且確定了各個部分之間要如何推進。如果項目中的組件不符合目標或者超出了范圍，那么就需要重新調整或者評估。

設計

設計階段通常是整個設計項目當中最有趣的部分，設計師在這個環節通過線框圖勾勒框架，填充內容，并且最終定義視覺效果，慢慢將內容和視覺統一到一個體系當中。

這一過程，設計師的任務包括：

• 繪制網站地圖和線框圖（基于項目的界定范圍）
• 創建和搜集所有的內容，包括圖片、文本、視頻和動畫等
• 創建視覺元素，從情緒板到配色方案等
• 設計清晰明確的布局、層次結構和高效的信息架構

技術和性能

網站最重要的功能和技術緊密關聯，而它的極限也同技術相關。你設計的網站功能是否能夠最終實現出來？用戶能否完全理解這些功能，并且能夠正確地使用它們？

而影響網站的打開速度和性能的技術問題，可以列出一個長長的列表，想要達成你計劃中的效果，可能需要整合再整合才行。根據以往的經驗，網站需要真正服務于網站的所有者（以他們理解的方式搜集正確的數據）和用戶（網站必須快速且易于理解和使用）。

說到性能，就繞不開搜索這個問題。由于用戶獲取信息的方式通常和搜索引擎緊密關聯，絕大多數網站的流量和搜索引擎的協助是分不開的。在設計和開發的過程中，一定要將 SEO 的策略納入到整個環節當中，在一開始就要考慮到它的存在。

這樣一來，就要求你根據項目的目標和范疇來權衡使用哪些工具和服務來進行開發，CMS系統的構建過程中采用哪些技術或者插件。總之，你需要明白，技術和性能相關的問題從來都沒有一個通用的解決方案，靈活機變是必不可少的。

業務影響

當你擁有了一套堪稱完美的設計之后，你的工作并沒有完成。一個良好的網站項目，在戰略上不僅要著眼于設計和功能，還要幫助公司和團隊實現業務目標。這也是為什么要將網站首先就視作為整個產品戰略的一部分。

網站設計是如何影響整個業務的？它是否有幫助人們找到有用的信息并且了解這個公司？它是否牽涉到銷售或者電商？

除此之外，還需要考慮這個問題：在客戶端的另一頭是誰在使用或者維護它？有哪些信息反饋、投資說明或者分析圖表，能夠表明當前項目是可行的，甚至是成功的？

你需要一開始就考慮這個問題的答案。你可能需要為電商平臺設計一個完全不同的界面，而不是單純只依靠一個信息化的網站。根據總體目標，你可能需要基于差異化的策略設計出完全不同的品牌頻道。

這當中，最重要的可能是反饋機制的建立。當用戶在點擊網站的時候，每一個點擊都在傳遞一些關鍵性的信息。你可以使用這些信息來輔助設計，讓用戶「正確」地同內容進行交互，也可以借此針對網站內容進行更為有效的調整。

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

許多修改和調整可能意味著完全拋棄現有的用戶，湯恩比是當你去除或者隱藏之前他們所喜愛的舊有的功能。如果你的用戶每天都會使用你的網站，那么你一定要考慮修改和調整對他們的工作和生活所產生的影響。

結語

當你使用全面網頁設計的方法來推進網頁項目的時候，你需要同時考慮和規劃更多的事情，上一步和下一步之間的影響，經常針對每一個步驟來衡量它們是否符合目標和整個項目的范疇。

一切都是關聯的，更全面的思考將會帶來更成熟的產品。

「2018年設計趨勢，一個都不要錯過」

• 《2018年，這10個LOGO設計趨勢值得你關注》
• 《超全面總結！2017年UI設計領域流行過這21個設計趨勢》
• 《掌握這12個移動端UX設計趨勢，你就掌控了2018年》
• 《這款獨特的紫色，是為你指引2018年設計方向的年度潘通色》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com