联系电话136 8812 4668(业务咨询) / 158 8206 4880(服务投诉)
赛门仕博官网

1

2018年07月16日

pc网站与移动网站的三个关键性的网站设计差异

到目前为止,我们大多数人都知道在移动设备上浏览网站的体验与在pc电脑上浏览网站的体验非常不同。屏幕方向不同,在移动设备上我们使用拇指而不是鼠标或触控板,这让某些操作更加困难或繁琐。这就是为什么设计满足用户需求的移动手机网站非常重要的原因。以下是pc网站设计移动手机网站设计差异的三大关键点,需要在移动设备和pc设备上进行区分。


1.网站内容组织

移动网站设计最复杂的要素之一是如何组织网站内容的问题。移动网站用户的需求可能与pc网站用户的需求不同。或者他们的需求可能相同(或类似)但用户的浏览行为却会根据使用的设备而发生改变。在设计移动网站时,首要任务是组织网站内容以满足移动用户的需求。网站内容应垂直堆叠,以适应移动设备的窄宽度。桌面设备具有纵向方向,因此内容可以在屏幕上伸展,并且通常多个消息或图像可以在很宽的页面空间中更好的展示。移动网站通常以纵向方式使用(较小的屏幕意味着即使在横向模式下,水平空间也是有限的)。

某眼镜零售商pc网站

某眼镜零售商手机网站

当在移动网站设备上浏览时,例如下图某眼镜零售商网站将内容从水平对齐重新排列为垂直。考虑的另一件事是要优先考虑的内容。pc网站和移动网站用户的需求是否不同?如果是不同的,那么以优先考虑移动用户需求的方式来设计移动网站,而不是简单地从pc网站进行复制,pc网站最有可能是为pc网站用户而设计的。在移动网页设计的早期阶段,当我们的手机不那么复杂并且我们不太习惯使用移动端来执行更复杂的工作任务时,通常会删除网站的大部分内容让移动网站用户更快地找到最重要的内容。到了现在这种方法已不再被采纳。今天移动手机网站用户希望能够在手机或者平板等移动设备上访问与pc网站上相同的浏览体验。此外,移动设备已成为很多人的唯一或主要浏览设备,因此完全可操作的移动网站成为接触部分移动用户的唯一途径。

某骑行工作室连锁店pc网站设计

某骑行工作室连锁店手机网站设计

上图某骑行工作室连锁店网站允许用户在pc或移动网站设备上预订课程。网站内容布局在移动版本中垂直对齐。


2.网站表单填写

作为营销人员,花费了大量精力优化网络的表单以实现最大程度的用户转换。我们知道,在pc网站设计糟糕的表单形式可以对用户转化造成极大阻碍。当然,在移动网站上也是如此。表单需要专业设计,以便移动网站用户轻松填写表单。垂直对齐还是整个垂直对齐?都适用于表单设计。原理是相同的 - 移动网站用户水平来回滚动页面以完成表单填写是非常困难的。为了使移动网站的表单填写过程尽可能简单,表单文字和排版必须垂直对齐。

某网站pc端表单设计

某网站移动端表单设计

如上图某网站重新排列表单文字,以便在移动设备上轻松完成。预览文本通过为具有许多潜在响应的文字提供预测选项来帮助用户填写。提供预览允许用户快速浏览表单并减少填写错误的机会,这在移动网站小屏幕上更常见。

某航空公司手机网站单表页面设计

上图某航空网站为用户航班搜索的起点和终点提供预测文本。最小化文字,在移动网站设备上填写表单通常非常繁琐,所以希望通过减少字段数量来尽可能简化。要实现此目的,只需要让用户填写交易的主要信息。以提高用户转化为目的,尽可能减少用户操作流程与步骤。


3.导航菜单

网站导航样式绝对是pc和移动网站之间差异的关键区域。在pc网站上,通常会有包含许多类别和子类别的导航菜单。这种样式的设置非常适合pc用户,pc端显示屏幕足够大,可以阅读导航中的文本,并且可以轻松点击文本链接。当然,这在移动网站上是一不同的,因为屏幕很小而且拇指(相对)很大。移动网站导航的设计应考虑到这些因素。使用具有大文本或按钮的单级导航菜单样式,许多选项的导航菜单样式选择垂直对齐。

pc网站导航设计

移动手机网站设计导航样式

在移动网站上,导航菜单会折叠,然后随着用户缩小类别而展开。移动网站所有功能的列表绝不要全部展示,需要与pc版本不同,我们认为这些功能是最重要的三个功能。记住始终考虑移动网站用户的需求以及他们浏览和阅读信息的独特方式。