中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

從注冊這點小事兒上看如何提升細節設計和用戶體驗，希望對一些新入行的童鞋有所幫助。

互聯時代的產品都離不開：

直白點就是什么樣的環境下？為哪些人？提供了哪些事情的解決方案？

場景

PC：室內的＋相對沉溺的＋長時間的

Mobile：隨時隨地的+碎片化的＋隨時轉身離開的

用戶

產品定位的受眾人群，可以是學生、孕婦、求職、買賣……，比如招聘類的目標受眾就是需要找工作的群體；房租中介類就是需要租賃、買賣房屋的群體等等。

任務

幫助這些受眾完成他們想要得到事務的一種邏輯流程。

比如我們可以在某寶上：搜索想要的商品－鎖定－下單－收貨－評價，這就是一套購買流程，提供了用戶網絡購買流程的解決方案。

這里我們就用戶注冊這一場景，淺談設計任務及其背后對思維邏輯，然后去提升細節設計。

到達注冊頁面的途徑

用戶到達一個app的注冊頁面一般有4種渠道：

當網易音樂的第一批用戶從豆瓣平移過來之后，用戶就不再是大家的了。贏取一個新用戶比維護一個老用戶的成本要高很多，所以當用戶來到了注冊界面作為設計師就要盡可能到創造舒適的用戶體驗，盡可能多的幫助用戶注冊登錄。

信息構架及任務流程

信息構架

就是包涵哪些信息，這些信息是怎樣穿插在一起的。

注冊模塊概括來說由2部分組成：用戶信息＋驗證。用戶信息包括但不限于：

• 手機號碼
• 郵箱
• 賬號
• 姓名
• 性別
• 興趣

……

然后再由不同產品的定位決定類別的從篩選到簡化。

驗證碼：是一種區分用戶是計算機還是人的公共全自動程序，防刷、防黑、防灌水之類的程序行為。

被廣泛采用的有：短信驗證碼、動態驗證碼組成。

任務流程

可以分為邏輯流和頁面流，邏輯流就是數據邏輯針對開發編寫，頁面流可理解為頁面的跳轉關系針對用戶。

簡單以去哪兒的注冊流程中的輸入手機號和驗證碼為例：

下面是我們呈現給用戶操作的頁面流

下面是介于頁面流的邏輯判斷

控件的狀態

注冊場景下涉及的控件一般是：輸入框、按鈕、驗證碼。

輸入框

供用戶輸入信息，一般包含：提醒文案、正文、示措提醒

按鈕

引發即時操作，即當用戶點擊后，觸發即時操作。作為基礎控件之一，按鈕廣泛應用于不同平臺的所有產品中。通常位于一個或一系列操作的底部或右方。

按鈕的一般狀態：

PC：normal、hover、down(pressed)、disabled

Mobile：normal、onclick、disabled

這里簡單說一下disabled。從去哪兒注冊的例舉可以看出，當input為空時，關聯按鈕為disabled的狀態，這是采用了放錯的原則：如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點擊），以避免誤按。

產品中的辯證法與相對論

學會用辯證法，去分析問題。在產品道路上同樣適用，有時候得到就意味著失去，用辯證法的方法看問題，利于分析事情的二面性，衡量其利弊，進而找到真正適合自己產品的合適的方案。

拿動效舉個例子，動效本身并沒有錯，但是一個龐大的產品就不宜使用過多的動效，原因：

1. 因為動效會加重系統負擔；
2. 為了不斷延長其生命力需要不斷的版本迭代，很可能一些辛苦設計開發出來的動效隨著產品的發展方向而被很快淹沒；
3. 最為重要的一點，對于用戶而言動態的更易于吸引注視，動效的增加會使原本復雜的頁面更加復雜化，更難于找到頁面的重點內容而失去操作方向，事實上這個時候動效已經轉變為一種打擾。

很遺憾，這個觀點沒有找到合適的案例進行分析，淘寶、京東、美團等在動效方面都表現得比較安靜。

下面是一個天氣app的頁面，因為app本身很簡單，就是展示天氣而已，動效的增加不僅動態的解釋了天氣的狀況也讓原本單調的頁面多了一絲趣味，而用戶也并不會因為動效的加入而迷失。這就是相對論，簡單的事務可以做些復雜的處理。

同樣是列表，淘寶為什么在頁面中沒有采用一些動態的展示or特效，設計欠缺？開發不夠？答案是否定的。淘寶營造的購物場景應該是盡量沉溺于頁面流中的，盡快的找到用戶想要的商品，順利的轉化購買，相信這也是作為電商的本質目的。復雜的事情簡單化。

下面我們來欣賞一些按鈕的微交互

設計背后的邏輯思維

隨著時間流逝，科技發展，人們對事物認知不斷提高，注冊場景下的設計也不斷進步。揣摩變化，思考邏輯，提升細節設計。

PC互聯期

（請忽略內容，僅觀察表現形式）

首先明確的是，注冊頁面被設計出來的目的是希望用戶能夠填寫信息并成為我們的用戶。但是，當用戶看到這樣的一張信息較多的頁面，視覺壓力和逃避心理就來了。

除了視覺和心理壓力，我們還可能會被每一行的必輸提醒而吸引，不過行行必輸，行行提醒有點過，視覺干擾也就來了。

費茨(Fitts)定律告訴我們，當我們需要觀察的2個事物距離越遠時，所需要的時間就越長。

人眼閱讀的軌跡順序從1-8，這種排列方式受標題字符數的制約。有了排序參考，大家就可以考試是不是還有其他更好的排列方式？

相對于上面的注冊信息，這種拆解信息的方式不管是視覺還是心理感受都會一些，而且對用戶必填信息進行了提煉。這種方式后也被應用于移動端。但是拆解步驟不宜過長，否則用戶會失去耐心而中途放棄注冊，這是我們不愿看到的。

移動互聯期

從人隨網走到網隨人動，用戶體驗收到前所未有的重視，涌現出大量的專業設計和體驗設計師。對于產品注冊信息的提煉由多樣逐漸走向結構簡單、信息簡潔，以用戶為中心的設計越來越被更多人接受。

下面來看下別人家的注冊頁面及設計思路。

淘寶的注冊流程相對來說是比較長的。必填項：手機號、驗證碼、會員名、密碼＊2，有防錯機制，有號碼&用戶名2次確認。但是第一次支付密碼輸入頁面沒有自動彈出鍵盤。不過整個跑下來還是挺輕松，復雜的事情簡單做，困難的事情分解做。

攜程的注冊流程較簡單，必輸項：手機號、驗證碼、密碼。無防錯機制。2/3中有已輸號碼再現，不過卻隱藏了中斷部分。揣測隱藏的號碼的目的是保護用戶信息不受偷窺？不過以個人愚見，在注冊環境，保證用戶正確的輸入信息，快速的完成注冊才是NO.1的任務，所以這里的防保護機制會有些買櫝還珠的感覺。

還有一點，激活輸入頁面時，鍵盤都沒有彈出，需要點擊input框調出鍵盤。

但是提示文案相比下引導性較強。

美團的注冊流程里，在電話輸入上作了放錯，然后就后面就沒有然后了。有防刷機制，比如當連續輸入2次經系統檢測為已注冊的用戶時，會彈popup要求人or機驗證。對于輸入號碼有部分顯露。注冊第3部界面中的小尖頭有誤導用戶后面仍有流程的誤導。

去哪兒體驗是相對好的，必輸項：手機、驗證碼、密碼＊2，有防錯機制，有密碼6位數提示展示。

蘇寧的注冊流程，必須項：手機號、驗證碼、密碼，有防錯機制，但是允許你同樣的號碼再次注冊，代價就是抹掉所以數據，從v5變成v0。這樣來看，對于形同手機注冊的提示文案還是不夠的。

下面分享一下個人小案例及背后的思考，場景：注冊；輸入項：手機＋驗證碼＋注冊btn

當時的第一版就是左側的，也是比較保守的，不出錯的。視覺線：填寫手機號－看一眼驗證碼輸入框－點擊驗證碼按鈕－回來輸入驗證碼－點擊注冊。在這個過程中，驗證碼輸入框被2次閱讀，當時覺得這是一種浪費，所以出了右邊的方案。視覺線是直了：輸入手機號－點擊驗證碼－輸入驗證碼－點擊注冊，但是從手機號到驗證碼跳了一行，思路會突然斷一下，再著一按鈕直接沖在最前嗎有點突兀。

那怎么樣才能視覺線和思路保持一致呢？發現僅是一小步，將驗證碼按鈕上移到輸入手機一行，這樣在用戶輸完手機號碼時，看到驗證碼很自然就會點擊，然后輸入完成操作。當然“除非有更好的選擇，否則就遵從標準”。

說到手機號碼，有意看了下蘋果在電話數字上的處理，雖然比起銀行卡只有11位的數字，還是在不同場景下都做了分段處理，不得不說蘋果的體驗越來越細膩。當然這是更多的為了識別他人的號碼。

雖然用戶輸錯自己號碼的幾率是比較低的，但是一般來說，用戶輸入完畢后都會快速秒掃檢查號碼的正誤，如果我們采用了分段的現實方法，識錯上應該會容易些。

總結

看了這么多案例，那么我們在設計注冊頁面的時候怎么去思考呢？

1. 了解設計場景，設計目的。也許我們投入了很多資源做引流，當用戶到達這個頁面時，想盡辦法留住他們。
2. 學會站在不同產品的立場分析別人的設計思路，而不僅僅是視覺表現。
3. 視覺簡單，邏輯通暢。
4. 目前大部分的注冊流程為分解的形式及一站式，結合產品實際場景選擇適合自己產品的，盡可能的簡化信息、縮短流程，提升注冊達成率。
5. 對于交互對象的多層次視覺呈現，比如文案提醒、示錯、驗證提醒，按鈕的響應反饋，都是提升用戶體驗的小細節。
6. 在對象對齊及排列方式，學會依靠一些定律，法則，可以是我們在迷茫不定的時候，看輕方向。
7. 不斷學習、思考、對比，提升自己對事務的認知。

只有理解設計背后的思緒才能提升細節設計，也只有明確了設計場景和設計目的才能在不同的設計方案中找到最合適的那個。

就像買一件衣服，我們總會盯著線頭、走線、針眼、紐扣、鎖邊這些點以此來評價一件衣服的品質，界面已是如此。經得起推敲的設計才是好設計。

本文僅筆者觀點，不到之處歡迎大家溝通指正。

最后分享一下筆者在設計過程中的思考三步法則：

1. 為什么要做這個事情？
2. 怎么去做？
3. 還有沒有更好的解決方法？

“小是最偉大的關懷”2016和大家共勉。

作者：湖湖 ?途牛UED

本文由 @湖湖 原創發布于人人都是產品經理。未經許可，禁止轉載。