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.UI菜单栏素材UI菜单栏png图片下载觅元素是设计素材的免费下载网站,提供UI菜单栏素材,UI菜单栏png图片等素材免费下载,下载UI菜单栏素材就来觅元素。https://www.51yuansu.com/search/UIcaidanlan.html
2.搜索框展示图片搜索框展示素材搜索框展示模板免费下载六图网为您提供45295张搜索框展示设计作品免费下载服务,您还可以找到搜索框展示图片、搜索框展示素材、搜索框展示模板等设计素材,我们为您提供搜索框展示图片下载,搜索框展示模板下载、搜索框展示素材下载等服务!https://m.16pic.com/sucai/11249436.html?from=singlemessage
3.百度搜索框图片免费下载百度搜索框素材百度搜索框模板千图网为您找到3688张百度搜索框相关素材,千图网还提供百度搜索框图片,百度搜索框素材, 百度搜索框模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/baidusousuokuang.html
4.搜索栏素材网站图片免费下载搜索栏设计 2 一珂聊设计 黑煤球球了 楠北楠 古灵精怪1 是化雪 对啊设计君 XYIYIYI 交互设计之(一)搜索栏设计 16 OTTUI设计 关于搜索栏能否不在最上面的一种思路 1 极致丶 1 DeanKenStudio 内容营销专家刘鑫炜:AI搜索的查询结果都来自哪里? https://www.zcool.com.cn/tag/ZMTkwMzQ3Ng==.html
5.网页搜索框元素PNG图片素材下载搜索PNG本模板为网页搜索框元素,尺寸为2480*2480像素,格式为photoshop,风格,可用于边框纹理演讲展示,文字图片可以直接替换,使用简单方便。https://m.tukuppt.com/muban/jpyjjvnb.html
6.网页搜索栏图片素材搜索栏素材jpg图片格式mac下载素材可以为您的创意项目找到完美的图片素材,免费批量打包下载。网页搜索栏图片素材包含:互联网,搜索,万维网,域名,网站,链接,技术,商业,主持人,在线等素材元素_jpg图片格式_4928X3264像素https://sc.macz.com/pic/70071.html
7.怎么搜索照片来源?怎么查找照片的来源2.查看匹配的结果:Google图片搜索会显示与上传的图片相似的其他图片以及包含该图片的网页链接。您可以逐个点击链接,以查看图片是否展示于可信的网站或在线内容库中。 3.运用反向图片搜索:在Google图片搜索栏的右侧,您可以使用反向图片搜索来查找该图片的来源。点击“相机”图标,选择“上传图片”选项,然后上传图片或输入其...https://www.duote.com/tech/202312/519785.html
8.UI设计命名方式及常用控件分享1.2 搜索栏 search bar 有时会与导航栏合并,有时会单独排列在导航栏下方。另外在Ant design中,search bar被划分在输入信息类控件(data entry) 1.3 标签栏/菜单栏 标签栏是标签导航中的核心控件,与之对应的是抽屉导航中的抽屉控件(drawer),抽屉式导航最早运用于安卓系统,但在现今移动端设计边界趋向融合,一切以高效...https://huke88.com/article/3949.html
9.PremierePr2024最新版软件安装包下载+详细安装教程图片水印搜索栏输入获取 根据您使用的型号和系统,您可能会经历更快的更新。用户?Premiere是Adobe的视频编辑软件,它提供了一整套视频编辑工具,允许用户创建专业视频。Premiere可用于编辑,颜色调整,添加音频,特效和过渡,允许用户对视频执行不同的操作。 许多用户已经证明,Premiere Pro 2024的标题设计更简单、更快。在Adobe...https://m.sohu.com/a/760664877_121893722/
10.iOS——UI设计界面小知识点5. 范围栏(scope bar) 范围栏:一般附加于搜索栏,让用户定义搜索范围,如搜索阅读时,出现的短篇阅读、文学、小说等 6.标签栏(Tab Bars) 标签栏:APP底部区域,便于用户在不同的子任务、视图和模式中进行切换。iOS设计规范中tab栏一般有五个、四个、三个图标的形式,把宽度平均分配成五、四、三份。在横屏或竖屏...https://www.jianshu.com/p/24c616347e3e
1.搜索框图片素材搜索框图片大全智能精选为您提供丰富的搜索框图片,搜索框素材,搜索框高清图片素材下载。助力您对于搜索框素材高清图片的创意设计灵感,充实饱满作品,查找更多素材高清图片作品选择摄图网下载https://699pic.com/image/sousuokuangsucai.html
2.搜索栏专题模板搜索栏图片素材下载我图网搜索栏专题为您整理了12159个原创高质量搜索栏图片素材供您在线下载,PSD/JPG/PNG格式搜索栏模板下载、高清搜索栏图片大全等,下载图片素材就上我图网。https://so.ooopic.com/sousuo/2298582/
3.百度搜索框素材百度搜索框图片百度搜索框图案觅知网为您找到494个原创百度搜索框设计图片,包括百度搜索框图片,百度搜索框素材,百度搜索框海报,百度搜索框背景,百度搜索框模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于百度搜索框素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,https://www.51miz.com/so-sucai/1687042/p_1/
4.win10搜索栏有个卡通图片应该怎么关闭?win10搜索栏右侧图案去除方法介...win10搜索栏右侧图案去除方法介绍 搜索框是win10自带的一个功能,用户们可以通过搜索框来进行一些全局搜索,这个功能的操作方式十分容易,不过有的用户们却发现自己的搜索框旁边多了个图案,搜索框上的图案其实是Windows更新后的小组件,点击就可以看到各种新闻内容,那么应该如何关闭呢?下面一起来看看吧。https://blog.csdn.net/onecdll/article/details/138180672
5.AndroidStudio实现搜索栏Android这篇文章主要为大家详细介绍了Android Studio实现搜索栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!【 如果你想靠AI翻身,你先需要一个靠谱的工具!】 前言 一、何为自定义控件? 系统自带的控件都是直接或间接继承自View的,...https://www.jb51.net/article/209980.htm
6.从您的桌面搜索必应缤纷桌面让您不用打开浏览器便可开始搜索。搜索或更新每日主页图片时需要连接互联网。搜索栏使用搜索栏开始搜索,查看搜索建议并管理您的搜索历史记录。您可以将搜索栏停靠到桌面顶部,随意移动到任何地方,最小化应用时在任务栏中显示小搜索框,以及更换它的颜色。https://help.ads.microsoft.com/apex/index/20/zh-CHS/30004
7.搜款助手(图搜插件)使用教程17帮助中心3、若您选择的是“复制图片链接到搜图片首页”的方式,请确保您黏贴的是正确的图片地址。获取图片地址的方式如下(以360浏览器为例,鼠标右击网页内的目标图片,选择“复制图片网址”,然后黏贴至搜图首页的搜索框内即可。)https://www.17zwd.com/help/dianzhu/201708270308553660.htm
8.剪映中打开搜索的使用方法在剪映中,打开搜索功能的方法是在主界面上方的搜索栏中输入关键词,然后点击放大镜图标或按下回车键进行搜索。 (图片来源网络,侵删) 剪映中打开搜索的使用方法 剪映是一款非常受欢迎的视频编辑软件,它提供了大量的功能和工具,让用户可以方便地编辑和制作视频,在剪映中,搜索功能可以帮助用户快速找到需要的视频片段、音乐...https://www.mingyunw.com/archives/8050.html
9.在图库中快速搜索华为官网部分产品不支持搜索聊天截图关键词,请以实际为准。 图库会为您呈现相关的图片,并推荐更多关键词。点击推荐的关键词,或继续输入关键词,可进行更精确的搜索。 在图库中快速搜索视频 当熄屏充电时,平板会自动分析和分类图库中的本地视频,并在搜索栏中为您推荐关键词,方便您在图库中快速查找视频。 进入图库,点击屏幕...https://consumer.huawei.com/cn/support/content/zh-cn15844444/
10.在图库中快速搜索图片在图库中快速搜索图片 在图库搜索栏中输入时间、地点、事物等关键词,可以快速搜图。 进入 图库 > 相册 ,在屏幕顶端的搜索栏输入要搜索的关键词。 若要搜索图片,可输入图片关键字,如“美食”、“风景”、“身份证”、“银行卡”等 若要搜索带文字的图片,可输入图片中https://www.hihonor.com/cn/support/content/zh-cn15822649/
11.重拳出击acdseepro8.0全新登场图文处理教程随着文件越来越多,如何从自己的图片中快速找到自己想要的内容成了很迫切需要解决的问题。这次 ACDSee 8 Photo Manager中就添加了全新的快速搜索栏(new Quick Search bar),只要直接在搜索栏上输入相应关键字即可找到相应的图片(如图3)。 图3 选择Tools→Options,再单击Browser→Quick Search标签,则可以对搜索关键进行...https://www.west.cn/www/info/58196-1.htm
12.HUAWEI华为P50Pocket艺术定制版用户指南说明书江阴雨辰互联打开搜索 从桌面中部向下滑动,打开搜索框。 打开通知消息 从屏幕顶部左侧下滑出通知消息。 打开快捷开关 从屏幕顶部右侧下滑出控制中心,点击展开快捷开关栏。 按键快捷操作 唤醒智慧语音 长按电源键1秒。 基础使用 截取当前显示的屏幕 同时按音量下键和电源键 ...https://www.yc00.com/num/1701274552a1066242.html
13.搜索人图片搜索人高清图片素材库视觉中国旗下网站(VCG.COM)通过搜索 人图片搜索_第36页面分享:搜索 人高清图片,优质搜索 人图片素材,方便用户下载与购买正版搜索 人图片,国内独家优质图片,100%正版保障,免除侵权烦恼,一次授权全球永久可商用。https://www.vcg.com/creative-image/1979479/?page=36
14.如何搜索电脑里的所有图片第二步:在右上角框中,鼠标左键点击一下,会出现种类、修改日期、类型、大小、名称,我们点击【类型】,在输入需要打开图标的格式,已经全部搜索出来。 如何搜索电脑里的所有图片 篇3 1、以win10为例,打开此电脑,找到右侧搜索”此电脑“栏。 2、进入D盘,此时搜索栏变为搜索“本地磁盘(D:)”。 https://www.jy135.com/diannao/97533.html
15.网页搜索Google常用功能:“关键词”和“图片搜索”两种方式 “反过来”搜索--- 是搜索引擎使用的重要概念 1.公司后缀搜索方法(根据每个国家公司后缀名称的不同而查询) 即:“公司名称后缀+产品名称+E-mail” 把每个国家公司的“后缀名”放到google搜索栏中,然后加上产品名称搜索。 比如:在google.com 里输入:“llc(公司后缀...https://m.360docs.net/doc/b207c8d602d276a200292e8e.html
16.国家企业信用信息公示系统导航 地方频道 登录 注册 企业信用信息 经营异常名录 严重违法失信名单 热搜榜: 安徽登高而歌网络科技有限公司 亳州高新技术产业开发区芍林谷百货商行(个体工商户) 巢湖市东方名剪美发店二店 更多 信息公告 企业信息填报 小微企业名录 使用帮助https://ah.gsxt.gov.cn/
17.美国电商eBay全新图片搜索商品功能来了在线购物,消费者往往很难用关键词准确描述他们想要搜索的商品。面对这一普遍的难题,美国电商巨头eBay近日推出了最新的图片搜索商品功能。 这项功能的原理是:购物者将图片拖放到搜索栏中来搜索视觉上类似的商品。例如,你正在寻找一把新椅子,随后在eBay的搜索栏中输入“椅子”等关键词。如果你在搜索结果中看到了自己中意...https://maimai.cn/article/detail?fid=588763034&efid=ALVRReJCDzn9bYzWaflqAA