20個(gè)改善網(wǎng)站設(shè)計(jì)的簡(jiǎn)單技巧

  沒(méi)有主意嗎？沒(méi)有好的圖像？那就黑白相間。你就可以獲得具有正確構(gòu)圖的野獸派設(shè)計(jì)。這可以幫助你了解平衡空白以及如何使用文本和幾何形狀。
  02、創(chuàng)建一個(gè)“平衡方案”。
  我喜歡使用我可能發(fā)明的“事物”來(lái)測(cè)試我的設(shè)計(jì)。我稱其為“平衡方案”，它是概念的黑白版本，其中，我使用簡(jiǎn)單的幾何圖形代替內(nèi)容。
  03、設(shè)計(jì)背景
  我之前介紹的示例以灰色背景顯示，但你可以嘗試其他操作。這有助于你的設(shè)計(jì)創(chuàng)建一些深度和上下文。
  04、使用尺寸指南。
  你不必浪費(fèi)一整天的時(shí)間來(lái)設(shè)計(jì)測(cè)量尺寸。只要最后，你的段落文本將在14–18pt左右即可，你的小標(biāo)題需要大一些，可以為24–36pt之間，并且你的大標(biāo)題還要更大一點(diǎn)，我個(gè)人為它們可以使用96-144pt。而Figma的默認(rèn)大小非常適合排版。
  05、使用Z-Index，分層設(shè)計(jì)
  如果你有一些具有透明性的圖像，則可以利用它們來(lái)創(chuàng)建一些分層。如果沒(méi)有，則可以使用remove.bg
  作為CSS中的Z-index，n可以將圖像置于其他項(xiàng)目的前面或后面，從而產(chǎn)生三維感。這是非常有效的。
  06、嘗試使用柔和的顏色
  鮮艷的色彩很棒，但常常導(dǎo)致激進(jìn)的設(shè)計(jì)和糟糕的組合。此外，如今柔和的設(shè)計(jì)非常流行，因此，我們可以多嘗試使用柔和的顏色選擇器。
  07、使用空白設(shè)計(jì)
  在我看來(lái)，空白多比空白少要好。雜亂無(wú)章的設(shè)計(jì)真的很糟。不過(guò)，你可以通過(guò)多種方式獲得：
  保持大背景圖可見(jiàn)。
  避免帶有間隔的文本墻。
  不要使用不會(huì)吸引太多注意力的圖像。
  減少文本的內(nèi)容，并保留醒目的短語(yǔ)即可。
  08、發(fā)現(xiàn)噪點(diǎn)的力量
  通常，當(dāng)我們想到設(shè)計(jì)時(shí)，就會(huì)想到干凈，平滑，清晰的概念。但是，完美在于缺陷。
  噪音是你設(shè)計(jì)中的堅(jiān)強(qiáng)朋友，尤其是當(dāng)你要使網(wǎng)站外觀優(yōu)雅或藝術(shù)化時(shí)。
  此外，施加細(xì)微的噪點(diǎn)會(huì)使你的構(gòu)圖具有電影效果，這非常適合視頻和動(dòng)態(tài)網(wǎng)站。
  09、尋找并使用好的字體
  有很多可怕的字體，尤其是我們計(jì)算機(jī)上預(yù)裝的字體。要找到好的字體，請(qǐng)開(kāi)始瀏覽網(wǎng)絡(luò)或觀看youtube視頻，以了解出色的字體。
  但請(qǐng)注意：許多字體不是免費(fèi)的，并且在沒(méi)有許可的情況下使用它們可能會(huì)給你帶來(lái)麻煩。不過(guò)，也不用擔(dān)心：大多數(shù)字體都有免費(fèi)版本！
  10、使用幾何體
  這可能是最難使用的技巧，但如果正確應(yīng)用，它會(huì)幫助你提升設(shè)計(jì)效果。
  使用幾何圖形有助于增強(qiáng)布局中的概念和順序，甚至不需要圖像。找到正確的幾何形狀很困難，但我仍然無(wú)法很好地掌握它。
  一個(gè)非常實(shí)用的技巧是，將文案中的字母，數(shù)字和標(biāo)題變換成作幾何體圖形，使其巨大而微妙，或者將某些特定的字母用直接當(dāng)作形狀使用，像下面示例中的A字母，就應(yīng)用的很好。
  11、單色圖像背景
  一種極其簡(jiǎn)單但有效的技巧是使用單色圖像作為背景，而不是使用純色。
  這個(gè)技巧可以幫助你將設(shè)計(jì)圖的紋理增強(qiáng)，同時(shí)還留出一些空間。
  12、利用圖像中的顏色進(jìn)行設(shè)計(jì)
  我見(jiàn)過(guò)很多不知道如何使用圖像本身調(diào)色板的初學(xué)者設(shè)計(jì)師。
  從你正在處理的圖像中找到所需的每種顏色。
  有時(shí)，立即找到顏色可以幫助你提出新的想法。讓我們以圖像色調(diào)決定樣式的示例為例。
  使用常見(jiàn)的顏色有助于減輕對(duì)比度，并保持設(shè)計(jì)流程的順暢。
  13、三種顏色合理分配
  在前面，我談到了黑白設(shè)計(jì)，但從長(zhǎng)遠(yuǎn)來(lái)看，這是極其有限的。
  基本上，每個(gè)設(shè)計(jì)師也都知道這一點(diǎn)，但是，下一步就是利用一種最常見(jiàn)的設(shè)計(jì)策略：僅使用三種顏色。
  顯然，這三種顏色不是隨機(jī)使用的。他們每個(gè)人都有特定的角色，你必須知道：
  主要背景。占填充圖像的60％。
  主體顏色。占填充圖像的30％。
  強(qiáng)調(diào)色。占填充圖像的10％。
  14、對(duì)數(shù)字和文本使用不同的字體
  一個(gè)常見(jiàn)的錯(cuò)誤就是強(qiáng)迫自己把數(shù)字和文本使用相同的字體。盡管這通常可以工作，但某些字體不是為數(shù)字設(shè)計(jì)的。
  如果要在數(shù)字中使用它，請(qǐng)不要害怕在設(shè)計(jì)中使用第三個(gè)字體。當(dāng)你正在使用的兩種字體應(yīng)用于你正在設(shè)計(jì)的具有百年歷史的公司網(wǎng)站的漂亮日期覆蓋物中時(shí)，可能會(huì)很爛。
  15、注意黃色或避免黃色
  黃色，是一種漂亮的顏色，但是，它帶有一系列你可能不想面對(duì)的問(wèn)題。
  簡(jiǎn)而言之，黃色是我們眼睛最敏感的顏色，這使它非常明亮：由于你不想使客戶蒙蔽，因此，你可能會(huì)使用黃色作為強(qiáng)調(diào)色。
  在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中，強(qiáng)調(diào)色通常必須與白色配合使用，就像下面示例中的按鈕一樣，由于其亮度，它的對(duì)比度過(guò)低，而造成文本可讀性偏低。
  16、使用網(wǎng)格參考線
  你可能知道960網(wǎng)格系統(tǒng)或Twitter的Bootstrap，并且已經(jīng)多次使用12列網(wǎng)格布局進(jìn)行設(shè)計(jì)。
  但是，你是否曾經(jīng)嘗試過(guò)讓這些網(wǎng)格可見(jiàn)？使用網(wǎng)格通常會(huì)增強(qiáng)精確度和專業(yè)精神。
  17、不對(duì)稱性
  一旦知道了規(guī)則，我們有時(shí)候也需要打破它們。現(xiàn)代藝術(shù)設(shè)計(jì)包含很多不對(duì)稱性。嘗試四處移動(dòng)并破壞標(biāo)準(zhǔn)的網(wǎng)格布局。但是，這是最難把握的技巧之一，而創(chuàng)建不平衡的合成非常容易。
  18、設(shè)計(jì)有用的組件
  人們認(rèn)為可用的網(wǎng)站更令人愉悅。設(shè)計(jì)用戶所需的一切，并快速完成每項(xiàng)任務(wù)。
  19、同時(shí)考慮設(shè)計(jì)PC端和移動(dòng)端
  設(shè)計(jì)移動(dòng)版和臺(tái)式機(jī)版對(duì)于每種設(shè)計(jì)都是必須的，但經(jīng)常在培訓(xùn)時(shí)，我們只專注于一個(gè)框架，而全神貫注于此。
  通過(guò)將兩個(gè)版本添加到相同的組成中，你將至少獲得三個(gè)有益的效果：
  在設(shè)計(jì)時(shí)，考慮網(wǎng)頁(yè)的響應(yīng)式設(shè)計(jì)。
  設(shè)計(jì)時(shí)，看看這樣設(shè)計(jì)是否更明智，更專業(yè)
  你也可以玩分層設(shè)計(jì)
  20、將其設(shè)為3D
  自從我與Blender和Maya一起玩了兩年以來(lái)，這是我最喜歡的藝術(shù)技巧之一。
  通過(guò)使用Blender，可以將有效的SVG導(dǎo)入，你可以通過(guò)幾個(gè)步驟將2D設(shè)計(jì)轉(zhuǎn)換為3D模型。
  盡管它不是“純”設(shè)計(jì)，但你可以將其發(fā)送給開(kāi)發(fā)人員，將其轉(zhuǎn)換為3D，可能會(huì)在演示和營(yíng)銷階段非常有用。