安卓设计规范 (吊车的设计规范)
从规划方面来看,做手机界面规划的尺度一般分为iPhone和Android两种设备。
假如以iPhone为规划设备,尺度一般是运用7501334,1125 x 2436,1242 x 2208这三种尺度规划都能够,7501334是2倍图规划,1125x2346和1242x2208都是3倍图来进行规划。
假如是用PS做规划稿就用750*1334,假如是用SKetch或许XD来规划,常见是用1倍尺度来说,也便是375*667或许375*812(iPhone X)。
假如以Android为设备进行规划,尺度一般运用7201280,10801920进行规划第一种是2倍图,第二种是3倍图。
近年来iPhone和Android的设备增多,各尺度也逐突变多,下面有一份安卓屏幕尺度表:
以及一份iOS屏幕分辨率和尺度表:
扩展材料:
1、UI界面规划的基本要素:
机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)
明晰意义的图标,风格明显的版面规划是手机界面规划的重要作业,较为盛行的是以Motorola,Nokia等为代表的欧洲简略风格,以及韩国的时髦艳丽的风格。
2、规划留意事项:
尺度问题: 480800,540960,7201280,10801920象素尺度是较常见的手机屏幕尺度,在规划时能够依据实践产品要求进行规划,更大的屏幕能够有更多的交互体现和视觉元素的支撑,较为自在。
色彩问题: 由于手机lcd自身的约束,在色彩的复原程度上没有pc如此完善,因而在选用色彩时要依据运用的屏幕进行调理。
可完成性问题: 遭到硬件运算速度和内存的影响,以及不行估计的后台程序开发难度,过于杂乱的效果将很难进行完成,与程序工程师和ui工程师,硬件工程师的交流显得尤为重要。
参阅材料来历:百度百科-手机UI规划
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又完全不明白标准?
Android UI 的规划规矩
软件界面规划相关的各项介绍
界面规划是为了满意软件专业化标准化的需求而发生的对软件的运用界面进行美化优化标准化的规区分支。详细包括软件发动封面规划,软
件结构规划,按钮规划,面板规划,菜单规划,标签规划,图标规划,翻滚条及状况栏规划,装置进程规划,包装及产品化。
在规划的进程中有较多留意的关键问题,以下列出几点:
(1)软件发动封面规划
应使软件发动封面终究为高明晰度的图画,如软件发动封面需在不同的渠道、操作体系上运用将考虑转化不同的格局,而且对选用的色彩不
宜超越256 色,最好为216色安全色。软件发动封面巨细多为干流显现器分辨率的1/6大。假如是系列软件将考虑全体规划的一致和延续性。在上面应该夺意图标示制造或支撑的公司标志、产品商标,软件称号,版本号,网址,版权声明,序列号等信息,以建立软件形象,便利运用者或购买者在软件发动的时分得到提示。插图宜运用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若运用拍摄也应该进行数位处理,以构成该软件的特性化特征。
(2)软件结构规划
软件的结构规划就杂乱得多,由于触及软件的运用功用,应该对该软件产品的程序和运用比较了解,这就需求规划师有必定的软件跟进经历,能够快速的学习软件产品,而且在和软件产品的程序开发员及程序运用目标进行一同交流,以规划出友爱的,共同的,契合程序开发准则的软件结构。软件结构规划应该简练明快,尽量少用无谓的装修,应该考虑节约屏幕空间,各种分辨率的巨细,缩放时的状况和准则,而且为将来规划的按钮,菜单,标签,翻滚条及状况栏预留方位。规划中将全体色彩组合进行合理调配,将软件商标放在明显方位,主菜单应放在左面或上边,翻滚条放在右边,状况栏放在下边,以契合视觉流程和用户运用心思。
(3)软件按钮规划
软件按钮规划应该具有交互性,即应该有3到6种状况效果:点击时状况;鼠标放在上面但未点击的状况;点击前鼠标未放在上面时的状况;点击后鼠标未放在上面时的状况;不能点击时状况;独立主动改变的状况。按钮应具有简练的图示效果,应能够让运用者发生功用相关反响,群组内按钮应该风格一致,功用差异大的按钮应该有所差异。
(4)软件面板规划
软件面板规划应该具有缩放功用,面板应该对功用区间区分明晰,应该和对话框,弹出框等风格匹配,尽量节约空间,切换便利。
(5)菜单规划
菜单规划一般有选中状况和未选中状况,左面应为称号,右边应为快捷键,假如有下级菜单应该有下级箭头符号,不同功用区间应该用线条切割。
(6)标签规划
标签规划应该留意转角部分的改变,状况可参阅按钮。
(7)图标规划
图标规划色彩不宜超越64色,巨细为16x16、32x32两种,图标规划是方寸艺术,应该加以侧重考虑视觉冲击力,它需求在很小的规模体现出软件的内在,所以许多图标规划师在规划图标时运用简略的色彩,运用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。
(8)翻滚条及状况栏规划
翻滚条主要是为了对区域性空间的固定巨细中内容量的改换进行规划,应该有上下箭头,翻滚标等,有些还有翻页标。状况栏是为了对软件当时状况的显现和提示。
(9)装置进程规划
装置进程规划主要是将软件装置的进程进行美化,包括对软件功用进行图示化。
(10)包装及产品化
终究软件产品的包装应该考虑保护好软件产品,功用的宣扬交融于漂亮中,能够印刷部分产品介绍,产品界面规划。
图标规划标准
数位规划引入了一种新的图标规划款式。以下是规划和创立款式图标的详细标准。
图标款式应该风趣、色彩丰厚且充满生机,由于现在的体系支撑图标是32位图标,而且边际十分滑润。在矢量程序中制造完每个图标后,再用Adobe Photoshop进行处理可使图画愈加完美。本标准是专为规划者编写的。在创立图画时,主张您与高水平的图形规划者一同作业,特别是具有丰厚的矢量和 3D软件经历的图形规划者。
图标规划概述的意图是让您了解WindowsXP的新款式,为创立图标做好预备。
图标款式特性
(1) 色彩丰厚,是对WindowsXP外观的弥补。
(2) 不同的视点和透视特性为图画增添了动态生机。
(3) 元素的边角十分柔软,并稍微有些油滑。
(4) 光源坐落图标的左上角,一起有盘绕光照亮图标的其它部分。
(5) 突变效果使图标具有立体感,进而使图标的外观愈加饱满。
(6) 投影使图标更具对比度和立体感。
(7) 增加概括可使图画更明晰。
(8) 日常目标(如计算机和设备)具有更现代化的个人外观。
图标尺度
Windows XP图标有四种尺度,主张运用以下四种尺度:
(1) 48x48像素
(2) 32x32像素
(3) 24x24像素
(4) 16x16像素
图标色彩深度支撑
WindowsXP支撑32位图标。32位图标为24位图画加上8位alpha通道。使图标边际十分滑润,且与布景相交融。
每个WindowsXP图标应包括以下三种色彩深度,以支撑不同的显现器显现设置:
24位图画加上8位alpha通道(32位)
8位图画(256色),加上1位通明色
4位图画(16色),加上1位通明色
调色板
图标中运用的主要色彩。
目标的视点和分组
WindowsXP款式图标运用的透视网格:并非一切目标运用16?6的杂乱图画都能取得较好效果。某些目标通常以直观图画显现:文档图标、符号图标(如正告或信息图标)、单一目标图标(如放大镜)
除非创立堆叠辅佐目标能够更清楚地表达图标的意义,不然就可读性和完整性而言,仍是应运用直观图画。还应考虑怎么按组检查图标,以便承认怎么将目标分组。
投影
运用投影后,WindowsXP图标将更明晰且更具立体感。可在Photoshop中完成这种效果,本攻略的后边部分将对此进行描绘。若要为图画增加投影,请在 Photoshop中双击图画的图层,并挑选dro Shadow。然后将Angle更改为135,Distance更改为 2,Size更改为2。此刻投影为75%不通明黑色。
概括
制造XP款式图标时,为图画增加概括可使之更明晰,并可保证图画在不同布景色上都具有较好效果。
概念
规划图标时,请考虑以下要素:
运用已有概念以保证实在表达了用户的主意。考虑图标在用户界面环境中以何种方法呈现,以及怎么作为图标集的一部分运用。考虑图形的
文化布景。防止在图标中运用字母、单词、手或脸。必须用图标表示人或用户时,请尽或许使其大众化。假如图标中的图画由多个目标组成,应考虑怎么使图画尺度更小。主张在图标中运用的目标不超越三个。关于 16?6的尺度巨细,还可考虑删去某些目标或简化图画使之更简略辨认。
通明东西
将Gif Movie Gear(GMG)翻开一个对话框,其间显现您的图标。运用吸管东西单击图标的布景色。此色彩将更改为暗黄绿色(或在 GMG中选作
通明布景色的色彩)。重复一切4位和8位帧。若要保存图标,请挑选 File->Save Icon As...。
创立东西栏
Windows东西栏图标除不运用投影之外,运用的款式与其它图标相同。由于东西栏图标十分小,主张您运用简略的图画。假如以直观方法显现
图画即可明晰地表达图标的意义,则不必运用其它杂乱方法。
创立AVI
WindowsXP运用8位AVI。创立.avi文件的进程与创立图标的进程相同-在Photoshop中预备图画,然后将其拖动到GMG 中。请按以下辅导创立8位图标。若要运用GMG保存AVI,请转至File->Export As->AVI file。创立.avi文件时,请考虑以下要素:运用品红(R255 G0 B255)作为布景通明色。在Photoshop中,重要的一点是不要呈现杂散像素。请将填充才能设置为0,并承认未选中撤销锯齿。
软件人机界面
UI即User Interface(用户界面)的简称。UI规划则是指对软件的人机交互、操作逻辑、界面漂亮的全体规划。好的UI规划不仅是让软件变得
有特性有品尝,还要让软件的操作变得舒适、简略、自在,充分体现软件的定位和特色。
美丽的事物常常会让人无法抵抗。这便是为什么产品超卓的外观规划关于电脑、轿车、日用品、家具、食物、服装等等简直一切产品的销售与推行,都有着无足轻重的效果的原因。
相同的道理,关于软件公司来说,软件产品便是他们的产品,而软件界面便是他们产品的外观,界面的漂亮与否,直接关系到了软件产品的营销胜败。
咱们能够清楚地看到,微软公司对软件界面规划的注重。请回想一下您在第一次见到win2000时的情形,与nt4.0比较是否惊叹他界面的漂亮性与易用性?而您假如运用过xp体系,则会被其令人奇特的感官概念而震动信服!金山公司的金山词霸便是国内软件成功的比如了,从金山词霸3.0到金山词霸2001 的改变可谓经典。闻名的网页动画制造软件flash从3.0到4.0,只是修改了图标和窗体,当即大为增色…
如今世界上成功的软件公司都十分注重软件界面的美化规划作业,由于他们深刻地知道,在剧烈的商场竞争中,只是有强壮的功用是远远不够的,不足以打败微弱的对手。咱们能够相象一下,您在挑选手机的时分,假如有两款手机,功用相同,而第一款比第二款要漂亮许多,那么您将挑选哪一款呢?当然是漂亮的那一款了。试想,您的客户,也会拿您和您竞争对手的软件做这样的比较的。
现在的软件企业都知道,广告和商场推销活动对商场营销的效果是多么的重要,并竭尽全力地打广告、做活动、做推行。但咱们知道,这些活动的终究意图,是为了让用户购买并运用软件产品,而用户终究运用的也是您的产品,那么为什么不在软件界面的漂亮性上多下些时间呢?在比如家用电器、轿车、电脑等老练的商场中,用十分精巧的广告去推行一种功用强壮却丑恶无比的产品,是一种笑话。但是,这样的笑话在软件职业里却层出不穷。这也是像我国足球相同,我国软件业与国外比较较存在的一个很大的距离。
实践证明,各商家只需在产品漂亮规划方面很小投入,将会有很大产出。其投入产出比,要比在功用抢先性开发上的投入大得多。
在用户把软件买回去后,他们和您企业的联络,或许说您企业形象在客户眼中的体现,很大一部分是经过您软件的界面来传达的,那么漂亮友爱的用户界面关于宣扬您的企业文化,关于给客户灌注您的企业理念,关于您企业的宣扬运做都将是十分有利的。特别假如您的公司做的是项目承揽方法的事务,那么无论是在竞标的时分,仍是在项目交付运用今后,漂亮的界面都会给您的客户以决心和杰出的形象。
要成为一款有竞争力的软件,不但要有强壮的功用,也需求有一个友爱的界面规划。纵观当今的it职业,其软件界面规划的开展趋势大体上有如下几种技能:
1. 指令言语用户界面的开展。
依据其言语的特色,及人机交互的方法的分为
a. 方法言语
b. 自然言语。
c. 类自然言语。
2. 图形用户界面的广泛使用
图形用户界面和人机交互进程极大地依靠视觉和手动操控的参加,因而具有激烈的直接操作特色
3. 直接操作用户界面技能的老练。
用户终究关怀的是他欲操控和操作的目标,他只关怀使命语义,而不必过多为计算机语义和句法而分神。关于很多物理的、几许空间的以及形象的使命,直接操作已体现出巨大的优越性。
4. 多媒体用户界面及多通道用户界面的开展大大丰厚了计算机信息的体现方法。
5. 虚拟现实技能的使用
虚拟现实体系向用户供给感同身受(immerse)和多感觉通道(multi-sensory)体会,作为一种新式人机交互方法,虚拟现实技能比曾经任何人机交互方法都有期望完全完成调和的、以“人为中心”的人机界面。