iOS開發中,如何解決彈窗設計問題?

2020-12-12 中關村在線

雷鋒網按:本文由掘金翻譯計劃譯者llp0574譯自Douglas Hill《Preventing Popovers on Popovers》,校對者:yifili09、Graning。本文首發稀土掘金,未經允許,禁止轉載。

iOS 9的頁面用了一種我們不能復現的方式去展示一個活動視圖控制器,並且當從內部表單和彈窗呈現操作列表和活動視圖控制器時UIKit的行為一開始看起來不那麼連貫。我們提交了兩份Radars給蘋果:Can't show activity view controller filling a form sheet 和 Reading an alert controller's popoverPresentationController property changes behavior.

iOS的人機互動指南聲明:

不要在一個彈窗上展示一個模態視圖 由於一個警告彈窗可能是一個異常,所以不應該在這上面展現任何東西。極少數情況下,當你真的需要在一個動作導致彈窗後展示一個模態視圖時,應該先把彈窗關閉掉再進行展示。

並且

一次只展示一個彈窗。 展示多個彈窗會讓交互變得雜亂並讓人產生疑惑。千萬不要展示一個級聯或者有層次結構的彈窗,一個從另一個裡面產生的那種。如果你需要展示一個新的彈窗,首先關閉已經彈出的那個。

在橫向水平的普通環境和全屏緊湊的環境下具有彈窗樣式的視圖控制器都應該呈現為彈窗。具有操作列表樣式的UIActivityViewController和UIAlertController都遵守相同的規則:展示為彈窗或者一個上拉式表。所以如果一個彈窗展示一個活動視圖控制器或者一個操作列表到底會發生什麼?這個人機互動指南文檔的說法好像有點矛盾。

在iOS 9頁面的一個相關說明裡,我們注意到在一個表單的視圖控制器展示了一個填充了這個表單的UIActivityViewController,想知道這是不是一個我們之前沒有留意到的默認行為呢?又或者它是不是一個我們可以自定義實現的東西?

對於大多數視圖控制器來說,在裡面展示一個彈窗或者表單需要將當前視圖控制器的modalPresentationStyle設置為currentContext或者overCurrentContext。但對於某些像UIActivityViewController和UIAlertController這種UIKit提供的視圖控制器來說,它們已經被賦予了自己的樣式,modalPresentationStyle的變化將被忽略掉。

一般,UIActivityViewController會在常規寬度下展示為彈窗,在緊湊寬度下變成一個透明的表。但是如果一個常規寬度的視圖控制器要從一個緊湊寬度的視圖控制器裡展示會怎麼樣呢?這種情況會在一個有表格或者彈窗的modalPresentationStyle的視圖控制器要在iPad上展示,或者它是一個使用了overrideTraitCollection屬性的自定義展示控制器,然後這個控制器展示了一個UIActivityViewController。

操作列表

首先我們來看看UIAlertController。圖中根視圖控制器(青色)用彈窗樣式(下方,通過切分視圖行為以作參考)展示了第二個用表單樣式(上方)的視圖控制器(粉色)。然後第二個視圖控制器展示了一個操作列表樣式的警告控制器。

雖然我們想要用列表的展示樣式去展示操作列表(而不是彈窗),但因為關注點分離的優勢,我設置了警告控制器的popoverPresentationController.sourceView和popoverPresentationController.sourceRect,視圖控制器不應該對它怎麼展示作出假設。它應該在app的其他部分進行全屏展示,視圖控制器不應該控制這些行為。

出於好奇,我嘗試注釋掉了popoverPresentationController的定義,發生了讓我意想不到的情況:

原來只讀取警告控制器的popoverPresentationController屬性會導致即使是從一個緊湊寬度環境下呈現它也會展示為一個彈窗。如果你想這麼做,請一定要確保好視圖控制器展現的前後環境,因為如果你想從常規寬度的環境展現一個沒有設置彈窗源碼的警告控制器,UIKit就會拋出一個異常。切記在展現觸發的時候即使呈現視圖控制器是在一個緊湊寬度環境下,當展示被激活的時候它還是有可能發生改變。

我提交了一個rdar:Reading an alert controller's popoverPresentationController property changes behavior.

活動視圖控制器

用UIActivityViewController做同樣的事情,並指定彈窗源碼信息,出現下面的情況:

不同於頁面的行為,我發現表單把這個活動視圖控制器展示為一個彈窗,彈窗將活動視圖控制器展示在表單上。這是在iOS 10的新行為,iOS 9裡,是從另一個彈窗展示一個彈窗。

用同樣不訪問popoverPresentationController的技巧導致UIKit拋出一個異常說「必須為這個彈窗提供位置信息」。

結論

我們發現當UIKit的視圖控制器是從一個展示在常規寬度環境的緊湊寬度的環境中展示時行為會變得很混亂。彈窗展現的一般規則是在常規寬度下展示為彈窗,在緊湊寬度下為全屏(儘管結合當前上下環境更有意義)。操作列表和活動視圖控制器的展示有點像彈窗的展示,但不要完全按照一般的規則來展示。

實際的行為看起來像是和人機互動指南說的一樣,並很大程度上忽略了特徵集合的Size類。UIKit不會在操作列表的異常警告上展現一個彈窗。Size類並不能控制所有的東西。

我們不能重現頁面(Pages)的行為。對於我們來說,當一個表單展示一個活動視圖控制器時,它將展示為彈窗。我把這個問題報告給了Apple(Radar:Can't show activity view controller filling a form sheet)。

news.zol.com.cn true http://news.zol.com.cn/597/5975031.html report 4102 雷鋒網按:本文由掘金翻譯計劃譯者llp0574譯自Douglas Hill《Preventing Popovers on Popovers》,校對者:yifili09、Graning。本文首發稀土掘金,未經允許,禁止轉載。iOS 9的頁面用了一種我們不能復現的方式去展示一個活動視圖控制器,並且當從內部表單和彈窗呈現操作...

相關焦點

  • B端設計指南04——彈窗 究竟應該如何設計
    內容量展示優化:當內容量較少時,可以採取下拉菜單進行設計上的優化,這樣可以解決多模態層進行疊加的問題。 d.按鈕選擇 按鈕選擇主要是對彈窗交互進行的結果,一般是相對立的兩個操作進行出現,例如:「確定/取消、保存/刪除等...」 如果你對按鈕有疑惑,建議看我上一篇文章的總結——《B端設計指南03 —— 按鈕,究竟應該如何設計》。
  • 知道這些後,再也不會「濫用」彈窗了
    彈窗的類型有非常多種,所以在使用時很容易被濫用,這樣不僅會對用戶帶來困擾,也會讓我們的設計中出現細枝末節的問題。本篇文章分析和總結了不同彈窗的使用場景及工作中的實際應用,知道這些後,以後再也不會「濫用」彈窗啦!
  • 授權彈窗設計竟然套路這麼深
    PM或者UE設計師在產品設計過程中,抓住了每一個點。每一個細節都是慢慢斟酌。但是直到上線後,才發現了最致命的一個問題。授權彈窗。很多前端開發工程師嫌麻煩,會將所有彈窗都在用戶首次啟動app時,全部彈出。祈求用戶一次進行全部的授權。但是站在用戶的角度來看,對於一個陌生的產品,剛開始使用,你就需要我授權「地理位置」「照相機」「消息推送」「通訊錄」等等相關內容。
  • 《元氣騎士》ios閃退問題解決方法 ios閃退問題怎麼辦
    目前,iOS端元氣騎士更新至2.9.5(更新內容為廣告SDK更新)後,部分蘋果手機會出現閃退情況,很多玩家不知道該怎麼辦,那麼接下來小編就為大家分享一下元氣騎士ios閃退問題... 元氣騎士ios閃退怎麼辦?
  • 關於彈窗四大控制項的3個問題
    最近我一直在分析彈窗相關的知識點,原本覺得彈窗很簡單沒啥可分析的,大家基本也清楚什麼情況下該用什麼彈窗,但是發現一些同學在設計時仍然會出現濫用的情況,主要原因還是知識沒有內化。如何才能把看過的文章內化成自己的知識呢,那就是多發現問題,比如之前我在寫彈窗的總結文章時就發現了3個問題:問題一:警示類彈窗用 Alert 好還是 Action Sheets 好?
  • ios14.2rc是什麼意思 ios14.2rc版是原來的「GM」版嗎
    ios14.2rc是什麼意思 ios14.2rc版是原來的「GM」版嗎  近日,蘋果向開發者推送了 iOS 14.2 的最後一個測試版本——iOS 14.2 RC,同時宣布正式將原來的「GM」(Golden Master)更名為「RC」(Release Candidate)。
  • 《底特律變人》pc系統彈窗怎麼辦?彈窗解決方法分享
    底特律變人pc系統彈窗怎麼辦?
  • 這麼設計彈窗,還能提高轉化率的。
    在深入討論前,我們必須先從網站訪客的角度來看問題。從訪客的角度來看: ·他們希望得到有價值的東西; ·他們每天瀏覽很多營銷信息和彈窗; ·他們是視覺生物; ·他們的注意力不能持續很長一段時間; ·他們是人類。 那麼營銷人員要如何以獨一無二的方式對他們進行營銷,有效地提供有價值的東西呢?
  • App設計:「彈窗設計規範」大全,提升你的用戶體驗
    最近有來自小夥伴的求解,針對產品的彈窗該如何優化?所以來剖析下彈窗設計的規範,讓你避開那一些坑做出更好的彈窗。 一、彈窗是什麼? 彈窗是為了讓用戶回應,需要用戶與之交互的窗口。
  • 絕地求生閃退英文彈窗怎麼回事?彈BE啟動器白框解決辦法
    絕地求生閃退英文彈窗怎麼回事?彈BE啟動器白框解決辦法 絕地求生閃退英文彈窗怎麼回事?
  • 彈窗設計的基本樣式和10大應用場景
    儘管我們常說要把重心放到重要的界面中,彈窗這些小問題不用在意,但是如果我們通過學習整理,能提前規避這些問題,何樂不為呢?本篇文章就和大家分享了彈窗的基本樣式和使用注意要點,讓我們可以在實際設計時少走彎路。
  • 實戰復盤+案例拆解:APP評分功能如何做?
    那我想想辦法能不能解決吧…..沒錯,如今我們所看到的商店評分數存在水分,已經是行業內公開的秘密了,如果不加控制,就會出現前段時間釘釘被小學生打到1星的慘案…..而刷量的成本高昂,對中小公司來說也是一筆不小的支出了。作為一名產品經理,如何從產品上提供幫助呢?這時,我聯想到了之前從朋友那裡聽說的脈脈的內部案例——利用app評分功能,邀請用戶評分,一次性給其帶來上千條好評。
  • 網站設計怎樣將討厭的彈窗設計好呢?
    當你將彈窗設計及使用得恰到好處時,它們就會是非常有效的用戶界面元素。它們能幫助用戶快速且便捷地達成目標。然而當錯誤使用時,彈窗卻會困擾你的用戶。在設計彈出窗口時,必須在有限的空間內顯示重要內容。 這時,彈出頁面的簡潔性很重要。 不要在彈出界面中放置太多內容,這會使用戶不知所措。彈窗設計應符合用戶習慣在設計網站彈窗時一定要符合用戶習慣,如閱讀習慣。
  • Safari瀏覽器如何設置阻止彈窗?設置阻止彈窗方法
    最討厭的就是瀏覽器瀏覽網頁時總是會在電腦的右下角彈出一些推廣的窗口,Safari瀏覽器可以通過一些設置就將這些彈出窗口拒之門外,如何設置呢?和小編一起看看Safari瀏覽器設置阻止彈窗的步驟。側邊欄的『應用程式』,在應用程式圖標中,找到『Safari』圖標。
  • 如何取消搜狗輸入法的彈窗廣告
    每次打開電腦是,都會自動彈出一堆的彈窗和廣告。很影響心情。今天我就跟大家分享一下如何去掉這些煩人的彈窗廣告,還您電腦一片潔淨空間。選擇當前輸入法:搜狗輸入法;在桌面搜狗的懸浮工具條上,滑鼠右鍵點擊。調出修改菜單。在修改菜單中,找到「今日搜狗」下邊有3個小菜單分別是:每日新詞、皮膚推薦、搜狐微門戶 (這就是騷擾我們的3個廣告彈窗了) ,分別點開這3個內容。
  • 連平紅色旅遊資源的開發與翻譯問題如何解決?
    (一)紅色旅遊資源的開發研究這方面的研究非常豐富。羅方迪研究了中國東北地區紅色旅遊資源的開發問題,王中利則研究了遼寧西部區域的紅色旅遊開發問題。(二)紅色旅遊翻譯問題這方面的研究佔的比重也很大。目前,越來越多的外國人參與到我國紅色旅遊活動中來,因此,對於我國紅色旅遊文本的翻譯的需求也越來越大。
  • 電腦總是有廣告彈窗出來怎麼辦?教你兩招消滅系統彈窗和廣告
    其實,方法還是有很多的,不敢說完全的徹底的消滅廣告,但是做到屏蔽99%的廣告,還是沒有問題的。彈窗廣告的來源這麼多彈窗廣告究竟是那裡來的呢?如何屏蔽各種廣告針對這兩種情況,有不同的應對方法。先說網頁廣告,其實這個很好辦的,我們可以通過瀏覽器自身來解決這個問題。
  • 醜陋猥瑣還總彈窗
    很多小夥伴們都發現,近一段時間,自己的電腦中時常會彈出一個叫「FF新推薦」的廣告彈窗,擾民不說顯示的內容也很猥褻。按理說,電腦上開啟攔截軟體後,一般的廣告彈窗是不會出現的,那麼這個能跳過安全工具攔截的傢伙是何背景?能否永久地關閉它?今天小編就帶大家刨析一下它的後臺!
  • 電腦各種廣告彈窗太煩人啦,我要永久關閉,看看我怎麼解決的吧
    大家在用電腦的時候,肯定都會有這種情況發生:每次開機都會彈出「今日熱點」的廣告彈窗怎麼辦?怎麼才能把這些煩人的彈窗徹底刪除呢?話不多說,下面分享幾種解決方法。5.如果電腦裝有WPS或者360軟體的,去除這兩個的開機彈窗如下:關閉WPS熱點和廣告推送的設置方法:左鍵點擊系統桌面左下角的【開始】,在開始菜單中找到並點擊展開【WPSOffice】,在WPSOffice的展開項中點擊:配置工具;6、我們點擊配置工具以後
  • 《自由之戰2》ios版怎麼預約 iOS版預約測試資格領取方法
    導 讀 自由之戰2終於即將開啟ios版測試了,小編等了好久,因為自己一直用蘋果手機,所以測試起來不方便,