無線端頁面設(shè)計要點之—詳情頁

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

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

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

現(xiàn)在所看到的大部分是下面的幾種類型

產(chǎn)品詳情頁

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

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

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

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

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

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

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

這里總結(jié)一下大概是：

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

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

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

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

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

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

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

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

2.產(chǎn)品多而又想要量產(chǎn)優(yōu)質(zhì)詳情的辦法

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

無線端不同于PC的地方：

1.屏幕寬高比翻轉(zhuǎn)了90°

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

2.面積更小精度更高

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

3.閱讀習(xí)慣的變化

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

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

(圖二)

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

4.用戶行為的變化

PC端的用戶行為大概有：

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

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

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

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

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

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

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

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