專業視覺設計師,美工的詳情頁設計的一般流程有哪些?


設計師設計一個頁面根據不同的產品不同的需求不同的設計都會有不同的一套流程。而如果你指的詳情頁是淘寶美工的詳情頁,那麼一般包括寶貝海報、寶貝展示、細節展示等等,不過一般都是根據淘寶店主的需要來定得。

以淘寶為例,你為一個淘寶店店主製作一個產品詳情頁的流程基本是這樣的:

1,首先由店主提供你一套寶貝的素材照片;

2,根據寶貝的不同會有不同的寶貝詳情頁的一個模板,一般包括寶貝的一個大海報(把產品的買點都放上去的一個大海報)、寶貝展示(外觀展示,性能展示之類的)、細節展示(涉及一些細節品質或者設計原理什麼的),有些還會展示一些效果反饋或者廣告關聯產品的內容在裡面。關於模板其實淘寶有專門賣介紹模板的店家,淘寶賣家服務裡面也會有一些寶貝詳情頁的第三方應用。記住,模板做好了要給賣家看一下,讓他大概了解一下你的想法,並且看他是否有他的意見,即使很爛;

3,制定文案,一般來說很少會有淘寶店主會提供完整文案的,他們會給你一個產品的大概說明以及他們希望那些東西是你在詳情頁里需要著重介紹的,接下來就看你的語言功底了——當然你如果寫不出來也可以借鑒其他店鋪的,如果再喪失一點可以直接複製其他家的文案。但是現在淘寶很多店主都知道保護自己的東西了,如果被愛較真兒的同行發現會跟淘寶告狀的;

3,開始修圖,如果資源有限你可能需要一張圖片重複利用很多次,這個就看你的技術和經驗了。將圖片都填充進你的模板裡面,這個階段要多與賣家進行溝通,因為有經驗的賣家一般不太會多關心版式排版方面的問題,他們關心的只有產品展示的夠不夠全面,他需要展示的東西有沒有表現出來;

4,將文案按照需要一點一點放上去,總之在這種階段要多和對方溝通,否則最後完稿了再修改很麻煩;

5,保存。

一般來說這樣的話一個寶貝詳情頁就製作完畢了,其實淘寶美工很適合當兼職賺零花,首先你要會與別人溝通,並且做圖的速度夠快,很多賣家並不需要你做的多有觀賞價值,也不需要多有檔次,只要都引人注意夠花哨,他們就樂意掏錢付給你。


以上是我設計的思路,用這個套路我做出來的案例電商詳情頁設計|網頁|電商|一筆一畫 - 原創作品 - 站酷 (ZCOOL)

文案這裡需要策劃一套完整的方案

是整個詳情頁的框架

作用在於收集所需信息

形成一條清晰的執行思路

在電商詳情頁中主要突出產品特點

產品特點我一般用一個簡短有力的標題

和一段相關文字來描述

我自己常用的文案結構:

主題:產品名稱(拍法) 引導語 產品特點1(拍法)

相關描述

產品特點2(拍法)

相關描述

……

這裡用一款摺疊式毛巾架為例

文案寫出來是這樣的

主題:摺疊式毛巾架(5)

即使是小小的浴室空間

也要挑選最精緻的物品

親膚舒適的毛巾

搭配可摺疊的毛巾架

享受品質的浴室生活

180°自由旋轉,收納更方便(5)

每一個杆子都可以180°任意旋轉

讓毛巾之間不重疊,更加乾淨衛生

摺疊時不佔地(5)

不用時輕鬆收回,節省居家空間

304不鏽鋼材質(6)

材質安全健康,可放心使用

……

這裡我還會配上一些參考拍攝角度的圖片

這樣整個詳情頁的每個環節就比較明確

後續的工作就能流暢進行

針對產品拍攝的方法

我在公眾號里就寫下來了

有興趣可以翻翻看

這裡我把它做成一張表格

通過這張表格可以

快速告訴助手需要什麼效果

怎樣擺好器材、閃光燈、道具這些

這套方法雖然方便

但也不是萬能的

做的時候不能一味埋頭苦幹

還得動腦筋

要有發現問題解決問題的意識

修圖就是對畫面的精確調整

調出自己最想要的效果

通常我會先修好一張圖

然後其餘的圖和這張圖對比

這樣就比較好統一色調

主要就是色彩、明暗的調整

有時還要對畫面進行分區域調整

排版要做的就是:

1.對文字的控制:字體選擇,

字體大小,行距間距的調整;

2.留白:讓畫面整體

形成視覺上的節奏;

3.比例:整體上控制圖片、

文字、留白面積之間的大小。

所做的就是讓畫面整體要看著舒適。

最終效果:

在應對大量工作的時候

我自己感覺這套流程比較實用方便

做到這裡,算是完成了電商

詳情頁基本內容的創作

如果內容上想再一步提升競爭力的話

就得看短視頻的製作

短視頻的作用大大超出圖文

可以讓人短時間內了解到產品特點

並且留下較為深刻的印象


簡單的來說,就是先製作好需要做好詳情頁的基本信息,即是整體的風格是怎樣的,需要的參考鏈接,參考別人家的整體風格或者說是排版進行更好的借鑒,然後寫好具體需要做詳情頁的一些圖案和背景圖,先做好排版什麼地方要做什麼圖,大概的效果是怎樣的。然後對局部的圖進行修修改改,讓它有最開始的最想要的效果。


推薦閱讀:

設計的基本原則有哪些?
想成為一名真正的設計師而非美工,三年的工作經驗和研究生文憑哪個價值更大?
在互聯網產品設計團隊里,如何量化交互/視覺設計師的工作績效?
非科班出身怎樣成為一名優秀的視覺設計師?
視覺設計師如何度過能力提高上的瓶頸期?

TAG:AdobePhotoshop | 設計 | 設計師 | 視覺設計 | 視覺設計師 |