iPhone7 發(fā)布，更美的工業(yè)設(shè)計(jì)（相較于 6s 而言），更多的顏色，更高的配置，然后呢？好像沒(méi)有然后了，握著手里的 6s，找不到換機(jī)的理由。喬老爺走之后，智能手機(jī)圈再也沒(méi)有了讓人驚鴻一瞥的產(chǎn)品，想知道原因可以自己思考一下。雖然如此，iPhone 依然是這個(gè)星球上最好用的智能手機(jī)，沒(méi)有之一，嗯，小小的感慨一下。
作為交互設(shè)計(jì)師和 UI 設(shè)計(jì)師，咱們還是把把焦點(diǎn)放在 iOS10 的發(fā)布上來(lái)吧.看了官網(wǎng)關(guān)于 iOS10 的介紹，總結(jié)一句話：" 更有趣的微交互，更直觀的信息展現(xiàn)形式 "。
嘮叨完了，切入今天的正題，iOS 和 Android 里有個(gè)特殊的設(shè)計(jì)形式：臨時(shí)框，這是從 PC 時(shí)代移植過(guò)來(lái)的，對(duì)于 UE 設(shè)計(jì)師來(lái)說(shuō)，在什么情形下用哪種臨時(shí)框，是基本功之一，對(duì)于最終產(chǎn)品的用戶體驗(yàn)起到舉足輕重的作用。
根據(jù)不同的設(shè)計(jì)目標(biāo)，臨時(shí)框可以分為以下四類。
警告視圖（Alert View）
回想一下，當(dāng)聽(tīng)到一個(gè)令人震驚消息時(shí)你的反應(yīng)是？大部分人的反應(yīng)是 " 什么？" 或者 " 你說(shuō)什么？" 你潛意識(shí)的要求對(duì)方再說(shuō)一遍。為什么？因?yàn)檫@個(gè)信息太出人意外了，所以你要再次確認(rèn)下是不是真的！
同樣，當(dāng)你觸發(fā)了刪除按鈕時(shí)，App 是什么反應(yīng)？刪除的操作太敏感了，所以需要讓你再次確認(rèn)下，這就是 App 里的警告視圖 Alert View。App 要獲取位置信息；訪問(wèn)相冊(cè)和相機(jī)；讓你升級(jí) App 等等，這些都需要用到警告視圖。
警告視圖 Alert View
從上圖可以看到，警告視圖包括三個(gè)部分：標(biāo)題；正文；按鈕。有些文案簡(jiǎn)單的警告視圖只有標(biāo)題和按鈕，不需要正文來(lái)說(shuō)明。
操作列表（Action Sheet）
某天你正在用某音樂(lè) App 聽(tīng)一首歌，看著播放界面，這時(shí)候你想要查看歌手信息，專輯信息，還想要收藏這首歌 ...，在當(dāng)前頁(yè)面要滿足這這么多需求，就要用到操作列表 Action Sheet。針對(duì)當(dāng)前頁(yè)面，用戶想要執(zhí)行的操作太多了，不可能把這些操作都放出來(lái)，這樣頁(yè)面上全都是密密麻麻的 icon、button。用操作列表的形式把這些按鈕都放在一個(gè)臨時(shí)框里就完美的解決了這個(gè)問(wèn)題，perfect。
操作列表 Action Sheet
上面三張圖，看起來(lái)完全不一樣，但是原理是我上面所說(shuō)的，萬(wàn)變不離其中，只不過(guò)換了個(gè) UI 樣式。它們都屬于操作列表。
模態(tài)視圖（Modal View）
現(xiàn)在你已經(jīng)完全掌握了兩種臨時(shí)框的原理，成熱打鐵，不要停。
打開 iPhone 自帶的郵件 App，點(diǎn)擊寫郵件，這個(gè)時(shí)候頁(yè)面上底部彈出，占據(jù)了整個(gè)手機(jī)屏幕，當(dāng)寫完郵件，點(diǎn)擊發(fā)送，或者不想寫郵件了，點(diǎn)擊取消，都可以回到原來(lái)的頁(yè)面。這個(gè)頁(yè)面就叫作模態(tài)視圖 Modal View
模態(tài)視圖 Modal View
善于思考的人可能會(huì)問(wèn)，這個(gè)頁(yè)面占據(jù)整個(gè)屏幕為什么要叫臨時(shí)框？跟二級(jí)頁(yè)面不是一樣的嗎？這個(gè)問(wèn)題問(wèn)的很好，哈哈，我來(lái)解答一下。臨時(shí)框的意思并不是又占據(jù)手機(jī)屏幕的多少來(lái)決定，它的評(píng)判標(biāo)準(zhǔn)是有沒(méi)有脫離主任務(wù)。二級(jí)頁(yè)面是直接脫離了主任務(wù)，前往執(zhí)行下一個(gè)任務(wù)，但是模態(tài)知識(shí)暫停了主任務(wù)，完成了模態(tài)里的操作后會(huì)自動(dòng)回到主任務(wù)。所以你以前對(duì)臨時(shí)框這個(gè)概念的理解可能就錯(cuò)了，懂得了某個(gè)設(shè)計(jì)形式的本質(zhì)，你才能像庖丁解牛一樣游刃有余。
模特視圖有一下幾個(gè)特點(diǎn)（對(duì)照上面三種圖會(huì)更容易理解）：
①占據(jù)整個(gè)屏幕，或者占據(jù)整個(gè)父視圖的區(qū)域。
②包含完成當(dāng)前任務(wù)所需的文字和控件。
③通常也包含一個(gè)完成任務(wù)的按鈕，和一個(gè)取消按鈕。
Toast
Toast，我沒(méi)有找到與其對(duì)應(yīng)的中文，所以只能用英文了（知道恰當(dāng)翻譯的朋友可以來(lái)公眾號(hào)：UE 修養(yǎng)，給我留言），當(dāng)時(shí)這并不妨礙理解它。
上面三種視圖都有一個(gè)共同點(diǎn)，你必須執(zhí)行某個(gè)操作（點(diǎn)擊完成也好、取消也好）臨時(shí)框才會(huì)消失。當(dāng)時(shí) Toast 比較特殊，它會(huì)自動(dòng)消失，一般維持的時(shí)間是 1 秒到 1.5 秒。時(shí)間太短用戶沒(méi)辦法感知，時(shí)間過(guò)長(zhǎng)又沒(méi)有必要。
Toast
Toast 臨時(shí)框的組成比較簡(jiǎn)單，一個(gè)顏色作為打底，上面展示要提示的文案。南寧網(wǎng)站建設(shè)
那么什么情況下要用到 Toast 呢？①由于移動(dòng)端的使用場(chǎng)景很復(fù)雜，用戶執(zhí)行了某一個(gè)操作時(shí)，很多時(shí)候 App 并不能立即反饋給用戶操作結(jié)果，這個(gè)時(shí)候彈出一個(gè) Toast 提示用戶已經(jīng)執(zhí)行了該操作，會(huì)顯得很人性化，這就是用戶體驗(yàn)。②當(dāng)用戶執(zhí)行無(wú)效操作時(shí)提示用戶，該操作不正確。想象一下，如果上圖的第三張頁(yè)面，App 不提示用戶系統(tǒng)賬號(hào)無(wú)法刪除，用戶會(huì)很懵逼，因?yàn)辄c(diǎn)擊刪除按鈕毫無(wú)反應(yīng)，用戶也不清楚為什么沒(méi)反應(yīng)。③提示用戶操作錯(cuò)誤或者正確，列如 App 經(jīng)常會(huì)提示用戶：登錄成功、下載失敗、密碼輸入錯(cuò)誤。南寧APP開發(fā)
總結(jié)一下，今天講了不同臨時(shí)框的作用、使用場(chǎng)景和設(shè)計(jì)規(guī)則：
①警告視圖（Alert View）
②操作列表（Action Sheet）
③模態(tài)視圖（Modal View）
④ Toast
記住這些臨時(shí)框的名字并沒(méi)有絲毫用處，重要的是理解每種臨時(shí)框的設(shè)計(jì)原理。這樣你才會(huì)根據(jù)不同場(chǎng)景不同用戶目標(biāo)來(lái)選擇恰當(dāng)?shù)呐R時(shí)框。
