PS设计教程网欢迎你!

总结交互组件创新的四种方式(3)

文章来源于 绿豆晶设计工作室,感谢作者 佚名 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2010-06-28
三、文件上传组件的创新 【瘦身法】 标准的文件上传组件是由输入框(伪)+浏览按钮+提交按钮组成。之说以称之为伪输入框是因为它主要承担显示文件路径的作用,于是Firefox下点击这个输入框是开始文件选择操作,chrome

三、文件上传组件的创新 【瘦身法】

总结交互组件创新的四种方式

标准的文件上传组件是由“输入框(伪)+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为它主要承担显示文件路径的作用,于是Firefox下点击这个输入框是开始文件选择操作,chrome更是把伪输入框改造成了按钮,还原控件最原始的作用。

总结交互组件创新的四种方式

使用标准文件上传组件经常会出现两个提交按钮,以上图为例,最经常的误操作就是:选完文件后,直接点击“保存头像设置”,于是杯具了。

Gmail附件上传的设计对文件上传组件做了两次瘦身手术。

总结交互组件创新的四种方式

过去的gmail附件上传步骤是:1、点击“添加附件”(点击后出现一个不带提交按钮的上传组件),2、选择文件(选完后自动开始上传)。去掉了那个提交按钮。

总结交互组件创新的四种方式

现在的gmail附件上传步骤是:1、点击“添加附件”(点击后自动开始上传,且有上传进度条)。去掉了输入框和提交按钮,只剩下一个浏览按钮,上传只需要一次点击操作。

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa