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

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

我相信你應(yīng)該會有不少疑惑，今天我們就來聊聊關(guān)于桌面端的產(chǎn)品以及移動端的產(chǎn)品究竟有何差異。

1. 優(yōu)雅降級與漸進增強引發(fā)的一系列問題

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

優(yōu)雅降級：是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶的使用模塊

漸進增強：漸進增強則是從一個基礎(chǔ)的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要

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

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

緊接著項目開始逐步商業(yè)化，使用人數(shù)也在不斷增多，角色也越來越復(fù)雜，而后就會發(fā)現(xiàn)項目會有越來越多 移動端 的需求。

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

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

2. 屏幕空間

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

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

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

而到了移動端，雖然它也可以橫屏進行使用，但是你會發(fā)現(xiàn)大多數(shù)應(yīng)用下，只能夠支持的就是屏幕縱向展示，因此縱向空間就會格外重要。

而對于設(shè)計者來說，發(fā)現(xiàn)了這一問題，無論是在導(dǎo)航欄、又或者是標(biāo)題欄，都是在利用縱向空間進行排布。

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

而在現(xiàn)如今的手機端，你會發(fā)現(xiàn)都是以底部導(dǎo)航菜單作為基礎(chǔ)進行設(shè)計，抽屜式導(dǎo)航只能作為產(chǎn)品架構(gòu)的補充

比如我們這里還是以 飛書、釘釘 這樣的協(xié)同辦公領(lǐng)域的產(chǎn)品為例，在他們自身的產(chǎn)品當(dāng)中，它們在去設(shè)計移動端導(dǎo)航菜單的時候，就會具有"參考意義"。

3. 操作交互的方式

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

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

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

1. 這個內(nèi)容能不能點擊
2. 可以點擊的區(qū)域有多大
3. 點擊過后會有什么后果

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

至于鼠標(biāo)與手指 最大的差別，我想應(yīng)該就是交互熱區(qū)上的變化。還能依稀記得之前"背誦"的規(guī)范。

iOS 的交互熱區(qū)不能小于 44px

AndROId 的交互熱區(qū)不能于 48px

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

但是在桌面端的設(shè)計當(dāng)中，很少提到熱區(qū)的概念，通常圖標(biāo)大小就是熱區(qū)大小。

而熱區(qū)的變化更多則是影響整個產(chǎn)品的整體設(shè)計形式：

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

在功能層面上，桌面端通常都是 B 端產(chǎn)品的 "完全體"

2. 在移動端的頁面設(shè)計當(dāng)中，頁面元素更多是大而疏，因為其屏幕面積小、功能少、熱區(qū)大，你會發(fā)現(xiàn)移動端更多講究的是空間，會用到卡片 等很多設(shè)計形式

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

4. 錄入信息的形式

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

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

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

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

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

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

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

5. 設(shè)備的使用場景

移動端、桌面端

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

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

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

6. 信息架構(gòu)的差異

關(guān)于信息架構(gòu)，其實非常好理解。一個電腦屏幕，至少等于 10 個手機屏幕以上。

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

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

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

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

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

② 單一窗口、多窗口

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

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

③ 多層級設(shè)計

在整個 B 端設(shè)計當(dāng)中最為簡單的級聯(lián)選擇，移動端與桌面端的處理方式完全不一樣

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

當(dāng)然這樣多層級的設(shè)計還會有很多，比如：樹形選擇、國家城市、關(guān)聯(lián)數(shù)據(jù)等，在設(shè)計上都會沿用這樣的設(shè)計方式。

7. 產(chǎn)品架構(gòu)

產(chǎn)品架構(gòu)關(guān)系到整個產(chǎn)品的完整結(jié)構(gòu)，我們了解產(chǎn)品架構(gòu)必須得先去了解 移動端與桌面端 產(chǎn)品的優(yōu)先級，也就是 優(yōu)雅降級與漸進增強（忘記了的同學(xué)，記得文章開頭進行回顧）

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

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

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

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

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

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

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

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

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

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

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

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

1. 篩選具體需要如何呈現(xiàn)
2. 篩選外露功能如何保留
3. 篩選與篩選組的功能如何串聯(lián)

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

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

8. 使用門檻與采購成本

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

你會發(fā)現(xiàn)一個現(xiàn)象，在國內(nèi)很多 B 端設(shè)備都會推出移動端產(chǎn)品，甚至很多特定行業(yè)，使用人群并不是我們理解"打工人"，而更多是那些只會熟悉手機操作的 "父輩"。

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

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

9. 案例 – 語雀

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

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

語雀小記

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

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

文檔

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

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

編輯器

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

消息通知

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

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

建議

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

10. 聊兩句

關(guān)于移動端與桌面端的差異，其實在我們 B 端產(chǎn)品的設(shè)計當(dāng)中是非常頻繁的，而不同的設(shè)備之間會存在很多業(yè)務(wù)邏輯，比如 海底撈為什么用 iPad 提供給用戶點餐、醫(yī)美行業(yè)的顧問為什么也會每人配備一臺 iPad，我們除了要去了解設(shè)計形式上的差異之外，更為重要的是了解業(yè)務(wù)上的訴求，他們?nèi)ナ褂眠@類設(shè)備的真正原因。

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

其實細(xì)心的小伙伴應(yīng)該發(fā)現(xiàn)了，就是在移動端的設(shè)計當(dāng)中，我們并沒有提到桌面端與移動端產(chǎn)品究竟應(yīng)該如何映射，并且映射這部分內(nèi)容會更抽象，這個問題就改天有機會再慢慢聊~

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

作者：CE青年Youthce