做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

解讀地圖設(shè)計(jì)

2020-11-3    資深UI設(shè)計(jì)者

通過(guò)閱讀“地圖基礎(chǔ)知識(shí)及通用設(shè)計(jì)原則”,相信大家已經(jīng)對(duì)地圖及其設(shè)計(jì)有了一定認(rèn)知,本篇我們來(lái)了解下如何實(shí)踐。


Part 1. 上篇要點(diǎn)回顧


- 核心設(shè)計(jì)原則

  • 符合制圖學(xué)和公眾認(rèn)知

  • 保證識(shí)別度

  • 清晰有層次

  • 細(xì)分地圖模式

  • 具有品牌特性



- 元素分類

  • 點(diǎn)元素:地名、POI等

  • 線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等

  • 面元素:陸地、草地、湖泊海洋、AOI等

*名詞解釋:POI, Point of Information的縮寫,即“信息點(diǎn)”。一個(gè)POI可以是一棟房子、一個(gè)商鋪

*名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區(qū)域狀的地理實(shí)體,如醫(yī)院、小區(qū)等


Part 2. 設(shè)計(jì)背景


為了實(shí)現(xiàn)“讓出行更美好”的使命,今年乘客端新增了自駕導(dǎo)航。地圖貫穿了該產(chǎn)品的全流程,且首頁(yè)、路線規(guī)劃頁(yè)、導(dǎo)航中等場(chǎng)景用戶需求都不相同。然而已有的模式,從配色到信息展現(xiàn),都不符合首頁(yè)地圖的場(chǎng)景需求,于是需要重新設(shè)計(jì)。


以下詳解設(shè)計(jì)過(guò)程。


Part 3. 設(shè)計(jì)落地


- 設(shè)計(jì)關(guān)鍵詞推導(dǎo)


根據(jù)自駕導(dǎo)航的目標(biāo),拆解出了首頁(yè)地圖的設(shè)計(jì)目標(biāo):

  • 構(gòu)建適合自駕場(chǎng)景的瀏覽地圖

  • 提升地圖體驗(yàn)與設(shè)計(jì)品質(zhì),提高用戶滿意度和好感度

  • 打造具有滴滴品牌調(diào)性的地圖


用戶需求及習(xí)慣表明:在首頁(yè)主要是明確自身定位、查看其他位置信息,且視距基本是手持距離。那么“構(gòu)建適合自駕場(chǎng)景的瀏覽地圖”關(guān)鍵點(diǎn)就在于識(shí)別度,更好的展示重點(diǎn)信息,保證用戶讀圖效率。


“提升地圖體驗(yàn)與設(shè)計(jì)品質(zhì),打造具有滴滴品牌調(diào)性的地圖”的目標(biāo),可以通過(guò)視覺(jué)手段實(shí)現(xiàn)。在瀏覽場(chǎng)景,用戶使用地圖的時(shí)間不固定,為避免長(zhǎng)時(shí)間瀏覽產(chǎn)生疲憊感,地圖配色需要更舒適,對(duì)比度也要適中。這點(diǎn)也與自駕導(dǎo)航整體的設(shè)計(jì)關(guān)鍵詞“輕量”不謀而合,于是推導(dǎo)出了關(guān)鍵詞輕量化、品牌感


- 設(shè)計(jì)地圖方案


明確設(shè)計(jì)關(guān)鍵詞后,開(kāi)始著手設(shè)計(jì)。關(guān)鍵詞中的輕量化、品牌感基本上決定了這款地圖的調(diào)性,識(shí)別度則重點(diǎn)影響信息展現(xiàn)。上篇提到,設(shè)計(jì)時(shí)可以把地圖元素拆分成點(diǎn)、線、面三類,按照由大到小的順序設(shè)計(jì),即先確定配色,再設(shè)計(jì)文字圖標(biāo)等信息,以免元素過(guò)多互相干擾。


1、設(shè)計(jì)整體配色


輕量化傳達(dá)輕量化的感受需要控制取色范圍,于是我們制定了顏色使用規(guī)則(下圖)。


  • 色相:以冷色為主,醫(yī)院(紅色系)等具有公眾認(rèn)知的顏色可除外;顏色從品牌色系中選取

  • 明度:限定顏色的明度范圍,選取中間-略高的部分,平衡顏色對(duì)比度

  • 飽和度:避免使用高飽和度的顏色,保證配色的舒適感


通過(guò)分析顏色,我們對(duì)傳達(dá)輕量化的感受有了大致的把握。那么品牌感如何體現(xiàn)呢?


品牌感具有品牌調(diào)性的地圖能更好的融入產(chǎn)品設(shè)計(jì)風(fēng)格,也能夠區(qū)別于競(jìng)品,這在滴滴全流程的設(shè)計(jì)中都十分重要。在地圖上我們主要用顏色及圖標(biāo)繪制表達(dá)品牌調(diào)性。


  • 顏色:結(jié)合輕量化的用色規(guī)則,從品牌色系中選取,使地圖配色與其他組件更加融合

  • 圖標(biāo)繪制:沿用滴滴設(shè)計(jì)規(guī)范中的圖標(biāo)繪制語(yǔ)言,如圓角、簡(jiǎn)單形狀等,拉齊視覺(jué)感受




最終根據(jù)“輕量化”和“品牌感”這兩個(gè)關(guān)鍵詞,設(shè)計(jì)出了地圖配色的效果圖。



2、設(shè)計(jì)地圖信息


配色確定后,即可開(kāi)啟POI圖標(biāo)+文字、AOI文字、道路文字、以及各類行政區(qū)劃文字的設(shè)計(jì)。


識(shí)別度設(shè)計(jì)地圖信息時(shí),保證基本識(shí)別度的方式,可通過(guò)文字顏色、字號(hào)大小、圖標(biāo)繪制等實(shí)現(xiàn)。但是要做到清晰有重點(diǎn),就要關(guān)注信息間的層次感


以POI信息為例。回顧下此時(shí)的用戶需求:了解自身定位、查看其他位置信息。從這點(diǎn)可以鎖定第一展示優(yōu)先級(jí)應(yīng)為POI——地圖上定位最精準(zhǔn)的信息種類。而已有的圖標(biāo)識(shí)別度較弱,無(wú)法滿足需求,于是我們進(jìn)行了重繪。通過(guò)用色表達(dá)圖標(biāo)類型、首選有公眾認(rèn)知的載體作為表意、增強(qiáng)顏色飽和度及對(duì)比度,搭配文字顏色,從視覺(jué)上把POI信息提升至第一順位。


用同樣的方法,根據(jù)重要程度,通過(guò)設(shè)計(jì)拉開(kāi)了信息的視覺(jué)層級(jí):POI>道路名稱>AOI名稱>行政區(qū)劃信息



3、整體調(diào)整


在完成了配色和信息設(shè)計(jì)后,我們需要整合所有元素統(tǒng)一調(diào)整。此時(shí),通常會(huì)出現(xiàn)元素互相干擾的問(wèn)題,我們可以回歸到場(chǎng)景需求中解決此類問(wèn)題,按照信息的重要程度調(diào)整,最終形成完整方案。



Part 4. 設(shè)計(jì)驗(yàn)證


地圖方案落地后,我們會(huì)關(guān)注設(shè)計(jì)品質(zhì)的驗(yàn)證。由于地圖的工具屬性,驗(yàn)證其設(shè)計(jì)品質(zhì)及用戶滿意度一直是行業(yè)內(nèi)較困難的事情。地圖既是一種圖形語(yǔ)言,又承載了大量的信息,且需符合場(chǎng)景需求,要驗(yàn)證的內(nèi)容非常多。因此我們建立了地圖評(píng)測(cè)模型,從美觀度、識(shí)別度、讀圖效率等多維度進(jìn)行評(píng)測(cè),量化地圖設(shè)計(jì)品質(zhì)。


通過(guò)對(duì)自駕導(dǎo)航首頁(yè)地圖的兩輪調(diào)研,我們回收了大量有效結(jié)論,如用戶對(duì)道路等級(jí)的關(guān)注程度、如何使用AOI信息等等。新版地圖在美觀度、識(shí)別度等方面均得到了用戶的認(rèn)可。


了解用戶的聲音,能更好的幫助我們深耕地圖設(shè)計(jì)領(lǐng)域、全力推動(dòng)地圖體驗(yàn)優(yōu)化。



Part 5. 未來(lái)形態(tài)暢想


當(dāng)前科技發(fā)展迅速,近些年出現(xiàn)的HUD、AR等導(dǎo)航,用現(xiàn)實(shí)世界的畫面代替了地圖,不需要轉(zhuǎn)換思維、記憶地圖語(yǔ)言,讓人與世界的連接更輕松便捷。我們不妨順著這個(gè)趨勢(shì)大膽的暢想一番,在未來(lái)的某天,世界的數(shù)據(jù)會(huì)植入我們腦中,不再有陌生的地方,現(xiàn)有的地圖形態(tài)也許會(huì)消失,因?yàn)樗驮谖覀兡_下。


文章來(lái)源:站酷    作者:CDX創(chuàng)意設(shè)計(jì)中心


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

日歷

鏈接

個(gè)人資料

存檔