卡片式設(shè)計(jì)在移動(dòng)UI中的運(yùn)用及其優(yōu)勢(shì),大學(xué)論文

卡片式設(shè)計(jì)在移動(dòng)UI中的運(yùn)用及其優(yōu)勢(shì),大學(xué)論文內(nèi)容摘要：隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來以及智能手機(jī)的迅速普及，用戶想要更快速地獲取信息，卡片在APP中起到歸類和劃分頁面信息的作用，卡片式設(shè)計(jì)已經(jīng)是UI設(shè)計(jì)中最常用的方式之一。本文從卡片的起源和定義入手，分析了卡片在UI設(shè)計(jì)中的應(yīng)用以及卡片的優(yōu)勢(shì)和注意事項(xiàng)，可給設(shè)計(jì)師提供更多的設(shè)計(jì)參考。本文關(guān)鍵詞語：UI設(shè)計(jì);卡片式;界面設(shè)計(jì);現(xiàn)如今的移動(dòng)UI設(shè)計(jì)中，市場(chǎng)上的APP中會(huì)看到很多的卡片式設(shè)計(jì)的案例，卡片個(gè)性自由又充滿了邏輯性，變得越來越流行。在各個(gè)APP中承載著圖片、文字等內(nèi)容的矩形區(qū)域就是卡片，卡片存在的方式多種多樣，當(dāng)點(diǎn)擊卡片時(shí)會(huì)看到更深一層級(jí)的具體信息。很多APP的交互界面會(huì)使用到信息卡片的設(shè)計(jì)，卡片效果不僅能夠提升畫面的豐富性，同時(shí)可以以很好的進(jìn)行信息收納，以及提升同類信息的視覺層級(jí)。1卡片的起源和定義卡片的起源，卡片作為內(nèi)容的宣傳媒介已經(jīng)存在很長(zhǎng)時(shí)間了。公元9世紀(jì)，中國(guó)就使用卡片來做游戲;17世紀(jì)時(shí)，倫敦的商人利用卡片來招攬生意;18世紀(jì)，歐洲貴族家庭的仆人會(huì)用卡片向主人介紹即將登門拜訪的貴賓;而人們交換名片的傳統(tǒng)也已持續(xù)數(shù)百年。在現(xiàn)實(shí)生活中，我們使用的公交卡和節(jié)日賀卡，以及各種銀行卡、信譽(yù)卡，甚至身份證、駕照等各類信息都是一張張的卡片。還有照片、明信片等也都是承載著特殊情感故事的卡片。而在UI設(shè)計(jì)中的卡片是我們從現(xiàn)實(shí)生活中的物質(zhì)向虛擬世界的一種延伸，將我們生活中常見的卡片轉(zhuǎn)換到我們的產(chǎn)品設(shè)計(jì)當(dāng)中作為內(nèi)容的載體出現(xiàn)。簡(jiǎn)而言之，卡片就是能夠承載信息的容器?？ㄆ軌虺休d不同類型的內(nèi)容，其元素能夠包含:圖片、文字、視頻、按鈕、優(yōu)惠券、音樂、付款信息、注冊(cè)表單、社交媒體流或共享、獎(jiǎng)勵(lì)信息、鏈接以及以上元素的任意組合?？ㄆ簿褪浅休d一些圖片和文字信息的容器，作為跳轉(zhuǎn)下級(jí)頁面的入口。不同的卡片都遵循在一個(gè)統(tǒng)一寬度和樣式的卡片內(nèi)，進(jìn)行發(fā)揮和設(shè)計(jì)。既保證了卡片和卡片之間的獨(dú)立性，又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計(jì)。用卡片當(dāng)作不同內(nèi)容的載體，會(huì)使得層次簡(jiǎn)單易懂，用戶易于滑動(dòng)閱讀。2卡片式設(shè)計(jì)在移動(dòng)UI中的運(yùn)用卡片簡(jiǎn)單易懂，用戶不需要考慮事情怎樣發(fā)生，可自然而然的開創(chuàng)建立舒適的用戶體驗(yàn)。當(dāng)用戶與卡片進(jìn)行交互時(shí)，能夠分成幾種行為形式。卡片通常會(huì)做三件事:記錄信息、用信息吸引用戶或提醒用戶信息。根據(jù)卡片的內(nèi)容元素，將卡片進(jìn)一步細(xì)化為不同類型容器。第一，敘述:卡片以瀑布流形式出現(xiàn)，同時(shí)開創(chuàng)建立事件發(fā)展的時(shí)間軸。第二，發(fā)現(xiàn):卡片能讓相關(guān)內(nèi)容自然的呈現(xiàn)出來。采用網(wǎng)格或瀑布流布局時(shí)，使用淡入效果展現(xiàn)卡片，會(huì)讓用戶覺得好玩和身在華而不實(shí)。例如，當(dāng)你向左或向右滑動(dòng)，展現(xiàn)符合你口味的歌曲。第三，對(duì)話:由于卡片是相對(duì)獨(dú)立的，它們能夠完美展示正在進(jìn)行的對(duì)話。第四，工作流:卡片能夠?qū)⒋k事項(xiàng)快速歸類。例如，開創(chuàng)建立不同的筆記或待辦事項(xiàng)的卡片，當(dāng)用戶刪除時(shí)，剩余的卡片根據(jù)初始順序重新排列。在手機(jī)APP中，用戶能夠清楚明晰地感悟到距離接近的信息在一張卡片之上，卡片通常會(huì)有一個(gè)大的底色來做背景，以使卡片的視覺層次效果愈加明顯。結(jié)合卡片的宮格式布局能夠?qū)㈨撁娴囊曈X層級(jí)變得愈加清楚明晰，豐富界面設(shè)計(jì)?？ㄆ降男畔⒘鞔笾驴煞譃橐?guī)則和不規(guī)則兩種形態(tài)，如嗶哩嗶哩APP中的首頁推薦頁面，就是規(guī)則卡片形式，而淘寶首頁推薦的卡片信息就是不規(guī)則卡片的瀑布流形式地運(yùn)用，根據(jù)接近性原理一個(gè)卡片是一組信息，而寬度一樣高度不同的卡片效果上下錯(cuò)落有致，使頁面顯得不那么呆板，不僅豐富了畫面感，還能夠緩解視覺疲憊。3卡片式設(shè)計(jì)的優(yōu)勢(shì)卡片的本質(zhì)是更好的處理信息集合，卡片式設(shè)計(jì)提升了用戶的操作體驗(yàn)?？ㄆ皆O(shè)計(jì)的優(yōu)勢(shì)有如下幾點(diǎn)。第一，增加空間利用率，在傳統(tǒng)列表下，內(nèi)容一般為縱向滾動(dòng)操作，展示的內(nèi)容有限。而采用卡片式的布局，在縱向的內(nèi)容流里，還能夠很好的增加橫向滑動(dòng)的內(nèi)容區(qū)域。卡片能夠利用橫向交互來提高空間的利用率，將部分內(nèi)容隱藏在橫軸的空間當(dāng)中，在屏幕可視的空間范圍內(nèi)通過交互展示更多的內(nèi)容。例如淘票票在熱映電影的模塊中通過橫向軸交互，將部分內(nèi)容隱藏在橫軸的空間中，提高了控件利用率，在有限的空間內(nèi)展示更多的電影信息。第二，能夠提升界面的可操作性，我們提到卡片是一種擬真元素，交互設(shè)計(jì)能夠被覆蓋、堆疊、移動(dòng)、劃去，這樣能更好的拓展內(nèi)容模塊的視覺深度和可操作性。比方:iPhone自帶的提醒事項(xiàng)APP，就是采用卡片堆疊的方式，用戶可根據(jù)標(biāo)題快速查找目的備忘錄，同時(shí)進(jìn)行點(diǎn)擊操作，打開或刪除卡片內(nèi)容。第三，卡片設(shè)計(jì)視覺統(tǒng)一性強(qiáng)，由于每一個(gè)卡片都是由承載層和內(nèi)容層組成，形式上統(tǒng)一，所以在視覺上有很強(qiáng)的一致性?？ㄆ皆O(shè)計(jì)能夠?qū)?fù)雜的信息元素包在一個(gè)容器中，根據(jù)一樣的規(guī)范布局來展示不同的信息，采用了一樣的設(shè)卡片計(jì)樣式，具有極強(qiáng)的視覺一致性，能夠幫助用戶快速簡(jiǎn)歷視覺流，提高用戶閱讀的效率，減少閱讀時(shí)其他因素的干擾。第四，利于信息分層和整合，在卡片式設(shè)計(jì)中，一張卡片就是一個(gè)信息模塊，用戶即便快速閱讀，也不會(huì)產(chǎn)生混亂。塊狀的卡片使得頁面愈加整潔美觀，同一頁面中卡片的不同大小，還區(qū)分了信息的重要等級(jí)。第五，卡片設(shè)計(jì)能夠突出重點(diǎn)內(nèi)容，卡片具有很強(qiáng)的獨(dú)立性，具有空間感。在頁面設(shè)計(jì)中，我們能夠通過卡片與周圍環(huán)境的差異，來突出的我們的想要展現(xiàn)的內(nèi)容。且通過卡片營(yíng)造的空間感以及視覺層級(jí)的優(yōu)先級(jí)，卡片能夠愈加吸引我們的注意力，讓我們的愈加專注當(dāng)下內(nèi)容。4卡片設(shè)計(jì)的注意事項(xiàng)由于卡片式設(shè)計(jì)能夠承載各種類型的內(nèi)容，需要設(shè)計(jì)師在設(shè)計(jì)卡片時(shí)要有規(guī)范性和創(chuàng)意性，使用適宜的排版、尺寸、圓角以及良好的陰影和漸變效果，讓您的卡片為用戶提供愈加舒適的視覺感受。以下為卡片設(shè)計(jì)需要注意的地方:第一，了解陰影及特點(diǎn)。為了讓投影和漸變的元素愈加真實(shí)，了解陰影特點(diǎn)在卡片設(shè)計(jì)中顯得尤為重要。假如陰影投在整個(gè)卡片的邊和角上，就會(huì)喪失卡片載體的物理交互感。第二，留白很重要?？ㄆ舭椎闹匾圆谎远?，先給卡片一些空間恰當(dāng)?shù)靥砑觾?nèi)容。假如卡片信息內(nèi)容過于繁瑣，會(huì)使用戶產(chǎn)生疲憊感和膩煩感，而留白的使用能夠增加卡片內(nèi)容的呼吸感，有效減少使用經(jīng)過中的壓力，幫助用戶找到重點(diǎn)信息?？ㄆ畔⒃胶?jiǎn)約，設(shè)計(jì)目的和針對(duì)性就越明顯。第三，增加圖文排版的比照性。比方通過字體大小、字體粗細(xì)來吸引用戶的注意力。簡(jiǎn)單的圖文排版其視覺效果是最好的，加之非襯線字體，會(huì)給卡片一些美感上的潤(rùn)色，這樣的卡片會(huì)看上去既有熟悉感又富有創(chuàng)意。諸如陰影之類的元素，在很大程度上能幫助用戶聯(lián)想到實(shí)體卡片。第四，在無色系中保證UI清楚明晰。在無色系的條件下設(shè)計(jì)，必須考慮其可用性和所包含的內(nèi)容，在這里基礎(chǔ)上有目的添加顏色。為了讓卡片信息看起來足夠清楚明晰，能夠在卡片背景使用深色蒙層，把背景做模糊處理，來突出卡片信息。第五，卡片圓角的情感性。在同一個(gè)APP中，所有卡片一般會(huì)使用一樣的圓角大小。圓角越大，產(chǎn)品越圓潤(rùn)有趣，更具有親和力，但缺乏穩(wěn)重感;圓角越小，則越嚴(yán)謹(jǐn)安全，當(dāng)圓角為0時(shí)，不管是從視覺還是感覺上，都會(huì)顯得過于鋒利尖銳，產(chǎn)生距離感，愈加具有權(quán)威性。在設(shè)計(jì)中我們需要根據(jù)產(chǎn)品本身的特點(diǎn)來選擇卡片的圓角，不能隨意濫用不同的圓角大小。5結(jié)束語卡片式設(shè)計(jì)幾乎成為當(dāng)下界面設(shè)計(jì)的主流形式，并且已經(jīng)深切進(jìn)入到各個(gè)行業(yè)、領(lǐng)域的UI設(shè)計(jì)當(dāng)中?？ㄆ鳛樾畔⑤d體，也使得卡片式UI成為當(dāng)代移動(dòng)應(yīng)用設(shè)計(jì)的一部分。相比傳統(tǒng)單一的頁面設(shè)計(jì)，卡片設(shè)計(jì)提供更多個(gè)性化的用戶體驗(yàn)，使界面設(shè)計(jì)清楚明晰平衡、富有美感、簡(jiǎn)約時(shí)髦而又具備良好可用性。而卡片作為容器，能夠適