編者按：B端設計中，桌面端與移動端究竟差別有多大？本文總結了8個方面的差異，并用語雀的案例分析讓你的認識更深一步。

作者往期文章：

關于桌面端與移動端的交互差異，一直以來很多設計師都非常的迷茫，因為在眾多的 B 端產品當中，你一定會接觸到同一個頁面中桌面端與移動端的設計需求，比如一個需求是關于員工詳情頁面的桌面端與移動端設計，你會如何做？你會有哪些思考？

我相信你應該會有不少疑惑，今天我們就來聊聊關于桌面端的產品以及移動端的產品究竟有何差異。

1. 優雅降級與漸進增強引發的一系列問題

雖然關于優雅降級與漸進增強是源自瀏覽器兼容的技術場景，之前的文章也有提到過，但是我們可以將其用來類比桌面端與移動端的設計。

優雅降級：是從復雜的現狀開始，并試圖減少用戶的使用模塊

漸進增強：漸進增強則是從一個基礎的版本開始，并不斷擴充，以適應未來環境的需要

優雅降級 意味著得往回看，把基礎的功能進行對應的簡化；而漸進增強則意味著向前看，同時保證底層基礎邏輯的完整。

在整個 B 端項目的初期，通常會優先考慮桌面端的設計，因為它能夠驗證整個產品的基礎流程，了解清楚具體的項目背景，并且所有的功能模塊能夠在桌面端當中快速跑通。

緊接著項目開始逐步商業化，使用人數也在不斷增多，角色也越來越復雜，而后就會發現項目會有越來越多 移動端 的需求。

比如：有的員工會在上下班中途辦公使用，有的企業為了降低成本，想白嫖員工的手機，有的老員工會習慣于移動端使用…

這基本上就是企業的移動端的需求來源，而在移動端與桌面端的設計當中，會有非常多的差別（如果悟性較高的小伙伴，可以轉換思維，將其運用到作品集）

2. 屏幕空間

關于桌面端與移動端，大家首先肯定能想到的就是「屏幕空間尺寸」上的差異，現在把電腦與手機放在一起，你能夠直觀感受到兩者的差異：

首先是桌面端，你會發現所有的電腦都是通過 橫屏 的方式進行顯示，并且橫向的空間會更多。

這也就造成了作為桌面端的產品，會更多考慮在橫向上進行拓展。比如這時候需要去增加一個導航菜單、信息列表，都可以考慮在橫向空間上下功夫。

?而到了移動端，雖然它也可以橫屏進行使用，但是你會發現大多數應用下，只能夠支持的就是屏幕縱向展示，因此縱向空間就會格外重要。

而對于設計者來說，發現了這一問題，無論是在導航欄、又或者是標題欄，都是在利用縱向空間進行排布。

比如用導航菜單來感受一下橫縱差異，移動端設計的早期，我們也會簡單的將桌面端的導航菜單直接遷移到移動端，這便是移動端的抽屜式導航，而現如今抽屜式導航在移動端已經很少見到，因為發現這樣的導航布局不太合理。

而在現如今的手機端，你會發現都是以底部導航菜單作為基礎進行設計，抽屜式導航只能作為產品架構的補充

比如我們這里還是以 飛書、釘釘 這樣的協同辦公領域的產品為例，在他們自身的產品當中，它們在去設計移動端導航菜單的時候，就會具有“參考意義”。

3. 操作交互的方式

在使用手機與電腦，移動光標時，你會發現完全不一樣的現象。使用手機移動光十分的困難需要反復操作；而電腦當中的鼠標則可以精準操作，進而實現快速選擇，其實這就是手勢交互與鼠標交互的差異。

在移動端的手勢設計當中，主要是以 點擊、滑動、為主要操作；以手指的放大、縮小 等手勢為輔助操作，這也就造成移動設備更適合“滾動、點擊”等瀏覽型的場景，比如 在閱讀信息流資訊時，通過手機查看就會比電腦更為“合適”。

在桌面端的交互方式當中，我們更需要去關注的是鼠標的交互操作（雖然會存在觸控板，但在這里就簡單統一歸為一類）在鼠標的交互當中，對應的交互狀態會有太多，但目的都是想讓用戶盡可能知道：

1. 這個內容能不能點擊
2. 可以點擊的區域有多大
3. 點擊過后會有什么后果

比如光標的所有狀態以及我們設計的組件不同狀態，都是在去解答上面三類事情，因此鼠標光標狀態也尤為重要

至于鼠標與手指 最大的差別，我想應該就是交互熱區上的變化。還能依稀記得之前“背誦”的規范。

iOS 的交互熱區不能小于 44px

Android 的交互熱區不能于 48px

（為什么會相差這 4px，是因為安卓屏幕不夠靈敏。當然已經是很早期的觀點了）

但是在桌面端的設計當中，很少提到熱區的概念，通常圖標大小就是熱區大小。

而熱區的變化更多則是影響整個產品的整體設計形式：

1. 在桌面端的頁面設計當中，頁面元素多是以小而密的方式呈現，因為它屏幕面積大、功能完整、熱區較小，所以你可以看到桌面端的頁面設計當中都是十分緊密的排布。

在功能層面上，桌面端通常都是 B 端產品的 “完全體”

2. 在移動端的頁面設計當中，頁面元素更多是大而疏，因為其屏幕面積小、功能少、熱區大，你會發現移動端更多講究的是空間，會用到卡片 等很多設計形式

在功能層面上，移動端通常都是 B 端產品的 “縮水版”，會在功能上進行刪減（即使不刪減，也會通過各種手段將其隱藏在二級菜單下）因此在展示層面上，主要就是由 屏幕尺寸+交互方式決定的。

4. 錄入信息的形式

想到錄入信息的形式，我就非常懷念我的 諾基亞 e63、黑莓 Passport，全鍵盤 yyds。也正是從那時開始到現在，如果我想高效的信息輸入，我依舊會將手機以橫屏的方式，進行快速的打字錄入（并不是所有軟件都支持，也很無奈）

回到正題，由于時代的發展，如今已經找不到實體的按鍵的手機，目前市面上大多數手機的錄入方式采取點擊屏幕的 虛擬鍵盤，虛擬鍵盤最大的問題就是由于手指無法真實觸摸到每一個具體的按鍵，導致無法進行快速的點擊；并且屏幕整體寬度非常狹小，想要塞下 31 個按鍵本身有一點困難，也就會導致會出現誤觸的情況。

而在電腦當中，我們錄入信息的效率明顯得到提升。你會發現人們的 “寫作、溝通、工作” 只要涉及到長時間高強度的打字的時候，我們就會使用電腦鍵盤進行信息錄入，因為打字的空間非常的大，并且在 F、J 按鍵當中會有盲點，所以能夠給使用者提升打字效率。

當有的時候需要回復一條長消息時，恨不得打開立馬脫下雙肩包，打開電腦進行快速的回復，因為手機打字的效率實在是太低。

當然移動端并不是只會有劣勢，它也會存在自己得天獨厚的優勢，因為手機可以語音輸入，并且在國內像是 訊飛、百度 對于語音識別的準確性已經非常之高，因此移動端錄入時，我們還需要考慮移動端語音錄入的場景，像是滴答清單，就可以直接在界面當中長按，實現快速的語音創建任務。

同時手機擁有可移動的拍攝硬件，因此在手機當中，就不適合大量的數據錄入操作，假設你需要填寫的信息超過 100 字，就需要考慮通過 OCR 的方式，能夠讓“科技”的力量幫助用戶進行快速的填寫。像是 CRM 產品當中的移動端設計，這幾乎是產品的標配。

我們在去對移動端設備的設計時，要多去考慮移動端自身的獨特優勢，揚長避短，否則無法發揮移動端的真正特性。

5. 設備的使用場景

移動端、桌面端

聽名字就能夠知道，一個可以隨時移動，強調的是我能夠在任何時間任何地點進行使用；一個固定場合使用，強調的是在特定的地點，我能夠有更好的使用體驗。雖然桌面端的電腦也會有移動屬性（筆記本）但是兩者在使用場景下還是截然不同。

移動端更多強調的是“碎片化”，因為他們的使用場景是移動的，因此會出現很多零碎的時間我們可以進行利用，比如：坐地鐵時，我們會拿起手機隨機看兩則新聞；上班摸魚時，也會打開手機刷一刷 群里的消息，在使用它的場景當中，大多都是非嚴肅的場景，這也就造成了用戶的注意力很容易會被輕易奪走。像是我們在閱讀文章，這時隨便出現一個信息通知你就會中斷你的閱讀，你的注意力往往就會在不經意間被奪走。（這或許就是 iOS 會推出勿擾模式的原因）。

桌面端則更多表達的是“沉浸式”，因為固定代表著我們在使用電腦的過程中，會給自己一個暗示，我們是在認真工作，電腦寫作時會更加專注、沉浸式的體驗，這也就導致在設計時，會進行對應的分區、布局，并且流程固定的頁面讓用戶投入的進行設計，并且還會有很多沉浸式的功能，比如 Ulysses 的打字機模式，讓你專注于目前的段落當中信息寫作。

6. 信息架構的差異

關于信息架構，其實非常好理解。一個電腦屏幕，至少等于 10 個手機屏幕以上。

因此在很多信息呈現上面，一定會有差距！在整體設計上，會有多個方面的差異，我們一個一個來看。

① 縱向單維度、橫向多維度

關于這兩個維度的對比，我們就以國民級產品微信為例去分析：

在移動端的設計當中，我們需要去思考的就是這些信息會存在于列表當中，也就導致移動端在使用縱向空間時，往往只會讓你去做“一件事”，比如在這個列表頁當中，你要做的就是找到那一個聊天對話，而在對話框內則是查看、發起對應的聊天。整個流程我只能夠在手機屏幕當中展示單維度信息。

而在桌面端的設計上，由于屏幕橫向空間增大，導致信息展示上會不斷地分割，哪怕是一個小小的微信，剛才提到的找聊天對話、發起聊天，我都可以在一個固定的頁面進行展開，并且可以通過左側的卡片列表實時進行切換。

② 單一窗口、多窗口

窗口，一直以來都是生產力的代表，一個窗口代表的就是一個用戶的任務。比如最近 iPad OS 的臺前調度，也正是 Apple 想要提高 iPad 生產力所設計出來的全新窗口模式，也能夠從側面反映多個窗口同時激活，能夠帶來更效率的提升。當然窗口在桌面端的設計上，是一個計算機面市以來就有的產物。并且很多 B 端產品在自身產品當中都會涉及頁簽窗口，還可以進行多窗口的同時協作，這樣就能極大提高效率。

而在移動端的設備當中，不會存在太多跨窗口的邏輯。大多是通過單一的窗口進行實現，這樣能夠降低移動端的使用難度，并且在設計上也會更加容易。

③ 多層級設計

在整個 B 端設計當中最為簡單的級聯選擇，移動端與桌面端的處理方式完全不一樣

以級聯選擇這一組件為例，在移動端，我們的級聯選擇只能通過一層展示一個頁面，這樣一級一級的方式呈現，而在桌面端，我們的級聯選擇，可以通過一個極小的下拉菜單就可以呈現多級。

當然這樣多層級的設計還會有很多，比如：樹形選擇、國家城市、關聯數據等，在設計上都會沿用這樣的設計方式。

7. 產品架構

產品架構關系到整個產品的完整結構，我們了解產品架構必須得先去了解 移動端與桌面端 產品的優先級，也就是 優雅降級與漸進增強（忘記了的同學，記得文章開頭進行回顧）

在移動端，我們通常會去考慮小而精，也就是將整體的設計更清晰、簡單的呈現；

在桌面端，我們通常會去考慮大而全，也就是將產品完整的功能模塊展現出來。

比如在完成一個大的 B 端系統設計過后，我們就會采取優雅降級的形式，將頁面當中所有信息元素進行分析。主要分析兩個方面：

第一個：這個產品模塊兒是否有移動場景的訴求？

第二個：這個產品模塊能不能夠在移動端展現？使用起來究竟有沒有好？

那我們來舉一個簡單的例子，比如我們以 紛享銷客 的這一個表格為例，考慮從桌面端遷移到移動端（這已經是最簡單的案例）

在表格當中，首先要去思考的是你是否有移動端使用的場景，通過場景試圖去了解所有功能的邊界，比如

1. 在移動端有沒有必要查看數據總量？
2. 在移動端有沒有必要了解不同頁面之間的分頁？
3. 在移動端有沒有必要使用頁面當中的篩選？

明確場景過程，對于功能模塊的使用，你就會有全新的認識，去認真思考移動端的需求，當然這時候，你可以拿著小本本將這所有的功能模塊進行構思，組成一個完整的草圖。

當然這時候就需要考慮表達方式，因為在桌面端的表格頁面，應該如何遷移到移動端當中進行展現，究竟要采取什么什么數據表現手法，我就簡單總結一下，有時間再重新寫篇文章來說說

1. 不改變直接展示，通過滾動條讓用戶在手機上進行移動
2. List 把數據進行一一對應展示
3. 表格部分凍結展示
4. 卡片模式展示頁面

當然表格的內容部分解決過后，我們就需要了解頁面當中的復雜功能究竟應該如何設計，比如在紛享銷客當中的篩選，由于其本身就是一個非常復雜的篩選，里面會包含諸多功能邏輯：

1. 篩選具體需要如何呈現
2. 篩選外露功能如何保留
3. 篩選與篩選組的功能如何串聯

這些功能細節，需要經歷一遍完整的梳理才能夠了解清楚究竟應該如何下手，而這些功能之間如何映射，就需要你對 移動端、桌面端 足夠了解才行。

主要是之前做過太多類似功能，也就不在這里過多贅述了。

8. 使用門檻與采購成本

因為我們最終是要去落地到 B 端產品當中，我們一定還得提一下使用門檻與采購成本。

你會發現一個現象，在國內很多 B 端設備都會推出移動端產品，甚至很多特定行業，使用人群并不是我們理解“打工人”，而更多是那些只會熟悉手機操作的 “父輩”。

最近了解倉儲物流系統，走訪了很多 貨物儲存企業，發現里面的員工以 40-50 歲左右的中年人為主，他們當中極大多數是不會去使用電腦的，而在工作當中，手機的使用門檻就會變得非常低，再加上國內對于智能手機的普及，每一個人至少都有一臺甚至多臺手機。作為企業就不想為員工單獨采購設備，因此使用員工的手機進行工作就成為企業大多數的選擇，這種情況像是外賣配送員、火鍋店服務員、倉庫備貨員、快遞小哥、菜鳥驛站。這或許就是很多 B 端軟件，雖然做得很丑，但是也必須得有移動端設備的原因。

手機的門檻明顯要比電腦低，而正是這樣，就不需要過于深入的教育用戶。

9. 案例 - 語雀

最后，我們來嘗試回顧一款產品的設計，去看看他們的移動端與桌面端之間究竟存在什么差異。

想到移動端我首先想到的就是語雀，首先語雀在網頁端擁有非常完整的文檔功能。但是在語雀已經面市近 2 年多時間內，收到最多的就是移動端的留言，相應語雀做了幾次嘗試，由最開始的 H5，到后面的支付寶小程序，整體的設計總是差強人意。剛好今年 2 月份正式上線移動端，我們就來看 阿里 團隊的設計思路。

語雀小記

打開移動端的語雀，它的第一個分類便是語雀小記，這讓我非常詫異。因為在網頁端的頁面的當中，我們首先看到是工作臺的最近編輯文檔。

因此你會發現，語雀小記是設計團隊為了滿足用戶的碎片化記錄，故意將它的產品架構提高，而它的這種提高正好滿足移動端的真實場景，并且在語雀小記里面，我們可以導入手機的大量照片、鏈接等內容，能夠方便我進行快速的記錄。因此你會發現語雀小記在移動端是非常重要的，也非常的合理。

文檔

進入到文檔頁面里，你會發現 設計團隊這里將頁面當中的內容進行對應的映射，將列表與移動端的列表進行對應，只是在新建入口當中，你會發現移動端似乎不太鼓勵用戶去新建文檔，因為新建入口做的極其的弱，與桌面端形成鮮明對比。

這也就剛好對應的 桌面端編輯場景、移動端瀏覽場景。

編輯器

編輯器里更多就是將多個功能入口融合，同時又可以展現移動端小而精的設計理念，將編輯器與移動端的產品進行對比。也正是用到了 前面講到了 產品架構、錄入信息的形式差異 這兩點

消息通知

消息通知對于語雀來說一直非常頭疼，雖說有 郵箱提示 + 站內提示 這種方式，但是 郵箱 大家基本都很少使用，至于站內提示，我都進入到你的語雀了，這個提示就沒啥用了，因此消息通知一直都是語雀的一個痛點。

而通知，最好的形式就是我們平時高頻使用打開的設備，那移動端自然不必多說，因此你可以發現，語雀移動端的通知非常的重要，在頁面當中可以快速查看通知消息，這樣就能夠方便用戶進行快速的回復。

建議

當然在語雀移動端當中，我認為廣場這個頁面也尤為關鍵，因為首先語雀自身會有很多優質的內容，在想要去閱讀的時候想的是能夠通過移動端進入到廣場當中，去進行一個碎片化的閱讀，但是為什么沒有做？（既然都讀到這里，大概率就是忠實的小伙伴，可以試著下載語雀 移動端，好好分析一下。沒有標準答案，大家暢所欲言）

10. 聊兩句

關于移動端與桌面端的差異，其實在我們 B 端產品的設計當中是非常頻繁的，而不同的設備之間會存在很多業務邏輯，比如 海底撈為什么用 iPad 提供給用戶點餐、醫美行業的顧問為什么也會每人配備一臺 iPad，我們除了要去了解設計形式上的差異之外，更為重要的是了解業務上的訴求，他們去使用這類設備的真正原因。

我們在去選擇任意一款設備時，如同將不同的特點平均的放在天平兩端，而作為用戶就是要不斷的去衡量那邊的訴求更為合理，因此選擇設備形態只是它的最終結果罷了。

其實細心的小伙伴應該發現了，就是在移動端的設計當中，我們并沒有提到桌面端與移動端產品究竟應該如何映射，并且映射這部分內容會更抽象，這個問題就改天有機會再慢慢聊~

既然都看到這里了，就別忘了點個贊。

歡迎關注作者的微信公眾號： CE青年Youthce