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

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

在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。...你可以将APP设置为动态适应各种特征,包括: 不同的设备屏幕尺寸,分辨率和色域(sRGB / P3) 不同的设备方向(纵向/横向) 拆分视图 iPad上的多任务处理模式 动态类型文本大小更改 基于区域设置启用的国际化功能...视图可能包含尺寸类型的任意组合: 常规宽度,常规高度 紧凑宽度,紧凑高度 常规宽度,紧凑高度 紧凑宽度,常规高度 iOS会根据内容区域的尺寸类型动态地进行布局调整。...例如:当垂直尺寸类型从紧凑高度变为常规高度时,可能是因为用户将设备从横向旋转到纵向,标签栏可能会变得更高。 1. 设备尺寸类型。根据屏幕尺寸,不同尺寸类别组合适用于不同设备上的全屏体验。 ? ?...为避免这些问题,您可以在Xcode项目的资产目录中提供不同的图像和颜色,以确保在宽色和sRGB设备上的视觉保真度。 在实际的sRGB和宽彩色显示器上预览应用的颜色。

8.1K30

iOS屏幕旋转及其基本适配方法

但是这些其实都是在不同级别上实现旋转的设置,我们会遇到设置关闭旋转无效的情况,这就很可能是被上一级别控制的原因。...我们首先有个大致的了解,控制屏幕旋转优先级为:工程Target属性配置(全局权限) = Appdelegate&&Window > 根视图控制器> 普通视图控制器。...开启屏幕旋转的全局权限有三种方法,包括通过Xcode直接配置的两种方法和代码控制的一种方法。这三种方法作用相同,但是由于代码的控制在程序启动之后,所以也是最有效的。...3.Appdelegate&&Window中设置 正常情况下,我们的App从Appdelegate中启动,而Appdelegate所持有唯一的Window对象是全局的,所以在Appdelegate文件中设置屏幕旋转也是全局有效的...适配问题,我们需要针对不同方向下的界面重新调整视图布局。

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

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

    虚线方块是根据自动布局显示视图的frame。实线方块是根据你在屏幕上放置的视图的frame。这两个应该吻合的,但是这里并没有。 Note:你可能会奇怪,为什么Xcode不为X轴方向自动增加一个约束。...Xcode中的规则是:Xcode只为那些你没有设置任何约束的对象创建自动约束。一旦你增加一个约束,你便是告诉Xcode你接管了这个视图。...NS_AVAILABLE_IOS(6_0);         在使用自动布局之前要对子视图的布局方式进行调整,用到这个UIView的属性。...旋转屏幕的情况下也会自动处理布局。这样看起来代码多,但是可以适应多种分辨率的屏幕。不排除以后苹果出更大更多分辨率的手机。...page=1 Size Classes with Xcode 6:为所有的尺寸准备一个Storyboard http://www.cocoachina.com/ios/20140926/9766.html

    34940

    深入详解iOS适配技术

    最近,iPhone家族又诞生一款iPhoneSE,鉴于这款iPhoneSE的屏幕尺寸和iPhone5S的尺寸一模一样——同样是4.0英寸,广大iOS开发者可算是松了口气,不然iOS的屏幕尺寸真的是越来越让人眼花缭乱...在iPhone3gs时代,手机的屏幕尺寸有且只有一种,也就是3.5英寸。开发app的时候,根本不用考虑同一个视图在不同尺寸的屏幕上显示的问题。...iOS开发者完全可以用纯代码的方式把一个控件的frame写死。 后来apple公司推出了4.0英寸的iPhone5和iPhone5S,所以,针对于不同尺寸的屏幕,再把控件的frame写死就不可取了。...AutoLayout自iOS6开始引入,但由于当时XCode4当时对AutoLayout的支持不是很好,所以在XCode5/iOS7及其之后,AutoLayout才开始被广泛应用。...但sizeclass是对不同尺寸的屏幕的区分,sizeclass把不同尺寸(包括横屏和竖屏)的屏幕进行了分类,无论是iPhone还是iPad设备,其宽度和高度都被划分为三种类型:compact(紧凑)、

    8.5K70

    SceneKit 场景编辑器-为您的AR体验构建3D舞台

    在此空间中,您将能够从不同角度查看3D模型并对您的修改进行流式处理。您可以通过单击并用一根手指拖动来更改视角。要在保持相同角度的同时调整视图,请用两根手指滚动。...在这个栏上,我们可以改变到不同的视角。我经常将它设置为前面,因为这是在屏幕上添加模型时的起始角度。如果场景附带动画,您可以通过单击“ 播放”按钮进行预览。...对于我们来说,我们宁愿要使用的方向在X,Y和Z轴。 Euler Angles 缩放 Scale允许我们调整模型的大小。 边界框 边界框是您的资产的尺寸,以米为单位。...平面几何 转到对象库,选择一个平面并将其放在场景中。 平面尺寸 在属性检查器,分配一个宽度为3和高度为3.5。该圆角半径为0.4。 相对位置 现在,我们希望将屏幕放在表壳的正中间。...对于比例,为x,y和z输入0.01。双击该框的节点图标以调整视图。正如你所看到的,一旦我调整了盒子的大小,它的所有孩子都一样。 预览观看场景 我们如何才能真实地看到手表在应用中的外观?

    5.6K20

    iOS之深入解析Xcode 13正式版发布的40个新特性

    十二、Instruments Instruments 中的调用树视图和扩展详细信息视图现在用“[inlined]”标记指示内联函数; 通过详细视图导航栏更容易发现不同的视图。...构建的应用程序选择首选的行为风格; 在视图控制器的大小检查器中使用 Freeform 模拟度量的 Storyboard 场景现在可以直接在画布中使用调整大小旋钮调整大小; NSButton 斜角类型在...性能测试现在支持在 macOS 中为动画 os_signpost 间隔使用 XCTOSSignpostMetric 时收集故障指标; XCTest 现在支持测试重复,且有三种测试重复模式; 新的透明屏幕覆盖显示自动化运行时的活动...二十九、Audio Units Audio Units 现在提供 Audio Unit host 可以在 iOS 中显示的自定义视图。...自定义视图支持通过 tintColor 属性设置视图的色调颜色。这可用于将视图的颜色设置为每个轨道的不同颜色或匹配应用程序的外观。

    8.8K40

    iOS 面试策略之系统框架-UIKit

    3.Auto Layout 和 Frame 在 UI 布局和渲染上有什么区别? 关键词: #性能 Auto Layout 是针对多尺寸屏幕的设计。...Bounds 是指当前视图相对于自己的平面坐标系统中的位置和大小。 Center 是一个 CGPoint,指当前视图在父视图的平面坐标系统中最中间位置点 。...layoutSubviews 是用来自定义视图尺寸调整的。它是系统自动调用的,开发者不能手动调用。我们能做的就是重写该方法,让系统在尺寸调整时能按照希望的效果去进行布局。...这个方法主要在屏幕旋转、滑动或触摸界面、子视图修改时被触发。...其基本函数为+ animateWithDuration:animations:,其中持续时间(duration)为基本参数,block 中对 UIView 属性的调整就是动画结束后的最终效果。

    1.5K20

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

    自动布局基于这样一种概念:界面中的每个对象均可定义约束条件,用于控制其对父视图和其他界面控件的响应。例如,当显示不同语言时,可以让按钮优先保持特定大小或扩展以容纳更大的文本。...您还可以直接控制约束条件来定义每个条件的确切优先级,以此定义当屏幕尺寸不同、设备旋转或在新区域下运行时 app 的工作方式。...预览 利用预览模式,您可在不同的环境中快速查看界面,无需运行 app,从而大大加快了迭代设计过程。您可以在纵向或横向模式下、在以前版本的 iOS 上、在不同的屏幕尺寸下等环境下查看 app。...模拟器 通过 SDK,Xcode 可以在基于 Mac 的 iOS Simulator 中构建、安装、运行和调试 Cocoa Touch app,从而获得无缝开发流程。...快速帮助 编程时为您显示简练的 API 文档,其中包括为代码撰写的注释。在填写代码过程中显示简短的概述,并在实用工具区域内提供更多链接和参考。

    8.3K30

    《Motion Design for iOS》(十七)

    让我们先添加一个简单的UIView对象到屏幕上并设置它的圆角。我们要把它添加到我们的主窗口上时因为它是一个快速的例子,但在真实的app界面中你需要添加到管理当前界面的视图控制器中。...Core Animation会自动在球的当前尺寸值和你的最终值之间更改来产生一个平滑的动画。这一次,我希望动画能最终让球变成两倍大,所以我设置了球的transform属性为一个新值。...有很多方式来操作一个视图的transform(尺寸、旋转、位置),所以苹果提供了很多函数来改变你感兴趣的值,在我们的例子中,是尺寸。...平移的更改会将视图上、下、左、右移动。在我们的例子中,我们会将它右移75个像素。...你可以手动构建转变矩阵来包含尺寸和平移更改到一个数据结构中,但我发现让iOS来帮我们结合多个单独的转变到一个最终转变会容易一些。 到目前为止有意义吗?

    96320

    玩转 Xcode Playground(上)

    如何创建 Playground 项目 在 Xcode 中创建 Playground 项目 在 Xcode 中,点击 File -> New -> Playground 即可创建一个格式为.playground...image-20211223175608008 可以调整 Page 顺序,并可修改每个 Page 的名称(不仅有助于标识,更方便在不同的 Page 中实现快速跳转)。...在 Xcode 中,通过点击代码左侧行数上的执行按钮(需要按钮的颜色为蓝色)来指定当前执行的结束位置。...image-20211223144432779 在没有必须依赖 iOS 框架代码的情况下,将运行环境设置为 macOS 可以减少因 iOS 模拟器错误引发的不稳定状况。...如何创建实时视图 你可以使用实时视图来为 Playground 添加互动性,试验不同的用户界面元素,并建立自定义元素。

    4.1K20

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

    + StackView |Xcode7.0 | 2015年09月28日 | iPhone 6S 1.3 适配技术介绍 直接使用 frame 计算控件的位置 特点:程序中存在大量的 MagicNumber...应用程序都是竖屏 游戏几乎都是横屏 官方应用大多支持横竖屏 使用 Autoresizing 进行屏幕适配 随着 iPad 的发布, 屏幕的物理尺寸发生了变化 并且苹果建议,在 iPad 上运行的程序如果没有特殊原因...iOS 6 —— Auto Layout(自动布局) 随着 iPhone5 \ iPhone5s 等的发布苹果设备不同尺寸的屏幕变得越来越多, 不仅要求能根据控件父子 关系来设置相对位置,也要求能根据任意控件之间的关系来设置位置因为...),为了能更容易的适配不同 的屏幕,苹果推出了 Size Classes 技术 通过 Auto Layout 设置的约束,约束一旦添加就会应用于各种屏幕(也就是说在 各种不同的屏幕下都使用相同的约束)...通过 Size Classes + Auto Layout 的方式, 可以为不同尺寸的屏幕设置不同的约束 举例: iPhone 下的计算器,在横屏、竖屏下的不同表现 Size Classes 技术主要解决的问题

    1.3K30

    ios学习7_iPhone屏幕尺寸、分辨率及适配

    以下为iPhone4s的宽高示意图: 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。...对于纵向也不支持滑动的视图,在屏幕可见视区内排版时,最好不要随字号缩放,否则可能超出既定宽高。...苹果在WWDC2012 iOS6中就已提出了Auto Layout的概念,即使用约束条件来定义视图的位置和尺寸,以适应不同尺寸和分辨率的屏幕。...设备的屏幕尺寸、分辨率及其屏幕边长比例》 《iOS判断设备屏幕尺寸、分辨率》 《iOS8中的UIScreen》 《Detecting iPhone 6/6+ screen sizes...《在Xcode 6中用矢量化PDF(vectorized PDF)来支持各种尺寸的iPhone》 《iOS8适配须知》 《适配iOS8备忘录》 《iOS界面适配(一)(二)(三)》

    2.8K20

    微信iOS9适配总结

    如果不支持分屏,需要在项目设置中的General - Deployment Info中勾选Requires full screen 2、如何适配iPad分屏 分屏和转屏本质上都是改变了屏幕的尺寸...如果界面在不同尺寸的屏幕下有不同的排版设计,官方的建议是根据系统回调在Regular模式和Compact模式之间切换。...微信因为是使用了配置文件来处理不同设备的排版差异的,所以根据自己的实际情况,采用以下原则:在320屏幕下按照iPhone5的排版;438屏幕下按照iPhone6的排版,其它分屏下按照iPad的排版。...要注意iPad的屏幕不再是1024*768,而且在运行中屏幕的尺寸是会随时变化的(分屏或转屏时),所以如果以前有些代码做了hardcode,会导致分屏后有bug。...三、总结 本文总结了微信在适配iOS9中遇到的常见问题,相信iOS9还有其它深坑有待挖掘,欢迎大家补充。

    2.1K50

    ios学习7_iPhone屏幕尺寸、分辨率及适配

    以下为iPhone4s的宽高示意图: 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。...对于纵向也不支持滑动的视图,在屏幕可见视区内排版时,最好不要随字号缩放,否则可能超出既定宽高。...苹果在WWDC2012 iOS6中就已提出了Auto Layout的概念,即使用约束条件来定义视图的位置和尺寸,以适应不同尺寸和分辨率的屏幕。...参考: 《iOS设备的屏幕尺寸、分辨率及其屏幕边长比例》 《iOS判断设备屏幕尺寸、分辨率》 《iOS8中的UIScreen》 《Detecting iPhone 6/6+ screen...《在Xcode 6中用矢量化PDF(vectorized PDF)来支持各种尺寸的iPhone》 《iOS8适配须知》 《适配iOS8备忘录》 《iOS界面适配(一)(二)(三)》

    93450

    设计师应该了解的iOS应用开发基础知识

    由于要为普通屏幕(320×480)和Retina屏幕(640×960)各自准备一套图像资源(最新的iPhone5规格为640×1136),我们应该在Photoshop中尽量多的使用矢量图形(vector...多数情况下,要将按钮导出为不包含文案的背景图片,以便更加灵活的在开发环境中调整文字属性,或是对多语种进行支持。...在我们的案例当中,每个视图都是一个对象,它们有各自的内容与行为特征。所以我们需要创建3个不同的类,以便对每个视图的属性和方法进行定义。这些类所扮演的就是View Controller的角色。...图片如果要自己制作应用图标,在尺寸方面要符合以下规格(以像素计):标准:57×57Retina:114×114加载图像的尺寸则与屏幕一致:标准:480×320Retina:960×640除了在iPhone...我们可以在下图中看到,文档结构列表和右侧边栏已经被收起了,以便为两个编辑视图提供更多的空间。你可以到Xcode菜单中的“View”一项中找到相关的切换操作。

    85230

    iOS14新特性探索之二:App Widget小组件应用

    对于同一种Widget组件,开发者也可以提供不同的尺寸或不同的布局,这可以提供给用户更多的选择以满足不同用户的偏好。        ...创建完成后,Xcode会自动帮我们创建和配置的文件的工作都完成,默认的模板为我们创建了一个显示当前时间的组件,我们可以直接在真机上运行它(Bate版本的Xcode模拟器运行会有些异常),之后,我们就可以将这个显示时间的小组件放置在主屏幕的任意位置...Xcode为我们创建的这个模板虽然简单,但是五脏俱全。...,用户可以选择不同尺寸的小组件进行添加,在小组件的渲染布局时,开发者也可以根据不同的环境尺寸配置不同的渲染策略,例如下面代码: struct WidgetExtEntryView : View {...,即组件的尺寸信息,上面代码根据不同的尺寸渲染了不同格式的时间。

    5.2K51

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

    图像尺寸和分辨率 iOS用于将内容放置在屏幕上的坐标系基于以点为单位的测量,它们映射到显示屏中的像素。在标准分辨率屏幕上,一点等于一个像素。高分辨率屏幕具有较高的像素密度。...您无法预测哪些壁纸会为主屏幕选择,所以不要只是测试您的应用程序的光或暗的颜色。看看它如何看待不同的照片。尝试在具有动态背景的实际设备上,随设备移动而改变透视图。 保持图标角落正方形。...为了确保系统中的备用图标始终保持一致 - 用户不应该在主屏幕上看到图标的一个版本,而在“设置”中则看不到完全不同的版本,请以与您为主应用程序图标提供的尺寸相同的尺寸提供它们(App Store图标除外)...如果您需要文字,请在图标下方显示标签,并相应调整其位置。 不要使用苹果硬件产品的副本。苹果产品受版权保护,无法在您的图标或图像中复制。...静态启动屏幕图像 最好在启动屏幕上使用Xcode故事板,但如果需要,您可以提供一组静态图像。为不同的设备创建不同大小的静态图像,并确保包含状态栏区域。 ?

    3.6K40

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

    iOS的系统字体(San Francisco)使用动态类型(Dynamic Type)来自动调整字间距和行间距,使文本在任何尺寸大小下都清晰易读。...这里有一个关于视图与视图控制器如何结合并呈现iOS应用的UI的例子,如图。 ? 尽管开发者认为真正起到作用的是视图和视图控制器,但一般用户感知到的iOS应用是不同屏幕内容的集合。...但是,不同于计算机程序中的窗口,iOS窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。...注:在一种尺寸类别中,持续使用Auto Layout进行小的布局调整,比如拉伸或压缩内容。更多Auto Layout,参看 Auto Layout Guide....用户期望大多数应用都可以响应他们在iOS的设置中设定的字体大小。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,请查阅下文“颜色与字体”中相关的内容。

    1.9K41

    iPhone屏幕尺寸、分辨率及适配

    以下为iPhone4s的宽高示意图: 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线的长度(diagonal)。...对于纵向也不支持滑动的视图,在屏幕可见视区内排版时,最好不要随字号缩放,否则可能超出既定宽高。...苹果在WWDC2012 iOS6中已提出了Auto Layout的概念,即使用约束条件来定义视图的位置和尺寸,以适应不同尺寸和分辨率的屏幕。...设备的屏幕尺寸、分辨率及其屏幕边长比例》 《iOS判断设备屏幕尺寸、分辨率》 《iOS8中的UIScreen》 《Detecting iPhone 6/6+ screen sizes in point...《在Xcode 6中用矢量化PDF(vectorized PDF)来支持各种尺寸的iPhone》 《iOS8适配须知》 《适配iOS8备忘录》 《iOS界面适配(一)(二)(三)》 《iPhone

    6.1K20
    领券