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元素在界面上的显示,通过布局,你可以告诉用户哪些信息是最重要的,他们的选择是什么,以及所有的东西是如何联系在一起的。

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

  

使用视觉权重和平衡来告诉用户屏幕上哪些元素是相对重要的。大的项目(应用上的一个元素)总是更吸引眼球,给人的感觉就是会比小的重要些。同是大的项目也有利用户点击,这使它们在应用中尤其有用。比如在电话和时钟—用户能在容易分心的环境下正常使用。

  

  • 使用对齐以便浏览以及分组分层沟通。对齐可以让应用看起来更加整齐有序,同时也有利于用户在满屏的信息滚动时保持专注。不同信息组的缩进与对齐指示它们之间的关系,这让用户更容易找到特定的项目。
  • 确保用户能够在默认的尺寸下看懂主要内容。例如,用户应该无需水平滚动就能看到重要的文本信息,或者放大才能看清楚主要图片。
  • 随时准备改变文本的大小。用户希望大部分应用都能合适的响应他们在设置中选择的字体大小。为了应对文本大小的变化,你可能需要调整你的布局。更多这方面的信息,请参考Text Should Always Be Legible.
  • 尽量避免UI出现不一致的情况。一般来讲,有相似功能的元素看起来也应该是相似的。用户通常会认为前后矛盾是有原因的,并且他经常会浪费很多的时间尝试找出原因。
  • 给每个交互控件足够的空间,以便用户能够更好地操作。给每个可点击的空间大约44*44像素的大小。

              推荐                         不推荐

  

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

  1. 【译】UI设计基础(UI Design Basics)--导航(Navigation)(六)

    [译]UI设计基础(UI Design Basics)--导航(Navigation)(六)

  2. 【译】UI设计基础(UI Design Basics)--为iOS设计(Design for iOS)(二)

    2.1 为iOS设计(Design for iOS) iOS体现以下主题: 遵从:UI帮助用户理解界面内容并与内容交互,但绝不会与内容相互冲突. 清晰:文本在任何尺寸下都是清晰易读,图标精确易懂,装饰 ...

  3. 【译】UI设计基础(UI Design Basics)--启动与停止(Starting and Stopping)(五)

    2.4  启动与停止(Starting and Stopping) 2.4.1  立即启动(Start Instantly) 通常来讲,用户不会花超过两分钟的时候去评价一个新的应用.在这段有限的时间里 ...

  4. 【译】UI设计基础(UI Design Basics)--iOS应用解析(iOS App Anatomy)(三)

    2.1  iOS应用解析(iOS App Anatomy) 几乎所有的iOS应用都会用到UIKit框架中的组件.了解这些基础组件的名称,角色,功能可以帮你在应用界面设计时做出更好的决策. UIKit提 ...

  5. iOS10 UI设计基础教程

    iOS10 UI设计基础教程 介绍:本教程针对iOS初级开发人员,基于iOS 10系统,使用Swift 3.0语言讲解如何进行UI设计.本教程内容涵盖UI基础构成.UI元素.自动布局.自适应UI.UI ...

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

    关于AutoLayout,最早从iOS6开始引入使用.   主要功能是使用约束,对视图进行相对布局,以适应不同屏尺的变换.   网上大量的资料都在介绍xib和storyboard,如何使用AutoLa ...

  7. Unity3d 手机屏幕自动适配

    我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...

  8. iOS开发 多屏尺的自动适配(转)

    [iOS开发]多屏尺的自动适配 AutoLayout (纯代码方式) (2014-09-19 09:35:47) 转载▼ 标签: autolayout ios开发 xcode ui 分类: Xcode ...

  9. 重大发现: windows下C++ UI库 UI神器-SOUI(转载)

    转载:http://www.cnblogs.com/setoutsoft/p/4996870.html 在Windows平台上开发客户端产品是一个非常痛苦的过程,特别是还要用C++的时候.尽管很多语言 ...

随机推荐

  1. 转载:安装ie driver和chrome driver

    很多同学在使用webdriver的时候总是忘了安装ie driver和chrome driver, 因此在这里简单介绍一下这2个driver的安装方式. IE driver 在新版本的webdrive ...

  2. SEO的Content里面的内容被转义的解决方法

    看图,不说话 转义的根源 收工 可能不全面,不过确实解决了这个问题,有更好的方法可以提一下,逆天感激不尽

  3. InteliJ Shortcuts

    Open your browser with documentation for the element at the editor's caret Press Shift+F1 (View | Ex ...

  4. c#向数据库插入较大数据(SqlBulkCopy)

    因为要向数据库添加一些数据,数据量较大 1.使用sql语句批量提交速度较慢 2.用事物批量提交,速度一般 3.用SqlBulkCopy方法写入数据,速度较快 /// <summary> / ...

  5. python 常见排序实例

    使用Python 基础排序算法设计,冒泡排序,插入排序,快速排序... 需求 对一组无序数据进行排序算法设计,要求如下: 输入:[1, 3, 5, 23, 75, 34, 456, 86, 22, 7 ...

  6. Unity学习疑问记录之隐藏与显示物体

    Unity3D中隐藏与显示物体的一些操作 http://unity3d.9tech.cn/news/2013/0930/33019.html

  7. Http之Get/Post请求区别

    Http之Get/Post请求区别 1.HTTP请求格式: <request line> <headers> <blank line> [<request-b ...

  8. Spring Framework 4.1.1

    http://repo.spring.io/libs-release-local/org/springframework/spring/4.1.1.RELEASE/

  9. 《TCP/IP作品详细解释2:达到》注意事项--ARP:地址解析协议

    Net/3于ARP和实施密切与路由表相关联的,下图显示了我们的叙述性说明ARP使用样品. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVE9ERDkxMQ ...

  10. NetFlow学习笔记

    NetFlow学习笔记 标签: netflow 由于工作需要,对NetFlow做了一些学习和调研,并总结成文档以供学习分享. 背景:随着系统的升级与漏洞的修补,入侵主机进而进行破坏的病毒攻击方式在攻击 ...