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

最新iOS设计规范七|10大视觉规范(Visual Design)

iOS应用中,您可以配置界面元素和布局,以iPad上执行多任务处理时,拆分视图中,屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强界面在任何环境都提供出色体验非常重要。...你可以将APP设置为动态适应各种特征,包括: 不同设备屏幕尺寸,分辨率和色域(sRGB / P3) 不同设备方向(纵向/横向) 拆分视图 iPad多任务处理模式 动态类型文本大小更改 基于区域设置启用国际化功能...例如,如果您应用在纵向模式显示图像网格,则不必横向模式显示与列表相同图像。相反,它可能只是调整网格尺寸。尝试在所有情况保持可比体验。...您可能会发现在深色背景上深色文字难以辨认地方。您可能还会发现,“黑暗模式启用“增加对比度”导致黑暗文本和黑暗背景之间视觉对比度降低。...目标是全屏设备上播放视频内容时,默认情况是全屏模式(纵横填充)显示内容。但是,如果填充显示导致过多内容被裁剪,则应缩放视频以适合屏幕模式显示内容。

7.8K30

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

(设计规范虽如此,但实际上大家基本都在用广告,大型APP比如微信QQ会用自己品牌) 启动页采用适当方向。如果您应用同时支持纵向和横向模式,则应使用设备的当前方向启动。...如果使用当前上下文模式视图样式拆分视图窗格,弹出窗口或其他非全屏视图显示模式内容,则在紧凑环境中显示模式内容时,应切换为使用工作表。 模态设计规范如下: 模态要在合适时机使用。...极少数情况,当用户Popover中执行操作后需要用到模态视图时,请在显示模态视图之前先关闭Popover。 通常为模态任务设置一个标题。...五、导航(Navigation) 用户往往忽略APP导航,除非当某些操作达不到他们期望。我们任务是不会引起用户过度注意情况,让导航结构清晰、目的明确。...标签栏可让人们快速轻松地不同类别之间切换。 iPad上,使用拆分视图而不是标签栏。拆分视图提供与选项卡栏相同快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同多个页面时,请使用页面控件。

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

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

拆分视图中,导航栏可能显示拆分视图单个窗格中。导航栏是半透明,也可以添加背景色,并且必要时可以设置为隐藏。 ? 某些情况可暂时隐藏导航栏,以提供更沉浸体验。...但是,无边框样式标准标题导航栏中可能无法很好地起作用,因为该栏标题和按钮可能难以区分。iPad拆分视图是一个例外,更多是通过在这两种视图中使用无边框样式来保持主视图和辅助视图之间一致性。...有几种常见技术可以做到这一点: · APP中使用导航栏,该导航栏自动显示状态栏背景,并确保内容不会显示状态栏背后 · 状态栏背后显示自定义图像,如渐变色或纯色 · 状态栏背后放置模糊视图...为了使您界面具有可预测性,选择一个选项卡应始终影响直接连接到选项卡栏视图,而不影响屏幕上其他位置视图。例如,拆分视图左侧选择一个选项卡不应导致拆分视图右侧突然改变。...纵向方向上,标签栏标志符号可以显示标签标题上方;横向方向上,字形和标题可以并排出现。根据设备和方向,系统显示常规或紧凑标签栏。

9.8K10

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

严格控制警示框数量,有助于让用户更认真对待它。确保每个警示框都是提供关键信息和有用选择。 两个方向都要测试警示框。横向模式纵向模式,警示框可能会有所不同。...通过全屏模式视图显示信息而不是弹出窗口中来利用所有可用屏幕空间。 使用“关闭”按钮仅用于确认和指导。...在这种类型界面中,主要列显示侧边栏,可选补充列显示列表视图,辅助内容窗格显示有关所选内容详细信息。 iPad上,使用拆分视图而不是标签栏。...一般而言,表格是基于文本内容理想选择,并且通常作为导航视图显示拆分视图一侧,而相关内容显示另一侧。 表单分类 iOS有三种样式列表,平级、分组、插入分组。 平级。...因为紧凑环境中空间较小,所以插入分组表可能导致文本换行,尤其是在内容本地化时。 ? 设计规范 注意列表宽度。

8.3K31

XcodeXcode 9 全新功能您喜欢工具。内建 Interface BuilderXcode IDE

当您查看拆分编辑器视图时间线时,差异突出显示。Xcode 还可为新项目创建本地 Git 存储库,或签出托管 Subversion 或 Git 存储库。...例如,默认方案是运行时“Debug”(调试) 模式构建 app,执行 Profile (剖析) 或 Archive (归档) 命令时,将针对“Release”(释放) 构建相同方案设置。...Cocoa 和 Cocoa Touch 使用“模型-视图-控制器”模式构建,因此可以轻松地独立设计界面,不受实现方式限制。...image Storyboard 完整 iOS app 是由多个供用户导航视图组成。这些视图之间关系由 Storyboard 定义,Storyboard 显示 app 流完整视图。...预览 利用预览模式,您可在不同环境中快速查看界面,无需运行 app,从而大大加快了迭代设计过程。您可以纵向或横向模式以前版本 iOS 上、不同屏幕尺寸下等环境查看 app。

8.2K30

两个 viewports 故事-第二部分

平板设备如 ipad 以及传闻基于 webOs 惠普产品将缩小桌面与手机差距,但也无法改变最基本问题。因为网站也需要在移动端显示,所以我们必须让它们小屏幕上正常显示。...(如果变化了,你页面会用百分比宽度被重新计算) 理解布局视图 为了理解布局视图尺寸,我们应该看一页面被完全缩小后发生了什么。大多数手机浏览器默认以完全缩小模式显示页面。...关键一点是:布局视图缩小模式能够完全显示屏幕上。(此时视觉视图等于布局视图) ? 如下图,布局视图宽高与完全缩小模式宽高是相同。当用户放大后,这些尺寸仍然相同。 ?...这会对布局视图高度产生影响,纵向模式布局视图高度小于实际高度。但是网页开发者不关心高度,只关心宽度。 ? 测算布局视图 现在我们想要测算两个视图尺寸。...大多数浏览器会通过缩小来屏幕上显示整个布局视图,如下图效果 ? 所有的用户立即放大查看,但是大多数浏览器保持元素宽度不变,这使得文本很难阅读。 ?

1.7K70

如何在 macOS Monterey 中使用窗口管理?

就像鼠标靠近时可选隐藏和显示 Dock 一样,因此当您离开时菜单栏再次消失。 现在,就像使用 Dock 一样,您可以控制它。您可以“设置”、“显示”中设置一个选项,让菜单栏始终显示。...如果您在分屏浏览中有两个应用程序,因此每个应用程序都占据屏幕一半,您现在可以单击将其中一个改为全屏显示。当你这样做时,另一个应用程序也进入全屏模式。...如何使用拆分视图 选择一个应用程序,然后单击并按住绿色交通灯图标 从出现菜单中,选择Tile Window to Left of Screen或Right,您偏好 完成后,系统立即提示您选择另一个窗口以填满屏幕另一半...当您在拆分视图中有两个时,只有一个会有彩色交通灯图标。 但是您可以单击并按住另一个应用程序上灰色交通灯图标,它无论如何都会为您提供带有“替换平铺窗口”菜单。...然后另一个应用程序不同屏幕中进入全屏模式。 Apple 似乎并不承认 Spaces 和 Full Screen 或 Split View 是同一概念一部分。

3.2K10

MVPMVCMVVM

3.MVC有如下两种模式,不管哪种模式,MVC通信都是单向,由图也可以看出,View层从Model层拿数据,因此MVC中View层和Model层还是存在耦合。 ? ?...UI点击事件触发, 我们依然只能Command+R, 点点点… 缺点 经过上面的改造,MVC架构已经足够清晰了,按照应用场景(一般都是单页面)进行大拆分,然后根据业务拆分成小MVC。...暴露属性与View元素显示内容或者元素状态一一对应。一般情况ViewModel暴露属性建议是readOnly,至于为什么,我们实战中会去解释。...优点: 1.方便测试 MVC,Controller基本是无法测试,里面混杂了个各种逻辑,而且分散不同地方。...(以前做公司iPad时候就深深感觉到,全部VC里面是多么痛苦和重新开发一个没有啥区别)。 3.兼容MVC MVVM是MVC一个升级版,目前MVC也可以很快转换到MVVM这个模式

46220

对angular开发者建议,设计师也有

最近公司项目使用angular,与ionic开发企业级软件; 现在项目越来越庞大了,我是中途加入团队,现在有时候就实现一个简单需求,就要花费几天; 比如产品说:提交按钮时候,再去请求一个接口,校验一数据...每一个视图,对应自己控制器; 如果有公共逻辑,直接注入一个服务; 如果以后,哪一个视图逻辑需要修改,可以控制器里面改,或者修改服务; 如果修改服务影响其他视图,可以尝试新建服务; 对于视图,也是同样逻辑...视图都差不多,但是对里面的操作有些不一样,页面的显示也有不一样;软件初期就应该用不一样控制器分别对每一个页面进行控制; ------------------------------- 视图与模型 正确应该这样...显示是没有明确中间这个调和模型; 都是视图直接显示请求过来字段; 如果字段多,那么有些就不显示; 如果字段少,就加几个在外面,并没有加到模型里面; 导致修改时候,分不清哪些数据是后端来, 哪些是需要提交数据...但是不用注释代码,实际上越留越多; 建议:禁止无用代码注释文件里 5、多个开发者共同开发这个项目,没有统一命名规范; 下划线,驼峰,非下划线也非驼峰,中文拼音; 建议制定一个规范 6、代码不格式化

76960

用NavigationViewKit增强SwiftUI导航视图

有以下几个我不满意地方: •缺少直接返回根视图便捷手段•无法通过代码(不通过NavigationLink)跳转到新视图•双栏模式(DoubleColumnNavigationViewStyle)显示风格不统一...•iPad,无法竖屏(Portrait)模式保持双栏状态 因此,在这次开发准备阶段,我写了一个针对NavigationView扩展库——NavigationViewKit[3]。...当iPhone Max横屏时,NavigationView表现会同iPad一样双列显示,让应用程序不同iPhone上表现不一致。...当竖屏时,左侧栏默认隐藏,容易让新用户无所适从。 TipOnceDoubleColumnNavigationViewStyle会在iPad首次进入竖屏状态时,将左侧栏显示右侧栏上方,提醒使用者。...[5]中,我希望iPad版本无论横屏或竖屏时,都始终能够保持两栏显示状态,且左侧栏不可隐藏。

3.2K20

微信小程序性能优化总结

因此我们建议开发者开发时,如果遇到单包体积大于1.5M情况,可以采取分包方式,把部分代码拆分到分包去,降低单个包体积,提升小程序加载速度 引用插件大小超过 200 K:小程序插件大小是算进小程序代码包...,几十页甚至上百页情况,list数据越来越大,每次setData数据就会越来越多,因而每次页面重新渲染节点就会越来越多,从而导致滚动到后面,加载越来越慢。...另外,由于小程序视图渲染层和数据逻辑处理层是分开,不是同一个线程上面的,从用户触发页面交互,到处理数据逻辑,最后呈现页面,数据到视图是需要传输,因而小程序本身对数据大小也有限制,不能超过1M。...所以渲染页面时,不在视图范围内图片不要不加载,只有元素出现在视图范围内了才渲染。...要实现这一效果,我们可以通过 getBoundingClientRect() 获取元素位置,然后与页面滚动位置进行比较,如果出现在视图内就加载显示图片。

2K20

SwiftUI 4.0 全新导航系统

⚠️ 使用堆栈管理系统情况,请不要在编程式导航中混用声明式导航,这样破坏当前视图堆栈数据 下面的代码,如果点击声明式导航,将导致堆栈数据重置。...iPad Portrait 显示状态,默认即为此种模式 balanced 显示左侧栏时候,缩小右侧 Detail 栏尺寸。...iPad landscape 显示状态,默认即为此种模式 automatic 默认值,根据上下文自动调整外观样式 NavigationTitle 中添加菜单 使用新 navigationTitle...toolbar 背景色只有视图上滚时才会显示。...browser iPad ,当前视图 Title 将显示左侧 image-20220612190914949 editor 不显示返回按钮旁边上页视图 Title image-20220612191040190

10.2K62

最新iOS设计规范六|10大交互规范(User Interaction)

当用户看到类似于系统Touch ID(指纹)和Face ID图标时,他们认为应该进行身份验证。使用图标来标识身份验证功能产生不一致并导致混淆,尤其是当图标上色、以大尺寸显示并脱离上下文时。...、呼出在分屏视图控制器中隐藏视图列表中显示“删除”按钮、或者预览中呼出操作列表。...特别是当用户使用内置麦克风同时关闭iPadSmart Folio,结束通话至关重要。关闭Smart Folio自动使iPad麦克风静音,并且默认情况会中断与之关联音频会话。...触摸并按住所选内容使它看起来像上升并附着在用户手指上。拖动内容时,动画和视觉提示确定可能目的地。系统还会显示一个标志,指示何时无法删除,否则将导致复制内容而不是移动内容。 起始点和目的地 ?...适当时机自动滚动目标的内容。 提取并显示拖放内容最丰富表示形式。 如果适用,仅提取被放置内容相关部分。 内容被放置后,视图和集合视图显示占位符。

3.9K30

如何在flutter中构建响应式布局(第五节)

这也适用于像智能手表这样设备,它们屏幕空间很小,调整组件大小以适应屏幕大小可能导致奇怪 UI。 2. 替代布局 为了解决上述问题,您可以为不同尺寸设备使用替代布局。...例如,您可以平板电脑等设备中使用拆分视图来提供良好用户体验并明智地使用大屏幕空间。!... Android 中,要在单个屏幕上显示多个 UI 视图,您可以使用 Fragments,它们就像可以应用程序 Activity 内运行可重用组件。...让我们构建示例响应式应用程序时学习最后一个概念。 构建响应式应用程序 现在,我们将应用我在上一节中描述一些概念。除此之外,您还将学习构建大屏幕布局另一个重要概念:拆分视图。...MenuWidget和 拆分视图DestinationView。

2.7K10

Android-App性能优化

及时反馈,点击事件,滑动,系统事件 UI 这个涉及到android系统显示原理,我们简单了解一: Android 显示过程可以简单概括为:Android 应用程序把经过测量,布局、绘制后 surface...,系统进程交换当前显示背景窗口,将其替换为主活动。...集合类泄漏 单例/静态变量造成内存泄漏 匿名内部类/非静态内部类 资源未关闭造成内存泄漏 解决方式: 比如我们List集合add()元素之后,引用着集合元素对象,导致该集合中元素对象无法被回收...避免不合适时间(例如低电量情况、弱网络或者移动网络情况)执行过多任务消耗电量。这个我们以后说。...避免使用浮点数,浮点数比Android设备上整数慢约2倍。 尽可能少用wrap_content,wrap_content 增加布局 measure 时计算成本。 删除控件中无用属性。

2.1K40

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

如你所想,一个iOS设备竖屏模式可以使用一套类别,而横屏模式可以使用另一套类别。 iOS能随着尺寸类别和显示环境变化而自动生成不同布局。...下面的实例可以帮助你形象展现尺寸类型如何适配不同设备显示环境。例如:iPad(包括iPad Pro)长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad显示环境一直处于垂直和水平常规状态。...例如,如果你水平常规模式使用了网格来显示图像,那么无需压缩模式使用列表来展示同样内容,虽然你可能调整了网格尺寸。 如果你应用只一个方向上运行,那么请直接一点。...某些情况一个应用中结合多种导航类型会有很好效果。例如,对于扁平信息结构中某一分类内容,用分层导航方式来显示可能更好。...用户设置接收应用通知形式,确保遵重用户喜好设置,否则可能触怒用户,导致其关闭应用中所有的推送通知。

1.8K41

和安卓用户FaceTime,一个鼠标操作iPad和Mac!没有新硬件WWDC,就不行吗

通知可以显示联系人照片和更大应用程序图标,这在iOS 15以新过滤模式存在,称为焦点(Focus)。 不要小看了焦点作用,这可以使用户自定义不同活动中显示通知,并在所有设备上同步。...地图也有大幅更新,地图呈现商业区、建筑等更丰富细节,苹果为此设计了上百个新地标,加入了夜晚月光效果,高速路驾驶时,地图可以渲染出复杂立体道路情况。...也就是说,用户或能将它们放在任何地方,这是去年iOS 14鸽掉一项功能——尽管桌面空间很大,但小部件只能放置“今日视图”(Today View)侧栏中。 多任务处理也得到了一些改进。...新图标将使进入拆分视图模式变得更简单,苹果还提到了“架子”(shelf)功能,可以更轻松地“一心二用”。这是目前iPadOS上多任务处理方式重大变化,可以视为一项重大改进。...WWDC之前,一些用户愿望清单包括多用户支持、更高级文件应用程序、对外部显示更好支持以及Final Cut和Logic等专业级应用程序进入iPad

1.5K20

Qml开发中性能Tips(翻译文)

许多情况,图像不需要立即可见,因此它们可以是延迟加载。 如果不需要立即显示图像,则应在单独线程中异步加载图像。...这样,大图像不会占用超过必要内存; 这对于从外部源加载或由用户提供内容尤为重要。 请注意,动态更改此属性导致重新加载图像源,甚至可能来自网络,如果它不在内存缓存中。...在这种情况,系统正在进行无用绘画。 您可以改为使用Item作为根元素,因为它没有视觉外观。...每个应用程序不应该写一个巨大代码量QML文件。 应用程序启动时加载绝对最少量QML,以使您应用程序尽快启动。应用程序UI可见后,您可以连接到网络并显示微调器等。...如果您第一个视图非常复杂并且需要加载大量QML,请显示一个启动画面,让用户感觉某些事情正在发生(过渡效果)。

4.7K32

【IOS开发基础系列】屏幕适配专题

这个特性OSX上也有出现过:         从Xcode6 GM版本开始,模拟器新增了iPhone6和iPhone6 Plus两种,如果旧工程直接跑到这两个模拟器中时,默认是"兼容模式",即系统简单把内容等比例放大...但是iPhone6 plus上运行, 也是没有问题。 这时候设备分辨率和5一样。320*568。即iPhone6 plus适配你应用, 而不是你应用去适配iPhone6 plus。...这导致了6高分辨率无用武之地。所以,我们要手动开启高分辨率模式。 1.2.1 启用高分辨率模式         启用高分辨率模式有2个方法(目前我能找到):     1....App旧版iOS启动时,该属性会被自动忽略,不会造成异常。...;但如果两处都没有设置,则App回退到兼容模式

21940
领券