行動裝置 App表單設計秘籍:提升表單設計的體驗

來源:互聯網
上載者:User

文章描述:本文將從清晰的視覺縱線、資訊的分組、極致的減法、利用選擇代替輸入、標籤及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校正的小秘密這八個維度來分享我的行動裝置 App表單設計秘籍。

一直想寫一篇文章,關於行動裝置 App表單設計的,可惜最近項目很忙,忙到沒有時間打理部落格。最近體驗產品的時候,經常看到錯誤的的表單設計,要麼資訊混亂,要麼步驟繁複、要麼語言程式化,要麼視覺焦點跳躍,要麼校正順序混亂,要麼反饋不及時,如此種種的問題,讓我很想認真的總結一下,思考一下,為行動裝置 App的表單設計,提供一些個人力所能及的建議,希望更多地設計師能認真思考行動裝置 App表單的特殊性,能最大限度的提升表單設計的體驗,提升效率,提高滿意度。

本文將從清晰的視覺縱線、資訊的分組、極致的減法、利用選擇代替輸入、標籤及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、校正的小秘密這八個維度來分享我的行動裝置 App表單設計秘籍。

一、清晰的視覺縱線

使用者在瀏覽資訊的時候,如果沒有足夠多的強調元素,會從上至下,從左至右的瀏覽,Web端是一個“F”型視線,移動端更經常是“L”型視線(導航和重要操作往往在下邊),那麼如果你的表單的視覺瀏覽順序,符合這個“L”型規律,基本上就符合使用者的心理預期,不需要任何的尋找,任何的思考,就可以簡單高效的執行完表單項的填寫和提交。

這是一個登入表單視覺縱線的例子,使用者先關注到使用者名稱輸入框,再關注到密碼輸入框,然後就自然而然的發現了登入按鈕。

反面的例子很多,比如下面兩個:

第一個反例比較常見,使用者輸入完使用者名稱和密碼之後,直接看到的操作按鈕是註冊,而不是登入,這種左右的布局方式,即便你用顏色區隔,也阻擋不了使用者的視線落到註冊上,於是簡單的眼動測試就可以發現,這時使用者盯著註冊停頓思考一下是在所難免的。

第二個反例則會更加突出一些,因為表單標籤與表單的相關性不是很好,使用者需要先閱讀表單標籤的內容,再閱讀輸入框引導文字的內容,視線一直都是左——>右——>左——>右,這樣已經不夠友好了,最後提交的時候,又需要整個視線平移到右上方去尋找登入按鈕,當然,我並不是在challenge iPhone的設計,如果全域都擁有這樣的操作欄,右上方提交表單項還好,但這也僅適用於鍵盤會遮擋提交按鈕的情況。

[1] [2] [3] [4]  下一頁



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。