讓你的網(wǎng)頁(yè)設(shè)計(jì)更加簡(jiǎn)單直觀的七個(gè)規(guī)則

還記得KISS原則么？KISS 是 Keep it Simple and Stupid 的縮寫(xiě)，指的是要將產(chǎn)品做的連白癡都會(huì)用，因此也常常被稱(chēng)為懶人原則。這一設(shè)計(jì)原則最初在1960年被提出并應(yīng)用于美國(guó)海軍的相關(guān)設(shè)計(jì)。在此后的50多年當(dāng)中，設(shè)計(jì)在技術(shù)和思路上經(jīng)歷了翻天覆地的變化，但是KISS原則依然非常重要，并且影響巨大。

絕大多數(shù)的平面設(shè)計(jì)師在剛剛開(kāi)始接觸設(shè)計(jì)的時(shí)候，或多或少都接觸過(guò)KISS原則，但是在具體實(shí)施的時(shí)候，卻常常不知要如何實(shí)施。想要?jiǎng)?chuàng)造一個(gè)足夠簡(jiǎn)單的設(shè)計(jì)，可能比你想象的要復(fù)雜一些。那么今天接下來(lái)要說(shuō)的7個(gè)規(guī)則，能夠幫你在雜亂的思路里面，理出一條通路。

1、一個(gè)頁(yè)面，一個(gè)目標(biāo)

想要設(shè)計(jì)一個(gè)簡(jiǎn)單直觀的網(wǎng)站，那么你應(yīng)該為每個(gè)頁(yè)面設(shè)定一個(gè)目標(biāo)。每個(gè)頁(yè)面最終是要引領(lǐng)用戶(hù)進(jìn)行某一個(gè)操作，從導(dǎo)航到頁(yè)腳都要圍繞這一個(gè)目標(biāo)來(lái)設(shè)計(jì)。

可以是點(diǎn)擊一個(gè)鏈接，也可以是在表單中輸入信息，還可以是查看視頻或者進(jìn)入一個(gè)游戲。但是不論是哪種，都應(yīng)該關(guān)注單個(gè)用戶(hù)在這個(gè)頁(yè)面中的轉(zhuǎn)化率。

分散用戶(hù)注意力的東西太多了，他們可能因?yàn)檫@些干擾而打斷了原本正準(zhǔn)備進(jìn)行的操作。所以，你要做一個(gè)目的性明確的設(shè)計(jì)，集中精力來(lái)引導(dǎo)用戶(hù)。每個(gè)按鈕上下的設(shè)計(jì)元素，包括滾動(dòng)的效果本身，都盡量將用戶(hù)導(dǎo)向按鈕、鏈接等。這種目標(biāo)上的一致性能夠很好的幫助用戶(hù)了解他們需要在網(wǎng)站上做什么，簡(jiǎn)單的選擇往往能夠讓用戶(hù)更輕松參與進(jìn)來(lái)。

2、堅(jiān)持使用一兩個(gè)字體族

有許多設(shè)計(jì)規(guī)范會(huì)推薦用戶(hù)在一個(gè)設(shè)計(jì)項(xiàng)目中使用三個(gè)甚至更多的字體。不過(guò)，將使用的字體縮減到2個(gè)字體族當(dāng)中，會(huì)讓整個(gè)設(shè)計(jì)的凝聚力更強(qiáng)。

許多字體族當(dāng)中，不同的字重能夠創(chuàng)造足夠的視覺(jué)對(duì)比度。許多字體族當(dāng)中甚至包含了多種不同樣式的字體，其中有些可選的字體形式感十足，甚至非常適合用來(lái)做尺寸超大的標(biāo)題。

所以，你的主要工作是挑選適合正文用的字體以及用作展示的字體，選擇兩套能夠相互搭配的字體族，那么你整套設(shè)計(jì)可用的字體搭配應(yīng)該都可以搞定了。

接下來(lái)你會(huì)發(fā)現(xiàn)，這樣的字體搭配能夠讓你的整個(gè)排版和視覺(jué)層次更易于管理控制。

3、使用一致的對(duì)齊方式

左對(duì)齊，居中，還是靠右對(duì)齊，無(wú)論你是喜歡哪種，盡量在整個(gè)設(shè)計(jì)當(dāng)中貫徹這種方式。這種對(duì)齊方式的選取不僅僅是文本本身的對(duì)齊，還包含了各種其他元素的對(duì)齊方式。

Adaptable 的網(wǎng)站在這個(gè)事情上就做的很好。盡管輪播圖中的圖片和文本的內(nèi)容各不相同，但是幾乎都采用了統(tǒng)一的左對(duì)齊，文本和行為召喚按鈕也是做對(duì)齊，元素與元素之間的間距也很統(tǒng)一，這種一致的美感讓人非常舒適。

左對(duì)齊和居中對(duì)齊是最常見(jiàn)的兩種對(duì)齊的方式，因?yàn)檫@兩種是可讀性最強(qiáng)的排版方式。而在針對(duì)較長(zhǎng)的文本進(jìn)行排版的時(shí)候，左對(duì)齊是選選項(xiàng)。

4、建立層次

用戶(hù)不應(yīng)該在查看你的網(wǎng)頁(yè)的過(guò)程中費(fèi)腦子思考。所以，即使是最簡(jiǎn)單的視覺(jué)排版，都應(yīng)該具備足夠清晰的層次。

你的設(shè)計(jì)應(yīng)該從主視覺(jué)開(kāi)始。它可以是一個(gè)圖像，也可以是一個(gè)視頻，同樣可以是一段文本，但不論是哪種，它都應(yīng)該是給予用戶(hù)第一印象的元素。

接下來(lái)，通常需要有一些文字內(nèi)容，告知用戶(hù)這個(gè)設(shè)計(jì)或者這個(gè)網(wǎng)站是干啥的，通常，它會(huì)以標(biāo)題的形式和主視覺(jué)搭配起來(lái)，一同傳遞信息給用戶(hù)。

隨后可以增加一些說(shuō)明性的副標(biāo)題。此外，還應(yīng)該提供導(dǎo)航等元素，因?yàn)榛谟脩?hù)的瀏覽習(xí)慣，他們會(huì)期望看到這些內(nèi)容，并且已經(jīng)具備了與之相關(guān)的瀏覽習(xí)慣。所以，通過(guò)這樣層次化的設(shè)計(jì)，可以讓用戶(hù)更便捷地獲取信息。

5、運(yùn)用空間與留白

不要糾結(jié)于留白太多，留白其實(shí)是服務(wù)于各種設(shè)計(jì)元素的，它會(huì)讓你的設(shè)計(jì)更好。

如果你想要設(shè)計(jì)真正簡(jiǎn)單直觀的設(shè)計(jì)，留白是必不可少的組成部分。給每個(gè)元素足夠的空間，有空間的襯托，才能讓這些元素被訪(fǎng)客注意到，因此，千萬(wàn)不要讓整個(gè)布局雜亂不堪，而應(yīng)該創(chuàng)造有視覺(jué)焦點(diǎn)的布局。

使用空間竅門(mén)在于一致性的把控。為每個(gè)元素周?chē)牧舭?、文本的字間距、行間距都設(shè)定好，然后盡可能保持規(guī)則性。如果這樣設(shè)計(jì)出來(lái)的效果看起來(lái)不自然，也許你只需要對(duì)留白稍加調(diào)整就可以了。當(dāng)你打開(kāi)自己的設(shè)計(jì)，視覺(jué)自然聚焦到你想要用戶(hù)看的地方的時(shí)候，你就會(huì)知道你的留白和空間設(shè)計(jì)是爭(zhēng)取的。

6、強(qiáng)化對(duì)比度

從色彩到尺寸大小，具有高對(duì)比度的設(shè)計(jì)元素能夠讓整個(gè)項(xiàng)目的設(shè)計(jì)感和精細(xì)度得到提升，哪怕是在極簡(jiǎn)的設(shè)計(jì)框架之下。

明亮而又富有對(duì)比度的配色是許多跟隨流行的項(xiàng)目所青睞的選擇，因?yàn)檫@樣更容易吸引用戶(hù)的注意力。大膽的配色讓一個(gè)簡(jiǎn)單的設(shè)計(jì)顯得更加富有設(shè)計(jì)感，也更加有趣。為了充分的利用色彩的對(duì)比度，盡量選擇色輪上相對(duì)位置的色彩搭配，并且調(diào)整色彩飽和度到合適的狀態(tài)。也許你會(huì)在其中尋找到意想不到的搭配。

7、使用一致的圖標(biāo)和元素

設(shè)計(jì)的一致性是最基本的設(shè)計(jì)規(guī)則，也是最容易被忽略的設(shè)計(jì)規(guī)則，與此同時(shí)，它也是許多優(yōu)秀的設(shè)計(jì)的秘密所在。有太多的網(wǎng)站采用不匹配的設(shè)計(jì)元素，導(dǎo)致整個(gè)設(shè)計(jì)陷入尷尬。

所以，創(chuàng)建一整套系統(tǒng)而一致的圖標(biāo)和UI元素合集與規(guī)則是相當(dāng)有必要的，一旦你完成設(shè)定，應(yīng)該在整個(gè)設(shè)計(jì)項(xiàng)目中貫徹并運(yùn)用這套UIKit 和規(guī)則。

如果你為一個(gè)元素確定了色彩，選擇了一個(gè)光標(biāo)懸停的特效，那么你需要基于使用狀況和用量

Praticca Vending Machines 這個(gè)網(wǎng)站就采用了超大的圖標(biāo)來(lái)告知用戶(hù)，可以點(diǎn)擊獲取更多的信息。包含+號(hào)的彩色圖標(biāo)沿用了相同的樣式，并且為不同的區(qū)塊搭配了不同的色彩，引導(dǎo)用戶(hù)去點(diǎn)擊。

結(jié)語(yǔ)

簡(jiǎn)單直觀的設(shè)計(jì)并不一定非得是極簡(jiǎn)的，它同樣可以是豐富而又有趣的。但是簡(jiǎn)單而易用的頁(yè)面的設(shè)計(jì)過(guò)程是需要用心做才能達(dá)成的，它需要具備高度的可用性和直觀的設(shè)計(jì)，確保用戶(hù)在使用的時(shí)候足夠直覺(jué)、不會(huì)遲疑。

文章題目：讓你的網(wǎng)頁(yè)設(shè)計(jì)更加簡(jiǎn)單直觀的七個(gè)規(guī)則
標(biāo)題URL：http://muchs.cn/news1/100401.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)、云服務(wù)器、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)