移动端网页怎么设计

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秒之内，用户就很愿意在内容上面花费一定时间。因此，移动网站建设就尽量减少不必需要的图片甚至动画的使用，保证网站打开速度。