晉小彥視覺設(shè)計系列文章（四）：欲擒故縱

2013/12/20 15:22:52來源：互聯(lián)網(wǎng)

本文來自騰訊科技高級視覺設(shè)計師@晉小彥推薦的視覺設(shè)計系列文章，接下來的幾個星期將在互聯(lián)網(wǎng)的一些事上陸續(xù)推出續(xù)篇，敬請留意!下來請來看第四篇連載內(nèi)容《欲擒故縱》。

　　往期回顧：

　　《視覺設(shè)計系列文章(一)：抄現(xiàn)實》

　　《視覺設(shè)計系列文章(二)：全屏大視野》

　　《視覺設(shè)計系列文章(三)：圓、方、三角》

　　《視覺設(shè)計系列文章(四)：欲擒故縱》

　　本期特別推薦由晉小彥同學(xué)嘔心瀝血的巨作《形式感+：網(wǎng)頁視覺設(shè)計創(chuàng)意拓展與快速表現(xiàn)》，書中根據(jù)作者多年的設(shè)計經(jīng)驗，內(nèi)容涵蓋了視覺設(shè)計、體驗設(shè)計等，這本絕對是一本很好的網(wǎng)頁視覺設(shè)計書，敬請留意。

晉小彥視覺設(shè)計系列文章（四）：欲擒故縱,互聯(lián)網(wǎng)的一些事

　　下面進入本篇正文：

　　需求人和設(shè)計人之間的矛盾是設(shè)計的永恒話題，如果處理不好通常會把雙方推向無休止的、互鉆牛角尖的爭論，在許多需求方的眼中通常沒有最重點，只有更重點。不過近兩年中國的設(shè)計環(huán)鏡似乎稍有改善。

　　設(shè)計過程中,我們的周圍經(jīng)常會充斥著這樣的聲音,這個部分再放大一些,這個顏色再明亮一些,我們需要更炫的效果.通常在這樣聲音的充斥下我們很容易簡單的使用加法，進行放大加粗提亮，導(dǎo)致整個畫面充滿了重點，充滿了重點也就意味著再次失去重點。

　　說說——面對需求的逆向思維設(shè)計方法

晉小彥視覺設(shè)計系列文章（四）：欲擒故縱,互聯(lián)網(wǎng)的一些事

　　需求人和設(shè)計人之間的矛盾是設(shè)計的永恒話題

　　需求人與設(shè)計人之間的修改比拼，不僅是智商的比拼，還是情商的比拼，如果處理不好通常會把雙方推向無休止的、互鉆牛角尖的爭論。欲擒故縱不論在溝通還是設(shè)計修改中都是一個可以選擇的辦法。

　　各種特效各種飄各種姿勢各種招

　　在許多需求方的眼中通常沒有最重點，只有更重點。設(shè)計過程中,我們的周圍經(jīng)常會充斥著這樣的聲音,這個部分再放大一些,這個顏色再明亮一些,我們需要更炫的效果.通常在這樣聲音的充斥下我們很容易簡單的使用加法，進行放大加粗提亮，導(dǎo)致整個畫面充滿了重點，充滿了重點也就意味著再次失去重點.

　　在一次次不斷的被輪奸下，就有了如下的產(chǎn)物···各種特效各種飄各種姿勢各種招~

　　網(wǎng)頁設(shè)計中的“擒”與“縱”

　　“突出”與“減弱”，“突出”我們應(yīng)該如何應(yīng)對。

　　想想——突出也可以通過減弱來獲得

　　那么突出我們應(yīng)該如何應(yīng)對，突出可以理解成是一個相對的詞語，相對的突出，這種情況下我們除了加強本體而產(chǎn)生突出的效果，也可以通過削弱其它個體從而產(chǎn)生本體的突出效果，所以，我們來做個小實驗.

　　加強法是基于重點7號球本體展開，我們在色彩和結(jié)構(gòu)上進行加強法操作。

　　1. 色彩加強法包括：加強明度、飽合度等使其更明亮更顯眼。

　　2. 結(jié)構(gòu)加強法包括：變大、變形、增加標(biāo)識等。

　　PS：加強的方法有很多，我們可以總結(jié)歸于是色彩和結(jié)構(gòu)的變化，具體類型不再畫細分說明。

　　減弱法是在重點7號球以外的球體進行操作的，我們在色彩和結(jié)構(gòu)上對其進行減弱的處理。

　　1. 色彩減弱法包括：降低其它物體的明度、飽合度、透明度等，使主體更加突出。

　　2. 結(jié)構(gòu)減弱法包括：減小其它物體的大小來使主體更大更突出。

　　對比總結(jié)：

　　加法：

　　加法是在原有設(shè)計的基礎(chǔ)上，增加、突出、放大、強化某個特定部分使其得到突出。加法本身并沒有問題，它是一種比較直接的思路，不論是需求方還是設(shè)計人都會下意識的使用這種辦法，但是物極必反，過于頻繁的單一的使用加法往往會把自己逼上絕路。

　　減法：

　　欲擒故縱里的減法是通過減少、縮小、弱化其它部分使某個特定部分得到突出。這是一種逆向的思維。配合加法一起使用，可以避免畫面過說擁擠，刺眼。

　　滿：

　　“滿”的目的本身是希望用戶能夠看到并吸收更多信息，但呈現(xiàn)并不表示會被看到，而看到也并不代表會被記住。如何更好的梳理閱讀，讓用戶保持愉快的閱讀，讓信息在合適的時候出現(xiàn)才能真正達到“滿”的目的。

　　空：

　　“空”在語義上似乎處于“滿”的對立面。但它對內(nèi)容的吸收比率往往可能比滿更高。留白可以帶給信息更好的閱讀性，也為設(shè)計帶來更高的品質(zhì)感。如果在擁擠的路上走得疲憊不堪的我們，不如我們反其道而行，欲擒故縱，下面我們就將法碼移向右面，來看看”空“境的別樣風(fēng)景。

　　看看——設(shè)計中的空帶來的更多思考和情趣

　　建筑上的空

　　在建筑的空間設(shè)計上也經(jīng)常犧牲空間來創(chuàng)造宏偉的視覺感受。

　　攝影里的空

　　攝影中也常利用空白引發(fā)人深思。

　　一、內(nèi)容較少的頁面

　　我們先來看一些內(nèi)容量較少的簡潔排版設(shè)計。不慌亂的空間給產(chǎn)品賦予了專業(yè)和大氣的氣質(zhì)。

　　視覺簡潔，作者并不急于將下面部分的內(nèi)容充滿主視覺的空間。而較大量的留白反而讓內(nèi)容成了焦點，條理層次鮮明。

　　二、長頁面

　　下面我們來看一下內(nèi)容較多的頁面，在多內(nèi)容的情況下，我們是否還能以“空”的形式進行設(shè)計呢?長頁面是一個選擇。它能盡量在用戶不跳轉(zhuǎn)的情況下通過滾動獲得所有的信息。由于無需跳轉(zhuǎn)，長頁面的形式適合主題相對連貫的內(nèi)容，或者在設(shè)計上使用連貫的創(chuàng)意以保證持續(xù)閱讀。除了頁面的連貫性設(shè)計外，長頁面還要注意因為頁面過長而產(chǎn)生的疲勞感。下面我們來看看幾個長頁面設(shè)計是如何解決這些問題的。

　　整體造型讓信息閱讀保持延續(xù)性

　　這是一個有趣的長頁面。玩家通過滾動屏幕瀏覽完頁面所有內(nèi)容。首屏的信息相當(dāng)簡潔，用戶進入時看到一個瓶蓋、一根吸管以及由幾個氣泡組成的按鈕，用戶可以通過滾動鼠標(biāo)進行瀏覽。順延著吸管而下的瓶身逐步呈現(xiàn)了頁面的內(nèi)容。創(chuàng)意連貫，交互也很有趣，視覺表現(xiàn)同樣精彩。

　　這個頁面，玩家在首屏?xí)r看到的是產(chǎn)品的LOGO，并通過吸管的引導(dǎo)瀏覽完全部內(nèi)容，在形式和內(nèi)容呈現(xiàn)上都充滿了創(chuàng)意。我們將幾個關(guān)鍵細節(jié)放大如下。

　　三、多層級頁面

　　層級的收納既能滿足內(nèi)容的展示需要，又能保持界面簡潔大氣的需要。

　　《C9》的資料站，和TERA的布局排版及理念近似，都在收納上有比較好的表現(xiàn)并給視覺以較大的展示空間。畫面簡潔、UI扁平輕薄卻不失游戲性。

　　做做——QQ西游花祭頁面

　　一、QQ西游花祭頁面

　　需求分析

　　我們來看看收到的需求

　　1、信息量：這是一個體量適中的需求，

　　2、主題：花祭，專題需求的大意是原來的游戲SLOGAN被勒令使用，希望玩家來禱念同時選出新的SLOGAN，參與者將獲得禮物一份。

　　3、調(diào)性定位：從需求方得到的調(diào)性要求為哀傷，但雖然是祭是死去，卻不能恐怖或憤恨，并且要讓人看到新的希望。這種調(diào)性區(qū)別于抽獎、慶祝等歡樂的活動。我們選擇了凄美的調(diào)性，而空白、安靜正好可以體現(xiàn)出這種哀傷的情懷。但內(nèi)容繁多，我們應(yīng)該如何處理”空”的表現(xiàn)。