當前位置: 首頁 > 設計資訊 > 設計教程 > 正文

講解設計語言中的表單中的登錄與注冊部分

2019-04-19 2491 0

大致講完了按鈕、下拉菜單、導航欄、分頁等,就要開始講表單了。表單也分幾種功能和幾種樣式,我也不可能不能把它們一一講出來,所以只挑出幾個常用的來講一下吧。重復性的知識就不講了,還是建議大家都溫習一下以前的知識吧。另外呢,以后的文章我盡量講的在細致一些,這樣就更容易讓大家理解吧。不多說上干貨吧。

 

另外大家也不要忽略設計語言的價值。如果整合成業(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水平登錄(樣式)

 

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

undefined

 

 

1.2水平登錄(大體結構)

 

先了解一下水平登錄的大體結構,它按功能會分為兩個區(qū)域。左側為輸入區(qū)分別是“用戶名輸入框”和“密碼輸入框”。右側為“登錄區(qū)”就是登錄按鈕了。因為要突出層級關系,左側輸入區(qū)與右側登錄區(qū)的間隔不能相同;另外左側輸入區(qū)的總距離要與登錄區(qū)存在一定的比例關系,如下圖所示,輸入區(qū)總寬度為400px剛好是登錄區(qū)80px的5倍,即400/80=5。

undefined

 

 

1.3水平登錄(拆分要素)

 

了解水平登錄也的大體結構后就要拆分它里面的要素,并精細化它們之間的距離,例如圖標與矩形框的距離,圖標與文字之間的距離。文字不用測上下距離,直接水平居中就行了。另外我繪制的矩形框的單個寬度是196px,兩個矩形框就是196*2=392px,再加上兩個矩形框之間的間距8px,那整個輸入區(qū)域就是400px了,剛好是登錄區(qū)域寬度(80px)的5倍。

undefined

 

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

undefined

 

上面我只拿了一個較小的水平登錄的寬度來舉的例子。但由于頁面受柵格系統(tǒng)的影響,水平登錄頁總寬度也會受柵格總寬度的影響。所以我在這里列舉了幾個不同寬度的水平登錄,以及他們的尺寸關系等。如下圖所示,登錄1(輸入區(qū)400px/80登錄區(qū)=5倍關系)、登錄2(輸入區(qū)480px/80登錄區(qū)=6倍關系)、登錄3(輸入區(qū)560px/80登錄區(qū)=7倍關系),它們之間是存在一定的比例關系的。

undefined

看到這里水平登錄也頁的幾個要點就講完了,不是很難懂,同學們練習一下,根據例子實操練一下就明白了。

 

 

2.1垂直登錄(樣式)

 

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

undefined又或者京東的登錄按鈕的“輸入區(qū)”、“忘記密碼”、“登錄區(qū)”之間的距離不應該是相同的,應該具有層級關系;登錄按鈕的字號和矩形框的關系不協(xié)調,給人一種很蠢的感覺。說的有點多了,這些都是非常微小的細節(jié),希望同學們在做自己的項目時都思考并規(guī)避這些問題,才能給用戶一種極致舒適的體驗。

 

 

2.2垂直登錄(大體結構)

 

垂直登錄不像水平登錄那樣存在比例關系,輸入區(qū)與登錄區(qū)寬度相同就行了。但要注意的是,輸入區(qū)與記憶區(qū)是同一個層次,所以它們之間的間距是相同的。而輸入/記憶區(qū)與登錄區(qū)的層次是不同的,所以它們之間要留有一定的間距。而且輸入區(qū)與登錄區(qū)層級不同,登錄區(qū)的按鈕高度應該設置的更大一些,來突出它的獨立性。

undefined

 

 

2.3垂直登錄(拆分要素)

 

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

undefined

 

 

2.4垂直登錄(實際案例)

 

我在這里附加一個垂直登錄的實際案例吧,已經應用到我們的系統(tǒng)當中了。這里給大家一個樣式,方便大家做參考。關于注冊按鈕的布置,因為我們的系統(tǒng)是由公司給企業(yè)提供的賬號,就導致“注冊”這個優(yōu)先級在需求中就會顯得比較低,就放置了右下方,從視覺導向來看要比記憶區(qū)優(yōu)先級還要低。那我在這里還是想嘮叨一嘴,看問題不要看表面,形式追隨內容,一切還是按照實際項目需求而定。

undefined

 

 

3.1注冊表單(樣式)

 

注冊表單都是一些基礎操作,都是一個個小輸入框組合起來的。比較簡單的基礎操作我就不多說了,只講一下平時設計中容易遇到的問題吧,并如何解決它們。注冊表單也是分為白色和黑色兩種,如下圖所示。

undefined

 

由于展示不開的問題大體結構就不做講解了,這里放大一下白色的注冊表單,大家看一下細節(jié)。

 

 

3.2注冊表單(拆分要素)

 

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

undefined

 

那如果輸入框的字數不同,例如:郵箱、密碼、確認密碼、昵稱,又有兩個字又有四個人時,就必須右對齊。這樣的話元素之間就建立起了統(tǒng)一性,彼此之間就有了聯(lián)系。

 

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

 

來講一下第二個問題,那就是在輸入框輸入關鍵字后,提示的錯誤信息應該放在哪,怎么放。一個體驗好的表單會有不同形式的提示信息,關鍵字填寫有誤就要給出相應的指引、上傳文件有誤就要提示用戶文件錯誤等。如果不針對每種場景來為用戶提示信息,就會給用戶造成困惑,就會浪費用戶的時間、增加用戶的思考和壓力。當輸入框上下間距過于緊密,那提示信息就沒有地方擺放了,所以應該給提示信息多留一些白。如圖所示。

undefined

 

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

undefined

 

可能有些同學看不出來它們之間的差別,沒有關系我放大一下給你們看。我們要針對不同的曲率,提示信息要根據視覺差移動相對的位置。

undefined

 

最后上傳一張沒有標注和注釋的樣式,供大家參考。

 

 

謝謝閱讀

感謝支持

 

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

 

謝謝大家的支持

記得點個贊哦


 


18
評論區(qū)(0)
正在加載評論...
相關推薦