【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)

2.3  自动适配与布局(Adaptivity and Layout)

2.3.1  开发成自动适配(Build In Adaptivity)

  用户通常希望在自己的所有设备,各种场景中使用他们喜欢的app。比如不同设备的不同方向以及在iPad上的分屏。尺寸类型(Size Classes)和自动布局(Auto Layout)可以通过定义屏幕的布局,视图控制器以及视图在屏幕显示环境变化时该如何适配帮你实现这个愿望。(这里的“显示环境”可以是整个屏幕也可以是屏幕中的一部分,如弹出框里面的部分或iPad上的一个分屏。)

  iOS中显示环境的概念定义在特征集合(Trait Collection)中,特征集合包含尺寸类型(Size Classes),显示比例(Display Scale)和用户界面语言(User Interface Idiom)。你可以使用一个特征集合让你的视图和视图控制器响应显示环境的变化。(关于Trait Collection的更多资料可以参考UITraitCollection Class Reference.)

  iOS定义了两种尺寸类型:常规的(Regular)和紧凑的(Compact)。常规尺寸一般与广阔的空间相关,紧凑尺寸则与受限空间相关。为了描述显示环境,你需要定义一个水平的尺寸类和一个垂直的尺寸类。如你所想,iOS在竖屏的时候使用一组尺寸类,在横屏时使用另外一组尺寸类。

  iOS能在尺寸类型(Size Classes)和显示环境变化时自动做很多布局上的调整。例如:当垂直方向的尺寸类从紧凑变成常规,导航栏和工具栏会自动变高。

  当你通过尺寸类使布局发生改变,你的app可以在任意环境都能很好的显示。要学习如何通过尺寸类构建用户界面,请参考Size Class Design Help.

  注:在一个尺寸类中,可以继续使用自动布局来进行细微的调整,如拉伸或缩小内容。要学习如何使用自动布局,请参考Auto Layout Guide.

  下面这些例子帮你更加直观的了解尺寸类是如何描绘不同设备的显示环境。如,iPad(含iPad Pro)不管任何尺寸,竖屏,横屏都是常规尺寸类型。换句话说,iPad水平和垂直方向的显示环境总是常规的。

  注:在支持多任务的iPad型号上,你的app可能会与另外一个app共享屏幕。确保使用自动布局(Auto Layout),这样你就能响应用户在多任务方面的请求,如分屏(Split View)和侧屏(Slide Over)。

  除了使用自动布局,通过设置UIView的readableContentGuide属性设置你布局中的可读区域也是同样重要的,这样可以让用户有更好的阅读体验。

  iPhone的显示环境则存在差异,这主要由设备的型号及持握方向决定的。

  竖屏时,iPhone6 Plus使用水平紧凑和垂直常规的尺寸类型;横屏时则是水平常规和垂直紧凑的尺寸类型。

  其他iPhone型号,包括iPhone6则使用同一套尺寸类型。

  竖屏时,iPhone6,iPhone5,iPhone4s使用水平紧凑和垂直常规的尺寸类型。横屏时这些设备则水平和垂直都是紧凑的尺寸类型。

2.3.2  总是提供良好的体验(Provide a Greate Experience in Each Environment)

  当你了解自动适配的优势,你就能保证在显示环境发生改变时适当地应对。遵循下面这些指南可以在任何设备环境中给用户带来良好的体验。

  • 在所有环境下对主要内容保持专注。这是优先级最高的,用户使用你的app去关注一些他们在意的内容。如果环境变化时改变焦点会,会让用户感到困惑,同时也会觉得失去对app的控制。
  • 避免布局上没有必要的变化。在所有的环境中使用类似的体验,这样用户在旋转设备,或者在其他设备上运行你的app时就能保持他们的操作习惯。例如,在水平常规环境下用一个网格显示的一张图片,你无需在水平紧凑的环境显示相同的内容,尽管你已经调整了网格的大小。
  • 如果你的应用只支持一个方向,那么请直接一点。用户总是希望你的应用能够支持不同的方向,当然能满足这点是最好的。但如果你的应用只能在一个方向使用,你应该:
    • 避免出现会提示用户旋转设备的元素。在支持的方向上运行,如果有需要,清楚地告诉用户旋转设备,不过前提是没加入杂乱的东西。
    • 支持同一个方向上的变化。打个比方,如果一个应用只支持在水平方向,那么不管Home键是在左边还是右边应该都能够正常运行。如果用户把设备旋转180度,应用的内容最好也是旋转180度响应用户的操作。
  • 如果你将设备方向的变化视做用户输入的一种,那么就要按照程序特定的方式来旋转。例如,一个游戏让用户通过屏幕旋转一定移动游戏中的一个物体,这时设备就不能响应屏幕旋转。在这个案例中,你必须关联两个需要变化的方向并允许用户在这之间切换直到他们开始应用的主任务。一但开始执行主任务,接着开始响应设备的移动。(WTF,这段翻译得自己都看不懂)

2.3.3  用布局来交流(Use Layout to Communicate)

  布局其实不仅仅是UI元素在界面上的显示,通过布局,你可以告诉用户哪些信息是最重要的,他们的选择是什么,以及所有的东西是如何联系在一起的。

  • 通过突出重要的内容和功能,让用户更容易将注意力集中在主要任务上。一些好的做法就是将重要的项目放在屏幕的上半部分,并且遵循从左到右的习惯。

  • 使用视觉权重和平衡来告诉用户屏幕上哪些元素是相对重要的。

  

  •  
  •  

            推荐                        不推荐

  

时间: 2024-10-11 12:19:37

【译】UI设计基础(UI Design Basics)--自动适配与布局(Adaptivity and Layout)(四)的相关文章

jquey ui 实现注册,邮箱自动补全

//----------------------------------------------------------------------------------------------- //----------------------------------------------------------------------------------------------- //静态页面 <!DOCTYPE html> <html> <head> <

【iOS开发】多屏尺的自动适配 AutoLayout (纯代码方式)

关于AutoLayout,最早从iOS6开始引入使用. 主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换. 网上大量的资料都在介绍xib和storyboard,如何使用AutoLayout,说纯代码使用AutoLayout进行UI布局的越来越少.对于我这个习惯了代码UI布局的人,写个备忘: AutoLayout是什么? 使用一句Apple的官方定义的话 AutoLayout是一种基于约束的,描述性的布局系统. Auto Layout Is a Constraint-Based, De

转: windows下C++ UI库 UI神器-SOUI

转:http://www.cnblogs.com/setoutsoft/p/4996870.html 前言 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言很多方法都可以开发Windows桌面程序,目前国内流行的客户端产品都是C++开发的,比如QQ,YY语音,迅雷等.快速,稳定是我认为的应用软件开发框架最基本的要求,对于UI还有两个要求就是界面美观,配置灵活.C++语言满足了快速的要求,传统的客户端软件开发框架如MFC,WTL等满足了稳定的要求.然

学习IOS开发UI篇--UI知识点总结(四) UITabelView/UITableViewCell

UITabelView:常用属性 @property (nonatomic)          CGFloat    rowHeight;             // will return the default value if unset @property (nonatomic)          CGFloat     sectionHeaderHeight;   // will return the default value if unset @property (nonatom

学习IOS开发UI篇--UI知识点总结(三) UIScrollView/UIPageControl/NSTimer

UIScrollView:常用属性 @property(nonatomic)   UIEdgeInsets     contentInset;               // default UIEdgeInsetsZero. add additional scroll area around content @property(nonatomic,getter=isPagingEnabled) BOOL   pagingEnabled;     // default NO. if YES,

iOS根据图片名进行自动适配(通过类别实现)

在实际开发应用中,美工通常都会根据不同的机型设计出很多套背景图片,而这些背景图片的命名通常都是有规律的,我们刚好可以利用这一特点把图片名称的修改或者拼接写成一个方法,然后根据不同的机型返回不同的适配图片,即可达到自动适配的目的,且避免了图片的失真. 首先,为NSString新建立一个分类,专门用来在图片名后面拼接对应的屏幕信息 #import "NSString+append.h" @implementation NSString (append) -(NSString *)fileN

uitable单元格高度自动适配

uitable单元格高度自动适配的前提是你要开启auto layout选项,不明白或者不熟悉的同学先看看这里 http://lvwenhan.com/ios/430.html 按照很多用例上的步骤,不想却踩了坑: 1,禁止实现代理函数 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath; 2,然后实现 - (CGFloat)tableView:(UITable

iOS - 屏幕适配-之自动适配

最近把xcode升级到7,然后就是各种蛋疼的问题,出现,期中有一个就是屏幕适配的问题,由于 我的项目比较老,所以,一直没怎么注意过屏幕适配,都是ios 自动适配,这在ios8 之前都没有问题,但是在ios9后,这个问题就出现了,启动程序后,,出现上下边黑屏,找了些资料,弄明白: 从Xcode6 GM版本开始,模拟器新增了iPhone6和iPhone6 Plus两种,如果旧的工程直接跑到这两个模拟器中时,默认是"兼容模式",即系统会简单的把内容等比例放大,显示效果有些模糊但尚可接受.此时

iOS 随笔小技巧 弱self 打印当前类行数列数,多人开发自动适配pch地址,获取设备uid的信息

$(SRCROOT)/PrefixHeader.pch自动适配pch地址 __weak __block typeof(self) weakself = self; __weak typeof(self)weakSelf = self; #define DN_DEBUG_LOG(fmt, ...) {NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__); } NSDictionary *if