話說(shuō)最近接個(gè)活兒,要給一個(gè)企業(yè)做一個(gè)登錄頁(yè)面。這玩意兒看似簡(jiǎn)單,里面的門(mén)道還真不少。今天就跟大家分享一下我的實(shí)踐過(guò)程。
接到活兒,咱不能悶頭就干,得先搞清楚人家到底想要啥樣的。跟客戶那邊聊聊,知道他們比較看重頁(yè)面的簡(jiǎn)潔和安全性。他們還希望登錄頁(yè)面能體現(xiàn)出他們企業(yè)的形象。這下我心里就有個(gè)大概的譜。
有需求,咱也不能閉門(mén)造車(chē)。我平時(shí)就喜歡逛各種設(shè)計(jì)網(wǎng)站,這回也一樣,在上面找不少登錄頁(yè)面的設(shè)計(jì)案例??纯慈思叶际钦ψ龅?,吸取吸取經(jīng)驗(yàn)。然后我還特意去瞧瞧一些大企業(yè)的登錄頁(yè)面,看看人家有啥特點(diǎn)。
有想法,接下來(lái)就得把想法給畫(huà)出來(lái)。我用的是一個(gè)叫“即時(shí)設(shè)計(jì)”的工具,這玩意兒挺方便的,可以在線畫(huà)圖,還能實(shí)時(shí)協(xié)作。我先把登錄頁(yè)面的基本元素給畫(huà)出來(lái),比如用戶名、密碼輸入框、登錄按鈕這些。然后,我還把“注冊(cè)”和“找回密碼”這些功能也給加上,雖然它們跟登錄不是一回事,但放一塊兒用戶用起來(lái)方便。
原型畫(huà)好,接下來(lái)就是搞設(shè)計(jì)。我根據(jù)客戶的企業(yè)形象,選一個(gè)比較穩(wěn)重的藍(lán)色作為主色調(diào)。然后,我把登錄框給“圈”起來(lái),這樣用戶一眼就能看到重點(diǎn)。我還加一些簡(jiǎn)單的動(dòng)畫(huà)效果,讓整個(gè)頁(yè)面看起來(lái)不那么死板。
這一步挺花時(shí)間的,因?yàn)橐紤]的東西太多。比如顏色搭配、字體選擇、圖標(biāo)設(shè)計(jì)等等,都得細(xì)細(xì)琢磨。
設(shè)計(jì)稿出來(lái)后,我給客戶那邊看看,他們提一些修改意見(jiàn)。比如,他們覺(jué)得登錄按鈕的顏色可以再深一點(diǎn),這樣更醒目。然后,他們還希望在頁(yè)面上加上他們企業(yè)的Logo。
我就根據(jù)他們的意見(jiàn),又對(duì)設(shè)計(jì)稿進(jìn)行修改。這一步挺重要的,因?yàn)樵O(shè)計(jì)這東西,很多時(shí)候都是要反復(fù)修改才能達(dá)到最好的效果。
經(jīng)過(guò)幾次修改,最終的設(shè)計(jì)稿終于得到客戶的認(rèn)可。我就把設(shè)計(jì)稿交給前端工程師,讓他們?nèi)?shí)現(xiàn)。等他們把頁(yè)面做出來(lái)后,我還得再檢查一遍,看看有沒(méi)有啥問(wèn)題。
整個(gè)過(guò)程下來(lái),感覺(jué)還是挺有收獲的。雖然只是一個(gè)簡(jiǎn)單的登錄頁(yè)面,但要做好還真不容易。
這回的分享就到這里,希望對(duì)大家有所幫助。以后有啥新的實(shí)踐經(jīng)驗(yàn),我還會(huì)繼續(xù)跟大家分享的!