7條簡單的網(wǎng)站設(shè)計規(guī)則,創(chuàng)建提高設(shè)計效率的絕佳方法
要保持簡單。這個概念可以追溯到1960年,當時美國海軍實施了KISS原則,認為如果簡單而不是復雜,大多數(shù)系統(tǒng)工作能做得最好。幾乎任何設(shè)計項目也是如此。大多數(shù)平面設(shè)計師在職業(yè)生涯初期就了解到KISS。那么你怎么能這樣做呢?創(chuàng)建一個簡單的設(shè)計比你想象的要復雜一點。 這里有七個規(guī)則,可以幫助你把雜亂的東西都剪掉,創(chuàng)造一個漂亮的簡單的賬戶。
1.工作每頁設(shè)置一個目標
一個簡單設(shè)計的開始,從項目的目標和網(wǎng)站每一頁的具體目標開始。每個頁面都應(yīng)該引導用戶使用一個動作,不包括導航和頁腳。這可以是任何東西,從點擊鏈接,輸入信息,觀看視頻或玩游戲。但是每個頁面都應(yīng)該關(guān)注單個用戶的操作或轉(zhuǎn)換。太多的事情會讓用戶不堪重負。他們可能忽略了應(yīng)該完成哪些行動,并可能做出不那么理想的選擇。計劃設(shè)計,使每個頁面引導用戶達到一個目標。每一個可操作的按鈕上面的滾動和下面的滾動在同一頁面上應(yīng)該做同樣的事情。這種一致性可以幫助用戶理解為什么他們在你的站點上,以及他們應(yīng)該做什么;這些選擇的簡單性使設(shè)計變得簡單而引人入勝。
2.堅持兩個類型的家庭
有這么多的設(shè)計準則,為一個項目推薦了三種字體。你可以用兩個健壯的類型家庭來簡化這個問題。尋找一個類型的家庭,包括多重的重量,在常規(guī)的和大膽的或黑色的選擇之間有大量的對比。為了更有才華,選擇一個顯示選項,其中包括一些你可以在超大標題中使用的替代字符。然后你所要做的就是混合和匹配從一個體字體和顯示字體,以獲得大量的字體組合,為整個設(shè)計。使用兩種類型的家庭,就像你選擇了更多具有特定重量或風格的特定用途的選擇一樣。您將發(fā)現(xiàn)這可以幫助您創(chuàng)建一個可讀性高且易于使用的排版工具,這很容易管理并且具有視覺一致性。
3.產(chǎn)品使用一致的對齊
左邊,中間,甚至右邊——不管你喜歡什么樣的對齊方式,在整個設(shè)計中都要堅持。這包括對齊類似的項目,例如文本框和元素,它們不是相似的,而是組合在一起的。適應(yīng)性在這方面做得很好,在主頁滑塊上的文字。盡管圖片上有不同數(shù)量的文字,但每個標題都要按動作按鈕。元素之間的間距也是一致的。更重要的是,這種一致的對齊方式會在滾動頁面上顯示其他的標題和CTA對。對齊會匹配滑塊的流,滑塊也會以互補的方向移動。在文本元素中,左側(cè)和中心對齊是最常見的選項,因為它們是最易讀的。對于較長的文本,左對齊是首選選項。
4.產(chǎn)品建立層次結(jié)構(gòu)
用戶不應(yīng)該考慮要看什么,或者如何在設(shè)計中移動。即使是最簡單的可視組合也應(yīng)該有不同的層次結(jié)構(gòu)。它從一個顯性的視覺開始。它可以是一個圖像或視頻或文本顯示或任何其他將產(chǎn)生第一印象的東西。
然后應(yīng)該有一些文本,告訴用戶設(shè)計和網(wǎng)站試圖溝通的內(nèi)容。這通常是一個簡單標題的形式,與主要的視覺作品一起工作。第三是為用戶完成的第二部分文本或操作。最后一個視覺元素是導航菜單。用戶希望找到所有這些元素,并訓練眼睛通過基本的順序來移動這些元素。通過這樣的方式設(shè)計使他們更容易。
5.給元素足夠的空間
如果你現(xiàn)在還不知道,那就把它記在記憶里吧:白色的空間是你的朋友。給設(shè)計中的每個元素足夠的空間??臻g將有助于吸引對單個元素的注意,占用"空間",這樣你就不會被誘惑去弄亂畫布,并幫助創(chuàng)建一個有焦點的整體設(shè)計。使用空間的訣竅是一致性。設(shè)置將圍繞單個元素或文本行之間的空間的空間量的規(guī)則。如果設(shè)計最終看起來太貧瘠了,你可能需要把間隔拉回一點。當你打開設(shè)計時,你會知道間隔是正確的,并直接進入你想讓用戶最先看到的地方。(不確定是什么?)回到第4號——建立等級制度。
6.Amp了對比
高對比度設(shè)計元素——從顏色的選擇到元素的大小——可以讓一個項目的視覺效果恰到好處,即使是在最簡單的框架中也是如此。對于一個流行的選擇,嘗試一個明亮的對比色調(diào)色板吸引用戶注意。大膽的顏色會讓簡單的設(shè)計變得更加復雜和有趣,這是一個黑白的選擇。為了充分利用對比色,選擇顏色輪上的相反位置的色調(diào)和相似的飽和度。如果你喜歡這個選項,那就試試別的顏色輪吧。(你甚至可能會發(fā)現(xiàn)一個意想不到的新愛好,比如上面的紫色和teal組合。)
7.使用一致的圖標和元素
設(shè)計的一致性是殺手設(shè)計的最好(也是最壞的)秘密之一。這是一種經(jīng)常被遺忘的事情,因為設(shè)計項目充斥著多個按鈕樣式或社交媒體圖標,這些圖標與網(wǎng)站的其他圖標不匹配。用戶界面元素不應(yīng)該是事后的想法。在整個項目中以相同的方式創(chuàng)建一個圖標和用戶界面元素集和規(guī)則并使用它們,這很重要。(如果你不想從頭開始創(chuàng)建,你甚至可以購買或下載圖標字體或用戶界面元素工具包。)為元素選擇一個顏色,使用相同的懸停動作或效果(一個元素是可點擊的元素,另一個是不可以點擊的元素)和基于使用的大小元素。(可以接受一個圖標大小和一個超大號的選項,這些元素都是圖形化的。)Praticca自動售貨機使用超大尺寸的圖標來提示用戶信息。A +位于一個彩色圖標內(nèi)。除了顏色,這三個圖標都是相同的。它們在鼠標懸停上都做同樣的事情,當用戶點擊時,它們的行為都是一樣的。同樣的圖標在網(wǎng)站上使用更小,以開始新的內(nèi)容,并幫助用戶掃描副本。
結(jié)論
一個簡單的設(shè)計不需要完全的最小化或者缺少有趣的元素或者用戶界面的東西。一個簡單的設(shè)計是非常有用和直觀的,允許用戶毫無疑問或復雜的指令參與。雖然有一個更復雜的網(wǎng)站或用戶交互的地方,但大多數(shù)網(wǎng)站設(shè)計都能從KISS方法中獲益。不要過度思考,用戶也不必如此。
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)