精华内容
下载资源
问答
  • 手机页面尺寸设置的一些方法HTML5参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的...

    手机页面尺寸设置的一些方法HTML5

    参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

    一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。

    其中: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例

    minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable -

    用户是否可以手动缩放c

    二、关于meta的详细介绍请参考

    展开全文
  • 尤其是Android,你会听到很多种分辨率:480x800,480x854,540x960,720x1280,1080x1920,而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了:640x960,640x1136,750x1334,1242x2208。不要被这些尺寸吓倒。实际上大...
  • Android 引导页大全

    2018-11-09 15:32:11
    Android 引导页大全 介绍了Android的APP应用中最常用的APP启动引导页,常见的4种引导项目方式:splash,viewpage,viewflipper,scrollview [注意:本资源来自网络,如有侵权,请联系我删除,谢谢。]
  • axure原型图手机界面尺寸

    千次阅读 2020-02-01 23:12:42
    使用axure原型图手机界面尺寸制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。若要解释清楚这个问题需要的篇幅比较长,请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再...

    使用axure原型图手机界面尺寸制作的原型,如果你没有设置自适应视图的话它是不会自动适应任何设备的。若要解释清楚这个问题需要的篇幅比较长,请大家自行参考 Point/Pixel/PPI/DPI 的意思和它们之间的关系。这里不再赘述,直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure 中设置大小即可,设计完毕后在生成 HT ML时设置 手机 /移动设备 中勾选包含视图接口(
    include Viewport tag ),并进行配置axure原型图手机界面尺寸,生成 HT ML后再到相应的移动设备中浏览就正常了。

    例如:iPhone4 320*480

               iPhone5 320*568

               iPhone6 375*667

               iPhone 6 Plus 414*736

               Samsung Galaxy S4 360*640

    axure原型图手机界面尺寸
    标题

    如何创建APP页面

    元件库,创建一个适合自己的元件库,然后载入到Axure。然后每新建一个APP页面的时候,axure原型图手机界面尺寸从左边元件库中拖动到右边,然后直接把位置改成(0,0)。延伸一下,创建元件库的时候尽量把这几个元件都命名一下,比如命名为页面框架,上导航,左按钮,右按钮。这样以后需要修改的时候直接全局搜索即可。

    使用母版创建APP页面:可以使用母板的方式来制作,但是设计新APP原型的时候就没办法反复调用了,但是不太推荐。

    有些页面需要考虑到重要内容得让用户第一眼就能看到axure原型图手机界面尺寸,比如商品详情页面就需要保证订单在任何屏幕上都应该显示在第一屏幕。延伸阅读了解更多所以从横向标尺那里拉出一条线,有了拉的箭头你在往下拉到667的地方。如果你的APP比较特殊,所有的页面都需要用到一屏线。axure原型图手机界面尺寸那就建一个”固定位置”类型的母版,画一条横线,位置(0,667),宽度400左右。然后“添加到页面-所有页面”即可。

    兼顾主流屏幕

    虽然你的原型375x667只是iPhone6/6s/7的逻辑分辨率,axure原型图手机界面尺寸但是我们可以在原型中把主流屏幕的分辨率体现出来,如果需要特殊适配的话,单独说明即可。比如Android主流分辨率是720x1280,那原型尺寸是360x640。建一个”固定位置”类型的母版,模板内容是一个360x640的页面,然后批量复制到所有APP页面的底层即可。

    关于颜色

    线框图的黑白灰之纯美,有利于专心布局界面,axure原型图手机界面尺寸而不用在意界面的颜色搭配。

    黑白灰颜色常用的数值是:

    文字黑色#282828

    文字深灰色#656565

    文字浅灰色#98989

    边框浅灰色#C3C3C3

    背景淡灰色#f2f2f2

    按钮背景纯白色#ffffff

    综上所述

    界面尺寸布局:满屏尺寸750x1334px

    高度电量条高度40px,导航栏高度88px,标签栏高度98px;

    axure原型图手机界面尺寸各区域图标大小导航栏图标44px,标签栏图标50px;

    各区域文字大小电量条文字22px,导航栏-文字32px,标签栏字20px;

    常用的文字大小:32px,30px,28px,26px,24px,22px,20px;

    常用的颜色:背景浅灰色#f2f2f2,文字深黑色#323232,axure原型图手机界面尺寸边框色深灰#CCCCCC;

    常用可点击区域的高度:88px;

    单行文字的背景框的高度:88px,双行则为:176px,三行则为:264px;

    常用间距:亲密距离:20px;疏远距离:30px,其它距离:10px,44px等;

    按钮和文本框,原型图做成直角的axure原型图手机界面尺寸,圆角半径是多少,由Ui来设计;

    这种情况,需要修改原型。单个页面的逻辑流程图或用户学习使用时间,超过其它页面平均数的axure原型图手机界面尺寸3倍以上;

    展开全文
  • Android 界面设计尺寸规范

    万次阅读 2016-02-03 09:14:47
    状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px主菜单栏:类似于页面的主菜单,提供整个应用的...

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

    • 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px
    • 导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px
    • 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px
    • 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px
    [下图为了说明我不是瞎掰的:960-40-88-98=734]


    一、尺寸及分辨率

    Android界面尺寸:480*800、720*1280、1080*1920。[单位:像素]

     

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

     

    二、界面基本组成元素

    Android的app界面和iPhone的基本相同:状态栏、导航栏、主菜单、内容区域。

    Android中我们取用的720*1280的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。


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

     

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

     

    Android为了在界面上区别于iOS,Android4.0开始提出的一套HOLO的UI风格一些app的最新版本都采用了这一风格,这一风格最明显的变化就是将下方的主菜单移到了导航栏下面,这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。


    三、字体大小

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


    展开全文
  • 先说一下在XML中定义动画的类型,分别有:alpha 渐变透明度动画效果scale 渐变尺寸伸缩动画效果translate 画面转换位置移动动画效果rotate 画面转移旋转动画效果在XML中定义动画上面的动画类型可以随意组合,达到想...

    先说一下在XML中定义动画的类型,分别有:

    alpha 渐变透明度动画效果

    scale 渐变尺寸伸缩动画效果

    translate 画面转换位置移动动画效果

    rotate 画面转移旋转动画效果

    在XML中定义动画上面的动画类型可以随意组合,达到想要的效果,下面是代码片段:

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "1000"

    android:fromAlpha="0.0"

    android:toAlpha="1.0" />

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "0"

    android:pivotX="100%"

    android:pivotY="0"

    android:toDegrees="360"

    android:duration = "1000"/>

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "0"

    android:fromYDelta="0"

    android:toXDelta="-100%"

    android:toYDelta="0"

    android:duration = "500"/>

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "@android:anim/decelerate_interpolator"

    android:fromXScale="0.0"

    android:toXScale="1.5"

    android:fromYScale="0.0"

    android:toYScale="1.5"

    android:pivotX="50%"

    android:pivotY="50%"

    android:startOffset="0"

    android:duration="10000"

    android:repeatCount="1"

    android:repeatMode="reverse"

    />

    第一种跳转页面的方法,在XML中定义两个动画,一个是页面进入的动画,一个是页面退出动画,实现方式如下:

    写一个进入动画 alpha_in

    "1000"

    android:fromAlpha="0.0"

    android:toAlpha="1.0" />

    alpha_out

    "1000"

    android:fromAlpha="1.0"

    android:toAlpha="0.0" />

    在java代码中实现方式:

    startActivity(new Intent(A.this, B.class)); overridePendingTransition(R.anim.alpha_into,R.anim.alpha_out);

    这种实现能在跳转的时候实现动画,当返回页面时候就没有动画了。

    第二种跳转页面的方法,在XML中定义四个,

    第一个是打开页面的动画 translate_into 相当于A跳转B,B的动画效果

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "100%"

    android:fromYDelta="0"

    android:toXDelta="0"

    android:toYDelta="0"

    android:duration = "500"

    />

    第二个XML translate_out 相当于A跳转B,A的动画效果

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "0"

    android:fromYDelta="0"

    android:toXDelta="-100%"

    android:toYDelta="0"

    android:duration = "500"/>

    第三个XML translate_close_into 相当于A跳转B后,从B返回到A时候A的动画效果

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "-100%"

    android:fromYDelta="0"

    android:toXDelta="0"

    android:toYDelta="0"

    android:duration = "500"/>

    第四个XML translate_close_out相当于A跳转B后,从B返回到A时候B的动画效果

    "1.0" encoding="utf-8"?>

    "http://schemas.android.com/apk/res/android">

    "0"

    android:fromYDelta="0"

    android:toXDelta="100%"

    android:toYDelta="0"

    android:duration = "500"/>

    在styles中定义:

    最后异步在AndroidManifest中在需要跳转的连个Activity设置 android:theme=”@style/Anim_fade”

    android:name=".A"

    android:theme="@style/Anim_fade"/>

    android:name=".B"

    android:theme="@style/Anim_fade"/>

    在java代码中正常调用跳转也买年就行了,设置Theme在页面返回也有退出的动画效果

    展开全文
  • Android界面尺寸规范

    万次阅读 2018-04-30 18:36:07
    这样的手机屏幕尺寸是:5寸 即屏幕对角线是5英寸。 计算方法:1280平方+720平方=2156800,结果再开平方=1468.6048,再÷5,=293.72点每英寸。 在1280*720px的分辨率下,1dp=2px 所有的尺寸具体请参照:D...
  • 作者的回答在评论中,但是没有人看到评论,我在这里复制:Bitmap bmap2 = BitmapFactory.decodeStream(getResources().openRawResource(R.drawable.paper));DisplayMetrics metrics = new DisplayMetrics();...
  • 部分android手机中webview内嵌h5页面 编辑工具HBuild X 经调试发现同一台手机,同样的代码 var clientWidth = document.documentElement.clientWidth; var bodyWidth=$('body').width(); clientWidth是不一样的,...
  • 双击这个画板的名字,这个名字可以是中等尺寸,下面我们再创建一个小尺寸设备上的网站应用布局,按一下 a,选择创建一个手机尺寸的画板。 修改一下画板的名字,可以是 小尺寸。esc,再按一下 v,打开选择工具,选中...
  • 一、APP启动画面全尺寸所有图片必须为png格式如上传iOS AppStore,则必须提供1024px*1024px的图标。或企业内部分发,则需提供57px*57px和512px*512px的图标1. IPhoneScreen960 640 screen.png --out ./ios/...
  • android 启动页 icon 尺寸

    千次阅读 2019-06-13 10:29:57
    启动页 720*1280 icon M DPI ( Medium Density Screen, 160 DPI ),其图标大小为 48 x 48 px H DPI ( High Density Screen, 240 DPI ),其图标大小为 72 x 72 px XH DPI ( Extra-high density screen, 320 DPI ),...
  • Android日常(04) 启动页面广告页面尺寸适配及等待时长设置写在前面的话问题出现的场景处理方式结束语 写在前面的话 最近在修改一个启动页,和启动页广告的需求 问题出现的场景 原来没有设置启动页内容,所以每次...
  • 废话不多说,希望大家耐心看完后,不用再纠结于尺寸相关的东西了~IOS篇1、尺寸及分辨率iPhone 界面尺寸:320x480、640x960、640x1136iPad 界面尺寸:1024x768、2048x1536(以上单位都是像素哦,至于分辨率一般网页UI....
  • 安卓4.2系统的某手机中,使用方法一得到了正确的屏幕尺寸值,而使用方法二和三得到的值全部为零。原因不祥。其中方法三中的display.getWidth()和display.getHeight()已被弃用。 DisplayMetrics dm = new ...
  • 刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现?本篇将结合iOS和android官方的设计规范、搜集的资料...
  • 手机站开发遇到一些问题,设计页面使用多大的尺寸?为此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系统的实际显示页面的宽度,都是360px。手机型号竖屏宽度IPhone 5320pxIPhone 6375pxIPhone 6 Plus414...
  • html5+app、移动端、mui+app尺寸适配、屏幕适配、屏幕自适应插件,解决不同手机尺寸手机适配问题
  • https://www.cnblogs.com/fang51/p/4286481.html移动端尺寸繁多,包括IOS和安卓,尺寸多达十余种,所以移动页面尺寸的适配一直是前端和设计的头疼。今天来总结一下当前市场上的一些移动端尺寸,方便设计师和前端去...
  • 我希望我的应用能够在任何Android设备上正确显示,而不管屏幕尺寸,屏幕密度或屏幕高宽比如何.我想支持API 8之前的Android设备.我可以为纵向,横向和xlarge屏幕创建单独的布局,但除此之外,我不想为不同的密度或屏幕尺寸...
  • 手机APP UI设计尺寸基础知识

    千次阅读 2020-04-03 17:14:47
    初涉移动端设计和开发的同学们,基本都会...尤其是Android,你会听到很多种分辨 率:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且还有传说中的2K屏 不要被这些尺寸吓倒。实际上大部分的app和移动端网页,...
  • 1、首先打开Android Studio,Tools—>AVD Manager打开模拟器管理界面。 2、选择Create Virtual Device。 3、左侧是模拟器的类型(电视、平板、手机等等),这里我们正常选择Phone,中间是手机尺寸手机尺寸选...
  • iOS和Android 界面设计尺寸规范 P迪 | 2014-07-25 9:57:27 | 产品设计 3,974 摘要:刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大,文字该用多大才合适,我要做几套界面才可以?...
  • 在Window XP常见分辨率1024×768下我们除掉...于设计来说,选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超...
  • 在做手机截屏功能的时候发现,全面屏截图和调用系统的截图不一致经排查,是获取手机屏幕高度的值不对getResources().getDisplayMetrics().heightPixels 在三星S8上返回的值不对,没包含系统状态栏Stack Overflow上...
  • 手机屏幕尺寸大全

    千次阅读 2020-06-01 11:36:58
    在进行前端页面开发时,有时候需要根据手机进行适配,为避免每次查找麻烦,贴一个手机屏幕尺寸大全, 数据来源:优设网-屏幕尺寸大全 iPhone 11 Pro iOS 5.8 458 19 : 9 375 x 812 1125 x 2436 ...
  • 经常遇到JSP网页需要适配手机设备的尺寸问题解决:在JSP加入content属性值 :...可视区域的缩放级别实现了适应手机页面,主要是设置了width为device-width,device-width为使用设备的宽度。REF:网页布局的原则一....
  • 一、android篇1、android分辨率Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi ...
  • 【移动端】手机界面的设计尺寸

    千次阅读 2021-03-05 11:37:37
    从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。 iPhone的分辨率 设备 逻辑分辨率(point)(pt) 物理分辨率(pixel)(px) 屏幕尺寸 缩放因子(scale) 像素密度 PPI 比例...
  • 移动端H5页面的设计稿尺寸大小规范

    千次阅读 2021-01-14 14:38:58
    那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。请注意:(以下所有讨论内容和规范均将viewport设定为content...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,030
精华内容 7,612
关键字:

安卓手机页面尺寸