移動(dòng)頁(yè)面如何設計

??要做好移動(dòng)頁(yè)面設計，首先要了解移動(dòng)端設計的難點(diǎn)：移動(dòng)端產(chǎn)品最難的地方就是在很小的屏幕上展示出所有的業(yè)務(wù)。有了屏幕的限制，加上移動(dòng)端的客戶(hù)碎片化閱讀的習慣和高流失率。特別是電商類(lèi)移動(dòng)頁(yè)面，更難展示出來(lái)。所以才有了像列表式小ICON展示方式。電商的標準配置的首頁(yè)都會(huì )將banner保留下來(lái)了，作為運營(yíng)推廣最重要的手段之一。

??而電商app是要展示內容最多也是最難做的一類(lèi)app。既要保證業(yè)務(wù)首頁(yè)展示完整性，還要保證用戶(hù)體驗。所以在每一個(gè)頁(yè)面設計時(shí)都要講究一些技巧和思考維度。移動(dòng)頁(yè)面設計方法：一、首屏頁(yè)面需要展示的內容首先進(jìn)入app，移動(dòng)頁(yè)面的時(shí)候，首頁(yè)首屏就要把業(yè)務(wù)給說(shuō)清楚。

??拿電商app為例子，首先統一的banner。因為電商促銷(xiāo)活動(dòng)是拉動(dòng)消費最大的源泉。而banner是很好展示活動(dòng)頁(yè)面的地方。4到6個(gè)banner就能牢牢抓住用戶(hù)貪便宜的心理。而且banner作為運營(yíng)位也可以作為銷(xiāo)售的廣告位進(jìn)行出售。所以一開(kāi)始就要看見(jiàn)banner是很好的展示。

??接下來(lái)電商會(huì )展示1排或者2排小icon。這些icon相當于web端的分類(lèi)類(lèi)目列表作用。起到了讓用戶(hù)知道有哪些賣(mài)的東西和哪些服務(wù)可以做。當然像淘寶和京東這類(lèi)的就是一個(gè)大業(yè)務(wù)，類(lèi)目也多。而小電商網(wǎng)站的ICON往往是一個(gè)分類(lèi)。再往下面的頁(yè)面展示內容也都不同了。

??淘寶和京東會(huì )有秒殺品，秒殺品起到的作用就是流量品的作用。流量品是電商帶動(dòng)流量的基礎。有了流量品才有了盈利品一說(shuō)。大量流量進(jìn)入app，才會(huì )盈利產(chǎn)生。之后的往下的頁(yè)面都是超出一個(gè)屏幕的，用來(lái)展示電商每個(gè)細分類(lèi)別中最好的商品進(jìn)行展示。用大量的品類(lèi)和優(yōu)惠價(jià)格打動(dòng)用戶(hù)進(jìn)入進(jìn)行消費。

??小結：電商首頁(yè)設計思路，從上往下思路是：通過(guò)banner活動(dòng)拉動(dòng)流量（產(chǎn)品拉新活躍用戶(hù)，讓用戶(hù)進(jìn)來(lái)），展示全部服務(wù)類(lèi)別（用戶(hù)知道產(chǎn)品有哪些商品和服務(wù)），秒殺用流量品帶動(dòng)購買(mǎi)量（讓用戶(hù)知道該商品和服務(wù)在我這里很便宜），首屏后的頁(yè)面展示各大類(lèi)別（方便用戶(hù)進(jìn)入沉浸式瀏覽方式）。

??二、底部導航欄怎么展示底部導航一般性分為4個(gè)到5個(gè)。拿電商最基本的底部導航欄設置是首頁(yè)，分類(lèi)，購物車(chē)，我的頁(yè)面。首頁(yè)已經(jīng)說(shuō)過(guò)了。底部導航這樣安排的用意依次是首頁(yè)，起到作用是告訴用戶(hù)，這里是賣(mài)什么的，用戶(hù)可以在這里找到什么、得到什么。然后通過(guò)第2屏幕到第6屏幕左右的瀏覽讓用戶(hù)徹底明白這里的能買(mǎi)到什么，順便讓用戶(hù)進(jìn)入心智模型里。

??徹底進(jìn)行逛街瀏覽的心理。分類(lèi)頁(yè)，用戶(hù)已經(jīng)知道你是賣(mài)什么的了，那用戶(hù)就要找到自己最需要的東西了。分類(lèi)頁(yè)面起到搜索的作用。但這里的搜索與首頁(yè)頂部的搜索框還不一樣。因為分類(lèi)的搜索帶有比價(jià)心理和一定不確定性，但是卻是讓用戶(hù)導流進(jìn)入的商品頁(yè)面最好且更直接的方式。

??這里順便說(shuō)一下三種基本搜索方式：搜索框式搜索，分類(lèi)類(lèi)目式搜索和推薦式的搜索方式。接下去購物車(chē)，作為電商現在最基本的tab類(lèi)目。當用戶(hù)把想要買(mǎi)的東西都扔到購物車(chē)里的時(shí)候，符合用戶(hù)在逛超市時(shí)想要付錢(qián)的心理。購物車(chē)不僅僅起到提示的用戶(hù)想要購買(mǎi)的心理。

??也是不斷提醒用戶(hù)要付錢(qián)的過(guò)程。最后一個(gè)的個(gè)人頁(yè)面，起到個(gè)人后臺的作用，管理自己夠后的一系列狀態(tài)。所以整個(gè)tab底部導航從左到右就是用戶(hù)購買(mǎi)過(guò)程一個(gè)心理寫(xiě)照。三、快速抓住用戶(hù)心理上面首頁(yè)和tab頁(yè)都說(shuō)明了用戶(hù)購買(mǎi)心理過(guò)程。電商產(chǎn)品上為了快速抓住用戶(hù)，往往采取原價(jià)多少，搶購多少。

??因為用戶(hù)購買(mǎi)心理非常直接，誰(shuí)便宜就買(mǎi)誰(shuí)。這是人類(lèi)的天性，無(wú)法改變。這種通過(guò)頁(yè)面展示上，劃去原價(jià)，標紅現價(jià)的做法會(huì )就是抓住這個(gè)心理。還有秒殺品，有時(shí)間限制，不簡(jiǎn)單促使用戶(hù)快速下單的心理。如果該用戶(hù)買(mǎi)到該便宜實(shí)惠的東西，一定會(huì )像朋友進(jìn)行炫耀。所以他的朋友也會(huì )去進(jìn)行購買(mǎi)。

??就這樣，就形成了線(xiàn)下帶動(dòng)購買(mǎi)的過(guò)程。而線(xiàn)上，你往往可能買(mǎi)一個(gè)東西，還太少了，所以去購買(mǎi)別的商品湊成滿(mǎn)多少減多少。這樣讓用戶(hù)覺(jué)得買(mǎi)得越多越賺的心理。就這樣快速放大用戶(hù)喜歡買(mǎi)優(yōu)惠東西的心理。電商還有通過(guò)滿(mǎn)多少免郵費的策略進(jìn)行銷(xiāo)售。因為郵費是用戶(hù)付出，總覺(jué)的不劃算。

??但當郵費轉加到商家那邊，用戶(hù)就會(huì )覺(jué)得很劃算。所以電商的殺手锏一定是對商品價(jià)格上的把控，淘寶比京東優(yōu)勢往往就在價(jià)格上。但是當用戶(hù)對于服務(wù)感知上升后，就是供應鏈和物流的比較了。所以從電商產(chǎn)品可以看出產(chǎn)品時(shí)抓住一個(gè)用戶(hù)的需求點(diǎn)，然后進(jìn)行不斷放大過(guò)程。

??四、快速表達自身業(yè)務(wù)和內容自身業(yè)務(wù)就是通過(guò)首頁(yè)和分類(lèi)頁(yè)進(jìn)行展示過(guò)程。當用戶(hù)點(diǎn)擊進(jìn)入頁(yè)面后，一定要準確知道你所要表達頁(yè)面信息。從商品列表頁(yè)開(kāi)始，就是表達商品內容的一個(gè)過(guò)程。再進(jìn)入具體商品頁(yè)面的時(shí)候，就是對商品內容進(jìn)行詳細介紹的過(guò)程。在每一個(gè)頁(yè)面轉換的過(guò)程，一定要牢牢抓住用戶(hù)心理，進(jìn)行每一層深入。

??但也要快速了解業(yè)務(wù)。比如：從一個(gè)女裝分類(lèi)頁(yè)面進(jìn)入后，女裝列表頁(yè)，列表頁(yè)就要對頁(yè)面做一個(gè)篩選功能，篩選功能就是快速讓用戶(hù)找到用戶(hù)想要的東西。就是快速表達自身業(yè)務(wù)的過(guò)程。進(jìn)入女裝詳情頁(yè)時(shí)，我們會(huì )把該商品最重要的信息（大小，顏色，尺碼等）都按序進(jìn)行排列展示出來(lái)。

??讓用戶(hù)快速了解該女裝的大小，尺碼等重要信息后，可以快速進(jìn)行做出購買(mǎi)決策。在移動(dòng)端上，一定要讓用戶(hù)快速了解業(yè)務(wù)和內容，快速做出購買(mǎi)決策的過(guò)程。五、頁(yè)面布局到第3屏幕牢牢相扣移動(dòng)端app多數頁(yè)面都是設計到3屏幕左右。電商來(lái)說(shuō)，一個(gè)頁(yè)面的上下信息流轉的過(guò)程是十分流暢的。

??拿電商詳情頁(yè)來(lái)說(shuō)，首先展示圖片。對于用戶(hù)來(lái)說(shuō)，圖片展示比文字更具有感染力。往往好看的圖片就能讓用戶(hù)進(jìn)行下單的過(guò)程。然后展示重要的信息。然用戶(hù)對各種重要的信息進(jìn)行了解的過(guò)程。差不多進(jìn)入第2屏幕開(kāi)始，就是用戶(hù)評論。為什么是用戶(hù)評論。因為大家都有從眾心理，如果該商品購買(mǎi)人數多，而且評論都是好評多的話(huà)，購買(mǎi)的轉化率就很高了。

??所以在第一屏幕沒(méi)有決定購買(mǎi)時(shí)候，第二屏幕的用戶(hù)評論就能很好解決用戶(hù)這樣心理，消除購買(mǎi)的猶豫。第三屏開(kāi)始，就是商品詳細參數進(jìn)行展示。這個(gè)過(guò)程中，是增加用戶(hù)購買(mǎi)商品的決定，保證商品質(zhì)量一個(gè)過(guò)程。所以商品詳情頁(yè)上，從用戶(hù)簡(jiǎn)單從圖片和信息進(jìn)行了解，此階段容易搞定的用戶(hù)已經(jīng)進(jìn)行下單了。

??然后通過(guò)用戶(hù)評論，解決用戶(hù)購買(mǎi)障礙。然后在商品詳細參數，進(jìn)行一步說(shuō)明商品值得購買(mǎi)性。頁(yè)面設計都是牢牢相扣的過(guò)程，也是用戶(hù)心理層層深入的過(guò)程。六、做到移動(dòng)端產(chǎn)品閉環(huán)式沉浸式電商移動(dòng)端產(chǎn)品要做到用戶(hù)進(jìn)行沉浸式瀏覽非常難。因為對買(mǎi)東西來(lái)說(shuō)，無(wú)非就三種。

??第一種，我知道我要買(mǎi)什么，買(mǎi)完就走。第二種，我不知道要買(mǎi)什么，瞎逛。第三種，上來(lái)就是來(lái)看看便宜的東西。對第一種用戶(hù)，形成瀏覽很難。第二種，用戶(hù)就是純?yōu)g覽的。針對這類(lèi)的用戶(hù)，電商產(chǎn)品絕對不單純通過(guò)通過(guò)返回來(lái)讓用戶(hù)進(jìn)行瀏覽。現在大數據推送的猜你喜歡的功能就是讓產(chǎn)品進(jìn)行閉環(huán)沉浸式的過(guò)程。

??包括很多推薦的功能也是讓用戶(hù)不斷進(jìn)行瀏覽的過(guò)程。對于第三種用戶(hù)，他就是購買(mǎi)流量品帶動(dòng)基數。當他真正產(chǎn)生需求時(shí)，他就會(huì )轉化為真正的第一種購買(mǎi)型用戶(hù)。上面從用戶(hù)角度出來(lái)，從自身電商角度出發(fā)，產(chǎn)品設計內部聯(lián)系緊密，對流量品帶動(dòng)盈利品是一個(gè)很好的設計。

??關(guān)注，收藏商家的功能就是對產(chǎn)品閉環(huán)設計的補充。產(chǎn)品設計上從用戶(hù)需求到業(yè)務(wù)服務(wù)都要形成一個(gè)閉環(huán)。讓用戶(hù)沉浸式瀏覽設計才是好的設計。七、用完即走，用戶(hù)價(jià)值為依歸用戶(hù)價(jià)值就是通過(guò)流量帶動(dòng)各種業(yè)務(wù)擴展盈利的過(guò)程。用完即走對電商app來(lái)說(shuō)，就是用戶(hù)從進(jìn)入app到下單離開(kāi)。

??這才是電商app用完即走的模式。只有滿(mǎn)足的用戶(hù)需求后，用完即走才是有意義的。產(chǎn)品依托于用戶(hù)帶來(lái)價(jià)值，沒(méi)有用戶(hù)沒(méi)有產(chǎn)品，電商app也就無(wú)法盈利了。如果用戶(hù)體驗上和產(chǎn)品業(yè)務(wù)展示形成沖突后，該怎么辦？一定是用戶(hù)體驗先行，然后產(chǎn)品業(yè)務(wù)展示進(jìn)行合理的調整，然后一定能融入產(chǎn)品中。

??以用戶(hù)需求為產(chǎn)品設計基準點(diǎn)，以服務(wù)和內容滿(mǎn)足用戶(hù)需求的全過(guò)程，最后通過(guò)付費讓用戶(hù)感受到愉快。 最后總結：其實(shí)移動(dòng)端產(chǎn)品有三個(gè)重：重場(chǎng)景、重碎片化、重速度。移動(dòng)端產(chǎn)品重在滿(mǎn)足碎片化用戶(hù)場(chǎng)景，通過(guò)更小的屏幕更快展示產(chǎn)品內容，和用戶(hù)需求完成快速對接的過(guò)程。

??這是移動(dòng)端產(chǎn)品設計最核心的用戶(hù)需求滿(mǎn)足。

本回答由電腦網(wǎng)絡(luò )分類(lèi)達人 劉杰推薦。

手機端網(wǎng)頁(yè)可以用個(gè)PS進(jìn)行設計和切圖，最后用DIV CSS HTML5 JS完成。

1、按照移動(dòng)端普通平寬進(jìn)行div網(wǎng)站建設；2、通過(guò)html5建設專(zhuān)業(yè)移動(dòng)網(wǎng)站；3、搭建app移動(dòng)網(wǎng)站，進(jìn)行頁(yè)面平面設計。

??步驟分為以下幾步：1。設計效果圖2。開(kāi)始編寫(xiě)HTML頁(yè)面，在頭部先加入以下2句話(huà)再說(shuō)：<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width, initial-scale=1。

??0, minimum-scale=1。0, maximum-scale=1。0, user-scalable=no"> 3。想看即時(shí)的效果，那你就得去下載一個(gè)個(gè)人服務(wù)器（非常小，不會(huì )占你多少空間的，在同一個(gè)局域網(wǎng)內，手機練上去看效果）4。

??至于編寫(xiě)的話(huà)，和PC端一樣，PS有一點(diǎn)非常重要：因為移動(dòng)端的手機屏幕太多了，所以你必須的兼容大多數的屏幕，所以，最好是能夠在布局的時(shí)候就事先以自適應的方式來(lái)布局，不然在不同的手機上看你的網(wǎng)頁(yè)，運氣好還能見(jiàn)人，運氣不好，我就哇哈哈哈了

本回答被提問(wèn)者和網(wǎng)友采納。