APP頁面提示樣式小總結

zxnq7138 8年前發布 | 8K 次閱讀 移動設計 移動開發

最近做交互總結,又碰到了頁面彈窗提示的問題,于是便總結了下。

我按彈窗提示的樣式分為了以下幾種來進行說明。每種樣式的提示強度不同,對用戶在使用app時的打擾與影響也不同。這些提示并不是說哪種好哪種不好,按照自己的規范選擇合理的就好。

以下總結,前三個提示的名稱是大家習以為常的,但后面幾個的命名是以我個人的經驗來命的,不一定很合理,但至少可以說明點問題。

Action sheet

Action sheet 即為操作列表,通常用于在當前頁面給用戶提供快捷的選擇按鈕,用在功能較多,對次要功能進行收納的界面中。

Action sheet的IOS與Android的展示樣式有所不同。IOS主要是以我們所熟知的半覆蓋式浮層,而Android以彈框菜單為主。(如下圖)????????

上圖是app中最常見的樣式了,當然也會遇到一些其它的樣式,如在adroid中有時也會用到半覆蓋式浮層,大多是用于分享到第三方的頁面。

還有一種情況是選擇菜單與當前選項關系比較緊密,選擇菜單直接原地展開,當前選項為選擇菜單中的一項。如下圖左邊是ios的popper樣式,右邊是android的卡片菜單。但在實際應用當中,兩個平臺并沒有很明顯的區分,一般就通用成左圖的樣式了。但手機屏幕比較小,用這咱展示樣式會很界面顯得比較碎,所以在app的實際應用中,這種樣式很少用到。目前大家熟知的app中,微博首頁的分組用了這種方式切換,還有qq的v6.3.1版本的空間也帶入了這種設計。

Alert 即為彈框提示,也叫警示框,用于向用戶提供警示,用戶必須進行操作后才能進行下一步操作。主要用于系統向用戶提示操作后涉及隱私、及其他非常重要的信息或后果不可逆的操作流程中。必須給出明確的操作按鈕,主要以以下幾種樣式展現。為了引導用戶操作,有時會強化某按鈕,弱化另一按鈕。

alert打斷用戶的操作,因此應減少其在app中的出現次數,同時也避免出現過多導致用戶對alert不重視。

還有一種alert提醒,在使用app時經常遇到的,同時也是很另人生煩的,那就是要求對app評價的alert。這種提醒,往往會打斷用戶的操作,如果出現時機不恰當,會讓人產生很厭煩的感覺。這里提到它,是因為它下方的操作按鈕,一般有三個,所以上下排列,這咱排列相較于左右排列,按鈕間的間距比較小,所以也加大了操作失誤的機率。所以一般情況下慎用這種排布方式。

Toast

Toast即為浮層提示,快速地為用戶顯示少量的信息。

Toast浮動顯示信息給用戶,它永遠不會獲得焦點,不影響用戶的輸入等操作,主要用于一些幫助/提示。常用的有兩種樣式,純文字的和帶圖的。

這種提示樣式是最常見的,能夠告訴用戶目前的狀況,但又不會對用戶造成太多的干擾,一帶而過。同時這種提示也是比較容易被忽略掉的,所以對于一些比較重要的提示最好不要用這種樣式。

頁面文字提示

這也是一種比較常見的提示,主要用于對頁面內容或是某個輸入框或按鈕進行說明的文字。一般以淡而小的文字存在于頁面上,對用戶的操作影響比較小,提示性比較弱,僅僅是對當前位置的說明,不會影響頁面的視覺焦點。

如下圖是支付寶螞蟻花唄的首頁,紅框中的文字是對前面描述的進一步說明,不影響視覺焦點,看下月應還金額時才會看到它們。在輸入界面這種提示比較多見,如注冊界面密碼規則的提示語等。

頁面頂部的提示

位于頁面頂部的提示,有三種樣式,這三種樣式表達的輕重性不一,所用場景不同,對用戶的打擾程度也不同,是其它提示樣式的一種變體。

第一種,一直存在于頁面頂部,用于重要的提示或是沒網這種嚴重影響操作的提示。如下圖,沒有網絡時,qq頂部的提示。

第二種,操作出錯或是頁面內容出錯是從頁面頂部滑下,之后馬上消失,是toast的一種變形。這樣的提示比普通toast提示更顯眼些,更能引人注意到。

第三種,位于電池條的位置,用于一些上傳的地方,上傳需要時間,又要保證APP的流暢性,削弱對用戶的干擾,甚至把干擾減少至零。如發布動態時,后臺上傳,在最頂部提示,這種提示更弱,很容易被忽略掉。這種提示也越來越少見了,沒找到圖片,請允許我ps亂入一張。

頁面上的新功能提示

一般用于第一次出現的頁面,提示一些重要或是常用的功能,或是頁面功能搬家的提示。這種提示一般常見的一有兩種形式,突出重點的強弱性不同。

如下圖左邊的頁面,功能提示比較強,必須點擊掉提示才可進入下一步操作。而右邊的形式就弱了好多,可看可不看,不影響頁面的操作。當然這樣的功能說明的提示還可以從二者延伸出一些其它樣式,但終歸也就是必須看和無須看兩種吧。

特殊提示

通過頁面的變化進行的提示,不影響頁面的整體布局,同時在用戶操作的地方提示,不容易被忽略。

支付寶的手勢密碼錯誤的提示是個很好的例子,通過頭像的后退縮小,錯誤提示文字的出現,很好的提示了用戶操作的錯誤。最常見到這種提示的地方還有登錄注冊頁面,輸入錯誤時,頁面出現細小而精致的變化,同時很好的提醒用戶。

大體上最常見的提示樣式都在這了吧,如有遺漏或是有更好的提示,后續更新。同時也歡迎小伙伴們砸磚。

 

來自:http://www.jianshu.com/p/3dc14c3733d4

 

 本文由用戶 zxnq7138 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!