六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

很多設(shè)計師根據(jù)直覺進行產(chǎn)品設(shè)計。雖然大部分情況下是沒問題的，但是已經(jīng)證明了的通用標準可以更好的幫助你從邏輯上構(gòu)建有理有據(jù)的UI解決方案，而不是僅僅依賴于你的直覺。

本文我們將探討UI設(shè)計中的模態(tài)通用標準，討論為什么僅有兩種類型的原因，并且分析App和網(wǎng)站在將信息體系結(jié)構(gòu)和用戶信息流轉(zhuǎn)換為直觀的用戶界面是如何失敗的，本文將使用“Purrrfect”這個產(chǎn)品來講解。

兩種基本屏幕類型：模態(tài)屏幕、非模態(tài)屏幕

基本每個可視化窗口幾乎都屬于這兩類中的一個。為了理解模態(tài)與非模態(tài)的區(qū)別，我們首先要定義模態(tài)屏幕。

什么是“模態(tài)屏幕”？

模態(tài)屏幕示例

模態(tài)屏幕有不同的形狀和大小：

全屏模態(tài)視圖（左1）

彈出窗口（左2）

氣泡彈窗（左3）

燈箱彈窗（左4）

快訊/通知

...

模態(tài)屏幕和非模態(tài)屏幕這兩種類型看起來似乎很好理解，它們都從屬于App的主窗口。但是有一個重要的區(qū)別：

模態(tài)窗口

創(chuàng)建一個禁用主窗口的模式，模態(tài)窗口作為前面的子窗口使其保持可見。用戶必須先與模態(tài)窗口進行交互才能返回父級應(yīng)用程序。

 —— 維基百科

大多數(shù)模態(tài)屏幕，特別是在桌面應(yīng)用上可以輕松識別，因為它們覆蓋主窗口并且可見：主窗口背景遮罩的彈出窗，彈出菜單和彈出框?qū)υ捒?，燈箱彈框，警告?..

但是移動設(shè)備上的屏幕空間有限，這也是移動設(shè)備上的許多模態(tài)屏幕占據(jù)整個屏幕的原因。它們不再保持底層主窗口可見，所以很難將它與非模態(tài)屏幕區(qū)分開來：

iOS示例：移動設(shè)備上的模態(tài)屏幕

兩者的主要區(qū)別在于屏幕的交互方式不同。雖然非模態(tài)屏幕允許用戶簡單地返回到父級屏幕，但是模態(tài)屏幕要求用戶在返回主窗口之前完成操作（示例中為“保存”）或取消當前操作。

非模態(tài)屏幕最明顯可視信息便是導航欄（示例中為標簽欄）。即使在子級頁面，非模態(tài)屏幕也允許用戶在主導航來回跳轉(zhuǎn)。另外模態(tài)屏幕要求用戶在再次使用主導航之前必須關(guān)閉窗口（示例中為“Save ”或“ Cancel ”）。

為什么要使用模態(tài)？

模態(tài)屏幕解決了一個簡單的問題：用戶容易分心，所以有時候必須讓用戶全神貫注的進行操作。單一的模態(tài)屏幕正是要求人集中在單一的任務(wù)上，然后再繼續(xù)其他操作。

“模態(tài)通過阻止人們在完成任務(wù)或解除消息或視圖之前做其他事情來創(chuàng)造焦點” 

—— Apple

什么時候應(yīng)該使用模態(tài)？

模態(tài)屏幕的規(guī)則我們已經(jīng)了然于胸，與非模態(tài)屏幕相比，它能達到的目的是什么，應(yīng)該在什么樣的情況下使用它呢？

試想一下，我們正在創(chuàng)造一個巧妙而新穎的App：“ Purrrfect ” ， 一個小貓數(shù)據(jù)庫，它允許用戶上傳，查看和評論可愛的貓咪GIF。

資料來源：https：//giphy.com/gifs/tDgXAst2PhIYw

我們App（簡化）用戶流程如下圖所示：用戶打開App，進入幾個可用選項卡之一（我們的小貓數(shù)據(jù)庫），點擊其中一只小貓（進入詳細的單一小貓視圖），然后點擊評論部分（進入評論部分）。

Purrrfect用戶流程

另外用戶可以在每個階段執(zhí)行補充操作。例如他可以在小貓數(shù)據(jù)庫頁面中將另一只小貓?zhí)砑拥綌?shù)據(jù)庫中，又或者他可以在小貓詳情頁中編輯數(shù)據(jù)。

如何分辨模態(tài)與非模態(tài)，其實沒有那么容易，這些只是我個人的經(jīng)驗總結(jié)：對自包含過程使用模態(tài)屏幕，對其他所有內(nèi)容使用非模態(tài)屏幕。

“自包含過程”是指每個操作都有明確的起點和終點。此操作有明確的時間范圍，將用戶從一般用戶流中移出，讓他專注于操作，然后再將他帶回到開始的位置。

“需要特定的用戶任務(wù)，決策或確認的關(guān)鍵信息”

——Google

對于Purrrfect App來說，這意味著主要用戶流不是模態(tài)的。但是特殊的限時操作，如添加小貓，編輯小貓和撰寫評論都是模態(tài)的。

在用戶返回主流程之前，可以取消或保存完成所有模態(tài)操作。因此模態(tài)屏幕使用取消和保存按鈕（或其他類似操作）而不是后退按鈕。如果您的后退按鈕在非模態(tài)屏幕中觸發(fā)保存操作，您可能需要考慮使用取消和保存按鈕切換到模態(tài)屏幕。如果在模態(tài)屏幕中有兩個不同的操作，例如取消和保存，則無意義（因為它們會觸發(fā)相同的操作）您可能希望切換到非模態(tài)視圖。在這種情況下，主導航（例如標簽欄）也應(yīng)保持在屏幕上可見。

讓我們回到我們改變游戲規(guī)則的App，Purrrfect界面如下圖所示：

Purrrfect用戶界面

在實際情況中，模態(tài)和非模態(tài)屏幕之間的區(qū)別通常沒那么明顯。例如圖像全屏頁面在大多數(shù)應(yīng)用中都是模態(tài)的，盡管它不是進程或?qū)υ捒?。在一些特殊情況下，模態(tài)屏幕可能會承載頁面的焦點。如果我們的App屏幕中間是沒有其他操作（如編輯或評論）的情況，我們可能使用模態(tài)（全屏視圖）。但由于它允許用戶更深入地進入信息架構(gòu)并執(zhí)行各種附加操作（顯示注釋，編輯  ......），因此它不再具有明確的終點，因此它是主流程的一部分，所以應(yīng)該選擇非模態(tài)視圖。

設(shè)計師有責任了解清楚App的流程，評估某個操作是否應(yīng)該單獨展示，從而決定來模態(tài)是否有意義。如有疑問，請記住Apple的指導方針：

盡量減少模態(tài)的使用。通常人們更喜歡以非線性的方式與應(yīng)用交互。只有在獲得某人注意、任務(wù)必須完成或放棄，以繼續(xù)使用應(yīng)用或保存重要數(shù)據(jù)時，才考慮創(chuàng)建一個模態(tài)來連接上下層級。

——? Apple

雖然不需要嚴格區(qū)分模態(tài)和非模態(tài)，界面也可以完美展現(xiàn)。但是模態(tài)的概念深深植根于Apple，Google，Microsoft等企業(yè)的界面生態(tài)系統(tǒng)中，且用戶已經(jīng)形成了相應(yīng)的期望值。

如果Apple時不時的違反自己的規(guī)則，那么Apple將不會是Apple。例如，新版App Store在“今日”標簽中打開亮點作為模態(tài)屏幕，但仍然允許用戶在屏幕底部導航到下一步（沒有明確的終點）。這樣用戶就可以在模態(tài)屏幕內(nèi)部更深入地導航到其他流程。從推薦以外的其他內(nèi)容打開相同的App屏幕會導致屏幕顯示為非模態(tài)屏幕。這將保留標簽欄和后退操作（再次單擊當前標簽欄圖標以轉(zhuǎn)到其主屏幕）。

不一致的Apple UI

左邊的不一致可以通過....來解決

A：...在非模態(tài)子屏幕中打開高亮顯示，并帶有后退按鈕并保留標簽欄

B：...一旦用戶點擊模態(tài)屏幕內(nèi)的鏈接并繼續(xù)在App的父級別上的非模態(tài)子屏幕操作，從而關(guān)閉模態(tài)屏幕。

如何使用模態(tài)？

現(xiàn)在我們對何時使用模態(tài)有了一個大致的了解。那么“我們?nèi)绾芜M行設(shè)計？”這是目前唯一的問題。下面是對模態(tài)屏幕檢查后得到的列表：

頂部導航欄始終顯示關(guān)閉按鈕（或“取消”/“丟棄”/“最小化”/ ...）。當用戶迷路時，可以輕松關(guān)閉疊加層并導航回App的頂層。

iOS和Android上的取消按鈕通常位于導航欄的左上角。Android更喜歡關(guān)閉/“x”圖標，而iOS則喜歡“取消”文本，但是圖標按鈕在ios也很常見，經(jīng)常使用ios設(shè)備的應(yīng)該都知道。

一般情況下，iOS和Android上的保存按鈕都位于導航欄的右上角。但是這種放置規(guī)則在大屏幕設(shè)備上是不可取的。所以在屏幕底部固定浮動或頁面末端的內(nèi)嵌是我個人推薦的放置位置。

多步模態(tài)

一旦模態(tài)對話框由多個步驟或子級頁面組成，事情就會變得更加復雜。一般情況下，繼續(xù)按鈕顯示在右上角。第二步不會打開新的模態(tài)屏幕，而是保留在當前模態(tài)屏幕，并在現(xiàn)有模態(tài)上覆蓋非模態(tài)子屏幕。

當在屏幕底部放置主要操作（“保存”，“應(yīng)用”或“繼續(xù)”）時，模態(tài)第二步的右上區(qū)域釋放了可選取消按鈕的空間。雖然會從左到右跳轉(zhuǎn)，但這種方案仍然比不能在子屏幕上直接關(guān)閉更好一些。

動畫

截止目前，iOS和Android在模態(tài)的使用方面非常相似。但是動畫方面并不是這樣的。

iOS：動畫在iOS中高度標準化。

非模態(tài)屏幕從右側(cè)進入框架。標簽欄在屏幕底部保持不變。頂部的導航欄也保持不變，但其內(nèi)容在自定義轉(zhuǎn)換中淡入淡出。此動畫還為用于返回的邊緣滑動手勢提供了基礎(chǔ)。

另一方面模態(tài)屏幕從框架的底部滑入并覆蓋整個界面（新的頂部導航欄）。他們不使用邊緣滑動手勢，如果沒有保存之類的重要操作，自定義下拉關(guān)閉手勢可能會好一些。

Android： Android上的動畫更加的豐富多樣。

Google建議在Material Design指南中使用“有意義的過渡” 。Android本身并不區(qū)分動畫是否為模態(tài)或者非模態(tài)。

總結(jié)

大部分設(shè)計師根據(jù)直覺來進行產(chǎn)品設(shè)計。有時候直覺的確很重要。但是更重要的是要我們需要了解一些通用標準，以便于在特定的時候選擇更好的適應(yīng)或者改變。

在我看來模態(tài)的概念是當今應(yīng)用設(shè)計中最被忽視的UX原則之一?？缙脚_和Web本地混合應(yīng)用并不能很好的使用模態(tài)的指南和規(guī)范。但是模態(tài)的基本規(guī)則你應(yīng)該了解，以便在必要的時候適應(yīng)或者改變它。