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

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

　　往期回顧：

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

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

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

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

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

　　下面進(jìn)入本篇正文：

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

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

　　說(shuō)說(shuō)——面對(duì)需求的逆向思維設(shè)計(jì)方法

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

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

　　各種特效各種飄 各種姿勢(shì)各種招

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

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

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

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

　　想想——突出也可以通過(guò)減弱來(lái)獲得

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

　　加強(qiáng)法是基于重點(diǎn)7號(hào)球本體展開(kāi)，我們?cè)谏屎徒Y(jié)構(gòu)上進(jìn)行加強(qiáng)法操作。

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

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

　　PS：加強(qiáng)的方法有很多，我們可以總結(jié)歸于是色彩和結(jié)構(gòu)的變化，具體類(lèi)型不再畫(huà)細(xì)分說(shuō)明。

　　減弱法是在重點(diǎn)7號(hào)球以外的球體進(jìn)行操作的，我們?cè)谏屎徒Y(jié)構(gòu)上對(duì)其進(jìn)行減弱的處理。

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

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

　　對(duì)比總結(jié)：

　　加法：

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

　　減法：

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

　　滿(mǎn)：

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

　　空：

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

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

　　建筑上的空

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

　　攝影里的空

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

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

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

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

　　二、長(zhǎng)頁(yè)面

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

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

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

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

　　三、多層級(jí)頁(yè)面

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

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

　　做做——QQ西游花祭頁(yè)面

　　一、QQ西游花祭頁(yè)面

　　需求分析

　　我們來(lái)看看收到的需求

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

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

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

　　設(shè)計(jì)分解

　　1. 空

　　1. 減小一屏顯示內(nèi)容，制造一個(gè)空靈安靜的祭奠氣氛。

　　2. 視覺(jué)反差也讓用戶(hù)關(guān)注到了這個(gè)頁(yè)面，并且快速閱讀到了“花祭”這個(gè)主題信息。

　　3. 余下的內(nèi)容將繼續(xù)保持空的凄美調(diào)性，并進(jìn)行分頁(yè)處理。

　　我們就來(lái)看看由分頁(yè)產(chǎn)生的問(wèn)題該如何解決。

　　2. 連貫性問(wèn)題

　　1. 為了滿(mǎn)足閱讀的連貫性，與需求方商量，將原來(lái)的“獻(xiàn)花”“選新SLOGAN”“轉(zhuǎn)發(fā)微博”“祝福墻”的無(wú)連貫性標(biāo)題改為帶有情感主題色彩的并連貫的“花愿”“花種”“花瓣”“花祭”，使花祭的情緒貫穿全文，并最終收尾回到到“花祭”。

　　2. 用虛線(xiàn)隱喻花瓣飄落的曲線(xiàn)，被通過(guò)曲線(xiàn)形態(tài)貫穿整體形，不出現(xiàn)斷層。

　　3. 利用“1.2.3”暗示和提示讀者正文的內(nèi)容存在。

　　4. 利用“箭頭”進(jìn)行閱讀指引

　　3. 存在感問(wèn)題

　　1. 利用飄落的花瓣交待上下空間感的存在

　　2. 利用立起的紙面交待前后空間感的存在

　　3. 加入花和彩帶等重點(diǎn)裝飾使頁(yè)面不至于過(guò)于飄浮。

　　4. 疲勞感問(wèn)題

　　1. 利用斜體增加趣味性減少因長(zhǎng)時(shí)間白色而引起的疲勞感。

　　2. 在滾動(dòng)三屏白色主調(diào)過(guò)后進(jìn)行變色處理，讓眼睛進(jìn)行分類(lèi)休息。增強(qiáng)對(duì)畫(huà)面的記憶。

　　3. 底部制作二級(jí)主視覺(jué)，在長(zhǎng)時(shí)間安靜閱讀中，起到一定的提神作用。

　　4. 另外可以在頂部放置彩蛋誘惑，讓玩家到底部尋找答案或禮品等都可以增強(qiáng)閱讀興趣減少疲勞感，并保持連貫性。

　　頁(yè)面展示