第80天（2018-7-13）
這段時間在做公司的一個項目，在設(shè)計注冊頁過程中癣诱，我參考過很多APP计维，經(jīng)過對比和分析，我總結(jié)了以下兩點：第一撕予、注冊頁元素鲫惶；第二、注冊頁設(shè)計樣式实抡。
一欠母、注冊頁元素
注冊頁元素是根據(jù)產(chǎn)品需求來確定的，對比后發(fā)現(xiàn)吆寨，大部分元素都是相同的赏淌，只有少數(shù)是根據(jù)產(chǎn)品的業(yè)務(wù)需求做的差異化。
注冊頁元素總結(jié)如下（如圖1）
注冊頁中共同的元素有：“手機號”啄清、“獲取驗證碼”六水、“重新發(fā)送以及計時”、“密碼”辣卒、“用戶協(xié)議”、“注冊按鈕”等想帅，例如：“站酷”博脑、“網(wǎng)易嚴(yán)選”票罐、“好豆”等APP都有以上元素该押。（如圖2）
有一些注冊頁根據(jù)業(yè)務(wù)需要，增加了元素梢什，例如：“淘寶”和“蘇寧易購”APP朝聋，增加了“安全檢測”的元素，原因是：含有支付交易功能荔睹，為了保護賬號的安全性僻他。（如圖3）
“獵聘”和“QQ”APP增加了“地區(qū)”的元素吨拗，原因是產(chǎn)品在國內(nèi)外都可以使用劝篷。（如圖4）
二娇妓、注冊頁設(shè)計樣式
看過很多產(chǎn)品的注冊頁勘高，發(fā)現(xiàn)了一些設(shè)計的規(guī)律和特點华望，我從以下四個點展開陳述仅乓。
1夸楣、排版樣式
對比和分析其他APP，注冊頁排版樣式大致有三種：LOGO+信息輸入+按鈕石洗、標(biāo)題+信息輸入+按鈕讲衫、LOGO+標(biāo)題+信息輸入+按鈕孵班，（如下圖5）
三種樣式的區(qū)別在于所強調(diào)的內(nèi)容不一樣招驴，標(biāo)題樣式強調(diào)重點信息的傳達别厘，而LOGO樣式強調(diào)品牌信息的傳達触趴。沒有好與不好之分袋倔，根據(jù)要傳達的內(nèi)容來選擇合適的樣式。
例如：“站酷”注冊頁批狐，用“LOGO+信息輸入+按鈕”樣式嚣艇；“QQ”注冊頁用的是“標(biāo)題+信息輸入+按鈕”樣式；而“百度”注冊頁用的是“Logo+標(biāo)題+信息輸入+按鈕”樣式食零。（如圖6）
2贰谣、信息輸入樣式
信息輸入是指“信息輸入框”吱抚，注冊頁里必不可少的考廉，主要有兩種樣式：通欄和非通欄（這兩個名字是我根據(jù)輸入框樣式特點取的），通欄是指輸入框與屏幕是相通的既绕，沒有間距凄贩；而非通欄相反袱讹，是與屏幕有間距的。（如圖7）
細(xì)分通欄信息輸入框也有兩種樣式：矩形债查、線+矩形盹廷，什么意思呢久橙？看下圖左圖注冊頁用的是矩形樣式，右圖注冊頁用的是線+矩形缸榄。（如圖8）
非通欄信息輸入框有四種樣式：線甚带、直角矩形佳头、半圓角矩形康嘉、圓角矩形。（如圖9）
在注冊頁中非通欄樣式比較常見敷钾，由于其在排版上的有更多的靈活性和發(fā)揮空間阻荒，所有比較受設(shè)計師的歡迎峭范。
3纱控、驗證碼樣式
獲取驗證碼有兩種樣式：文字甜害、文字+矩形（圓角、直角）尔店。如下圖10嚣州，“拉鉤”用的文字樣式，“落網(wǎng)”用的是文字+矩形（直角）的樣式情竹。
文字樣式方便開發(fā)落地匀哄，文字+矩形樣式美觀且滿足操作心理涎嚼，作為設(shè)計師更傾向第二種樣式，但目前用最多的是第一種樣式苔货，也成為了趨勢蒲赂。
4刁憋、信息輸入+按鈕樣式
信息輸入+按鈕樣式指信息輸入框與注冊按鈕的不同組合，文章第二點我總結(jié)了輸入框的各種樣式若皱，信息輸入+按鈕樣式其實是各種輸入框樣式的組合走触，常見的樣式有兩種：線+矩形（直角/圓角）疤苹、矩形（直角/圓角）+矩形（直角/圓角）卧土。例如：“百度”APP是線+矩形（全圓角）樣式尤莺，“小紅書”APP是矩形（半圓角）+矩形（半圓角）的樣式。（如圖11）
總結(jié)：
文章分享了注冊頁元素和設(shè)計樣式兩個內(nèi)容媳谁，一是晴音，把看到的寫下來，讓自己更好的理解和吸收首量，二是加缘，可以分享出來觉啊。寫的過程中杠人，我不斷優(yōu)化文章結(jié)構(gòu)和內(nèi)容，畢竟要分享出來辑莫，希望給大家正確的引導(dǎo)各吨。
