无码人妻AⅤ一区二区三区A片一 ,国产少妇在线,婷婷五月天视频,操逼午夜,欧美成人色情网,免费成人黄色电影视频,91女人18片女毛片60分钟,欧美日本在线视频

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專(zhuān)業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

三分設(shè)｜連接知識(shí)，幫助全球 1 億設(shè)計(jì)師成長(zhǎng)

轉(zhuǎn)自：淘網(wǎng)易UEDC

編輯：益達(dá)

共 3778 字，預(yù)計(jì)閱讀 10 分鐘

最近在做跨平臺(tái)產(chǎn)品，設(shè)計(jì)桌面端時(shí)一直有個(gè)疑惑：桌面端是不是把移動(dòng)端的設(shè)計(jì)直接平移過(guò)來(lái)就行，還是說(shuō)會(huì)有差異性？這些差異性背后的原因又是什么？于是做了一些簡(jiǎn)單的研究，下面與大家分享下桌面端和移動(dòng)端的設(shè)計(jì)異同點(diǎn)（都指客戶(hù)端。之所以強(qiáng)調(diào)這點(diǎn)是因?yàn)樽烂婵蛻?hù)端和 web 端又會(huì)有一些差異）

第一項(xiàng)

整體的一致性

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

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

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

第二項(xiàng)

信息架構(gòu)差異

1. 一維布局 vs 二維布局

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

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

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

2. 信息隱藏 vs 信息露出

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

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

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

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

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

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

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

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

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

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

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

第三項(xiàng)

視覺(jué)樣式差異

5. 元素大 vs 元素小

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

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

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

6. 排布松散 vs 排布緊湊

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

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

7. 多樣對(duì)齊 vs 左上對(duì)齊

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

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

第四項(xiàng)

交互方式差異

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

移動(dòng)端采用手指交互，交互方式相對(duì)比較簡(jiǎn)單，以點(diǎn)擊（tap）為主，各類(lèi)手勢(shì)為輔。

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

所有可交互元素，一般都需要定義普通態(tài)和hover態(tài)
大部分的數(shù)據(jù)對(duì)象，比如文字、圖片、文件、列表項(xiàng)，都需要考慮定義選中態(tài)、右擊菜單、雙擊邏輯
鼠標(biāo)指針可需要進(jìn)行一些定義，比如鼠標(biāo)放到布局分隔線上時(shí)變成”水平調(diào)整大小箭頭“

9. 軟鍵盤(pán) vs 硬鍵盤(pán)

移動(dòng)端采用軟鍵盤(pán)的形式，場(chǎng)景式出現(xiàn)，沒(méi)有快捷鍵邏輯，輸入成本相對(duì)較高。

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

10. 單窗口 vs 多窗口

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

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

第五項(xiàng)

控件/模式差異

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

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

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

tooltip：移動(dòng)端理所當(dāng)然是沒(méi)有tooltip的。而桌面端tooltip的出鏡率就很高了，一般有2個(gè)作用：一個(gè)是用于解釋一些按鈕的功能，另一個(gè)是展示被截?cái)嘧侄蔚耐暾畔ⅲň?jiàn)上圖）。

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

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

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

最后

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

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

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

?? 我們一起聊設(shè)計(jì) ???♂?

設(shè)計(jì)交流群

期待與更多優(yōu)秀設(shè)計(jì)師一起成長(zhǎng)

PS：歡迎大家關(guān)注三分設(shè)，每天早上9點(diǎn)，準(zhǔn)時(shí)充電。分享優(yōu)質(zhì)設(shè)計(jì)、創(chuàng)意靈感、新知新識(shí)，定期大咖老師直播分享，零距離連麥，答疑解惑。添加小小蟲(chóng)微信號(hào)【 Lil_Bug 】，備注【 三分設(shè) 】加入！（只面向星標(biāo)了公眾號(hào)三分設(shè)的粉絲）

?? 星標(biāo)公眾號(hào)方法

點(diǎn)開(kāi)下方公眾號(hào) ?? 點(diǎn)擊右上角【...】 ?? 設(shè)為星標(biāo)

還不知道設(shè)計(jì)桌面端和移動(dòng)端有什么差別？這里統(tǒng)統(tǒng)告訴你