272018-7

視覺設(shè)計(jì)師如何做競(jìng)品分析？來看這份超全面的指南！

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

作為用戶體驗(yàn)設(shè)計(jì)師，競(jìng)品分析也是必備技能之一，通過分析市場(chǎng)上的競(jìng)品，能夠讓設(shè)計(jì)師在短時(shí)間內(nèi)快速了解自己所做產(chǎn)品在整個(gè)市場(chǎng)中的定位，對(duì)于視覺設(shè)計(jì)師來說，有一個(gè)系統(tǒng)的競(jìng)品分析方法，能夠全面了解競(jìng)品的品牌、交互、視覺、市場(chǎng)等方面。同時(shí)競(jìng)品分析也為設(shè)計(jì)師提供一份可量化的評(píng)價(jià)標(biāo)準(zhǔn)，避免過于主觀的看法，幫助設(shè)計(jì)師用專業(yè)水平說服團(tuán)隊(duì)伙伴，提升設(shè)計(jì)師的專業(yè)度，明確設(shè)計(jì)目標(biāo)，優(yōu)化設(shè)計(jì)產(chǎn)品。

那么今天我們就來聊聊從設(shè)計(jì)師角度如何來做競(jìng)品分析。

一、競(jìng)品分析的目的

1. 戰(zhàn)略層

目標(biāo)：了解市場(chǎng)情況和商業(yè)目標(biāo)，分析產(chǎn)品的定位，明確自身的優(yōu)勢(shì)，以及與其他同類產(chǎn)品差異化的競(jìng)爭(zhēng)點(diǎn)。

在這個(gè)層面上，身為視覺設(shè)計(jì)師，建議在做這部分的內(nèi)容分析時(shí)，多和產(chǎn)品經(jīng)理溝通，了解他們?nèi)绾味ㄎ桓?jìng)品。結(jié)合觀察和平時(shí)的使用體驗(yàn)，來得出屬于自己的結(jié)論。

2. 用戶層

目標(biāo)：了解用戶是誰，為什么使用產(chǎn)品，使用的場(chǎng)景是什么，是否存在痛點(diǎn)，提供用戶想要的產(chǎn)品，了解用戶想要的產(chǎn)品。

當(dāng)前語境下，可以通過如下途徑，從用戶的語言、行為去了解他們真實(shí)的需求：

使用用研團(tuán)隊(duì)的調(diào)研產(chǎn)出
網(wǎng)上搜索用戶反饋（appstore評(píng)論/官網(wǎng)官微/論壇等）
直接的用戶研究（方法包括問卷調(diào)查、可用性測(cè)試、用戶訪談、眼動(dòng)測(cè)試、焦點(diǎn)小組、用戶畫像、數(shù)據(jù)分析等）

3. 實(shí)踐層

目標(biāo)：得到有效的驗(yàn)證、有用的總結(jié)，找到能夠啟發(fā)設(shè)計(jì)的亮點(diǎn)，促進(jìn)團(tuán)隊(duì)達(dá)到一致的共識(shí)。

視覺設(shè)計(jì)大部分時(shí)候處于產(chǎn)品設(shè)計(jì)環(huán)節(jié)的中下游，更多的是在交互產(chǎn)出的基礎(chǔ)上進(jìn)行設(shè)計(jì)，具體方案也是盡量遵照現(xiàn)有產(chǎn)品規(guī)范進(jìn)行產(chǎn)出。當(dāng)缺少視覺設(shè)計(jì)思考和理論沉淀、不明確與其他競(jìng)爭(zhēng)對(duì)手的差別時(shí)，很容易碰到能力瓶頸。通過競(jìng)品分析，可以以更加全局的視角審視競(jìng)品的方案和自己的產(chǎn)出間的差距，從而產(chǎn)出更的設(shè)計(jì)，提升設(shè)計(jì)思考力，提高產(chǎn)品核心競(jìng)爭(zhēng)力。

二、競(jìng)品分析的原則

原則1：呈現(xiàn)方式

突出要分析的維度上，我們產(chǎn)品所處的位置——排行如何、是好是壞，化主觀為客觀。必要時(shí)可以通過象限圖、表格排序、樹狀圖等方式呈現(xiàn)，可以為我們的分析提升可信度和可閱讀性。

原則2：呈現(xiàn)選擇

數(shù)量上不需要大而全的覆蓋所有競(jìng)品，重點(diǎn)選擇市場(chǎng)上優(yōu)秀的競(jìng)品進(jìn)行分析，就可達(dá)到我們的設(shè)計(jì)分析目的。

原則3：呈現(xiàn)內(nèi)容

做競(jìng)品分析時(shí)容易將產(chǎn)品和企業(yè)文化、產(chǎn)品商業(yè)戰(zhàn)略等信息剝離開，這樣就很容易忽視這其中的相關(guān)性，分析的時(shí)候，就有可能導(dǎo)致片面或者出現(xiàn)誤差。

三、競(jìng)品的選擇

1. 直接競(jìng)品

跟所做產(chǎn)品有直接競(jìng)爭(zhēng)關(guān)系，使用場(chǎng)景和用戶群體一致的產(chǎn)品。

2. 間接競(jìng)品

使用場(chǎng)景和用戶群體可以不一致但比較接近的產(chǎn)品。

3. 相關(guān)競(jìng)品

定位和領(lǐng)域可以完全不同，可以是不構(gòu)成競(jìng)爭(zhēng)關(guān)系的產(chǎn)品。但是相關(guān)交互和流程有關(guān)聯(lián)，可以從中得到啟發(fā)，因此無需研究整個(gè)產(chǎn)品，只研究與產(chǎn)品關(guān)聯(lián)的部分。

注意

基于自己的目的選擇競(jìng)品，同樣的產(chǎn)品，但出于不同的目的，其所處的維度可能有所不同，同一個(gè)產(chǎn)品的不同模塊也有可能處于不同的維度，在實(shí)際操作中注意甄別。

四、競(jìng)品分析的矩陣

1. 品牌傳達(dá)

一個(gè)好的產(chǎn)品，會(huì)在產(chǎn)品的設(shè)計(jì)中融入品牌因子。讓產(chǎn)品在傳達(dá)內(nèi)容的同時(shí)也在不斷傳達(dá)產(chǎn)品，讓用戶不斷的接觸產(chǎn)品。起到潛移默化的在用戶心中塑造品牌形象的作用。做競(jìng)品分析之前先確立品牌的定位再去分析產(chǎn)品，會(huì)得到更真實(shí)合理的分析結(jié)論。

例如可以通過提煉出競(jìng)品的顏色、icon、配圖等方式推導(dǎo)得出視覺性格。

2. 視覺風(fēng)格

正確的定位視覺風(fēng)格，可以讓用戶對(duì)產(chǎn)品更加有親切感和融入感，從而增加用戶滿意度和用戶粘性。可以通過提煉競(jìng)品的關(guān)鍵頁面、配圖等方式，推導(dǎo)得出視覺風(fēng)格和風(fēng)格的優(yōu)勢(shì)。

3. 頁面布局

分析競(jìng)品的布局方式，對(duì)具體頁面信息和布局進(jìn)行細(xì)致拆解；研究界面元素之間的親疏關(guān)系，版塊之間的劃分方式，基本元素的重組規(guī)則，以及一些細(xì)節(jié)的處理手法等。

由于具體頁面布局拆解工作量較大，所以可根據(jù)需求，拆解部分頁面即可?？梢杂脵M向法和時(shí)間軸法進(jìn)行拆解。

4. 動(dòng)效

一個(gè)好的交互動(dòng)效可以加深用戶對(duì)產(chǎn)品的內(nèi)心印象。動(dòng)效的使用讓頁面跳轉(zhuǎn)更加頁暢，指引用戶的體驗(yàn)更佳。是對(duì)產(chǎn)品進(jìn)行高階的進(jìn)化。給用戶體驗(yàn)帶來的好處是躍進(jìn)性的?？梢栽谶@個(gè)點(diǎn)上，分析產(chǎn)品具有差異化的設(shè)計(jì)。

注意，不要為了加動(dòng)效而加，好的動(dòng)效是無感知和恰到好處的。不然，有可能會(huì)起到減分的效果。

5. icon

圖標(biāo)是產(chǎn)品設(shè)計(jì)的靈魂之一，一個(gè)好的圖標(biāo)設(shè)計(jì)直接賦予產(chǎn)品靈氣和辨識(shí)度。分析競(jìng)品圖標(biāo)，從功能性、識(shí)別性、美觀性不同的維度出發(fā)，逐一排列觀察。

6. 字體

分析競(jìng)品字體樣式的使用、字體數(shù)量的使用、字體層級(jí)的使用。

將文字的使用列成使用表之后，可以從字體的不同的使用方面分析出文字層級(jí)的設(shè)置方向，以便系統(tǒng)的管理字體在產(chǎn)品中的運(yùn)用。可以更好的規(guī)范我們即將要設(shè)計(jì)的產(chǎn)品，從開發(fā)的角度來講還可以更好的協(xié)同工作。

7. 規(guī)范控件

對(duì)頁面的元素和流程進(jìn)行拆解，找出哪些是由控件組成，以及這些控件是如何在產(chǎn)品里變成規(guī)范。

規(guī)范控件的分析整理將對(duì)產(chǎn)品的設(shè)計(jì)起到非常大的幫助，可以幫助我們從微觀跳出，在宏觀層面把控設(shè)計(jì)?？丶囊?guī)范可以讓產(chǎn)品具有一致性，幫助團(tuán)隊(duì)協(xié)作完成統(tǒng)一風(fēng)格的頁面設(shè)計(jì)。

8. 競(jìng)品分析的輸出

做完以上分析，最后得出自己的設(shè)計(jì)總結(jié)并輸出，競(jìng)品分析總結(jié)根據(jù)不同目的從以下幾個(gè)維度進(jìn)行拓展，重點(diǎn)在于輸出觀點(diǎn)而非「介紹」。

總結(jié)的時(shí)候主要是突出說明競(jìng)品相較于自己所做產(chǎn)品有哪些優(yōu)勢(shì)，同時(shí)又有哪些不足，最好說明競(jìng)品是什么原因而產(chǎn)生了這些問題，從設(shè)計(jì)的角度詳細(xì)說明我們準(zhǔn)備如何突破。

產(chǎn)品品牌：品牌的定位與產(chǎn)品形態(tài)息息相關(guān)，總結(jié)競(jìng)品設(shè)計(jì)有多少為品牌化服務(wù)的，可以從中做哪些借鑒。

設(shè)計(jì)風(fēng)格：總結(jié)競(jìng)品的設(shè)計(jì)風(fēng)格，取其精華去其糟粕，說明如何應(yīng)用在自己的產(chǎn)品中。
設(shè)計(jì)亮點(diǎn)：設(shè)計(jì)中差異化的東西是否是競(jìng)品脫穎而出的關(guān)鍵點(diǎn)，這些亮點(diǎn)在我們產(chǎn)品中使用的可能性。
設(shè)計(jì)趨勢(shì)：雖然所有內(nèi)容都是基于現(xiàn)有產(chǎn)品產(chǎn)出的，但建議設(shè)計(jì)師更進(jìn)一步，在現(xiàn)有競(jìng)品分析的基礎(chǔ)上，結(jié)合行業(yè)動(dòng)態(tài)，發(fā)掘行業(yè)整體設(shè)計(jì)趨勢(shì)，反推運(yùn)用到自己的產(chǎn)品設(shè)計(jì)中。

五、驗(yàn)證環(huán)節(jié)

競(jìng)品分析報(bào)告明確目的是第一位的，針對(duì)自己所做報(bào)告想要達(dá)到的目的，在項(xiàng)目結(jié)束之后，拿出支撐性內(nèi)容查看自己的競(jìng)品分析，復(fù)盤看哪些分析是正確的，哪些分析和最終產(chǎn)出不相等，不相符的原因是什么。

具體可以通過數(shù)據(jù)（例如轉(zhuǎn)化率、UV、活躍度、營收等）、用戶反饋來驗(yàn)證，具體形式根據(jù)報(bào)告目的來定。這樣做能不斷地改進(jìn)我們的競(jìng)品分析，將競(jìng)品分析的價(jià)值最大化。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

評(píng)論(0) 瀏覽(2676)

272018-7

canvas粒子效果

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<canvas id="cs"></canvas>
</div>
</body>
<script>
function MoveBalls(element, opts) {
var canvas = document.querySelector(element);
this.canvas = canvas;
this.ctx = canvas.getContext("2d");
var defaultOpts = {
total: 100,
color: "#00D0FF",
size: 1,
width: this.canvas.parentNode.clientWidth,
height: this.canvas.parentNode.clientHeight
};
var opts = opts || defaultOpts;
for (var key in opts) {
defaultOpts[key] = opts[key];
};
for (var key in defaultOpts) {
this[key] = defaultOpts[key];
};
opts = null;
defaultOpts = null;
// 鼠標(biāo)坐標(biāo)
this.coordinate = {
x: null,
y: null,
max: 100
};
// 粒子
this.dots = [];
// 含鼠標(biāo)坐標(biāo)的粒子數(shù)組
this.newDots = [];
// 總數(shù)
this.count = 0;
// requestAnimationFrame兼容處理
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
this.colorReg = /[rgba()]/g;
this.init();
};
MoveBalls.prototype = {
constructor: MoveBalls,
init: function () {
var _this = this;
this.freshResize();
this.mouseEvent();
this.getDots();
var timer = setTimeout(function () {
clearTimeout(timer);
_this.draw(_this)
}, 300);
},
colorCheck: function () {
this.canvas.style.color = this.color;
var colorData = this.canvas.style.color;
return colorData = colorData.replace(this.colorReg, "").split(",");
},
resize: function (self) {
var _this = self || this;
_this.canvas.width = _this.width;
_this.canvas.height = _this.height;
},
freshResize: function () {
this.resize();
var _this = this;
window.addEventListener("resize", function () {
_this.resize(_this);
});
},
mouseEvent: function () {
var _this = this;
_this.canvas.addEventListener("mousemove", function (e) {
var e = e || winodw.event;
_this.coordinate.x = e.offsetX ? e.offsetX : e.layerX;
_this.coordinate.y = e.offsetY ? e.offsetY : e.layerY;
});
_this.canvas.addEventListener("mouseout", function () {
_this.coordinate.x = null;
_this.coordinate.y = null;
})
},
getDots: function () {
while(this.count < this.total) {
var x = Math.random() * this.canvas.width;
var y = Math.random() * this.canvas.height;
var xMove = Math.random() * 2 - 1;
var yMove = Math.random() * 2 - 1;
this.dots.push({
x: x,
y: y,
xMove: xMove,
yMove: yMove,
max: 100
});
this.count ++;
}
},
draw: function (self) {
var _this = self || this;
var ctx = _this.ctx;
ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
_this.newDots = [_this.coordinate].concat(_this.dots);
_this.dots.forEach(function (dot) {
dot.xMove *= (dot.x > _this.canvas.width || dot.x < 0) ? -1 : 1;
dot.yMove *= (dot.y > _this.canvas.height || dot.y < 0) ? -1 : 1;
dot.x += dot.xMove;
dot.y += dot.yMove;
// 繪制點(diǎn)
ctx.save();
ctx.beginPath();
ctx.arc(dot.x, dot.y, _this.size, 0, Math.PI * 5);
ctx.fillStyle = _this.color;
ctx.fill();
ctx.restore();
// 循環(huán)比對(duì)粒子間的距離
for (var i = 0; i < _this.newDots.length; i ++) {
var newDot = _this.newDots[i];
// 如果是第一個(gè)點(diǎn)，則跳過
if(newDot === dot || newDot.x === null || newDot.y === null) continue;
var xDistance = dot.x - newDot.x;
var yDistance = dot.y - newDot.y;
var distance = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
// 顏色深度
var deep = 0;
// 小于最小距離，則連線
if (distance <= newDot.max) {
// 附近的小球向鼠標(biāo)位置移動(dòng)
if(newDot === _this.coordinate && distance > (newDot.max / 2)) {
dot.x -= xDistance * 0.05;
dot.y -= yDistance * 0.05;
}
// 距離越近---值越大---顏色越深
deep = (newDot.max - distance) / newDot.max;
// 畫線
ctx.save();
ctx.beginPath();
ctx.lineWidth = deep / 2;
var colorInfo = _this.colorCheck();
ctx.strokeStyle = "rgba(" + colorInfo[0] + ", " + colorInfo[1] + ", " + colorInfo[2] + "," + (deep + 0.4) + ")";
ctx.moveTo(dot.x, dot.y);
ctx.lineTo(newDot.x, newDot.y);
ctx.stroke();
ctx.restore();
}
}
// 將已經(jīng)計(jì)算過的粒子刪除，減少遍歷的總數(shù)量
_this.newDots.splice(_this.newDots.indexOf(dot), 1);
});
window.requestAnimationFrame(function (obj) {
_this.draw(_this);
});
}
}
var moveBalls = new MoveBalls("#cs", {total: 66, color: "#00D0FF", size: 1});
</script>
</html>

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2840)

272018-7

17個(gè) UI 設(shè)計(jì)指南

藍(lán)藍(lán)設(shè)計(jì)的小編

設(shè)計(jì)沒有捷徑，但是能騎上自行車肯定會(huì)快很多。文章中用17個(gè)簡單案例進(jìn)行透徹的分析。

設(shè)計(jì)沒有捷徑，但是騎上自行車肯定會(huì)快很多。

評(píng)論(0) 瀏覽(3274)

262018-7

移動(dòng)端web頁面開發(fā)

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

字號(hào)

工作了有一段時(shí)間，基本上都在搞移動(dòng)端的前端開發(fā)，工作的過程中遇到過很多問題，bug的解決方案，記錄下來，以便后用?。?！內(nèi)容并不是很全，以后每遇到一個(gè)問題都會(huì)總結(jié)在這里，分享給大家！

一、meta標(biāo)簽相關(guān)知識(shí)

1、移動(dòng)端頁面設(shè)置視口寬度等于設(shè)備寬度，并禁止縮放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、移動(dòng)端頁面設(shè)置視口寬度等于定寬（如640px），并禁止縮放，常用于微信瀏覽器頁面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3、禁止將頁面中的數(shù)字識(shí)別為電話號(hào)碼

<meta name="format-detection" content="telephone=no" />

4、忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別

<meta name="format-detection" content="email=no" />

5、當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)ios的safari


    

        

            

                

                

            

            

                
                    <meta name="apple-mobile-web-app-capable" content="yes" />
                

            

        

        

            

                

                

            

            

                
                    <!-- ios7.0版本以后，safari上已看不到效果 -->

6、將網(wǎng)站添加到主屏幕快速啟動(dòng)方式，僅針對(duì)ios的safari頂端狀態(tài)條的樣式


    

        

            

                

                

            

            

                
                    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
                

            

        

        

            

                

                

            

            

                
                    <!-- 可選default、black、black-translucent -->

viewport模板


    

        

            

                

                

            

            

                
                    <!DOCTYPE html>
                

            

        

        

            

                

                

            

            

                
                    <html>
                

            

        

        

            

                

                

            

            

                
                    <head>
                

            

        

        

            

                

                

            

            

                
                    <meta charset="utf-8">
                

            

        

        

            

                

                

            

            

                
                    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
                

            

        

        

            

                

                

            

            

                
                    <meta content="yes" name="apple-mobile-web-app-capable">
                

            

        

        

            

                

                

            

            

                
                    <meta content="black" name="apple-mobile-web-app-status-bar-style">
                

            

        

        

            

                

                

            

            

                
                    <meta content="telephone=no" name="format-detection">
                

            

        

        

            

                

                

            

            

                
                    <meta content="email=no" name="format-detection">
                

            

        

        

            

                

                

            

            

                
                    <title>title</title>
                

            

        

        

            

                

                

            

            

                
                    <link rel="stylesheet" href="index.css">
                

            

        

        

            

                

                

            

            

                
                    </head>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    <body>
                

            

        

        

            

                

                

            

            

                
                    content...
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    </html>

二、CSS樣式技巧

1、禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

2、禁止ios長按時(shí)觸發(fā)系統(tǒng)的菜單，禁止ios&android長按時(shí)下載圖片

.css{-webkit-touch-callout: none}

3、webkit去除表單元素的默認(rèn)樣式

.css{-webkit-appearance:none;}

4、修改webkit表單輸入框placeholder的樣式


    

        

            

                

                

            

            

                
                    input::-webkit-input-placeholder{color:#AAAAAA;}
                

            

        

        

            

                

                

            

            

                
                    input:focus::-webkit-input-placeholder{color:#EEEEEE;}

5、去除android a/button/input標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的邊框 & 去除ios a標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

6、ios使用-webkit-text-size-adjust禁止調(diào)整字體大小

body{-webkit-text-size-adjust: 100%!important;}

7、android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}

8、移動(dòng)端定義字體，移動(dòng)端沒有微軟雅黑字體


    

        

            

                

                

            

            

                
                    /* 移動(dòng)端定義字體的代碼 */
                

            

        

        

            

                

                

            

            

                
                    body{font-family:Helvetica;}

三、其他技巧

1、手機(jī)拍照和上傳圖片


    

        

            

                

                

            

            

                
                    <!-- 選擇照片 -->
                

            

        

        

            

                

                

            

            

                
                    <input type=file accept="image/*">
                

            

        

        

            

                

                

            

            

                
                    <!-- 選擇視頻 -->
                

            

        

        

            

                

                

            

            

                
                    <input type=file accept="video/*">

2、取消input在ios下，輸入的時(shí)候英文首字母的默認(rèn)大寫

<input autocapitalize="off" autocorrect="off" />

3、打電話和發(fā)短信


    

        

            

                

                

            

            

                
                    <a href="tel:0755-10086">打電話給:0755-10086</a>
                

            

        

        

            

                

                

            

            

                
                    <a href="sms:10086">發(fā)短信給: 10086</a>

四、CSS reset


    

        

            

                

                

            

            

                
                    /* hcysun  */
                

            

        

        

            

                

                

            

            

                
                    @charset "utf-8";
                

            

        

        

            

                

                

            

            

                
                    /* reset */
                

            

        

        

            

                

                

            

            

                
                    html{
                

            

        

        

            

                

                

            

            

                
                    -webkit-text-size-adjust:none;
                

            

        

        

            

                

                

            

            

                
                    -webkit-user-select:none;
                

            

        

        

            

                

                

            

            

                
                    -webkit-touch-callout: none
                

            

        

        

            

                

                

            

            

                
                    font-family: Helvetica;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                
                    body{font-size:12px;}
                

            

        

        

            

                

                

            

            

                
                    body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; font-weight: normal;text-indent: 0;}
                

            

        

        

            

                

                

            

            

                
                    a,button,input,textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); outline:none; -webkit-appearance:none;}
                

            

        

        

            

                

                

            

            

                
                    em{font-style:normal}
                

            

        

        

            

                

                

            

            

                
                    li{list-style:none}
                

            

        

        

            

                

                

            

            

                
                    a{text-decoration:none;}
                

            

        

        

            

                

                

            

            

                
                    img{border:none; vertical-align:top;}
                

            

        

        

            

                

                

            

            

                
                    table{border-collapse:collapse;}
                

            

        

        

            

                

                

            

            

                
                    textarea{ resize:none; overflow:auto;}
                

            

        

        

            

                

                

            

            

                
                    /* end reset */

五、常用公用CSS style


    

        

            

                

                

            

            

                
                    /* public */
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 清除浮動(dòng) */
                

            

        

        

            

                

                

            

            

                
                    .clear { zoom:1; }
                

            

        

        

            

                

                

            

            

                
                    .clear:after { content:''; display:block; clear:both; }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 定義盒模型為怪異和模型（寬高不受邊框影響） */
                

            

        

        

            

                

                

            

            

                
                    .boxSiz{
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-sizing: border-box;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-sizing: border-box;
                

            

        

        

            

                

                

            

            

                
                    -ms-box-sizing: border-box;
                

            

        

        

            

                

                

            

            

                
                    -o-box-sizing: border-box;
                

            

        

        

            

                

                

            

            

                
                    box-sizing: border-box;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 強(qiáng)制換行 */
                

            

        

        

            

                

                

            

            

                
                    .toWrap{
                

            

        

        

            

                

                

            

            

                
                    word-break: break-all; /* 只對(duì)英文起作用，以字母作為換行依據(jù)。 */
                

            

        

        

            

                

                

            

            

                
                    word-wrap: break-word; /* 只對(duì)英文起作用，以單詞作為換行依據(jù)。*/
                

            

        

        

            

                

                

            

            

                
                    white-space: pre-wrap; /* 只對(duì)中文起作用，強(qiáng)制換行。*/
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 禁止換行 */
                

            

        

        

            

                

                

            

            

                
                    .noWrap{
                

            

        

        

            

                

                

            

            

                
                    white-space:nowrap;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 禁止換行,超出省略號(hào) */
                

            

        

        

            

                

                

            

            

                
                    .noWrapEllipsis{
                

            

        

        

            

                

                

            

            

                
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 文字兩端對(duì)齊 */
                

            

        

        

            

                

                

            

            

                
                    .text-justify{
                

            

        

        

            

                

                

            

            

                
                    text-align:justify;
                

            

        

        

            

                

                

            

            

                
                    text-justify:inter-ideograph;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 定義盒模型為 flex布局兼容寫法并讓內(nèi)容水平垂直居中 */
                

            

        

        

            

                

                

            

            

                
                    .flex-center{
                

            

        

        

            

                

                

            

            

                
                    display: -webkit-box;
                

            

        

        

            

                

                

            

            

                
                    display: -moz-box;
                

            

        

        

            

                

                

            

            

                
                    display: -ms-flexbox;
                

            

        

        

            

                

                

            

            

                
                    display: -o-box;
                

            

        

        

            

                

                

            

            

                
                    display: box;
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    -webkit-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -o-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    box-pack: center;
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    -webkit-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-align: center;
                

            

        

        

            

                

                

            

            

                
                    -o-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    box-align: center;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* public end */

六、flex布局

1、定義彈性盒模型兼容寫法


    

        

            

                

                

            

            

                
                    /*
                

            

        

        

            

                

                

            

            

                
                     box
                

            

        

        

            

                

                

            

            

                
                     inline-box
                

            

        

        

            

                

                

            

            

                
                    */
                

            

        

        

            

                

                

            

            

                
                    display: -webkit-box;
                

            

        

        

            

                

                

            

            

                
                    display: -moz-box;
                

            

        

        

            

                

                

            

            

                
                    display: -ms-flexbox;
                

            

        

        

            

                

                

            

            

                
                    display: -o-box;
                

            

        

        

            

                

                

            

            

                
                    display: box;

2、box-orient 定義盒模型內(nèi)伸縮項(xiàng)目的布局方向


    

        

            

                

                

            

            

                
                    /**
                

            

        

        

            

                

                

            

            

                
                    * vertical column  垂直
                

            

        

        

            

                

                

            

            

                
                    * horizontal row   水平 默認(rèn)值
                

            

        

        

            

                

                

            

            

                
                    */
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-direction: row;
                

            

        

        

            

                

                

            

            

                
                    -o-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    box-orient: horizontal;

3、box-direction 定義盒模型內(nèi)伸縮項(xiàng)目的正序(normal默認(rèn)值)、倒敘(reverse)


    

        

            

                

                

            

            

                
                    /* Firefox */
                

            

        

        

            

                

                

            

            

                
                    display:-moz-box;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-direction:reverse;
                

            

        

        

            

                

                

            

            

                
                    /* Safari、Opera 以及 Chrome */
                

            

        

        

            

                

                

            

            

                
                    display:-webkit-box;
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-direction:reverse;

4、box-pack 對(duì)盒子水平富?？臻g的管理


    

        

            

                

                

            

            

                
                    /*
                

            

        

        

            

                

                

            

            

                
                    start
                

            

        

        

            

                

                

            

            

                
                    end
                

            

        

        

            

                

                

            

            

                
                    center
                

            

        

        

            

                

                

            

            

                
                    justify
                

            

        

        

            

                

                

            

            

                
                    */
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-pack: center;
                

            

        

        

            

                

                

            

            

                
                    -o-box-pack: center;
                

            

        

        

            

                

                

            

            

                
                    box-pack: center;

5、box-pack 對(duì)盒子垂直方向富?？臻g的管理


    

        

            

                

                

            

            

                
                    /*
                

            

        

        

            

                

                

            

            

                
                    start
                

            

        

        

            

                

                

            

            

                
                    end
                

            

        

        

            

                

                

            

            

                
                    center
                

            

        

        

            

                

                

            

            

                
                    */
                

            

        

        

            

                

                

            

            

                
                    /* box-align */
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-align: center;
                

            

        

        

            

                

                

            

            

                
                    -o-box-align: center;
                

            

        

        

            

                

                

            

            

                
                    box-align: center;

6、定義伸縮項(xiàng)目的具體位置


    

        

            

                

                

            

            

                
                    /*-moz-box-ordinal-group:1;*/ /* Firefox */
                

            

        

        

            

                

                

            

            

                
                    /*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(1){-webkit-box-ordinal-group:1;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(2){-webkit-box-ordinal-group:2;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(3){-webkit-box-ordinal-group:3;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(4){-webkit-box-ordinal-group:4;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(5){-webkit-box-ordinal-group:5;}

7、定義伸縮項(xiàng)目占空間的份數(shù)


    

        

            

                

                

            

            

                
                    -moz-box-flex:2.0; /* Firefox */
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-flex:2.0; /* Safari 和 Chrome */
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(1){-webkit-box-flex:1;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(2){-webkit-box-flex:2;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(3){-webkit-box-flex:3;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(4){-webkit-box-flex:4;}
                

            

        

        

            

                

                

            

            

                
                    .box div:nth-of-type(5){-webkit-box-flex:5;}

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2874)

262018-7

網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)全攻略

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

一、網(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í)的電腦屏幕非常小，分辨率只有800×600像素（對(duì)比一下，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)品需求文檔、市場(chǎng)文檔、做競(jìng)品調(diào)研等工作之外，與設(shè)計(jì)師密切相關(guān)的網(wǎng)站項(xiàng)目流程可以分為原型圖階段、視覺稿階段、設(shè)計(jì)規(guī)范階段、切圖階段、前端代碼階段、項(xiàng)目走查階段六個(gè)階段。每個(gè)階段都需要設(shè)計(jì)師參與和了解，千萬不要只在意視覺稿這個(gè)階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個(gè)一個(gè)來了解它們吧。

1. 原型圖階段

原型圖階段中設(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）

2. 視覺稿階段

視覺稿階段就是我們要根據(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）

3. 設(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ī)范對(duì)于設(shè)計(jì)師個(gè)人來說也是對(duì)項(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）

4. 切圖

網(wǎng)頁設(shè)計(jì)師通常不需要為前端工程師切圖。因?yàn)榍岸斯こ處熗ǔＰ枰莆?PS 軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項(xiàng)為前端切出網(wǎng)站所使用的圖片。

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

5. 前端代碼

前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對(duì)接調(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ì)有測(cè)試工程師介入來發(fā)現(xiàn)編譯完的網(wǎng)站是否存在一些漏洞等。

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

6. 項(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)行比對(duì)（工具：Photoshop）

三、網(wǎng)站種類

網(wǎng)站的分類按對(duì)象來劃分可以分為 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白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(shè)計(jì)時(shí)必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網(wǎng)站的不同門類吧。

1. 門戶網(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ì)對(duì)應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外，具體對(duì)接頻道的設(shè)計(jì)師也需要有一定擅長之處：比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(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)品組和頻道組兩種。

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

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

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對(duì)外展示自己的能力、介紹自己的產(chǎn)品等。現(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)站作為競(jìng)品來參考。

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

3. 產(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ǎng)景等。這樣的產(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)品介紹頁

4. 電商網(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)然就變得非常重要了。

△ 淘寶網(wǎng)首頁

5. 游戲網(wǎng)站

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

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

6. 專題頁面

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

△ 極有家淘寶專題頁面

7. 視頻網(wǎng)站

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

△ 騰訊視頻播放頁面

8. 移動(dòng)端H5

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

△ 使用前端語言編譯的適合手機(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)用背景音樂、視頻、鏈接等多媒體，讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外，其實(shí)還有一種方式可以無需代碼生成簡易版的 H5，就是通過 H5 工具生成。目前比較火的 H5 生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發(fā)，那么我們?cè)O(shè)計(jì)稿的尺寸需要設(shè)置為640x1008PX。這些工具較為簡單，注冊(cè)后將 PSD 上傳即可對(duì)每個(gè)原件進(jìn)行動(dòng)效的設(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 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)?？墒菙?shù)據(jù)非?？菰?，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。后臺(tái)網(wǎng)站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經(jīng)常處理 To C 類的需求，接到了 To B 類的產(chǎn)品需求時(shí)一定要注意這一點(diǎn)。后臺(tái)網(wǎng)站因?yàn)樾枰蟮漠嬅?，通常?huì)使用全屏式排版，也就是撐滿整個(gè)畫布。那如果小屏怎么辦呢？前端會(huì)使用相對(duì)布局縮小各個(gè)元素，排版的位置也會(huì)用百分比來確定。

△ 微信公眾號(hào)后臺(tái)

10. CRM系統(tǒng)

CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM 是企業(yè)對(duì)客戶進(jìn)行信息化管理的一種形式，用互聯(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í)候感覺到便利。

△ Admin CRM dashboard by Divan Raj

11. SaaS

如果我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等系統(tǒng)的第三方公司，那么我們可能會(huì)老聽到 SaaS 這個(gè)詞。SaaS 是(Software-as-a-Service)，即軟件就是服務(wù)。其他公司會(huì)來提供 SaaS 服務(wù)的公司定制系統(tǒng)，然后服務(wù)公司會(huì)為客戶提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。這里提到這個(gè)詞是防止設(shè)計(jì)師誤解它的定義。

12. 企業(yè)OA

企業(yè)OA，即(Office Automation)，也就是辦公自動(dòng)化系統(tǒng)。在六七十年代就興起了一場(chǎng)使用電腦來改變傳統(tǒng)辦公方式的革命。在大型企業(yè)時(shí)常會(huì)面臨人員眾多、地域廣袤、辦理公司事宜手續(xù)冗長等問題，那么企業(yè)OA 可以很好地解決這方面的問題。通過企業(yè)OA 可以完成請(qǐng)假、調(diào)休、離職、查詢公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作。這樣減少了很多窗口成本和員工的時(shí)間成本，增強(qiáng)了公司辦事效率?；ヂ?lián)網(wǎng)公司更是提供給員工除了企業(yè)OA 之外的交流功能，比如建立員工 BBS 和留言板等，在上面大家可以對(duì)公司提出建議和意見。企業(yè)OA 一般出于安全和保密性的原因，很多公司都更加愿意自己開發(fā)。設(shè)計(jì)師在設(shè)計(jì)此類項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和效率為重，讓操作者輕易可以找到在當(dāng)前頁面中最重要的功能。

△ Robo Advisor – Projection, List and Questionnaire by Michal Parulski

四、網(wǎng)站組成部分

了解了網(wǎng)站的不同類別后，讓我們來看看組成一個(gè)網(wǎng)站需要哪些部分吧。網(wǎng)站是由不同網(wǎng)頁通過超鏈接連接而成的，而不同網(wǎng)頁也是由不同模塊組成的。我們?cè)O(shè)計(jì)的是一個(gè)像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò)，而不是一張海報(bào)。所以我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)要格外考慮從用戶角度出發(fā)看到的網(wǎng)站，而不能孤立地把它想象成一個(gè)平面作品。

1. 首頁

訪問一個(gè)網(wǎng)站時(shí)第一個(gè)我們觸及的就是網(wǎng)站首頁。首頁別名叫作 Index 或者 Default，是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段，網(wǎng)站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個(gè)子網(wǎng)頁就點(diǎn)擊鏈接即可進(jìn)入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導(dǎo)用戶進(jìn)入不同區(qū)域的一個(gè)「目錄」，這個(gè)目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來吸引點(diǎn)擊，露出的部分一定要有一個(gè)「更多」按鈕來指引用戶找到二級(jí)頁面。

△ 首頁原型圖

2. 二級(jí)頁面

在邏輯上，首頁是一級(jí)頁面，從首頁點(diǎn)擊進(jìn)入的頁面均為二級(jí)頁面。二級(jí)頁面之后還有三級(jí)頁面等級(jí)別。從點(diǎn)擊的概率上來說，自然是越靠前訪問量越高，頁面層級(jí)越深越不容易被用戶找到。一般網(wǎng)站有三級(jí)頁面，就是為了避免用戶迷失。為此還會(huì)在頁面中加入面包屑導(dǎo)航。面包屑導(dǎo)航就是在頁面第一屏出現(xiàn)的諸如首頁 > 體育 > NBA頻道，這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在哪里，并且點(diǎn)擊可以回到其他頁面。

△ 二級(jí)頁面原型圖

3. 底層頁

在網(wǎng)站結(jié)構(gòu)中最后提供用戶實(shí)質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級(jí)頁面中我們點(diǎn)擊感興趣的標(biāo)題后，在底層頁中才會(huì)看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢(shì)在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評(píng)論；底側(cè)也會(huì)有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能?？傊谟脩糸喿x完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢(shì)閱讀其他的資訊或者回到頻道。

△ 底層頁原型圖

4. 廣告

門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一般由負(fù)責(zé)運(yùn)營需求的設(shè)計(jì)師負(fù)責(zé)，但是也可能由頻道設(shè)計(jì)師、產(chǎn)品側(cè)設(shè)計(jì)師來完成。在網(wǎng)站中常見到的廣告圖形式就是 banner。banner 一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動(dòng)、推薦資訊等。那么 banner 圖的尺寸有固定嗎？答案是沒有。Banner 的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準(zhǔn)的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以 banner 不可以做得很高，否則第一屏信息會(huì)顯示得不夠。你可能會(huì)說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏?xí)俸芏?。也就是很多用戶可能點(diǎn)擊網(wǎng)站后就會(huì)跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的 banner 不應(yīng)該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的 Banner 區(qū)域?yàn)?380x350px。那么除了首頁巨大的 banner 廣告位，網(wǎng)站還有哪些廣告形式呢？

對(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ù)制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進(jìn)網(wǎng)站你就會(huì)被全面轟炸，無法不注意到這個(gè)廣告的存在。這種廣告點(diǎn)擊進(jìn)入還有配合的專題頁等，可見需要設(shè)計(jì)師配合的地方非常多。

△ 對(duì)聯(lián)廣告形式

信息流廣告

信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會(huì)不自覺地閱讀起廣告的內(nèi)容，原因是因?yàn)樗男问胶推渌畔⒁粯?。比如朋友圈、知乎、Facebook 都采用了信息流廣告，信息流廣告的效果非常強(qiáng)，但是會(huì)犧牲一定的用戶體驗(yàn)。信息流廣告的尺寸與信息流相同。

△ 知乎APP中信息流中的廣告

以上從廣告的形式上簡單介紹了三種常見的網(wǎng)站廣告形式，如果我們?cè)陂喿x需求時(shí)看到了 cpm、pv 等單詞是什么意思呢？他們是廣告的收費(fèi)模式。cpm 是指按照廣告 pv 來收費(fèi)，cps 是指按照用戶消費(fèi)收費(fèi)，cpa 是指按照用戶注冊(cè)數(shù)收費(fèi)，cpc 是指按照用戶點(diǎn)擊付費(fèi)。針對(duì)不同的收費(fèi)模式，在設(shè)計(jì)時(shí)也會(huì)采取不同策略來增強(qiáng)廣告需要達(dá)到的目的。

5. Footer

在網(wǎng)站具體的頁面設(shè)計(jì)中，底部會(huì)有一個(gè)區(qū)域我們稱之為 footer。一般 footer 的顏色都會(huì)比上邊內(nèi)容區(qū)域要暗，因?yàn)?footer 的信息在邏輯的級(jí)別上是次要的。footer 區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號(hào)等信息。在設(shè)計(jì)時(shí)一定要降級(jí)處理，不要讓 footer 變得特別明顯。

五、技術(shù)原理

網(wǎng)頁設(shè)計(jì)師在做項(xiàng)目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計(jì)和交互是可以實(shí)現(xiàn)的、哪些是不可以的。同時(shí)技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復(fù)雜的交互。其實(shí)在過去網(wǎng)頁前端工程師和設(shè)計(jì)師是一個(gè)崗位，就叫做網(wǎng)頁美工，這個(gè)職位需要在完成視覺設(shè)計(jì)后把頁面做成靜態(tài)網(wǎng)頁交給下面的環(huán)節(jié)。隨著分工越來越細(xì)致，產(chǎn)生了網(wǎng)頁設(shè)計(jì)師和前端工程師兩個(gè)工種。但是網(wǎng)頁設(shè)計(jì)師不可以脫離技術(shù)局限天花亂墜地去設(shè)計(jì)。下面讓我們來了解網(wǎng)站的基本存儲(chǔ)原理：在您的電腦 C盤保存一個(gè)叫 logo.jpg 的圖片，然后在瀏覽器打開這個(gè)網(wǎng)址：C:\logo.jpg 你看到了什么？對(duì)，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲(chǔ)在一個(gè)類似我們電腦的東西里，那就是服務(wù)器。我們通過域名來調(diào)取網(wǎng)中不同的頁面和文件，如果服務(wù)器關(guān)機(jī)了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過瀏覽器訪問網(wǎng)站時(shí)，敲擊一個(gè)網(wǎng)址，這時(shí)這個(gè)域名會(huì)轉(zhuǎn)向一個(gè) IP地址，這個(gè) IP地址就是服務(wù)器所在的門牌號(hào)碼。找到了以后，我們的瀏覽器會(huì)從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實(shí)際上都是代碼的形式。瀏覽器還會(huì)把網(wǎng)站中所需要的圖片、視頻等單獨(dú)下載到緩存里。當(dāng)我們通過表單輸入用戶名和密碼時(shí)，我們的信息就會(huì)上傳到服務(wù)器中，服務(wù)器處理完（比如登錄成功這個(gè)信息）然后再下發(fā)給我們的瀏覽器。所以平時(shí)我們?cè)L問網(wǎng)站時(shí)，我們的電腦和瀏覽器要通過互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次「握手」。當(dāng)然老「握手」會(huì)造成加載速度變慢，于是我們聰明的瀏覽器會(huì)把已經(jīng)下載過的資源緩存下來，避免浪費(fèi)。這個(gè)機(jī)制就是「cookies」：瀏覽器會(huì)自動(dòng)存儲(chǔ)你訪問過的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。

△ 基于鼠標(biāo)的手勢(shì)操作

1. 基于鼠標(biāo)的交互

在不久的未來，個(gè)人電腦可能通過多點(diǎn)觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計(jì)最主流的交互方式還是鼠標(biāo)和鍵盤。來讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對(duì)鼠標(biāo)的使用無外乎移動(dòng)、左鍵、右鍵、拖拽四種方式。我們?cè)陧撁嬷械拇蟛糠植僮鞫际峭ㄟ^鼠標(biāo)左鍵點(diǎn)擊完成的，所以網(wǎng)頁也是點(diǎn)擊的藝術(shù)。右鍵一般會(huì)喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會(huì)將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個(gè)狀態(tài)吧（前端術(shù)語是：超鏈接標(biāo)簽的 CSS 四個(gè)偽類）。

△ 按鈕與文字的不同狀態(tài)

Link

Link 是指超鏈接正常的時(shí)候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開來，比如換一種顏色或者加下劃線。當(dāng)然下劃線還有一個(gè)作用就是方便弱視群體區(qū)分超鏈接與普通文字。Link 默認(rèn)都是藍(lán)色的（色值：#72ACE3），但是為了增強(qiáng)網(wǎng)站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產(chǎn)生差別才可以。

Visited

Visited 是超鏈接被點(diǎn)擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點(diǎn)擊完一個(gè)新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了 Visited 屬性，點(diǎn)擊后的新聞?lì)伾筒灰粯恿?，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。

Hover

Hover 是超鏈接鼠標(biāo)經(jīng)過狀態(tài)。這個(gè)狀態(tài)是連接中最為重要的狀態(tài)。其實(shí)不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應(yīng)該設(shè)置 Hover 屬性，也就是鼠標(biāo)懸停時(shí)的狀態(tài)。一般來說變換顏色和放大是 Hover 狀態(tài)的基本方式。

Active

Active 是指超鏈接的激活狀態(tài)。點(diǎn)擊后超鏈接可以通過 CSS 加載一個(gè)狀態(tài)。

同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點(diǎn)擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計(jì)成不同的樣式，方便用戶通過鼠標(biāo)感知這個(gè)物體是被我按下去的，這種給用戶的暗示我們也叫做「點(diǎn)擊感」。當(dāng)然按鈕會(huì)和鏈接稍有不同，按鈕除了具備正常和鼠標(biāo)懸停等狀態(tài)，還有一種狀態(tài)叫不可點(diǎn)擊。這種狀態(tài)將按鈕置灰，提示用戶這個(gè)功能因?yàn)闂l件不滿足不可以點(diǎn)擊。好了，您可以舉出幾個(gè)點(diǎn)擊感 Web 設(shè)計(jì)的例子嗎？

2. 靜態(tài)網(wǎng)頁

了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來聊點(diǎn)真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由 HTML 編譯的，我們?cè)诜?wù)器上存儲(chǔ)的網(wǎng)頁代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language，即超文本標(biāo)記語言。「超文本」是說這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對(duì)于沒有編程的人來說可能會(huì)很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會(huì)將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用 HTML語言寫一段文字會(huì)是什么樣呢？

△ 模擬代碼編譯過程

沒錯(cuò)，代碼就是這么一點(diǎn)一點(diǎn)編起來的。在任何網(wǎng)站空白處右鍵點(diǎn)擊查看網(wǎng)頁源代碼你就可以看到網(wǎng)頁的 HTML 代碼啦。HTML 這種代碼是由一個(gè)國際組織——W3C 發(fā)布和維護(hù)的。W3C 創(chuàng)建于1994年，是網(wǎng)站國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C 已經(jīng)發(fā)布了 HTML 的諸多版本，其中影響最深遠(yuǎn)的是 HTML4版本。而 HTML5 簡稱 H5 則可以說是劃時(shí)代的版本了。H5 的標(biāo)簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉 Flash 插件了。（Flash插件帶來了比如系統(tǒng)漏洞、加載速度過慢等問題）同時(shí) H5 對(duì)多平臺(tái)支持很好，所以適應(yīng)移動(dòng)端為王的當(dāng)今時(shí)代。H5 甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍(lán)湖等）、多媒體等多種形式?？墒怯捎?IE瀏覽器這類不支持 HTML5 效果的瀏覽器在用戶中占比還很高，所以造成了 HTML5 發(fā)展的制約。瀏覽器可以理解為一個(gè)代碼閱讀器，由于它對(duì) HTML5 代碼的翻譯工作不好就會(huì)造成所謂「兼容性」的問題。比如 HTML5 中可以通過代碼給一個(gè) DIV添加投影，那么在某些瀏覽器中就顯示不了這個(gè)效果。不難理解為什么有程序員會(huì)穿著 i hate IE 字樣的T恤了吧。在每次做完一個(gè)網(wǎng)站項(xiàng)目時(shí)，測(cè)試工程師都會(huì)用 Chrome、Safari、Firefox、Opera、IE、Edge 等多個(gè)瀏覽器測(cè)試網(wǎng)站的兼容性，這時(shí)通常讓前端工程師非常頭疼。因?yàn)榇a動(dòng)一發(fā)牽全身，經(jīng)常這個(gè)好了那個(gè)又不行了。但是針對(duì)這種問題也有一些解決方案，比如減少對(duì)用戶占比不高瀏覽器的支持、對(duì)不好搞的瀏覽器單獨(dú)加載特定的適配代碼等。道高一尺魔高一丈呀。

3. 其他前端語言

有了 HTML 這個(gè)骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來服務(wù)器下載代碼和圖片等資源進(jìn)行「握手」，而且很多 HTML 代碼都是重復(fù)的，造成了資源的浪費(fèi)。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的，那么每個(gè)頁面都會(huì)啰嗦這幾句代碼。這個(gè)問題沒多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS 是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是 CSS 和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是 HTML 完全分開，并且一個(gè)網(wǎng)站可以下載一份 CSS 然后不同頁面都調(diào)取這份 CSS 的緩存，那么就節(jié)省了服務(wù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點(diǎn)擊和菜單等，那么需要前端工程師使用 Javas cript 代碼來配合。Javas cript 是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的非常順手。所以目前主流的網(wǎng)站配置是 HTML5+CSS3+JS 代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用 HTML4+CSS+JS 的套餐。這取決于我們的主要目標(biāo)用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí) HTML、CSS、JS 代碼然后進(jìn)行前端開發(fā)，因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。

△ 主流形式：HTML + CSS + JS

4. 動(dòng)態(tài)網(wǎng)頁

了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談?wù)劸W(wǎng)站如何動(dòng)起來。動(dòng)態(tài)網(wǎng)頁不是說它有狂拽酷炫的動(dòng)畫，而是動(dòng)態(tài)網(wǎng)頁會(huì)隨著時(shí)間、內(nèi)容和數(shù)據(jù)庫的調(diào)用而產(chǎn)生動(dòng)態(tài)的網(wǎng)頁。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁的 HTML 代碼并不需要人去手工修改，而是讓小編通過后臺(tái)錄入新聞、上傳圖片就好了。小編上傳后臺(tái)的過程就會(huì)輸入數(shù)據(jù)庫，而動(dòng)態(tài)網(wǎng)頁又是調(diào)取數(shù)據(jù)庫內(nèi)容顯示給用戶的一種形式。動(dòng)態(tài)網(wǎng)頁會(huì)隨時(shí)調(diào)取數(shù)據(jù)庫中的信息給用戶，而對(duì)用戶來說似乎靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁長得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁結(jié)尾是 html 或 htm，而動(dòng)態(tài)網(wǎng)頁由于使用了高級(jí)網(wǎng)頁編程技術(shù)，結(jié)尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動(dòng)態(tài)網(wǎng)頁的語言，當(dāng)然有的時(shí)候?yàn)榱俗尵W(wǎng)站效率提升也會(huì)使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁就一致了，但是實(shí)際上是會(huì)在用戶訪問前調(diào)取一遍數(shù)據(jù)庫的。同時(shí)動(dòng)態(tài)網(wǎng)頁的網(wǎng)址會(huì)有一個(gè)特點(diǎn)，含有？符號(hào)。動(dòng)態(tài)語言目前最火的是 Php，較早而現(xiàn)在比較少見的是 Asp、Cgi，最安全的是 Jsp，所以很多銀行采用 JSP 編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運(yùn)行原理了。

△ 主流后臺(tái)編譯語言：PHP ASP JSP CGI

5. 雪碧圖

我們經(jīng)?？吹骄W(wǎng)站中會(huì)有動(dòng)畫，那么動(dòng)畫實(shí)現(xiàn)的原理一般有如下這么幾個(gè)：第一，HTML5 視頻播放；這種方式缺點(diǎn)就是不兼容低端瀏覽器。第二，F(xiàn)lash Player 播放器播放；這種方式的缺點(diǎn)是Flash安全性很低而且效率慢。第三，動(dòng)畫使用 Gif 格式；這種方式的問題是動(dòng)畫長度不夠，并且這個(gè)格式僅僅支持透明和不透明兩級(jí)屬性。那么像 Google 首頁 Doodle 的動(dòng)畫是怎么實(shí)現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精靈，它是一種 CSS 圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級(jí)透明的 PNG 格式，然后把動(dòng)畫并排排列出來。比如一個(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，然后過一秒鐘代碼會(huì)悄悄移動(dòng)100px我們就看到了動(dòng)作2。由于速度很快就讓我們看到了連續(xù)動(dòng)畫。雪碧圖也有自身的缺點(diǎn)：如果幀數(shù)太多，會(huì)消耗很大的內(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ì)效果，用以實(shí)現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運(yùn)用了視差滾動(dòng)效果。其實(shí)現(xiàn)原理是，代碼判定網(wǎng)頁滾動(dòng)，滾動(dòng)時(shí)頁面中三層圖片運(yùn)動(dòng)速率和位移距離不同。這樣給人造成的視覺體驗(yàn)仿佛是我們?cè)谖锢憩F(xiàn)實(shí)中看到的空間感一樣。視差滾動(dòng)已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動(dòng)，請(qǐng)大膽設(shè)計(jì)并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準(zhǔn)備的就是運(yùn)動(dòng)速率不同的分層靜態(tài) PSD 文件。

△ 運(yùn)用了視差滾動(dòng)效果的密爾沃基警察局官網(wǎng)（milwaukeepolicenews.com）

六、網(wǎng)頁設(shè)計(jì)規(guī)范

終于，經(jīng)歷過長篇大論網(wǎng)站的原理與組成部分后，我們要談?wù)劸W(wǎng)站設(shè)計(jì)的規(guī)范了。網(wǎng)站設(shè)計(jì)并無具體平臺(tái)限定的風(fēng)格，也沒有必須要設(shè)計(jì)的系統(tǒng)級(jí)導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計(jì)更加靈活，然而因?yàn)樘`活也會(huì)讓我們的設(shè)計(jì)師無從下手。那么接下來我將介紹網(wǎng)站設(shè)計(jì)的規(guī)范，在您工作的時(shí)候可以參考。注意，在設(shè)計(jì)之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會(huì)有誤會(huì)。

1. 畫板尺寸

因?yàn)榫W(wǎng)頁尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版 Photoshop 網(wǎng)站 Web 預(yù)設(shè)尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網(wǎng)頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們?nèi)绻鼍W(wǎng)站時(shí)建議按主流的分辨率1920x1080px來設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px，每個(gè)屏幕的高度約為900px。為什么是900px呢？因?yàn)?080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域?yàn)?200px （或1000px / 1400px）。以這個(gè)尺寸來設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。當(dāng)然在設(shè)計(jì)網(wǎng)頁前需要知會(huì)前端設(shè)計(jì)尺寸，因?yàn)閷?duì)于適配的方式和后續(xù)配合他們更有發(fā)言權(quán)。

△ 網(wǎng)站的尺寸規(guī)范

2. 文字規(guī)范

我們現(xiàn)在都知道了網(wǎng)站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋果電腦上看到的文字效果和 Windows 系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會(huì)對(duì)文字進(jìn)行渲染，而 windows 的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑 Windows 的用戶是主流，所以盡管我們可能使用蘋果電腦設(shè)計(jì)網(wǎng)頁，但是設(shè)計(jì)出來的網(wǎng)頁效果也應(yīng)該和 Windows 顯示一致。否則我們?cè)O(shè)計(jì)完漂亮的設(shè)計(jì)稿，程序員無法還原成我們?cè)O(shè)計(jì)的樣子。另外，字號(hào)的大小也非常重要。網(wǎng)頁的顯示區(qū)域決定了文字不可以過大，在網(wǎng)站設(shè)計(jì)中我們的文字大小一般來說是12-20像素。為什么不能比12px更??？因?yàn)槿绻?2像素更小的中文無法放得下復(fù)雜的筆畫了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數(shù)的字號(hào)來設(shè)計(jì)。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇 Windows Lcd 或銳利。另外，英文和數(shù)字需使用 Arial字體，渲染方式選擇無。

△ 網(wǎng)站字體規(guī)范

3. 圖片規(guī)范

網(wǎng)站設(shè)計(jì)中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級(jí)透明的 png 格式、圖片文件很小的 jpg 格式、支持透明/不透明并且支持動(dòng)畫的 gif 格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網(wǎng)頁使用的圖片更小呢？

第一種方法，給程序員切圖的時(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í)需要下載網(wǎng)頁所調(diào)用的圖片資源，那么如果一個(gè)網(wǎng)站有一百張圖片的話，瀏覽器和服務(wù)器就得握一百次。第一會(huì)耗費(fèi)服務(wù)器資源，第二訪問速度就會(huì)慢一些。所以前端工程師們有一種做法，就是把網(wǎng)頁中所使用的圖片拼成一大張 png。然后每個(gè)調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點(diǎn)兒，顯示的那塊區(qū)域移動(dòng)到一大張圖片中所需要的那個(gè)圖像。

△ 在線壓縮工具Tinypng網(wǎng)站

4. 按鈕

按鈕的風(fēng)格在過去的十幾年發(fā)生了很大的變化，由一開始的「斜面與浮雕」風(fēng)格過渡到后面的「擬物風(fēng)格」，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會(huì)去掉填充只保留邊框，這種設(shè)計(jì)方式叫做幽靈按鈕。注意在設(shè)計(jì)按鈕時(shí)記得同時(shí)設(shè)計(jì)好按鈕的鼠標(biāo)懸停、按下狀態(tài)。

△ 不同時(shí)代下不同的按鈕風(fēng)格

5. 表單

在網(wǎng)站設(shè)計(jì)中我們經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級(jí)的控件，一般是直接調(diào)用系統(tǒng)設(shè)計(jì)的。但是系統(tǒng)設(shè)計(jì)有時(shí)不能滿足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點(diǎn)擊起來不舒服；不符合網(wǎng)站整體設(shè)計(jì)的品牌感等。那么我們可以通過 CSS 給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以我們遇到涉及到表單的需求時(shí)也可以進(jìn)行自定義設(shè)計(jì)。

△ 表單不同風(fēng)格的設(shè)計(jì) UIDE Kit by Mateusz Dembek

6. 柵格

我們把整體寬度定義為 W。然后整個(gè)寬度分成多個(gè)等分單元 A。每個(gè)單元 A 中有元素 a 和間距 i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間；其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi)，這樣就完成了一個(gè)布局非?？茖W(xué)的設(shè)計(jì)了。比如：

柵格系統(tǒng)具體有以下優(yōu)勢(shì)：能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。另外，基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗(yàn)。

△ 網(wǎng)站的柵格化會(huì)使網(wǎng)站看起來更有秩序感

7. 適配Retina屏幕

2012年蘋果發(fā)布了 Retina Macbook Pro，Retina 屏幕的電腦占有量越來越高了。Retina 屏幕簡單地說就是屏幕密度是傳統(tǒng)屏幕的兩倍，擁有更大地清晰度。甚至可以滿足我們視網(wǎng)膜最高的識(shí)別度，所以也叫視網(wǎng)膜屏幕。這種屏幕下我們?cè)O(shè)計(jì)的安全距離大約為1000像素的網(wǎng)站就顯得非常粗糙了。所以如果我們現(xiàn)在 Retina 屏幕下顯示一個(gè)400X300PX的區(qū)域，實(shí)際上我們需要提供給前端一張800X600PX的切圖才行，因?yàn)?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。前端用代碼來識(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)的原理是相似的，都是通過代碼檢測(cè)設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的 css。

自適應(yīng)網(wǎng)站

自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是一致的，但是設(shè)計(jì)稿需要考慮屏幕變小時(shí)的變化方式。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距，那么如果寬度縮小成900時(shí)需要如何變化，這就是自適應(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ī)來訪問，就會(huì)給你導(dǎo)入一份手機(jī)才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的 CSS 樣式。對(duì)于設(shè)計(jì)師來說，自適應(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ī)頁面時(shí)，我們一般以 iPhone 為畫布標(biāo)準(zhǔn)。原因是 iPhone 相對(duì)顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時(shí)我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī) APP 常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時(shí)網(wǎng)站里的按鈕也需要變?yōu)槭謾C(jī) APP 中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個(gè)按鈕要大于88PX，方便手指的點(diǎn)擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用 SF-UI 代替。也就是將網(wǎng)站改變成一個(gè)類 APP 的手機(jī)網(wǎng)頁，這樣才可以保證手機(jī)用戶體驗(yàn)良好。如果用戶使用安卓手機(jī)，那么前端代碼則會(huì)基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來適應(yīng)安卓屏幕。

iPad：iPad的尺寸為1024×768、2048x1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在 iPad 上瀏覽網(wǎng)頁是基本舒適的。因此，很多網(wǎng)站并沒有專門為 iPad 做適配，如果我們希望 iPad 用戶用的更爽，可以從文字大?。?4PX以上）、按鈕大小（88PX左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動(dòng)）等方式入手。

△ 不同設(shè)備的注意事項(xiàng)

總結(jié)

無論您面對(duì)的項(xiàng)目是 To C 的還是 To B 的網(wǎng)站產(chǎn)品，我們都應(yīng)該首先確立設(shè)計(jì)風(fēng)格 > 尋找設(shè)計(jì)素材 > 建立情緒板 > 完成視覺稿 > 切圖標(biāo)注 > 建立視覺規(guī)范 > 進(jìn)行項(xiàng)目走查。

如果設(shè)計(jì)一般網(wǎng)站的頁面，可以按照1920 X 1080px尺寸設(shè)計(jì)。每屏高度900px，字體使用宋體12px、無和微軟雅黑 14-20、Windows LCD。Banner 盡量滿屏，但是圖片需要按照4:3或16:9等比例來設(shè)計(jì)。做網(wǎng)站時(shí)可以建立柵格以更好地進(jìn)行自適應(yīng)和響應(yīng)式布局，我們也要為超鏈接和按鈕設(shè)計(jì)不同的相應(yīng)鼠標(biāo)的狀態(tài)；另外我們也可以多多嘗試在網(wǎng)站設(shè)計(jì)中加入視差滾動(dòng)、雪碧圖動(dòng)畫等好玩的交互。

如果設(shè)計(jì)手機(jī)端的頁面，可以按照750X1334PX尺寸設(shè)計(jì)。字體使用蘋方24PX以上、銳利。英文字體使用SF UI。按鈕和點(diǎn)擊區(qū)域需要大于88PX方便手指點(diǎn)擊。并且頭部需要預(yù)留出微信或?yàn)g覽器的導(dǎo)航區(qū)域。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

評(píng)論(0) 瀏覽(4272)

262018-7

設(shè)計(jì)圖集：創(chuàng)意廣告設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

作為一名設(shè)計(jì)師，腦洞是很重要的，雖有一些不切實(shí)際，不過是你對(duì)這個(gè)世界看到的經(jīng)過反思之后的一種再加工，每個(gè)人不可能閉門造車“生”原創(chuàng)的。你必須經(jīng)歷這個(gè)過程。

評(píng)論(0) 瀏覽(2864)

252018-7

原生JS實(shí)現(xiàn)ajax詳解

seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

原生js寫ajax可以類比打電話

打電話分下面4步：
1.拿出手機(jī)
2.撥號(hào)
3.說話
4.聽對(duì)方說話

ajax也分下面4步：
1.創(chuàng)建ajax對(duì)象
2.連接到服務(wù)器
3.發(fā)送請(qǐng)求（告訴服務(wù)器我要什么文件）
4.接收返回值

下面是原生js寫ajax的具體寫法：

<script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { //1.創(chuàng)建ajax對(duì)象 //只兼容非ie6的瀏覽器，在ie6瀏覽器上運(yùn)行會(huì)提示沒有被定義 //var oAjax = new XMLHttpRequest();//這才是ajax實(shí)際的請(qǐng)求 //alert(oAjax); //ie6瀏覽器下按照下面方法寫,但是在別的瀏覽器中不能用，會(huì)報(bào)錯(cuò)。 //var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); //alert(oAjax); //鑒于上面出現(xiàn)的問題，可以采取下面的方法解決，用if判斷是否為IE6瀏覽器 if(window.XMLHttpRequest)//如果有XMLHttpRequest，那就是非IE6瀏覽器。()里面加window的原因下面會(huì)有描述。 { var oAjax = new XMLHttpRequest();//創(chuàng)建ajax對(duì)象 } else//如果沒有XMLHttpRequest，那就是IE6瀏覽器 { var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對(duì)象 } //2.連接服務(wù)器 //open(方法、文件名、異步傳輸） //方法： //傳輸方式是get方式還是post方式。 //文件名 //告訴服務(wù)器要讀哪個(gè)文件 //異步傳輸 //異步：多件事一件一件的做 //同步：多件事情一起進(jìn)行 //但是js里面的同步和異步和現(xiàn)實(shí)的同步異步相反。 //同步：多件事一件一件的做 //異步：多件事情一起進(jìn)行 //ajax天生是用來做異步的 oAjax.open("GET","a.txt?t='+new Date().getTime()",true);//加上t='+new Date().getTime()"的目的是為了消除緩存，每次的t的值不一樣。 //3.發(fā)送請(qǐng)求 oAjax.send(); //4.接收返回 //客戶端和服務(wù)器端有交互的時(shí)候會(huì)調(diào)用onreadystatechange oAjax.onreadystatechange=function() { //oAjax.readyState //瀏覽器和服務(wù)器，進(jìn)行到哪一步了。 //0->（未初始化）：還沒有調(diào)用 open() 方法。 //1->（載入）：已調(diào)用 send() 方法，正在發(fā)送請(qǐng)求。 //2->載入完成）：send() 方法完成，已收到全部響應(yīng)內(nèi)容。 //3->（解析）：正在解析響應(yīng)內(nèi)容。 //4->（完成）：響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用。 if(oAjax.readyState==4) { if(oAjax.status==200)//判斷是否成功,如果是200，就代表成功 { alert("成功"+oAjax.responseText);//讀取a.txt文件成功就彈出成功。后面加上oAjax.responseText會(huì)輸出a.txt文本的內(nèi)容 } else { alert("失敗"); } } }; } }; /*//上面if里面需要些window的原因 //js里面的變量和屬性 var a = 12; alert(a);//頁面上彈出12很正常，而實(shí)際上輸出的是下面的寫法，是屬于window的，只是window能省就省了。 alert(window.a);//輸出結(jié)果是一樣的 window.alert(window.a); //想a這種全局變量實(shí)際上是winow的一個(gè)屬性。 //如果不定義一個(gè)變量a直接像下面那樣輸出a alert(a)//系統(tǒng)會(huì)報(bào)錯(cuò)，而不是undefind，因?yàn)闆]有定義變量a。 alert(window.a);//如果是這樣寫，系統(tǒng)就不會(huì)報(bào)錯(cuò)了，會(huì)顯示undefind。 //出現(xiàn)上面的原因是因?yàn)橹苯訉慳從根上就找不到a，而前面加上window只是找不到window的屬性a了。*/ </script>

但是，不能每次用ajax的時(shí)候都寫那么多代碼，要把這段ajax代碼封裝起來，方便使用。

封裝ajax代碼如下：

//最后把代碼封裝起來,封裝起來以后，要給這個(gè)函數(shù)加上一個(gè)參數(shù)url.參數(shù)是為了替換要讀取的文件名 function ajax(url,fnSucc) { if(window.XMLHttpRequest) { var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器創(chuàng)建ajax對(duì)象 } oAjax.open("GET",url,true);//把要讀取的參數(shù)的傳過來。 oAjax.send(); oAjax.onreadystatechange=function() { if(oAjax.readyState==4) { if(oAjax.status==200) { fnSucc(oAjax.responseText);//成功的時(shí)候調(diào)用這個(gè)方法 } else { if(fnfiled) { fnField(oAjax.status); } } } }; }

將封裝的ajax調(diào)用：

<script src="new_ajax.js"></script>//引用封裝的ajax文件 <script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { ajax('a.txt',function(str){//讀取a.txt文件里面的內(nèi)容 alert(str);//將讀取的內(nèi)容輸出 }) } }; </script>
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3724)

252018-7

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

博博

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

男生運(yùn)動(dòng)鞋商店支付界面，顏色搭配非常舒服，鞋子攝影也很漂亮，字體字號(hào)運(yùn)用非常到位。

和上圖一樣的運(yùn)動(dòng)鞋支付界面，采用簡潔風(fēng)格，有右伴部分中的金色芯片元素，非常有意思，即表明了支付意思，也很好的點(diǎn)綴了整個(gè)界面。

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

顏色搭配非常好，給人高端的感覺，在輸入正確的狀態(tài)才出現(xiàn)一個(gè)橙色的圖標(biāo)做到畫龍點(diǎn)睛的作用，個(gè)人非常喜歡。

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

界面設(shè)計(jì)排版合理，視覺感非常好，產(chǎn)品內(nèi)容機(jī)械手表效果非常靚，質(zhì)感也很好。喜歡

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

偏日系的設(shè)計(jì)風(fēng)格排版，簡潔而不簡單，個(gè)人也是挺喜歡的。

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

和上圖的設(shè)計(jì)風(fēng)格一致，屬于那種簡單的配色排版，給人的感覺就是很舒服我喜歡這種。

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(3721)

252018-7

網(wǎng)頁設(shè)計(jì)的核心難點(diǎn)是什么？

博博

網(wǎng)頁設(shè)計(jì)的核心難點(diǎn)是什么？

公眾號(hào):西見個(gè)人QQ:26474600

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

網(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像素（對(duì)比一下，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)品需求文檔、市場(chǎng)文檔、做競(jìng)品調(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ì)?？傊?，設(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ī)范對(duì)于設(shè)計(jì)師個(gè)人來說也是對(duì)項(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)榍岸斯こ處熗ǔＰ枰莆誔S軟件技能。如果遇到特殊情況需要我們切圖時(shí)，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項(xiàng)為前端切出網(wǎng)站所使用的圖片。

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

前端代碼

前端工程師會(huì)用代碼重構(gòu)我們?cè)O(shè)計(jì)的頁面，把圖紙變?yōu)殪o態(tài)頁面。然后和后端工程師對(duì)接調(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ì)有測(cè)試工程師介入來發(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)行比對(duì)（工具：Photoshop）

網(wǎng)站種類

網(wǎng)站的分類按對(duì)象來劃分可以分為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白了我們?cè)谠O(shè)計(jì)使用者工作的工具，我們?cè)谠O(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ì)對(duì)應(yīng)的專題、世界杯小組出線需要負(fù)責(zé)體育頻道的設(shè)計(jì)師來設(shè)計(jì)對(duì)應(yīng)的專題等。地球上的每一天都有大事發(fā)生，那么門戶網(wǎng)站中的設(shè)計(jì)工作就不會(huì)少。另外，具體對(duì)接頻道的設(shè)計(jì)師也需要有一定擅長之處：比如對(duì)接體育頻道的設(shè)計(jì)師起碼應(yīng)該熟悉足球籃球等體育項(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)品組和頻道組兩種。

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

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

每個(gè)企業(yè)都需要有一個(gè)網(wǎng)站來對(duì)外展示自己的能力、介紹自己的產(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)站作為競(jì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ǎng)景等。這樣的產(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)然就變得非常重要了。

淘寶網(wǎng)首頁

游戲網(wǎng)站

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

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

專題頁面

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

極有家淘寶專題頁面

視頻網(wǎng)站

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

騰訊視頻播放頁面

移動(dòng)端H5

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

使用前端語言編譯的適合手機(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)用背景音樂、視頻、鏈接等多媒體，讓體驗(yàn)更佳。除了讓前端小哥哥們開發(fā)之外，其實(shí)還有一種方式可以無需代碼生成簡易版的H5，就是通過H5工具生成。目前比較火的H5生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發(fā)，那么我們?cè)O(shè)計(jì)稿的尺寸需要設(shè)置為640x1008PX。這些工具較為簡單，注冊(cè)后將PSD上傳即可對(duì)每個(gè)原件進(jìn)行動(dòng)效的設(shè)置了。但是如果需要復(fù)雜的動(dòng)效和交互，還是需要前端工程師的配合。

H5項(xiàng)目的尺寸

后臺(tái)網(wǎng)站

后臺(tái)網(wǎng)站又叫Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計(jì)信息。后臺(tái)網(wǎng)站是To B類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)?？墒菙?shù)據(jù)非?？菰铮覀兛梢允褂弥T如“折線圖”、“餅狀圖”、“曲線圖”、“表格”等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達(dá)數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。后臺(tái)網(wǎng)站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經(jīng)常處理To C類的需求，接到了To B類的產(chǎn)品需求時(shí)一定要注意這一點(diǎn)。后臺(tái)網(wǎng)站因?yàn)樾枰蟮漠嬅?，通常?huì)使用全屏式排版，也就是撐滿整個(gè)畫布。那如果小屏怎么辦呢？前端會(huì)使用相對(duì)布局縮小各個(gè)元素，排版的位置也會(huì)用百分比來確定。

微信公眾號(hào)后臺(tái)

CRM系統(tǒng)

CRM即Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM是企業(yè)對(duì)客戶進(jìn)行信息化管理的一種形式，用互聯(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í)候感覺到便利。

Admin CRM dashboard by Divan Raj

SaaS

如果我們服務(wù)于為企業(yè)搭建CRM、ERP或者OA等系統(tǒng)的第三方公司，那么我們可能會(huì)老聽到SaaS這個(gè)詞。SaaS是(Software-as-a-Service)，即軟件就是服務(wù)。其他公司會(huì)來提供SaaS服務(wù)的公司定制系統(tǒng)，然后服務(wù)公司會(huì)為客戶提供從服務(wù)器到設(shè)計(jì)一體化的服務(wù)。這里提到這個(gè)詞是防止設(shè)計(jì)師誤解它的定義。

企業(yè)OA

企業(yè)OA，即(Office Automation)，也就是辦公自動(dòng)化系統(tǒng)。在六七十年代就興起了一場(chǎng)使用電腦來改變傳統(tǒng)辦公方式的革命。在大型企業(yè)時(shí)常會(huì)面臨人員眾多、地域廣袤、辦理公司事宜手續(xù)冗長等問題，那么企業(yè)OA可以很好地解決這方面的問題。通過企業(yè)OA可以完成請(qǐng)假、調(diào)休、離職、查詢公司規(guī)章制度、請(qǐng)示、匯報(bào)等工作。這樣減少了很多窗口成本和員工的時(shí)間成本，增強(qiáng)了公司辦事效率?；ヂ?lián)網(wǎng)公司更是提供給員工除了企業(yè)OA之外的交流功能，比如建立員工BBS和留言板等，在上面大家可以對(duì)公司提出建議和意見。企業(yè)OA一般出于安全和保密性的原因，很多公司都更加愿意自己開發(fā)。設(shè)計(jì)師在設(shè)計(jì)此類項(xiàng)目時(shí)同樣要以操作者的體驗(yàn)和效率為重，讓操作者輕易可以找到在當(dāng)前頁面中最重要的功能。

Robo Advisor - Projection, List and Questionnaire by Michal Parulski

網(wǎng)站組成部分

了解了網(wǎng)站的不同類別后，讓我們來看看組成一個(gè)網(wǎng)站需要哪些部分吧。網(wǎng)站是由不同網(wǎng)頁通過超鏈接連接而成的，而不同網(wǎng)頁也是由不同模塊組成的。我們?cè)O(shè)計(jì)的是一個(gè)像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò)，而不是一張海報(bào)。所以我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)要格外考慮從用戶角度出發(fā)看到的網(wǎng)站，而不能孤立地把它想象成一個(gè)平面作品。

首頁

訪問一個(gè)網(wǎng)站時(shí)第一個(gè)我們觸及的就是網(wǎng)站首頁。首頁別名叫作Index或者Default，是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段，網(wǎng)站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個(gè)子網(wǎng)頁就點(diǎn)擊鏈接即可進(jìn)入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導(dǎo)用戶進(jìn)入不同區(qū)域的一個(gè)“目錄”，這個(gè)目錄除了導(dǎo)航功能外也要露出一部分內(nèi)容給用戶來吸引點(diǎn)擊，露出的部分一定要有一個(gè)“更多”按鈕來指引用戶找到二級(jí)頁面。

首頁原型圖

二級(jí)頁面

在邏輯上，首頁是一級(jí)頁面，從首頁點(diǎn)擊進(jìn)入的頁面均為二級(jí)頁面。二級(jí)頁面之后還有三級(jí)頁面等級(jí)別。從點(diǎn)擊的概率上來說，自然是越靠前訪問量越高，頁面層級(jí)越深越不容易被用戶找到。一般網(wǎng)站有三級(jí)頁面，就是為了避免用戶迷失。為此還會(huì)在頁面中加入面包屑導(dǎo)航。面包屑導(dǎo)航就是在頁面第一屏出現(xiàn)的諸如首頁 > 體育 > NBA頻道這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在那里，并且點(diǎn)擊可以回到其他頁面。

二級(jí)頁面原型圖

底層頁

在網(wǎng)站結(jié)構(gòu)中最后提供用戶實(shí)質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級(jí)頁面中我們點(diǎn)擊感興趣的標(biāo)題后，在底層頁中才會(huì)看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢(shì)在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評(píng)論；底側(cè)也會(huì)有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能?？傊?，在用戶閱讀完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢(shì)閱讀其他的資訊或者回到頻道。

底層頁原型圖

門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一般由負(fù)責(zé)運(yùn)營需求的設(shè)計(jì)師負(fù)責(zé)，但是也可能由頻道設(shè)計(jì)師、產(chǎn)品側(cè)設(shè)計(jì)師來完成。在網(wǎng)站中常見到的廣告圖形式就是banner。banner一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動(dòng)、推薦資訊等。那么banner圖的尺寸有固定嗎？答案是沒有。Banner的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準(zhǔn)的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以banner不可以做得很高，否則第一屏信息會(huì)顯示得不夠。你可能會(huì)說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏?xí)俸芏唷Ｒ簿褪呛芏嘤脩艨赡茳c(diǎn)擊網(wǎng)站后就會(huì)跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的banner不應(yīng)該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的Banner區(qū)域?yàn)?380x350px。那么除了首頁巨大的banner廣告位，網(wǎng)站還有哪些廣告形式呢？

對(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ù)制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進(jìn)網(wǎng)站你就會(huì)被全面轟炸，無法不注意到這個(gè)廣告的存在。這種廣告點(diǎn)擊進(jìn)入還有配合的專題頁等，可見需要設(shè)計(jì)師配合的地方非常多。

對(duì)聯(lián)廣告形式

信息流廣告。信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會(huì)不自覺地閱讀起廣告的內(nèi)容，原因是因?yàn)樗男问胶推渌畔⒁粯印１热缗笥讶?、知乎、Facebook都采用了信息流廣告，信息流廣告的效果非常強(qiáng)，但是會(huì)犧牲一定的用戶體驗(yàn)。信息流廣告的尺寸與信息流相同。

知乎APP中信息流中的廣告

以上從廣告的形式上簡單介紹了三種常見的網(wǎng)站廣告形式，如果我們?cè)陂喿x需求時(shí)看到了cpm、pv等單詞是什么意思呢？他們是廣告的收費(fèi)模式。cpm是指按照廣告pv來收費(fèi)，cps是指按照用戶消費(fèi)收費(fèi)，cpa是指按照用戶注冊(cè)數(shù)收費(fèi)，cpc是指按照用戶點(diǎn)擊付費(fèi)。針對(duì)不同的收費(fèi)模式，在設(shè)計(jì)時(shí)也會(huì)采取不同策略來增強(qiáng)廣告需要達(dá)到的目的。

Footer

在網(wǎng)站具體的頁面設(shè)計(jì)中，底部會(huì)有一個(gè)區(qū)域我們稱之為footer。一般footer的顏色都會(huì)比上邊內(nèi)容區(qū)域要暗，因?yàn)閒ooter的信息在邏輯的級(jí)別上是次要的。footer區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號(hào)等信息。在設(shè)計(jì)時(shí)一定要降級(jí)處理，不要讓footer變得特別明顯。

技術(shù)原理

網(wǎng)頁設(shè)計(jì)師在做項(xiàng)目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計(jì)和交互是可以實(shí)現(xiàn)的、哪些是不可以的。同時(shí)技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復(fù)雜的交互。其實(shí)在過去網(wǎng)頁前端工程師和設(shè)計(jì)師是一個(gè)崗位，就叫做網(wǎng)頁美工，這個(gè)職位需要在完成視覺設(shè)計(jì)后把頁面做成靜態(tài)網(wǎng)頁交給下面的環(huán)節(jié)。隨著分工越來越細(xì)致，產(chǎn)生了網(wǎng)頁設(shè)計(jì)師和前端工程師兩個(gè)工種。但是網(wǎng)頁設(shè)計(jì)師不可以脫離技術(shù)局限天花亂墜地去設(shè)計(jì)。下面讓我們來了解網(wǎng)站的基本存儲(chǔ)原理：在您的電腦C盤保存一個(gè)叫l(wèi)ogo.jpg的圖片，然后在瀏覽器打開這個(gè)網(wǎng)址：C:\logo.jpg你看到了什么？對(duì)，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲(chǔ)在一個(gè)類似我們電腦的東西里，那就是服務(wù)器。我們通過域名來調(diào)取網(wǎng)中不同的頁面和文件，如果服務(wù)器關(guān)機(jī)了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過瀏覽器訪問網(wǎng)站時(shí)，敲擊一個(gè)網(wǎng)址，這時(shí)這個(gè)域名會(huì)轉(zhuǎn)向一個(gè)IP地址，這個(gè)IP地址就是服務(wù)器所在的門牌號(hào)碼。找到了以后，我們的瀏覽器會(huì)從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實(shí)際上都是代碼的形式。瀏覽器還會(huì)把網(wǎng)站中所需要的圖片、視頻等單獨(dú)下載到緩存里。當(dāng)我們通過表單輸入用戶名和密碼時(shí)，我們的信息就會(huì)上傳到服務(wù)器中，服務(wù)器處理完（比如登陸成功這個(gè)信息）然后再下發(fā)給我們的瀏覽器。所以平時(shí)我們?cè)L問網(wǎng)站時(shí)，我們的電腦和瀏覽器要通過互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次“握手”。當(dāng)然老“握手”會(huì)造成加載速度變慢，于是我們聰明的瀏覽器會(huì)把已經(jīng)下載過的資源緩存下來，避免浪費(fèi)。這個(gè)機(jī)制就是“cookies”：瀏覽器會(huì)自動(dòng)存儲(chǔ)你訪問過的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。

基于鼠標(biāo)的手勢(shì)操作

基于鼠標(biāo)的交互

在不久的未來，個(gè)人電腦可能通過多點(diǎn)觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計(jì)最主流的交互方式還是鼠標(biāo)和鍵盤。來讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對(duì)鼠標(biāo)的使用無外乎移動(dòng)、左鍵、右鍵、拖拽四種方式。我們?cè)陧撁嬷械拇蟛糠植僮鞫际峭ㄟ^鼠標(biāo)左鍵點(diǎn)擊完成的，所以網(wǎng)頁也是點(diǎn)擊的藝術(shù)。右鍵一般會(huì)喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會(huì)將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個(gè)狀態(tài)吧（前端術(shù)語是：超鏈接標(biāo)簽的CSS四個(gè)偽類）。

按鈕與文字的不同狀態(tài)

Link是指超鏈接正常的時(shí)候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開來，比如換一種顏色或者加下劃線。當(dāng)然下劃線還有一個(gè)作用就是方便弱視群體區(qū)分超鏈接與普通文字。Link默認(rèn)都是藍(lán)色的（色值：#72ACE3），但是為了增強(qiáng)網(wǎng)站的品牌性我們也可以把鏈接顏色更換成另一種顏色。總之一定要在形式上與普通文字產(chǎn)生差別才可以。

Visited是超鏈接被點(diǎn)擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點(diǎn)擊完一個(gè)新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了Visited屬性，點(diǎn)擊后的新聞?lì)伾筒灰粯恿?，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。

Hover：是超鏈接鼠標(biāo)經(jīng)過狀態(tài)。這個(gè)狀態(tài)是連接中最為重要的狀態(tài)。其實(shí)不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應(yīng)該設(shè)置Hover屬性，也就是鼠標(biāo)懸停時(shí)的狀態(tài)。一般來說變換顏色和放大是Hover狀態(tài)的基本方式。

Active：是指超鏈接的激活狀態(tài)。點(diǎn)擊后超鏈接可以通過CSS加載一個(gè)狀態(tài)。

同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點(diǎn)擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計(jì)成不同的樣式，方便用戶通過鼠標(biāo)感知這個(gè)物體是被我按下去的，這種給用戶的暗示我們也叫做“點(diǎn)擊感”。當(dāng)然按鈕會(huì)和鏈接稍有不同，按鈕除了具備正常和鼠標(biāo)懸停等狀態(tài)，還有一種狀態(tài)叫不可點(diǎn)擊。這種狀態(tài)將按鈕置灰，提示用戶這個(gè)功能因?yàn)闂l件不滿足不可以點(diǎn)擊。好了，您可以舉出幾個(gè)點(diǎn)擊感Web設(shè)計(jì)的例子嗎？

靜態(tài)網(wǎng)頁

了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來聊點(diǎn)真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由HTML編譯的，我們?cè)诜?wù)器上存儲(chǔ)的網(wǎng)頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標(biāo)記語言?！俺谋尽笔钦f這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對(duì)于沒有編程的人來說可能會(huì)很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會(huì)將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用HTML語言寫一段文字會(huì)是什么樣呢？

模擬代碼編譯過程

沒錯(cuò)，代碼就是這么一點(diǎn)一點(diǎn)編起來的。在任何網(wǎng)站空白處右鍵點(diǎn)擊查看網(wǎng)頁源代碼你就可以看到網(wǎng)頁的HTML代碼啦。HTML這種代碼是由一個(gè)國際組織 - W3C發(fā)布和維護(hù)的。W3C創(chuàng)建于1994年，是網(wǎng)站國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C已經(jīng)發(fā)布了HTML的諸多版本，其中影響最深遠(yuǎn)的是HTML4版本。而HTML5簡稱H5則可以說是劃時(shí)代的版本了。H5的標(biāo)簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉Flash插件了。（Flash插件帶來了比如系統(tǒng)漏洞、加載速度過慢等問題）同時(shí)H5對(duì)多平臺(tái)支持很好，所以適應(yīng)移動(dòng)端為王的當(dāng)今時(shí)代。H5甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍(lán)湖等）、多媒體等多種形式。可是由于IE瀏覽器這類不支持HTML5效果的瀏覽器在用戶中占比還很高，所以造成了HTML5發(fā)展的制約。瀏覽器可以理解為一個(gè)代碼閱讀器，由于它對(duì)HTML5代碼的翻譯工作不好就會(huì)造成所謂“兼容性”的問題。比如HTML5中可以通過代碼給一個(gè)DIV添加投影，那么在某些瀏覽器中就顯示不了這個(gè)效果。不難理解為什么有程序員會(huì)穿著 i hate IE字樣的T恤了吧。在每次做完一個(gè)網(wǎng)站項(xiàng)目時(shí)，測(cè)試工程師都會(huì)用Chrome、Safari、Firefox、Opera、IE、Edge等多個(gè)瀏覽器測(cè)試網(wǎng)站的兼容性，這時(shí)通常讓前端工程師非常頭疼。因?yàn)榇a動(dòng)一發(fā)牽全身，經(jīng)常這個(gè)好了那個(gè)又不行了。但是針對(duì)這種問題也有一些解決方案，比如減少對(duì)用戶占比不高瀏覽器的支持、對(duì)不好搞的瀏覽器單獨(dú)加載特定的適配代碼等。道高一尺魔高一丈呀。

其他前端語言

有了HTML這個(gè)骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來服務(wù)器下載代碼和圖片等資源進(jìn)行“握手”，而且很多HTML代碼都是重復(fù)的，造成了資源的浪費(fèi)。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的，那么每個(gè)頁面都會(huì)啰嗦這幾句代碼。這個(gè)問題沒多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是CSS和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是HTML完全分開，并且一個(gè)網(wǎng)站可以下載一份CSS然后不同頁面都調(diào)取這份CSS的緩存，那么就節(jié)省了服務(wù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點(diǎn)擊和菜單等，那么需要前端工程師使用Javas cript代碼來配合。Javas cript是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的非常順手。所以目前主流的網(wǎng)站配置是HTML5+CSS3+JS代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用HTML4+CSS+JS的套餐。這取決于我們的主要目標(biāo)用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí)HTML、CSS、JS代碼然后進(jìn)行前端開發(fā)，因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。

主流形式：HTML + CSS + JS

動(dòng)態(tài)網(wǎng)頁

了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談?wù)劸W(wǎng)站如何動(dòng)起來。動(dòng)態(tài)網(wǎng)頁不是說它有狂拽酷炫的動(dòng)畫，而是動(dòng)態(tài)網(wǎng)頁會(huì)隨著時(shí)間、內(nèi)容和數(shù)據(jù)庫的調(diào)用而產(chǎn)生動(dòng)態(tài)的網(wǎng)頁。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁的HTML代碼并不需要人去手工修改，而是讓小編通過后臺(tái)錄入新聞、上傳圖片就好了。小編上傳后臺(tái)的過程就會(huì)輸入數(shù)據(jù)庫，而動(dòng)態(tài)網(wǎng)頁又是調(diào)取數(shù)據(jù)庫內(nèi)容顯示給用戶的一種形式。動(dòng)態(tài)網(wǎng)頁會(huì)隨時(shí)調(diào)取數(shù)據(jù)庫中的信息給用戶，而對(duì)用戶來說似乎靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁長得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁結(jié)尾是html或htm，而動(dòng)態(tài)網(wǎng)頁由于使用了高級(jí)網(wǎng)頁編程技術(shù)，結(jié)尾則是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是動(dòng)態(tài)網(wǎng)頁的語言，當(dāng)然有的時(shí)候?yàn)榱俗尵W(wǎng)站效率提升也會(huì)使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁就一致了，但是實(shí)際上是會(huì)在用戶訪問前調(diào)取一遍數(shù)據(jù)庫的。同時(shí)動(dòng)態(tài)網(wǎng)頁的網(wǎng)址會(huì)有一個(gè)特點(diǎn)，含有？符號(hào)。動(dòng)態(tài)語言目前最火的是Php，較早而現(xiàn)在比較少見的是Asp、Cgi，最安全的是Jsp，所以很多銀行采用JSP編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運(yùn)行原理了。

主流后臺(tái)編譯語言：PHP ASP JSP CGI

雪碧圖

我們經(jīng)?？吹骄W(wǎng)站中會(huì)有動(dòng)畫，那么動(dòng)畫實(shí)現(xiàn)的原理一般有如下這么幾個(gè)：第一，HTML5視頻播放；這種方式缺點(diǎn)就是不兼容低端瀏覽器。第二，F(xiàn)lash Player播放器播放；這種方式的缺點(diǎn)是Flash安全性很低而且效率慢。第三，動(dòng)畫使用Gif格式；這種方式的問題是動(dòng)畫長度不夠，并且這個(gè)格式僅僅支持透明和不透明兩級(jí)屬性。那么像Google首頁Doodle的動(dòng)畫是怎么實(shí)現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS雪碧即CSS Sprite，也有人叫CSS精靈，它是一種CSS圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級(jí)透明的PNG格式，然后把動(dòng)畫并排排列出來。比如一個(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，然后過一秒鐘代碼會(huì)悄悄移動(dòng)100px我們就看到了動(dòng)作2。由于速度很快就讓我們看到了連續(xù)動(dòng)畫。雪碧圖也有自身的缺點(diǎn)：如果幀數(shù)太多，會(huì)消耗很大的內(nèi)存。所以幀數(shù)一定要控制少。如果你的動(dòng)作設(shè)計(jì)了12幀，那么我建議你可以試試將2,4,6,8,10刪除，保留一半的動(dòng)作。

雪碧圖

視差滾動(dòng)

視差滾動(dòng)是一種運(yùn)動(dòng)速率不一樣的設(shè)計(jì)效果，用以實(shí)現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運(yùn)用了視差滾動(dòng)效果。其實(shí)現(xiàn)原理是，代碼判定網(wǎng)頁滾動(dòng)，滾動(dòng)時(shí)頁面中三層圖片運(yùn)動(dòng)速率和位移距離不同。這樣給人造成的視覺體驗(yàn)仿佛是我們?cè)谖锢憩F(xiàn)實(shí)中看到的空間感一樣。視差滾動(dòng)已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動(dòng)，請(qǐng)大膽設(shè)計(jì)并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準(zhǔn)備的就是運(yùn)動(dòng)速率不同的分層靜態(tài)PSD文件。

運(yùn)用了視差滾動(dòng)效果的密爾沃基警察局官網(wǎng)（milwaukeepolicenews.com）

網(wǎng)頁設(shè)計(jì)規(guī)范

終于，經(jīng)歷過長篇大論網(wǎng)站的原理與組成部分后，我們要談?wù)劸W(wǎng)站設(shè)計(jì)的規(guī)范了。網(wǎng)站設(shè)計(jì)并無具體平臺(tái)限定的風(fēng)格，也沒有必須要設(shè)計(jì)的系統(tǒng)級(jí)導(dǎo)航欄和工具欄。所以網(wǎng)站設(shè)計(jì)更加靈活，然而因?yàn)樘`活也會(huì)讓我們的設(shè)計(jì)師無從下手。那么接下來我將介紹網(wǎng)站設(shè)計(jì)的規(guī)范，在您工作的時(shí)候可以參考。注意，在設(shè)計(jì)之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會(huì)有誤會(huì)。

畫板尺寸

因?yàn)榫W(wǎng)頁尺寸與用戶屏幕相關(guān)，而用戶屏幕的種類難以統(tǒng)計(jì)。所以我們的設(shè)計(jì)稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版Photoshop網(wǎng)站W(wǎng)eb預(yù)設(shè)尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網(wǎng)頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們?nèi)绻鼍W(wǎng)站時(shí)建議按主流的分辨率1920x1080px來設(shè)計(jì)。所以我們通常設(shè)計(jì)網(wǎng)站時(shí)的網(wǎng)站寬度為1920px，每個(gè)屏幕的高度約為900px。為什么是900px呢？因?yàn)?080還要減去瀏覽器頭部和底部高度，大約就是900px了。內(nèi)容安全區(qū)域?yàn)?200px （或1000px / 1400px）。以這個(gè)尺寸來設(shè)計(jì)相對(duì)標(biāo)準(zhǔn)。當(dāng)然在設(shè)計(jì)網(wǎng)頁前需要知會(huì)前端設(shè)計(jì)尺寸，因?yàn)閷?duì)于適配的方式和后續(xù)配合他們更有發(fā)言權(quán)。

網(wǎng)站的尺寸規(guī)范

文字規(guī)范

我們現(xiàn)在都知道了網(wǎng)站上面的文字是通過前端工程師重新寫在代碼里的。那這種文字在瀏覽器上的渲染與系統(tǒng)和瀏覽器有關(guān)。比如在蘋果電腦上看到的文字效果和Windows系統(tǒng)電腦上看到的文字效果就有所不同：蘋果會(huì)對(duì)文字進(jìn)行渲染，而windows的文字幾乎充滿了像素顆粒。按照用戶占比來說無疑Windows的用戶是主流，所以盡管我們可能使用蘋果電腦設(shè)計(jì)網(wǎng)頁，但是設(shè)計(jì)出來的網(wǎng)頁效果也應(yīng)該和Windows顯示一致。否則我們?cè)O(shè)計(jì)完漂亮的設(shè)計(jì)稿，程序員無法還原成我們?cè)O(shè)計(jì)的樣子。另外，字號(hào)的大小也非常重要。網(wǎng)頁的顯示區(qū)域決定了文字不可以過大，在網(wǎng)站設(shè)計(jì)中我們的文字大小一般來說是12-20像素。為什么不能比12px更小？因?yàn)槿绻?2像素更小的中文無法放得下復(fù)雜的筆畫了。而且奇數(shù)的文字表現(xiàn)和適配都不好做，也就是說我們必須使用偶數(shù)的字號(hào)來設(shè)計(jì)。那么總結(jié)一下：文字使用宋體、大小為12px、渲染方式選擇無。稍大一些的字體使用微軟雅黑、大小為14-20px、渲染方式選擇Windows Lcd或銳利。另外，英文和數(shù)字需使用Arial字體，渲染方式選擇無。

網(wǎng)站字體規(guī)范

圖片規(guī)范

網(wǎng)站設(shè)計(jì)中的圖片常用4（寬）：3（高）、16（寬）：9（高）、1:1等比例。具體圖片大小沒有固定要求，但整數(shù)和偶數(shù)為佳。主要是考慮到一些適配的問題。作為內(nèi)容出現(xiàn)的圖片一定需要有介紹信息和排序信息。圖片的格式有很多，比如支持多級(jí)透明的png格式、圖片文件很小的jpg格式、支持透明/不透明并且支持動(dòng)畫的gif格式等。在保證圖像清晰度地情況下文件大小越小越好，如何讓網(wǎng)頁使用的圖片更小呢？

第一種方法，給程序員切圖的時(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í)需要下載網(wǎng)頁所調(diào)用的圖片資源，那么如果一個(gè)網(wǎng)站有一百張圖片的話，瀏覽器和服務(wù)器就得握一百次。第一會(huì)耗費(fèi)服務(wù)器資源，第二訪問速度就會(huì)慢一些。所以前端工程師們有一種做法，就是把網(wǎng)頁中所使用的圖片拼成一大張png。然后每個(gè)調(diào)用圖片的元素都調(diào)用這張圖片然后分別位移一點(diǎn)兒，顯示的那塊區(qū)域移動(dòng)到一大張圖片中所需要的那個(gè)圖像。

在線壓縮工具Tinypng網(wǎng)站

按鈕

按鈕的風(fēng)格在過去的十幾年發(fā)生了很大的變化，由一開始的“斜面與浮雕”風(fēng)格過渡到后面的“擬物風(fēng)格”，現(xiàn)在更流行的是扁平風(fēng)格。如果按鈕在一張圖片中，為了不影響圖片的美觀性，會(huì)去掉填充只保留邊框，這種設(shè)計(jì)方式叫做幽靈按鈕。注意在設(shè)計(jì)按鈕時(shí)記得同時(shí)設(shè)計(jì)好按鈕的鼠標(biāo)懸停、按下狀態(tài)。

不同時(shí)代下不同的按鈕風(fēng)格

表單

在網(wǎng)站設(shè)計(jì)中我們經(jīng)常需要使用一些輸入框、下拉菜單、彈窗、單選框、復(fù)選框、編輯器等。這些都是系統(tǒng)級(jí)的控件，一般是直接調(diào)用系統(tǒng)設(shè)計(jì)的。但是系統(tǒng)設(shè)計(jì)有時(shí)不能滿足我們的要求：系統(tǒng)內(nèi)置的表單高度不夠，點(diǎn)擊起來不舒服；不符合網(wǎng)站整體設(shè)計(jì)的品牌感等。那么我們可以通過CSS給這些表單增加樣式，包括顏色、大小、內(nèi)外邊距等。所以我們遇到涉及到表單的需求時(shí)也可以進(jìn)行自定義設(shè)計(jì)。

表單不同風(fēng)格的設(shè)計(jì) UIDE Kit by Mateusz Dembek

柵格

我們把整體寬度定義為W。然后整個(gè)寬度分成多個(gè)等分單元A。每個(gè)單元A中有元素a和間距i。所以他們之間的關(guān)系就是 (A×n)-i=W。當(dāng)然每個(gè)應(yīng)用的尺寸不止可以整除成一種柵格，這就要看我們內(nèi)容排版的疏密程度了。之后，我們將過多內(nèi)容的柵格和另一個(gè)柵格相加得到更大的排版空間；其他元素都須老老實(shí)實(shí)呆在自己的柵格內(nèi)，這樣就完成了一個(gè)布局非常科學(xué)的設(shè)計(jì)了。比如

如果網(wǎng)頁寬度是1000px，我們可以使用：

20列每列40px和10像素間隔

20列每列30px和20像素間隔

25列每列30px和10像素間隔

25列每列20px和20像素間隔

如果網(wǎng)頁寬度是990px，我們可以使用：

11列每列80px和10像素間隔

18列每列35px和20像素間隔

25列每列45px和10像素間隔

33列每列20px和10像素間隔

如果網(wǎng)頁寬度是980px，我們可以使用：

14列每列60px和10像素間隔

14列每列50px和20像素間隔

28列每列25px和10像素間隔

柵格系統(tǒng)具體有以下優(yōu)勢(shì)：能大大提高網(wǎng)頁的規(guī)范性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。另外，基于柵格進(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗(yàn)。

網(wǎng)站的柵格化會(huì)使網(wǎng)站看起來更有秩序感

適配Retina屏幕

2012年蘋果發(fā)布了Retina Macbook Pro，Retina屏幕的電腦占有量越來越高了。Retina屏幕簡單地說就是屏幕密度是傳統(tǒng)屏幕的兩倍，擁有更大地清晰度。甚至可以滿足我們視網(wǎng)膜最高的識(shí)別度，所以也叫視網(wǎng)膜屏幕。這種屏幕下我們?cè)O(shè)計(jì)的安全距離大約為1000像素的網(wǎng)站就顯得非常粗糙了。所以如果我們現(xiàn)在Retina屏幕下顯示一個(gè)400X300PX的區(qū)域，實(shí)際上我們需要提供給前端一張800X600PX的切圖才行，因?yàn)镽etina屏幕一個(gè)點(diǎn)頂過去兩個(gè)像素。那么我們的用戶是視網(wǎng)膜屏占比更多的用戶，比如設(shè)計(jì)師群體，那怎么兼顧高清屏幕和普通屏幕呢？

首先我們需要以視網(wǎng)膜屏幕大小完成設(shè)計(jì)稿，建議是傳統(tǒng)設(shè)計(jì)稿的兩倍。之后切出兩套切圖（非Retina屏幕用戶如果也加載雙倍大小的資源會(huì)很慢），普通的切圖命名為如logo.jpg，Retina切圖命名為logo@2x.jpg。前端用代碼來識(shí)別，如果屏幕是Retina就加載雙倍尺寸，不是則加載普通尺寸。前端可以使用Retina.js（https://retinajs.com/）提供的技術(shù)進(jìn)行識(shí)別。

自適應(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)的原理是相似的，都是通過代碼檢測(cè)設(shè)備屏幕寬度，根據(jù)不同的設(shè)備加載不同的css。

自適應(yīng)網(wǎng)站

自適應(yīng)網(wǎng)站的設(shè)計(jì)稿是一致的，但是設(shè)計(jì)稿需要考慮屏幕變小時(shí)的變化方式。比如一個(gè)網(wǎng)站的內(nèi)容有5個(gè)區(qū)塊和4個(gè)間距，那么如果寬度縮小成900時(shí)需要如何變化，這就是自適應(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ī)來訪問，就會(huì)給你導(dǎo)入一份手機(jī)才有的樣式；如果是電腦的寬度就給你導(dǎo)入電腦的CSS樣式。對(duì)于設(shè)計(jì)師來說，自適應(yīng)需要考慮網(wǎng)站在不同設(shè)備寬度下的整除與排版；響應(yīng)式則需要設(shè)計(jì)電腦、平板、手機(jī)等至少三套設(shè)計(jì)稿（但這三套設(shè)計(jì)稿的內(nèi)容是一致的）?？傊?，自適應(yīng)和響應(yīng)式都是網(wǎng)站為了用戶體驗(yàn)所適應(yīng)瀏覽設(shè)備而做出的努力。

適配的規(guī)范

手機(jī)方面：適配手機(jī)頁面時(shí)，我們一般以iPhone為畫布標(biāo)準(zhǔn)。原因是iPhone相對(duì)顯示比較清晰，并且要求較高。而且用戶占有量也很高。在適配時(shí)我們一般以750x1334px尺寸為主，然后將網(wǎng)站導(dǎo)航改變?yōu)槭謾C(jī)APP常常使用的漢堡包+抽屜式導(dǎo)航的形式。同時(shí)網(wǎng)站里的按鈕也需要變?yōu)槭謾C(jī)APP中我們看到的左右?guī)缀鯘M屏的按鈕，并且每個(gè)按鈕要大于88PX，方便手指的點(diǎn)擊。字體方面，我們要把網(wǎng)站的字體全部改為蘋方字體，并且字號(hào)設(shè)置為24PX以上，渲染方式設(shè)置成銳利。英文則需要使用SF-UI代替。也就是將網(wǎng)站改變成一個(gè)類APP的手機(jī)網(wǎng)頁，這樣才可以保證手機(jī)用戶體驗(yàn)良好。如果用戶使用安卓手機(jī)，那么前端代碼則會(huì)基于設(shè)計(jì)稿的設(shè)計(jì)適度加大圖片與間距來適應(yīng)安卓屏幕。

iPad：iPad的尺寸為1024x768、2048x1536px等，無論怎么變基本與電腦屏幕尺寸類似。所以在iPad上瀏覽網(wǎng)頁是基本舒適的。因此，很多網(wǎng)站并沒有專門為iPad做適配，如果我們希望iPad用戶用的更爽，可以從文字大小（24PX以上）、按鈕大小（88PX左右以及以上）、交互形式（抽屜式導(dǎo)航、導(dǎo)航不隨屏幕滾動(dòng)）等方式入手。

不同設(shè)備的注意事項(xiàng)

總結(jié)

無論您面對(duì)的項(xiàng)目是To C的還是To B的網(wǎng)站產(chǎn)品，我們都應(yīng)該首先確立設(shè)計(jì)風(fēng)格 > 尋找設(shè)計(jì)素材 > 建立情緒板 > 完成視覺稿 > 切圖標(biāo)注 > 建立視覺規(guī)范 > 進(jìn)行項(xiàng)目走查。

如果設(shè)計(jì)一般網(wǎng)站的頁面，可以按照1920 X 1080px尺寸設(shè)計(jì)。每屏高度900px，字體使用宋體 12px 無和微軟雅黑 14-20 Windows LCD。Banner盡量滿屏，但是圖片需要按照4:3或16:9等比例來設(shè)計(jì)。做網(wǎng)站時(shí)可以建立柵格以更好地進(jìn)行自適應(yīng)和響應(yīng)式布局，我們也要為超鏈接和按鈕設(shè)計(jì)不同的相應(yīng)鼠標(biāo)的狀態(tài)；另外我們也可以多多嘗試在網(wǎng)站設(shè)計(jì)中加入視差滾動(dòng)、雪碧圖動(dòng)畫等好玩的交互。

如果設(shè)計(jì)手機(jī)端的頁面，可以按照750X1334PX尺寸設(shè)計(jì)。字體使用蘋方 24PX以上銳利。英文字體使用SF UI。按鈕和點(diǎn)擊區(qū)域需要大于88PX方便手指點(diǎn)擊。并且頭部需要預(yù)留出微信或?yàn)g覽器的導(dǎo)航區(qū)域。

怎么樣？閱讀完本文您是否有所收獲呢？歡迎在評(píng)論區(qū)討論哦。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(5246)

252018-7

一個(gè)懂市場(chǎng)的設(shè)計(jì)師有多可怕？

博博

一個(gè)懂市場(chǎng)的設(shè)計(jì)師有多可怕？

118天前發(fā)布

集創(chuàng)堂原創(chuàng)文章 / UI / 觀點(diǎn)

330 1

設(shè)計(jì)師不是孤立的，我們的一切設(shè)計(jì)都是多種條件共同作用的結(jié)果，考量產(chǎn)品處于什么樣的市場(chǎng)，是做好設(shè)計(jì)的基石。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

為什么要跟設(shè)計(jì)師聊市場(chǎng)？因?yàn)樵O(shè)計(jì)師不是孤立的，我們的一切設(shè)計(jì)都是多種條件共同作用的結(jié)果，考量產(chǎn)品處于什么樣的市場(chǎng)，是做好設(shè)計(jì)的基石。今天要跟大家談的就是處于現(xiàn)有市場(chǎng)、全新市場(chǎng)、垂直市場(chǎng)的產(chǎn)品所對(duì)應(yīng)的設(shè)計(jì)策略。

現(xiàn)有市場(chǎng)的設(shè)計(jì)策略

現(xiàn)有市場(chǎng)是社會(huì)價(jià)值和用戶需求已經(jīng)被論證的市場(chǎng)，比如淘寶、京東、天貓、58同城、美團(tuán)、手機(jī)類等都是現(xiàn)有市場(chǎng)。這些產(chǎn)品的用戶量很大，新的產(chǎn)品加入很難發(fā)掘新的競(jìng)爭(zhēng)機(jī)會(huì)。

就拿手機(jī)來說，經(jīng)過幾十年的開發(fā)后，各種產(chǎn)品的設(shè)計(jì)非常的雷同。所以在這個(gè)市場(chǎng)里，從產(chǎn)品的宏觀角度來說，設(shè)計(jì)往往起不到太大的作用了。假如我們采用差別化戰(zhàn)略，那么往往拼的是性價(jià)比。小米就是這樣做的，小米通過優(yōu)化利益鏈條，它可以將一個(gè)價(jià)值3000元的手機(jī)賣到1900元。

那么這里我們提一個(gè)問題，你覺得小米手機(jī)到底屬于是設(shè)備還是互聯(lián)網(wǎng)產(chǎn)品？

小米為什么說自己是互聯(lián)網(wǎng)公司？一部分原因是小米是完全的借助互聯(lián)網(wǎng)發(fā)售，這樣就省去了中介環(huán)節(jié)，手機(jī)直接發(fā)給用戶也確實(shí)省去了渠道成本，所以這樣它才有能力把價(jià)格賣到這么低。但是這又涉及到另外一個(gè)問題，這種有形產(chǎn)品需要經(jīng)過了解、信任、價(jià)值和轉(zhuǎn)化這套流程，小米沒有渠道和中介環(huán)節(jié)，那么最開始它是如何讓用戶產(chǎn)生了解和信任的呢？

為了做到這一點(diǎn)，小米造出了一個(gè)詞：“粉絲文化”。它讓用戶通過在論壇不停地地提建議和互動(dòng)，通過交流讓用戶自己完成了對(duì)小米手機(jī)的了解和信任，完成了銷售的第一步。但是這還不足說明它是互聯(lián)網(wǎng)產(chǎn)品，還有另外的原因。那么第二步呢？

設(shè)備類產(chǎn)品通常軟件和硬件是融合到一起的。比方說，聯(lián)想手機(jī)，它被生產(chǎn)出來后，它的系統(tǒng)不會(huì)再頻繁的升級(jí)，因?yàn)槁?lián)想手機(jī)的產(chǎn)品線過于龐大，因此也無法保證能常常升級(jí)的頻率，而小米卻帶來了不一樣的變化。

首先小米只有一款手機(jī)，這樣它維護(hù)起來更加方便，其次，小米分離了軟件和硬件，使自己變成了獨(dú)立的操作系統(tǒng)，然后像app一樣借助自己的平臺(tái)即時(shí)收集用戶的反饋和意見，定期更新和優(yōu)化自己的系統(tǒng)。這就是互聯(lián)網(wǎng)思維的特性二：專注、反饋、快速、頻繁迭代，它在小米身上得到了充分的體現(xiàn)。

小米的這種研發(fā)模式，結(jié)合了手機(jī)的特點(diǎn)和互聯(lián)網(wǎng)的更新特點(diǎn)，確實(shí)能時(shí)刻抓住刺激粉絲的興奮點(diǎn)。這種模式前期確實(shí)起到了不錯(cuò)的效果，但是同時(shí)也埋了地雷。在產(chǎn)品開發(fā)的世界里，很多的難題都出現(xiàn)在大家都看不到的區(qū)域。比如如三星的s3、 s4 引入了大量的創(chuàng)新功能，加了很多的傳感器，但是這些東西加入后，誰也不知道會(huì)不會(huì)對(duì)手機(jī)的基礎(chǔ)功能出現(xiàn)影響，畢竟大家都不能未卜先知。到了一年后最后大家才發(fā)現(xiàn)三星的旗艦機(jī)，用了一年后系統(tǒng)會(huì)癱瘓，這是因?yàn)榇罅啃录夹g(shù)的加入，帶來了很多未知的問題。

小米也是，小米的軟硬分離讓帶來了軟件可以快速升級(jí)，從而可以迅速迎合用戶的優(yōu)勢(shì)。但是同時(shí)也帶來了問題，小米手機(jī)如果使用了一段時(shí)間，硬件的觸摸上就會(huì)出現(xiàn)一些出現(xiàn)錯(cuò)誤。

小米的商業(yè)策略成功后，一大批企業(yè)，華為、聯(lián)想、中興把它們的手機(jī)都變?yōu)榱饲г獧C(jī)系列。當(dāng)然這些公司也只是盲目的打價(jià)格戰(zhàn)而已，小米的千元精髓，并未被根本復(fù)制出來。

上面談的這些，都是在講我們從傳統(tǒng)的設(shè)計(jì)邏輯中擺脫出來，可以嘗試看到更多的商業(yè)邏輯。集創(chuàng)堂反對(duì)的是孤島型設(shè)計(jì)師，我們主張?jiān)O(shè)計(jì)師更多的從市場(chǎng)、產(chǎn)品、自身形態(tài)多個(gè)角度去看待問題，這樣才能讓自己的設(shè)計(jì)價(jià)值最大化。我們?cè)賮碚劦诙€(gè)例子，這個(gè)和設(shè)計(jì)有關(guān)。

翼支付要從支付寶中搶奪份額

還有一個(gè)類似的故事是天翼支付如何搶奪支付寶市場(chǎng)份額的故事，這種形態(tài)的產(chǎn)品，設(shè)計(jì)是無法起到?jīng)Q定性的作用的。道理很簡單：在現(xiàn)有市場(chǎng)里，你的產(chǎn)品功能和支付寶一模一樣，并且支付寶占據(jù)了市場(chǎng)，那么你的設(shè)計(jì)就很難找到什么突破點(diǎn)去打破這種統(tǒng)治，唯一的辦法——咱們說的直白點(diǎn)——就是用錢砸，支付寶年收益率是4%，你是8%，這樣才有機(jī)會(huì)從市場(chǎng)中拿到一點(diǎn)點(diǎn)份額。因?yàn)樵诂F(xiàn)有市場(chǎng)中這種前提下，產(chǎn)品拼的就是錢，就是銷售成本。

蘭切斯特戰(zhàn)略里曾經(jīng)提到：“在現(xiàn)有市場(chǎng)中，對(duì)于那些已經(jīng)形成市場(chǎng)統(tǒng)治力的產(chǎn)品，要想和它斗爭(zhēng)的話，你的銷售和投入必須是它的三倍才有機(jī)會(huì)獲勝”。看來從這點(diǎn)來說我剛說的8%已經(jīng)少了，應(yīng)該是12%。

講這個(gè)些例子是想告訴設(shè)計(jì)師，很多時(shí)候如果你努力的方向?qū)?，你的努力其?shí)都是無用功，不是什么事拼命去做都就一定會(huì)帶來價(jià)值的，這也是我一直在討論集創(chuàng)思維的重要原因。作為一個(gè)設(shè)計(jì)者，前期一定要了解自己的目標(biāo)人群、市場(chǎng)以及產(chǎn)品所處的市場(chǎng)。

全新市場(chǎng)的設(shè)計(jì)策略

全新市場(chǎng)是未被驗(yàn)證社會(huì)價(jià)值的市場(chǎng)，在這個(gè)市場(chǎng)里根本找不到競(jìng)品的，他完全是新的產(chǎn)品，例如Google Glass。中國的企業(yè)甚至整個(gè)亞洲的企業(yè)都很少會(huì)去挑戰(zhàn)全新市場(chǎng)，這種市場(chǎng)的風(fēng)險(xiǎn)極高，往往推出做一款產(chǎn)品設(shè)計(jì)之前要用1年甚至更長的時(shí)間做用戶研究，而且失敗的風(fēng)險(xiǎn)率極高。當(dāng)然也可能帶來很多專利方面的貢獻(xiàn)，一旦成功，利益也是可觀的。

全新市場(chǎng)的產(chǎn)品做用戶調(diào)研的失誤率也非常之高，因?yàn)橛脩魪膩頉]見過設(shè)計(jì)師描述的產(chǎn)品，他們給出的反饋結(jié)果也未必能反應(yīng)他們的真實(shí)訴求。這個(gè)時(shí)候“專家用戶”的觀點(diǎn)就變得極為重要，因?yàn)閷＜矣脩糸L期處在相應(yīng)的這種環(huán)境中，他們對(duì)于市場(chǎng)的感應(yīng)更加敏銳，所以他們給出的結(jié)果就更可能找到創(chuàng)新產(chǎn)品的生存本質(zhì)。之前講到到Google Glass就是全新市場(chǎng)的案例。

做全新市場(chǎng)的產(chǎn)品要嚴(yán)格思考自己是否能解答用戶的剛需，這個(gè)可以參考馬斯洛原型中的圖解，除此之外還要考慮這個(gè)產(chǎn)品的使用是否會(huì)成為一個(gè)高頻率事件，這樣才有足夠的商業(yè)空間。我們可以通過“創(chuàng)新三要素”來判定這個(gè)創(chuàng)新是否是一個(gè)合理的創(chuàng)新。

亨利福特說過一句話：假如當(dāng)初我問客戶他們，需要什么，那么他們會(huì)告訴我他們要一匹批更快的馬。那么用戶所要的這匹“更快的馬”的本質(zhì)上是什么呢？

他們本質(zhì)上要的是更快的速度、更快的效率，所以創(chuàng)新三要素的第一個(gè)就是：

A．是否提升了人們的使用效率

例如火車取代馬車，機(jī)器取代手工都是因?yàn)樗鼈兲嵘巳藗兊墓ぷ餍?，這是時(shí)代發(fā)展決定的。所以提升效率是創(chuàng)新能否被廣大用戶接受的第一要素。

B．是否讓人們獲取更多、更準(zhǔn)確的信息

互聯(lián)網(wǎng)的出現(xiàn)取代了著書籍；電商平臺(tái)酒仙網(wǎng)的出現(xiàn)讓更多的人愿意通過它來購買酒水，這是因?yàn)樗鼈兛梢蕴峁┙o用戶更多的信息（可以對(duì)比酒水的價(jià)格）。人們對(duì)于信息的獲取也是一個(gè)很原始的需求，好比一位小販做生意，在東村進(jìn)貨需要4元，在西村進(jìn)貨只就需要2元，如果他事先不知曉這些信息就有可能虧本。所以人們對(duì)信息是充滿渴望的。

當(dāng)前很多的社交產(chǎn)品都會(huì)遇到同樣的問題。微信對(duì)它們的沖擊力太大，特別在信息的通訊效率這方面，沒有產(chǎn)品對(duì)手能拼得過微信。那么拼效率我們走不通，我們卻可以拼在當(dāng)前的場(chǎng)景下如何更好的提升信息。比如陌陌拼掉微信“附近的人”，就是在陌生人社交領(lǐng)域用更多的信息戰(zhàn)勝了更高快的效率。再比如，同性戀社交產(chǎn)品在同性戀領(lǐng)域拼掉微信，也是因?yàn)楦?、更?zhǔn)確的信息戰(zhàn)勝了效率。

C．是否滿足人群在特殊情況、特別資源下的需求

這個(gè)點(diǎn)是指一些創(chuàng)新有獨(dú)特的商業(yè)壁壘、獨(dú)特的資源優(yōu)勢(shì)、獨(dú)特的需求的，例如12306這種產(chǎn)品，或者人工智能等技術(shù)領(lǐng)域就屬于此類。

垂直市場(chǎng)的設(shè)計(jì)策略

垂直市場(chǎng)，也稱為細(xì)分市場(chǎng)。在這個(gè)市場(chǎng)里我們的產(chǎn)品策略通常是細(xì)分一個(gè)規(guī)模很大的現(xiàn)有市場(chǎng)，例如細(xì)分淘寶、細(xì)分社交都能帶來更多的創(chuàng)業(yè)機(jī)會(huì)。這個(gè)也是目前創(chuàng)業(yè)機(jī)會(huì)出現(xiàn)最多的市場(chǎng)。

比如在手機(jī)市場(chǎng)的紅海里，假如我們生產(chǎn)一款老人手機(jī)或兒童手機(jī)，那么這個(gè)就是屬于垂直市場(chǎng)。當(dāng)無數(shù)老人手機(jī)涌現(xiàn)出來的時(shí)候，手機(jī)市場(chǎng)需要細(xì)分去滿足老年群體的需求，因?yàn)楝F(xiàn)有市場(chǎng)的產(chǎn)品無法滿足這類群體的需求，所以市場(chǎng)需要細(xì)分去滿足特殊群體的需求。

細(xì)分這個(gè)市場(chǎng)需要更好地的調(diào)研出市場(chǎng)目標(biāo)人群的需求，然后根據(jù)目標(biāo)人群的特點(diǎn)來開發(fā)產(chǎn)品，設(shè)計(jì)師應(yīng)該用更多的時(shí)間去調(diào)研目標(biāo)人群的需求，只有更好的找準(zhǔn)人群，才能很好的設(shè)計(jì)出被他們喜愛的功能。

比方說我們要生產(chǎn)老人手機(jī)，那么大家可以看看上圖中的界面，看出有什么問題了嗎？通常我們會(huì)對(duì)于老人機(jī)的理解是認(rèn)為覺得老人眼花，那么大號(hào)字體、大型圖標(biāo)肯定是符合老人非常關(guān)注的一個(gè)特點(diǎn)的設(shè)計(jì)，所以我們?cè)谶@張界面中增大了字號(hào)和點(diǎn)擊模塊。但是經(jīng)過調(diào)查研究發(fā)現(xiàn)，其實(shí)這張界面的設(shè)計(jì)里面的文字和空間擺放也是充滿了問題。

首先很多老人都不明白“聊天室”這個(gè)功能的含義，它居然還放在了頂部這么顯著的位置。另外像“圖庫”這種平時(shí)我們覺得很容易理解的文案，可能很多老人們都覺得理解起來也很困難。

另外還有一個(gè)細(xì)節(jié)特點(diǎn)是非常不容易發(fā)現(xiàn)的，你死盯著界面考慮很難會(huì)注意這一點(diǎn)，那就是老人點(diǎn)擊手機(jī)的時(shí)間比預(yù)想的要長，換句話說就是老人無法區(qū)分的“點(diǎn)擊”會(huì)和“長按”功能發(fā)生沖突。所以，我們?cè)谧隼先藱C(jī)的設(shè)計(jì)時(shí)、就應(yīng)該該取消“長按”的功能，只要老人觸摸到圖標(biāo)就應(yīng)該給予一樣的反饋效果。界面的長按、雙擊和單擊，我們都默認(rèn)是一個(gè)操作。

因?yàn)樵趯?shí)際設(shè)計(jì)過程中，設(shè)計(jì)師還應(yīng)該考慮到系統(tǒng)運(yùn)行速度慢的問題。如果是一個(gè)緩慢的手機(jī)系統(tǒng)，會(huì)帶來造成老人的多次點(diǎn)擊，他們會(huì)懷疑是不是自己沒有點(diǎn)中。所以從上述的觀察，我們可以想象到聯(lián)想到蘋果手機(jī)的 3D Touch，這個(gè)技術(shù)對(duì)于老人們來說是多么大的認(rèn)知負(fù)荷。

另外關(guān)于垂直市場(chǎng)，我們?cè)僬勔豢钌钍?5后喜歡的社交軟件——JUJU。

微信這個(gè)產(chǎn)品當(dāng)初在95后的人群里并不是十分被買賬，記得張小龍?jiān)?jīng)調(diào)研過幾位95后的女孩，向他們推薦微信的功能。例如，微信可以免費(fèi)的發(fā)消息，這可是非常吸引70后和80后的功能，就是一個(gè)很酷的功能。但95后的女孩表示毫無感覺。張小龍和她們聊了很多，最后聊起微信“附近的人”這個(gè)功能，可以查看附近的帥哥美女，兩位95后的女孩才感覺這個(gè)功能很酷。

張小龍頓時(shí)感慨，深受電子產(chǎn)品影響的95后人群崛起后，可能會(huì)對(duì)騰訊的業(yè)務(wù)造成很大的沖擊。時(shí)代的差異會(huì)帶來更多細(xì)分市場(chǎng)的商機(jī)。那么我們可以來品評(píng)下部分95后喜歡的社交軟件JUJU——這是一款二次元社交產(chǎn)品，很多80后甚至90后可能根本沒聽說過。

所謂的“二次元社交”就是用漫畫或動(dòng)漫番劇里的世界觀來進(jìn)行社交，這對(duì)很多不了解二次元世界的人來說是非常艱難的認(rèn)知壁壘，筆者為了解這款軟件，曾經(jīng)潛心在里面陪著各路用戶聊天聊了整整三天，還虛心地拜了位“師傅”，向他們請(qǐng)教各種自己聽看不懂的名詞問題。后來一問自己的“師傅”原來是個(gè)初中生，還沒參加中考。

在JUJU里學(xué)習(xí)的過程中，筆者圍繞了Cosplay、二次元交友積累了大量的文案和談話內(nèi)容，如果你沒看過 live 現(xiàn)行的等幾部知名漫畫或者動(dòng)漫的話會(huì)是非常難以理解JUJU里呈現(xiàn)的內(nèi)容的，但是這些我們看來難以理解的詞句卻詞讓這個(gè)特殊的群體找到了屬于自己的文化認(rèn)知——JUJU二次元中獨(dú)有的文化認(rèn)知。

例如，“六娃的隱身模式”這種在JUJU在設(shè)置里是直接引用的詞，其實(shí)就是app里對(duì)用戶常規(guī)的隱身模式里很火的詞串。大家知道為什么這里會(huì)出現(xiàn)六娃嗎？我相信很多上年紀(jì)的人都不懂，在國產(chǎn)動(dòng)漫界有個(gè)一個(gè)知名的漫畫網(wǎng)站叫“有妖氣”，“有妖氣”上有個(gè)非常出名的漫畫叫《十萬個(gè)冷笑話》，劇情里七個(gè)葫蘆娃里的六娃是隱身娃，它的漫畫設(shè)定是從出生開始就是被動(dòng)隱身的，也就是從來沒有人看到過他的臉，我估計(jì)連他自己都不知道自己長什么樣，這個(gè)梗不知怎么在二次元里就火了，很多二次元的95后只要看到隱身就會(huì)聯(lián)系到六娃。

諸如此類的“暗語”在JUJU中是非常多的，形成了自己獨(dú)有的社交文化，也讓這類用戶找到了歸屬感。

最后還是那句話——不要做孤島型設(shè)計(jì)師，多抬頭看看天，從多維度考量產(chǎn)品的設(shè)計(jì)到底應(yīng)該如何做。

關(guān)注公眾號(hào)“集創(chuàng)堂”，查看更多原創(chuàng)設(shè)計(jì)類文章。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、包裝設(shè)計(jì) 、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

評(píng)論(0) 瀏覽(2723)

首頁

一、競(jìng)品分析的目的

二、競(jìng)品分析的原則

三、競(jìng)品的選擇

四、競(jìng)品分析的矩陣

五、驗(yàn)證環(huán)節(jié)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

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

二、工作流程

1. 原型圖階段

2. 視覺稿階段

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

4. 切圖

5. 前端代碼

6. 項(xiàng)目走查

三、網(wǎng)站種類

1. 門戶網(wǎng)站

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

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

4. 電商網(wǎng)站

5. 游戲網(wǎng)站

6. 專題頁面

7. 視頻網(wǎng)站

8. 移動(dòng)端H5

9. 后臺(tái)網(wǎng)站

10. CRM系統(tǒng)

11. SaaS

12. 企業(yè)OA

四、網(wǎng)站組成部分

1. 首頁

2. 二級(jí)頁面

3. 底層頁

4. 廣告

5. Footer

五、技術(shù)原理

1. 基于鼠標(biāo)的交互

2. 靜態(tài)網(wǎng)頁

3. 其他前端語言

4. 動(dòng)態(tài)網(wǎng)頁

5. 雪碧圖

6. 視差滾動(dòng)

六、網(wǎng)頁設(shè)計(jì)規(guī)范

1. 畫板尺寸

2. 文字規(guī)范

3. 圖片規(guī)范

4. 按鈕

5. 表單

6. 柵格

7. 適配Retina屏幕

總結(jié)

原生js寫ajax可以類比打電話

優(yōu)秀UI界面設(shè)計(jì)評(píng)析

一個(gè)懂市場(chǎng)的設(shè)計(jì)師有多可怕？

分類

日歷

鏈接

個(gè)人資料

存檔

一、競(jìng)品分析的目的

二、競(jìng)品分析的原則

三、競(jìng)品的選擇

四、競(jìng)品分析的矩陣

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

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

三、網(wǎng)站種類

四、網(wǎng)站組成部分

五、技術(shù)原理

六、網(wǎng)頁設(shè)計(jì)規(guī)范