歡迎來(lái)到深圳市志博科技有限公司網站!
您當前的(de)位置:深圳APP開發 > 新聞資訊 > APP開發資訊 >
人(rén)
已閱讀

談一談APP彈框的(de)一些設計準則

來(lái)源:lexintech.com       發布時(shí)間:2017-08-19
        彈框,是在APP開發中經常會碰到的(de)。彈框的(de)類别一般分(fēn)爲以下(xià)幾個(gè):
  1.系統自動彈出的(de)提醒
  2.幫助用(yòng)戶快(kuài)速的(de)做(zuò)出選擇
  3.對(duì)用(yòng)戶的(de)操作給予反饋
  4.廣告。
  在說之前,先來(lái)給這(zhè)幾個(gè)類别定個(gè)清晰的(de)術語:
  系統自動彈出的(de)提醒 -- 系統提示
  幫助用(yòng)戶快(kuài)速做(zuò)選擇 -- 操作引導
  對(duì)用(yòng)戶的(de)操作給予反饋 -- 信息反饋
  廣告 -- 廣告彈框
 
  一、系統提示
 
  其實系統提示這(zhè)一種彈框,就可(kě)以寫很長(cháng)的(de)篇幅,但是爲了(le)不把大(dà)家越帶越深,免得(de)邏輯理(lǐ)不清,所以我說幾個(gè)相對(duì)重要的(de)。
  有一種是大(dà)家見得(de)最多(duō)的(de),就是評分(fēn)類彈框。這(zhè)種自動彈出的(de)提醒,每次都會讓我有想卸載App的(de)沖動(就是那種無法克制的(de)沖動,不知道你們懂(dǒng)不懂(dǒng)那種感覺)。
  這(zhè)類彈框,需要遵守的(de)四個(gè)設計準則:
  1.不要在用(yòng)戶第一次登錄就立馬出來(lái)。别人(rén)都沒用(yòng)你産品,你就要别人(rén)評價,是想怎麽樣?
  2.注意彈框的(de)頻(pín)率。别一會就彈一會就彈的(de),彈出魚尾紋怎麽辦。
  3.專門定個(gè)入口。有些用(yòng)戶确實人(rén)品不錯,他(tā)會在使用(yòng)之後去給産品評價,所以留個(gè)這(zhè)樣的(de)入口,層級可(kě)以深一點,讓用(yòng)戶自己去操作,會更好。
  微信直接在頁面裏留個(gè)評價入口。雖然層級深,但是總比一直彈框提醒和(hé)幹脆取消這(zhè)種彈框提醒的(de)方式要好得(de)多(duō)。要記住,用(yòng)戶想要評價自然會去做(zuò),如果不想,你做(zuò)得(de)多(duō)了(le)反而會有負面效果。
  4.老生常談的(de)四個(gè)字:注意美(měi)化(huà)。想要讓自己産品在同行業中脫穎而出,在功能做(zuò)的(de)較好的(de)前提下(xià),要展示出與衆不同的(de)特色。
  小紅書(shū)在這(zhè)方面做(zuò)得(de)還(hái)是很不錯的(de)。當然還(hái)有很多(duō)其他(tā)的(de),我就是正好看到他(tā)們家的(de),大(dà)家可(kě)以借鑒下(xià)。多(duō)思考思考,有時(shí)候細節真的(de)是可(kě)以決定成敗的(de)。
       用(yòng)了(le)四個(gè)點來(lái)說明(míng)這(zhè)類彈框的(de)設計方法,我把它們稱作爲系統提示類的(de)彈框設計四大(dà)準則。當然還(hái)有系統會提醒用(yòng)戶是否接收推送消息等等,這(zhè)些彈框都是系統提示類彈框,這(zhè)裏就不多(duō)說了(le)。隻要遵守這(zhè)四個(gè)準則,設計思路都是一樣的(de)。

      二、操作引導
  這(zhè)類彈框,也(yě)有四個(gè)設計準則:
  1.注意出現的(de)頻(pín)率。如果是自動彈出做(zuò)引導,那必須注意頻(pín)率,它們一般在下(xià)載之後第一次打開應用(yòng)才會出現。
        2.文案要簡潔明(míng)了(le)。有些彈框很有趣,出現的(de)文案讓你不知道該選擇什(shén)麽,其實明(míng)明(míng)就兩個(gè)選項。
  3.按鈕的(de)主次之分(fēn)。這(zhè)個(gè)準則正好可(kě)以用(yòng)在上面那個(gè)圖上。顔色或字體的(de)粗細都是可(kě)以進行區(qū)分(fēn)的(de),要學會引導用(yòng)戶,去做(zuò)你想讓他(tā)做(zuò)的(de)事情。
  4.美(měi)觀依然重要。
  在設計操作引導類的(de)彈框時(shí),遵守這(zhè)四個(gè)準則,設計出來(lái)的(de)彈框一定不會差。
 
  三、信息反饋
  信息反饋類的(de)彈框相信大(dà)家經常會有看到,隻是印象不深,因爲這(zhè)個(gè)彈框給人(rén)一種好像不存在的(de)感覺,但是實際上是存在的(de)。
  那麽這(zhè)類彈框同樣也(yě)有四個(gè)準則:
  1.提供一個(gè)小動效,如菊花。爲什(shén)麽呢(ne)?因爲這(zhè)類反饋彈框都會讓用(yòng)戶等待,所以要跟用(yòng)戶産生互動,讓用(yòng)戶知道現在已經在加載,而不是卡住了(le)。如果實在懶,不想做(zuò)圖片動效,那來(lái)個(gè)省略号動效也(yě)行吧。
  2.讓用(yòng)戶選擇關閉。不知道你們有沒有遇到一種情況,就是點擊了(le)某個(gè)按鈕之後會有加載,然後不知道爲什(shén)麽就是加載不出來(lái),速度非常緩慢(màn),一直在轉菊花,然後點哪裏都沒反應,隻有一層黑(hēi)色蒙版的(de)背景,結果隻能退出應用(yòng)重新打開它。是不是很煩?所以提供一個(gè)關閉按鈕,絕對(duì)是非常合理(lǐ)的(de)。
  3.文案簡潔明(míng)了(le)。一個(gè)信息反饋類彈框,千萬不要有多(duō)餘的(de)文字,有些App爲了(le)彰顯獨特的(de)個(gè)性,非要來(lái)一些非主流的(de)文案,說實話(huà),用(yòng)戶一點都不關心。不要把時(shí)間浪費在這(zhè)類所謂的(de)“細節”上,意思明(míng)确且簡單是最好的(de)。
  4.美(měi)觀,還(hái)是那麽重要。
  反饋信息類彈框的(de)設計較爲簡單,也(yě)沒那麽多(duō)篇幅,但是如果要細說還(hái)是有很多(duō)内容了(le),這(zhè)裏就不延展開來(lái)討(tǎo)論了(le)。隻要遵守這(zhè)四個(gè)準則,基本能完成這(zhè)類彈框的(de)設計了(le)。
 
  四、廣告彈框
最後一類,這(zhè)是最近常看到的(de)一類,它存在于各類彈框中,當然也(yě)包括系統提示、操作引導、信息反饋。有些産品的(de)彈框是爲了(le)廣告而彈,這(zhè)也(yě)是很常見的(de)。來(lái)看看出現最多(duō)的(de)一類:
  有時(shí)候外賣點完會讓你分(fēn)享紅包,這(zhè)類彈框是非常典型的(de)廣告類彈框。還(hái)有很多(duō)其他(tā)的(de),不過今天我先說說這(zhè)一種。也(yě)是一樣,廣告類彈框的(de)設計也(yě)需要遵守四個(gè)準則:
  1.廣告内容明(míng)确,主體不要偏。做(zuò)過平面設計的(de)同學都知道,每次領導來(lái)一個(gè)需求,要求你設計一張banner或者海報之類的(de)物(wù)料,恨不得(de)把所有東西都擺上去,顯得(de)内容豐富(其實我們都知道,low爆了(le))。但是在設計App廣告彈框時(shí),必須要記住,你要宣傳的(de)東西得(de)很清晰,很明(míng)确。
  2.按鈕設計要突出。想要讓用(yòng)戶使用(yòng)你宣傳的(de)東西,就幹脆點,别小家子氣的(de)來(lái)幾個(gè)小按鈕,然後内容特别多(duō),你是要讓用(yòng)戶看還(hái)是讓用(yòng)戶用(yòng)呢(ne)。何況一個(gè)彈框就那麽一點大(dà)小,真要說很多(duō)的(de)話(huà)就專門留個(gè)路口給用(yòng)戶好好介紹下(xià)。
  3.優化(huà)文案。
  4.還(hái)是美(měi)觀。
 
  很多(duō)團隊都認爲彈框就是一個(gè)提醒,有就好了(le),不用(yòng)在意這(zhè)麽多(duō)。但是一個(gè)App的(de)好壞就在這(zhè)裏能看出。彈框是交互設計中非常重要的(de)一個(gè)點,這(zhè)類設計不僅考驗交互設計師的(de)綜合能力,也(yě)能從産品看出整個(gè)團隊的(de)整體水(shuǐ)平如何。這(zhè)就是一個(gè)細節,但是細節往往決定成敗。

APP開發 網站開發 産品設計 微信公衆号 APP開發公司 用(yòng)戶體驗 APP運營 微信小程序 産品經理(lǐ) 網站設計