詳解創(chuàng)造完美網(wǎng)站布局的20個(gè)步驟

在這篇文章中，Claudio Guglieri將為你詳細(xì)解讀網(wǎng)頁(yè)布局設(shè)計(jì)的全過(guò)程。

　　在我們開(kāi)始討論有關(guān)網(wǎng)頁(yè)布局的主題之前，我首先想到了我在多年的設(shè)計(jì)生涯中看到過(guò)的一些常見(jiàn)錯(cuò)誤，特別是網(wǎng)頁(yè)設(shè)計(jì)新手和實(shí)習(xí)生常會(huì)犯的那些錯(cuò)誤。

　　在文章后面列出的完美網(wǎng)頁(yè)布局設(shè)計(jì)的20個(gè)步驟中，我嘗試覆蓋到我認(rèn)為每一位網(wǎng)頁(yè)設(shè)計(jì)師在他們開(kāi)始新的項(xiàng)目之前都應(yīng)該知道的內(nèi)容，以及他們?cè)?a href="http://m.pkvc.cn" id="11_nwl" style="margin: 0px; padding: 0px; color: rgb(102, 102, 102); text-decoration: none;" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)流程中應(yīng)該注意的內(nèi)容。

　　這些原則不僅包括了諸如登陸頁(yè)設(shè)計(jì)在內(nèi)的設(shè)計(jì)方面的內(nèi)容，也包括如何使得工作成果更完美的工作流程分析。學(xué)好它們，你就在成為專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師的道路上邁出了第一步。

　　1.先把你的想法畫(huà)到稿紙上

　　原始草圖：世界各城市

　　這顯而易見(jiàn)，但是我卻常常發(fā)現(xiàn)設(shè)計(jì)師們經(jīng)常跳過(guò)這一步，在考慮任何可能會(huì)遇到的問(wèn)題之前就直接打開(kāi)Photoshop開(kāi)始工作。設(shè)計(jì)是要解決問(wèn)題的——如何有效傳達(dá)信息的問(wèn)題。這些問(wèn)題不是通過(guò)添加或者陰影就能解決的，只有好的網(wǎng)頁(yè)布局和層級(jí)結(jié)構(gòu)設(shè)計(jì)才能造就出優(yōu)秀的網(wǎng)頁(yè)界面。在你打開(kāi)Photoshop之前，好好考慮你的網(wǎng)頁(yè)內(nèi)容、網(wǎng)頁(yè)布局和層級(jí)結(jié)構(gòu)。

　　2.從繪制頂級(jí)框架開(kāi)始

　　繪制基本的鏈接關(guān)系有助于你解決UX問(wèn)題和構(gòu)建網(wǎng)頁(yè)布局

　　當(dāng)我被要求要為網(wǎng)頁(yè)設(shè)計(jì)出“感覺(jué)”時(shí)，我做的第一件事就是設(shè)計(jì)網(wǎng)頁(yè)的頂級(jí)框架，這會(huì)解決所有的設(shè)計(jì)問(wèn)題。這里所說(shuō)的框架指的是在網(wǎng)頁(yè)內(nèi)容周?chē)腢I(用戶交互界面)，它們引導(dǎo)用戶瀏覽網(wǎng)站，框架包括導(dǎo)航和類似側(cè)邊欄和底部導(dǎo)航欄的交互元件。

　　如果你在設(shè)計(jì)時(shí)采用這種方法，你就會(huì)在設(shè)計(jì)首頁(yè)之外的網(wǎng)頁(yè)時(shí)，對(duì)你的布局的需要有一個(gè)清楚的了解。

　　3.在你的PSD文件中添加網(wǎng)格

　　10像素基線的978個(gè)網(wǎng)格

　　這就和它聽(tīng)起來(lái)一樣簡(jiǎn)單。在Photoshop中設(shè)計(jì)任何東西之前，你最好先繪制一個(gè)網(wǎng)格以備參照。沒(méi)有明顯的理由不使用網(wǎng)格，但是有明顯的理由使用網(wǎng)格!我可以保證，有網(wǎng)格，你肯定能做得更好!

　　網(wǎng)格幫助你完成界面的劃分，網(wǎng)格能引導(dǎo)你的設(shè)計(jì)滿足不同大小的屏幕的需求，在諸如留白等方面保持設(shè)計(jì)上的一貫性。

　　4.選擇字體

　　一個(gè)通用的原則就是，在網(wǎng)站布局中不要使用超過(guò)兩種的字體。

　　探索使用不同的字體和顏色是項(xiàng)目設(shè)計(jì)過(guò)程中不可或缺的一步。我推薦在網(wǎng)頁(yè)中不要使用兩種以上的字體，但是你也可以依據(jù)實(shí)際情況進(jìn)行增減。一般來(lái)說(shuō)，選擇一種容易閱讀的字體(用于大段的文本)和一種有趣的字體(用于標(biāo)題和交互)即可。不要害怕使用大字體。總的來(lái)說(shuō)，在使用字體時(shí)一定要注意保持趣味性和連續(xù)性。

　　5.選擇顏色主題

　　使用有限的顏色和色調(diào)來(lái)避免視覺(jué)疲勞。

　　在為你的網(wǎng)頁(yè)選擇一套字體的過(guò)程中，你應(yīng)當(dāng)從考慮在UI、背景和文本中使用何種顏色開(kāi)始。對(duì)于一般的用戶交互界面，我推薦使用有限種顏色和有限的色調(diào)變化。

　　在UI設(shè)計(jì)環(huán)節(jié)，請(qǐng)務(wù)必在保持配色的連續(xù)性的同時(shí)參考元件的功能。參考下Facebook、Twitter、Quora和Vimeo(翻譯小編表示：很不幸，這些網(wǎng)站都是得fq才上得去的)的布局設(shè)計(jì)。除了UI之外，不應(yīng)該對(duì)插畫(huà)或細(xì)節(jié)有任何顏色限制——只要它們不和UI元件的功能有所關(guān)聯(lián)就行。

　　6.將布局分塊

　　網(wǎng)站的結(jié)構(gòu)越簡(jiǎn)單，用戶瀏覽起來(lái)就越容易

　　你網(wǎng)站的每一個(gè)部分都需要有話可說(shuō)，需要有閱讀的價(jià)值，而布局則應(yīng)當(dāng)有助于凸顯文章中的亮點(diǎn)內(nèi)容。實(shí)際上，在同一張頁(yè)面上不應(yīng)該有太多的動(dòng)作呼告，所有的一切都應(yīng)該有助于瀏覽者明白“我能在這兒做什么”。

　　從一個(gè)簡(jiǎn)單的目的出發(fā)，構(gòu)想一個(gè)你能想象得出的最簡(jiǎn)單的布局，然后再加上有必要添加的元件，到最后你就會(huì)驚訝的發(fā)現(xiàn)，保持布局的簡(jiǎn)潔是如此之簡(jiǎn)單!

　　7.反思現(xiàn)有的

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

　　作為設(shè)計(jì)師，我們塑造了人們?yōu)g覽互聯(lián)網(wǎng)的方式，我們決定了完成一個(gè)簡(jiǎn)單的操作所需要的步驟，我們決定了我們的網(wǎng)站是否有效率。設(shè)計(jì)樣式和范例之所以存在，是因?yàn)樗鼈兇_實(shí)有效。但是，有時(shí)候它們之所以存在只是因?yàn)闆](méi)有人花時(shí)間思考它們存在的意義。這很重要：去重新考慮已有的交互方式，看看我們?nèi)绾尾拍芴嵘鼈儭?/p>

　　8.挑戰(zhàn)自我

　　我鼓勵(lì)每個(gè)設(shè)計(jì)師在他們的每個(gè)項(xiàng)目上都能夠挑戰(zhàn)自我。項(xiàng)目并不總是需要有所創(chuàng)新的，所以創(chuàng)新這回事完全靠我們?cè)O(shè)計(jì)師的主動(dòng)性。挑戰(zhàn)的例子包括哪些?比如使用新的網(wǎng)格系統(tǒng)、創(chuàng)造一個(gè)新的元件、或者更多細(xì)微之處的超越：避免混合模式或使用一種特定的顏色。

　　9.完善細(xì)節(jié)

　　游戲半成品：扣扣細(xì)節(jié)

　　這是個(gè)老生常談的問(wèn)題但實(shí)際上最終的產(chǎn)品總是有很多細(xì)節(jié)缺陷。取決于項(xiàng)目背后的理念，“細(xì)節(jié)”可以變現(xiàn)為很多種形式。它可以是一個(gè)小交互元件，一種出人意料的動(dòng)畫(huà)，也可以是在按鈕上的一點(diǎn)漸變或者方框周?chē)拿柽叄偟膩?lái)說(shuō)，這些細(xì)節(jié)必須是有實(shí)際需要的，而且看起來(lái)是自然的。

　　10.對(duì)每一個(gè)元件高標(biāo)準(zhǔn)嚴(yán)要求

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

　　我得承認(rèn)這一部分不是我想出來(lái)的，我是在 Fantasy Interactive上看到的。我真的驚訝于這句話是多么正確和明晰。每一個(gè)元件都應(yīng)該被設(shè)計(jì)得即使被單獨(dú)拎出來(lái)開(kāi)，也是一個(gè)杰作。有些設(shè)計(jì)師會(huì)把這些小問(wèn)題遺留在“待處理”上，然后到最后也沒(méi)想起來(lái)它們。

　　11.銳化你的設(shè)計(jì)

　　為了避免像素的模糊，嘗試在筆畫(huà)和背景或背景顏色之間創(chuàng)建合適的對(duì)比

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

　　這些問(wèn)題只是一些基本的例子，但在現(xiàn)實(shí)中這樣的例子舉不勝舉。總是把你的設(shè)計(jì)當(dāng)做一個(gè)整體來(lái)看是否一切都能協(xié)調(diào)運(yùn)行，然后再仔細(xì)地分析每一個(gè)組件。

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

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

　　13.一顆紅心，兩手準(zhǔn)備

　　牢牢記?。耗愕牟季衷诓煌脑O(shè)備和屏幕上會(huì)如何運(yùn)作

　　作為設(shè)計(jì)師，我們的任務(wù)就是在各種各樣的限制下解決問(wèn)題。在網(wǎng)頁(yè)設(shè)計(jì)中，這些限制包括概念性、技術(shù)性的問(wèn)題，也包括與內(nèi)容有關(guān)的問(wèn)題。

　　我們建立的站點(diǎn)不僅需要能在理想的設(shè)備上完美呈現(xiàn)，在不理想的情況下也不能顯得太差勁。然而，為了呈現(xiàn)我們的作品，我總是強(qiáng)烈推薦為最好的情形設(shè)計(jì)網(wǎng)頁(yè)。因而，我們?yōu)樽疃鄶?shù)用戶的理想使用情景設(shè)計(jì)網(wǎng)頁(yè)。

　　14.反復(fù)觀察，直到厭煩你的設(shè)計(jì)

　　如果你對(duì)設(shè)計(jì)充滿激情，我確定這就是你也在做的事情。當(dāng)我做完一項(xiàng)令我自己都感到自豪的作品時(shí)，我都會(huì)把它作為我生命中的一部分。我會(huì)給它截屏，用它當(dāng)屏保，甚至把它打印下來(lái)然后貼在墻上。

　　這樣做的結(jié)果就是，我最終就會(huì)變得討厭它了，我開(kāi)始看出它的缺陷并最終把它打入冷宮。討厭你當(dāng)前的作品，是一種成熟的標(biāo)志，它意味著你總算從你的錯(cuò)誤中學(xué)到了些東西。

　　15.在和你的客戶分享之前，避免花費(fèi)過(guò)多的時(shí)間在一個(gè)概念上

　　當(dāng)你想到一個(gè)新的交互概念或者一個(gè)“看起來(lái)很有感覺(jué)”的設(shè)計(jì)點(diǎn)子的時(shí)候，你需要確定你的客戶也這么想。如果你的客戶也喜歡你的想法的話那還好辦，盡可以放手去做，但是萬(wàn)一客戶不喜歡你的新創(chuàng)意，那你就不得不花費(fèi)很多時(shí)間把你的設(shè)計(jì)改回去。在把新概念付諸實(shí)施之前，盡可能多地收取客戶反饋。

　　16.做程序員最好的朋友

　　Yahoo的Rafael Mumme給出了幾條幫助射雞濕和程序猿融洽搞基的好建議：http://creativebloq.com/design/20-things-drive-web-developers-crazy-7116930

　　程序員們也都是有創(chuàng)造力的人類呢，相比于設(shè)計(jì)師，他們對(duì)他們的工作也有近乎狂熱的情感。但他們往往不是在項(xiàng)目一開(kāi)始就加入進(jìn)來(lái)，往往是概念決定以后，他們的創(chuàng)造力才會(huì)有用武之地。這個(gè)程序是錯(cuò)誤的。有些最好的點(diǎn)子就來(lái)自于開(kāi)發(fā)團(tuán)隊(duì)，所以在項(xiàng)目開(kāi)始之前就和他們團(tuán)結(jié)協(xié)作。和他們分享你的概念和激情，這將會(huì)引發(fā)出更多的好點(diǎn)子和更好的最終成品。

　　17.展示：把我當(dāng)三歲小孩吧

　　展示你的設(shè)計(jì)和設(shè)計(jì)本身一樣重要。如果你的展示一塌糊涂，你的設(shè)計(jì)也會(huì)被拋進(jìn)垃圾桶。永遠(yuǎn)記住，那些第一次看見(jiàn)你的設(shè)計(jì)的人可不像你那樣對(duì)它有足夠的了解。

　　18.愛(ài)你的設(shè)計(jì)，但不要迷戀

　　知道如何維護(hù)你的想法，也要學(xué)會(huì)明白有時(shí)候你可客戶就是不會(huì)認(rèn)同你的想法。作為一名設(shè)計(jì)師你需要對(duì)你做得事情有堅(jiān)定的信心，但是你也應(yīng)該能以open的心態(tài)迅速推翻一個(gè)想法并提出些新點(diǎn)子。不要忘了，解決方案不止一種。

　　19.追蹤你的設(shè)計(jì)，直到開(kāi)發(fā)環(huán)節(jié)

　　如果你在一個(gè)工作室工作，你或許已經(jīng)發(fā)現(xiàn)活真是一個(gè)接一個(gè)的來(lái)啊，上一個(gè)剛進(jìn)入開(kāi)發(fā)環(huán)節(jié)，新任務(wù)就又來(lái)了。和通常的看法相反，你的工作絕不止于將PSD文件交付給下一環(huán)節(jié)。如果你真的希望你的設(shè)計(jì)能夠完美呈現(xiàn)的話，記得時(shí)不時(shí)和程序員朋友們溝通一下，幫助他們同時(shí)確保你的設(shè)計(jì)中的每一個(gè)細(xì)節(jié)都付諸實(shí)現(xiàn)。

　　20.在設(shè)計(jì)社區(qū)分享你的設(shè)計(jì)進(jìn)度

　　作為設(shè)計(jì)師圈子中的一員，我們不僅喜歡看別人的成果，也樂(lè)于看到項(xiàng)目是如何進(jìn)行的。在為社區(qū)的知識(shí)庫(kù)做貢獻(xiàn)的同時(shí)，你也會(huì)收到有價(jià)值的建議或反饋。