桌面端和移动端的设计差异性

新闻 2024-9-22编辑：深圳网站建设阅读（）标签： 差异性 桌面

深圳网站建设【shè】公【gōng】司 帮助企业【yè】提升网站形【xíng】象,彰显公司实【shí】力,PC+手机【jī】+微信+小程序
【模板网站的价格】国际域名+阿里1G空间+备案 一条龙服务
【定制网站的功能】SEO精准营销系统+城市分站+W3C标准
【营销网站的效果】重长尾，重优化，提权重，扩收录，提排名
【量身订制的设计】据据需求量身定制。设计到满意为止
【专属VIP的服务】24RX365 为您【nín】提供1对1的【de】专属VIP服务【wù】

　　最【zuì】近在做跨【kuà】平台产品【pǐn】，设计桌面端时一直有个【gè】疑【yí】惑【huò】：桌【zhuō】面端是不是把移动【dòng】端【duān】的设计直接平移过来就【jiù】行，还是说【shuō】会【huì】有差异性【xìng】?这些【xiē】差异性背后的原【yuán】因又是【shì】什么?于是做了一些简单的研究，下面与大家【jiā】分享下桌面【miàn】端和移动端的设计【jì】异同点(都指客户【hù】端。之所以强调这点【diǎn】是因【yīn】为桌面客户端和 web 端又会有一些差异)

　　Part 1

　　整体的一致性

　　首先【xiān】，跨【kuà】平台【tái】产品【pǐn】的【de】设计整体是期望趋于一致的，这样不仅可以降低【dī】用户【hù】的认知成本【běn】，也可以降低设【shè】计成本，甚至可以降低开发成本【běn】(更加统一的【de】接口【kǒu】)。

　　从布局上而言【yán】，桌面【miàn】端的界面可以理解为是移动端的多【duō】个界面拼接在一起(上图)。从功能上而言【yán】，桌面端的功【gōng】能也和移动端的整【zhěng】体【tǐ】一致，只【zhī】是在【zài】视图层面和【hé】控【kòng】件层面会【huì】有【yǒu】所【suǒ】差异【yì】。比如下图所示案【àn】例，Mac 端 “新建提【tí】醒” 和 iOS 端整体是【shì】一致的，只是使用的控件和视【shì】图不太一样。

　　但局【jú】部而【ér】言【yán】，桌面端和移动端仍【réng】然有着很多差异性。在设计【jì】桌面端时，尊重这【zhè】些差异【yì】性【xìng】是十分有必要的。下【xià】面的篇幅便来介【jiè】绍【shào】下这些【xiē】差异【yì】性。大家也可以思考下，这些差异【yì】性背后【hòu】的深层原因是什么【me】?

　　Part 2

　　信息架构差异

　　1. 一维布局 vs 二维布局

　　界面布局层面【miàn】而言【yán】，移动端【duān】的布局一般是一【yī】维的，只有纵向布局【jú】，加之以【yǐ】屏幕空间【jiān】有限，所以整体布局都会比较简单，能够【gòu】容纳【nà】的信息比较【jiào】有限。

　　桌【zhuō】面【miàn】端的布局一【yī】般【bān】是【shì】二维的，不仅有纵【zòng】向【xiàng】维度，还【hái】有横向维【wéi】度，大部分以横向维度为主。加之以屏幕空间【jiān】较【jiào】大，其【qí】能够容纳的信息就多出很多【duō】。比如【rú】桌面端经典的【de】 “多栏布局”，可以直接把移动端 3 个层级的界面全部融【róng】合在一个【gè】界面【miàn】中(下图)。

　　桌面【miàn】端【duān】的二维布局，一方【fāng】面降低了信息【xī】架构的深度【dù】，另一【yī】方面也会让单个界面的信息量大大增【zēng】加【jiā】。在布局设计时需要投入更多的精【jīng】力对界面元素进【jìn】行归【guī】类【lèi】、分层【céng】、排序。

　　2. 信息隐藏 vs 信息露出

　　桌面端尺寸更大，这带来的【de】好处【chù】是【shì】可以平铺出【chū】来【lái】更多的信息。不用像【xiàng】移动端那样，只【zhī】能放出来【lái】最核心的信息，其他信息必须采【cǎi】用折叠【dié】、删除【chú】的方式做隐藏。

　　比如上图所示的腾讯文档案例，移动【dòng】端的文【wén】档【dàng】编辑器【qì】，设计师【shī】必【bì】须【xū】把各种功能进行归类，然后【hòu】放到各【gè】个【gè】入口【kǒu】中，点击入口后才能看到具体的功能。而在桌【zhuō】面【miàn】端完【wán】全可以把这些功能平铺露出，其信息结构是不【bú】同的。

　　3. 跳转操作 vs 就地操作

　　对【duì】于具有一定流程的功【gōng】能，移【yí】动端往往需要跳转界【jiè】面【miàn】才能完【wán】成操作，而桌面端可以【yǐ】就地【dì】完成操作【zuò】。

　　比【bǐ】如上图 1 所示【shì】的移【yí】动邮件功能，把一封 QQ 邮箱中的邮件移动到 iCloud 邮箱【xiāng】中，需【xū】要跳【tiào】转 2 个界面才能完成。而桌面【miàn】端只需要在下拉列【liè】表【biǎo】里就能直接【jiē】完成，无需跳【tiào】转【zhuǎn】界面。

　　再比如【rú】上【shàng】图 2 所示的设置界面，在移动端更改选项【xiàng】、重新命名等操作往【wǎng】往【wǎng】需要跳至新界面，而桌面端中大部【bù】分都可【kě】以当前页【yè】直接操作【zuò】。

　　桌面端的这种 “就地操作” 逻辑(或者叫情境式操【cāo】作)，几【jǐ】乎可【kě】以覆盖大部【bù】分【fèn】的中【zhōng】小型功能【néng】，是和移【yí】动端差异性较【jiào】大的一种设计思路。

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

　　上面介绍的【de】 3 个桌面端信息架构特点：二维布【bù】局、信息露出、就地操作，其实【shí】刚【gāng】好【hǎo】决定了【le】桌面端的整体【tǐ】界面【miàn】结构特点-界面少【shǎo】且浅。一般只【zhī】有几个【gè】主界面，层级方【fāng】面【miàn】只有 9-22 级，剩【shèng】下的层【céng】级由【yóu】弹【dàn】窗、浮层、下拉菜单【dān】、右击菜单、点击菜单、tooltip 等形【xíng】式承载。

　　反观移动端，大部分的模块分类、功能流程【chéng】，大多【duō】需要借助新界面【miàn】来承载，所【suǒ】以导致【zhì】界面很【hěn】多，层级也【yě】很深。

　　比如上图的例子，是 “飞书” 的设置功能【néng】。可以看到【dào】在移动端【duān】，设置功能【néng】的界面很多，层级也【yě】很深，而在桌面端【duān】只要 1 个界面，再搭配【pèi】一些弹【dàn】窗【chuāng】，就基本解决【jué】问【wèn】题了。

　　Part 3

　　样式差异

　　5. 元素大 vs 元素小

　　移动端由于使用手指交【jiāo】互【hù】，所【suǒ】以每个可交【jiāo】互元素的【de】尺寸都需要大于 7mm(iOS HIG 规定，Android 平台也类似)，这也就导致【zhì】移动端的元素整体【tǐ】偏大一些。

　　而【ér】桌面【miàn】端采用鼠标交互，鼠标【biāo】指针的尺寸比【bǐ】手指【zhǐ】小很多【duō】，也灵活很多，所以桌面端的元素可【kě】以做【zuò】得【dé】比较小(是【shì】可以，不是必须)。

　　以上图 Notion 为【wéi】例【lì】，同样的列表在移动端【duān】的高【gāo】度明显比桌【zhuō】面端要高出不少。再比如上图【tú】的【de】微信案例，同【tóng】样【yàng】的 “创【chuàng】建群” 界面，移【yí】动端的搜索框明显比桌【zhuō】面端要高【gāo】很多【duō】，复选框也会大一些。

　　6. 排布松散 vs 排布紧凑

　　由于移动端元【yuán】素尺寸相对较大，以及手指灵活【huó】度没有鼠标【biāo】高【gāo】，容易【yì】误操作。所以移动【dòng】端的元【yuán】素排布【bù】一般相对【duì】比较松散一些，且不会出现大【dà】量元素【sù】密集【jí】排【pái】布的情【qíng】况【kuàng】。而桌面端【duān】的排布【bù】可以做的比较紧凑一些，也有能力承载大量密集的元素。

　　比【bǐ】如上图所示【shì】的【de】 Word 案例中，移动端【duān】的工具栏，按钮数量少，排布松散【sàn】。但桌【zhuō】面端的工具栏，按钮很【hěn】多，排布紧紧【jǐn】凑

　　7. 多样对齐 vs 左上对齐

　　移动端【duān】屏幕比较【jiào】小，用【yòng】户视线可以覆【fù】盖整个屏幕。所以元素【sù】的对齐方式相对比较均【jun1】衡，左对齐、右对齐、上【shàng】对齐、下对齐、居中对【duì】齐都有，倾向性不大。比如上图【tú】中的印【yìn】象笔【bǐ】记移【yí】动【dòng】端【duān】界面。

　　桌面端【duān】窗口尺寸相对较大，用户视线无【wú】法覆盖整个窗口，需【xū】要移动视线才【cái】能看清【qīng】全貌。用户视线【xiàn】一般从左上进入，所【suǒ】以元素【sù】的对齐【qí】方式优选 “左对齐” 和【hé】 “上对齐”。尤【yóu】其是 “上对齐” 的倾向性很强，很少有产品【pǐn】把【bǎ】比较重要【yào】的【de】信息 “下【xià】对齐” 排布【bù】，因为【wéi】这样【yàng】很容【róng】易被用户忽略。

　　Part 4

　　交互方式差异

　　8. 手指简单交互 vs 鼠标复杂交互

　　移【yí】动端采用【yòng】手【shǒu】指交互，交【jiāo】互方【fāng】式相对【duì】比较简单，以点击(tap)为主，各【gè】类手势为辅。

　　桌面【miàn】端采用鼠标交【jiāo】互，交互【hù】方式相对【duì】复杂，单击、双击【jī】、右击、hover、拖【tuō】拽、划选【xuǎn】、滚轮【lún】滚动【dòng】都是用户经常使用的交互方式。另外【wài】，鼠标指针还会有很【hěn】多【duō】状态【tài】(如【rú】上图)，这些【xiē】状态的变化可以实现非常丰富的交【jiāo】互模【mó】式。上述特点对设计的【de】影响有以下几点：

　　所有可交互元素，一般都需要定义普通态和 hover 态

　　大部分的数据【jù】对象，比如文字、图【tú】片、文件、列【liè】表项，都【dōu】需要考【kǎo】虑定义选中态、右击菜【cài】单、双【shuāng】击逻【luó】辑

　　鼠【shǔ】标指针可需【xū】要进行【háng】一【yī】些定义，比如鼠标放到布局【jú】分【fèn】隔线上时变成 ”水平调整大【dà】小【xiǎo】箭头“

　　9. 软键盘 vs 硬键盘

　　移动端采用软键盘的形式，场景式出现，没【méi】有快捷【jié】键逻【luó】辑，输入成本相对较高【gāo】。

　　桌面端采用硬键盘的形式，输入成本相对较低。有【yǒu】丰富的快捷键逻辑，且需要设计师定义快捷键，比【bǐ】如一些通用【yòng】的快捷键：复制、粘【zhān】贴、全选等。对于一些高频操作的功能，也【yě】需要定义快【kuài】捷键，比如发【fā】送消息、下【xià】一步。另【lìng】外，对于比较成【chéng】熟的【de】桌【zhuō】面端产品，原【yuán】则上需要【yào】支持 “全【quán】键盘交【jiāo】互”，也就是说【shuō】可以脱【tuō】离鼠标实现所有交【jiāo】互，而【ér】这些键盘交互逻辑也是需【xū】要设计师【shī】定【dìng】义的。

　　10.单窗口 vs 多窗口

　　移动端是单一【yī】窗口，所有操作都是针对当【dāng】前【qián】窗【chuāng】口的，很少【shǎo】有跨【kuà】窗口逻辑。

　　桌面端是多窗口逻辑，可以同时【shí】存在多个窗口【kǒu】，且各个应【yīng】用之间【jiān】也可以交互。所以在【zài】设计时需【xū】要定义这【zhè】些交互逻辑(窗口【kǒu】任务并行 & 窗口间交互【hù】 & 应用【yòng】间交互)。比如网盘应【yīng】用中【zhōng】，用户【hù】是否可以把文件从【cóng】一个窗口拖动到另外【wài】一个窗口，是【shì】否可以【yǐ】拖【tuō】到【dào】桌面上保【bǎo】存【cún】，具体的交互【hù】逻辑又是怎样的。最后，还需要定义窗【chuāng】口是【shì】否【fǒu】是模【mó】态的，如果是模态的，则用户【hù】无法操作应用下的其他窗【chuāng】口。

　　Part 5

　　控件/模式差异

　　桌【zhuō】面端的控件/模式(Components & Patterns)和移动端也有【yǒu】着诸多差【chà】异，这里【lǐ】列【liè】举【jǔ】了一部分【fèn】比较典型的差异【yì】。

　　弹窗：移动端和桌面【miàn】端的【de】弹窗样式【shì】有【yǒu】所【suǒ】差异。按钮位置也会有所差异，移动端【duān】的 "确【què】定性" 按钮【niǔ】在右侧，桌面端中【zhōng】 MacOS 的【de】在右【yòu】侧，Windows 的在左侧。

　　浮层：移动端【duān】由【yóu】于屏幕【mù】尺寸限制，较【jiào】少使用【yòng】浮层控件。而【ér】浮【fú】层在桌面端则非常好用，它可以做成信息详情浮层、二次确认浮【fú】层、复合型浮层【céng】等。相对于弹【dàn】窗而言【yán】，它的打扰性很小，而且 “就地操作”，效率【lǜ】更高，同时【shí】能够承载【zǎi】的信息也【yě】相对【duì】比较【jiào】丰富，是笔者很喜【xǐ】欢用的一个【gè】桌面端视图【tú】控件。

　　tooltip：移动【dòng】端理所当然是没有 tooltip 的。而桌面【miàn】端 tooltip 的出【chū】镜【jìng】率就很高了【le】，一【yī】般有 2 个作用：一【yī】个是用于解【jiě】释一些按钮的功能【néng】，另一个【gè】是展示被【bèi】截断字段的【de】完整信息(均见上图)。

　　更多菜单：移动【dòng】端的更【gèng】多菜单采用的控件是【shì】左【zuǒ】滑菜【cài】单(iOS)或长按菜【cài】单【dān】(Android)，桌面【miàn】端采用的则是右击菜【cài】单。

　　除了【le】上面所说的控件【jiàn】，其实【shí】还有【yǒu】很【hěn】多其他【tā】控件也是不同的【de】，再此【cǐ】不一一细述。比如【rú】：标【biāo】签栏(无文字 vs 有【yǒu】文字)、面包【bāo】屑(少用 vs 常用)、单选(单选【xuǎn】列表 vs 单选按【àn】钮)、开【kāi】关(开关 vs 复【fù】选框)、下拉(下拉框 vs Actionsheets)...

　　另外，还有【yǒu】很【hěn】多和系统交互的【de】模式也是不同的。比如上传、下载、保【bǎo】存、打【dǎ】开、系【xì】统任务栏、系统推送、后台运【yùn】行【háng】等。不过这些【xiē】差异性【xìng】只【zhī】需跟随【suí】系统【tǒng】即可，没【méi】有特别需要注意的，也就不再赘述了。

　　The End

　　最后

　　桌【zhuō】面端【duān】和移动端原本是相对比较割裂【liè】的【de】两种【zhǒng】平台，设计语言相差较大【dà】，用户的使用习惯也相差较【jiào】大【dà】，所以【yǐ】在设计时还是要注意这些【xiē】差异【yì】性。

　　但【dàn】这些年桌【zhuō】面端【duān】和【hé】移动端也在趋于【yú】融合。一方【fāng】面是因为【wéi】跨平台技术的发展：Windows 系统可以【yǐ】在各种设备上运行、iOS 可以【yǐ】在 Mac 上运行【háng】、跨【kuà】平台语【yǔ】言越【yuè】来【lái】越完善【shàn】，让平台一体化可以实现;另一方面是因为移动【dòng】端的【de】能【néng】力逐【zhú】日变强：移动端的功能集和【hé】桌面端越【yuè】来越趋于一致，所以产品设计【jì】层面也就理【lǐ】所应当趋于一致了。

　　也就是说，移动【dòng】端【duān】和桌面端的差异【yì】性是在变【biàn】化的，所以大家不用过于拘泥【ní】，可以用【yòng】更【gèng】加开放的【de】态度看待 “差【chà】异【yì】性” 问题。就【jiù】像几年前关于 iOS 和 Android 的差异性争议【yì】一样，那会儿大家做 APP 都会出两套设计稿【gǎo】，微信甚至在 Android 版上取消了 “比较 iOS” 的底部标签栏。但这些都已【yǐ】成为了历【lì】史，这两个平台【tái】现【xiàn】在【zài】越来越像【xiàng】了，大家【jiā】都放下了包【bāo】袱，融合终究大势所【suǒ】趋。

• 上一章：专业网页设计风格应该是这样子的
• 下一章：廉价的网页设计可能使便宜变得更昂贵