桌面端和移動端的設(shè)計差異性

新聞 2023-06-06編輯：重慶網(wǎng)站建設(shè)標(biāo)簽： 差異性 桌面

重慶網(wǎng)站建設(shè)公司 幫助企業(yè)提升網(wǎng)站形象,彰顯公司實力,PC+手機+微信+小程序
【模板網(wǎng)站的價格】國際域名+阿里1G空間+備案 一條龍服務(wù)
【定制網(wǎng)站的功能】SEO精準(zhǔn)營銷系統(tǒng)+城市分站+W3C標(biāo)準(zhǔn)
【營銷網(wǎng)站的效果】重長尾，重優(yōu)化，提權(quán)重，擴收錄，提排名
【量身訂制的設(shè)計】據(jù)據(jù)需求量身定制。設(shè)計到滿意為止
【專屬VIP的服務(wù)】24RX365 為您提供1對1的專屬VIP服務(wù)

　　最近在做跨平臺產(chǎn)品，設(shè)計桌面端時一直有個疑惑：桌面端是不是把移動端的設(shè)計直接平移過來就行，還是說會有差異性?這些差異性背后的原因又是什么?于是做了一些簡單的研究，下面與大家分享下桌面端和移動端的設(shè)計異同點(都指客戶端。之所以強調(diào)這點是因為桌面客戶端和 web 端又會有一些差異)

　　Part 1

　　整體的一致性

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

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

　　但局部而言，桌面端和移動端仍然有著很多差異性。在設(shè)計桌面端時，尊重這些差異性是十分有必要的。下面的篇幅便來介紹下這些差異性。大家也可以思考下，這些差異性背后的深層原因是什么?

　　Part 2

　　信息架構(gòu)差異

　　1. 一維布局 vs 二維布局

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

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

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

　　2. 信息隱藏 vs 信息露出

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

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

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

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

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

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

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

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

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

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

　　比如上圖的例子，是 “飛書” 的設(shè)置功能。可以看到在移動端，設(shè)置功能的界面很多，層級也很深，而在桌面端只要 1 個界面，再搭配一些彈窗，就基本解決問題了。

　　Part 3

　　樣式差異

　　5. 元素大 vs 元素小

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

　　而桌面端采用鼠標(biāo)交互，鼠標(biāo)指針的尺寸比手指小很多，也靈活很多，所以桌面端的元素可以做得比較小(是可以，不是必須)。

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

　　6. 排布松散 vs 排布緊湊

　　由于移動端元素尺寸相對較大，以及手指靈活度沒有鼠標(biāo)高，容易誤操作。所以移動端的元素排布一般相對比較松散一些，且不會出現(xiàn)大量元素密集排布的情況。而桌面端的排布可以做的比較緊湊一些，也有能力承載大量密集的元素。

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

　　7. 多樣對齊 vs 左上對齊

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

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

　　Part 4

　　交互方式差異

　　8. 手指簡單交互 vs 鼠標(biāo)復(fù)雜交互

　　移動端采用手指交互，交互方式相對比較簡單，以點擊(tap)為主，各類手勢為輔。

　　桌面端采用鼠標(biāo)交互，交互方式相對復(fù)雜，單擊、雙擊、右擊、hover、拖拽、劃選、滾輪滾動都是用戶經(jīng)常使用的交互方式。另外，鼠標(biāo)指針還會有很多狀態(tài)(如上圖)，這些狀態(tài)的變化可以實現(xiàn)非常豐富的交互模式。上述特點對設(shè)計的影響有以下幾點：

　　所有可交互元素，一般都需要定義普通態(tài)和 hover 態(tài)

　　大部分的數(shù)據(jù)對象，比如文字、圖片、文件、列表項，都需要考慮定義選中態(tài)、右擊菜單、雙擊邏輯

　　鼠標(biāo)指針可需要進(jìn)行一些定義，比如鼠標(biāo)放到布局分隔線上時變成 ”水平調(diào)整大小箭頭“

　　9. 軟鍵盤 vs 硬鍵盤

　　移動端采用軟鍵盤的形式，場景式出現(xiàn)，沒有快捷鍵邏輯，輸入成本相對較高。

　　桌面端采用硬鍵盤的形式，輸入成本相對較低。有豐富的快捷鍵邏輯，且需要設(shè)計師定義快捷鍵，比如一些通用的快捷鍵：復(fù)制、粘貼、全選等。對于一些高頻操作的功能，也需要定義快捷鍵，比如發(fā)送消息、下一步。另外，對于比較成熟的桌面端產(chǎn)品，原則上需要支持 “全鍵盤交互”，也就是說可以脫離鼠標(biāo)實現(xiàn)所有交互，而這些鍵盤交互邏輯也是需要設(shè)計師定義的。

　　10.單窗口 vs 多窗口

　　移動端是單一窗口，所有操作都是針對當(dāng)前窗口的，很少有跨窗口邏輯。

　　桌面端是多窗口邏輯，可以同時存在多個窗口，且各個應(yīng)用之間也可以交互。所以在設(shè)計時需要定義這些交互邏輯(窗口任務(wù)并行 & 窗口間交互 & 應(yīng)用間交互)。比如網(wǎng)盤應(yīng)用中，用戶是否可以把文件從一個窗口拖動到另外一個窗口，是否可以拖到桌面上保存，具體的交互邏輯又是怎樣的。最后，還需要定義窗口是否是模態(tài)的，如果是模態(tài)的，則用戶無法操作應(yīng)用下的其他窗口。

　　Part 5

　　控件/模式差異

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

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

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

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

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

　　除了上面所說的控件，其實還有很多其他控件也是不同的，再此不一一細(xì)述。比如：標(biāo)簽欄(無文字 vs 有文字)、面包屑(少用 vs 常用)、單選(單選列表 vs 單選按鈕)、開關(guān)(開關(guān) vs 復(fù)選框)、下拉(下拉框 vs Actionsheets)...

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

　　The End

　　最后

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

　　但這些年桌面端和移動端也在趨于融合。一方面是因為跨平臺技術(shù)的發(fā)展：Windows 系統(tǒng)可以在各種設(shè)備上運行、iOS 可以在 Mac 上運行、跨平臺語言越來越完善，讓平臺一體化可以實現(xiàn);另一方面是因為移動端的能力逐日變強：移動端的功能集和桌面端越來越趨于一致，所以產(chǎn)品設(shè)計層面也就理所應(yīng)當(dāng)趨于一致了。

　　也就是說，移動端和桌面端的差異性是在變化的，所以大家不用過于拘泥，可以用更加開放的態(tài)度看待 “差異性” 問題。就像幾年前關(guān)于 iOS 和 Android 的差異性爭議一樣，那會兒大家做 APP 都會出兩套設(shè)計稿，微信甚至在 Android 版上取消了 “比較 iOS” 的底部標(biāo)簽欄。但這些都已成為了歷史，這兩個平臺現(xiàn)在越來越像了，大家都放下了包袱，融合終究大勢所趨。

• 上一章：專業(yè)網(wǎng)頁設(shè)計風(fēng)格應(yīng)該是這樣子的
• 下一章：廉價的網(wǎng)頁設(shè)計可能使便宜變得更昂貴