当前位置:首页>资讯中心
学院新闻:
上海平面设计培训—超赞的iOS 8人机界面指南:UI设计基础

 

为自适应而开发


人们通常想随心所欲(上海平面设计培训)地使用自己喜欢的应用程序。在iOS 8及未来的版本中,你可以使用不同分辨率和自动布局来帮助你定义屏幕布局视图,视图控制器以及需要随显示环境改变的视图(显示环境display environment的概念指的是设备的整个屏幕或者其中一部分,比如一个跳出菜单(平面设计培训)区域或一个分视图控制器的主视图部分)。

 

iOS定义了两个尺寸类别(size class),常规的(regular)和压缩的(compact)。常规尺寸有着较易(上海平面设计培训)拓展的空间,而压缩尺寸约束了空间的使用。想要定义一种显示环境,你需要定义横纵尺寸类型。如你所想,iOS设备可以有横屏竖屏两种不同的使用模式。

 

iOS能随着显示环境和尺寸类别变化而自动生成不同布局。举个例子,当垂直尺寸(平面设计培训)从压缩变为常规时,导航栏和工具栏会自动变高。

 

当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时(上海平面设计培训)都能显示得很好。关于如何在Interface Builder中更好的使用尺寸类别,你可以查阅 Size Classes Design Help


注:在一种尺寸类别中,持续使用Auto Layout进行(平面设计培训)小的布局调整,比如拉伸或压缩内容。

 

下面的实例可以帮助你理解尺寸类型是如何适配不同设备的显示环境。例如:iPad在长宽和横屏竖屏时都使用常规尺寸类型。换句话说,iPad显示(上海平面设计培训)环境一直处于垂直和水平的常规状态。

上海平面设计培训

 

iPhone的显示环境可根据(平面设计培训)不同的设备和不同的握持方向而改变。

 

竖屏时,iPhone6 Plus使用的是常规高度和压缩宽度类型。

 

上海平面设计培训

横屏时,iPhone6 Plus使用的是(平面设计培训)压缩高度和常规宽度类型。

 

上海平面设计培训

其他iPhone型号,包括iPhone6使用(上海平面设计培训)相同的尺寸类型设置。

 

竖屏时,iPhone 6,iPhone 5 和iPhone 4S使用的是压缩宽度和常规高度。

 

上海平面设计培训

横屏时,这些设备在宽高(平面设计培训)上使用的都是压缩类。

 

上海平面设计培训

 

1.3.2 在不同环境提供良好体验

 

当你使用自适应来开发UI时,你可以保证UI跟随(上海平面设计培训)显示环境变化而适当地响应。遵照这些指南,你可以给用户良好的设备响应体验。

 

在所有环境下都保持对主体内容的专注


这是最高优先级。人们使用应用时,与感兴趣的内容发生互动。当使用(平面设计培训)环境变化的同时,改变专注点会让用户感觉到迷失方向,丧失了对应用的控制。

 

避免布局上不必要的变化


在所有环境中类似的使用体验让人们在旋转设备或在不同设备上运行(上海平面设计培训)你的应用时维持使用模式。例如,如果你使用一个网格在水平的常规模式下显示图像,你无需在一个列表中展示与压缩模式下相同信息,虽然你可能调整了网格的尺寸。

 

如果你的应用只在一个方向上运行,那么请直接一点


人们希望在各种握持方式下都可以使用你的应用,能满足(上海平面设计培训)这个期待是最好的。但是,如果你的应用只在一个方向下运行,那么以下几点请务必注意:

 

  • 避免提示人们旋转设备的提示UI出现。让应用清晰地运行在支持的方向下,让用户明白应该旋转设备,而不是添加不必要的引导性混乱。

  • 支持同一个方向上的变化。例如,如果一个应用(平面设计培训)

  • 只能垂直运行,用户无论用左手或是右手握持时都能触及到home键。如果用户在使用应用时180度旋转设备,那最好应用内容也能及时响应并旋转180度。

 

如果你的应用将设备方向翻转视为用户输入(的一种指令),那么就按照程序设定的方式来响应设备翻转


举个例子,一个游戏让用户利用设备翻转来移动游戏中的部件,那么这个(上海平面设计培训)游戏应用本身(的UI)不能对翻转屏幕产生响应。在这种情况下,你必须关联两个需要变化的方向,并且允许人们在这两个方向切换直到他们开始(了解并执行)应用的主体任务。一旦人们开始执行主要任务,那就开始按程序设定的那样来响应设备的动作吧。

 

1.3.3 使用布局来沟通(Use Layout to Communicate)

 

布局包含的不仅仅是一个应用屏幕上的UI元素外观


你的布局,应该告诉用户什么是(上海平面设计培训)最重要的,他们的选择是什么,以及事物是如何关联起来的。

 

提升重要内容或功能,让用户容易集中注意在主要任务上


有几个比较好的办法是在屏幕上半部分放置(平面设计培训)主要内容,以从左到右的习惯,从靠近左侧的屏幕开始。

 

上海平面设计培训


使用视觉化的重量和平衡向用户展示相关的屏显重要元素


大型控件吸引眼球,而比小的控件更容易在出现时被注意到。而且大型控件(上海平面设计培训)也更容易被用户点击,这让它们在应用中更加有用——就像电话和时钟(上面的按钮)——用户经常在容易分心的环境中能(正常)使用它们。

 

上海平面设计培训


使用对齐来让阅读更舒缓,让分组和层次之间更有秩序


对齐让应用看起来整洁而有序,也让用户在专注于屏幕时更有空间,从而专注于重要信息。不同信息组(上海平面设计培训)的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。

 

确保用户能明白处于默认尺寸的首要内容的含义


例如,用户无需水平滚动就能(平面设计培训)看到重要的文本,或不用放大就可以看到主体图像。

 

准备好改变字体大小


用户期望大多数应用能有设置字号大小的功能。为了适应一些文本大小的变化,你也许需要(上海平面设计培训)调整布局;想要得到更多文本显示相关的信息,你可以查阅章节Text Should Always Be Legible.

 

尽量避免UI上不一致的表现


在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们(上海平面设计培训)倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试所以建议类似功能外观一样)。

 

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件

 

常用的点按类(平面设计培训)控件的大小是44 x 44点(points)。

 

上海平面设计培训

发布时间 : 2014/12/20 11:58:54 | 分类 :

焦点资讯
学员评价
  •  王晓露
    海尔集团  营销部长
    很喜欢这里的老师,教课很用心,很博学,幽默,这是我一生中经历过的最好的培训学院。感受颇多,让我认识了一个全新的网销世界,懂得如何去做网络营销!
  •  孙丽
    海尔集团 美工
    学院环境优美安静,老师讲课生动,很有亲和力,使人听后有求知欲,案例分解精辟,很实用!活动有趣,启发大;理论性与实践性相结合,实战上课,指导性强!
收缩