免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

APP篩選組件設(shè)計(jì)

2021-05-11    分類: 網(wǎng)站建設(shè)

今天創(chuàng)新互聯(lián)就通過(guò)電商類、視頻類、旅游類、音頻類以及分頁(yè)引導(dǎo)這五種產(chǎn)品的篩選控件,來(lái)看看它們的表現(xiàn)形式與不同產(chǎn)品之間的是否有規(guī)律和聯(lián)系,面對(duì)不同的產(chǎn)品應(yīng)該怎樣去設(shè)計(jì)呢?
一、什么時(shí)候需要篩選控件
篩選組件的作用是幫助人們?cè)诿鎸?duì)大量信息時(shí),通過(guò)更高效的篩選方式提升決策效率,本質(zhì)上是為了幫助用戶能夠更快速的找到自己想要的信息,廣義的篩選組件還包括搜索欄及Tab欄,本文這里暫不分析。
組件包括篩選按鈕與篩選器,篩選器包含類別及各類別下的篩選項(xiàng)。使用頻次高低、篩選條件的數(shù)量都是決定篩選組件樣式的因素。
APP名字下面會(huì)出現(xiàn)你當(dāng)前編輯的文檔名字或者網(wǎng)站地址,可以方便用戶二次確認(rèn)APP里的內(nèi)容。
二、不同的產(chǎn)品使用的篩選形式
1、電商類APP  
電商類產(chǎn)品的篩選器都是以抽屜的形式從tab欄展開篩選條件,表現(xiàn)形式分為以下兩種形式:

APP設(shè)計(jì)

APP設(shè)計(jì)

選擇哪種表現(xiàn)形式呢?我們好好的研究一下,其實(shí)當(dāng)列表頁(yè)出現(xiàn)排序tab時(shí),就已經(jīng)為內(nèi)容做了一層篩選條件,但是大眾點(diǎn)評(píng)、淘寶&京東等電商類APP列表信息內(nèi)容多并且比較復(fù)雜,因此就需要篩選來(lái)讓用戶進(jìn)行更加詳細(xì)且精確的篩選。如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

但是這類產(chǎn)品出現(xiàn)在篩選里的內(nèi)容大多都是平時(shí)關(guān)注頻次很低的一些信息,因此將篩選的按鈕放在了視覺(jué)最薄弱的右端,而同種類型的產(chǎn)品在篩選表現(xiàn)樣式上也有所區(qū)別,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

之前說(shuō)的是以浮層的形式從屏幕最右側(cè)左滑出篩選條件,大眾點(diǎn)評(píng)和餓了么則是從頂部向下展開,我個(gè)人認(rèn)為區(qū)分于這兩種表現(xiàn)形式的差別在于,篩選的條件比較少的時(shí)候就選擇頂部向下的形式,當(dāng)刪選的條件較多,需要滑動(dòng)展示篩選條件則選擇左滑出篩選條件。
同時(shí)由于列表的內(nèi)容比較復(fù)雜,所以都采取半彈窗的形式,視覺(jué)上將篩選放在了最上層的位置。
2、視頻類APP
視頻類的產(chǎn)品就相對(duì)于上面的電商產(chǎn)品簡(jiǎn)單一些,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

篩選樣式同樣使用的是抽屜式,詳細(xì)例子見(jiàn)下圖:

APP設(shè)計(jì)

APP設(shè)計(jì)

上面這些產(chǎn)品所用的篩選器所在的位置也是位于視覺(jué)最薄弱的右端,同時(shí)里面的內(nèi)容都是關(guān)于時(shí)長(zhǎng)和畫質(zhì)的。
而且我們可以注意到,他們的表現(xiàn)形式是搜索結(jié)果下移來(lái)展現(xiàn)篩選器里的內(nèi)容,并不是像上面電商類的出現(xiàn)黑色半透明遮罩出現(xiàn)的浮層。
當(dāng)然也是有例外的,嗶哩嗶哩的篩選器就是采用的遮罩浮層形式,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

我們從圖中可以看出來(lái),嗶哩嗶哩是將篩選器里的內(nèi)容分成了二級(jí)tab欄里,這也說(shuō)明了此產(chǎn)品的篩選功能相對(duì)于上面的三種產(chǎn)品層級(jí)會(huì)高一些,同時(shí)交互形式會(huì)更易操作。
但這也是因?yàn)閱袅▎袅ǖ暮Y選內(nèi)容比較復(fù)雜,“全部分區(qū)”的篩選模塊內(nèi)容信息比較龐大,當(dāng)然這樣的篩選分類方式無(wú)疑比較適合嗶哩嗶哩的,三者的內(nèi)容合成一個(gè)篩選器,勢(shì)必會(huì)增加用戶的思考時(shí)間以及使用成本。
因此在視頻類的產(chǎn)品中,篩選器的內(nèi)容決定了它不同的交互和視覺(jué)表現(xiàn)形式。
3、旅游類APP
旅游類的列表也是屬于比較復(fù)雜的類型,標(biāo)簽都會(huì)放好幾個(gè),因此它的篩選器就相對(duì)來(lái)說(shuō),承載的篩選信息和內(nèi)容,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

我看了目前大部分的主流旅游類的產(chǎn)品,在酒店結(jié)果頁(yè)的篩選器中,表現(xiàn)形式大多都是類似的,黑色半透明遮罩+下拉彈窗,左邊是分類列表,右邊則是列表的詳細(xì)選擇。以下為經(jīng)典代表選手:

APP設(shè)計(jì)

APP設(shè)計(jì)

我個(gè)人認(rèn)為是因?yàn)檫x擇酒店是屬于一個(gè)目標(biāo)性不是很明確的選擇(只住國(guó)際知名五星的除外),而且選擇過(guò)多用戶也不知道如何去選,因此將用戶在選酒店最在意的一些細(xì)節(jié)歸類,快速讓用戶做出選擇,減少選擇的時(shí)間成本。
當(dāng)然也不是所有的旅游類產(chǎn)品都使用的這種表現(xiàn)形式,愛(ài)彼迎的篩選器就是全屏展示,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

除了全屏展示外,也沒(méi)有左邊的大分類,這也是因?yàn)閻?ài)彼迎本身做的就是民宿,因此在篩選器里的內(nèi)容就沒(méi)有上面三種產(chǎn)品多。
但我在找案例的過(guò)程中,發(fā)現(xiàn)了一個(gè)有意思的現(xiàn)象,就是旅游類產(chǎn)品的酒店頁(yè)面和旅游產(chǎn)品的篩選器是不同的表現(xiàn)形式,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

這種情況也出現(xiàn)在攜程與去哪兒,個(gè)人認(rèn)為是因?yàn)槁糜萎a(chǎn)品的選擇目的性更強(qiáng)一些,因此篩選的內(nèi)容比較少,就不需要與酒店業(yè)選擇同樣的表現(xiàn)形式了。
4、音頻類APP
音頻類的產(chǎn)品篩選其實(shí)并不多,因?yàn)橛脩魧?duì)于感興趣的內(nèi)容接受程度比較高,反而對(duì)時(shí)長(zhǎng)、類型等沒(méi)有太多要求,如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

篩選大多都是以編輯推送分類展開,這類設(shè)計(jì)嚴(yán)格意義上來(lái)說(shuō)屬于分類,但是可編輯的分類,我個(gè)人認(rèn)為也屬于篩選的一部分,因?yàn)槭强梢宰约哼x擇推送的內(nèi)容。如下圖所示:

APP設(shè)計(jì)

APP設(shè)計(jì)

這種表現(xiàn)形式視覺(jué)上都比較簡(jiǎn)單,但交互上會(huì)不一樣,網(wǎng)易云音樂(lè)就是自己拖拽,但懶人聽(tīng)書需要點(diǎn)擊編輯才可以。
(鄭重聲明:本文版權(quán)歸海鹽社潘團(tuán)子所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如有侵權(quán),請(qǐng)聯(lián)系我們刪除;如作者信息標(biāo)記有誤,請(qǐng)聯(lián)系我們修改。)

網(wǎng)站名稱:APP篩選組件設(shè)計(jì)
標(biāo)題鏈接:http://m.newbst.com/news34/113184.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供電子商務(wù)、微信小程序外貿(mào)建站關(guān)鍵詞優(yōu)化、手機(jī)網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司