資源描述:
《設(shè)計實戰(zhàn)|城市指南網(wǎng)站著陸頁是這樣設(shè)計出來的》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、設(shè)計實戰(zhàn)|城市指南網(wǎng)站著陸頁是這樣設(shè)計出來的 今天咱們要聊的是“城市指南”(BigCityGuide)網(wǎng)站這一概念設(shè)計案例研究。 有人說,世界是一本書,不愿遠行的人只能讀到其中的一頁。的確,旅行是我們生命中最有意義的幾件事之一,其間我們有機會看見新的風景,遭遇新的事情,結(jié)實新的朋友,獲得珍貴的人生經(jīng)歷。更重要的是,一次愉悅的旅行能夠為生活注入能量,獲得非同凡響的靈感。今天,旅行比起過去更加方便,其中網(wǎng)絡(luò)也扮演了極其重要的角色?;ヂ?lián)網(wǎng)將不同國家和地區(qū)的各種信息散步在整個網(wǎng)絡(luò)的每一個角落,當你準備出行的時候,只需要稍加搜集就能制定出一個不錯的旅行方案。 和許多設(shè)計師一樣,來自Tu
2、bikStudio的設(shè)計師TaniaBashkatova也熱衷于穿梭于不同的城市,體驗不同的風情,享受不一樣的生活。也正是因此,她對于如何將城市的風情和自然的體驗結(jié)合起來呈現(xiàn)給用戶,有自己獨到的想法。而這也促成了今天咱們要聊的“城市指南”(BigCityGuide)網(wǎng)站這一概念設(shè)計案例研究?! ∪蝿?wù) 設(shè)計“城市指南”的著陸頁,包含其中主要的UI界面,確保新用戶引導(dǎo)流程中的整個用戶體驗足夠優(yōu)秀,引導(dǎo)用戶了解它的基本功能?! ≡O(shè)計過程 “城市指南”(BCG)是TubikStudio的UI星期五活動中的首個項目,想必在Dribbble上關(guān)注了TubikStudio的朋友們都知道我們的這一
3、傳統(tǒng)活動。設(shè)計是在UI星期五活動中將會有一整天的時間來創(chuàng)建一個特定的概念設(shè)計項目,這個項目會有特定的要求,同時設(shè)計師也可以自由地將自己的想法和激情融入其中?! 《@次的活動當中,概念設(shè)計項目所包含的任務(wù),是讓設(shè)計師整合資源設(shè)計出一套著陸頁,為用戶提供全世界各地的主要城市的信息。在著陸頁設(shè)計中,設(shè)計師通常能夠更好地將背景圖片的信息呈現(xiàn)能力凸顯出來。而Tania打算為每個城市挑選一張足以傳達情緒和氛圍的照片,并圍繞它來做整個視覺設(shè)計。所以,最終她選取的解決方案是在著陸頁展示3個城市,以橫向滾動輪播圖的形式展現(xiàn),并挑選一套動效來強化展示效果和體驗。Tania選取了三個著名的國家首都,而接下來她要
4、考慮的是如何將這三個風格不同的城市統(tǒng)一到一套視覺設(shè)計中來?! 〕鞘兄改纤故镜牡谝粋€城市是柏林。這個城市有許多值得一看的景點,這也使得圖片的挑選工作量更大了。為了呈現(xiàn)出對的感覺,Tania最后挑了兩張圖片作為備選?! ‰m然這兩張圖片都有這不錯的表現(xiàn)力,但是后者能夠更好地表現(xiàn)柏林這個城市的堅實感和未來感,Tania也更加青睞這張圖片。城市的名稱位于整個排版設(shè)計的中心處,風格大膽有力,可讀性良好。柏林的名字和巨塔尖銳的頂端相互接駁,而文字和塔尖相互遮蓋的關(guān)系,讓他們看起來仿佛客觀存在于塔尖之上,呈現(xiàn)出一種獨特的真實感?! 〉诙€城市選擇了馬德里。作為西班牙首都,馬德里延續(xù)自中世紀的建筑
5、群是它最有特色的部分之一。但是這并不正確。馬德里是現(xiàn)代歐洲的商業(yè)中心之一,所以Tania決定將它現(xiàn)代化的一面呈現(xiàn)出來?! 〔贿^,將現(xiàn)代風格優(yōu)先納入到考慮范圍內(nèi),是出于整體設(shè)計一致性的考量,在排版設(shè)計上,也延續(xù)了柏林頁面的設(shè)計,城市的名字和圖片中的建筑再次融為一體。副標題的文案同樣進行了精心的設(shè)計,呈現(xiàn)出這個城市活力四射的特征。而這個仿佛漩渦的回廊成為了最終的選擇。 不過在這個地方,設(shè)計師犯了一個有趣的錯誤。西班牙首府名為馬德里沒錯,但是美國的愛荷華州也有個馬德里,而這張旋轉(zhuǎn)走廊的圖其實是來自美國而非西班牙,如果沒有去過那個地方,單靠互聯(lián)網(wǎng)有時候確實很容易犯錯。當然,總是有修改機會
6、的?! ∽詈笠粋€城市,Tania選擇了斯德哥爾摩。這同樣是一個現(xiàn)代氣息濃郁且擁有足夠文化積淀的城市。斯德哥爾摩同樣是一個個性十足的地方,個性十足的城市風景讓Tania挑花了眼,她嘗試了許多不同的圖片作為視覺設(shè)計的基礎(chǔ)?! ∪欢?,所有的城市照片都無法傳達出斯德哥爾摩的獨特之處,作為一個氣質(zhì)突出的北歐城市,斯德哥爾摩和大自然一直有著親密的關(guān)系,而這也使得Tania決定嘗試探索斯德哥爾摩自然的一面?! ∵@是斯德哥爾摩的頁面最終的版本。頁面的排布和之前的兩個基本一致。壯美的北歐森林呈現(xiàn)出來了斯德哥爾摩的另外一個面孔?! ≌麄€著陸頁的設(shè)計采用了用戶易于識別的排版布局,和清晰的層次結(jié)構(gòu)。整個頁
7、面的左上角是可點擊的LOGO,點擊它可以隨時回到首頁。導(dǎo)航菜單允許用戶快速瀏覽完整的城市列表,查看博客,或者直接點開地圖。除此之外,注冊服務(wù)和搜索功能這些基本的功能也都是存在的?! ≌麄€城市指南最關(guān)鍵的部分,其實是這些城市的描述性的文案。由于頁面的整體設(shè)計突出的是城市的氣質(zhì)和名稱,所以城市的簡介主要是依靠這些文案來呈現(xiàn)。而文本下面的CTA按鈕則為用戶提供了閱讀更多內(nèi)容的機會。此外,用戶還能通過底部的社交網(wǎng)絡(luò)按鈕來關(guān)注網(wǎng)站