添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 设计分享 >

移动端产品网页设计的五大原则

时间:2013-11-22      来源:互联网     

  移动端产品网页设计也就是设计师们常说的界面设计,它和以往的网页设计在设计上还是有很大的差别的,移动端的界面设计更需要设计师们有丰富的实战经验,以为没做一步都要考虑的相当的周全,增强用户体验,从而达到品牌的营销。

  作为一个移动端的设计的初学者,可能和我一样,都不是十分的了解,如何进行这样的界面设计,但是学会经常在网上浏览相关的内容,相信你的进步会很大。以下就是移动端产品设计的五大原则。

  一、用户界面应是基于用户的心理模型,而不是基于工程实现模型

  这就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点,用户的心理模型抓的越准,界面就会越优秀。

  左边界面是大众点评新版的价格搜索界面,比之前改得更符合用户心里模型;右边界面是食神摇摇的摇动手机找餐厅,更加符合大众用户的心里,大家应该都有那种中午不知道去哪家餐厅就餐,那么就摇一摇来随机抽出一个附近的餐厅。

  二、培养以用户使用情景的思维方式做设计

  要做到这个原则其实是很难的,需要长期的实战经验才能做到这点。

  比如,我们都知道米聊出的比微信早,但后来被微信反超,个人认为不光是QQ帮了微信很大忙,比如用户登录门槛低,用户来源,广告打得响之类的,其实在用户使用情景方面米聊研究的没有微信透彻。

  对于一个社交即时通讯产品,添加好友的功能是好友汇聚的来源,虽然米聊微信都绑定手机通讯录,但话又说回来,用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友,找好友, 碰好友的一扇门。所以对于这么重要的功能放置在应用程序的哪个位置,在产品前期就会让用户明显的去选择用哪个应用,因为聊天工具的前提是要有人和你聊天。再回到现实的界面中来,看看下面的对比:

移动端产品网页设计的五大原则

  微信1.0的时候(我这里只截了4.0的图)把添加好友放置主Tab上,方便用户很快的添加好友米聊2.0时还是把添加好友放置在好友列表的第一排,用户很难发现。

  三、尽量少的让用户输入,输入时尽量多给出参考

  移动端的虚拟键盘一直是科技界无法解决的一个难题,虚拟键盘的主要缺点:

移动端产品网页设计的五大原则

  1.输入定位无法反馈,所以无法形成高效的盲打;

  2.虚拟键盘的空间限制,手指的点击经常造成误按。

  光是上面这两点就让虚拟键盘在输入上大打折扣,所以我们在设计应用程序时,只要遇到Input Box的控件时,首先就要想到尽量让用户少输入,或者智能的给出参考。

  百度音乐的搜索先是把近期最热门的歌曲依次排列在列表中,当有字输入时,会出现歌手的候选词,这里值得称赞的是百度音乐的搜索能根据用户输入的字来判断用户是搜索歌手还是歌名。

  百度地图也是用得比较顺手的一个地图导航应用,在减少输入方面也做的比较出色,百度地图拥有cookies功能, 另外就是百度搜索的技术应用在地名的匹配中也很让人欣喜,在用户输入到一半的时候,下面的候选列表就出现了目标地址,用户直接停止输入点击列表即可。

  四、全局导航需要一直存在,最好还能预览其他模块的动态

  全局导航在Web交互设计中比较容易做到,在手机移动端全局导航要看产品设计的需求,什么功能需要全局导航,社交应用通常是:消息,通知,请求;音乐视频应用通常是:下载,搜索;工具类产品经常是核心工具条(tool bar) 比如浏览器,语音助理,音乐识别应用等等。

移动端产品网页设计的五大原则

  全局导航的价值在于可以让用户在使用过程中不会丢失信息,减少主页面和次级页面之间的跳转次数,当然全局导航中的info-task要能在当前页面完成,如果需要跳转到新界面,就会失去全局导航的意义,因为当出现多个info-task的时候,就需要用户不停的进入全局导航页面来完成。

  五、提供非模态的反馈,不打断任务流

  模态弹出框的书面名称在iphone OS中称作:Alert-box,在Android OS中称:Pop-up box, 我们都知道弹框会打断任务流,所以在有限的屏幕上怎样让这些弹框弱化,或者说优雅、绅士的提醒用户,这个需要设计师来定义。

  模态是指界面中只有提醒弹框才具有可交互行为,其他一切都不可操作;非模态不会把提醒做成弹框,可能会处理成List Notification, Toast list等方式来提醒用户。

  移动端产品的网页设计是引领未来网页设计的一个潮流,希望设计们更好的学习移动端的产品设计。我也会及时把我收集的信息分享给大家。

web前端视频教程
标签 网页设计
相关文章
web前端视频教程


最新更新

网页特效

web前端视频教程