登錄頁(yè)UI設(shè)計(jì)教程和模板分享
即時(shí)設(shè)計(jì)提供了許多最新手機(jī)尺寸和流行設(shè)計(jì)風(fēng)格的登錄頁(yè)面設(shè)計(jì)樣式和布局，非常適合初學(xué)者學(xué)習(xí)和研究。本文將以一套登錄頁(yè)面為例，從原型圖開(kāi)始，逐步手把手地完成高保真設(shè)計(jì)稿。該登錄頁(yè)面包含四個(gè)部分，我們將根據(jù)這四個(gè)部分進(jìn)行設(shè)計(jì)。
1、登錄頁(yè)面標(biāo)題:
登錄頁(yè)面的標(biāo)題與首頁(yè)標(biāo)題不同，它的主要目的是引導(dǎo)用戶。因此，在設(shè)計(jì)標(biāo)題時(shí)，應(yīng)保持簡(jiǎn)潔明了，避免冗長(zhǎng)的描述。只需簡(jiǎn)單地使用 "登錄" 兩個(gè)字即可，無(wú)需添加 "歡迎" 等詞語(yǔ)，這樣會(huì)顯得啰嗦。登錄頁(yè)面的關(guān)鍵作用是為用戶提供明確的登錄指引。
??
2、字體選擇:
登錄頁(yè)面中使用了思源黑體（特粗）字體，字號(hào)為 20px，段落樣式居中，顏色為 #35383A。需要注意的是，在 UI 設(shè)計(jì)中，字體顏色一般不使用純黑色，因?yàn)檫@會(huì)導(dǎo)致字體與背景對(duì)比度過(guò)高，長(zhǎng)時(shí)間觀看可能會(huì)對(duì)眼睛造成不適。通常使用深灰色作為字體顏色。
??
3、登錄頁(yè)面表單控件:
登錄頁(yè)面的表單控件包括表單和控件兩部分。表單內(nèi)容通常是固定的，包括登錄賬號(hào)和密碼，而控件通常是登錄按鈕。此外，還可以添加第三方登錄和忘記密碼的提示，這兩個(gè)功能主要是輔助性的。
盡管這個(gè)頁(yè)面的內(nèi)容看似固定，但實(shí)際上它是登錄頁(yè)面中可以發(fā)揮創(chuàng)意的組件之一。以下是一些簡(jiǎn)單列舉的設(shè)計(jì)選擇:
表單形狀：可選擇大圓角矩形邊框、小圓角矩形邊框、下劃線無(wú)邊框、連續(xù)矩形圓角邊框等等。
表單顏色：可選擇淺色底紋深色邊框、深色底紋淺色邊框、內(nèi)容與背景同色下劃線深色等等。
控件樣式：可選擇獨(dú)立的大圓角控件、獨(dú)立的小圓角控件、與表單結(jié)合的控件等等。
4、登錄頁(yè)面頭部尾部:
頭部和尾部是 UI 頁(yè)面中不可或缺的部分，但每次設(shè)計(jì)都很繁瑣。幸運(yùn)的是，即時(shí)設(shè)計(jì)插件中有一個(gè)產(chǎn)品組件庫(kù)，其中包含了各種 PC 端和移動(dòng)端的基礎(chǔ)形式，只需將其拖拽到頁(yè)面中即可使用，非常便捷。點(diǎn)擊免費(fèi)使用即時(shí)設(shè)計(jì)插件即可體驗(yàn)。
5、登錄頁(yè)面背景:
背景是頁(yè)面整體氛圍和風(fēng)格的延續(xù)，主要用于突出頁(yè)面的氛圍感。可以選擇一幅卡通人物插畫作為背景圖，因?yàn)槿宋锊瀹嬍钱?dāng)前最流行的設(shè)計(jì)元素之一，具有良好的裝飾感和設(shè)計(jì)感，能夠突出頁(yè)面的氛圍。
加入背景圖后，整個(gè)登錄頁(yè)面就基本完成了。下面讓我們來(lái)看一下整體效果，頁(yè)面效果還是很不錯(cuò)的。整體頁(yè)面給人一種輕松舒適的感覺(jué)，表單控件也清晰明確。背景色與按鈕色相互呼應(yīng)，形成了一個(gè)不錯(cuò)的登錄頁(yè)面。
6、登錄頁(yè)面 UI 設(shè)計(jì)工具:
實(shí)際上，登錄頁(yè)面在整體 UI 項(xiàng)目中只是一個(gè)小小的頁(yè)面，也是邏輯框架相對(duì)簡(jiǎn)單的部分。但它作為用戶首次接觸 APP 的頁(yè)面，對(duì)于用戶對(duì)產(chǎn)品的印象非常重要。因此，在設(shè)計(jì)時(shí)盡量避免過(guò)于復(fù)雜的設(shè)計(jì)，以免讓用戶感到過(guò)于繁瑣。同時(shí)，也不要設(shè)計(jì)過(guò)于平淡無(wú)奇的頁(yè)面，否則用戶會(huì)覺(jué)得缺乏亮點(diǎn)。這兩種情況都可能導(dǎo)致用戶不喜歡，從而無(wú)法吸引用戶注冊(cè)和使用，使得后續(xù)辛苦制作的產(chǎn)品功虧一簣。
