這些網(wǎng)頁設(shè)計原則很重要！讓你瞬間牛逼！

時間：2023-09-27 07:48:02 | 來源：網(wǎng)站運營

時間：2023-09-27 07:48:02 來源：網(wǎng)站運營

這些網(wǎng)頁設(shè)計原則很重要！讓你瞬間牛逼?。壕拖袢魏蝿?chuàng)造性的學(xué)科一樣，網(wǎng)站設(shè)計也有它的規(guī)則。內(nèi)容、導(dǎo)航和視覺效果必須協(xié)同工作，以確保設(shè)計達(dá)到完美的平衡。但是，如何處理好的網(wǎng)站設(shè)計的基礎(chǔ)呢？讓我們找出答案。




優(yōu)秀網(wǎng)站設(shè)計的10條原則




這里有10個原則來幫助指導(dǎo)您的下一個網(wǎng)站設(shè)計。




1、目標(biāo)為基礎(chǔ)













網(wǎng)站的消息傳遞和號召性用語（CTA）是支持其目標(biāo)的關(guān)鍵，網(wǎng)站的目的可以很簡單，比如促進(jìn)購買、講述公司故事或提供教程。您應(yīng)該用一兩句話來表達(dá)網(wǎng)站的意圖——思考一下網(wǎng)站的使命宣言。




進(jìn)行網(wǎng)站設(shè)計時，您不應(yīng)該進(jìn)行任何設(shè)計。目的將為您提供清晰的計劃，并指導(dǎo)設(shè)計和內(nèi)容創(chuàng)建。贏得勝利并不是一種實用的設(shè)計理念。




鞏固網(wǎng)站目的的一部分是要知道它是為誰服務(wù)的——誰是您的受眾，他們需要什么信息，您的網(wǎng)站將如何提供這些信息？了解您的用戶的人口統(tǒng)計數(shù)據(jù)和痛點將幫助您找到正確的方向。




設(shè)計有廣泛的意圖，也有擊敗競爭對手的具體營銷策略。視覺和內(nèi)容如何鞏固您的品牌，讓它脫穎而出？您的網(wǎng)站如何能比您的競爭對手提供更多的價值？建立品牌和受眾是很重要的。




2、內(nèi)容賦予意義










Purple Mattress以簡單，樂觀的方式傳達(dá)了其品牌的優(yōu)勢。




他們的網(wǎng)站設(shè)計是一個漂亮的包裝，但真正重要的是里面的東西。一個網(wǎng)站需要有實質(zhì)內(nèi)容，而不是輕率的填充內(nèi)容。




系統(tǒng)應(yīng)該使用用戶熟悉的單詞、短語和概念使用用戶的語言，而不是面向系統(tǒng)的術(shù)語。遵循現(xiàn)實世界的慣例，使信息以自然和邏輯的順序出現(xiàn)。

-Jakob Nielsen，“用戶界面設(shè)計的10個可用性啟發(fā)”




高質(zhì)量的內(nèi)容是有用的，清晰的，并且引導(dǎo)您的聽眾采取您想要他們采取的行動。SEO應(yīng)該被計劃并融入到內(nèi)容中。搜索引擎優(yōu)化可以深思熟慮，有品味地執(zhí)行與對話的語氣，整合關(guān)鍵字和短語，不分散您的信息。




確定網(wǎng)站的目的有助于提供您需要的內(nèi)容，采用內(nèi)容第一的方法意味著從設(shè)計過程的開始就使用真正的內(nèi)容。真正的內(nèi)容能讓您更容易地發(fā)現(xiàn)需要在過程中做出的改變，而不是在最后淹沒在調(diào)整和大修中。




用能滿足聽眾需求的內(nèi)容來取悅他們。否則，您的網(wǎng)站可能會像這樣：













3、視覺效果能讓人們參與其中










Finsweet使用了不尋常的圖像和動畫來吸引您的注意力——比如一個粉色和綠色的獅子。




每個設(shè)計元素都應(yīng)該反映和傳達(dá)一個品牌的身份，圖片、插圖和其他圖形平衡了文本，分散了網(wǎng)頁，讓眼睛從閱讀中得到休息。




一個激動人心的主頁面形象會給人良好的第一印象，動畫過渡和滾動觸發(fā)的效果使人們移動，并使導(dǎo)航從一種無需動腦筋的必要變成一種交互體驗。無論一個品牌的風(fēng)格如何，視覺效果都應(yīng)該為網(wǎng)站設(shè)計增添活力，而不僅僅是占據(jù)空間。軟件公司、食品卡車和會計師都可以在保持品牌的同時創(chuàng)造性地使用他們網(wǎng)站的圖片。




您的視覺效果應(yīng)該是高質(zhì)量的、好看的——使用清晰、色彩平衡的照片和圖形，尺寸和分辨率要合適。糟糕的視覺效果會毀掉一個偉大的設(shè)計。




4、和諧共鳴










NUA自行車使用灰色調(diào)色板，充足的白色空間和稀疏的文字，使我們的注意力集中在他們的自行車上。




布局中的每一個重要元素都應(yīng)該協(xié)同工作——包括HTML和CSS。如果一個顏色鮮明的超大按鈕沒有足夠的理由讓它看起來不一致，那它感覺就不合適了。不協(xié)調(diào)分散和中斷用戶體驗。當(dāng)有些東西感覺不好的時候，很難看到整體上的好。同樣的，糟糕的用戶體驗會導(dǎo)致網(wǎng)站訪問者反彈——損害您在谷歌中排名的機(jī)會。




一個好的設(shè)計師會讓事情變得用戶友好，并且知道哪些字體、視覺效果和導(dǎo)航類型會吸引注意力。他們對如何將它們組合在一起有一個愿景。新設(shè)計師常常試圖在布局中加入盡可能多的刺激元素。但是當(dāng)太多的元素需要我們的注意力時，我們就會失去注意力。




熟練的網(wǎng)站設(shè)計師會考慮到每個元素的重量，他們知道什么時候應(yīng)該克制。他們知道如何創(chuàng)建一個輕松導(dǎo)航的頁面設(shè)計。這種和諧感也延伸到了品牌標(biāo)識上。從網(wǎng)站的聲音和色調(diào)到調(diào)色板的一切都應(yīng)該是一致的。




品牌指南和生活方式指南有助于保持一致性。品牌指南提供了從內(nèi)容到顏色的全面解釋。還有一個生活方式指南，展示了所有東西是如何組合在一起的，并使整個站點的變化簡單而迅速。




5、字體塑造知覺










尼古拉斯·杰克遜使用一種時尚的字體和打印式的圖像給他的作品集一個藝術(shù)的復(fù)雜性。




印刷最重要的一點是，它把思想、想法、圖像從一個頭腦傳遞到另一個頭腦。

——Beatrice Warde《水晶酒杯》




印刷術(shù)是思想的容器，除了單詞本身，字母的形狀和樣式也傳達(dá)著意思。排版就像一個解碼器，把作者的想法翻譯成視覺表達(dá)。




字體應(yīng)該同時適合放置的選擇和設(shè)計的色調(diào)，草書字體可能在標(biāo)題或裝飾的目的很好，但他們是不切實際的大段文字。




錯誤的字體會破壞重要的內(nèi)容。只要問問那些用漫畫字體幻燈片宣布發(fā)現(xiàn)希格斯玻色子的科學(xué)家們就知道了。對于這種字體的選擇，人們有很多要說的。誰知道呢——也許那些唱反調(diào)的人錯了？一定要知道并喜歡您選擇字體的原因。




在設(shè)計中，傳統(tǒng)字體和更具個性的字體有很大的空間。對于大塊的內(nèi)容和其他重要信息，簡單的字體可以提高可讀性。程式化的排印應(yīng)該被當(dāng)作強(qiáng)烈的香料-添加一點這里和那里的味道。




6、組織統(tǒng)一










Blue Apron井然有序的網(wǎng)站設(shè)計使他們的食品包訂閱變得簡單而誘人。




內(nèi)容應(yīng)該具有邏輯、流程并適合于層次結(jié)構(gòu)。您的內(nèi)容應(yīng)該引導(dǎo)您的聽眾得出一個必然的結(jié)論，每一部分都建立在之前的基礎(chǔ)上。每句話都應(yīng)該更清楚地說明您的品牌和目的，讓讀者在閱讀時對接下來的內(nèi)容有所期待。




標(biāo)題標(biāo)簽應(yīng)該用來構(gòu)造內(nèi)容，幫助網(wǎng)絡(luò)爬蟲為網(wǎng)絡(luò)搜索排名您的網(wǎng)站。如果您在開始設(shè)計之前還沒有完成所有的內(nèi)容，至少使用標(biāo)題來幫助您構(gòu)建。




視覺元素也應(yīng)該有組織。用圖像和圖形定義部分，以補(bǔ)充書面內(nèi)容。




7、顏色決定基調(diào)













簡單巧克力用他們產(chǎn)品的包裝和原料來提供網(wǎng)站的調(diào)色板，其設(shè)計與他們的品牌流動，并展示他們美味的巧克力棒。




您為設(shè)計選擇的調(diào)色板傳達(dá)了很多信息。它可以像玩具公司那樣好玩，也可以像金融服務(wù)網(wǎng)站那樣嚴(yán)肅。一個配色方案可以很好地反映一個品牌的精神和信息。




選擇能傳達(dá)您身份的顏色，最重要的是，讓內(nèi)容容易閱讀。記住這一點，總是通過顏色對比檢查來運行您的顏色組合，以確?？勺x性。




8、留白創(chuàng)造平衡










丹?馬查多(Dan Machado)的在線作品集使用了大片空白和粗線條。




空白、按鈕和其他視覺設(shè)計元素可以幫助圖像和內(nèi)容脫穎而出，避免布局混亂。留白，也被稱為負(fù)空間，是任何實用設(shè)計的一個重要方面。沒有它，消息傳遞就會變成模糊的斑點。




9、視覺層次結(jié)構(gòu)使導(dǎo)航簡單










水煙零售商Fumo使用一個下拉菜單，其中只有有限的幾個選項，以方便瀏覽產(chǎn)品類別。




您的網(wǎng)站導(dǎo)航的視覺層次結(jié)構(gòu)應(yīng)該使它很容易訪問您的內(nèi)容，只需幾個步驟。當(dāng)然，您不希望錯過任何內(nèi)容，但無休止的下拉菜單、按鈕和內(nèi)部鏈接會讓人不知所措。




通往網(wǎng)站各部分和內(nèi)容的路徑應(yīng)該清晰易用。想象一個有3個街道選擇的交叉路口和10個街道選擇的交叉路口——簡單會讓您的旅程更好。




10、真實性增強(qiáng)信任













從基層到被大公司收購，本杰里一直堅持著自己的價值觀。




“好的設(shè)計是誠實的。它并不能使產(chǎn)品比實際更有創(chuàng)新性、更強(qiáng)大或更有價值。它不會試圖用無法兌現(xiàn)的承諾來操縱消費者?！獊碜跃S索的《優(yōu)秀設(shè)計的力量》。




精明的消費者。他們能夠看穿膚淺的營銷行話——他們希望品牌是真實的。除了視覺效果，網(wǎng)站還應(yīng)該有深度和真實性。如果您登陸過一個有虛假推薦信的網(wǎng)站，您可能會立即被退回。我們知道當(dāng)有人試圖在我們身上停車時，我們總是感覺不好。




陳詞濫調(diào)和模糊的營銷文案不會幫助您與人建立聯(lián)系。通過提供有價值的信息，傳播品牌背后的人性，將您的品牌定位為真實的聲音。




一些簡單的規(guī)則將指導(dǎo)您無盡的設(shè)計可能性




這些指導(dǎo)原則告訴您幾乎所有您要訪問的網(wǎng)站，例外總是存在的，但是了解規(guī)則可以在不破壞您的網(wǎng)站設(shè)計的情況下更容易地修改它們。