搜狐奧運(yùn)2012客戶端的設(shè)計(jì)進(jìn)化論

0 評(píng)論 12876 瀏覽 0 收藏 6 分鐘

2012年倫敦奧運(yùn)會(huì)在7月底已經(jīng)拉開(kāi)帷幕,這是一場(chǎng)力與美的集中綻放,更是激勵(lì)著一代人向著更高、更快、更強(qiáng)的奧運(yùn)精神而奮勇拼搏的平臺(tái)。而早在2個(gè)月之前,有這么一群人為了讓最新鮮的奧運(yùn)資訊呈現(xiàn)在用戶面前而開(kāi)始準(zhǔn)備并忙碌著。已記不清經(jīng)歷了多少調(diào)整與修正,回想整個(gè)過(guò)程如同一部進(jìn)化論,最終搜狐奧運(yùn)2012客戶端誕生了。

1、 手繪原型、風(fēng)格探索

搜狐奧運(yùn)1-2

2、 視覺(jué)設(shè)計(jì)

1) 版式&顏色

首頁(yè)設(shè)計(jì)一直是重中之重,最開(kāi)始靈感來(lái)源于倫敦奧運(yùn)會(huì)徽的不不規(guī)則的2012,所以一開(kāi)始探索設(shè)計(jì)時(shí)就著力往這個(gè)方向去嘗試。會(huì)徽選用藍(lán)、橙、綠、紅四種顏色,在最初的探索設(shè)計(jì)版本里,我們用這四種顏色融入app的設(shè)計(jì)中,但是我們發(fā)現(xiàn),四種顏色有些過(guò)于雜亂,也不利于視覺(jué)識(shí)別。

于是,我們嘗試先在版式與顏色識(shí)別上精簡(jiǎn)設(shè)計(jì),到三種顏色,再到最后只使用了紅、藍(lán)兩種顏色作為主色調(diào)。版式的設(shè)計(jì)嘗試也從具象的會(huì)徽形態(tài)到抽象出折線形態(tài),結(jié)合主色設(shè)計(jì),給人以倫敦奧運(yùn)延伸設(shè)計(jì)的整體感。

另外在設(shè)計(jì)中發(fā)現(xiàn),奧運(yùn)會(huì)徽原本的藍(lán)色與紅色在色相上是比較偏暗的,不太適合手機(jī)屏幕的視覺(jué)表現(xiàn),在經(jīng)過(guò)幾次嘗試之后,確定# 009bff;# f5268c作為客戶端實(shí)際使用顏色,這樣在整體上既與奧運(yùn)官方氛圍保持統(tǒng)一, 在實(shí)際的運(yùn)用中也更美觀耐看。

在搜狐奧運(yùn)2012的設(shè)計(jì)中,還有一項(xiàng)打破常規(guī)的就是以異形(其實(shí)也是來(lái)源于會(huì)徽的靈感)設(shè)計(jì)的導(dǎo)航,配合倫敦奧運(yùn)主視覺(jué)設(shè)計(jì)風(fēng)格,力求客戶端給人未在現(xiàn)場(chǎng)卻身臨其境的感受。

2) 死摳細(xì)節(jié)

還記得啟動(dòng)畫面里那個(gè)紙飛機(jī)嗎?它的靈感來(lái)源于“帶你看奧運(yùn)”的宣傳語(yǔ),自啟動(dòng)畫面飛入,落到引導(dǎo)第一頁(yè)的icon上方,讓等待變得有意思起來(lái)。當(dāng)時(shí)開(kāi)發(fā)時(shí)間緊,為了保證項(xiàng)目能按時(shí)上線,我們選用了技術(shù)上比較容易實(shí)現(xiàn)的直線加速度飛, 就這一個(gè)小動(dòng)畫,我們也嘗試了好幾種方案,最后選擇了“走走停?!钡摹帮w法”。

還有一個(gè)例子是2012獎(jiǎng)牌榜右上的中國(guó)獎(jiǎng)牌榜入口,最開(kāi)始想設(shè)計(jì)為國(guó)旗,但是考慮到整體協(xié)調(diào)性最后變更為文字“中國(guó)榜”。

獎(jiǎng)牌榜中金銀銅排列表項(xiàng),由文字改換為金銀銅牌的圖標(biāo),直觀又形象。

圖庫(kù)最開(kāi)始設(shè)計(jì)的是近期比較流行的瀑布流,但是開(kāi)發(fā)出來(lái)后發(fā)現(xiàn)實(shí)際中新聞圖片很少有長(zhǎng)條形式出現(xiàn), 圖片高度幾乎是一樣的,之前的樣式配上實(shí)際圖片效果就不太理想了。之前版本也感覺(jué)不到是圖集(多圖)形式。從這兩點(diǎn)考慮,就優(yōu)化成了現(xiàn)在這版。

3)icon的改版進(jìn)化

搜狐奧運(yùn)2012icon的進(jìn)化過(guò)程其實(shí)就是設(shè)計(jì)思想向極簡(jiǎn)主義的變遷。

最開(kāi)始想與英國(guó)標(biāo)志物(國(guó)旗、大本鐘等)作為設(shè)計(jì)元素,結(jié)合app首頁(yè)的樣式,但是做出來(lái)不論是顏色還是樣式都稍顯復(fù)雜,且有一種偽旅游app的嫌疑,于是決定只提取奧運(yùn)相關(guān)元素。中間有嘗試奧運(yùn)五環(huán),背景中也有用到奧運(yùn)會(huì)各體育項(xiàng)目的圖形,到最后提煉成搜狐與2012,明確產(chǎn)品指向性,這是一個(gè)由搜狐出品,專門為2012奧運(yùn)會(huì)而生的客戶端。

 

來(lái)源:mued.souhu

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!