如何創(chuàng)建一個悅目且簡約的網(wǎng)頁

 　　網(wǎng)頁設(shè)計并不只是設(shè)計漂亮、體驗良好就夠了，想要用戶難以忘卻，你還要進(jìn)行更加深入的思考，更加走心的設(shè)計。

　　設(shè)計保持簡約，傻瓜式操作，這個概念可以追溯到1960年美國海軍實施KISS原則，該原則認(rèn)為，假如大多數(shù)體系是簡單而不是復(fù)雜的，則最好運行。在網(wǎng)站建設(shè)工作中，幾乎任何設(shè)計項目也是如此。

　　大多數(shù)平面設(shè)計師在職業(yè)生涯早期就了解KISS。那么你該怎么做呢?創(chuàng)建一個簡單的設(shè)計可能比你想象的有點復(fù)雜。這里有七個規(guī)則或允許以給你帶來一些設(shè)計上面的靈感，幫助你梳理清所有的紊亂，創(chuàng)建一個悅目且簡約的網(wǎng)頁設(shè)計。

　　1.每頁僅設(shè)置一個目標(biāo)

　　簡約設(shè)計的開始從項目的團(tuán)體目標(biāo)和網(wǎng)站的每個頁面的詳細(xì)目標(biāo)開始。每個頁面應(yīng)該指導(dǎo)用戶到一個可實行的操作，并排除導(dǎo)航和頁腳的干擾。

　　體例可以是通過點擊鏈接、在表單中輸入信息、觀看視頻或玩游戲中的任何內(nèi)容。但每個頁面都應(yīng)該關(guān)注單個用戶的操作和轉(zhuǎn)換。

　　我們?nèi)缃裨陧撁嫔显O(shè)置的大多元素很容易給用戶造成欣賞壓力。這使得用戶可能忽視應(yīng)該完成什么動作，并可能做出不那么理想的選擇。規(guī)劃設(shè)計，使每個頁面都指導(dǎo)用戶達(dá)到一個目標(biāo)。每個可操作的按鈕應(yīng)該保持它們在頁面上充足奪目，并且在其他頁面上也應(yīng)保持同樣的位置和作用。這種同等性可以幫助用戶了解他們?yōu)槭裁丛谀木W(wǎng)站上，以及他們應(yīng)該做什么;這些簡單的設(shè)計是的用戶更容易參與到設(shè)計中，并與之互動。

　　2.堅持僅使用兩種字系列

　　有許多的設(shè)計指引保舉在一個項目中可以使用三種不同的字體。對于這個建議，我覺得你完全可以簡化它們，試試更多的只使用兩個關(guān)聯(lián)性強的字體家族。

　　試試找一個權(quán)重比較高的字體家族，確保能夠在常規(guī)和粗體以及黑色選項之間存在比較多的對比度。為了保證在少用字體的情況下仍能使頁面上的字體轉(zhuǎn)變多樣一些，在選擇的時候要盡量考慮那些在統(tǒng)一系列下有較多分支的字體。

　　確定所用字體以后，接下來你必要做的是對整站的主字體和表現(xiàn)字體進(jìn)行混合搭配，以獲得整個設(shè)計的大量字體組合。使用兩個類型系列，就像您為特定權(quán)重或樣式選擇了具有特定用途的更多選項一樣。

　　你會發(fā)現(xiàn)，這可以幫助你創(chuàng)建一個高度可讀性和易于使用的排版，它易于管理并且能夠保持視覺同等性。

　　3.在排版對齊上保持同等

　　左對齊，居中對齊，甚至是右對齊，無論你喜好什么類型的對齊樣式，你要做的就是在整個的設(shè)計中堅持它的同等性。這包括對齊類似的項目，例如文本框和不相似但在分組中適配在一路的元素。

　　Adaptable在主頁滑塊上的筆墨上做了大量的工作。盡管圖片上的筆墨行數(shù)不同，但每個題目都與號召性用語按鈕對齊。元素之間的間距也是同等的。

　　更緊張的是，這種同等的對齊在頁面上與其他題目和CTA對進(jìn)行。

　　對準(zhǔn)匹配滑塊的流動，其也沿互補方向移動。對于文本元素，左對齊和中間對齊是最常見的選項，由于它們是最可讀的。 使用較長的文本時，左對齊是首選選項。

　　4.建立條理

　　在欣賞一個網(wǎng)頁設(shè)計的時候，對于上面的元素或者說信息，用戶不應(yīng)該考慮要首先查看什么內(nèi)容或如何在設(shè)計中遴選信息。即使是最簡單的視覺組合也應(yīng)該有不同的條理結(jié)構(gòu)來指導(dǎo)用戶分開主次。

　　用戶的視覺或者細(xì)致力應(yīng)該從一個主導(dǎo)的視覺開始。它可以是圖像或視頻或文本表現(xiàn)或任何其他將產(chǎn)生第一印象的元素。

　　然后應(yīng)該有一些文本作為輔助，告訴用戶設(shè)計和網(wǎng)站正在嘗試與他們溝通。這通常是通過一個簡單的主導(dǎo)視覺題目來實現(xiàn)的。

　　最后一步是次要文本或動作的設(shè)計，這保證了用戶能流暢的完成一系列的指導(dǎo)動作。最后的視覺元素是導(dǎo)航菜單。用戶期望能找到所有這些元素，通過日常的欣賞舉動，他們的眼睛已經(jīng)基本上風(fēng)俗以這個順序移動來審查各個元素。通過以這種體例設(shè)計，使他們?nèi)菀渍业剿麄兿胍膬?nèi)容。

　　5.給元素充足的空間

　　假如你如今不知道，趕快記住這一條：空白的空間對設(shè)計師下世是至關(guān)緊張的。

　　通過給予設(shè)計中的每一個元素充足的空間，將有助于引起用戶對單個元素的細(xì)致，并幫助創(chuàng)建一個具有焦點的團(tuán)體設(shè)計。

　　使用空間的竅門是保持同等性。設(shè)置圍繞單個元素或適合文本行之間的空間大小的規(guī)則。假如最終的設(shè)計看起來總是有那么一路不近合理的地方，你可能必要做的就只是增長一點間距而已。你會知道什么樣的間距是合理的，當(dāng)你想象你作為用戶進(jìn)來頁面的第一眼是什么的時候。(照舊不知道精確的間距是什么?試試回到第4點 - 建立條理看看。)

　　6.放大對比度

　　高對比度的設(shè)計元素——從顏色選擇到元素的尺寸，即使在最小的框架中，也可以為項目提供所需的視覺結(jié)果。

　　對于一個已成趨勢的流行選擇來說，嘗試一個通亮的對比色調(diào)來捉住用戶的細(xì)致力。勇敢的顏色將使一個簡單的設(shè)計感覺更有深度和風(fēng)趣。為了充分行使對比色，選擇在色輪上相對位置的色調(diào)具有類似飽和度的顏色。假如對你偏愛的顏色來說這個選項太多了，嘗試其他色輪。(你可能會發(fā)現(xiàn)一個意想不到的新收貨，例如上面的紫色和藍(lán)綠色組合。)

　　7.使用同等的圖標(biāo)和元素

　　設(shè)計的同等性是所謂的“秒殺”設(shè)計最好的(大概也是最壞的)隱秘武器之一。這是在做網(wǎng)站設(shè)計時最經(jīng)常被忘記的“殺手锏”之一，由于多數(shù)的網(wǎng)頁設(shè)計項目總是在各個位置散落著很多不是很匹配網(wǎng)頁設(shè)計其他部分的按鈕樣式，或這社交媒體的圖標(biāo)。

　　有一點必要我們在設(shè)計之初就應(yīng)該考慮好的：用戶界面元素不應(yīng)該是事后考慮。

　　所以，對于創(chuàng)建一個圖標(biāo)和用戶界面元素集和規(guī)則，并以雷同的體例在整個項目中使用它們就顯得很緊張了。(假如你不想從頭開始創(chuàng)建這些元素，你甚至可以購買或下載圖標(biāo)字體或用戶界面元素的工具包。)

　　在網(wǎng)站制作的時候，為元素選擇顏色的環(huán)節(jié)，你要使每個元素所使用的懸停操作或結(jié)果都保持同等(一個用于可單擊的元素，另一個用于不可用的元素)和基于同一用法的尺寸元素。(對于更多圖形的元素，可以同時擁有圖標(biāo)大小和過大的選項)。

　　Praticca主動售貨機使用超大的圖標(biāo)來提醒用戶這里還有有更多的信息。A+位于彩色圖標(biāo)內(nèi)。除了顏色，所有三個圖標(biāo)是雷同的。當(dāng)用戶點擊時，他們都做同樣的事情，即懸停和所有的舉動都保持雷同的體例。 在整個網(wǎng)站中使用雷同的圖標(biāo)以啟動新位內(nèi)容，并幫助用戶掃描副本。

　　總結(jié)

　　在網(wǎng)站制作的過程中，一個簡單的設(shè)計不必僅限于最小或缺乏風(fēng)趣元素或用戶界面的東西。簡單的設(shè)計是高度可用以及直觀的，不許可用戶在欣賞過程中對頁面上的設(shè)計存在太多不需要的疑問或復(fù)雜的指令。