ipad界面设计规范.docx
- 文档编号:3039078
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:16
- 大小:24.35KB
ipad界面设计规范.docx
《ipad界面设计规范.docx》由会员分享,可在线阅读,更多相关《ipad界面设计规范.docx(16页珍藏版)》请在冰点文库上搜索。
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下则为华文黑体(最新字体称为黑体-简)。
下图是XX用户体验做过的一个小调查,可以看出用户可接受的文字大小。
四,列表栏目间距
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,是谷歌自己的字体,与微软雅黑很像。
同样,XX用户体验的调查中,可以看出用户可接受的文字相应问题。
具体大小,还是那句话,找自己喜欢的app界面,手机截图后放进ps自己对比调节字体大小,切记,一定是高清截图
篇三:
界面设计规范
界面设计规范前言
界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。
而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。
同时界面如同人的面孔,具有吸引用户的直接优势。
设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。
目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。
而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。
目前流行的界面风格有三种方式:
多窗体、单窗体以及资源管理器风格,无论那种风格,以下规则是应该被重视的。
一、易用性:
按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。
理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
易用性细则:
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、专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。
二、规范性:
通常界面设计都按windows界面的规范来设计,即包含"菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单"的标准格式,可以说:
界面遵循规范化的程度越高,则易用性相应的就越好。
小型软件一般不提供工具厢。
规范性细则:
1、常用菜单要有命令快捷方式。
2、完成相同或相近功能的菜单用横线隔开放在同一位置。
3、菜单前的图标要尽量能直观的代表要完成的操作。
4、菜单深度一般要求最多控制在三层以内。
5、工具栏要求可以根据用户的要求自己选择定制。
6、相同或相近功能的工具栏放在一起。
7、工具栏中的每一个按钮要有及时提示信息。
8、一条工具栏的长度最长不能超出屏幕宽度。
9、工具栏的图标能直观的代表要完成的操作。
10、系统常用的工具栏设置默认放置位置。
11、工具栏太多时可以考虑使用工具厢。
12、工具厢要具有可增减性,由用户自己根据需求定制。
13、工具厢的默认总宽度不要超过屏幕宽度的1/5。
14、状态条要能显示用户切实需要的信息,常用的有:
目前的操作者、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。
15、滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
16、状态条的高度以放置5号字为宜,滚动条的宽度比状态条的略窄。
17、菜单和工具条要有清楚的界限,菜单要求凸出显示,这样在移走工具条时仍有立体感。
18、菜单和状态条中通常使用5号字体。
工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。
19、右键快捷菜单采用与菜单相同的准则。
三、帮助设施:
系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。
帮助设施细则:
1、帮助文档中的性能介绍与说明要与系统性能配套一致。
2、打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
3、操作时要提供及时调用系统帮助的功能。
常用F1。
4、在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。
也就是说帮助要有即时针对性。
5、最好提供目前流行的联机帮助格式或html帮助格式。
6、用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
7、如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
8、在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。
四、合理性:
屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。
合理性细则:
1、父窗体或主窗体的中心位置应该在对角线焦点附近。
2、子窗体位置应该在主窗体的左上角或正中。
3、多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。
4、重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
5、错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。
横排开头或最后与竖排最后为易点位置。
6、与正在进行的操作无关的按钮应该加以屏蔽(windows中用灰色显示,没法使用该按钮)。
7、对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
8、非法的输入或操作应有足够的提示说明。
9、对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
10、提示、警告、或错误说明应该清楚、明了、恰当。
五、美观与协调性:
界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。
美观与协调性细则:
1、长宽接近黄金分割点比例,切忌长宽比例失调、或宽度超过长度。
2、布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
3、按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
4、按钮的大小要与界面的大小和空间要协调。
5、避免空旷的界面上放置很大的按钮。
6、放置完控件后界面不应有很大的空闲位置。
7、字体的大小要与界面的大小比例协调,通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
8、前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。
常用色考虑使用windows界面色调。
9、如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
10、大型系统常用的主色有"#e1e1e1"、"#eFeFeF"、"#c0c0c0"等。
11、界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
12、如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。
13、对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。
14、通常父窗体支持缩放时,子窗体没有必要缩放。
15、如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。
六、菜单位置:
菜单是界面上最重要的元素,菜单位置按照按功能来组织。
菜单设测试细则:
1、菜单通常采用"常用--主要--次要--工具--帮助"的位置排列,符合流行的windows风格。
2、常用的有"文件"、"编辑","查看"等,几乎每个系统都有这些选项,当然要根据不同的系统有所取舍。
3、下拉菜单要根据菜单选项的含义进行分组,并且按照一定的规则进行排列,用横线隔开。
4、一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
5、没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头,不常用的靠后放置;重要的放在开头,次要的放在后边。
6、如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
7、菜单深度一般要求最多控制在三层以内。
8、对常用的菜单要有快捷命令方式,组合原则见八。
9、对与进行的操作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式--即只有需要的菜单才显示,则最好。
10、菜单前的图标不宜太大,与字高保持一直最好。
11、主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。
12、主菜单数目不应太多,最好为单排布置。
深圳--果果(6120xx3)20xx-03-0522:
09:
15
七、独特性:
如果一味的遵循业界的界面标准,则会丧失自己的个性。
在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。
尤其在商业软件流通中有着很好的迁移默化的广告效用。
1、安装界面上应有单位介绍或产品介绍,并有自己的图标。
2、主界面,最好是大多数界面上要有公司图标。
3、登录界面上要有本产品的标志,同时包含公司图标。
4、帮助菜单的"关于"中应有版权和产品信息。
5、公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。
八、快捷方式的组合
在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些,在西文windows及其应用软件中快捷键的使用大多是一致的。
菜单中:
1、面向事务的组合有:
ctrl-d删除;ctrl-F寻找;ctrl-h替换;ctrl-i插入;ctrl-n新记录;ctrl-s保存;ctrl-o打开。
2、列表:
ctrl-R;ctrl-g定位;ctrl-tab下一分页窗口或反序浏览同一页面控件。
3、编辑:
ctrl-a全选;ctrl-c拷贝;ctrl-V粘贴;ctrl-x剪切;ctrl-z撤消操作;ctrl-y恢复操作。
4、文件操作:
ctrl-p打印;ctrl-w关闭。
5、系统菜单
alt-F文件;alt-e编辑;alt-t工具;alt-w窗口;alt-h帮助。
6、mswindows保留键:
ctrl-esc任务列表;ctrl-F4关闭窗口;alt-F4结束应用;alt-tab下一应用;enter缺
省按钮/确认操作;esc取消按钮/取消操作;shift-F1上下文相关帮助。
按钮中:
可以根据系统需要而调节,以下只是常用的组合。
alt-y确定(是);alt-c取消;alt-n否;alt-d删除;alt-q退出;alt-a添加;alt-e编辑;alt-b浏览;alt-R读;alt-w写。
这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。
九、安全性考虑:
在界面上通过下列方式来控制出错机率,会大大减少系统因用户人为的错误引起的破坏。
开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。
如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。
因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。
安全性细则:
1、最重要的是排除可能会使应用非正常中止的错误。
2、应当注意尽可能避免用户无意录入无效的数据。
3、采用相关控件限制用户输入值的种类。
4、当用户作出选择的可能性只有两个时,可以采用单选框。
5、当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
6、当选项特别多时,可以采用列表框,下拉式列表框。
7、在一个应用系统中,开发者应当避免用户作出XX或没有意义的操作。
8、对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
9、对可能发生(ipad,界面设计规范)严重后果的操作要有补救措施。
通过补救措施用户可以回到原来的正确状态。
10、对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
11、对错误操作最好支持可逆性处理,如取消系列操作。
12、在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
13、对可能造成等待时间较长的操作应该提供取消功能。
14、特殊字符常有;;’"> 15、与系统采用的保留字符冲突的要加以限制。
16、在读入用户所输入的信息时,根据需要选择是否去掉前后空格。
17、有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。
十、多窗口的应用与系统资源:
设计良好的软件不仅要有完备的功能,而且要尽可能的占用最低限度的资源。
1、在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其他窗口来显示该窗口。
2、在主界面载入完毕后自动卸出内存,让出所占用的windows系统资源。
3、关闭所有窗体,系统退出后要释放所占的所有系统资源,除非是需要后台运行的系统。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ipad 界面设计 规范