如何設(shè)計(jì)出完美的網(wǎng)頁折疊面板

折疊面板可能是響應(yīng)式設(shè)計(jì)中的最重要主力。

設(shè)計(jì)模型。近乎神秘的語句經(jīng)常激發(fā)敬畏和怨恨。作為設(shè)計(jì)師，我們通常沒有考慮過設(shè)計(jì)模型是通用的解決方法，它可以適用于各種環(huán)境中。網(wǎng)址導(dǎo)航?滑動(dòng)導(dǎo)航?日常交易?Carousel!

使用這些模型的一個(gè)很棒的原因是：每當(dāng)遇到耗時(shí)且有風(fēng)險(xiǎn)的界面問題時(shí)，我們都需要一個(gè)新的解決方案，但由于我們不知道實(shí)施一個(gè)新的解決方案需要多少時(shí)間，以及是否在可用性測(cè)試中會(huì)成功。

設(shè)計(jì)模型是非常有幫助的，這主要是因?yàn)樗鼈兪r(shí)，且能很快地取得好的結(jié)果。我們不需要每次遇到問題都用它解決，但可以利用其中的優(yōu)勢(shì)和我們的經(jīng)驗(yàn)來做決定，因?yàn)槲覀冎浪麄冊(cè)谄渌?xiàng)目工作中的表現(xiàn)也是相當(dāng)好。

在我們開始復(fù)雜的界面問題之前，我們先來看看一些簡(jiǎn)單明了的折疊面板。

簡(jiǎn)潔的折疊面板

折疊面板可能是響應(yīng)式設(shè)計(jì)中的最重要主力。這是一個(gè)非常有用的逐步呈現(xiàn)的模型——突出顯示每個(gè)部分的重要細(xì)節(jié)，必要時(shí)利用點(diǎn)擊來顯示更多詳細(xì)信息。因此，設(shè)計(jì)始終集中在最先顯示的關(guān)鍵信息上，以便其他一切都易于訪問。事實(shí)上，如果你遇到問題——導(dǎo)航項(xiàng)太多，內(nèi)容太多，視圖太詳細(xì)——一個(gè)好的起點(diǎn)就是去探索如何用折疊面板來決問題。通常情況下，它的效果是非常好。

設(shè)計(jì)一個(gè)折疊面板有多難呢?因?yàn)樗枰紤]很多事情。Schoolfinder就是一個(gè)很好的例子。

然而，即使可預(yù)測(cè)和經(jīng)常使用的組件作為折疊面板有很多需要解釋的和不明確的?，F(xiàn)在，不要誤會(huì)這一情況：環(huán)境很重要。折疊面板的導(dǎo)航在Q&A部分需要有不同的方法。所以在所有不同的情況下，我們必須深入地考慮兩件事情：折疊面板的視覺設(shè)計(jì)和交互設(shè)計(jì)，以此消除所有的混亂和誤解。

現(xiàn)在，如果我們更加關(guān)注折疊面板的簡(jiǎn)潔，那就不難看出它的所有原子元素。折疊面板包含分類標(biāo)題、展開和折疊狀態(tài)、圖標(biāo)的指示展開，以及它們之間的間距。展開分類后，圖標(biāo)應(yīng)該更改，以指示折疊。但如果用戶在另一張卡片打開時(shí)點(diǎn)擊已收縮的卡片怎么辦?展開的卡片是否會(huì)自動(dòng)關(guān)閉?如果所有的項(xiàng)目不能顯示——用戶應(yīng)該被迫自動(dòng)向上滾動(dòng)嗎?我們一個(gè)接一個(gè)地看看這些相關(guān)的問題。

Nsb.no是關(guān)于折疊面板的一個(gè)經(jīng)典例子，它是一個(gè)挪威旅行計(jì)劃器，圖標(biāo)對(duì)齊在狀態(tài)欄的右邊緣，整個(gè)狀態(tài)欄充當(dāng)展開觸發(fā)器。

選擇一個(gè)圖標(biāo)指示展開

現(xiàn)在我們開始，很明顯在大多數(shù)從左到右的界面中，分類名稱也是左對(duì)齊的。假設(shè)，就像在許多折疊面板中一樣，子項(xiàng)目在兩個(gè)部分之間滑動(dòng)，你會(huì)選擇什么圖標(biāo)來傳達(dá)這個(gè)行為? 指向下的箭頭、指向右的箭頭、指向下方的V字形、帶加號(hào)、帶圓圈的加號(hào)——也許是完全不一樣的?

Zvv.ch是結(jié)合了兩個(gè)具有相同圖標(biāo)的折疊面板(帶圓圈的加號(hào))——一個(gè)是指示行程的選項(xiàng)，一個(gè)表示在兩個(gè)位置間的停頓。兩者都有同樣的目的(展開)，看起來相似。他們清楚地傳達(dá)了圖標(biāo)的目的和預(yù)期的行為。

根據(jù)我的經(jīng)驗(yàn)，看起來只要在同一個(gè)用戶界面中圖標(biāo)的選擇是并不重要，因?yàn)樗遣粫?huì)重疊各種含義。例如，你可以潛在地使用帶圓圈加號(hào)來指示定價(jià)計(jì)劃中的展開和收縮一系列的兩個(gè)項(xiàng)目——這可能會(huì)引起混淆。但在折疊面板的背景下，用戶似乎明白如果某些導(dǎo)航項(xiàng)目有圖標(biāo)，而其他部分則沒有，那么點(diǎn)擊就可以獲得更多內(nèi)容。反之，我們無法發(fā)現(xiàn)任何一個(gè)圖標(biāo)或多或少的可識(shí)別跡象。這些選項(xiàng)意味著會(huì)比其他選項(xiàng)更容易引起混亂。

Ableton.com使用帶加號(hào)的圖標(biāo)表示捆綁交易(上圖)和展開(如果你向下滾動(dòng)頁面)。在這里使用具有多重含義的圖標(biāo)可能會(huì)有點(diǎn)混亂，因?yàn)橛行┯脩艨赡軙?huì)希望在點(diǎn)擊頂部的圖標(biāo)時(shí)進(jìn)行展開(并且不會(huì)發(fā)生任何事情)，在點(diǎn)擊底部的帶加號(hào)圖標(biāo)時(shí)沒有任何的交互(展開)。(View large version)

舉例，Slack使用向右側(cè)的箭頭，盡管折疊面板的項(xiàng)目在分類標(biāo)題之間是垂直滑動(dòng)，而不是從右側(cè)滑動(dòng)。這個(gè)點(diǎn)值得問一下圖標(biāo)方向的目的是什么?它可以作為移動(dòng)方向的指標(biāo)，更具體地說，當(dāng)用戶的視圖被移動(dòng)到點(diǎn)擊的圖標(biāo)時(shí)。例如，在iOS系統(tǒng)中的Apple Mail中，指向右側(cè)的V形圖從左到右映射到用戶視圖的移動(dòng)。

在Slack上，定價(jià)計(jì)劃在手機(jī)上顯示為收縮的折疊面板，V行圖指向右側(cè)，而移動(dòng)則是從上到下。

例如，在iOS系統(tǒng)中的Apple Mail，指向右側(cè)的V形圖從左到右映射到用戶視圖的移動(dòng)。(Large preview)

在圖標(biāo)的方向與用戶視圖的移動(dòng)之間進(jìn)行映射似乎是合理的，但是因?yàn)椴煌慕缑妫袨榉绞揭矔?huì)不同(用戶經(jīng)常與神秘的圖標(biāo)玩游戲)沒有人會(huì)期待這種行為。 所以最后，設(shè)計(jì)師做什么并不重要：不管怎么樣，你都無法滿足一些用戶的期望。 在設(shè)計(jì)時(shí)，我們傾向于我們正在設(shè)計(jì)的內(nèi)容，即使我們的用戶界面非常相似，用戶也會(huì)受到他們?cè)谖覀儚奈匆娺^的網(wǎng)站上的體驗(yàn)的影響。關(guān)鍵是要盡可能的有彈性，并提供一個(gè)容易且簡(jiǎn)單的恢復(fù)，以滿足期望。

帶加號(hào)的圖標(biāo)可能含有不同的含義，在Leica，加號(hào)提示產(chǎn)品顯示的燈箱。有些用戶或許不會(huì)期望這種行為。放大鏡的縮放圖標(biāo)在這里可能不那么模糊。

所以回頭看圖標(biāo)的選擇，如果折疊面板的項(xiàng)目在垂直方向滑動(dòng)，直觀地看，使用任何上述圖標(biāo)看起來都是安全的，除了指向右邊的圖標(biāo)。這里唯一要考慮的問題是，如果你選擇的圖標(biāo)已經(jīng)在不同的環(huán)境中被重疊了另一個(gè)含義——例如，如果使用帶加號(hào)的圖標(biāo)來突出顯示定價(jià)計(jì)劃中的捆綁交易部分(其中帶加號(hào)的圖標(biāo)是不能點(diǎn)擊)，使用與折疊面板完全相同的加號(hào)圖標(biāo)。在這種情況下，最好避免出于不同目的使用完全相同的圖標(biāo)，否則會(huì)導(dǎo)致混亂。

那么這一切都清楚了嗎? 嗯，我看不完全是。

讓我們來考慮一下預(yù)期的交互。箭頭和V字形通常作為改變指示方向的線索，加號(hào)表示增加和展開。在這兩種情況下，可以通過各種方式進(jìn)行更改：點(diǎn)擊圖標(biāo)會(huì)師導(dǎo)航項(xiàng)的疊加層顯示在內(nèi)容上方或者垂直(不是水平)滑動(dòng)的項(xiàng)目上。到目前為止還好。

當(dāng)在tifwe.org的導(dǎo)航菜單中看到箭頭時(shí)，用戶會(huì)期望什么行為?很明顯，導(dǎo)航項(xiàng)目右側(cè)的圖標(biāo)表示子菜單，設(shè)計(jì)充分利用了可用的空間。當(dāng)箭頭提示展開時(shí)，分類標(biāo)題是直接跳轉(zhuǎn)到分類的鏈接。

但當(dāng)用戶登陸頁面時(shí)，首先他們不知道自己是否登陸在一個(gè)長(zhǎng)滾動(dòng)頁面的鏈接跳轉(zhuǎn)頁面部分，或者是一個(gè)“常規(guī)”頁面。很多時(shí)候，箭頭是指向下面觸發(fā)跳躍部分的頁面，而不是展開導(dǎo)航的選項(xiàng)。用戶可能曾在一段長(zhǎng)的頁面中迷失方向，然后返回到頁面的頂部，并從那里再繼續(xù)。

圖表通常都是模糊不清的。在Qso.com上，用戶如何確定點(diǎn)擊屏幕底部的按鈕是否會(huì)將該區(qū)域展開為折疊面板或?qū)⑵湎蛳聺L動(dòng)頁面?在這種情況下，用戶向下滾動(dòng)頁面。V字形經(jīng)常表明擴(kuò)張，這可能是一個(gè)問題。(View large version)

因此，如果你選擇使用箭頭，最終可能會(huì)有一些用戶期望向下滾動(dòng)到頁面的該部分，而不是在分類間看到子項(xiàng)目的滑動(dòng)。因此，V字形看起來是一個(gè)更安全和更可預(yù)測(cè)的選擇;如果你選擇使用它，則將其指向收縮狀態(tài)，在展開時(shí)指向它。 對(duì)于帶加號(hào)圖標(biāo)，你可以在帶減號(hào)圖標(biāo)或關(guān)閉圖標(biāo)間選擇。

在Papillons De Nuit的箭頭。當(dāng)你點(diǎn)擊頁面頂部和頁面右側(cè)的箭頭時(shí)，你期待的是什么?頂部的箭頭作為提示(在點(diǎn)擊時(shí)不起作用)，而右側(cè)的箭頭將用戶滾動(dòng)到頁面的各個(gè)部分。不是每個(gè)用戶都會(huì)期望這種行為。(Large preview)

那么，所有這一切對(duì)設(shè)計(jì)師來說意味著什么呢?首先，如果折疊面板的項(xiàng)目應(yīng)該從左到右水平滑動(dòng)，那么使用指向右側(cè)的箭頭則是安全的。其次，如果折疊面板的項(xiàng)目應(yīng)該從上到下垂直滑動(dòng)，則指向下面(不是箭頭)或帶加號(hào)圖標(biāo)的V字形會(huì)很好地工作。

考慮到這一點(diǎn)，圖標(biāo)的選擇應(yīng)該是一個(gè)非常簡(jiǎn)單明確的決定。但是，根據(jù)該圖標(biāo)與分類標(biāo)題的接近程度，也可能會(huì)導(dǎo)致混淆。那么現(xiàn)在在選擇該圖標(biāo)的位置時(shí)，我們需要考慮什么選擇?

選擇圖標(biāo)的位置

選項(xiàng)!不要選擇你已經(jīng)選擇的圖標(biāo)，你可以選擇將其放置在分類名稱a)左側(cè)，或b)右側(cè)，或c)沿著整個(gè)導(dǎo)航項(xiàng)目欄的右邊緣對(duì)齊圖標(biāo)，輸出圖標(biāo)的間距和分類名稱。

有時(shí)點(diǎn)擊一個(gè)文本標(biāo)簽會(huì)導(dǎo)致一個(gè)單獨(dú)的分類頁面，點(diǎn)擊空白處起不了什么作用。這就是為什么當(dāng)希望展開時(shí)，一些用戶會(huì)嘗試點(diǎn)擊圖標(biāo)，而不是分類或空白區(qū)域。Research by Viget.com. Large view.

這個(gè)位置是否重要?其實(shí)根據(jù)Viget的“Testing Accordion Menu Designs and Iconography”，一些用戶傾向?qū)Ｗ⒂邳c(diǎn)擊明確的圖標(biāo)，而不是整個(gè)導(dǎo)航欄。這會(huì)發(fā)生的一個(gè)簡(jiǎn)單的原因是：以前一些用戶可能用“burned”替代實(shí)現(xiàn)折疊面板。在一些網(wǎng)站上，分類標(biāo)題不會(huì)觸發(fā)展開，而是直接進(jìn)入該分類。在其他實(shí)現(xiàn)中，點(diǎn)擊導(dǎo)航欄不會(huì)觸發(fā)展開，也不會(huì)進(jìn)入該分類——它不起任何作用。

即使我們將整個(gè)區(qū)域設(shè)計(jì)成一個(gè)命中目標(biāo)，但不是每一個(gè)導(dǎo)航都有這一行為，一些用戶本不知道你的導(dǎo)航是“好的”還是“壞的”，直到他們實(shí)際在上面點(diǎn)擊(或懸停在它上面)。由于懸停不總是可用的，點(diǎn)擊圖標(biāo)似乎是一個(gè)更安全的賭注——點(diǎn)擊圖標(biāo)將幾乎總是觸發(fā)預(yù)期的行為。這是設(shè)計(jì)折疊面板時(shí)需要知道的重要細(xì)節(jié)。

在各界面實(shí)施方面，似乎將圖標(biāo)放置在分類標(biāo)題的右側(cè)，用戶通常選擇把更多的圖標(biāo)放在左邊(用戶點(diǎn)擊分類標(biāo)題或空白欄)。但是，有些用戶仍然傾向于選擇圖標(biāo)。因此，使圖標(biāo)足夠大以適應(yīng)點(diǎn)擊是一個(gè)很好的決定，以防萬一——尺寸至少為44×44像素。

左對(duì)齊，右傾斜還是右對(duì)齊?這似乎并不重要。但是，如果你有一組折疊面板(可能會(huì)在導(dǎo)航菜單中)，分類標(biāo)題的長(zhǎng)度變化很多，需要稍微更多的關(guān)注在多個(gè)部分間切換折疊面板的狀態(tài)，而不僅僅是沿著導(dǎo)航欄從上到下移動(dòng)。只是鼠標(biāo)指針或手指必須重新定位，才能點(diǎn)擊這個(gè)花哨的圖標(biāo)!此外，如果圖標(biāo)是右傾斜的，則在狹窄的屏幕上，手指需要穿過導(dǎo)航區(qū)域，模糊視圖。當(dāng)圖標(biāo)位于欄的右邊緣時(shí)，此問題將被解決。

但是，如果圖標(biāo)是對(duì)齊右邊緣欄，我們?nèi)匀恍枰⒁猓灰獙⑵浞旁诰嚯x分類名稱太遠(yuǎn)的位置。從視覺上看，展開與這一分類是顯而易見的; 所以，在不同的觀察框中，圖標(biāo)的位置可能會(huì)改變，以保持視覺連接的顯著。此外，在更寬的屏幕上的圖標(biāo)可能會(huì)變得更大。對(duì)于一組折疊面板來說，這個(gè)選項(xiàng)似乎更為可取，但對(duì)于單個(gè)折疊面板來說不會(huì)有很大的不同——除非你有其它的數(shù)據(jù)可以來證明。

設(shè)計(jì)折疊面板的界面交互

盡管這些細(xì)節(jié)都沒有解決，交互還是引起了一些問題。讓我們假設(shè)分類標(biāo)題保持左對(duì)齊，圖標(biāo)對(duì)齊到右邊緣欄。跟隨上面討論，當(dāng)用戶點(diǎn)擊分類名稱或圖標(biāo)或兩者之間的空白空間時(shí)應(yīng)該怎么辦?它們是否應(yīng)該觸發(fā)擴(kuò)張，還是有不同的目的?

那么，我們可以確定一件事情：當(dāng)用戶點(diǎn)擊圖標(biāo)時(shí)，他們可能會(huì)期待某種展開，所以點(diǎn)擊圖標(biāo)就會(huì)提示展開。但分類標(biāo)題可以點(diǎn)擊直接跳到該分類，或旨達(dá)到展開的目的。

如果分類標(biāo)題觸碰展開，我們絕對(duì)需要在子下拉菜單中提供一個(gè)分類鏈接，讓用戶跳到該部分(例如“所有項(xiàng)目”)。這意味著用戶從首頁到分類旅程可能會(huì)引發(fā)混亂，因?yàn)樗麄儾幌Ｍ邳c(diǎn)擊分類標(biāo)題時(shí)還有額外的點(diǎn)擊。但在這種情況下的恢復(fù)是顯而易見的，并不會(huì)強(qiáng)迫用戶恢復(fù)以前的狀態(tài)，他們可以繼續(xù)。

如果折疊面板中的鏈接顯而易見，就不會(huì)讓人感到混亂，而不是跳到一個(gè)分類展開完導(dǎo)航項(xiàng)，然后返回更可能會(huì)讓人感到混亂。這就是為什么同時(shí)使圖標(biāo)和分類標(biāo)題觸發(fā)展開更合理。這樣就不那么突兀了。這種互動(dòng)是否會(huì)在分類標(biāo)題和圖標(biāo)之間發(fā)生?一些設(shè)計(jì)師認(rèn)為，當(dāng)用戶在瀏覽網(wǎng)站時(shí)點(diǎn)擊該區(qū)域，他們可能不希望展開，而是“鎖定”鼠標(biāo)指針以開始在頁面上滾動(dòng)，因此感覺到破混亂。當(dāng)然，這是有可能的，但如果用戶選擇打開導(dǎo)航菜單來瀏覽導(dǎo)航選項(xiàng)，就不太有可能發(fā)生。

點(diǎn)擊越靠近圖標(biāo)，用戶越有可能期望展開。但并不意味著點(diǎn)擊越接近分類標(biāo)題，他們?cè)接锌赡芴D(zhuǎn)到分類。(View large version)

折疊面板通常用于卡片，根據(jù)觀察口的寬度，卡片可能相當(dāng)廣泛，因此有些用戶拼命嘗試圖標(biāo)，你的一些用戶將被用來通過點(diǎn)擊空白區(qū)域欄來收縮和展開卡片。其他用戶用于沒有目的的空白空間服務(wù)，根本不用，只會(huì)忽略它。只有少數(shù)人會(huì)期待欄作為該分類的鏈接。在我們的測(cè)試中，空白的空間觸發(fā)器展開并不容易。

折疊面板不一定只用于導(dǎo)航。它也可以顯示或多或少的細(xì)節(jié)。例如，在PremierLeague.com中的的表格或排行榜表單。(Desktop view Mobile view)

但如果你希望分類標(biāo)題直接鏈接到該分類，該怎么辦?一個(gè)辦法是通過在元素邊界“提示”的兩個(gè)視覺上獨(dú)特的元素——例如用圖標(biāo)和分類標(biāo)題的不同背景顏色(參見上面的示例)來提高清晰度。在我們的實(shí)驗(yàn)中，我們不會(huì)注意到期望行為的變化——有些人仍然會(huì)點(diǎn)擊分類，想知道發(fā)生了什么。這樣展開的折疊面板中的鏈接部分看起來會(huì)更安全。

滿足了嗎?我們還沒有。如果用戶點(diǎn)擊圖標(biāo)進(jìn)行展開，但屏幕上沒有足夠的空間顯示所有子項(xiàng)目，該怎么辦?團(tuán)隊(duì)中的一些人或許會(huì)建議自動(dòng)向上滾動(dòng)頁面，以確保展開區(qū)域顯示在屏幕頂部。這是個(gè)好主意嗎?

每當(dāng)我們?cè)噲D控制遠(yuǎn)離用戶時(shí)，該決定必須經(jīng)過深入的測(cè)試和考慮?；蛟S用戶有興趣立即查看多個(gè)部分，并希望快速跳轉(zhuǎn)這些部分的內(nèi)容。而不是讓用戶思考自動(dòng)滾動(dòng)或跳轉(zhuǎn)的行為，然后向后滾動(dòng)恢復(fù)以前的狀態(tài)。只是為了保持原狀，看起來不那么突兀，讓用戶決定必要時(shí)，他們可以向下滾動(dòng)。沒有多少用戶會(huì)希望跳到頂部——不會(huì)中斷流程，或有一個(gè)固定鏈接到該部分(如果它真的很長(zhǎng))。

在Sony.com中，如果展開了一個(gè)部分，用戶點(diǎn)擊了另一個(gè)部分，則展開部分會(huì)自動(dòng)折疊。這種行為在網(wǎng)站之間是不一致的，所以用戶不能依賴也不期望這種行為無所不在。Large view.

另一個(gè)問題是：如果一個(gè)部分已經(jīng)展開，用戶點(diǎn)擊另一個(gè)部分，是會(huì)先折疊還是保持原樣?如果第一部分自動(dòng)折疊，但這并不是用戶期望的，所以用戶會(huì)再次打開它們，但是它們就無法同時(shí)掃描或比較兩個(gè)分類。如果該部分保持展開，他們要主動(dòng)關(guān)閉他們不需要的分類。這兩個(gè)選項(xiàng)似乎都有合理的用例。

折疊面板的本質(zhì)是要求自動(dòng)折疊，但在實(shí)用性方面可能不是好選擇。對(duì)于有許多項(xiàng)目的折疊面板，我們傾向于將部分展開，因?yàn)樵诿姘尻P(guān)閉和打開的同時(shí)，發(fā)生跳躍太過麻煩。所以，可以提供“全部折疊”/“全部展開”按鈕，這對(duì)于設(shè)計(jì)計(jì)劃表或詳細(xì)表格是非常有用。如果沒有那么多的項(xiàng)目，該部分會(huì)默認(rèn)折疊，因此將是最小限度的跳轉(zhuǎn)。(請(qǐng)注意，水平折疊面板部分肯定會(huì)收縮——保持展開是沒有任何意義。)

在The Guardian網(wǎng)站上，一個(gè)V字形放在左邊，其次是分類標(biāo)題和空格。整欄觸發(fā)展開，分類主頁作為折疊面板項(xiàng)目中的第一個(gè)選項(xiàng)整齊地展示出來。

然后不要介意選擇圖標(biāo)的位置，每當(dāng)折疊面板展開時(shí)，都能很容易立地折疊起來。 這種交互不需要鼠標(biāo)光標(biāo)或手指的額外移動(dòng)——就像其他隱藏和顯示的交互。這意味著圖標(biāo)的折疊和展開都會(huì)在激活時(shí)發(fā)生變化，但其位置應(yīng)保持完全相同，從而允許折疊面板的狀態(tài)能夠立即切換。

總結(jié)

這是一個(gè)看似明顯的設(shè)計(jì)模型的漫長(zhǎng)的考察。所以我們?nèi)绾卧O(shè)計(jì)出好的折疊面板呢?我們選擇一個(gè)圖標(biāo)，指示展開(V形指向下或帶加號(hào))，使其足夠大以適應(yīng)點(diǎn)擊，輕松地將其放置在的右邊緣欄中。整個(gè)導(dǎo)航欄就會(huì)觸發(fā)展開——在導(dǎo)航欄周圍有足夠的內(nèi)邊距以切換狀態(tài)，以及到折疊面板分類中的分類主頁鏈接。

如果我們選擇使用V字形，方向應(yīng)該隨便點(diǎn)擊，如果是帶加號(hào)的圖標(biāo)，則可以輕松地轉(zhuǎn)換為“ – ”或“x”來表示折疊。為了保持交互更加清晰，我們可以用微妙的轉(zhuǎn)換或用動(dòng)畫來滑入和滑出分類項(xiàng)目。

當(dāng)然，因?yàn)榄h(huán)境不同，你的解決方案也會(huì)有所不同，所以如果你在尋找一個(gè)替代解決方案，下面是在設(shè)計(jì)折疊面板時(shí)我們總會(huì)問的一些問題。

折疊面板的設(shè)計(jì)清單：

• 你會(huì)選擇什么圖標(biāo)表示展開?
• 你會(huì)選擇什么圖標(biāo)表示折疊?
• 你會(huì)在哪里放置圖標(biāo)?
• 你如何設(shè)計(jì)一個(gè)分類標(biāo)題?
• 你如何表示折疊和展開狀態(tài)(除了圖標(biāo))?
• 如果用戶點(diǎn)擊分類會(huì)發(fā)生什么?
• 折疊面板是否包含該分類主頁的鏈接?
• 如果用戶點(diǎn)擊空白區(qū)域會(huì)發(fā)生什么情況?
• 當(dāng)選擇另一個(gè)部分時(shí)，展開的部分是否會(huì)自動(dòng)折疊嗎?
• 如果沒有足夠的空間來展示所有項(xiàng)目怎么辦?
• 你是否有“全部折疊/全部展開”的鏈接或按鈕?

因?yàn)橹挥猩贁?shù)的組件的指導(dǎo)出現(xiàn)了交互，對(duì)于一個(gè)組件看似成立的和可預(yù)見的折疊面板是一個(gè)幾乎永無止境的故事，設(shè)計(jì)實(shí)驗(yàn)和可用性是需要考慮的。構(gòu)建無障礙折疊面板并不困難，設(shè)計(jì)普遍理解的折疊面板是并不容易。因此，用戶經(jīng)常由于期望的不匹配或由于交互中斷了他們的流程而感到沮喪。我們的工作就是減少摩擦，確保它在必要時(shí)能很少發(fā)生。憑借寬容且彈性的設(shè)計(jì)，我們可以實(shí)現(xiàn)這一點(diǎn)。

標(biāo)題名稱：如何設(shè)計(jì)出完美的網(wǎng)頁折疊面板
分享地址：http://www.bm7419.com/news44/170394.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、全網(wǎng)營(yíng)銷推廣、搜索引擎優(yōu)化、動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、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í)需注明來源： 創(chuàng)新互聯(lián)