網(wǎng)站建設20 步打造完美網(wǎng)站布局設計發(fā)布者：本站     時(shí)間：2022-03-30 11:03:36

開(kāi)始講述設計網(wǎng)站布局的主題之前，我想先分享自己多年從事設計工作中看到的一些常見(jiàn)錯誤，尤其是“網(wǎng)站設計培訓”中所述的實(shí)習生和新手們的通病。

 

 

本文羅列了打造完美網(wǎng)站布局的步驟，旨在涵蓋開(kāi)始新項目前以及項目設計過(guò)程中的各項應知應會(huì )，適合數字廣告公司內就職的所有網(wǎng)站設計師新人閱讀。

以下原則不僅包含各種設計細節，還提供了常規工作流程，從而幫助您出色地完成工作。遵循這些原則，您很快就能上手，設計出專(zhuān)業(yè)的網(wǎng)站布局。

 

01. 先在紙上整理思緒

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

世界各處城市插圖系列簡(jiǎn)筆

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

 

02. 從頂層框架草圖入手

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

 草繪基本的框架將幫助你解決 UX 問(wèn)題，并組織布局結構

如果我要做一個(gè)項目的外觀(guān)和感覺(jué)，第一件事就是先建一個(gè)頂層框架，可解決所有設計問(wèn)題?？蚣苁侵竷热葜?chē)?UI，有助于執行操作并進(jìn)行瀏覽。其中包括導航和各類(lèi)組件，例如邊欄和底欄。

如果你從這點(diǎn)著(zhù)手設計，則設計主頁(yè)以外的部分時(shí)，布局內容將了然于心。

 

 

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

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

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

這步操作非常簡(jiǎn)單。在 Photoshop 中著(zhù)手設計任何內容前，你需要創(chuàng )建一個(gè)合適的網(wǎng)格。這一步的道理眾所周知，如果你沒(méi)有這么做，我可以斷言，最后的設計總是無(wú)法盡善盡美。

借助于網(wǎng)格，你能安排不同部分的布局結構；還能指導你按照特定屏幕尺寸要求進(jìn)行設計，并能幫助你創(chuàng )建相應的模板，以便符合間距和其他設計問(wèn)題。

 

 

04. 選擇排版樣式

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

 根據常規經(jīng)驗，一個(gè)網(wǎng)站布局中所用字型最好不要超過(guò)兩種

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

 

 

05. 選擇主題顏色

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

使用有限的色階和色調以免產(chǎn)生視覺(jué)疲勞

選完要使用的一系列字型后，你應開(kāi)始研究 UI、背景和文本該用什么顏色。關(guān)于顏色，我建議在處理常規用戶(hù)界面是用色及色調需簡(jiǎn)潔。

根據元素功能在設計 UI 時(shí)保持一致性非常重要。想想 Facebook、Twitter、Quora 和 Vimeo 之類(lèi)的網(wǎng)站布局。除 UI 外，插圖或圖形細節部分只要沒(méi)有干擾組件功能的話(huà)，在用色方面也沒(méi)什么限制。

 

 

06. 劃分布局

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

網(wǎng)站結構越簡(jiǎn)單，用戶(hù)瀏覽時(shí)就越方便

網(wǎng)站各個(gè)部分都需要發(fā)揮各自的作用。對于用戶(hù)而言，每個(gè)部分都有各自存在的理由，并能得到相應的最終結果。布局需要幫助強調其內容著(zhù)重顯示該部分最重要的信息。實(shí)際上，一個(gè)頁(yè)面并不需要太多調用按鈕，因此每個(gè)內容都應推動(dòng)到最終“我可以在此實(shí)現什么目的”。

思考一下，你可以為一個(gè)簡(jiǎn)單的目標構想到的最簡(jiǎn)單的布局，并開(kāi)始添加所需組件。最后你會(huì )驚喜的發(fā)現簡(jiǎn)潔也并非易事。

 

 

07. 重新思考已建內容

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

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

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

 

 

08. 自我挑戰

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

 

 

09. 注意細節

20 步打造完美網(wǎng)站布局設計
正在進(jìn)行的游戲項目：細節視圖

這條也算是老生常談了，但并非始終在成品中得到應用。根據項目的概念，“關(guān)注點(diǎn)”也會(huì )有所不同。

可以注重小型交互、意想不到的動(dòng)畫(huà)或審美感受，例如按鈕上的小漸變或是背景盒子周?chē)奈⒚罟P畫(huà)之類(lèi)。但是總的來(lái)說(shuō)，如果你樂(lè )在其中，這種感受非常重要，而且非常自然。

 

 

10. 認真對待每個(gè)組件，就當參加設計比賽

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

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

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

 

 

11. 提高設計作品清晰度

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

避免出現像素模糊的現象，嘗試正確設置筆觸效果和背景之間的對比度或背景顏色

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

以上列出了一些基本注意事項，但實(shí)際上需要注意的問(wèn)題還有很多。務(wù)必以整體視角檢查設計，看看是不是都非常完美，然后再單獨分析每個(gè)組件還有什么問(wèn)題。

 

 

12. 整理 PSD

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

 

 

13. 設計最好的情況，但為最壞的情況做準備

 

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

謹記不同設備和尺寸大小上如何讓你的設計發(fā)揮作用

作為設計師，我們的工作就是通過(guò)不同的限制解決問(wèn)題。網(wǎng)頁(yè)設計過(guò)程中，會(huì )遇到各種限制，包括概念和技術(shù)問(wèn)題以及內容相關(guān)的問(wèn)題。

我們需要創(chuàng )建一個(gè)網(wǎng)站，其不僅可以在理想狀態(tài)下運行，同時(shí)也可以在最糟糕的環(huán)境下運行。例如，用戶(hù)可使用相當小的屏幕查看網(wǎng)站，此時(shí)網(wǎng)站上的內容看起來(lái)支離破碎。

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

 

 

14. 沉迷于設計，因愛(ài)生恨

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

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

 

 

15. 與客戶(hù)交流前避免浪費太多時(shí)間設計概念

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

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

 

 

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

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

紐約廣告公司 HUGE 的 Rafael Mumme 就設計師如何更好地與開(kāi)發(fā)者合作的提出的建議，請訪(fǎng)問(wèn) www.netmagazine.com/opinions/20-things-drive-web-developers-crazy

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

 

 

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

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

 

 

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

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

 

 

19. 開(kāi)發(fā)過(guò)程中跟進(jìn)設計

如果您在廣告公司中工作，你必須明白，雖然你剛剛完成的一個(gè)項目已經(jīng)投入開(kāi)發(fā)，你不得不參加另一個(gè)新項目的設計，這是家常便飯。大家普遍認為 PSD 和樣式表提交后就萬(wàn)事大吉了，這是不對的，其實(shí)一切還剛剛開(kāi)始。

如果你真的關(guān)心自己的設計和交互理念是否完全貫徹，可以實(shí)時(shí)與開(kāi)發(fā)者友人溝通，并盡量提供幫助，以便達到至臻至美的效果。

 

 

20. 逐步正在設計的作品

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

與大家分享樣式表和正在設計的組件

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