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