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

移動(dòng)用戶(手機(jī)網(wǎng)站)體驗(yàn)設(shè)計(jì)之列表視圖與網(wǎng)格視圖

2021-12-23    分類: 網(wǎng)站建設(shè)

盡管大屏幕手機(jī)已逐漸成為當(dāng)下主流趨勢(shì),但是小尺寸的手機(jī)更加方便和便攜。不過與臺(tái)式機(jī)和筆記本電腦屏幕相比,手機(jī)屏幕(無(wú)論屏幕大?。┧艹尸F(xiàn)的內(nèi)容要少得多。通常用戶只能預(yù)覽一小部分內(nèi)容,需要滾動(dòng)屏幕才能查看更多內(nèi)容。
今天,我將概述兩種基本的內(nèi)容呈現(xiàn)模式 - 列表視圖和網(wǎng)格視圖,并為兩者提供了使用案例。

列表視圖和網(wǎng)格視圖
列表視圖
列表將多個(gè)行項(xiàng)作為一個(gè)連續(xù)的元素垂直地呈現(xiàn)。它的文本較為繁重,而且通常只有很小的圖標(biāo)和文本。列表視圖項(xiàng)目所需的垂直空間比圖像要少,因此它可以在屏幕上顯示更多的列表項(xiàng)。
列表視圖示例
內(nèi)容掃描
列表視圖為用戶提供了一種遵循自然閱讀習(xí)慣的模式,即F形閱讀模式。
Web內(nèi)容的F形閱讀模式示例
列表最適合呈現(xiàn)同類數(shù)據(jù)類型,并為閱讀理解進(jìn)行了優(yōu)化。列表視圖可以通過縮短頁(yè)面來(lái)避免太多的滾動(dòng)。排除圖片(列表視圖只有小圖標(biāo))可以讓你在每個(gè)屏幕上放置更多的選項(xiàng)。
具有典型掃描模式的列表示例
需要注意的是,在處理列表視圖時(shí),用戶的注意力會(huì)從上到下遞減。
決策
用戶主要依賴于閱讀文本內(nèi)容來(lái)進(jìn)行選擇。
優(yōu)點(diǎn)和缺點(diǎn)
與網(wǎng)格視圖相比,列表視圖具有以下優(yōu)點(diǎn):
列表視圖遵循自然的閱讀模式。
列表視圖通過在可見區(qū)域提供更多選項(xiàng)來(lái)防止過度滾動(dòng)。
但是它也有一些缺點(diǎn):
在視覺外觀方面,列表視圖的效果不是很理想。
在列表視圖中,用戶的注意力會(huì)從上到下遞減。
網(wǎng)格視圖
網(wǎng)格視圖是標(biāo)準(zhǔn)列表視圖的另一種選擇。網(wǎng)格列表與用于布局和其他可視化演示的網(wǎng)格不同,網(wǎng)格列表由網(wǎng)格列表中垂直和水平排列的單元格組成。
網(wǎng)格列表示例
內(nèi)容掃描
網(wǎng)格視圖為用戶提供了更具中斷性的掃描格式,使其最適用于視覺內(nèi)容。通常,這些圖像占據(jù)了大部分的單元格空間。
具有典型掃描模式的網(wǎng)格示例
使用網(wǎng)格視圖,用戶的注意力能夠在每個(gè)網(wǎng)格單元之間分布地更均勻。因此,網(wǎng)格視圖可以優(yōu)化視覺理解和區(qū)分相似的數(shù)據(jù)類型。
用戶決策
用戶主要依靠圖像進(jìn)行選擇。這里需要注意的是用戶在同一時(shí)刻只能看到4- 6 個(gè)網(wǎng)格選項(xiàng)。
電子商務(wù)網(wǎng)站的網(wǎng)格視圖示例
優(yōu)點(diǎn)和缺點(diǎn)
網(wǎng)格視圖有以下優(yōu)點(diǎn):
網(wǎng)格視圖更吸引眼球 。
網(wǎng)格視圖幫助用戶判斷項(xiàng)目之間的視覺差異。
在網(wǎng)格視圖中,用戶的注意力分布更加均勻。
但它也有下面的主要缺點(diǎn):
網(wǎng)格視圖需要?jiǎng)?chuàng)建更長(zhǎng)的頁(yè)面,迫使用戶過度使用滾動(dòng)。
在下面的示例中,你可以看到列表視圖和網(wǎng)格視圖之間的區(qū)別。

紅線顯示屏幕的可見部分
關(guān)于視圖的經(jīng)驗(yàn)法則
查看內(nèi)容最有效的布局是什么?到底應(yīng)該使用列表還是網(wǎng)格視圖?正確的答案是:視情況而定。
選擇列表視圖與網(wǎng)格視圖的一個(gè)關(guān)鍵因素是,用戶需要多少信息才能在項(xiàng)目之間進(jìn)行選擇。但這意味著什么呢?這一切都回到設(shè)計(jì)的主要原則 -- 內(nèi)容為王。你應(yīng)該選擇適合你所展示的內(nèi)容類型的布局。
信息使用列表,圖片使用網(wǎng)格
產(chǎn)品頁(yè)面就是規(guī)則的一個(gè)很好的例子,產(chǎn)品的細(xì)節(jié)是非常重要的。對(duì)于像家電這樣的產(chǎn)品,諸如型號(hào),等級(jí)和尺寸等詳細(xì)信息都是選擇過程中的主要因素。因此,使用列表視圖來(lái)呈現(xiàn)內(nèi)容是最合理的。
適用于iOS的WallMart應(yīng)用程序
對(duì)于需要較少產(chǎn)品信息或類似產(chǎn)品的應(yīng)用程序,網(wǎng)格視圖是個(gè)不錯(cuò)的選擇。諸如服裝之類的產(chǎn)品,當(dāng)在產(chǎn)品之間進(jìn)行選擇時(shí),需要考慮的文本產(chǎn)品信息較少,而且你可以根據(jù)產(chǎn)品的外觀做出決定。在這個(gè)瀏覽過程中,用戶關(guān)心商品之間的視覺差異,他們更愿意滾動(dòng)頁(yè)面進(jìn)行商品對(duì)比,而不是在列表頁(yè)面和產(chǎn)品詳情頁(yè)面之間反復(fù)切換。
MrPorter iOS應(yīng)用程序
在設(shè)計(jì)這些布局的時(shí)候,選擇合適的圖片尺寸,使其既能夠被識(shí)別,但又能為更多的產(chǎn)品在第一時(shí)間內(nèi)被看到節(jié)約空間。
誰(shuí)的用戶體驗(yàn)效果更好?
最終,使用列表視圖與網(wǎng)格視圖的決定應(yīng)該與對(duì)用戶最有價(jià)值的內(nèi)容保持一致。 記住,用戶體驗(yàn)是關(guān)于人性的探究,而不僅僅停留在模式。根據(jù)用戶和他們的需求,找出最適合的視圖模式是非常容易的:提前建立好模擬流程,并通過少數(shù)用戶進(jìn)行測(cè)試。不管什么視圖形式,只要讓用戶更高效工作的視圖就是最好的!

網(wǎng)站欄目:移動(dòng)用戶(手機(jī)網(wǎng)站)體驗(yàn)設(shè)計(jì)之列表視圖與網(wǎng)格視圖
分享網(wǎng)址:http://m.rwnh.cn/news23/141723.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、虛擬主機(jī)

廣告

聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
郯城县| 宁强县| 安化县| 泸定县| 阜宁县| 济源市| 兴安盟| 南召县| 沂源县| 乌拉特中旗| 偃师市| 永宁县| 谢通门县| 伊吾县| 左权县| 砚山县| 武夷山市| 静海县| 湾仔区| 丹东市| 依安县| 长武县| 松滋市| 涿州市| 凤庆县| 菏泽市| 徐水县| 西安市| 金秀| 禹城市| 永嘉县| 咸阳市| 双流县| 靖江市| 宜昌市| 宜川县| 石首市| 南阳市| 满洲里市| 万源市| 凌云县|