网站移动端PC端

首先网站在电脑端和移动端要面对不用的窗口大小和分辨率，这就需要我们的网站有自适应各种分辨率的能力。手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上，有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。 2010年，Ethan Marcotte提出了"自适应网页设计"这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。要做到这一点我们首先需要在网页代码的头部，加入一行viewport元标签，我们设置网页的默认长宽为屏幕长宽。另外由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。我们可以使用‘width:auto; ’来指定百分比宽度。 另外现在的网站里普遍都有一定数量的图片，我们需要让图片也能自适应电脑端和移动端，和上面原理相同，让图片的大小设置为屏幕的占比，不要使用绝对的长宽高。例如如果我们用CSS编写就需要使用‘img{max-width:100%;}’来达到这个效果。总的来说我们需要让网站适应不同的屏幕宽度，以及分辨率，这样才能保证所有用户在使用我们的网站时有较好的使用体验。

另外PC端和移动端的网站用户通常有不同的使用习惯，首先是关于搜索功能，由于受到移动端屏幕尺寸大小的限制，所以移动端页面的承载内容不能像PC端一样完全展示。用户在搜索内容的时候，希望能够搜索到最自己有价值符合自己需要的内容，而不是移动端页面强行推荐给浏览用户的内容，甚至需要切屏和下拉屏幕的方式这种漫无目的寻找。因此，移动端网站中最好添加搜索功能，这种精准查找内容的方式更符合用户的浏览要求，将此功能的位置置于屏幕的顶端，更符合用户的搜索习惯。其次首页是给用户留下第一印象的关键因素，如果移动端首页直接从PC端嫁接过来，体验效果绝对会差不少，所以，移动端网站首页需要进行单独设计，这样单独设计的页面浏览起来更直观，包括后期移动端页面的优化会变得越来越简单。在移动端由于没有足够的版面，所以我们需要突出关键信息。一些电商网站和门户网站，由于网站的内容较多、结构复杂，所以在排版上难免会出现差错导致整站设计欠佳。由于移动端在内容展示中不足于容纳很多信息，因此在设计制作的过程中，需要根据相关类别和相关推荐，让用户阅读信息更加便捷。这样在关键词系统和分类系统足够完善的时候，相关推荐和类别推荐会让用户流连忘返。用户会更加高效从分类目录中找到自己想要内容，从而更好地留住用户。通过这些分析PC端用户以及移动端用户使用网站时的不同习惯，我们在网站设计时就可以做针对性的改进。

接下来介绍一下PC端和移动端在信息呈现的问题。移动端和PC端最根本的区别就是屏幕的大小。屏幕的大小直接决定了界面信息量，PC端一个页面可以展示完全的信息可能需要移动端好几个页面来承载。有的设计师觉得这样只要做个页面滑动就好了，但是我们需要考虑到用户是否愿意去滑动。所以在移动端我们需要有一个完全不同的信息架构，移动端的首页只能显示一些主要内容，一些次要的功能需要放在下一层级。例如，APPstore中用户是可以评价这条评论对自己是否有帮助的。PC端的处理方式很简单，直接展示给用户。而移动端是需要用户长按这条评论才可以弹出评价列表的。上面是对于一些普通网站的重构。对于一些表单类页面来说，例如用户要借钱、转账，有些信息是用户必须要填的。在这些场景中，我们不担心用户不滑动，因为用户不滑动就无法完成操作。但是我们仍然需要为移动端和PC端设计不同的界面。以上面的转账流程为例，PC端是直接在一个页面展示，而移动端是分成了两个页面。我们虽然可以合成为一个界面，但是我们不能那样做。因为移动端用户使用环境更加复杂多变，更容易受到干扰，所以必须保证界面信息的简单直观。如果在一个页面中展示过多的信息量，容易让用户混乱。这里所说信息量并不是指绝对信息量，更准确的说法应该是用户主观感受上的信息量。同样的几个输入框，可能在PC端只占了页面的1/4，而移动端占了一整个页面，给用户的感观是完全不一样的。页面塞得满满当当，容易让用户焦虑。总的来说我们对于信息的呈现需要充分考虑到用户的感受，将重要的信息优先突出的呈现。

最后由于移动端和PC端的硬件不同，性能不同。不论你的页面设计地多么有趣、漂亮、交互性好，不管是在桌面还是移动设备上，如果页面需要花3-5秒时间去渲染展示，那么用户都会很快变得不耐烦的，可以预期的是，在页面还在加载的时候，用户很有可能从浏览购买的行为转变为点击回退键或者是关闭浏览器的行为。一般来说人们都会对网页的打开时间容忍度为2秒，超过这个时间一般会选择刷新或者关闭网站。而移动设备天生有三种性能限制：带宽低，内存小和处理器性能低。同时随着时代的发展网页比以前更大，内容更多，移动端的加载压力更大。另外科技发展迅速，从3G，4G到5G有些用户的3G手机加载现在的网页可能会出现比较缓慢的感觉。目前解决的主要方法是减少每个页面需要获取额外资源的HTTP请求数。减少每个请求加载的大小以及优化客户端执行的优先级和脚本执行的效率。