登錄注冊的設(shè)計

最近在接觸登錄注冊的設(shè)計，就趁機(jī)整理下這個需求的進(jìn)行步驟~因為涉及到公司的信息，所以我寫的比較簡單，希望從思考的步驟而言有一個整理

需求及確定（賬號系統(tǒng)，風(fēng)險等等）

首先登錄注冊是設(shè)計到賬號系統(tǒng)的，那么首先要確定賬號系統(tǒng)如何連接，是重新做一套還是和名下某軟件合并。像陌陌和哈你直播的賬號基本是共通的。

同時共通的方式有幾點(diǎn)：

1. 只是可以登錄，陌陌的賬號可以用于哈你直播的登錄
2. 是否需要同步信息過去，在整個新軟件設(shè)計的時候需要確定某一部分的數(shù)據(jù)是否要同步過去，比如同樣關(guān)注的人，發(fā)布的消息帖子等等。

確定流程

在確定整個業(yè)務(wù)后，根據(jù)確定出來的去制定整體的流程。比如登錄注冊之后是否必須填資料，還是跳轉(zhuǎn)到哪個頁面呢，根據(jù)不同的情況會有不同的考慮

開始畫原型，畫原型的時候先思考包含的元素，元素的布局

畫出流程圖后，開始考慮涉及到頁面的元素。

比如一個百度的帖子列表頁面，要露出什么元素是最正確的。用戶的頭像、昵稱、帖子的標(biāo)題、摘要、圖片、來自的貼吧、發(fā)帖時間和評論數(shù)?？梢哉J(rèn)真的考慮每一個因素的意義。比如為什么百度貼吧露出了用戶的頭像呢，而不是直接隱藏？UGC的內(nèi)容表現(xiàn)方式有什么不同，比如圖片要幾張才合適，圖片的大小選取怎么才能夠顯得質(zhì)量高？當(dāng)然順便說下，整個首頁展示的機(jī)制是第一步考慮的內(nèi)容，是需要人工推薦還是機(jī)器推薦，算法是什么，根據(jù)哪些元素來定….等等

頁面的布局也是比較重要的。比如登錄注冊的界面，是想突出手機(jī)登錄呢還是第三方微信的登錄，這個在界面布局上區(qū)別很大。比如豆瓣的登錄，首先是采取界面登錄方式，也不是彈框，其次主要突出手機(jī)號和郵箱的登錄，第三方登錄放置于最下方并且顏色不突出。同時如果登錄和注冊流程分開的，就加入“注冊豆瓣”的入口。當(dāng)然，對于采用密碼登錄的方式“忘記密碼”入口必不可少了。

畫原型的時候思考所有需求，想到風(fēng)險、具體注意事項和細(xì)節(jié)，并在原型上完善各種細(xì)節(jié)（包括字?jǐn)?shù)的限制體現(xiàn)，提示的方式，布局的優(yōu)化等）

這一步是凸顯產(chǎn)品的功底了。能不能分析到所有的具體細(xì)節(jié)是最重要的。比如【交互】一個界面涉及到哪些交互，如：登錄注冊頁面點(diǎn)擊輸入框后，可以立即彈出數(shù)字鍵盤；【限制】字?jǐn)?shù)限制是多少字，可不可以填漢字；【細(xì)節(jié)】如下圖，一般手機(jī)號很多，當(dāng)輸入數(shù)字時最右側(cè)都會有“×”的按鈕用于用戶全部刪除；【中間狀態(tài)】登錄按鈕點(diǎn)擊后到登錄成功這個過程中，界面怎么展示；【異常狀態(tài)】如果登錄的時候信息錯誤怎么辦，網(wǎng)絡(luò)異常怎么辦….

在這里，我想要細(xì)節(jié)描述的有兩個細(xì)節(jié)，這兩個細(xì)節(jié)是最近學(xué)習(xí)到的：

1. 提示和警告。提示和警告的方式有多種，不只是能采用文字提示，尤其是在移動端，不同于PC端每一個輸入框后面都可以跟隨提示。同時在移動端，當(dāng)一個頁面輸入框過多的時候，在用戶犯錯后再給予提示，對用戶來說是一件非常麻煩的事情。我們都知道，登錄和注冊會給用戶留下很重要的印象，這個軟件好不好用，靠不靠譜。所以我們一定要保障用戶的行為流暢。而我們可以采取限制字?jǐn)?shù)的方式來提示它，比如昵稱，比如限制8個字，當(dāng)用戶超過8個字時，就不會再顯示到輸入框里，對用戶來說第九個字的輸入是無效的。及時反饋吧~當(dāng)然這只是其中一個好的提示方式了~以后可以多積累
2. 關(guān)于頁面的布局。當(dāng)做個頁面的時候，可以參考很多相關(guān)的競品。比如做頁面改變，可以參考閱讀類的界面分布，登錄界面可以參考很多軟件的分布，找到適合自己模仿的。當(dāng)然這期間不能偷懶的純抄襲，要有自己的想法分析咯~

對了，悄悄說一句，左對齊，右對齊的方式一定比居中好。這個在設(shè)計中可以小小用一下。我之前看《寫給大家看的設(shè)計書》中一個對齊原則就是這么說的，只不過在這次設(shè)計中又犯錯誤了。

關(guān)于需求文檔的寫法

無論是word版的還是原型版的需求文檔包括幾個要素：概述（這個需求叫啥）、用戶場景（包括前置條件）、用例、流程圖、具體需求。

我接觸過兩種需求的書寫方式：

1. word版本的需求是比較系統(tǒng)的，它可能適合的是大的需求。比如一個新的業(yè)務(wù)系統(tǒng)?？梢詫懗鲇脩簟⑦\(yùn)營人員或者客服人員用例、也可以明確整個流程是什么，其中背后需要判斷哪些。
2. 原型的需求是比較適合研發(fā)人員看的，包括概述、主干流程的用例、需求點(diǎn)。若這個頁面有其他拓展需求，則可以簡單寫。我個人覺得原型的需求是根據(jù)原型頁面展開的。如下圖，根據(jù)豆瓣的登錄頁面做得需求：

不管需求是什么形式，所有的情況都是需要產(chǎn)品想清楚的?？赡懿煌?，不同的產(chǎn)品各有側(cè)重。但是產(chǎn)品經(jīng)理的思維本質(zhì)是不變的。怎么寫只是技巧，寫什么才是我們需要一步步踏實地積累的。

本文由 @小夏 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。