優(yōu)秀的網(wǎng)頁(yè)美工設(shè)計(jì)需要注意的原則

來(lái)源：培訓(xùn)無(wú)憂網(wǎng)-云朵 發(fā)布人：云朵

2021-11-10 09:36:25|已瀏覽：264次

設(shè)計(jì)優(yōu)秀網(wǎng)頁(yè)所值得關(guān)注的地方就是4項(xiàng)主要的設(shè)計(jì)原則，這4項(xiàng)原則就是：反差, 重復(fù), 排列, 和分類。只要把握好這4項(xiàng)原則，就可以設(shè)計(jì)出更加整潔漂亮的網(wǎng)頁(yè)。這也是網(wǎng)頁(yè)美工需要的技能

1.反差效果
  好的反差效果設(shè)計(jì)可以給用戶一個(gè)極好的第一印象。如果用戶的眼睛沒(méi)有焦點(diǎn)，注意力就會(huì)在相同尺寸的元素和排版界面中迷失。設(shè)計(jì)師需要設(shè)計(jì)出很明顯的突出視覺元素來(lái)引導(dǎo)用戶的體驗(yàn)。往往可以通過(guò)選擇圖片、顏色和字體等來(lái)形成良好的反差效果。
A：圖片反差
  這個(gè)網(wǎng)頁(yè)利用一張大圖片來(lái)吸引用戶的注意。而同時(shí)網(wǎng)頁(yè)很自然的單色又讓少量的藍(lán)色有了更好的效果。
  當(dāng)看到這個(gè)頁(yè)面的時(shí)候，首先會(huì)注意到什么？最有可能的就是盒子上面的那個(gè)星星了。同上圖一樣，它們都是通過(guò)用一張大圖片和很少的顏色來(lái)制造一個(gè)視覺焦點(diǎn)。
B：顏色反差
  恰到好處地使用少量顏色，是網(wǎng)頁(yè)中另一種制造視覺反差的有效方法。可以在網(wǎng)頁(yè)的頭部和正文中使用不同的顏色，也可以在一張圖片或插圖的顏色里面應(yīng)用。
  大量的黃色頭部和少量的淡灰文字做得很徹底。
  一個(gè)用來(lái)展示排版的網(wǎng)站如果在它自己的頁(yè)首就為我們展示了一個(gè)極好的排版效果，那效果是事半功倍的。
C：字體反差
  如果想通過(guò)字體來(lái)產(chǎn)生反差效果，就應(yīng)該避免使用兩種相像的字體和大小。不過(guò)把字體大小差異加大或者把字體最細(xì)和最粗的版本拼合到一起也同樣有效。同樣的，如果將兩種外形差別明顯的字體排在一塊，就會(huì)對(duì)它們帶來(lái)的視覺沖擊效果感到驚奇。
  注意看這個(gè)網(wǎng)頁(yè)標(biāo)語(yǔ)的大小和筆畫。頁(yè)面上灑水效果和少量藍(lán)色的使用，都非常值得好好欣賞。
2.重復(fù)原則
  跟web設(shè)計(jì)相比，重復(fù)原則在書本設(shè)計(jì)中應(yīng)用得更加普遍，不過(guò)它在兩者之間都是一樣有效的。重復(fù)的設(shè)計(jì)元素可以使頁(yè)面顯得很連貫，還能提升品牌。
  在頭部和腳部都使用了很有創(chuàng)意的插畫。
  這個(gè)網(wǎng)站是“反差原則”最好的例子，在“重復(fù)原則”也是一個(gè)好例子，因?yàn)樗慕缑骘L(fēng)格和品牌部分都很明顯地應(yīng)用了這個(gè)原則。仔細(xì)看它用香蕉來(lái)當(dāng)做列表前面的圖標(biāo)，還有頭部、腳部的森林插畫。
3.排列原則
  網(wǎng)頁(yè)美工設(shè)計(jì)的好與壞，排列原則在其中扮演了一個(gè)很復(fù)雜的角色。
  這個(gè)網(wǎng)站的版面排列很連貫也很引人注目。它將主要內(nèi)容整齊地排在左邊的，對(duì)留空的大量使用和字體反差大小的使用都非常不錯(cuò)。
  這個(gè)網(wǎng)頁(yè)中使用的可視格欄非常有特色。里面的欄目設(shè)計(jì)良好，把所有包含內(nèi)容都變得易于閱讀。研究表明過(guò)寬的欄目會(huì)造成嚴(yán)重的閱讀困難。在跟隨那么寬的欄目中的文字時(shí)，讀者的眼睛會(huì)變得很累。
4.分類原則
  只有在將相關(guān)元素分組，將無(wú)關(guān)元素分開的時(shí)候才會(huì)用到這個(gè)原則。假如將所有東西都分到同一塊文本塊中，絕對(duì)會(huì)摧毀用戶的體驗(yàn)。這就是為什么使用頭部標(biāo)簽和適當(dāng)?shù)牧艨帐悄敲吹闹匾?/span>

這個(gè)網(wǎng)站漂亮地將內(nèi)容規(guī)整地組織到三個(gè)主要分類下，這些內(nèi)容的定義既清晰又規(guī)整。

這個(gè)網(wǎng)站結(jié)構(gòu)良好。頭部既整潔又簡(jiǎn)單明了。空白留的很好，內(nèi)容分開放得很有邏輯。

在網(wǎng)頁(yè)美工設(shè)計(jì)網(wǎng)頁(yè)時(shí)，只要腦中時(shí)刻惦記著這4個(gè)基本原則，就會(huì)發(fā)現(xiàn)設(shè)計(jì)有了不可思議的改進(jìn)。當(dāng)然還有許許多多方面需要考慮，但是以反差、重復(fù)、排列和分類作為基礎(chǔ)設(shè)計(jì)會(huì)取得長(zhǎng)足進(jìn)步。

本文由培訓(xùn)無(wú)憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問(wèn)老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙網(wǎng)頁(yè)美工設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無(wú)憂網(wǎng)網(wǎng)頁(yè)美工設(shè)計(jì)培訓(xùn)或添加老師微信：15033336050

注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://m.universityresearchassociates.com/news-id-3486.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050

相關(guān)新聞

相關(guān)新聞

免費(fèi) 申請(qǐng) 試聽

提交申請(qǐng)，《培訓(xùn)無(wú)憂網(wǎng)》課程顧問(wèn)老師會(huì)一對(duì)一幫助你規(guī)劃更適合你的專業(yè)課程！