搜档网
当前位置:搜档网 › ipad,界面设计规范

ipad,界面设计规范

ipad,界面设计规范
ipad,界面设计规范

竭诚为您提供优质文档/双击可除

ipad,界面设计规范

篇一:界面设计规范

界面总体设计原则

界面设计的中心是用户,我们要做的是提供给用户可操作性强的界面,而不是由界面来操作用户。界面是系统与用户交互的媒介,友好的界面设计,不但可以给用户以良好的视觉感官,而且可以提供给用户简易、规范的交互过程,从而引导用户逐渐形成良好的操作习惯,提高用户操作系统的效率。

1、界面规范

界面的规范是指,界面使用的提示性语言,名称,符号和布局符合行业标准和软件行业标准。相同功能的提示语言,名称,符号和布局使用相同内容。这样可以使用户对系统形成统一的操作认识,加快对系统操作的掌握速度,提高工作效率。

遵循一致的准则,确立标准并遵循。无论是控件使用、提示信息措辞,还是颜色、窗口布局风格,都遵循统一的标准。做到真正的一致。使用户使用起来能够建立起精确的心

里模型,使用熟练一个界面后,切换到另外一个界面能够轻松推测出各种功能,而且能够降低培训成本。

2、界面操作简易

我们一直遵循“以用户为中心的设计”原则,在此原则下,界面操作的简易程度已经成为不可或缺的一个衡量指标。此外,界面操作的简易主要从以下几个方面衡量:

界面布局合理界面一致性鼠标与键盘合理对应快捷键

的使用(支持windows快捷键)尽可能减少在动作间需记忆的信息数量。合理的界面大小,高效利用显示器。

3、界面交互人性化

人性化的界面交互,让用户使用起来得心应手。我们做到的良好的人机交互,包括很多方面。我们经过长期的调研和努力,从适应性、有效性、易学习性、用户满意度几个方面出发来设计界面,做到更好更方便的人机交互。

窗口弹出位置明显。让用户轻松中转至新的界面。出错信息及警告。出错信息是指出现问题时系统给出的提示,用来提醒用户应该做的正确操作。

执行动作提示。界面作为人机对话的工具,用户做了任何动作,我们会给您一个视觉或听觉提示,让您更加放心的使用我们提供的每一个功能。

联机帮助。安装系统的同时,系统自动为您提供帮助文档,方便您的前期使用和查阅。

4、界面美观

美观大方的界面可以使界面布局和色彩搭配更加合理,从而消除用户的视觉疲劳,让用户不会因为长时间使用软件而感觉疲劳,减少长时间操作对眼睛产生的伤害。

某项目具体的界面规范

页面位置导航要摆放在界面的首行左起,要加入当前界面位置说明按钮

(1)全屏窗口

检索按钮统一放在检索条件的下一行的左起位置。操作按钮统一放在页面位置导航的下一行左起顺序排放。(2)非全屏窗口

功能按钮放在最下面一行,居中对齐。关闭按钮

每个非全屏窗口都有一个关闭按钮,和功能按钮一样放

在最下面一行,最后的位置。

表格

表格内部无边框,外侧边框为浅蓝色(6699cc),表头背景色(739ae0),奇数行背景色(F8F8FF),偶数行背景色(e9F2Fb)。

对于不带分页导航条的表格,要增加竖滚条,来使页面的布局稳定。

分页导航条

和表格配合使用,放在表格下方,有当前页码、总页数、总记录数、首页、上一页、下一页、末页、跳转到指定页。

弹出框使用统一的样式,有标题,有边框,有背景色,居中显示弹出框。日期选择使用统一的日期选择图片按钮,

日期选择控件要求可以快速选择日期。上移、下移、左移、右移按钮使用统一的按钮样式,操作的逻辑要统一。文件选择按钮使用统一的文件选择图片按钮。不能编辑的输入框背景色统一为灰色。术语使用的术语要统一,不能随便修改。页面主题风格可实现多类页面主题风格,提供给用户选择。菜单深度一般不超过3层。复选框多个复选框要带有全选和全取消功能,方便用户选择。下拉框在选项较少时,使用下拉框;在选项较多时,使用列表框。输入框

必输项输入框后面要附带红星标志,来说明该输入框必须输入。

要有长度控制,比如最长5位,输入5位字符后就不能再输入。

要有合法性验证,比如数字类,日期类等输入要判断输入数据是否合法,不合法时。快捷键

对于录入等用户经常用到,且要求录入速度高的界面,要求常用按钮如保存、新增等按钮有快捷键。

tab键

对于录入等用户经常用到,且要求录入速度高的界面,要求输入项按从左到右,从上到下的顺序使用tab键进行切换。

篇二:ios与android界面设计规范整合

ios篇

一、尺寸及分辨率iphone界面尺寸:320*480、640*960、640*1136

iphone6:4.7英寸(1334×750),iphone6plus:5.5英寸(1920×1080)

ipad界面尺寸:1024*768、2048*1536

单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。

ps:作图的时候确保都是用形状工具(快捷键:u)画的,这样更方便后期的切图或者尺寸变更。

(首三个系列的屏幕分辨率为320x480(hVga),163ppi;iphone4及iphone4s的屏幕分辨率为640x960,326ppi;iphone5则是640x1,136,326ppi,而iphone5的屏幕对比为接近16:9(71:40)。)

二、界面基本组成元素

iphone的app界面一般由四个元素组成,分别是:状态栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

状态栏(statusbar):就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏

(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px主菜单栏(submenu,tab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px内容区域(content):展示应用提供的相应

内容,整个应用中布局变更最为频繁,其高度为:734px [下图为了说明我不是瞎掰的:960-40-88-98=734]

至于我们经常说的iphone5/5s

的640*1136的尺寸,其实就是中间的内容区域高度增

加到910px。

ps:在最新的ios7的风格中,苹果已经开始慢慢弱化

状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计ios7风

格的界面的时候多多注意下~

三、字体大小

iphone上的字体英文为:helveticaneue。至于中文mac 下用的是黑体,win下则为华文黑体(最新字体称为黑体-简)。

下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小。

四,列表栏目间距

ios设计规范中列表的高度为88px

五,颜色值问题

ios颜色值取Rgb各颜色的值比如给予ios开发的色值

为R:12g:34b:56给出的值就是12,34,56(有时也要根据开发的习惯,有时也用十六进制);android开发的色值则使用十六进制#0c2238

andRoid篇

一、尺寸及分辨率

android界面尺寸:480*800、720*1280、1080*1920。[单位:像素]

android比iphone的寸尺多了很多套,建议取用

720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。

二、界面基本组成元素android

的app界面和iphone的基本相同:状态栏、导航栏、主菜单、内容区域。

android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。

状态栏高度为:50px

导航栏高度为:96px

主菜单栏高度为:96px

内容区域高度为:1038px(1280-50-96-96=1038)

android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和菜单栏一样的:96pxandroid

为了在界面上区别于ios,android4.0开始提出的一套holo 的ui风格一些app的最新版本都采用了这一风格,这一风格最明显的变化就是将下方的主菜单移到了导航栏下面,这样的方式解决了现在很多手机去除实

体键后再屏幕中显示而出现的双底栏的尴尬情景。

三、字体大小

android上的字体为:droidsansfallback,是谷歌自己的字体,与微软雅黑很像。

同样,百度用户体验的调查中,可以看出用户可接受的文字相应问题。

具体大小,还是那句话,找自己喜欢的app界面,手机截图后放进ps自己对比调节字体大小,切记,一定是高清截图

篇三:界面设计规范

界面设计规范前言

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的

重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。

一、易用性:

按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进

行相关的正确操作。

易用性细则:

1、完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。

2、完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

3、按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。

4、界面要支持键盘自动浏览按钮功能,即按tab键的自动切换功能。

5、界面上首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

6、同一界面上的控件数最好不要超过10个,多于10

UI设计尺寸规范最新最全UI设计规范

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界面设计规范标准

. .. . WI-PSMIS-DJ-B008 02.01.000 (部资料) ECE项目图形用户界面设计规 自2012年8月日起正式生效 从兴电子开发 编制:审批: .. .. .. ..

目录 1引言 (4) 1.1目的 (4) 1.2围 (4) 1.3参考资料 (4) 2概述 (4) 3原则 (5) 3.1易用性 (5) 3.2规性 (5) 3.3合理性 (6) 3.4美观与协调性 (6) 3.5独特性 (7) 4设计规 (7) 4.1登录界面 (7) 4.2首页 (7) 4.3框架设计 (7) 4.4按钮设计 (8) 4.5对话框 (8) 4.5.1一般对话框 (8) 4.5.2有模式对话框 (9) 4.5.3无模式对话框 (9) 4.6面板设计 (9) 4.7菜单设计 (9) 4.8图标设计 (9) 4.9滚动条 (10) 4.10换肤功能 (10) 5保留字 (10) 5.1常用保留字 (10)

电力营销图形用户界面设计规 1引言 1.1目的 统一和规软件界面。 1.2围 电力营销改造。 1.3参考资料 2概述 界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。 微软公司和苹果公司是这方面的典。 微软公司的所有产品包括Office、Windows、MSN Messenger和其所有的都是我们追随的对象。而且微软公司所有的文档和产品介绍也是我们模仿和学习的对象。 苹果公司更是这方面的鼻祖,它的所有产品无不表露着它在这方面是无人能及的。 我们考虑GUI设计时应该遵循基本的规则然后参考成熟的设计,并能够添加自己的独特性。 在一个时期很流行的界面风格在另外的时期可能已经落后,所以我们要有创新和超前的意识。

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

用户界面设计规范

1目的 ?设计软件的用户界面,产生《用户界面设计报告》。 ?制作用户界面的资源如图像、图标或者界面专用组件等。 2适用范围 2.1机构 项目组设计人员。 2.2业务 适用于公司内所有包含用户界面开发的项目的软件用户界面设计。 3名词术语 UI:User Interface用户界面。 4概述 用户界面设计包括四个活动,活动描述如下: 1)、设计准备 2)、用户界面设计 3)、撰写文档 4)、设计评审 5角色和职责 ?界面设计人员:从事用户界面设计,如果可能的话,邀请用户或美工人员协助设计用户界面。6活动

用户界面设计规范页数第 1 页共 6页 编制部门XX部 生效日期2019年10月15日 6.1设计准备 ?界面设计人员阅读需求规格说明书和概要设计说明书,明确界面设计任务。 ?界面设计人员与用户交流,了解用户的工作习惯和他们对界面的看法。 ?界面设计人员准备相关的设计工具和资料,收集或创作基本的界面资源如图像、图标以及通用的组件。 ?界面设计人员确定本软件的用户界面设计规则(或指南),主要包括: ?优秀界面的特征或通用的设计原则; ?软件主界面(如主窗口、主页面)的设计规则; ?软件子界面(如子窗口、子页面)的设计规则; ?标准控件的使用规则; ?美学设计规则。 6.2用户界面设计 用户界面设计一般要经历“原型设计->原型评估->细化”等步骤,通常迭代进行。 ?原型创作 界面设计人员创作界面原型:先徒手画,或者用Visio等工具绘制界面的视图,再用软件开发工具实现可以运行的原型。 ?原型评估 界面设计人员邀请用户和同行们评估界面的原型,汇集意见,及时改进。 ?细化 界面设计人员细化界面原型,例如美工处理,添加细节等。 6.3撰写用户界面设计文档 用户界面定型之后,界面设计人员根据指定的模板撰写详细设计说明书中的用户界面设计部分,主要内容包括: ?应当遵循的界面设计规范

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。

Android人机界面(UI)设计规范(带目录)

Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程 是什么使得android 有着独特的用户体验? 后台处理支持多任务功能 正在进行和事件驱动的提示信息 通过Widgets 和live folders 来实现实时信息的预览 用户想用时,任一应用程序都可以挑选和选择 android 不是关于程序的,它是关于活动,把任务分层, 1.2 架构基础 硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作,并给android 提供更多更好的功能。当菜单没有开启,要把屏幕最大化时,菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆(back stack)。 竖屏与横屏 一般来说,用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99%的android 布局支持横屏。 焦点和菜单 在触摸模式里没有焦点,只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能;它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标,使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单(长按)集中在一个特定对象。 总是把那些与所选项最相关的行为放在长按菜单的顶部。 需要记住的几点: 设计时要考虑速度和简洁 尽量分层来分等级 屏幕上的活动尽量最小 使用下载进度条,下载数据时,而不是让用户等待去看一个加载完全的页面。 考虑活动流而不是线性行为 1.3 屏幕上的行为

android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准,避免混淆用户。 1.4 表达 细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则 这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的,不止能应用于android 的用户界面设计,也可以应用于其他。苹果建议开发者花费60%的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻 隐喻是构建一个基于操作任务心智模型的模块;用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时,要注意andriod 中存在的隐喻,不要重新定义它们。同时,检查你的应用程序执行的任务,看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型 用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说,用户在真实世界里有写字、寄信的经验,也会产生特定的期待,像写一封新的信,选一个接受者,然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型,而不是建立一个用户已有的知识经验模式。 在设计程序用户界面之前,试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻,它代表了任务的概念组成。在写信这个例子中,隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中,隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望,包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。 要通过努力地何必把个下面的特征与用户心智模型相融合: 熟悉性 用户的心智模型主要是建立在经验的基础上 简单化 一项任务的心智模型通常是流线型,关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节,但是基本的组成部分占大部分,并且不会占用用户的注意。 可利用性Availability

软件用户界面设计规范

软件用户界面设计规范 1.导言 1.1 目的 为开发人员提供界面设计和开发的指南,引导开发人员设计简洁美观的用户界面; 1.2 适用范围 适用于xxxxxx。 2.软件界面设计的重要性 2.1 发展趋势 软件用户界面的发展经历了从简单到复杂、从低级到高级的过程,用户界面在软件系统中的价值比重越来越高。 2.2 开发竞争 得益于互联网的发展和普及,软件开发的技术门槛在不断下降,大部分软件企业的技术手段也趋向于雷同,“软件设计”变得越来越重要。当大家都掌握了相似的技术和需求信息后,企业之间的开发竞争“比的就是设计”。 –软件用户界面设计要综合考虑“易用性设计”、“艺术设计”和“技术实现”,很有挑战性。 2.3 用户挑剔 用户界面在很大程度上影响着软件的命运,因为广大用户对软件的评价主要来源于他们操作用户界面的感受。同类软件越多,选择余地越大,购买者对软件

用户界面就越挑剔。 3.软件界面设计的现状、问题及原因 3.1 不容乐观的现状 尽管国内有很多技术出色、聪明过人的软件工程师,但是不少人开发出来的软件产品却既难用又难看,客户很不满意。导致经常要修改软件的用户界面,造成极大的生产力浪费。 到处是用户界面设计缺陷: –界面措辞含糊,甚至有错别字。连简单的消息框都设计不好,可能存在文不对题的语病。 –界面布局混乱,缺乏逻辑,凡是能放的东西都堆集上去,让用户不知从何下手。–没有防错处理,不对用户输入的数据进行检验,不根据用户的权限自动隐藏或者禁用某些功能。执行破坏性的操作之前,不提醒用户确认。 –不提供进度条、动画来反映正在进行的比较耗时间的过程,对于重要的操作也不返回结果,让用户干着急。 3.2 问题和原因之一 由于国内没有开设软件界面设计的课程,大家对这部分知识没有深刻的意识,只是在工作中凭着个人的经验与感觉设计软件的用户界面,这样产生的界面往往得不到大众用户的认可。 3.3 问题及原因之二 开发人员在设计用户界面方面不仅存在先天的教育缺陷,更加糟糕的是还常常“错位”的毛病。他以为只要自己感觉用户界面漂亮、使用起来方便,那么用户也一定会满意。 3.4 问题及原因之三

app颜色规范

竭诚为您提供优质文档/双击可除 app颜色规范 篇一:app设计的用色规范 我们先来回顾下。什么是手机app界面设计规范? app设计规范指对app界面进行风格统一 ,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:app设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下app设计的色彩规范实例。 这是一个非常详细的手机app色彩使用规范实例。值得大家好好的看看。《找车app》 标准色规范: x轴:重要、一般、弱。 y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子

重要颜色之一红色需要小面积使用,用于特别需要强调和突 出的文字、按钮和icon;而黑色用于重要级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机app的色彩规范。这是一种表示方式。有这个规范,我们设计app和重构app 会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标 准色的表现形式。 app界面要给人简洁整齐,条理清晰感,依靠的就是界 面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰 当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少 考虑此方面,做到与操作系统统一,读取系统标准色表

移动互联网手机APP原型设计规范

移动互联网产品原型尺寸规范 最近公司安排我带一下新来的交互设计师,我想给他制定一份交互设计规范。这样一来,即使新来的交互设计师没什么基础,也可以根据这一份规范,做出大致标准的原型图。 因为Ui设计稿是先做iPhone6的,方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸。所以,交互设计稿的尺寸,就按照iPhone6的尺寸来做。 1、iPhone6的界面布局是:屏幕是4.7英寸的,设计稿的大小为750x1334px。状态栏(status bar):就是电量条,其高度为:40px; 导航栏(navigation):就是顶部条,其高度为:88px; 主菜单栏(submenu,tab):就是标签栏,底部条,其高度为:98px; 内容区域(content):就是屏幕中间的区域,其高度为: 1334px-40px-88px-98px=1108px 截图如下:

推荐3款测量工具为:MarkMan马克鳗,Dorado标注,PXcook像素大厨。2、关于iPhone6的图标的尺寸: 导航栏的图标高度为44px左右,标签栏的图标尺寸为50x50px左右,最大为96x64px。 关于iPhone6的文字的尺寸: 导航栏的文字大小最大值是34px,标签栏的图标下方的文字大小为20px。内容区域的文字大小是:24px,26px,28px,30px,32px,34px。 3、(iPhone6设计稿尺寸是@2x),做原型图的时候,可以做成@2x的,即750x1334px;也可以做成@1x的,即375*667px。 4、设置界面的图标高度和开关滑动按钮的图标高度:58px。 参考下图:

用户界面设计规范

用户界面设计规范 1.简介 软件用户界面的重要性。 软件用户界面的重要性。 一般地,成功的Web应用软件至少有三个卖点: 1)应用软件的功能符合用户需求。 2)用户容易使用该软件。 3)用户觉得该软件界面美观。 基于第1项,是用户需求方面的事情,2和3都是用户界面的事情,可见用户界面对于一个软件是多么的重要!所以用户界面设计是Web应用软件开发过程中的关键工作之一,而不是次要工作。 1.1.目的 本文档以用户界面(UI)设计理念和用户操作习惯为原则,为了保证界面设计的一致性、美观性、扩展性、安全性等,对WEB应用软件用户界面设计的原则、标准、约束和界面元素等内容提出详细要求,便于用户界面原形设计、用户界面开发、以及用户界面测试等角色使用和交流,并为以后的用户界面评估制定一套评价体系。 同时规范界面(UI)开发人员在设计、制作、开发用户界面行为,通过本文档来约束界面开发人员的随意性,避免造成页面效果不统一、不协调等问题。 1.2.范围 本规范适用于Web应用系统用户界面(UI)的设计、开发和测试评估工作。

1.2.1.内容范围 本规范严格定义了Web软件用户界面(UI)设计原则、要素和具体细则内容,并且对页面元素进的应用范围、样式进行了详细的定义。 1.2.2.适用范围 本规范适用于Web应用系统项目中所有界面(UI)设计开发工作。使用人员 包括:界面设计人员、制作开发人员、界面测试评估人员。 1.3.术语释义 1.3.1.用户界面 用户界面是人与软件系统进行交互的接口,实现用户与计算机之间的通信,以控制计算机或进行用户和计算机之间的数据传送的系统部件,是用来接收信 息和向用户展示信息的窗口,是软件系统成功与否的一个很重要因素。 1.3. 2.UI 即用户界面,又称用户接口 1.4.文档约定 本文档所指的页面,均基于1024×768的屏幕分辨率。 所有关于页面或控件的距离、大小描述,单位均是Pixel(像素),简写为PX。 1.5.参考资料 1、《用户界面设计--有效的人机交互策略(第三版)》电子工业出版社 2、《Web软件用户界面设计指南》电子工业出版社林锐等著 3、《GUI设计禁忌》机械工业出版社 4、《软件人机界面设计》高等教育出版社陈启安编

app设计规则 (6页)

本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == app设计规则 篇一:APP设计的用色规范 我们先来回顾下。什么是手机APP界面设计规范? APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设 定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定 设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:APP设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下APP设计的色彩规范实例。 这是一个非常详细的手机APP色彩使用规范实例。值得大家好好的看看。《找 车APP》 标准色规范: X轴:重要、一般、弱。 Y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要 小面积使用,用于特别需要强调和突出的文字、按钮和icon;而黑色用于重要 级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、 引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机APP的色彩规范。这是一种表示方式。 有这个规范,我们设计APP和重构APP会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标准色的表现形式。

APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表 3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,着重号,以及图标等 4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试 5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文 字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足 够反 篇二:APP 界面 UI设计规则则 什么是UI?UI就是界面设计。专业的讲指对软件的人机交互、操作逻辑、 界面美观的整体设计。一个APP想要吸引并留住客户,美观实用简便的用户界 面设计是其重要的一环。在开发APP之初,就应重视选择经验丰富的开发团队,并 掌握UI设计的原则。 1依据手机的物理特性设计界面的原则 1)应尽量减少文字的输入。由于手机在输入上的低效性,澳环认为,在设计的过程中,应尽量减少用户的输入,如果有可能可以设置默认值,或者让用户选 择目标值。 2)信息结构好,屏与屏之间的逻辑关系清晰。由于手机屏幕相对较小,只能展示较少的信息量,这时候,在APP网站建设中,就需要有清晰的信息架构,让 用户能一目了然的知道APP的各个模块及能够自由切换。 3)移动APP的重要功能可以在界面中适当的提示,采取对重要高频使用的功能或信息放在首页或什么显眼的位置。2依据手机的移动特性设计界面的原则

Web界面设计规范方案

Web应用界面设计规范(Design Specific ation for Web UI) 主讲人:ARay 目录: 一、软件界面规范的重要性及其目的 二、用户体验为何如此重要 三、Web规范体系介绍 四、界面设计开发流程 五、应该遵循的基本原则 六、界面设计规范 一、软件界面规范的重要性及其目的 ①使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以标准化的方式设计界面,提高工作效率。减少和改变责任不明,任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 ②产品设计通过规范的方式来达到以用户为中心的目的。 二、用户体验为何如此重要 ①日常生活中的遭遇 X员工悲惨的一天: 早晨起来,发现闹钟没有按原先设定响起来。 一边烧水,一边穿衣服,临走前去喝水却发现水还没有烧开。 到了地铁站,发现公交卡没有钱了。 无奈之下只能去排队买票。 排了3趟地铁,终于到公司了,但是你却迟到了。 结果:尽管你已经非常努力,但是你还是迟到了。 那么,让我们看看这一连串 的倒霉事, 是什么让我们如此狼狈? ②什么是用户体验

用户体验(user experience)是以用户为中心的设计中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值要尽可能的一致。 糟糕的用户界面表现: 表现一:过分使用各种奇形怪状、五颜六色的控件。 表现二:界面元素比例失调。比如按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。 表现三:界面元素凌乱。比如说,按钮和文本框摆放地点随意,该对齐的控件对不齐。 表现四:违背使用习惯。你按F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。表现五:消息框信息含糊、混乱。比如软件弹出一个消息框。把原本“确定”和“取消”写成为“是”和“否”,让用户不知道什么意思。 表现六:还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。这种

用户界面设计规范

用户界面设计规范

目录 1.总体原则 (2) 2.窗体控件布局 (2) 2.1.控件间距 (2) 2.2.控件对齐 (3) 2.3.文字对齐 (3) 2.4.窗口缩放 (3) 3.界面配色 (3) 4.控件风格 (4) 5.字体 (4) 6.交互信息 (4) 7.其他方面 (5)

1.前言 任何计算机应用系统都是通过用户界面与用户交互的,用户界面已成为所有计算机系统的有机组成部分,它决定了人类如何控制和操纵系统。一个好的用户界面应该为用户提供统一、规范的交互界面,从而提高用户工作效率,增强用户对系统的认可程度。因此可以说,用户界面设计的优劣已经成为计算机应用系统成功与否的关键因素之一。 本规范主要从交通信息中心系统开发、设计的实际出发,对用户界面设计进行一定程度上的规范,主要内容为用户界面设计总体原则、窗体布局、界面配色、控件风格、字体、交互信息以及其他等几个方面。 2.总体原则 用户界面设计的总体原则:统一。这也是本规范遵循的最高原则,用户界面的设计,无论是控件、信息提示措辞、界面配色等,都要遵循统一的标准,做到真正的一致。 本规范的施行方法:针对用户界面设计的特殊性,用户界面设计规范队某些方面只进行原则性的规范,具体的内容(比如配色方案用暖色系还是冷色系等)应在每一个应用系统的开发启动之前,由项目小组根据应用系统自身的特点、系统用户对象的特点等信息,确立每一个部分的具体内容,然后在应用系统设计过程当中执行。 3.窗体控件布局 3.1.控件间距 窗体控件布局合理,绝对不能显得拥挤;拥挤的窗体控件布局让人难以理解,因而难以使用。让人看上去,不能太拥挤,也不能太松散。控件对窗体的覆盖率以不高于75%为宜。 控件间隔(垂直):组与组之间间隔15,组内控件间间间隔10。 控件间隔(水平):组与组之间间隔15,组内控件间间间隔10。

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的切图标注插件,也被誉为神器;我使用了下,感觉相当不错,就是标注还没太适应,推荐一下这个。 标注工具以及这两款插件我都会上传,至于安装方法去“百度一下”吧,易学易用。

APP界面设计规范二

一、Android设计常识 开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。 Android常用单位 per inch):数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度;PPI计算公式:ppi=√(长度像素数2 + 宽度像素数2)/屏幕对角线英寸数 per inch):是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了; 屏幕尺寸(Screen Size):一般我们所说的手机屏幕尺寸,比如3英寸、英寸等,都是指对角线的长度,而不是手机的面积; 分辨率(Resolution):是指手机屏幕垂直和水平方向上的像素个数,比如分辨率为:720*1280,是指设备水平方向有720个像素点,垂直方向有1280个像素点 pixels):像素,不同设备显示效果相同 ( point):一个标准的长度单位,ios的逻辑单位,1Pt=1/72英寸,用于印刷业,非常简单易用;标注字体大小(72是早期台式机的DPI) (Scaled-independentpixels):放大像素,安卓的字体单位; (Density-independentpixels):是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系; sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关; 换算关系 android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。* dp:以160PPI屏幕为标准,则1dp=1px。 dp和px的换算公式:dp*ppi/160 = px。 对于320ppi的屏幕,1dp x 320ppi/160= 2px。 * sp:它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为100%时, 1sp=1px。 sp 与px 的换算公式:sp*ppi/160= px。

移动设备的界面设计尺寸规范

移动设备的界面设计规范 作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或尺寸变更 关于页面比例,请按照ios以及android制作两套尺寸页面 IOS篇 1、尺寸及分辨率 iPhone 界面尺寸:320×480、640×960、640×1136 (以上单位都是像素,至于分辨率一般网页UI和移动UI基本上都是72 ppi)本次使用640×1136的尺寸设计。 2、界面基本组成元素 iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域 这里取用640×1136的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸: 状态栏:信号、运营商、电量等显示手机状态的区域,其高度为:40 px 导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:910 px P.S. 在最新的 iOS8 的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起 3、字体大小

iPhone 上的字体英文为:HelveticaNeue至于中文,Mac下用的是黑体-简,Win 下则为华文黑体。 字体大小请保持在24px~36px之间(具体大小,请作图后放置手机中观看实际效果) 4、按钮大小:点击区域(包括按钮+空白区域)需要>44*44px Android篇 1、尺寸及分辨率 Android 界面尺寸:480×800、720×1280、1080×1920… (单位:像素) Android 比 iPhone 的尺寸多了很多套,本次设计建议取用720×1280 这个尺寸,这个尺寸720×1280中显示完美,在1080×1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。 2、界面基本组成元素 Android 的 APP 界面和 iPhone 的基本相同:状态栏、导航栏、主菜单栏以及中间的内容区域。 Android 中我们取用720×1280的尺寸设计: 状态栏高度为:50 px 导航栏高度为:96 px 主菜单栏高度为:96 px 内容区域高度为:1038 px(1280-50-96-96=1038) 若Android功能键移到了屏幕中,高度也是和菜单栏一样的:96 px 3、字体大小 Android 上的字体为:Roboto,是android原生的字体,与微软雅黑很像。 字体大小范围为16px~32px(具体大小,请作图后放置手机中观看实际效果) 4、按钮大小:点击区域(包括按钮+空白区域)需要>44*44px 要求篇

UI界面设计规范模板

UI设计(流程/界面)规范 一:UI设计基本概念与流程 1.1 目的 规范公司UI设计流程,使UI设计师参与到产品设计整个环节中来,对产品的易用性进行全流程负责,使UI设计的流程规范化,保证UI设计流程的可操作性。 1.2范围 l 界面设计 l 此文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI界面设计人员、界面评审人员和配置测试人员。 1.3 概述 UI设计包括交互设计,用户研究,与界面设计三个部分。基于这三部分的UI设计流程是从一个产品立项开始,UI设计师就应根据流程规范,参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节,履行相应的岗位职责。UI设计师应全面负责产品以用户体验为中心的UI设计,并根据客户(市场)要求不断提升产品可用性。本规范明确规定了UI设计在各个环节的职责和要求,以保证每个环节的工作质量。 1.4 基本介绍 A、需求阶段 软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人

用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。 除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。B、分析设计阶段 通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。 C、调研验证阶段 几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观真实的反馈。 测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。 调研阶段需要从以下几个问题出发: 用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩,文字,图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。 所有这些都需要用图形表达出来,直观科学。

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非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系。 而阴影就是最常见的表现形式:

APP应用开发的设计规范与标准

APP应用开发的设计规范与标准 APP设计规范: APP界面设计规范指导APP设计过程中的设计标准。根据统一的设计标准,使得整个APP在视觉上统一。提高用户对APP的产品认知和操作便捷性。 APP设计规范的重要性: 统一的标准,一、便于在设计过程中的团队合作,二、提高用户对APP的产品认知和操作便捷性。 APP设计规范具体内容: 1.遵循统一的准则,确定标准并遵循; 2.颜色使用恰当,遵循对比原则:色彩标准、色彩对比,突出内容、显示测试; 3.光标、图标和指示图片、地图等:统一的构图布局,色调、对比度、色阶和风格; 4.Font:中文采用宋体,英文采用Microsoft Sans Serif。大小:MSS字体8磅,宋体小五号字(9磅)五号字体(10磅); 5.文字表达:在提示信息、帮助文档中的。用词、修饰及标点符号等等; 6.控件风格、布局; 7.布局的顺序:从左到右,从上到下;

8.快捷键、弹出菜单; 9.用户交互:按钮状态、弹出窗口位置、执行动作提示信息(视觉和听觉,甚至的触觉的); 10.联机帮助:HELP文档。 产品设计、用户体验、交互设计、视觉设计、开发、运营 —————————————————【←总结】·【参考→】————————————————————— 【开发苹果APP界面标准规范】 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训、支持成本,支持人员不会行费力逐个指导。3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加做法: 项目组有经验人士,确立UI规范:

历代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

相关主题