從零開(kāi)始的視覺(jué)設(shè)計(jì)方法論

標(biāo)題是類比一個(gè)叫做“Re:從零開(kāi)始的異世界生活”的日本動(dòng)漫,從中得到一些靈感發(fā)現(xiàn)也是可以運(yùn)用到設(shè)計(jì)當(dāng)中蝠咆,所謂從零開(kāi)始的異化視覺(jué)設(shè)計(jì)踊东,是一種設(shè)計(jì)的思維方式,有時(shí)候我們會(huì)苦惱設(shè)計(jì)能力如何得到更多提升刚操,此文或許能提供一些參考性的思路和設(shè)計(jì)方法

從零到一

什么是從零到一闸翅?

從一個(gè)還只是信息框架層面到一個(gè)可以啟動(dòng)開(kāi)發(fā)的視覺(jué)設(shè)計(jì)稿,我會(huì)將這個(gè)過(guò)程稱為從零到一

舉個(gè)栗子菊霜,說(shuō)說(shuō)樓主以前遇到這樣一個(gè)需求坚冀,是個(gè)游戲分類的列表頁(yè),是需要左右滑動(dòng)切換標(biāo)簽的鉴逞,交互圖如下:

一般面對(duì)這種交互的時(shí)候记某,是不是立刻想起了什么?

沒(méi)錯(cuò),就是我們的規(guī)范构捡。成熟產(chǎn)品的大系統(tǒng)下都有自己的基礎(chǔ)控件的規(guī)范液南,這些規(guī)范的作用是為了保證整個(gè)大系統(tǒng)的頁(yè)面之間的交互邏輯一致性和視覺(jué)的統(tǒng)一性,就像這樣:

然后我們會(huì)習(xí)以為常的勾徽,把對(duì)應(yīng)的規(guī)范套入對(duì)應(yīng)的交互中滑凉,然后要注意的是間距,品牌色捂蕴,列表樣式譬涡。然后我們就完成了視覺(jué)稿,這個(gè)過(guò)程就是從零到一,如下:

那么問(wèn)題來(lái)了啥辨,這樣就夠了嗎涡匀?

從一歸零再到一

有些時(shí)候設(shè)計(jì)師會(huì)苦惱為何自己只是符合預(yù)期,很難再往前突破溉知,或者會(huì)產(chǎn)生疑問(wèn)陨瘩,是不是還可以做些什么腕够?

如果說(shuō)從把一個(gè)交互圖,套用規(guī)范舌劳,或者按照常態(tài)去執(zhí)行視覺(jué)帚湘,是一個(gè)0到1 的過(guò)程,那是否可以考慮一下甚淡, 把這個(gè)1歸零后大诸,再去異化的思考會(huì)是什么樣的結(jié)果。

順著這個(gè)思路贯卦,我們思考一下资柔,尋找“1”的問(wèn)題所在,我們不難發(fā)現(xiàn)它有幾個(gè)問(wèn)題:

1撵割,文字標(biāo)題的弊端贿堰,只能通過(guò)閱讀文字識(shí)別,是否可以增加圖形化標(biāo)識(shí)

2啡彬,沒(méi)有游戲氛圍感羹与,除了圖標(biāo),都感受不到這也是游戲平臺(tái)的頁(yè)面

3庶灿,有點(diǎn)枯燥無(wú)趣

那么進(jìn)一步思考就是在原來(lái)的基礎(chǔ)上纵搁,為了新“1”,需要怎么做往踢?

1诡渴,保留重要的不可變動(dòng)的信息:列表、標(biāo)題菲语、左右切換

2妄辩,可變動(dòng)的信息和布局是哪些?板式山上?增加氛圍圖眼耀?增加輔助信息?

3佩憾,如何達(dá)到目標(biāo)效果:氛圍感哮伟、圖形標(biāo)識(shí)、有趣

然后進(jìn)行各種嘗試妄帘,尋找合適的界面布局方式楞黄,就可以優(yōu)化成這樣:


這就是我認(rèn)為的“從一歸零再到一”

將已有的視覺(jué)設(shè)計(jì),通過(guò)打散布局和信息結(jié)果抡驼,并將他們通過(guò)更優(yōu)的方式重組鬼廓,再給一些輕微異化的樣式,就能得到新的視覺(jué)稿

零一的循環(huán)

剛才的案例中我們可以看到一個(gè)從“零”到“一” 致盟,然后歸“零”再到“一”的過(guò)程碎税。

其中最難理解和做到的就是歸“零”的過(guò)過(guò)程尤慰,歸“零”是指把之前界面中的信息結(jié)構(gòu)打散并重組,并且還需要優(yōu)化結(jié)構(gòu)和滿足基本需求雷蹂。

總結(jié)的基本操作方法是:

1 與產(chǎn)品溝通述求點(diǎn)伟端,了解視覺(jué)層面需要滿足的內(nèi)容

2 了解產(chǎn)品未來(lái)的趨勢(shì),思考前瞻性的視覺(jué)概念

3 將頁(yè)面的所有元素和信息解組匪煌,分析所有信息屬于哪些類型责蝠,整理出不可變動(dòng)信息、可變動(dòng)信息萎庭、可增加的信息玛歌、可變的布局樣式

4 信息重組,在思考板式的過(guò)程中擎椰,就可以將之前分解出來(lái)的信息來(lái)重組,可變換信息就要思考可變換樣式的可能性创肥。通過(guò)產(chǎn)品的需求达舒,和對(duì)設(shè)計(jì)的預(yù)期,不斷嘗試重組信息結(jié)構(gòu)叹侄,找到合適的板式和視覺(jué)樣式(注:為了確保自己生命安全 ㄟ( ▔ , ▔ )ㄏ巩搏,和不做無(wú)用功,該步驟一定要與交互同學(xué)趾代,產(chǎn)品同學(xué)和技術(shù)同學(xué)多多溝通)

這就是“從零”開(kāi)始的設(shè)計(jì)方法贯底,往往我們項(xiàng)目的周期會(huì)根據(jù)項(xiàng)目的緊急程度決定,所以總會(huì)有視覺(jué)設(shè)計(jì)周期不同的情況撒强,然而用“從零”方法禽捆,是可以在有限的時(shí)間里,不斷的從”零”到“一”飘哨,再又從“一”歸“零”的信息歸納胚想,不斷循環(huán),找到最合適的設(shè)計(jì)芽隆。將這個(gè)過(guò)程叫做“零一循環(huán)”

就像把上面的交互圖不斷“從零到一”浊服,我們就可以得到各種不同的視覺(jué)稿,從而找到合適的方案

思考的維度

這種從零開(kāi)始的循環(huán)思考的方式胚吁,會(huì)讓我們?cè)谠O(shè)計(jì)的時(shí)候思考盡可能多的可能性牙躺,并根據(jù)產(chǎn)品的特性找到合適的方式,也是保證我們的設(shè)計(jì)是有理可尋的腕扶。

這個(gè)時(shí)候孽拷,很多小伙伴肯定要問(wèn),是怎么去做這個(gè)從零的思考的半抱,這不就是不同的板式方案而已嘛乓搬?當(dāng)然思犁,板式的思考是“從零方法”的一個(gè)重要維度,下面也提供幾個(gè)不同的維度的思路:

互動(dòng)方式:

留言板一直是用戶之前使用的功能进肯,但是是否能夠用一些更有趣的方式激蹲,之前的留言板是一個(gè)一個(gè)卡片滑動(dòng)切換,可以看到別人單條留言江掩,但是效率比較低学辱,而且互動(dòng)性很弱,所以就思考是不是可以用彈幕的方式去優(yōu)化环形,結(jié)果會(huì)好很多策泣。

把原來(lái)的卡片留言板的方式,替換成流行且有趣的彈幕的方式抬吟,參與感更強(qiáng)萨咕。讓彈幕可以變得更加的有話題性,提升用戶在該主頁(yè)的參與量火本。

情感化融入:

這是一個(gè)情侶之間互動(dòng)的一個(gè)功能危队,但是單純的在界面里看到問(wèn)題和分?jǐn)?shù),是否有點(diǎn)枯燥钙畔,就可以從情感化的維度思考茫陆,能否有一個(gè)人性化介質(zhì),讓2人之間的互動(dòng)變得更有趣擎析,更有情感簿盅。


也可以通過(guò)各種其他的維度來(lái)從零思考,只要有足夠的時(shí)間去做嘗試揍魂,我們便可以從中受益桨醋,所謂的匠心,也是這種不斷嘗試找到答案的決心现斋。

寫在最后讨盒,全文都是以“從零”的思路去探索設(shè)計(jì)方法論,其實(shí)所謂的“從零”就是在得到一個(gè)結(jié)果的時(shí)候步责,是否可以再往前走一步


原文來(lái)自ISUX返顺,作者:HAOO? ?如有侵權(quán),請(qǐng)聯(lián)系我刪除蔓肯!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末遂鹊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子蔗包,更是在濱河造成了極大的恐慌秉扑,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異舟陆,居然都是意外死亡误澳,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門秦躯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)忆谓,“玉大人,你說(shuō)我怎么就攤上這事踱承〕” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵茎活,是天一觀的道長(zhǎng)昙沦。 經(jīng)常有香客問(wèn)我,道長(zhǎng)载荔,這世上最難降的妖魔是什么盾饮? 我笑而不...
    開(kāi)封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮懒熙,結(jié)果婚禮上丘损,老公的妹妹穿的比我還像新娘。我一直安慰自己煌珊,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布泌豆。 她就那樣靜靜地躺著定庵,像睡著了一般。 火紅的嫁衣襯著肌膚如雪踪危。 梳的紋絲不亂的頭發(fā)上蔬浙,一...
    開(kāi)封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音贞远,去河邊找鬼畴博。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蓝仲,可吹牛的內(nèi)容都是我干的俱病。 我是一名探鬼主播,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼袱结,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼亮隙!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起垢夹,我...
    開(kāi)封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤溢吻,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后果元,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體促王,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡犀盟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蝇狼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阅畴。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖题翰,靈堂內(nèi)的尸體忽然破棺而出恶阴,到底是詐尸還是另有隱情,我是刑警寧澤豹障,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布冯事,位于F島的核電站,受9級(jí)特大地震影響血公,放射性物質(zhì)發(fā)生泄漏昵仅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一累魔、第九天 我趴在偏房一處隱蔽的房頂上張望摔笤。 院中可真熱鬧,春花似錦垦写、人聲如沸吕世。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)命辖。三九已至,卻和暖如春分蓖,著一層夾襖步出監(jiān)牢的瞬間尔艇,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工么鹤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留终娃,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓蒸甜,卻偏偏與公主長(zhǎng)得像棠耕,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子柠新,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容