首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

下图是iOS模拟器中的翻页样式: ? API注释 想要了解如何在代码中定义图片视图,请参考Page View Controllers. 页面视图控制器: 带滚动条的页面视图控制器没有默认的外观。...4.2.9 滚动视图(Scroll View) 滚动视图方便用户浏览尺寸超越滚动视图边界的图片(下图中地球的图片无论是长度还是宽度都超过了)。 ?...当用户在视图中拖拽内容,内容随之滚动;当用户轻扫屏幕,内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部停止。...可以应用在页模式(paging mode)中,在此模式下用户可以通过拖拽和轻击等手势来浏览一页的内容 使用滚动视图来允许用户在固定的空间内浏览大尺寸或大量的视图。 适当地支持缩放操作。...重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。添加这些元素会缩小标题以及副标题单元格的可用宽度。 使用表格视图可以简洁而高效地展示少量或者大量信息。

10.1K51

最新iOS设计规范四|3大界面要素:视图(Views)

包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。 视图(Views) 包含用户在APP中看到的基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。...相对于集合,文本信息展示在一个可滚动的列表中,浏览起来会更简单和有效。 谨慎进行动态布局变更。集合的布局是可以随时更改的。...八、滚动视图(Scroll Views) 滚动视图主要被用户用来去浏览那些像文档中的文本,集合中的图像等比显示区域要大的内容。...这种样式始终包含至少一组,并且每组始终包含至少一行,并且可以在其后跟一个页眉和一个页脚。插入分组不包含索引。插入的分组样式在常规宽度的环境中效果最佳。...但不要改变滚动的位置。相反,将内容添加到的开头或结尾,让用户在准备好滚动到它。一些APP在加载新数据时会显示一个加载器,并提供一个直接跳转到该数据的控件。

8.4K31
您找到你想要的搜索结果了吗?
是的
没有找到

最新iOS设计规范三|3大界面要素:栏(Bars)

包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。 视图(Views) 包含用户在APP中看到的基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。...当需要特别强调上下文,请使用大标题。大标题绝对不能与内容竞争,但是在某些应用中,大标题的粗体会帮助人们浏览和搜索进行快速定位。...有几种常见的技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,渐变色或纯色 · 在状态栏背后放置模糊的视图...当用户尝试关注媒体状态栏可能会分散注意力。暂时隐藏这些元素以提供更沉浸的体验。例如,当用户浏览全屏照片时,“照片”应用程序将隐藏状态栏和其他界面元素。 ? 避免永久隐藏状态栏。...例如:在Safari中,当你开始滚动页面,工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘,工具栏也会被隐藏。 ?

9.8K10

CollapsingToolbarLayout使用

注意,没有设置这个属性,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...attr/colorPrimaryDark",即style样式中定义的沉浸式状态栏颜色。...addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开图片能够延伸到状态栏位置显示...,效果图中所示;contentScrim内容遮罩,上下滚动图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?...当设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。

2.4K60

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

网络活动指示器: 出现在状态栏中,当网络活动正在进行时它会旋转,在活动停止它则消失 不支持用户交互行为 当你的app正在链接网络,而这个连接过程将会持续好几秒的时候,你可以通过网络活动指示器来给用户以反馈...步进器: 是一个两段控件,其中一段默认显示减号,另一端默认显示加号 支持自定义图片 不展示用户更改的值 当用户想要对数值进行小幅度调整,可以使用步进器。...系统按钮: 默认状态下不含边界,也不含背景图 可以是图标或者文字标题 支持自定义样式描边或者加背景图(想要自定义按钮外观,可以使用 UIButtonTypeCustom 类型的按钮,并且提供背景图片...文本框 高度固定,包含圆角 当用户点击它,自动唤起输入键盘 可以包含系统提供的按钮,书签按钮(Bookmarks) 可以展示多种文字样式(了解更多请参考 UITextView) 使用文本框来获取用户输入的少量信息...当文本框里没有任何其它提示文字,会展示占位符文本(placeholder text),名字、地址等。 根据输入内容的类型来指定不同的键盘类型。

13.2K30

UI自动化 --- UI Automation 基础详解

对UI逻辑结构有贡献但本身不可交互的UI项例如有列表视图的标题、工具栏、菜单和状态栏。 仅用于布局或装饰目的的非交互项不会在控件视图中显示。...例如,您可以使用 Invoke 控件模式来处理可以调用的控件(如按钮),并使用 Scroll 控件模式来处理带有滚动条的控件(列表框、列表视图或组合框)。...ScrollPattern IScrollProvider 用于可滚动的控件。 例如,一个控件其所具有的滚动条在控件的可视区域中存在的信息超过了可被显示的信息,便处于活动状态。...ScrollItemPattern IScrollItemProvider 用于一种控件,该控件具有可滚动列表中的各个项。 例如,一个列表控件,该控件具有滚动列表中的各个项,组合框控件。...当桌面上有新 UI 项变得可见、隐藏或删除,结果便发生更改。 全局桌面更改 当与客户端相关的的全局操作发生引发,例如当焦点从一个元素转换到另一个元素、或窗口关闭

1K20

最新iOS设计规范五|3大界面要素:控件(Controls)

包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。 视图(Views) 包含用户在APP中看到的基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。...选项为中长列表,可以考虑使用选择器。如果需要显示太短的选项列表,请考虑使用下拉菜单而不是选择器。尽管选择器使您可以轻松快速地滚动浏览许多项目,但它可能会给一小部分项目增加太多视觉效果。...当可滚动列表固定时,选择器中的许多值可能会隐藏。最好是人们可以预测隐藏的值,例如按字母顺序排列的国家/地区清单,以便他们可以快速浏览各个项目。 避免切换屏幕以显示选择器。...在iOS 12及更早版本中,以及在全面屏显示的设备上,网络活动指示器会在发生联网在屏幕顶部的状态栏中旋转,联网完成后消失。和活动加载指示器样式一样,并且是非交互式的。 ?...若要更改(自定义)分段控件的视觉样式,请确保内容看起来协调可读并且对齐。

8.5K30

肘子的 Swift 周报 #014 | 发展要建立在稳定的基础上

近期推荐 SwiftData Fetching Pending Changes[4] Keith Harrison[5] 在 Core Data 中,当我们从持久化存储中提取数据,托管对象上下文默认会包含那些挂起的更改...(即未被持久化的更改)。...AnyView 作为一种类型擦除视图,使得开发者无需明确指定视图层次结构中各个视图的具体类型,从而简化了代码的复杂度,避免了泛型的频繁使用。然而,这种方便性可能以牺牲性能为代价。...文章特别指出,在包含大量子视图滚动列表等场景中,应谨慎使用 AnyView,以避免不必要的性能下降。...该工具能够调整屏幕顶部状态栏显示的各种信息,时间、电池电量和网络信号等。开发者在准备应用商店的截图或者进行其他专业演示,经常依赖这一工具来确保状态栏信息的一致性和专业外观。

11710

Android layout属性大全

(状态栏) android:visibility定义布局是否可见            android:requiresFadingEdge定义滚动边缘是否褪色            android...:clickable定义是否可点击            android:longClickable定义是否可长点击            android:saveEnabled设置是否在窗口冻结旋转屏幕...android:contentDescription 说明          android:OnClick 点击从上下文中调用指定的方法     第三类:属性值为具体的像素值,30dip,40px...        android:scrollbarStyle设置滚动条的样式         android:fitsSystemWindows设置布局调整是否考虑系统窗口(状态栏)         ...设置绘图半透明质量         android:OverScrollMode滑动到边界时样式         android:alpha设置透明度         android:rotation

2.1K90

PyQT模块、类、控件介绍

QtWidgets模块 包含了一整套UI元素控件,用于建立符合系统风格的Classic界面,非常方便,可以在安装选择是否使用此功能。...QMainWindow类 提供一个有菜单栏、锚接窗口(工具栏)和状态栏的主应用程序窗口。 QWidget类 所有用户界面对象的基类。...——显示控件 Label 标签控件 TextBrowser 文本浏览器 GraphicsView 图形视图 CalendarWidget 日期控件 LCDNumber 液晶数字显示 ProgressBar...QMainWindow:继承自QWidget类,是一个顶层窗口,它可以包含很多界面元素,菜单栏、工具栏、状态栏、子窗口等。...QListView:列表视图 QButtonGroup:按钮组 QScrollBar:滚动区域 QDateEdit:日期编辑框 QFontComboBox:字体选择框 QFileSystemModel:

42931

移动端常见问题解决方案

:transparent; 取消ios里Button、Input上的默认样式 -webkit-appearance:none; 禁用长按页面的弹出菜单 通常当你在手机上长按图像 img ,会弹出选项...css: normalize.css – 官网下载 normalize.css – github 三、meta标签设置 适应移动端 不对网站进行缓存 多核浏览器,优先使用最新版本的IE 和 Chrome...内核 添加到主屏幕隐藏地址栏和状态栏(即全屏) 当我们将一个网页添加到主屏幕,会更希望它能有像 App 一样的表现,没有地址栏和状态栏全屏显示,代码如下: 该方案在 iOS 和 Android5.0...添加到主屏幕设置系统顶栏颜色 当我们将一个网页添加到主屏幕,还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置,前提是开启了: 有了这个前提,你可以通过下面的方式来进行定义: content...遮罩层滚动问题 在有遮罩层的情况下,遮罩层下方的内容依然可以透过遮罩层滚动,因此要取消这种操作 (function(){ var scrollTop = 0; // 显示弹出层

1.1K10

全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的实现

APP端之所以能够更改状态栏的颜色、导航栏的颜色,其实还是操作自己的View更改UI。...下面就来分析一下,APP层的API如何影响SystemUI的显示的,并一步步解开所谓沉浸式与全屏的原理,首先看一下如何更改状态栏颜色。...不过,如果状态栏被设置为透明,用户就会看到状态栏下方有一片空白,这种体验肯定不好。这种情况下,往往希望内容能够延伸到状体栏下方,因此,就需要把空白的也留给内容视图。...用户布局级别的fitSystemWindow消费 假设图片浏览的场景:全屏,导航栏与状态栏透明,图片浏览区伸展到整个屏幕,通过设置下面的配置就能达到效果:全屏,并且用户布局与系统布局都不消费WindowInsets...SystemUi中系统状态栏的添加逻辑 上面我们说过了,状体栏、导航栏属于系统窗口,不在用户管理的范畴内,由于牵扯到通知、图标之类的管理,还是挺复杂的,这里我们只关心 状态栏的添加时机,用来说明状态栏视图其实是不归

5.3K40

2022 年的 CSS 全览

级联层(@layer) 浏览器支持: 在 @layer 之前,加载样式的顺序非常重要,因为最后加载的样式会覆盖之前加载的样式。这样开发人员就需要先加载不太重要的样式,然后再加载更重要的样式。...在 color-contrast() 之后,样式作者可以将任务完全转移到浏览器。你不仅可以使用浏览器自动选择黑色或白色,还可以为其提供设计系统适用的颜色列表,并让其选择第一个通过所需对比度的颜色。...这些对很多事情都有效,但移动浏览器带来了复杂性。 在移动设备上,加载页面,会显示带有 url 的状态栏,此栏会占用部分视口空间。...嵌套选择器 在 @nest之前,样式中有很多重复。当选择器很长且每个选择器都针对微小的差异,它变得特别笨拙。所以,我们会经常使用预处理器的嵌套功能。 在 @nest 之后,重复就消失了。...深色和浅色主题必须在样式中共存,其中顺序在确定获胜风格很重要。通常这意味着深色主题样式出现在浅色主题之后;这将浅色设置为默认样式,将深色设置为可选样式

4.2K20

【IOS开发基础系列】UIScrollView专题

滚动视图必须知道内容视图的大小,以便于知道什么时候停止;一般而言,当滚动出内容的边界,它就返回了。         ...一个滚动视图也可以控制一个视图的缩放和平铺。当用户做捏合手势滚动视图调整偏移量和视图的比例。当手势结束的时候,管理视图内容显示的对象,就应该恰当的升级子视图的显示。...那么这里就有疑问了,既然该属性设置未来NO了,那么岂不是UIScrollView不能处理任何事件了,那么为何在视图上快速滚动的时候,UIScrollView还能移动那。...假如一开始是对角方向滚动,则不会禁止某个方向 indicatorStyle     滚动条的样式,基本只是设置颜色。...        scrollsToTop是UIScrollView的一个属性,主要用于点击设备的状态栏,是scrollsToTop == YES的控件滚动返回至顶部。

38730

Python桌面程序开发入门(十六)-在应用程序中加入HTML

这最重要的不同点是默认样式wx.html.HW_SCROLLBAR_AUTO,它将告诉HTML窗口在需要的时候自动增加滚动条。...与之相反的样式是wx.html.HW_SCROLLBAR_NEVER,使用该样式将不会显示滚动条。...因为wx.html.HtmlWindow控件仅设计用于简单样式文本显示,而非用于全功能的多媒体超文本系统。它只支持最基本的文本标记,更高级的特性层叠样式(css)和JavaScript不被支持。...使用下表16.3中的方法,可以通常的浏览器一样浏览这个历史列表。  16.3    HistoryBack()装载历史列表中的前一项。如果不存在则返回False。...如何在窗口的标题栏中显示页面的标题?  在你的web浏览器中,你可能也注意到了一件事,那就是浏览器中不光只有显示窗口,还有标题栏和状态栏

2.6K00

微信小程序官方组件展示之视图容器scroll-view

以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。功能描述:可滚动视图区域。...设置哪个方向可滚动,则在哪个方向滚动到该元素1.0.0scroll-with-animationbooleanFALSE否在设置滚动条位置使用动画过渡1.0.0enable-back-to-topbooleanFALSE...否iOS点击顶部状态栏、安卓双击标题栏滚动条返回顶部,只支持竖向1.0.0enable-flexbooleanFALSE否启用 flexbox 布局。.../左边触发1.0.0bindscrolltolowereventhandle否滚动到底部/右边触发1.0.0bindscrolleventhandle否滚动触发,event.detail = {scrollLeft...横向滚动需打开 enable-flex 以兼容 WebView, 3.

1.7K60

使用Firefox开发工具做性能审计

DOMContentLoaded Vs Load Events 当完全加载和解析HTML文档(不包括CSS样式、图像和frame),DOMContentLoaded事件会被触发。...当HTML文档和所有相关样式、图像和frames被完全加载,事件负载就会触发。...这个单线程负责运行浏览器正在执行的所有工作,布局呈现、计算样式和收集垃圾。 还有一些方法,setTimeout、诸如单击、加载和资源获取等事件,都是由单个线程执行的。...调用树视图 调用树视图显示浏览器花费大部分时间使用的JavaScript函数,以及重要的度量,活动的总时间、自我时间及其相对于分析时间的百分比。 ?...您可以通过这个菜单过滤掉您希望在图表和视图中看到的单个活动,您还可以看到与不同操作相关的不同颜色。 例如,如果使用CSS动画,您需要关注的是诸如重新计算样式、应用样式更改、布局和绘制等活动。

3.4K40

最新iOS设计规范七|10大视觉规范(Visual Design)

在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理,在拆分视图中,在屏幕旋转以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。...保持对齐让用户浏览更简单,并传达组织和层级关系。对齐使APP看起来整洁有序,用助于用户在滚动集中注意力,并使查找信息变得更加容易。缩进和对齐还可以表明内容之间的关系。...请注意,当诸如录音和位置跟踪之类的后台任务处于活动状态,全屏iPhone上的状态栏不会更改高度。 如果你的APP当前隐藏状态栏,请重新考虑全屏iPhone的隐藏与否。...例如:地图在使用地图模式显示浅色模式,但在卫星模式切换到深色模式。放置在半透明元素后面或应用于半透明元素(工具栏)上,颜色也会显得不同。 在各种照明条件下测试APP的配色方案。...通常,在有分组视图使用背景色分组集;否则,使用背景色系统集。

7.9K30
领券