有人說(shuō)，世界是一本書煞额，不愿遠(yuǎn)行的人只能讀到其中的一頁(yè)。的確赤屋，旅行是我們生命中最有意義的幾件事之一立镶，其間我們有機(jī)會(huì)看見(jiàn)新的風(fēng)景，遭遇新的事情类早，結(jié)實(shí)新的朋友媚媒，獲得珍貴的人生經(jīng)歷。更重要的是涩僻，一次愉悅的旅行能夠?yàn)樯钭⑷肽芰跨哉伲@得非同凡響的靈感。今天逆日，旅行比起過(guò)去更加方便嵌巷，其中網(wǎng)絡(luò)也扮演了極其重要的角色∈页椋互聯(lián)網(wǎng)將不同國(guó)家和地區(qū)的各種信息散步在整個(gè)網(wǎng)絡(luò)的每一個(gè)角落搪哪，當(dāng)你準(zhǔn)備出行的時(shí)候，只需要稍加搜集就能制定出一個(gè)不錯(cuò)的旅行方案坪圾。
和許多設(shè)計(jì)師一樣晓折，來(lái)自 Tubik Studio 的設(shè)計(jì)師 Tania Bashkatova 也熱衷于穿梭于不同的城市，體驗(yàn)不同的風(fēng)情兽泄，享受不一樣的生活漓概。也正是因此，她對(duì)于如何將城市的風(fēng)情和自然的體驗(yàn)結(jié)合起來(lái)呈現(xiàn)給用戶病梢，有自己獨(dú)到的想法胃珍。而這也促成了今天咱們要聊的“城市指南”（Big City Guide）網(wǎng)站這一概念設(shè)計(jì)案例研究。
任務(wù)
設(shè)計(jì)“城市指南”的著陸頁(yè)蜓陌，包含其中主要的UI界面觅彰，確保新用戶引導(dǎo)流程中的整個(gè)用戶體驗(yàn)足夠優(yōu)秀，引導(dǎo)用戶了解它的基本功能钮热。
設(shè)計(jì)過(guò)程
“城市指南”（BCG）是Tubik Studio 的 UI星期五活動(dòng)中的首個(gè)項(xiàng)目缔莲，想必在Dribbble 上關(guān)注了Tubik Studio 的朋友們都知道我們的這一傳統(tǒng)活動(dòng)。設(shè)計(jì)是在 UI 星期五 活動(dòng)中將會(huì)有一整天的時(shí)間來(lái)創(chuàng)建一個(gè)特定的概念設(shè)計(jì)項(xiàng)目霉旗，這個(gè)項(xiàng)目會(huì)有特定的要求痴奏，同時(shí)設(shè)計(jì)師也可以自由地將自己的想法和激情融入其中蛀骇。
而這次的活動(dòng)當(dāng)中，概念設(shè)計(jì)項(xiàng)目所包含的任務(wù)读拆，是讓設(shè)計(jì)師整合資源設(shè)計(jì)出一套著陸頁(yè)擅憔，為用戶提供全世界各地的主要城市的信息。在著陸頁(yè)設(shè)計(jì)中檐晕，設(shè)計(jì)師通常能夠更好地將背景圖片的信息呈現(xiàn)能力凸顯出來(lái)暑诸。而Tania 打算為每個(gè)城市挑選一張足以傳達(dá)情緒和氛圍的照片，并圍繞它來(lái)做整個(gè)視覺(jué)設(shè)計(jì)辟灰。所以个榕，最終她選取的解決方案是在著陸頁(yè)展示3個(gè)城市，以橫向滾動(dòng)輪播圖的形式展現(xiàn)芥喇，并挑選一套動(dòng)效來(lái)強(qiáng)化展示效果和體驗(yàn)西采。Tania 選取了三個(gè)著名的國(guó)家首都，而接下來(lái)她要考慮的是如何將這三個(gè)風(fēng)格不同的城市統(tǒng)一到一套視覺(jué)設(shè)計(jì)中來(lái)继控。
城市指南所展示的第一個(gè)城市是柏林械馆。這個(gè)城市有許多值得一看的景點(diǎn)，這也使得圖片的挑選工作量更大了武通。為了呈現(xiàn)出對(duì)的感覺(jué)霹崎，Tania 最后挑了兩張圖片作為備選。
雖然這兩張圖片都有這不錯(cuò)的表現(xiàn)力冶忱，但是后者能夠更好地表現(xiàn)柏林這個(gè)城市的堅(jiān)實(shí)感和未來(lái)感尾菇，Tania 也更加青睞這張圖片。城市的名稱位于整個(gè)排版設(shè)計(jì)的中心處囚枪，風(fēng)格大膽有力错沽，可讀性良好。柏林的名字和巨塔尖銳的頂端相互接駁眶拉，而文字和塔尖相互遮蓋的關(guān)系，讓他們看起來(lái)仿佛客觀存在于塔尖之上憔儿，呈現(xiàn)出一種獨(dú)特的真實(shí)感忆植。
第二個(gè)城市選擇了馬德里。作為西班牙首都谒臼，馬德里延續(xù)自中世紀(jì)的建筑群是它最有特色的部分之一朝刊。但是這并不正確。馬德里是現(xiàn)代歐洲的商業(yè)中心之一蜈缤，所以Tania 決定將它現(xiàn)代化的一面呈現(xiàn)出來(lái)拾氓。
不過(guò)，將現(xiàn)代風(fēng)格優(yōu)先納入到考慮范圍內(nèi)底哥，是出于整體設(shè)計(jì)一致性的考量咙鞍，在排版設(shè)計(jì)上房官，也延續(xù)了柏林頁(yè)面的設(shè)計(jì)，城市的名字和圖片中的建筑再次融為一體续滋。副標(biāo)題的文案同樣進(jìn)行了精心的設(shè)計(jì)翰守，呈現(xiàn)出這個(gè)城市活力四射的特征。而這個(gè)仿佛漩渦的回廊成為了最終的選擇疲酌。
不過(guò)在這個(gè)地方蜡峰，設(shè)計(jì)師犯了一個(gè)有趣的錯(cuò)誤。西班牙首府名為馬德里沒(méi)錯(cuò)朗恳，但是美國(guó)的愛(ài)荷華州也有個(gè)馬德里湿颅，而這張旋轉(zhuǎn)走廊的圖其實(shí)是來(lái)自美國(guó)而非西班牙，如果沒(méi)有去過(guò)那個(gè)地方粥诫，單靠互聯(lián)網(wǎng)有時(shí)候確實(shí)很容易犯錯(cuò)油航。當(dāng)然，總是有修改機(jī)會(huì)的臀脏。
最后一個(gè)城市劝堪，Tania 選擇了斯德哥爾摩。這同樣是一個(gè)現(xiàn)代氣息濃郁且擁有足夠文化積淀的城市揉稚。斯德哥爾摩同樣是一個(gè)個(gè)性十足的地方秒啦，個(gè)性十足的城市風(fēng)景讓Tania 挑花了眼，她嘗試了許多不同的圖片作為視覺(jué)設(shè)計(jì)的基礎(chǔ)搀玖。
然而余境，所有的城市照片都無(wú)法傳達(dá)出斯德哥爾摩的獨(dú)特之處，作為一個(gè)氣質(zhì)突出的北歐城市灌诅，斯德哥爾摩和大自然一直有著親密的關(guān)系芳来，而這也使得Tania 決定嘗試探索斯德哥爾摩自然的一面。
這是斯德哥爾摩的頁(yè)面最終的版本猜拾。頁(yè)面的排布和之前的兩個(gè)基本一致即舌。壯美的北歐森林呈現(xiàn)出來(lái)了斯德哥爾摩的另外一個(gè)面孔。
整個(gè)著陸頁(yè)的設(shè)計(jì)采用了用戶易于識(shí)別的排版布局挎袜，和清晰的層次結(jié)構(gòu)顽聂。整個(gè)頁(yè)面的左上角是可點(diǎn)擊的LOGO，點(diǎn)擊它可以隨時(shí)回到首頁(yè)盯仪。導(dǎo)航菜單允許用戶快速瀏覽完整的城市列表紊搪，查看博客，或者直接點(diǎn)開(kāi)地圖全景。除此之外耀石，注冊(cè)服務(wù)和搜索功能這些基本的功能也都是存在的。
整個(gè)城市指南最關(guān)鍵的部分爸黄，其實(shí)是這些城市的描述性的文案滞伟。由于頁(yè)面的整體設(shè)計(jì)突出的是城市的氣質(zhì)和名稱揭鳞，所以城市的簡(jiǎn)介主要是依靠這些文案來(lái)呈現(xiàn)。而文本下面的CTA按鈕則為用戶提供了閱讀更多內(nèi)容的機(jī)會(huì)诗良。此外汹桦，用戶還能通過(guò)底部的社交網(wǎng)絡(luò)按鈕來(lái)關(guān)注網(wǎng)站的動(dòng)態(tài)。
整個(gè)著陸頁(yè)設(shè)計(jì)的最后一個(gè)階段的工作是由動(dòng)效設(shè)計(jì)師 Kirill Erokhin 來(lái)完成的鉴裹。
這些靜態(tài)的頁(yè)面有著不同的背景顏色舞骆，而在最終的展示性動(dòng)畫當(dāng)中，頁(yè)面底部背景挑選了一種于不同頁(yè)面都能相合的深藍(lán)色径荔。動(dòng)效的加入督禽，讓整個(gè)著陸頁(yè)的設(shè)計(jì)充滿了互動(dòng)感，而交互上設(shè)計(jì)師提供了多種不同的可能性：頂部的基督徒和底部的按鈕总处，為了讓用戶注意到它們狈惫，設(shè)計(jì)師給這些組件賦予了和整個(gè)網(wǎng)頁(yè)色調(diào)對(duì)比強(qiáng)烈的紅色。
正如同我們所看到的鹦马，盡管所有的城市的風(fēng)格不同胧谈，但是設(shè)計(jì)師盡量讓他們的頁(yè)面在設(shè)計(jì)上統(tǒng)一起來(lái)。這種和而不同的設(shè)計(jì)讓頁(yè)面的個(gè)性保存了下來(lái)荸频，又擁有了拓展的可能性菱肖。整個(gè)著陸頁(yè)靈活的構(gòu)造，讓它可以根據(jù)實(shí)際需求而進(jìn)行快速的調(diào)整旭从，功能的完整性則保證了它的實(shí)用性稳强。
原文作者：Tubik Studio
優(yōu)設(shè)：陳子木
