網頁設計：網站布局的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個步驟】相關文章：
網頁設計的布局04-20
步驟和整體布局網頁設計詳細教程介紹04-30
網頁設計布局的理解04-07
網頁設計的布局理解02-25
網頁設計布局方法01-31
網頁布局設計的技巧03-04
常見的網頁布局設計11-02
網頁設計中美麗的布局04-04
關于網頁設計布局的分析02-04