当前位置:文档之家› APP界面设计规范二

APP界面设计规范二

APP界面设计规范二
APP界面设计规范二

一、Android设计常识

开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。

Android常用单位

per inch):数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度;PPI计算公式:ppi=√(长度像素数2 + 宽度像素数2)/屏幕对角线英寸数

per inch):是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了;

屏幕尺寸(Screen Size):一般我们所说的手机屏幕尺寸,比如3英寸、英寸等,都是指对角线的长度,而不是手机的面积;

分辨率(Resolution):是指手机屏幕垂直和水平方向上的像素个数,比如分辨率为:720*1280,是指设备水平方向有720个像素点,垂直方向有1280个像素点

pixels):像素,不同设备显示效果相同

( point):一个标准的长度单位,ios的逻辑单位,1Pt=1/72英寸,用于印刷业,非常简单易用;标注字体大小(72是早期台式机的DPI)

(Scaled-independentpixels):放大像素,安卓的字体单位;

(Density-independentpixels):是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系;

sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关;

换算关系

android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。* dp:以160PPI屏幕为标准,则1dp=1px。

dp和px的换算公式:dp*ppi/160 = px。

对于320ppi的屏幕,1dp x 320ppi/160= 2px。

* sp:它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为100%时,

1sp=1px。

sp 与px 的换算公式:sp*ppi/160= px。

对于320ppi的屏幕,1sp x 320ppi/160 = 2px。

简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。dp和px的换算公式:dp*ppi/160 =px或者px=dp*ppi/160。

为什么要把sp和dp代替px原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。

根据单位换算方法,可总结出:

当运行在mdpi模式下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;

当运行在hdpi模式下时,1dp= :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;

当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;

具体换算关系如下:

ldpi模式下 1dp=

mdpi模式下(baseline) 1dp=1px

hdpi模式下 1dp=

xhdpi模式下 1dp=2px

xxhdpi模式下 1dp=3px

Xxxhdpi模式下 1dp=4px

小结:其实对于我们设计师来讲,我们做效果图的单位仍然是px,那些sp、dp、pt单位都是Android开发中所使用到的单位,但是我们必须要了解每种单位的含义以及它们之间的关系,这样才能使我们的设计更加统一和完美。

Android屏幕分辨率

Android按照DPI分为了LDP、MDPI、HDPI、XHDP和XXHDPI五类,Android 还添加了XXXHDPI这个新的DPI分类。

下面是Android界面尺寸详细总结:

目前主流的安卓手机分辨率有以下3种:

hdpi,对应480*800的手机。主流机型:小米1 ,1s 三星htc 等

xdpi,对应720*1280的手机。主流机型:三星Galaxy系列和华为p6等xxdpi,对应1080*1920的手机。主流机型:小米手机,华为荣耀手机系列为主加上htc one

下面是当面流行的安卓手机的屏幕尺寸和分辨率:

设计稿基本元素的尺寸设置

Android手机那么多,具体怎么分哪些手机是几倍的倍率呢我们设计人员需要按照哪个尺寸进行设计我们先看一张表,这是友盟2014年10月到2015年03月的数据:

从友盟的分辨率占比数据来看:720*1280的手机占比最高为%,800*480的手机占比为%位居第二,而540*960 的手机占比最少为% ,xxdhpi模式的高分辨率1080 * 1920手机占比也越来越高,目前为% 。所以我没可以得出结论:目前Android主流手机屏幕分辨率为:xdhpi模式的高分辨率720*1280。

在目前我们的安卓APP设计项目当中,我们并不会去为每一种分辨率去设计一套UI界面。为每一种分辨率单独设计一套UI界面,这是一种追求完美和理想的状态。所以,这个时候我们需要学会变通,为了适应多分辨率,我们一般选择一个较合适的分辨率最为基准,以下3种方法分别是我经常用到的方式,仅供大家参考:

方法1

以中间尺寸(xdpi:720*1280px)作为基准,然后放大或缩小,以适应到其他尺寸;

不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。

方法2

以较大尺寸(xxdpi:1080*1920px)作为基准,然后缩小,并适应到所需的最小屏幕尺寸;

缺点是,图标等若都是最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。

方法3

有些时候我们也会在实际开发过程中,Android和ios的设计稿若无太大差异,也可从ios的分辨率(750*1334px)开始,再调整设计稿的比例,适应其他分辨率;

不足之处:在切图的时候需要做一些图片的调整,如果不是矢量图的原件,需要重新按照720*1280的尺寸设计下。

结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位,推荐设计稿的画布尺寸选用720X1280px,分辨率为72ppi(像素/英寸)。

一、Android设计规范

界面基本组成元素

Android的APP界面和iphone的界面基本相同:状态栏+导航栏+主菜单栏+内容区域

具体大小请参照中Android界面尺寸

字体设计规范

安卓之后用的字体是Roboto。中文字体:方正兰亭黑体,是谷歌自己的字体,与微软雅黑很像。

界面图标规范

界面中图形的实现由两种,一种是用图片,另一种是代码画出来。代码画的方式比较耗费程序员脑力和代码量,图片则耗费空间,增加APP 的体积。一般是偏重使用图片,但是一些简单形状的按钮可以直接让程序员画出来即可。

切图要点

1.有一些小的icon式按钮,不能只切到icon边缘,而是要考虑到最终实现的时候,是把这个图片做成按钮,和用户交互。所以必须要多留一些透明的边,让能点击的图片在88×88以上,这样用户才保证比较好点到。

2.对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明,这是为了放大拉伸而不产生可见区域的图像失真。

3.切图的高度。对于一个通用的背景图,如文字圆角边框背景,那么切图的时候并不是效果图上有多高就切多高,为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的,准确的说应该切的高度为

H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。

4.切图的宽度。如果是一个通用的背景图,那么他的宽度应该是他在效果图中的最小宽度,也就是说这个背景可能在多处使用到了,就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候,这就需要看看你做的效果图的宽屏宽度,所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是可以拉伸、压缩吗,为什么需要参考最小的宽度呢根据个人经验发现,一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。

5.以每个模块分开创建文件夹存放切图资源;这样更有助于程序员在每个模块的时候找到相应的图片;

6.所有切图尺寸必须是偶数,一般是png-24格式;

底部工具栏icon切图(有两种方法)

方法1:icon单独切,有默认和选中两种状态

方法2:icon + 文字一起切,有默认和选中两种状态

切图命名规范:

下面是常用的一些命名缩写:

导航栏:nav 主菜单栏:tab 背景:bg 按钮:btn

按钮常态:nor 按钮选中:sel 按钮按下:down 图标:icon 搜索:search 个人资料:proflie 用户:user 弹出:pop

返回:back 刷新:refresh 删除:delete 编辑:edit

例如:nav_bg、tab_btn_sel

点九切图:

首先我们要知道什么是点9图:点九图是andriod平台的应用软件开发里的一种特殊的图片形式,是一种可拉抻而不失真的图,文件扩展名为:.。其实相当于把一张png图分成了9个部分(九宫格),分别为4个角(图中:1、3、6、8),4条边(图中:2、4、5、7),以及一个中间区域(图中:9)。

比如我们的微信、QQ的聊天气泡就是典型的点9图,因为聊天气泡需要随文字的多少进行拉抻。一般图在整体放大时会出现失真的情况,而点9图是把图中某些部分进行拉抻,而不重复的地方,比如圆角和光泽等部分都不做变化,以此来实现图片的放大,不会出现失真的情况。

接着我们来说一下点9图的绘制方法:当然点9图的绘制方法也有很多种,直接用点9切图的软件,譬如:draw9patch、cutterman等,安卓开发中的SDK里有tools文件夹,里面有一个,或者直接用ps绘制点9切图;我个人还是习惯用ps 直接绘制点9图,因为软件有时候自己把握不好尺寸导致点9图在程序中识别出现问题。

Ps绘制点9图的步骤:

※确定切图后直接改变图片的画布大小;

※手动将上下左右各增加1px留白;

※使用铅笔工具,手动绘制拉伸区域,色值必须为黑色(#000000),透明度100%;左上为拉伸区域,右下为内容显示区域

※存储为web所用格式,选择png-24,储存时手动将后缀名改为;

48dp规律

48dp规律:通常把48dp作为可触摸的UI元件的标准。为什么要用48dp呢一般来说,48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围,这是一个用户手指能准确并且舒适触摸的区域。

如果你设计的元素高和宽至少48dp,你就可以保证:

(1)触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示。(2)在整体信息密度和触摸目标大小之间取得了一个很好的平衡。而每个UI 元素之间的空白通常是8dp。

标注规范

通常APP设计都会涉及到多个分辨率兼容开发的问题,因此设计的时候,要定好规范。最好建立相关文档,记录使用的字体、颜色,常用的字号和间距,给出编号A1 A2 A3 B1 B2 B3,不同分辨率下换算的结果,便于技术人员进行开发。

如需对设计稿进行后期的标注,则可使用该套规范,对设计稿中的字号、颜色、间距进行标注。

Ps:如果想做一个好的UI设计师,一定要从规范入手。很多都是细节的东西,在于积累。

APP界面UI设计规范

一、APP界面设计规范 (一)界面尺寸 1、IOS界面尺寸:常见为(宽度640px、高度1136px) 2、Android界面尺寸:常见为(宽度720px、高度1280px) 其他尺寸:ldpi(240*320)、mdpi(320*480)、hdpi(480*800)3、Web Mobile尺寸:常见为(宽度640px、高度960px) (二)导航尺寸 1、IOS导航尺寸:高度60px,留白7px 2、Android导航尺寸:高度64px或48px,留白8px (三)标签尺寸 1、IOS标签尺寸:高度98px 2、Android标签尺寸:高度96px (四)工具栏尺寸 1、IOS工具栏尺寸:高度88px 2、Android工具栏尺寸:高度96px (五)列表高度 1、IOS列表高度:高度88px 2、Android列表高度:高度96px (六)资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态,通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 (七)字体

1、IOS默认英文为HelveticalNeue,中文为黑体 2、Android列表高度:默认为 Droidsans fallback (八)字号 字号通常按照标题及征文级别递减为42、36、34、30、24(九)ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48(十)资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px,宽度要适中有留白 3、图文混排中图片一般不高过150*110

软件界面设计规范_V1.0 - 视觉部分

软件界面设计规范_V1.0 1概要 界面设计中一定要保持界面的一致性。 一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 界面力求简洁明了,保证系统功能设计的合理与明确,布局明确、交互操作合理、协调统一。功能要表现清楚,分类清晰有条理,避免过多的控件嵌套导致的视觉混乱;单一功能的操作目的明确,符合易用性原则,避免不必要的信息显示而对用户造成视觉干扰;力求操作简单,简单的功能一步完成,比较复杂的功能三步之内,复杂的功能操作使用操作向导来辅助客户完成。 2色调风格 2.1色调: 软件界面设计中常用的主色调包括:蓝色、红色、绿色、黑色 蓝色:运用的行业较为广泛,如通讯、电子、房产、钢铁、生产管理等行业大部分以蓝色为主色调来设计软件。 红色:在政府单位运用比较多。 绿色:一般运用于教育、医疗、农林等行业。 黑色:能源、石油、房地产行业有时候会用中性的黑色作为主色调。 表现区:通常用浅色,如:白色、淡灰、或者淡蓝之类,因为大面积的文字信息在浅色上便于长时间阅读,不容易形成视觉疲劳。

2.2风格: 软件界面的风格通常比较简约。不同行业,使用的环境不同稍有差异。 3登录界面 基本元素:logo、系统名称、输入框、提交按钮。如下: 4页面逻辑结构 软件界面通常是上面这样的逻辑结构 首页:宏观预览各项设备管理数据,快速访问期望的数据功能 功能页面:查看某一功能模块的全部数据,查看某一对象的各类相关数据 弹出页面:填写和提交表单,对功能中的某一单项数据进行增加/删除/查询/修改/审核/打印/导出等功能操作。

ios和Android APP设计规范要点

相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大尺寸来设计?分辨率是多少?该怎么切图给开发等等 下面的文字就给出一点点技巧总结,但也要给合团队在开发时的习惯。每个工程师们所使用的控件,书写布局习惯来实际移交的图是不一样的,但八九不离十,都是遵循一个原则,便捷开发、自适应强的开发模式 IOS篇 一、尺寸及分辨率 iPhone界面尺寸:320*480、640*960、640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080) 设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。 如果是我来做的话,我会使用640×1136,对plus做单独的修改适配,因为plus的屏幕实在是大了,遵循屏大显示更多内容的原则这里本应该是需要修的了。有更好办法的话希望大家可以分享一下。 Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素

iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。 这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。 状态栏(status bar):就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px 导航栏(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px 主菜单栏(submenu,tab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px 内容区域(content):展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px 至于我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。

软件界面设计规范方案

软件界面设计规 1.界面规 1.1.总体原则以用户为中心。 设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。 1.2.原则详述 1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设置。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设置。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。 1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

app颜色规范

竭诚为您提供优质文档/双击可除 app颜色规范 篇一:app设计的用色规范 我们先来回顾下。什么是手机app界面设计规范? app设计规范指对app界面进行风格统一 ,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:app设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下app设计的色彩规范实例。 这是一个非常详细的手机app色彩使用规范实例。值得大家好好的看看。《找车app》 标准色规范: x轴:重要、一般、弱。 y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子

重要颜色之一红色需要小面积使用,用于特别需要强调和突 出的文字、按钮和icon;而黑色用于重要级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机app的色彩规范。这是一种表示方式。有这个规范,我们设计app和重构app 会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标 准色的表现形式。 app界面要给人简洁整齐,条理清晰感,依靠的就是界 面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰 当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少 考虑此方面,做到与操作系统统一,读取系统标准色表

app设计规则 (6页)

本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == app设计规则 篇一:APP设计的用色规范 我们先来回顾下。什么是手机APP界面设计规范? APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设 定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定 设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:APP设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下APP设计的色彩规范实例。 这是一个非常详细的手机APP色彩使用规范实例。值得大家好好的看看。《找 车APP》 标准色规范: X轴:重要、一般、弱。 Y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要 小面积使用,用于特别需要强调和突出的文字、按钮和icon;而黑色用于重要 级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、 引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机APP的色彩规范。这是一种表示方式。 有这个规范,我们设计APP和重构APP会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标准色的表现形式。

APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表 3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,着重号,以及图标等 4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试 5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文 字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足 够反 篇二:APP 界面 UI设计规则则 什么是UI?UI就是界面设计。专业的讲指对软件的人机交互、操作逻辑、 界面美观的整体设计。一个APP想要吸引并留住客户,美观实用简便的用户界 面设计是其重要的一环。在开发APP之初,就应重视选择经验丰富的开发团队,并 掌握UI设计的原则。 1依据手机的物理特性设计界面的原则 1)应尽量减少文字的输入。由于手机在输入上的低效性,澳环认为,在设计的过程中,应尽量减少用户的输入,如果有可能可以设置默认值,或者让用户选 择目标值。 2)信息结构好,屏与屏之间的逻辑关系清晰。由于手机屏幕相对较小,只能展示较少的信息量,这时候,在APP网站建设中,就需要有清晰的信息架构,让 用户能一目了然的知道APP的各个模块及能够自由切换。 3)移动APP的重要功能可以在界面中适当的提示,采取对重要高频使用的功能或信息放在首页或什么显眼的位置。2依据手机的移动特性设计界面的原则

APP界面设计规范二

一、Android设计常识 开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。 Android常用单位 per inch):数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度;PPI计算公式:ppi=√(长度像素数2 + 宽度像素数2)/屏幕对角线英寸数 per inch):是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了; 屏幕尺寸(Screen Size):一般我们所说的手机屏幕尺寸,比如3英寸、英寸等,都是指对角线的长度,而不是手机的面积; 分辨率(Resolution):是指手机屏幕垂直和水平方向上的像素个数,比如分辨率为:720*1280,是指设备水平方向有720个像素点,垂直方向有1280个像素点 pixels):像素,不同设备显示效果相同 ( point):一个标准的长度单位,ios的逻辑单位,1Pt=1/72英寸,用于印刷业,非常简单易用;标注字体大小(72是早期台式机的DPI) (Scaled-independentpixels):放大像素,安卓的字体单位; (Density-independentpixels):是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系; sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关; 换算关系 android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。* dp:以160PPI屏幕为标准,则1dp=1px。 dp和px的换算公式:dp*ppi/160 = px。 对于320ppi的屏幕,1dp x 320ppi/160= 2px。 * sp:它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为100%时, 1sp=1px。 sp 与px 的换算公式:sp*ppi/160= px。

APP应用开发的设计规范与标准

APP应用开发的设计规范与标准 APP设计规范: APP界面设计规范指导APP设计过程中的设计标准。根据统一的设计标准,使得整个APP在视觉上统一。提高用户对APP的产品认知和操作便捷性。 APP设计规范的重要性: 统一的标准,一、便于在设计过程中的团队合作,二、提高用户对APP的产品认知和操作便捷性。 APP设计规范具体内容: 1.遵循统一的准则,确定标准并遵循; 2.颜色使用恰当,遵循对比原则:色彩标准、色彩对比,突出内容、显示测试; 3.光标、图标和指示图片、地图等:统一的构图布局,色调、对比度、色阶和风格; 4.Font:中文采用宋体,英文采用Microsoft Sans Serif。大小:MSS字体8磅,宋体小五号字(9磅)五号字体(10磅); 5.文字表达:在提示信息、帮助文档中的。用词、修饰及标点符号等等; 6.控件风格、布局; 7.布局的顺序:从左到右,从上到下;

8.快捷键、弹出菜单; 9.用户交互:按钮状态、弹出窗口位置、执行动作提示信息(视觉和听觉,甚至的触觉的); 10.联机帮助:HELP文档。 产品设计、用户体验、交互设计、视觉设计、开发、运营 —————————————————【←总结】·【参考→】————————————————————— 【开发苹果APP界面标准规范】 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训、支持成本,支持人员不会行费力逐个指导。3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加做法: 项目组有经验人士,确立UI规范:

移动应用界面设计的尺寸设置及规范

【总结】移动应用界面设计的尺寸设置及规范 时间2014-05-04 15:15:07 青溪·札记 原文appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi 模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意,ppi、dpi 是密度单位,不是度量单位: * ppi (pixels per inch):图像分辨率(在图像中,每英寸所包含的像素数目) * dpi (dots per inch):打印分辨率(每英寸所能打印的点数,即打印精度) dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。 ppi的运算方式是:PPI = √(长度像素数2 + 宽度像素数2) / 屏幕对角线英寸数。即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。 以iphone5为例,其ppi=√(1136px2 + 640px2)/4 in=326ppi(视网膜Retina屏) 对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (xhdpi模式),480 x 800 的手机很可能接近 240 dpi (hdpi模式),而320 x 480 的手机则很接近 160 dpi(mdpi模式)。

软件界面设计规范

软件界面设计规范 1.界面规范 .总体原则以用户为中心。 设计由用户控制的界面,而不是界面控制用户。清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。较快的响应速度。简单且美观。 .原则详述 1.2.1.用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。操作上假设是用户--而不是计算机或软件--开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。提供用户自定义设置。因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性--例如颜色、字体或其他选项的用户设置。采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的设计时--例如,用于在一个绘图程序中选定一个特定感觉--请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。在后台运行长进程时,保持前台式交互。例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。谅解。用户喜欢探索一个界面,并经常从尝试和错误中学习。一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。如果可行,还应提供可逆转或可还原的操作。即使在设计得很好得界面中,用户也可能犯错误。这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的用户错误,并且使用户易于还原。 1.2.2.清楚一致的设计一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。这是因为他们不必花时间来尝

APP UI设计规范(可公开版)1.3

APP UI设计规范(可公开版) 前言 APP UI设计,有何规律?从抽象到具体,前后台并行,大概要经过几个阶段,每个阶段,都有一些明确的阶段输出doc,具体: (上图是在著名的《用户体验要素》原图上进行改编) KPA#1:第一痛点创意

首先,要确定你的“第一痛点”(first-item)还没有人做过,最好的调查方式是到APP Store上搜索已有的APP程序。如果你发现已经有某个APP包含类似的痛点,那你需要比它做的“更好”,“更好”可以体现在体验(exp)创新上,也可以体现在功能(func)革命上。 中国的法律环境缺乏对APP痛点相关智识产权的严格保护,但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。为什么呢?任何APP都不是孤立存在的,受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响,简单clone成功可能性很小。 另一方面,第一痛点创意风险很大,所谓失之毫厘,谬以千里,推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘,最好能输出类似下面的脚本化体验故事/片段: 1.1)体验片段#1。比如定机票应用中,有头等舱和经济舱。经济舱是一个普通的人, 而头等舱是一个戴着帽子,系着领结,胸前别着手帕的这么一个人,很酷的老板角色,体现出了头等舱和经济舱之间的区别。要做头等舱的人,一般都愿意自己看到自己这么一个形象。 1.2)体验片段#2。比如微信4.0,刚打开的时候有一张图片,非常文艺非常在都市的 感觉的一张图片,配文字“如你所见,微信,是一个生活方式”。其实它在干嘛呢?它是在提示用户,新增了自己相册功能。它虽然是给用户介绍新功能,但是它把整个情绪融在里面。 1.3)体验片段#3:比如安心停车,该APP具备查找附近有剩余车位的停车场位置,以 及根据收费情况进行优先显示的基本功能,而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点,“违章停车罚款概率”来自违章停车处罚数据库中的地点数据,必须得到交警部门的支持。 KPA#2:‘交互界面’exp/func思维导图 ‘交互界面’(简称exp/func)是比草图还简单的交互界面,往往用一句话描述,包含必要的交互信息,比如点、选、录入等输入和文字、图片、动画、特效等输出。从“第一痛点创意”相关的1~3个exp/func出发,利用“思维导图”(简称mind-map)的发散思维模式,延伸、细化、穷举、关联一切‘交互界面’,就有可能将“第一痛点创意”真正落地,成为货真价实的“第一痛点”。 ‘思维导图’一般的呈现方式是“发散图形”,一般如下:

app尺寸规范

竭诚为您提供优质文档/双击可除 app尺寸规范 篇一:app界面设计的规则 移动端界面设计之尺寸篇 ios 1.尺寸及分辨率 iphone界面尺寸:320x480、640x960、640x1136、ipad 界面尺寸:1024x768、2048x1536(单位都是像素,分辨率和网页一样,基本只要72ppi) 一般用640x960或者640x1136尺寸设计。 ps:作图最好用形状工具来画的,这样方便后期切图或者尺寸变化。 2.界面基本元素组成 iphone的app界面一般由四个元素组成,分别是:状态栏,导航栏,主菜单栏(页脚)以及中间区域。、这里用的是640x960的尺寸设计: 状态栏:即使信号、运营商、电量等显示手机状态的区域,其高度为:40px 导航栏:显示当前界面的名称,包含相应功能或者页面

间的跳转按钮,其高度为:88px主菜单栏(页脚):类似页面的主菜单,提供整个页面的分类内容快速跳转,其高度为:98px 内容区域:展示应用提供的相应内容,整个应用中布局更最为频繁的,其高度为:734px(960-40-88-98=734)android 3.尺寸及分辨率 android界面尺寸:480x800、720x1280、1080x1920(单位都是像素,分辨率和网页一样,基本只要72ppi)一般用720x1280尺寸设计,这个尺寸在720x1280中显示完美,在1080x1920中看起来清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。 4.界面基本元素组成 android的app界面也是由四个元素组成,分别是:状态栏,导航栏,主菜单栏(页脚)以及中间区域。、这里用的是720x1080的尺寸设计: 篇二:app设计——字号规范 app设计——字号规范 主体: 导航主标题:34/36px 苹果标题:34px(ps:有些用36px) 正文:32px-34px

ios,app图标尺寸规范

竭诚为您提供优质文档/双击可除ios,app图标尺寸规范 篇一:ios界面设计尺寸规范 ios界面设计尺寸规范 一、尺寸及分辨率 iphone界面尺寸:320*480、640*960、640*1136、750*1334、1080*1920等。 ipad界面尺寸:1024*768、2048*1536等。 单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。ps :作图的时候确保都是用形状工具(快捷键:u)画的,这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素 iphone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。 640*960的尺寸设计下这些元素的尺寸。 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px

导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px [下图说明:] 至于我们经常说的iphone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。 ps:在最新的ios7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计ios7风格的界面的时候多多注意下~ 三、字体大小 heitisc(黑体-简,黑体-简的英文名称为heiti sc。heiti为黑体的拼音,sc代表简体中文(simplifiedchinese)),是macosxsnowleopard(版本10.6)包含的简体中文字型,也是iphoneos 3.0(版本 4.0后改名为ios)及ipodnano第五代以来的预设简体中文字型。 黑体-简系为黑体,取代华文黑体成为macosxsnow leopard的预设简体中文字型。在过去,华文黑体是

APP界面UI设计规范

UI设计规范 一、APP界面设计规范 (一)界面尺寸 1、IOS界面尺寸:常见为(宽度640px、高度1136px) 2、Android界面尺寸:常见为(宽度720px、高度1280px) 其他尺寸:ldpi(240*320)、mdpi(320*480)、hdpi(480*800)3、Web Mobile尺寸:常见为(宽度640px、高度960px) (二)导航尺寸 1、IOS导航尺寸:高度60px,留白7px 2、Android导航尺寸:高度64px或48px,留白8px (三)标签尺寸 1、IOS标签尺寸:高度98px 2、Android标签尺寸:高度96px (四)工具栏尺寸 1、IOS工具栏尺寸:高度88px 2、Android工具栏尺寸:高度96px (五)列表高度 1、IOS列表高度:高度88px 2、Android列表高度:高度96px (六)资源状态 对于资源通常设计弹起、点击、点击后、不可用四种状态,通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

(七)字体 1、IOS默认英文为HelveticalNeue,中文为黑体 2、Android列表高度:默认为 Droidsans fallback (八)字号 字号通常按照标题及征文级别递减为42、36、34、30、24(九)ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48(十)资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px,宽度要适中有留白 3、图文混排中图片一般不高过150*110

app用户界面设计大作业演示版.doc

教学站:杭州前进学号:201812925310039 姓名:詹浩裕 医护app用户界面设计说明书 修订历史记录

目录 1 引言................................................... - 2 - 1.1编写目的............................................ - 2 - 1.2项目背景............................................ - 2 - 1.3主要功能 (2) 2 应当遵循的界面设计规范 ................................. - 2 - 2.1用户界面设计原则.................................... - 2 - 2.2界面一致性 (4) 2.3布局合理化原则.......................... 错误!未定义书签。 3 引导页..................................... 错误!未定义书签。 4 主界面................................................. - 5 - 4.1主界面.............................................. - 6 - 4.2登录页面................................ 错误!未定义书签。 4.3各子界面 (7) 5 美学设计 (10) 6 界面资源设计 (10) 6.1图标资源 (10) 7 投诉与建议 (11)

用户界面设计的基本原则

1 用户界面设计的基本原则 1.1 用户界面设计原则 基于本平台开发的应用软件应坚持图形用户界面(GUI)设计原则: 1、界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。 2、始终强调软件用户是所有处理的核心:用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把操作流程强加给用户。 1.2 一般交互原则 AE系统的应用软件的一般交互遵循以下原则: 1、一致性:菜单选择、数据显示以及其它功能都应使用一致的格式。 2、提供有意义的反馈。 3、执行有较大破坏性的动作前要求确认。 4、在数据录入上允许取消大多数操作。 5、减少在动作间必须记忆的信息数量。 6、允许用户非恶意错误,系统应保护自己不受致命操作的破坏。 7、按功能对动作分类,并按此排列屏幕布局,设计者应提高命令和动作组织的内聚性。 8、提供语境相关的帮助机制。 1.3 信息显示原则 AE系统的应用软件信息显示遵循以下原则: 1、只显示与当前用户语境环境有关的信息。 2、不要用数据将用户包围,使用便于用户迅速吸取信息的方式表现信息。 3、使用一致的标记、标准缩写和可预测的颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源。

4、产生有意义的出错信息。 5、使用缩进和文本来辅助理解。 6、使用窗口分隔/控件分隔不同类型的信息。 7、高效地使用显示器的显示空间。 1.4 数据输入原则 AE系统的应用软件数据输入遵循以下原则: 1、尽量减少用户输入动作的数量; 2、维护信息显示和数据输入的一致性; 3、交互应该是灵活的,对键盘和鼠标输入的灵活性提供支持; 4、在当前动作的语境中使用不合适的命令不起作用; 5、让用户控制交互流,用户可以跳过不必要的动作、改变所需动作的顺序(如果允许的话)以及在不退出系统的情况下从错误状态中恢复; 6、为所有输入的动作提供帮助; 7、消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。 2 用户界面设计规范 2.1 界面规范的总体规定 本应用系统显示界面总体上分为三帧:菜单工具栏区域、审计资料树区域和应用软件工作区,如下图1-1。

移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。 一、android篇 1、android分辨率 屏幕尺寸 指实际的物理尺寸,为屏幕对角线的测量。 为了简单起见,Android把实际屏幕尺寸分为四个广义的大小:小,正常,大,特大。 像素(PX) 代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。 屏幕密度 为解决Android设备碎片化,引入一个概念DP,也就是密度。指在一定尺寸的物理屏幕上显示像素的数量,通常指分辨率。为了简单起见,Android把屏幕密度分为了四个广义的大小:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi)像素= DP * (DPI / 160 ) 例如,在一个240dpi的屏幕里,1DP等于1.5PX。 于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。 典型的设计尺寸 ? 320dp:一个普通的手机屏幕(240X320,320×480,480X800) ? 480dp:一个中间平板电脑像(480×800) ? 600dp:7寸平板电脑(600×1024) ? 720dp:10寸平板电脑(720×1280,800×1280) 注意,ppi、dpi 是密度单位,不是度量单位: * ppi (pixels per inch):图像分辨率(在图像中,每英寸所包含的像素数目) * dpi (dots per inch):打印分辨率(每英寸所能打印的点数,即打印精度)

app设计字体规范

app设计字体规范 篇一:APP设计规范文档 APP设计规范文档 注:(*本文档分辨率大小是以安卓1920x1080为准)1. ###数值 (1)*标准界边距:40PX (2)*列表左边距:40PX *列表右边距:40PX *列表上边距:40PX *列表下边距:40PX *列表左边距:40PX *列表右边距:30PX *列表上边距:30 PX *列表下边距:30PX (3)*标题字体大小: 56PX *主内容字体大小: 46PX *次级内容字体大小: 36PX

*底部导航内容字体大小: 28PX 2. ###颜色 (1)*主背景色:#F3F3F3 *登录页面背景色: #FaFaFa *主前景色: 以APP主色调为准 *次级前景色:以设计效果图为准,具体到时候填上。 (2)*标题颜色:#FFFFFF *主内容颜色: #333333 *次内容颜色: 以设计效果图为准,具体到时候填上。*高亮内容颜色:以设计效果图为准,具体到时候填上。 (3)*列表分割线的颜色:#D9D9D9 (4)*标题字体的颜色:#545454 *主内容字体的颜色:#999999 #545454 *次级内容字体的颜色:#249FFF #DF3130 #F9A531 篇二:iOS和Android的app界面设计规范

iOS和Android的app界面设计规范 字数876阅读96439评论36喜欢344 记录一下iOS和Andoird的界面设计规范,方便进行标准的产品设计,并与设计师顺畅沟通 iOS篇 界面尺寸 设备 iPhone6 plus iPhone6 iPhone5/5s/5c iPhone4/4s iPad1/2 iPad mini 分辨率 750×1334 px 640×1136 px 640×960 px 1024×768 px 1024×768 px 状态栏高度导航栏高度标签栏高度 60px 40px 40px 40px 40px 20px 20px 132px 88px 88px 88px 88px 44px 44px 147px 98px 98px 98px 98px 49px 49px 1242×2208 px iPad3/4/Air/Air2/mini2 2048×1536 px Paste_

软件UI设计要求规范

软件UI设计规

目录 UI规 (1) 1用户界面设计理念 (4) 1.1美观 (4) 1.2易理解 (6) 1.3鼓励 (6) 1.4一致 (6) 1.5交互 (8) 1.6效率 (11) 1.7熟悉 (13) 1.8灵活 (14) 1.9容错 (14) 1.10可预测 (15) 1.11简洁 (15) 1.12透明 (16) 1.13权衡 (16) 2通用设计原则 (16) 2.1字体使用原则 (16) 2.1.1中文字体 (16) 2.1.2英文字体 (17) 2.2文字对齐原则 (17) 2.3界面配色原则 (18) 2.4按钮设计原则 (19) 2.5文本校验原则 (21) 2.6兼容性和个性化原则 (24) 2.7键盘响应 (25) 2.7.1TAB键 (25) 2.7.2Enter键 (25) 2.7.3导航键(上下左右) (25) 2.7.4DEL键 (25) 2.8鼠标 (25) 3各模块设计原则 (26) 3.1启动/登录界面 (26) 3.2主界面 (27) 3.3导航 (27) 3.4窗体布局 (28) 3.5提示信息 (30) 3.6文本框 (32) 3.7弹出框/弹出窗口 (33) 3.8下拉框/单选框/复选框 (34) 3.9列表页面 (35) 3.10报表规 (38) 3.11附件 (38)

3.12各类控件的标准大小 (39)

建立UI规的目的 将阳春白雪式的用户体验细化到具体的可执行的要求,建立各行业线关于界面元素设计及界面布局的通用规则及要求,提升公用组件复用度及用户体验,从而增加浪潮软件的产品竞争力。 1用户界面设计理念 1.1美观 ●使用可视元素 图1.1.1 ●对元素进行分组 图1.1.2

APP界面UI设计规范

? UI设计规范 一、APP界面设计规范 (一)界面尺寸 1、IOS界面尺寸:常见为(宽度640px、高度1136px) 2、Android界面尺寸:常见为(宽度720px、高度1280px) 其他尺寸:ldpi(240*320)、mdpi(320*480)、hdpi(480*800)3、Web Mobile尺寸:常见为(宽度640px、高度960px) (二)导航尺寸 ^ 1、IOS导航尺寸:高度60px,留白7px 2、Android导航尺寸:高度64px或48px,留白8px (三)标签尺寸 1、IOS标签尺寸:高度98px 2、Android标签尺寸:高度96px (四)工具栏尺寸 1、IOS工具栏尺寸:高度88px 2、Android工具栏尺寸:高度96px (五): (六)列表高度 1、IOS列表高度:高度88px 2、Android列表高度:高度96px (七)资源状态

对于资源通常设计弹起、点击、点击后、不可用四种状态,通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。 (八)字体 1、IOS默认英文为HelveticalNeue,中文为黑体 2、Android列表高度:默认为 Droidsans fallback (九)《 (十)字号 字号通常按照标题及征文级别递减为42、36、34、30、24 (十一)ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48 (十二)资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px,宽度要适中有留白 3、图文混排中图片一般不高过150*110

软件开发界面规范技巧和注意事项

界面规范 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训、支持成本,支持人员不会行费力逐个指导。 3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加 做法: 项目组有经验人士,确立UI规范: ·美工提供色调配色方案,提供整体配色表 ·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范: 控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本) 控件样式在允许的范围内可以统一修改其样式、色调 参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。 根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的 ·界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。 ·建立合理化文档《UI标准》描述上述规范, ·强行界面设计者理解之,并作为开发准则, ·SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表 3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot;!,?着重号,以及图标等 4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试 5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。 6:整个界面色彩尽量少的使用类别不同的颜色 itop色表 具体标准参考美术学统计学术标准。色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。 三:(Resource)资源 一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。 1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准 2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格 3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。 4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。 5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

相关主题
文本预览
相关文档 最新文档