详细解析IOS平台设计规范和常用尺寸

旧岛离人心_

旧岛离人心_

2016-02-16 23:01

下面是个简单易学的详细解析IOS平台设计规范和常用尺寸教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

此文分别从控件+布局+模态情景+手势交互+动画+字体等六个方面介绍了一些iOS平台设计的基础规范,有志于UI设计的童鞋推荐收藏起来,将来要做相关的设计可以直截了当戳进来学习。

一、UI的控件概述:

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

1、框架UI的元素分为4类:

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

A:栏:状态栏目和导航栏的结合体;

B:内容视图:应用显示的内容信息,包括相关的交互行为,例如滚屏、插入、删除等操作进行排序;

C:控制元素:产品行为或显示的信息;

D:临时视图:临时向用户提供重要的信息,或提供额外的功能和选项。

2、框架UI的尺寸:

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

3、图标icon的尺寸:

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

二、UI的布局概述:

1、可点击对象的区域:尺寸不要小于44*44px;

2、将重要的内容和功能放在权重高的位置,将重要的元素放在前半屏比较好,对于阅读习惯从 左到右的用户来说,更贴近屏幕左侧位置容易引起关注的;

3、利用视觉表现形式的权重和平衡,尺寸较大的元素具有更高的权重,对于尺寸较小的元素来 说,更能吸引目光,看上去更加重要;

三、UI的模态情景概述:

1、模态:一种用来承载特定内容、功能或体验的模式,有其自身的优缺点。它可以帮助用户完 成某些任务,或在不受干扰的情况下获取信息,但会暂时性的强迫用户停止与应用其他部分 的互动;

2、保持模态任务的简单、简短、易聚焦:不要将模态视图打造的好像是嵌在应用当中的迷你应用;

3、始终提供一种明显而安全的退出方式:要确保用户在退出模态视图时,能够对接下来要发生的 事情有明确的认知;

4、使用警告框来传递那些必不可少的重要信息,通常还要提供可执行的功能选项。

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

四、UI的手势交互概述:

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

A:通过点击(tap):按压或选择一个对象;

B:通过拖拽:滚屏或移动对象(将从界面的一边移动到另一边);

C:通过滑动(flick):快速滚屏或移动对象;

D:通过一个手指轻扫(swipe):可展现更多内容,例如:列表的删除按钮,从界面顶端展开通知中心;

E:通过双击(double tap):可将内容放大置于屏幕中间,主要是放大和缩小的转换;

F:通过双指涨开(pinch open)或闭合(pinch close):对内容进行放大或缩小;

G:通过长按(touch and hold):在可编辑或可选择的文字上显示放大镜,用来定位光标;

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

H:通过摇晃(shake)机身可执行撤销或重做的操作。

五、UI的动画概述:

1、漂亮而精致的动画效果遍布于ios各处,它们使应用体验更具动态性,更加吸引人,精细而恰 当的动画效果可以:

A:传达状态

B:增强用户对于直接操作的感知

C:通过视觉化的 方式向用户呈现操作结果

详细解析IOS平台设计规范和常用尺寸,PS教程,图老师教程网

2、尽可能与ios内置的应用的动画模式保持一致:人们已经习惯内置应用当中各种精妙的动 画效果,实际上,用户往往会将内置应用当中的动效看作一种体验的标准,例如切换视图时的 平滑过渡效果,切换横竖屏时的流畅反馈,或是能表现出各种物理效果的滚屏动画等等,这些 都逐渐成为了人们预期当中的一部分。

六、UI的字体概述:

1、字体是ios7设计的关键,大多数操作都是点击文字或点击图标,按钮也会有,但是占的比重很小;

2、苹果的默认字体是Helvetica Nenu,一种纤细简单的文字,但那不是你唯一的选择;

3、Ios7的字号稍微加大了,主要由于它的用途,而且文字之间的层级关系至关重要,利用颜色 和不同的粗细,来保持文字的布局和UI元素的清晰易懂。

4、苹果字体规格说明:

A:导航栏标题:medium 34px;

B:按钮和表头:light 34px

C:表格标签:Regular 28px;

D:Tab页图标标签:Regular 20px

展开更多 50%)
分享

猜你喜欢

详细解析IOS平台设计规范和常用尺寸

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析IOS平台设计规范和常用尺寸

详细解析网页视觉设计规范

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页视觉设计规范

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

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

详细解析软件UI设计规范分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析软件UI设计规范分享

浅谈IOS和Android 界面设计尺寸规范

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
浅谈IOS和Android 界面设计尺寸规范

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

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

详细解析电商海报设计的常用尺寸分享

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析电商海报设计的常用尺寸分享

详细解析后台系统规范设计心得

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析后台系统规范设计心得

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

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

13个户外人像拍摄必备的摄影技巧

13个户外人像拍摄必备的摄影技巧

详细解析平面设计师的成长之路教程

详细解析平面设计师的成长之路教程
下拉加载更多内容 ↓