無線端頁面設(shè)計(jì)要點(diǎn)之—詳情頁

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

這里只聊無線，重點(diǎn)聊無線詳情頁。

首先我們對(duì)頁面進(jìn)行一個(gè)大概的劃分

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

產(chǎn)品詳情頁

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

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

(查看下面對(duì)比鏈接的時(shí)候請(qǐng)按住Ctrl+鼠標(biāo)左鍵點(diǎn)擊，否則會(huì)當(dāng)前頁面跳轉(zhuǎn))

對(duì)比查看圖1     對(duì)比查看圖2     對(duì)比查看圖3     對(duì)比查看圖4

對(duì)比查看圖5     對(duì)比查看圖6     對(duì)比查看圖7     對(duì)比查看圖8

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

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

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

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

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

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

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

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

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

1.手機(jī)像素精度與PC的差異

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

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

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

無線端不同于PC的地方：

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

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

2.面積更小精度更高

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

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

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

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

(圖二)

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

4.用戶行為的變化

PC端的用戶行為大概有：

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

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

  如果有一個(gè)在電腦上進(jìn)行最多的動(dòng)作的排行榜那這個(gè)肯定會(huì)上榜）；

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

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

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

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

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