search
[ 平面理論教程 ] 詳細解析卡片式設計長盛不衰的秘密- 設計教程 - 骨子愛創意

[ 平面理論教程 ] 詳細解析卡片式設計長盛不衰的秘密- 設計教程 - 骨子愛創意

教學主題: 詳細解析卡片式設計長盛不衰的秘密

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 詳細解析卡片式設計長盛不衰的秘密

這教學的重點為這幾點 [ 秘密,設計,解析,卡片,詳細,內容,用戶,能夠,這種,不同, ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

可以說現如今的移動端UI設計中,卡片式設計撐起了半壁江山,它隨性自由又充滿了邏輯和組織性,它不僅流行着,而且還正在變得更加流行。它長盛不衰的秘密到底何在。

可以說現如今的移動端UI設計中,卡片式設計撐起了半壁江山,它隨性自由又充滿了邏輯和組織性,它不僅流行着,而且還正在變得更加流行。它長盛不衰的秘密到底何在。

個性化的用戶體驗是目前網頁和APP設計的大趨勢。個性化的新體驗大多建立在單獨內容的聚合體之上,而多類型的內容想要聚合起來,卡片式的界面則是最合適的載體。如今你所看到的UI界面設計,卡片式設計幾乎無處不在,從新聞類站點到遊戲界面,從物流APP到社交媒體,等等等等。今天的文章將會詳細解釋卡片式設計對於設計師的意義,以及常見的卡片式設計的功能與特性。

詳細解析卡片式設計長盛不衰的秘密

什麼是卡片式設計

我們在各個APP中常常見到的那些承載着圖片、文字等內容的矩形區塊就是我們所說的卡片,它們作為不同類型內容的入口而存在,當你點擊它的時候能夠看到看到更多詳細的內容。卡片是對這種內容容器的最形象的稱謂,它們和現實世界中的卡片非常相似。




在卡片正是“入侵”用戶界面之前,各式各樣的卡片存在於我們周圍:銀行卡,身份證,名片,甚至連便利貼都算是卡片。所以,我們對於卡片有着極為直觀的認知,它存在於我們周圍,每天都和我們打交道。當我們面對卡片式界面的時候,會下意識地接受它們形同卡片的屬性,自然地與界面進行“卡片式”的交互。

詳細解析卡片式設計長盛不衰的秘密

棒球卡就是現實生活中最常見的一種卡片,卡片的一邊是棒球運動員的形象和姓名、球隊,翻過來之後能夠看到更多更加詳細的內容和信息。

卡片的優勢

當卡片從現實生活走進移動端界面之後,它開始成為真正強大的工具,內容以卡片為載體,化作更容易為用戶所消化的內容。用戶可以更為輕鬆方便地選取並獲得他們想要的內容,下面的幾個實例能夠為你揭示卡片適合在UI中使用的原因:

內容塊

詳細解析卡片式設計長盛不衰的秘密

卡片將信息以區塊的形式組織到一起,用戶也喜歡閱讀成塊的內容,因為它們更為集中更適合閱讀:這種設計讓內容不會以長篇大論的形式出現,避免因為內容太長讓用戶產生畏懼心理,簡單明快的內容更容易引起用戶興趣,用戶也因此能夠選擇是否要繼續閱讀下去。卡片將內容提取、優化為有意義的區塊,而且不同類型、屬性的內容可以在卡片上組合稱為有機的、連貫的聚合體。

易於挖掘

卡片也是承載故事的可靠工具,內容在卡片中更容易為用戶所消化,用戶可以輕鬆地訪問感興趣的內容,以自己想要的方式參與進來。




詳細解析卡片式設計長盛不衰的秘密

用戶可以快速的掃視、翻看卡片。

視覺上的愉悅感

詳細解析卡片式設計長盛不衰的秘密

基於卡片的設計通常會嚴重依賴於視覺設計。而事實上,圖片的使用也確實是卡片式設計的強項。研究表明,好的圖片能夠極大的提升APP和網站的視覺,讓用戶獲得愉悅感。卡片式設計在圖片素材上的強調使得它更加具有吸引力。




兼容不同尺寸的屏幕

詳細解析卡片式設計長盛不衰的秘密

卡片最突出的特性就是它在可操作性上有着近乎無窮的可能性。這也使得它稱為了響應式設計的最好選擇,因為卡片可大可小,是自由可控的內容容器。也正是這一特性,使得卡片成為了跨設備跨屏幕的UI設計的首選元素,它能帶來一致的體驗。

以人為本的設計

詳細解析卡片式設計長盛不衰的秘密




說卡片式設計是以人為本的並不為過,因為它非常適合移動端小屏幕和手指操作,它近乎是為你的手指而定製的存在。簡單易用,和物理世界的一致性,以及易於理解的交互模式都是它的優勢。

最佳案例

卡片式設計正處於桌面度和移動端設計的交叉點,它彌合了兩種界面在可用性和交互性上的溝壑。但是成功的卡片式設計需要具備清爽乾淨的美學特徵,並且能讓用戶直接輕鬆地交互。

卡片流

詳細解析卡片式設計長盛不衰的秘密




卡片能夠構成信息流,創建事件流和時間軸。比如Facebook 的 Feed 就用卡片來承載事件的快速預覽,Facebook 採用的是無限滾動加載的模式,每個卡片都是單獨的,這使得其中的信息更易於承載,也更容易分享。這種交互模式促使用戶在平台上更多地分享信息。

發現與探索

詳細解析卡片式設計長盛不衰的秘密

卡片式設計允許相關的信息自然地顯示出來,讓用戶能夠更加深入地了解自己感興趣的內容,著名的設計創意社區Behance 就是這麼做的。

詳細解析卡片式設計長盛不衰的秘密




Tinder 則是另外一個值得學習的案例。這個應用藉助卡片式設計的這種探索發現的機制,讓用戶習慣性探索更多內容,從而推進這個產品成為最流行的移動端應用。Tinder 的這種機制並不複雜,喜歡的話,向左滑,不喜歡則向右滑。這種有趣而簡單的交互令人上癮,尤其是當這種交互能夠行之有效地幫助用戶找到更感興趣的內容。

工作流

詳細解析卡片式設計長盛不衰的秘密

卡片式設計能夠幫助用戶更好地進行列表歸類。Trello 的任務列表就採用了卡片式設計,它很好地作用於用戶,幫助用戶管理任務和工作。

對話框




詳細解析卡片式設計長盛不衰的秘密
貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

卡片不僅是內容的容器,它同樣也是操作和交互的載體,通常它的功能和對話框類似。蘋果設備上的 AirDrop 服務就將卡片作為用戶操作和交互的載體。當有數據傳輸的請求之時,系統會彈出一個卡片,你可以在卡片上選擇接受內容或者拒絕。這種卡片能夠承載各種不同的交互和內容,相當的實用。

控制面板

詳細解析卡片式設計長盛不衰的秘密
貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
的選區;按住Alt鍵將從起始點為中心勾劃選區。

當卡片用來組織不同來源的內容的時候,它有着極高的處理精度。使用卡片你能將信息聚合成符合邏輯的分組,甚至可以根據特定的上下文和背景進行有效的排序。來自不同來源的內容根據規則被整合成不同的分組,這也是卡片式設計的優勢。




基於卡片的設計語言

詳細解析卡片式設計長盛不衰的秘密

2010年的時候,微軟推出了Metro設計語言。這種設計語言的一個關鍵原則就是關注應用的內容,而這通常是通過扁平化的元素、排版和卡片來實現的。一個Metro 卡片不僅僅是單純的設計元素,它還承載了內容和必要的交互。

詳細解析卡片式設計長盛不衰的秘密

谷歌所提出的Material Design 設計則採用了紙的隱喻,同樣是一種典型的卡片式設計,目前仍然是主流的設計語言。Material Design 和 Metro 有着許多共通之處,它也更加接近於扁平化2.0的設計特徵。




簡約

詳細解析卡片式設計長盛不衰的秘密

當你開始採用卡片式設計的時候,簡約應當是你始終牢記的一個原則。Carrie Coucins 對此有個很好的建議:一個卡片元素能夠包含多個元素,但是最好每次都專註於其中的一個內容或者信息。這樣的設計能夠讓用戶進行更加精準的選擇,也使得內容可以更加準確地消費和分享。

響應式設計

詳細解析卡片式設計長盛不衰的秘密




我們都很清楚如今響應式設計的重要性,要讓自己的應用和頁面能夠在不同尺寸的屏幕上正常的使用。當我們為不同的屏幕設計的時候,應當充分了解屏幕特徵和所用的卡片與內容的屬性,這樣才能根據屏幕的大小快速、輕鬆地調整內容。卡片式設計呈現出了與響應式框架良好的兼容性,它可以輕鬆適應不同的屏幕尺寸和響應式設計的斷點。

詳細解析卡片式設計長盛不衰的秘密

數字化之後的卡片能夠以不同的方式進行操控,這也是它的一大優勢。橫向或者縱向排列,堆疊,排列等等等等。

詳細解析卡片式設計長盛不衰的秘密

卡片與排版




卡片上的一切內容都應該擁有良好的可讀性:

·選擇簡單且易於識別的字體,以及擁有良好對比度的配色方案

·嘗試控制字體的數量,對於絕大多數的項目,單個字體就好

結語

對於絕大多數的人而言,很難理解為何卡片式設計為何如此受歡迎,並且人氣還在持續增長中。相信我,這種趨勢並不會那麼快結束的,卡片式設計將會是UI設計的大勢索取,並持續很長時間。卡片式設計的強大可用性是它的生命力來源,簡約的設計和豐富的承載形式將會讓卡片式設計走的更遠。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 詳細解析卡片式設計長盛不衰的秘密 這教學會喜歡

文章標題: 骨子愛創意- 詳細解析卡片式設計長盛不衰的秘密–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 秘密,設計,解析,卡片,詳細,內容,用戶,能夠,這種,不同,

本文永久連結 :詳細解析卡片式設計長盛不衰的秘密

本文轉載自 :VIA

熱門推薦

本文由 愛創意 提供 原文連結

愛創意
寫了3813篇文章,獲得1次喜歡
留言回覆
回覆
精彩推薦