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

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

一般来说,当用户对整组值都比较熟悉的时候,可以使用选择器。由于当滑轮静止的时候,大部分的数值会被隐藏,最好是在用户对所有数值均有预期的情况下才使用选择器。...4.3.10 进度视图 进度视图展示了任务或进程的进度(下图是iOS默认邮件App的工具栏)。 ?...进度条(Bar).此样式比默认样式细,适合用在工具栏中。 ? 当一个任务存在明确的进程,可以使用进度条来给与用户反馈,尤其在需要明确告诉用户这个任务大约需要多少时间完成的时候。...4.3.18文本框 开关按钮展示了两个互斥的选项或状态。 ? API提示: 想要了解如何在代码中定义文本框,以及在文本框中支持图片和按钮,可以参考UITextField....一般来说,文本框的左侧用于表述文本框的含义,而右侧用于展示附加的功能,如书签。 合适的话,在文本框右侧加入清除按钮。

13.2K30

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

栏(Bars) 栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...避免使用模糊的术语,如加载或验证,因为它们通常不会增加任何价值。 进度条(Progress Bars) 进度条是一个从左到右填充的轨道,用以显示当前页面的任务进度。...当在导航栏或工具栏中使用时,进度栏应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。可以调整进度条的外观以匹配APP的设计。例如,您可以为轨道填充指定自定义色调或图像。...如果你需要工具栏或导航栏中使用类似功能,请改用按钮,并提供两个不同的图标来传达不同的状态。 避免在开关中添加说明标签。关于开关的打开或关闭,用户是很明确的。...若有“清除”按钮,点击它便会立即清空文本字段的内容,避免一直点击删除。 适当时候,使用安全文本字段。若需要输入的是敏感数据(如密码)时,请始终使用安全提示类的文本字段。

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

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

    (下图中显示的文本为占位符,非用户输入文本)。...占位符文本通常会写明控件的功能(比如上图里的 “Search”字样),或者提示用户输入的文本将在哪里搜索(如“Google”)。 书签按钮(The Bookmarks button)。...描述性标题是一个短而完整的句子,为搜索栏提供介绍或指引应用特定信息。 在你的应用中使用搜索栏让用户进行搜索。不要使用文本框,因为文本框的外观不符合用户对搜索的预期。...然而,更好的选择是优化您的搜索结果,让用户不需要使用范围栏对搜索结果进行筛选,便可以找到他们所需要的内容。...如果放大和缩小对于当前内容是有用的话,你可以支持用户通过捏或者双击来对当前视图进行缩放。而若是支持了缩放操作的话,你还应当根据用户当前的任务来设定在当前情景下允许缩放的最大值和最小值。

    10.1K51

    unity3d新手入门必备教程

    在场景视图中操作在场景视图的上方有一个包含布局模式选择的工具栏    工具栏    尽管现在的工具栏没有附着在场景视图窗口上,但是位于左侧的四个按钮可用来在场景视图中导航并操纵物体,中间的两个用来控制选中的物体轴心如何显示...Control-单击或右键在两个视图的分割线上单击,或者在任何视图的控制栏上。当鼠标变成一个分割线时,你可以单击并拖动鼠标来改变视图的大小。    ...一些值可以包含字符,例如文本网格中的 Text属性    测试属性当你的游戏处在播放模式 (Play Mode)中时,你可以在游戏物体的检视面板中修改它的属性。例如,你或许想试验不同的跳跃高度。...裁剪面(Clip Planes) 近裁剪面(Near)和远裁剪面 (Far Clip Pline)属性决定相机视渲染的开始和结束位置。这两个平面与相机的方向垂直并相对于相机的位置来确定。...使用正规化视口矩形非常容易的创建一个两玩家的分屏游戏效果。在创建了两个相机之后,改变玩家一的 Ymin为 0.5,玩家二的 Ymax为 0.5。

    6.4K10

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

    例如:按钮、开关、文本框和进度条,都属于典型的控件。 ---- iOS的6种栏(Bars) ?...有时,导航栏的右侧也会有一个控件,如“编辑”或“完成”按钮,用于管理活动视图中的内容。在拆分视图中,导航栏可能会显示在拆分视图的单个窗格中。...如果在导航栏中使用分段控件,务必仅在层次结构的顶层使用。并确保在较低的级别选择准确的返回按钮标题。 ? 二、搜索栏(Search Bars) 搜索栏允许人们通过在字段中键入文本来搜索大量值。...搜索栏的字段可以包含占位符文本,例如“搜索服装,鞋子和配饰”或仅“搜索”,以提醒要搜索的上下文。带有适当标点符号的简洁的单行提示也可以直接出现在搜索栏上方,以提供指导。...标签栏是拉平信息层次结构并同时提供对多个对等信息类别或模式的访问的一种好方法。 严格使用标签栏进行导航。不要使用标签栏按钮来启用操作。如果需要提供对当前视图中的元素起作用的控件,请改用工具栏。

    9.9K10

    安装包制作工具 SetupFactory使用2 API清单

    SetupFactory中可以通过其API控制很复杂的业务需求。   下图中展示了其内置的API种类与具体分类函数。...设置进度条控件的步长值,它将在 DlgProgressBar.Step 被调用时使用 62 DlgProgressBar.Step 通过在 DlgProgressBar.SetStep 操作中指定的步长数量来增加当前进度...这是显示在状态表上的文本 208 StatusDlg.SetTitle 设置内建状态对话框上的标题栏 209 StatusDlg.SetCancelled 设置内建状态对话框上取消按钮的已点击/未点击状态...返回指定 ASCII 代码的字符值 (十进制) 216 String.Compare 比较两个字符串 (区分大小写) 217 String.CompareFileVersions 比较两个文件的版本...此文本将显示在窗口的标题栏和任务栏 279 Window.Show 显示指定窗口

    2.3K40

    小程序界面设计指南

    反例示意: 用户本打算进行搜索,在进入页面时却被模态抽奖框打断,对于抽奖没有兴趣的用户是非常不友好的干扰,而即便有部分用户确实被“诱人”的抽奖活动所吸引,离开主流程去抽奖之后可能就遗忘了原本的目标,进而失去了对产品真正价值的利用和认识...例如图中,在用户搜索时,提供搜索历史快捷选项来帮助用户快速进行搜索,从而减少或避免不必要的键盘输入。...即深色导航能够看清白色文本,浅色导航能够看清黑色文本。 导航标签 可以给小程序添加两种样式的导航:顶部TAB标签+底部标签。 保持不同页面间导航样式统一。...加载反馈注意事项 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。 载入过程中,应保持动画效果 。无动画效果的加载很容易让人产生该界面已经卡死的错觉。...启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需自行开发。

    4.5K70

    Excel表格的35招必学秘技

    2.执行“视图→视面管理器”命令,打开“视面管理器”对话框,单击“添加”按钮,弹出“添加视面”对话框,输入一个名称(如“上报表”)后,单击“确定”按钮。   ...比如我们首先制作一张年度收支平衡表,然后将“E列”作为直方图中“预算内”月份的显示区,将“G列”则作为直方图中“超预算”的显示区。...我们可以利用“函数查询”,对目标数据进行精确定位,就像网页中的搜索引擎一样。   比如在如图17所示的表格中,从A1到F7的单元格中输入了多名同学的各科成绩。...在随即弹出的“函数参数”窗口中我们设置“Lookup_value”(指需要在数据表首列中搜索的值)为“C8”(即搜索我们在C8 单元格中填入的人名);“Table_array”(指数据搜索的范围)为“A2...如果你不希望剪贴板的图标出现在系统任务栏上或随时弹出来,只须清除掉“在任务栏上显示Office剪贴板的图标”和“复制时在任务栏附近显示状态”两个复选框上的选择。

    7.6K80

    【移动端网页布局】流式布局案例 ④ ( Banner 栏制作 | 固定定位 | 标准流 | 百分比宽度设置 )

    一、Banner 栏样式及核心要点 1、实现效果 在上一篇博客中 , 实现了 搜索栏 , 在本篇博客开始实现 搜索栏 下方的 Banner 栏 ; 2、核心要点分析 Banner 栏需要在 搜索栏的下方..., 搜索栏还需要保持 不管如何进行滚动 , 始终悬浮在最上方 ; 搜索栏 必须是同 固定定位 , 才能实现上述效果 ; 搜索栏 父容器 样式如下 : /* 下面是搜索栏样式 */ .search-wrap...: hidden; /* 搜索栏宽度充满全屏 */ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度...-- 搜索栏下方的主要内容 --> <!...*/ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素 浏览器拉倒最小 该布局的宽度不低于

    1.7K20

    【移动端网页布局】流式布局案例 ③ ( 实现搜索栏功能 | 伪元素选择器 | 子绝父相 | 外边距塌陷处理 | 二倍精灵图处理方案 )

    一、搜索栏样式及核心要点 1、实现效果 上一篇博客中 , 完成了顶部提示栏 , 本篇博客开始完成下面的 搜索栏布局 ; 2、自动伸缩搜索栏实现 在上面的基础上 , 如果 缩小浏览器的宽度 , 搜索栏也会跟着缩小..., 如果 拉长浏览器的宽度 , 搜索栏也会跟着拉长 ; 实现自动伸缩的效果 : HTML 标签结构如下 : 最外层的父容器 父容器内部两个半圆形的子容器 ; 中间部分可自动伸缩的子容器盒子 半圆子容器..., 为其 设置左右两侧的 margin 外边距值 ; css 样式实例 : .search-wrap { /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */...; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素 浏览器拉倒最小 该布局的宽度不低于 320 像素 */ min-width...30 像素 , 设置该高度后 , 需要设置 7 像素的 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个 7 像素的外边距 , 会导致外边距塌陷 , 将左右两侧的按钮都带下来 ;

    2K30

    Python | 爬虫抓取智联招聘(基础版)

    对于每个上班族来说,总要经历几次换工作,如何在网上挑到心仪的工作?如何提前为心仪工作的面试做准备?今天我们来抓取智联招聘的招聘信息,助你换工作成功!...打开智联招聘首页,选择北京地区,在搜索框输入"python工程师",点击"搜工作": 接下来跳转到搜索结果页面,按"F12"打开开发者工具,然后在"热门地区"栏选择"海淀",我们看一下地址栏: 由地址栏后半部分...,可以写到数据库中,但是本文选择了csv文件,以下为百度百科解释: 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据...纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。...要想找到理想工作,一定要对更多的职位进行筛选,那么我们抓取的数据量一定很大,几十页、几百页甚至几千页,那么我们要掌握抓取进度心里才能更加踏实啊,所以要加入进度条显示功能。

    1.2K10

    Python爬虫之五:抓取智联招聘基础版

    对于每个上班族来说,总要经历几次换工作,如何在网上挑到心仪的工作?如何提前为心仪工作的面试做准备?今天我们来抓取智联招聘的招聘信息,助你换工作成功!...接下来跳转到搜索结果页面,按"F12"打开开发者工具,然后在"热门地区"栏选择"海淀",我们看一下地址栏: ? 由地址栏后半部分searchresult.ashx?...,可以写到数据库中,但是本文选择了csv文件,以下为百度百科解释: 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据...纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。...要想找到理想工作,一定要对更多的职位进行筛选,那么我们抓取的数据量一定很大,几十页、几百页甚至几千页,那么我们要掌握抓取进度心里才能更加踏实啊,所以要加入进度条显示功能。

    98620

    Python爬虫抓取智联招聘(基础版)

    对于每个上班族来说,总要经历几次换工作,如何在网上挑到心仪的工作?如何提前为心仪工作的面试做准备?今天我们来抓取智联招聘的招聘信息,助你换工作成功!...接下来跳转到搜索结果页面,按"F12"打开开发者工具,然后在"热门地区"栏选择"海淀",我们看一下地址栏: ? 由地址栏后半部分searchresult.ashx?...,可以写到数据库中,但是本文选择了csv文件,以下为百度百科解释: 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据...纯文本意味着该文件是一个字符序列,不含必须像二进制数字那样被解读的数据。...要想找到理想工作,一定要对更多的职位进行筛选,那么我们抓取的数据量一定很大,几十页、几百页甚至几千页,那么我们要掌握抓取进度心里才能更加踏实啊,所以要加入进度条显示功能。

    1.2K30

    C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码

    FontAttributes 获取一个值,该值指示按钮文本的字体是粗体还是斜体. FontFamily 获取按钮文本的字体所属的字体. FontSize 获取或设置按钮文本的字体大小。...如:"ss" TextColor 设置显示文本的颜色 Time 设置默认选中的时间 示例代码:  6.Editor 一个文本编辑框...常用属性: 属性 值 Progress 设置进度条的加载进度..  1为满值 .5为50% 示例代码:  12.SearchBar 一个搜索栏...常用属性: 属性 值 CancelButtonColor 搜索栏颜色 Placeholder 搜索栏为空时的默认文本 SearchCommand 搜索命令 Text 搜索栏的文本值 SearchButtonPressed...搜索栏的搜索事件 示例代码:  搜索" SearchButtonPressed="SearchBar_SearchButtonPressed"/> 13.Slider

    1.8K90

    【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件

    这些组件不仅提供了常见的用户交互功能,还帮助开发者快速实现丰富的应用场景。无论是按钮、输入框,还是导航栏、列表等,这些基础组件的合理运用都能大大提升用户体验和开发效率。...本篇文章将深入探讨微信小程序的基础功能组件,详细介绍它们的特性、使用方法以及最佳实践。我们将结合实际案例,帮助你理解如何灵活运用这些组件,以满足不同的业务需求和用户期望。...常用的功能类组件有文本标签、图标、进度条、按钮、选择框、选择器等,每种功能组件都有其特定的属性与切样式。...布尔值 设置是否显示进度条从左到右的动画进度 active-mode...4.rich-text 组件的应用 在小程序中,rich-text 组件可以用来渲染富文本内容。下面是两个示例,其中一个是使用字符串渲染富文本,另一个是使用描述 Node 节点的对象来渲染富文本。

    11200

    一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景用例

    这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。 简单的这些元素主要用来设置元素尺寸,如容器大小,字体大小,内距,外距等等 。...否则,如果50%计算值小于500px,则50%将用作宽度的值,假设视口的宽度是 900px, 最终元素的宽度为 900px x 50% = 450px。...否则,如果50%计算值大于500px,则50%将用作宽度的值,假设视口的宽度是 1150px, 最终元素的宽度为 1150px x 50% = 575px。...如果视口足够大,我们可以根据视口的大小动态增加侧边栏宽度,这里我们可以使用max()函数为其设置最小宽度。...如果换做min(),那么就不能在小的视图中控制字体了。

    83021

    需要接口管理的你了解一下?

    这样模式下往往会出现两种情况:一种是往前端开发的进度往与服务端开发的进度不会完全同步,这就存在了一方等待另一方的情况,这多少会影响整体项目开发进度;另一种就是当前端对接不同的服务端人员所开发的接口,如果没有了统一的接口文档规范...为了解决这两个问题,本文将主要认识学习一下目前国内开源较火的接口管理平台 YApi,看如何使用它帮助我们提高开发效率和便捷对接口的管理。...下图是YApi 官方提供了使用 YApi 的工作流程,从这里可以简单了解下如何在日常开发中使用 YApi。 ?...用于接口数据的导入导出,便于接口数据的迁移归档。 对项目信息的基本设置,如环境地址,接口路径,Mock 设置等。 现在我们再来看下一个简单接口的页面展示内容: ?...高级Mock 一栏则是对接口模拟数据的设置,具体用法在后面会详细介绍。

    1.1K20

    MFC进度条同步问题

    为了说明该功能的实现原理,本例提供了一个范例程序prgsbar,它演示了在编辑视图里显示文本文件,在加载文本文件时,在界面的状态条中的进度指示器仿真显示文件的加载过程,当文本装载完毕后,进度条隐藏。...在隐藏/显示进度控制时尤其如此,这时候会出现两个问题:第一,因为进度指示器显示在状态栏的第一个窗格位置,所以如果进度条指示器显示时已经显示有状态信息,那么进度指示器和状态信息文本就会有冲突,相互干扰。...对于状态栏来说,SetWindowText函数的作用是设置状态栏第一个窗格的文本。...当应用程序不做任何事情时,MFC程序总是在这个位置显示资源串AFX_IDS_IDLEMESSAGE表示的文本,其缺省值为”就绪”,当然读者朋友们可以在当前项目的RC文件中任意修改这个值,不管怎样,在MFC..., cy);  CRect rc;  GetItemRect(0, &rc);  m_wndProgBar.MoveWindow(&rc,FALSE); } 根据pct的当前值对进程条进行设置

    1.1K10
    领券