Ps:Android端的小伙伴不要着急,下次小编整理Android设计规范,大家静静等待哦!
开始介绍之前先帮大家梳理一下本文内容,方便各位亲们更好的掌握并了解本文:
一、ios全部界面尺寸及规范
下图为是iphone全部型号对应的尺寸:
二、尺寸总结
2.1启动图标尺寸输出列表(单位:px)
1024x1024180x180120x120114x11487x8758x5857x5729x29
2.2引导页图片尺寸输出列表(个别情况要去掉状态栏高度)
Iphone1/2/3(@1x):640x960px(640x920px)
iphone4/4s(@2x):640x960px(640x920px)
iphone5/5c/5s/SE(@2x):640x1136px(640x1096px)
iphone6/7/6s/7s(@2x):750x1334px(750x1294px)
iphone6plus/7plus/6splus/7splus(@3x):1242x2208(1242x2148px)
iphone6plus/7plus/6splus/7splus横屏(@3x):2208x1242
三、按钮
3.1图标按钮
标签栏中的按钮icon应该有两种状态:默认状态下的1或者1.5pt笔画宽度的轮廓样式,以及纯色填充的活跃状态。
注:
不要再按钮上添加任何额外的效果,比如阴影、渐变等。按钮icon应该在一个透明背景上以一种纯色进行绘制--icon的形状作为遮罩。
每个互动的元素需要有充足的空间,从而让用户容易操作这些内容和控件;
普通屏幕中所有能点击的按钮/图片,最小可点击区域为:44x44px;
Retia屏幕中所有能点击的按钮/图片,最小可点击区域为:88x88px(实在小的图标可以且上空白像素以满足需求);
3.2按钮状态及样式
按钮状态主要分为普通(normal)、选中(selected)、按下(highlighted)、不可点(disabled)四种,大部分按钮都包含了这4种状态。
按钮样式包括三种:第一种是直角;第二种是圆角(圆角为8px);第三种是全圆角。
四、常用设计元素
4.1状态栏(Statusbar)
4.2导航栏(Navigationbar)
导航栏通常在屏幕的顶部,状态栏下方。默认情况下,导航栏颜色是半透明的,也可以是纯色的、渐变的、或者是自定义的位图形式,在长页面中导航栏下面还有模糊的背景。
4.3工具栏(Toolbar)
工具栏通常在屏幕的下方,包含用于管理或者操作当前视图中内容的一些操作;和导航栏类似,工具栏的背景填充也能调整,默认情况下工具栏本身是半透明的,在其下方还有模糊的视图内容。
当一个特定视图要求三个以上主要活动,但放在导航栏上又显得凌乱时,建议可以使用工具栏(作参考)。
4.4搜索栏(Searchbar)
搜索栏默认有两种风格:突出的和最小化的。两种类型的搜索栏在功能上是一样的。
1.只要用户没有输入文本,搜索栏中会展示占位符文本。
2.键入搜索项目后,占位符消失,一个清晰的删除按钮会出现在搜索栏的右侧。
搜索栏可以利用一个提示--一个短句来介绍搜索的上下文环境。比如"输入标签名、用户名"
4.5标签栏(Tabbar)
标签栏通常在屏幕的底部。默认情况下,导航栏颜色是略半透明的,在长页面中标签栏下面也有模糊的背景。
一般iphone上最多展示5个标签,一旦标签数量超过了可容纳的最大数量,更多的标签将隐藏在更多标签中,并且有一个选项可以重新排列标签的顺序
4.6视图(view)
(a)表视图(Tableview)
表视图以单列或者多列形式展示少数或者多个列表风格的信息,并有能将内容分组的选项。根据你展示的数据类型,通常可使用两种基本的表视图风格:
无格式的:
分组样式:
分组表视图允许用户对内容进行分组。每个分组可以有页眉(最佳用法是描述类组的上下文环境)和页脚(适用于帮助文本等)。一个分组的表视图至少需要包含一个类组,并且每个类组至少要包含一行内容。
对于以上两种表视图类型,可用几种风格来展示数据,以方便用户快速扫描、阅读和适当调整内容。
默认:
默认的表视图有一个居左对齐的可选图片和标题。
带有副标题:
在每行标题下展示小字号的副标题,适用于进一步的解释说明或者简短描述。
带有数值:
(b)活动视图(Activityview)
活动:活动页面用来执行可用操作列表中的单项操作,并且强迫用户确认或者取消某个活动。
在竖屏模式下(以及尺寸比较小的横屏模式下),活动以按钮列表形式滑入,并呆在屏幕的底部。这种情况下,活动列表应该有一个取消按钮来关闭视图和执行任何列表中的Action。
(c)提醒视图(Alertview)
提醒视图的目的是用来通知用户一些关键性的信息,并有选择地迫使用户做出选择。
提醒视图通常包含一个标题文本(最好不要超过一行)、一个(纯信息提醒,比如"好")或者两个按钮(要求用户做出决定,比如"取消"或"好")。
(d)编辑菜单(Editmenu)
用户可使用编辑菜单执行复制、粘贴以及剪切等操作。虽然你能控制用户可以选择哪个操作,但是编辑菜单的视觉外观是设定好的,不能重新配置,除非你设计一个完全自定义的编辑菜单。
(e)弹出视图(Popovers)
弹出视图是一种非常强大的临时视图,可包含类似导航栏、表视图、地图或者web视图等对象。随着弹出视图所包含内容和元素的增加,其窗口也能滚动展示。
五、字体
5.1字体的选择
下面是主流字体设计方法:
5.2字体的大小
今天小编整理了一下不同尺寸下不同功能字体大小,如下图所示:
5.3UI规范命名常用字
normal(正常)、pressed(按下)、selected(选中)、disabled(禁用)、visited(已访问)、hover(悬停)、btn(按钮)、icon(图标)、sign(标记)、list(列表)、menu(菜单)、view(视图)、panel(面板)、sheet(薄板)、bar(栏)、statusbar(状态栏)、navbar(导航栏)、tabbar(标签栏)、toolbar(工具栏)、switch(切换开关)、slider(滑动器)、radio(单选框)、checkbox(复选框)、bg(背景)、mask(蒙版/遮罩)
六、工作流程
6.1项目流程
(1)需求沟通和评估
(2)设计用户界面,创意策划
项目正式启动后各个部门进行项目的碰头会议,设计部门开始设计UI(产品界面)和UE(用户体验),针对产品开展创意设计,形成初步的效果图;
(3)DEMO展示、代码开发
设计部门最终确认高保真视觉图,并且完成标注、切图,工程师开始进入研发阶段;
(4)测试上线
(5)推广维护
成功上线后的app就可以通过企业自身的运营推广让app成功脱颖而出,在运营推广中不断与时俱进,维护更新,让APP永保活力。
具体的我们可以看下这个APP开发标准流程信息图:
6.2UI项目文件规范
(a)项目立项,归档整理
(b)设计稿
一般设计稿都是以iphone6(750*1334)作为基准尺寸来进行设计,原因如下:
1.从中间尺寸向上/向下适配时,界面调整的幅度最小,750px适配到640px和1242px偏差不会太大;
2.iphone6plus分辨率为1242*2208px(即iphone6的1.5倍),很多情况下这两种尺寸可以用1.5倍直接等比适配;
3.大屏时代依然以iPhone5/iPhone5s小尺寸为设计基准,显然不合时宜,设计师的视角、思路都会被小屏幕束缚;
综上所述,iphone中750*1334px最适合做基准尺寸。
(c)页面标注
1.标注神器:MarkMan、Parker
2.图标模块的宽高,彼此之间的间距;
4.背景颜色、透明度;
5.按钮在不同状态下的颜色;
(d)切片资源输出
1.切图神器:cutterman
2.所有切图尺寸均为偶数,格式为png_24;
3.考虑最小点击范围88*88px,如果按钮较小,周围空出来切88*88px的大小;
4.切片命名方法:
iphone1/2/3:模块_类别_功能_状态@1x.png
iphone4/5/6/7:模块_类别_功能_状态@2x.png
iphone6plus/6splus/7plus/7splus:模块_类别_功能_状态@3x.png
装换关系:@1x(非Retina屏):@2x:@3x=1:2:3
举例:home_nav_menu_pre@2x.png
5.启动页需要另外命名
iphone1/2/3:Default.png
iphone4/4s:Default@2x.png
Iphone5/SE:Default-568h@2x.png
Iphone6/6s:LaunchImage-800-667h@2x.png
Iphone6plus/6splus:LaunchImage-800-Portrait-736h@3x.png