UI设计栈 2018-03-26 19:24:14
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
平时我们提到的布尔运算其实就是AI路径查找器(pathfinder),通过路径【加】【减】运算绘制出各种各样的形状，是成为一名优秀的UI设计师必备的技能之一。
对于初学者来说，刚开始可能模糊不清，确实不容易理解，下面栈长奉上最全的布尔运算深入解析教程，希望对迷途中的UI设计小白有所帮助。
图片来源于网络
图片来源于网络
图片来源于网络
UI设计中的布尔运算由浅及深，深入解析，图标瞬间高大上！
UI空状态404错误页可以帮助网站避免丢失用户的信任，并正确引导用户返回其它页面，减少客户的流失量。404页面的设计也是提高用户体验的一种表现形式。下面我们以去哪网404页面为例来为大家具体讲解一下404的构成。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
html与css:
<!DOCTYPE html>
</html>
JS:
var waterfall = function(wrap, boxes) {
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 标签重定义 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 260px;
margin: 0 auto;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a href="http://www.imooc.com" target="_blank">第一张 路飞与艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a href="http://www.imooc.com" target="_blank">第二张 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a href="http://www.imooc.com" target="_blank">第三张 路飞</a>
</div>
<div>
<img src="img/4.jpg">
<a href="http://www.imooc.com" target="_blank">第四张 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a href="http://www.imooc.com" target="_blank">第五张 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a href="http://www.imooc.com" target="_blank">第六张 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a href="http://www.imooc.com" target="_blank">第七张 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a href="http://www.imooc.com" target="_blank">第八张 霸气</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
// 获取屏幕可以显示的列数
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 设置容器的宽度
wrap.width(boxWidth * colsNumber);
// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};
// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});
1.Json的格式
其实json就是对象。源生的js代码并没有类的概念。对象救就是object。对象有自己的属性，也可以有自己的方法。json是一种轻量级的存储和交换信息的语言。他有自己的格式。
较为简单的json。里面只有简单的对象，key+value的形式：
每个元素之间用逗号隔开。调用每个key的值可用语句。例如：CellInfo.UEAmunt，就可取出其中的值。
较为复杂的json。里面包含了对象。
例如这个UEGroup1，里面的元素不仅有简单的key+value，还包含了三个对象。对象里的元素用{}括起来，彼此之间用逗号隔开。想具体访问某个元素的值也是通过逐层key，例如：UEGrooup1.DBR1.DLPackageSize
动态的往json只增加元素，增加对象。
前面说的几个都是静态的，提前写好的。那如果临时想加一个元素，例如在Cellinfo这个json中相加一个number的元素：
CellInfo.number=10;
对于往json中添加对象。例如我们想把Cellinfo和UEGroup1这两个object作为两个元素加入到另外一个大的json中：
2.json的发送
json写好后，发送给后台。至于后台怎么处理数据我们不关心。发送json的函数如下：
}
参数分别是后台的地址，变量，方法。变量就是我们自己写好的json，方法默认为post。例如我们想发刚刚的PETInfo
$.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);
数据的发送、并获取结果的实例：
需求描述：用户填写一系列的输入框，前端获取数据，封装成json并发送给服务器，服务器会返回一个返回值，表示状态。前端需要展示这个内容提示客户。
3.json在本地的存储
存储数据有很多方法。这里我用的是localStorage。localStorage与cookie的区别如下：
① cookie在浏览器与服务器之间来回传递。
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存
②数据有效期不同：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效。
localStorage 始终有效，长期保存。
③cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
④ 作用域不用
sessionStorage不在不同的浏览器窗口中共享；
localStorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的；
WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
用localstage存储json的实例：
将json取出来：
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
UI设计抛开视觉设计不谈，更多的是尺寸、适配等一些问题。这些问题往往是初学者比较难以理解的问题。更多的应用于简化开发过程、使多个产品拥有一致的体验，是落到实处的东西。由于负责各个产品线的产品经理并非同一人，如果此时设计师们又是渗透到各个产品组中，那么产品之间的体验就根本让用户感觉不出是一个部门设计开发出来的。规范是大型项目必须的，可以简化开发成本、减少各个部门之间的沟通成本。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
控制表格的多选和反选，直接上代码，顺便安利一个小知识点：tr的底边框不显示的问题，解决办法是：table{border-collapse:collapse;}
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
<style>
-
*{margin:0;padding:0;}
-
table{border-collapse:collapse}
-
.detail_tb {width: 100%;border: 1px solid #ccc;}
-
.detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
-
.detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
-
.detail_tb .fied_header th input {vertical-align: middle;}
-
.detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
-
.detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
-
.detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
-
.detail_tb tr td span {float: left;}
-
.detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
-
</style>
-
-
</head>
-
<body>
-
-
<table class="detail_tb" >
-
<thead>
-
<tr class="fied_header">
-
<th width="65"><input type="checkbox" value="number" id="number"> 序号</th>
-
<th width="110">孩子姓名</th>
-
<th width="130">家长电话</th>
-
<th width="110">介绍人孩子姓名</th>
-
<th width="130">介绍人电话</th>
-
<th width="150">报名时间</th>
-
<th width="100">分组情况</th>
-
<th width="100">拉新数量</th>
-
<th width="100">是否签到</th>
-
<th width="100">是否发奖</th>
-
</tr>
-
</thead>
-
<tbody id="tbody">
-
<tr>
-
<td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
-
<td width="110">张三</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分组</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">奖品1</option>
-
<option value="">奖品2</option>
-
</select>
-
</td>
-
</tr>
-
<tr>
-
<td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
-
<td width="110">张四</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分组</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">奖品1</option>
-
<option value="">奖品2</option>
-
</select>
-
</td>
-
</tr>
-
<tbody>
-
</table>
-
-
-
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-
<script type="text/javascript">
-
// 全选和反选
-
$("#number").click(function () {
-
var isChecked = $("#number").prop("checked");
-
$("#tbody input").prop("checked", isChecked);
-
})
-
-
// 单独选项控制全选
-
$("#tbody input").click(function () {
-
var allLength = $("#tbody input").length;
-
var checkedLength = $("#tbody input:checked").length;
-
if(allLength == checkedLength){
-
$("#number").prop("checked",true);
-
}else {
-
$("#number").prop("checked",false);
-
}
-
});
-
</script>
-
-
</body>
-
</html>
-
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?
首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：
(1) 看是否能把body和html的height: 100%去除掉。
(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch或者给body增加：body {overflow-x: hidden}。
2.ios页面橡皮弹回效果遮挡页面选项卡？
(1) 有时body和html的height: 100%去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为
var startY,endY;
//记录手指触摸的起点坐标
$('body').on('touchstart',function (e) {
startY = e.touches[0].pageY;
});
$('body').on('touchmove',function (e) {
endY = e.touches[0].pageY; //记录手指触摸的移动中的坐标
//手指下滑，页面到达顶端不能继续下滑
if(endY>startY&& $(window).scrollTop()<=0){
e.preventDefault();
}
//手指上滑，页面到达底部能继续上滑
if(endY<startY&& $(window).scrollTop()+
$(window).height()>=$('body')[0].scrollHeight){
e.preventDefault();
}
})
有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题，我们可以在弹出弹出时给底层页面加上一个类名，类名禁止页面滑动这样下层的橡皮筋效果就会被禁止，就不会影响弹窗层。 3.IOS机型margin属性无效问题？ (1) 设置html body的高度为百分比时，margin-bottom在safari里失效 (2) 直接padding代替margin 4.Ios绑定点击事件不执行？ (1)添加样式cursor ：pointer。点击后消除背景闪一下的css：-webkit-tap-highlight-color:transparent; 5.Ios键盘换行变为搜索？ 首先，input 要放在 form里面。 这时 "换行" 已经变成 “前往”。 如果想变成 “搜索”，input 设置 type="search"。 6.Jq对a标签点击事件不生效？ 出现这种情况的原因不明，有的朋友解释：我们平时都是点击的A标签中的文字了。 所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。但是我觉得不合理，虽然找不到原因但是解决办法还是有的。 (1)document.getElementById("abc ").click(); (2)$("#abc ")[0].click(); 7.有时因为服务器或者别的原因导致页面上的图片没有找到？ 这是我们想需要用一个本地的图片代替没有找的的图片
<script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="images/logoError.png"; img.onerror=null; 控制不要一直跳动 } </script> <img src="images/logo.png" />8.transform属性影响position:fixed？
(1)规范中有规定：如果元素的transform值不为none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1不只在手机上，电脑上也一样。除了fixed元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果transform元素的display值为inline时又会有所不同。最简单的解决方法就是transform元素内部不能有absolute、fixed元素.
9.ios对position: fixed不太友好，有时我们需要加点处理？
在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。
而ios上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。查资料说什么的都有，iscroll,jquery-moblie，absolute，fixe，static都非常复杂，要改很多。。。
让他弹出时让滚动条在部
var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { $('textarea').focus(function () { window.setTimeout('scrollBottom()', 500); }); } function scrollBottom() { window.scrollTo(0, $('body').height()); }10.jq validate插件验证问题？
(1)所以的input必须有name不然会出错
11.有时手机会出现断网的情况，我没可能会对断网的情况做一些处理？
(1)navigator.onLine可判断是否是脱机状态.
12.判断对象的长度？
(1)用Object.keys，Object.keys方法返回的是一个数组，数组里面装的是对象的属性
var person = { "name" : "zhangshan", "sex" : "man", "age" : "50", "height" : "180", "phone" : "1xxxxxxxxxx", "email" : "xxxxxxxxx@xxx.com" }; var arr = Object.keys(person); console.log(arr.length);(2)Object.getOwnPropertyNames(obj).length
13.上一题我们用到了Object.keys与Object.getOwnPropertyNames他们的区别？
Object.keys定义：返回一个对象可枚举属性的字符串数组；
Object.getOwnPropertyNames定义：返回一个对象可枚举、不可枚举属性的名称；
属性的可枚举性、不可枚举性：定义：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false });
console.log(Object.keys(obj).length); //output：1 console.log(Object.getOwnPropertyNames(obj).length); //output：2 console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"] console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]
综合实例
var obj = { "prop1": "v1" };
Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false});
console.log(obj.hasOwnProperty("prop1")); //output: true
console.log(obj.hasOwnProperty("prop2")); //output: true
console.log(obj.propertyIsEnumerable("prop1")); //output: true
console.log(obj.propertyIsEnumerable("prop2")); //output: false
console.log('prop1' in obj); //output: true
console.log('prop2' in obj); //output: true
for (var item in obj) {
console.log(item);
}
//output：prop1
for (var item in Object.getOwnPropertyNames(obj)) {
console.log(Object.getOwnPropertyNames(obj)[item]);
}
//ouput:[prop1,prop2]
14.移动开发不同手机弹出数字键盘问题？
(1)type="tel"
iOS和Android的键盘表现都差不多
(2)type="number"
优点是Android下实现的一个真正的数字键盘
缺点一：iOS下不是九宫格键盘，输入不方便
缺点二：旧版Android（包括微信所用的X5内核）在输入框后面会有超级鸡肋的小尾巴，好在Android 4.4.4以后给去掉了。
不过对于缺点二，我们可以用webkit私有的伪元素给fix掉：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
(3)pattern属性
pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern后，前端部分的验证更加简单了。
显而易见，pattern的属性值要用正则表达式。
实例 简单的数字验证
数字的验证有两个：
<input type="number" pattern="d">
<input type="number" pattern="[0-9]*">
15.input[number]类型输入非数字字符
js获取的值是空；比如-12，+123等
16.Javascript：history.go()和history.back()的用法与区别？
简单的说就是：go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。history.go(-1):后退+刷新history.back():后退
之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟javascript：history.go()和history.back()的区别类似。
Chrome和ff浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。类似于history.go(-1);
而safari（包括桌面版和ipad版）的后退按钮则不会刷新页面，也不会提交数据申请。类似于javascript：history.back();
17.Meta基础知识：
<meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例，为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
空白页基本meta标签
<!-- 设置缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta标签
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
18.移动端如何定义字体font-family？
@ --------------------------------------中文字体的英文名称
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
19.打电话发短信写邮件怎么实现？
// 一、打电话 <a href="tel:0755-10086">打电话给:0755-10086</a> // 二、发短信，winphone系统无效 <a href="sms:10086">发短信给: 10086</a> // 三、写邮件 <a href="mailto:863139978@qq.com">点击我发邮件</a> //2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a> //3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题） <a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a> //4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]">点击我发邮件</a> //5.包含主题，用?subject= <a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a> //6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 <a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a> //7.内容包含链接，含http(s)://等的文本自动转化为链接 <a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a> //8.内容包含图片（PC不支持） <a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a> //9.完整示例 <a href="mailto:863139978@qq.com;[url=mailto:384900096@qq.com]384900096@qq.com[/url]?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0A[url=http://www.baidu.com]http://www.baidu.com[/url]%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
|
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今天的译文同样来自设计师 Eugen Eşanu，他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问题依然能够给我们今天的新局面以启发。
「好设计应该是显而易见的」，这句老话在过去的几个世纪当中影响到了各个不同的领域，从美食到音乐，从建筑到哲学，我们如今的生活几乎是在这句话的影响下被逐渐被塑造出来的。
但是同样的，人类的进化并没有我们想象中那么快速，我们的思维和本能仍然被深刻地影响着我们的决策。换句话来说，人类的行为模式有着很长的保质期，在许多事情上，20年前很难做，在今天依然不那么容易去执行。
Steve Krug 的这本《Don’t Make Me Think》中文译本名字是《点石成金：访客至上的网页设计秘籍》，译名可能没有它的原名那么直接，但是也传递出这本书所要表达的核心概念。
这本书成于2000年第一次互联网泡沫时代之后，Krug 在这次浪潮之后提出了不少实用的设计原则，直到今天仍然有着极高的价值。这本书随后多次再版和修订，其中的设计案例几经迭代升级，我们可以看到现代网页设计的提升和进步，同时也能从中感受到，用户——人类行为本身的模式化。「访客至上」的表述太过客气，「不要让我思考」这一表述更能表现用户行为的特征，而今天我们所面对的绝大多数的优秀产品，无论是手机电脑还是汽车，同样遵循着这一原则。
这本书的成功是建立在无数痛彻心扉的教训之上，这也使得它本身的价值无与伦比。今天的文章本质上也是一篇读书笔记，设计师应该对于用户、人性有足够的认知，方可作出足够优秀的设计。下面的10个总结，既是常见的认知错误，也是成就好设计的契机，就看你怎么把握了。
当我们在查看内容和信息的时候，绝大多数情况下我们都会下意识寻找让自己感兴趣的东西。比如，我们很少会完整地浏览网站上所有的文本和内容，为什么？绝大多数的用户打开网站都是在试图完成某项任务，达成某个目标，而网页中的不同部分的内容往往是服务于不同的功能和目标的，我们努力达成目标即可，并没有阅读全部的必要。不过，作为网站的设计者，我们往往还是提供了足够丰富的内容和完善的功能，一方面是因为我们觉得人们需要知道，另一方面也是应对不同用户的需求。正如有的设计师所说的，它们「增加了体验」。
所以，通常而言，我们可以作出下列优化：
视觉层次是确保用户快速扫视能够获取到信息的重要助力。视觉层次能够呈现出页面中不同元素之间的优先级和关系，在设计的时候，同样需要遵循下面的几个原则：
我们明白，用户总会期望看到新东西，但是，市面上有太多的工具和应用，如果各行其是，忽略约定俗成的规则，特立独行地采用自己的规则，会让每个应用的学习成本都提高，这对于用户几乎是毫无益处的。
当设计师被要求设计某个东西的时候，内心是充满重新发明的冲动的，这个我们都明白。而设计出和别人相似的东西看起来又有点「政治不正确」，甲方总会希望设计作出点不一样的东西。更何况，这还是一个少有鼓励和赞扬的行业，也很少为「最贴合用户需求」的产品颁设计奖。
但是设计仍然需要在各方之间作出最佳的平衡。
在重新发明轮子之前，你必须了解破坏和创新所意味着的真实的价值（时间，体验，耗费的精力和所需的知识）。
我们的工作是要让产品清晰明了，让事情便捷易行。即使做不到明显，也应该尽力向着不言自明的设计靠拢。说明书这种东西是没有人会主动去看的，它们的存在意义本身就不大，你需要通过合理的设计，让产品本身发挥指引性的效果。即使说明书必须存在，也尽量让它简短明了。
如果功能并不明显，我们应该尽量让它明显一点，让目标更明显。
以宜家为例，一个需要买回家组装的柜子，绝大多数的用户可以在简短的指引之下就可以轻松正确地组装，为什么？因为绝大多数情况下，一个柜子长什么样，用户眼前有清晰的画面，哪怕说明只有几张简单的图片，用户也不会犯错。
绝大多数的用户并没有兴趣了解你的产品的工作方式，并不是因为他们不够聪明，仅仅是因为他们不在乎。所以，一旦他们确定你的产品是能用的，就很少会去注意其他的部分。
以苹果的无线耳机 AirPods 为例，从价格上来说，它并不亲民，但是它的交互方式和使用体验确实非常的独特和优秀，这也不难理解许多用户会选择它。用户在购买它之后，并不会去思考它是如何运作的，其中所包含的诸多新技术，对于用户而言，只是润物细无声地发挥着作用而已。
我的母亲就使用的 AirPods ，她从来不会问我它的原理，但是她很清楚，耳机需要放在充电盒中充电，和手机配对之后就能用了，并不复杂。
这一条可能是我最喜欢的。我们设计师总喜欢为用户带来微妙的视觉效果，来给用户带来乐趣。对吧？可是如果我告诉你，用户并不关心它们，你会怎么想呢？他们也根本不会告诉你他们有多在意或者多不在意，也不会在一次又一次看到的时候对于这些设计有多少感觉。
为什么会这样？生活环境赋予每个用户以复杂多变的情境，他们很少有机会去感受微妙的设计所带来的奇妙情绪。风在吼，狗在叫，小孩还在满屋跑，水壶里面水开了，老婆在耳边抱怨着工作中的细微末节，而你正在填写着表单准备预订明天的高铁票，在那个时刻，APP 当中微妙的动效和视觉线索，手一抖，你可能还会多买一个没有必要的捆绑销售的酒店折扣券。
但是另外一方面，对于优秀体验的追求不应该因此而放弃，还有很多用户会从中受益，这也是促成优秀产品的必须因素。只不过确实有很多用户没法去在意它们罢了。
焦点小组是做什么的？一小群人围坐在桌子旁边，讨论他们对于产品的看法，他们过去的经历，它们的感受和对于新概念的理解。焦点小组的作用是帮你更好地界定目标用户，目标用户的感受等等。
可用性测试则是另外一回事。做可用性测试的时候，通常是为了测试产品而观察一个特定的用户使用产品的过程。在测试中，你需要测试人员执行特定的操作，以此来查看整个设计中的概念是否直观，功能是否需要完善。面对焦点小组的时候，你需要倾听观点，梳理思路，在进行可用性测试的时候，更多需要的是观察，并且解决具体的问题。
我们在设计产品的时候，常常会从自己的需求出发：「我也是一个用户，所以我知道什么好什么不好。」我们对于自己的喜好有着强烈的感受。
我们会说，当我们的产品具备_____的时候，我们会很喜欢，又或者，我们认为_____是一个巨大的痛点。当我们真正和团队成员坐在一起讨论产品的时候，大家都有各自的看法和各自的情绪，所有人的都有着极强的个性和独特的看法，这个情况就很尴尬了。因为我们常常会倾向于认为绝大多数的用户和我们自己一样。事实上并不一定如此。
无论是设计产品功能还是测试产品的时候，问对问题都很重要。测试的时候，问用户「你们喜欢下拉菜单吗」这样的问题，不仅销量不高，而且不会带来价值。这个问题，应该这么问：「在这个情况下，在这个页面上，下拉菜单这种设计是否能够给你带来良好的用户体验？哪里让人觉得不舒服？」
诸如「用户喜欢这个产品吗」这样宽泛的问题意义不大，用户也很难提供针对性的、具体的回复。
而且，作为设计师我们不应当专注于用户是否喜欢这样的问题，这样会失去动力和专注力。可用性测试可以帮你消除各种「喜欢」相关的问题，并且帮你找到真正要做的事情。这才是重点。
我在哪？我要干嘛？
我应该点哪里开始？
他们在这放的这个控件是干啥的？
这个页面是用来做什么的？
他们为什么这么称呼这个功能？
这个是广告还是内置的功能？
在使用产品的时候，如果触发用户大脑中的各种问题，只会增加用户的心理负荷和工作量，分散用户注意力并不是好事，而且用户本身并不喜欢解决各种难题。
每当用户点击某个控件而不起作用，或者它看起来是个链接实际上并不是，会消耗用户对你的信任感，降低产品的可靠度。
炫酷的概念和新颖的趋势不仅吸引用户，同样是设计师的心头好。但是我们在新的时代，新的局面之下，始终面对的是以往的用户，看似千变万化的需求背后是不变的人性。
至少《Don’t Make Me Think》这本书一直在探讨的问题，经过20年的世事变迁，几次互联网浪潮，在这个号称互联网4.0时代，仍然发挥着作用，依然是那么具有启发性。
新状况之下潜藏着老问题，想要洞悉本质，设计师要懂心理学和行为学。在之前的几篇文章当中，我一直在试图梳理出不会随着时间改变，而一直存在的、亟待解决的问题以及可供使用的原理。
《为何如今的产品总给人千人一面的感觉？》揭示的是「特征蔓延」和「竞争驱动式设计」是如何让产品走向平庸和毁灭，解决方案藏在结尾。
《熟知用户行为的这7个层面，你的设计才会走进人心》则介绍了唐纳德诺曼的用户行为的7个层面，这是一套分析用户行为，设计产品流程的有效方法，拥有持久生命力的产品的设计策略，和这套方法不谋而合。
《这7种广泛存在的认知偏差，影响了我们太多的决策》 则帮你梳理了7种常见的认知偏差，认识自己了解用户，这些知识能消除误解，同样能够帮你洞悉真相，是不可多得的利器。
设计的方法和工具成千上万，想明白道理，问对问题，接下来的路更容易走通。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
留白对于设计的价值，已经得到相当广泛的认可了。尽管留白看起来不复杂，但是在复杂多变的设计环境之下，往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡，而要做到这一点，需要相当的实践和积累。
蓝蓝设计的小编 http://www.lanlanwork.com