移动端界面设计之尺寸篇 移动端界面设计尺寸

编辑:王优 浏览: 0

导读:为帮助您更深入了解移动端界面设计之尺寸篇 移动端界面设计尺寸,小编撰写了移动端界面设计之尺寸篇 移动端界面设计尺寸,移动端界面设计之尺寸篇 移动端界面设计尺寸,移动端界面设计之尺寸篇,移动端设计尺寸规范,移动端屏幕尺寸及分辨率,移动端列表设计等6个相关主题的内容,以期从不同的视角,不同的观点深入阐释移动端界面设计之尺寸篇 移动端界面设计尺寸,希望能对您提供帮助。

大家好,今天来为您分享移动端界面设计之尺寸篇 移动端界面设计尺寸的一些知识,本文内容可能较长,请你耐心阅读,如果能碰巧解决您的问题,别忘了关注本站,您的支持是对我们的最大鼓励!

移动端界面设计之尺寸篇:移动端界面设计尺寸

在移动互联网时代,移动端界面设计变得越来越重要。而一个优秀的移动端界面设计中,尺寸的选择是非常关键的一环。在移动端界面设计中,尺寸的合理选择不仅可以提高用户的使用体验,还能使界面更加美观、整洁。

移动端界面设计的尺寸要考虑到用户的操作习惯。由于移动设备的屏幕相对较小,所以在设计界面尺寸时,要尽量减少用户的操作步骤和滚动次数。在设计一个列表页面时,可以将每个列表项的高度调整得稍大一些,以便用户在一页内能够看到更多的内容,不需要频繁的滚动屏幕。这样不仅可以提高用户的使用效率,还能减少用户的疲劳感。

移动端界面设计的尺寸要考虑到不同设备的屏幕分辨率。目前市面上的移动设备屏幕分辨率各不相同,如iPhone、iPad、安卓手机等。这就要求我们在设计界面尺寸时,要兼顾不同设备的屏幕分辨率,保证在不同设备上都能正常显示,不会出现界面变形、内容截断等问题。最好的方式是采用自适应布局或响应式设计,即根据设备屏幕的大小,自动调整界面元素的尺寸和布局,以适应不同设备的显示效果。

移动端界面设计的尺寸还要考虑到可点击区域的大小。由于移动设备屏幕较小,用户的手指操作区域也受限。为了提高用户的点击准确性和操作便捷性,我们需要合理调整界面中可点击元素(如按钮、链接等)的大小,使其足够大,方便用户点击。通常,按钮的大小应在44x44像素以上,以保证用户在操作时能够轻松点击,避免误触发。

移动端界面设计的尺寸选择要考虑用户的操作习惯、设备的屏幕分辨率和可点击区域的大小。只有合理选择尺寸,才能设计出符合用户需求、美观大方的移动端界面。

移动端界面设计之尺寸篇 移动端界面设计尺寸

涉移动端设计和开发的同学们,基本都会在尺寸问题上纠结好一阵子才能摸到头绪。那么大家知道移动端网页设计尺寸标准是多少呢?下面一起来看看! 现象 首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是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行,而且每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示,3gs上刚刚好的效果,在4s上就会小到根本看不清字。 在现实中,这两者效果却是一样的。这是因为Retina屏幕把2x2个像素当1个像素使用。比如原本44像素高的顶部导航栏,在Retina屏上用了88个像素的高度来显示。导致界面元素都变成2倍大小,反而和3gs效果一样了。画质却更清晰。 在以前,iOS应用的资源图片中,同一张图通常有两个尺寸。你会看到文件名有的带@2x字样,有的不带。其中不带@2x的用在普通屏上,带@2x的用在Retina屏上。只要图片准备好,iOS会自己判断用哪张,Android道理也一样。 由此可以看出,苹果以普通屏为基准,给Retina屏定义了一个2倍的倍率(iPhone 6plus除外,它达到了3倍)。实际像素除以倍率,就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同,它们的显示效果就是相同的。 Android的解决方法类似,但更复杂一些。因为Android屏幕尺寸实在太多,分辨率高低跨度非常大,不像苹果只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间,给不同范围的设备定义了不同的倍率,来保证显示效果相近。像素密度概念虽然重要,但用不着我们自己算,iOS与Android都帮我们算好了。 如图所示,像素密度在120左右的屏幕归为ldpi,160左右的归为mdpi,以此类推。所有的Android屏幕都找到了自己的位置,并赋予了相应的倍率: ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] xxxhdpi [4倍] 各型号iPhone的倍率比较简单,我们后面会讲到。那么Android手机那么多,具体怎么分?哪些手机是几倍的倍率呢?我们先看一张表,这是友盟2014年10月到2015年03月的数据: 就目前市场状况而言,各种手机的分辨率可以这样粗略判断。虽然不全面,但至少在1年内都还有一定的参考意义: ldpi 如今已绝迹,不用考虑 mdpi [320x480](市场份额不足5%,新手机不会有这种倍率,屏幕通常都特别小) hdpi [480x800、480x854、540x960](早年的低端机,屏幕在3.5英寸档位;如今的低端机,屏幕在4.7-5.0英寸档位) xhdpi [720x1280](早年的中端机,屏幕在4.7-5.0英寸档位;如今的中低端机,屏幕在5.0-5.5英寸档位) xxhdpi [1080x1920](早年的高端机,如今的中高端机,屏幕通常都在5.0英寸以上) xxxhdpi [1440x2560](极少数2K屏手机,比如Google Nexus 6) 自然地,以1倍的mdpi作为基准。像素密度更高或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率近似的显示效果。 不过Android设备的'逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920,它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍,得到逻辑像素为320x533和360x640。很显然,后者更宽更高,能显示更多内容。即使有倍率的存在,各种Android设备的显示效果仍然无法做到完全一致。 单位 不难发现,真正决定显示效果的,是逻辑像素尺寸。iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt,Android的尺寸单位为dp。说实话,两者其实是一回事。 单位之间的换算关系随倍率变化: 1倍:1pt=1dp=1px(mdpi、iPhone 3gs) 1.5倍:1pt=1dp=1.5px(hdpi) 2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6) 3倍:1pt=1dp=3px(xxhdpi、iPhone 6) 4倍:1pt=1dp=4px(xxxhdpi) 单位决定了我们的思考方式。在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时,有的设计师喜欢把画布设为1080x1920,有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。 无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素,我是按照xhdpi做的”这样的话了。 Web怎么办 移动端页面的绝对单位仍然是px,至少代码里这么写,但它的道理也和app一样。由于像素密度是设备本身的固有属性,它会影响到设备中的所有应用,包括浏览器。前端技术可以善加利用设备的像素密度,只需一行代码,浏览器便会使用app的显示方式来渲染页面。根据像素密度,按相应倍率缩放。 以iPhone 5s为例,屏幕的分辨率是640x1136,倍率是2。浏览器会认为屏幕的分辨率是320x568,仍然是基准倍率的尺寸。所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。 实际应用 大家最关心的还是实际运用,画布该怎么设置。我们就iOS、Android、Web三个平台来分别梳理一下。不过在这之前,我要为使用PS进行设计的朋友介绍一个小技巧。 之前我说过,我们要以逻辑像素尺寸来思考界面。体现到设计过程中,就是要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面,把尺寸和文字单位都改成点(Point)。这里的点也就是pt,无论设计iOS、Android还是Web应用,单位都用它。各平台单位名称还是要记住的。这里我们用的只是它的原理,不用在意名称。 要调节倍率,则通过图像大小里的DPI来控制。这个DPI,其实就是PPI,像素密度。有个常识大家都知道,屏幕上的设计DPI设成72,印刷品设计DPI设成300。为什么是这两个数字? 首先说300,这和人眼的分辨能力有关。由于1英寸是固定长度,每1英寸有多少个像素点决定了画质清晰程度。之前说过,这就是像素密度,也就是DPI。DPI达到300以上,其细腻程度就会给人真实感,像真实世界中的物件。相反,DPI只有10的话,在你一个食指指节大小的长度内只有10个像素,这明显就是马赛克了。所以印刷品要设成300,才能保证清晰。 再说72,这有一定的历史原因。最早的图形设计是在mac电脑上进行的,mac本身的显示器分辨率就是72。PS中把图像DPI也设成72,就能保证屏幕上显示的尺寸和打印尺寸相同,便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准,这套规则就这么沿用下来。 现在回到正题,我们怎么通过DPI来调节倍率?既然屏幕本身的分辨率是72,DPI设成72刚好是1倍尺寸,那设成72的两倍就是倍率为2的屏幕了,就这么简单。 下面来看看3个平台各自的画布设置: iPhone iPhone的屏幕尺寸各不相同,我说的是逻辑像素尺寸,这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone,就要选择逻辑像素折中的机型。 从市场占有率数据来看,目前最多的是iPhone5/5s的屏幕。倍率为2,逻辑像素320x568。上升势头最猛,未来有望登上第一的是iPhone 6的屏幕。倍率为2,逻辑像素375x667。 按照这两种尺寸来设计,都是比较主流的做法。可以兼顾短一些的iPhone 4s,大一点的6 plus也不会过于空旷。 不过在切图的时候要注意,由于iPhone 6 plus的3倍图是由2倍图放大而来,所以位图要注意保证清晰。 Android 都说Android碎片化严重,但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了:360x640,就看你设成几倍了。想以xhdpi为准,就把DPI设成72x2=144。想以xxhdpi为准,就把DPI设成72x3=216。 对于那些比较老的低端机,宽度是480px的那批,画面确实会小一些,显示内容会更少。稍微留意一下,重要内容尽量保持在界面中上部分。 这些机型不出一年就会被边缘化,基本淘汰。现在能运转的也是当作功能机在用,软件多了必卡无疑,用户体验无从谈起。不作考虑也是OK的。 Web 手机端网页就没有统一标准了,比较流行的做法是按照iPhone 5的尺寸来设计。倍率2,逻辑像素320x568。 这样的做法比较实在,倍率2的屏幕无论在iOS还是Android方面都是主流,而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平,页面加载速度快。缺点就是在倍率3的设备上看,图片不是特别清晰。 如果追求图片质量,愿意牺牲加载速度,那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸,倍率3,逻辑像素414x736。 总结 移动端的尺寸比PC端复杂,关键就在倍率。但也正因为倍率的存在,把大大小小的屏幕拉回到同一水平线,得以保证一套设计适应各种屏幕。站在这条水平线的角度看,会发现它很好理解。

移动端界面设计之尺寸篇

刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大、文字该用多大才合适、我要做几套界面才可以?什么七七八八的也着实让人有些头疼。1、尺寸及分辨率

iPhone 界面尺寸:320x480、640x960、640x1136

iPad 界面尺寸:1024x768、2048x1536

(以上单位都是像素哦,至于分辨率一般网页UI和移动UI基本上都只要 72 ppi)

在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机尺寸来设计,比较方便预览效果,一般用 640x960 或者 640x1136 的尺寸设计。

P.S. 作图的时候确保都是用形状工具(快捷键:U)

2、界面基本组成元素

iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域

这里取用 640x960 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:

状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40 px

导航栏:显示当前界面的名称,包含相应的功能或者页面间跳转的按钮,其高度为:88 px

主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98 px

内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁的,其高度为:734 px

(等等,为了说明我不是瞎掰的:960-40-88-98=734)iPhone/iPod Touch 第一代、第二代、第三代iPhone4/iPhone4siPhone5/iPhone5C/iPhone5s

至于我们经常说的 iPhone5/5s 的 640x11136 的尺寸,其实就是中间的内容区域高度增加到:910 px

P.S. 在最新的 iOS7 的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变化,尺寸高度也还是没有变化的,只不过大家再设计 iOS7 风格的界面的时候多多注意一下~3、字体大小

iPhone 上的字体英文为: HelveticaNeue 至于中文,Mac下用的是黑体-简,Win下则为华文黑体。

下图是用户体验做过的一个小调查,可以看出用户可接受的文字大小,像素为单位,也就是大家在PS里的文字像素大小。P.S. 多留心下一些大公司的数据研究,你会发现很多你根本没考虑到的问题哦~

其实还有个更简单的方法就是找你觉得好的APP应用,手机截图后放进PS自己对比调节字体大小咯~方法是自己找的,想办法解决问题,自己实践,比别人告诉你印象更深刻不是么~?1、尺寸及分辨率

Android 界面尺寸:480x800、720x1280、1080x1920... (单位:像素)

Android 比 iPhone 的尺寸多了很多套,建议取用 720x1280 这个尺寸,这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。

2、界面基本组成元素

Android 的 APP 界面和 iPhone 的基本相同:状态栏,导航栏、导航栏、主菜单栏以及中间的内容区域。

Android 中我们取用 720x1280 的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸:状态栏高度为:50 px

导航栏高度为:96 px

主菜单栏高度为:96 px

内容区域高度为:1038 px (1280-50-96-96=1038)

Android最近出的手机都几乎去掉了实体键,把功能键移到了屏幕中,当然高度也是和菜单栏一样的:96 px

P.S. 写之前我翻了好多关于 Android 的界面尺寸教程,都没找到像iOS一样具体的规范,或许因为在安卓中这些控件的高度都能用程序自定义~都没有提到具体的尺寸数值,所以就自己找了 Android 的设计规范,尺寸都是自己在PS中量的~~

Android 为了在界面上区别于 iOS ,Android 4.0 开始提出一套 HOLO 的 UI 风格,一些APP的最新版都采用了这一风格。

这一风格最明显的变化就是将下方的主菜单移动到了导航栏这样的方式解决了现在很多手机去除实体按键后在屏幕中显示而出现的双底栏的尴尬情景。3、字体大小

Android 上的字体为: Droid sans fallback ,是谷歌自己的字体,与微软雅黑很像。

同样,用户体验的调查中,可以看出用户可接受的文字相应问题。具体大小,还是那句话,找自己喜欢的APP界面,手机截图后放进PS自己比对调节字体大小(切记,一定要是高清截图哦~)

欢迎微信:chinadesing了解更多

移动端设计尺寸规范

说的是APP的设计标准么?iphone6的尺寸是750X1334px的,安卓手机的话,因为品牌比较多,设计规范也没有具体的定义,只要符合审美美观就好,ios设计标准还是比较严格的,包括状态栏40px和导航栏88px,标签栏98px等都是有严格要求的

移动端屏幕尺寸及分辨率

移动端pm 移动端页面布局弹性布局(100%布局)——拉钩?、天猫首页弹性布局(100%布局)的特点:顶部与底部的bar不管分辨率怎么变,它的?度和位置都不变; 中间每条招聘信息不管分辨率怎么变,招聘公司的图标等信息 都位于条目的左边,薪资都位于右边.等比缩放布局(rem布局)—网易、淘宝首页什么是屏幕尺寸?移动端屏幕尺寸:屏幕对角线的长度,单位是英寸(1英寸=2.54厘米)。常见的尺寸有:2.4,2.8,3.5,3.7,4.2,5.0,5.5,6.0什么是屏幕分辨率?屏幕分辨率:指横纵方向上的像素点数,单位为px,1px=1个像素点。一般以纵向像素*横向像素表示 一个手机的屏幕分辨率。如:1960*1080这里的一个像素是指物理设备的一个像素点。什么是屏幕像素密度?屏幕像素密度:屏幕上每英寸可以显示像素点的数量,单位是ppi(pixels per inch)缩写。iphone3GS和iphone4区别:屏幕尺寸一样,屏幕分辨率相差一倍,屏幕像素密度也相差一倍数。PX:像素,将显示器分成非常细小的方格,每一个方格就是1px。注:(网页重构中使用的px 和屏幕分辨率的px不一定是一样的大小)。实际上像素分为两种:设备像素和逻辑像素( CSS像素)DPR:设备像素比DPR(devicePixelRa嫧o)是默认缩放为100%的情况下,设备像素和CSS像素的比值在早先的移动设备中,并没有DPR的概念。随着技术的发展,移动设备的屏幕像素密度越来越高。从iphone4开始苹果公司推出了所谓的re嫧na视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的PPI(屏幕像素密度)太高,人的视网膜无法分辨出屏幕上的像素点。iphone4的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是DPR = 21.rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。2.为什么web app要使用rem?实现强大的屏幕适配布局(淘宝,腾讯,网易等网站都是rem布局适配)rem能等比例适配所有屏幕,根据变化html的字体大小来控制rem的大小,vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。vmin:vw和vh中较小的那个。vmax:vw和vh中较大的那个。vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持1.remrem是指相对于根元素的字体大小的单位。2.根元素如果根元素是相对设备尺寸自动变换。3.VW视窗宽度,1vw等于视窗宽度的1%。4.VW转换成PX赋值给font‐size例:设备的分辨率为640*1136,逻辑像素为320*568 1VW=3.2pxFont-size:100px;转换成VW font‐size:31.25vw;1rem=31.25vw可一起结合写等比例缩放布局。1.pxpx像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2.emem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 3.remrem是指相对于根元素的字体大小的单位。4.VW视窗宽度,1vw等于视窗宽度的1%。

移动端列表设计

这里我画了几种移动端常见的页面布局和他们的各自特点:1,列表式布局2,陈列式布局3,九宫格式布局4,选项卡式布局5,轮播图式布局6,伸展式布局7,抽屉式布局8,弹出框式布局9,横向拓展式布局10、多面板式布局1,列表式布局特点:内容从上向下排列,导航之间的跳转要回到初始点。优点:1、层次展示清晰2、视觉流线从上向下,浏览体验快捷3、可展示内容较长的菜单或拥有次级文字内容的标题不足:1、导航之间的跳转要回到初始点2、同级内容过多时,用户浏览容易产生疲劳3、排版灵活性不是很高4、只能通过排列顺序、颜色来区分各入口重要程度场景:列表菜单适合用来显示平级菜单,且较长或拥有次级文字内容的标题2,陈列式布局特点:布局比较灵活,设计师可以平均分布这些网络,也可根据内容的重要性不规则分布,相对列表式,其优点在于同样的高度下可放置更多的菜单,更具有流动性,曝布流就属于其中一种。优点:1、直观展现各项内容2、方便浏览经常更新的内容不足:1、不适合展现顶层入口框架2、容易形成界面内容过多,显得杂乱3、设计效果容易呆板场景:适合以图片为主的单一内容浏览型的展示3,九宫格式布局特点:相比陈列馆式,布局比较稳定为一行三列式布局。优点:1、清晰展现各入口2、容易记住各入口位置,方便快速查找不足:1、菜单之间的跳转要回到初始点2、无法向用户介绍大概的功能,只能点击进去才能获知,初始状态不如列表式明朗3、容易形成更深的路径4、不能直接展现入口内容5、不能显示太多入口次级内容场景:适合入口比较多的展示,而且导航之间切换不是很频繁的情况,也就是业务之间相对独立,没有太多的瓜葛。4,选项卡式布局特点:导航一直存在,具有选中态,可快速切换到另一个导航。优点:1、减少界面跳转的层级2、分类位置固定3、清楚当前所在的入口位置3、轻松在各入口间频繁跳转且不会迷失方向4、直接展现最重要入口的内容信息不足:功能入口过多时,该模式显得笨重不实用场景:大部分放在底部,方便用户操作,切换的时候,选中状态高亮显示,有少数放在顶部。适合分类少及其内容同时展示,导航菜单项数量为3-5个;各导航菜单项之间内容/功能有显著差异;用户在各个导航选项之间需要非常频繁的切换操作5,轮播图式布局特点:重点展示一个对象,通过手势滑动按顺序查看更多优点:1、单页面内容整体性强,聚焦度高2、线性的浏览方式有顺畅感、方向感不足:1、受屏幕宽度限制,它可显示的数量较少,需要用户进行主动探索2、由于各页面内容结构相似,容易忽略后面的内容3、不能跳跃性地查看间隔的页面,只能按顺序查看相邻的页面场景:适合数量少,聚焦度高,视觉冲击力强的图片展示6,伸展式布局特点:能在一屏内显示更多的细节,无需页面的跳转优点:1、减少界面跳转的层级2、对分类有整体性的了解3、清楚当前所在的入口位置不足:分类位置不固定,当展开的内容比较多时,跨分类跳转不方便场景:适合分类多及其内容同时展示内容展示的信息多7,抽屉式布局特点:突出核心功能,隐藏其它功能。优点:1、不占用宝贵的屏幕空间,让用户首先能聚焦于内容2、导航的菜单项目不受数量限制,应用的所有信息组织入口都可以加入到抽屉导航中3、扩展性强,配置灵活,一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中不足:1、隐藏框架中其他入口、用户需要一定记忆成本2、对入口交互的功能可见性要求高3、容易与应用内的其他交互模式冲突,比如侧滑手势操作场景:适合功能较多,信息结构较复杂的产品,用户的注意力聚焦在主信息流的浏览上,不用频繁切换“子产品模块”,且扩展性比较好8,弹出框式布局特点:没有跳出感,适合内容比较少和简单操作的呈现。优点:1、在原有界面上进行操作,不必跳出界面,体验比较连贯2、在用户需要的时候才显示(重要提示除外),不主动干扰不足:1、显示的内容有限场景:适合内容较少的显示9,横向拓展式布局特点:节省空间,可使用箭头,圆点或显示不全的图片告诉用户还有更多的内容可查看。优点:1、查看更多内容不必跳出界面,体验连贯。2、节省空间。不足:横屏宽度有限,更多的内容有数量上限制。场景:适合图片或信息组块更多的展示方式。10、多面板式布局特点:能同时呈现比较多的分类及内容。优点:1、减少界面跳转的层级2、对分类有整体性的了解3、分类位置固定4、清楚当前所在的入口位置不足:1、界面比较拥挤场景:适合分类多及其内容同时展示内容展示的信息不多以上都是基本布局,在实际的设计中,我们需要结合具体的数据结构特点选用合适的布局,把不同的布局像搭积木一样组合起来完成复杂的界面设计,要考虑信息结构、重要层次以及数量上的差异,提供最适合的布局,以增加产品的易用性和交互体验。

文章到此结束,如果本次分享的移动端界面设计之尺寸篇 移动端界面设计尺寸的问题解决了您的问题,那么我们由衷的感到高兴!