网络营销培训 网络营销外包 营销型网站建设 网络信 息发布考核统计系统

首页>新闻资讯>响应式设计时代,我们该如何设计网站

响应式设计时代,我们该如何设计网站

商悦传媒 2015/8/13 10:23:41
分享到:
简介: 不久以前,我们进行的Web设计均 是针对默认的屏幕大小和输入类型。但随着 各种屏幕尺寸设备的兴起,以及交 互方式的多样性,这些默 认值已不再适用。现在我 们进行网站设计所用到 的所有默认值均需要更新。 Web近年来所发生的变化 人们一直在

   不久以前,我们进行的Web设计均是针 对默认的屏幕大小和输入类型。但随着 各种屏幕尺寸设备的兴起,以及交 互方式的多样性,这些默 认值已不再适用。现在我们进行网站设计所用到 的所有默认值均需要更新。

Web近年来所发生的变化

   人们一直在谈论Web发生了改变,让我们首先看看Web究竟发生了哪些变化。

屏幕尺寸

   90年代,Web页为640像素宽,21世纪初,其宽增长到800像素。几年以前,我们将它调整为1024像素。但就在5年前,“奇怪的事”突然发生了。小屏幕设备进入市场。一时间,我们对Web设定的 宽就不再适合了。不久,平板电脑进入市场。现在屏 幕视窗的高超过了宽。

   现在我 们无法了解用户所使用窗体的大小。我们只 能假设其宽是一个令用户舒服的随机数。这些数字是任意的,总会有 一些用户会看到不完整的Web页面。在这里,我们可 以先忽略这些用户。

“每个人都有一个鼠标”

   我们总 是默认每个用户都有一个鼠标。虽然我们知道,这并不总是事实。大部分 设计师会忽略为不使用鼠标的用户设计交互方式。不管什么原因,那些不 得不使用键盘的用户往往很难与我们的网站进行交互。

   但由于 大部分用户确实使用鼠标,当时很 多设计者认为设计只要满足大部分人就可以了,所以我 们设计出的网站还是有很多人是无法使用的。事实证明,这个数据一直在增加。很多依 靠鼠标进行的交互,在触摸 设备上是完全不起作用的。因为用 户喜欢这些设备,甚至管 理者和设计师都在用它们,所以它 们是很难被忽略掉。

“每个人 都有宽带互联网”

   我们另 一个默认情况就是每个人都有速度超快的互联网,至少和我们的一样快。如果他们现在没有它,不久也会有的。这似乎又是实事。网速确实越来越快。但是,今天越 来越多的人在使用差劲的、不可靠的3G网络。如果你 曾在火车上使用3G网络,你就会明白我所说的。如果你 曾在酒店使用其提供的免费Wi-Fi,你就会 明白我们假设互联网越来越快是不成立的。这是我 们思维中的一大变化,我们确 实应该为这些用户考虑。这将对 我们的设计外观产生较大影响。

   “大家的 电脑一年比一年快”

   电脑越来越快,过去是这样的。如果在 买电脑之前再等半年,同样的 价格你就可以买一台快两倍的电脑。这主要 针对新式台式机,但对于移动设备,其有比 处理器速度更重要的事。例如,对于手机,最重要 的是电池待机时间:你不想 每次打完电话后都必须充电吧。

   还有另一个趋势:现在的 制造商开始销售价格更低廉的设备,而非速度更快的设备。相比处理器速度,很多用 户更关注价格和电池待机时间。你的老 式电脑怎么样了?你可能卖了,也可能扔了。但用户 仍保留并使用着。并不是 每个人都拥有与我们设计师同样的硬件设备。

   “所有的 显示器均校准过”

   我们很 清楚这一条是不对的。只有那 些可视化专业人士的显示器才进行过校准。其他人 的显示器大部分都无法正确显示色彩,很多显 示器还是十分差劲的。我所测 试过的大部分移动手机有着相当棒的显示屏。可当在阳光下使用时,如果你幸运,或许还 可以看得见内容,但却无 法看到低对比度设计下的微妙渐变。

   人们总 会使用那些低劣的显示器,而且访 问你网站的人往往视力不好。越来越 多的人正在看不合格的调色板。与其购 买一款专业的艺术类显示器,不如购 买一款廉价的显示器和几台低端设备来测试你的作品,这是更好的投资。

   Web在最近5年里发生了变化,创建网 站的老方式已不再适用。我们需要新的方法论。

   过去几年里,我们一 直在积极地研究新方法,以解决Web在不同 尺寸屏幕上的显示问题。除了响应式设计,在日益 增长的设备上存在越来越多的挑战。我们必 须寻找新的交互模式:我们需 要可以工作于任何设备上的界面。设计过程中,一些新 的约定俗成正在产生,即新的默认。下文将 列出我所收集到的新的默认情况。

   新的默认:激活方式

   本想用“触控”一词,但考虑 到大家对该词的理解不同,所以改为了“激活”。对于所有设备,无论他 们需要怎样的输入方式,都需要 用户以某种方法来激活某件事。

   对于鼠标,就是点击;对于触控设备,就是滑动;对于键盘,就是敲击。还有声音、在空中 挥动手臂等激活方法。很多设 备往往提供多种交互方式。对于各种设备,其共同 点就是必须通过激活动作来完成某件事。

   最近,我们开 始思考用户输入的其他方法。我们曾 经假设人们都使用鼠标。当鼠标 移至上面时显示内容,移开后则隐藏内容。在触控 设备进入市场之前,该方法 一直为大部分人所采用。当内容 只有通过鼠标操作才能显示的话,那对于 没有鼠标的触控设备该怎么办呢?不同设 备要有不同的解决方案。下面看 看这个下拉菜单。

   当鼠标 停在主菜单项上,子菜单便出现。此外,你还可 以点击它打开该链接。现在,你在触 摸设备上敲击该菜单项,会发生什么?子菜单出现了吗?链接激活了吗?两者都发生了?还是发 生了其他事情呢?在iOS上,其他事情发生了。你第一 次敲击该链接时,子菜单出现了,即引发 了鼠标停在主菜单项上的事件。但你需 要再敲击一下这个链接,才能打开它。

   我们可 以针对不同的输入设备定义不同的交互方式。但我认 为更好的办法是确保默认的交互方式适用于所有用户。如果你确实要这么做,你可以 针对特定的用户来增强这种默认体验。

   例如,你确定 有人正在使用鼠标,那你要 保证靠鼠标进行的交互方式可用;如果你 确定某人的手指较粗,那你要 把小按钮做得再大些。只要大家对此无疑问,只要这 种改善有利于交互,就可以这样做,但默认 的交互方式除外。在这些假设中,有一些,比如鼠标的使用,是很难去除的——尤其在 可以提供多种交互方式的设备上,如可安装鼠标、带有触摸键盘、相机、麦克风、键盘和 触摸屏的笔记本。对此要认真思考一下。你确实 需要针对鼠标进行优化吗?

   新的默认:小屏幕

   正如把 一辆小汽车进行压缩,虽说更美观了,但却没有以前实用了。在网站上也同样,桌面上 的网站进行压缩后用到小屏幕设备上,并不一 定能带来同样的用户体验。

   构建适 用于所有屏幕上的响应式网站,首先针 对小屏幕进行设计是最容易的。它会迫 使你专注于真正重要的事情上:不适于小屏幕的,很可能就是不重要。它会迫 使你更好地思考布局,思考页 面中内容的展现顺序。

   上文提 到的交互设计方法同样适用于图形设计——首先设计激活事件,之后再改善它。我们首 先设计每个人都能看见的东西,即内容。无论屏幕大小,无论浏览器功能多少,其均能显示字符。这是我 们唯一确定的事情,所以从 文本开始设计是原则(大部分Kindles不支持色彩,老版本 的浏览器无法支持新版CSS中的很多特性,布局在 小屏幕设备上处于次要位置。)

   我们可 以从设计不同大小字体间的布局着手。无论每 个人有怎样的设备,他们都 可以看到该布局。该布局设计好后,你就可 以针对更大屏幕设计布局。你可以 把它看成针对使用更大屏幕用户的一次改善。之后,当不同 的布局完成之后,你就可 以为该网站增加其他“修饰” 了,如颜色、渐变、边框等。

   不能同 时考虑其他方面。我也正 尝试寻找所有不同设备(具有不同的屏幕大小,不同的特性)之间的共同点。首先针 对这些共同点进行设计是合理的。而奇观的是,该一点往往被忽视:Web专业人 员倾向于在高配置的设备(运行着 最新版本的浏览器)上审视他们的作品。他们仅 看到了改善部分,却忽略 了提供基本体验的这些共同点。

 新的默认:内容

   直到最近,我们都 是这样设计网站的:在顶部放上带有Logo的Banner图和导航,将子导航放在左边,右边放一些小部件,页脚放在底部。当所有这些完成后,我们再 把内容塞在中部的小小空间中。这就好 像我们对我们的内容很不自信,尝试提 供一些用户可能会喜欢的其他东西。

   我们应 该专注于中间的部分,保证它正常工作,看起来美观、具有可读性。确保所有人理解它,发现它有用。

   一旦你 完成了内容部分,你可以自问一下,该内容确实需要一个Banner?Logo?子导航?它必须 要有一个导航吗?它确实 需要所有的这些小部件吗?显然最 后一个问题的答案是“不”。我不理 解这些小部件有什么用。在我看来,没有任 何小部件比空白区域更美观。

   从内容开始着手,可以帮 助我们找出很多有趣的解决方案。例如,Logo确实需 要放在每页的顶部吗?在很多网页中,放在页 脚部分效果可能更好,如在数 字类型的导航中,或在注册页面中。子导航 中的很多链接放在主要内容区域的相关部分效果可能更好。

   当观看页面布局时,主要导 航比主要内容更重要吗?大部分情况下,并不是。我通常 认为导航属于页脚内容。在页面顶部放一个“跳转”链接可 以把访问者引导至导航处,也可获得导航,并将其显示在顶部。

   在响应式Web设计时代,我们需要很多新的、聪明的解决方案。

  过程改进

   看完上面内容后,你可能 明白这只是过程改进。从文本开始,对文本进行设计,根据不 同的屏幕大小和设备对它进行优化,之后再 针对特殊属性进一步优化,如鼠标的使用,针对胖手指的设计。很多Web开发人 员基于该原则构建网站。他们把漂亮的Photoshop制图转 化成上述不同的层。

   如果开 发者有很好的设计感且关注细节,这可以 产生很好的效果。但如果他们并非如此(大部分情况是这样的),便很容 易设计出可用性不好、简陋的产品。我并不 是说不让设计者使用Photoshop。如果那是你的工具,继续使用它。但要记住,你正在设计Web的不同层,不是Photoshop中的层。一个Web要比单 张漂亮图片包含更多内容。人们会 以各种方式看我们的设计,我们在 为所有这些人进行设计。请记住,我们不 仅仅为使用笔记本的CEO设计,还为在 火车上或使用免费Wi-Fi的人设计。

 工具

   上面也提到了,在设计Web过程中,Photoshop一直被滥用。好设计 工具的缺失是造成过程改进难以进行的原因之一。我们所 使用的工具大部分是帮助我们为网站增加“修饰”,而不是设计其核心。很幸运,针对特 定功能的小型设计工具越来越多。如Gridset帮助我 们针对不同的屏幕尺寸设计网格。好的设 计工具可以帮助我们定义排版。把这些 设计工具融入到我们的设计过程中,我们可 以设计出更好的作品。

   结论

   现在的 网站设计与以前已大不同。固定、单一的 交互方式已不再适用。我们的 设计过程需要新的起点。除了上文提到的,还有很多。就拿我 们常用的表单来说吧,它足够 用一系列文章来讲述。希望大 家在设计过程中,可以创 新出更多好方法。

Copyright© 2000-2013 上海商 悦信息科技发展有限公司 All Rights Reserved

[上海公司]电话:(021)-69792711 69792755 18930982755 传真:(021)-69792755 [温州公司] 电话:0577-67373911 67373922 传真:0577-67373933

沪B2-20030136 沪ICP备06026365号 BaiduXMLSiteMap | GoogleXMLSiteMap | HtmlSiteMap

友情链接:    86彩票   923棋牌   南粤风采36选7走势图   华森彩票   大乐透开奖走势图500期