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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
jQuery 擁有可操作 HTML 元素和屬性的強大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。
提示：DOM = Document Object Model（文檔對象模型）
DOM 定義訪問 HTML 和 XML 文檔的標準：
“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式?！?br />
獲得內容 - 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如“黃金分割”之于構圖，“視覺層級”之于頁面節奏，都是基礎且必不可少。本文與你分享如果一步步從原型開始構建APP視覺層級。
工作中，你是否經常聽到“視覺層級”這詞？就猶如“用戶體驗”一樣讓人耳熟能詳。拋開裝逼因素，這兩個詞的多次提及，可見其重要程度。
音樂有節奏，好的音樂能通過音階的高低起伏變化表達音樂情緒。
例如：《Main Title》即使你沒看過《冰與火之歌》，光聽音樂你是否能感覺到音樂給你營造千軍萬馬恢弘之勢?！禤laying 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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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已經非常困難了?；仡欁罱鹌饋淼哪切〢PP，大部分都有“重營銷”的影子。比如綠洲、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很有機會，你一定會對此嗤之以鼻。電商市場又不是沒有人做過這件事，就算是淘寶的聚劃算也沒做得太成功。
但是今天，拼多多依靠社交裂變的玩法，已經成了“五億人都在拼”的電商巨頭，市值都超過了百度。
拼多多殺入市場時，電商領域的產品、渠道都已經進入了白熱化的競爭階段。拼多多從營銷端發力，大力開展社交裂變的玩法實現了電商領域的突圍。
雖然拼多多的玩法也有價格的因素在里面，但是同樣有很多主打低價的產品卻沒法做到拼多多的規模，最主要的還是營銷的問題?，F在很多人想到買低價的產品，第一個想到的就是拼多多，這也說明了拼多多的營銷成功地搶占了用戶的心智。
另外，這個階段想要超越不單單是要做好營銷，而是之前的產品和渠道都不能少。
上述的兩個案例都是產品本身過硬，并且憑借微信這個大渠道作為基礎的。
其他的競爭階段也是一樣，必須做好前面階段需要做的工作，再做好當前的階段需要做的才有可能追趕領先者。
這是很多人學習4P理論時最容易忽視的點。
如果按照4P理論，劉潤老師還應該補充最后一個階段——價格為王。
單純價格戰這事技術含量太低，似乎不值得單獨來講。不過作為一種商業趨勢，目前互聯網行業部分領域的競爭態勢儼然已經走到了這一步。
在信息流領域，等到今日頭條成長到非常大的體量后，百度才反應過來。
為了快速奪回市場，百度在2019年的春晚狂砸9億紅包“買客戶”。這個活動和之前提到的微信紅包活動很像，但是仔細思考還是有一些不同。
春晚面對的幾乎是全國的觀眾，其中很多人平時并不太接觸互聯網。對他們來說，微信的搶紅包活動是沒見過的玩法，很新奇，很有傳播性。
微信搶紅包的這次活動，營銷的概念其實要要大于價格的概念。但是經過了這一次的用戶教育，加上之后的支付寶集五?；顒?，這種送錢的營銷活動對用戶來說已經不陌生了。
百度的紅包活動更多的用戶已經不是覺得好玩，而是單純地在衡量投入產出比。為了拿到這些紅包的錢，付出那么多時間劃不劃算。這成了單純的買用戶，單純的價格因素。
最近微視也搞了一次這樣的活動，邀請好友得3~10元的紅包。這說明短視頻領域也已經進入了競爭的大后期。
價格為王的階段是其他手段都失效的情況下，不得不采用的策略。
當然前提是產品足夠好，否則用戶也是留不下來的。
這里說的產品經理是那種創造性的產品設計工作，類似喬布斯、張小龍所代表的最初的產品經理的定義。
隨著現狀互聯網解決的問題越來越多，邊界越來越廣，想要再通過創造性的產品設計打動用戶已經非常困難了。而且很多功能模式都有了約定俗成的規范，發揮創造性的空間已經不大了。這導致現在的產品經理更多的是偏向項目管理而不是產品設計。
我的一個產品經理朋友，覺得自己原來所處的行業相對比較傳統，換了一家更加迎合年輕人的行業。
但是現實馬上教他做人，雖然新公司的產品更加年輕化，但是產品經理的工作其實沒有太大的變化，還是以畫原型、項目推進為主。
在可預見的未來，產品經理將離開互聯網的舞臺中心。
運營人才將接替產品經理的位置，站在在互聯網的舞臺中心引導之后的風向變化。當然，這里說的是大部分一線產品經理，如果你是牛人，你永遠都站在舞臺中央。
不同競爭階段的工作重心是不一樣的，所以在做職業選擇時，最好選擇那些適合自己發揮的行業和公司。
如果你是產品經理，那么最好是進入還在產品為王時期的行業。
如果你是渠道BD，渠道運營等，選擇那些競爭中期的行業。
如果你是活動運營，那么最好去那些競爭非常激烈的行業。
在適合自己的行業中，你的重要性得到了提升，擁有更多的機會學習和實踐，對于自我提升來說是事半功倍的。
有很多創業公司還保持著產品為王時代的思路。
它們所處的行業很可能已經在營銷為王的時代，卻還抱著精細打磨產品的意識，根本原因僅僅是因為領導者是產品和技術出身。
這類公司如果渠道端和營銷端沒有比較好的動作的話，很可能在燒光融資后就被迫關閉。而失敗的原因不是因為產品做的不夠好，而是沒有在正確的時間做正確的事。
有一些公司好一些，它們在產品為王的時代，通過打造優秀產品而崛起。但這種公司很容易形成路徑依賴，原來我們通過產品的優化成功了，那么現在就要繼續做好產品這件事。
但是產品體驗的護城河會慢慢被競品攻占，如果領導者不轉變身份，從“首席產品經理”變成精神領袖，那么很可能就會慢慢衰敗。
因為成功的企業家與市場的用戶的需求距離太遠，如果太專注抓產品的單點突破，就意味著在商業格局平衡和公司長遠戰略上的短視，結局自然不會太理想。
文章來源：人人都是產品經理
藍藍設計的小編 http://www.syprn.cn