APP界面设计规范二

合集下载

App界面设计规范

App界面设计规范

App界面设计规范1. 概述App界面设计是提供给用户与应用程序进行交互的视觉和操作方式。

良好的界面设计可以提升用户体验,使用户更容易理解和操作应用程序。

本文将介绍一些常见的App界面设计规范,帮助开发者们在设计过程中遵循最佳实践。

2. 视觉设计规范2.1 颜色选择•使用适合应用风格的颜色搭配,并注意颜色对比度,以确保文字和图标的可读性。

•避免使用过多明亮或过于高饱和度的颜色,以免对用户产生不适感。

•在暗模式和亮模式之间切换时,需要注意颜色在两种模式下的可读性和整体协调性。

2.2 图标和图片•使用统一简洁、直观易懂的图标,以便用户快速识别其含义。

•图片质量要求高,并遵循响应式设计原则,在不同屏幕尺寸上呈现一致且清晰的效果。

•合理压缩图片文件大小,尽量减少加载时间。

2.3 字体选择•使用清晰易读、适合应用风格的字体。

•在不同屏幕尺寸上确保字体大小的合适性,以便用户能够方便地阅读。

2.4 排版和布局•界面元素的排列严谨、有序,避免过于拥挤或空旷。

•使用一致的边距和间距,使界面整洁且易于浏览。

•对齐方式要统一,以确保页面整体协调。

3. 交互设计规范3.1 导航和标签栏•提供清晰明了的导航结构,使用户能够轻松找到所需内容。

•标签栏要易于操作和切换,并在不同页面状态下显示相应的标记。

3.2 按钮设计•按钮设计要简洁易懂、易点击,并为不同按钮类型使用合适的颜色和形状。

•使用动画效果来增强按钮点击反馈,提高用户交互体验。

3.3 输入框和表单•输入框样式要清晰,并提供输入提示或默认值,方便用户填写信息。

•表单中的字段要有明确标签和格式验证信息,以减少用户输入错误。

3.4 弹窗和提示信息•弹窗要简洁明了,提供清晰的按钮操作和关闭方式。

•提示信息要及时准确地反馈给用户,并使用易于理解的语言。

4. 响应式设计规范4.1 屏幕适配•针对不同屏幕尺寸和分辨率进行界面布局的自适应调整,以保证在不同设备上正常展示。

•需要做好各种屏幕比例下的测试,确保界面元素大小和位置合适。

手机APP的用户界面设计原则与规范

手机APP的用户界面设计原则与规范

手机APP的用户界面设计原则与规范手机APP已经成为我们日常生活中不可或缺的一部分。

一个好的用户界面设计可以提升用户体验,增加用户粘性,使用户更愿意使用和推荐这个APP。

本文将介绍手机APP的用户界面设计原则与规范,帮助开发者们设计出更好的用户界面。

一、简洁明了手机屏幕相对较小,用户界面设计必须简洁明了,避免过多的文字和复杂的图标。

保持页面干净整洁,突出核心功能,减少用户的操作步骤。

界面元素的布局要紧凑合理,避免拥挤和混乱。

二、一致性用户界面设计应该保持一致性,使用户在不同页面之间能够直观地找到相同的功能和操作方式。

统一的颜色、字体、按钮样式等可以帮助用户养成使用习惯,并提高用户的操作效率。

同时,符合平台的设计规范也是提高一致性的重要手段。

三、易用性用户界面设计应该注重易用性,使用户能够轻松地完成任务并且愉快地使用APP。

采用直观的图标和标签,提供明确的反馈,避免模糊的操作提示和歧义的词语。

合理设置大小适中的点击目标,避免用户操作的困难。

四、可访问性用户界面设计应该考虑到不同用户的需求和特殊情况,提供良好的可访问性。

比如,支持字体大小调整,提供语音识别或图像识别的辅助功能,以帮助视力或听力有障碍的用户正常使用APP。

同时,要保持对色盲、弱视等视觉问题的关注,避免过于依赖颜色作为界面信息的区分。

五、视觉吸引力用户界面设计不仅要实用,还要具备一定的视觉吸引力。

选择合适的颜色、图片和图标来营造良好的用户体验,避免单调和枯燥的界面。

注意使用相应的配色和设计风格,使整个APP的界面风格统一,给用户一种整体的美感。

六、反馈机制用户界面设计要及时提供反馈机制,让用户了解他们的操作是否成功,并且给予必要的提示和指导。

比如,在用户点击按钮后添加合适的动画或弹窗,显示加载进度或错误信息,避免用户的困惑和焦虑。

同时,及时的推送通知也是提高用户参与度的重要手段。

七、易学性用户界面设计应该易于学习,即使是新用户也能够快速上手。

网站及APP界面设计规范(精选)

网站及APP界面设计规范(精选)

网站及APP界面设计规范(精选)一、概述在当今数字化时代,互联网已经成为人们获取信息、进行交流和娱乐的重要平台。

而网站和APP作为互联网的主要入口,其界面设计对于用户体验起着至关重要的作用。

良好的界面设计不仅能提升用户的使用体验,还能增加网站和APP的吸引力,促使用户产生持续的使用欲望。

本文旨在探讨网站及APP界面设计的规范,为设计师和开发者提供一些实用的指导原则和技巧。

二、布局设计1. 明确的导航条导航条是用户在网站和APP中进行导航和浏览的重要工具,因此应该保持明确、简洁和易于使用。

导航条的位置应该放置在用户视线范围内,通常位于页面的顶部或左侧。

导航条上的链接命名应该准确描述对应的页面或功能,避免使用过于晦涩的词语。

2. 统一的页面风格为了让用户在使用网站和APP时感受到一致的风格和氛围,设计师应该保持页面的统一性。

统一的页面风格包括颜色、字体、图标等方面的设计。

使用一种主题颜色来塑造品牌形象,并确保页面内容与之协调一致。

选择一种易读的字体,并在整个平台上保持一致。

图标的风格应简洁明了,便于用户理解。

3. 响应式设计随着移动设备的普及,响应式设计已经成为网站和APP设计的标准要求。

响应式设计能够使网站和APP能够自动适应不同设备的屏幕大小和分辨率,保证用户在不同终端上都能够获得良好的使用体验。

三、交互设计1. 简洁明了的操作流程用户访问网站和APP主要是为了获取信息或完成特定的任务,因此操作流程的简洁明了对于用户体验非常重要。

保持页面内容的简洁性,避免复杂的设计元素和干扰用户的功能。

同时,通过明确的提示和指引,引导用户进行下一步操作,减少用户的操作迷茫感。

2. 易于理解的反馈机制用户在使用网站和APP时,需要清楚了解自己操作的结果。

设计师应该给予明确的反馈,告知用户他们的操作是否成功,并及时提醒用户状态的变化。

比如,通过颜色变化、提示信息或动画效果等方式,让用户直观地感知到他们的操作。

3. 合理的交互元素排列交互元素的排列应该符合用户的使用习惯和心理预期,减少用户操作的负担。

手机APP设计规范整理:图标和按钮视觉设计规范

手机APP设计规范整理:图标和按钮视觉设计规范

⼿机APP设计规范整理:图标和按钮视觉设计规范⼿机APP设计规范指对整套APP界⾯进⾏视觉设计UI风格的统⼀,对界⾯元素的样式、颜⾊、图标按钮和⼤⼩设定统⼀的规范和使⽤原则。

⽅便以后协调合作和APP视觉迭代。

第⼀部分:APP界⾯⾥⾯的图标(iCON)设计规范我们在绘制APP UI界⾯设计⾥⾯的图标,在PS⾥⾯尽可能⽤形状来绘制。

保证图标和按钮是⽮量图。

切图的时候的格式都是PNG。

⽽且是图标和按钮的尺⼨⼤⼩必须为偶数。

App ⾥的图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。

⽽且每⼀个图标除了英⽂的命名以为,还需要⼀个中⽂名字的备注下图标所代表的含义。

让开发和其他同事看得懂。

这也是我们做APP视觉规范的最终⽬的。

每⼀个⼿机APP设计师的整理⾃⼰的APP图标视觉规范是不⼀样的。

25学堂就跟⼤家推荐2种图标视觉设计规范分类⽅法。

1、按照界⾯位置和模块来分类。

如下图:2、按照功能模块来分类:分为功能型图标和⽰意型图标。

如下图当然你也可以有⾃⼰的APP图标视觉规范规则。

只要你们⾃⼰可以看得明⽩就⾏。

以上2种APP界⾯⾥⾯的图标(iCON)设计规范分类⽅式,仅供参考。

第⼆部分:APP界⾯⾥⾯的按钮(Button)设计规范App ⾥的按钮拥有 4 种属性:分別为⼀般、点击、不能点击、选中按钮规范因不同功能和场景需要,设计不同的样式和颜⾊,在尺⼨上也分有:长、中、短;⽽且按不同⼿机平台长中短尺⼨也注意有所不同。

按钮切图⼀般以.9.png切图为最佳,⽆论是ios和andorid平台。

切记常见的图标和按钮视觉设计规范信息图如下:APP⾥⾯的按钮也分为:重要按钮、⼀般按钮和软弱按钮重要按钮:⼀般是指在整个界⾯当中⽐较⼤,醒⽬的位置,通常是指执⾏重要操作以及吸附在底部的按钮。

⽐如下单、搜索、确定、提交等等操作。

⼀般按钮:不是特别重要操作的按钮。

⽐如清空、退出、说明性的等按钮。

重要按钮和⼀般按钮都是⽂字是在按钮上的,⽽且占的⾯积⽐较⼤。

软件UI界面设计规范

软件UI界面设计规范

软件UI界面设计规范——软件II原则一、易用性按钮名称应该易懂,用词准确,摒弃模棱两可的字眼,要与同一界面上的其他按钮易于区分,能望文知义最好。

理想情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:1)完成相同或相近功能的按钮用Frame框括起来,常用按钮要支持快捷方式。

2)完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

3)按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题4)界面要支持键盘自动浏览按钮功能,即按Tab键能自动顺序切换功能,总体为从上到下,同时行间为从左到右的方式。

5)同一界面上的控件数最好不要超过10个,多余10个时可以考虑使用分页界面显示。

6)分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab7)默认按钮要支持Enter操作,即按Enter后自动执行默认按钮对应操作。

8)可写控件检测到非法输入后应给出说明并能自动获得焦点。

9)复选框与选项框按选择几率的高低而先后排列。

10)复选框与选项框要有默认选项,并支持Tab选择。

11)选项数相同时,多用选项框而不用下拉列表框。

12)界面控件较小时使用下拉框而不用选项框。

13)选项数较少时使用选项框,相反则使用下拉列表框。

14)专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

二、规范性通常界面设计都按Windows界面的规范来设计,即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键菜单”的标准格式,可以说:界面遵循规范化的程度越高,则易用性相应就越好,小型软件可不提供工具箱。

规范性细则:1)常用菜单要有快捷方式。

2)完成相同或相近功能的菜单用横线隔开放在同一位置。

3)菜单前的图标能直观的代表要完成的操作。

4)菜单深度一般要求最多控制在三层以内。

5)工具栏要求可以根据用户的需求自己选择定制。

6)相同或相近功能的工具栏放在一起。

7)工具栏中的每一个按钮要有工具提示。

软件界面设计规范范本

软件界面设计规范范本

软件界面设计规范范本一、概述当今世界,软件应用已经成为人们日常生活不可或缺的一部分。

良好的界面设计可以提高用户体验和使用效率,因此界面设计规范变得尤为重要。

本文将介绍软件界面设计的一些基本规范,以提供一个范本供设计师参考。

二、布局规范1. 界面整洁美观:避免过多冗余的内容和视觉干扰,创造简洁大方的界面设计。

使用合适的配色方案和字体,确保内容清晰可读。

2. 模块分组:将相关功能模块进行分组,便于用户快速找到所需功能。

可以采用标签、边框或者颜色等元素进行模块划分。

3. 首屏展示:合理安排首屏展示内容,提供重要功能入口和常用操作按钮,减少用户的搜索时间和操作步骤。

三、导航规范1. 明确导航路径:提供清晰明确的导航路径,使用户可以快速找到所需功能或者页面。

可以采用面包屑导航、菜单栏或者标签等形式。

2. 突出当前位置:突出显示用户当前所处的位置,以增强用户的导航意识,可以通过高亮、底纹或者文字样式等方式实现。

3. 常用功能快捷入口:将常用功能提供快捷入口,以便用户可以更方便地进行操作。

可以将这些入口放在导航栏或者工具栏中。

四、交互规范1. 控件使用一致性:在同一软件或同一功能中,相同类型的控件具有一致的样式和交互方式,以减少用户的学习成本和混淆。

2. 避免弹窗过多:避免频繁弹出信息窗口,以免打断用户的操作流程。

只在必要的情况下使用弹窗,提供清晰明确的信息。

3. 反馈机制:对用户的操作提供及时、准确的反馈,以帮助用户更好地理解其操作所带来的结果。

五、字体与颜色规范1. 字体选择:选择易读性较好的字体,避免使用过小或者过花哨的字体。

同时,要注意在不同界面和功能之间保持一定的字体一致性。

2. 色彩搭配:选取和谐的配色方案,使界面更加美观且符合软件的定位和品牌形象。

避免使用过于显眼的颜色,以免对用户造成视觉疲劳。

六、反馈与帮助规范1. 提供错误提示:当用户输入错误或操作有误时,及时给予明确的错误提示,避免让用户产生困惑和焦虑。

APP界面UI设计规范

APP界面UI设计规范

APP界面UI设计规范应用程序(UI)设计规范是指开发应用程序的界面时需要遵循的一系列设计原则、指导准则和最佳实践,以提供一致、可靠和易于使用的用户界面。

一个好的应用程序界面设计规范可以帮助开发人员创建用户友好、一致性强、易于理解和操作的应用程序。

在设计应用程序界面时,设计人员需要考虑以下方面:1.一致性:应用程序的各个界面应该保持一致性,包括颜色、字体、图标、按钮和布局等。

这样可以使用户在不同界面间切换时能够更容易地适应和理解。

2.可视化引导:在设计界面时,应该使用可视化引导技术,如箭头、颜色提示和动画等,以引导用户完成操作。

这可以减少用户的迷茫感和错误操作,提升用户的操作效率和满意度。

3.易于辨识:应用程序界面中的元素应该能够被用户轻松地辨识和理解。

例如,按钮和图标应该具有明确的含义和作用,以便用户快速识别并进行相应操作。

4.响应性:应用程序的界面应该能够对用户的操作做出及时的响应,例如,按钮点击后应该有明显的反馈效果,界面刷新和加载时应该有合理的动画提示。

5.可定制性:应用程序界面的设计应该允许用户根据自己的喜好和需求进行定制,例如,颜色主题、字体大小和布局等。

这样可以提升用户的个性化体验和满意度。

7.错误处理:应用程序界面应该能够及时、明确地提示用户操作存在的错误,并提供解决方案和反馈机制。

例如,使用弹出窗口或警告框来提示用户输入错误或操作不当。

8.可访问性:应用程序的界面设计应该考虑到不同用户群体的特殊需求和能力。

例如,为视力障碍用户提供屏幕阅读器支持,为听力障碍用户提供文字提示和字幕等。

9.性能优化:应用程序界面的设计应该尽量减少对系统资源的占用,以提升程序的运行速度和系统的稳定性。

例如,使用合适的图像压缩和文件压缩技术,避免过多的网络请求和数据加载。

10.文档化:设计人员应该及时、清晰地记录应用程序界面的设计规范和指导准则,以便开发人员和维护人员参考和使用。

这可以保证应用程序的界面设计在不同版本和不同开发环境下的一致性。

App界面版式设计规范及交互设计原则

App界面版式设计规范及交互设计原则
同时满足有经验和无经验的用户。 允许用户定制常用功能。
原则八
优美简约原则
展示的内容应该去除不相关的信息或几乎不需要的信息。
原则九
容错原则
出现错误信息应该使用简洁的文字,指出错误是什么, 并给出解决建议。
原则十
人性化原则
应该提供一份帮助文档。任何帮助信息都应该可以方便 地搜索到,以用户的任务为核心,列出相应的步骤。
原则二
环境贴切原则
软件系统应该使用用户熟悉的语言、文字、语句,而非系统 语言。 软件中的信息应该尽量贴近真实世界,让信息更自然,逻辑 上也更容易被用户理解。
原则三
用户可控原则
用户误触到某些功能,应该让用户可以方便的退出。 用户发送一条消息、总会有意识到自己不对的地方,这 个叫做临界效应;支持撤销/重做功能。
……
……
App界面版式设计规范
对称
对称设计传达出页面的平衡、安静和稳定,同时表达 了完整性、专业性和一致性。
……
……
App界面版式设计规范
分组
常见的分组方式就是卡片,为用户选择提供专注而又明确 的浏览体验。
……
……
App界面版式设计规范
显示分辨率 逻辑分辨率 设计尺寸选择
设计适配
……
……
App界面版式设计规范
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
原则四
一致性原则
结构一致性 色彩一致性 操作一致性 反馈一致性 文字一致性
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

一、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=1pxhdpi模式下 1dp=xhdpi模式下 1dp=2pxxxhdpi模式下 1dp=3pxXxxhdpi模式下 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)小,无论在什么屏幕上显示。

相关文档
最新文档