網頁設計：網站布局的23個步驟

　　在設計網站布局時，常常會出現一些常見的錯誤，特別是實習生和新設計師。在這個完美的網站布局的文章中，我們將介紹在開始一個新項目之前，每個新網站建設者應該知道做什么，以及在這個過程中應該注意什么?歡迎大家閱讀!更多相關信息請關注相關欄目!

　　這些原則不僅涵蓋設計方面，還涵蓋了一般工作流程，可以很好地完成工作。跟隨他們，你很快就會開始創建專業的網站布局。

　　01.客戶的目的是什么

　　告訴你的客戶，找出目標是什么

　　在開始工作之前，你需要知道你正在設計什么。除了網站的描述，你需要知道什么是目標。以新聞網站為例，目標是什么?是否盡可能多地制作廣告展示，或提供最佳的閱讀體驗?這些目標如何衡量?

　　良好的重新設計不一定是最華麗的，而是隨著時間的推移提高性能的。在開始設計之前與客戶交談是關鍵所在。您需要了解他們的關注和目標超越了書面SOW(工作表)。

　　02.把你的想法寫在紙上

　　關于世界各地城市的插圖系列的很早的草圖

　　這似乎非常明顯，但是我經常發現，設計師在考慮他們正在嘗試解決的問題之前，先直接進入他們的工作。設計是解決問題，這些問題不能通過漸變或陰影解決，而是通過良好的布局和清晰的層次結構來解決。

　　在開始放置陰影之前，請考慮內容，布局和功能。確保這些想法符合客戶的目標，并隨時分享。沒有任何客戶曾經向我投訴過度溝通的想法。

　　03.開始繪制頂級框架

　　繪制基本的線框可以幫助您構建布局(單擊右上角的圖標以放大圖像)

　　當我被要求創造一個項目的外觀和感覺，我做的第一件事是提出一個頂級的框架，以解決所有的設計問題。框架是圍繞內容的UI，并幫助用戶執行操作并瀏覽它。它包括導航和組件，如側邊欄和底部欄。

　　如果您從這個角度來看待您的設計，您將清楚地了解在首頁設計部分之后，布局需要什么。

　　04.添加網格

　　具有10px基線的978網格的示例

　　聽起來很簡單。在開始設計任何你需要一個正確的網格之前。沒有網格啟動沒有有效的借口 - 如果沒有，我可以向你保證，設計看起來不是很好。網格將幫助您構建不同部分的布局; 它將引導您完成特定的屏幕尺寸要求，并幫助您創建響應模板，因此在間距方面以及許多其他設計問題方面是一致的。

　　要了解如何做到這一點，請查看本指南來創建適應所有屏幕尺寸的網格。

　　選擇你的排版

　　一般的經驗法則是在網站布局中使用不超過兩種不同的字體

　　探索不同的字體和顏色是項目發現階段的一部分。我建議不要在網站上使用兩種以上的不同字體，但這實際上取決于它的性質。總的來說，選擇一個容易閱讀的大塊文字的字體，并且更加適合標題和號召性用語。不要害怕使用大字體，并且在使用排版時具有創造性和一致性。

　　06.選擇你的顏色主題

　　Color Hunt等工具旨在幫助您挑選調色板

　　在選擇一組字體的過程中，您應該開始探索在UI，背景和文本中使用的顏色。我建議為一般用戶界面使用一組有限的顏色和色調。

　　根據元素的功能，在UI上應用這些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等網站的布局。除了UI，圖形或圖形細節不應該有任何顏色限制，只要它們不會干擾組件的功能。

　　如果您遇到困難，請查看我們的免費應用列表，以選擇配色方案。

　　分配布局

　　簡單的布局往往更容易導航

　　網站的結構越簡單，用戶就越容易瀏覽。您網站的每個部分需要講述一個故事; 它需要用戶的理由和最終結果。布局應該幫助內容突出顯示該故事中最重要的部分。

　　實際上，在一個網頁上不應該有太多的號召力 - 所有的事情都應該推動到那個決定“我能在這里做什么?” 想想最簡單的布局，您可以想象一個簡單的目的，并開始添加必要的組件。最后，你會驚訝，很難保持簡單。

　　08.重新思考已建立的

　　搜索按鈕已變得過時

　　我們真的需要一個搜索按鈕嗎?在大多數情況下答案是否定的。作為設計師，我們塑造了用戶瀏覽互聯網的方式，由我們來決定簡單操作將采取多少步驟，以及我們的網站將如何有效。

　　有些公約在那里是因為他們工作，但有些是因為沒有人花費足夠的時間來評估它們。重新考慮所有組件的已建立的交互模式，看看我們如何改進它們。

　　想想動議

　　運動在設計交互式體驗時至關重要

　　運動在設計交互式體驗時至關重要。沒有任何設計可以自己判斷，或作為靜態組合; 每個組件都是通過與系統的關系定義的，這種關系需要運動才能正確傳達。運動可以說明您的布局中對內容或交互狀態的動態效果。為了第二個目的，我建議您的設計進一步進行原型設計。

　　原型，原型，原型

　　原型是測試互動的最佳方法

　　原型是測試交互和技術的最佳方法。現在有很多原型設計工具使其變得輕而易舉，您不需要成為創建有效原型的編碼大師。這是另一種方式，您可以讓您的客戶感到興奮，并與理論和想法，否則需要很多解釋。

　　挑戰自己

　　我鼓勵每個設計師在每個項目上挑戰自己。創新并不總是對項目的要求，所以我們需要提出新鮮事物。不同挑戰的例子可能包括使用新的網格系統，創建新的組件，或者甚至是避免混合模式或使用特定顏色的小挑戰。

　　注意細節

　　工作進展中：細節視圖

　　這個聲明最近被過度使用，但在最終產品中并不總是可見的。根據項目背后的概念，“關注細節”可能意味著不同的東西。

　　它可能是一個小的互動，一個意想不到的動畫或美學的觸摸，如一個按鈕的一個漸變或在背景中一個盒子周圍微妙的沖擊。但總的來說，這種觸摸是至關重要的 - 如果你真的很喜歡你所做的，這將是自然而然的。

　　13.優化每個組件

　　將每個組件視為設計比賽

　　處理每個組件，就像它可以呈現給設計大賽一樣。如果您注意每一個組件，整體將超過其部分的總和。我不得不承認，這件建議不是我的。我曾經在以前的一個機構聽到過，令我震驚的是，這個聲明是多么清楚和真實。

　　每個組件都需要設計，因為它可以獨立于最好的組件。有時，設計師會將某個網站的某些部分留下，直到他們的待辦事項列表中，直到最后才顯示出來。

　　銳化你的工作

　　在筆畫和背景之間設置正確的對比度

　　為了避免模糊像素，請嘗試在筆畫和背景顏色或背景顏色之間設置正確的對比度。除了任何審美的考慮之外，還有一些常見的事情必須避免，以創造一個干凈，正確的工作。

　　當您嘗試銳化工作時，您應該注意的部分是包括漸變條紋，邊緣模糊，字體渲染選項(某些字體，具體取決于其特定渲染模式下的最佳尺寸)，以及與的背景。

　　這些只是需要尋找的幾個問題的基本例子，但實際上這個列表是無止境的。總是看你的設計作為一個整體，看看一切是否運作良好，然后仔細分析每個組件。

　　15.整理你的設計文件

　　無論您使用什么設計工具，這一點(以及使用網格)都是最重要的建議之一。不管項目的大小和設計人員的數量如何，您需要保持文件清潔。這樣可以輕松導出不同的部分，加快設計過程并與其他設計人員合作。

　　16.設計最佳案例; 為最壞的準備

　　請記住，您的布局如何在不同的設備和屏幕尺寸上工作

　　請記住，您的布局如何在不同的設備和屏幕尺寸上工作。作為設計師，我們的工作是通過不同的約束來解決問題 通過網頁設計，約束范圍從概念和技術問題到內容相關的問題。

　　我們需要建立一個不僅可以在理想場景下工作的站點，也可以在最壞的情況下構建一個站點。例如，一個用戶可能正在使用一個非常小的屏幕，并檢查該網站，當它幾乎沒有任何內容，所以它看起來破碎。

　　但是，為了展示我們的工作，我總是強烈建議為此建立最佳案例場景。因此，我們將顯示理想的文本數量，我們將在理想的瀏覽器大小內顯示該網站，這應該是大多數使用它的用戶最常見的場景。

　　癡迷于設計，直到你討厭它

　　如果您對設計充滿熱情，我相信這是您已經在做的事情。每當我完成一個comp我感到自豪，我傾向于使這個成為我一生的一部分。我拍攝它的截圖，檢查它不同的設備，制作它的壁紙，甚至打印它，掛在墻上。

　　作為這個過程的結果，我得到了一個點，我終于討厭我的設計。我開始看到一切都錯了，最終我改變了。不喜歡你以前的工作是成熟的跡象，這意味著你終于從自己的錯誤中學習了。

　　18.早日與客戶分享設計

　　當提出交互式概念或設計“外觀和感覺”時，您需要確保您和客戶端盡快在同一頁面上。在與客戶共享之前，避免花費太多時間在概念上。

　　一旦初始概念被批準，你可以放松一點，開始生產。但是，在提出了第一個概念之后，如果客戶不愛上它，那么你應該收集足夠的反饋來給表格帶來第二個更合適的概念。

　　作為開發人員最好的朋友

　　開發者是有創意的人，他們喜歡自己的工作，就像你一樣。但是，從一開始就并不總是包含在一個項目中，而且當概念被決定并且他們的創造性角色已經被超越時，往往只會涉及到。

　　這個過程是錯誤的 一些最好的想法來自開發團隊，所以確保從項目開始就與他們合作。與他們分享你的觀念和興奮，最終會帶來更好的想法和更好的執行。

　　20.盡可能清楚地呈現

　　產生偉大的工作同樣重要，因為它是呈現它。如果您沒有正確呈現，您的最佳設計可以被忽略或拋棄。談到演講，你想解釋你的工作，就像你展示給四歲。請記住，對于您第一次看到您的設計而言，您完全清楚的可能并不清楚。

　　不要太貼近你的想法

　　知道什么時候提倡你的想法，并學習認識你的團隊或客戶什么時候不認為他們是“一個”，這一點很細。作為一名設計師，您需要堅信自己所做的一切，但您也應該樂意快速轉換您的任何想法并提出其他想法。不要忘記有多個解決方案。

　　按照您的設計進行開發

　　如果您在代理機構內部工作，您可能會知道，在開發新的項目時，發現自己在設計新項目時遇到困難。與一般信念相反，您的項目工作不會在PSD和樣式表交付時結束。

　　如果您真的關心您的設計和交互方式的執行情況，請不時檢查開發人員的老朋友，并盡可能地幫助他們確保每個小像素都是完美的。

　　顯示您正在進行的工作

　　與社區共享您的樣式表和進行中的組件

　　作為設計師社區的一部分，我們都非常喜歡看到最終結果，而且還在于正在進行的工作。有時，由于幾個原因，項目的最佳部分被遺漏，并在“存檔”文件夾中丟失。

　　一旦項目完成，您得到客戶/生產者的批準，就可以推廣該項目，如果可能的話，可能會對正在進行的工作和設計進行案例研究，而不是最終版本。

【網頁設計：網站布局的23個步驟】相關文章：

網頁設計的布局08-13

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

常見的網頁布局設計07-25

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

網頁設計中美麗的布局05-13

關于網頁設計布局的分析09-26

網頁設計的制作步驟06-30

網頁設計的基本步驟及設計方法08-16

網頁設計教程 :設計步驟及思考08-13

網頁設計的布局的方式有哪些08-06