移动应用界面设计的尺寸规范
移动应用界面设计的尺寸规范
移动应用的界面设计画布尺寸设计多大(特别是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):打印分辨率(每英寸所能打印的点数,即打印精度)dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。
移动端规范
移动端规范移动端规范是指在移动应用开发过程中,为了保证用户体验和开发效率,团队内部制定的一系列标准和规范。
下面是移动端规范的一些主要内容。
1. 设计规范移动端设计规范是指根据移动设备的特点,对界面元素、排版、颜色、图标、交互等进行规范。
例如,需要保证界面简洁明了,按钮和输入框大小适中,颜色搭配和谐,图标清晰易辨认,交互流程简单直观等。
2. 布局规范移动端布局规范是指在不同分辨率和屏幕尺寸的移动设备上,如何适配布局。
例如,需要使用相对单位(如百分比)来定义元素的宽高,避免使用固定像素值;需要考虑不同设备的屏幕密度,使用矢量图标等。
3. 图片规范移动端图片规范是指在设计和使用图片时需要注意的规范。
例如,需要优化图片文件大小,减少加载时间;选择合适的图片格式(如JPEG、PNG);根据不同设备分辨率提供不同尺寸的图片等。
4. 字体规范移动端字体规范是指在选择和使用字体时需要遵守的规范。
例如,需要选择适合移动设备显示的字体;保证字体大小在不同设备上显示一致;避免使用字体图标等。
5. 动画规范移动端动画规范是指在设计和使用动画效果时需要注意的规范。
例如,需要考虑动画的流畅性和性能消耗;保持动画效果简洁明了,不要过度炫酷;避免过多使用动画效果,以免分散用户注意力等。
6. 网络规范移动端网络规范是指在与服务器通信时需要遵守的规范。
例如,需要合理控制网络请求的频率和并发数,以避免过大的流量消耗;根据网络状态对数据进行缓存和预加载,提高用户体验;处理网络异常等。
7. 错误处理规范移动端错误处理规范是指在处理用户操作错误和程序异常时需要遵守的规范。
例如,需要给出明确的错误提示,帮助用户理解问题所在;记录和上报错误信息,以便及时修复程序漏洞;避免崩溃和闪退等。
8. 安全规范移动端安全规范是指在保护用户数据和应用安全时需要遵守的规范。
例如,需要加密用户敏感信息,避免泄露风险;对用户权限进行合理处理,避免滥用;定期更新应用程序,修复安全漏洞等。
figma 模板尺寸
figma 模板尺寸
Figma是一款流行的界面设计工具,它提供了多种模板尺寸以
适应不同的设计需求。
在Figma中,你可以选择不同的模板尺寸来
开始你的设计工作。
以下是一些常见的Figma模板尺寸:
1. 移动设备模板,针对移动应用程序设计的模板尺寸通常为
360x640像素或375x812像素。
这些尺寸适用于各种移动设备屏幕
大小,包括智能手机和平板电脑。
2. 网页模板,用于网页设计的模板尺寸通常为1440x900像素
或1920x1080像素。
这些尺寸适用于常见的桌面显示器分辨率,可
以帮助设计师在不同的屏幕尺寸上预览其设计。
3. 平板电脑模板,针对平板应用程序设计的模板尺寸通常为
768x1024像素或1024x768像素。
这些尺寸适用于各种平板电脑屏
幕大小,包括iPad和Android平板电脑。
除了上述常见的模板尺寸外,Figma还提供了自定义尺寸选项,允许用户根据其特定的设计需求输入自定义的宽度和高度值。
这使
得Figma成为一个灵活且适用于各种设计场景的工具。
总的来说,Figma提供了多种模板尺寸选项,以满足不同设备和平台的设计需求。
设计师可以根据具体的项目要求选择合适的模板尺寸,并在此基础上展开他们的设计工作。
移动端设计规范
移动端设计规范移动端设计规范随着智能手机的普及和移动互联网的快速发展,越来越多的用户倾向于在移动设备上进行各种操作和使用应用。
而移动端设计规范则成为了确保用户体验和用户界面一致性的关键因素之一。
下面将介绍一些移动端设计规范的基本要点。
首先,响应式设计是移动端设计的核心原则之一。
因为移动设备的屏幕尺寸各异,从小屏到大屏都有可能,因此需要针对不同的屏幕尺寸做出相应的适配。
响应式设计可以根据屏幕尺寸的大小和设备的能力动态地调整布局、字体大小、图片尺寸等,以确保用户在不同设备上都能够获得相近的体验。
其次,简洁明了的界面设计是移动端设计的重要原则之一。
由于手机屏幕较小,用户需要快速找到自己想要的功能,因此需要尽量减少冗余信息。
在界面设计中,可以使用简洁的图标、清晰的标签和简洁的文字,以使用户能够快速理解和使用界面上的各个元素。
再次,直观易用的操作是移动端设计的关键因素之一。
因为手机的触摸屏幕没有物理按键,因此用户主要是通过手指滑动、触摸等操作与设备进行交互。
在设计中,需要合理安排各个交互元素的位置和大小,以确保用户能够轻松地进行操作。
同时,为了降低用户的学习成本,可以采用常见的操作方式和界面布局,以使用户能够迅速上手。
此外,高效的性能和流畅的动画也是移动端设计的要点之一。
由于移动设备的性能相对较弱,因此在设计中需要尽量减少页面加载时间和内存占用,以提高用户体验。
同时,可以适当使用一些流畅的动画效果,如过渡、缩放和平移等,来增强用户的交互体验。
最后,设计规范的一致性也是移动端设计的重要要素之一。
在设计中,需要保持整体风格和交互方式的一致性,以便用户可以更容易地理解和使用应用。
可以通过使用相同的颜色、字体、图标和布局来实现一致性,以确保用户在不同的页面和功能之间有良好的连贯性。
综上所述,移动端设计规范是确保用户体验和用户界面一致性的关键因素之一。
响应式设计、简洁明了的界面设计、直观易用的操作、高效的性能和流畅的动画以及一致性都是移动端设计规范的基本要点。
app设计尺寸规范
app设计尺寸规范在设计一个应用程序时,尺寸规范是非常重要的。
尺寸规范可以保证应用程序在不同设备上的一致性和易用性。
下面是一些关于设计应用程序尺寸规范的建议。
1. 分辨率:应用程序的分辨率应该适应不同设备的屏幕分辨率。
对于移动设备,通常使用以下常见分辨率:320x480、640x960、1080x1920等。
对于平板电脑,通常使用1024x768、2048x1536等分辨率。
2. 页面布局:页面布局应该根据设备的屏幕尺寸和方向进行调整。
对于移动设备,通常使用垂直布局。
对于平板电脑,通常使用水平布局。
在设计布局时,应考虑到不同设备的可视区域大小。
3. 图标尺寸:图标是应用程序中重要的组成部分之一。
在设计图标时,应该选择合适的尺寸。
通常情况下,移动设备上的图标尺寸为48x48或72x72像素,平板电脑上的图标尺寸为96x96或144x144像素。
4. 文字大小:文字大小直接影响用户的阅读体验。
在选择文字大小时,应该考虑到不同设备上的字体渲染效果和可读性。
通常情况下,移动设备上的文字大小应该在9-12磅之间,平板电脑上的文字大小可以适当增大。
5. 图片尺寸:应用程序中的图片应该使用合适的尺寸。
过大的图片会增加应用程序的加载时间和内存占用,过小的图片会导致模糊和失真。
在选择图片尺寸时,应该考虑到图片显示的区域大小和分辨率。
6. 边距和间距:边距和间距可以使应用程序的界面更加清晰和易读。
在设计边距和间距时,应该考虑到不同设备的屏幕密度和大小。
通常情况下,边距和间距应该大于等于8个像素。
7. 按钮尺寸:按钮是用户与应用程序交互的重要方式之一。
按钮的尺寸应该足够大,方便用户点击。
通常情况下,按钮的最小尺寸为48x48像素。
总之,设计应用程序的尺寸规范是非常重要的。
合适的分辨率、布局、图标尺寸、文字大小、图片尺寸、边距和按钮尺寸可以提升应用程序的用户体验和可用性。
通过遵循这些尺寸规范,可以使应用程序适应不同设备的屏幕,并提供一致的用户体验。
移动应用界面设计规范
移动应用界面设计规范移动应用界面设计是移动应用开发中至关重要的一环。
良好的界面设计能够提升用户体验,增加用户粘性,使应用更加易用和吸引人。
为了确保移动应用的界面设计达到最佳效果,以下是一些移动应用界面设计的规范和要点。
一、界面布局1. 界面布局应简洁明了,功能模块应合理划分和组织,以便用户快速找到所需功能。
2. 采用一致的导航和菜单设计,使用户在不同页面间能够轻松切换和导航。
3. 重要功能和信息应放置在界面的显著位置,方便用户快速识别和操作。
4. 合理设置界面元素的大小和间距,以适应不同屏幕尺寸的移动设备。
二、颜色和样式设计1. 选择适合应用风格和主题的配色方案,保证界面整体和谐统一。
2. 注意颜色的对比度,以确保文字和图标在不同背景下的清晰可见。
3. 利用元素的形状、边框、阴影等设计元素,增加界面的层次感和美观度。
4. 尽量使用标准化的图标和按钮样式,减少用户对不熟悉图标的解读成本。
三、字体和文字1. 选择合适的字体大小和样式,使文字在不同设备上都能清晰可读。
2. 利用字体的粗细、颜色等样式设置,突出界面中重要信息和功能的关键性。
3. 避免使用过长的文字描述,简洁明了的文字能更好地吸引用户的注意力和理解。
四、交互设计1. 操作和反馈应迅速有效,用户的交互体验应流畅自然。
2. 合理设置按钮和链接的大小和响应区域,以免用户操作时出现误触。
3. 提供明确的操作指引和提示,引导用户完成复杂或关键操作。
4. 操作后的状态变化和结果反馈应及时显示,以增加用户对操作的掌控感。
五、排版和布局1. 使用合适的排版和布局方式,使界面信息有序地呈现给用户。
2. 采用分组和层叠的布局,以区分不同模块和功能,避免界面显得杂乱。
3. 对于长页面的内容,采用适当的滚动和分页方式,以提高内容的可浏览性。
六、图标和图片1. 使用高质量的图标和图片,保证在不同屏幕分辨率下都能清晰可见。
2. 图片的尺寸和格式应适应移动设备的特点和要求,减少加载时间和流量消耗。
移动端设计规范
移动端设计规范移动端设计规范是指在移动设备上设计和开发应用程序时应遵循的一系列规范和原则。
移动设备具有独特的特点,例如屏幕尺寸小、交互方式多样、网络环境不稳定等,因此需要特殊的设计规范来满足用户的需求和提供良好的用户体验。
1. 响应式设计:移动设备屏幕尺寸有限,需要采用响应式设计原则,使得应用程序能够自动适应不同屏幕尺寸的设备。
应用程序的布局和元素大小需要根据屏幕尺寸进行调整,以确保用户能够方便地使用应用程序。
2. 简洁明了:移动设备屏幕空间有限,需要避免信息过载。
应用程序的界面应简洁、明了,只显示最重要的信息和功能。
不必要的元素和功能应尽量减少,以提高用户对应用程序的理解和操作效率。
3. 易用性:移动设备的操作方式多样,包括触摸、手势、语音等。
应用程序的操作要简单、直观,并且需要充分考虑用户的使用习惯和需求。
例如,按钮的大小和间距要适应手指的点击,滑动操作要有明显的视觉反馈等。
4. 导航方式:在移动设备上,屏幕空间有限,因此需要考虑如何进行有效的导航。
通常采用的方式有标签栏、抽屉式菜单、滑动菜单等。
导航方式要直观、易懂,使得用户能够方便地切换不同的页面和功能。
5. 色彩和图标:移动设备的屏幕显示能力有限,因此需要合理选择色彩和图标,以确保用户能够清晰地识别和理解界面上的元素。
颜色要简洁明了,不宜过于花哨;图标要具备直观的意义和区分度。
6. 字体和排版:移动设备屏幕尺寸有限,因此需要合理选择字体和排版方式,以确保用户能够舒适地阅读界面上的文本内容。
字体要合适,不宜过小或过大;排版要有良好的间距和行高,以便用户能够方便地阅读文本。
7. 错误处理和反馈:移动设备的网络环境不稳定,用户的操作也容易出错。
因此,应用程序需要提供良好的错误处理和反馈机制,以帮助用户快速找到错误原因和解决方法,并且给予明确而友好的提示。
8. 性能优化:移动设备的处理能力有限,网络速度也相对较慢。
因此,应用程序需要进行性能优化,使得应用程序能够快速启动、响应迅速,并且能够在不稳定的网络环境下正常运行。
移动应用界面设计-形考任务1、3、4、6(2023年版最新)
形考任务1选择题1.Android是谷歌于2007年宣布基于Linux平台的开源手机操作系统名称,Android一词本意是指()答案:机器人2.UE/UX指的是什么?()答案:用户体验3.UI界面设计规范中,屏幕大小为1080*1920px时,启动图标的尺寸应该是?()答案:144*144px4.UI界面设计规范中,屏幕大小为1080*1920px时,搜索框上下内边距应该是?()答案:25px5.UI设计不包括哪项内容?()答案:前端开发6.UI设计交付物都包含哪些?()答案:PSD效果图7.下列哪一种不属于UI设计范畴?()答案:户外海报设计8.下面哪个不是UE/UX的工作内容?()答案:按照规范输入pdf切图9.下面对用户体验的基本要素描述正确的是?()答案:感官体验交互体验信任体验10.下面那种工具选项可以将Pattern(图案)填充到选区内:()答案:图案图章工具11.以下说法正确的是()答案:UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的整体设计12.使用钢笔工具可以绘制最简单的线条是什么:()答案:直线13.图象必须是何种模式,才可以转换为位图模式:()答案:灰度14.在Photoshop中,快捷健Ctrl+Alt+C打开哪个操作面扳:()答案:画布大小15.在photoshop中,快捷方式shift+ctrl+alt+t,多用于什么操作:()答案:按圆形,以固定角度复制原始形状16.在photoshop当中,图像最基本的组成单元是()答案:像素17.在何情况下可利用图层和图层之间的裁切组关系创建特殊效果:()答案:使用一个图层成为另一个图层的蒙板18.在路径曲线线段上,方向线和方向点的位置决定了曲线段的什么:()答案:形状19.如何移动一条参考线:()答案:选择移动工具拖拉20.如果在图层上增加一个蒙板,当要单独移动蒙板时下面哪种操作是正确的:()答案:首先要解除图层与蒙板之间的链接,再选择蒙板,然后选择移动工具就可以移动了21.字符文字可以通过下面哪个命令转化为段落文字:()答案:转为段落文字22.移动图层中的图象时如果每次需要移动10个象素的距离,应按下列哪组功能键:()答案:按住Shift键同时按键盘上的箭头键23.Photoshop中的渐变类型不包括()。
APP尺寸规范
APP尺寸规范篇一:app界面设计的规则移动端界面设计之尺寸篇Ios1. 尺寸及分辨率Iphone界面尺寸:320x480、640x960、640x1136、ipad界面尺寸:、6(单位都是像素,分辨率和网页一样,基本只要72ppi)一般用640x960或者640x1136尺寸设计。
Ps:作图最好用形状工具来画的,这样方便后期切图或者尺寸变化。
2. 界面基本元素组成Iphone的app界面一般由四个元素组成,分别是:状态栏,导航栏,主菜单栏(页脚)以及中间区域。
、这里用的是640x960的尺寸设计:状态栏:即使信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应功能或者页面间的跳转按钮,其高度为:88px 主菜单栏(页脚):类似页面的主菜单,提供整个页面的分类内容快速跳转,其高度为:98px内容区域:展示应用提供的相应内容,整个应用中布局更最为频繁的,其高度为:734px(960-40-88-98=734)Android3. 尺寸及分辨率Android界面尺寸:480x800、720x1280、0(单位都是像素,分辨率和网页一样,基本只要72ppi)一般用720x1280尺寸设计,这个尺寸在720x1280中显示完美,在0中看起来清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
4. 界面基本元素组成Android的app界面也是由四个元素组成,分别是:状态栏,导航栏,主菜单栏(页脚)以及中间区域。
、这里用的是720x1080的尺寸设计:篇二:设计——字号规范设计——字号规范主体:导航主标题:34/36px苹果标题:34px (ps:有些用36px)正文:32px-34px副文:28px-24px最小:20px正文:34px,会选择性的选用苹方粗体列表形式、工具化正文:32px(PS:由于屏幕使用变大正文大小趋势变成了34px)副文:28px时间:24px26px字号还用于划分类别的提示文案,因为这样的文字希望用户阅读,但不抢过主列表信息的引导。
移动互联网应用(APP)适老化通用设计规范
移动互联网应用(APP)适老化通用设计规范一、适用范围各企业在提供适老化服务时,可根据实际情况,将适老版界面内嵌在APP中或开发单独的适老版APP,并保障服务的可持续运营。
本规范中所列条目,除特别说明适用范围(如适老版界面、单独的适老版APP)外,其余条目为共性要求。
二、技术要求1.可感知性1.1 字型大小调整在移动应用中,建议使用无衬线字体,应可对字型大小进行调整(随系统设置调整,或移动应用内部具备字体大小设置选项),主要功能及主要界面的文字信息(不包含字幕、文本图像以及与移动应用功能效果相关的文本)最大字体不小于30 dp/pt,适老版界面及单独的适老版APP中的主要文字信息不小于18 dp/pt,同时兼顾移动应用适用场景和显示效果。
1.2 行间距段落内文字的行距至少为1.3倍,且段落间距至少比行距大1.3倍,同时兼顾移动应用适用场景和显示效果。
1.3 对比度文本/文本图像呈现方式、图标等元素间的对比度至少为4.5:1(字号大于18 dp/pt时文本及文本图像对比度至少为3:1)。
1.4 颜色用途文本颜色不是作为传达信息、表明动作、提示响应等区分视觉元素的唯一手段。
例如,在用户输入密码错误的情景下,可使用文字或语音形式直接提示用户输入有误,避免仅使用颜色作为提示手段。
1.5 验证码如果移动应用中存在非文本验证码(如拼图类、选图类验证方式)等老年人不易理解的验证方式,则应提供可被不同类型感官(视觉、听觉等)接受的替代表现形式,例如文字或语音形式,以适应老年人的使用需求。
2.可操作性2.1 组件焦点大小适老版界面中的主要组件可点击焦点区域尺寸不小于60 ×60dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于44 ×44dp/pt;单独的适老版APP中首页主要组件可点击焦点区域尺寸不小于48 ×48dp/pt,其他页面下的主要组件可点击焦点区域尺寸不小于44 ×44dp/pt。
中国移动统一门户UI设计规范补充规范
中国移动通信企业标准 中国移动通信集团公司 发布中国移动统一门户U I 补充规范目录前言......................................................................................................... I II1.适用范围 (4)2.引用标准 (4)3.术语和定义 (4)4.符号和缩略语 (5)5.总体说明 ................................................................... 错误!未定义书签。
5.1.规范目标 .......................................................................................... 错误!未定义书签。
5.2.章节简介 (5)5.3.注意事项 (6)5.4.网站兼容性说明 (7)6.VI规范 (7)6.1.L OGO设置 (7)6.1.1.Logo设置规范 (7)6.1.2.中国移动网站Logo (8)6.2.文字 (8)6.2.1.大小和字体: (8)6.2.2.颜色 (8)6.3.页面尺寸 (9)6.4.页面模板结构 (9)7.图片规范 (11)7.1.图片使用基本要求 (11)7.2.图片文件格式 (11)7.2.1.GIF文件 (11)7.2.2.JPG文件 (11)7.2.3.PNG文件 (11)7.3.图片尺寸和大小 (12)7.3.1.中国移动网站内容图片 (12)8.页面模版和结构说明 (14)8.1.省级门户网站登录后页面 (14)8.1.1.页面标记1(页头) (16)8.1.2.页面标记2(左侧导航) (17)8.1.3.页面标记3(客户个人信息) (18)8.1.4.页面标记4(我的业务话费信息) (19)8.1.5.页面标记5(业务、活动推荐区) (20)8.1.6.页面标记6(基地业务内容推荐区) (20)8.1.7.页面标记7(省内业务聚合区) (21)8.1.8.页面标记8(广告位) (22)8.1.9.页面标记9(充值) (22)8.1.10.页面标记10(业务关注排行) (23)8.1.11.页面标记11(发短信) (24)8.1.12.页面标记12(其他广告位) (24)8.1.13.页面标记13(飞信聊天) (25)8.1.14.页面标记14(页尾版权说明) (25)8.2.省级登录后专区飞信模块 (25)8.3.内页 (28)8.4.顶部心情更换 (29)8.5.左侧导航管理应用展示详细效果。
移动端ui设计规范
移动端ui设计规范移动端UI设计规范是一套用于指导移动应用程序界面设计的标准。
移动设备的屏幕相对较小,因此设计必须更加简洁、直观和用户友好。
下面是一些移动端UI设计规范的重要原则和指南:1.一致性:在整个应用程序中保持一致的视觉和交互设计。
这可以通过使用相同的颜色、字体和图标来实现。
用户应该能够轻松地在应用程序的不同部分之间进行导航,而不需要重新学习。
2.简洁性:移动设备的屏幕空间有限,因此设计应该简洁明了。
避免使用过多的文字和图像,确保界面不会过度拥挤。
使用简单直观的图标和符号代替冗长的说明。
3.响应式设计:移动设备具有不同的屏幕大小和分辨率。
因此,设计师应该创建灵活的界面,能够适应不同的设备和屏幕大小。
可使用自适应布局或响应式设计来实现。
4.导航:移动应用的导航应该是简单直观的。
使用明确的导航栏和标签,使用户能够轻松浏览和访问应用程序的不同部分。
5.可点击区域:移动设备的屏幕比较小,因此可点击区域应该足够大,以确保用户可以轻松点击按钮和链接。
推荐的最小可点击区域为44x44像素。
6.颜色:选择合适的颜色方案,以确保用户界面易于阅读和识别。
使用高对比度的颜色,避免使用过亮或过暗的颜色。
在不同的界面元素中使用一致的颜色,以保持整体统一性。
7.字体:选择易于阅读的字体,并确保适当的字号。
避免使用过小的字体,以确保用户可以轻松阅读文字内容。
同时,避免使用过多的不同字体,以保持一致性。
8.反馈:给用户提供及时的反馈,以确保用户知道他们的操作是否成功。
例如,可以使用动画、声音或震动来表示操作结果。
同时,避免过多的反馈,以免用户感到干扰。
9.异常处理:考虑用户可能会遇到的异常情况,并为其提供清晰的提示和解决方案。
例如,如果应用程序在无网络连接时无法加载数据,应该向用户展示相应的错误信息,并提供重新连接的选项。
10.易用性:最重要的原则是将用户体验放在第一位。
设计应该是用户友好的,能够满足用户的需求和期望。
网站及APP界面设计规范
网站及APP界面设计规范1. 引言在当今数字时代,网站和移动应用程序(APP)的界面设计对于用户体验至关重要。
一个优秀的界面设计可以提升用户的满意度,使其更轻松地使用产品或服务。
为了确保界面设计的一致性和效果,制定一套规范是必要的。
本文将介绍网站和APP界面设计的几个方面,包括布局、色彩、字体、图标和交互等。
2. 布局(1)容器宽度:在网页设计中,为了提供更好的可读性和视觉效果,常用的容器宽度是960像素或1200像素。
对于APP设计,可以根据屏幕尺寸自适应调整容器宽度。
(2)栅格系统:网页和APP的布局通常采用栅格系统,以保持一致性和美观性。
建议使用12栅格系统,便于布局元素的平衡和调整。
(3)内容呈现:在网页和APP中,内容应该按照逻辑顺序呈现,以确保用户能够轻松地获取所需信息。
重要的内容应置于页面或屏幕上部,次要内容可以放置在下部。
3. 色彩选择(1)品牌色彩:根据品牌形象和定位,选择一到三种主要颜色作为品牌色彩,并在整个网站和APP中保持一致使用。
(2)辅助色彩:辅助色彩用于突出重要信息,例如按钮、标签等。
建议选择与品牌色彩相搭配的颜色,并在整体设计中使用相对较少,以免过于花哨。
(3)背景色彩:背景色彩应该选择以增加整体网站和APP的可读性。
一般情况下,使用浅色背景和深色文字是较为安全的选择。
4. 字体选择(1)品牌字体:根据品牌形象和定位,选择一种或两种字体作为品牌字体,并在整个网站和APP中保持一致使用。
品牌字体应具备良好的可读性。
(2)内容字体:内容字体应具备良好的可读性,建议选择无衬线字体,例如Arial、Helvetica或Roboto等。
字号大小应根据不同设备的屏幕尺寸进行适当调整。
5. 图标设计(1)图标风格:图标设计应简洁清晰,符合整体界面风格。
常见的图标风格包括扁平化风格、线条风格和立体风格等。
根据品牌形象和界面需要,选择适合的图标风格。
(2)图标一致性:相似功能的图标应保持一致,以避免用户的混淆和困惑。
移动应用开发中的用户界面设计原则与方法
移动应用开发中的用户界面设计原则与方法随着智能手机和平板电脑的普及,移动应用已经成为了我们日常生活的重要组成部分。
一个优秀的移动应用需要有令人愉悦、直观易用的用户界面。
用户界面设计是移动应用开发过程中非常关键的一部分,它直接关系到用户体验的好坏。
本文将为你介绍一些移动应用开发中的用户界面设计原则与方法,帮助你提升移动应用的用户体验。
1. 简洁明了:移动应用的用户界面应该尽量简洁明了,避免过多的复杂元素。
移动设备的屏幕空间有限,因此在设计界面时需要考虑排版和内容布局的紧凑性。
关键操作和信息应该突出展示,不重要的内容应该在界面中得到合适的隐藏或省略。
2. 一致性:在移动应用中,保持一致的用户界面设计是非常重要的。
相似的功能应该使用相似的界面布局和操作方式。
这样可以帮助用户更快地熟悉应用,提高用户的学习效率。
3. 直观易用:用户界面应该是直观易用的,用户能够快速上手并且不需要长时间的学习。
合理的布局、明确的指示和易懂的标识可以帮助用户快速找到并使用所需的功能。
4. 良好的反馈:当用户进行操作时,移动应用应该给予及时而准确的反馈。
例如,在按钮被点击时,应该有明显的点击效果,以指示用户操作已被接受。
良好的反馈可以增强用户对应用的信任感,提高用户的满意度。
5. 色彩与图标:色彩和图标在移动应用的用户界面设计中发挥着重要的作用。
恰到好处的色彩搭配可以帮助用户更好地理解界面和信息,同时也能提升应用的美观度。
图标应该简洁明了,并且能够清晰地表达功能或含义,以便用户能够迅速识别。
6. 导航的易用性:一个好的移动应用应该有易用的导航系统。
导航菜单应该清晰可见,方便用户浏览和切换功能。
适当的搜索功能也是不可或缺的,方便用户快速找到所需信息。
7. 拥抱手势:移动设备具有触摸屏幕的特点,因此在设计移动应用用户界面时要充分利用手势操作。
例如,使用拖动、滑动等手势可以帮助用户更好地进行页面切换和内容浏览。
8. 响应式设计:考虑到不同屏幕尺寸和设备类型,响应式设计是移动应用界面设计的重要原则。
移动端网页设计尺寸标准
移动端网页设计尺寸标准移动端网页设计尺寸标准涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。
那么大家知道移动端网页设计尺寸标准是多少呢?下面一起来看看!现象首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。
尤其是Android,你会听到很多种分辨率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏。
近年来iPhone的碎片化也加剧了:640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。
实际上大部分的app和移动端网页,在各种尺寸的屏幕上都能正常显示。
说明尺寸的问题一定有解决方法,而且有规律可循。
像素密度要知道,屏幕是由很多像素点组成的。
之前提到那么多种分辨率,都是手机屏幕的实际像素尺寸。
比如480x800的屏幕,就是由800行、480列的像素点组成的。
每个点发出不同颜色的光,构成我们所看到的画面。
而手机屏幕的物理尺寸,和像素尺寸是不成比例的。
最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。
刚好两倍,然而两款手机都是3.5英寸的。
所以,我们要引入最重要的一个概念:像素密度,也就是PPI(pixels per inch)。
这项指标是连接数字世界与物理世界的桥梁。
Pixels per inch,准确的说是每英寸的长度上排列的像素点数量。
1英寸是一个固定长度,等于2.54厘米,大约是食指最末端那根指节的长度。
像素密度越高,代表屏幕显示效果越精细。
Retina屏比普通屏清晰很多,就是因为它的像素密度翻了一倍。
倍率与逻辑像素再用iPhone 3gs和4s来举例。
假设有个邮件列表界面,我们不妨按照PC端网页设计的思维来想象。
3gs上大概只能显示4-5行,4s 就能显示9-10行,而且每行会变得特别宽。
但两款手机其实是一样大的。
html5移动开发 不同设备的界面尺寸设计
html5移动开发不同设备的界面尺寸设计IOS篇1、尺寸及分辨率iPhone 界面尺寸:320×480、640×960、640×1136iPad 界面尺寸:1024×768IOS篇1、尺寸及分辨率iPhone 界面尺寸:320×480、640×960、640×1136iPad 界面尺寸:1024×768、2048×1536(以上单位都是像素哦,至于分辨率一般网页UI和移动UI基本上都只要72 ppi)当然,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用640×960 或者640×1136 的尺寸设计。
P.S. 作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或尺寸变更~2、界面基本组成元素iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域这里取用640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px(等等,为了说明我不是瞎掰的:960-40-88-98=734)iPhone/iPod Touch 第一代、第二代、第三代iPhone4/iPhone4siPhone5/iPhone5C/iPhone5s至于我们经常说的iPhone5/5s 的640×11136 的尺寸,其实就是中间的内容区域高度增加到:910 pxP.S. 在最新的iOS7 的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变化,尺寸高度也还是没有变化的,只不过大家再设计iOS7 风格的界面的时候多多注意一下~3、字体大小iPhone 上的字体英文为:HelveticaNeue 至于中文,Mac下用的是黑体-简,Win 下则为华文黑体。
移动应用的界面设计原则
移动应用的界面设计原则在现代社会,移动应用已经成为人们日常生活中不可或缺的一部分。
在使用移动应用的时候,用户往往会优先考虑应用的功能需求,但是应用的界面设计同样是十分重要的。
良好的界面设计能够为用户提供舒适、直观、高效的使用体验,增加用户的黏性,同时也是应用的一种重要产品价值。
那么,移动应用的界面设计应该遵循哪些原则呢?一、简洁性原则在移动设备上,屏幕空间十分有限,因此,界面设计应该保持简洁明了。
在布局上,应该采用对称、均衡、规矩的布局方式,使界面整洁、规范,同时减少用户在使用过程中的混乱感。
在色彩上,应该采用简洁、明快的色彩搭配,搭配简洁的图标和菜单,这样能够使整个界面显得更为直观。
二、易用性原则对于移动应用,易用性是非常重要的。
设备的操作方式独特,因此,界面设计应该尽可能贴合设备操作方式,这样增加用户使用的便捷性,同时也增加用户的粘性。
例如,在菜单设计上,应该减少繁琐而冗长的操作流程,尽量避免一些过于复杂的选项和设置,并且通过一些可视化的手段来简化用户操作,提高用户的使用效率。
三、一致性原则一致性是设计中的一个重要原则,也是移动应用界面设计的必备元素。
一致性可以让用户在使用不同的应用时能够更加流畅的进行切换,同时也减少用户在使用过程中的学习成本。
因此,在界面设计上,应该保持一致性,例如,设计相同的颜色和图标,使用相似的布局风格和操作方式等等,这样能够使用户在使用过程中体验到更好的连贯性。
四、可灵活性原则由于移动设备具有多变性,因此,界面设计也应该具有一定的灵活性。
虽然设计要保持一定的一致性,但也要根据不同的设备类型和屏幕尺寸,来设计出不同的界面,使用户在不同设备上都能够有良好的使用体验。
同时,针对特殊用户群体,如老年人,要考虑其易用性需求,通过不同的界面设计,来满足老年人的需求。
五、美学设计原则美学设计原则是移动应用界面设计的灵魂所在,它从艺术角度去看待界面设计,强调对美学的追求和对细节的把控,让设计在精美的外表下体现出强大的内涵。
移动端界面设计的原则与技巧解析
移动端界面设计的原则与技巧解析移动端界面设计是指用于手机、平板电脑等移动设备上的应用或网页界面设计。
随着移动互联网的快速发展,越来越多的人开始使用移动设备进行日常生活、工作和娱乐,对移动端界面设计的需求也日益增长。
本文将介绍移动端界面设计的几个原则和技巧,帮助设计师们在设计过程中更好地满足用户需求。
一、简洁一致的布局设计移动设备的屏幕相对较小,因此在设计移动端界面时,要保持简洁、一致的布局设计是非常重要的。
首先,要确保界面元素的大小适中,不要过大或过小,以免影响用户的操作体验。
其次,要避免过多的界面元素,只展示必要的内容,避免界面过于拥挤。
最后,要保持布局的一致性,统一使用相同或相似的风格、颜色和字体,使整个界面看起来更加整洁美观。
二、注重可用性和易用性移动设备的操作方式与传统的电脑不同,用户更多地使用手指触摸屏幕进行操作。
因此,在设计移动端界面时,要注重可用性和易用性,使用户能够轻松地完成目标操作。
首先,要提供清晰简洁的导航菜单,方便用户浏览不同的页面或模块。
其次,要注意按钮的大小和间距,确保用户能够准确地点击到目标按钮。
最后,要合理运用手势操作,如滑动、捏放等,提升用户的交互体验。
三、关注用户体验和视觉引导用户体验是移动端界面设计的核心,要关注用户的需求和期望,为用户提供良好的体验。
首先,要借助视觉引导,引导用户进行操作。
例如,使用明亮的颜色或按钮的强调效果来吸引用户的注意力。
其次,要合理安排界面中的元素顺序,根据用户的操作流程进行布局,使用户能够更加直观地理解界面的功能和操作方式。
最后,要注意反馈和提示,及时告知用户操作的结果或下一步的操作流程,增强用户的参与感和满意度。
四、考虑不同设备和屏幕尺寸的适配性移动设备的屏幕尺寸各异,设计师在进行移动端界面设计时要考虑不同设备和屏幕尺寸的适配性。
首先,要采用响应式设计,使界面能够自适应不同屏幕尺寸,确保在不同设备上显示效果良好。
其次,要注意元素的相对位置和缩放比例,避免因屏幕尺寸不同而导致界面错位或比例失调。
手机网站设计尺寸及界面布局
设计页面要求及规范主要是几个页面1.欢迎页2.首页3.菜单框4.注册与登录5.弹出窗口6.动态展示交互7.详细页8.搜索页设计尺寸规范状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。
Logo出矢量图512*512 icon:29*29 72*72 512*512iphone1.尺寸以及分辨率320*480,640*960,640*1136 网页和移动的UI用72px2.界面基本组成元素iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。
因为宽度是固定的,所以设计开发起来很方便。
下面我们说说这些“栏”的尺寸吧:状态栏:高度40px导航栏:高度88px主菜单栏:高度98px;内容区域:高度为:734px如果640*1136是910pxiPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。
3.字体32~36px 32px,注释等提示文本28px。
不同则img-line.png,***************Android1.尺寸以及分辨率提到Android的尺寸,480*800、720*1280。
点9切图所有手机的适配。
Android界面尺寸:480*800、720*1280、1080*1920。
2.界面基本组成元素与ios的一样,还是有状态栏、导航栏和主菜单栏,以720*1280的尺寸,状态栏的高度应为50px,导航栏的高度96px,主菜单栏的高度96px。
内容区域高度为:1038px(1280-50-96-96=1038) 窗体底端Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi (240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)字体:android原生的字体,与微软雅黑很像。
字体大小范围为16px~32px IOS:宽度640PX 高度1136pxiOS屏幕尺寸有这几种:320*480,960*480,1024*768Ipad端iPad界面尺寸:1024*768、2048*1536单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。
移动端产品设计中的规范和设计原则
移动端产品设计中的规范和设计原则移动端产品设计已经成为当今互联网时代不可或缺的一部分。
移动端的发展势头迅猛,无论是谷歌、苹果、还是百度、腾讯、阿里,都已经涉足移动领域。
作为经常使用移动设备的人,我们肯定能够感受到移动设备应用市场的发展日新月异,越来越多的应用程序涌现出来,使我们的生活变得更加便捷、快速和舒适。
而移动设备应用程序的设计,是这些软件应用能否顺畅、高效地运行的关键。
在移动端产品的设计中,规范和设计原则是必须要遵循的准则。
下面分别从规范和设计原则两个方面来阐述。
一、规范1. 界面规范移动端的界面规范需要遵循一些基本原则。
要使得软件界面设计醒目而有吸引力,必须对其颜色、字体、图标等方面进行设计,使其体现美观与实用。
在颜色上,需要遵循品牌色彩,突出其特点和个性。
在字体上,要选择合适的字体,尽量简洁大方,以适应不同屏幕尺寸和不同阅读需求。
在图标方面,要保证简单易懂、有序合理。
通过以上规范,可以让界面更加美观规范,给用户带来更好的体验。
2. 交互规范移动设备在交互上的特点就是手指滑动、点击、长按等非常接近生活的交互方式,交互规范主要要考虑用户的习惯和需求。
要根据用户的体验,来设计出一个优秀的移动交互系统。
在交互设计上,应尽量提供简单直观的按钮和标签,减少过多的操作,以更好地符合用户的习惯。
另外,也可以通过动画等效果提高用户的使用体验。
3. 布局规范移动端屏幕大小比较小,因此在布局设计上、页面元素大小和排布等方面都需要特别注意。
布局规范应该与交互规范一样注重用户习惯和需求,使得页面元素采用自准晶体单元格,进行规整排布,并遵循“重要内容优先排放,尽量展示少量的信息”等原则,整个布局应该简洁明了,让用户可以一眼找到自己想要的东西,并且保证界面排版的合理性和美观性。
二、设计原则1. 简单直观简单直观是设计移动端的一项基本原则。
用户对移动端界面的体验会十分敏感,如果界面过于繁琐复杂,不仅会让用户产生不适感,而且还会影响用户对软件的使用体验。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
移动应用的界面设计画布尺寸设计多大(特别是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):打印分辨率(每英寸所能打印的点数,即打印精度)dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。
尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。
ppi的运算方式是:PPI = √(长度像素数² + 宽度像素数²)/ 屏幕对角线英寸数。
即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。
以iphone5为例,其ppi=√(1136px² + 640px²)/4 in=326ppi(视网膜Retina屏)对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近320 dpi (xhdpi 模式),480 x 800 的手机很可能接近240 dpi (hdpi模式),而320 x 480 的手机则很接近160 dpi(mdpi模式)。
2、单位换算方法android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。
这些单位如何换算,是设计师、开发者需要了解的关键。
* dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。
dp和px的换算公式:dp*ppi/160 = px。
对于320ppi的屏幕,1dp x 320ppi/160 = 2px。
* sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为100%时,1sp=1px。
sp 与px 的换算公式:sp*ppi/160 = px。
对于320ppi的屏幕,1sp x 320ppi/160 = 2px。
简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。
为什么要把sp和dp代替px?原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同ppi下,他们呈现的高度大小是相同。
也就是说更接近物理呈现,而px则不行。
根据单位换算方法,可总结出:当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;当运行在hdpi模式下时,1dp=1.5px :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;3、设计稿基本元素的尺寸设置为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、设计稿标注等。
但在实际开发中,这种方法耗时耗力。
所以通常会选择折中的方法。
方法一:在标准基础上(比如xhdpi)开始,然后放大或缩小,以适应到其他尺寸。
不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。
方法二:以最高分辨率为基准设计,然后缩小适应到所需的小分辨率上。
缺点是,图标等若都最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。
结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位,推荐设计稿的画布尺寸选用720X1280 ,分辨率仍旧为72ppi(像素/英寸)。
在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。
但根据48dp原则,以及一些主流的android应用的截图分析,总结一下尺寸要求:状态栏高度:50 px导航栏、操作栏高度:96 px=48dp x 2主菜单栏高度:96 px内容区域高度:1038 px (1280-50-96-96=1038)Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,高度也和菜单栏一样为:96 px4、图标和字体大小(来自官方规范文档)a、启动图标(home页或app列表页)整体大小为48 x 48 dp密度ldpi mdpi hdpi xhdpi分辨率36*36px 48*48px 72*72px 96*96pxb、操作栏图标,代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ,图形实际区域为24 x 24 dp密度ldpi mdpi hdpi xhdpi实际区域分辨率24*24px 36*36px 48*48px整体大小分辨率32*32px 48*48px 64*64pxc、小图标/场景图标,提供操作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。
整体大小为16 x 16 dp ,图形实际区域为12 x 12 dp 。
密度ldpi mdpi hdpi xhdpi实际区域分辨率12*12px 18*18px 24*24px整体大小分辨率16*16px 24*24px 32*32pxd、通知图标如果app有通知,要提供一个有新通知时显示在状态栏的通知图标。
整体大小为24 x 24 dp ,图形实际区域为22 x 22 dp 。
密度ldpi mdpi hdpi xhdpi实际区域分辨率22*22px 33*33px 44*44px整体大小分辨率24*24px 36*36px 48*48px注:android规范提供的尺寸单位是dp,若设计稿尺寸设为720 x 1280 ,图标大小需在规范要求的尺寸数字上乘以2。
比如操作栏图标32 x 32 dp ,则设计稿上应该是64 x 64 px 。
e、字体大小Android规范中的要求如下:前面提到Android开发中的字号单位是sp,而换算关系是sp*ppi/160 = px 。
所以720 x 1280尺寸的设计稿上,字体大小可选择为24px 、28px 、32px 、36px ,主要根据文字的重要程度来选择,特殊情况下也可能选择更大或更小的字体。
f、其他尺寸要求通常把48dp作为可触摸的UI元件的标准。
为什么要用48dp呢?一般来说,48dp转化为一个物理尺寸约9毫米。
通常建议目标大小为7-10毫米,以方便用户手指能准确并且舒适触摸目标区域。
如果你设计的元素高和宽至少48dp,你就可以保证:(1)触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示。
(2)在整体信息密度和触摸目标大小之间取得了一个很好的平衡。
另外,每个UI元素之间的空白通常是8dp 。
密度ldpi mdpi hdpi xhdpi分辨率480*320px 800*460px 1280*720px 6、png图在线工具在线自动生成.9png图的Android设计切图工具推荐http://romannurik.github.io/AndroidAssetStudio/nine-patches.html二、iOS篇1、分辨率iPhone 界面尺寸:320×480、640×960、640×1136iPad 界面尺寸:1024×768、2048×1536(以上单位都是像素,至于分辨率一般网页UI和移动UI基本上都只要72 ppi)2、单位换算px、pt这里需要先区分pt、px,pt(磅值)是物理长度单位,指的是72分之一英寸。
手机上看来同一大小的字磅值是一样的,但是换算成不同分辨率手机的字号px值不一样。
(px=pt*ppi/72)iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px,屏幕密度是163ppi,4S的屏幕像素是640x960px,屏幕密度是326ppi,翻了一倍。
iPhone5的ppi没有变化,兼容性方面要增加类似首屏画面等程序上的判断。
在iPhone界面上元素的定位、尺寸是通过一个单位point,而非px,屏幕上固定有320x480pt,retina屏两倍的分辨率改变的只是pt和px之间的比例而已,这样就能实现不改变程序,只上传两套图片就兼容两个分辨率。
在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用640×960 或者640×1136 的尺寸设计。
其中设计稿的画布分辨率设为默认的72ppi(此时1px=1pt ),所以设计师可以统一采用px为单位。
开发拿到设计稿时,将上面标注的以px为单位的字号大小、图像尺寸除以2,就是非retina 屏上的pt值,这样在retina屏上也可以根据此pt值换算对应的px大小,以确保不同的分辨率下有合适的效果。
3、基本元素的尺寸设置iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。
这里取用640×960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px 导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px=960-40-88-98以上尺寸适用于iPhone 4、4S,iPhone5/5s 的640×11136 的尺寸,其实就是中间的内容区域高度增加到:910 px,其他尺寸也同上。