新接手鑰匙串城菊，原設(shè)計(jì)師在某一表單上的設(shè)計(jì)如此
到視覺設(shè)計(jì)時(shí)雖然將“選填”和框左對齊了，但由于上方的文字，始終覺得頁面不整齊菩彬，因?yàn)樗X的選填只是一個(gè)說明性的文字缠劝，而并非功能性的，調(diào)整以后的影響不大骗灶。詢問是否可以調(diào)整布局惨恭，將選填移到輸入框中，因?yàn)榻?jīng)驗(yàn)尚淺耙旦，當(dāng)時(shí)也不清楚原設(shè)計(jì)師的意圖脱羡，就想著盡量保持原設(shè)計(jì)，給視覺設(shè)計(jì)師的答復(fù)是可以讓“選填”文字和上方“密碼提示”相對齊免都。
后面自己思考后锉罐，覺得在目前的設(shè)計(jì)上，可做的無非以下幾種修改绕娘。
第一種也是視覺希望改的樣子脓规，比較起來覺得第一種“選填”文字和“密碼提示”本身距離較遠(yuǎn)，對其功能性的提示應(yīng)當(dāng)盡可能接近文字本身（知覺組織的臨近性原則险领？）
第二種就是將“選填”和“密碼提示”文字對齊侨舆，也是初步給視覺的答復(fù)。
第三種是將“選填”放在框中”密碼提示“后面绢陌。但感覺文字表達(dá)略長挨下，好像和通常看到的主流設(shè)計(jì)也有區(qū)別（有待驗(yàn)證）
第四種將選填放在輸入框上方脐湾，突出選填臭笆，但和原設(shè)計(jì)一樣需考慮怎樣對齊的問題
個(gè)人更傾向于4，3的方案
之后想看看其他產(chǎn)品對于類似于選填的設(shè)計(jì)方法秤掌，學(xué)習(xí)一下耗啦。搜索表單設(shè)計(jì)，發(fā)現(xiàn)很多表單設(shè)計(jì)講究的點(diǎn)机杜。學(xué)習(xí)之后再做整理帜讲。
閱讀網(wǎng)上信息，整理
左標(biāo)簽：
標(biāo)簽在輸入框的左邊椒拗，是目前最常用的標(biāo)簽形式似将。左標(biāo)簽的缺點(diǎn)在于占用橫向空間大获黔，輸入框?qū)挾刃。?dāng)輸入內(nèi)容長時(shí)在验，輸入框里的內(nèi)容可能顯示不全玷氏。當(dāng)用戶提交內(nèi)容時(shí)，會(huì)迅速掃一眼確認(rèn)輸入的信息腋舌，但這種情況下是顯示不全的盏触，導(dǎo)致用戶無法確認(rèn)。
左標(biāo)簽的設(shè)計(jì)中存在右對齊和左對齊的方式块饺，從網(wǎng)絡(luò)信息顯示實(shí)際表單設(shè)計(jì)中設(shè)計(jì)為標(biāo)簽右對齊比例大于左標(biāo)簽
標(biāo)簽和輸入框右邊
星標(biāo)識(shí)出現(xiàn)在輸入框右邊赞辩，用戶在填寫是需要跳躍視線，且按照視覺流的F型授艰，往往容易在用戶填寫完成時(shí)才看到后面的星標(biāo)辨嗽，意識(shí)到哪些是必填，哪些是選填
標(biāo)簽和輸入框中間
這種表現(xiàn)形式的好處在于星標(biāo)離輸入框起始位置近淮腾，避免了前兩種的缺陷糟需。
標(biāo)簽左邊
必填星標(biāo)離填寫的內(nèi)容稍遠(yuǎn)，當(dāng)表單密集時(shí)可能造成用戶填寫串行
頂部標(biāo)簽：
前面提到頂部標(biāo)簽約占30%谷朝。頂部標(biāo)簽的好處在于標(biāo)簽和輸入框在視覺流位置上縱向靠近洲押，方便輸入；且輸入框可以占據(jù)整行圆凰，當(dāng)輸入內(nèi)容長時(shí)可完全顯示诅诱。避免了左對齊和右對齊輸入框?qū)挾壬俚膯栴}，不方便確認(rèn)的問題送朱。缺點(diǎn)在于縱向占用空間大娘荡，原來一屏可顯示的內(nèi)容現(xiàn)在需要滾屏。頂部標(biāo)簽的必填星標(biāo)一般可以標(biāo)在輸入框前面
行內(nèi)標(biāo)簽：
行內(nèi)標(biāo)簽的樣式很適合手機(jī)端的表單設(shè)計(jì)驶沼，節(jié)省空間炮沐。但缺點(diǎn)在于一旦輸入后框內(nèi)的標(biāo)簽就消失了，用戶填寫的過程中就忘了之前填寫的項(xiàng)目是什么回怜。標(biāo)簽消失后大年，面對著一堆已經(jīng)填寫后的內(nèi)容，最后也無法確認(rèn)填寫的內(nèi)容是否正確玉雾。造成填寫的錯(cuò)誤率高翔试。可解決的一個(gè)方式在于在框中添加圖標(biāo)，占用空間小的同時(shí)也美化了輸入框。
頂部標(biāo)簽方式自赔，填表時(shí)間最短。但如果盡量減少垂直面積壁涎，可以考慮右對齊方式凡恍。如果希望用戶填表時(shí)認(rèn)真瀏覽標(biāo)簽，了解仔細(xì)考慮表單的每個(gè)輸入框時(shí)怔球，可以采用左對齊方式嚼酝。
【寫完之后突然想到之前看的谷歌賬號登錄的表單設(shè)計(jì)，采用行內(nèi)設(shè)計(jì)竟坛，當(dāng)點(diǎn)擊進(jìn)入輸入狀態(tài)時(shí)闽巩，存在一個(gè)動(dòng)畫使標(biāo)簽由框內(nèi)滑至框標(biāo)題（后面會(huì)做動(dòng)圖之后再添動(dòng)圖。汗）担汤，過渡優(yōu)雅涎跨，小標(biāo)簽占用空間不大同時(shí)也避免了行內(nèi)標(biāo)簽一旦開始輸入標(biāo)簽消失的問題。是加圖標(biāo)的另外一種解決方式】
網(wǎng)絡(luò)信息來自：
http://www.360doc.com/content/16/1124/11/33193359_609118084.shtml
《關(guān)于表單設(shè)計(jì)的知識(shí)點(diǎn)漫试，這篇總結(jié)的相當(dāng)全面》http://www.uisdc.com/form-design-summarize
