中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：平時(shí)項(xiàng)目或產(chǎn)品設(shè)計(jì)中難免會遇到列表相關(guān)的需求，本文結(jié)合“完形心理學(xué)” “尼爾森視覺閱讀模型”，通過通俗易懂的方式來優(yōu)化一個(gè)列表頁，一起來看看吧。

一、改版契機(jī)

經(jīng)過一段時(shí)間，最初的版本首頁中從用戶反饋中得知對于“推薦閱讀”模塊很難去理解，閱讀比較費(fèi)時(shí)，三個(gè)模塊堆疊在一處不明確要先看哪個(gè)而且每次都要通過tab切換。從業(yè)務(wù)層面來說目前的使用體驗(yàn)對熱銷產(chǎn)品的商業(yè)轉(zhuǎn)化上也構(gòu)成了一定的影響。

雖然后來有過一次優(yōu)化由于時(shí)間成本的壓縮從最初的版本版本停留在了過渡期。發(fā)現(xiàn)頁本質(zhì)是所承載的內(nèi)容其實(shí)是想更有效的提供給用戶保險(xiǎn)相關(guān)的認(rèn)知信息，提升健康意識的目的。

現(xiàn)階段業(yè)務(wù)新增視頻需求、為了補(bǔ)齊同行競品中的通用功能，滿足用戶多場景訴求，需要重新對發(fā)現(xiàn)頁內(nèi)容重新梳理優(yōu)化。

1. 提煉問題

2. 任務(wù)路徑

二、設(shè)計(jì)策略

基于目前發(fā)現(xiàn)的問題和新增需求，通過內(nèi)部討論以及用戶回訪制定了以下設(shè)計(jì)策略。

1.用戶易理解的內(nèi)容

2.符合用戶的閱讀習(xí)慣

1. 內(nèi)容分層

從原有的頁面中不難發(fā)現(xiàn)，目前頁面中有很多不同類型的內(nèi)容，而且輔助信息內(nèi)容過長，容易引起閱讀厭倦，導(dǎo)致大部分用戶其實(shí)對于這些內(nèi)容沒有一個(gè)準(zhǔn)確的定位，且現(xiàn)有內(nèi)容欠缺規(guī)劃對于用戶查看效率低。我們需要提煉梳理出不同的各分類信息。

2. 結(jié)構(gòu)搭建

基于這些問題，整個(gè)結(jié)構(gòu)需要更直觀、易懂是降低用戶思考成本關(guān)鍵所在。我們通過將現(xiàn)內(nèi)容做出梳理分類，按照全部、每日資訊、保險(xiǎn)干貨、健康養(yǎng)生的順序排列，保證用戶能更輕松、準(zhǔn)確的觸達(dá)所需信息。并且根據(jù)業(yè)務(wù)需求和不同用戶瀏覽場景添加視頻內(nèi)容。

3. 視覺動線

先分析下原有的頁面中列表信息包括標(biāo)題、左圖片、右輔助信息、左時(shí)間、右閱讀數(shù)量信息。整個(gè)視覺動線非常復(fù)雜這樣的閱讀非常影響用戶的閱讀體驗(yàn)。

基于尼爾森的F型閱讀視線模型中用戶瀏覽頁面時(shí)從上到下、從左到右的順序來閱讀顯然現(xiàn)有頁面用戶瀏覽習(xí)慣與之相違背。

文章也好，圖文列表也罷首先要考慮用戶的閱讀的先后順序。讓用戶視線按照順序自然流暢的移動，能更好地傳達(dá)列表信息。相反若視線移動停頓、不斷折返會使用戶產(chǎn)生不必要的疲勞，也很難表達(dá)出設(shè)計(jì)目的。根據(jù)不同的設(shè)計(jì)，思考并正確引導(dǎo)視線移動方向，是為設(shè)計(jì)添彩的有力手段。

我們盡可能要讓列表中的圖文閱讀保持一致性。目前現(xiàn)有很多信息傳達(dá)為主的頁面中也是更傾向于通過文字優(yōu)先，而圖片作為輔助信息。其實(shí)圖片的視覺引導(dǎo)會大于文字的但是由于此頁面中除了特殊的圖片與文案標(biāo)題相呼應(yīng)大部分情況是不能專業(yè)性表達(dá)出內(nèi)容。所以圖片放在文字后面也是可包容的。再結(jié)合尼爾森的F型閱讀視線模型將現(xiàn)有列表修改為信息放在左邊圖片放在右邊，也更有利于用戶獲取信息。

4. 建立條理

1.信息的整理（理解設(shè)計(jì)的意圖、提取要素、正確布置是設(shè)計(jì)的第一步）/也可以理解為信息降噪

• 這個(gè)工作可分為“理解”“提取”“布置”三步。
• 第一步是“理解”階段考慮以什么樣的方式展現(xiàn)。
• 第二步是“提取”這里首先要明確列表中什么是最重要的，根據(jù)重要程度進(jìn)行排序。
• 第三步是“布置”的階段。提取完元素之后，重新梳理信息層級。強(qiáng)化列表內(nèi)有效信息，刪除冗余信息，以便更有效的傳遞給用戶。

2.貼近和遠(yuǎn)離 （將同類型要素貼近搭配，使整體頁面更容易閱讀）

讓用戶感覺整個(gè)頁面有條理其實(shí)并不困難。因?yàn)槿藗儠乱庾R地想從看到的東西中找出某些條理或意思。這種被稱為“完形心理”的現(xiàn)象，主張研究直接經(jīng)驗(yàn)（即意識）和行為，強(qiáng)調(diào)經(jīng)驗(yàn)和行為的整體性，認(rèn)為整體不等于并且大于部分之和，主張以整體的動力結(jié)構(gòu)觀來研究心理現(xiàn)象。該心理學(xué)學(xué)派的創(chuàng)始人是韋特海默，代表人物還有苛勒和考夫卡。

3.排列和對齊 （將細(xì)節(jié)部分設(shè)計(jì)得整齊有序，為頁面帶來整潔、有條不紊的美感）

在先前文章中我們對首頁進(jìn)行改版時(shí)已經(jīng)制定了柵格系統(tǒng)，可以運(yùn)用柵格系統(tǒng)來更有條理的排列元素間距，加強(qiáng)頁面閱讀一致性。

頁面中所展示的圖片來源于網(wǎng)絡(luò)，在此僅用于展示，學(xué)習(xí)用，不作為商業(yè)用途

通過用戶的閱讀順序（習(xí)慣）來做出相應(yīng)的思考并正確引導(dǎo)視線移動方向。理清用戶更易理解的內(nèi)容來提升瀏覽效率。這種設(shè)計(jì)策略并非適用所有產(chǎn)品要看當(dāng)下業(yè)務(wù)需求和用戶角度中尋找一個(gè)平衡點(diǎn)是相對關(guān)鍵的。以上就是本次分享的內(nèi)容了。希望對大家有幫助。

參考文獻(xiàn)：

《版面設(shè)計(jì)的原理》 伊達(dá)千代&內(nèi)藤孝彥 著

“完形心理” 即 格式塔心理學(xué)

尼爾森用戶體驗(yàn)原則

資訊流到底該左文右圖還是左圖右文？

作者：KG? ?公眾號：KG的設(shè)計(jì)沉淀

本文由 @KG 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議