3/16

为您的设计
寻找专业的前端切图服务。

移动端设计需要注意的7个地方

切图网(qietu.com)长期致力于符合w3c标准的前端外包,会接触大量的优秀的设计师,我们太知道好的设计对于一个网站的用户体验的重要性,即便你是非常优秀的PC网站设计师, 在做移动网站设计的时候,依然不可掉以轻心,移动端的体验上有很多地方都与PC有区别,所以在设计的时候,一定一定要遵循这几个细节:

一.明确、重点突出的内容

许多人通常是在室外使用他们的移动设备——在一种匆匆忙忙的状态下。由于是小型的触摸屏,所以做起搜索和导航功能来并不容易。故而移动设计的体验之一就是简约原则。将干扰保持到最低限度。每个页面包括首页应该只有一个关注的重点。不要期待用户会接受任何非典型的手势,如滑动到下一个页面或者水平滚动。总之要让用户感觉怎么简单怎么来。可以通过小箭头或者悬浮消息来说明功能,不惜一切代价地要让用户更方便地找到他们想要的东西。

二.菜单和导航:保持简单化

传统的桌面网页会在页面顶部突出显示菜单栏。但是在移动设备上这会占用宝贵的屏幕空间。要解决这个问题,可以使用手风琴式下拉菜单,或者在手机屏幕的左上角或右上角显示菜单图标。

另一个不适用于移动设备的桌面习惯是,悬停显示拥有子菜单的多级菜单。在移动设备上,如果用户需要通过4级菜单才能找到想要访问的内容,那他们很有可能在第二次点击之后就关闭页面。所以在移动网站上应该尽可能地避免多级菜单。这一点和台式机设计有着本质的区别。

三.流式的布局

移动设备的尺寸种类很多 。但千万不要偷懒只设计了一个320像素的宽度。不管你承认与否——176、240、320、360,~480-600(横向)都是常见的设备宽度。灵活和流式的布局方可确保网页正确展示在不同的屏幕尺寸上。

四.触屏设计

只需要用键盘和鼠标事件就能与网站互动的美好时光一去不复返了。在移动设备上,互动的主要方式通常是触屏。触屏设计需要关注光标的精确,必须考虑所有形状和大小的手指产生各种类型的压力,在触碰屏幕时产生的不同响应。您需要确保表单、按钮和其他需要触摸或手势输入的元件足够大,以避免与相邻元件的重叠,或者误解触摸事件。

不要仅仅依赖于触摸输入。有迹象表明,有很多移动设备是使用触屏笔的,甚至一些老款的旧手机依然在使用方向键板。有许多移动设备/浏览器并不完全支持JavaScript的触摸事件。此外有的用户会使用组合设备输入,例如,使用鼠标连接到平板的情况。尽管这种情况不太常见,也应该评价他们对网站的重要性,并采取适当的处理措施。

五.表单最小化

小小的触摸屏,更小的虚拟键盘——仅仅5mmx 5mm大小,使得打字体验变得不那么美好。表单应该既小又简单。如果需要的话,可以构建独立的表单,用最少的字段来获取所需要的数据。尽可能预填充有默认值的字段。自动填充常用字段。

例如,使用可视化的日历,而不是让用户键入日期。对于那些不止一屏的长表单,最好设置进度条,用来说明用户已经完成了多少步骤,还需要多少步骤才能结束。

说到表单,那怎么能漏掉标签布置呢?你知道如果是顶部对齐的标签用户填写表单更快吗?即使设备可以在你打字的时候放大输入字段,也应该将标签保持在输入字段之上以确保它的可见。顶部对齐的标签也更方便用户在滚动到下一页时浏览字段和保持跟踪。

六.放弃图片

规模和速度是移动网站两个最为重要的性能。不要使用图片来实现如渐变和阴影的奇特效果。了解CSS的基础知识,并应用到网页设计中。使用图片来实现特殊效果越少越好。但是,并非所有的CSS3特效都可以在旧版的移动浏览器中实现,不过这没关系。网站的像素也没必要达到100%的完美无暇。

如果你喜欢在你的设计中使用花哨的文字作为图像,那么你最好放弃这种要不得的习惯。文本就作为为文本保存。虽然使用花哨的字体可以达到你想要的效果,但是这会占用网站的空间,增加页面的加载时间。

七.充分利用手机的特定功能

移动设备有许多功能,如GPS,Gyrometers和其他桌面设备不具备的感应器,如“滑动解锁”,以及打电话的功能。弄清楚如何使用这些功能,可以提升网站的移动体验。你也可以添加简单的功能,例如在联系人页面“点击”电话号码“通话”,共享整个社会媒体平台,通过GPS提供的位置提供具体的信息和服务等。这些都是你可以利用的手机特定功能,在它们的基础上打破陈规来实现更好的移动体验。

切图网长期致力于符合w3c标准的前端页面开发,所以深深的知道,一个拥有非常好用户体验的网站,并不仅仅依赖于前端技术,一个好的、合理的、优秀的网页设计是非常重要的, 特别是合理性上,而不仅仅是好看。想学web前端实战吗?加我微信 dingxiangming82