這是我的第一篇經驗分享/教程

在無線端交易占比遠超PC的現在，看了下各店鋪的產品詳情頁，發現卻沒有幾家真正的重視店鋪的無線頁面設計，或者說方向有一定偏差。

這里只聊無線，重點聊無線詳情頁。

首先我們對頁面進行一個大概的劃分

現在所看到的大部分是下面的幾種類型

產品詳情頁

 

對品牌來說，最重要的部分肯定有產品這一類，所以我們這里先講產品詳情頁，它直接決定了轉化跳失和成交。我們看看2016雙11 TOP的科技和美妝類產品詳情頁。

這里暫舉科技和美妝類，在天貓這兩類相對而言產品的詳情頁是比較重要的，另外可能就是母嬰等類目了。所以推薦大家去看詳情頁的時候看這兩類，不過對于PC的頁面設計來說服裝類和美妝類的設計是比較優秀的，所以平時可以多關注這幾類。當然也會有其他類目的個別店鋪是特別優秀值得關注的。

(查看下面對比鏈接的時候請按住Ctrl+鼠標左鍵點擊，否則會當前頁面跳轉)

·對比查看圖1     ·對比查看圖2     ·對比查看圖3     ·對比查看圖4

·對比查看圖5     ·對比查看圖6     ·對比查看圖7     ·對比查看圖8

 

縮略圖看不明白的推薦用淘寶APP掃碼感受一下，同時貼上鏈接，供大家方便對比PC端。

 

很直接就可以看出圖1、圖2和圖5是比較適合無線端的瀏覽的，從色彩到結構再到大小的一個對比。同時去看圖2小米家所有的產品都按照無線端的適配來做的，包括PC端，說明了無線端真的是需要重視起來了。另外圖5的說明文字看起來還是有點吃力的。

 

這里總結一下大概是：

1.無線端不是PC端的直接縮放；

2.無線端每一屏的內容需要有一個比較明顯的分割形式，比如大標題和數字區分。不宜用太重口味的條幅

3.無線端的文字最小也需要PC端最小字號的150%（1080px寬需要200%以上）；

4.無線端更適合上下屏的分割；

5.無線端更適合左對齊的排版方式。
 

 

 

另外這里給出本人的方法：

1.手機像素精度與PC的差異

因為手機像素精度遠超PC ，以iphone為例，分辨率為1080x1920，同時無線端詳情尺寸要求為大于750px即可，所以如果想要達到最佳效果，可以照最佳尺寸1080的寬度進行設計，同時內容高度也按照這個高度進行適配，如想看到不同之處可以掃碼上面的圖1與其他的對比。

 

2.產品多而又想要量產優質詳情的辦法

由于很多品牌的產品會比較多，會要上線很多不同的詳情頁，這里給出的方法是詳情頁排版模板化，這是一個比較好的方法。主推款當然還是要區分模板的，同時應該準備不同種類的幾套模板，包括促銷活動時的促銷展示。都是可以準備幾套模板，在進行重要的設計的時候可以重設計并添加進模板庫，這樣后續進行復制的時候會一點點的根據不同階段碰到的問題去優化，就像app和手機更迭一樣，慢慢的更完美。

 

無線端不同于PC的地方：

1.屏幕寬高比翻轉了90°

顯示PC端分辨率為1920x1080，為16:9(舉例21寸顯示器標準分辨率)無線端分辨率為1080x1920，為9:16(舉例iphone7 Plus分辨率)從這里也可以看出為什么手機上看圖像這么清晰。同樣的分辨率面積縮小了，所以精度更高。

 

2.面積更小精度更高

一張同樣像素寬高的圖像，在PC端看是下面圖左的話，那么無線端就是圖右的效果

 

 

3.閱讀習慣的變化

在PC上閱讀如不是長文形式從左往右到底的跨度太大(下圖一和下圖二)，會很累，所以我們一般會限定寬度顯示。另一種就是居中的形式，設計感較強。并且其實手機端絕大多數情況下不合適大段落的情況下居中對齊排版的(下圖三)。這里舉例我們已經每天要用到的百度，見下圖。

(圖一)會HTML代碼的電商童鞋可能會了解：PC端MAX寬度約為640px，而無線端是設定MAX寬度約為90%(這里不是準確數據只是舉例一個是絕對，一個是相對)。

(圖二)
 

(圖三)當畫出視覺引導線的時候，是不是突然發現上圖右看起來會容易疲勞且不利于閱讀。

 

4.用戶行為的變化

 

PC端的用戶行為大概有：

1. 上下滑動（參考前兩年很流行的H5鼠標滑動進行動效形式，現在也有不少）；

2. 鼠標滑過觸發與點擊行為（這個是我們用最多的動作，而且不限于網頁中，

  如果有一個在電腦上進行最多的動作的排行榜那這個肯定會上榜）；

3. 按鍵輸入（這個不做多說，搜索內容會用到，也有問卷等表單和互動站進行互動會用到）；

 

而無線端的用戶行為和PC的是不一樣的：

1. 上下滑動（采用上下手滑的動作，動作設計有參照慣性一樣的停止）；

2. 點擊行為（在無線端里是沒有滑過觸發行為的，只有點擊行為，所以我們設計按鈕或者引導的時候需要設計成適合無線端的外觀展示，這個時候單獨的一個文字變色就顯得不夠了，所以往往無線端設計按鈕的時候都是塊狀的形狀，并且為了更好的引導點擊會加入箭頭元素）；

3. 按鍵輸入（無線端的輸入操作和PC的區別于無線端的基本都是點擊輸入款之后放大彈出字母鍵。用到的地方基本在搜索款和填表。在無線端，搜索的那個輸入框并不是所有站點都顯得那么重要，因為都需要先進行點擊才能彈出鍵盤，所以一些站點直接用了一個放大鏡的ICO用于點擊來進行輸入。搜索引擎站例外，它需要那個表單的形式來激發用戶填空）