<button id="awefu"><object id="awefu"><input id="awefu"></input></object></button>

  1. <tbody id="awefu"><noscript id="awefu"></noscript></tbody>
  2. <dd id="awefu"></dd>
    <progress id="awefu"></progress>

    <tbody id="awefu"><noscript id="awefu"></noscript></tbody>

    昆明UI培訓
    達內昆明五一路

    188-5191-7064

    怎樣才能讓設計注冊登錄頁的用戶體驗更好?

    • 時間:2016-11-29 17:46
    • 發布:昆明UI培訓
    • 來源:產品壹佰

    APP的優秀與否,由很多因素決定,而良好的交互細節是每一個優秀APP的共同品質。這篇文章達內昆明UI培訓要詳細說一說注冊登錄頁的細節設計:

    1、美觀的視覺設計

    緊密:通過元素的遠近將相似元素分為一組。

    對齊:通過對齊,規范元素的排版。

    簡約:注冊登錄頁面的背景盡量簡約,從而讓主體信息更加突出。

    對比:將重要的內容放大,增加色塊背景;將相對次要的內容縮小,降低明度等從而使      得信息層級清晰。

    均衡:注冊登錄頁面幾乎都是沿著中心線左右對稱的,信息是左右均衡擺放的。否者會導致頁面不平衡。

    2、對手機號碼進行3 4 4的分布

    這個規則不僅適用于手機號碼,包括銀行賬號、轉賬金額等等。將數字以4或者3為單位分組,有利于用戶閱讀、編輯、校對手機號碼。

    3、彈出相對應的輸入鍵盤:

    點開郵箱輸入框,彈出帶有@的英文輸入鍵盤;

    點開手機號輸入框,彈出九宮格數字輸入鍵盤;

    點開密碼輸入框,彈出英文輸入鍵盤。

    4、用顯示/隱藏icon代替輸入兩遍密碼

    為了確保密碼輸入正確,很多APP需要用戶輸入兩遍密碼來確定密碼輸入無誤,但這無疑增加了用戶的工作量。替代方案是在密碼輸入框右側增加一個“顯示/隱藏icon”,讓用戶在輸入完一遍密碼后可以選擇點開“顯示/隱藏icon”來確保密碼輸入無誤,減少用戶的工作量。

    5、登錄時增加一鍵清空icon

    在登錄的時候偶爾會出現輸入錯誤,如果沒有這個清除的icon,用戶只能按鍵盤中的清除按鈕,需要一直按住直到輸入框空。

    6、清晰的錯誤反饋

    當用戶輸入錯誤信息時,最好利用臨時框的形式提示用戶。而不是不做反應讓用戶自己去猜到底是怎么回事。

    臨時框也有兩種形式,一種是對話框形式,這需要用戶點擊確認才能進行下一步操作。一種是toast形式,彈出一兩秒后自動消失。第一種形式相當于強制中斷了用戶的操作,用戶需要點擊確認才能回到原來的操作流程。而toast則起到了提示的效果,并且沒有打擾到用戶。

    上一篇:產品設計的四大原則
    下一篇:設計師如何獲得設計靈感?

    馬上預約三天免費體驗課

    姓名:

    電話:

    UI設計師:用戶思維,就是上帝思維

    UI設計師應該這樣輸出產品原型

    由標簽導航引發的問題:標簽導航的格局

    達內昆明UI培訓談談團隊文化建設

    • 掃碼領取資料

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    2018最新天堂福视频 2019亚洲福利合集 老司机带带我精品视频 百度 好搜 搜狗
    <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>