1.獲得內(nèi)容 - text()、html() 以及 val()
text() - 返回所選元素的文本內(nèi)容
html() - 返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
<script type="text/javascript" src="jquery-1.11.2.min.js"></script> <body> <p id="p1">圣誕快樂，<b>新年快樂</b></p> //給p元素里邊的文本一部分加上b標(biāo)簽 <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內(nèi)容 結(jié)果會包含b標(biāo)簽 }); }); </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()); 結(jié)果返回表單元素的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設(shè)置內(nèi)容和回調(diào)函數(shù) - text()、html() 以及 val()
text() - 設(shè)置所選元素的文本內(nèi)容
html() - 設(shè)置所選元素的內(nèi)容（包括 HTML 標(biāo)記）
<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>") ; //設(shè)置文本 }); $("#b2").click(function(){ $("#p1").html("圣誕快樂，<b>新年快樂</b>") ; //設(shè)置html內(nèi)容 結(jié)果會包含b標(biāo)簽 }); }); </script>
text()、html()回調(diào)函數(shù)
<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"; //調(diào)用函數(shù)，返回一個新的文本 } ) ; }); $("#b2").click(function(){ $("#p1").text(function(){ return "happy <b>new</b> year"; //調(diào)用函數(shù)，返回一個新的文本 } ); }); }); </script>
val() - 設(shè)置表單字段的value值和回調(diào)函數(shù)
<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（）的回調(diào)函數(shù)
<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.設(shè)置屬性 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（）的回調(diào)函數(shù)
<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>
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標(biāo)準(zhǔn)：
“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式?！?br />
獲得內(nèi)容 - text()、html() 以及 val()
三個簡單實用的用于 DOM 操作的 jQuery 方法：
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
val() - 設(shè)置或返回表單字段的值
下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內(nèi)容：
<!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>
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
在做設(shè)計的過程中，大部分設(shè)計師只專注于主操作流程、主頁面、分支流程、小頁面和頁面的不同狀態(tài)。卻容易忽略產(chǎn)品中容易出現(xiàn)的各種異常狀態(tài)。
當(dāng)用戶停留任何一個界面，進行任何一個操作都可能發(fā)生異常狀態(tài)。
如果接到每個需求都去制定一次異常狀態(tài)，這樣的后果可能會使得產(chǎn)品的不同模塊、不同流程，異常狀態(tài)都不一致。全局規(guī)范性被破壞，同時設(shè)計師的效率也降低。
因此全局制定異常狀態(tài)規(guī)范很有必要，后續(xù)就不需要再設(shè)計，開發(fā)直接復(fù)用異常狀態(tài)的規(guī)范。省時省力、提率、設(shè)計規(guī)范、運行更流暢、減少代碼重復(fù)率、安裝包也會更小。
異常狀態(tài)一共有以下 10 類：
當(dāng)移動設(shè)備網(wǎng)絡(luò)異常時，導(dǎo)致無法上傳和下載數(shù)據(jù)，從而無法正常的使用產(chǎn)品。
網(wǎng)絡(luò)異常存在兩種場景：
1. App主動行為
當(dāng)無網(wǎng)絡(luò)時，用戶打開 App，通常有三種方式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。
tips 提示，通過 tips 提示用戶當(dāng)前網(wǎng)絡(luò)不可用，tips 使用場景一般為用戶打開后，界面停留在首頁，且首頁以列表形式展示，這樣的話， tips 才能合理的融入到界面中，常見使用這種布局方式的有微信、qq等。
使用toast提示用戶網(wǎng)絡(luò)異常，同時提示用戶可以去使用非數(shù)據(jù)影響的操作。例如網(wǎng)易云音樂，當(dāng)無網(wǎng)絡(luò)時候，告知用戶可以去正常聽已下載的音樂。
使用對話框，引導(dǎo)用戶進入設(shè)置頁面，關(guān)閉飛行模式或者打開 Wi-Fi，例如美團進入首頁后的對話框提示。
2. App被動行為
當(dāng)前無網(wǎng)絡(luò)時，用戶點擊操作，無法正常使用產(chǎn)品，這時候通常有兩種處理方式。
一種是當(dāng)前界面出現(xiàn) toast 提示。另一種是進入下一級界面，以缺省頁的形式提醒用戶當(dāng)前網(wǎng)絡(luò)異常。
例如手機淘寶，沒有網(wǎng)絡(luò)時，用戶點擊會進入下一頁，出現(xiàn)缺省頁提示，告知用戶網(wǎng)絡(luò)異常，同時提供刷新按鈕。
美團在無網(wǎng)絡(luò)時，點擊其他 tab bar，出現(xiàn) toast 提示用戶當(dāng)前網(wǎng)絡(luò)異常，稍后重試。
3. 小結(jié)
當(dāng)涉及需要消耗大量流量數(shù)據(jù)時，且非 Wi-Fi 情況下，這時候需要告知用戶。常見的例如看視頻，聽/下載歌曲、視頻通話、下載上傳文件等。
例如B站，當(dāng)使用移動數(shù)據(jù)看視頻，則通過提示語和對應(yīng)按鈕上的流量值告知用戶。
網(wǎng)易云音樂在非 Wi-Fi 情況下，下載音樂時，通過對話框，告知用戶當(dāng)前使用數(shù)據(jù)流量，同時提供可繼續(xù)下載的功能，也提供通過辦理新業(yè)務(wù)解決數(shù)據(jù)流量的問題。
空數(shù)據(jù)一共分為兩種類型，分別為初始狀態(tài)和清空狀態(tài)。
1. 初始狀態(tài)
用戶首次使用，沒有任何內(nèi)容數(shù)據(jù)時，需要用戶進行某種操作才能產(chǎn)生內(nèi)容的界面，這時候需要提示用戶需要進行某種操作。
例如淘寶App，當(dāng)用戶沒有把商品加入購物車時，進入購物車界面，會給出提示購物車界面為空。給出用戶提示，給出相對應(yīng)的入口按鈕，引導(dǎo)用戶操作。
如果初始狀態(tài)，無任何內(nèi)容直接給出一個空白界面，用戶可能會以為該界面出 bug 了。
Gmail 直接用一個插畫提示用戶收件箱為空。
一般對于初始狀態(tài)的設(shè)計，常規(guī)做法是簡單的插畫配合簡潔的文案，必要的時候給出引導(dǎo)用戶操作行為的按鈕。
現(xiàn)在流行的設(shè)計趨勢是插畫越輕量越簡單越好，以免搶奪了文案信息。
2. 清空狀態(tài)
當(dāng)用戶清空當(dāng)前的頁面內(nèi)容，產(chǎn)生了空界面，這時候需要有明確的提示告知用戶出現(xiàn)當(dāng)前頁面的原因，且告知用戶該如何處理。
清空狀態(tài)是對初始狀態(tài)的進一步細化。清空狀態(tài)的界面和初始狀態(tài)設(shè)計很相似，唯一不同的是文案的提示。
有的產(chǎn)品直接把清空狀態(tài)的界面按照初始狀態(tài)來設(shè)計，這樣也是可以的，缺點就是沒有告知用戶產(chǎn)生空狀態(tài)原因是初始化還是清空所致。
在加載過程中，App 向服務(wù)器請求數(shù)據(jù)，如果是網(wǎng)絡(luò)原因?qū)е?，則使用網(wǎng)絡(luò)異常的設(shè)計規(guī)范。
如果非網(wǎng)絡(luò)異常原因，則可能因為服務(wù)器異常導(dǎo)致接口請求不到數(shù)據(jù)，從而加載失敗。
第一次請求失敗，有些場景可能重試 2 次，例如微信支付寶，這種情況可使用 toast 告知用戶加載失敗的原因。
任何操作行為的交互界面都伴隨著操作失敗的概率。
當(dāng)用戶操作失敗時，在當(dāng)前頁面給予一個反饋，告知用戶操作失敗，最好告知用戶操作失敗的原因，讓用戶知道接下來如何避免操作失敗。
因為服務(wù)器異常是小概率事件，但是也會發(fā)生。
當(dāng)服務(wù)器異常時，且用戶在操作過程中，出現(xiàn)這種情況，一般可設(shè)計為對話框提示，明確告知用戶，服務(wù)器出現(xiàn)問題，讓用戶稍后重試。
例如下圖的華為云備份恢復(fù)界面：
用戶在搜索過程中，除了出現(xiàn)正常的匹配結(jié)果，還存在無匹配結(jié)果的情況。針對搜索無結(jié)果的情況，要給予用戶操作無結(jié)果的提示。
幾乎搜索無結(jié)果的狀態(tài)都是在內(nèi)容區(qū)出現(xiàn)對應(yīng)提示。例如 iOS 相冊，通過搜索關(guān)鍵詞，當(dāng)沒有匹配照片時，則出現(xiàn)對應(yīng)的提示，如下圖右側(cè)圖：
下圖淘寶買家版后臺，當(dāng)用戶搜索關(guān)鍵詞無結(jié)果時，出現(xiàn)對應(yīng)的提示語和插畫。
無權(quán)限的場景，通常適用于 b 端產(chǎn)品，對于不同組織架構(gòu)的企業(yè)員工，會存在不同的權(quán)限。
例如部分重要的內(nèi)容，非同一組織架構(gòu)的員工無權(quán)限查看，這種情況，用戶點擊進入一般給出對應(yīng)的提示。
當(dāng)然最好的方案是在 App 上面過濾掉無法查看的內(nèi)容，但是存在員工間的轉(zhuǎn)發(fā)行為，這時候無權(quán)限的員工，點擊進入，則顯示暫無權(quán)限查看的提示頁面。
一般 App 功能正在開發(fā)中，這種情況不會在 App 界面中展示出來，只有完全開發(fā)完畢并上線后才會出現(xiàn)在 App 上。
但是也有一些產(chǎn)品的特殊業(yè)務(wù)，會將一些未開發(fā)的功能展示出來，例如微信公眾號，長按微信文章，即出現(xiàn)對應(yīng)的提示。
也有一些新聞頻道還沒有開發(fā)完畢上線，這時候用戶點擊進入下級界面，則出現(xiàn)對應(yīng)的提示語/插圖提示，如下圖所示：
有的時候，文件或者頁面內(nèi)容被刪除，但由于文件或者頁面內(nèi)容的上一級頁面有緩存，所以當(dāng)用戶點擊進入時，會出現(xiàn)文章/文件被刪除的情況。
已被刪除的異常狀態(tài)，常見的設(shè)計是用戶進入新頁面出現(xiàn)對應(yīng)的插畫和標(biāo)題提示。
例如下圖微信公眾號文章內(nèi)容被作者刪除，讀者點擊進入，加載后的界面就出現(xiàn)內(nèi)容被刪除的提示。
以上就是常見的 10 種異常狀態(tài)的簡單介紹和說明。在制定異常狀態(tài)的設(shè)計規(guī)范時，可以參考本篇文章。
當(dāng)然也有公司特殊的業(yè)務(wù)導(dǎo)致存在很特殊的異常狀態(tài)，針對這種情況，可以適當(dāng)?shù)脑黾?、刪除或者修改，使其更適用于自己公司的項目。
文章來源：優(yōu)設(shè)
局部變量
局部變量：在函數(shù)內(nèi)部聲明的變量，只在函數(shù)內(nèi)部起作用。函數(shù)的參數(shù)也是局部性的，只在函數(shù)內(nèi)部起作用，對于其他的函數(shù)或腳本代碼是不可用的。
函數(shù)可以訪問函數(shù)內(nèi)部定義的變量，如：
<p>函數(shù)可以訪問函數(shù)內(nèi)部定義的變量:</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程序中，全局變量處處都在。
函數(shù)也可以訪問函數(shù)外部定義的變量，如：
<p>函數(shù)可以訪問定義在函數(shù)外的變量：</p>
<button type="button" onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
var a = 4;
function myFunction() {
document.getElementById("demo").innerHTML = a a;
}
</script>
全局和局部變量即便名稱相同，它們也是兩個不同的變量。修改其中一個，不會影響另一個的值。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
問題描述：
做抽屜式菜單時候，在 ie 7 下發(fā)現(xiàn) li 元素之間會留白，如下圖：
原以為是樣式的問題，后來看到有博文寫到“行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符，這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔”。
解決辦法：
li 標(biāo)簽之間的空白，可以通過設(shè)置 li 標(biāo)簽的 font-size 為 0，可以解決：
li{
padding:0;
margin:0;
height: 30px;
line-height: 30px;
font-size: 0; / 設(shè)置 font-size 為 0 即可 /
}
修改后的效果如圖：
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如“黃金分割”之于構(gòu)圖，“視覺層級”之于頁面節(jié)奏，都是基礎(chǔ)且必不可少。本文與你分享如果一步步從原型開始構(gòu)建APP視覺層級。
工作中，你是否經(jīng)常聽到“視覺層級”這詞？就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素，這兩個詞的多次提及，可見其重要程度。
音樂有節(jié)奏，好的音樂能通過音階的高低起伏變化表達音樂情緒。
例如：《Main Title》即使你沒看過《冰與火之歌》，光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢。《Playing Love from The Legend of 1900》你是否想到一個寧靜夜晚，佳人與你傾訴衷腸，柔情似水。
反之，節(jié)奏不好，則無法和聽眾達成共鳴。
繪畫有節(jié)奏，張馳有度、大小對比、遠近疏密變化，構(gòu)成了畫面的節(jié)奏。反之，沒有節(jié)奏，則畫面平淡。
同樣的，APP UI也有節(jié)奏。頁面良好的視覺層級，方便用戶在瀏覽的過程中抓取關(guān)鍵信息，幫助用戶快速達到目的。
拿到原型，明確頁面目的和需求的1、2、3層級，并理解消化。開啟設(shè)計師的隱形技能：根據(jù)一句話或者一個詞，在大腦開始構(gòu)建畫面布局。在構(gòu)思階段，建議同時瀏覽同類型UI設(shè)計以及交互布局，在找參考的過程中，結(jié)合自身APP的頁面目的一起構(gòu)思，并在紙上繪出可行性方案。
由于，APP是為人服務(wù)。那么我們需要知道，人眼瀏覽習(xí)慣模式的科學(xué)依據(jù)。
曾有一數(shù)據(jù)顯示：如果在3S內(nèi)無法吸引用戶，你將流失這個用戶。如今我們所在的時代快節(jié)奏、碎片化，用戶的日常瀏覽是“掃描”而非“閱讀”。所以，了解人眼瀏覽習(xí)慣，變得十分重要。
人眼瀏覽習(xí)慣有：F型；Z型；其他；
還有，其他瀏覽模式，海哥HMI人機交互在他一篇文中《用戶是怎么閱讀的？尼爾森F模型》提到：
在明白人眼視線流程后，我們開始運用視覺手段，吸引用戶來看我們想給他看的內(nèi)容，并按照我們的預(yù)想順序，依次閱讀。
對比，讓視覺有輕重，用戶看起來不累。需要強調(diào)的信息放大，沒那么重要的東西縮小。如果同一層級的模塊，通過顏色或者樣式的變化來表達。如：字體大小對比，顏色對比；模塊大小對比；圖片大小對比等。
字體千千萬形狀各不相同，然而他們都有著相似之處：字重的大與小。在同一字號大小下，字重大的筆畫，以面構(gòu)成，會比字重小的，更具視覺沖擊力。
需要強調(diào)的信息，字號變大，字體加粗，這樣就能區(qū)分主與次，建立更易讀的視覺層級。
為了各個模塊間的和諧組合和視覺上的凸顯與美觀，我們需要靈活運用各種樣式表達?？ㄆ队埃恍螤?；材質(zhì)等；
同一類別信息，模塊化整合。便于用戶瀏覽操作，視覺上不零散，整體美觀。多模塊化的組合，注意留白以及頁面的節(jié)奏輕重。
以上要點，要根據(jù)實際情況靈活巧妙運用。在做的過程中，通過Mirror工具實時查看頁面效果，不斷改進，加強表達。
宗白華說過：“一切藝術(shù)都趨向音樂”。確切說一切“廣義的”藝術(shù)都趨向于音樂狀態(tài)。優(yōu)秀的UI視覺層級表達，就如音樂一樣有節(jié)奏變化，波浪起伏，是一種視覺享受。無論是平面還是UI，視覺層級，需要像“黃金分割原理”一樣，是內(nèi)化進設(shè)計師的身體里一個元素。多多實戰(zhàn)練習(xí)，不需要死記硬背，就會刻在我們的大腦深處。
文章來源：站酷
無論是2B產(chǎn)品，還是2C產(chǎn)品，用戶系統(tǒng)都是基礎(chǔ)。對于非互聯(lián)網(wǎng)產(chǎn)品從業(yè)者，2C用戶系統(tǒng)的場景和功能通過日常各類APP的使用，大家都非常熟悉。因此，筆者通過和2C產(chǎn)品的對比，談?wù)?B SaaS產(chǎn)品的用戶系統(tǒng)設(shè)計。
2C產(chǎn)品面向的用戶是個人，用戶系統(tǒng)的核心是獲客，因此大多2C產(chǎn)品的用戶系統(tǒng)設(shè)計重點在于方便用戶注冊、登錄，能夠建立精準(zhǔn)的用戶畫像，從而達到流量變現(xiàn)的目標(biāo)。
2B產(chǎn)品面向的用戶是企業(yè)，用戶系統(tǒng)的核心是組織、員工精細化管理，提升人效，從而實現(xiàn)節(jié)約成本的目標(biāo)。
2C產(chǎn)品的注冊主要用于個人用戶注冊場景，重點在于提供多種渠道的注冊方式，如賬號、手機、第三方社交應(yīng)用（微信、微博等），其核心目標(biāo)是既能方便用戶注冊，又能多渠道多平臺賬號打通。
2B產(chǎn)品的注冊分為兩部分：企業(yè)管理員代表企業(yè)注冊和企業(yè)員工注冊。
2B平臺型SaaS產(chǎn)品，和2C最大的區(qū)別在于產(chǎn)品需要用戶付費。因此，平臺方為企業(yè)（平臺租戶）提供了注冊入口，一方面需要方便租戶能夠通過其他渠道快速注冊試用產(chǎn)品，一方面需要驗證企業(yè)相關(guān)信息，識別該用戶確實為潛在用戶。
1）企業(yè)注冊：
當(dāng)企業(yè)管理員代表企業(yè)注冊時，需要提供的注冊信息：管理員昵稱、手機號、郵箱、企業(yè)工商信息（名稱、組織機構(gòu)代碼、地址、法人信息等）。
其中工商信息的完整度，不同的產(chǎn)品要求不一樣，需要根據(jù)具體產(chǎn)品而定。如果方便注冊拉新，盡量減少工商信息填寫要求，如果產(chǎn)品安全性要求較高，可以盡量要求工商信息填寫完整。
2）企業(yè)工商信息認證：
這部分并非強需求場景，取決于產(chǎn)品的安全性要求。一般安全性要求較高的平臺產(chǎn)品，會在企業(yè)注冊后，進入到企業(yè)工商信息認證環(huán)節(jié)。此環(huán)節(jié)要么是平臺管理員人工審核，要么通過第三方認證驗證企業(yè)工商信息是否合規(guī)。企業(yè)完成認證后，即可試用產(chǎn)品。
如非安全性要求較高的產(chǎn)品，可以直接跳過該環(huán)節(jié)，租戶通過注冊頁信息填寫完整后既注冊成功。
3）企業(yè)員工注冊：
登錄場景比較容易理解，目前B端產(chǎn)品相較C端產(chǎn)品仍然比較傳統(tǒng)，多采用郵箱/手機進行登錄。
未來也希望可以實現(xiàn)，B端產(chǎn)品能夠和更多C端產(chǎn)品平臺打通，可通過通用的第三方賬號進行登錄，實現(xiàn)業(yè)務(wù)與社交的連接。
用戶畫像是2C產(chǎn)品至關(guān)重要的內(nèi)容，只有精準(zhǔn)的用戶畫像，才能更精準(zhǔn)的服務(wù)好用戶。無論是電商，還是資訊平臺，基于用戶畫像的精準(zhǔn)營銷投放才是產(chǎn)品的核心。
2B的產(chǎn)品很少有講用戶畫像相關(guān)的內(nèi)容，事實上對于2B產(chǎn)品而言，用戶畫像也至關(guān)重要。
筆者目前從事CRM產(chǎn)品相關(guān)工作，CRM核心要解決的問題就是幫助你的客戶獲客，那么如何去建立客戶的企業(yè)標(biāo)簽，去按照企業(yè)標(biāo)簽屬性，借助大數(shù)據(jù)分析，幫你的客戶找到他的客戶群，是筆者近期在研究的課題。
2C的產(chǎn)品從本質(zhì)上來講不存在組織結(jié)構(gòu)，個人用戶即為產(chǎn)品主體，但會存在群組/社群的概念。
2B產(chǎn)品的應(yīng)用主體是企業(yè)，而組織結(jié)構(gòu)是企業(yè)運營管理的必要手段和方式。因此組織結(jié)構(gòu)管理是用戶系統(tǒng)的重要組成部分。
1）建立組織結(jié)構(gòu)
組織的單元是部門，因此管理員需要能夠按照企業(yè)組織結(jié)構(gòu)建立、調(diào)整（編輯、合并）、刪除部門。
2）部門樹結(jié)構(gòu)
部門作為組織結(jié)構(gòu)的單元，只是組織結(jié)構(gòu)的分子，而要形成組織，就要按照企業(yè)的業(yè)務(wù)形態(tài)要求形成一定的層級體系。因此部門不僅僅只是簡單的信息描述，還需要有層級描述，這就需要我們在建立部門時按照層級結(jié)構(gòu)建立部門，定義清楚所建立的部門是上級部門、下級部門。
3）通訊錄展示
管理員通過后臺創(chuàng)建完組織結(jié)構(gòu)后，企業(yè)員工可通過前臺查詢按照部門結(jié)構(gòu)展示的通訊錄。
角色管理是B端產(chǎn)品的特有功能，企業(yè)員工按其所負責(zé)的業(yè)務(wù)模塊劃分不同的崗位職責(zé)。
由于企業(yè)數(shù)據(jù)具有較高的安全性和私密性要求，按照崗位職責(zé)的不同，不同崗位的員工對于業(yè)務(wù)數(shù)據(jù)的操作/查看權(quán)限不同。
因此，我們設(shè)計了角色管理，該角色并非嚴格意義上的崗位職能角色，而為了區(qū)分不同的員工不同的系統(tǒng)權(quán)限所設(shè)計的系統(tǒng)角色，這就是RBAC設(shè)計。
1）建立角色
建立角色的主要目標(biāo)即為建立一個用戶權(quán)限組，該權(quán)限組內(nèi)的用戶具有相同的權(quán)限。
2）分配角色權(quán)限
基于角色分配系統(tǒng)權(quán)限，以實現(xiàn)不同的角色下的用戶擁有不同的權(quán)限。
員工管理是B端產(chǎn)品的特有功能，員工是企業(yè)組織的重要組成部分，員工也是產(chǎn)品真正的終端用戶。
B端產(chǎn)品從本質(zhì)上是要能夠幫助企業(yè)員工提升工作效率，提高企業(yè)人效，以實現(xiàn)企業(yè)管理者降低運營成本的目標(biāo)。
1）新建員工
前面提到的用戶注冊即為新建員工的過程。包括被動邀請和主動注冊兩種形態(tài)，主要目標(biāo)是將員工信息注冊至系統(tǒng)，并建立員工和企業(yè)的關(guān)聯(lián)關(guān)系。
2）建立員工匯報關(guān)系結(jié)構(gòu)
為了實現(xiàn)精細化管理，企業(yè)內(nèi)部一般按照組織結(jié)構(gòu)設(shè)定員工的匯報關(guān)系，因此從CEO到基層員工會形成組織關(guān)系樹，該結(jié)構(gòu)可以和組織結(jié)構(gòu)完全一一對應(yīng)，即該部門下的所有員工均匯報給部門負責(zé)人，但也有部門內(nèi)部分不同的小組，不同的人匯報給不同的小組負責(zé)人。
因此匯報關(guān)系和組織結(jié)構(gòu)關(guān)系有一定關(guān)聯(lián)，但并不是完全一一對應(yīng)，所以我們需要設(shè)計員工匯報關(guān)系功能。
3）員工離職設(shè)定
為了保證企業(yè)數(shù)據(jù)的安全，員工離職后，需凍結(jié)員工賬號，離職員工將不能以該企業(yè)員工的身份登錄系統(tǒng)，以確保企業(yè)數(shù)據(jù)的安全性。
至此，2B用戶系統(tǒng)的功能基本設(shè)計完整，其重難點在于組織結(jié)構(gòu)、權(quán)限控制，需要重點關(guān)注。
文章來源：人人都是產(chǎn)品經(jīng)理
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
引起這種空白間隔的原因：
瀏覽器的默認行為是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是我們上面的代碼
換行后會產(chǎn)生換行字符，而它會變成一個空格，當(dāng)然空格就占用一個字符的寬度。
解決方案：
方法一： 既然是因為< li>換行導(dǎo)致的，那就可以將< li>代碼全部寫在一排，如下
<div class="wrap">
<h3>li標(biāo)簽空白測試</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
再刷新頁面看就沒有空白了，就是這么神奇~
方法二： 我們?yōu)榱舜a美觀以及方便修改，很多時候我們不可能將< li>全部寫在一排，那怎么辦？既然是空格占一個字符的寬度，那我們索性就將
內(nèi)的字符尺寸直接設(shè)為0，將下面樣式放入樣式表，問題解決。
.wrap ul{font-size:0px;}
1
但隨著而來的就是
中的其他文字就不見了，因為其尺寸被設(shè)為0px了，我們只好將他們重新設(shè)定字符尺寸。
方法三： 本來以為方法二能夠完全解決問題，但經(jīng)測試，將li父級標(biāo)簽字符設(shè)置為0在Safari瀏覽器依然出現(xiàn)間隔空白；既然設(shè)置字符大小為0不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。同樣隨來而來的問題是li內(nèi)的字符間隔也被設(shè)置了，我們需要將li內(nèi)的字符間隔設(shè)為默認。
.wrap ul{letter-spacing: -5px;}
1
之后記得設(shè)置li內(nèi)字符間隔
.wrap ul li{letter-spacing: normal;}
1
2
詳細看這篇文章 li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
因為現(xiàn)在大多數(shù)的PM/交互/UI設(shè)計師，在設(shè)計產(chǎn)品的時候都是以iOS為基準(zhǔn) 思考產(chǎn)品上的各種功能邏輯、交互狀態(tài)，而很容易忽略了某些功能在Android里并不能“一稿適應(yīng)兩端”，部分產(chǎn)品差異在安卓上是不一樣的。
所以本文就講下Android和iOS 10大產(chǎn)品/交互差異，希望你在日后的產(chǎn)品設(shè)計時，可以考慮到更多層面的知識點（可能在某些安卓高級機型里并不通用）.
對在于一些虛擬商品的支付上，如vip會員、xx幣，xx豆。iOS和Android就存在不同的支付規(guī)則：Android基本無限制，無抽成。而iOS限制比較多，而且要抽成大約30%的手續(xù)費。
舉個例子：同樣充值30元，Android端會得到300金幣，而在iOS中，只有210金幣。正因這個抽成規(guī)則的不同（沒辦法，這是蘋果硬性規(guī)定的），才會出現(xiàn)各種平臺的虛擬貨幣，在Android和iOS中的充值比例是不一樣的，如快手：
所以對于虛擬商品在iOS端的抽成規(guī)則，在產(chǎn)品設(shè)計時一定得考慮清楚，因為這關(guān)系產(chǎn)品的商業(yè)和盈利模式。通常有2種解決思路：
A. 讓用戶承擔(dān)30%的抽成
a. 同樣的價格，iOS用戶得到的商品少些
如同樣充值30元，Android端會得到300金幣，而在iOS中，只有210金幣。像快抖音、陌陌等各種貨幣充值。
b. 同樣的商品，iOS用戶支付更高的費用
如3個月的vip會員，Android端定價是58元，iOS端則可以設(shè)為68元。如優(yōu)酷、騰訊視頻的vip會員價格。
B. 公司自己承擔(dān)30%的抽成
如iOS端充值30元，公司實收21元，但iOS用戶能得到和Android一樣的300個金幣（理論上是有這個解決思路，但現(xiàn)實中很少有公司去實現(xiàn)，畢竟抽成成本就擺在那里）.
另外還需要注意的是：因為抽成規(guī)則的不同，對于同一個ID的賬戶余額，在Android和iOS端中是不能通用的。因此在產(chǎn)品設(shè)計時需要將這個點告知用戶，預(yù)防用戶犯錯、以及惡意刷幣。
Android由于開源的特性，因此對接的都是第三方支付平臺，如微信支付、支付寶、銀聯(lián)卡等。
而iOS出于系統(tǒng)的封閉性和安全性考慮，只能調(diào)用蘋果自己的支付系統(tǒng)：登錄APPle ID，然后用授權(quán)的支付方式（支付寶、銀聯(lián)卡）進行付款。
“狀態(tài)欄”也就是我們手機界面最頂部的電池欄，它除了可以在不同背景里切換顏色外，在交互的觸發(fā)上，Android和iOS中也各不相同。
雖然這一交互差異是iOS專有的，但它卻啟發(fā)我們一個新的設(shè)計思路：在必要的時候，狀態(tài)欄可以為產(chǎn)品承載新的交互狀態(tài)。如網(wǎng)易的LOFTER（iOS端），用戶離開音樂播放界面時，狀態(tài)欄就用于顯示音樂信息和操作入口，方便用戶在瀏覽其他內(nèi)容時可以快速關(guān)閉音樂時，極大提升了用戶的操作效率。
這種大多應(yīng)用于運營的“拉新”場景，為了能新用戶得到好處（紅包、優(yōu)惠券、更好看的內(nèi)容等）。通常會讓新用戶下載產(chǎn)品APP領(lǐng)取。而由于Android與iOS的下載方式不同，會帶來不同的交互狀態(tài)和產(chǎn)品邏輯。
可以在當(dāng)前頁面（后臺）下載，也可以在應(yīng)用商店下載；過程中可以顯示進度，且允許用戶暫停下載；下載完成后調(diào)起安裝頁面，用戶可以取消安裝，也可以自動安裝…
正因為Android下載軟件的各種便捷性，所以才會帶來各種交互狀態(tài)：未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設(shè)計師需要特別注意的，每個不同的狀態(tài)背后都會不同的產(chǎn)品邏輯。
只能跳轉(zhuǎn)到App Store里下載，所有下載流程和狀態(tài)都是在那完成的，可以脫離開活動頁面，相比于Android的下載方式就簡單很多。跳轉(zhuǎn)的方式可以是全屏幕，也可以是半屏。
由于安卓的開源特性，當(dāng)有新版本時都會提示用戶更新，且每個產(chǎn)品內(nèi)部都帶有“版本更新”入口。而更新的方式可分2種：
而iOS端出于對用戶體驗的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的iOS產(chǎn)品，都是沒有“版本更新”入口的原因（像QQ、支付寶、百度網(wǎng)盤等大廠產(chǎn)品）。即使有，點擊了也直接跳轉(zhuǎn)到App Store查看版本情況。
且下載渠道都固定在App Store里。理所應(yīng)當(dāng)?shù)?，軟件的更新方式也只能在App Store里進行，無法做到與Android的一樣做到后臺下載、后臺更新。
在手機鍵盤里輸入文字時，iOS由于系統(tǒng)的限制，對文字的發(fā)送指令只能在鍵盤上來完成，因此iOS用戶的交互操作都全部集中在鍵盤右下角。
而Android端就靈活很多，不僅可以在鍵盤上執(zhí)行發(fā)送指令，也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后，都會彈出一個列表浮層，因為iOS手機只有一個“Home鍵”而已，為方便用戶退出浮層才增加了“取消”入口。
而Android手機本來就有“返回”虛擬鍵，安卓用戶的退出/返回行為都習(xí)慣于通過虛擬鍵觸發(fā)，所以多做一個“取消”的意義性不大。
iOS端一直教育著用戶使用“左滑”刪除列表信息，所有的刪除功能都是支持“左滑”來實現(xiàn)的。
而Android系統(tǒng)大部分只能通過“長按”來觸發(fā)編輯狀態(tài)，其中就包括了刪除功能。不過現(xiàn)在也有極少數(shù)的產(chǎn)品，正在逐漸打破這兩端間的“刪減”界限，比如網(wǎng)易郵箱（Android）就做到了左滑刪除信息。
當(dāng)我們第一次打開產(chǎn)品、允許了獲取消息通知的權(quán)限后，所有的信息傳輸都會基于服務(wù)器進行推送。而兩端在這塊的推送機制又有所不同：
所有新信息都會實時推送到你的手機里，即使你關(guān)閉了軟件，還是一樣會收到提示。就算使你處于斷網(wǎng)狀態(tài)，信息也會先儲存于蘋果服務(wù)器，等你聯(lián)網(wǎng)時再一次性把收到的信息推送給你。既釋放手機內(nèi)存，又不會讓用戶遺漏有新消息。
而安卓則不同，你若退出了產(chǎn)品，數(shù)據(jù)的推送只有等你再次打開產(chǎn)品時，才會通知你有多少新信息。雖然減少了對用戶的干擾性，但也增加了服務(wù)器數(shù)據(jù)儲存的壓力，還容易耽誤用戶接收新消息。
也就是我們手機的輸入法鍵盤，在微信聊天內(nèi)、手機短信里復(fù)制了一段內(nèi)容后，由于Android與iOS的平臺特性差異，會給兩端用戶帶來了不同的交互差異。
復(fù)制完文字后，打開輸入法鍵盤會顯示來自剪切板的文字內(nèi)容。用戶只需點擊，即可將文字復(fù)制在搜索欄、輸入欄等需要文字填寫的操作區(qū)域里，無需觸發(fā)“粘貼”操作。
而有些安卓機（如小米/錘子/樂視等)，無論你復(fù)制了什么信息（文字、數(shù)字、網(wǎng)址等），都很難實現(xiàn)輸入法里的“剪切板”功能。用戶需要觸發(fā)“粘貼”功能，才能輸入將剛剛的復(fù)制內(nèi)容。
而對于特定的信息類型：如網(wǎng)址。用戶復(fù)制網(wǎng)址往往都帶有極強的目標(biāo)性、搜索性，一些瀏覽器產(chǎn)品會預(yù)判用戶這一操作行為，將復(fù)制的網(wǎng)址前置展示出來，以抵消Android端對于復(fù)制文字帶來的系統(tǒng)限制。如QQ瀏覽器（安卓端）就有2種解法方法：
而UC和百度也有類似的解決辦法：將復(fù)制后的廣泛信息（文字/數(shù)字/網(wǎng)址/郵箱地址等等）嵌入在搜索框下方，用戶點擊就能搜索。
這也是一種妥當(dāng)?shù)慕鉀Q方法，因為用戶可復(fù)制的信息類型特別廣泛、目標(biāo)不是很清晰。無法準(zhǔn)確判斷出用戶一定會有搜索訴求。所以才將復(fù)制后的信息放在搜索框下面，而不是自動粘貼到搜索框中，既考慮了用戶目標(biāo)，又兼顧了操作效率。
以上就是Android與iOS的差異總結(jié)，若有描述得不當(dāng)請多指教！下面是總結(jié)文件。
文章來源：人人都是產(chǎn)品經(jīng)理
互聯(lián)網(wǎng)發(fā)展業(yè)已進入下半場，眾多互聯(lián)網(wǎng)產(chǎn)品的營銷比重迅速攀升，用戶心智已經(jīng)形成，很多產(chǎn)品設(shè)計方面沒有太大發(fā)揮空間。未來，面對嚴峻現(xiàn)實，產(chǎn)品人的選擇在哪里？
前段時間一款叫ZAO的換臉APP刷屏朋友圈。這款產(chǎn)品的主要功能是把影視片段中明星的臉換成你的臉，讓你實現(xiàn)大片夢。
實際上，在ZAO之前，就已經(jīng)有廠商開發(fā)出了同類型的換臉APP。今年的四月，一款名為顏技的App上線了IOS版，它具有和ZAO相同的圖片換臉到視頻功能。不同的是，它沒火起來。
相反是由于ZAO的大火，已經(jīng)上線好幾個月的顏技才突然被人發(fā)現(xiàn)。并因此登上了娛樂免費榜的第二名，第一名是ZAO。
AppStore上有上百萬個APP，想要讓別人找到你的APP已經(jīng)非常困難了?；仡欁罱鹌饋淼哪切〢PP，大部分都有“重營銷”的影子。比如綠洲、ZAO、靈鴿等。
營銷對于一款產(chǎn)品來說變得越來越重要。
劉潤老師寫過一篇文章《如何判斷一個行業(yè)是否值得進入》描述這種商業(yè)競爭的規(guī)律：文章里提到了一個行業(yè)的發(fā)展階段可以用商家的競爭手段去判斷。
實際上這個觀點就是用4P的視角去理解商業(yè)規(guī)律。商業(yè)的本質(zhì)實際上就是4P模型：產(chǎn)品、渠道、促銷、價格。而且這幾個點的優(yōu)先級是依次遞減的。
一個項目想要成功，就需要依次做好這些點。如果別家已經(jīng)在某一個環(huán)節(jié)做得很好，你再想超越，就必須也做好這一環(huán)節(jié)，然后在下一個環(huán)節(jié)做得更好。
因此在某一個特定領(lǐng)域內(nèi)，對于后來者來說，創(chuàng)業(yè)會越來越難。王興在幾年前說互聯(lián)網(wǎng)進入下半場，目前看來這個下半場里，產(chǎn)品經(jīng)理已經(jīng)不在是舞臺的中心。
現(xiàn)在越來越多的產(chǎn)品偏向營銷驅(qū)動，這很值得我們用4P的視角去思考一下互聯(lián)網(wǎng)的發(fā)展現(xiàn)狀和趨勢。
在移動互聯(lián)網(wǎng)時代的早期，有很多需求可以從線下搬到了線上，或者從PC端轉(zhuǎn)移到手機端。由于這類用戶需求是一直存在的，用戶會自發(fā)地去尋找這類型的APP。
在這個時期，“產(chǎn)品即營銷”，只要比別人做的更早，比別人做的更好，不太需要廣告的支持，用戶會自帶傳播效應(yīng)。這個時期是產(chǎn)品人最愛的時期，只要用心做好產(chǎn)品，就很容易獲得成功。
最初在移動互聯(lián)網(wǎng)上，沒有一款比較方便的社交軟件。然而用戶實際上是有很強的社交需求的。雖然手機QQ可以解決一些問題，但是沒有為移動互聯(lián)網(wǎng)的環(huán)境做相應(yīng)的優(yōu)化。
另一個款產(chǎn)品米聊，雖然也是為了解決移動互聯(lián)網(wǎng)的社交問題，但是產(chǎn)品穩(wěn)定性不足，偶爾會閃退或者發(fā)不出消息的情況。
微信在那個時期是移動互聯(lián)網(wǎng)做社交做好的產(chǎn)品，所以經(jīng)過用戶的自發(fā)傳播，兩個月就超過了米聊成為了最大的移動互聯(lián)網(wǎng)社交APP。
很多人認為微信的成功是因為獲得了QQ的關(guān)系鏈，實際上這是一種誤解。
當(dāng)時運營商忌憚微信，不允許微信用手機通訊錄，于是微信只能用QQ登錄。
但QQ登錄和QQ關(guān)系鏈?zhǔn)莾苫厥?。QQ登錄不等于關(guān)系鏈的使用，微信對QQ關(guān)系鏈的使用，只是添加好友時可以從QQ好友里選擇。
事實上作為一款熟人社交軟件，手機通訊錄的價值和作用更大——因為是更真實的好友，而QQ好友里很多是陌生人。如果微信當(dāng)時選擇把QQ關(guān)系鏈復(fù)制過來，那就成了另外一個手機QQ了。
所以微信的成功，是因為它在產(chǎn)品為王的時代，做出了最好的移動互聯(lián)網(wǎng)社交工具。
在互聯(lián)網(wǎng)時代的中期，同一個細分領(lǐng)域會出現(xiàn)了很多同質(zhì)化的APP。這時，競爭考驗的是各個公司的渠道能力。
你能更好地觸達用戶，就能更地擴展市場。
早在PC互聯(lián)網(wǎng)時代，搜狗輸入法就依靠“番茄花園”、“雨林木風(fēng)”等盜版系統(tǒng)的預(yù)裝，僅用一年時間做到了輸入法領(lǐng)域70%的市場占有率。
在移動互聯(lián)網(wǎng)時代，新聞類APP的同質(zhì)化也比較嚴重，在產(chǎn)品端的優(yōu)化很難和其他競品拉開差距。為此搜狐早晚報（搜狐新聞的前身）依靠中興手機的預(yù)裝，一下子從幾萬日活提升到上百萬日活。
在國外的Twitter模式興起時，四大微博的競爭進入白熱化階段。最終新浪微博突出重圍，成為了最后的贏家。
新浪微博的打法也是依靠渠道。當(dāng)時新浪微博搶先與頭部的手機廠商簽下獨家合同，激活一個用戶支付廠商1.5元，很多手機廠商看到好處都選擇了合作。
后來這筆錢改成了資源置換。手機廠商預(yù)裝新浪微博，而微博會在用戶在發(fā)布手機動態(tài)時，露出手機品牌型號。
除了預(yù)裝，SEO和ASO也是非常重要的渠道來源。
今日頭條早期的SEO要比其他公司效率更高。
一般我們在百度進行渠道投放時，只知道投放相關(guān)的關(guān)鍵字，這種常規(guī)操作的結(jié)果是量少、多家競價、轉(zhuǎn)化效果不佳，而且成本非常高。
今日頭條創(chuàng)新性地利用每天百度新產(chǎn)生的大量沒有人競價的關(guān)鍵詞進行拓詞，通過技術(shù)手段自動生成聚合這些關(guān)鍵字的落地頁，然后在百度進行投放。這樣做的好處是量大而且價格便宜，落地頁聚合的內(nèi)容本身比百度的還好，用戶轉(zhuǎn)化效果自然就非常理想了，大大降低了渠道投放的成本。
優(yōu)質(zhì)的搜索渠道流量，也是今日頭條成功的一大因素。
到了互聯(lián)網(wǎng)時代的后期，就連渠道商的競爭也同質(zhì)化，并且渠道商的價格越來越高。
在這個時期，廠家會發(fā)現(xiàn)爭奪渠道效果已經(jīng)很差了，幾個大的渠道已經(jīng)被巨頭們把持了，想要突破必須開始爭奪消費者的心智。所以這個時期的策略是通過吸引眼球的營銷方案，讓用戶產(chǎn)生購買意愿。
支付寶誕生的時候是產(chǎn)品為王的時代，解決了用戶線上支付的問題，因此作為先驅(qū)者占據(jù)了線上支付的絕大部分市場份額。
騰訊作為支付領(lǐng)域的后來者，想要超越支付寶，怎么辦？
財付通是騰訊的第一次嘗試，依靠騰訊自己的電商渠道，財付通的市場占有率一度只有3.3%。這是因為錯過了產(chǎn)品為王的時代，而且在渠道為王的時代，騰訊的電商品牌也不是特別給力。
后來騰訊有了微信，然后有了微信支付。其中最大的使用場景是微信紅包。
微信紅包依靠用戶的自發(fā)使用，在2014年春節(jié)達到了458萬的用戶峰值。但之后的幾個月，用戶數(shù)從峰值持續(xù)下降，再也沒有回到這個數(shù)量。
照理說，微信紅包的產(chǎn)品沒問題，渠道更沒問題，微信的用戶量級可是比騰訊的電商用戶多得多。這時騰訊要再想突破，就只能從營銷端思考。
2015年，微信和春晚合作，搞了一個搖一搖搶紅包的活動。那天晚上，微信紅包的用戶數(shù)從400萬增加到了一億，而支付寶積累一億用戶用了大概8年的時間。
在幾年前，如果有人告訴你，做一個拼團類低價購物APP很有機會，你一定會對此嗤之以鼻。電商市場又不是沒有人做過這件事，就算是淘寶的聚劃算也沒做得太成功。
但是今天，拼多多依靠社交裂變的玩法，已經(jīng)成了“五億人都在拼”的電商巨頭，市值都超過了百度。
拼多多殺入市場時，電商領(lǐng)域的產(chǎn)品、渠道都已經(jīng)進入了白熱化的競爭階段。拼多多從營銷端發(fā)力，大力開展社交裂變的玩法實現(xiàn)了電商領(lǐng)域的突圍。
雖然拼多多的玩法也有價格的因素在里面，但是同樣有很多主打低價的產(chǎn)品卻沒法做到拼多多的規(guī)模，最主要的還是營銷的問題?，F(xiàn)在很多人想到買低價的產(chǎn)品，第一個想到的就是拼多多，這也說明了拼多多的營銷成功地搶占了用戶的心智。
另外，這個階段想要超越不單單是要做好營銷，而是之前的產(chǎn)品和渠道都不能少。
上述的兩個案例都是產(chǎn)品本身過硬，并且憑借微信這個大渠道作為基礎(chǔ)的。
其他的競爭階段也是一樣，必須做好前面階段需要做的工作，再做好當(dāng)前的階段需要做的才有可能追趕領(lǐng)先者。
這是很多人學(xué)習(xí)4P理論時最容易忽視的點。
如果按照4P理論，劉潤老師還應(yīng)該補充最后一個階段——價格為王。
單純價格戰(zhàn)這事技術(shù)含量太低，似乎不值得單獨來講。不過作為一種商業(yè)趨勢，目前互聯(lián)網(wǎng)行業(yè)部分領(lǐng)域的競爭態(tài)勢儼然已經(jīng)走到了這一步。
在信息流領(lǐng)域，等到今日頭條成長到非常大的體量后，百度才反應(yīng)過來。
為了快速奪回市場，百度在2019年的春晚狂砸9億紅包“買客戶”。這個活動和之前提到的微信紅包活動很像，但是仔細思考還是有一些不同。
春晚面對的幾乎是全國的觀眾，其中很多人平時并不太接觸互聯(lián)網(wǎng)。對他們來說，微信的搶紅包活動是沒見過的玩法，很新奇，很有傳播性。
微信搶紅包的這次活動，營銷的概念其實要要大于價格的概念。但是經(jīng)過了這一次的用戶教育，加上之后的支付寶集五?；顒?，這種送錢的營銷活動對用戶來說已經(jīng)不陌生了。
百度的紅包活動更多的用戶已經(jīng)不是覺得好玩，而是單純地在衡量投入產(chǎn)出比。為了拿到這些紅包的錢，付出那么多時間劃不劃算。這成了單純的買用戶，單純的價格因素。
最近微視也搞了一次這樣的活動，邀請好友得3~10元的紅包。這說明短視頻領(lǐng)域也已經(jīng)進入了競爭的大后期。
價格為王的階段是其他手段都失效的情況下，不得不采用的策略。
當(dāng)然前提是產(chǎn)品足夠好，否則用戶也是留不下來的。
這里說的產(chǎn)品經(jīng)理是那種創(chuàng)造性的產(chǎn)品設(shè)計工作，類似喬布斯、張小龍所代表的最初的產(chǎn)品經(jīng)理的定義。
隨著現(xiàn)狀互聯(lián)網(wǎng)解決的問題越來越多，邊界越來越廣，想要再通過創(chuàng)造性的產(chǎn)品設(shè)計打動用戶已經(jīng)非常困難了。而且很多功能模式都有了約定俗成的規(guī)范，發(fā)揮創(chuàng)造性的空間已經(jīng)不大了。這導(dǎo)致現(xiàn)在的產(chǎn)品經(jīng)理更多的是偏向項目管理而不是產(chǎn)品設(shè)計。
我的一個產(chǎn)品經(jīng)理朋友，覺得自己原來所處的行業(yè)相對比較傳統(tǒng)，換了一家更加迎合年輕人的行業(yè)。
但是現(xiàn)實馬上教他做人，雖然新公司的產(chǎn)品更加年輕化，但是產(chǎn)品經(jīng)理的工作其實沒有太大的變化，還是以畫原型、項目推進為主。
在可預(yù)見的未來，產(chǎn)品經(jīng)理將離開互聯(lián)網(wǎng)的舞臺中心。
運營人才將接替產(chǎn)品經(jīng)理的位置，站在在互聯(lián)網(wǎng)的舞臺中心引導(dǎo)之后的風(fēng)向變化。當(dāng)然，這里說的是大部分一線產(chǎn)品經(jīng)理，如果你是牛人，你永遠都站在舞臺中央。
不同競爭階段的工作重心是不一樣的，所以在做職業(yè)選擇時，最好選擇那些適合自己發(fā)揮的行業(yè)和公司。
如果你是產(chǎn)品經(jīng)理，那么最好是進入還在產(chǎn)品為王時期的行業(yè)。
如果你是渠道BD，渠道運營等，選擇那些競爭中期的行業(yè)。
如果你是活動運營，那么最好去那些競爭非常激烈的行業(yè)。
在適合自己的行業(yè)中，你的重要性得到了提升，擁有更多的機會學(xué)習(xí)和實踐，對于自我提升來說是事半功倍的。
有很多創(chuàng)業(yè)公司還保持著產(chǎn)品為王時代的思路。
它們所處的行業(yè)很可能已經(jīng)在營銷為王的時代，卻還抱著精細打磨產(chǎn)品的意識，根本原因僅僅是因為領(lǐng)導(dǎo)者是產(chǎn)品和技術(shù)出身。
這類公司如果渠道端和營銷端沒有比較好的動作的話，很可能在燒光融資后就被迫關(guān)閉。而失敗的原因不是因為產(chǎn)品做的不夠好，而是沒有在正確的時間做正確的事。
有一些公司好一些，它們在產(chǎn)品為王的時代，通過打造優(yōu)秀產(chǎn)品而崛起。但這種公司很容易形成路徑依賴，原來我們通過產(chǎn)品的優(yōu)化成功了，那么現(xiàn)在就要繼續(xù)做好產(chǎn)品這件事。
但是產(chǎn)品體驗的護城河會慢慢被競品攻占，如果領(lǐng)導(dǎo)者不轉(zhuǎn)變身份，從“首席產(chǎn)品經(jīng)理”變成精神領(lǐng)袖，那么很可能就會慢慢衰敗。
因為成功的企業(yè)家與市場的用戶的需求距離太遠，如果太專注抓產(chǎn)品的單點突破，就意味著在商業(yè)格局平衡和公司長遠戰(zhàn)略上的短視，結(jié)局自然不會太理想。
文章來源：人人都是產(chǎn)品經(jīng)理
藍藍設(shè)計的小編 http://sillybuy.com