Web官網(wǎng)設計知識

時間：2023-10-04 09:06:01 | 來源：網(wǎng)站運營

時間：2023-10-04 09:06:01 來源：網(wǎng)站運營

Web官網(wǎng)設計知識：

一、前言

網(wǎng)頁設計（Web design），本質(zhì)就是網(wǎng)站的圖形界面設計，根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務、理念、文化），進行網(wǎng)站功能的策劃；精美的網(wǎng)站設計，作為企業(yè)對外宣傳物料的一種，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關重要。

二、我們?nèi)粘Ｉ钪?，更多接觸的是偏移動端的設計，這是為什么呢？web端和移動端的區(qū)別是什么？

（1）因為在我們?nèi)粘Ｉ钪?，手持設備更加方便，移動端設備的用戶比重相對網(wǎng)頁端用戶多很多，所以移動端的設計是強功能導向的設計，包含實用功能的內(nèi)容。而網(wǎng)頁端更偏向于品牌介紹，引導用戶進入移動端。

（2）移動端的功能眾多，無法全部復制到網(wǎng)頁端；如果要將移動端的功能復制到網(wǎng)頁端，成本會很高，同時很多需要授權的功能，在網(wǎng)頁端是無法拿到數(shù)據(jù)的（例如：麥克風、相冊等），都是需要移動端掃碼獲取權限，所以網(wǎng)頁端就無從推進。

三、常見網(wǎng)頁的分類；

1：網(wǎng)頁類型分為TO B和TO C；

TO C網(wǎng)頁包含了：門戶網(wǎng)站（網(wǎng)易、騰訊網(wǎng)等）、企業(yè)網(wǎng)站（蘋果、聯(lián)想等）、產(chǎn)品網(wǎng)站、電商網(wǎng)站（淘寶、京東等）、專題頁面、視頻網(wǎng)站和移動端H5；

TO B網(wǎng)站包含了：網(wǎng)站后臺、ERP系統(tǒng)（企業(yè)管理系統(tǒng)）、Saas（服務公司定制系統(tǒng)）和企業(yè)OA（辦公自動化系統(tǒng)）；





網(wǎng)頁類型

2：TO B和TO C網(wǎng)頁類型各具有什么特點？

TO C的網(wǎng)頁的功能目的：建立品牌形象、介紹宣傳；C端的網(wǎng)頁更加強調(diào)視覺的主次性，因為功能模塊多，所以會將視覺焦點引導到主要的功能上；

TO B的網(wǎng)頁的功能目的：數(shù)據(jù)分析，對網(wǎng)站前臺信息進行管理；B端的網(wǎng)頁更強調(diào)交互的易用性，來提升用戶的使用效率。

四、網(wǎng)頁的布局和網(wǎng)頁規(guī)范；（以企業(yè)官網(wǎng)為例）
1：企業(yè)官網(wǎng)的功能目的？

企業(yè)官網(wǎng)主要是用來流量分發(fā)、建立信任和增加認知；

2：企業(yè)官網(wǎng)的基礎結構是什么樣的？

企業(yè)官網(wǎng)一般包含：導航條、banner、特性介紹、專業(yè)案例和footer等版塊。

導航條尺寸：50-100px；banner尺寸：350-600px；特性介紹的作用是讓用戶建立信任，專業(yè)案例用來增加用戶的認知，footer版塊主要用來放置版權聲明、聯(lián)系方式、友情鏈接備案號等次要信息。

3：網(wǎng)頁的布局需要注意什么？

網(wǎng)頁設計時，可以在sketch中設置柵格，用來簡化布局和間距；一般柵格的總款和列數(shù)12-24之間；具體情況在工作中靈活運用。

五、網(wǎng)頁的網(wǎng)頁規(guī)范；（以企業(yè)官網(wǎng)為例）
1：網(wǎng)頁中的網(wǎng)頁尺寸和安全視距；

主流的設計軟件中暗示了主流的尺寸；網(wǎng)頁常見的主流的設計尺寸：1366x768px、1920x1080px和1440x1024px；工作中具體使用哪個尺寸設計，需要根據(jù)用戶群體來確定。

一般網(wǎng)頁設計中，需要有主視覺安全區(qū)域，主視覺安全區(qū)域?qū)挾龋?200px，網(wǎng)頁旁邊的導航以及懸浮彈窗在1440px以內(nèi)；

需要注意的是，在進行網(wǎng)頁設計的時候，屏幕的高度要減掉瀏覽器的高度：180px;

2：網(wǎng)頁層級；
（1）網(wǎng)頁的布局層級，從上到下，由強到弱；

（2）網(wǎng)頁的文字層級，根據(jù)移動端的一維分析法來拆分；

（3）網(wǎng)頁中的常見字體？

windows系統(tǒng)常用：微軟雅黑、宋體、Arial； MAC電腦常用：蘋方、宋體和Jelvetical；根據(jù)網(wǎng)頁的風格可以增加特殊的字體包。網(wǎng)頁中字體層級≥2，最小的字號：12px。文字的間距一般為字體的1.5-2倍。


（4）網(wǎng)頁排版布局應該注意的地方？

通過顏色、間距對比展現(xiàn)出網(wǎng)頁相同版塊的親密性；親密性可以對不同模塊引導數(shù)據(jù)流向，降低理解的成本。

（5）網(wǎng)頁中的常用圖片比例？

網(wǎng)頁中常用的圖片比例：16：9、1：1和3：4；圖片可以壓縮，減少服務器的資源耗費，常用的圖片壓縮網(wǎng)站（Tinypng)。

3：網(wǎng)頁的配色以及狀態(tài)提示；
（1）網(wǎng)頁端的配色風格；

網(wǎng)頁中的配色相對移動端比較克制；配色風格需要根據(jù)情緒色彩和業(yè)務屬性去設定；

比如：藍色代表安全、科技和可靠，一般用于工具類大數(shù)據(jù)平臺；橙黃色代表熱情、活力和快樂，一般多用于購物平臺（如：淘寶）；

（2）網(wǎng)頁中的配色方法；

a:一堆色值：記憶成本難、溝通成本高；

b:一個色值，通過改變不透明度，提高效率；

（3）網(wǎng)頁中的狀態(tài)提示；

紅色一般表示提交失敗、綠色表示成功；這個結合了生活中的紅綠燈原理，紅燈停（不予通過）、綠燈行（可通過），黃色可以起到警示作用。