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