20第四章4Visio應(yīng)用基礎(chǔ)-APP流程圖

Visio應(yīng)用基礎(chǔ)——APP流程圖天津電子信息職業(yè)技術(shù)學(xué)院知識(shí)要點(diǎn)01流程圖描述一個(gè)典型的APP啟動(dòng)功能02App流程圖03注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考04登錄注冊(cè)產(chǎn)品需求自檢清單05優(yōu)化App交互流程的方法流程圖描述一個(gè)典型的APP啟動(dòng)功能第一部分APP啟動(dòng)流程圖在產(chǎn)品設(shè)計(jì)的過程中，產(chǎn)品經(jīng)理需要根據(jù)用戶使用場(chǎng)景，逆向思考其背后的實(shí)現(xiàn)邏輯，并通過流程圖來(lái)表達(dá)操作過程及信交互，以便工程模型的實(shí)現(xiàn)。開發(fā)工程師則通過流程圖理解產(chǎn)品經(jīng)理思路，評(píng)估相應(yīng)的技術(shù)方案和實(shí)現(xiàn)過程。需求：用戶啟動(dòng)APP進(jìn)入首頁(yè)這是每個(gè)APP都存在的一個(gè)需求，點(diǎn)擊圖標(biāo)然后打開APP，看起來(lái)非常簡(jiǎn)單，當(dāng)然，也非常重要，涉及到產(chǎn)品的視覺印象和首次體驗(yàn)。需求分解展示APP的品牌形象；根據(jù)業(yè)務(wù)需要展示廣告；向新用戶展示APP引導(dǎo)；啟動(dòng)完畢進(jìn)入首頁(yè)時(shí)的良好體驗(yàn)。APP啟動(dòng)流程圖第一步：確定流程的節(jié)點(diǎn)與走向軟件啟動(dòng)啟動(dòng)頁(yè)廣告頁(yè)新手引導(dǎo)頁(yè)軟件首頁(yè)第二步：尋找流程中的影響因素軟件啟動(dòng)首次啟動(dòng)Y啟動(dòng)頁(yè)2秒引導(dǎo)頁(yè)軟件首頁(yè)N其他流程？APP啟動(dòng)流程圖網(wǎng)絡(luò)狀況：考慮到網(wǎng)絡(luò)狀況對(duì)數(shù)據(jù)傳輸?shù)挠绊懀话愕木W(wǎng)絡(luò)狀況分為兩種：無(wú)網(wǎng)絡(luò)時(shí)，不加載廣告，但加載數(shù)據(jù)緩存；3G/4G/WIFI時(shí)，傳輸速度快，可加載廣告并更新首頁(yè)數(shù)據(jù)。流程表述如下：網(wǎng)絡(luò)狀況廣告頁(yè)3G/4G/WIFI無(wú)網(wǎng)絡(luò)啟動(dòng)頁(yè)2s首頁(yè)數(shù)據(jù)更新APP啟動(dòng)流程圖數(shù)據(jù)緩存：指上次使用后緩存到APP本地的數(shù)據(jù)APP保留數(shù)據(jù)緩存的目的，是減少網(wǎng)絡(luò)數(shù)據(jù)傳輸，提高APP的運(yùn)行效率。根據(jù)緩存狀況，可分為緩存數(shù)據(jù)首頁(yè)和最新數(shù)據(jù)首頁(yè)。流程表述如下：網(wǎng)絡(luò)狀況無(wú)加載數(shù)據(jù)緩存緩存數(shù)據(jù)首頁(yè)有廣告頁(yè)最新數(shù)據(jù)首頁(yè)APP啟動(dòng)流程圖第三步：根據(jù)影響因素的順序整合流程軟件啟動(dòng)首次啟動(dòng)引導(dǎo)頁(yè)流程N(yùn)網(wǎng)絡(luò)狀況無(wú)網(wǎng)絡(luò)流程3G/4G/WIFI廣告廣告流程N(yùn)數(shù)據(jù)緩存緩存調(diào)用APP啟動(dòng)流程圖第四步：繪制完整流程啟動(dòng)頁(yè)軟件啟動(dòng)首次啟動(dòng)Y引導(dǎo)頁(yè)②緩存首頁(yè)網(wǎng)絡(luò)狀況廣告加載廣告數(shù)據(jù)網(wǎng)絡(luò)狀況啟動(dòng)頁(yè)廣告頁(yè)數(shù)據(jù)更新③最新數(shù)據(jù)首頁(yè)啟動(dòng)頁(yè)加載數(shù)據(jù)緩存版本檢測(cè)提示版本更新①靜態(tài)首頁(yè)無(wú)網(wǎng)絡(luò)3G/4G/WifiYN跳過/3s后進(jìn)入首頁(yè)2s2s跳過/開啟首頁(yè)NY≠NApp流程圖第二部分APP流程圖為什么要業(yè)務(wù)流程圖拿注冊(cè)/登陸來(lái)說(shuō)，隨產(chǎn)品定位不同，時(shí)代不同、需求不同。每款A(yù)PP或者PC頁(yè)面的注冊(cè)登陸功能是截然不同的，比如是否調(diào)用第三方登陸、是否驗(yàn)證碼登陸、注冊(cè)所需的信息、注冊(cè)完后是否自動(dòng)登陸等等細(xì)節(jié)。而業(yè)務(wù)流程圖就是理清楚每個(gè)功能怎么實(shí)現(xiàn)和流轉(zhuǎn)的。對(duì)產(chǎn)品經(jīng)理來(lái)說(shuō)，是把需求、功能落地的思路對(duì)技術(shù)開發(fā)來(lái)說(shuō)，是在敲代碼時(shí)的一份設(shè)計(jì)稿整個(gè)流程的起始點(diǎn)是什么？整個(gè)流程的終結(jié)點(diǎn)是什么？在整個(gè)流程中，涉及到的角色都是誰(shuí)？在整個(gè)流程中，都需要做什么事情？哪些事是必須的？哪些可能是偶爾出現(xiàn)什么是業(yè)務(wù)流程圖？APP流程圖業(yè)務(wù)流程圖的核心是：清晰。因?yàn)樗墙唤o技術(shù)開發(fā)手里的施工圖。所以細(xì)而全是原則。流程圖的元素該怎么畫？APP流程圖「業(yè)務(wù)邏輯」和「業(yè)務(wù)流程圖」的關(guān)系像是，前者是新菜式的做法，而后者將其變成詳細(xì)的菜譜。做業(yè)務(wù)流程圖的前置條件一般是：腦子里有大概的功能畫面，不一定清晰但要有；熟悉產(chǎn)品的信息架構(gòu)；想清楚業(yè)務(wù)邏輯?！笜I(yè)務(wù)邏輯」和「業(yè)務(wù)流程圖」的關(guān)系簡(jiǎn)單的流程圖4步方法論：明確參與的角色明確流程進(jìn)程的各模塊業(yè)務(wù)關(guān)鍵判定異常處理APP流程圖為什么要頁(yè)面流程圖頁(yè)面流程圖其實(shí)是一份指南、地圖，越是大的需求，涉及多個(gè)頁(yè)面的跳轉(zhuǎn)，就越需要。在技術(shù)的眼里，每個(gè)頁(yè)面可能是不同SDK負(fù)責(zé)，很可能由不同的技術(shù)來(lái)維護(hù)，因此在開發(fā)時(shí)很有提要提供一份更大視野層的頁(yè)面圖。顧名思義，就是本次需求涉及的所有頁(yè)面之間的跳轉(zhuǎn)情況。是一份指南書，有點(diǎn)類似于建造完一個(gè)景點(diǎn)之后的地圖。地圖可以幫助技術(shù)同學(xué)俯瞰整個(gè)需求，頁(yè)面之間的架構(gòu)和流轉(zhuǎn)情況，也可以幫助UI設(shè)計(jì)同學(xué)知曉一共有哪些頁(yè)面。什么是頁(yè)面流程圖有什么元素？頁(yè)面流程圖比較簡(jiǎn)單，是基于業(yè)務(wù)流程來(lái)總結(jié)的圖而已。該怎么畫？1、明確頁(yè)面數(shù)量、頁(yè)面層級(jí)2、確定各頁(yè)面的關(guān)鍵功能和跳轉(zhuǎn)按鈕3、根據(jù)業(yè)務(wù)流程，連線4、判定處理頁(yè)面流程圖4步頁(yè)面、頁(yè)面跳轉(zhuǎn)按鈕/鏈接等、頁(yè)面層級(jí)APP流程圖原型vs交互vs視覺無(wú)論是大公司還是從0設(shè)計(jì)App，由業(yè)務(wù)流程圖還不能直接交付給程序員開發(fā)，還需要做出原型需求稿、交互UE稿、UI稿。而三者正好對(duì)應(yīng)是黃金圈法則：Why-How-What。名稱原型稿交互稿設(shè)計(jì)稿別名草稿線框圖低保真原型高保真原型負(fù)責(zé)人產(chǎn)品經(jīng)理設(shè)計(jì)師/產(chǎn)品經(jīng)理設(shè)計(jì)師原型需求稿：頁(yè)面有什么功能（why）交互UE稿：功能如何被用戶使用（how）視覺UI稿：功能長(zhǎng)什么樣子（what）App的注冊(cè)登錄流程各大APP的注冊(cè)登錄方式：1.短信快捷方式登錄百度外賣一類的APP產(chǎn)品側(cè)重于快速方便的讓用戶下單，他們的登錄注冊(cè)流程提供了短信快捷登錄的方式，用戶通過輸入手機(jī)號(hào)，收到驗(yàn)證碼并自動(dòng)填寫直接登錄到APP我的信息頁(yè)面，極大的提高了下單的速度。用這種方式的還有京東，美團(tuán)，貓眼等追求用戶快速下單促成交易的產(chǎn)品。App的注冊(cè)登錄流程2.社交賬號(hào)注冊(cè)登錄花瓣必須通過微博等賬號(hào)注冊(cè)，不提供郵箱注冊(cè)，第一次注冊(cè)/登錄后必須提交郵箱。社交賬號(hào)登錄簡(jiǎn)化了登錄注冊(cè)流程，體驗(yàn)有所提升，更便于獲取社交網(wǎng)絡(luò)的熟人關(guān)系鏈，有利于后期推廣。但多帳號(hào)的社交帳號(hào)容易造成后臺(tái)賬號(hào)混亂，僵尸賬號(hào)長(zhǎng)存，當(dāng)?shù)谌缴缃毁~號(hào)采取收緊措施的時(shí)候會(huì)有致命性的打擊。App的注冊(cè)登錄流程3.騰訊QQ的分步式注冊(cè)騰訊的分布式注冊(cè)目前是體驗(yàn)最好且效仿最多的登陸注冊(cè)方式4.新浪微博的注冊(cè)App的注冊(cè)登錄流程5.emoji的合并登錄方式emoji討巧的把登錄和注冊(cè)方式合二為一，當(dāng)檢測(cè)到用戶注冊(cè)過則直接登錄，如過沒注冊(cè)過彈出對(duì)話框提示注冊(cè)并確認(rèn)完成。但一個(gè)按鈕同時(shí)體現(xiàn)兩個(gè)功能，容易讓用戶造成混淆。設(shè)計(jì)注冊(cè)登錄流程的：1.明確目標(biāo)：注冊(cè)的目的是讓用戶擁有與設(shè)備無(wú)關(guān)的唯一識(shí)別的ID，防止用戶因?yàn)樽?cè)流程繁瑣而流失，增強(qiáng)用戶體驗(yàn)。信息補(bǔ)全是為了收集用戶資料，便于后期精準(zhǔn)推廣。2.明確產(chǎn)品定位：產(chǎn)品定位：一款類似家校通的產(chǎn)品，家長(zhǎng)通過學(xué)生代碼綁定孩子的賬號(hào)從而了解孩子在校學(xué)習(xí)狀況的產(chǎn)品。3.了解元素組成：根據(jù)產(chǎn)品定位元素組成包括：手機(jī)號(hào)，郵箱，密碼，昵稱，性別，城市，社交帳號(hào)等。App的注冊(cè)登錄流程App的注冊(cè)登錄流程App的注冊(cè)登錄流程App的注冊(cè)登錄流程注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考第三部分注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的宏觀理解一、注冊(cè)登錄流程的需求痛點(diǎn)是？即個(gè)體與該個(gè)體維度的數(shù)據(jù)無(wú)法達(dá)成關(guān)聯(lián)。注冊(cè)登錄環(huán)節(jié)，是服務(wù)方為單個(gè)用戶建立身份標(biāo)識(shí)的過程，是服務(wù)與享受該服務(wù)的用戶在數(shù)據(jù)層面建立雙向聯(lián)系的過程。二、注冊(cè)登錄流程具體包括什么內(nèi)容？注冊(cè)登錄流程是一個(gè)流程集，包括正向和逆向流程；正向流程：注冊(cè)流程、登錄流程；逆向流程：找回密碼流程，風(fēng)控流程。注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的宏觀理解三、注冊(cè)登錄環(huán)節(jié)的影響？注冊(cè)登錄流程作為用戶及站內(nèi)的中間環(huán)節(jié)，可能會(huì)帶來(lái)如下影響：正向：如上文所說(shuō)，可以建立服務(wù)于用戶之間的雙向聯(lián)系，快速進(jìn)行推廣，進(jìn)行個(gè)人化營(yíng)銷，有利于用戶的信息安全等等。反向：有流程就會(huì)有損耗，注冊(cè)登錄流程對(duì)用戶來(lái)說(shuō)，是使用網(wǎng)站服務(wù)的額外流程。在現(xiàn)在流量越來(lái)越貴的情況下，流程的損耗是必須考慮的要點(diǎn)；流程考慮不到位可能導(dǎo)致的問題是需要付出巨大的額外成本進(jìn)行流程補(bǔ)全?？偨Y(jié)：注冊(cè)登錄環(huán)節(jié)，是服務(wù)方為單個(gè)用戶建立身份標(biāo)識(shí)的過程。注冊(cè)登錄流程是一個(gè)流程集，包括正向和逆向流程。注冊(cè)登錄流程作為用戶行為的關(guān)鍵節(jié)點(diǎn)，十分重要。注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)中驗(yàn)證機(jī)制的演變目前的注冊(cè)登錄流程發(fā)展也是由身份標(biāo)識(shí)的識(shí)別符號(hào)變化，也就是我們常說(shuō)的驗(yàn)證方式?jīng)Q定的。要作為驗(yàn)證方式需要兩種特性：在服務(wù)對(duì)象中覆蓋率高；與真人的關(guān)聯(lián)度高。注冊(cè)登錄流程的演變1234密碼基礎(chǔ)通信方式證件信息生物特征注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)中驗(yàn)證機(jī)制的演變一、密碼包括的注冊(cè)登錄方式：賬號(hào)密碼登錄密碼其實(shí)就是一串理論上只有身份標(biāo)識(shí)所有者記得的字符串。三方賬號(hào)登錄其實(shí)就是借助三方賬號(hào)密碼信息對(duì)身份標(biāo)識(shí)進(jìn)行驗(yàn)證的方式。個(gè)體識(shí)別度：低便捷程度：低技術(shù)要求：低風(fēng)險(xiǎn)程度：高二、基礎(chǔ)通信方式包括的注冊(cè)登錄方式：手機(jī)注冊(cè)登錄

郵箱注冊(cè)登錄基礎(chǔ)通信方式具有網(wǎng)絡(luò)效應(yīng)及替代成本高的特點(diǎn)，同時(shí)符合作為驗(yàn)證方式的特性，這也是隨著通信技術(shù)的發(fā)展及普及帶來(lái)的驗(yàn)證方式升級(jí)。個(gè)體識(shí)別度：中便捷程度：中技術(shù)要求：中風(fēng)險(xiǎn)程度：中注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)中驗(yàn)證機(jī)制的演變?nèi)⒆C件信息包括的注冊(cè)登錄方式：實(shí)名注冊(cè)登錄

護(hù)照注冊(cè)登錄

學(xué)生證驗(yàn)證等證件作為國(guó)家采信的身份校驗(yàn)信息，符合校驗(yàn)信息的基本要求。個(gè)體識(shí)別度：高便捷程度：低技術(shù)要求：中風(fēng)險(xiǎn)程度：中四、生物特征包括的注冊(cè)登錄方式：指紋登錄虹膜登錄語(yǔ)音音頻登錄人臉識(shí)別等理論上完美的實(shí)現(xiàn)方式。個(gè)體識(shí)別度：高便捷程度：高技術(shù)要求：高風(fēng)險(xiǎn)程度：低注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的產(chǎn)品流程設(shè)計(jì)注冊(cè)登錄流程驗(yàn)證動(dòng)作驗(yàn)證時(shí)間賬號(hào)密碼手機(jī)驗(yàn)證進(jìn)入應(yīng)用前后置流程中自由賬號(hào)體系三方賬號(hào)體系賬號(hào)密碼登錄全球手機(jī)登錄三方授權(quán)登錄三方靜默登錄注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的產(chǎn)品流程設(shè)計(jì)一、賬號(hào)密碼1）自有賬號(hào)體系流程：優(yōu)點(diǎn)：注冊(cè)登錄環(huán)節(jié)的數(shù)據(jù)均在自己手中，可以獲得更多維度的用戶數(shù)據(jù)；賬號(hào)體系外部依賴少，安全性較強(qiáng)。缺點(diǎn)：風(fēng)控流程較多（驗(yàn)證碼等），需要用戶操作的節(jié)點(diǎn)多；需要自己設(shè)計(jì)風(fēng)控流程及對(duì)抗性高的組件（圖形驗(yàn)證碼等），成本較大。2）三方賬號(hào)體系流程：優(yōu)點(diǎn)：流程短，登錄速度快，注冊(cè)轉(zhuǎn)化率高，背靠三方豐富的用戶信息，有利于網(wǎng)站快速推廣；能快速建立簡(jiǎn)單的賬號(hào)體系，使用個(gè)體維度的信息；與三方互相背書，可以增加在用戶心中的可信度；缺點(diǎn)：對(duì)外部依賴性較強(qiáng)。注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的產(chǎn)品流程設(shè)計(jì)二、手機(jī)驗(yàn)證優(yōu)點(diǎn)：登錄便捷，轉(zhuǎn)化率高。缺點(diǎn)：運(yùn)營(yíng)商二次放號(hào)問題是個(gè)坑，需要有流程進(jìn)行判斷；短信費(fèi)用的預(yù)算問題需要考慮；需要準(zhǔn)備至少兩個(gè)短信通道，以防出現(xiàn)短信通道堵塞或熔斷等導(dǎo)致用戶無(wú)法順利注冊(cè)的情況。三、驗(yàn)證時(shí)間1.進(jìn)入應(yīng)用前優(yōu)點(diǎn)：注冊(cè)入口少，維護(hù)成本低；用戶信息全面，需要信息可一次收集完畢缺點(diǎn)：用戶體驗(yàn)差，在用戶沒有體驗(yàn)服務(wù)的情況下需要注冊(cè)，容易造成用戶流失2.后置流程優(yōu)點(diǎn)：用戶體驗(yàn)佳，對(duì)用戶來(lái)說(shuō)流失成本較高缺點(diǎn)：入口多，維護(hù)成本較大；需要進(jìn)行全盤規(guī)劃才能做好；用戶信息需要分多環(huán)節(jié)收集注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的產(chǎn)品流程設(shè)計(jì)互金電商社交導(dǎo)購(gòu)工具風(fēng)控導(dǎo)向（公司發(fā)展后期）流量導(dǎo)向（公司發(fā)展初期）支付寶...淘寶京東...微信陌陌...點(diǎn)評(píng)返利...xmind...注冊(cè)登錄詳解：流程設(shè)計(jì)、業(yè)務(wù)及產(chǎn)品思考注冊(cè)登錄業(yè)務(wù)的基本要求作為負(fù)責(zé)用戶相關(guān)的產(chǎn)品經(jīng)理，對(duì)其中注冊(cè)登錄業(yè)務(wù)的基本要求定為以下三點(diǎn)：1.穩(wěn)定性：首先，穩(wěn)定性作為用戶業(yè)務(wù)的核心，是需要重點(diǎn)保證的。主要從以下幾方面提高穩(wěn)定性水平：提高架構(gòu)合理性；日常進(jìn)行穩(wěn)定性檢查；大促前壓測(cè)；穩(wěn)定性預(yù)案到位等等。2.通用性：通用性并不是每個(gè)APP都需要做的，只有公司旗下APP有點(diǎn)多可以考慮過通行證的架構(gòu)，所以作為負(fù)責(zé)整條用戶業(yè)務(wù)線的產(chǎn)品，需要在通用性上下功夫，做好整體規(guī)劃。這樣可以減少代碼開發(fā)及維護(hù)成本的同時(shí)，提高流程的可復(fù)用性。主要從以下幾方面提高通用性水平：解耦風(fēng)控業(yè)務(wù)；組件化開發(fā)，流程可選配。3.支撐性：支撐性是指如何更好的支撐其他業(yè)務(wù)方工作開展。登錄注冊(cè)產(chǎn)品需求自檢清單第四部分登錄注冊(cè)產(chǎn)品需求自檢清單一、登錄1移動(dòng)設(shè)備屬于個(gè)人私密性較高的設(shè)備，用戶在進(jìn)行操作時(shí)，可對(duì)輸入密碼進(jìn)行有效的保護(hù)；2移動(dòng)設(shè)備隨身攜帶，隨時(shí)隨地在變換位置，網(wǎng)絡(luò)狀況不穩(wěn)定等不確定因素很多；3移動(dòng)設(shè)備顯示區(qū)域均較小，登錄的注冊(cè)頁(yè)面通常都會(huì)有3個(gè)頁(yè)面（M站通常在一個(gè)頁(yè)面），需要用戶填寫的內(nèi)容要精簡(jiǎn)；4移動(dòng)設(shè)備輸入更多是手指觸屏操作，人機(jī)交互有其獨(dú)特性，例如虛擬鍵盤的設(shè)計(jì)。登錄注冊(cè)產(chǎn)品需求自檢清單二、設(shè)計(jì)前的思考1.為誰(shuí)設(shè)計(jì)登錄注冊(cè)？2.是否一定要登錄注冊(cè)？3.是否需要獨(dú)立的賬戶體系？4.哪些操作需要用戶登錄？三、登錄注冊(cè)的設(shè)計(jì)步驟第一步：梳理腦圖，梳理現(xiàn)有的登錄模式和信息結(jié)構(gòu)；第二步：梳理業(yè)務(wù)流程，把每一步操作都流程化，做好各種情況的處理方案（梳理流程非常非常非常重要）；第三步：畫出草圖/線框圖，對(duì)頁(yè)面元素和布局進(jìn)行初步設(shè)計(jì)；第四步：交互設(shè)計(jì)，對(duì)每一項(xiàng)頁(yè)面元素、頁(yè)面跳轉(zhuǎn)、操作反饋、異常處理、按鈕和頁(yè)面的各種狀態(tài)等做出設(shè)計(jì)；第五步：自檢測(cè)試，對(duì)線框圖和交互設(shè)計(jì)進(jìn)行自檢，最好是用Axure等交互軟件進(jìn)行交互設(shè)計(jì)操作，建立自己的自檢清單；第六步：輸出產(chǎn)品需求文檔、線框圖和交互設(shè)計(jì)稿。登錄注冊(cè)產(chǎn)品需求自檢清單四、設(shè)計(jì)范例1.賬號(hào)賬號(hào)有無(wú)格式的要求，如果只是手機(jī)號(hào)碼，前端是否需要驗(yàn)證手機(jī)號(hào)碼的有效性？手機(jī)號(hào)碼為純數(shù)字，是否彈出純數(shù)字鍵盤方便用戶快速填寫及避免用戶來(lái)回切換？手機(jī)號(hào)碼的數(shù)字如何呈現(xiàn)？哪種格式？2.驗(yàn)證碼驗(yàn)證碼的格式，是四/六位數(shù)字驗(yàn)證碼，還是英文+數(shù)字驗(yàn)證碼，英文是否區(qū)分大小寫？按鈕默認(rèn)顯示狀態(tài)、用戶輸入信息后按鈕顏色變化效果，該如何設(shè)計(jì)比較好？倒計(jì)時(shí)如何設(shè)置？button還是label？用哪個(gè)好？如何設(shè)計(jì)？3.密碼最少和最多字符設(shè)置，提示文字為“位”還是“字符”？如“請(qǐng)輸入6-16位字母或數(shù)字”？密碼是否要限制特殊字符？如“空格”、“/”等，為什么要限制？有沒有安全方面的考慮？密碼設(shè)置好后，注冊(cè)按鈕如何變化？點(diǎn)擊“注冊(cè)”后，在網(wǎng)絡(luò)較慢的情況下，頁(yè)面和按鈕如何響應(yīng)，是否要加鎖屏浮層+緩沖提示語(yǔ)？登錄注冊(cè)產(chǎn)品需求自檢清單四、設(shè)計(jì)范例4.錯(cuò)誤提示錯(cuò)誤時(shí)的報(bào)錯(cuò)提示文字是什么，提示格式是彈窗、Toast、還是在當(dāng)前頁(yè)面文字顯示？Toast是沒有焦點(diǎn)的，而且Toast顯示的時(shí)間有限，過一定的時(shí)間就會(huì)自動(dòng)消失。彈框會(huì)阻斷用戶操作，需要手動(dòng)點(diǎn)擊確認(rèn)以后才會(huì)消失。在當(dāng)前頁(yè)面文字顯示的話，提示文字?jǐn)[放的位置，頁(yè)面格式根據(jù)提示文字的變化，需要有怎樣的視覺效果5.異常提示點(diǎn)擊【獲取驗(yàn)證碼】，檢測(cè)手機(jī)號(hào)已被注冊(cè)，如無(wú)置灰設(shè)置，輸入框?yàn)榭?，手機(jī)號(hào)碼無(wú)效的情況，故需提示：手機(jī)號(hào)已被注冊(cè)，是否提示用戶登錄？手機(jī)號(hào)不能為空，多次為空狀態(tài)點(diǎn)擊是否給出頻繁操作提示？手機(jī)號(hào)碼不正確，“請(qǐng)輸入正確的手機(jī)號(hào)碼”是不是比“手機(jī)號(hào)碼錯(cuò)誤”好些？點(diǎn)擊【注冊(cè)】時(shí)，可能會(huì)有輸入框?yàn)榭?，?yàn)證碼無(wú)效等情況，如無(wú)置灰設(shè)置，故需提示：短信驗(yàn)證碼不能為空驗(yàn)證碼已被使用，然后給出什么操作呢？驗(yàn)證碼已過期，過期了給出彈窗嗎？在彈窗直接獲取驗(yàn)證碼？驗(yàn)證碼錯(cuò)誤，弱提示？驗(yàn)證碼已達(dá)到最大嘗試次數(shù)，最大是多少次？登錄注冊(cè)產(chǎn)品需求自檢清單四、設(shè)計(jì)范例6.短信驗(yàn)證碼短信驗(yàn)證碼一般通過第三方通道發(fā)送，在技術(shù)側(cè)做規(guī)避，還需要在產(chǎn)品規(guī)則上做一定限制；驗(yàn)證碼的格式需要簡(jiǎn)單明了，如“885267，XX驗(yàn)證碼。【XXX】”驗(yàn)證碼的字?jǐn)?shù)限制，4位或者6位純數(shù)字？7.邀請(qǐng)碼注冊(cè)是否為邀請(qǐng)注冊(cè)？如是邀請(qǐng)注冊(cè)，邀請(qǐng)碼格式如何設(shè)計(jì)？邀請(qǐng)碼錯(cuò)誤提示？填寫了邀請(qǐng)的用戶和沒填的用戶，在注冊(cè)成功后有何區(qū)別？有邀請(qǐng)碼的用戶是否有獎(jiǎng)勵(lì)？8.注冊(cè)成功后的提示、狀態(tài)變更及頁(yè)面跳轉(zhuǎn)注冊(cè)成功后同時(shí)切換為登錄狀態(tài)，登錄狀態(tài)賬號(hào)密碼保存是否設(shè)置期限？給予注冊(cè)成功的提示并跳轉(zhuǎn)到相應(yīng)頁(yè)面，目標(biāo)頁(yè)面狀態(tài)如何是否有緩存，是否需要緩存？之前是在需要token的頁(yè)面跳轉(zhuǎn)到注冊(cè)頁(yè)面的話，注冊(cè)成功后需自動(dòng)跳轉(zhuǎn)回之前的頁(yè)面注冊(cè)之前有第三方登錄，用戶注冊(cè)后還需要用戶綁定第三方賬號(hào)嗎？登錄注冊(cè)產(chǎn)品需求自檢清單五、其他注意事項(xiàng)：1.輸入框手機(jī)號(hào)碼輸入框，手機(jī)號(hào)碼顯示一般是344格式，這樣便于用戶檢查號(hào)碼是否正確，如驗(yàn)證碼輸入框，長(zhǎng)度一般比較短；密碼輸入框，默認(rèn)一般為密文顯示，為了更好的交互可以設(shè)置明文顯示按鈕，最好只設(shè)置1次密碼，為什么這樣？其他輸入框，如郵箱、邀請(qǐng)碼、昵稱、個(gè)人信息等根據(jù)使用場(chǎng)景的不同自行設(shè)計(jì)；不同的輸入框需要有不同的提示內(nèi)容和顯示狀態(tài)。2.按鈕按鈕設(shè)計(jì)，提交按鈕和文字按鈕的位置和主次布局設(shè)計(jì)；按鈕狀態(tài)的設(shè)計(jì)，不同的狀態(tài)操作都要考慮，默認(rèn)置灰和高亮的條件，按鈕置灰的意義何在？按鈕提交反饋，點(diǎn)擊操作要給出響應(yīng)或反饋。登錄注冊(cè)產(chǎn)品需求自檢清單五、其他注意事項(xiàng)：3.驗(yàn)證碼驗(yàn)證碼的格式，字母、數(shù)字、字符等，一般為數(shù)字4位或者6位；驗(yàn)證碼的有效時(shí)間，根據(jù)不同的產(chǎn)品設(shè)計(jì)不同的有效時(shí)間，在有效時(shí)間內(nèi)的驗(yàn)證碼操作需要給出明確的反饋；驗(yàn)證碼的獲取次數(shù)上限，技術(shù)限制和產(chǎn)品設(shè)計(jì)限制同步，避免被無(wú)限制獲?。或?yàn)證碼獲取時(shí)間，一般為第三方發(fā)送，但時(shí)間最好限定在5.5秒內(nèi)讓用戶獲取到（不要問我為什么是5.5秒，因?yàn)槲乙膊恢溃?yàn)證碼是怎么觸發(fā)得到的？為什么有些設(shè)計(jì)為點(diǎn)擊下一步或者獲取驗(yàn)證碼后在頁(yè)面跳轉(zhuǎn)時(shí)就獲取，有些頁(yè)面跳轉(zhuǎn)后再次點(diǎn)擊按鈕才能獲?。繛槭裁从胁煌?？觸發(fā)后倒計(jì)時(shí)狀態(tài)有何變化？重新獲取驗(yàn)證碼后，原驗(yàn)證碼如何處理？短時(shí)間內(nèi)多次獲取驗(yàn)證碼，是否還要給用戶發(fā)送驗(yàn)證碼？還是提示驗(yàn)證碼已發(fā)送請(qǐng)輸入？登錄注冊(cè)產(chǎn)品需求自檢清單五、其他注意事項(xiàng)：4.返回按鈕在注冊(cè)、找回密碼、第三方登錄等操作流程中，返回時(shí)需要特別注意點(diǎn)擊返回后的操作提示；比如注冊(cè)手機(jī)的修改，驗(yàn)證碼提交后設(shè)置密碼等。點(diǎn)擊返回時(shí)，干擾了正常流程的操作一般需要強(qiáng)提示，提示彈窗注意文案和按鈕文字怎么設(shè)計(jì)好？點(diǎn)擊返回后，當(dāng)前頁(yè)面和目標(biāo)頁(yè)面狀態(tài)是否變化？例如從填寫驗(yàn)證碼返回到填寫手機(jī)號(hào)碼頁(yè)面，手機(jī)號(hào)碼是置空還是顯示已輸入過的手機(jī)號(hào)碼？瀏覽應(yīng)用過程中進(jìn)入登錄頁(yè)面，登錄頁(yè)面是否需要有返回按鈕？5.虛擬鍵盤虛擬鍵盤何時(shí)彈出？觸發(fā)條件是什么？彈出的虛擬鍵盤是什么類型的？數(shù)字鍵盤、字母鍵盤？系統(tǒng)自帶輸入法還是第三方輸入法？鍵盤上的”Go”按鈕是否有變化？變成”完成“或者”登陸“等后點(diǎn)擊有何交互？鍵盤如何隱藏？怎么觸發(fā)？自動(dòng)隱藏？按鍵隱藏？鍵盤上的刪除按鈕和一鍵清除按鈕是否有區(qū)別？有何區(qū)別？有無(wú)必要設(shè)計(jì)一鍵清除？登錄注冊(cè)產(chǎn)品需求自檢清單五、其他注意事項(xiàng)：6.異常提示登錄時(shí)，賬戶是否在其他設(shè)備登錄，是否允許多端同時(shí)登陸？不允許同時(shí)登陸，之前登錄設(shè)備的賬戶是否要下線？給出怎樣的提示？密碼第一次錯(cuò)誤給出什么提示？第二次仍然輸入錯(cuò)誤，錯(cuò)誤提示是否需要強(qiáng)提示并給出找回密碼的按鈕？在彈窗點(diǎn)擊找回密碼，手機(jī)號(hào)碼在新頁(yè)面是否需要重新填寫？密碼連續(xù)多次輸入錯(cuò)誤是否要做出禁用限制？注冊(cè)流程中，檢測(cè)到手機(jī)號(hào)碼已經(jīng)注冊(cè)，是否可以繼續(xù)獲取驗(yàn)證碼？或者驗(yàn)證后直接登錄免去頁(yè)面跳轉(zhuǎn)和輸入密碼？找回密碼和重置密碼都有哪些區(qū)別？網(wǎng)絡(luò)狀態(tài)不好，都該給出怎樣的反饋或提示？用戶所處環(huán)境網(wǎng)絡(luò)信號(hào)不好（用戶向服務(wù)器請(qǐng)求超時(shí)），是否需要檢查用戶的網(wǎng)絡(luò)狀態(tài)？還是只給出提示？服務(wù)器沒有正常接收請(qǐng)求或沒有回復(fù)，給出怎樣的提示較好？手機(jī)停機(jī)，驗(yàn)證碼、數(shù)據(jù)傳輸如何處理？手機(jī)沒開wifi或者流量，如何指導(dǎo)用戶進(jìn)行設(shè)置？登錄注冊(cè)產(chǎn)品需求自檢清單五、其他注意事項(xiàng)：7.第三方登錄昵稱的長(zhǎng)度設(shè)置，不同平臺(tái)的賬戶昵稱的長(zhǎng)度要求不同，該如何獲??？綁定多個(gè)第三方賬戶，公開信息如何獲??？公開信息不同如何處理？用戶注冊(cè)前使用過第三方登錄，是否還有綁定手機(jī)號(hào)碼？APP進(jìn)行第三方登錄，是否有1個(gè)第三方賬號(hào)生成2個(gè)本地賬號(hào)的情況？登錄注冊(cè)的設(shè)計(jì)涉及到很多方面，是最常見也是最容易被設(shè)計(jì)者忽視的地方。每一個(gè)元素的設(shè)計(jì)都要獨(dú)立思考，不能照搬全抄，也不能異想天開，需要提前理解和思考，多想幾個(gè)為什么，多問自己幾個(gè)為什么？而在實(shí)際設(shè)計(jì)的過程中，需要重點(diǎn)考慮實(shí)際的應(yīng)用場(chǎng)景?？偨Y(jié)優(yōu)化App交互流程的方法第五部分優(yōu)化App交互流程的方法一、減少認(rèn)知負(fù)擔(dān)了解用戶如何與應(yīng)用交互是優(yōu)化的必要條件。作為設(shè)計(jì)師和開發(fā)人員，我們應(yīng)該在整個(gè)交互流程中理解用戶的目標(biāo)。這將幫助我們確定任務(wù)完成過程中最常見的問題。二、優(yōu)化交互流程用戶與應(yīng)用交互時(shí)的阻力和困惑越少，應(yīng)用被繼續(xù)使用的機(jī)會(huì)就越大。1.拆分任務(wù)幾種比較流行的優(yōu)化交互流程的方法：如果一個(gè)在用戶端的任務(wù)包含很多步驟和操作，最好是把這個(gè)任務(wù)拆分成一定數(shù)量的子任務(wù)。一個(gè)很好的例子是在電商購(gòu)物應(yīng)用中的漸進(jìn)結(jié)賬流程，你能夠從拆分出來(lái)的步驟數(shù)中清楚自己的每一步操作。優(yōu)化App交互流程的方法2.充分利用已經(jīng)掌握的用戶信息在下面的例子中可以看到打車應(yīng)用所考慮的點(diǎn)——應(yīng)用不會(huì)去詢問用戶的位置，它能夠基于數(shù)據(jù)自動(dòng)定位。利用這一功能，用戶只需要選擇乘車的位置就可以叫車。優(yōu)化App交互流程的方法3.讓每一步銜接自然當(dāng)任務(wù)需要用戶完成許多步驟時(shí)，通過清楚顯示下一步的操作來(lái)幫助用戶。這個(gè)界面指引通過在每次用戶操作之后提供下一步驟來(lái)引導(dǎo)用戶。優(yōu)化App交互流程的方法4.每一屏優(yōu)先完成一個(gè)主要功能通過遵循這個(gè)簡(jiǎn)單規(guī)則，可以將界面變得更易于學(xué)習(xí)和使用。使用視覺權(quán)重對(duì)重要元素進(jìn)行優(yōu)化（例如加大核心按鈕的對(duì)比度）。優(yōu)化App交互流程的方法三、減少混亂好的UI設(shè)計(jì)只展示相關(guān)的信息（信號(hào)），并避免不想看到的信息（噪音）。優(yōu)化App交互流程的方法不要隱藏導(dǎo)航。一致性。顯示當(dāng)前位置。四、清晰的導(dǎo)航用戶如果很難找到想要的，就算界面再漂亮，內(nèi)容再充實(shí)，也變得沒有意義了。一些導(dǎo)航的規(guī)則：優(yōu)化App交互流程的方法五、結(jié)合手機(jī)自身特點(diǎn)手機(jī)不是臺(tái)式機(jī)的縮小版，它們有自身的細(xì)微差別和限制。六、視覺引導(dǎo)要準(zhǔn)確UI界面元素需要清楚的表達(dá)出哪些元素是可以交互的，哪些元素是不可操作的。七、操作區(qū)域要友好移動(dòng)界面中設(shè)計(jì)可操作