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

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

屏幕处于同一方向,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...工具栏: 是半透明的 在iPhone上,工具栏始终位于屏幕底部,而在iPad上则有可能出现在顶部 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下,工具栏可以隐藏。...当用户在视图中拖拽内容,内容随之滚动;当用户轻扫屏幕,内容将快速滚动——直到用户再次触摸屏幕或内容已经到达底部停止。...一般来说,一次只展示一个滚动视图。由于用户滚动屏幕动作幅度经常都会很大,如果在一屏中同时存在不止一个滚动视图,他们很容易会碰到另一个。...文本视图: 是一个可定义为任何高度的矩形 当内容太多超出视图的边框,文本视图支持滚动 支持自定义字体、颜色和对齐方式(默认情况下,文本视图会以左对齐的黑色系统字体显示) 可以支持用户编辑,当用户轻击文本视图内部

10.1K51

关于H5在移动端弹出下拉选项遮挡输入框的问题

背景 在最近的一个Hybrid App项目中,我实现的H5有以下两个需求: 使用quill.js实现富文本编辑器,但是,工具栏需要固定定位到底部,当输入法弹出工具栏需要悬浮在输入法键盘之上,如下图所示...的高度不会随着键盘的弹出而发生改变,始终是左图蓝色框的高度 综上,当工具栏使用fixed来定位,在android上,当键盘弹出webview的高度会减小,所以工具栏会悬浮在键盘之上,也就是说,在android...但是,ios不会改变webview的高度,因此,当键盘弹出工具栏始终位于屏幕底部,从而被键盘遮挡,如此就不符合需求,所以,需要针对ios做特别处理 ios上的解决方案 有以下三种解决方案: 改设计:...将工具栏放在顶部,这样改动成本最小,兼容性最好,如果能说服产品,那么推荐这种方式 在ios app端,当键盘弹出,配置webview的高度为屏幕高度 - 键盘高度,也就是与android保持一致的处理方式...,到这一步即可解决遮挡的问题 如果滚动区的高度大于屏幕的高度,则需要按照如下流程进行处理: 源码 效果如下: 滚动区小于屏幕高度 滚动区的高度与屏幕高度相当 滚动区高度大于屏幕高度

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

【玩转嵌入式屏幕显示】(六)ST7789 SPI LCD硬件垂直滚动功能的使用

一、想法萌生 小熊派开发板的 LCD 小屏幕使用是ST7789驱动IC,之前一直有在该块屏幕上实现滚动显示的想法,最初构想在MCU侧创建一个大的队列,将整个屏幕显示内容交由队列管理,然后不停的去整屏刷新以实现屏幕滚动...理论上这样的实现比较耗资源,耗费CPU资源去操作SPI外设,耗费内存资源去存储显示数据,所以一直没有去做这件事。 今天在查看ST7789数据手册写论文,偶然发现ST7789手册种: 咦?...设置滚动显示起始地址 设置滚动显示起始地址的作用为:设置LCD屏幕从显存的哪行开始显示,示例如下图,图中TFA=BFA=0、VSA=320,如果将滚动显示起始地址设置为3,则LCD屏幕显示内容将会从第3...LCD_Write_Cmd(0x37); LCD_Write_Data(vsp / 256); LCD_Write_Data(vsp % 256); } 使用该函数设置一次后达到了静态滚动显示的效果...三、使用示例 1.

5.2K40

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

您还可以定义在给定的时间内显示哪些自定义任务。 使用“操作”按钮显示活动视图。人们习惯于点击“操作”按钮来访问系统提供的活动。用户习惯在点击“功能”按钮弹出活动视图。...浮层适合大屏幕上,可以包含各种元素,包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。当浮层出现时,其他视图的交互行为会被禁止,直到浮层被取消/关闭。...当滚动视图的缩放选项被打开,设置比较合适的最大及最小值。例如:放大文本直到一个单一的字符充满整个屏幕,即使其可能对于大部分应用来说是没有意义的。 当滚动视图处于页面模式考虑显示页面控制元素。...用户经常会在滚动使用非常大幅度的动作,如此便会非常难以避免在同一屏幕中对相邻的滚动视图进行交互操作。...默认情况下,文本视图中的文本是左对齐的,并使用黑色的系统字体。如果文本视图可编辑,则在视图内部点击屏幕下方会弹出键盘。 ? 保持文字清晰。

8.4K31

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

但是,如果你想使用自定义返回按钮,请确保它样式仍然看起来是返回,且与界面的其余部分匹配。你可以同时提供自定义的蒙版图像,以便系统在转场过渡使用此蒙版为按钮标题设置动画效果。 不要包括多段面包屑路径。...当数据层次结构深于两个级别,请在拆分视图界面的补充列中使用列表视图。 四、状态栏(Status Bars) 状态栏出现在屏幕的上边缘,并显示有关设备当前状态的有用信息,例如时间,移动电话和电池电量。...有几种常见的技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊的视图...所有页面的标签栏应保持相同的高度,并且在弹出键盘隐藏。 标签栏可能包含N个标签,但可见标签的数量因设备大小和方向而异。...例如:在Safari中,当你开始滚动页面工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘工具栏也会被隐藏。 ?

9.8K10

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

七、选择器(Pickers) 选择器可以显示一个或多个可滚动的不同值列表,供人们选择。在iOS 14及更高版本中,日期选择器支持其他选择值的方式,例如在日历视图中选择日期或使用数字键盘输入日期和时间。...选项为中长列表,可以考虑使用选择器。如果需要显示太短的选项列表,请考虑使用下拉菜单而不是选择器。尽管选择器使您可以轻松快速地滚动浏览许多项目,但它可能会给一小部分项目增加太多视觉效果。...在正在编辑的字段的下方或附近显示选择器效果很好。选择器通常显示屏幕底部或弹出窗口中。 日期选择器 日期选择器是用于使用触摸屏,键盘或定点设备选择特定日期,时间或两者的有效界面。...当在导航栏或工具栏使用时,进度栏应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。可以调整进度条的外观以匹配APP的设计。例如,您可以为轨道填充指定自定义色调或图像。...可以在文本输入框的左侧或右侧显示自定义图标,也可以添加系统提供的按钮,例如“书签”按钮。 键盘 根据实际情况,显示适当的键盘类型。

8.5K30

Human Interface Guidelines —— 工具栏(Toolbars)

Toolbar Toolbar出现在app屏幕的底部,并包含用于执行与当前视图或其中的内容相关操作的按钮。  Toolbar是半透明的,可能具有背景色,并且当人们不太可能需要它们,它们通常隐藏。...例如,在Safari中,当您开始滚动页面工具栏会隐藏,因为您可能正在阅读。 您可以通过点击屏幕底部再次显示。 当键盘出现在屏幕,toolbar也会隐藏。...·提供相关的工具栏按钮 工具栏应包含在当前上下文中有意义的常用命令。 ·考虑图标或文字标题的按钮是否适合app 当您需要三个以上的toolbar按钮,图标是好的选择。...当你有三个或更少的按钮,文字有时会更清晰。例如,在日历中,使用文本是因为图标会令人困惑。文本的使用还允许收件箱按钮显示日历和事件邀请的计数。...·避免在toolbar中使用分段控件(segmented control) 分段控件允许人们切换上下文,而工具栏是特定用于当前屏幕的。如果您需要提供切换上下文的方式,请考虑使用tab bar。

1.2K100

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

selectedIcon Image.propTypes.source         当标记被选中自定义的图标。当定义了系统图标,它会被忽略。如果为空,那么图标会呈现蓝色。...如果工具栏具有唯一子级,它将显示在标题和操作之间。...使用这个来实现,这样第一个屏幕需要的数据就会一次出现,而不是在多个框架的过程中出现。...Sticky行为意味着它将带着本节顶部的内容滚动,直到 它到达屏幕的顶端,此时它会停在屏幕顶部,直到被下一节的页眉推掉。...keyboardShouldPersistTaps布尔型         当为假,当键盘向上摒弃键盘,轻击外部关注文本输入。当为真滚动视图不会抓取轻击,键盘不会自动 摒弃。

44440

iPhone X 适配指南 (官方翻译版)

请参阅图像大小和分辨率和自定义图标。 布局 在设计iPhone X,您必须确保布局填满屏幕,并且不会被设备的圆角,传感器外壳或用于访问主屏幕的指示灯遮蔽。...确保背景延伸到显示器的边缘,并且垂直可滚动的布局(如表格和集合)一直延续到底部。 插入必要内容以防止剪辑。...人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器,这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。 不要掩盖或特别注意关键显示功能。...不要重复系统提供的键盘功能。在iPhone X上,即使使用自定义键盘,Emoji / Globe按钮和Dictation按钮也自动显示键盘的下方。...您的应用程序不能影响这些按钮,因此避免在键盘中重复这些按钮造成混乱。请参阅自定义键盘。 资源 下载Photoshop和Sketch 资源中的 iPhone X UI设计模板。 原文链接

2.4K50

【译】W3C WAI-ARIA最佳实践 -- 布局

一个原因是当用户与 grid 交互屏幕阅读器需要处于应用阅读模式,而不是文档阅读模式,这非常重要。在应用阅读模式屏幕阅读器用户只能发现可聚焦的元素和标记可聚焦元素的内容。...当一组控件在视觉上呈现为一个组合,可以使用 toolbar 角色来告知屏幕阅读器用户分组的呈现和目的。组合控件到工具栏,在键盘交互中是一个减少Tab停留数量的有效方式。...如果必须使用,只能包含一个这样的控件且让其作为最后一个元素。 当且仅当组合中包含三个或三个以上的控件,才能使用工具栏作为分组元素。 键盘交互 当工具栏获取焦点,焦点被设置在第一个可用控件上。...(译者注:一般情况下,屏幕阅读器用户会使用Tab快速浏览页面上的内容,顺序为从上到下、从左到右,此时,若工具栏获取焦点,则将焦点设置在第一个可聚焦的元素上,若使用 Shift + tab 反向浏览,若工具栏获取焦点...般来说,使用键盘进行导航,不可用元素不可聚焦。但是,在某些需要发现功能的场景中,如果不可用元素可聚焦,可以帮助屏幕阅读器用户发现这些功能的存在。

6.1K50

【最新】iPhone X 交互设计官方指南

要确保背景延伸到屏幕的边缘,并且垂直可滚动的布局(例如表格或集合)能够一直延续到底部。 ? 插入必要内容以防止裁剪。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换,这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。...只有在极其少数的情况下,例如游戏这样的沉浸式应用才有可能需要对屏幕边缘手势进行自定义。手势具有优先级: 第一次滑动会调用你应用的手势,在第二次滑动才会调用系统手势。...在使用自定义键盘,不要重复实现系统提供的键盘功能。在键盘的下方会自动显示Emoji/Globe 和 Dictation 按钮。...你的应用程序并不能影响这些按钮,所以不要在你的自定义键盘中出现这些按钮,以免造成混乱。 请参阅 自定义键盘

1.9K20

2021 最新 IntelliJ IDEA 详细配置步骤演示(图文版)

User contrast scrollbars: 使编辑器滚动条更加可见。...Tool Windows(工具栏设置) Show tool window bars(显示窗口工具栏) 在主窗口的边缘周围显示工具窗口栏 开启前效果: 开启后效果: Show tool window numbers...Menus and Toolbars(菜单和工具栏管理) 自定义菜单和工具栏,使其仅包含所需的操作,对其进行重新组合并配置其图标。 在可用菜单和工具栏列表中,展开要自定义的节点,然后选择所需的项目。...Data Sharing(数据共享) 选中这个发送使用情况统计信息复选框后,将会允许JetBrains收集你使用IntelliJ IDEA最常使用的功能和操作的统计信息。 4....更改其显示方式,并有选择地启用其日志记录。 7. Quick Lists(快捷菜单) 一组自定义的弹出。可以将其视为自定义菜单或工具栏,您可以为其指定快捷方式以进行快速访问。

61710

Mac快速上手指南

或者control+shift+power关闭屏幕 锁屏:   windows下锁屏用的比较多(windows+l),mac下是control+command+q 4、常用的mac使用和设置 软件工具栏的定制...:   finder、safari等等的软件,如果对默认工具栏不满意,都是可以定制的,右击选择自定义,将工具拖入或拖出。...鼠标滚轮方向的设置:   mac第一次连上鼠标使用才叫别扭,滚动方向完全跟windows相反。查了下滚轮滚动windows指的是滚动条,mac指的是屏幕主体。...如上图,滚动方向:自然 对勾取消即可。   不过,这么修改也存在一定问题:触控板该选项也同时取消了,这个苹果有点霸道,用触控板还需要再修改回来: ?...5、必备软件 mac下与windows相比,同样需要安装一些软件提升使用效率。 mac增加对ntfs移动硬盘的读写:   mac上连接上移动硬盘,才发现只能读不能写,什么鬼。。

1.8K30

UI(用户界面)设计规则和规范

6):同一界面上的控件数最好不要超过 10个,多于10个可以考虑使用分页界面显示。...5):工具栏要求可以根据用户的要求自己选择定制。 6):相同或相近功能的工具栏放在一起。 7):工具栏中的每一个按钮要有及时提示信息。 8):一条工具栏的长度最长不能超出屏幕宽度。...15):滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。 16):状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。...17):菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条仍有立体感。 18):菜单和状态条中通常使用5 号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。...3):多个子窗体弹出应该依次向右下方偏移,以显示窗体出标题为宜。 4):重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。 5):错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。

2.9K30

iOS 11 更大的导航 (官方翻译版)

导航栏 导航栏出现在应用程序屏幕顶部的状态栏下方,并可以通过一系列分层屏幕进行导航。当显示屏幕,通常标有前一屏幕标题的后退按钮出现在栏的左侧。...导航栏是半透明的,可能具有背景色调,并且可以配置为在屏幕上键入屏幕隐藏,发生手势或视图调整大小。 ? 考虑在显示全屏内容暂时隐藏导航栏。当您想关注内容,导航栏可能会分散注意力。...如果您实现这种行为,让用户使用简单的手势(如轻按)来还原导航栏。 有关开发人员的指导,请参阅UINavigationBar。 提示不需要导航使用工具栏,或者想要多个控件来管理内容。...大标题 当您需要特别强调上下文,请使用较大的标题。在一些应用程序中,大标题的大胆大胆的文字可以帮助人们浏览和搜索。例如,在标签布局中,大标题可以帮助澄清活动选项卡,并在用户滚动到顶部通知用户。...手机使用这种方法,而音乐使用大的标题来区分专辑,艺术家,播放列表和收音机等内容区域。当用户开始滚动内容,大标题转换为标准标题。大标题在所有应用程序中都没有意义,不应与内容竞争。

2.8K30

Snagit for mac(屏幕截图和屏幕录制工具)

图片自定义快捷键:可以自定义捕捉屏幕截图和录制视频的快捷键,以提高工作效率。支持跨平台使用:Snagit也提供Windows版和移动端应用,可以在不同的设备上进行使用。...更新日志新功能当选择“捕获隐藏Snagit”首选项,视频录制工具栏和控件不会出现在macOS Ventura上的最终录制中。在视频捕获设置中添加了为屏幕绘制对象自定义淡入淡出时间的功能。...功能更新添加了在 Screen Draw 处于活动状态滚动的功能。当用户退出绘图模式屏幕绘图对象现在会自动淡出。改进了 Chrome 网络浏览器中自动滚动箭头的可见性。...添加了打印使用选择工具所做的选择的功能。为共享链接添加了可自定义的热键。性能改进改进了自动和全景(手动)滚动捕获的处理时间。提高了视频捕获的稳定性。...修复了录制全屏 Screen Draw 控件未移动到不同显示器(如果可用)的问题。修复了捕获选择十字准线会将光标检测为选择区域的问题。

3K00

【愚公系列】2023年11月 Winform控件专题 Form控件详解

1.2 autoscrollAutoScroll 是一个属性,用于实现自动滚动功能,当控件的内容超出可见区域,通过自动调整滚动条,使用户能够滚动查看所有内容。...当控件的内容大于控件的显示区域,控件会自动滚动显示尽可能多的内容。可以通过设置AutoScrollMinSize属性来指定控件需要滚动的最小大小。...当控件的内容超出其显示区域,控件会自动滚动显示尽可能多的内容。...使用DoubleBuffered可以在控件绘制过程中使用一个缓冲区,当绘制完成,将缓冲区中的内容一次性绘制到屏幕上,以达到平滑绘制的效果。...对话框:Form可作为对话框使用,用于与用户交互,例如显示警告窗口或确认对话框等。菜单栏:Form可用于创建菜单栏并设置菜单项。工具栏:Form可用于创建工具栏并设置工具按钮。

1.4K21

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

活动指示器: 当任务进行和加载旋转,任务完成后自动消失 不支持用户交互行为 在工具栏或主视图中使用活动指示器来告知用户任务或加载正在进行中,但并不提示该过程何时会结束。 不要使用静止的活动指示器。...因为表格视图的高度较大,内容滚动起来会更快。 4.3.10 进度视图 进度视图展示了任务或进程的进度(下图是iOS默认邮件App的工具栏)。 ?...步进器: 是一个两段控件,其中一段默认显示减号,另一端默认显示加号 支持自定义图片 不展示用户更改的值 当用户想要对数值进行小幅度调整,可以使用步进器。...我们推荐您限定好警告框的最大高度,保证在竖屏和横屏模式下文字均能不需要滚动便可完整地显示。 一般情况下,使用两个按钮的警告框。两个按钮的警告框是最为常见和有用的,因为它最便于用户在两个按钮中做选择。...从视觉上看,模态视图好像原来就处于当前视图的下面,当前视图移开,它便出现了。离开模态视图,原先的父视图从左边滑回屏幕右边。

13.2K30

Mac 热键大全

屏幕捕捉快捷键 动作……………………….保存到…………-快捷键 全屏捕捉……………………桌面(.PDF文件)……Command + Shift + 3   (win+shift+3) 屏幕部分画面………...+ 3 显示/隐藏工具栏………………………………..Command + b 查看并选择当前目录的路径………………………....…………………………下方向键 全键盘操作 打开完全键盘操作………………………………..Ctrl + F1 任意控制对话框及窗口…………………………….Ctrl + F7 高亮下一控制…………………………...http://hovertree.com/h/bjaf/a28c7owl.htm 二、使用显示图像或文件夹工作的巧妙使用: 1.鼠标边按图像或文件夹可以打开图像或文件夹;  2.用鼠标拖曳图像或文件夹可以移动到所需位置...三、使用文件对话框的巧妙使用: 1.打开对话框(如使用“文件”菜单下的“打开”或“存储”等命令同时)按“.”或按“esc”键可以取消该命令;  2.同时按“苹果键 + 方向上键”或点按桌面图像可以上移一层

1.8K50
领券