展开

关键词

Android App的设计问题

Adroid的设计: 屏幕 指实际的物理,为屏幕对角线的测量。 为了简单起见,Android把实际屏幕分为四个广义的大小:小,正常,大,特大。 于设计来说,选取一个合适的作为正常大小和中等屏幕密度(的选取依据打算适配的硬件,建议参考现主流硬件分辨率),然后向下和向上 做小、大、特大和低、高、超高的与密度。 典的设计 • 320dp:一个普通的手机屏幕(240X320,320×480,480X800) • 480dp:一个中间平板电脑像(480×800) • 600dp:7平板电脑(600×1024 ) • 720dp:10平板电脑(720×1280,800×1280) 类: xxhdpi xhdpi hdpi mdpi ldpi ICON 144*144 96*96 72*72 48*48 36 设备 分辨率 设备 分辨率 三星Galaxy S3 4.8英 720 × 1280 三星Galaxy S4 5英 1080 × 1920 三星Galaxy S5 5.1英 1080

35680

盒模的实际

首先绘画三个div,设置大小50px,背景色为gold 盒子的真实 .box01{width:50px;height: 50px;background-color: gold;} .box02{width 给2和3的正方形增加黑色边框,宽度为50pxborder: 50px solid #000; 盒子的真实 .box01{width:50px;height: 50px;background-color 给正方形3增加内边距50pxpadding: 50px 盒子的真实 .box01{width:50px;height: 50px;background-color: gold;} .box02{width 通过上面的页面得出结论:盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实计算公式如下: 盒子宽度 = width + padding左右 + border左右盒子高度 = height + padding上下 + border上下练习通过盒子模理,制作下面的盒子:?

23340
  • 广告
    关闭

    云产品限时秒杀

    云服务器1核2G首年38元,还有多款热门云产品满足您的上云需求

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    生 JS 和 jQuery 中的

    8540

    iOS开发之WidgetKit

    当需要更多细节时,Widget 会直接带到 App 中的适当位置。Widget 有三种不同的(小号、中号和大号),可以对 Widget 进行个性化定制。 .supportedFamilies:支持不同,示意图如下。?三种内容不论是哪种配置,都需要提供以下内容。Entry渲染 Widget 所需的数据模,需要遵守TimelineEntry协议。 struct EntryView: View { var entry: Provider.Entry 数据模 @Environment(.widgetFamily) var family 环境变量 @ViewBuilder var body: some View { switch family { case .systemSmall: 小 case .systemMedium: 中 default: 大 } }}运行先运行 App再运行 Widget交互只能点击,点击会打开 App

    98032

    iOS开发之WidgetKit补充

    当需要查看 App 的更多细节时,Widget 会直接跳转到 App 中的适当位置。Widget 有三种不同的(小号、中号和大号),可以对 Widget 进行个性化定制。 .supportedFamilies:设置支持的不同,可以支持 3 种,示意图如下。?不同.jpg内容不论是哪种配置,都需要提供以下内容。 struct EntryView: View { var entry: Provider.Entry 数据模 @Environment(.widgetFamily) var family 环境变量 @ViewBuilder var body: some View { switch family { case .systemSmall: 小 case .systemMedium: 中 default: 大 } }} Widget 能且只能使用 SwiftUI 构建界面。

    20130

    用 Python 更改图片类

    2、源码:# encoding: utf-8# author: walker# date: 2014-05-15# summary: 更改图片大小 import osfrom PIL import          filein:  输入图片        fileout: 输出图片        width: 输出图片宽度        height:输出图片高度        type:输出图片类

    18310

    [ISUX译]iOS 9 人机界面指南(五):图标与图形设计 - 腾讯ISUX

    创建一个大app icon,用于显示在App Store上。虽然让你的用户能轻易认出你的icon这点很重要,但相比之前这些,这个的icon允许你添加更多精巧的细节。 这个app icon显示在App Store上时将不再额外添加任何视觉效果。 比如在iPad app中,iOS会用大icon来生成大的文档图标。 5.2.1 文档图标(Document Icons)如果你的iOS app会创建自定义类的文件,而你希望用户一眼就能看出这些文件是由你的app生成的。 拉伸指的是在不考虑图片始比例的情况下放大图片。拉伸图片的性能较高,但对于多像素图片来说,会出现失真现象。平铺指的是按照图片的多次复制图片,直到填充目标区域。

    35831

    【Vue.js】Vue.js组件库Element的基础用法

    - 当视口在 sm 时隐藏hidden-sm-and-down - 当视口在 sm 及以下时隐藏hidden-sm-and-up - 当视口在 sm 及以上时隐藏hidden-md-only - 当视口在 md 时隐藏hidden-md-and-down - 当视口在 md 及以下时隐藏hidden-md-and-up - 当视口在 md 及以上时隐藏hidden-lg-only - 当视口在 lg 时隐藏hidden-lg-and-down - 当视口在 lg 及以下时隐藏hidden-lg-and-up - 当视口在 lg 及以上时隐藏hidden-xl-only 加载中不同Button 组件提供除了默认值以外的三种,可以在不同场景下选择合适的按钮。 ? 额外的:medium、small、mini,通过设置size属性来配置它们。 默认按钮 中等按钮 小按钮 超小按钮 默认按钮 中等按钮 小按钮 超小按钮 Attributes 参数 说明 类 可选值 默认值 size string medium small mini

    50840

    【总结】移动应用界面设计的设置及规范

    因是他们不会因为ppi的变化而变化,在相同物理和不同ppi下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。 但根据48dp则,以及一些主流的android应用的截图分析,总结一下要求:状态栏高度:50 px导航栏、操作栏高度:96 px=48dp x 2主菜单栏高度:96 px内容区域高度:1038 px 比如gmail app的星标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ,图形实际区域为 12 x 12 dp 。? 3、基本元素的设置iPhone的APP界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏以及中间的内容区域。 【附】参考资料1、设计师如何为 Android 应用标注2、Android端App设计经验小分享3、移动设备的界面设计4、 dp、sp、px傻傻分不清楚5、像素终极作战指南

    18640

    react-native-easy-app 详解与使用之(四)屏幕适配

    react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少 通过设置一个屏幕参考,重置XView、XText、XImage的,实现自动多屏适配可能有人觉得,RN的适配一般不都是根据目标屏幕的对当前UI进行一定比例的缩放么,直接定义一个获取缩放比例的方法不就可以了么 UI多屏幕适配RN平台默认的就是不带单位的,使用的是设备独立像素,但由于手机的也越来越多,比如说相同,像素密不同结果导致UI的物理也不同,所以通常来说,我们们需要根据屏幕的对UI的进行一定比例的缩放 但UI的属性太多了,每次都调用相应的比例方法去计算,不仅看着代码不雅观而且代码量也明显增多,那有没有更好的办法呢? ,比如说外层容器组件(有的时候会设置一个定值),这时候有两种办法:改用系统生组件设置X系列组件属性 raw = {true},设置了此属性,当前UI就不会做任何缩放所以当大家需要对app的用UI做多屏适配的情况下

    42110

    深入详解iOS适配技术

    最近,iPhone家族又诞生一款iPhoneSE,鉴于这款iPhoneSE的屏幕和iPhone5S的一模一样——同样是4.0英,广大iOS开发者可算是松了口气,不然iOS的屏幕真的是越来越让人眼花缭乱 在iPhone3gs时代,手机的屏幕有且只有一种,也就是3.5英。开发app的时候,根本不用考虑同一个视图在不同的屏幕上显示的问题。 autoresizing.png(一)AutoresizingAutoresizing是早期iOS设备机很少、APP界面布局相对简单的背景下产生的一种屏幕适配技术。 早期的iOS设备机很少、屏幕单一、APP界面相对简单,屏幕适配并没有现在这么复杂,在当时这种背景下,产生了Autoresizing。 UIView有一个autoresizingMask属性,可以通过该属性来约束父子视图之前的位置关系,并且UIView还有一个BOOL类的autoresizesSubviews属性,默认为YES,代表父控件会跟随子控件的变化而变化

    5.9K70

    Docker 镜像优化:减小镜像

    引 言  随着我们对Docker 应用的持续使用,如果不加注意,那么镜像的就会变得越来越大。很多人在使用Docker 时会发现,团队定制化的Docker 镜像都至少有1GB 大。 接下来,我们将在研究Docker 镜像工作理的过程中,学习如何优化这些镜像层。链 式 指 令  Docker 镜像变大的一个因是很多对编译或运行无关的指令被引入到镜像中。 记录显示,这里并不存在“负”的镜像层。于是,Dockerfile 中每一个指令要么保持镜像不变,要么增加它的。同时,每一步还会引入新的元数据信息,使得整体在增大。  现在每一个独立层的已经足够小了。由于独立镜像层的被减小,于是整个镜像的也随之减小。让我们来确认一下它们的,操作如下:  ?? 接下来,我们将展示这个Docker 镜像的是如何变大的,操作如下所示。  1.首先,编译这个Docker 镜像并记录它的,操作如下:  ?

    1.5K20

    将你的网站打造成一个iOS Web App

    前言iOS上的一个Web App(下图中的「念」)和Native App(生应用)在外观上看起来基本上一样,但是其使用的技术是HTML,CSS,Javascript,而不是生应用所使用的Objective-C 如果你的网站也要可以在Ipad上访问,那么你还要针对不同的设备准备不同的icon,你可以通过sizes属性来指定icon的: 如果你不指定size属性,那么默认为57x57,我们可以看到ipad 所需icon的是72x72,retina屏幕的iphone所需的是114x114,retina屏幕的ipad所需的是144x144。 如果没有当前设备所需的icon,那么iOS将会选用icon中所有大于此设备所需的最小的一个。如果没有比设备所需大的icon,那么选用最大的那个icon。 ,你也可以给Web App加上一个启动界面,很简单: 在iPhone和iPod touch上,大小必须为320 x 460。

    84660

    羊皮书APP(Android版)开发系列(一)Icon图片生成神器

    app icon图片生成神器可以帮助我们节省时间,提高工作效率。        工欲善其事,必先利其器,我们要开发一款app,首先我们肯定要知道app的名字,其次我们就要准备app的logo图片,而这个logo图片又有多种,包括Android和IOS,需要十多种不同大小的icon MakeAppIcon是一款可以在线生成各种不同icon的工具,点击(https:makeappicon.com)打开网址,上传始icon图片,几分钟后,输入邮箱,即可将生成的所有的icon发送到自己的邮箱 文地址:http:blog.csdn.netwjwj1203articledetails50824913

    22730

    开发跨设备的鸿蒙(HarmonyOS) App

    现在的智能设备种类越来越多,而且这些智能设备的屏幕、分辨率都不同,例如,比较常见的智能设备有手机、平板电脑、车载电脑、智能电视、智能手表等。 尽管这些设备都有屏幕,但它们的屏幕千差万别,有的屏幕小,有的屏幕大,有的是纵向的屏幕,有的是横向的屏幕,有的带触摸功能,有的不带触摸功能,甚至有的设备的屏幕是圆形(如智能手表),这就给开发App 所以我推荐的方案是让一个App同时适用于不同的智能设备。基本的理是在App运行时会自动检测当前的设备,然后会执行与特定设备相关的代码,使用与特定设备相关的布局和资源。 不过由于TV和Wearable的屏幕相差太多,所以布局通常会采用完全不同的样式。在HarmonyOS中,可以使用Java语言动态创建组件的方式实现布局,也可以使用布局文件。 图1其中getDeviceType方法返回的值就是App当前运行设备的类。如果运行在TV上,值为tv,如果运行在智能手表上,值为wearable。

    20720

    Android开发笔记(八十一)屏幕规格适配

    SCREENLAYOUT_SIZE_NORMAL : 正常 SCREENLAYOUT_SIZE_LARGE : 大 SCREENLAYOUT_SIZE_XLARGE : 超大 public false; } }适配不同屏幕 不同设备的屏幕有大有小,适配不同大小屏幕的方法也有三种: 1、在布局文件中,视图或控件的宽或高使用match_parent和wrap_content,或者设置 layout_weight权重,由app自身在onMeasure测量方法中自行计算大小。 测量的介绍参见《Android开发笔记(十二)测量与下拉刷新》。 2、在代码中获得当前屏幕的分辨率,根据不同分辨率做不同处理。 3、参照drawable的处理方式,不同的图片放在不同的drawable目录下,详见《Android开发笔记(七)初识Drawable》。

    53930

    MOO音乐的Flutter实战总结之内存治理(下)

    不设置缓存引擎会以图的作为解码,也就是 2058x1800,解码内存达到了 18.8MB,如图二所示。 图二 这里的缓存只设置了 cacheWidth,cacheHeight 会自动根据图片比例计算得出。 设置了缓存,图片解码内存占用只有 5.2MB,如图三所示。 图三 那么,缓存该如何取值呢? 相对屏幕物理取值,图片 和 显示逻辑 * dpr(设备像素比) 取较小者即可。 屏幕逻辑像素和物理像素,以 iPhone 为参考如下: 设计切图若基于 750 作为 @1x 基准,如果不设置缓存,内存将会是设置了缓存的 3 倍 到 4 倍。 解决方案是改造 ImageCache 类,加一个存储类_assetsCache,存储 asset 类图片缓存 ,需要的话也可以支持 LRU,指定缓存大小阈值。

    20630

    App项目实战之路(四):UI篇

    我在上一篇文章介绍了几款我认为比较不错的设计工具之后,提到了Sketch更适合做UI设计,而不是设计。 然后,有一哥们就不服了,回复说那些都是垃圾软件,用Sketch + FlintoPrinciple熟练的话做比磨刀还快,关键还能出效果图。 选中之后,在界面右边Inspector面板会列举出很多可供选择的,你可根据需要选定你想设计的,如下图所示。我的界面Artboard就是选了iPhone 6那个。 切图时,主要是图标,需要导出1x、1.5x、2x、3x、4x五个的图片,五个主要是为了更好地适配Android,而适配iOS只用2x和3x两个即可。 至于为什么需要适配这么多,就需要了解Android和iOS的一些UI的基础知识了,关于这个,下面这篇文章已经讲得很清楚了:手机APP UI设计基础知识Material Design我一直很喜欢

    49230

    Android设计 - 图标设计概述(Iconography)

    但是你可以在所有的设备上通过为每个图标提供多 来为你的图标提供更好的视觉效果。当你的app运行时,安卓检查设备屏幕的特性并且加载适当的指定密度的你app中的资源文件。 因为你将为每个图标实现多个以支持多个不同的密度,下面的设计指南使用 dp 作为图标的 计量单位 ,它是以中等密度(MDPI)屏幕作为 像素的基础。? 例如,考虑到启动图标的的规范是48x48dp。 启动图标 启动图标是在主屏幕或者所有的app屏幕时,你的app的可视化的代表。由于用户可以更换主屏幕的墙纸,要确保你的启动图标在不同类的背景下清晰可见。??? 和缩放 手机上的action bar 图标应该是32x32dp焦点区和 完整的资源,32x32 dp 视觉矩形区,24x24 dp样式 象形的,扁平的,不要太详细, 使用平滑的曲线或者尖锐的图形

    18000

    一线UI设计师对APP切图换算指导

    工作后,很多同学还是会问到app切图的问题。今天分享android和iOS的换算分析,希望能帮到工作中的你。 1.在Android的显示模式为mdpi的时候,1dp等于1px。 文字图标间距 = (@x33)*1.5 = px; xhdpi文字图标间距 = (@x33)*2 = px; xxdpi文字图标间距= (@x33)*2.25 = px;5.给开发的时候注意按着dpi模式把标注改成对应的

    514140

    相关产品

    • 移动推送 TPNS

      移动推送 TPNS

      腾讯移动推送 TPNS(原信鸽)PUSH 服务为您提供安全、稳定、快速、高抵达的APP推送服务,接入方便快捷,消息推送通道稳定可靠,可按不同场景进行推送,支持文本、角标、铃声、大图片多种形式,在线到达率 99%。独有可自选的双 Service 联合保活服务,能有效提升消息抵达率,促进用户活跃。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券