<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

272018-7

視覺設計師如何做競品分析？來看這份超全面的指南！

資深UI設計者

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作為用戶體驗設計師，競品分析也是必備技能之一，通過分析市場上的競品，能夠讓設計師在短時間內快速了解自己所做產品在整個市場中的定位，對于視覺設計師來說，有一個系統的競品分析方法，能夠全面了解競品的品牌、交互、視覺、市場等方面。同時競品分析也為設計師提供一份可量化的評價標準，避免過于主觀的看法，幫助設計師用專業水平說服團隊伙伴，提升設計師的專業度，明確設計目標，優化設計產品。

那么今天我們就來聊聊從設計師角度如何來做競品分析。

一、競品分析的目的

1. 戰略層

目標：了解市場情況和商業目標，分析產品的定位，明確自身的優勢，以及與其他同類產品差異化的競爭點。

在這個層面上，身為視覺設計師，建議在做這部分的內容分析時，多和產品經理溝通，了解他們如何定位競品。結合觀察和平時的使用體驗，來得出屬于自己的結論。

2. 用戶層

目標：了解用戶是誰，為什么使用產品，使用的場景是什么，是否存在痛點，提供用戶想要的產品，了解用戶想要的產品。

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

使用用研團隊的調研產出
網上搜索用戶反饋（appstore評論/官網官微/論壇等）
直接的用戶研究（方法包括問卷調查、可用性測試、用戶訪談、眼動測試、焦點小組、用戶畫像、數據分析等）

3. 實踐層

目標：得到有效的驗證、有用的總結，找到能夠啟發設計的亮點，促進團隊達到一致的共識。

視覺設計大部分時候處于產品設計環節的中下游，更多的是在交互產出的基礎上進行設計，具體方案也是盡量遵照現有產品規范進行產出。當缺少視覺設計思考和理論沉淀、不明確與其他競爭對手的差別時，很容易碰到能力瓶頸。通過競品分析，可以以更加全局的視角審視競品的方案和自己的產出間的差距，從而產出更的設計，提升設計思考力，提高產品核心競爭力。

二、競品分析的原則

原則1：呈現方式

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

原則2：呈現選擇

數量上不需要大而全的覆蓋所有競品，重點選擇市場上優秀的競品進行分析，就可達到我們的設計分析目的。

原則3：呈現內容

做競品分析時容易將產品和企業文化、產品商業戰略等信息剝離開，這樣就很容易忽視這其中的相關性，分析的時候，就有可能導致片面或者出現誤差。

三、競品的選擇

1. 直接競品

跟所做產品有直接競爭關系，使用場景和用戶群體一致的產品。

2. 間接競品

使用場景和用戶群體可以不一致但比較接近的產品。

3. 相關競品

定位和領域可以完全不同，可以是不構成競爭關系的產品。但是相關交互和流程有關聯，可以從中得到啟發，因此無需研究整個產品，只研究與產品關聯的部分。

注意

基于自己的目的選擇競品，同樣的產品，但出于不同的目的，其所處的維度可能有所不同，同一個產品的不同模塊也有可能處于不同的維度，在實際操作中注意甄別。

四、競品分析的矩陣

1. 品牌傳達

一個好的產品，會在產品的設計中融入品牌因子。讓產品在傳達內容的同時也在不斷傳達產品，讓用戶不斷的接觸產品。起到潛移默化的在用戶心中塑造品牌形象的作用。做競品分析之前先確立品牌的定位再去分析產品，會得到更真實合理的分析結論。

例如可以通過提煉出競品的顏色、icon、配圖等方式推導得出視覺性格。

2. 視覺風格

正確的定位視覺風格，可以讓用戶對產品更加有親切感和融入感，從而增加用戶滿意度和用戶粘性。可以通過提煉競品的關鍵頁面、配圖等方式，推導得出視覺風格和風格的優勢。

3. 頁面布局

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

由于具體頁面布局拆解工作量較大，所以可根據需求，拆解部分頁面即可。可以用橫向法和時間軸法進行拆解。

4. 動效

一個好的交互動效可以加深用戶對產品的內心印象。動效的使用讓頁面跳轉更加頁暢，指引用戶的體驗更佳。是對產品進行高階的進化。給用戶體驗帶來的好處是躍進性的?？梢栽谶@個點上，分析產品具有差異化的設計。

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

5. icon

圖標是產品設計的靈魂之一，一個好的圖標設計直接賦予產品靈氣和辨識度。分析競品圖標，從功能性、識別性、美觀性不同的維度出發，逐一排列觀察。

6. 字體

分析競品字體樣式的使用、字體數量的使用、字體層級的使用。

將文字的使用列成使用表之后，可以從字體的不同的使用方面分析出文字層級的設置方向，以便系統的管理字體在產品中的運用。可以更好的規范我們即將要設計的產品，從開發的角度來講還可以更好的協同工作。

7. 規范控件

對頁面的元素和流程進行拆解，找出哪些是由控件組成，以及這些控件是如何在產品里變成規范。

規范控件的分析整理將對產品的設計起到非常大的幫助，可以幫助我們從微觀跳出，在宏觀層面把控設計?？丶囊幏犊梢宰尞a品具有一致性，幫助團隊協作完成統一風格的頁面設計。

8. 競品分析的輸出

做完以上分析，最后得出自己的設計總結并輸出，競品分析總結根據不同目的從以下幾個維度進行拓展，重點在于輸出觀點而非「介紹」。

總結的時候主要是突出說明競品相較于自己所做產品有哪些優勢，同時又有哪些不足，最好說明競品是什么原因而產生了這些問題，從設計的角度詳細說明我們準備如何突破。

產品品牌：品牌的定位與產品形態息息相關，總結競品設計有多少為品牌化服務的，可以從中做哪些借鑒。

設計風格：總結競品的設計風格，取其精華去其糟粕，說明如何應用在自己的產品中。
設計亮點：設計中差異化的東西是否是競品脫穎而出的關鍵點，這些亮點在我們產品中使用的可能性。
設計趨勢：雖然所有內容都是基于現有產品產出的，但建議設計師更進一步，在現有競品分析的基礎上，結合行業動態，發掘行業整體設計趨勢，反推運用到自己的產品設計中。

五、驗證環節

競品分析報告明確目的是第一位的，針對自己所做報告想要達到的目的，在項目結束之后，拿出支撐性內容查看自己的競品分析，復盤看哪些分析是正確的，哪些分析和最終產出不相等，不相符的原因是什么。

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(3146)

272018-7

canvas粒子效果

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

<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;
// 鼠標坐標
this.coordinate = {
x: null,
y: null,
max: 100
};
// 粒子
this.dots = [];
// 含鼠標坐標的粒子數組
this.newDots = [];
// 總數
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;
// 繪制點
ctx.save();
ctx.beginPath();
ctx.arc(dot.x, dot.y, _this.size, 0, Math.PI * 5);
ctx.fillStyle = _this.color;
ctx.fill();
ctx.restore();
// 循環比對粒子間的距離
for (var i = 0; i < _this.newDots.length; i ++) {
var newDot = _this.newDots[i];
// 如果是第一個點，則跳過
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) {
// 附近的小球向鼠標位置移動
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();
}
}
// 將已經計算過的粒子刪除，減少遍歷的總數量
_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>

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3285)

272018-7

17個 UI 設計指南

藍藍設計的小編

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

設計沒有捷徑，但是騎上自行車肯定會快很多。

評論(0) 瀏覽(3680)

262018-7

移動端web頁面開發

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

字號

工作了有一段時間，基本上都在搞移動端的前端開發，工作的過程中遇到過很多問題，bug的解決方案，記錄下來，以便后用?。。热莶⒉皇呛苋?，以后每遇到一個問題都會總結在這里，分享給大家！

一、meta標簽相關知識

1、移動端頁面設置視口寬度等于設備寬度，并禁止縮放。

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

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

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

3、禁止將頁面中的數字識別為電話號碼

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

4、忽略Android平臺中對郵箱地址的識別

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

5、當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari


    

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

6、將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式


    

        

            

                

                

            

            

                
                    <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長按時觸發系統的菜單，禁止ios&android長按時下載圖片

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

3、webkit去除表單元素的默認樣式

.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標簽被點擊時產生的邊框 & 去除ios a標簽被點擊時產生的半透明灰色背景

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

6、ios使用-webkit-text-size-adjust禁止調整字體大小

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

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

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

8、移動端定義字體，移動端沒有微軟雅黑字體


    

        

            

                

                

            

            

                
                    /* 移動端定義字體的代碼 */
                

            

        

        

            

                

                

            

            

                
                    body{font-family:Helvetica;}

三、其他技巧

1、手機拍照和上傳圖片


    

        

            

                

                

            

            

                
                    <!-- 選擇照片 -->
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <!-- 選擇視頻 -->
                

            

        

        

            

                

                

            

            

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

2、取消input在ios下，輸入的時候英文首字母的默認大寫

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

3、打電話和發短信


    

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    <a href="sms:10086">發短信給: 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 */
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 清除浮動 */
                

            

        

        

            

                

                

            

            

                
                    .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;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 強制換行 */
                

            

        

        

            

                

                

            

            

                
                    .toWrap{
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    white-space: pre-wrap; /* 只對中文起作用，強制換行。*/
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 禁止換行 */
                

            

        

        

            

                

                

            

            

                
                    .noWrap{
                

            

        

        

            

                

                

            

            

                
                    white-space:nowrap;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 禁止換行,超出省略號 */
                

            

        

        

            

                

                

            

            

                
                    .noWrapEllipsis{
                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    /* 文字兩端對齊 */
                

            

        

        

            

                

                

            

            

                
                    .text-justify{
                

            

        

        

            

                

                

            

            

                
                    text-align:justify;
                

            

        

        

            

                

                

            

            

                
                    text-justify:inter-ideograph;
                

            

        

        

            

                

                

            

            

                
                    }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

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

            

        

        

            

                

                

            

            

                
                    .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 定義盒模型內伸縮項目的布局方向


    

        

            

                

                

            

            

                
                    /**
                

            

        

        

            

                

                

            

            

                
                    * vertical column  垂直
                

            

        

        

            

                

                

            

            

                
                    * horizontal row   水平 默認值
                

            

        

        

            

                

                

            

            

                
                    */
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    -ms-flex-direction: row;
                

            

        

        

            

                

                

            

            

                
                    -o-box-orient: horizontal;
                

            

        

        

            

                

                

            

            

                
                    box-orient: horizontal;

3、box-direction 定義盒模型內伸縮項目的正序(normal默認值)、倒敘(reverse)


    

        

            

                

                

            

            

                
                    /* Firefox */
                

            

        

        

            

                

                

            

            

                
                    display:-moz-box;
                

            

        

        

            

                

                

            

            

                
                    -moz-box-direction:reverse;
                

            

        

        

            

                

                

            

            

                
                    /* Safari、Opera 以及 Chrome */
                

            

        

        

            

                

                

            

            

                
                    display:-webkit-box;
                

            

        

        

            

                

                

            

            

                
                    -webkit-box-direction:reverse;

4、box-pack 對盒子水平富?？臻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 對盒子垂直方向富?？臻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、定義伸縮項目的具體位置


    

        

            

                

                

            

            

                
                    /*-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、定義伸縮項目占空間的份數


    

        

            

                

                

            

            

                
                    -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;}

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3290)

262018-7

網頁設計基礎知識全攻略

資深UI設計者

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

一、網頁設計是什么？

網頁設計也被稱為 Web Design、網站設計、Website design、WUI 等。它的本質就是網站的圖形界面設計。雖然現在我們常使用移動端上的 APP 來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發出第一封電子郵件到2000年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地；中國的網站高速發展了近三十年。我是在小學開始去網吧「上網沖浪」的，那時的電腦屏幕非常小，分辨率只有800×600像素（對比一下，iPhone8的分辨率是750x1334px），網速也很慢，經常掉線或者加載失敗。那時的網站性能和體驗都不好，而現在網站設計和過去已經有了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不比軟件和手機 APP 差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。那么作為 UI設計師我們就必須掌握網站設計的規范和理解網站運行的原理，才能更好地駕馭這個平臺。今天就向您好好說道一下網站必須懂得的那些事兒。

二、工作流程

首先讓我們來看一下網站設計的工作流程吧，除了之前介紹過的用戶研究、撰寫產品需求文檔、市場文檔、做競品調研等工作之外，與設計師密切相關的網站項目流程可以分為原型圖階段、視覺稿階段、設計規范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。

1. 原型圖階段

原型圖階段中設計師需要和產品經理溝通需求，這時要注意，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有更好的方式，這時需要在設計之前與產品經理達成一致。

△ 構建網站原型圖（工具：Axure RP）

2. 視覺稿階段

視覺稿階段就是我們要根據原型圖確定的內容和大體版式完成網站的界面設計了，在設計網站的時候，我們需要一些圖像和靈感的素材。比如做世界杯專題時，我們除了收集很多素材之外，也可以設計一個「情緒板」（Mood Board）。簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后根據這些要求完成頁面信息部分的設計?？傊?，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

△ 視覺稿設計階段（工具：Photoshop）

3. 設計規范

當視覺稿通過后，很多設計師可能不會主動去做設計規范。其實每一個可迭代的產品都需要設計師來總結設計規范，設計規范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設計規范主要也是在約束設計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設計規范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。最后，設計規范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。所以我認為設計師應該主動去做設計規范和項目總結。設計規范如何去做？其實設計規范就是把主要頁面的元素固定成統一元素即可。具體來說一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等不同分類。

△ 視覺規范（工具：Photoshop）

4. 切圖

網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如 Cutterman、Zeplin 等切圖插件中的 Web 選項為前端切出網站所使用的圖片。

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

5. 前端代碼

前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。然后和后端工程師對接調取數據接口，一個網站就活了起來。工程師們為了方便了解網站是不是達到了我們要求的數據，也會進行埋點。埋點就是在頁面代碼里插入一些統計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預期。在此后其實還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等。

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

6. 項目走查

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

△ 將實現后的截圖和設計稿進行比對（工具：Photoshop）

三、網站種類

網站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如門戶網站、企業網站、產品網站、電商網站、游戲網站、專題頁面、視頻網站、移動端H5 等，均是面向用戶和消費者的產品。由于是面向用戶和消費者，所以設計上一定要可以吸引人，并且以用戶為中心考慮體驗設計。而 To B端作為一個需求量很大的類別，其實往往被設計師所忽視。什么是 To B端項目呢？比如電商網站供貨商的后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是 To B 類網站項目了。這些項目的要求和 To C端網站的要求大相徑庭：To B 類項目最重要的是效率而不是體驗，因為說白了我們在設計使用者工作的工具，我們在設計時必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網站的不同門類吧。

1. 門戶網站

門戶網站國內比較知名的有新浪、騰訊、網易、搜狐；國外比較知名的如 Naver、Llinternaute 等。我們可以看得出，門戶網站都是大而全包羅生活萬象的。比如騰訊網就有新聞、財經、視頻、體育、娛樂、時尚、汽車、房產、科技、游戲等不同頻道。門戶網站的門檻很高，必須要有雄厚的實力才可以建立起一個門戶網站，而門戶網站需要的設計師數量也驚人。首先門戶網站需要產品方向的界面設計師以迭代的方式維護迭代網站首頁、二級頁面、底層頁等網站基石。然后需要各個頻道的設計師來處理日常需求：比如巴黎時裝周需要負責時尚頻道的設計師來設計對應的專題、世界杯小組出線需要負責體育頻道的設計師來設計對應的專題等。地球上的每一天都有大事發生，那么門戶網站中的設計工作就不會少。另外，具體對接頻道的設計師也需要有一定擅長之處：比如對接體育頻道的設計師起碼應該熟悉足球籃球等體育項目、時尚頻道的設計師要懂得各個大牌的設計風格、佛學頻道的設計師需要懂得基本的佛學知識和忌諱、文化頻道的設計師需要對傳統文化有所涉獵。所以基本上門戶網站的設計師可以分為產品組和頻道組兩種。

△ 韓國門戶網站Naver

2. 企業網站

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

△ 美國通用公司官網

3. 產品網站

從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發現一種新鮮的產品營銷模式，就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動等方式讓我們感覺到這個產品的精細。由于中國互聯網和產品設計發展很快，所以產品類網站設計需求一定會越來越多。

△ 蘋果公司產品介紹頁

4. 電商網站

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

△ 淘寶網首頁

5. 游戲網站

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

△ 暴雪公司星際爭霸2游戲官網

6. 專題頁面

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

△ 極有家淘寶專題頁面

7. 視頻網站

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

△ 騰訊視頻播放頁面

8. 移動端H5

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

△ 使用前端語言編譯的適合手機瀏覽的H5界面

移動端H5尺寸

設計移動端 H5 項目的時候，我們一般以用戶量較高的 iPhone6/7/8的尺寸：750x1334px為準，然后我們要在頂部預留出微信或者瀏覽器導航區域。主要內容區域就可以自由設計了。一般H5的操作是上下滑動。字體方面使用蘋方字體，并且字號設置為24PX以上，渲染方式設置成銳利。英文則需要使用 SF-UI 代替。當然 H5可以調用背景音樂、視頻、鏈接等多媒體，讓體驗更佳。除了讓前端小哥哥們開發之外，其實還有一種方式可以無需代碼生成簡易版的 H5，就是通過 H5 工具生成。目前比較火的 H5 生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發，那么我們設計稿的尺寸需要設置為640x1008PX。這些工具較為簡單，注冊后將 PSD 上傳即可對每個原件進行動效的設置了。但是如果需要復雜的動效和交互，還是需要前端工程師的配合。

△ H5項目的尺寸

9. 后臺網站

后臺網站又叫 Dashborad，中文翻譯為儀表盤。其含義就是有一大堆數據與統計信息。后臺網站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數據。可是數據非常枯燥，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現這些繁瑣的數據，這種圖形表達數據的方式也叫做數據可視化。后臺網站不需要特別可愛的插圖以及卡通形象，最重要的是效率。所以如果您經常處理 To C 類的需求，接到了 To B 類的產品需求時一定要注意這一點。后臺網站因為需要更大的畫面，通常會使用全屏式排版，也就是撐滿整個畫布。那如果小屏怎么辦呢？前端會使用相對布局縮小各個元素，排版的位置也會用百分比來確定。

△ 微信公眾號后臺

10. CRM系統

CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統。CRM 是企業對客戶進行信息化管理的一種形式，用互聯網技術實現對客戶信息進行收集、管理、分析，對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。我們在設計這種項目時一定要將信息按所屬的邏輯關系分類，加強對比、對齊、重復、親密性的原則，使操作者在使用的時候感覺到便利。

△ Admin CRM dashboard by Divan Raj

11. SaaS

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

12. 企業OA

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

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

四、網站組成部分

了解了網站的不同類別后，讓我們來看看組成一個網站需要哪些部分吧。網站是由不同網頁通過超鏈接連接而成的，而不同網頁也是由不同模塊組成的。我們設計的是一個像蜘蛛網一樣的網絡，而不是一張海報。所以我們在設計網站時要格外考慮從用戶角度出發看到的網站，而不能孤立地把它想象成一個平面作品。

1. 首頁

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

△ 首頁原型圖

2. 二級頁面

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

△ 二級頁面原型圖

3. 底層頁

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

△ 底層頁原型圖

4. 廣告

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

對聯廣告

在門戶網站中我們經常會看到網站左右安全區域之外會有個隨屏幕滾動的像「對聯」一樣的廣告，通常 banner 也會是一個廣告內容，并且居中會彈出由 HTML5 技術或 Flash 技術制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進網站你就會被全面轟炸，無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等，可見需要設計師配合的地方非常多。

△ 對聯廣告形式

信息流廣告

信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內容，原因是因為它的形式和其他信息一樣。比如朋友圈、知乎、Facebook 都采用了信息流廣告，信息流廣告的效果非常強，但是會犧牲一定的用戶體驗。信息流廣告的尺寸與信息流相同。

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

以上從廣告的形式上簡單介紹了三種常見的網站廣告形式，如果我們在閱讀需求時看到了 cpm、pv 等單詞是什么意思呢？他們是廣告的收費模式。cpm 是指按照廣告 pv 來收費，cps 是指按照用戶消費收費，cpa 是指按照用戶注冊數收費，cpc 是指按照用戶點擊付費。針對不同的收費模式，在設計時也會采取不同策略來增強廣告需要達到的目的。

5. Footer

在網站具體的頁面設計中，底部會有一個區域我們稱之為 footer。一般 footer 的顏色都會比上邊內容區域要暗，因為 footer 的信息在邏輯的級別上是次要的。footer 區域的主要功能是版權聲明、聯系方式、友情鏈接、備案號等信息。在設計時一定要降級處理，不要讓 footer 變得特別明顯。

五、技術原理

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

△ 基于鼠標的手勢操作

1. 基于鼠標的交互

在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網站設計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結構吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網頁也是點擊的藝術。右鍵一般會喚起右鍵菜單，但是很多網站與網頁應用程序也會將右鍵自定義設計一些操作和交互。與鼠標發生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態吧（前端術語是：超鏈接標簽的 CSS 四個偽類）。

△ 按鈕與文字的不同狀態

Link

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

Visited

Visited 是超鏈接被點擊以后的狀態。比如新浪網新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網使用了 Visited 屬性，點擊后的新聞顏色就不一樣了，方便用戶區別自己哪些新聞還沒有瀏覽。

Hover

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

Active

Active 是指超鏈接的激活狀態。點擊后超鏈接可以通過 CSS 加載一個狀態。

同樣的鏈接樣式也可以應用在圖片、按鈕、表單之上。點擊、鼠標懸停、鼠標按下都可以設計成不同的樣式，方便用戶通過鼠標感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做「點擊感」。當然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標懸停等狀態，還有一種狀態叫不可點擊。這種狀態將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感 Web 設計的例子嗎？

2. 靜態網頁

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

△ 模擬代碼編譯過程

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

3. 其他前端語言

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

△ 主流形式：HTML + CSS + JS

4. 動態網頁

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

△ 主流后臺編譯語言：PHP ASP JSP CGI

5. 雪碧圖

我們經常看到網站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，HTML5 視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，Flash Player 播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用 Gif 格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像 Google 首頁 Doodle 的動畫是怎么實現的呢？這種技術叫做：雪碧圖。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精靈，它是一種 CSS 圖像合并技術。它本身調用的圖片是支持多級透明的 PNG 格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的 PNG 圖片里。然后代碼在一個100px的寬度框子內背景圖調用這張 png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續動畫。雪碧圖也有自身的缺點：如果幀數太多，會消耗很大的內存。所以幀數一定要控制少。如果你的動作設計了12幀，那么我建議你可以試試將2、4、6、8、10刪除，保留一半的動作。

△ 雪碧圖

6. 視差滾動

視差滾動是一種運動速率不一樣的設計效果，用以實現空間感。比如密爾沃基警察局官網就大量運用了視差滾動效果。其實現原理是，代碼判定網頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現實中看到的空間感一樣。視差滾動已經不是什么高新技術，如果你的網站比較適合視差滾動，請大膽設計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準備的就是運動速率不同的分層靜態 PSD 文件。

△ 運用了視差滾動效果的密爾沃基警察局官網（milwaukeepolicenews.com）

六、網頁設計規范

終于，經歷過長篇大論網站的原理與組成部分后，我們要談談網站設計的規范了。網站設計并無具體平臺限定的風格，也沒有必須要設計的系統級導航欄和工具欄。所以網站設計更加靈活，然而因為太靈活也會讓我們的設計師無從下手。那么接下來我將介紹網站設計的規范，在您工作的時候可以參考。注意，在設計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。

1. 畫板尺寸

因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版 Photoshop 網站 Web 預設尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們如果做網站時建議按主流的分辨率1920x1080px來設計。所以我們通常設計網站時的網站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內容安全區域為1200px （或1000px / 1400px）。以這個尺寸來設計相對標準。當然在設計網頁前需要知會前端設計尺寸，因為對于適配的方式和后續配合他們更有發言權。

△ 網站的尺寸規范

2. 文字規范

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

△ 網站字體規范

3. 圖片規范

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

第一種方法，給程序員切圖的時候我們可以適當縮小圖片文件的大小。比如 Photoshop 中存儲為 web 所用格式就會比快速存儲文件更小。

第二種方法，可以嘗試使用例如 Tinypng、智圖等工具再次壓縮圖片。這些工具會把圖片中的多余信息刪除并且壓縮，而圖像質量不受損失。

第三種方法，Google 研發了一種 Webp 格式，它的圖片壓縮體積大約只有 JPEG 的2/3，能節省大量的服務器寬帶資源。比如 Facebook、Ebay 還有我們設計師常用的站酷圖片存儲都是使用了 Webp 圖片格式。

第四種方法，瀏覽器和服務器握手時需要下載網頁所調用的圖片資源，那么如果一個網站有一百張圖片的話，瀏覽器和服務器就得握一百次。第一會耗費服務器資源，第二訪問速度就會慢一些。所以前端工程師們有一種做法，就是把網頁中所使用的圖片拼成一大張 png。然后每個調用圖片的元素都調用這張圖片然后分別位移一點兒，顯示的那塊區域移動到一大張圖片中所需要的那個圖像。

△ 在線壓縮工具Tinypng網站

4. 按鈕

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

△ 不同時代下不同的按鈕風格

5. 表單

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

△ 表單不同風格的設計 UIDE Kit by Mateusz Dembek

6. 柵格

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

柵格系統具體有以下優勢：能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。另外，基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。

△ 網站的柵格化會使網站看起來更有秩序感

7. 適配Retina屏幕

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

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

8. 自適應與響應式網站

我們看到有些網站使用電腦端或者手機端甚至 iPad 去瀏覽時體驗都非常好。這就需要我們為了用戶體驗而進行網站的自適應或響應式布局了。響應式與自適應的原理是相似的，都是通過代碼檢測設備屏幕寬度，根據不同的設備加載不同的 css。

自適應網站

自適應網站的設計稿是一致的，但是設計稿需要考慮屏幕變小時的變化方式。比如一個網站的內容有5個區塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應布局。比如站酷網、Dribbble 等網站都采用了自適應布局。

響應式網站

響應式網站則需要設計不同版本的設計稿，然后根據不同的設備提供不同的 CSS 樣式。比如判定你設備的寬度是750px，那么網站就知道你使用了手機來訪問，就會給你導入一份手機才有的樣式；如果是電腦的寬度就給你導入電腦的 CSS 樣式。對于設計師來說，自適應需要考慮網站在不同設備寬度下的整除與排版；響應式則需要設計電腦、平板、手機等至少三套設計稿（但這三套設計稿的內容是一致的）?？傊?，自適應和響應式都是網站為了用戶體驗所適應瀏覽設備而做出的努力。

適配的規范

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

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

△ 不同設備的注意事項

總結

無論您面對的項目是 To C 的還是 To B 的網站產品，我們都應該首先確立設計風格 > 尋找設計素材 > 建立情緒板 > 完成視覺稿 > 切圖標注 > 建立視覺規范 > 進行項目走查。

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

如果設計手機端的頁面，可以按照750X1334PX尺寸設計。字體使用蘋方24PX以上、銳利。英文字體使用SF UI。按鈕和點擊區域需要大于88PX方便手指點擊。并且頭部需要預留出微信或瀏覽器的導航區域。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

評論(0) 瀏覽(4764)

262018-7

設計圖集：創意廣告設計

藍藍設計的小編

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

評論(0) 瀏覽(3313)

252018-7

原生JS實現ajax詳解

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

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

打電話分下面4步：
1.拿出手機
2.撥號
3.說話
4.聽對方說話

ajax也分下面4步：
1.創建ajax對象
2.連接到服務器
3.發送請求（告訴服務器我要什么文件）
4.接收返回值

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

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

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

封裝ajax代碼如下：

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

將封裝的ajax調用：

<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文件里面的內容 alert(str);//將讀取的內容輸出 }) } }; </script>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4087)

252018-7

優秀UI界面設計評析

優秀UI界面設計評析

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

男生運動鞋商店支付界面，顏色搭配非常舒服，鞋子攝影也很漂亮，字體字號運用非常到位。

優秀UI界面設計評析

和上圖一樣的運動鞋支付界面，采用簡潔風格，有右伴部分中的金色芯片元素，非常有意思，即表明了支付意思，也很好的點綴了整個界面。

優秀UI界面設計評析

顏色搭配非常好，給人高端的感覺，在輸入正確的狀態才出現一個橙色的圖標做到畫龍點睛的作用，個人非常喜歡。

優秀UI界面設計評析

界面設計排版合理，視覺感非常好，產品內容機械手表效果非常靚，質感也很好。喜歡

優秀UI界面設計評析

偏日系的設計風格排版，簡潔而不簡單，個人也是挺喜歡的。

優秀UI界面設計評析

和上圖的設計風格一致，屬于那種簡單的配色排版，給人的感覺就是很舒服我喜歡這種。

優秀UI界面設計評析

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(4169)

252018-7

網頁設計的核心難點是什么？

網頁設計的核心難點是什么？

公眾號:西見個人QQ:26474600

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

網頁設計也被稱為Web Design、網站設計、Website design、WUI等。它的本質就是網站的圖形界面設計。雖然現在我們常使用移動端上的APP來獲取資訊，但是顯然基于個人電腦平臺的網站上網方式陪伴我們的歷史要比手機久很多：從1987年錢天白教授向德國發出第一封電子郵件到2000年搜狐、新浪、網易在美國納斯達克掛牌上市，再到現在網站遍地；中國的網站高速發展了近三十年。我是在小學開始去網吧“上網沖浪”的，那時的電腦屏幕非常小，分辨率只有800x600像素（對比一下，iPhone8的分辨率是750x1334px），網速也很慢，經常掉線或者加載失敗。那時的網站性能和體驗都不好，而現在網站設計和過去已經有了巨大的變化：注重用戶體驗、注重頁面動效、富媒體等設計讓如今的網站體驗并不比軟件和手機APP差。加上個人電腦的普及，網站仍然是人機交互中非常重要的平臺之一。那么作為UI設計師我們就必須掌握網站設計的規范和理解網站運行的原理，才能更好地駕馭這個平臺。今天就向您好好說道一下網站必須懂得的那些事兒。

工作流程

首先讓我們來看一下網站設計的工作流程吧：除了之前介紹過的用戶研究、撰寫產品需求文檔、市場文檔、做競品調研等工作之外，與設計師密切相關的網站項目流程可以分為原型圖階段、視覺稿階段、設計規范階段、切圖階段、前端代碼階段、項目走查階段六個階段。每個階段都需要設計師參與和了解，千萬不要只在意視覺稿這個階段，有很多前期與后期工作同樣需要得到我們的重視。好，讓我們一個一個來了解它們吧。

原型圖階段

原型圖階段中設計師需要和產品經理溝通需求，這時要注意，并不是產品經理向設計師下發需求，而是需要相互就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有更好的方式，這時需要在設計之前與產品經理達成一致。

構建網站原型圖（工具：Axure RP ）

視覺稿階段

視覺稿階段就是我們要根據原型圖確定的內容和大體版式完成網站的界面設計了，在設計網站的時候，我們需要一些圖像和靈感的素材。比如做世界杯專題時，我們除了收集很多素材之外，也可以設計一個“情緒板”（Mood Board）。簡單說情緒板就是將一些與主題相關的資料和素材拼貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、LOGO、主視覺PSD等，那么用素材和這些需求方提供的資料進行混合并拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從后臺調取的圖片尺寸、標題字段長度等，然后根據這些要求完成頁面信息部分的設計?？傊?，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。

視覺稿設計階段（工具：Photoshop）

設計規范

當視覺稿通過后，很多設計師可能不會主動去做設計規范。其實每一個可迭代的產品都需要設計師來總結設計規范，設計規范就是所有頁面中共性的東西，比如說字體不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是用戶訪問網站時會理解成固定概念的憑證。比如同樣的分享功能如果采用兩種截然不同的樣式就會讓用戶困惑。那么設計規范主要也是在約束設計師我們自己，在用戶有限的記憶力中減少思考的成本。同時，設計規范也可以保證同一個項目的不同設計師都能輸出一樣風格的設計來。最后，設計規范對于設計師個人來說也是對項目影響的一個佐證，可以證明你的思考和你在項目中的地位。所以我認為設計師應該主動去做設計規范和項目總結。設計規范如何去做？其實設計規范就是把主要頁面的元素固定成統一元素即可。具體來說一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等不同分類。

視覺規范（工具：Photoshop）

切圖

網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握PS軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如Cutterman、Zeplin等切圖插件中的Web選項為前端切出網站所使用的圖片。

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

前端代碼

前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。然后和后端工程師對接調取數據接口，一個網站就活了起來。工程師們為了方便了解網站是不是達到了我們要求的數據，也會進行埋點。埋點就是在頁面代碼里插入一些統計代碼，方便我們之后確定哪些頁面訪問量高，哪些沒有達到預期。在此后其實還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等，這里省略。

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

項目走查

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

將實現后的截圖和設計稿進行比對（工具：Photoshop）

網站種類

網站的分類按對象來劃分可以分為To C端和To B端兩種。To C端就是面向用戶和消費者，例如門戶網站、企業網站、產品網站、電商網站、游戲網站、專題頁面、視頻網站、移動端H5等，均是面向用戶和消費者的產品。由于是面向用戶和消費者，所以設計上一定要可以吸引人，并且以用戶為中心考慮體驗設計。而To B端作為一個需求量很大的類別，其實往往被設計師所忽視。什么是To B端項目呢？比如電商網站供貨商的后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是To B類網站項目了。這些項目的要求和To C端網站的要求大相徑庭：To B類項目最重要的是效率而不是體驗，因為說白了我們在設計使用者工作的工具，我們在設計時必須首先要保證操作者可以地完成他們所需要完成的工作。那么讓我們來了解一下網站的不同門類吧。

門戶網站

門戶網站國內比較知名的有新浪、騰訊、網易、搜狐；國外比較知名的如Naver、Llinternaute等。我們可以看得出，門戶網站都是大而全包羅生活萬象的。比如騰訊網就有新聞、財經、視頻、體育、娛樂、時尚、汽車、房產、科技、游戲等不同頻道。門戶網站的門檻很高，必須要有雄厚的實力才可以建立起一個門戶網站，而門戶網站需要的設計師數量也驚人。首先門戶網站需要產品方向的界面設計師以迭代的方式維護迭代網站首頁、二級頁面、底層頁等網站基石。然后需要各個頻道的設計師來處理日常需求：比如巴黎時裝周需要負責時尚頻道的設計師來設計對應的專題、世界杯小組出線需要負責體育頻道的設計師來設計對應的專題等。地球上的每一天都有大事發生，那么門戶網站中的設計工作就不會少。另外，具體對接頻道的設計師也需要有一定擅長之處：比如對接體育頻道的設計師起碼應該熟悉足球籃球等體育項目、時尚頻道的設計師要懂得各個大牌的設計風格、佛學頻道的設計師需要懂得基本的佛學知識和忌諱、文化頻道的設計師需要對傳統文化有所涉獵。所以基本上門戶網站的設計師可以分為產品組和頻道組兩種。

韓國門戶網站Naver

企業網站

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

美國通用公司官網

產品網站

從蘋果公司的iPhone介紹頁到小米手機8的介紹頁，我們會發現一種新鮮的產品營銷模式，就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，然后配合一些如視差滾動等方式讓我們感覺到這個產品的精細。由于中國互聯網和產品設計發展很快，所以產品類網站設計需求一定會越來越多。

蘋果公司產品介紹頁

電商網站

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

淘寶網首頁

游戲網站

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

暴雪公司星際爭霸2游戲官網

專題頁面

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

極有家淘寶專題頁面

視頻網站

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

騰訊視頻播放頁面

移動端H5

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

使用前端語言編譯的適合手機瀏覽的H5界面

移動端H5尺寸

設計移動端H5項目的時候，我們一般以用戶量較高的iPhone6/7/8的尺寸：750x1334px 為準，然后我們要在頂部預留出微信或者瀏覽器導航區域。主要內容區域就可以自由設計了。一般H5的操作是上下滑動。字體方面使用蘋方字體，并且字號設置為24PX以上，渲染方式設置成銳利。英文則需要使用SF-UI代替。當然H5可以調用背景音樂、視頻、鏈接等多媒體，讓體驗更佳。除了讓前端小哥哥們開發之外，其實還有一種方式可以無需代碼生成簡易版的H5，就是通過H5工具生成。目前比較火的H5生成工具有：MAKA、iH5、兔展等，如果我們要自己生成而不是通過前端開發，那么我們設計稿的尺寸需要設置為640x1008PX。這些工具較為簡單，注冊后將PSD上傳即可對每個原件進行動效的設置了。但是如果需要復雜的動效和交互，還是需要前端工程師的配合。

H5項目的尺寸

后臺網站

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

微信公眾號后臺

CRM系統

CRM即Customer relationship management，翻譯過來是客戶管理管理系統。CRM是企業對客戶進行信息化管理的一種形式，用互聯網技術實現對客戶信息進行收集、管理、分析，對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。我們在設計這種項目時一定要將信息按所屬的邏輯關系分類，加強對比、對齊、重復、親密性的原則，使操作者在使用的時候感覺到便利。

Admin CRM dashboard by Divan Raj

SaaS

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

企業OA

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

Robo Advisor - Projection, List and Questionnaire by Michal Parulski

網站組成部分

了解了網站的不同類別后，讓我們來看看組成一個網站需要哪些部分吧。網站是由不同網頁通過超鏈接連接而成的，而不同網頁也是由不同模塊組成的。我們設計的是一個像蜘蛛網一樣的網絡，而不是一張海報。所以我們在設計網站時要格外考慮從用戶角度出發看到的網站，而不能孤立地把它想象成一個平面作品。

首頁

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

首頁原型圖

二級頁面

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

二級頁面原型圖

底層頁

在網站結構中最后提供用戶實質資訊的頁面就是底層頁。比如，在門戶網站首頁或二級頁面中我們點擊感興趣的標題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側或右側的側欄尋找用戶可能感興趣的相關內容；在底側可以看到網友的評論；底側也會有分享按鈕、贊功能等；如果側欄用戶轉化率比較差，最底部還可以再次出現推薦相關資訊的功能。總之，在用戶閱讀完自己喜歡的資訊后，要繼續吸引用戶順勢閱讀其他的資訊或者回到頻道。

底層頁原型圖

廣告

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

對聯廣告。在門戶網站中我們經常會看到網站左右安全區域之外會有連個隨屏幕滾動的像“對聯”一樣的廣告，通常banner也會是一個廣告內容，并且居中會彈出由HTML5技術或Flash技術制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進網站你就會被全面轟炸，無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等，可見需要設計師配合的地方非常多。

對聯廣告形式

信息流廣告。信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內容，原因是因為它的形式和其他信息一樣。比如朋友圈、知乎、Facebook都采用了信息流廣告，信息流廣告的效果非常強，但是會犧牲一定的用戶體驗。信息流廣告的尺寸與信息流相同。

知乎APP中信息流中的廣告

以上從廣告的形式上簡單介紹了三種常見的網站廣告形式，如果我們在閱讀需求時看到了cpm、pv等單詞是什么意思呢？他們是廣告的收費模式。cpm是指按照廣告pv來收費，cps是指按照用戶消費收費，cpa是指按照用戶注冊數收費，cpc是指按照用戶點擊付費。針對不同的收費模式，在設計時也會采取不同策略來增強廣告需要達到的目的。

Footer

在網站具體的頁面設計中，底部會有一個區域我們稱之為footer。一般footer的顏色都會比上邊內容區域要暗，因為footer的信息在邏輯的級別上是次要的。footer區域的主要功能是版權聲明、聯系方式、友情鏈接、備案號等信息。在設計時一定要降級處理，不要讓footer變得特別明顯。

技術原理

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

基于鼠標的手勢操作

基于鼠標的交互

在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網站設計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結構吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網頁也是點擊的藝術。右鍵一般會喚起右鍵菜單，但是很多網站與網頁應用程序也會將右鍵自定義設計一些操作和交互。與鼠標發生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態吧（前端術語是：超鏈接標簽的CSS四個偽類）。

按鈕與文字的不同狀態

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

Visited是超鏈接被點擊以后的狀態。比如新浪網新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網使用了Visited屬性，點擊后的新聞顏色就不一樣了，方便用戶區別自己哪些新聞還沒有瀏覽。

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

Active：是指超鏈接的激活狀態。點擊后超鏈接可以通過CSS加載一個狀態。

同樣的鏈接樣式也可以應用在圖片、按鈕、表單之上。點擊、鼠標懸停、鼠標按下都可以設計成不同的樣式，方便用戶通過鼠標感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做“點擊感”。當然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標懸停等狀態，還有一種狀態叫不可點擊。這種狀態將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感Web設計的例子嗎？

靜態網頁

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

模擬代碼編譯過程

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

其他前端語言

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

主流形式：HTML + CSS + JS

動態網頁

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

主流后臺編譯語言：PHP ASP JSP CGI

雪碧圖

我們經?？吹骄W站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，HTML5視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，Flash Player播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用Gif格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像Google首頁Doodle的動畫是怎么實現的呢？這種技術叫做：雪碧圖。CSS雪碧即CSS Sprite，也有人叫CSS精靈，它是一種CSS圖像合并技術。它本身調用的圖片是支持多級透明的PNG格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的PNG圖片里。然后代碼在一個100px的寬度框子內背景圖調用這張png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續動畫。雪碧圖也有自身的缺點：如果幀數太多，會消耗很大的內存。所以幀數一定要控制少。如果你的動作設計了12幀，那么我建議你可以試試將2,4,6,8,10刪除，保留一半的動作。

雪碧圖

視差滾動

視差滾動是一種運動速率不一樣的設計效果，用以實現空間感。比如密爾沃基警察局官網就大量運用了視差滾動效果。其實現原理是，代碼判定網頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現實中看到的空間感一樣。視差滾動已經不是什么高新技術，如果你的網站比較適合視差滾動，請大膽設計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準備的就是運動速率不同的分層靜態PSD文件。

運用了視差滾動效果的密爾沃基警察局官網（milwaukeepolicenews.com）

網頁設計規范

終于，經歷過長篇大論網站的原理與組成部分后，我們要談談網站設計的規范了。網站設計并無具體平臺限定的風格，也沒有必須要設計的系統級導航欄和工具欄。所以網站設計更加靈活，然而因為太靈活也會讓我們的設計師無從下手。那么接下來我將介紹網站設計的規范，在您工作的時候可以參考。注意，在設計之前一定要和前端溝通我們使用的尺寸、字體、交互等，這樣有助于后期不會有誤會。

畫板尺寸

因為網頁尺寸與用戶屏幕相關，而用戶屏幕的種類難以統計。所以我們的設計稿只能主要顧及主流用戶的分辨率，其他分辨率用適配的方式來解決。在版Photoshop網站Web預設尺寸給了我們一些啟示：常見尺寸（1366x768px）、大網頁（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。這些是主流尺寸，而我們如果做網站時建議按主流的分辨率1920x1080px來設計。所以我們通常設計網站時的網站寬度為1920px，每個屏幕的高度約為900px。為什么是900px呢？因為1080還要減去瀏覽器頭部和底部高度，大約就是900px了。內容安全區域為1200px （或1000px / 1400px）。以這個尺寸來設計相對標準。當然在設計網頁前需要知會前端設計尺寸，因為對于適配的方式和后續配合他們更有發言權。

網站的尺寸規范

文字規范

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

網站字體規范

圖片規范

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

第一種方法，給程序員切圖的時候我們可以適當縮小圖片文件的大小。比如Photoshop中存儲為web所用格式就會比快速存儲文件更小。

第二種方法，可以嘗試使用例如Tinypng、智圖等工具再次壓縮圖片。這些工具會把圖片中的多余信息刪除并且壓縮，而圖像質量不受損失。

第三種方法，Google研發了一種Webp格式，它的圖片壓縮體積大約只有JPEG的2/3，能節省大量的服務器寬帶資源。比如Facebook、Ebay還有我們設計師常用的站酷圖片存儲都是使用了Webp圖片格式。

第四種方法，瀏覽器和服務器握手時需要下載網頁所調用的圖片資源，那么如果一個網站有一百張圖片的話，瀏覽器和服務器就得握一百次。第一會耗費服務器資源，第二訪問速度就會慢一些。所以前端工程師們有一種做法，就是把網頁中所使用的圖片拼成一大張png。然后每個調用圖片的元素都調用這張圖片然后分別位移一點兒，顯示的那塊區域移動到一大張圖片中所需要的那個圖像。

在線壓縮工具Tinypng網站

按鈕

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

不同時代下不同的按鈕風格

表單

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

表單不同風格的設計 UIDE Kit by Mateusz Dembek

柵格

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

如果網頁寬度是1000px，我們可以使用：

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

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

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

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

如果網頁寬度是990px，我們可以使用：

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

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

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

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

如果網頁寬度是980px，我們可以使用：

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

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

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

柵格系統具體有以下優勢：能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。另外，基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。

網站的柵格化會使網站看起來更有秩序感

適配Retina屏幕

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

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

自適應與響應式網站

我們看到有些網站使用電腦端或者手機端甚至iPad去瀏覽時體驗都非常好。這就需要我們為了用戶體驗而進行網站的自適應或響應式布局了。響應式與自適應的原理是相似的，都是通過代碼檢測設備屏幕寬度，根據不同的設備加載不同的css。

自適應網站

自適應網站的設計稿是一致的，但是設計稿需要考慮屏幕變小時的變化方式。比如一個網站的內容有5個區塊和4個間距，那么如果寬度縮小成900時需要如何變化，這就是自適應布局。比如站酷網、Dribbble等網站都采用了自適應布局。

響應式網站

響應式網站則需要設計不同版本的設計稿，然后根據不同的設備提供不同的CSS樣式。比如判定你設備的寬度是750px，那么網站就知道你使用了手機來訪問，就會給你導入一份手機才有的樣式；如果是電腦的寬度就給你導入電腦的CSS樣式。對于設計師來說，自適應需要考慮網站在不同設備寬度下的整除與排版；響應式則需要設計電腦、平板、手機等至少三套設計稿（但這三套設計稿的內容是一致的）?？傊?，自適應和響應式都是網站為了用戶體驗所適應瀏覽設備而做出的努力。

適配的規范

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

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

不同設備的注意事項

總結

無論您面對的項目是To C的還是To B的網站產品，我們都應該首先確立設計風格 > 尋找設計素材 > 建立情緒板 > 完成視覺稿 > 切圖標注 > 建立視覺規范 > 進行項目走查。

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

如果設計手機端的頁面，可以按照750X1334PX尺寸設計。字體使用蘋方 24PX以上銳利。英文字體使用SF UI。按鈕和點擊區域需要大于88PX方便手指點擊。并且頭部需要預留出微信或瀏覽器的導航區域。

怎么樣？閱讀完本文您是否有所收獲呢？歡迎在評論區討論哦。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(6021)

252018-7

一個懂市場的設計師有多可怕？

一個懂市場的設計師有多可怕？

118天前發布

集創堂原創文章 / UI / 觀點

330 1

設計師不是孤立的，我們的一切設計都是多種條件共同作用的結果，考量產品處于什么樣的市場，是做好設計的基石。

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

為什么要跟設計師聊市場？因為設計師不是孤立的，我們的一切設計都是多種條件共同作用的結果，考量產品處于什么樣的市場，是做好設計的基石。今天要跟大家談的就是處于現有市場、全新市場、垂直市場的產品所對應的設計策略。

現有市場的設計策略

現有市場是社會價值和用戶需求已經被論證的市場，比如淘寶、京東、天貓、58同城、美團、手機類等都是現有市場。這些產品的用戶量很大，新的產品加入很難發掘新的競爭機會。

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

那么這里我們提一個問題，你覺得小米手機到底屬于是設備還是互聯網產品？

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

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

設備類產品通常軟件和硬件是融合到一起的。比方說，聯想手機，它被生產出來后，它的系統不會再頻繁的升級，因為聯想手機的產品線過于龐大，因此也無法保證能常常升級的頻率，而小米卻帶來了不一樣的變化。

首先小米只有一款手機，這樣它維護起來更加方便，其次，小米分離了軟件和硬件，使自己變成了獨立的操作系統，然后像app一樣借助自己的平臺即時收集用戶的反饋和意見，定期更新和優化自己的系統。這就是互聯網思維的特性二：專注、反饋、快速、頻繁迭代，它在小米身上得到了充分的體現。

小米的這種研發模式，結合了手機的特點和互聯網的更新特點，確實能時刻抓住刺激粉絲的興奮點。這種模式前期確實起到了不錯的效果，但是同時也埋了地雷。在產品開發的世界里，很多的難題都出現在大家都看不到的區域。比如如三星的s3、 s4 引入了大量的創新功能，加了很多的傳感器，但是這些東西加入后，誰也不知道會不會對手機的基礎功能出現影響，畢竟大家都不能未卜先知。到了一年后最后大家才發現三星的旗艦機，用了一年后系統會癱瘓，這是因為大量新技術的加入，帶來了很多未知的問題。

小米也是，小米的軟硬分離讓帶來了軟件可以快速升級，從而可以迅速迎合用戶的優勢。但是同時也帶來了問題，小米手機如果使用了一段時間，硬件的觸摸上就會出現一些出現錯誤。

小米的商業策略成功后，一大批企業，華為、聯想、中興把它們的手機都變為了千元機系列。當然這些公司也只是盲目的打價格戰而已，小米的千元精髓，并未被根本復制出來。

上面談的這些，都是在講我們從傳統的設計邏輯中擺脫出來，可以嘗試看到更多的商業邏輯。集創堂反對的是孤島型設計師，我們主張設計師更多的從市場、產品、自身形態多個角度去看待問題，這樣才能讓自己的設計價值最大化。我們再來談第二個例子，這個和設計有關。

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

還有一個類似的故事是天翼支付如何搶奪支付寶市場份額的故事，這種形態的產品，設計是無法起到決定性的作用的。道理很簡單：在現有市場里，你的產品功能和支付寶一模一樣，并且支付寶占據了市場，那么你的設計就很難找到什么突破點去打破這種統治，唯一的辦法——咱們說的直白點——就是用錢砸，支付寶年收益率是4%，你是8%，這樣才有機會從市場中拿到一點點份額。因為在現有市場中這種前提下，產品拼的就是錢，就是銷售成本。

蘭切斯特戰略里曾經提到：“在現有市場中，對于那些已經形成市場統治力的產品，要想和它斗爭的話，你的銷售和投入必須是它的三倍才有機會獲勝”。看來從這點來說我剛說的8%已經少了，應該是12%。

講這個些例子是想告訴設計師，很多時候如果你努力的方向對，你的努力其實都是無用功，不是什么事拼命去做都就一定會帶來價值的，這也是我一直在討論集創思維的重要原因。作為一個設計者，前期一定要了解自己的目標人群、市場以及產品所處的市場。

全新市場的設計策略

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

全新市場的產品做用戶調研的失誤率也非常之高，因為用戶從來沒見過設計師描述的產品，他們給出的反饋結果也未必能反應他們的真實訴求。這個時候“專家用戶”的觀點就變得極為重要，因為專家用戶長期處在相應的這種環境中，他們對于市場的感應更加敏銳，所以他們給出的結果就更可能找到創新產品的生存本質。之前講到到Google Glass就是全新市場的案例。

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

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

他們本質上要的是更快的速度、更快的效率，所以創新三要素的第一個就是：

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

例如火車取代馬車，機器取代手工都是因為它們提升了人們的工作效率，這是時代發展決定的。所以提升效率是創新能否被廣大用戶接受的第一要素。

B．是否讓人們獲取更多、更準確的信息

互聯網的出現取代了著書籍；電商平臺酒仙網的出現讓更多的人愿意通過它來購買酒水，這是因為它們可以提供給用戶更多的信息（可以對比酒水的價格）。人們對于信息的獲取也是一個很原始的需求，好比一位小販做生意，在東村進貨需要4元，在西村進貨只就需要2元，如果他事先不知曉這些信息就有可能虧本。所以人們對信息是充滿渴望的。

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

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

這個點是指一些創新有獨特的商業壁壘、獨特的資源優勢、獨特的需求的，例如12306這種產品，或者人工智能等技術領域就屬于此類。

垂直市場的設計策略

垂直市場，也稱為細分市場。在這個市場里我們的產品策略通常是細分一個規模很大的現有市場，例如細分淘寶、細分社交都能帶來更多的創業機會。這個也是目前創業機會出現最多的市場。

比如在手機市場的紅海里，假如我們生產一款老人手機或兒童手機，那么這個就是屬于垂直市場。當無數老人手機涌現出來的時候，手機市場需要細分去滿足老年群體的需求，因為現有市場的產品無法滿足這類群體的需求，所以市場需要細分去滿足特殊群體的需求。

細分這個市場需要更好地的調研出市場目標人群的需求，然后根據目標人群的特點來開發產品，設計師應該用更多的時間去調研目標人群的需求，只有更好的找準人群，才能很好的設計出被他們喜愛的功能。

比方說我們要生產老人手機，那么大家可以看看上圖中的界面，看出有什么問題了嗎？通常我們會對于老人機的理解是認為覺得老人眼花，那么大號字體、大型圖標肯定是符合老人非常關注的一個特點的設計，所以我們在這張界面中增大了字號和點擊模塊。但是經過調查研究發現，其實這張界面的設計里面的文字和空間擺放也是充滿了問題。

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

另外還有一個細節特點是非常不容易發現的，你死盯著界面考慮很難會注意這一點，那就是老人點擊手機的時間比預想的要長，換句話說就是老人無法區分的“點擊”會和“長按”功能發生沖突。所以，我們在做老人機的設計時、就應該該取消“長按”的功能，只要老人觸摸到圖標就應該給予一樣的反饋效果。界面的長按、雙擊和單擊，我們都默認是一個操作。

因為在實際設計過程中，設計師還應該考慮到系統運行速度慢的問題。如果是一個緩慢的手機系統，會帶來造成老人的多次點擊，他們會懷疑是不是自己沒有點中。所以從上述的觀察，我們可以想象到聯想到蘋果手機的 3D Touch，這個技術對于老人們來說是多么大的認知負荷。

另外關于垂直市場，我們再談一款深受95后喜歡的社交軟件——JUJU。

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

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

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

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

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

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

最后還是那句話——不要做孤島型設計師，多抬頭看看天，從多維度考量產品的設計到底應該如何做。

關注公眾號“集創堂”，查看更多原創設計類文章。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(3255)

« 1 2 3 4 ... 11 »

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://www.syprn.cn

存檔

亚洲va欧美va天堂v国产综合