POST TIME:2018-12-03 21:24
很多組件功能有重疊,使用的規(guī)則界限不甚明顯,有些可替換使用。具體使用何種形式,需要結(jié)合本身的產(chǎn)品和業(yè)務(wù)目的決定。
臨時層是什么《支付寶體驗設(shè)計精髓》中按照頁面元素的不變性,將頁面元素歸納為5個差別的層級,臨時層指那些在頁面中默認隱藏,需要時再展示的元素。
臨時層包羅彈窗、Toast提示、浮層彈窗、操作列表、全屏彈窗等,每種組件都有其適用的使用場景,合理的使用,能提高用戶效率和使用體驗。作為新接觸 app 端設(shè)計的小白,為了規(guī)范本身的設(shè)計,總結(jié)了部分本身的理解,與大家交流。錯誤之處還請指正。因為工作以 iOS 端為主,故本文僅梳理了部分iOS應(yīng)用中常用的臨時層,并不但限于iOS的規(guī)范組件。
彈窗(Alerts)Alerts 屬于模態(tài)彈窗,用戶必需處理后才可以繼續(xù)原操作。彈窗是一種比較強的反饋形式,彈出時會阻斷用戶原操作,對用戶任務(wù)的打斷性很強。但頻繁的打斷用戶會帶給用戶挫敗感,同時也影響用戶完成任務(wù)的效率,所以需要慎重使用。
彈窗由標題、內(nèi)容、操作組成。內(nèi)容描述文字并非須要,可以省略。一個好的彈窗要告知用戶當前發(fā)生了什么及怎么解決。
使用情景1.告知信息:彈窗用于告知用戶一些會影響到他們使用 應(yīng)用的重要信息,好比當使用掃一掃功能時,告知用戶“沒有開啟相機權(quán)限”。關(guān)于重要信息的定義,差別產(chǎn)品可能有差別的理解,我認為大概需要滿足 須要、重要、與當前任務(wù)相關(guān)這幾個條件。
? ?須要:當任務(wù)有前提條件需要滿足時。好比使用掃一掃需要開啟手機相機權(quán)限。? ?重要:當有重要信息需要告知用戶,會對用戶任務(wù)造成影響時。好比用戶掃描失效二維碼時,系統(tǒng)告知二維碼已經(jīng)失效,需要更換二維碼。與當前任務(wù)相關(guān):即在合理的時間展示,不要顯示與當前任務(wù)無關(guān)的提示,保證用戶專注于當前任務(wù)。2.快速操作:彈窗也用戶執(zhí)行一些可以快速執(zhí)行的小任務(wù),好比撥打電話。
限制彈窗最多承載三個操作,當大于三個操作時,使用操作列表.當操作命令文本較長時,使用單列擺列命令。只適合讓用戶完成簡單任務(wù),如錄入驗證碼、撥打電話、確認刪除操作等。按鈕挨次。關(guān)于確定取消按鈕的擺放位置,iOS規(guī)范里設(shè)定了較復雜的設(shè)計策略,在設(shè)計時,為了連結(jié)界面一致性,我將所有確認類操作放在右側(cè)。其他關(guān)于Alerts的設(shè)計要求,在iOS規(guī)范里有完善的描述,這里不再贅述了。操作列表(Action Sheets)操作列表展示了與用戶觸發(fā)操作直接相關(guān)的一系列選項。和彈窗比擬操作列表對用戶的干擾性稍弱,并支持點擊頁面空白區(qū)域關(guān)閉,一般是由用戶主動操作觸發(fā)。
使用情景在承載操作便利,和彈窗功能有重合,當操作大于3個時,改用操作列表。關(guān)于Alerts和操作列表的關(guān)系,可以理解成:嚴重且操作較少時使用alert,其他情況使用操作列表。
限制操作列表不支持滾動,需控制操作總數(shù)量,當操作過多時,可以使用網(wǎng)格式等其他自定義樣式。
浮層彈窗從頁面底部彈出的浮層,覆蓋部分頁面。彈出層相較于打開新頁面,更輕量,用戶可以更快速的完成任務(wù),更快的返回修改。浮層里支持滾動操作。
關(guān)于浮層的收起,浮層應(yīng)該有單獨的關(guān)閉按鈕,也支持點擊浮層外區(qū)域收起。
當允許用戶點擊浮層外區(qū)域收起時,可以使用戶快速切換浮層狀態(tài),但也會帶來誤觸問題。所以,當浮層內(nèi)有用戶耗費精力完成的內(nèi)容時,收起時要記錄用戶完成的工作,便利用戶再次打開浮層時可以繼續(xù)。
有時,好比支付環(huán)節(jié),我們不希望用戶輕易跳出,或用戶退出后不生存浮層內(nèi)結(jié)果時,可以僅允許用戶點擊關(guān)閉按鈕才能退出。
使用情景和當前內(nèi)容相關(guān)的小體量的任務(wù):如選擇支付寶付款碼頁,選擇付款方式。任務(wù)和當前頁面需要頻繁切換以便校驗或修改信息時:如淘寶的添加購物車浮層、查看物流信息等限制浮層空間較小,不適合承載復雜任務(wù)。
全屏彈窗