幾個案例解析：如何一步步做出合理的策劃方案

人人都是產品經理 2018-08-19 15:01:59

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

做產品方案的時候，我們經常會走進死胡同或者跑錯路，最后不論是開發還是市場，對結果都不滿意，產品自然就成了背鍋俠！但是往往我們出方案的時候，多想一些問題，或許結果就不一樣，跟新人交流的時候，發現一些能力需要可以單獨訓練，有意識的去理解一些東西，長期積累就會有自己的一套解決問題的思路。

1. 辨別真偽的能力

辨別真偽也就是老生常談的真偽需求的能力，在產品經理的行業里，經常會進行需求的評審，需求的界定，看這個需求是否是真的有效

舉個例子

行業：外賣行業

案例：打包費審核的功能

功能出發點：解決商家亂設打包費的需求

解讀：如果從這個角度來講，打包費審核完全沒必要，原因有

• 未必所有的商家都亂設打包費，只是個別現象
• 及時設置了打包費審核，后臺審核了，也沒辦法解決，除非后臺做強制性的更改或下架商品的功能
• 打包費是商家自主行為，如果商家惡意設置打包費，是給自己添堵
• 如果真想解決此問題，在商家上傳商品的時候設置打包費的選項，一個餐品打包費最多是多少
• 或許極個別的商家的打包費真的會比較高，可以在商家管理后臺做好打包費配置即可，從源頭控制

很顯然，要在后臺做一個打包費審核的功能，還需要讓人專門處理此業務，對系統來說，是降低效率又不見得有效果的，所以，界定為偽需求。那么既然存在這樣的問題，可替代方案如下：

1. 商家添加商品時打包費又兩個選擇【收打包費】【不收打包費】，打包費為行業標準，1元/份餐品；
2. 對于大型的打包盒，比如說探魚這些商家，打包費可以開放設置（大型連鎖或者知名品牌可以認定為不需要通過打包盒來賺取利潤）。

辨別真偽的能力不僅僅體現在能辨別出來，更多的是能夠用更靈活的方式來解決來自運營、消費者產生的問題，且不增加過多的額外工作。

2. 找到合適定位的能力

合適定位的能力，這個說的有點虛，用通俗的話來講，就是找個抄的對象。在國內想要做一個App有大量的抄襲模仿對象，各大知名廠商已經做了很多的研究，剩下的就是模仿和創新。能不能找到合適的模塊去進行創新，這個就比較重要。

案例1：外賣行業，推薦商家

功能出發點：外賣行業的推薦商家，很多事按照細分的行業來做的，比如說美團跟餓了么的【必吃菜品】【品質聯盟】這些，但是對消費者來說，這真的是我想要的選擇么？

解讀：從消費者的心理出發，我去找吃的，可能出于幾點

• 找新鮮：看看這附近有什么新鮮的店鋪開業或者新的口味，外賣一個月都是那幾家，早就膩了
• 找實惠：外賣分量不夠，10塊錢管飽的那種最好
• 速度快：能告訴我最快的是哪家么？

其次還有可能

• 這兩天身體不舒服，想吃點口味淡的
• 我是湖南湖北人，我想吃點重口味的
• ……

因此，從這類具有標示性的標簽入手，會更有效果。此類功能類似于一點點的餐牌設計以及lofter的標簽設計，將商家分配不同的標簽跟消費者的消費場景對應上，交叉進行推薦，比如說一個商家有很多種口味，那對應的消費者人群也會多，消費者通過對應標簽可以快速找到對應的商品，對消費者和商家都是互利的，我們經常會遇到一個外賣店鋪有幾十種餐品，找半天還是不知道吃啥。

（配個截圖，此功能已實現，后續看數據情況，再做追蹤）

順便說一下，之前餓了么有個版本放大對餐品的顯示，做餐品的推薦，后來又改回來，具體是什么因素，不確定，但那也是一種嘗試。

案例2：荔枝FM飛機稿

出發點：那是很早以前的一個版本，因為不好用，所以就干脆做一個交互飛機稿，當時做的時候有以下幾個因素：

• 體驗不好，最古老的版本體驗非常不爽（詳情可以戳這里：http://www.woshipm.com/ucd/209199.html）
• 當時在做交互設計，就嘗試用新的交互設計思路去設計

解讀：

當時荔枝FM算是國內比較早做電臺的，同期出了喜馬拉雅聽，剛開始也沒有荔枝FM那樣火，但從交互上，主要由兩個點：

1. 模擬電臺操作：荔枝FM當時還是走擬物化設計（新進入互聯網的可能覺得是歷史），那從FM收音機的角度來說，都有一個旋鈕，或者是老式的隨身聽，因此在主頁的界面設計以及播放界面設計都有參考古老隨身聽的樣式，既然復古，我們就徹底點
2. 數據整理：在當時做荔枝FM的飛機稿時，主要做的是數據層的整理，把繁雜的內容數據變得有序可循，讓用戶和博客可以更快找到合適自己的內容

對于合適的定位可以理解為：每個事物或許有自己固有的長相，但或許我們找到合適的邏輯后，只要抓住根本，那最后怎么玩，還是大家說了算，打破陳規，才更好玩。為什么音樂軟件就一定要有那么大的播放界面；為什么訂餐軟件就一定要宣傳店鋪，不能是商品？

3. 解決問題的能力

這個就老生常談了，解決問題的能力體現在對系統的掌握程度和開發自由度兩個層面，產品經理實質是提供解決方案的，任何需求到手后，我們需要分析如何快速解決該問題。

案例1：招聘面試流程

出發點：銷售類崗位進行招聘時，都是一大批一大批的面試，一個人可能同時面試很多崗位，一個公司會面試很多個求職者，因此提率，對求職者和公司都是最大的需求

解決方案：排隊叫號，跟銀行排隊一樣，針對這個場景，我們梳理了核心的問題

• 面試人員取號
• 面試人員查看各崗位當前排隊情況及投遞請求
• 企業招聘人員查看簡歷并選擇是否面試，對面試的人進行初步評論
• 叫號及數據導出

針對以上四個問題，設計出如下流程（省略取號的環節，主要核心的流程是企業的發送通知循環以及面試后的符合不符合操作循環）

從流程圖可以發現，核心邏輯并不復雜，解決了通知求職者來面試的需求以及對求職者進行評價需求即可；除此之外還可以做一些其他的功能，如求職者可以看到當前排隊情況，根據實際情況進行簡歷投遞，避免出現大量等待情況，可預知自己還要多久可以面試，在這時間內是否可以投遞其他公司，進行多項選擇；對于企業解決各種紙質簡歷分辨不清，電子檔簡歷，電子記錄每一個求職者和操作，可以清楚知道今天面試記錄，電子檔案，更清楚，提高雙方的效率。

4. 了解數據的能力

對于數據，很多人應該不會陌生，如何從雜亂的數據找到規律，怎么處理數據之間的關系？

1. 一級頁面到二級頁面的流失率和轉化率
2. 每個頁面轉化功能的設計及數據統計
3. 數據解讀

最近在做小程序相關的項目，把騰訊的數據統計貼上來:

訪問趨勢類：

• time 時間
• session_cnt 打開次數
• visit_pv 訪問次數
• visit_uv 訪問人數
• visit_uv_new 新用戶數
• stay_time_uv 人均停留時長 (浮點型，單位：秒)
• stay_time_session 次均停留時長 (浮點型，單位：秒)
• visit_depth 平均訪問深度 (浮點型)

訪問分布：

• access_source_session_cnt 訪問來源分布
• access_staytime_info 訪問時長分布
• access_depth_info 訪問深度的分布

訪問留存

• visit_uv_new 新增用戶留存
• visit_uv 活躍用戶留存

訪問頁面：

• page_path 頁面路徑
• page_visit_pv 訪問次數
• page_visit_uv 訪問人數
• page_staytime_pv 次均停留時長
• entrypage_pv 進入頁次數
• exitpage_pv 退出頁次數
• page_share_pv 轉發次數
• page_share_uv 轉發人數

總結

產品經理從拿到需求開始就需要對需求進行分解，判斷到底什么樣的方案可以解決此問題，并結合當前系統的一些功能點，給出最佳的方案；在交互設計的時候是參考競品還是微創新，就看實際業務需求；最后就是核心業務梳理，一個功能的核心業務是什么，還有哪些可以搭配讓功能更完善的，考慮進去，做產品是一個分解、組合、刪減、再組合的過程！

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

面向中小企業SaaS的權限管理系統

人人都是產品經理 2018-08-19 15:02:17

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

本文基于面向某個垂直行業的SaaS系統的設計經驗，抽象出一套適合中小企業的權限管理體系，目標是最大限度保留系統彈性的同時，把系統復雜度和開發成本盡可能降低。enjoy~

面向企業級的SaaS（軟件及服務）系統，由于企業用戶的規模和內部管理模式千差萬別，設計一套具備足夠彈性、符合絕大部分目標企業用戶需求的權限管理系統，是一個很大的挑戰。

我們可以看到，市面上面向多個行業的綜合性SaaS系統，例如銷售易、紛享銷客等，由于它們的目標客戶跨越了多個行業、多種規模，這些企業具備各種各樣的內部管理風格和模式，在權限系統的管理上，往往做得非常復雜，不僅具備部門、角色、職位、數據等各個維度的權限管理，各個功能模塊還有自己獨立的權限管理，雖然具備最大的彈性，卻給企業的系統管理帶來較大的負擔。

提煉的三個核心原則：

• 企業-管理員-普通賬號三級權限
• 功能和數據權限分離
• 部門和角色分離

圍繞上述三個基本原則，我們力圖在滿足中小企業需求的前提下保持足夠的彈性，并嚴格控制復雜度和開發成本。詳細描述如下。

1. 權限從上到下分為三個層級：企業賬號（老板賬號）、管理員賬號、普通賬號

對于中小企業來說，公司的實際控制人，往往是公司的創始人或自然人大股東，因此企業賬號的使用者以及對應綁定的手機號碼，都是公司的實際控制人，他應該掌握最核心、權限最大的企業賬號，所以也可以稱為“老板賬號”。

但是在實際場景中，公司的實際控制人并不會直接管理公司的業務支撐系統，因此，需要在系統首次部署時，創建好企業賬號，并由企業賬號授權給某一個或多個系統管理員，由系統管理員去完成日常的角色創建、員工導入等工作。系統管理員，對應的一般就是HR或行政部門的管理人員。當然，企業賬號的權限高于管理員賬號，如果是小微型企業，也可以由企業賬號直接替代管理員賬號的功能。

除了企業賬號和管理員賬號之外，其他各級員工所持有的賬號，都屬于普通賬號。普通賬號的部門、角色、數據等權限的設置，一律由系統管理員配置。

三個權限層級示意圖如下：

在實際系統中的核心業務步驟如下：

（1）企業購買系統時，創建一個企業賬號，這個企業賬號綁定的手機號碼為公司實際控制人的手機號碼。該手機號碼必要時可以解綁（例如公司實際控制人變更），由于該功能觸發頻率很低，因此不需要在前端功能中實現，只需要在購買協議中寫明，“購買企業可以通過書面方式提出企業賬號手機號碼綁定變更需求”即可。

（2）在部署和培訓階段，可指導企業賬號持有人創建一個或多個管理員賬號，該賬號一般授權給行政總監或人力資源總監，后續配置即由管理員賬號進行。

（3）管理員賬號持有人需要接受系統培訓，掌握部門創建、角色創建、功能和數據權限分配等基本操作。管理員所有操作都必須記錄在案，供企業賬號持有人監督，且管理員操作觸發異常行為規則（如大量分配高等級權限等）時，系統會通過短信方式通知到企業賬號持有人，確保企業賬號對管理員的全方位掌控。

（4）企業賬號可隨時將管理員賬號禁用或設定為離職，但管理員賬號不可對企業賬號進行任何配置或操作。

（5）企業賬號默認擁有所有權限。

2. 功能權限和數據權限分離

功能權限，定義為可見、可以操作的功能范圍。例如某一部分菜單，或者某個頁面里的各種操作。

數據權限，定義為若干個數據類型里的具體可見范圍，例如“客戶”就是一個數據類型，它的權限舉例如“無權限”、“我的客戶”、“我所在部門的客戶”、“我所在部門及下級部門的客戶”。

通過功能權限和數據權限的分離，我們可以做到以下場景：需要開拓和維護客戶的角色集合，都可以擁有“客戶”這個菜單的權限，但不同的角色進入“客戶”菜單的列表時，看到的客戶范圍各不相同，極端情況是看不到任何客戶。且不同角色在同一個客戶頁面上，能進行的操作也不同，例如有的角色可以新建客戶，有的卻不行，這就要由功能權限來控制。

可見，通過功能權限和數據權限的分離和配合，我們在具體的權限分配上有了非常大的彈性，且在技術層面的后臺系統的設計上，也非常合理、清晰。

而在具體設計上，需要保證以下4點：

1. 正確區分功能和數據，入口性和操作性的都應該歸類為功能
2. 正確對數據進行分類，避免存在分類后的某些數據存在交集
3. 數據分類到多細的顆粒度，需要由行業特性決定
4. 數據權限區分為查看、編輯和刪除

示例圖如下，由于涉及具體產品，對某些文字進行了打碼：

3、部門和角色分離

部門的定義，自然就是公司行政組織架構下的部門。

在本設計方案中，角色等同于職位，而在許多大型的SaaS系統中，為了更大的靈活性，往往會把角色和職位分開，但根據我們的判斷，對于中小企業，設定角色一個就夠了，職位當然還存在，但僅僅是一個不涉及權限管理的文本title了。

以一個銷售公司來說，角色可以包括：“渠道專員”、“渠道總監”、“銷售專員”、“銷售經理”、“總經理”等等。

所謂的部門和角色分開，就是不同的部門可以有相同的角色，例如如果有渠道一部、渠道二部，則這兩個渠道部的員工的角色都可以設定為“渠道專員”，這兩個部門的管理者都可以設定為“渠道經理”。再配合功能和數據權限，則進一步配置“渠道專員”具有“渠道”菜單的功能權限，其能夠查看的渠道數據權限范圍則僅為“我的”，而“渠道經理”同樣具有“渠道”菜單的功能權限，但其能夠查看的渠道數據權限的范圍則擴大為“部門”。

具體設計上：

1. 最大部門即為公司
2. 管理員賬號和普通賬號均可禁用或設置為離職
3. 不同部門可以配置相同角色
4. 相同角色的功能權限和數據權限是一樣的

4. 權限系統和其他功能設計的關系

總結完權限系統三個核心的基本原則后，我們還需要指出一點：權限系統的設計方案，在整個系統中絕不是孤立的，它能否實現設計目標，并和整個系統完美配合，還需要做到以下幾點：

首先，菜單和功能的設計，必須是最小顆粒度，否則就和數據權限產生沖突。例如：我們只需要一個“客戶”菜單即可，不同角色在“客戶”菜單里能干什么事情，由功能權限和數據權限配合進行控制，但切不可出現“我的客戶”+“全部客戶”兩個菜單，這明顯和數據權限有根本沖突，且也是一種不優美、不合理、擴展性差的設計。

其次，數據的分類，必須符合業務需求，且劃分合理。有些數據都是公開的可以不歸入數據權限進行管理，所有角色默認都有即可；有些數據需要進一步細分，例如同樣以“客戶”舉例，在某些公司的業務規則中，就需要將客戶的基本信息和聯系信息分開控制，管理層可以看客戶基本信息，但只有客戶負責人才可以看聯系信息，這種情況就需要將客戶的數據權限分為“客戶基本信息”和“客戶聯系信息”兩個。

最后，權限變更的記錄和所有賬號的行為軌跡記錄一樣重要。權限系統本質是進行權力的限制，沒有監管的權力必定是會失控的。在出現問題的時候，必須同時配合權限變更的記錄、角色變更的記錄和賬號的行為軌跡記錄進行追責和存證，確保維護企業的合法權益。

總結

在合理設計的前提下，權限系統也并非越復雜越好。只有符合目標客戶需求并具備最大彈性的權限系統，才是最好的。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

「網易蝸牛閱讀」和「微信讀書」的寫書評功能分析

人人都是產品經理 2018-08-19 16:05:00

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、目的

三、用戶 – 場景 – 需求分析

小結（這個模塊是做什么的？為什么？）：

從寫書評方說：

1. 為領讀人/書評家/作家提供了一個新的發布自身書評/作品的平臺，且通過簽約等合作形式為他們提高了收入，同時為他們開拓了新的增加粉絲，擴大影響力，強化IP的新方式；
2. 為作家/書本運營方/媒體機構提供了相對于其他電子書app來說更為專業的推廣渠道；
3. 為閱讀者（尤其是有寫觀后感習慣的）提供了更專業、完整、體系化的內容記錄與發布方式，以及獲取認同，尋求社交，與書友互動交流的新機會。

從看書評方來說：

• 閱讀者可以在閱讀前去通過書評快速全面了解一本書（零碎時間的泛讀），為要不要深入精讀提供參考；可以在閱讀前通過觀察別人對此書的解讀，帶著自己的問題與思考再去有目的性閱讀；可以在閱讀時，體系化的記錄自己的想法；可以在閱讀后尋找他人解讀中的不同點或共同點，加深自身思考，以及完善自身的想法。
• 找書者可以通過次主打的導讀特色功能，通過專業人士分享的書單或由讀過的人分享的想法，找到更值得信賴的內容向導。

從運營方來說：

1. 以書評特色作為產品特色推廣，吸引有寫觀后感習慣的電子書閱讀群體，為對寫書評有愛好或者以寫書評為業的群體提供新的平臺，滿足拉新需求。
2. 通過書評領讀，為用戶挑選書籍提供大量專業參考滿足留存需求。
3. 以領讀人帶起書評風潮，以PGC促進UGC，以及通過普通用戶對領讀人的申請，滿足激活需求。
4. 在書評中插入書籍入口，方便用戶閱讀購買，滿足轉化需求。

四、業務流程、業務邏輯梳理

功能流程：

1. 入口一：領讀 -> 右上角寫書評按鈕 -> 寫書評；
2. 入口二：我的 -> 我的書評 -> 右上角寫書評按鈕 -> 寫書評；
3. 入口三：選擇書籍 -> 閱讀書籍 -> 右上角寫書評按鈕 -> 寫書評；
4. 入口四：選擇書籍 -> 書評欄 -> “寫書評，獲時長獎勵‘輸入框 -> 寫書評。

四個入口分別代表四種場景：

• 入口一為領讀人直接發表文章提供便利；
• 入口二是方便內容發布者對于自己的書評進行編輯管理；
• 入口三提供閱讀中隨時記錄想法，書評素材的方式；
• 入口四的獎勵文案鼓勵大家加入寫書評，加入閱讀，且為閱讀者提供參考。

業務邏輯：

小結：

通過業務邏輯的分析可以看到，「網易蝸牛平臺」，“書評功能”，書評發布方以及書評閱讀方四方形成一個完整的循環，首先平臺通過優秀領讀人的引進，為閱讀方提供內容，并與之互動；再通過激勵引導，由PGC帶動UGC，讓閱讀方成為發布方，讓用戶生產內容，并提供申請領讀人的渠道；然后發布的內容再次與其他閱讀方互動，形成一個完整的循環生態系統。

五、功能點對比

小結：

相同點：通過閱讀中，書本詳情頁進入；輸入文字，輸入標題，添加筆記/標注，插入書籍；字體，副標題，符號，私密發布，分享功能。（基本功能）

不同點：

• 「網易蝸牛讀書」：標題的必要性、添加圖片、多本書籍插入；多樣化的字體排版選項、PC編輯、保存到草稿箱、獎勵、撤銷功能。（專業化需求較強）
• 「微信讀書」：添加表情；引用、星級評分。（較為注重簡單，直接，有趣）

六．總結

抄不抄？

不抄，如果發現UGC內容越來越多，以及專業化需求提高，可以考慮借鑒「網易蝸牛讀書」中寫書評的多樣化編輯功能去完善寫想法功能。

原因：

（1）產品定位

主打特色可以看出產品定位，以及發展方向的不同。兩者同時對于領讀這一模塊下了很大的功夫，但玩法不同，「網易蝸牛讀書」通過專業領讀人（內容分享 & 引流導購）發布的專業書評，去引導用戶閱讀，降低用戶的防備心，所以寫作門檻較高。

而「微信讀書」則無此需求，以好友作為切入點，通過好友在看的書，進行熟人引讀，把用戶防備心降到，能讓用戶無成本接受，但同樣容易導致內容參差不齊。

（2）社交屬性

「網易蝸牛讀書」以PGC為主，專業領讀帶動社群發展，看書評人與書法發布方本身可能是粉絲關系，也可能無任何關系。而「微信讀書」以UGC位置，好友之間的想法碰撞占到大多數。

（3）用戶驅動方式

「網易蝸牛讀書」以其特色時長閱讀，以及興趣導向，領讀人粉絲引進為主。而「微信讀書」則有很大部分基于好友之間的競爭關系，通過虛榮心驅動。

所以對于「微信讀書」來說，暫時不需要花較大成本引入專業的PGC內容，性價比不高，與產品定位契合度不高。

本文由 @大明 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

適合做后臺的UI匯總，懂程序不懂UI的你還在煩惱怎么美化后臺界面

年輕時的碼云 2018-06-15 18:39:08

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

算是比較全的合集，送給大家，資源獲取在文末（有驚喜哦），這次福利很大，趕快關注哦（資源限時開放....）！

1，layui/ layuiAdmin

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

大家有機會多支持閑心。。。。

不過后臺UI是要授權的哦

---

2，dwz富客戶端框架 - jUI

DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。

比較成熟，應用比較廣泛，官網有整合的應用可以借鑒

• DWZ框架 + ThinkPHP 實現小組工作日志系統
• dwz4j企業級Java Web快速開發框架(Hibernate+Spring+Struts2) + jUI整合應用
• dwz4j企業級Java Web快速開發框架(Mybatis + SpringMVC) + jUI整合應用
• ThinkPHP + jUI整合應用
• Zend Framework + jUI整合應用
• YII + jUI整合應用

---

3，B-JUI 前端管理框架

B-JUI客戶端框架(Best jQuery UI)，是基于Bootstrap樣式及jQuery庫實現的Ajax RIA開源框架。

B-JUI客戶端框架擴展方便、簡單易用，很多情況下只要熟悉HTML語法，使用HTML屬性就可以輕松用Ajax開發項目。對于javascript不太熟悉的程序員是非常方便的，他們只需要關注后端業務邏輯的實現就行了，前端頁面上只需要簡單的寫點HTML代碼。

本框架基于Bootstrap前端樣式及jQuery庫開發，提供豐富的各類組件及UI，封裝有多種組件，及相關的Ajax請求調用，并且都以jQuery標準插件的方式組合在一起，所以非常方便進行二次開發或再擴展。

兼容性：

• IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未詳細測試，估計問題不大，但一些CSS3的效果就不要想了，如圓角、動畫什么的）
• 本框架不適用于需要兼容IE6、7的開發者或使用者。
• PS. 未考慮兼容IE6和IE7，一是因為Bootstrap3.2不支持，二是因為目前主流系統已是WIN7(IE8+)，三是帶WebKit內核的瀏覽器大量出現，如360瀏覽器、搜狗瀏覽器、百度瀏覽器等。

---

H+ 后臺主題UI框架

H+是一個完全響應式，基于Bootstrap3.3.6版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術，她提供了諸多的強大的可以重新組合的UI組件，并集成了的jQuery版本(v2.1.4)，當然，也集成了很多功能強大，用途廣泛的jQuery插件，她可以用于所有的Web應用程序，如網站管理后臺，網站會員中心，CMS，CRM，OA等等，當然，您也可以對她進行深度定制，以做出更強系統。

提醒：是收費的

---

H-ui.admin

H-ui.admin是用H-ui前端框架開發的輕量級網站后臺模版 采用源生html語言，完全免費，簡單靈活，兼容性好 讓您快速搭建中小型網站后臺，拿來即用。

---

jQuery MiniUI_快速Web開發

jQuery MiniUI - 專業WebUI控件庫。

它能縮短開發時間，減少代碼量，使開發者更專注于業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。

jQuery MiniUI致力降低企業應用的開發成本，豐富的UI控件、高度的穩定性、強大的擴展能力和平滑的版本升級能力，可滿足大部分業務場景需求。

缺點：收費的！

---

請輸入描述

EasyUI

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

• 大家百度去官網下載即可

---

TOP-JUI 

b-jui的作者基于easyui開的的，比easy調用簡單，很不錯的UI，可惜收費，不過不算太貴

TopJUI基于版EasyUI構建，在使用TopJUI的過程中，除了可以使用TopJUI提供的組件功能外，你還可以根據實際情況調用EasyUI的原生組件功能，滿足各種復雜的業務功能需求開發

---

Amaze UI 后臺管理模板

Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。

組件豐富，模塊化Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅提升開發效率。

不過這個模板現成的東西比較少，復雜功能還需要自己去完善

---

---

LigerUI

• 使用簡單，輕量級
• 控件實用性強，功能覆蓋面大，可以解決大部分企業信息應用的設計場景
• 快速開發，使用LigerUI可以比傳統開發減少極大的代碼量
• 易擴展，包括默認參數、表單/表格編輯器、多語言支持等等
• 支持Java、.NET、PHP等web服務端
• 支持 IE6+、Chrome、FireFox等瀏覽器
• 開源，源碼框架層次簡單易懂。

---

win10-UI

Win10-UI是一款win10風格的后臺UI框架。它使用了豐富的win10桌面元素，包括桌面圖標、窗口化子頁面管理、開始菜單、動態小磁貼等組件，兼容主流現代瀏覽器及移動端的屏幕尺寸，適合快速開發后臺管理系統的前端界面。

風格不一樣，還是挺不錯的

---

國外還有很多 bootstrap 后臺UI

Ace Admin，Metronic等等

---

今天小編就分享到這里

評論回復相關需求，小編會第一時間私信您

或者私信回復“后臺UI”，自動獲取資料，都是小編的血汗哦，本資源只開放一段時間，趕快獲取哦（是私信不是評論哦，評論無法自動回復）

如果你是初級程序員可以研究別人的代碼提高技術，如果你喜歡搞網盟或者外包，可以讓你快速建站，還等什么趕快關注吧，我們會持續輸出相關資源

---

資源來自互聯網 僅供學習研究之用，不得用于商業，請在24小時內刪除！

版權歸原作者及其公司所有，如果你喜歡，請購買正版。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

實例分析拆解：如何設計登錄注冊？

人人都是產品經理 2018-08-09 18:42:15

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

最近對我們的APP的賬戶體系進行了改版，研究了各類產品的設計。賬戶體系雖然幾乎是通用標配功能，但是各APP的都有差別，都是針對當前的產品形態、發展階段和用戶量級做出了符合自己的設計。賬戶體系的關鍵點在登錄注冊流程上。登錄注冊流程看似簡單，實際考量設計功力。網上關于登錄注冊的綜述有很多了，但是從零到一整合分析的很少，以下，將以實際的產品為例，精細分析如何設計賬戶體系。

一、立項背景

我們的產品第一版賬戶體系由于歷史原因，做的比較生硬。

初期主攻社交，希望可以沉淀用戶信息，手機賬號會是第一優先選擇，當時的方案是手機號注冊+賬號密碼登錄/第三登錄+立刻綁定手機賬號。

如你日常體驗那樣，第三方登錄+立刻綁定手機的方式，直接抵消了第三方登錄的便利，比直接手機號注冊更麻煩。而且，設計上，手機號注冊需要設置兩次密碼，密碼需要一致；設置之后，還得進入登錄界面，再次填寫賬號密碼，正確匹配才可以進入APP。

總的來說，用戶進入APP的路徑相當長，步驟多，用戶體驗低分。

近況是，產品方向探索，將重點落在商城上。完成交易的流程本身就多步驟，再疊加原來的登錄注冊，路徑過深，對拉新損耗大，急需改進。

二、需求分析

從業務發展趨勢來看，微信會是重要的用戶來源，后續會布局更多的微信運營活動，和商城小程序，設計引流到APP，需重點突出微信登錄。

而商城交易需要保證安全性，同時兼容老用戶，手機注冊密碼登錄必不可少。考慮到用戶文化水平，和互聯網產品使用習慣，需要在常規的基礎上做簡化。

第三方登錄需要在關鍵點綁定，商城推廣員提現時變更銀行卡，需加以驗證身份。

新用戶剛進來，可以先瀏覽熟悉產品內容，在需要身份信息時，再進行引導登錄。

三、功能點梳理

登錄注冊流程：微信/QQ第三方登錄、驗證碼登錄/注冊、密碼登錄、找回密碼。

賬戶體系配套：關鍵點引導綁定手機、關鍵點強制綁定手機、驗證碼驗證賬號、賬號相互綁定。

細節功能點見下方的賬戶體系功能點梳理圖。

四、流程圖（登錄注冊）

未登錄用戶，到達需要獲取用戶身份信息的界面（為了平衡效率和體驗，一般是除一級界面以外的），則觸發注冊登錄流程。用戶完成注冊登錄之后，才可使用和操作絕大部分的功能。

本流程圖需要配合頁面交互原型理解。

五、關鍵頁面交互設計

登錄注冊體系將包含五個部分，主界面、驗證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊，在實際流程操作中會根據用戶的選擇，和系統的判斷進行切換。賬戶體系的配套將會略過，以下是登錄注冊的頁面交互設計、設計考量和功能點介紹。

1.主界面

• 布局：主界面集合三種登錄方式，將微信登錄作為主方式。
• 前提：成功登錄的前提條件是必須先勾選同意用戶協議，否則報錯。
• 授權：第三方的登錄，點擊微信orQQ，授權成功后，即可登錄進入APP，自動獲取用戶的昵稱性別頭像信息填充社交頁。

2.驗證碼登錄/注冊

（1）設計解析

• 手機賬號登錄，考慮簡單又快速進行，突出驗證碼快速登錄/注冊，輔以密碼注冊。
• 密碼注冊的弊端是很容易忘記密碼，忘記之后，找回密碼流程也繁瑣。
• 驗證碼登錄，雖然對頻繁換手機的用戶是個噩耗，短信也有達到率的問題，但考慮到效率跟成本，特別在拉新環節，還是作為主方式。

其實基于驗證碼到達率和安全性，我考慮過換移動認證，就是手機號碼一鍵登錄，無需密碼跟驗證碼?？上嶋H接洽的時候行不通，而放棄了，文本會介紹下這個事情。

（2）設計點

• 驗證碼登錄：登錄注冊界面為驗證碼登錄，附以密碼登錄。
• 按鈕：登錄注冊的按鈕合二為一。也就是說，用戶不需要選擇是登錄還是注冊，將判斷交給了后臺。只要用戶的手機號碼還在，直接憑驗證碼進入即可。比起選擇密碼登錄之后忘記密碼，或者是干脆就不記得自己是否注冊過，在錯誤的界面輸入信息之后來回切換，二合一的方式更加友好，也是本次設計的一個亮點。
• 手機號碼：采用更加清晰的的3-3-4數值格式，輸入框末尾配清除按鈕，錯誤輸入后可一鍵清除。手機號碼輸入框也有記憶功能，可獲取前一次登錄的手機賬號，可以獲取同一次登錄注冊已填過的賬號信息。
• 驗證碼：手機號碼位數輸入正確類型和位數之后，才激活驗證碼功能。否則點擊會報錯。之后，驗證碼的激活以變色表現，這是個視覺指示。輸入完成第一行，人眼會自然而言的落在第二行的開頭，如無例外，用戶需要尋找一番，才會覺知過來，去點擊獲取驗證碼。
• 加載指示：數據傳輸到服務端，判斷對錯，再返回結果。這個流程費些時間，用加載小菊花，表示后臺正在處理，舒緩下等待的焦急。

3.密碼登錄

（1）設計解析

密碼登錄考慮到向后兼容，老用戶的賬號以密碼登錄；也是適應本期的新用戶注冊。

同時標配忘記密碼，也可切換新用戶注冊，或驗證碼登錄，這些元素的布置考慮，是基于流程的。

密碼的輸入，其實正如設置密碼，應該做格式限制。但是因為第一版沒限制，不清楚用戶設置了什么，所以此處不能輕易填坑。

數據輸入都該考慮下限制的，為什么？在給產品經理講技術這書里，要是你看到黑科技SQL注入攻擊也會很印象深刻的……

（2）流程

跟驗證碼的簡單路徑不一樣，密碼登錄因重在流程上邏輯自洽，更需配流程圖查看才好理解。

正常流程是：輸入手機號->輸入密碼->點擊登錄->登錄成功。

異常流程是：

• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->點擊新用戶注冊or返回上一級驗證碼登錄/注冊。
• 輸入手機號->輸入密碼->點擊登錄->提醒“未注冊”->賬號或密碼不對->重新輸入or忘記密碼or驗證碼登錄。

4.忘記密碼

（1）設計解析

步驟：忘記密碼此處分兩步，一步驗證，一步設置。設置完之后，直接登錄進入APP，無需再重復密碼登錄的步驟。（記不住密碼更痛苦的事情是，忘記密碼剛找回來，在下一步重新登錄的時候又忘記了）。

異常流程：忘記密碼此處還有個異常流程，是該賬號不存在。有童鞋會說，正是密碼輸錯才會到來這界面，這么還會有賬號不存在的情況？對，情理上其實不大可能發生，但是程序邏輯上有這個可能，但是又無法通過前面的步驟過濾掉，是要補充下的。

此處判斷賬號不存在的提醒，是點擊獲取驗證碼之后，亮點之一。這里是考慮辛辛苦苦獲取驗證碼，填寫完畢之后才來告訴用戶賬號不存在，有些不厚道的……

（2）設計點：

驗證賬號：常規的做法，先驗證碼驗證手機號，再下一步設置密碼。

有些APP會將驗證賬號跟設置密碼放在同一個頁面，其實拆開會更清晰。而且，驗證手機號碼步驟復用率是很高的，比如，可以復用到推廣員更改綁定銀行卡時，作為賬號驗證。

設置密碼：密碼設置要限定格式，之后僅需輸入一次就可以直接登錄進入了。

重復兩次數據，再次校驗肯定更穩妥，但是登錄成本提高了，以我們用戶的耐心，我們的產品就沒必要承擔這個教育成本了。如果說擔心手誤輸錯了的，可以用驗證碼登錄的，再不濟可以用找回密碼的。但是大多數用戶其實只考慮本次能快點進入就好。

5.新用戶注冊

（1）設計解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程，區別在點擊獲取驗證碼，此處的異常流程是該賬號已存在。此處設置優化的流程，判斷是已有賬號之后，會直接跳轉到驗證碼登錄/注冊界面處，直接獲取已填寫的手機號碼，驗證就行，對新用戶盡量友好。

經過前面的界面篩選，此處的賬號不存在的發生概率很少，但是作為關鍵流程而言，完整性是必要的。

（2）移動認證

文內留個懸念要談談移動認證，移動認證是什么？最直接的體驗是，無需輸入任何數據，直接點擊授權就登錄。是不是很黑科技？！ 但是為什么最終放棄了呢，請聽細講。

理想情況：

移動認證是運營商移動提供的，基于手機sim卡和移動網絡直接認證登錄的技術，米家、愛回收跟同花順應用在了自家APP里。當時上手體驗，驚艷，簡直零感登錄；況且移動官網也有免費的sdk，更是竊喜。以移動認證為主登錄的原型設計完畢，就立刻接洽移動認證sdk的接入。

現實情況：

但是呢，很快就被開發文檔打臉了，簡言之，就是層層篩選之下，能一鍵登錄的用戶遠沒有想象的多。

移動認證的原理是基于移動網絡通信的。首先基于sim卡識別本機號碼，在移動網絡開啟的前提下傳輸信息以授權通過，此時可順利登陸；但是如果沒開移動網絡，就沒轍了；如果WiFi跟移動網絡同開，以WiFi為主，那將強制占道先驗證再釋放WiFi。如果移動網絡通信不成，那就通過短信收發來完成數據傳輸。

所以，這么流氓的做法蘋果肯定是不樂意的；電信不參與；oppo的ROM不支持此流程……層層篩選下來，加上關閉移動網絡的，能順利使用的其實不多；而且，除非付費，否則移動認證的logo說明只能用官方的，簡直是給移動打廣告….這些阻力遠高于收益，所以，果斷放棄了，采取了本文講述的方案。

果然，合適的才是最好的。

本文由 @閱天 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基于 CC0 協議

10個基于web的JavaScript最優秀的庫和框架

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在所有可用于創建web應用程序的語言中，JavaScript可能是最健壯的庫和框架選擇。事實上，有太多的東西，很難弄清楚該用哪一個，尤其是當你剛剛開始的時候。

JavaScript庫和框架之間的關鍵區別在于，庫由應用程序可以調用的函數組成，用于執行任務，而框架定義了開發人員如何設計應用程序。換句話說，框架調用應用程序代碼，而不是反過來。當然，開發人員仍然需要庫來使用JavaScript完成web上的基本任務。

JavaScript Libraries

1. D3.js

許多現代網站都是數據驅動的。例如，新聞站點必須不斷刷新它們的內容，因此不可能每隔幾秒鐘重新配置設置以支持這些更改。數據驅動文檔，或D3。庫的獨特之處在于它把數據放在首位。下面的截屏顯示了在D3中可以找到的許多數據演示中的一些。

單擊visual index中的一個條目，您將看到一個詳細頁面，在這個頁面中您可以看到數據表示的完整視圖(如下所示)，以及用于創建表示的底層代碼和數據：

該站點提供了完整的示例，旨在幫助您理解庫的功能。

這個庫的主要優點是它對內容的處理非常靈活。但另一方面是D3.js并沒有帶來太多的活力。例如，如果您是在一個電子商務網站工作，而不僅僅是提供信息，那么這個庫可能不是最好的選擇。除了極端的靈活性，D3.js的 relatively streamlined presentation幫助提高了速度。如果單單從圖表的功能來看，D3.js還是有點太龐大了。啊還不如去使用Chart.js短小精干的專門提供圖表功能的庫。

2. jQuery

大名鼎鼎的jQuery已經贏得了長期統治網頁的地位。許多網站仍然使用jQuery進行基本的文檔對象模型(DOM)操作，原因有三個：

jQuery非常容易學習。它提供的示例比大多數庫都多，所以您很有可能會找到一個示例來演示如何完成特定的任務。

jQuery非常快。因為它專注于出色地執行特定的任務，所以jQuery使快速執行這些任務成為可能。

jQuery擁有龐大的安裝基礎。它還擁有大量的社區支持和項目貢獻者。

我們可以預期這個庫肯定會長期存在。額外的開發時間也意味著文檔是非常完善的。如下所示，文檔將主題分解為容易理解的部分，然后您可以根據需要深入研究其他細節：

當然，沒有什么是完美的。例如，有時jQuery在多個瀏覽器上的工作方式并不完全相同。JQuery首先關注這些問題，您可以在站點上找到有關瀏覽器支持的信息。

最后，與其他庫不同，jQuery并不是一個完整的解決方案。您需要另一個產品，如jQuery UI(參見下一個條目)來構建一個完整的應用程序。重要的是要認識到，在使用jQuery時，您的站點將更加模塊化，并且依賴于更多的庫(雖然這并不一定是壞事)。

3. jQuery UI

jQuery UI只是jQuery的眾多插件之一，但它是您最?？吹降模@也是我們在這里包含它的原因。在合并jQuery之后，使用jQuery UI向應用程序添加基本的圖形元素。jQuery UI庫提供了各種有趣的小部件，如手風琴、滑塊、工具提示和數據表，這些小部件使您可以配置應用程序以提供有用的服務。

您可以深入到特定的小部件或其他控件來查看它們是如何工作的。頁面通常包含頂部的控件，然后是使用說明和示例代碼。與jQuery一樣，您可以從一個簡單的示例開始，但可以根據需要深入了解添加的內容。

這個庫Library 與眾不同有幾個原因。最重要的是，JQuery UI幾乎適用于任何瀏覽器，因此用戶不太可能抱怨應用程序沒有按預期工作。jQuery UI還提供了大量的附加組件。例如，雖然jQuery UI缺乏時間選擇器，但您可以從trentrichardson.com/examples/timepicker等地方獲得執行該任務的附加程序。

jQuery庫組的一個問題是它們變得非常大。有時候，一個庫的特性太豐富了。JQuery庫的大小會使它們在較小的設備上加載速度變慢。可以使用替代的第三方庫，如Granim.js和Multiple.js的出現提供了jQuery特性的子集，有時還提供了一組有重點的附加功能特性，加載時間大大加快。

4. Parsley

表單驗證是一項重要的任務。因為現在的數據經常被機器分析，所以干凈的數據比以往任何時候都更重要。事后清理數據是費時的，而且從沒有像讓用戶首先提供正確的信息那樣準確。

與任何其他JavaScript庫相比，Parsley提供了更多的表單驗證技術。你可以選擇你需要的驗證級別，但它們可能會變得非常復雜：

甚至如下所示的簡單驗證也包含許多不同的驗證類型，以及執行任務所需的代碼。完成最常見的驗證是多么容易。(除非嘗試驗證復雜的數據，否則不需要進行繁重的編碼。)

5. QUnit

許多庫提供的測試功能有很多不足之處。即使您使用腳本，手動測試復雜的應用程序也會很麻煩，而且需要花費大量的時間——如果它能找到所有的錯誤的話。

QUnit是用于JavaScript的幾個單元測試庫之一。雖然有些人可能會認為它有點過時，但它是相對全面的，并且具有強大的社區支持和短的學習曲線。QUnit站點提供了豐富的入門信息，包括關于單元測試的完整教程。

6. React

通常被認為是一個庫，而React有時被稱為框架。在模型-視圖-控制器(MVC)方法的上下文中，React提供了視圖部分。它不假設您正在使用的基礎技術堆棧來建?；蚩刂茢祿?。所有的React興趣的就是在屏幕上顯示數據?？紤]到這一點，它不依賴于瀏覽器文檔對象模型(DOM)，而是使用一個快速顯示信息的輕虛擬DOM。React最棒的一點是它是聲明性的，這意味著你要告訴框架你想做什么，而不是怎么做。

您為使用MVC的速度和能力付出的代價是增加了一定程度的復雜性。即使是一個小的組件也需要相當多的代碼(如React網站上的例子所演示的)。當你和真正的大型項目一起工作時，你獲得的是靈活性和速度。

JavaScript Frameworks（框架）

1. Angular

Angular framewor框架使作為MVC的控制器部分擴展HTML成為可能。控制器是DOM組件背后的行為。有了 Angular，就有可能以一種既自然又直接的方式創造新的行為。這些擴展最終看起來像是HTML的附加部分，而不是固定的東西。 Angular 網站明確了使用該產品的兩個基本原因：“速度和性能”和“難以置信的工具”。

然而，編碼可能會變得復雜，這個框架可能更適合大企業而不是小創業公司。即使是 Angular 站點上的簡單示例也依賴于快速創建復雜性的多個文件。值得注意的是， Angular framewor的版本也依賴于TypeScript，而不是純JavaScript，這增加了學習曲線，但提供了可擴展性。

幸運的是，該軟件附帶了大量教程，如本文所示，這將使有經驗的開發人員更容易快速地開始工作。

2. Ember.js

一個自稱為“有抱負的web開發人員的框架”的框架確實有些嚴肅。像微軟、Netflix和LinkedIn這樣的知名公司都在使用Ember.js。因為它使用模型-視圖-視圖-模型(MVVM)模式，并將最佳實踐作為框架的一部分進行合并。最重要的是，它的伸縮性非常好。有趣的是,Ember.js不僅可用于web開發，您也可以使用它來構建移動應用程序和桌面應用程序——它被用于構建Apple Music。

與許多其他框架不同，您可以使用完整的基于ember的工具套件來創建高度兼容的開發環境。Ember CLI(命令行接口)提供了對大量工具的訪問，您可以使用腳本自動化。例如，,Ember.js數據通過對象關系映射(ORM)提供面向web的數據訪問。與此同時，Ember Inspector是Firefox和Chrome瀏覽器的一個插件，它可以使調試更加容易。

盡管有它這么給力，Ember.js的快速入門教程只需要5分鐘就可以完成。當然，標準教程需要的時間要長得多，但是能產生更多受人尊敬的結果，如下所示：

這個框架的文檔包含您需要的所有主題，包括對象模型、模板、組件、控制器和模型的討論。還有一個博客和Ember.js社區可以提供額外的幫助。

3. Node.js

Node.js是一個異步的、事件驅動的JavaScript運行時，具有一些獨特的特性。首先，如果它沒有工作可做，它只是“去睡覺”。這聽起來并不是什么大問題，但是如果你在公共云上托管你的網站，“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來完成它的工作，它不像其他框架那樣傾向于死鎖。這個產品更像jQuery而不是jQueryUI，因為您不使用它來創建用戶界面。相反，您可以創建響應事件的代碼——客戶端生成事件，服務器響應這些事件。用戶界面是顯示任何結果的獨立元素。

因為Node.js是如此簡單和快速，社區支持是首屈一指的，你可以在最不可能的地方找到它。有900萬個實例運行在超過5萬個包上。換句話說,Node.jsjs構成了您使用的許多包的基礎。

Node.js,開發人員可以構建:

后端應用程序

博客

客戶管理系統

實時服務，如聊天應用和游戲

REST api

社交網絡應用程序

實用程序和工具

4. Vue.js

Vue是一個多功能的開源JavaScript框架，它是“漸進的”，這意味著與“單一框架”不同，Vue是從底層設計的，以漸進的方式采用。在庫和全功能框架之間擴展，Vue使用“基于組件的開發模型”，可以將Vue組件混合和匹配到項目中。

關鍵的Vue特性包括組件、模板、轉換和雙向數據綁定，但是它最顯著的特性可能是它的“反應性”系統。基本上，reactivity指的是在Vue中自動更新一個JavaScript對象，并且不引人注意地更新Vue模板。

Vue是為任何具有HTML、CSS和JavaScript工作知識的人而構建的。

其他的選擇

別忘了還有更多的JavaScript庫、社區、集合和框架，通常都有特定的焦點區域。

例如，CodePen是一個免費的在線社區，用于測試和展示HTML、CSS和JavaScript的混合?？梢园阉醋魇乔岸嗽O計師和開發人員的社會環境、在線開發社區和具有統一界面的編輯器。每個代碼頁條目都被稱為鋼筆，您可以將它們作為集合的一部分來查看。有些收藏品很奇特，如anime.js(動畫) ，而其他的，比如有趣的js，會有一些你在其他地方看不到的有趣的小部件。它也直接與反應一起工作。

類似地，Jest是一個“零配置”的JavaScript測試解決方案，旨在使用React進行開箱即用的測試。

BIDEO.JS提供了一種顯示全屏背景視頻的方法，例如，如果您正在為旅行社構建一個站點，這將非常有用。

底線

現在應該很清楚了，問題不是找到一個JavaScript庫或框架來幫助您做一些有趣的事情——而是找到一個庫來幫助您完成您需要完成的任務。

此外，您還需要確保您所依賴的庫將在明天仍然存在。沒有人想要重新工作他們的應用程序，因為它使用的JavaScript庫不再可用。盡管現在大多數現代JavaScript庫和框架都非常可靠，但您仍然需要確保它們與用戶所依賴的所有設備和瀏覽器兼容。

玩轉Axure：如何制作驗證碼倒計時？

人人都是產品經理 2018-08-10 15:41:33

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

注冊模塊是每個產品必不可少的一部分，也是大部分產品經理著手設計一個產品時遇到的基礎部分，在這里通過這個教程分享如何使用Axure中的動態面板實現獲取驗證碼倒計時功能。

在開始前我們需要把梳理下思路，簡單的把任務流程理出來，幫助我們理解制作過程中的原理。

先來看看效果：

下圖中左邊為使用倒計時功能時的任務流程，右邊為流程對應的四大部分，每部分有具體的小步驟，接下來會根據每個小步驟進行具體的描述。

1

從元件庫中拖入一個主要按鈕放入畫布空白處，命名為“獲取按鈕”（可以隨意命名）

然后再拖入一個動態面板放入畫布中，命名為“循環面板”，并且雙擊該動態面板，添加一個狀態2“State2”，這里就可以看成‘初始’和‘結束’的“容器”。

接下來創建一個全局變量對該“容器”進行記錄。

為“獲取按鈕”這個元件添加一個交互樣式，該按鈕「禁用」時，填充顏色為灰色。

2

為“獲取按鈕”元件添加用例，當「鼠標單擊時」，設置動作為「設置面板狀態」在動態面板“循環面板”上，選擇狀態「Next」，勾選「向后循環」，「循環間隔」為‘1000’毫秒，取消勾選「首個狀態延時延時1000毫秒切換」。

添加第二個動作「禁用」，選擇“當前元件”。

3

為動態面板“循環面板”的「狀態改變時」添加第一個用例，并給該用例添加條件，條件設置為「變量值」，「TimeValue」“>”「1」。

繼續添加全局變量中的「設置變量值」，勾選「TimeValue」，更改值為[[TimeValue-1]]。

添加第三個動作「設置文本」，勾選“獲取按鈕”，更改值為[[TimeValue]]秒后可重新獲取。

4

為「改變狀態時」添加第二個用例，設置當不滿足第一個用例所設定條件時執行的動作。此處有4個動作，分別是：

第1個動作是「設置文本」為“獲取按鈕”的文字值是“重新發送驗證碼”。

第2個動作是設置全局變量中的「設置變量值」，勾選「TimeValue」，更改值為“60”。

第3個動作「啟用」，勾選“獲取按鈕”。

第4個動作為「設置面板狀態」與動態面板，勾選“循環面板”，選擇「停止循環」。

以上就是所有的制作步驟，最終的效果就像文章開頭中所示的樣子，在這個過程中，我們其實已掌握了兩個重要的知識點：一個是動態面板的循環實現方式，第二個是通過全局變量來設定時間值。

這兩個點在其它地方也會經常用到，掌握后能夠更加靈活運用在其它地方。

希望大家能夠嘗試多練習幾次，幾次嘗試后就會理解其中的關鍵點，也希望大家能夠養成一種習慣，在進行練習前對任務流程進行梳理，這樣對理解邏輯更有幫助。

本文由 @ 杰森 原創發布于人人都是產品經理。未經許可，禁止轉載

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

社交電商只有拼團和砍價？口袋咖啡給你答案

人人都是產品經理 2018-08-10 17:41:58

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

這兩年來，咖啡業不甘寂寞，和互聯網碰撞出的火花越來越多。瑞幸咖啡異軍突起，連咖啡微信關系鏈玩得風生水起，星巴克也牽手阿里巴巴準備收復失地。今天我們就來關注一下連咖啡最近做的一波營銷活動“口袋咖啡館”。

“口袋咖啡館”是連咖啡小程序內新上線的一個功能，據公開報道的數據：

上線首日PV超過420萬，累計開出咖啡館超過52萬個，相當于一天有52萬人開了線上咖啡館。

體驗“口袋咖啡館”之后，我總結成功之處有以下幾點：

1. 情懷切入和個性化展示，實現破冰

相信很多愛喝咖啡的人都曾經有個不成熟的夢想叫做“我要開一個咖啡店”，文藝的音樂，明媚的陽光，飄香的咖啡，過此余生。但是因為資金壓力，生存壓力，咖啡店對大部分人只能說這是一個夢想，或是情懷。

而在線上開一個咖啡店，不用店租，不用進貨囤貨，甚至不會做咖啡業不要緊，把開店的行為壓縮為裝飾店鋪和朋友圈賣咖啡，實現情懷是不是變得毫無壓力和簡單了？

先不管“口袋咖啡”背后利用社交渠道賣咖啡，讓店主成為分銷商的本質，首先“口袋咖啡”抓住了大部分用戶的情感需求，簡化用戶行為，獲得了第一波流量。

“口袋咖啡”可以讓用戶自主地去裝修自己的線上店鋪，讓用戶盡可能地發揮自己的想象，各種奇思妙想發酵，用戶裝修好了，很可能迫不及待地先分享店面給好友。好友一看，有意思，我也玩，這樣就把第一波流量給動起來了，帶入新的流量。

這兩個設計是抓住了用戶的情懷圓夢需要和展示個性化自我的需要，從而獲得最初的流量并開始傳播。

2. 低價單品，獲取流量

光靠情懷和個性化展示，應該是無法保證更大的流量獲取。

口袋咖啡店鋪里的咖啡都是有折扣的，與官方價格相差10多元，甚至還做了一款9元的美式咖啡。分享的文案上也突出了下單9元起的字樣，通過價格對比，突出低價來吸引更多的流量，而且新用戶購買，首單立減9元。

這就將“低價爆款”+“新用戶下單減”結合起來，對于大部分用戶來說，工作日時候不會對咖啡太過挑剔，價格有優惠，我買誰的不是買呢？

而且還是微信好友“開的”咖啡館，情感+好奇心的加持，吸引了又一波流量。

3. 游戲化的任務激勵，環環相扣

“口袋咖啡”設計了一套游戲任務進階提現，通過這樣的模式保持用戶的粘性，讓用戶投入更多的時間和社交關系。這套體系由成長咖啡和網紅指數為目標，設計了一系列的任務讓用戶完成以提高這兩個目標。

成長咖啡相當于貨幣，可以積攢兌換咖啡，獲得的方法是每賣出一杯咖啡獲得0.1杯，攢滿1整備成長咖啡就可去免費兌換。這里對于用戶來說，目標是獲得免費兌換咖啡，而規則就是賣咖啡，為了達到目標，用戶就會去分享，去安利，可能帶來更多的流量；

而網紅指數相當于積分，積分的價值在于解鎖特權，包括更多的商品、裝飾等。以及獲得更高的排名。而這些特權則是可間接有助于提高用戶銷量的，有助于用戶完成“免費兌換咖啡”，獲得網紅指數的方法則是一系列的任務。

目前的任務較少，不知道后續是否會放出更多玩法。

回過頭來，你會發現“口袋咖啡”這一系列打法都是相關聯的，都指向了同一個目標獲得免費咖啡（背后其實是賣出更多咖啡），彼此是有承接關系，形成了有效的循環。

4. 社交互動帶動裂變和變現

連咖啡一直都在嘗試做“基于人際關系鏈”的產品，他們認為這是獲取流量最的工具。在“口袋咖啡”里則明顯地提現這一點。

4.1 土豪榜和點贊榜，記錄好友和你的互動

口袋咖啡有兩個榜單，分別是土豪榜和點贊榜，前者記錄誰買過了你的咖啡，點贊榜則記錄了誰給你點過贊。交易和點贊，一個是實際的消費，一個是情感的激勵，會給用戶產生更大的正向刺激。

4.2 讓用戶產生更多的互動行為

如果用戶在一個產品之上產生的互動行為越多，則用戶和產品的粘性越緊密，用戶主動推薦這個產品的可能性也越大。

如何讓用戶產生更多的互動行為？如何撬動更多的社交鏈條呢？

口袋咖啡準備了3個手段，分別是明星館、附近的館、我去過的館。

明星館，邀請了一些流量明星入駐，有佘詩曼、秦嵐、李誕等，而且佘詩曼、秦嵐還是目前熱播的《延禧攻略》的主演，抓住眼下的新聞熱點，結合明星自帶粉絲的流量，粉絲通過點贊和購買咖啡行為的與明星發生互動。

開一下腦洞，這是不是可以成為另一種形式的明星榜單，各家粉絲通過點贊，買咖啡為自己的愛豆打榜，互相攀比，搞不好可能會成為一個固定的大流量入口。

粉絲組織+明星效應+群體攀比效應=大流量？

這個需要拭目以待。

附近的咖啡館，和微信本身附近的人異曲同工。利用用戶的好奇心驅動，看看附近都有誰在開咖啡館，會不會又好玩的小哥哥小姐姐，點個贊，買個咖啡，也是不錯的。

店主一看有人給我光顧我了，看一眼就在附近，來而不往非禮也，也過去點個贊。一來一往，用戶就在線上咖啡館之間互相流動起來。如果后面官方圍繞這一塊繼續做網站，比如：解鎖特權可以給附近的人推送自己的咖啡，完成某個任務看店主的微信等等，有可能會產生新的興奮點。

當然社交電商里，電商還是初心和本質，社交到底要到什么樣的程度，才能有利于電商而不是起副作用，這個度需要團隊把控。

我去過的，則是將我訪問過的咖啡館沉淀下來，便于后續的訪問，也可以看成團隊為后續的社交互動埋下的伏筆。

連咖啡的一系列動作，個人覺得最終目的是希望把咖啡變成貨幣，不再是人來買咖啡，而是咖啡主動觸達到人。不僅僅依靠傳統的商品-貨幣的交易模式，而是希望代入更多的情感因素、社交元素，通過人與人的關系鏈去獲得更多的流量，并且帶動更大的交易額。

而近期包括送禮，運動步數換購小程序的崛起，越來越的商家開始關注用社交關系來獲客，此前對社交電商的關注更多局限于微商這樣的朋友圈叫賣、拼團、砍價、求復活滿天飛，容易讓用戶產生反感和厭倦。

那么如何讓用戶不反感甚至是主動地貢獻自己的社交關系，則是下一步互聯網公司們重要的課題。

#專欄作家#

肥寒，微信公眾號：chanpingdog，人人都是產品經理專欄作家。九年產品經理。做過數字閱讀，電商，社區，目前致力于在線教育。

本文由 @肥寒 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 unsplash，基于 CC0 協議

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

15個消費心理學理論，為你撥開營銷的迷霧

人人都是產品經理 2018-08-09 16:42:43

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

如何推廣產品，提升銷量的“套路”，我們能在互聯網上翻到很多，而這其中的底層邏輯，始終是依據消費者行為和心理來做調整。本文總結了15個消費心理學的理論，希望對你有幫助~

同志們，好久不見！一個好的產品，加上強大的市場策略，等于“BOOM”！

如何推廣產品，提升銷量的“套路”，我們能在互聯網上翻到很多，而這其中的底層邏輯，始終是依據消費者行為和心理來做調整。在消費者做出購物決策的時候，一定會存在“認知偏見”，太客觀的事情不會很多。

• “認知偏見”，是一個系統性的偏離軌跡，它相對于判斷中的標準、合理性。這種偏離可能來自其他人、特定場景。人們從他們自己的洞察中，創造出自己的“主觀事實”。
• “認知偏見”，消費者在做決策的時候很容易受到它的影響。例如，以下15個消費心理學理論，就是重要的影響因子。

1.模糊效應（Ambiguity effect）：人們傾向于避免選擇未知的選項，似乎每個人都喜歡確定的選項。比如，一個用戶不明白你的產品，或者某個特定的功能，他將不會選擇它。

2.沉錨效應（Anchoring effect）：人們在對某物/人做判斷的時候，容易受第一印象，或第一次獲得的信息支配，就像沉入海底的錨一樣，把人們的思想固定在某處。比如，某消費者第一次看到某產品的價格，那么這個第一印象的價格，將對該消費者產生巨大的影響。

假如，第一次的價格顯示為90元，第二次再見是45元，那么這個45元的價格對該消費者來說，是特別便宜的，他很有可能購買，相反，如果價格一直是45元，那么該消費者并不會感到便宜實惠。

前段時間，我看到一家青年公寓的海報上寫著“······房間天天特價！”這是“沉錨效應”的錯誤應用，這時候的“天天特價”實際上在消費者心里變成了“并不是很特價”，因為對比起來，天天都是一樣的價格，似乎今天也沒有特別優惠。

可憐的是，這張海報估計已展示數月。

3.注意力偏見（Attentional bias）：我們的看法，受我們重復的認識所影響。所以我們常常有這個結論，一個消費者越頻繁地看見你的廣告、消息，他越有可能從你這里產生購買。比如，我們使用“訪客找回”技術在互聯網上投廣告；讓CTA按鈕貫穿整個引導頁面；在線上線下特定區域內，轟炸廣告。

4.可利用性法則（Availability heuristic）：在很多時候，人們只是簡單地根據事情已有的信息，包括回憶、簡單的計算、簡單的總結來確定事情發生的可能性。

比如，由于1929年股市大崩盤的痛苦記憶，許多投資者在災后一直不敢入市，擔心再次蒙受巨損，從而高估股價下跌的概率，等到股價上竄的時候，覺得“這股價虛高，還會跌的”，接著，股價仍然上竄并到高位，投資者們心亂了。

比如，路邊上的“江南皮革廠倒了，老板跟小姨子跑了········”，3折甩賣皮具，想買真皮具的消費者并不會圍觀上去，因為他們很容易簡單地推測出來，這是假的。而上去圍鋪的人多是大媽，只是想買一個便宜包，并不真覺得“皮包如此便宜”。

5.可利用性疊加（Availability cascade）：在一個群體中，如果大部分人主動或者被動相信一個信念、事情，那么這個信念、事情就會變得越來越合理。一句話說就是，只要長時間重復一件事，這件事就會變成事實。

當我們的網站、品牌、產品反復地被討論，我們就成功一半了，即便有存在消極的聲音，也是無害的。三個人，有兩個人贊美，一個人貶損，那么結果等于贊美；三個人，有兩個人貶損，一個人贊美，結果等于貶損。

6.逆火效應（Backfire effect）：當一個錯誤的信息被更正后，如果正確的信息與原本的看法相違背，它反而會加深人們對原本錯誤信息的信任，最終導致，把自己的看法認為成理所當然。當大腦接受一個信息后，便會本能的捍衛它不被其他與之相斥的信息侵犯。

7.基礎概率謬論（Base rate fallacy）：人們要么總是忽略事物的基礎信息，要么總是忽略事物的特別信息。推廣產品，一定不要僅僅展示一堆無聊的信息（型號、數據、功能等），還要展示你的產品在特定的情況下是如何特別工作的，運用案例說明也好，運用用戶評論也好。

8.偏見盲點（Bias blind spot）：人們總是認為自己比別人會更少地受到偏見的影響，或者有能力識別認知偏見。面對自己的愚蠢，人們總是不易察覺。

9.啦啦隊效應（Cheerleader effect）：“群體”“大量”總是對人們更有吸引力，展示產品的時候，盡量多堆數量，堆積如山的產品給消費者的感覺是很好的，且更容易激起購買欲。

10.支持選擇偏誤（Choice-supportive bias）：人們傾向于對自己已作出的決定持積極的態度，哪怕這個決定并不是多優秀。

如果你的消費者作出了一個選擇，鼓勵他，然后他們將會長時間地認為他們做了一個優秀的選擇。在消費者購買產品以后，總是發短信/郵件表示祝賀購買。

11.聚類錯覺（Clustering illusion）：人們傾向于將隨機事件中不可避免的小樣本歸結為某種有意義的規律。

比如，棋牌中的連續勝利，我們歸結為“這是運氣”，連續輸歸結為“這是手背”，實際上，連續一段時間的輸/贏，在長時間賭博中是必然存在的，沒有運氣與手背之言。

如果你想說服你的用戶，請將你的信息、數據放在大數據、大背景、大趨勢之下，這樣，用戶會很容易相信你的陳詞。我們會認為人工智能產品是未來的主流產品，而不會認為低科技含量的產品是未來的主流產品。

12.誘餌效應（decoy effect）：它是在消費品的選擇中被發現的，現在已經被證明是相當普遍的現象。消費者在作出決策時，很少不做對比而直接購買，這時候，商家為了消費者更好更快地做出購買決策，往往會為目標產品提供一個“誘餌”，以促使消費者購買。

比如1，在《經濟學人》雜志的銷售廣告上：

電子版訂閱的價格是59元/期；

印刷版訂閱的價格是125元/期。

是的，這都是很正常的價格，接下來的操作，運用了“誘餌效應”，電子版訂閱+印刷版訂閱，你猜多少錢？

依然125元/期。

比如2，前段時間我去逛ME&CITY，大家知道，一般同一時間在同一家服裝店，很難同時賣給一個顧客兩件商品，尤其是對于男顧客，所以ME&CITY店做了一個活動：

“購買任意一件衣服，再加一元，可獲得純棉襪子一雙！”

這是“誘餌效應”的運用，衣服是目標銷售產品，“1元錢購襪子”是誘餌。類似的操作還有，賣場里的帽子和毛衣是擺放在一起的，標簽上標出的價格分別是：帽子49元，毛衣299元。但是，值得思索的是最后一行字：帽子+毛衣=299元。

13.曝光效應（The exposure theory ）：它是一種心理現象，指我們會偏好自己熟悉的事物，我們把這種只要經常出現就能增加喜歡程度的現象叫做曝光效應。

扎榮茨（Zajonc）曾經做過一個有趣的實驗。他讓一群人觀看某校的畢業紀念冊，并且肯定受試者不認識畢業紀念冊里出現的任何一個人。

看完畢業紀念冊之后再請他們看一些人的相片，有些照片出現了二十幾次，有的出現十幾次，而有的則只出現了一兩次。之后，請看照片的人評價他們對照片的喜愛程度。

結果發現，在畢業紀念冊里出現次數愈高的人，被喜歡的程度也就愈高；他們更喜歡那些看過二十幾次的熟悉照片，而不是只看過幾次的新鮮照片。

也就是說，看的次數增加了喜歡的程度。ps. 對方實在太丑的情況除外。

14.框架效應（Framing effects）：指同一個問題通過兩種不同的表達，會導致不同的決策判斷。

一項相關研究，面向同一群人提出問題：現在，美國正準備對付一種罕見的亞洲疾病，但因為資源有限，所以只能救治一部分人，現有兩種拯救方案可供選擇。

（1）200人將被救治。

（2）600個人中，只有1/3的人能被救治。

問，你愿意選擇方案1還是方案2？結果大部分人傾向選擇方案1，因為方案1給人的感覺是“拯救機會”；方案2給人的感覺是“舍棄”?！吧釛墶币馕吨劳龅娘L險，面對風險，人們是厭惡的。

因此，在日常文案中，我們即使不能給予用戶“獲得感”，也不要展示出“風險感”給用戶。

15.The Adrenaline effect：（ps. 抱歉呀，這個理論我不知道怎么翻譯成中文）大概意思指，用戶對某產品有意圖，但并不一定會想購買，只有當用戶的腎上腺素被激發時，短時間內，迫使用戶做出購買決策。

在銷售中創造出緊迫性，是非常有必要的，創造緊迫性就等于在限定時間內激起用戶的腎上腺素。

該理論建議，在營銷過后的銷售環節，要創造出緊迫性，促使用戶下單，比如，限時折扣、限時搶購、定時開團、倒計時拼單等。

最后，說了這個么多個理論，是不是感覺有點凌亂了，Guys！

通常情況下，消費者在作購買決策的時候，都需要經過3大層面的思考。是的，這是最后一段提綱挈領的話了。

• 技術層面：這個產品是否能滿足我特定的需求？
• 經濟層面：這個產品能滿足我的特定需求，但是，我有足夠的錢來購買嗎？
• 實惠層面：這個產品能滿足我的特定需求，我也有足夠的錢來購買，但是，它在我的選擇決策中，是實惠的嗎？

#專欄作家#

朱小磊，微信公眾號“非主流朱（ID：feizhuliupig）”，人人都是產品經理專欄作家，營銷顧問，曾17歲獨立策劃了一個游戲平臺，月盈利近20萬。擅長以青年消費者為目標群體的市場營銷分析策劃。目前已服務過多個企業，涉及教育產品、營養品、快消品等。

本文原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計閃屏/啟動頁/引導頁制作技巧

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

需要做一個“開屏頁”

“哪個開屏頁”

“帶跳過的哪個”

“帶跳過的。是一頁的那個還是可以滑動的？”

“滑動的”

上面的對話不知道有沒有很熟悉。

我們都知道APP在啟動時會有一些頁面先行展示，例如這樣

通常來說我們會簡單的把它們統稱為“開屏頁”或者“啟動頁”

但實際上,這種統稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴謹?！靶堋睂?

寶們表示很委屈。

其實這些“開屏頁”的交互方式其實并不是完全一樣的,因此也承載著完全不同的功能,有著不同的名字:閃屏 Splash Screen、啟動頁 Launch Screen、引導頁Onboarding Screen。接下來我們就來走進它們的“內心世界”,了解一下它們的真正用法。

01 閃屏 Splash Screen

定義：閃屏是每次啟動過程中展示給用戶的一個過渡頁面，用于減緩用戶在打開應用時等待的焦慮心情。

交互方式：閃屏通常是一張背景圖片，無法進行交互，無法點擊也無法跳轉

劣勢：無法跳轉，只能進行展示作用，無法很好的承載營銷需求

優勢：展示時間不可控

使用建議：

避免包含太多文字字符（閱讀速度慢的話可能還沒看完就關閉了）

不用過去吸引用戶的注意（干擾用戶的本來目的）

不要做廣告（干擾，且不能點擊）

02 啟動頁Launch Screen

定義：啟動頁形式閃屏但擁有交互功能，常用于展示營銷活動廣告圖片并引導用戶點擊

使用示例：常用與展示營銷活動廣告圖片并引導用戶點擊

交互方式：

1、點擊頁面或按鈕進入活動承載頁

2、點擊跳過，跳過啟動頁，進入首頁，或N秒后自動消失

注：由于加載時間不確定，啟動圖通常會緩存并存在下次啟動時使用

03 引導頁Onboarding Screen

定義：用戶安裝或更新后首次啟動時展示數個頁面，常用于介紹應用的核心概念，功能玩法，使用場景，核心變更

使用示例：

交互方式：

1、左右滑動可以切換

2、最后一頁頁面可點擊進入

注：首次打開才出現，之后就不在出現，清除用戶數據，再次打開應用可以看到

使用建議：

1.輕易不要使用引導頁,以免阻礙用戶快速的使用體驗

2.為了降低用戶反感程度,引導頁數通常越少越好(<5)

3.盡量提供“跳過”按鈕

4.每頁的文案不要超過9個字,如果有更多內容可以用小號文字進行輔助說明

(根據愛爾蘭哲學家漢密爾頓觀察發現的7±2效應,一個人的短時記憶至少能回憶出5個字,最多回憶9個,即7±2個。因此展示的文案要控制在9個字以內,超過后用戶容易遺忘、出現記憶偏差。)

劣勢：

增加了用戶進入產品的時間，用戶翻頁過多，可能會失去耐心，降低好感度

04常規的啟動流程

通常來說：開屏三兄弟順序如下：

流程僅是建議的常規流程,通常來說閃屏是基本都有的,而啟動頁和引導頁,如果產品需要,三個流程都走一遍也不是不可以,不過還是要盡量考慮到用戶的忍耐度,不要讓用戶在漫長的“走流程”中失去了最初的興趣。

小結

Appe曾經在《iOS人機交互手冊》里建議:盡量不要展示閃屏或其它啟動流程,避免干擾用戶注意力然而,在馬桶蓋、地板磚甚至是美女身上都能打廣告的今天,啟動頁/閃屏/引導頁這三兄弟自帶的“廣告位”光環,讓產品、運營們對其欲罷不能,幾乎已經成為APP的啟動標配,一起組成了現在常見的啟動流程。它們共同承擔起展示品牌性格,廣告營銷入口,功能介紹與引導的大任。

這讓我想到最近看的一個段子,放出來給大家看看,僅做娛樂。

不過,正所謂存在即合理,既然市面上的啟動流程都是“全套服務”,說明這么做定是符合特定階段的市場需求的,所以作為產品設計師的我們在調侃過之后,還是要做好我們的本職工作:用專業知識解決實際問題?？催^這篇文章后,相信

你又重新認識了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產品、品牌、運營大佬了~

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務