手机无线设计8个交互设计原则

产品设计的原则有点太泛哈,这里想结合自己的工作心得来小结一下手机无线设计8原则:

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

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

2:培养用使用情景的思方式做设计
要做到这个原则其实是很难的,需要长期的实战经验才能做到这点。
那我们都知道米聊出的比微信早,但后来被微信反超,个人认为不光是QQ帮了微信很大忙,比如用户登录门槛低,用户来源,广告打得响之类的,其实在用户使用情景方面米聊研究的没有微信透彻。

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

bb (1)

微信1.0的时候(我这里只截了4.0的图)把添加好友放置主Tab上,方便用户很快的添加好友

cc

米聊2.0时还是把添加好友放置在好友列表的第一排,用户很难发现

3:尽量少的户输入,尽量多出参考
移动端的虚拟键盘一直是科技界无法解决的一个难题,虚拟键盘的主要缺点:1.输入定位无法反馈,所以无法形成高效的盲打;2.虚拟键盘的空间限制,手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣,所以我们在设计应用程序时,只要遇到Input Box的控件时,首先就要想到尽量让用户少输入,或者智能的给出参考。

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

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

4全局航需要一直存在,最好还能预览其他模动态
全局导航在Web交互设计中比较容易做到,在手机移动端全局导航要看产品设计的需求,什么功能需要全局导航,社交应用通常是:消息,通知,请求;音乐视频应用通常是:下载,搜索;工具类产品经常是核心工具条(tool bar) 比如浏览器,语音助理,音乐识别应用等等。
全局导航的价值在于可以让用户在使用过程中不会丢失信息,减少主页面和次级页面之间的跳转次数,当然全局导航中的info-task要能在当前页面完成,如果需要跳转到新界面,就会失去全局导航的意义,因为当出现多个info-task的时候,就需要用户不停的进入全局导航页面来完成。

ff
Facebook 的朋友请求,消息,通知都是采用全局导航的方式,就是面板设计的丑了些~

gg

米聊的通知中心,里面包含的通知类型蛮多的,显得有点凌乱,希望下面的版本会筛选归类

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

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

hh
Gmail是第一个把删除的模态弹框设计成List Notification这种方式的,提醒用户撤销刚才的删除操作,这种非模态的处理,让删除的流程更加顺畅和轻松自如。

ii
K歌达人第二版的弹框就是模态处理,界面很不友好,用户在K歌过程中要被打断三次才能发表一首自己唱的歌曲,所以降低了用户的参与度。

原则6:不要让用户等待任务完成,用户还要发现更多有意思的地方
移动互联的核心就是给用户带来移动体验的方便和高效,这是 移动互联网Apps需要考虑的,用户在使用你产品在很多情况下都是碎片时间, 所以在设计上尽量让用户在短时间内熟悉我们的产品,知道这个产品的诚意,特别是某些等待界面需要设计,不能把一个很枯燥的等待界面呈现在用户的面前,那用户很快就会换其他apps。

jj
在Instagram 拍完照片后,点击上传后,它的处理方式是回到首页的位置,告诉你的照片正在提交,并不是显示一个上传进度的界面,让用户看那上传百分比。因此,我们在设计米吧上传歌曲文件时也只是告知用户后台正在帮你上传,叫用户放心,用户自然就会去玩其他的功能,没有让用户焦虑的等待,等上传完毕时,我们再用Toast list通知用户已经上传成功,这样把查看上传结果的主动权交给用户。

原则7:自动保存用户的输入成果
在移动端,由于输入面板的复杂性,而且触摸输入没有物理按键的反馈自然,特别是手机上去输入一段文字或者信息,对用户而言本身就是一件很痛苦的事情;对产品而言,用户的在你的产品中输入是一个很值得庆幸的事情,所以设计人员需要让你的apps自动保存用户的输入成果。

kk
微博官方的手机客户端在用户输入信息后,点击左上角的叉时会弹出Action sheet来询问,确认是否要放弃,或者保存为草稿;path的处理则更为人性化,在处于断网的情景下,用户依然可以发布照片和文字,当然后面联网成功后,系统会自动上传,只是发表时间是连网后发布的时间点;Instagram的评论也很友好,在断网或者网络情况不稳定的情景,用户输入的评论依然可以发布,后面会有一个叹号提醒用户稍后发布或者重试,提升了用户参与的积极行,同时活跃了社区。

原则8:为了程序响应的速度,设计有时候需要担任掩护的作用
科技并不是万能的, 技术依然是移动互联网应用程序最需要优化和完善的,作为技术的盟友我们设计人员也需要辅佐他们,让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题,与网络环境也有很大的关系,这时候设计人员需要考虑这些客观存在的情况,帮助程序来掩护这些瑕疵,让用户感觉到在使用时是流畅的。
ll
#随后实现# Instagram帖子“赞” 不管对参与者还是帖子作者都是激发其积极性活跃社区氛围的重要功能,所以在程序的响应方面一定要具有可用,易用的特性,我们看左图中,“赞”的按钮已经现实“已赞”,同时我们看红色框内的“菊花瓣”就知道后台在loading赞的数据,所以这就是设计的巧妙之处,先让用户感知到程序是非常快速的,而不是等loading完之后再显示“已赞”;

#提前传输# Instagram中发布帖子的时候,用户处理完照片点击“上传”按钮就看到中间的界面,这时候界面是让用户去为自己的帖子输入一个主题,或者去设置分享等功能,同时我们可以看到红色框中的“菊花瓣”,很明显后台已经开始传输刚才上传的照片了,所以当用户在点击“完成”时,数据只需要上传剩下的一部分,让用户感知上传很迅速;

#边唱边完成# 把伴奏和用户的歌声合成为一首音乐时需要后台处理大量的数据,如果分步做就要让用户等待比较长的合成时间,为了让用户不用枯燥的等待合成,我们需要后台在用户唱歌的同时,后台就已经开始把唱过的伴奏和歌声合成。

以上八项原则是我在工作中体会比较深刻的交互设计原则,希望能对观看到这篇博文的朋友有所帮助。当然设计原则是随着时间的变化而不断变化的,所以也请各位朋友完善和补充,谢谢!

文章来源于:知乎网作者:向华盛

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/4666/

(0)
CatherineCatherine
上一篇 2015-04-07 09:22
下一篇 2015-04-08 23:41

相关推荐

  • 色彩在交互设计中的应用

    UI设计微课堂关注将获得一对一解答,设计、资源、分享😛听说很多同学都置顶了我的公众号这样就能第一时间收到我精选的UI设计精品教程感谢大家的支持!↓↓下方高能↓↓对于交互设计师来说,通常交互原型都做为黑白稿。为什么要做黑白稿呢?那是因为在前期交互设计中,交互设计师为了更专注于产品的流程、跳转,避免前期投入更多的精力在UI效果制作方面。对于很多小公司或小团队来说,通常只有一个设计师或者设计资源很少,设计师拿到需求后,直接就出高保真效果图了(...

    2018-04-24
  • 关于工作效率的心得分享?(拖延症患者必看!)

    来源:Tencent CDC 作者:milaky 这是去年11月底在小组里分享过的工作效率心得,在这里也跟大家分享一下工作“快”感哈哈。我相信大家应该都有过工作效率的些许烦恼。而这个效率啊伴随我很长时间的痛苦。每每到PDI的…

    2014-09-21
  • 回归设计,iPhone 6是一个好产品吗?

    很有意思的是,几乎每一代新 iPhone 出来后网上总会骂声一片,许多人抱怨它的样子难看、没什么改变……这次发布的大屏 iPhone 6 也不例外,普遍大家抨击的焦点都在后置凸出的摄像头以及后壳两条突出的天线设计上。 有…

    2014-10-28
  • 熊先生做原型之 - 四款常用原型设计工具预览功能PK

    经过这么长时间的摸索,熊先生明白了一个道理:原型设计是提高产品开发效率中的不可缺少的一部分。那么,把做好的原型快捷、有效的演示给开发和客户就变成了很重要的一个环节。目前大家比较常用的几款原型设计工具…

    2023-03-03
  • 张茂泽:论黄帝陵的文化内涵 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起的“黄帝陵国家文化公园规划设计大师工作营”,邀请了中国具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地,对黄帝陵国家文化公园进行实地调研、研讨,分别提出未来黄帝陵国家文化公园的规划设计理念及方案。3月9日,西北大学中国思想文化研究所教授张茂泽作为探班大师来到工作营现场,以《论黄帝陵的...

    2018-03-17
  • 2019交互设计考研普通长期班招生简章

    “应部分报考交互设计方向考生特殊需求,我们在保证搭建一个完整交互知识框架体系及备考专业课复习完整性标准下,特开设交互设计长期普通班课程。该课程更强调考生的“主动学习”能力。”招生简章开设课程:交互设计长期普通班(线上课程)课程时间:2018年5月中旬——2018年12月初试前(每周3课时)课时       :110课时(每课时1小时)费用      :7500元招生人数:线上课程16人(超数不招生)课程总框架:Part 1▪交互知识学习...

    2018-04-06
  • 用户体验系列05:降低用户记忆负担的五种类型

    碎片化应用,是一个日益被强化的概念,诠释了用户的使用场景。其实在碎片化应用的背后,也映射出用户需要面对海量的数据,需要承载的东西太多了。一个好的产品,在某些方面应该是能够帮用户减负的产品,降低用户记忆负担就是重要的一环。能让产品帮用户记忆的,就尽量不让用户记,增加用户负担。这里我汇总了五种常见的类型,以供大家参考。一个用户正在用手机看新闻,此时屏幕顶部弹出一条消息,告诉你预约的家政人员会在下午上门;然后用户退出新闻客户端,看到家政APP图标右上角提示有一条信息;打开APP并进入消息中心,看到了那条信息。除了提醒信息外,还提供了家政人员的姓名、电话等信息,用户可以直接点击手机号联系家政人员;当用户完成了一系列操作,退出APP,APP图标的提示标识也消失了。

    2017-05-03
  • 微信交互设计

    微信交互设计看点01一:交互设计(Interaction Design简称ID)在使用网站(软件、产品、各种服务)的时候,使用过程中的感觉就是一种交互体验。情感化交互设计意义:人机交互的发展趋势,会让用户感到更加亲切,自然.体现:交互界面(视觉),交互功能特质(感情),交互操作方式(惊喜)二:温暖感诉求(孤独和希望的对比||现实和理想的对比)登录页面====用心经营,寻找温暖感发现页面(朋友圈、扫一扫、摇一摇、附近的人)简单感诉求联系老...

    2018-03-17
  • 空状态的设计值得更多关注

    空状态,或称零数据状态,很多时候不太招设计师的待见。我们基本都是在主要流程界面的设计工作完成之后才会回过头来考虑完善一下,因为从表现上来看,空状态给人的感觉就是临时性的,有些微不足道。“用户会尝试多个同类app,然后在接下来的3到7天内决定其中的哪些不合适。对于’像样的’app,一旦用户决定保留超过7天,那么将会比较长久的存留下去。成功的关键在于怎样使产品在这3到7天当中保持与用户的良好互动。” Ankit Jain – Quettra“很多时候,人们放弃一款产品的原因其实都是我们可控的,例如他们无法一目了然的看出与你的app产生互动之后能给他们带来什么好处。” – Patrick Mckenzie

    2017-06-05
  • 什么是交互设计?这篇文让你彻底弄清!

    达内UI设计,中国UID课程标准制定者通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽...

    2018-04-08