课程咨询 :0571-56020837 QQ:162157806

南昌达内UI名师

南昌UI培训 > 达内新闻 > 移动端网页设计入门指南
  • 移动端网页设计入门指南

    发布:南昌UI培训      来源:优设网      时间:2016-02-02


  •     南昌达内UI培训专家跟大家聊聊如何做出优秀的移动端网页设计。

        移动端流量早已超越了PC端,手机和平板逐渐成为主流,对于设计师来说,真正的第一屏毫无疑问就是移动端界面了,打造优秀的移动端用户体验,也就成为首要目标了。

        如何打造优秀的移动端用户体验?是精细的图片?还是雅致的图标?抑或是细致入微的UI界面?用户最期待的是无缝而流畅的导航体验!流畅的界面切换、完整的内容加载、正确的视觉元素,才是吸引用户的利器,继而提升转化率。

        优秀的导航设计能够帮助用户找到有用的信息,精准地在菜单栏里面加入有用的、易用的、主要的条目。

        1、搜索

        许多网页的内容非常多,在界面中引入搜索引擎能够帮用户更快地筛选内容。移动端屏幕尺寸的限制就已经决定了页面能承载的内容有限,无法像桌面端那样来系统而全面的展现信息。

        用户期待网站能够提供一个能快速获取精准信息的渠道,撇开漫无目的的浏览,用户通常会有有目的地找某类文章甚至某篇文章,希望找到某个产品,而搜索引擎可以很快地缩小浏览的范畴。

        最好的方案是将搜索功能置于屏幕顶端,无论是移动端网页还是APP,这种设计好处在于它易于发现,还符合用户日常的浏览习惯。

        维基百科的移动端页面自然而然地将搜索框置于页面顶部,这是网站属性所决定的。但是LinkedIn 则将搜索功能置于底部菜单栏当中,这也是某种意义上的固化于界面,这也符合逻辑——毕竟它的社交属性高于信息搜索。 

        2、首页

        作为从桌面端继承过来的最主要的意符,首页的小房子图标称得上是约定俗成的存在。当用户看到这个这个图标的时候通常会很清晰地知道它所代表的含义。

        在移动端上,首页的作用被明显放大的,因为在强交互多界面的移动端,首页图标的存在让用户更高效、更快捷地明白哪里是首页、哪里包含了最主要的内容,他们知道从哪里开始。与此同时,移动端首页的存在让更多的内容有了承载的核心。 

        多任务、强交互的移动端还存在一个常见的状况,就是电话、短信、推送无处不在,用户很容易被各种弹出信息吸引过去,而一旦用户浏览了其他的信息之后,再回到浏览器的时候,网站首页就成了信息的重要中转了。

        Albertson 的移动端页面将首页的图标隐藏在汉堡图标下的侧边栏当中,即使是转型使用无限滚动界面的Twitter,在设计客户端的时候也习惯性地将首页按钮固化在底部的菜单栏当中。 

        3、分享按钮

        事到如今,社会化分享已经随着社交媒体的火热发展而成为了用户生活中不可或缺的一部分。移动端的用户会将看到的、好玩的、有趣的、有用的各种内容、产品分享到不同的平台,分享按钮,必不可少。

        实际上,移动端的分享比桌面端的分享更多、更快也更加深入人心。移动端设备的易用和普及是一方面,移动端的常见交互模式中,分享也占据着一席之地。这也是为什么,你应当在你的导航或者菜当中加入分享按钮。

        毕竟,吸引用户的内容并不少,并且作为网站的所有者,也是希望不惜一切代价将自己的内容分享出去,不是么? 

        4、相关类别与推荐

        电商类和强内容类的网站,内容庞杂,导航中能够容纳的内容有限,所以相关类别和相关推荐就显得相当实用了。在关键词系统和分类系统足够完善的时候,相关推荐和类别推荐会让用户流连忘返。

        不论是购物还是消费内容的网站,菜当中通常不太需要加入太多的关于我们、联系我们这类链接,将分类和推荐做好会更好地留住用户。

        在JC Penney 和 EB Games 的移动端网页都将在汉堡菜单当中隐藏了分类目录,用户会更加高效地从分类目录中浏览商品。 

        5、选择不多的菜单选项

        设计师总想为用户做更多的事情,然而在移动端导航设计这件事情上,通常少总好过多。过多的选择通常会让用户忙乱,对于日益增长的选择强迫症用户而言更是灾难性的。

        桌面端网页堆积如山的内容已经让用户烦躁无比了,移动端上再沿袭这个思路,用户是难于接受的。不管你愿不愿意承认,现在的用户可用的时间更加碎片化,信息只有更加快捷直接的呈现,才能被注意、被关注。深思熟虑和精挑细选是移动端网页的取胜之道。





    原文链接:http://www.uisdc.com/perfecting-navigation-for-mobile-web
    推荐文章

上一篇:2016年强力推荐7个原型设计利器

下一篇:2016年混合型视差网页设计趋势

最新开班日期  |  更多

UI设计培训免费训练营

UI设计培训免费训练营

开班日期:每周一

UI设计培训高级班

UI设计培训高级班

开班日期:每周一

UI设计培训全日制班

UI设计培训全日制班

开班日期:每周一

UI设计培训周末班

UI设计培训周末班

开班日期:每周一

  • 地址:南昌市北京西路156号洪城大厦10楼
  • 课程培训电话:0571-56020837 QQ:162157806     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.com.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56