移動app中對日期選擇器的設(shè)計

我很少去關(guān)注日期選擇設(shè)計，但最近在做一個項目的時候，涉及到選日期，一開始只是很簡單粗暴的做了個日歷表格，后來主設(shè)計師跟我說，去參考競品的日期篩選設(shè)計。在參考學(xué)習(xí)過程中發(fā)現(xiàn)移動端的日期選擇器設(shè)計是個大學(xué)問。

目前旅游、票務(wù)app的日期選擇器的設(shè)計一般有兩大類：

1、在一個日歷上布局所有信息

傳統(tǒng)日歷顯示

列表顯示

2、兩個日歷顯示兩種類別的信息：

使用兩個頁面跳轉(zhuǎn)顯示

同一個頁面兩個tab跳轉(zhuǎn)

而設(shè)計過程中都會遇到這些普遍的問題：

年月周日的顯示方式，尤其是跨月的設(shè)計：隔斷設(shè)計還是延續(xù)設(shè)計?

不可選擇的日子怎么呈現(xiàn)，隱藏還是變灰?

各層級信息的排布要怎樣設(shè)計才能高效呈現(xiàn)，提高選擇效率，一些附加的提示信息要怎么顯示?

防錯設(shè)計：提示、不可操作

智能優(yōu)化設(shè)計：默認(rèn)值的設(shè)置。

本文主要分析上面第三點(diǎn)，以下將做幾個案例分析：

統(tǒng)一在一個日歷上布局所有信息(傳統(tǒng)日歷顯示)

1、類Z字形布局模式

優(yōu)點(diǎn)：將重點(diǎn)確定按鈕放在底部，符合人們從上到下的瀏覽習(xí)慣。

缺點(diǎn)：存在大可能性的視覺盲點(diǎn)，容易忽略頂部信息欄。頂部信息位置處于邊界視野范疇，距離較遠(yuǎn)。設(shè)計顏色和整個面板差別不大，面積占比不大。而中央選擇高亮的地方會加重中央凹聚焦，隨著視覺流從上往下走的規(guī)律，頂部信息傳達(dá)率不高。

優(yōu)點(diǎn)：首先，同樣是頂部信息欄設(shè)計，Booking的設(shè)計讓文本框隨著點(diǎn)擊選擇而高亮跳動，增加信息可見性。跳動其實(shí)算是設(shè)計現(xiàn)象中“跳入”特性中的一種，可以引導(dǎo)中央凹快速移動到跳動目標(biāo)位置。

其次，整體選擇信息會在確認(rèn)按鍵上再次呈現(xiàn)，用戶盡管可能隨著視覺流不再關(guān)注過遠(yuǎn)距離的頂部信息欄，也并不會缺失對選擇信息的感知。

除了跳動，加大面積，顏色塊區(qū)分也有助于邊界視野中元素的“跳入”。agoda的設(shè)計使用各欄目模塊化的大對比色塊處理引起視覺注意，頂部黑色信息欄和下方的灰白日歷以及底部藍(lán)色按鈕互相形成對比。

在設(shè)計提示信息的時候，提示語就在點(diǎn)擊的區(qū)域2-3cm處，增強(qiáng)視覺感知效果。

2、頂部確定按鈕模式

螞蜂窩的頂部信息欄設(shè)計非常清晰，具備大面積、突出顏色這兩個跳入因素，往往最初的視覺定位就在左上角，然后按照對角線瀏覽。當(dāng)最后回到頂部確定按鈕操作，這時候視線會再次掃過頂部信息欄。雖然要在更遠(yuǎn)的距離操作確定，但是信息欄的可見性和使用率達(dá)到高。

1.1、小結(jié)——對于頂部信息欄的設(shè)計，要注意：

(1)用戶會對邊界跳動的信息產(chǎn)生關(guān)注，而處于視野邊界、弱對比、靜止的物體不易被注意到，在這些地方適合排布次級以下信息。假如要在這些地方突出信息，應(yīng)該加入“跳入”元素：將信息做得面積足夠大、顏色強(qiáng)對比、動效、聲音等等，好比如頁面漂浮或者右下角的小廣告，畫面總是帶有強(qiáng)烈的閃動來引起注意。

(2)用戶點(diǎn)擊的地方通常是中央凹聚集的地方，點(diǎn)擊位置1-2厘米內(nèi)設(shè)計提示反饋易引起用戶注意。距離過遠(yuǎn)就被置于邊界視覺里。

3、Z字形布局模式

阿里飛豬的日歷設(shè)計屬于更典型的z模式，將重要的選擇性內(nèi)容歸總在底部，從左到右排布信息，不但滿足從上而下瀏覽的習(xí)慣，確定按鈕居于右下方。根據(jù)古登堡圖表設(shè)計原則，這是用戶的最終視覺落腳點(diǎn)，而這種設(shè)計目前也被很多主流app應(yīng)用。

3.1 小結(jié)：

比起要考慮喚起用戶關(guān)注的頂部信息欄設(shè)計，底部信息欄設(shè)計難度低，用戶隨著視覺流大部分會關(guān)注到底部，較大程度上能解決信息可見性問題，在結(jié)果操作上也滿足用戶視覺習(xí)慣。

4、列表模式

列表信息欄中，視覺流主要在1、2、3點(diǎn)上，因?yàn)橐曈X焦點(diǎn)既要關(guān)注xy軸上的主要日期信息，也要看中部的價格信息，視覺焦點(diǎn)會有較大面積跳動。所以列表設(shè)計上，色塊是大的引導(dǎo)元素，整個列表除了被選中和按鈕以外，都處于邊界視覺范圍。

這種設(shè)計既對重點(diǎn)信息的呈現(xiàn)有針對性，也將信息的結(jié)合呈現(xiàn)非常好，但是用戶可能要花一點(diǎn)時間理解。

采用兩個日歷分別展示不同類別

1、兩個頁面間跳轉(zhuǎn)

兩個頁面呈現(xiàn)兩個日歷往往大的問題是，跳轉(zhuǎn)了以后怎么向用戶呈現(xiàn)已選擇了的信息。

左邊應(yīng)用的設(shè)計讓我跳轉(zhuǎn)后很疑惑，到底我剛剛出發(fā)選了什么，沒有反饋，也不知道對不可選的定義是什么，為什么出發(fā)選了24號，跳轉(zhuǎn)到返程以后24號前的依舊可選。而在右邊的應(yīng)用中則有很好的信息反饋設(shè)計。

2、同一個頁面兩個tab跳轉(zhuǎn)

tab跳轉(zhuǎn)設(shè)計很好的解決了兩個日歷在不同頁面間跳轉(zhuǎn)可能存在的問題：低效率、弱反饋、撤銷操作成本高等。

總結(jié)

以上每一種日歷設(shè)計都有場景意義，也同時有優(yōu)有弊。但對于移動端來說，效率是比較重要的，個人認(rèn)為兩個頁面做日歷設(shè)計這種設(shè)計不是很推薦，除非是使用場景很有必要，頁面間的跳轉(zhuǎn)低效率、弱反饋、撤銷操作成本高。

相較于這么多種設(shè)計，底部信息欄的設(shè)計成本比較低，比較容易就能滿足信息的可見性，也滿足視覺流規(guī)律，在操作上也比較高效。

對于提示信息，如果是一級信息，可以直接壓在操作焦點(diǎn)附近，蓋住次級信息也可以;次級信息可以置放在邊界，減少對主要信息的干擾。

當(dāng)前標(biāo)題：移動app中對日期選擇器的設(shè)計
分享地址：http://www.muchs.cn/news12/170212.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站改版、品牌網(wǎng)站制作、虛擬主機(jī)、品牌網(wǎng)站設(shè)計、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)