亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

網(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)方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國納斯達克掛牌上市，再到現(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)站體驗并不比軟件和手機APP差。加上個人電腦的普及，網(wǎng)站仍然是人機交互中非常重要的平臺之一。那么作為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ā)需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現(xiàn)也許設(shè)計師會有更好的方式，這時需要在設(shè)計之前與產(chǎn)品經(jīng)理達成一致。

構(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等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調(diào)合理性，這時也需要和產(chǎn)品經(jīng)理溝通從后臺調(diào)取的圖片尺寸、標題字段長度等，然后根據(jù)這些要求完成頁面信息部分的設(shè)計?？傊?，設(shè)計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

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

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

當視覺稿通過后，很多設(shè)計師可能不會主動去做設(shè)計規(guī)范。其實每一個可迭代的產(chǎn)品都需要設(shè)計師來總結(jié)設(shè)計規(guī)范，設(shè)計規(guī)范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網(wǎng)站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設(shè)計規(guī)范主要也是在約束設(shè)計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設(shè)計規(guī)范也可以保證同一個項目的不同設(shè)計師都能輸出一樣風格的設(shè)計來。最后，設(shè)計規(guī)范對于設(shè)計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。所以我認為設(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)站是不是達到了我們要求的數(shù)據(jù)，也會進行埋點。埋點就是在頁面代碼里插入一些統(tǒng)計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預(yù)期。在此后其實還會有測試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等，這里省略。

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

項目走查

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

將實現(xiàn)后的截圖和設(shè)計稿進行比對（工具：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è)計師以迭代的方式維護迭代網(wǎng)站首頁、二級頁面、底層頁等網(wǎng)站基石。然后需要各個頻道的設(shè)計師來處理日常需求：比如巴黎時裝周需要負責時尚頻道的設(shè)計師來設(shè)計對應(yīng)的專題、世界杯小組出線需要負責體育頻道的設(shè)計師來設(shè)計對應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計工作就不會少。另外，具體對接頻道的設(shè)計師也需要有一定擅長之處：比如對接體育頻道的設(shè)計師起碼應(yīng)該熟悉足球籃球等體育項目、時尚頻道的設(shè)計師要懂得各個大牌的設(shè)計風格、佛學(xué)頻道的設(shè)計師需要懂得基本的佛學(xué)知識和忌諱、文化頻道的設(shè)計師需要對傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計師可以分為產(chǎn)品組和頻道組兩種。

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

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

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

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

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

從蘋果公司的iPhone介紹頁到小米手機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)品的極致精細。由于中國互聯(lián)網(wǎng)和產(chǎn)品設(shè)計發(fā)展很快，所以產(chǎn)品類網(wǎng)站設(shè)計需求一定會越來越多。

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

電商網(wǎng)站

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