大致講完了按鈕、下拉菜單、導(dǎo)航欄、分頁等，就要開始講表單了。表單也分幾種功能和幾種樣式，我也不可能不能把它們一一講出來，所以只挑出幾個(gè)常用的來講一下吧。重復(fù)性的知識就不講了，還是建議大家都溫習(xí)一下以前的知識吧。另外呢，以后的文章我盡量講的在細(xì)致一些，這樣就更容易讓大家理解吧。不多說上干貨吧。
另外大家也不要忽略設(shè)計(jì)語言的價(jià)值。如果整合成業(yè)務(wù)層并制作成平臺，按這個(gè)質(zhì)量來看是可以賣2000萬人民幣的，基礎(chǔ)部分可值300-800萬之間，設(shè)計(jì)規(guī)則全網(wǎng)目前還沒有人講。去年我是整合了部分業(yè)務(wù)部分想融資做這塊的，由于成本的問題就擱置了，但不代表以后不做這塊。而現(xiàn)在轉(zhuǎn)為教育更想履行一定的社會責(zé)任，我現(xiàn)在要把這塊的知識公開化不賣錢，所以你們好好學(xué)它是很有必要的。
目錄
1.水平登錄
1.1 水平登錄（樣式）
1.2 水平登錄（大體結(jié)構(gòu)）
1.3 水平登錄（拆分要素）
2.垂直登錄
2.1 垂直登錄（樣式）
2.2 垂直登錄（大體結(jié)構(gòu)）
2.3 垂直登錄（拆分要素）
2.4 垂直登錄（實(shí)際案例）
3.注冊表單
3.1 注冊表單（樣式）
3.2 注冊表單（拆分要素）
1.1水平登錄（樣式）
登錄頁分兩種：水平登錄和垂直登錄。水平登錄一般應(yīng)用在功能性/內(nèi)容為主的頁面上方，并滿足頁面不用跳轉(zhuǎn)就能登錄的需求，而如今已經(jīng)不太常用了。不管怎么說還是要理解它的繪制方法，下圖是它的樣式及繪制方法。我還是以中等尺寸來做示例，樣式同樣分為黑白兩種，如下圖所示。
1.2水平登錄（大體結(jié)構(gòu)）
先了解一下水平登錄的大體結(jié)構(gòu)，它按功能會分為兩個(gè)區(qū)域。左側(cè)為輸入?yún)^(qū)分別是“用戶名輸入框”和“密碼輸入框”。右側(cè)為“登錄區(qū)”就是登錄按鈕了。因?yàn)橐怀鰧蛹夑P(guān)系，左側(cè)輸入?yún)^(qū)與右側(cè)登錄區(qū)的間隔不能相同；另外左側(cè)輸入?yún)^(qū)的總距離要與登錄區(qū)存在一定的比例關(guān)系，如下圖所示，輸入?yún)^(qū)總寬度為400px剛好是登錄區(qū)80px的5倍，即400/80=5。
1.3水平登錄（拆分要素）
了解水平登錄也的大體結(jié)構(gòu)后就要拆分它里面的要素，并精細(xì)化它們之間的距離，例如圖標(biāo)與矩形框的距離，圖標(biāo)與文字之間的距離。文字不用測上下距離，直接水平居中就行了。另外我繪制的矩形框的單個(gè)寬度是196px，兩個(gè)矩形框就是196*2=392px，再加上兩個(gè)矩形框之間的間距8px，那整個(gè)輸入?yún)^(qū)域就是400px了，剛好是登錄區(qū)域?qū)挾龋?0px）的5倍。
那登錄區(qū)的按鈕呢，細(xì)化來分可以分為三種尺寸，分別是按鈕1（高32px/寬80px）、按鈕2（高40px/寬88px）、按鈕3（高48px/寬88px），每種尺寸對應(yīng)不同的項(xiàng)目需求。另外禁止區(qū)域的按鈕也會有尺寸變化，主要以4px遞增，分別是禁止1（16px/間距4px）、禁止2（20px、間距4px）、禁止3（24px、間距4px）。而圖標(biāo)的粗細(xì)度也有講究，這里我就不贅述了。
上面我只拿了一個(gè)較小的水平登錄的寬度來舉的例子。但由于頁面受柵格系統(tǒng)的影響，水平登錄頁總寬度也會受柵格總寬度的影響。所以我在這里列舉了幾個(gè)不同寬度的水平登錄，以及他們的尺寸關(guān)系等。如下圖所示，登錄1（輸入?yún)^(qū)400px/80登錄區(qū)=5倍關(guān)系）、登錄2（輸入?yún)^(qū)480px/80登錄區(qū)=6倍關(guān)系）、登錄3（輸入?yún)^(qū)560px/80登錄區(qū)=7倍關(guān)系），它們之間是存在一定的比例關(guān)系的。
看到這里水平登錄也頁的幾個(gè)要點(diǎn)就講完了，不是很難懂，同學(xué)們練習(xí)一下，根據(jù)例子實(shí)操練一下就明白了。
2.1垂直登錄（樣式）
現(xiàn)在最常用的登錄樣式是垂直登錄，基本上所有后臺和各大門戶社交平臺，均采用的是這種登錄樣式。例如新浪網(wǎng)、百度云盤、淘寶、京東等，例子太多了。不要看他們是大廠大公司，有些細(xì)節(jié)把控還是不到位的。例如新浪網(wǎng)的垂直登陸，文字與矩形框的距離沒有規(guī)范，它們之間的距離太近了，視覺效果稍差一些，又或者是輸入完信息后右面的清除按鈕做的不規(guī)范，沒有做到“視覺水平居中”等問題。
又或者京東的登錄按鈕的“輸入?yún)^(qū)”、“忘記密碼”、“登錄區(qū)”之間的距離不應(yīng)該是相同的，應(yīng)該具有層級關(guān)系；登錄按鈕的字號和矩形框的關(guān)系不協(xié)調(diào)，給人一種很蠢的感覺。說的有點(diǎn)多了，這些都是非常微小的細(xì)節(jié)，希望同學(xué)們在做自己的項(xiàng)目時(shí)都思考并規(guī)避這些問題，才能給用戶一種極致舒適的體驗(yàn)。
2.2垂直登錄（大體結(jié)構(gòu)）
垂直登錄不像水平登錄那樣存在比例關(guān)系，輸入?yún)^(qū)與登錄區(qū)寬度相同就行了。但要注意的是，輸入?yún)^(qū)與記憶區(qū)是同一個(gè)層次，所以它們之間的間距是相同的。而輸入/記憶區(qū)與登錄區(qū)的層次是不同的，所以它們之間要留有一定的間距。而且輸入?yún)^(qū)與登錄區(qū)層級不同，登錄區(qū)的按鈕高度應(yīng)該設(shè)置的更大一些，來突出它的獨(dú)立性。
2.3垂直登錄（拆分要素）
垂直登錄中的要素與水平登錄中的要素基本相同，差異在于記憶區(qū)，所以只講一下這里得了。記憶區(qū)很簡單，只要把勾選框和文字之間的距離算出來就行了，就這么點(diǎn)事兒。另外垂直登錄的寬度也是按照同學(xué)們的審美來決定的，只要不過長問題都不是很大。
2.4垂直登錄（實(shí)際案例）
我在這里附加一個(gè)垂直登錄的實(shí)際案例吧，已經(jīng)應(yīng)用到我們的系統(tǒng)當(dāng)中了。這里給大家一個(gè)樣式，方便大家做參考。關(guān)于注冊按鈕的布置，因?yàn)槲覀兊南到y(tǒng)是由公司給企業(yè)提供的賬號，就導(dǎo)致“注冊”這個(gè)優(yōu)先級在需求中就會顯得比較低，就放置了右下方，從視覺導(dǎo)向來看要比記憶區(qū)優(yōu)先級還要低。那我在這里還是想嘮叨一嘴，看問題不要看表面，形式追隨內(nèi)容，一切還是按照實(shí)際項(xiàng)目需求而定。
3.1注冊表單（樣式）
注冊表單都是一些基礎(chǔ)操作，都是一個(gè)個(gè)小輸入框組合起來的。比較簡單的基礎(chǔ)操作我就不多說了，只講一下平時(shí)設(shè)計(jì)中容易遇到的問題吧，并如何解決它們。注冊表單也是分為白色和黑色兩種，如下圖所示。
由于展示不開的問題大體結(jié)構(gòu)就不做講解了，這里放大一下白色的注冊表單，大家看一下細(xì)節(jié)。
3.2注冊表單（拆分要素）
首先第一個(gè)要講的平時(shí)設(shè)計(jì)中容易出現(xiàn)的問題，就是輸入框文字的對齊問題。對齊方式主要是根據(jù)場景和需求而定的，不是絕對的。如果整個(gè)表單的所有文字都是相同的字?jǐn)?shù)，例如姓名、年齡、密碼、昵稱等都是兩個(gè)字或相同字?jǐn)?shù)的情況下，采用左對齊或者右對齊都行。
那如果輸入框的字?jǐn)?shù)不同，例如：郵箱、密碼、確認(rèn)密碼、昵稱，又有兩個(gè)字又有四個(gè)人時(shí)，就必須右對齊。這樣的話元素之間就建立起了統(tǒng)一性，彼此之間就有了聯(lián)系。
我講設(shè)計(jì)不會像其他講師那樣按照自己的主觀判斷來進(jìn)行講解，凡是都有依據(jù)。我就來講一下為什么輸入框字?jǐn)?shù)不同，就要用右對齊。在我講平面知識的時(shí)候提到過，要素貼近具有關(guān)聯(lián)性，要素遠(yuǎn)離產(chǎn)生分歧并相互排斥。那如果輸入框字?jǐn)?shù)不同就會產(chǎn)生“負(fù)形”，而負(fù)形會破壞元素之間的整體性。如圖所示。
來講一下第二個(gè)問題，那就是在輸入框輸入關(guān)鍵字后，提示的錯(cuò)誤信息應(yīng)該放在哪，怎么放。一個(gè)體驗(yàn)好的表單會有不同形式的提示信息，關(guān)鍵字填寫有誤就要給出相應(yīng)的指引、上傳文件有誤就要提示用戶文件錯(cuò)誤等。如果不針對每種場景來為用戶提示信息，就會給用戶造成困惑，就會浪費(fèi)用戶的時(shí)間、增加用戶的思考和壓力。當(dāng)輸入框上下間距過于緊密，那提示信息就沒有地方擺放了，所以應(yīng)該給提示信息多留一些白。如圖所示。
好的那我們理解了給提示信息多留一些白的道理后，我們再細(xì)化一下，在考慮的深入并全面一些。我們都知道表單的曲率有“直角”、“曲率”和“圓角”之分， 根據(jù)視覺差（新手先不要去研究）測試得知，針對不同的曲率要給提示信息配置不同的位置。如圖所示。
可能有些同學(xué)看不出來它們之間的差別，沒有關(guān)系我放大一下給你們看。我們要針對不同的曲率，提示信息要根據(jù)視覺差移動相對的位置。
最后上傳一張沒有標(biāo)注和注釋的樣式，供大家參考。
謝謝閱讀
感謝支持
最近也是遇到了一些事情，導(dǎo)致我的精神有些恍惚，那休息了20天左右有所緩和，現(xiàn)在的話精神狀態(tài)就好一些了。另外我想在結(jié)尾簡單闡述一下我的價(jià)值觀，我是真心想履行社會責(zé)任和義務(wù)，可能在有些人眼里我是不容易被人理解的，但這就是最真實(shí)的我。在微信中給人解答問題比較積極，從來不會收取任何紅包。朋友圈也從來不發(fā)廣告，公眾號就算做起來也承諾從不接任何廣告。我現(xiàn)在就是想把我學(xué)到的所有的知識無私奉獻(xiàn)出來，雖然現(xiàn)在只輸出了不到10分之一，以后會慢慢補(bǔ)上來的。我的目的就是提高設(shè)計(jì)師認(rèn)知，為這個(gè)行業(yè)做一絲貢獻(xiàn)，為整個(gè)社會做一絲貢獻(xiàn)，我想這就是我的價(jià)值吧。
謝謝大家的支持
記得點(diǎn)個(gè)贊哦
∨
