预计移动Web浏览将成为下一个主要的Internet平台。 现在,由于技术原因,使用适合手持的移动设备,几乎可以从任何地方浏览网络。 在移动Web设计中,由于缺乏良好的可用性实现,因此很难浏览各种流行的移动网站。 移动设备的设计需要比其标准网站更简单,并且必须基于任务来完成工作,因为用户需要特定且紧迫的内容。
您应考虑如何将最少量的可用空间用于主要内容,并使移动用户仍然感兴趣。 避免使用大图像和Flash动画,因为这会降低您的网站速度。 请记住,对于移动网站,功能比样式更重要。 如果您的网站未正确编码和设计,则在一部手机上看起来可能会更好,而在另一部手机上看起来会更糟糕,甚至根本无法显示。 测试,验证并检查它是否与所有移动设备兼容。
为了帮助您创建不仅可以在台式机或笔记本电脑上访问的网站,还可以在移动设备上访问的网站,以下是带有示例图像以及移动网站版本的直接链接的移动Web设计中要考虑的一些事项。
1.确定屏幕分辨率
移动世界包含各种设计注意事项,从不同的屏幕尺寸和分辨率到各种形状。 目的是在足够的屏幕宽度和观众大小之间取得平衡。 找出当前移动设备的规格并做出最佳判断。 移动开发人员面临的挑战是如何让人们在各种屏幕尺寸上正确显示而不用为不同平台重新创建页面的方式。
这是Uxbooth.com在2011年2月起在移动设备上流行的Web分辨率的列表,并发布了David Leggett撰写的文章“移动Web设计的注意事项(第2部分):尺寸” 。 作者解释了有关显示尺寸和布局设计解决方案的几点。
![移动网络设计可用性决议的18个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/530340d5d218598ce44bb3567c38b8ba.png)
![移动网络设计可用性的十大技巧 18-top-10-tips-for-mobile-web-design-usability-resolution](https://i-blog.csdnimg.cn/blog_migrate/530340d5d218598ce44bb3567c38b8ba.png)
2.将网页分成小部分
较长的文本可能难以阅读,因此将它们放在多页上会限制滚动到一个方向。 摆脱低优先级的内容。 坚持要换行的一行文字,这样就不会水平滚动。
对于以下示例,CBS新闻移动网站版本仅显示主要新闻部分,并将新闻文章分成小部分。 而Treehugger会以最新的文章和最新的推文介绍整个网站的某些功能。 这两个站点都使用户单击文本链接以查看本文的其余部分。
![01-top-10-提示移动网络设计可用性-cbs-新闻](https://i-blog.csdnimg.cn/blog_migrate/b4cc5817f40900b72559029329a5abed.png)
![移动网络设计可用性的十大技巧 01-top-10-tips-for-mobile-web-design-usability-cbs-news](https://i-blog.csdnimg.cn/blog_migrate/b4cc5817f40900b72559029329a5abed.png)
![02-top-10-提示移动网络设计可用性树拥抱者](https://i-blog.csdnimg.cn/blog_migrate/5b804ebed1250a0d16a6235100aa9306.png)
![移动网络设计可用性的十大技巧 02-top-10-tips-for-mobile-web-design-usability-treehugger](https://i-blog.csdnimg.cn/blog_migrate/5b804ebed1250a0d16a6235100aa9306.png)
3.简化设计
简单等于可用性。 让他们毫不费力地在站点中移动。 避免包含表格,框架和其他格式。 如果您使用填充,请记住将其保持在绝对最小值,该最小值要比用于普通网页的最小值小得多。 与台式计算机相比,单击移动网站上的链接的次数越多,由于加载时间而等待的时间就越长。 这样一来,您需要精简网站,并在内容和导航之间取得平衡。
在我们的示例中,百思买的移动版本网站仅列出了最基本的产品类别,这些产品类别削减了内容的层次结构。 而YouTube移动首页仅显示四个最新的焦点视频。
![03-top-10-移动网络设计可用性最佳购买的提示](https://i-blog.csdnimg.cn/blog_migrate/ce4139e8ab4996168785c39b88760030.png)
![移动网络设计可用性的十大技巧 03-top-10-tips-for-mobile-web-design-usability-best-buy](https://i-blog.csdnimg.cn/blog_migrate/ce4139e8ab4996168785c39b88760030.png)
![04-top-10-tips-for-mobile-web-design-usability-youtube](https://i-blog.csdnimg.cn/blog_migrate/f4c99fcb27467ed344b88b7ce4f292a3.png)
![移动网络设计可用性的十大技巧 04-top-10-tips-for-mobile-web-design-usability-youtube](https://i-blog.csdnimg.cn/blog_migrate/f4c99fcb27467ed344b88b7ce4f292a3.png)
4.选择查看完整的网站
提供一个链接,供移动访问者切换回完整的网站,以供用户查找和查看该网站的桌面版本只能访问的其他内容和功能。 您的观众肯定会进行很多垂直滚动,因此请使用“返回首页”链接帮助他们,以便他们可以跳至页面顶部。
例如,Ars Technica在标题上有指向标准网站的链接按钮。 香格里拉的完整网站链接位于页脚。
![07-top-10-tips for mobile-web-design-usability-ars-technica](https://i-blog.csdnimg.cn/blog_migrate/8cc9fc8d754e01736a3aacce2f34ac03.png)
![移动网络设计可用性的十大技巧 07-top-10-tips-for-mobile-web-design-usability-ars-technica](https://i-blog.csdnimg.cn/blog_migrate/8cc9fc8d754e01736a3aacce2f34ac03.png)
![05-top-10-tips for mobile-web-design-usability-shangri-la](https://i-blog.csdnimg.cn/blog_migrate/01ae7ca3b24417afc1e5618c68362027.png)
![移动网络设计可用性的十大技巧 05-top-10-tips-for-mobile-web-design-usability-shangri-la](https://i-blog.csdnimg.cn/blog_migrate/01ae7ca3b24417afc1e5618c68362027.png)
5.导航位置
了解您的听众,并了解他们在寻找什么。 了解他们将如何浏览您的网站。 如果您的目标移动用户希望快速查看更改内容,则将导航菜单置于内容下方。 必须首先显示内容和标题,以免妨碍查看页面内容。 对于想要立即在特定类别上导航的用户,请将导航置于页面顶部。 以下是在移动Web设计中使用的各种导航位置示例。
![08-top-10-提示移动网络设计可用性-dolce-n-gabbana](https://i-blog.csdnimg.cn/blog_migrate/461d5107373cf402e485b608c6634e56.png)
![移动网络设计可用性的十大技巧 08-top-10-tips-for-mobile-web-design-usability-dolce-n-gabbana](https://i-blog.csdnimg.cn/blog_migrate/461d5107373cf402e485b608c6634e56.png)
政治
![09-top-10-提示移动网络设计可用性政治](https://i-blog.csdnimg.cn/blog_migrate/1d2f8c841c5569675cdfc019ac84946e.png)
![移动网络设计可用性的十大技巧 09-top-10-tips-for-mobile-web-design-usability-politico](https://i-blog.csdnimg.cn/blog_migrate/1d2f8c841c5569675cdfc019ac84946e.png)
每日星座运势
![19个顶级10技巧,可帮助移动网络设计实用性](https://i-blog.csdnimg.cn/blog_migrate/8c47dbede261273a8b7498afa18e7152.png)
![移动网络设计可用性的十大技巧 19-top-10-tips-for-mobile-web-design-usability-hastral](https://i-blog.csdnimg.cn/blog_migrate/8c47dbede261273a8b7498afa18e7152.png)
6.使用文字链接
您的主要网站可能会使用泛滥的菜单,鼠标悬停或其他精美的小工具,但移动浏览器可能不会。 请注意,动态页面元素和图形链接会占用资源,因此请选择标签明确的文本链接。
![移动网络设计可用性的10个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/65015dacd4b2ce0a3dc6fbb47eeb5a9f.png)
![移动网络设计可用性的十大技巧 10-top-10-tips-for-mobile-web-design-usability-a-list-apart](https://i-blog.csdnimg.cn/blog_migrate/65015dacd4b2ce0a3dc6fbb47eeb5a9f.png)
![移动网络设计可用性Reddit的11个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/1540ac374bdac05b7fca6afc91ace348.png)
![移动网络设计可用性的十大技巧 11-top-10-tips-for-mobile-web-design-usability-reddit](https://i-blog.csdnimg.cn/blog_migrate/1540ac374bdac05b7fca6afc91ace348.png)
7.区分所选链接
向下移动光标将滚动页面并突出显示所有链接。 因此,重要的是要清楚地告知用户所关注的项目。 可以通过更改链接和按钮的字体和背景颜色,或通过简单地在链接周围添加一些填充以使可点击区域扩大约44px x 44px来完成此操作。 Geek Squad和Diesel使用大字体显示可单击的文本。
![移动网络设计可用性极客小组的12个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/52f578233f7547c3ccb4b600b1bddd35.png)
![移动网络设计可用性的十大技巧 12-top-10-tips-for-mobile-web-design-usability-geek-squad](https://i-blog.csdnimg.cn/blog_migrate/52f578233f7547c3ccb4b600b1bddd35.png)
柴油机
![移动网络设计可用性柴油的13个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/5c5ec52108a73e5085940197a56b46dd.png)
![移动网络设计可用性的十大技巧 13-top-10-tips-for-mobile-web-design-usability-diesel](https://i-blog.csdnimg.cn/blog_migrate/5c5ec52108a73e5085940197a56b46dd.png)
8.平衡链接
每次下载页面都会消耗时间和系统资源,而后者则供不应求,因此,请不要强迫站点访问者浏览大量页面以访问所需信息。 在每个页面上的链接数和网站的深度之间取得平衡。
![14个顶级10小技巧,用于移动网络设计可用性flickr](https://i-blog.csdnimg.cn/blog_migrate/2fc4e50da0e46822b8c5e9d8f3275461.png)
![移动网络设计可用性的十大技巧 14-top-10-tips-for-mobile-web-design-usability-flickr](https://i-blog.csdnimg.cn/blog_migrate/2fc4e50da0e46822b8c5e9d8f3275461.png)
![移动网络设计可用性推特的15个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/98951b6ddf36a1e146a9599fcf2f2c1a.png)
![移动网络设计可用性的十大技巧 15-top-10-tips-for-mobile-web-design-usability-twitter](https://i-blog.csdnimg.cn/blog_migrate/98951b6ddf36a1e146a9599fcf2f2c1a.png)
9.减少用户文本输入
在移动版本的网站中很难输入文本。 替换为单选按钮或列表,以便他们可以轻松选择所需的内容。 请记住,手机用户无法使用传统的键盘和鼠标。 URL越短,越好,因为键入长URL是单调的。
对于下面的示例,Fedex使用了清单和下拉菜单。 当Tumblr使您可以使用下拉菜单选择语言时。
![移动网络设计可用性联邦快递的16个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/95ced1ab269643b1d3ceb8659a0aec41.png)
![移动网络设计可用性的十大技巧 16-top-10-tips-for-mobile-web-design-usability-fedex](https://i-blog.csdnimg.cn/blog_migrate/95ced1ab269643b1d3ceb8659a0aec41.png)
![移动网络设计可用性tumblr的17个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/e17eb110aae3b5b3d13a5db8be3beb94.png)
![移动网络设计可用性的十大技巧 17-top-10-tips-for-mobile-web-design-usability-tumblr](https://i-blog.csdnimg.cn/blog_migrate/e17eb110aae3b5b3d13a5db8be3beb94.png)
10.没有弹出或刷新
移动浏览器通常不支持弹出窗口。 如果这样做的话,他们将可以进入非常狭窄的空间。 避免使用它们,以免发生不可预测的结果。 另外,不要定期刷新页面,以避免填充设备有限的内存。 让用户刷新内容。
![移动网络设计可用性弹出窗口的17个十大技巧](https://i-blog.csdnimg.cn/blog_migrate/2b1cac380af91a2e121657cad23ffb87.png)
![移动网络设计可用性的十大技巧 17-top-10-tips-for-mobile-web-design-usability-popup](https://i-blog.csdnimg.cn/blog_migrate/2b1cac380af91a2e121657cad23ffb87.png)
简而言之
发挥创意,并以新方式应用您的移动网页设计。 使您的内容具有足够的吸引力和可用性。 在需要时为用户提供所需的内容。 用户不想只是在移动网络中找到他们想要的内容而深入研究该站点。
您是否有任何真正激发您灵感的首选移动网站? 您可以分享一些移动网页设计技巧吗? 让我们知道!