7條簡(jiǎn)單的網(wǎng)站設(shè)計(jì)規(guī)則,創(chuàng)建提高設(shè)計(jì)效率的絕佳方法

2016-09-24    分類: 網(wǎng)站設(shè)計(jì)

要保持簡(jiǎn)單。這個(gè)概念可以追溯到1960年,當(dāng)時(shí)美國(guó)海軍實(shí)施了KISS原則,認(rèn)為如果簡(jiǎn)單而不是復(fù)雜,大多數(shù)系統(tǒng)工作能做得最好。幾乎任何設(shè)計(jì)項(xiàng)目也是如此。大多數(shù)平面設(shè)計(jì)師在職業(yè)生涯初期就了解到KISS。那么你怎么能這樣做呢?創(chuàng)建一個(gè)簡(jiǎn)單的設(shè)計(jì)比你想象的要復(fù)雜一點(diǎn)。 這里有七個(gè)規(guī)則,可以幫助你把雜亂的東西都剪掉,創(chuàng)造一個(gè)漂亮的簡(jiǎn)單的賬戶。

1.工作每頁(yè)設(shè)置一個(gè)目標(biāo)

一個(gè)簡(jiǎn)單設(shè)計(jì)的開始,從項(xiàng)目的目標(biāo)和網(wǎng)站每一頁(yè)的具體目標(biāo)開始。每個(gè)頁(yè)面都應(yīng)該引導(dǎo)用戶使用一個(gè)動(dòng)作,不包括導(dǎo)航和頁(yè)腳。這可以是任何東西,從點(diǎn)擊鏈接,輸入信息,觀看視頻或玩游戲。但是每個(gè)頁(yè)面都應(yīng)該關(guān)注單個(gè)用戶的操作或轉(zhuǎn)換。太多的事情會(huì)讓用戶不堪重負(fù)。他們可能忽略了應(yīng)該完成哪些行動(dòng),并可能做出不那么理想的選擇。計(jì)劃設(shè)計(jì),使每個(gè)頁(yè)面引導(dǎo)用戶達(dá)到一個(gè)目標(biāo)。每一個(gè)可操作的按鈕上面的滾動(dòng)和下面的滾動(dòng)在同一頁(yè)面上應(yīng)該做同樣的事情。這種一致性可以幫助用戶理解為什么他們?cè)谀愕恼军c(diǎn)上,以及他們應(yīng)該做什么;這些選擇的簡(jiǎn)單性使設(shè)計(jì)變得簡(jiǎn)單而引人入勝。

2.堅(jiān)持兩個(gè)類型的家庭

有這么多的設(shè)計(jì)準(zhǔn)則,為一個(gè)項(xiàng)目推薦了三種字體。你可以用兩個(gè)健壯的類型家庭來簡(jiǎn)化這個(gè)問題。尋找一個(gè)類型的家庭,包括多重的重量,在常規(guī)的和大膽的或黑色的選擇之間有大量的對(duì)比。為了更有才華,選擇一個(gè)顯示選項(xiàng),其中包括一些你可以在超大標(biāo)題中使用的替代字符。然后你所要做的就是混合和匹配從一個(gè)體字體和顯示字體,以獲得大量的字體組合,為整個(gè)設(shè)計(jì)。使用兩種類型的家庭,就像你選擇了更多具有特定重量或風(fēng)格的特定用途的選擇一樣。您將發(fā)現(xiàn)這可以幫助您創(chuàng)建一個(gè)可讀性高且易于使用的排版工具,這很容易管理并且具有視覺一致性。

3.產(chǎn)品使用一致的對(duì)齊

左邊,中間,甚至右邊――不管你喜歡什么樣的對(duì)齊方式,在整個(gè)設(shè)計(jì)中都要堅(jiān)持。這包括對(duì)齊類似的項(xiàng)目,例如文本框和元素,它們不是相似的,而是組合在一起的。適應(yīng)性在這方面做得很好,在主頁(yè)滑塊上的文字。盡管圖片上有不同數(shù)量的文字,但每個(gè)標(biāo)題都要按動(dòng)作按鈕。元素之間的間距也是一致的。更重要的是,這種一致的對(duì)齊方式會(huì)在滾動(dòng)頁(yè)面上顯示其他的標(biāo)題和CTA對(duì)。對(duì)齊會(huì)匹配滑塊的流,滑塊也會(huì)以互補(bǔ)的方向移動(dòng)。在文本元素中,左側(cè)和中心對(duì)齊是最常見的選項(xiàng),因?yàn)樗鼈兪亲钜鬃x的。對(duì)于較長(zhǎng)的文本,左對(duì)齊是選選項(xiàng)。

4.產(chǎn)品建立層次結(jié)構(gòu)

用戶不應(yīng)該考慮要看什么,或者如何在設(shè)計(jì)中移動(dòng)。即使是最簡(jiǎn)單的可視組合也應(yīng)該有不同的層次結(jié)構(gòu)。它從一個(gè)顯性的視覺開始。它可以是一個(gè)圖像或視頻或文本顯示或任何其他將產(chǎn)生第一印象的東西。

然后應(yīng)該有一些文本,告訴用戶設(shè)計(jì)和網(wǎng)站試圖溝通的內(nèi)容。這通常是一個(gè)簡(jiǎn)單標(biāo)題的形式,與主要的視覺作品一起工作。第三是為用戶完成的第二部分文本或操作。最后一個(gè)視覺元素是導(dǎo)航菜單。用戶希望找到所有這些元素,并訓(xùn)練眼睛通過基本的順序來移動(dòng)這些元素。通過這樣的方式設(shè)計(jì)使他們更容易。

5.給元素足夠的空間

如果你現(xiàn)在還不知道,那就把它記在記憶里吧:白色的空間是你的朋友。給設(shè)計(jì)中的每個(gè)元素足夠的空間??臻g將有助于吸引對(duì)單個(gè)元素的注意,占用“空間”,這樣你就不會(huì)被誘惑去弄亂畫布,并幫助創(chuàng)建一個(gè)有焦點(diǎn)的整體設(shè)計(jì)。使用空間的訣竅是一致性。設(shè)置將圍繞單個(gè)元素或文本行之間的空間的空間量的規(guī)則。如果設(shè)計(jì)最終看起來太貧瘠了,你可能需要把間隔拉回一點(diǎn)。當(dāng)你打開設(shè)計(jì)時(shí),你會(huì)知道間隔是正確的,并直接進(jìn)入你想讓用戶最先看到的地方。(不確定是什么?)回到第4號(hào)――建立等級(jí)制度。

6.Amp了對(duì)比

高對(duì)比度設(shè)計(jì)元素――從顏色的選擇到元素的大小――可以讓一個(gè)項(xiàng)目的視覺效果恰到好處,即使是在最簡(jiǎn)單的框架中也是如此。對(duì)于一個(gè)流行的選擇,嘗試一個(gè)明亮的對(duì)比色調(diào)色板吸引用戶注意。大膽的顏色會(huì)讓簡(jiǎn)單的設(shè)計(jì)變得更加復(fù)雜和有趣,這是一個(gè)黑白的選擇。為了充分利用對(duì)比色,選擇顏色輪上的相反位置的色調(diào)和相似的飽和度。如果你喜歡這個(gè)選項(xiàng),那就試試別的顏色輪吧。(你甚至可能會(huì)發(fā)現(xiàn)一個(gè)意想不到的新愛好,比如上面的紫色和teal組合。)

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

設(shè)計(jì)的一致性是殺手設(shè)計(jì)的最好(也是最壞的)秘密之一。這是一種經(jīng)常被遺忘的事情,因?yàn)樵O(shè)計(jì)項(xiàng)目充斥著多個(gè)按鈕樣式或社交媒體圖標(biāo),這些圖標(biāo)與網(wǎng)站的其他圖標(biāo)不匹配。用戶界面元素不應(yīng)該是事后的想法。在整個(gè)項(xiàng)目中以相同的方式創(chuàng)建一個(gè)圖標(biāo)和用戶界面元素集和規(guī)則并使用它們,這很重要。(如果你不想從頭開始創(chuàng)建,你甚至可以購(gòu)買或下載圖標(biāo)字體或用戶界面元素工具包。)為元素選擇一個(gè)顏色,使用相同的懸停動(dòng)作或效果(一個(gè)元素是可點(diǎn)擊的元素,另一個(gè)是不可以點(diǎn)擊的元素)和基于使用的大小元素。(可以接受一個(gè)圖標(biāo)大小和一個(gè)超大號(hào)的選項(xiàng),這些元素都是圖形化的。)Praticca自動(dòng)售貨機(jī)使用超大尺寸的圖標(biāo)來提示用戶信息。A +位于一個(gè)彩色圖標(biāo)內(nèi)。除了顏色,這三個(gè)圖標(biāo)都是相同的。它們?cè)谑髽?biāo)懸停上都做同樣的事情,當(dāng)用戶點(diǎn)擊時(shí),它們的行為都是一樣的。同樣的圖標(biāo)在網(wǎng)站上使用更小,以開始新的內(nèi)容,并幫助用戶掃描副本。

結(jié)論

一個(gè)簡(jiǎn)單的設(shè)計(jì)不需要完全的最小化或者缺少有趣的元素或者用戶界面的東西。一個(gè)簡(jiǎn)單的設(shè)計(jì)是非常有用和直觀的,允許用戶毫無疑問或復(fù)雜的指令參與。雖然有一個(gè)更復(fù)雜的網(wǎng)站或用戶交互的地方,但大多數(shù)網(wǎng)站設(shè)計(jì)都能從KISS方法中獲益。不要過度思考,用戶也不必如此。

標(biāo)題名稱:7條簡(jiǎn)單的網(wǎng)站設(shè)計(jì)規(guī)則,創(chuàng)建提高設(shè)計(jì)效率的絕佳方法
本文URL:http://www.bm7419.com/news6/48206.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(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í)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)