2014-12-17 藍(lán)藍(lán)設(shè)計的小編
藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù).
每一個扁平化界面設(shè)計,都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計
來源:http://yidianzixun.com/home?page=article&id=078LeQZT&up=0
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
人家設(shè)計得真好!”可是好在什么地方呢,卻說不出來。這是阻擋你成為優(yōu)秀設(shè)計師的一大障礙。設(shè)計是我們的本行,不會用設(shè)計語言來解構(gòu)畫面,是說不過去的。
移動互聯(lián)網(wǎng)設(shè)計發(fā)展到今天,有很多傳統(tǒng)的設(shè)計規(guī)律可以遵循,也提出了新的挑戰(zhàn)。因為手持設(shè)備屏幕較小,如何在有限的頁面內(nèi)呈現(xiàn)或引導(dǎo)有效信息,又不顯得雜亂臃腫,考驗著設(shè)計師的能力。
為什么有的主題或App界面就那么舒服,那么清新,那么有情懷?里面蘊(yùn)含著哪些最基礎(chǔ)的版式設(shè)計理念,讓我們一塊梳理梳理,給初入UI設(shè)計的同學(xué)做個參考。
今天和大家講講構(gòu)圖。
構(gòu)圖版式三板斧
問題一:為什么要講版式設(shè)計?有必要么?
就以我剛?cè)胄蠻I設(shè)計失敗經(jīng)歷為鑒吧,那時候,一拿到需求就馬上開始設(shè)計,根本就不管什么版式,結(jié)果設(shè)計出來方案總是很別扭,顯得特別亂,往往被扣上“風(fēng)格不統(tǒng)一”“用戶體驗差”的帽子。最開始我也是說服不了自己,覺得別人不理解自己的作品。現(xiàn)在想想確實當(dāng)時存在問題。UI設(shè)計必然離不開設(shè)計師的天馬行空,但是它畢竟是要面向大眾市場,做成全世界只有自己能理解的孤品有什么意義呢,UI里的“用戶體驗”又體現(xiàn)在什么地方呢?而這樣的設(shè)計又反過來阻礙了你的設(shè)計生涯,長期的失敗設(shè)計很容易帶來挫敗感和麻木感。
尤其是作為初入行的UI設(shè)計師,更有必要學(xué)習(xí)一些版式設(shè)計思路。所謂創(chuàng)新,也仍然需要在了解已有的好設(shè)計基礎(chǔ)之上進(jìn)行,這里說這些不是讓你生搬硬套,是讓你站在前人的肩膀上看得更遠(yuǎn)。
問題二:為什么一開始就要構(gòu)圖呢?
設(shè)計和繪畫一樣,對需求和內(nèi)容進(jìn)行分析,采用適當(dāng)?shù)臉?gòu)圖可以化繁為簡,提高設(shè)計效率。在嘗試比較多種構(gòu)圖后,設(shè)計師的思路會更加明確。期間耗費(fèi)的時間成本,可以反復(fù)進(jìn)行調(diào)整,直到找到最為合適的構(gòu)圖方式再往下進(jìn)行細(xì)化,添加元素,豐富畫面。
一個項目給設(shè)計師的時間是有限的,我們核心重點(diǎn)在于弄清楚產(chǎn)品的功能核心和賣點(diǎn),把它們凸顯出來,最終讓用戶獲得更為舒服的體驗。而雜亂無章的堆積會顯得非常的糟糕,甚至有時候,用戶會因為找不到自己想要的東西而馬上流失,留下非常不好的印象。通過前期構(gòu)圖,可以節(jié)省時間,讓設(shè)計更有條理。
問題三:構(gòu)圖,會限制設(shè)計的創(chuàng)造力嗎?
不會的。設(shè)計的痛苦莫過于“沒有思路”和“漫無邊際”,這兩者都源于需求分析不夠,同時也與事先沒有做好構(gòu)圖工作有關(guān)。構(gòu)圖為設(shè)計提供了明確的嘗試方向,甚至通過不同的構(gòu)圖可以產(chǎn)生的交互效應(yīng),達(dá)到意想不到的效果。限制創(chuàng)造力的問題不要擔(dān)心,因為構(gòu)圖只是一個框架,同類型的構(gòu)圖完全可以做出不一樣的風(fēng)格。雖然設(shè)計構(gòu)圖結(jié)構(gòu)相同,但設(shè)計的表現(xiàn)方式和元素不同,仍然能夠塑造出不同的設(shè)計趕腳。靈活運(yùn)用構(gòu)圖和布局更能讓你把設(shè)計集中在元素和產(chǎn)品特色上。
廢話不多說,下面我將和大家介紹以下幾種在界面中常用的構(gòu)圖方法:九宮格構(gòu)圖,圓心點(diǎn)放射形構(gòu)圖,三角形構(gòu)圖,SF字形構(gòu)圖。
1.九宮格網(wǎng)格構(gòu)圖
這種版式主要運(yùn)用在分類為主的一級頁面,起到功能分類的作用。
通常在界面設(shè)計中,我們會利用網(wǎng)格在界面進(jìn)行布局,根據(jù)水平方向和垂直方向劃分所構(gòu)成的輔助線,設(shè)計會進(jìn)行得非常順利。在界面設(shè)計中,九宮格這種類型的構(gòu)圖更為規(guī)范和常用,用戶在使用過程中非常的方便,應(yīng)用功能會顯得格外的明確和突出。
九宮格給用戶一目了然的感覺,操作便捷是這種構(gòu)圖方式最重要的優(yōu)勢。
九宮格看似簡單隨意,用好了同樣能呈現(xiàn)出奇妙的效果。
靈活運(yùn)用九宮格輔助線區(qū)分出來的方塊。在有規(guī)律的設(shè)計方法中找突破,做設(shè)計一定要注重這一點(diǎn)!
在九個方塊分配的時候,不一定要一個格子對應(yīng)一個內(nèi)容,完全可以一對二,一對多,打破平均分割的框框,增加留白,調(diào)整頁面節(jié)奏,或突出功能點(diǎn)或廣告。各個方塊的不同組成方式,頁面的效果也會產(chǎn)生無數(shù)的變化。
我們可以看出這樣的版式,同樣可以使界面變得非常的靈活,內(nèi)容簡單,信息明了。
2.圓心點(diǎn)放射形構(gòu)圖
生活中,最為常見的就是圓形了,眼睛是圓的,太陽是圓的,碗也是圓的,天也是圓的。在界面設(shè)計中圓的運(yùn)用可謂是點(diǎn)睛之筆。
圓是有圓心的,在界面中,往往通過構(gòu)造一個大圓來起到聚焦、凸顯作用。
放射形的構(gòu)圖,有凸顯位于中間內(nèi)容或功能點(diǎn)的作用。在強(qiáng)調(diào)核心功能點(diǎn)的時候,可以試著將功能以圓形的范式排布到中間,以當(dāng)前主要功能點(diǎn)為中心,將其他的按鈕或內(nèi)容放射編排起來。
我們將主要的功能設(shè)置在版式的中位置,就能引導(dǎo)用戶的視線聚集在想要突出的功能點(diǎn)上,就算視線本來不在中間的位置,也能引導(dǎo)用戶再次回到中心的聚集處。
在界面設(shè)計中,圓形的運(yùn)用能使界面顯得格外生動,多數(shù)可操作的按鈕上或交互動畫中都能見到圓形的身影。
因為圓形具有靈動、活躍、有趣、可愛、多變的特質(zhì)。在界面設(shè)計中善于將圓形的設(shè)計與動畫結(jié)合,能讓整個軟件鮮活起來。
如再加上旋轉(zhuǎn)圍繞的動畫,會讓整個軟件鮮活起來。界面中的圓形能集中用戶的視線,引導(dǎo)點(diǎn)擊操作,突出主要的功能點(diǎn)或數(shù)據(jù),把產(chǎn)品核心展現(xiàn)出來。
圓心點(diǎn)放射形的設(shè)計,會使軟件感覺更為智能化,包容萬象。
如果要體現(xiàn)的功能點(diǎn)非常簡單,只有幾個功能按鈕的時候,可嘗試這種大圓的展示設(shè)計,突出最重要的功能,然后羅列并排出其他的功能點(diǎn)。這種方式非常實用,就和畫重點(diǎn)一樣,圈出最重要的數(shù)據(jù)。善于運(yùn)用大圓構(gòu)圖,能撐起整個畫面,讓界面圓潤而飽滿。
3.三角形構(gòu)圖
這類的構(gòu)圖方式主要運(yùn)用在文字與圖標(biāo)的版式中,能讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖,能把信息層級羅列得更為規(guī)整和明確。
在界面中三角形構(gòu)圖大部分都是圖在上,字在下,閱讀更為舒服,有重點(diǎn)有描述。
Gogobot登陸頁在設(shè)計中將logo作為了圖形的部分,輸入框就是產(chǎn)品的核心描述。
個人信息頁比較常用三角形構(gòu)圖。頭像明確了這個頁面的內(nèi)容,而下面的粉絲、喜歡等數(shù)據(jù)就是對本人的一個描述和介紹。
當(dāng)時在設(shè)計兒童衛(wèi)士寶貝信息設(shè)置頁時運(yùn)用到了三角構(gòu)圖與圓形構(gòu)圖的結(jié)合。將體重刻度做成可滑動操作的方式,而卡通形象來突出設(shè)置的對象及這個頁面的功能。
4.視線在界面中的構(gòu)圖法則(SF字形構(gòu)圖)
在設(shè)計實踐中,如何引導(dǎo)讀者視線,對增強(qiáng)用戶體驗有重要作用。好的構(gòu)圖視線法則,能夠獲得非常舒服的閱讀體驗。而雜亂無章的構(gòu)圖,往往讓用戶厭倦。
在進(jìn)行界面設(shè)計的時候,對用戶的視覺移動方向的預(yù)設(shè)是非常重要的。在界面中加入更為順暢的構(gòu)圖設(shè)計引導(dǎo)用戶視線移動的元素,就能使用戶更多的觀察到產(chǎn)品的核心和產(chǎn)品的賣點(diǎn)。
視線流動的軌跡多則是從上至下從左到右移動,如果不能圍繞這樣的視線軌跡進(jìn)行排版,用戶在閱讀的時候會變得很吃力,找不到重點(diǎn),使用戶產(chǎn)生反感。所以在界面設(shè)計中格外需要注意這個地方?,F(xiàn)在界面一般是上下滑動的,做好視線引導(dǎo),可以大大減小用戶的負(fù)擔(dān)和閱讀疲勞。
界面中最基礎(chǔ)的是S形視線構(gòu)圖
在界面中怎么運(yùn)用S形視線構(gòu)圖呢?
S形視線大家都懂,關(guān)鍵是如何運(yùn)用好S形視線來抓住用戶眼球。
首先我們看一下視線的軌跡,在視線轉(zhuǎn)角處視覺軌跡最為密集,瀏覽更為集中在切換的地方,視線轉(zhuǎn)折的地方停留時間最長。所以我們應(yīng)該把重要的想要突出的產(chǎn)品或功能放在這塊,這樣更容易讓用戶記住產(chǎn)品的賣點(diǎn)。
蘋果官網(wǎng)便采用了S形視線構(gòu)圖,引導(dǎo)閱讀,大家可以從蘋果官網(wǎng)好好體會一下。每個模塊的圖形進(jìn)行穿插,可以起到幫助折回視線的作用。產(chǎn)品圖更多的讓用戶去記憶,設(shè)計引導(dǎo)消費(fèi)!
此外,為了幫助視線的移動方向,圖片的處理也非常的講究。
在iPod touch 的介紹中,第一張圖片展開的效果用到了三角形構(gòu)圖,強(qiáng)化了引導(dǎo)視線軌跡的指示性。同時多張圖片借助手機(jī)排列方向引導(dǎo)到視線軌跡,很好地實現(xiàn)了圖片—文字—圖片之間切換,將用戶帶入到整個產(chǎn)品畫面中。
第一屏手機(jī)展開方向與視線保持一致
為了使用戶閱讀更有推進(jìn)性,在圖片層次和空間上,我們也需要注重用戶的視線效果,將焦點(diǎn)調(diào)整到合理的視線位置上,產(chǎn)品正面方向?qū)?zhǔn)視線的來源點(diǎn)。通過這些調(diào)整不僅能使閱讀順暢,更加強(qiáng)了界面的平衡性。
相比于左右構(gòu)圖,S形構(gòu)圖在上下滾動頁面上優(yōu)勢非常明顯。左右構(gòu)圖很容易給人疲勞感,而S形則將圖片和文字完美結(jié)合在一起,配以大量的留白,如同山間的溪流,給人輕快流暢的感覺。
下圖界面中,設(shè)計師很好的運(yùn)用到S視線形構(gòu)圖,增強(qiáng)了穿插感和靈動性。人物的信息上下穿插布局,頭像則成為視線的轉(zhuǎn)折點(diǎn),使這種雙列模式的排版更為有節(jié)奏。而具體到每一部分,頭像與內(nèi)容采用了三角形構(gòu)圖,內(nèi)容描述段落用到了文本居中式,畫面穩(wěn)定、和諧。
在引導(dǎo)頁中也會常常運(yùn)用到S形的構(gòu)圖。圖文進(jìn)行穿插布局,這樣的構(gòu)圖層次感分明,動感十足!
由圖文版式布局,我們還可以演變出F字形構(gòu)圖,這種類型的構(gòu)圖大部分運(yùn)用在圖文左右搭配圖和banner中,使用F形構(gòu)圖能讓圖文搭配更有張力,更大氣,產(chǎn)品信息更為簡單和明確。
在F形構(gòu)圖的規(guī)律中,主圖為F的主干,右側(cè)兩行(或兩部分)文字為輔,要注意合理分配圖片和文字的占比。
F形構(gòu)圖在banner中使用,能將標(biāo)題更為突出,主題更加吸引視線。
值得注意的是,要充分利用主圖的畫面的指向性。比如,主圖是人物,可將文字放置于其眼神、朝向、手勢等對應(yīng)的方向,加強(qiáng)視線引導(dǎo)。如果是產(chǎn)品圖,則可以通過產(chǎn)品的朝向來引導(dǎo)。這樣做,用戶能最快速的關(guān)注到文本信息,加強(qiáng)認(rèn)知度和購買度。
小結(jié):這一課沒有什么實戰(zhàn)技巧,更多的是引導(dǎo)大家學(xué)會欣賞,學(xué)會用基本的設(shè)計原理來描述自己看到的作品,而不是簡單扔下一句“人家設(shè)計得真好”就完了,要明白其中道理,并努力為自己所用。構(gòu)圖先說到這里,當(dāng)然版式不僅僅指構(gòu)圖,還有很多東西可講,有時間我再整理給大家。
做設(shè)計要培養(yǎng)職業(yè)敏感,習(xí)慣用設(shè)計語言解構(gòu)看到的畫面。
藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com