今天的文章講電商詳情設計。
OK，還是按慣例熱身一下，進入乾貨時間！
這裡的節奏，當然不是動次打次的那種。
說的是視覺上的節奏感。
用戶在看產品詳情的時候，其實就有點類似於看一部電影。太平淡的劇情容易讓人失去耐心，而一直激烈則會讓人感覺到視覺疲勞，難以堅持下去。要想一直牢牢抓住用戶的注意力，情節就必須有起有伏。
對應到視覺設計中，就是信息排布的節奏感。只有良好的排版節奏感才可以讓人很舒服的閱讀下去。
來看一個阿芙精油的頁面：
這個頁面最大的問題就是沒有重點，整體太平淡了，很難引起用戶的情緒起伏。
再看一個例子：
這個頁面細看一下，其實信息量並不是很大，但是由於糟糕的排版節奏，讓整個頁面十分沉悶。
電商詳情頁都是長條型的，所以在排版的時候，屏與屏之間的過渡就變得十分重要。上面兩個反面例子都是在過渡的時候處理得很差，所以會導致視覺上節奏不明確。
我給大家總結一個最基本的排版原則：
只要按照這樣的節奏走，肯定錯不了。
來看實操案例。
我們將上面說到的阿芙精油的頁面優化一下。
上面我們分析過，阿芙的這個頁面主要問題是兩個：一是文字信息多，而且沒有重點。二是整體視覺過於平淡。
所以我們優化的整體思路就是減少信息密度，排版上圖文過度要有節奏感。
優化結果：
最終大圖：
我們可以看到優化後的頁面圖文分離，信息密度適中，再加入色彩的變化，整體節奏感比之前好了很多！
現在電商的流量手機端佔了絕對大頭，所以我們做設計的時候一定要有豎屏思維。
豎屏的最大特點就是用戶會快速的向下滑動頁面，所以用戶的瀏覽習慣有兩個特性：
一是快，在每屏停留的時間非常短暫，2-3秒不能看明白的內容基本就跳過了。
二是視線是單向的，所以我們的信息編排要儘量簡單、清晰。多利用上下的空間排版，少用左右排版。
很多新手在做詳情頁的時候都不具有豎屏思維，想當然的把內容直接填滿頁面，這樣會造成信息的碎片化嚴重。
我們經常可以看到這樣的詳情頁：
過於碎片化的信息，會讓用戶不知道從哪裡開始閱讀，信息傳達的效率低下。
從設計上看，這樣的頁面上由於使用了過多的點和線的元素，畫面被分割得太厲害：
這種排版方式除了視覺上不好看，還會造成什麼後果呢？
看下面這張圖你就明白了：
要解決這個問題其實也很簡單，一招就可以搞定。
下面我通過一個實操案例來演示。
其實很簡單，我們將畫面上零碎的點進行合併，組成一個面，這樣就減少了畫面上的躁音。
優化後的頁面：
這裡我只優化了其中一部分內容，其它部分的方法也差不多，就是將一小塊一小塊的內容進行合併，形成更大塊的面。文案也集中到一塊區域，這樣就可以解決信息碎片化的問題。
最後看下大圖：
整個頁面是不是舒展了很多!
OK，繼續。
圖文不符是指畫面的內容沒有精確的表達出賣點所在，這樣的設計沒有說服力。
最常見的情況是，有些設計師不管文案講的什麼內容，都往畫面上擺一個產品圖，這樣當然不能說是錯的，但確實是不夠精準的。
比如下圖，畫面要表達的信息是TYPE-C的接口內部是對稱設計的，可以正反插。但是作者放了這根線的正反面，而且是不同顏色的，如果不看文案，用戶會覺得他在表達這根線是有兩種顏色可選，因此圖文並不相符。
優化稿：
剪去多餘的信息，只對接口進行特寫放大，讓用戶看清楚它的內部結構，這樣就一目瞭然了。
再看一個例子。
下面是一張化妝品的詳情頁，是說該產品用了一個很高大上的技術，但是整個畫面卻只放了幾個標準的產品圖，讓人感覺不到專業性。
那怎麼表達出專業性呢？
還記得上篇教程講的內容嗎？我們可以用參照物。用代表專業的人和物體來體現出產品的專業性。
用科研人員來體現出產品的專業性，這樣是不是就非常有說服力了！
看下大圖：
記住，電商詳情頁面時刻都在做推銷的工作，設計師所做的，就是將每一句文案變得更打動人，更有說服力！
太有說服力了！
很多運營在策劃詳情頁的時候，往往喜歡堆砌過多的賣點，可能他們自己也不確定產品的最大賣點是什麼，所以就全堆上去，覺得總會有一個賣點擊中用戶。
殊不知道這樣的想法犯了一個傳播學上最基本的道理，那就是信息量是傳播性的敵人。信息越多，指向性越弱，傳播力度越弱。
你覺得總有一個賣點可以擊中用戶，但實際上可能擊中用戶的那個賣點，最後被用戶忽略了，他根本就沒看到。
用戶的注意力是有限的，他花在你的圖上面的時間也是有限的，所以你必須要提煉出用戶最關心的賣點，幫用戶節省時間。
詳情頁上面也經常看到類似的問題：
文案上寫了這麼多賣點，圖片怎麼表達呢？顯然一張圖不可能表達出這麼多賣點，所以只能放一個標準的產品圖，這樣實際上啥也沒說。
之所以說詳情頁要做到一屏一賣點，不只是因為視覺上更好看，更重要的是想要圖片和文案有更高的契合度，達到 1+1 > 2 的效果。
下面我們沿著這樣的思路，將上面的圖片優化一下。
第一步，我們要提煉賣點，把文案重點放在“補水保溼”上。
因為整個產品是黑色的，所以我選擇了一張很有質感的絲質的背景圖。
接著調整產品和背景的光影效果，讓它們更融合。
整體色調我也微調了一下，讓暗處帶一點點藍色，這樣會比純灰色更有質感一些。
最後加一個水泡呼應一個補水的主題，再補齊文案，整個畫面就完成了！
對比一下效果：
我們可以看到，將賣點進行提煉之後，整個畫面的主題特別清晰，視覺傳達也非常到位了！
OK，這期的內容就到這，
接下來該你試試身手了！
閱讀更多 源派設計師小郭姐姐 的文章
