精华内容
下载资源
问答
  • jQuery+CSS3响应图文卡片布局轮播切换特效

    一款简单实用的jQuery+CSS3响应式图文卡片布局轮播切换特效,自适应电脑和手机端浏览。

    示例图:

    响应式图文卡片轮播切换特效

     

    js代码段:

    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/owl.carousel.min.js"></script>
    <script>
    	$(document).ready(function() {
    		$("#news-slider").owlCarousel({
    			items:3,
    			itemsDesktop:[1199,2],
    			itemsDesktopSmall:[980,2],
    			itemsMobile:[600,1],
    			pagination:false,
    			navigationText:false,
    			autoPlay:true
    		});
    	});
    </script>

    下载地址:

    链接: https://pan.baidu.com/s/1FLfEYRT4-rv--j4nznw8rQ 提取码: yjzw 复制这段内容后打开百度网盘手机App,操作更方便哦 
    --来自百度网盘的分享

    展开全文
  • 2017-02-17 三达不留点gpj CocoaChina ...作为最初由Pinterest和Facebook这样的终端服务引入的一种新的设计方案,今天卡片式设计的影响力正在多个行业蔓延开来。 如果设计合理,卡片式
    2017-02-17  三达不留点gpj  CocoaChina

    卡片本质上是一个简单的信息容器,信息量有限,但设计干净整洁。现如今,在保证界面具有优秀可用性的同时,卡片式的设计甚至成为了平衡界面美学的默认做法。作为最初由Pinterest和Facebook这样的终端服务引入的一种新的设计方案,今天卡片式设计的影响力正在多个行业蔓延开来。


    如果设计合理,卡片式的设计将能够在一定程度上改善应用程序的用户体验。在本文中,我将描述5种有用的卡片设计指南,并提供一些有用的示例。

    一、遵循规则“一张卡片一个概念”

    一张卡片内所有内容应该只对应同一个要表达的核心主题,不过卡片内可以包含多种设计元素,但是每个元素应该只专注于同一主题下的某一个信息点,能够让用户自主选择他们所关注的信息点或进一步分享。


    二、使整张卡片都可点击

    要遵循费茨定律,允许用户点击卡片的任何部分,而不只是文本链接或图片。 较大的可点击区域大大提高了触摸屏设备和基于鼠标的设备的可用性。

    温馨提示:使用轻微的阴影效果来凸显卡片跟背景之间层级深度是一种常用的设计方法,从视觉上作为卡片可点击的一种隐喻效果。


    三、视觉上赏心悦目

    是什么使卡片发挥作用?是其优秀的设计样式和可用性。通过赋予卡片一定的美学设计,你的卡片既能让用户感觉到熟悉,又仍然富有创意。


    当开始实际设计时,您需要关注以下几方面:

    1、图片

    图片是基于卡片的设计的一个重头戏。多项研究都已经指出图片确实能够提升网站或应用程序的设计效果和浏览体验。 因此,在卡片中如果能突出使用图片,那自然会对用户产生更强的吸引力。


    2、阴影和渐变

    阴影和渐变在帮助用户建立起对于卡片式设计和实体卡片的映射关系的认知时有很自然的隐喻效果。但是请务考虑清楚该如何使用阴影和渐变:如果阴影投射到卡片所有的角落和侧面,那么作为实体卡片的隐喻映射被破坏了。


    3、排版

    您还可以通过使用文本内容来吸引用户的注意力。卡片设计的一切要素都应该易于阅读和理解,要将其可读性做到最大化:

    1)选择简单的字体和容易阅读的配色方案(放在一个与文本色有足够对比度的纯色背景上,文本是最具可读性的)。

    2)另外,要试着限制字体的数量。对于大多数卡片式的设计方案,使用单个字体就足够了。

    温馨提示:具有正常重量的无衬线字体对于卡片内容的拷贝是友好的。


    四、限制卡片中的内容

    一个卡片通常是短小的,它里面并没有包含所有信息,而是充当着指向更多详细信息的一个入口。当你尝试放太多内容到一张卡片里,以至于卡片本身开始变得太宽或太长,那么它也就失去了它原来的隐喻效果,因为它不再像是一张用户潜意识里认知的卡片样式。

    下面你可以看到一个基于卡片的用户界面的实例。请注意位于中心位置的这张卡片,它的问题在于它包含了太多信息使其过长,降低了其可读性。


    五、利用动画和动效的优势

    如果应用得当,动画可以在很大程度上提升用户体验。它有很天然的代入感,帮助用户适应卡片式的设计,并且为每个卡片建立不同状态之间的视觉关系。

    1、视觉提示

    视觉提示可以帮助用户更好地理解如何与用户界面进行交互。当你需要向用户演示设计中的某些功能该如何操作时,你可能要考虑使用这种设计。


    2、视觉反馈

    视觉反馈在UI设计中非常重要。它之所以能起作用是因为它满足了用户的自然意识上对确认的需要。 在现实生活中,物体/对象会响应我们的操作/动作/交互,这也是人们期望事情的工作方式。 对于桌面应用或网站,您可以使用鼠标悬停效果来显示当前元素是可交互的。悬停动画为元素的可发现性提高了一个层级,同时使体验过程更加有趣。


    使用悬停效果,您还可以显示原本隐藏起来的可选项。在下面的例子中,悬停效果允许用户进行颜色标记,回复,转发或删除消息。


    3、放大切换

    这个动画在卡片的预览视图和详细视图之间创建了一个过渡效果:用户选择一项目(卡片)并能立即看到与该选择相关联的详细信息。这种设计的挑战是要确保用户意识到自己是留在给定的上下文场景中的,而没有被带偏。

    结论

    卡片式设计作为一种新型的(相对的,其实已经流行开来)设计方案,而卡片本身则作为一种新型的创意画布,其创意性不仅仅体现在独特的视觉效果上,更体现在当我们要创建丰富的内容体验时,卡片已经成为最为灵活的布局格式之一。

    推荐阅读:

    如何利用“卡片式设计”提升用户体验

    极简设计的最佳实践

    译自:https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.owhqq4xmv(已获得授权)

    展开全文
  • 作者:Nick Babich日期:2016/10/11原文链接:https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/网页和手机应用...卡片式的交互方式正在广泛传播,无论是新闻网站或是外卖应用,你都可
    • 作者:Nick Babich

    • 日期:2016/10/11

    • 原文链接:https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/


    网页和手机应用正彻底地从页面转向个性化体验,这些新的体验建立在许多单个内容的聚合上,而这些内容目前以卡的形式来呈现。卡片式的交互方式正在广泛传播,无论是新闻网站或是外卖应用,你都可以看到几乎无处不在的“电子卡片”。

    在本文中,我将阐述卡片设计对UI设计师意味着什么,评价三个流行的卡片式服务。 如果你对设计自己的卡片式用户界面感兴趣,可以免费下载并体验Adobe的Experience Design CC。

    卡片是什么?

    卡片通常是指那些包含一定图片和文本信息在内的长方形,作为查看更多详细信息的一个入口。因为看起来如同真实世界中的卡片一样,在界面设计中的卡片具有非常棒的隐喻效果。

    早在互联网和移动设备出现之前,卡片就在我们身边无处不在了——商业名片、棒球卡片,甚至便利贴。 因此,对于用户来讲,我们能更直观地意识到这些卡片就像在现实生活中一样代表着一定的信息。

    棒球卡片是现实生活中一个很好的例子:你想知道的棒球运动员的基本信息都包含在一张小卡片的正反面。

    1.jpg

    卡片的优点

    卡片式设计可以应用于各种环境,正确运用的话它们可以改善APP的用户体验。 以下是一些例子,说明为什么卡片有益于你的用户界面。

    良好的内容组织

    卡片在占用较少屏幕空间的情况下将信息有组织的划分到不同的区域中。用户喜欢信息分块,因为它有助于快速浏览:它可以让用户避免阅读让他们觉得恐惧和费时的超长段落,让用户更快地抓住其感兴趣的部分。类似于文本段落是对语句的组织结果,卡片聚集多样的信息形成一个连贯的内容体。

    卡片上的信息布局整齐简练

    21.png

    摘要性的格式易于消化

    卡片几乎可以被用来容纳任何形式的信息,其摘要性的信息属性也易于用户快速消化。用户通过卡片可以很容易地访问到他们感兴趣的内容。进而让用户愿意参与到对卡片的浏览和操作中来。

    用户可以快速浏览、滑动卡片。

    视觉上赏心悦目

    基于卡片式的设计通常都严重依赖于其视觉效果。而卡片本身又对图片有很强的依赖性。多项研究都已经指出图片确实能够提升网站或应用程序的设计效果和浏览体验,因为图片能够快速有效地吸引用户的注意力。因此,在卡片中如果能突出使用图片,那自然会对用户产生更强的吸引力。

    卡片以视觉信息取悦用户

    41.png

    易于响应式的设计

    关于卡片最重要的事情是它们几乎是可以无限变形的。卡片式的设计在桌面电脑和移动设备都工作良好,因为它以更易于用户消化的方式向其呈现内容。正因为卡片作为一个内容容器,能很容易的放大或缩小,所以对于响应式的设计来说,卡片是一个非常合适的选择。卡片在多设备间能创造出一个一致独立的美学效果,这就是为什么它能在不同设备间如此容易的创建出一致体验的原因。

    卡片非常适合响应式和移动端设计

    53.png

    为手指而设计

    卡片完全适合手指操作,看起来似乎也是专为移动端所创造的样式。数字卡片的使用和现实中的卡片一样,为用户提供了舒适的体验。用户无需思考如何操作,很容易理解翻转卡片查看更多信息或滑动查看更多卡片。

    卡片几乎是无限可操作的:他们可以充分利用动画和运动。

     

    33.gif

    卡片式设计的最佳案例

    卡片式设计的精髓在于桌面端和移动设备的交集设计,在互动性和可用性之间寻求平衡点。然而成功的卡片式设计需要具备清爽干净的美学特征,并且能让用户直接轻松地交互。

    瀑布流

    卡片出现在一个瀑布流中时,便能够创建出一系列符合自然时间轴的事件。例如Facebook在news feed中呈现最近时间段内容的快速预览。Facebook的news feed是以卡片区分内容的无止境的瀑布流。卡片在这里的关键是分解内容,它们将内容分离成无止境的瀑布流,并使内容易于分享。这种交互模式促使用户乐于分享平台的信息。

    Facebook是卡片式设计易于承载信息的很好案例。

     

    6.jpg

    易于发现感兴趣的内容

    卡片可以使相关内容自然展示,让用户挖掘自己感兴趣的内容,设计师无不知晓的设计创意平台Behance就是这么做的。卡片式设计是最适合艺术创意类平台展示的方式。

    Behance采用卡片式布局打造直观的用户界面。

    7.jpg

    Tinder是国外的一款手机交友APP,它的卡片模式利用探索发现的机制,让用户习惯去探索更多内容,从而使Tinder成为最流行的移动端应用之一。Tinder的交互模式很简单:向左滑动表示不感兴趣,向右滑动表示感兴趣。这种卡片式交互模式令人好奇又上瘾,因为用户不得不继续滑动看看下一个到底怎么样。

    8.png

    工作流

    卡片很容易将一定范围内的任务进行归类。Trello这个任务管理应用就做得很好:工作板是卡片式的模块,每个卡片代表了不同类型的任务。

    9.png

    Trello的工作板上充满了卡片。

    对话框

    卡片是内容的承载器,因此对于展现操作行为也是很适合的。参考iOS本身的AirDrop服务,当你接收到信赖的数据传输请求时,桌面会弹出提示卡片,请求你接受或拒绝传输。苹果的截图针对于照片,但开发者可以把优惠券、歌曲或是网络连接等的任何东西放在卡片上。

    10.jpg

    控制面板

    当卡片式设计用来组织不同类型的内容时,它的精确度极高。使用卡片,你可以将信息组织成符合逻辑的分组,并可以根据特定的上下文进行排序。对于一个需要分组的集合而言, 合理利用不同类型的卡片比起传统列表项 + 分割线 + 标题的视觉效率要高太多。

    11.png

    基于卡片的设计语言

    2010年,微软推出了Metro设计语言。Metro的一个关键设计原则是更好的关注应用的内容,而这是通过采用扁平化元素、排版和卡片来实现的。一个Metro卡片不仅仅是单纯的设计元素,它还提供了必要的内容与交互。

    12.png

    卡片设计的更多细节

    简约

    当你准备设计卡片时,简约应当是你始终牢记的一个准则。Carrie Cousins对此有一个很好的建议:卡片可以在设计中包含多个元素,但是最好每次都突出其中的一个内容或信息。这样设计能使用户选择起来更精准,也使得内容得以分享。

    13.png

    ReaLync的列表是卡片形式,以此来显示最重要的地方信息。

    卡片和响应式设计

    我们都知道响应式设计的重要性,要让自己的应用和页面在不同尺寸的屏幕上运行自如。当我们为不同屏幕设计时,应当充分利用屏幕特征和卡片里的内容属性,这样才能根据屏幕的大小快速、轻松地调整内容。卡片式设计与响应式框架兼容性良好,它可以轻松适应不同的屏幕尺寸,自适应地进行展示。

    数字化后的卡片可以以不同的方式进行操控,这是其一大优势。例如在移动设备上,卡片可以横向或纵向排列。

    手机端竖屏的Verge

    14.png

    电脑端的Verge

    15.png

    同一个布局下,卡片通常限制宽度,但不限制高度。最大高度限制于展示平台的可视空间高度,但有时也是可以扩展的。

    16.png

    卡片和排版

    关于卡片设计的一切都应易于阅读和理解。设计师应当视可读性为重要目标:

    选择简单且易于辨别的字体,以及对比度良好的配色方案(纯色背景上的文本要与背景有足够的对比度,保证文本清晰可见)。

    尝试控制字体数量,对于大多数卡片,一种字体就足够了。

    17.png

    结语

    希望你能了解为什么卡片式设计变得如此流行,并且相信这个趋势也会长盛不衰。这种趋势不会那么快结束,卡片式设计将会是APP设计的大势所趋。卡片式设计的极佳可用性是其经久不衰的原因。卡片并不只是徒有外表,它是设计统一体验的最自由的布局形式。如今人们获取信息速度越来越快,卡片能忽略设备的差异给用户提供更好的服务。这也是以用户体验为中心的设计。

    展开全文
  • studies mac版是一款专为OS用户打造的抽...卡片式学习软件特色介绍 适用于iPhone,iPad和Mac的应用程序。 丰富的媒体学习笔记(Flashcards),格式化的文字,图像,音频和视频。 学习笔记与你想要的一样多。 沉浸式

    studies mac版是一款专为OS用户打造的抽认卡制作管理工具,这款软件能够把一切你需要记忆的东西以问答的形式汇集在一起。所以不仅仅是句型,一些概念,公式都可以存储。这是一个扩大知识的工具,你想要学习什么 - 医学,法律,语言,历史,驾驶,美术,音乐,武术并不重要 - 从简单的日常生活,到充足的知识变化。

    卡片式学习软件特色介绍

    适用于iPhone,iPad和Mac的应用程序。

    丰富的媒体学习笔记(Flashcards),格式化的文字,图像,音频和视频。

    学习笔记与你想要的一样多。

    沉浸式学习会议。

    通过iCloud同步全部或部分库。

    长期学习或考试补习的学习安排(Spaced-Repetition and Leitner systems)。

    多项选择测验。

    从Quizlet.com搜索和下载。

    导出以分享您的笔记。

    从文本和Excel文件导入。

    从心理案例应用程序迁移数据。

     

    展开全文
  • 首次开发卡片式分享链接,过程中遇到许多坑,查阅了几十篇博客终于完成了这个功能,记录的开发过程不一定符合你的需求,但如果你也是用uniapp开发,希望本篇能够帮助到你。 效果图对比: 准备工作: 配置微信...
  • 卡片式设计  卡片,你或许不熟悉这个术语,但是你绝对不会对卡片的概念感觉陌生。现在,卡片在网页设计中是普遍存在的,并且还将越来越流行。事实上,Google,Twitter和Facebook这三大受推崇的网页全是这么设计的,...
  • studies mac破解版是一款专为OS用户打造的抽认卡制作管理工具,这款软件能够把一切你需要记忆的东西以问答的...卡片式学习软件特色介绍 适用于iPhone,iPad和Mac的应用程序。 丰富的媒体学习笔记(Flashcards),格式
  • 卡片式设计——移动设计的未来

    千次阅读 2013-10-29 22:30:53
    卡片式设计——移动设计的未来 卡片正在迅速成为移动设备的最佳设计模式 我们正在见证一次网页设计的重构,告别之前冗余的页面和访问地址,迎来由众多个体内容组成的全新的个性化体验。随着移动技术的...
  • 通常我们只做的卡片式报表,如果分页方式设定为按纸分页方式,有时会出现分页时,最后一个卡片报表显示不全的情况,当我们想在一页中显示的报表要如何操作呢? 实现思路:通过临时变量,通过条件判断做行后分页。 ...
  • 卡片式列表插件用卡片形式列出模块记录内容。如资产卡片、名片管理这样的模块即可选择本类型。数据模板为HTML格式,可以将数据字段或图片字段放置其中,以布局各种样式的卡片。 数据编辑方案:添加、复制、批量...
  • 使用Tab Pane实现内容卡片式展现

    千次阅读 2008-11-19 19:21:00
    卡片式的显示内容,这样做不但可以把零乱内容整合,而且还能动态地显示出各自内容,节省了空间,页面又变得整洁,甚是实用。要实现这个效果并不难,这是利用Tab Pane这东东实现的.首先去网上下载tab pane的代码文件...
  • $.ajax({ //必须采用ajax格式,否则数据不会更新 type:"post", url:"getinfo", data:{ //ajax请求参数 "pagesize":thispage.pagesize, "page":thispage.currentpage }, success...
  • element-ui 实现分页详见以前的文章:... 本文借鉴了一部分上文,卡片布局部分不再是自己写 DIV 和 CSS ,而是改用了element-ui 的 “card 卡片”, 使用方法见:https://element.eleme.cn/#/zh-CN/component/...
  • Excel格式的固定资产卡片导入(用友)
  • 给Odroid添加一块外置硬盘的话可以用USB连接外置移动硬盘或者是u盘。在windows系统里插入USB就能自动加载驱动识别硬盘...检查确认硬盘->格式化(最好格式化为linux好识别的ext4格式)->挂载->启动自动挂载设置 下面依
  • 这是一款CSS3名片式卡片设计特效。该卡片使用简单的CSS3代码,来构建带图片,图标和标题,描述信息的卡片布局。
  • Studies Mac版是学习必备的卡片式记忆工具,你可以使用Studies for mac激活版记录学习笔记,文本、图像、音频、视频都能记录在内,studies for mac版还支持从文本、Excel文件导入功能和导出功能,studies mac版的...
  • 卡片游戏

    2017-06-16 17:47:27
    卡片游戏 题目描述 小D举办了元旦联欢活动,其中有一个卡片游戏。游戏的规则是这样的:有n张卡片,每张卡片上正面写着一个小于等于100的正整数ai,反面都是一样的花色。这n张卡片正面朝下叠成一堆,玩这个游戏的人...
  • 折叠式卡片布局在PC版网站中可能不常见,但是在手机版,小屏幕的网页浏览会大发异彩。 AmazeUI也提供了折叠式卡片布局,虽然官网上有例子,但是这种折叠式卡片布局,整合内容列表、表格组件还是需要一番功夫。 比如...
  • R参考卡片

    千次阅读 2016-05-31 15:53:30
    在 windows 操作环境下,数据共享可以通过写字板(clipboard)的方 . 读取 Excel 表:可以将 Excel 中数据拷贝至写字板(内存), 使用 x   read.delim("clipboard") 方式读取数据。如果要将数据供 Ex- cel 使用...
  • 卡片内的电子现金余额已经被圈提干净,余额应该是0。现在使用PC/SC的读卡器配合麻工强大的Snooper进行测试。 首先选择PPSE. 1.SELECT Command:00A404000E 325041592E5359532E4444463031 Response:6F2E840E...
  • 王树义读完需要18分钟速读仅需 6 分钟横看成岭侧成峰,远近高低各不同。1 疑问读了我的《如何高效实践卡片式写作?》之后,有读者提出了疑问:王老师,你所描述的卡片式写作,看来写篇博客...
  • 卡片内的电子现金余额已经被圈提干净,余额应该是0。现在使用PC/SC的读卡器配合麻工强大的Snooper进行测试。 首先选择PPSE. 1.SELECT Command:00A404000E 325041592E5359532E4444463031 Response:6F2E840E...
  • ID卡:ID卡全称为身份识别卡(Identification Card),是一种不可写入的感应卡,含固定的编号,主要有台湾SYRIS的EM格式、美国HIDMOTOROLA等各类ID卡。ID卡与磁卡一样,都仅仅使用了"卡的号码"而已,卡内除了卡号外...
  • 在交互监视模式下启动测试运行器。 有关更多信息,请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且...
  • IC卡片使用基础

    千次阅读 2019-09-01 15:07:20
    一、 卡片基本概念 集成电路卡,即日常生活中常使用的卡片,可以根据读写特性分为两类:ID卡和IC卡。 ID卡,全称身份识别卡,是一种不可写入的感应卡,含固定编号。卡内除了卡号外,无任何保密功能,其“卡号”是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,324
精华内容 3,329
关键字:

卡片式格式