線上服務咨詢
Article/文章
記錄成長點滴 分享您我感悟
隱藏在交互設計背后
發表時間:2019-07-30 15:41:26
文章來源:沈陽軟件開發
標簽:網站建設 小程序開發 小程序制作 微信小程序開發 公眾號開發 微信公眾號開發 網頁設計 網站優化 網站排名 網站設計 微信小程序設計 小程序定制 微信小程序定制
瀏覽次數:0
外行人對交互設計的第一印象是什么?繪制線框?起草?
實際上,每個人都認為交互設計師的日常工作是線框,表面上可以理解。
事實上,交互設計師所做的不止于此。更深入的是,信息架構,接口和流程都是設計師需要考慮的問題。接下來,我想談談我理解的交互設計。
/
交互設計中最重要的兩個因素:信息與安全;相互作用
1.信息
人們每天都要面對如此多的信息,并在雜亂的信息中過濾掉有價值的信息,呈現給用戶,幫助用戶做出選擇,并引導用戶完成任務。信息過濾直接影響用戶的使用,當用戶需要時不可能提供有用的信息,這將使任務變得不可能。因此,信息是交互設計者需要關注的第一個元素。
2.互動
獲得信息后,您需要設計用戶如何與此信息進行交互。信息的分類和布局將影響用戶和信息之間的交互。在用戶獲得信息后,他會做出響應并采取行動。應用程序還需要提供足夠的反饋來幫助用戶完成任務。
/
以上兩個元素反映在用戶的直觀感受上,這意味著它通常在用戶界面中表達。我們可以稱之為“可見的交互設計”。
具體形式包括:
信息架構:對過濾后的信息進行排序,通過頁面傳遞信息,并規劃信息的級別(頁面)
界面設計:頁面上的布局信息
流程設計:連接任務中涉及的頁面信息,使任務形成線性流關系
以上三個關鍵點是交互設計者的基本要求。在許多情況下,非專業人士也可以做7788,但仍然有一部分交互設計,這是不直觀的。也許用戶會稍微感受到它。但他總是讓用戶更隨意地使用它。我們可以稱之為“隱形交互設計”。這些不可見的交互設計也很容易被主要交互設計師忽視。
/
移動互聯網如今正在迅速發展,移動產品更專注于這些無形的互動設計。因為移動應用程序的使用場景,網絡環境和使用心態與使用Web產品時的用戶大不相同。因此,在了解這些不可見的交互設計之前,您需要對移動應用程序場景有所了解。
1.使用場景
使用移動產品的用戶可以在有許多戶外用戶的公共場所使用它。此時,應特別注意移動應用程序設計的隱私性。
用戶可以在家中,床上,上廁所,各種姿勢使用本產品,因此要特別注意互動的便利性和容錯性
2.網絡環境
網絡環境是“隱形交互設計”中非常關鍵的一點。用戶將在2G,3G,wifi甚至無網絡中使用該產品,因此針對各種網絡環境的合理交互設計是移動產品交互設計者的首要任務
3.使用心態
該產品用于解決用戶的問題,移動產品是用戶的個人工具。當用戶需要它時,它可以立即開始工作。它需要快速,直接和有效,用戶不喜歡等待。一些研究結果表明:
/
在移動產品的特殊環境中,“隱形交互設計”比網絡產品更重要,特別是對于網絡環境和用戶等待體驗需要特別關注
以下討論將討論“隱形交互設計”
一般來說,它可歸納為三個主要觀點:
1.加載機制
2.刷新機制
3.緩存機制
/
/
加載機制
通常,我們使用的大部分內容都是網絡應用,他的工作原理就是這樣
用戶在客戶端界面上操作,客戶端向服務器發送請求,服務器處理請求,將數據返回給客戶端,并將其顯示給用戶
其中,客戶端無法感知客戶端與服務器之間的交互過程,他確實需要時間。在不同網絡環境中花費的時間也將不同。如何在此期間使用戶友好?經驗?此時“加載過程”起作用。
/
加載過程的關鍵可以概括為:
1.讓用戶認識到產品正在為他努力
2.讓用戶有基本的心理期望以及等待需要多長時間
3.讓用戶在無聊的等待中獲得更多樂趣
/
進度條是加載過程的一個很好的設計
動態加載進度表明產品正在運行,整體進度和當前進度可以讓用戶及時了解情況,以便用戶可以根據這些信息預測時間,并有心理預期
有趣的進度條設計或在加載過程中顯示一些功能介紹技巧(通常用于游戲)可以有效減少用戶等待的焦慮,并能有效提高用戶容忍度
/
進度條是Web產品時代的產物,還有另一個加載圖標的加載設計
由于移動產品請求的數據量不大,因此進度條趨于即時完成。在這種情況下,加載設計得到簡化,許多移動產品使用加載圖標來指示加載過程。 >
以上是兩種常用的加載方法。以下描述了它們與移動產品結合使用
/
頁面加載機制
移動產品的信息由頁面承載,頁面的加載方案設計是交互設計者面臨的重要問題。
方案一:單頁面整體加載
這種加載相對簡單,通常在頁面內容相對單一時使用,因此在直接加載所有數據后顯示內容。
單頁加載失敗狀態也可以更好地處理
/
方案二:單頁面分塊加載
該方案的特點是,它允許用戶在這個漸進的過程中逐漸看到內容并減少用戶的焦慮
其中,它可以分為相互關聯的模塊,首先加載父內容,然后加載子內容
例如,您可以先加載列,然后加載每列的內容
模塊之間沒有絕對的相關性,每個模塊的內容可以獨立加載,并根據請求的速度單獨顯示。這種處理有機會讓用戶在不完全刷出數據的情況下找到他們需要的功能,例如公眾評論,淘寶客戶端
如果框架是固定的并且內容更新,則可以首先顯示框架,然后可以加載和顯示每個模塊的數據,例如各種iOS引入應用程序,云音樂
這個子模塊加載需要特別注意加載失敗的狀態。畢竟,每個模塊都會提示加載失敗。單擊并重試是一件非常令人沮喪的事情。它可以根據信息的優先級決定哪些數據失敗。哪些數據使用失敗提示
/
方案三:跨頁面加載
父頁面&子頁面或同一個應用程序中,頁面間字段可以重復使用,加載子頁面時無需重新加載新數據
/
方案四:預加載
該加載方法的特征在于在加載頁面內容時預測用戶的下一行為,并加載他接下來需要使用的頁面的內容,以便他可以在不加載的情況下立即獲得下一操作中的信息。等待。
預加載為用戶提供無縫的產品體驗,使用戶在使用產品的過程中更加流暢和不間斷。
具體的例子是:
瀏覽地圖集時,當看到第一張圖片時,第二張,第三張和第四張圖片會自動加載到后臺。當用戶完成瀏覽第一張圖片并切換到第二張圖片時,將沒有等待加載。過程
瀏覽新聞列表時,每個新聞的內容都在后臺預先加載,當用戶選擇觀看某個新聞時,可以立即讀取內容
/
但是,這種解決方案需要面對很多問題。最直接的是流量問題,因為它會自動耗盡許多用戶可能根本不使用的數據流量,因此通常,這種加載模式可以在wifi環境中設置。或者設置加載規則,只預加載主內容,并且當用戶真正使用它時可以加載一些輔助內容。例如,當預加載新聞主體時,只能加載文本信息,并等待用戶輸入圖像信息。內部頁面已加載。預加載和塊加載的這種組合也常用于各種場景中。
此外,預加載也需要時間。他只是不在客戶端向用戶顯示它,它在后臺默默運行。需要特別考慮用戶在不加載用戶的情況下使用信息的情況。因此,在進行預加載設計時,需要考慮另一種適合這種情況的正常加載方法。
需要根據具體場景設置預加載,設置信息優先級,綜合考慮各類信息的具體規模和流量,并考慮整體預加載方法。這些需要仔細分析和思考。
隨著網絡環境的發展,預加載將成為未來產品的通用加載方法,用戶提供的無縫使用體驗大大提高了產品的可用性。
/
操作加載機制
除了需要加載頁面信息外,頁面內的操作還需要向服務器發送請求記錄
方案一:加載層
執行操作后,彈出模態提示圖層以通知用戶它正在加載。
模態提示主要是為了防止用戶在進程中執行其他操作,從而導致當前加載錯誤。由于模態提示,并且由于網絡原因可能會長時間加載,因此建議提供“關閉”操作,中止此加載,并恢復應用程序的可用狀態。當加載失敗時,可以將當前浮動層更改為失敗提示。
模態提示層是最安全的方式,但它會在使用過程中給用戶帶來中斷的感覺。
/
方案二:控件自身加載狀態
此方法將操作負載的狀態與控件的樣式組合在一起。控制操作后,控制轉換為加載狀態,控制不能重復。
由于此加載模式是控件自身的狀態而不影響其他操作,因此用戶可以在頁面上執行其他操作,這可能會同時導致多個請求,從而增加加載失敗的風險。這也是方式。缺點,但這種極端情況很少發生。請求失敗后,Toast提示符可用于通知用戶失敗的原因。
/
方案三:后臺加載
在用戶操作之后,客戶端立即成功地反饋操作,然后將請求放入后臺以與服務器交互。用戶不需要理解該過程,也不需要等待。一般情況下,經驗非常好。
但是,在極端情況下,會出現一些莫名其妙的情況。由于請求記錄在后臺并與服務器交互,因此實際請求成功。客戶沒有解釋。所有這些都成功顯示。這將使用戶認為操作成功。然而,實際上,下次我看到它時,我發現沒有成功。因此,需要根據具體使用場景對該加載方法進行加權。對于某些重要操作,建議使用模態加載。對于一些小的操作,例如喜歡,訂閱和注意,可以采用后臺加載方法。
/
/
刷新機制
刷新機制也是設計人員可以輕易忽略的問題,合理的刷新機制可以使產品使用更順暢
通常,有三種刷新機制:
方案一:手勢刷新
使用手指在屏幕的左側和右側繪制筆劃以達到刷新的目的,包括一些自定義手勢的瀏覽器產品,如水平折疊鉤,以刷新
最常見的下拉刷新也是一種手勢刷新
/
方案二:點擊刷新
通過單擊按鈕可以實現刷新數據的目的,但刷新按鈕的存在已經成為過時的性能。而且,很難為移動電話的界面上的刷新按鈕騰出空間。但是為了避免形式主義,只需使用正確的本質是設計的本質,這種刷新方案仍然是按需使用的。
/
方案三:自動刷新
根據設置的規則,例如時間,事件規則自動獲取新數據到服務器并替換舊數據。需要根據場景考慮使用自動刷新。
場景1——對于經常更新的內容和時間敏感的內容,如果用戶未在設定的時間使用它,您可以考慮自動刷新下一個內容,并將新內容推送給用戶
與微博類似,新聞,如時間敏感的產品,用戶不會在24小時內打開產品,然后幫助用戶在下次打開時自動更新時間線
場景2——對于相對穩定且不經常更改數據的頁面,請考慮設置時間規則以靜默更新數據并替換后臺中的舊數據
/
/
緩存機制
在網絡時代經常聽到“緩存”這個詞,但他的重要性在移動產品中得到了很好的重視
解釋緩存和緩存的作用的圖片
“Cache”是保存已經加載的數據,當下次需要重用時,它不需要加載服務器并直接獲取本地數據
我理解的“緩存”可以分類如下
臨時緩存通常在功能頁面中用于保存每列的緩存。在同一個函數中,子函數被分成多列,每個選項卡列下的內容可以保存為此用途中的臨時緩存。在此函數中,列被切換,無需重新加載數據,使用緩存。顯示。對于用戶,用戶已實現無縫切換瀏覽。對于服務器,數據很少在短時間內更新,因此一般來說,它可以滿足用戶的正常需求并獲得出色的體驗
臨時緩存清理機制是:退出功能模塊將清除以前的緩存。換句話說,下次進入功能模塊時,需要再次檢索數據
很多時候我們使用臨時緩存,因為信息真的不那么重要,我們不需要一遍又一遍地檢查它。對于我們經常使用且經常需要反復查看的信息,我們將使用固定緩存在本地保存。下次瀏覽時,無需再次從服務器請求數據。
它被細分為可手動清理的緩存和無法手動清理的緩存
第一個是我們最常用的緩存,幾乎所有產品都使用它。通常,用戶瀏覽文章,并且庫中加載的數據以此形式在本地緩存。回顧本文和圖庫時,您無需加載它。用戶還可以手動清理這些緩存并釋放空間。
對于某些特殊情況,例如一些相對固定的數據,我們不希望從一開始就將其打包到應用程序中,這將占用太多容量,從而導致大包,并且我們不想加載這些每次進入頁面進入服務器。信息,我該怎么辦?解決方案是我們總是只能加載本地一次,因此安裝包不會很大,以后也不會加載。
例如,一些頁面的背景圖像相對不經常被替換,因此當用戶首次進入頁面時,加載背景圖像并在本地保存。此緩存不可清除。下次進入頁面時,將讀取本地緩存顯示。正好。
這種緩存方案被謹慎使用,因為場景太少而且還沒有開發具體的使用場景。
/
對于本地存儲的這些緩存,它將占用空間。手機的容量有限。產品如何清理緩存?
大家都知道有手動清潔。通常,應用程序將提供清除“設置”中的緩存的功能,并通過單擊釋放空間。此外,該應用程序最好設計一個自動清理機制。
該機制可以在兩個維度上設計。
時間
通過設置固定時間或根據用戶的使用期靈活設置時間來清除緩存。每個產品的場景都不同,用戶的頻率也不同。設置此機制時,需要結合實際情況加以考慮。
容量
通常,設置容量上限,堆棧設計原則用于緩存清理,溢出堆棧的舊數據自動清除
/
網站建設,小程序開發,小程序制作,微信小程序開發,公眾號開發,微信公眾號開發,網頁設計,網站優化,網站排名,網站設計,微信小程序設計,小程序定制,微信小程序定制