网页设计,设计风格,设计效果,解决互联网一系列问题 咨询热线:400-097-9968

当前位置:首页 > 网站建设 > 网页设计

响应式网站与移动终端中的卡片式设计

发布时间:2019-07-15来源:UI智媒阅读量:309

让我们讨论一下下面的“器皿”式设计实例,其中一些受到广泛称赞,而其他的一些已经不那么火爆了。

设计风格

1. 招贴画风格

这个网站尝试效仿Pinterest,很多室内设计师的加入了各种不同元素,使它们看上去如同从流行的网络媒介网站上“分享”而成。实际上,WordPress用户快速利用技术建立了很多不同的主题。感到遗憾,这种设计方式看上去迅速就要落伍,因为使用该技术的网站过多了,给用户一种枯燥的感觉。

这种设计布局的问题是,当用户在点击每个卡牌后,经常会感觉它的内容与外界网页页面风格不一致。然而,作为单独的“器皿风格”的源于形式,这种风格已经基本上达到了自己的效果。

在其形式进一步拓展之后,卡牌内容内容开始包括视频,图片,报表和社交媒体分享按键等元素。在一些页面中,这些卡牌还出任其他主要用途,包括小型互动,如同站通告。

2. Metro 与扁平化风格

Metro模式由微软公司在06年发布,它可以算为是应用场景卡片式设计的更开始代表。

虽然它仍然保存了多种多样的格子,但现如今微软公司已经将它的设计语言演化到了“现代主义设计”的阶段,说真话,这只是“扁平化设计”的一种更幽美的说法罢了。实际上,如同我们曾叙述过的,扁平化设计正在再次结合之前与拟有机化学设计有关的纹路,黑影和渐变色等因素。

3. 栅格

栅格模式并不是忘却的风格,反过来,室内设计师们正试着通过更加严格的网格图或钻石风格的架构来丰富这一模式,具体而言,这包括将内容块有规律性地分隔或完美地置入整个布局中。一些室内设计师建立栅格将的“卡牌”交错一起,而另一些室内设计师则更喜欢用纯碎的网格图来展现图像和图型


设计主题

4. 杂志期刊风格

虽然这种设计构思一般被新闻媒体和杂志网站采用,但更近内容劳动密集型的在线画廊和搏客等网站也开始使用这种风格。

杂志期刊式“卡牌”的设计特点包括“诱导性”用户到网站上其他地方查看一个详细的文章或贴子的图片和文字连接。杂志期刊布局是特别适合于定期更新的网站,或具有大量内容的网站,因为该架构容许设计师应用场景关联性安排优先选择内容。

如同你可能想像,由于存在不同类型的“卡牌”,杂志期刊风格的网页布局需要强大的视觉平衡。它需要做一些附加的项目前期,但这是值得的,因为它更能给用户专业的感觉。

根据用户检测结果给卡牌归类

趣味的是,建立一个器皿式的设计更有效的方法之一,就是先使用应用场景信息构架的可用性测试——卡牌排列。

在这种技术中,你可以先将各个导行或内容项卡呈献给用户,随后让用户根据自己的类型或事先存在的类型进行排列。要建立一个卡片式的布局,你可以先自己检测网站的易用性,随后认证至少5个用户,才能将更好用的结构落实到设计中。卡牌归类甚至可以通过大数字方式远程进行。当然,请记牢,这种技术只有如果你的网站有明确的归类时才有效卡 ,如果你准备只是一个无限翻转的结构列举你的卡牌,这种方法是不会有很大帮助的。

响应式网站与移动终端中的卡片式设计

卡片式设计往往成为潮流趋势,其中一个原因由于它的设计构思与响应式设计很切合。不仅是乐高积木块式的内容与大部分联通号码场景都完美匹配,矩形框的miui元设计素本身也是切实可行的审美观方式。卡片式设计的优势之一在于,它称之为是台式电脑和移动终端的并集;它弥补了参与性和易用性之间的差别。如同我们曾叙述过的,卡片式设计为用户建立了一个更加一致的体验,超越了不同设备的局限性。

暂且想着苹果设备中的“空投物资图片”设计。如果你有传到的数据时,显示屏上面弹出来一种卡牌,给你两种选择——接受或回绝。只需一个动作,你可以选择浏览(或回绝)此信息。不论是在智能机,平板或台式计算机上,操作方式相一致,这代表用户在使你的设计时,更理解理解它。

在响应式设计中,如果能将卡牌放置设计架构内,并使其根据断点和显示屏大小而变大,变小,和排列,就能获得更好的应用效果。

设计效果

卡片式设计特别适用响应式设计,因为他们容许信息根据设备和显示屏尺寸而调整,但又不毁坏整体的布局。由于每个卡可轻松融入水平或竖直布局,对于不同的设备,应用场景卡牌的页面也不用壮士断腕的调整,因为每个部件已经齐整地组织在其分别的“器皿”中。

不仅可以卡牌本身可以根据调显示屏和设备而调整,但单独的卡牌的中的内容也可以灵便设计。因为每个卡牌都是一个矩形框,在矩形框内部元素的横纵比方面有很好的协调能力方,即便将多个矩形框基组合在乎一起也很方便。因此有人甚至称卡片式设计为“移动终端的原生态文件格式”。

卡片式设计并不是只是为了顺从人们的审美观需要---一般说来,在器皿风格的设计中,以及在响应和移动设计中,这是更灵便的布局文件格式,也是更有利于建立一致的客户体验的方式之一。

撇开其他不用说,卡片式设计身后的核心理念与现如今网络设计的发展趋势是非常吻合器的。用户想要快速地获得信息,而卡片式的展现方式毫无疑问是更能吸引用户继续预览的一种方式---不管对于哪种设备来讲。


责任编辑:许珲莉

以上就是响应式网站与移动终端中的卡片式设计的全部内容。更多精彩请进入网页设计栏目查看。

转载请注明出处:https://www.uizm.com/design/390.html

相关推荐

相关问题?

电话 QQ QQ 微信 顶部