怎樣做出吸引人的移動端詳情頁
2017-09-04 17:22:25
欄目:網站建設
如何設計出吸引人的移動端詳情頁,請看下面:
一、頭圖一定要吸引人
那么,怎樣才能吸引人呢?以下總結了一些關鍵詞:
關鍵字:大
頭圖得有一個占比比較大的作為主體,無論是產品/模特還是文字,可以第一眼就抓住人眼球。
關鍵字:破
如果你不想畫面太過于保守和單調,可以嘗試打破它,比如將規矩圖形異化,或者讓產品放在界限以外。
關鍵字:美
能用美女或帥哥的地方千萬別浪費了,因為當用戶在瀏覽這些頁面的時候,會感覺是有一位美女或帥哥在對你解說或者讓用戶覺得自己也能成為美女或帥哥一樣,使人身心愉悅,比單純放產品圖更能打動人
如果可能的話,盡量用品質好一點的產品圖或背景素材,使畫面顯得更加美觀
關鍵字:飄
有時在畫面里添加一些飄動的元素,可以增加畫面的層次感和熱鬧氛圍。
關鍵詞:腦洞
這個腦洞,可以是技術方面的也可以創意想法方面的,技術方面的比如合成/手繪/C4D與構圖的運用,創意想法方面其實就因人而異了,并沒有什么固定的套路,然后你能用你所掌握的技術把這些創意想法表現出來就行。
關鍵字:光影
沒有光影的畫面會顯得干癟癟的,光影的存在會給畫面增加更多真實感和質感,賞心悅目,檔次一下就提升了。
二、整體風格要連貫
那么怎樣才能吸引人呢?
關鍵詞:提取
既然詳情頁是為介紹產品而用的,那么我們在做設計的時候當然就可以用提取法了,比如提取產品包裝上的元素或形狀,提取產品的色彩或質感,提取產品的成分或功效,然后應用在詳情頁設計里,我們可以從產品包裝上提取元素應用在詳情頁設計里,保證整體風格連貫性。
形狀,我們也可以從產品的形狀著手,提取基本型進行構圖創作,同様也可以保證統一連貫性。
色彩,如果你想要頁面在色彩上保持連貫,也可以從產品本身的顏色出發,比如采用近似色或對比色也可以。
質感,善用產品的質地或包裝的質感紋理,并提取出來做詳情頁背景用。
成分,食品美裝護膚品詳情頁最喜歡用產品的成分來做文章了,比如草本植物/蘆薈海藻提取物/蜂蜜牛奶等等。
功效,比如補水功效,就會在頁面里用到一些水的特效做氛圍點綴。
三、整體氣質要搭調
那么怎樣才能吸引人呢?
關鍵詞:協調
每一個詳情頁其實對應的就是一款產品一個主題,主題活動或產品不同,其氣質肯定就不一樣了,所以這里的協調反應出來的首先其實是氣質上的協調,比如:
(1)高冷的大牌的氣質
畫面要么很簡潔有質感,有么很華麗有光澤:
(2)活潑可愛的氣質
比如可愛的模特/字體/或粉能的顏色/手繪元素等。
(3)熱鬧促銷的氣質
這種類型的頁面往往色彩豐富艷麗,而且畫面豐富又具有動感
(4)文藝素雅的氣質
這種頁面色彩不會太艷麗也不會特別多彩,往往質感也比較柔和,給人寧靜的感覺。
四、整體瀏覽器體驗要好
那么怎樣才能吸引人呢?
關鍵詞:人性化
如果你能做到前面幾步,那么你可能會產出一份視覺不錯的詳情頁設計,但光只是做到視覺上的美觀還不足以打動人去購買你的產品,你還得給人更好的瀏覽體驗才對,具體表現在以下幾個方面:
(1)在排版布局上
形式不能過于浮夸,那么一些比較常用的布局方式有哪些呢?
左右對比形式的專題頁,常見于需要表現出PK或者VS對決類的專題頁設計。
S形的專題頁,這種形式的專題頁基本上不管什么需求的設計都可以嘗試,因為它相比于平鋪直敘的形式既不會顯得那么呆板,同時閱讀起來也很流暢
Z形的專題頁,這種形式的專題頁其實跟S形的作用是類似的,只是說這種Z形會比S形硬朗,更適合用作一些比較男性化的風格頁面或者品類里,比如電子器械/汽車/男士護膚/游戲等
1 字形的專題頁,有一種硬朗和厚重的感覺,這種形式的專題頁只適合高質量模特大圖或產品圖鎮樓,一般情況下很少用到,尤其是在賣貨類型的專題頁里,可能會顯得背景有點搶鏡了。
常規樓層類型的專題頁,這種頁面會顯得比較簡潔好把控,主要在于背景顏色要有深-淺-深-淺的節奏,同時每一個樓層都是單獨的模塊,有利于信息閱讀。
同理,樓層類型的專題頁還可以做一些一些細微的演變,比如從上至下,背景不做切割,始終是一個整體,只是保證中間的內容在一個安全數值以內就好了
還有在原來的基礎上,在某一塊樓層里做一些排版小變化,比如切分成一小塊一小塊的自由排版:
自由排版類型的專題頁,這種專題頁設計比較適合那些想走高逼格路線的時尚服飾類目,同時這種設計往往是看著簡潔,但是對設計師的排版功力要求比較高,不建議新手或沒什么功力的人嘗試:
(5)年輕時尚的氣質
這種氣質的頁面往往棱角比較分明,色彩上貌似沒什么太多要求
(6)科技質感的氣質
這類氣質的頁面主要是會有一些比較男性化的元素/色彩,比如機械零件/暗色藍色/菱角矩形之類的。
而氣質上的協調又基本是由色彩/元素/字體/形狀/質感/氛圍等等方面的協調整體塑造出來的一種感覺。
比如色彩上,產品如果是比較女性化的色彩,那你就不可能去使用男性化的色彩去包裝它,這會顯得很突兀,反之亦然。
比如形狀上,如果產品本身的形狀是比較柔和的曲線,你卻使用太過菱角的圖形元素裝飾頁面那就會顯得不協調,而用同樣比較柔和的曲線會感覺更協調。
比如元素上,我們其實在做設計的時候都是可以從產品的包裝或功效上提取元素使用的。
(2)在字號大小的選擇上
目前移動端詳情頁的設計才是重中之重,所以為了便于大家手機閱讀更舒適,最小字號不能低于 20 號
(3)在字體的選擇上
盡量選擇便于識別的字體,但這個便不便于識別也是相對的,其實主要記住下面幾個對比規律就好了:
背景復雜,字體選粗一點的或筆畫規整一點的比較好;
背景簡單,字體選擇就多一些,不過也要考慮氣質搭不搭調;
背景顏色暗,字體顏色就該亮一點;
背景顏色亮,字體顏色就該深一點;
不管背景復雜與否或明還是暗,字體越大越便于識別,不過也要考慮美觀與否。
(4)在色彩選擇上
顏色越深給人感覺就越神秘或壓抑或沉穩有質感,顏色越明亮給人感覺就越年輕活力或輕浮或張揚,在用色上其實最忌諱的是一暗到底或者一亮到底,要有明有暗才會比較透氣或耐看,讓人感覺愉悅。
掃二維碼與項目經理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯網交流
轉載請注明出處:昆山網站制作公司網站標題優化的幾點注意事項 - 益眾網絡
標簽: