柏拉图说:乌托邦是个理想国

在稀客地图中有大量的视觉设计工作,其中一项比较重要的工作就是地图样式的配色工作,地图样式的配色和视觉层级的调整是比较复杂且精密的一项工程,每一项图层出现的层级、出现的顺序、以及各自的颜色对用户带来的感受差别都是很大的,但是因为有比较完整的设计文档可供查阅是比较大的帮助。

地图设计是典型的数据驱动设计的一种形式,地图属性就像是我们常用的设计工具Photoshop中的图层一样,从最低的陆地、海洋一层一层到草地、雪地、再到上面的建筑和POI(兴趣点),我们要设定每一种属性出现的层级和他的颜色等信息,数据的形式主要有三种,点(node)线(way)面(area).

三种属性都可以赋予一定的属性,这里我们主要设计的是poi(兴趣点)的属性,兴趣点的数据类型是点,展示方式我们可以设定为symbol,只有它可以在一个点上添加marki(图标),在稀客地图中主要将poi的类型分成了主要的 生活 特殊 这几个类型。每种类型用不同的颜色表示赋予颜色识别性。如下图…

颜色选取


颜色的选取主要是通过(HSB)色相、彩度和明度的调节来进行选择,色相的选择首先是基于我们所有大的类型一共有8种,所以在0~360的色相范围内均匀分布就可以,这样能保证在地图上冷暖的搭配比较均匀。

其次在彩度上有一个范围设定,色彩过于饱和会对视觉造成疲劳,每种类型色彩的彩度根据实际不同的视觉效果设定在40~60之间,青色和绿色的色彩饱和度触发神经兴奋的临界值比较高,所以他们的色彩饱和度比其他颜色比较低,所以尽量保证全局保证既不会出现色彩暗淡或者过于饱和的情况。

在明度上也有一些考虑的原因是要根据地图底色和poi色彩的对比来进行设定,为了突出地图上的poi的重要性,一般底图底层的色彩彩度不会很高,明度也是为了使文字和poi的显示不会太亮。Sketch-Color-Contrast-Analyser在这里安利大家一个sketch插件,这个插件是为了满足WCAG(web内容无障碍指南),在这份指南中,有标准的分级,比如字幕属于AA级,它对应的背景和文字的对比度数值需要在4.5:1或者3.0:1以上。

这份指南的目的是为了更有好的设计,为了一些特殊人群的照顾,稀客地图也秉承着design for all的思想进行设计,因为在室外使用的频次也比较高,所以不得不考虑这些问题。

最后在图标和文字的明度上稍有区别,图标的主要目的是为了用户首先认知某个点的类型,但是文字的主要目标是让用户便于快速阅读,所以文字在明度上区间都会比图标要小一些,也就是暗一些,为了阅读时的舒适度。

以上就是在稀客地图在poi marki和 poi name上的设计思考。

最后附上网上一篇网上的文章 web页面文字的色彩与可读性研究

You’ve successfully subscribed to 乌托邦是个理想国
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.