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

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

想要保证这样图形始终固定在状态栏后面,你可以用视图控制器(view controller)来让它固定滚动内容上一层,又或者可以用滚动视图(scrolling view)来保证图形固定在屏幕顶部。...有时候用户会觉得以列表呈现信息更容易阅读和理解,例如将文本信息放在滚动列表时候,用户阅读和处理起来会更为简单和高效。 让视图中项更容易选中。...相反,它大小应当恰好能承载当中内容,又能清楚地指向浮出层唤起出处。浮出层高度是不固定,因此你可以用它来承载一个很长项目列表。但一般来说,还是应当避免需要滚动浮出层才能开启一个任务。...分组表格视图中至少含有一列表,而每一至少包含一项内容。与平铺型不同,分组型表格没有索引。 ? 平铺型(Plain)。平铺型表格可被分为若干带标签段落,表格右侧可能会出现垂直表格索引。...Value 2布局,文本和副标题中间垂直间距会让用户专注于副标题第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。

10.1K51

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

当你需要展示一大用户并不熟悉选项,此种选择器可能不太适合。 尽可能让让用户在当前视图中使用选择器。不要让他们在使用选择器还要进入其它视图。...文本框 高度固定,包含圆角 当用户点击它,自动唤起输入键盘 可以包含系统提供按钮,书签按钮(Bookmarks) 可以展示多种文字样式(了解更多请参考 UITextView) 使用文本框来获取用户输入少量信息...如果你在警告框设计了太多按钮,它也许会导致警告框被强制滚动,这也是一个非常糟糕体验。 ? 提示 如果你需要在警告框给与用户超过2个选项,可以考虑使用操作列表来代替警告框。 正确地放置按钮。...设计文案可以遵循以下指南: 跟其它所有按钮一样,使用标题式大写,而且不需要标点符号 尽可能使用与警告文案直接相关动词或动词词组,”取消(Cancel)”,”查看全部(View All)”,”回复...避免让用户滚动操作列表。如果你操作列表存在过多按钮,用户必须要滚动才能看完所有操作。这样体验是可能让用户不安,因为他们要花更多时间来充分理解每个选项区别。

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

Material Design — 网格列表(Grid lists)

如果tiles文本需要足够突出以区分主要内容片段,请考虑使用不同容器,lists或cards,可优化文本显示与加快阅读理解。...Lists:针对阅读理解进行了优化,特别是在比较一包含多种数据类型数据。 Cards:用于格式不一致内容,例如带有可变长度标题照片或具有异质内容数据集,例如照片,视频和书籍混合集合。...包含主要操作和次要操作tiles Tiles操作 主要和次要内容上操作(播放,放大,删除或选择)都是即时操作,并且通常不会引发grid lists内选项子菜单(溢出操作)。...例如,一个grid list所有标题可能位于左下角,而另一个网格列表所有标题可能会放置在左上角。 ? 次要操作与文案位置 ---- 行为 滚动 grid lists通常只能垂直滚动。...要在整个网格列表中保持一致节奏,请截断过长文本内容。或者,增加grid大小,以便tiles可以容纳较长标题

3.5K120

【Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关将更改图标和文本。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

33.3K60

excel常用操作大全

当你放开鼠标左键,一切都变了。 如果您在原始证书编号后添加19,请在B1单元格写入:=A1 '13 ',然后按回车键。 2.如何在文件下拉窗口底部设置最近运行文件名数量?...打开“工具”,选择“选项”,然后选择“常规”,并在“最近使用文件列表”下文件编号输入框更改文件编号。如果菜单未显示最近使用文件名,请取消“最近使用文件列表”前复选框。...如果您可以定义一些常规数据(办公室人员列表),您经常需要使用这些数据作为将来自动填充序列,这难道不是一劳永逸吗?...选择区域后,选择“插入”\“名称”\“定义”,为区域命名,1,然后在公式中使用区域名称,“==SUM(1)”。...当我们在工作表输入数据,我们有时会在向下滚动记住每个列标题相对位置,尤其是当标题行消失时。此时,您可以将窗口分成几个部分,然后将标题部分保留在屏幕上,只滚动数据部分。

19.1K10

Flutter | 滚动组件,ListView,GridVIew等

滚动组件中有很多都支持 Sliver 延时构建模型, ListView,GridView ,但是也有不支持改模型 SingleChildScrollView 主轴和纵轴 在滚动组件坐标描述,...其实此属性本质上是决定可滚动组件初始滚动位置是在 头 还是在 尾 , false ,初始位置在头,反之则在 尾 primary:指是否使用 widget 树默认 PrimaryScrollController...组件; 典型,在一个懒加载列表,如果将列表包裹在 AutomaticKeepAlive ,在改了吧划出视口,他也不会被 GC 回收(垃圾回收),他会使用 KeepAliveNotification...当列表滚动到具体 index 位置,会调用该构建起构建列表项。...是异步执行完成回调 还有问题可以参考这篇文章 最终效果如下: 添加固定列表头 很多时候我们需要给列表添加一个固定表头,比如实现一个商品列表,就需要在列表添加一个 商品列表 标题 以往经验告诉我

8.4K20

【软件开发规范七】《Android UI设计规范》

编辑 ​编辑 靠近屏幕边缘,位置可适当错开。 ​编辑 菜单过长,需要显示滚动条。 ​编辑 菜单从当前选项固定位置展开,不要跟随点击位置改变。 ​...编辑 副标题(Subheaders) ​编辑 小标题列表或网格特殊瓦片,描述列表内容分类、排序等信息。 ​...编辑 滚动,如果列表较长,小标题固定在顶部,直到下一个小标题将它顶上去。 ​编辑 存在浮动按钮,小标题要让出位置,与文字对齐。 ​...手机端侧边抽屉距离屏幕右侧56dp。 ​编辑 侧边抽屉支持滚动。如果内容过长,设置和帮助反馈可以固定在底部。抽屉收起,会保留之前滚动位置。 ​...编辑 ​编辑 列表较短不需要滚动,设置和帮助反馈跟随在列表后面。 ​

4.9K20

Material Design —Tabs

左:默认app bar和固定tab bar    :延长app bar和固定tab bar    右:固定tab bar固定滚动内容顶部 ?...点击菜单“book”后tab bar ? 带有滚动标页码tab bar ? 选中tab bar 何时使用 例如,使用选项卡组织高级别的内容,以呈现报纸不同部分。...固定标签应该使用有限数量标签,并且一致放置将有助于肌肉记忆。 当有许多或可变数量选项卡,应使用可滚动选项卡。 ?...选择文字标签,请使用简短标题。 避免对内容进行交叉标签比较需要。 重要跨标签比较可能表明内容将从不同组织方式或展示方式获益,从而使内容更接近。 ?...当用户不需要直接比较选项卡标签,可滚动选项卡最适合用于浏览触摸界面上下文。 要在可滚动选项卡之间导航,请触摸选项卡或向左或向右滑动内容区域。

2.4K100

教你轻松做出像「饿了么」一样点餐界面

今天,知晓程序就来为大家讲解,如何在小程序中使用 sticky 方法,将页面元素固定在屏幕上。 关注「知晓程序」微信公众号,回复「开发」,获取小程序优化秘籍。 什么是 sticky 效果?...简单地说,sticky 就是标题「粘粘」效果,向下滑动跟着列表走、向上滑动到顶部将会固定在顶部。 ?...左侧列表页没什么好讲,无非就是按下某个类型,给上一个 checked 样式,然后改变 toView 值。 那么 toView 是什么呢?...但如果滑动右侧滚动条的话,左侧数据如何跟着变化呢? 假如不是小程序的话,应该很多人都知道怎么做——无非就是监听滚动条,判断滚动位置,然后根据区域去改变左侧选择。...一个简单、具有 sticky 效果商品列表页,以及分类跳转功能,就实现了。

92840

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表,顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...,直至高度缩为Toolbar高度并成为Toolbar背景色;向下滑动列表,Header部分逐渐显示。...关于CollapsingToolbarLayout属性在官网上可以查到,这里我只介绍案例我们常用几个属性:title标题,布局展开放大显示在图片底部,布局折叠缩小显示在Toolbar左侧。...,效果图中所示;contentScrim内容遮罩,上下滚动图片上面显示和隐藏遮罩色,Toolbar位置背景色;通常这样设置:app:contentScrim="?...当设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间交互行为,可以参考上一篇文章,这里我介绍一下本例几个新注意点。

2.4K60

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

相对于集合,文本信息展示在一个可滚动列表,浏览起来会更简单和有效。 谨慎进行动态布局变更。集合布局是可以随时更改。...在图像视图中,图像可以被拉伸、缩放、调整大小以适合或固定到特定位置。默认情况下,图像视图是不可进行交互。 ? 如果可能的话,请确保动画序列所有图像大小一致。...用户经常会在滚动使用非常大幅度动作,如此便会非常难以避免在同一屏幕对相邻滚动视图进行交互操作。...行以分组形式显示,上方可以出现页眉,下方则可以出现页脚。此样式列表至少包含一个,每个至少包含一行。分组列表一般不包含索引标记。 ? 插入分组。行以具有圆角显示,并从父视图边缘插入。...如果某行支持删除并且有助于提供清晰性,请将系统提供删除标题替换为自定义标题。 在用户做出选择给予相应反馈。用户在与列表进行交互,希望被点击列表可以突出显示。

8.4K31

HTML+CSS练习题【详解】

标题标签一行可以显示很多个 D. 随着标题标签数字增大(h1-h6),字体大小会逐级减小 在使用标签插入图像,说法正确是 () A. 标签只能设置 src 属性 B....工作写页面结构,经常使用无序列表 C. li标签可以当做容器,里边可以放其他标签 D. ul可以放li标签,也可以放其他标签 关于列表下列说法正确是() A....以上都正确 下列选项,说法不正确是() A. 当列表中有列表标题,我们可以使用自定义列表 B. 无序列表经常在导航结构应用 C....固定定位元素会跟随浏览器滚动条进行滚动 B. 绝对定位元素会参考设置了定位(非静态)父元素或者祖级元素进行定位对齐 C. 静态定位是元素默认定位方式,不需要设置 D....绝对定位元素会固定在页面某个位置, 不随着滚动滚动滚动 D. 绝对定位元素可以使用边偏移属性 固定定位元素位移参照物是( ) A. 自身原本位置 B. 参照浏览器可视区域 C.

20410

Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位新成员

具体使用场景是: 比如下面是 QQ 中分组列表滑动效果,名下有若干成员,标题在滑动中会进行吸附,而且在滑动到下一标题,上一标题会被滑出;同样,下滑展现也是如此。...,映射出 SliverMainAxisGroup 列表,每个 SliverMainAxisGroup 列表可以容纳若干个 Sliver 滑块,只要让标题通过 SliverPersistentHeader...有些场景下,我们期望交叉轴方向可以排若干个 Sliver 滑块,共同响应滚动,特别是像宽度充裕桌面端。 如下所示,左右三块 SliverList 水平排布,共同滑动。...其中通过 SliverConstrainedCrossAxis 可以指定某个滑块在水平方向固定尺寸;也可以通过 SliverCrossAxisExpanded 指定在水平方向尺寸占份,下面 tag1...解决场景是: 在交叉轴方向,需要摆放若干个滑块,这些滑块可以共同滚动。 ---- 4.

71420

Human Interface Guidelines ——Tables

Tables Human Interface Guidelines链接:Tables 一个table将数据显示为可滚动单列列表,这些列表可以分为多个部分或。  ...iOS两种table 样式 plain(使用较多) 行可以分为贴上标签sections,可选索引(通讯录右边ABCD...)可以沿着table右边纵向出现。...标题可以出现在section第一个项目之前,而页脚可以出现在最后一个项目之后。 grouped(一般用在“我”等不常更改页面) 行以形式显示,可以前面加标题,后面加页脚。...·保持内容新鲜 考虑定期更新您table内容以反映更新后数据,但不要更改用户滚动后所在位置。作为替代,可以将新内容添加到table开头或结尾,并让人们在准备好继续滚动。...·考虑为删除按钮使用自定义title 如果一行支持删除并且需要提供明确性,请将系统提供删除标题替换为自定义标题。 ·在进行选择提供反馈 当内容被点击,人们希望一行可以简短高亮。

1.2K30

Material Design — 提示框( Dialogs)

左:提示框内容    右:全屏提示框 可滚动内容例外 一些提示框内容需要滚动,例如铃声列表。 对于可滚动选项列表,提示标题固定在顶部。...这可保证了无论项目在列表什么位置,被选项与标题均保持可见。 否则,标题会随内容一起滚动离开视野。 内容滚动,操作始终保持原位。 提示框与底层父级材料是分开,不会随其滚动。 ?...例如,用户可以聆听多个铃声,但只能在触摸“ok”进行最终选择。 点击确认对话框“取消”,或按Android“后退”,取消操作,放弃所有更改并关闭对话框。 ?...全屏提示框可用于满足以下标准内容或任务: ·该提示框包含需要输入编辑器(IME)组件(选择器或form fields),例如键盘 ·当没有实时保存更改时 ·当app没有草稿功能(无法自动存到草稿...不要使用模糊动作来确认动作,:完成,确定或关闭。

5K101

Flutter开发-可滚动组件

List children = const [], }) 上面参数分为两:第一是可滚动组件公共参数,本章第一节已经介绍过,不再赘述;第二是ListView...在ListView,指定itemExtent比让子组件自己决定自身长度会更高效,这是因为指定itemExtent后,滚动系统可以提前知道列表长度,而无需每次构建子组件都去再计算一下,尤其是在滚动位置频繁变化时...当ListView在一个无边界(滚动方向上)容器,shrinkWrap必须为true。...当可滚动组件滚动,将列表项包裹在RepaintBoundary可以避免列表项重绘,但是当列表项重绘开销非常小(如一个颜色块,或者一个较短文本),不添加RepaintBoundary反而会更高效...当列表滚动到具体index位置,会调用该构建器构建列表项。 itemCount:列表数量,如果为null,则为无限列表

4.5K20

web前端基础知识总结

:设置字体(黑体,楷体等) Size:设置大小(属性值从1——7,从小到大) Color;字体颜色(值为十六进制颜色) (3) :设定显示在浏览器左上方标题内容 属性: Dir:文本显示方向...,在content里格式为星期,日 月 年  分 秒 GMT,用英文和数字 Page-enter 进入网页效果 Page-exit  退出网页效果 在content对应值为: 0:盒状收缩...: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动滚动而动) (5)、link: 页面默认链接颜色 (6)、alink: 鼠标正在单击链接颜色 (7)、vlink...Center:居中 Class:用一个名称来标记标题,标记名称指向在外部定义样式表 Id:为段落设置一个标记,将来可以在一个超链接明确引用这个标记,以便作为样式表选择器 Style:创建标题内容内联样式...hidden 隐藏超出层内容  scroll 不管是否超 出都会添加滚动条 auto 只有超出才会有滚动条 (6)、列表属性: List-style-type 设定引导列表项目类型 list-style-image

3.8K60

Web前端上万字知识总结

charset=gb2312;     Expires  定义网页有效期,在content里格式为星期,日 月 年 分 秒 GMT,用英文和数字     Page-enter 进入网页效果...URL)     (4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed,设为Fixed后图像不会随着滚动滚动而动)     (5)、link: 页面默认链接颜色     ...(禁用某个列表)    size    tabindex      multiple(列表多选项目) 14、表格   (1)、定义表格   属性:dir       lang       ...)          axis(用逗号分割目录名列表)    rowspan(单元格跨行个数)        Colspan(单元格跨列个数) headers(标题单元格列表)     nowrap(...隐藏超出层内容           scroll 不管是否超出都会添加滚动条     auto只有超出才会有滚动条     (6)、列表属性:       List-style-type 设定引导列表项目类型

3.7K100

前端节流(throttle)和防抖动(debounce)

通常,这类提交 button @click响应会给后端发送 api 请求,频繁点击意味着频繁请求(流量)——会给后端带来很大压力;此外,这些回调请求返回后,往往会在前端响应其他事件(刷新页面)...,滚动到底部了,数据正在加载,用户重复触发滚动到底部,这时就需要节流,没加载完之前,不会触发第二次  这里cb就是被执行回调函数,wait是设定时间间隔。...,由于算力不足导致页面颤动现象。...比较常见抖动场景是在自动索引搜索设计上;当我们在搜索框内输入不同索引,页面会频繁计算索引并渲染列表,以致产生抖动。...但事实上在这类场景里,有价值请求只会发生在用户停止输入后,通俗来说就是用户输入过程字符串不必当真。 Debounce 就是用来过滤输入过程无意义响应。

2.8K20
领券