<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          軟件產品中,如何減少頁面跳轉?

          資深UI設計者

          這就是信息的無限性和手機屏幕的有限性之間的矛盾,如何把信息合理的展示給用戶,需要我們重新對信息進行組織分類,使信息能更高效有序地被用戶認知。在進行信息設計的時候,我們會經常遇到“扁平化設計”這個詞,在我的理解看來,扁平化設計可以理解為:“精簡交互步驟,用戶用最少的步驟就完成任務”。層級太多了用戶就會看不懂;即使看得懂,層級多了用起來也麻煩,因此:手機上能不跳轉就不跳轉。那我們就來看看有沒有辦法減少跳轉…

          54個絕妙UI/UX設計秘訣:讓你的設計脫穎而出!

          天宇

          當你為你的項目創建有效的,可訪問的,漂亮的ui時,只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設計,還有用戶體驗。

          希望你喜歡!

          1·讓你的元素出現更多

           

          用微妙的邊界定義。

          使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現

          更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。

           

           

          2.減少字母間距

           

          標題給一個更好的光學范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標題……我要說“是”!

          你的標題很可能會比他們的標題更大,更重。相比于正文,字母之間的間距有時會出現視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標題視覺平衡,更易于閱讀,通常更賞心悅目。

           

           

          3.圖表一致性

           

          為了一致性,確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量,要么填滿,要么秒變了。不要混搭。

           

           

          4.頁面可以用一種字體

           

          只使用一種字體就很好。在設計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。

           

           

          5.適當的留白

           

          留白是UI設計朋友。大膽的使用。適度的留白,即使是少量的白色物質,但要使用得當。能讓你的設計透氣,而且看起來更光亮。

           

           

          6.20pt的文字

           

          創建長篇內容?給20 pt試試。對于長形式的內容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當然,這取決于所選擇的字體,但大多數流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。

           

           

          7.字號集比例

           

          使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。

           

           

          8.界面顏色定義

           

          選擇一個基本顏色,然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許,簡單地使用一個有限的調色板選擇一個基地顏色,然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。

           

           

          9.登陸用戶體驗

           

          改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整,可以為你的用戶提供更好的體驗……

          記住,拇指仍然是主宰!

           

           

           

          10.陰影來自一個光源

           

          你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設計看起來更拋光且統一。記住,我們不是生活在一個擁有一千個太陽的國度里。

           

           

           

          11.建立字體集合

           

          使用更好的字體組合,效率會很很快。當你想要提高你的字體組合技巧的時候,當面對1000個字體選擇,只是去尋找對應的自己集合,效率會快很多。

           

           

           

          12.提高你的對比

           

          文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復雜的內容和圖片。

           

           

          13.使用居中排列文字要有節制

           

          太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容,保持文本左對齊。你的用戶會感謝你的你。

           

           

          14.多字重

           

          當選擇一個多用途的文字,盡量找一個大量權重。你搜索的字體有很多選擇嗎?重量、風格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當然也有例外,某些項目會要求“只有一種風格”

          更精致的字體,但對于絕大多數項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格,希望你在設計過程的后期需要更多的空間。

           

           

           

          15.淺色背景不要文本過亮

           

          想要創造更容易理解的界面,對吧?把你的文字調暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。

           

           

          16.純黑色文字未必是好

           

          當涉及到長形式的內容時,某些常規的粗細字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調,把文字往下寫,讓眼睛更容易看。

           

           

          17.通過色彩對比度作區分

          總是通過icon最突出的內容。你認為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區分,尺寸和標簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標。如果可以使用文本標簽,那就使用它們,讓用戶更好地理解。

           

           

          18.字體越小,行高越大

           

          當你的字體變小時,請增加行高,以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。

           

           

          19.“Il1”測試文字可讀性

           

          使用x-height來測試字體的可讀性。基本上,x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數字1。

           

           

           

          20.突出實用動作

           

          當設計一個在應用程序內部使用的菜單時,確保提供最多經常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。

           

           

           

          21.顏色-從你的圖像中選擇

           

          顏色-從你的圖像中選擇,會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色,然后應用各種色調。你選擇的顏色陰影到你的背景,文字,圖標或更多,可以添加。你的設計具有豐富的視覺趣味和個性。

           

           

          22.不同字體,不同行高

           

          基于字體的x坐標,設置您的線高度。不同x高的字體需要不同的行高測量,實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現。

           

           

          23.突出最重要元素的方式

           

          突出最重要的元素。通過使用字體大小,權重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調整,讓用戶體驗更好一點。

           

           

          24.錯誤下額外的視覺輔助

           

          操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當他們填寫任何形式的表格時額外的視覺輔助。

           

           

          25.移動端熱區創建

           

          嘗試在移動端創建慷慨的熱區。當為移動設備設計時,嘗試創建足夠大的可點擊區域,是好的。對于只包含文本的按鈕和鏈接來說,這是很有挑戰性的,盡可能使用帶有標簽的圖標。

          以下是iOS和Android的最小推薦點擊區域:

          44 x 44pt用于iOS

          48x48dp用于Android

           

           

          26.短標題上盡量使用全大寫

           

          在短標題上盡量使用全大寫。如果你想在標題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。

           

           

          27.保持文字與圖像的對比度

           

          在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。

           

           

          28.英文標題字體推薦

           

          看看這些很棒的字體,用在標題非常好的。發現他們真的很適合標題,設計感很強。(我沒有推廣費用,請放心用)

           

           

          29.英文長文本字體推薦

           

          看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。

           

           

          30.讓垂直節奏恰到好處

           

          標題和正文。當你想實現一個好的垂直節奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設計。我見過許多設計,最常見的是在文章列表中,它們已經被應用標題的上下空白相等,這樣就失去了這種聯系在它下面有正文。在這種情況下,我總是會給我的標題更多的頂部邊距,而在底部,標題和下面的內容之間的連接是更強,有良好的垂直節奏,視覺層次保留在所有的文章之間。

           

           

          31.使用具有信息性的提示符

           

          對于下載指標,試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點,用百分數來顯示當前進度,一個簡單的圖標,讓他們可以在任何地方取消下載時間。

           

           

           

          32.保持標題相對簡潔

           

          如果你能保持標題簡短,簡潔……“想做就做”。

          如果可以,如果合適的話,保持標題簡短,時髦,切中要點。而不是“這是你的風格,你的方式”,簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽,保持這些標題簡短有力有助于他們更快地消化中的信息。

          記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標受眾來決定方法是合適的,相對于更標準的格式。

           

           

          33.選擇合適的字體

           

          正確的設計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時,這似乎是一項艱巨的任務,所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。

           

           

           

          34.行長度的平衡點

           

          你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

          35.幽靈文字提升用戶體驗

           

          偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。



           

           

          36.界面元素保證快速區分

           

          使用戶界面中的元素彼此區分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區分開來,輕松掃描您的網站或應用程序。按鈕,在大多數情況下,將優先,所以確保他們是最突出的。項目在屏幕上,并很容易區分其他元素。

           

           

          37.投影的玩兒法

           

          只是一些細微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設計中使用要適度。現實世界中的陰影,在大多數情況下幾乎是不可察覺的,而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現一些的東西更微妙和栩栩如生。

           



          38.全大寫文本

          使用全部大寫?選擇適合的字體,能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學清晰度。

           

           

          39.讓面包屑脫穎而出

          讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經常用于內容豐富的網站,通過最小的調整,你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度,這一點尤其有用。

           

           

          40.嘗試用高飽和顏色

           

          使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒,但是當過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應該是最優先的。

           

           

           

          41.圖表不要叛逆的使用

           

          在ui中使用已建立的圖標,為了避免給用戶造成混淆。在你的設計中添加圖標時,試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑,成為用戶的認知障礙。不要在這些圖標上過于叛逆。

           

           

           

          42.接近原則

           

          在眾多經過嘗試和測試的設計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程,表明彼此之間的關系,這有助于加快用戶的認知。

           

           

           

          43.文本網格

          4pt基線網格+ 8pt網格=單一網格。當使用類型時,8點網格旁邊使用4點基線

          可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4,使用的行高值為4的倍數(16、20、24、28等)

          為什么4?我發現在過去使用特定的文本大小時,按8的倍數縮放是不太合適。

           

           

           

          44.文本建議行高比例

          減少標題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標題的推薦行高通常約為1至1.3倍。

           

           

          45.顏色選擇

           

          選顏色有困難計劃嗎?在顏色上進行類比論。類似的顏色,也被稱為相鄰或相鄰的色調,是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的,顏色方案快速。當你需要快速將顏色調和到混合中時,可以使用類似的方法。

           

           

          46.提高信噪比

           

          在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲,從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效,不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

           

           

          47.圖像文字達到強對比

           

          我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。

           

           

          48.使用重量、大小和顏色來表示類型中的層次結構

           

          當使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產生任何混淆。

           

           

          49.淺色文字加深色?

           

          養肥了,字體大小為最佳易讀性。當設置暗色文字與淺色背景,選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標,避免讓用戶的眼睛疲勞。

           

           

           

          50. 用你的字體選擇創造正確的情感回應

           

          試著為你要呈現的內容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當內容與他們交談當它不是。正確的字體選擇是至關重要的,使您的內容講給他們直率和情感的水平。

           

           

          51.大寫字母+字母間距=更好的易讀性

           

          你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。

           

           

          52.錯誤告知

           

          打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救。總是讓用戶了解情況,即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。

           

           

           

          53.告知用戶正在發生什么

           

          試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循,并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。

           

           

           

          54.不可逆的操作強提醒

           

          告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前,總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為,如刪除某些東西。讓用戶知道將要發生什么,并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。

           

           

           

          參考文獻《UI & UX Micro Tips - The Ultimate Collection》

           



          作者:DesignLink
          鏈接:https://www.zcool.com.cn/article/ZMTI1NjIyMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          大廠搜索哪家強?這些交互設計值得你收藏學習!

          天宇

          大體上分為兩類:彩蛋流和體驗流

          搜索的本質是什么?無疑是內容的召回和信息的推薦。

          可隨著時代的發展和行業公司的內卷,不少公司除了持續優化搜索結果與推薦外,在搜索的體驗和彩蛋上也是下了不少功夫,從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些,那有意思的大廠搜索交互。

          大體上分為兩類:彩蛋流和體驗流

          A.彩蛋流

          注重提升搜索過程中的趣味程度,以增加用戶的好感度與產品印象/口碑。行業代表:谷歌瀏覽器、百度瀏覽器

           

          1.谷歌瀏覽器

           

          可以說是搜索彩蛋的先行者,內置了很多搜索關鍵詞的有趣彩蛋,如娛樂角色:搜索【滅霸】,頁面右邊會打響指,相關字段會被’毀滅‘掉

           

           

          搜索【馬里奧兄弟】,右邊也有游戲里一樣的點擊彩蛋

           

           

          還有各種有意思的搜索結果比如搜:is google down(谷歌關閉了嗎),搜索結果優先顯示:NO

           

           

          再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。

           

          而且在日常的節日、活動、熱點運營上,谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與,可以已經形成一個穩定、具有品牌感的企業文化了。

           

          如各種復活節、開學季、母親節動效。而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

           

           

           

           

           

          2.百度瀏覽器

           

          百度在搜索彩蛋里下的的功夫也不少,最著名的應該是搜索【黑洞】時,頁面上會出現黑洞的吸入特效。

           

           

           

           

          而且和谷歌相同,在其他的搜索關鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉】,頁面會左右翻過來

           

           

           

           

          搜索【跳躍】,頁面會在上下跳動

           

           

           

           

          搜索【失重】,頁面上的字會飄起來‍

           

           

           

           

           

          而在【活動運營】上,百度也是很有心地進行著創新設計,力求給用戶一種眼前一亮的感覺。比如每年的愚人節,搜索結果頁上都有‘調戲’用戶的創意設計,各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。

           

           

           

           

           

           

           

          還有在【活動入口】的設計上也是特別有想法:在某年的圣誕節上,百度創新性地將活動入口’嵌套‘在結果頁卡片中間,用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」

           

           

           

           

           

           

           

          用這種充滿創意+應景的的入口設計與引導方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動。另外,百度搜索框上面的運營活動入口,也和谷歌有異曲同工之妙。

           

           

           

           

          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

           

          B.體驗流

           

          注重提升搜索過程中的交互體驗,以增加用戶的操作效率與產品易用性。

           

          代表:蘋果產品、夸克瀏覽器

           

           

          1.Apple/蘋果產品

           

          ·iPhone

           

          iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件,它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器,大大減少操作鏈路。

           

           

           

           

          在iOS的原生鍵盤里,可以根據輸入詞檢測+搜索對應的手機號碼:當你輸入 【打+我或通訊錄好友+電話】時,鍵盤上會自動顯示自己或好友的電話號碼,點擊號碼就能自動粘貼在輸入框中。

           

           

           

           

          用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼,大大提升操作體驗與效率

           

          ·Mac

           

          在Mac電腦的工具欄上搜索相關幫助時,系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里,并減少尋找的操作路徑,免去多余操作

           

           

           

           

          在Mac電腦的‘系統偏好設置’里搜索幫助,在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時,該入口的聚光燈會更清晰些,特別容易找到搜索結果。

           

           

           

           

          2.夸克瀏覽器

           

          夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢同樣可以喚出搜索框。

           

           

           

           

          降低「需要往上手指移動,才能點擊搜索框」的操作成本,讓用戶更快、更精準地觸達搜索。

           

          而且在輸入網址或英文等字段時,搜索框下方會出現一個滑塊區。點擊就會變成長條的滑塊,拖拽滑塊即可改變光標位置。

           

           

           

           

          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

          讓用戶更方便地將光標快速移動到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會前置搜索結果, 比如在搜索框中輸入“某城市+天氣”的關鍵詞,上方就會以卡片的形式顯示該地區最近一周的天氣。

           

          用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息。

           

           



          作者:和出此嚴
          鏈接:https://www.zcool.com.cn/article/ZMTQ4Mzc2OA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          這樣的設計想法為啥我沒有想到

          藍藍設計的小編

          對于產品設計師來說,在同質化的環境中我們需要具備突破創意的思維,這樣才能輸出差異化的設計方案。而創意離不開優秀作品的靈感啟發,發現有意思的設計細節也能提高我們的設計思維。

           

          今天黑馬哥將會繼續為大家帶來一些優秀的設計細節,我們一起來反思一下,這樣的設計想法為啥自己沒有想到呢?

           

           

           

           

           

           

          分享目錄

           

          一、營造頂部區域視覺感與情感化

          二、主題化配圖增強視覺感

          三、彈幕式標簽提高關注度

          四、IP 強化底部標簽欄圖標設計

          五、強化動態發布的引導設計

          六、連貫性的插畫突出卡片特色

          七、動態表情化的評價設計

          八、場景化的推薦設計

          九、上下輪播的 Banner 設計

          十、情感化的氛圍營造

           

           

           

          一、營造頂部區域視覺感與情感化

           

          產品頂部區域的視覺感是吸引用戶的關鍵,在一些功能單一的產品中,強化視覺表現力也是提升產品豐富度的有效形式。

           

          比如麥當勞 App 首頁的設計中,頂部區域結合溫馨的場景插畫進行表達,讓你早上打開麥當勞就有種心情愉悅感。動態的太陽微笑畫面給你一天好心情,情感化的設計不僅增強了視覺感,也帶給用戶美好的產品使用體驗。

           

           

           

           

           

           

          二、主題化配圖增強視覺感

           

          封面圖在產品規范中相對比較難約束,通過構圖、比例、固定元素和配圖質量等,在一定程度上可以提高感官體驗。如果是在重點突出的內容上面,結合主題化配圖也可以增強視覺感。

           

          之前在使用優酷 App 時,當時在重點突出熱劇的設計中,就將主題化的內容融入到宮格的配圖中。以統一的畫面風格和設計表現形式填充封面,增強了視覺表現力,以此突出熱劇的吸引力。

           

           

           

           

           

           

          三、彈幕式標簽提高關注度

           

          在固定的結構布局中如何提高局部內容的關注度,我們需要在不改變結構的前提下進行創意融入。比如動態畫面、突出視覺感、內容特異化等等,而最近發現彈幕式標簽也是一個不錯的選擇。

           

          在體驗優酷 App 時,在動漫欄目中針對推薦的熱播新番,想要突出的動漫結合了彈幕式標簽進行強化。動感的節奏會提高用戶的關注度,在不改變當前結構的基礎上,不失為一種有效的解決方案。

           

           

           

           

           

           

          四、IP 強化底部標簽欄圖標設計

           

          底部標簽欄圖標是產品設計師經常發揮的場景,在一些節慶主題或者活動中都會定制設計。

           

          優酷 App 在元旦促銷活動期間,就將底部標簽欄圖標設計與 IP 形象結合,默認以促銷主題文字展示,點擊狀態以 IP 形象顯示。圖標與活動相結合,不僅突出圖標視覺表現,也營造了活動氛圍感。

           

           

           

           

           

           

          五、強化動態發布的引導設計

           

          對于靠內容吸引用戶參與度的產品來說,提高用戶發布動態的意愿度至關重要,突出動態發布的吸引力也能起到促進作用。

           

          會玩 App 在動態發布的引導設計中給出了不錯的思路,未發布動態時會以形象化的空狀態設計進行引導。動態發布的按鈕旁以俏皮可愛的形象進行引導設計,提高了按鈕的吸引力,讓用戶有種參與的沖動。情感化設計的引導不僅可以增強感官體驗,也更容易攻破用戶的防備心理。

           

           

           

           

           

           

          六、連貫性的插畫突出卡片特色

           

          卡片式設計已經成為主流的產品設計趨勢,信息的歸納感可以提高識別效率。探索卡片設計的表現特色尤為重要,重點在于卡片造型和內部視覺表現力的發揮層面。

           

          麥當勞 App 在主內容的卡片設計上運用了配送場景插畫,連貫性的插畫突出了卡片特色。插畫場景結合了品牌圖形,增強了麥當勞的品牌曝光度;白天和晚上還以不同配色風格和細節進行差異表現,無論是想法還是設計細節都非常不錯,是一個挺有創意的案例表現。

           

           

           

           

           

           

          七、動態表情化的評價設計

           

          用戶評價可以反饋服務的質量,進而做出產品迭代或者服務調整的思路。如何提高用戶參與評價的積極性,需要產品設計師多多探索啦!

           

          最近在使用順豐速運小程序時,完成快遞業務之后進行評價,表情化的星級評價非常有意思。不同等級以不同的表情呈現,動態表達非常形象生動,讓人不由的挨個體驗。動態表情的形式提高了評價的關注度,情感化的表達讓用戶更愿意參與評價,提高了評價的體驗度。

           

           

           

           

           

           

          八、場景化的推薦設計

           

          針對電商類產品來說,商品/店鋪推薦模塊出現頻次較高,吸引用戶關注度自然成為了設計的首要目標。

           

          在體驗 Mars App 時,在生活超市推薦的設計中,模擬了便利店的場景形象。真實感的場景表達帶給用戶親切自然的購物體驗,同時也提高了用戶對于該模塊的關注度。

           

           

           

           

           

           

          九、上下輪播的 Banner 設計

           

          輪播 Banner 圖算是產品設計中最常見的模塊,在移動端的設計中通常左右輪播為主,最近體驗到上下輪播的案例,打破常規也不失為一種新的設計思路。

           

          在 Mars App 的首頁 Banner 圖以上下輪播進行交互,左側固定展示定位城市的天氣等信息,提高了 Banner 位置的利用率。Banner 與金剛區懸浮在特定的背景上,帶給用戶沉浸式的感官體驗。

           

           

           

           

           

           

          十、情感化的氛圍營造

           

          情感化的設計可以讓產品更有溫度,增加用戶對產品的好感度。配合傳統節日或者節氣主題進行表達是相對比較普遍的形式,會在產品主題和視覺區域進行氛圍營造。

           

          在清明節期間體驗飛豬旅行 App 時,頂部區域以踏春的場景營造氛圍感,還在搜索區域以青團(青團是江南人家在清明節吃的一道傳統點心)替代搜索按鈕。情感化的設計營造不僅體現了產品的溫度,也帶給用戶對于節日的場景體驗。

           

           

           

           

           

           

          小結

           

          禁錮我們思維的不是我們的技術,而是我們的眼界和設計感知。發現優秀的設計并總結和轉化,才能讓我們打開禁錮的思維,在優秀的基礎上輸出更好的設計解決方案。

           

          本文對于設計的理解闡述屬于個人見解,不足之處歡迎大家留言補充,我們互相進步。

           

           

          作者:黑馬青年(vx: heimaux)

          本文由 @黑馬青年 原創發布。未經許可,禁止轉載。



          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTUzNjExMg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          交互設計:我們是不是要把“用戶體驗”中的“用戶”拿掉了

          天宇

          精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚,領導和客戶往往也會忽略這一重要的步驟...

          交互設計:我們是不是要把“用戶體驗”中的“用戶”拿掉了?

          前言:這篇文章寫得特別好,很精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚,領導和客戶往往也會忽略這一重要的步驟。文章篇幅有點長希望大家能靜下心看完,會幫助自己了解更多哦~

          什么是用戶體驗設計師?

          我最近從一位來自MathWorks(世界領先的技術計算和基于模型的設計的軟件開發商和供應商)的高級用戶體驗專家那兒看到了一個很棒的廣告,這是其中一些節選:

           

          • 與開發團隊合作,遵循以用戶為中心的設計方法,協同工作,對復雜的問題進行頭腦風暴和設計創新的解決方案

          • 向團隊成員建議使用哪些可行的方法來回答他們關于用戶的問題,并根據項目的需求、目標和約束來設計方向

          • 與團隊成員密切合作,進行用戶研究,發現痛點,開發用戶配置文件,并創建任務列表

          • 在紙上畫出功能原型

          • 進行可用性測試,進行用戶交流和網上調研,組織調查,并進行你認為合適的其他可行性評估

           

          它準確地描述了我在對于用戶體驗工作的期望。我們從目標人群和競品那里學習有關項目的一切知識,找到方法來研究用戶的需求和目標,與目標人群一起評估這些需求,修改項目計劃,并在最終確定產品之前創造出經過用戶驗證的解決方案。

           

          但當我換一份新的工作時(當然那是個例外),我看到許多職位描述都要求具備廣泛的用戶體驗技能,有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個能進行原型設計的視覺設計師。

           

          來自高級UI/UX設計師的廣告:

           

          • 有測試和可用性實驗的經驗和熟練的交互原型的經驗

          • 創造清晰和具有視覺沖擊畫面的能力

          • 深入了解用戶的興趣和需求

           

          聽起來他們在尋找一個精通調研、可用性測試和交互原型的人。但更迫切的需要反映在以下關于"附加"的要求中:

           

          • 項目工作能展示強大的用戶體驗過程和完美的細節視覺和交互設計原則(IA,IxD,排版,布局,層次結構,顏色,組成)

           

          你認為他們只會招聘一個可以進行用戶調研,畫線框圖和測試的人嗎?或是視覺設計做的很出眾的人?也許這反映了“UI”這部分的職位描述。讓我們來看看一個純粹的UX設計師的職位,它要求:

           

          • 優秀的分析能力

          • 在實際用戶研究、信息架構、交互設計、以用戶為中心的設計過程以及用。戶體驗原則和技術等方面有豐富的經驗

           

          聽起來不錯!但其真面目會在下一個要求中顯示:

           

          • 把想法/概念轉化為優質的視覺設計

           

          如今,用戶體驗已成為熱門詞匯。盡管看起來不言自明,但一些公司并沒有明白這一點——他們仍然忽視了行為經驗,而不是外表和感覺。我看到的許多廣告都是在視覺設計上表達了最具體和生動的語言。這讓我撓頭,懷疑是否只有最成熟、規模最大的公司才真正需要用戶體驗,并有足夠的預算來支持它。難道其他公司只是通過招聘視覺設計師并給他們貼上“UX”的標簽,來追個市場熱點而已嗎?

           

           

          遠離調研?

          用戶研究員Alan最近離開了一家總部位于亞特蘭大的公司,那里擁有大量的用戶體驗員工。他在公司的頭兩年里,參加了全國各地許多不同類型的用戶調研。然而,在最后一年,他發現他的調研被拋到一邊了。

          "我的新老板不關心做調研。似乎整個公司都在降低它的重要性。相反,他們會開辦設計思維講習班,直接進入開發階段。“任何研究或可用性測試都被留到最后,只是為了驗證解決方案。

          由于該公司以嚴厲對待用戶體驗而聞名,這一點尤其令人不快。

          像用戶體驗(ux)這樣流行的詞匯會突然變得受人追捧,我想不出在這個行業還有什么比“設計思維”更重要的了。根據谷歌在過去的五年中的數據,對設計思維的網頁搜索翻了兩倍。

           顯示從2012年12月到2017年6月設計思維搜索增加的圖表。

           

          搜索“設計思維”,2012年12月-2017年6月(資料來源:Google Trends)

          設計思維過程的第一步是移情化,就是讓用戶參與并觀察他們如何談論的,同時觀察他們如何真正完成任務。換句話說,這就是用戶調研。誰做調研?做用戶體驗的諸位!不難想象互聯網項目負責人和利益相關者繞過這個步驟,直接進入步驟2和3,開始定義問題和開展頭腦風暴去解決方案。爽死他們了。

           

           

          在“設計思考家最初犯的五個錯誤,”Dana Mitroff Silvers,一個設計思維驅動者和數據戰略家寫道,“我經常被客戶要求跳過這個階段,直接進入解決問題的階段。”

           

          她還描述了我有過很多次的經歷,公司禁止接近用戶!很多時候,silvers的客戶都會問他們是否可以跳過這個階段,因為他們“已經知道他們的受眾需要什么,可以為他們代言。”

           

          這就說的通了。團隊繞過不熟悉的移情階段,直接進入定義問題及其解決方案,過去一直都是這么做的。而且如果沒有在移情方面的訓練和指導,或者充分了解,很容易跳過這個階段。在我接下來的交談中可以看到,一個公司告訴我他們需要一個兼并的ux/視覺設計師。我問他們是否需要設計思維,產品總監回答:“是的。”他們跳過移情步驟了嗎?他同樣回答道:“是的。”

           

          如果一家公司僅僅遵循設計思維的最后四個階段——設計、構思、原型和測試——那么一個用戶體驗設計師是什么樣的呢?是一個可以做原型開發的視覺設計師。

          分離調研和設計

           

          用戶體驗架構師Alyssa最近與一家大型電信公司簽訂了用戶調研合同。讓人失望的是,設計師似乎沒有責任跟蹤調研結果。調研人員每一到兩周進行一次新的可用性測試,然后將測試結果提交給設計師,也不知道設計師是否會遵循建議

           

          這似乎不對。

           

          我已經注意到越來越多的公司在調研和設計師之間拆分他們的用戶體驗實踐。問題是,“用戶體驗設計師”通常不僅要處理交互設計,還要處理視覺設計。盡管易于使用的工具的出現使得創建可點擊的原型變得容易,但這是兩個不同的技能。我期望交互設計師分析行為和工作流程,并充當用戶的擁護者;視覺設計師則負責推廣品牌。

           

          將設計團隊分成調研人員和設計師可能會阻礙有效的軟件開發。為了真正了解用戶,設計師需要培養共情心。他們和其他團隊成員可以通過進行用戶調研或可用性研究——或者參與調研過程來實現這一點。這就鎖定了用戶的目標和痛點,并讓設計師了解到什么是最重要的點,這將有效幫助如何更有針對性的設計。除了對設計人員有好處之外,定期的用戶調研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解,那公司一定會對共情心和用戶調研付出比口頭更多的心思了。

           

           

          功能原型和測試不足

           

          Alan Cooper是視覺基礎的創造者和用戶體驗的領袖,也是《囚犯們管理收容所》一書的作者,他在Twitter上抨擊了“原型和測試”的思維模式并表示:“原型和測試不是交互設計”。 Cooper寫道交互和測試能讓領導感到高興,但它只是蚍蜉撼大樹。盡管它創造了微小的改進,讓設計師和他們的領導們充滿希望和快樂,但它從來沒有真正從大的程度上理解用戶或者產品。

           

          我們都搞錯了

          我們已經看到,在設計思維的大旗下,公司可能會跳過移情階段,回歸到一個舒適、獨立的設計過程。設計思維確實帶來了一個有價值的原型/測試階段,但在用戶研究上的偷工減料卻使本末倒置,并錯過了一個時機,去進行具體的見解和創新,從而可以將產品推向頂峰。而斷斷續續的研究只會拖延我們“想要知道我們的用戶想要什么”的心態。

           

          雖然強調視覺設計的技巧,但分離研究和設計,可能消耗掉那些面向認知將用戶體驗放在首位的設計師。視覺設計提供了一個重要的初步印象,許多研究表明,人們對第一眼有吸引力的網站的評價通常比較高。但視覺只是用戶體驗中的一部分。一個經常使用你的產品的用戶到底是如何評價的?視覺效果將發揮一定作用,但我認為它更有可能依賴于一個偉大的工作流程——需要反復跟進用戶體驗的流程。

           

          我們到底要什么?

           

          我不知道出了什么問題,但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗過程的價值,但開發或市場主管是否也是如此?

           

          可能是我們自己被自己的完美所欺騙了。我們已經大幅改善了用戶體驗的程度,現在在任何手機上都可以找到偉大設計的例子。改進后的開發工具利用了我們創新的交互模式,小工具使平面設計看起來很棒。也許開發領導者覺得他們已經看到了足夠好的設計,他們相信他們也可以做到這一點。


          作者:March1996
          鏈接:https://www.zcool.com.cn/article/ZNzYyNDU2.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          微交互:提升產品用戶體驗的魔法鑰匙

          天宇

          在我們使用的產品中,多多少少都會有一些微交互的穿插,但由于微交互性能的不搶眼也不明顯的條件下,所以往往會被很多設計和開發人員所忽略。

           

          微交互的轉型

           

          但在一個優秀的產品中,微交互卻是必不可少的重要關口,它直接承載著用戶在使用產品時對產品細節的細微體驗。雖然在互聯網產品早期,微交互曾被人稱之為是“很炫酷的特性象征”,但時隔今日,在這百花齊放的產品大環境中,其實微交互已經慢慢從膚淺的炫酷轉型為附有內涵的用戶體驗關鍵要素了。

          作為產品細節體驗的重要承載,微交互的價值與地位逐漸提升,在用戶使用產品過程中,它不僅僅能促進產品與用戶的互動性,而且還能激發用戶對產品的積極感覺,并且最終影響用戶的整體行為。

          什么是微交互

           

          微交互的基本概念就是指:關注一項主要任務、一個目的得事件過程。通常情況下,微交互需要關注得是這個事件的整體交互過程,并且它存在的目的也是為了讓用戶在使用產品時能感覺到順暢性、一致性,并產生心理的愉悅感,從而讓用戶喜歡產品,愛上產品,從而留住用戶。

           

          如果籠統概括的話,可以說微交互幾乎會遍布任何設備、任何應用程序中。并且他們存在的價值就是讓用戶高興。就單純從產品說起,如果說在產品設計中,在大多數用戶與產品接觸時都能發現微交互的存在與應用。

          舉例

          1、你在Web看一段話時結尾展示是“…”時,那么通過你的心智程序,你就會下意識的將光標停留在這段話上,在這樣的情況下,微交互就會出現了,則在這段話的周圍就會出現這句話完整的展示從而被你瀏覽。

           

          2、還有一種常見的就是在你輸入錯誤的信息時系統會自動識別,并在末尾彈出消息提示,提示你需要從新輸入,更有優秀的系統會從你開始輸入時就跟進你的輸入狀態,時刻提醒你輸入的結果是否正確。

           

          其實這些小的視覺暗示和微妙的指示就是所謂的為微交互,也有人稱之為“圍觀互動”。雖然這些微交互平日不太容易能被用戶所直觀的發現,但也就是這些微小的交互,才能提升一個產品的整體用戶體驗。所以說,無論他們是多么的微妙,你都需要重視起來,并嘗試著將一般的設計方案和這些結合起來使用,并提供一些有效的信息,這樣才能讓你的用戶在瀏覽產品界面和執行操作時有基本的保障。

          知道了什么是微交互后,你還需要吃透微交互它到底是怎么工作的,只有這樣才能確保你靈活的使用微交互…

           

          微交互是如何工作的

           

          微交互的工作一般要分為四個基本要素:觸發、規則、反饋、循環。

          觸發

          觸發簡單講就是“啟動微交互”,例如:點擊按鈕或點擊鼠標。這里需要注意的是,觸發并不單純是人為操作的開始,它也同樣包含系統自動啟動的操作,比如說在你設備上收到一份郵件或短信時,這時的你其實并沒有任何操作,但系統就會有一個微交互啟動為你提示,這時的微交互就是被動的。

           

          這些所謂的啟動微交互,需要注意的是必須與一組已經擬定好的操作規則一起工作,這些規則里包含了什么能做,什么不能做的內容。

          規則

          微交互的規則就是表明用戶在操作后產品該如何按照用戶正確的心智程序進行微交互,它決定了觸發之后會發生什么事情。因此,當你在拉下界面時,產品的規則就應該包含下滑的規則,這同時也能表明用戶當時的心理是希望看到界面以上的結果或者下拉刷新看到更多新的結果。同樣,規則就是規則,在你沒有進行操作時,規則時而也在生效,例如:微信里對方并未添加你為好友,但依然和你說了句話,規則就是生效的,這里的規則就是阻止了信息的傳入。

           

          反饋

          顧名思義反饋在現實中就是你與人對話交流,對方饋贈你的信息,在產品中這個環節也同樣必不可少,它的存在可以讓用戶明確知道在用戶操作后產品發生了什么,出現什么結果的回饋信息。在微交互中,用戶看到的、聽到的、操作的、甚至包含感覺到的,都是可以反饋的。

           

          例如:

          1、看到的:希望打車,看到的反饋就是地圖和輸入起始地/目的地的界面,這就符合了用戶心理;

          2、聽到的:在與人聊天時,其他人也和你說了句話,就聽到手機“蜂”一聲,這樣的反饋就是提醒用戶聽到有新消息;

          3、操作的:在任何產品中都需要用戶操作,那么然后反饋用戶操作結果;

          4、感覺到的:這包含界面樣式、產品交互是否符合用戶心理預期,并通過預期實現操作后得到想要結果,這里面就包含感覺到的反饋;

           

          循環

          循環在微交互里屬于次數的說明,在我們手機設置鬧鈴時就經??吹接刑嵝岩淮?、一周提醒等說明,這就是循環的微交互,循環的微交互基本上定義了交互的某種性質,它會告訴你隨著時間的推移發生了幾次,發生了多少。

           

          例如:在你去銀行自動取款機取錢時輸入的密碼,如果輸入錯誤,就會提示你還有幾次輸入,這樣的就是循環的過程,等于是在原地打轉,但當你成功進入后就會從這個環節進入到下一個環節繼續循環。

           

          說了這么多,我想你應該知道了微交互的工作方式以及流程,那么接下來要說的就是微交互需要在何時、何地以及如何才能正確使用了。

           

          何時、何地以及如何使用微交互

           

          1、界面滑動

          現如今產品幾乎都帶有滑動的交互,之所以滑動越來越多,是因為滑動交互可以清楚的展示給用戶行為操作路徑,而點擊確實短期記憶性的,當用戶想要開始滑動時,這是用戶操作前的準備,而當用戶正在滑動時,這是操作中的節點,這時滑動的界面就會隨著手勢的方向進行移動并告訴用戶界面即將去往哪里,下次想要找到該從哪里找的路徑,在操作結束后,微交互完成,這時操作后的結果,這一整套流程下來,通過短小的微交互,就能很清晰的告知用戶他在做什么以及他做了什么。

           

          2、下拉/側拉菜單

          下拉/側拉菜單就像產品某個界面內的一個抽屜,它里面包含了當前界面賦予的更多選擇,并且還能占據極小的空間,根據用戶的心智程序來講,竟然是抽屜就應該拉取,這才符合環境映射的條件。當前在產品設計內,幾何都包含了下拉/側拉菜單的微交互,例如淘寶的側拉菜單、美團的下拉菜單都是微交互的展示,在輕松點擊后,界面tab則下拉或側拉出一個抽屜,里面就包含了N多個附加選擇或者篩選器。

           

          3、引導頁

          對于產品的不斷迭代與改版,其界面一定會發生一些細微的變化,更有時功能會作為轉移,那么為了能更好的引導用戶的操作路徑,就需要用到一些引導頁,我這里說的引導頁并不是啟動頁后的大篇章引導,而是在半黑透明遮罩的同時,流出需要用戶操作的功能引導,在聚焦了操作功能上,賦予一些微交互,會加大用戶對產品的認可,包括喜歡新產品。

           

          4、操作反饋

          在用戶正在輸入一個列表菜單時,最需要的微交互就是即使反饋,作為產品首先應該賦予用戶的就是安全與人性,安全是指產品在用戶心理的懷疑指數多少,指數越低安全度越高,而人性就需要操作的了路徑與展示是符合用戶的心理預期的。安全與人性都可以通過微交互來實現,例如在建設銀行APP登陸前會出現安全掃描,在支付寶輸入了支付密碼后出現的結果符合了人性思維。

           

          5、卡片旋轉/淡化

          有些app會出現卡片類樣式的界面,并通過用戶的操作實現卡片淡化和卡片丟棄等微交互,這樣的微交互則更加具象了用戶的真實空間感受,通過與真實環境的結合,將用戶帶入產品,使用戶在使用產品時會有現實版的感覺。例如:陌陌的附近人卡片丟棄,網易音樂的音樂專輯封面淡化。

           

           

          總結

          微交互在產品內可以說是無處不在,雖然這些都是一些很小的細節,如果只是靜態展示可能并沒有太大作用,但通過產品與用戶的這種互動,變相交流,微交互在產品的整體體驗上就可以增加巨大的價值,這也可能是所謂的“宜家效應”吧,用戶在自己親手制作或行動時,才能賦予產品更大的價值感。

           

          好的產品必須擁有這種精心設計的標志,它不僅包含了對用戶的心智理解,更多的,是對用戶的一種尊重與情感抒發。



          作者:西瓜聊設計
          鏈接:https://www.zcool.com.cn/article/ZMTAzOTM0NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          以用戶為中心的交互設計思維

          ui設計分享達人

          聊聊關于設計思維的內容,會從產品設計、體驗設計、交互設計三個方面入手。
          目前是第三篇,關于交互設計思維的內容。到這里設計思維的內容全部結束了。
          感謝
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維


          作者:DesignLink
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          以用戶為中心的交互設計思維

          天宇

           
          聊聊關于設計思維的內容,會從產品設計、體驗設計、交互設計三個方面入手。
          目前是第三篇,關于交互設計思維的內容。到這里設計思維的內容全部結束了。
          感謝
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維
           
           
          以用戶為中心的交互設計思維


          作者:DesignLink
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

          如何從產品角度發起交互設計?

          天宇

          本文從產品角度出發,深入探討了如何發起交互設計。通過明確產品目標與用戶需求、進行用戶研究、構建信息架構、設計流程與界面、進行原型測試以及持續優化等關鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗并實現產品目標的交互設計。
           
          一、引言
           
          在當今數字化的時代,產品的成功不僅僅取決于其功能的強大,更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產品角度發起交互設計,意味著將用戶置于核心,以實現產品的商業目標和用戶需求的完美融合。
          如何從產品角度發起交互設計?
           
           
          二、明確產品目標與用戶需求
           
          (一)定義產品目標
          產品目標是交互設計的起點,它決定了設計的方向和重點。產品經理需要與團隊共同明確產品的定位、市場需求以及預期的商業成果。例如,是旨在提高用戶活躍度,還是增加用戶轉化率,或者是提升品牌形象。
          如何從產品角度發起交互設計?
           
           
           
          (二)挖掘用戶需求
          通過市場調研、用戶反饋、競品分析等手段,深入了解目標用戶的行為習慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉,還包括對潛在需求的挖掘。
          如何從產品角度發起交互設計?
           
           
           
          三、進行用戶研究
           
          (一)用戶畫像創建
          基于收集到的數據,構建詳細的用戶畫像,包括用戶的年齡、性別、職業、教育背景、使用場景等特征,以便更精準地理解用戶的行為和需求。
          如何從產品角度發起交互設計?
           
           
           
          (二)用戶場景分析
          模擬用戶在不同場景下與產品的交互過程,發現可能存在的問題和優化點。
          舉例說明:
          我們要知道,地鐵周邊美食,這是一個解決方案。真正的需求是什么?一個字一個字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關的項目,我們要把不同目的核心用戶的主要使用場景寫出來。經過分析,我們得出了用戶會選擇我們產品,且產品未來可能存在的各種場景A、B、C、D、E。如下圖所示:
          如何從產品角度發起交互設計?
           
           
          如果按照目標人群所在場景分類,進行細分,則為下圖:
          如何從產品角度發起交互設計?
           
           
          乘地鐵去地鐵站和附近地鐵站區別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產品有競爭力。
          上班族和普通大眾區別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達某目的地,就近享受目的地美食。
          朋友們和個人區別:朋友們一起吃飯,容易出現喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
           
          市場定位
          經過領域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統計學類的細分:
          如何從產品角度發起交互設計?
           
           
          • 上圖為前期定位的目標大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較??梢钥吹胶痛竺缊F有相同和不同維度,這就是產品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標用戶類型。
          • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產品,實現快速并有質量的拉新、活躍的目標。
          • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
           
          結合上圖和要做的場景,我們得出了產品具體目標用戶:乘坐地鐵快速到達并尋找目的地美食的大眾用戶(上班族休息日,大學生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
           
          (三)用戶測試
          邀請真實用戶進行產品試用,觀察他們的操作行為,收集反饋意見,為后續的設計提供依據。
          1、需求接受
          需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產品等同事進行面對面的交流和溝通。
          詳細了解測試目的和關鍵點,確定用戶配比。
          最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認知,并把相應關鍵點對應上去。同時把大致的用戶配比情況敲定一下,后續就可以直接招募用戶了。
          了解demo的完成進度,相應確定具體測試時間。
          交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結果用戶到了而demo還沒出來,那也是夠了。
          2、方案撰寫和確定
          讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細節記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
          及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應作出解釋。
          核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產品等同事再確認一下,是否有什么地方遺漏或有不妥之處。
          3、用戶招募
          這是一個大多數人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
          方案定下來后,再跟交互確認測試時間,了解是否有變動和調整,盡量避免用戶來了demo或者測試環境還不ok的情況。
           
          撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達清楚。有以下幾點可以注意一下,方便我們自己招募:
          • 詳細列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協調不同用戶測試時間了;
          • 優先人力、信息管理、行政等崗位同事。盡量避免相關產品人員、設計崗等同事。
          • 制作簡單的招募海報,并檢查??梢允孪葘?ldquo;海報”用word或者ppt做好,然后保存成圖片格式,記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便,但是其排版往往不利于閱讀,導致用戶會遺漏重要信息。而制作成圖片格式,可以更好地去避免這個問題,同時還可以顯得整個招募過程比較正式,突出了對用戶的尊重,也能在一定程度上體現我們用研工作的規范性。
           
          多渠道投放招募海報。內部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時未嘗試,公司論壇應該也可以,不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試,效果還不錯,大家都很熱情幫忙轉發,群眾的力量大無窮。也可以相應去搜索一些QQ群,加入并發布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對具體招募情況,大家就盡情發揮吧~
           
          用戶多了留到下次用。海報發出去后,有時也會出乎意料用戶數量超過預期了,這是好事,不要擔心,也不要急著拒絕,平和的跟對方說明情況,強調下次還會有測試,把用戶相應信息了解一下做個記錄,下次招募的時候可以直接先聯系這幾名用戶。當然前提是你真的有下次測試需求,如果沒有那還是老老實實說明情況。
           
          確保自己和用戶能彼此聯系上。跟用戶強調測試時間和地點,尤其是外部用戶,如果招募和正式測試隔了幾天,最好在測試前一天再通知一下。給出自己的聯系電話,同時詢問用戶的聯系電話。
           
          第一個用戶盡量安排公司內部同事。很多時候demo的完成情況會出現意外,到了測試時間demo還不能用,內部用戶可以方便取消或者更換。另外,在第一次測試前誰都不確定用戶會有什么反應,第一個測試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
          4、測試準備
           
          材料準備。需要準備的內容有:量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用,以及記錄表格,如果是外部用戶過來,相應準備一杯水,人家大老遠過來也不容易。
           
          測試內容準備。其實每次訪談用戶自己都會挺緊張的,不知道用戶是不是也很緊張(PS:好想當一回用戶,體驗一下被訪的感覺)。為了消除這種緊張,同時也是為了更好的完成訪談,可以有嘗試以下幾點:
          • 盡可能多的去了解所需測試的產品。有時候demo出來的晚,下午要測試,demo中午才出來,自己都沒玩過,測試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實際操作來的真實,但是也能有不小幫助,但也要給自己留足熟悉demo的時間。
          • 按照模塊來列提綱。其實相當于組塊策略,把同一個模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發現遺漏點。但模塊不要太大,如果太大了就相應拆分一下。例如,在考拉新版測試的時候,有“首頁”、“活動”、“購物車”等測試,但是光是首頁內容也很多,作為一個模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
          • 根據任務演練提綱。有了提綱后,按照任務大致過一下所有列出來的問題,這個過程會打亂按照模塊列好的提綱,有一次這樣的排練,在測試的時候更不容易漏掉題目,而且也相當于模擬了一下測試,自己心里會更踏實一點,在實際測試過程中也能有更好的應對。
           
          相關人員通知。通知交互和產品的同事具體測試時間和地點,邀請他們一起參與。不建議交互和產品只是后期測試查閱報告,如果他們參與到測試中,能更近距離和用戶接觸,并能更加深刻感受到產品存在的問題,也能更好的推動產品的改進。
          5、正式測試
          主持人需要注意的點:
          • 劃分我們和產品的關系。在測試之前跟用戶說明清楚,我們并不是產品的設計者和開發者,我們只是受產品方委托來進行測試,以免用戶不好意思當面如實評價產品。
          • 強調測試的是產品,而不是用戶。要跟用戶說明產品尚處于不完善階段,因此邀請用戶過來進行測試,幫助發現問題和改進產品設計,但請注意不是為了評價產品。
          • 注意訪談技巧。這個就不用多說了。
          • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進一步去追問,用戶為什么會這么說或這么問,例如,很多時候在測試中會碰到用戶說“哦,原來這個按鈕是xx功能,我還以為是xx功能“,這個時候可以再推進一步,了解用戶為什么會這么認為。
          • 給其他在場的同時發言的機會。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產品等同事,了解他們是否還有問題需要補充。
          • 記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個招呼,幫忙提醒自己。
           
          記錄人員需要注意的點:
          • 仔細觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等,更重要的是記錄用戶的實際行為。
          • 按照模塊記錄。記錄者可以按照測試方案中的模塊來相應記錄用戶的行為和言語表述。
          • 查漏補缺。主持人可能會遺漏一些點,記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內容需要補充。
           
          6、測試結束歡送用戶。對用戶表示感謝,并開門送一下用戶,對于外部用戶,最好能送到大樓外面可以看見出口的地方。
          測試后及時討論。這個是重點!
          在每一名用戶測試后及時和交互、產品等同事快速過一下主要發現的問題點,這樣做有以下優點:
          • 有效達成共識,確定解決方案。剛訪談結束印象最深刻,因此能快速有效達成對主要問題的共識,并討論確定相應的解決方案。
          • 體現敏捷優勢。確定了一些比較嚴重的問題后,交互和產品的同事就可以相應去改進產品設計,做到了邊測邊改,加快迭代速度。
          • 幫助優化訪談提綱,和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到,在討論后可以補充進去,而有些問題確定后則不需要再測。另外,也可以通過討論對事先安排的測試用戶進行相應調整,例如增刪用戶,或者調整新老用戶測試順序等。
          •  
            事后幫助我們自己快速撰寫方案。通過討論確定了關鍵問題,并且,交互和產品的同事也相應清楚了,因此在最后可以快速形成報告。
          再次感謝用戶。所有用戶測試結束后,可以花幾分鐘時間簡單感謝一下用戶。
           
          7、報告撰寫
          針對不同大小項目的用戶測試,在完成報告撰寫過程中有兩種具體方式:
          • 小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目,由于在每次測試后都有討論,已對主要問題達成共識,因此在報告撰寫的時候就可以快速地將主要的問題和風險點呈現出來。
          • 大測試項目每天總結并反饋主要問題。大的測試項目持續時間比較久,針對每天的測試及討論,簡單總結一下主要發現的問題,并反饋給相關人員,如果到了最后再總結,容易遺忘掉一些內容,并且這樣子也方便自己最后撰寫報告。
           
          四、構建信息架構
          思考信息架構有三個核心關鍵詞:用戶角色、產品價值、使用場景。
          1、明確用戶角色
          用戶角色清晰揭示用戶目標,幫助我們把握關鍵需求、關鍵任務、關鍵流程,看到產品哪些是主要的事,哪些是次要的事。我們應該盡可能豐富、形象化我們的用戶角色,讓它在設計決策過程中發揮作用,設計出更符合用戶場景的產品。
          2、了解產品的目標價值
          作為產品的設計師一定要理解產品的價值,知道用戶想要什么,把最重要的優先級提到最高,盡量移除無關緊要的信息,或降低其他優先級的權重,以免對用戶造成干擾。
          3、提煉產品的使用場景
          要了解產品的業務流程,比如目標用戶是誰、什么場景、如何使用,要把產品業務流程上的節點一個一個梳理出來,還要考慮這個產品對用戶的價值是什么,不要僅僅考慮界面的元素規范、設計細節等等,要知道產品的目標價值體系。
          4、信息架構優先級
          基于三個核心點(用戶角色、產品價值、使用場景)分析,把目標用戶人群核心價值的功能點業務流程梳理出來,分清主次關系,切忌功能堆砌,具體方法可以把所有功能業務邏輯的主線列出來,然后根據業務的優先級做評級,分清楚這些功能哪些是主要的,哪些是次要的,然后通過數字做排序,這樣我們就知道哪些功能設計需要明顯,哪些功能設計需要低調。
          5、信息歸類及整合
          從整體上思考信息類產品的分類及整合,比如用戶資料相關的產品會有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關的信息都歸在同一個分類菜單下,不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產品的處理邏輯。
          6、要定期審視與迭代
          隨著產品規模與復雜度的提升,要隨時關注信息架構是否滿足當前的產品框架,不要等需要時候再去孤注一擲的全盤優化,這樣會讓項目陷入被動的局面,可以逐漸增強,循序漸進的優化,從小的細節對信息架構進行調整,提升產品的易用性。
           
          六、進行原型測試
          1、制作原型
          使用快速原型工具制作可交互的原型,以便更直觀地展示設計方案。
           
          (二)內部測試
          團隊內部進行初步測試,檢查功能的完整性和流程的合理性。
           
          (三)用戶測試
          邀請外部用戶進行測試,收集他們的意見和建議,發現潛在的問題和改進空間。
           
          七、持續優化
           
          (一)數據分析
          通過收集和分析用戶的使用數據,了解用戶的行為路徑和偏好,為優化提供數據支持。
           
          (二)用戶反饋處理
          及時響應用戶的反饋,將有價值的建議融入到后續的優化工作中。
           
          (三)迭代更新
          根據數據分析和用戶反饋,不斷對交互設計進行迭代更新,以適應市場和用戶需求的變化。
           
          八、結論
           
          從產品角度發起交互設計是一個綜合性的過程,需要充分考慮產品目標、用戶需求、信息架構、流程界面、測試優化等多個方面。只有以用戶為中心,不斷追求卓越的用戶體驗,才能打造出具有競爭力的產品,在激烈的市場競爭中脫穎而出。
           
          在未來的產品開發中,隨著技術的不斷進步和用戶需求的不斷變化,交互設計也將面臨新的挑戰和機遇。產品團隊應保持敏銳的洞察力和創新精神,持續探索和優化交互設計,為用戶創造更多的價值。
           


          作者:Charlotte的嘻醬
          鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          用戶體驗一致性思考

          天宇

          前言
          在團隊內部,我們已確立了一套設計規范,在日常項目中使用設計規范輸出變的高效、統一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調整。因此,深入反思并優化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規范核心精神的同時,靈活應對多變的需求,確保設計既保持統一和諧,又能滿足特定場景下的獨特需求,從而實現用戶體驗與品牌價值的雙重提升。
           
          用戶體驗一致性思考
           
           
          用戶體驗一致性思考
           
           
          在UI/UX設計中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強調在界面和交互設計上需要遵循既定的規則,無論是在應用內部還是跨平臺之間。
          背后的心理學原理——重復定律,強調了信息重復對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復接觸。一致性的應用正是這一原理的生動實踐,通過不斷重復統一的設計元素與模式,強化用戶對產品的認知與記憶,從而提升整體的用戶滿意度與忠誠度。
          艾賓浩斯遺忘曲線
          艾賓浩斯遺忘曲線
           
          用戶體驗一致性思考
           
           
          用戶側
          1、用戶學習曲線:
          一致的UI/UX設計可以降低用戶的學習曲線。當用戶在應用程序或網站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準確預測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
          2、提升可用性:
          一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設計元素和交互模式時,他們可以輕松地將已有的知識和經驗應用于新的情境中。這種一致性幫助用戶快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。
          3、品牌認可度:
          一致的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設計元素、標識和視覺風格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
          4、用戶滿意度:
          一致性直接影響用戶的滿意度。當用戶在使用應用程序或網站時感受到一致的設計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業和質量的信號,讓用戶感到被關注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續使用和推薦你的產品或服務。
           
          用戶體驗一致性思考
           
           
          產研側
          1. 降低設計成本,提高開發效率
          無論是設計還是開發,復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。
          而在開發階段,可以避免重復造輪子,提高開發的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。
          2. 形成一致的設計風格
          根據原子設計理論,通過原子組件的一致性,可以構建出統一的界面框架、布局,形成統一風格和用戶交互認知,從而更好地保證用戶體驗質量。
           
          用戶體驗一致性思考
           
           
          色彩
          色彩作為一種兼具物理屬性與感官享受的復雜現象,其本質在于光波在人體視網膜上的特定波長被反射或吸收后,所引發的視覺感知結果。在設計領域,色彩的選擇與運用不僅是視覺藝術的展現,更是品牌身份與個性的直接體現。諸如餓了么標志性的藍色、美團鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構成了品牌識別系統的重要組成部分,還通過其高度的一致性,在視覺層面上構建起強烈的品牌認知,營造出統一和諧的視覺體驗。
          色彩的一致性策略在品牌塑造中發揮著不可估量的作用,它能夠有效增強品牌的記憶度與辨識度,深化品牌形象在消費者心中的烙印,進而提升產品的市場吸引力和用戶忠誠度。同時,這種策略還促進了設計元素間的和諧共存,包括按鈕、圖標、字體、標簽、背景、以及關鍵視覺元素如Banner等,均能在統一的色彩體系下實現視覺上的連貫與流暢,極大地提升了產品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗。
           
          用戶體驗一致性思考
           
           
          字體
          字體作為設計中不可或缺的核心要素,其獨特性在于能夠精準地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細、字間距等多維度特征。這些特征共同構建了一種獨特的文字風格,不僅承載著信息的傳遞功能,更在無形中引導著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設計過程中,合理選擇與應用字體顯得尤為關鍵。
           
          字體類型的多樣性,如有襯線字體與無襯線字體的對比,不僅體現了風格上的差異,還隱含了不同的閱讀體驗與情感表達。字體的粗細變化(如細體、常規、粗體等)更是能夠強調文本的重要性層級,增強信息的層次感與可讀性。此外,字重的調整也是塑造視覺焦點、引導視線流動的有效手段,對于提升設計的整體美觀度和信息傳達效率具有不可小覷的作用。
           
          然而,在實際的開發與實現過程中,若不加節制地使用多種字體,不僅會顯著增加頁面的加載時間,影響用戶體驗的流暢性,還可能因風格不統一而導致頁面顯得雜亂無章,破壞整體設計的和諧感。因此,制定一套統一、規范的字體使用策略顯得尤為重要。這不僅有助于提升開發效率,減少后期更新迭代的復雜度,還能有效避免資源浪費,確保設計作品在視覺上的一致性與專業性。
           
          用戶體驗一致性思考
           
           
          圖標
           
          圖標作為用戶界面設計中至關重要的元素,風格直接影響到用戶的使用體驗與對產品的整體印象。圖標以其簡潔、直觀且富有表現力的特點,在快速傳達信息、引導用戶操作方面發揮著不可替代的作用。在設計中,圖標的設計與應用更是需要精心考量,以確保其既能夠準確傳達信息,又能夠與整體設計風格保持一致,從而營造出專業、和諧且易于使用的界面環境。
           
          設計中視覺上保持統一包括圖標的大小、形狀、色彩以及設計風格等多個方面,能夠增強用戶的認知連貫性,降低學習成本,提升使用效率。相反,如果圖標風格混雜,不僅會讓界面顯得雜亂無章,還會給用戶帶來困惑和不安,進而影響其對產品專業性和安全性的信任。
          用戶體驗一致性思考
           
           
          按鈕
          按鈕設計應統一于項目風格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關鍵。統一的按鈕樣式不僅彰顯專業性,還能增強用戶信任,確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應用環境。因此,精心設計的統一按鈕樣式對提升用戶體驗至關重要。
           
          排版
          設計中的排版一致性對于構建高效、用戶友好的界面至關重要。一致的排版不僅能夠讓用戶快速適應和理解界面的整體結構,大幅降低學習成本,還能在用戶心中激發強烈的歸屬感和安全感。這種熟悉感使得內容更加易讀,用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設計過程中,注重并維護排版的一致性,是提升用戶體驗和界面有效性的重要策略之一。
           
           
          用戶體驗一致性思考
           
           
           
          操作流程的一致性
          標準化流程:確保用戶在執行相似任務時,如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應并高效完成任務。
          邏輯清晰:操作流程的每一步都應符合用戶的認知習慣和行為邏輯,避免讓用戶感到困惑或不知所措。
          用戶體驗一致性思考
           
           
          交互元素的一致性
          按鈕和控件:確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應用或網站中保持一致。例如,所有按鈕都應具有相同的視覺風格和觸發機制。
          導航和菜單:導航欄和菜單的設計也應保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
           
          用戶體驗一致性思考
           
           
          反饋機制的一致性
          操作反饋:當用戶執行某個操作時,應用或網站應提供一致且及時的反饋,如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結果并采取相應的行動。
          狀態提示:對于長時間運行的操作或需要用戶等待的場景,應提供明確的狀態提示(如進度條),以減輕用戶的不確定感和焦慮感。
           
           
           
           
           
           
          在任何維度上,一致性不應成為設計的唯一導向。設計,這一融合了藝術與科學的復雜領域,要求我們在用戶體驗的細膩雕琢、功能需求的精準滿足、美學價值的深刻體現及技術可行性的嚴格考量間游走。
           
          “一致性”作為設計策略,其核心使命在于優化用戶路徑,降低認知門檻,確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當我們在與設計團隊(包括工程師、產品經理等)溝通時,僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
           
          同時,我們應清醒認識到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗或解決特定的設計問題,可能需要打破傳統的一致性規則。因此,設計師需要在保持一致性和創新之間找到平衡點,根據具體情況靈活調整設計方案。
           
          實際落地執行時,要根據產品定位、用戶場景,結合業務功能來確定設計方案,不能為了一致而一致。
          當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。
          用戶體驗一致性思考
           
           
          真實項目
          真實項目
           
          在SaaS產品設計中,特別是面向B/G端(企業用戶)時,滿足不同用戶角色(如普通用戶與高權限領導)的需求是至關重要的。
          管理端布局設計
          普通簡潔明了:為普通用戶設計的管理界面應簡潔直觀,聚焦于日常操作,如數據查看、統計和下載。
          功能分區:通過清晰的導航欄或側邊欄將功能區域劃分開,如“數據概覽”、“報表下載”、“任務管理”等,便于用戶快速定位所需功能。
          操作便捷:確保常用操作(如搜索、篩選、排序)易于觸達,減少用戶點擊次數和頁面跳轉。
           
          首頁版心定寬設計
          固定寬度:為首頁設定一個合適的固定寬度(如1200px、1440px等),以保證內容在大多數屏幕上都能保持一致的閱讀體驗。
          信息模塊化:將首頁內容劃分為多個卡片,每個卡片承載一個獨立的信息單元(如數據報表、通知公告、項目進展等)。
          視覺層次:通過顏色、大小、陰影等設計元素區分卡片的重要性,引導用戶視線,提高信息獲取效率。
          交互性:為卡片添加交互元素,如點擊展開、滑動查看更多等,增加用戶參與度和頁面活躍度。
           
          用戶體驗一致性思考
           
           
          位置差異性分析
          根據「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
          相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區域。所以按鈕應該緊隨搜索條件,便于用戶快速發現按鈕。
          區域用戶已經形成下意識操作習慣,雖然區別于規范,只能打破,遵循客戶需求
          用戶體驗一致性思考
           
           
          一致性是規則
          “一致性”作為規則或手段,服務于提升用戶體驗的原則。規則與原則一致時,促進業務共識與用戶價值;沖突時,原則優先。用戶體驗原則指導下的一致性,要超越表面控件統一,更在于產品決策與價值取向的一致。必要時,為更好的用戶體驗,可在規則上讓步以實現原則統一。打破規則需慎重權衡,確保用戶便利足以彌補理解成本,需長期全局考量。規則非僵化教條,而是引導我們謹慎創新的框架。
           
          一致性的底線
          無論從哪個角度,一致性存在的必要性都是毋庸置疑的。
          對于關鍵的設計元素,如專有名詞和顏色體系,保持一致性至關重要。這不僅有助于維護品牌形象,還能減少用戶的困惑。
          特定設計語言在特定場景下的變體應用,雖然可能帶來一定的視覺新鮮感或針對性優化,但往往需要謹慎評估其潛在風險。一旦變體打破了整體設計的一致性,可能會破壞用戶對品牌的熟悉感和信任感,甚至引發誤解。因此,在追求設計創新的同時,必須確保這種創新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗。
           
          擁抱復雜性
          一致性確實不應成為設計師的避風港或限制創新的枷鎖,而應是基于對業務深刻理解和多樣化設計能力之上的價值選擇。設計師的核心任務始終是滿足用戶的多樣化需求和偏好,這需要他們細致入微地觀察、理解并解決每個用戶的獨特問題。
           
          在追求一致性的同時,設計師應保持“第一性思考”的能力,即回歸問題的本質,從用戶需求出發進行創新設計。多樣性頁面的產出,不僅體現了設計師的創造力和靈活性,也是提升用戶體驗、增強產品吸引力的關鍵。
           
          一致性與創新設計并非相互排斥,而是相輔相成的關系。真正的一致性不應導致單調或拒絕創新,而應是在遵循品牌或產品核心價值的前提下,鼓勵設計師在細節和體驗上不斷探索和突破。當設計師感到被既定規則束縛時,應勇于質疑并重新評估當前的規范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發展的價值導向。
           
          因此,設計師應時刻保持開放的心態和敏銳的洞察力,不斷探索和嘗試新的設計方法和理念,以更加靈活和創新的方式實現一致性與用戶需求的完美融合。
           
          用戶體驗一致性思考
           
           
          重要的設計原則
          「一致性」作為設計領域中的一項基礎性原則,其重要性不言而喻。它不僅為設計過程提供了穩固的基石,還顯著促進了開發效率與產品體驗的全面升級。在設計實踐中,一致性確保了界面元素的統一性和連貫性,使得用戶能夠迅速熟悉并掌握產品的使用方式,降低了學習成本,增強了操作的直觀性和便捷性。
          靈活變通使用
          一致性原則并非一成不變的強制規定,而是需要根據產品的具體定位和市場環境進行靈活變通的應用。不同的產品可能面向不同的用戶群體,擁有獨特的品牌調性和功能需求,因此在追求一致性的同時,也需充分考慮這些因素,確保設計既符合品牌特色,又能滿足用戶的實際需求。
           
          提升用戶體驗是價值所在
          一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認知和習慣,設計師能夠創造出更加自然、流暢的操作流程,使用戶在享受產品功能的同時,也能感受到品牌所傳遞的舒適與和諧。因此,在追求設計一致性的過程中,我們始終應以人為本,將用戶的體驗和感受放在首位。建設有兼容性和長期價值的的一致性框架,在一致性中做到有用戶價值的設計,是設計師應該不斷探索的命題。

          作者:cheny米魚
          鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合