網頁設計技巧:不為人知的卡片式設計秘密及技巧

網頁設計技巧:不為人知的卡片式設計秘密及技巧 - 網頁設計, 網站設計, 網頁方案, Website Design, 網絡推廣

近年來,為什麼那麼多設計師都喜歡使用卡片式設計?作為當前界面設計的一種主流模式,卡片設計不僅是現代網頁設計APP設計的重要部分,更因為它能給用戶帶來更多個性化的體驗。與其他傳統網頁設計模式相比,卡片設計富有美感又具備良好的可用性,還能兼容多種終端設備的屏幕,不會破壞信息的展示效果。

今天香港網頁集團將為大家講述卡片式設計的秘密和技巧,希望能給各位帶來更多的設計靈感。

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

卡片式設計有什麼好處?

好處一:增強熟悉感和可操作性

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

在我們的生活中早已充斥着「卡片設計」,例如:信件、名片、遊戲卡等,都是我們非常熟悉的物件。

大多數卡片設計都是擬物化設計,可以划動、堆疊、覆蓋、伸展等方式,更能增加人們對卡片的熟悉感,同時還能提高卡片設計的可錯作性。

好處二:有利於信息的整合和分層

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

每個卡片都是一個獨立單元模塊,透過空間留白、圖片、陰影等,能將用戶的視覺焦點在卡片上,同時還能區分出界面中的重要等級信息。此外,卡片式設計還能達到整齊美觀的效果,從而不會讓用戶產生混亂。

好處三:有利於自適應布局設計

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

卡片式設計能擺脫以往古板單調的網格單元格式排版,即使圖片比例不對,都能為設計師帶來便利且愉悅的體驗,同時在視覺上給予用戶輕鬆自由之感,以及適應不同終端設備的屏幕,減少設計師的工作量。

卡片式設計的缺點有哪些?

雖然卡片設計有很多有限,但因為卡片式設計自身的特性所限,同樣也有不少缺點。

卡片設計對頁面空間的消耗非常但,當卡片內容過長,用戶需要進行沉浸式閱讀時,反而會讓用戶產生距離,並打斷原有的閱讀或操作。所進行長文本的陳述或強關聯閱讀類內容進行排列時,盡量避免使用卡片設計。

卡片劃分的邊界會消耗一定的空間,內容元空間如果和劃分空間比例相近,或內容空間大量重複容易區分和感知的內容時,會扼殺卡片設計的優勢,反而增加負擔。

優質卡片設計案例欣賞

1.Google Play

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

Google Play整個網站設計都運用大量卡片設計,無論是首頁推薦還是細分類別,都使整個界面看起整齊大方,具有條理性,配合滑動交互設計,給用戶帶來極強的操作感。

2.Quora

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

Quora機智地使用卡片設計,不僅讓有限的版面有條不絮地展示,網頁內容亦兼顧用戶體驗及友好性。卡片將內容提取、優化為有意義的區塊,更容易吸引用戶有興趣繼續閱讀下去。

3. Linkedin

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

當文字、圖片、連結都集中在同一個卡片時,面積較大的圖片正是卡片的中心,也是整張卡片的最大可點擊範圍。伴隨鼠標移入與網頁產生的交互,用戶即可獲得「可點擊」的反饋。

4. Pinterest

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

與Linkedin的內容圖展示並且可點擊類似,Pinterest圖片流的每張圖都具有可點擊性,而且添加陰影和深度,增加視覺感知力,強化的它的可見性及知覺上的「可點擊性」。

5.Dribbble

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

研究發現,圖片可提升網頁設計或APP設計的吸引力。卡片設計通常需要依靠視覺設計,Dribbble彙集大量視覺圖片,使用卡片設計無疑是一大亮點。

6.Instagram

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

Instagram作為一個以圖片為主的APP,所有圖片都以正方形發佈,保證圖片在信息流里的寬度,使整個界面變得整齊美觀。除了圖片,卡片還承載文字和功能信息,三位一體形成完整的功能模塊。

7.Trello

網頁設計技巧:不為人知的卡片式設計秘密及技巧
網頁設計技巧

Trello採用卡片式設計,讓任務列表可以靈活運用,使其更好地作用於用戶,幫助用戶管理任務和工作。

8.Airbnb

網頁設計技巧

作為一款房屋租賃軟件,Airbnb的設計重點在於視覺設計。Airbnb的卡片採用無框設計,統一且重複的信息元素,使內容變得更規略有條理,也給人營造出比較整體的感覺。

需要對不同信息進行整合,提高用戶獲取信息速度,減少用戶思考時間,卡片設計是個不錯的選擇。但如果只是為流行而選擇卡片設計,可能會界面視覺設計獲得反效果。


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk