记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] 浅谈按钮分组和位置[含8P]

[复制链接]
发表于 2017-6-13 22:25:16 | 显示全部楼层 |阅读模式
        <p>按钮的位置
1.视觉流向
用户浏览页面的视觉流向通常是从左上至右下的一条弧线,我们可以看到通常浏览器的操作都是在右侧,关闭|缩小|滚动条等等。符合视觉流向通常情况下,我们会将按钮安排在相同的对象右边,或者是下面,但是复杂界面元素的底部一般是用户的“盲点”。我们将影响整个页面或者对话框的按钮,确认|取消|下一页|保存这样类按钮设置在弹出框的右侧有很好的扩展性,左侧可以添加帮助按钮,这样有助于功能的区域划分。
如果按钮都有自己的小图标,类似用于表单,列表中,可以将它们放在工具条或者类似工具条狭长的区域上,通常在页面的顶部。

浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518dyucjamfnoww5jkw 1


浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518rhjtycxbxydxjfow 2


浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518k9ti4od9hitdhk3s 3


按钮的位置
1.视觉流向
用户浏览页面的视觉流向通常是从左上至右下的一条弧线,我们可以看到通常浏览器的操作都是在右侧,关闭|缩小|滚动条等等。符合视觉流向通常情况下,我们会将按钮安排在相同的对象右边,或者是下面,但是复杂界面元素的底部一般是用户的“盲点”。我们将影响整个页面或者对话框的按钮,确认|取消|下一页|保存这样类按钮设置在弹出框的右侧有很好的扩展性,左侧可以添加帮助按钮,这样有助于功能的区域划分。
如果按钮都有自己的小图标,类似用于表单,列表中,可以将它们放在工具条或者类似工具条狭长的区域上,通常在页面的顶部。

浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518l2ll3r992zlg90r6 4


浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518s11p11rupu1pu1zj 5

浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518ltmiqqlqb010t22x 6


浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518vkc6jw66jl611aty 7


浅谈按钮分组和位置 浏览器,对话框,影响,用户,元素 【UI】 222518g5ov1l7xio4clc1r 8


<span class="Apple-style-span"style="color: rgb(51, 51, 51); font-family: Arial, 宋体, sans-serif; line-height: 25px; ">2.空间记忆
“我敢发誓,这个按钮一分钟前还是在这里!”用户经常通过回忆它们在哪里来再次找到它们,而不是它们的名字。很多软件的界面就是将 对话框的按钮 确定|取消 放在预定的位置上,部分原因是由于它们的空间记忆(Spatial Memory)依赖性。
用户习惯的问题,当用户对于某种操作形成习惯之后,很大程度提高了他的工作效率,但如果我们设计上调整了习惯,他必须马上思考这个工具一次,增加使用成本。举例看淘宝和当当的购物车页面,淘宝的操作是左右结构,虽然有4个按钮但是很符合我们的记忆,左边全选删除方便快捷。右侧的橙色按钮跟当当的绿色“结算”按钮功能一致,区别在于当当将“继续购物”按钮样式缩小了,这样会增加用户的判断成本。而且淘宝在这里处理的很好,大小样式很统一。当当的可取之处在于增加了一个“移入收藏”的文字链,个人觉得很实用,但是后续操作“移入收藏”的商品就不显示在购物车中了。如果改成“加入收藏”商品还是在购物车中保留,效果应该会更好。
<p style="margin-top: 15px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">                 

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表