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

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

在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。...设备屏幕尺寸和方向 iOS设备具有各种屏幕尺寸,可以纵向或横向使用。在iPhone X和iPad Pro等边对边设备中,显示屏的圆角与设备的整体尺寸非常匹配。...你可以将APP设置为动态适应各种特征,包括: 不同的设备屏幕尺寸,分辨率和色域(sRGB / P3) 不同的设备方向(纵向/横向) 拆分视图 iPad上的多任务处理模式 动态类型文本大小更改 基于区域设置启用的国际化功能...为避免这些问题,您可以在Xcode项目的资产目录中提供不同的图像和颜色,以确保在宽色和sRGB设备上的视觉保真度。 在实际的sRGB和宽彩色显示器上预览应用的颜色。...设计一个与您的应用程序的第一个屏幕几乎相同的启动屏幕。如果您添加的元素在应用程序完成启动时看上去有所不同,则人们可能会在应用程序的启动屏幕和第一个屏幕之间体验到不愉快的闪烁。

8.1K30

在React Native中构建启动屏

在这个教程中,我们将演示如何在React Native中构建一个启动屏幕。我们将指导你如何使用 react-native-splash-screen 为iOS和Android应用构建出色的欢迎界面。...此外,由于Expo很受欢迎,许多人常常选择使用它,我们也将探讨如何在Expo中构建启动屏幕。 什么是启动画面? 启动画面是用户访问应用程序其余功能之前出现的第一个屏幕。...将内容模式设置为“aspect fit”,如下所示: 更改iOS启动屏幕颜色 你可能会问的下一个问题是“我如何在 React Native 中更改启动屏幕的背景颜色?”...为了在 iOS 中为启动屏幕强制使用一致的背景,滚动到背景设置位置并从下拉菜单中选择 Custom。在弹出窗口中,选择启动屏幕的期望颜色。...请参考下面的截图: 构建一个Expo启动屏幕 到目前为止,我们已经探讨了如何在一个裸 React Native 应用中构建启动屏幕。

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

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

    图像尺寸和分辨率 iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量,它们映射到显示屏中的像素。在标准分辨率屏幕上,一点等于一个像素。高分辨率屏幕具有较高的像素密度。...iOS会自动为所有图标添加1像素笔画,使其在“设置”的白色背景上看起来很好。 提示 如果您的应用程序创建自定义文档,则不需要设计文档图标,因为iOS会使用您的应用程序图标自动创建文档图标。...为了适应这个需要,您可以为您的应用程序支持的设备提供启动屏幕作为Xcode故事板或一组静态图像。使用Xcode故事板是推荐的方法,因为故事板是灵活和适应性强。您可以使用单个故事板来管理所有的启动屏幕。...设计一个几乎与应用程序的第一个屏幕相同的启动屏幕。如果您在应用程序完成启动时包含看起来不同的元素,则可能会在启动屏幕和应用程序的第一个屏幕之间遇到不愉快的闪光。 避免在启动屏幕上包含文本。...静态启动屏幕图像 最好在启动屏幕上使用Xcode故事板,但如果需要,您可以提供一组静态图像。为不同的设备创建不同大小的静态图像,并确保包含状态栏区域。 ?

    3.6K40

    [ISUX译]iOS 9 人机界面指南(五):图标与图形设计 - 腾讯ISUX

    代表真实物品的icon或者图像应该精确地描摹出实物的特征,如织物、玻璃、纸张、金属等等,还要能表达实物的重量和质感。 保证你的icon在不同的背景图中都是好看的。...在 iOS8 以后,你可以使用一个 XIB 或故事板文件来替代静态的启动图片。...如果你需要支持早期的 iOS 版本,除启动文件外可以继续使用静态启动图片。 重要: 使用 XIB 或故事板的文件,表示你的应用程序在iPhone 6 Plus 或 iPhone 6上运行。...UI元素的背景,如弹窗,按钮,导航栏,标签栏等,还包括这些栏上的项。...如果你需要垂直简便的效果,制作一个宽度为1像素,高度与UI元素背景区域高度相等的图像。 如果你需要重复的纹理效果,你需要制作一个尺寸与纹理最小重复部分尺寸相等的图像。

    1.6K31

    iOS项目Project 和 Targets配置详解

    但是目前网上查到的资料都非常简短和零散,所以今天我们希望对Xcode上iOS项目搭建各种细节都进行一个详尽的了解和学习。...[image] Identify(标识符)栏主要定义了一些和应用发布有关的标识属性。 Display Name(App应用显示名):安装到iOS手机或iPad上App的名称。...启动页面的作用:在我们点击应用图标启动应用时,应用启动需要一定的操作时间,再启动期间,为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。...当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。...启动页面在屏幕适配中的作用:每个机型,比如同时支持iPhone和iPad的程序,需要分别为iPhone跟iPad指定启动图片。

    3.1K11

    iOS学习——iOS项目Project 和 Targets配置详解

    但是目前网上查到的资料都非常简短和零散,所以今天我们希望对Xcode上iOS项目搭建各种细节都进行一个详尽的了解和学习。...Identify(标识符)栏主要定义了一些和应用发布有关的标识属性。 Display Name(App应用显示名):安装到iOS手机或iPad上App的名称。...启动页面的作用:在我们点击应用图标启动应用时,应用启动需要一定的操作时间,再启动期间,为了增强应用程序启动时的用户体验,您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。...当用户在主屏幕上点击您的应用程序图标时,iPhone OS会立即显示这个启动图像。一旦准备就绪,您的应用程序就会显示它的首屏幕,来替换掉这个启动占位图像。...启动页面在屏幕适配中的作用:每个机型,比如同时支持iPhone和iPad的程序,需要分别为iPhone跟iPad指定启动图片。

    2.8K71

    ARKit 的配置-在您的AR项目的幕后

    它带有一个默认视图View Controller,它是运行应用程序时的第一个视图,如右箭头所示。好吧,那就是你没有定义一个启动画面。...对于Xcode 9,它位于屏幕的右下角。 如果您想了解更多这整个屏幕,可有两个部分在谈论它的书,Xcode 9 简介和Storyboad 简介。...统计信息提供有关场景渲染性能的信息,如每秒帧数(fps),动画,物理等.Apple建议将fps设置为60.在您的设备上,您可以单击+按钮展开统计栏更多细节。...显示统计 调试选项 对于ARKit,有两个可用的调试选项可供我们在场景中进行参考。添加它们以在屏幕上看到它。调试选项是一个数组或列表,因此您需要使用方括号。现在运行应用程序。...将automaticUpdatesLighting设置为true。 我们来看看我们的Apple手表场景。如果没有泛光灯,此图像显示激活默认照明与否之间的区别。亲自看看吧! ?

    2.5K20

    IOS 生态如何做多端适配

    / 多端适配 iPad/iPhone md 版 / 1 IOS 多端适配 现在在开发 IOS 应用时,默认是保证可以同时在 iphone 和 ipad 上运行的。...目前,IOS 提供了 trait 的环境变量,用来指明当前屏幕的横竖和比例关系。trait 是用来描述屏幕大小、横竖屏的一个概念集合。...还记得,在 Xcode 工具栏中,有一行指明了当前的机型和屏幕: ? 其中 C 代表 compact;R 代表 regular。这两个属性是用来描述屏幕短边和长边的特征。...它最大的一个特点是会自动为里面的 UIView 构建布局约束。 ? UIStackView 拥有三个规则 分布方向、对齐规则、分布规则,优先指定 axis 属性,来定义布局轴的方向。...参考:如何在 IOS 使用 multitask ( https://support.apple.com/en-us/HT207582 ) 默认情况下,我们在 iPad 上默认打开的 app 叫做 primary

    1.8K10

    苹果智能炸裂登场:直接GPT-4o加持,全家桶都上生成式AI,Siri脱胎换骨

    新 Siri 只是苹果 AI 能力的一小部分,今年 WWDC 长达一个半小时的 keynote 上,苹果首次把 AI 能力单列出一个章节,专门介绍从图像到文本,覆盖手机、iPad 和 Mac 的生成式...粗略的草图可以变成令人愉悦的图像,用户甚至可以选择空白空间,利用周围区域的背景来创建图像。...借助语言和图像理解,Apple Intelligence 会根据描述挑选出最佳照片和视频,根据照片中识别的主题制作故事情节,并将它们排列成具有独特叙事弧线的电影。...这些模型在由苹果芯片驱动的服务器上运行,为苹果提供了一个基础,确保数据永远不会被保留或暴露。 独立专家可以检查在苹果芯片服务器上运行的代码,以验证隐私保护措施。...用户可以在 Mac 设备上启动和浏览任何他们想要执行操作的 iPhone 应用程序,并通过键盘、触控板和鼠标与手机无缝互动。 滑动 iPhone 屏幕。 打开 iPhone 应用程序。

    16910

    【IOS开发基础系列】Autolayout自动布局专题

    很明显一个是自己为原点的坐标系,一个是以屏幕为原点的坐标系。         当谈到自动布局,橙色代表坏的。InterfaceBuilder绘制两个橙色方块:一个是虚线边框,一个是实线边框。...虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的,但是这里并没有。 Note:你可能会奇怪,为什么Xcode不为X轴方向自动增加一个约束。...Xcode中的规则是:Xcode只为那些你没有设置任何约束的对象创建自动约束。一旦你增加一个约束,你便是告诉Xcode你接管了这个视图。...ZXPAutoLayout详细教程点此- github地址点此 //设置一个背景为半透明红色的view,上下左右四边都距离superview的距离为10 UIView *bgView = [UIView...4.1.4 在故事板中进行布局设计时,如果有导航栏、Tab栏,必须也要把高度预留出来 iPhone iPad各种控件默认高度 http://blog.csdn.net/chengyakun11/article

    34940

    用这些 iOS 技巧让你的 APP 性能更佳

    如 Apple 所述,应将启动页设计为与应用的第一个页面相同: 「设计一个与应用程序首页几乎相同的启动页。...使用启动页进行加载或品牌化可能会减慢首次使用的时间,并使用户感觉应用程序运行缓慢。 当你新建 iOS 项目时,Xcode 会创建一个空白的 LaunchScreen.storyboard 供你使用。...译者注:文段中没有 Xcode,下文中提及为 Xcode 新建项目 为了让你的应用感觉更快,你可以将启动页设计为与将向用户显示的第一个页面(视图控制器)类似。...(查看大图) 另外需要注意的是,当 UIActivityIndicatorView放置在启动页上时,不会生成动画,因为 iOS 只会将启动页 storyboard 生成静态图像并将其展示给用户。...许多 label 以红色突出显示,因为它们的背景颜色是透明的,导致 iOS 通过混合背后的视图来计算背景颜色。

    3.2K30

    iOS屏幕适配概述1 屏幕适配简介2 Autoresizing3 Auto Layout

    iPAD Pro | 12.9 | 10241366 1.2 适配技术发展史 iOS版本 | 适配技术 | Xcode版本 | 正式版发布时间 | 手机机型 ----------|--------...进行屏幕适配 随着 iPad 的发布, 屏幕的物理尺寸发生了变化 并且苹果建议,在 iPad 上运行的程序如果没有特殊原因,应该支持横竖屏切换 因此:不能把控件的 frame 都写死了,需要进行屏幕适配...只能设置当前控件 与父控件之间的相对关系,当遇到要设置兄弟控件之间的关系的时候 Autoresizing 就无能为力了 举例: 在竖屏下, 屏幕底部有两个按钮,这两个按钮的间距为一个固定的值(宽度不指定...) 当切换为横屏的时候要求这两个按钮还显示在屏幕底部 并且按钮间的间距不变, 按钮可以随之变宽 Auto Layout 技术主要解决的问题:控件位置的参照关系不再局限于父控件 iOS 8 —— Size...: "主要解决了iPhone横竖屏适配及iPhone和iPad开发时共用一个SB的问题" iOS 9 —— Size Classes + Auto Layout + StackView StackView

    1.3K30

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

    模拟和测试 新的模拟器有了显著的升级,使其不但启动得更快,还有了新的外观 — 现在的模拟器看起来和它正在模拟的设备一模一样。模拟器中的设备按钮全都具备真实设备按钮的功能,您甚至可以模拟屏幕边缘手势。...Xcode 与 Cocoa 和 Cocoa Touch 框架紧密集成,为您带来效率惊人的开发环境,助您为 Mac、iPhone、iPad、Apple Watch 和 Apple TV 构建 app。...如果您尚未编写代码,Xcode 将提出为操作创建存根(启动方法)或出口(保留数据的变量),它们将为界面提供逻辑。...预览 利用预览模式,您可在不同的环境中快速查看界面,无需运行 app,从而大大加快了迭代设计过程。您可以在纵向或横向模式下、在以前版本的 iOS 上、在不同的屏幕尺寸下等环境下查看 app。...资产目录 Xcode 中的资产目录编辑器管理 app 的图像,可将相同资产的各种分辨率图像分组归类。构建时,Xcode 将资产目录编译成最高效的最终分发捆绑包。

    8.3K30

    【iOS 开发】iOS 开发 简介 (IOS项目文件 | MVC 模式 | 事件响应机制 | Storyboard 控制界面 | 代码控制界面 | Retina 屏幕图片适配)

    IOS 图片规格 (1) Retina 视网膜屏 Retina 屏幕简介 :  -- 像素 : 高清晰度的视网膜屏幕, 这种屏幕的分辨率是普通非 Retina 屏幕的 2 倍; -- 市场状况 : 目前...IOS 已经下架了所有的 非 Retina 屏幕的设备, 目前在售的所有设备都是 Retina 设备, 但是之前卖出的许多设备有些不是 Retina 屏幕的; -- 支持 Retina 屏幕的设备 :...现在在售的所有设备, iphone4 ~ 6S, ipod4, ipad 2 之后的新设备; -- 不支持 Retina 屏幕设备 : 之前出售的低端 IOS 设备大都是非 Retina 屏幕的, ipod...57; (4) 启动界面像素 Retina 屏幕启动画面 :  -- iPhone 5 ~ 6 : 640 x 1136; -- iPhone 4 ~ 4S : 640 x 960; -- iPad...: 1536 x 2048 (纵向), 2048 x 1536 (横向);; 非 Retina 屏幕启动图片 :  -- iPad2 或 iPad Mini : 768 x 1024 (纵向), 1024

    5K30

    深入详解iOS适配技术

    autoresizing.png (一)Autoresizing Autoresizing是早期iOS设备机型很少、APP界面布局相对简单的背景下产生的一种屏幕适配技术。...早期的iOS设备机型很少、屏幕尺寸单一、APP界面相对简单,屏幕适配并没有现在这么复杂,在当时这种背景下,产生了Autoresizing。...AutoLayout自iOS6开始引入,但由于当时XCode4当时对AutoLayout的支持不是很好,所以在XCode5/iOS7及其之后,AutoLayout才开始被广泛应用。...在出现sizeClass技术之前,我们用xcode新建的universal项目默认会有两个storyBoard,一个是专门为iPhone开发的storyBoard,另一个是专门为iPad开发的storyBoard...因为通过sizeClass我们可以在这一个main.storyBoard上为iPhone和iPad布局。 前面已经说过,我们选中sizeClass中一种屏幕类型,进行的布局只会出现在响应的设备上。

    8.5K70

    iOS14开发-入门知识

    该系统最初是设计给 iPhone 使用的(所以后来曾命名为 iPhone OS),之后陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上(所以在 WWDC 2010 上最终宣布更名为...还可以在普通电脑上装一个黑苹果系统(不推荐),安装复杂且不稳定。 开发软件 iOS 使用 Xcode 工具进行开发。...Cocoa Touch 层为应用程序开发提供了各种有用的框架,并且大部分与用户界面有关,它负责用户在 iOS 设备上的触摸交互操作以及一些其他的关键功能。 创建第一个iOS项目 ?...UIView与UIViewController的关系 UIViewController 中默认有一个和屏幕一样大的 UIView,UIViewController 管理着它的生命周期。...思考:一个控件看不见有哪些可能? 宽度或者高度其实为0。 位置不对(比如是个负数或者超大的数,已经超出屏幕)。 hidden == true。 alpha <= 0.01。

    2.9K40

    一文看完 WWDC 2022 音视频相关的更新要点丨音视频工程示例

    12.9 英寸 iPad Pro 新增两个新特性:Reference 模式支持 EDR 渲染;Sidecar 支持 EDR 渲染(Sidecar 是苹果的一项技术,支持将 iPad 作为 Mac 的扩展屏...为 macOS 上的屏幕共享应用、视频会议应用、游戏流媒体应用等提供高性能的音频和视频的屏幕录制能力。...iPhone/iPad 上扫描您的房间。...如果使用 RealityKit,则会自动对图像进行进一步处理以用作背景:缩放以匹配 2532 像素的屏幕宽度,并裁剪以匹配显示纵横比。...2)相机增强 新的增强功能包括:高分辨率背景照片 API、启动新的 HDR 模式、在 ARKit 中读取 EXIF 标签(EXIF 标签包含有关白平衡、曝光和其他对后期处理有价值的信息)等等。

    2.6K10

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

    iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。...突出显示有趣的iOS应用内容。通过在消息空间显示其内容来扩展iOS应用程序的功能。考虑人们可能想要共享哪些信息,以及他们如何在活跃对话的背景下与您的应用进行交互。 插入内容以避免裁切。...力求获得具有广泛国际吸引力的贴纸。 使用描述性图像名称或提供替代文本标签。尽管它们在屏幕上不可见,但是图像名称和其他文本标签使VoiceOver可以听得见地描述贴纸,从而使视力障碍者的导航更加轻松。...请注意,Xcode使用24位调色板保存PNG动画,这可能会导致文件大小超出预期。 贴纸格式 邮件支持以下文件格式的贴纸: ?...iMessage应用程序和贴纸包图标 像iOS应用一样,iMessage应用和贴纸包也需要可识别的应用图标。保持背景简单,并提供单个焦点。设计一个带有单个中心点的图标,一目了然。

    3.2K10
    领券