網(wǎng)頁設(shè)計(jì)是什么？

網(wǎng)頁設(shè)計(jì)也被稱為Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動(dòng)端上的APP來獲取資訊，但是顯然基于個(gè)人電腦平臺(tái)的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機(jī)久很多：從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧“上網(wǎng)沖浪”的，那時(shí)的電腦屏幕非常小，分辨率只有800x600像素（對(duì)比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過去已經(jīng)有了巨大的變化：注重用戶體驗(yàn)、注重頁面動(dòng)效、富媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī)APP差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺(tái)之一。那么作為UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺(tái)。今天就向您好好說道一下網(wǎng)站必須懂得的那些事兒。

工作流程

首先讓我們來看一下網(wǎng)站設(shè)計(jì)的工作流程吧：除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外，與設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要設(shè)計(jì)師參與和了解，千萬不要只在意視覺稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來了解它們吧。

原型圖階段

原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，這時(shí)要注意，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。視覺方面具體呈現(xiàn)也許設(shè)計(jì)師會(huì)有更好的方式，這時(shí)需要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成一致。

構(gòu)建網(wǎng)站原型圖（工具：Axure RP ）

視覺稿階段

視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要一些圖像和靈感的素材。比如做世界杯專題時(shí)，我們除了收集很多素材之外，也可以設(shè)計(jì)一個(gè)“情緒板”（Mood Board）。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時(shí)可能會(huì)使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強(qiáng)調(diào)合理性，這時(shí)也需要和產(chǎn)品經(jīng)理溝通從后臺(tái)調(diào)取的圖片尺寸、標(biāo)題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設(shè)計(jì)?？傊?，設(shè)計(jì)過程中需要我們不斷思考和溝通才可以完成一個(gè)比較棒的視覺稿。

視覺稿設(shè)計(jì)階段（工具：Photoshop）

設(shè)計(jì)規(guī)范

當(dāng)視覺稿通過后，很多設(shè)計(jì)師可能不會(huì)主動(dòng)去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都需要設(shè)計(jì)師來總結(jié)設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時(shí)會(huì)理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會(huì)讓用戶困惑。那么設(shè)計(jì)規(guī)范主要也是在約束設(shè)計(jì)師我們自己，在用戶有限的記憶力中減少思考的成本。同時(shí)，設(shè)計(jì)規(guī)范也可以保證同一個(gè)項(xiàng)目的不同設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來。最后，設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師個(gè)人來說也是對(duì)項(xiàng)目影響的一個(gè)佐證，可以證明你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為設(shè)計(jì)師應(yīng)該主動(dòng)去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做？其實(shí)設(shè)計(jì)規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

視覺規(guī)范（工具：Photoshop）

切圖

網(wǎng)頁設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆誔S軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項(xiàng)為前端切出網(wǎng)站所使用的圖片。

從PSD中提取出來的切圖（插件：cutterman）

前端代碼

前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對(duì)接調(diào)取數(shù)據(jù)接口，一個(gè)網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會(huì)進(jìn)行埋點(diǎn)。埋點(diǎn)就是在頁面代碼里插入一些統(tǒng)計(jì)代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達(dá)到預(yù)期。在此后其實(shí)還會(huì)有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等，這里省略。

前端工程師代碼編譯（工具：Notepad +）

項(xiàng)目走查

網(wǎng)頁設(shè)計(jì)完成后還需要設(shè)計(jì)師進(jìn)行項(xiàng)目走查，來確定網(wǎng)頁還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟非常重要，因?yàn)榫W(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的頁面就不需要我們負(fù)責(zé)了。

將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對(duì)（工具：Photoshop）

網(wǎng)站種類

網(wǎng)站的分類按對(duì)象來劃分可以分為To C端和To B端兩種。To C端就是面向用戶和消費(fèi)者，例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題頁面、視頻網(wǎng)站、移動(dòng)端H5等，均是面向用戶和消費(fèi)者的產(chǎn)品。由于是面向用戶和消費(fèi)者，所以設(shè)計(jì)上一定要可以吸引人，并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。而To B端作為一個(gè)需求量很大的類別，其實(shí)往往被設(shè)計(jì)師所忽視。什么是To B端項(xiàng)目呢？比如電商網(wǎng)站供貨商的后臺(tái)、Dashboard、企業(yè)級(jí)OA、網(wǎng)站統(tǒng)計(jì)后臺(tái)等這些面向商家和專業(yè)人士的網(wǎng)站就是To B類網(wǎng)站項(xiàng)目了。這些項(xiàng)目的要求和To C端網(wǎng)站的要求大相徑庭：To B類項(xiàng)目最重要的是效率而不是體驗(yàn)，因?yàn)檎f白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(shè)計(jì)時(shí)必須首先要保證操作者可以高效地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。

門戶網(wǎng)站

門戶網(wǎng)站國內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐；國外比較知名的如Naver、Llinternaute等。我們可以看得出，門戶網(wǎng)站都是大而全包羅生活萬象的。比如騰訊網(wǎng)就有新聞、財(cái)經(jīng)、視頻、體育、娛樂、時(shí)尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高，必須要有雄厚的實(shí)力才可以建立起一個(gè)門戶網(wǎng)站，而門戶網(wǎng)站需要的設(shè)計(jì)師數(shù)量也驚人。首先門戶網(wǎng)站需要產(chǎn)品方向的界面設(shè)計(jì)師以迭代的方式維護(hù)迭代網(wǎng)站首頁、二級(jí)頁面、底層頁等網(wǎng)站基石。然后需要各個(gè)頻道的設(shè)計(jì)師來處理日常需求：比如巴黎時(shí)裝周需要負(fù)責(zé)時(shí)尚頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外，具體對(duì)接頻道的設(shè)計(jì)師也需要有一定擅長之處：比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(xiàng)目、時(shí)尚頻道的設(shè)計(jì)師要懂得各個(gè)大牌的設(shè)計(jì)風(fēng)格、佛學(xué)頻道的設(shè)計(jì)師需要懂得基本的佛學(xué)知識(shí)和忌諱、文化頻道的設(shè)計(jì)師需要對(duì)傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計(jì)師可以分為產(chǎn)品組和頻道組兩種。

韓國門戶網(wǎng)站Naver

企業(yè)網(wǎng)站

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對(duì)外展示自己的能力、介紹自己的產(chǎn)品等?，F(xiàn)在接觸一個(gè)陌生的企業(yè)時(shí)，很多老百姓都會(huì)上網(wǎng)搜索一下其官方網(wǎng)站驗(yàn)證真?zhèn)?。網(wǎng)站已經(jīng)是中小企業(yè)的標(biāo)配了。企業(yè)網(wǎng)站設(shè)計(jì)時(shí)通常會(huì)有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊，企業(yè)網(wǎng)站會(huì)展示很多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等實(shí)際的照片，配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也追求所謂“高端”、“大氣”、“上檔次”的風(fēng)格，也就是為了達(dá)到讓消費(fèi)者認(rèn)同品牌這個(gè)要求。所以如果我們接到了企業(yè)網(wǎng)站的設(shè)計(jì)需求，不妨多去瀏覽參考一些更加大牌的企業(yè)網(wǎng)站作為競品來參考。

美國通用公司官網(wǎng)

產(chǎn)品網(wǎng)站

從蘋果公司的iPhone介紹頁到小米手機(jī)8的介紹頁，我們會(huì)發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動(dòng)等方式讓我們感覺到這個(gè)產(chǎn)品的極致精細(xì)。由于中國互聯(lián)網(wǎng)和產(chǎn)品設(shè)計(jì)發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計(jì)需求一定會(huì)越來越多。

蘋果公司產(chǎn)品介紹頁

電商網(wǎng)站

電商設(shè)計(jì)師也屬于網(wǎng)頁設(shè)計(jì)師嗎？是的。如果按照平臺(tái)細(xì)分，無疑電商設(shè)計(jì)師所在的平臺(tái)大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了，以至于從內(nèi)蒙的牧民到海南島的漁民，甚至臺(tái)灣、日本、東南亞的商人都開始在中國電商平臺(tái)上開店鋪了。店鋪其實(shí)本身屬于平臺(tái)本身的頁面。但是為了增強(qiáng)每個(gè)店的個(gè)性，平臺(tái)為商店開通了一些頁面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設(shè)計(jì)等。這樣商鋪有一定權(quán)限在平臺(tái)規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設(shè)計(jì)應(yīng)運(yùn)而生。雖然帶著鐐銬跳舞，但是有很多店鋪因?yàn)樵O(shè)計(jì)精良而能帶動(dòng)銷售。那么電商設(shè)計(jì)師當(dāng)然就變得非常重要了。

淘寶網(wǎng)首頁

游戲網(wǎng)站

游戲是一個(gè)巨大的產(chǎn)業(yè)，很多公司的收入大半壁江山都來自游戲產(chǎn)業(yè)。那么除了游戲需要制作精良之外，游戲的官網(wǎng)也必須設(shè)計(jì)精美。不要忘記，每一個(gè)玩家都需要訪問你的游戲官網(wǎng)才能完成下載、充值、社交等重要操作。國外游戲網(wǎng)站比如暴雪娛樂公司（https://blizzard）的官網(wǎng)設(shè)計(jì)得極其精美，每個(gè)游戲的官網(wǎng)都是一個(gè)精品。比如魔獸世界、星際爭霸2等游戲官網(wǎng)，頭部都是視覺沖擊非常強(qiáng)烈的動(dòng)畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格，仿佛登錄這個(gè)網(wǎng)站你就在游戲之中了。

暴雪公司星際爭霸2游戲官網(wǎng)

專題頁面

當(dāng)然不管是電商還是門戶網(wǎng)站，在節(jié)日都會(huì)需要設(shè)計(jì)師來設(shè)計(jì)一些專題頁面增加曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日往往會(huì)有促銷、專題報(bào)道等各式活動(dòng)。專題設(shè)計(jì)生命周期很短，上線后基本過了流量的那個(gè)點(diǎn)就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁面，因?yàn)檫^了特定的時(shí)期專題頁面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當(dāng)然不能使用現(xiàn)代主義設(shè)計(jì)那種性冷淡風(fēng)格，而應(yīng)該在頭部盡量刺激用戶，用刺激對(duì)比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的文字吸引用戶來看。畢竟每個(gè)人可能只會(huì)看一次，不能放過這個(gè)機(jī)會(huì)。所以專題設(shè)計(jì)和產(chǎn)品設(shè)計(jì)正相反，專題設(shè)計(jì)必須刺激。

極有家淘寶專題頁面

視頻網(wǎng)站

視頻網(wǎng)站的訪問量驚人，并且用戶的黏著度更高。很多視頻網(wǎng)站除了購買版權(quán)之外還有很多UGC內(nèi)容。多說幾句，UGC（User Generated Content）是指用戶產(chǎn)生的原創(chuàng)內(nèi)容，很早之前web1.0時(shí)代用戶主要是單向?yàn)g覽網(wǎng)站，web2.0提出的UGC概念就是說用戶不僅在瀏覽也會(huì)上傳內(nèi)容。那么視頻網(wǎng)站為什么會(huì)火呢？首先要感謝帶寬的發(fā)展。在今年我們國內(nèi)點(diǎn)擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計(jì)主要是要考慮應(yīng)用場景：視頻是用戶主要觀看的區(qū)域，所以視頻區(qū)域首先要足夠大，另外顏色應(yīng)該以暗色為主，因?yàn)榱辽珪?huì)干擾到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸，方便后期編輯在后臺(tái)添加。視頻網(wǎng)站的設(shè)計(jì)師同樣也可以分為產(chǎn)品組和運(yùn)營組兩個(gè)種類來處理產(chǎn)品方向和運(yùn)營方向的不同需求。

騰訊視頻播放頁面

移動(dòng)端H5

你一定在朋友圈被《穿越未來來看你》、《淘寶造物節(jié)》等H5刷過屏吧？平時(shí)我們經(jīng)常被這種好玩兒的H5刷屏。其實(shí)H5全稱是HTML5，并不是僅僅指移動(dòng)端，而是網(wǎng)頁前端的開發(fā)語言，由于約定俗成的概念，我們現(xiàn)在常常把手機(jī)中的集合視頻、動(dòng)效、互動(dòng)的這種營銷形式成為H5。其實(shí)它的本質(zhì)是運(yùn)用網(wǎng)頁技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的網(wǎng)頁。隨著技術(shù)日新月異的發(fā)展，H5顯得越來越有傳播價(jià)值和份量。微信、瀏覽器等平臺(tái)級(jí)產(chǎn)品在手機(jī)端中火爆促進(jìn)了依靠入口而傳播的H5的發(fā)展。如果設(shè)計(jì)出色，你的項(xiàng)目可能會(huì)在朋友圈產(chǎn)生病毒傳播的效果。

使用前端語言編譯的適合手機(jī)瀏覽的H5界面

移動(dòng)端H5尺寸

設(shè)計(jì)移動(dòng)端H5項(xiàng)目的時(shí)候，我們一般以用戶量較高的iPhone6/7/8的尺寸：750x1334px 為準(zhǔn)，然后我們要在頂部預(yù)留出微信或者瀏覽器導(dǎo)航區(qū)域。主要內(nèi)容區(qū)域就可以自由設(shè)計(jì)了。一般H5的操作是上下滑動(dòng)。字體方面使用蘋方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。當(dāng)然H5可以調(diào)用背景音樂、視頻、鏈接等多媒體，讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外，其實(shí)還有一種方式可以無需代碼生成簡易版...

這兩年響應(yīng)式網(wǎng)站已經(jīng)成了主流，很多企業(yè)做網(wǎng)站首先就會(huì)考慮是否做響應(yīng)式的。很多不是很懂這種類型網(wǎng)站人可能會(huì)問：什么是響應(yīng)式(自適應(yīng))網(wǎng)站?為什么要做響應(yīng)式網(wǎng)站呢?響應(yīng)式網(wǎng)站與傳統(tǒng)網(wǎng)站又有什么優(yōu)勢呢?

下面，十堰網(wǎng)站建設(shè)公司SEO工程師就來跟大家聊聊關(guān)于響應(yīng)式(自適應(yīng))網(wǎng)站建設(shè)那些事吧！

一、什么是響應(yīng)式(自適應(yīng))網(wǎng)站?

響應(yīng)式網(wǎng)站就是基于響應(yīng)式設(shè)計(jì)的網(wǎng)站模板，同一個(gè)網(wǎng)站，同一個(gè)頁面在PC、PAD、手機(jī)上自動(dòng)適配，根據(jù)尺寸自動(dòng)顯示不同的界面。響應(yīng)式的概念是美國的伊?！ゑR科特在2010年首先提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)(RWD,Responsive Web Design)這個(gè)術(shù)語， 簡而言之是指網(wǎng)頁能自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，目的是為了再Pc端和移動(dòng)設(shè)備提供更好的體驗(yàn)，并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率，用技術(shù)來使網(wǎng)頁適應(yīng)不同分辨率的屏幕。所以也叫做自適應(yīng)網(wǎng)站。

二、響應(yīng)式網(wǎng)站建設(shè)的好處?

1、網(wǎng)站具有唯一性

響應(yīng)式網(wǎng)站都是根據(jù)企業(yè)需求量身定制的，在網(wǎng)絡(luò)上是找不到重復(fù)網(wǎng)站的，所以具有唯一性，讓用戶不會(huì)產(chǎn)生審美疲勞。

2、網(wǎng)站框架合理，易于優(yōu)化

模板建站的時(shí)候，很多用戶單方面只顧創(chuàng)意，通常會(huì)忽略網(wǎng)站架構(gòu)，導(dǎo)致后期優(yōu)化困難。而定制網(wǎng)站有專門技術(shù)團(tuán)隊(duì)把關(guān)，在保證企業(yè)創(chuàng)意的同時(shí)會(huì)考慮后期優(yōu)化，充分吸引目標(biāo)客戶進(jìn)行消費(fèi)。

3、網(wǎng)站可擴(kuò)展性強(qiáng)

響應(yīng)式網(wǎng)站建設(shè)是可以擴(kuò)展的。模板網(wǎng)站的功能基本是固定的，升級(jí)也有一定難度。而定制網(wǎng)站要拓展功能則比較方便，只需找技術(shù)團(tuán)隊(duì)修改代碼即可，快速滿足企業(yè)業(yè)務(wù)需求。

4、能滿足更多的系統(tǒng)功能

響應(yīng)式網(wǎng)站能夠滿足更多的系統(tǒng)功能，比如餐飲網(wǎng)站，需要的是訂座服務(wù)，普通網(wǎng)站不能滿足，定制就能專門為你開發(fā)一個(gè)訂座系統(tǒng)。

三、響應(yīng)式網(wǎng)站建設(shè)與傳統(tǒng)網(wǎng)站建設(shè)相比有哪些優(yōu)勢?

1、可以兼容所有設(shè)備

智能跨平臺(tái)網(wǎng)站基于最前沿的HTML5技術(shù)，一次性解決手機(jī)和其他移動(dòng)終端屏幕尺寸、屏幕分辨率不統(tǒng)一、瀏覽器分化三大移動(dòng)終端適配難題，適配于全球超過5000種移動(dòng)設(shè)備。

2、多終端視覺效果統(tǒng)一，操作體驗(yàn)一致

H5響應(yīng)式網(wǎng)站可以自動(dòng)偵測設(shè)備屏幕的大小，對(duì)網(wǎng)站的內(nèi)容和布局自動(dòng)調(diào)整，讓網(wǎng)站在任何設(shè)備上都有讓人賞心悅目的顯示效果。

3、高端大氣，用戶體驗(yàn)好

響應(yīng)式網(wǎng)頁能打破手機(jī)端和電腦端的局限性，不用在不同設(shè)備切換就可以看到相同的布局，提高用戶體驗(yàn)，深受企業(yè)青睞。目前微軟、華為、蘋果公司的官網(wǎng)已經(jīng)率先啟用響應(yīng)式設(shè)計(jì)。

4、超高性價(jià)比，開發(fā)、運(yùn)營、維護(hù)成本低

只需設(shè)計(jì)一個(gè)頁面，您不用為不同的設(shè)備開發(fā)不同版本的網(wǎng)站或者APP，網(wǎng)站內(nèi)容實(shí)時(shí)同步更新。降低網(wǎng)站開發(fā)成本的同時(shí)，還省去了大量后期維護(hù)的人力和時(shí)間成本。

總之響應(yīng)式網(wǎng)站可以幫您實(shí)現(xiàn)一站多用想法，這種基于柵格布局和CSS3的流動(dòng)性網(wǎng)頁設(shè)計(jì)，可以讓網(wǎng)頁隨著屏幕變化而響應(yīng)，提高用戶體驗(yàn)。一個(gè)數(shù)據(jù)庫的管理，更是給網(wǎng)站管理者帶來了更多的方便。是一種更為統(tǒng)一，更加全面的設(shè)計(jì)技巧，一種打破網(wǎng)頁固有形態(tài)和限制的靈活設(shè)計(jì)方法。這也是為什么企業(yè)建站會(huì)選擇響應(yīng)式網(wǎng)站一個(gè)關(guān)鍵原因。

響應(yīng)式網(wǎng)站建設(shè)，沒有找到合適建站公司的企業(yè)，歡迎來十堰SEO，我們?yōu)槟ㄖ平ㄕ?，讓您在整個(gè)網(wǎng)站建設(shè)過程中真正的放心、省心、安心!

溫馨提示：本文為本站原創(chuàng)（翻譯），轉(zhuǎn)載分享請(qǐng)注明：本文轉(zhuǎn)自：十堰SEO優(yōu)化顧問。本文鏈接：http://seoserp/seo/jzzx/jzzx425.html

本文有6個(gè)章節(jié)，從工作流程、網(wǎng)站種類、網(wǎng)站組成部分、技術(shù)原理、設(shè)計(jì)規(guī)范等全面總結(jié)了網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識(shí)，接近兩萬字的干貨，新手看完就可以入門了。

一、網(wǎng)頁設(shè)計(jì)是什么？

網(wǎng)頁設(shè)計(jì)也被稱為 Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然現(xiàn)在我們常使用移動(dòng)端上的 APP 來獲取資訊，但是顯然基于個(gè)人電腦平臺(tái)的網(wǎng)站上網(wǎng)方式陪伴我們的歷史要比手機(jī)久很多：從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達(dá)克掛牌上市，再到現(xiàn)在網(wǎng)站遍地；中國的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧「上網(wǎng)沖浪」的，那時(shí)的電腦屏幕非常小，分辨率只有800×600像素（對(duì)比一下，iPhone8的分辨率是750x1334px），網(wǎng)速也很慢，經(jīng)常掉線或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好，而現(xiàn)在網(wǎng)站設(shè)計(jì)和過去已經(jīng)有了巨大的變化：注重用戶體驗(yàn)、注重頁面動(dòng)效、富媒體等設(shè)計(jì)讓如今的網(wǎng)站體驗(yàn)并不比軟件和手機(jī) APP 差。加上個(gè)人電腦的普及，網(wǎng)站仍然是人機(jī)交互中非常重要的平臺(tái)之一。那么作為 UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理，才能更好地駕馭這個(gè)平臺(tái)。今天就向您好好說道一下網(wǎng)站必須懂得的那些事兒。

二、工作流程

首先讓我們來看一下網(wǎng)站設(shè)計(jì)的工作流程吧，除了之前介紹過的用戶研究、撰寫產(chǎn)品需求文檔、市場文檔、做競品調(diào)研等工作之外，與設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要設(shè)計(jì)師參與和了解，千萬不要只在意視覺稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來了解它們吧。

1. 原型圖階段

原型圖階段中設(shè)計(jì)師需要和產(chǎn)品經(jīng)理溝通需求，這時(shí)要注意，并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求，而是需要相互就自己擅長的方面進(jìn)行溝通。視覺方面具體呈現(xiàn)也許設(shè)計(jì)師會(huì)有更好的方式，這時(shí)需要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成一致。

△ 構(gòu)建網(wǎng)站原型圖（工具：Axure RP）

2. 視覺稿階段

視覺稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了，在設(shè)計(jì)網(wǎng)站的時(shí)候，我們需要一些圖像和靈感的素材。比如做世界杯專題時(shí)，我們除了收集很多素材之外，也可以設(shè)計(jì)一個(gè)「情緒板」（Mood Board）。簡單說情緒板就是將一些與主題相關(guān)的資料和素材拼貼在一起，這樣可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺。另外，很多網(wǎng)站的頭部通常需要主視覺來抓人眼球，這時(shí)可能會(huì)使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標(biāo)了。主視覺下面的信息排布更強(qiáng)調(diào)合理性，這時(shí)也需要和產(chǎn)品經(jīng)理溝通從后臺(tái)調(diào)取的圖片尺寸、標(biāo)題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設(shè)計(jì)?？傊?，設(shè)計(jì)過程中需要我們不斷思考和溝通才可以完成一個(gè)比較棒的視覺稿。

△ 視覺稿設(shè)計(jì)階段（工具：Photoshop）

3. 設(shè)計(jì)規(guī)范

當(dāng)視覺稿通過后，很多設(shè)計(jì)師可能不會(huì)主動(dòng)去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都需要設(shè)計(jì)師來總結(jié)設(shè)計(jì)規(guī)范，設(shè)計(jì)規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時(shí)會(huì)理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會(huì)讓用戶困惑。那么設(shè)計(jì)規(guī)范主要也是在約束設(shè)計(jì)師我們自己，在用戶有限的記憶力中減少思考的成本。同時(shí)，設(shè)計(jì)規(guī)范也可以保證同一個(gè)項(xiàng)目的不同設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來。最后，設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師個(gè)人來說也是對(duì)項(xiàng)目影響的一個(gè)佐證，可以證明你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為設(shè)計(jì)師應(yīng)該主動(dòng)去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做？其實(shí)設(shè)計(jì)規(guī)范就是把主要頁面的元素固定成統(tǒng)一元素即可。具體來說一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。

△ 視覺規(guī)范（工具：Photoshop）

4. 切圖

網(wǎng)頁設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆?PS 軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項(xiàng)為前端切出網(wǎng)站所使用的圖片。

△ 從PSD中提取出來的切圖（插件：cutterman）

5. 前端代碼

前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對(duì)接調(diào)取數(shù)據(jù)接口，一個(gè)網(wǎng)站就活了起來。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù)，也會(huì)進(jìn)行埋點(diǎn)。埋點(diǎn)就是在頁面代碼里插入一些統(tǒng)計(jì)代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達(dá)到預(yù)期。在此后其實(shí)還會(huì)有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

△ 前端工程師代碼編譯（工具：Notepad +）

6. 項(xiàng)目走查

網(wǎng)頁設(shè)計(jì)完成后還需要設(shè)計(jì)師進(jìn)行項(xiàng)目走查，來確定網(wǎng)頁還原度是否有問題。如果發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的，就需要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟非常重要，因?yàn)榫W(wǎng)站的成品才是我們最終的輸出，不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的頁面就不需要我們負(fù)責(zé)了。

△ 將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對(duì)（工具：Photoshop）

三、網(wǎng)站種類

網(wǎng)站的分類按對(duì)象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費(fèi)者，例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題頁面、視頻網(wǎng)站、移動(dòng)端H5 等，均是面向用戶和消費(fèi)者的產(chǎn)品。由于是面向用戶和消費(fèi)者，所以設(shè)計(jì)上一定要可以吸引人，并且以用戶為中心考慮體驗(yàn)設(shè)計(jì)。而 To B端作為一個(gè)需求量很大的類別，其實(shí)往往被設(shè)計(jì)師所忽視。什么是 To B端項(xiàng)目呢？比如電商網(wǎng)站供貨商的后臺(tái)、Dashboard、企業(yè)級(jí)OA、網(wǎng)站統(tǒng)計(jì)后臺(tái)等這些面向商家和專業(yè)人士的網(wǎng)站就是 To B 類網(wǎng)站項(xiàng)目了。這些項(xiàng)目的要求和 To C端網(wǎng)站的要求大相徑庭：To B 類項(xiàng)目最重要的是效率而不是體驗(yàn)，因?yàn)檎f白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(shè)計(jì)時(shí)必須首先要保證操作者可以高效地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。

1. 門戶網(wǎng)站

門戶網(wǎng)站國內(nèi)比較知名的有新浪、騰訊、網(wǎng)易、搜狐；國外比較知名的如 Naver、Llinternaute 等。我們可以看得出，門戶網(wǎng)站都是大而全包羅生活萬象的。比如騰訊網(wǎng)就有新聞、財(cái)經(jīng)、視頻、體育、娛樂、時(shí)尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高，必須要有雄厚的實(shí)力才可以建立起一個(gè)門戶網(wǎng)站，而門戶網(wǎng)站需要的設(shè)計(jì)師數(shù)量也驚人。首先門戶網(wǎng)站需要產(chǎn)品方向的界面設(shè)計(jì)師以迭代的方式維護(hù)迭代網(wǎng)站首頁、二級(jí)頁面、底層頁等網(wǎng)站基石。然后需要各個(gè)頻道的設(shè)計(jì)師來處理日常需求：比如巴黎時(shí)裝周需要負(fù)責(zé)時(shí)尚頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外，具體對(duì)接頻道的設(shè)計(jì)師也需要有一定擅長之處：比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(xiàng)目、時(shí)尚頻道的設(shè)計(jì)師要懂得各個(gè)大牌的設(shè)計(jì)風(fēng)格、佛學(xué)頻道的設(shè)計(jì)師需要懂得基本的佛學(xué)知識(shí)和忌諱、文化頻道的設(shè)計(jì)師需要對(duì)傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計(jì)師可以分為產(chǎn)品組和頻道組兩種。

△ 韓國門戶網(wǎng)站Naver

2. 企業(yè)網(wǎng)站

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對(duì)外展示自己的能力、介紹自己的產(chǎn)品等?，F(xiàn)在接觸一個(gè)陌生的企業(yè)時(shí)，很多老百姓都會(huì)上網(wǎng)搜索一下其官方網(wǎng)站驗(yàn)證真?zhèn)?。網(wǎng)站已經(jīng)是中小企業(yè)的標(biāo)配了。企業(yè)網(wǎng)站設(shè)計(jì)時(shí)通常會(huì)有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊，企業(yè)網(wǎng)站會(huì)展示很多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等實(shí)際的照片，配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也追求所謂「高端」、「大氣」、「上檔次」的風(fēng)格，也就是為了達(dá)到讓消費(fèi)者認(rèn)同品牌這個(gè)要求。所以如果我們接到了企業(yè)網(wǎng)站的設(shè)計(jì)需求，不妨多去瀏覽參考一些更加大牌的企業(yè)網(wǎng)站作為競品來參考。

△ 美國通用公司官網(wǎng)

3. 產(chǎn)品網(wǎng)站

從蘋果公司的 iPhone 介紹頁到小米手機(jī)8的介紹頁，我們會(huì)發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動(dòng)等方式讓我們感覺到這個(gè)產(chǎn)品的極致精細(xì)。由于中國互聯(lián)網(wǎng)和產(chǎn)品設(shè)計(jì)發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計(jì)需求一定會(huì)越來越多。

△ 蘋果公司產(chǎn)品介紹頁

4. 電商網(wǎng)站

電商設(shè)計(jì)師也屬于網(wǎng)頁設(shè)計(jì)師嗎？是的。如果按照平臺(tái)細(xì)分，無疑電商設(shè)計(jì)師所在的平臺(tái)大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了，以至于從內(nèi)蒙的牧民到海南島的漁民，甚至臺(tái)灣、日本、東南亞的商人都開始在中國電商平臺(tái)上開店鋪了。店鋪其實(shí)本身屬于平臺(tái)本身的頁面。但是為了增強(qiáng)每個(gè)店的個(gè)性，平臺(tái)為商店開通了一些頁面自定義的裝飾功能，比如寶貝詳情、店鋪排版、banner頭圖設(shè)計(jì)等。這樣商鋪有一定權(quán)限在平臺(tái)規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來裝飾自己的店鋪，電商設(shè)計(jì)應(yīng)運(yùn)而生。雖然帶著鐐銬跳舞，但是有很多店鋪因?yàn)樵O(shè)計(jì)精良而能帶動(dòng)銷售。那么電商設(shè)計(jì)師當(dāng)然就變得非常重要了。

△ 淘寶網(wǎng)首頁

5. 游戲網(wǎng)站

游戲是一個(gè)巨大的產(chǎn)業(yè)，很多公司的收入大半壁江山都來自游戲產(chǎn)業(yè)。那么除了游戲需要制作精良之外，游戲的官網(wǎng)也必須設(shè)計(jì)精美。不要忘記，每一個(gè)玩家都需要訪問你的游戲官網(wǎng)才能完成下載、充值、社交等重要操作。國外游戲網(wǎng)站比如暴雪娛樂公司（https://blizzard）的官網(wǎng)設(shè)計(jì)得極其精美，每個(gè)游戲的官網(wǎng)都是一個(gè)精品。比如魔獸世界、星際爭霸2等游戲官網(wǎng)，頭部都是視覺沖擊非常強(qiáng)烈的動(dòng)畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格，仿佛登錄這個(gè)網(wǎng)站你就在游戲之中了。

△ 暴雪公司星際爭霸2游戲官網(wǎng)

6. 專題頁面

當(dāng)然不管是電商還是門戶網(wǎng)站，在節(jié)日都會(huì)需要設(shè)計(jì)師來設(shè)計(jì)一些專題頁面增加曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日往往會(huì)有促銷、專題報(bào)道等各式活動(dòng)。專題設(shè)計(jì)生命周期很短，上線后基本過了流量的那個(gè)點(diǎn)就基本沒用了。所以我們找不到前幾年的618或者雙11專題頁面，因?yàn)檫^了特定的時(shí)期專題頁面就無人問津了。所以在那么短的生命周期怎么抓住人的眼球？當(dāng)然不能使用現(xiàn)代主義設(shè)計(jì)那種性冷淡風(fēng)格，而應(yīng)該在頭部盡量刺激用戶，用刺激對(duì)比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的文字吸引用戶來看。畢竟每個(gè)人可能只會(huì)看一次，不能放過這個(gè)機(jī)會(huì)。所以專題設(shè)計(jì)和產(chǎn)品設(shè)計(jì)正相反，專題設(shè)計(jì)必須刺激。

△ 極有家淘寶專題頁面

7. 視頻網(wǎng)站

視頻網(wǎng)站的訪問量驚人，并且用戶的黏著度更高。很多視頻網(wǎng)站除了購買版權(quán)之外還有很多 UGC 內(nèi)容。多說幾句，UGC（User Generated Content）是指用戶產(chǎn)生的原創(chuàng)內(nèi)容，很早之前 web1.0時(shí)代用戶主要是單向?yàn)g覽網(wǎng)站，web2.0提出的 UGC 概念就是說用戶不僅在瀏覽也會(huì)上傳內(nèi)容。那么視頻網(wǎng)站為什么會(huì)火呢？首先要感謝寬帶的發(fā)展。在今年我們國內(nèi)點(diǎn)擊視頻就立馬可以播放了，而在幾年前需要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計(jì)主要是要考慮應(yīng)用場景：視頻是用戶主要觀看的區(qū)域，所以視頻區(qū)域首先要足夠大，另外顏色應(yīng)該以暗色為主，因?yàn)榱辽珪?huì)干擾到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸，方便后期編輯在后臺(tái)添加。視頻網(wǎng)站的設(shè)計(jì)師同樣也可以分為產(chǎn)品組和運(yùn)營組兩個(gè)種類來處理產(chǎn)品方向和運(yùn)營方向的不同需求。

△ 騰訊視頻播放頁面

8. 移動(dòng)端H5

你一定在朋友圈被《穿越未來來看你》、《淘寶造物節(jié)》等 H5 刷過屏吧？平時(shí)我們經(jīng)常被這種好玩兒的 H5 刷屏。其實(shí) H5 全稱是 HTML5，并不是僅僅指移動(dòng)端，而是網(wǎng)頁前端的開發(fā)語言，由于約定俗成的概念，我們現(xiàn)在常常把手機(jī)中的集合視頻、動(dòng)效、互動(dòng)的這種營銷形式稱為 H5。其實(shí)它的本質(zhì)是運(yùn)用網(wǎng)頁技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的網(wǎng)頁。隨著技術(shù)日新月異的發(fā)展，H5 顯得越來越有傳播價(jià)值和份量。微信、瀏覽器等平臺(tái)級(jí)產(chǎn)品在手機(jī)端中火爆促進(jìn)了依靠入口而傳播的 H5 的發(fā)展。如果設(shè)計(jì)出色，你的項(xiàng)目可能會(huì)在朋友圈產(chǎn)生病毒傳播的效果。

△ 使用前端語言編譯的適合手機(jī)瀏覽的H5界面

移動(dòng)端H5尺寸

設(shè)計(jì)移動(dòng)端 H5 項(xiàng)目的時(shí)候，我們一般以用戶量較高的 iPhone6/7/8的尺寸：750x1334px為準(zhǔn)，然后我們要在頂部預(yù)留出微信或者瀏覽器導(dǎo)航區(qū)域。主要內(nèi)容區(qū)域就可以自由設(shè)計(jì)了。一般H5的操作是上下滑動(dòng)。字體方面使用蘋方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。?...

什么是網(wǎng)站？

網(wǎng)站的定義是：網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTM等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。

這個(gè)解釋聽起來有點(diǎn)懵，網(wǎng)站簡單來說就是軟件，建設(shè)網(wǎng)站也是軟件開發(fā)的一種。我們每天都會(huì)接觸各種類型的網(wǎng)站，看新聞會(huì)上門戶網(wǎng)，查資料會(huì)上搜索引擎網(wǎng)站（百度、搜狗、360等），買東西會(huì)上購物類的網(wǎng)站（淘寶、京東）。五花八門的網(wǎng)站會(huì)讓網(wǎng)站開發(fā)新手產(chǎn)生網(wǎng)站容易制作的錯(cuò)覺，但事實(shí)并不只是這種情況，網(wǎng)站建設(shè)是一個(gè)艱苦卓越的過程需要考慮到完整性、目的性、擴(kuò)展性、安全性，特別是商業(yè)網(wǎng)站要求更加苛刻。

網(wǎng)站B/S結(jié)構(gòu)和C/S結(jié)構(gòu)是什么?

網(wǎng)站軟件開發(fā)包括C/S和B/S兩種體系結(jié)構(gòu)，C/S是大家所熟悉的客戶端和服務(wù)器端結(jié)構(gòu)，常用的QQ就是這種結(jié)構(gòu)，需要下載專門的客戶端軟件才能使用。

B/S結(jié)構(gòu)是瀏覽器和服務(wù)器結(jié)構(gòu)，訪問網(wǎng)站只需要一個(gè)瀏覽器就可以，例如IE或fiefox，我們平常說的網(wǎng)站主要說的指B/S結(jié)構(gòu)的網(wǎng)站。

網(wǎng)站B/S結(jié)構(gòu)工作流程是什么？

1、在瀏覽器地址輸入url（平常咱們所說的網(wǎng)址）訪問web服務(wù)器（可以簡單理解網(wǎng)站）。

2、Web服務(wù)器根據(jù)客戶請(qǐng)求，會(huì)以HTML等形式返回客戶端瀏覽器。

3、瀏覽器再把內(nèi)容（HTML等）翻譯給網(wǎng)站訪客看。

網(wǎng)站開發(fā)不能簡單理解為網(wǎng)頁制作，網(wǎng)頁制作只是網(wǎng)站（B/S結(jié)構(gòu)）中一種形式，主要以內(nèi)容發(fā)布和產(chǎn)品展示為主，開發(fā)容易，對(duì)美工要求比較高，一些企業(yè)網(wǎng)站。而我們平常說網(wǎng)站（B/S結(jié)構(gòu)）開發(fā)是指用戶和系統(tǒng)交互為主，注重業(yè)務(wù)處理，對(duì)程序員思維邏輯要求比較高，比如說論壇、電子商務(wù)系統(tǒng)、內(nèi)容管理系統(tǒng)（cms）、訂單管理系統(tǒng)等。

所以說我們平常說網(wǎng)站開發(fā)不是簡單做幾個(gè)頁面而是強(qiáng)調(diào)系統(tǒng)與用戶的交互。

什么是網(wǎng)站？

網(wǎng)站的定義是：網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTM等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁的集合。

這個(gè)解釋聽起來有點(diǎn)懵，網(wǎng)站簡單來說就是軟件，建設(shè)網(wǎng)站也是軟件開發(fā)的一種。我們每天都會(huì)接觸各種類型的網(wǎng)站，看新聞會(huì)上門戶網(wǎng)，查資料會(huì)上搜索引擎網(wǎng)站（百度、搜狗、360等），買東西會(huì)上購物類的網(wǎng)站（淘寶、京東）。五花八門的網(wǎng)站會(huì)讓網(wǎng)站開發(fā)新手產(chǎn)生網(wǎng)站容易制作的錯(cuò)覺，但事實(shí)并不只是這種情況，網(wǎng)站建設(shè)是一個(gè)艱苦卓越的過程需要考慮到完整性、目的性、擴(kuò)展性、安全性，特別是商業(yè)網(wǎng)站要求更加苛刻。

網(wǎng)站B/S結(jié)構(gòu)和C/S結(jié)構(gòu)是什么?

網(wǎng)站軟件開發(fā)包括C/S和B/S兩種體系結(jié)構(gòu)，C/S是大家所熟悉的客戶端和服務(wù)器端結(jié)構(gòu)，常用的QQ就是這種結(jié)構(gòu)，需要下載專門的客戶端軟件才能使用。

B/S結(jié)構(gòu)是瀏覽器和服務(wù)器結(jié)構(gòu)，訪問網(wǎng)站只需要一個(gè)瀏覽器就可以，例如IE或fiefox，我們平常說的網(wǎng)站主要說的指B/S結(jié)構(gòu)的網(wǎng)站。

網(wǎng)站B/S結(jié)構(gòu)工作流程是什么？

1、在瀏覽器地址輸入url（平常咱們所說的網(wǎng)址）訪問web服務(wù)器（可以簡單理解網(wǎng)站）。

2、Web服務(wù)器根據(jù)客戶請(qǐng)求，會(huì)以HTML等形式返回客戶端瀏覽器。

3、瀏覽器再把內(nèi)容（HTML等）翻譯給網(wǎng)站訪客看。

網(wǎng)站開發(fā)不能簡單理解為網(wǎng)頁制作，網(wǎng)頁制作只是網(wǎng)站（B/S結(jié)構(gòu)）中一種形式，主要以內(nèi)容發(fā)布和產(chǎn)品展示為主，開發(fā)容易，對(duì)美工要求比較高，一些企業(yè)網(wǎng)站。而我們平常說網(wǎng)站（B/S結(jié)構(gòu)）開發(fā)是指用戶和系統(tǒng)交互為主，注重業(yè)務(wù)處理，對(duì)程序員思維邏輯要求比較高，比如說論壇、電子商務(wù)系統(tǒng)、內(nèi)容管理系統(tǒng)（cms）、訂單管理系統(tǒng)等。

所以說我們平常說網(wǎng)站開發(fā)不是簡單做幾個(gè)頁面而是強(qiáng)調(diào)系統(tǒng)與用戶的交互。