首页 关于我们 项目案例 网站建设 网站优化 微信公众号 技术课堂 联系方式
QQ联系点击这里给我发消息
电话联系
手机联系
QQ联系点击这里给我发消息
电话联系
手机联系
【当前位置】

青岛网站建设:10移动Web设计策略的关键考虑因素

发布时间:2019-06-20 14:12
发布者:康康
浏览次数:

1.确定您对移动网站的需求
 

通常,移动网站设计项目通过以下某种情况发生:
 
这是一个全新的网站,需要桌面和移动策略。
 
这是对现有网站的重新设计,其中包括一个新的移动网站。
 
它是现有桌面网站的移动网站的补充,不会改变。
 
这些情况中的每一种都会带来不同的要求,这将有助于您在考虑下面讨论的项目时确定最佳方法。
 

2.考虑业务目标
 

在大多数情况下,作为设计人员/开发人员,您被客户聘用为他们的业务设计移动网站。与网站有关的业务目标是什么,特别是移动网站?与任何设计一样,您需要确定这些目标的优先级,然后在设计中传达该层次结构。在将您的设计转换为移动设备时,您需要更进一步,并专注于业务的几个最优先目标。
 
以现代的网站为例。如果你在桌面浏览器中加载hyundai.com,你会看到的第一件事是大而大胆的图像,这些图像唤起了与他们车辆的情感联系。此外,您还可以看到强大的导航,标注拥有现代,网站搜索和社交媒体链接的各种好处。
 
 现代桌面版网站
 
 
现在在你的移动浏览器中加载hyundai.com,你就有了一个精简的网站版本。然而,最突出的特征仍然是相同的:他们最新车型的相对较大的图像,其次是其他几个(移动优化的)车辆图像。您在移动版本中看不到复杂的导航和其他标注。他们选择将移动网站的重点放在他们的主要业务目标上,即通过大胆的图像唤起他们与汽车的情感联系。
 
 现代移动网站
 
 

3.在前进之前研究过去的数据
 

如果此项目是重新设计(目前大多数网页设计项目),或者在现有网站上添加移动网站,则希望该网站一直在使用Google Analytics(或其他指标跟踪软件)跟踪流量。在深入研究设计和开发之前研究数据是明智的。
 
分析用户访问网站的设备和浏览器等内容。虽然您希望确保网站在构建时考虑到设备支持,但是当您从设计,开发,测试和启动时,您可以将这些浏览器作为高优先级。
 

4.练习响应式网页设计
 

由于每年都会发布许多新的移动设备,因此在几个Web浏览器中检查您的网站并启动的日子已经结束。您需要针对大量桌面和移动浏览器优化您的网站,每个浏览器都会带来不同的屏幕分辨率,支持的技术和用户群。根据知名文章Responsive Web Design的建议,您可以同时制作桌面和移动网站体验。引用那篇文章:
 
“我们可以将它们视为具有相同体验的方面,而不是为每个不断增加的网络设备定制不连贯的设计。”
 
利用最新,最具前瞻性的网络技术,如HTML5,CSS3和网络字体,您可以设计您的网站,以扩展和适应它所查看的任何设备。这就是我们所说的响应式网页设计。
 

5.简单是金,但......
 

作为将桌面网站设计转换为移动格式时的一般经验法则,您希望尽可能简化操作。有几个原因。保持文件大小和加载时间始终是移动网站的一个好主意。无线连接 - 虽然比过去几年更快 - 仍然相对较慢,因此移动网站加载速度越快越好。
 
移动网络上的可用性考虑也要求简化设计,布局和导航方法。您可以随意使用更少的屏幕空间,您需要明智地选择元素的位置。简而言之:少即是多。
 
但是,我们仍然可以创建针对移动设备进行优化的漂亮设计。CSS3为我们提供了一套惊人的工具,可用于创建渐变,阴影和圆角等所有内容,而无需使用笨重的图像。这并不是说你根本不能使用图像。
 
查看这些在简单和美观之间取得平衡的移动网站示例。
 
 简单
 

 

6.单列布局通常效果最佳
 

在考虑布局时,单列结构往往效果最好。这不仅有助于管理较小屏幕上的有限空间,还可以帮助您轻松缩放不同的设备分辨率,并在纵向和横向模式之间进行翻转。
 
使用响应式Web设计技术,您可以采用多列桌面站点布局并使其适应单列布局。新的Basecamp移动网站做得很好。
 
 Basecamp图像
 
 

7.垂直层次结构:用可折叠术语思考
 

您的网站是否有大量需要在移动网站上展示的信息?以简单易懂的方式组织事物的好方法是设置可折叠导航。将单列结构更进一步,您可以在折叠模块中堆叠大块内容,允许用户点击打开他们感兴趣的内容并隐藏其余部分。
 
查看美国职业棒球大联盟的移动网站。在页面顶部是一个标有“团队”的按钮。点击此按钮可扩展页面,在单列页面中垂直列出30个团队。
 
 MLB Mobile
 
 

8.从“可点击”转到“可点击”
 

在移动网络上,通过手指点击而不是鼠标点击进行交互。这在可用性方面创造了非常不同的动态。
 
从桌面转换到移动网站设计时,您必须重新访问“可点击”元素 - 链接,按钮,菜单等 - 并使它们“可点击”。而桌面网络非常适合具有小而精确活动的链接(可点击的)区域,移动网络需要更大,更粗的按钮,可以用拇指轻松按下。
 
此外,在移动网络上没有悬停状态。大多数情况下,当在悬停时设置某些内容(如下拉导航菜单)时,它实际上会在移动设备上查看时首次点击。移动网站上的第二次点击会执行第一次点击在桌面网站上执行的操作。这可能会导致移动用户混淆,这意味着您需要重新处理移动设备的悬停状态。
 

9.提供互动反馈
 

说到交互,您需要确保为移动网站前端发生的任何操作提供明显的反馈。
 
例如,当用户点击一个链接或按钮时,最好让该按钮在视觉上改变状态,以指示它已被点击并且已启动该动作。当点击时,iPhone上的白色链接变为全蓝色是很常见的。大多数用户都熟悉这种视觉反馈,您应该明智地利用它。
 
另一个好的做法是包括加载状态,这些操作可能需要更长的时间才能加载。使用动画加载图像来指示正在进行的操作。Basecamp Mobile通过在加载下一页时显示旋转加载gif来做得很好。
 
请记住,桌面浏览器内置了各种指示器以显示正在进行的操作。移动浏览器并没有那么明显,因此在移动网站设计中构建视觉反馈非常重要。
 

10.测试您的移动网站
 

与任何项目一样,您需要在尽可能多的设备上测试您的移动网站。如果没有拥有所有这些设备,找到准确测试每种设备的方法可能有些棘手。它将涉及为平台安装开发人员SDK(如iPhone SDK和Android SDK)以及使用基于Web的模拟器查看其他移动平台的组合。
 
本文提供了如何在最流行的平台上测试移动网站的详细分类。
 
就行了!
 
希望本文在您开始新的移动网站设计项目时提供了一些见解。在下面的评论中,请确保在设计移动网络时留下您认为有用的任何其他提示。

青岛网站建设公司:www.kzxseo.com 康之讯网站建设公司