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

最新iOS设计规范二|7大应用架构

在上下文环境,使用动画和可交互性循序渐进地引导用户。要避免显示看起来像可交互屏幕截图。...设计一种能快速、轻松地获取内容信息结构。为你APP设计一个信息架构,在这个架构,只需要最少点击、最少滑动和最少页面数量便可以访问相应内容。 使用手势操作让页面切换流畅。...用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你APP。 使用导航贯穿层级结构。导航标题可以显示层级结构的当前位置,返回按钮可以轻松返回到上一位置。...使用 Tab Bar(标签)展示对应类别的内容或功能。使用标签显示对应类别的内容或功能。标签可让人们快速轻松地在不同类别之间切换。 在iPad,使用拆分视图而不是标签。...在适当时候提供去设置快捷方式。如果APP包含引导用户到“设置”文本,例如:“转到设置> MyApp>隐私>位置服务”,则会提供一个自动打开该位置按钮

2.5K20

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

视图所有类型有:控件(比如按钮和滑块)、内容视图(比如集合视图和表格视图),以及临时视图(警告提示和动作菜单)。 要在应用管理一组或者一系列视图,通常需要使用视图控制器。...但是,不同于计算机程序窗口,iOS窗口没有可见部分并且不能在屏幕被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器应用程序可以有不止一个窗口。...使用标签(Tab Bar)显示同类型内容或功能。标签很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处位置。想要了解更多内容,请查看Tab Bar....分段控件让用户在一屏内就可以查到不同分类内容,而不需要切换到其他屏幕。 工具(Toolbar)。尽管工具导航或标签相似,但是工具不具导航作用。...照片管理给分享按钮增加了边框,从其他解释性文本中区分出来。 ? 时钟在秒表和计时页面按钮增加背景来强调开始和暂停按钮,并且使按钮在易分散注意力内容容易点击。 ?

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

微信小程序自定义顶部导航并适配不同机型

前言在小程序,顶部导航是一个非常重要组件,它不仅可以方便用户进行页面切换,还可以提高用户体验。默认情况下,小程序顶部导航是由系统自动生成,我们只能修改一些基本样式,背景色、文字颜色等。...但是,如果想要实现更加复杂样式,自定义图标、自定义背景等,而且在不同手机屏幕导航高度和样式也可能有所不同。因此,我们需要自定义顶部导航,以满足我们设计需求和用户体验。...因此本篇博客将介绍如何在程序自定义顶部导航,并适配不同手机机型。正文内容一、为什么要自定义顶部导航?...在需要使用导航页面引入自定义导航组件。根据不同机型屏幕尺寸和分辨率,调整导航样式和布局。为导航添加交互功能,点击导航切换页面等。...自定义导航是小程序不可或缺一个组件,它能够为用户提供清晰页面结构和功能指引,提高用户体验和操作效率。在实现自定义导航时,需要考虑不同机型适配问题,确保导航在不同设备都能正常显示和使用。

1.1K82

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

如果需要的话,可以考虑在导航位置使用提示语(prompt)来告诉用户在当前屏幕他们可以做什么。提示语是一句出现在导航顶部短句。...举个例子,不要在同一个应用中使用不透明导航和半透明工具。在屏幕处于同一方向时,最好不要改变不同屏导航背景图片、颜色和透明度。 确保你自定义返回按钮外观与操作仍然像一个返回按钮。...当你这么做时候,请确保用户通过一个简单手势(比如一下轻击)即可重新唤起导航。 ? 4.1.3 工具 工具放置着用于操作当前屏幕各对象控件。 ? ?...如果需要在工具展示3个以上项目,可以使用图标。由于文本按钮通常会比图标占空间,所以用图标可以避免文字标题们挤在一起。 保证工具文字按钮之间有足够间距。...请注意,当搜索视图控制器包含在导航控制器里面的时候——比如在邮件应用(Mail)那样,当用户激活搜索时,搜索会自动上浮,平铺到原来导航位置

10.1K51

iOS开发常用之网络

该项目通过三种形式展示页面之间切换,比如导航多个选项卡切换,页面左右两端箭头指示切换,以及使用分段控件。...RMParallax - RMParallax是一个应用程序启动页引导开源项目,除了细微翻页视差效果,描述文本过渡也非常美观(版本新特性,导航页,引导页)。...ADo_GuideView - 转动用户引导页(模仿网易bobo)因为没有从应用程序包里抓到@ 3x图片,建议在iPhone5模拟器运行,保证效果〜(版本新特性,导航页,引导页)。...ABCIntroView - ABCIntroView是一个易于使用入门类,让你到达主屏幕之前介绍你应用程序(版本新特性,导航页,引导页)。...是额外附了详细开发教程如何在Swift制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。

23.5K10

导航还是侧?flutter 跨平台适配指南

导航优势与劣势: 优势: 明确导航导航栏位于屏幕顶部,提供了明确导航入口,用户可以直接点击按钮或标签切换页面。...平台设计规范:某些平台( iOS)倾向于使用导航作为主要导航方式,因此在遵循平台设计规范情况下,应优先考虑使用导航。 何时应该选择侧?...移动端使用:在大屏幕设备平板电脑和桌面电脑,侧可以提供更好用户体验,但在小屏幕移动设备手机),需慎重考虑。...在设计时,需要综合考虑应用功能复杂度、平台特性以及用户体验,以选择最合适导航方式。 Flutter 导航与侧实现 如何在 Flutter 实现导航?...} } 如何在 Flutter 实现侧

9010

超大触摸屏设计7大注意事项

需要注意是,设计师要确保用户在访问不同内容时,导航始终可用。 为你产品设计一个导航模式时,最好采用一般网站普遍使用导航模式,导航设置在屏幕上方或侧边。...当用户访问不同内容或页面时,也要确保导航不会消失。虽然主屏幕设计可能只包含了几个较大导航按钮,但其他屏幕最好使用传统导航格式,以便用户使用。 另外,在这些屏幕尽量减少基于键盘输入。...在较大屏幕,键盘可能会变得笨拙和缓慢,需要消耗用户额外体力。但是,如果你确实有基于键盘输入,请在导航设置一个键盘切换命令,这样用户就可以在需要时候轻松地显示和隐藏键盘。...按钮必须是显而易见,以便用户轻松触摸。使用一个小动画来将用户注意力吸引到到交互元素,或者是受欢迎用户选项。 由于屏幕大小原因,简化选项也非常重要。...7.设置明显交互按钮 5.jpg 此类设计需要向用户展示如何与屏幕交互,并不是每个用户都能马上理解如何在屏幕上进行操作。 建议使用诸如动画和按钮之类视觉提示来帮助引导用户完成整个过程。

1.4K70

探索 Flutter NavigationRail:使用详解

介绍 在 Flutter ,NavigationRail 是一个垂直导航组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间设备,平板电脑和桌面应用程序。...作用和特点: 导航功能: NavigationRail 允许用户直观地导航应用程序不同部分。通过点击导航选项,用户可以快速地切换到不同页面或执行其他导航操作。...垂直布局: NavigationRail 垂直布局使其在平板电脑和桌面应用程序尤其有用。在这些设备,垂直导航可以更有效地利用屏幕空间,并提供更直观用户体验。...以下是一个示例,演示如何在导航顶部添加一个按钮,并在底部添加一个文本标签: NavigationRail( leading: IconButton( icon: Icon(Icons.menu...与页面切换组件无缝集成: NavigationRail 可以与页面切换组件( PageView 或 IndexedStack)结合使用,以实现根据选定导航切换不同页面内容,从而提供丰富用户体验

14910

七个用户体验设计小秘诀,打造最舒服互动流程

用户不必考虑如何导航进行购买;这个元素会引导他们进行适当动作。 (5)当前位置沟通。 “我在哪里”是一个根本问题,用户需要一个答案才能有效地导航。未能指出当前位置是许多应用程序常见问题。...让我们看看一些例子 切换菜单 依靠菜单控件来简化移动界面(特别是在小屏幕)是很诱人。但是,隐藏这些菜单背后应用程序关键部分可能会损害使用。隐藏导航降低了参与度,减缓探索和迷惑人。 ?...虽然与切换菜单(右)界面看起来比具有分段控件界面(左)清晰,但后者已经获得了更多参与。图片:Luke Wroblewski) 以明显方式公开菜单选项增加了参与度和满意度。...标签 标签导航非常适合具有相对较少导航选项应用程序。该模式在iOS和Android都采用。...确保你应用程序可以轻松地(完全)在一个大屏幕iPhone 6或7)使用。 共同操作和导航绿色区域 将顶级菜单,常用控件和常用操作项目放在屏幕绿色区域中,用一个拇指就可以轻松地达到。 ?

2.4K60

Flutter 全局控制底部导航和自定义导航方法

例如,在平板电脑或大屏幕设备,使用自定义导航能够更好地利用屏幕空间,提供丰富导航和功能;而在手机端,底部导航可能符合用户使用习惯和操作方式。...丰富功能:自定义导航可以集成丰富功能和交互,侧边、抽屉式导航、手势操作等,提供更多导航和功能选择。...适用特定场景:自定义导航通常适用于一些特定场景或需要更多定制化应用,平板电脑、桌面应用等,能够更好地利用屏幕空间和提供丰富导航体验。...应用案例 在这个应用案例,我们将展示如何在一个 Flutter 应用实现全局控制导航,根据用户偏好动态切换底部导航和自定义导航。...在 build 方法,我们根据 _navigationType 值选择显示不同类型导航,并且在底部导航添加了一个浮动动作按钮,点击按钮可以切换导航类型。

10810

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

(Bars) ,可以告诉用户在APP当前在所在位置、能提供导航,还可能包含用于触发操作和传递信息按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...有时,导航右侧也会有一个控件,“编辑”或“完成”按钮,用于管理活动视图中内容。在拆分视图中,导航可能会显示在拆分视图单个窗格。...三、侧边(Sidbars) 侧边在iPhone使用较少,更多用在iPad。它提供了应用程序导航,在侧边中选择一项可以使人们导航到特定内容。例如,“邮件”显示所有邮箱列表。...为了使您界面具有可预测性,选择一个选项卡应始终影响直接连接到选项卡视图,而不影响屏幕其他位置视图。例如,在拆分视图左侧选择一个选项卡不应导致拆分视图右侧突然改变。...tips:了解选项卡和工具之间区别很重要,因为两种类型都出现在应用程序屏幕底部。标签可让人们在应用程序不同部分之间切换,例如“时钟”应用程序“警报”,“秒表”和“计时器”选项卡。

9.7K10

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

更具体一点来说,本文主要处理与系统 UI 出现视觉重叠问题。系统 UI 包括屏幕由系统提供所有 UI,例如导航和状态,另外它还包括诸如通知面板之类内容。...如果您控件出现在了这些区域内,就可能被系统 UI 遮盖。自然,我们可以使用 insets 区域来尝试解决视觉冲突,把视图从屏幕边缘向内移动到一个合适位置。...当系统设置为使用按钮导航模式时 (即上图例子所示),视觉冲突会更加明显,因为这时导航高度更大。...如上图所示,FAB 这时会靠下一些。 不要在代码硬编码上面提到值 (48dp / 16 dp),因为导航尺寸是会变动,请使用 insets 获取需要数值。...Android 10 带来了新手势导航模式,允许用户通过手势动作,而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动,相当于后退按钮 (Back)。

2.7K30

iPhone X 适配指南 (官方翻译版)

大多数使用标准系统提供UI元素(导航,表格和集合)应用程序会自动适应设备新外形。背景材料延伸到显示器边缘,并且UI元件被适当地插入和定位。...所有应用程序都应遵循UIKit定义安全区域和布局边距,这些区域可以根据设备和上下文进行适当填充。安全区域还可以防止内容覆盖状态导航,工具和标签。 注意状态高度。...请注意,当背景任务(录音和位置跟踪)处于活动状态时,iPhone X状态不会改变高度。 如果您应用程序目前隐藏状态,请重新考虑iPhone X决定。...手势 iPhone X显示屏使用屏幕边缘手势来访问主屏幕,应用程序切换器,通知中心和控制中心。 避免干扰系统范围屏幕边缘手势。人们依靠这些手势在每个应用程序工作。...您应用程序不能影响这些按钮,因此避免在键盘重复这些按钮造成混乱。请参阅自定义键盘。 资源 下载Photoshop和Sketch 资源 iPhone X UI设计模板。 原文链接

2.4K50

微信小程序(一)自定义导航和fixed失效及各机型兼容问题

这是我参与「掘金日新计划 · 6 月文挑战」第2天,点击查看活动详情 前言 相信掘友们应该或多或少都开发过微信小程序,微信小程序写法虽然和vue有很多类似的地方,但又有很多vue属性,在小程序没有类似的实现...,比如计算属性,watch 监听等; 因为小程序是附着在微信 app ,所以经常要处理一些安卓端和苹果端兼容,比如有些苹果机屏幕下方有安全区域,一些安卓机上点输入框输入完毕后点完成按钮键盘不能自动收回...目录: 微信小程序(一)自定义导航和fixed失效及各机型兼容问题 微信小程序(二)用 movable-view 实现左滑删除功能 微信小程序(三)实现类似Vue computed,watch 功能...微信小程序(四)绝对不可错过切换自定义菜单骚操作 微信小程序(五)不同机型输入框兼容问题(待更新) ... cover-view 组件使用 fixed 样式失效问题 背景 因项目需求,要开发一个自定义...(右上角胶囊按钮布局位置信息。

1.9K10

Windows 7 操作系统

通过单击地址不同位置,可以直接导航到这些位置。...4.对话框  对话框是Windows7用于与用户交互重要工具 和窗口相比:  a)对话框只能在屏幕移动,不能改变大小,也不能缩成任务图标。  b)窗口有菜单,对话框没有菜单。  ...5)设置屏幕保护程序  屏幕保护程序是指子啊开机状态下载一段时间内没有使用鼠标或键盘操作时,屏幕出现动画或图案。屏幕保护程序可以起到保护信息安全,延长显示器寿命作用。...(3)任务按钮:显示已打开程序或文档窗口缩略图,单击任务按钮可以快速地在这些程序之间进行切换。也可以在任务按钮右击,通过弹出快捷菜单对程序进行控制。  ...除了在对话框中选择屏幕任务栏位置外,将鼠标移到任务上边沿时,鼠标的指针将变为“”形状,此时,拖动鼠标就可以改变任务高度。

29730

Flutte部件目录-Material Components 顶

实现Material Design指南视觉,行为和运动丰富小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个在基本部件已经讲过。 BottomNavigationBar ? 底部导航可轻松浏览并在单次点击之间在顶层视图之间切换。...对于更大屏幕,侧面导航可能更适合。 底部导航通常与Scaffold结合使用,在Scaffold.bottomNavigationBar参数中提供它。 底部导航type会更改其条目的显示方式。...FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容以提升应用程序主要操作。...芯片代表小块复杂实体,联系人。 ? Tooltip 工具提示提供文本标签可帮助解释按钮或其他用户界面操作功能。

9.4K40

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

导航 导航出现在应用程序屏幕顶部状态下方,并可以通过一系列分层屏幕进行导航。当显示新屏幕时,通常标有前一屏幕标题后退按钮出现在左侧。...有时,导航右侧包含一个控件,编辑或完成按钮,用于管理活动视图中内容。在拆分视图中,导航可能会出现在拆分视图单个窗格。...导航是半透明,可能具有背景色调,并且可以配置为在屏幕键入屏幕时隐藏,发生手势或视图调整大小。 ? 考虑在显示全屏内容时暂时隐藏导航。当您想关注内容时,导航可能会分散注意力。...暂时隐藏酒吧,提供身临其境体验。查看全屏照片时,照片会隐藏导航和其他界面元素。如果您实现这种行为,让用户使用简单手势(轻按)来还原导航。...后退按钮总是执行单个操作 - 返回到上一个屏幕。如果您认为在没有当前屏幕完整路径情况下,人们可能会迷失方向,请考虑对应用程序层次结构进行展平。 给文本标题按钮足够空间。

2.8K30

C# WPF MVVM开发框架Caliburn.Micro Screens, Conductors 和 Composition⑦

如果在一个选项卡编辑C#代码文件,然后切换到包含XML文档选项卡,您会注意到工具图标会发生变化。...这些屏幕每一个都有自定义激活/停用逻辑,使其能够设置/拆除应用程序工具,以便它们根据活动屏幕提供适当图标。在简单场景,ScreenActivator通常与Screen是同一个类。...在像VS这样MDI风格应用程序,导体将管理在ScreenCollection成员之间切换活动屏幕。打开一个新文档会将其添加到屏幕集合并切换到活动屏幕。...注意,与前面的示例不同,我实际是将已执行项类型限制为IScreen。在这个示例并没有真正技术原因,但这接近于我在实际应用程序实际操作。...正如您从屏幕截图中看到,我选择按功能组织项目:客户、订单、设置等。在大多数项目中,我喜欢这样做,而不是按“技术”分组组织,视图和视图模型。

2.5K20

02-微信小程序目录结构及配置

UE编辑器来随便找个颜色window用于设置小程序状态导航条、标题、窗口背景色。...: default 默认样式 custom 自定义导航,只保留右上角胶囊按钮。...开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉Windows 客户端 3.0 及以上版本,为了给用户提供符合桌面软件使用体验,统一了小程序窗口导航,navigationStyle...tab 应用(客户端窗口底部或顶部有 tab 可以切换页面),可以通过 tabBar 配置 项指定 tab 表现,以及 tab 切换时显示对应页面。...tab 按数组顺序排序,每个项都是一个对象,其属性值如下:属性类型必填说明pagePathstring是页面路径,必须在 pages 先定义textstring是tab 按钮文字iconPathstring

38310

Linux Lite4.6内置了大量Linux功能(Reviews)

CPU性能模式插件xfce4 cpufreq插件现在作为一个选项包含在系统托盘。右键单击任务、面板、添加新项目、CPU频率监视器来选择它。右键单击它并将其移动到所需位置。...对于流行Linux桌面界面(Xfce,LXDE,MATE和Cinnamon),很常见一种设计方案是在屏幕底部放置功能齐全面板,并允许在面板和桌面上使用图标和快速启动程序。...在Linux Lite,Xfce面板具有一个预配置有两个桌面的虚拟工作区切换器小程序。您最多可以添加几十个小程序。 Xfce桌面上我最喜欢功能之一是右键可以访问在桌面上任何地方弹出完整菜单。...浏览桌面 面板最左角菜单按钮有两列显示。左列显示所有类别。右边较宽列显示所选类别所有选项。 搜索窗口将填充菜单窗口底部左半部分。右边是启动设置面板、锁定屏幕和注销面板按钮。...任务最右边有典型时钟读数、音量控制图标、Internet连接状态图标和工作区切换程序。任务中央显示最小化窗口和其他正在运行应用程序

3K30
领券