恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
PAD上的返回与关闭
0.0°
2016-11-04 原创文章 经验/观点 举报 3900 5 18 4

今天工作中发现一个问题,就是自以为是给用户留多个通道会方便用户,其实会造成用户的困惑,如以下界面

左边是返回按钮,右边是取消按钮,本以为会方便用户从两个出口都可以退出当前页面,但用户却不知该如何下手,这便是“自以为”的设计
Image title

后来仔细观察了iPad端的APP,总结梳理了以下几点(全为自我主观判断,如有说的不对的地方欢迎探讨)

1.弹出页面中的取消保存/确定/登录位置

先看看京东的设计,用户登录功能比较小所以弹出页面占的比例也比较小

页面布局上把❎放到了右边,登录为突出的按钮,需要用户手动点击到请输入文字上再弹出键盘

Image title而淘宝这里,不用点击用户名,直接弹出需要输入密码的位置

这点很人性化,但如果我不想输入,轻敲黑色区域竟然没有反应,必须回到左边❎的位置

然而为何淘宝把❎放到了左侧,又不能轻敲黑色区域退出呢?按我个人体验来讲习惯左手拿pad右手打字,而❎放在左边离右手的距离较远,感觉并不方便

这时我们需要站在淘宝的角度想一想,他是很想让大家来注册登录的,为何要轻易的放弃此入口呢,所以才故意制造了麻烦

Image title然后我又找了几个软件发现,他们也都把取消设计到了左边,希望用户点的按钮放在了右侧

QQ音乐的“取消”和“登录”

这里的登录界面比淘宝与京东的要大,自认为不需要这么大,下边只有文字感觉有点空,也许图片可能会更饱满

这里的登录也设计的与京东和淘宝不一样,自认为没有上边按钮醒目,毕竟属于视线的边缘处

Image title印象笔记的“取消”和“存储”

印象笔记写文章的功能需要很多文字的地方,所以弹出页面较大,占1/2还要多Image title再来看看苹果官方的设计,弹出新窗口一共有4种情况

a.在账户设置页面里“完成”是安排到了右侧,“取消”排到了左侧,与以上的设计相一致,但并不是所有界面都必须这样,下边是另外的例子

Image title

b.这里设置账户,功能比较小故页面大小也比较小,按钮比较多,并且没有优先级的区分,在左右两侧都不适宜,所以上下排列比较适合Image title

c.新增相册名称——此功能也比较小,故弹出页面尺寸也比较小,取消和存储如果放在左上角和右上角会显得头重脚轻,上边东西过多,所以放在下边也是比较明智的选择Image title

d.这里输入密码“取消”则放到了右侧,这时你要问我之前的例子都是放在左侧的,这个为什么不放在左侧呢?乍看这里跟之前的很像,但仔细再看这个界面,输完密码直接默认确定,没有确定按钮,取消当然提升了优先级,放到右侧会方便用户点击,这个取消的设计也是很合理的Image title


2.关于整个页面的弹出,取消的位置

一般取消放在左上角较多
Image titleImage title

Image title

当然取消放在左上角也不是必然的,如下图QQ选择照片时

当需要返回上一个页面时,则返回优先,取消顺次排到右侧,预览是最不常用的功能所以放在左下角Image title


3.关于网页嵌套页面的返回关闭

典型的反例就是哔哩哔哩这个页面,当出现这样排列的按钮就会让用户纠结到底点哪个好,如果把下边的返回和改绑手机去掉则好的多Image title

3.多层级嵌套页面的返回关闭

由于电商类软件,用户更多是看各种琳琅满目的商品,这里淘宝是整屏覆盖上一页的设计可以浏览更多商品

Image title这里QQ只是覆盖右侧消息,左侧还能看见好友及群消息,以致不会落下重要的新消息,当进入第二个层级后便变成了返回+关闭,进入第三级仍是返回+关闭与淘宝一样,按了返回就是返回上一级,关闭则全关

Image titleImage title


两个例子虽功能上都是进入一个新页面,但方式却不同


最后总结一下

1.小功能用弹出页面,例如账户的登录和设置

2.弹出界面尺寸大小以功能为基础,设置登录弹出页面只占总页面的1/4左右,而输入文章的页面需1/2还多

3.弹出页面左面更多的是返回,但并不是全部,一方面需站在用户角度设计界面,一方面也需引导用户使用

更新:2016-11-04

收藏

5人已收藏

shirley小旎

驯服那些生活中所必须的复杂

  • 15

    作品

  • 31

    粉丝

  • 21

    关注

  • Speak Mandarin 教育网站
  • “安心小易”微信公众号界面设计
  • 旅游网站-beijing tour company
  • 扁平插画网站
相关标签
分享

    猜你喜欢

      2016-11-04 原创文章 经验/观点 举报 3900 5 18 4

      PAD上的返回与关闭

      0.0°

      你确定要举报PAD上的返回与关闭

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年11月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      5
      4

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录