卡片式網(wǎng)站建設的優(yōu)勢以及未來(lái)發(fā)展
2016又一新的網(wǎng)站建設趨勢來(lái)襲,你是否聽(tīng)說(shuō)過(guò)卡片式的網(wǎng)站設計?沒(méi)錯,它就是最新的一類(lèi)建站趨勢,它有什么樣的優(yōu)勢以及未來(lái)的發(fā)展如何呢?
在現實(shí)生活在,視覺(jué)信息總是很吸引人的眼球,卡片設計的應用不僅僅只是一種趨勢。
有數據顯示2014年 移動(dòng)端使用率遠遠高于桌面端,網(wǎng)頁(yè)設計都能很好的適應小屏幕。這個(gè)結論就是:簡(jiǎn)單的界面風(fēng)格,比如:扁平化設計,極簡(jiǎn)設計,尤其是卡片設計比往年都要流行。
好的卡片設計不會(huì )使用太多的加載時(shí)間,同時(shí)它也能在不同的屏幕上切換自如。小的模塊對于用戶(hù)來(lái)說(shuō)更能吸引注意力(尤其在移動(dòng)端),它在Pinterest上培養大家的習慣,然后在Facebook和Twitter上面推廣,卡片設計能應用于各個(gè)領(lǐng)域的網(wǎng)站設計。
在這篇文章中,我們將會(huì )探討卡片設計的崛起:為什么它們有用,它們如何適應于響應設計和material design,在未來(lái)又會(huì )發(fā)生什么?
什么是抽屜式設計?
為了了解抽屜式設計,你首先得先了解卡片是什么。
每一個(gè)卡片擁有屬于自己的信息。一張卡片能包含所有信息 — 視覺(jué)、文本、鏈接等等— 但是所有這些內容都是一張卡片里面的內容。
這種獨立填滿(mǎn)整個(gè)屏幕抽屜式展現信息的方式 被Guardian 叫做“抽屜模式”。它讓用戶(hù)更加直接清晰的看到整個(gè)界面,也有利于用戶(hù)快速的尋找他們需要的信息。(最重要的是,這種方式能夠有利于我們自己控制,下面的文章我會(huì )解釋為什么。)
讓人覺(jué)得很有吸引力的是:它們使用的卡片界面是相互疊加的。
Trello 能讓用戶(hù)創(chuàng )建他們自己想要的任何卡片列表。所有人都能創(chuàng )建“to-do”卡片 ,同時(shí)能夠按照自己的需求進(jìn)行分類(lèi)。
Trello不僅讓卡片具有靈活性,而且還能被用戶(hù)隨意擺放。Trello的成功是因為相較于傳統列表式布局,它讓用戶(hù)感覺(jué)很簡(jiǎn)單。
UI卡片在移動(dòng)端和響應式設計中的應用
正如上文提到的,卡片為響應式框架提供了出色的兼容性,因為一些像Des Traynor把他叫做“網(wǎng)頁(yè)的未來(lái)。
這種設計能夠在移動(dòng)端隨意很好的轉換!
首先,它能夠自己擴展或者收縮去適應任何屏幕的尺寸。設計師可以很靈活的控制卡片的比例(幾組卡片能夠更好的適應彼此)。例如,你可以設計固定的寬度和一致的間距來(lái)適應可變動(dòng)的高度。
比較上面The Verge的網(wǎng)頁(yè)截圖和下面的移動(dòng)端截圖:
注意他們兩個(gè)的文本信息、圖像和顏色的風(fēng)格都是一致的?ㄆO計讓用戶(hù)在不同的設備上有一致性的體驗。
你可以看到這個(gè)優(yōu)勢在UXPin的e-book里面被利用。注意他們從移動(dòng)端到全屏的界面是非常清晰的。
UXPin移動(dòng)端界面:
UXPin全屏的界面:
另外一個(gè)優(yōu)勢是如何讓卡片適應人們手指操作。在觸屏上,操作它就像按動(dòng)一個(gè)按鈕一樣不需要花費多少精力。這個(gè)想法很簡(jiǎn)單:點(diǎn)擊卡片,讓它與內容交互。
像菲茨定律適應于網(wǎng)頁(yè)設計展示那樣,點(diǎn)擊區域越大就越容易相互作用。還記得我們有多少次掙扎在移動(dòng)設備上點(diǎn)擊一些文本鏈接么?
卡片和Material Design
Material Design很依賴(lài)卡片式設計,卡片描述在Material Design指南里值得你去尋找一個(gè)好的解釋。
卡片設計的未來(lái)
卡片設計模式不斷的重塑自身以適應新的挑戰,而響應式和移動(dòng)端也許會(huì )受最大的影響。就像2015&2016網(wǎng)頁(yè)設計趨勢 描述的那樣,這種設計流行的轉變是因為 Material Design 在安卓系統里面的應用。
1.技術(shù)
卡片不可能永遠是靜態(tài)的。隨著(zhù)網(wǎng)絡(luò )性能的提高,也能夠支持更豐富的多媒體內容。你可能會(huì )看到更多細節的元素,比如自動(dòng)更新內容但是不會(huì )影響整個(gè)用戶(hù)體驗。
視頻能更換圖片(設計師思考這個(gè)問(wèn)題很多年了)也許會(huì )變得很流行。Use Your Interface(上圖),這些GIF動(dòng)畫(huà)功能讓整個(gè)頁(yè)面體驗非常愉悅。
2.深度的交互
在不久的將來(lái),卡片也許能夠變得更加的有創(chuàng )意。就像我們看見(jiàn) Material Design,它非常依賴(lài)個(gè)人的交互,隨著(zhù)自動(dòng)排序和實(shí)時(shí)更新等功能的更新(比如天氣預報)。
Windows手機里面已經(jīng)開(kāi)始應用卡片式自動(dòng)分類(lèi)方式,很有可能其他移動(dòng)手機也會(huì )使用這種方式。
3.尺寸
圖片并列的布局趨勢,也讓卡片更好的使用大尺寸屏幕。
大卡片上能布局更多的細節和復雜的字體,它從視覺(jué)上讓用戶(hù)感覺(jué)很舒服。大小卡片交替的時(shí)候,大卡片在視覺(jué)上更讓人感覺(jué)舒服。
Arkitekter(如上圖)是怎樣應用大尺寸和中等尺寸作為信息布局的。有些卡片有鏈接,有些卡片是靜態(tài)的信息。大小不同的卡片呈現方式,讓整個(gè)頁(yè)面更有呼吸感。
4.可穿戴的
多虧了谷歌眼鏡,它讓卡片的UI設計在穿戴設備上奠定了基礎。
盡管有很多人認為谷歌眼鏡會(huì )失敗,但是也有一部分人認為它有市場(chǎng)。不管怎樣,穿戴設備的UI設計必須要很好的利用空間來(lái)設計,而卡片設計是它最實(shí)用的選擇。
要點(diǎn)
在所有的媒介和設備上,卡片設計已經(jīng)成為設計常用的一種方式。他們當前的形式可能會(huì )隨著(zhù)技術(shù)的發(fā)展隨著(zhù)技術(shù)有所改變,但是他們確實(shí)是存在的。
畢竟,這些布局并不是一個(gè)表格。別忘了,在不久前卡片只是一張包含內容的紙片而已。
當前,卡式的網(wǎng)站建設以精簡(jiǎn),重點(diǎn)內容突出的表達形式受到用戶(hù)的歡迎,跟著(zhù)趨勢走的網(wǎng)站必然不會(huì )被淘汰。
本文由奇億網(wǎng)站建設原創(chuàng ),原文地址:http://www.studstu.com/news/1378.html,轉摘請保留版權,謝謝。



















