手机网站开发

如何做好移动手机网站的设计

阅读  ·  发布日期 2021-04-06 23:20

作为移动设计师总会思考这样一个问题什么样的移动网站才是一个优秀的产品?这个问题的标准可能有很多功能实用、简单易学、操作高效、界面炫丽、转场流畅等。把每个环节都做好...

详细信息
移动网站设计
作为移动设计师总会思考这样一个问题——什么样的移动网站才是一个优秀的产品?这个问题的标准可能有很多——功能实用、简单易学、操作高效、界面炫丽、转场流畅等。把每个环节都做好当然是最完美的,但如果想让自己的产品在成千上万的应用中被选出来并安装到用户的手机上,就要花些心思去了解下怎样的产品才能让用户一见钟情。

给用户最想要的

前面所说的几个应用都有自己的核心价值,因为满足了用户某方面的需求,从而取得了成功。令人非常好奇的是为什么有些人安装了淘宝客户端,同时又安装了口袋购物(它所展示的商品最后几乎都链接到了淘宝中内容)?虽然淘宝客户端提供给用户一个完整购物流程,但口袋购物给用户的核心价值却是精选的商品,让用户能逛起来。它的界面的运营活动、商品列表、商品详情都用图片展示,在“逛”的设计上确实比下了更多功夫,提供了“逛”的核心价值。
对于移动网站,首要的是能给用户带来的核心价值是什么。只有明确并能清晰地阐述这一点,应用才有可能取得成功。满足用户需求,并不是意味着功能越多越好,而是要突出那个最核心的价值。而这个需要在开发应用之前就明确,立项之初项目成员之间就要基于这个核心价值达成共识,整个应用都要围绕着它来进行设计。在现实产品演进的过程中,要预防因少数用户提出的各种非核心需求而迷失方向——一直增加新功能是非常危险的。

让用户一眼就看明白

提供清晰的核心价值是一个应用的基石,而如何清晰地把它传递给用户,则是设计师的重要职责。移动网站的信息架构就是传递信息给用户的框架,符合用户模型、表达清晰的结构是一个好的设计的基础。
为了减少用户的认知负荷,提高界面识别性,移动网站的界面元素要尽量简单、清晰,采用拟物、隐喻的方式设计,更好地将物理世界中的概念迁移到界面上来,让用户能更快地理解界面的含义。移动界面的可视化表达也是降低认知负荷的重要方法,不要用大段文字的形式来表达信息,尽量使用信息可视化的方法,把信息呈现得更清晰易懂,可视化设计的具体方法请参见第5章“细节”的相关内容。

简单易用才受欢迎

移动网站的使用情景相对复杂,同时可选择性很多,要想让用户持续使用你的应用,那么操作它的方法必须简单、易学、易用,同时操作负荷要低。
在操作上要转换PC的设计思路,以触摸优先的方式进行设计,更多地使用手势来完成交互而不只是点击。在设计上,可以先以手势交互为基础来考虑完成任务的可能性,建立以手势为基础的交互模式。用户在完成任务时,要保持操作手指的轨迹的流畅性,更多地满足单手操作的要求。单手操作手指可触及的范围与双手的区域有较大的不同,要牢记手指敏感的区域,特别是在iPhone5这类更大的屏幕上操作时,我们更需要思考这些交互的工效学问题。尽量把操作设置在拇指易操作的区域,让用户单手操作时更加流畅。
在应用界面操作时,使用点击可以完成所有功能,但是交互可选的形式很多,而且点击在很多情况下都不是最小负荷的操作方式,可以将点击操作替代为其他的交互形式,如划动屏幕解锁、摇动手机找好友、上下摆动手机翻页等。
移动网站本身具有多种传感器,可以识别出应用的操作情景,基于对情景的判断来智能地帮助用户完成操作,提供更人性化的交互形式,简化用户的行为。例如,系统会根据环境亮度来自动调节手机的亮度,使人始终能在最舒适的对比度下来看手机。同样,语音输入、扫二维码输入网址等也可以减少手工输入。