电气自动化技术网

苹果推出的《iOS 人机界面指南》

时间:2014-07-27 来源:腾讯ISUX 编辑:编辑部 点击:次 字体设置:

苹果在WWDC 2013大会上发布了iOS 7,新系统一改5年来的拟物路线,在乔纳森•艾维的主导下,加入了更多的“扁平化”和“极简”现代设计元素。

iOS7系统界面和按钮平面化突显,内置应用图标、解锁画面、主屏幕、通知中心等界面更多地采用极简元素和新的调色方案,苹果核心复杂立体的真实“拟物”风格完全已被削弱,包括之前的皮革、阴影、木质等设计元素也进行了大大弱化,系统界面更简单、更干净了。

开发者该如何设计应用才能和iOS 7系统风格相匹配呢?为此,苹果推出了《iOS 人机界面指南》,内容如下:

 

目 录
1.为iOS7而设计
2.iOS应用解析
3.起始与停止
4.布局
5.导航
6.模态对话
7.交互性和反馈
8.术语和措辞
9.动画
10.排版和颜色
11.图标和图形
12.品牌
13.与iOS的整合

为iOS7而设计 

iOS7 的革新关键词如下:

•遵从:新UI更好的帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力
•清晰:各种大小的文字易读,图标醒目,去除了多余的修饰,重点突出,很好地突显了设计理念
•深度:视觉层次和生动的交互动作赋予UI新的活力,不但帮助用户更好的理解新UI的操作并让用户在使用过程中感到惊喜



无论你是重新设计一个现有的app或是重新开发一个,尝试一下苹果重新设计系统内置app的方式:

•首先,去除了UI元素让app的核心功能呈现的更加直接并强调其相关性。
•其次,直接使用iOS7的系统主题让其成为app的UI,这样能给用户统一的视觉感受。
•纵观全局,以内容和功能为核心来指导设计,从前的设计模式可以先放到一边。

以内容为核心

虽然明快美观的UI和流畅的动态效果是iOS7体验的亮点,但内容始终是iOS7的核心。
这里有一些方法,以确保您的设计能够提升您的app功能体验并关注内容本身。



充分利用整个屏幕。无需使用边框、底图等等多余的UI元素,让内容扩展到屏幕边缘。

天气app是最好的例子:漂亮的天气图片充满全屏,告知用户天气情况,同时也很好的呈现了如每个时段气温等等的其他重要信息。
 



 

尽量减少视觉修饰和拟物化设计的使用。UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。



尝试使用半透明底板。半透明的底板可以让用户看到后面的内容,在某些场景下起到了上下文提示的作用,另一个角度上来说,也让用户(比以前)看到了更多内容。

保证清晰度

保证清晰度是另一个方法,以确保你的app中内容始终是核心。

以下是几种方法,让最重要的内容和功能清晰,易于交互。



大量留白。空白让重要内容和功能显得更加醒目。此外,空白可以传达一种平静和安宁的视觉感受,它可以使一个app看起来更加聚焦和高效。

 

让颜色简化UI。一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个app一个统一的视觉主题。

 

通过使用系统字体确保易读性。iOS7的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论用户选择何种大小的字号都表现良好。



使用无边框的按钮。按钮名称、箭头以及系统颜色向用户展示了交互元素,这些内容替代了原先的带有形状的按钮。联系人界面使用了系统色蓝色箭头文字展示了按钮的导航性。

用深度来体现层次

iOS7经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。



通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。


用户在使用备忘录里的某个条目时,其他的条目呈现在屏幕底部的其他分层上,这样用户可以通过滑动展开所有分类条目(译者按:算是一种提示手段)。


日历有较深的层级,,当他们在翻阅年、月、日的时候,以及增强的交互动画给用户一种层级纵深感(循序切换的层次,从年到月到日)。在滚动年份视图时,用户可以即时看到今天的日期以及其他日历任务。



当用户处于月份视图时,点击年份视图按钮,月份会缩小至年份视图中的所处位置。



类似的过度出现在月份和日期视图的切换时,当用户选择某个日期时,月份视图向外扩展,显示出日期视图。

iOS应用解析 

几乎所有的iOS app都应用了UIKit framework中定义的组件。了解这些组件的名字,作用和构成能够帮助你设计app过程中做出更好的决定。



 

UI组件大致分成以下4种大类:


•Bars:包含了导航信息,告诉用户他们所在的位置并包含了一些能帮助用户浏览或启动某些操作的控制按钮。
•内容视图:包含了app的主体内容以及某些操作行为,比如滚动、插入、删除、排序等等。
•控制按钮:展示信息或者控制动作。
•临时视图(对话窗口):短时间出现,给用户重要信息或者额外的选择或者其他功能。
除了定义UI组件,UIKit也定义对象实现的功能,例如手势识别,绘图,辅助功能,打印支持。

从编程的角度说,UI组件被认为是不同类别的视图,因为他们从UIView得到继承。视图能绘制屏幕内容并且知道用户何时触摸了屏幕。要在app中管理一组或者一系列的视图,通常需要使用一个视图控制器,它能协调视图的显示内容,实现与用户交互的功能并能在不同屏幕内容之间切换。

下面是一个例子,关于视图与视图控制器如何结合并呈现iOS app的UI。

精华频道 移动开发

 

移动开发
精选文摘 iOS7 人机界面设计指南  
2013-07-16  来自 腾讯ISUX  编辑 wangguo 有42203人浏览
iOS 扁平化 设计 苹果 App
 
顶一下
(0)
0%
踩一下
(0)
0%
打 印】【顶 部】【关 闭】【挑 错
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
版权与免责声明:
①凡本网注明"来源:电气自动化技术网"的所有作品,版权均属于电气自动化技术网,转载请必须注明出处“电气自动化技术网http://www.dqjsw.com.cn”。违反者本网将追究相关法律责任。
②本网转载并注明自其它来源的作品,目的在于传递更多信息,并不代表本网赞同其观点或证实其内容的真实性,不承担此类作品侵权行为的直接责任及连带责任。其他媒体、网站或个人从本网转载时,必须保留本网注明的作品来源,并自负版权等法律责任。
③如涉及作品内容、版权等问题,请在作品发表之日起一周内与本网联系,否则视为放弃相关权利。
>> 相关文章
栏目导航:互感器 | 智能电网 | 无功补偿 | 电容器 | 变压器 | 电源 | 避雷器 | 电抗器 | opc | 三菱PLC | 西门子PLC | 欧姆龙PLC | PLC视频教程 | 电工基础知识
© www.dqjsw.com.cn 2008-2013 版权所有 ICP网站备案:渝ICP备11003104号