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

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

　　在我們開始討論有關網(wǎng)頁布局的主題之前，我首先想到了我在多年的設計生涯中看到過的一些常見錯誤，特別是網(wǎng)頁設計新手和實習生常會犯的那些錯誤。

　　在文章后面列出的完美網(wǎng)頁布局設計的20個步驟中，我嘗試覆蓋到我認為每一位網(wǎng)頁設計師在他們開始新的項目之前都應該知道的內(nèi)容，以及他們在網(wǎng)頁設計流程中應該注意的內(nèi)容。

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

　　1.先把你的想法畫到稿紙上

　　原始草圖：世界各城市

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

　　2.從繪制頂級框架開始

　　繪制基本的鏈接關系有助于你解決UX問題和構建網(wǎng)頁布局

　　當我被要求要為網(wǎng)頁設計出“感覺”時，我做的第一件事就是設計網(wǎng)頁的頂級框架，這會解決所有的設計問題。這里所說的框架指的是在網(wǎng)頁內(nèi)容周圍的UI(用戶交互界面)，它們引導用戶瀏覽網(wǎng)站，框架包括導航和類似側邊欄和底部導航欄的交互元件。

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

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

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

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

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

　　4.選擇字體

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

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

　　5.選擇顏色主題

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

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

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

　　6.將布局分塊

　　網(wǎng)站的結構越簡單，用戶瀏覽起來就越容易

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

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

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

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

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

　　8.挑戰(zhàn)自我

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

　　9.完善細節(jié)

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

　　這是個老生常談的問題但實際上最終的產(chǎn)品總是有很多細節(jié)缺陷。取決于項目背后的理念，“細節(jié)”可以變現(xiàn)為很多種形式。它可以是一個小交互元件，一種出人意料的動畫，也可以是在按鈕上的一點漸變或者方框周圍的描邊，但總的來說，這些細節(jié)必須是有實際需要的，而且看起來是自然的。

　　10.對每一個元件高標準嚴要求

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

　　我得承認這一部分不是我想出來的，我是在 Fantasy Interactive上看到的。我真的驚訝于這句話是多么正確和明晰。每一個元件都應該被設計得即使被單獨拎出來開，也是一個杰作。有些設計師會把這些小問題遺留在“待處理”上，然后到最后也沒想起來它們。

　　11.銳化你的設計

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

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

　　這些問題只是一些基本的例子，但在現(xiàn)實中這樣的例子舉不勝舉?？偸前涯愕脑O計當做一個整體來看是否一切都能協(xié)調(diào)運行，然后再仔細地分析每一個組件。

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

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

　　13.一顆紅心，兩手準備

　　牢牢記?。耗愕牟季衷诓煌脑O備和屏幕上會如何運作

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

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

　　14.反復觀察，直到厭煩你的設計

　　如果你對設計充滿激情，我確定這就是你也在做的事情。當我做完一項令我自己都感到自豪的作品時，我都會把它作為我生命中的一部分。我會給它截屏，用它當屏保，甚至把它打印下來然后貼在墻上。

　　這樣做的結果就是，我最終就會變得討厭它了，我開始看出它的缺陷并最終把它打入冷宮。討厭你當前的作品，是一種成熟的標志，它意味著你總算從你的錯誤中學到了些東西。

　　15.在和你的客戶分享之前，避免花費過多的時間在一個概念上

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

　　16.做程序員最好的朋友

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

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

　　17.展示：把我當三歲小孩吧

　　展示你的設計和設計本身一樣重要。如果你的展示一塌糊涂，你的設計也會被拋進垃圾桶。永遠記住，那些第一次看見你的設計的人可不像你那樣對它有足夠的了解。

　　18.愛你的設計，但不要迷戀

　　知道如何維護你的想法，也要學會明白有時候你可客戶就是不會認同你的想法。作為一名設計師你需要對你做得事情有堅定的信心，但是你也應該能以open的心態(tài)迅速推翻一個想法并提出些新點子。不要忘了，解決方案不止一種。

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

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

　　20.在設計社區(qū)分享你的設計進度

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