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

iOS 8人机界面指南(三):iOS技术(下)- 腾讯ISUX

用户可以通过点击它来预览文件。 ? 你可以在应用中用一个新的视图来显示文件预览,使用全屏或者模态视图。展示的形式取决于你的应用运行在什么设备上。...(注意缩放操作在iPhone上并不适用。) 当然,在导航视图中显示文件预览可以在导航栏上放置特定的预览控件。(如果你的视图有工具栏,Quick Look会将预览控件放在工具栏上。)...在这一情境下,用户仍然希望能在他们的设备上使用应用,但他们不希望被无预期或突兀的声音所打断,如手机铃声或新消息音。...情境1:一个帮助人们学习新语言的教育类应用 你需要提供: 1.用户点击特定控件时播放反馈音效 2.当用户想听到正确发音的示例时播放字词的记录 在这个应用中,声音对于主要功能是十分重要的。...避免过度使用摇晃手势 即使你能程式化的设定你的应用将摇晃事件作为摇动撤销操作,你也是在冒着混淆用户视听的风险,因为他们也可能使用摇晃执行一个不同的操作。

2K40

iOS 9人机界面指南(三):iOS 技术 (下) - 腾讯ISUX

在这一情境下,用户仍然希望能在他们的设备上使用应用,但他们不希望被无预期或突兀的声音所打断,如手机铃声或新消息音。...情境1:一个帮助人们学习新语言的教育类应用。你需要提供: 用户点击特定控件时播放反馈音效 当用户想听到正确发音的示例时播放字词的录音 在这个应用中,声音对于主要功能是十分重要的。...或者你可以使用MPVolumeView类来显示用户可选择的支持AirPlay的音频或视频设备。用户习惯于这些标准控件的外观和行为,因此他们可以理解如何在你的应用中使用它们。...虽然点击和长按手势是用户呼起编辑菜单的首选方式,但他们也可以在文本页面中通过双击一个单词来选择该单词并同时呼起菜单。如果你在自定义页面中支持菜单,确保它能支持两种手势。...记住摇晃手势是用户触发撤销与重做操作的主要方式,而如果提供两种不同方式完成同样的任务则会使用户困惑。如果你认为很有必要提供直观专有的撤销与重做操作,你可以在导航栏中放置系统原生的按钮。

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

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

    举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...你可以在标签上加上红底白字,显示数字或者省略号的小气泡(badge)以展示特定的应用信息 你可以使用标签栏来切换对同一组数据的不同视图模式,或者整体功能下不同的子任务。...如果用户很难点中集合视图中的项,他们是不会愿意用你的应用的。跟所有用户可以点击的UI对象一样,请确保你的集合视图中每一个项的最小点击区域有44×44pt,尤其是在iPhone上。...当你在滚动视图中使用页面控件的时候,最好禁用同一方向的滚动指示器(scroll indicator)。这样一来可以让用户聚焦到页码控件上,并让他们有了一种唯一且清晰的方式来浏览当前内容。...虽然你可以使用属性字符串将不同的字体、字色和对齐方式串联在同一个文本视图内,但保持文本的可读性是必不可少的。

    10.1K51

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

    当点击进入新页面时,其导航栏的左侧会出现一个返回按钮,并带有前一页面的标题。 有时,导航栏的右侧也会有一个控件,如“编辑”或“完成”按钮,用于管理活动视图中的内容。...如果你的APP也用到了这个功能,切记要让用户使用简单的手势(如点按)来恢复导航栏。 导航栏标题 在导航栏中显示当前视图的标题。在多数情况下,标题可以帮助人们了解他们在看什么。...iPad上的拆分视图是一个例外,更多的是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间的一致性。 导航栏控件 避免在导航栏上挤满太多控件。...例如,如果iOS设备上没有歌曲,则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。 始终在附加视图中切换上下文。...工具栏包含用于执行与当前上下文有关的动作的按钮,例如创建项目,删除项目,添加注释或拍照。标签栏和工具栏永远不会在同一视图中同时出现。 提供相应的工具栏按钮。

    9.9K10

    Android的FixScrollView自定义控件

    接下来要了解几个知识点, ①了解下Android事件分发的机制  ②了解哪些触摸类型事件以及之间的联系 ③如何在ViewGroup中寻找子控件(递归 找一个具体的控件大坑,尤其是再React-Native...注意,上述图中,只是描述事件从ViewGroup往下传递过程,没有考虑子View的onTouchEvent的返回值,即没有考虑事件从子View往上回传的过程。后面再介绍事件回传的过程。...) up--手指抬起事件 3如何在ViewGroup中寻找子控件 使用递归+instanceof可以父ScrollView找到一组类型相同的控件,想找某一个tab子页面中某一个ListView,太坑了!...一开始的思路是切换tab页面的话其他tab页面Listview控件可见状态会不可见或者消失,完全不是这么回事,后来发现其实View的视图状态一直是可见的,不过那时候技术老大提醒说点击不同的tab时listview...那么有没有其他的方法了呢?采用Hierarchy Viewer去寻找不同tab页面的listview不同点,上个两个tab布局树形的图。

    1.9K80

    处理视觉冲突 | 手势导航 (二)

    如果您的控件出现在了这些区域内,就可能被系统 UI 遮盖。自然,我们可以使用 insets 区域来尝试解决视觉冲突,如把视图从屏幕边缘向内移动到一个合适的位置。...注意,使用可点击区域里的数值进行布局时,依然可能导致自己的控件与系统 UI 在视觉上重叠,这一点与系统窗口区域 insets 不同,使用后者的值对自己的控件进行位移后能确保不会与系统/导航栏发生视觉重叠...Insets 其实并没有规定 "您应在何处放置自己的控件",所以从理论上讲可以这么做: 但这个做法显然不好,因为 FAB 这时非常靠近导航条,虽然依然可以点击,但会让用户感觉迷惑。...在 Android 10 上,系统手势区域如下: △ 左/右侧的后退操作区域宽 40dp,下方的主屏操作区域高 60dp 如果您有需要滑动操作的控件出现在了系统手势区域内,就可以使用对应的数值来将这些控件挪开...处理边衬区冲突 希望您现在对不同类型的 insets 区域有了更深的了解,下面我们来看看您需要如何在应用中实际使用它们。

    2.8K30

    最新iOS设计规范六|10大交互规范(User Interaction)

    当需要用户识别物体时,使用“识别并保持靠近”这样的术语,而不是点击和触摸。 使用平易近人的术语。某些人可能不熟悉近场通信。为了使其更平易近人,请不要使用技术性术语,如NFC、近场通信等。...五、手势(Gestures) 用户在触摸屏上用不同的手势来与iOS设备上进行交互。这些手势让用户与内容紧密联系在一起,增强了用户对屏幕内容的直接操纵感。 尽可能地使用标准手势。...在极少数沉浸式应用程序中(如游戏)可能需要自定义屏幕边缘手势,这些手势优先于系统手势,即第一次滑动调用特定于应用程序的手势,第二次滑动调用系统手势。...用户可以使用多种类型的控件来操纵其设备上的声音,包括音量按钮,“铃声/静音”开关,耳机控件,“控制中心”音量滑块以及第三方附件中的声音控件。...如果你的APP不支持某些控件,那么不对他们做出响应即可。 九、触觉(Haptics) 触觉反馈(如各种形式震动)可以增强用户与屏幕界面交互的体验。

    4.3K30

    轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

    同一个地方会展示多页内容,虽然一次只展现一个页面;每页中包含图片以及小段文字。 会有指示器表明,这个轮播图中不止一张图片。 轮播图的优点 轮播图使得主屏上最重要的位置可以展示多页内容。...dell主页上的轮播图中根本没有向前/向后的轮播图控件。导航控件仅仅是轮播图下面几个不起眼的小点。 这样做。apple主页上提供了显著且易于辨认的前后翻页控件。...天梭的网页上,向前翻页和向后翻页的按钮在浅色背景下是很容易看见和点击的,但是在暗色背景下几乎看不到了(译者眼都要瞎了才看到orz)。 在手机设备上,请支持滑动手势。...这不是说,像向前/向后翻页的轮播控件就不可以使用了,但他们应该作为滑动翻页手势的补充。 这样做。在手机设备上支持滑动手势。 使用自动滚动时的要点 自动滚动的轮播图引导用户看完所有的内容。...当用户有任何主动交互行为时(如,点击轮播控件),就彻底暂停自动滚动,因为点击这个行为有很强的主动性,你要将决定权交给用户。 不要停在轮播图的最后一页。要反复地播放轮播图中所有的分页。

    4.9K70

    如何处理手势冲突 | 手势导航连载 (三)

    作者 / Chris Banes, Android 开发者关系团队工程师 我们将在近期为大家带来一个关于 "手势导航" 的系列连载,本文是手势导航连载的第三篇,如果您希望查看前两篇文章,请点击下方链接...我们准备了一张流程图帮助大家快速做出决策: △ 请点击图片放大查看 注解: 非粘性沉浸模式: 用户可以通过在系统栏上滑动来退出沉浸模式。...如果您的视图放置在一个可滚动操作的容器 (如 RecyclerView) 中,那么请这么理解这个问题: 该视图是否完全或大部分位于手势交互区域中?...如果用户可以将视图滚动到手势交互区域之外,则应该视为没有交互冲突。 您也许已经注意到,在流程图中多图显示控件 (ViewPager) 在此处回答 "否"。...OK,现在我已经解释了流程图中的问题,下面我们来详细说说流程图中给出的解决方案。 解决方案 1: 无需处理手势冲突 最简单的 "解决方案" ,只需要……什么都不做!

    5K30

    iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

    视图的所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(如警告提示和动作菜单)。 要在应用中管理一组或者一系列的视图,通常需要使用视图控制器。...避免布局上不必要的变化。在所有环境中保持一致的使用体验,能让人们在旋转设备或在不同设备上运行你的应用时维持稳定的使用模式。...大型控件吸引眼球,比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击,这让它们在应用中尤其有用——就像电话和时钟(上面的按钮)那样——能让用户经常在容易分心的环境下仍然保持正常使用。...一个任务需要多层级的模态视图时,确保用户理解点击非最高层级下的完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分,还是整个任务。...不要给标准手势赋予不同的行为。除非你的应用是游戏,否则重新定义标准手势会使用户迷惑,且增加使用难度。 不要创建和标准手势功能相似的手势操作。

    1.9K41

    Flutter技术与实战(4)

    另外,由于 Widget 的不可变性,可以以较低成本进行渲染节点复用,因此在一个真实的渲染树中可能存在不同的 Widget 对应同一个渲染节点的情况,这无疑又降低了重建 UI 的成本。...第二类则是手势识别(Gesture Detector),表示多个原始指针事件的组合操作,如点击、双击、长按等,是指针事件的语义化封装。..."),//手势抬起回调 ); 手势识别 通常情况下,响应用户交互行为的话,我们会使用封装了手势语义操作的 Gesture,如点击 onTap、双击 onDoubleTap、长按 onLongPress、...有些时候我们可能会在应用中给多个视图注册同类型的手势监听器,比如微博的信息流列表中的微博,点击不同区域会有不同的响应:点击头像会进入用户个人主页,点击图片会进入查看大图页面,点击其他部分会进入微博详情页等...事实上,RawGestureDetector 的初始化函数所做的配置工作,就是定义不同手势识别器和其工厂类的映射关系。 这里,由于我们只需要处理点击事件,所以只配置一个识别器即可。

    10.9K20

    Android开发笔记(四十五)手势事件

    : 获取当前在屏幕上的相对坐标X getRawY : 获取当前在屏幕上的相对坐标Y getEventTime : 获取当前的事件时间 手势检测GestureDetector 由于在onTouchEvent...借助于GestureDetector,可以在大多数场合下辨别出常用的几个手势事件,如点击、长按、翻页等等。...滑动冲突的处理 app功能多起来之后,页面上有多个控件是可以滑动的,比如说ScrollView、下拉刷新、ViewFlipper、ViewPager等等,有的需要处理上下滑动手势,有的需要处理左右滑动手势...这样多个控件争相响应同一个手势事件,就会产生滑动冲突,如果没处理好冲突,页面上的某些控件便无法正常使用。避免滑动冲突的处理办法,主要有以下三个: 1、对不同的手势事件,要返回正确的布尔值。...2、在底层控件中,如果当前手势还未处理完成,那么必须阻止上级视图的手势拦截。

    1.3K30

    【visionOS】从零开始创建第一个visionOS程序

    在任何SwiftUI应用中,你都可以使用场景将内容放到屏幕上。场景包含要在屏幕上显示的视图和控件。场景还定义了这些视图和控件出现在屏幕上时的外观。...在模拟器中运行你的应用程序,以验证你的内容看起来像你期望的那样,并在设备上运行它,以看到你的3D内容栩栩如生。 围绕一个或多个场景组织内容,这些场景管理应用程序的界面。...你也可以在视图中添加SwiftUI手势识别器来处理点击、长按、拖动、旋转和缩放手势。...将指针移动到窗口栏旁边的圆圈上,显示窗口的关闭按钮。将光标移动到窗口的一个角落,以将窗口栏变为调整大小控件。 tips:应用程序不能控制窗口在空间中的位置。...当指定的手势发生在实体上时,SwiftUI执行提供的闭包。 下面的示例将一个点击手势识别器添加到上一个示例中的球体视图中。

    1.1K40

    Flutter完整开发实战详解(十三、全面深入触摸和滑动原理)

    1、事件流程 在前面的流程图中我们知道,在 Dart 层中手势事件都是从 _dispatchPointerDataPacket 开始的,之后会通过 Zone 判断环境回调,会执行 GestureBinding...那么问题来了,如果同一个区域内有多个控件都实现了 handleEvent 时,那最后事件应该交给谁消耗呢?...那么为了分析接下来的“战争”,我们需要先看几个概念: GestureRecognizer :手势识别器基类,基本上 RenderPointerListener 中需要处理的手势事件,都会分发到它对应的...GestureArenaManagerr :手势竞技管理,它管理了整个“战争”的过程,原则上竞技胜出的条件是 :第一个竞技获胜的成员或最后一个不被拒绝的成员。...事实上 Down 事件在 Flutter 中一般都是用来做添加判断的,如果存在竞争时,大部分时候是不会直接出结果的,而 Move 事件在不同 GestureRecognizer 中会表现不同,而 UP

    1.7K30

    移植一个抖音贴纸组件到Flutter

    注意这一章的大部分内容和上一篇文章中讲解 Android 端实现控件的章节是差不多的。...所以图中的 ElementContainerWidgetState 就是一个构造这样的容器的 State,简单概括一下它有这些功能: 1.处理各种手势事件,这里的手势包括单指和双指。...7.我图中 ECWS 也实现了一个子类 DECWS,这个类简单的加两个手势: 1.单指移动缩放:类似抖音的随拍,按住元素的右下角的时候可以用拖动来对元素进行缩放和旋转。...(2).元素单指手势 元素手势不像添加元素那样需要外部调用,元素手势是通过事件分发触发的,我们这里不讲 Flutter 的事件分发机制,只讲我们基于其上的逻辑。...3.如果当前有选中的 WE 但与当前触摸的 WE 不是同一个的时候也分两种情况:一种情况是触摸的 WE 不存在,此时表示将 mMode 标记为 SINGLE_TAP_BLANK_SCREEN 表示点击了

    1.4K20

    Human Interface Guidelines —— 导航栏(Navigation Bars)

    Navigation Bars 位置 Navigation Bars显示在app屏幕的顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级的屏幕进行导航。 ...有时,navigation bars的右侧包含一个control,如Edit或Done按钮,用于管理活动视图中的内容。 ...split view(分割视图) ·Navigation Bars是半透明的,可以具有背景色,并且可以配置为当键盘出现在屏幕上 / 使用手势 / 视图大小调整时隐藏。...暂时隐藏navigation bar以提供更加身临其境的体验。 照片在查看全屏照片时会隐藏navigation bar和其他界面元素。 如果你实现这类行为,让用户用简单的手势恢复导航栏,如点击。...如果navigation bar包含多个文本按钮,点击时这些按钮的可能会一起运行,从而使按钮无法区分。可以在按钮之间插入固定空间项来添加分隔。

    2.5K110

    一种精准monkey测试的方法

    通过观察一段时间的执行过程,发现由于我们app几个页面控件布局是比较偏上和偏下边缘,中间只有一个大按钮,这样中间大按钮命中率比较高经常会进入同一个页面,那么其他页面和按钮的功能几乎没有被点击到。...当然,在实际中,还存在控件的点击顺序问题,如果点击顺序不合适,也会存在有些控件被频繁点击、有些控件可能点击不到的情况。...举例,下图是执行过程中的几张连续截图:  ? → ? → ? 图中,红点位置就是点击位置,很直观的展示了执行过程。...总结 本文所述的方案很好的解决了monkey测试在控件布局不均衡的app上执行有效性低的问题。...同时,实现了一种自适应的随机测试手段,也就是无需针对不同app编写不同的随机测试脚本,实现了一套测试代码用于所有app的随机性测试。

    72920

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

    API注释 想要了解如何在代码中定义信息按钮,可以参考UIButton. iOS包含了两种信息按钮样式:适用于浅色内容上的深色按钮,以及适用于深色内容上的浅色按钮。...保证每个分段都容易点击。为了保证每个分段的大小有至少44×44像素,请控制分段的数量。在iPhone上,1个分段控件最多包含5个分段。 尽可能地保持每个分段中的文字长度一致。...因为每个分段都是等宽的,当文本长度差异很大时看上去会很不协调。 不要在同一个分段控件中混用文字和图片。每一个分段都仅可支持纯文字或纯图片。...避免在同一个分段控件中,一些分段里使用纯文字,另一些分段里使用纯图。 请在必要时调整分段控件中文本的对齐方式。如果你给分段控件添加了自定义底图,请确保控件里自动居中的文本依然清晰美观。...当文本框里没有任何其它提示文字时,会展示占位符文本(placeholder text),如名字、地址等。 根据输入内容的类型来指定不同的键盘类型。

    13.2K30

    一种精准monkey测试的方法

    问题背景 Monkey测试:是Android自动化测试的一种手段,简单的说是像猴子一样乱点,它向系统发送伪随机的用户事件流(如按键输入、触摸屏输入、手势输入等),是一种随机性测试,为了测试软件的健壮性和稳定性...通过观察一段时间的执行过程,发现由于我们app几个页面控件布局是比较偏上和偏下边缘,中间只有一个大按钮,这样中间大按钮命中率比较高经常会进入同一个页面,那么其他页面和按钮的功能几乎没有被点击到。...举例,下图是执行过程中的几张连续截图: [4.jpg] [5.jpg] [6.jpg] →→ 图中,红点位置就是点击位置,很直观的展示了执行过程。...总结 本文所述的方案很好的解决了monkey测试在控件布局不均衡的app上执行有效性低的问题。...同时,实现了一种自适应的随机测试手段,也就是无需针对不同app编写不同的随机测试脚本,实现了一套测试代码用于所有app的随机性测试。

    93010

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

    添加联系人按钮 用户可以点击“添加联系人”按钮来浏览现有联系人列表,并选择一个要插入到文本字段或其他视图中的联系人。...从视觉上看,这些点总是等距的,如果在屏幕上出现太多,则这些点将被裁剪。用户可以点击页面控件的前端或后端来访问下一页或上一页,但是他们不能点击特定的点来转到特定的页面。...“更多”按钮可以与大多数界面很好地集成在一起,用户也能够理解点击它可以访问其他功能。通常的样式是三个点放在圆形按钮中来表示“更多”。或者,您可以通过在现有按钮上执行特定手势来让人们显示菜单。...分段控件通常用于显示不同的视图。 限制段的数量以提高可用性。越宽的段越容易点击。在iPhone上,分段控件应该控制在5个或5个以下。 尽量让段内容大小一致。...若有“清除”按钮,点击它便会立即清空文本字段的内容,避免一直点击删除。 适当时候,使用安全文本字段。若需要输入的是敏感数据(如密码)时,请始终使用安全提示类的文本字段。

    8.6K30
    领券