TEL:400-8793-956
当前位置:网站讲堂

将现有网站转换为响应式设计的首要因素

提问者: 近期获赞: 浏览人数: 发布时间:2022-01-04 08:30:26

 随着移动友好性现在成为网站在自然搜索中排名的因素,许多企业主正在考虑完全转换为响应式设计,即使他们不希望以其他方式改变其网站的外观和感觉。

 
根据特定网站的具体情况,网站转换过程的复杂性会有所不同,但任何计划将其静态设计转换为移动友好的设计的人都需要在整个规划和实施过程中牢记以下因素:
 
布局
转向响应式设计带来的最大变化是需要针对不同的屏幕尺寸调整网站的布局。通常,非常适合大型桌面的显示器在手机或平板电脑上变得太小和局促。
 
在设计“断点”或根据屏幕大小更改设计的分辨率时,有两种思想流派。
 
一种思想流派围绕在特定屏幕尺寸创建断点以针对特定设备。如果您知道绝大多数网站访问者通过特定设备访问您的网站,这可能会很有效。
 
从长远来看,此选项可能会导致更多的重新设计和迭代,因为屏幕尺寸不断发展,并且您的网站访问者中更受欢迎的设备可能会随着时间的推移而发生变化。
 
另一种思想流派采用“向上”设计的想法——即从最小的屏幕分辨率开始,并在屏幕对于设计来说太大的每个分辨率时创建断点。以这种方式设计在使您的网站可访问方面提供了更大的灵活性。
 
以这种方式设计的挑战在于,一些常见设备的布局可能不太理想,这取决于它们在到达断点之前落在频谱上的位置。
 
决定使用哪种类型的设计布局在很大程度上取决于公司数据——如果网站只被一种或两种类型的设备访问,那么围绕这些设备设计断点可能是有意义的。但是,如果网站被多种类型的设备访问,随着尺寸的增加,围绕文本和图像的比例进行设计是最大化网站效用的更好选择。
 
触摸/点击目标
虽然获得正确的初始布局非常重要,但在转换为响应式设计时,这并不是唯一需要调整的区域。
 
任何通常通过鼠标单击定位的区域(按钮、菜单、表单等)都必须进行修改,以确保它们足够大以便有人可以触摸而不会出现任何重叠或错误。对于具有嵌套菜单的网站,这可能会带来特殊挑战,可能需要削减子项或完全在移动设备上使用不同类型的菜单结构。
 
汉堡菜单通常是移动设计师的流行选择,因为它创建了一个单一的接触点,然后可以用来显示完整的选项菜单。这消除了菜单重叠的问题,并减少了修剪菜单选项的需要——尽管如果有多个嵌套菜单需要处理,这可能仍然是一个问题。
 
除了适当大小的目标和简化的菜单之外,另一个要考虑的选项是视觉反馈。例如,在点击菜单项时更改它的颜色可以帮助用户确认他们是否成功导航到正确的页面,并减少整体混乱。
 
技术
如果您当前的网站建立在流行的 CMS 之上,例如 Umbraco、WordPress 或 Drupal,则移动友好设计模板的实施很可能相对简单。甚至可以更改当前模板以使其更适合移动设备。
 
对于使用旧技术(尤其是 Flash)构建的网站,在更灵活的平台上重新创建设计可能会更容易。对于依赖数据库来实现后端功能的网站,技术的任何变化都需要与维持当前用户体验所需的必要调整或更新进行权衡。
 
功能
某些功能在设备之间保持一致——比如提交表单、购买、执行搜索等——而其他类型的功能是特定于移动平台的。
 
这些特殊的移动功能(例如点击通话)需要在设计中留出空间和规划布局。在设计用于产生潜在客户或销售的功能的情况下,通过实施浮动栏或在移动浏览期间保留在屏幕顶部的一些其他号召性用语,使这些功能始终可见可能是有益的经验。
 
结论
响应式设计不仅仅是调整屏幕上的像素。拥有旧式静态网站的企业主需要仔细考虑网站访问者的完整移动体验,然后再花时间将网站转换为更适合移动设备。
 
通过了解移动网页设计的各种元素如何结合在一起以提供积极和引人入胜的用户体验,企业主可以就如何重新设计他们的网站做出明智的选择——无论是对现有设计的调整还是创建全新的东西。
上一篇: 使用这 5 个技巧降低跳出率
下一篇: 所有企业家都应该在网页设计组合中寻找的 5 件事