① 安卓和iOS在设计规范上的区别
OS设计规范围绕一个核心,就是“模态”
安卓设计规范如果总结成一句话,就是“任何地方均可点击”
区别iOS和安卓设计的10个check points
1. 如何全局导航:
iOS导航tab bar放在底部(顶部手短摸不着)
安卓导航tab个数少用固定tab,个数多用滚动tab,都在顶部(安卓的硬按键在底部,防止误操作)
(如果种类太多,都可以使用左侧抽屉设计)
2. 二级页页头导航条是什么顺序:
iOS导航
1 向上箭头+上级页面标题
2 当下页面标题(居中,可以没有)
3 操作(一般就一个)
iOS不需要给出logo
安卓导航
1 向上箭头+logo+当下页面标题
2 Spinner(optional)
3 重要操作(可能多个)
4 更多操作 (省略号竖向)
安卓不需要指出上一级页面标题
3. 搜索框设计
安卓搜索点击放大镜进入搜索
搜索框=非模态窗口+左箭头+LOGO+输入框(占位符)
iOS7搜索下拉滑出搜索框进入搜索
搜索框=模态窗口,没有左箭头,没有搜索按钮
4. 管理列表条目
iOS左滑能删掉条目
安卓长按操作条目(展现contextual menu或者contextual action bar)
ps:安卓4.0已经逐步接受手势操作,不那么严格
5. 批量管理条目
iOS右上角有编辑按钮,点击进入批量管理
安卓长按条目进入批量管理模态
5. 视觉
iOS主要内容白色,背景淡色,内容与背景衬线分割
安卓不使用背景,一切区域皆可点
6. 选择分类
iOS使用scope bar或者左上角抽屉设计(汉堡包)
安卓使用下拉菜单spinner(但是很少设计师喜欢)
7. 子页面操作工具栏
iOS一律放在底部,叫split action bar
安卓一律放在顶部右端,叫contextual action bar
8. 产品LOGO
iOS不在导航中显示logo
安卓每一个页面左侧顶部都应该显示logo
9. 列表样式
iOS在条目上提供右箭头,提醒更多内容(optional)
安卓不放右箭头,一切区域皆可点击,不需要额外提醒
10. 按钮
安卓使用扁平方型按钮设计
iOS7建议borderless按钮设计
两者圆角尺寸也不同
② android UI 的设计规则
一. Launcher(启动图标):
1.在背景下易见;
2.尺寸 Phone: 48*48 dp
Google Play: 512*512 pixels
3.风格:任意轮廓。三维,正视图,稍微透视看起来像从顶部往下看(使用户有深度感)。
二. Action Bar(工具栏):工具栏图标为图片按钮
1.尺寸: phone下为32*32dp
2.焦点区比例: 光学直角区可为24*24dp
3.风格: 象形,平淡,不要太详细,光滑曲线或尖锐的形状。若图片偏窄,可转动45度角以填充焦点区,笔画宽度与空白宽度至少为2dp
4.颜色: #333333 激活:60%不透明 禁用:30%不透明
#FFFFFF 激活:80%不透明 禁用:30%不透明
三. Small/Contextual Icons(小的上下文图标):用于为动作和状态提供特殊项目
1.尺寸: 16*16dp
2.焦点区域与比例: 全部为16*16dp, 光学直角区域为12*12dp
3.风格: 中性,平淡,简单。填充的形状比简单的笔画易见。使用简单的视觉暗示以便用户能轻易读懂。
4.颜色: 使用少量的非中性颜色。激活时与背景形成对比。
四. Notification Icons(通知图标)
1.尺寸: 必须为24*24dp
2.焦点区域与比例: 全部区域24*24dp 光学直角区域22*22dp。
3.风格: 平实简单,与启动图标一样使用视觉暗示。
4.颜色: 全白,也可以使其根据系统变暗。
专题二、设计原则:
一. 使用户着迷:
1.用惊艳吸引人:漂亮界面、动画、声音……
2.实际对象比按钮和菜单更有趣:使用户能直接触摸和控制App中的对象
3.使成为自己的:既有默认的,又可以进行自定义设置
4.了解学习用户所需:学习用户爱好与习惯,而不是要求用户单调的做
二. 让生活简单化:
1.保持简洁:用短语
2.图片比文字更快:用图片解释想法
3.替用户做决定,但最终决定权在于用户:不是一开始就问,先猜测,允许撤销
4.只显示用户正需要的:将任务和信息分块,隐藏不是必须的选项
5.用户一直要知道自己在哪:在屏幕间用切换显示关系,提供任务反馈
6.从不丢失:保存用户花时间创建的,并让他们可以从任何地方接入,记住设置、个人触摸和创建
7.看起来一样,功能也一样:外观、模式差不多的操作都要相近
8.重要的时候才打扰用户:一个好的个人助手,会避免掉不重要的事情,使用户能集中精力
三. 让用户兴奋起来:
1.给用户所有地方都能使用的技巧:使应用程序简单易学
2.不是我的错:绅士的让用户做修正,如果出错,给出恢复指导但省略科技细节
3.给出鼓励(回馈):将复杂任务切成易于完成的小步骤,在用户动作后给出回馈,例如一个光晕
4.为用户完成繁重的事务:使新手做他们认为自己不会做的事情,而且做得像专家一样。例如多种照相功能的快捷键使业余爱好者通过简单几步就能完成
5.让重要的事情更快:将App中最重要的部分更容易找到,更快使用,像照相机的快捷键、音乐播放器的暂停键等。
专题三、书写风格:
一. 使用户着迷:
1.保持简洁:简明、简单、精确
2.保持简单:使用简短单词、动词和名词
3.友好:用第二人称你称呼用户,使用户感觉安全、快乐和激情
4.重要的事放在前
5.避免重复
③ Android设计规范为什么不推崇底部标签了
1、尺寸以及分辨率: Android的界面尺寸比较流行的有:480*800、720*1280、1080*1920,我们在做设计图的 时候建议是以 480*800的尺寸为标准; 2、界面基本组成元素: 界面基本组成元素包括:状态栏+导航栏+主菜单栏+内容区域;以480*800的尺寸为标准下的 各个元素的高度(其实导航栏和菜单栏每一个应用都或许不一样,android对于尺寸没有太明确的 数据规范)如下: 3、字体: Android 系统中,Droid Sans 是默认字体,与微软雅黑很像; 4、操作栏: 1、”操作栏”对于 Android 应用来说是最重要的设计元素,它通常在应用运行的所有时间都呆 在屏幕顶部; 2、 操作栏的基本布局: 1向上+2 Spinner视图控制+3 重要操作按钮+4 更多操作:其中,向上按钮,点击后是去到 当前界面的上一个层级,非第一层级界面有此按钮,第一层级界面则无向上按钮;Spinner 是 用于展示内容的下拉菜单,其内容包括视图的快速切换和显示相关内容的完整信息;更多操作 (action overflow)是集合操作栏中不常用的和非重要操作的地方。 5、多面板布局: 多面板布局更多的是针对平板电脑,把手机端的目录视图和详情视图两个层级的界面,甚至更 多的页面,复合展示在同一个界面中,有效地利用平板电脑的屏幕空间,扁平化层级结构,简 化导航。这点在iPad上已经运用得相当娴熟了。 6、选择: Android4.0中的长按与Android2.3及更早期的版本有很大的不同。早期版本长按操作后,是 出现情境菜单的浮出层。在Android4.0中,长按后在操作栏的位置会覆盖一个临时的情境操 作栏,不再弹出情境菜单浮出层。在临时情境操作栏的环境下,当前界面的内容项允许被单个 处理,也允许被批量处理。 7、返回和向上: 返回按键用在手机全局的虚拟导航栏中,基于用户最近查看的界面历史,采用时间倒序的方式, 连接界面间的关系。向上按钮用在操作栏的左侧,基于层级结构,点击后是去到当前界面的上一 个层级,若当前界面已经是最高一级,则没有向上按钮。 8、主题样式: 推出三套默认主题:Holo浅色主题、Holo深色主题、Holo浅色底+深色操作栏主题。主推app在 这三套默认主题的基础上做设计,以加快app研发效率,但只是建议使用,并没有完全强制。 9、触摸与反馈: 用户触摸应用中的可操作区域,应当在视觉上有响应,微小的反馈会给用户带来很好地效果; 10、按钮: 1、按钮的3种表现形式如下图: 2、对于仅包括图标的按钮,不需要使用背景色; 11、滑块: 滑块的几种表现形式如下图: 12、进度条: 如果某个操作需要花费很长的时间,就需要用进度条的指示和旋转圈的形式来表示: 1、如果你可以知道当前任务完成的比例,那么使用进度条,让用户了解大约还需要多久才能完成; 2、当使用旋转圆圈时,不要配以文字标签。旋转的圆圈已经表明了正在进行后台操作。 13、开关: 用户通过开关作出选择,包括3种形式:复选框+单选按钮+开关; 1、复选框:用户可以在一个集合中作出多个选择: 2、单选按钮:单选按钮允许用户在一个集合中做一次选择; 3、开关:开关控制单个选项的状态; 14、对话框: 应用通过对话框让用户作出决定或者填写一些信息, 1、对话框的左边一般情况下是取消按钮,右边是确定按钮; 2、警告对话框:对于执行下一步操作前请求用户确认或者提示用户当前的状态。内容不 同,布局也会不同; A:没有标题栏的警告对话框:内容区应当包括一个问句或与操作有明显相关的陈述句: B:有标题栏的警告对话框:仅在有可能引起数据丢失、连接断开、收费等高风险的操作 时才使用。并且标题应当是一个明确的问题,内容区提供一些解释。 3、弹出对话框:一般情况下用户通过触摸来作出选择; 4、toast提示:toast提供了轻量级的反馈,显示几秒钟之后会自动消失; 15、选择器: 选择器提供了一种简单的方式,让用户在多个值中选择一个;除了可以通过点击向上/向下 按钮调整值以外,也可以通过键盘或者手势。 16、通知: 1、基本布局:主要包括的形式结构图如下如: 2、扩展布局:可通过扩展布局显示信息的前几行或者图片的预览,来让用户了解更多的信息; 3、操作:将重要的操作按钮图标在通知栏目展现出来,这样可以加快用户的操作; 4、合并通知:如果正在等待处理的通知是同等类型,则就可以合并通知,合并的通知提供了 综合信息的描述,并告诉用户有多少条未处理的信息; 5、你可以使用扩展布局为合并的通知提供更多信息,这样用户可以知道被合并的消息细节, 并选择在应用中阅读通知内容; 17、写作风格: 1、简短:只告知用户最必要的信息,避免冗余的描述,尽可能缩短文本长度; 2、简明:使用短词语、主动词和简单名词;仅说明必要的信息,不要费力解释,用户不会care的; 3、友好:使用缩写;使用第二人称和用户对话(您或你);保持随意,轻松的腔调; 4、标点符号: A:句号:如果toast、标签或通知消息等控件中只包含一句话,无需使用句号作为结尾。 如果包含两句或更多,则每一句都需以句号结尾; B:省略号:省略号常用于未完成的状态, 例如表示操作进行中 (“下载中…”) 或是表示文 本未能完全显示。 18、强调纯粹的Android应用设计: 在Android4.0 app设计准则中,特别强调为Android设计纯粹的Android app,切勿使用其 他平台特定元素的注意事项,有以下5个方面: A:强调视觉元素的样式要符合android系统; B:不用其它平台特有的图标; C:区分向上和返回,不在操作栏上使用返回样式的按钮; D:不在界面的下方使用选项卡tabs; E:不在内容列表里使用向右箭头。 19、其他细节: 增加许多新的交互细节、信息展示和视觉样式等规范: 1、新增了横滑移除内容的交互手势。在部分模块中,支持向左或向右横滑移除内容的操作,如 最近任务和消息通知抽屉; 2、视觉的平面化用的越来越普遍了。
④ 安卓UI界面设计规范标准
简单来说Mobile GUI设计就是手持设备的图形用户界面设计,狭义上来看是手机和PPC,广义上可以推广至手机,移动电视,车载系统,手持游戏机,MP3,GPS等一切手持移动设备。
Mobile GUI的设计基于对手持设备产品的使用特性的理解,对用户的研究和对界面使用情景的深入研究。GUI的设计分为平台内置和主题设计部分,前者需要专业的design house根据厂家的实际产品进行设计分析后进行整体设计,后者则可以经由任何用户进行自主设计,当然后者的设计限制和平台限制都比较大。
目前索爱和三星以及Nokia的S60平台支持用户的Theme自定义设计。
设计研究的流程为:产品特性--用户心理--市场背景--图形设计策略--设计检验--实际设计投放
⑤ 安卓手机ui设计尺寸规范
众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体,英文字体为robot字体。
只使用偶数单位 24 pt,28 pt,36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
讲图标之前先来分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。
px是像素的意思, 不同设备显示效果相同。
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
⑥ iOS和安卓的设计规范有何不同
iOS设计规范围绕一个核心,就是“模态”
安卓设计规范如果总结成一句话,就是“任何地方均可点击”
区别iOS和安卓设计的10个check points
1. 如何全局导航:
iOS导航tab bar放在底部(顶部手短摸不着)
安卓导航tab个数少用固定tab,个数多用滚动tab,都在顶部(安卓的硬按键在底部,防止误操作)
(如果种类太多,都可以使用左侧抽屉设计)
2. 二级页页头导航条是什么顺序:
iOS导航
1 向上箭头+上级页面标题
2 当下页面标题(居中,可以没有)
3 操作(一般就一个)
iOS不需要给出logo
安卓导航
1 向上箭头+logo+当下页面标题
2 Spinner(optional)
3 重要操作(可能多个)
4 更多操作 (省略号竖向)
安卓不需要指出上一级页面标题
3. 搜索框设计
安卓搜索点击放大镜进入搜索
搜索框=非模态窗口+左箭头+LOGO+输入框(占位符)
iOS7搜索下拉滑出搜索框进入搜索
搜索框=模态窗口,没有左箭头,没有搜索按钮
4. 管理列表条目
iOS左滑能删掉条目
安卓长按操作条目(展现contextual menu或者contextual action bar)
ps:安卓4.0已经逐步接受手势操作,不那么严格
5. 批量管理条目
iOS右上角有编辑按钮,点击进入批量管理
安卓长按条目进入批量管理模态
5. 视觉
iOS主要内容白色,背景淡色,内容与背景衬线分割
安卓不使用背景,一切区域皆可点
6. 选择分类
iOS使用scope bar或者左上角抽屉设计(汉堡包)
安卓使用下拉菜单spinner(但是很少设计师喜欢)
7. 操作工具栏
iOS一律放在底部,叫split action bar
安卓一律放在顶部右端,叫contextual action bar
8. 产品LOGO
iOS不在导航中显示logo
安卓每一个页面左侧顶部都应该显示logo
9. 列表样式
iOS在条目上提供右箭头,提醒更多内容(optional)
安卓不放右箭头,一切区域皆可点击,不需要额外提醒
10. 按钮
安卓使用扁平方型按钮设计
iOS7建议borderless按钮设计
两者圆角尺寸也不同
以上是想到的10处不同,大家可以拿着它去看安卓和iOS上哪些app是符合规范的,哪些app又完全不懂规范?
⑦ iOS和安卓的设计规范有何不同
是一种基于Linux的自由及开放源代码的操作系统。主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。
iOS是苹果公司的移动操作系统。
iOS是由苹果公司开发的移动操作系统,苹果公司最早于2007年1月9日的Macworld大会上公布这个系统,最初是设计给iPhone使用的,后来陆续套用到iPod touch、iPad以及Apple TV等产品上。
iOS和安卓的ui区别二:UI设计规范不一样。
具体的UI设计规范详解请点击阅读:iOS、Android、WindowsPhone官方设计规范汇总
比如现在通常设计的尺寸对比如下:
iOS: 750*1334 或者 1242*2208
android 720*1280 或者 1080*1920
iOS和安卓的ui区别三:导航方式不一样
iOS的Tab放在页面底部,不能通过滑动来切换,只能点击。也有放在上面的,也不能滑动,但有些Tab本身可以滑动,比如天猫的。还有新闻类的应用。
Android一般放在页面顶端,可以通过滑动页面来切换Tab,当然Tab可以点击切换,Tab多的话,Tab本身也可以滑动。比如豌豆荚,网络贴吧,QQ。总之,Android啥都可以有。
iOS和安卓的UI区别四:单条item的操作
iOS单条item的操作有两种,点击和滑动,点击一般进入一个新的页面,滑动会出现对这条item的一些常用操作,如微信里滑动一条对话,会出现标记未读和删除。
Android中,单条item的操作也有两种,点击和长按,点击一般进入一个新的页面。长按进入一个编辑模式,可以在里面进行批量和其他一个操作,比如删除,顶置等等。比如小米的短信页面;长按也可以弹出情境操作栏dialog,进行操作,比如Android版的微信。
OS和安卓的UI区别五:实体键
iOS只有一个实体键(音量,电源不算哈),home键,这个键有这么几个功能:
1、按一次,回到桌面。
2 、双击,出现多任务界面
3、iOS8里面,轻触两下Home键,调出单手模式
4 、指纹解锁
Android有四个实体键(现在很多被屏幕上的虚拟键代替,但功效是一样的)4.4一下的分别是back键,home键,menu键,和搜索键。4.4及以上,是back键,home键,多任务键。安卓原生是这样,经过优化的Android就不一定了,比如魅族的smart bar,根据当前页面情景变化,不过蛮好用。
Android的back键,在大部分情况下,和页面上的返回功效一样。不过,Android的back键可以在应用件切换,还可以返回主屏幕。这个iOS里面的键不能在应用间直接切换。
iOS和安卓的UI区别六:浮窗设计元素不一样
安卓里可以看到各种浮窗,流量,清理内存等等。iOS暂时还不支持这样的浮窗。越狱的貌似可以。
iOS和安卓的UI区别七:图标尺寸和命名规范不一样
1、iOS和安卓手机的APP图标尺寸规范和图标命名规范
2、对比PC、iOS、Android等终端APP的交互设计的差异化