如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
很难想象，如果没有原型设计，如今的数字产品设计流程会变成什么样。原型的存在，让产品团队在制作和开发过程中更加直观，就像那句话说的：展示，而非表述。
现如今，许多产品团队借助原型来测试想法，甚至销售产品。不过，原型设计本身并非是万无一失的，设计师依然会面临许多陷阱，并且拖累整个产品的进程。
今天的文章，总结了6个常见的原型设计的陷阱。
我们先设计出来，然后弄明白如何使用它。
在这种说法的指引下，设计和开发团队需要花费大量的时间来处理那些没有任何价值的事务，在没有特定目标的情况下制作原型，会浪费大量的时间。
每个原型的设计目标应该是非常明确的，原因应该是清晰的。这个目标可以是源自于一个特定的想法，或者某种假设，产品团队在这个方向的指引之下，利用系统化的知识来构建符合目标的原型。
在创建原型之前，设计师应该问自己一个问题，「通过创建这个原型我们要试图解决什么问题？」如果能够找到一个明确的答案，那么这个原型是清晰且具有凝聚力的，有助于减少潜在的开销。
产品团队通常会力图制作出有效有用的原型。当制作出来的原型不可用甚至根本无法完成的时候，整个团队会为之气馁，而这种消极的心态可能会拖垮整个项目。
为了提率，设计人员应当将失败的情况视作为整个原型制作过程中自然的组成部分。原型在很多时候是用来测试假设和想法的，并非每个假设都是有效的。这就是为什么创建工作原型不应该是原型制作工作最重要的结果。原型制作工作最重要的成果应该是获取有用的信息和新的知识。因此，将焦点从失败的情绪上，转移到学习新的知识上来，成功和失败的原型，都能够让你的产品进步。就像大家常说的，失败是成功之母。
产品团队常常在拥有第一个想法的时候，就想坚持住，将它打磨成为最终的解决方案。随后，团队花费大量的时间来出揣摩尝试，调整细节，制作原型，甚至直接开始设计视觉稿。
结果，花费无数小时创建和打磨的原型，在可用性测试早期，就呈现出不理想的状况，接下来，设计师和团队会意识到最初的想法其实不够好。
经验丰富的团队知道，想要探索和测试一系列的想法是必不可少的，并且只有通过测试之后，效果最好的方案，才是值得坚持做下去的。花费更多的时间来思考，团队才能针对问题空间继续挖掘下去，并且找到潜在的解决方案。
原型的设计者常常会对于自己的设计有大量的投入。这种投入是会造成一种「投资偏见」——你在某个事情上花费的时间越多，它对你来说就越有价值。值得注意的是，它对于你的价值会越来越高，但是对于别人而言并非如此。而原型设计同样如此，当设计师对于自己的原型过度沉迷的时候，产品可能就会暴露在危险之下了：你会很容易忽略它们存在的缺点，即使这些缺陷很明显，设计师也会忽略团队成员和其他人的反馈。
不要拿原型当传家宝。
在打磨原型上花费太多宝贵的时间和精力，会剥夺设计师对于反馈应有的注意力和敏锐度。让你的原型在细节和复杂度上保持在一个合理的度上。
原型并不是艺术品，它应该是帮你找到答案的工具。
如果你倾向于采用尽可能完善的设计，那么请采用最小可行原型——添加足够的细节，但是尽可能确保可行。将原型视作为一次性的工具。每个原型都有特定的用途，一旦达到目标，就尽可能用更好的东西替换它。
「当我们拥有强大的原型工具的时候，为什么还要使用纸和笔呢？」设计师跳过手绘阶段，并且直接使用计算机来绘制数字原型的时候，他们相信数字化的设计是可以节省时间的。但是实际上，手绘的草图能够帮助设计更快地起步。
当你下次不知道如何解决问题的时候，可以试着从笔和纸开始绘制草图。只需要开始绘制草图，勾勒出所能想到的变化，然后把它们贴在墙上，并且和你的团队一起从技术和业务的角度上讨论可行性。
保真度是描述细节程度的一种度量，我们常说的线框图细节简略，是低保真的，而视觉稿则常常会用到丰富的细节刻画，它是高保真的。原型的呈现形态是非常多样的，可以是低保真的也可以是高保真的。制作一个高保真的原型是非常诱人的，但是一定要抵制住这样的诱惑。值得注意的是，原型的保真度应该和你想法的保真度相匹配。
这意味着，设计师应该根据他们的设计过程所处的阶段来选择保真度。当设计师违反这一规则的时候，往往会带来糟糕的结果。比如过高的保真度会让处于早期阶段的设计师陷入「投资偏见」。
当团队设计产品尚且处于初期的时候，尽量采用低保真的策略来进行绘制，比如使用草图。
△ 低保真的草图原型
当你想要与真实的用户一起测试你的想法的时候，尽量使用保真度更高的设计，比如数字化的可交互的原型。使用高保真的原型来进行可用性测试，能够产生更真实、具体的反馈。高保真的原型展示给利益相关者来看也非常有用，他们会更好地判断产品的功能和内容。
△ 在 Adobe XD 中创建高保真的原型
因此，考虑最终的目标和你所拥有的时间，来确保原型的最佳保真度，尽早与期望达成一致。
原型设计在每个产品设计项目当中都是至关重要的，正确地设计原型，才能尽早地构建真实的产品。
关于原型设计，乔布斯在1992年 MIT 的演讲上说到的一个事情非常有意思。彼时，他还未回归苹果，而是在制造名为 NeXT 的高端电脑，并且对于面向对象编程有着极高的热忱。
我们已经有2年时间没有构建任何工程上的原型了。这意味着，从产品开始设计的第一天，工程师和整个制造业就已经参与进来了。很多时候，在构造原型的时候，生产工具和技术根本是无法与之匹配的，而当你在原型设计的时候所积累的东西，在投产的时候就得完全抛弃，然后重新开始。因为我们始终紧密地和技术结合起来做，因此我们不会抛弃任何东西，并且不浪费时间，这也是我所见过的设计、工程和制造团队之间，最健康的关系之一。
现如今，身为设计师的我们在使用 Photoshop、InVision 等工具制造原型的时候，实际上开发可能是与之脱节的。产品团队中，设计和开发之间的矛盾，从来没有仅此减少过。而「全栈设计师」这一概念的提出，又何尝没有来自这种矛盾的压力呢？
诸如 Sketch 和 Figma 这样的新工具在做原型设计的时候，已经或多或少地开始在设计和开发之间找到协同的点，试图在设计验证和技术验证之间，找到结合的办法。
更好的原型设计，更合理的技术和设计的结合点，这也许是我们未来的探索方向吧。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们不会放过一套好的ui素材，一定会把他们分享出来，而今天分享的就是由云瑞整理的2017年11月新出炉的ui套装源文件下载，这些套装都是极简主义和扁平化风格的，都是当下最流行的，包含web和手机app界面ui，希望对您有用
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
对于图标如何断线，如果是经验丰富的设计师，估计靠感觉做就可以了，但不是大神的我们怎么办呢？总得有点规律让我们参考参考吧，虽然有些规律不能全盘通用，但这次总结一定能给你带来帮助。
来，看下大纲：
1.先考虑在拼接处断线
2.平衡视觉复杂度
3.避免正中间处断线
4.尽量让图标一笔画完
1.先考虑在拼接处断线
如果你觉得此篇文章对你有作用，请收藏转发分享给你的朋友，把自己的收获写在评论区，小编会解答。
如果一个物体是由两个部分组成，当我们选择在拼接处断开：
我会觉得两个部分还没组装好，是一种很自然的分开。
但如果是下面这样的：
我会觉得它坏了，很不舒服。
我们做断线图标的时候也一样，可以先考虑在物体的拼接处断线，让断口看起来自然和谐！
举个例子：
下图是一个“我的”图标：UI设计学习群：583915450，领取100G学习资料，备注：资料领取
如果现在让我给它来做断线，我就先找到拼接处，分析如下：
虽然例子有点血腥，但事实确实如此，拼接处就在头和身子连接的地方，所以尝试在这里断开：
哎呦，我觉得还ok。
行，那再来个例子！
下图是个消息的图标：
再来分析，它的外形是由一个矩形和一个三角形组成的：
我们还是在拼接处断开，得到如下图：
嗯，也还行！
所以一般来做断线图标，我就会先利用这一个规律看可不可行。
如果可行，就继续优化细节，如果不可行再尝试其他方法。
2.视觉复杂度要平衡
有时候，我们的图标不好将其拆解，这时候我们就可以尝试去考虑图标的视觉复杂度。
来个例子，下图是一个皇冠的图标：
经过分析，我们可以得出，图标红色区域的复杂程度要比蓝色区域高：
所以我选择在蓝色区域断口，来增加蓝色区域的复杂程度，达到平衡的效果：
那如果在红色区域断开是什么样的呢，我们来分析对比一下：
所以，通过对视觉上复杂程度的解析后发现，方案一会平衡协调很多！
再来个例子，下面是个通讯录图标：
图标的左侧要比右侧复杂:
如果我们选择在左侧断线，那左侧就会更复杂，这样两边的复杂度就会失调，所以我选择在右边断线：
这样图标左右都有细节，视觉平衡多了！
3.避免正中间处断线
有朋友会说了，那有些图标没有拼接处，复杂程度也都一样，比如下面这种：
怎么办呢？
很简单，这种图标只要尽量避免在正中间断线就ok，因为正中间断线显得过于呆板：
其它地方都可以尝试，例如左上角、左上角、右上角、右下角等等。
4.尽量让图标一笔画完
这也是一个很重要的知识点：如果可以的话尽量让图标外轮廓一笔画完，如下图：
其实很多时候，只要我们能从拼接处断线，基本都是可以一笔画完的，所以大家注意一下就好了。
当然，如果实在不能一笔画下来，也不必勉强，因为强扭的瓜不好看！
总结
这四个知识点就是目前为止菜心所整理的关于断线图标的规律，个人经验，供大家参考。
不过提醒大家，这些方法难免会有少数不适用的时候，遇到不适用的情况，千万不要因为规则而被困住，多多尝试，敢于不同，也许可以找到更合适的解决方案。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com