移動(dòng)端設(shè)計(jì)你真的重視了嗎 ?此文主要人群為電商人群，大咖看到可以提出意見一起交流還望嘴下留情哈。附件有福利(自己寫的一個(gè)小東西，不重要但有時(shí)能用到，小送給電商小伙伴的)。

這是我的第一篇經(jīng)驗(yà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)注的。

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

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

1. 移動(dòng)端不是PC端的直接縮放;
2. 移動(dòng)端每一屏的內(nèi)容需要有一個(gè)比較明顯的分割形式，比如大標(biāo)題和數(shù)字區(qū)分。不宜用太重口味的條幅
3. 移動(dòng)端的文字最小也需要PC端最小字號(hào)的150%(1080px寬需要200%以上);
4. 移動(dòng)端更適合上下屏的分割;
5. 移動(dòng)端的那個(gè)端更適合左對(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ī)更迭一樣，慢慢的更完美。

移動(dòng)端不同于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上閱讀如不是長文形式從左往右到底的跨度太大(下圖一和下圖二)，會(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ā)用戶填空)

。

感謝大家的閱讀!文章下載，點(diǎn)擊：移動(dòng)端淘寶詳情頁頁面設(shè)計(jì)要點(diǎn)。更多網(wǎng)頁設(shè)計(jì)新手入門盡在海淘科技。