網(wǎng)頁設(shè)計：網(wǎng)站布局的23個步驟
在設(shè)計網(wǎng)站布局時，常常會出現(xiàn)一些常見的錯誤，特別是實習(xí)生和新設(shè)計師。在這個完美的網(wǎng)站布局的文章中，我們將介紹在開始一個新項目之前，每個新網(wǎng)站建設(shè)者應(yīng)該知道做什么，以及在這個過程中應(yīng)該注意什么?歡迎大家閱讀!更多相關(guān)信息請關(guān)注相關(guān)欄目!
這些原則不僅涵蓋設(shè)計方面，還涵蓋了一般工作流程，可以很好地完成工作。跟隨他們，你很快就會開始創(chuàng)建專業(yè)的網(wǎng)站布局。
01.客戶的目的是什么
告訴你的客戶，找出目標(biāo)是什么
在開始工作之前，你需要知道你正在設(shè)計什么。除了網(wǎng)站的描述，你需要知道什么是目標(biāo)。以新聞網(wǎng)站為例，目標(biāo)是什么?是否盡可能多地制作廣告展示，或提供最佳的閱讀體驗?這些目標(biāo)如何衡量?
良好的重新設(shè)計不一定是最華麗的，而是隨著時間的推移提高性能的。在開始設(shè)計之前與客戶交談是關(guān)鍵所在。您需要了解他們的關(guān)注和目標(biāo)超越了書面SOW(工作表)。
02.把你的想法寫在紙上
關(guān)于世界各地城市的插圖系列的很早的草圖
這似乎非常明顯，但是我經(jīng)常發(fā)現(xiàn)，設(shè)計師在考慮他們正在嘗試解決的問題之前，先直接進(jìn)入他們的工作。設(shè)計是解決問題，這些問題不能通過漸變或陰影解決，而是通過良好的布局和清晰的層次結(jié)構(gòu)來解決。
在開始放置陰影之前，請考慮內(nèi)容，布局和功能。確保這些想法符合客戶的目標(biāo)，并隨時分享。沒有任何客戶曾經(jīng)向我投訴過度溝通的想法。
03.開始繪制頂級框架
繪制基本的線框可以幫助您構(gòu)建布局(單擊右上角的圖標(biāo)以放大圖像)
當(dāng)我被要求創(chuàng)造一個項目的外觀和感覺，我做的第一件事是提出一個頂級的框架，以解決所有的設(shè)計問題。框架是圍繞內(nèi)容的UI，并幫助用戶執(zhí)行操作并瀏覽它。它包括導(dǎo)航和組件，如側(cè)邊欄和底部欄。
如果您從這個角度來看待您的設(shè)計，您將清楚地了解在首頁設(shè)計部分之后，布局需要什么。
04.添加網(wǎng)格
具有10px基線的978網(wǎng)格的示例
聽起來很簡單。在開始設(shè)計任何你需要一個正確的網(wǎng)格之前。沒有網(wǎng)格啟動沒有有效的借口 - 如果沒有，我可以向你保證，設(shè)計看起來不是很好。網(wǎng)格將幫助您構(gòu)建不同部分的布局; 它將引導(dǎo)您完成特定的屏幕尺寸要求，并幫助您創(chuàng)建響應(yīng)模板，因此在間距方面以及許多其他設(shè)計問題方面是一致的。
要了解如何做到這一點，請查看本指南來創(chuàng)建適應(yīng)所有屏幕尺寸的網(wǎng)格。
選擇你的排版
一般的經(jīng)驗法則是在網(wǎng)站布局中使用不超過兩種不同的字體
探索不同的字體和顏色是項目發(fā)現(xiàn)階段的一部分。我建議不要在網(wǎng)站上使用兩種以上的不同字體，但這實際上取決于它的性質(zhì)。總的來說，選擇一個容易閱讀的大塊文字的字體，并且更加適合標(biāo)題和號召性用語。不要害怕使用大字體，并且在使用排版時具有創(chuàng)造性和一致性。
06.選擇你的顏色主題
Color Hunt等工具旨在幫助您挑選調(diào)色板
在選擇一組字體的過程中，您應(yīng)該開始探索在UI，背景和文本中使用的顏色。我建議為一般用戶界面使用一組有限的顏色和色調(diào)。
根據(jù)元素的功能，在UI上應(yīng)用這些是非常重要的。想想Facebook，Twitter，Quora和Vimeo等網(wǎng)站的布局。除了UI，圖形或圖形細(xì)節(jié)不應(yīng)該有任何顏色限制，只要它們不會干擾組件的功能。
如果您遇到困難，請查看我們的免費應(yīng)用列表，以選擇配色方案。
分配布局
簡單的布局往往更容易導(dǎo)航
網(wǎng)站的結(jié)構(gòu)越簡單，用戶就越容易瀏覽。您網(wǎng)站的每個部分需要講述一個故事; 它需要用戶的理由和最終結(jié)果。布局應(yīng)該幫助內(nèi)容突出顯示該故事中最重要的部分。
實際上，在一個網(wǎng)頁上不應(yīng)該有太多的號召力 - 所有的事情都應(yīng)該推動到那個決定“我能在這里做什么?” 想想最簡單的布局，您可以想象一個簡單的目的，并開始添加必要的組件。最后，你會驚訝，很難保持簡單。
08.重新思考已建立的
搜索按鈕已變得過時
我們真的需要一個搜索按鈕嗎?在大多數(shù)情況下答案是否定的。作為設(shè)計師，我們塑造了用戶瀏覽互聯(lián)網(wǎng)的方式，由我們來決定簡單操作將采取多少步驟，以及我們的網(wǎng)站將如何有效。
有些公約在那里是因為他們工作，但有些是因為沒有人花費足夠的時間來評估它們。重新考慮所有組件的已建立的交互模式，看看我們?nèi)绾胃倪M(jìn)它們。
想想動議
運(yùn)動在設(shè)計交互式體驗時至關(guān)重要
運(yùn)動在設(shè)計交互式體驗時至關(guān)重要。沒有任何設(shè)計可以自己判斷，或作為靜態(tài)組合; 每個組件都是通過與系統(tǒng)的關(guān)系定義的，這種關(guān)系需要運(yùn)動才能正確傳達(dá)。運(yùn)動可以說明您的布局中對內(nèi)容或交互狀態(tài)的動態(tài)效果。為了第二個目的，我建議您的設(shè)計進(jìn)一步進(jìn)行原型設(shè)計。
原型，原型，原型
原型是測試互動的最佳方法
原型是測試交互和技術(shù)的最佳方法。現(xiàn)在有很多原型設(shè)計工具使其變得輕而易舉，您不需要成為創(chuàng)建有效原型的編碼大師。這是另一種方式，您可以讓您的客戶感到興奮，并與理論和想法，否則需要很多解釋。
挑戰(zhàn)自己
我鼓勵每個設(shè)計師在每個項目上挑戰(zhàn)自己。創(chuàng)新并不總是對項目的要求，所以我們需要提出新鮮事物。不同挑戰(zhàn)的例子可能包括使用新的網(wǎng)格系統(tǒng)，創(chuàng)建新的組件，或者甚至是避免混合模式或使用特定顏色的小挑戰(zhàn)。
注意細(xì)節(jié)
工作進(jìn)展中：細(xì)節(jié)視圖
這個聲明最近被過度使用，但在最終產(chǎn)品中并不總是可見的。根據(jù)項目背后的概念，“關(guān)注細(xì)節(jié)”可能意味著不同的東西。
它可能是一個小的互動，一個意想不到的動畫或美學(xué)的觸摸，如一個按鈕的一個漸變或在背景中一個盒子周圍微妙的沖擊。但總的來說，這種觸摸是至關(guān)重要的 - 如果你真的很喜歡你所做的，這將是自然而然的。
13.優(yōu)化每個組件
將每個組件視為設(shè)計比賽
處理每個組件，就像它可以呈現(xiàn)給設(shè)計大賽一樣。如果您注意每一個組件，整體將超過其部分的總和。我不得不承認(rèn)，這件建議不是我的。我曾經(jīng)在以前的一個機(jī)構(gòu)聽到過，令我震驚的是，這個聲明是多么清楚和真實。
每個組件都需要設(shè)計，因為它可以獨立于最好的組件。有時，設(shè)計師會將某個網(wǎng)站的某些部分留下，直到他們的待辦事項列表中，直到最后才顯示出來。
銳化你的工作
在筆畫和背景之間設(shè)置正確的對比度
為了避免模糊像素，請嘗試在筆畫和背景顏色或背景顏色之間設(shè)置正確的對比度。除了任何審美的考慮之外，還有一些常見的事情必須避免，以創(chuàng)造一個干凈，正確的工作。
當(dāng)您嘗試銳化工作時，您應(yīng)該注意的部分是包括漸變條紋，邊緣模糊，字體渲染選項(某些字體，具體取決于其特定渲染模式下的最佳尺寸)，以及與的背景。
這些只是需要尋找的幾個問題的基本例子，但實際上這個列表是無止境的。總是看你的設(shè)計作為一個整體，看看一切是否運(yùn)作良好，然后仔細(xì)分析每個組件。
15.整理你的設(shè)計文件
無論您使用什么設(shè)計工具，這一點(以及使用網(wǎng)格)都是最重要的建議之一。不管項目的大小和設(shè)計人員的數(shù)量如何，您需要保持文件清潔。這樣可以輕松導(dǎo)出不同的部分，加快設(shè)計過程并與其他設(shè)計人員合作。
16.設(shè)計最佳案例; 為最壞的準(zhǔn)備
請記住，您的布局如何在不同的設(shè)備和屏幕尺寸上工作
請記住，您的布局如何在不同的設(shè)備和屏幕尺寸上工作。作為設(shè)計師，我們的工作是通過不同的約束來解決問題 通過網(wǎng)頁設(shè)計，約束范圍從概念和技術(shù)問題到內(nèi)容相關(guān)的問題。
我們需要建立一個不僅可以在理想場景下工作的站點，也可以在最壞的情況下構(gòu)建一個站點。例如，一個用戶可能正在使用一個非常小的屏幕，并檢查該網(wǎng)站，當(dāng)它幾乎沒有任何內(nèi)容，所以它看起來破碎。
但是，為了展示我們的工作，我總是強(qiáng)烈建議為此建立最佳案例場景。因此，我們將顯示理想的文本數(shù)量，我們將在理想的瀏覽器大小內(nèi)顯示該網(wǎng)站，這應(yīng)該是大多數(shù)使用它的用戶最常見的場景。
癡迷于設(shè)計，直到你討厭它
如果您對設(shè)計充滿熱情，我相信這是您已經(jīng)在做的事情。每當(dāng)我完成一個comp我感到自豪，我傾向于使這個成為我一生的一部分。我拍攝它的截圖，檢查它不同的設(shè)備，制作它的壁紙，甚至打印它，掛在墻上。
作為這個過程的結(jié)果，我得到了一個點，我終于討厭我的設(shè)計。我開始看到一切都錯了，最終我改變了。不喜歡你以前的工作是成熟的跡象，這意味著你終于從自己的錯誤中學(xué)習(xí)了。
18.早日與客戶分享設(shè)計
當(dāng)提出交互式概念或設(shè)計“外觀和感覺”時，您需要確保您和客戶端盡快在同一頁面上。在與客戶共享之前，避免花費太多時間在概念上。
一旦初始概念被批準(zhǔn)，你可以放松一點，開始生產(chǎn)。但是，在提出了第一個概念之后，如果客戶不愛上它，那么你應(yīng)該收集足夠的反饋來給表格帶來第二個更合適的概念。
作為開發(fā)人員最好的朋友
開發(fā)者是有創(chuàng)意的人，他們喜歡自己的工作，就像你一樣。但是，從一開始就并不總是包含在一個項目中，而且當(dāng)概念被決定并且他們的創(chuàng)造性角色已經(jīng)被超越時，往往只會涉及到。
這個過程是錯誤的 一些最好的想法來自開發(fā)團(tuán)隊，所以確保從項目開始就與他們合作。與他們分享你的觀念和興奮，最終會帶來更好的想法和更好的執(zhí)行。
20.盡可能清楚地呈現(xiàn)
產(chǎn)生偉大的工作同樣重要，因為它是呈現(xiàn)它。如果您沒有正確呈現(xiàn)，您的最佳設(shè)計可以被忽略或拋棄。談到演講，你想解釋你的工作，就像你展示給四歲。請記住，對于您第一次看到您的設(shè)計而言，您完全清楚的可能并不清楚。
不要太貼近你的想法
知道什么時候提倡你的想法，并學(xué)習(xí)認(rèn)識你的團(tuán)隊或客戶什么時候不認(rèn)為他們是“一個”，這一點很細(xì)。作為一名設(shè)計師，您需要堅信自己所做的一切，但您也應(yīng)該樂意快速轉(zhuǎn)換您的任何想法并提出其他想法。不要忘記有多個解決方案。
按照您的設(shè)計進(jìn)行開發(fā)
如果您在代理機(jī)構(gòu)內(nèi)部工作，您可能會知道，在開發(fā)新的項目時，發(fā)現(xiàn)自己在設(shè)計新項目時遇到困難。與一般信念相反，您的項目工作不會在PSD和樣式表交付時結(jié)束。
如果您真的關(guān)心您的設(shè)計和交互方式的執(zhí)行情況，請不時檢查開發(fā)人員的老朋友，并盡可能地幫助他們確保每個小像素都是完美的。
顯示您正在進(jìn)行的工作
與社區(qū)共享您的樣式表和進(jìn)行中的組件
作為設(shè)計師社區(qū)的一部分，我們都非常喜歡看到最終結(jié)果，而且還在于正在進(jìn)行的工作。有時，由于幾個原因，項目的最佳部分被遺漏，并在“存檔”文件夾中丟失。
一旦項目完成，您得到客戶/生產(chǎn)者的批準(zhǔn)，就可以推廣該項目，如果可能的話，可能會對正在進(jìn)行的工作和設(shè)計進(jìn)行案例研究，而不是最終版本。
【網(wǎng)頁設(shè)計：網(wǎng)站布局的23個步驟】相關(guān)文章：
網(wǎng)頁設(shè)計的布局04-20
步驟和整體布局網(wǎng)頁設(shè)計詳細(xì)教程介紹04-30
網(wǎng)頁設(shè)計布局的理解04-07
網(wǎng)頁設(shè)計的布局理解02-25
網(wǎng)頁設(shè)計布局方法01-31
網(wǎng)頁布局設(shè)計的技巧03-04
常見的網(wǎng)頁布局設(shè)計11-02