從月薪3000到月薪30000，設(shè)計(jì)師更該專(zhuān)注什么

學(xué)習(xí)UI設(shè)計(jì)培訓(xùn)的人很多，但是方向基本都是應(yīng)用UI和游戲UI。下面我們分別來(lái)談?wù)剝烧叩膮^(qū)別

‘==’和‘===’都是Javascript中的比較運(yùn)算符，都是比較運(yùn)算符兩邊是否相等。對(duì)于‘==’和‘===’的區(qū)別，大家也都知道：

  ‘==’僅僅是比較運(yùn)算符兩邊的數(shù)值是否相等，如果數(shù)值相等則返回true；‘===’不僅會(huì)判斷運(yùn)算符兩邊的數(shù)值是否相等，并且還會(huì)判斷兩邊的類(lèi)型是否相等，只有數(shù)值和類(lèi)型都相等才會(huì)返回true。雖然知道以上的判斷依據(jù)已經(jīng)能解決絕大數(shù)此類(lèi)問(wèn)題，但是如果往其中深究來(lái)說(shuō)，會(huì)有同學(xué)問(wèn)：在比較的時(shí)候‘===’先判斷類(lèi)型，如果類(lèi)型不同就直接返回false，這個(gè)沒(méi)什么問(wèn)題。但是如果是‘==’比較兩個(gè)不同類(lèi)型的數(shù)據(jù)時(shí)，具體是怎么進(jìn)行計(jì)算判斷的呢？

 既然是不同類(lèi)型進(jìn)行比較，肯定最終參與比較的結(jié)果必須是同一個(gè)類(lèi)型的，因此JS會(huì)存在一個(gè)隱式轉(zhuǎn)換的問(wèn)題，并且很多JS的隱式轉(zhuǎn)換很難通過(guò)console.log()等方法直觀的觀察到，因此很多初學(xué)者會(huì)對(duì)JS的隱式轉(zhuǎn)換感到疑惑。

 首先讓我們回憶一下，咱們的JS中一共有哪些數(shù)據(jù)類(lèi)型？

       六大數(shù)據(jù)類(lèi)型
       基本數(shù)據(jù)類(lèi)型（簡(jiǎn)單數(shù)據(jù)類(lèi)型）
       number 數(shù)值型(NaN)
       string 字符串
       boolean 布爾型
       undefined 未定義
       null 空引用
       引用數(shù)據(jù)類(lèi)型（復(fù)雜數(shù)據(jù)類(lèi)型）
       object

       JS基礎(chǔ)中，我們學(xué)習(xí)到咱們的JS中一共有六種數(shù)據(jù)類(lèi)型，分為基本數(shù)據(jù)類(lèi)型（簡(jiǎn)單數(shù)據(jù)類(lèi)型）和引用數(shù)據(jù)類(lèi)型（復(fù)雜數(shù)據(jù)類(lèi)型），不同類(lèi)型的值進(jìn)行比較的時(shí)候，存在隱式轉(zhuǎn)換的問(wèn)題，咱們通過(guò)‘==’來(lái)驗(yàn)證一下JS隱式轉(zhuǎn)換的情況。

       1.我們首先來(lái)看看下列的語(yǔ)句計(jì)算結(jié)果：

console.log(NaN==true);//false
console.log(NaN==false);//false
console.log(NaN==0);//false
console.log(NaN==1);//false
console.log(NaN==NaN);//false

       由上面的例子可以看出，NaN屬于Number數(shù)據(jù)類(lèi)型中一個(gè)特殊情況，如果‘==’兩邊同為Number數(shù)據(jù)類(lèi)型的數(shù)字，很直觀的可以看出值是否相同一眼就可以看出結(jié)果，但是作為Number類(lèi)型的特殊情況，NaN在進(jìn)行比較的時(shí)候，也會(huì)有特殊的結(jié)果：如果 x 或 y 中有一個(gè)為 NaN，則返回 false；

       2.我們繼續(xù)看看下列的語(yǔ)句計(jì)算結(jié)果：

console.log(null == undefined); //true(特殊情況)---------------------------------
console.log(null == ''); //false
console.log(undefined == ''); //false

      在上述例子中，引出了一個(gè)null，null是一個(gè)簡(jiǎn)單數(shù)據(jù)類(lèi)型，它的意義就是一個(gè)空應(yīng)用，但是你如果通過(guò)console.log(typeof null) 來(lái)打印結(jié)果的時(shí)候卻發(fā)現(xiàn)，結(jié)果竟然是object？此時(shí)你可能會(huì)懷疑人生，然后瘋狂的翻閱之前學(xué)習(xí)的資料，因?yàn)閛bject明明是一個(gè)復(fù)雜數(shù)據(jù)類(lèi)型，怎么會(huì)在判斷null這個(gè)簡(jiǎn)單數(shù)據(jù)類(lèi)型的類(lèi)型時(shí)打印出來(lái)呢？其實(shí)，這個(gè)問(wèn)題屬于一個(gè)歷史問(wèn)題。咱們學(xué)習(xí)的JS在發(fā)展過(guò)程中是通過(guò)ECMAScript來(lái)確定規(guī)范的，每年都會(huì)有新的規(guī)定和規(guī)范提出，在JS的發(fā)展過(guò)程中，null一開(kāi)始的作用就是用來(lái)指向一個(gè)空地址，讓開(kāi)發(fā)者在創(chuàng)建數(shù)據(jù)的時(shí)候，先用null賦值給還未給值的對(duì)象用于標(biāo)準(zhǔn)初始化。但是其實(shí)咱們開(kāi)發(fā)過(guò)程中很少用到，但是這個(gè)仍作為規(guī)范留了下來(lái)。又因?yàn)閠ypeof是根據(jù)數(shù)據(jù)的前幾位判斷數(shù)據(jù)類(lèi)型的，null相當(dāng)于空指針，前幾位是地址的格式，所以判斷結(jié)果就為object。又因?yàn)閡ndefined值是派生自null值的，因此ECMA-262規(guī)定對(duì)他們的相等測(cè)試要返回true。所以這一情況判斷的條件為：如果 x 與 y 皆為 null 或 undefined 中的一種類(lèi)型，則返回 true（null == undefined // true）；否則返回 false（null == 0 // false）；

       3.請(qǐng)看下列例子：

console.log(true == '123'); //false
console.log(true == '1'); //true
console.log(false == '0'); //true
 
console.log(true == !0); //true
 
console.log([] == []); //false
console.log([] == ![]); //true 比較地址 ------------------------------------------------
var a = c = [];
var b = [];
console.log(a == b); //false
console.log(a == !b); //true
console.log(a == c); //true
 
console.log(Boolean([]) == true); //true
console.log(Number([]) == 0); //true
console.log(Number(false) == 0); //true

       其實(shí)比較的邏輯為：如果 x,y 類(lèi)型不一致，且 x,y 為 String、Number、Boolean 中的某一類(lèi)型，則將 x,y 使用 Number 函數(shù)轉(zhuǎn)化為 Number 類(lèi)型再進(jìn)行比較；

      使用Number函數(shù)可以將其他的數(shù)據(jù)類(lèi)型轉(zhuǎn)變?yōu)镹umber類(lèi)型，這一同為Number類(lèi)型的數(shù)據(jù)，對(duì)比起來(lái)就會(huì)變得十分簡(jiǎn)單。值得注意的是在上述的例子中，兩個(gè)空數(shù)組進(jìn)行比較，結(jié)果返回的結(jié)果仍然為false，這個(gè)是怎么回事呢？其實(shí)這個(gè)很好理解，因?yàn)閿?shù)組也是對(duì)象的一種，是復(fù)雜數(shù)據(jù)類(lèi)型，所以用變量?jī)?chǔ)存對(duì)象時(shí)儲(chǔ)存的其實(shí)是地址。對(duì)象的內(nèi)容相同，但是儲(chǔ)存在堆區(qū)的位置不同，所以地址也是不同的，所以在判斷的時(shí)候返回的是false。

      其實(shí)在JS中還有很多的隱式轉(zhuǎn)換情況，以上只是針對(duì)于‘==’的隱式轉(zhuǎn)換情況，對(duì)于這些問(wèn)題，在實(shí)際開(kāi)發(fā)過(guò)程中，需要作為開(kāi)發(fā)者不斷的學(xué)習(xí)和積累，這也是咱們作為開(kāi)發(fā)者的一個(gè)要求之一。

作為用戶(hù)，在很多時(shí)候會(huì)很容易判斷出一個(gè)網(wǎng)站的用戶(hù)體驗(yàn)是否優(yōu)秀，因?yàn)橹饔^感受是很難被欺騙的。但是作為網(wǎng)站的設(shè)計(jì)者和開(kāi)發(fā)者，角色轉(zhuǎn)換之后，所需要面對(duì)問(wèn)題就復(fù)雜得多。身為構(gòu)建者，要讓體驗(yàn)盡善盡美需要花費(fèi)大量的時(shí)間精力來(lái)完善整個(gè)體驗(yàn)的閉環(huán)。今天為你所整理的這7個(gè) UX設(shè)計(jì)的原則，能夠幫你更好地進(jìn)行網(wǎng)站的 UX設(shè)計(jì)，并且盡可能地將整體的用戶(hù)體驗(yàn)提升到一定高度。

1. 圍繞用戶(hù)體驗(yàn)來(lái)進(jìn)行整體設(shè)計(jì)

想要?jiǎng)?chuàng)造難忘的用戶(hù)體驗(yàn)，自然要圍繞著用戶(hù)體驗(yàn)本身來(lái)進(jìn)行設(shè)計(jì)。甚至在某種意義上來(lái)說(shuō)，數(shù)據(jù)和內(nèi)容也應(yīng)該是服務(wù)于體驗(yàn)的， 它們應(yīng)該以什么樣的體驗(yàn)來(lái)呈現(xiàn)出來(lái)，這是設(shè)計(jì)者需要反復(fù)思考和琢磨的問(wèn)題。

圖形、布局、文本和交互元素之間的協(xié)同工作才能創(chuàng)造體驗(yàn)，任何一個(gè)維度缺一不可，單純的信息展示是不夠的。

想讓你的網(wǎng)頁(yè)能在互聯(lián)網(wǎng)上大量的信息中脫穎而出，體驗(yàn)是至關(guān)重要的。現(xiàn)代網(wǎng)頁(yè)中大量的視覺(jué)和交互內(nèi)容存在，是為了能通過(guò)體驗(yàn)直擊人心，這樣才能在激烈的競(jìng)爭(zhēng)中存活。

2. 網(wǎng)站內(nèi)容應(yīng)當(dāng)一目了然

如果你認(rèn)為網(wǎng)站內(nèi)容是用來(lái)讀的，那就錯(cuò)了?，F(xiàn)代用戶(hù)的注意力集中的時(shí)間非常短，絕大多數(shù)用戶(hù)在瀏覽信息的時(shí)候，都是快速掃視，而非逐字逐句地仔細(xì)閱讀，信息的展現(xiàn)一定要直觀、清晰，確保能夠一瞥就能看明白。借助信息圖表和視覺(jué)，更快地傳達(dá)信息和數(shù)據(jù)。

你需要讓你的內(nèi)容更加吸引用戶(hù)，絕大多數(shù)用戶(hù)會(huì)為觸動(dòng)它們的信息和內(nèi)容而駐足，當(dāng)他們想要了解更多的時(shí)候，才會(huì)點(diǎn)擊，了解更多。

3. 用戶(hù)想要簡(jiǎn)單而清晰的內(nèi)容

用戶(hù)只需要半秒就能判斷出網(wǎng)站設(shè)計(jì)和內(nèi)容，你需要盡量讓網(wǎng)站的交互和指引足夠清晰，顯而易見(jiàn)。不要讓按鈕難以被用戶(hù)發(fā)現(xiàn)，在首頁(yè)上放上一大堆的按鈕和鏈接，不如通過(guò)視覺(jué)上的引導(dǎo)，讓用戶(hù)注意到最關(guān)鍵的那個(gè) CTA按鈕。

通過(guò)迭代和測(cè)試，不斷地優(yōu)化和提升網(wǎng)站的易用性。有的設(shè)計(jì)對(duì)于絕大多數(shù)的用戶(hù)都非常有用，凸顯最重要的選項(xiàng)，允許隱藏額外的功能，并且為用戶(hù)提供顯示全部的選項(xiàng)。

除了清晰的設(shè)計(jì)，整體的一致性也很重要。統(tǒng)一的配色、交互和圖形能夠讓用戶(hù)對(duì)于后續(xù)的操作有更清晰的預(yù)期，減少用戶(hù)在后續(xù)操作過(guò)程中探索的力度，這是通過(guò)統(tǒng)一性設(shè)計(jì)提升產(chǎn)品易用性的一種方式。

4. 通用設(shè)計(jì)元素 vs 創(chuàng)造性

當(dāng)某個(gè)設(shè)計(jì)元素在其他地方很常見(jiàn)的時(shí)候，它就已經(jīng)形成了特定的 UI 模式，盡量不要去修改它，哪怕是很富有創(chuàng)意的方式。當(dāng)你將這種約定俗成的元素修改成其他樣子的時(shí)候，用戶(hù)需要花費(fèi)比平時(shí)更長(zhǎng)的時(shí)間來(lái)判斷它究竟是什么。這種認(rèn)知負(fù)荷將會(huì)影響整個(gè)網(wǎng)站的使用效率和轉(zhuǎn)化率。比如漢堡圖標(biāo)，比如網(wǎng)站登錄入口的位置（右上角）。沒(méi)有必要在這種地方重新「標(biāo)準(zhǔn)化」。

對(duì)于鏈接、導(dǎo)航、布局這樣基本的元素，應(yīng)該始終優(yōu)先考慮其可用性，在此基礎(chǔ)上再發(fā)揮創(chuàng)意。

雖然非傳統(tǒng)的設(shè)計(jì)很酷，但是它的可用性問(wèn)題同樣很大。創(chuàng)造性的設(shè)計(jì)同樣是需要控制其程度和平衡，如果非要打破常規(guī)，盡量控制好程度，并且一次最多打破一條規(guī)則，不能更多。

5. 了解你的用戶(hù)

在開(kāi)始創(chuàng)建網(wǎng)站和 APP 之前，你應(yīng)該對(duì)于你的目標(biāo)客戶(hù)群體有足夠清晰的了解，這樣才能更好地為他們來(lái)設(shè)計(jì)界面。

一旦你清楚地了解了你的用戶(hù)，就能了解他們的需求和愿望，并且設(shè)計(jì)出符合他們預(yù)期的界面和體驗(yàn)。這個(gè)時(shí)候，你的競(jìng)爭(zhēng)對(duì)手能夠?yàn)槟闾峁╈`感和想法。注意對(duì)方的色彩，布局，風(fēng)格和功能。

盡可能使用你的受眾已經(jīng)熟悉的 UI 模式和 UI 元素，能夠更快讓他們上手。在此基礎(chǔ)上，適當(dāng)?shù)剡M(jìn)行差異化的設(shè)計(jì)，這樣效率更高。

當(dāng)你確定了受眾之后，記得盡量把他們的反饋納入到你的設(shè)計(jì)當(dāng)中。

6. 視覺(jué)層次很重要

當(dāng)界面中優(yōu)先放置最重要的元素，通過(guò)視覺(jué)層次來(lái)凸顯它們，確保用戶(hù)能夠更快注意到它們。在設(shè)計(jì)中，有很多方法能夠凸顯內(nèi)容，但是最有效的方法始終是讓它們更大更醒目。

視覺(jué)層次的構(gòu)建能夠讓網(wǎng)站內(nèi)容更加清晰，也更加富有功能性。

7. 控制用戶(hù)體驗(yàn)的質(zhì)量

Peter Moville 在 usability.gov 這個(gè)網(wǎng)站上列舉出了用戶(hù)體驗(yàn)設(shè)計(jì)的關(guān)鍵因素，它的核心價(jià)值在于通過(guò)不同的維度更好地掌控用戶(hù)體驗(yàn)的質(zhì)量：

• 有用：內(nèi)容應(yīng)該是原創(chuàng)的且滿(mǎn)足需求。
• 可用：網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
• 可?。涸O(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。
• 可發(fā)現(xiàn)：內(nèi)容容易被定位，被找到，并且可導(dǎo)航。
• 無(wú)障礙：設(shè)計(jì)要為有障礙的用戶(hù)進(jìn)行定制。
• 可信：網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性，且值得被相信。

除了上面的維度之外，還有一些值得參考的 UX設(shè)計(jì)的質(zhì)量衡量標(biāo)準(zhǔn)：

• 符合上下文：有明確的路徑，符合上下文邏輯。
• 人性化：值得信賴(lài)，平易近人，透明，并不機(jī)械。
• 可發(fā)現(xiàn)性：用戶(hù)在第一次訪問(wèn)的時(shí)候就能夠順暢的完成任務(wù)。
• 可學(xué)習(xí)性：確保交互足夠簡(jiǎn)單，并且能夠無(wú)縫地相應(yīng)移動(dòng)端界面，確保用戶(hù)在隨后的訪問(wèn)過(guò)程中達(dá)成目標(biāo)。
• ：確保用戶(hù)能夠快速輕松地完成各種任務(wù)。
• 令人愉悅：確保產(chǎn)品能夠滿(mǎn)足用戶(hù)需求，還能夠和用戶(hù)產(chǎn)生情感聯(lián)系。
• 表現(xiàn)良好：當(dāng)用戶(hù)與之交互的時(shí)候表現(xiàn)良好。

結(jié)語(yǔ)

用戶(hù)體驗(yàn)設(shè)計(jì)的目標(biāo)不僅僅是讓產(chǎn)品本身更優(yōu)秀，更重要的是從情感層面上和用戶(hù)產(chǎn)生關(guān)聯(lián)。有界面而沒(méi)有體驗(yàn)，這樣的產(chǎn)品在今天的競(jìng)爭(zhēng)中是活不下去的。

從用戶(hù)的操作流程上來(lái)說(shuō)，如果用戶(hù)想使用一個(gè)功能，必然首先要發(fā)現(xiàn)它。如果連功能入口都找不到，后續(xù)的用戶(hù)體驗(yàn)也無(wú)從談起。而篩選功能可以幫助用戶(hù)對(duì)功能信息進(jìn)行快速的定位，縮短用戶(hù)的查找時(shí)間，這篇文章我就來(lái)跟大家聊一下篩選功能。

 三種常見(jiàn)基本樣式

首先要明確一個(gè)概念，篩選功能并不是普通的單一功能項(xiàng)，它和導(dǎo)航一樣是一個(gè)體系。既然是體系，必然有最基本的組成部分。篩選功能（體系）常見(jiàn)的樣式有以下三種：tab類(lèi)，(下拉)列表類(lèi)，標(biāo)簽類(lèi)。這三種樣式是篩選功能最基本的組成元素，不管你產(chǎn)品的篩選功能做的有多么復(fù)雜，都可以看成是這三種基本元素的不同組合形式。

Tab

Tab是最常見(jiàn)的篩選樣式，一個(gè)tab項(xiàng)代表一個(gè)篩選維度，直接平鋪的展示出來(lái)，用戶(hù)很容易感知到。

根據(jù)方向我們可以將tab分為橫向欄tab和側(cè)向欄tab。橫向欄tab可展示2-5個(gè)選項(xiàng)，如果超過(guò)了5個(gè)，那么就需要用戶(hù)滑動(dòng)才能看到。所以當(dāng)篩選維度過(guò)多的時(shí)候，我們可以考慮使用側(cè)向欄tab，京東商品分類(lèi)這里用的就是典型的側(cè)向欄tab，我數(shù)了一下總共40個(gè)選項(xiàng)，這里如果使用橫向欄tab用戶(hù)可能要側(cè)向滑動(dòng)8屏，操作成本過(guò)高。

當(dāng)然當(dāng)選項(xiàng)過(guò)多的時(shí)候，我們還有一個(gè)法子，就是使用彈框，用戶(hù)點(diǎn)擊后可以看到全部的選項(xiàng)。

列表式

列表式也可稱(chēng)之為list，其特點(diǎn)就是占用空間小。因?yàn)樗梢詫⑦x項(xiàng)隱藏起來(lái)，用戶(hù)需要點(diǎn)擊才能看到所有的選項(xiàng)，因此在有限的空間里可以展示更多的篩選維度。礙于手機(jī)屏幕尺寸的限制，列表式篩選現(xiàn)在應(yīng)用的越來(lái)越普遍。

列表式篩選的樣式其實(shí)有很多。可以做成popover類(lèi)，actionsheet類(lèi)，activityview類(lèi)。這些樣式很難去說(shuō)誰(shuí)好誰(shuí)壞，這里我就只是列舉出來(lái)，具體用哪種樣式，大家自己來(lái)判斷。

標(biāo)簽式

對(duì)于標(biāo)簽式，很難進(jìn)行準(zhǔn)確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統(tǒng)稱(chēng)為標(biāo)簽式，標(biāo)簽式只能針對(duì)單一條件進(jìn)行篩選，這點(diǎn)和tab很類(lèi)似。標(biāo)簽式很少單獨(dú)出現(xiàn)，多數(shù)情況下都是與tab和列表式結(jié)伴而行。

在淘寶里用戶(hù)可以點(diǎn)擊視圖icon來(lái)切換視圖模式，這就是典型的標(biāo)簽式篩選。

當(dāng)然以上三種只是最常見(jiàn)的篩選元素，其余的還有輸入框，滑塊，地區(qū)/日期選擇器等主要用于信息錄入的組件。 

常見(jiàn)的篩選體系 

了解了最基本的元素，接下來(lái)看一些比較復(fù)雜的篩選樣式。上面我也提到了任何產(chǎn)品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解，我一一舉例來(lái)說(shuō)明：

tab+tab:

tab之所以受到青睞，是因?yàn)槠漭^低的學(xué)習(xí)成本。每一個(gè)tab代表一個(gè)類(lèi)別，而且是直接展示給用戶(hù)看的，所以很多產(chǎn)品的篩選功能都會(huì)優(yōu)先考慮使用tab。即使功能結(jié)構(gòu)復(fù)雜到無(wú)法用一層tab來(lái)完成篩選任務(wù)，設(shè)計(jì)師也會(huì)考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當(dāng)然下圖應(yīng)該算是segment control+tab）

tab+列表式：

當(dāng)產(chǎn)品不斷的發(fā)展，功能結(jié)構(gòu)愈發(fā)的復(fù)雜，過(guò)于扁平的tab已經(jīng)無(wú)法滿(mǎn)足篩選的需求。以看電影這個(gè)場(chǎng)景為例，用戶(hù)的需求是找到合適的影片和電影院。對(duì)于用戶(hù)來(lái)說(shuō)，衡量一家電影院會(huì)從地址、票價(jià)、品牌和特色服務(wù)（支持改簽、IMAX廳等）這四個(gè)角度入手。這些篩選需求很難通過(guò)tab來(lái)完成，我們需要列表式的協(xié)助。

tab+列表式+標(biāo)簽：

當(dāng)產(chǎn)品的功能結(jié)構(gòu)進(jìn)一步復(fù)雜，這也給篩選功能增加了新的難題。以boss直聘來(lái)說(shuō)，這里的篩選項(xiàng)主要分為四個(gè)：排序方式（推薦/）、工作地點(diǎn)、公司規(guī)模、崗位要求。其中后三個(gè)篩選項(xiàng)包含大量的條件，特別工作地點(diǎn)，需要進(jìn)一步定位到街道或地鐵站。對(duì)于這種多維度，深層級(jí)的篩選需求我們可以使用tab+列表式+標(biāo)簽的樣式。

這里我選擇boss直聘的另一個(gè)原因在于它的tab數(shù)用戶(hù)是可以自己增減的，每一個(gè)tab代表一條求職意向，最多可以添加3條求職意向。

篩選體系的容器

篩選體系是由眾多篩選項(xiàng)組成的，這些篩選項(xiàng)需要一個(gè)“容器”來(lái)承載。上面說(shuō)的boss直聘用的是下拉列表，這種樣式其實(shí)還比較簡(jiǎn)單的，我們可以看一些功能更加復(fù)雜一點(diǎn)的產(chǎn)品，比如各大電商平臺(tái)。這里使用的是抽屜式篩選框，說(shuō)它是抽屜式，因?yàn)樗閷弦粯?，用的時(shí)候可以拉出來(lái)，不用的時(shí)候可以關(guān)起來(lái)，節(jié)省了空間。從某個(gè)角度來(lái)說(shuō)，我們可以把抽屜式看成列表式的一個(gè)放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。

從底部彈出的動(dòng)作欄也比較常見(jiàn)，這里使用了滑塊和單選按鈕。

Airbnb的篩選功能以浮層為載體，還使用比較少見(jiàn)的switch和stepper。

當(dāng)然Airbnb篩選功能最大的亮點(diǎn)在于可以向用戶(hù)即時(shí)反饋篩選結(jié)果的數(shù)目，用戶(hù)不太可能會(huì)進(jìn)入搜索結(jié)果為0的空頁(yè)面，避免無(wú)效操作。

以上說(shuō)的篩選體系都比較傳統(tǒng)，大部分都是基于對(duì)現(xiàn)有結(jié)果進(jìn)行篩選，其實(shí)我們可以對(duì)篩選功能進(jìn)行前置。例如，我們可以在用戶(hù)進(jìn)行搜索之前就對(duì)結(jié)果進(jìn)行篩選。

甚至在新用戶(hù)第一次使用產(chǎn)品的時(shí)候，可以讓用戶(hù)填寫(xiě)一些個(gè)人信息以便進(jìn)行個(gè)性化推送。

篩選功能的存在意義在于幫助用戶(hù)對(duì)功能信息進(jìn)行快速的定位，對(duì)篩選功能進(jìn)行適度的前置可以簡(jiǎn)化用戶(hù)的操作流程，同樣可以達(dá)到節(jié)省用戶(hù)時(shí)間的目的。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在這里向跟著大神學(xué)CAD 致敬，咿CAD，好吧也算設(shè)計(jì)，設(shè)計(jì)的包容性很高啊

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)