新接手钥匙串，原设计师在某一表单上的设计如此

原设计

到视觉设计时虽然将“选填”和框左对齐了，但由于上方的文字，始终觉得页面不整齐，因为她觉的选填只是一个说明性的文字，而并非功能性的，调整以后的影响不大。询问是否可以调整布局，将选填移到输入框中，因为经验尚浅，当时也不清楚原设计师的意图，就想着尽量保持原设计，给视觉设计师的答复是可以让“选填”文字和上方“密码提示”相对齐。

后面自己思考后，觉得在目前的设计上，可做的无非以下几种修改。

第一种也是视觉希望改的样子，比较起来觉得第一种“选填”文字和“密码提示”本身距离较远，对其功能性的提示应当尽可能接近文字本身（知觉组织的临近性原则？）

第二种就是将“选填”和“密码提示”文字对齐，也是初步给视觉的答复。

第三种是将“选填”放在框中”密码提示“后面。但感觉文字表达略长，好像和通常看到的主流设计也有区别（有待验证）

第四种将选填放在输入框上方，突出选填，但和原设计一样需考虑怎样对齐的问题

可能的四种设计

个人更倾向于4，3的方案

之后想看看其他产品对于类似于选填的设计方法，学习一下。搜索表单设计，发现很多表单设计讲究的点。学习之后再做整理。

阅读网上信息，整理

---

左标签：

标签在输入框的左边，是目前最常用的标签形式。左标签的缺点在于占用横向空间大，输入框宽度小，当输入内容长时，输入框里的内容可能显示不全。当用户提交内容时，会迅速扫一眼确认输入的信息，但这种情况下是显示不全的，导致用户无法确认。

左标签

左标签的设计中存在右对齐和左对齐的方式，从网络信息显示实际表单设计中设计为标签右对齐比例大于左标签

标签和输入框右边

星标识出现在输入框右边，用户在填写是需要跳跃视线，且按照视觉流的F型，往往容易在用户填写完成时才看到后面的星标，意识到哪些是必填，哪些是选填

左标签-必填星标出现在输入框右边

标签和输入框中间

这种表现形式的好处在于星标离输入框起始位置近，避免了前两种的缺陷。

左标签-必填星标出现在标签和输入框中间

标签左边

必填星标离填写的内容稍远，当表单密集时可能造成用户填写串行

左标签-必填星标在标签左边

顶部标签：

前面提到顶部标签约占30%。顶部标签的好处在于标签和输入框在视觉流位置上纵向靠近，方便输入；且输入框可以占据整行，当输入内容长时可完全显示。避免了左对齐和右对齐输入框宽度少的问题，不方便确认的问题。缺点在于纵向占用空间大，原来一屏可显示的内容现在需要滚屏。顶部标签的必填星标一般可以标在输入框前面

行内标签：

行内标签1 行内标签2

行内标签的样式很适合手机端的表单设计，节省空间。但缺点在于一旦输入后框内的标签就消失了，用户填写的过程中就忘了之前填写的项目是什么。标签消失后，面对着一堆已经填写后的内容，最后也无法确认填写的内容是否正确。造成填写的错误率高。可解决的一个方式在于在框中添加图标，占用空间小的同时也美化了输入框。

顶部标签方式，填表时间最短。但如果尽量减少垂直面积，可以考虑右对齐方式。如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式。

【写完之后突然想到之前看的谷歌账号登录的表单设计，采用行内设计，当点击进入输入状态时，存在一个动画使标签由框内滑至框标题（后面会做动图之后再添动图。汗），过渡优雅，小标签占用空间不大同时也避免了行内标签一旦开始输入标签消失的问题。是加图标的另外一种解决方式】

填写前 填写2

网络信息来自：

http://www.360doc.com/content/16/1124/11/33193359_609118084.shtml

《关于表单设计的知识点，这篇总结的相当全面》http://www.uisdc.com/form-design-summarize