- 相关推荐
移动端网页设计方法
对于现在的设计师而言，真正的第一屏到底是桌面还是移动端界面，真的很难说了。也许“移动端优先”的说法并不准确，但是“移动端屏幕为主”的说法和实际状况已经非常接近了。下面是移动端网页设计的方法，欢迎参考!
移动端网页设计方法
那么造就优秀的移动端用户体验，最重要的是什么?精细的图片?雅致的图标?还是细致入微的UI界面?如果你经常浏览移动端网页，你最期待的应该还是无缝而流畅的导航体验。从一个界面流畅的切换到另一个界面，没有迟滞，没有错位的视觉元素，完整的内容加载，用户对于这样的浏览体验是欲罢不能的，转化率的提升是显而易见的。
真正优秀的导航体验往往能更好地帮助用户找到他们想要的内容，而不是在有限的屏幕上塞入更多的信息，精准地在菜单栏里面加入有用的、易用的、主要的条目，才是最明智的选择。
搜索
许多网页的内容非常多，在界面中引入搜索引擎能够帮用户更快地筛选内容。移动端屏幕尺寸的限制就已经决定了页面能承载的内容有限，无法像桌面端那样来系统而全面的展现信息。
用户期待网站能够提供一个能快速获取精准信息的渠道，撇开漫无目的的浏览，用户通常会有有目的地找某类文章甚至某篇文章，希望找到某个产品，而搜索引擎可以很快地缩小浏览的范畴。
最好的方案是将搜索功能置于屏幕顶端，无论是移动端网页还是APP，这种设计好处在于它易于发现，还符合用户日常的浏览习惯。
维基百科的移动端页面自然而然地将搜索框置于页面顶部，这是网站属性所决定的。但是LinkedIn则将搜索功能置于底部菜单栏当中，这也是某种意义上的固化于界面，这也符合逻辑——毕竟它的社交属性高于信息搜索。
首页
作为从桌面端继承过来的最主要的意符，首页的小房子图标称得上是约定俗成的存在。当用户看到这个这个图标的时候通常会很清晰地知道它所代表的含义。
在移动端上，首页的作用被明显放大的，因为在强交互多界面的移动端，首页图标的存在让用户更高效、更快捷地明白哪里是首页、哪里包含了最主要的内容，他们知道从哪里开始。与此同时，移动端首页的存在让更多的内容有了承载的核心。
多任务、强交互的移动端还存在一个常见的状况，就是电话、短信、推送无处不在，用户很容易被各种弹出信息吸引过去，而一旦用户浏览了其他的信息之后，再回到浏览器的时候，网站首页就成了信息的重要中转了。
分享按钮
事到如今，社会化分享已经随着社交媒体的火热发展而成为了用户生活中不可或缺的一部分。移动端的用户会将看到的、好玩的、有趣的、有用的各种内容、产品分享到不同的平台，分享按钮，必不可少。
实际上，移动端的分享比桌面端的分享更多、更快也更加深入人心。移动端设备的易用和普及是一方面，移动端的常见交互模式中，分享也占据着一席之地。这也是为什么，你应当在你的导航或者菜当中加入分享按钮。
毕竟，吸引用户的内容并不少，并且作为网站的所有者，也是希望不惜一切代价将自己的内容分享出去，不是么?
相关类别与推荐
电商类和强内容类的网站，内容庞杂，导航中能够容纳的内容有限，所以相关类别和相关推荐就显得相当实用了。在关键词系统和分类系统足够完善的时候，相关推荐和类别推荐会让用户流连忘返。
不论是购物还是消费内容的网站，菜当中通常不太需要加入太多的关于我们、联系我们这类链接，将分类和推荐做好会更好地留住用户。
在JC Penney 和 EB Games 的移动端网页都将在汉堡菜单当中隐藏了分类目录，用户会更加高效地从分类目录中浏览商品。
选择不多的菜单选项
设计师总想为用户做更多的事情，然而在移动端导航设计这件事情上，通常少总好过多。过多的选择通常会让用户忙乱，对于日益增长的选择强迫症用户而言更是灾难性的。
桌面端网页堆积如山的内容已经让用户烦躁无比了，移动端上再沿袭这个思路，用户是难于接受的。不管你愿不愿意承认，现在的用户可用的时间更加碎片化，信息只有更加快捷直接的呈现，才能被注意、被关注。深思熟虑和精挑细选是移动端网页的取胜之道。
移动端网页设计的尺寸
在Window XP常见分辨率1024×768下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。
在Window 7常见分辨率1440×900下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。
于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度(尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率)，然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。
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
1. 简化导航
与曾经流行的大型导航设计相比，移动端设备和精简的导航更合适。当用户使用移动端设备时，打开应用程序和网站时，他们希望尽快找到想要的内容。
因此，在设计手机APP和网站的导航时，尽量根据分析和实际情况保留最常用的导航选项。
这种设计一方面节省了屏幕空间，且导航选项的触发区域可以设计得相对较大。
至于汉堡图标和弹出式菜单的具体使用情况，还有待商榷，可以根据实际情况灵活处理，但是习惯有了汉堡图标的菜单标志，用户可以很快理解它的意思，并意识到它后面有一个弹出菜单。
2.多考虑手势和触摸
移动端设备和桌面之间的交互非常不同，UI和UX的设计应该有意识地适应移动端设备。
在这个过程中，手势交互是一个重要的部分，设计师应该充分利用手势来帮助用户更快更有效地完成交互。
常见的动作包括:
(1)点击，双击。
(2)按压。
(3)长按。
(4)托拽。
(5)缩放。
(6)滑动。
手势交互在移动端的位置相当于桌面的点击交互。
但是当考虑手势的互动时，不要忘记匹配相应的触觉反馈。在日常的移动端设备使用中，振动和力的反馈常常被用来增强交互体验。
这种触觉设计的本质是尽可能的微妙，确保用户能够感知反馈，而又不太有吸引力，触控界面越来越多，就是用户从中获得积极的响应。
3.创建对话
人们总是希望通过语言交流来进行沟通，这也使得会话UI和聊天机器人逐渐成为一种流行趋势。因此，当有可能允许用户在移动UI中实时聊天时，可以借用一个对话式UI来增强用户体验:
在你的界面上添加更多感人的文案，无论是一段文本还是界面元素中的一个微型副本，都可以创建一个包含更多感人文本的对话。与WTFWeather应用程序一样，从文本到标签都使用对话式表达，并在为用户推送信息时尝试创建对话。
【移动端网页设计方法】相关文章：
网页设计的原则06-13
网页设计的布局12-06
网页制作教学设计11-30
网页设计流行趋势08-23
网页设计常用的技巧04-25
网页设计css教学02-07
常见的网页布局设计04-21
网页设计配色方案12-27
Dreamweaver创建网页的基本方法04-01
网页打开慢的解决方法07-17