午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁

馮.雷斯托夫效應 | 設計師需要知道的設計原則!

天宇 設計思維

前言
在我們的日常生活中,心理學的影響無處不在。它像一把神奇的鑰匙,能打開人們內心深處的秘密。作為設計師,我們更應該掌握并運用心理學,將其融入我們的設計中,從而創造出更具有吸引力和影響力的作品。
設計并不僅僅是形狀、顏色和布局的組合,更是對人類心理的探索和解讀。我們的每一個設計決策,都與用戶的心理狀態和認知過程息息相關。如何抓住用戶的眼球、引發他們的興趣、引導他們的行為,這些都是我們需要深入研究的課題。
在眾多的心理學原理中,馮·雷斯托夫效應(Von Restorff Effect)是一個值得設計師們關注的設計法則。這個效應揭示了一個有趣的現象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設計中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關注的焦點。今天筆者就帶大家了解一下設計中常用的心理學之一馮·雷斯托夫效應。
 
 
 
分享目錄
一、關于馮.雷斯托夫效應
二、馮.雷斯托夫效應對設計的影響
三、在設計中的應用
四、常見問題及解決方式
五、結語
 
 
 
一、關于馮.雷斯托夫效應
1.產生背景
在1933年的德國,一個名叫海德維希·馮·雷斯托夫的醫生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時,他們的記憶是如何運作的。通過精心設計的對比實驗,她發現了一個令人驚奇的現象:在一組物品中,那個最特別的物品總是更容易被人們記住。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
這一發現為我們揭示了一個核心事實:特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個被聚光燈照亮,那么相比其他未被照亮的物品,它無疑會成為人們關注的焦點,從而在記憶中留下更深的痕跡。
這個人類行為和記憶的規律后來被命名為“馮·雷斯托夫效應”。這一效應不僅僅是一個簡單的觀察,它實際上是人類行為學和心理學領域的一項重要研究成果。隨著時間的推移,這一效應逐漸被應用于美學和設計領域,為設計師們提供了全新的視角和工具,以創造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應被正式確立命名以來,眾多科研學者在此基礎上進行了更深入的研究,他們不僅剖析了這一效應的內在機制和影響因素,還探討了其在不同情境下的應用。隨著研究的深入,對于這一效應的理解也在不斷加深,并衍生出了許多其他的理論和學術觀點。
 
2.融入設計行業
馮·雷斯托夫效應為我們提供了一個獨特的視角,幫助我們更好地理解人類記憶的運作方式。通過運用這一原理,我們可以在設計中有意識地創造出令人難忘的元素,從而與觀眾建立更深刻的聯系。無論是在廣告、品牌推廣還是產品設計中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
馮·雷斯托夫效應,又被稱為隔離效應或新奇效應,揭示了人們在記憶中的偏好。當情境或經歷中出現與眾不同的刺激時,這種效應尤為明顯。
在當今信息爆炸的時代,用戶往往沒有耐心去仔細查找信息,而是快速掃視。因此,設計師需要巧妙地運用萊斯托夫效應,使關鍵內容從繁雜的信息中脫穎而出,吸引用戶的目光。
統一性是設計的基礎,但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素,我們可以創造出與眾不同的視覺效果,引導用戶的視線。通過巧妙地突出關鍵內容,我們能夠更好地與用戶溝通,引領他們的注意力,為業務創造更大的價值。
 
 
 
二、馮.雷斯托夫效應對設計的影響
1.背景不同 強化視覺
在界面設計中,我們常常會遇到這樣的情況:在同類型的元素中,某一元素與其他元素存在顯著差異,這種現象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象,我們可以利用環境差異來提高其識別度和記憶度。這種手法在UI設計中被廣泛應用,它利用了馮·雷斯托夫效應,能有效吸引用戶點擊。
例如淘寶底部標簽欄中的四個ICON,唯獨首頁的第一個ICON(品牌logo)風格與眾不同。即使離開了該頁面,這個特殊的ICON依然讓人印象深刻,餓了么第二的圖標也是如此。因此,我們在設計界面時,若想吸引用戶的注意或提高點擊量,可以打破常規,讓特定元素在同背景下脫穎而出。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
再比如下圖的個人中心界面,功能入口模塊均采用ICON展示,而游樂場模塊卻采用了特殊的布局和設計。因此,當用戶進入個人中心時,最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時,需要特別設計的原因。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
2.經驗不同 強化記憶
當遇到與過去經驗顯著不同的情況時,我們的大腦會產生一種特殊的效應,這種效應被稱為“經驗不同”的效應。例如,在騎自行車的過程中,我們通常習慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來騎車,結果很可能會摔倒。從此以后,每當我們聽到或描述有關騎車摔倒的事情時,我們都會立刻想起那次“經驗不同”的嘗試。
同樣地,淘寶和京東在618、雙十一等大型促銷活動時,會選擇重新設計他們的首頁。與往常的設計相比,這些新的首頁設計通常會增加更多的促銷入口,甚至改變ICON的風格。從馮·雷斯托夫效應的角度來看,這種與以往不同的設計能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴大活動對用戶的影響力。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
 
 
三、在設計中的應用
1.功能隔離提高效率
在視覺層面難以實現強烈差異化時,我們可以通過功能來實現有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區分開來。這種設計確保了關鍵信息的優先級,使用戶能夠更快速地找到和關注所需內容。通過巧妙地運用功能,我們可以輕松地解決視覺上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個性化的體驗。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
2.動效加強引導
靜態頁面容易讓人視覺疲勞,動效能夠更加生動有趣地展示內容,引導用戶更加關注頁面。相較于被動接受信息,動效能夠更加有效地吸引用戶注意。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
3.背景聯動吸引目光
隨著Banner自動輪播的普及,用戶對其的吸引力逐漸降低。面對不斷變化的廣告,用戶不再耐心地逐個瀏覽。當無法獲取所需信息時,他們的視線會迅速轉向其他區域。
為了應對這一挑戰,騰訊視頻首頁的Banner采用了背景聯動的形式。這意味著頭部背景色會根據Banner圖片的色調進行變化,從而擴大了內容的變化空間。這種設計不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關注。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
4.icon強化加強視覺感知
頻道頁的入口方式多種多樣,金剛區icon無疑是最優選擇。若要突出展示某些業務功能,單一的icon配合動效可有效吸引用戶關注。此策略簡單高效,有助于用戶快速找到所需內容。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
5.內容強化凸顯價值感
在設計界面時,我們追求的是在有限的空間內展示更多的有效信息,避免信息的無效重復。但在電商平臺中,尤其是涉及到利益點時,我們需要確保信息具有足夠的價值感和吸引力。
以智行APP開通會員為例,領神卡作為核心賣點被突出展示,采用了平鋪展開的方式,從而突顯其價值。相對其他權益則相應地進行了弱化處理,以保持整體信息的清晰度和重點。這樣的設計既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
6.分層隔離提高信息層級
頁面信息層次分明,信息層級越高,用戶感知越強烈,越能吸引注意。例如,模態彈窗處于最上層,與內容層完全隔離,用戶無法忽視。其次是非模態懸浮層,與內容層隔離,但不影響用戶操作。還有側邊懸浮按鈕、頂部或底部懸浮橫條等。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
 
 
四、常見問題及解決方式
1.本末倒置的危險
受“危險按鈕”的影響,過去設計師常常給予負向情緒操作很高的視覺層級,例如退出登錄。這樣的設計意圖是警示用戶操作危險,但視覺上卻過于強調,甚至有些“喧賓奪主”。近年來,移動端設計中這種矛盾逐漸減少,但仍然存在。與其強調操作的難度和危險性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應來看,這種設計方式有本末倒置之嫌,應盡量避免。
馮.雷斯托夫效應 | 設計師需要知道的設計原則!
 
 
 
2.什么都突出等于什么都不突出
新手設計師常常會遇到想要突出所有元素,但最終無法突出任何一項的問題。頁面中的特異點應該屬于少數,如果所有元素都想做得不一樣,都會讓頁面整體視覺效果崩潰。因此,在設計中要學會取舍,選擇最重要的元素進行突出,才能達到最佳的視覺效果。
 
 
 
五、結語
總的來說,將馮·雷斯托夫效應運用到設計中,能幫助我們創造出更具吸引力、更容易被記住的設計。但請記住,任何設計決策都應以用戶為中心,了解他們的需求和心理是關鍵。只有這樣,我們才能真正創造出打動人心的設計。
 


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

響應式布局-創造無縫的跨平臺用戶體驗

天宇 交互設計及用戶體驗

響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
 
Current Time 0:00
/
Duration Time 0:07
 
Loaded: 0%
 
Progress: 0.00%
Playback Rate
1.00x
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗
 
 
響應式布局-創造無縫的跨平臺用戶體驗


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

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

ui設計分享達人 用戶研究

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


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

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

資深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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(m.gerard.com.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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(m.gerard.com.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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(m.gerard.com.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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

蘭亭妙微(m.gerard.com.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
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

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

ui設計分享達人

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


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

日歷

鏈接

個人資料

藍藍設計的小編 http://m.gerard.com.cn

存檔

主站蜘蛛池模板: 久久草这在线观看免费 | HEYZO无码中文字幕人妻 | 国内精品一级毛片免费看 | 大香伊蕉在人线国产97 | 色欲天天天综合网免费 | 国产午夜精品理论片久久影视 | 日韩一卡二卡三卡四卡免费观在线 | 久99视频精品免费观看福利 | 青青草伊人网 | 黄色三级视频在线观看 | 亚洲A片不卡无码久久尤物 亚洲a免费 | 九九久久国产 | 无码国产伦一区二区三区视频 | 色欲AV久久综合人妻蜜桃 | 爱豆剧果冻传媒在线播放 | 国产高清视频在线观看97 | www.av一区 | 亚洲a视频在线 | 亚洲 欧美 国产 视频二区 | 色偷偷888欧美精品久久久 | 日韩一本道无码v | 精品无码久久久久久国产百度 | 久久精品免费观看久久 | 国产午夜AV无码无片久久96 | 天美传媒在线观看完整高清 | 小玲被公扒开腿 | 成人精品视频在线观看 | thermo脱色摇床安卓下载 | 免费人妻AV无码专区五月 | AV色蜜桃一区二区三区 | 性欧美videofree中文字幕 | 红桃传媒少妇人妻网站无码抽插 | 久久伊人中文字幕有码 | 国产精品久久久久久亚洲毛片 | 久久精品99国产精品日本 | 97在线国内自拍视频 | 色哦色哦哦色天天综合 | 美女扒开腿让男人桶个爽 | 99热这里只就有精品22 | 亚洲视频91 | 最近高清中文字幕无吗免费看 |