要是说移动端的网页设计的重中之重的话,导航便是这其中之中,如何设计移动端导航是人都非常的头痛,今天十七,借助这个机会和你们说说7种适合移动设备导航的最佳做法
1.保持移动导航简短有趣
在纵向模式下,许多手机屏幕只有720像素宽。
设计移动导航意味着设计小屏幕尺寸。由于可用的房地产有限,因此没有混乱的空间。切入要点,然后减少脂肪。
问自己,需要包含哪些链接来帮助用户完成优先级任务?桌面导航中的哪些元素与移动环境无关?
为了使您的用户免于决策瘫痪,我们建议您将移动导航限制为顶层的四到八项。您的移动导航菜单不是链接到站点中每个页面的地方。
一些移动导航需要多级导航以帮助用户体验。这在电子商务网站中更为常见。如果必须去那里,请使其尽可能简单。不要添加一个以上的下拉功能子级别。
如果您的导航必须包含更多项,则从菜单图标激活的垂直导航是最佳选择。
2.首先列出最重要的页面
您的网站用户没有太多时间或耐心。您如何帮助他们更快地到达正确的地方?
要设计您的移动网站导航,请首先考虑:
您最重要的页面是什么?
您的网站策略中列出了哪些顶级类别页面?
网站访问者使用智能手机最常采取的行动是什么?
您网站的哪些页面最有效地满足了移动用户的需求?
这些问题的答案不仅影响主菜单中的哪些项目,还影响您应在每个页面上放置的链接和号召性用语。
您需要使整个站点的主导航菜单保持一致。它应指向前四到八个着陆页(例如主类别页面)。
简短而甜蜜的移动导航对于SEO和您的用户是双赢的。它保留了到您最重要页面的链接资产流,同时还帮助用户四处走动。
用户到达页面后,上下文链接可以将其移动到有意义的地方。这些链接可以以舒适的方式添加到每个页面的正文内容中
3.将搜索视为导航的一部分
移动用户将搜索视为导航,您也应该这样做。
考虑使用Amazon.com。在移动设备上,亚马逊甚至不理会类别下拉列表(尽管有人希望它位于“部门”下)。移动视图顶部突出的是一个简单的“搜索”框。
即使拥有庞大的目录,Amazon也不希望用户浏览菜单来查找所需内容。在大多数情况下,客户只需输入产品名称即可直接购买。
4.使您的导航直观
您的客户努力工作;浏览您的网站不起作用。
为了使您的导航直观,菜单语言应始终以一种让用户知道会发生什么的方式编写。应该清楚的是,如果项目是下拉菜单,它将做什么,如果是链接,它将确切地指向何处。
如果您使用符号将信息传达给用户,请确保它们是清晰的常规符号。例如,如果您的菜单项下拉列表,请使用直观的符号(如加号(+)或箭头(>))让用户知道单击将显示更多选项。
另一个最佳实践示例是使用放大镜指示搜索功能。
如果使用的是切换菜单,请使用三行重叠的线(在下面的示例中突出显示的图标)来帮助用户查找和访问主导航。
5.考虑字体和对比度
您的网站用户无需缩放即可阅读移动网站上的任何文本,包括导航中的文本。
需要缩放的微小文本会带来不良的用户体验,您的网站用户,Google或Bing都不喜欢不良的用户体验。
您的移动网站上的所有文本都必须足够大,以便可以在各种设备上阅读而无需缩放。在构建适合移动设备使用的CSS(级联样式表)以控制各种设备上的文本外观时,您应该考虑到这一原则。
为了使您的导航文本易于阅读,请选择一种字体,该字体自然会增加足够的空间以区分字母,并且字体高到可以在菜单中清晰地阅读。
您的字体大小和样式还取决于品牌的样式指南以及适合您的独特人群的内容。例如,年轻的观众可能不会像年龄较大的人群那样为较小或压缩的字体而苦恼。您处理项目符号样式,大写字母,边距,标题等格式的方式也应反映出什么对您的受众有吸引力,并使他们阅读更舒适。
一旦决定,请设置CSS并创建书面样式指南以保持内容的一致性。
6.触控设计
平板电脑和智能手机用户依靠触摸屏将它们带到网站上。尖锐的鼠标箭头使用户可以在狭窄的空间中精确选择项目,而平均手指则需要较大的目标物才能按下。许多用户没有完全按目标对准触摸屏。
Google 建议使用适当设置的视口来构建至少48个触摸目标大小的移动页面(稍后会详细介绍)。触摸目标在水平和垂直方向上应相距约32个像素。
7. 针对多屏移动用户的设计
创建对移动设备友好的导航意味着创建对客户友好的导航,使您的角色立即朝正确的方向移动。
如果您构建了易于使用的直观导航,则您的网站用户将很快获得转换带来的快乐。构建令人沮丧或令人困惑的导航,它们将回到搜索结果,直接进入其他人的网站。
为了使您的入境访客保持微笑,请遵循以下最佳做法进行适合移动设备的导航:
✔尽可能简短而甜美
✔易于阅读
✔面向任务
✔优先列出最重要的内容
✔可访问并在所有页面上一致地放置
✔清晰,直接且可预期
✔如果需要滚动则垂直放置(切勿使用水平滚动!)
✔眼睛容易
✔手指友好
✔快速