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

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

工作流程

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

原型圖階段

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

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

視覺稿階段

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

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

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

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

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

切圖

網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項為前端切出網(wǎng)站所使用的圖片。

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

前端代碼

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

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

項目走查

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

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

網(wǎng)站種類

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

門戶網(wǎng)站

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

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

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

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

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

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

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

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

電商網(wǎng)站

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

淘寶網(wǎng)首頁

游戲網(wǎng)站

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

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

專題頁面

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

極有家淘寶專題頁面

視頻網(wǎng)站

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

騰訊視頻播放頁面

移動端H5

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

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

移動端H5尺寸

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

擁有一個屬于自己的網(wǎng)站似乎是一件挺不錯的事情，你可以做個公司類型網(wǎng)站宣傳業(yè)務(wù)，也可以做個個人類型的網(wǎng)站展示自我。那么對于完全沒有建站經(jīng)驗的人來說，如何做網(wǎng)站呢？自己做網(wǎng)站有兩種方式。

第一種：網(wǎng)站整套都由自己搭建

建站流程如下：

1、注冊域名

現(xiàn)在注冊域名比較簡單，一般是到新網(wǎng)、阿里云或騰訊云上注冊，費用一般在50-100元。

2、選擇服務(wù)器(網(wǎng)站空間)

選擇服務(wù)器要考慮這些參數(shù)：帶寬、單/雙/多線、內(nèi)存、硬盤、硬防、價格，需求不同選擇的標(biāo)準(zhǔn)也不同。同時服務(wù)器分為國內(nèi)服務(wù)器和國外服務(wù)器，選擇國外服務(wù)器不需要備案，關(guān)于備案詳情見下文。服務(wù)器可以到阿里云、騰訊云、AWS上選擇

3、網(wǎng)站備案

網(wǎng)站備案指的是：根據(jù)國家法律法規(guī)需要網(wǎng)站的所有者向國家有關(guān)部門申請的備案（詳情見百度百科）。域名指向到國內(nèi)網(wǎng)站空間，就都必須要備案；指向到國外無需備案。不過小智建議大家網(wǎng)站最好備案，不備案的網(wǎng)站會受到越來越多的限制，比如：域名分享微信朋友圈受限制；微信支付接入不了等等。其實備案的流程并不復(fù)雜，只是審核通過的時候不可控，一般在15-30天，所以要需要備案的話，那把審核時間也考慮進(jìn)去，以免影響網(wǎng)站上線。

5、頁面設(shè)計

設(shè)計出網(wǎng)站的所有頁面（首頁、內(nèi)頁），一般常用PS來做，如果沒有設(shè)計經(jīng)驗的人，可以先去學(xué)習(xí)一些PS知識，前期建議仿站。

6、程序開發(fā)

程序開發(fā)分為：前端開發(fā)及后端開發(fā)。前端指的是：頁面設(shè)計好了是靜態(tài)的圖片，這時需要給頁面加上一些“動態(tài)的效果”，比如說：按鈕可以點擊、各個頁面串聯(lián)起來、留言功能可以使用等等。后端指的是：搭建網(wǎng)站管理后臺，比如可以上傳新聞、產(chǎn)品、公司介紹等數(shù)據(jù)。這兩者一般是用asp+sqlserver數(shù)據(jù)庫、PHP+MySQL數(shù)據(jù)庫、jsp+oracle數(shù)據(jù)庫。

7、網(wǎng)站開通（域名綁定、解析）

一般的域名服務(wù)商都會提供解析入口，登入后臺去操作就可以了。

優(yōu)勢：網(wǎng)站源代碼屬于自己的，能力OK的話要新增任何功能都自己決定。

不足：沒接觸過PS、程序的人需要鉆研/學(xué)習(xí)一段時間才能上手；服務(wù)器安全要自己把握，防止被黑。

第二種：基于又快又好自助建站平臺自己搭建

建站流程：

1、注冊域名

2、域名備案

注：以上與第一種一樣

3、頁面制作

在又快又好自助建站上挑選喜歡的模板，一鍵復(fù)制，接著上傳自己的產(chǎn)品圖片、介紹等。操作簡單、最快30分鐘完成。

4、網(wǎng)站開通（綁定域名）

一鍵綁定域名，快速開通網(wǎng)站

優(yōu)勢：不用設(shè)計頁面，也不用寫程序；網(wǎng)站安全問題不用操心；平臺性質(zhì)，專業(yè)開發(fā)人員迭代功能更升級，技術(shù)能力優(yōu)于個人建站者。

不足：大部分自助建站平臺是SAAS模式，一般無法提供網(wǎng)站源代碼。

總結(jié)：如果想自己做網(wǎng)站的話，這兩種各有各的優(yōu)劣。具體選擇哪種方式，要看自己的喜好。如果你愿意沉下心來花時間學(xué)習(xí)整套建站的，那么不妨選擇第一種。如果你需要快速建站的，那么小智推薦你用又快又好自助建站。

現(xiàn)如今，越來越多的移動和桌面端應(yīng)用開始應(yīng)用HTML、JS和CSS進(jìn)行開發(fā)，對于網(wǎng)頁開發(fā)和設(shè)計更是如此。目前這種局面也催生了更多新的網(wǎng)頁技術(shù)，包括React.js、Angular以及Node.js這樣的庫。此外，隨著需求及項目的進(jìn)一步細(xì)化，開發(fā)者社區(qū)幾乎每天都會出現(xiàn)新的庫和開發(fā)工具，作為網(wǎng)頁開發(fā)者或設(shè)計師的你，自然很有必要去了解和掌握當(dāng)下最新的、實用的工具，持續(xù)優(yōu)化工作方法、有效提高開發(fā)進(jìn)度。

以下小編收集了一系列優(yōu)秀的開發(fā)和設(shè)計工具，包括在線/離線搭站工具、開源代碼工具、在線代碼生成器、排版工具等，一起看看吧。

1.

WordPress – 一站式網(wǎng)站搭建工具

· 價格：基礎(chǔ)版終身免費，個人版HK$30，高級版HK$63，商務(wù)版HK$199

· URL：https://zh-cn.wordpress/

· 推薦指數(shù)：★★★★★

WordPress – 一站式網(wǎng)站搭建工具

WordPress是使用PHP語言開發(fā)的博客平臺，支持PHP和MySQL數(shù)據(jù)庫的服務(wù)器上架設(shè)屬于自己的網(wǎng)站，也可以把它作為一個CMS（內(nèi)容管理系統(tǒng)）來架設(shè)商業(yè)網(wǎng)站，提供的功能包括：所見即所得的文章編輯器、多作者共同寫作、為搜索引擎而優(yōu)化的永久鏈接、生成和使用靜態(tài)頁面、Trackback/Pingback、會員注冊登錄等。

特色功能：

· 安裝方式簡單、易用，內(nèi)置許多搭站輔助工具，一鍵點擊即可完成安裝。

· 插件工具眾多，支持使用擴(kuò)充其功能，適合DIY豐富的網(wǎng)站內(nèi)容。

· 第三方開發(fā)的免費模板、主題豐富，各色各樣，應(yīng)有盡有！

· SEO搜索友好，收錄時間快。

· 強(qiáng)大的社區(qū)支持，成千上萬的開發(fā)者貢獻(xiàn)和審查WP，整個環(huán)境安全且活躍。

2.

Mockplus – 更快、更簡單的Web/Mobile/Desktop設(shè)計平臺

價格：基礎(chǔ)版免費，個人版￥199/年，團(tuán)隊版￥999/年，企業(yè)版￥5999/年

URL：https://mockplus/

推薦指數(shù)：★★★★★

Mockplus –更快更簡單的設(shè)計平臺

作為國內(nèi)勢頭正猛的工具軟件，Mockplus（也叫摹客）適合軟件團(tuán)隊、個人在軟件開發(fā)的設(shè)計階段使用，交互快、設(shè)計快、演示快、上手快，很好地順應(yīng)了當(dāng)前敏捷開發(fā)（AgileDevelopment）的大趨勢。同時，秉承“關(guān)注設(shè)計，而非工具”的理念，摹客提供一系列獨家實用的功能，幫助用戶提高工作及開發(fā)進(jìn)度。

特色功能：

界面設(shè)計。組件開箱即用，提供項目和頁面模板、自定義組件庫、母版、組件樣式、格子、自動數(shù)據(jù)填充，讓設(shè)計快速復(fù)用。

團(tuán)隊協(xié)作。支持團(tuán)隊管理、角色設(shè)定和分組，可協(xié)作設(shè)計、分工編輯、多人審閱和評論、支持Sketch導(dǎo)入。

交互設(shè)計。拖拽鼠標(biāo)即完成交互設(shè)計，支持頁鏈接、組件交互、交互狀態(tài)、交互自動還原。

工作文檔。多種批注組件添加設(shè)計說明、頁面流程圖快速呈現(xiàn)業(yè)務(wù)邏輯，腦圖模式快速構(gòu)建頁面關(guān)系。

演示分享。隨時發(fā)布分享，提供8種演示方式，支持HTML在線預(yù)覽和離線包等多種導(dǎo)出方式。

3.

Macaw – 革新性超前Web編輯器

· 價格： 免費

· URL：http://macaw.co/

· 推薦指數(shù)：★★★★

Macaw – 革新性超前Web編輯器

Macaw是目前最熱門的開發(fā)工具之一，被網(wǎng)友戲稱為“金剛鸚鵡“。它是一款基于Mac平臺、支持語義HTML和簡潔CSS的Web開發(fā)軟件，可生成多分辨率頁。同時它也可以作為設(shè)計師的圖像編輯工具，提供實時的布局引擎，讓元素以類似AdobePS中的呈現(xiàn)方式進(jìn)行操作，通過編輯當(dāng)前的網(wǎng)頁圖片，最后生成HTML模板和JS代碼。

特色功能：

· 特定寬度功能，可以自動計算每行字符個數(shù)，也支持用戶指定的寬度，生成自適應(yīng)網(wǎng)頁布局。

· 組件庫功能，支持將自己設(shè)計的組件收藏和保存到庫，并拖拽到任意頁面中。

· 不同組件類別，可自己設(shè)計或者保存到指定的類別，并將它們快速應(yīng)用到整個文檔。

· 具備流計算所有必要的屬性（漂浮、清除等），并將元素作為靜態(tài)文件流。

4.

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

價格：基礎(chǔ)版免費，個人版8美金/月，Pro版12美金/月，商務(wù)版25美金/月

URL：https://weebly/

推薦指數(shù)：★★★★

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

作為美國本土的一家自助建站服務(wù)商，Weebly使用了大量的Ajax技術(shù)，在操作性、用戶友好等方面做得很好，同類型的服務(wù)商還有Webs，Yola等，但像Weebly這樣針對中國用戶單獨增設(shè)中文網(wǎng)站的比較罕見。

特色功能：

· 拖拽實現(xiàn)編輯，無論是視頻、圖片、地圖和文章都能拖拽到網(wǎng)站中，無需HTML或其他網(wǎng)頁程序語言的支持，簡單且直觀。

· 專業(yè)模板設(shè)計直接使用，目前已有70個、且在持續(xù)增加中，如果懂HTML/CSS，可以直接用它們的編輯器來定制。

· 允許綁定個人的頂級域名，而且是綁定域名是免費的，直接提供IP地址即可，也可以在Weebly上購買域名。

5.

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

價格：個人版$9.99-$82.99/月，商務(wù)版$33.99-$79.99/月

URL：https://adobe/products/dreamweaver.html

推薦指數(shù)：★★★★

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

相信不少做開發(fā)和設(shè)計的小伙伴對DW這款軟件并不陌生，它是集網(wǎng)頁制作和管理網(wǎng)站于一體的WYSIWYG網(wǎng)頁代碼編輯器，通過使用HTML、CSS、JavaScript等語言，程序員和設(shè)計師幾乎可以在任何地方快速制作和上線網(wǎng)站。支持Windows和Mac操作系統(tǒng)，對剛?cè)腴T初學(xué)者或者需要進(jìn)階的大神來說都是不錯的選擇。

特色功能：

· 自適應(yīng)網(wǎng)格，可使用CSS3自適應(yīng)網(wǎng)格版面，創(chuàng)建跨平臺和瀏覽器的兼容網(wǎng)頁設(shè)計，采用符合業(yè)界標(biāo)準(zhǔn)的代碼為各種不同設(shè)備和計算機(jī)開發(fā)項目。

· 實時視圖，支持再發(fā)布前測試頁面，采用最新版WebKit轉(zhuǎn)換引擎，提供絕佳的HTML5支持。

· “多平面預(yù)覽”面板，支持為智能手機(jī)、Tablet和個人計算機(jī)進(jìn)行設(shè)計，開發(fā)人員也可以通過其為各種設(shè)備設(shè)計樣式并實現(xiàn)渲染可視化。

結(jié)語

以上是小編力薦的網(wǎng)頁開發(fā)和設(shè)計工具，顯而易見每款工具都各有千秋，我們可以結(jié)合實際的開發(fā)需求和項目支持來做進(jìn)一步選擇：如果你擁有不錯的開發(fā)基礎(chǔ)、且想自己編代碼來搭站，那么Macaw和DreamWeaver都是不錯的選擇；如果你是開發(fā)新手或者小白、更需要完全成形的三方平臺來搭建網(wǎng)站，那么WordPress和Weebly都可以考慮；如果你更在意開發(fā)效率、網(wǎng)站功能以及資金預(yù)算，那么Mockplus是不二之選！

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

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

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

二、工作流程

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

1. 原型圖階段

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

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

2. 視覺稿階段

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

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

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

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

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

4. 切圖

網(wǎng)頁設(shè)計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項為前端切出網(wǎng)站所使用的圖片。

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

5. 前端代碼

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

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

6. 項目走查

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

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

三、網(wǎng)站種類

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

1. 門戶網(wǎng)站

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

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

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

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

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

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

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

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

4. 電商網(wǎng)站

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

△ 淘寶網(wǎng)首頁

5. 游戲網(wǎng)站

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

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

6. 專題頁面

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

△ 極有家淘寶專題頁面

7. 視頻網(wǎng)站

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

△ 騰訊視頻播放頁面

8. 移動端H5

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

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

移動端H5尺寸

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

現(xiàn)如今，越來越多的移動和桌面端應(yīng)用開始應(yīng)用HTML、JS和CSS進(jìn)行開發(fā)，對于網(wǎng)頁開發(fā)和設(shè)計更是如此。目前這種局面也催生了更多新的網(wǎng)頁技術(shù)，包括React.js、Angular以及Node.js這樣的庫。此外，隨著需求及項目的進(jìn)一步細(xì)化，開發(fā)者社區(qū)幾乎每天都會出現(xiàn)新的庫和開發(fā)工具，作為網(wǎng)頁開發(fā)者或設(shè)計師的你，自然很有必要去了解和掌握當(dāng)下最新的、實用的工具，持續(xù)優(yōu)化工作方法、有效提高開發(fā)進(jìn)度。

以下小編收集了一系列優(yōu)秀的開發(fā)和設(shè)計工具，包括在線/離線搭站工具、開源代碼工具、在線代碼生成器、排版工具等，一起看看吧。

1.

WordPress – 一站式網(wǎng)站搭建工具

· 價格：基礎(chǔ)版終身免費，個人版HK$30，高級版HK$63，商務(wù)版HK$199

· URL：https://zh-cn.wordpress/

· 推薦指數(shù)：★★★★★

WordPress – 一站式網(wǎng)站搭建工具

WordPress是使用PHP語言開發(fā)的博客平臺，支持PHP和MySQL數(shù)據(jù)庫的服務(wù)器上架設(shè)屬于自己的網(wǎng)站，也可以把它作為一個CMS（內(nèi)容管理系統(tǒng)）來架設(shè)商業(yè)網(wǎng)站，提供的功能包括：所見即所得的文章編輯器、多作者共同寫作、為搜索引擎而優(yōu)化的永久鏈接、生成和使用靜態(tài)頁面、Trackback/Pingback、會員注冊登錄等。

特色功能：

· 安裝方式簡單、易用，內(nèi)置許多搭站輔助工具，一鍵點擊即可完成安裝。

· 插件工具眾多，支持使用擴(kuò)充其功能，適合DIY豐富的網(wǎng)站內(nèi)容。

· 第三方開發(fā)的免費模板、主題豐富，各色各樣，應(yīng)有盡有！

· SEO搜索友好，收錄時間快。

· 強(qiáng)大的社區(qū)支持，成千上萬的開發(fā)者貢獻(xiàn)和審查WP，整個環(huán)境安全且活躍。

2.

Mockplus – 更快、更簡單的Web/Mobile/Desktop設(shè)計平臺

價格：基礎(chǔ)版免費，個人版￥199/年，團(tuán)隊版￥999/年，企業(yè)版￥5999/年

URL：https://mockplus/

推薦指數(shù)：★★★★★

Mockplus –更快更簡單的設(shè)計平臺

作為國內(nèi)勢頭正猛的工具軟件，Mockplus（也叫摹客）適合軟件團(tuán)隊、個人在軟件開發(fā)的設(shè)計階段使用，交互快、設(shè)計快、演示快、上手快，很好地順應(yīng)了當(dāng)前敏捷開發(fā)（AgileDevelopment）的大趨勢。同時，秉承“關(guān)注設(shè)計，而非工具”的理念，摹客提供一系列獨家實用的功能，幫助用戶提高工作及開發(fā)進(jìn)度。

特色功能：

界面設(shè)計。組件開箱即用，提供項目和頁面模板、自定義組件庫、母版、組件樣式、格子、自動數(shù)據(jù)填充，讓設(shè)計快速復(fù)用。

團(tuán)隊協(xié)作。支持團(tuán)隊管理、角色設(shè)定和分組，可協(xié)作設(shè)計、分工編輯、多人審閱和評論、支持Sketch導(dǎo)入。

交互設(shè)計。拖拽鼠標(biāo)即完成交互設(shè)計，支持頁鏈接、組件交互、交互狀態(tài)、交互自動還原。

工作文檔。多種批注組件添加設(shè)計說明、頁面流程圖快速呈現(xiàn)業(yè)務(wù)邏輯，腦圖模式快速構(gòu)建頁面關(guān)系。

演示分享。隨時發(fā)布分享，提供8種演示方式，支持HTML在線預(yù)覽和離線包等多種導(dǎo)出方式。

3.

Macaw – 革新性超前Web編輯器

· 價格： 免費

· URL：http://macaw.co/

· 推薦指數(shù)：★★★★

Macaw – 革新性超前Web編輯器

Macaw是目前最熱門的開發(fā)工具之一，被網(wǎng)友戲稱為“金剛鸚鵡“。它是一款基于Mac平臺、支持語義HTML和簡潔CSS的Web開發(fā)軟件，可生成多分辨率頁。同時它也可以作為設(shè)計師的圖像編輯工具，提供實時的布局引擎，讓元素以類似AdobePS中的呈現(xiàn)方式進(jìn)行操作，通過編輯當(dāng)前的網(wǎng)頁圖片，最后生成HTML模板和JS代碼。

特色功能：

· 特定寬度功能，可以自動計算每行字符個數(shù)，也支持用戶指定的寬度，生成自適應(yīng)網(wǎng)頁布局。

· 組件庫功能，支持將自己設(shè)計的組件收藏和保存到庫，并拖拽到任意頁面中。

· 不同組件類別，可自己設(shè)計或者保存到指定的類別，并將它們快速應(yīng)用到整個文檔。

· 具備流計算所有必要的屬性（漂浮、清除等），并將元素作為靜態(tài)文件流。

4.

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

價格：基礎(chǔ)版免費，個人版8美金/月，Pro版12美金/月，商務(wù)版25美金/月

URL：https://weebly/

推薦指數(shù)：★★★★

Weebly – 主流Web開發(fā)及設(shè)計服務(wù)商

作為美國本土的一家自助建站服務(wù)商，Weebly使用了大量的Ajax技術(shù)，在操作性、用戶友好等方面做得很好，同類型的服務(wù)商還有Webs，Yola等，但像Weebly這樣針對中國用戶單獨增設(shè)中文網(wǎng)站的比較罕見。

特色功能：

· 拖拽實現(xiàn)編輯，無論是視頻、圖片、地圖和文章都能拖拽到網(wǎng)站中，無需HTML或其他網(wǎng)頁程序語言的支持，簡單且直觀。

· 專業(yè)模板設(shè)計直接使用，目前已有70個、且在持續(xù)增加中，如果懂HTML/CSS，可以直接用它們的編輯器來定制。

· 允許綁定個人的頂級域名，而且是綁定域名是免費的，直接提供IP地址即可，也可以在Weebly上購買域名。

5.

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

價格：個人版$9.99-$82.99/月，商務(wù)版$33.99-$79.99/月

URL：https://adobe/products/dreamweaver.html

推薦指數(shù)：★★★★

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設(shè)計工具

相信不少做開發(fā)和設(shè)計的小伙伴對DW這款軟件并不陌生，它是集網(wǎng)頁制作和管理網(wǎng)站于一體的WYSIWYG網(wǎng)頁代碼編輯器，通過使用HTML、CSS、JavaScript等語言，程序員和設(shè)計師幾乎可以在任何地方快速制作和上線網(wǎng)站。支持Windows和Mac操作系統(tǒng)，對剛?cè)腴T初學(xué)者或者需要進(jìn)階的大神來說都是不錯的選擇。

特色功能：

· 自適應(yīng)網(wǎng)格，可使用CSS3自適應(yīng)網(wǎng)格版面，創(chuàng)建跨平臺和瀏覽器的兼容網(wǎng)頁設(shè)計，采用符合業(yè)界標(biāo)準(zhǔn)的代碼為各種不同設(shè)備和計算機(jī)開發(fā)項目。

· 實時視圖，支持再發(fā)布前測試頁面，采用最新版WebKit轉(zhuǎn)換引擎，提供絕佳的HTML5支持。

· “多平面預(yù)覽”面板，支持為智能手機(jī)、Tablet和個人計算機(jī)進(jìn)行設(shè)計，開發(fā)人員也可以通過其為各種設(shè)備設(shè)計樣式并實現(xiàn)渲染可視化。

結(jié)語

以上是小編力薦的網(wǎng)頁開發(fā)和設(shè)計工具，顯而易見每款工具都各有千秋，我們可以結(jié)合實際的開發(fā)需求和項目支持來做進(jìn)一步選擇：如果你擁有不錯的開發(fā)基礎(chǔ)、且想自己編代碼來搭站，那么Macaw和DreamWeaver都是不錯的選擇；如果你是開發(fā)新手或者小白、更需要完全成形的三方平臺來搭建網(wǎng)站，那么WordPress和Weebly都可以考慮；如果你更在意開發(fā)效率、網(wǎng)站功能以及資金預(yù)算，那么Mockplus是不二之選！