• <input id="wwk4g"></input>
    <menu id="wwk4g"><object id="wwk4g"></object></menu>
  • <input id="wwk4g"><object id="wwk4g"></object></input>
  • MobileUI莫貝網
    • 首頁
    • 文章
      • 設計文章
      • 技術教程
      • 行業視野
      • 職業發展
      • 移動前端
      • 基礎知識
      • 資源分享
      • 信息視圖
    • 欣賞
      • UI庫
      • 靈感
      • 酷站
    • 專題
    • 聯盟
    • 搞機
    • 導航
    • 公眾號 公眾號
    • 移動端瀏覽 移動端瀏覽
    設計師自學之路

    看似簡單的App登錄注冊功能,怎樣做到用戶體驗最佳?
    看似簡單的App登錄注冊功能,怎樣做到用戶體驗最佳?-移動閱讀二維碼

    設計文章 / 產品設計 | 2017-09-08 | 發布者: mobileui

    1494209698-4842-0508

    登錄和注冊功能,不論是PC端還是移動端,大多數產品都會涉及到。而不同的產品邏輯和業務流程,會帶來不一樣的用戶體驗。過去做的大多是后臺產品,面向的是內部用戶,因此在做登錄和注冊功能時,前臺界面相對簡單,主要是后臺的權限管理較為復雜。而最近正在做一款App和一款PC端前臺產品,面向外部的普通用戶,因此在登錄與注冊的產品設計上,需要考慮更多的細節因素。下面把我做產品原型時的一些思考放在下面,供大家討論。

    用戶登錄系統,可以細分為三項功能模塊,分別是:登錄、注冊和密碼找回。下面分別談談我在做這塊的時候一些想法,主要是涉及業務流程。

    一、登錄功能

    1、登錄方式:手機號/郵箱/用戶名+密碼

    現在App常見的登錄賬號是手機號和郵箱,因為這兩類登錄方式便于記憶,且方便找回密碼。但有很多App產品,其實是從其PC端產品衍生而來,它們共用同一套后臺系統,因此需要考慮到一部分過去在PC端注冊的老用戶。所以,雖然由字母和數字組成的用戶名,已經是PC時代的登錄方式,但是在移動端上,也應當提供這樣的選擇。

    如下圖1:

     

    1494209698-7416-0508
     

    2、等待提示:提供“正在驗證”的提示,緩解用戶焦慮

    一般來說,如果產品的后臺能做到快速響應,及時反饋用戶操作的結果,自然是最理想的狀態。但我之前在做其他產品時,碰到過很多次后臺無法及時響應前臺請求的情況,這個時候,用戶可能會面臨一種無所適從的吃瓜狀態。

    比如:用戶點擊登錄按鈕后,后臺響應不及時或是網絡中斷,這個時候,用戶行為可能有兩種:重復提交或者直接退出。永遠不要挑戰用戶的耐心,我就是這樣,每次使用其他產品時,如果提交之后頁面無反應,等待 2 秒之后我就沒有耐心了,對這個產品的印象也打了折扣。為了預防這種情況,建議增加等待提示如,“正在驗證,請耐心等待……”,或更加明確的指令“正在驗證,請不要重復提交”。如下圖2

     

    1494209700-9066-0508
     

    3、錯誤提示:用戶名或密碼錯誤+可試錯次數

    之前看過一篇文章,專門討論怎樣優化登錄功能的用戶體驗。文章里提到,最佳的提示方式是清楚地告訴用戶到底是用戶名錯了,還是密碼錯了,從而引導用戶去修改。這種提示方式固然是將用戶體驗做的很好,但這其中卻隱藏了安全隱患:如果盜用賬號密碼,豈不是成功率更高了?

    所以,我個人還是傾向于提供一個模糊的提示:“用戶名或密碼錯誤”。同時,可以加上一個試錯機會提示,比如“你還可以嘗試xx次”,幫助用戶做到心里有數。當然,如果設置了登錄試錯機制,就需要補充相應的業務流程:當用戶試錯次數用完后,引導用戶“找回密碼”。如下圖3:

     

    1494209701-6715-0508
     

    登錄環節通常涉及到的細節主要是以上這些內容,所以整個登錄的業務流程可以歸納為:①用戶輸入賬號+密碼,點擊提交→②界面提示“正在驗證,請等待”→③界面提示信息錯誤→④用戶再度嘗試,或成功,或重復先前提示。

    二、注冊功能

    1、注冊方式:手機號 +密碼+驗證碼

    App產品在做新用戶注冊的時候,通用方式是用“手機號+驗證碼”,好處顯而易見,快捷便利。我個人也是比較推崇這種注冊方式。但是, 還有很多用戶對用手機號注冊這種方式有所顧慮,擔心自己的信息外泄??紤]到這部分用戶群體的擔憂,我們可以在注冊界面多提供一種用郵箱注冊的方式,但這種方式不作為主要功能突顯,可以放在手機注冊的下方。如下圖4:

     

    1494209701-6115-0508
     

    2、成功提示:激勵用戶

    當用戶提交信息后,一般最省事兒的做法就是直接跳轉到用戶的“個人中心”。這種方式固然沒有什么錯,但是總覺得缺點什么激勵性的東西。我之前在網上預訂了一本限購+預售的新書,真的要搶購才能買到,然后等了好多天終于收到書的時候,里面有一個黑色的信封,信紙上寫著“你是本書的第XXX名讀者”,這樣用戶體驗做的還不錯,至少給我一種安慰和鼓勵的感覺。

    在做App注冊的時候也可以這樣,當用戶注冊成功之后,可以先不著急跳轉到個人中心,而是給用戶呈現一個激勵信息,比如“終于等到你!你是我們第 888 名用戶”這樣的反饋信息,還可以加上簡單的引導按鈕,讓用戶去完善信息,但一定不要給用戶施加壓力,要讓用戶有自由選擇的機會。如下圖5:

     

    1494209702-2535-0508
     

    三、密碼找回

    1、通過手機號重置密碼

    在App上找回密碼,最快捷方便的方式是通過手機號來找回。這個功能分為兩個步驟:第一步是填寫手機號,獲取驗證碼;第二步是在手機上重置密碼。當然,在重置密碼的時候,可以讓用戶通過可見模式來設置,或者增加“確認新密碼”的字段來確保用戶修改正確。如下圖6、7:

     

    1494209699-2884-0508
    1494209700-1563-0508
     

    2、通過郵箱找回密碼

    除了用手機號找回密碼之外,針對部分沒有綁定手機號的用戶,還可以提供用郵箱找回密碼的方式。這種方式需要后臺向用戶郵箱發送郵件,將新密碼告知用戶。如圖8:

     

    1494209703-8201-0508
     

    上面這些內容只是包含了登錄、注冊和找回密碼這幾塊核心的功能,但其實在設計登錄管理系統時,還有諸如第三方登錄、引導用戶綁定手機等其他需求。

    來源:人人都是產品經理

    本文鏈接:http://www.casaleticia.com/app-login-registration-function.html
    本文標簽: 手機, 注冊, 用戶體驗, 登錄
    ← 如何根據你的網站創建一個移動 APP
    互聯網金融體驗設計方法庫 →

    向您推薦:

    • UX寫作:讓UI界面為更好的用戶體驗而發聲
      UX寫作:讓UI界面為更好的用戶體驗而發聲
    • 大產品小細節!5分鐘帶你了解經典的費茨定律
      大產品小細節!5分鐘帶你了解經典的費茨定律
    • 高級設計師來教你寫專業的交互輸出文檔
      高級設計師來教你寫專業的交互輸出文檔
    • 如何更加科學地提高文本可讀性?
      如何更加科學地提高文本可讀性?
    • H5玩法知多少?騰訊實戰案例來告訴你!
      H5玩法知多少?騰訊實戰案例來告訴你!
    • 下個階段的設計師,為什么光做界面肯定是不行的?
      下個階段的設計師,為什么光做界面肯定是不行的?
    • UI設計中插畫那些事
      UI設計中插畫那些事
    • 控制感,給你的用戶體驗加分的3個方法
      控制感,給你的用戶體驗加分的3個方法

    評論功能已關閉。

      • 推薦
      • 熱門
      • 隨機
      • 如何通過練習提升自己?
        如何通過練習提升自己?

        寫在前面 經常遇到很多伙伴咨詢如何去提升專業、練習應該怎么去做、靈感從哪里來等等問題。結合這些問題總結和梳理了一下自己的點滴經驗,希望能幫助到大家,與之共勉。 本文的目的是給剛入行的新人分享個…

      • iPhone X的壁紙居然是這樣制作出來的
        iPhone X的壁紙居然是這樣制作出來的

        每當蘋果公布新的壁紙,總會有人或者手機廠商去模仿蘋果家的壁紙,因為他家的壁紙是真的好看啊。今天我們來學習一下最新的iPhone8和 iPhone x的壁紙是怎樣做出來的? 值得注意的是,…

      • 三分鐘搞清iPhone X 設計尺寸和適配
        三分鐘搞清iPhone X 設計尺寸和適配

        被iPhone X刷了一天屏,到下午實在受不了各種標題寫著“iPhone X 適配、指南、設計稿” 內容卻是發布會回顧和手機介紹的標題黨。索性自己寫一篇只針對iPhone X適配的貼子,與適配無關的內…

      • 從設計指南說起,詳解iOS系統組件分類體系
        從設計指南說起,詳解iOS系統組件分類體系

        @Echo 由于iOS 和 Material Design的組件體系有些不一樣,所以關于組件的分類體系我會分iOS篇和Android篇來講解,本篇文章為iOS 篇。 對于大部分入門設計師及中級設…

      • 20歲到30歲,設計師應該知道的真相
        20歲到30歲,設計師應該知道的真相

        如果你關注過一些取得大成就的人,總會在他的成長故事中發現很多傳奇的經歷,比如少年時代的天賦異稟,或是30、40歲的大器晚成,為了做好某件事的廢寢忘食等等…然后摸摸自己的胸脯說,他們是天才,我只是個普通…

      • PS修圖會嗎?你是美工?還是設計師?
        PS修圖會嗎?你是美工?還是設計師?

        @Micu設計你是美工?還是設計師?你是合格的設計師嗎? 設計工作中最基礎的修圖會嗎?找素材拼圖會嗎? 如果這最基礎都不會,能稱自己是設計師嗎?能漫天要價嗎? 如果有點職業道德,先學會最基礎的修圖,再談設計吧! 一起看看別人是如何將圖片合成的! 第1組:采集素材 完成設計: 第2組: 第3組: 第4組: 第5組: 第6組: 第7組: 第8組: 第9組: 第10組: 第11組: 第12組: 第13組: 第14組: 第15組: 第16組: 第17組: @Micu設計投稿,自 weibo

      • APP切圖那點事兒–詳細介紹android和ios平臺
        APP切圖那點事兒–詳細介紹android和ios平臺

        從2011年開始接觸APP,到現在為止也做了幾個了,發現了一個共同點就是和每一個技術搭檔切圖的時候,會遇到不同的問題,因為技術的水平高低有限,所以他們要求你給切圖的時候也會不一樣,針對切圖后來我總結了一套規律分享給大家,希望互相學習~ 相關閱讀: 設計師需要掌握的圖片原理與優化技巧 Android設計中的.9.png 切圖小貼士 一.android版 在做android版本設計的時候,尺寸有很多種,這時我們要以一種尺寸為基準,那這個基準尺寸是480px*800px,設計圖完成之后就開始切圖了,我拿我之前設計的一張圖為例子講解下: ? 當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以后少改動,建議切圖之前最好和技術先溝通下,怎么切); 1、底部欄目的icon和背景: ? 這個一般有2種切法:(有默認和選中之后的效果) ? 2、頂部欄目的背景切圖: 由于頂部導航欄的是漸變樣式,所以切圖只需要切一小條,技術來平鋪拉伸就可以~(PS:如果是花紋背景,就必須切整條了,因為花紋切一小條就會被拉伸了~) 3、標注文字大小和行間距:(以這張圖為例子,我標注好了,請看下圖) 需要注意的: A:android主要有3種屏,即: QVGA和WQVGA屏density=120; HVGA屏density=160; WVGA屏density=240; B:apk的資源包中, 當屏幕density=240時使用hdpi標簽的資源 當屏幕density=160時使用mdpi標簽的資源 當屏幕density=120時使用ldpi標簽的資源; C:我們標注的是PX,但是技術的算法是DP,所以需要PX和DP進行轉化,PX和DP的轉化主要跟密度有關系,當密度density=160即(屏幕尺寸:320*480)時,1PX=1DP;當密度density=240即(屏幕尺寸:480*800)時,1PX=0.75DP;當屏幕的尺寸大于480*800的時候,密度都按照240計算即可;當密度density=120即(屏幕尺寸:240*320)時,這個現在幾乎沒有人用了,所以我也不知道轉化公式,如果您知道,可以留言告訴我啊~? 注意:因為我們做的是基于480*800尺寸的,大家都知道android的尺寸太多了,要想適配現在流行的尺寸,比如:640*960;720*1280等,唯一的解決辦法就是圖標可以根據不同尺寸各做一套,也就是圖標需要做480、640和720共3套圖標,不過如果你們的產品的要求不嚴格,做一套就可以,只不過是在大于480尺寸的屏幕上有些圖標被拉大變虛而已~ 二.ios版 在做ios版本設計的時候,尺寸有3種,分別是:320*480、640*960、640*1136;這時我們要以一種尺寸為基準,那這個基準尺寸是640px*960px,設計圖完成之后就開始切圖了,我拿我之前設計的一張圖為例子講解下: ? 當看到上邊這張設計圖的時候,我們首先分析下應該給技術切哪些圖(為了避免以后少改動,建議切圖之前最好和技術先溝通下,怎么切); 1、底部欄目的icon和背景: ? 這個一般有2種切法:(有默認和選中之后的效果) ? 2、頂部欄目的背景切圖: ? 由于頂部導航欄的是多顏色的,所以只能切一整條給技術,商圈的圖標要單獨切出來 ? 3、二級標題欄目的切圖: … 繼續閱讀 →

      • 初級設計師如何踏上自學之路(周陟設計隨筆)
        初級設計師如何踏上自學之路(周陟設計隨筆)

        周陟?(@UCDChina 深圳負責人、交互設計專業委員會(@IxDC)部長) :我發現一個問題,大部分剛入行或者經驗不多的設計師在碰到問題的時候都喜歡”索取”,最好有個現成的東西放那兒給他供著。這暴露了我們設計師群體一個嚴重的現狀——自學能力的欠缺。 我上次提到設計師的三大素質(我自己覺得是這樣,也是招人的時候重點考察的),這次就專門聊聊自學能力的問題,與各位打拼靠自己的朋友共勉。 作者還有一篇很有意思的分享:普通UI設計師與頂級UI設計師的區別是什么? 什么是設計師的自學能力? 我們對自學能力的理解是從上學的時候建立的,但那個時候的”自學能力”相對單純,無非也就是如何通過自己看書、做題,復習到達熟練記憶,以便應付各種苛捐雜稅式的考試。 但進入設計行業后,這個自學能力不僅僅限制在”了解知識、復述知識”的范圍,設計師要學習各種軟件,學習如何尋找靈感,學習如何與客戶溝通,學習怎樣規劃自己的行業前景……這種交叉性的自學要求會成為很多人的屏障。并且,很難定義一個所謂的”自學能力”的量化目標。 就我個人理解,設計師的自學能力是使用合適的時間、方法、資源達到獨立的、正確的解決問題的能力。 如何才能有效的自學? 你細心的話,應該注意到上面我的用詞,這些關鍵點就是有效自學的途徑。在設計這個行當,光努力是不夠的,我們不只是要強調效率,也要強調效能?;剡^來看,你們學校歷史中是不是總有那么幾個無論如何努力都始終分數不高的貨色? 首先是合適的時間; 如果一件需要花時間的學習任務超出了你的時間成本,你就不應該去碰它,或者換一個更好的方式,比如:你現在是一個從事了8年平面設計的設計師,你覺得目前做動畫的收入高,你希望通過自學動畫,然后跨行到這個領域,那么未必是最好的選擇,首先你的8年的平面經驗幾乎沒有再升值的空間,其次作為一個新人,也許你還要3年的等待,好死不死,你的腦子不錯,等到你學有所成,動畫行業又是另一個新的天地了。 正確的方法是重要的; 方法不僅是你練習的方式,還有思考問題的方式,這里強調的是設計師快速發現問題的能力,只有準確的了解需要自學的領域的難度、行業標準、設計思路、應用形態,你才知道從何入手; 比如:你想自學網頁設計,并把網頁視覺設計師作為自己的職業發展,你就應該首先了解,一個網站的基本結構,每個結構需要哪些工作崗位,他們的職責有何不同,一個網站視覺設計師應該干什么,抓住重點(而不要一開始去學什么HTML代碼,那不是你最該關心的,我這話是說給某個朋友聽的)。 資源指的是任何能夠讓你了解到所需知識的平臺; 基礎的東西先看維基和google,然后去書店翻一翻行業著作,然后下載一些軟件的學習版知道你要使哪些工具,這些都是你的資源,如果湊巧你還能找到一些資深的從業人士咨詢就更好了,但是要提醒的是,別人沒有義務回答你,所以你先要準備好自己的問題。 獨立性決定了你在自學途徑中對自己的要求;你善于堅持的品質是你能夠成功通過自己的努力達到目標的前提條件,在你周圍沒有更多的資源可以利用的時候,你只能靠自己不斷的練習,思考。我發現要求很多設計師練習沒有問題,要求他們思考卻很難,自學的過程中,”想”永遠是最關鍵的。 自學不是萬能靈丹 你的性格不適合自學。這是正常的,有部分朋友他們的性格天生就是依賴性強,缺乏主見,在遇到困難的時候選擇逃避,那么這樣的性格想完全通過自學來達到一個”好高騖遠”的目標是不太可能的。你需要選擇一個付費的培訓機構或者老師,通過一些外部的壓力,讓你有所提高。 除了自學還應該參與交流。交流當然是重要的,通過交流可以達到解惑的效果,有個前提需要注意,你要和別人交流,別人也需要知道值得和你交流,因此你要有所儲備,交流既然是平等的也就需要基礎,別以菜鳥之心度老鳥之腹,既冷了場又露了怯。 自學的技術必須轉化為實際項目。你的自學有可能是為了自我提升,自我積累設計經驗,但如果是為了解決實際問題,那么你自學的成績就必須經過實際項目的檢驗,比如:你學習了一些新的交互設計的工作技巧,那么在你自己從事項目的時候你就應該爭取機會導入進去,否則到頭來,你也只是做了一嘴的好交互。 “人一定要靠自己”,說的不是拋棄階級感情和團隊協作,而是面對困難和障礙的時候,往往只有你自己才是靠得住的。缺乏自學能力的設計師,從性格與技能上都會落于下風,因此請不要讓自己”被飛”的日子來得太早。 原文出處:《閑言碎語:周陟設計隨筆》,感謝作者的無私分享,推薦童鞋們閱讀原著,受益無窮 : )    

      • iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程
        iOS APP設計一稿支持iPhone5/iPhone6/Plus設計流程

        移動app開發中多種設備尺寸適配問題,過去只屬于Android陣營的頭疼事兒,只是很多設計師選擇性地忽視android適配問題,只出一套iOS平臺設計稿。隨著蘋果發布兩種新尺寸的大屏iPhone 6,iOS平臺尺寸適配問題終于還是來了,移動設計全面進入“雜屏”時代??纯聪旅嫒頸Phone尺寸和分辨率數據就知道屏幕有多雜了。 加上Android生態中紛繁復雜的各種奇葩尺寸,現在APP設計開發必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設計稿解決適配大中小三屏的問題?設計和開發之間采用什么協作模式?一個基本思路是: 1、選擇一種尺寸作為設計和開發基準; 2、定義一套適配規則,自動適配剩下兩種尺寸; 3、特殊適配效果給出設計效果。   手機淘寶的iPhone 6/iPhone 6 Plus適配版本即將提交App store審核。先曬一下我們采用的協作模式,再慢慢說明原委。 第一步,視覺設計階段,設計師按寬度750px(iPhone 6)做設計稿,除圖片外所有設計元素用矢量路徑來做。設計定稿后在750px的設計稿上做標注,輸出標注圖。同時等比放大1.5倍生成寬度1125px的設計稿,在1125px的稿子里切圖。     第二步,輸出兩個交付物給開發工程師:一個是程序用到的@3x切圖資源,另一個是寬度750px的設計標注圖。   第三步,開發工程師拿到750px標注圖和@3x切圖資源,完成iPhone 6(375pt)的界面開發。此階段不能用固定寬度的方式開發界面,得用自動布局(auto layout),方便后續適配到其它尺寸。   第四步,適配調試階段,基于iPhone 6的界面效果,分別向上向下調試iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏適配。   為什么選擇iPhone 6作為基準尺寸? 當面對大中小三種屏幕需要適配的時候,很容易想到先做好一種屏幕,再去適配剩下兩種屏幕。第一個決定是到底以哪種屏幕作為設計和開發的基準尺寸。我們選擇中間尺寸的iPhone 6(750px/375pt)作為基準,基于幾個原因:   1、從中間尺寸向上和向下適配的時候界面調整的幅度最小。375pt下的設計效果適配到414pt和320pt偏差不會太大。假設以414pt為基準做出很優雅的設計,到320pt可能元素之間比例就不是那么回事了,比如圖片和文字之間視覺比例可能失調。   2、iPhone 6 plus有兩種顯示模式,標準模式分辨率為1242×2208,放大模式分辨率為1125×2001(即iPhone 6的1.5倍)??梢姽俜较到y里iPhone 6和iPhone … 繼續閱讀 →

      • 通俗易懂!全面的移動端尺寸基礎知識科普指南
        通俗易懂!全面的移動端尺寸基礎知識科普指南

        初涉移動端設計和開發的同學們,基本都會在尺寸問題上糾結好一陣子才能摸到頭緒。我也花了很長時間才弄明白,感覺有必要寫一篇足夠通俗易懂的教程來幫助大家。從原理說起,理清關于尺寸的所有細節。由于是寫給初學者的,所以不要嫌我啰嗦。 現象 首先說現象,大家都知道移動端設備屏幕尺寸非常多,碎片化嚴重。尤其是Android,你會聽到很多種分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640×960, 640×1136, 750×1334, 1242×2208。 不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁,在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規律可循。 像素密度 要知道,屏幕是由很多像素點組成的。之前提到那么多種分辨率,都是手機屏幕的實際像素尺寸。比如480×800的屏幕,就是由800行、480列的像素點組成的。每個點發出不同顏色的光,構成我們所看到的畫面。而手機屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320×480,iPhone 4s的屏幕像素是640×960。剛好兩倍,然而兩款手機都是3.5英寸的。 所以,我們要引入最重要的一個概念:像素密度,也就是PPI(pixels per inch)。這項指標是連接數字世界與物理世界的橋梁。 Pixels per inch,準確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度,等于2.54厘米,大約是食指最末端那根指節的長度。像素密度越高,代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多,就是因為它的像素密度翻了一倍。 倍率與邏輯像素 再用iPhone 3gs和4s來舉例。假設有個郵件列表界面,我們不妨按照PC端網頁設計的思維來想象。3gs上大概只能顯示4-5行,4s就能顯示9-10行,而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示,3gs上剛剛好的效果,在4s上就會小到根本看不清字。 在現實中,這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導航欄,在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小,反而和3gs效果一樣了。畫質卻更清晰。 在以前,iOS應用的資源圖片中,同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣,有的不帶。其中不帶@2x的用在普通屏上,帶@2x的用在Retina屏上。只要圖片準備好,iOS會自己判斷用哪張,Android道理也一樣。 由此可以看出,蘋果以普通屏為基準,給Retina屏定義了一個2倍的倍率(iPhone 6plus除外,它達到了3倍)。實際像素除以倍率,就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同,它們的顯示效果就是相同的。 Android的解決方法類似,但更復雜一些。因為Android屏幕尺寸實在太多,分辨率高低跨度非常大,不像蘋果只有那么幾款固定設備、固定尺寸。所以Android把各種設備的像素密度劃成了好幾個范圍區間,給不同范圍的設備定義了不同的倍率,來保證顯示效果相近。像素密度概念雖然重要,但用不著我們自己算,iOS與Android都幫我們算好了。 如圖所示,像素密度在120左右的屏幕歸為ldpi,160左右的歸為mdpi,以此類推。這樣,所有的Android屏幕都找到了自己的位置,并賦予了相應的倍率: ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] xhdpi [2倍] xxhdpi [3倍] … 繼續閱讀 →

      • 教你從3方面提升設計效率(內含神器)

        最近明明(人家真叫明明)和我抱怨說:老大總是說我設計東西慢,效率低,真是煩死了,要知道設計的好又快的東西這個世界上是沒有的!然后發

      • 如何創建自適應系統來增強用戶體驗

        譯者注: 普適運算這個概念已經在計算機行業提出了很久。 在設計領域, 隨著便攜式智能設備的發展與普及, 越來越多的設計師也將這個理念融入到

      • 當企業產品遇上用戶體驗

        一般人對於企業產品的預期,可能僅停留在功能要強大,信息要安全,能夠幫助企業提高工作效率。但今時已不同往日,除此以外,人們開始更注重

      • 側邊抽屜式導航可能會降低你產品一半的用戶參與度

        設想你需要設計一個含有許多頁面和模塊,不能在一屏內顯示完全的應用。你一定會首先想到去設計一個底部或頂部的Tab導航。等一下,多出來的一排

      • iOS教育平臺iPad界面設計

        iOS教育平臺iPad界面設計

    • 專題

      • 設計師找工作的那些事
        設計師找工作的那些事
      • 設計師自學之路
        設計師自學之路
      • 你應該要學會的設計溝通
        你應該要學會的設計溝通
      • 有關文字在移動端的那點事
        有關文字在移動端的那點事
    • 資料

      • 界面設計尺寸文章匯總
      • Sketch中文版手冊
      • 《iOS Wow Factor》全書譯文精選
      • Material Design 中文版

      標簽更多標簽

      UI UI設計 交互 交互設計 產品設計 原型 團隊 圖標 圖標設計 工作 工具 應用 應用軟件 扁平化 手機界面 智能手機 用戶 用戶體驗 用戶界面 界面 界面設計 移動互聯網 移動應用 移動端 移動設備 網站 視覺 視覺設計 設計 設計師
      致設計

      薦書更多推薦設計書籍

      • Android應用UI設計模式
        Android應用UI設計模式 本書介紹了58種必不可少的交互設計模式
      • 設計之下
        設計之下 搜狐新聞客戶端的用戶體驗設計,講述移動APP設計全過程的書籍
      • 品味移動設計
        品味移動設計 iOS、Android、Windows Phone用戶體驗設計最佳實踐
      • 用戶體驗要素
        用戶體驗要素 認識這些要素、戰略層、范圍層、結構層、框架層、表現層
      • UI進化論:移動設備人機交互界面設計
        UI進化論:移動設備人機交互界面設計 涵蓋交互設計與界面設計的基本概念、設計規范和工作流程
    • 莫貝網微信訂閱號,www.casaleticia.com

    最新文章

    • 如何利用網格系統科學地打造APP界面?
      如何利用網格系統科學地打造APP界面?

      在視覺設計師設計一款APP的時候,最先要制定一套完善可行的設計規范,其中會詳細定義顏色、文字、圖標、...

    • 在這些因素的制約之下,才能選取出科學的配色方案
      在這些因素的制約之下,才能選取出科學的配色方案

      Tubik Studio :我們的日常生活中總是面臨著無盡的選擇,大量的挑戰。設計的決策也是如此,一...

    • 你設計的圖標,能順利通過圖標的可用性測試嗎?
      你設計的圖標,能順利通過圖標的可用性測試嗎?

      在業務迭代周期內,產品經理和設計師對要做的產品需求和功能點進行需求分析和設計討論的過程中,有時會出現...

    關于我們

    • 莫貝網(www.casaleticia.com)移動設備界面設計專業網站。為UI設計師提供手機界面設計,移動應用界面設計,平板電腦界面設計,導航界面設計等手持移動設備,移動終端界面設計相關知識的收集分享,共同學習的網站。
    關注微博: 新浪微博 騰訊微博

    搞機市集

    粵ICP備12009933號 Copyright ? 2011-2022 MobileUI莫貝網 - 手持移動設備界面設計專業網站
    關于 聯系 投稿 免責聲明 贊助廣告 網站地圖
    古装无遮挡一级毛片,完整欧美一级婬片免费看,chinese mon@熟女
  • <input id="wwk4g"></input>
    <menu id="wwk4g"><object id="wwk4g"></object></menu>
  • <input id="wwk4g"><object id="wwk4g"></object></input>