推薦閱讀

隨著計(jì)算機(jī)技術(shù)高速發(fā)展，設(shè)備軟硬件性能也越來(lái)越強(qiáng)。對(duì)設(shè)計(jì)師而言，我們有更大的空間去創(chuàng)意去設(shè)計(jì)，曾經(jīng)無(wú)法實(shí)現(xiàn)的想法，也許現(xiàn)在輕而易舉。

然而，技術(shù)發(fā)展的同時(shí)也帶來(lái)了更多的挑戰(zhàn)和麻煩。屏幕尺寸越來(lái)越大，各種設(shè)備物理尺寸和分辨率千奇百怪，對(duì)于我們?cè)O(shè)計(jì)師來(lái)講又是一種無(wú)言的痛苦。

PC、大屏、平板、手機(jī)，各種尺寸各種分辨率，響應(yīng)式承載的用戶體驗(yàn)有限，而且并非那么完美。如果一個(gè)產(chǎn)品要考慮各種端的屏幕兼容，那無(wú)疑是巨大的難題。

機(jī)緣巧合，這些端曾經(jīng)在華為工作過(guò)的我都有幸接觸過(guò)，于是想著，是否可以與設(shè)計(jì)小伙伴們一起尋找一種可能的出路。

一、Surface NEO 折疊新形態(tài)嘗試探索未來(lái)

2019 年 10 月微軟發(fā)布了一款折疊屏筆記本 Surface NEO，微軟利用鉸鏈扭矩系統(tǒng)將兩個(gè) 9 英寸顯示屏整合到了一起，從而得到了 Surface NEO 的多種形態(tài)，其 windows 系統(tǒng)也為此進(jìn)行了適配和優(yōu)化。

如視頻中所見(jiàn) ，Surface NEO 單個(gè)屏幕如同一個(gè) Pad，配合手寫(xiě)筆擁有輕便體驗(yàn)；展開(kāi)時(shí)放在手中，又如同書(shū)本一般真實(shí)。

完全展開(kāi)時(shí)，可以當(dāng)作一個(gè)更大尺寸的 Pad，兩個(gè)屏幕左右可以分別打開(kāi)任務(wù)，也可以運(yùn)行同一個(gè)任務(wù)。兩個(gè)屏幕不同的應(yīng)用之間可以進(jìn)行便捷的交互。

可以折疊起來(lái)，使用單一屏幕顯示，另一屏幕用于鍵盤(pán)輸入和觸控板交互。

用于輸入的那塊屏幕上還可以延展一些較小的任務(wù)窗口，有點(diǎn)類(lèi)似手機(jī)上的多窗口，又如同 MacBook Pro 的 Touch Bar。而完全展開(kāi)兩個(gè)屏幕同時(shí)用于顯示時(shí)，還可以加一個(gè)外接鍵盤(pán)當(dāng)作臺(tái)式使用。

Surface NEO 在不同尺寸不同形態(tài)的變化給了我們更多的想象，引領(lǐng)了對(duì)未來(lái)的新探索。

而在其中有一個(gè)特點(diǎn)：哪怕是屏幕展開(kāi)變大，兩個(gè)物理尺寸的屏幕依然是可以獨(dú)立去顯示和使用，可以理解為一個(gè)大的尺寸被分割為兩個(gè)小塊，或者更多更小的窗口，如上圖中的小窗格。

二、Mac Big Sur 與 iPad OS 趨同

2020 年 6 月在蘋(píng)果全球開(kāi)發(fā)者大會(huì)上，蘋(píng)果公司發(fā)布了他們下一代全新設(shè)計(jì)的操作系統(tǒng)。相對(duì)于以往每個(gè)版本的更新，這次確實(shí)稱(chēng)得上是大改版。

除了窗口、圖標(biāo)、程序塢等的向 iOS 看齊的圓角化，通知中心也如同 iOS 一樣把快捷控制放到一起組成控制面板。

從全高度邊欄到清爽的工具欄，新設(shè)計(jì)的 app 界面干凈利落，始終將用戶的操作內(nèi)容呈現(xiàn)在醒目的居中位置；這種非常明顯的板塊區(qū)隔讓用戶清晰的知道每次需要交互的位置。這種左右的布局方式，讓層級(jí)更加清晰明了，并且能很好的與移動(dòng)端進(jìn)行兼容適配。

而相對(duì)更早一段時(shí)間，蘋(píng)果公司為 iPad OS 添加了妙控板，可以進(jìn)行精細(xì)交互，讓 iPad 上也可以承擔(dān)一些復(fù)雜的數(shù)據(jù)分析和圖像處理工作。

iPad 相對(duì)于手機(jī)尺寸空間大了很多，單個(gè)應(yīng)用的分屏保障了 iPad 上 iOS 應(yīng)用的良好適配。同時(shí) iPad 上將傳統(tǒng) pc 多窗口的優(yōu)秀基因繼承了過(guò)來(lái)，并進(jìn)行改良，增加了多窗口之間的便捷交互，充分提升了 iPad 屏幕利用率，提高了工作效率。

相對(duì)于傳統(tǒng) PC，在移動(dòng)端上有一個(gè)場(chǎng)景往往很難交互，那就是文件管理，復(fù)雜的存儲(chǔ)路徑讓用戶難以通過(guò)移動(dòng)端單個(gè)頁(yè)面，或者頁(yè)面內(nèi)的抽屜和折疊方式來(lái)進(jìn)行，而 iPad OS 與 mac OS 保持一致的縱向分割屏幕，從左向右層層深入，很好的利用了 iPad 的屏幕空間，提出了更好的解決方案。

三、設(shè)計(jì)背后的本質(zhì)

看到這里是否覺(jué)得這跟 web 端有毛關(guān)系呢，請(qǐng)不要慌，任何設(shè)計(jì)背后都能找到一些線索，而這些背后的線索或許本質(zhì)趨同。

通過(guò)以上內(nèi)容，我們發(fā)現(xiàn)：

①蘋(píng)果、微軟都在努力擴(kuò)展自己的生態(tài)

曾在手機(jī)市場(chǎng)受挫的微軟想從 windows 向輕便辦公擴(kuò)展，逐步彌補(bǔ)自己的生態(tài)，避免蘋(píng)果不斷蠶食自己的市場(chǎng)份額；

而蘋(píng)果則從手機(jī)和平板上不斷向辦公領(lǐng)域沖擊，保障手機(jī)、平板、電腦多端互聯(lián)的無(wú)縫體驗(yàn)，不斷去沖擊微軟的江山。

②移動(dòng)互聯(lián)網(wǎng)的大趨勢(shì)，讓各大終端廠商都在發(fā)力移動(dòng)設(shè)備的生產(chǎn)力建設(shè)

華為、三星、小米等終端大廠也都專(zhuān)門(mén)成立部門(mén)聚焦移動(dòng)辦公、教育等生產(chǎn)力場(chǎng)景，期望以手機(jī)為中心，從生活到工作中的方方面面都無(wú)縫串聯(lián)，沉淀用戶。

③大廠都在嘗試 pc、pad、phone 三大用戶主屏的融合。

融合的好處不僅僅可以減少用戶的學(xué)習(xí)成本，達(dá)到設(shè)備間的無(wú)縫銜接，同時(shí)還可以節(jié)省大量的設(shè)計(jì)開(kāi)發(fā)成本。這等提升用戶體驗(yàn)的好事，何樂(lè)而不為呢。

小結(jié)一：多終端的融合，是我們?cè)O(shè)計(jì)需要關(guān)注的趨勢(shì)，這是最本質(zhì)的

然后我們?cè)賮?lái)看另外的一些影響設(shè)計(jì)的因素：

①屏幕尺寸

隨著顯示技術(shù)的不斷發(fā)展，如今顯示屏幕尺寸越來(lái)越大，分辨率也越來(lái)越高。早些年主流大屏顯示器都是 22 英寸左右，如今都是 23 英寸、24 英寸、27 英寸，甚至有 32 英寸以上大屏顯示器。

那么是否屏幕尺寸越大就越好呢？

②屏幕尺寸與人因研究

我們找了一些人因研究數(shù)據(jù)：

一般來(lái)說(shuō)，人的肉眼可視角度的度數(shù)通常是 120 度左右，當(dāng)集中注意力時(shí)約為五分之一，即 25 度。人單眼的水平視角最大可達(dá) 156 度，雙眼的水平視角最大可達(dá) 188 度。人兩眼重合視域?yàn)?124 度，單眼舒適視域?yàn)?60 度。

人雙瞳之間的距離差不多是 6~7cm，根據(jù)下圖，A 區(qū)域是我們?nèi)搜郾容^舒適的區(qū)域，也就是我們?nèi)搜鄄恍杼蠓冗\(yùn)動(dòng)下能觀看到的屏幕大小。

通過(guò)計(jì)算，屏幕寬度=人眼與屏幕的距離×1.154 - 6，單位為厘米（cm）。

將以上數(shù)據(jù)換算到顯示器上，就可以得出以下理論尺寸選擇建議了：

以下數(shù)據(jù)左為與顯示器的距離，右為建議顯示器尺寸（英寸）：

1. 40cm-55cm 20，英寸-24 英寸
2. 55cm-70cm 24，英寸-27 英寸
3. 70cm-80cm 27，英寸-32 英寸
4. 80cm-100cm 34，英寸
5. 100cm-150cm 38，英寸
6. 150cm 及以上 越大越好，38 英寸以上都 OK，或直接用大屏電視可能更實(shí)際。

一般我們辦公或者玩游戲，離顯示器的距離一般都是在 50cm 左右，為了更好的快速看到整個(gè)屏幕的變化，一般顯示器的尺寸建議選擇 20 英寸-27 英寸之間。

其中，目前很多電競(jìng)游戲玩家熱衷 24 英寸電競(jìng)顯示器，主要是這種適中尺寸既不會(huì)小，也不會(huì)太大，確實(shí)一個(gè)比較值得參考的尺寸值。當(dāng)然，如果偏向影音視頻娛樂(lè)為主，坐在離顯示器比較遠(yuǎn)的地方，可以考慮 27 英寸或更大尺寸顯示器。

③屏幕尺寸與用戶習(xí)慣

1. 主流的 pc 分辨率在 1920 和 1366 之間；
2. 筆記本考慮便攜性，屏幕物理尺寸略小一些；
3. 用戶距離屏幕的距離，適宜距離已經(jīng)逐漸形成習(xí)慣。

“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對(duì) Ant Design 的主字體進(jìn)行了一次升級(jí)，從原先的 12 上升至 14，以保證在多數(shù)常用顯示器上的用戶閱讀效率最佳?！币?Ant Design（含下圖）。

而蘋(píng)果就比較克制了，他們限定了 4 款屏幕尺寸：

1. 筆記本 13、16 英寸；
2. 臺(tái)式 21.5、27 英寸。

蘋(píng)果提供顯示縮放設(shè)置項(xiàng)，供個(gè)別用戶略微的差異調(diào)整。

這里不禁贊嘆蘋(píng)果的人因研究，蘋(píng)果的手機(jī)和電腦一樣，屏幕尺寸不像安卓手機(jī)那樣千奇百怪。因?yàn)槲沂冀K相信：克制背后必有充分的研究和論證。

④電腦上的軟件界面

我們?cè)賮?lái)看看我們通常在電腦上的使用場(chǎng)景，人們通常在電腦上使用一些軟件來(lái)完成任務(wù)或工作。我這里把電腦上常規(guī)使用的軟件劃分了三類(lèi)。

第一類(lèi)是專(zhuān)業(yè)型軟件，諸如 PS、AI，word、ppt、excel 等，這類(lèi)工具通常我們?cè)谝苿?dòng)端上只能完成非常簡(jiǎn)單的操作，甚至有些軟件都無(wú)法在移動(dòng)端去使用，我想這也是電腦無(wú)法被完全取代的根本原因之一吧。

這些專(zhuān)業(yè)型軟件多數(shù)擁有與 ps 類(lèi)似的界面布局，圍繞中心主體區(qū)域做交互，往往觸發(fā)點(diǎn)在左或者上，而具體的交互處理，如屬性編輯面板在右側(cè)。

第二類(lèi)是效率型軟件，諸如郵件、微信、文件管理等，這類(lèi)軟件更常見(jiàn)，使用率會(huì)更高，在移動(dòng)端和電腦上都會(huì)使用，但往往在電腦上效率更高。

效率型軟件在使用時(shí)，往往從左向右層層深入，由外至里，從粗到細(xì)，從全局到個(gè)體，進(jìn)行信息的下鉆與場(chǎng)景的交互，縱向的面板區(qū)分非常明顯。

第三類(lèi)是內(nèi)容型軟件。這里有些特殊，內(nèi)容型又分為閱讀和視頻兩種，其中閱讀通常以文本和圖片內(nèi)容為主，信息流由上至下需要用戶持續(xù)移動(dòng)視線；而視頻通常是全屏沉浸式體驗(yàn)，用戶的視線會(huì)全局關(guān)注視頻區(qū)域，不會(huì)有規(guī)律的移動(dòng)。

閱讀時(shí)人眼舒適的角度決定了近距離不適宜過(guò)寬的內(nèi)容，需要縱向分塊，屏幕空間無(wú)法滿屏利用；而全屏觀看視頻時(shí)，用戶大多會(huì)自主調(diào)節(jié)距屏幕的距離，而改變?nèi)搜凼孢m度。

小結(jié)二：人因決定了屏幕尺寸限制，大尺寸適合區(qū)隔分塊

通過(guò)上面的一些使用場(chǎng)景，我們不難發(fā)現(xiàn)，我們?cè)谌粘Ｊ褂弥忻看我暰€關(guān)注的場(chǎng)景并不需要非常大的尺寸空間，大的尺寸空間只是為了讓用戶知道這整個(gè)是一個(gè)整體范圍之內(nèi)。而這一切是由人因早已決定了的。

于是我們不難理解，為什么哪怕很多人喜歡接兩個(gè)顯示器，但在使用的時(shí)候也并不是每一個(gè)屏幕上單獨(dú)占滿一個(gè)程序。

所以我們現(xiàn)在看到 iPad 和安卓平板上的左右分屏，其實(shí)并不是簡(jiǎn)單的為了追求屏幕利用率，還有人因的考慮在其中。

同時(shí)，隨著技術(shù)的發(fā)展，華為和小米兩大廠商嘗試了 pc 和手機(jī)的互聯(lián)，在 pc 上模擬運(yùn)行手機(jī)界面，這是一種最通用和最低成本的解決 pc 兼容移動(dòng)端應(yīng)用的解決方案。（因?yàn)槟敲炊鄳?yīng)用開(kāi)發(fā)者，沒(méi)有辦法要求他們都去花成本研發(fā)多個(gè)端的應(yīng)用版本）

并且在我們國(guó)產(chǎn)操作系統(tǒng)中，銀河麒麟也支持了對(duì)于移動(dòng)端應(yīng)用的兼容方案。

綜上，我們?cè)俅巫鞒隹偨Y(jié)：

1. 人眼與屏幕距離決定了合適的屏幕寬度和適合的內(nèi)容寬度；再大的屏幕尺寸，每次適合用戶瀏覽和使用的寬度是應(yīng)該有限的。
2. ?移動(dòng)互聯(lián)網(wǎng)的比重決定了 pc 要往移動(dòng)端習(xí)慣兼容；人們衣食住行已經(jīng)無(wú)法離開(kāi)移動(dòng)互聯(lián)網(wǎng)的今天，pc 注定了要跟隨移動(dòng)端的趨勢(shì)，否則很可能被取代。

而以上兩點(diǎn)，我們僅需要在大尺寸的 pc 屏幕上，將空間按使用需求，有效合理的區(qū)隔成適合的分塊，而單獨(dú)的分塊又適合在移動(dòng)端展示。這樣看來(lái)，縱向分割的設(shè)計(jì)卻能很好的解決以上兩點(diǎn)，并且蘋(píng)果和微軟的很多設(shè)計(jì)也在這個(gè)方向上有驗(yàn)證。

我們回到前面分析的 pc 上普遍的三大類(lèi)軟件場(chǎng)景，其實(shí)非常滿足縱向分割的設(shè)計(jì)，并且在平板和移動(dòng)端上通常也有較為合理的交互和適配。從下圖上簡(jiǎn)要就可以看出，在 pc 上分割好的板塊在小屏上按需通過(guò)不同的方式進(jìn)行交互和展現(xiàn)，即可完成適配。

那么回到本文要說(shuō)的主題，為什么說(shuō)是 web 端設(shè)計(jì)縱向分割趨勢(shì)探討呢？這不是一直講的是操作系統(tǒng)、客戶端和程序應(yīng)用么？

這里我想說(shuō)的是，web 端的設(shè)計(jì)通常是跟在這些設(shè)計(jì)之后的，往往最底層的操作系統(tǒng)有創(chuàng)新的出現(xiàn)，在系統(tǒng)之上的應(yīng)用層才可能有新的突破，然后 web 端是其中一個(gè)應(yīng)用——瀏覽器里的設(shè)計(jì)表現(xiàn)。所以，目前作為web設(shè)計(jì)師的我，因此就去多關(guān)注一些更底層、更前沿的技術(shù)和設(shè)計(jì)，期待著會(huì)有不同的發(fā)現(xiàn)。

回到 web 端的設(shè)計(jì)，阿里系的 Ant design 其實(shí)也很早就注意到的閱讀時(shí)屏幕內(nèi)容寬度的人因問(wèn)題，如下圖中，卡片內(nèi)容上的文本信息并非按空間有多寬就展示多寬。

同樣華為云的設(shè)計(jì)師們，其實(shí)都早已嘗試了縱向分割的設(shè)計(jì)在 web 中的表現(xiàn)：在產(chǎn)品的消息中心，合理的縱向分割，模仿郵箱系統(tǒng)的設(shè)計(jì)，層層遞進(jìn)，直接展示消息詳情，合理的利用了橫向的屏幕空間，減少了頁(yè)面跳轉(zhuǎn)，提升了頁(yè)面美感和閱讀交互體驗(yàn)。

他們更加大膽創(chuàng)新的將縱向分割運(yùn)用在了大型的表單界面，同樣也避免了填單界面巨長(zhǎng)無(wú)比的空輸入框，或者空白頁(yè)面，讓頁(yè)面布局看似更加合理與舒適了。

所以個(gè)人愚見(jiàn)，縱向分割的設(shè)計(jì)，確實(shí)可以在 web 端設(shè)計(jì)中去嘗試運(yùn)用，尤其是 B 端設(shè)計(jì)師小伙伴們，我們是不是可以大膽的嘗試起來(lái)。沉寂了那么多年的千篇一律的 B 端設(shè)計(jì)，是否有不一樣的創(chuàng)新出來(lái)，讓我們拭目以待。