從手機(jī)產(chǎn)品登錄頁面設(shè)計(jì)想到的

一、架構(gòu)設(shè)計(jì)和流程設(shè)計(jì)

創(chuàng)新互聯(lián)建站長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為羅城企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，羅城網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

我一直追求簡單而高效的設(shè)計(jì)，尤其欣賞臭魚這一篇文章《為產(chǎn)品結(jié)構(gòu)的設(shè)計(jì)，為用戶任務(wù)的設(shè)計(jì)》。他用圖1很好的詮釋了這個(gè)觀點(diǎn)：首先要保證產(chǎn)品邏輯結(jié)果清晰、準(zhǔn)確，其次要為用戶任務(wù)架起一些快捷操作的橋梁。

圖1 “產(chǎn)品結(jié)構(gòu)設(shè)計(jì)”和“為用戶任務(wù)設(shè)計(jì)”的關(guān)系

好的流程設(shè)計(jì)能使產(chǎn)品具有更清晰的架構(gòu)，更良好的體驗(yàn)。我的老大曾經(jīng)舉過一個(gè)串珠子的例子，說PM給我們的功能列表都像是一堆零零散散的珠子，而我們要做的，就是把這些珠子串起來，把功能串起來，最后呈現(xiàn)給用戶的才是一個(gè)完整的東西，有著清晰的架構(gòu)和流程。

這話說起來還是有一些抽象，我想嘗試著通過手機(jī)產(chǎn)品登錄界面的設(shè)計(jì)，來跟大家分享我對架構(gòu)設(shè)計(jì)和流程設(shè)計(jì)的思考過程。

二、一個(gè)例子

首先我們來看一個(gè)例子，見圖2：

圖2 一個(gè)小朋友做的登錄界面

這個(gè)頁面非常有代表性，它很像PM提出的需求列表，雜亂的堆在了界面上。先來挑挑問題所在：

文案不太準(zhǔn)確，“帳號密碼”的文案用“密碼”就行了，“登錄賬號”按鈕的文案用“登錄”就可以了，“離線使用”按鈕，他想表達(dá)的是“匿名登錄（不需要賬號、密碼）”。

界面上元素太多，需要分辨哪些是自己需要的

層級關(guān)系不明，沒有一條清晰的任務(wù)主線

沒有考慮到虛擬鍵盤遮擋的問題

相關(guān)操作可以離得再近一些，比如忘記密碼跟登錄按鈕

三、研究一下架構(gòu)

那么我們架構(gòu)上進(jìn)行分析，架構(gòu)上來講，這個(gè)界面，主要有三個(gè)模塊：登錄、匿名和注冊，其中匿名可能有兩種情況，這里表現(xiàn)的是不需要用戶名和密碼的情況，如圖3.

圖3 登錄頁面架構(gòu)圖

我們先來分析一下登錄和注冊這兩個(gè)功能模塊。如果用戶要登錄，那么需要輸入用戶名和密碼，如果用戶希望以后不用再輸入密碼了，可以選擇記住密碼，如果用戶忘記了密碼，那么可以給一個(gè)入口讓他去執(zhí)行找回密碼操作。當(dāng)然，這些如果都是建立在用戶要執(zhí)行登錄操作之后。所以可以把這些元素藏起來。所以，既然登錄和注冊是平級的，那么我們可不可以把這個(gè)頁面設(shè)計(jì)成圖4這樣子呢？

圖4 登錄頁面采用2個(gè)入口的形式，可以選擇登錄或注冊

參考案例是Foursquare和16Fun，見圖5。

圖5 Foursquare的登錄頁面，只有兩個(gè)選項(xiàng)，登錄或者注冊

這個(gè)方案的優(yōu)點(diǎn)非常明顯，就是架構(gòu)清晰，不會有太多的干擾因素，但是缺點(diǎn)也是有的，登錄和注冊兩個(gè)按鈕還是需要區(qū)分一下的，而且這兩個(gè)功能過于平級，在不同的產(chǎn)品階段應(yīng)該有側(cè)重才對，比如新產(chǎn)品上線，要更合理的引導(dǎo)注冊，成熟產(chǎn)品，要突出登錄。

再來看看匿名這個(gè)功能，前文提到，匿名有兩種情況：

1、不需要用戶名和密碼，就可以登錄

2、需要提交用戶名和密碼，但是匿名登錄，不讓別人看到

情況1，既然不需要用戶名和密碼就可以登錄，那為什么還要先進(jìn)入登錄頁面而不是內(nèi)容頁面呢？如果你的產(chǎn)品是側(cè)重于社區(qū)類的，需要用戶登錄的，那么還是要引導(dǎo)用戶登錄，如果你的產(chǎn)品是工具類的、內(nèi)容類的，希望用戶能看到內(nèi)容，那么可以讓用戶直接進(jìn)入到軟件里，先看到內(nèi)容，等需要執(zhí)行一些登錄之后才能進(jìn)行的操作時(shí)，才提示用戶登錄。

情況2，往往是用在論壇、貼吧等需要匿名發(fā)表帖子的情況下，那么我們只需要在發(fā)帖頁面給出匿名發(fā)貼的復(fù)選框就行了，不需要讓用戶在登錄界面就直接選擇了。如果是想登錄某些論壇，卻又不想暴露在線狀態(tài)，則可以在登錄按鈕按鈕上面增加一個(gè)狀態(tài)選擇，如圖6，ＱＱ客戶端。

圖6 iPhone版ＱＱ客戶端，登錄按鈕上方可以選擇狀態(tài)

因?yàn)槲覀冞@個(gè)登錄頁面屬于情況1，所以就把匿名登錄功能從登錄頁面拿掉了。

網(wǎng)站標(biāo)題：從手機(jī)產(chǎn)品登錄頁面設(shè)計(jì)想到的
瀏覽地址：http://muchs.cn/article16/cghcdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、用戶體驗(yàn)、Google、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)