近兩萬(wàn)字的干貨!可能是最周全的頁(yè)面設(shè)計(jì)基礎(chǔ)知識(shí)全攻略
編者按:本文有6個(gè)章節(jié),從工作流程、網(wǎng)站種類、網(wǎng)站組成部分、技術(shù)原理、設(shè)計(jì)規(guī)范等周全總結(jié)了頁(yè)面設(shè)計(jì)的基礎(chǔ)知識(shí),接近兩萬(wàn)字的干貨,新手看完就可以入門了。
一、頁(yè)面設(shè)計(jì)是什么?
頁(yè)面設(shè)計(jì)也被稱為 Web Design、網(wǎng)站設(shè)計(jì)、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計(jì)。雖然如今我們常使用移動(dòng)端上的 APP 來(lái)獲取資訊,但是顯然基于小我電腦平臺(tái)的網(wǎng)站上網(wǎng)體例陪伴我們的歷史要比手機(jī)久許多:從1987年錢天白教授向德國(guó)發(fā)出第一封電子郵件到2000年搜狐、新浪、網(wǎng)易在美國(guó)納斯達(dá)克掛牌上市,再到如今網(wǎng)站遍地;中國(guó)的網(wǎng)站高速發(fā)展了近三十年。我是在小學(xué)開始去網(wǎng)吧「上網(wǎng)沖浪」的,那時(shí)的電腦屏幕特別很是小,分辨率只有800×600像素(對(duì)比一下,iPhone8的分辨率是750x1334px),網(wǎng)速也很慢,經(jīng)常掉線或者加載失敗。那時(shí)的網(wǎng)站性能和體驗(yàn)都不好,而如今網(wǎng)站設(shè)計(jì)和曩昔已經(jīng)有了偉大的轉(zhuǎn)變:看重用戶體驗(yàn)、看重網(wǎng)頁(yè)動(dòng)效、富媒體等設(shè)計(jì)讓現(xiàn)在的網(wǎng)站體驗(yàn)并不比軟件和手機(jī) APP 差。加上小我電腦的普及,網(wǎng)站仍然是人機(jī)交互中特別很是緊張的平臺(tái)之一。那么作為 UI設(shè)計(jì)師我們就必須掌握網(wǎng)站設(shè)計(jì)的規(guī)范和理解網(wǎng)站運(yùn)行的原理,才能更好地駕馭這個(gè)平臺(tái)。今天就向您好好說(shuō)道一下網(wǎng)站必須懂得的那些事兒。
二、工作流程
首先讓我們來(lái)看一下網(wǎng)站設(shè)計(jì)的工作流程吧,除了之前介紹過(guò)的用戶研究、撰寫產(chǎn)品需求文檔、市場(chǎng)文檔、做競(jìng)品調(diào)研等工作之外,與設(shè)計(jì)師密切相干的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺(jué)稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都必要設(shè)計(jì)師參與和了解,萬(wàn)萬(wàn)不要只在意視覺(jué)稿這個(gè)階段,有許多前期與后期工作同樣必要得到我們的正視。好,讓我們一個(gè)一個(gè)來(lái)了解它們吧。
1. 原型圖階段
原型圖階段中設(shè)計(jì)師必要和產(chǎn)品經(jīng)理溝通需求,這時(shí)要細(xì)致,并不是產(chǎn)品經(jīng)理向設(shè)計(jì)師下發(fā)需求,而是必要相互就本身擅長(zhǎng)的方面進(jìn)行溝通。視覺(jué)方面詳細(xì)呈現(xiàn)大概設(shè)計(jì)師會(huì)有更好的體例,這時(shí)必要在設(shè)計(jì)之前與產(chǎn)品經(jīng)理達(dá)成同等。
△ 構(gòu)建網(wǎng)站原型圖(工具:Axure RP)
2. 視覺(jué)稿階段
視覺(jué)稿階段就是我們要根據(jù)原型圖確定的內(nèi)容和大體版式完成網(wǎng)站的界面設(shè)計(jì)了,在設(shè)計(jì)網(wǎng)站的時(shí)候,我們必要一些圖像和靈感的素材。比如做世界杯專題時(shí),我們除了收集許多素材之外,也可以設(shè)計(jì)一個(gè)「情緒板」(Mood Board)。簡(jiǎn)單討情緒板就是將一些與主題相干的資料和素材拼貼在一路,如許可以更好地指引我們整個(gè)需求的設(shè)計(jì)主題和大體感覺(jué)。另外,許多網(wǎng)站的頭部通常必要主視覺(jué)來(lái)抓人眼球,這時(shí)可能會(huì)使用到需求方提供的明星照片、主題素材、LOGO、主視覺(jué)PSD等,那么用素材和這些需求方提供的資料進(jìn)行混合并拼出讓人覺(jué)得震撼的頭部視覺(jué)就是我們的目標(biāo)了。主視覺(jué)下面的信息排布更強(qiáng)調(diào)合理性,這時(shí)也必要和產(chǎn)品經(jīng)理溝通從后臺(tái)調(diào)取的圖片尺寸、題目字段長(zhǎng)度等,然后根據(jù)這些要求完成網(wǎng)頁(yè)信息部分的設(shè)計(jì)??傊?,設(shè)計(jì)過(guò)程中必要我們賡續(xù)思考和溝通才可以完成一個(gè)比較棒的視覺(jué)稿。
△ 視覺(jué)稿設(shè)計(jì)階段(工具:Photoshop)
3. 設(shè)計(jì)規(guī)范
當(dāng)視覺(jué)稿通過(guò)后,許多設(shè)計(jì)師可能不會(huì)自動(dòng)去做設(shè)計(jì)規(guī)范。其實(shí)每一個(gè)可迭代的產(chǎn)品都必要設(shè)計(jì)師來(lái)總結(jié)設(shè)計(jì)規(guī)范,設(shè)計(jì)規(guī)范就是所有網(wǎng)頁(yè)中共性的東西,比如說(shuō)字體不同的大小、圖片的尺寸、按鈕的樣式等,這些共性也是用戶訪問(wèn)網(wǎng)站時(shí)會(huì)理解成固定概念的憑證。比如同樣的分享功能假如采用兩種截然不同的樣式就會(huì)讓用戶疑心。那么設(shè)計(jì)規(guī)范重要也是在束縛設(shè)計(jì)師我們本身,在用戶有限的記憶力中削減思考的成本。同時(shí),設(shè)計(jì)規(guī)范也可以保證統(tǒng)一個(gè)項(xiàng)目的不同設(shè)計(jì)師都能輸出一樣風(fēng)格的設(shè)計(jì)來(lái)。最后,設(shè)計(jì)規(guī)范對(duì)于設(shè)計(jì)師小我來(lái)說(shuō)也是對(duì)項(xiàng)目影響的一個(gè)佐證,可以證實(shí)你的思考和你在項(xiàng)目中的地位。所以我認(rèn)為設(shè)計(jì)師應(yīng)該自動(dòng)去做設(shè)計(jì)規(guī)范和項(xiàng)目總結(jié)。設(shè)計(jì)規(guī)范如何去做?其實(shí)設(shè)計(jì)規(guī)范就是把重要網(wǎng)頁(yè)的元素固定成同一元素即可。詳細(xì)來(lái)說(shuō)一個(gè)產(chǎn)品的設(shè)計(jì)規(guī)范應(yīng)該有:字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等不同分類。
△ 視覺(jué)規(guī)范(工具:Photoshop)
4. 切圖
頁(yè)面設(shè)計(jì)師通常不必要為前端工程師切圖。由于前端工程師通常必要掌握 PS 軟件技能。假如碰到特別情況必要我們切圖時(shí),我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項(xiàng)為前端切出網(wǎng)站所使用的圖片。
△ 從PSD中提掏出來(lái)的切圖(插件:cutterman)
5. 前端代碼
前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的網(wǎng)頁(yè),把圖紙變?yōu)殪o態(tài)網(wǎng)頁(yè)。然后和后端工程師對(duì)接調(diào)取數(shù)據(jù)接口,一個(gè)網(wǎng)站就活了起來(lái)。工程師們?yōu)榱朔奖懔私饩W(wǎng)站是不是達(dá)到了我們要求的數(shù)據(jù),也會(huì)進(jìn)行埋點(diǎn)。埋點(diǎn)就是在網(wǎng)頁(yè)代碼里插入一些統(tǒng)計(jì)代碼,方便我們之后確定哪些網(wǎng)頁(yè)訪問(wèn)量高,哪些沒(méi)有達(dá)到預(yù)期。在此后其實(shí)還會(huì)有測(cè)試工程師介入來(lái)發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。
△ 前端工程師代碼編譯(工具:Notepad +)
6. 項(xiàng)目走查
頁(yè)面設(shè)計(jì)完成后還必要設(shè)計(jì)師進(jìn)行項(xiàng)目走查,來(lái)確定頁(yè)面還原度是否有題目。假如發(fā)現(xiàn)有和設(shè)計(jì)稿出入很大的,就必要要求前端工程師進(jìn)行調(diào)整。這個(gè)步驟特別很是緊張,由于網(wǎng)站的制品才是我們最終的輸出,不要認(rèn)為設(shè)計(jì)稿很漂亮而實(shí)現(xiàn)后的網(wǎng)頁(yè)就不必要我們負(fù)責(zé)了。
△ 將實(shí)現(xiàn)后的截圖和設(shè)計(jì)稿進(jìn)行比對(duì)(工具:Photoshop)
三、網(wǎng)站種類
網(wǎng)站的分類按對(duì)象來(lái)劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消耗者,例如門戶網(wǎng)站、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、游戲網(wǎng)站、專題網(wǎng)頁(yè)、視頻網(wǎng)站、移動(dòng)端H5 等,均是面向用戶和消耗者的產(chǎn)品。因?yàn)槭敲嫦蛴脩艉拖恼撸栽O(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),由于說(shuō)白了我們?cè)谠O(shè)計(jì)使用者工作的工具,我們?cè)谠O(shè)計(jì)時(shí)必須首先要保證操作者可以高效地完成他們所必要完成的工作。那么讓我們來(lái)了解一下網(wǎng)站的不同門類吧。
1. 門戶網(wǎng)站
門戶網(wǎng)站國(guó)內(nèi)比較著名的有新浪、騰訊、網(wǎng)易、搜狐;國(guó)外比較著名的如 Naver、Llinternaute 等。我們可以看得出,門戶網(wǎng)站都是大而全包羅生活萬(wàn)象的。比如騰訊網(wǎng)就有消息、財(cái)經(jīng)、視頻、體育、娛樂(lè)、時(shí)尚、汽車、房產(chǎn)、科技、游戲等不同頻道。門戶網(wǎng)站的門檻很高,必須要有豐富的實(shí)力才可以建立起一個(gè)門戶網(wǎng)站,而門戶網(wǎng)站必要的設(shè)計(jì)師數(shù)量也驚人。首先門戶網(wǎng)站必要產(chǎn)品方向的界面設(shè)計(jì)師以迭代的體例維護(hù)迭代網(wǎng)站首頁(yè)、二級(jí)網(wǎng)頁(yè)、底層頁(yè)等網(wǎng)站基石。然后必要各個(gè)頻道的設(shè)計(jì)師來(lái)處理日常需求:比如巴黎時(shí)裝周必要負(fù)責(zé)時(shí)尚頻道的設(shè)計(jì)師來(lái)設(shè)計(jì)對(duì)應(yīng)的專題、世界杯小組出線必要負(fù)責(zé)體育頻道的設(shè)計(jì)師來(lái)設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生,那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外,詳細(xì)對(duì)接頻道的設(shè)計(jì)師也必要有肯定擅長(zhǎng)之處:比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該認(rèn)識(shí)足球籃球等體育項(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)品組和頻道組兩種。
△ 韓國(guó)門戶網(wǎng)站Naver
2. 企業(yè)網(wǎng)站
每個(gè)企業(yè)都必要有一個(gè)網(wǎng)站來(lái)對(duì)外展示本身的能力、介紹本身的產(chǎ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)站首頁(yè)、公司介紹、產(chǎn)品中間、公司團(tuán)隊(duì)、在線商城、聯(lián)系我們等這幾個(gè)模塊,企業(yè)網(wǎng)站會(huì)展示許多諸如公司環(huán)境、團(tuán)隊(duì)成員、企業(yè)文化等現(xiàn)實(shí)的照片,配合一些資料進(jìn)行設(shè)計(jì)。企業(yè)網(wǎng)站通常也尋求所謂「高端」、「大氣」、「上檔次」的風(fēng)格,也就是為了達(dá)到讓消耗者認(rèn)同品牌這個(gè)要求。所以假如我們接到了企業(yè)網(wǎng)站的設(shè)計(jì)需求,不妨多去欣賞參考一些更加大牌的企業(yè)網(wǎng)站作為競(jìng)品來(lái)參考。
△ 美國(guó)通用公司官網(wǎng)
3. 產(chǎn)品網(wǎng)站
從蘋果公司的 iPhone 介紹頁(yè)到小米手機(jī)8的介紹頁(yè),我們會(huì)發(fā)現(xiàn)一種奇怪的產(chǎn)品營(yíng)銷模式,就是產(chǎn)品網(wǎng)站。設(shè)計(jì)這類網(wǎng)站的內(nèi)容重要是該產(chǎn)品的工藝、技術(shù)、設(shè)計(jì)、特點(diǎn)、構(gòu)造、使用場(chǎng)景等。如許的產(chǎn)品頁(yè)盼望可以讓用戶有沉浸感,所以一樣平常來(lái)說(shuō)都是使用全屏布局,然后配合一些如視差滾動(dòng)等體例讓我們感覺(jué)到這個(gè)產(chǎn)品的極致邃密。因?yàn)橹袊?guó)互聯(lián)網(wǎng)和產(chǎn)品設(shè)計(jì)發(fā)展很快,所以產(chǎn)品類網(wǎng)站設(shè)計(jì)需求肯定會(huì)越來(lái)越多。
△ 蘋果公司產(chǎn)品介紹頁(yè)
4. 電商網(wǎng)站
電商設(shè)計(jì)師也屬于頁(yè)面設(shè)計(jì)師嗎?是的。假如按照平臺(tái)細(xì)分,無(wú)疑電商設(shè)計(jì)師所在的平臺(tái)大部分屬于網(wǎng)站。以淘寶、天貓為代表的電子商務(wù)發(fā)展得太快了,以至于從內(nèi)蒙的牧民到海南島的漁民,甚至臺(tái)灣、日本、東南亞的商人都開始在中國(guó)電商平臺(tái)上開店鋪了。店鋪其實(shí)自己屬于平臺(tái)自己的網(wǎng)頁(yè)。但是為了加強(qiáng)每個(gè)店的個(gè)性,平臺(tái)為商店開通了一些網(wǎng)頁(yè)自定義的裝飾功能,比如寶貝詳情、店鋪排版、banner頭圖設(shè)計(jì)等。如許商鋪有肯定權(quán)限在平臺(tái)規(guī)定的范圍內(nèi)使用圖片和一部分css樣式代碼來(lái)裝飾本身的店鋪,電商設(shè)計(jì)應(yīng)運(yùn)而生。雖然帶著鐐銬舞蹈,但是有許多店鋪由于設(shè)計(jì)優(yōu)良而能帶動(dòng)販賣。那么電商設(shè)計(jì)師當(dāng)然就變得特別很是緊張了。
△ 淘寶網(wǎng)首頁(yè)
5. 游戲網(wǎng)站
游戲是一個(gè)偉大的產(chǎn)業(yè),許多公司的收入大半壁江山都來(lái)自游戲產(chǎn)業(yè)。那么除了游戲必要制作優(yōu)良之外,游戲的官網(wǎng)也必須設(shè)計(jì)優(yōu)美。不要忘掉,每一個(gè)玩家都必要訪問(wèn)你的游戲官網(wǎng)才能完成下載、充值、社交等緊張操作。國(guó)外游戲網(wǎng)站比如暴雪娛樂(lè)公司(https://www.blizzard.com)的官網(wǎng)設(shè)計(jì)得極其優(yōu)美,每個(gè)游戲的官網(wǎng)都是一個(gè)精品。比如魔獸世界、星際爭(zhēng)霸2等游戲官網(wǎng),頭部都是視覺(jué)沖擊特別很是強(qiáng)烈的動(dòng)畫。然后網(wǎng)站界面的元素都帶有游戲的風(fēng)格,仿佛登錄這個(gè)網(wǎng)站你就在游戲之中了。
△ 暴雪公司星際爭(zhēng)霸2游戲官網(wǎng)
6. 專題網(wǎng)頁(yè)
當(dāng)然不管是電商照舊門戶網(wǎng)站,在節(jié)日都會(huì)必要設(shè)計(jì)師來(lái)設(shè)計(jì)一些專題網(wǎng)頁(yè)增長(zhǎng)曝光。比如兒童節(jié)、情人節(jié)、母親節(jié)、圣誕節(jié)等節(jié)日每每會(huì)有促銷、專題報(bào)道等各式活動(dòng)。專題設(shè)計(jì)生命周期很短,上線后基本過(guò)了流量的那個(gè)點(diǎn)就基本沒(méi)用了。所以我們找不到前幾年的618或者雙11專題網(wǎng)頁(yè),由于過(guò)了特定的時(shí)期專題網(wǎng)頁(yè)就無(wú)人問(wèn)津了。所以在那么短的生命周期怎么捉住人的眼球?當(dāng)然不能使用當(dāng)代主義設(shè)計(jì)那種性冷淡風(fēng)格,而應(yīng)該在頭部盡量刺激用戶,用刺激對(duì)比強(qiáng)的色彩、復(fù)雜立體的造型、沖擊感強(qiáng)的筆墨吸引用戶來(lái)看。畢竟每小我可能只會(huì)看一次,不能放過(guò)這個(gè)機(jī)會(huì)。所以專題設(shè)計(jì)和產(chǎn)品設(shè)計(jì)正相反,專題設(shè)計(jì)必須刺激。
△ 極有家淘寶專題網(wǎng)頁(yè)
7. 視頻網(wǎng)站
視頻網(wǎng)站的訪問(wèn)量驚人,并且用戶的黏著度更高。許多視頻網(wǎng)站除了購(gòu)買版權(quán)之外還有許多 UGC 內(nèi)容。多說(shuō)幾句,UGC(User Generated Content)是指用戶產(chǎn)生的原創(chuàng)內(nèi)容,很早之前 web1.0時(shí)代用戶重要是單向欣賞網(wǎng)站,web2.0提出的 UGC 概念就是說(shuō)用戶不僅在欣賞也會(huì)上傳內(nèi)容。那么視頻網(wǎng)站為什么會(huì)火呢?首先要感謝寬帶的發(fā)展。在今年我們國(guó)內(nèi)點(diǎn)擊視頻就立馬可以播放了,而在幾年前必要等待幾分鐘才可以加載夠緩存。視頻網(wǎng)站的設(shè)計(jì)重要是要考慮應(yīng)用場(chǎng)景:視頻是用戶重要觀看的區(qū)域,所以視頻區(qū)域首先要充足大,另外顏色應(yīng)該以暗色為主,由于亮色會(huì)干擾到用戶觀看視頻。然后其他的區(qū)域圖片比例應(yīng)都為16:9的視頻尺寸,方便后期編輯在后臺(tái)添加。視頻網(wǎng)站的設(shè)計(jì)師同樣也可以分為產(chǎn)品組和運(yùn)營(yíng)組兩個(gè)種類來(lái)處理產(chǎn)品方向和運(yùn)營(yíng)方向的不同需求。
△ 騰訊視頻播放網(wǎng)頁(yè)
8. 移動(dòng)端H5
你肯定在同伙圈被《穿越將來(lái)來(lái)看你》、《淘寶造物節(jié)》等 H5 刷過(guò)屏吧?平時(shí)我們經(jīng)常被這種好玩兒的 H5 刷屏。其實(shí) H5 全稱是 HTML5,并不是僅僅指移動(dòng)端,而是頁(yè)面前端的開發(fā)語(yǔ)言,因?yàn)榧s定俗成的概念,我們?nèi)缃癯30咽謾C(jī)中的薈萃視頻、動(dòng)效、互動(dòng)的這種營(yíng)銷情勢(shì)稱為 H5。其實(shí)它的本質(zhì)是運(yùn)用頁(yè)面技術(shù)運(yùn)行在手機(jī)欣賞器或內(nèi)置欣賞器內(nèi)的頁(yè)面。隨著技術(shù)日月牙異的發(fā)展,H5 顯得越來(lái)越有傳播價(jià)值和份量。微信、欣賞器等平臺(tái)級(jí)產(chǎn)品在手機(jī)端中火爆促進(jìn)了寄托入口而傳播的 H5 的發(fā)展。假如設(shè)計(jì)出色,你的項(xiàng)目可能會(huì)在同伙圈產(chǎn)生病毒傳播的結(jié)果。
△ 使用前端語(yǔ)言編譯的適合手機(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)用背景音樂(lè)、視頻、鏈接等多媒體,讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外,其實(shí)還有一種體例可以無(wú)需代碼生成簡(jiǎn)易版的 H5,就是通過(guò) H5 工具生成。目前比較火的 H5 生成工具有:MAKA、iH5、兔展等,假如我們要本身生成而不是通過(guò)前端開發(fā),那么我們?cè)O(shè)計(jì)稿的尺寸必要設(shè)置為640x1008PX。這些工具較為簡(jiǎn)單,注冊(cè)后將 PSD 上傳即可對(duì)每個(gè)原件進(jìn)舉措效的設(shè)置了。但是假如必要復(fù)雜的動(dòng)效和交互,照舊必要前端工程師的配合。
△ H5項(xiàng)目的尺寸
9. 后臺(tái)網(wǎng)站
后臺(tái)網(wǎng)站又叫 Dashborad,中文翻譯為儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計(jì)信息。后臺(tái)網(wǎng)站是 To B 類型,那么首先的需求就是能快速地表現(xiàn)給操作者他必要掌握的數(shù)據(jù)??墒菙?shù)據(jù)特別很是枯燥,我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同體例來(lái)顯現(xiàn)這些繁瑣的數(shù)據(jù),這種圖形表達(dá)數(shù)據(jù)的體例也叫做數(shù)據(jù)可視化。后臺(tái)網(wǎng)站不必要分外可愛(ài)的插圖以及卡通形象,最緊張的是服從。所以假如您經(jīng)常處理 To C 類的需求,接到了 To B 類的產(chǎn)品需求時(shí)肯定要細(xì)致這一點(diǎn)。后臺(tái)網(wǎng)站由于必要更大的畫面,通常會(huì)使用全屏式排版,也就是撐滿整個(gè)畫布。那假如小屏怎么辦呢?前端會(huì)使用相對(duì)布局縮小各個(gè)元素,排版的位置也會(huì)用百分比來(lái)確定。
△ 微信公眾號(hào)后臺(tái)
10. CRM體系
CRM 即 Customer relationship management,翻譯過(guò)來(lái)是客戶管理管理體系。CRM 是企業(yè)對(duì)客戶進(jìn)行信息化管理的一種情勢(shì),用互聯(lián)網(wǎng)技術(shù)實(shí)現(xiàn)對(duì)客戶信息進(jìn)行收集、管理、分析,對(duì)企業(yè)的販賣、服務(wù)、售后進(jìn)行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。我們?cè)谠O(shè)計(jì)這種項(xiàng)目時(shí)肯定要將信息按所屬的邏輯關(guān)系分類,增強(qiáng)對(duì)比、對(duì)齊、重復(fù)、親密性的原則,使操作者在使用的時(shí)候感覺(jué)到便利。
△ Admin CRM dashboard by Divan Raj
11. SaaS
假如我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等體系的第三方公司,那么我們可能會(huì)老聽到 SaaS 這個(gè)詞。SaaS 是(Software-as-a-Service),即軟件就是服務(wù)。其他公司會(huì)來(lái)提供 SaaS 服務(wù)的公司定制體系,然后服務(wù)公司會(huì)為客戶提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。這里提到這個(gè)詞是防止設(shè)計(jì)師誤解它的定義。
12. 企業(yè)OA
企業(yè)OA,即(Office Automation),也就是辦公主動(dòng)化體系。在六七十年代就鼓起了一場(chǎng)使用電腦來(lái)改變傳統(tǒng)辦公體例的革命。在大型企業(yè)時(shí)常會(huì)面臨人員浩繁、地域廣袤、辦理公司事宜手續(xù)冗長(zhǎng)等題目,那么企業(yè)OA 可以很好地解決這方面的題目。通過(guò)企業(yè)OA 可以完成請(qǐng)假、調(diào)休、離職、查詢公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作。如許削減了許多窗口成本和員工的時(shí)間成本,加強(qiáng)了公司辦事服從?;ヂ?lián)網(wǎng)公司更是提供應(yīng)員工除了企業(yè)OA 之外的交流功能,比如建立員工 BBS 和留言板等,在上面大家可以對(duì)公司提出建媾和意見。企業(yè)OA 一樣平常出于安全和保密性的緣故原由,許多公司都更加樂(lè)意本身開發(fā)。設(shè)計(jì)師在設(shè)計(jì)此類項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和服從為重,讓操作者輕易可以找到在當(dāng)前網(wǎng)頁(yè)中最緊張的功能。
△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski
四、網(wǎng)站組成部分
了解了網(wǎng)站的不同類別后,讓我們來(lái)看看組成一個(gè)網(wǎng)站必要哪些部分吧。網(wǎng)站是由不同頁(yè)面通過(guò)超鏈接連接而成的,而不同頁(yè)面也是由不同模塊組成的。我們?cè)O(shè)計(jì)的是一個(gè)像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò),而不是一張海報(bào)。所以我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)要格外考慮從用戶角度出發(fā)看到的網(wǎng)站,而不能孤立地把它想象成一個(gè)平面作品。
1. 首頁(yè)
訪問(wèn)一個(gè)網(wǎng)站時(shí)第一個(gè)我們觸及的就是網(wǎng)站首頁(yè)。首頁(yè)別名叫作 Index 或者 Default,是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段,網(wǎng)站并不是富媒體,而是類似于一本書一樣:首頁(yè)類似書籍的目錄,必要查看哪個(gè)子頁(yè)面就點(diǎn)擊鏈接即可進(jìn)入。到了如今,網(wǎng)站首頁(yè)仍然是指導(dǎo)用戶進(jìn)入不同區(qū)域的一個(gè)「目錄」,這個(gè)目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來(lái)吸引點(diǎn)擊,露出的部分肯定要有一個(gè)「更多」按鈕來(lái)指引用戶找到二級(jí)網(wǎng)頁(yè)。
△ 首頁(yè)原型圖
2. 二級(jí)網(wǎng)頁(yè)
在邏輯上,首頁(yè)是一級(jí)網(wǎng)頁(yè),從首頁(yè)點(diǎn)擊進(jìn)入的網(wǎng)頁(yè)均為二級(jí)網(wǎng)頁(yè)。二級(jí)網(wǎng)頁(yè)之后還有三級(jí)網(wǎng)頁(yè)等級(jí)別。從點(diǎn)擊的概率上來(lái)說(shuō),天然是越靠前訪問(wèn)量越高,網(wǎng)頁(yè)層級(jí)越深越不容易被用戶找到。一樣平常網(wǎng)站有三級(jí)網(wǎng)頁(yè),就是為了避免用戶迷失。為此還會(huì)在網(wǎng)頁(yè)中加入面包屑導(dǎo)航。面包屑導(dǎo)航就是在網(wǎng)頁(yè)第一屏出現(xiàn)的諸如 首頁(yè) > 體育 > NBA頻道,如許的超鏈接結(jié)構(gòu),方便用戶理解本身在哪里,并且點(diǎn)擊可以回到其他網(wǎng)頁(yè)。
△ 二級(jí)網(wǎng)頁(yè)原型圖
3. 底層頁(yè)
在網(wǎng)站結(jié)構(gòu)中最后提供用戶實(shí)質(zhì)資訊的網(wǎng)頁(yè)就是底層頁(yè)。比如,在門戶網(wǎng)站首頁(yè)或二級(jí)網(wǎng)頁(yè)中我們點(diǎn)擊感愛(ài)好的題目后,在底層頁(yè)中才會(huì)看到悉數(shù)的資訊。待用戶閱讀完底層頁(yè)的信息后可以順勢(shì)在左側(cè)或右側(cè)的側(cè)欄探求用戶可能感愛(ài)好的相干內(nèi)容;在底側(cè)可以看到網(wǎng)友的評(píng)論;底側(cè)也會(huì)有分享按鈕、贊功能等;假如側(cè)欄用戶轉(zhuǎn)化率比較差,最底部還可以再次出現(xiàn)保舉相干資訊的功能。總之,在用戶閱讀完本身喜好的資訊后,要繼承吸引用戶順勢(shì)閱讀其他的資訊或者回到頻道。
△ 底層頁(yè)原型圖
4. 廣告
門戶類網(wǎng)站如何紅利?廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一樣平常由負(fù)責(zé)運(yùn)營(yíng)需求的設(shè)計(jì)師負(fù)責(zé),但是也可能由頻道設(shè)計(jì)師、產(chǎn)品側(cè)設(shè)計(jì)師來(lái)完成。在網(wǎng)站中常見到的廣告圖情勢(shì)就是 banner。banner 一樣平常尺寸偉大,在網(wǎng)站之中特別很是顯眼。因此也不肯定是外部廣告,也有內(nèi)部活動(dòng)、保舉資訊等。那么 banner 圖的尺寸有固定嗎?答案是沒(méi)有。Banner 的寬度有兩種,一種是滿屏(1920PX)、一種是基于安全距離的滿尺寸(1200px或1000px)。高度要細(xì)致了:一樣平常以1920x1080px為基準(zhǔn)的用戶屏幕,加上欣賞器自己與插件和底部工具條等距離,留給網(wǎng)站的一屏高度也許為900px,所以 banner 不可以做得很高,否則第一屏信息會(huì)表現(xiàn)得不夠。你可能會(huì)說(shuō),那就讓用戶往下拉啊。但是在網(wǎng)站的訪問(wèn)用戶之中,第二屏觸及到的用戶比第一屏?xí)僭S多。也就是許多用戶可能點(diǎn)擊網(wǎng)站后就會(huì)跳走或者關(guān)閉,那么第一屏的信息真的特別很是緊張了,可謂是寸土寸金。所以我們的 banner 不應(yīng)該占有過(guò)大的區(qū)域。比如站酷網(wǎng)的 Banner 區(qū)域?yàn)?380x350px。那么除了首頁(yè)偉大的 banner 廣告位,網(wǎng)站還有哪些廣告情勢(shì)呢?
對(duì)聯(lián)廣告
在門戶網(wǎng)站中我們經(jīng)常會(huì)看到網(wǎng)站左右安全區(qū)域之外會(huì)有個(gè)隨屏幕滾動(dòng)的像「對(duì)聯(lián)」一樣的廣告,通常 banner 也會(huì)是一個(gè)廣告內(nèi)容,并且居中會(huì)彈出由 HTML5 技術(shù)或 Flash 技術(shù)制作出來(lái)的彈窗廣告。這種廣告一樣平常組合售賣,也就是說(shuō)一進(jìn)網(wǎng)站你就會(huì)被周全轟炸,無(wú)法不細(xì)致到這個(gè)廣告的存在。這種廣告點(diǎn)擊進(jìn)入還有配合的專題頁(yè)等,可見必要設(shè)計(jì)師配合的地方特別很是多。
△ 對(duì)聯(lián)廣告情勢(shì)
信息流廣告
信息流廣告是埋在信息流中的一種廣告情勢(shì)。這種情勢(shì)行使了格式塔原理,用戶會(huì)不自發(fā)地閱讀起廣告的內(nèi)容,緣故原由是由于它的情勢(shì)和其他信息一樣。比如同伙圈、知乎、Facebook 都采用了信息流廣告,信息流廣告的結(jié)果特別很是強(qiáng),但是會(huì)捐軀肯定的用戶體驗(yàn)。信息流廣告的尺寸與信息流雷同。
△ 知乎APP中信息流中的廣告
以上從廣告的情勢(shì)上簡(jiǎn)單介紹了三種常見的網(wǎng)站廣告情勢(shì),假如我們?cè)陂喿x需求時(shí)看到了 cpm、pv 等單詞是什么意思呢?他們是廣告的收費(fèi)模式。cpm 是指按照廣告 pv 來(lái)收費(fèi),cps 是指按照用戶消耗收費(fèi),cpa 是指按照用戶注冊(cè)數(shù)收費(fèi),cpc 是指按照用戶點(diǎn)擊付費(fèi)。針對(duì)不同的收費(fèi)模式,在設(shè)計(jì)時(shí)也會(huì)采取不同策略來(lái)加強(qiáng)廣告必要達(dá)到的目的。
5. Footer
在網(wǎng)站詳細(xì)的網(wǎng)頁(yè)設(shè)計(jì)中,底部會(huì)有一個(gè)區(qū)域我們稱之為 footer。一樣平常 footer 的顏色都會(huì)比上邊內(nèi)容區(qū)域要暗,由于 footer 的信息在邏輯的級(jí)別上是次要的。footer 區(qū)域的重要功能是版權(quán)聲明、聯(lián)系體例、友誼鏈接、備案號(hào)等信息。在設(shè)計(jì)時(shí)肯定要降級(jí)處理,不要讓 footer 變得分外顯明。
五、技術(shù)原理
頁(yè)面設(shè)計(jì)師在做項(xiàng)目之前必須了解頁(yè)面背后的技術(shù)原理,技術(shù)決定了哪些設(shè)計(jì)和交互是可以實(shí)現(xiàn)的、哪些是不可以的。同時(shí)技術(shù)原理也決定了我們必要如何配合前端工程師來(lái)完成一些復(fù)雜的交互。其實(shí)在曩昔頁(yè)面前端工程師和設(shè)計(jì)師是一個(gè)崗位,就叫做頁(yè)面美工,這個(gè)職位必要在完成視覺(jué)設(shè)計(jì)后把網(wǎng)頁(yè)做成靜態(tài)頁(yè)面交給下面的環(huán)節(jié)。隨著分工越來(lái)越過(guò)細(xì),產(chǎn)生了頁(yè)面設(shè)計(jì)師和前端工程師兩個(gè)工種。但是頁(yè)面設(shè)計(jì)師不可以離開技術(shù)局限信口開河地去設(shè)計(jì)。下面讓我們來(lái)了解網(wǎng)站的基本存儲(chǔ)原理:在您的電腦 C盤保存一個(gè)叫 logo.jpg 的圖片,然后在欣賞器打開這個(gè)網(wǎng)址:C:\logo.jpg 你看到了什么?對(duì),就是這張圖片。這就是網(wǎng)站的原理:網(wǎng)站的資源和文件存儲(chǔ)在一個(gè)類似我們電腦的東西里,那就是服務(wù)器。我們通過(guò)域名來(lái)調(diào)取網(wǎng)中不同的網(wǎng)頁(yè)和文件,假如服務(wù)器關(guān)機(jī)了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過(guò)欣賞器訪問(wèn)網(wǎng)站時(shí),敲擊一個(gè)網(wǎng)址,這時(shí)這個(gè)域名會(huì)轉(zhuǎn)向一個(gè) IP地址,這個(gè) IP地址就是服務(wù)器所在的門牌號(hào)碼。找到了以后,我們的欣賞器會(huì)從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面,比如筆墨、邊框、表格等現(xiàn)實(shí)上都是代碼的情勢(shì)。欣賞器還會(huì)把網(wǎng)站中所必要的圖片、視頻等單獨(dú)下載到緩存里。當(dāng)我們通過(guò)表單輸入用戶名和密碼時(shí),我們的信息就會(huì)上傳到服務(wù)器中,服務(wù)器處理完(比如登錄成功這個(gè)信息)然后再下發(fā)給我們的欣賞器。所以平時(shí)我們?cè)L問(wèn)網(wǎng)站時(shí),我們的電腦和欣賞器要通過(guò)互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次「握手」。當(dāng)然老「握手」會(huì)造成加載速度變慢,于是我們聰明的欣賞器會(huì)把已經(jīng)下載過(guò)的資源緩存下來(lái),避免虛耗。這個(gè)機(jī)制就是「cookies」:欣賞器會(huì)主動(dòng)存儲(chǔ)你訪問(wèn)過(guò)的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。
△ 基于鼠標(biāo)的手勢(shì)操作
1. 基于鼠標(biāo)的交互
在不久的將來(lái),小我電腦可能通過(guò)多點(diǎn)觸控、語(yǔ)音交互等體例與我們交互,但目前網(wǎng)站設(shè)計(jì)最主流的交互體例照舊鼠標(biāo)和鍵盤。來(lái)讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧!我們對(duì)鼠標(biāo)的使用無(wú)外乎移動(dòng)、左鍵、右鍵、拖拽四種體例。我們?cè)诰W(wǎng)頁(yè)中的大部分操作都是通過(guò)鼠標(biāo)左鍵點(diǎn)擊完成的,所以頁(yè)面也是點(diǎn)擊的藝術(shù)。右鍵一樣平常會(huì)喚起右鍵菜單,但是許多網(wǎng)站與頁(yè)面應(yīng)用程序也會(huì)將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的重要是超鏈接與按鈕。那么讓我們來(lái)了解一下超鏈接的四個(gè)狀況吧(前端術(shù)語(yǔ)是:超鏈接標(biāo)簽的 CSS 四個(gè)偽類)。
△ 按鈕與筆墨的不同狀況
Link
Link 是指超鏈接正常的時(shí)候的狀況。一樣平常超鏈接必要與通俗筆墨區(qū)別開來(lái),比如換一種顏色或者加下劃線。當(dāng)然下劃線還有一個(gè)作用就是方便弱視群體區(qū)分超鏈接與通俗筆墨。Link 默認(rèn)都是藍(lán)色的(色值:#72ACE3),但是為了加強(qiáng)網(wǎng)站的品牌性我們也可以把鏈接顏色替換成另一種顏色。總之肯定要在情勢(shì)上與通俗筆墨產(chǎn)生差別才可以。
Visited
Visited 是超鏈接被點(diǎn)擊以后的狀況。比如新浪網(wǎng)消息特別很是多,所以點(diǎn)擊完一個(gè)消息后用戶可能不知道本身看過(guò)沒(méi)看過(guò)這條消息了。所以新浪網(wǎng)使用了 Visited 屬性,點(diǎn)擊后的消息顏色就不一樣了,方便用戶區(qū)別本身哪些消息還沒(méi)有欣賞。
Hover
Hover 是超鏈接鼠標(biāo)經(jīng)過(guò)狀況。這個(gè)狀況是連接中最為緊張的狀況。其實(shí)不只超鏈接,按鈕和圖片以及視頻等統(tǒng)統(tǒng)可交互的元素都應(yīng)該設(shè)置 Hover 屬性,也就是鼠標(biāo)懸停時(shí)的狀況。一樣平常來(lái)說(shuō)變換顏色和放大是 Hover 狀況的基本體例。
Active
Active 是指超鏈接的激活狀況。點(diǎn)擊后超鏈接可以通過(guò) CSS 加載一個(gè)狀況。
同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點(diǎn)擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計(jì)成不同的樣式,方便用戶通過(guò)鼠標(biāo)感知這個(gè)物體是被我按下去的,這種給用戶的暗示我們也叫做「點(diǎn)擊感」。當(dāng)然按鈕會(huì)和鏈接稍有不同,按鈕除了具備正常和鼠標(biāo)懸停等狀況,還有一種狀況叫不可點(diǎn)擊。這種狀況將按鈕置灰,提醒用戶這個(gè)功能由于條件不知足不可以點(diǎn)擊。好了,您可以舉出幾個(gè)點(diǎn)擊感 Web 設(shè)計(jì)的例子嗎?
2. 靜態(tài)頁(yè)面
了解完基本技術(shù)背景、鼠標(biāo)的交互之后,讓我們來(lái)聊點(diǎn)真格的。我們一樣平??吹降捻?yè)面都是靜態(tài)頁(yè)面。靜態(tài)頁(yè)面是由 HTML 編譯的,我們?cè)诜?wù)器上存儲(chǔ)的頁(yè)面代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language,即超文本標(biāo)記語(yǔ)言?!赋谋尽故钦f(shuō)這種語(yǔ)言內(nèi)可以包含筆墨元素以及調(diào)用圖片、鏈接、音樂(lè)等非筆墨元素。HTML語(yǔ)言對(duì)于沒(méi)有編程的人來(lái)說(shuō)可能會(huì)很頭疼,但是它已經(jīng)是所有編程代碼中最簡(jiǎn)單的一種了。別嚴(yán)重,你可以把它當(dāng)做摩爾代碼,它是服務(wù)器和欣賞器之間的密語(yǔ),欣賞器會(huì)將這些密語(yǔ)翻譯成我們能看懂的色彩和鏈接等。那么假如我們用 HTML語(yǔ)言寫一段筆墨會(huì)是什么樣呢?
△ 模仿代碼編譯過(guò)程
沒(méi)錯(cuò),代碼就是這么一點(diǎn)一點(diǎn)編起來(lái)的。在任何網(wǎng)站空白處右鍵點(diǎn)擊查看頁(yè)面源代碼你就可以看到頁(yè)面的 HTML 代碼啦。HTML 這種代碼是由一個(gè)國(guó)際組織——W3C 發(fā)布和維護(hù)的。W3C 創(chuàng)建于1994年,是網(wǎng)站國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C 已經(jīng)發(fā)布了 HTML 的諸多版本,其中影響最深遠(yuǎn)的是 HTML4版本。而 HTML5 簡(jiǎn)稱 H5 則可以說(shuō)是劃時(shí)代的版本了。H5 的標(biāo)簽更加接近當(dāng)代,并且自己可以播放視頻,這就可以鐫汰掉 Flash 插件了。(Flash插件帶來(lái)了比如體系漏洞、加載速度過(guò)慢等題目)同時(shí) H5 對(duì)多平臺(tái)支持很好,所以適應(yīng)移動(dòng)端為王的當(dāng)今時(shí)代。H5 甚至還可以變成游戲、Webapp(在頁(yè)面上如本地程序一樣工作的網(wǎng)站,比如藍(lán)湖等)、多媒體等多種情勢(shì)??墒且?yàn)?IE欣賞器這類不支持 HTML5 結(jié)果的欣賞器在用戶中占比還很高,所以造成了 HTML5 發(fā)展的制約。欣賞器可以理解為一個(gè)代碼閱讀器,因?yàn)樗鼘?duì) HTML5 代碼的翻譯工作不好就會(huì)造成所謂「兼容性」的題目。比如 HTML5 中可以通過(guò)代碼給一個(gè) DIV添加投影,那么在某些欣賞器中就表現(xiàn)不了這個(gè)結(jié)果。不難理解為什么有程序員會(huì)穿著 i hate IE 字樣的T恤了吧。在每次做完一個(gè)網(wǎng)站項(xiàng)目時(shí),測(cè)試工程師都會(huì)用 Chrome、Safari、Firefox、Opera、IE、Edge 等多個(gè)欣賞器測(cè)試網(wǎng)站的兼容性,這時(shí)通常讓前端工程師特別很是頭疼。由于代碼動(dòng)一發(fā)牽全身,經(jīng)常這個(gè)好了那個(gè)又不行了。但是針對(duì)這種題目也有一些解決方案,比如削減對(duì)用戶占比不高欣賞器的支持、對(duì)不好搞的欣賞器單獨(dú)加載特定的適配代碼等。道高一尺魔高一丈呀。
3. 其他前端語(yǔ)言
有了 HTML 這個(gè)骨架,加上圖片和多媒體后,網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大:所有效戶都必要重復(fù)地來(lái)服務(wù)器下載代碼和圖片等資源進(jìn)行「握手」,而且許多 HTML 代碼都是重復(fù)的,造成了資源的虛耗。比如,假如我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的,那么每個(gè)網(wǎng)頁(yè)都會(huì)啰嗦這幾句代碼。這個(gè)題目沒(méi)多久就被一種極新的代碼解決了:CSS技術(shù)。CSS 是層疊樣式表的意思:我們可以理解為如今把網(wǎng)站的樣式(顏色、大小、位置等樣式信息)也就是 CSS 和網(wǎng)站的內(nèi)容(筆墨、圖片、鏈接等內(nèi)容信息)也就是 HTML 完全分開,并且一個(gè)網(wǎng)站可以下載一份 CSS 然后不同網(wǎng)頁(yè)都調(diào)取這份 CSS 的緩存,那么就節(jié)省了服務(wù)器資源。另外,因?yàn)榫W(wǎng)站必要一些交互結(jié)果,比如點(diǎn)擊殊效和菜單殊效等,那么必要前端工程師使用 Javas cript 代碼來(lái)配合。Javas cript 是一種比較短小精悍的語(yǔ)言,構(gòu)建一些基于欣賞器的殊效特別很是順手。所以目前主流的網(wǎng)站配置是 HTML5+CSS3+JS 代碼的組合,當(dāng)然為了兼容那些低端欣賞器也可能使用 HTML4+CSS+JS 的套餐。這取決于我們的重要目標(biāo)用戶群在使用什么樣的欣賞器。當(dāng)然,我講這些并不是要求您去學(xué)習(xí) HTML、CSS、JS 代碼然后進(jìn)行前端開發(fā),由于在當(dāng)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些重要是要理解前端工程師的工作以便更好地配合他們。
△ 主流情勢(shì):HTML + CSS + JS
4. 動(dòng)態(tài)頁(yè)面
了解完靜態(tài)頁(yè)面還不夠,如今讓我們談?wù)劸W(wǎng)站如何動(dòng)起來(lái)。動(dòng)態(tài)頁(yè)面不是說(shuō)它有狂拽酷炫的動(dòng)畫,而是動(dòng)態(tài)頁(yè)面會(huì)隨著時(shí)間、內(nèi)容和數(shù)據(jù)庫(kù)的調(diào)用而產(chǎn)生動(dòng)態(tài)的頁(yè)面。比現(xiàn)在天看到的消息網(wǎng)站和昨天的消息一定不一樣了,可是網(wǎng)站首頁(yè)的 HTML 代碼并不必要人去手工修改,而是讓小編通過(guò)后臺(tái)錄入消息、上傳圖片就好了。小編上傳后臺(tái)的過(guò)程就會(huì)輸入數(shù)據(jù)庫(kù),而動(dòng)態(tài)頁(yè)面又是調(diào)取數(shù)據(jù)庫(kù)內(nèi)容表現(xiàn)給用戶的一種情勢(shì)。動(dòng)態(tài)頁(yè)面會(huì)隨時(shí)調(diào)取數(shù)據(jù)庫(kù)中的信息給用戶,而對(duì)用戶來(lái)說(shuō)好像靜態(tài)頁(yè)面和動(dòng)態(tài)頁(yè)面長(zhǎng)得都是一樣的。那么最傻瓜的判斷體例是看網(wǎng)址結(jié)尾,靜態(tài)頁(yè)面結(jié)尾是 html 或 htm,而動(dòng)態(tài)頁(yè)面因?yàn)槭褂昧烁呒?jí)頁(yè)面編程技術(shù),結(jié)尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動(dòng)態(tài)頁(yè)面的語(yǔ)言,當(dāng)然有的時(shí)候?yàn)榱俗尵W(wǎng)站服從提拔也會(huì)使用偽靜態(tài)結(jié)構(gòu),結(jié)尾和靜態(tài)頁(yè)面就同等了,但是現(xiàn)實(shí)上是會(huì)在用戶訪問(wèn)前調(diào)取一遍數(shù)據(jù)庫(kù)的。同時(shí)動(dòng)態(tài)頁(yè)面的網(wǎng)址會(huì)有一個(gè)特點(diǎn),含有?符號(hào)。動(dòng)態(tài)語(yǔ)言目前最火的是 Php,較早而如今比較少見的是 Asp、Cgi,最安全的是 Jsp,所以許多銀行采用 JSP 編譯。了解完這些,我們基本就弄清楚網(wǎng)站的運(yùn)行原理了。
△ 主流后臺(tái)編譯語(yǔ)言:PHP ASP JSP CGI
5. 雪碧圖
我們經(jīng)常看到網(wǎng)站中會(huì)有動(dòng)畫,那么動(dòng)畫實(shí)現(xiàn)的原理一樣平常有如下這么幾個(gè):第一,HTML5 視頻播放;這種體例瑕玷就是不兼容低端欣賞器。第二,F(xiàn)lash Player 播放器播放;這種體例的瑕玷是Flash安全性很低而且服從慢。第三,動(dòng)畫使用 Gif 格式;這種體例的題目是動(dòng)畫長(zhǎng)度不夠,并且這個(gè)格式僅僅支持透明和不透明兩級(jí)屬性。那么像 Google 首頁(yè) Doodle 的動(dòng)畫是怎么實(shí)現(xiàn)的呢?這種技術(shù)叫做:雪碧圖。CSS 雪碧即 CSS Sprite,也有人叫 CSS 精靈,它是一種 CSS 圖像合并技術(shù)。它自己調(diào)用的圖片是支持多級(jí)透明的 PNG 格式,然后把動(dòng)畫并排排列出來(lái)。比如一個(gè)卡通人物的動(dòng)畫每幀寬度是100px,那么就把它的動(dòng)作1 動(dòng)作2 動(dòng)作3 動(dòng)作4 并排放在一張寬度是400px的 PNG 圖片里。然子女碼在一個(gè)100px的寬度框子內(nèi)背景圖調(diào)用這張 png,我們就看到了動(dòng)作1,然后過(guò)一秒鐘代碼會(huì)靜靜移動(dòng)100px我們就看到了動(dòng)作2。因?yàn)樗俣群芸炀妥屛覀兛吹搅搜永m(xù)動(dòng)畫。雪碧圖也有自身的瑕玷:假如幀數(shù)太多,會(huì)消費(fèi)很大的內(nèi)存。所以幀數(shù)肯定要控制少。假如你的動(dòng)作設(shè)計(jì)了12幀,那么我建議你可以試試將2、4、6、8、10刪除,保留一半的動(dòng)作。
△ 雪碧圖
6. 視差滾動(dòng)
視差滾動(dòng)是一種運(yùn)動(dòng)速率不一樣的設(shè)計(jì)結(jié)果,用以實(shí)現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運(yùn)用了視差滾動(dòng)結(jié)果。其實(shí)現(xiàn)原理是,代碼判定頁(yè)面滾動(dòng),滾動(dòng)時(shí)網(wǎng)頁(yè)中三層圖片運(yùn)動(dòng)速率和位移距離不同。如許給人造成的視覺(jué)體驗(yàn)仿佛是我們?cè)谖锢韺?shí)際中看到的空間感一樣。視差滾動(dòng)已經(jīng)不是什么高新技術(shù),假如你的網(wǎng)站比較適合視差滾動(dòng),請(qǐng)勇敢設(shè)計(jì)并和前端工程師提需求,信賴前端工程師可以知足你的要求。我們必要預(yù)備的就是運(yùn)動(dòng)速率不同的分層靜態(tài) PSD 文件。
△ 運(yùn)用了視差滾動(dòng)結(jié)果的密爾沃基警察局官網(wǎng)(milwaukeepolicenews.com)
六、頁(yè)面設(shè)計(jì)規(guī)范
終于,經(jīng)歷過(guò)長(zhǎng)篇大論網(wǎng)站的原理與組成部分后,我們要談?wù)劸W(wǎng)站設(shè)計(jì)的規(guī)范了。網(wǎng)站設(shè)計(jì)并無(wú)詳細(xì)平臺(tái)限制的風(fēng)格,也沒(méi)有必須要設(shè)計(jì)的體系級(jí)導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計(jì)更加天真,然而由于太天真也會(huì)讓我們的設(shè)計(jì)師無(wú)從動(dòng)手。那么接下來(lái)我將介紹網(wǎng)站設(shè)計(jì)的規(guī)范,在您工作的時(shí)候可以參考。細(xì)致,在設(shè)計(jì)之前肯定要和前端溝通我們使用的尺寸、字體、交互等,如許有助于后期不會(huì)有誤會(huì)。
1. 畫板尺寸
由于頁(yè)面尺寸與用戶屏幕相干,而用戶屏幕的種類難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能重要顧及主流用戶的分辨率,其他分辨率用適配的體例來(lái)解決。在最新版 Photoshop 網(wǎng)站 Web 預(yù)設(shè)尺寸給了我們一些啟示:常見尺寸(1366x768px)、大頁(yè)面(1920x1080px)、最小尺寸(1024x768px)、Macbook Pro13 (2560x1600px)、MacBook Pro15(2880x1800px)、iMac 27(2560x1440px)等。這些是主流尺寸,而我們假如做網(wǎng)站時(shí)建議按主流的分辨率1920x1080px來(lái)設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px,每個(gè)屏幕的高度約為900px。為什么是900px呢?由于1080還要減去欣賞器頭部和底部高度,大約就是900px了。內(nèi)容安全區(qū)域?yàn)?200px (或1000px / 1400px)。以這個(gè)尺寸來(lái)設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。當(dāng)然在設(shè)計(jì)頁(yè)面前必要知會(huì)前端設(shè)計(jì)尺寸,由于對(duì)于適配的體例和后續(xù)配合他們更有談話權(quán)。
△ 網(wǎng)站的尺寸規(guī)范
2. 筆墨規(guī)范
我們?nèi)缃穸贾懒司W(wǎng)站上面的筆墨是通過(guò)前端工程師重新寫在代碼里的。那這種筆墨在欣賞器上的渲染與體系和欣賞器有關(guān)。比如在蘋果電腦上看到的筆墨結(jié)果和 Windows 體系電腦上看到的筆墨結(jié)果就有所不同:蘋果會(huì)對(duì)筆墨進(jìn)行渲染,而 windows 的筆墨幾乎充滿了像素顆粒。按照用戶占比來(lái)說(shuō)無(wú)疑 Windows 的用戶是主流,所以盡管我們可能使用蘋果電腦設(shè)計(jì)頁(yè)面,但是設(shè)計(jì)出來(lái)的頁(yè)面結(jié)果也應(yīng)該和 Windows 表現(xiàn)同等。否則我們?cè)O(shè)計(jì)完漂亮的設(shè)計(jì)稿,程序員無(wú)法還原成我們?cè)O(shè)計(jì)的樣子。另外,字號(hào)的大小也特別很是緊張。頁(yè)面的表現(xiàn)區(qū)域決定了筆墨不可以過(guò)大,在網(wǎng)站設(shè)計(jì)中我們的筆墨大小一樣平常來(lái)說(shuō)是12-20像素。為什么不能比12px更?。坑捎诩偃绫?2像素更小的中文無(wú)法放得下復(fù)雜的筆畫了。而且奇數(shù)的筆墨體現(xiàn)和適配都不好做,也就是說(shuō)我們必須使用偶數(shù)的字號(hào)來(lái)設(shè)計(jì)。那么總結(jié)一下:筆墨使用宋體、大小為12px、渲染體例選擇無(wú)。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染體例選擇 Windows Lcd 或銳利。另外,英文和數(shù)字需使用 Arial字體,渲染體例選擇無(wú)。
△ 網(wǎng)站字體規(guī)范
3. 圖片規(guī)范
網(wǎng)站設(shè)計(jì)中的圖片常用4(寬):3(高)、16(寬):9(高)、1:1等比例。詳細(xì)圖片大小沒(méi)有固定要求,但整數(shù)和偶數(shù)為佳。重要是考慮到一些適配的題目。作為內(nèi)容出現(xiàn)的圖片肯定必要有介紹信息和排序信息。圖片的格式有許多,比如支持多級(jí)透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動(dòng)畫的 gif 格式等。在保證圖像清晰度地情況下文件大小越小越好,如何讓頁(yè)面使用的圖片更小呢?
第一種方法,給程序員切圖的時(shí)候我們可以適當(dāng)縮小圖片文件的大小。比如 Photoshop 中存儲(chǔ)為 web 所用格式就會(huì)比快速存儲(chǔ)文件更小。
第二種方法,可以嘗試使用例如 Tinypng、智圖等工具再次壓縮圖片。這些工具會(huì)把圖片中的多余信息刪除并且壓縮,而圖像質(zhì)量不受損失。
第三種方法,Google 研發(fā)了一種 Webp 格式,它的圖片壓縮體積大約只有 JPEG 的2/3,能節(jié)省大量的服務(wù)器寬帶資源。比如 Facebook、Ebay 還有我們?cè)O(shè)計(jì)師常用的站酷圖片存儲(chǔ)都是使用了 Webp 圖片格式。
第四種方法,欣賞器和服務(wù)器握手時(shí)必要下載頁(yè)面所調(diào)用的圖片資源,那么假如一個(gè)網(wǎng)站有一百?gòu)垐D片的話,欣賞器和服務(wù)器就得握一百次。第一會(huì)耗費(fèi)服務(wù)器資源,第二訪問(wèn)速度就會(huì)慢一些。所曩昔端工程師們有一種做法,就是把頁(yè)面中所使用的圖片拼成一大張 png。然后每個(gè)調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點(diǎn)兒,表現(xiàn)的那塊區(qū)域移動(dòng)到一大張圖片中所必要的那個(gè)圖像。
△ 在線壓縮工具Tinypng網(wǎng)站
4. 按鈕
按鈕的風(fēng)格在曩昔的十幾年發(fā)生了很大的轉(zhuǎn)變,由一開始的「斜面與浮雕」風(fēng)格過(guò)渡到后面的「擬物風(fēng)格」,如今更流行的是扁平風(fēng)格。假如按鈕在一張圖片中,為了不影響圖片的美觀性,會(huì)去掉添補(bǔ)只保留邊框,這種設(shè)計(jì)體例叫做幽靈按鈕。細(xì)致在設(shè)計(jì)按鈕時(shí)記得同時(shí)設(shè)計(jì)好按鈕的鼠標(biāo)懸停、按下狀況。
△ 不同時(shí)代下不同的按鈕風(fēng)格
5. 表單
在網(wǎng)站設(shè)計(jì)中我們經(jīng)常必要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是體系級(jí)的控件,一樣平常是直接調(diào)用體系設(shè)計(jì)的。但是體系設(shè)計(jì)偶然不能知足我們的要求:體系內(nèi)置的表單高度不夠,點(diǎn)擊起來(lái)不恬逸;不吻合網(wǎng)站團(tuán)體設(shè)計(jì)的品牌感等。那么我們可以通過(guò) CSS 給這些表單增長(zhǎng)樣式,包括顏色、大小、內(nèi)外邊距等。所以我們碰到涉及到表單的需求時(shí)也可以進(jìn)行自定義設(shè)計(jì)。
△ 表單不同風(fēng)格的設(shè)計(jì) UIDE Kit by Mateusz Dembek
6. 柵格
我們把團(tuán)體寬度定義為 W。然后整個(gè)寬度分成多個(gè)等分單元 A。每個(gè)單元 A 中有元素 a 和間距 i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格,這就要看我們內(nèi)容排版的疏密程度了。之后,我們將過(guò)多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間;其他元素都須老忠實(shí)實(shí)呆在本身的柵格內(nèi),如許就完成了一個(gè)布局特別很是科學(xué)的設(shè)計(jì)了。 比如:
柵格體系詳細(xì)有以下上風(fēng):能大大進(jìn)步頁(yè)面的規(guī)范性。在柵格體系下,網(wǎng)頁(yè)中所有組件的尺寸都是有規(guī)律的。另外,基于柵格進(jìn)行設(shè)計(jì),可以讓整個(gè)網(wǎng)站各個(gè)網(wǎng)頁(yè)的布局保持同等。這能增長(zhǎng)網(wǎng)頁(yè)的相似度,提拔用戶體驗(yàn)。
△ 網(wǎng)站的柵格化會(huì)使網(wǎng)站看起來(lái)更有秩序感
7. 適配Retina屏幕
2012年蘋果發(fā)布了 Retina Macbook Pro,Retina 屏幕的電腦占據(jù)量越來(lái)越高了。Retina 屏幕簡(jiǎn)單地說(shuō)就是屏幕密度是傳統(tǒng)屏幕的兩倍,擁有更大地清晰度。甚至可以知足我們視網(wǎng)膜最高的識(shí)別度,所以也叫視網(wǎng)膜屏幕。這種屏幕下我們?cè)O(shè)計(jì)的安全距離大約為1000像素的網(wǎng)站就顯得特別很是粗糙了。所以假如我們?nèi)缃?Retina 屏幕下表現(xiàn)一個(gè)400X300PX的區(qū)域,現(xiàn)實(shí)上我們必要提供應(yīng)前端一張800X600PX的切圖才行,由于 Retina 屏幕一個(gè)點(diǎn)頂曩昔兩個(gè)像素。那么我們的用戶是視網(wǎng)膜屏占比更多的用戶,比如設(shè)計(jì)師群體,那怎么兼顧高清屏幕和通俗屏幕呢?
首先我們必要以視網(wǎng)膜屏幕大小完成設(shè)計(jì)稿,建議是傳統(tǒng)設(shè)計(jì)稿的兩倍。之后切出兩套切圖(非 Retina 屏幕用戶假如也加載雙倍大小的資源會(huì)很慢),通俗的切圖命名為如logo.jpg,Retina切圖命名為logo@2x.jpg。前端用代碼來(lái)識(shí)別,假如屏幕是 Retina 就加載雙倍尺寸,不是則加載通俗尺寸。前端可以使用 Retina.js(https://retinajs.com/)提供的技術(shù)進(jìn)行識(shí)別。
8. 自適應(yīng)與相應(yīng)式網(wǎng)站
我們看到有些網(wǎng)站使用電腦端或者手機(jī)端甚至 iPad 去欣賞時(shí)體驗(yàn)都特別很是好。這就必要我們?yōu)榱擞脩趔w驗(yàn)而進(jìn)行網(wǎng)站的自適應(yīng)或相應(yīng)式布局了。相應(yīng)式與自適應(yīng)的原理是相似的,都是通過(guò)代碼檢測(cè)設(shè)備屏幕寬度,根據(jù)不同的設(shè)備加載不同的 css。
自適應(yīng)網(wǎng)站
自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是同等的,但是設(shè)計(jì)稿必要考慮屏幕變小時(shí)的轉(zhuǎn)變體例。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距,那么假如寬度縮小成900時(shí)必要如何轉(zhuǎn)變,這就是自適應(yīng)布局。比如站酷網(wǎng)、Dribbble 等網(wǎng)站都采用了自適應(yīng)布局。
相應(yīng)式網(wǎng)站
相應(yīng)式網(wǎng)站則必要設(shè)計(jì)不同版本的設(shè)計(jì)稿,然后根據(jù)不同的設(shè)備提供不同的 CSS 樣式。比如判定你設(shè)備的寬度是750px,那么網(wǎng)站就知道你使用了手機(jī)來(lái)訪問(wèn),就會(huì)給你導(dǎo)入一份手機(jī)才有的樣式;假如是電腦的寬度就給你導(dǎo)入電腦的 CSS 樣式。對(duì)于設(shè)計(jì)師來(lái)說(shuō),自適應(yīng)必要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版;相應(yīng)式則必要設(shè)計(jì)電腦、平板、手機(jī)等至少三套設(shè)計(jì)稿(但這三套設(shè)計(jì)稿的內(nèi)容是同等的)??傊赃m應(yīng)和相應(yīng)式都是網(wǎng)站為了用戶體驗(yàn)所適應(yīng)欣賞設(shè)備而做出的努力。
適配的規(guī)范
手機(jī)方面:適配手機(jī)網(wǎng)頁(yè)時(shí),我們一樣平常以 iPhone 為畫布標(biāo)準(zhǔn)。緣故原由是 iPhone 相對(duì)表現(xiàn)比較清晰,并且要求較高。而且用戶占據(jù)量也很高。在適配時(shí)我們一樣平常以750x1334px尺寸為主,然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī) APP 常常使用的漢堡包+抽屜式導(dǎo)航的情勢(shì)。同時(shí)網(wǎng)站里的按鈕也必要變?yōu)槭謾C(jī) APP 中我們看到的左右?guī)缀鯘M屏的按鈕,并且每個(gè)按鈕要大于88PX,方便手指的點(diǎn)擊。字體方面,我們要把網(wǎng)站的字體悉數(shù)改為蘋方字體,并且字號(hào)設(shè)置為24PX以上,渲染體例設(shè)置成銳利。英文則必要使用 SF-UI 代替。也就是將網(wǎng)站改變成一個(gè)類 APP 的手機(jī)頁(yè)面,如許才可以保證手機(jī)用戶體驗(yàn)優(yōu)秀。假如用戶使用安卓手機(jī),那么前端代碼則會(huì)基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來(lái)適應(yīng)安卓屏幕。
iPad:iPad的尺寸為1024×768、2048x1536px等,無(wú)論怎么變基本與電腦屏幕尺寸類似。所以在 iPad 上欣賞頁(yè)面是基本舒適的。因此,許多網(wǎng)站并沒(méi)有專門為 iPad 做適配,假如我們盼望 iPad 用戶用的更爽,可以從筆墨大?。?4PX以上)、按鈕大?。?8PX左右以及以上)、交互情勢(shì)(抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動(dòng))等體例入手。
△ 不同設(shè)備的細(xì)致事項(xiàng)
總結(jié)
無(wú)論您面對(duì)的項(xiàng)目是 To C 的照舊 To B 的網(wǎng)站產(chǎn)品,我們都應(yīng)該首先確立設(shè)計(jì)風(fēng)格 > 探求設(shè)計(jì)素材 > 建立情緒板 > 完成視覺(jué)稿 > 切圖標(biāo)注 > 建立視覺(jué)規(guī)范 > 進(jìn)行項(xiàng)目走查。
假如設(shè)計(jì)一樣平常網(wǎng)站的網(wǎng)頁(yè),可以按照1920 X 1080px尺寸設(shè)計(jì)。每屏高度900px,字體使用宋體12px、無(wú)和微軟雅黑 14-20、Windows LCD。Banner 盡量滿屏,但是圖片必要按照4:3或16:9等比例來(lái)設(shè)計(jì)。做網(wǎng)站時(shí)可以建立柵格以更好地進(jìn)行自適應(yīng)和相應(yīng)式布局,我們也要為超鏈接和按鈕設(shè)計(jì)不同的響應(yīng)鼠標(biāo)的狀況;另外我們也可以多多嘗試在網(wǎng)站設(shè)計(jì)中加入視差滾動(dòng)、雪碧圖動(dòng)畫等好玩的交互。
假如設(shè)計(jì)手機(jī)端的網(wǎng)頁(yè),可以按照750X1334PX尺寸設(shè)計(jì)。字體使用蘋方24PX以上、銳利。英筆墨體使用SF UI。按鈕和點(diǎn)擊區(qū)域必要大于88PX方便手輔導(dǎo)擊。并且頭部必要預(yù)留出微信或欣賞器的導(dǎo)航區(qū)域。
迎接關(guān)注作者的微信公眾號(hào):「西見」
圖片素材作者:Roy Hainer
本文地址:http://m.likemindfilms.com/tutorial/di4047.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏