首页
学习
活动
专区
圈层
工具
发布

再见Metro,Windows 10通用应用设计趋势分析 - 腾讯ISUX

可以看出Windows 10的应用标准已经与之前的样式发生了非常大的变化,笔者认为可以归纳如下几点: · 自适应布局(响应式设计)成为通用应用核心结构 除了要应对通用应用在桌面模式下缩小放大的窗口变化,...未来搭载Windows 10的设备尺寸也会多种多样,所以,灵活且高效的自适应布局理所当然是最符合通用应用跨平台、窗口化的特点的,在上面的图中我们可以看到Xbox和Skype都改为了多栏式布局。...虽然汉堡菜单已经被广泛应用在网站、IOS及Android系统中,但是由于其易用性还存在很大争议(特别是在Phone上),所以在正式版发布前,汉堡菜单会不会成为微软的最终解决方案还不得而知。 ?...,微软开始鼓励并给予开发者更大的设计自由,未来Windows 10将逐渐和IOS及Android平台的扁平化风格趋于统一。...针对不同的设备特点,同一个通用应用运行在手机和平板上的区别 最后,根据以上趋势分析,再补充两个小Tips: 1.开发者们可以利用这次Windows 10设计风格向其他平台靠拢的机会,更方便的从IOS及Android

1.3K40

再不迁移到Material Design Components 就out啦

但是,升级后,您可能会注意到某些控件颜色和其他属性的某些意外更改。 ? 在上面的示例中,按钮发生了变化、文本和图标的颜色发生了变化。FAB 现在变成了蓝绿色,并且文本字段看起来完全不同。不用担心。...下面我们通过一些常见的迁移方案来了解一下这些问题 文字栏位改变 在 MDC 中,文字字段默认样式发生了改变。改进版本是经过用户调查研究的。 ? 我们建议您使用这个版本,来提高可用性和可配置项性。...下面这几种情况应该考虑 在布局中写的控件如果有对应的 MDC 控件的话,直接使用 MDC 控件 任何的风格,默认风格和默认风格属性应该改变成 MDC 版本 在编程中或者自定义类的父级类使用的任何控件都应该为...由于MDC-Android,AppCompat和框架之间共享历史记录,因此,颜色属性集包括以下内容: 框架中已适当命名的现有属性(例如android:colorBackground) AppCompat...在你的布局中。

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

    智能下拉刷新框架-SmartRefreshLayout

    风格演示 ? ? ? ? ? ? ?...、滑动事件处理、参数设定等等 RefreshContent 对不同内容的统一封装,包括判断是否可滚动、回弹判断、智能识别 RefreshHeader 下拉头部的实现和显示 RefreshFooter 上拉底部的实现和显示...特点:固定在前面,尺寸充满整个布局 SmartRefreshLayout 的Header和Footer都有多种变换方式,适应不同风格的 Header 和 Footer,下面是不同变换方式Header的Demo...智能主要体现 SmartRefreshLayout 对未知布局的自动识别上,这样可以让我们更高效的实现我们所需的功能,也可以实现一些非寻常的功能。...支持自动刷新、自动上拉加载(自动检测列表滚动到底部,而不用手动上拉). 支持通用的刷新监听器 OnRefreshListener 和更详细的滚动监听 OnMultiPurposeListener.

    4.3K50

    android之风格与主题(style与theme)

    较好的应用风格和主题,可以实现美观而统一的界面,这就犹如Web开发中的CSS。 Styles和Themes都是资源,存放在res/values 文件夹下。 什么是Style,什么是Theme?...Style:是一个包含一种或者多种格式化属性的集合,我们可以将其用为一个单位用在布局XML单个元素当中。...在后边我们可以用这个名字来应用风格,而父类属性标识了当前风格是继承于哪个风格。...在后边我们可以用这个名字来应用风格,而父类属性标识了当前风格是继承于哪个风格。...不同的是通过在Android Manifest中定义的和元素将主题添加到整个程序或者某个 Activity,但是主题是不能应用在某一个单独的View里。

    26130

    2021 GMTC北京站 - 大前端工程提效分享与总结

    标准化 业务建模 业务模型标准,分为页面布局结构、模块顺序(布局结构的组合),卡片样式、元素字段以及色彩风格等,与PM以及UIUE团队一起探讨得出的结论。 ?...针对页面结构描述,抽象出多种布局结构,网格布局、横滑布局、流式布局、1拖N布局等7种布局。...由于场景的不同,C端页面总是重展示,轻交互,B端项目中,交互逻辑比较复杂,所以我们采取的方案是生成可二次开发的代码,不是一站式生成,将前端开发人员在项目流程中去除。...需求和背景 在手百首页,需要展示大量的卡片内容,同时需要支持native以及h5的方式,在开发的过程中,PM和UI总会提出一些基于页面样式以及布局的不同想法,产研配合效率低下。 现在的开发流程 ?...而本场分享,是真正的改变了前端的开发模式,通过本场分享我也只能对MWA整体细节有个粗略的了解,好在我们都是MWA的受益者,作为公司内部的体系架构,可以有更多的机会去尝试学习。 - END -

    1.4K20

    android的消息通知栏

    (网上看了下,全面介绍的文章不多,所以就萌生了写这篇的念头,随便当作回顾笔记。...(4)方法:.setLights(intledARGB ,intledOnMS ,intledOffMS ) 功能:android支持三色灯提醒,这个方法就是设置不同场景下的不同颜色的灯。...详情区域根据用途可有多种风格: 1.NotificationCompat.BigPictureStyle 大图片风格:详情区域包含一个256dp高度的位图 2.NotificationCompat.BigTextStyle...5.低版本中,自定义布局中的字体颜色看不清 如右图: ? 解决方案: 由于2.3及之前版本,背景设是白色的那我们定义字体颜色为系统预设的颜色: ?...解决方法:此方法在4.0及以后版本才有用,如果为早期版本:需要自定义通知布局,其中包含ProgressBar视图 7.自定义布局的时候,不同版本方法不一样。

    4.6K80

    半小时带你入门 Flutter

    所有的布局使用一种语言,聚集在一处,Flutter很容易提供高级工具,使布局更简单 Dart对于IOS、Android、Web FE来说,都还比较友好。...img 图片来源:简书 作者:AWeiLoveAndroidAWeiLoveAndroid Everything is Widget 有一种说法认为函数式语言和命令式语言的不同在于命令式语言是给计算机下达指令而函数式语言是向计算机描述逻辑...当State的状态改变时,能重新构建本节点以及孩子的Widget树来进行UI变化。注意:如果需要主动改变State的状态,需要通过setState()方法进行触发,单纯改变数据是不会引发UI改变的。...,咱再来些demo吧~ 布局Widget img 自己写的后,发现跟官网实现方式不同,代码地址 具体实现可以参照官网教程 这里不再赘述,下面我们说下对于布局的理解和感受以及常用布局widget。...所以Widget布局其实也就是Row和Column用的最多,然后由于Flutter一切皆为组件的理念,可能会需要用到别的类css布局的Widget,譬如:Container。其实咱就理解为块元素吧!

    1.9K20

    AndroidMainifest标签说明2——<activity>

    (这通常不应该发生) “keyboard” 键盘类型改变时 “keyboardHidden” 键盘可訪问性发生了变化——比如,用户显示硬件键盘。 “navigation” 导航类型改变。...(这通常不应该发生) “screenLayout” 屏幕布局改变了——这可能是因为不同的显示被激活。...“screenSize” 当前可用的屏幕尺寸已经改变了 “smallestScreenSize” 物理屏幕尺寸已经改变了 “layoutDirection” 布局的方向发生了变化。...假设Activity已经存在则onNewIntent()一个新的Intent而不是建一个新的activity。...android:taskAffinity 活动有关联的任务栈。 android:theme 总体风格的资源引用定义一个主题活动。 这个自己主动设置活动的上下文使用这一主题。

    2K00

    Attr、Style和Theme详解

    ,不同于Style作用于个一个单独View,而它是作用于Activity上或是整个应用。...Attr的定义 我们先举一个框架中的源码例子,用来介绍下Android中是如何定义一个Attr的,比如以下创建一个简单的TextView布局 其中layout_width对应到框架中的attr信息如下...首先我们自定义了一个View命名为DogView,然后创建一个布局文件中加入该DogView视图,并让该View使用SchnauzerStyle风格。...defStyleAttr和defStyleRes功能一样,指定的资源形式不同,前者表示一个默认的指向一个style风格的attr属性,而后者你可以直接传入一个style风格的id。...android:textColorSecondary" android:text="?attr/dogName"/> 获得一个Attr的方法,不同于普通资源使用@符号获得的方式,而是需要使用?

    2.2K90

    Flutter从入门到能寄几玩儿

    所有的布局使用一种语言,聚集在一处,Flutter很容易提供高级工具,使布局更简单 Dart对于IOS、Android、Web FE来说,都还比较友好。...img 图片来源:简书 作者:AWeiLoveAndroidAWeiLoveAndroid Everything is Widget 有一种说法认为函数式语言和命令式语言的不同在于命令式语言是给计算机下达指令而函数式语言是向计算机描述逻辑...当State的状态改变时,能重新构建本节点以及孩子的Widget树来进行UI变化。注意:如果需要主动改变State的状态,需要通过setState()方法进行触发,单纯改变数据是不会引发UI改变的。...img 自己写的后,发现跟官网实现方式不同,代码地址 具体实现可以参照官网教程 这里不再赘述,下面我们说下对于布局的理解和感受以及常用布局widget。...所以Widget布局其实也就是Row和Column用的最多,然后由于Flutter一切皆为组件的理念,可能会需要用到别的类css布局的Widget,譬如:Container。其实咱就理解为块元素吧!

    1.7K10

    番外篇-Flutter初识三问

    讲讲State 在Android中,您可以通过直接对view进行改变来更新视图。然而,在Flutter中Widget是不可变的,不会直接更新,而必须使用Widget的状态。...例如:在Android中,如果您只想将一个logo使用ImageView展示出来。logo在运行时不会发生改变,在Flutter中可以通过StatelessWidget实现。...记住官方的一个规则:如果一个widget发生了变化(用户与它交互),它就是有状态的。...答案是否定的。肯定还有别的方式,本期不做介绍,后面用到的时候再补充。 Scaffold是什么 Scaffold实现了Materia design(材料设计)风格的布局结构。...Scaffold widget提供了实现:appBar、floatingActionBar等材料设计风格控件的API。

    66130

    十大令人振奋的移动端APP设计趋势

    滑动操作是直觉式的操作,毫无疑问。我们惯于通过连续的触摸来认知外在的事物。在屏幕上滑动可以在现实生活中找到多种多样的对应操作,刷卡,滑动门闩等等等等,经验的转嫁也是如此的直接而自然。...由于可穿戴设备是新兴领域,现阶段针对它们的设计尤其需要注意应用的可用性、用户反馈,并且针对需求即时更新。...4、分层布局 扁平化和拟物化本身是就是不同风格倾向下的产物,两者趋近于两个极端,但是并非非黑即白的彻底的对立,我们之前所说的扁平化2.0和此刻所提的分层 布局,就是两者之间的“灰色地带”。...尽管近年来的数字美学自然而然地催生了扁平化风潮,但是在过去几年的摸索中,我们了解了复杂纹理和高度拟物的过度装饰 性,同样也意识到了阴影和小幅度渐变即使在扁平化的设计中,一样很重要。...随着移动端的高度进化和Typekit等服务 的出现,字体清晰度的提升,让网页和APP的排版布局拥有了更多的可能性,设计师可以借由不同的字体和多样的图片搭配出更有表现力的设计,即使是在移动端 设计上,这种趋势也越发明显

    1K40

    Android 样式系统 | 主题背景属性

    | 主题背景和样式 Android 样式系统 | 常见的主题背景属性 这会让我们通过创建更少的布局或样式,以隔离主题背景中的修改。...合格的 Colors 文件 您可以通过在不同的配置中添加不同的值来改变颜色 (例如,在 res/values/colors.xml 中和在 res/values-night/colors.xml 中的备选值里均定义...由于主题背景可以被覆盖或者改变,因此这间接表示: 您不需要创建其他布局或样式就可以更改某些颜色——您可以在相同的布局中使用不同的主题背景。 始终使用? 在某些情况下,您或许不想按照主题背景更改颜色。...如果您的原始颜色发生了变化,则只需要在一个地方进行更新,无需调整所有已更新的地方。 虽然此技术很有用,但仍有一些注意事项: 如果指定的颜色也具有 alpha 值,则 alpha 会被合并。...android:alpha 命名空间,而绝不使用 app:alpha 命名空间)。

    1.7K20

    自动化测试之视觉感知测试

    1,Web 界面布局回归测试 对于 Web 网页界面布局测试一般都是由人工手动对比设计图和产品界面。而人工对比测试存在两个问题:a,速度慢;b,人的不确定性。...而被测浏览器的数量越多(现在的主流浏览器包括 IE, Chrome, Firefox, Safari 等,并且每种浏览器还有很多种版本),测试数量和时间也会成倍增长。...由于移动设备拥有各种各样的分辨率,因此设计人员也开始考虑针对不同的分辨率设计应用界面,响应式设计(Responsive Web Design)也孕育而生。...由于它底层使用的是 Selenium 作为驱动,所以他支持多种浏览器,比如 IE,Chrome,Firefox 等。...在最新的 Selenium 中加入了对 Android 和 iOS 的支持,不过现在还不是很稳定,所以 Viff 还支持 Android 和 iOS 上的浏览器测试。

    82310

    绝对想尝试的创意 Android 库,你关注了吗?| 码云周刊第 43 期

    项目简介: 正如名字所说,SmartRefreshLayout 是一个“聪明”或者“智能”的下拉刷新布局,由于它的“智能”,它不只是支持所有的 View,还支持多层嵌套的视图结构。...也吸取了现在流行的各种刷新布局的优点,包括谷歌官方的 SwipeRefreshLayout,其他第三方的 TwinklingRefreshLayout 、Ultra-Pull-To-Refresh。...支持设多种滑动方式:平移、拉伸、背后固定、顶层固定、全屏。 支持所有可滚动视图的越界回弹。...另外,本项目基于 Android 源码环境开发,需要在 Android 源码环境下编译,由于本人不会 PhotoShop,所以测试截图中有一个 menu 按键图标与其他图标风格不符,请谅解。...项目名称: Google inbox 风格控件 ?

    1.3K90

    React Native组件(二)View组件解析

    View组件对应着多个平台的视图,比如Android的View以及iOS的UIView。 由于View组件的属性非常多,这里主要介绍一些常用的属性。...2.style属性 style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。...除了可以设置边框的风格,还可以用定义边框的颜色和边框的圆角。...从两个图的效果可以看出,rotate和skew的区别就是:rotate在旋转的同时,不会改变Text组件的形态,而skew则随着倾斜角度的改变,Text组件的形态也会发生相应的变化。...在Android平台上,这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的:视图不必每次都重新绘制,显示列表也不需要重新执行,纹理可以被重用于不同的参数。

    2.7K60

    【专业技术】浏览器的渲染引擎Blink

    需要注意的是Blink的代码必须符合Blink编码风格指南所规定的编码风格。 那么问题来了:我怎么把Blink移植到我的平台? ?...Blink运行在沙盒里面的一个抽象的平台上,因此很少有操作系统的特定依赖。这种设计具有两种后果: (1)Blink不能单独运行 (2)移植到其他平台发生在不同的层。...而不是添加特定于平台的代码,Blink,你应该使用Chromium’s content layer,它提供了这个虚拟平台上的多种操作系统,包括Windows,Linux,Mac OS X的,和Android...除了使网络平台更快速,更安全,提高网络平台也意味着增加新的功能和删除冗余代码。为了实现我们的使命,我们需要在一个透明的,负责任的和兼容的方式中小心改变面向网络的API。...用现代的,更快的tcmalloc在所有的Mac Chromium 实验增量或并行布局 现在,有且只有一个JavaScript引擎移除ScriptValue / ScriptState抽象修复内存泄漏 删除自定义

    1.4K130

    原来Flutter代码是这样运行在原生系统的!快来了解Flutter标准模板,感受原生系统中Flutter的魅力!

    Dart只要理解基本编程概念(比如,类型、变量、函数和面向对象),并具备一定前端基础(了解View是什么、页面基本布局等基础),就可以和我一起完成计数器示例工程分析 Android Studio创建Flutter...2 工程代码 Flutter自带的应用模板,即计数器示例,对初学者是极好入门范例。从基础的组件、布局到手势的监听,再到状态的改变,Flutter最核心思想在这60余行代码。...虽然MyHomePage类也是Widget,但与MyApp类不同,它没有build方法返回Widget,而是多个createState方法返回_MyHomePageState对象,而build方法包含在这...有原生Android和iOS框架开发经验的同学,可能更习惯命令式UI编程风格:手动创建UI组件,在需要更改UI时调用其方法修改视觉属性。...而Flutter采用声明式UI设计,只需描述当前UI状态(即State),不同UI状态的视觉变更由Flutter在底层完成。

    84920

    Android 5.X 新特性详解

    1Android 5.X UI设计初步 Android 5.X系列开始使用新的设计风格Material Design来统一整个Android系统的界面设计风格。...与之前的设计风格不同,这次的Material Design 设计将Android 带到了一个全新的高度,同时Google 在官网上推出了全新的设计指南——全面地讲解了Material Design 的整个实现规范与示例如下图所示...而各种新的转场动画,能更加有效地指引用户的视觉焦点,不至于因为复杂布局的界面重排而对整体效果产生影响,让使用者达到一个视觉连贯性。...通过如下所示代码,可以通过使用自定义Style 的方式来创建自己的Color Palette 颜色主题,从而实现不同的颜色风格,显示效果如图。...下面这个例子,演示了如何通过加载的图片的柔和色调来改变状态栏和Actionbar 的色调,代码如下所示。 通过以下方法来提取不同色调的颜色。

    1.1K30

    Material Design技术分享

    材料能改变形状,能沿水平或者竖直方向拉长或者增高,能在环境中的任何地方自动产生或消失。 ? 三、高度   高度是针对Z轴上不同平面的相对深度或距离。高度的测量单位其实和XY轴相同,这里主要是DP。...以上是简单总结Material Design的核心思想,目前关于Material Design其实还存在很多争议,其设计风格鲜明,贴近真实体验,界面简洁而直观,但是目前google官方提供的设计规范有限...Design风格的应用,设计一个相对优秀体验的APP还需要更多的布局和动画细节设计。...CoordinatorLayout是一种super-powered的FrameLayout,是专门为了以下两种情况而编写出来的: 1.作为一个top-level来统筹布局 2.作为一个容器实现一个或者多个子...Material Design的动画风格简洁而不失多样化,直观但高度迎合了用户体验,google原生安卓的视觉与效果也越来越有设计感,但是要想实现google官方视频推荐中的很多动画其实还是很耗费时间的

    2.4K60
    领券