大致講完了按鈕、下拉菜單、導(dǎo)航欄、分頁(yè)等，就要開(kāi)始講表單了。表單也分幾種功能和幾種樣式，我也不可能不能把它們一一講出來(lái)，所以只挑出幾個(gè)常用的來(lái)講一下吧。重復(fù)性的知識(shí)就不講了，還是建議大家都溫習(xí)一下以前的知識(shí)吧。另外呢，以后的文章我盡量講的在細(xì)致一些，這樣就更容易讓大家理解吧。不多說(shuō)上干貨吧。

 

另外大家也不要忽略設(shè)計(jì)語(yǔ)言的價(jià)值。如果整合成業(yè)務(wù)層并制作成平臺(tái)，按這個(gè)質(zhì)量來(lái)看是可以賣(mài)2000萬(wàn)人民幣的，基礎(chǔ)部分可值300-800萬(wàn)之間，設(shè)計(jì)規(guī)則全網(wǎng)目前還沒(méi)有人講。去年我是整合了部分業(yè)務(wù)部分想融資做這塊的，由于成本的問(wèn)題就擱置了，但不代表以后不做這塊。而現(xiàn)在轉(zhuǎn)為教育更想履行一定的社會(huì)責(zé)任，我現(xiàn)在要把這塊的知識(shí)公開(kāi)化不賣(mài)錢(qiá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.注冊(cè)表單

   3.1 注冊(cè)表單（樣式）

   3.2 注冊(cè)表單（拆分要素）

 

 

 

1.1水平登錄（樣式）

 

登錄頁(yè)分兩種：水平登錄和垂直登錄。水平登錄一般應(yīng)用在功能性/內(nèi)容為主的頁(yè)面上方，并滿足頁(yè)面不用跳轉(zhuǎn)就能登錄的需求，而如今已經(jīng)不太常用了。不管怎么說(shuō)還是要理解它的繪制方法，下圖是它的樣式及繪制方法。我還是以中等尺寸來(lái)做示例，樣式同樣分為黑白兩種，如下圖所示。

 

 

1.2水平登錄（大體結(jié)構(gòu)）

 

先了解一下水平登錄的大體結(jié)構(gòu)，它按功能會(huì)分為兩個(gè)區(qū)域。左側(cè)為輸入?yún)^(qū)分別是“用戶名輸入框”和“密碼輸入框”。右側(cè)為“登錄區(qū)”就是登錄按鈕了。因?yàn)橐怀鰧蛹?jí)關(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)與文字之間的距離。文字不用測(cè)上下距離，直接水平居中就行了。另外我繪制的矩形框的單個(gè)寬度是196px，兩個(gè)矩形框就是196*2=392px，再加上兩個(gè)矩形框之間的間距8px，那整個(gè)輸入?yún)^(qū)域就是400px了，剛好是登錄區(qū)域?qū)挾龋?0px）的5倍。

 

那登錄區(qū)的按鈕呢，細(xì)化來(lái)分可以分為三種尺寸，分別是按鈕1（高32px/寬80px）、按鈕2（高40px/寬88px）、按鈕3（高48px/寬88px），每種尺寸對(duì)應(yīng)不同的項(xiàng)目需求。另外禁止區(qū)域的按鈕也會(huì)有尺寸變化，主要以4px遞增，分別是禁止1（16px/間距4px）、禁止2（20px、間距4px）、禁止3（24px、間距4px）。而圖標(biāo)的粗細(xì)度也有講究，這里我就不贅述了。

 

上面我只拿了一個(gè)較小的水平登錄的寬度來(lái)舉的例子。但由于頁(yè)面受柵格系統(tǒng)的影響，水平登錄頁(yè)總寬度也會(huì)受柵格總寬度的影響。所以我在這里列舉了幾個(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)系的。

看到這里水平登錄也頁(yè)的幾個(gè)要點(diǎn)就講完了，不是很難懂，同學(xué)們練習(xí)一下，根據(jù)例子實(shí)操練一下就明白了。

 

 

2.1垂直登錄（樣式）

 

現(xiàn)在最常用的登錄樣式是垂直登錄，基本上所有后臺(tái)和各大門(mén)戶社交平臺(tái)，均采用的是這種登錄樣式。例如新浪網(wǎng)、百度云盤(pán)、淘寶、京東等，例子太多了。不要看他們是大廠大公司，有些細(xì)節(jié)把控還是不到位的。例如新浪網(wǎng)的垂直登陸，文字與矩形框的距離沒(méi)有規(guī)范，它們之間的距離太近了，視覺(jué)效果稍差一些，又或者是輸入完信息后右面的清除按鈕做的不規(guī)范，沒(méi)有做到“視覺(jué)水平居中”等問(wèn)題。

又或者京東的登錄按鈕的“輸入?yún)^(qū)”、“忘記密碼”、“登錄區(qū)”之間的距離不應(yīng)該是相同的，應(yīng)該具有層級(jí)關(guān)系；登錄按鈕的字號(hào)和矩形框的關(guān)系不協(xié)調(diào)，給人一種很蠢的感覺(jué)。說(shuō)的有點(diǎn)多了，這些都是非常微小的細(xì)節(jié)，希望同學(xué)們?cè)谧鲎约旱捻?xiàng)目時(shí)都思考并規(guī)避這些問(wèn)題，才能給用戶一種極致舒適的體驗(yàn)。

 

 

2.2垂直登錄（大體結(jié)構(gòu)）

 

垂直登錄不像水平登錄那樣存在比例關(guān)系，輸入?yún)^(qū)與登錄區(qū)寬度相同就行了。但要注意的是，輸入?yún)^(qū)與記憶區(qū)是同一個(gè)層次，所以它們之間的間距是相同的。而輸入/記憶區(qū)與登錄區(qū)的層次是不同的，所以它們之間要留有一定的間距。而且輸入?yún)^(qū)與登錄區(qū)層級(jí)不同，登錄區(qū)的按鈕高度應(yīng)該設(shè)置的更大一些，來(lái)突出它的獨(dú)立性。

 

 

2.3垂直登錄（拆分要素）

 

垂直登錄中的要素與水平登錄中的要素基本相同，差異在于記憶區(qū)，所以只講一下這里得了。記憶區(qū)很簡(jiǎn)單，只要把勾選框和文字之間的距離算出來(lái)就行了，就這么點(diǎn)事兒。另外垂直登錄的寬度也是按照同學(xué)們的審美來(lái)決定的，只要不過(guò)長(zhǎng)問(wèn)題都不是很大。

 

 

2.4垂直登錄（實(shí)際案例）

 

我在這里附加一個(gè)垂直登錄的實(shí)際案例吧，已經(jīng)應(yīng)用到我們的系統(tǒng)當(dāng)中了。這里給大家一個(gè)樣式，方便大家做參考。關(guān)于注冊(cè)按鈕的布置，因?yàn)槲覀兊南到y(tǒng)是由公司給企業(yè)提供的賬號(hào)，就導(dǎo)致“注冊(cè)”這個(gè)優(yōu)先級(jí)在需求中就會(huì)顯得比較低，就放置了右下方，從視覺(jué)導(dǎo)向來(lái)看要比記憶區(qū)優(yōu)先級(jí)還要低。那我在這里還是想嘮叨一嘴，看問(wèn)題不要看表面，形式追隨內(nèi)容，一切還是按照實(shí)際項(xiàng)目需求而定。

 

 

3.1注冊(cè)表單（樣式）

 

注冊(cè)表單都是一些基礎(chǔ)操作，都是一個(gè)個(gè)小輸入框組合起來(lái)的。比較簡(jiǎn)單的基礎(chǔ)操作我就不多說(shuō)了，只講一下平時(shí)設(shè)計(jì)中容易遇到的問(wèn)題吧，并如何解決它們。注冊(cè)表單也是分為白色和黑色兩種，如下圖所示。

 

由于展示不開(kāi)的問(wèn)題大體結(jié)構(gòu)就不做講解了，這里放大一下白色的注冊(cè)表單，大家看一下細(xì)節(jié)。

 

 

3.2注冊(cè)表單（拆分要素）

 

首先第一個(gè)要講的平時(shí)設(shè)計(jì)中容易出現(xiàn)的問(wèn)題，就是輸入框文字的對(duì)齊問(wèn)題。對(duì)齊方式主要是根據(jù)場(chǎng)景和需求而定的，不是絕對(duì)的。如果整個(gè)表單的所有文字都是相同的字?jǐn)?shù)，例如姓名、年齡、密碼、昵稱等都是兩個(gè)字或相同字?jǐn)?shù)的情況下，采用左對(duì)齊或者右對(duì)齊都行。

 

那如果輸入框的字?jǐn)?shù)不同，例如：郵箱、密碼、確認(rèn)密碼、昵稱，又有兩個(gè)字又有四個(gè)人時(shí)，就必須右對(duì)齊。這樣的話元素之間就建立起了統(tǒng)一性，彼此之間就有了聯(lián)系。

 

我講設(shè)計(jì)不會(huì)像其他講師那樣按照自己的主觀判斷來(lái)進(jìn)行講解，凡是都有依據(jù)。我就來(lái)講一下為什么輸入框字?jǐn)?shù)不同，就要用右對(duì)齊。在我講平面知識(shí)的時(shí)候提到過(guò)，要素貼近具有關(guān)聯(lián)性，要素遠(yuǎn)離產(chǎn)生分歧并相互排斥。那如果輸入框字?jǐn)?shù)不同就會(huì)產(chǎn)生“負(fù)形”，而負(fù)形會(huì)破壞元素之間的整體性。如圖所示。

 

來(lái)講一下第二個(gè)問(wèn)題，那就是在輸入框輸入關(guān)鍵字后，提示的錯(cuò)誤信息應(yīng)該放在哪，怎么放。一個(gè)體驗(yàn)好的表單會(huì)有不同形式的提示信息，關(guān)鍵字填寫(xiě)有誤就要給出相應(yīng)的指引、上傳文件有誤就要提示用戶文件錯(cuò)誤等。如果不針對(duì)每種場(chǎng)景來(lái)為用戶提示信息，就會(huì)給用戶造成困惑，就會(huì)浪費(fèi)用戶的時(shí)間、增加用戶的思考和壓力。當(dāng)輸入框上下間距過(guò)于緊密，那提示信息就沒(méi)有地方擺放了，所以應(yīng)該給提示信息多留一些白。如圖所示。

 

好的那我們理解了給提示信息多留一些白的道理后，我們?cè)偌?xì)化一下，在考慮的深入并全面一些。我們都知道表單的曲率有“直角”、“曲率”和“圓角”之分， 根據(jù)視覺(jué)差（新手先不要去研究）測(cè)試得知，針對(duì)不同的曲率要給提示信息配置不同的位置。如圖所示。

 

可能有些同學(xué)看不出來(lái)它們之間的差別，沒(méi)有關(guān)系我放大一下給你們看。我們要針對(duì)不同的曲率，提示信息要根據(jù)視覺(jué)差移動(dòng)相對(duì)的位置。

 

最后上傳一張沒(méi)有標(biāo)注和注釋的樣式，供大家參考。

 

 

謝謝閱讀

感謝支持

 

最近也是遇到了一些事情，導(dǎo)致我的精神有些恍惚，那休息了20天左右有所緩和，現(xiàn)在的話精神狀態(tài)就好一些了。另外我想在結(jié)尾簡(jiǎn)單闡述一下我的價(jià)值觀，我是真心想履行社會(huì)責(zé)任和義務(wù)，可能在有些人眼里我是不容易被人理解的，但這就是最真實(shí)的我。在微信中給人解答問(wèn)題比較積極，從來(lái)不會(huì)收取任何紅包。朋友圈也從來(lái)不發(fā)廣告，公眾號(hào)就算做起來(lái)也承諾從不接任何廣告。我現(xiàn)在就是想把我學(xué)到的所有的知識(shí)無(wú)私奉獻(xiàn)出來(lái)，雖然現(xiàn)在只輸出了不到10分之一，以后會(huì)慢慢補(bǔ)上來(lái)的。我的目的就是提高設(shè)計(jì)師認(rèn)知，為這個(gè)行業(yè)做一絲貢獻(xiàn)，為整個(gè)社會(huì)做一絲貢獻(xiàn)，我想這就是我的價(jià)值吧。

 

謝謝大家的支持

記得點(diǎn)個(gè)贊哦

∨