ios UI的自适应和布局

用户通常想在旋转屏幕时,UI视图中的内容没有减少,UI中的视图控件可以根据当前的设备方向来调整布局,如果没有

自适应和自动布局,当用户旋转屏幕时,有的控件不见了,这会让用户感觉自己失去了对app的控制,从而给你的app

影响非常不好。

自适应 size class
给你带来福音。

想象一下苹果设备中iPad iPhone 6 plus iPhone 6 iPhone5 iPhone5s iPhone4s, 
如何使用size class

来表示它们的不同的使用情况了;首先,设备的使用无非就是横屏和竖屏,横屏和竖屏的重要区别是对于人来说的它的宽高比

发生了改变,size class定义了两种size class 
,regular,compact,通过这两个size class,我们就可以枚

举出不同设备的使用size class的表示。

iPad不管横屏还是竖屏都是:regular width,regular height;

iPhone 6 plus竖屏:regular height,compact width;

iPhone 6 plus横屏:regular width,compact height;

iPhone 6, iPhone 5, and iPhone 4s竖屏:compact width and regular height

iPhone 6, iPhone 5, and iPhone 4s横屏:compact width and compact height

在storyboard设计UI时你可以指定不同的情况来设计UI控件的大小布局和显示等,这样当设备处于不同的使用情况时就

会根据你设计的方案对UI控件进行重新布局。

有好的用户体验要注意的事项:

1.每一个页面要聚焦到用户关心的内容:这个优先考虑,用户使用你的app就是它关心里面的内容,如果随意的改变聚焦,会让用户不知怎么办

2.避免无理由的改变布局:可以通过改变UI控件的大小

3.如果你只想让你的app运行在一个方向上的话,在开发时就指定它只能在一个方向上使用。

4.用户很方便的聚焦的关心的内容

5.使用相对平衡的大小颜色显示UI

6.使用对齐,层次,阶梯的关系布局UI,

7.必须保证用户理解主要内容在默认的大小

8.有text内容的视图要根据内容来改变大小,即是可变的。

9.尽可能的避免不一致的外观,具有相同功能和操作的UI应该有相同的样式,比如拨号键的数字按钮都是相同的样式。

10.UI控件的布局不能太紧凑,否则用户很容易错误的点击和误操作。

时间: 2024-10-10 16:09:56

ios UI的自适应和布局的相关文章

Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下:   1.UI控件与布局     2.MVVM     3.数据绑定     4.await/async     5.Linq查询     6.WCF RIA Services     7.序列化     8.委托与事件 1.UI控件与布局 常用的主要是Grid.StackPanel.Border,其中最常用的的是Grid,是一

iOS UI Tab开发

iOS UI Tab开发(iOS 8) tab这种样式,类似于单选,可以叫radio-style,这是一个现在主流的layout-design,它让APP内容结构清晰,开发分工逻辑明确,经典的就是微信,时钟等 综述一下: 1.UITabBarController继承UIViewController,是一个ViewController container 2.UITabBarController拥有一个(readonly)的TabBar,TabBar拥有一到多个TabBarItem 3.每一个It

IOS Ui控件 修改位置和尺寸,代码添加控件

所有的UI控件最终都继承自UIView,UI控件的公共属性都定义在UIView中, UIView的常见属性 UIView *superview; 获得自己的父控件对象 NSArray *subviews; 获得自己的所有子控件对象 NSInteger tag; 控件的ID(标识),父控件可以通过tag来找到对应的子控件 CGAffineTransform transform; 控件的形变属性(可以设置旋转角度.比例缩放.平移等属性) CGRect frame; 控件所在矩形框在父控件中的位置和尺

【腾讯TMQ】解放程序猿(媛)的双手—iOS UI自动化测试

解放程序猿(媛)的双手-iOS UI自动化测试 前言 随着移动互联网时代的蓬勃发展,移动终端的自动化测试也在业界日益活跃,总体来看在Android平台上的自动化工具和实践比较多,但是说到iOS平台无论从自动化工具的数量还是质量上就陡降了.究其原因,无外乎是iOS系统的封闭性,加上相对Android用户的数量少,导致对这个平台系统的自动化进展缓慢,据笔者了解到的情况,很多iOS平台的测试人员还处于纯手工测试模式,自动化程度和Android平台无法相论,更别提和PC端相比了. 然而越是困难的事,越是

Qt编程之UI与控件布局

当然,大家都知道UI界面可以用Qt Designer在约束环境下设置编辑.ui文件,再将.ui文件转换成对应的ui_XXX.h文件,这头文件中的内容是:用C++语言实现真正的界面布局.uic -o "outputfile" "inputfile.ui"命令行可以转换 当然,也可以自己用C++来实现界面布局利用成员函数SetGeometry什么的,但是那样的开发效率就下降了,BUG概率引入的也会加大. 这篇文章很好的演示了只利用C++实现的界面设计布局: http:/

ios UI数据库 sqlite小型数据库的增、删、改、查、排序

#import "table.h" @implementation table // 1.创建表 每一列之间用',',如果存在就不创建 create table if not exists t_class( class_id integer primary key autoincrement, class_name varchar, person_count integer default 0) // 1.1// 删除表 drop table if exists t_person //

Android的Studio 2.2 预览 - 新的UI设计师和约束布局

Android的Studio 2.2中预览 - 新的UI设计师和约束布局 由贾马尔-陈奕迅,产品经理,机器人 本周在谷歌I / O 2016年,我们推出Android Studio 2.2中预览.该版本是一个大的更新是建立在我们重点打造Android的快速和高效集成开发环境(IDE).与Android平台开发同步的Andr??oid Studio允许您使用最新的Andr??oid API和功能开发.由于只是3年前在谷歌I / O推出Android的工作室,我们从您对您最想要的什么功能,收到很好的

iOS UI框架

iOS UI 框架          启动引导页面 +  主界面 文件下载 UIFrame

Android-优化UI性能(5)-优化布局文件

Android-优化UI性能(5)-优化布局文件 1,使用观察布局的工具:Hierarchy Viewer 这时Android用来观察布局的工具,层级观察器, 它是一个优秀的布局优化工具和观察工具 该工具在sdk目录下的tools文件夹 **2,使用布局优化工具:**lint以前叫做layoutopt API16后改为lint,来检测项目的问题 \sdk\tools\lint.bat 版权声明:欢迎交流指正文章的错误,必定虚心接受,QQ872785786