昆明高端网站建设

云南网页设计公司:交互设计之界面设计尺寸详解

2019-07-16 11:17:21 239

云南网页设计公司

基本概念



Android常用参数

屏幕尺寸:分为四种通用尺寸:小型,普通型,大型,超大型。


屏幕密度:分为四种通用尺寸:低(120 ppi),中(160 ppi),高(240 ppi)和超高(320 ppi)


Pixel=DP *(DPI/160)例如,在240 dpi屏幕上,1DP是相同的。


小巧的设计(屏幕尺寸小于3英寸),

正常设计(屏幕尺寸小于英寸),

大型设计(4英寸到7英寸之间),

Layout-xlarge(7-10英寸之间)


典型设计尺寸


•320dp:普通手机屏幕(240X320,320× 480,480X800)


•480dp:中间平板电脑,如(480× 800)


•600dp:7英寸平板电脑(600× 1024)


•720dp:10英寸平板电脑(720× 1280,800× 1280)



元素大小:推荐的设计橡皮擦尺寸为720X1280,分辨率仍为72ppi(me/inch)


导航条,工具栏等的尺寸没有明确的规则。在Android规范中。但根据48dp原则,以及一些传统Android应用程序的屏幕截图分析,


总结大小要求:状态栏高度:50 px导航栏,动作栏高度:96px=48dp x 2主菜单栏高度:96 px


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


常见的IOS参数


屏幕尺寸:


云南网页设计公司 IPhone接口尺寸:320× 480,640× 960,640× 1136


iPad界面的大小:1024× 768,2048× 1536


(之前的单位都是像素。)关于分辨率,一般用户界面和移动用户界面基本上是72 ppi)


元素大小:


iPhone应用程序的界面通常由四个元素组成:状态栏,导航栏,主菜单栏和中心的内容区域。


设计元素大小640× 960:


状态栏:我们经常说的信号,操作员,电源等区域,显示手机的状态。其度数高为:40 px


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


主菜单栏:类似于页面的主菜单,它提供了整个应用程序的分类内容的快速跳转,具有高度:98 px


内容区域:显示应用程序提供的相应内容。设计在整个应用程序中更频繁地更改,其度数高为:734 px=960-40-88-98


上述尺寸适用于iPhone 4,4S,iPhone 5/5s的640× 11136尺寸,


实际上,中间高度的内容区域增加到:910 px,其他维度与之前的相同。


关于网页设计界面大小的建议


测试客户用户超过30W台,测试数据如下(数据来自网络):


Web端:安全分辨率为1024 x 768像素。建议的分辨率为1280 x 800 px


在Windows XP的常见分辨率1024× 768中,我们删除了任务栏,浏览器菜单栏以及状态栏的剩余页面,在第一个屏幕高的平均值为584之后。


在Windows 7的通用分辨率1440× 900中,在第一个屏幕高的平均值为716之后,我们删除了任务栏,浏览器菜单栏和状态栏的其余页面。


在设计方面,选择合适的尺寸,例如屏幕的正常尺寸和平均密度(选择的尺寸取决于要调整的硬件,建议参考目前的主流)硬件分辨率),然后制作尺寸,超密度高小,大,超大和低,高,上下。

云南网页设计公司

您有昆明网站建设建站需求?即刻联系我们吧!

联系我们
联系电话 400-6065-301

微信咨询 寒总监