建設完美網站布局的20個步驟

時間：2025-11-04 18:51:01 毅霖網頁設計

建設完美網站布局的20個步驟

　　Web站點的設計是展現企業形象、介紹產品和服務、體現企業發展戰略的重要途徑，因此我們必須明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。以下是小編為大家搜索整理建設完美網站布局的20個步驟，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!

　　1.先把你的想法畫到稿紙上

　　原始草圖：世界各城市

　　這顯而易見，但是我卻常常發現設計師們經常跳過這一步，在考慮任何可能會遇到的問題之前就直接打開Photoshop開始工作。設計是要解決問題的——如何有效傳達信息的問題。這些問題不是通過添加或者陰影就能解決的，只有好的網頁布局和層級結構設計才能造就出優秀的網頁界面。在你打開Photoshop之前，好好考慮你的網頁內容、網頁布局和層級結構。

　　2.從繪制頂級框架開始

　　繪制基本的鏈接關系有助于你解決UX問題和構建網頁布局

　　當我被要求要為網頁設計出“感覺”時，我做的第一件事就是設計網頁的頂級框架，這會解決所有的設計問題。這里所說的框架指的是在網頁內容周圍的UI(用戶交互界面)，它們引導用戶瀏覽網站，框架包括導航和類似側邊欄和底部導航欄的交互元件。

　　如果你在設計時采用這種方法，你就會在設計首頁之外的網頁時，對你的布局的需要有一個清楚的了解。

　　3.在你的PSD文件中添加網格

　　10像素基線的978個網格

　　這就和它聽起來一樣簡單。在Photoshop中設計任何東西之前，你最好先繪制一個網格以備參照。沒有明顯的理由不使用網格，但是有明顯的理由使用網格!我可以保證，有網格，你肯定能做得更好!

　　網格幫助你完成界面的劃分，網格能引導你的設計滿足不同大小的屏幕的需求，在諸如留白等方面保持設計上的一貫性。

　　4.選擇字體

　　一個通用的原則就是，在網站布局中不要使用超過兩種的字體。

　　探索使用不同的字體和顏色是項目設計過程中不可或缺的一步。我推薦在網頁中不要使用兩種以上的字體，但是你也可以依據實際情況進行增減。一般來說，選擇一種容易閱讀的字體(用于大段的文本)和一種有趣的字體(用于標題和交互)即可。不要害怕使用大字體。總的來說，在使用字體時一定要注意保持趣味性和連續性。

　　5.選擇顏色主題

　　使用有限的顏色和色調來避免視覺疲勞。

　　在為你的網頁選擇一套字體的過程中，你應當從考慮在UI、背景和文本中使用何種顏色開始。對于一般的用戶交互界面，我推薦使用有限種顏色和有限的色調變化。

　　在UI設計環節，請務必在保持配色的連續性的同時參考元件的功能。參考下Facebook、Twitter、Quora和Vimeo(翻譯小編表示：很不幸，這些網站都是得fq才上得去的)的布局設計。除了UI之外，不應該對插畫或細節有任何顏色限制——只要它們不和UI元件的功能有所關聯就行。

　　6.將布局分塊

　　網站的結構越簡單，用戶瀏覽起來就越容易

　　你網站的每一個部分都需要有話可說，需要有閱讀的價值，而布局則應當有助于凸顯文章中的亮點內容。實際上，在同一張頁面上不應該有太多的動作呼告，所有的一切都應該有助于瀏覽者明白“我能在這兒做什么”。

　　從一個簡單的目的出發，構想一個你能想象得出的最簡單的布局，然后再加上有必要添加的元件，到最后你就會驚訝的發現，保持布局的簡潔是如此之簡單!

　　7.反思現有的

　　我們真的需要一個搜索框嗎?在大多數情形下，答案是：不!

　　作為設計師，我們塑造了人們瀏覽互聯網的方式，我們決定了完成一個簡單的操作所需要的步驟，我們決定了我們的網站是否有效率。設計樣式和范例之所以存在，是因為它們確實有效。但是，有時候它們之所以存在只是因為沒有人花時間思考它們存在的意義。這很重要：去重新考慮已有的交互方式，看看我們如何才能提升它們。

　　8.挑戰自我

　　我鼓勵每個設計師在他們的每個項目上都能夠挑戰自我。項目并不總是需要有所創新的，所以創新這回事完全靠我們設計師的主動性。挑戰的例子包括哪些?比如使用新的網格系統、創造一個新的元件、或者更多細微之處的超越：避免混合模式或使用一種特定的顏色。

　　9.完善細節

　　游戲半成品：扣扣細節

　　這是個老生常談的問題但實際上最終的產品總是有很多細節缺陷。取決于項目背后的理念，“細節”可以變現為很多種形式。它可以是一個小交互元件，一種出人意料的動畫，也可以是在按鈕上的一點漸變或者方框周圍的描邊，但總的來說，這些細節必須是有實際需要的，而且看起來是自然的。

　　10.對每一個元件高標準嚴要求

　　留心每一個元件，總體大于部分之和

　　我得承認這一部分不是我想出來的，我是在FantasyInteractive上看到的。我真的驚訝于這句話是多么正確和明晰。每一個元件都應該被設計得即使被單獨拎出來開，也是一個杰作。有些設計師會把這些小問題遺留在“待處理”上，然后到最后也沒想起來它們。

　　11.銳化你的設計

　　為了避免像素的模糊，嘗試在筆畫和背景或背景顏色之間創建合適的對比

　　除了美學的考慮之外，為了創建一個干凈的作品，也有一些普遍的問題需要避免。當你修改你的作品的時候，你需要關注的問題包括漸變的失真、毛糙邊緣、字體渲染選項(有些字體依其不同的大小，應用不同的渲染模式才會顯得好看)，還有和背景混到一塊的線條。

　　這些問題只是一些基本的例子，但在現實中這樣的例子舉不勝舉。總是把你的設計當做一個整體來看是否一切都能協調運行，然后再仔細地分析每一個組件。

　　12.保持PSD文件的有序和整潔

　　這個(還有網格的使用)，是使用Photoshop進行設計時最應該記住的幾條建議之一。除了項目的大小和參與人員的數目，你還要保持你文件的整潔，這將使得出階段成果更加容易，加速設計流程，以及便于和其他設計師交流及分享。

　　13.一顆紅心，兩手準備

　　牢牢記住：你的布局在不同的設備和屏幕上會如何運作

　　作為設計師，我們的任務就是在各種各樣的限制下解決問題。在網頁設計中，這些限制包括概念性、技術性的問題，也包括與內容有關的問題。

　　我們建立的站點不僅需要能在理想的設備上完美呈現，在不理想的情況下也不能顯得太差勁。然而，為了呈現我們的作品，我總是強烈推薦為最好的情形設計網頁。因而，我們為最多數用戶的理想使用情景設計網頁。

　　14.反復觀察，直到厭煩你的設計

　　如果你對設計充滿激情，我確定這就是你也在做的事情。當我做完一項令我自己都感到自豪的作品時，我都會把它作為我生命中的一部分。我會給它截屏，用它當屏保，甚至把它打印下來然后貼在墻上。

　　這樣做的結果就是，我最終就會變得討厭它了，我開始看出它的缺陷并最終把它打入冷宮。討厭你當前的作品，是一種成熟的標志，它意味著你總算從你的錯誤中學到了些東西。

　　15.在和你的客戶分享之前，避免花費過多的時間在一個概念上

　　當你想到一個新的交互概念或者一個“看起來很有感覺”的設計點子的時候，你需要確定你的客戶也這么想。如果你的客戶也喜歡你的想法的話那還好辦，盡可以放手去做，但是萬一客戶不喜歡你的新創意，那你就不得不花費很多時間把你的設計改回去。在把新概念付諸實施之前，盡可能多地收取客戶反饋。

　　16.做程序員最好的朋友

　　Yahoo的RafaelMumme給出了幾條幫助射雞濕和程序猿融洽搞基的好建議：/pic/design/20-things-drive-web-developers-crazy-7116930

　　程序員們也都是有創造力的人類呢，相比于設計師，他們對他們的工作也有近乎狂熱的情感。但他們往往不是在項目一開始就加入進來，往往是概念決定以后，他們的創造力才會有用武之地。這個程序是錯誤的。有些最好的點子就來自于開發團隊，所以在項目開始之前就和他們團結協作。和他們分享你的概念和激情，這將會引發出更多的好點子和更好的最終成品。

　　17.展示：把我當三歲小孩吧

　　展示你的設計和設計本身一樣重要。如果你的展示一塌糊涂，你的設計也會被拋進垃圾桶。永遠記住，那些第一次看見你的設計的人可不像你那樣對它有足夠的了解。

　　18.愛你的設計，但不要迷戀

　　知道如何維護你的想法，也要學會明白有時候你可客戶就是不會認同你的想法。作為一名設計師你需要對你做得事情有堅定的信心，但是你也應該能以open的心態迅速推翻一個想法并提出些新點子。不要忘了，解決方案不止一種。

　　19.追蹤你的設計，直到開發環節

　　如果你在一個工作室工作，你或許已經發現活真是一個接一個的來啊，上一個剛進入開發環節，新任務就又來了。和通常的看法相反，你的工作絕不止于將PSD文件交付給下一環節。如果你真的希望你的設計能夠完美呈現的話，記得時不時和程序員朋友們溝通一下，幫助他們同時確保你的設計中的每一個細節都付諸實現。

　　20.在設計社區分享你的設計進度

　　作為設計師圈子中的一員，我們不僅喜歡看別人的成果，也樂于看到項目是如何進行的。在為社區的知識庫做貢獻的同時，你也會收到有價值的建議或反饋。

　　拓展：日常網站推廣內容建設方法步驟

　　一、網站安全方面維護

　　已經進入網站內容維護階段工作的網站，基本前面的環節工作都做好了，另外一些朋友可能不了解，還是簡單的說一下吧，首先網站要有域名空間，然后有對應的網站程序，把域名解析到對應的空間，把程序上傳到這個空間就可以了，如果用的空間是國內的，還需要進行網站備案，網站上線前最好把符合自身的定位的SEO基礎細節調整好，就可以開始進行網站內容更新維護了。那么網站正常進入日常維護階段的時候，首先我們要檢查下網站的安全，比如：檢查下網站頁面尤其是首頁是否掛了黑鏈，其他違法鏈接，如果有，那么就是網站或者服務器空間有漏洞導致的，應當及時聯系管理人員進行處理，另外網站是否能夠正常打開?重要的一些版塊欄目是否正常訪問，都可以簡單的看一下，以確保網站的正常使用。

　　二、日常網站內容維護幅度

　　那么我們在來談談網站內容更新的幅度，網站內容日常更新多少篇合適?這個需要根據網站的類型和網站的情況以及維護網站人員的情況來決定，比如：大型類的站，如：新浪搜狐這類門戶，其首域名網站以及2級域名網站，如，新聞，經濟，美容，軍事幾乎每一個都是一個獨立網站，可想而知，這類網站整合加起來可能一天需要更新幾百甚至上千篇內容，所負責網站內容編輯的人員數量也是不再少數的，而一般的小企業網站，由于企業網站的信息量都比較少，所以日常內容更新個5-10篇即可，如果是網站剛剛上線，一般的基礎信息，如：公司簡介，聯系我們，或者產品展示，案例展示這類基本欄目信息，都是需要上傳的，那么我們編輯可以盡快的把這些重要欄目信息完善一下。總之：如果是一般企業網站，每天更新5-10篇內容即可，到后期網站內容更新甚至一天1篇都可以。

　　三、日常網站內容維護方法

　　我們在來談談網站內容維護的方法有哪些，首先我們要知道，網站的內容是一個網站存在的基本，但是也是網站的靈魂，比如億辰網絡本身是做網站建設這塊的，那么我們的網站上面除了發布案例，以及公司基礎信息外，應該以網站建設相關的內容為主，比如本篇文章是介紹網站內容維護的，都屬于網站建設相關內容的范疇以內，在延伸一下，做好網站用戶還需要對網站進行網絡推廣，那么我們也可以發布一些網站SEO優化推廣相關的內容，也是符合我們網站用戶關注的信息的，話又說回來，如果換到傳統行業，比如一個客戶是做鍋爐的，而網站維護人員根本對鍋爐一無所知。

　　日常的網站內容更新應該如何做呢?可以從以下幾點進行日常內容更新的題材擴展：

　　1.百度搜索長尾詞

　　我們搜索某一個關鍵詞的時候，你會發現搜索詞匯后百度會給出相對應的長尾詞或者擴展詞匯，比如：網站建設，會出現網站建設公司，網站建設公司方案，網站建設報價等擴展詞匯，我們在搜索這類詞匯的時候又可以進行擴展，這樣可更新的內容話題就有了。

　　2.百度相關搜索

　　我們搜索某個詞匯的時候，除了本身的內容顯示以外，比如：網站建設，在頁面的結尾處，百度還有一個相關搜索推薦，相關搜索推薦一共會推薦9條內容，部分內容是搜索框的推薦詞匯。這也是一種網站內容更新話題擴展的方式。

　　3.百度百科

　　我們搜索某個詞匯的時候，一般首頁最前面的都是該詞匯百度百科的介紹，介紹甚至會分為多個點進行，比如搜索：seo，會包括:特征特點，優化內容，優化步驟等等這些小的點都可以針對性的做為一篇網站內容更新的話題去寫作。

　　4.競爭對手的網站

　　通過分析競爭對手的網站，比如上面提到，那個客戶是做鍋爐的，維護人員對鍋爐并不了解，那么可以通過觀察競爭對手的網站，可以來查詢相對應跟鍋爐有關系的話題內容，閱讀后自己寫一下即可。

　　5.詞庫等關鍵詞分析網站

　　還有一種網站是用來專門分析某些關鍵詞相關長尾詞的，比如：詞庫。我們隨便搜索一個關鍵詞都可以查詢到跟這個詞匯有關系的一些有指數的相關內容，通過這種方式也可以找尋到很多跟自身網站主題相關的話題內容進行編輯寫作。

　　6.統計工具分析的長尾詞

　　另外有經驗的網絡推廣人員，一般會給網站安裝對應的第三方統計工具，比如：百度統計，通過百度統計我們可以很直觀的了解到網站運營的一些情況，也可以查詢到一些用戶搜索詞匯，有部分詞匯可能你都沒有想到過，通過這種形式也可以進行長尾詞的擴展，然后編輯成日常網站維護更新的內容進行更新。

　　日常網站外部鏈接建設

　　網站推廣人員除了做日常的網站內容更新以外，還需要適當的給網站做一些外部鏈接建設，以便提高網站權重，外部鏈接建設可以通過：軟文投稿，博客留鏈接，以及論壇發帖留外鏈，等方式進行，每天發布的外鏈根據網站的當前情況和人力情況來決定，網站如果剛上線，內容更新維護又做了一些，那么這個時候就可以去做外部鏈接建設了，每天做個20-30條即可。

　　總結

　　日常網站內容維護更新，一定要發布跟自身主題相關的內容，百度的關鍵詞排名是把好的網站推薦到前列，而SEO只不過是網站運營中的基礎中的基礎，我們站在用戶的角度思考問題，另外別的網站有，你也有同類內容，你有的內容，而同行網站沒有，那么你就有優勢，自然網站排名也就更有優勢，經過百度的識別和處理，關鍵詞上首頁的可能性很大，網站內容維護方案：找尋話題，內容閱讀，然后自行原創編輯，上面基本都提到了，相信很多朋友看過以后就會對網站內容更新有新的了解認識。

【建設完美網站布局的20個步驟】相關文章：

步驟和整體布局網頁設計詳細教程介紹11-14

寧德雅思報名網站及步驟02-22

網站建設面試題11-22