DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 以登錄/注冊表單為例的用戶體驗設計
以登錄/注冊表單為例的用戶體驗設計
編輯:關於網頁技巧     

在移動端產品設計上,一個應用是否足夠友好不僅僅取決與其自身的功能對用戶是否足夠友好,而也應該考慮這個應用對其他應用是否友好,當用戶在調用這個應用去完成其他應用的時候他們是否會發生沖突

只是說一個在手機端小的交互細節而已。

在Web端做表單設計設計師考慮更多的事情是表單的布局方式、表單的提示語言、表單的長度、甚至表單的判定狀態。這些東西有無數的人寫了無數的文章。但是在手機端,對於表單的設計似乎沒見太多的討論。即使有討論,設計師們也把目光集中在了如何精簡表單上,但是對用戶輸入的關注卻很少。

在移動端產品設計上,一個應用是否足夠友好不僅僅取決與其自身的功能對用戶是否足夠友好,而也應該考慮這個應用對其他應用是否友好,當用戶在調用這個應用去完成其他應用的時候他們是否會發生沖突。

得益與android生態的足夠“開放”,android上存在著很多輸入法應用;受利與android系統的足夠“包容”,android上的輸入法可為千奇百怪,輸入法應用程序的界面高度也百怪千奇,應用開發者們照例要為這些開放買單。於是,設計師們在做需要調出輸入法進行相關表單操作的頁面的時候又多了一項課題——如何不讓提交按鈕和輸入表單被軟鍵盤遮擋……

以登錄/注冊表單為例,從Google自身開始,這個問題就存在,不管是其自帶的輸入法軟鍵盤還是第三方輸入法軟鍵盤。一般來講,用戶的操作流是:找到輸入框——點擊彈出軟鍵盤——輸入——點擊下一個輸入框——輸入——尋找按鈕提交——沒找到,於是搜索屏幕——哦,在屏幕的最右下角——點擊完成,把軟鍵盤放下去——點擊按鈕提交。

這個流程中,很多小白用戶直接迷失掉,很多老用戶也很郁悶的每次長途奔襲一次去把軟鍵盤關掉…..

那解決方式呢?

1、將提交按鈕挪到右上角。這樣雖然不是很符合用戶的視線流,但是相比長途奔襲到頁面右下角的話稍有改善

2、將提交按鈕設置成固定“懸浮”與軟鍵盤上方,這樣當用戶填寫完表單之後能夠最快速的找到提交按鈕。但是也會有2個問題,視覺上如何跟軟鍵盤的顏色做區隔,不給用戶的輸入造成干擾。Twitter在android上的解決方式較為可取,同時Gowalla讓整個頁面隨著軟鍵盤的打開而上滑的做法也不錯。

另外,在android上常見的需要輸入簡單內容的表單可以采取彈窗的方式完成。彈窗的形式相當於在一個新的界面上只有輸入框和軟鍵盤了,相對而言可操作區域變大,用戶的視覺有所聚焦。不過,這種彈窗方式不太適合常表單的做法,比如android自帶的這個Wifi連接表單就杯具了…..

其實,在iphone的應用設計上也會存在這個問題,但是沒有android嚴重。而iphone系統本身也試圖教育用戶利用軟鍵盤右下角的“Join”按鈕及其變種來完成表單提交的,不過,過多的小白用戶還是一樣迷茫….隨著iphone機器的普及,這種用戶會越來越多,也許是時間該考慮一下他們了

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved