只言片語(yǔ)系列:設(shè)計(jì)中的邏輯和加載

3 評(píng)論 3288 瀏覽 14 收藏 11 分鐘

長(zhǎng)篇大論以不適合這個(gè)時(shí)代,你需要醍醐灌頂?shù)撵`感和話(huà)語(yǔ),這是一篇小短文,只講一件事,希望大家有所收獲。

設(shè)計(jì)的邏輯

商業(yè)設(shè)計(jì)始終是用來(lái)解決設(shè)計(jì)的一個(gè)過(guò)程,我們?cè)谠O(shè)計(jì)過(guò)程中,首先會(huì)想到色彩與排版,往往忽視了背后信息呈現(xiàn)的邏輯。

  • 第一種是:如何通過(guò)手中已有的資源和條件整合并能夠互相印證為自己的設(shè)計(jì)鋪墊。
  • 第二種是:如何以用戶(hù)為中心,非常細(xì)致的將效果完整落地。

設(shè)計(jì),非常像我們以前做的數(shù)學(xué)題,唯一不同的是設(shè)計(jì)沒(méi)有唯一答案。

在做數(shù)學(xué)題的過(guò)程中,我們發(fā)現(xiàn)了兩種條件,已知條件和未知條件,未知條件又可以稱(chēng)為推導(dǎo)條件,最后將所有推導(dǎo)條件羅列并進(jìn)行再次整合加工,即可得到答案。

但是我們會(huì)發(fā)現(xiàn):為什么我們所做的設(shè)計(jì)總是存在明顯的錯(cuò)誤,甚至無(wú)法經(jīng)得起追問(wèn)。

原因在這里:在做設(shè)計(jì)時(shí),腦海中往往出現(xiàn)了很多已知條件,顏色為xxx,寬度為xxx,此信息優(yōu)先級(jí)為高等等。但是很多細(xì)節(jié)無(wú)法通過(guò)單一的已知條件得出推導(dǎo)條件,或者說(shuō)我們的已知信息太少。這里的已知信息包括:規(guī)范、色彩排版、心理學(xué)、用戶(hù)畫(huà)像、業(yè)務(wù)訴求、用戶(hù)訴求、開(kāi)發(fā)技術(shù)等等。

可想而知,如此復(fù)雜的“已知”條件都還沒(méi)有完全歸納,如何得出最后的推導(dǎo)條件呢?其實(shí)每個(gè)人的邏輯能力并不相差太大,只不過(guò)很多人不夠細(xì)心,這就導(dǎo)致了已知條件越缺失,推導(dǎo)條件差距越大,最終方案的準(zhǔn)確度也就想差的越大。

推導(dǎo)也是一個(gè)平衡的過(guò)程,一個(gè)在多方角色轉(zhuǎn)換的過(guò)程,提前考慮他人的假設(shè)才能更游刃有余。當(dāng)方案最終產(chǎn)出之后,設(shè)計(jì)師依然需要對(duì)方案的落地更盡心盡力,真正的流程還未走完,完整產(chǎn)品邏輯,才能最終服務(wù)用戶(hù)。

總結(jié)

設(shè)計(jì)師的邏輯來(lái)源于對(duì)已知信息的整理歸納,以及對(duì)未知信息的洞察及推導(dǎo),當(dāng)我們能夠多角度,多層次看待一個(gè)設(shè)計(jì)的時(shí)候,我們就能做出更加精準(zhǔn)的設(shè)計(jì)。

什么是加載?

加載在互聯(lián)網(wǎng)環(huán)境中可以理解為等待數(shù)據(jù)呈現(xiàn)的過(guò)程,也是一種反饋的狀態(tài)。當(dāng)用戶(hù)對(duì)媒介進(jìn)行交互行為之后觸發(fā)的一種等待反饋。

換個(gè)說(shuō)法:你去飯店點(diǎn)菜,等待后廚上菜的過(guò)程,就是加載。

我們?cè)僖詧D示幫助大家更好的理解,數(shù)據(jù)是如何通過(guò)一些列復(fù)雜的流轉(zhuǎn)最終呈現(xiàn)給用戶(hù)的。用戶(hù)在客戶(hù)端中進(jìn)行操作,觸發(fā)一個(gè)事件,例如:點(diǎn)擊外賣(mài)商品列表。然后客戶(hù)端向服務(wù)端發(fā)送一個(gè)信號(hào):“用戶(hù)要一只烤雞、一只燒鵝、一盤(pán)豬大腸”。

這時(shí)服務(wù)端收到了這個(gè)信號(hào),并開(kāi)始尋找材料(數(shù)據(jù)),對(duì)材料進(jìn)行烹飪(整理數(shù)據(jù)打包)。再之后服務(wù)端需要對(duì)最后的成果進(jìn)行擺盤(pán)(美化/渲染),最終送到用戶(hù)的手中。

但實(shí)際上,用戶(hù)在出發(fā)事件到最后看到呈現(xiàn)的內(nèi)容這一段時(shí)間都是在等待,也就是在等待加載完成。而客戶(hù)端和服務(wù)端的數(shù)據(jù)交互,都需要一定的時(shí)間來(lái)完成。

數(shù)據(jù)的發(fā)送和接受取決于網(wǎng)絡(luò)的好差,數(shù)據(jù)的查找和整合取決于服務(wù)端的性能和容量,最后呈現(xiàn)給用戶(hù)的渲染取決于客戶(hù)端的性能,高端手機(jī)和低端手機(jī)在顯示內(nèi)容的質(zhì)量及快慢都有不同的差距。

所以,我們希望能減少用戶(hù)等待的時(shí)間,對(duì)每個(gè)步驟進(jìn)行優(yōu)化,針對(duì)數(shù)據(jù)信息類(lèi)型的不同采取不同的加載方式,以滿(mǎn)足用戶(hù)的心里預(yù)期和更好的體驗(yàn)。

加載的類(lèi)型和使用場(chǎng)景

1. 模態(tài)加載

模態(tài)加載比較暴力,當(dāng)用戶(hù)出發(fā)事件后模態(tài)加載將會(huì)獨(dú)占客戶(hù)端。意思就是:我正在幫你做菜,并且我要全部做完才能給你,這時(shí)你只能等待。這種體驗(yàn)并不是很好,如果數(shù)據(jù)相當(dāng)龐大,那么大部分用戶(hù)會(huì)失去耐心。除非是不完整加載出來(lái)就會(huì)導(dǎo)致嚴(yán)重失誤的場(chǎng)景,否則盡量不使用模態(tài)加載。

當(dāng)我們需要一起讓用戶(hù)顯示但是減少用戶(hù)內(nèi)容焦慮的時(shí)候,我們通常會(huì)采用占位圖布局預(yù)先加載的展示樣式,以及情感化動(dòng)效/插畫(huà)。

例如:豆瓣,在點(diǎn)擊首頁(yè)列表中的內(nèi)容后跳轉(zhuǎn)到詳情,此時(shí)由于數(shù)據(jù)還未返回,他使用了一張資源較小的圖片來(lái)展示給用戶(hù),告訴了用戶(hù)即將加載出來(lái)的信息大致的布局和輪廓,讓用戶(hù)提前有心理預(yù)期。但是需要注意的是:如果該頁(yè)面會(huì)有多種變化時(shí)就不要用該方法。

2. 非模態(tài)加載

非模態(tài)加載相對(duì)來(lái)說(shuō)就友好很多了,采用非模態(tài)加載,能夠在用戶(hù)等待獲取數(shù)據(jù)的同時(shí),允許用戶(hù)對(duì)當(dāng)前頁(yè)面其他的內(nèi)容進(jìn)行操作。

(1)分步加載(懶加載/分頁(yè)加載)

懶加載是我們通常會(huì)使用到的加載,舉個(gè)例子:用戶(hù)點(diǎn)完餐之后,通常所有菜一起烹飪完再交給用戶(hù)需要10分鐘,但是一般飯館都是做一道菜就交給了用戶(hù),這樣不會(huì)使用戶(hù)等待時(shí)間太久而產(chǎn)生負(fù)面情緒或流失。

所以,懶加載通常還會(huì)有以下幾種不同的選擇方式:

  1. 先加載文字等較小的資源,再加載圖片、視頻等較大的資源。
  2. 根據(jù)用戶(hù)的瀏覽行為來(lái)逐漸加載內(nèi)容,當(dāng)用戶(hù)瀏覽到該區(qū)域再進(jìn)行加載。
  3. 當(dāng)用戶(hù)的行為滿(mǎn)足某些條件之后再進(jìn)行加載。

所以這樣加載的好處就是減少用戶(hù)的等待時(shí)間,以及提高信息渲染的效率。分頁(yè)加載可以理解為當(dāng)前獲取到100條數(shù)據(jù),但是將100條數(shù)據(jù)分別拆成5頁(yè)每頁(yè)20條數(shù)據(jù)提供給用戶(hù),這樣也可以讓用戶(hù)減少等待時(shí)間。

(2)預(yù)加載

我們發(fā)現(xiàn)懶加載還是不能滿(mǎn)足用戶(hù)的需求,當(dāng)用戶(hù)瀏覽未加載的內(nèi)容時(shí)依然要等待。所以這里又出現(xiàn)了一個(gè)加載方式-預(yù)加載。

預(yù)加載可以理解為當(dāng)用戶(hù)在瀏覽內(nèi)容A的時(shí)候,系統(tǒng)預(yù)先判斷他接下來(lái)會(huì)進(jìn)行的操作行為,并對(duì)這部分內(nèi)容進(jìn)行提前的請(qǐng)求。他并不能解決網(wǎng)絡(luò)請(qǐng)求緩慢的問(wèn)題,而只是提前發(fā)起網(wǎng)絡(luò)請(qǐng)求,緩解問(wèn)題。

但是預(yù)加載的邏輯會(huì)更加復(fù)雜,比如:如何判斷何時(shí)進(jìn)行預(yù)加載,以及預(yù)加載呈現(xiàn)的時(shí)間。需要考慮用戶(hù)在當(dāng)前頁(yè)面的核心場(chǎng)景考慮使用不同的加載方式。例如:咨詢(xún)類(lèi)app,會(huì)在用戶(hù)瀏覽資訊列表時(shí),對(duì)當(dāng)前或者某一部分列表的詳情內(nèi)容進(jìn)行文字加載,以及判斷列表頁(yè)面滾動(dòng)的占比來(lái)觸發(fā)接下來(lái)內(nèi)容的機(jī)制。

但是列表預(yù)加載嚴(yán)格上來(lái)說(shuō)不屬于預(yù)加載,只是當(dāng)用戶(hù)滑動(dòng)頁(yè)面到一定條件觸發(fā)了下一部分內(nèi)容的加載。

(3)智能加載

在不同網(wǎng)絡(luò)環(huán)境下,某些客戶(hù)端會(huì)采用加載不同的資源,不同的渲染效果來(lái)給用戶(hù)進(jìn)行視覺(jué)呈現(xiàn),例如:在4g網(wǎng)絡(luò)下用戶(hù)瀏覽視頻,會(huì)默認(rèn)采用質(zhì)量最低的視頻資源提供給用戶(hù)。另外在wifi環(huán)境下客戶(hù)端會(huì)自動(dòng)加載后續(xù)內(nèi)容。

總結(jié)

加載的方式多種多樣,但是我們?cè)谶x擇使用時(shí),需要考慮用戶(hù)具體的場(chǎng)景而定,所有加載方式都有其優(yōu)缺點(diǎn),并沒(méi)有最優(yōu)的方式。一旦選對(duì)了合適的加載方式以及優(yōu)化加載的過(guò)程之后,用戶(hù)體驗(yàn)必定會(huì)有所提升。

#專(zhuān)欄作家#

Yjjj,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家,公眾號(hào):應(yīng)謀鬼計(jì)(shejishiyj)

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

題圖作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 這篇文章好像之前有人寫(xiě)過(guò),又溫習(xí)了一遍 ??

    來(lái)自吉林 回復(fù)
    1. 都是這些東西,基本上都寫(xiě)過(guò)了

      來(lái)自浙江 回復(fù)