起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)移動(dòng)端APP應(yīng)該如何定義交互規(guī)范
每個(gè)APP都有很多交互功能，不同APP的交互效果也有差異，但是它們基本上都遵守統(tǒng)一的交互規(guī)范。比如相似的動(dòng)作、位置、樣式、邏輯。
APP閃屏
每次啟動(dòng)APP的時(shí)候，最好加載一張圖片。因?yàn)榧虞dAPP需要時(shí)間，有一個(gè)過(guò)渡畫面可以減弱用戶對(duì)等待的焦躁感。
常見的有微信采用了一張靜態(tài)圖片作為閃屏，而支付寶&淘寶等APP采用的是動(dòng)態(tài)圖片來(lái)作為閃屏。
APP功能引導(dǎo)
當(dāng)首次打開APP或者更新APP的時(shí)候，一般會(huì)加載幾張圖片來(lái)講解APP的功能。
然后再去加載閃屏，最后打開首頁(yè)。
頁(yè)面間交互
頁(yè)面間交互，其實(shí)就是一個(gè)頁(yè)面進(jìn)入另外一個(gè)頁(yè)面的交互效果。
ios常見使用覆蓋移入效果。Android常見使用向左平移效果，當(dāng)然返回的時(shí)候就是向右平移效果。
當(dāng)然不常見的交互效果還有中央放大進(jìn)入，3D翻轉(zhuǎn)，右下角翻頁(yè)等。
頁(yè)面內(nèi)交互
頁(yè)面內(nèi)必備的交互至少有吐司，彈窗，模態(tài)視圖3種，程度依次遞增。
toast吐司
下圖是吐司提示的交互，一般有3種樣式。
位置：頁(yè)面中部居中/頁(yè)面下方居中/頁(yè)面頂部
交互：淡入淡出，懸浮2秒。位于頁(yè)面層級(jí)的最上級(jí)，一般無(wú)遮罩效果。
樣式：灰底白字、文字距離上下左右的間距是固定的?？勺远x位置、帶圖片限定最長(zhǎng)寬度，自適應(yīng)高度。也可通欄。
實(shí)現(xiàn)機(jī)制：由服務(wù)端標(biāo)識(shí)然后返回內(nèi)容給客戶端。
Alert彈窗
下圖是彈窗的交互，一般有1種樣式。也稱警告框，彈層。
位置：頁(yè)面中間
交互：淡入淡出&顯示遮罩效果(點(diǎn)擊外部位置，向下隱藏操作列表)。如果有2個(gè)按鈕，則統(tǒng)一左邊取消按鈕，右邊確定按鈕。
樣式：右按鈕是操作按鈕；為避免誤操作，左按鈕是返回/取消/隱藏。
實(shí)現(xiàn)機(jī)制：由服務(wù)端標(biāo)識(shí)然后返回內(nèi)容給客戶端。特殊場(chǎng)景下，警告框當(dāng)做頁(yè)面，以”頁(yè)面加載-整體加載”方法來(lái)處理。比如領(lǐng)取優(yōu)惠券。
模態(tài)視圖
為用戶提供了一種不脫離主流程的方式去進(jìn)行操作，容易和彈窗混淆。
位置：頁(yè)面頂部或者底部
交互：進(jìn)入頁(yè)面之后，加載并顯示在頂層。根據(jù)服務(wù)端規(guī)則顯示相應(yīng)內(nèi)容。點(diǎn)擊頁(yè)面空白區(qū)域，向下滑動(dòng)隱藏彈窗。
實(shí)現(xiàn)機(jī)制：是否可以服務(wù)端控制是否顯示，以及顯示什么內(nèi)容，以新增參數(shù)的形式。
操作列表
也稱底部彈出框，底部上拉列表。
位置：頁(yè)面底部
交互： 點(diǎn)擊分享按鈕，從頁(yè)面底部向上彈出并顯示遮罩效果，點(diǎn)擊取消按鈕或者活動(dòng)菜單外部就會(huì)自動(dòng)向下隱藏。
實(shí)現(xiàn)機(jī)制：是否可以服務(wù)端控制是否顯示，以及顯示什么內(nèi)容，以新增參數(shù)的形式。
跳轉(zhuǎn)到其他APP
主要是分享功能會(huì)跳轉(zhuǎn)到其他APP，簡(jiǎn)單了解一下交互效果。采用的是活動(dòng)菜單這個(gè)控件。
總結(jié)
希望大家能夠通過(guò)這篇文章對(duì)移動(dòng)端APP的常見交互行為以及基本的規(guī)范有一定了解，至少設(shè)計(jì)自己APP的時(shí)不會(huì)在交互上犯原則性的錯(cuò)誤。
相關(guān)閱讀
移動(dòng)端APP應(yīng)該如何定義頁(yè)面規(guī)范
移動(dòng)端APP應(yīng)該如何定義頁(yè)面規(guī)范
#專欄作家#
浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號(hào)langzisay，個(gè)人微信nuanai88。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 unsplash，基于 CC0 協(xié)議
為啥不做個(gè)中保真的原型啊
這篇文章講的是交互規(guī)范，不是原型保真度哈。
有移動(dòng)端表單之類的規(guī)范講解嗎
你好，咨詢一下
這個(gè)動(dòng)圖是用什么軟件處理的呢？
有完整的原型參考嗎？
這是Axure制作的交互設(shè)計(jì)
通過(guò)Screenflow軟件錄制的。
完整的原型參考，可以加我的微信nuanai88然后得到獲取方法。
通過(guò)app已經(jīng)回復(fù)過(guò)你了，不知道為啥丟了評(píng)論。
??