一.APP设计规范(ios)
————设计稿一般不使用Android的尺寸（因为Android的五花八门）
1.iphone界面的设计尺寸（设计稿默认iphone6）
（1）iphone6 plus设计版[iPhone7 plus]（@3x）
分辨率1242x2208px ppi:401 状态栏：60px导航栏：132px标签栏：146px
（2）iphone6 plus放大版（@3x）
分辨率1125x2001px ppi:401 状态栏：54px导航栏：132px标签栏：146px
（3）iphone6 plus物理版（@3x）
分辨率1080x1920px ppi:401 状态栏：54px导航栏：132px标签栏：146px
（4）iphone6 [iPhone7]（设计稿默认）（@2x）
分辨率750x1334px ppi:326 状态栏：40px导航栏：88px标签栏：98px
（5）iphone5 - 5c -5s（@2x）
分辨率640x1136px ppi326 状态栏：40px导航栏：88px标签栏：98px
（6）iphone4 – 4s（@2x）
分辨率640x960px ppi:326 状态栏：40px导航栏：88px标签栏：98px
（1）iphone& ipod Touch第一、二、三代（@1x）
分辨率320x480px ppi:163 状态栏：20px导航栏：44px标签栏：49px
2. iphone图标设计尺寸
（1）iphone6 plus（@3x）
App store：1024x1024px 程序应用：180x180 主屏幕：152x152 Spotlight 搜索：87x87px 标签栏：75x75px 工具栏和导航栏：66x66px
（2）iphone6（@2x）
App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px
（3）iphone5-5c-5s（@2x）
App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px
（4）iphone4-4s（@2x）
App store：1024x1024px 程序应用：120x120 主屏幕：114x114 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px
（5）iphone & ipod Touch第一、二、三代（@1x）
App store：1024x1024px 程序应用：120x120 主屏幕：57x57 Spotlight 搜索：29x29px 标签栏：38x38px 工具栏和导航栏：30x30px
3. ipad界面设计尺寸
（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2
分辨率2048x1536px ppi:264 状态栏：40px导航栏：88px标签栏：98px
（2）ipad1 – 2
分辨率1024x768px ppi:132 状态栏：20px导航栏：44px标签栏：49px
（2）ipad Mini
分辨率1024x768px ppi:163 状态栏：20px导航栏：44px标签栏：49px
4. ipad图标设计尺寸
（1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2
App store：1024x1024px 程序应用：180x180 主屏幕：144x144 Spotlight 搜索：100x100px 标签栏：50x50px 工具栏和导航栏：44x44px
（2）ipad1 – 2
App store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight 搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px
（3）ipad Mini
App store：1024x1024px 程序应用：90x90 主屏幕：72x72 Spotlight 搜索：50x50px 标签栏：25x25px 工具栏和导航栏：22x22px
5. ios字体大小规范
iPhone 上的字体英文为：HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。
字体舒适度
（1）长文本
可接受：26px见小值：30px舒适值：32px-34px
（2）短文本
可接受：28px见小值：30px舒适值：32px
（3）注释
可接受：24px见小值：24px舒适值：28px
二.App设计规范（Android）
————Android采用的单位为dp
————一般很少使用andrid尺寸作为设计稿
1. Android界面设计尺寸
android的尺寸众多，一般使用分辨率为720x1280 的尺寸设计。这个尺寸
720x1280中显示完美，在 1080x1920 中看起来也比较清晰
（1）屏幕尺寸：720x1280
状态栏：50 px 导航栏：96 px 标签栏：96 px 虚拟键：96px
这个尺寸是万用形的
2. Android图标设计尺寸
（1）屏幕尺寸：320x480px（mdpi）
启动图标：48x48px 操作栏图标：32x32px上下文图标：16x16px 系统通知图标：24x24px 最细画笔：不小于2px
（2）屏幕尺寸：480x800px—480x854px—540x960px（hdpi）
启动图标：72x72px 操作栏图标：48x48px上下文图标：24x24px 系统通知图标：36x36px 最细画笔：不小于3px
（3）屏幕尺寸：720x1280px（xhdpi）
启动图标：108x108px 操作栏图标：72x72px上下文图标：36x36px 系统通知图标：54x54px 最细画笔：不小于5px
（4）屏幕尺寸：1080x1920px（xxhdpi）
启动图标：144x144px 操作栏图标：96x96px上下文图标：48x48px 系统通知图标：72x72px 最细画笔：不小于6px
3. Android 字体大小规范
Android 上的字体为：Droid sans fallback ，是谷歌自己的字体，与微软雅黑很像。
480*800字体舒适度（高分辨率）
（1）长文本
可接受：21px见小值：24px舒适值：27px
（2）短文本
可接受：21px见小值：24px舒适值：27px
（3）注释
可接受：18px见小值：18px舒适值：21px
320*480字体舒适度（低分辨率）
（1）长文本
可接受：14px见小值：16px舒适值：18-20px
（2）短文本
可接受：14px见小值：14px舒适值：18px
（3）注释
可接受：12px见小值：12px舒适值：14-16px 三.网页设计规范（web）————网页设计规范比较自由
————网页有字体的规范
1.宽度控制
Fierfox和Opear当内容不超出页面高度时将不会显示滚动条
（1）IE6.0：宽度减少[ 21 ]
（2）Firefox：宽度减少[ 19 ]
（3）Opear：宽度减少[ 23 ]
2.尺寸规范
（1）常见尺寸：
●1024x768（常用尺寸）
●1366x768
●1280x800
●1280x1024
●1440x900
●1600x900
●1920x1080
一般网站宽为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。国内尺寸设置比较保守，这样可以保证大部分用户舒适的浏览网页
3.字体规范
（1）常用字体:
中文：宋体、微软雅黑、黑体
（2）字号:
网页正文/导航字体：12px-18px之间
网页正文/导航字体（英文）：10px-16px之间
标题文字：18px-32px之间（双数）
网页正文/导航字体：12px-18px之间
UI设计(流程/界面)规范 一：UI设计基本概念与流程 目的 规范公司UI设计流程，使UI设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使UI设计的流程规范化，保证UI设计流程的可操作性。 范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 概述 UI设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始，UI设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求，以保证每个环节的工作质量。 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑（Who,where,why.）也就是使用者，使用环境，使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄，性别，爱好，收入，教育程度等)。什么地方用（在办公室/家庭/厂房车间/公共场所）。如何用（鼠标键盘/遥控器/触摸屏）。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世，我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很
客观的评价标准的。我们只能说哪个更合适，更合适于我们的最终用户的就是最好的。 B、分析设计阶段 通过分析上面的需求，我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上，不能明显看出差异，这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发： 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩，文字，图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来，直观科学。 D、方案改进阶段 经过用户调研，我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢，还有什么遗憾等，这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上，将方案做到细致精美。 E、用户验证阶段 改正以后的方案，我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈，好的设计师应该在产品上市以后去站柜台。零距离接触最终用户，看看用户真正使用时的感想。为以后的升级版本积累经验资料。 经过上面设计过程的描述，大家可以清楚的发现，界面UI设计是一个非常科学的推导公式，他有设计师对艺术的理解感悟，但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调
阿里巴巴 ui 设计规范 篇一：ui 设计规范 命名规则 模块_类别_功能_状态.pngnav_button_search_导航_ 按钮_搜索_默认.png search 搜索bg 背景 selected 按钮状态（选中） button 按钮nav 导航栏disabled 按钮状态（不可点击） tab 菜单栏icon 图标 default 按钮状态（默认） bg 背景personal tada 个人资料presses 按钮状态（按下） user 用户pop 弹出back 返回 refresh 刷新delete 删除eidt 编辑 image 图片 download 下载content 内容 banner 广告 login 登陆left right center 左右中 registered 注册title 标题msg 提示信息 link 链接note 注释logo 标志 icon 制作： iOS120px：Icon_120@ 80px: Icon_small_40@ 58px: Icon_small@ 114px: Icon@
Android：36*36px：drawable-ldpi 48*48px：drawable-mdpi 72*72px： drawable-hdpi 96*96px： drawable-xhdpi Android 安卓系统 dp/sp/px 换算 名称分辨率比率rate（320px）比率rate（640px） idpi 240*320 mdpi 320*480 1 hdpi 480*800 xhdpi 720*800 xxhdpi1080*1920 Android 的图标尺寸 屏幕尺寸启动图标操作栏上下文 320*480px 48*48px 32*32px 16*16px 480*800px 480*854px 72*72px 48*48px 24*24px640*960px 720*1280px 48*48dp 32*32dp 16*16dp 1080*1920 144*144px 96*96px 48*48px 比率rate（750px）系统通知最细笔画24*24px 2px 36*36px 3px 24*24dp 2dp 72*72px 6px iPhone 图标尺寸
产品UI设计规范 一、为什么要做设计规范？（why） 如果说工作两年我养成了什么习惯的话，那一定是在做任何需求之前，都先问问自己“为什么要做这件事”。整理规范也是一样，做之前先要想清楚为什么要做规范？清楚的了解做一件事的价值有助于我们产生心理认同，从而更好的实施。 1.保证平台统一性统一性是交互设计的一个基本原则，在一个长期迭代多人合作的项目中，不同的设计师会负责不同的模块，每个人都有各自的思路，就有可能会对相同的元素做出了不同的方案，对于用户来说容易造成困惑，对品牌整体形象的建设也没有好处。所以对于较大型的产品，最好有设计规范来定义基本的元素，帮助众多设计师一起做出有统一性的产品。 2. 提升团队工作效率对于同一个基本元素，如果没有设计规范，交互设计师需要设计一次交互方式，视觉设计师需要设计一次外形，UI开发同学需要开发一次，每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范，只需设计一次，团队中任何一个设计师需要用的时候直接拿来用就可以了，也不需要再进行视觉和开发，极大的提升了效率。 3. 打磨细节体验在整理每个元素的规范时，设计师都需要对其场景、状态考虑清楚。在整理的过程中，经常会发现一些以前没注意到的问题，并进行优化。把一个小元素单独拎出来仔细考量，写成一篇完整规范的过程，其实就是在打磨细节的过程。 二、什么时候做设计规范？（when） 虽说最理想的情况是在做设计前把设计准则、风格、规范都定义清楚，但在实际项目中很少能有条件这样做。项目初期总是小步快跑、先上再说，产品在不断试错的同时设计也是在不断试错，在一开始就能定义一个完全“正确”的规范其实是不太现实的。
1、页面命名 每个页面都要有与之模块对应的名称。 2、页面兼容性 （1）页面大小兼容 o自适应1366*768px及以上的分辨率 o默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当容过多时允许滚动条） （2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框容。弹出框高度为不超过450px，且显示在容页面相对水平、垂直相对居中位置。 （3）浏览器兼容 兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。 o文字 文字用系统自带的常规字体，且分一级标题、二级标题、主容文字、次容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。 o容图片 容图片均带1px描边；容图片未加载出来时显示系统默认图片。
1、数据操作 显示数据（表格） （1）表头：字体加粗、且比单无格容字体大一号，且体字体大小参照UI效果图。 （2）单无格：文字图片容左对齐，数字、金额容右对齐。 （3）操作容原则上均用文字表达，如“编辑-删除” （4）鼠标划过表格单行时，颜色高亮。 （5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。 （6）表格中不定长的字段，固定显示宽度，超出容用“…”显示光标停留后，在浮动层显示详细容。 选中数据 （1）勾选全选则选中当页所有记录 （2）去掉当页某个记录的勾选，则全选也去掉勾选。 （3）翻页后，自动去掉已勾选的记录及全选的勾选。 （4）翻页后是否进行选择记录的保留应试具体业务而定。 （5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据 （1）新增的记录必须排在新增页的首行； （2）所有列表页面默认按数据新增时间倒序排列。 （3）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （4）提交成功后自动回到数据列表页。 （5）提交时需对主要标识字段进行重复值、空值（空格）判断。 修改数据 （1）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。 （2）提交失败后留在当前提交页，且保存用户已经输入的容以便再次提交。 （3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。 （4）提交时需对主标识字段进行重复值、空值（空格）判断。 查询数据 （1）把所有查询条件全部显示出来，并放在查询列表上方位置。 （2）每个查询条件必须有预置文案。 （3）每次查询后保留当前输入的查询条件。
一.APP设计规范(ios) ————设计稿一般不使用Android的尺寸（因为Android的五花八门） 1.iphone界面的设计尺寸（设计稿默认iphone6） （1）iphone6 plus设计版[iPhone7 plus]（@3x） 分辨率1242x2208px ppi:401 状态栏：60px导航栏：132px标签栏：146px （2）iphone6 plus放大版（@3x） 分辨率1125x2001px ppi:401 状态栏：54px导航栏：132px标签栏：146px （3）iphone6 plus物理版（@3x） 分辨率1080x1920px ppi:401 状态栏：54px导航栏：132px标签栏：146px （4）iphone6 [iPhone7]（设计稿默认）（@2x） 分辨率750x1334px ppi:326 状态栏：40px导航栏：88px标签栏：98px （5）iphone5 - 5c -5s（@2x） 分辨率640x1136px ppi326 状态栏：40px导航栏：88px标签栏：98px （6）iphone4 – 4s（@2x） 分辨率640x960px ppi:326 状态栏：40px导航栏：88px标签栏：98px （1）iphone& ipod Touch第一、二、三代（@1x） 分辨率320x480px ppi:163 状态栏：20px导航栏：44px标签栏：49px
2. iphone图标设计尺寸 （1）iphone6 plus（@3x） App store：1024x1024px 程序应用：180x180 主屏幕：152x152 Spotlight 搜索：87x87px 标签栏：75x75px 工具栏和导航栏：66x66px （2）iphone6（@2x） App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px （3）iphone5-5c-5s（@2x） App store：1024x1024px 程序应用：120x120 主屏幕：152x152 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px （4）iphone4-4s（@2x） App store：1024x1024px 程序应用：120x120 主屏幕：114x114 Spotlight 搜索：58x58px 标签栏：75x75px 工具栏和导航栏：44x44px （5）iphone & ipod Touch第一、二、三代（@1x） App store：1024x1024px 程序应用：120x120 主屏幕：57x57 Spotlight 搜索：29x29px 标签栏：38x38px 工具栏和导航栏：30x30px 3. ipad界面设计尺寸 （1）ipad3 – 4 - 5 – 6 – Air – Air2 – mini2 分辨率2048x1536px ppi:264 状态栏：40px导航栏：88px标签栏：98px （2）ipad1 – 2 分辨率1024x768px ppi:132 状态栏：20px导航栏：44px标签栏：49px
游戏UI设计规范 界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。 1：易用性： 按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。 2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。 4):界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab 8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。 9):可写控件检测到非法输入后应给出说明并能自动获得焦点。 10):Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。 11):复选框和选项框按选择几率的高底而先后排列。 12):复选框和选项框要有默认选项，并支持Tab选择。 13):选项数相同时多用选项框而不用下拉列表框。 14):界面空间较小时使用下拉框而不用选项框。 15):选项数叫少时使用选项框，相反使用下拉列表框。 16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 2：规范性： 通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。
UI设计规范说明书 修订历史记录 日期版本说明作者 1前言 1.1文档简介 本文档是对整个系统界面设计风格进行描述，和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2系统定义 用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。 1.3编写目的 统一图形界面规范，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。
2界面设计准则Rules 2.1引言Introduction 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件，也指使用相同的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。 2.2主要内容Content 2.2.1显示信息一致性原则 坚持图形用户界面（GUI）设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。 界面设计必须经过最终确认才能完成。 2.2.2布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。布局力求简洁、有序、易于操作。 2.2.3鼠标与键盘一致性原则
内蒙古万德系统集成有限公司 WEB UI设计(流程/界面)规范 目录 一：UI设计基本概念与流程................................................................................................................................................................................................................ - 3 - 1.1 目的......................................................................................................................................................................................................................................... - 3 - 1.2范围.......................................................................................................................................................................................................................................... - 3 - 1.3 概述......................................................................................................................................................................................................................................... - 3 - 二：UI界面用户体验设计原则与规范 ................................................................................................................................................................................................ - 4 - 1：应该遵循的基本原则 ............................................................................................................................................................................................................... - 4 - 2：页面外观规范........................................................................................................................................................................................................................... - 4 - ②宽带页面 ........................................................................................................................................................................................................................... - 5 - ③自适应 ............................................................................................................................................................................................................................... - 5 - ④其他页面 ........................................................................................................................................................................................................................... - 5 - 基本结构 ................................................................................................................................................................................................................................. - 6 - 页面版式： ............................................................................................................................................................................................................................. - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 .............................................................................................. - 6 - 版块组合形式 ......................................................................................................................................................................................................................... - 7 - 3：色彩规范................................................................................................................................................................................................................................... - 8 - 4：字体规范................................................................................................................................................................................................................................. - 10 - ①文字格式 .......................................................................................................................................................................................................................... - 10 - ②标题类 ............................................................................................................................................................................................................................. - 12 -
U I设计尺寸规范U I设 计规范 GE GROUP system office room 【GEIHUA16H-GEIHUA GEIHUA8Q8-
iPhone界面尺寸 设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7 750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S 640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px iPhone & iPod Touch 第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px UI设计规范：IOS、Android系统主流尺寸整理
iPhone图标尺寸： 设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P - 6SP - 7(@3×)1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px iPhone6 - 6S - 7 (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone5 - 5C - 5S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone4 - 4S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone & iPod Touch第一代、第 二代、第三代1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px
APP UI设计规范（可公开版） 前言 APP UI设计，有何规律？从抽象到具体，前后台并行，大概要经过几个阶段，每个阶段，都有一些明确的阶段输出doc，具体： （上图是在著名的《用户体验要素》原图上进行改编） KPA#1：第一痛点创意
首先，要确定你的“第一痛点”（first-item）还没有人做过，最好的调查方式是到APP Store上搜索已有的APP程序。如果你发现已经有某个APP包含类似的痛点，那你需要比它做的“更好”，“更好”可以体现在体验（exp）创新上，也可以体现在功能（func）革命上。 中国的法律环境缺乏对APP痛点相关智识产权的严格保护，但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。为什么呢？任何APP都不是孤立存在的，受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响，简单clone成功可能性很小。 另一方面，第一痛点创意风险很大，所谓失之毫厘，谬以千里，推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘，最好能输出类似下面的脚本化体验故事/片段： 1.1）体验片段#1。比如定机票应用中，有头等舱和经济舱。经济舱是一个普通的人， 而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。要做头等舱的人，一般都愿意自己看到自己这么一个形象。 1.2）体验片段#2。比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的 感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。其实它在干嘛呢？它是在提示用户，新增了自己相册功能。它虽然是给用户介绍新功能，但是它把整个情绪融在里面。 1.3）体验片段#3：比如安心停车，该APP具备查找附近有剩余车位的停车场位置，以 及根据收费情况进行优先显示的基本功能，而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点，“违章停车罚款概率”来自违章停车处罚数据库中的地点数据，必须得到交警部门的支持。 KPA#2：‘交互界面’exp/func思维导图 ‘交互界面’（简称exp/func）是比草图还简单的交互界面，往往用一句话描述,包含必要的交互信息，比如点、选、录入等输入和文字、图片、动画、特效等输出。从“第一痛点创意”相关的1~3个exp/func出发，利用“思维导图”（简称mind-map）的发散思维模式，延伸、细化、穷举、关联一切‘交互界面’，就有可能将“第一痛点创意”真正落地，成为货真价实的“第一痛点”。 ‘思维导图’一般的呈现方式是“发散图形”，一般如下：
iPhone界面尺寸 设备 分辨率PPI状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI60px132px146px iPhone6 - 6S - 7750×1334 px 326PPI40px88px98px iPhone5 - 5C - 5S 640×1136 px 326PPI40px88px98px iPhone4 - 4S 640×960 px 326PPI40px88px98px iPhone & iPod Touch 第一代、第二代、第三代 320×480 px 163PPI20px44px49px UI设计规范：IOS、Android系统主流尺寸 整理
iPhone图标尺寸： 设备App Store程序应用主屏幕 Spotlight 搜索标签栏 工具栏和 导航栏 iPhone 6P - 6SP - 7(@3× ) 1024×1 024 px 180×1 80 px 114×1 14 px 87× 87 px 75× 75 px 66× 66 px 1024×1120×1114×158×75×44×
iPhone 6 - 6S - 7?(@2 ×) 024 px20 px14 px58 px 75 px 44 px iPhone 5 - 5C - 5S?(@2 ×) 1024×1 024 px 120×1 20 px 114×1 14 px 58× 58 px 75× 75 px 44× 44 px iPhone 4 - 4S?(@2 ×) 1024×1 024 px 120×1 20 px 114×1 14 px 58× 58 px 75× 75 px 44× 44 px iPhone & iPod Touch 第一 代、第 二代、 第三代 1024×1 024 px 120×1 20 px 57×57 px 29× 29 px 38× 38 px 30× 30 px
公司移动UI设计规范 说明书
修改记录 1、前言 本文档主要为UI设计师和前端工程师提供设计参考和最佳实践，避免相互之间出现技术衔接脱节的问题。文档将由设计尺寸、界面元素、设计细节、切图细节四个部分组成，分别说明如下。 2、设计尺寸 本节主要阐明目前主流浏览设备和软件中的界面尺寸，相关设备和软件分别为iPhone、iPad、Android、Web。详细说明如下 2.1 iPhone
2.2 iPad
2.3 Android 屏幕尺寸 指实际的屏幕物理尺寸，以屏幕对角线来测量。为方便起见，Android把屏幕大小分为广义的四类：小、正常、大、特大。 像素 代表屏幕上一个物理的像素点。
屏幕密度 为解决Android设备中屏幕的碎片化，Android厂商引入了DP的概念。即一定尺寸屏幕显示像素的数量，因此有了四类屏幕密度：低（120dpi）,中（160dpi）,高（240dpi），超高（320dpi），而像素= DP*(dpi/160)。 例如一个240dpi的屏幕里，1DP = （240/160）=1.5px。 因此，设计尺寸确认后，以图标为例，需向上或向下做小、正常、大、特大，以及低、中、高、超高的图标尺寸与密度来适配不同的机型。 典型的设计尺寸 320dp：一个普通的手机屏幕（240x320,320x480,480x800） 480dp：一个普通的平板（480x800） 600dp：7寸平板（600x1024） 720dp：10寸平板（720x1280,800x1280） 安卓设计尺寸建议为720x1280或是480x800
界面设计测试规范 目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。 1:易用性： 按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知义最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1)：完成相同或相近功能的按钮用Frame框括起来，常用按钮要支持快捷方式。 2)：完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。 3)：按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。 4)：界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。 5)：界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 6)：同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。 7)：分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab。 8)：默认按钮要支持Enter操作，即按Enter后自动执行默认按钮对应操作。 9)：可写控件检测到非法输入后应给出说明并能自动获得焦点。 10)：Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。 11)：复选框和选项框按选择几率的高底而先后排列。 12)：复选框和选项框要有默认选项，并支持Tab选择。 13)：选项数相同时多用选项框而不用下拉列表框。 14)：界面控件较小时使用下拉框而不用选项框。 15)：选项数较少时使用选项框，相反使用下拉列表框。 16)：专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。 2：规范性： 通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应就越好。小型软件一般不提供工具箱。 规范性细则： 1)：常用菜单要有命令快捷方式。 2)：完成相同或相近功能的菜单用横线隔开放在同一位置。 3)：菜单前的图标能直观的代表要完成的操作。 4)：菜单深度一般要求最多控制在三层以内。 5)：工具栏要求可以根据用户的要求自己选择定制。
UI设计规范：IOS、Android系统主流尺寸整理iPhone界面尺寸 设备分辨率PPI状态栏高度导航栏高度标签栏高度 1242×2208px401PPI60px132px146pxiPhone6P、6SP、7P 750×1334px326PPI40px88px98pxiPhone6-6S-7 640×1136px326PPI40px88px98pxiPhone5-5C-5S 640×960px326PPI40px88px98pxiPhone4-4S 320×480px163PPI20px44px49px iPhone&iPodTouch 第一代、第二代、第三代 word完美格式
iPhone图标尺寸： 设备AppStore程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P-6SP- 1024×1024180×180114×11487×8775×75 7(@3×)pxpxpxpxpx66×66px 1024×1024120×120114×11458×5875×75 iPhone6-6S-7(@2×) pxpxpxpxpx44×44px iPhone5-5C- 1024×1024120×120114×11458×5875×75 5S(@2×)pxpxpxpxpx44×44px 1024×1024120×120114×11458×5875×75 iPhone4-4S(@2×)pxpxpxpxpx44×44px 1024×1024120×12057×5729×2938×38iPhone&iPodTouch第一pxpxpxpxpx30×30px代、第二代、第三代
iPhone界面尺寸 设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7 750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S 640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px iPhone & iPod Touch 第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px UI设计规范：IOS、Android系统主流尺寸整理
iPhone图标尺寸： 设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P - 6SP - 7(3×)1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px iPhone6 - 6S - 7 (2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone5 - 5C - 5S (2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone4 - 4S (2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone & iPod Touch第一代、 第二代、第三代1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px
软件UI设计规
目录 UI规 (1) 1用户界面设计理念 (4) 1.1美观 (4) 1.2易理解 (6) 1.3鼓励 (6) 1.4一致 (6) 1.5交互 (8) 1.6效率 (11) 1.7熟悉 (13) 1.8灵活 (14) 1.9容错 (14) 1.10可预测 (15) 1.11简洁 (15) 1.12透明 (16) 1.13权衡 (16) 2通用设计原则 (16) 2.1字体使用原则 (16) 2.1.1中文字体 (16) 2.1.2英文字体 (17) 2.2文字对齐原则 (17) 2.3界面配色原则 (18) 2.4按钮设计原则 (19) 2.5文本校验原则 (21) 2.6兼容性和个性化原则 (24) 2.7键盘响应 (25) 2.7.1TAB键 (25) 2.7.2Enter键 (25) 2.7.3导航键（上下左右） (25) 2.7.4DEL键 (25) 2.8鼠标 (25) 3各模块设计原则 (26) 3.1启动/登录界面 (26) 3.2主界面 (27) 3.3导航 (27) 3.4窗体布局 (28) 3.5提示信息 (30) 3.6文本框 (32) 3.7弹出框/弹出窗口 (33) 3.8下拉框/单选框/复选框 (34) 3.9列表页面 (35) 3.10报表规 (38) 3.11附件 (38)
3.12各类控件的标准大小 (39)
建立UI规的目的 将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。 1用户界面设计理念 1.1美观 ●使用可视元素 图1.1.1 ●对元素进行分组 图1.1.2