20步打造完美網(wǎng)站布局設(shè)計(jì)

Claudio Guglieri 在紐約廣告公司 B-Reel 任職總監(jiān)，他撰寫了本網(wǎng)站設(shè)計(jì)培訓(xùn)指南，通過分享自己多年從事設(shè)計(jì)工作中看到的一些常見錯(cuò)誤，尤其是“網(wǎng)站設(shè)計(jì)培訓(xùn)”中所述的實(shí)習(xí)生和新手們的通病。來幫助您了解設(shè)計(jì)網(wǎng)站布局的全過程。

01. 先在紙上整理思緒

世界各處城市插圖系列簡筆

此條顯然很重要，但是我經(jīng)常發(fā)現(xiàn)一些設(shè)計(jì)師會(huì)跳過這步直接使用 Photoshop CS6 而不去思考他們需要解決的問題。設(shè)計(jì)的目的在于解決問題，而這些有待解決的問題無法通過漸變或陰影效果得到解決，而是需要完美的布局和清晰的結(jié)構(gòu)。想一想內(nèi)容、布局和功能，然后再開始上陰影效果。

02. 從頂層框架草圖入手 UX sketch

草繪基本的框架將幫助你解決 UX 問題，并組織布局結(jié)構(gòu)

如果我要做一個(gè)項(xiàng)目的外觀和感覺，第一件事就是先建一個(gè)頂層框架，可解決所有設(shè)計(jì)問題?？蚣苁侵竷?nèi)容周圍的 UI，有助于執(zhí)行操作并進(jìn)行瀏覽。其中包括導(dǎo)航和各類組件，例如邊欄和底欄。如果你從這點(diǎn)著手設(shè)計(jì)，則設(shè)計(jì)主頁以外的部分時(shí)，布局內(nèi)容將了然于心。

03. 為 PSD 添加網(wǎng)格

以 10 像素基線繪制的 978 網(wǎng)格示例

這步操作非常簡單。在 Photoshop 中著手設(shè)計(jì)任何內(nèi)容前，你需要?jiǎng)?chuàng)建一個(gè)合適的網(wǎng)格。這一步的道理眾所周知，如果你沒有這么做，我可以斷言，最后的設(shè)計(jì)總是無法盡善盡美。借助于網(wǎng)格，你能安排不同部分的布局結(jié)構(gòu);還能指導(dǎo)你按照特定屏幕尺寸要求進(jìn)行設(shè)計(jì)，并能幫助你創(chuàng)建相應(yīng)的模板，以便符合間距和其他設(shè)計(jì)問題。

04. 選擇排版樣式

根據(jù)常規(guī)經(jīng)驗(yàn)，一個(gè)網(wǎng)站布局中所用字型最好不要超過兩種。了解不同的字型和配色是項(xiàng)目開發(fā)階段的工作。我建議一個(gè)網(wǎng)站中所用字型不要超過兩種，不過實(shí)際上，還需取決于你可用的色系?？傊?，所選字體需便于閱讀大量文字，且與標(biāo)題和操作相映成趣。大膽使用大字體，并在使用字型時(shí)保持整體一致性和生動(dòng)感。

05. 選擇主題顏色

使用有限的色階和色調(diào)以免產(chǎn)生視覺疲勞。

選完要使用的一系列字型后，你應(yīng)開始研究 UI、背景和文本該用什么顏色。關(guān)于顏色，我建議在處理常規(guī)用戶界面是用色及色調(diào)需簡潔。根據(jù)元素功能在設(shè)計(jì) UI 時(shí)保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之類的網(wǎng)站布局。除 UI 外，插圖或圖形細(xì)節(jié)部分只要沒有干擾組件功能的話，在用色方面也沒什么限制。

06. 劃分布局

網(wǎng)站結(jié)構(gòu)越簡單，用戶瀏覽時(shí)就越方便。網(wǎng)站各個(gè)部分都需要發(fā)揮各自的作用。對(duì)于用戶而言，每個(gè)部分都有各自存在的理由，并能得到相應(yīng)的最終結(jié)果。布局需要幫助強(qiáng)調(diào)其內(nèi)容著重顯示該部分最重要的信息。實(shí)際上，一個(gè)頁面并不需要太多調(diào)用按鈕，因此每個(gè)內(nèi)容都應(yīng)推動(dòng)到最終“我可以在此實(shí)現(xiàn)什么目的”。思考一下，你可以為一個(gè)簡單的目標(biāo)構(gòu)想到的最簡單的布局，并開始添加所需組件。最后你會(huì)驚喜的發(fā)現(xiàn)簡潔也并非易事。

07. 重新思考已建內(nèi)容

我們真的還需要一個(gè)搜索按鈕嗎?在大多數(shù)情況下，答案是不。

作為設(shè)計(jì)人員，我們構(gòu)建了用戶瀏覽互聯(lián)網(wǎng)的方式，需要采取多少步驟才能執(zhí)行一個(gè)簡單的操作以及網(wǎng)站的復(fù)雜性都是由我們來決定的。我們一直都在遵循一些設(shè)計(jì)模式和慣例，因?yàn)樗鼈兦袑?shí)有效，但有時(shí)候只是因?yàn)闆]人有足夠的時(shí)間進(jìn)行衡量或者重新思考。重新思考組件上已建的交互模式，并看看是否可以進(jìn)行改進(jìn)，這點(diǎn)至關(guān)重要。

08. 自我挑戰(zhàn)

我鼓勵(lì)每位設(shè)計(jì)人員不要墨守成規(guī)，而是在每個(gè)項(xiàng)目上進(jìn)行自我挑戰(zhàn)。并非每個(gè)項(xiàng)目都要求創(chuàng)新，因此，需要我們自己決定是否要增加一些交互設(shè)計(jì)相關(guān)的內(nèi)容。比如，各種自我挑戰(zhàn)可能包括使用新的網(wǎng)格系統(tǒng)、創(chuàng)建新的組件，或者甚至包括一些小挑戰(zhàn)，諸如避免混合模式或者避免使用特定的顏色。

09. 注意細(xì)節(jié)

正在進(jìn)行的游戲項(xiàng)目：細(xì)節(jié)視圖

這條也算是老生常談了，但并非始終在成品中得到應(yīng)用。根據(jù)項(xiàng)目的概念，“關(guān)注點(diǎn)”也會(huì)有所不同。可以注重小型交互、意想不到的動(dòng)畫或?qū)徝栏惺?，例如按鈕上的小漸變或是背景盒子周圍的微妙筆畫之類。但是總的來說，如果你樂在其中，這種感受非常重要，而且非常自然。

10. 認(rèn)真對(duì)待每個(gè)組件，就當(dāng)參加設(shè)計(jì)比賽

注重每個(gè)組件，一加一大于二

我必須承認(rèn)這并不是我首創(chuàng)的理論。過去曾在 Fantasy Interactive 上聽到這種說法，當(dāng)時(shí)我就震驚了，這句話如此明確中肯。每個(gè)組件都需單獨(dú)設(shè)計(jì)，使其卓絕超凡。有時(shí)候，設(shè)計(jì)師會(huì)將一些部分歸為最不重要的內(nèi)容，最終并不會(huì)對(duì)其引起重視。

11. 提高設(shè)計(jì)作品清晰度

避免出現(xiàn)像素模糊的現(xiàn)象，嘗試正確設(shè)置筆觸效果和背景之間的對(duì)比度或背景顏色

除美學(xué)考量之外，有些共同的問題需要予以避免，從而創(chuàng)造出一個(gè)干凈正確的作品。嘗試提高設(shè)計(jì)清晰度時(shí)應(yīng)注意以下幾點(diǎn)：梯度條帶、模糊的邊緣、字體渲染選項(xiàng)(部分字體取決于字體大小，最好在特定的渲染模式下查看)以及與背景融合的筆觸效果。

12. 整理如果你通過 Photoshop 進(jìn)行設(shè)計(jì)，那么這點(diǎn)至關(guān)重要(結(jié)合網(wǎng)格使用)。無論項(xiàng)目有多大，有多少設(shè)計(jì)師參與其中，你都需要保證文件干凈。這樣就能保證不同部分都能輕松導(dǎo)出，從而提高設(shè)計(jì)流程的速度，并能處理與其他設(shè)計(jì)師共享的文件。

13. 設(shè)計(jì)最好的情況，但為最壞的情況做準(zhǔn)備

謹(jǐn)記不同設(shè)備和尺寸大小上如何讓你的設(shè)計(jì)發(fā)揮作用。

作為設(shè)計(jì)師，我們的工作就是通過不同的限制解決問題。網(wǎng)頁設(shè)計(jì)過程中，會(huì)遇到各種限制，包括概念和技術(shù)問題以及內(nèi)容相關(guān)的問題。我們需要?jiǎng)?chuàng)建一個(gè)網(wǎng)站，其不僅可以在理想狀態(tài)下運(yùn)行，同時(shí)也可以在最糟糕的環(huán)境下運(yùn)行。例如，用戶可使用相當(dāng)小的屏幕查看網(wǎng)站，此時(shí)網(wǎng)站上的內(nèi)容看起來支離破碎。

但是，鑒于我們展示設(shè)計(jì)作品的目的，我個(gè)人強(qiáng)烈建議為其創(chuàng)建最佳環(huán)境。因此我們將要顯示最理想的內(nèi)容量，同時(shí)以最佳瀏覽器尺寸進(jìn)行展示，也就是用戶最常用的環(huán)境。

14. 沉迷于設(shè)計(jì)，因愛生恨

如果你鉆研設(shè)計(jì)，我保證你已經(jīng)干過這種事。只要完成一項(xiàng)設(shè)計(jì)就會(huì)倍感自豪，設(shè)計(jì)已經(jīng)成為生活的一部分了。還會(huì)截圖，與其他設(shè)備比較，將其設(shè)為桌面背景，甚至打印出來掛在墻上。

整個(gè)過程中，我達(dá)到某個(gè)臨界點(diǎn)，最終產(chǎn)生厭惡;我開始發(fā)現(xiàn)各種缺點(diǎn)和錯(cuò)誤，然后進(jìn)行修改。不喜歡自己以前的設(shè)計(jì)是成熟的表現(xiàn)，也就是說，你最終發(fā)現(xiàn)自己的問題。

15. 與客戶交流前避免浪費(fèi)太多時(shí)間設(shè)計(jì)概念

提交交互概念或設(shè)計(jì)外觀與體驗(yàn)時(shí)，你需要確保你和客戶盡快同步。初始概念通過審核后，你可以稍作放松，然后開始設(shè)計(jì)。

但是如果提交后初始概念后，并未深得客戶的歡心，你就應(yīng)該收集各種反饋，以便第二次提交的概念方案能夠符合客戶的要求。

16. 和你的開發(fā)者成為好友

紐約廣告公司 HUGE 的 Rafael Mumme 就設(shè)計(jì)師如何更好地與開發(fā)者合作的提出的建議。

開發(fā)者創(chuàng)意十足，而且熱愛自己的工作，和你一樣。但是他們并非總是在項(xiàng)目一開始就參與其中，而且大多時(shí)候，他們都是在概念設(shè)計(jì)敲定之后才開始參與設(shè)計(jì)的，因此他們的創(chuàng)意工作就遭到了抹殺。這種流程是錯(cuò)誤的;一些非常優(yōu)秀的想法都是開發(fā)團(tuán)隊(duì)提出的。分享你的概念，你會(huì)驚喜地發(fā)現(xiàn)他們會(huì)把它變成更加美觀、更加便于設(shè)計(jì)。

17. 展示：說明時(shí)請(qǐng)將受眾想象為四歲兒童

展示作品和設(shè)計(jì)作品一樣重要。使用錯(cuò)誤的展示方式，可能會(huì)埋沒優(yōu)秀的設(shè)計(jì)或者使其慘遭淘汰。謹(jǐn)記，受眾第一次看到你的設(shè)計(jì)時(shí)，并不了解你了然于心的各個(gè)重點(diǎn)。

18. 肯定自己的創(chuàng)意，但不要成為其奴隸

了解何時(shí)宣傳自己的創(chuàng)意，或是了解團(tuán)隊(duì)或客戶何時(shí)會(huì)產(chǎn)生分歧，這里存在一個(gè)小小的臨界點(diǎn)。作為設(shè)計(jì)師，你需要堅(jiān)信自己的設(shè)計(jì)，但是你也應(yīng)樂于接受他人意見，快速改變自己的創(chuàng)意以及展開后續(xù)調(diào)整。不要忘記條條大路通羅馬。

19. 開發(fā)過程中跟進(jìn)設(shè)計(jì)

如果您在廣告公司中工作，你必須明白，雖然你剛剛完成的一個(gè)項(xiàng)目已經(jīng)投入開發(fā)，你不得不參加另一個(gè)新項(xiàng)目的設(shè)計(jì)，這是家常便飯。大家普遍認(rèn)為 PSD 和樣式表提交后就萬事大吉了，這是不對(duì)的，其實(shí)一切還剛剛開始。如果你真的關(guān)心自己的設(shè)計(jì)和交互理念是否完全貫徹，可以實(shí)時(shí)與開發(fā)者友人溝通，并盡量提供幫助，以便達(dá)到至臻至美的效果。

20. 逐步正在設(shè)計(jì)的作品

與大家分享樣式表和正在設(shè)計(jì)的組件

作為設(shè)計(jì)團(tuán)隊(duì)的一員，我們不僅希望看到最終的成品，同時(shí)也想看一看正在設(shè)計(jì)的作品。有時(shí)候，出于種種原因，項(xiàng)目最優(yōu)秀的部分可能會(huì)被忽略，然后一直存放在歸檔文件夾中。項(xiàng)目完成并獲得客戶/制作方認(rèn)可后，可以著手進(jìn)行改善，如有可能，可以創(chuàng)建案例研究，分析設(shè)計(jì)中的作品以及最終并未采用的作品。這有助于幫助拓寬團(tuán)隊(duì)知識(shí)，同時(shí)你也能收集寶貴的反饋意見。

Claudio Guglieri 目前在紐約國際電子廣告公司 B-Reel 就任藝術(shù)總監(jiān)。之前在 Fantasy Interactive 任藝術(shù)總監(jiān)，負(fù)責(zé)領(lǐng)導(dǎo)和制作客戶端交互體驗(yàn)，如 Google、EA CNN、Nikelodeon、History Channel、Range Roverand Microsoft。