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之后不管你是想要什么样的字体都是轻而易举,感兴趣的话就跟着小编一起来看看好啦。 No.1 字体https://www.wandoujia.com/bangdan/399579/
2.手机字体APP下载好用的手机字体APP手机字体APP大全艺术设计是以平面设计为基础的,而字体设计又是平面设计的重要组成部分。因此不论是平面设计,抑或是字体设计,二者在人类的发展史上都发挥着不可磨灭的作用。 字体的重要性,可想而知,小编今天就给大家带来多年收集的手机字体APP大全,希望大家在工作学习中能熟练运用掌握!http://www.kkx.net/zt/88801.html
3.2024创意字体创意字体大全创意字体下载创意字体不仅为我们的生活增添了很多乐趣,同样也能让你我们在设计上、工作上或者是学习上都能有新意.艺术字体的用途比较广泛,例如贺卡,海报,视频,游戏等等领域都会用到,这不仅开拓了打破了各种局限,还能让你在使用的过程中获得不一样的效果.如果你需要欢迎来当易网下载!http://www.downyi.com/key/chuangyiziti/
4.免费字体App官方版下载安装免费字体为您提供数百款新颖字体免费下载,华军软件园提供免费字体app官方版下载地址,有需要的用户可免费下载使用! 免费字体软件特色 卡通,炫酷,书法,手写等字体应有尽有,还有漂亮签名制作,字体设计,时尚的背景元素,快来下载免费字体,成为新潮的字体一族吧 https://mip.onlinedown.net/soft/10121612.htm
5.有关手写艺术字的软件手写字体分类发现字体7个字体 简介: 有关手写艺术字的软件 OceanSansStd-XBoldExtIta 语言:英文 下载 VectoraLTStd-Bold 语言:英文 下载 MarigoldStd 语言:英文 下载 GuardiLTStd-BlackItalic 语言:英文 下载 NewAsterLTStd-It 语言:英文 下载 WarnockPro-BoldIt 语言:英文 下载 ItalianOldStyleMTStd 语言:英文 下载传http://www.qiuziti.com/fontlist2?id=944689
6.字体创意设计的类型有哪些?宋先生,58岁,高血压、糖尿病10年。1年前无明显诱因出现双下肢发麻、怕凉、走路乏力明显,因无其他不适故未予重视。近3个月来上述症状逐渐加重,间歇性跛行人院后体格检查:双下肢皮肤颜色苍白,腿部汗毛稀少,双小腿轻度萎缩,右足趾甲床充盈度差,右足踝区以下皮肤温度低,右侧腘动脉、胫前动脉、胫后动脉搏动明显减弱https://www.shuashuati.com/ti/f5a2603cdb3a4dd78a6ada838d6fff4a.html?fm=bd110b4bb93d3b447a9a2ff1b2b24bb71c
7.自做字体的app有啥用?自做字体的app有啥用? 字体设计是一种很有意思的创意工作,可以通过自己喜欢的风格和风格进行创造性表达,让自己的创作获得更多的自由度和个性化。在过去,这种工作需要大量的计算机软件和硬件来进行,但随着智能手机和平板电脑的流行, 字体设计是一种很有意思的创意工作,可以通过自己喜欢的风格和风格进行创造性表达,让https://www.yimenapp.com/kb-yimen/24138/
8.40个创意新闻APP界面UI设计扫码关注公众号 获取更多设计资源↓↓↓ 【白嫖福利 | 限时领取】摹客超级版会员(价值1250元)解锁摹客协作、摹客RP、摹客DT所有功能。公众号主页发送 “激活” 免费获取 激活码 ↓↓↓公众号主页发送 “字体” 获取 全套可商用字体包↓↓↓ 公众号主页发送 “vi” 获取 500个著名品牌vi设计手册http://www.sj33.cn/digital/uisj/201609/46372.html
9.制作宣传单的app——宣传创意设计宣传单,极简制作应用制作宣传单的app注重创意设计,提供了多种多样的模板和设计元素供用户选择。用户可以根据自己的需求选择不同的模板风格,如简约、时尚、传统等,还可以自由组合不同的设计元素,如图片、文字、图标等,创造出独一无二的宣传单。该应用还提供了丰富的字体和颜色选择,用户可以根据自己的品牌形象和宣传目的进行个性化定制,使宣https://www.gaoding.com/article/1678328458202591232
10.颜格视觉专注提供国外创意广告设计图片素材下载颜格视觉专注国外创意广告设计图片素材下载的网站!提供包括样机素材,平面素材,UI设计,icon图标,ppt模板,演示文稿,字体下载,图片下载,图片素材,设计模板等国外设计素材下载服务,让每一个专业的设计师都能轻松实现自己的想法。https://youngem.com/
11.我收藏的这100+个”杀手级“网站,你用过几个?提到UI设计创意,除了 Dribble,就不能不提 Behance。 14、Colorhunt - 调色板工具 网址:Color Hunt Colorhunt是一个调色板的网站。前端再也不用烦恼页面色了! 15、SchemeColor - 配色工具 网址:schemecolor SchemeColor 工具可以帮助你选择正确的主题,它可以帮助我们可视化并为我们的网站选择合适的一组颜色。 https://developer.aliyun.com/article/1248577
12.优波设计Sketch 交流讨论及站点资源字体包提供 界面设计每天看追波和Behance时候,都觉得自己也很牛B,是不是?是不是?是不是? Dribbble 牛B到不需要解释,设计师必备站点,你懂得 Behance 全球领先的创意设计类聚合平台[VPN] UI中国 前身为 iconfans,国内最专业的UI设计平台 https://www.ubuuk.com/
13.视觉中国VCG.COM版权图片插画矢量视频音乐图片视频音频字体 元宵(汤圆)VCG211476621305 【AI数字艺术】圣诞节主题背景VCG211459537842 【AI数字艺术】蛇年的生肖蛇VCG211530417334 茫崖翡翠湖VCG211427490187 微缩创意春天绿叶室内装修的工人VCG211373330183 杭州龙井采茶VCG211431426250 戴机车墨镜的小猫咪VCG211436521208 https://www.vcg.com/
14.威客中国创意设计悬赏平台埃舍尔平面设计工作室¥3000 原创logo设计全套教育门窗酒店餐饮品牌公司企业VI设计标志字体CI视觉识别手册 埃舍尔平面设计工作室¥16000 高端logo设计原创公司商标企业标志品牌字体图形店名设计满意为止 埃舍尔平面设计工作室¥1600 高端名片定制制作免费设计订制高档卡片订做定做双面印刷pvc明片宣传公司商务创意简约体验广告外卖https://www.vikecn.com/
15.设计师必备!10个好用的App设计Word模板推荐2. 创意工坊——如果你是个创意无限的灵魂设计师,这款模板带有丰富的图形和色彩选项,让你的App设计方案像你的想象力一样无边无际。 3. 商务精英——为了在客户面前展示那份不容置疑的专业感,这个模板以其商业化的布局和严谨的字体选择,让你的App设计提案无懈可击。 http://www.apppark.cn/t-50865.html
16.免费字体app下载免费字体安卓版下载[系统工具]字体多多是一款汇聚数千种免费字体资源的APP,涵盖卡通、炫酷、书法、手写等多种风格。此外,还提供签名制作、字体设计和时尚背景元素,让用户轻松变身字体达人,尽享创意乐趣。快来加入字体多多的行列,体验字体带来的新潮风尚! 应用介绍 字体多多为您提供数千款新颖字体免费下载,卡通,炫酷,书法,手写等字体https://www.downza.cn/soft/10430381.html
17.苹果(IOS)商城图形和设计类付费APP值得购买的应用下面我们来详细盘点美区APP Store图形和设计类付费APP TOP 10的应用: 1. Procreate Pocket 应用介绍: 对于创意专业人士来说足够强大。对每个人来说都很简单。屡获殊荣的 Procreate Pocket 是有史以来为 iPhone 设计的功能最丰富、用途最广泛的艺术应用程序。 http://www.quwaifu.com/news/view/22616
18.摄图网正版高清图片免费下载happy new year手写字体 插画| 2025蛇年数字字体新春佳节红色背景字体设计 背景| 喜庆新年烟花背景 元素| 二十四节气冬至手写毛笔字体 模板| 氛围感圣诞节祝福AI长屏海报 背景| 2025春节背景 元素| 24节气冬至黑白大气毛笔书法艺术字 背景| 红色烟花创意蛇年春节背景 模板| 24节气冬至节气全屏海报 模板|https://699pic.com/
19.“科技创新范”十足,得物App亮相“世界设计之都大会”9月26日,全球设计界的目光齐聚上海。以“设计无界 造化万象”为主题的世界设计之都大会在黄浦滨江举办。 现场,得物App呈现了兼具跨界融合、创意碰撞和科技范的多维度创新秀场。进入带有得物App标识的“极光蓝箱子”,得物App品牌的定制创意字体、AR虚拟试穿技术、各式富有设计感的联名商品如同“开箱体验”一般呈入眼帘http://wenhui.whb.cn/zhuzhan/cs/20230926/541387.html
20.看十个必备的设计师APP当Instagram与字体设计相遇,这个应用就产生了。你可以通过这个应用随时与其他用户分享现实生活中遇到的字体。这个app用起来非常有趣,可以帮助你了解其他人是如何使用不同字体的。这个app会给你很多灵感。你只需要创建一个用户并注册,就可以使用这个应用。同时它还拥有一个整洁的网页,可以让你通过地理位置来搜索字体。Fonthttps://www.douban.com/note/280588756/
21.类似创客贴:平面设计不求人,免费还好用的在线设计APP分享作为没有太多设计功底的小白用户,如何在平面设计过程中,权衡配色、构图、排版、字体、插画……等一系列设计元素? 这里我们给大家带来了3款免费还好用的在线设计?APP。日常生活中又创意设计需求的用户,一定不要错过。 01∣Canva可画 作为全球领先的在线设计平台,Canva可画给用户的第一感觉,往往就是“简单”、“https://www.canva.cn/learn/similar-to-maker-post-2/