移動端網頁怎麼設計

1、HTML5移動網頁的設計稿尺寸應該是多少

HTML5的移動端網頁設計稿，通常情況下，內容區為750px或960px或者1080px的，一般不小於750px像素大小（寬度）
設計稿可以比750px大，但是絕對不能比750px小，這個主要是由於當前手機的解析度相對較高（iPhone 6是375物理像素，但實際像素為其兩倍，也就是750，這個750就是這么來的）
如果設計圖稿過小，前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清，所以這也是為何要「大」解析度
此外需要注意的是，要保證頁面的基準字體大小，在320px的設計稿當中，最小字體不宜小於12像素，其他像素的設計稿當中，等比例換算即可（12/320px*設計稿像素值）

2、移動頁面如何設計

要做好移動頁面設計，首先要了解移動端設計的難點：

移動端產品最難的地方就是在很小的屏幕上展示出所有的業務。有了屏幕的限制，加上移動端的客戶碎片化閱讀的習慣和高流失率。特別是電商類移動頁面，更難展示出來。所以才有了像列表式小ICON展示方式。電商的標准配置的首頁都會將banner保留下來了，作為運營推廣最重要的手段之一。而電商app是要展示內容最多也是最難做的一類app。既要保證業務首頁展示完整性，還要保證用戶體驗。所以在每一個頁面設計時都要講究一些技巧和思考維度。

移動頁面設計方法：

一、首屏頁面需要展示的內容

首先進入app，移動頁面的時候，首頁首屏就要把業務給說清楚。拿電商app為例子，首先統一的banner。因為電商促銷活動是拉動消費最大的源泉。而banner是很好展示活動頁面的地方。4到6個banner就能牢牢抓住用戶貪便宜的心理。而且banner作為運營位也可以作為銷售的廣告位進行出售。所以一開始就要看見banner是很好的展示。接下來電商會展示1排或者2排小icon。這些icon相當於web端的分類類目列表作用。起到了讓用戶知道有哪些賣的東西和哪些服務可以做。當然像淘寶和京東這類的就是一個大業務，類目也多。而小電商網站的ICON往往是一個分類。再往下面的頁面展示內容也都不同了。淘寶和京東會有秒殺品，秒殺品起到的作用就是流量品的作用。流量品是電商帶動流量的基礎。有了流量品才有了盈利品一說。大量流量進入app，才會盈利產生。之後的往下的頁面都是超出一個屏幕的，用來展示電商每個細分類別中最好的商品進行展示。用大量的品類和優惠價格打動用戶進入進行消費。
小結：電商首頁設計思路，從上往下思路是：通過banner活動拉動流量（產品拉新活躍用戶，讓用戶進來），展示全部服務類別（用戶知道產品有哪些商品和服務），秒殺用流量品帶動購買量（讓用戶知道該商品和服務在我這里很便宜），首屏後的頁面展示各大類別（方便用戶進入沉浸式瀏覽方式）。

二、底部導航欄怎麼展示

底部導航一般性分為4個到5個。拿電商最基本的底部導航欄設置是首頁，分類，購物車，我的頁面。首頁已經說過了。底部導航這樣安排的用意依次是首頁，起到作用是告訴用戶，這里是賣什麼的，用戶可以在這里找到什麼、得到什麼。然後通過第2屏幕到第6屏幕左右的瀏覽讓用戶徹底明白這里的能買到什麼，順便讓用戶進入心智模型里。徹底進行逛街瀏覽的心理。分類頁，用戶已經知道你是賣什麼的了，那用戶就要找到自己最需要的東西了。分類頁面起到搜索的作用。但這里的搜索與首頁頂部的搜索框還不一樣。因為分類的搜索帶有比價心理和一定不確定性，但是卻是讓用戶導流進入的商品頁面最好且更直接的方式。這里順便說一下三種基本搜索方式：搜索框式搜索，分類類目式搜索和推薦式的搜索方式。接下去購物車，作為電商現在最基本的tab類目。當用戶把想要買的東西都扔到購物車里的時候，符合用戶在逛超市時想要付錢的心理。購物車不僅僅起到提示的用戶想要購買的心理。也是不斷提醒用戶要付錢的過程。最後一個的個人頁面，起到個人後台的作用，管理自己夠後的一系列狀態。所以整個tab底部導航從左到右就是用戶購買過程一個心理寫照。

三、快速抓住用戶心理

上面首頁和tab頁都說明了用戶購買心理過程。電商產品上為了快速抓住用戶，往往採取原價多少，搶購多少。因為用戶購買心理非常直接，誰便宜就買誰。這是人類的天性，無法改變。這種通過頁面展示上，劃去原價，標紅現價的做法會就是抓住這個心理。還有秒殺品，有時間限制，不簡單促使用戶快速下單的心理。如果該用戶買到該便宜實惠的東西，一定會像朋友進行炫耀。所以他的朋友也會去進行購買。就這樣，就形成了線下帶動購買的過程。而線上，你往往可能買一個東西，還太少了，所以去購買別的商品湊成滿多少減多少。這樣讓用戶覺得買得越多越賺的心理。就這樣快速放大用戶喜歡買優惠東西的心理。電商還有通過滿多少免郵費的策略進行銷售。因為郵費是用戶付出，總覺的不劃算。但當郵費轉加到商家那邊，用戶就會覺得很劃算。所以電商的殺手鐧一定是對商品價格上的把控，淘寶比京東優勢往往就在價格上。但是當用戶對於服務感知上升後，就是供應鏈和物流的比較了。所以從電商產品可以看出產品時抓住一個用戶的需求點，然後進行不斷放大過程。

四、快速表達自身業務和內容

自身業務就是通過首頁和分類頁進行展示過程。當用戶點擊進入頁面後，一定要准確知道你所要表達頁面信息。從商品列表頁開始，就是表達商品內容的一個過程。再進入具體商品頁面的時候，就是對商品內容進行詳細介紹的過程。在每一個頁面轉換的過程，一定要牢牢抓住用戶心理，進行每一層深入。但也要快速了解業務。比如：從一個女裝分類頁面進入後，女裝列表頁，列表頁就要對頁面做一個篩選功能，篩選功能就是快速讓用戶找到用戶想要的東西。就是快速表達自身業務的過程。進入女裝詳情頁時，我們會把該商品最重要的信息（大小，顏色，尺碼等）都按序進行排列展示出來。讓用戶快速了解該女裝的大小，尺碼等重要信息後，可以快速進行做出購買決策。在移動端上，一定要讓用戶快速了解業務和內容，快速做出購買決策的過程。

五、頁面布局到第3屏幕牢牢相扣

移動端app多數頁面都是設計到3屏幕左右。電商來說，一個頁面的上下信息流轉的過程是十分流暢的。拿電商詳情頁來說，首先展示圖片。對於用戶來說，圖片展示比文字更具有感染力。往往好看的圖片就能讓用戶進行下單的過程。然後展示重要的信息。然用戶對各種重要的信息進行了解的過程。差不多進入第2屏幕開始，就是用戶評論。為什麼是用戶評論。因為大家都有從眾心理，如果該商品購買人數多，而且評論都是好評多的話，購買的轉化率就很高了。所以在第一屏幕沒有決定購買時候，第二屏幕的用戶評論就能很好解決用戶這樣心理，消除購買的猶豫。第三屏開始，就是商品詳細參數進行展示。這個過程中，是增加用戶購買商品的決定，保證商品質量一個過程。所以商品詳情頁上，從用戶簡單從圖片和信息進行了解，此階段容易搞定的用戶已經進行下單了。然後通過用戶評論，解決用戶購買障礙。然後在商品詳細參數，進行一步說明商品值得購買性。頁面設計都是牢牢相扣的過程，也是用戶心理層層深入的過程。

六、做到移動端產品閉環式沉浸式

電商移動端產品要做到用戶進行沉浸式瀏覽非常難。因為對買東西來說，無非就三種。第一種，我知道我要買什麼，買完就走。第二種，我不知道要買什麼，瞎逛。第三種，上來就是來看看便宜的東西。對第一種用戶，形成瀏覽很難。第二種，用戶就是純瀏覽的。針對這類的用戶，電商產品絕對不單純通過通過返回來讓用戶進行瀏覽。現在大數據推送的猜你喜歡的功能就是讓產品進行閉環沉浸式的過程。包括很多推薦的功能也是讓用戶不斷進行瀏覽的過程。對於第三種用戶，他就是購買流量品帶動基數。當他真正產生需求時，他就會轉化為真正的第一種購買型用戶。上面從用戶角度出來，從自身電商角度出發，產品設計內部聯系緊密，對流量品帶動盈利品是一個很好的設計。關注，收藏商家的功能就是對產品閉環設計的補充。產品設計上從用戶需求到業務服務都要形成一個閉環。讓用戶沉浸式瀏覽設計才是好的設計。

七、用完即走，用戶價值為依歸

用戶價值就是通過流量帶動各種業務擴展盈利的過程。用完即走對電商app來說，就是用戶從進入app到下單離開。這才是電商app用完即走的模式。只有滿足的用戶需求後，用完即走才是有意義的。產品依託於用戶帶來價值，沒有用戶沒有產品，電商app也就無法盈利了。如果用戶體驗上和產品業務展示形成沖突後，該怎麼辦？一定是用戶體驗先行，然後產品業務展示進行合理的調整，然後一定能融入產品中。以用戶需求為產品設計基準點，以服務和內容滿足用戶需求的全過程，最後通過付費讓用戶感受到愉快。

最後總結：

其實移動端產品有三個重：重場景、重碎片化、重速度。移動端產品重在滿足碎片化用戶場景，通過更小的屏幕更快展示產品內容，和用戶需求完成快速對接的過程。這是移動端產品設計最核心的用戶需求滿足。

3、設計PC端網頁原型和手機端APP有什麼區別

1、內容上pc端一定是內容豐富的，app一定是內容精簡的
2、從產品功能架構上，app端的設計通常只能滿足主流用戶的常用功能，相反pc端可以兼顧更多的用戶提供更全面的服務
3、相比pc端，app更注重用戶體驗設計，例如操作流程簡單快捷，語言文字精簡移動。
4、升級優化方面，pc端通常適合於兩年一小改，三年一大改，指的是改版。app則比較頻繁，且第一版本一般只是先主要功能，之後2、3個月幾乎就要出一個小迭代版本。

4、移動端網頁設計和SEO優化關系 是什麼？

搜外網告訴你移動端網頁設計和SEO優化關系：
1、針對移動端網站進行單獨優化
移動端網站建設不同於PC端，因此我們就進行網站設計就需要保持導航的使用，並且在設計按鈕就不要在拘泥於PC端一些設計經驗，我們就需要通過專業移動端技術讓移動網站建設或者是移動網站保持跟PC端的體驗完全不同，優化好移動端網站更加註重移動端的用戶體驗。
2、移動按鈕友好易用性
在移動端網站優化技巧中，對於移動網站按鈕和滑屏的設置就需要簡單實用，放置在主要和顯眼位置，這樣很容易讓用戶主動觸發。但是，前提不能妨礙正常的頁面。
3、搜索框居於重要位置
網站搜索功能對於移動網站來說是一項重要的功能，移動端頁面優化就需要保持和留住搜索功能，並且這種功能需要居於重要位置。例如許多用戶都傾向於使用搜索功能來商品的查找。因此，我們還是要把搜索功能放置到頁面頂部。
4、移動端頁面優化保持完整性
我們在瀏覽商城網站中，最讓人無語莫過於圖片問題，在PC端很容易實現圖片的放大和縮小。但是，在移動端就變得十分困難，因此，在移動端優化中就需要把文字和圖片以及頁面寬度保持合理的配置，讓用戶很容易獲得移動端網站內容信息。
5、高清晰的優質素材
一句話就是移動端對於素材要求很高，針對移動端頁面優化就需要通過高清晰的素材拉開與競爭對手的差距。
6、靈活的交互設計
移動端最注重手觸問題，再設計網站就需要切合手觸設置合理的按鈕，保持這種交互性對於用戶的需求。
7、方便PC端和移動端之間的切換
對於很多用戶來說，習慣於PC端之間的瀏覽和用戶，因此我們在設置和優化移動端頁面就需要注重移動端和PC端切換保持正常的進行，讓用戶在PC端和移動端暢通無阻的瀏覽和購買。

5、移動端和pc端頁面設計上的區別

操作方式不同

PC端主要的交互為滑鼠點擊事件；移動端的則更為豐富，比如單擊、雙擊、長時間按、滑動等等。

使用場景不同

PC端的使用場景一般較為固定，室內或辦公室，電腦移動的概率較少；移動端則可在很多場景下使用，比如地鐵、公交車、吃飯、睡覺等等，移動端要考慮的交互更多。

網路環境不同

PC端的網路較為穩定，出現異常情況的概率相對較小；移動端很多時間處於無線數據網路狀態下，網路狀況隨著地點不同有所變化。

6、關於網頁和移動端原型設計的方式

?

7、新手如何做移動端網站的SEO優化

隨著越來越多的用戶使用手機瀏覽網站和查詢信息，移動搜索引擎已經成為新的趨勢。現在移動搜索引擎的流量已經大部分超過了電腦端的流量，所以移動網站的SEO優化自然是不可低估的。它將成為搜索引擎優化人員關注的焦點。以下作者將談談移動端手機網站SEO優化，有哪些搜索引擎優化技術和注意事項，希望對大家有所幫助。

一.移動端手機網站SEO優化技巧
1. 域名的設置技巧
域名越短越好記。手機網站的大多數域名都是個人電腦網站的二級域名。當然，這也很好。它與傳統網站一致，對用戶來說更可靠。然而，如果它是一個特殊的手機網站，建議有一個簡短且易於記憶的域名。
2. 頁面設計技巧
頁面設計應盡可能簡單，採用響應性設計，能夠獨立適應任何移動終端設備，降低客戶流失率，大大提高移動SEO優化工作效率。
3. 頁面載入速度技巧
移動網頁的載入速度會嚴重影響用戶體驗，因此需要優化頁面圖片、CSS、JS代碼，壓縮體積，減少頁面請求數量，縮短頁面載入時間。載入時間表控制在5S以內，頁面尺寸表控制在50K以內。
4. 頁面url優化技巧
url路徑要規范化，這和PC端url優化的道理是一樣的。
5. 優化頁面標題、描述、關鍵詞技巧
移動網站的標題、關鍵字和描述中的字數應不同於個人電腦站，並且應設置得更少。建議手機網站製作完成後，通過手機瀏覽器測試，看是否所有相關內容都能正常顯示。
二.移動端手機網站SEO優化注意事項
注意事項一：移動端網頁禁止一切彈窗廣告
在個人電腦頁面上，大量的彈出式廣告已經夠煩人的了，更不用說在移動端了。如果將一些彈出廣告添加到有限的瀏覽區域，用戶體驗會非常差，因此我們禁止在移動端網站上使用所有彈出窗口。
注意事項二：網站盡可能簡潔。
作為手機用戶，用戶瀏覽網頁的時間是零碎的，不可能耐心地點擊很多網頁。因此，要求移動網站設計簡潔，流程簡單，頁面盡可能少。由於手機屏幕小，瀏覽多個頁面不方便，頁面太多也會影響網站的打開速度。
注意事項三：其他優化事項
事實上，PC機和移動終端的優化思想是相似的，例如301重定向、404頁、麵包屑導航、文章的內部鏈接構造、外部鏈接構造、網站地圖、機器人文件組織的樹形結構等。基本上是一樣的。
以上內容是小編對移動端手機網站SEO優化要怎麼做的注意事項以及優化技巧，做了一些說明，如果您有更好的建議，歡迎交流。

8、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

9、移動端web在設計時寬度尺寸是多少合適

基本上都是640吧，高度由於是專題，可以不受限制的

10、手機端網站要設計哪些功能

第一：移動網站頁面設計
因為移動端不同於PC端，我們在設計之前就必須要考慮到其解析度的問題，由於移動端的特點屏幕小卻對內容要求要精簡全。所以移動網站建站對於頁面要求很高，在移動網站頁面設計之前就需要合理安排網站內容和結構。同時也要做好網站頁面布局和視覺體驗，因為只有良好的用戶體驗，才能讓網站在移動端獲得好的排名。

第二、移動網站導航設計
由於移動設備解析度的局限性，所以移動網站的導航設計顯得尤為困難，但是又不得不設計出很清晰導航結構，因為用戶進入到首頁之後，如果導航不清晰，將很難繼續訪問到網站內部。所以如何把PC端導航盡可能簡單甚至濃縮到移動網站就變得很重要，小編認為導航盡量包含主要欄目和重要信息頁足矣。

第三、網站內容布局要直奔主題
移動端由於解析度的問題，不可能做的跟PC端那麼全面。這就需要把重要信息放在顯眼的位置。最好別下滑到下一頁面。盡可能讓用戶在首屏就找到用戶想要的信息。這樣減少用戶下拉頁面時間，也可以用戶良好體驗度。

第四、移動網站載入問題
移動網站打開速度或者速率，都影響用戶打開網站。如果網站打開過慢，甚至超過5秒用戶打開率就迅速下降。因此，移動網站打開速率盡量保持在3秒之內，用戶就很願意在內容上面花費一定時間。因此，移動網站建設就盡量減少不必需要的圖片甚至動畫的使用，保證網站打開速度。