欧美aaa一级成人在线观看|午夜热门精品一区二区三区|少妇高潮喷水惨叫久久久|亚洲欧美高清麻豆综合

移動(dòng)端屏幕越來越大，但用戶對(duì)內(nèi)容量的要求也水漲船高。如何在有限的屏幕內(nèi)透出更多的內(nèi)容，是設(shè)計(jì)師們研究的重點(diǎn)。

常用的內(nèi)容拓展設(shè)計(jì)有：Y 方向 List 滑動(dòng)、Z 方向 3D Touch 、入口式內(nèi)容折疊等。今天想和大家聊的，是其中的“左右橫滑”卡片式交互設(shè)計(jì)。
所謂的“左右橫滑”交互英文名叫做“Horizontal Scrolling Lists”，最早可能起源于 Windows Phone 的橫向內(nèi)容滑動(dòng)設(shè)計(jì)。用于在同一個(gè)頁面的 X 軸方向拓展內(nèi)容空間，“左右橫滑”的交互方式被廣泛應(yīng)用于各類 App 中。
不過，凡事都有兩面性。當(dāng)“左右橫滑”的交互把更多內(nèi)容塞到了頁面中時(shí)，也產(chǎn)生了諸如可見性差、優(yōu)先級(jí)混亂、內(nèi)容不突出等體驗(yàn)風(fēng)險(xiǎn)。因此，在使用這種設(shè)計(jì)時(shí)必須有所準(zhǔn)備，確保它發(fā)揮出最大的效用。
接下來，把我自己設(shè)計(jì)中遇到的一些“心得”和“坑”分享給大家。
1. 挑選合適的使用場景
單頁多維度的信息結(jié)構(gòu)是“左右橫滑”最適合的應(yīng)用場景。傳統(tǒng)的 List 適合縱向無限呈現(xiàn)單一屬性的內(nèi)容(比如朋友圈或知乎的回答)，而對(duì)于 App 首頁等多種信息聚合的頁面，就適合橫向開拓內(nèi)容維度。
以最新版的 Airbnb 為例，它將首頁分割為 Banner、熱門體驗(yàn)、體驗(yàn)、房源、旅游目的地精選等多個(gè)維度，每個(gè)維度單獨(dú)占據(jù)一整行，并展現(xiàn)并列的內(nèi)容。再看 iOS App Store，也是將頁面分為諸多維度，把不同的應(yīng)用分類呈現(xiàn)。
設(shè)計(jì)師們很形象地把這種設(shè)計(jì)稱為“泳道”。

可以看到，Airbnb 和 iOS App Store 整個(gè)頁面的重心都是利用“泳道”構(gòu)成的，雖然存在 X、Y 兩個(gè)瀏覽方向，但瀏覽起來并不困難。不過，更復(fù)雜的場景是在一個(gè) Y 方向 List 列表中穿插使用“左右橫滑”，這時(shí)，會(huì)有比較多的坑。

2. 顯眼并適宜的主題展示
從信息優(yōu)先級(jí)上能看到，每個(gè)泳道的“主題”非常重要。通常，橫向每個(gè)小卡片的面積不會(huì)太大，所以不可能既展示自身信息，又告知整個(gè)泳道的主題。
為此，必須有非常強(qiáng)的視覺信息總領(lǐng)整個(gè)泳道。最常見的做法，是在泳道上方設(shè)置顯眼的“標(biāo)題”。
最近還常見到比較夸張的做法，是直接在泳道最左端給一個(gè)強(qiáng)內(nèi)容氛圍。以下圖左側(cè)的輕芒閱讀 App 舊版頁面為例，圖片+文字氛圍的做法雖然極大強(qiáng)調(diào)了主題，但卻也極大浪費(fèi)了展現(xiàn)效率，違背了內(nèi)容優(yōu)先的原則，效果并不好。
為此，輕芒閱讀也在最新版本改成了小面積、高視覺優(yōu)先級(jí)的標(biāo)題形式。