仓酷云

标题: 带来一篇转：浅议 Web 的表单计划 [打印本页]

作者: 活着的死人 时间: 2015-1-16 00:21
标题: 带来一篇转：浅议 Web 的表单计划
所有的设计第一步就是构思，构思好了。
“输出框（Input）应该切合逻辑地分别为小组，如许年夜脑就能够很好的处置年夜堆地区间的干系。”C《HTML威望指南》
Web使用程序老是使用表单来处置数据录进和设置，但并非一切的表单都坚持分歧。输出地区的对齐体例，各自的标签（label），操纵体例，和四周的视觉元素城市或多或少影响用户的举动。
表单结构

思索到用户完成表单填写的工夫应该尽量的短，而且搜集的数据都是用户所熟习的（好比姓名、地点、付费信息等），垂直对齐的标签和输出框能够说是最好的。每对标签和输出框垂直对齐给人一种二者靠近的感到，而且分歧的左对齐削减了眼睛挪动和处置工夫。用户只必要往一个偏向挪动：下。

在这类结构中，保举利用加粗的标签，这能够增添它们视觉比重，进步其明显性。假如不加粗的话，从用户的角度讲，标签和输出框的笔墨几近就一样了。
假如一个表单上的数据其实不为人熟习大概在逻辑上分组有坚苦（好比一个地点的多个构成部分），左对齐的标签能够很简单的通览表单的信息。用户只必要高低看看左边一栏标签就能够了，而不会被输出框打断思绪。但如许一来，标签与其对应的输出框之间的间隔一般会被更长的标签拉长，大概会影响填写表单的工夫。用户必需摆布往返的跳转眼光来找到两个对应的标签和输出框。

因而发生了一种替换的计划，标签右对齐结构，使得标签和输出框之间的接洽更严密。但是了局是右边乱七八糟的空缺和标签让用户很难疾速检索表单要填写的内容。在东方国度，人们习气于从左至右的誊写，以是这类右对齐的结构就给用户形成了浏览停滞。

借助可视化元素

因为“标签左对齐结构”的长处（便利检索而且削减垂直高度），实验改正它的次要弱点（标签和输出框的分别）就很勾引人。
一个计划就是增添背景致和支解线，分歧的背景致发生了一列垂直的标签和一列垂直的输出框，每组标签和输出框使用明晰的程度线分隔。固然这听上往不错，可是仍是会存在成绩。
对照之前的形状（用户客观的视觉辨别），这增添了15个视觉元素：两头线、一个个有背景致的单位格和一条条的程度线。这些元素会转移用户的视野，让用户难以聚焦到一些主要的元素上，好比标签和输出框。正如EdwardTufte指出的：“信息自己存在差别，一定发生感官上的分歧。”换句话说，任何对结构无用的视觉元素城市不休地侵扰结构。当你试着扫瞄左边的标签就能够发明，你的视野老是被打断，停上去想那些程度线、单位格和背景色彩。

固然这其实不意味着保持背景致和线条。它们关于分别相干地区信息仍是很无效的。好比一条细程度线大概一个浅浅的背景致，都能够从视觉上组合相干数据。背景致和线条关于辨别表单的次要操纵按钮特别无效。

主次操纵

一个表单的次要操纵（一般是“提交”或“保留”）必要一个对照强的视觉比重（在下面的例子里用了亮色彩、粗字体、背景致等等）。这相称于给用户一个提醒：您已/行将完成填写表单。
当一个表单有多个操纵，好比“持续”和“前往”，那有需要加重主要操纵的视觉分量。这能够最小化用户潜伏的操纵毛病的风险。

固然以上内容能够更好的让你计划表单，可是组合结构、可视化元素和内容，仍旧必要经由用户的测试和数据剖析（完成度评价、毛病呈报等）。
JunChen翻译自LukeWsFunctioningForm
</p>
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性

作者: 因胸联盟 时间: 2015-1-18 06:17
还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

作者: 蒙在股里 时间: 2015-1-25 18:22
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 莫相离 时间: 2015-2-3 14:12
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 飘飘悠悠 时间: 2015-2-9 04:16
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 冷月葬花魂 时间: 2015-2-26 22:21
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 柔情似水 时间: 2015-3-8 18:47
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 飘灵儿 时间: 2015-3-16 12:14
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 若天明 时间: 2015-3-22 23:10
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

欢迎光临仓酷云 (http://ckuyun.com/)