美文网首页
手机应用UX准则(Mobile App UX Principle

手机应用UX准则(Mobile App UX Principle

作者: XxxxxuY | 来源:发表于2018-03-21 19:40 被阅读0次

    Google在2015年发布过一篇针对手机app的用户体验准则,内容很基础,其中的内容特别适用于电商app。我在此做了原文主要内容的中文梳理,想看具体内容可以去原文阅读:https://storage.googleapis.com/think-emea/docs/article/Mobile_App_UX_Principles.pdf


    文章里主要把使用流程分为四部分:适应(Adopt),使用(Use),交易(Transact),返回(Return),并针对这四部分进行准则制定。

    一、适应(Adopt)——移开那些使用上的障碍

    1.启动页和引导(Splash Screen&On-boarding)

    App需要加载很快,永远不要让用户等;启动页包含品牌图标;如果app支持tips,tips要出现在用户使用的场景内容内。如果app支持引导(就是第一次使用时出现的使用指南),用户可以选择跳过,并且只出现在第一次使用,并且只包含最重要的使用要点,避免超过4页。

    2.主页和导航( Homescreen&Navigation)

    主页主要包括最优级内容,默认里(原文用default,个人理解为主页)只有最主要的导航和内容,次要内容需要隐藏并通过点和扫来呈现。由于手机页面有限,logo的使用要谨慎,只用在主页和启动页;App的使用意图与优先级与用户使用路线要很清楚;为了让用户使用更佳,购买和预定的理由要很清楚,(价格、折扣、材质等等)。默认里,只有最主要的内容和功能是on-screen,下一层级内容是off-screen并在菜单里可找到。抽屉式菜单(汉堡包菜单)是对app所有层级都可用的,并且在第一次使用时,展示或暗示如何用;安卓系统里,应用栏和标签栏应该在屏幕最上部;长界面是没有尽头的,并且要提供返回顶部按钮、在顶部的搜索区域、导航选择;菜单栏要短(最多到7);菜单栏所用术语不能对用户造成困扰;Carousels的使用要慎重(这条我还没太明白);用户可以快速水平轻扫到下一页面。

    3.注册、登陆和许可(Sign-up, Sign-in&Permissions)

    手机应用和手机网页的最大不同是应用可以让用户持续登陆(额。。。貌似手机网页也可以了吧)注册过程应该很快,benefit statements会更有吸引力(就是出现个框建议你注册并且有注册后的好处,当然,也伴随退出选项);如果app要求注册,用户要可以选择作为游客不注册(要给用户控制权);如果注册是强制的,用户可以在注册之前先尝试(依旧是用户控制权);第一次使用用户可以有多个注册选择(账号关联);用户可以选择显示或隐藏密码;用户再次使用时不需再次登陆;指纹识别对登陆来说很方便;请求用户许可(位置、语音、相机等等)

    二、使用(Use)——让决定变得简单

    1.搜索(search)

    搜索框显示要显著(比如在屏幕顶端),安卓系统里搜索框在顶部的应用栏(app bar),ios系统里,搜索框一般伴随范围栏(scope bar)。搜索时应有自动建议搜索结果,最前面的搜索结果最相关。搜不到相匹配的结果时,要提供其他选择。提供用户过滤、分类功能。展示最近搜索内容。搜索结果应展示基本和推荐信息(大众点评)。

    2.产品与服务(Product &Service)

    产品页就是用户做决定的地方(添加到购物车、预定等等)。产品描述应该容易被扫过(scan&skim),比如有list或bullet-point。主页横幅(Hero Image)要在上半版版面。产品图象可以快速水平轻扫,平且图像和视频品质要高,产品图象可以轻易被手指放大缩小。有用的产品内容更有说服力(产品品细节、注意事项、FAQs)。顾客的评论和哈平应该容易被看到并且是可靠的。价钱是透明的,应该展示原价、现价、折扣、税等。库存/现状也应提供。最重要的行动按钮(call-to-action button)是屏幕上最主要的元素,次之的行动按钮应该离它很近(比如添加到心愿栏的按钮会挨着添加到购物车的按钮)。在正在浏览的物品旁,用户可以看到到推荐商品。用户可以持续的看到购物车或预定图标在导航栏(navigation bar)旁边。

    3.多设备和线下(Cross Device & Offline)

    通过图像或者二维码扫描帮助更容易的找到产品。产品可以被预定或保存。心愿单和购物车同时存在用户账户里。产品可以被分享到其他应用上(微博、微信等)。用户可以轻易找到联系客服方式。用户可以通过app直接给商家打电话(click-to-call)、定位商家地址。

    三、交易(Transact)——始终提供便利

    在结账阶段,给用户提供直观的清楚的信息能让他们感到放心并到下一阶段,内容包括:购物车、个人和地址信息、支付、确认信息等等。

    1.购物车(basket)

    用户可以从中编辑产品属性(颜色、尺寸等等)(感觉国内很多电商没用这点)。用户可以看到相关推荐产品。

    2.个人和地址信息(Personal & Address Details)

    只展现这个阶段基本的信息和功能,其他元素(比如导航、菜单)容易让用户分心。对于再次使用用户,个人信息可以自动提前写好,并且交易过程只发生在单页面上(减少交易操作)。

    3.支付(Payment)

    价格要透明(展示税、折扣等),对于返回用户,支付内容可以自动填上。给用户提供适合他们国家的支付方式的选择(信用卡、支付宝等)。提供快递支付。在用户第一次选择支付方式后,之后再使用app可以自动选择,也可以保存信用卡号。手机也可以扫描卡号自动输入,ID卡也可以。

    4.结账和确认订单(Checkout&Comfirmation)

    用户可以选择他们想要的送货上门时间。如果用户在结账时突然关掉app,再次打开时上一次的信息应该自动保存了。确认页面让用户对交易更加安心,内容应该包含价格、送货日期、FAQs等等。确认页可以提供后续服务,比如送货之前的短信提醒、租车时提车的定位地址、在日历上、Passbook上添加事件等。

    四、返回(Return)——服务、参与与乐趣

    1.你的账户(Your Account)

    用户可以管理预定,比如更改预定日期,而不是从主页从新搜索更改,同理,用户可以取消预定

    2.途经和兑换(Passes and Redemption)

    用户可以收到兑换券,看自己的信用等级,收到更新提示。ios用户可以在passbook里找到兑换券,也能用信用积分兑奖。

    3.内容和设计(Content & Design)

    内容页面可以取代主页来更快的吸引用户。滑动内容页没有终端,用户可以一直发现新内容。返回使用的用户可以快速找到历史内容、搜索和交易。用户可以设置对或搜索过的商品提醒,比如价格有变化,有无货。返回使用用户可以用1-click来重复历史交易(这个还是亚马逊专利,不能随意用这个方法...但宗旨都是减少用户使用流程。语音的语调也能增加用户好感。视觉设计和动作交互都可以改善用户体验。

    4.提示/推送窗口(Widgets&Notifications)

    推送提示需得到用户的同意。用户可以快速轻扫到推送里的主要内容。推送应该是个人化的、及时的并且有诱惑的。用户可以通过点击推送直接转到app里的具体内容,而不是转到app主页。

    五、可用性的注意事项(Usability Hygiene)

    另外,原文还总结了(原文为Usability Hygiene,直译为可用性卫生),提醒了在UX设计里一些要做和不要做的事情。

    What to do:

    1.文字和内容要容易阅读,甚至是在阳光下。字号应大于11pt,就算是用户设置了最小字号。文字与背景要有明显对比

    2.就算是没有信号,也有内容。

    3.要让空间和内容和控件容易发生交互。触击和点击后要有反馈。安卓推荐控件的尺寸要有48dp,ios推荐是44x44pt。

    4.模态视图(Modal views)用于独立的任务并伴随很多步骤。ios有两种模态视图:垂直的和跳跃的。

    5.重要的call-to-actions要固定的(sticky)和可见的,哪怕是在滚动页面

    6.安卓系统里,表格标签应该在区域上部。(这条原文没太看明白)

    7.,为用户解释如何填写一些特殊的表格,有解释说明可以减少表单提交的错误

    8.表单输入是实时有效的:告诉用户填的对不对,指出错误。

    9.将光标设置在表格的第一处,并在表格里展示默认关键词

    10.在表单中,输入电话号码展示拨号盘(只有数字,避免输入字母。

    11.在表单或者购物车里,用户可以通过步进器(Stepper)修改数量

    12.在表单或者购物车里,用分段控制器(segmented control)提供用户不同选择,比如买衣服时,选择衣码或性别。选择数量小于5个,并且选择很重要。这样能让用户更快速选择比较。

    13.在搜索或者重新定义时,用户可以移动滑动条(slider control)来设置最大最小范围,比如价格、折扣。滑动时,数字不要隐藏。可以有同类型的分离滑块(For some range types a discrete slider)

    14.在表单里,用户可以通过pickle control(不知咋翻译,长的跟胶带似的,一般用作选择时间)选择时间日期。

    15.在旅游表单里,用户可以通过在日历里选择日期。

    16.当app重启后,应回到用户最后一次参观的页面(e.g.知乎app)

    17.页面的转变应该快速的有反应的,暂停的话用户会困扰。转变快速的话是不需要加载针的(loading spinner),加载针只会让用户更加专注等待,在这里也可以使用小动画给用户反馈。

    What NOT to do.

    1.不要从另一平台上模仿UI元素,比如ios从安卓抄些元素。因为有些平台支持圆角按钮,对交互动作有不同要求。

    2.不要使用下划线链接(app使用的是按钮不是链接)。不要使用hardcode links(就是转到另外一站点或app),这样既费力,还不利于用户使用路径。

    3.不要让用户转到浏览器,让用户一直沉浸在app里,这样可以持续记录用户位置和记录数据。

    4.不要在用户刚下载了你的app之后就邀请评价,并且不要诱导用户给好评(好像很多app为了评分高,都是求好评的)

    相关文章

      网友评论

          本文标题:手机应用UX准则(Mobile App UX Principle

          本文链接:https://www.haomeiwen.com/subject/lcepqftx.html