UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

桌面vs移动端,用户体验设计应从哪里开始?

  • 发布:UED培训
  • 来源:设计教程
  • 时间:2017-11-17 15:35

桌面vs移动端,用户体验设计应从哪里开始?

大家是倾向于用电脑看视频还是常常用手机看视频呢?

女孩纸们是喜欢用笔记本看淘宝网站还是用手机登陆淘宝?

小说党看书的首选是电脑?平板电脑?Kindle?还是寸步不离的手机?

桌面vs移动端,用户体验设计应从哪里开始?

同一家网站,从电脑桌面到手机端,到底隐藏着怎样的奥妙?和小编一起来看响应式网站的桌面优先设计。

1

桌面优先设计的相关定义

在介绍桌面优先设计之前,先来科普一下响应式的定义。我们发现同一家网站在笔记本、平板电脑、手机上是有很大区别的,例如系统平台、屏幕尺寸、屏幕定向等都各有不同。响应式设计就是网站页面的设计与开发应根据用户行为以及设备环境进行相应的响应和调整。无论用户正在使用笔记本还是平板电脑,网站页面都应该能自动切换分辨率、图片尺寸及脚本功能等,以适应不同设备。

桌面优先设计便是一种高效率的响应式设计,我们先设计桌面版本的网站,然后为移动设备减少其元素和内容。它和移动优先设计可以理解成两个相反的原则,移动优先是首先设计较小的屏幕,然后为更大的屏幕添加更多功能和内容。

桌面vs移动端,用户体验设计应从哪里开始?

2

桌面优先设计的优势

既然桌面优先设计和移动优先设计都可以去响应用户的设备,那么桌面优先究竟有哪些优势呢?以下便是设计师们青睐桌面优先的三大优势:

1.你可以一次看到网页所有功能

2.可以让你设计出你首选设计的最大可能

3.对使用台式机和笔记本的用户,这是最好的策略

口说无凭,我们不妨来亲身体验一个桌面优先的设计案例。

桌面vs移动端,用户体验设计应从哪里开始?

以b站为例,桌面上首页就有所有分类,鼠标悬停时也会出现这一类别下的具体分类。而手机端由于空间不足并且它靠手指触摸无法实现鼠标的悬停,需要一步步在分区找,再导引到分类。再来比较一下个人中心,桌面官网右上角的视角可以是自己,也可以是新访客和粉丝的视角来浏览自己的个人中心。这些都是移动用户无法体验的功能。

这就是桌面优先的优势,桌面设计功能更为全面,设计师们可以设计出首选设计的最大可能,桌面用户能得到得到更高的UX,即用户体验。

3

优雅的退化

咦,怎么刚刚还在聊桌面优先设计,突然出现了“优雅的退化”?难道要讲生物学了?No!No!看完小编关于“优雅的退化”的介绍,桌面优先设计的重要意义也便一目了然。

桌面vs移动端,用户体验设计应从哪里开始?

从桌面版、平板电脑、到手机,一个完整的标准网站会缩小并逐渐删除内容和功能,视口变小,系统更简单。这便是“优雅的退化”,它是决定大型网站如何适应较小屏幕或功能更少的浏览器的过程。

从桌面到移动,优雅的退化意味着首先设计一个功能齐全的站点,然后剥离移动的浏览器元素。优雅的退化首先看到更高层次的技术,可以使用网站上所有内容来构建网站的所有顶级功能。然后如果其他浏览器无法支持它们,再恢复为后备方法。

优雅退化的一个常见例子是移除移动的下拉滑动菜单。智能手机用户无法悬停菜单链接。这时候,我们就创建切换开关或隐藏的汉堡包菜单。小编来科普一下汉堡包菜单,希望深夜阅读的大家不要责怪小编放毒。

桌面vs移动端,用户体验设计应从哪里开始?

不过我们是不是发现了呢,优雅的退化是构建Web功能,提供更多的现代浏览器的用户体验,但它也使用户在旧的浏览器下体验一个较低的水平。那这个浏览器的问题请往后看。

4

桌面优先设计需要解决的棘手问题

这个棘手问题,首先便是浏览器问题。大多数老版本的浏览器不支持现代桌面元素,如画布,音频/视频和动态输入。但近年来已有很大的变化。

现在所有移动浏览器基本上都支持与桌面浏览器相同的功能。现代浏览器还使大多数元素的方式相同。像Chrome和Safari等主流浏览器的占比都是很大的,而且它们都能保证桌面端和移动端的功能相同。

其次是触摸问题。告诉你个小秘密:桌面端和移动端最大的区别不在于HTML / CSS支持,而是基于触摸支持。因为移动屏幕要小得多,并且还需要用手指敲击。电脑鼠标比人的手指更精确,而且桌面屏幕更宽敞,更容易看。就像这里的food sense的页面:

桌面vs移动端,用户体验设计应从哪里开始?

看吧,这里pc端的版面很大,而且链接分类等都很齐全,导航和链接的排版也比较松散,很方便鼠标点击。然而平板电脑端和手机端就不是这样了,它们的屏幕太小,排版比较紧,有些链接和文本框等也不太方便手指点击了,触摸突然困难起来。

所以从桌面转到移动时,至关重要的是考虑不同浏览器的工作原理,支持的方式以及如何处理用户基于触摸的输入。

5

缩小桌面设计的规则

接下来介绍缩小桌面设计的三大规则:

1. 使可变化元素更大

可以随时检查所有浏览器的HTML5规范,以查看哪些浏览器支持哪些元素。

2.添加支持滑动动作的JavaScript库

可以使用JavaScript来检查浏览器的尺寸或操作系统,如iOS或Win Mobile。使用此信息,可以加载额外的样式表,并为触摸/滑动事件创建完全不同的体验(仅适用于移动用户)还可以查找免费资源,如TouchSwipe,为所有网站添加支持触摸和滑动手势。

3.增加主体文字大小,使链接更容易点击

我们不妨来看两个App界面,这是韩国音乐节目的投票App:M COUNTDOWN和Show Champion,根据艺人在各大音乐节目的打歌,由专辑销量等方面的分数来进行总排行。

桌面vs移动端,用户体验设计应从哪里开始?

现在我们对比一下这两个App的界面,左边MCD的主体文字较小,投票按钮就只是右侧小方框的这个按钮,这个按钮很小,不太方便粉丝点击,而右边冠军秀的主体文字较大较显眼,使用户看的更清晰,而且它的投票按钮是这一整条,无论是点击图片还是名字还是文字介绍都能进入链接,这个链接更容易点击,相比之下用户的体验自然更为满意。

6

桌面优先设计的适用情况及操作

最后,桌面优先设计在哪些情况下适用呢?小编来告诉你:如果移动体验可以非常简单,但桌面体验需要详细和动态,那么说起来就是桌面的工作量更小。

如果是喜欢从桌面工作并转到移动,那么就可以获得该流程的诀窍并可能成为一种默认值。当然,对一个钟爱移动优先的设计师而言,按照喜好选择同样是有效的。

对想要尝试桌面优先的入门者,在这里提供一些操作的建议:

1.确保有一个移动网站的计划,至少有一个模糊的想法,看看它的外观。起草一些线框,给自己一个起点。

2.还需要考虑所有屏幕尺寸不同的平板电脑,较小的上网本和笔记本电脑。桌面首先帮助建立一个在较大屏幕上工作的体验,先关注每个可能的功能。

3.减少细节来改善界面。

4.从桌面的角度构建的项目有助于定义限制。可以自由选择网站的宽度,要使用什么样的网格系统,以及所需要的功能。

最后再提供两个小例子供入门者参考。

桌面vs移动端,用户体验设计应从哪里开始?

强大的桌面方法的一个很好的例子是Mashable。他们的全尺寸网站跨越1440px宽,包含三列新闻与巨大的导航菜单。

桌面vs移动端,用户体验设计应从哪里开始?

还有YouTube,我们可以看到桌面的功能是非常齐全的,而移动端就很简洁,进行桌面设计的时候,通常是从桌面到移动逐步减少细节。

END

在这个响应式网站的时代,桌面优先设计是用户体验设计师非常重要的一种选择。看完小编的介绍,是不是觉得桌面设计非常的高端大气好处多多呢?快来实践吧,相信桌面优先的设计理念会给你带来意想不到的灵感火花。

感谢大家阅读“桌面vs移动端,用户体验设计应从哪里开始?”希望对大家有所帮助,更多精彩内容请关注UED培训官网

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

预约申请免费试听课

上一篇:深入了解用户体验-情感化设计
下一篇:李斌:用户体验是商业变革的核心

一篇设计师需要的筛选功能设计总结

网页设计应该如何布局

没选对颜色就设计,难怪土掉渣!

谷歌所说的“整体网页设计”到底是什么概念?

选择城市和中心
贵州省

广西省

海南省