APP界面设计规范一(ios版)规范/资料

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

THE END
1.字体app哪个好?手机字体软件下载字体app软件字体app大全是专为手机用户们打造的手机字体转换神器,这里收集了全网最齐全、转热门、最专业的手机字体软件,其中包括用户们最爱的字体管家、字体大师、爱字体、字体控、方正字酷等众多app,拥有几万种风格不同的字体,支持大部分手机一键更换,操作简单方便流畅,更拥有一键下载、断点续传、一键更换、备份等功能,需要的http://www.downcc.com/k/zitiapp/
2.免费可商用字体包下载小编把一些最常用字体按品牌和用途打包提供下载,为大家节省时间,快速下载并安装到合适字体库,譬如ps字体包、cad字体包、word字体包、方正字库、魔兽字体、懒人字体、篆书字体包等。 一、Mac系统自带字体 Monaco:专为编程和代码编辑设计的等宽字体,以其简洁明了的无衬线设计风格、高可读性和清晰的字符区分度,受到开发者https://www.jianshu.com/p/cd3e3e994658
3.手写中文字体可商用免费下载10款字体介绍 在数字时代,手写字体因其独特的人文气息和个性化特征,越来越受到设计师和内容创作者的青睐。以下是10款可商用的免费手写中文字体,它们不仅美观,而且完全免费,适合用于各种设计项目和内容创作,以增强视觉效果和个性化表达。 1. 清松手写体 清松手写体以其流畅的线条和自然的风格,适合用于品牌标识、邀请函和https://www.vfxcool.com/40049.html
4.优波设计资源列表,一个PS图象处理设计教程和PS资源站 GraphBerry 国外免费素材mockup icon模板等素材分享 Sketch 资源库 Sketch 交流讨论及站点资源字体包提供 界面设计每天看追波和Behance时候,都觉得自己也很牛B,是不是?是不是?是不是? Dribbble 牛B到不需要解释,设计师必备站点,你懂得 https://www.ubuuk.com/
5.超赞分享!干货汇集的前端周刊(第二期)字体设计的功能是信息传递与视觉审美。在本文中,作者整理了100+值得设计师们关注的优秀字体,一起来Enjoy吧! 2. 网页配图之道!八条实战学来的首图设计技巧(一) 地址:http://t.cn/R5r1rY2 如何设计首图,是网页设计之中一个非常重要的问题。为此,我们就此特献出八条设计技巧,全是来自实际经验,以期和大家共同探https://www.imooc.com/article/10365
6.设计字体的app软件大全设计字体的app推荐下载PP助手为您提供设计字体的软件app有哪些大全推荐,在这里我们为您提供设计字体的软件app有哪些软件下载资源,设计字体的软件app有哪些安卓版本、官方版本&老版本下载地址合集,还可查阅相关设计字体的软件app有哪些攻略大全,欢迎到PP助手下载。https://wap.pp.cn/topic/497868/
7.字由官网千款免费字体一键使用,设计师必备字体工具字由是免费的字体管理工具,为您提供900+字体免费商用,支持在PS、AI、ID、XD、Figma、Sketch、CDR等设计软件中一键应用字体,提供AI识字、字体特效等实用功能,为您的设计提质加速,超百万设计师正在使用字由https://www.hellofont.cn/
8.设计必备:最新最全免费可商用中文字体,一次都给你整理好了昆明设计必备:最新最全免费可商用中文字体,一次都给你整理好了|奥远科技是专注于信息化建设与互联网产品开发的高新科技企业,主要服务于百强企业、上市公司、大型集团网站建设。承接大型电商网站、复杂功能型网站、APP、微信、小程序,oa办公管理系统,ERP管理系统开发。为客户提https://www.aykj.net/view/aykjnet/1/42/view/7444.html
9.优优教程网官网免费自学AIGC就上优优网字体设计教程!手写风格字体怎么做 字体帮字体设计 平面设计教程!视觉轻重的 4 种设计小技巧 老卓设计平面设计 AI教程!仿3D凹凸效果制作 优设基础训练营AI教程 Blender教程!全节点动画!Blender多彩圆环阵列动画来了 太阳鸽鸽Blender教程 SA测评作品集!NO.05 丑小鸭作品集,如何抄成白天鹅的优化思路 https://uiiiuiii.com/
10.设计字体的软件app设计字体的软件app有哪些2022?这是一个追求个性的时代,一款好看又有趣的字体能一定程度上表明使用者的风格。那么设计字体的软件app有哪些2022呢?接下来小编就和大家一起了解一下现在好用的字体设计软件,大家如果发现适合的直接点击软件下的按钮进行下载。 这是一个追求个性的时代,一款好看又有趣的字体能一定程度上表https://www.18183.com/soft/4360710.html
11.app设计字体规范.pdf*次级内容字体大小:36PX *底部导航内容字体大小:28PX 2.###颜色 (1)*主背景色:#F3F3F3 *登录页面背景色:#FaFaFa *主前景色:以APP主色调为准 *次级前景色:以设计效果图为准,具体到时候填上。 (2)*标题颜色:#FFFFFF *主内容颜色:#333333 https://m.book118.com/html/2024/0314/8062141051006045.shtm
12.app界面设计字体规范A:选择App界面和UI设计界面的字体时,应考虑易读性、一致性、对比度、可访问性、个性化、字体大小、行间距和字间距等因素,通过综合考虑这些因素,可以创建一个既美观又易于使用的应用程序或UI设计。 2. Q:为什么在选择App界面和UI设计界面的字体时要考虑可访问性? https://www.kdun.com/ask/53506.html
13.字体大全下载安装历史版本 标签:字体设计字体 介绍 小编精选数百款中英文字体, 下载、导出、安装支持字体预览,文案选择,晒图分享可用精美图片+精选文案+你喜欢的字体生成制作属于你的个性图片,用于分享与发送朋友圈 开发者:辽宁鲲鹏科技有限公司 备案号:辽ICP备2020014602号-3A 字体大全app下载安装失败或使用异常,请 -> 一键举报猜https://m.liqucn.com/rj/938483.wml
14.AppStore上的“字体大全字体大全,您的 iPhone/iPad 必备的专业且免费的字体管理 App, 可以安装数百款中英文字体。 主要功能: * 每一款字体都精心设计了预览图片 * 每一款字体都进行了安全扫描和安装验证 * 一键收藏您喜爱的字体 * 所有字体均免费下载 * 安装成功后可导出 https://itunes.apple.com/cn/app/id1217361219
15.手机app设计一般用什么字体,开发手机APP客户端一般用什么字体手机字体颜色是系统默认的,更改不了,除非获取root权限后就可以更改,比如kingroot、手机管家类的软件,也是可以的。 3,APP 设计如何显得清晰用什么字体 黑色加粗的字 不一样的。网页默认字体是宋体12号字,以及14号字,我们发现我们浏览网页只要是12号字,或者14号,看起来特别清晰,实际上这跟系统默认有直接关系。app设http://m.netbei.com/soft/fonts/13214.html
16.Fontiyapp下载Fontiy(手写字体设计)下载v1.6安卓版Fontiy是一个手写字体设计工具.在手机上制作一款原创手写字体,应用会自动保存您的书写草稿,方便用户随时阅览字体、查看字体设计进度.使用Fontiy软件,轻松制作各种优雅的手写字体.欢迎感兴趣的用户来IT猫扑下载应用! Fontiy app介绍 Fontiy(手写字体)在设置一个你的专属字体,只需要轻松的几步就能将你的手写英文字体变成https://m.itmop.com/downinfo/330327.html
17.字体下载字体电脑版下载字体app2024下载电脑字体软件用于管理、浏览和安装字体,以及进行字体的设计和编辑。电脑字体软件不仅可以帮助用户更好地管理自己电脑中已有的字体,还可以通过下载新的字体来满足用户的需求。同时,它们还提供了丰富的字体效果和特殊字体样式,让用户可以轻松地为自己的文档、设计和网站添http://www.onlinedown.net/zt/80286/
18.摄图网正版高清图片免费下载新年快乐2025手写字体 元素| Merry Christmas 模板| 中国风大字报除夕祝福全屏海报 模板| 元旦跨年红色大气长屏海报 模板| 蛇年2025元旦创意全屏海报新年海报 模板| 2025国际主义风趣味蛇年春节元旦祝福长屏海报 模板| 凹凸质感喜迎元旦长屏海报 模板| UI设计国家公祭日app启动页 元素| 二十四节气冬至手写https://699pic.com/
19.深入了解APP设计规范,3个要点轻松拿捏!在设计APP的布局时,还需要考虑到可访问性的问题。可访问性布局是指设计和开发APP时,考虑到用户的特殊需求和使用方式,以确保所有用户都能够方便地访问和使用APP,是十分重要的APP设计规范。 例如,对于视力障碍的用户,可以通过提供高对比度的颜色和大字体的文字,以帮助他们更好地阅读和理解页面内容。对于听力障碍的用户https://pixso.cn/designskills/specifications-of-app-design/
20.安卓ios网页常用字体以下属于app界面设计常用字体的是?2. 在每个项目设计中只使用1到2个字体样式,通过对字体大小或颜色来强调重点文案,如图的界面设计中,都是通过字体大小、粗细来区分界面内容中的层级关系。字体用得越多,越显得不够专业; 3、不同样式的字体,形状或系列最好相同,以保证字体风格的一致性; https://blog.csdn.net/weixin_44180173/article/details/123648806
21.appui设计规范命名(沟字体设计规范)Android UI规划字体大小规范?Android UI规划字体,因为android厂商和设备之多,现在没有特定的规范,但https://iask.sina.com.cn/jxwd/diidIK5249rx.html