還在為網(wǎng)頁的視覺效果而發(fā)愁?《形式感》教你如何一小時(shí)出圖

《形式感》 作者:晉小彥

在說這本書之前,先來說說一個(gè)小插曲膊爪。剛拿到這本書的時(shí)候我是滿懷期待的以為又可以看到很多不同的設(shè)計(jì)理念,可當(dāng)我粗略地翻了翻之后心里突然嘎噔一下据块,里面的配圖全是與游戲類網(wǎng)頁相關(guān)的案例。當(dāng)時(shí)我就在考慮還要不要繼續(xù)看募书,因?yàn)槲沂且粋€(gè)B端設(shè)計(jì)師,平時(shí)的工作幾乎不會(huì)接觸到任何與游戲相關(guān)的設(shè)計(jì)工作测蹲,就在我糾結(jié)的時(shí)候朋友的一句話解決了我的顧慮“無論是什么樣的書你要學(xué)習(xí)的是思路與方法莹捡,舉一反三靈活運(yùn)用才是真理,你管它看起來是不是你工作需要的”扣甲。沒錯(cuò)篮赢,雖然這本書可能介紹的案例與我的工作毫不相干,但是學(xué)習(xí)并靈活運(yùn)用里面的方法才是真正的目的琉挖,于是我就開始了這本書的閱讀時(shí)刻启泣。

《形式感》這本書不是一本高大上的教科書,不涉及任何網(wǎng)頁前端開發(fā)或PS操作步驟粹排,也沒有精深復(fù)雜的平面構(gòu)成和色彩搭配理論种远,這是一本速食的設(shè)計(jì)創(chuàng)意技巧手冊(cè)。它是一本以很直接的方式教你如何設(shè)計(jì)來快速解決視覺上的各種問題顽耳。

本書總共有十個(gè)主要模塊外加三章附錄坠敷,主模塊以說說、想想射富、看看膝迎、做做四個(gè)方面和大量案例來解釋不同的設(shè)計(jì)方法該如何運(yùn)用。接下來我們來具體聊聊我認(rèn)為這十個(gè)模塊中非常有用的五種設(shè)計(jì)方法


01.抄現(xiàn)實(shí)

抄現(xiàn)實(shí)是我們?cè)谠O(shè)計(jì)中最直接也是最常用的一種方法胰耗,它顧名思義就是抄襲現(xiàn)實(shí)中存在的事物限次,將抽象的主題通過實(shí)體表達(dá)出來,并以之作為內(nèi)容信息的載體柴灯,可以在第一視覺上直觀地體現(xiàn)核心內(nèi)容并突出主題卖漫。

在抄現(xiàn)實(shí)的實(shí)施中有三個(gè)主要步驟:

減法:提煉物體特征,審查刪除重復(fù)的描述赠群。

分塊:對(duì)信息進(jìn)行消化羊始。在吃透信息后將信息由粗到細(xì)進(jìn)行分塊。分塊完成后查描,結(jié)合造型進(jìn)行一定的信息和造型微調(diào)突委。

加法:具體的內(nèi)容填充。氣氛和視覺的補(bǔ)充冬三。特征的還原和細(xì)節(jié)的補(bǔ)充匀油。


02.圓、方勾笆、三角

圓形敌蚜,方形和三角是網(wǎng)頁造型結(jié)構(gòu)中的精髓元素歸納,即使再豐富生動(dòng)的物體也可以由它們組成匠襟。利用圓钝侠,方该园,三角可以:

1.打破習(xí)慣性思路

2.理性把握主線情感

3.變幻靈活


03.斷臂之美

因?yàn)闅埲彼嵘幔杂辛伺c眾不同的故事和特點(diǎn)帅韧,它的主題性和目標(biāo)性比起完美的東西顯得更加強(qiáng)烈。斷臂的方法是通過去掉局部啃勉、選取局部以及替換局部來突出核心思想忽舟,讓特別的視角和畫面帶給觀眾更強(qiáng)烈的感受。

去掉局部:去掉局部是在原先完整的整體上淮阐,為了更好的突出叮阅、說明事物的特征和主題而刪去了其中一部分,它為主題的表現(xiàn)排除了視覺干擾泣特,使中心更加明確浩姥。

選取局部:選取局部通常是因?yàn)檫@個(gè)部分是特征的集中表現(xiàn),它的獨(dú)立存在可以代表并放大整體的中心思想状您,使主題更加明確勒叠,情感更加集中。

替換局部:替換局部是使用更能表現(xiàn)主題的事物來替代特定的局部膏孟,從而使主題突出眯分。替換事物的獨(dú)立風(fēng)格與原有整體結(jié)合后,特征更明顯柒桑,引發(fā)更多的延伸思考弊决。


04.欲擒故縱

在設(shè)計(jì)過程中,我們周圍經(jīng)常會(huì)充斥著這樣的聲音:再大一點(diǎn)魁淳,顏色再明亮一點(diǎn)飘诗,我們需要更炫的效果...通常在這種情況下我們很容易的使用加法,進(jìn)行放大加粗提亮界逛,導(dǎo)致整個(gè)畫面充滿了重點(diǎn)昆稿, 充滿了重點(diǎn)也就意味著毫無重點(diǎn)。所以面對(duì)需求的時(shí)候我們需要一個(gè)逆向的設(shè)計(jì)思維仇奶。突出并不意味著只能增強(qiáng)貌嫡,我們也可以通過減弱來獲得。

加法:在原有的設(shè)計(jì)基礎(chǔ)上该溯,增加岛抄、突出、放大狈茉、強(qiáng)化某個(gè)特定的部分使其突出夫椭。

減法:通過減少、縮小氯庆、弱化其他部分使得某個(gè)特定的部分得到突出

滿:“滿”的目的本身是希望用戶能夠看到并吸收更多信息蹭秋,但呈現(xiàn)并不表示會(huì)被看到扰付,而看到也不代表會(huì)被記住。

空:留白可以帶給信息更好的閱讀性仁讨,也為設(shè)計(jì)帶來更高的品質(zhì)感羽莺。往往“空”對(duì)內(nèi)容的吸收率更高。


05.乾坤大挪移

在時(shí)間短洞豁、沒點(diǎn)子盐固、沒創(chuàng)意、又要快速捕捉眼球的時(shí)候怎么辦丈挟?使用乾坤大挪移通過對(duì)頁面整體的旋轉(zhuǎn)和平移可以快速改變視覺效果刁卜,它打破了正常網(wǎng)頁的視覺習(xí)慣,吸引了觀眾的注意力曙咽。

旋轉(zhuǎn):

整體旋轉(zhuǎn) — 背景與內(nèi)容一起旋轉(zhuǎn)蛔趴。為了兼容性和可閱讀性,背景和內(nèi)容同時(shí)旋轉(zhuǎn)的角度盡量不要超過15度例朱。

背景旋轉(zhuǎn) — 旋轉(zhuǎn)背景孝情,信息內(nèi)容保持不變。這種旋轉(zhuǎn)方式既可以產(chǎn)生旋轉(zhuǎn)的視覺形式感茉继,又可以保證文字信息的閱讀性咧叭,是推薦和常用的方式。

綜合旋轉(zhuǎn) — 根據(jù)內(nèi)容結(jié)構(gòu)進(jìn)行有選擇的旋轉(zhuǎn)烁竭。

平移:將原有網(wǎng)頁信息內(nèi)容往左側(cè)或者右側(cè)平行移動(dòng)菲茬,使頁面產(chǎn)生不穩(wěn)定的狀態(tài),然后在這種與常見方式不同的不平衡的布局中尋找更新鮮的創(chuàng)意和表現(xiàn)方式派撕。


以上就是我認(rèn)為非常有用的五種設(shè)計(jì)方式婉弹。但是無論是哪種設(shè)計(jì)方式都需要在實(shí)踐中更多的去嘗試、運(yùn)用终吼,才能夠找出最適合的效果镀赌。

本書還有三章附錄,主要說了一些與產(chǎn)品相關(guān)的內(nèi)容际跪,或許它與設(shè)計(jì)方法無關(guān)商佛,但是其中有這么一句話我很喜歡:“設(shè)計(jì)師是一個(gè)協(xié)助產(chǎn)品和項(xiàng)目策劃通過視覺表現(xiàn)將產(chǎn)品信息傳遞給目標(biāo)用戶的傳話人。也許有人覺得視覺傳話人的定義是否降低了一個(gè)設(shè)計(jì)師的地位和影響力姆打,但是在團(tuán)隊(duì)合作的關(guān)系中良姆,每個(gè)人都把握和銜接著工作傳遞中不可或缺的一環(huán),能夠放下身段并真正幫助團(tuán)隊(duì)幔戏,有效服務(wù)于產(chǎn)品的設(shè)計(jì)師才能最終擁有話語權(quán)和影響力玛追。”

最后,感謝我的那位朋友讓我沒有錯(cuò)過這么一本好書痊剖,所以現(xiàn)在我要運(yùn)用這本書里的技巧去做圖了韩玩。那么你要和我一起么?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末陆馁,一起剝皮案震驚了整個(gè)濱河市找颓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌氮惯,老刑警劉巖叮雳,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件想暗,死亡現(xiàn)場(chǎng)離奇詭異妇汗,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)说莫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門杨箭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來储狭,“玉大人互婿,你說我怎么就攤上這事×杀罚” “怎么了慈参?”我有些...
    開封第一講書人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長刮萌。 經(jīng)常有香客問我驮配,道長,這世上最難降的妖魔是什么着茸? 我笑而不...
    開封第一講書人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任壮锻,我火速辦了婚禮,結(jié)果婚禮上涮阔,老公的妹妹穿的比我還像新娘猜绣。我一直安慰自己,他們只是感情好敬特,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開白布掰邢。 她就那樣靜靜地躺著,像睡著了一般伟阔。 火紅的嫁衣襯著肌膚如雪辣之。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,521評(píng)論 1 304
  • 那天减俏,我揣著相機(jī)與錄音召烂,去河邊找鬼。 笑死娃承,一個(gè)胖子當(dāng)著我的面吹牛奏夫,可吹牛的內(nèi)容都是我干的怕篷。 我是一名探鬼主播,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼酗昼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼廊谓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起麻削,我...
    開封第一講書人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤蒸痹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后呛哟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體叠荠,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年扫责,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了榛鼎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鳖孤,死狀恐怖者娱,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情苏揣,我是刑警寧澤黄鳍,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站平匈,受9級(jí)特大地震影響框沟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吐葱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一街望、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧弟跑,春花似錦灾前、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至饲嗽,卻和暖如春炭玫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背貌虾。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來泰國打工吞加, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓衔憨,卻偏偏與公主長得像叶圃,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子践图,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355