Human Interface Guidelines —— Image Views & Maps & Pages

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Image Views

Human Interface Guidelines链接:Image Views

Image Views

Image view在透明或不透明的背景上显示单个图像或图像的动画序列。 在image view中,可以对图像进行拉大,缩小,调整大小以适应特定位置。 Image view默认为非交互式。

·如果可能,请确保动画序列中的所有图像的大小一致

理想情况下,应该预先调整图像以适合view,以便系统不必进行任何缩放。 如果系统必须执行缩放,那么当所有图像的大小和形状相同时,最容易达到所需的结果。

注意 已配置为模板图像的图像会丢弃其颜色并采用已应用于封闭图像视图的任何色调。 参见Custom Icons。 


Maps

Human Interface Guidelines链接:Maps

Map view可让您在app内展示地理数据,并支持内置地图app提供的大部分功能。Map view可以配置为显示标准地图,卫星图像或两者均显示。 它可以包含pins和叠加层,并支持缩放和平移。 如果您的app支持路线展示,例如在跟踪跑步app中,则可以使用map view来显示路线。

·一般来说,保持地图可交互

人们习惯于使用手势与地图app交互,并希望能够以类似的方式与地图进行交互。

·使用用户习惯了的pin颜色。

一个pin标识您地图上的兴趣点。 人们熟悉地图应用中的标准pin颜色。 避免在app中重新定义这些颜色的含义。 对于目的地使用红色,对于起始位置使用绿色,对于用户指定的位置使用紫色。


Pages

Human Interface Guidelines链接:Pages

Page view控制器提供了一种在内容页面之间实现线性导航的方式,例如在文档,书籍,记事本或日历中。 

Page view控制器可以使用两种样式:scrolling 与 page-curl 中的一种在导航期间管理页面之间的转换。 

Scrolling transition 没有特定的外观;页面从流畅地一张接一张滚动。 

Page-curl transition 为当您在屏幕上轻扫时,会导致页面卷曲,就像实体书中的页面一样。

·如果合适的话,实施非线性导航的方式。 

当使用page view控制器时,页面按顺序流动,并且无法在不相邻页面之间跳转。 如果人们需要在app中不按顺序访问页面,请实现提供此功能的自定义控件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王大锤

UI渲染回顾简单笔记

30180
来自专栏大数据风控

如何在R中绘制热力地图

一、首先绘画出地图map 地图(map) 按一定的比例运用符号、颜色、文字注记等描绘显示地球表面的自然地理、 行政区域、社会经济状况的图形。 地...

433100
来自专栏数据小魔方

think-cell chart系列15——蝴蝶图

今天跟大家分享think-cell chart系列的第15篇——蝴蝶图。 ? 当然think-cell chart中是无法直接制作蝴蝶图的,需要通过一对开口方向...

50840
来自专栏PPV课数据科学社区

《用地图说话》之:十字绣中国热力数据地图

作图思路: 准备一块300*300小单元格组成的区域,对照地图图形,在每个省图形范围内的单元格填入该省的数据,然后对这些单元格应用条件格式->色阶,就形成了一幅...

31930
来自专栏小古哥的博客园

CSS3边框图片-像素虚边的问题

虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-imag...

27340
来自专栏数据小魔方

think-cell chart系列18——复合图表与次坐标轴

今天跟大家分享的是think-cell chart系列的第18篇——复合图表与次坐标轴。 今天要跟大家讲解如何在think-cell chart中开启次坐标轴,...

1.3K70
来自专栏理论坞

【教程】复古电影海报效果设计

2、新建一个图层命名cloud,用吸管工具吸取人像上最暗地方的颜色,选择滤镜—渲染—云彩,如下。

8020
来自专栏CDA数据分析师

技能 | 如何使用Python将文本转为图片

有时候,我们需要将文本转换为图片,比如发长微博,或者不想让人轻易复制我们的文本内容等时候。目前类似的工具已经有了不少,不过我觉得用得都不是很趁手,于是便自己尝试...

63170
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

11510
来自专栏进步博客

[译]响应式图像

自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在...

10120

扫码关注云+社区

领取腾讯云代金券