杭州企業(yè)網(wǎng)站在前端開發(fā)設(shè)計(jì)過程中，怎樣去優(yōu)化呢？（上）

時(shí)間：2023-05-01 19:03:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-01 19:03:02 來源：網(wǎng)站運(yùn)營(yíng)

杭州企業(yè)網(wǎng)站在前端開發(fā)設(shè)計(jì)過程中，怎樣去優(yōu)化呢？（上）：文/四川數(shù)字說（閱讀時(shí)間3分鐘），轉(zhuǎn)載請(qǐng)注明來自百家號(hào)：數(shù)字說營(yíng)銷

在互聯(lián)網(wǎng)時(shí)代，網(wǎng)站就像一個(gè)公司的名片，擁有一個(gè)優(yōu)秀的網(wǎng)站可以幫助企業(yè)樹立良好的形象，是企業(yè)進(jìn)行自我宣傳的工具。

但是在網(wǎng)站設(shè)計(jì)與建站的過程中除了要重視網(wǎng)站內(nèi)容的豐富性和靈活性，還要保證網(wǎng)站設(shè)計(jì)的視覺效果，這會(huì)給網(wǎng)友帶來全新的視覺體驗(yàn)，從而對(duì)網(wǎng)站的傳播起到事半功倍的作用。

那么網(wǎng)站在前端開發(fā)設(shè)計(jì)過程中，怎樣去優(yōu)化呢？




網(wǎng)站品牌

（1）logo。選擇一個(gè)帶有很棒的 logo 的網(wǎng)站或者博客是一個(gè)瞬間獲取信任感的好方法。

（2）favicon。上傳一個(gè)支持 retina 屏幕的 favicon(在瀏覽器標(biāo)簽上顯示的正方形小圖標(biāo))。大部分網(wǎng)站的 favicon 都是 16x16 像素的，在 retina 屏幕會(huì)顯得模糊。如果使用 X-Icon Editor 生成 64x64 像素大小的 favicon，屏幕會(huì)顯得清晰一點(diǎn)。

（3）色彩使用。建議最多使用 2-3 種顏色。包括背景色、文字點(diǎn)擊前、點(diǎn)擊時(shí)、點(diǎn)擊后鼠標(biāo)或觸碰前后執(zhí)行的顏色效果；建議不要使用純黑色

(#000000)。在網(wǎng)上使用純黑色看起來不合適。實(shí)際上，黑色應(yīng)該總是作為其它顏色的深色陰影。




網(wǎng)頁(yè)排版

（1）字體樣式使用

。最多使用2-3種字體

。使用更多字體會(huì)顯得雜亂，并且減慢加載時(shí)間。

（2）根元素字體大小。

設(shè)置body的字體大小最小為16px，更小的字體在大屏幕中不方便閱讀，如果是移動(dòng)端頁(yè)面可以考慮的最小值為 12px。

（3）字體圖標(biāo)。

選擇一種自定義圖標(biāo)字體，比如 Font Awesome，來代替圖片和其它一些元素；比如社交媒體 logo、導(dǎo)航按鈕、交互圖形等，圖標(biāo)字體的加載速度更快，可以任意縮放，并且可以隨意更改圖標(biāo)顏色。

用戶界面

（1） 添加鼠標(biāo)懸停 (hover) 和鼠標(biāo)點(diǎn)擊 (active) 狀態(tài)的樣式給鏈接、按鈕、輸入框和文字區(qū)域。例如選擇在鼠標(biāo)懸停時(shí)讓按鈕顏色變亮，那你也應(yīng)該對(duì)于鏈接和輸入框的邊框給出同樣的樣式。

（2）保持表單樣式的一致性。所有的文本區(qū)域和輸入框都應(yīng)該有相同的樣式。包括相同的邊框顏色、背景顏色、懸停狀態(tài)、點(diǎn)擊狀態(tài)、占位符文字、點(diǎn)擊狀態(tài)文字等。

（3）鏈接的顏色。改變已經(jīng)點(diǎn)擊過的，讓用戶知道他們已經(jīng)去過那個(gè)頁(yè)面。

（4）一旦擁有了自己的 logo、顏色、排版、布局和圖像大小，則建立一個(gè)統(tǒng)一的風(fēng)格指南。




用戶體驗(yàn)

（1）微交互。在按鈕和其它表單域元素使用微交互 。比如，點(diǎn)擊上傳按鈕之后，提示文字可以變?yōu)?“正在上傳” 或者 “處理中”。

（2）標(biāo)題。使用標(biāo)題、副標(biāo)題、頭段落、列表、表格標(biāo)題讓你的內(nèi)容更容易被檢索。大部分人在瀏覽網(wǎng)頁(yè)前，都會(huì)先檢索一遍全文，再?zèng)Q定是否閱讀。

（3）占位符文字。添加描述性的占位符文字到你的表單、輸入框和下拉菜單。如果你想要讓瀏覽者用某種特定方式來填寫表單，你應(yīng)該指引他怎么做。

（4）表單驗(yàn)證。往表單添加表單驗(yàn)證，讓用戶在提交表單時(shí)可以清楚地知道哪些部分出現(xiàn)填寫錯(cuò)誤。

下期，小編會(huì)從搜索引擎優(yōu)化、網(wǎng)頁(yè)速度、網(wǎng)頁(yè)內(nèi)容這些方面來講述網(wǎng)站在前端開發(fā)過程中如何進(jìn)行優(yōu)化，增強(qiáng)網(wǎng)站設(shè)計(jì)的視覺效果！