優(yōu)秀的網(wǎng)站布局

《優(yōu)秀的網(wǎng)站布局》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、01.先在紙上整理思緒世界各處城市插圖系列簡(jiǎn)筆此條顯然很重要，但是我經(jīng)常發(fā)現(xiàn)一些設(shè)計(jì)師會(huì)跳過(guò)這步直接使用PhotoshopCS6而不去思考他們需要解決的問(wèn)題。設(shè)計(jì)的目的在于解決問(wèn)題，而這些有待解決的問(wèn)題無(wú)法通過(guò)漸變或陰影效果得到解決，而是需要完美的布局和清晰的結(jié)構(gòu)。想一想內(nèi)容、布局和功能,然后再開(kāi)始上陰影效果。02.從頂層框架草圖入手草繪基本的框架將幫助你解決UX問(wèn)題，并組織布局結(jié)構(gòu)如果我要做一個(gè)項(xiàng)目的夕卜觀和感覺(jué)第一件事就是先建一個(gè)頂層框架可解決所有設(shè)計(jì)問(wèn)題?？蚣苁侵竷?nèi)容周?chē)腢I,有助于執(zhí)行操作并逬行瀏覽

2、。其中包括導(dǎo)航和各類(lèi)組件，例如邊欄和底欄。如果你從這點(diǎn)著手設(shè)計(jì)，則設(shè)計(jì)主頁(yè)以外的部分時(shí)，布局內(nèi)容將了然于心。03.為PSD添加網(wǎng)格以10像素基線(xiàn)繪制的978網(wǎng)格示例這步操作非常簡(jiǎn)單。在Photoshop中著手設(shè)計(jì)任何內(nèi)容前，你需要?jiǎng)?chuàng)建一個(gè)合適的網(wǎng)格。這一步的道理眾所周知,如果你沒(méi)有這么做，我可以斷言,最后的設(shè)計(jì)總是無(wú)法盡善盡美。借助于網(wǎng)格，你能安排不同部分的布局結(jié)構(gòu)；還能指導(dǎo)你按照特定屏幕尺寸要求進(jìn)行設(shè)計(jì),并能幫助你創(chuàng)建相應(yīng)的模板,以便符合間距和其他設(shè)計(jì)問(wèn)題。04.選擇排版樣式根據(jù)常規(guī)經(jīng)驗(yàn)，一個(gè)網(wǎng)站布局中所用

3、字型最好不要超過(guò)兩種了解不同的字型和配色是項(xiàng)目開(kāi)發(fā)階段的工作。我建議一個(gè)網(wǎng)站中所用字型不要超過(guò)兩種,不過(guò)實(shí)際上，還需取決于你可用的色系?？傊x字體需便于閱讀大量文字，且與標(biāo)題和操作相映成趣。大膽使用大字體，并在使用字型時(shí)保持整體一致性和生動(dòng)感。05.選擇找顏色使用有限的色階和色調(diào)以免產(chǎn)生視覺(jué)疲勞選完要使用的一系列字型后，你應(yīng)開(kāi)始研究UI、背景和文本該用什么顏色。關(guān)于顏色，我建議在處理常規(guī)用戶(hù)界面是用色及色調(diào)需簡(jiǎn)潔。根據(jù)元素功能在設(shè)計(jì)UI時(shí)保持一致性非常重要。想想Facebook.Twitter.Quora

4、和Vimeo之類(lèi)的網(wǎng)站布局。除UI夕卜，插圖或圖形細(xì)節(jié)部分只要沒(méi)有干擾組件功能的話(huà)，在用色方面也沒(méi)什么限制。06.劃分布局Innm-AtioninStor)1ellingandTechnology?DIGITALCOMMERCIALSTV■—pwC■皿FEATUREFILMSPRODUCTS網(wǎng)站結(jié)構(gòu)越簡(jiǎn)單，用戶(hù)瀏覽時(shí)就越方便網(wǎng)站各個(gè)部分都需要發(fā)揮各自的作用。對(duì)于用戶(hù)而言，每個(gè)部分都有各自存在的理由,并能得到相應(yīng)的最終結(jié)果。布局需要幫助強(qiáng)調(diào)其內(nèi)容著重顯示該部分最重要的信息。實(shí)際上，一個(gè)頁(yè)面并不需要太多調(diào)用按鈕，

5、因此每個(gè)內(nèi)容都應(yīng)推動(dòng)到最終〃我可以在此實(shí)現(xiàn)什么目的"。思考一下,爾可以為一個(gè)簡(jiǎn)單的目標(biāo)構(gòu)想到的最簡(jiǎn)單的布局,并開(kāi)始添加所需組件。最后你會(huì)驚喜的發(fā)現(xiàn)簡(jiǎn)潔也并非易事。07.重新思考已建內(nèi)容我們真的還需要一個(gè)搜索按鈕嗎？在大多數(shù)情況下，答案是不。作為設(shè)計(jì)人員，我們構(gòu)建了用戶(hù)瀏覽互聯(lián)網(wǎng)的方式，需要采取多少步驟才能執(zhí)行一個(gè)簡(jiǎn)單的操作以及網(wǎng)站的復(fù)雜性都是由我們來(lái)決定的。我們一直都在遵循一些設(shè)計(jì)模式和慣例,因?yàn)樗鼈兦袑?shí)有效，但有時(shí)候只是因?yàn)闆](méi)人有足夠的時(shí)間進(jìn)行衡量或者重新思考。重新思考組件上已建的交互模式，并看看是否可以進(jìn)

6、行改進(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)畫(huà)或?qū)徝栏惺?，例如按鈕上的小漸變或是背景盒子周?chē)奈?/p>

7、妙筆畫(huà)之類(lèi)。但是總的來(lái)說(shuō),如果你樂(lè)在其中,這種感受非常重要,而且非常自然。10.認(rèn)真對(duì)待每個(gè)組件,就當(dāng)參加設(shè)計(jì)比賽注重每個(gè)組件，一加_大于二我必須承認(rèn)這并不是我首創(chuàng)的理論。過(guò)去曾在FantasyInteractive上聽(tīng)到這種說(shuō)法,當(dāng)時(shí)我就震驚了，這句話(huà)如此明確中肯。每個(gè)組件都需單獨(dú)設(shè)計(jì)，使其卓絕超凡。有時(shí)候,設(shè)計(jì)師會(huì)將一些部分歸為最不重要的內(nèi)容,最終并不會(huì)對(duì)其引起重視。10.提高設(shè)計(jì)作品清晰度★★★esomecontrols,Iwishphonetoo!★★★esomecontrols,Iwishphone

8、too!lews(24total)避免出現(xiàn)像素模糊的現(xiàn)象,嘗試正確設(shè)置筆觸效果和背景之間的對(duì)比度或背景顏色除美學(xué)考量之外，有些共同的問(wèn)題需要予以避免，從而創(chuàng)造出一個(gè)干凈正確的作品。嘗試提高設(shè)計(jì)清晰度時(shí)應(yīng)注意以下幾點(diǎn)：梯度條帶、模糊的邊緣、字體渲染選項(xiàng)（部分字體取決于字體大小，最好在特定的渲染模式下查看）以及與背景融合的筆觸效果。以上列出了一些基本注意事項(xiàng)，但實(shí)際上需要注意的問(wèn)題還有很多。務(wù)必以整體視