文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

文章索引 4.1.1 状态栏 4.1.2 导航栏 4.1.3 工具栏 4.1.4 工具栏与导航标准按钮 4.1.5 标签栏 4.1.6 标签栏标准图标 4.1.7 搜索栏 4.1.8 范围栏 4.2.1...API注释 想要了解如何在代码中定义搜索栏，请参考UISearchBar.想要了解更多如何显示搜索栏，请参考UISearchDisplayController....占位符文本通常会写明控件的功能（比如上图里的 “Search”字样），或者提示用户输入的文本将在哪里搜索（如“Google”）。 书签按钮(The Bookmarks button)。...结果列表图标(The results list icon)。结果图标说明此次搜索有搜出结果。当用户点击它时会出现用户最近一次搜索的搜索结果。 ? 提示(Prompt)。描述性标题，我们称之为提示。...4.1.8 范围栏 范围栏只有在与搜索栏一起时才会出现，它让用户可以定义搜索结果的范围。 API注释 想要了解如何在代码中定义搜索栏与范围栏，请参考UISearchBar.

10.1K51

在 jQuery Mobile 中使用 UI 组件

- 属性，如 data-position，它可以设置工具栏的位置行为。...该属性的默认值是 inline，但您也可以将它的值设置为 fixed，以便将工具栏（如，页眉）保持在一个特定的位置，即使在 Web 页面滚动时，工具栏的位置也不变。...利用 jQuery Mobile，您可以创建多种不同的列表格式，如基本链接列表、嵌套列表、编号列表、拆分按钮列表、带分隔符的列表、带图标的列表、缩略图或计数泡泡，以及包括搜索筛选器栏的列表。...该列表项还包括一个用作在对话框中购买该列表项的一个超链接的图标。您也可以使用 data-split-icon 属性，修改显示在列表项右侧的拆分按钮的默认图标。 另一个有用的基本列表增强是列表分隔符。...在这种情况下，您就会有一个长列表，它看起来几乎是无法使用的，而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运，使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。

8.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】课程网站头部制作 ③ ( 搜索栏表单测量 | 搜索栏表单代码编写 | 代码示例 )

    文章目录 一、搜索栏表单测量 1、左侧边界 2、文本输入框表单尺寸 3、文本输入框表单提示文本测量 二、搜索栏表单代码编写 1、HTML 标签结构 2、CSS 样式 3、输入表单效果 一、搜索栏表单测量...---- 1、左侧边界 搜索栏 , 大概结构如下 , 左侧是个文本框 , 右侧是个按钮 ; 导航栏文本 有 10 像素内边距 , 20 像素外边距 , 文本输入框 表单 , 距离 导航栏外边距有...; 二、搜索栏表单代码编写 ---- 1、HTML 标签结构 搜索栏的盒子模型如下 : <!...: left; /* 设置左外边距 65 像素 */ margin-left: 65px; } /* 搜索栏 输入框 */ .search input { /* 设置左浮动 , 方便与右侧的按钮进行排列...{ /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search

    1.9K30

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

    一、搜索栏样式及核心要点 1、实现效果 上一篇博客中 , 完成了顶部提示栏 , 本篇博客开始完成下面的 搜索栏布局 ; 2、自动伸缩搜索栏实现 在上面的基础上 , 如果 缩小浏览器的宽度 , 搜索栏也会跟着缩小...; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素 浏览器拉倒最小 该布局的宽度不低于 320 像素 */ min-width...像素 , 如果设置成半圆形的圆角 , 左侧的半圆需要设置 左上角和左下角 圆角半径为 15 像素 , 右侧半圆需要设置 右上角和右下角 圆角半径为 15 像素 ; 总的高度是 44 像素 , 搜索栏的盒子高度...30 像素 , 设置该高度后 , 需要设置 7 像素的 上边距 , 使得该搜索栏可以垂直居中 ; 如果为中间搜索栏盒子设置一个 7 像素的外边距 , 会导致外边距塌陷 , 将左右两侧的按钮都带下来 ;...; /* 防止外边距塌陷进行的设置 */ overflow: hidden; /* 搜索栏宽度充满全屏 */ width: 100%; /* 搜索栏的高度为 44

    2K30

    6详解AppBar小部件

    AppBar 应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮，或者只是页面标题。...由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...), Flutter AppBar 中心标题 actions actions是与 AppBar 右侧对齐的小部件列表。我们通常在用作按钮的应用程序中看到它们来触发下拉菜单、个人资料头像等。...工具栏高度和不透明度 最后，我们有工具栏属性。工具栏包含文字，图标，按钮，和其他任何公司的前景，除了小部件，如Container和Image。...的布局和添加小部件 如何为 AppBar 的图标、文本、背景、高度、阴影颜色和工具栏设置主题 所以我们有了！

    16.4K10

    zblog明信片主题类型模板全新绽放，R角、透明、森系您想要的我都有

    （支持ZBP1.6），主题启用之后开始设置相关的内容，如果您想知道如何在导航栏开启二级菜单、导航栏图标怎么设置亦或者怎么开启伪静态都可以参考此教程：Z-blogPHP常见问题答疑（最新整理），基本您想知道的...主题侧栏调用方案： 首页调用默认侧栏，分类列表及其他（搜索、标签等）调用侧栏2，文章页调用侧栏3，手机移动端导航调用侧栏5。...但是也有缺点，就是在搜索快照下显示占位图片，不显示文章缩略图，因为快照下不会加载js，所以只能显示占位图片。...2020/11/20 -- 优化首页友情链接副标题文字过多错乱的问题。 -- 修复文章右侧侧栏会员没有加V的问题。 2020/11/05 --优化单页模板编辑文章时链接出错的问题。...-- 优化icon图标代码，由奥森改为阿里图标库。

    1.7K20

    mfc可视化界面_mfc界面开发

    由于搜索框现在可以位于框架上，因此您可以为non-Ribbon-based的应用程序启用它（启用框架标题栏的基于工具栏/菜单的应用程序）。...对于这种应用程序，框架会扫描所有工具栏和菜单栏以寻找最佳匹配，并在下拉菜单中显示搜索结果。...CBCGPribbonEdit：新的虚拟方法 OnDrawIcon 允许在搜索模式下绘制自定义图标。 5. Ribbon Designer：添加了以下新属性 组合框中下拉列表的高度。...滑块控件的扩展（右侧）文本。 命令搜索选项。 工具栏和菜单 1. 改进了某些可视化主题中禁用的组合框外观。 2....如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

    3.7K20

    提升UI产品体验的14个细节！你都知道吗？

    （彩云注：下面2个案例中，左侧的“购物车”和“库存2”太过于术语化，右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。...图片03给选项加图标使用图标、动画作为标签，有助于更轻松地理解内容，它使界面看起来更加理性和丰富，能瞬间抓住用户的眼球。...（彩云注：左侧的导航相较于右边，很难第一时间准确识别它的意思，增加图标后不仅更快看清，视觉上也更加美观。）图片04大段内容要拆分大段的长句会让内容变得难以阅读。...线上购物，表单填写，申请流程等场景使用这种格式能很好的简化流程。（彩云注：左边的表单UI不方便跟踪进度和流程，右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。）...图片14搜索中的占位符要用好在搜索输入栏添加适当的占位符，提示用户可以在平台上搜索和找到的内容，这样可以提供用户参考并带来更好的用户体验。

    78620

    B端产品设计规范

    图标现在是制作完成后，上传到阿里巴巴的字体图标库中。前端调用起来更方便，调整图标的大小和颜色就好。 图标尺寸的思考： 在制作图标时，尺寸以偶数尺寸为准。...按钮 按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。 后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。如下图所示。 表单 常见表单是由多个列表项构成的。...- 标题栏：标题栏栏高为56PX - 内容栏：准栏高为56PX，大栏高为80px，内容区和栏水平居中对齐 - 垂直对齐方式： 右对齐：金额、最右侧操作列。...左对齐：除金额、最右侧操作列外其他的表格数据；如下图所示。 -水平对齐方式，如下图所示。...下图展示的是：一个经典的设计布局，上方是搜索功能区，右侧是筛选功能区，画布区是地图的路线等展示。 内容清晰，如下图所示。 不让用户带着疑惑看图是我们始终不变的追求。

    4.4K46

    zblog明信片主题类型模板全新绽放，R角、透明、森系您想要的我都有

    （支持ZBP1.6），主题启用之后开始设置相关的内容，如果您想知道如何在导航栏开启二级菜单、导航栏图标怎么设置亦或者怎么开启伪静态都可以参考此教程：Z-blogPHP常见问题答疑（最新整理），基本您想知道的...主题侧栏调用方案： 首页调用默认侧栏，分类列表及其他（搜索、标签等）调用侧栏2，文章页调用侧栏3，手机移动端导航调用侧栏5。...-- 优化文章编辑器右侧跟随效果，减少部分模块遮挡问题。 -- 新增搜索页静态化代码，功能开关-搜索页伪静态，开启。 V2.1.9（2021/01/04） -- 新增网页背景色接口。...2021/08/04 -- 优化侧栏随机调用文章模块在部分情况下调用为空的BUG。 -- 优化夜间模式搜索框内字体颜色看不清的问题。 -- 优化整体页面细节及样式代码。...2021/07/02 -- 修复用户中心兼容收藏按钮没有样式的问题。 -- 修复右侧侧栏评论模块表情留言图片过大的问题。 -- 优化右侧夜间模式按钮图标。 -- 优化夜间模式兼容代码。

    1.9K20

    为未来的SaaS应用提供新的交互及视觉设计

    在说如改何良设计之前，有一些设计问题需要先提出来： 布局：考虑新的趋势、习惯、多平台多设备 产品工作流程（workflow）：The less time it takes, the more UX points...原因： 宽屏趋势下，更多的横向空间，有放置左侧导航的位置，且容易触控； 节省垂直空间，以便主体内容更好的利用 在侧边栏可以放置更多的菜单项（可上下滑动） 三栏布局 三栏的布局是目前侧边导航的扩展，在第二栏展示项目列表...，在右侧内容区展示在第二栏中选中的列表项的详细内容 ?...让表单更有趣味性 让表单填写更加容易，交互更容易识别——设计自定义表单控件，以下是我们个性化设计的表单控件： 下拉搜索菜单、下拉菜单加入添加操作（直接在下拉菜单中添加选项，免去跳到其他页面编辑添加）、下拉菜单项分组...我们通过调整表单区的色彩和焦点，呈现更加舒适的视觉体验。 ? 右侧栏 利用屏幕右侧多出的空间放置与正文内容相关的操作 ?

    2K120

    浏览器用户脚本—打造自己的专属页面

    我写了一个简单的示例脚本，用于在www.qq.com 页面的logo处增加小企鹅的图标，可以直接点击https://greasyfork.org/scripts/373384-addpenguin/code...author 作者 match 匹配的页面URL，即脚本可以生效运行的页面地址 grant 脚本需要获得的权限，如unsafeWindow等 修改页面样式 下面以修改百度搜索结果的页面为例，简单写个...[百度默认搜索结果页面] 如上图，百度默认搜索页面上会有搜索热点的推荐，这很容易将注意力引导过去而忘了真正要搜索的事情，所以就想把右侧边栏给隐藏掉。...，可以看到右侧边栏已经隐藏掉了。...[隐藏右侧边栏] 监听ajax请求 如果只有上面那么多代码会有一个问题，通过点击顶部“百度一下”按钮再次搜索时，右侧边栏又出现了！

    5.4K40

    移动端搜索，那些你可能不知道的设计巧思

    写在搜索前－搜索怎么放 1、搜索图标：在导航栏一侧或其他位置放置，根据用户场景和重要级需求决定。一般搜索图标放在右侧，当右侧有两个及以上按钮时，考虑平铺或折叠。...2、搜索栏：以搜索栏的形式直接放在导航栏或放在导航栏下方等其他位置，此时搜索栏可结合语音、拍照、删除（在输入后显示）等功能按钮。...3、搜索作为标签栏中的某一个功能：根据内容重要性决定排在第几个标签中。 4、搜索以单独页面或主页 P0 功能展现：直接作为主页面或主页以较大篇幅显示搜索栏，内容及形式根据用户场景定义。...（见图二） 我是图二 2.以图标形式展现的搜索功能，当用户点击时，或以动效形式出现搜索框，或直接至单独的搜索页面。当然，搜索框的形式展现时，点击行为也会触发至一个新的页面。...（见图 7） 我是图七 有时候用户对于搜索结果并不满意，我们可以在页面上做结果页展示的补偿方案：如让用户进一步明确搜索词，缩小搜索范围，如通过分类和筛选功能。

    1.1K50

    替代 Windows 10 任务栏搜索框，让搜索更方便！

    Everything 是一款优秀的文件名搜索工具，它可以非常非常快速的帮你找到想要的文件，只需要搜索文件名即可。...EverythingToolbar 则是一款适用于 Windows 10 的搜索框工具，它能够直接在任务栏使用 Everything 搜索，非常方便。...解压缩后，运行 install.cmd，就完成了安装，然后就可以在任务栏右键，依次选择 工具栏 > Everything Toolbar 即可。如没有这个选项，多试几次即可，或者刷新一下。...注意事项： 初次让Everything Toolbar显示在任务栏它默认会显示在靠近通知区域的左侧（右侧），并只有一个搜索图标（放大镜），取消锁定任务栏（右键点击任务栏，取消勾选锁定任务栏），拖动图标前面将它拉长即可显示搜索框...我们可以通过拖动还可以让它显示在靠近开始菜单的位置。 显示搜索框在搜索框上点击右键，可以选择匹配方式，默认不匹配路径、大小写等，在这里还可以开启正则表达式搜索，更改搜索结果的排序方式。

    2.1K20

    【CSS】课程网站头部制作 ④ ( 搜索栏按钮测量 | 搜索栏按钮代码编写 | 代码示例 )

    文章目录 一、搜索栏按钮测量 1、按钮测量 2、按钮切图 二、搜索栏按钮代码编写 1、HTML 标签结构 2、CSS 样式 3、展示效果 一、搜索栏按钮测量 ---- 1、按钮测量 右侧的按钮大小...所用格式 " , 选择导出的格式 , 以及 切好的图片如下 : 二、搜索栏按钮代码编写 ---- 1、HTML 标签结构 核心代码 : 搜索栏盒子 --> 搜索栏盒子 中 , 与 Input 表单放置在一行 , 并且二者之间没有缝隙 , 默认的行内块元素之间会有一条无法控制的缝隙 ; 最后 , 设置按钮图片 , 按钮图片无法填充满 , 使用平铺样式 ,...{ /* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */ border-bottom: 2px solid #00a4ff; } /* 搜索栏盒子模型 */ .search

    2.3K70

    怎么看计算机的历史记录手机_科学计算器怎么查看历史记录

    如何删除地址栏里的记录? 简单的: 在桌面上蓝色的IE浏览器图标上点右键属性删除历史记录删除文件。...若是申请了3721中文网址，在IE地址栏里亦有3721搜索的股票代码、中文网址等，也可以在注册表编辑器中进行删除，只要选取HKEY_CURRENT_USER\Software\3721目录，再将InputCns...如何删除搜索记录? 要仔细看 第一种:自定义删除(即想删除哪条历史记录就删除哪条) 在百度搜索网页里的搜索栏中，点击鼠标左键两次，会出现以前搜索过的历史记录。...第二种:完全删除法 在桌面用鼠标右键点击IE图标，再点属性。选上面的内容按钮。再点下面的自动完成按钮。然后点击清除表单，就可以把以前的所有历史记录删掉。...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

    1.2K10

    Postman接口测试之0基础入门教程

    图2 3.安装好之后在扩展程序里面可以看到,点击详细信息,创建快捷方式 图3 4.快捷图标如下 图4 二、postman操作界面介绍 1.打开postman...针对请求中的wd:111111,进行修改 >将此地址复制到Postman的地址栏中，点击Params 搜索内容参数 >将wd对应的值“111111”，修改为“222222”，点击Send...请求的搜索内容变为“222222”的搜索结果 修改参数 5.验证接口请求 >验证返回的页面中包括指定的字符串：页面中包括“222222” >点击地址栏下面的Tests页卡，进入Tests...脚本编写页面 Tests脚本编写页面 >点击右侧的“Response body:Contains string”,脚本编辑框中会显示出验证的具体脚本：tests["Body matches...4.自行设置Content-Type: >HTTP的POST请求的参数，都是放在请求正文中的，只是根据Content-Type来判断请求正文的格式，那么我们同样可以在表单提交时，选择raw，然后自行设置

    61230

    实例|新手使用APICloud可视化开发商城APP

    下载地址：https://www.apicloud.com/studio3打开后创建项目：然后找到 pages/main/main.stml 页面文件，点击左上角的绿色图标，就可以从代码开发切换成可视化开发的界面了...高级组件中包括了带按钮功能的标题栏、计数器、列表、轮播图等等，样式和功能还是非常丰富的，直接拖拽到中间的画布区域就可以生成了，可以随心所欲的组合，还可以自由修改。...系统组件是将页面元素进行了最基本的抽象，而形成的搭建页面的所需的最简基础组件，是构建页面的最小单元，其中的组件都是最基础的小功能，比如 input 输入框、text 显示文本信息，form 表单等等。...之后开始进行商城主页的搭建，我们来设想一下大致的布局，首先要有一个首页的顶部导航栏，然后需要搜索按钮，搜索按钮下面需要一个轮播图组件，之后再下面就是商品分类和商品列表了。...首先我们在高级组件中搜索导航栏，找到一个简约风格的，拖入到中间的画布区域中从右侧属性设置栏可以修改导航栏的名字，我们就修改为 “商城首页”接下来需要一个搜索框钮来搜索商品，找到搜索组件，拖入到画布中，之后再找一个轮播图组件放到搜索框的下面在组件属性中可以设置轮播图想要播放的图片

    52920
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券