2017-01-25 分類(lèi): 網(wǎng)站建設(shè)
隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展,人們對(duì)網(wǎng)站的認(rèn)識(shí)越來(lái)越深刻,也是備受大多企業(yè)走互聯(lián)網(wǎng)創(chuàng)業(yè)的方式之一。然而用戶對(duì)網(wǎng)站的追求也從當(dāng)初的酷炫回歸到了簡(jiǎn)約,事實(shí)表明,簡(jiǎn)約的網(wǎng)站更容易被用戶接受,且簡(jiǎn)明扼要的內(nèi)容更能提升用戶體驗(yàn)。那么,簡(jiǎn)約的網(wǎng)站建設(shè)有哪些設(shè)計(jì)原則呢?下面創(chuàng)新互聯(lián)舉例并分析其七大原則?!?/p>
1、每頁(yè)僅設(shè)置一個(gè)目標(biāo)
簡(jiǎn)約設(shè)計(jì)的開(kāi)始從項(xiàng)目的整體目標(biāo)和網(wǎng)站的每個(gè)頁(yè)面的具體目標(biāo)開(kāi)始。每個(gè)頁(yè)面應(yīng)該引導(dǎo)用戶到一個(gè)可執(zhí)行的操作,并排除導(dǎo)航和頁(yè)腳的干擾。
方式可以是通過(guò)點(diǎn)擊鏈接、在表單中輸入信息、觀看視頻或玩游戲中的任何內(nèi)容。但每個(gè)頁(yè)面都應(yīng)該關(guān)注單個(gè)用戶的操作和轉(zhuǎn)換。
我們現(xiàn)在在頁(yè)面上設(shè)置的大多元素很容易給用戶造成瀏覽壓力。這使得用戶可能忽視應(yīng)該完成什么動(dòng)作,并可能做出不那么理想的選擇。規(guī)劃設(shè)計(jì),使每個(gè)頁(yè)面都引導(dǎo)用戶達(dá)到一個(gè)目標(biāo)。每個(gè)可操作的按鈕應(yīng)該保持它們?cè)陧?yè)面上足夠醒目,并且在其他頁(yè)面上也應(yīng)保持同樣的位置和作用。這種一致性可以幫助用戶了解他們?yōu)槭裁丛谀木W(wǎng)站上,以及他們應(yīng)該做什么;這些簡(jiǎn)單的設(shè)計(jì)是的用戶更容易參與到設(shè)計(jì)中,并與之互動(dòng)。
2、堅(jiān)持僅使用兩種字系列
有很多的設(shè)計(jì)指引推薦在一個(gè)項(xiàng)目中可以使用三種不同的字體。對(duì)于這個(gè)建議,我覺(jué)得你完全可以簡(jiǎn)化它們,試試更多的只使用兩個(gè)關(guān)聯(lián)性強(qiáng)的字體家族。
試試找一個(gè)權(quán)重比較高的字體家族,確保能夠在常規(guī)和粗體以及黑色選項(xiàng)之間存在比較多的對(duì)比度。為了保證在少用字體的情況下仍能使頁(yè)面上的字體變化多樣一些,在選擇的時(shí)候要盡量考慮那些在同一系列下有較多分支的字體。
確定所用字體以后,接下來(lái)你需要做的是對(duì)整站的主字體和顯示字體進(jìn)行混合搭配,以獲得整個(gè)設(shè)計(jì)的大量字體組合。使用兩個(gè)類(lèi)型系列,就像您為特定權(quán)重或樣式選擇了具有特定用途的更多選項(xiàng)一樣。
你會(huì)發(fā)現(xiàn),這可以幫助你創(chuàng)建一個(gè)高度可讀性和易于使用的排版,它易于管理并且能夠保持視覺(jué)一致性。
3、在排版對(duì)齊上保持一致
左對(duì)齊,居中對(duì)齊,甚至是右對(duì)齊,無(wú)論你喜歡什么類(lèi)型的對(duì)齊樣式,你要做的就是在整個(gè)的設(shè)計(jì)中堅(jiān)持它的一致性。這包括對(duì)齊類(lèi)似的項(xiàng)目,例如文本框和不相似但在分組中適配在一起的元素。
Adaptable在主頁(yè)滑塊上的文字上做了大量的工作。盡管圖片上的文字行數(shù)不同,但每個(gè)標(biāo)題都與號(hào)召性用語(yǔ)按鈕對(duì)齊。元素之間的間距也是一致的。
更重要的是,這種一致的對(duì)齊在頁(yè)面上與其他標(biāo)題和CTA對(duì)進(jìn)行。
對(duì)準(zhǔn)匹配滑塊的流動(dòng),其也沿互補(bǔ)方向移動(dòng)。對(duì)于文本元素,左對(duì)齊和中心對(duì)齊是最常見(jiàn)的選項(xiàng),因?yàn)樗鼈兪亲羁勺x的。 使用較長(zhǎng)的文本時(shí),左對(duì)齊是選選項(xiàng)。
4、建立層次
在瀏覽一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候,對(duì)于上面的元素或者說(shuō)信息,用戶不應(yīng)該考慮要首先查看什么內(nèi)容或如何在設(shè)計(jì)中挑選信息。即使是最簡(jiǎn)單的視覺(jué)組合也應(yīng)該有不同的層次結(jié)構(gòu)來(lái)引導(dǎo)用戶分開(kāi)主次。
用戶的視覺(jué)或者注意力應(yīng)該從一個(gè)主導(dǎo)的視覺(jué)開(kāi)始。它可以是圖像或視頻或文本顯示或任何其他將產(chǎn)生第一印象的元素。
然后應(yīng)該有一些文本作為輔助,告訴用戶設(shè)計(jì)和網(wǎng)站正在嘗試與他們溝通。這通常是通過(guò)一個(gè)簡(jiǎn)單的主導(dǎo)視覺(jué)標(biāo)題來(lái)實(shí)現(xiàn)的。
最后一步是次要文本或動(dòng)作的設(shè)計(jì),這保證了用戶能流暢的完成一系列的引導(dǎo)動(dòng)作。最后的視覺(jué)元素是導(dǎo)航菜單。用戶期望能找到所有這些元素,通過(guò)日常的瀏覽行為,他們的眼睛已經(jīng)基本上習(xí)慣以這個(gè)順序移動(dòng)來(lái)審查各個(gè)元素。通過(guò)以這種方式設(shè)計(jì),使他們?nèi)菀渍业剿麄兿胍膬?nèi)容。
5、給元素足夠的空間
如果你現(xiàn)在不知道,趕緊記住這一條:空白的空間對(duì)設(shè)計(jì)師來(lái)世是至關(guān)重要的。
通過(guò)給予設(shè)計(jì)中的每一個(gè)元素足夠的空間,將有助于引起用戶對(duì)單個(gè)元素的注意,并幫助創(chuàng)建一個(gè)具有焦點(diǎn)的整體設(shè)計(jì)。
使用空間的竅門(mén)是保持一致性。設(shè)置圍繞單個(gè)元素或適合文本行之間的空間大小的規(guī)則。如果最終的設(shè)計(jì)看起來(lái)總是有那么一起不近合理的地方,你可能需要做的就只是增加一點(diǎn)間距而已。你會(huì)知道什么樣的間距是合理的,當(dāng)你想象你作為用戶進(jìn)來(lái)頁(yè)面的第一眼是什么的時(shí)候。(還是不知道正確的間距是什么?試試回到第4點(diǎn) - 建立層次看看。)
6、放大對(duì)比度
高對(duì)比度的設(shè)計(jì)元素――從顏色選擇到元素的尺寸,即使在最小的框架中,也可以為項(xiàng)目提供所需的視覺(jué)效果。
對(duì)于一個(gè)已成趨勢(shì)的流行選擇來(lái)說(shuō),嘗試一個(gè)明亮的對(duì)比色調(diào)來(lái)抓住用戶的注意力。大膽的顏色將使一個(gè)簡(jiǎn)單的設(shè)計(jì)感覺(jué)更有深度和有趣。為了充分利用對(duì)比色,選擇在色輪上相對(duì)位置的色調(diào)具有類(lèi)似飽和度的顏色。如果對(duì)你偏愛(ài)的顏色來(lái)說(shuō)這個(gè)選項(xiàng)太多了,嘗試其他色輪。(你可能會(huì)發(fā)現(xiàn)一個(gè)意想不到的新收獲,例如上面的紫色和藍(lán)綠色組合。)
7、使用一致的圖標(biāo)和元素
設(shè)計(jì)的一致性是所謂的“秒殺”設(shè)計(jì)最好的(也許也是最壞的)秘密武器之一。這是在做網(wǎng)站設(shè)計(jì)時(shí)最經(jīng)常被遺忘的“殺手锏”之一,因?yàn)槎鄶?shù)的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目總是在各個(gè)位置散落著許多不是很匹配網(wǎng)頁(yè)設(shè)計(jì)其他部分的按鈕樣式,或這社交媒體的圖標(biāo)。
有一點(diǎn)需要我們?cè)谠O(shè)計(jì)之初就應(yīng)該考慮好的:用戶界面元素不應(yīng)該是事后考慮。
所以,對(duì)于創(chuàng)建一個(gè)圖標(biāo)和用戶界面元素集和規(guī)則,并以相同的方式在整個(gè)項(xiàng)目中使用它們就顯得很重要了。(如果你不想從頭開(kāi)始創(chuàng)建這些元素,你甚至可以購(gòu)買(mǎi)或下載圖標(biāo)字體或用戶界面元素的工具包。)
在網(wǎng)站建設(shè)的時(shí)候,為元素選擇顏色的環(huán)節(jié),你要使每個(gè)元素所使用的懸停操作或效果都保持一致(一個(gè)用于可單擊的元素,另一個(gè)用于不可用的元素)和基于統(tǒng)一用法的尺寸元素。(對(duì)于更多圖形的元素,可以同時(shí)擁有圖標(biāo)大小和過(guò)大的選項(xiàng))。
Praticca自動(dòng)售貨機(jī)使用超大的圖標(biāo)來(lái)提示用戶這里還有有更多的信息。A+位于彩色圖標(biāo)內(nèi)。除了顏色,所有三個(gè)圖標(biāo)是相同的。當(dāng)用戶點(diǎn)擊時(shí),他們都做同樣的事情,即懸停和所有的行為都保持相同的方式。 在整個(gè)網(wǎng)站中使用相同的圖標(biāo)以啟動(dòng)新位內(nèi)容,并幫助用戶掃描副本。
總結(jié)
在網(wǎng)站建設(shè)的過(guò)程中,一個(gè)簡(jiǎn)單的設(shè)計(jì)不必僅限于最小或缺乏有趣元素或用戶界面的東西。簡(jiǎn)單的設(shè)計(jì)是高度可用以及直觀的,不允許用戶在瀏覽過(guò)程中對(duì)頁(yè)面上的設(shè)計(jì)存在太多不必要的疑問(wèn)或復(fù)雜的指令。
文章標(biāo)題:簡(jiǎn)約網(wǎng)站建設(shè)的七個(gè)設(shè)計(jì)原則
瀏覽地址:http://m.rwnh.cn/news18/73018.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容