1.获得内容 - text()、html() 以及 val()
text() - 返回所选元素的文本内容
html() - 返回所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">圣诞快乐，<b>新年快乐</b></p> //给p元素里边的文本一部分加上b标签 <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ alert( $("#p1").text() ); //获取文本 }); $("#b2").click(function(){ alert( $("#p1").html() ); //获取html内容 结果会包含b标签 }); }); </script>
val() - 返回表单字段的value值
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip" value="nihao"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#ip").val()); 结果返回表单元素的value值（nihao） }); }); </script>
2.获取属性 - attr()
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr("href")); }); }); </script>
1设置内容和回调函数 - text()、html() 以及 val()
text() - 设置所选元素的文本内容
html() - 设置所选元素的内容（包括 HTML 标记）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1"></p> <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text("圣诞快乐，<b>新年快乐</b>") ; //设置文本 }); $("#b2").click(function(){ $("#p1").html("圣诞快乐，<b>新年快乐</b>") ; //设置html内容 结果会包含b标签 }); }); </script>
text()、html()回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">新年快乐</p> <button id="b1">显示文本</button> <button id="b2">显示html</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#b1").click(function(){ $("#p1").text(function(){ return "happy new year"; //调用函数，返回一个新的文本 } ) ; }); $("#b2").click(function(){ $("#p1").text(function(){ return "happy <b>new</b> year"; //调用函数，返回一个新的文本 } ); }); }); </script>
val() - 设置表单字段的value值和回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val("happy"); }); }); </script>
val（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <input type="text" id="ip"> <button id="but">显示value值</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ $("#ip").val(function(){ return "happay"; }); }); }); </script>
2.设置属性 attr（）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com">11111</a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr( { "href":"http://news.baidu.com/" } )); //attr()里边，要加{}号 }); }); </script>
attr（）的回调函数
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <a id="aa" href="www.baidu.com"></a> <button id="but">显示元素属性</button> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#but").click(function(){ alert($("#aa").attr({ "href":function(){return "http://news.baidu.com/" } } )); //attr()里边，要加{}号 });}); </script>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
提示：DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
val()方法例子：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value:"+$("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("url"));
});
});
</script>
</head>
<body>
<p><a url="img/001.jpg" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
在做设计的过程中，大部分设计师只专注于主操作流程、主页面、分支流程、小页面和页面的不同状态。却容易忽略产品中容易出现的各种异常状态。
当用户停留任何一个界面，进行任何一个操作都可能发生异常状态。
如果接到每个需求都去制定一次异常状态，这样的后果可能会使得产品的不同模块、不同流程，异常状态都不一致。全局规范性被破坏，同时设计师的效率也降低。
因此全局制定异常状态规范很有必要，后续就不需要再设计，开发直接复用异常状态的规范。省时省力、提率、设计规范、运行更流畅、减少代码重复率、安装包也会更小。
异常状态一共有以下 10 类：
当移动设备网络异常时，导致无法上传和下载数据，从而无法正常的使用产品。
网络异常存在两种场景：
1. App主动行为
当无网络时，用户打开 App，通常有三种方式提醒用户当前网络异常。
tips 提示，通过 tips 提示用户当前网络不可用，tips 使用场景一般为用户打开后，界面停留在首页，且首页以列表形式展示，这样的话， tips 才能合理的融入到界面中，常见使用这种布局方式的有微信、qq等。
使用toast提示用户网络异常，同时提示用户可以去使用非数据影响的操作。例如网易云音乐，当无网络时候，告知用户可以去正常听已下载的音乐。
使用对话框，引导用户进入设置页面，关闭飞行模式或者打开 Wi-Fi，例如美团进入首页后的对话框提示。
2. App被动行为
当前无网络时，用户点击操作，无法正常使用产品，这时候通常有两种处理方式。
一种是当前界面出现 toast 提示。另一种是进入下一级界面，以缺省页的形式提醒用户当前网络异常。
例如手机淘宝，没有网络时，用户点击会进入下一页，出现缺省页提示，告知用户网络异常，同时提供刷新按钮。
美团在无网络时，点击其他 tab bar，出现 toast 提示用户当前网络异常，稍后重试。
3. 小结
当涉及需要消耗大量流量数据时，且非 Wi-Fi 情况下，这时候需要告知用户。常见的例如看视频，听/下载歌曲、视频通话、下载上传文件等。
例如B站，当使用移动数据看视频，则通过提示语和对应按钮上的流量值告知用户。
网易云音乐在非 Wi-Fi 情况下，下载音乐时，通过对话框，告知用户当前使用数据流量，同时提供可继续下载的功能，也提供通过办理新业务解决数据流量的问题。
空数据一共分为两种类型，分别为初始状态和清空状态。
1. 初始状态
用户首次使用，没有任何内容数据时，需要用户进行某种操作才能产生内容的界面，这时候需要提示用户需要进行某种操作。
例如淘宝App，当用户没有把商品加入购物车时，进入购物车界面，会给出提示购物车界面为空。给出用户提示，给出相对应的入口按钮，引导用户操作。
如果初始状态，无任何内容直接给出一个空白界面，用户可能会以为该界面出 bug 了。
Gmail 直接用一个插画提示用户收件箱为空。
一般对于初始状态的设计，常规做法是简单的插画配合简洁的文案，必要的时候给出引导用户操作行为的按钮。
现在流行的设计趋势是插画越轻量越简单越好，以免抢夺了文案信息。
2. 清空状态
当用户清空当前的页面内容，产生了空界面，这时候需要有明确的提示告知用户出现当前页面的原因，且告知用户该如何处理。
清空状态是对初始状态的进一步细化。清空状态的界面和初始状态设计很相似，唯一不同的是文案的提示。
有的产品直接把清空状态的界面按照初始状态来设计，这样也是可以的，缺点就是没有告知用户产生空状态原因是初始化还是清空所致。
在加载过程中，App 向服务器请求数据，如果是网络原因导致，则使用网络异常的设计规范。
如果非网络异常原因，则可能因为服务器异常导致接口请求不到数据，从而加载失败。
第一次请求失败，有些场景可能重试 2 次，例如微信支付宝，这种情况可使用 toast 告知用户加载失败的原因。
任何操作行为的交互界面都伴随着操作失败的概率。
当用户操作失败时，在当前页面给予一个反馈，告知用户操作失败，最好告知用户操作失败的原因，让用户知道接下来如何避免操作失败。
因为服务器异常是小概率事件，但是也会发生。
当服务器异常时，且用户在操作过程中，出现这种情况，一般可设计为对话框提示，明确告知用户，服务器出现问题，让用户稍后重试。
例如下图的华为云备份恢复界面：
用户在搜索过程中，除了出现正常的匹配结果，还存在无匹配结果的情况。针对搜索无结果的情况，要给予用户操作无结果的提示。
几乎搜索无结果的状态都是在内容区出现对应提示。例如 iOS 相册，通过搜索关键词，当没有匹配照片时，则出现对应的提示，如下图右侧图：
下图淘宝买家版后台，当用户搜索关键词无结果时，出现对应的提示语和插画。
无权限的场景，通常适用于 b 端产品，对于不同组织架构的企业员工，会存在不同的权限。
例如部分重要的内容，非同一组织架构的员工无权限查看，这种情况，用户点击进入一般给出对应的提示。
当然最好的方案是在 App 上面过滤掉无法查看的内容，但是存在员工间的转发行为，这时候无权限的员工，点击进入，则显示暂无权限查看的提示页面。
一般 App 功能正在开发中，这种情况不会在 App 界面中展示出来，只有完全开发完毕并上线后才会出现在 App 上。
但是也有一些产品的特殊业务，会将一些未开发的功能展示出来，例如微信公众号，长按微信文章，即出现对应的提示。
也有一些新闻频道还没有开发完毕上线，这时候用户点击进入下级界面，则出现对应的提示语/插图提示，如下图所示：
有的时候，文件或者页面内容被删除，但由于文件或者页面内容的上一级页面有缓存，所以当用户点击进入时，会出现文章/文件被删除的情况。
已被删除的异常状态，常见的设计是用户进入新页面出现对应的插画和标题提示。
例如下图微信公众号文章内容被作者删除，读者点击进入，加载后的界面就出现内容被删除的提示。
以上就是常见的 10 种异常状态的简单介绍和说明。在制定异常状态的设计规范时，可以参考本篇文章。
当然也有公司特殊的业务导致存在很特殊的异常状态，针对这种情况，可以适当的增加、删除或者修改，使其更适用于自己公司的项目。
文章来源：优设
局部变量
局部变量：在函数内部声明的变量，只在函数内部起作用。函数的参数也是局部性的，只在函数内部起作用，对于其他的函数或脚本代码是不可用的。
函数可以访问函数内部定义的变量，如：
<p>函数可以访问函数内部定义的变量:</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var a = 4;
document.getElementById("demo").innerHTML = a a;
}
</script>
全局变量
在web页面中全局变量属于 window 对象，全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。
函数也可以访问函数外部定义的变量，如：
<p>函数可以访问定义在函数外的变量：</p>
<button type="button" onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a a;
}
</script>
全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
问题描述：
做抽屉式菜单时候，在 ie 7 下发现 li 元素之间会留白，如下图：
原以为是样式的问题，后来看到有博文写到“行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔”。
解决办法：
li 标签之间的空白，可以通过设置 li 标签的 font-size 为 0，可以解决：
li{
padding:0;
margin:0;
height: 30px;
line-height: 30px;
font-size: 0; / 设置 font-size 为 0 即可 /
}
修改后的效果如图：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如“黄金分割”之于构图，“视觉层级”之于页面节奏，都是基础且必不可少。本文与你分享如果一步步从原型开始构建APP视觉层级。
工作中，你是否经常听到“视觉层级”这词？就犹如“用户体验”一样让人耳熟能详。抛开装逼因素，这两个词的多次提及，可见其重要程度。
音乐有节奏，好的音乐能通过音阶的高低起伏变化表达音乐情绪。
例如：《Main Title》即使你没看过《冰与火之歌》，光听音乐你是否能感觉到音乐给你营造千军万马恢弘之势。《Playing Love from The Legend of 1900》你是否想到一个宁静夜晚，佳人与你倾诉衷肠，柔情似水。
反之，节奏不好，则无法和听众达成共鸣。
绘画有节奏，张驰有度、大小对比、远近疏密变化，构成了画面的节奏。反之，没有节奏，则画面平淡。
同样的，APP UI也有节奏。页面良好的视觉层级，方便用户在浏览的过程中抓取关键信息，帮助用户快速达到目的。
拿到原型，明确页面目的和需求的1、2、3层级，并理解消化。开启设计师的隐形技能：根据一句话或者一个词，在大脑开始构建画面布局。在构思阶段，建议同时浏览同类型UI设计以及交互布局，在找参考的过程中，结合自身APP的页面目的一起构思，并在纸上绘出可行性方案。
由于，APP是为人服务。那么我们需要知道，人眼浏览习惯模式的科学依据。
曾有一数据显示：如果在3S内无法吸引用户，你将流失这个用户。如今我们所在的时代快节奏、碎片化，用户的日常浏览是“扫描”而非“阅读”。所以，了解人眼浏览习惯，变得十分重要。
人眼浏览习惯有：F型；Z型；其他；
还有，其他浏览模式，海哥HMI人机交互在他一篇文中《用户是怎么阅读的？尼尔森F模型》提到：
在明白人眼视线流程后，我们开始运用视觉手段，吸引用户来看我们想给他看的内容，并按照我们的预想顺序，依次阅读。
对比，让视觉有轻重，用户看起来不累。需要强调的信息放大，没那么重要的东西缩小。如果同一层级的模块，通过颜色或者样式的变化来表达。如：字体大小对比，颜色对比；模块大小对比；图片大小对比等。
字体千千万形状各不相同，然而他们都有着相似之处：字重的大与小。在同一字号大小下，字重大的笔画，以面构成，会比字重小的，更具视觉冲击力。
需要强调的信息，字号变大，字体加粗，这样就能区分主与次，建立更易读的视觉层级。
为了各个模块间的和谐组合和视觉上的凸显与美观，我们需要灵活运用各种样式表达。卡片投影；形状；材质等；
同一类别信息，模块化整合。便于用户浏览操作，视觉上不零散，整体美观。多模块化的组合，注意留白以及页面的节奏轻重。
以上要点，要根据实际情况灵活巧妙运用。在做的过程中，通过Mirror工具实时查看页面效果，不断改进，加强表达。
宗白华说过：“一切艺术都趋向音乐”。确切说一切“广义的”艺术都趋向于音乐状态。优秀的UI视觉层级表达，就如音乐一样有节奏变化，波浪起伏，是一种视觉享受。无论是平面还是UI，视觉层级，需要像“黄金分割原理”一样，是内化进设计师的身体里一个元素。多多实战练习，不需要死记硬背，就会刻在我们的大脑深处。
文章来源：站酷
无论是2B产品，还是2C产品，用户系统都是基础。对于非互联网产品从业者，2C用户系统的场景和功能通过日常各类APP的使用，大家都非常熟悉。因此，笔者通过和2C产品的对比，谈谈2B SaaS产品的用户系统设计。
2C产品面向的用户是个人，用户系统的核心是获客，因此大多2C产品的用户系统设计重点在于方便用户注册、登录，能够建立精准的用户画像，从而达到流量变现的目标。
2B产品面向的用户是企业，用户系统的核心是组织、员工精细化管理，提升人效，从而实现节约成本的目标。
2C产品的注册主要用于个人用户注册场景，重点在于提供多种渠道的注册方式，如账号、手机、第三方社交应用（微信、微博等），其核心目标是既能方便用户注册，又能多渠道多平台账号打通。
2B产品的注册分为两部分：企业管理员代表企业注册和企业员工注册。
2B平台型SaaS产品，和2C最大的区别在于产品需要用户付费。因此，平台方为企业（平台租户）提供了注册入口，一方面需要方便租户能够通过其他渠道快速注册试用产品，一方面需要验证企业相关信息，识别该用户确实为潜在用户。
1）企业注册：
当企业管理员代表企业注册时，需要提供的注册信息：管理员昵称、手机号、邮箱、企业工商信息（名称、组织机构代码、地址、法人信息等）。
其中工商信息的完整度，不同的产品要求不一样，需要根据具体产品而定。如果方便注册拉新，尽量减少工商信息填写要求，如果产品安全性要求较高，可以尽量要求工商信息填写完整。
2）企业工商信息认证：
这部分并非强需求场景，取决于产品的安全性要求。一般安全性要求较高的平台产品，会在企业注册后，进入到企业工商信息认证环节。此环节要么是平台管理员人工审核，要么通过第三方认证验证企业工商信息是否合规。企业完成认证后，即可试用产品。
如非安全性要求较高的产品，可以直接跳过该环节，租户通过注册页信息填写完整后既注册成功。
3）企业员工注册：
登录场景比较容易理解，目前B端产品相较C端产品仍然比较传统，多采用邮箱/手机进行登录。
未来也希望可以实现，B端产品能够和更多C端产品平台打通，可通过通用的第三方账号进行登录，实现业务与社交的连接。
用户画像是2C产品至关重要的内容，只有精准的用户画像，才能更精准的服务好用户。无论是电商，还是资讯平台，基于用户画像的精准营销投放才是产品的核心。
2B的产品很少有讲用户画像相关的内容，事实上对于2B产品而言，用户画像也至关重要。
笔者目前从事CRM产品相关工作，CRM核心要解决的问题就是帮助你的客户获客，那么如何去建立客户的企业标签，去按照企业标签属性，借助大数据分析，帮你的客户找到他的客户群，是笔者近期在研究的课题。
2C的产品从本质上来讲不存在组织结构，个人用户即为产品主体，但会存在群组/社群的概念。
2B产品的应用主体是企业，而组织结构是企业运营管理的必要手段和方式。因此组织结构管理是用户系统的重要组成部分。
1）建立组织结构
组织的单元是部门，因此管理员需要能够按照企业组织结构建立、调整（编辑、合并）、删除部门。
2）部门树结构
部门作为组织结构的单元，只是组织结构的分子，而要形成组织，就要按照企业的业务形态要求形成一定的层级体系。因此部门不仅仅只是简单的信息描述，还需要有层级描述，这就需要我们在建立部门时按照层级结构建立部门，定义清楚所建立的部门是上级部门、下级部门。
3）通讯录展示
管理员通过后台创建完组织结构后，企业员工可通过前台查询按照部门结构展示的通讯录。
角色管理是B端产品的特有功能，企业员工按其所负责的业务模块划分不同的岗位职责。
由于企业数据具有较高的安全性和私密性要求，按照岗位职责的不同，不同岗位的员工对于业务数据的操作/查看权限不同。
因此，我们设计了角色管理，该角色并非严格意义上的岗位职能角色，而为了区分不同的员工不同的系统权限所设计的系统角色，这就是RBAC设计。
1）建立角色
建立角色的主要目标即为建立一个用户权限组，该权限组内的用户具有相同的权限。
2）分配角色权限
基于角色分配系统权限，以实现不同的角色下的用户拥有不同的权限。
员工管理是B端产品的特有功能，员工是企业组织的重要组成部分，员工也是产品真正的终端用户。
B端产品从本质上是要能够帮助企业员工提升工作效率，提高企业人效，以实现企业管理者降低运营成本的目标。
1）新建员工
前面提到的用户注册即为新建员工的过程。包括被动邀请和主动注册两种形态，主要目标是将员工信息注册至系统，并建立员工和企业的关联关系。
2）建立员工汇报关系结构
为了实现精细化管理，企业内部一般按照组织结构设定员工的汇报关系，因此从CEO到基层员工会形成组织关系树，该结构可以和组织结构完全一一对应，即该部门下的所有员工均汇报给部门负责人，但也有部门内部分不同的小组，不同的人汇报给不同的小组负责人。
因此汇报关系和组织结构关系有一定关联，但并不是完全一一对应，所以我们需要设计员工汇报关系功能。
3）员工离职设定
为了保证企业数据的安全，员工离职后，需冻结员工账号，离职员工将不能以该企业员工的身份登录系统，以确保企业数据的安全性。
至此，2B用户系统的功能基本设计完整，其重难点在于组织结构、权限控制，需要重点关注。
文章来源：人人都是产品经理
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
引起这种空白间隔的原因：
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码
换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：
方法一： 既然是因为< li>换行导致的，那就可以将< li>代码全部写在一排，如下
<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>
1
2
3
4
5
6
7
再刷新页面看就没有空白了，就是这么神奇~
方法二： 我们为了代码美观以及方便修改，很多时候我们不可能将< li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将
内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。
.wrap ul{font-size:0px;}
1
但随着而来的就是
中的其他文字就不见了，因为其尺寸被设为0px了，我们只好将他们重新设定字符尺寸。
方法三： 本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。
.wrap ul{letter-spacing: -5px;}
1
之后记得设置li内字符间隔
.wrap ul li{letter-spacing: normal;}
1
2
详细看这篇文章 li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
因为现在大多数的PM/交互/UI设计师，在设计产品的时候都是以iOS为基准 思考产品上的各种功能逻辑、交互状态，而很容易忽略了某些功能在Android里并不能“一稿适应两端”，部分产品差异在安卓上是不一样的。
所以本文就讲下Android和iOS 10大产品/交互差异，希望你在日后的产品设计时，可以考虑到更多层面的知识点（可能在某些安卓高级机型里并不通用）.
对在于一些虚拟商品的支付上，如vip会员、xx币，xx豆。iOS和Android就存在不同的支付规则：Android基本无限制，无抽成。而iOS限制比较多，而且要抽成大约30%的手续费。
举个例子：同样充值30元，Android端会得到300金币，而在iOS中，只有210金币。正因这个抽成规则的不同（没办法，这是苹果硬性规定的），才会出现各种平台的虚拟货币，在Android和iOS中的充值比例是不一样的，如快手：
所以对于虚拟商品在iOS端的抽成规则，在产品设计时一定得考虑清楚，因为这关系产品的商业和盈利模式。通常有2种解决思路：
A. 让用户承担30%的抽成
a. 同样的价格，iOS用户得到的商品少些
如同样充值30元，Android端会得到300金币，而在iOS中，只有210金币。像快抖音、陌陌等各种货币充值。
b. 同样的商品，iOS用户支付更高的费用
如3个月的vip会员，Android端定价是58元，iOS端则可以设为68元。如优酷、腾讯视频的vip会员价格。
B. 公司自己承担30%的抽成
如iOS端充值30元，公司实收21元，但iOS用户能得到和Android一样的300个金币（理论上是有这个解决思路，但现实中很少有公司去实现，毕竟抽成成本就摆在那里）.
另外还需要注意的是：因为抽成规则的不同，对于同一个ID的账户余额，在Android和iOS端中是不能通用的。因此在产品设计时需要将这个点告知用户，预防用户犯错、以及恶意刷币。
Android由于开源的特性，因此对接的都是第三方支付平台，如微信支付、支付宝、银联卡等。
而iOS出于系统的封闭性和安全性考虑，只能调用苹果自己的支付系统：登录APPle ID，然后用授权的支付方式（支付宝、银联卡）进行付款。
“状态栏”也就是我们手机界面最顶部的电池栏，它除了可以在不同背景里切换颜色外，在交互的触发上，Android和iOS中也各不相同。
虽然这一交互差异是iOS专有的，但它却启发我们一个新的设计思路：在必要的时候，状态栏可以为产品承载新的交互状态。如网易的LOFTER（iOS端），用户离开音乐播放界面时，状态栏就用于显示音乐信息和操作入口，方便用户在浏览其他内容时可以快速关闭音乐时，极大提升了用户的操作效率。
这种大多应用于运营的“拉新”场景，为了能新用户得到好处（红包、优惠券、更好看的内容等）。通常会让新用户下载产品APP领取。而由于Android与iOS的下载方式不同，会带来不同的交互状态和产品逻辑。
可以在当前页面（后台）下载，也可以在应用商店下载；过程中可以显示进度，且允许用户暂停下载；下载完成后调起安装页面，用户可以取消安装，也可以自动安装…
正因为Android下载软件的各种便捷性，所以才会带来各种交互状态：未下载、下载中、暂停中、已下载但未安装、已安装。这些都是交互设计师需要特别注意的，每个不同的状态背后都会不同的产品逻辑。
只能跳转到App Store里下载，所有下载流程和状态都是在那完成的，可以脱离开活动页面，相比于Android的下载方式就简单很多。跳转的方式可以是全屏幕，也可以是半屏。
由于安卓的开源特性，当有新版本时都会提示用户更新，且每个产品内部都带有“版本更新”入口。而更新的方式可分2种：
而iOS端出于对用户体验的考虑，是禁止向用户提示版本更新信息的。这也是为什么绝大部分的iOS产品，都是没有“版本更新”入口的原因（像QQ、支付宝、百度网盘等大厂产品）。即使有，点击了也直接跳转到App Store查看版本情况。
且下载渠道都固定在App Store里。理所应当的，软件的更新方式也只能在App Store里进行，无法做到与Android的一样做到后台下载、后台更新。
在手机键盘里输入文字时，iOS由于系统的限制，对文字的发送指令只能在键盘上来完成，因此iOS用户的交互操作都全部集中在键盘右下角。
而Android端就灵活很多，不仅可以在键盘上执行发送指令，也可以在输入栏/搜索栏周边新增操作入口。
长按一张图片后，都会弹出一个列表浮层，因为iOS手机只有一个“Home键”而已，为方便用户退出浮层才增加了“取消”入口。
而Android手机本来就有“返回”虚拟键，安卓用户的退出/返回行为都习惯于通过虚拟键触发，所以多做一个“取消”的意义性不大。
iOS端一直教育着用户使用“左滑”删除列表信息，所有的删除功能都是支持“左滑”来实现的。
而Android系统大部分只能通过“长按”来触发编辑状态，其中就包括了删除功能。不过现在也有极少数的产品，正在逐渐打破这两端间的“删减”界限，比如网易邮箱（Android）就做到了左滑删除信息。
当我们第一次打开产品、允许了获取消息通知的权限后，所有的信息传输都会基于服务器进行推送。而两端在这块的推送机制又有所不同：
所有新信息都会实时推送到你的手机里，即使你关闭了软件，还是一样会收到提示。就算使你处于断网状态，信息也会先储存于苹果服务器，等你联网时再一次性把收到的信息推送给你。既释放手机内存，又不会让用户遗漏有新消息。
而安卓则不同，你若退出了产品，数据的推送只有等你再次打开产品时，才会通知你有多少新信息。虽然减少了对用户的干扰性，但也增加了服务器数据储存的压力，还容易耽误用户接收新消息。
也就是我们手机的输入法键盘，在微信聊天内、手机短信里复制了一段内容后，由于Android与iOS的平台特性差异，会给两端用户带来了不同的交互差异。
复制完文字后，打开输入法键盘会显示来自剪切板的文字内容。用户只需点击，即可将文字复制在搜索栏、输入栏等需要文字填写的操作区域里，无需触发“粘贴”操作。
而有些安卓机（如小米/锤子/乐视等)，无论你复制了什么信息（文字、数字、网址等），都很难实现输入法里的“剪切板”功能。用户需要触发“粘贴”功能，才能输入将刚刚的复制内容。
而对于特定的信息类型：如网址。用户复制网址往往都带有极强的目标性、搜索性，一些浏览器产品会预判用户这一操作行为，将复制的网址前置展示出来，以抵消Android端对于复制文字带来的系统限制。如QQ浏览器（安卓端）就有2种解法方法：
而UC和百度也有类似的解决办法：将复制后的广泛信息（文字/数字/网址/邮箱地址等等）嵌入在搜索框下方，用户点击就能搜索。
这也是一种妥当的解决方法，因为用户可复制的信息类型特别广泛、目标不是很清晰。无法准确判断出用户一定会有搜索诉求。所以才将复制后的信息放在搜索框下面，而不是自动粘贴到搜索框中，既考虑了用户目标，又兼顾了操作效率。
以上就是Android与iOS的差异总结，若有描述得不当请多指教！下面是总结文件。
文章来源：人人都是产品经理
互联网发展业已进入下半场，众多互联网产品的营销比重迅速攀升，用户心智已经形成，很多产品设计方面没有太大发挥空间。未来，面对严峻现实，产品人的选择在哪里？
前段时间一款叫ZAO的换脸APP刷屏朋友圈。这款产品的主要功能是把影视片段中明星的脸换成你的脸，让你实现大片梦。
实际上，在ZAO之前，就已经有厂商开发出了同类型的换脸APP。今年的四月，一款名为颜技的App上线了IOS版，它具有和ZAO相同的图片换脸到视频功能。不同的是，它没火起来。
相反是由于ZAO的大火，已经上线好几个月的颜技才突然被人发现。并因此登上了娱乐免费榜的第二名，第一名是ZAO。
AppStore上有上百万个APP，想要让别人找到你的APP已经非常困难了。回顾最近火起来的那些APP，大部分都有“重营销”的影子。比如绿洲、ZAO、灵鸽等。
营销对于一款产品来说变得越来越重要。
刘润老师写过一篇文章《如何判断一个行业是否值得进入》描述这种商业竞争的规律：文章里提到了一个行业的发展阶段可以用商家的竞争手段去判断。
实际上这个观点就是用4P的视角去理解商业规律。商业的本质实际上就是4P模型：产品、渠道、促销、价格。而且这几个点的优先级是依次递减的。
一个项目想要成功，就需要依次做好这些点。如果别家已经在某一个环节做得很好，你再想超越，就必须也做好这一环节，然后在下一个环节做得更好。
因此在某一个特定领域内，对于后来者来说，创业会越来越难。王兴在几年前说互联网进入下半场，目前看来这个下半场里，产品经理已经不在是舞台的中心。
现在越来越多的产品偏向营销驱动，这很值得我们用4P的视角去思考一下互联网的发展现状和趋势。
在移动互联网时代的早期，有很多需求可以从线下搬到了线上，或者从PC端转移到手机端。由于这类用户需求是一直存在的，用户会自发地去寻找这类型的APP。
在这个时期，“产品即营销”，只要比别人做的更早，比别人做的更好，不太需要广告的支持，用户会自带传播效应。这个时期是产品人最爱的时期，只要用心做好产品，就很容易获得成功。
最初在移动互联网上，没有一款比较方便的社交软件。然而用户实际上是有很强的社交需求的。虽然手机QQ可以解决一些问题，但是没有为移动互联网的环境做相应的优化。
另一个款产品米聊，虽然也是为了解决移动互联网的社交问题，但是产品稳定性不足，偶尔会闪退或者发不出消息的情况。
微信在那个时期是移动互联网做社交做好的产品，所以经过用户的自发传播，两个月就超过了米聊成为了最大的移动互联网社交APP。
很多人认为微信的成功是因为获得了QQ的关系链，实际上这是一种误解。
当时运营商忌惮微信，不允许微信用手机通讯录，于是微信只能用QQ登录。
但QQ登录和QQ关系链是两回事。QQ登录不等于关系链的使用，微信对QQ关系链的使用，只是添加好友时可以从QQ好友里选择。
事实上作为一款熟人社交软件，手机通讯录的价值和作用更大——因为是更真实的好友，而QQ好友里很多是陌生人。如果微信当时选择把QQ关系链复制过来，那就成了另外一个手机QQ了。
所以微信的成功，是因为它在产品为王的时代，做出了最好的移动互联网社交工具。
在互联网时代的中期，同一个细分领域会出现了很多同质化的APP。这时，竞争考验的是各个公司的渠道能力。
你能更好地触达用户，就能更地扩展市场。
早在PC互联网时代，搜狗输入法就依靠“番茄花园”、“雨林木风”等盗版系统的预装，仅用一年时间做到了输入法领域70%的市场占有率。
在移动互联网时代，新闻类APP的同质化也比较严重，在产品端的优化很难和其他竞品拉开差距。为此搜狐早晚报（搜狐新闻的前身）依靠中兴手机的预装，一下子从几万日活提升到上百万日活。
在国外的Twitter模式兴起时，四大微博的竞争进入白热化阶段。最终新浪微博突出重围，成为了最后的赢家。
新浪微博的打法也是依靠渠道。当时新浪微博抢先与头部的手机厂商签下独家合同，激活一个用户支付厂商1.5元，很多手机厂商看到好处都选择了合作。
后来这笔钱改成了资源置换。手机厂商预装新浪微博，而微博会在用户在发布手机动态时，露出手机品牌型号。
除了预装，SEO和ASO也是非常重要的渠道来源。
今日头条早期的SEO要比其他公司效率更高。
一般我们在百度进行渠道投放时，只知道投放相关的关键字，这种常规操作的结果是量少、多家竞价、转化效果不佳，而且成本非常高。
今日头条创新性地利用每天百度新产生的大量没有人竞价的关键词进行拓词，通过技术手段自动生成聚合这些关键字的落地页，然后在百度进行投放。这样做的好处是量大而且价格便宜，落地页聚合的内容本身比百度的还好，用户转化效果自然就非常理想了，大大降低了渠道投放的成本。
优质的搜索渠道流量，也是今日头条成功的一大因素。
到了互联网时代的后期，就连渠道商的竞争也同质化，并且渠道商的价格越来越高。
在这个时期，厂家会发现争夺渠道效果已经很差了，几个大的渠道已经被巨头们把持了，想要突破必须开始争夺消费者的心智。所以这个时期的策略是通过吸引眼球的营销方案，让用户产生购买意愿。
支付宝诞生的时候是产品为王的时代，解决了用户线上支付的问题，因此作为先驱者占据了线上支付的绝大部分市场份额。
腾讯作为支付领域的后来者，想要超越支付宝，怎么办？
财付通是腾讯的第一次尝试，依靠腾讯自己的电商渠道，财付通的市场占有率一度只有3.3%。这是因为错过了产品为王的时代，而且在渠道为王的时代，腾讯的电商品牌也不是特别给力。
后来腾讯有了微信，然后有了微信支付。其中最大的使用场景是微信红包。
微信红包依靠用户的自发使用，在2014年春节达到了458万的用户峰值。但之后的几个月，用户数从峰值持续下降，再也没有回到这个数量。
照理说，微信红包的产品没问题，渠道更没问题，微信的用户量级可是比腾讯的电商用户多得多。这时腾讯要再想突破，就只能从营销端思考。
2015年，微信和春晚合作，搞了一个摇一摇抢红包的活动。那天晚上，微信红包的用户数从400万增加到了一亿，而支付宝积累一亿用户用了大概8年的时间。
在几年前，如果有人告诉你，做一个拼团类低价购物APP很有机会，你一定会对此嗤之以鼻。电商市场又不是没有人做过这件事，就算是淘宝的聚划算也没做得太成功。
但是今天，拼多多依靠社交裂变的玩法，已经成了“五亿人都在拼”的电商巨头，市值都超过了百度。
拼多多杀入市场时，电商领域的产品、渠道都已经进入了白热化的竞争阶段。拼多多从营销端发力，大力开展社交裂变的玩法实现了电商领域的突围。
虽然拼多多的玩法也有价格的因素在里面，但是同样有很多主打低价的产品却没法做到拼多多的规模，最主要的还是营销的问题。现在很多人想到买低价的产品，第一个想到的就是拼多多，这也说明了拼多多的营销成功地抢占了用户的心智。
另外，这个阶段想要超越不单单是要做好营销，而是之前的产品和渠道都不能少。
上述的两个案例都是产品本身过硬，并且凭借微信这个大渠道作为基础的。
其他的竞争阶段也是一样，必须做好前面阶段需要做的工作，再做好当前的阶段需要做的才有可能追赶领先者。
这是很多人学习4P理论时最容易忽视的点。
如果按照4P理论，刘润老师还应该补充最后一个阶段——价格为王。
单纯价格战这事技术含量太低，似乎不值得单独来讲。不过作为一种商业趋势，目前互联网行业部分领域的竞争态势俨然已经走到了这一步。
在信息流领域，等到今日头条成长到非常大的体量后，百度才反应过来。
为了快速夺回市场，百度在2019年的春晚狂砸9亿红包“买客户”。这个活动和之前提到的微信红包活动很像，但是仔细思考还是有一些不同。
春晚面对的几乎是全国的观众，其中很多人平时并不太接触互联网。对他们来说，微信的抢红包活动是没见过的玩法，很新奇，很有传播性。
微信抢红包的这次活动，营销的概念其实要要大于价格的概念。但是经过了这一次的用户教育，加上之后的支付宝集五福活动，这种送钱的营销活动对用户来说已经不陌生了。
百度的红包活动更多的用户已经不是觉得好玩，而是单纯地在衡量投入产出比。为了拿到这些红包的钱，付出那么多时间划不划算。这成了单纯的买用户，单纯的价格因素。
最近微视也搞了一次这样的活动，邀请好友得3~10元的红包。这说明短视频领域也已经进入了竞争的大后期。
价格为王的阶段是其他手段都失效的情况下，不得不采用的策略。
当然前提是产品足够好，否则用户也是留不下来的。
这里说的产品经理是那种创造性的产品设计工作，类似乔布斯、张小龙所代表的最初的产品经理的定义。
随着现状互联网解决的问题越来越多，边界越来越广，想要再通过创造性的产品设计打动用户已经非常困难了。而且很多功能模式都有了约定俗成的规范，发挥创造性的空间已经不大了。这导致现在的产品经理更多的是偏向项目管理而不是产品设计。
我的一个产品经理朋友，觉得自己原来所处的行业相对比较传统，换了一家更加迎合年轻人的行业。
但是现实马上教他做人，虽然新公司的产品更加年轻化，但是产品经理的工作其实没有太大的变化，还是以画原型、项目推进为主。
在可预见的未来，产品经理将离开互联网的舞台中心。
运营人才将接替产品经理的位置，站在在互联网的舞台中心引导之后的风向变化。当然，这里说的是大部分一线产品经理，如果你是牛人，你永远都站在舞台中央。
不同竞争阶段的工作重心是不一样的，所以在做职业选择时，最好选择那些适合自己发挥的行业和公司。
如果你是产品经理，那么最好是进入还在产品为王时期的行业。
如果你是渠道BD，渠道运营等，选择那些竞争中期的行业。
如果你是活动运营，那么最好去那些竞争非常激烈的行业。
在适合自己的行业中，你的重要性得到了提升，拥有更多的机会学习和实践，对于自我提升来说是事半功倍的。
有很多创业公司还保持着产品为王时代的思路。
它们所处的行业很可能已经在营销为王的时代，却还抱着精细打磨产品的意识，根本原因仅仅是因为领导者是产品和技术出身。
这类公司如果渠道端和营销端没有比较好的动作的话，很可能在烧光融资后就被迫关闭。而失败的原因不是因为产品做的不够好，而是没有在正确的时间做正确的事。
有一些公司好一些，它们在产品为王的时代，通过打造优秀产品而崛起。但这种公司很容易形成路径依赖，原来我们通过产品的优化成功了，那么现在就要继续做好产品这件事。
但是产品体验的护城河会慢慢被竞品攻占，如果领导者不转变身份，从“首席产品经理”变成精神领袖，那么很可能就会慢慢衰败。
因为成功的企业家与市场的用户的需求距离太远，如果太专注抓产品的单点突破，就意味着在商业格局平衡和公司长远战略上的短视，结局自然不会太理想。
文章来源：人人都是产品经理
蓝蓝 http://www.lanlanwork.com