• 
• 
• 
• 
• 
• 
• 

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

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

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

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

網(wǎng)站設(shè)計(jì)的創(chuàng)意與技巧相關(guān)標(biāo)簽：網(wǎng)頁制作，網(wǎng)站建設(shè)，企業(yè)建站，網(wǎng)站設(shè)計(jì)公司

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

公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國內(nèi)網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)談 微信營銷推廣的特性-奈 什么是自助建站？ 如何從營銷的角度策劃建 建網(wǎng)站必備六步 基本搜索引擎優(yōu)化策略 新人做站之網(wǎng)站定位與網(wǎng) Web頁面設(shè)計(jì)原則 個(gè)人網(wǎng)站站長看過來網(wǎng)站 網(wǎng)站設(shè)計(jì)中的簡(jiǎn)潔與簡(jiǎn)單 以“產(chǎn)品”思維搭建網(wǎng)站 關(guān)于VIP用戶研究與產(chǎn) 營銷型網(wǎng)站優(yōu)化需要注意 如何制作友情連接？做友 網(wǎng)站建設(shè)目標(biāo)分析 如何 如何創(chuàng)建一個(gè)新的網(wǎng)站 8個(gè)實(shí)用的友情鏈接技巧 個(gè)人網(wǎng)站如何制作才能成 網(wǎng)站搜索引擎優(yōu)化指南 網(wǎng)站描述怎么寫？ 如何提高自己網(wǎng)站的流量 網(wǎng)頁文案設(shè)計(jì)淺談 個(gè)人如何做網(wǎng)站 深底色頁面設(shè)計(jì)指南設(shè)計(jì) 網(wǎng)頁導(dǎo)航設(shè)計(jì)的注意要點(diǎn) 網(wǎng)站制作簡(jiǎn)易流程介紹 什么是營銷型網(wǎng)站 如何向必應(yīng)提交網(wǎng)站地圖 如何建立個(gè)人網(wǎng)站? 自助建站

奈薇建站網(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)站制作公司 開發(fā)區(qū)信息港 山東在線門戶