详细解析IOS7系统中UI设计的准则

wangyanyu3

wangyanyu3

2016-02-16 22:41

下面是个详细解析IOS7系统中UI设计的准则教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

iOS7 的用户界面设计比以往更卓越,并为用户提供了更具吸引力的独特体验,带来更大的机遇。在正式写代码之前,认真考虑UI设计是否符合这十条设计准则,可以提高App的可用性与吸引力。如果要更深入了解iOS7的设计,你可以阅读苹果官方的iOS人机界面指南,或者下载知乎用户翻译的中文版iOS7人机界面设计指南。

iOS7的10大设计准则涵盖了UI设计的交互性、界面信息可读性、图形设计规范以及信息的组织性等四个方面。读下去,看看你设计的UI都做到了么?

1、格式化内容

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

创建屏幕布局的时候,应该适适配iOS设备屏幕。用户应该一次看清主要内容,而无需缩放或水平滚动。

点此查看更多

2、触摸控制

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

尽量采用专门为触摸和手势设计的界面元素,这样可以使应用程序的交互更加轻松自然。

点此查看更多

3、命中目标

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

设计可触控的控件的时候,尺寸不得小于44x44px,只有这样才能确保触摸的精度和命中率。

点此查看更多

4、字体尺寸

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

文本中的文字尺寸不得小于11点,这样才能确保在常规距离下,无需缩放就可以清晰地阅读。

点此查看更多

5、对比度控制

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

尽量确保文字色彩对比更明显,并且调整文字与背景的对比提高可读性。

点此查看更多

6、间距调整

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

不要让文字出现重叠的状况。适当地增加行高和行间距,提高文字的易读性。

点此查看更多

7、高分辨率

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

为所有图片资源提供高分辨率的版本(@2x)。那些未曾@2x的图像在Retina屏幕上会出现模糊的状况。

点此查看更多

8、防止拉伸

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

始终控制好图片的高宽比,可以缩放,但是一定要避免拉伸,这样可以避免失真。

点此查看更多

9、信息架构

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

创建易于阅读易于调整的布局,确保界面内容的可调整性。

点此查看更多

10、保持对齐

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

详细解析IOS7系统中UI设计的准则,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

让文本、图片、按钮在界面上保持对齐,相似相关内容合理靠近,让用户更容易理解界面信息。

展开更多 50%)
分享

猜你喜欢

详细解析IOS7系统中UI设计的准则

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析IOS7系统中UI设计的准则

详细解析国外IOS7免费设计资源汇总

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析国外IOS7免费设计资源汇总

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析IOS7设计风格的心得和诀窍

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析IOS7设计风格的心得和诀窍

IOS7全新设计的UI和交互

iphone iPhone 5s iPhone 6 iphone刷机
IOS7全新设计的UI和交互

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析IOS7图标设计的七条黄金法则

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析IOS7图标设计的七条黄金法则

详细解析如何轻松打造iOS7风格图标

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析如何轻松打造iOS7风格图标

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

20个插画表现形式的广告欣赏

20个插画表现形式的广告欣赏

浅谈HTML5游戏前端开发秘籍分享

浅谈HTML5游戏前端开发秘籍分享
下拉加载更多内容 ↓