等等

辽宁35选7哪天开奖:你應該知道的五種地址選擇器

等等 APP設計 2071瀏覽

辽宁35选7开奖哪个台 www.duulp.com 之前做過一個項目,需要做首頁定位和添加收貨地址兩個功能??嘉乙暈惶椎刂費≡衿骶湍藶閾棖?,結果發現這是兩個不同的場景,比如首頁定位到城市就夠了,但是收貨地址則需要詳細到小區、街道甚至門牌號。

那么,不同的場景中適合使用什么樣的地址選擇器呢?這篇文章就和大家分享五種常見的地址選擇器樣式。

 

目錄

1. 底部 Picker

2. 底部列表

3. 頁面跳轉

4. 地圖+附近位置

5. 列表+平鋪

 

底部 Picker

由頁面底部彈出 Picker,按照省-市-區縣的順序依次選擇地址。它適用于需要選擇多個選項集合,每個集合中的選項數量不是特別多,并且用戶對所有的選項都特別熟悉的場景。

  • 優點:系統自帶,兼容性好,在實現上技術可以直接調用,開發成本低。
  • 缺點:頁面展示的內容太少,上下滑動查找時需要花費的時間較多,且容易誤觸。

以有贊為例,它的產品目標是讓用戶在自己平臺的商家那里購買商品,用戶分布在全國各地,

添加收貨地址需要依次選擇省-市-區縣,所以使用了這種方式。

需要注意的是:這種地址選擇器是滾輪聯動式的,所以使用的時候容易誤觸。而且如果添加自己熟悉的收貨地址還好說,但是如果給朋友買東西的話,地址比較陌生,就要花費比較多的時間精力去查找。

 

底部列表

這種方式的使用場景和 Picker 類似。其不同的地方是 Picker 使用的是滾輪聯動的形式,所有的選項可以同時進行選擇,而底部列表具有一定的限制條件,用戶必須選擇完一項才可以選擇下一項。

  • 優點:這種方式不容易誤觸,而且用戶的的注意力比較集中。頁面可顯示的內容更多,可以減少用戶的查找時間。

以京東為例,它和有贊一樣,用戶也分布在全國各地,添加收貨地址需要依次選擇省-市-區縣,所以使用了這種方式。

 

頁面跳轉

采用獨立頁面的設計方式,然后再進行省市區之間的跳轉。它適用于層級較少,但每個層級選項數量比較多的場景。

  • 優點:頁面可展示的內容是最多的,而且用戶最容易集中注意力。
  • 缺點:頁面需要來回跳轉,操作相對復雜,而且它沒有把用戶已選擇的內容顯示出來,反饋不直觀。

舊版本的微信中就使用了這種樣式,它的添加地址功能為了讓用戶使用小程序時方便調取。這種方式頁面面積大,顯示的地址信息非常多,翻幾頁就都能找到,不用像 Picker 那樣需要滑很長時間,但是一旦選錯了就需要返回上一個頁面重新選擇,比較麻煩。

 

地圖+附近位置

頁面上部分是地圖,下部分是附近的地址。這種方式適用于需要地圖定位并顯示附近相關位置信息的場景。

  • 優點:上部分的地圖定位讓數據可視化,用戶和附近相關的位置信息更加直觀;下部分羅列出了一些附近的位置供用戶選擇,省去了選擇省市區的步驟。
  • 缺點:給出的地址選項很多時候并不能滿足需求。

上圖中,餓了么和盒馬的產品目標分別是讓用戶在自己平臺購買外賣和生鮮。它們都屬于線下短距離送貨,使用這種方式,用戶可以直觀地看到自己的位置,以及附近熟悉的場景,而且可以省去選擇省、市、區的步驟。

需要注意的是:很多時候系統提供的地址一般都是附近的小區名字、大樓名字或者學校商店之類的,送貨的人員并不清楚具體的樓層和樓號,所以還需要填寫更加詳細的地址信息。

 

列表 + 平鋪

頁面上部分以平鋪的方式呈現,下部分以列表的方式呈現。這種方法適用于選項多達幾十到幾千,其中有些選項特別常用,且用戶量較大的場景。

  • 優點:集合了多種篩選功能,既有搜索導航,又有 A-Z 字母導航,還有常用選項導航。用戶使用時可以根據自己的需求選擇適合自己的方式,從而達到快速定位的目的,相較于前幾種方法,它的功能更加全面。
  • 缺點:只能選擇單一的城市,不能選擇詳細的地址。

上圖中的三個頁面里都列出了全國的所有城市,選項特別的多,而且用戶選擇當前城市或者熱門城市的幾率比較大,所以使用了這種方式。

 

總結

今天主要分享的一件事是不同的地址選擇器分別適合哪些場景,我總結了五點是:

  • 1. 底部 Picker:系統自帶,兼容性好,開發成本低。
  • 2. 底部列表:不容易誤觸,頁面使用率比 Picker 高,可顯示的內容更多,用戶的注意力比較集中。
  • 3. 頁面跳轉:它的頁面利用率最高,用戶最容易集中注意力。
  • 4. 地圖+附近位置:數據可視化讓用戶和附近相關的位置信息更加直觀。
  • 5. 列表+平鋪:集合了多種篩選功能,功能全面,用戶可以根據自己的需求選擇適合自己的方式,從而快速定位。

 

參考引文:《App中地址選擇功能解析》《地址選擇器的五大類型解析》《這個控件叫:A-Z index/字母索引導航》

《這個控件叫:Picker/選擇器/拾取器》

《地圖定位知多少》

 

原文地址:海鹽社(公眾號)

作者:青山

轉載請注明:辽宁35选7开奖哪个台 » 你應該知道的五種地址選擇器

登錄收藏
 
你可能喜歡的:
圓角矩形背后的含義|深度解析圓角矩形背后的含義|深度解析
交互基礎——頁面加載方式交互基礎——頁面加載方式
一篇文章讀懂交互設計7大定律一篇文章讀懂交互設計7大定律
音頻 | 開屏頁設計,看這篇就夠了!音頻 | 開屏頁設計,看這篇就夠了!
【UI&UX案例分析】解密停車App(Pazi)的“前世今生”【UI&UX案例分析】解密停車App(Pazi)的“前世今生”
產品體驗設計-交互篇(一)產品體驗設計-交互篇(一)
PRD分享:「網易云音樂-評論??欏共沸棖笪牡?/span>
Material Design Environment Surfaces 界面Material Design Environment Surfaces 界面
Material Design Foundation overview 概述Material Design Foundation overview 概述
iOS13:交互上都有哪些更新?iOS13:交互上都有哪些更新?
?