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

這是我的第一篇經(jīng)驗分享/教程。在無線端交易占比遠超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)注這幾類。當然也會有其他類目的個別店鋪是特別優(yōu)秀值得關(guān)注的。

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

這里總結(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)品會比較多，會要上線很多不同的詳情頁，這里給出的方法是詳情頁排版模板化，這是一個比較好的方法。主推款當然還是要區(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.閱讀習慣的變化

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

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

(圖二)

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

4.用戶行為的變化

PC端的用戶行為大概有：

1.  上下滑動(參考前兩年很流行的H5鼠標滑動進行動效形式，現(xiàn)在也有不少);
2.  鼠標滑過觸發(fā)與點擊行為(這個是我們用最多的動作，而且不限于網(wǎng)頁中，如果有一個在電腦上進行最多的動作的排行榜那這個肯定會上榜);
3.  按鍵輸入(這個不做多說，搜索內(nèi)容會用到，也有問卷等表單和互動站進行互動會用到);

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

1.  上下滑動(采用上下手滑的動作，動作設(shè)計有參照慣性一樣的停止);
2.  點擊行為(在無線端里是沒有滑過觸發(fā)行為的，只有點擊行為，所以我們設(shè)計按鈕或者引導的時候需要設(shè)計成適合無線端的外觀展示，這個時候單獨的一個文字變色就顯得不夠了，所以往往無線端設(shè)計按鈕的時候都是塊狀的形狀，并且為了更好的引導點擊會加入箭頭元素);
3.  按鍵輸入(無線端的輸入操作和PC的區(qū)別于無線端的基本都是點擊輸入款之后放大彈出字母鍵。用到的地方基本在搜索款和填表。在無線端，搜索的那個輸入框并不是所有站點都顯得那么重要，因為都需要先進行點擊才能彈出鍵盤，所以一些站點直接用了一個放大鏡的ICO用于點擊來進行輸入。搜索引擎站例外，它需要那個表單的形式來激發(fā)用戶填空)

。

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