首頁

設(shè)計(jì)思維工作坊—頭腦風(fēng)暴法

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在我們的設(shè)計(jì)工作當(dāng)中最不可缺乏的就是創(chuàng)意了,那這種創(chuàng)意是從何而來呢?當(dāng)我們拿到一個(gè)項(xiàng)目時(shí)最熟悉不過的流程的就是小組討論,那小組討論中占據(jù)大部分的就是“頭腦風(fēng)暴”了,我們先來系統(tǒng)介紹一下頭腦風(fēng)暴。 

【一】什么是頭腦風(fēng)暴法?

頭腦風(fēng)暴法(Brain storming), 該方法主要由價(jià)值工程工作小組人員在正常融洽和不受任何限制的氣氛中以會(huì)議形式進(jìn)行討論、座談,打破常規(guī),積極思考,暢所欲言,充分發(fā)表看法。它最早是精神病理學(xué)上的用語,指精神病患者的精神錯(cuò)亂狀態(tài)而言的,如今轉(zhuǎn)而為無限制的自由聯(lián)想和討論,其目的在于產(chǎn)生新觀念或激發(fā)創(chuàng)新設(shè)想。 

 

【二】頭腦風(fēng)暴法的組織形式

1)設(shè)主持人一名,主持人只主持會(huì)議

2)設(shè)置記錄員1-2名,要求認(rèn)真將與會(huì)者每一設(shè)想不論好壞都完整記錄下來

3)小組人數(shù)一般為6-10人

4)最好由不同專業(yè)或不同崗位者組成

5)時(shí)間一般為20-60分鐘;(發(fā)散/收斂/整理3回合)

主持人和主持的注意事項(xiàng):

1)提前了解會(huì)議主題及可能的引言內(nèi)容

2)控制好自己主持人的氣場

3)控制好時(shí)間

4)照顧好每一位成員;讓每個(gè)人都能發(fā)言

5)引導(dǎo)會(huì)議流暢展開

6)保持團(tuán)隊(duì)積極參與氣氛

7)適度延伸發(fā)展發(fā)言者的想法

8)隨機(jī)應(yīng)變   

【三】頭腦風(fēng)暴法遵循的主要原則

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求質(zhì)

         

       (4)搭便車,想法無專利

        

焦點(diǎn)時(shí)刻: 

      藍(lán)藍(lán)設(shè)計(jì)組織部分小組成員以“如何成為一家很牛的UI設(shè)計(jì)公司?”為主題進(jìn)行了一次頭腦風(fēng)暴活動(dòng)。我們將過程做了一下梳理。 

   (1)主持人引言之后,與會(huì)者每個(gè)人進(jìn)行了積極地思考并將想法寫在便利貼上

        

   (2)每人根據(jù)自己的想法暢所欲言,并延伸其他人的想法。

   (3)將便利貼適度的分類整理。

        

   (4)最后我們整理出來了結(jié)果(wow!/有了更好/基礎(chǔ)的     

     

             



總結(jié): 

腦力激蕩并不是為了提出主意讓他人去評(píng)估和選擇。通常在最后階段,本組成員會(huì)自己評(píng)估這些主意并從中挑選出解決問題的方法貫徹整個(gè)解決方案的每一步都必須對(duì)小組成員透明,并有責(zé)任分配給每一人以便他們?cè)谄渲袚?dān)任重要的角色。在項(xiàng)目還未明朗時(shí),必須有一個(gè)共同的決策過程來推進(jìn)協(xié)作努力的成果并對(duì)任務(wù)進(jìn)行重新分配。在重要轉(zhuǎn)折點(diǎn)上,需要有評(píng)判標(biāo)準(zhǔn)來決定小組討論是否朝著最終的答案行進(jìn)。在整個(gè)過程中需要不斷的鼓勵(lì),以便讓參與者保持他們的熱情。

 通過這個(gè)過程,員工的親身參與,對(duì)“很棒的UI設(shè)計(jì)公司”的定義,再落實(shí)行動(dòng),向著WOW的方面努力!

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

不會(huì)做插畫banner? 請(qǐng)用DIY時(shí)尚人物素材

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

不懂手繪,但又想做插畫風(fēng)格的Banner?那就必須看看今天分享給大家的 humaaans 人物插畫素材庫,它由 Pablo Stanley 設(shè)計(jì)師設(shè)計(jì),是一套符合現(xiàn)代扁平化設(shè)計(jì)風(fēng)格插畫素材,而它最大的特色是組件化繪制,用戶可通過素材庫的元素自行 DIY 成不同形象的插畫,適用于網(wǎng)頁、移動(dòng)UI、以及 PPT 等用途。

DIY插畫介紹

目前該素材包含有人物及場景元素,但最多的是以人物為主,包含有不同的頭像、服飾、襪子,讓用戶能自由 DIY,就像下面演示圖一樣:

如果你是 Sketch 的用戶,還可能利用 Sketch Symol 功能來款式,更加方便。

沒有 Sketch 軟件也不用擔(dān)心,設(shè)計(jì)師將每個(gè)元素導(dǎo)出成 PNG/SVG 格式以及@2X大小版本,SVG 也是矢量格式,所以用 Photoshop 或 Ai 去自己 DIY 就行。

注:如果 Sketch 版打不開,通常是因?yàn)槟愕陌姹具^低造成的,只要更新新版本就可以了。

還有幾個(gè)場景可以切換:

humaaans 的設(shè)計(jì)元素包含男女生頭像和服飾,個(gè)個(gè)都是年輕貌美啊,穿著都非常時(shí)尚呢……

這素材能用在什么地方?

網(wǎng)頁 Banner:

這么漂亮的時(shí)尚的插畫,不用在網(wǎng)頁上就是浪費(fèi)啊,但不建議直接使用,要要學(xué)會(huì)怎么去 DIY,通過設(shè)置大小、比例、旋轉(zhuǎn)以及更改成和你界面一致的配色,讓 UI 統(tǒng)一這樣才算完美哦。

APP 啟動(dòng)界面

做移動(dòng)端的引導(dǎo)頁也很好看。

插畫海報(bào):

做一個(gè)這樣的賀卡、海報(bào)是不是也很 Nice?

 

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

網(wǎng)易嚴(yán)選的插畫是如何繪制的?設(shè)計(jì)師用了這個(gè)流程!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

插畫在中國被俗稱為插圖,有著非常悠久的歷史,最早在佛教文化中出現(xiàn),以「變相」圖解宣傳佛教教義,如今一般指為企業(yè)、產(chǎn)品、服務(wù)所繪制的圖畫的一種藝術(shù)形式。作為現(xiàn)代設(shè)計(jì)的一種重要的視覺傳達(dá)手法,插畫以其直觀的形象性,真實(shí)的生活感和美的感染力,廣泛應(yīng)用于現(xiàn)代設(shè)計(jì)的多個(gè)領(lǐng)域,涉及到企業(yè)宣傳、社會(huì)文化活動(dòng)、影視文化等諸多領(lǐng)域。

插畫一方面富于靈活表現(xiàn),可根據(jù)設(shè)計(jì)師思維和想法進(jìn)行各類創(chuàng)意,適用于各類視覺主題,另一方面又與嚴(yán)選簡約、精致的品牌形象契合度較高,因而是嚴(yán)選專題設(shè)計(jì)的一個(gè)主要表達(dá)方向,經(jīng)常在嚴(yán)選各類專題設(shè)計(jì)中得到應(yīng)用,受到廣大用戶的喜愛與推崇。

許多剛?cè)胄械囊曈X設(shè)計(jì)師認(rèn)為插畫風(fēng)格專題設(shè)計(jì)需要非常專業(yè)的插畫功底才能完成,因而盡管覺得插畫風(fēng)格專題唯美、形象卻敬而遠(yuǎn)之不敢輕易嘗試,今天個(gè)人從以下五個(gè)步驟去解構(gòu)插畫風(fēng)格專題設(shè)計(jì),通過相對(duì)簡單易學(xué)的基本操作,讓沒接觸過插畫風(fēng)格的設(shè)計(jì)師也能輕松駕馭與運(yùn)用。

嚴(yán)選插畫風(fēng)格設(shè)計(jì)五部曲

整體構(gòu)思

和所有風(fēng)格的視覺設(shè)計(jì)一樣,插畫風(fēng)格設(shè)計(jì)首先也需要進(jìn)行整體的需求分析,主要進(jìn)行以下方面工作。

1. 分析受眾與目標(biāo)

首先需要對(duì)專題的受眾進(jìn)行簡單的社會(huì)化分析,通過分析大體了解受眾的年齡層次、收入水平、審美品味、興趣愛好等,根據(jù)社會(huì)化特征信息建立用戶畫像,有利于設(shè)計(jì)方向與基調(diào)的確定。比如嚴(yán)選的目標(biāo)用戶定位于20-35歲,具有穩(wěn)定的工作與收入,追求高品質(zhì)生活的都市白領(lǐng)。

其次需要深入分析專題所需要表達(dá)的目標(biāo)和信息,通過色調(diào)、版式、字體、元素等設(shè)計(jì)手法準(zhǔn)確傳達(dá)信息內(nèi)容的同時(shí),帶給用戶更多美的感受,升華主題思想,強(qiáng)化品牌概念與服務(wù)。

2. 確定情感關(guān)鍵詞

所謂情感關(guān)鍵詞,就是我們產(chǎn)品的視覺所要表達(dá)的情感感受,比如情人節(jié)專題確定的「浪漫」、「溫馨」、「甜蜜」,新年專題的「喜慶」、「歡快」、「熱烈」,父親節(jié)的「責(zé)任」、「擔(dān)當(dāng)」、「感恩」等等。確定好專題活動(dòng)的關(guān)鍵詞后,將有助于我們進(jìn)行整體風(fēng)格的把握與塑造。

3. 整體意境構(gòu)思

確定好專題的方向后,接下來就可以構(gòu)思整體的意境以及挑選合適的素材,如新年專題我們會(huì)想到用大面積紅色作為主色調(diào)的布局,結(jié)合鞭炮、春聯(lián)、燈籠、年畫等中國傳統(tǒng)元素,通過合理的組織和編排,加上中國風(fēng)的字體設(shè)計(jì)與適當(dāng)?shù)募?xì)節(jié)完善,共同勾勒營造一派喜慶祥和的氣象。

提取輪廓

基于前一步驟的構(gòu)思的整體意境,我們需要對(duì)挑選的現(xiàn)實(shí)素材進(jìn)行插畫化改造。通常我們通過鼠標(biāo)勾選的形式,將素材的輪廓勾勒出來并填充相應(yīng)的顏色,使寫實(shí)的風(fēng)格形象化、概括化和扁平化。

簡化圖形

插畫風(fēng)格相對(duì)實(shí)物風(fēng)格,去掉了大量的寫實(shí)細(xì)節(jié),只保留主要的特征信息因而顯得扁平簡約但不失形象生動(dòng)。因此在這個(gè)步驟我們需要將勾勒好的圖形進(jìn)行簡化操作,以簡單圖形代替寫實(shí)描繪、多以面和色塊去代替原有的細(xì)節(jié),簡化后的圖形具有高度的概括性。

完善細(xì)節(jié)

除了保證插畫的形象性與直觀性外,我們需要進(jìn)一步對(duì)素材進(jìn)行細(xì)節(jié)上的完善,以滿足進(jìn)一步的審美性與趣味性,同時(shí)賦予元素一些創(chuàng)造性,可以嘗試通過以下方法進(jìn)一步完善。

1. 移花接木

移花接木指將現(xiàn)實(shí)中不同時(shí)間和空間各類元素進(jìn)行解構(gòu)和重組,創(chuàng)造出一些妙趣橫生的新事物,增加插畫內(nèi)容的趣味性。

2. 區(qū)分主次

將重要的、核心的元素進(jìn)行強(qiáng)調(diào)刻畫、次要的元素進(jìn)行弱化處理,從而拉開主次元素的層次關(guān)系,使畫面更加具有層次感和空間感。

3. 突破現(xiàn)實(shí)

通過調(diào)整元素間的比例關(guān)系,夸張的創(chuàng)造現(xiàn)實(shí)中并不存在的事物,更加容易吸引用戶的目光焦點(diǎn)。

優(yōu)化整體

經(jīng)過以上的步驟,我們的素材基本已完成插畫風(fēng)格的改造,但插畫素材在整體專題界面中并非孤立的存在,而是和整體色調(diào)風(fēng)格、版式、字體設(shè)計(jì)形成一套有機(jī)和諧的整體,共同去呈現(xiàn)專題需要表達(dá)的信息與目標(biāo)。

案例分析

1. 千萬和春住專題

整體構(gòu)思

情感關(guān)鍵詞:清新、唯美

整體意境構(gòu)思:以嫩綠色作為主色調(diào),結(jié)合桃花、陽光、汽車、風(fēng)箏營造輕松出游踏青的歡快意境。

提取輪廓

從田野、桃花等幾張現(xiàn)實(shí)圖片中將頁面需求的主體元素進(jìn)行提取,作為背影進(jìn)行主體頁面的大面積輔色,將整體的色調(diào)感覺搭建出來。

簡化圖形

初步提取的輪廓由于過于具象,與唯美的主題風(fēng)格不太協(xié)調(diào),在這一步我們將主體元素進(jìn)行簡化處理,用圓潤、可愛的幾何圖形加上明快的色塊去代替樹木,整體更加扁平、卡通化,營造更加輕松、自由的氛圍。

完善細(xì)節(jié)

為了更好的體現(xiàn)春天外出郊游的意境,我們對(duì)細(xì)節(jié)進(jìn)行完善,增加了汽車、風(fēng)箏等小元素,將桃花進(jìn)行樹枝刻畫、太陽光芒的刻畫等處理,同時(shí)將遠(yuǎn)處山景進(jìn)行虛化,形成層巒疊障的連綿山脈,拉開了畫面的層次空間。

優(yōu)化整體

最后我們根據(jù)主題進(jìn)行專題的字體設(shè)計(jì),將常規(guī)的宋體進(jìn)行變形處理,部分筆劃好似春風(fēng)輕撫而飄逸,又加上了象征春天生機(jī)勃勃的嫩芽,富有生活趣味。通過一片桃花作為主體分別呈放若遇到新歡、若重拾舊愛的對(duì)應(yīng)專題好禮,使頁面整體和諧統(tǒng)一。

2. 愛戀物語專題

目標(biāo):呈現(xiàn)出情人節(jié)情侶間的愛情的甜蜜與浪漫。

情感關(guān)鍵詞:浪漫、甜蜜

整體意境構(gòu)思:以甜美暖色作為主色調(diào),通過主體元素禮物盒與情侶間夸張的比例關(guān)系抓住用戶眼球,浪漫甜美同時(shí)不失趣味性。

3. 新春集市新年專題

目標(biāo):呈現(xiàn)出春節(jié)喜慶熱鬧與琳瑯滿目的商品。

情感關(guān)鍵詞:喜慶、熱鬧

整體意境構(gòu)思:以中國傳統(tǒng)舞獅、牌樓、鞭炮等作為主體元素,谷倉作為次要元素,前后對(duì)比主次分明、空間感強(qiáng),呈現(xiàn)了新春集市的縱深與五谷豐登的產(chǎn)品,整體氛圍熱烈喜慶,激發(fā)用戶的購買欲望。

總結(jié)

插畫風(fēng)格的表達(dá),既遵循著藝術(shù)設(shè)計(jì)的通用規(guī)則,又具備自身獨(dú)特的審核特征,需要設(shè)計(jì)師更多去發(fā)現(xiàn)生活中的美,通過以上五部曲將生活中各類元素進(jìn)行不斷的重組、創(chuàng)造,在專題中進(jìn)行特有的形象性、生動(dòng)性、趣味性、創(chuàng)造性的藝術(shù)表達(dá),從而豐富專題內(nèi)容,更好傳達(dá)專題思想。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

過稿神器-動(dòng)效視覺的影響力

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

老話說得好,人靠衣裝設(shè)計(jì)靠包裝。無論你是UI設(shè)計(jì)師/UX設(shè)計(jì)師/App獨(dú)立開發(fā)者,一個(gè)好的展示模板能讓你的作品瞬間提升氣質(zhì),在交稿時(shí)俘獲甲方爸爸躁動(dòng)的心。

今天神器小分隊(duì)帶來的這個(gè)神器,可以幫你快速生成UI界面的3D展示效果;無需學(xué)建模、無需學(xué)AE,只需要簡單幾步,就能產(chǎn)出堪比蘋果宣傳片的展示動(dòng)效,簡直方便到?jīng)]朋友。

DesignCamera

下載鏈接:https://www.designcamera.app/download

△ Howard Pinsky@Pinsky

△ 官網(wǎng)演示

首先,點(diǎn)開軟件下載主頁→https://www.designcamera.app/download

打開網(wǎng)頁就能看到這樣的界面,非常簡單,點(diǎn)擊右上角的「Download」即可下載軟件包。

解壓后直接就是 Design Camera 的應(yīng)用程序了,雙擊打開即可。

軟件的界面也非常簡單:

一時(shí)間記不住這么多控件?沒關(guān)系,跟著木木玩一遍就學(xué)會(huì)啦~

入門玩法:一鍵拖拽,平面變3D

只需要將圖片素材(支持JPG和PNG格式)拖入 Design Camera 的樣機(jī)內(nèi),就可以直接獲得一個(gè)3D模型。

可以修改陰影、背景顏色(包括透明背景)、機(jī)身顏色以及環(huán)境。

除了可以點(diǎn)擊上方的預(yù)設(shè)切換顯示,更能自由點(diǎn)擊拖動(dòng)改變3D模型的角度。

其中,按住「Alt」鍵時(shí),鼠標(biāo)滾輪為縮放,點(diǎn)擊拖動(dòng)為平移。

完成修改后,只需要點(diǎn)擊最上方的「Snapshot」即可獲取一張3840×2160分辨率的Png。

特別注意的是,右下角的縮略圖是可以直接拖拽進(jìn)軟件中作為素材的。

基礎(chǔ)玩法:視頻展示也能一鍵3D

同理,只需要把視頻素材拖進(jìn) Design Camare 的模型里即可,上述的參數(shù)均能修改。

完成修改后,如果覺得不夠豐富,還可以打開動(dòng)效欄,點(diǎn)擊上方的「Live capture」錄制視頻;接著只需要在「Presets」里選擇喜歡的動(dòng)效,然后再次點(diǎn)擊「Live capture」即可完成錄制。

點(diǎn)擊下方的「Export Mov」就能獲得一個(gè)mov格式的高清視頻(最高支持4K)。

當(dāng)然,你也可以選擇安裝之前美丫姐推薦過的Gifski(Appstore下載,快速視頻轉(zhuǎn)GIF,可調(diào)整幀數(shù)畫質(zhì)),與Gifski 聯(lián)動(dòng)的 Design Camera 能在你點(diǎn)擊「Gif」時(shí)快速啟動(dòng)Gifski,幫助你一鍵轉(zhuǎn)動(dòng)圖。

進(jìn)階玩法:自定義動(dòng)畫

除了上述的預(yù)設(shè)動(dòng)畫以外,Design Camera還支持自定義動(dòng)畫,操作起來也是很簡單。

只需要你選擇幾個(gè)關(guān)鍵幀,它就能自動(dòng)為你添加酷炫到?jīng)]朋友的緩動(dòng)動(dòng)畫。

木木隨便設(shè)了3幀,再隨便點(diǎn)擊關(guān)鍵幀,大片即視感的展示動(dòng)畫就做好了。

高級(jí)玩法:連接蘋果手機(jī),實(shí)時(shí)動(dòng)效展示

看到界面左上角的這個(gè)充電線標(biāo)志了嗎?

當(dāng)你的電腦插上蘋果手機(jī),它就會(huì)變成這樣:

然后你就可以直接在 Design Camera 里看到手機(jī)界面的操作,再加上動(dòng)效。非常適合App展示和游戲展示。

大神玩法:導(dǎo)入Sketch,一鍵變多維3D

只是簡單的動(dòng)效怎么夠?Design Camera還支持 Sketch文件導(dǎo)入。

首先,打開Sketch文件和Design Camera,然后全選已經(jīng)分好組的頁面,快捷鍵「Ctrl+Alt+E」,就能一鍵導(dǎo)入Design Camera了。

分組會(huì)直接影響空間感的效果哦~

接著,我們可以在「Lens」中為模型加入一些攝影景深的感覺,讓它的空間感更強(qiáng)烈一些。

勾選「Focus Blur」,修改焦距等數(shù)值,鼠標(biāo)點(diǎn)擊處即為焦點(diǎn)所在。

用改變焦點(diǎn)的方法,創(chuàng)建不同的關(guān)鍵幀,超強(qiáng)的空間感動(dòng)畫就做成了。

Design Camera 操作簡單易上手,幾秒鐘的拖拖拽拽,就能實(shí)現(xiàn)蘋果宣傳片級(jí)別的流暢展示動(dòng)畫,簡直太良心了。

目前,Design Camera正在開放公測(cè),是免費(fèi)直接下載使用全部功能的。機(jī)不可失時(shí)不再來,心動(dòng)的小伙伴趕緊用起來吧。

 

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

版式設(shè)計(jì)里的「張力」是什么意思?今天幫你解答!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

 

本期給大家?guī)淼膬?nèi)容是關(guān)于視覺張力的應(yīng)用技巧,聽到這個(gè)詞也許會(huì)給人一種云里霧里的感覺,我們?cè)谌粘9ぷ髦幸部倳?huì)聽到這些「視覺張力」「視覺沖擊力」「視覺重力」等等專業(yè)詞匯。那么這些帶有視覺前綴的力學(xué)詞到底是什么意思呢?今天我們來一起分析一下這其中的「視覺張力」,看它在版式設(shè)計(jì)中都起著哪些作用。接下來讓我們一起學(xué)習(xí)今天的內(nèi)容吧。

何為張力

首先我們來了解一下張力的概念,從百科中的解釋可以初步了解到,張力是物體受到拉力而產(chǎn)生的牽引力,這么說是不是還有點(diǎn)暈?

通俗一些解釋,可以將它理解成在拔河時(shí)繩子兩端受到的左右拉力,我們看整個(gè)畫面在視覺心理上產(chǎn)生了一種向左右擴(kuò)張的感覺。

就像上圖中的氣球一樣,內(nèi)部充氣后產(chǎn)生了向外膨脹的擴(kuò)張力。外部的包裹部分也同時(shí)向內(nèi)產(chǎn)生收縮的力,從而產(chǎn)生了一種相互制約的緊張感。

在藝術(shù)和設(shè)計(jì)以及文學(xué)領(lǐng)域中,視覺張力這個(gè)詞也經(jīng)常用來形容和諧與沖突之間的強(qiáng)烈對(duì)比,它是一種經(jīng)過美學(xué)經(jīng)驗(yàn)與審美傾向后的主觀評(píng)價(jià)。

原理與解析

今天我們不講那么深?yuàn)W的直覺式感受,而是從平面構(gòu)成的角度來深度解析視覺張力在版式設(shè)計(jì)中的作用,客觀的了解康定斯基在其著作《點(diǎn)線面》中所提及到的視覺張力理論。

支撐起我們身體外形的是藏在內(nèi)部的骨骼部分。而在版式設(shè)計(jì)中也同樣需要支撐起整個(gè)版面的骨骼元素。

新人設(shè)計(jì)師經(jīng)常會(huì)出現(xiàn)的問題就是會(huì)把整個(gè)版面填充的很滿,他們認(rèn)為這樣能讓版面變得飽滿。但事實(shí)上這樣并不能解決什么問題。

我們需要轉(zhuǎn)換思維模式,客觀的重新認(rèn)識(shí)版面中元素起到的作用。

從構(gòu)成的角度說,版面中只要出現(xiàn)一個(gè)很小的點(diǎn)就已經(jīng)足夠吸引觀者的注意力了。點(diǎn)是視覺力量的中心,它在版面中能夠產(chǎn)生占據(jù)空間的作用。

當(dāng)版面中出現(xiàn)兩個(gè)點(diǎn)元素時(shí),我們的視線會(huì)下意識(shí)的在他們之間形成一條隱形的線,即使他們離的很遠(yuǎn)。正是由于存在著這條無形的線段連接,才讓兩個(gè)點(diǎn)之間產(chǎn)生了關(guān)聯(lián)。包括兩點(diǎn)之間的空白區(qū)域在內(nèi),它們都會(huì)被看做一個(gè)整體。

當(dāng)版面中出現(xiàn)三個(gè)點(diǎn)時(shí),我們?cè)谛睦砩媳銜?huì)自然形成一個(gè)負(fù)形的三角形,它與背景之間會(huì)形成圖底關(guān)系,點(diǎn)與點(diǎn)之間的距離決定了這個(gè)三角形的大小。

同樣的道理,當(dāng)版面中出現(xiàn)四個(gè)點(diǎn)時(shí),矩形的負(fù)空間與版面形狀產(chǎn)生了呼應(yīng)。四個(gè)點(diǎn)之間的內(nèi)部會(huì)形成一個(gè)假想的視覺面積,點(diǎn)與邊界的距離也為我們定義的版心的大小,這也是版面中張力的主要來源。

點(diǎn)具有相互連接的屬性,當(dāng)很多個(gè)距離相等的點(diǎn)占著水平方向排列會(huì)產(chǎn)生線段的印象。

而一個(gè)陣列的點(diǎn)相互連接就成了一個(gè)面。

舉個(gè)比較常見的例子,段落文字就是由許多個(gè)點(diǎn)組合而成的面。

古人為了記憶天空中的星象,會(huì)將相鄰的星星連接起來,就像圖中的北斗七星,通過同形聯(lián)想,它就像是一個(gè)勺子。人們就是通過記憶勺子形狀來找到北斗七星的。

西方的星座也是同樣的道理,將相鄰的點(diǎn)連接形成對(duì)應(yīng)的圖案,最終形成我們現(xiàn)在看到的星座圖形。

當(dāng)版面中只有兩個(gè)點(diǎn)時(shí),我們可以得到的信息只有版心的寬度距離,而想要得到一個(gè)完整的版面。我們還需要一個(gè)確定高度的點(diǎn)才行,通過這三個(gè)點(diǎn)的位置來腦補(bǔ)出整個(gè)版心的張力大小。

也就是說,想要達(dá)到支撐起整個(gè)版心的目的,版面內(nèi)最少需要三個(gè)支撐點(diǎn)。

這種腦補(bǔ)的原因來自于視覺的閉合心理,我們會(huì)將那些區(qū)域閉合的圖形自動(dòng)視為一個(gè)完整的內(nèi)容,就像圖中的圖形。通常人們會(huì)認(rèn)為他們是三個(gè)完整的組,因?yàn)槔ㄌ?hào)內(nèi)的距離更接近,那么事實(shí)上真的是這樣嗎?

實(shí)際上六組圖形的物理距離是完全相等的,之所以會(huì)產(chǎn)生括號(hào)外大于括號(hào)內(nèi)的錯(cuò)覺完全是因?yàn)橐曈X心理在作怪。

到此我們可以大致總結(jié)一下版面中的張力是怎樣產(chǎn)生的,以版面的四角作為支撐點(diǎn),在這一基礎(chǔ)上,如果還有剩余的元素可以編排在垂直與水平的位置上。這樣整個(gè)版面就被支撐起來了,形成了一個(gè)完整的面積,給人傳達(dá)出了飽滿的視覺印象。在實(shí)際編排中由于層級(jí)的介入,版面中的元素并不一定都是等大的,同時(shí)隨著主體輪廓的不同,也會(huì)形成繞排等不同位置的結(jié)果。但萬變不離其宗,版面中每個(gè)元素的聚散離合都會(huì)影響到整個(gè)版面的張力大小。

案例解構(gòu)

這個(gè)版面主要運(yùn)用了點(diǎn)的分散和連接作用,點(diǎn)與點(diǎn)之間雖然面積較遠(yuǎn)但是依然在視覺上會(huì)被看成一個(gè)整體,其余層級(jí)的內(nèi)容則是以線的形態(tài)出現(xiàn)在版面中。經(jīng)過解構(gòu)我們可以看出,版面中的張力主要來源于版心四角的位置,這個(gè)版面是通過四個(gè)點(diǎn)支撐起來的。

接下來看這個(gè)版面,首先我們標(biāo)示出人物的面積,隨后是山峰的面積,文字以點(diǎn)的形式分散于版面中。由于點(diǎn)與點(diǎn)之間的連接作用,我們可以將其看做四條豎線。而線與線之間相連就成了一個(gè)面,這個(gè)版面主要起到支撐作用的是邊緣的三個(gè)點(diǎn)。

對(duì)于這個(gè)版面來說,與之前的版面相比,版面中元素并不是等大的。它的元素分布情況大概是這樣的,接下來我們標(biāo)出它的版心大小,可以明顯看出這個(gè)版面中起到張力作用元素主要有三個(gè),而其余的元素則分布在版心的內(nèi)部空白位置。

從元素的排布上看就基本可以得出版心的大小了,元素之間通過對(duì)齊與擴(kuò)張,形成了一個(gè)方形的面積,版心的四個(gè)角落都有支撐點(diǎn)。

我們?cè)倏催@個(gè)版面,它由一個(gè)主體,和兩個(gè)文字組以及 logo 構(gòu)成,這是一個(gè)典型的由三點(diǎn)支撐起來的版面。

這個(gè)同樣是由三個(gè)點(diǎn)支撐起來的。

這個(gè)版面經(jīng)過結(jié)構(gòu)可以很明顯的看到,元素分散到版面的四角,形成向外擴(kuò)張的結(jié)構(gòu),其余信息放置在空白位置。

這個(gè)版面較之前就要更復(fù)雜一些了,來看一下它的結(jié)構(gòu),標(biāo)出版心后可以看出元素基本上是圍繞著版心的大小進(jìn)行排布的,左下角為了增加元素的張力作用,依然采用了三點(diǎn)的分布方式來占據(jù)更大的空間面積,從宏觀角度來說版面依然采用了三個(gè)點(diǎn)的骨骼結(jié)構(gòu)。

這個(gè)版面,可以看出版心采用了四個(gè)點(diǎn)來支撐,剩余兩個(gè)文字信息分布在版面的水平方向,就是圖中標(biāo)注成藍(lán)色的位置。

這個(gè)版面中出現(xiàn)了帶有出血的元素,看一下它的版心和元素的構(gòu)成情況,采用了四個(gè)點(diǎn)的出血結(jié)構(gòu)。

這個(gè)版面的變化性相對(duì)難度更大,我們來看它的構(gòu)成結(jié)構(gòu),可以看到整個(gè)版面大致分為兩欄,左側(cè)小欄和右側(cè)大欄內(nèi)的元素編排都采用了三大支撐點(diǎn)來產(chǎn)生版心的張力效果。從整體的角度觀看版面,也會(huì)得出同樣的三點(diǎn)支撐版心的印象。

這個(gè)版面中,主體的形狀變化較強(qiáng)。除編排在四角的元素外,其余元素都采用了繞排的呼應(yīng)形式安排在了空白位置上,整體看去采用了四個(gè)點(diǎn)來產(chǎn)生張力作用。

這個(gè)也是一樣,采用純文字的版面編排,占據(jù)四個(gè)角落,其余元素編排在空白位置。

這個(gè)呢,版心的張力主要來源是四個(gè)角落的元素位置。

我們來總結(jié)一下,當(dāng)版面底部已經(jīng)有一個(gè)很大的圖像或者文字時(shí),版面頂部只要有一個(gè)元素就可以撐起整個(gè)版面的張力。

頂部也可以是兩個(gè)元素來同時(shí)產(chǎn)生張力作用。

對(duì)于主體位于中心位置的版面,我們最少需要三個(gè)點(diǎn)來起到支撐版心的作用。

這里也可以是四個(gè)點(diǎn)來描述版面的張力大小。

此外,如果這時(shí)還有其余的元素需要添加,可以添加到垂直和水平的空白位置上。

接下來我們拿這個(gè)版面來進(jìn)行舉例,中心的圓形是版面中最大的元素,被編排到了版面的正中心位置。

隨后出現(xiàn)在版面中的是四個(gè)角落的文字元素,它們的出現(xiàn)加大了版心的張力大小。

隨后,其余的文字信息被編排到了版心的垂直和水平的位置并貼近版心的邊緣。

接下來在垂直位置添加裝飾性的點(diǎn)元素來起到占據(jù)空間的目的。

最后在版面的空白處繼續(xù)添加其余的文字信息,這個(gè)版面就基本上變得非常飽滿了。

接下來我們看一下它的元素構(gòu)成結(jié)構(gòu)。

并不是只有文字的位置才能起到加強(qiáng)版面張力的作用,換成圖形和圖像也是同樣的道理。我們看這個(gè)圖,將周圍的元素去除后,版面中原本熱鬧的氛圍消失了,版面占據(jù)空間的張力也隨之變小了,但絕對(duì)不是說底部的版面就是不對(duì)的,一切都是根據(jù)項(xiàng)目的定位來判定的。

這個(gè)版面同樣具有熱鬧的節(jié)日氛圍,去掉周圍的圖像元素后,明顯變得冷清起來,版面的張力也隨之縮小了很多。

這個(gè)版面也是同樣的道理,去除周圍的元素后,版面的視覺張力縮小了,與之前相比缺少了沖擊力,變得安靜了。

這個(gè)版面因?yàn)辄c(diǎn)元素的出現(xiàn),整體給人的感受非常飽滿,將點(diǎn)去除后,原本被占據(jù)的空間變小了,明顯沒有之前的版面具有視覺張力。

案例演示

這是廣告牌,投放尺寸主要設(shè)定在一個(gè)人能夠近距離觀看的大小,也就是說版面中可以出現(xiàn)一些比較細(xì)小的文字。

(這里需要特別提醒的是,在實(shí)際應(yīng)用中如果廣告牌掛得比較高,就需要根據(jù)實(shí)際情況來調(diào)整最小的文字字號(hào)了。否則說明文字的出現(xiàn)也就沒有實(shí)際意義了。)

接下來我們來看一下文案內(nèi)容,一個(gè)航拍無人機(jī)的宣傳廣告,含有品牌的標(biāo)志和文案以及圖片信息。

根據(jù)文案信息,我們給項(xiàng)目添加氣質(zhì)關(guān)鍵詞,及表現(xiàn)出科技的領(lǐng)先感,同時(shí)因?yàn)楫a(chǎn)品屬于親民定位,我們還需要加入具有輕松與溫情的氣質(zhì)。主視覺決定采用文字為主強(qiáng)調(diào)產(chǎn)品名稱,加入文字并放大成為版面中最大的面積。

這里需要注意的是,這個(gè)文字的外形輪廓給人一種濃厚的歷史氣息,就像演員走錯(cuò)了片場,完全與我們的定位不符。

換成無襯線體后,明顯覺得好多了。但是還是覺得哪里怪怪的。原因在于它的外形沒有給人很特別的印象。從「S」的收口處可以明顯看出切割感很強(qiáng),缺少一些書寫的痕跡,整體顯得有些平淡無奇。

這個(gè)字體大體感覺上還不錯(cuò),帶有書寫感的曲線,幾何形的外觀似乎都很符合定位。但作為版面中的主視覺元素似乎還少了點(diǎn)裝飾感。

最后選擇了這個(gè)字體,同樣具有書寫感的曲線開口,帶有幾何特征的外形以及類似電路排線一樣的裝飾結(jié)構(gòu)。

色彩方面采用橙紅色作為主色調(diào),烘托親民的色彩氛圍。接下來將產(chǎn)品疊壓在文字之上,加強(qiáng)版面的層次感。

為了繼續(xù)加強(qiáng)版面的中層次變化,我們?cè)谖淖峙c圖像之間添加陰影,細(xì)節(jié)決定成敗,一個(gè)簡單的陰影也是需要體現(xiàn)出層次變化的。從模糊到清晰,從暗淡到濃重的變化都是塑造細(xì)節(jié)的關(guān)鍵,這里為投影添加三層強(qiáng)中弱的變化,這樣一來,陰影部分的刻畫就完成了。

與之前相比,添加陰影后的畫面在視覺層次上要更豐富一些。在視覺表現(xiàn)上也更立體。

最后我們將文字信息劃分好層級(jí)后一次添加到版面中。這個(gè)畫面就完成了。主體位于版面的中心位置,其余信息分布在版面四周,形成向外擴(kuò)散的視覺張力,一共使用了三個(gè)點(diǎn)元素來支撐版心的大小,剩余的文字信息則添加在版面底部的空白位置。

我們?cè)囍鴮⑿畔⑷技械揭黄饡?huì)怎樣呢?

可以看到,版面中元素全都集中在了版面的中心位置,這使得原本占據(jù)整個(gè)版面的視覺張力變小,版面的兩端會(huì)顯得很空曠,相對(duì)于之前的版面來說變得沒有那么飽滿了。這種情況下,也可以采用添加圖形元素的手法來填充版面兩端的空白處,讓畫面變得熱鬧起來,增強(qiáng)版面的動(dòng)感與活力。

這里我們添加一些抽象的氣泡元素,為版面添加一些概念性的印象。添加元素后,新的問題又出現(xiàn)了,由于兩側(cè)的元素僅作為裝飾出現(xiàn),但是目前的視覺又顯得比較搶眼,這就有些干擾到了主視覺的層級(jí)地位了。

那么解決這個(gè)問題的方式也很簡單,就是弱化掉兩端的氣泡元素,讓主視覺與裝飾元素之間的層次更分明。經(jīng)過弱化處理后,這個(gè)版面看上去就舒服多了。這里需要注意的是,氣泡的虛化程度也同樣遵循了強(qiáng)中弱的層次變化,這樣的處理也進(jìn)一步加強(qiáng)了整體的視覺縱深感。

經(jīng)過圓形氣泡的填充后,版面的張力恢復(fù)到了之前的大小。整體給人更加飽滿的視覺印象。

今天我們一起學(xué)習(xí)了視覺張力在版面中的應(yīng)用技巧,一起了解到了圖像與文字在版面中不同位置所起到的作用,也講解了版面的骨骼是如何構(gòu)成的,希望我們的內(nèi)容依然能夠?qū)δ阌兴鶐椭?

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

那些好色之徒,都做過這些訓(xùn)練之創(chuàng)建配色體系2

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

其實(shí)根據(jù)我的從業(yè)經(jīng)驗(yàn)來看,如果想真正的了解色彩,就需要一套非常完整、系統(tǒng)的訓(xùn)練方法??赡芎芏嗳税ㄎ易约?,一開始都對(duì)這些訓(xùn)練不以為意,認(rèn)為直接學(xué)習(xí)配色理論或方法不是更好么?為什么還要做這些色彩訓(xùn)練呢?認(rèn)為這些訓(xùn)練沒有意義,甚至有的人會(huì)覺得是小孩玩的游戲。

但殊不知其實(shí)我們每個(gè)人的色感,正是在兒童時(shí)期形成的,因?yàn)閮和瘯r(shí)期的認(rèn)知更加純粹,對(duì)于色彩的想象力以及受到的限制要比成人少得多,所以賦予色彩的深度和廣度也就比成年人更加豐富。

這也是為什么很多人看到小朋友的繪畫,會(huì)覺得他們很有配色天賦了。

所以我們要做的就是打破對(duì)色彩的固有認(rèn)知,讓自己回歸到一種單純的狀態(tài),來重新認(rèn)識(shí)色彩。

比如現(xiàn)在給你一個(gè)蘋果,可能我們的第一反應(yīng)就是直接把它吃了,事后要你回憶對(duì)蘋果這個(gè)物體的印象,也許你體會(huì)的并不深刻。

而如果我們改變條件,假設(shè)你從未見過蘋果,這一次你不僅要吃掉蘋果,還要說出你的感受。

根據(jù)你的五官對(duì)其進(jìn)行認(rèn)知,這時(shí)你對(duì)蘋果的體會(huì)將和前一次大不相同。

比如通過視覺我們可以看到綠色,通過嗅覺可以聞到果香,通過觸覺可以感受到堅(jiān)硬,通過味覺可以品嘗到酸甜,通過聽覺可以聽到清脆聲。

而重新認(rèn)識(shí)色彩也是同樣的道理,就像我們從未見過蘋果一樣去體驗(yàn)一個(gè)假設(shè)我們從未見過的色彩,然后通過不同的角度去對(duì)色彩進(jìn)行拆解,最后組合在一起形成屬于我們自己的配色體系。

賦予色彩名稱

創(chuàng)建個(gè)人色彩體系的第一步,就是為色彩命名。

比如我們隨便找一個(gè)顏色,就拿這個(gè)黃色來舉例。

根據(jù)自己對(duì)這個(gè)色彩的感覺來命名,可以隨意發(fā)揮,你想到什么就可以說什么,沒有限制。

比如從最基本的色相角度出發(fā),我們可以叫它鮮黃色。

根據(jù)這個(gè)顏色我們可以聯(lián)想到向日葵,所以也可以命名為向日葵。

我們還可以聯(lián)想到月亮,所以也可以起名叫月亮黃。

那我們還可以聯(lián)想到《變形金剛》里的大黃蜂,所以也可以給這個(gè)顏色起名叫做大黃蜂。

還能聯(lián)想到麥當(dāng)勞的陽光橙,所以也可以命名為陽光橙??傊?dāng)你看到這個(gè)顏色時(shí),腦海中能夠聯(lián)想到的詞匯都可以使用,哪怕是跟這個(gè)顏色相差很多也沒關(guān)系,最重要的是你自己的感受。

對(duì)色彩進(jìn)行理性分析

對(duì)色彩進(jìn)行命名之后,第二步要做的就是對(duì)色彩進(jìn)行理性分析。

我們還是拿這個(gè)顏色來進(jìn)行練習(xí),先來找出它的色相、明度和飽和度。

首先根據(jù)色相環(huán)的大致位置,確定這個(gè)色彩的色相。

然后通過純度和明度的調(diào)整來找到與右側(cè)顏色相符的色值,這里我們得到了一個(gè)數(shù)值。

然后用吸管工具吸取右側(cè)的黃色,得到的結(jié)果和我們猜測(cè)的做比較,只要結(jié)果不是相差很大都是可以的,如果相差很多那就說明你對(duì)色彩的敏感度還有欠缺。

HSB色值猜想完之后我們?cè)賮砜纯此腞GB色值。

根據(jù)RGB原理很明顯黃色是由紅色和綠色混合得到的。

但是我們對(duì)比來看很明顯這兩個(gè)黃色還是有差別的,所以還需要進(jìn)一步分析。

我們調(diào)出RGB色相環(huán),我們看采樣的這個(gè)黃色是偏向紅色多一些還是偏向綠色多一些,很明顯是偏紅一些,因?yàn)樗容^偏橙色。

所以我們就可以適當(dāng)?shù)臏p少綠色的成分。

我們來看一下對(duì)比,已經(jīng)接近了。

最后我們通過RGB色值來對(duì)照一下,雖然紅色和綠色的色值相差不多,但是我們采樣的顏色中還有少部分藍(lán)色,肉眼其實(shí)很難看出來,但是我們可以自己去模擬一下。

這三個(gè)成分的三原色混合之后,得到的就是我們采樣的顏色了。

△ http://www.rgbchallenge.com/

如果想提升對(duì)RGB的敏感度,可以通過這個(gè)小游戲來練習(xí)一下。

玩法很簡單,根據(jù)畫面中給出的RGB色值來選擇你認(rèn)為相對(duì)應(yīng)的顏色,選對(duì)了繼續(xù)下一關(guān),選錯(cuò)了GAME OVER重來。

接下來我們來看CMYK色值。

黃色是CMY其中的一個(gè)原色,所以首先黃色肯定是最多的。

對(duì)比來看一下,很明顯采樣的黃色中還有其他顏色成分。

我們調(diào)出CMYK色相環(huán),同樣也是看采樣的黃色偏向哪個(gè)方向,也是偏紅色多一些。

所以我們得到這個(gè)顏色中需要加入紅色,但是應(yīng)該加多少呢?

這里我們加入了20%的紅,同時(shí)將黃色的含量降到80%,這個(gè)是根據(jù)經(jīng)驗(yàn)和感覺來的。

這時(shí)將兩個(gè)顏色對(duì)比來看一下,已經(jīng)相差不多了。

最后通過數(shù)值來比對(duì),可以說幾乎已經(jīng)很接近了。

只不過采樣的顏色中還帶有少量的青色,但是影響不大。

然后我們?cè)賮砜纯瓷{(diào)。關(guān)于色調(diào)這種老生常談的問題這里就不多講了,因?yàn)橹拔覍iT寫過一篇關(guān)于色調(diào)的文章《高手的平面課堂!最容易上手的配色方法》,里面已經(jīng)講的很詳細(xì)了。如果你看過這篇文章,那么當(dāng)你得到了一個(gè)顏色的CMYK色值時(shí),就已經(jīng)可以判斷出是什么色調(diào)了。

如果沒看過也沒關(guān)系,我?guī)Т蠹襾韰^(qū)分一下,白色和純色之間是明色和淡色,純色和灰色之間是濁色和淡濁色,純色和黑色之間是暗色。

將這些代表性色調(diào)提取出來一比對(duì),就可以知道這個(gè)色彩的大致色調(diào)是什么了。

很明顯我們采樣的這個(gè)顏色是介于純色調(diào)和明色調(diào)之間,你可以叫它純色也可以叫它明色。

色調(diào)看完之后我們?cè)賮砜纯此纳始易?,也就是這五大色相關(guān)系。

首先我們來看看它的同類色是什么,如果大家剛開始比較困難可以偷個(gè)懶,調(diào)出色相環(huán)。

這樣找到相應(yīng)的色相就非常簡單了,但是不建議大家這樣做,除非是新手或剛?cè)腴T的同學(xué)。

然后是近似色,相距45度的顏色。

然后是中差色,距離在90度左右。

接著是對(duì)比色,120度左右。

最后是互補(bǔ)色,對(duì)比最強(qiáng)烈,也就是相距180度左右的顏色。

這五大色相關(guān)系是最基本也是搭配起來最常見的,一般不太容易出問題。這里需要說明一點(diǎn)就是我們?cè)趯?duì)色值進(jìn)行猜測(cè)的時(shí)候,不需要要求太高必須要完全一致,只要差不多就可以。并且大家在看教程的時(shí)候可能會(huì)覺得有些復(fù)雜佷麻煩,我做這些為了給大家演示看上去是花了些時(shí)間,但是當(dāng)你自己在猜想的時(shí)候可能只是一瞬間的事情。

對(duì)色彩進(jìn)行感性分析

下面我們?cè)賮砜纯吹谌?,?duì)色彩的感性分析,所謂感性分析也就是說這個(gè)色彩給你什么感覺。

比如這個(gè)黃色給我們的正面意象有:陽光、輕松、幽默、開朗、熱鬧、歡樂、幼兒、開放、快樂;負(fù)面意象有吵鬧、廉價(jià)、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺的時(shí)候不要約束自己,能夠聯(lián)想到的都可以記下來。

對(duì)色彩進(jìn)行行業(yè)分析

然后是第四步對(duì)色彩進(jìn)行行業(yè)分析,也就是說你認(rèn)為這個(gè)色彩適合哪些行業(yè)或者你見過哪些行業(yè)使用過這個(gè)色彩。

比如最明顯的就是兒童、寵物、游戲、時(shí)尚、運(yùn)動(dòng)、促銷、餐飲、農(nóng)業(yè)、傳統(tǒng)、汽車等等。

對(duì)色彩進(jìn)行設(shè)計(jì)應(yīng)用

以上這些訓(xùn)練做完之后就進(jìn)入到了最后一步,也就是用這個(gè)色彩進(jìn)行任意內(nèi)容的設(shè)計(jì)。

這是我們的文案,這里我們要設(shè)計(jì)的是關(guān)于詹姆斯十六代戰(zhàn)靴的三個(gè)Banner。

1. 案例一

首先根據(jù)尺寸創(chuàng)建版面,找到一張詹姆斯的圖片去底之后放到版面中,然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置,將中文標(biāo)題和LOGO做重復(fù)編排。

將文字信息放置到人物下方,底部信息做描邊和變形處理為畫面增加形式感,最后將其他信息編排到空余的左側(cè)。

最后在主標(biāo)題下方添加色塊來豐富一下版面,版式部分就完成了,接下來開始配色。

因?yàn)槲覀円玫讲蓸拥倪@個(gè)黃色所以主色已經(jīng)確定了,但是這個(gè)畫面只用一個(gè)顏色顯然是不夠的,所以我們還需要其他顏色。

因?yàn)榭紤]到設(shè)計(jì)的內(nèi)容和風(fēng)格所以我覺得配色上應(yīng)該有一些對(duì)比,但是又不想使用對(duì)比很強(qiáng)的互補(bǔ)色,所以這里我選擇對(duì)比色,但是黃色的對(duì)比色有兩個(gè)應(yīng)該選擇哪個(gè)呢,這里我選擇了紫色。

因?yàn)槿绻私釴BA的話應(yīng)該知道,湖人隊(duì)的球衣本身就是黃色和紫色,也就是人們所謂的紫金戰(zhàn)袍。

但是這個(gè)紫色有些偏紅,所以我們可以調(diào)整成偏藍(lán)一些。這也是我想告訴大家的一點(diǎn)就是配色是靈活的,千萬不要死腦筋。

輔色確定了之后就可以為畫面填充顏色了,但是我們看填充完顏色之后人物圖片的顏色有些不協(xié)調(diào),所以人物的顏色也需要調(diào)整。

這樣看上去就會(huì)好很多,那么第一個(gè)案例就完成了。

2. 案例二

第二個(gè)案例我們選擇鞋子來當(dāng)主體,然后編排主標(biāo)題。

將其余信息圍繞主體鞋子來編排,通過適當(dāng)?shù)淖冃谓嵌葋頌楫嬅嬖黾屿`動(dòng)。

但是兩側(cè)很明顯太空了所以可以添加色塊和文字,版式部分就完成了。

因?yàn)槲覀冊(cè)O(shè)計(jì)的這三個(gè)Banner是一個(gè)系列的,所以配色也應(yīng)該是統(tǒng)一的不需要改動(dòng)。

3. 案例三

我們?cè)賮砜纯醋詈笠粋€(gè)案例,前兩個(gè)案例分別是以人物為主體和以產(chǎn)品為主體,所以第三個(gè)案例我就直接用文字編排,將文字信息進(jìn)行分組給圖片留好位置。

為了增加一些形式感,下方的標(biāo)題同樣進(jìn)行描邊處理并進(jìn)行裁剪。

那么同樣使用這組配色,將圖片放置到預(yù)先留好的位置上,這個(gè)案例也就完成了。

最后我們來看一下整體效果和效果圖。

本期教程到這里就結(jié)束了,我們從幾個(gè)不同的角度去對(duì)色彩進(jìn)行拆解,大家回去之后可以自己多加練習(xí),每天解構(gòu)一個(gè)色彩,這樣長期積累下來,你就會(huì)在不知不覺中創(chuàng)建了一套屬于你自己的配色體系。

但是我相信肯定會(huì)有人有疑問,如果照這樣做那糾錯(cuò)機(jī)制在哪?因?yàn)檫@些都是大家自己去創(chuàng)建的很多內(nèi)容不一定對(duì),如果你有這樣的疑問那說明你是認(rèn)真學(xué)習(xí)的人,但是我這套方法并不是沒有糾錯(cuò)機(jī)制,這個(gè)糾錯(cuò)機(jī)制就是你自己,在漫長的時(shí)間里你的成長、歷練、感受、學(xué)習(xí)都會(huì)影響你對(duì)一個(gè)色彩的認(rèn)知,可能幾個(gè)月甚至幾天之后你看待同一個(gè)色彩的感覺都是不同的。所以放心大膽的去做吧,只要你肯堅(jiān)持,火候到的時(shí)候自然就會(huì)有所收獲。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

巧用Keynote,為你的演示錦上添花

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

對(duì)于今天的設(shè)計(jì)師來說,無論是知識(shí)分享會(huì),還是項(xiàng)目提案評(píng)審,甚至是求職面試等等,越來越多的場合需要考驗(yàn)我們的演講表達(dá)能力了。那么對(duì)于設(shè)計(jì)師來說,除了口述表達(dá)能力,美觀大方的幻燈片往往也是必不可少的。而Keynote因其酷炫的動(dòng)效儼然已經(jīng)成為演示界的神器,但是現(xiàn)狀是很多設(shè)計(jì)師朋友對(duì)于Keynote的掌握還不是很熟練,特別是五花八門的動(dòng)效以及復(fù)雜的構(gòu)建順序,在此作者就與大家分享總結(jié)一些個(gè)人的使用心得,希望對(duì)大家能有所幫助。


目錄

1、認(rèn)識(shí)keynote

2、制作準(zhǔn)備

3、動(dòng)效

4、構(gòu)件順序

5、演講相關(guān)



下圖即是Keynote的主界面,與我們熟悉的Sketch還是挺相似的。其中中間為舞臺(tái)區(qū)域,當(dāng)前頁面的所有元素都會(huì)出現(xiàn)在此;頂部是工具欄,包含一些常用的功能,并且跟Sketch一樣支持自定義;左側(cè)是幻燈片的導(dǎo)航,可以快速在各個(gè)幻燈片之間切換;右側(cè)是參數(shù)調(diào)整,可以分別針對(duì)幻燈片以及其中的某個(gè)元素進(jìn)行參數(shù)調(diào)整。

其中,右側(cè)的參數(shù)調(diào)整又分為“格式”、“動(dòng)畫效果”和“文稿”三個(gè)Tab。當(dāng)選中左側(cè)導(dǎo)航中的幻燈片或舞臺(tái)中的某個(gè)元素時(shí),對(duì)應(yīng)的參數(shù)調(diào)整面板是不同的。


在開始動(dòng)手之前,還有一些準(zhǔn)備工作需要完成。首先就是整個(gè)幻燈片的尺寸,常見的尺寸比例有4:3和16:9,需要根據(jù)演示現(xiàn)場的幕布寬高比來確定選擇哪一種。如果是在移動(dòng)設(shè)備上演示,就根據(jù)移動(dòng)設(shè)備的屏幕比例來選擇,一般手機(jī)是16:9,Pad是4:3。當(dāng)然,也可以自定義幻燈片的寬高尺寸?;脽羝叽缭谟覀?cè)的“文稿”Tab中調(diào)整。

其次,編輯母版。母版有點(diǎn)類似于Sketch中的Symbol,改變了其中的某個(gè)元素,所有使用這個(gè)母版的幻燈片都會(huì)出現(xiàn)相應(yīng)的改變。不同的是,母版的對(duì)象是整張幻燈片,而不是其中的某幾個(gè)元素組合,也就是說,一張幻燈片只能選擇一種母版。如果你的所有幻燈片都需要加上logo或者水印,使用母版就很方便了。母版的編輯以及調(diào)用在右側(cè)的“格式”Tab中(選中幻燈片的情況下)。

最后,將你需要用到的圖片元素,按幻燈片順序整理好命名,以便于在后續(xù)調(diào)整構(gòu)件順序時(shí)使用(命名混亂會(huì)對(duì)調(diào)整構(gòu)件順序造成很大的干擾,在稍后構(gòu)件順序的時(shí)候會(huì)講到)。


Keynote中的動(dòng)效分為幻燈片之間的過渡動(dòng)效和單個(gè)元素的動(dòng)效。


幻燈片之間的過渡動(dòng)效有以下這些:

這里重點(diǎn)要介紹的是神奇移動(dòng)。它的原理是為兩張幻燈片中的同一個(gè)元素添加補(bǔ)間動(dòng)畫,通過這個(gè)元素在兩張幻燈片中的位置、大小、形狀、顏色、旋轉(zhuǎn)角度、透明度這些屬性差異來實(shí)現(xiàn)過渡動(dòng)畫。當(dāng)然,還可以選擇抹入抹出來使其過渡更自然。

單個(gè)元素的動(dòng)效又分為三個(gè)階段:出現(xiàn)、動(dòng)作、消失。


出現(xiàn),顧名思義就是從無到有的一個(gè)過程,主要有以下這些:

動(dòng)作,主要是移動(dòng)、縮放、透明度、旋轉(zhuǎn)這些基本的屬性變化。大部分的動(dòng)效都是通過這些基本屬性的變化組合來產(chǎn)生的。

消失,顧名思義與出現(xiàn)相反,是一個(gè)從有到無的過程。

其中,打字效果和跟蹤這兩個(gè)動(dòng)效只針對(duì)文本才會(huì)有效果。

這么多的動(dòng)效,其中有一些還是蠻有意思的,比如“解體掉落”、“碎屑”、“轟然墜落”,這里就不展開細(xì)講了,大家有興趣可以一一去嘗試一番。


使用動(dòng)效還有一個(gè)誤區(qū)就是,不是所有的頁面之間或者元素出現(xiàn)消失都是需要?jiǎng)有У?,過多泛濫地使用動(dòng)效反而會(huì)給觀眾造成視覺疲勞,讓他們的關(guān)注點(diǎn)都集中在你的動(dòng)效上,從而對(duì)本身的演示內(nèi)容失去關(guān)注。


構(gòu)件順序是針對(duì)單張幻燈片內(nèi)添加了動(dòng)效的元素而設(shè)定的??上攵粡埢脽羝瑑?nèi)的所有元素,很少會(huì)有同時(shí)產(chǎn)生動(dòng)作的情況,因此必然有個(gè)先后順序,這個(gè)順序就是構(gòu)件順序。通過構(gòu)件順序,可以組合出變化多端的動(dòng)畫效果來。


構(gòu)件順序分為三種:一起、之后、點(diǎn)按。如下圖:

可以看到,通過構(gòu)件順序列表上兩個(gè)構(gòu)件之間的樣式變化,我們就可以一眼區(qū)分出它們之間是什么順序。一起,兩個(gè)構(gòu)件連在一起并且中間沒有分隔線;之后,兩個(gè)構(gòu)件連在一起中間有分隔線;點(diǎn)按,兩個(gè)構(gòu)件不相連。


點(diǎn)按比較好理解,就是兩個(gè)構(gòu)件動(dòng)作之間需要手動(dòng)控制。下面重點(diǎn)來講一下,“一起”與“之后”。我們通過時(shí)間軸的形式,來讓大家更容易理解。

當(dāng)然,我們還可以設(shè)置延遲時(shí)間,讓構(gòu)件交替動(dòng)作。

前面我們提到過,要為圖片元素整理命名,其目的就是在構(gòu)件順序列表中便于查看。如果我們沒有整理命名,那一張幻燈片中的構(gòu)件順序列表可能就是如下圖這樣:

那么這時(shí)候,我們?nèi)绻{(diào)整其中一個(gè)元素的動(dòng)作順序就顯得異常困難了。因?yàn)樵谖枧_(tái)區(qū)域中,這些元素可能都是疊加在一起的,想要通過點(diǎn)選找到元素幾乎是不可能的,而構(gòu)件順序列表中的命名也顯得很混亂……


此外,即使是整理命名了這些元素,最好也不要把許多動(dòng)效做在一張幻燈片中。原因同上,如果后期要修改,尋找起來也是非常困難。我們可以利用幻燈片之間的自動(dòng)過渡效果來將它們拆分到不同的幻燈片中。

圖中在第2張幻燈片與第3張幻燈片之間選擇“無過渡效果”,且開始過渡設(shè)置為“自動(dòng)”,延遲“0秒”,那么第2張幻燈片播放完,就自動(dòng)無縫進(jìn)入第3張幻燈片了。


做完了演示稿,那么就要開始準(zhǔn)備演講了。首先需要考慮的問題就是文件大小了,如果圖片內(nèi)容不多倒還好,一旦圖片較多,整個(gè).key文件就會(huì)變得很大。這時(shí)候我們可以先壓縮圖片再將其置于Keynote中,或者有一些元素或者文字可以通過Keynote直接繪制,就不要采用圖片的形式了。這樣可以將.key文件的體積大大縮小。


其次,Keynote的版本也是需要考慮的問題,最好可以拿到演示所用的電腦來演示一遍,作者就曾經(jīng)因?yàn)檐浖姹締栴}導(dǎo)致一個(gè)動(dòng)效無法展現(xiàn),進(jìn)而影響了那個(gè)片段的演講。


此外,我們不可能講所有要講的內(nèi)容全部呈現(xiàn)在幻燈片上,適當(dāng)?shù)淖⑨屖潜夭豢缮俚摹?

添加完成的注釋我們可以在演講者模式中看到。

演講者模式中,我們還可以看到當(dāng)前幻燈片、下一張幻燈片以及還有多少個(gè)構(gòu)件動(dòng)效沒有播放。在頂部,靠左的是當(dāng)前時(shí)間,靠右的則是定時(shí)器,可以設(shè)置成計(jì)時(shí)器或者倒計(jì)時(shí)來幫助我們控制演講時(shí)間。

最后,如果你不在電腦邊上而又不想別人幫你控制幻燈片播放時(shí),可以利用iPhone來遙控播放。打開iPhone上的Keynote,點(diǎn)擊右上角的遙控模式進(jìn)入如下圖左側(cè)的界面,然后前往Mac端的Keynote,進(jìn)入偏好設(shè)置,選擇遙控器,然后連接上你的iPhone(需要在同一WiFi下),iPhone上的界面就會(huì)提示你開始播放幻燈片。

這時(shí),你的iPhone就變身為一個(gè)遙控器了,并且點(diǎn)擊右上角的菜單還有激光筆功能,便于你在演講過程中做臨時(shí)批注。


這篇文章旨在幫助你更充分地運(yùn)用Keynote來傳播分享知識(shí)、展示設(shè)計(jì)作品,并不能美化你的幻燈片。想要做出美觀大方的幻燈片其本質(zhì)還是需要版式排列、色彩搭配這樣的基礎(chǔ)技能;同樣,酷炫的動(dòng)效也需要多欣賞臨摹別人的作品才能運(yùn)用得恰到好處。

 

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

投影一直做不好?看這篇文章就搞定!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

平時(shí)設(shè)計(jì)工作中,關(guān)于投影,簡單一點(diǎn)的就是一個(gè)圖片中的主體摳下來放到畫面中,這個(gè)時(shí)候就要設(shè)置一個(gè)投影,讓主體在畫面中更和諧。難一點(diǎn)的就是在合成設(shè)計(jì)里,涉及到每個(gè)物體的投影形狀、顏色、透視等等,根據(jù)分析畫出投影,這期教程就給大家普及一下投影的相關(guān)知識(shí),以及如何去做投影。

陰影是什么呢?陰影是光帶給這個(gè)世界的禮物。

陰影的概念

還是正經(jīng)解釋一下什么是陰影?

在客觀世界中,光線總是從光源沿著直線方向發(fā)散。

在光線的照射下,受光部分稱為亮面,僅次于亮面的受光是灰面,而光線無法照射到的部分,稱為暗面;由于被受光面遮擋,物體所在環(huán)境中出現(xiàn)的陰暗部分稱為影,陰與影的總和就是陰影。

陰影的要素

陰影形成的要素有哪些呢?

首先要有光源,光源就是光點(diǎn),光點(diǎn)向下的垂線與承接面的焦點(diǎn)就是光足,陽光的光足在地平線上,燈光的光足在照射的基面上,然后是要有物體,光點(diǎn)發(fā)出的光線,經(jīng)過物體上陰點(diǎn),光足與物體底點(diǎn)也就是陰足連線,與光線相交的點(diǎn)就是影點(diǎn),陰影就是陰足到影點(diǎn)的部分。

畫陰影時(shí),一般是先定光點(diǎn)和光足,然后是陰點(diǎn)陰足,光點(diǎn)連接陰點(diǎn),光足連接陰足,這樣陰影自然就畫出來了。

用這張照片來做個(gè)簡單說明:

光源的位置,就是太陽,向下垂線交于海平線于一點(diǎn),這個(gè)就是光足。

然后,定出一些椅子上的陰點(diǎn)和陰足。

光點(diǎn)連接陰點(diǎn),光足連接陰足,這樣就能畫出陰影的大致形狀了。

光源的分類

光源總體上可以分為兩大類,一類是自然光,比如:太陽光、月光。一類是人造光,比如:燈光、燭光。

1. 自然光

自然光有兩個(gè)特點(diǎn):光線平行;隨著時(shí)間的變化而變化,不會(huì)為?的意志所轉(zhuǎn)移。

光線平行

因?yàn)樘?、月亮這樣的發(fā)光體離我們太過遙遠(yuǎn),所以可以把它發(fā)散的光線視為平行的。

再來說下這張圖片,同樣是自然光,為什么它的光線不是平行的?

這是因?yàn)橥敢暤默F(xiàn)象,就像這個(gè)地板,不也是平行的嗎?但是因?yàn)橥敢暤年P(guān)系,它們會(huì)相交于一點(diǎn),光線也是同樣道理,因?yàn)槲覀円赃@個(gè)角度觀察,所以光線會(huì)出現(xiàn)透視現(xiàn)象。

也就是說,當(dāng)我們從側(cè)面觀察的話,就很明顯看到光線是平行的。

隨著時(shí)間的變化而變化,不會(huì)為人的意志所轉(zhuǎn)移

日升日落,陰晴圓缺,都是自然的規(guī)律,不會(huì)為我們的意志所改變。

2. 人造光

人造光有兩個(gè)特點(diǎn):光線不平行,呈放射狀;根據(jù)需要變換位置。

光線不平行,呈放射狀

用這張圖片來舉例,畫面中光源是路燈,物體是消防栓,我們對(duì)它進(jìn)行一個(gè)簡單的分析:

它的光點(diǎn)是路燈,向下的垂線,到地面上的光足,然后是消防栓,光點(diǎn)連接陰點(diǎn),光足連接陰足,畫出陰影,可以看出,因?yàn)榕c光源距離近,所以光線是不平行的,呈現(xiàn)一種放射狀,并且影子也會(huì)呈現(xiàn)放射狀。

根據(jù)需要變換位置

為了呈現(xiàn)想要的視覺效果,可以隨意移動(dòng)光源的位置,甚至調(diào)整它的顏色、明暗等,可以人為改變。

燈光屬于電光源,它可以是單一光源或者組合光源,常見的像這樣的白熾燈,還有日光燈等等。

當(dāng)各個(gè)方向都有光源的時(shí)候,投影就會(huì)消失。在醫(yī)學(xué)上,用的無影燈就是根據(jù)這個(gè)原理制成的,因?yàn)獒t(yī)生做手術(shù)的時(shí)候,手和器械都有可能對(duì)手術(shù)部位造成干擾的陰影,所以無影燈就能盡量消除陰影。

陰影規(guī)律及其特點(diǎn)

我們模擬一個(gè)太陽移動(dòng)的軌跡,當(dāng)太陽位置比較低的時(shí)候,光線與地面的夾角就會(huì)比較小,影子會(huì)很長;升高一些,夾角就稍微大了些,影子縮短了點(diǎn);再升高一些,夾角更大,影子很短了。然后當(dāng)太陽在物體正上方的時(shí)候,與地面的夾角接近90度,影子基本就是一個(gè)點(diǎn)。那另一邊,基本就是相同的情況,所以,光源離照射物體越高、越遠(yuǎn)、光線角度越大,陰影越短。

我們?cè)偻ㄟ^幾張圖片來進(jìn)一步了解陰影規(guī)律及特點(diǎn)。

我們看到人物的影子非常的長,光線與地面夾角比較小,說明它的光源在一個(gè)比較低的位置上。

這個(gè)正俯視的圖片,影子也很長,說明它的光源也在一個(gè)較低的位置。

影子的長度也不算短,但是看光線與它的夾角比較大,證明它的光源在相對(duì)比較高的位置上。

這張照片比較明顯了,影子比較短,接近中午的陽光。

△ 接近中午的陽光

我們之前在透視的那篇教程里說過,物體的透視線,最終都會(huì)消失在視平線上,所以,當(dāng)畫面中先有一條視平線,我們同樣可以畫出一個(gè)立方體。

當(dāng)物體有一個(gè)陰影,我們可以通過影點(diǎn)與陰點(diǎn)和陰足的連線,找到光點(diǎn)和光足。這樣也就找到光源的位置。

這張圖片,我們就可以通過倒推的方式找到光點(diǎn),如果畫面中再放入其他物體,就可以用光點(diǎn)和光足對(duì)其連線,從而做出投影。

正常情況下,物體在光源下的投影,如果在其中出現(xiàn)一個(gè)臺(tái)階會(huì)怎樣?

影子就會(huì)隨著階梯的形狀而產(chǎn)生變化,也就是說陰影投在不同的承影面上,會(huì)隨著受影面的變化而變化。

這兩張圖片就明顯看出陰影根據(jù)地面起伏的形狀而變化。

陰影在設(shè)計(jì)中的應(yīng)用

第一個(gè)是接觸陰影,是物體與物體之間接觸所產(chǎn)生的陰影,一般這種我們都可以用圖層樣式當(dāng)中的陰影來設(shè)置。

還有一種接觸陰影,是物體立面與承影面之間的投影關(guān)系。

第二種是懸空式投影,這類投影給人很強(qiáng)的空間感,并且大多數(shù)情況,投影都會(huì)成為畫面中的主角。

第三種是倒影,針對(duì)反光較強(qiáng)的面會(huì)有,比如鏡面、水面、琉璃臺(tái)面等,并且在表現(xiàn)一些高端產(chǎn)品設(shè)計(jì)時(shí)候經(jīng)常會(huì)使用到。

第四種是長投影,也是這幾年扁平化流行起來,帶動(dòng)的一種投影形式。

第五種合成設(shè)計(jì)中的投影,和實(shí)際照片中的場景是一樣道理的,這也是所有投影當(dāng)中比較難操作的。

最后一個(gè)創(chuàng)意投影,它不會(huì)根據(jù)物體本身的形態(tài)去表現(xiàn),而是根據(jù)文案和設(shè)計(jì)構(gòu)思而產(chǎn)生的很有創(chuàng)意的投影形式,當(dāng)然,這個(gè)主要靠大家發(fā)散思維的聯(lián)想了。

案例時(shí)間

用兩個(gè)簡單的小案例,來給大家講解一下如何做投影。

給下面右側(cè)的書籍做一個(gè)和左邊一樣的投影:

給圖層添加投影圖層樣式,不透明度調(diào)整到45,角度137,距離26,擴(kuò)展10,大小35。

我們把外圍一圈的投影已經(jīng)設(shè)置好,下面就再添加一個(gè)投影,也就是最貼近書籍邊緣部分。這個(gè)部分投影我們可以稱之為閉塞投影,是近光量最少的地方。

再添加一個(gè)投影,不透明度33,角度不變,距離5,擴(kuò)展10,大小10。

利用圖層樣式的投影就完成了,大家在調(diào)整的時(shí)候可以邊調(diào)整邊觀察,以達(dá)到一個(gè)自然的效果。

第二個(gè)方案,是給畫面中的立方體添加一個(gè)投影,要符合光影關(guān)系。

第一步要按照透視關(guān)系,把立方體看不到的面給畫出來。

根據(jù)之前我們學(xué)到的知識(shí)點(diǎn)和畫面中其他陰影來進(jìn)行分析:

先連接幾個(gè)人物的影點(diǎn)和陰點(diǎn),我們知道自然光的光線是平行的,并且我們標(biāo)記出來的也確實(shí)近乎平行的光線,既然這樣,我們就不需要找到光點(diǎn)的位置。

只要復(fù)制其中一條光線到立方體上的陰點(diǎn)即可,然后我們?cè)偃フ夜庾愕奈恢谩?

為了找光足,可以先把畫面擴(kuò)展一下,然后連接影點(diǎn)和陰足,三個(gè)參照物連線的延長線會(huì)相交于一點(diǎn),這個(gè)點(diǎn)就是光足。

從光足往回連線,與陰足的延長線,相交于影點(diǎn),這里為了區(qū)分,三條線我用三個(gè)不同的顏色,然后我們把三點(diǎn)連線,就是陰影的區(qū)域了。

可以發(fā)現(xiàn)綠色和藍(lán)色是基本重合了,我們就可以忽略藍(lán)色的那條線了。

立方體陰影的范圍與形狀,然后再進(jìn)一步刻畫。

做個(gè)高斯模糊處理,數(shù)值2。

在陰影上方新建一個(gè)圖層,用鋼筆工具勾勒一個(gè)閉塞陰影,不要太大哦,填充深灰色,模式正片疊底。

做高斯模糊,數(shù)值1.4。

為了不讓影子邊緣太生硬,選擇濾鏡 – 扭曲 – 波紋 – 41%。

用吸管工具吸一下旁邊影子的顏色,填充到立方體影子。

如果影子太重,可以適當(dāng)降低不透明度,再統(tǒng)一暗部的色調(diào),這樣陰影就做完了。

最后總結(jié)

圖標(biāo)該配上文字嗎

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

圖標(biāo)在增加界面美觀性的同時(shí)也在破壞著界面的清晰性,在設(shè)計(jì)的過程中如果你糾結(jié)于圖標(biāo)是否需要配上文字那請(qǐng)仔細(xì)閱讀這篇文章。

首先捫心自問下是否清楚在設(shè)計(jì)中什么時(shí)候用圖標(biāo)? 什么時(shí)候用文字?什么時(shí)候用圖標(biāo)+文字?你是否能清晰的分辨他們分別在什么場景下使用呢?


前言

之所以要寫一篇這樣的文章是因?yàn)樽罱泻芏嗟脑O(shè)計(jì)小伙伴反復(fù)在爭論一個(gè)觀點(diǎn) 圖標(biāo)配上文字是否有必要?

舉個(gè)栗子:

如下圖一位設(shè)計(jì)同學(xué)覺得右上角紅圈里面只需要圖標(biāo)就好了不需要文字的存在,并且節(jié)省屏幕空間,可是公司的開發(fā)和測(cè)試同學(xué)一臉懵,這個(gè)操作覺得不夠清晰,識(shí)別性較差嚴(yán)重影響用戶體驗(yàn),當(dāng)前視覺層面和功能層面產(chǎn)生了強(qiáng)烈的撞擊。帶著這個(gè)問題我們從圖標(biāo)的定義,圖標(biāo)變遷史,圖標(biāo)的優(yōu)劣勢(shì)來講述今天的文章,相信文末你會(huì)有自己的答案。


圖標(biāo)定義

廣義

圖標(biāo)是指代意義的圖形符號(hào),具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。應(yīng)用范圍很廣,軟硬件網(wǎng)頁社交場所公共場合無所不在,例如:男女廁所標(biāo)志和各種交通標(biāo)志等。

狹義

應(yīng)用于計(jì)算機(jī)軟件方面,包括:程序標(biāo)識(shí)、數(shù)據(jù)標(biāo)識(shí)、命令選擇、模式信號(hào)或切換開關(guān)、狀態(tài)指示等。


圖標(biāo)變遷

圖標(biāo)是具有指代意義的具有標(biāo)識(shí)性質(zhì)的圖形,它不僅是一種圖形,更是一種標(biāo)識(shí),它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。它不僅歷史久遠(yuǎn),從上古時(shí)代的圖騰,到20、21世紀(jì)具有更多含義和功能的各種圖標(biāo),而且應(yīng)用范圍極為廣泛,可以說它無所不在。一個(gè)國家的圖標(biāo)就是國旗;一件商品的圖標(biāo)是注冊(cè)商標(biāo);軍隊(duì)的圖標(biāo)是軍旗;學(xué)校的圖標(biāo)是校徽。

我們通過圖標(biāo)看到的不僅僅是圖標(biāo)本身,而是它所代表的內(nèi)在含義。


而在計(jì)算設(shè)備上,圖標(biāo)隨著時(shí)代的發(fā)展而迅速流行。從最早的計(jì)算機(jī)GUI(施樂之星Xerox Star)再到之后的喬布斯Apple lisa,Windows1.0,Amiga Workbench,從最初的黑白到隨著顯示技術(shù)在分辨率和色域上的提高出現(xiàn)的彩色圖標(biāo),設(shè)計(jì)師漸漸的有了更大的發(fā)揮空間。


圖標(biāo)的優(yōu)勢(shì)

1.節(jié)省屏幕空間

圖標(biāo)可以替代文字,相對(duì)于長文字來說只需要占用一個(gè)圖標(biāo)的位置如:worktile移動(dòng)端新建聊天操作四個(gè)文字如果用圖標(biāo)來代替的話只需要占用一個(gè)文字的文字,并且把干巴巴的文字變?yōu)閳D形符號(hào),用戶對(duì)于圖形的識(shí)別速度對(duì)于文字來說更快。

2.沒有地域語言限制,針對(duì)國際通用圖標(biāo)。

國際上通用的圖標(biāo)對(duì)于每個(gè)人來說都能很快的識(shí)別處理,比如同樣一個(gè)“放大鏡”圖標(biāo)經(jīng)過長期許多不同的網(wǎng)站、應(yīng)用程序和操作系統(tǒng)的用戶培養(yǎng),讓放大鏡圖標(biāo)作為搜索的操作代表符號(hào)變得越來越流行,不論任何國家任務(wù)種族,用戶很清楚這是搜索操作,相對(duì)于文字來說圖形識(shí)別大大減少的用戶識(shí)別的時(shí)間,用戶也可以花更多的時(shí)間去做他真正要去做的事情,從而提升工作效率

3.圖標(biāo)可以提供視覺引導(dǎo),迅速識(shí)別減少用戶思考時(shí)間

人腦處理圖形圖像的速度是處理文字的60萬倍,人會(huì)記住80%看過的東西,20%閱讀過的東西,和10%聽到過的東西,所以在我們發(fā)朋友圈或者寫文章的時(shí)候避免干巴巴的文字描述,勁量配上相關(guān)圖片,提升整體的圖版率,俗話說看圖說話不是沒有道理。

4.提升整體視覺體驗(yàn)

好的一套圖標(biāo)能夠從圖標(biāo)的獨(dú)特性、象征性、記憶性、應(yīng)用性、組合性、變化性上打動(dòng)人心,激發(fā)人們的點(diǎn)擊欲望。這樣才能使圖標(biāo)設(shè)計(jì)達(dá)到上乘水準(zhǔn),從而提升整體的視覺水準(zhǔn)


圖標(biāo)不適用場景

1.表達(dá)含義復(fù)雜,難以揣測(cè)

圖標(biāo)的目的就是快速識(shí)別并引導(dǎo)用戶,用戶如果無法快速識(shí)別通常會(huì)下意識(shí)的回避掉無法識(shí)別的界面元素,這是人類的天性,反而logo的設(shè)計(jì)更加適合深層次的寓意。之前喬布斯做的一個(gè)實(shí)驗(yàn),他拿著蘋果設(shè)備到一個(gè)智障兒童福利院讓兒童們把玩,每個(gè)小朋友都認(rèn)識(shí)那些圖標(biāo)的含義,當(dāng)時(shí)的寫實(shí)圖標(biāo)都是來源于生活,對(duì)于來源于生活而設(shè)計(jì)的圖標(biāo)對(duì)于孩子們來說識(shí)別效率更高花費(fèi)的識(shí)別成本更低。

2.圖標(biāo)存在多重含義

如果圖標(biāo)不能言簡意賅的表達(dá)出寓意,并且存在爭議的請(qǐng)避免使用,如果非要使用請(qǐng)采用圖標(biāo)+文字的形式。比如appstore側(cè)邊導(dǎo)航第一個(gè)你覺得是什么?收藏?標(biāo)記?錯(cuò)!他是探索,如果我不告訴你可能每個(gè)人猜的含義都不同。所以我們?cè)谠O(shè)計(jì)圖標(biāo)的時(shí)候要?jiǎng)帕咳ケ苊舛嘀睾x的圖標(biāo)。

3.專業(yè)性過強(qiáng)很難作為通用圖標(biāo)

圖標(biāo)如果專業(yè)性過強(qiáng),而沒有辦法簡化為一個(gè)很直觀通用符號(hào)時(shí),二八原則我們只能考慮80%的人,而20%的人需要付出學(xué)習(xí)成本,,比如下面的這個(gè)圖標(biāo),如果用它來代表“研發(fā)”,我相信會(huì)有很大一部分人沒法識(shí)別代表什么意思。但是對(duì)于開發(fā)人員就是一個(gè)很通用的圖標(biāo),在這種情況下,只能是允許20%人員付出學(xué)習(xí)成本來解決這個(gè)問題,除非你配上文字。


小結(jié)

1.為了提升產(chǎn)品視覺體驗(yàn),圖標(biāo)設(shè)計(jì)一定要極簡,如果使用圖標(biāo)能夠百分百表達(dá)其含義時(shí),請(qǐng)優(yōu)先使用

2.針對(duì)國際上面通用的有大眾認(rèn)知的如:搜索、wifi、設(shè)置、藍(lán)牙等圖標(biāo)無需配上文字,除非做視覺引導(dǎo)為了保持一致而統(tǒng)一添加文字的列表

3.禁止使用多意圖標(biāo)(不讓用戶思考,如果用戶不能在5s內(nèi)很快識(shí)別出圖標(biāo)的意思,那這個(gè)圖標(biāo)的設(shè)計(jì)是失敗的)

4.針對(duì)專業(yè)性很強(qiáng)的并且局限于空間的采用文字形式,或者二八原則只要考慮80%的人員無識(shí)別壓力,而20%的人付出學(xué)習(xí)成本。

5.我們不討厭圖標(biāo)加文字的形式,前提為圖標(biāo)要足夠簡化表達(dá)其含義(如文章開始的案例,圖標(biāo)簡化為加號(hào)并且加文字放到商品2做一個(gè)通欄操作就好了,這樣更加符合用戶操作的視線流,這樣做的還有釘釘?shù)膱?bào)銷審批界面)

 

藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

信息的阻力設(shè)計(jì)

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

什么是阻力?


用戶使用App時(shí)需要穿越層層頁面,在穿越這些頁面時(shí)需要消耗時(shí)間和精力,稱之為阻力。


首先探討一下品類方面的阻力。


Image title


如圖,這是幾個(gè)電商App界面,一眼望過去并不知道哪個(gè)頁面是哪家電商,其實(shí)這個(gè)并不重要。如果你到一個(gè)平臺(tái)購物,往往不是因?yàn)榫€上產(chǎn)品用戶體驗(yàn)不一樣,而是因?yàn)橘u的商品不一樣,或者商品的價(jià)格亦或配送速度不一樣。所以這里它們長的一樣我覺得沒有太大問題,甚至我認(rèn)為他們之間雷同是一件好事,用戶省去了切換的成本,尤其是新平臺(tái)跟老平臺(tái)長得像都是沒什么問題的,這樣用戶切換新平臺(tái)阻力就小了很多。


但是當(dāng)我們需要定義一個(gè)新品類時(shí),這個(gè)思路就會(huì)不一樣。



定義新品類


舉個(gè)例子,國際化品牌Airbnb,在2014年的改版中做了很大的調(diào)整,這次改版后發(fā)現(xiàn),要找房子下單,搜索瀏覽和操作效率并不是很高,但是他們還是做了這種低效高顏值的選擇。


Image title


對(duì)大多數(shù)人來說,私人房屋短租給其他人的這種服務(wù)是個(gè)新產(chǎn)品,是高端還是低端用戶其實(shí)沒有概念。所以在2014年Airbnb重新推廣的時(shí)候,他的設(shè)計(jì)理念是各位房客先別管這個(gè)產(chǎn)品是什么樣的模式,先說這個(gè)事情是不是看起來很酷。是不是酷這件事對(duì)于一個(gè)新產(chǎn)品是重要的,如果我用過一個(gè)酷的產(chǎn)品,分享給朋友。對(duì)方往往也會(huì)因?yàn)槲曳窒淼漠a(chǎn)品酷而覺得我這個(gè)人很酷。有些實(shí)用性還不錯(cuò)但是品牌調(diào)性沒那么高的產(chǎn)品,用戶使用完后會(huì)覺得“把這個(gè)產(chǎn)品分享給別人,并不會(huì)給我加分”而止步分享。鑒于此,我認(rèn)為Airbnb高顏值雖然一定程度上犧牲了效率,但是拔高了品牌調(diào)性,也就提高了產(chǎn)品的推薦值,是一個(gè)正確的選擇。


那么當(dāng)我們需要重新定義一個(gè)已有品類時(shí),我們的思路是什么呢?



重新定義品類


Image title



這是我們2016年發(fā)版的首頁設(shè)計(jì),自如和跟之前的租房平臺(tái)不太一樣,所以我們的首頁設(shè)計(jì)要重新定義一個(gè)品類。以前,尤其是我們80后對(duì)于租房會(huì)有什么樣的感受都是有一些認(rèn)知的,比如說黑中介…其實(shí)大家都有一些印象,被坑過的80后不在少數(shù)。自如出現(xiàn)的時(shí)候可能就需要重新整理大家對(duì)于這個(gè)品類的認(rèn)知。所以我們?cè)谠O(shè)計(jì)首頁的時(shí)候,先用一個(gè)高顏值大圖展現(xiàn)一下房子是什么樣子(因?yàn)槲覀兊姆孔哟_實(shí)顏值很高品質(zhì)不錯(cuò)),搜索按紐也不是很大。所傳達(dá)的思路是我們希望用戶在找房子之前對(duì)我們的平臺(tái)有些認(rèn)知,或者說對(duì)租房這個(gè)品類,打破固有的刻板印象,有重新的認(rèn)知。我把這種重新定義已有品類的設(shè)計(jì)方法定義為“我們不一樣”。



在今年,自如的影響力大了很多,在這個(gè)背景下我們進(jìn)行了新一輪的改版。雖然從用戶的角度講可能進(jìn)APP第一件事是要找房子,但是從企業(yè)的角度,企業(yè)有很多想要傳達(dá)給用戶的信息,這個(gè)頁面也是讓用戶知曉其他業(yè)務(wù)的入口(自如給大多數(shù)人的印象是一個(gè)租房平臺(tái),但是我們也有像保潔,搬家這類的服務(wù))這些入口也許用戶當(dāng)時(shí)不會(huì)點(diǎn)擊,可是當(dāng)他需要用保潔,或者搬家的時(shí)候就會(huì)想到好像自如有這么一個(gè)業(yè)務(wù),之后他會(huì)去自如的首頁找。所以多條業(yè)務(wù)線的并列呈現(xiàn),也有類似廣告曝光的作用。


Image title


我用這張圖來代替我們的原型圖,我們要展現(xiàn)多條用戶線的時(shí)候很依賴于這個(gè)界面上的多個(gè)按紐,當(dāng)時(shí)就想能不能順著這個(gè)思路在盡可能的情況下做的好看一點(diǎn)。我們之所以覺得這個(gè)界面給你的感覺沒那么好,是因?yàn)檫@個(gè)界面信息量太大了,還有色彩的沖撞過猛了。 


我覺得色彩的間隙太小了,應(yīng)該加大,所以加了一些白框,讓這些顏色之間離的更遠(yuǎn),顏色間的沖撞也就比較小。


Image title


然后再看這個(gè)顏色本身,我們是不是可以選一些相對(duì)共性的顏色,比如把標(biāo)準(zhǔn)的紅綠藍(lán)改成紅,暖綠,和偏綠的藍(lán)(暖藍(lán)),然后把選中的顏色找他的擴(kuò)展色,用擴(kuò)展色畫出一些按紐。


Image title


這就是我們后來首頁的樣子。



低頻應(yīng)用的阻力設(shè)計(jì)


作為一個(gè)低頻使用的App,跟高頻使用的App阻力設(shè)計(jì)思路最重要的不同點(diǎn)是什么呢?我從學(xué)習(xí)成本這點(diǎn)來切入。



學(xué)習(xí)成本


微信的聊天記錄刪除功能,有一點(diǎn)學(xué)習(xí)成本。


Image title


用戶在使用中偶爾向左滑發(fā)現(xiàn)了可以刪除聊天記錄,通過偶爾的觸發(fā),用戶學(xué)會(huì)了這樣刪除聊天記錄。通過后期每天不斷地使用強(qiáng)化了對(duì)這個(gè)功能點(diǎn)的記憶。


但是我們的低頻App似乎沒有這個(gè)機(jī)會(huì),由于使用次數(shù)比較少,有些功能隱藏起來的話用戶大概率永遠(yuǎn)都不會(huì)去用。設(shè)計(jì)時(shí)不但要把點(diǎn)贊的按紐放出來,而且點(diǎn)贊的時(shí)候還要告訴用戶,點(diǎn)贊后飄在右上角。


Image title


告訴用戶收藏之后,收藏列表可以點(diǎn)擊右上角這個(gè)按鈕查看。我們不但要把所有的功能擺出來,而且還要告訴用戶這個(gè)功能下一步怎么走。因?yàn)樗绻@次沒學(xué)會(huì),以后可能也不會(huì)用這個(gè)App了,這點(diǎn)跟高頻的產(chǎn)品不一樣。



點(diǎn)擊數(shù)據(jù)


我們?cè)O(shè)計(jì)首頁的時(shí)候?qū)τ邳c(diǎn)擊數(shù)據(jù)會(huì)有一個(gè)預(yù)期和目標(biāo),但是往往數(shù)據(jù)反饋會(huì)跟設(shè)計(jì)初衷多少有些不相符。大家可以猜一下哪是點(diǎn)擊率最高的…在這里我只能告訴大家一個(gè)大概的排名。我們當(dāng)初希望是租房的點(diǎn)擊高一些,因?yàn)橛脩酎c(diǎn)擊后可以了解我們有多少個(gè)租房產(chǎn)品,所以我們把它在視覺上設(shè)計(jì)的重了一些。但是其實(shí)搜索是排在他前面的,用戶對(duì)于大面積的區(qū)域像banner這類東西是有免疫力的,所以不管做的多花哨其實(shí)用戶會(huì)習(xí)慣性的忽略掉,也就是視覺中心和實(shí)際的交互中心不見得一樣。合租在租房的前面,整租都可以在前面,看來用戶還是比較仔細(xì)的看了我們的界面,而且可以斷定大家對(duì)于合租是什么東西了解的很清晰。


Image title


可以看到,“租房”這個(gè)按紐我們剛開始設(shè)計(jì)的時(shí)候,感覺應(yīng)該是高的,因?yàn)檫@個(gè)是總集,我們?cè)诤笃诘脑L問中發(fā)現(xiàn)用戶認(rèn)為這個(gè)是表示分類,所以設(shè)計(jì)的雖然明顯,但是用戶仍然認(rèn)為這個(gè)不可點(diǎn)。



減少阻力


減少阻力,需要跟用戶的預(yù)期相符。


租房按紐怎么做交互才能讓用戶感到順暢?租房的按紐包括右邊的四種,其實(shí)是個(gè)1.5級(jí)(介于一級(jí)頁面和二級(jí)頁面之間)的界面,所以點(diǎn)擊左側(cè)的租房,用戶會(huì)進(jìn)入“租房”頁面。而右邊的這四個(gè)Button應(yīng)該還在,只是這四個(gè)按紐變成放大精細(xì)版。包括租房Button的底圖,也是放大放在頁面最上面,這跟用戶的預(yù)期才比較一致。


Image title


從首頁到列表,到詳情再到下單及更深層的頁面,頁面的ICON和精細(xì)程度和用力程度都不一樣,層級(jí)越深視覺沖擊越輕。


Image title


如圖,最右側(cè)預(yù)約那一列,假設(shè)設(shè)計(jì)師有足夠精力和時(shí)間,是否可以把最右側(cè)的頁面做的視覺更豐富,甚至跟首頁一樣?然而我們現(xiàn)在的規(guī)范里面仍然不允許做的更花哨,原因是我們認(rèn)為在前半段的時(shí)候,用戶需要一些阻力來提升注意力,從首頁先認(rèn)知這個(gè)租房APP跟他平時(shí)認(rèn)知的不一樣,接下來有一些信息的輸入比如圖片,再往后,如果一旦點(diǎn)約看或者是點(diǎn)簽約,這時(shí)他的決策做好了,產(chǎn)品要做的事就是一步步往以最快的速度,完成這個(gè)事情,不要讓他有任何的猶豫,不要讓他分心,任何的分心都有一定的概率讓這個(gè)流程中止甚至是終止。


Image title


如圖,我把整個(gè)流程的信息阻力畫了一個(gè)曲線,首頁阻力是最大的,越往后越小,實(shí)質(zhì)性的信息越多。決策前需要讓用戶提升注意力,所以信息量要大,表達(dá)要豐富。一旦決策后,信息的傳達(dá)以最簡潔的排他形式存在,讓用戶路徑盡可能的縮短也讓信息阻力盡可能的變小。


以上就是是我對(duì)信息阻力設(shè)計(jì)的整理,希望大家能夠有所收獲。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔