在當今這個數字化的時代,擁有一個自己的網站已經成為了企業和個人展示自己的重要途徑。成都小程序設計對于初學者和新手來說并不那么寬容。成都小程序設計借鑒了幾個世紀的平面設計理論和幾千年的美學原則,需要花費一生的時間才能掌握。但在您灰心之前,好消息是您不需要掌握成都小程序設計來創建一兩個漂亮的頁面 - 您所需要做的就是遵循正確的成都小程序設計原則。
將下面的成都小程序設計原則視為我們成都小程序設計的“十誡”只不過只有九條,因為現在的事情比三千多年前更加精簡。如果您是一位有抱負的網頁設計師,甚至只是剛剛開始 DIY 網站,請牢記這些成都小程序設計原則。
視覺層次是平面設計的基石之一。從本質上講,它指的是當您擁有一組視覺效果(例如網頁)時,最吸引和最不注意的內容。通過操縱視覺層次結構,設計師理論上可以控制觀看者注意到每個單獨元素的順序,稱為“視覺流”。
對于成都小程序設計,視覺層次至關重要。成都小程序設計師必須優先考慮最重要的元素導航工具、頁面標題、號召性用語、用戶控件同時確保不太重要的元素不會分散注意力。
雖然有許多技術可以吸引或排斥注意力(其中一些在下面的其他成都小程序設計原則中介紹),但在實踐中設計師使用這三種主要策略來定義視覺層次結構:
大小正如您可以想象的那樣,大的元素會吸引更多的注意力,而小的元素則吸引較少的注意力。
顏色明亮、充滿活力的顏色比柔和、暗淡的顏色更容易被注意到(您也可以使用顏色對比,如下所述,以最大限度地提高效果)
位置 - 由于大多數人本能地從上到下閱讀,因此首先會注意到靠近屏幕頂部的元素。
在創建網頁布局時,請按照您希望訪問者注意到的順序列出所有元素,從而預先規劃您的視覺層次結構。從那里開始,對每一項應用適當的技術。
2000 年,作家兼計算機科學家 Steve Krug 出版了他的開創性著作《Don't Make Me Think》,催生了早期的用戶體驗運動。本書的中心教訓讓你的設計盡可能簡單易懂即使在 20 多年后,仍然是成都小程序設計的基本原則之一。
這個想法是,每當用戶必須停下來思考如何做某事或他們需要的按鈕在哪里時,就會妨礙他們完成他們想要完成的事情。例如,如果您的用戶想要使用您的應用程序編寫電子郵件,他們應該只專注于編寫電子郵件,而不是試圖找到“發送”按鈕或想知道如何更改字體。
克魯格的思想還強調人類本能地選擇第一個解決方案,而不一定是最好的解決方案。然后,設計師就需要讓最佳解決方案易于注意到,以免用戶走上意想不到且效率較低的路線。
設計師應該始終尋找簡化其設計的方法。視覺層次結構在讓用戶快速找到他們想要的內容方面發揮著重要作用,但其他策略也很有用。
以雅各布定律(以另一位用戶體驗先驅雅各布·尼爾森的名字命名)為例,該定律建議使用用戶在其他網站上已經熟悉的圖標和圖案。例如,當今大多數網站都在屏幕頂部使用放大鏡圖標來指示搜索欄。在您的網站上使用相同的圖標意味著用戶不必考慮如何使用您網站上的搜索功能,而將其放在頂部意味著他們不必考慮在哪里可以找到它。
擴展我們吸引和排斥注意力的技巧,請記住“異性相吸”。對比是經驗豐富的設計師最喜歡的工具,他們利用顏色和尺寸之間的明顯差異。
并置使用相反的顏色是吸引注意力的好方法。這是突出顯示 CTA 按鈕的最有效策略之一;設計師會將 CTA 按鈕涂成與背景相反的顏色,這是使其脫穎而出的簡單方法。
同樣,尺寸相反的尺寸在彼此相鄰時效果很好。如果頁面上有很多元素并且沒有空間讓任何元素變大,請嘗試在元素旁邊放置一些小元素 - 這有效地使其看起來更大,從而使其更引人注目。
同樣,運動和動作也引起了人們的注意,這是設計師喜歡利用的狩獵采集時代的一種古老的進化技巧。您可以對特殊元素使用小動畫,以便更快地注意到它們,例如,當有新通知時使用彈跳圖標。
只是要小心過度使用動畫。如果屏幕上移動的東西太多,就會很難集中注意力。相反,應謹慎使用運動以保持其效力。
空白,也稱為“負空間”,是專業設計師、攝影師和所有視覺藝術家最喜歡的另一種工具??瞻變H指空白區域,或者屏幕上除了背景之外沒有視覺元素的部分。
網頁中的空白與所有其他內容一樣重要 - 如果您主動使用它,則更為重要。對于初學者來說,空白對于控制頁面的平衡是必要的;太多的元素放在一起可能會造成混亂和分散注意力,因此需要足夠的空白來使布局更加全面。
此外,空白可以通過這個簡單的成都小程序設計原則影響視覺層次:對象周圍的空白越多,該對象就越受關注。這意味著,如果您用大量空白圍繞一個元素,它會比用其他視覺效果圍繞同一元素吸引更多的注意力。
最后,空白對于某些元素的間隔和分組很重要。在兩個對象之間放置額外的空白有助于區分它們,而在它們之間放置較少的空白則可以將它們連接起來。
當通過相似性分隔某些元素時,使用空白進行分組會很方便。例如,假設您需要區分同一頁面上的兩個單獨的導航菜單,例如一個用于您的博客類別的菜單,另一個用于您的整個網站。將所有項目以最小的空間分組到一個菜單中有助于用戶將它們連接起來,同時在兩個菜單之間放置額外的空間可以防止讀者將它們混淆。
另一個流行的成都小程序設計原則是限制一次向用戶提供的信息量。人腦只能處理這么多信息,尤其是在短期記憶方面,因此它有助于將信息分解成更小的劑量,這也體現了克魯格關于不要讓用戶思考太多的建議。
米勒定律最好地證明了這一觀點,該定律基于心理學家喬治·米勒 (George Miller) 1956 年的工作。米勒發現,普通人的短期記憶中一次只能存儲 7 條信息(給予或獲取 2 條)。
不幸的是,很多網頁要說的內容不止七件事。米勒自己的研究建議使用“分塊”技術,或者將相關信息分組為小“塊”,以使其更容易消化。分塊的例子可以在電話號碼中看到:我們將區號放在一個塊中,將前三位數字放在另一個塊中,最后四位數字放在最后一個塊中。
特別是在成都小程序設計中,它還有助于將頁面劃分為“屏幕”,指的是屏幕上一次可用的所有信息。當用戶消化完一個屏幕上的所有信息后,他們會向下滾動以查看包含新信息的全新屏幕。
或者,您也可以削減脂肪并只提供必要的內容。這在一定程度上是成都小程序設計極簡主義趨勢背后的推動力,它鼓勵網頁具有大量空白,并且僅包含絕對必要的元素,例如控件。這種風格非常適合成都小程序設計,因為它還具有減少加載時間的副作用。
費茨定律(經常被錯誤地寫成“費茨定律”)既顯而易見又經常被忽視。它指出最可操作的區域應該是最容易訪問的。
對于桌面成都小程序設計,菲茨定律建議縮小用戶必須移動鼠標的距離。通常,如果您有一起使用的功能,則應將它們盡可能靠近放置,即評論文本框和“發布”按鈕。
這一成都小程序設計原理也催生了右鍵下拉菜單,完美地詮釋了費茨定律。右鍵下拉菜單,完美效率;控件直接出現在光標所在的位置,從而最大限度地減少移動距離。
對于移動成都小程序設計,菲茨定律建議將最常用的控件放在用戶手指(尤其是拇指)最容易觸及的屏幕區域。假設用戶垂直握住智能手機并使用拇指進行交互,屏幕的熱點位于兩個底角。您會注意到大多數移動應用程序的控件位于底部而不是頂部。
在桌面和移動成都小程序設計中,菲茨定律建議將按鈕和控件設計得足夠大,以便用戶可以輕松地單擊它們。更大的按鈕可以減少用戶移動光標或手指的次數,但不要讓按鈕太大,否則會浪費屏幕空間。
在處理按鈕、圖標和圖像等成都小程序設計必需品時,排版常常被忽視。但正是因為排版更加微妙,才使其如此有用文本的外觀仍然會影響用戶對你的看法,即使他們沒有意識到這一點。
文本的字體、大小和風格傳達了您是什么樣的品牌或人,從有趣和休閑到嚴肅和專業。但排版不僅會影響你的形象,還會影響你的形象。它還適合視覺層次結構,尤其是按鈕標簽和 CTA 副本。
首先,您必須區分短格式文本和長格式文本。短文本是指你有一個單詞、一行或一個句子單獨突出。這些是類似文本的頁面標題、按鈕標簽、標語或快速說明。長文本用于閱讀,例如博客文章和網頁副本,或任何超過幾句話的文本。
排版的基本成都小程序設計原則是僅對短文本使用華麗且藝術的排版,而對長文本使用更基本的排版,優先考慮易讀性。因此,您可以為頁面標題使用帶有裝飾的大型彩色字體,但對于長文本塊則堅持使用更標準化的字體和基本顏色,以使它們更易于閱讀。
無論如何,選擇最能代表您品牌的版式。最常見的選擇之一是襯線字體和無襯線字體;帶襯線的字體顯得更加正式和嚴格,而無襯線字體則顯得更加友好和隨和。
規劃頁面的構成是您在成都小程序設計中最早采取的步驟之一,您的第一個決定將是在對稱和不對稱之間進行選擇。多年前,人們理所當然地認為大多數網站都是對稱設計的,但最近,不對稱風格越來越流行。
基本上,對稱的網頁更容易瀏覽,但缺乏原創性,因此觀眾往往會覺得它們乏味。然而,不對稱的網頁會脫穎而出并吸引用戶的注意力,但會使瀏覽和查看所有內容變得更加困難。
對于品牌以及訪問者如何看待您的公司,對稱的網站給人的感覺更加結構化和有組織,而不對稱的網站則顯得更加前衛和更具藝術性。您可以選擇最適合您的品牌風格的一種,但如果您必須展示大量分散的商品(例如電子商務網站上的產品),那么對稱性可以讓您更輕松地組織所有內容。
同樣,每當網站需要顯示大量元素時,網格格式就成為默認的選擇。畢竟,行和列是將所有這些項目分組在一起的最明智的格式。
然而,正是因為網格太傳統了,所以使用更加分散和混亂的格式可以幫助你脫穎而出?,F代設計師意識到,只需稍微錯開行和列,就可以將自己的網站與人群分開。雖然這種風格可能會讓傳統品牌感到反感,但對于想要顯得前衛或前衛的品牌來說,它是完美的外觀。
最后但并非最不重要的一點是,好的成都小程序設計是一致的。每次你重復一個明智的成都小程序設計選擇,你就會增強它的影響力。例如,假設您選擇紅色作為強調色,因為您希望給人留下熱情和兇猛的印象。每次您在其他頁面上使用紅色作為強調色時,您都會顯得更加熱情和激烈。
成都小程序設計的一致性有利于頁面的各個方面,影響導航、布局、配色方案、排版、圖像和所有其他方面。這與品牌一致性的重要性不謀而合,即使用相同的徽標、顏色和口號可以增強每次新用途的品牌關聯。
但如果這還不足以讓您相信一致性的重要性,那么相反的情況就更糟了??紤]一下,如果您更改每個新頁面的控件圖標和位置,您的用戶將會多么沮喪。這意味著用戶必須一遍又一遍地弄清楚所有東西在哪里以及它們如何工作,這打破了早期不讓用戶思考的成都小程序設計原則。
希望我們的成都小程序設計原則列表不會讓您不知所措。將如此復雜的學科塞進少量的快速要點中并不容易。請記住,您應用和實踐這些原則的次數越多,它們就越有意義;不久之后,他們就會成為你的第二天性。
如果您確實在努力創建您想要的成都小程序設計,請隨時為您的項目聘請我們的自由平面設計師之一 - 他們已經掌握了這些成都小程序設計原則以及更多!