UI设计基础知识:移动端UI设计与PC端有什麽异同点

移动端UI设计与PC端有什麽异同点?很多PC端设计师在刚接手移动端UI设计时,会不自觉将PC端的部分设计理念「移植」到移动端上,出现水土不服的情况。开门见山地说,PC端与移动端最大的区别就是屏幕大小的不同,这也决定不同设备在界面信息展现有着不同的理念。

移动端UI设计与PC端有什麽相同点?

UI设计基础知识:移动端UI设计与PC端有什麽异同点

UI设计基础知识

无论是智慧型手机、平板电脑,亦或是PC端的MacOS系统、Windows系统,确保整体设计趋於一致,不仅可以降低用户的认知成本,同时也可以降低设计师的设计成本,甚至是程序员的开发成本。

从整体布局上看,PC端界面相当於由移动端多个界面拼接二来;从整体功能上看,两者并没有太大的却别,只是视图层面和空间层面存在差异。

但从局部上看,PC端和移动端UI设计有着很多差异性,因此在进行UI设计时,我们需要尊重这些差异性,才能保证用户无障碍使用各类终端设备。

移动端UI设计与PC端有什麽不同点?

不同点① 信息架构的差异

UI设计基础知识:移动端UI设计与PC端有什麽异同点

UI设计基础知识

◆ 移动端UI信息架构的特点:

1. 界面布局简单且多为纵向维度。

2. 容纳信息有限,只能展现最核心的信息,其他辅助信息须采用摺叠、删除等方式隐藏。

3. 对於具有一定流程的功能(如更新选项、重新命名等),往往需要跳转到新界面才能完成操作。

4. 大部分模块分类、功能流程需要藉助新界面承载,导致移动端界面的结构特点为「界面多且层级深」。

◆ PC端UI信息架构的特点:

A. 界面布局复杂且一般是二维的,不仅有纵向维度,还有横向维度,但大部分以横向维度为主。

B. 容纳信息相对多很多,界面能平铺很多信息,但要注意信息层级展示规则。

C. 大部分操作可在当前页面直接完成,无需跳转到新界面。

D. 根据上述三个信息结构的特点,决定PC端UI整体界面结构特点为「界面少而层级浅」。

不同点② 样式结构的差异

UI设计基础知识:移动端UI设计与PC端有什麽异同点

UI设计基础知识

◆ 移动端UI样式结构的特点:

1. 移动端使用手指交互,灵活性稍差且容易误操作,因此移动端元素排布相对松散,且不会出现大量元素密集排布的情况。

2. 为确保元素交互的精确度,每个可交互元素的尺寸需超过7mm。

3. 移动端屏幕较小,用户视线可直接覆盖整个屏幕,因此界面元素对齐方式相对多样,倾向性也不大。

◆ PC端UI样式结构的特点:

A. PC端采用滑鼠交互,滑鼠指针尺寸较小,灵活性强,因此元素排布可紧凑写,也可承载大量密集元素。

B. 滑鼠指针的交互误操作性较低,因此可交互元素的尺寸可以做得比较小。

C. PC端窗口尺寸较大,用户难以看清整个窗口的全貌,因此元素对齐方式多以「左对齐」和「上对齐」为主。此外,用户实现一般是从左上进入界面的,对齐方式会更倾向於「上对齐」。

不同点③ 交互方式的差异

UI设计基础知识:移动端UI设计与PC端有什麽异同点

UI设计基础知识

◆ 移动端UI交互方式的特点:

1. 交互方式相对简单,主要以点击为主,其他手势为辅助。

2. 采用软键盘形式,基於场景应用出现,没有快捷键逻辑,输入成本相对较多。

3. 少见跨窗口逻辑,所有操作针对当前窗口进行。

◆ PC端UI交互方式的特点:

A. 交互方式多且复杂,滑鼠指针的各种状态也可实现丰富的交互模式。

B. 采用硬键盘形式,输入成本相对较低,有丰富的快捷键逻辑,且需要设计师定义快捷键。部分相对成熟的PC端产品更支持「全键盘交互」,可脱离滑鼠实现所有交互。

C. 支持多窗口逻辑,可同时存在多个窗口及各个应用间进行交互,因此进行UI设计时,需定义某些交互逻辑,如窗口任务并行、窗口间交互及应用间交互等。

不同点④ 控件/模式的差异

UI设计基础知识:移动端UI设计与PC端有什麽异同点

UI设计基础知识

另外,PC端的控件/模式也与移动端有着诸多差异,下面列举部分典型的例子:

◆ 弹窗: 由於两者的用户操作习惯各不相同,导致它们的弹窗样式和按钮位置也有所差异。

譬如: 移动端的「确定性」按钮通常位於弹窗右侧;PC端则视系统而定,MacOS的「确定性」按钮一般位於右侧,Windows则位於左侧。

◆ 浮层: 移动端屏幕尺寸有限,一般很少使用浮层控件;但浮层控件则经常在PC端UI设计中出现。

* 相对弹窗而言,浮层打扰性小,操作效率高,能承载更丰富信息,因此很多设计师都很喜欢使用浮层。

◆ 面包屑导航: 移动端UI设计较少使用面包屑导航,一来移动端屏幕较小,面包屑导航会占据界面部分空间,甚至分散用户的视线;二来,大多设备或浏览器都有返回键,没有必要多此一举。

但PC端网站页面数较多,使用面包屑导航能告诉用户目前所在位置及返回路径,同时也有利於搜索引擎蜘蛛的抓取,有利於网站SEO优化。

除此之外,标签栏、单选、开关、下拉、tooltip、更多菜单等控件在PC端和移动端UI设计中都有所不同。另外,还有很多交互模式也在它们当中存在不少差异,不过这些差异只需跟随系统即可,没有什麽特别需要注意的。

PC端和移动端原本是相对割裂的平台,因此无论在语言设计,还是用户习惯都存在较大的差异。但近年跨平台整体设计逐渐趋於一致,一方面是因为跨平台语言逐步完善,加快跨平台技术的发展;另一方面移动端发展逐步增强,功能上与PC端越来越一致。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/42005.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 如何设计折叠屏?超详细的折叠屏设计指南。

    最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏(HUAWEI Mate Xs 上市时间2020年…

    2023年3月1日 SEO操作
    06
  • 网页设计或平面设计的技巧:几种强调主角的配色方式

    在网页设计的配色过程中,我们很容易会忽视通过色彩来强调主角。主角的刻画会对版块的优劣起到决定性的作用,所以选择基本色後,一定要通过色彩来强调主角,这样才能制作良好的版面效果。下面,我将通过一些范例和…

    2022年6月25日 建站资讯
    0265
  • 微交互精彩的两处

    第一,用动效给予回馈 合理地在页面设计当中正确地将动效与微交互结合设计,它能够极大的提升用户体验。何谓合理的使用?很明显,并非所有的动效都能呈现出良好的效果,只有同时具备良好的功能性,还能够令用户感觉…

    2022年6月25日
    0125
  • 企业电商出海时代,独立站设计的5个关键点和4个避坑点 。

    随着国内市场饱和,越来越多的公司转向海外寻找新的增长机会,其中出海电商成为了最大的市场之一。 随着国内市场饱和,越来越多的公司转向海外寻找新的增长机会,其中出海电商成为了最大的市场之一。21年底艾媒咨询…

    2023年3月2日 SEO操作
    01
  • 4 个方面层层递进,分析如何设计 B 端产品的弹窗。

    在 2021 年终总结时发现这些年读了很多的文章,虽说也会通过各种工具记录整理,但还是会觉得零散。最好的输入是输出,今年给自己定的目标是写 10 篇文章。一来是把零散的知识整理归纳,串联知识结构;二来是通过课…

    2023年3月2日 SEO操作
    012
  • 浅谈页面宽度百分比适配的方案

    这种方案在网页设计过程中使用了很长的时间,即使是如今,微信中京东购物的入口,仍然还是这种方式。主要表现在,在比基准的设备宽上,页面元素的横向宽度需要按照百分比的形式,去自适应。高度无需产生变化。所以…

    2022年6月25日
    0164
  • 影响用户搜索体验的三个要素

      第一,搜索过程是否完全展示 对於使用者体验来说,理想的情况是使用者点击搜索按钮之後,搜索结果会立刻显现出来。但是在大多数情况里,它通常是需要这麽一个过程:通过进度条和动效来让使用者明白他们大概…

    2022年6月25日
    0164
  • 如何让网站可及性有效的提高

    1、 考虑到特殊的用户,如年纪大小,色盲,输入难易程度。具体的做法如可以在HTML5当中使用语义标签,简洁而明显的提示,这样能够帮助特殊用户更加轻易快捷完成页面操作。2、 尽可能的支持多种输入方式以及一些特别…

    2022年6月15日
    0166

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息