眾所周知，視覺元素在網(wǎng)頁信息中扮演了舉足輕重的角色粘秆，無論是更新社交媒體上信息、還是發(fā)博客收毫、寫電子書或者在線制作幻燈片攻走，只要你產(chǎn)生的內(nèi)容包含圖像，那么你就跟視覺元素就有著指數(shù)般飆升的親密關(guān)系此再。所以昔搂，為在線內(nèi)容搭配吸引眼球的圖片就顯得如此重要，而簡(jiǎn)化高效的流程會(huì)是這一重復(fù)工作的最好的助推器输拇。本文就將逐步介紹這一簡(jiǎn)化設(shè)計(jì)流程摘符，以及文末會(huì)提供提供一個(gè)可以快速上手的文件包，幫助你輕松入門策吠，叩開那個(gè)令人興奮（而且超級(jí)酷炫）的世界的大門~

幾個(gè)月前我剛開始寫博客的時(shí)候就發(fā)現(xiàn)給每篇文章配上好看的圖片很重要逛裤，且在之后的工作中也更加肯定了這一“發(fā)現(xiàn)”，有時(shí)候出版商給我的文章配的素材圖片讓我略詫異奴曙，也不是說圖片本身不好别凹，而是有種因?yàn)椴黄ヅ涠a(chǎn)生的不穩(wěn)定感。

素材圖片真的看起來那么的...素材.... (圖片來源:Spin Sucks)

不久后我們重新包裝了自己的博客洽糟，也幾乎在同時(shí)對(duì)我們的網(wǎng)站做了一些改動(dòng)炉菲，這都迫使我們重新審視自己的形象塑造問題。根據(jù)Get Spokal的Alexandra Skey的理論坤溃，人們記住圖片的難易程度是記住文字的6倍拍霜。同時(shí)，Blogpros在研究了100個(gè)最受歡迎的博客后發(fā)現(xiàn)薪介，它們平均每350個(gè)字就會(huì)配一張圖片祠饺。根據(jù)Citrix的發(fā)現(xiàn)，接近半數(shù)的網(wǎng)民會(huì)轉(zhuǎn)發(fā)他們?cè)诰W(wǎng)上瀏覽過的圖片或者視頻汁政，因此社交媒體上圖片所扮演的角色的重要性不言而喻道偷。

鑒于此，我立志保證每個(gè)發(fā)布的內(nèi)容中（無論是博客记劈、約稿或電子書）包含10個(gè)圖片勺鸦；幾乎可以預(yù)見踐行這一承諾需要很多時(shí)間，好在作為一個(gè)設(shè)計(jì)師目木，在這條路上我并不孤獨(dú)换途，反正時(shí)間管理一直是我們面臨的很大的問題。設(shè)計(jì)師經(jīng)常往腦子里裝了很多東西想去執(zhí)行，但可能在開始之前并沒有想太多军拟，就像Pinterest停不下來的瀑布流一樣剃执，這是我們很多人“萬劫不復(fù)”的深淵，沉浸在自己YY的神圣的“靈感”中懈息。

我現(xiàn)在大概每周寫4~5篇博客肾档，所以，了解到我對(duì)哪部分成果得意忘形了吧~是啊辫继，設(shè)計(jì)部分阁最，我現(xiàn)在致力于推廣一個(gè)簡(jiǎn)化的圖片設(shè)計(jì)管理流程。事實(shí)上骇两，我的博客就是我的實(shí)踐基地，現(xiàn)在我用它發(fā)布一些我們?cè)诰€的作品姜盈，當(dāng)然低千，你也值得擁有~從網(wǎng)站圖形到白皮書，以及介于兩者之間的種種形態(tài)的圖片馏颂，我的流程一直在為他們的快速迭代生產(chǎn)而助力示血、服務(wù)著。

在實(shí)踐這個(gè)流程3個(gè)月后救拉，真心覺得這是一個(gè)超高效的的系統(tǒng)难审，而且有著任何人都可以輕松入門的零門檻，讓制作好看的圖片不僅僅是瘋狂的插畫師的專屬技能亿絮。

正確的思維模式

為簡(jiǎn)化圖片設(shè)計(jì)流程而構(gòu)建正確的思維模式

不確定性和猶豫不決是兩大高效殺手告喊，所以，我們從構(gòu)建正確的思維模式開始：

· 預(yù)設(shè)期望值派昧。

你不是在為全世界的高速公路設(shè)計(jì)廣告牌黔姜，你只是在為在線內(nèi)容配圖；所以蒂萎，擺正你的期望值秆吵。圖片創(chuàng)作并不等同于藝術(shù)創(chuàng)作，前者需要引人注意和吸引眼球五慈，它們需要借助視覺元素而增加一些趣味性纳寂，解救讀者于那些再?gòu)?qiáng)打精神也讀不完的10頁無圖片的文章。

· 就圖論圖泻拦。

我真的很喜歡創(chuàng)建圖像這一環(huán)節(jié)毙芜，因?yàn)槊繌垐D的背后都包含了太多的含義。那么問題來了聪轿，你怎樣將自己的工作轉(zhuǎn)化為圖片呢爷肝？倒不是說圖一定要代替文本，只要它能在讀者通讀文章的時(shí)候提升整體閱讀觀感、突出重點(diǎn)灯抛、提升閱讀趣味性就好金赦。換句話說，主要目標(biāo)是創(chuàng)造一些不破壞整體和諧感的吸睛之筆对嚼。

· 設(shè)置時(shí)限

時(shí)限對(duì)設(shè)計(jì)師來說大有裨益夹抗，通常我感覺首先產(chǎn)生的想法總是永遠(yuǎn)的處于執(zhí)行ing的狀態(tài)，所以給每張圖分配一個(gè)5~10分鐘的時(shí)限吧（給之后的想法留點(diǎn)空間）纵竖。之后快速分析候選項(xiàng)漠烧，在時(shí)間框架內(nèi)選出可實(shí)施性最高的。試著挑戰(zhàn)一下堅(jiān)持那個(gè)時(shí)限靡砌，例如我想要在這里插入一個(gè)圖片已脓，說明如何建立正確的思維模式。起初通殃，我在想一個(gè)引人注意的頭部與直觀可見的大腦的形狀度液，最好來點(diǎn)閃電光束什么的~過程有點(diǎn)痛苦，而且可能最后也沒什么意義画舌，但這都不重要堕担，最后，大腦+燈輻射出的光束=完成曲聂！

準(zhǔn)備工作

從眾多的圖標(biāo)中開始吧

其實(shí)準(zhǔn)備工作往往是最重要的部分霹购，雖然它之后可能只是湮沒在復(fù)制粘貼的流程中，雖然如果你想做的全面一些朋腋，羅列圖標(biāo)就會(huì)花掉你一天的時(shí)間齐疙，不過相信我，這一切都是是值得的旭咽。在過去的幾年中我都一直在收集它們剂碴，有時(shí)候畫一些，有時(shí)候買一些轻专。

復(fù)制粘貼出一個(gè)屬于自己的海量圖標(biāo)庫(kù)

如果你做設(shè)計(jì)也有一段時(shí)間了忆矛，那么或許曾經(jīng)的圖標(biāo)都散落在各個(gè)做過的項(xiàng)目中，現(xiàn)在是時(shí)候規(guī)整一下了请垛，整理一個(gè)大的文件包催训，如上圖所示。不過其實(shí)初始數(shù)量沒有那么重要宗收，可以使用一些開源的包去豐滿它漫拭。坦白的說，Smashing Magazine一直是我重要的素材來源之地混稽。

整理好的一系列Logo

·Freebie: Dashel Icon Set (45 Icons, SVG, PSD, PNG)

·Freebie: Swifticons Icon Set (92×3 Icons, AI, Sketch, PNG, SVG, EPS, PDF)”

·Freebie: Roundicons Icon Set (60 Icons, PNG, SVG, EPS, AI)

·Freebie: Responsive and Mobile Icon Set (100 Icons, PNG, PSD)

·Freebie: Tourism and Travel Icon Set (100 Icons, PNG, SVG)

·Polaris UI Kit + Linecons Icon Set (AI, PDF, PNG, PSD, SVG)

·Freebie: Boldons Icon Set (45 Icons, PNG, AI)”

當(dāng)你在匯總整理你的圖標(biāo)時(shí)采驻，也要考慮收集一些Logo,你可以在搜索引擎找到任何品牌的矢量圖標(biāo)下載审胚，Brand of the World也是另一個(gè)可以發(fā)現(xiàn)優(yōu)質(zhì)Logo的地方。

既然矢量圖標(biāo)隨處可得礼旅，那么收集海量的圖標(biāo)就真的比你想象的要簡(jiǎn)單的多（縱然你現(xiàn)在的圖標(biāo)庫(kù)里還空空如也）膳叨。不過在使用它們之前，一定要確保版權(quán)可用問題痘系，確認(rèn)無誤后才萬事俱備菲嘴。

如果你對(duì)你收集的圖標(biāo)感到滿意，那就歸檔到一個(gè)文件夾里汰翠。我發(fā)現(xiàn)整理圖標(biāo)并分組很有用龄坪，因?yàn)楹芏鄷r(shí)候找圖標(biāo)會(huì)浪費(fèi)掉很多時(shí)間；總是隱約記得曾經(jīng)存過复唤，但是怎么也找不到的情況太常發(fā)生了健田。

對(duì)圖標(biāo)進(jìn)行分組管理

在整合圖標(biāo)集的時(shí)候，你需要找到哪些是與你的內(nèi)容相關(guān)的佛纫。雖然許多通用圖標(biāo)適用于任何人抄课，但你總有自己的選擇，所以列出所有分組雳旅，包括你自己獨(dú)特的那一組~

各種各樣的箭頭

標(biāo)點(diǎn)符號(hào)和字母

PC操作圖標(biāo)(保存、回收,下載,上傳,點(diǎn)擊,指向,等等）

設(shè)置和管理(工具间聊、鎖攒盈、齒輪、指南,等等)

與時(shí)間相關(guān)的圖標(biāo)(時(shí)間哎榴、時(shí)鐘型豁、日歷、通知）

設(shè)備(電腦尚蝌、ipad迎变、手機(jī)、網(wǎng)頁飘言、書籍衣形、相機(jī)、等等)

數(shù)據(jù)可視化

排版

各種類型的媒體(圖片姿鸿、資料谆吴、視頻、音樂)

人物和情緒

社交媒體圖標(biāo)（包括大眾的和小眾的）

溝通方式(電子郵件苛预、發(fā)送句狼、對(duì)話、演講热某、報(bào)價(jià)腻菇、共享胳螟、反饋,等等)

其他

貨幣與電子商務(wù)

最近，我開始設(shè)計(jì)一些由一個(gè)圖標(biāo)延伸變化出不同圖標(biāo)筹吐，我喜歡嘗試不同的風(fēng)格和顏色糖耸。所以，當(dāng)你設(shè)計(jì)圖標(biāo)時(shí)骏令，大膽的突破有助于構(gòu)建其他的風(fēng)格：色塊蔬捷、輪廓、紋理等榔袋。

由一個(gè)icon延伸出的其他形式

當(dāng)你完成了圖標(biāo)歸檔工作周拐，你會(huì)發(fā)現(xiàn)你會(huì)在很多場(chǎng)景下都可以復(fù)用它，不僅僅是在發(fā)布博客的時(shí)候使用凰兑，我把我自己的收集都做成了web字體妥粟，它值得我為此付出過的一切（當(dāng)然，用不到的就要大膽的刪）

靈感收集

第二件我發(fā)現(xiàn)很有用的事是把激起過靈感的素材整理為一個(gè)文件夾吏够，正如很多人在做的一樣勾给，收集針對(duì)特定風(fēng)格的圖片，我真的很愛CoSchedule,Quick和Refinery29所使用的風(fēng)格锅知，我也在我的博客中經(jīng)常提到它們播急。所以，在Pinterest上Pin住能帶給你靈感的圖片售睹，或者down下來存在文件夾中桩警。

因?yàn)槲矣姓韽?qiáng)迫癥，我會(huì)按照風(fēng)格給我收集的一切歸類（圖標(biāo),模板,象形圖,圖表捶枢、輪廓烂叔、拼貼畫,等等），當(dāng)你設(shè)計(jì)圖像時(shí)术瓮，與一群不同風(fēng)格的元素共舞是很有趣的胞四。

制作一個(gè)風(fēng)格（能刺激靈感的）文件夾

色彩組合

在這個(gè)設(shè)計(jì)流程中氓侧，最后一個(gè)我發(fā)現(xiàn)很有用的環(huán)節(jié)是收集各種不同的色彩組合，我偏愛明亮而溫和的色彩組合独郎，不過這只是個(gè)人喜好啦氓癌。

最簡(jiǎn)單的收集方法是找到你很喜歡它的顏色的圖片贫橙，然后取樣它的配色方案卢肃，類似下圖（為了讓你關(guān)注顏色本身莫湘，我對(duì)圖片做了模糊處理）幅垮，這張圖片有著搭配很棒的色彩組合。

收集多種配色方案

再一次強(qiáng)調(diào)，整理它們真的超級(jí)有用！預(yù)制好配色方案可以讓我提前想好哪些顏色間比較搭配跑杭，這好過我做新項(xiàng)目的時(shí)候臨時(shí)想。這樣萨螺，我只要選擇合適的一組，而不需要進(jìn)一步思考配色方案椭盏，因?yàn)槲乙呀?jīng)知道這些顏色彼此之間已經(jīng)很搭配啦。

將色塊整理成相得益彰的配色方案

終于該開始設(shè)計(jì)圖片了

如前文所提到的一樣掏颊，在此之前所做的一切工作都屬于“復(fù)制-粘貼”工作流的一部分（收集的圖標(biāo)、風(fēng)格和色彩組合）乌叶，之后你可以在你想要?jiǎng)?chuàng)作的內(nèi)容中無縫銜接這些元素，對(duì)于提升效率非常有幫助枉昏。

設(shè)計(jì)過程開始于定風(fēng)格和色調(diào)陈肛，之后，選擇一個(gè)最能代表你內(nèi)容的圖標(biāo)句旱，將圖標(biāo)轉(zhuǎn)換成你預(yù)定的風(fēng)格和配色方案。我將用一些例子來說明這一過程

過程的過

我們第一次使用這個(gè)流程是要為一篇文章重點(diǎn)突出12個(gè)條目，為此，我想為這12項(xiàng)中的每一項(xiàng)配圖，所以我從在自己的圖標(biāo)庫(kù)里找圖標(biāo)開始豹爹，找到12個(gè)對(duì)應(yīng)的圖標(biāo)大概花了我10分鐘光稼，雖然這12個(gè)圖標(biāo)中有些更有針對(duì)性，有些稍微弱一些孩等，但每個(gè)都可以模糊的代表對(duì)應(yīng)的列表項(xiàng)艾君。BTW，如果你想讓過程盡可能簡(jiǎn)單肄方，也可以選用自己拍照的方式冰垄。

決定風(fēng)格與配色方案的圖標(biāo)集

確定一個(gè)可以模仿的風(fēng)格

對(duì)了，在挑選圖標(biāo)之前权她，我選擇了一個(gè)可以模仿的風(fēng)格和配色方案（這些都從我的收集中挑選）—明快的風(fēng)格播演，我選擇了純色色塊的簡(jiǎn)單圖標(biāo)冀瓦，明亮的背景色和明顯的輪廓線。

在顏色方面写烤，首先我確定我需要至少12種顏色翼闽，因?yàn)槲蚁Ｍ謩e突出這12項(xiàng)，最后的配色方案的選擇落在了堅(jiān)固趣味性和明快色彩的方案上洲炊。

確定配色方案

根據(jù)我選出的配色方案感局，最后一件需要做的事情就是把圖標(biāo)、風(fēng)格和配色方案組合起來暂衡，這一環(huán)節(jié)大概要花30~40分鐘询微，下圖就是你看到的成果啦。

組合你的圖標(biāo)狂巢、風(fēng)格和配色方案

最后我要做一下封面圖像撑毛，為此，我再次利用了下這些圖像唧领，然后配上標(biāo)題藻雌；這一步驟需要15分鐘。

再利用那些圖形去做一個(gè)封面

該說的都說了斩个，該做的也都做了胯杭，我設(shè)計(jì)完成了一套包含12個(gè)圖標(biāo)的博客配圖，外加一個(gè)封面受啥，整個(gè)過程卻只花了1個(gè)小時(shí)做个，好棒。

流程外的延伸

上述過程之美就在于滚局，我可以用同一種插畫風(fēng)格創(chuàng)作一系列圖像居暖，或者之后從那種風(fēng)格擴(kuò)展出去也會(huì)容易很多。在下面將要介紹的例子中藤肢，你會(huì)看到那種插畫風(fēng)格非常接近我上文制作的那一套太闺。只是下圖更為復(fù)雜，而且引入了文字元素去增加一點(diǎn)趣味性谤草，否則就太干巴巴的感覺了跟束。感覺“blog post was about the US Federal Trade Commission“（美國(guó)聯(lián)邦貿(mào)易委員會(huì)）就是最干巴巴的代表莺奸。

從同一種插畫風(fēng)格延伸出的不同套圖

如果你想探求更多的多樣性丑孩，你可以將插畫風(fēng)格和內(nèi)容聯(lián)系起來，之前我不是選擇了加粗的輪廓和明亮的色彩么灭贷；如果我對(duì)此感覺良好的 話温学，我會(huì)嘗試一組拋棄顏色而更注重線條和紋理的圖像。這種轉(zhuǎn)變并不難甚疟，而且會(huì)為你的內(nèi)容增加很多趣味多樣性仗岖。

通過延伸插畫風(fēng)格來增加多樣性

這里的過程之美也在于它一直是很靈活機(jī)動(dòng)的逃延，你可以花更多的時(shí)間去創(chuàng)作細(xì)節(jié)更豐富的圖像（像上面的線圖），或者你也可以偷懶去做看得過去的圖像轧拄。有時(shí)候我很急的時(shí)候揽祥，我只是將圖標(biāo)置于色塊背景上來來制作圖像，這略微有一點(diǎn)點(diǎn)逃避檩电，不過事實(shí)它也確實(shí)是張圖而且也能夠承載一些視覺趣味性拄丰。

急用的時(shí)候，通過簡(jiǎn)單的圖標(biāo)加彩色背景才創(chuàng)作圖片俐末。

Get這個(gè)技能后料按，你也能夠依照此輕松的制作圖表。

當(dāng)我開始創(chuàng)作圖表的時(shí)候卓箫，我驚喜的發(fā)現(xiàn)這一流程也適用于此载矿。我選擇一個(gè)自己滿意的配色方案、插畫風(fēng)格烹卒。大部分素材源于我平時(shí)的手機(jī)闷盔，所以這會(huì)節(jié)省不少時(shí)間，自始至終甫题，一天就夠了馁筐。

這簡(jiǎn)直是通往優(yōu)質(zhì)圖表的捷徑，（圖片來源：The Shelf）

整個(gè)過程就是再利用坠非、篩選混合素材敏沉，然后與心智模型匹配的過程。

“膽大心細(xì)”的取舍來進(jìn)一步簡(jiǎn)化

聚合新圖像

當(dāng)你要配圖的內(nèi)容很多的時(shí)候炎码，你就需要第四種資源了：迄今為止你設(shè)計(jì)過的所有圖片盟迟。這樣你創(chuàng)作的起點(diǎn)就是你曾經(jīng)設(shè)計(jì)過的圖片，而不是那些最基本的圖標(biāo)潦闲，有時(shí)候你可以重復(fù)再利用曾經(jīng)的作品攒菠。

當(dāng)我很趕時(shí)間的時(shí)候，我往往花10分鐘時(shí)間去拼湊圖片歉闰，僅僅混合辖众、匹配和改變一些顏色。

重復(fù)利用曾經(jīng)的作品

我經(jīng)常再利用自己在博客中Po出過的圖和敬。

重復(fù)利用自己的作品

我會(huì)給舊作加個(gè)背景色凹炸、配上文字和陰影；啊哦昼弟，頭條新鮮出爐~

稍加改動(dòng)就是一張新的圖

@時(shí)注意社交屬性

當(dāng)你設(shè)計(jì)圖片的時(shí)候啤它，考慮到社交媒體屬性會(huì)幫你節(jié)省不少時(shí)間。我們會(huì)在Google Drive的文件夾中保留所有我做過的圖片的副本，以及組成它們的配色方案变骡。這樣离赫，任何人隨時(shí)隨地都可以輕松的訪問它們，并且在社交媒體轉(zhuǎn)載塌碌，對(duì)大家來說都是不錯(cuò)的范例渊胸。對(duì)社交媒體來說，強(qiáng)有力的視覺元素很重要台妆，否則用戶就會(huì)迷失在無聊的微博（tweets）和帖子里蹬刷。根據(jù)According to Business 2 Community的調(diào)查報(bào)告，比起純文本频丘，配圖的微博(tweets)點(diǎn)擊率高18%办成，喜愛數(shù)高150%。

資源在網(wǎng)上存檔好

通用標(biāo)題圖片

最后搂漠，有一套可以快速?gòu)?fù)用的通用題圖圖片很有價(jià)值迂卢。好吧，隨著這聽起來有點(diǎn)偷工減料的嫌疑桐汤，不過對(duì)于完成工作來說是很有用的而克。你可以更換顏色、圖標(biāo)和文本怔毛，換上有時(shí)效性的新圖片员萍。題圖要承載足夠的視覺沖擊力和吸睛力，記得要結(jié)合文本拣度。

快速創(chuàng)建題圖

收工

如果你要發(fā)布的內(nèi)容很多碎绎，那么高質(zhì)量的圖片對(duì)于維持用戶的專注度和留存率來講就很重要】构或許與時(shí)下流行的看法相反筋帖，我覺得你不必依賴于一些世俗的素材（就像文章開頭那個(gè)火柴的圖片，就是它促使我想要整理這一設(shè)計(jì)流程來改變一些現(xiàn)狀）冤馏，而根據(jù)上文所提到的流程來輕松的制作屬于自己的圖片顯得有價(jià)值得多日麸，對(duì)于高效的線上發(fā)布來說，簡(jiǎn)化的流程顯得非常的可愛逮光。只要你在正確的方向上努力著代箭，你會(huì)為此受益良多。

免費(fèi)下載

所以涕刚，本著提升速度嗡综、效率和趣味性的初衷，我們提供了一個(gè)可下載的AI文件來幫你啟程副女。包括文章中用過的圖像類型：簡(jiǎn)單的圖標(biāo)蛤高、花哨的小標(biāo)題，改動(dòng)后的圖標(biāo)碑幅，標(biāo)題模板戴陡，還有一套驗(yàn)證過的配色方案！Enjoy你的設(shè)計(jì)吧~