從按鈕到圖標(biāo)，再到卡片或彈出窗口，創(chuàng)建一個(gè)組件庫，這樣設(shè)計(jì)中所有元素的使用都是一致的。按鈕不應(yīng)該是一頁上的藍(lán)色圓圈，另一頁上的紅色方塊。圖標(biāo)不應(yīng)該是一個(gè)頁面上是線性圖標(biāo)的而另一個(gè)頁面上是彩色面型圖標(biāo) 。這種網(wǎng)站組件的不一致性會(huì)誤導(dǎo)用戶以為點(diǎn)擊了不同的網(wǎng)站。
 

　　一個(gè)好的組件庫包括在設(shè)計(jì)中構(gòu)建頁面所需的所有元素，這些元素適用于不同設(shè)備的大小和規(guī)模，以及iOS和Android設(shè)備的調(diào)整。雖然構(gòu)建通用組件在前端看起來是一項(xiàng)繁重的工作，但是它可以使創(chuàng)建新頁面變得輕而易舉。
 

 

　　2.創(chuàng)建獨(dú)特的圖片風(fēng)格
 

　　網(wǎng)站制作中無論您是使用照片、視頻還是插畫，創(chuàng)建和保持圖像樣式都很重要。這是一個(gè)最強(qiáng)大的視覺資產(chǎn)，用戶將記住那些印象深刻的優(yōu)秀網(wǎng)站或品牌。獨(dú)特的風(fēng)格涉及到許多方面，如圖片的風(fēng)格，過濾器的使用，視頻的速度和構(gòu)圖樣式等。
 

　　請(qǐng)看下面來自Smashmallow網(wǎng)站（https://smashmallow.com/）的多組圖片。即使分別觀看，它們也包含將圖像與品牌聯(lián)系起來的常見元素。(不是每張圖片上的熱氣球。)這種獨(dú)特且統(tǒng)一的風(fēng)格形象展現(xiàn)了這家公司是誰，以及他們?nèi)绾闻c用戶進(jìn)行視覺溝通的。
 

 

　　3.創(chuàng)建動(dòng)效、動(dòng)畫規(guī)范
 

　　動(dòng)畫元素也應(yīng)該遵循一套基本的規(guī)則。他們行動(dòng)快還是慢?它們是自己移動(dòng)還是僅以懸停狀態(tài)移動(dòng)?這些交互效果也有助于建立視覺識(shí)別。動(dòng)畫可以為項(xiàng)目設(shè)定基調(diào)，使用有特定規(guī)范和風(fēng)格的動(dòng)畫效果，它們也可以成功傳遞品牌形象。
 

　　來自dribbble的雞尾酒動(dòng)畫作品(dribbble.com/shots/4818487-Mojito)，杯中元素有規(guī)則地進(jìn)行圓周運(yùn)動(dòng)。想想用同樣的視覺語言制作的其他動(dòng)畫會(huì)是什么樣子。它們也可能以同樣的循環(huán)方式以同樣的速度運(yùn)動(dòng)。
 

 

　　4.運(yùn)用文字加強(qiáng)視覺效果

　　視覺語言要想有效，還可以與設(shè)計(jì)中使用的實(shí)際文字標(biāo)題相互配合。如果網(wǎng)站制作的文字和視覺元素不匹配，用戶可能產(chǎn)生困惑。文字和圖片元素應(yīng)該一起運(yùn)作，能創(chuàng)建一個(gè)有效強(qiáng)調(diào)相同內(nèi)容的視覺語言畫面。
 

　　史蒂芬妮的網(wǎng)站（https://steffany.ua/）用顏色、女性化的標(biāo)志和文字展示了她的網(wǎng)站的主要產(chǎn)品業(yè)務(wù)。這些片段共同創(chuàng)造了一個(gè)完整的畫面，不會(huì)因?yàn)槭褂昧宋谋?、圖片等多種視覺信息而產(chǎn)生混亂。