• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 别人的UI表单为什么设计这么漂亮?

别人的UI表单为什么设计这么漂亮?

作者:sky 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含ui设计,用户体验,经验分享,表单设计等相关知识,sky希望在学习及工作中可以帮助到您

在产品设计里面,用户的注册流程、输入界面、设置页面、操作的页面,表单都是产品设计中最重要的组件之一。填写表单并不是所有人都喜欢做的事情,但是有时候要用户必须注册完成,所以表单设计原则一定要高效简单。

表单结构

表单的结构由表单的基本样式和基本内容组成,表单的内容都居中布置。表单的基本样式分为单行表单、多行表单、少数情况下表单作为标题存在的组合。

表单的内容作用是信息查看、信息入口、信息操作以及内容输入,表单的内容分主要是信息文字和辅助信息文字。

辅助信息文字通过是否为流程的必要内容来区别对应使用不同的字号,重要内容或需要突出对待的内容可以相应的搭配组合图标。

表单常用控件

常用设计原则

1. 如果5个以下内容,全部放出来,而不是折叠

在单选方案中,有2-5个选项可用,使用分段控件而不是下拉列表。主要是因为分段控制内容可见,并且可以通过单个交互完成任务,而不是多步(点击打开,选择,点击)。

2. 多个选择的功能,收纳在一个选择容器里

一般日期由年、月、日三个部分组成,如果使用下拉列表会有9步操作,对于这种功能接近的可以整合到一个设计组件里。

3. 使用开关而不是下拉列表

如果只有2个选项,如显示或隐藏,打开或关,这种情况使用开关来提升操作效率。

4. 滑块

通过滑动控件,将单调的下拉式操作调整为用户易于扫描的视觉体验,可以使用滑块定义好范围内的一个或多个值。

5. 避免多列表单

移动端都是小屏幕,需要让用户重点放在内容上,保持从上而下的阅读视线,避免过于复杂的表单。

6. 使用增加或减少按钮而不是下拉

当用户需要通过增加或减少时,避免自由表单输入和下拉列表,用按钮帮助最大限度的减少错误。

7. 尽量避免显示不需要的字段

尽量避免显示不需要的字段,使表单更短,不要把必填和非必填的内容混在一起。

8. 对信息进行分组

对相同内容信息进行分组,方便用户快速准确的扫描查找。

设计策略

  • 如果5个以下内容,全部放出来,而不是折叠。
  • 多个选择的功能,收纳在一个选择容器里。
  • 如果只有2个选项,如显示或隐藏,打开或关,这种情况使用开关来提升操作效率。
  • 通过滑动控件,将单调的下拉式操作调整为用户易于扫描的视觉体验。
  • 避免多列表单,保持从上而下的阅读视线,避免过于复杂的表单。
  • 当用户需要通过增加或减少时,避免自由表单输入和下拉列表,用按钮帮助最大限度的减少错误。
  • 尽量避免显示不需要的字段,使表单更短,不要把必填和非必填的内容混在一起。
  • 对相同内容信息进行分组,方便用户相更快地扫描查找,不要内容都混在一起。

欢迎关注作者的微信公众号:我们的设计日记,每周分享最新设计趋势和设计经验,科学设计方法。

「表单设计自学技巧」

  • 《如何做好表单设计?这儿有3个通用的注意要点》
  • 《16个优点告诉你,为什么表单设计应该用这个方法?》
  • 《表单经典原则是错的?来看这5个表单设计新规则》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 2013年网页设计UI最热趋势 最流行的UI设计
  • 通往优秀UI(用户界面)设计师之路的20个路标
  • 这10条认知,可能就是你和大厂UI 设计师的差距
  • 针对零基础新人,我给出这份可能是最详细的UI 自学流程总结
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 想成为互联网设计师?先来看这篇超全面的介绍!
  • 这篇超详细的教程,帮你全面掌握 APP 中的投影设计!
  • 超全UI设计规范,带你了解规范设计全流程
  • UI 设计新人如何接私单?来看高手的经验!
  • 用一篇文章,带你回顾桌面GUI 的设计发展史

相关文章

  • 2018-08-23超多实例!解析「接近法则」在设计中的应用
  • 2018-08-23看不见的用户体验,教你学会用数据丈量它!
  • 2018-08-23用超多案例,带你全面看懂尼尔森十大可用性原则!
  • 2017-08-06谈谈网页设计中的Less和More(图)
  • 2017-08-06web前端网页开发一般过程简单认识
  • 2018-08-23腾讯设计师:超实用的数据可视化零基础教程
  • 2018-08-23PS用的很溜?但你的设计可能还没入门!
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:倒金字塔法则
  • 2018-08-23成为解决问题的人!总结我在用户测试里吸取的5个教训
  • 2018-08-23平面作品太单调?三招提升设计层次感!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 如何让搜索框的体验更好?我总结了这些设计套路!
    • 腾讯设计师:超实用的数据可视化零基础教程
    • 简单实用!七步学会用 Sketch 搭建复杂表格
    • 想掌握对话式交互?先来学习自然对话的基础知识!
    • HTTP返回码大全(中英解释)
    • 不压缩HTML的几个原因说明
    • 自学体系第一课!写给新人设计师的界面排版原则(上)
    • 设计规范限制了设计创造力吗?
    • 这5个思路,能让你的线上广告更加吸引人
    • 想为iPhone X设计UI?给你这11个设计小贴士

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有