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

【app開發(fā)】為什么在APP設計中 應該慎用左右橫滑設計?

2017-06-21 18:07:49

移動端屏幕越來越大,但用戶對內容量的要求也水漲船高。如何在有限的屏幕內透出更多的內容,是設計師們研究的重點。

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

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

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

關注樂騰科技官方微信

通江县| 金华市| 赤峰市| 夏邑县| 太白县| 常宁市| 阿城市| 永嘉县| 东乡族自治县| 襄汾县| 阳泉市| 庆安县| 周口市| 台江县| 济南市| 晋江市| 壶关县| 墨竹工卡县| 延安市| 华容县| 聊城市| 南江县| 安龙县| 叙永县| 花垣县| 荥经县| 育儿| 信丰县| 岳阳县| 和政县| 阜宁县| 称多县| 彩票| 宁河县| 宣恩县| 江城| 泰来县| 绥棱县| 翁源县| 北辰区| 神农架林区|