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

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

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

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

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

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

如視頻中所見 ，Surface NEO 單個屏幕如同一個 Pad，配合手寫筆擁有輕便體驗；展開時放在手中，又如同書本一般真實。

完全展開時，可以當作一個更大尺寸的 Pad，兩個屏幕左右可以分別打開任務，也可以運行同一個任務。兩個屏幕不同的應用之間可以進行便捷的交互。

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

用于輸入的那塊屏幕上還可以延展一些較小的任務窗口，有點類似手機上的多窗口，又如同 MacBook Pro 的 Touch Bar。而完全展開兩個屏幕同時用于顯示時，還可以加一個外接鍵盤當作臺式使用。

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

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

二、Mac Big Sur 與 iPad OS 趨同

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

融合的好處不僅僅可以減少用戶的學習成本，達到設備間的無縫銜接，同時還可以節(jié)省大量的設計開發(fā)成本。這等提升用戶體驗的好事，何樂而不為呢。

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

然后我們再來看另外的一些影響設計的因素：

①屏幕尺寸

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

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

②屏幕尺寸與人因研究

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

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

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

通過計算，屏幕寬度=人眼與屏幕的距離×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，或直接用大屏電視可能更實際。

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

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

③屏幕尺寸與用戶習慣

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

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

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

1. 筆記本 13、16 英寸；
2. 臺式 21.5、27 英寸。

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

這里不禁贊嘆蘋果的人因研究，蘋果的手機和電腦一樣，屏幕尺寸不像安卓手機那樣千奇百怪。因為我始終相信：克制背后必有充分的研究和論證。

④電腦上的軟件界面

我們再來看看我們通常在電腦上的使用場景，人們通常在電腦上使用一些軟件來完成任務或工作。我這里把電腦上常規(guī)使用的軟件劃分了三類。

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

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

第二類是效率型軟件，諸如郵件、微信、文件管理等，這類軟件更常見，使用率會更高，在移動端和電腦上都會使用，但往往在電腦上效率更高。

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

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

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

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

通過上面的一些使用場景，我們不難發(fā)現(xiàn)，我們在日常使用中每次視線關(guān)注的場景并不需要非常大的尺寸空間，大的尺寸空間只是為了讓用戶知道這整個是一個整體范圍之內(nèi)。而這一切是由人因早已決定了的。

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

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

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

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

綜上，我們再次作出總結(jié)：

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

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

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

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

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

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

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

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

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

碧野青風