網(wǎng)頁設(shè)計過程中,圖形設(shè)計的布局是一種美,形式設(shè)計也越來越不能被忽視。設(shè)計師應(yīng)注意通過構(gòu)思,構(gòu)圖,造型和印刷過程中提供的可見材料形式來塑造藝術(shù)形象,以使設(shè)計的內(nèi)容美與形式美完美統(tǒng)一。通過這些元素的組合和組合,它可以向讀者傳達信息,并反映出設(shè)計個性的美。從藝術(shù)設(shè)計的形式美來看,版式設(shè)計的內(nèi)容可以概括為三個方面:簡潔有序與層次分明,平衡協(xié)調(diào)與差異對比,和諧統(tǒng)一與創(chuàng)新變革。那么網(wǎng)頁設(shè)計如何才能提高美感?這7個方法一定不能錯過。
網(wǎng)頁設(shè)計如何才能提高美感?
1.利用顏色和粗體來創(chuàng)建層次結(jié)構(gòu),而非使用字體大小
對于文本樣式的設(shè)計,最常犯的一個錯誤就是依賴字體大小來控制層次結(jié)構(gòu)。
我們很常聽到這樣的要求:
這段文字比較重要,加大字體!
記住,不要過于依賴字體大小,而是嘗試使用顏色和字體粗細來完成相同的工作。
嘗試使用三種以下的顏色進行設(shè)計:
1)主要內(nèi)容用黑色(文章的標(biāo)題);
2)次要內(nèi)容用灰色(如文章發(fā)表日期);
3)輔助內(nèi)容用淺灰色(如頁腳中的版權(quán)聲明)。
同樣,兩種 font weights 足以適用于大部分 UI 設(shè)計了:
大部分文本的正常粗細值更粗號的字體用于您要強調(diào)的文字。
用于網(wǎng)頁展示的一般不小于 400,他們更適合大標(biāo)題,較小尺寸下閱讀會很不舒服。
當(dāng)然,對于那些不重要的文本,可以改用較淡的顏色或者較小的字體。
2. 不要在彩色背景上使用灰色字體
白色背景上使用淺灰字體是個淡化文本的好方法,那是因為降低了字體與背景的對比度。 但灰色字體并不適用于彩色背景。
正確的方式應(yīng)該是找尋接近背景色的文本顏色,這樣才有助于創(chuàng)建層次結(jié)構(gòu)。
兩種方式:
降低白色文字的不透明度
這樣可以讓背景顏色滲透進字體,同時又不會和背景有顏色沖突。
挑選與背景顏色相近的字體顏色
選擇與背景色調(diào)相近的顏色,并調(diào)整飽和度和亮度使其與背景更融洽。當(dāng)文本背景包含圖像或者其他非顏色元素時,這種方法更好。
3. 正確使用陰影
陰影效果并不是采用一大塊模糊效果去仿制,而是正確地模擬現(xiàn)實世界中光源照射的情況。
4. 不要頻繁使用邊框(border)
當(dāng)你需要進行分割操作時,嘗試使用留白來創(chuàng)造邊界感。
邊框當(dāng)然是區(qū)分兩個頁面元素的好方法,但它并不是唯一的方法,而且頻繁使用邊框會讓頁面顯得很復(fù)雜凌亂。
下次可以試試這樣:
使用框型陰影;
同樣能達成效果的操作,卻不容易分散用戶的注意力。
使用兩種不同的背景顏色。通常相鄰元素的背景顏色略有不同就有明顯的區(qū)分效果了。添加更大的間距。
5. 不要使用過大的圖標(biāo)
如果你正在使用像 Font Awesome 或者 Zondicons 這樣的免費圖標(biāo)集,而且你設(shè)計的東西需要使用大圖標(biāo),比如 landing page 的功能部分,那就需要注意了。
雖然矢量圖像在放大尺寸時并不會降低圖像質(zhì)量,但是放大尺寸后的缺乏細節(jié)卻無可辯駁,這會顯得你很不專業(yè)。
如果你只有小圖標(biāo),嘗試將其放在另一個包含背景顏色的形狀中,會更合適。
這不僅能保持原有圖標(biāo)處于最合適的尺寸,也能適配更大的頁面。
當(dāng)然,最好的方法是使用大尺寸高級圖標(biāo)集,如 Heroicons 或 Iconic。
6. 使用顏色邊框豐富設(shè)計
提升設(shè)計美感的很討巧的一個辦法就是,給頁面添加色彩鮮明的邊框。
7. 并非每個按鈕都需要背景顏色
其實當(dāng)頁面有多個可執(zhí)行操作時,要注意語義設(shè)計動作帶來的心理暗示。
上述就是關(guān)于網(wǎng)頁設(shè)計如何才能提高美感的全部內(nèi)容介紹,想了解更多關(guān)于網(wǎng)頁設(shè)計的信息,請繼續(xù)關(guān)注中培偉業(yè)。