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

關(guān)于桌面端與移動(dòng)端的交互差異，一直以來(lái)很多設(shè)計(jì)師都非常的迷茫，因?yàn)樵诒姸嗟?B 端產(chǎn)品當(dāng)中，你一定會(huì)接觸到同一個(gè)頁(yè)面中桌面端與移動(dòng)端的設(shè)計(jì)需求，比如一個(gè)需求是關(guān)于員工詳情頁(yè)面的桌面端與移動(dòng)端設(shè)計(jì)，你會(huì)如何做？你會(huì)有哪些思考？

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

1. 優(yōu)雅降級(jí)與漸進(jìn)增強(qiáng)引發(fā)的一系列問題

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

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

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

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

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

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

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

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

2. 屏幕空間

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

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

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

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

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

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

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

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

3. 操作交互的方式

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

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

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

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

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

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

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

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

（為什么會(huì)相差這 4px，是因?yàn)榘沧科聊徊粔蜢`敏。當(dāng)然已經(jīng)是很早期的觀點(diǎn)了）

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

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

1. 在桌面端的頁(yè)面設(shè)計(jì)當(dāng)中，頁(yè)面元素多是以小而密的方式呈現(xiàn)，因?yàn)樗聊幻娣e大、功能完整、熱區(qū)較小，所以你可以看到桌面端的頁(yè)面設(shè)計(jì)當(dāng)中都是十分緊密的排布。

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

2. 在移動(dòng)端的頁(yè)面設(shè)計(jì)當(dāng)中，頁(yè)面元素更多是大而疏，因?yàn)槠淦聊幻娣e小、功能少、熱區(qū)大，你會(huì)發(fā)現(xiàn)移動(dòng)端更多講究的是空間，會(huì)用到卡片 等很多設(shè)計(jì)形式

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

4. 錄入信息的形式

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

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

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

當(dāng)有的時(shí)候需要回復(fù)一條長(zhǎng)消息時(shí)，恨不得打開立馬脫下雙肩包，打開電腦進(jìn)行快速的回復(fù)，因?yàn)槭謾C(jī)打字的效率實(shí)在是太低。

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

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

我們?cè)谌?duì)移動(dòng)端設(shè)備的設(shè)計(jì)時(shí)，要多去考慮移動(dòng)端自身的獨(dú)特優(yōu)勢(shì)，揚(yáng)長(zhǎng)避短，否則無(wú)法發(fā)揮移動(dòng)端的真正特性。

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

移動(dòng)端、桌面端

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

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

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

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

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

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

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

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

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

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

② 單一窗口、多窗口

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

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

③ 多層級(jí)設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當(dāng)然這時(shí)候就需要考慮表達(dá)方式，因?yàn)樵谧烂娑说谋砀耥?yè)面，應(yīng)該如何遷移到移動(dòng)端當(dāng)中進(jìn)行展現(xiàn)，究竟要采取什么什么數(shù)據(jù)表現(xiàn)手法，我就簡(jiǎn)單總結(jié)一下，有時(shí)間再重新寫篇文章來(lái)說(shuō)說(shuō)

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

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

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

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

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

8. 使用門檻與采購(gòu)成本

因?yàn)槲覀冏罱K是要去落地到 B 端產(chǎn)品當(dāng)中，我們一定還得提一下使用門檻與采購(gòu)成本。

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

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

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

9. 案例 – 語(yǔ)雀

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

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

語(yǔ)雀小記

打開移動(dòng)端的語(yǔ)雀，它的第一個(gè)分類便是語(yǔ)雀小記，這讓我非常詫異。因?yàn)樵诰W(wǎng)頁(yè)端的頁(yè)面的當(dāng)中，我們首先看到是工作臺(tái)的最近編輯文檔。

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

文檔

進(jìn)入到文檔頁(yè)面里，你會(huì)發(fā)現(xiàn) 設(shè)計(jì)團(tuán)隊(duì)這里將頁(yè)面當(dāng)中的內(nèi)容進(jìn)行對(duì)應(yīng)的映射，將列表與移動(dòng)端的列表進(jìn)行對(duì)應(yīng)，只是在新建入口當(dāng)中，你會(huì)發(fā)現(xiàn)移動(dòng)端似乎不太鼓勵(lì)用戶去新建文檔，因?yàn)樾陆ㄈ肟谧龅臉O其的弱，與桌面端形成鮮明對(duì)比。

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

編輯器

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

消息通知

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

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

建議

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

10. 聊兩句

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

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

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

既然都看到這里了，就別忘了點(diǎn)個(gè)贊。

作者：CE青年Youthce