壹、白底圖:適合展示套裝、配件、圖案白底圖:底色純凈,適合展示外觀深色商品,當商品是套裝,將套裝內細小配件拆解開,逐壹展示,會對訂單轉化起正向提升作用,用場景圖展示套裝,不如白底圖有優勢。白底圖的優勢:把商品套裝、以及包裝內容物展示得清晰直觀,比單純展示場景更吸引買家的註意力。例如下面的玩具商品首圖,白底圖多角度展示玩具造型,對吸引買家下單起到正向提升作用。
二、場景圖:適合於展示商品功能類、美學打造、首飾類商品場景圖:對於強調功能屬性的商品,場景圖比白底圖有優勢,場景圖通過畫面美感,場景衍生等功能,讓這類功能屬性商品的購買者產生聯系感。總結:功能屬性、強調美學感的商品,場景圖轉化率往往優於白底圖,買家通過主圖獲得情境代入感,對加購和訂單轉化起到正向提升作用。例如下面的這是壹款放大鏡,右邊場景圖展示功能相比左邊白底圖更形象具體,更能傳達賣點。
三、拍攝方向:首飾、食品類目平視優於俯視原因:平視適宜展示造型,俯拍適宜展示全景、食品類平視拍攝普遍比俯視轉化率要高總結:對於時尚類商品,拍攝前要在照明下仔細觀察它們的造型特點,金銀首飾表面造型雖有堅挺與圓潤的區別,但總會在特定的方向照明時才會光耀動人;食品類的主圖平視角度拍攝普遍比較俯視轉化率高。
四、模特作用:服飾類目搭配模特利於轉化時尚類目,服飾內衣類目,搭配模特使用場景且主圖無拼接的大圖,對轉化起到正向提升作用。總結:服飾類主圖,首圖建議放帶模特的大圖,後邊幾張輔圖再放拼接圖、細節圖,這樣轉化率比較高。
文章從店小魚電商賣家助手分享來的,可以去官網自己搜壹下。
卡片式布局界面的小技巧正確認識卡片式設計,什麽是卡片、總結卡片優勢、卡片正確設計知識通過設計兩個案例進行講解,卡片在運用時的技法,希望能幫助大家。
無論是WEB還是APP卡片式設計運用的比較多,很多UI設計師比較偏愛這樣的表現,卡片式設計會給人壹種視覺上的享受,也能對於界面具有層次感。但往往在卡片設計中有壹些技法還是需要了解,不能因為卡片式設計而卡片式設計,要能更好的應用到界面場景中。希望在這次分享中壹些知識點能幫助到大家,之後的幾篇系列文章中,順叔會從界面中比較趨勢的設計技法進行分析,希望能幫助到壹些設計的小夥伴。
教程前的引言
卡片式設計這幾年比較流行,同樣這樣的設計表達也是個趨勢,應用在APPPC界面中至今還流行著,從事UI設計的都會知道卡片式設計,具有把內容整合模塊化,從視覺,個性化體驗上進行呈現,是設計師在設計時常用的壹種表現,同樣也具有獨特的創新概念。
在壹些項目中,壹些客戶會說這個設計的APP界面有點太白,沒有層次感怎麽辦,那這時妳應該和客戶說在APP設計中運用了現在比較流行的壹個表現手法,卡片式設計,可以解決在畫面中有個性化、變化、層次感的設計。那客戶又問什麽是卡片式設計呢?
無處不在的卡片設計具有個性的美感和很好的易用性,是以文字標題,小標題,圖形或圖片組成的模塊化,以塊狀形式規整的整合內容,讓內容更規整化,視覺上更個性化,也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中壹個比較流行趨勢,而卡片在設計中也占用壹定的優勢,讓整體更加的有層次感,在運用起來也比較方便,從視覺、體驗、交互都具有不錯的優點。
為了這個文章特意設計了兩個案例,通過這兩個案例進行壹些講解。請見下圖:
無論是大平臺還是小平臺的產品都會運用這樣的卡片式,跟風式設計趨勢,也讓卡片式設計成為了壹個現在常用的優勢,不過卡片式設計的確有很好的效果。
具有壹定的層次感,能在頁面版式中起到設計上的不同,個性化變化,頁面層次感區分強烈,能更好的體現提煉出內容。
卡片式設計以圖片、圖標、LOGO、標題、整合到壹起以塊狀的形式在界面中展示,更規整的排版呈現。雖然內容多會導致頁面亂,壹個模塊包含內容之後就會規整不少,也給頁面設計上帶來了更好的視覺。
卡片式給整個頁面會增加視覺上的體驗,特別那種大圖片卡片式更具有視覺上的沖擊力,背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感。卡片式設計還是需要根據整個布局、產品需求、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
卡片式設計在易用性和靈活性上比較高,在響應式設計中同樣應用的也比較多壹些。能更好的有序排列。
簡約設計會更顯得品質,不需要過多的進行裝飾,哪怕就是壹個白色的色塊,上面點綴有色彩的圖標和標題副標的變化,也會覺得顯得高大上,就算是壹個帶有顏色的色塊卡片,也無須過多的設計內容上的標題、圖標、按鈕就足以支撐起卡片。
在卡片式的設計中會有壹些動效交互,比如整體卡片放大、縮小、左滑、右滑,可以整模塊化滑動縮放。整體效果增加了不錯的視覺交互體驗。
壹般在界面設計中卡片的存在的意義和表現手法都是什麽樣的呢,下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小夥伴在設計的同時有所靈感和參考,把壹些表現手法加入到自己的設計中,適合才最重要。卡片式設計還是要根據整個風格和整個布局而進行展示,在做進壹步的對比和布局中以最好的效果為最終展示方式,總結分析幾個常見代表例子,如有不全請討論補充,下面就是壹些例子:
以色塊為主體並用現在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個是在卡片中設計比較常見的運用手法,卡片的長高在設計中也是根據結構,內容功能而進行設定。正方形,長方形都是壹個表現得手法,在色塊上面標題文字,圖標,圖形是整個卡片的布局的形式,無非就是左右布局和上下布局
應用場景:卡包、天氣、類別、入口、優惠唬卡
這種形式***同點都是在頭部C位出現的卡片式設計,其中承載著標題,副標題,以及圖文版式,不難發現,如果圖片有顏色,那麽下面是白色底,這樣在白底上面色塊的出現還是比較簡約凸顯卡片,如果背景有顏色,卡片也有顏色那麽卡片的凸顯程度就不會那麽強,圖二很多在會員卡設計中常用的比較多,也比較簡約,另外兩個***同特點背景有顏色,壹般底部背景顏色就是整個界面的主色調,背景有色塊,上面就用白色卡片,卡片上方標題、文字、圖片呈現。只不過排版的方式有所不同而已,在很多APP設計中,這樣的表達也很多,通過主色調可以很融合的把上面的狀態欄,導航欄融為壹體視覺上統壹性,底部背景顏色延續下來,上面凸顯白色卡片,這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾,更能體現的上面的文字和圖片。
應用場景:會員卡,滑動卡片,圖文標題,入口
這種形式上圖下文字,或者是上標題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺效果好的圖片通過剪切,處理,合成,攝影,插畫等等方式,出現的圖片質量上好的話可以帶動整個設計的逼格,通過有效的圖片傳達,文字傳達,讓用戶更清晰的了解。這樣的形似壹般在入口或者列表的形式出現的比較多,同樣也能體現出整體化和視覺化
應用場景:滑動卡片,圖文標題,入口,列表
大圖卡片式,壹般以攝影圖片,插畫形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗也很不錯,放大視覺,展示內容,圖片相結合,讓瀏覽者更願意多看壹會。表達的圖片與文字內容相符,做到圖文交融的程度。壹般這樣對於圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景:列表,說明,入口,天氣
列表卡片設計,這種形式壹般白色的卡片,上面標題,頭像,按鈕,扁平插畫形式體現,更多應用在壹級頁面的下方內容,以及二級頁面的列表頁或者集合頁,整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時,體現上面內容部分。每個模塊的單元體具有統壹的視覺。
應用場景:列表,集合頁,入口
大卡片式設計,表現為壹塊特大的卡片式,上面會有標題,按鈕等信息,同樣表現出突出層次感,個性化設計的特質。體現出內容,壹般背景有顏色上面卡片為白色,如下面背景為白色,那麽卡片的形式也可色塊,在對比上有個反差,才能突出卡片的作用性。
應用場景:提示,說明,優惠唬唬入口
以上總結的幾種卡片的形式,在設計中可以根據情況而設計,卡片多樣化,布局多樣化,適合自己產品的才最重要,雖然在界面設計中常用的設計,但不要盲目的為了卡片而卡片套用設計,這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來壹些靈感和啟發。
同樣在這些卡片中會有壹些基本的***同的特點:
1.四個角都是圓角
2.根據潮流漸變色或白卡片
3.色塊下的陰影,色塊下的陰影更能體現出層次
4.卡片上面組成部分,標題,副標題,圖形,按鈕,圖片,頭像
5.字體大小,字體顏色的變化
6.壹般卡片應用在會員,列表,說明,優惠唬分類,類別,集合頁,歡迎頁等場景常見
為了講解文章,順叔臨時構思壹個產品原型,而快速進行了簡單的設計,壹個第壹版,壹個優化版,主要為了講解壹下這個卡片設計壹些問題,
以下此圖為構思的原型圖:
經過分析原型圖之後開始進行設計,首先設計壹個版本的,如果這樣卡片布局設計,這樣色彩搭配的情況下,會怎麽樣呢,整體設計用了藍紫色為主色調,首先鋪藍紫色的色塊作為背景,然後上面放白色卡片,以至於卡片上詳細的內容,比如數字,圖形能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片,通過扁平化設計,以色塊為主設計壹個藍色,壹個橙色的卡片,上面並有圖標,頭像,以及標題,兩個顏色的對比,更讓視覺有沖擊力,整體看這個設計並沒有什麽,但有個問題在於單個模塊拿出來效果的確都不錯,但組成之後上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺,當打開這個界面的時候視覺落點在彩色卡片上,那麽這個整體設計上就出現了問題,上面的數據,白色卡片其實是比較重要的,而且整個畫面都是卡片毫無設計上的變化,
那麽只能在這個基礎上在進行優化,其實大家在做設計的同時也這樣,在考慮功能模塊前提下,用戶體驗,也要考慮視覺體驗,那麽視覺從哪方面來,色彩、層次、版式等等方面。那麽能不能在進行壹下優化呢,其實還是有空間在進行優化。以下圖為第壹版:
根據上面的設計在進行優化,同樣保留白色卡片部分元素,在卡片與卡片之間放壹些顏色的圖標,這樣更好的給功能上快捷入口,也能給卡片設計增添了變化,使得整個畫面更靈活。雖然白色卡片,但有壹些色彩的點綴,也讓白色卡片活躍起來,把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒有那麽跳。整個風格更簡約,同時功能也更全面。
調整後:
從原型圖,再到設計第壹版,再到優化調整之後,證明壹點,卡片不要因為卡片而套設計,反而會失去效果,考慮功能模塊,用戶體驗,視覺體驗也壹定讓整體舒服。壹直都說,繪畫中需要有主有次,設計中也壹定要有主,有次的進行設計,這樣層級關系才能更清晰。
但這些條件壹定是從體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計,前期進行思考,邏輯清楚了,在進行設計的時候會更加的順暢。卡片式設計,大家都在應用,希望這個文章能給大家帶來壹點點知識點。
讀書筆記的小插圖怎麽畫？求圖片方法分為5個步驟,具體如下:
1、讀書筆記的小插畫可以用動物形象,首先畫出頭的輪廓。
2、再給它畫上眼見與鼻子部分,可以畫的簡約壹些。
3、然後再給它畫出身體,四肢與尾巴都要畫出來。
4、畫好後再給小熊的身下畫壹個枕頭,前面畫壹只蝴蝶。
5、最後壹部給小熊塗上相應的顏色,小插畫就完成了。