中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

講述移動用戶體驗設計之列表視圖與網(wǎng)格視圖

2024-01-29    分類: 網(wǎng)站建設

盡管大屏幕手機已逐漸成為當下主流趨勢,但是小尺寸的手機更加方便和便攜。不過與臺式機和筆記本電腦屏幕相比,手機屏幕(無論屏幕大?。┧艹尸F(xiàn)的內(nèi)容要少得多。通常用戶只能預覽一小部分內(nèi)容,需要滾動屏幕才能查看更多內(nèi)容。

今天,我將概述兩種基本的內(nèi)容呈現(xiàn)模式 - 列表視圖和網(wǎng)格視圖,并為兩者提供了使用案例。

列表視圖

列表將多個行項作為一個連續(xù)的元素垂直地呈現(xiàn)。它的文本較為繁重,而且通常只有很小的圖標和文本。列表視圖項目所需的垂直空間比圖像要少,因此它可以在屏幕上顯示更多的列表項。

內(nèi)容掃描

列表視圖為用戶提供了一種遵循自然閱讀習慣的模式,即F形閱讀模式。

列表最適合呈現(xiàn)同類數(shù)據(jù)類型,并為閱讀理解進行了優(yōu)化。列表視圖可以通過縮短頁面來避免太多的滾動。排除圖片(列表視圖只有小圖標)可以讓你在每個屏幕上放置更多的選項。

需要注意的是,在處理列表視圖時,用戶的注意力會從上到下遞減。

決策

用戶主要依賴于閱讀文本內(nèi)容來進行選擇。

優(yōu)點和缺點

與網(wǎng)格視圖相比,列表視圖具有以下優(yōu)點:

列表視圖遵循自然的閱讀模式。
列表視圖通過在可見區(qū)域提供更多選項來防止過度滾動。
但是它也有一些缺點:

在視覺外觀方面,列表視圖的效果不是很理想。
在列表視圖中,用戶的注意力會從上到下遞減。

網(wǎng)格視圖

網(wǎng)格視圖是標準列表視圖的另一種選擇。網(wǎng)格列表與用于布局和其他可視化演示的網(wǎng)格不同,網(wǎng)格列表由網(wǎng)格列表中垂直和水平排列的單元格組成。

內(nèi)容掃描

網(wǎng)格視圖為用戶提供了更具中斷性的掃描格式,使其最適用于視覺內(nèi)容。通常,這些圖像占據(jù)了大部分的單元格空間。

使用網(wǎng)格視圖,用戶的注意力能夠在每個網(wǎng)格單元之間分布地更均勻。因此,網(wǎng)格視圖可以優(yōu)化視覺理解和區(qū)分相似的數(shù)據(jù)類型。

用戶決策

用戶主要依靠圖像進行選擇。這里需要注意的是用戶在同一時刻只能看到4- 6 個網(wǎng)格選項。

電子商務網(wǎng)站的網(wǎng)格視圖示例。

優(yōu)點和缺點

網(wǎng)格視圖有以下優(yōu)點:

·網(wǎng)格視圖更吸引眼球 。
·網(wǎng)格視圖幫助用戶判斷項目之間的視覺差異。
·在網(wǎng)格視圖中,用戶的注意力分布更加均勻。

但它也有下面的主要缺點:

·網(wǎng)格視圖需要創(chuàng)建更長的頁面,迫使用戶過度使用滾動。

關于視圖的經(jīng)驗法則

查看內(nèi)容最有效的布局是什么?到底應該使用列表還是網(wǎng)格視圖?正確的答案是:視情況而定。

選擇列表視圖與網(wǎng)格視圖的一個關鍵因素是,用戶需要多少信息才能在項目之間進行選擇。但這意味著什么呢?這一切都回到設計的主要原則 -- 內(nèi)容為王。你應該選擇適合你所展示的內(nèi)容類型的布局。

信息使用列表,圖片使用網(wǎng)格

產(chǎn)品頁面就是規(guī)則的一個很好的例子,產(chǎn)品的細節(jié)是非常重要的。對于像家電這樣的產(chǎn)品,諸如型號,等級和尺寸等詳細信息都是選擇過程中的主要因素。因此,使用列表視圖來呈現(xiàn)內(nèi)容是最合理的。

對于需要較少產(chǎn)品信息或類似產(chǎn)品的應用程序,網(wǎng)格視圖是個不錯的選擇。諸如服裝之類的產(chǎn)品,當在產(chǎn)品之間進行選擇時,需要考慮的文本產(chǎn)品信息較少,而且你可以根據(jù)產(chǎn)品的外觀做出決定。在這個瀏覽過程中,用戶關心商品之間的視覺差異,他們更愿意滾動頁面進行商品對比,而不是在列表頁面和產(chǎn)品詳情頁面之間反復切換。

在設計這些布局的時候,選擇合適的圖片尺寸,使其既能夠被識別,但又能為更多的產(chǎn)品在第一時間內(nèi)被看到節(jié)約空間。

誰的用戶體驗效果更好?

最終,使用列表視圖與網(wǎng)格視圖的決定應該與對用戶最有價值的內(nèi)容保持一致。 記住,用戶體驗是關于人性的探究,而不僅僅停留在模式。根據(jù)用戶和他們的需求,找出最適合的視圖模式是非常容易的:提前建立好模擬流程,并通過少數(shù)用戶進行測試。不管什么視圖形式,只要讓用戶更高效工作的視圖就是最好的!

本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司!

分享名稱:講述移動用戶體驗設計之列表視圖與網(wǎng)格視圖
路徑分享:http://www.rwnh.cn/news31/316031.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務定制網(wǎng)站、Google網(wǎng)站改版、網(wǎng)站排名外貿(mào)建站

廣告

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

微信小程序開發(fā)
商河县| 和田市| 小金县| 昌平区| 乐至县| 伽师县| 诸城市| 鸡东县| 丹巴县| 南开区| 上犹县| 综艺| 天祝| 建宁县| 威远县| 兴和县| 全州县| 肥城市| 开原市| 元江| 西宁市| 汉源县| 洞头县| 普宁市| 高阳县| 白玉县| 普兰店市| 霍林郭勒市| 松江区| 赤峰市| 徐州市| 南昌市| 恩平市| 哈尔滨市| 思茅市| 武乡县| 柏乡县| 常宁市| 隆林| 清水县| 肃宁县|