首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

折叠屏 | 又双叒叕成功适配!折叠屏+携程,旅行体验提高不止一个Level!

自折叠屏手机发布以来,大屏幕新形态下的用户体验就成了业内关注的重点,也被提上了日程。如何让万千用户对App“一见钟情”,用户体验设计师就肩负着这样的任务。...一部设备两个状态,这是传统手机做不到的,面对与传统手机的天然差异,因此折叠屏手机在设计变化上,会针对大屏需重新调整布局结构,在设计重点上也优先对华为折叠屏手机进行设计升级。...单以酒店为例,商务用户会更关注酒店的品质、位置、交通等;旅游用户则会关注周边的娱乐、交通、环境等。如何利用新技术优势,给用户提供更好的产品和旅行体验,成为携程需要考虑的问题之一。...左侧一条街、宫格、次入口位置固定,右侧特价、各类卡片、信息流滑动。针对折叠屏手机,UX设计师将可视化元素进行重新分组,各组块位置挪移,最终形成均衡的排版。...优点:利用折叠屏大屏幕优势,为用户显示更多信息。 2.旅游页面 设计方式:挪移布局 在旅游页面用户可根据自己的需求选择旅游形式。

1.2K20

如何让一套代码完美适配各种屏幕?

2021市场移动设备分辨率统计可以看到主流的分辨率有10多种,当不做适配时,一套代码在不同设备上的效果偏大、偏小、截断以及留白严重,那一套代码如何完美的展示在不同的设备上,可以看下面的一些适配方案。...2.1.2、图片适配1.9图.9.png图片本质上还是png图片,相对于普通png图来说,.9图可以让图片在指定的位置拉伸和在指定的位置显示内容且不会失真;2.见2.1.4分辨率限定符;2.1.3、依据产品设计适配所谓产品设计适配...,指的是产品流程在不同设备上有不同的展示方式,例如手机与Pad的区别,在手机设备上,一般来说具体Item列表是一个页面,点击每个Item会跳转至新的详情页;而在宽度>高度的Pad上,为了防止页面空白浪费...,一般会要求屏幕左侧为Item列表,右侧即详情页,item与详情页会同时出现在用户的视觉内,如下图图片关于这种类型的设计,其实郭霖《第一行代码》给出了一个方案,我在这里抛砖引玉一下,给出基本思路。...;layout-xlarge:值得是提供给超大屏幕设备的资源;在上面所提出的情景下,Pad即指的大屏幕,手机一般可看作为中等屏幕设备,为了在大屏幕下显示双页模式,我们可以在layout-large和layout

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

    AI加持的竖屏沉浸播放新体验

    窗口尺寸自适应有两个点需要介绍,第一是相同的影片相同的窗口尺寸,但分辨率不同该如何展示;第二个点是相同的影片分辨率、但不同的手机窗口尺寸该如何展示。 ?...以当前视频为例,它的分辨率是一定的,我们来看一下两个不同的手机是如何展示的。...上图展现的是同样的手机尺寸,针对不同的视频分辨率是如何处理的。...总体的原则是保证窗口的纵横比在原始图片中,以聚焦中心点为中心截取一块最大的区域,同时保证做到画面内容不拉伸。 ?...为了实现完整字幕的显示,我们在被截断的字幕做了一个字幕擦除,然后再将完整的字幕回写出来。图中是一个被截断的图片,字幕的区域被放大擦除,我们将完整的原始字幕回写,同时对字体大小也进行了调整。 ?

    60720

    AI加持的竖屏沉浸播放新体验

    窗口尺寸自适应有两个点需要介绍,第一是相同的影片相同的窗口尺寸,但分辨率不同该如何展示;第二个点是相同的影片分辨率、但不同的手机窗口尺寸该如何展示。...以当前视频为例,它的分辨率是一定的,我们来看一下两个不同的手机是如何展示的。...上图展现的是同样的手机尺寸,针对不同的视频分辨率是如何处理的。...总体的原则是保证窗口的纵横比在原始图片中,以聚焦中心点为中心截取一块最大的区域,同时保证做到画面内容不拉伸。...为了实现完整字幕的显示,我们在被截断的字幕做了一个字幕擦除,然后再将完整的字幕回写出来。图中是一个被截断的图片,字幕的区域被放大擦除,我们将完整的原始字幕回写,同时对字体大小也进行了调整。

    84160

    极简风格的演讲型幻灯片设计

    当页面信息量过大时,观众可能会分散注意力,低头玩手机,甚至……离席而去。 毕竟,在演讲时,你的目的就是让听众聆听并认同你的思想啊。...图1 简短的文字 ? 图2 较多的文字 ? 图3 《柴静调查:穹顶之下》) 尤其是在大屏幕上放映时,效果更加震感。所以像发布会这样的大型场合,也会有许多全图型幻灯片的身影。如图4。...图5 图片应有适当留白 但是,全图型幻灯片也是极其考验制作者功底的,图6便是反例,同样是在图片上写字,差距却很大。 ?...图7 《柴静调查:穹顶之下》:下方的白色文字是字幕,不属于幻灯片 ?...使用高清的图片 在非特定情况下(如需要突出某些细节而刻意的模糊),使用的图片一定要高清。使用不高清的图片的效果不如不使用图片!如图14即为反例,闹钟的图片过于模糊,会给人不安、压抑的感觉。 ?

    1.3K40

    Google Pixel 2拍照黑科技:单摄搞定背景虚化+内部潜伏神秘芯片

    △ 没有经过人像模式处理(左)经过处理后(右)的同一张HDR+照片 Pixel 2上的人像模式到底是如何加工图片的?这还得分四步走。 第一步:生成HDR+图片 人像模式始于一张清晰的图片。...在保持局部对比度、合理减少整体对比度的同时,还增加了这些区域里的阴影。 即使在昏暗的灯光下,此阶段最终生成的图片仍是一幅动态范围高、噪音低、细节清晰的图片。...它的原理很容易理解。 想象一下,如果强行将手机的后置摄像头的镜头分成两半,那么镜头左侧的视角和右侧略有不同。...这相当于将图像传感器芯片上的每个像素分割成两个较小的并排像素,并分别从芯片上读取它们,原理如图所示: △ 在Pixel 2的后置摄像头上,每个像素的右侧都会通过镜头左侧来观察,每个像素的左侧都会通过镜头右侧观察...小视频 关于Pixel 2摄像头的情况,还可以看看上面这段来自YouTube的视频+繁体字幕(字幕的细调没搞定……就当个参考看吧),其中主要讲述了如下几个重点内容。

    2.1K40

    活动大屏幕上线,我又过了次主持瘾!

    # 个性化大屏幕背景,根据主题随心换 活动大屏幕的背景图片可以从乐享提供的模板中选择,也可以根据活动主题自定义上传背景,多样丰富的风格可解锁,我们提前挑选了适合当天年中会的大屏幕背景~ ?...-留言上墙支持匿名留言 开启【留言上墙】功能后,活动大屏幕将轮播员工的留言内容,管理员可以随时删除留言。管理员还可以在后台配置是否允许员工【匿名留言】。 ? >>手机端<< ?...当然,除了年会,在我们内测的这段时间里,还有很多客户发掘了大屏幕的其他玩法,听听大家怎么说—— 培训学习课堂 某大型股份制银行用乐享活动大屏幕做了一次Python的培训学习课堂,他们称乐享的现场签到+乐享直播...--- 多场景多功能的活动大屏幕应用 助力企业举办培训、节日、年会等活动 赶快体验起来~ PS:现在活动大屏幕还在内测中,目前仅支持1000人以下的现场活动 需要的话请扫下方二维码联系客服开通哦!...「考试」应用上线,给你的培训加点料! ? ? 点击下方“阅读原文”填写问卷~

    1.3K30

    本站同款宁静致远(Quietlee)自媒体博客主题模板,夜间模式及强大的SEO效果-ZBlog主题

    往期更新(节选): -- 优化侧栏作者信息在部分浏览器出现颜色重叠的问题。 -- 后台新增商品售价接口,文章管理,新建,右侧有主题售价接口。 -- 优化轮播转动方式,“垂直切换”改为“横向切换”。...优化底部文字列表模块,将调用的第一篇文章改为图片形式,如图: 大版本升级,更新主题后先设置主题内容,尤其是调用的文章及热门天数,都设置完成后在去编辑文章(生成缓存),否则会出现,导致网站无法打开,如果有...新增多图模式下可以选择单图显示(文章图片大于三张显示单图模式,编辑文章右侧有单图模式开关)。 底部信息(备案号上面位置)增加接口,可自定义内容。 修改文章文字链接颜色。...公告不用说了,按照格式修改内容即可,然后在模块管理-主题自带模块-公告,自定拖拽到对应侧栏即可。 搜索栏右侧推荐:对应位置在导航栏,logo最右侧,修改链接和名称即可。...注意:右侧开关针对幻灯片轮播的。 首页文章列表导航标签设置:此处设置文章列表导航标签,文章列表导航标签对应图1(为空则不显示),滚动字母对应图2。注意:右侧开关针对右侧滚动字幕。

    3.2K20

    2018年AI圈八大造假事件:罗生门此起彼伏,比娱乐圈精彩

    △ 参加《对话》节目的索菲亚 | 图片来自微博@机器人索菲亚 大家印象中的对答如流的机器人索菲亚,在问世近3年后终于承认,机器人的外壳只是一个“传声筒”。...据参赛选手透露,比赛过程中,刘某衬衫胸口处的口袋里放着手机,手机摄像头刚好面对棋盘。在某场对局中,刘某一直下的又好又快,随后手机被裁判要求收起来,此后下子又慢又差,仿佛从职业选手变成了业余四段选手。...当天晚上,中国围棋协会发布通知,禁止参赛棋手在比赛中将手机放置在衬衣口袋外、桌面等明处,违者第一次口头警告,第二次直接判负。 随后,刘某选择弃赛。...这个会场的大屏幕被分为了三个区域,中间是分会场的名字和介绍,两边则是演讲嘉宾的PPT,PPT下方有字幕,左侧是中文,右侧是英文,两侧的字幕上方都带着讯飞听见的logo,让人觉得这些中英文都是讯飞的作品。...商用机器人外壳品牌Alyosha的骗局,也不了了之了。 回顾2018年的几大造假事件,有意造假也好,无意为止也罢,无论如何,技术本身,实属无罪。 2019年,愿AI应用满载正能量。 — 完 —

    59240

    android系统如何自适应屏幕大小

    如果android:anyDensity="false" 应用程序支持不同密度,系统自动缩放图片尺寸和这个图片的坐标。具体解释一下系统是如何自动缩放资源的。...例如我们在hdpi,mdpi,ldpi文件夹下拥有同一种资源,那么应用也不会自动地去相应文件夹下寻找资源,这种情况都是出现在高密度,以及低密度的手机上,比如说一部240×320像素的手机, 如果设置...2.)对于你在声明不支持的大屏幕,而这个屏幕尺寸是larger的话,系统同样使用尺寸为("normal")和密度为("medium)显示, 不过会出现一层黑色的背景。...进行描述,这样可以保证在屏幕上面展示的时候有合适的大小 2)为不同屏幕密度的手机,提供不同的位图资源,可以使得界面清晰无缩放。...7.2 自动定义像素尺寸和位置 如果程序不支持多种精度屏幕,平台会自动定义像素绝对位置和尺寸值等,这样就能保证元素能和精度160 的屏幕上一样能显示出同样尺寸的效果。

    5.3K10

    Demoo使用秘籍,比好用更好用 - 腾讯ISUX

    通过上传平面稿件,用手势或触点热区的方式把界面关系连接起来,加入连接转场特效,输出一份仿真APP的、可体验操作的设计方案,满足在电脑、会议投影现场及手机上体验操作。...涉及技巧:图片排序 Demoo支持我们对图片进行拖动排序整理,在标题栏区域鼠标停留,即可发现鼠标指针变为十字型,此时可拖动页面。...设置页面滑动手势 涉及技巧:双击手势区域,快速设置手势热点 大屏幕手机越来越泛滥的时候,手势滑动成为一个很常见的操作,Demoo也可以模拟手势操作哦!...点击屏幕右侧的设置,上传好app图标和闪屏之后,用手机QQ扫二维码打开页面,然后用分享在safari中打开链接,在safari中设置分享到屏幕,于是,大功告成,你可以从桌面打开这个app了!...最后,听说很多试用过的朋友都在询问,如何在Demoo中模拟浮层的效果,Demoo其实更擅长的是页面之间的跳转,那么如何模拟呢?这里给大家一个小技巧。

    1.6K40

    Mac简单好用的镜像投屏软件:JustStream PRO

    您可以将视频流式传输到电视并在大屏幕上欣赏,无需任何电线或电缆或任何其他硬件。 镜像投屏软件JustStream PRO :https://www.macz.com/mac/8649.html?...id=ODE3NDU1Jl8mMjcuMTg2LjEyNS42MQ%3D%3D图片功能** 支持多种视频格式 **JustStream 几乎可以处理任何媒体文件类型,包括流行的 AVI、FLV、MKV、...** 支持字幕 **无论您的视频附带的字幕是外部的还是嵌入式的 - JustStream 具有对多种字幕格式的高级支持。...** 在您方便时暂停/恢复 **使用 JustStream,您可以随时从停止播放的位置恢复您的视频或音频。...** JustStream 是谨慎的 **该应用程序被整齐地隐藏在菜单栏中,只有在您需要时才能轻松访问。

    1.6K40

    首页自定义,你想知道的都在这里!

    2、 在编辑框内自定义区块的标题和所展示的内容,如果是多个图片,根据要放入的图片,创建一个表格,并依次在表格当时放入图片(图片大小最好保持一致),每添加一张图片,调整一下表格边框,尽量贴着图片。...4、 全部调整好以后,选择表格边框,设置边框为0,点击右下方“保存”按钮,完成首页展示的设置。...电脑端首页自定义设置 添加新区块步骤(以下图2*2区块为例) 1、在“首页排版”点击“添加新区块”,选择需要添加的左/右侧区块 2、点击工具栏中的插入表格,选择2*2表格 3、在每个单元格中插入希望展示的图片...,如左图所示 4、选中一张图片点击“表格”>“单元格”>“单元格属性”,在水平对齐和垂直对齐一栏选择“居中”,另外三张图做相同操作 5、选中表格点击“表格属性”,在将边框数值改为0,隐藏表格 6、图片排版完成后...,给对应的图片添加你希望跳转到的链接即可 建议图片尺寸 前面数字为宽度,后面数字为高度 宽度大家可以按照下面的建议设置,高度可以根据需要更改~ 电脑端: 手机端: 今天的教程就到这里啦,你学会了吗!

    1.4K40

    从零开始搭建Java开发环境第三篇:最新版IDEA常用配置指南,打造你的最酷IDE

    设置外观和字体大小 1、IDEA默认配置 版本号:2019.02 [在这里插入图片描述] 默认设置(Other Settings) IDEA不像Eclipse那样可以在一个窗口中打开多个项目,IDEA每次打开一个新的项目都需要开一个新的窗口或者覆盖掉当前窗口...然后在左上角的搜索框中搜maven,就能看到如下图所示配置了。 [在这里插入图片描述] 2、字体和主题 默认主题暗色系。...[在这里插入图片描述] 6、显示内存使用量 [在这里插入图片描述] 7、显示多行Tab 当我们打开的标签页多了的时候,默认的会隐藏在右侧,当我们需要的时候在右侧找到后再打开。...IDEA是支持多行显示的,这样在大屏幕的显示器上也不用总去点击右侧的去找刚才打开过的文件了(其实通过Ctril+E也可以找到刚才打开过的文件)。...具体开关位置在:File-->Settings-->Editor-->General-->Editor Tabs。 下图位置1的把勾选去掉就可以了。位置2是设置最多展示多少个Tab。

    42700

    实践 | 为 Trackr app 适配大屏幕设备

    在大屏幕设备上,弹出菜单是一个小触控区域,它处于不太方便操作的位置。并且底部应用栏也被过度拉伸了。 △ 左侧: 手机上的导航展示。右侧: 平板上的导航展示。...△ 在大屏幕上的导航轨道 虽然是考虑到较大屏幕的设备而进行的此项更改,但由于腾出了更多的纵向空间来显示任务列表,横向模式显示的手机也能够因此受益。...在大屏幕上,UI 元素要么被拉伸,要么挤在一边,导致屏幕内容显得很不平衡。 △ 在手机上这样显示很自然,但在大屏幕上的空间利用率却不太理想。...新建任务界面也存在这个问题 (事实上,新建任务和编辑任务界面在我们的导航图中本质上是相同的目的页面)。 △ 左侧: 手机上的编辑任务界面。右侧: 平板上的编辑任务界面。...我们展示了通过添加导航轨道和使用 SlidingPaneLayout,是如何让 Trackr 应用不仅看起来更好,同时还显著改善了可用性和创造了在手机上无法感受的体验的。

    1.7K20

    Adobe Premiere 2023最新版 -pr2023激活版2023永久版本下载安装教程

    在您的手机上拍摄和编辑,知识兔然后从您的设备或桌面分享到社交媒体。知识兔或者在 Premiere Pro 中打开 Rush 文件,以更进一步。...知识兔pr2023中文版怎么抠图1、软件中导入所有需要的素材,并拖动到右侧时间轴上;2、在左下角面板上打开“效果”面板;知识兔3、搜索“超级键”效果,并拖动到需要的素材上;4、在超级键效果中,知识兔选择吸管工具吸取需要抠图的底色...知识兔>> 软件提取地址软件亮点查1、基本图形面板知识兔【找编辑字幕、形状以及在Premiere Pro和After Effects中创建的动态图形模板知识兔所需的所有控件。...知识兔2、文字工具【使用类似于Photoshop和After Effects中工具的文字工具在知识兔节目监视器中从头开始创建字幕。...10、更多功能【经过增知识兔强的4K 60p性能、对Apple Metal的改进支持、知识兔库面板内Stock素材的视频预览等。图片

    2K30

    我结婚了,我要用什么做个邀请函呢?【iVX无代码YYDS 06】

    你现在先点击右侧对象树中的前台,在前台下添加一个页面。 小媛:怎么添加呢? 1_bit:在左侧点击页面就可以添加了。 小媛:点了,添加后的右侧对象树中多了一个页面。...1_bit:横幅可以帮助你添加的东西固定在屏幕中的一个位置。 小媛:这有什么用呢?...1_bit:有时候有些人的手机屏幕不一样,这样就会导致你添加的图片、文章在iPhone上在中部,而在小米上在下部,使用横幅就可以永远固定在中部了,不管那些手机屏幕多长多宽。 小媛:原来如此,教我吧。...1_bit:加下来你首先在对象树中选择页面,然后在左侧组件栏中选择一个横幅元素,就是这个。 小媛:添加了,在页面中对了一块,好难看。 1_bit:没事,这个时候我们可以先更改他的位置。...在对象树中选中这个横幅,然后在属性面板中将整体布局改为中心。 小媛:这个时候这个横幅到中间了耶。

    33140

    Android开发笔记(一百七十三)给安装包APK文件瘦身

    如何减少打包后的APK文件大小,也就是所谓的APK瘦身,这涉及到很多技术手段,最常用的主要有四块:去除冗余功能、精简无用资源、减少图片大小、过滤无用的so文件,分别介绍如下: 一、去除冗余功能 每当开发者创建新的...、实例名、变量名替换为简短且无意义的名称,例如Student类的名称可能改为a,方法getName的名称可能改为b等等; App的Java代码经过压缩和混淆之后,打包生成的APK文件会随之变小。...由于手机屏幕的尺寸有限,原始质量的高清图片与有损压缩后的图片在视觉上没有什么差别,因此适当压缩图片质量也是减小APK体积的一个重要途径。...单击选项窗口下方的确定按钮,回到前一步骤的文件保存窗口,单击窗口右侧的保存按钮,完成jpg图片的压缩操作。 ?...单击窗口右上角的预设下拉框,并选中最后一项“PNG-8”,再单击窗口下方的储存按钮,完成png图片的压缩操作。

    79210

    ps切图必知必会

    +css+javascript)实现静态页面的布局(无论是pc端网站,还是手机网站还是web app都是这么一个流程) 如何使用PS工具软件对文件进行操作 清除参考线(视图–>清除参考线) 添加参考线(...如何从一张图片中切图,保存正确格式 缩放(ctrl+放大),ctrl-缩小,或者按住Alt键不放,上下滚动鼠标滚轮,可进行放大缩小 手抓(左侧工具栏可调出),快捷键:按住空格键不放,上下拖动鼠标,可实现图片位置移动...–>存储图片为web格式 因微信图片大小上传问题,可点击下方阅读原文进行查看 注意切出来图保存的格式,用电脑默认的图片查看器打不开,虽然可以直接保存,然后在底下选择图片的存储格式,那样比较麻烦,直接保存为...,右侧的图层,选中图标,复制所对应的图层到新建的那个画布当中去,然后依次的将图标进行有序的排放(注意的是将所有的图标图层一次性的复制过去)–ctrl+Alt+T(更改图标在图层的x,y轴的坐标) 因微信图片大小上传问题...,可以合并抽取代码,比如说这里的背景图,减少冗余的代码 gif操作图如下所示: 因微信图片大小上传问题,可点击下方阅读原文进行查看 总结 本篇主要是围绕着ps切图,抠图,从ps切图与前端的关系开始,如何使用

    3K20

    JustStream PRO for Mac(投屏软件)

    您可以将视频流式传输到电视并在大屏幕上欣赏,无需任何电线或电缆或任何其他硬件。...JustStream PRO for Mac图片JustStream 功能一览支持多种视频格式JustStream 几乎可以处理任何媒体文件类型,包括流行的 AVI、FLV、MKV、3GP、MP4、MKV...支持字幕无论您的视频附带的字幕是外部的还是嵌入式的 - JustStream 具有对多种字幕格式的高级支持。...流式传输到 Chromecast 和 Chromecast Ultra 时,您还可以更改字幕字体、大小和颜色。流式播放列表创建您可以不间断地流式传输的播放列表,无论它们有多大。...您可以拥有数百个 MP3 文件或数百个短视频 - JustStream 可让您将它们组织在播放列表中并在电视上流式传输,以供您无限娱乐。

    87730
    领券