当前位置: 首页 > news >正文

更好的前端设计形式——设计者犯的常见错误及修改方法

想学更多的设计知识可以到我们的群(801466587)来交流哦~

无论是注册表、多视图步进器还是单调数据输入界面,表单都是产品设计中最重要的组成部分之一。本文着重论述了表格设计的常见问题和不足之处。记住,这些是一般准则,每个规则都有例外。

表格应该是一列

多栏会干扰用户垂直动量。

标签顶部对齐

顶部对齐的标签可以很好地在手机上被翻译。

组标签及其输入

把标签和输入放在一起,确保字段之间有足够的间距,这样用户就不会感到困惑。

不要全为大写字母

全为大写字母都比较难阅读。

如果低于6个选项,可以显示所有可以选择的选项

在选择器下拉中放置选项需要两次单击,并隐藏选项。如果有超过5个选项,请使用输入选择器。如果有超过25个选项,可以在下拉菜单中加入上下文搜索。

将选框放在彼此之下

将选框放在彼此下方可以方便用户选择

准确陈述按钮作用

对按钮应准确陈述意图。

显示错误提示

向用户显示错误发生的地方并提供原因。

在用户填写字段后使用内联验证(除非在过程中帮助它们)

在用户键入“--”时不要使用内联验证,除非它帮助他们-例如在创建密码、用户名或带有字符计数的消息的情况下。

不要隐藏基本的帮助文本

尽可能地公开基本的帮助文本。对于复杂的帮助文本,请考虑在聚焦状态下将其放置在输入旁边。

区分主次

需要区分按钮的主次关系。

使用字段框长度作为启示

框的长度提供了答案的长度。如电话号码、邮政编码等。

显示出可选字段

用户并不会都知道所需的字段标记(*)所隐含的内容。相反,最好是表示出可选字段。

群体相关信息

长长的表单会让人感到不知所措。通过创建逻辑组,用户将更快地理解窗口。

使它有趣

生命短暂。没有人想填写表格。有趣可以使用户逐步参与。设计师的角色是表达他们公司的品牌以引起情感上的反应。如果你能正确运用上面的技巧,可以提高你的完成率。

如果你想学习更多关于网页前端设计的技巧,网页排版的知识可以去学习一下《欧美范网页设计实战课程》,如果你没有ps基础可以去学习一下《PS网页前端设计基础》这是一套完全免费的教程,相信你将会有更多的收获~ 如果你喜欢这篇文章或发现它有用,可以点❤,也可以点击分享它,这样更多的人可以从中受益~

相关文章:

  • 一张图搞定OAuth2.0
  • 51.php-fpm的pool 慢日志 open_basedir 进程管理
  • Android进阶 ——— Android官方架构组件Lifecycle
  • bzoj1565【NOI2009】植物大战僵尸(最小割)
  • Windows 788
  • node fs
  • 千亿级数量下日志分析系统的技术架构选型
  • 345-反转字符串中的元音字母
  • KVO本质的推导
  • canny算子求图像边缘,edgebox那部分
  • 28.week4
  • SQL中Group By的使用
  • 大数据就业前景怎么样?
  • 商品期货趋势交易策略
  • 版本控制工具Git工具快速入门-Linux篇
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • C++类的相互关联
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • Go 语言编译器的 //go: 详解
  • go语言学习初探(一)
  • spring security oauth2 password授权模式
  • 动态魔术使用DBMS_SQL
  • 构建二叉树进行数值数组的去重及优化
  • 基于webpack 的 vue 多页架构
  • 设计模式(12)迭代器模式(讲解+应用)
  • 算法-插入排序
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 06-01 点餐小程序前台界面搭建
  • Spark2.4.0源码分析之WorldCount 默认shuffling并行度为200(九) ...
  • 浅谈sql中的in与not in,exists与not exists的区别
  • 数据可视化之下发图实践
  • #Linux(帮助手册)
  • (3)选择元素——(17)练习(Exercises)
  • (C++20) consteval立即函数
  • (附源码)基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明
  • (一)python发送HTTP 请求的两种方式(get和post )
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET Core 中的路径问题
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • .NET/C# 解压 Zip 文件时出现异常:System.IO.InvalidDataException: 找不到中央目录结尾记录。
  • .sys文件乱码_python vscode输出乱码
  • .xml 下拉列表_RecyclerView嵌套recyclerview实现二级下拉列表,包含自定义IOS对话框...
  • @ComponentScan比较
  • [20180129]bash显示path环境变量.txt
  • [ABC294Ex] K-Coloring
  • [Android]使用Retrofit进行网络请求
  • [Angular] 笔记 8:list/detail 页面以及@Input
  • [AutoSAR 存储] 汽车智能座舱的存储需求
  • [C#]获取指定文件夹下的所有文件名(递归)
  • [C#]使用DlibDotNet人脸检测人脸68特征点识别人脸5特征点识别人脸对齐人脸比对FaceMesh
  • [Codeforces] probabilities (R1600) Part.1
  • [Deep Learning] 神经网络基础