重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

androidui设计,安卓appui设计规范

android系统中有哪三种常用的ui设计方式

 Android 资源类型

新建ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为成都创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!

1.字符串资源

1.普通字符串

2.字符串数组

复制代码

resources

string-array name="planets_array"

itemaaa/item

itembbb/item

/string-array

/resources

复制代码

获取方式:getResources().getStringArray(R.array.planets_array)

3.复数字符串资源

某些自然语言中,不同的数字在使用方法上会有所不同,比如one book,two books。当数量大于1时,会使用不同的名词或其它复数形式;

复制代码

resources

plurals name="numberOfp"

item quantity="one"one person/item

item quantity="other"more persons/item

/plurals

/resources

复制代码

quantity属性的值除了one和other外,还可以是zero,two,few,many;

引用复数字符串:

// 引用数字为1的复数字符串

getResources().getQuantityString(R.pluarlas.numberOfp,1);

// 引用数字为其它值的复数字符串

getResources().getQuantityString(R.pluarlas.numberOfp,10,10);

4.占位符格式化字符串

常用的格式化字符串三种方法:

1.在字符串中使用引号

字符串中的值虽然可以随意指定,但是当遇到特殊符号时(双引号,单引号)就需要采取特殊的方法来处理这些符号。

如果是单引号(')可以使用转义符(\)或用双引号(")将整个字符串括起来,如果是双引号,可以在双引号前使用转义符(\)。

resources

string name="str1""This'll work"/string This'll work

string name="str2"This\'ll work/string This'll work

string name="str3"\"apple\"/string "apple"

/resources

2.用占位符格式化字符串

使用String.format(String,Object...)方法可以格式化带占位符的字符串,只需要在字符串中插入占位符,就可以使用String.format方法格式化字符串资源,format方法要求的占位符用%1,%,...,%n,其实第n个占位符与format方法的n+1个参数值对应;

resources

!-- $s表示该占位符被字符串替换,$d表示该占位符被整数替换 --

string name="str1"hello,%1$s!You have %2$d new message/string

/resources

String str1 =String.format(getResources().getString(R.string.str1), "ly", 17);

3.使用HTML标签格式化字符串资源

字符串资源支持一些HTML标签,因此可以直接在字符串资源中使用这些HTML标签格式化字符串

字符串资源支持如下的HTML标签

b粗体字

i斜体定

u带下划线的字

有时需要同时使用HTML标签和占位符格式化字符串,如果使用String.format方法格式化字符串,会忽略字符串中的所有HTML标签。为了使format方法可以格式化带

HTML标签的确字符,需要使用Html.formHTML方法处理字符串;

resources

string name="hello_world"Welcome to bandroid/b/string

string name="str2"Hello,%1$s! You have b %2d new messages /b/string !--同时包含占位符和html标签的字符串--

/resources

由于需要使用Html.formHTML方法处理字符串,因此HTML标签中的 "" 需要使用 "" 表示 "" 并不需要处理

获取字符串:

String text = String.format(getResources().getString(R.string.str2), "ly", 10);

CharSequence styledText = Html.fromHtml(text);

// 如果format的某个参数包含HTML的特殊字符,如"","",可以使用如下方式读取字符串的值;

String escapedUsername = TextUtils.htmlEncode("");

String text1 = String.format(getResources().getString(R.string.str2), "ly", 20);

2.Layout资源

1、如果根节点是View,除了requestFocus标签外,不能添加任何子标签,requestFocus可能被添加到布局文件的任何View中,表示该标签对应的控件在显示时处于焦点状态,整个布局文件只能有一个requestFocus标签

2、根节点是ViewGroup,常用的布局都是ViewGroup的子类

3、重用布局文件

如果想重用某个布局文件,可以使用include标签

include layout="@layout/xx_layout" /

如果想让一个布局文件被另一个布局文件引用(使用include标签),可以使用merge作为被引用布局文件的根节点,由于merge并不会生成任何标签(在大量引用布局文件时不至于生成大量无用的标签),但是xml文件必须要有一个根节点,因此merge所起的作用就是作为xml文件的根节点,以使xml文件在编译时不至于出错,可以把merge当成FrameLayout使用;

3.图像资源

在图像资源中可以存储图像文件,还可以使用xml格式的图像资源来控件图像的状态和行为;

1.普通图像资源

Drawable da = getResources().getDrawable(R.drawable.xxx);

2.xml图像资源

xml图像资源其实就是在drawable目录中指定的xml文件,此种方式可以额外指定图像的某些属性,如图像拉动、排列方式;

bitmap xmlns:android=""

android:src="@drawable/ic_launcher"

android:tileMode="repeat"

/bitmap

3.Nine-Patch图像资源

Nine-Patch图像资源文件必须以9.png作为文件扩展名,如abc.9.png

该图像资源的主要作用是:防止图像的某一部分被拉伸;确定将图像作为背景图的控件中内容显示的位置;

Android SDK本身提供了一个Draw 9-patch的工具,启动sdk目录\tools\draw9patch.bat命令启动该工具;

可以通过此工具在png图的四周绘制1个像素粗的直线,上边缘和左边缘的直线分别表示图像在水平和垂直方向可位值的范围。如果水平或垂直方向的某个区域不需要拉伸,则可不绘制相应的直线;右边缘和下边缘的直线分别表示图像所在控件中内容的显示范围,内容只在右边缘和下边缘绘制直线的区域显示,表示内容显示范围和拉伸范围的两给直线有一个重要区别就是表示内容显示范围的直线中间不能断开,而表示拉伸范围的直线中间可以断开;

Nine-Patch图像资源与普通图像资源引用方法相同,在引用时只写文件名,活力.9.png;

4.XML Nine-Patch图像资源

Nine-Patch图像资源也有与其对应的xml图像资源,使用nine-patch标签来引用Nine-Patch格式的图像,有一个设置抖动的android:dither属性;

5.图层资源

图层资源类似于FrameLayout不同的是FrameLayout标签中可以包含任意的控件,而图层资源每一层都只有是图像,定义图层资源必须使用layer-list作为资源文件的根节点,layer-list标签中包含多个item标签,每一个标签表示一个图像,最后一个item标签显示在最顶层;

默认情况下,图像会尽量充满显示图像的范围,图像可能会有拉伸,为了避免图像拉伸,可以在item标签中使用bitmap标签引用图像;

复制代码

layer-list xmlns:android=""

item

android:bottom="10dip" 底端偏移的像素

android:left="10dip" 左侧偏移的像素

android:right="10dip" ...

android:top="10dip" ...

bitmap

android:gravity="center"

android:src="@drawable/hell" /

/item

/layer-list

复制代码

某些情况下,可以使用图层来代替FrameLayout

6.图像状态资源,处理控件不同状态下的显示状态

复制代码

selector xmlns:android=""

item android:drawable="@drawable/bm" android:state_focused="true"/item

item android:drawable="@drawable/bm" android:state_pressed="true"/item

item android:drawable="@drawable/bm"/item

/selector

// android:state_focused/pressed设置为true表示当前item的drawable属性为获取焦点和按下时的drawable样式

复制代码

7.图像级别(Level)资源

图像资源状态只能指定几种有限的状态,可以通过图像级别指定更多的状态;图像级别是一个整数的区间,可以通过ImageView.setImageLevel或Drawable.setLevel方法切换不同状态的图像;图像级别资源是xml文件,必须以level-list为根节点,每一个item表示一个级别区间,下面是一个xml文件;通过ImageView.setImageLevel(level),根据level所在的区间设定显示的图像资源,如果level不在任一区间内则清空ImageView当前图像;

level-list xmlns:android=""

item android:maxLevel="2" android:minLevel="0" android:drawable="@drawable/hell" /

item android:maxLevel="4" android:minLevel="3" android:drawable="@drawable/hell" /

/level-list

8.淡入淡出(Cross-fade)资源

也是切换两个图像(不支持多于两个图像的切换),并且使这两个图像以淡入淡出效果进行切换,如电灯在开关时逐渐变亮或逐渐变暗;

transition xmlns:android=""

item android:drawable="@drawable/hell"/

item android:drawable="@drawable/hell"/

/transition

TransitionDrawable da = ...;

// 从第一张图片切换到第二张图片,时间效果为1秒

da.startTransition(1000);

// 从第二张图片切换到第一张图片,时间效果为1秒

da.reverseTransition(1000);

9.嵌入(insert)图像资源

使用场景:要显示的图像要求要小于装载图像的View(图小于View区域),也是通过xml资源定义,只有一个节点inset。

inset xmlns:android=""

android:drawable="@drawable/hell"

android:insetLeft="10dip" !--图像距离左边的距离,延伸--上/下/右的距离--

/inset

10.剪切(Clip)图像资源,使用剪切图像资源可以只显示图像的一部分,如可以通过此来制作进度条;

clip xmlns:android=""

android:clipOrientation="horizontal" // 指定截取的方向

android:drawable="@drawable/hell" // 指定要截取的图像

android:gravity="left" // 指定截取的方式,在此为从左侧开始截取

/clip

ClipDrawable cd = ...;

cd.setLevel(1000);

上面ClipDrawable.setLevel(level)设置截取的图像宽度,ClipDrawable预设了最大值10000(表示不进行截取),最小值为0(表示不显示);

11. 比例(Scale)图像资源

scale xmlns:android=""

android:drawable="@drawable/hell"

android:scaleGravity="center" // 设置图像显示的位置

android:scaleHeight="70%" // 设置图像显示的高度

android:scaleWidth="80%" // 设置图像显示的宽度

/scale

12.形状资源

复制代码

shape xmlns:android=""

android:shape="rectangle" shape可以指定就矩形,oval(椭圆),line(直线),ring(圆)

corners 定义圆角

/corners

gradient

android:angle="45"

android:startColor="#000000"

android:endColor="#FFFFFF" 定义颜色渐变,从左下角到或上角

/gradient

padding 定义控件内容到边框的距离

/padding

stroke 定义边线

/stroke

solid 定义填充

/solid

size 定义大小

/size

/shape

复制代码

13.菜单资源

菜单不仅可以在onCreateContextMenu或onCreateOptionsMenu方法中通过代码创建,还可以在res/menu目录中建立相应的菜单资源文件,并在上面两个方法中加载菜单资源;

菜单资源文件必须以menu标签作为根节点,每一个菜单项用一个item表示,如果要定义子菜单,可以在item标签中包含menu标签;如果想将多个菜单项划为一组,可以使用group包含多个item标签;

复制代码

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.main, menu);

return true;

}

复制代码

查看MenuInflater.inflate(int,Menu)

复制代码

/**

* Inflate a menu hierarchy from the specified XML resource.

*

* @param menuRes Resource ID for an XML layout resource to load (e.g., codeR.menu.main_activity/code)

* @param menu The Menu to inflate into. The items and submenus will be added to this Menu.

*/

public void inflate(int menuRes, Menu menu) {

XmlResourceParser parser = null;

try {

parser = mContext.getResources().getLayout(menuRes);

AttributeSet attrs = Xml.asAttributeSet(parser);

parseMenu(parser, attrs, menu);

} catch ...finally {

if (parser != null) parser.close();

}

}

复制代码

14.样式与主题(style/theme)

1.样式style

android中样式和css中样式作用是一样的,都是用于为界面元素定义显示风格,它是一个包含一个或者多个控件属性的集合。

定义样式需要在res/values/styles.xml中进行定义,如下是一个样式的定义:

style name="textViewStyle"

item name="android:textSize"22sp/item

item name="android:textColor"#FF0000/item

/style

style name="textViewStyle1" parent="textViewStyle"/style!-- 此样式继承自textViewStyle --

style name="textViewStyle.Livingstone"!-- 样式继承的另一种写法,但不可用此写法继承Android自带的定义样式? --

item name="android:textColor"#00FF00/item

/style

所有定义的样式都会在R文件中自动生成一个资源ID,加一个点表示样式继承会生成上图所示的资源id;

样式的引用:

TextView

style="@style/textViewStyle"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="hello" /

2.主题Theme

主题应用于整个应用或者activity,样式应用于具体的控件上。主题的应用与样式定义一样,不同的是主题还可以设置窗口的显示风格;主题的引用需要在清单文件中进行引用,如引用到整个应用之上就需要在Application节点中进行配置引用,而引用到单个Activity只需要在此Activity中进行配置引用;

复制代码

style name="Livingstonetheme"!--此定义是一个无Title的主题--

item name="android:windowNoTitle"true/item

item name="android:windowFullscreen"?android:windowNoTitle/item

!-- 问号表示引用此主题中android:windowNoTitle属性的值 --

item name="android:textSize"18sp/item

/style

复制代码

android系统定义了一些属性,如android:theme="@android:style/Theme.Dialog",该主题可以让Activity看起来像一个对话框,更多主题可以在文档reference-android-R.style中查看。当主题里面的样式属性值与样式里面的属性值发生冲突的时候会显示样式里面的值;

15.其它资源

在资源文件中还可以包括尺寸(dimen)、整数(integer)、布尔(bool) 、整形数组资源(integer-array)、资源数组(array)、颜色(color)

TypedArray ta = getResources().obtainTypedArray(int id); // 获取数组资源,包括integer-array、array

Final总结:

除了res/values目录中的资源名,其它目录的资源都会以文件名在R类的相应子类中生成变量;而res/values中的资源会以name属性值为变量名在R类的相应子类中生成变量;

Android UI设计的基本元素有哪些

移动端的App界面,不论是iOS还是Android ,一般都由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。

状态栏:主要用于显示信号、运营商、电量等手机状态的区域;

导航栏:主要显示当前界面的名称,包含相应的功能或者页面间的跳转按钮;

主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转;

内容区域:展示应用提供的相应内容;

需要注意的一点就是,由于Android在4.0之后移除了实体键而使用屏幕下方的虚拟键,所以,Android将iOS中的主菜单从下方移动到了上方,从而避免误操作虚拟键。

说到这里,就不得不说,虽然android和iOS都是移动端的操作系统,但是他们在UI设计还是存在很大的差异性。这是为什么呢? 其实这基本上都是因为iOS的闭源导致的,由于它的商业化,导致很多设计被申请了专利,Android在很多地方都必须有所不同,说的最多的就是iOS的弹性滚动,其实Android的ScrollView要实现这样的效果,只需要修改一个参数的值即可,但是由于这个效果iOS申请的专利,所以Android就无法使用了。

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中双击图像的图层,并选择Drop 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)体验,作为一种新型人机交互形式,虚拟现实技术比以前任何人机交互形式都有希望彻底实现和谐的、以“人为中心”的人机界面。

android app界面设计规范(dpi,dp,px等)

PPI(Pixels per inch):每英寸所拥有的像素数,即像素密度。

DPI(dots per inch):即每英寸上,所能印刷的网点数,一般称为像素密度。ppi计算公式:ppi = 屏幕对角线像素数/屏幕对角线英寸数,通过勾股定理计算屏幕对角线像素数。

Screen Size(屏幕尺寸):手机屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是对角线的长度。

DIP(device independent pixel):即dip/dp,设备独立像素。 1px = 1dp density(由dpi决定)

Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800,指该设备垂直方向有800个像素点,水平方向有480个像素点。

px(Pixel像素):相同像素的ui,在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真,大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次: 120 dpi、160 dpi、240 dpi、320 dpi ,具体见如下表格。

实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。

也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。鉴于以上各种原因, 标准dpi=160

谷歌官方对dp的解释如下:

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

简单来说,以160dpi的设备为准,该设备上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2个像素)。在app开发时,最好用dp来做界面的布局,以保证适配不同屏幕密度的手机。

dp和px的换算公式:

我的理解,该公式表示px的数值等于dp的数值*(设备dpi/160)

注意,px、dp是单位,但density没单位。

applyDimension的源码如下,可参考:

android的尺寸众多,建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。

app启动图标为48*48dp,对应各dpi设备,图像资源像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|48 48px|72 72px|94 96px|144px 144px|

操作栏图标为32*32dp,对应各dpi设备,图像资源像素如下:其中图形区域尺寸是24*24dp,可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|32 32px|48 48px|64 64px|96px 96px|

通知栏图标为24*24dp,对应各dpi设备,图标像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|24 24px|36 36px|48 48px|72px 72px|

某些场景需要用到小图标,大小应当是16*16dp,其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|16 16px|24 24px|32 32px|48px 48px|

Android UI规范是什么

从事UI设计行业的朋友都知道,每一张设计稿都是有规范尺寸的,并且IOS的和Android还不同,IOS UI设计规范为375*667 1x的尺寸,那么Android UI规范是什么呢,下面让我们一起来了解一下。

01

在做Android UI设计的时候,画布的尺寸我们一般都是选择360*640 1x,也就是说是选择720*1280这个尺寸。

02

我们从上到下来进行了解,最上边的是状态栏,状态栏的高度是25。

03

在状态栏中肯定就是信号、电源以及时间这些了,每个Android定制系统的摆放样式都不同,这一点不用纠结。

04

状态栏下边就是导航栏了,导航栏起到的是导航作用,高度是45px。

05

导航栏中间一般都是有文字来起到提醒作用的,导航文字的大小一般都是18px。

06

在最下方就是我们的标签栏了,标签栏的作用就是给用户提供切换界面的作用,标签栏的高度为50px。

07

在标签栏中摆放的肯定就是我们的ICON图标了,要注意,图标的切图点击区域不能够小于24px。

08

一些ICON图标的下方还会有文本,这里文本的大小一般就是10或者是11px了,因为范围有限。

特别提示

本文尺寸均为1x。


标题名称:androidui设计,安卓appui设计规范
浏览路径:http://cqcxhl.com/article/hogcih.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP