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

人人都是產(chǎn)品經(jīng)理 2018-08-19 15:01:59

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

做產(chǎn)品方案的時(shí)候，我們經(jīng)常會(huì)走進(jìn)死胡同或者跑錯(cuò)路，最后不論是開發(fā)還是市場，對結(jié)果都不滿意，產(chǎn)品自然就成了背鍋俠！但是往往我們出方案的時(shí)候，多想一些問題，或許結(jié)果就不一樣，跟新人交流的時(shí)候，發(fā)現(xiàn)一些能力需要可以單獨(dú)訓(xùn)練，有意識(shí)的去理解一些東西，長期積累就會(huì)有自己的一套解決問題的思路。

1. 辨別真?zhèn)蔚哪芰?

辨別真?zhèn)我簿褪抢仙Ｕ劦恼鎮(zhèn)涡枨蟮哪芰?，在產(chǎn)品經(jīng)理的行業(yè)里，經(jīng)常會(huì)進(jìn)行需求的評(píng)審，需求的界定，看這個(gè)需求是否是真的有效

舉個(gè)例子

行業(yè)：外賣行業(yè)

案例：打包費(fèi)審核的功能

功能出發(fā)點(diǎn)：解決商家亂設(shè)打包費(fèi)的需求

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

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

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

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

辨別真?zhèn)蔚哪芰Σ粌H僅體現(xiàn)在能辨別出來，更多的是能夠用更靈活的方式來解決來自運(yùn)營、消費(fèi)者產(chǎn)生的問題，且不增加過多的額外工作。

2. 找到合適定位的能力

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

案例1：外賣行業(yè)，推薦商家

功能出發(fā)點(diǎn)：外賣行業(yè)的推薦商家，很多事按照細(xì)分的行業(yè)來做的，比如說美團(tuán)跟餓了么的【必吃菜品】【品質(zhì)聯(lián)盟】這些，但是對消費(fèi)者來說，這真的是我想要的選擇么？

解讀：從消費(fèi)者的心理出發(fā)，我去找吃的，可能出于幾點(diǎn)

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

其次還有可能

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

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

（配個(gè)截圖，此功能已實(shí)現(xiàn)，后續(xù)看數(shù)據(jù)情況，再做追蹤）

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

案例2：荔枝FM飛機(jī)稿

出發(fā)點(diǎn)：那是很早以前的一個(gè)版本，因?yàn)椴缓糜?，所以就干脆做一個(gè)交互飛機(jī)稿，當(dāng)時(shí)做的時(shí)候有以下幾個(gè)因素：

• 體驗(yàn)不好，最古老的版本體驗(yàn)非常不爽（詳情可以戳這里：http://www.woshipm.com/ucd/209199.html）
• 當(dāng)時(shí)在做交互設(shè)計(jì)，就嘗試用新的交互設(shè)計(jì)思路去設(shè)計(jì)

解讀：

當(dāng)時(shí)荔枝FM算是國內(nèi)比較早做電臺(tái)的，同期出了喜馬拉雅聽，剛開始也沒有荔枝FM那樣火，但從交互上，主要由兩個(gè)點(diǎn)：

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

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

3. 解決問題的能力

這個(gè)就老生常談了，解決問題的能力體現(xiàn)在對系統(tǒng)的掌握程度和開發(fā)自由度兩個(gè)層面，產(chǎn)品經(jīng)理實(shí)質(zhì)是提供解決方案的，任何需求到手后，我們需要分析如何快速解決該問題。

案例1：招聘面試流程

出發(fā)點(diǎn)：銷售類崗位進(jìn)行招聘時(shí)，都是一大批一大批的面試，一個(gè)人可能同時(shí)面試很多崗位，一個(gè)公司會(huì)面試很多個(gè)求職者，因此提率，對求職者和公司都是最大的需求

解決方案：排隊(duì)叫號(hào)，跟銀行排隊(duì)一樣，針對這個(gè)場景，我們梳理了核心的問題

• 面試人員取號(hào)
• 面試人員查看各崗位當(dāng)前排隊(duì)情況及投遞請求
• 企業(yè)招聘人員查看簡歷并選擇是否面試，對面試的人進(jìn)行初步評(píng)論
• 叫號(hào)及數(shù)據(jù)導(dǎo)出

針對以上四個(gè)問題，設(shè)計(jì)出如下流程（省略取號(hào)的環(huán)節(jié)，主要核心的流程是企業(yè)的發(fā)送通知循環(huán)以及面試后的符合不符合操作循環(huán)）

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

4. 了解數(shù)據(jù)的能力

對于數(shù)據(jù)，很多人應(yīng)該不會(huì)陌生，如何從雜亂的數(shù)據(jù)找到規(guī)律，怎么處理數(shù)據(jù)之間的關(guān)系？

1. 一級(jí)頁面到二級(jí)頁面的流失率和轉(zhuǎn)化率
2. 每個(gè)頁面轉(zhuǎn)化功能的設(shè)計(jì)及數(shù)據(jù)統(tǒng)計(jì)
3. 數(shù)據(jù)解讀

最近在做小程序相關(guān)的項(xiàng)目，把騰訊的數(shù)據(jù)統(tǒng)計(jì)貼上來:

訪問趨勢類：

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

訪問分布：

• access_source_session_cnt 訪問來源分布
• access_staytime_info 訪問時(shí)長分布
• access_depth_info 訪問深度的分布

訪問留存

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

訪問頁面：

• page_path 頁面路徑
• page_visit_pv 訪問次數(shù)
• page_visit_uv 訪問人數(shù)
• page_staytime_pv 次均停留時(shí)長
• entrypage_pv 進(jìn)入頁次數(shù)
• exitpage_pv 退出頁次數(shù)
• page_share_pv 轉(zhuǎn)發(fā)次數(shù)
• page_share_uv 轉(zhuǎn)發(fā)人數(shù)

總結(jié)

產(chǎn)品經(jīng)理從拿到需求開始就需要對需求進(jìn)行分解，判斷到底什么樣的方案可以解決此問題，并結(jié)合當(dāng)前系統(tǒng)的一些功能點(diǎn)，給出最佳的方案；在交互設(shè)計(jì)的時(shí)候是參考競品還是微創(chuàng)新，就看實(shí)際業(yè)務(wù)需求；最后就是核心業(yè)務(wù)梳理，一個(gè)功能的核心業(yè)務(wù)是什么，還有哪些可以搭配讓功能更完善的，考慮進(jìn)去，做產(chǎn)品是一個(gè)分解、組合、刪減、再組合的過程！

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

面向中小企業(yè)SaaS的權(quán)限管理系統(tǒng)

人人都是產(chǎn)品經(jīng)理 2018-08-19 15:02:17

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

本文基于面向某個(gè)垂直行業(yè)的SaaS系統(tǒng)的設(shè)計(jì)經(jīng)驗(yàn)，抽象出一套適合中小企業(yè)的權(quán)限管理體系，目標(biāo)是最大限度保留系統(tǒng)彈性的同時(shí)，把系統(tǒng)復(fù)雜度和開發(fā)成本盡可能降低。enjoy~

面向企業(yè)級(jí)的SaaS（軟件及服務(wù)）系統(tǒng)，由于企業(yè)用戶的規(guī)模和內(nèi)部管理模式千差萬別，設(shè)計(jì)一套具備足夠彈性、符合絕大部分目標(biāo)企業(yè)用戶需求的權(quán)限管理系統(tǒng)，是一個(gè)很大的挑戰(zhàn)。

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

提煉的三個(gè)核心原則：

• 企業(yè)-管理員-普通賬號(hào)三級(jí)權(quán)限
• 功能和數(shù)據(jù)權(quán)限分離
• 部門和角色分離

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

1. 權(quán)限從上到下分為三個(gè)層級(jí)：企業(yè)賬號(hào)（老板賬號(hào)）、管理員賬號(hào)、普通賬號(hào)

對于中小企業(yè)來說，公司的實(shí)際控制人，往往是公司的創(chuàng)始人或自然人大股東，因此企業(yè)賬號(hào)的使用者以及對應(yīng)綁定的手機(jī)號(hào)碼，都是公司的實(shí)際控制人，他應(yīng)該掌握最核心、權(quán)限最大的企業(yè)賬號(hào)，所以也可以稱為“老板賬號(hào)”。

但是在實(shí)際場景中，公司的實(shí)際控制人并不會(huì)直接管理公司的業(yè)務(wù)支撐系統(tǒng)，因此，需要在系統(tǒng)首次部署時(shí)，創(chuàng)建好企業(yè)賬號(hào)，并由企業(yè)賬號(hào)授權(quán)給某一個(gè)或多個(gè)系統(tǒng)管理員，由系統(tǒng)管理員去完成日常的角色創(chuàng)建、員工導(dǎo)入等工作。系統(tǒng)管理員，對應(yīng)的一般就是HR或行政部門的管理人員。當(dāng)然，企業(yè)賬號(hào)的權(quán)限高于管理員賬號(hào)，如果是小微型企業(yè)，也可以由企業(yè)賬號(hào)直接替代管理員賬號(hào)的功能。

除了企業(yè)賬號(hào)和管理員賬號(hào)之外，其他各級(jí)員工所持有的賬號(hào)，都屬于普通賬號(hào)。普通賬號(hào)的部門、角色、數(shù)據(jù)等權(quán)限的設(shè)置，一律由系統(tǒng)管理員配置。

三個(gè)權(quán)限層級(jí)示意圖如下：

在實(shí)際系統(tǒng)中的核心業(yè)務(wù)步驟如下：

（1）企業(yè)購買系統(tǒng)時(shí)，創(chuàng)建一個(gè)企業(yè)賬號(hào)，這個(gè)企業(yè)賬號(hào)綁定的手機(jī)號(hào)碼為公司實(shí)際控制人的手機(jī)號(hào)碼。該手機(jī)號(hào)碼必要時(shí)可以解綁（例如公司實(shí)際控制人變更），由于該功能觸發(fā)頻率很低，因此不需要在前端功能中實(shí)現(xiàn)，只需要在購買協(xié)議中寫明，“購買企業(yè)可以通過書面方式提出企業(yè)賬號(hào)手機(jī)號(hào)碼綁定變更需求”即可。

（2）在部署和培訓(xùn)階段，可指導(dǎo)企業(yè)賬號(hào)持有人創(chuàng)建一個(gè)或多個(gè)管理員賬號(hào)，該賬號(hào)一般授權(quán)給行政總監(jiān)或人力資源總監(jiān)，后續(xù)配置即由管理員賬號(hào)進(jìn)行。

（3）管理員賬號(hào)持有人需要接受系統(tǒng)培訓(xùn)，掌握部門創(chuàng)建、角色創(chuàng)建、功能和數(shù)據(jù)權(quán)限分配等基本操作。管理員所有操作都必須記錄在案，供企業(yè)賬號(hào)持有人監(jiān)督，且管理員操作觸發(fā)異常行為規(guī)則（如大量分配高等級(jí)權(quán)限等）時(shí)，系統(tǒng)會(huì)通過短信方式通知到企業(yè)賬號(hào)持有人，確保企業(yè)賬號(hào)對管理員的全方位掌控。

（4）企業(yè)賬號(hào)可隨時(shí)將管理員賬號(hào)禁用或設(shè)定為離職，但管理員賬號(hào)不可對企業(yè)賬號(hào)進(jìn)行任何配置或操作。

（5）企業(yè)賬號(hào)默認(rèn)擁有所有權(quán)限。

2. 功能權(quán)限和數(shù)據(jù)權(quán)限分離

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

數(shù)據(jù)權(quán)限，定義為若干個(gè)數(shù)據(jù)類型里的具體可見范圍，例如“客戶”就是一個(gè)數(shù)據(jù)類型，它的權(quán)限舉例如“無權(quán)限”、“我的客戶”、“我所在部門的客戶”、“我所在部門及下級(jí)部門的客戶”。

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

可見，通過功能權(quán)限和數(shù)據(jù)權(quán)限的分離和配合，我們在具體的權(quán)限分配上有了非常大的彈性，且在技術(shù)層面的后臺(tái)系統(tǒng)的設(shè)計(jì)上，也非常合理、清晰。

而在具體設(shè)計(jì)上，需要保證以下4點(diǎn)：

1. 正確區(qū)分功能和數(shù)據(jù)，入口性和操作性的都應(yīng)該歸類為功能
2. 正確對數(shù)據(jù)進(jìn)行分類，避免存在分類后的某些數(shù)據(jù)存在交集
3. 數(shù)據(jù)分類到多細(xì)的顆粒度，需要由行業(yè)特性決定
4. 數(shù)據(jù)權(quán)限區(qū)分為查看、編輯和刪除

示例圖如下，由于涉及具體產(chǎn)品，對某些文字進(jìn)行了打碼：

3、部門和角色分離

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

在本設(shè)計(jì)方案中，角色等同于職位，而在許多大型的SaaS系統(tǒng)中，為了更大的靈活性，往往會(huì)把角色和職位分開，但根據(jù)我們的判斷，對于中小企業(yè)，設(shè)定角色一個(gè)就夠了，職位當(dāng)然還存在，但僅僅是一個(gè)不涉及權(quán)限管理的文本title了。

以一個(gè)銷售公司來說，角色可以包括：“渠道專員”、“渠道總監(jiān)”、“銷售專員”、“銷售經(jīng)理”、“總經(jīng)理”等等。

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

具體設(shè)計(jì)上：

1. 最大部門即為公司
2. 管理員賬號(hào)和普通賬號(hào)均可禁用或設(shè)置為離職
3. 不同部門可以配置相同角色
4. 相同角色的功能權(quán)限和數(shù)據(jù)權(quán)限是一樣的

4. 權(quán)限系統(tǒng)和其他功能設(shè)計(jì)的關(guān)系

總結(jié)完權(quán)限系統(tǒng)三個(gè)核心的基本原則后，我們還需要指出一點(diǎn)：權(quán)限系統(tǒng)的設(shè)計(jì)方案，在整個(gè)系統(tǒng)中絕不是孤立的，它能否實(shí)現(xiàn)設(shè)計(jì)目標(biāo)，并和整個(gè)系統(tǒng)完美配合，還需要做到以下幾點(diǎn)：

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

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

最后，權(quán)限變更的記錄和所有賬號(hào)的行為軌跡記錄一樣重要。權(quán)限系統(tǒng)本質(zhì)是進(jìn)行權(quán)力的限制，沒有監(jiān)管的權(quán)力必定是會(huì)失控的。在出現(xiàn)問題的時(shí)候，必須同時(shí)配合權(quán)限變更的記錄、角色變更的記錄和賬號(hào)的行為軌跡記錄進(jìn)行追責(zé)和存證，確保維護(hù)企業(yè)的合法權(quán)益。

總結(jié)

在合理設(shè)計(jì)的前提下，權(quán)限系統(tǒng)也并非越復(fù)雜越好。只有符合目標(biāo)客戶需求并具備最大彈性的權(quán)限系統(tǒng)，才是最好的。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

「網(wǎng)易蝸牛閱讀」和「微信讀書」的寫書評(píng)功能分析

人人都是產(chǎn)品經(jīng)理 2018-08-19 16:05:00

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

一、目的

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

小結(jié)（這個(gè)模塊是做什么的？為什么？）：

從寫書評(píng)方說：

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

從看書評(píng)方來說：

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

從運(yùn)營方來說：

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

四、業(yè)務(wù)流程、業(yè)務(wù)邏輯梳理

功能流程：

1. 入口一：領(lǐng)讀 -> 右上角寫書評(píng)按鈕 -> 寫書評(píng)；
2. 入口二：我的 -> 我的書評(píng) -> 右上角寫書評(píng)按鈕 -> 寫書評(píng)；
3. 入口三：選擇書籍 -> 閱讀書籍 -> 右上角寫書評(píng)按鈕 -> 寫書評(píng)；
4. 入口四：選擇書籍 -> 書評(píng)欄 -> “寫書評(píng)，獲時(shí)長獎(jiǎng)勵(lì)‘輸入框 -> 寫書評(píng)。

四個(gè)入口分別代表四種場景：

• 入口一為領(lǐng)讀人直接發(fā)表文章提供便利；
• 入口二是方便內(nèi)容發(fā)布者對于自己的書評(píng)進(jìn)行編輯管理；
• 入口三提供閱讀中隨時(shí)記錄想法，書評(píng)素材的方式；
• 入口四的獎(jiǎng)勵(lì)文案鼓勵(lì)大家加入寫書評(píng)，加入閱讀，且為閱讀者提供參考。

業(yè)務(wù)邏輯：

小結(jié)：

通過業(yè)務(wù)邏輯的分析可以看到，「網(wǎng)易蝸牛平臺(tái)」，“書評(píng)功能”，書評(píng)發(fā)布方以及書評(píng)閱讀方四方形成一個(gè)完整的循環(huán)，首先平臺(tái)通過優(yōu)秀領(lǐng)讀人的引進(jìn)，為閱讀方提供內(nèi)容，并與之互動(dòng)；再通過激勵(lì)引導(dǎo)，由PGC帶動(dòng)UGC，讓閱讀方成為發(fā)布方，讓用戶生產(chǎn)內(nèi)容，并提供申請領(lǐng)讀人的渠道；然后發(fā)布的內(nèi)容再次與其他閱讀方互動(dòng)，形成一個(gè)完整的循環(huán)生態(tài)系統(tǒng)。

五、功能點(diǎn)對比

小結(jié)：

相同點(diǎn)：通過閱讀中，書本詳情頁進(jìn)入；輸入文字，輸入標(biāo)題，添加筆記/標(biāo)注，插入書籍；字體，副標(biāo)題，符號(hào)，私密發(fā)布，分享功能。（基本功能）

不同點(diǎn)：

• 「網(wǎng)易蝸牛讀書」：標(biāo)題的必要性、添加圖片、多本書籍插入；多樣化的字體排版選項(xiàng)、PC編輯、保存到草稿箱、獎(jiǎng)勵(lì)、撤銷功能。（專業(yè)化需求較強(qiáng)）
• 「微信讀書」：添加表情；引用、星級(jí)評(píng)分。（較為注重簡單，直接，有趣）

六．總結(jié)

抄不抄？

不抄，如果發(fā)現(xiàn)UGC內(nèi)容越來越多，以及專業(yè)化需求提高，可以考慮借鑒「網(wǎng)易蝸牛讀書」中寫書評(píng)的多樣化編輯功能去完善寫想法功能。

原因：

（1）產(chǎn)品定位

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

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

（2）社交屬性

「網(wǎng)易蝸牛讀書」以PGC為主，專業(yè)領(lǐng)讀帶動(dòng)社群發(fā)展，看書評(píng)人與書法發(fā)布方本身可能是粉絲關(guān)系，也可能無任何關(guān)系。而「微信讀書」以UGC位置，好友之間的想法碰撞占到大多數(shù)。

（3）用戶驅(qū)動(dòng)方式

「網(wǎng)易蝸牛讀書」以其特色時(shí)長閱讀，以及興趣導(dǎo)向，領(lǐng)讀人粉絲引進(jìn)為主。而「微信讀書」則有很大部分基于好友之間的競爭關(guān)系，通過虛榮心驅(qū)動(dòng)。

所以對于「微信讀書」來說，暫時(shí)不需要花較大成本引入專業(yè)的PGC內(nèi)容，性價(jià)比不高，與產(chǎn)品定位契合度不高。

本文由 @大明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

年輕時(shí)的碼云 2018-06-15 18:39:08

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

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

1，layui/ layuiAdmin

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

大家有機(jī)會(huì)多支持閑心。。。。

不過后臺(tái)UI是要授權(quán)的哦

---

2，dwz富客戶端框架 - jUI

DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開源框架。 DWZ富客戶端框架設(shè)計(jì)目標(biāo)是簡單實(shí)用、擴(kuò)展方便、快速開發(fā)、RIA思路、輕量級(jí)。

比較成熟，應(yīng)用比較廣泛，官網(wǎng)有整合的應(yīng)用可以借鑒

• DWZ框架 + ThinkPHP 實(shí)現(xiàn)小組工作日志系統(tǒng)
• dwz4j企業(yè)級(jí)Java Web快速開發(fā)框架(Hibernate+Spring+Struts2) + jUI整合應(yīng)用
• dwz4j企業(yè)級(jí)Java Web快速開發(fā)框架(Mybatis + SpringMVC) + jUI整合應(yīng)用
• ThinkPHP + jUI整合應(yīng)用
• Zend Framework + jUI整合應(yīng)用
• YII + jUI整合應(yīng)用

---

3，B-JUI 前端管理框架

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

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

本框架基于Bootstrap前端樣式及jQuery庫開發(fā)，提供豐富的各類組件及UI，封裝有多種組件，及相關(guān)的Ajax請求調(diào)用，并且都以jQuery標(biāo)準(zhǔn)插件的方式組合在一起，所以非常方便進(jìn)行二次開發(fā)或再擴(kuò)展。

兼容性：

• IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未詳細(xì)測試，估計(jì)問題不大，但一些CSS3的效果就不要想了，如圓角、動(dòng)畫什么的）
• 本框架不適用于需要兼容IE6、7的開發(fā)者或使用者。
• PS. 未考慮兼容IE6和IE7，一是因?yàn)锽ootstrap3.2不支持，二是因?yàn)槟壳爸髁飨到y(tǒng)已是WIN7(IE8+)，三是帶WebKit內(nèi)核的瀏覽器大量出現(xiàn)，如360瀏覽器、搜狗瀏覽器、百度瀏覽器等。

---

H+ 后臺(tái)主題UI框架

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

提醒：是收費(fèi)的

---

H-ui.admin

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

---

jQuery MiniUI_快速Web開發(fā)

jQuery MiniUI - 專業(yè)WebUI控件庫。

它能縮短開發(fā)時(shí)間，減少代碼量，使開發(fā)者更專注于業(yè)務(wù)和服務(wù)端，輕松實(shí)現(xiàn)界面開發(fā)，帶來絕佳的用戶體驗(yàn)。

jQuery MiniUI致力降低企業(yè)應(yīng)用的開發(fā)成本，豐富的UI控件、高度的穩(wěn)定性、強(qiáng)大的擴(kuò)展能力和平滑的版本升級(jí)能力，可滿足大部分業(yè)務(wù)場景需求。

缺點(diǎn)：收費(fèi)的！

---

請輸入描述

EasyUI

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

easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。

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

easyui是個(gè)完美支持HTML5網(wǎng)頁的完整框架。

easyui節(jié)省您網(wǎng)頁開發(fā)的時(shí)間和規(guī)模。

easyui很簡單但功能強(qiáng)大的。

• 大家百度去官網(wǎng)下載即可

---

TOP-JUI 

b-jui的作者基于easyui開的的，比easy調(diào)用簡單，很不錯(cuò)的UI，可惜收費(fèi)，不過不算太貴

TopJUI基于版EasyUI構(gòu)建，在使用TopJUI的過程中，除了可以使用TopJUI提供的組件功能外，你還可以根據(jù)實(shí)際情況調(diào)用EasyUI的原生組件功能，滿足各種復(fù)雜的業(yè)務(wù)功能需求開發(fā)

---

Amaze UI 后臺(tái)管理模板

Amaze UI 以移動(dòng)優(yōu)先（Mobile first）為理念，從小屏逐步擴(kuò)展到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流。

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

不過這個(gè)模板現(xiàn)成的東西比較少，復(fù)雜功能還需要自己去完善

---

---

LigerUI

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

---

win10-UI

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

風(fēng)格不一樣，還是挺不錯(cuò)的

---

國外還有很多 bootstrap 后臺(tái)UI

Ace Admin，Metronic等等

---

今天小編就分享到這里

評(píng)論回復(fù)相關(guān)需求，小編會(huì)第一時(shí)間私信您

或者私信回復(fù)“后臺(tái)UI”，自動(dòng)獲取資料，都是小編的血汗哦，本資源只開放一段時(shí)間，趕快獲取哦（是私信不是評(píng)論哦，評(píng)論無法自動(dòng)回復(fù)）

如果你是初級(jí)程序員可以研究別人的代碼提高技術(shù)，如果你喜歡搞網(wǎng)盟或者外包，可以讓你快速建站，還等什么趕快關(guān)注吧，我們會(huì)持續(xù)輸出相關(guān)資源

---

資源來自互聯(lián)網(wǎng) 僅供學(xué)習(xí)研究之用，不得用于商業(yè)，請?jiān)?4小時(shí)內(nèi)刪除！

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

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

實(shí)例分析拆解：如何設(shè)計(jì)登錄注冊？

人人都是產(chǎn)品經(jīng)理 2018-08-09 18:42:15

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

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

一、立項(xiàng)背景

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

初期主攻社交，希望可以沉淀用戶信息，手機(jī)賬號(hào)會(huì)是第一優(yōu)先選擇，當(dāng)時(shí)的方案是手機(jī)號(hào)注冊+賬號(hào)密碼登錄/第三登錄+立刻綁定手機(jī)賬號(hào)。

如你日常體驗(yàn)?zāi)菢樱谌降卿?立刻綁定手機(jī)的方式，直接抵消了第三方登錄的便利，比直接手機(jī)號(hào)注冊更麻煩。而且，設(shè)計(jì)上，手機(jī)號(hào)注冊需要設(shè)置兩次密碼，密碼需要一致；設(shè)置之后，還得進(jìn)入登錄界面，再次填寫賬號(hào)密碼，正確匹配才可以進(jìn)入APP。

總的來說，用戶進(jìn)入APP的路徑相當(dāng)長，步驟多，用戶體驗(yàn)低分。

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

二、需求分析

從業(yè)務(wù)發(fā)展趨勢來看，微信會(huì)是重要的用戶來源，后續(xù)會(huì)布局更多的微信運(yùn)營活動(dòng)，和商城小程序，設(shè)計(jì)引流到APP，需重點(diǎn)突出微信登錄。

而商城交易需要保證安全性，同時(shí)兼容老用戶，手機(jī)注冊密碼登錄必不可少?？紤]到用戶文化水平，和互聯(lián)網(wǎng)產(chǎn)品使用習(xí)慣，需要在常規(guī)的基礎(chǔ)上做簡化。

第三方登錄需要在關(guān)鍵點(diǎn)綁定，商城推廣員提現(xiàn)時(shí)變更銀行卡，需加以驗(yàn)證身份。

新用戶剛進(jìn)來，可以先瀏覽熟悉產(chǎn)品內(nèi)容，在需要身份信息時(shí)，再進(jìn)行引導(dǎo)登錄。

三、功能點(diǎn)梳理

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

賬戶體系配套：關(guān)鍵點(diǎn)引導(dǎo)綁定手機(jī)、關(guān)鍵點(diǎn)強(qiáng)制綁定手機(jī)、驗(yàn)證碼驗(yàn)證賬號(hào)、賬號(hào)相互綁定。

細(xì)節(jié)功能點(diǎn)見下方的賬戶體系功能點(diǎn)梳理圖。

四、流程圖（登錄注冊）

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

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

五、關(guān)鍵頁面交互設(shè)計(jì)

登錄注冊體系將包含五個(gè)部分，主界面、驗(yàn)證碼登錄/注冊、密碼登錄、忘記密碼和新用戶注冊，在實(shí)際流程操作中會(huì)根據(jù)用戶的選擇，和系統(tǒng)的判斷進(jìn)行切換。賬戶體系的配套將會(huì)略過，以下是登錄注冊的頁面交互設(shè)計(jì)、設(shè)計(jì)考量和功能點(diǎn)介紹。

1.主界面

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

2.驗(yàn)證碼登錄/注冊

（1）設(shè)計(jì)解析

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

其實(shí)基于驗(yàn)證碼到達(dá)率和安全性，我考慮過換移動(dòng)認(rèn)證，就是手機(jī)號(hào)碼一鍵登錄，無需密碼跟驗(yàn)證碼?？上?shí)際接洽的時(shí)候行不通，而放棄了，文本會(huì)介紹下這個(gè)事情。

（2）設(shè)計(jì)點(diǎn)

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

3.密碼登錄

（1）設(shè)計(jì)解析

密碼登錄考慮到向后兼容，老用戶的賬號(hào)以密碼登錄；也是適應(yīng)本期的新用戶注冊。

同時(shí)標(biāo)配忘記密碼，也可切換新用戶注冊，或驗(yàn)證碼登錄，這些元素的布置考慮，是基于流程的。

密碼的輸入，其實(shí)正如設(shè)置密碼，應(yīng)該做格式限制。但是因?yàn)榈谝话鏇]限制，不清楚用戶設(shè)置了什么，所以此處不能輕易填坑。

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

（2）流程

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

正常流程是：輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->登錄成功。

異常流程是：

• 輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->提醒“未注冊”->點(diǎn)擊新用戶注冊or返回上一級(jí)驗(yàn)證碼登錄/注冊。
• 輸入手機(jī)號(hào)->輸入密碼->點(diǎn)擊登錄->提醒“未注冊”->賬號(hào)或密碼不對->重新輸入or忘記密碼or驗(yàn)證碼登錄。

4.忘記密碼

（1）設(shè)計(jì)解析

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

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

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

（2）設(shè)計(jì)點(diǎn)：

驗(yàn)證賬號(hào)：常規(guī)的做法，先驗(yàn)證碼驗(yàn)證手機(jī)號(hào)，再下一步設(shè)置密碼。

有些APP會(huì)將驗(yàn)證賬號(hào)跟設(shè)置密碼放在同一個(gè)頁面，其實(shí)拆開會(huì)更清晰。而且，驗(yàn)證手機(jī)號(hào)碼步驟復(fù)用率是很高的，比如，可以復(fù)用到推廣員更改綁定銀行卡時(shí)，作為賬號(hào)驗(yàn)證。

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

重復(fù)兩次數(shù)據(jù)，再次校驗(yàn)肯定更穩(wěn)妥，但是登錄成本提高了，以我們用戶的耐心，我們的產(chǎn)品就沒必要承擔(dān)這個(gè)教育成本了。如果說擔(dān)心手誤輸錯(cuò)了的，可以用驗(yàn)證碼登錄的，再不濟(jì)可以用找回密碼的。但是大多數(shù)用戶其實(shí)只考慮本次能快點(diǎn)進(jìn)入就好。

5.新用戶注冊

（1）設(shè)計(jì)解析

新用戶注冊界面近乎跟忘記密碼是一樣的流程，區(qū)別在點(diǎn)擊獲取驗(yàn)證碼，此處的異常流程是該賬號(hào)已存在。此處設(shè)置優(yōu)化的流程，判斷是已有賬號(hào)之后，會(huì)直接跳轉(zhuǎn)到驗(yàn)證碼登錄/注冊界面處，直接獲取已填寫的手機(jī)號(hào)碼，驗(yàn)證就行，對新用戶盡量友好。

經(jīng)過前面的界面篩選，此處的賬號(hào)不存在的發(fā)生概率很少，但是作為關(guān)鍵流程而言，完整性是必要的。

（2）移動(dòng)認(rèn)證

文內(nèi)留個(gè)懸念要談?wù)勔苿?dòng)認(rèn)證，移動(dòng)認(rèn)證是什么？最直接的體驗(yàn)是，無需輸入任何數(shù)據(jù)，直接點(diǎn)擊授權(quán)就登錄。是不是很黑科技？！ 但是為什么最終放棄了呢，請聽細(xì)講。

理想情況：

移動(dòng)認(rèn)證是運(yùn)營商移動(dòng)提供的，基于手機(jī)sim卡和移動(dòng)網(wǎng)絡(luò)直接認(rèn)證登錄的技術(shù)，米家、愛回收跟同花順應(yīng)用在了自家APP里。當(dāng)時(shí)上手體驗(yàn)，驚艷，簡直零感登錄；況且移動(dòng)官網(wǎng)也有免費(fèi)的sdk，更是竊喜。以移動(dòng)認(rèn)證為主登錄的原型設(shè)計(jì)完畢，就立刻接洽移動(dòng)認(rèn)證sdk的接入。

現(xiàn)實(shí)情況：

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

移動(dòng)認(rèn)證的原理是基于移動(dòng)網(wǎng)絡(luò)通信的。首先基于sim卡識(shí)別本機(jī)號(hào)碼，在移動(dòng)網(wǎng)絡(luò)開啟的前提下傳輸信息以授權(quán)通過，此時(shí)可順利登陸；但是如果沒開移動(dòng)網(wǎng)絡(luò)，就沒轍了；如果WiFi跟移動(dòng)網(wǎng)絡(luò)同開，以WiFi為主，那將強(qiáng)制占道先驗(yàn)證再釋放WiFi。如果移動(dòng)網(wǎng)絡(luò)通信不成，那就通過短信收發(fā)來完成數(shù)據(jù)傳輸。

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

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

本文由 @閱天 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議

10個(gè)基于web的JavaScript最優(yōu)秀的庫和框架

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

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

JavaScript庫和框架之間的關(guān)鍵區(qū)別在于，庫由應(yīng)用程序可以調(diào)用的函數(shù)組成，用于執(zhí)行任務(wù)，而框架定義了開發(fā)人員如何設(shè)計(jì)應(yīng)用程序。換句話說，框架調(diào)用應(yīng)用程序代碼，而不是反過來。當(dāng)然，開發(fā)人員仍然需要庫來使用JavaScript完成web上的基本任務(wù)。

JavaScript Libraries

1. D3.js

許多現(xiàn)代網(wǎng)站都是數(shù)據(jù)驅(qū)動(dòng)的。例如，新聞?wù)军c(diǎn)必須不斷刷新它們的內(nèi)容，因此不可能每隔幾秒鐘重新配置設(shè)置以支持這些更改。數(shù)據(jù)驅(qū)動(dòng)文檔，或D3。庫的獨(dú)特之處在于它把數(shù)據(jù)放在首位。下面的截屏顯示了在D3中可以找到的許多數(shù)據(jù)演示中的一些。

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

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

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

2. jQuery

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

jQuery非常容易學(xué)習(xí)。它提供的示例比大多數(shù)庫都多，所以您很有可能會(huì)找到一個(gè)示例來演示如何完成特定的任務(wù)。

jQuery非常快。因?yàn)樗鼘Ｗ⒂诔錾貓?zhí)行特定的任務(wù)，所以jQuery使快速執(zhí)行這些任務(wù)成為可能。

jQuery擁有龐大的安裝基礎(chǔ)。它還擁有大量的社區(qū)支持和項(xiàng)目貢獻(xiàn)者。

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

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

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

3. jQuery UI

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

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

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

jQuery庫組的一個(gè)問題是它們變得非常大。有時(shí)候，一個(gè)庫的特性太豐富了。JQuery庫的大小會(huì)使它們在較小的設(shè)備上加載速度變慢?？梢允褂锰娲牡谌綆?，如Granim.js和Multiple.js的出現(xiàn)提供了jQuery特性的子集，有時(shí)還提供了一組有重點(diǎn)的附加功能特性，加載時(shí)間大大加快。

4. Parsley

表單驗(yàn)證是一項(xiàng)重要的任務(wù)。因?yàn)楝F(xiàn)在的數(shù)據(jù)經(jīng)常被機(jī)器分析，所以干凈的數(shù)據(jù)比以往任何時(shí)候都更重要。事后清理數(shù)據(jù)是費(fèi)時(shí)的，而且從沒有像讓用戶首先提供正確的信息那樣準(zhǔn)確。

與任何其他JavaScript庫相比，Parsley提供了更多的表單驗(yàn)證技術(shù)。你可以選擇你需要的驗(yàn)證級(jí)別，但它們可能會(huì)變得非常復(fù)雜：

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

5. QUnit

許多庫提供的測試功能有很多不足之處。即使您使用腳本，手動(dòng)測試復(fù)雜的應(yīng)用程序也會(huì)很麻煩，而且需要花費(fèi)大量的時(shí)間——如果它能找到所有的錯(cuò)誤的話。

QUnit是用于JavaScript的幾個(gè)單元測試庫之一。雖然有些人可能會(huì)認(rèn)為它有點(diǎn)過時(shí)，但它是相對全面的，并且具有強(qiáng)大的社區(qū)支持和短的學(xué)習(xí)曲線。QUnit站點(diǎn)提供了豐富的入門信息，包括關(guān)于單元測試的完整教程。

6. React

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

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

JavaScript Frameworks（框架）

1. Angular

Angular framewor框架使作為MVC的控制器部分?jǐn)U展HTML成為可能?？刂破魇荄OM組件背后的行為。有了 Angular，就有可能以一種既自然又直接的方式創(chuàng)造新的行為。這些擴(kuò)展最終看起來像是HTML的附加部分，而不是固定的東西。 Angular 網(wǎng)站明確了使用該產(chǎn)品的兩個(gè)基本原因：“速度和性能”和“難以置信的工具”。

然而，編碼可能會(huì)變得復(fù)雜，這個(gè)框架可能更適合大企業(yè)而不是小創(chuàng)業(yè)公司。即使是 Angular 站點(diǎn)上的簡單示例也依賴于快速創(chuàng)建復(fù)雜性的多個(gè)文件。值得注意的是， Angular framewor的版本也依賴于TypeScript，而不是純JavaScript，這增加了學(xué)習(xí)曲線，但提供了可擴(kuò)展性。

幸運(yùn)的是，該軟件附帶了大量教程，如本文所示，這將使有經(jīng)驗(yàn)的開發(fā)人員更容易快速地開始工作。

2. Ember.js

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

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

盡管有它這么給力，Ember.js的快速入門教程只需要5分鐘就可以完成。當(dāng)然，標(biāo)準(zhǔn)教程需要的時(shí)間要長得多，但是能產(chǎn)生更多受人尊敬的結(jié)果，如下所示：

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

3. Node.js

Node.js是一個(gè)異步的、事件驅(qū)動(dòng)的JavaScript運(yùn)行時(shí)，具有一些獨(dú)特的特性。首先，如果它沒有工作可做，它只是“去睡覺”。這聽起來并不是什么大問題，但是如果你在公共云上托管你的網(wǎng)站，“讓它休眠”可以幫你省下一大筆錢——可能是很多錢。此外,由于Node.js不需要鎖來完成它的工作，它不像其他框架那樣傾向于死鎖。這個(gè)產(chǎn)品更像jQuery而不是jQueryUI，因?yàn)槟皇褂盟鼇韯?chuàng)建用戶界面。相反，您可以創(chuàng)建響應(yīng)事件的代碼——客戶端生成事件，服務(wù)器響應(yīng)這些事件。用戶界面是顯示任何結(jié)果的獨(dú)立元素。

因?yàn)镹ode.js是如此簡單和快速，社區(qū)支持是首屈一指的，你可以在最不可能的地方找到它。有900萬個(gè)實(shí)例運(yùn)行在超過5萬個(gè)包上。換句話說,Node.jsjs構(gòu)成了您使用的許多包的基礎(chǔ)。

Node.js,開發(fā)人員可以構(gòu)建:

后端應(yīng)用程序

博客

客戶管理系統(tǒng)

實(shí)時(shí)服務(wù)，如聊天應(yīng)用和游戲

REST api

社交網(wǎng)絡(luò)應(yīng)用程序

實(shí)用程序和工具

4. Vue.js

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

關(guān)鍵的Vue特性包括組件、模板、轉(zhuǎn)換和雙向數(shù)據(jù)綁定，但是它最顯著的特性可能是它的“反應(yīng)性”系統(tǒng)。基本上，reactivity指的是在Vue中自動(dòng)更新一個(gè)JavaScript對象，并且不引人注意地更新Vue模板。

Vue是為任何具有HTML、CSS和JavaScript工作知識(shí)的人而構(gòu)建的。

其他的選擇

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

例如，CodePen是一個(gè)免費(fèi)的在線社區(qū)，用于測試和展示HTML、CSS和JavaScript的混合。可以把它看作是前端設(shè)計(jì)師和開發(fā)人員的社會(huì)環(huán)境、在線開發(fā)社區(qū)和具有統(tǒng)一界面的編輯器。每個(gè)代碼頁條目都被稱為鋼筆，您可以將它們作為集合的一部分來查看。有些收藏品很奇特，如anime.js(動(dòng)畫) ，而其他的，比如有趣的js，會(huì)有一些你在其他地方看不到的有趣的小部件。它也直接與反應(yīng)一起工作。

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

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

底線

現(xiàn)在應(yīng)該很清楚了，問題不是找到一個(gè)JavaScript庫或框架來幫助您做一些有趣的事情——而是找到一個(gè)庫來幫助您完成您需要完成的任務(wù)。

此外，您還需要確保您所依賴的庫將在明天仍然存在。沒有人想要重新工作他們的應(yīng)用程序，因?yàn)樗褂玫腏avaScript庫不再可用。盡管現(xiàn)在大多數(shù)現(xiàn)代JavaScript庫和框架都非?？煽?，但您仍然需要確保它們與用戶所依賴的所有設(shè)備和瀏覽器兼容。

玩轉(zhuǎn)Axure：如何制作驗(yàn)證碼倒計(jì)時(shí)？

人人都是產(chǎn)品經(jīng)理 2018-08-10 15:41:33

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

注冊模塊是每個(gè)產(chǎn)品必不可少的一部分，也是大部分產(chǎn)品經(jīng)理著手設(shè)計(jì)一個(gè)產(chǎn)品時(shí)遇到的基礎(chǔ)部分，在這里通過這個(gè)教程分享如何使用Axure中的動(dòng)態(tài)面板實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)功能。

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

先來看看效果：

下圖中左邊為使用倒計(jì)時(shí)功能時(shí)的任務(wù)流程，右邊為流程對應(yīng)的四大部分，每部分有具體的小步驟，接下來會(huì)根據(jù)每個(gè)小步驟進(jìn)行具體的描述。

1

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

然后再拖入一個(gè)動(dòng)態(tài)面板放入畫布中，命名為“循環(huán)面板”，并且雙擊該動(dòng)態(tài)面板，添加一個(gè)狀態(tài)2“State2”，這里就可以看成‘初始’和‘結(jié)束’的“容器”。

接下來創(chuàng)建一個(gè)全局變量對該“容器”進(jìn)行記錄。

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

2

為“獲取按鈕”元件添加用例，當(dāng)「鼠標(biāo)單擊時(shí)」，設(shè)置動(dòng)作為「設(shè)置面板狀態(tài)」在動(dòng)態(tài)面板“循環(huán)面板”上，選擇狀態(tài)「Next」，勾選「向后循環(huán)」，「循環(huán)間隔」為‘1000’毫秒，取消勾選「首個(gè)狀態(tài)延時(shí)延時(shí)1000毫秒切換」。

添加第二個(gè)動(dòng)作「禁用」，選擇“當(dāng)前元件”。

3

為動(dòng)態(tài)面板“循環(huán)面板”的「狀態(tài)改變時(shí)」添加第一個(gè)用例，并給該用例添加條件，條件設(shè)置為「變量值」，「TimeValue」“>”「1」。

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

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

4

為「改變狀態(tài)時(shí)」添加第二個(gè)用例，設(shè)置當(dāng)不滿足第一個(gè)用例所設(shè)定條件時(shí)執(zhí)行的動(dòng)作。此處有4個(gè)動(dòng)作，分別是：

第1個(gè)動(dòng)作是「設(shè)置文本」為“獲取按鈕”的文字值是“重新發(fā)送驗(yàn)證碼”。

第2個(gè)動(dòng)作是設(shè)置全局變量中的「設(shè)置變量值」，勾選「TimeValue」，更改值為“60”。

第3個(gè)動(dòng)作「啟用」，勾選“獲取按鈕”。

第4個(gè)動(dòng)作為「設(shè)置面板狀態(tài)」與動(dòng)態(tài)面板，勾選“循環(huán)面板”，選擇「停止循環(huán)」。

以上就是所有的制作步驟，最終的效果就像文章開頭中所示的樣子，在這個(gè)過程中，我們其實(shí)已掌握了兩個(gè)重要的知識(shí)點(diǎn)：一個(gè)是動(dòng)態(tài)面板的循環(huán)實(shí)現(xiàn)方式，第二個(gè)是通過全局變量來設(shè)定時(shí)間值。

這兩個(gè)點(diǎn)在其它地方也會(huì)經(jīng)常用到，掌握后能夠更加靈活運(yùn)用在其它地方。

希望大家能夠嘗試多練習(xí)幾次，幾次嘗試后就會(huì)理解其中的關(guān)鍵點(diǎn)，也希望大家能夠養(yǎng)成一種習(xí)慣，在進(jìn)行練習(xí)前對任務(wù)流程進(jìn)行梳理，這樣對理解邏輯更有幫助。

本文由 @ 杰森 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

社交電商只有拼團(tuán)和砍價(jià)？口袋咖啡給你答案

人人都是產(chǎn)品經(jīng)理 2018-08-10 17:41:58

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

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

“口袋咖啡館”是連咖啡小程序內(nèi)新上線的一個(gè)功能，據(jù)公開報(bào)道的數(shù)據(jù)：

上線首日PV超過420萬，累計(jì)開出咖啡館超過52萬個(gè)，相當(dāng)于一天有52萬人開了線上咖啡館。

體驗(yàn)“口袋咖啡館”之后，我總結(jié)成功之處有以下幾點(diǎn)：

1. 情懷切入和個(gè)性化展示，實(shí)現(xiàn)破冰

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

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

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

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

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

2. 低價(jià)單品，獲取流量

光靠情懷和個(gè)性化展示，應(yīng)該是無法保證更大的流量獲取。

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

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

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

3. 游戲化的任務(wù)激勵(lì)，環(huán)環(huán)相扣

“口袋咖啡”設(shè)計(jì)了一套游戲任務(wù)進(jìn)階提現(xiàn)，通過這樣的模式保持用戶的粘性，讓用戶投入更多的時(shí)間和社交關(guān)系。這套體系由成長咖啡和網(wǎng)紅指數(shù)為目標(biāo)，設(shè)計(jì)了一系列的任務(wù)讓用戶完成以提高這兩個(gè)目標(biāo)。

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

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

目前的任務(wù)較少，不知道后續(xù)是否會(huì)放出更多玩法。

回過頭來，你會(huì)發(fā)現(xiàn)“口袋咖啡”這一系列打法都是相關(guān)聯(lián)的，都指向了同一個(gè)目標(biāo)獲得免費(fèi)咖啡（背后其實(shí)是賣出更多咖啡），彼此是有承接關(guān)系，形成了有效的循環(huán)。

4. 社交互動(dòng)帶動(dòng)裂變和變現(xiàn)

連咖啡一直都在嘗試做“基于人際關(guān)系鏈”的產(chǎn)品，他們認(rèn)為這是獲取流量最的工具。在“口袋咖啡”里則明顯地提現(xiàn)這一點(diǎn)。

4.1 土豪榜和點(diǎn)贊榜，記錄好友和你的互動(dòng)

口袋咖啡有兩個(gè)榜單，分別是土豪榜和點(diǎn)贊榜，前者記錄誰買過了你的咖啡，點(diǎn)贊榜則記錄了誰給你點(diǎn)過贊。交易和點(diǎn)贊，一個(gè)是實(shí)際的消費(fèi)，一個(gè)是情感的激勵(lì)，會(huì)給用戶產(chǎn)生更大的正向刺激。

4.2 讓用戶產(chǎn)生更多的互動(dòng)行為

如果用戶在一個(gè)產(chǎn)品之上產(chǎn)生的互動(dòng)行為越多，則用戶和產(chǎn)品的粘性越緊密，用戶主動(dòng)推薦這個(gè)產(chǎn)品的可能性也越大。

如何讓用戶產(chǎn)生更多的互動(dòng)行為？如何撬動(dòng)更多的社交鏈條呢？

口袋咖啡準(zhǔn)備了3個(gè)手段，分別是明星館、附近的館、我去過的館。

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

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

粉絲組織+明星效應(yīng)+群體攀比效應(yīng)=大流量？

這個(gè)需要拭目以待。

附近的咖啡館，和微信本身附近的人異曲同工。利用用戶的好奇心驅(qū)動(dòng)，看看附近都有誰在開咖啡館，會(huì)不會(huì)又好玩的小哥哥小姐姐，點(diǎn)個(gè)贊，買個(gè)咖啡，也是不錯(cuò)的。

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

當(dāng)然社交電商里，電商還是初心和本質(zhì)，社交到底要到什么樣的程度，才能有利于電商而不是起副作用，這個(gè)度需要團(tuán)隊(duì)把控。

我去過的，則是將我訪問過的咖啡館沉淀下來，便于后續(xù)的訪問，也可以看成團(tuán)隊(duì)為后續(xù)的社交互動(dòng)埋下的伏筆。

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

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

那么如何讓用戶不反感甚至是主動(dòng)地貢獻(xiàn)自己的社交關(guān)系，則是下一步互聯(lián)網(wǎng)公司們重要的課題。

#專欄作家#

肥寒，微信公眾號(hào)：chanpingdog，人人都是產(chǎn)品經(jīng)理專欄作家。九年產(chǎn)品經(jīng)理。做過數(shù)字閱讀，電商，社區(qū)，目前致力于在線教育。

本文由 @肥寒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 unsplash，基于 CC0 協(xié)議

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

15個(gè)消費(fèi)心理學(xué)理論，為你撥開營銷的迷霧

人人都是產(chǎn)品經(jīng)理 2018-08-09 16:42:43

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

如何推廣產(chǎn)品，提升銷量的“套路”，我們能在互聯(lián)網(wǎng)上翻到很多，而這其中的底層邏輯，始終是依據(jù)消費(fèi)者行為和心理來做調(diào)整。本文總結(jié)了15個(gè)消費(fèi)心理學(xué)的理論，希望對你有幫助~

同志們，好久不見！一個(gè)好的產(chǎn)品，加上強(qiáng)大的市場策略，等于“BOOM”！

如何推廣產(chǎn)品，提升銷量的“套路”，我們能在互聯(lián)網(wǎng)上翻到很多，而這其中的底層邏輯，始終是依據(jù)消費(fèi)者行為和心理來做調(diào)整。在消費(fèi)者做出購物決策的時(shí)候，一定會(huì)存在“認(rèn)知偏見”，太客觀的事情不會(huì)很多。

• “認(rèn)知偏見”，是一個(gè)系統(tǒng)性的偏離軌跡，它相對于判斷中的標(biāo)準(zhǔn)、合理性。這種偏離可能來自其他人、特定場景。人們從他們自己的洞察中，創(chuàng)造出自己的“主觀事實(shí)”。
• “認(rèn)知偏見”，消費(fèi)者在做決策的時(shí)候很容易受到它的影響。例如，以下15個(gè)消費(fèi)心理學(xué)理論，就是重要的影響因子。

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

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

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

前段時(shí)間，我看到一家青年公寓的海報(bào)上寫著“······房間天天特價(jià)！”這是“沉錨效應(yīng)”的錯(cuò)誤應(yīng)用，這時(shí)候的“天天特價(jià)”實(shí)際上在消費(fèi)者心里變成了“并不是很特價(jià)”，因?yàn)閷Ρ绕饋?，天天都是一樣的價(jià)格，似乎今天也沒有特別優(yōu)惠。

可憐的是，這張海報(bào)估計(jì)已展示數(shù)月。

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

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

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

比如，路邊上的“江南皮革廠倒了，老板跟小姨子跑了········”，3折甩賣皮具，想買真皮具的消費(fèi)者并不會(huì)圍觀上去，因?yàn)樗麄兒苋菀缀唵蔚赝茰y出來，這是假的。而上去圍鋪的人多是大媽，只是想買一個(gè)便宜包，并不真覺得“皮包如此便宜”。

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

當(dāng)我們的網(wǎng)站、品牌、產(chǎn)品反復(fù)地被討論，我們就成功一半了，即便有存在消極的聲音，也是無害的。三個(gè)人，有兩個(gè)人贊美，一個(gè)人貶損，那么結(jié)果等于贊美；三個(gè)人，有兩個(gè)人貶損，一個(gè)人贊美，結(jié)果等于貶損。

6.逆火效應(yīng)（Backfire effect）：當(dāng)一個(gè)錯(cuò)誤的信息被更正后，如果正確的信息與原本的看法相違背，它反而會(huì)加深人們對原本錯(cuò)誤信息的信任，最終導(dǎo)致，把自己的看法認(rèn)為成理所當(dāng)然。當(dāng)大腦接受一個(gè)信息后，便會(huì)本能的捍衛(wèi)它不被其他與之相斥的信息侵犯。

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

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

9.啦啦隊(duì)效應(yīng)（Cheerleader effect）：“群體”“大量”總是對人們更有吸引力，展示產(chǎn)品的時(shí)候，盡量多堆數(shù)量，堆積如山的產(chǎn)品給消費(fèi)者的感覺是很好的，且更容易激起購買欲。

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

如果你的消費(fèi)者作出了一個(gè)選擇，鼓勵(lì)他，然后他們將會(huì)長時(shí)間地認(rèn)為他們做了一個(gè)優(yōu)秀的選擇。在消費(fèi)者購買產(chǎn)品以后，總是發(fā)短信/郵件表示祝賀購買。

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

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

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

12.誘餌效應(yīng)（decoy effect）：它是在消費(fèi)品的選擇中被發(fā)現(xiàn)的，現(xiàn)在已經(jīng)被證明是相當(dāng)普遍的現(xiàn)象。消費(fèi)者在作出決策時(shí)，很少不做對比而直接購買，這時(shí)候，商家為了消費(fèi)者更好更快地做出購買決策，往往會(huì)為目標(biāo)產(chǎn)品提供一個(gè)“誘餌”，以促使消費(fèi)者購買。

比如1，在《經(jīng)濟(jì)學(xué)人》雜志的銷售廣告上：

電子版訂閱的價(jià)格是59元/期；

印刷版訂閱的價(jià)格是125元/期。

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

依然125元/期。

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

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

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

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

扎榮茨（Zajonc）曾經(jīng)做過一個(gè)有趣的實(shí)驗(yàn)。他讓一群人觀看某校的畢業(yè)紀(jì)念冊，并且肯定受試者不認(rèn)識(shí)畢業(yè)紀(jì)念冊里出現(xiàn)的任何一個(gè)人。

看完畢業(yè)紀(jì)念冊之后再請他們看一些人的相片，有些照片出現(xiàn)了二十幾次，有的出現(xiàn)十幾次，而有的則只出現(xiàn)了一兩次。之后，請看照片的人評(píng)價(jià)他們對照片的喜愛程度。

結(jié)果發(fā)現(xiàn)，在畢業(yè)紀(jì)念冊里出現(xiàn)次數(shù)愈高的人，被喜歡的程度也就愈高；他們更喜歡那些看過二十幾次的熟悉照片，而不是只看過幾次的新鮮照片。

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

14.框架效應(yīng)（Framing effects）：指同一個(gè)問題通過兩種不同的表達(dá)，會(huì)導(dǎo)致不同的決策判斷。

一項(xiàng)相關(guān)研究，面向同一群人提出問題：現(xiàn)在，美國正準(zhǔn)備對付一種罕見的亞洲疾病，但因?yàn)橘Y源有限，所以只能救治一部分人，現(xiàn)有兩種拯救方案可供選擇。

（1）200人將被救治。

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

問，你愿意選擇方案1還是方案2？結(jié)果大部分人傾向選擇方案1，因?yàn)榉桨?給人的感覺是“拯救機(jī)會(huì)”；方案2給人的感覺是“舍棄”?！吧釛墶币馕吨劳龅娘L(fēng)險(xiǎn)，面對風(fēng)險(xiǎn)，人們是厭惡的。

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

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

在銷售中創(chuàng)造出緊迫性，是非常有必要的，創(chuàng)造緊迫性就等于在限定時(shí)間內(nèi)激起用戶的腎上腺素。

該理論建議，在營銷過后的銷售環(huán)節(jié)，要?jiǎng)?chuàng)造出緊迫性，促使用戶下單，比如，限時(shí)折扣、限時(shí)搶購、定時(shí)開團(tuán)、倒計(jì)時(shí)拼單等。

最后，說了這個(gè)么多個(gè)理論，是不是感覺有點(diǎn)凌亂了，Guys！

通常情況下，消費(fèi)者在作購買決策的時(shí)候，都需要經(jīng)過3大層面的思考。是的，這是最后一段提綱挈領(lǐng)的話了。

• 技術(shù)層面：這個(gè)產(chǎn)品是否能滿足我特定的需求？
• 經(jīng)濟(jì)層面：這個(gè)產(chǎn)品能滿足我的特定需求，但是，我有足夠的錢來購買嗎？
• 實(shí)惠層面：這個(gè)產(chǎn)品能滿足我的特定需求，我也有足夠的錢來購買，但是，它在我的選擇決策中，是實(shí)惠的嗎？

#專欄作家#

朱小磊，微信公眾號(hào)“非主流朱（ID：feizhuliupig）”，人人都是產(chǎn)品經(jīng)理專欄作家，營銷顧問，曾17歲獨(dú)立策劃了一個(gè)游戲平臺(tái)，月盈利近20萬。擅長以青年消費(fèi)者為目標(biāo)群體的市場營銷分析策劃。目前已服務(wù)過多個(gè)企業(yè)，涉及教育產(chǎn)品、營養(yǎng)品、快消品等。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

UI設(shè)計(jì)閃屏/啟動(dòng)頁/引導(dǎo)頁制作技巧

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里

需要做一個(gè)“開屏頁”

“哪個(gè)開屏頁”

“帶跳過的哪個(gè)”

“帶跳過的。是一頁的那個(gè)還是可以滑動(dòng)的？”

“滑動(dòng)的”

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

我們都知道APP在啟動(dòng)時(shí)會(huì)有一些頁面先行展示，例如這樣

通常來說我們會(huì)簡單的把它們統(tǒng)稱為“開屏頁”或者“啟動(dòng)頁”

但實(shí)際上,這種統(tǒng)稱就像是把下面這些都小可愛都叫做“熊”一樣不嚴(yán)謹(jǐn)。“熊”寶

寶們表示很委屈。

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

01 閃屏 Splash Screen

定義：閃屏是每次啟動(dòng)過程中展示給用戶的一個(gè)過渡頁面，用于減緩用戶在打開應(yīng)用時(shí)等待的焦慮心情。

交互方式：閃屏通常是一張背景圖片，無法進(jìn)行交互，無法點(diǎn)擊也無法跳轉(zhuǎn)

劣勢：無法跳轉(zhuǎn)，只能進(jìn)行展示作用，無法很好的承載營銷需求

優(yōu)勢：展示時(shí)間不可控

使用建議：

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

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

不要做廣告（干擾，且不能點(diǎn)擊）

02 啟動(dòng)頁Launch Screen

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

使用示例：常用與展示營銷活動(dòng)廣告圖片并引導(dǎo)用戶點(diǎn)擊

交互方式：

1、點(diǎn)擊頁面或按鈕進(jìn)入活動(dòng)承載頁

2、點(diǎn)擊跳過，跳過啟動(dòng)頁，進(jìn)入首頁，或N秒后自動(dòng)消失

注：由于加載時(shí)間不確定，啟動(dòng)圖通常會(huì)緩存并存在下次啟動(dòng)時(shí)使用

03 引導(dǎo)頁Onboarding Screen

定義：用戶安裝或更新后首次啟動(dòng)時(shí)展示數(shù)個(gè)頁面，常用于介紹應(yīng)用的核心概念，功能玩法，使用場景，核心變更

使用示例：

交互方式：

1、左右滑動(dòng)可以切換

2、最后一頁頁面可點(diǎn)擊進(jìn)入

注：首次打開才出現(xiàn)，之后就不在出現(xiàn)，清除用戶數(shù)據(jù)，再次打開應(yīng)用可以看到

使用建議：

1.輕易不要使用引導(dǎo)頁,以免阻礙用戶快速的使用體驗(yàn)

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

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

4.每頁的文案不要超過9個(gè)字,如果有更多內(nèi)容可以用小號(hào)文字進(jìn)行輔助說明

(根據(jù)愛爾蘭哲學(xué)家漢密爾頓觀察發(fā)現(xiàn)的7±2效應(yīng),一個(gè)人的短時(shí)記憶至少能回憶出5個(gè)字,最多回憶9個(gè),即7±2個(gè)。因此展示的文案要控制在9個(gè)字以內(nèi),超過后用戶容易遺忘、出現(xiàn)記憶偏差。)

劣勢：

增加了用戶進(jìn)入產(chǎn)品的時(shí)間，用戶翻頁過多，可能會(huì)失去耐心，降低好感度

04常規(guī)的啟動(dòng)流程

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

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

小結(jié)

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

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

不過,正所謂存在即合理,既然市面上的啟動(dòng)流程都是“全套服務(wù)”,說明這么做定是符合特定階段的市場需求的,所以作為產(chǎn)品設(shè)計(jì)師的我們在調(diào)侃過之后,還是要做好我們的本職工作:用專業(yè)知識(shí)解決實(shí)際問題。看過這篇文章后,相信

你又重新認(rèn)識(shí)了開屏三兄弟,并且能更好地利用他們各自的特性好好服侍各位產(chǎn)品、品牌、運(yùn)營大佬了~

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)