ios视觉设计规范

ios视觉设计规范

篇一：ios用户界面《UI》设计设计规范

相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发......

下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式。

一、尺寸及分辨率设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。

相比之下，使用640×1136，对Plus做单独的修改适配，效果会更好，因为Plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了，有更好办法的话希望大家可以分享一下。

Ps：作图的时候尽可能确保都是用形状工具(快捷键 U)画的，这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素

iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~

三、图标尺寸四、字体大小

iPhone 上的字体英文为： HelveticaNeue ，而中文，Mac下用的是黑体-简，Windows下则为华文黑体，所有字体要用双数字号。

下图是百度移动用户体验部（MUX）做过的一个小调查，可以看出用户在iOS app中可接受的文字大小。五、切图山东华软科技股份有限公司是一家专业从事棋牌游戏定制开发的专业性公司。现有完善PC端，手机端棋牌游戏平台。详情咨询QQ1557924069

切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能苹果在没6 Plus前，我们只需要提供两种图，普通图及视网膜屏幕图。

以640×1136（640×960是一样的）做的设计图的话

就会好办一点。直接出设计图上的原大小图标，比如我们命名一个图片叫，我们给开发的图就要改变这个名字叫img-line@ 就是在后缀名前加上@2x表示视网膜屏的图，iPhone4的还需要把这个图尺寸按比例缩小50%，得到正真的。

然后把这两个图移交给开发，iPhone6的图在规范里是与5s使用的是一样的，也是@2x图。有些UI则需要做适当的适配，比如拉长，拉高，这个开发会去做。

对于iPhone 6 plus的话范里给出的是@3x相信大家也知道是怎么回事，但如果要使用PS放大的话，大家做图的时候就需要使用形状工具来做，放大后还需要仔细微调，这里就不多做讲解

六、颜色值问题

iOS颜色值取 RGB各颜色的值比如某个色值，给予IOS 开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)

七、内部设计

1、所有能点击的图片不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

4、充分考虑每个控制按钮在4中状态下的样式。

篇二：iOS和Android的app界面设计规范

iOS和Android的app界面设计规范

字数876阅读96439评论36喜欢344

记录一下iOS和Andoird的界面设计规范，方便进行标准的产品设计，并与设计师顺畅沟通

iOS篇

界面尺寸

设备

iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini

分辨率 750×1334 px 640×1136 px 640×960 px 1024×768 px 1024×768 px

状态栏高度导航栏高度标签栏高度 60px 40px 40px 40px 40px 20px 20px

132px 88px 88px 88px 88px 44px 44px

147px 98px 98px 98px 98px 49px 49px

1242×2208 px

iPad3/4/Air/Air2/mini2 2048×1536 px

Paste_

图标尺寸

设备

iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini

App Store 程序应用

主屏幕

spotlight工具栏和

标签栏

搜索导航栏

75*75px 44*44px 75*75px 44*44px 75*75px 44*44px 25*25px 22*22px 25*25px 22*22px

1024*1024px 180*180px 144×144px 87×87 px 75*75px 66*66px 1024*1024px 120*120px 144×144px 58*58px 1024*1024px 120*120px 144×144px 58*58px 1024*1024px 120*120px 144×144px 58*58px 1024*1024px

90*90px 1024*1024px 90*90px

72*72px 50*50px 72*72px 50*50px

iPad3/4/Air/Air2/mini2 1024*1024px 180*180px 144×144px 100*100px 50*50px 44*44px

字体

iPhone 上的字体英文为：HelveticaNeue至于中文，Mac 下用的是黑体(来自: 小龙文档网:ios视觉设计规范)-简，Win下则为华文黑体，所有字体要用双数字号。

百度用户体验部做过一个小调查，对于app字体大小的调查结论如下：

Paste_

颜色值

IOS颜色值取 RGB各颜色的值比如某个色值，给予IOS 开发的色值为 R:12 G:34 B:56 给出的值就是 12,34,56(有时也要根据开发的习惯，有时也用十六进制)

内部设计

1、所有能点击的图片不得小于44px（Retina需要88px）

2、单独存在的部件必须是双数尺寸

3、两倍图以@2x作为命名后缀

APP界面UI设计规范

一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 （七）字体

1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

软件界面设计要求规范_v0-视觉部分

软件界面设计规范 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调： 软件界面设计中常用的主色调包括：蓝色、红色、绿色、黑色 蓝色：运用的行业较为广泛，如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色：在政府单位运用比较多。 绿色：一般运用于教育、医疗、农林等行业。 黑色：能源、石油、房地产行业有时候会用中性的黑色作为主色调。

表现区：通常用浅色，如：白色、淡灰、或者淡蓝之类，因为大面积的文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。 2.2风格： 软件界面的风格通常比较简约。不同行业，使用的环境不同稍有差异。 3登录界面 基本元素：logo、系统名称、输入框、提交按钮。如下： 4页面逻辑结构 功能页面功能页面 弹出页面弹出页面弹出页面

软件界面通常是上面这样的逻辑结构 首页：宏观预览各项设备管理数据，快速访问期望的数据功能 功能页面：查看某一功能模块的全部数据，查看某一对象的各类相关数据 弹出页面：填写和提交表单，对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。 5页面的基本属性 页面宽度：属性值为auto，最小值1024像素。默认状况下无横向滚动条。 注意：宽度、位置、边距为不可变数据 背景：页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等，总之是非常接近白色的颜色。 注：白色为常用色值，对于特殊个性化页面可根据特殊要求变更色彩；背景色彩尽量少用饱和度高的颜色， 页面位置：居中 页面边距：上 0px；下 0px；左 0 px；右 0 px； 注意：有时候会专门设置一定数值的边距，这时通常 与模块间的间距相同，如上下左右都是5px。

ios和Android APP设计规范要点

相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发等等 下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式 IOS篇 一、尺寸及分辨率 iPhone界面尺寸：320*480、640*960、640*1136 iPhone6：4.7英寸(1334×750)，iPhone6 Plus：5.5英寸(1920×1080) 设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iphone6和plus出来后有很多人会使用6的设计效果。 如果是我来做的话，我会使用640×1136，对plus做单独的修改适配，因为plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法的话希望大家可以分享一下。 Ps：作图的时候确保都是用形状工具(快捷键：U)画的，这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素

iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。 这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。 状态栏(status bar)：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px 导航栏(navigation)：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px 主菜单栏(submenu，tab)：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px 内容区域(content)：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px 至于我们经常说的iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。

软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了，保证系统功能设计的合理与明确，布局明确、交互操作合理、协调统一。功能要表现清楚，分类清晰有条理，避免过多的控件嵌套导致的视觉混乱；单一功能的操作目的明确，符合易用性原则，避免不必要的信息显示而对用户造成视觉干扰；力求操作简单，简单的功能一步完成，比较复杂的功能三步之内，复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调： 软件界面设计中常用的主色调包括：蓝色、红色、绿色、黑色 蓝色：运用的行业较为广泛，如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色：在政府单位运用比较多。 绿色：一般运用于教育、医疗、农林等行业。 黑色：能源、石油、房地产行业有时候会用中性的黑色作为主色调。 表现区：通常用浅色，如：白色、淡灰、或者淡蓝之类，因为大面积的文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。

2.2风格： 软件界面的风格通常比较简约。不同行业，使用的环境不同稍有差异。 3登录界面 基本元素：logo、系统名称、输入框、提交按钮。如下： 4页面逻辑结构 软件界面通常是上面这样的逻辑结构 首页：宏观预览各项设备管理数据，快速访问期望的数据功能 功能页面：查看某一功能模块的全部数据，查看某一对象的各类相关数据 弹出页面：填写和提交表单，对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

IOS设计规范

刚入门UI的小伙伴是不是不知道app该怎么切图、规范是什么？怎么和程序员同学配合，用什么工具更方便，怎么标注自己的设计稿，怎么做到一稿适配多种机型，这篇文章将一一解答你的疑问! 依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，所以，还是要灵活运用~ 我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧；公司不同，流程不尽相同，但是终究还是能有些帮助。 这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱，我整理好以后再说吧。 页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了，所以可以有时间读一读，看一看。 Part 1 项目立项 完善的公司会把项目相关人员聚集起来，产品经理会把产品详细的用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调，项目启动。 话不多说，接到原型，那我们应该做什么准备工作呢？

在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称+版本序列”； 没有最正确的工作方法，只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多，就知道这样的利弊了。 工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和AI了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。 标注工具： PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。 切图工具： Cutterman 点击下载一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。 Assistor PS 也是一款PS的切图标注插件，也被誉为神器；我使用了下，感觉相当不错，就是标注还没太适应，推荐一下这个。 标注工具以及这两款插件我都会上传，至于安装方法去“百度一下”吧，易学易用。

电商产品视觉设计方案规范

第一部分：产品设计 如何描述你的产品？电商产品描述实操讲解by 吕晓佳 2014-07-28卖家刊 来源|KO文案 作者|吕晓佳 有一组外部数据报告是这样写的：79%的顾客不会购买没有详细描述文字和图片的宝贝，那顾客到底关注的是宝贝的什么信息呢？（见下图）

宝贝描述引导逻辑：信息→ 时间→ 信任→ 成交 总结下来就是：给顾客所有想要的信息，换取顾客深入的浏览时间，使其对我们的产品产生信任，成交就水到渠成，从而提高转化率。 一、素材收集 1.排版方式 2.可用素材 3.风格色彩参考

4.相关文案

二、卖点和需求挖掘流程 1.信息获取 1.产品资料库 2.品牌商产品培训 3.竞争品分析 4.竞争对手客服问答 2.顾客需求总结（你买这款产品最关注的点是什么？） 1.团队集思广益+已经获取的信息 2.做出需求列表 3.按照需求重要性排序 3.产品卖点总结（见下面） 1.基于顾客需求优先级的产品卖点排序总结 2.先列表，然后再排序 三、视觉实现 1. 产品图片拍摄方案 怎么拍，道具，要拍什么角度，都需要根据对宝贝卖点展现的规划去拍摄，所以在拍摄前要有详细的拍摄方案 2. 产品图片拍摄基本展现角度 1.基本图 2.实物对比（可选） 3.根据产品卖点的细节拍摄 4.使用方法 5.带有互动性和故事性的效果图或真人秀 3. 美工沟通标准化流程 提供宝贝链接——提供产品图片——提供参考链接——宝贝描述版式框架设计——整体风格(主色调)描述或者参考——文案（文案中的突出点）——参考素材图——当面沟通——时时沟通——修改——切图上线 四、信息传达效果及数据监测 1.看过宝贝描述，最深印象是什么？ 2.你会买吗？多少钱会买？ 3.检查下整个页面给买家传达的思路：（这些都做到了吗？） 1.这款产品性价比很高 2.这款产品口碑不错 3.这款产品是我需要的 4.获得一些专业性产品知识及选购方法 5.品牌印象 4.关注宝贝的指标：页面转化率、页面访问时间、页面跳失率等数据、关联销售效果

UI必知之MD和IOS设计规范的区别

UI必知之MD和IOS设计规范的区别

在UI设计师日常工作中，很重要的一个工作前提就是要熟知设计规范，那么对于移动端的设计规范，你们知道吗？那么，接下来就让小编给大家着重地分析一下MD和IOS设计规范在阴影、导航和配色这三个方面有什么区别吧，希望对大家能够有所帮助！ Material Design（以下简称MD）是谷歌研发的一套视觉语言设计规范，主要应用于安卓类应用。

iOS Human Interface Guidelines（以下简称iOS）是苹果公司针对iOS 设计的一套人机交互指南，目的是为了使运行在iOS上的应用都能遵从一套特定的视觉以及交互特性，从而能够在风格上进行统一。 相对来说，我们对于iOS的设计规范更加熟悉。因为考虑到成本，设计师进行产品设计的时候只会出一套iOS的设计稿，然后去适配安卓机型。很少会针对安卓机型再出一套MD风格的方案，这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言，不同的设计语言会培养出不同的操作习惯。 例如使用安卓手机的用户平时见到的都是MD风格的界面，突然下了一个iOS风格的应用，那么操作起来就会很不习惯，增加了学习成本。为了让产品可以适用不同平台用户的操作习惯，提供MD和iOS两套设计稿是非常有必要的。 区别一：阴影 MD意味着大色块+阴影，为什么MD如此痴迷于阴影？从它的名字就可以看出来，Material Design，这里的material指的是纸张。因为来源于现实生活，所以MD非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系。 而阴影就是最常见的表现形式：

历代iphone分辨率、IOS UI设计尺寸规范

iPhone、ipad常见设计尺寸 iPhone： iPhone 1G 320x480 iPhone 3G 320x480 iPhone 3GS 320x480 iPhone 4 640x960 iPhone 4S 640x960 iPhone 5 640x1136 iPhone 5S 640x1136 iPhone 5C 640x1136 iPhone 6 750x1334 iPhone 6 Plus 1080x1920 （开发应按照1242x2208适配） iPhone 6S 750x1334 iPhone 6S Plus 1080x1920 （开发应按照1242x2208适配） iPhone SE 640x1136 iPhone6-iPhone8这段时间苹果新手机的物理像素都是750x1334px。所有Plus手机的物理像素都是1242x2208px iPhone 7 750x1334 iPhone 7 Plus 1080x1920 （开发应按照1242x2208适配） iPhone XS Max：1242 x 2688 px iPhone XS：1125 x 2436 px iPhone XR：828 x 1792 px

但是如果我们用点的单位看就会得到： iPhone XS Max：414 x 896 pt （iPhone Plus分辨率宽度）iPhone XS：375x812 pt （iPhone 6/7/8分辨率宽度）iPhone XR：414 x 896 pt （iPhone Plus分辨率宽度）iPod Touch: iPod Touch 1G320x480 iPod Touch 2G320x480 iPod Touch 3G320x480 iPod Touch 4G640x960 iPod Touch 5G640x1136 iPad: iPad 11024x768 iPad 21024x768 The New iPad2048x1536 iPad mini1024x768 iPad 42048x1536 iPad Air2048x1536 iPad mini 22048x1536 iPad Air 2 2048x1536 iPad mini 3 2048x1536 iPad mini 4 2048x1536

ios视觉设计规范

ios视觉设计规范 篇一：ios用户界面《UI》设计设计规范 相信很多人都在开发设计APP时会遇到很多界面上的问题，要以多大尺寸来设计？分辨率是多少？该怎么切图给开发...... 下面的文字就给出一点点技巧总结，但也要给合团队在开发时的习惯。每个工程师们所使用的控件，书写布局习惯来实际移交的图是不一样的，但八九不离十，都是遵循一个原则，便捷开发、自适应强的开发模式。 一、尺寸及分辨率设计图单位：像素72dpi。在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计，现在iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。 相比之下，使用640×1136，对Plus做单独的修改适配，效果会更好，因为Plus的屏幕实在是大了，遵循屏大显示更多内容的原则这里本应该是需要修的了，有更好办法的话希望大家可以分享一下。 Ps：作图的时候尽可能确保都是用形状工具(快捷键 U)画的，这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素 iPhone的app界面一般由四个元素组成，分别是：状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。PS：在最新的iOS7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计iOS7风格的界面的时候多多注意下~ 三、图标尺寸四、字体大小 iPhone 上的字体英文为： HelveticaNeue ，而中文，Mac下用的是黑体-简，Windows下则为华文黑体，所有字体要用双数字号。 下图是百度移动用户体验部（MUX）做过的一个小调查，可以看出用户在iOS app中可接受的文字大小。五、切图山东华软科技股份有限公司是一家专业从事棋牌游戏定制开发的专业性公司。现有完善PC端，手机端棋牌游戏平台。详情咨询QQ1557924069 切图是APP设计中的一个重要过程，关系到APP的界面实现，及各种适配性还有各种性能苹果在没6 Plus前，我们只需要提供两种图，普通图及视网膜屏幕图。 以640×1136（640×960是一样的）做的设计图的话

iosapp设计规范

竭诚为您提供优质文档/双击可除 iosapp设计规范 篇一：ios界面设计尺寸规范 ios界面设计尺寸规范 一、尺寸及分辨率 iphone界面尺寸：320*480、640*960、640*1136、750*1334、1080*1920等。 ipad界面尺寸：1024*768、2048*1536等。 单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。ps ：作图的时候确保都是用形状工具（快捷键：u）画的，这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素 iphone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。 640*960的尺寸设计下这些元素的尺寸。 状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px

导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁，其高度为：734px [下图说明：] 至于我们经常说的iphone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。 ps：在最新的ios7的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变，尺寸高度也还是没有变的，只不过大家在设计ios7风格的界面的时候多多注意下~ 三、字体大小 heitisc（黑体-简，黑体-简的英文名称为heiti sc。heiti为黑体的拼音，sc代表简体中文（simplifiedchinese）），是macosxsnowleopard（版本10.6）包含的简体中文字型，也是iphoneos 3.0（版本 4.0后改名为ios）及ipodnano第五代以来的预设简体中文字型。 黑体-简系为黑体，取代华文黑体成为macosxsnow leopard的预设简体中文字型。在过去，华文黑体是

视觉设计基本要素VI项目文字说明内容资料

2016年04月

A基础要输系统 一、企业标志 1、企业标志及标志创意说明： 洪冠标志的整体造型为日和月的组合，日红色冉冉升起的太阳，象征企业员工年轻的活力，同时也象征着企业蒸蒸日上的发展。月拥有沉稳的蓝色，象征深远、科技，理智、诚实、专心。蓝色的月同时采用了渐变的形式仿佛宇宙般无穷无尽延伸,寓意洪冠企业定位多方面的发展战略。从标志整体来看炙热的日与沉稳的月相呼应着，预示着企业在雄厚的根基之上蓬勃发展。同时也暗喻了企业领导人必将以宽广的胸怀和博大的抱负引洪冠走向世界! 1、构成要素——造型要素的来源说明，造型要素的特点。 2、图形意义——加以说明标志的提炼过程。 3、色彩意义——用色彩说明标志的个性和气质。 2、墨稿 为了适应媒体的发布的需要，标识除色彩图里外，亦制定黑白图例保证标识在对外的形象中，体现一致性，此图为标准黑白稿，使用范围主要应用于必须使用黑白印刷范围内。使用时请严格按此规范进行。 3、标志反白效果图 为了便于在广告中推广，更明确树立形象；特规定标识与标志色，辅助色搭配规范，从而达到较好的视觉效果。适应媒体发布需要，标识除色彩图例外，亦制定反白图例，保证标识在对外的形象中，体现一致性，此图为标识的标准反白图使用范 4、标志标准制图 标志标准制图之制定经过精密的绘制与视觉修正，主要用于制作招牌、户外看板、标语牌、建筑外观等无法使用负片放大的大型项目的精密绘制，标志图形整体比率关系及定位线、基线的关系已通过数字作明确的规定。网格图之制定经过精密绘制与视觉修正，主要用于快速绘制出准确的标志，从单位方格中将标志的造型比例、空白距离等互相关系表达出来，制作是请依照此标准原样放大、缩小、复制。 标志最小使用范围：标志应用缩小可能出现模糊不清的不良效果，为确保标志的正确与完整性，规定标志单独使用时宽度最小在5mm（特殊情况最小不小于5mm）。 5标志方格制图 Logo方格坐标制图：在VI设计中，当标志设计完成后，为了保证标志在展开运用时更加完善，需要对标志进行规范化的制图和管理，例如网格标注法。作用：标识必须严格按图例规范的要求制作使用，使用时应从本手册提供的再生样本部分中 是标识组合样式，用复印，扫描等方法复制，放大或缩小。 6、标志预留空间与最小比例限定 二、企业标准字 标志英文标准字 企业英文标准字是针对企业特有的精神与个性及标志完整搭配组合而制定，与一般打字排版字体不同。不可随意改变标准字的空间距离，不可随意用其他文字取代。英文标准字方格网线制图是便于施工时放大、缩小、复制，以控制复制品的比例及字距合乎标准规格。 标志中文标准字 企业中文标准字是针对企业特有的精神与个性及标志完整搭配组合而制定，本字体是结合综艺体黑体的特点，在此基础上发展出来的，与一般打字排版字体不同，不可随意改变标准字的空间距离，不可随意用其他字体取代。中文标准字方格网线制图是便于施工放大、缩小、复制，以控制复制品的比例及字距合乎标准规格。 企业标志英文方格制图法 英文标志体经过严格设计，造型是独一无二的，与标志相辅相承，并力求体现公司精神与理念。其造型特征与中文标准字相和谐，风格统一，适用于企业形象对外传达的各 项规范。 英文标志体在使用过程中不得作任何变形，大小可依级数表放大或缩小。方格比例制图法适用于大型广告看板、户外招牌、建筑物外观等无法用原稿复制或负片放大的制作项目的精确描绘。 企业标准中文方格制图法

IOS设计规范

一款APP的设计稿从设计到切图 第一部分项目立项阶段 在项目设计之初，就该进行项目归档整理，一般是是“项目名称+版本序列” 第二部分Photoshop IOS的各种分辨率。 1.640*960 iPhone 4时代的尺寸，我最开始用这个尺寸设计，还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧)； 2.640*1136 iPhone5/5S/5C，一更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了； 3.750*1334 iPhone6 目前是我做设计稿的设计尺寸，iPhone的尺寸，向下可以适配iPhone4，iPhone5，向上可以适配iPhone6 plus；我记得iPhone6推出后，

我问我的设计总监(从业12年)应该用什么尺寸设计，他是就用iPhone6的尺寸吧，好适配，切出来就是@2x了，上下都能照顾到。 所以，我推荐做设计稿的时候使用iPhone6的尺寸进行设计。 iPhone6的尺寸其实相比于以前的5来说很多地方并没有变化，只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档，我建立了参考线。▼

里面已经设置好了参考线，文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。

上下的参考线很容易设置，因为是根据iPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，究竟是设置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范， 第三部分标注 下面讲标注的问题，页面怎么标，标哪里，可能我涉及不到所有类型页面，但举一反五足够了；切片输出以及切片命名我们下期再说(如果有错误，请一定要及时帮我指出，我不想误人子弟)。 标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于标注；如果不清楚你该怎么标，别怕丢人(我知道有些设计师，特别是刚接触工作的设计师并不敢张嘴去问)，一定要和工程师沟通！包括怎么标，怎么切。 每个工程师实现效果的方法不同，我在这里所说的，是我的标注习惯，也就是我们工程师的开发习惯，但应该适用于大部分的设计师和工程师。 不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可；当然，这要看跟你配合的工程师的习惯，比如我现在搭档的两位IOS工程师，一位要求我全都要标注，另一位要求我标注代表性页面就好(记得标注之前一定要沟通清楚)。

ios设计规范中文版

ios设计规范,中文版 篇一：IOS设计规范 刚入门UI的小伙伴是不是不知道 app该怎么切图、规范是什么？怎么和程序员同学配合，用什么工具更方便，怎么标注自己的设计稿，怎么做到一稿适配多种机型，这篇文章将一一解答你的疑问! 依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，所以，还是要灵活运用~ 我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧；公司不同，流程不尽相同，但是终究还是能有些帮助。 这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱，我整理好以后再说吧。 页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了，所以可以有时间读一读，看一看。 Part 1 项目立项 完善的公司会把项目相关人员聚集起来，产品经理会

把产品详细的用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调，项目启动。 话不多说，接到原型，那我们应该做什么准备工作呢？ 在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称+版本序列”； 没有最正确的工作方法，只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多，就知道这样的利弊了。 工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和AI了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。 标注工具： PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。 切图工具： Cutterman点击下载一款PS的插件，切图非常方便，

视觉设计流程与规范

视觉设计流程 注：请在所属的选项□上，用黄色突出标识。示例：□公司级流程

1.目的 本流程规定了在用户研究与设计中心进行各种视觉设计项目的过程，包括：项目启动到项目结束的过程描述、图形界面设计师的职责、输入输出等相关规范。 本流程要预防或解决的问题： 规范项目的视觉设计流程 明确图形界面设计师的职责 明确项目每个阶段的任务及输入输出 预防项目在视觉设计过程中的遗漏； 2.适用范围 适用于在设计中心进行的设计项目及其他业务部门与设计中心共同开展的联合项目。

3.定义与缩略语 3.1.定义 图形界面设计：通过可视性元素的设计，来组织信息的传播，并让 用户在信息获取的过程中变得愉悦的活动。 视觉概念设计：建立在视觉风格推导基础上的尝试和探索性设计， 用以描绘出产品视觉风格的基本方向。 流行趋势分析：为归纳出未来可能流行的视觉元素，把握视觉潮流 和发展方向，而对行业热门的视觉表现方式、方法、新鲜事物等进 行的分析和整理。 用户研究：是一种获得和分析用户的目标、需求的方法，它通过对 用户的知觉特性、认知心理特性、操作特性的研究，使用户的实际 需求成为产品设计的导向，从而使经过设计的产品更符合用户的习 惯、经验和期待。 交互设计：是一种让产品易用、有效，让用户使用产品的过程变得 愉悦的活动。 3.2.缩略语 产品经理(Product Marketing Management)：PMM 设计项目经理(Design Project Management)：DPM 用户研究工程师(User Research Engineer)：UE 交互设计师(Human Computer Interaction Designer)：HCI

产品包装及视觉设计流程及规定

产品包装设计流程及规定 一、目的 为规范包装设计流程，提高工作效率特制定本规定。二、范围 适用于市场部的相关药品包装设计工作。 三、责任人及责任部门 包装设计人员、市场部长、营销中心、商品中心。 四、产品包装设计流程 1、由商品中心发起，填写《包装设计申请（审批）单》，经 总经理签字后交市场部；同时商品中心应提供产品说明书、规格尺寸及生产商名称、地址、联系方式等数据信息。 2、市场部设计人员按照商品中心的要求设计药品包装初稿。 设计包括并不限于：小盒、瓶签、覆膜、说明书等。 3、市场部组织召开包装定稿会议，总经理、营销中心、商品 中心等相关人员及相关部门参加，对包装的市场接受程度及包装规格尺寸进行确认，并在《包装定稿会签单》上签字确认。 4、上报集团领导审批同意后，商品中心与生产商进行稿件校 对工作，通知厂家报批并提供商标授权书。

五、流程图 流程 工作要求 相关文件/记录 流程要求 1、由商品中心发起，填写《包装设计申请（审批）单》，经总经理签字后交市场部；同时商品 中心应提供产品说明书、规格尺寸及生产商名称、地址、联系方式等数据信息。 2、市场部设计人员按照商品中心的要求设计药品包装初稿。设计包括并不限于：小盒、瓶签、覆膜、说明书等。 3、市场部组织召开包装定稿会议，总经理、营 销中心、商品中心等相关人员及相关部门参加，对包装的市场接受程度及包装规格尺寸进行确认，并在《包装定稿会签单》上签字确认。 4、上报集团领导审批同意后，商品中心与生产商进行稿件校对工作，通知厂家报批并提供商标授权书。 结束 总经理审批 营销中心、商品中心签字确 认 市场部组织召开包装定稿会 议 市场部进行包装设计 商品中心发起 开始 集团领导审批 商品中心与生产商进行稿件校对 工作，提供商标授权书 通知报批

产品包装及视觉设计流程及规定

产品包装及视觉设计流 程及规定 集团标准化小组：[VVOPPT-JOPP28-JPPTL98-LOPPNN]

产品包装设计流程及规定一、目的 为规范包装设计流程，提高工作效率特制定本规定。 二、范围 适用于市场部的相关药品包装设计工作。 三、责任人及责任部门 包装设计人员、市场部长、营销中心、商品中心。 四、产品包装设计流程 1、由商品中心发起，填写《包装设计申请（审批）单》， 经总经理签字后交市场部；同时商品中心应提供产品说明书、规格尺寸及生产商名称、地址、联系方式等数据信息。 2、市场部设计人员按照商品中心的要求设计药品包装初 稿。设计包括并不限于：小盒、瓶签、覆膜、说明书等。 3、市场部组织召开包装定稿会议，总经理、营销中心、商 品中心等相关人员及相关部门参加，对包装的市场接受程度及包装规格尺寸进行确认，并在《包装定稿会签单》上签字确认。 4、上报集团领导审批同意后，商品中心与生产商进行稿件 校对工作，通知厂家报批并提供商标授权书。 五、流程图

六、包装设计申请（审批）单 包装设计申请（审批）单填表日期：年月日

药品说明书（文字版） 附件二 包装设计小样 其他宣传品设计的流程及规定一、目的 为规范宣传品设计流程，提高工作效率特制定本规定。 二、范围

适用于市场部的相关宣传品设计工作。 三、责任人 设计人员、市场部长、需求单位相关人员。 四、设计流程 1、需求单位提出设计需求，并填写《设计稿件申请（审 批）单》，同时提供设计所需所有文字材料。 2、总经理审批后交给市场部。 3、市场部长签字，设计人员与需求单位沟通提出设计草案 并约定出稿时间。 4、设计人员按照要求及规定时间提交设计方案。 5、需求单位签字确认。 五、流程图

APP界面UI设计规范

UI设计规范 一、APP界面设计规范 （一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px） 其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px） （二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号 字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

Ios界面设计规范

Ios界面设计规范 美学完整性 美学完整性指的并非应用界面有多漂亮，而且应用外观与功能的整合程度如何。比如，允许用户完成创造性任务的应用通常会将精致的装饰性元素放在背景之中，同时通过提供标准控制和行为等方式来突出任务。假如此类应用有着过分复杂的用户界面，用户或许就会对其感到相当迷茫。 在提供拟真性任务的应用（游戏邦注：比如游戏）中，用户期待能够看到有趣的漂亮界面。尽管人们并不期待能够在游戏中完成某种创造性任务，但他们依然希望游戏的外观能够与体验相符。 一致性 界面的一致性允许他们将某款应用中获得的知识和技能用于其它应用中。一致型的应用并非对其他应用毫无独创性的复制，这种应用利用的是人们已经熟悉的标准和范例。 要判断应用是否符合一致性原则，你需要考虑如下问题： 1、应用是否与iOS标准保持一致？是否正确使用系统提供的控制、视图和图标？是否以可信赖的方式整合设备的功能？ 2、应用本身是否具有一致性？文字是否使用的是统一的属于和字体？相同的图标是否代表着相同的含义？当人们在不同的地方实施相同的动作时，他们能否预测出结果？应用中的自定义用户界面元素的外观和行为是否相同？ 3、应用是否与先前的版本保持一致？词语和含义是否与之前相同？基本概念是否保持不变？ 直接操作 如果用户可以直接操作屏幕上的物体，他们就更能为人物所吸引，也更容易理解动作的结果。iOS用户的直接操作感因多点触控界面而得到增强。使用手指来操作使他们更能感受到对屏幕上物体的操作杆，因为他们无需使用鼠标之类的工具就可以直接点击这些物体。 比如，如果要直接放大或缩小某区域的内容，用户无需点击聚焦控制，只需要在屏幕上做出滑动手势即可。在游戏中，玩家移动屏幕上的物体来与之直接互动。比如，游戏可能会在屏幕上显示组合锁，让玩家滑动来解锁。 在iOS应用中，人们可以体验的直接操作包括： 1、旋转或移动设备来影响屏幕上的物体 2、使用手指来控制屏幕上的物体

QSY 1688-2014油气田地面工程视觉形象设计规范.

ICS点击此处添加ICS号 点击此处添加中国标准文献分类号Q/SY 中国石油天然气集团公司企业标准 Q/SY 1688—2014 油气田地面工程视觉形象设计规范 Design Code of Visual Image for Oil and Gas Field Surface Engineering 2013-8-XX发布XXXX- 10 -1实施中国石油天然气集团公司发布

Q/SY XXX 目次 前言 (1) 1 范围 (3) 2 规范性引用文件 (3) 3 术语和定义 (3) 4 基本规定 (4) 4.1 站场类型划分 (4) 4.2 井场视觉形象设计 (5) 4.3 小型厂站视觉形象设计 (5) 4.4 中型厂站视觉形象设计 (5) 4.5 大型厂站视觉形象设计 (6) 4.6 特大型厂站视觉形象设计 (6) 5 基础要素 (6) 5.1 标准色 (6) 5.2 标准字 (7) 5.3 宝石花标识 (8) 5.4 宝石花与中国石油组合标识 (9) 5.5 标识色带 (10) 5.6 警示色带 (11) 5.7 警戒色带 (11) 6 涂色与标识 (11) 6.1 管道涂色与标识 (11) 6.2 设备、设施涂色与标识 (13) 6.3 井口设施涂色与标识 (20) 7 标识牌 (24) 7.1 井场、井号名称牌 (24) 7.2 厂站名称牌 (27) 7.3 HSE标识牌 (29) 7.4 进站须知牌 (33) 7.5 厂站简介牌 (34) 7.6 生产功能用房名称牌 (36) 1

8 建筑物 (36) 8.1平屋顶 (36) 8.2坡屋顶 (38) 9 构筑物 (40) 9.1 围墙 (40) 9.2 大门 (42) 10 其他 (49) 10.1 风向标 (49) 10.2 通信设施 (50) 10.3 路灯 (51) 附录A（资料性附录） (52) A.1 井场视觉形象设计...........................................................................错误！未定义书签。 A.2 小型厂站视觉形象设计...................................................................错误！未定义书签。 A.3 中型厂站视觉形象设计...................................................................错误！未定义书签。 A.4 大型厂站视觉形象设计...................................................................错误！未定义书签。 A.5 特大型厂站视觉形象设计...............................................................错误！未定义书签。

ios设计规范中文版

ios 设计规范, 中文版 篇一：IOS 设计规范 刚入门UI 的小伙伴是不是不知道 app 该怎么切图、规范是什么？怎么和程序员同学配合，用什么工具更方便，怎么标注自己的设计稿，怎么做到一稿适配多种机型，这篇文章将一一解答你的疑问! 依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，所以，还是要灵活运用~ 我本身是一名GUI 设计师，所以我只站在GUI 设计师的角度去把APP从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧；公司不同，流程不尽相同，但是终究还是能有些帮助。 这里我们只说IOS 系统下的设计，至于Android ，因为尺寸太多，涉及的东西比较乱，我整理好以后再说吧。 页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了，所以可以有时间读一读，看一看。 Part 1 项目立项 完善的公司会把项目相关人员聚集起来，产品经理会 把产品详细的用原型展示出来，包括产品定位，市场需求，

主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调，项目启动。 话不多说，接到原型，那我们应该做什么准备工作呢？ 在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称+版本序列”； 没有最正确的工作方法，只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多，就知道这样的利弊了。 工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和Al 了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。 标注工具： PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch 到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。 切图工具： Cutterman点击下载一款PS的插件，切图非常方便， 但不支持绿色免安装版本PS,而且对PS版本要求比较高，