• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 詳細解析移動端拇指碼字那點事兒—- 其他教程




    教學主題: 詳細解析移動端拇指碼字那點事兒

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 詳細解析移動端拇指碼字那點事兒

    這教學的重點為這幾點 [ 移動,解析,詳細,用戶,登錄,密碼,輸入,APP,一個,註冊 ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    什麼樣的登錄過程不會讓人厭煩,今天ME網易移動設計的同學從手機碼字這件小事上,聊聊他觀察到的那些優雅的登錄體驗,以及一些反人類的糟心過程,以此對照。

    什麼樣的登錄過程不會讓人厭煩,今天ME網易移動設計的同學從手機碼字這件小事上,聊聊他觀察到的那些優雅的登錄體驗,以及一些反人類的糟心過程,以此對照。

    詳細解析移動端拇指碼字那點事兒

    如果說互聯網改變了人類的生活,那麼移動互聯網則改變了人類的習慣,它讓用戶扔掉鍵盤和鼠標,隨時隨地在一個巴掌大的屏幕上聊天、視頻、訂機票酒店、購物等。如今的移動互聯網已經把用戶慣壞了,隨着功能的增多和用戶體驗的增強,想象着一個陽光明媚的周日,拇指族們足不出戶的窩在床上和朋友聊天、看電影、訂餐、購物甚至收發郵件和工作,懶惰讓他們的脾氣越來越浮躁,會因為一個細節的體驗不好而分分鐘吐槽你的設計。他們懶得輸入太多內容,因為手機屏幕實在是太小了,小到他們只願意點擊和滑動,好像這樣就能不消耗卡路里一樣,也許他們的未來和下一代已經不會記得如何打字,那時候的高科技手機也許成為了一個徹頭徹尾的秘書,動動嘴巴就能幫你做好你想要的一切,這並不是一個遙不可及的夢想。

    不可否認的是,科技的發展和用戶體驗的改善確實是讓用戶沉迷和依賴移動互聯網的原因,也是設計師們工作的動力。但移動端因為屏幕尺寸受限以及交互方式的差別,使得其一些功能還遠不如在PC端更方便,其中最大的一項就是輸入,今天我們通過分析一些在輸入上體驗良好的設計來給我們今後的工作一些參考。

    登錄的必要性

    登錄就好比一個APP大門外的守衛,如果你真的有公事要辦,那麼進門查崗和登記是有必要的;可你要是憋了一泡尿,只想進去上個廁所,此時守衛還要你出示身份證,你恨不得直接撒在他身上然後再暴打他一頓。登錄的目的基本上有兩種:①需要帳號來獲取用戶數據並使用一些基本功能如跟貼、評論等(例如Facebook、新浪微博、網易新聞)②需要將數據同步到不同設備和平台(例如印象筆記)。說到這兒,就不得不說說有些個產品經理,為了那點可憐的KPI和用戶數據,硬將自己的產品加上登錄的功能,殊不知因為登錄將多少用戶阻擋在你的產品之外。很多APP的開機引導頁最後一幀,都是大大的一個登錄按鈕,有些稍微有點良心的APP會把“直接進入”顯示出來,不過是小到肉眼難見、手指難點擊,這種感覺就好像去政府辦事被官員們耍了一樣。

    當一個產品成熟了之後,登錄是必不可少的功能,此時登錄出現的時機就很重要,如果你的APP沒有牛到像Facebook和Twitter賬號人人都熟知,也沒有像微信和QQ那種有着非登錄不可的功能,那就在用戶有需求的時候再登錄吧,少一個頁面的輸入就減少了一道門檻,也留住了更多的用戶。

    被迫害妄想症的發明 —— 輸入兩次密碼

    最初PC端的帳號註冊都是需要輸入兩遍密碼的,因為密碼都是隱藏的,擔心因為不小心按錯鍵而導致輸入和心中記憶的不同,就輸入第二遍進行確認,這樣確實能避免手誤,不過由此帶來的問題是,沒有手誤的人要輸入兩遍相同的密碼,真正手誤的人不知道是第一遍不對還是第二遍不對,只能無比抓狂的刪掉密碼,重新小心翼翼的輸入兩遍密碼。

    詳細解析移動端拇指碼字那點事兒

    我沒有翻看歷史,不知道這種兩遍密碼的功能是誰因為什麼原因發明的,我猜想是一個有被迫害妄想症的人,擔心他輸入密碼的時候旁邊有人偷窺,於是把密碼隱藏,然後因為看不到密碼怕自己輸入錯誤,順手加了兩遍驗證……這功能一定是電腦還沒有在家庭普及的時代發明的,人們在公共場所使用電腦,不可避免會擔心陌生人的偷看。可如今電腦是一個多麼隱私的物品,無論是家庭還是辦公室,大家都有自己隱私空間,已然不需要如此隱藏密碼,更何況是手機,手機本身隱私性就更高,屏幕大小也有限,不想被人看到就用手擋一下或者躲開他們,也就是被迫害妄想症的人才會在手機端也要堅持兩遍驗證密碼的功能。每每看到這些APP的註冊需要輸入兩遍密碼,我的狂躁症簡直要犯了!

    詳細解析移動端拇指碼字那點事兒

    一個好的設計並不是完全照搬PC端的功能和設計,而是要考慮適合移動端應用的場景,如上述所說,在移動端使用兩遍驗證密碼是沒有必要的,無疑增加了移動端輸入的成本。蘋果iOS系統的輸入鍵盤會在點按下后變大,這本身就能讓用戶感知輸入的正確性,同時在輸入密碼的時候先顯示輸入的字母再快速轉換成隱藏的黑點,也能幫助用戶檢查輸入的正確性;而一些體驗更優雅的APP則會為用戶提供顯示密碼的功能,默認不顯示,當用戶需要確認密碼是否輸入正確的時候再點擊顯示,這樣即避免了偷窺,又防止了輸錯,也減少了兩次輸入的成本。一些APP甚至在此功能上做了很好玩的隱喻,例如tumblr用睜眼和閉眼的icon來表示顯示和隱藏密碼,bingo!向一切美好的細節體驗設計致敬。

    詳細解析移動端拇指碼字那點事兒

    詳細解析移動端拇指碼字那點事兒

    誰說登錄非要輸入

    當你的APP需要登錄,但你恰好沒有公眾認知的一套賬號體系時,拉下臉授權接入下那些熟知的第三方帳號不代表降低了你的登錄和註冊數,反而會讓用戶更加快捷的完成登錄並開始使用你APP的功能。不要覺得委屈,因為你不夠牛逼,用戶從來沒在你這兒註冊過,他們也不需要再多記一個帳號,有更好的選擇誰不願意呢?!

    第三方帳號登錄的好處是你的手機中已經有一些現成的登錄信息,你只要獲取授權就可以,不用輸入任何用戶名和密碼,有些權限高的可以將你在其他APP中的昵稱頭像生日學校血型等一併拿過來,這些個人資料要是自己填可真令人討厭啊!

    那麼問題來了,登錄頁面到底要怎麼布局?如何在突出自己帳號系統的同時展示第三方登錄按鈕?答案是,將用戶最想要的信息呈現在最重要的位置。有些APP扭扭捏捏,用第三方登錄還要弱化顯示,恨不得讓自己的帳號登錄亮瞎用戶的眼,快選我快選我(⊙o⊙),事實上你是否做過用戶調研,是否能理直氣壯的證明這樣第三方登錄的點擊率就降低了?相比之下我更喜歡直接凸顯第三方登錄的設計方案。

    詳細解析移動端拇指碼字那點事兒

    詳細解析移動端拇指碼字那點事兒

    既然有登錄,就會有退出登錄的需求。大部分APP退出登錄后再次登錄的頁面和最初登錄一樣,沒有幫助用戶記錄用戶名,這着實是一個不能稱作好的設計,不管你是什麼原因,減少用戶信息的輸入會讓用戶覺得再次登錄好像沒有那麼困難,尤其是中國的用戶,他們的用戶名可能是不好打出來但自己覺得酷酷的中文,也可能是國際范兒的中英文結合,更有可能是一些90后流行的顏文字等,沒有人想再重新輸入一遍。而且對於大部分非社交APP來說,賬號並沒有非常重要的隱私性,登錄主要是為了方便使用其中某些功能,這時候哪怕記住用戶名和密碼都不為過。例如雅虎新聞APP,退出登錄后,會記住所有在該設備上登錄過的用戶名和密碼,再次登錄只要選擇想要登錄的帳號就行,十足方便。

    詳細解析移動端拇指碼字那點事兒

    目前很多主流的國外APP都已經接入了1password登錄,1password是一個幫助你管理所有賬號密碼的APP,它的好處是在你重裝APP或者多設備登錄的時候幫你一鍵登錄,前提是你將該網站的帳號密碼存入1password。

    詳細解析移動端拇指碼字那點事兒

    註冊是在考驗用戶的耐心

    如果你真的不接入授權第三方帳號,或者你的用戶是個死忠,他非要註冊你的產品,那麼首先得恭喜你!但是不要覺得用戶走到了這一步就能妥妥的註冊成功,也許下一步他就會發怒卸載掉你的APP,簡單且體驗良好的註冊頁面非常重要。試問看到如下behance的註冊頁面,不管他的APP裡面內容有多麼好,我都進行不下去,而且會抓狂。暫不說Adobe的帳號有多麼小眾,這麼多的表單是在查我的戶口嗎?!

    詳細解析移動端拇指碼字那點事兒

    註冊的目的是建立一個帳號,這個帳號是以後你使用網站或者APP的憑證,簡單來說,用戶名(郵箱)和密碼就夠了,先讓用戶成功的註冊,能夠正常使用功能,至於什麼昵稱頭像生日,用戶想完善他自己就去找了,用不着你來操心,如果你不是社交類型APP,這些完善功能你甚至都不需要。下圖中Booking的註冊界面非常乾淨簡潔。

    詳細解析移動端拇指碼字那點事兒

    當然如果是社交網站,是需要填寫一個用戶名或者昵稱的,這時候對於昵稱重複性的檢測也是必不可少的,大部分產品只會提示“昵稱被使用”,用戶能做的是換一個昵稱,非常不幸的是可能昵稱仍舊被使用,因為對一個有成千上百萬用戶的產品來說,你所想到的昵稱別人也早想到了,與其這樣不停的試,倒不如給用戶一個參考,因為有些用戶對名字無所謂,他們想要的是快速註冊完成。

    Flickr的註冊頁面在我填完姓名之後自動匹配給我用戶名,暫不說為毛要填這麼多表單,如果不喜歡,可以點擊左右按鈕去更換;輸入密碼的時候會實時提示我密碼的強度,這樣的好處是及時反饋及時修改,不會等到所有都填寫完成點擊註冊時再告訴我一堆錯誤。

    詳細解析移動端拇指碼字那點事兒
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 詳細解析移動端拇指碼字那點事兒 這教學會喜歡

    文章標題: 骨子愛創意- 詳細解析移動端拇指碼字那點事兒–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 移動,解析,詳細,用戶,登錄,密碼,輸入,APP,一個,註冊

    本文永久連結 :詳細解析移動端拇指碼字那點事兒

    本文轉載自 :VIA