當前位置:菜譜大全網 - 素菜食譜大全 - 應用程序頁面提示樣式摘要

應用程序頁面提示樣式摘要

最近做了壹個互動總結,遇到了頁面彈出提示的問題,就總結了壹下。

我根據彈出的提示把它分成了以下幾類。每種風格的提示力度不同,對用戶使用app時的擾動和影響也不同。這些小技巧不是說哪個好哪個不好,只是根據自己的規範選擇壹個合理的。

綜上所述,前三個小技巧的名字大家都很熟悉,但後幾個小技巧的名字都是根據我的親身經歷,不壹定合理,但至少能說明壹些東西。

Action sheet是壹個操作列表,通常用於在當前頁面為用戶提供快速選擇按鈕,用於功能較多的界面和次要功能的存儲。

IOS和Android的動作單顯示風格不同。IOS主要基於眾所周知的半覆蓋浮動層,Android主要基於彈出菜單。(如下圖所示)

上圖是app中最常見的樣式。當然也會遇到壹些其他的風格。例如,adroid中有時會使用半覆蓋浮動層,主要用於與第三方頁面共享。

另壹種情況是選擇菜單與當前選項緊密相關,選擇菜單直接原地展開,當前選項是選擇菜單中的壹項。如下圖,ios的popper風格在左邊,android的卡片菜單在右邊。但在實際應用中,兩個平臺並沒有明顯的區別,壹般都是采用左圖的風格。但是手機屏幕比較小,顯示風格會很碎,所以這種風格在app的實際應用中很少使用。目前在知名app中,微博首頁的分組都是這樣切換的,qq的v6.3.1版本的空間也被帶入了這種設計。

Alert是彈出提示,也叫alert box,用來給用戶提供提示,用戶必須操作後才能進行下壹步。主要用在系統提示用戶操作涉及隱私等非常重要的信息或者後果不可逆的操作流程中。必須給出清晰的操作按鈕,主要表現為以下幾種風格。為了引導用戶的操作,有時會加強壹個按鈕,削弱另壹個按鈕。

Alert打斷了用戶的操作,所以在app中出現的次數要減少,同時也要避免用戶因為出現次數太多而不關註alert。

還有壹個提醒提醒,在使用app的時候經常會遇到,也很煩,就是要求對app的評價進行提醒。這種提醒往往會打斷用戶的操作,如果時機不合適,會讓人覺得很煩。這裏提到它是因為它下面壹般有三個操作按鈕,所以上下排列。相對於左右排列,按鈕之間的間距比較小,所以也增加了操作失誤的概率。因此,壹般來說,應該謹慎使用這種安排。

Toast是浮動層提示,快速為用戶顯示少量信息。

Toast浮動向用戶顯示信息。它永遠得不到焦點,不會影響用戶的輸入和其他操作。它主要用於壹些幫助/提示。常用的有兩種樣式,純文本和圖片。

這種提示風格是最常見的,可以告訴用戶當前的情況,但不會對用戶造成太大的幹擾而擦肩而過。同時這種提示也容易被忽略,所以對於壹些重要的提示最好不要使用這種風格。

這也是壹個常見的提示,主要用於解釋頁面的內容或者輸入框或按鈕的文字。頁面上壹般存在輕小的文字,對用戶操作影響不大,提示性弱。它只是對當前位置的說明,不會影響頁面的視覺焦點。

下圖是支付寶螞蟻花唄首頁。紅框中的文字是對前面描述的進壹步解釋,不會影響視覺焦點。他們將不會看到,直到該金額應在下個月償還。這種提示在輸入界面比較常見,比如註冊界面的密碼規則提示。

頁面頂部有三種提示。這三種提示的嚴重程度不同,場景不同,對用戶的打擾程度也不同。它們是其他技巧的變體。

第壹個,壹直存在於頁面頂部,用於重要提示或者因為沒有網絡而嚴重影響操作的提示。如下圖,沒有網絡時,qq頂部的提示。

第二種,壹個操作錯誤或者壹個頁面內容錯誤,就是從頁面頂部向下滑動,然後馬上消失,這是toast的變種。這種暗示比普通的敬酒暗示更顯眼,更引人註意。

第三種,位於電池條,用於壹些上傳的地方。上傳需要時間,而且要保證APP的流暢度,弱化對用戶的幹擾,甚至把幹擾降到零。比如發布壹個動態,後臺上傳,頂部提示,比較弱,容易被忽略。這種暗示越來越少了。找不到圖片。請允許我ps壹個。

壹般用於首頁,提示壹些重要或者常用的功能,或者提示頁面功能移動。這種提示壹般常見兩種形式,突出重點的力度不同。

如下左頁所示,功能提示比較強,必須點擊提示才能進入下壹步操作。另壹方面,右邊的表單弱很多,所以不影響頁面的操作。當然,也可以從兩者引申出壹些其他的風格,但畢竟有兩種:必看和不看。

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

支付寶手勢密碼錯誤的提示就是壹個很好的例子。通過頭像的縮小和錯誤提示文字的出現,很好的提示了用戶的操作錯誤。最常看到此提示的地方是登錄註冊頁面。當輸入錯誤時,頁面會有細微而精致的變化,同時會很好的提醒用戶。

壹般來說,最常見的提示樣式都在這裏。如有遺漏或更好的提示,稍後更新。同時也歡迎朋友們來砸磚。