认识达内从这里开始

认真做教育专心促就业

运城达内UI培训输入框与按钮设计常用设计方法分享

发布：运城达内教育官网
来源：互联网
时间：2022-07-20 09:03

输入框与按钮都是UI设计师在设计网页和软件界面设计经常会用到的一些设计元素，下面我们就通过案例分析来简单了解一下，输入框与按钮设计常用设计方法分享。

运城达内UI培训输入框与按钮设计常用设计方法分享

输入框

输入框的作用是供用户完成信息录入，这里我们的设计思路是如何提升信息的录入效率。我见过很多设计师偷懒，把所有的输入框都做成文本框样式，用户必须调起键盘一个字一个字地输入，这种体验是非常不友好的。如果我们想让用户录入个人信息，其中的生日和城市就应该使用日期和城市组件，而不是让用户手动输入。

即使非要让用户手动输入，我们同样可以根据不同的场景给用户提供更友好的体验。如果要输入的是数字，那么应该给用户调起数字键盘;如果要输入文本，那么应该给用户调起全键盘，避免用户手动切换键盘。

按钮

表单中的提交类按钮按照位置可以分为以下三种。

其中位置A是常见的布局样式，这样的布局符合用户的视觉习惯和操作流程：用户由上而下完成表单信息的填写，后点击“提交”按钮进入下一个页面。但是这种布局有一个问题：如果表单项目过多，则用户必须滑动页面才能完成提交操作。

位置B跟位置A很相似，的区别在于位置B是固定在页面底部的。那么位置B跟位置A的适用场景有什么不同呢?位置B意味着用户在不用滑到页面底部的情况下就可以点击“提交”按钮，那么在什么样的场景下用户不用滑到页面底部就可以提交呢?

其实在很多表单中，不是所有的信息都需要用户手动录入的。以前面提到的邮政编码为例，只要用户输入了地址，系统就能获取邮政编码，相关信息是可以直接回显的，用户没有看到此类信息的必要性。所以，对于一些重要性不是很高、不强制用户看完的表单项目，很适合使用这类底部悬浮按钮。常见的就是各种协议页。

位置C出现的原因在于，对于前两种方案，当调起键盘时就会遮住“提交”按钮，用户必须先关闭键盘才可以点击“提交”按钮，多了一步操作。而位置C可以很好解决键盘遮挡的问题，但是其不符合用户的视觉习惯和操作流程。而且手机大屏化是一个不可逆的趋势，用户在单手握持手机的情况下很难直接点击到界面右上角的“提交”按钮，增加了操作难度。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：运城达内Java培训数据库存储引擎类型与对比

下一篇：运城达内计算机培训Python编程文档应用与注意事项 >