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

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

1、在一個(gè)日歷上布局所有信息

傳統(tǒng)日歷顯示

列表顯示

2、兩個(gè)日歷顯示兩種類別的信息：

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

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

而設(shè)計(jì)過(guò)程中都會(huì)遇到這些普遍的問(wèn)題：

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

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

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

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

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

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

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

1、類Z字形布局模式

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

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

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

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

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

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

2、頂部確定按鈕模式

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

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

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

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

3、Z字形布局模式

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

3.1 小結(jié)：

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

4、列表模式

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

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

采用兩個(gè)日歷分別展示不同類別

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

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

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

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

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

總結(jié)

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

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

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

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

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

廣告

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