您的位置:365足球外围官方网站 > 摄影技巧 > 关于网页设计中的界面设计,详细解析如何排放

关于网页设计中的界面设计,详细解析如何排放

发布时间:2019-09-25 05:31编辑:摄影技巧浏览(110)

    2、通过触摸来访问表单?

    总结

    (根据马泰奥·彭佐的2006年的标签对齐眼动实验,顶对齐标签移动到输入框需要50毫秒,右对齐标签需要240毫秒,而左对齐标签则需要500毫秒。顶对齐标签的效率是左对齐标签的10倍之多)

    •填写时间短,长度灵活可变,用顶对齐

    •填写时间短,空间有限,右对齐

    •方便浏览标签,快速区分必填和非必填项,左对齐

    •表单很短,空间很有限,输入框内对齐

    •混合对齐慎用

    •时间短,交互性强,可用灵活应用标签

    布局是内容组织的必然结果,往往是自己逐渐成型的。一旦周全考虑了页面的所有需求,并且确定每一块的内容,你的工作就变成了看着所想要的布局自己展现在你眼前。

    6、表单有哪些类型的字段?

    2、右对齐

    图片 1

    右对齐

    标签与输入框列,标签右对齐

    优点:占用垂直空间小

    缺点:破坏页面布局,整体可读性不强

    错误排列:

    排版布局容易实现。

    一、标签的对齐方式

    这样的表单很好看,也很简短,看上去所有内容也都很整齐,然而这种布局方式较之其他布局却更容易引发错误。因为在第一列和第二列,也就是字段标签(例如电子邮件)和与其对应的输入域见得映射关系很不明显。

    适用于手机、平板等触摸界面。

    5、混合对齐

    图片 2

    所有标签分散对齐

    优点:页面排版整齐

    缺点:标签的识别性很差,慎用

    图片 3

    用户可以一眼看到表单标签和字段。

    3、左对齐

    图片 4

    表单左对齐

    标签与输入框列,标签左对齐

    优点:浏览问题更容易,不会被右侧的输入框打断

    缺点:距离大和输入框联系不紧密,增加填写表单的时间,

    图片 5

    3、标签在字段左侧,并且右对齐

    2、表单的输入

    图片 6

    为了让用户更加快速的完成表单

    1、尽量简洁,去除无用的输入

    2、设置默认输入或者改为选择、减少用户的思考(注意默认的选项用户是否喜欢)

    然后页面画左边出了一款MINI车型,线框从左到右包围整个展示区域。

    标签长度可以比字段更长。

    3、即时校验与帮助

    即时的反馈可以帮助用户更好的填写表单,不至于在提交时出现错误,影响体验。

    图片 7

    校验与帮助

    1、自动及时校验并帮助(当鼠标获取焦点时提示,失去焦点时自动验证)

    2、用户不熟悉的场景在标签旁边提供帮助性的文字,帮助性的提示可采用按钮、问好、文字链接、图片等。

    说明:1、长表单不适合做即使校验,用户会反感,

              2、校验的反馈应该告知问题所在和解决方案,同时,提示信息种类不能超过四种

    表单的动作

    图片 8

    主次按钮

    1、主动作:表单的主要目的(保存、提交)

    2、次动作:和主动作相反的,次要的处理页面的方式(取消、删除、返回)

    用法:

    1、主动作btn,次动作链接文字

     2、都是btn,再颜色大小上区分

    按钮的相应:免重复提交可以修改状态『正在提交…』,变为灰色不可用,或者显示动画,进度条

    服务条款

    1、用复选框、用户可以自己选

    2、去掉复选框、btn改为『同意并注册』,这样更加方便用户填写表单

    图片 9

    标签较难扫描,因为它们是在字段里面的。

    1、顶对齐

    图片 10

    标签顶对齐

    标签在输入框上方(国外大多数表单采用顶对齐)

    优点:对长标签很有用,和输入框联系最紧密,输入效率最高

    缺点:占用垂直空间大,不利于长表单

    2、 表单排列

    表单标签位置是一个激烈争论的话题,许多人快速的选用一种方法来彰显他的实力。实际上,选择那种方案需要细致入微的判断,但是这并不意味着要在所有场景下都使用一种方案。你应该根据当前表单的使用场景,对比各种表单标签定位的优点、缺点,从而选择该表单最佳的标签定位。

    4、输入框内标签

    图片 11

    输入框内对齐

    标签在输入框内,把标签和输入框组合为一个元素

    优点:节省一半空间

    缺点:在输入时用户容易迷失,复核表单比较困难

    在上面的标签与文本框的左边缘对齐,并在文本框中的文本对齐左侧的标签。

    优点:

    表单作为用户和产品之间的媒介,能够让用户高效、轻松完成填写同时满足产品目的是一个表单设计的基础。

    图片 12

    标签在字段左侧,并且左对齐;

    表单的组成

    标签、输入框、行为、帮助、信息、验证

    呈左右两列的布局同事也降低了用户往下浏览的速度。如果是那种需要仔细阅读的表单,肯能这样会很好,但是也同样容易引发错误。而作为标准的注册表单来说,我们没有必要去减缓用户往下浏览的速度。于是先考虑右对齐排版。

    优点:

    6、灵活应用标签

    图片 13

    灵活对齐

    输入框内标签和顶标签的组合方式

    优点:用户的交互强,识别性好,目前较为推崇的一种方式

    图片 14

    排版布局容易实现。

    1、输入框长度

    图片 15

    输入框长度

    输入框的长度根据内容来定(用户不容易迷失),地址的输入框长度应该比验证码的长

    菜单按钮尺寸和菜单按钮图标尺寸

    在小范围可视区域内,标签占有一定宽度,以至于字段宽度要相应缩减。

    二、输入框

    图片 16

    ui kit

    输入框的种类

    常规的有:文本框、单选框、复选框、下拉框,

    衍生出来:滑块,微调钮,开关钮,tab选框,搜索框

    1、 引导用户的视线

    因此,在大多数情况下,上面两种都是较不好的方案。相反,大多数情况下可以考虑使用以下方案:

    首先,网站的logo出现在页面的左上角。

    表单翻译成其他语言时,标签可能会换行显示。

    5、 菜单

    表单宽度比第二、三种排版(标签在字段左侧)的宽度更窄。

    图片 17

    避免使用标签在字段里面或作为提示文本出现。

    表单需要呈现出延续的流动性,而表单的布局则极大地影响到用户是否能够成功地填写表单。例如下面这个注册表单。

    小范围的可视区域,标签在字段上方是最佳选择。

    未格式化文本,便于浏览。

    图片 18

    正确排列:

    在HTML代码结构中,需要使用多余的占位符标签,减低表单的可访问性。

    未格式化文本,不方便浏览。

    1、填写表格所在的可视区域比较小?

    最后出现在右边出现车型的相关介绍。

    非典型的排版设计,可能会混淆视听,妨碍用户操作。

    人们在浏览页面或布局的时候,视线往往趋向于从左上角移动到右下角,就好像页面的布局设计有某种自然的力量一样。因为人们常都是从左至右、由上至下地阅读,久而久之视线自然会沿着这一路经移动。

    用户很清晰知道在哪里输入信息。

    建议调整合适的菜单大小和间距

    可以选择标签在字段上方或者左侧,并且是左对齐。

    在MINI汽车美国官网首页上,动画 里各个元素出现的先后次序同样也采用了对角线设计。

    如果字段获取焦点时标签没有消失,该字段被填写内容,用户也很难辨别哪个是内容和标签。

    3、 标签

    只适用于文本框的字段类型。

    图片 19

    2、标签在字段左侧,并且左对齐

    图片 20

    不适用于手机、平板等触摸界面。

    首页考虑两列的布局,标签左对齐。

    标签在字段里面和作为提示文本出现需要较专业的开发人员花费大量时间去实现。

    错误排列:

    在任何时候,用户都能把字段内容和标签比较,核实是否填错内容。

    菜单按钮各个边间距

    在HTML代码结构中,并不需要使用多余的占位标签,让代码容易维护。

    图片 21

    标签在其相应的字段里面,所以很容易辨别哪个与哪个。

    图片 22

    表单高度比第一种排版(标签在字段上方)高度小。

    标签居右对齐时,用户不会像左对齐时那么容易犯错误,因为标签和输入域之间更为接近。然而,右对齐的标签在页面的左侧形成难看的锯齿边缘,平衡失调。另外,不管标签如何摆放,两列的布局仍然会减缓用户往下流了的速度。

    用户可以一眼看到表单标签和字段。

    在开始安排页面内容时,我会秉承这一最基本的设计方法。简单来说,我把所有的栏目区域都扔到显示器上,然后移来移去不断的调整让他们彼此协调。

    图片 23

    正确排列:

    相对标签在左侧的排版,其宽度较窄。

    这个表单只需要手机用户的姓名、邮箱、用户名和密码,以及必要的信用卡信息。

    缺点:

    所以最终直接把布局变成一列来显示,而标签则放在每个输入域的上方,居左对齐。

    标签在字段左侧,并且右对齐;

    格式化提示信息使内容更易阅读与扫描,大块的未格式化的文本难以阅读。

    4、标签长度比较长?

    图片 24

    表单宽度比第二、三种排版(标签在字段左侧)的宽度更窄。

    4、 提示信息

    适用于各种类型的字段类型(如文本框,单选按钮,多选按钮或下拉菜单等)。

    图片 25

    标签和相应的字段靠近,用户很容易区分哪个是哪个。

    标签容易扫描,因为它们没有被字段分隔开来。

    多个表单

    标签在字段上方;

    用户可以一眼看到表单标签和字段。

    适用于手机、平板等触摸界面。

    可以适应不同长度的标签,方便表单翻译成多语言。

    标签在字段上方花费的开发时间是最短的,其次是标签在字段左侧。

    7、哪种比较容易实现和维护?

    在HTML代码结构中,并不需要使用多余的占位标签,让代码容易维护。

    表单标签位置的对比结果

    标签在字段左侧,并且左对齐;

    一旦字段被填写完,焦点离开字段,标签就会完全消失,这就要用户必须记住填写的是什么标签。

    如果非要在这三个方案之间选择最佳方案,可以参考下面使用场景:

    用户可以一眼看到表单标签和字段。

    标签在字段的里面;

    适用于不同长度的标签,有利于翻译成其他语言。

    适用于手机、平板等触摸界面。

    排版布局较难实现。

    标签放在远离其对应字段的位置时,它就很难辨别哪个与哪个(横线斑马条纹可以在一定程度上解决这个问题)。

    如果用户遇到其他多数的表单而不仅仅是你设计的表单时,一致的可用性会在很大程度上帮助用户去理解其他的表单。这就意味着标签的排放位置不仅仅是在单个表单是最好的选择,还要考虑和其他表单保持一致性。

    排版布局较难实现。

    标签在字段上方为翻译多语言提供了最大的灵活性。

    像界面设计中的其他元素一样,表单标签排放位置的一致性会帮助用户快速完成表单内容填写并且能够减少错误发生。这是因为人的大脑有惯性思维,当表单标签排放位置保持一致性,大脑就会迅速学习在哪里寻找标签和其对应的字段。所以,尽量保持每个表单标签排放位置的一致性!

    图片 26

    在小范围可视区域内,标签占有一定宽度,以至于字段宽度要相应缩减。

    1、标签在字段上方

    标签在其相应的字段附近,所以很容易辨别哪个与哪个。

    表单高度比第一种排版(标签在字段上方)高度小。

    5、标签作为提示文本出现

    8、哪种需要较高技术水平?

    标签是可见的,即使用户填写字段,也能知道是什么标签。

    缺点:

    标签是可见的,即使用户填写字段,也能知道是什么标签。

    降低了表单的可访问性。

    标签文本换行时容易阅读,因为他们是左对齐。

    表单被翻译成其他语言时,标签可能会超出字段并换行显示。

    在小范围可视区域内,表单字段获得填写焦点,表单标签仍然可见。

    标签在字段上方;

    优点:

    表单标签位置有多种不同的排版方案选择,但很多文章关于这个问题只涉及到部分讨论和分析。而在短时间内,你应该如何选择一个比较好、适合你的排版方案?

    5、表单会被翻译成其他语言?

    换行的长标签较难阅读,因为其左边缘参差不齐,使得用户视线要不停地去寻找每行的开始。

    标签在字段左侧,并且右对齐;

    表单翻译成其他语言时,标签可能会换行显示。

    用户不太可能一眼看到表单标签和字段。

    图片 27

    表单标签位置的一致性

    当涉及到表单的设计和开发,其中最热门的话题之一就是表单标签的位置。

    表单标签位置的排版方案:

    如果表单不仅仅有文本框字段,则不要选择标签在字段里面和作为提示文本出现。

    标签是可见的,即使用户填写字段,也能知道是什么标签。

    缺点:

    适用于各种类型的字段类型(如文本框,单选按钮,多选按钮或下拉菜单等)。

    用户很清晰知道在哪里输入信息。

    这种排版看起来像字段已经被填写内容,会让用户很难看到在哪里输入内容,因而出现错误次数较多。

    排版布局容易实现。

    标签在字段的里面;

    一个表单

    适用于各种类型的字段类型(如文本框,单选按钮,多选按钮或下拉菜单等)。

    优点:

    例如:在你当前填写内容的表单中,标签在字段上方是最佳的选择。但其他大多数的表单采用标签在字段左侧则是最佳的选择。

    不允许换行的长标签,要不会在高度上超出字段的区域。

    标签较难扫描,因为它们是隐藏不可见的。

    用户很清晰知道在哪里输入信息。

    适用于手机、平板等触摸界面。

    只适用于文本框的字段类型。

    下面我们一起把表单标签位置的所有排版方案优点和缺点一一列举出来,通过对比各种方案来选择最佳的方案。

    用户不太可能一眼看到表单标签和字段。

    如果字段获取焦点时标签完全消失,用户往后不能比较填写的字段内容和对应的标签。

    在HTML代码结构中,并不需要使用多余的占位标签,让代码容易维护。

    标签靠近其相应的字段,所以很容易辨别哪个与哪个。

    标签长度必须小于字段长度。

    图片 28

    表单被翻译成其他语言时,标签可能不再适合原来固定的尺寸。

    3、标签长度比较短?

    在任何时候,用户都能把字段内容和标签比较,核实是否填错内容。

    如果字段获取焦点时标签完全消失,就需要用户必须记住填写字段对应的标签是什么。

    表单标签可以比字段更长。

    标签容易扫描,因为它们没有被字段分隔开来。

    缺点:

    整个表单标签扫描比较困难,因为它们都被字段分隔开来。

    在任何时候,用户都能把字段内容和标签比较,核实是否填错内容。

    标签作为提示文本出现;

    在小范围可视区域内,表单字段获得填写焦点,表单标签仍然可见(即使是缩放)。

    缺点:

    总结

    标签在字段左侧是最佳选择。

    在小范围的可视区域内,表单字段获得填写焦点时,标签可能隐藏不可见。

    相对于标签在左侧的排版,高度是其两倍。

    优点:

    标签长度可以比字段更长。

    标签作为提示文本出现;

    4、标签在字段里面

    图片 29

    即使你没有详细地查看以上排版方案的优缺点, 也能很明显知道弊多于利的是:

    本文由365足球外围官方网站发布于摄影技巧,转载请注明出处:关于网页设计中的界面设计,详细解析如何排放

    关键词:

上一篇:没有了

下一篇:没有了