簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

發(fā)布日期：[2017/3/16] 編輯：奇億廣州網(wǎng)站建設

　　隨著(zhù)互聯(lián)網(wǎng)時(shí)代的發(fā)展，人們對網(wǎng)站的認識越來(lái)越深刻，也是備受大多企業(yè)走互聯(lián)網(wǎng)創(chuàng )業(yè)的方式之一。然而用戶(hù)對網(wǎng)站的追求也從當初的酷炫回歸到了簡(jiǎn)約，事實(shí)表明，簡(jiǎn)約的網(wǎng)站更容易被用戶(hù)接受，且簡(jiǎn)明扼要的內容更能提升用戶(hù)體驗。那么，簡(jiǎn)約的網(wǎng)站建設有哪些設計原則呢？下面奇億網(wǎng)絡(luò )舉例并分析其七大原則。　

　　1、每頁(yè)僅設置一個(gè)目標

　　簡(jiǎn)約設計的開(kāi)始從項目的整體目標和網(wǎng)站的每個(gè)頁(yè)面的具體目標開(kāi)始。每個(gè)頁(yè)面應該引導用戶(hù)到一個(gè)可執行的操作，并排除導航和頁(yè)腳的干擾。

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

　　我們現在在頁(yè)面上設置的大多元素很容易給用戶(hù)造成瀏覽壓力。這使得用戶(hù)可能忽視應該完成什么動(dòng)作，并可能做出不那么理想的選擇。規劃設計，使每個(gè)頁(yè)面都引導用戶(hù)達到一個(gè)目標。每個(gè)可操作的按鈕應該保持它們在頁(yè)面上足夠醒目，并且在其他頁(yè)面上也應保持同樣的位置和作用。這種一致性可以幫助用戶(hù)了解他們?yōu)槭裁丛谀木W(wǎng)站上，以及他們應該做什么；這些簡(jiǎn)單的設計是的用戶(hù)更容易參與到設計中，并與之互動(dòng)。

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

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

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

　　試試找一個(gè)權重比較高的字體家族，確保能夠在常規和粗體以及黑色選項之間存在比較多的對比度。為了保證在少用字體的情況下仍能使頁(yè)面上的字體變化多樣一些，在選擇的時(shí)候要盡量考慮那些在同一系列下有較多分支的字體。

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

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

　　3、在排版對齊上保持一致

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

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

　　Adaptable在主頁(yè)滑塊上的文字上做了大量的工作。盡管圖片上的文字行數不同，但每個(gè)標題都與號召性用語(yǔ)按鈕對齊。元素之間的間距也是一致的。

　　更重要的是，這種一致的對齊在頁(yè)面上與其他標題和CTA對進(jìn)行。

　　對準匹配滑塊的流動(dòng)，其也沿互補方向移動(dòng)。對于文本元素，左對齊和中心對齊是最常見(jiàn)的選項，因為它們是最可讀的。使用較長(cháng)的文本時(shí)，左對齊是首選選項。

　　4、建立層次

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

　　在瀏覽一個(gè)網(wǎng)頁(yè)設計的時(shí)候，對于上面的元素或者說(shuō)信息，用戶(hù)不應該考慮要首先查看什么內容或如何在設計中挑選信息。即使是最簡(jiǎn)單的視覺(jué)組合也應該有不同的層次結構來(lái)引導用戶(hù)分開(kāi)主次。

　　用戶(hù)的視覺(jué)或者注意力應該從一個(gè)主導的視覺(jué)開(kāi)始。它可以是圖像或視頻或文本顯示或任何其他將產(chǎn)生第一印象的元素。

　　然后應該有一些文本作為輔助，告訴用戶(hù)設計和網(wǎng)站正在嘗試與他們溝通。這通常是通過(guò)一個(gè)簡(jiǎn)單的主導視覺(jué)標題來(lái)實(shí)現的。

　　最后一步是次要文本或動(dòng)作的設計，這保證了用戶(hù)能流暢的完成一系列的引導動(dòng)作。最后的視覺(jué)元素是導航菜單。用戶(hù)期望能找到所有這些元素，通過(guò)日常的瀏覽行為，他們的眼睛已經(jīng)基本上習慣以這個(gè)順序移動(dòng)來(lái)審查各個(gè)元素。通過(guò)以這種方式設計，使他們容易找到他們想要的內容。

　　5、給元素足夠的空間

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

　　如果你現在不知道，趕緊記住這一條：空白的空間對設計師來(lái)世是至關(guān)重要的。

　　通過(guò)給予設計中的每一個(gè)元素足夠的空間，將有助于引起用戶(hù)對單個(gè)元素的注意，并幫助創(chuàng )建一個(gè)具有焦點(diǎn)的整體設計。

　　使用空間的竅門(mén)是保持一致性。設置圍繞單個(gè)元素或適合文本行之間的空間大小的規則。如果最終的設計看起來(lái)總是有那么一起不近合理的地方，你可能需要做的就只是增加一點(diǎn)間距而已。你會(huì )知道什么樣的間距是合理的，當你想象你作為用戶(hù)進(jìn)來(lái)頁(yè)面的第一眼是什么的時(shí)候。（還是不知道正確的間距是什么?試試回到第4點(diǎn) - 建立層次看看。）

　　6、放大對比度

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

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

　　對于一個(gè)已成趨勢的流行選擇來(lái)說(shuō)，嘗試一個(gè)明亮的對比色調來(lái)抓住用戶(hù)的注意力。大膽的顏色將使一個(gè)簡(jiǎn)單的設計感覺(jué)更有深度和有趣。為了充分利用對比色，選擇在色輪上相對位置的色調具有類(lèi)似飽和度的顏色。如果對你偏愛(ài)的顏色來(lái)說(shuō)這個(gè)選項太多了，嘗試其他色輪。（你可能會(huì )發(fā)現一個(gè)意想不到的新收獲，例如上面的紫色和藍綠色組合。）

　　7、使用一致的圖標和元素

簡(jiǎn)約網(wǎng)站建設的七個(gè)設計原則

　　設計的一致性是所謂的“秒殺”設計最好的（也許也是最壞的）秘密武器之一。這是在做網(wǎng)站設計時(shí)最經(jīng)常被遺忘的“殺手锏”之一，因為多數的網(wǎng)頁(yè)設計項目總是在各個(gè)位置散落著(zhù)許多不是很匹配網(wǎng)頁(yè)設計其他部分的按鈕樣式，或這社交媒體的圖標。

　　有一點(diǎn)需要我們在設計之初就應該考慮好的：用戶(hù)界面元素不應該是事后考慮。

　　所以，對于創(chuàng )建一個(gè)圖標和用戶(hù)界面元素集和規則，并以相同的方式在整個(gè)項目中使用它們就顯得很重要了。（如果你不想從頭開(kāi)始創(chuàng )建這些元素，你甚至可以購買(mǎi)或下載圖標字體或用戶(hù)界面元素的工具包。）

　　在網(wǎng)站建設的時(shí)候，為元素選擇顏色的環(huán)節，你要使每個(gè)元素所使用的懸停操作或效果都保持一致（一個(gè)用于可單擊的元素，另一個(gè)用于不可用的元素）和基于統一用法的尺寸元素。（對于更多圖形的元素，可以同時(shí)擁有圖標大小和過(guò)大的選項）。

　　Praticca自動(dòng)售貨機使用超大的圖標來(lái)提示用戶(hù)這里還有有更多的信息。A+位于彩色圖標內。除了顏色，所有三個(gè)圖標是相同的。當用戶(hù)點(diǎn)擊時(shí)，他們都做同樣的事情，即懸停和所有的行為都保持相同的方式。在整個(gè)網(wǎng)站中使用相同的圖標以啟動(dòng)新位內容，并幫助用戶(hù)掃描副本。

　　總結

在網(wǎng)站建設的過(guò)程中，一個(gè)簡(jiǎn)單的設計不必僅限于最小或缺乏有趣元素或用戶(hù)界面的東西。簡(jiǎn)單的設計是高度可用以及直觀(guān)的，不允許用戶(hù)在瀏覽過(guò)程中對頁(yè)面上的設計存在太多不必要的疑問(wèn)或復雜的指令。

　　本文由奇億網(wǎng)站建設原創(chuàng )，原文地址：http://www.lzsyr.com/news/1747.html，轉摘請保留版權，謝謝。