XLForm - 很多表格类的表，写法更高冷一点，推荐使用。...该项目通过三种形式展示页面之间的切换，比如导航栏上的多个选项卡切换，页面左右两端箭头指示切换，以及使用分段控件。...WXTabBarController - 在系统UITabBarController的基础上完美实现了安卓版微信TabBar的滑动切换功能，单手操作iPhone 6 Plus切换TabBar一直是一件很痛苦的事情...SwiftSpinner - SwiftSpinner是使用swift制作的一款精致带感的指示器，并且连接有字体信息显示，模糊背景，半透明，扁平化等IOS8的效果。...SBShortcutMenuSimulator - 教你如何在模拟器上测试3D Touch功能！
VJDeviceSpecificMedia -如何根据设备选择不同尺寸的图片 可以通过设置不同尺寸设备的LaunchImage，来使得App适配这些设备，要是在不同不同尺寸设备上使用不同大小的图片，则需要在代码中一一判断...KYWaterWaveView - 一个内置波浪动画的UIView，里面有鱼跳跃水溅起来的效果。 WaveLoadingView - iOS 唯一完美的波浪进度加载指示器，实现说明。...iCarousel - iCarousel是一个类，它继承于UIView。用于简化实现各种类型的旋转木马(分页滚动视图），无限轮播 ，iOS开发之多图片无缝滚动组件封装与使用。...RazzleDazzle - 【IFTTT开源Swift编写的帧动画框架--RazzleDazzle】RazzleDazzle 是IFTTT开源的一个iOS帧动画框架，非常适用于APP初次使用时的介绍和引导信息...TaskSwitcherDemon - 是仿造iOS9的Task Switcher做出来的动画效果, 具体的实现思路可参照这篇文章。
表视图 表视图在一个由多行组成的滚动单列清单中显示数据。...在分组风格中，行是显示在分组中的，其可以有页眉和页脚。一个分组的表视图总是最少包含一个条目清单分组——每一行一个列表项——并且每个分组总是最少包含一个条目。分组表视图不包含索引。...NOTE 编程上，这些风格用于表视图的单元格，这是一种告诉表如何绘制行的对象。 Default（UITableViewCellStyleDefault）。...用户通过在连续的列表中选择条目来跟踪路径。扩展指示器告诉用户点击行的任何地方都会在新列表中显示子集信息。 显示概念上的分组信息。两种表视图风格都允许你通过信息章节间的页眉和页脚视图来提供上下文。...而是立即用文本数据填成屏幕上的行然后当复杂的数据获取之后——比如图片——再显示它们。这个技术可以立马给用户有用的信息并且提高了你app的响应能力。 在等待新数据到达时考虑显示旧数据。
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...在上下文环境中，使用动画和可交互性循序渐进地引导用户。要避免显示看起来像可交互的屏幕截图。...模态的意义在于： 帮助人们专注于一个独立的任务或一组紧密相关的选项 确保人们收到关键信息，并在必要时采取行动 iOS提供了警报、活动视图（或共享表）和操作表的样式，你可以在应用程序的特定情况下使用。...人们通过以下方式关闭卡片： 从屏幕顶部向下滑动 卡内容滚动到顶部时，可以从屏幕任意位置向下滑动 轻按一个按钮 工作表常用在无法实现复杂任务的、非沉浸式的模式和内容。...无论导航风格如何，操作路径必须符合逻辑，可预知易于遵循。一般情况下，一个页面只给用户提供一个入口。如果他们需要在多个场景下看到一个页面内容，请考虑使用操作表、警示框、弹出式气泡或模态视图。
，UIKit是一个定义通用页面元素的编程框架。...UIKit元素是灵活性高且被大众熟悉的，它们具有很强的适应性，能让你设计出一款在任何iOS设备上看起来都很棒的 app ，当系统引入外观新变化时，它们会自动更新。...Views 包含人们在 app 中首先看到的内容，如文本、图形、动画和可交互元素。Views 可以滚动、插入、删除和调整等行为。 Controls 发起行动并传递信息。...按钮、开关、文本字段和进度指示器都是控件的例子。 除了定义iOS的界面，UIKit还定义了 app 可以采用的功能。...例如，通过这个框架， app 可以响应触摸屏上的手势，并启用绘图、可访问性和打印等功能。
官网 Mobx是通过透明的函数响应式编程实现简单，可扩展的状态管理库。官网 Dva是基于Redux, Redux-saga 和 react-router@2.x的轻量级的框架。...官网 jquery-popup-overlay：是一个响应式的和可访问性强的模态框（modal）和工具提示框 jQuery 插件。...官网 jquery-popup-overlay：是一个响应式的和可访问性强的模态框和工具提示框（tooltips）jQuery 插件。官网 layer：国内最多人使用的web弹层组件。...官网 skrollr：独立（不依赖 jQuery） 的视差滚动库，适用于移动设备（Android + iOS）和桌面电脑。官网 parallax：面向智能设备的视差引擎。...官网 表格/栅格 jTable：基于 CRUD 表创建 AJAX 的 jQuery 插件。官网 DataTables：这是一个非常灵活的工具，在渐进增强的基础上，将高级的交互效果加到 HTML 表格。
自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...原则 ·始终保持 Top app bar 出现在 app 中每个屏幕的顶部，并且可以在滚动时消失。 ·引导 Top app bars 提供了一种可靠的方式来引导用户浏览 app。...---- 分解 在 top app bar 中推荐的元素放置顺序是（从左到右的语言顺序中）： ·将导航放置在最左侧 ·将任何 titles 放在导航的右侧 ·将 contextual actions 置于导航的右侧...任何剩余的或次要的动作都应放置在 overflow menu 中（3） ---- 行为 滚动 滚动时，e top app bar 可保留原位，或以下列方式转换： ·向上滚动隐藏 top app bar...在滚动时，它们会增加海拔并让内容在它们后面滚动 ? 当向上滚动时，使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。
你的布局，应该告诉用户什么是最重要的，他们的选择是什么，以及事物是如何关联起来的。 强调重要内容或功能，让用户容易集中注意在主要任务上。...谨慎使用新手引导（介绍应用的功能和如何进行操作）。在考虑新手引导之前，你应该努力地完善你的应用，尽可能使应用的功能直观和易于寻找。其实，好的应用不需要新手引导。...例如，可以使用动画而不是文字来描述如何执行一个简单的任务。在引导用户了解较为复杂的任务时，可以通过一些引导浮层来简要说明每一个步骤用户需要做什么。...因为在后台的应用随时有可能被终止或退出。 当应用停止的时候保存尽可能多的当前状态的详细信息。这样使用户可以在回到应用时能从中断之处继续使用。例如，在使用可滚动的数据列表时，退出后保存列表所在的位置。...应该让用户时刻清楚自己当前在应用中所处的位置，及如何前往目的页面。无论使用哪种适合你的应用结构的导航，最重要的是用户访问内容的路径要有逻辑、可预期和易于追溯。
- 样式 在移动端开发中，是没有像素概念的。...上时，View的⻓宽被解释成:100dp 100dp，字体被解释成16sp，运⾏于 ios上时尺⼨单位被解释成pt,这些单位确保了布局在任何不同DPI的手机屏幕上，显示效果一致。...ActivityIndicator loading的小菊花 显示一个loading提示符安卓设备时一个谷歌式半圆环，在ios设备上则显示一朵小菊花。...hidesWhenStopped={false} //在animating为 false 的时候，是否要隐藏指示器(默认为 true)。...这个渲染窗⼝能响应滚动行为，元素离可视区越远优先级越低，越近优先级越高，当用户滑动速度过快时，会出现短暂空⽩的情况。
iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。...在较大的屏幕上，动作表会以弹出框的形式同时出现。 ? 在执行潜在的破坏性操作之前，请使用操作表请求确认。如果是非破坏性的操作可以使用下拉菜单（控件的一种，后面会讲到）。...相对于集合，文本信息展示在一个可滚动的列表中，浏览起来会更简单和有效。 谨慎进行动态布局变更。集合的布局是可以随时更改的。...因为在紧凑的环境中空间较小，所以插入的分组表可能会导致文本换行，尤其是在内容本地化时。 ? 设计规范 注意列表的宽度。...使用网页视图让用户在不离开APP当前页的情况下，短暂地访问网站很好，但Safari是用户在iOS上浏览网页的主要方式。所以在你的APP中提供与Safari相似的功能没有必要的，而且也不鼓励这样做。
创建和管理一个View Hierarchy 管理view层次结构是开发应用程序用户界面的关键部分。 您的view的组织影响您的应用程序的外观，以及您的应用程序如何响应更改和事件。...在界面构建器中，边缘指示符的存在意味着边距具有固定大小，并且缺少指示符意味着边距具有灵活的大小。 幸运的是，Interface Builder提供了一个动画来展示自动修改行为对你的view的影响。...应用程序经常手动布置root view的一个地方是在实现大的可滚动区域时。由于对其可滚动内容拥有一个大view是不切实际的，因此应用程序通常会实现一个root view，其中包含许多较小的view。...每个图块代表可滚动内容的一部分。当滚动事件发生时，根view调用其setNeedsLayout方法来启动布局更改。其layoutSubviews方法然后根据发生的滚动量重新定位平铺view。...当用户与滚动view交互时，大的可滚动区域可能会隐藏并显示切片子view。有关支持可滚动内容的更多信息，请参阅Scroll View Programming Guide for iOS。
本文就UI界面中常见的指示性设计元素做了一些整理，希望可以帮助到各位设计师。 ? 什么是指示性设计元素？ 众所周知，道路上的指示标志是用来指示车辆和行人该如何通行。...同理，在UI界面中，指示性设计元素就是用来告知、引导、指示用户的设计元素，因此，只要是在视觉上可以提示特定的交互或内容，从而让用户更快、更轻松地注意到，比如CTA按钮，文本提示等，都属于指示性设计元素。...指示性设计元素是如何影响用户体验的？ 大多数情况下，往往只需要几秒钟时间，用户就已经决定了要不要使用你的产品。...三、视线（Eye line） 视线是建立在人类自然反应之上的一种强大的指向方式。当看到别人的目光集中在某个点或某个物体上时，我们会自然而然地产生好奇心，他们在看什么？...对于这种情况，有一个很棒的解决办法，可以在屏幕上可见区域的最下方显示的一部分内容，这样，用户就不会遗漏任何重要信息了。 时装模特网站 网页的底部区域展示了部分照片，提示用户可以滚动查看更多： ?
iOS包含了下面这些主旨： 遵守：UI帮助人们对内容进行理解和交互，而不是与其竞争。 清晰：文本在每个尺寸都很清晰，图标是清晰且明白易懂的，装饰是巧妙而合适的，并且专注于使用的设计。...在iOS中，一个半透明的元素只在内容直接在其后方时变得模糊——给出一种透过米纸看的印象——它不会将屏幕的其余部分模糊化。 指示清晰 指示清晰是另一个确保内容在你的app中占首要地位的方法。...通过深度来传达 iOS通常在清晰的层级下展示内容来传达层级和位置，这可以帮助用户理解屏幕上各个物体的关系。...在一个支持3D Touch的设备上，轻按（peek）、重按（pop）和快速的响应动作使用户可以进入重要的功能或信息查看而不从运行环境中离开。...今天的日期依然高亮，年份则在返回按钮上显示，所以用户可以清楚的知道他们在哪个视图，从哪个视图来到这个视图的，以及如何回到原来的视图。
coddoc还解析了在API中使用的源代码。 sphinx是一款可轻松创建智能和精美文档的工具 使用JSDoc Beautiful docs是一个基于markdown文件的文档查看器。...progressbar.js - 具有动画SVG路径的美丽且响应迅速的进度条。 pace - 自动为您的网站添加进度条。 topbar - Tiny＆beautiful全站点进度指示器。...iscroll - iScroll是一款高性能，占用空间小，无依赖，多平台的JavaScript滚动条。 skrollr - 适用于移动设备（Android + iOS）和桌面的独立视差滚动库。...滑动和滑动 - 可与touchSwipe库配合使用的滑动滑动菜单。 表/网格 jTable - 一个用于创建基于AJAX的CRUD表的jQuery插件。...Bootstrap表 - 对流行的Bootstrap框架的扩展，用于创建适合您站点样式的表，而无需额外的标记。 floatThead - （jQuery插件）在正文中滚动时锁定任何表的标题。
虽然现代 iOS 硬件功能十分强大，足以处理许多密集和复杂的任务，但是如果你不关心你的 APP 是怎么执行的话，用户的设备仍会出现无响应的情况。...01 使用可复用的 tableViewCell 译者注：本例阐述的是使用可复用的 tableViewCell，所以将所有 cell 翻译成 tableViewCell ，table view 直译成表视图...除此之外，每个 tableViewCell 在滚动期间都需要分配新内存。如果你快速滚动表视图，期间会动态分配许多小块内存，这个过程将使 UI 变得卡顿！...通过将屏幕上不再可见的 tableViewCell 放入队列中进行复用，并且当新 tableViewCell即将在屏幕上可见时（例如，当用户向下滚动时，下面的后续tableViewCell），表视图将从此队列中检索...我建议观看 Apple 的 WWDC 2012 视频上的 UI 并发，以便更好地了解如何构建响应式应用。 01 后记 性能优化需要你在应用程序的功能之上编写更多的代码或配置其他设置。
1 IOS组件 1.1 iOS活动指示器 1.1.1 Props animating bool型 显示指示器(true，默认的)还是隐藏它(false)； color字符串型； Spinner的前景颜色...小的高度为20，大的高度为36。 1.2 iOS日期选择器 使用DatePickerIOS来在iOS上呈现一个日期/时间选择器(selector)。...1.6 iOS开关 使用SwitchIOS在iOS上呈现出布尔型的输入。这是一个控件组件，所以为了更新组件，你必须使用Change回调并且更新值value。...1.9 嵌套文本 在iOS里，显示格式化文本的方式是使用NSAttributedString :你可以为你想要显示和注释的文本划定一些特 定的格式范围。实际上，这是非常无聊的。...3.4 滚动视图 组件封装了滚动视图平台，同时提供了与锁定“应答”系统的触摸的集成。尚不支持其他来自阻止滚动视图成为响应者的包含的响应。
，自行根据项目兼容需求考虑是否使用 以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型 一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程...在线演示 Behavior Skill 使用overflow-scrolling支持弹性滚动 要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling...:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度 场景：iOS页面滚动 兼容：iOS自带-webkit-overflow-scrolling body { -webkit-overflow-scrolling...在线演示 使用:focus-within分发冒泡响应 要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式 场景：登录注册弹框、...在线演示 滚动指示器 要点：提示滚动进度的指示器 场景：阅读进度 兼容：calc()、gradient 代码：在线演示 ?
如果当有人以不受支持的方向握住设备时您的应用程序不会自动旋转，那么他们会本能地知道如何旋转设备。 根据上下文自定义APP对旋转的响应。...熟悉、流畅的体验会让用户更投入。他们习惯于iOS中使用的微妙动画，例如平滑过渡、设备方向的流畅转换和基于物理的滚动。除非你是创建沉浸式体验，例如游戏，否则你的自定义动画应与系统的内置动画差不多的。...系统颜色 iOS提供了一系列的系统颜色，可自动适应活动和可访问性设置的变化，如增加对比度和降低透明度。系统颜色在浅色和深色背景以及明暗模式下都可以单独和组合使用。...iOS上的默认颜色空间是标准RGB（sRGB）。为确保颜色正确匹配此颜色空间，请确保图像包含嵌入的颜色配置文件。 使用宽色可增强兼容显示器的视觉体验。...暗模式是动态的，这意味着当界面位于前景（例如，弹出框或模式表）中时，背景颜色会自动从基本颜色变为高色。该系统还使用增强的背景色在多任务环境中的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。
可索引性和社交性 站点内容可以被搜索引擎（如谷歌、百度）检索到 确认方法：利用“Google抓取方式”工具，您可以测试 Google 会如何抓取或呈现您网站上的某个网址。...确认方法： ●确保任何一段内容都可以在不同的两个URL上正常获取。 ●打开这两个页面，并确保他们使用头上的标签来指示规范版本。...从详细信息页面返回，保留上一个列表页面上的滚动位置 确认方法：在应用程序中查找列表视图。向下滚动点击一个项目进入详细页面。在详细页面上滚动。...滚动页面，将文本输入框放在屏幕上尽可能低的位置。点击输入并确认键盘出现时没有覆盖输入。...页面可以跨平台自适应显示，如手机、平板电脑或不同尺寸屏幕的PC显示器 确认方法：在小，中，大屏幕上查看PWA，确保其合理运行。 改善方法：查看我们有关实施响应式UI的指南。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
