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