初識網(wǎng)頁設(shè)計(jì)（PC端界面設(shè)計(jì)）

時(shí)間：2023-10-15 18:06:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-15 18:06:01 來源：網(wǎng)站運(yùn)營

初識網(wǎng)頁設(shè)計(jì)（PC端界面設(shè)計(jì)）：主要是以PC端界面設(shè)計(jì)為主，了解網(wǎng)站制作流程、設(shè)計(jì)規(guī)范、網(wǎng)站的風(fēng)格把控、行業(yè)的色彩使用、排版以及交互交互理念的設(shè)計(jì)手法，再加上 HTML 5 代碼的布局實(shí)現(xiàn)，相應(yīng)式的排版，還能獨(dú)立制作網(wǎng)站的能力。

---

一、網(wǎng)頁設(shè)計(jì)的概念和目的

1.什么是網(wǎng)頁

網(wǎng)頁就是能夠被瀏覽器打開顯示在屏幕上的視覺畫面。

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

網(wǎng)頁設(shè)計(jì)是根據(jù)企業(yè)希望向?yàn)g覽者傳遞信息（包括產(chǎn)品、服務(wù)、理念、文化），進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行頁面設(shè)計(jì)美化的工作。

3、網(wǎng)頁設(shè)計(jì)的手段

通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)的美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn) 。高級的網(wǎng)頁設(shè)計(jì)甚至還會考慮到通過聲光、交互、動畫等實(shí)現(xiàn)更好的視聽感受。（理論主導(dǎo)實(shí)踐、實(shí)踐檢驗(yàn)理論的唯一方法）

例如這個(gè)頁面，結(jié)合了動畫、聲音、音樂、排版等方面烘托出了整個(gè)頁面的氛圍感。這個(gè)頁面的排版風(fēng)格也是跟古典、復(fù)古有一定的聯(lián)系，點(diǎn)進(jìn)去看還有小按鍵那些花紋邊設(shè)計(jì)的也是很有創(chuàng)意

---

二、網(wǎng)頁設(shè)計(jì)的發(fā)展史

1.世界上最早的網(wǎng)頁誕生（1991年8月6日）

世界上最早的網(wǎng)頁來自于萬維網(wǎng)的發(fā)明者，互聯(lián)網(wǎng)之父蒂姆·伯納斯·李，是一個(gè)類似維基百科的超文本在線編輯數(shù)據(jù)庫。但是整體的排版比較簡單，基于文本以及包含幾個(gè)鏈接網(wǎng)站。

2.國外網(wǎng)頁設(shè)計(jì)發(fā)展路線

下面以雅虎網(wǎng)頁為例。

雅虎（英文名稱：Yahoo，NASDAQ：YHOO）是全球第一家提供因特網(wǎng)導(dǎo)航服務(wù)的網(wǎng)站。是美國著名的互聯(lián)網(wǎng)門戶網(wǎng)站，20 世紀(jì)末互聯(lián)網(wǎng)奇跡的創(chuàng)造者之一。其服務(wù)包括搜索引擎、電郵、新聞等，業(yè)務(wù)遍及 24 個(gè)國家和地區(qū)，為全球超過5億的獨(dú)立用戶提供多元化的網(wǎng)絡(luò)服務(wù)。同時(shí)也是是一家全球性的因特網(wǎng)通訊、商貿(mào)及媒體公司。

1994 年，雅虎將自己定位于一個(gè)目錄網(wǎng)站，可跳轉(zhuǎn)頁面非常簡潔，連圖標(biāo)都沒有，可以說是跟萬維網(wǎng)這個(gè)網(wǎng)站類型幾乎差不多。







1995年，雅虎開始有了頭部設(shè)計(jì)，也有了搜索功能、Logo設(shè)計(jì)、以及8個(gè)功能按鈕。




1997年，雅虎出現(xiàn)了沿用至今的 “yahoo!”經(jīng)典logo，下面還加上了相關(guān)的列表 。

2000年，可以肯定的是，其中的文案邊多了，與之前的相比，整體的頁面不是很雜亂，也比較有條理性，排版也比較整齊。其中運(yùn)用了一個(gè)排版法則：柵格化布局（比較像報(bào)紙上的一種排版風(fēng)格）

早在網(wǎng)頁設(shè)計(jì)時(shí)代，柵格化布局已經(jīng)開始風(fēng)靡。檢驗(yàn)一個(gè)前端的基本功就是考察他寫的布局是否規(guī)范。由于網(wǎng)頁設(shè)計(jì)主要基于比較寬的電腦顯示器屏幕，因此設(shè)計(jì)師為了能讓設(shè)計(jì)的分欄更加優(yōu)雅和嚴(yán)謹(jǐn)，便將寬度進(jìn)行了更有意義的劃分，當(dāng)時(shí)的網(wǎng)頁寬度以950px，960px，1000px，1190px，1200px居多，并且網(wǎng)頁設(shè)計(jì)過程中大多數(shù)內(nèi)容是要分欄的，可是分多少合適呢？有些設(shè)計(jì)師會說，我隨意劃分寬度就好，只要視覺接受都是可以的。也有些更嚴(yán)謹(jǐn)型的設(shè)計(jì)師說，不行！我們要提供一些寬度比例，讓這些分欄更接近于黃金比例的數(shù)字，這樣會更優(yōu)雅。于是，他們將網(wǎng)頁區(qū)域畫出n多個(gè)小塊，然后讓這些內(nèi)容占據(jù)不同單位的塊，因此就形成了下圖的樣子：

最常見的布局就是24塊分三欄的方式，左邊n=4，中間分欄n=11，右邊分欄n=9個(gè)單位。如下圖的Yahoo！網(wǎng)頁設(shè)計(jì)。

這樣做的好處顯而易見，設(shè)計(jì)師更方便的計(jì)量頁面寬度，各個(gè)分欄直接的間距，并且它們具有更高的一致性。在當(dāng)時(shí)960Grid System更為流行，我們看到下圖，就可以有更直觀的感受。

2002年，網(wǎng)頁體積繼續(xù)增加，色彩更是加多，不過還有框架設(shè)計(jì)，也會引用一些圖片元素加以說明。

2004年頁面變得比較富麗，但是字體變小了，整體的頁面采用兩種色調(diào)，還有大幅的廣告出現(xiàn)。

2006年，雅虎首頁發(fā)生了一些比較細(xì)微的變化，比如logo下面的按鈕沒有了，搜索條的樣式也變長了，但是大體上是一致的，主要是以新聞為主體的門戶網(wǎng)頁設(shè)計(jì)，比以前的版本相對來說簡約了不少，趨向于色調(diào)的統(tǒng)一性。

2009年，logo的顏色采用了紫色，雅虎的本命色，整個(gè)網(wǎng)頁色調(diào)同意，且比較顯得清新淡雅。頁面的內(nèi)容有比較精簡，還有用戶的個(gè)性化設(shè)計(jì)，以“我的應(yīng)用程序”來管理用戶、第三方郵箱、社交網(wǎng)站、資訊，讓雅虎有了自己的服務(wù)體系，同時(shí)也讓雅虎主頁成為了更多互聯(lián)網(wǎng)用戶的起始頁。

......

2021年雅虎首頁設(shè)計(jì)風(fēng)格簡約，這也符合現(xiàn)在的潮流，調(diào)整了整體配色，主logo顏色調(diào)整，還有l(wèi)ogo形式改變得更有趣味性，非常能抓住現(xiàn)在用戶想要的視覺感受。

• 這個(gè)畫面用到了一個(gè)排版概念叫做：扁平化

前期的頁面上的圖標(biāo)、按鈕呈現(xiàn)得比較立體，在信息量越來越多的情況下，投影、立體感等其實(shí)是會形成一種視覺干擾，會影響個(gè)人關(guān)注其他信息上的閱讀。這里所呈現(xiàn)出來的扁平化視覺效果，其實(shí)就是摒棄了一切大家感到比較復(fù)雜、麻煩的排版。

• 還有一個(gè)排版概念：冷淡風(fēng)格（國際品牌沿用的一種排版風(fēng)格）

整體的外觀、配色表現(xiàn)出一種高冷的風(fēng)格特點(diǎn)。沒有過多的渲染以及鮮艷的色彩展現(xiàn)。是以一種冷酷的形象存在。凸顯出一種沒有情緒、無欲無求、冷冰冰、一動不動的一種獨(dú)特風(fēng)格。

如圖：




但是冷淡的對立面就顯得比較火熱、開放、活潑四射的視覺感受。色彩配色比較豐富、大膽、夸張。

如圖：

3.國內(nèi)網(wǎng)頁設(shè)計(jì)發(fā)展路線

下面以淘寶網(wǎng)頁為例。

淘寶：淘寶網(wǎng)是亞太地區(qū)較大的網(wǎng)絡(luò)零售、商圈，由阿里巴巴集團(tuán)在2003年5月創(chuàng)立。淘寶網(wǎng)是中國深受歡迎的網(wǎng)購零售平臺，擁有近5億的注冊用戶數(shù)，每天有超過6000萬的固定訪客，同時(shí)每天的在線商品數(shù)已經(jīng)超過了8億件，平均每分鐘售出4.8萬件商品。隨著淘寶網(wǎng)不斷地改進(jìn)和創(chuàng)新，網(wǎng)站界面設(shè)計(jì)畫面更加簡潔。

雖然中國互聯(lián)網(wǎng)起步較晚，但是跟世界上的發(fā)展歷程也是差不多的，2005年前后在淘寶網(wǎng)其整個(gè)的按鈕比較立體化，但是其頁面的按鈕、排版的厚度、高光、陰影的排版是比較冗雜，比較扁平化，容易讓用戶看不到重點(diǎn)，無法讓用戶一下子找到自己心儀的商品信息。且搜索欄功能不被重視，感受不到實(shí)際的用處，讓用戶無法直接看到重點(diǎn)。

但是看2013年前后來的淘寶網(wǎng)的頁面設(shè)計(jì)，其購物分類都羅列的比較清晰賣商品的功能更加的完善，同樣其搜索欄也有這非常明顯的變化，方便用戶搜索。




2022年前后，商品的展示效果非常的清晰，比較符合大眾審美。

在產(chǎn)品分析的過程中，還有很多的地方需要注意——用戶習(xí)慣，每個(gè)行業(yè)都有每個(gè)行業(yè)的用戶習(xí)慣。舉個(gè)例子：

電商平臺：淘寶、京東、天貓、蘇寧

為了用戶習(xí)慣性操作需要，客戶心理的變化需求，其電商平臺的頁面布局的主體顏色一般為暖色調(diào)，且頂部搜索欄比較大，左邊選項(xiàng)卡為商品分類，中間設(shè)置廣告欄。

品牌官方網(wǎng)頁：紀(jì)梵希、迪奧、香奈兒

一般的品牌logo居中，下面布局為商品導(dǎo)航，產(chǎn)品詳情大概位置布局設(shè)置都比較相同。

---

三、網(wǎng)頁設(shè)計(jì)發(fā)展前景

網(wǎng)絡(luò)公司：專門做網(wǎng)站的，一般以量為主，加班較多，但有提成，里面的設(shè)計(jì)師最高職位也就是設(shè)計(jì)部門經(jīng)理，然后慢慢升管理層。當(dāng)然，這是對有職位空缺的企業(yè)來說的，也有做一輩子網(wǎng)頁設(shè)計(jì)的，和銷售一樣，是中國最好賺錢的企業(yè)，每個(gè)網(wǎng)站傭金5，設(shè)計(jì)師可以月收入萬。

私企：為公司網(wǎng)站和維護(hù)，包括一些購物網(wǎng)絡(luò)、網(wǎng)站重復(fù)布局，這不利于設(shè)計(jì)本身的發(fā)展，工作相對輕松，沒有壓力，而且對員工要求更全面，設(shè)計(jì)、切割圖甚至代碼都要理解，做兩年或三年，就變得全面了，但不能提高設(shè)計(jì)水平，如果是小企業(yè)的話，對未來發(fā)展沒有好處。

廣告公司：專門設(shè)計(jì)高端的網(wǎng)站，特別要求會flash技術(shù)。加班很頻繁，工資也很高，對平面設(shè)計(jì)也有要求，發(fā)展前景不錯(cuò)，但能力不夠的話，壓力會很大。

1.薪資水平

網(wǎng)頁設(shè)計(jì)是一個(gè)比較獨(dú)立的崗位，需求量比較大，一線、二線城市城市的平均薪資水平在8-1W左右，三線、四線城市也能有6-8K，具體可以在BOSS直聘、前程無憂、智聯(lián)招聘、拉勾網(wǎng)等招聘網(wǎng)站看看這些崗位需求。對薪資要求更甚者，可以往UI方向深造。

2.職業(yè)發(fā)展

網(wǎng)頁設(shè)計(jì)師：制作客戶需求網(wǎng)頁效果圖、網(wǎng)站、多個(gè)終端。

項(xiàng)目負(fù)責(zé)人：3-5年隨著網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)積累，可以統(tǒng)籌整個(gè)部門運(yùn)作。

行業(yè)頂尖：專研一門拿手技能，成為領(lǐng)域佼佼者。

---

四、靜態(tài)頁面和動態(tài)頁面

如何區(qū)分靜態(tài)與動態(tài)頁面呢？

靜態(tài)頁面沒有數(shù)據(jù)的交互，制作速度快，成本低，但不宜修改，更新費(fèi)事；如：星巴克官方網(wǎng)頁

動態(tài)頁面有數(shù)據(jù)的交互，如貼吧、QQ空間、微博、NGA論壇、網(wǎng)易新聞等網(wǎng)站平臺。

---

五、網(wǎng)頁設(shè)計(jì)需要具備的能力

1.常用工具：

Photoshop的界面設(shè)計(jì)、像素大廚的頁面標(biāo)注、Axure RP 8.0的交互原型圖、Hbui lder X 的代碼（div+css）

2.審美能力：

多看：在整體的排版設(shè)計(jì)上簡約整潔，在學(xué)習(xí)的過程中，可以多去找一些比較優(yōu)秀的網(wǎng)頁設(shè)計(jì)師，觀摩學(xué)習(xí)他們的作品。

多懂：在觀察設(shè)計(jì)的過程中，要了解這個(gè)設(shè)計(jì)師在設(shè)計(jì)過程中所使用的方法，譬如色彩的搭配，為什么要這樣搭配，這樣搭配的優(yōu)勢是什么？

多練：可以根據(jù)不同的風(fēng)格進(jìn)行設(shè)計(jì)、排版多做兩版，然后進(jìn)行對比，找出每一個(gè)設(shè)計(jì)中的優(yōu)劣，然后在進(jìn)行修正。