六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

設(shè)計(jì)師的角度分析產(chǎn)品改版-高德地圖_10.0.3

2019-8-31    ui設(shè)計(jì)分享達(dá)人

前言


Hello~各位酷友,之前高德地圖做了一次蠻大的改版,于是這周我就抽空給大家?guī)?lái)這個(gè)系列的第二篇改版分析。還沒(méi)有看過(guò)第一篇的也歡迎去看看。廢話(huà)不多說(shuō),直接進(jìn)入正題。還是一樣,閱讀時(shí)長(zhǎng)大約15分鐘,泡杯咖啡,進(jìn)入專(zhuān)注狀態(tài)就往下吧。



一、改版概述


對(duì)比版本號(hào):9.1.0(舊)→  10.0.3(新)

測(cè)試機(jī)型:iPhone7

高德這次更新距離上一次已經(jīng)有一個(gè)多月的時(shí)間了,版本號(hào)也有了一個(gè)大的跨越,給我一種憋大招的感覺(jué)。以下,我會(huì)從這四個(gè)方面進(jìn)行說(shuō)明:

(1)首頁(yè)框架

(2)背板內(nèi)容

(3)常用出行方式選擇

(4)發(fā)現(xiàn)頁(yè)


跟之前一樣,還是主要說(shuō)明有改動(dòng)的部分,以框架層和視覺(jué)層為主要切入點(diǎn),帶一小部分產(chǎn)品功能上的分析。



二、首頁(yè)框架


這次改版用到了一個(gè)新的控件,底部上拉式背板(不知道這個(gè)控件有沒(méi)有更正式的名稱(chēng),暫且這么叫它),有的設(shè)計(jì)師朋友可能在一些概念性作品里見(jiàn)過(guò)類(lèi)似的控件,這次高德使用它說(shuō)明了這個(gè)控件是落地的。

這個(gè)控件之所以受歡迎有以下原因:

首先,它的操作符合我們的手勢(shì)操作規(guī)律及擬物原則,交互方式一目了然。平時(shí)沒(méi)事就這樣滑上滑下都是一個(gè)爽點(diǎn)。

其次,它可以設(shè)計(jì)出不同高度的固定狀態(tài),如下圖就有三種。這樣能地節(jié)省頁(yè)面空間,承載大量的隱形內(nèi)容,同時(shí)區(qū)分不同內(nèi)容的優(yōu)先級(jí)。


另外,這次改版還加入了常見(jiàn)的底部標(biāo)簽欄,配合背板,對(duì)首頁(yè)的內(nèi)容框架布局進(jìn)行了一個(gè)規(guī)整,具體我們看一看下面這張圖:


(1)紅色:原來(lái)頂部的搜索欄調(diào)整到了默認(rèn)狀態(tài)的底部背板上。搜索欄放在底部的方式在目前還是比較大膽的設(shè)計(jì),但對(duì)于地圖應(yīng)用而言卻非常適合。首先搜索欄肯定是整個(gè)應(yīng)用交互最頻繁的控件,放在底部很大程度上提高了用戶(hù)點(diǎn)擊的便捷性,特別對(duì)于單手握持的用戶(hù)。


(2)紫色:原來(lái)底部的附近按鈕改成了便簽欄的第二個(gè)標(biāo)簽。即發(fā)現(xiàn)頁(yè)。這個(gè)改變節(jié)省了大量的頁(yè)面空間,舊版做成底部通欄按鈕層級(jí)確實(shí)過(guò)高了,同時(shí)天氣溫度的標(biāo)識(shí)也比較雞肋。


(3)黃色:原來(lái)最難點(diǎn)擊的圖標(biāo)按鈕改成了現(xiàn)在最易點(diǎn)擊的“我的”標(biāo)簽,提高了這個(gè)入口的辨識(shí)度。


(4)綠色:舊版首頁(yè)分散的懸浮按鈕統(tǒng)一到了右邊,同時(shí)樣式都改成了圓形的底板。略微降低了路線(xiàn)按鈕的層級(jí)。這里有一個(gè)層級(jí)區(qū)分的設(shè)計(jì)小細(xì)節(jié),下方常用的定位與路線(xiàn)按鈕會(huì)比上方消息與地圖類(lèi)別按鈕大10pt。


(5)灰色:原來(lái)右邊的一些懸浮小工具按鈕及快捷地址設(shè)置按鈕都從首頁(yè)去除,移動(dòng)到了底部背板的隱形內(nèi)容里。這樣一來(lái)地圖的顯示區(qū)域也隨之增加了,被移走的按鈕會(huì)在后文提到。


小結(jié):總體而言,首頁(yè)的這次大改,主要是把交互區(qū)域都調(diào)整到屏幕的右下方。我猜測(cè)目的應(yīng)該是考慮到了很多用戶(hù)使用地圖應(yīng)用時(shí)是單手握持,處于邊走邊看的狀態(tài),增加用戶(hù)的交互效率。另外,標(biāo)簽欄的使用也增加了入口的辨識(shí)度。在視覺(jué)感受上,新版首頁(yè)會(huì)比舊版更簡(jiǎn)潔、清晰,同時(shí)具有結(jié)構(gòu)性。


三、背板內(nèi)容


接下來(lái)要說(shuō)的就是背板上的內(nèi)容,首先我們還是從內(nèi)容布局上分析一下。


(1)搜索欄,在前面已經(jīng)提到過(guò)


(2)工具箱,工具箱在這次改版中也是一個(gè)主要的更新點(diǎn)。在舊版中,工具箱的層級(jí)是很弱的,在我的頁(yè)面里的二屏才能找到。這次移動(dòng)到主頁(yè)的背板中,顯然也是提高了它的觸達(dá)率。


同時(shí),原工具箱中的工具較少。在新版中,工具箱中加入了很多的新功能,我數(shù)了數(shù),新版比舊版多了16個(gè)功能。排列上使用了歸類(lèi)式的圖片列表。在這里也有一個(gè)設(shè)計(jì)上的小細(xì)節(jié),頂部我的工具的圖標(biāo)樣式與下方的圖標(biāo)樣式是有區(qū)分的,頂部圖標(biāo)統(tǒng)一加上了圓形彩色底托進(jìn)行反白,突出了頂部圖標(biāo)的層級(jí)。具體參看下圖:


另外,工具箱調(diào)整到首頁(yè)以及加入的很多新功能會(huì)跟下面要講的另一點(diǎn)更新有關(guān)。


(3)常用地點(diǎn)

即舊版的地點(diǎn)懸浮圖標(biāo)改成了現(xiàn)在的列表式按鈕


(4)新手引導(dǎo)教程

點(diǎn)進(jìn)去就是引導(dǎo)頁(yè),通過(guò)動(dòng)效插畫(huà)的形式向用戶(hù)說(shuō)明了本次更新的幾大要點(diǎn)。


小結(jié):如同上文所說(shuō),背板的使用是本次更新的主要承載區(qū),綜合考慮了手勢(shì)交互、內(nèi)容布局、內(nèi)容優(yōu)先級(jí)等因素,非常值得我們進(jìn)行學(xué)習(xí)與參考。


 四、常用出行方式選擇


在更新后首次打開(kāi)應(yīng)用時(shí),有一段引導(dǎo)動(dòng)畫(huà),主要告訴用戶(hù)選擇常用的出行方式,分別是公交與駕車(chē)。因?yàn)閯?dòng)畫(huà)較長(zhǎng)無(wú)法上傳,有興趣的朋友可以自己去看看,引導(dǎo)動(dòng)畫(huà)也是近期比較火的一種設(shè)計(jì)方式。

而選擇不同的出行方式后,地圖樣式與工具箱的默認(rèn)推薦工具也會(huì)有區(qū)別。

可以看到,選擇公交后,地圖里會(huì)主要突出公交站的圖標(biāo),并弱化其它圖標(biāo),讓用戶(hù)明確的知道哪里有公交站。


小結(jié):讓用戶(hù)選擇常用出行方式充分考慮了用戶(hù)的出行場(chǎng)景,讓用戶(hù)主動(dòng)選擇出行方式進(jìn)行用戶(hù)劃分,并據(jù)此提供更精準(zhǔn)的服務(wù)內(nèi)容??梢钥闯觯谙鄬?duì)成熟的產(chǎn)品中,功能上的創(chuàng)新是一部分,但是能將已有的內(nèi)容更貼切地服務(wù)于用戶(hù)也能創(chuàng)造出很大的價(jià)值,并且能讓產(chǎn)品更具備競(jìng)爭(zhēng)力。


五、發(fā)現(xiàn)頁(yè)


周邊推薦時(shí)地圖應(yīng)用最能收獲價(jià)值的內(nèi)容板塊,在這次更新中,發(fā)現(xiàn)頁(yè)面不僅是入口做了調(diào)整,二級(jí)頁(yè)面里的內(nèi)容也有一定改變。兩版的頂部區(qū)域內(nèi)容是一樣的,都是一個(gè)搜索框加宮格式分類(lèi)入口。區(qū)別在于下方的瀑布流內(nèi)容帖子。舊版使用了兩個(gè)分段控件進(jìn)行了更詳細(xì)的分類(lèi),但新版做了減法,把所有的選擇器都去掉了,同時(shí)也去掉了商戶(hù)評(píng)分以及營(yíng)業(yè)時(shí)間信息,僅保留了距離位置信息。另外使用了卡片區(qū)分不同商戶(hù)內(nèi)容。


小結(jié):簡(jiǎn)化頁(yè)面的好處在于有效地提高了瀏覽效率。而且仔細(xì)思考一下就會(huì)發(fā)現(xiàn)舊版的兩個(gè)分段選擇控件確實(shí)略顯多余。頂部的宮格式分類(lèi)入口就足以滿(mǎn)足用戶(hù)的搜索需求,做過(guò)多的分類(lèi)反而會(huì)讓用戶(hù)困擾。但我個(gè)人認(rèn)為評(píng)分信息還是可以保留的,畢竟是推薦內(nèi)容,能給用戶(hù)提供很大的參考價(jià)值。


六、總結(jié)


以上就是高德地圖本次更新的主要內(nèi)容。在這次更新中,我認(rèn)為最值得我們學(xué)習(xí)的就是它整個(gè)改版邏輯是非常清晰的。從用戶(hù)場(chǎng)景出發(fā),考慮到用戶(hù)的操作手勢(shì)以及內(nèi)容優(yōu)先級(jí),具體落實(shí)到了頁(yè)面的布局。大家也可以從頁(yè)面布局再反向思考到它的改版目的。多重復(fù)幾遍就能更清晰地理解這次改版的核心。

轉(zhuǎn)自-站酷

藍(lán)藍(lán)設(shè)計(jì)www.wnxcall.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔