android交互设计规范Word文档下载推荐.docx
- 文档编号:7695011
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:11
- 大小:21.84KB
android交互设计规范Word文档下载推荐.docx
《android交互设计规范Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《android交互设计规范Word文档下载推荐.docx(11页珍藏版)》请在冰点文库上搜索。
Java版—事实上由于左右物理操纵键和方向键、OK键是按键机型的普遍配置,S60第3版规范的适用范围是超级普遍的,略微修改一点就能够够适用于Java平台。
区别在于电话的―删除‖和―返回‖两个物理硬键的配置不太一致,因此需要统一将右下角的命令默以为―返回‖,在编辑文本时,临时变成―删除‖。
如此捐躯了某些机型的某些操作的效率,保证了那个整体的机型都可利用。
IphoneOS—Iphone的显现一举打破了之前假设干平台固有的设计定势,硬键和操作模式都精简了许多。
只是其缺少固定的menu模式,这对第三方软件的设计来讲是个庞大的挑战,要么需要专门大程度上离开iphone自身的设计规范体系,要么就极端精简功能。
Android—跟从了一些iphone中的经典手势,操作和页面布局风格上相对保守一点,保留了menu和back两个硬键,尽管不够独树一帜,可是在功能和设计之间做的了一个不错的平稳,关于第三方应用来讲,这是一个能够有宽广发挥空间的平台。
依照上文所述,接下来我就要紧以S60第3版、Android、IphoneOS为代表,通过抽取电话交互设计规范中的部份,来讲明他们的特性和区别,顺便展开一些个人体会的表达。
大伙儿请看以下截图:
上面几幅图并无刻意选择同一类型的界面来对照,咱们不妨先仅关注硬键/全局功能键,会发觉他们之间的显著不同,事实上反映到设计进程中,如此的区别对界面设计造成的阻碍要来的更大。
下面以摘取电话交互设计规范的形式来陈述:
1.硬键和手势操纵
S60第3版
Android
Iphone:
以上硬键和手势关于操作的操纵,需要咱们在设计前有个十分清楚的熟悉,而且整个团队达到一致,如有精力那么需要专门写到设计规范文档中。
硬键操纵是没有什么改动余地的,两款触摸机型能够对手势适当进行取舍,毕竟有些应用用不到所有的手势,能精简操作最好。
(从下面开始,会有一些功能界面,请许诺我偷懒一下,用线框代替实际界面截图)
2.菜单
S60第3版的菜单是由左软键或OK键调出,需要概念以下几点:
(注:
聚焦到某一条款上时,通常按OK键是打开,但有一些内容包括几种看起来级别相当的操作,现在会弹出菜单项选择择)
如何收回背景是不是雾化每屏最多显示多少条有无二级菜单,若是有,如何调出和收回,和一级菜单的位置关系,核心条的区别菜单项文字靠左数字标号,若是整个软件能保证菜单项目均在10位之内,建议加上,如此能够与数字键盘对应对聚焦项或当前页面不适用的菜单项,是不显示仍是文字变灰处置。
OK键菜单只包括针对聚焦内容的操作项,需操纵在一屏之内,幸免二级项菜单项的排序规那么:
针对聚焦项的在上,其他的在下,这两部份中别离依照利用频率从上至下排列
Android
Android传统的菜单是由menu硬键调出,比较多的是2-3行,每行2-3项,看起来像是一些按钮,因此里面的图标和文字都居中。
作为第3方应用,若是菜单项稍多,做成一纵列的文字项从操作上来看也何尝不可,毕竟用户刻意记住其默许的菜单形式也没有什么益处。
只是仍然需要注意操纵一下数量,若是需要二级,能够考虑做成弹出的,比如在一级项当选择―排序‖,以后弹出选择框来选择
Android还有一种长按菜单,按住某个项目达到一按时刻后,会弹出在触点周围的位置Iphone
Iphone并无一个明确和固定的菜单模式,较保守一点能够说是没有。
一些类似菜单的操作一般是通过弹出选择,或是拆分成几层,一次次点击进入更深层的页面去寻觅按钮的形式来达到。
因此要做Iphone平台的第3方应用的同窗应当提早做好预备,从产品策划开始就着手考虑那个问题。
最有效的方法是第一尽可能的缩减功能,第二尽可能的缩减操作方式。
不然会发觉为了一些细枝末节的操作,还需要设定好几层页面。
固然,也能够加入一条操作栏来作为辅助,只是整体风格和操作就不Iphone了。
说到那个地址,不能不结合前两点延伸一下,对导航系统进行说明:
众所周知,导航系统要紧担负着几个任务:
展现内容架构、说明当前位置/状态、说明能够去哪里。
在网页上的典型形式为全局导航条。
在电话上,导航系统一样重要,可是受限于屏幕尺寸,一样没有足够的空间放置如此的组件,但电话有着自己的体系:
篇二:
iOS和Android的app界面设计规范
iOS和Android的app界面设计规范
字数876阅读96439评论36喜爱344
记录一下iOS和Andoird的界面设计规范,方便进行标准的产品设计,并与设计师顺畅沟通
iOS篇
界面尺寸
设备
iPhone6plusiPhone6iPhone5/5s/5ciPhone4/4siPad1/2iPadmini
分辨率750×
1334px640×
1136px640×
960px1024×
768px1024×
768px
状态栏高度导航栏高度标签栏高度60px40px40px40px40px20px20px
132px88px88px88px88px44px44px
147px98px98px98px98px49px49px
1242×
2208px
iPad3/4/Air/Air2/mini22048×
1536px
Paste_
图标尺寸
AppStore程序应用
主屏幕
spotlight工具栏和
标签栏
搜索导航栏
75*75px44*44px75*75px44*44px75*75px44*44px25*25px22*22px25*25px22*22px
1024*1024px180*180px144×
144px87×
87px75*75px66*66px1024*1024px120*120px144×
144px58*58px1024*1024px120*120px144×
144px58*58px1024*1024px90*90px1024*1024px90*90px
72*72px50*50px72*72px50*50px
iPad3/4/Air/Air2/mini21024*1024px180*180px144×
144px100*100px50*50px44*44px
字体
iPhone上的字体英文为:
HelveticaNeue至于中文,Mac下用的是黑体-简,Win下那么为华文黑体,所有字体要用双数字号。
XX用户体验部做过一个小调查,关于app字体大小的调查结论如下:
颜色值
IOS颜色值取RGB各颜色的值比如某个色值,给予IOS开发的色值为R:
12G:
34B:
56给出的值确实是12,34,56(有时也要依照开发的适应,有时也用十六进制)
内部设计
一、所有能点击的图片不得小于44px(Retina需要88px)二、单独存在的部件必需是双数尺寸3、两倍图以@2x作为命名后缀
4、充分考虑每一个操纵按钮在4中状态下的样式,如图
Android篇
状态栏高度:
50px导航栏高度:
96px标签栏高度:
96px
Android最近出的电话都几乎去掉了实体键,把功能键移到了屏幕中,固然高度也是和标签栏一样的:
内容区域高度为:
1038px(1280-50-96-96=1038)
图表尺寸
屏幕大小
320×
480px
480×
800px/480×
854px/540×
960px720×
1280px1080×
1920px
启动图标
操作栏图上下文图系统通知图标
最细笔画
标标(白色)
不小于2
px不小于3px不小于2dp不小于6px
48×
48px32×
32px16×
16px24×
24px72×
72px48×
48px24×
24px36×
36px48×
48dp32×
32dp16×
16dp24×
24dp144×
144
96×
96px48×
48px72×
72px
px
ps:
Android设计规范中,利用的单位是dp,dp在安卓机上不同的密度转换后的px是不一样的
Android上的字体为:
Droidsansfallback,是谷歌自己的字体,与微软雅黑很像。
Android的字体大小调查结论是:
颜色值
Android颜色值取值为十六进制的值比如一绿色的值,给开发的值为#5bc43e
那么,为了知足自己的工作需要,咱们谈谈UI设计师需要什么技术。
在视觉设计方面1)平面组成2)色彩组成3)版式设计4)心理学5)美术绘画6)设计意识在交互设计方面1)了解用户体验设计、可用性原那么;
2)信息挖掘、用户调研、数据分析;
3)良好的逻辑能力;
4)心理学;
5)交互设计原那么、不同平台的规范;
6)产品视觉感;
7)沟通能力。
篇三:
交互设计规范
交互设计规范:
IOS篇一、尺寸及分辨率
iPhone界面尺寸:
320*480、640*960、
640*1136
iPhone6:
英寸(1334×
750),iPhone6Plus:
英寸(1920×
1080)
设计图单位:
像素72dpi。
在设计的时候并非是每一个尺寸都要做一套,尺寸按自己的电话来设计,比较方便预览成效,一样用640*960或640*1136的尺寸来设计,此刻iphone6和plus出来后有很多人会利用6的设计成效。
若是是我来做的话,我会利用640×
1136,对plus做单独的修改适配,因为plus的屏幕实在是大了,遵循屏大显示更多内容的原那么那个地址本应该是需要修的了。
有更好方法的话希望大伙儿能够分享一下。
Ps:
作图的时候确保都是用形状工具(快捷键:
U)画的,如此更方便后期的切图或尺寸变更。
二、界面大体组成元素
iPhone的app界面一样由四个元素组成,别离是:
状态栏(statusbar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。
那个地址取用640*960的尺寸设计,那咱们就说说在那个尺寸下这些元素的尺寸。
状态栏(statusbar):
确实是咱们常常说的信号、运营商、电量等显示电话状态的区域,其高度为:
40px导航栏(navigation):
显示当前界面的名称,包括相应的功能或页面间的跳转按钮,其高度为:
88px主菜单栏(submenu,tab):
类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:
98px
内容区域(content):
展现应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:
734px
至于咱们常常说的iPhone5/5s的640*1136的尺寸,其实确实是中间的内容区域高度增加到910px。
PS
:
在最新的
iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一路,可是再怎么变,尺寸高度也仍是没有变的,只只是大伙儿在设计iOS7风格的界面的时候多多注意下~
三、字体大小
iPhone上的字体英文为:
HelveticaNeue。
至于中文Mac下用的是黑体,Win下那么为华文黑体(最新字体称为黑体-简)。
以下图是XX用户体验做过的一个小调查,能够看出用户可同意的文字大小。
四,切图
切图是APP设计中的一个重要进程,关系到APP的界面实现,及各类适配性还有各类性能IOS在没6plus前,咱们只需要提供两种图,一般图及视网膜屏幕图。
以640×
1136(640×
960是一样的)做的设计图的话就会好办一点。
直接出设计图上的原大小图标,比如咱们命名一个图片叫,咱们给开发的图就要改变那个名字叫img-line@确实是在后缀名前加上@2x表示视网膜屏的图,iPhone4的还需要把那个图尺寸按比例缩小50%,取得正真的。
然后把这两个图移交给开发,iPhone6的图在规范里是与5s利用的是一样的,也是@2x图。
有些UI那么需要做适当的适配,比如拉长,拉高,那个开发会去做。
关于IPhone6plus的话范里给出的是@3x相信大伙儿也明白是怎么回事,但如果是要利用PS放大的话,大伙儿做图的时候就需要利用形状工具来做,放大后还需要认真微调,那个地址就不多做讲解
温馨提示:
在出可按的图片切图时需要注用意片的可按区域大小,有时图标很小,实际切出来的放在上面,用手指是按不到的,咱们就需要对图片单独处置,拓宽图片的有效区域,那个地址是拓宽非放大,确实是改变画布大小使图片尺寸面积扩大,使图片周围拓宽多余的透明区域,从而改变可按大小。
五,颜色值问题
56给出的值确实是12,34,56(有时也要依照开发的适应,有时也用十六进制);
Android开发的色值那么利用十六进制#0c2238ANDROID篇
一、尺寸及分辨率
Android界面尺寸:
480*800、720*1280、1080*1920
Android比iPhone的寸尺多了很多套,建议取用720*1280那个尺寸,那个尺寸720*1280中显示完美,在1080*1920中看起来比较清楚,切图后的图片文件大小也适中,应用的内存消耗也可不能太高。
Android的app界面和iPhone的大体相同:
状态栏、导航栏、主菜单、内容区域。
Android中咱们取用的720*1280的尺寸设计,那咱们就说说在那个尺寸下这些元素的尺寸。
状态栏高度为:
50px
导航栏高度为:
96px
主菜单栏高度为:
1038px(1280-50-96-96=1038)
Android最近出的电话都几乎去掉了实体键,把功能键移到了屏幕中,固然高度也是和菜单栏一样的:
Android为了在界面上区别于iOS,开始提出的一套HOLO的UI风格一些app的最新版本都采纳了这一风格,这一风格最明显的转变确实是将下方的主菜单移到了导航栏下面,如此的方式解决了此刻很多电话去除实体键后再屏幕中显示而显现的双底栏的为难情景。
三、字体大小
上的字体为:
Droidsansfallback,是谷歌自己的字体,与微软雅黑很像。
一样,XX用户体验的调查中,能够看出用户可同意的文字相应问题。
具体大小,仍是那句话,找自己喜爱的app界面,电话截图后放进PS自己对照调剂字体大小,切记,必然是高清截图
Android设计规范中单位是dp,dp在安卓机上不同的密度转换后的px是不一样的,因此依照设计图的px转换成dp也是不一样的,那个能够利用转换工具转换,开发一样会有,也有些开发会利用px做单位,因为做了前期的转换工作
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- android 交互 设计规范