• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 網(wǎng)站設(shè)計(jì)的創(chuàng)意與技巧

網(wǎng)站設(shè)計(jì)的創(chuàng)意與技巧

網(wǎng)頁(yè)設(shè)計(jì)師 于2019-08-15 18:42發(fā)表 閱讀次數(shù) 2523次

簡(jiǎn)潔的網(wǎng)站設(shè)計(jì)風(fēng)格一直是WEB潮流之一，在青島網(wǎng)站設(shè)計(jì)上也不例外。我們將首先對(duì)此類風(fēng)格當(dāng)中的那些最具代表性的組成要素進(jìn)行分析，隨后，還會(huì)向各位分享一些工作中的實(shí)戰(zhàn)技巧。 　　良好的文字排印良好的文字排印方案往往可以對(duì)簡(jiǎn)潔風(fēng)格的頁(yè)面設(shè)計(jì)起到事半功倍的推進(jìn)作用。 　　對(duì)字體數(shù)量的限制是這其中的一個(gè)關(guān)鍵因素。如果在同一套設(shè)計(jì)方案當(dāng)中運(yùn)用了過(guò)多的字體，它們彼此之間就會(huì)產(chǎn)生視覺(jué)上的競(jìng)爭(zhēng)與沖突，這無(wú)疑會(huì)使頁(yè)面變得凌亂不堪，用戶的閱讀連貫性也會(huì)受到極大的破壞。 　　看看那些設(shè)計(jì)優(yōu)秀的網(wǎng)站，你會(huì)發(fā)現(xiàn)它們通常只會(huì)用到一到兩種字體，并在此基礎(chǔ)上通過(guò)不同的字號(hào)、字色、粗細(xì)、間距等屬性來(lái)體現(xiàn)出內(nèi)容的層次結(jié)構(gòu)。 　　在這方面，紐約時(shí)報(bào)(TheNewYorkTimes)與TheMavenist都是不錯(cuò)的例子。 　　這兩個(gè)站點(diǎn)用到的字體都不超過(guò)兩種，但它們的設(shè)計(jì)方案都比較充分地利用了字體各方面的屬性特質(zhì)，使得整個(gè)頁(yè)面當(dāng)中的信息層次非常鮮明。 　　除了字體以外，行間距(line-height)也是文字排印方案當(dāng)中的一個(gè)關(guān)鍵性因素。使行與行之間保持足夠的空間，文字段落就能變得更加易讀，當(dāng)用戶閱讀到一行文字的末尾時(shí)，也可以很輕松的將目光轉(zhuǎn)向下一行開(kāi)頭的位置。我們可以在樣式表當(dāng)中通過(guò)line-height屬性對(duì)行間距進(jìn)行調(diào)整。 　　此外，對(duì)于每一行當(dāng)中的文字來(lái)說(shuō)，字間距(letter-spacing)也是我們需要考慮到的細(xì)節(jié)問(wèn)題。合理的字間距可以為文字帶來(lái)更好的呼吸感。 　　關(guān)于文字排印，也有些不錯(cuò)的文章(英文)推薦一看： 　　•ABasicLookatTypographyinWebDesign•CSSTypography:TheBasics•CSSTypography:TechniquesandBestPractices•CSSTypography:ExamplesandTools 　　簡(jiǎn)潔風(fēng)格的創(chuàng)意組成要素 　　固定寬度的頁(yè)面布局結(jié)構(gòu)花時(shí)間觀察一些簡(jiǎn)潔風(fēng)格的網(wǎng)站，你會(huì)發(fā)現(xiàn)它們當(dāng)中的絕大多數(shù)都有用到經(jīng)過(guò)良好規(guī)劃的網(wǎng)格布局系統(tǒng)。如果哪位朋友對(duì)網(wǎng)格布局還不大了解的話，可以設(shè)想一下，在著手進(jìn)行實(shí)際的視覺(jué)設(shè)計(jì)工作之前，使用輔助線將頁(yè)面劃分為若干等寬的列，通過(guò)這種方式對(duì)頁(yè)面結(jié)構(gòu)及元素的布局進(jìn)行更精準(zhǔn)的規(guī)劃。網(wǎng)格布局可以使設(shè)計(jì)方案當(dāng)中的信息結(jié)構(gòu)更加清晰，在視覺(jué)上具有強(qiáng)烈的節(jié)奏感與一致性。 　　固定寬度的網(wǎng)格布局結(jié)構(gòu)可以為頁(yè)面帶來(lái)秩序與效率。舉個(gè)例子，雖然CreativeReview當(dāng)中的頁(yè)面布局會(huì)根據(jù)內(nèi)容類型的不同而有所區(qū)別，但我們能夠感受到的瀏覽體驗(yàn)卻是相當(dāng)連貫的，因?yàn)檫@些頁(yè)面都是基于同一套網(wǎng)格布局框架進(jìn)行設(shè)計(jì)的。下圖展示了他家的首頁(yè)和About頁(yè)面： 　　對(duì)于在線雜志或報(bào)紙一類需要呈現(xiàn)大量?jī)?nèi)容的網(wǎng)站來(lái)說(shuō)，要打造簡(jiǎn)潔的頁(yè)面設(shè)計(jì)方案則更加困難。不過(guò)英國(guó)的衛(wèi)報(bào)(TheGuardian)以及一些同類型的在線報(bào)紙站點(diǎn)倒是向我們展示了通過(guò)固定寬度的網(wǎng)格布局實(shí)現(xiàn)簡(jiǎn)潔設(shè)計(jì)方案的可行性： 　　如果不使用固定寬度的布局方式來(lái)組織這些內(nèi)容，幾乎可以說(shuō)，首頁(yè)將會(huì)亂的一塌糊涂。然而，在網(wǎng)格布局的幫助下，模塊之間的留白及層次關(guān)系都相當(dāng)清晰，整個(gè)內(nèi)容結(jié)構(gòu)的健壯性得到了提升。 　　下面兩篇文章(英文)可以幫助你更好的理解與實(shí)踐網(wǎng)格布局的概念： 　　•ABriefLookatGrid-BasedLayoutsinWebDesign 　　•The960GridSystemMadeEasy 　　也不是什么新概念了，國(guó)產(chǎn)好文章也蠻多，有欲求的同學(xué)可自行覓食——譯者C7210注。 　　一致的圖片樣式如果同一個(gè)網(wǎng)站當(dāng)中的圖片(照片、插畫、圖表等)樣式差別很大，你會(huì)覺(jué)得焦慮么？反正我會(huì)。 　　對(duì)于內(nèi)容當(dāng)中有可能包含很多圖片的網(wǎng)站或頁(yè)面來(lái)說(shuō)，要落實(shí)簡(jiǎn)潔至上的設(shè)計(jì)思路，其中最關(guān)鍵的一點(diǎn)就是要通過(guò)和諧統(tǒng)一的樣式風(fēng)格將這些視覺(jué)元素呈現(xiàn)出來(lái)。 　　舉例來(lái)說(shuō)，IBM的智能星球運(yùn)動(dòng)(SmarterPlanetcampaign)涉及到多個(gè)方面的主題，與其相關(guān)的印刷品、插畫、圖表、人機(jī)互動(dòng)素材等都遵從著同一套方案標(biāo)準(zhǔn)，包括幾何框架、線條風(fēng)格、色彩飽和度等。無(wú)論是在網(wǎng)站，還是在平面媒體中，相關(guān)主題的視覺(jué)表現(xiàn)形式都具有高度的一致性。 　　在Protein中，藝術(shù)家們的照片并不是統(tǒng)一拍攝的，但從視覺(jué)效果上看，無(wú)論構(gòu)圖、景深還是光影等方面，這些照片都具有相似的表現(xiàn)。圖片個(gè)體之間在視覺(jué)上的一致性，可以使頁(yè)面體現(xiàn)出良好的整體感。 　　不過(guò)在很多情況下，我們確實(shí)難以對(duì)頁(yè)面里的圖片表現(xiàn)形式進(jìn)行有效的管理。一方面，用戶上傳的圖片是難以控制的，另外，對(duì)于新聞網(wǎng)站或博客來(lái)說(shuō)，也不可能因?yàn)楸憩F(xiàn)形式的問(wèn)題而舍棄具有重要內(nèi)容價(jià)值的圖片。另外，客戶也未必有預(yù)算去支持圖表或插圖的重新繪制，設(shè)計(jì)師必須利用現(xiàn)有資源辦事兒。在這類情況當(dāng)中，可以試著通過(guò)邊框或類似的元素對(duì)圖片進(jìn)行修飾，這樣做至少可以為圖片增添一種統(tǒng)一的視覺(jué)屬性。 　　設(shè)計(jì)思路與技巧 　　先復(fù)雜，后簡(jiǎn)化 　　在頁(yè)面設(shè)計(jì)的過(guò)程中，我們必然要將各種界面元素一點(diǎn)點(diǎn)的放置在頁(yè)面里。為了打造簡(jiǎn)潔的設(shè)計(jì)方案，很多設(shè)計(jì)師通常會(huì)在這種時(shí)候有所顧忌，下不去手。這會(huì)導(dǎo)致整個(gè)流程當(dāng)中缺乏必要的探索性，而且最終的設(shè)計(jì)方案往往會(huì)讓人感到蒼白與空洞，而非簡(jiǎn)潔。大家多多少少應(yīng)該都有所體會(huì)，如果運(yùn)氣好的話，探索過(guò)程中的那些happyaccident往往能帶來(lái)預(yù)想不到的驚艷效果。 　　所以，我們不妨試試先復(fù)雜，后簡(jiǎn)化的思路。在設(shè)計(jì)流程初期，不要對(duì)界面元素的數(shù)量進(jìn)行刻意的限制，同時(shí)盡量多嘗試一些不同的布局方案，直到需求所需的內(nèi)容及功能元素全部就位，然后開(kāi)始簡(jiǎn)化工作。 　　問(wèn)一問(wèn)自己，“有哪些元素是真正需要放在這個(gè)地方的？”，試著移除一些輔助性的元素，觀察局部或整體頁(yè)面結(jié)構(gòu)是否因此而受到破壞，如果沒(méi)有，那么扔掉蠻好。 　　各位大概有聽(tīng)到過(guò)“80%的產(chǎn)出源自20%的關(guān)鍵性投入”這個(gè)說(shuō)法(80/20法則)，我們同樣可以將這個(gè)理論運(yùn)用到設(shè)計(jì)工作當(dāng)中。很多情況下，頁(yè)面整體設(shè)計(jì)方案給用戶帶來(lái)的體驗(yàn)感知是以其中一小部分關(guān)鍵元素為根基的。對(duì)于這類元素，我們要有足夠的辨識(shí)能力，并圍繞它們進(jìn)行主要的設(shè)計(jì)工作，同時(shí)對(duì)其他元素進(jìn)行合理的簡(jiǎn)化。 　　這當(dāng)中還有一個(gè)比較實(shí)用的小方法。我們可以找來(lái)一些與項(xiàng)目無(wú)關(guān)的“局外人”，對(duì)當(dāng)前的設(shè)計(jì)方案進(jìn)行評(píng)估。在這個(gè)過(guò)程中，向他們解釋每個(gè)界面元素本身及其視覺(jué)表現(xiàn)形式的作用和意義。如果你發(fā)現(xiàn)自己對(duì)于某些元素?zé)o法給出除了“看上去很酷”、“其他網(wǎng)站也是這樣做的”以外更具說(shuō)服力的解釋，那么就考慮對(duì)它們進(jìn)行簡(jiǎn)化或是移除吧。 　　在經(jīng)歷了這樣一個(gè)過(guò)程之后，最終留下的頁(yè)面元素就是能夠幫你構(gòu)筑最簡(jiǎn)設(shè)計(jì)方案的素材。 　　微調(diào)，再微調(diào) 　　道上的朋友們覺(jué)得我總是喜歡沒(méi)完沒(méi)了的折騰設(shè)計(jì)方案，我真心覺(jué)得這種評(píng)價(jià)是對(duì)我的贊揚(yáng)。 　　在我看來(lái)，設(shè)計(jì)流程從來(lái)沒(méi)有真正結(jié)束的時(shí)候，我們總是可以將方案朝著正確的方向再推進(jìn)一點(diǎn)。說(shuō)正經(jīng)的，在這方面，問(wèn)問(wèn)那些和我合作過(guò)的設(shè)計(jì)師或?qū)嵙?xí)生，他們會(huì)告訴你，跟著我干是多么苦逼的一件事兒。我估計(jì)也是，當(dāng)我讓他們?cè)谝恍╆幱暗募?xì)節(jié)上修改了12次以上的時(shí)候，基本沒(méi)人會(huì)覺(jué)得有意思了。 　　正像我們?cè)谇拔漠?dāng)中了解到的，“簡(jiǎn)潔”是由界面布局、文字排印、配色方案、元素外觀等多方面要素協(xié)同構(gòu)成的綜合體驗(yàn)效應(yīng)。所以，在整個(gè)流程中，花費(fèi)大量時(shí)間在每個(gè)方面的細(xì)節(jié)當(dāng)中進(jìn)行糾結(jié)是必需的，這能怪我么？這里增大點(diǎn)行間距，那里的外邊距減小兩像素，把邊框線的顏色由#EEE改為#DDD...這樣的改動(dòng)聽(tīng)上去并不重要，但當(dāng)所有這些微調(diào)共同作用在頁(yè)面整體上時(shí)，細(xì)微的差別所累加起來(lái)的綜合效應(yīng)就會(huì)變得非常明顯。 　　所以，微調(diào)吧，然后再微調(diào)些些。很多時(shí)候，在一個(gè)細(xì)節(jié)當(dāng)中的調(diào)整還會(huì)引發(fā)另外一處的修改需求，有時(shí)甚至?xí)?duì)整個(gè)設(shè)計(jì)方案的方向造成影響。不怕，耐心些，簡(jiǎn)潔至上的設(shè)計(jì)目標(biāo)需要我們付出的絕不會(huì)像最終成品看上去的那么簡(jiǎn)單輕松。 　　大局觀 　　我前半輩子主要是一名印刷設(shè)計(jì)師。說(shuō)是印刷，其實(shí)自己做了很多打印工作，因?yàn)槊刻煸诠ぷ鳟?dāng)中都會(huì)反反復(fù)復(fù)地將各種稿件打印出來(lái)并釘?shù)綁ι?。久而久之，幾面墻上都釘滿了各種視覺(jué)方案的打印稿。 　　在改行做Web設(shè)計(jì)之后，我果斷不打印了，因?yàn)槲矣X(jué)得最終產(chǎn)品只會(huì)上上線而已，完全不會(huì)涉及到出版印刷一類的問(wèn)題。于是在很長(zhǎng)一段時(shí)間內(nèi)，幾個(gè)墻面都是空空如也的。不過(guò)慢慢的我卻開(kāi)始懷念起過(guò)去的日子了。將項(xiàng)目當(dāng)中的設(shè)計(jì)稿一張張的打印出來(lái)并釘?shù)綁ι希@種簡(jiǎn)單直白的組織方式其實(shí)可以給我們帶來(lái)一種很明顯的大局觀，使我們能夠站在全局的層面上對(duì)頁(yè)面進(jìn)行觀察和評(píng)審，并有可能發(fā)現(xiàn)更多可以被簡(jiǎn)化的細(xì)節(jié)元素。 　　相比之下，在Photoshop或Illustrator中通過(guò)切換圖層來(lái)對(duì)比視覺(jué)稿的方式就會(huì)讓我們的視野受到很大的局限。所以我建議各位好好利用一下紙張及墻面，通過(guò)這種方式來(lái)發(fā)現(xiàn)不同頁(yè)面的設(shè)計(jì)方案在一致性等方面的缺陷，去除有可能影響到簡(jiǎn)潔方案的不和諧因素。 　　簡(jiǎn)化的配色方案在印刷領(lǐng)域，設(shè)計(jì)方案所用到的顏色數(shù)量通常會(huì)受到各種現(xiàn)實(shí)問(wèn)題的限制，譬如項(xiàng)目的預(yù)算只允許設(shè)計(jì)師使用兩種顏色來(lái)設(shè)計(jì)海報(bào)。類似這樣的情況是很常見(jiàn)的，設(shè)計(jì)師們時(shí)常會(huì)因?yàn)檫@些局限而感到相當(dāng)?shù)聂[不住。 　　而Web設(shè)計(jì)領(lǐng)域當(dāng)中卻不存在這類問(wèn)題，如今，多數(shù)顯示設(shè)備所支持的顏色數(shù)量都龐大的不亦樂(lè)乎。從技術(shù)上講，我們可以隨心所欲地打造各種花里胡哨五彩繽紛的設(shè)計(jì)方案，然而這樣的實(shí)踐方式顯然會(huì)與簡(jiǎn)潔至上的設(shè)計(jì)目標(biāo)背道而馳。很多經(jīng)典的案例當(dāng)中只會(huì)用到兩種顏色，即某個(gè)明度的灰色外加一種有彩色。其中的有彩色會(huì)用在最為關(guān)鍵的頁(yè)面元素上，例如重要的鏈接或頁(yè)頭當(dāng)中的交互對(duì)象。從某種角度來(lái)說(shuō)這種極簡(jiǎn)的配色方案具有一石二鳥(niǎo)的作用，一方面，它無(wú)疑會(huì)對(duì)簡(jiǎn)潔視覺(jué)風(fēng)格的構(gòu)建起到至關(guān)重要的作用，同時(shí)，這類方案還能有效的提高頁(yè)面元素之間的對(duì)比度，使那些重要元素得到最大程度的突出。 　　AisleOne的配色方案稱得上是這方面的典范： 　　Fuzzco則更為極端的只用到一種顏色： 　　另外一些成功的簡(jiǎn)潔設(shè)計(jì)方案當(dāng)中，雖然用到的顏色數(shù)量會(huì)超過(guò)兩種，但整體的配色風(fēng)格依然趨向于保守，而且用到的顏色多數(shù)是比較中性的。我們來(lái)看看Solo： 　　正如文字排印方式與信息傳達(dá)效果之間的關(guān)聯(lián)作用，配色同樣不僅是選取一些好看的顏色那么簡(jiǎn)單，優(yōu)秀的配色方案可以通過(guò)正確的視覺(jué)基調(diào)將網(wǎng)站當(dāng)中的內(nèi)容更加有效地呈現(xiàn)出來(lái)。以Notologist為例，明亮、互補(bǔ)的顏色搭配使得內(nèi)容信息及它們之間的關(guān)聯(lián)得到了非常自然的體現(xiàn)，頁(yè)面整體風(fēng)格非常簡(jiǎn)潔直白，同時(shí)又不失活力。 　　在要求越來(lái)越高的青島網(wǎng)站制作上，簡(jiǎn)潔的網(wǎng)站設(shè)計(jì)風(fēng)格更見(jiàn)受到客戶的青睞，而越是簡(jiǎn)潔的設(shè)計(jì)，對(duì)設(shè)計(jì)師美工設(shè)計(jì)要求也就越高。

網(wǎng)站設(shè)計(jì)的創(chuàng)意與技巧相關(guān)標(biāo)簽：開(kāi)發(fā)網(wǎng)站，網(wǎng)站開(kāi)發(fā)，網(wǎng)站推廣，開(kāi)發(fā)網(wǎng)站

相關(guān)熱點(diǎn)推薦

八個(gè)優(yōu)秀的圖片和圖標(biāo)的 青島網(wǎng)站建設(shè)費(fèi)用大概多 「卡片式設(shè)計(jì)」能讓用戶 總結(jié)幾個(gè)產(chǎn)生上萬(wàn)流量的 即興創(chuàng)作需要有效的設(shè)計(jì) 網(wǎng)站推廣技巧之Emai 網(wǎng)站策劃的方法與方案？ 網(wǎng)站搜索引擎優(yōu)化的流程 企業(yè)網(wǎng)站建設(shè)優(yōu)化如何凸 軟文推廣的技巧 告訴你企業(yè)app客戶端 網(wǎng)站架構(gòu)之主頁(yè)設(shè)計(jì) 網(wǎng)站改版內(nèi)容 網(wǎng)站可信度建設(shè)十大準(zhǔn)則 淺談如何設(shè)計(jì)企業(yè)網(wǎng)站的 如何做網(wǎng)頁(yè)設(shè)計(jì)的10個(gè) 德國(guó)網(wǎng)站風(fēng)格設(shè)計(jì)特點(diǎn) 搜索引擎優(yōu)化相關(guān)性排名 企業(yè)網(wǎng)站設(shè)計(jì)中框架功能 搜索引擎優(yōu)化作弊行為表 運(yùn)用什么技巧使用戶喜歡 網(wǎng)頁(yè)標(biāo)題設(shè)計(jì)原則與一般 網(wǎng)頁(yè)框架和網(wǎng)頁(yè)框架集如 如何做成一個(gè)好的網(wǎng)站設(shè) 政府網(wǎng)站建設(shè)要按照“一 一名視覺(jué)設(shè)計(jì)師對(duì)于網(wǎng)站 推廣研究報(bào)告—真實(shí)的視 如何設(shè)計(jì)一個(gè)漂亮又有用 中小企業(yè)網(wǎng)站建設(shè)定位的 為什么網(wǎng)頁(yè)設(shè)計(jì)不應(yīng)強(qiáng)調(diào) 網(wǎng)頁(yè)設(shè)計(jì)的審美需求 視覺(jué)設(shè)計(jì)不只是圖形 青島網(wǎng)站制作優(yōu)化的發(fā)展 我們還需要“面包屑”嗎 網(wǎng)絡(luò)廣告與網(wǎng)站推廣的步 互聯(lián)網(wǎng)多領(lǐng)域迎來(lái)爆發(fā)式 織夢(mèng)后臺(tái)登陸顯示空白頁(yè)

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門戶