当前位置:首页 >教程首页 > U I 设计 > AI+UX设计大师班 >UI中的地图标签设计总结

UI中的地图标签设计总结

发布时间:2020-10-29 15:01:50

除了常见的地图类App,还有其他很多产品会根据使用需求嵌入地图功能,通过在地图页中添加引导性的交互标签,让用户了解所处的位置或者导航路线。

如何保持地图页面与产品风格统一,同时又方便用户使用呢?通过系统化的方法可以快速实现地图组件的选择和归类。

UI中的地图标签设计总结

地图组件的四种类型

1.图标

地图上只标记图标,这种呈现方式能最大程度地显示地图上的信息,减少内容遮挡,也是在设计中首先要考虑的类型。

UI中的地图标签设计总结

2.文本

如果地图上标记的内容没有合适的图标能展示出来,可以直接利用文本来描述。

UI中的地图标签设计总结

3.图标和文本

随着地图的放大缩小,气泡信息的详细程度也会发生变化。地图放大时将图标和文本相结合可以显示更多的信息,而缩小时只显示图标。

UI中的地图标签设计总结

4.图标、文本和注释

图标,文本和注释相结合的形式虽然能显示更多的信息但是需要谨慎使用,因为气泡的尺寸太大会遮挡地图的内容,反而影响使用。

UI中的地图标签设计总结

只有当气泡内容能显著提升用户体验时,才使用这种类型。

UI中的地图标签设计总结

地图组件的视觉样式

大多数场景中,地图组件的底部会有一个突出的箭头,用来标记确切的信息或地址。

考虑到后期开发的难度,箭头的位置应始终位于组件的中间。另外如果一个页面中有多个地图组件,可以将箭头调整到顶部,防止发生重叠。

UI中的地图标签设计总结

颜色

组件的颜色比较灵活,默认情况下是白色,但可以通过改变背景色来匹配品牌色。

颜色通常出现在图标后面用来强调信息,如果没有图标可以把整个气泡组件都填充上颜色。

UI中的地图标签设计总结

根据背景色的不同,文本和图标尽可能使用黑色或白色,减少对内容的干扰。

UI中的地图标签设计总结

状态

地图气泡尺寸的大小根据点击需求确定。白色轮廓加上胶囊形状让用户能够快速识别出可点击的对象,选定后气泡颜色会反转。

UI中的地图标签设计总结

内容缩放

组件基于地图缩放级别和缩放速度展示不一样的动画效果。

UI中的地图标签设计总结

组件可用性指南

如何判断设计出来的组件是否适合用户使用?组件需要怎样设计才能适用于不同的使用场景中,有没有统一的规范?

组件状态

面对不同场景中的组件,提供多种状态:重叠、可见、收缩、聚类、分离。

UI中的地图标签设计总结

密度

地图中至少要保持40%的内容是始终可见的,这样用户可以明确位置信息,防止产生误操作行为。

UI中的地图标签设计总结

利用聚类功能将相邻的气泡组件合并在一起,通过数字显示包含的内容,这种形式利于用户理解和操作。

易读性

易读性在地图中很重要,例如用户手持使用手机时组件中的字体为15pt,当用户驾驶导航时组件的字体会变为24pt。

UI中的地图标签设计总结

另外还要考虑语言的选择对组件的影响,最好避免在气泡组件中使用长串字符,以防止地图中的信息被遮挡。

UI中的地图标签设计总结

如果必须要显示长串字符,需要把气泡组件的尺寸水平拉长至地图尺寸的75%,然后换行且最多只能显示两行文本。

总结--点击即导航

在开始设计地图UI界面之前,有必要花费时间了解地图组件的样式、类型和可用性指南。

通过这些信息可以帮助设计师更快地确定方向,从而设计出清晰美观的地图界面。

(本文系转载,转载自微信公众平台@Clip设计夹 ,作者Clippp)

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答
  • 杭州室内设计师培训班有哪些

    杭州室内设计师培训班有哪些已成为许多设计爱好者进入创意领域的理想起点。在杭州这座设计之都,室内设计行业蓬勃发展,带动了培训需求......

  • 石家庄视频剪辑培训价格性价比分析

    在视觉内容主导传播的当下,掌握专业的视频剪辑技能,已成为众多求职者和职场人士提升竞争力的关键路径。面对日益增长的市场需求,石家......

  • 湛江影视后期培训零基础入门

    在数字媒体蓬勃发展的当下,影视后期制作是创意产业的核心驱动力。湛江,这座滨海城市,文化底蕴独特,区位优势明显,影视行业正快速崛......

  • 济南UI设计培训哪家机构靠谱

    济南UI设计培训正成为越来越多人的职业起点。在这个数字时代,界面设计需求激增,济南作为一座文化底蕴深厚的城市,为学习者提供了丰......

  • 柳州UI设计培训班避坑指南

    柳州UI设计培训避坑指南:开启你的创意职业之旅

  • 荆州平面设计培训班避坑指南

    荆州平面设计培训在当今数字化浪潮中扮演着关键角色。随着品牌营销和视觉传达需求的激增,专业设计师成为各行各业的热门人才。然而,选......

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定