响应式设计中的桌面显示器体验

当我们在讨论响应式设计的时候,大多数设计师和开发者想到的是智能手机、平板以及笔记本电脑。但是有的时候,你可能会遇上这样的客户,他的网站流量大部分都来自于桌面电脑 […]

2016年1月19日

当我们在讨论响应式设计的时候,大多数设计师和开发者想到的是智能手机、平板以及笔记本电脑。但是有的时候,你可能会遇上这样的客户,他的网站流量大部分都来自于桌面电脑。

本文中我们来看一下桌面优先的响应式设计的一些问题。

首先来看看这些问题。

1,大型的桌面电脑 不是 电视。

有些人认为大型桌面电脑和电视以及游戏机(xbox、ps4等)的界面一样,但是这些东西并不完全相同。这之间有极大的差别。

  • 使用的情景不同。电视是“后仰”的体验(你可以斜躺在沙发上,手里没准还有爆米花),但是大型桌面电脑则是“前俯”的体验。界面的模式是不同的,只要想想智能电视中常见的滚动的方向就明白了。
  • 电视的观看距离大约是在2-5m,但是桌面电脑却只有50-80cm左右。字体大小、段落宽度、图片的尺寸,都会相应不同。
  • 大多数情况下,电视的输入都是遥控器。

2,理解用户和他们的设备。

分析我的访客的数据,可以知道他们的设备大都是1920像素,其次是1680像素的。也许他们用的设备都是iMac或者其他的大型的显示器。

当我们为这些设备设计的时候,需要明白,我们并不知道用户浏览器的真实尺寸,因为很多用户并没有将他们的浏览器全屏。所以有的时候虽然他的设备是大型桌面显示器,但是实际阅读的尺寸却只是个笔记本电脑的尺寸。

作为设计师,我们应该考虑到各种情况。

3,桌面显示器到底有多大?

一般来说,这些显示器比常见的笔记本电脑的屏幕分辨率更大一些。比如20多英寸的iMac或更大的设备。

desktopchart

大型桌面电脑分辨率一般超过1600像素。

保证桌面端的体验

响应式设计一般有这两种形式:

  • 固定式布局。
  • 流体布局。

See the Pen Responsive Wrapper Matrix by Johannes Holl (@johholl) on CodePen.

你可以选择一种布局形式,然后拖动下面的箭头查看页面变换的形式。

如果用户想要更大的桌面体验的话,可以尝试流体布局的形式,可以得到更大的空间,而不是在网页两边留出空白。

左面导航的回归

桌面显示器往往在横向上有富余的空间,如果将其用于导航的话,可以给竖直的方向上留出更多的空间出来。因此我们可以将响应式布局设置为这样:

手机等设备上,菜单固定在页面顶部。而在桌面端则位于左侧。

手机等设备上,菜单固定在页面顶部。而在桌面端则位于左侧。

desktop-02

桌面端内容的部分将和笔记本电脑的宽度差不了多少。

左面导航的形式的优势是响应性很好。

网页的宽度不能无限变大。段落的宽度越长,阅读起来会越困难。太多的内容会让网页显得拥挤,但是太多的空白页也会显得比较稀疏。

打破布局

更大的屏幕带来更大的空间,能够赋予更多的功能、更多的内容和更丰富的细节。除了用这种方法利用多出来的空间,我们还可以直接将布局放大。这可以为用户在不同设备间切换中提升更好的体验,阅读性也更好。

 

ixd

山工艺交互设计工作室。本专业培养学生具备敏锐的洞察能力,能够发掘用户及市场的需求;严谨的调查分析能力,能够通过社会调查方法分析数字产品的用户体验及市场表现状况;优秀的设计能力,能够把握当前界面、交互设计的潮流,掌握交互设计的艺术及技术能力;良好的沟通协作能力,能够和市场、开发人员流畅、协同合作;一定的文献检索、资料查询能力,掌握初步的科学研究方法。学生不仅学习具体的交互设计方法,又能在实践练习中将理性思维和艺术设计融合为一体,成为综合性、高素质的交互设计专业人才。 作品、文章投稿以及设计事务咨询请联系 ixd@designdaily.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注