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

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

一、导航(Navigation Bars) 导航出现在页面的顶部,位于状态下方,可以给一系列层级页面进行导航。当点击进入新页面时,其导航左侧会出现一个返回按钮,并带有前一页面的标题。...如果你APP也用到了这个功能,切记要让用户使用简单手势(如点按)来恢复导航导航标题 在导航中显示当前视图标题。在多数情况下,标题可以帮助人们了解他们在看什么。...使用搜索不是仅仅通过“搜索”文字来实现搜索。文字没有用户所期望标准搜索栏外观。 启用“清空”按钮。大多数搜索都包含一个删除关键词内容“清空”按钮。 适当时启用“取消”按钮。...搜索字段可以包含占位符文本,例如“搜索服装,鞋子和配饰”或仅“搜索”,以提醒要搜索上下文。带有适当标点符号简洁单行提示也可以直接出现在搜索上方,以提供指导。...考虑在搜索下方提供有用快捷方式和其他内容。使用搜索下方区域可帮助人们更快地获取内容。例如,Safari会在您点击搜索字段后立即显示您书签。选择一个即可直接进入,而无需输入任何搜索词。

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

开源世界大冒险 | 第 3 期:手摸手注册 GitHub 账号

导航 从左到右依次为: GitHub icon:点击后会跳转到主页 搜索:可以通过关键字搜索到相关项目 Pull Requests:点击跳转到你 Pull Request 列表 Issues:点击跳转到你...右侧推荐区 在右侧 Explore repositories 中,GitHub 会向你展示 3 个你可能感兴趣仓库。点击下方 Explore more 可以浏览更多仓库。 个人主页 ?...上方导航 导航部分从左到右依次是: Overview:概览,即当前截图页 Repositories:仓库 Projects:内建看板 Stars:你点击过 Star 项目 Followers:关注你的人...同时,你点过 Star 项目也会出现在 Starts 列表中,相当于进入了你收藏夹。 Fork:获得仓库副本 即「复刻仓库」。...公共仓库即开源项目,所有人都可以看到,私有仓库只有你自己和仓库协作者才能看见。

75920

sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

第1部分:画板和形状 ---- 为什么我要写这个教程 今年,我在旧金山举行大会上担任用户体验设计课程助教。...我在互联网上搜索了绝对初学者素描教程,但是没有提到任何覆盖所有基础知识没有提到Photoshop。所以我参加了一个研讨会,为学生们制作了这个教程。...本教程将教您Sketch 3绝对基础知识,无论您是否具有设计背景。第1部分(您现在正在阅读内容)侧重于画板和基本形状创建,第2部分介绍图层和文本样式,第3部分介绍符号和导出。让我们开始吧!...适合画布到屏幕 添加形状 现在您画板完全可见,让我们添加一个矩形。位于“插入”>“形状”>“矩形”中。 ? 矩形工具 我在画板顶部做了一个细条,就像移动应用程序中导航一样。 ?...删除边框 我们还可以更改边框上方部分填充。我使用#104F​​8A。您可以在吸管图标下方框中输入此数字。 ? 改变填充 请注意,如果单击填充窗口底部+号,则可以保存此颜色样本以供日后使用!

2.8K20

IDEATomcat 原理入门精讲:Tomcat 集成 IDEA,由传统方式延伸到热部署 Java EE 项目

---- 一、将 Tomcat 集成到 IDEA 中 1.1、进入 IDEA Tomcat 配置页面 上方导航点击“Run→Edit Configurations…”进入配置页面,如下图所示: ?...2.2、进行 Java EE 项目配置 在下方导航“Additional Libraries and Frameworks”中下滑找到“Web Application”并勾选,同时勾选下面“Create...2.6、对 Java EE 项目进行部署 这时,如果你足够细心,你可以发现地址地址信息为:http://localhost:8080/不是http://localhost:8080/index.jsp...对地址信息进行修改,修改为http://localhost:8080/index.jsp,可以看到仍然是刚才页面。这是为什么呢?我们将在下面的第 7 点为大家进行详细讲解。 ?...---- 我是白鹿,一个不懈奋斗程序猿。望本文能对你有所裨益,欢迎大家一键三连!若有其他问题、建议或者补充可以留言在文章下方,感谢大家支持!

1.3K41

iOS 图标图像 (官方翻译版)

它也出现在整个系统中,例如在设置和搜索结果中。 ? image.png 拥抱简约。找到一个单一元素,捕捉您应用程序本质,并以简单,独特形状表达该元素。谨慎地添加细节。...给它一个简单背景,所以它不会压倒附近其他应用程序图标。您不需要填写整个图标的内容。 只有当它们是必需品或标志一部分时才使用单词。应用程序名称显示在主屏幕下方图标下方。...image.png 标签图标大小 在纵向方向,标签图标显示在标题标题上方。在横向上,图标和标题并排出现。根据设备和方向,系统会显示常规或紧凑标签。您应用程式应包含两种尺寸自订标签图示。...提示 您可以使用文本不是图标来表示导航或工具项目。例如,日历在工具中使用“今天”,“日历”和“收件箱”。您还可以使用固定空格元素来提供导航和工具图标之间填充。 ?...相机导航和标签图标 拍摄照片或视频,或显示照片库。相机取消 ? 取消 关闭当前视图或结束编辑模式,不保存更改。取消 ? 撰写导航和标签图标 在编辑模式下打开新视图。撰写 ?

3.6K40

最新iOS设计规范十|5大拓展程序(Extensions)

不要复制系统提供键盘功能。在某些设备上,即使在使用自定义键盘时,“表情符号/地球”键和“听写”键也会自动出现在键盘下方。您应用程序不会影响这些键,因此请在键盘上重复输入,以免引起混淆。...考虑在您应用中提供键盘教程。人们已经习惯了标准键盘,学习新键盘需要花费时间。通过在您应用中(不是在键盘本身中)提供使用说明,使入门过程更容易。...自定义输入视图 自定义输入视图用自定义键盘替换了标准键盘,但仅在您应用程序中,不是在系统范围内。使用自定义输入视图可提供独特而有效数据输入方法。...除非您应用将文档存储在单个目录中,否则用户应导航到目录层次结构中特定目标。考虑提供一种添加新子目录方法。 不要提供自定义导航。您扩展程序将加载到已经包含导航模式视图中。...例如:在编辑视频时,你不会看到文本类操作按钮。在活动视图中,共享扩展显示在操作扩展上方。 ? 启用一个集中任务。扩展程序不是迷你应用程序。它执行与当前上下文有关范围狭窄任务。

3.1K10

Microsoft Edge有哪些你不知道却超级好用插件?(Microsoft Edge功能测评)

Edge浏览器特点是速度快、安全可靠、界面简洁美观等 个人感觉Edge默认打开浏览器界面并不是很好,上面经常推送一些新闻广告.   ...单击"设置"按钮 在打开页面中找到,设置"主页"选项. 就可以在里面设置主页了. 在浏览网页时,Edge浏览器工具非常简洁,只显示一些必要功能按钮,比如导航按钮、地址、标签页等。...这让用户可以更专注于网站内容,不会因为浏览器干扰分心。这点还是比较满意. 同时,Edge浏览器界面整体设计也让人感到非常简洁、自然。...二、一些Edge浏览器比较实用功能. 2.1 分屏浏览: 使用方法: Windows 11中Edge浏览器可以通过以下方式进行分屏: 使用键盘快捷键:(推荐) Windows+ ← //将当前页面在屏幕左侧分屏显示...页面上方最右侧(账户按钮右侧)"…“按钮,下拉菜单选择"网页捕获按钮”.

1.1K31

IDEATomcat 原理:如何将 Tomcat 集成到 IDEA?实现由传统部署延伸到热部署 Java EE 项目?

---- 一、将 Tomcat 集成到 IDEA 中 1.1、进入 IDEA Tomcat 配置页面 上方导航点击“Run→Edit Configurations…”进入配置页面,如下图所示:...1.4.1、检查主页面信息及服务器配置信息 点击“Application server”我们可以看到服务器信息已经加载,如下图所示: 再次点击“Configure…”进入服务器配置页面,左侧加减可以增删当前服务器...New→Project/Module”,如下图所示: 创建 Java 企业级项目,根据自身安装情况选择 SDK 以及 Server 版本,如下图所示: 2.2、进行 Java EE 项目配置 在下方导航...:http://localhost:8080/不是http://localhost:8080/index.jsp,如下图所示: 对地址信息进行修改,修改为http://localhost:8080...这是为什么呢?我们将在下面的第 7 点为大家进行详细讲解。

74731

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

然而有些交互可能导致应用某些视图被系统遮盖,导致用户无法看见或操作。本文正是为帮助您解决这个问题撰写——如何判断安全交互区域。 更具体一点来说,本文主要处理与系统 UI 出现视觉重叠问题。...系统 UI 包括屏幕上由系统提供所有 UI,例如导航和状态,另外它还包括诸如通知面板之类内容。...自 API 1 以来,它们就以各种形式存在着,并且每当系统 UI 重叠显示在您应用上方时,这个方法就会被调用。常见例子是下拉状态导航,或者弹出屏幕软键盘 (IME)。...Android 10 带来了新手势导航模式,允许用户通过手势动作,不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动,相当于后退按钮 (Back)。...在 Android 10 上,系统手势区域如下: △ 左/右侧后退操作区域宽 40dp,下方主屏操作区域高 60dp 如果您有需要滑动操作控件出现在了系统手势区域内,就可以使用对应数值来将这些控件挪开

2.8K30

微信早安推送教程

点击上方三条杠,点击创建/加入企业,选择全新创建企业。图片选择其他,填写企业名称、类型规模可随意选择,输入你昵称即可完成创建。图片 二、邀请对象加入你企业创建成功后,点击通讯录。...对象加入成功后,你进入企微app,点击下方导航中工作台,添加应用。图片搜索“早安提醒”,点击添加。图片设置成功后,返回主页面。点击消息,找到企业微信团队。...进入后,找到刚才添加早安提醒应用,点击管理应用,看看可见范围选项中是否已添加你对象。图片图片点击上方编辑,可以把早安提醒改成你自己想要名字。设置完成后,就可以开始设置推送内容啦。...三、设置推送内容1.返回主页,找到早安提醒应用。点击底部定制提醒,进入推送设置页面。2.选择新建推送。在这里可以设置自动推送时间、选择接收人、设置推送标题等信息。...接下来,点击下方初始化模板,初始化后,点击颜色标红行设置对应具体内容。图片设置完成后,点击保存数据。至此就大功告成啦,快去试试吧~最后最后,点击页面右上角飞机按钮,保存此二维码。

1.4K332

搜索引擎looka_Alook浏览器使用方法教程

然后重新启动浏览器(一定要完全退出再进) 进入付款网页 上方会显示 是否允许加载项,选择 在所有站点允许。这时候可能还需要再次重新启动浏览器进入付款页面 这时候你期待u盾密码输入框会出现。...我们在360安全浏览器截图扩展下拉菜单当中,选择点击将网页保存成图片功能选项,注意选择点击剪刀形状旁边三角形下拉菜单按钮。...目前打开360安全浏览器最下面,可以看到有一是360搜索推荐关键词一个栏目,可以看到最右侧功能选项设置里,可以打开或者关闭当前360搜索关键词信息提示,也就是360搜索关键词信息提示。...点击360安全浏览器最下面的,360搜索关键词左侧一个放大镜形象功能按钮,当前打开了360搜索主页。也就是360浏览器搜索关键词搜索引擎,360搜索主页和网址导航。...当前随机打开一个航空公司网站,看到当前主页网站下方显示了一个可信网站标志。可以尝试打开它看它显示是什么样内容? 在当前360安全浏览器搜索栏内,可以看见可信网站打开可信网站标识这个网址。

2.6K20

大屏时代生态变迁,看平板手机拇指热键与界面布局

在这种情况下,拇指热区也会相应地分为两部分,分别位于屏幕下方左右两侧,其中还会产生交集,屏幕上方广阔区域则是拇指在正常情况下难以触及。...与分体式Action Bar模式类似,位于屏幕底部、有可能导致误操作悬浮按钮同样体现着妥协初衷。不过毕竟单一按钮尺寸较小,不会像在系统导航上堆叠一层工具那样带来很大影响。...可以通过屏幕底部悬浮按钮触发更多功能,同时避免与Android系统导航产生大范围冲突。 此外,也可以尝试将控件放置在顶部,但使其能够响应某种作用于屏幕下方辅助交互形式。...例如,可以将Tab导航放在内容上方,但使其切换能够被内容区域左右滑动手势控制,这也是一种变相拇指友好模式。 ? Android“通讯录”是一个典型例子。...人们使用屏幕巨大手机,不代表他们有着巨人般手,手势应该围绕手指进行设计,不是围绕屏幕。 整体移动。界面中多数元素是静态,需要我们自己伸手触及。

2.3K10

Godot3游戏引擎入门之一:熟悉编辑器界面

Godot 默认打开是 3D 场景,可以通过上方菜单进行切换,我推荐使用快捷键: 2D场景 -> F1 , 3D 场景 -> F2 , Script 脚本窗口 -> F3 , Help 搜索帮助 -...另外,如果是 4K 高分辨率屏幕,当你迫不及待地添加一个 Node 节点,然后保存,运行,选择刚才保存场景,游戏开始,你会发现你窗口不会出现在屏幕正中央位置,而是右下方,看起来很不舒服,这是因为你没有开启...当然,我更建议直接使用相对应节点: Node2D 表示所有 2D 节点父节点, Spatial 为所有 3D 节点父节点, Control 为所有控件父节点。...同时,你会发现在场景下方多了一个菜单项: Texture Region 材质区域编辑区,这就是对应该节点底部操作面板,在后续文章中,介绍动画时候会经常用到这里编辑区和菜单。 ?...另外, Godot 非常贴心一点是,你随时可以按 F4 呼出帮助,然后搜索你想要了解 API ,查看相关属性和方法,这对新手来说,简单不要太爽啊! ? ?

1K30

灵感分享|10个优秀网站设计实例赏析及原型分享

网站首页采用了比较夸张圆形元素,页面中让文字构成圆环形状,围绕批萨,给用户创造出独特视觉奇观。为什么采用圆形元素呢?...从形状心理学角度来看,圆形和环形有着完整、和谐心理学特征,在很多不同场合,它常常会拿来传达爱情、能量意象。 06.Quay ? 在这里,极简网站设计从未如此美丽。...网站设计使用漂亮美食大图背景吸引用户,全屏式展示堪称完美。此外,采用汉堡包菜单按钮,设计抽屉式导航,可以大大节约网站空间。随着页面滚动,导航会自然移动到页面顶部固定。...网站在所有设备上都做到了很好自适应,大大提升了用户体验。 原型设计 怎么样?看完上面的10个网站设计实例后,是不是灵感十足?有了创意后,该如何做出心中网站呢?...Taste(Web,美食类) Taste是国外知名美食类网站,为人们提供丰富美食菜单,帮助人们更好享受美食带来快乐。网站采用图文结合排版方式,有固定顶部导航交互功能等。 ?

6.3K21

Human Interface Guidelines —— 导航(Navigation Bars)

Navigation Bars 位置 Navigation Bars显示在app屏幕顶部,位于status bar(状态下方,并可穿过一系列不同层级屏幕进行导航。 ...替代 在不需要导航时使用toolbar,或者需要多个控件来管理内容。 ---- 导航标题(Navigation Bar Titles) 考虑在navigation bar中显示当前视图标题。...在大多数情况下,标题可以帮助人们了解他们正在查看内容。 但是,如果导航标题看起来多余,则可以将标题处留空。 例如,由于第一行内容提供了所需所有上下文,因此Notes不会为当前笔记加标题。...尽管闹钟app具有tabbed layout,但大标题并不是必要,因为每个tab都具有明显、可识别的布局方式。  ---- 导航控件(Navigation Bar Controls) ?...·考虑在导航中使用segmented control来压平应用程序信息层次结构。

2.4K110

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

导航 导航出现在应用程序屏幕顶部状态下方,并可以通过一系列分层屏幕进行导航。当显示新屏幕时,通常标有前一屏幕标题后退按钮出现在左侧。...有时,导航右侧包含一个控件,如编辑或完成按钮,用于管理活动视图中内容。在拆分视图中,导航可能会出现在拆分视图单个窗格中。...在大多数情况下,标题可帮助人们了解他们正在查看内容。但是,如果导航标题似乎是多余,可以将标题留空。例如,Notes不会为当前注释标题,因为第一行内容提供了所需所有上下文。 ?...大标题 当您需要特别强调上下文时,请使用较大标题。在一些应用程序中,大标题大胆大胆文字可以帮助人们浏览和搜索。例如,在标签布局中,大标题可以帮助澄清活动选项卡,并在用户滚动到顶部时通知用户。...手机使用这种方法,音乐使用大标题来区分专辑,艺术家,播放列表和收音机等内容区域。当用户开始滚动内容时,大标题转换为标准标题。大标题在所有应用程序中都没有意义,不应与内容竞争。

2.8K30

Simple Control:无需Root为设备添加导航

首先需要说明是:这款应用是通过在应用上方绘制一层类似于导航样式来实现模拟导航功能,不是给设备添加一个原模原样导航。...当然,你如果问我"此导航"能否与原生导航所媲美,我说当然不能100%媲美原生导航啦,不过"此导航"还是有很多特性,不信的话可以跟随小苏来看看~   因为这个应用设置项非常详尽,所以小苏就不一个功能一个功能地介绍了...,所以在以下设置项介绍中小苏尽量会介绍得简洁一些(不然这篇又成长篇大论了)~   Simple Control可以在应用上方绘制一片类似于导航样式浮层,单击其上按键可以执行"返回/主页/最近任务...(呼出区域就是屏幕边缘粉色区域,仅在此应用设置界面才会显示,在其他状态下你是看不到屏幕边缘有粉色区域存在~)   Simple Control支持修改导航背景颜色/图标颜色/透明度,导航长度/...应用还支持自动隐藏导航特性,可设置点击导航按钮后延时自动隐藏和点击导航栏外部自动隐藏两种方式(自动隐藏和透明度可调这两个功能很贴心,因为导航会覆盖到屏幕边缘内容嘛)。

1.1K20

Material Design — 菜单(Menus)

分类 简单菜单(Simple Menus)用于手机和平板电脑 级联菜单(Cascading menus)用于pc 海拔 菜单出现在其他应用内元素上方。...左:应用操作太多时将会设置一个菜单    右:包含五个选项菜单 菜单标签 按钮或控件标签应该简洁准确地反映菜单内项目(如下图)。...理想情况下,嵌套层级都需要做显示,因为很难用嵌套多层子菜单进行导航。 ? 菜单项例子 不可用操作 将操作显示为不可用(如置灰)不是将其删除,让用户知道它们可以在正确条件下存在。...菜单位于触发菜单元素上方,且使得当前选择菜单项出现在触发出菜单顶部(如下图)。 ? 不要显示所选菜单项副本(如下图)。 ?...·简单菜单也应该应该显示在其触发元素上,不是下面(如下图)。 ? ·菜单宽度取决于字符串长度,在移动设备上定义为56dp单位倍数。

5.8K100

最佳实战|如何使用腾讯云微搭从0到1开发企业门户应用

步骤1:创建普通变量 为企业门户主页页面创建普通变量,用于接收点击导航Tab时返回数据模型 ID。单击上方变量,在当前页面创建一个普通变量命名为 getId,数据类型选择字符串。...创建模型变量 为应用场景详情页创建模型变量,使用主页导航 Tab 传递参数进行数据查询与渲染。...创建模型变量 为企业动态详情页创建模型变量,使用主页导航 Tab 传递参数进行数据查询与渲染。...动态列表页跳转详情页操作可复用该模块方法。 实现底部 Tab 跳转 由应用设计图可见,该应用存在三个页面需要在底部创建 Tab 组件,分别为应用主页、动态列表页以及企业联系页。...以主页为例,进入主页后,在左侧组件区选择 Tab 组件,该组件会自动固定到页面下方

2.6K82
领券