來源:郗鑒 發(fā)布時(shí)間:2018-10-10 17:41:36 閱讀量:1073
網(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像素(對比一下,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ì)??傊O(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ī)范對于設(shè)計(jì)師個(gè)人來說也是對項(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)榍岸斯こ處熗ǔP枰莆誔S軟件技能。如果遇到特殊情況需要我們切圖時(shí),我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項(xiàng)為前端切出網(wǎng)站所使用的圖片。
從PSD中提取出來的切圖(插件:cutterman)
前端代碼
前端工程師會(huì)用代碼重構(gòu)我們設(shè)計(jì)的頁面,把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對接調(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)行比對(工具:Photoshop)
網(wǎng)站種類
網(wǎng)站的分類按對象來劃分可以分為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白了我們在設(shè)計(jì)使用者工作的工具,我們在設(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ì)對應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對應(yīng)的專題等。地球上的每一天都有大事發(fā)生,那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外,具體對接頻道的設(shè)計(jì)師也需要有一定擅長之處:比如對接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(xiàng)目、時(shí)尚頻道的設(shè)計(jì)師要懂得各個(gè)大牌的設(shè)計(jì)風(fēng)格、佛學(xué)頻道的設(shè)計(jì)師需要懂得基本的佛學(xué)知識(shí)和忌諱、文化頻道的設(shè)計(jì)師需要對傳統(tǒng)文化有所涉獵。所以基本上門戶網(wǎng)站的設(shè)計(jì)師可以分為產(chǎn)品組和頻道組兩種。
韓國門戶網(wǎng)站Naver
企業(yè)網(wǎng)站
每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對外展示自己的能力、介紹自己的產(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)然就變得非常重要了。