272018-7

视觉设计师如何做竞品分析？来看这份超全面的指南！

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

作为用户体验设计师，竞品分析也是必备技能之一，通过分析市场上的竞品，能够让设计师在短时间内快速了解自己所做产品在整个市场中的定位，对于视觉设计师来说，有一个系统的竞品分析方法，能够全面了解竞品的品牌、交互、视觉、市场等方面。同时竞品分析也为设计师提供一份可量化的评价标准，避免过于主观的看法，帮助设计师用专业水平说服团队伙伴，提升设计师的专业度，明确设计目标，优化设计产品。

那么今天我们就来聊聊从设计师角度如何来做竞品分析。

一、竞品分析的目的

1. 战略层

目标：了解市场情况和商业目标，分析产品的定位，明确自身的优势，以及与其他同类产品差异化的竞争点。

在这个层面上，身为视觉设计师，建议在做这部分的内容分析时，多和产品经理沟通，了解他们如何定位竞品。结合观察和平时的使用体验，来得出属于自己的结论。

2. 用户层

目标：了解用户是谁，为什么使用产品，使用的场景是什么，是否存在痛点，提供用户想要的产品，了解用户想要的产品。

当前语境下，可以通过如下途径，从用户的语言、行为去了解他们真实的需求：

使用用研团队的调研产出
网上搜索用户反馈（appstore评论/官网官微/论坛等）
直接的用户研究（方法包括问卷调查、可用性测试、用户访谈、眼动测试、焦点小组、用户画像、数据分析等）

3. 实践层

目标：得到有效的验证、有用的总结，找到能够启发设计的亮点，促进团队达到一致的共识。

视觉设计大部分时候处于产品设计环节的中下游，更多的是在交互产出的基础上进行设计，具体方案也是尽量遵照现有产品规范进行产出。当缺少视觉设计思考和理论沉淀、不明确与其他竞争对手的差别时，很容易碰到能力瓶颈。通过竞品分析，可以以更加全局的视角审视竞品的方案和自己的产出间的差距，从而产出更的设计，提升设计思考力，提高产品核心竞争力。

二、竞品分析的原则

原则1：呈现方式

突出要分析的维度上，我们产品所处的位置——排行如何、是好是坏，化主观为客观。必要时可以通过象限图、表格排序、树状图等方式呈现，可以为我们的分析提升可信度和可阅读性。

原则2：呈现选择

数量上不需要大而全的覆盖所有竞品，重点选择市场上优秀的竞品进行分析，就可达到我们的设计分析目的。

原则3：呈现内容

做竞品分析时容易将产品和企业文化、产品商业战略等信息剥离开，这样就很容易忽视这其中的相关性，分析的时候，就有可能导致片面或者出现误差。

三、竞品的选择

1. 直接竞品

跟所做产品有直接竞争关系，使用场景和用户群体一致的产品。

2. 间接竞品

使用场景和用户群体可以不一致但比较接近的产品。

3. 相关竞品

定位和领域可以完全不同，可以是不构成竞争关系的产品。但是相关交互和流程有关联，可以从中得到启发，因此无需研究整个产品，只研究与产品关联的部分。

注意

基于自己的目的选择竞品，同样的产品，但出于不同的目的，其所处的维度可能有所不同，同一个产品的不同模块也有可能处于不同的维度，在实际操作中注意甄别。

四、竞品分析的矩阵

1. 品牌传达

一个好的产品，会在产品的设计中融入品牌因子。让产品在传达内容的同时也在不断传达产品，让用户不断的接触产品。起到潜移默化的在用户心中塑造品牌形象的作用。做竞品分析之前先确立品牌的定位再去分析产品，会得到更真实合理的分析结论。

例如可以通过提炼出竞品的颜色、icon、配图等方式推导得出视觉性格。

2. 视觉风格

正确的定位视觉风格，可以让用户对产品更加有亲切感和融入感，从而增加用户满意度和用户粘性。可以通过提炼竞品的关键页面、配图等方式，推导得出视觉风格和风格的优势。

3. 页面布局

分析竞品的布局方式，对具体页面信息和布局进行细致拆解；研究界面元素之间的亲疏关系，版块之间的划分方式，基本元素的重组规则，以及一些细节的处理手法等。

由于具体页面布局拆解工作量较大，所以可根据需求，拆解部分页面即可。可以用横向法和时间轴法进行拆解。

4. 动效

一个好的交互动效可以加深用户对产品的内心印象。动效的使用让页面跳转更加页畅，指引用户的体验更佳。是对产品进行高阶的进化。给用户体验带来的好处是跃进性的。可以在这个点上，分析产品具有差异化的设计。

注意，不要为了加动效而加，好的动效是无感知和恰到好处的。不然，有可能会起到减分的效果。

5. icon

图标是产品设计的灵魂之一，一个好的图标设计直接赋予产品灵气和辨识度。分析竞品图标，从功能性、识别性、美观性不同的维度出发，逐一排列观察。

6. 字体

分析竞品字体样式的使用、字体数量的使用、字体层级的使用。

将文字的使用列成使用表之后，可以从字体的不同的使用方面分析出文字层级的设置方向，以便系统的管理字体在产品中的运用。可以更好的规范我们即将要设计的产品，从开发的角度来讲还可以更好的协同工作。

7. 规范控件

对页面的元素和流程进行拆解，找出哪些是由控件组成，以及这些控件是如何在产品里变成规范。

规范控件的分析整理将对产品的设计起到非常大的帮助，可以帮助我们从微观跳出，在宏观层面把控设计。控件的规范可以让产品具有一致性，帮助团队协作完成统一风格的页面设计。

8. 竞品分析的输出

做完以上分析，最后得出自己的设计总结并输出，竞品分析总结根据不同目的从以下几个维度进行拓展，重点在于输出观点而非「介绍」。

总结的时候主要是突出说明竞品相较于自己所做产品有哪些优势，同时又有哪些不足，最好说明竞品是什么原因而产生了这些问题，从设计的角度详细说明我们准备如何突破。

产品品牌：品牌的定位与产品形态息息相关，总结竞品设计有多少为品牌化服务的，可以从中做哪些借鉴。

设计风格：总结竞品的设计风格，取其精华去其糟粕，说明如何应用在自己的产品中。
设计亮点：设计中差异化的东西是否是竞品脱颖而出的关键点，这些亮点在我们产品中使用的可能性。
设计趋势：虽然所有内容都是基于现有产品产出的，但建议设计师更进一步，在现有竞品分析的基础上，结合行业动态，发掘行业整体设计趋势，反推运用到自己的产品设计中。

五、验证环节

竞品分析报告明确目的是第一位的，针对自己所做报告想要达到的目的，在项目结束之后，拿出支撑性内容查看自己的竞品分析，复盘看哪些分析是正确的，哪些分析和最终产出不相等，不相符的原因是什么。

具体可以通过数据（例如转化率、UV、活跃度、营收等）、用户反馈来验证，具体形式根据报告目的来定。这样做能不断地改进我们的竞品分析，将竞品分析的价值最大化。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(2945)

272018-7

<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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3098)

272018-7

17个 UI 设计指南

蓝蓝设计的小编

设计没有捷径，但是能骑上自行车肯定会快很多。文章中用17个简单案例进行透彻的分析。

设计没有捷径，但是骑上自行车肯定会快很多。

评论(0) 浏览(3507)

262018-7

移动端web页面开发

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

字号

工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，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 对盒子水平富裕空间的管理


    

        

            

                

                

            

            

                
                    /*
                

            

        

        

            

                

                

            

            

                
                    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 对盒子垂直方向富裕空间的管理


    

        

            

                

                

            

            

                
                    /*
                

            

        

        

            

                

                

            

            

                
                    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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3090)

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 可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。互联网公司更是提供给员工除了企业OA 之外的交流功能，比如建立员工 BBS 和留言板等，在上面大家可以对公司提出建议和意见。企业OA 一般出于安全和保密性的原因，很多公司都更加愿意自己开发。设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

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

四、网站组成部分

了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。

1. 首页

访问一个网站时第一个我们触及的就是网站首页。首页别名叫作 Index 或者 Default，是索引和目录的意思。在网站发展的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。到了现在，网站首页仍然是引导用户进入不同区域的一个「目录」，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个「更多」按钮来指引用户找到二级页面。

△ 首页原型图

2. 二级页面

在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到。一般网站有三级页面，就是为了避免用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如首页 > 体育 > NBA频道，这样的超链接结构，方便用户理解自己在哪里，并且点击可以回到其他页面。

△ 二级页面原型图

3. 底层页

在网站结构中最后提供用户实质资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。

△ 底层页原型图

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

五、技术原理

网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 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更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为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。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。比如：

栅格系统具体有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

△ 网站的栅格化会使网站看起来更有秩序感

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 用户用的更爽，可以从文字大小（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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(4533)

262018-7

设计图集：创意广告设计

蓝蓝设计的小编

作为一名设计师，脑洞是很重要的，虽有一些不切实际，不过是你对这个世界看到的经过反思之后的一种再加工，每个人不可能闭门造车“生”原创的。你必须经历这个过程。

评论(0) 浏览(3135)

252018-7

原生JS实现ajax详解

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

原生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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3936)

252018-7

优秀UI界面设计评析

博博

优秀UI界面设计评析

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

男生运动鞋商店支付界面，颜色搭配非常舒服，鞋子摄影也很漂亮，字体字号运用非常到位。

优秀UI界面设计评析

和上图一样的运动鞋支付界面，采用简洁风格，有右伴部分中的金色芯片元素，非常有意思，即表明了支付意思，也很好的点缀了整个界面。

优秀UI界面设计评析

颜色搭配非常好，给人高端的感觉，在输入正确的状态才出现一个橙色的图标做到画龙点睛的作用，个人非常喜欢。

优秀UI界面设计评析

界面设计排版合理，视觉感非常好，产品内容机械手表效果非常靓，质感也很好。喜欢

优秀UI界面设计评析

偏日系的设计风格排版，简洁而不简单，个人也是挺喜欢的。

优秀UI界面设计评析

和上图的设计风格一致，属于那种简单的配色排版，给人的感觉就是很舒服我喜欢这种。

优秀UI界面设计评析

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3994)

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

企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

美国通用公司官网

产品网站

从苹果公司的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类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如“折线图”、“饼状图”、“曲线图”、“表格”等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。后台网站不需要特别可爱的插图以及卡通形象，最重要的是效率。所以如果您经常处理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可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。互联网公司更是提供给员工除了企业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

技术原理

网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑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，即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。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等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

其他前端语言

有了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

雪碧图

我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，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。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。比如

如果网页宽度是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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(5687)

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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(3035)

首页

一、竞品分析的目的

二、竞品分析的原则

三、竞品的选择

四、竞品分析的矩阵

五、验证环节

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、网页设计是什么？

二、工作流程

1. 原型图阶段

2. 视觉稿阶段

3. 设计规范

4. 切图

5. 前端代码

6. 项目走查

三、网站种类

1. 门户网站

2. 企业网站

3. 产品网站

4. 电商网站

5. 游戏网站

6. 专题页面

7. 视频网站

8. 移动端H5

9. 后台网站

10. CRM系统

11. SaaS

12. 企业OA

四、网站组成部分

1. 首页

2. 二级页面

3. 底层页

4. 广告

5. Footer

五、技术原理

1. 基于鼠标的交互

2. 静态网页

3. 其他前端语言

4. 动态网页

5. 雪碧图

6. 视差滚动

六、网页设计规范

1. 画板尺寸

2. 文字规范

3. 图片规范

4. 按钮

5. 表单

6. 栅格

7. 适配Retina屏幕

总结

原生js写ajax可以类比打电话

优秀UI界面设计评析

一个懂市场的设计师有多可怕？

分类

日历

链接

个人资料

存档

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里