晉小彥視覺設計系列文章(四):欲擒故縱
本文來自騰訊科技高級視覺設計師@晉小彥 推薦的視覺設計系列文章,接下來的幾個星期將在互聯(lián)網(wǎng)的一些事上陸續(xù)推出續(xù)篇,敬請留意!下來請來看第四篇連載內容《欲擒故縱》。
往期回顧:
《視覺設計系列文章(一):抄現(xiàn)實》
《視覺設計系列文章(二):全屏大視野》
《視覺設計系列文章(三):圓、方、三角》
《視覺設計系列文章(四):欲擒故縱》
本期特別推薦由晉小彥同學嘔心瀝血的巨作《形式感+:網(wǎng)頁視覺設計創(chuàng)意拓展與快速表現(xiàn)》,書中根據(jù)作者多年的設計經(jīng)驗,內容涵蓋了視覺設計、體驗設計等,這本絕對是一本很好的網(wǎng)頁視覺設計書,敬請留意。
下面進入本篇正文:
需求人和設計人之間的矛盾是設計的永恒話題,如果處理不好通常會把雙方推向無休止的、互鉆牛角尖的爭論,在許多需求方的眼中通常沒有最重點,只有更重點。不過近兩年中國的設計環(huán)鏡似乎稍有改善。
設計過程中,我們的周圍經(jīng)常會充斥著這樣的聲音,這個部分再放大一些,這個顏色再明亮一些,我們需要更炫的效果.通常在這樣聲音的充斥下我們很容易簡單的使用加法,進行放大加粗提亮,導致整個畫面充滿了重點,充滿了重點也就意味著再次失去重點。
說說——面對需求的逆向思維設計方法
需求人和設計人之間的矛盾是設計的永恒話題
需求人與設計人之間的修改比拼,不僅是智商的比拼,還是情商的比拼,如果處理不好通常會把雙方推向無休止的、互鉆牛角尖的爭論。欲擒故縱不論在溝通還是設計修改中都是一個可以選擇的辦法。
各種特效各種飄 各種姿勢各種招
在許多需求方的眼中通常沒有最重點,只有更重點。設計過程中,我們的周圍經(jīng)常會充斥著這樣的聲音,這個部分再放大一些,這個顏色再明亮一些,我們需要更炫的效果.通常在這樣聲音的充斥下我們很容易簡單的使用加法,進行放大加粗提亮,導致整個畫面充滿了重點,充滿了重點也就意味著再次失去重點.
在一次次不斷的被輪奸下,就有了如下的產(chǎn)物···各種特效各種飄 各種姿勢各種招~
網(wǎng)頁設計中的“擒”與“縱”
“突出”與“減弱”,“突出”我們應該如何應對。
想想——突出也可以通過減弱來獲得
那么突出我們應該如何應對,突出可以理解成是一個相對的詞語,相對的突出,這種情況下我們除了加強本體而產(chǎn)生突出的效果,也可以通過削弱其它個體從而產(chǎn)生本體的突出效果,所以,我們來做個小實驗.
加強法是基于重點7號球本體展開,我們在色彩和結構上進行加強法操作。
1. 色彩加強法包括:加強明度、飽合度等使其更明亮更顯眼。
2. 結構加強法包括:變大、變形、增加標識等。
PS:加強的方法有很多,我們可以總結歸于是色彩和結構的變化,具體類型不再畫細分說明。
減弱法是在重點7號球以外的球體進行操作的,我們在色彩和結構上對其進行減弱的處理。
1. 色彩減弱法包括:降低其它物體的明度、飽合度、透明度等,使主體更加突出。
2. 結構減弱法包括:減小其它物體的大小來使主體更大更突出。
對比總結:
加法:
加法是在原有設計的基礎上,增加、突出、放大、強化某個特定部分使其得到突出。加法本身并沒有問題,它是一種比較直接的思路,不論是需求方還是設計人都會下意識的使用這種辦法,但是物極必反,過于頻繁的單一的使用加法往往會把自己逼上絕路。
減法:
欲擒故縱里的減法是通過減少、縮小、弱化其它部分使某個特定部分得到突出。這是一種逆向的思維。配合加法一起使用,可以避免畫面過說擁擠,刺眼。
滿:
“滿”的目的本身是希望用戶能夠看到并吸收更多信息,但呈現(xiàn)并不表示會被看到,而看到也并不代表會被記住。如何更好的梳理閱讀,讓用戶保持愉快的閱讀,讓信息在合適的時候出現(xiàn)才能真正達到“滿”的目的。
空:
“空”在語義上似乎處于“滿”的對立面。但它對內容的吸收比率往往可能比滿更高。留白可以帶給信息更好的閱讀性,也為設計帶來更高的品質感。如果在擁擠的路上走得疲憊不堪的我們,不如我們反其道而行,欲擒故縱,下面我們就將法碼移向右面,來看看”空“境的別樣風景。
看看——設計中的空帶來的更多思考和情趣
建筑上的空
在建筑的空間設計上也經(jīng)常犧牲空間來創(chuàng)造宏偉的視覺感受。
攝影里的空
攝影中也常利用空白引發(fā)人深思。
一、內容較少的頁面
我們先來看一些內容量較少的簡潔排版設計。不慌亂的空間給產(chǎn)品賦予了專業(yè)和大氣的氣質。
視覺簡潔,作者并不急于將下面部分的內容充滿主視覺的空間。而較大量的留白反而讓內容成了焦點,條理層次鮮明。
二、長頁面
下面我們來看一下內容較多的頁面,在多內容的情況下,我們是否還能以“空”的形式進行設計呢?長頁面是一個選擇。它能盡量在用戶不跳轉的情況下通過滾動獲得所有的信息。由于無需跳轉,長頁面的形式適合主題相對連貫的內容,或者在設計上使用連貫的創(chuàng)意以保證持續(xù)閱讀。除了頁面的連貫性設計外,長頁面還要注意因為頁面過長而產(chǎn)生的疲勞感。下面我們來看看幾個長頁面設計是如何解決這些問題的。
整體造型讓信息閱讀保持延續(xù)性
這是一個有趣的長頁面。玩家通過滾動屏幕瀏覽完頁面所有內容。首屏的信息相當簡潔,用戶進入時看到一個瓶蓋、一根吸管以及由幾個氣泡組成的按鈕,用戶可以通過滾動鼠標進行瀏覽。順延著吸管而下的瓶身逐步呈現(xiàn)了頁面的內容。創(chuàng)意連貫,交互也很有趣,視覺表現(xiàn)同樣精彩。
這個頁面,玩家在首屏時看到的是產(chǎn)品的LOGO,并通過吸管的引導瀏覽完全部內容,在形式和內容呈現(xiàn)上都充滿了創(chuàng)意。我們將幾個關鍵細節(jié)放大如下。
三、多層級頁面
層級的收納既能滿足內容的展示需要,又能保持界面簡潔大氣的需要。
《C9》的資料站,和TERA的布局排版及理念近似,都在收納上有比較好的表現(xiàn)并給視覺以較大的展示空間。畫面簡潔、UI扁平輕薄卻不失游戲性。
做做——QQ西游花祭頁面
一、QQ西游花祭頁面
需求分析
我們來看看收到的需求
1、信息量:這是一個體量適中的需求,
2、主題:花祭,專題需求的大意是原來的游戲SLOGAN被勒令使用,希望玩家來禱念同時選出新的SLOGAN,參與者將獲得禮物一份。
3、調性定位:從需求方得到的調性要求為哀傷,但雖然是祭是死去,卻不能恐怖或憤恨,并且要讓人看到新的希望。這種調性區(qū)別于抽獎、慶祝等歡樂的活動。我們選擇了凄美的調性,而空白、安靜正好可以體現(xiàn)出這種哀傷的情懷。但內容繁多,我們應該如何處理”空”的表現(xiàn)。
設計分解
1. 空
1. 減小一屏顯示內容,制造一個空靈安靜的祭奠氣氛。
2. 視覺反差也讓用戶關注到了這個頁面,并且快速閱讀到了“花祭”這個主題信息。
3. 余下的內容將繼續(xù)保持空的凄美調性,并進行分頁處理。
我們就來看看由分頁產(chǎn)生的問題該如何解決。
2. 連貫性問題
1. 為了滿足閱讀的連貫性,與需求方商量,將原來的“獻花”“選新SLOGAN”“轉發(fā)微博”“祝福墻”的無連貫性標題改為帶有情感主題色彩的并連貫的“花愿”“花種”“花瓣”“花祭”,使花祭的情緒貫穿全文,并最終收尾回到到“花祭”。
2. 用虛線隱喻花瓣飄落的曲線,被通過曲線形態(tài)貫穿整體形,不出現(xiàn)斷層。
3. 利用“1.2.3”暗示和提示讀者正文的內容存在。
4. 利用“箭頭”進行閱讀指引
3. 存在感問題
1. 利用飄落的花瓣交待上下空間感的存在
2. 利用立起的紙面交待前后空間感的存在
3. 加入花和彩帶等重點裝飾使頁面不至于過于飄浮。
4. 疲勞感問題
1. 利用斜體增加趣味性減少因長時間白色而引起的疲勞感。
2. 在滾動三屏白色主調過后進行變色處理,讓眼睛進行分類休息。增強對畫面的記憶。
3. 底部制作二級主視覺,在長時間安靜閱讀中,起到一定的提神作用。
4. 另外可以在頂部放置彩蛋誘惑,讓玩家到底部尋找答案或禮品等都可以增強閱讀興趣減少疲勞感,并保持連貫性。
頁面展示
本文地址:http://m.likemindfilms.com/tutorial/ui1817.html