用戶體驗(用戶使用產品,系統或服務過程中的主觀感受)
用戶在使用產品過程中建立起來的一種純主觀感受。用戶體驗這個詞最早被廣泛認知是在上世紀90年代中期,由用戶體驗設計師唐納德.諾曼(Donald Norman)所提出和推廣。對于一個界定明確的用戶群體來講,用戶體驗的共性是能夠經由良好設計實驗來認識到。用戶體驗并不是指一件產品本身如何工作的,更明確的是指“產品如何與外界發生聯系并發生作用”,也就是人們如何‘接觸’和‘使用’。無論什么產品,用戶體驗總是在細微之處,往往細節最能打動人心。用戶體驗通常要解決的是用戶具體的使用場景,要兼顧視覺和功能兩方面的因素,同時解決產品所面臨的其他問題。
產品的邏輯簡易程度對于用戶體驗是一個反向指標,產品越復雜用戶體驗會越發困難。往往產品后期更新迭代中,每新增一個特性,功能或者步驟,都會增加導致用戶體驗不順暢或者失敗的機會。用戶體驗的每一個流程,對開發者而言都要經過慎重的考慮和驗證。實際上設計出一個最優的解決方案需要更多的時間和精力,往往不得不在各個方面作出妥協。但是一個以用戶為中心的設計流程保證來這些妥協不是隨機決定的。
為什么每個產品都在強調‘站在用戶的角度,提升產品的用戶體驗’,因為優秀的用戶體驗就是商機,良好順暢的用戶體驗會極大的提升用戶轉化率,增加用戶的留存率。好的的用戶體驗主要體現在兩種形式:“幫助人們工作更快”和“減少他們犯錯幾率”。牢記“以用戶為中心的設計”在開發產品的每個流程都要把用戶列入考慮的范圍,每一個流程步驟都要代入用戶的使用場景中體驗,想用戶所想。提供優質的用戶體驗是一個重要的,可持續,良性的競爭優勢,用戶體驗形成用戶對企業的整體形象,并以此來界定來與競品的差異。
在產品的整個開發流程中都要考慮用戶有可能采取每個步驟的可能性,并且理解整個流程中每一個步驟用戶的期望值。
表現層:視覺設計,我們使用無論任何設備的產品最先看到的就是表現層,內容、功能和美學匯集到一起來產生一個最終設計呈現;
框架層:界面設計、導航設計和信息設計,框架層用于優化設計布局,以達到界面中元素的最大效果和效率;
結構層:交互設計和信息架構,相對于框架層更加抽象,框架是結構的具體表達方式,明確來元素應該出現在哪里;
范圍層:功能規格和內容需求,結構層明確了產品的各種特性和功能最優的展示組合方式,這些內容構成了產品的范圍層;
戰略層:產品目標和用戶需求,成功的用戶體驗,其基礎是一個被明確表達的“戰略”。知道企業與用戶雙方對產品期許和目標,有助于確立用戶體驗各方面戰略的制定;
在五個層面應該是自下而上的建設,戰略 — 范圍 — 結構 — 框架 — 表現;不同的層面位置考慮的方向和側重點是不一樣的,隨著層面的上升我們考慮的決策變得更加具體,并且涉及越來越精細的細節表現。每一個層面都是根據下面層面來決定的,每一個層面的決定都會影響上層的可用選擇,表現層由框架層決定,框架層是建立在結構層的基礎上,結構層是具有范圍層,范圍層是根據戰略層制定的。
按照產品不同屬性分為兩大類:功能性產品/信息型產品;針對不同的類型將五要素細分展示,功能型產品更加關注的是任務,去思考用戶如何完成這個過程,用戶使用該產品完成一個或多個任務的工具;信息型產品關注的則為信息,產品應該提供哪些信息,并且方便用戶快速尋找,理解,創建一個富信息的用戶體驗;這種把用戶體驗劃分為各個模塊和層面的模式,更有利于我們去考慮用戶體驗中可能出現的麻煩。所有處在同一層面的要素都會決定最終的用戶體驗效果。
優秀的用戶體驗基礎是要有明確的“戰略”立意,知道企業和用戶對產品的期許和目標,才能更好的促進用戶體驗各方面的完善和優化。我們要用過產品獲得什么?用戶通過產品可用得到什么?回答這兩個問題有助于我們更好的明確產品目標和用戶需求,結合兩者我們組成戰略層。
產品目標:目標的制定切記不要太過具體或太寬泛我們需要在這之間找出一個平衡點,為了更好的用戶體驗我們需要保證所作出的決策都不是頭腦發熱拍腦門定出來的,每一個決策,都應該建立在我們確切了解他所帶來的聯動影響效果。明確的定義出成功的條件而不是定義成功的路徑,有時候跑的慢一定不一定就是落后者。既然是賽跑肯定會有終點有結果的產出,我們要明確“成功的標準”制定可追蹤的指標,成功的標準不僅僅影響各階段的決策,也是衡量用戶體驗工作的具體依據,埋點數據采集,上線后的客戶流存率,轉化率,新用戶的增長率,老客戶的使用反饋等等。對驅動用戶體驗的決策而言有意義的成功標準,一定是可用明確與用戶行為綁定的標準,而這些用戶行為一定是可以通過設計來影響的。
用戶需求:明確正確的用戶需求是復雜不易的,因為用戶群體存在很大差異性,確定大致目標用戶后我們還需要精細化的區分,將用戶分成較小的,有共同特性的以此來助力我們更好的明確用戶需求,通過不同的角色群體使用產品來分析他們的需求。在針對用戶需求研究時我們還可以使用一些市場調研(將你想要的信息通過具體,有效的公式化問題,讓用戶提交你正確的答案);現場調查(完整的,有效且全面的方法,了解與產品使用生活場景最匹配的用戶行為);創建人物角色(模擬真實用戶使用場景更加貼近用戶,再產品思考中和用戶更感同身受)。戰略應該是用戶體驗中的起點,但并不意味著項目開始之前戰略就完全確定下來,它是可以在整個工作中演變和改進的。
當我們明確了解戰略層后,我們就知道產品應該為用戶提供什么功能和服務,這些也就逐步演變為范圍層。我們要做兩個事情來定義范圍層 —過程和產品。過程的意義在于當產品還在一個雛形時,可以帶動我們去思考流程中可能存在的問題,功能實現的優先級;產品的意義在于明確最終產出的結果,團隊有明確的目標。在這其中文檔的輸出是必不可少的,有計劃性說明性的文檔輸出可以讓我們的工作更加有條不紊的推進下去。我們可以從戰略層抽象出來 — “我們為什么要開發這個產品?”轉而到范圍層變為 — “我們要開發的是什么?”在軟件開發過程中,范圍層確定的是全部功能需求和功能規格。
功能規格:功能規格說明不需要包含產品的每個細節,只需要包含在設計或開發過程中可能出現混淆的功能定義。同時功能規格說明也不需要展望產品未來理想狀態,只需要記錄在創建產品時確定下來的決議。換句話說,文檔不能解決問題,但是定義可以,我們需要不是文檔多么詳細厚重,而是要足夠的清晰和準確。功能說明要明確具體避免主觀語氣,避免出現歧義,盡可能用量化的可檢驗的標準來定義功能有助于我們的驗收。
內容需求:很多時候我們說到的內容指的是文本。但是圖像,音頻和視頻有時候比文字還要重要。這些不同類型的內容結合到一起,相互協作去滿足某一個需求。內容特性想要達到的規模,將對你所做的用戶體驗產生極大的影響,內容需求應該提供每一種特性規模的大致預估,以便在設計過程中作出最為明智的決策。盡可能早的確定某個人來負責每一個內容元素也是非常重要的,避免后期開發實現達不到我們預期的效果。內容清單的輸出也是重要的,究其原因這樣團隊中的每個人都會清楚知道自己負責的哪些部分,明確責任,提高協同效率。
學會確定需求優先級,了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”,把那些需求點梳理出來,找到一種適宜的方式,讓它們符合你長期的規劃,這才是真正的價值所在。確定具體,系統的發展要求,并將任何不符合這些要求的想法作為潛在未來功能的囤積,只有通過這種更慎重的途徑,才可以真正的管理起整個項目過程。
在羅列出項目需求優先級,梳理出大致的流程,我們對于產品將會包括什么主要內容已經有了清晰的構想。然而,這些需求沒有進行全面的整合還是碎片化的存在。而結構層要做的就是整合這些創建一個概念性的結構。結構層適當的將我們關注點從抽象的決策和范圍問題,轉移到更能影響最后的用戶體驗具體因素。但是這里的交互設計和信息架構所產出的東西大部分還是概念性的內容。這兩項內容并不完全是技術,它要求開發者要有共情能力去理解用戶,理解用戶行為操作習慣,使用場景,思考方式等。將了解的這些知識代入我們開發過程中,這樣會使那些不得不使用我們產品的用戶帶來更好的用戶體驗。
交互設計:關注于影響用戶執行和完成任務的元素,即關注用戶所有操作,同時定義“系統如何配合與響應”這些用戶行為。任何一個交互設計的項目都有很大部分牽涉處理“用戶錯誤”當用戶發生錯誤時產品要給出什么提示,并且對于錯誤發生時,如何防止用戶再次發生錯誤?第一個也是最好的防止錯誤的方法,就是將產品設計為不可能犯錯的。第二個避免錯誤的方法就是使錯誤難以發生,即使一些錯誤發生,產品也應該幫助用戶改正錯誤。有效的錯誤信息和容易自我解釋的界面可以在錯誤發生之后幫用戶糾正。當用戶完成一些操作后無法糾正的錯誤,產品就該提供從錯誤中恢復的方式。對于那些不可恢復撤銷的錯誤,提供大量警告就是產品唯一可以預防的方法。
信息框架:研究人們如何認知信息的過程,對于產品而言信息架構關注的就是呈現給用戶信息是否合理并卻具有意義。在以內容為主的網站上,信息架構主要工作就是設計組織分類和導航的結構,讓用戶可以高效率,有效的瀏覽網站的內容。信息框架與信息檢索和分類體系密布可分,針對分類體系我們可以從上到下或從下到上這兩種方法來建立。
從上到下的信息架構從戰略層考慮,先從最廣泛的,有可能滿足決策目標的內容與功能開始進行分類,然后再依據邏輯細分出次級分類;從下到上根據對“內容和功能需求分析”而來,從已有的資料開始,先把他們分為最低級別的分類,然后再歸納到高一級分類,從而逐步構建出反應我們產品目標和用戶需求的結構。這兩種方法各有弊端,從下而上容易將內容的重要細節忽略,從下而上使架構過于精準的反應內容,對于后期的維護變動不是很靈活。因此我們要盡可能的從兩種方式中尋找一個平衡點。一個高效結構的優點就是具備“容納成長和適用變動”的能力。一個適應性強的信息架構體系,既可以把新內容作為現有結構的一部分容納進來也可以當成一個新的部分加入。
在充滿概念型的結構層牽引出大量需求后,這些需求都是來自我們戰略目標的需求。在框架層我們要更進一步的提煉這些需求結構,確定詳細的界面外觀,導航和信息設計,這樣才能使結構變得更加豐滿。框架層需要處理更為細節問題,在結構層我們建立了一個框架和交互設計。在框架層我們關注點就是界面的元素以及它們之間的關系。當我們提供用戶做某些事情的能力是,屬于界面設計;當我們提供用戶去某個地方能力,則屬于導航設計;當我們要傳達想法給用戶時,那就是信息設計。
界面設計:成功的界面設計就是要讓用戶一眼就看到“最重要的東西”,而另一方面,不重要的東西,不應該被注意有時候則它們根本就沒有出現在那。設計界面,平面最大的挑戰之一就是弄清楚用戶不關注的東西并減少他們的比重。將第一要表達的要素快速傳遞到用戶。
導航設計:任何一個網站的導航設計必須同時完成三個目標:1.它必須要提供用戶在網站的跳轉方式;2.導航設計必須傳達出這些元素和它們所包含內容的關系;3.導航設計必須傳達出它的內容和用戶當前瀏覽頁之間的關系;這三個目標就是必須要納入考慮的范圍,清晰的告知用戶“他們在哪里”以及“他們能去哪里”把用戶當成是“傻瓜上帝”。
習慣和反射作用是我們與這個世界交互時的基礎,我們在使用互聯網產品這么多年的時間中,絕大部分的操作效果和下意識的操作方式已經被養成,所以要讓你的界面與用戶早養成的習慣保持一致是很重要的,界面要與它自身保持一致。這并不是說,每一個界面問題的解決方式都必須毫無條件的死守這些習慣。當某種不同的方式有明顯的益處時,你反而應該嘗試謹慎的違背一些習慣,到那時需要我們做的每一個決定都要有充分的,明確的理由。有效的使用比喻,就是減少用戶在“理解和使用你的產品功能”是的猜忌,讓用戶第一眼就知道你的圖標表達的是什么意思,要有強指示性質。
內容,功能和美學匯集的地方,完成其他四個層面的所有目標并同時滿足用戶的感官感受。在框架層,我們主要解決放置的事情;在界面設計考慮可交互的元素布局;導航設計考慮在產品引導用戶移動元素安排;而信息設計考慮傳達給用戶的信息要素的排布;在向上就是表現層,我們這里要解決的就是彌補“產品框架層邏輯排布”的感知呈現問題。我們每一次經歷最終都是由我們的感覺器官來進行的。在設計的過程中這是用戶體驗的最后一站:決定我們設計最后被哪些(視覺/聽覺/嗅覺/觸覺/味覺)感受器官受到呢?
嗅覺和味覺對于用戶體驗設計師是很少考慮的范圍;觸覺更多的用于工業設計領域,關注用戶和產品之間的物理接觸;聽覺可以應用到不同類的產品中,如開機/新消息提示等;視覺:這是用戶體驗師最得心應手餓領域,幾乎所有的產品都會涉及視覺設計。代替用“什么具有美感”來評估一個視覺設計方案,應該吧注意力集中在他們能否“良好運作”,對于那些上層決定的目標,設計能否賦能幫助企業更好的變現,設計的本質就是用合適的方式幫助用戶/企業完成需求目標;
忠于眼睛評估一個產品視覺設計最簡單的方式,就是你的視覺首先落在什么地方?哪個設計要素第一時間吸引注意力?它們對于戰略目標是最需要表現的東西嗎?用戶第一時間接受的信息是你想要表達的嗎?設計還是要把握4大基本原則:對比;重復;對齊;親密性;
不管你的產品多復雜,用戶體驗都是一樣的,創建良好的用戶體驗最重要的工作內容就是大量收集解決細微的問題?!俺晒Φ姆椒ā焙汀白⒍ㄊ〉姆椒ā睔w根究底就是:1.了解你正在試著去解決的問題;2.了解這些解決辦法所造成的后果;必須要同時考慮五個層面的全部因素,這對于創建成功的用戶體驗至關重要。
提成正確的問題,面對那些用戶體驗需要解決的糾纏不清的問題,要抱有一種正確心態,不要以“節約項目時間或金錢”名義對用戶體驗問題敷衍了事。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系
作者:許小鵬 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗設計師經常需要兼職各個角色職責,除了線框圖和原型制作之外,還有可能與團隊一起研究、寫作等問題。這樣的例子不勝枚舉,用戶體驗是一個不斷發展的多學科領域,因此優秀的 UX 設計需要廣泛的技能開發,UX寫作位居榜首。
關注用戶從內容開始,內容策略是所有產品信息的制作和開發。用戶體驗(UX)寫作是該學科的專長,它專注于幫助用戶用語言實現他們的目標。
語言幫助用戶到達他們想去的地方,通過關注用戶想要實現的目標,內容策略可以建立忠誠度和信任度。
UX設計師思考頁面上的信息層次結構,然后,這將指導用戶操作。UX與研究人員一起測試有關語言的假設并提供專業的見解。
當您擁有 UX 寫作的基礎,并參與品牌建設時,就會發生驚人的事情,用戶體驗寫作可以讓品牌茁壯成長。
通常在產品中,使用的詞是軟件操作,請用動詞,它往往是句子中最有力的部分。它將與用戶的某些操作有關,
保障用戶使用中清楚,需要刪除技術術語并將操作置于用戶的上下文中。
簡潔不僅意味著簡短,還意味著簡單高效。當我們寫作時,需要查看我們的信息每個詞語都有不同的工作。
以上是產品寫作中的常見問題,在這里不需要標題。在系統接口中很常見,研發提供一種狀態,我們通過這種狀編寫文案。我們應該確保內容優于設計,視覺效果與要表達的內容一致。盡量不要把信息塞進不適合的盒子(代碼)里。
在這里,我們刪除了標題。正如研究表明,大多數人不會閱讀屏幕上出現的每個詞語,用戶傾向于掃描。他們的眼睛會遵循 F 形圖案。閱讀第一行,第二行,然后開始向下跳過頁面,只捕捉每個句子的第一個或第二個詞。出于這個原因,保持我們的文本不僅簡潔而且前置。將重要概念放在首位,這樣做是為了讓人們在瀏覽頁面時能看到那些重要的詞。
這個原則永遠適用,將最重要的文本放在前面,然后無情地編輯后面的內容。
號召性用語 (CTA) 引導人們進行下一步,您希望引導用戶到達他們想去的地方,號召性用語需要與用戶想要做的事情產生共鳴,這里的“好的”不是一個好的行動號召。
“再試一次”是一個不錯的選擇,這不是全部場景,如果用戶忘記了密碼,而唯一的按鈕只有“再試一次”,用戶可能會感到沮喪,我們需要給用戶多一個選項「忘記密碼」。
注意寫作時需要結合使用場景,它可能需要提供的一些基本功能,但可以提升產品的用戶體驗。
如果您注意這三個原則,您將更好地與用戶建立聯系。
這三個原則并不總是協調一致的,他們之間有一種張力在互相競爭。
當我們使文本清規則時,文案仍然很長,而且不太好閱讀。當我們使文本簡潔規則時,它使文案更短,但可能犧牲一些清晰度為代價。最后,當我們使文本有用規則時,它變得更長且更不易閱讀。
從一個品牌中,我們可以篩選出 3 或 4 個形容詞,以及希望用戶如何看待它。提取這些形容詞,可以采用頭腦風暴練習。
想象一下,如果要設計一個約會產品
您會在產品資料中加入什么詞或信息?讓它在眾多產品中脫穎而出,是什么讓用戶覺得它最有趣?
是什么讓用戶想要點擊并想要了解更多信息?
然后,您可以將這些品質提煉成描述性詞語,這些將成為您的品牌原則。
Google Pay 的原則是:新鮮、善解人意、平易近人。
想想您在不同的環境或情緒中聽到聲音是什么樣,這是語氣。
聲音和語氣之間差異,是聲音傳播手段,語氣是根據情況或內容而不斷調整的。在一個產品中,就像在不同的情況下以不同的方式與用戶交談,語氣的利用容易帶用戶進入情感化的設計。
例如:
將不同的階段映射到用戶旅程中,可確保用戶在整個產品體驗中以一致的方式使用產品文案。
對于產品,您的文案寫作可能從信息豐富到鼓舞人心或者幽默風趣。創建產品開端與終端后,您需要確定要映射的用戶旅程中的哪些時刻,考慮用戶體驗中不同的里程碑或交互,如注冊、引導、或錯誤提示之類。
為了幫助您確定這些將落在頻譜中的哪個位置,您可以考慮:
現在,我們將前面講的內容,融合在一起做一次UX 寫作練習
UX寫作原則
舉個例子,第一次使用 Android Pay 時需要對用戶說什么?
在流程開始時,從以下描述性內容開始:
思考良好的用戶體驗寫作的三個原則,文本清晰有用,但并不簡潔。讓我們查看看哪些信息是必不可少的,哪些部分可以使用視覺效果?最后編輯為如下所示:
Google Pay 的原則是:新鮮、善解人意、平易近人。
文案已經清楚,簡潔和有用,現在需要考慮語氣詞,還有就是“這段文字是否傳達了品牌?”不多,感覺很一般。
因此,回到品牌原則,需要考慮如何讓它更新鮮、更令人興奮,因為這可能是用戶的第一印象。
有了這份清單,您就可以讓產品在語言上脫穎而出:
行業對設計師的要求?直都在不斷革新,只有「?技之?」的設計師已經很難滿??業需要,產品分析已經不僅僅是產品經理的工作內容,對于 UI 設計師來說,也是必備技能之一了,尤其是對于 B 端領域的設計師來說,更需要拓寬視野,思維前置。
那么,該如何去做產品分析呢?本文將從產品分析是什么,如何做兩個方面來講述,為大家提供思路,做真正落地的對設計有幫助的產品分析,提高自己理解業務、處理業務、解決問題的能力,體現出設計師的價值。
對于 B 端產品來說,它只有一個目標,就是解決問題,通過對問題的分析得出解決方案,而任何一個問題都不會只有一種解決方案,在權衡利弊后得出了最終的解決方案,產品就是解決方案的表現形式和實際載體。
從設計師的角度來說,產品分析通常是挖掘產品缺陷,優化產品體驗,為產品迭代提供依據,比如:通過深度體驗產品,挖掘產品的在功能、交互體驗方面的不足,并通過分析制定產品優化方案。一款產品從淺至深擁有無數的可被挖掘的信息,這些信息本身是龐雜冗余無意義的,只有通過分類和清洗才能得到對人有意義的信息,本質上來說,產品分析就是在做信息分類和清洗的工作。
市場分析是對產品所在的市場進行宏觀的競爭態勢和市場規模的分析。市場分析主要包括行業背景、市場現狀和商業模式三部分??梢钥吹?,市場分析其實是從很宏觀的一個角度來切入,更偏向于戰略層內容,因此市場分析也是三者中距離設計師最遠的一個概念。用通俗的話來說,市場分析最主要的目的就是分析產品是否賺錢。
廣泛意義上說,競品分析就是根據分析目的,找到切入角度,對競爭對手或市場進行客觀分析,找到競品或自己的優勢與不足,為下一步決策提供科學依據,其實就是「知己知彼」的過程。對于設計師而言,競品分析的目的更傾向于尋找解決方案,比如:通過競品分析來尋找參考從而解決自己當前遇到的問題。
不同于 C 端,B 端往往有很堅固的行業壁壘,所涉及業務也非常難以理解,究其原因,來自以下兩個方面:
B 端產品很多時候,都是在原有線下業務的基礎上進行數字化。邏輯的復雜度本質上是來源于這個行業多年來積累的足夠成熟的業務流程與規范,而這些東西沒有辦法速成,只能靠不斷地積累來增進理解。
C 端產品的設計中,設計師大部分情況下都或多或少地就是用戶本身,或者帶有用戶屬性,比較容易產生同理心,去發現問題解決痛點。
而 B 端產品不是給普通用戶使用的,是給特定群體使用的,這種特質就決定了設計師很難去真正地理解用戶的處境,設計師最厲害的特質——同理心也很難派上用場。
有的設計師同學,一接到產品分析的任務,到手就是先去網上看看別人是怎么做的,然后按著人家的結構對自己的產品進行一通分析,其中不乏用到了「用戶體驗五要素」、「SWOT分析」等看起來高大上的方法論。
按這樣做,產出的分析報告不能說錯,但是最起碼是不恰當的,對設計上的幫助微乎其微。其中有這樣兩個問題:
產品經理是產品的第一負責人,需要對產品的整個生命周期負責,說人話就是產品經理負責產品做什么不做什么,該什么時候做,而設計師關注的是產品的用戶體驗。產品是商業的代言人,而設計師是用戶的代言人,二者本質上的不同,就決定了在做產品分析時關注點必然不同。如果按著產品經理的思路來做產品分析,得出大環境之類的太過于泛化的結論對設計沒有什么實質性的幫助。
用戶體驗五要素,swot,等等這些高大上的方法論看起來非常有用,從多個維度把一款產品分析得非常清楚。可真實的情況時,往往新手設計師同學既不懂方法論的本質,也不懂使用場景,只是盲目地套用,導致產出的是一篇「八股文」一般的產品分析報告,過于全面但沒有重點,什么都是點到為止,對自己理解業務和輔助設計沒有實質性的幫助。
我認為,「方法論」本質上是經驗主義,使用過去解決問題的方式來解決新的問題。在一定程度上,方法論是有用的,一些簡單的問題,確實是有固定解法的,而且,解決問題也更快。但是在更難更特殊的場景下,方法論不再管用了。很多時候,問題表面上看起來一樣,可是由于問題的背景不同,所以解法也是不一樣的,這時候再采用方法論,就會產生思維固化,強行去套方法流程,得到的一定不是最正確的答案。
在確定了目標和分析重點之后,我們就可以開始進行分析產出產品分析報告了,在這里我整理了幾個撰寫時的原則供大家參考:
第一點是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣,我們并非 B 端產品的核心用戶,有些我們感覺反常的地方,但是其實有它的合理性,因為 B 端用戶的痛點往往是在特定的工作場景下產生的。因此,在不了解真正用戶和場景的情況下,僅憑經驗下的結論往往是錯誤的。
我之前的一個項目的設計中,在給圖表配色時,我最初的一個版本是用的近似色去完成的,在發給產品經理初審時被打回來了,理由是這種配色不夠明顯。我追問原因后才知道,我們的一部分用戶是年齡比較大的用戶,對比度足夠高才能方便他們看清楚。最后出的一個版本是對比度非常高的配色,盡管從設計的角度來看這種配色美觀度不足,但是能夠讓用戶看得清楚。
在這個例子中,用戶對于美觀度并沒有很高的要求,反而對于數據的識別度要求更高。我們常聽的一句話是「己所不欲,勿施于人」,然而在B端的設計中,我們更要做到「己所欲,亦勿施于人」。
B 端產品有一個很重要的特點,購買決策者與使用者的割裂。我們在思考一個功能時,不能僅僅考慮使用者的體驗,也要考慮決策者的想法。
比如釘釘的「已讀未讀」這個功能,相信大家對這個功能是槽點滿滿。但是在 B 端產品中,決策鏈上游是購買決策者即老板,因此就有了這個功能。如果只考慮到用戶體驗,這個設計從一開始就不該出現。但是,與 C 端產品的流量思維不同,B 端產品不是靠體驗來吸引用戶存活的,而是靠滿足決策者的需要來活下去的。很多大家感覺不好用或者體驗很差勁的 B 端產品,仍然活得很好,就是這個道理。
說句題外話,釘釘已經注意到了這個細節,在去年的一個演講上,釘釘總裁也提到了對這個功能點的考慮,他舉了一個場景,在不改變現有設計的情況下解決了這個問題,通過智能手表等外設來預覽消息,而手機和電腦依然顯示未讀,自己考慮好了的時候再去回復。
從戰略層到功能架構,再到每個功能細節,采用金字塔原理去遍歷,避免遺漏的同時層層深入。
在此處,我介紹一下我認為一份合格的產品分析報告應該包含的部分,各位設計師同學可以根據自己的需要進行適當調整。
因為產品分析是有一定的時效性的,且是針對某一個具體版本去進行分析的,所以在文檔開頭要列出自己所分析產品的版本,例如(飛書 V5.6.9,釘釘 6.3.35)。
即設計師進行產品分析的時間,留檔以供以后查看。
此處要回答的問題是,產品是用來干嘛的,給誰設計的以及怎么賺錢的。
即產品是用來干嘛的,不需要特別具體,只需要在大方面上對產品進行概括即可。舉個栗子,抖音定位是一款短視頻消費型產品,以“內容”的新鮮有趣為主,強調分享和信息獲取,滿足幸??鞓返拿篮脮r刻需要。
即產品是給誰設計的,在此處需要對客戶和用戶做區分。客戶一般是指企業的 CEO/管理者,他們來決定是否要斥「巨資」購買一款軟件。比如說某公司的 CEO 最終決定買釘釘還是飛書作為辦公協同軟件。而用戶一般是企業內的員工,他們使用軟件來完成一些日常工作。分析目標用戶的意義是,在之后的分析中,我們都要以用戶為落腳點,去分析功能的合理性。
需要注意的是,此處并不需要去做一套完整的用戶畫像,只需要大概描述一下是產品的客戶和用戶的職位和核心需求即可。
舉個栗子,對于某客服工作臺產品,
即產品如何賺錢,在這里,我們并不需要用各種很高端的工具——比如商業模式畫布,去分析商業模式,我們僅需要知道產品的賺錢方式即可。作為設計師,我們不需要有產品經理那么專業的商業思維,但是我們也一定要能夠從商業角度理解產品的價值,一款產品最健康的狀態一定是用戶價值與商業價值并存。因為本質上而言,用戶體驗也是商業價值的一部分。
對于B端產品而言,有兩種最常見的售賣方式:
1. 本地部署 —— 按軟件數量售賣
本地部署是指產品的應用、數據都存儲在一臺計算機中,這臺計算機不與其他任何服務器、計算機相連。21世紀之前的傳統 IT 公司大部分都屬于這類,比如 Adobe 旗下的產品(盡管他們也在做云,但是更多情況下我們還是把 PS 當做本地產品來使用),那時候 B 端企業的商業模式是:主要服務于大企業客戶,通過與頂級的合作伙伴合作,推出頂級的產品,提供一整套軟硬件解決方案,并進行深度服務,一次性收取高昂的軟硬件費用,并且每年加收不少服務費。
2. SaaS —— 訂閱制
21 世紀后,隨著云計算技術的發展,越來越多的產品開始部署在云上,也就逐漸發展成了現在的 SaaS 產品,從這個角度來講,我們通常所說的 SaaS 產品其實就是將本地部署變為云端部署的產品服務。
這時候 B 端企業的主要商業模式是:不僅服務于大型企業,也服務于中小企業。以訂閱制的方式,定期收取費用,并且提供不同的版本,進行差異化定價,實現收益最大化。
舉個例子,藍湖就是提供了四個版本并且以季付或年付的方式進行收費。
將需求轉化為對應的軟件層面可實現的能力,即功能,功能可以實現需求所期望達成的目標。
一個完整的 B 端產品包含若干功能,將一套功能依據業務進行分類整合,形成的抽象化業務模型即功能架構。
功能架構指的是產品是如何由這些功能組成的。我們在分析功能架構時實際上更偏向于產品的實現模型。
信息架構是包括組織系統、標簽系統、導航系統、搜索系統在內的綜合系統。我們在分析信息架構時,分析的是這個產品是如何將不同的功能組合在一起展現在用戶面前的,分析的是產品的呈現模型。
一個成熟的 B 端產品甚至會有甚至會有三四百個功能,我們在分析功能細節前,必須要先厘清架構,以一種抽象的框架視角來全局思考,而不是也僅僅以用戶的視角來看產品的表象。
真正地去使用產品,并將產品的所有功能與模塊收集到一起。
以模塊作為分類依據,將所有功能分到不同的模塊里,必要的話,可以繼續細分子模塊。
在這里要注意,一個功能是否屬于某一個模塊,不能以這個功能是否在某個頁面為依據。一個頁面出現了某個功能,只是因為這個場景下用戶需要這個功能,而不是這個功能屬于這個頁面。
以飛書后臺為例,很多人在分析時會把首頁也作為功能架構圖中的一個節點去分析,這是錯誤的。
首頁只是功能的聚合,而非功能模塊,例如「添加成員」這一功能應該屬于「組織架構」模塊中,如果將首頁也加入分析,勢必會出現功能的重復。
在分析完整個功能架構之后,我們可以深入到每個功能的細節了。其中包括以下兩點:
通過繪制功能的使用流程,我們可以模擬用戶在使用產品時的流程,發現一些從宏觀角度上忽略的點。在繪制時,要注意的是,要控制在頁面 & 操作維度,避免拔高到功能維度甚至業務維度。
我們除了要知道這個功能該怎么用之外,還要知道功能與業務的關系 —— 功能背后的需求。
在分析背后的需求時,除了知道這一需求是什么,如果可以多走一步,對需求進行分類,那對于我們了解產品時大有裨益的。
關于需求的分級,在 C 端中常用的模型是馬斯洛需求模型,但是這一理論并不適用于 B 端,主要是由于以下原因:
一般而言,我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求,指的是隱藏在功能需求背后以及開發需要考慮的的需求,也叫作“跨功能需求”。最常見的非功能性需求就是產品的響應時間,一般非功能性需求是由開發和測試同學考慮的。
而對于功能性需求,有三大類:業務需求、功能需求、產品需求。而這三類需求也有比較立體的層次關系:
業務需求,提出者是業務范圍、業務模式和業務規則的制定者,一般是指業務方的高層人物,比如 CEO、高級經理等。產品設計是服務于業務定位的,進而使得產品戰略遵循于企業的發展戰略,只有這樣產品方向才不至于發生偏差,因此,他們提出的需求一般不能違反,換句話說,他們提出的需求是整個系統設計的最高綱領。
用戶需求,提出者是基層管理者和執行者。他們關心的是如何使用產品完成自己的工作,提出的需求相對細節,例如對操作、流程上的訴求。
產品需求,由于 B 端產品的復雜性,在建設時需要考慮到功能復用問題,以及與其他系統的架構交互問題。舉個例子,語雀 App 是阿里旗下的產品,在開發登錄界面時,沒有重新開發,而是集成了阿里云的 SDK。產品需求本身對業務實現沒有價值,它的價值體現在節省人力和優化軟件架構上。
三者雖然并沒有絕對意義上的優先級順序,但是一般而言,B 端產品時優先考慮業務需求,其次關注用戶體驗,滿足用戶需求,最后才是考慮產品需求。了解了這一點,我們對功能背后的需求進行分類后,就可以從更高的視角來分析功能的設計邏輯,而不僅僅是停留在好不好看的層次上對功能進行分析。
在《交互設計原理》中是指:對于交互式數字產品、環境、系統和服務的設計,定義人造物的行為方式,即人工制品在特定場景下的反應。
在《交互設計精髓4》定義為:設計交互式數字產品、環境、系統和服務的設計,聚焦于如何設計行為。
而在《超越人機交互》中則是指:設計交互式產品來支持人們在日常工作生活中交流和交互的方式,創造用戶體驗以增強人們工作、生活以及通信的方式,聚焦在實踐上,即怎樣設計用戶體驗。
交互設計即行為設計,關注于如何設計系統如何幫助用戶更高效愉快地達成目標。
僅僅知道是什么遠遠不夠,我們更要知道如何去分析一個產品的交互設計好壞。在這里,我提供兩個思路供大家參考:
上文提到,交互設計的對象是行為,而這里的「行為」可以拆分為 3 個部分:導航,輸入和展示。
設計要點:
例如:掘金的頂部導航,既體現出來了導航本身與包含內容的關系(導航的標簽是當前內容的概括),又體現出來了內容與當前頁面的關系(當前頁面是首頁下的一個子頁面)。
這里的輸入不僅僅指我們日常中的輸入,而是一個廣義的概念,將所有用戶向系統提供信息的方式統稱為輸入。輸入可以通過多種方式完成,包括輸入命令、按下按鈕、快捷鍵、甚至打手勢、語音等方式。
設計要點:
設計要點:
尼爾森十大原則由畢業于哥本哈根的人機交互學博士 Jakob Nielsen 發表,他提出十大可用性原則,用來評價用戶體驗的好壞,我們也可以以此為依據來分析一個產品的交互設計好壞。具體的內容網上有很多資料,筆者就不再贅述。
視覺設計即 UI 設計,負責產品的圖形、圖標、色彩、視覺風格等,從視覺層面把控產品界面設計,決定營造出什么樣的視覺體驗。
視覺設計的分析內容可以拆分為形、色、字、構、質、動。在分析時,如果是網頁端,可以借助瀏覽器的開發者模式或者谷歌瀏覽器的插件「VisBug」來詳細查看各個維度屬性細節。
圖標的圓角,卡片的圓角,icon 的風格與統一度(包括:視覺大小,線段粗細,端點類型、拐點類型等)
例如,同樣是頭像卡片,QQ采用了圓形來體現靈動輕盈的風格,而主打熟人社交的微信則采用了小圓角。
色彩分析包括用色規范、色彩搭配、層級等。在 B 端產品中,色彩在使用時更多的是基于信息傳遞、操作引導和交互反饋等目的。
字體的屬性有字號、行高、字體、字重等。通過合適字號和字重可以對界面元素劃分視覺層級,幫助用戶識別。而在一些特殊的場景下,可以運用特殊字體來提高識別度和增加頁面美觀度。
例如:支付寶使用了常用的 Din pro 作為其數字字體,其他 APP 廠商也分別使用了特殊的數字字體。
此處的構是指頁面結構,分為層級和間距兩大部分。合適的層級和間距可以幫助用戶理解頁面,并給予界面呼吸感和通透感。
質感與風格、界面風格,投影數值,扁平還是擬物。
比如說相比普通的單層陰影, Ant Design 采用了三層陰影的表達方式,讓陰影更柔和,更符合真實狀態。具體可查看 https://ant.design/docs/spec/shadow-cn
最近幾年,越來越多的公司和團隊已經意識到動效在產品用戶體驗中的重要性,動效設計已經成為產品設計語言的重要構成之一。
動效設計并不只是為了修飾,使用動效不僅可以更清晰地體現內容元素之間的邏輯和層級關系,還可以提供當前的狀態反饋,加強用戶對操作行為的感知,給用戶以可控的感覺。
除了上述內容之外,我們在分析一個產品時還可以做以下兩件事:
在被問到「你覺得這款產品的用戶體驗好嗎?」時,我想大部分設計師同學即使做完了產品分析,也很難回答這個問題。那么,我們該如何做才可以較為準確地回答這一問題呢?
基于這個問題,我們從用戶體驗的定義出發,ISO 對用戶體驗的定義有著如下解釋:
用戶體驗,即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
從定義可以看出,用戶體驗不僅是主觀的,而且范疇非常廣,所以在描述時,我們不能僅僅用好/不好來概括。要解決這個問題,要點在于建立一個清晰合適的標準來量化用戶體驗,體驗自查就是在做這樣一件事 —— 度量體驗。
通過做體驗自查,可以達成以下效果:
本質上,設計走查表通常是設計師在完成設計稿后,用于快速遍歷方案、修正遺漏或不周的工具。在產品分析中,我們使用這個工具也可以達成體驗自查的目標。通常,我們是需要根據產品建立一套適合自己的交互設計自查表的。如果暫時沒有,也可以暫時使用網上成熟的自查表來進行。
問題位置:
即體驗問題發生的位置。
類別:
不同自查表對問題的分類不同,例如用戶體驗五要素、可用性原則等。
重要程度:
如果采用正向思考,很容易陷入“都很重要”的困境,所以這里一般采用反向分析法,也就是如果不解決這個體驗問題,會造成多大的影響。我這里將重要程度分成了三個等級,分別是:
發生頻率:
同樣是三個等級,需要注意的是,這里不是以時間頻率來定義的,而是以「每經歷 n 次業務節點就會出現這一問題」的方式來定義的,如果不好量化,也可以使用每次,經常,偶爾這樣的詞來代替。
嚴重程度:
嚴重程度 = 重要程度 * 發生頻率
這里要注意的是,我們作為設計師,提出嚴重程度的判斷僅僅是作為優先級參考,但是真正的優先級和排期還是需要產品經理來做。
問題描述:
即對體驗問題的詳細描述。
首先,對問題進行重新審查和校驗,去掉非體驗問題、重復問題、補充不完整的問題描述等,然后整理到一起,這就是整個產品存在的大大小小、各種各樣的問題了。
然后,我們通過圖表對數據進行二次加工,一般采用雷達圖或柱狀圖。
示例 - 雷達圖的使用方式
嚴格意義上說,這并不是標準的雷達圖,只是使用了雷達圖的圖表背景。
外圈:上述表格中的「分類」
數值:上述表格中的「重要程度」
為每個模塊/流程各制作一張表,然后將每個問題都以點的形式置于圖中,哪個分類問題最多,哪個模塊/流程問題最多?哪些問題較為嚴重亟待解決?一目了然。
設計的本質是為了更好的解決問題,了解業務是解決問題的基礎,也是溝通順暢的利器。但是想要成為一個業務專家,沒有長時間的沉淀上是不太可能的,但是公司一般不會給很長的時間去學習業務,那我們該如何在短期內快速掌握業務知識呢?
在理解業務時遇到的最大挑戰就是那些晦澀難懂的特殊名詞,如 json 文件,API 等開發中特定的術語。
針對這個問題,在產品分析的過程中,我們可以同步建立一個專業名詞庫,來記錄這些特殊名詞,并將這些概念用自己的語言進行描述。這樣,在了解產品的同時也對業務有了一定程度的了解。
對設計師而言,相比 C 端的各種炫酷效果,B 端設計很難做的出彩,設計的價值更多是隱形的價值,基本不存在會有人因為你把一個按鈕做得好看夸你。從這個角度來說,確實成就感比較低。
但是,通過自己的設計讓幫助用戶更有效率地完成工作,這何嘗不會帶來滿滿的成就感?B 端產品一般是用戶不得不使用的產品,作為設計師的我們更應該對自己所設計的產品有著敬畏之心。
最后,給大家分享我很喜歡的一段話,與大家共勉。
本次的分享到這里就結束了,希望可以對大家有幫助。由于文章字數較多,筆者幾經修改,仍不免有疏漏錯誤之處,如發現錯誤,請讀者于評論區或私信指出,不勝感激。
在快節奏的洪流中,保持設計的初心,做有靈魂的設計,我們下篇再見~
作者:靳凱杰ah
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
刷刷手機看看今天又發生了什么熱點大事,已經成為現代人茶余飯后消遣時間的主要方式,而搜索熱點區別于其他社區類產品,最大的優勢是能夠把大家關注的事件始末及相關知識服務快速聚合起來,幫助用戶更全面的掌握信息。設計師作為連接用戶與信息之間的紐帶,在項目實踐中也進行了系列的設計探索,除助力平臺高效聚合呈現信息外,并以更豐富的設計層次詮釋熱點,幫助用戶更便捷的獲取所需。
我們先要去了解用戶是如何消費熱點內容的,基于用戶情景認知鏈路分析用戶在事件消費的鏈路,可以分為三個重要節點:1.熱點環境的感知;2.熱點事件的理解;3.事件觀點的產生。
結合用戶的消費路徑,我們將設計邏輯框架拆分為三個層級:
1.氛圍背景層:分層呈現熱度氛圍,輔助用戶感知熱點環境;
2.信息內容層:精細化拼裝管理,幫助用戶理解熱點事件;
3.功能互動層:輕互動玩法設計,激發用戶參與抒發事件觀點。
從氛圍表現層面,助力用戶更快速的辨別事件的熱度及重要程度。設計師結合搜索熱點使用場景以及業務時效性配置訴求,歸類了兩種設計表現層次:1.日常熱度氛圍 2. 大事件熱度氛圍
1)第一個層次:日常熱度氛圍
主要應用于熱點新聞場景,時效性要求高,同時事件熱度也會在:“發酵--爆發--消退” 間實時變化,設計根據熱度“強弱”程度需求,劃分兩檔視覺展現階梯,以自動化的方式展現,滿足熱度的實時變化需求,輔助用戶感知當前事件熱度?!暗蜔岱諊比鯓撕炘O計用以展現上升/今日熱點,“高熱氛圍”色彩背景通頂效果+上榜標簽用以展現上榜熱點。
如,“馬斯克收購推特”,搜索熱度持續上升,以第一階梯-標簽方式展示低熱氛圍;在 “馬斯克收購推特” 的事件熱度不斷增長,成為熱榜事件后,以第二階梯 - 高熱氛圍自動匹配 ,通過背景及榜單標簽的呈現,明確告知用戶當前事件的火熱程度。
2)第二個層次:大事件熱度氛圍
主要應用于熱點大事件或運營活動場景,個性化展現要求高,同時事件關注度及重要程度也不同,設計根據事件的關注度及重要程度劃分為兩檔階梯,以人工配置的方式展現,超強的運營氛圍,可以讓用戶充分感知當前事件的重要程度,“A級氛圍”頭部疊加場景元素設計用以展現大事件,“S級氛圍”整頁沉浸式視覺設計用以展現重大事件。
如,冬奧會,重大事件,選用第二階梯 S級氛圍,打造超強的運營大事件會場認知。
近幾年我們不斷的經歷各類突發大事件,如:疫情/暴雨/名人逝世等等,每次突然發生的事件都讓設計師措手不及,匆忙產出運營氛圍設計方案緊急上線,保時效就很難保障質量,因此我們在想能不能總結事件類型提前儲備設計,以備不時之需。
不同突發事件會牽動網友不同的情感情緒,比如河南暴雨,我們為受難同胞擔心,為救助工作加油,為逝者哀悼;火箭發射成功,我們驕傲喝彩;名人結婚,我們送上溫馨的祝福。不同事件帶來不同的情感情緒,也要求設計師要用準確的視覺語言表達。
因此我們在前置設計時也充分考慮了事件情感因素,通過對近一年突發大事件的歸類梳理,并推導不同細分場景下的用戶情緒,通過情緒分類的方式,總結兩種視覺設計表達形式:1.實景圖合成效果滿足嚴肅/莊重/權威場景情感需求;2.手繪效果滿足積極/歡快/慶祝場景的情感需求。結合以上思路我們共儲備6大類20個子分類場景的前置氛圍+金剛位等運營物料設計,保障突發熱點運營設計質效。
截至22年Q1,前置設計已在38個熱點場景應用:
為滿足用戶不同事件場景下的信息需求,設計結合百度搜索:主要內容區(主要需求滿足)+ 延展內容區(延展需求滿足)的綜合聚合能力,通過組件分區布局+精細化規則管理,為熱點場景內容的高效拼裝打好體驗基礎。
1)主要內容區
主要內容區,能夠幫助用戶快速了解事件的主題、時間及主要內容,結合熱點事件長期的需求沉淀,設計將主要內容區又細分為主題區域及內容區域。主題區域可承載拼裝事件主題、事件倒計時、會場分發導航等主題類組件;內容區域可承載拼裝圖文/視頻/直播等事件主體內容分發組件。通過不同區域內組件拼裝規則的制定,業務可以快速選擇所需組件進行頁面組織拼裝,達成分場景個性化滿足用戶主需求的目標。
如:元宵晚會,熱點主要內容區 以“ 晚會直播時間倒計時+ 各衛視晚會分會場導航+圖文內容 ” 組件支撐起重大晚會預熱期的事件主需求滿足。
因為有設計拼裝規則,不同大事件活動,各場景內容可個性化滿足需求,交互布局設計上又可兼顧橫向一致性。
2)延展內容區
延展內容區,能夠幫助用戶了解事件相關知識信息或提供事件相關服務。業務可根據事件場景需求,選擇多個延展內容模板與主要內容區進行拼裝,搭建完整頁面以呈現不同熱點事件內容。
如:俄烏戰爭-戰事場景,脈絡卡幫助用戶快速了解事件進展 ;冬奧會-賽事場景,數據卡幫助可視化呈現賽事進展;博鰲亞洲論壇-會議場景,百科卡幫助用戶科普相關名詞知識。
通過氛圍打造和內容組織,已經達成用戶需求滿足的目標,但到此截止,搜索結果的體驗還是理智疏遠單向的,搜索場景與用戶、用戶與用戶間也無法產生對當前熱點的討論與態度表達。因此設計師對用戶的互動行為認知習慣進行分析,并采取具體的設計策略逐步引導用戶參與互動。
1)互動喚醒 - 吸引圍觀增強互動意愿
優化前的熱搜結果頁,用戶的討論內容都是隱藏在資訊落地頁評論區內,需要點擊進內容落地頁內才能參與“圍觀”或“討論”,除互動氛圍已脫離當前場景外,也削弱了用戶對此事件表態的參與積極性。
通過彈幕滾動+輸入框組件組合外顯的交互設計方式,將用戶討論外露,不僅豐富熱點事件搜索場景的內容維度,同時基于從眾心理,進一步刺激用戶的參與欲望。彈幕結合事件類型配色來更好貼合熱點事件整體環境氛圍。
2)情緒抒發-輕互動玩法降低互動門檻
而投票表態+彈幕輕互動組合效果設計,能進一步降低用戶交互心理門檻,讓用戶動一動手指就可以參與其中。在表態/投票抒發情感的同時也可以發彈幕聊聊對當前熱點事件的看法,使用戶互動情緒表達更充分。
3)驚喜反饋-強化視效打造記憶點
原有設計風格,無法在去世祭奠、頒發勛章等莊重嚴肅場景精準的表達視覺情感,無互動反饋狀態僅有互動前后狀態變化。
結合熱點場景積極外放情緒及莊重內斂情緒,視覺主要從形/質兩個維度進行優化升級,并增加互動反饋動效,同時運營可結合具體事件主題配置,綜合提升互動驚喜效果,打造產品記憶點。
視覺層:通過更立體的形態和更豐富的層次質感,更精準的表達情感
動效反饋層:以主圖形+輔助元素,通過符合場景氛圍的動態效果設計,更充分的表達情感
運營主題配置:在日常反饋基礎上,增加運營主題配置層級,為特定主題場景提供定制反饋效果
通過熱點環境感知分層呈現、內容組件合理布局拼裝滿足等設計手段,助力搜索平臺以更高效豐富的內容展現形態應對全年3萬+熱點大事件運營。會場拼裝呈現系統的應用場景也在不斷擴展,如營銷活動、品牌造節等。設計不會止步于此,我們將基于用戶需求不斷探索深耕,為用戶呈現更快速、準確、全面、有溫度的搜索熱點體驗。
作者:百度MEUX
轉載請注明:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
“少即是多”是經常掛在嘴邊的話題,在設計過程中,設計師們都會想盡一切辦法去簡化交互流程、組件元素及各種設計屬性,讓用戶使用起來更簡單。當產品簡化到一定程度,就必須要面對其不可簡化的復雜性。
諾曼曾說過 “復雜是世界的一部分,但它不應該令人困惑 ”,如果復雜性是合理的,我們應該學會如何去管理復雜,考慮好復雜的問題在流向用戶后以何種方式處理,篩選控件就是用戶自行處理復雜信息的方式之一,只要是符合用戶行為做出的設計,將應有的復雜以篩選的形式呈現給用戶,讓其自行決定,用戶反而會樂意接受。
篩選控件的使用頻率非常高,本文根據筆者對各類篩選控件的拆解及自身經驗進行分總結,整理了在移動端中常用篩選控件的類型、使用場景以及設計思路,幫助大家在設計中更好的選擇適合自己產品的篩選控件。
一、現實生活中的篩選
二、篩選功能的重要性
三、常見的篩選類樣式
四、篩選的幾個維度
五、篩選功能設計準則
六、總結
在日常生活中,我們天天都在跟篩選打交道。設想一下,當你走進超市,在沒有任何分類指示的情況下,看到琳瑯滿目的商品是否會不知所措,答案是肯定的,且不論超市規模大小、商品的多少,相信沒有任何一個人愿意在不清楚的情況下花時間去找一個很可能不存在的商品,即便這點時間會很短。
道理還沒說完,大家都感覺自己很懂,可依然逃脫不了如今在各種形形色色的應用中找不到自己需要的功能而苦惱,那么這些應用又是誰設計的呢?答案就是「大多數人」。
換言之,如果我們能通過標識牌、平面圖指引(模糊查找),詢問服務員、記憶指引(精準查找),就容易很多,這些指引路徑就完全充當了篩選功能,至于通過什么方式,只能根據人們自身或現場條件自行選擇,能滿足自己的需求即可。在功能繁多、交互流程復雜的互聯網產品中也是如此。
在我們設計篩選控件之前,需要清楚了解什么是篩選,東施效顰不是什么明智之舉。篩選,即用戶根據自身需求、通過一個或多個特定條件,在已有的內容中快速找到滿足自己當前條件的信息,單獨呈現的同時、并將未滿足條件的信息暫時作隱藏處理,以便用戶完成自己的目標需求。
篩選也可以稱之為過濾器,是搜索框架的一部分。這里需要說明一點,篩選不同于搜索,它是系統結合用戶提出的條件,對內容進行規則性的查找,準確的說,用戶屬于被動,篩選出的結果在產品側「精準」、用戶側「模糊」;而搜索則是用戶通過明確的目標主動進行精準查找,要么直接找到自己想要的結果、要么對結果不滿意,搜索出的結果在產品側「模糊」、用戶側需要「精準」。說直接點就是,搜索直接查找出結果、篩選只是縮小查找范圍(并非絕對,也可以對搜索結果縮小范圍)。
在電商應用中,如果有目標的用戶更多使用的是搜索,那么沒有目標的用戶更多使用的則是系統推薦或商品分類,不管是哪種類型的用戶,前面雖然已經進行過一次范圍縮減,但下一步還是逃不掉要面對的海量商品,這時,不給用戶提供選擇上的便利,用戶很可能因瀏覽商品耗時過長、選擇性困難等原因扭頭就走,即便離轉化僅一步之遙,也無法避免用戶流失的問題。
增加篩選功能就能很好解決這個困局,用戶通過篩選、設置接近于目標需求的條件,縮短查找路徑,就能從海量的商品信息中快速找到符合條件的內容,大大降低了用戶的查找成本,節省了很多查找時間,用戶體驗得到很大程度的提升,由此可見,為什么要使用篩選,不言而喻。
1)系統定義篩選需求
方向性的篩選:用戶通過系統提供的多種類型進行頻道切換,還會存在多少子級,可定義為一級篩選。例如訂單列表(待支付/待發貨/待收貨/待評價),優惠券(未使用/已使用/已過期)等,用戶從已有的類型列表中選擇自己所需。
2)用戶自定義篩選需求
精細化篩選:當系統已提供方向性的篩選,用戶依然可從分類篩選出的結果中進一步細化。例如針對單個類型的商品列表自定義價格區間、發貨地、品牌...等,也可稱之為二級次篩選,相比一級篩選,其篩選的結果會更精細化,也更接近于用戶的真實需求。
(PS:系統定義篩選條件后,配合用戶自定義二次篩選條件以及排序功能,則更容易滿足用戶需求)
Tab式篩選條件大部分在操作前、操作中、操作后基本都會一直顯示,有橫向Tab和縱向Tab兩種,如新聞、視頻類型的應用大多使用橫向Tab,通過將不同的內容以大的方向、區塊進行分類,便于用戶隨時切換、篩選出不同的內容;縱向Tab更多則是在電商類應用中出現,且會存在多個子級,例如我們在京東購買「鼠標」,則需要在tab分類中依次找到「電腦辦公>外設產品>鼠標」進行篩選。
Tab類型主要以大的維度進行篩選,所篩選出的結果可能模糊且信息量極大,如果想要結果更加精準,則需配備其他類型的控件進行二次篩選。
操作中以蒙層的方式彈出,其他時候均為隱藏狀態。彈窗類型的篩選最大的優點是占用空間小,僅需一個入口,能在有限的彈出空間中從多個維度展示篩選條件,用戶選中或自定義對應的篩選項,即可快速篩選出自己想要的信息。
介于Tab式與彈窗式之間,篩選條件初始為隱藏狀態并提供一個入口。點擊后展開,期間不影響當前頁面的任何其他操作且一直處于展示狀態,需經過再次點擊才會將篩選條件隱藏。
基于自定義篩選條件過多,為滿足用戶個性化需求,點擊后會跳轉到新頁面操作多個條件進行篩選。相比前面提到的Tab、彈窗更為復雜,對篩選的要求較高。
高級篩選適合用在顆粒度很細的場景,為的是避開其他視覺元素的干擾,讓用戶更專注于當前頁面較為復雜的篩選條件,降低因受其他因素影響而出錯的情況。例如:在選擇汽車時,需要對服務、價格、級別、排量...等各種情況作出非常細致的選擇,這時用高級篩選就再合適不過。
篩選、排序組合方式算是商品列表中的標配了,尤其在空間資源有限的移動端設備中,能最大化的將多個控制條件一次性展示給用戶,在篩選出結果后再使用排序功能,便于更快找到想要的商品。例如美團、餓了么將篩選與排序控件形成組合,極大的提高了用戶篩選的效率。
單維度的篩選不管是設計還是操作都相對簡單,無需操作確定/下一步按鈕,觸發篩選條件后會就會更新信息列表,大家最熟悉的訂單系統(待支付、待發貨、待收貨...)即是單維度篩選。
另外,單維度具備短、明、快的特點,為方便用戶識別,單個標簽一般不超過5個文字,且語義明確,用戶不用任何思考就能快速理解。
當產品中的屬性過多,使用單維度篩選不僅會降低篩選結果的精準度,還可能會導致用戶因反復/重復無用的操作而產生挫敗感,已無法滿足用戶的需求。這時,需采用多維度篩選幫助用戶縮小查找范圍,讓其快速找到符合自己需求的內容。
多維度篩選條件一般以按鈕(單選/多選)、輸入框為主,有些還會以滑塊來控制數據范圍。設定好篩選條件需通過重置、確認操作按鈕,用來清空篩選條件或進入下一步。在移動端,因屏幕空間有限,一級篩選數量最好不要超過9個,如果太多,建議進行整合或并入二級篩選。
在多級篩選控件中,可以把當前篩選條件的上一級看成是篩選分類菜單,每個等級中可包含一個或多個單維度/多維度的篩選條件,移動端最多不超過3個等級。
從表面看,多級篩選與多維度篩選其本質是一樣的,但多級篩選會存在下一級或再下一級,而多維度會將所有篩選條件平鋪在空間中。當單維度、多維度篩選還是無法滿足用戶需求,多等級就能作為最好的延伸。
在設計篩選之前,需要思考用戶為什么要使用篩選、在什么樣的場景下使用篩選、以及如何滿足用戶的心理預期等,有了清晰的用戶需求,設計出來的篩選才能更好的幫助用戶滿足其需求。
以「餓了么」用戶點餐為例,使用點餐服務的用戶類型雖然很多,不過主力還是來自于辦公室白領、宅男/女這兩大用戶群體,有目標的用戶會從搜索、收藏、訂單記錄等入口直接去購買,但絕大多數用戶因長期點外賣的原因,“吃什么”就成了最大的問題,這時如果用戶還要“吃”,就必須得使用篩選功能,從Tab分類(模糊)到彈窗式篩選(精準)再配合排序功能滿足自己的點餐需求,得出結論:
1)一群不知道“吃什么”的白領、宅男/女用戶;
2)需要使用篩選功能解決自己“吃什么”的問題;
3)問題很快得到解決后,對結果及使用體驗非常滿意。
上面的案例可以看出,用戶想要在海量的信息中找到自身所需,從表面上看,最直接、真實的需求就是找到滿意的商品去下單。站在產品的角度并非如此,最應該解決的應該是效率的問題,這才是篩選的終極目標,不管用戶花多長時間,筆者相信都能找到想要的,但所花費的時間成本越少,滿意度就會越高,其產品的可信度、使用粘性、用戶體驗也隨之提升。
篩選并非千篇一律,不要一上場就來一波大眾化的篩選條件,很多APP首頁設計就是最好的例子,什么都不考慮,直接導航欄+輪播圖+金剛區+內容推薦...傳統的一套流程走下來,結果可想而知。
設計篩選功能時,不同類型的產品需要根據其產品定位、用戶目標以及使用場景來定義篩選條件,用戶需求是用來設定篩選條件范圍的決定因素。例如:購物類產品需要結合商品的銷量、評價、價格及知名度等,而新聞類產品側重于用戶偏好、點贊量、熱度值來提供篩選,方便用戶快速找到感興趣的內容。
在滿足上述兩個條件后也不能將篩選項一股腦的挨個排出來,即便是在同一個頁面內,也需要結合當前內容的屬性對篩選條件進行優先級排序,將用戶高頻使用的條件按先后順序依次排列,不重要的也可將其隱藏于某個入口。
以淘寶為例,在「手機」商品列表,篩選條件中首先看到的是品牌,其次是內存、容量...,我相信很少人不在乎手機品牌吧;而在「鋼釘」列表中,依次是價格排序、銷量...,品牌條件隱藏在了高級篩選中,試問,如果是你購買釘子這種實用性的商品,是在乎價格、還是品牌呢?
篩選功能旨在滿足用戶查找需求,通過縮短用戶選擇商品的范圍,節約查找時間,快速將符合條件的信息呈現出來,并讓用戶在這一過程中產生愉悅的使用體驗,以發揮產品的最大價值,從而增強用戶的使用粘性。
至于在設計中該使用何種篩選控件則取決于用戶需求和使用場景,設定符合需求的篩選維度及條件,且根據內容屬性做靈活變動即可,切記篩選的核心需求是通過簡單易用的方式來幫助用戶提高操作效率。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀90年代中期,由用戶體驗設計師 唐納德·諾曼(Donald Norman)所提出和推廣。
定義:用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。
可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度,即用戶能否用產品完成他的任務,效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產品質量,是產品用戶體驗的核心,不好的可用性會導致用戶放棄使用產品。
可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。
指的是用戶學習如何與產品進行交互,以實現目標所花費的時間和精力,即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。
用戶在使用產品一段時間后,能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關內容。
我們常說互聯網是有記憶的,好的產品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進行記憶是一個比較大的負擔,如果在一些環節通過系統能幫用戶記錄,會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。
用戶在使用產品時,發生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復的能力。如常見的注冊登錄,當用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:"請輸入正確的郵箱" 用戶可能會疑惑,錯在哪里。
滿意度指的是用戶與設計互動產生的愉悅程度,可以是用戶使用產品時流暢的交互和優秀的視覺設計,也可以是用戶在產品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)
產品能否提供用戶在完成任務時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。
在滿足實用性的基礎上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。
用戶能夠預測到下一步操作或者整個流程的交互,將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。
可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。
物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。
當信息或者列表過多時區分狀態的展示,將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來,會極大地破壞易用性,因為人們將不得不進入一個個郵件詳情頁當中進行確認,才能獲取到原本由徽標提供的狀態信息,這樣的互動非常低效且乏味。
當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當前進行到哪一步,接下來還有多少步驟。
強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標等)的設計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進行交互行為(點擊、長按、滑動 等)
給用戶及時、恰當的反饋,是體驗設計中非常重要的一項原則;對每個用戶的操作都應該有恰當的系統反饋(包含視覺、聽覺、觸覺)。
明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。
當用戶產生某個動作時,給予相對應的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認的外觀與點擊后的外觀發生變化,結合現實世界的開關去思考(按下 開燈)動作與反饋是連接的,即時的。
??硕?,是1951年由威廉·埃德蒙·??耸紫忍岢龅?,認為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多,做出選擇所花的時間就越多,當面臨選擇的數量增加,做出決定的時間也會跟著增加。
如京東篩選,在搜索結果頁會將篩選條件收起,因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。
費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。
T:代表完成移動所需的平均時間
A:代表光標開始/停止時間
B:代表光標移動速度
D:代表從起點到目標中心的距離
W:代表目標的尺寸
簡單來說就是指:隨著目標的距離增加,移動到目標的時間更長,并且隨著目標的尺寸減小,選擇目標的時間也會增加。
所以在界面設計當中會遵循越重要的功能,占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。
屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進行產品設計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。
神奇數字7±2法則是1956年由 喬治·米勒 所提出的,根據喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。
由于人類的大腦處理信息的能力有限,大腦會將復雜信息劃分成 塊 和小的單元。如:京東和每日優鮮的分類處理。
人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。
復雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認為每一個產品設計的過程中,都有其固有的復雜性,存在著一個臨界點,超過了這個點產品設計的過程就不能再簡化了,你只能將固有的復雜性從一個地方轉移到另外一個地方。
在產品設計中,會盡量的簡化界面。當功能過多時進行一個整合的處理,跳轉或者滑動操作。如查看更多或者常見的漢堡導航。
新鄉重夫認為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預防產品的缺陷。
防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;比如常見的信息輸入狀態,未輸入置灰不可點,輸入變為可點擊狀態。
微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現在的拍一拍是可以撤銷的,在客戶端鼠標懸浮上就可以進行撤回,移動端長按出現撤回彈窗,兩分鐘內有效。
微信朋友圈動態:點擊返回圖標會出現的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當中有很多友好的體驗細節??梢远喽嗳ジ惺堋?
奧卡姆剃刀 定律 :它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”
不必要的元素會降低設計的效率,不管是實體、視覺或者認知上,多余的設計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內容的圖標入口。
讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進入其他的tab,在上面都會懸浮播放/暫停的區域。都能夠隨時操作。
就是產品的易用性,如果年紀大點的人,也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內,并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。
頁面的使用率,當你想要在一屏新增很多內容時,頁面的布局就會變得擁擠和區域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等??淇藶g覽器首頁強化了搜索功能 和幾個整合內容的圖標入口;uc瀏覽器首頁內容過多,當用戶想要使用搜索功能時很容易被其他內容干擾。
前面說到的??硕烧f到,當選擇的數量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示,馬蜂窩根據產品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。
最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是:藝術拋出問題,而設計解決問題。
我們設想一個場景,當你在藝術展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術家在作畫時的心情,處境,為什么要這么去畫?想表達怎么樣的情感?
然后我們再設想一個場景,同樣在藝術展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
認知負荷是完成一項任務所需的精神努力總量。您可以將其視為用戶與產品交互所需的處理能力。如果需要處理的信息超出了用戶的處理能力,那么認知負荷就太高了。
造成用戶認知負荷的的原因大多都是,產品在交互和視覺上過于復雜,設計的統一性不夠,導致用戶在使用時不斷進行思考無法形成習慣
例如移動端中的空狀態,目的是為了引導用戶完成任務,在設計時無論是文案展示與視覺表現都應簡單明了、層次分明、視覺統一
用戶獲得的初始信息會影響后續的判斷,用戶對某件事做出判斷時,會不自覺的將開始看到的信息作為衡量標準。
在日常生活中錨點效應非常常見,例如平常不帶帽子,偶爾帶帽子出門的你,走在大街上會發現挺多人都有帶帽子,因為心理活動是把帶帽子這件事作為起始衡量,而你刻意的在尋找與帽子產生共鳴的事
在產品設計中最典型的就是會員體系,例如某視頻平臺的會員價格默認選中的那一欄會比其他的價格低,那么用戶在使用時心理會默認這是會員的價格,相對應其他更高的價格只是作為衡量這個最低價格而存在
又稱對比效應,指人們對兩個不相上下的選項進行選擇時,因為第三個新選項(誘餌)的加入,會使某個舊選項顯得更有吸引力,通過對比誘導人購買商家想讓他購買的商品。
有一位著名的行為經濟學家他叫丹·艾瑞里教授,他曾經做過一本《經濟學人》雜志的定價策略,這里不細講感興趣的可以搜一下。誘餌效應運用最多的是在超市場景,我們經??吹匠械呢浖苌蠒锌雌饋砗軐嵒莸奈锲吩冢缫淮菝婵赡苁?元,而旁邊還有3包泡面一起出售可能也就12元,然后開心的拿走了,這就是誘餌效應,那一袋5元的就是誘餌,商家的目的就是為了讓你買走12元的
而在線上產品策略中運用最多的則是電商場景,如下圖中的圖書商品,單價610元,定價980元,三件單價488元,這里的單價和定價都是誘餌,目的是為了讓用戶同時購買三件商品,而用戶內心是欣然接受因為更劃算
在檢查所有可能的結果時,我們傾向于關注一些看起來合理且熟悉的事物,從而忽略了其他結果。
13年9月twitter公司宣布IPO,當時11月份才開始交易,但是在這兩個月時間里有一家名為twweeter的公司三天內漲了13倍,只是在名字上與推特公司極為相似,但實際業務毫無關系,機構就是利用用戶的注意偏差讓不了解實際情況的投資者只看到相關性,而另一面的不相關的結果用戶自然的忽視掉
在產品設計的客服助手中,就屬于注意偏差,我們習慣的認為向客服回復人工等關鍵字時,會自動切換人工客服,而產品則會設置一些虛擬的智能客服來節省成本,而用戶在這個過程中則忽略了細節,誤以為智能客服是人工客服
前蘇聯前蘇聯心理學家菜斯托夫提出特殊事物才易被人牢記。也就是說,有個性的人、與眾不同設計得商品、不尋常的事情,都會讓人留下更深的印象。
生活中我們很難記住某個點或某件事,但是當這件事足夠突出擁有獨特的個性我們便會深深印在腦海里,比如一串字符ezol4tpmb,我們最容易記住的是4,因為他是唯一的數字,在比如說讓你去記憶國內某些城市的特點,如西安、開封、浙江我們想到的就是秦皇陵、包青天、西湖等著名具有特征的地點,因為這些事物比較特殊更容易被記住
在品牌設計中菜斯托夫效應運用的比較廣泛,如何通過視覺的表現讓用戶對產品更加的印象深刻,對此就衍生出產品IP、品牌符號這種具有特殊意義的標識便于加強產品印象
任意一點移動到目標點的時間與該目標點的距離和大小有關,距離越遠時間越長,目標越大時間越短,公式:
T = a + b log2(D/W+1)
在交互設計中經常用到此定律,無論是正向還是逆向此定律都能夠很好的運用到交互中,如mac系統上的關閉按鈕,始終在左上角并且很小,我們的鼠標在右側,移動到左側上角時間會隨之變長,因此這一交互結構就避免了用戶誤操作關閉軟件
再例如移動端中會把重要的按鈕操作放置在屏幕右下或者居下,因為大多數人是右手使用手機,因此在使用時右手拇指距離點擊區域會更近
幸存者偏差是指把一些事的不同角度的人員篩選出來,篩選出一部分人進行采訪從而制造輿論,觀察者只能看到事物的一面,而另一面則被忽略,也被稱為以偏概全
某次春節記者采訪到一些在火車上的群眾,聊一些購票的過程以及買到票的心理感受,最后向公眾公布出今年回家的票大家都買到了,但這個過程中卻忽略了那些不在車上或者沒買到票的人們,因此就以偏概全的傳輸單方面信息,這些被采訪到的人們就是幸存者
在做產品時經常會聽到用戶畫像這個詞,用戶畫像就是利用幸存者偏差而把廣大的用戶數據通過典例呈現,當然這個幸存者的樣本必須是壓倒性的龐大,否則就掉入幸存者偏差的陷阱
彼此靠近或接近的對象往往會組合在一起,相近的元素可以建立關系,人們會不自然的把相近的元素看作一個整體。
在UI設計中,經常會用到鄰近法則進行設計,如一些組件、卡片的建立,由不同的元素組成變成一個整體,其次鄰近法則能夠有效的用戶層級的劃分,如下圖中的一些卡片、icon進行規律的排布最后組成一個整體,與上下模塊的層級有效的區分
特斯勒定律又稱復雜性守恒定律,他指出對于任何系統都存在一定的復雜度并且是無法避免的,問題是誰來處理它。
在任何產品設計中無論是功能還是流程都存在一定的復雜度,依據特斯勒定律有些復雜度是無法避免的,那么需要我們在設計中去解決這些問題,保證在用戶的角度來看它是合理的簡單的
像我們常見的話題功能,輸入#自動引導出關鍵詞供用戶填寫省去用戶輸入時間,再例如b站的一鍵三連,長按點贊的同時會把收藏、打賞功能一并完成;結構層面也會用到此定律如產品中的設置頁面,按照不同的維度進行區分如系統維度、反饋維度、功能維度幫助用戶更快的完成操作
它是由意大利經濟學家帕累托提出,它指出對于許多事件,大約80%的影響來自20%的原因
在設計中我們會發現一個產品頁面有幾十上百個,對于用戶而言能夠提供價值的可能也就那么幾個功能頁面,這幾個頁面可能占總產品的20%左右,那么我們在做優化的時候則需要去考慮如果把20%做好把它的價值放大
再往細了說,例如打車軟件在這個頁面中能夠為用戶提供核心價值的區域則是地圖區域和選擇目的地區域,那么在做優化體驗時應當著重關注此區域,而頁面中剩下的區域則受上面20%的影響
社會證明是用戶用來確定行為方式的便捷捷徑,當他們不確定目標時,他們最有可能認為并接受他人的行為是正確的,人數越多,行動似乎越合理。
最近抖音在評論區新增了一個踩一下與點贊進行互補,但是奇怪的是我們進行踩一下時并不會展示具體數量,試想一下當點贊的數量大于踩一下的時候,我們有時就會被影響認為這條評論值得點贊
再例如購物中的評論排序,像京東把好評優先展示在前面,當好評的數量大于其他維度時就會影響用戶判斷,用戶會把數量多的好評當作參考依據認定這個商品符合自己的需求
指用戶知道的內容與他們想要或需要知道的內容之間的空間,這個空間叫做差距,差距會導致痛苦,要消除痛苦,用戶需要填補知識差距。
例如在做產品設計中都會涉及到登錄注冊流程,那么對于有些產品則需要在登錄注冊階段大量收集用戶信息完成更好的推薦策略,但對于用戶而言用戶的認知是固有的流程,如填完手機號就收到驗證碼,最后完成注冊進入首頁,如果說中間的過程需要收集用戶信息,則需要對應的解決方案來彌補用戶的心理差距
即可App在收集用戶信息的階段使用了偏趣味性的一些設計表現,在用戶的這個空間差里面來緩解用戶的情緒,激起用戶填寫欲望
心智模型是對某人關于事物在現實世界中如何運作的思考過程的解釋,它是對周圍世界的表示,可能準確或不準確,用戶認為他們對您的產品的了解會改變他們使用產品的方式。
心智模型其實就是我們對未來發展的預測,內心對要發生的事情進行預判,然后采取行動,例如我們要購物想到的就是淘寶、京東,想到吃飯可能就是美團、餓了么,這些產品就打入了用戶的心智。往細了說心智模型是一個廣泛的概念,它還包括行為模型、實現模型、表現模型
像我們常用的聊天軟件,在聊天過程中撤回消息,就會有個重新編輯功能,這就是滿足用戶的心智模型,預判用戶的操作例如微信、釘釘、飛書
擬態是在頁面中模仿現實世界物品,通過它的外觀和交互模仿現實,擬物化適合用來讓用戶適應新的頁面和技術形態。
我們在做頁面時都會涉及到圖標的繪制,那么那些具有業務屬性的圖標則需要通過擬物的方式進行呈現,對于用戶能夠降低理解成本,如經典的紅包、自如的金剛區等
與群體相比,用戶對個人的關注不成比例,與大型抽象群體相比,人們更愿意同情一個單一的、可識別的人。
這個如果用逆向思維來想的話,類似于我們說的“對抗性人格”在大多數人都對一件事或事物看法一致時,出現一個不一樣的聲音,試想一下我們在刷短視頻時評論區總有那么些人與大多數人的看法不太一致,這就是奇點效應
在設計中體現最多的是等級體系和勛章體系,一方面為用戶的攀比心理,另一方面則是奇點效應,這類用戶的想法就是為什么要一樣,為什么不可以獨樹一幟。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到輪播首先可能想到的是廣告,我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner,不管在移動端還是網頁上通常點擊數據都是非常差的,本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播,我們應該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性,預計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結
用戶是否對輪播有感知,這個則需要根據不同的場景進行判斷,包括每個產品中的每個輪播對用戶用戶的定位也不相同,常見的應用場景品牌曝光、活動營銷、產品展示,每個場景下相關的數據也不相同。
促銷輪播banner
品牌推廣輪播banner
產品介紹輪播banner
同時還有個關鍵因素,輪播的占比,這里以pc端為例若是產品是以品牌效應吸引用戶的,大多輪播是以大的屏幕占比為主通常會占首屏的50%,如果是以營銷、內容為主的產品,輪播通常以16:9、7:4的常規比例進行展示。
用戶在使用產品時會默認忽略輪播區域,一般輪播都會有自動輪換機制,一定時間后自動輪放下一張banner,那么每當頁面上進行輪播時便會吸引用戶進行關注,效果上會有一定的提升,所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內容傳播希望用戶通過banner了解內容,那么則要避免放在最后一位置,對于用戶而言最后一張輪播路徑過于長,并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試,隨著頁數的增加用戶的點擊逐步下降。
那么如果想讓產品中的輪播更具有效果,則需要根據不同的場景設定策略達到目的。
不管在移動端還是手機端,輪播都有各種交互形式和尺寸,以pc為例在交互上會多樣化一些,常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網站,它則是通過鼠標滾輪進行切換輪播banner,并且banner的占比也是鋪滿首屏,這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點,同時也符合用戶目標。
在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換,并且占比也是鋪滿首屏,在醫美領域用戶更關注美感,而輪播形態也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統一,大多都是自動播放+手指滑動進行切換。
在網頁中輪播都會有當前的定位點,許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標,不用一張一張切換,但是在有些產品中會忽略這一點,設計中會做的非常小導致用戶在點擊上可用性不太友好,如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網站去除進度定位的方式,通過縮略圖預覽來告知用戶下一個banner的內容,空白區域也可以添加縮略圖引導介紹等關鍵信息,幫助用戶提前預知在體驗上相對較好。
以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計,能夠幫助用戶更加全局的了解banner內容
定位主要是用來指示當前輪播的進度,像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。
以下網站的設計中則把定位與進度相結合,進度條展示該banner預計多久會切換下一張,對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網站,不管是pc還是移動端都在輪播底部添加了水平條,告知用戶當前位置
隨著市場上產品同質化嚴重,產品的競爭力也更依賴體驗,在下圖中的數據可視化的網站上,在進度條上就利用了產品的特性以餅狀圖的形式進行展示。
在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性,但是需要注意一個點,在輪播中不只有自動播放,還需要考慮用戶手動切換,因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期,此時則會使用手動切換,除去可點擊的進度點,還需要上一張和下一張的入口切換。
在此基礎上需要注意,在處于最后一張banner時,下一張切換還能不能點擊,第一張時上一張切換還能不能切換,這個取決于產品特性和輪播張數,如果輪播張數過小的話則需要進行循環播放,如果過多的頁數則第一步和最后一步不可點擊。
上一張和下一張的距離遠近取決于banner的大小,如果輪播banner占比較大時則需要考慮用戶的操作時長,距離越短時間越快,為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出,便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因為小區域banner用戶能夠更加全局的觀看,在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕,移動端更加依賴手勢交互。
當輪播banner過多時利用標簽進行分類,用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網站這種內容過多的產品
如下圖國外社交媒體網站則使用了標簽進行分類,此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中,顯示的內容越多,越能激發用戶進行點擊,像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示,當然不僅局限于這種形式,如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。
相對于縮放圖,圖標展示效果上也較好,空間占用更少,使用這種方式需要謹慎,對圖標的識別性要求較高,我印象中能夠使用的這種方法的網站是蘋果官網,讓產品抽象化展示。
在移動端也存在這種設計手法,但是基于分辨率原因移動端的縮略圖展示過少,最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告,對此可以使用個性化設計突破用戶心理障礙,使輪播banner更具備親和力。
如下圖中的數碼科技網站,利用產品與背景的結合營造出一種功能性的展示。
再例如下圖中蘋果官網入口,結合百度的定制化功能在大搜中進行個性化處理,把常規的banner輪播以功能卡片形式進行展示,同時卡片承載產品動畫引導用戶進行點擊。
蘋果官網進入后隨意點擊產品介紹頁后會發現,蘋果把輪播結合鼠標滾輪營造沉浸式觀看,每個屏效內都展示產品一個功能特點,打破傳統banner的展現形式。
自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級,如我們平常使用產品時會忽略banner廣告,我們會更加關注移動中的東西,特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試,測試結果得出5s-7s的輪播時間最佳,在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意,在自動播放的過程中如果用戶鼠標hover上去后,則需要判定播放暫定,避免用戶錯過感興趣的內容。
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹,在實際產品中輪播有很多可用性上的問題存在,我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶喜歡在網上收藏各種東西,把收藏到的東西占為己有,滿足自我的占有欲,每個用戶都為此而樂此不疲。
很多互聯網產品在用戶點擊收藏后,讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇,他們只想簡單的把自己喜歡的東西收藏下來。
選擇本身并不是一件很容易的事情,尤其是對于那些有選擇困難癥的人來說。實際上,我每次都是選默認那個。
這并不是一個好的用戶體驗。
當然也有一些做的很好的體驗,比如微信的收藏,收藏后會出現一個“收藏成功”的非模態反饋。
同時可以添加標簽,但這個并非強制,為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。
在收藏列表,微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等,最近使用位于第一位。
也就是說并不需要用戶去創建自定義分類。
你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。
網站會根據你采集的圖片在極短的時間內,自動識別出圖片對應的收藏夾類型??梢灾苯硬杉綄奈募A。
然而經過測試,經常會出現誤差。因為圖片的分類其實很復雜的,屬于高度自定義,很顯然,智能識別并不是一個好的解決方案。
花瓣是一個設計師收集靈感的網站,該網站常見的用戶使用場景是,設計師在瀏覽素材時,會大量采集自己感興趣的素材,但每次都要選擇文件夾,非常繁瑣且低效。
后來花瓣網加入了快速采集的功能,其邏輯是網站會默認選擇上一次采集的收藏夾,這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。
社區類產品有各種點贊,收藏等互動信息,但用戶又不想被別人知道這些信息。
因此,在規劃產品時需要考慮到用戶互動隱私的保護,這是用戶側的剛性需求。
抖音個人主頁的點贊列表,我記得剛開始是公開的,且不能設置為私密。
用戶點贊的視頻會出現在這里,卻少有人希望這些信息被別人看到,總有些點贊視頻你并不想被別人看到。
如果點贊列表可見,那么用戶在點贊的時候就會有所顧慮,這不利于平臺的互動率。
特別是隨著抖音上熟人也越來越多,強關系社交場景在漸漸加強。
抖音后來也發現了這個問題,把它設計成了默認隱藏。(當然可以自己設置為公開,但只有極少數用戶會這樣做。)
由于點贊是私密的,用戶可以隨心所欲的點贊自己喜歡的視頻,毫無社交壓力。
這是為何?
源于人性心理學:窺私欲。人人都喜歡窺視別人的隱私,而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設置了權限,畢竟,誰想被別人窺視當年那個煞筆的自己呢?
現在訂閱號打開率越來越低,朋友圈分享曾是訂閱號流量來源的一大入口。
朋友圈早已淪為了一個人設打造的陣地,現在的人發圈越來越謹慎。
用戶似乎越來越不愿意在朋友圈分享文章了,除非是有利于自己人設打造的內容。
為了減輕用戶的這種社交壓力,微信推出了“在看”的功能。
用戶點了“在看”后,此文章會出現在看一看這個模塊,且七天前的分享將不可見,這就相當于一個弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對于公眾號主來說,相當于增加了一個流量入口,激發他們創作更多的內容。
視頻號點贊也是同理,會被朋友看到,導致用戶在點贊的時候就會有所顧慮。
他會考慮,我點贊了這個視頻,我老師、上司、父母、親戚、朋友會不會看到?他們會怎么想?
但他在抖音上點贊是沒有這么多顧慮的,單純的喜歡就行。
第一,抖音是弱關系平臺;
第二,抖音上的點贊默認是私密的。
因此,微信才推出了私密贊的功能,需要長按才能觸發。
這并是一個優雅的解決方案,一是操作成本有點高,二是用戶存在較高的學習成本。
微信作為一個強關系社交場景,這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的,那就是為了減輕用戶的社交壓力。
同時用過mac OS和windows系統的用戶不知是否發現,這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的?
mac的彈窗按鈕確定在右,取消在左;而windows的剛好反過來,確定在左,取消在右。
為什么會有這樣的差異?哪一種更加合理?
在交互設計中,這種彈窗叫做模態反饋,艾倫·庫珀在《About Face 4》中提到:模態模式一種臨時模式,它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來,界面中只有 popup(彈出層)組件具有可交互行為,需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。
首先我們要明白這兩個按鈕哪個使用率更高,一般來說,“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。
所以這兩個按鈕在視覺上一定要做出差異化,“確定”的視覺層級要高于“取消”,這樣用戶才會一目了然,不會感到困惑。
回到剛才的問題,逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯:
人的閱讀習慣是從左到右,所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。
mac彈窗的背后邏輯:
根據一般的任務的流程,“取消”在左代表返回上一步操作,而“確定”在右代表進入下一步任務流程。
看上去似乎都有道理,這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性,讓用戶形成操作習慣就沒有啥問題。
從個人的使用習慣而言,個人更傾向于mac的這種方式。
手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式,放在左右兩側或都放在右側,前者以iPhone為代表,后者以安卓手機為代表。
這兩種方式有什么區別?哪種方式更加合理?電源鍵和音量鍵屬于完全不同類型的兩種按鍵,且都是高頻使用,它們的功能自然不用贅述。
我們先來看看都放在右側會有什么問題,以下使用場景相信用戶不會陌生:
用戶a,在地鐵上玩王者,聲音有點大,想把聲音調小,結果不小心按到了電源鍵,導致手機息屏,而此刻你正在激烈的團戰,內心有一萬只“草尼瑪”奔騰而過……
用戶b,每次按電源鍵(解鎖或鎖屏)都會不小心同時按到音量鍵,結果直接就截圖了!這種情況發生了不止一次,因為這兩個按鍵離的太近了……
用戶c,自家的小米11,電源鍵位于中間位置,右手拿時大拇指會觸碰到,左手拿時中指剛好會觸碰到,而電源鍵又有指紋鎖功能,導致手機在不斷的解鎖,而你毫無察覺……
通過上面的案例,可以得出結論:若按鍵都放在右側,會導致用戶經常誤觸而造成不必要的麻煩。
放在兩側就不會有這樣的問題??梢杂行Х乐拐`觸,尤其是盲按,不用擔心按錯,減少誤操作的幾率。
值得一提的是,iPhone手機的電源鍵一開始是位于頂部位置,這是為何?
因為剛開始時手機都是小屏幕(3.5~4寸左右),對于iPhone5S及以前的手機來說,單手操控,拇指Home,食指電源,剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來隨著手機大屏的趨勢(4.7寸以上),這個時候單手已經不方便按到頂端了,從6代開始就把電源鍵放在右側了。
但無論是哪種方式, 兩個按鍵都是分開放。
還有一個小細節,iPhone的實體鍵不是在右側正中間,而是在靠上的位置。
iPhone設計理念是單手持握,并且大多數人右手握手機,大拇指經常會碰到右側邊框,若果放中間,這樣會造成誤觸音量鍵和靜音鍵。
其實上面的案例3就已經說明了按鍵放在中間的弊端。
我想起了當年的錘子T1,左右按鍵一樣大且位于兩側的中間,這是典型的為了追求完美的對稱而向用戶體驗妥協。
iPhone從初代開始就已經建立了自己的設計理念,不管是工業設計還是界面設計,并沿用至今。
從初代開始,iPhone機身左側音量鍵上方就有一個靜音鍵。
這些年來,iPhone一直在減少各種實體按鍵以及外部接口,比如3.5mm耳機孔、home鍵。
但直到如今這個靜音鍵卻一直保留下來,為何iPhone對于這個按鍵情有獨鐘?
靜音鍵開啟后,任何來電或通知都是無聲的,震動也會消失。
在無需點亮屏幕的情況下實現一鍵靜音,方便快捷,深受用戶的青睞。
根據自身的使用習慣以及用戶研究,無非以下幾種使用場景,比如看電影、開會、上課等:
1.進電影院看電影前,我一般都會撥一下,避免在看電影的過程中被來電鈴聲打擾,影響了自己和別人觀影。
2.開會的時候也會撥一下,以防在開會的時候突然被來電鈴聲所打擾,避免不必要的尷尬。
3.學生黨在上課前一般也會開啟,這樣整節課都不怕打電話進來了。
總之,就是不希望自己的手機鈴聲打擾到自己和別人,帶來不必要的麻煩。
如果是虛擬靜音鍵,需要先解鎖手機,對著手機屏幕一頓操作。
而實體鍵不需要這么麻煩,可以盲操作,放在褲兜里都不影響操作。
這個按鍵這么重要,卻很少看到安卓手機上有(除了一加基本上沒有)。
實體靜音鍵并非蘋果首創,之前的Palm、Blackberry(黑莓)早已有這樣的設計。
可能的原因是安卓控制中心很早有靜音按鈕,甚至有些定制系統還可以把靜音按鈕直接放在桌面上,設置靜音非常方便,也就沒必要再多加一個實體鍵了,顯得多余又徒增成本。
上面提到過的,作為安卓陣營唯一的靜音鍵,一加手機引以為傲的三段式按鍵,該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。
但個人認為這個設定復雜了,三種模式遠比兩種模式復雜。用戶并不一定能搞明白,有一定的學習成本。
在早期,iPhone的控制中心并沒有靜音按鈕,想要設置個靜音并不是一件容易的事情,而這個功能又是必須的,蘋果索性直接做了一個實體物理鍵。
這樣靜音的時候只需要把靜音鍵撥過來就可以了,一步到位,使用體驗也很好,所以一直保留至今。
雖然現在iPhone的控制中心已經加入了勿擾模式,但考慮到老用戶的使用習慣,以及品牌調性,蘋果對于這個實體按鍵的去掉還是顯得很謹慎。
考慮到之后iPhone在防水、機身內部空間的改進,不排除蘋果終有一天會取消iPhone上這個靜音鍵。
靜音鍵雖好,但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知,或者開啟后忘記關閉,導致錯過了一些重要的電話。
雖然開啟了靜音鍵,但并不是絕對的靜音。如果是鬧鐘,鈴聲還是會響起,因為鬧鐘的優先級要遠高于靜音模式。
蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵,或者開啟后忘記了關閉,害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開啟了靜音模式,卻還可以調解音量大小的原因所在。細微之處方見真功夫。
在日常生活中,旋鈕是個很常見的東西,比如音箱,微波爐,收音機,老式電視,車載旋鈕……
在機械產品上,旋鈕凸起的把手和它下面的圓盤刻度,是最明顯不過的旋轉暗示,符合人的自然感知。
旋鈕式交互是個人非常偏愛的一種交互方式,我認為這種交互跟iPhone的home鍵一樣經典,主要原因有三:
旋鈕操作簡單,看到這種按鈕,一歲小孩子都會忍不住用手去抓。對于用戶來說,幾乎不需要學習成本。
在旋轉的過程中,可調大調小,一切盡在用戶的掌控之中,用戶感覺到有十分的安全感。
在調節的過程中,調大調小都能立刻收到即時的反饋,這是用戶最喜歡的交互方式。
我們在觸摸屏上很少看到這種旋鈕式交互,因為這種交互是要建立在抓住旋鈕實物的感受。
而觸控屏是個二維的世界,沒有真實抓握的手感,無法還原出三維世界的真實手感。
汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后,越來越多的國內廠家開始盲目跟風,把絕大部分的功能按鈕集成到屏幕中,比如空調,不僅不方便,行車中使用還容易造成危險駕駛。
車上的觸控體驗跟手機上是完全是兩碼事,使用場景也完全不同。最大的區別在于后者沒有安全問題。
都知道開車不玩手機,可是行車時操作中控屏跟玩手機有什么兩樣?
對于駕駛員來說更加安全,通過旋鈕調節空調,熟悉后完全可以實現盲操,邊開車邊操作毫無壓力。
如果是觸控屏,你必須看著屏幕,一頓操作猛如虎,而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。
而安全是汽車駕駛的重中之重。
用戶的操作有真實的物理反饋,旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。
軟件系統用久了會變卡,可能會死機,難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。
一旦屏幕失靈,或者系統死機了,那所有按鍵都失效了。
雖然特斯拉為了提升其車載系統的穩定性下了很大功夫,但是問題從來都沒有停止過。
但是硬件基本上很少會出問題,物理旋鈕才讓人100%放心。
無論廠家如何吹噓,虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。
因此,有一些實體鍵出于安全駕駛的考慮還是應該保留,將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
文章來源:站酷 作者:CdzhcHappy
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目錄
1.百度網盤 :會員標識
2.當當:搜索記錄隱藏
3.當當:分享動效 ? 一鍵制作朋友圈分享海報
4.抖音:點擊復制 ID
5.飛書:效率工作—語言自動轉化
6.美團:優惠卷新到提示
7.墨跡天氣:一鍵登錄(大部分應用已上線該功能,部分應用仍未上線)
8.起點讀書:長按可進行互動
9.騰訊視頻:亮度調節的動效設計
10.微博:點贊動效設計
11.知乎:刪除搜索記錄
12. QQ:可隱藏會話
13. QQ 音樂:搜索入口的聽歌識曲
14. QQ 閱讀:長按復制的放大設計
在開通會員后百度網盤會進行對于應用圖標的更換,使得應用圖標更加高級,在分享鏈接時也會加入會員分享的標識。
屬于用戶激勵體系中的一個板塊,增強用戶的標識和身份。
搜索隱藏功能設定。
我們在使用各大應該的搜索功能時總會遇到過這樣的場景,當你要某人或者在某種場景下需要進行搜索時,來不及刪除自己的搜索記錄出現社死的情況。
而當當的搜索隱藏就可以完美的解決這個問題,退一步講我們可以思考一下為什么別的成熟型應用,沒有采用這樣的方式。大部分是沒有這個功能,其余則是在搜索這一個功能上已經添加了其余用戶體驗的設計。所以在這一塊就沒法加入這個設計。
在當當應用中點擊分享進入頁面后不同于傳統的分享頁面,而是把分享到微信和分享到朋友圈進行了動態設計。并且在分享到朋友圈的右上角加上了海報的標識。我們點擊會自動跳轉生成海報。
這樣的設計可以更加吸引用戶的眼球并且自動生成海報可以激發用戶在朋友圈轉發的次數。
主頁 ID 點擊可進行復制 很多應用都有 ID 。但是當我們要進行 ID 搜索的時候,我們便需要一遍一遍的反復查看或者記住這個 ID 然后再進行搜索。
目前部分的應用也上線了類似的功能,讓用戶點擊 ID 區域可進行復制。對于用戶體驗的提升有著很顯著的效果。
飛書屬于一款協同辦公類的應用
在飛書的設置用有語音直接轉換文字的說明,飛書本身便是一款協同辦公類的產品。此產品效率便是產品關鍵詞之一,所以加入這樣的設置可極大的提升用戶的體驗。
有提示用戶新到多少張優惠卷的提示
可以促進用戶消費的同時能幫助和提醒用戶去使用消費卷不僅提高了商家的銷量還使得用戶在消費中發現自己的優惠卷及時使用
一鍵登錄
應用登陸中目前主流為(1.第三方登錄,登陸之后需要再次綁定手機號。2.手機號注冊登陸,登陸之后可選擇是否綁定第三方。3.一鍵登錄,登陸之后可以選擇是否綁定第三方)在設計流程中,設計開發者需要盡可能的減少對流程的復雜化。
一鍵登錄在為看來是最喜歡的一種登陸方式。導致現在如果需要各種注冊綁定,除非必要的情況下,我會直接放棄這款應用。
長按頁面可以框選當前的段落,并且出現互動選項。
增加用戶和用戶之間,用戶和作者之間的互動。使得用戶在讀書的同時有著較強的參與感。
滑動可調節亮度
左邊的小動效的設計加上右邊的漸變進度條,使用戶可以更加明確的知道自己所處于一個什么樣的觀看環境,并且加入了漸隱漸現的出場和入場。
用一個小巧的動效設計幫助用戶確定自己的亮度屬性,
點擊點贊會出現彩色的波浪并且不斷擴散的同時有小表情彈出。
增加趣味性和互動性。
清空時會在進行確認,再次點擊全部刪除方可刪除。
在下方列表中可逐一刪除,上面清空中不是點擊后就全部清空。而是再次出現,起強調和確認的作用。
增加用戶體驗,幫助用戶進行二次確認和防止用戶誤觸。作為一款咨訊類應用用戶的搜索記錄也是比較重要的。
前幾天發現的一個神級功能(雖然我已經不用 QQ 進行社交了),當時我外甥和我講述了這個功能他么00后戲稱為養魚神器。
在好友的設置中可隱藏會話,開啟隱藏會話以后。此聯系人發來的消息不會顯示在聯系人列表。需要自己手動去設置隱藏會話列表去尋找。
應用的功能更加多樣化滿足多種不同的需求。
在搜索入口加入了聽歌識曲且進入界面后可進行聽歌識曲和哼唱識別的切換
搜索歌曲界面的使用場景為:1.用戶得知該歌曲的名稱或者歌詞進行搜索。2.用戶聽到了某一首很好聽的歌曲想進行搜索。此時在場景二的情況下,正好可以進行聽歌識曲。聽歌識曲此功能在比較舊的版本屬于主頁中的一個模塊,把聽歌識曲放到搜索入口處更加符合用戶場景。
對用戶場景進行細致的研究,增加了用戶體驗。
長按復制會有放大鏡設計
當用戶處于復制文案的場景下時,由于復制需要拖動,在拖動的過程中會按壓住自己所處于的復制內容位置。所以在用戶進行復制時加入放大鏡的設計會使得用戶清楚的明白自己復制到哪里,不需要后續用戶在進行刪減。
極大的加強了此場景下的用戶體驗
文章來源:站酷 作者:張陽光Designer
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn