欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

柔性屏和雙屏來啦,設(shè)計(jì)師必學(xué)跨屏設(shè)計(jì)規(guī)范

2020-3-13    濤濤

我們總在期待 Next Big Thing,企盼下一次數(shù)字革命。喊了這么多年的物聯(lián)網(wǎng)現(xiàn)在還沒有明顯起來的跡象,而 VR 也因?yàn)轭^戴設(shè)備的大型化和沉浸式場景的泛用性較差的原因,反倒是 AR 和 MR 依托智能手機(jī)、浴霸式鏡頭組和 APP 有一定起色,但是也沒有到革命性改變的程度,只能算是一個(gè)小趨勢。當(dāng)然,人工智能/深度學(xué)習(xí)所帶來的影響更加深遠(yuǎn),但是短時(shí)間以內(nèi),它所帶來的變化趨近于隱形。

而最近2年,各種雙屏和柔性屏的發(fā)布,則可能是距離我們最近的硬件變革,可能和柔性屏/雙屏設(shè)備有關(guān)。

也許現(xiàn)在說硬件交互設(shè)計(jì)到了類似 2007 年 iPhone 發(fā)布一樣拐點(diǎn)有點(diǎn)夸張,但是對(duì)于現(xiàn)在幾乎純粹拼配置死水微瀾一樣的手機(jī)電腦市場而言,這種明顯區(qū)別于以往的硬件設(shè)計(jì),將會(huì)直接帶來交互、設(shè)計(jì)和體驗(yàn)上的改變。

柔性屏和雙屏設(shè)備

2019年是否算得上是雙屏設(shè)備元年,現(xiàn)在下結(jié)論為時(shí)過早,但是去年三星 Galaxy Fold 和 Moto Razr 的發(fā)布,確實(shí)給廣大硬件廠商好好打了一個(gè)樣。

盡管Galaxy Fold 去年折戟沉沙了,但是高昂的沉沒成本和大勢所趨讓三星肯定不能就這么算了, 回爐再造一番之后今年又帶著船薪版本的 Galaxy Fold 2 殺將回來,順帶還兼顧女性市場整了一個(gè)對(duì)標(biāo) Moto Razr 的化妝盒手機(jī) Galaxy Z flip。

圖片來自 TheVerge

當(dāng)然,華為的 Mate Xs 也是相當(dāng)優(yōu)秀的產(chǎn)品,這款明顯對(duì)標(biāo)三星 Galaxy Fold 2 的產(chǎn)品,并沒有將柔性屏制作成為向內(nèi)折疊,而是完全翻過來,將它作為外屏來進(jìn)行設(shè)計(jì),反向折疊,展開的時(shí)候,屏幕自然延展。

圖片來自 TheVerge

不過思路最為清奇的并非是華為,而是 TCL。就在這幾天,TCL 帶來了兩款全新的原型機(jī),一款手機(jī)帶有兩個(gè)折疊軸,相當(dāng)于是將傳統(tǒng)手機(jī)屏幕延展到以往的3倍,徹底折疊開相當(dāng)于是一個(gè) 10英寸的平板電腦(回過頭來想,就像是將一個(gè)平板電腦反向折疊到手機(jī)的大小,但是重量不變……)。

圖片來自 TheVerge

另外一款原型機(jī)則選擇了抽拉式的設(shè)計(jì),機(jī)身可以如同抽屜一樣拉開,柔軟的屏幕會(huì)被拉出,延展開來差不多和 iPad Mini 一個(gè)大小了。

圖片來自 TheVerge

圖片來自Engadget

除了這幾款之外,在今年年初的 CES 消費(fèi)電子展上,聯(lián)想、戴爾、華碩,這些目前世界上最大的消費(fèi)電子制造商,紛紛帶來了各自的折疊屏和雙屏設(shè)備。

聯(lián)想帶來的 ThinkPad X1 Fold,是一個(gè)價(jià)格昂貴的柔性折疊屏平板電腦,它額外附帶了一個(gè)藍(lán)牙鍵盤。

圖片來自 TheVerge

考慮到聯(lián)想在此之前已經(jīng)發(fā)布過帶有LEC+墨水屏的雙屏設(shè)備 Yoga Book 2,可以說聯(lián)想是已經(jīng)具備了制造兩種不同類型屏幕設(shè)備的能力。

作為對(duì)手的戴爾,帶來了分別對(duì)標(biāo)聯(lián)想這兩個(gè)系列的對(duì)應(yīng)產(chǎn)品:Concept Ori 和 Concept Duet。

Concept Ori 采用的是兩塊傳統(tǒng)硬屏,你既可以讓一款屏幕作為屏幕,另一塊作為虛擬輸入鍵盤或者手繪板,也可以使用配備的藍(lán)牙鍵盤,吸附在底下的屏幕上來進(jìn)行輸入,而且當(dāng)鍵盤移動(dòng)到靠近轉(zhuǎn)軸的地方,還能讓底下露出的半塊屏幕作為觸控板來使用:

圖片來自 TheVerge

Concept Duet 在概念上則和 聯(lián)想的 ThinkPad X1 Fold 類似,一塊柔性可折疊的屏幕,便于收納,一體連接。

圖片來自 TheVerge

看了這么多硬件,是不是覺得信息量有點(diǎn)大?不過簡單來說,所有的這些產(chǎn)品,都在說一件事情:屏幕要延展開,這是一個(gè)正在發(fā)生的趨勢。

同時(shí),我們還注意到一個(gè)很明顯的特征,就是所有的這些柔性屏設(shè)備都非常的……騷,且貴。動(dòng)輒兩三千美元的起步價(jià),如果可靠堅(jiān)挺也就算了,不僅轉(zhuǎn)軸易損,且屏幕也存在易損的問題。根據(jù) ifanr 的上手評(píng)測,即使是在優(yōu)化了轉(zhuǎn)軸和屏幕折疊角度之后,三星所發(fā)布的 Galaxy Z Flip 的屏幕中段依然有著不可忽視的折痕,這一問題可能會(huì)是絕大多數(shù)折疊柔性屏設(shè)備的通病。

圖片來自愛范兒

與之相反,采用硬質(zhì)雙屏設(shè)計(jì)的硬件設(shè)備,從生產(chǎn)成本、工藝成熟度、價(jià)格上,都更加有優(yōu)勢。

值得注意的是,柔性折疊屏和硬質(zhì)雙屏設(shè)備,在基本的使用體驗(yàn)和邏輯上是一致的,除了極少數(shù)特殊的設(shè)備之外(比如 TCL的雙折疊式的概念機(jī)),多數(shù)情況下,兩者是差不多的。

只不過存在一個(gè)問題,雙屏設(shè)備的交互和體驗(yàn),需要有對(duì)應(yīng)操作系統(tǒng)支持,因?yàn)閺膯纹恋诫p屏,其實(shí)交互邏輯已經(jīng)發(fā)生了巨大的改變。

雙屏硬件的操作系統(tǒng)

一直在創(chuàng)新且「穩(wěn)健」地更新軟硬件的蘋果公司,應(yīng)該不會(huì)在市場未曾成熟的情況下選擇發(fā)布硬件,這意味著你不會(huì)很快看到雙屏 iOS 硬件,而面向著大量 OEM 廠商的 Android 和 Windows 則截然不同。著兩年廠商已經(jīng)身體力行證明了一件事情:只要操作系統(tǒng)和設(shè)計(jì)跟上,硬件馬上量產(chǎn)不是問題。

最近泄漏的 Android 11 的新特性已經(jīng)出現(xiàn)了可折疊屏幕的影子,但是具體情況恐怕要到因?yàn)橐咔樘钡?Google I/O 大會(huì)上會(huì)揭曉答案。但是另一邊,賊心不死的微軟,已經(jīng)開始布局面向可雙屏設(shè)備的新一代操作系統(tǒng) Windows 10X了。

圖片來自 TheVerge

去年微軟發(fā)布的兩款雙屏設(shè)備 Surface Duo 和 Surface Neo 并不都是采用尚未發(fā)布的 Windows 10X 操作系統(tǒng),但是兩者都沿用了幾乎相同的交互邏輯,較小的 Neo 采用的是 Android 操作系統(tǒng)。這兩款硬件和系統(tǒng)交互設(shè)計(jì),將會(huì)在未來一段時(shí)間以內(nèi),成為雙屏硬件的軟件交互的重要參考和主要標(biāo)桿,聯(lián)想和戴爾這波 OEM 廠商,無疑是參考著微軟的風(fēng)向標(biāo)來搞硬件產(chǎn)品的。

圖片來自 TheVerge

傳統(tǒng)而臃腫的「開始」菜單欄在 Windows 10X 當(dāng)中,被精簡為我們更熟悉的模式,新的 Windows 10X 在原有的 Windows 10 的基礎(chǔ)上,應(yīng)該有對(duì)移動(dòng)端(比如 ARM 架構(gòu)的CPU)和小屏幕有更好的支持。

但是,更有價(jià)值的,是微軟為雙屏設(shè)備所制定的交互設(shè)計(jì)規(guī)范。

下面是基于微軟官方文檔,精簡編譯后的規(guī)范:

雙屏的交互規(guī)則

雙屏交互概述

雙屏設(shè)備可以基于不同的工業(yè)設(shè)計(jì),有多種硬件樣式。微軟發(fā)布的 Surface Neo 和 Surface Duo 可以作為典型的雙屏設(shè)備作為參考。雙屏本身可以借由鉸鏈、轉(zhuǎn)軸來連接,也可以基于柔性屏來實(shí)現(xiàn)。

所有的雙屏設(shè)備都具備有折疊、旋轉(zhuǎn)、翻轉(zhuǎn)的功能,兩塊屏幕都可以用來作為顯示,也可以一個(gè)做屏幕一個(gè)承載虛擬鍵盤,當(dāng)然也可以借由外設(shè),構(gòu)建、組合成為新的模式。所以,為這樣的硬件設(shè)計(jì)的時(shí)候,需要考慮到各種不同的情況,并且適配硬件,幫助用戶實(shí)現(xiàn)更多的目標(biāo)。

圖片來自 TheVerge

當(dāng)用戶打開應(yīng)用的時(shí)候,它的主要界面窗口應(yīng)該最大化,占據(jù)一塊屏幕的全寬和全高。這樣用戶可以一次打開多個(gè)不同的應(yīng)用,顯示在雙屏上。

圖片來自 TheVerge

當(dāng)然,你的APP 也可以完整鋪滿兩個(gè)屏幕,這個(gè)界面布局被稱為「跨屏布局」。在默認(rèn)情況下,它應(yīng)該像在大屏幕上一樣,一個(gè)窗口跨屏幕顯示。但是你可以修改這種模式,讓它可以鋪滿兩個(gè)屏幕的同時(shí),還可以兼顧到中間有轉(zhuǎn)軸和鉸鏈的硬件。對(duì)于這個(gè)問題,我們隨后有詳細(xì)的討論。

1、擁抱和改進(jìn)現(xiàn)有的功能

響應(yīng)式布局

比起傳統(tǒng)的響應(yīng)式布局,對(duì)于雙屏硬件,我們要討論的「響應(yīng)」模式要復(fù)雜得多。就像下面這張圖中所說的,要為這樣多樣、復(fù)雜的情況進(jìn)行設(shè)計(jì):

我們默認(rèn)用戶在多數(shù)時(shí)候,是處于雙屏展開的狀態(tài),當(dāng)用戶打開 APP 的時(shí)候,它的主要界面窗口,將會(huì)最大化占據(jù)一個(gè)屏幕,這個(gè)時(shí)候另一個(gè)屏幕處于空置狀態(tài),用戶可以在這個(gè)屏幕上打開另外的應(yīng)用,并且用戶可以通過托拽窗口的方式,來重新整理窗口和APP的排布模式。

同時(shí),單個(gè)應(yīng)用程序也應(yīng)該可以進(jìn)行跨屏布局,既可以讓單個(gè)應(yīng)用分別在兩塊屏幕上各呈現(xiàn)一個(gè)窗口,也可以作為單個(gè)窗口完整鋪滿兩塊屏幕。不論是充分利用接縫的存在,還是說盡可能地利用全部屏幕區(qū)域來聚焦單個(gè)內(nèi)容,應(yīng)用程序應(yīng)該都可以做到。當(dāng)然,這些情況我們隨后會(huì)單獨(dú)說到。

2、擁抱和改進(jìn)現(xiàn)有的功能

首先,作為一個(gè)已有的應(yīng)用程序,在雙屏設(shè)備上應(yīng)該能夠繼承原有的功能,并且盡可能地兼容雙屏的體驗(yàn)。在開始討論如何為雙屏場景進(jìn)行設(shè)計(jì)應(yīng)用之前,我們先應(yīng)該對(duì)雙屏交互進(jìn)行介紹。

雙屏的響應(yīng)式布局

首先,無論屏幕尺寸如何,方向如何,應(yīng)用程序應(yīng)該都可以保持良好的外觀,善用 UI 平臺(tái)的現(xiàn)有的布局技術(shù),通過合理地縮放來自適應(yīng),填滿屏幕。如果你的屏幕元素依賴屏幕長寬比,那么應(yīng)該善用平臺(tái)給的 API 來進(jìn)行靈活的優(yōu)化。

考慮到你的應(yīng)用將會(huì)在很多不同尺寸、不同長寬比、不同類型的設(shè)備上運(yùn)行,所以你的應(yīng)用程序應(yīng)該足以應(yīng)對(duì)各種不同的情況。請記住,你的設(shè)計(jì)將會(huì)遭遇和以往截然不同的屏幕尺寸和長寬比,比如縱向(全景視圖)、橫向(較寬的全景視圖)、縱向雙屏分別顯示等不同情況。

考慮所有的屏幕方向

用戶在很多平臺(tái)上有習(xí)慣的、常見的屏幕方向,比如在 Android 和 iOS 上,通常應(yīng)用是豎屏顯示的,在 Windows 上,多數(shù)情況下是橫向全屏顯示的。而在雙屏設(shè)備上,這種情況會(huì)發(fā)生改變。

比如你的應(yīng)用原本是為豎屏設(shè)計(jì)的,但是需要經(jīng)常輸入內(nèi)容,那么你要考慮到雙屏設(shè)備上,你的應(yīng)用可能是會(huì)被橫屏顯示,用戶會(huì)像用筆記本電腦那樣來使用應(yīng)用,也就是說兩塊屏幕都橫向顯示,靠下平攤在桌面的屏幕會(huì)顯示虛擬鍵盤或者手寫區(qū)域,作為輸入窗口,而顯示窗口也是橫向的。

雙屏為多任務(wù)提供更好的顯示環(huán)境,你不會(huì)知道用戶會(huì)在什么樣的場合,以什么樣的姿勢來握持設(shè)備,但是考慮潛在的使用姿態(tài),可以讓你更好得對(duì)應(yīng)用進(jìn)行設(shè)計(jì)和優(yōu)化。

根據(jù)我們的研究,如果你的應(yīng)用是注重輸入的應(yīng)用,那么用戶在平面上打字和輸入將會(huì)是最舒服也最常見的姿勢。那么在這種情況下,你應(yīng)該針對(duì)橫屏顯示進(jìn)行針對(duì)性的優(yōu)化。

支持多種輸入模式

對(duì)于新的雙屏設(shè)備,通常都支持多種輸入模式,包括打字輸入,屏幕觸摸和手寫筆這樣的截至。這意味著用戶可以靈活地根據(jù)需求,選擇不同的姿勢和輸入模式,并且快速切換,以適應(yīng)不同的需求。

換句話來說,就是你在設(shè)計(jì)的時(shí)候,需要支持所有的輸入方式,以便用戶可以自由選擇交互模式。

托拽交互

你的應(yīng)用應(yīng)該支持屏幕托拽,這不僅是為了兼容雙屏設(shè)備,而是對(duì)于絕大多數(shù)的設(shè)備的使用情況而進(jìn)行兼容,確保用戶體驗(yàn)的一致和靈活。只不過相比于在屏幕單屏上進(jìn)行托拽移動(dòng),在雙屏上托拽移動(dòng),將會(huì)帶來更多的可能性,并且這樣也將會(huì)在雙屏使用場景之下,最為重要的交互模式之一。

為了確保托拽操作的自然,你需要確保諸如文本、圖像、視頻等常見的交互對(duì)象和元素,可以在任何地方進(jìn)行剪切、復(fù)制、粘貼,并且對(duì)于共享和放松之類的操作也啟用托拽操作,這將最大化地利用雙屏的優(yōu)勢。

應(yīng)用的多屏呈現(xiàn)

用戶會(huì)希望在兩塊屏幕上并排顯示同一應(yīng)用中的不同內(nèi)容,因此你的你用應(yīng)該支持多實(shí)例呈現(xiàn)和運(yùn)行。

多媒體內(nèi)容畫中畫體驗(yàn)

如果你的應(yīng)用是一個(gè)多媒體應(yīng)用,那么應(yīng)該支持畫中畫模式,用戶可以邊看視頻邊執(zhí)行別的操作。

3、雙屏用戶體驗(yàn)常見注意事項(xiàng)

上面提及的很多功能屬于基礎(chǔ)應(yīng)用要求,并不是專門針對(duì)雙屏設(shè)備而做,但是如果你的應(yīng)用支持上面的功能,那么在雙屏上將會(huì)明顯擁有更好的用戶體驗(yàn)。接下來,我們著重聊一下在雙屏設(shè)備上進(jìn)行設(shè)計(jì)的問題。

在雙屏設(shè)備上,你的應(yīng)用應(yīng)當(dāng)支持在單個(gè)屏幕上運(yùn)行,也可以在雙屏上運(yùn)行,當(dāng)一個(gè)應(yīng)用在兩個(gè)屏幕上顯示的時(shí)候,我們稱之為「跨屏」,而跨屏顯示這個(gè)問題對(duì)于雙屏設(shè)備而言,是至關(guān)重要的,如何顯示將會(huì)帶來巨大的影響。這種獨(dú)特交互模式可能會(huì)解鎖前所未有的使用方法。比如,有轉(zhuǎn)軸和接縫的雙屏設(shè)備,因?yàn)槠聊坏奶卣鞫浅_m合分隔并行式的生產(chǎn)力解決方案。

  1. 在設(shè)計(jì)雙屏設(shè)備之前,你需要遵循下面的四個(gè)基本原則:
  2. 提供持續(xù)的價(jià)值:能夠良好地支持不同的交互模式,充分利用不同交互模式和多屏交互,讓用戶可以靈活地執(zhí)行任務(wù)。它不應(yīng)該只有有限的使用方法和模式,與其簡單的支持一兩種模式,不如多考慮幾種不同的交互模式。
    不要只想著「跨屏」:應(yīng)用不應(yīng)該只在跨屏狀態(tài)下才好用,不要將一些基本的功能在非跨屏狀態(tài)下隱藏,避免用戶需要跨屏才能用到基本功能。
  3. 用戶始終享有掌控力:為了避免給用戶帶來不可預(yù)期的破壞性體驗(yàn),是否要跨屏,這個(gè)應(yīng)該由用戶自己來進(jìn)行選擇,而不是一打開就跨屏。
  4. 讓跨屏可預(yù)測:了解用戶使用跨屏模式的場景,并且使用貼合用戶預(yù)期的設(shè)計(jì)。確保不同的跨屏模式和呈現(xiàn)結(jié)果是用戶可預(yù)期的。

跨屏是用戶的選擇

用戶有選擇如何使用應(yīng)用的方式的權(quán)力,包括何時(shí)跨屏顯示。某些應(yīng)用可能在單屏或者跨屏顯示的時(shí)候,看起來不夠好看,但是如何使用的權(quán)力,應(yīng)該交給用戶去選擇。

盡管本文會(huì)針對(duì)如何處理多屏布局提供幾種不同的方案和想法,但是請選擇適合你的用戶和應(yīng)用的呈現(xiàn)方式。

考慮用戶意圖和設(shè)備方向

當(dāng)你的兩個(gè)屏幕都被利用起來的時(shí)候(橫向雙屏,縱向雙屏),了解用戶的意圖至關(guān)重要。盡管還有更多的調(diào)研需要做,但是結(jié)合我們目前已有的觀察,可以得出如下的趨勢:

  • 在橫向雙屏模式下,用戶更多希望充分利用屏幕空間,因此量屏幕多是用來擴(kuò)展展示內(nèi)容;
  • 在縱向雙屏模式下,用戶通常喜歡執(zhí)行多任務(wù)或者提高生產(chǎn)力的活動(dòng)。因此這兩塊屏幕會(huì)被分開使用,或者分組使用。
    考慮所有支持的布局

在為雙屏設(shè)備設(shè)計(jì)應(yīng)用的時(shí)候,有四種常見的布局方案是你需要考慮的。通常這取決于應(yīng)用是單屏還是跨屏,是默認(rèn)視圖還是全屏視圖:

1、單屏默認(rèn)模式

  • 默認(rèn)情況下,應(yīng)用程序應(yīng)該是最大化狀態(tài)占據(jù)一個(gè)屏幕。在雙屏分別顯示模式下,用戶可以單獨(dú)同兩屏的應(yīng)用界面進(jìn)行交互和處理,確保可以進(jìn)行使用、比較甚至交叉引用。
  • 這個(gè)狀態(tài)應(yīng)該是默認(rèn)的。就像 之前說的,如果你的應(yīng)用已經(jīng)支持了不同分辨率、不同長寬比的屏幕,那么你不用做其他更多的事情。

2、跨屏默認(rèn)模式

  • 當(dāng)設(shè)備處于雙屏狀態(tài)下(橫屏雙屏或者豎屏雙屏),用戶可以將單個(gè)窗口從一個(gè)屏幕直接延伸覆蓋兩個(gè)屏幕,為內(nèi)容呈現(xiàn)提供更多的空間。這應(yīng)該是用戶自己的選擇,而不應(yīng)該作為默認(rèn)打開的模式固化到程序和設(shè)置當(dāng)中。
  • 這一模式應(yīng)該是可選的。這種跨屏顯示單個(gè)窗口的模式,應(yīng)該是雙屏設(shè)備所獨(dú)有的。如果你對(duì)于你的應(yīng)用不做 針對(duì)性(針對(duì)雙屏)的修改的話,它會(huì)像是在一個(gè)完整的大屏幕上顯示一樣。但是,你也可以針對(duì)雙屏進(jìn)行優(yōu)化,確保你的應(yīng)用可以兼容雙屏設(shè)備的獨(dú)特形態(tài)。這些將在后續(xù)詳細(xì)說明。

3、單屏全屏模式

  • 這種模式和之前的單屏默認(rèn)模式是類似的,但是系統(tǒng)的UI(系統(tǒng)的任務(wù)欄、菜單欄、程序菜單、頂部標(biāo)題等)將會(huì)隱藏,這樣可以給你帶來沉浸式的體驗(yàn),是游戲和視頻類應(yīng)用的理想選擇。
  • 這種模式應(yīng)該是可選的。你可以使用系統(tǒng)提供的 API 來實(shí)現(xiàn)單屏全屏模式。

4、跨屏全屏模式

  • 同樣的,你可以通過開發(fā)和優(yōu)化來實(shí)現(xiàn)適合雙屏的跨屏顯示模式。如果用戶在跨屏的時(shí)候選擇的是跨屏全屏顯示模式,那么應(yīng)用在擴(kuò)展之后,將會(huì)覆蓋整個(gè)屏幕,并隱藏系統(tǒng)UI 元素。
  • 這種模式應(yīng)該是可選的,你需要考慮的因素和跨屏默認(rèn)模式類似。

4、如何處理接縫

當(dāng)單個(gè)應(yīng)用以單個(gè)窗口運(yùn)行,并且跨越兩個(gè)屏幕的時(shí)候,跨屏布局就出現(xiàn)了。如果你原有的應(yīng)用從未針對(duì)雙屏設(shè)備進(jìn)行優(yōu)化的話,那么系統(tǒng)會(huì)提示你「應(yīng)用將會(huì)擴(kuò)展并占據(jù)所有屏幕」,并且這個(gè)時(shí)候,應(yīng)用界面會(huì)自行調(diào)整大小,適應(yīng)新的尺寸。

這種情況下,界面中間的接縫會(huì)顯得非常明顯。這是雙屏設(shè)備先天的副產(chǎn)物。要如何優(yōu)雅地處理接縫?這就是下面這節(jié)內(nèi)容將會(huì)探討的問題,我們將會(huì)提供一些常見的處理方案yi。

是否總是要適應(yīng)接縫?

如果你的應(yīng)用不作任何優(yōu)化就直接在雙屏設(shè)備上投放使用,接縫并不總會(huì)給用戶體驗(yàn)帶來影響。比如地圖類應(yīng)用,用戶可以隨意移動(dòng)地圖內(nèi)容,接縫帶來的割裂并不會(huì)對(duì)使用體驗(yàn)造成實(shí)質(zhì)性的影響。在后面「擴(kuò)展畫布」這一節(jié),將會(huì)對(duì)這個(gè)問題進(jìn)行深入討論。

但是對(duì)于另外一部分應(yīng)用,接縫帶來的問題就非常嚴(yán)重了。比如在一個(gè)表格類應(yīng)用當(dāng)中,如果不作修改和調(diào)整,有的內(nèi)容會(huì)直接被接縫給割裂開,你必須進(jìn)行滾動(dòng)才能正常查看。而對(duì)于某些相對(duì)更加固定無法移動(dòng)的元素而言,接縫帶來的體驗(yàn)是破壞性的。而這個(gè)時(shí)候,我們需要使用一些技術(shù)方案來處理這個(gè)問題。

規(guī)避接縫

將元素移到一邊

由于兩塊屏幕之間有明顯的接縫,因此當(dāng)用戶在使用應(yīng)用的時(shí)候,某些 UI 元素可能會(huì)正好被穿過接縫,邏輯上這不會(huì)影響功能,但是如果將這些 UI 元素移動(dòng)到屏幕的一邊來顯示,會(huì)提供更好的體驗(yàn)。最好避免在接縫處顯示文本內(nèi)容,這會(huì)影響可讀性。

應(yīng)用程序?qū)υ捒驊?yīng)該移到屏幕的一邊,尤其是需要點(diǎn)擊按鈕操作的時(shí)候。

底部菜單應(yīng)該移動(dòng)到屏幕一側(cè),而不是延伸到兩個(gè)屏幕上。

用戶調(diào)用上下文菜單的時(shí)候,應(yīng)該將接縫視作為屏幕邊界處理,尤其是在靠近屏幕邊緣的地方觸發(fā)菜單的時(shí)候。

應(yīng)用內(nèi)的下拉菜單或者可擴(kuò)展容器如果可能會(huì)跨越接縫的話,應(yīng)該改變擴(kuò)展方向。

當(dāng)整個(gè)應(yīng)用界面擴(kuò)展開來的時(shí)候,應(yīng)該整個(gè)移動(dòng)到屏幕的上側(cè),而不是在靠近中心的位置橫跨接縫。

貼合接縫

使用偶數(shù)列并和接縫對(duì)齊

當(dāng)界面中使用網(wǎng)格布局的時(shí)候,垂直或者水平方向盡量使用偶數(shù)行或者偶數(shù)列,這樣可以讓接縫和界面間隙正好重合,用戶可以更加舒適地查看信息。

在網(wǎng)格中使用偶數(shù)列,尤其是對(duì)于容器、表單,并且考慮到接縫來控制間距。

除此之外,還有許多應(yīng)用會(huì)考慮充分利用另外一個(gè)屏幕來顯示彈出菜單或者下級(jí)頁面的內(nèi)容。這種使用邏輯確實(shí)會(huì)讓應(yīng)用更加易用,并且在視覺上會(huì)更加干凈清爽。但是請記住,如果彈出的界面并不是全屏的,可能會(huì)暗示它是可折疊和可關(guān)閉的,因此,你需要根據(jù)實(shí)際的設(shè)計(jì)需求,來靈活的處理呈現(xiàn)樣式。全覆蓋另外一屏的彈出界面,更加適合小尺寸屏幕。

重新排列 UI 元素

移動(dòng)到接縫的任一側(cè)

還有一種用來優(yōu)化響應(yīng)式布局的方法是,當(dāng)屏幕方向或者大小發(fā)生變化的時(shí)候,重新排列你的內(nèi)容。這種方式讓你可以在兩個(gè)屏幕上隨意擴(kuò)展你的內(nèi)容,你可以通過分組來重新排列,以更有目的的方式來適配屏幕和內(nèi)容。

遮罩和分割

對(duì)于一些無法重新排列的元素,比如全屏圖片和視頻,這個(gè)時(shí)候只能使用遮罩和分割的方式來處理。

遮罩的思路是,將接縫視作為一個(gè)遮罩元素,而圖片被它給遮擋了一部分,根據(jù)格式塔原理,我們的大腦會(huì)自動(dòng)補(bǔ)足缺少的部分,遮罩遮罩處理方式適合處理多媒體(視頻,圖片等)這樣的畫布類型的場景,在這些場景下,保持圖像的連續(xù)性比顯示內(nèi)容的完整性更加重要。

分割的思路是將內(nèi)容均勻切割為兩個(gè)部分,完整呈現(xiàn),這對(duì)于包含有多個(gè)控件和元素的普通界面而言,是更加合理的處理方式,包括可能會(huì)出現(xiàn)在屏幕中間的按鈕。

根據(jù)類型的不同,這兩種處理方式各有優(yōu)勢,我們將繼續(xù)跟進(jìn)不同的用戶行為特征,來尋求更優(yōu)的解決方案。

文章來源:優(yōu)設(shè)   

日歷

鏈接

個(gè)人資料

存檔

99国产精品欲| 日本一级淫片演员| 亚洲一区二区观看| 中文字幕在线永久在线视频| 韩国精品福利一区二区三区| 99精品久久免费看蜜臀剧情介绍| 精品中文视频在线| 日韩高清国产一区在线观看| 中文字幕第69页| 黄色网址在线免费| 亚洲激情网站| 欧美性猛片aaaaaaa做受| 成人做爰www免费看视频网站| 欧美专区第二页| 操操操综合网| 日韩电影一区| 亚洲成年人网站在线观看| 欧美影院在线播放| 午夜xxxxx| 黄色高清在线观看| 爽成人777777婷婷| 亚洲成av人在线观看| 国产精品美女在线| 中文字幕在线视频播放| 日本一区高清| 一区二区三区四区在线观看国产日韩| 亚洲成人激情综合网| 国产精品成人一区二区三区吃奶| 人妻体体内射精一区二区| 亚洲 欧美 激情 另类| 国产亚洲第一伦理第一区| 亚洲最新在线观看| 国产精品视频专区| 亚洲人人夜夜澡人人爽| 三级外国片在线观看视频| 一区二区三区成人精品| 欧美电影一区二区| 日本日本精品二区免费| 日本熟妇毛茸茸丰满| 色成人免费网站| 99久久777色| 九九精品在线观看| 粉色视频免费看| 最新精品视频在线| 欧美激情第二页| 欧美日韩精品一区二区在线播放 | 国产a√精品区二区三区四区| 中文在线视频| 樱桃成人精品视频在线播放| 欧美人体做爰大胆视频| 午夜精品美女久久久久av福利| 日韩三级免费看| 欧美在线一级| 国产精品久久久久久久裸模| 国产精国产精品| wwwwxxxx国产| av美女在线观看| 成人97人人超碰人人99| 欧美国产亚洲精品久久久8v| 亚洲第一区第二区第三区| 男人的天堂在线视频| 亚洲在线免费| 亚洲女人被黑人巨大进入al| 久久国产成人精品国产成人亚洲 | 色播在线视频| 激情欧美一区二区三区| 精品不卡在线视频| 无码播放一区二区三区| 日韩一级中文字幕| 国产综合网站| 亚洲激情在线观看| 看av免费毛片手机播放| 中文字幕大看焦在线看| 亚洲免费在线| 永久免费看mv网站入口亚洲| 五月婷婷狠狠操| 精品福利视频导航大全| 麻豆精品视频在线观看免费| 色婷婷成人综合| 91视频福利网| 伊人手机在线| 99视频一区二区| 国产成人精品日本亚洲| 貂蝉被到爽流白浆在线观看| 日韩制服一区| 亚洲女同一区二区| 好吊色欧美一区二区三区 | 99国产精品久久久久久| 日本中文字幕在线观看| 国产精品一区二区三区99| 久久久女女女女999久久| 黄色在线观看av| 成人性生活av| 亚洲欧美日韩在线不卡| 精品国产综合| 136福利视频导航| 天天综合一区| 亚洲精品久久久久久久久久久久| 国产av人人夜夜澡人人爽| www日韩tube| 成人性生交大片| 国产精品欧美激情在线播放| 欧美人与禽zozzo禽性配| 福利电影一区| 欧美精品成人一区二区三区四区| 日韩亚洲欧美视频| 欧美69xxxxx| 国产成人欧美日韩在线电影| 国产成人精品免高潮费视频| 久久免费在线观看视频| 偷窥自拍亚洲色图精选| 日韩一区二区在线播放| 成人精品视频一区二区| 国内精品久久久久国产| 久久亚洲免费视频| 97在线中文字幕| 在线观看免费观看在线| 国产精品大片| 精品国产一区久久久| 人妻丰满熟妇av无码久久洗澡| 成人午夜毛片| 天天综合色天天综合| 天天爱天天做天天操| 在线免费91| 国产99精品在线观看| 国产精品视频内| av网站中文字幕| 亚洲男女av一区二区| 最近2019中文字幕在线高清| 日本japanese极品少妇| 日本电影久久久| 欧美亚洲禁片免费| 日本熟妇人妻xxxxx| 在线中文字幕-区二区三区四区| 国产日韩欧美制服另类| 国产一区二区三区免费不卡| 亚洲老妇色熟女老太| 久久精品国产在热久久| 国产精品成人av在线| 无码人妻一区二区三区线| 欧美三区不卡| 欧美国产日韩视频| 在线免费观看毛片| 亚洲精品中文字幕乱码| 日韩在线观看免费| 视频国产一区二区| jiujiure精品视频播放| 在线观看久久久久久| 欧美日韩生活片| 国产影视精品一区二区三区| 亚洲视屏在线播放| 美国黑人一级大黄| 自拍偷拍欧美一区| 亚洲性猛交xxxxwww| 美国美女黄色片| 精品国产乱码久久久| 日韩在线视频观看正片免费网站| 欧美日韩午夜视频| 99精品视频在线观看免费播放| 久久精品中文字幕一区| 欧美日韩国产精品综合| 欧美成人中文| 97色在线视频观看| 日韩熟女一区二区| 老司机精品导航| 国产日韩在线观看av| 精品久久久中文字幕人妻| 国产一区二区久久| 国产麻豆乱码精品一区二区三区| 黄色小视频在线播放| 久久先锋影音av鲁色资源| 无码免费一区二区三区免费播放 | 国产精品免费观看视频| 日韩成人午夜影院| 免费在线国产视频| 在线亚洲+欧美+日本专区| 国产福利精品一区二区三区| 国产午夜精品一区在线观看 | 成人在线免费观看av| 另类图片综合电影| 91精品免费在线| wwwwww日本| 成人嫩草影院| 国内精品一区二区三区| 中文字幕人妻一区二区在线视频| 麻豆精品视频在线观看| 精品国产乱码久久久久久丨区2区| 色资源在线观看| 亚洲毛片av在线| 欧美日韩亚洲一二三| 亚洲国产伊人| 亚洲男人天堂久| 欧美成人三级视频| 亚洲综合国产| av日韩免费电影| 青青草在线免费观看| 亚洲免费大片在线观看| 99爱视频在线| 久久亚洲精品人成综合网| 亚洲精品久久久一区二区三区 | 欧美亚洲一二三区| 国产精品久久亚洲不卡| 日韩国产欧美精品一区二区三区| 翔田千里88av中文字幕| 国产农村妇女毛片精品久久莱园子| 成人激情视频小说免费下载| 色视频www在线播放国产| 亚洲免费观看高清完整版在线 | 第一福利在线视频| 日韩午夜激情电影| 日本裸体美女视频| 日韩亚洲精品在线| 国产91视觉| 午夜看片在线免费| 欧美在线观看视频一区二区| 亚洲人人夜夜澡人人爽| 欧美网站在线| 99国产视频在线| 日韩精品成人av| 欧美美女一区二区三区| 99久久久无码国产精品不卡| 日韩午夜电影| 久久久神马电影| 高h视频在线播放| 精品人伦一区二区色婷婷| 私库av在线播放| 九九精品视频在线看| 亚洲精品成人久久久998| 午夜影院在线观看国产主播| 日韩av在线影院| 日韩av大片在线观看| 国产成人免费xxxxxxxx| 成人一级生活片| 精品国产不卡一区二区| 欧美高清性猛交| 天天操天天插天天射| 亚洲综合一区二区| 黑人玩弄人妻一区二区三区| 欧美精品国产一区二区| 国产精品99久久久久久久| 中文字幕中文字幕在线中高清免费版| 91精品国产福利| 日韩乱码一区二区| 波多野结衣91| 波多野结衣家庭教师视频| 欧美黑人巨大videos精品| 日韩免费高清在线观看| 黄色av网站在线| 91麻豆精品国产| 日韩精品乱码久久久久久| 99精品久久久久久| 色乱码一区二区三区在线| 久久五月天小说| 国产91免费视频| 毛片在线网站| 色噜噜狠狠狠综合曰曰曰| 午夜久久久久久噜噜噜噜| 亚洲精品videosex极品| 日韩av一二区| 三级在线观看一区二区| 欧美日韩在线免费观看视频| 国产亚洲高清一区| 清纯唯美日韩制服另类| 超碰免费在线| 亚洲福利视频网| 中文字幕视频免费观看| 亚洲美腿欧美偷拍| 一区二区不卡免费视频| 久久福利资源站| 国产精品免费观看久久| 日韩国产一区| 免费试看一区| 久久青草免费| 欧洲成人免费视频| 久cao在线| 亚洲欧洲一区二区三区久久| 亚洲成人77777| 91福利国产精品| 粉嫩aⅴ一区二区三区| 国产欧美一区二区三区网站| 日韩精品――色哟哟| 久久免费高清| 日本中文字幕网址| 日韩欧美网址| 色综合久久av| 丁香五月缴情综合网| 91久久久久久国产精品| 神马午夜在线视频| 九色精品免费永久在线| 成人18在线| 亚洲欧美激情一区| 香蕉国产在线视频| 91精品国产色综合久久不卡蜜臀 | 精品国产一区二区三区性色av | 91在线观看免费观看 | 欧美二区三区| 日韩高清在线观看一区二区| 国产日韩在线观看av| 午夜欧美激情| 欧美在线播放视频| 亚洲91av| 欧美国产日韩一区二区三区| 三级外国片在线观看视频| 宅男66日本亚洲欧美视频| 一区二区三区视频国产日韩| 欧美α欧美αv大片| 亚洲高清精品视频| 欧美亚日韩国产aⅴ精品中极品| 日韩精品一区二区亚洲av| 亚洲一区在线视频观看| 免费在线一级片| 国产精品理伦片| 在线观看天堂av| 久久久不卡网国产精品一区| 久久久久久久久久久久久久久| 丁香天五香天堂综合| 亚洲成年人av| 国产91在线观看| 国产 xxxx| 懂色av一区二区夜夜嗨| 精品国产一区在线| 成人少妇影院yyyy| 在线观看国产免费视频| 99久久国产综合精品色伊| 女同毛片一区二区三区| 丁香婷婷综合五月| 3d动漫精品啪啪一区二区下载| 成人黄色av电影| 中文字幕国产综合| 久久久久久亚洲综合影院红桃| 永久免费av无码网站性色av| 国产视频在线观看一区二区三区| 国产传媒在线看| 国产免费观看久久| 国产精品丝袜一区二区| 一区二区在线免费观看| 黑人一级大毛片| 色播五月激情综合网| 国产精品人妻一区二区三区| 91麻豆精品国产91久久久使用方法 | 自由日本语热亚洲人| 成人看片人aa| 日韩精品久久久久久久软件91| 九色91视频| 国产综合久久久| 男人的天堂视频在线| 激情婷婷亚洲| 我要看一级黄色大片| 精品一区二区在线观看| 精品少妇人妻av一区二区三区| 99久久伊人网影院| 亚洲少妇xxx| 亚洲国产综合色| 亚洲最大成人在线视频| 91精品麻豆日日躁夜夜躁| 黄页网站免费在线观看| 少妇高潮久久久久久潘金莲| 在线三级电影| 国产精品久久91| 麻豆精品国产| 色之综合天天综合色天天棕色| 亚洲综合色站| 男人添女人下面免费视频| 成人一道本在线| 波兰性xxxxx极品hd| 性久久久久久久久| 国产黄色片免费| 亚洲性猛交xxxxwww| 性欧美video高清bbw| 国产精品亚洲精品| 国产精品美女在线观看直播| www亚洲国产| 六月天综合网| 国产精品久久久久久亚洲色| 国产精品视频一二| 日本视频免费观看| 日韩三级视频中文字幕| 国产午夜在线视频| 欧美一级片久久久久久久| 色噜噜成人av在线| 西游记1978| 日韩午夜一区| 国产精品久久久久久亚洲色| 国产精品免费av| 91丨九色丨海角社区| 日韩精品在线看片z| 91最新在线| 国产精品欧美亚洲777777| 精品女人视频| 成年人网站免费视频| 国产精品996| 欧美丰满艳妇bbwbbw| 欧美日韩国产片| 大胆av不用播放器在线播放| 国产福利成人在线| 亚洲精品456| 男女爽爽爽视频| 97超碰欧美中文字幕| 日韩一级在线视频| 日韩av有码在线|