2023年桌面端和移動端的設計差異性

桌面端和移動端的設計差異性最近在做跨平臺產(chǎn)品，設計桌面端時始終有個懷疑：桌面端是不是把移動端的設計直接平移過來就行，還是說會有差異性？這些差異性背后的緣由又是什么？

于是做了一些簡潔的討論，下面與大家共享下桌面端和移動端的設計異同點（都指客戶端，之所以強調(diào)這點是由于桌面客戶端和web端又會有一些差異。）

一、整體的全都性

首先，跨平臺產(chǎn)品的設計整體是期望趨于全都的，這樣不僅可以降低用戶的認知成本，也可以降低設計成本，甚至可以降低開發(fā)成本（更加統(tǒng)一的接口）。

從布局上而言，桌面端的界面可以理解為是移動端的多個界面拼接在一起（上圖）。從功能上而言，桌面端的功能也和移動端的整體全都，只是在視圖層面和控件層面會有所差異；比如下圖所示案例，Mac端“新建提示”和iOS端整體是全都的，只是使用的控件和視圖不太一樣。

但局部而言，桌面端和移動端仍舊有著許多差異性。在設計桌面端時，敬重這些差異性是非常有必要的。

下面的篇幅便來介紹下這些差異性，大家也可以思索下，這些差異性背后的深層緣由是什么？

二、信息架構差異

1.一維布局vs二維布局

界面布局層面而言，移動端的布局一般是一維的，只有縱向布局，加之以屏幕空間有限，所以整體布局都會比較簡潔，能夠容納的信息比較有限。

桌面端的布局一般是二維的，不僅有縱向維度，還有橫向維度，大部分以橫向維度為主。加之以屏幕空間較大，其能夠容納的信息就多出許多；比如桌面端經(jīng)典的“多欄布局”，可以直接把移動端3個層級的界面全部融合在一個界面中（下圖）。

桌面端的二維布局，一方面降低了信息架構的深度，另一方面也會讓單個界面的信息量大大增加。在布局設計時需要投入更多的精力對界面元素進行歸類、分層、排序。

2.信息隱蔽vs信息露出

桌面端尺寸更大，這帶來的好處是可以平鋪出來更多的信息。不用像移動端那樣，只能放出來最核心的信息，其他信息必需采納折疊、刪除的方式做隱蔽。

比如上圖所示的騰訊文檔案例，移動端的文檔編輯器，設計師必需把各種功能進行歸類，然后放到各個入口中，點擊入口后才能看到詳細的功能。而在桌面端完全可以把這些功能平鋪露出，其信息結(jié)構是不同的。

3.跳轉(zhuǎn)操作vs就地操作

對于具有肯定流程的功能，移動端往往需要跳轉(zhuǎn)界面才能完成操作，而桌面端可以就地完成操作。

比如上圖1所示的移動郵件功能，把一封郵箱中的郵件移動到iCloud郵箱中，需要跳轉(zhuǎn)2個界面才能完成。而桌面端只需要在下拉列表里就能直接完成，無需跳轉(zhuǎn)界面。

再比如上圖2所示的設置界面，在移動端更改選項、重新命名等操作往往需要跳至新界面，而桌面端中大部分都可以當前頁直接操作。

桌面端的這種“就地操作”規(guī)律（或者叫情境式操作），幾乎可以掩蓋大部分的中小型功能，是和移動端差異性較大的一種設計思路。

4.界面多又深vs界面少又淺

上面介紹的3個桌面端信息架構特點：二維布局、信息露出、就地操作，其實剛好打算了桌面端的整體界面結(jié)構特點-界面少且淺。一般只有幾個主界面，層級方面只有1-2級，剩下的層級由彈窗、浮層、下拉菜單、右擊菜單、點擊菜單、tooltip等形式承載。

反觀移動端，大部分的模塊分類、功能流程，大多需要借助新界面來承載，所以導致界面許多，層級也很深。

比如上圖的例子，是“飛書”的設置功能?？梢钥吹皆谝苿佣耍O置功能的界面許多，層級也很深，而在桌面端只要1個界面，再搭配一些彈窗，就基本解決問題了。

三、樣式差異

5.元素大vs元素小

移動端由于使用手指交互，所以每個可交互元素的尺寸都需要大于7mm（iOSHIG規(guī)定，Android平臺也類似），這也就導致移動端的元素整體偏大一些。

而桌面端采納鼠標交互，鼠標指針的尺寸比手指小許多，也敏捷許多，所以桌面端的元素可以做得比較?。ㄊ强梢裕皇潜匦瑁?。

以上圖Notion為例，同樣的列表在移動端的高度明顯比桌面端要高出不少；再比如上圖的微信案例，同樣的“創(chuàng)建群”界面，移動端的搜尋框明顯比桌面端要高許多，復選框也會大一些。

6.排布松散vs排布緊湊

由于移動端元素尺寸相對較大，以及手指敏捷度沒有鼠標高，簡單誤操作；所以移動端的元素排布一般相對比較松散一些，且不會消失大量元素密集排布的狀況；而桌面端的排布可以做的比較緊湊一些，也有力量承載大量密集的元素。

比如上圖所示的Word案例中，移動端的工具欄，按鈕數(shù)量少，排布松散；但桌面端的工具欄，按鈕許多，排布緊緊湊湊。

7.多樣對齊vs左上對齊

移動端屏幕比較小，用戶視線可以掩蓋整個屏幕；所以元素的對齊方式相對比較均衡，左對齊、右對齊、上對齊、下對齊、居中對齊都有，傾向性不大。比如上圖中的印象筆記移動端界面。

桌面端窗口尺寸相對較大，用戶視線無法掩蓋整個窗口，需要移動視線才能看清全貌。用戶視線一般從左上進入，所以元素的對齊方式優(yōu)選“左對齊”和“上對齊”。尤其是“上對齊”的傾向性很強，很少有產(chǎn)品把比較重要的信息“下對齊”排布，由于這樣很簡單被用戶忽視。

四、交互方式差異

8.手指簡潔交互vs鼠標簡單交互

移動端采納手指交互，交互方式相對比較簡潔，以點擊（tap）為主，各類手勢為輔。

桌面端采納鼠標交互，交互方式相對簡單，單擊、雙擊、右擊、hover、拖拽、劃選、滾輪滾動都是用戶常常使用的交互方式；另外，鼠標指針還會有許多狀態(tài)（如上圖），這些狀態(tài)的變化可以實現(xiàn)特別豐富的交互模式。

上述特點對設計的影響有以下幾點：

全部可交互元素，一般都需要定義一般態(tài)和hover態(tài)；大部分的數(shù)據(jù)對象，比如文字、圖片、文件、列表項，都需要考慮定義選中態(tài)、右擊菜單、雙擊規(guī)律；鼠標指針可需要進行一些定義，比如鼠標放到布局分隔線上時變成“水平調(diào)整大小箭頭”。9.軟鍵盤vs硬鍵盤

移動端采納軟鍵盤的形式，場景式消失，沒有快捷鍵規(guī)律，輸入成本相對較高。

桌面端采納硬鍵盤的形式，輸入成本相對較低。有豐富的快捷鍵規(guī)律，且需要設計師定義快捷鍵，比如一些通用的快捷鍵：復制、粘貼、全選等。

對于一些高頻操作的功能，也需要定義快捷鍵，比如發(fā)送消息、下一步；另外，對于比較成熟的桌面端產(chǎn)品，原則上需要支持“全鍵盤交互”，也就是說可以脫離鼠標實現(xiàn)全部交互，而這些鍵盤交互規(guī)律也是需要設計師定義的。

10.單窗口vs多窗口

移動端是單一窗口，全部操作都是針對當前窗口的，很少有跨窗口規(guī)律。

桌面端是多窗口規(guī)律，可以同時存在多個窗口，且各個應用之間也可以交互。所以在設計時需要定義這些交互規(guī)律（窗口任務并行窗口間交互應用間交互）；比如網(wǎng)盤應用中，用戶是否可以把文件從一個窗口拖動到另外一個窗口，是否可以拖到桌面上保存，詳細的交互規(guī)律又是怎樣的。

最終，還需要定義窗口是否是模態(tài)的，假如是模態(tài)的，則用戶無法操作應用下的其他窗口。

五、控件/模式差異

桌面端的控件/模式（ComponentsPatterns）和移動端也有著諸多差異，這里列舉了一部分比較典型的差異。

彈窗：移動端和桌面端的彈窗樣式有所差異。按鈕位置也會有所差異，移動端的確定性按鈕在右側(cè)，桌面端中MacOS的在右側(cè)，Windows的在左側(cè)。

浮層：移動端由于屏幕尺寸限制，較少使用浮層控件。而浮層在桌面端則特別好用，它可以做成信息詳情浮層、二次確認浮層、復合型浮層等。相對于彈窗而言，它的打攪性很小，而且“就地操作”，效率更高，同時能夠承載的信息也相對比較豐富，是筆者很喜愛用的一個桌面端視圖控件。

tooltip：移動端理所當然是沒有tooltip的。而桌面端tooltip的出鏡率就很高了，一般有2個作用：一個是用于解釋一些按鈕的功能，另一個是展現(xiàn)被截斷字段的完整信息（均見上圖）。

更多菜單：移動端的更多菜單采納的控件是左滑菜單（iOS）或長按菜單（Android），桌面端采納的則是右擊菜單。

除了上面所說的控件，其實還有許多其他控件也是不同的，再此不一一細述。比如：標簽欄（無文字vs有文字）、面包屑（少用vs常用）、單選（單選列表vs單選按鈕）、開關（開關vs復選框）、下拉（下拉框vsActionsheets）

另外，還有許多和系統(tǒng)交互的模式也是不同的。比如上傳、下載、保存、打開、系統(tǒng)任務欄、系統(tǒng)推送、后臺運行等。不過這些差異性只需跟隨系統(tǒng)即可，沒有特殊需要留意的，也就不再贅述了。

六、最終

桌面端和移動端原本是相對比較割裂的兩種平臺，設計語言相差較大，用戶的使用習慣也相差較大，所以在設計時還是要留意這些差異性。

但這些年桌面端和移動端也在趨于融合。

一方面是由于跨平臺技術的進展：Windows系統(tǒng)可以在各種設備上運行、iOS可以在Mac上運行、跨平臺語言越來越完善，讓平臺一體化可以實現(xiàn)；另一方面是由于移動端的力量逐日變強：移動端的功能集和桌面端越來越趨于全都，所以產(chǎn)品設計層面也