亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁(yè) > SEO動(dòng)態(tài) > 網(wǎng)站技術(shù)重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

一、研究背景

在互聯(lián)網(wǎng) UI 設(shè)計(jì)領(lǐng)域,日期選擇器已然形成了一種普遍的設(shè)計(jì)模式,通常借鑒傳統(tǒng)實(shí)體日歷的形式來(lái)降低用戶(hù)學(xué)習(xí)成本。早期的日期范圍的選擇分散于兩個(gè)獨(dú)立的選擇器之中。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

隨著用戶(hù)需求的演進(jìn)及選擇效率的考量,部分服務(wù)平臺(tái)例如攜程采用了一種雙日歷并列的界面設(shè)計(jì),此舉讓用戶(hù)能在同一界面同時(shí)選擇起始和結(jié)束日期。鑒于攜程酒店預(yù)訂的最長(zhǎng)時(shí)限為 31 晚,這一并列雙日歷的設(shè)計(jì)顯示出其直觀和高效的優(yōu)點(diǎn),從而被廣泛認(rèn)可并采用,越來(lái)越多的日期范圍選擇趨同于這種方式。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

在這一傳統(tǒng)布局的基礎(chǔ)上,一些大型科技公司如螞蟻金服和字節(jié)跳動(dòng),進(jìn)一步在前端組件中集成了周、季、月、年的選擇功能,以及相關(guān)的范圍選擇交互。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

季度選擇,在此組件中擴(kuò)展設(shè)計(jì)成了這樣:

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

盡管我對(duì)這些公司的綜合設(shè)計(jì)能力和前端技術(shù)表示贊賞,我也不禁產(chǎn)生疑問(wèn):這樣的設(shè)計(jì)是否真的是最優(yōu)解?在使用細(xì)節(jié)上似乎依然存在不便與不一致的問(wèn)題。是否存在更合適的設(shè)計(jì)方案?這樣的疑惑一直藏在心中,多年從業(yè)未曾有機(jī)會(huì)深入研究或嘗試改進(jìn)。面對(duì)已足夠強(qiáng)大且美觀的開(kāi)源組件,前端的直接復(fù)用無(wú)疑節(jié)省了大量的工作,直至某一天……

二、當(dāng)前問(wèn)題

在日常的產(chǎn)研和項(xiàng)目交付過(guò)程中,我們選擇了某一家的開(kāi)源日期選擇控件直接應(yīng)用。然而,有一天,一位客戶(hù)反饋了一個(gè)使用問(wèn)題:

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

在單個(gè)日期選擇操作中,用戶(hù)點(diǎn)擊 2024 年 4 月 16 日,日歷面板即刻收起并將日期自動(dòng)填充到輸入框中,從而順利完成了日期選擇。

相對(duì)的,在日期范圍選擇操作中,用戶(hù)點(diǎn)擊 2024 年 4 月 16 日卻遇到了問(wèn)題。與單日期選擇操作相仿,日歷面板未有任何反應(yīng),這使用戶(hù)誤以為未成功選中日期,于是用戶(hù)在同一日期上再次進(jìn)行了點(diǎn)擊。這次,日歷面板收起,日期被填充,最終只選擇了 2024 年 4 月 16 日這一天,明顯不符合用戶(hù)原本的選擇意圖,用戶(hù)必須重新操作一遍,但是困惑還是存在,尤其當(dāng)選擇的開(kāi)始和結(jié)束日期間隔較大時(shí),這種困惑更為顯著。

針對(duì)此問(wèn)題,客戶(hù)期望采用兩個(gè)獨(dú)立的日期選擇框來(lái)改善交互體驗(yàn),以清晰分開(kāi)開(kāi)始日期和結(jié)束日期,從而避免混淆與誤操作。

三、設(shè)計(jì)分析

當(dāng)客戶(hù)把問(wèn)題反饋給我們時(shí),我初時(shí)也感到有些驚訝,思索著問(wèn)題究竟出在哪里。為了更好地理解問(wèn)題,我嘗試著將自己置于一個(gè)政務(wù)工作者的位置,想象自己作為一個(gè)對(duì)計(jì)算機(jī)操作持謹(jǐn)慎態(tài)度的中年用戶(hù),我的日常單個(gè)日期選擇習(xí)慣如下:

  1. 點(diǎn)擊選擇框、彈出日歷面板;
  2. 使用鼠標(biāo)選擇所需日期,隨后面板關(guān)閉,選中的日期出現(xiàn)在選擇框中。

然而,在嘗試選擇一個(gè)日期范圍時(shí),我的操作流程變得不同:

  1. 依照習(xí)慣點(diǎn)擊選擇框,日歷面板彈出;
  2. 出現(xiàn)兩個(gè)日歷面板稍微讓我感到吃驚,但還是繼續(xù)操作,選擇了開(kāi)始日期“16”。然而日歷面板并沒(méi)有關(guān)閉,我是否操作有誤?為確認(rèn)操作,我再次點(diǎn)擊“16”,這次日歷面板關(guān)閉了;
  3. 結(jié)果,日期被回填到選擇框中,僅選中了一天;
  4. 再次嘗試打開(kāi)選擇框,重新操作,但光標(biāo)的變化讓我感到困惑,這怎么點(diǎn)啊……

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

的確,AntDesign 的設(shè)計(jì)團(tuán)隊(duì)在處理這一交互問(wèn)題時(shí)已經(jīng)做出了考慮,嘗試通過(guò)在選擇框內(nèi)加入高亮聚焦條的動(dòng)效,隨用戶(hù)操作從開(kāi)始日期到結(jié)束日期移動(dòng),并配合面板上方的箭頭同步移動(dòng)來(lái)指引用戶(hù)操作。同時(shí),面板上還實(shí)現(xiàn)了選擇開(kāi)始日期后將之前的日期置灰禁用的反饋機(jī)制。

然而,盡管設(shè)計(jì)上做出了這些努力,卻依然難以打破用戶(hù)對(duì)單日選擇操作的習(xí)慣性思維。特別是,操作反饋細(xì)節(jié)通常在選擇框位置,而用戶(hù)的注意力在操作時(shí)多集中在日歷面板上,因而可能會(huì)忽略選擇框附近的精妙設(shè)計(jì)。

通過(guò)分析,我們認(rèn)識(shí)到問(wèn)題的核心在于:

  1. 日期范圍選擇與單日期選擇之間的交互差異過(guò)大;
  2. 在用戶(hù)進(jìn)行開(kāi)始日期選擇時(shí),提供的交互反饋過(guò)于微弱,缺乏足夠明確的操作指引。

四、創(chuàng)新方案

在尋找解決方案的過(guò)程中,我們的團(tuán)隊(duì)深入調(diào)研了現(xiàn)存的日期選擇控件,希望找到一個(gè)更適合的解決方案。雖然大多數(shù)選擇器在設(shè)計(jì)和功能上并無(wú)太大差異,華為 DevUI 新版的日期選擇器卻引起了我們的注意。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

DevUI 的這款創(chuàng)新日期選擇器打破了傳統(tǒng)的雙日歷面板設(shè)計(jì),采用了縱向的日歷布局,允許用戶(hù)通過(guò)鼠標(biāo)滾輪快速切換月份和年份。其全新的設(shè)計(jì)理念和流暢的交互體驗(yàn)為我們提供了全新的視角。

在細(xì)看 DevUI 日期選擇器的范圍選擇功能時(shí),我們注意到它會(huì)在選中開(kāi)始日期后使其微微閃爍,以此提示用戶(hù);然而,這種方式依然缺乏更具體的指引,用戶(hù)仍然需要通過(guò)鼠標(biāo)的移動(dòng)來(lái)進(jìn)行探索。這表明,即使是 DevUI,也未能完全解決日期范圍選擇的根本問(wèn)題。

但是,站在巨人的肩膀上總能讓我們看得更遠(yuǎn)。從 AntDesign 日期選擇器中的橫向高亮聚焦條動(dòng)效得到啟發(fā),我們意識(shí)到如果能將這種動(dòng)效應(yīng)用在用戶(hù)視線(xiàn)的焦點(diǎn)上,不就能很好的提示用戶(hù),指導(dǎo)用戶(hù)選擇范圍了嗎?

具體而言,當(dāng)用戶(hù)選定起始日期,而光標(biāo)未移動(dòng)時(shí),在日歷面板上自動(dòng)移動(dòng)聚焦區(qū)域,便可以直觀地暗示用戶(hù)應(yīng)如何選擇日期范圍。DevUI 的縱向日歷面板設(shè)計(jì)可以很好地適用這種移動(dòng)動(dòng)效,通過(guò)面板的滾動(dòng)而不移動(dòng)鼠標(biāo),用戶(hù)便能立刻接收到范圍選擇的指引。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

這一方案通過(guò)團(tuán)隊(duì)內(nèi)的多輪 demo 測(cè)試并獲得了廣泛認(rèn)可,證明了它有效地解決了日期范圍選擇的核心問(wèn)題。

五、設(shè)計(jì)細(xì)節(jié)

為了實(shí)現(xiàn)自然流暢的動(dòng)效,我們深入探討了像素級(jí)的設(shè)計(jì)細(xì)節(jié),重點(diǎn)優(yōu)化如下:

  1. 設(shè)定日歷面板中每個(gè)月份均以六行顯示,確保月份滾動(dòng)的連續(xù)性和一致性步頻;
  2. 模仿傳統(tǒng)日歷的月份提示采用水印效果,以減少月份之間的視覺(jué)間隔,增強(qiáng)整體的連貫性;
  3. 設(shè)定日歷面板為固定的九行空間,其中當(dāng)前月份占用六行,下個(gè)月份占用一行,前一個(gè)月份占用兩行,從而在滾動(dòng)中始終保持日期提示的可見(jiàn)性;
  4. 當(dāng)用戶(hù)選定起始日期后,自動(dòng)滾動(dòng)日歷面板,將選中行調(diào)至頂部,提供清晰的范圍選擇指引,即使鼠標(biāo)未移動(dòng);
  5. 保持了單日期選擇與日期范圍選擇外觀上的一致性,通過(guò)不同的選中日期樣式進(jìn)行區(qū)分。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

在此基礎(chǔ)上,我們繼續(xù)研究了日期加時(shí)刻的范圍選擇,認(rèn)為有必要一同優(yōu)化:

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

DevUI 與 AntUI 的設(shè)計(jì)是回到單個(gè)面板選擇日期+時(shí)刻,點(diǎn)擊“確定”后再去選擇結(jié)束日期+時(shí)刻,再點(diǎn)“確定”,共用一個(gè)面板顯示了開(kāi)始日期和結(jié)束日期,但是時(shí)刻卻只顯示了一個(gè)(開(kāi)始時(shí)刻或結(jié)束時(shí)刻)。

這種處理方式與無(wú)時(shí)刻的日期范圍選擇交互不一致,且不符合大多數(shù)實(shí)際應(yīng)用場(chǎng)景。一般情況下,用戶(hù)希望開(kāi)始和結(jié)束日期的時(shí)刻一致,如有差異才需單獨(dú)調(diào)整。

因此這個(gè)設(shè)計(jì)應(yīng)該延續(xù)日期范圍選擇,用戶(hù)在快速選定日期范圍后,根據(jù)需要設(shè)置時(shí)刻范圍,并同步展示整個(gè)日期范圍與時(shí)刻的起止點(diǎn),這樣更符合真實(shí)使用情境。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

此外,我們也對(duì)周、月、季度選擇進(jìn)行了優(yōu)化,統(tǒng)一了設(shè)計(jì)邏輯和風(fēng)格,并摒棄了年份選擇的非直觀的 Z 字排列方式,改為更符合邏輯的縱向排布,使用戶(hù)體驗(yàn)更為直觀和一致。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

結(jié)語(yǔ)

我們以日期范圍選擇作為突破口,全面研究和分析了整個(gè)日期選擇控件的設(shè)計(jì)。立足于 AntDesign、ArcoDesign、DevUI 三大優(yōu)秀框架,進(jìn)行了創(chuàng)新與改進(jìn),完成了整套日期選擇控件的細(xì)化設(shè)計(jì),了卻內(nèi)心多年的疑惑。在這一過(guò)程中,我們與團(tuán)隊(duì)的前端工程師進(jìn)行了深度溝通和合作,計(jì)劃經(jīng)過(guò)充分驗(yàn)證后,將源碼開(kāi)源給行業(yè)選用,敬請(qǐng)期待。

番外篇:

關(guān)于攜程的案例,其 Web 端和移動(dòng)端的交互差異引發(fā)了我們的深思。攜程的 Web 端延續(xù)了傳統(tǒng)的橫向日期選擇設(shè)計(jì),而移動(dòng)端因應(yīng)屏幕尺寸限制,采用了縱向布局。這種布局改變?cè)谔峁┝艘粋€(gè)重要的啟示:為何不將移動(dòng)端的直觀縱向設(shè)計(jì)理念應(yīng)用于 Web 端,從而實(shí)現(xiàn)多端設(shè)計(jì)的統(tǒng)一和優(yōu)化用戶(hù)體驗(yàn)?如果能將這種設(shè)計(jì)思路反哺到 Web 端,不僅能夠?qū)崿F(xiàn)功能上的一致性,還有利于提升整體的用戶(hù)體驗(yàn),使之更加流暢和直觀。這樣的跨端一致性設(shè)計(jì),無(wú)疑會(huì)為用戶(hù)帶來(lái)更加舒適和便捷的操作感受,是值得我們進(jìn)一步考慮并實(shí)施的方向。

重塑體驗(yàn)!如何優(yōu)化常見(jiàn)的日期選擇面板設(shè)計(jì)?

碧野青風(fēng)

想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問(wèn):網(wǎng)站技術(shù)

本文來(lái)源:http://www.sonygallery.com.cn/seodongtai/19883.html

免責(zé)聲明:部分文章信息來(lái)源于網(wǎng)絡(luò)以及網(wǎng)友投稿,本網(wǎng)站只負(fù)責(zé)對(duì)文章進(jìn)行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點(diǎn)或證實(shí)其內(nèi)容的真實(shí)性,不承擔(dān)任何法律責(zé)任。