首頁

設計思維工作坊—頭腦風暴法

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

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

【一】什么是頭腦風暴法?

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

 

【二】頭腦風暴法的組織形式

1)設主持人一名,主持人只主持會議

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

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

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

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

主持人和主持的注意事項:

1)提前了解會議主題及可能的引言內容

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

3)控制好時間

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

5)引導會議流暢展開

6)保持團隊積極參與氣氛

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

8)隨機應變   

【三】頭腦風暴法遵循的主要原則

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求質

         

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

        

焦點時刻: 

      藍藍設計組織部分小組成員以“如何成為一家很牛的UI設計公司?”為主題進行了一次頭腦風暴活動。我們將過程做了一下梳理。 

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

        

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

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

        

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

     

             



總結: 

腦力激蕩并不是為了提出主意讓他人去評估和選擇。通常在最后階段,本組成員會自己評估這些主意并從中挑選出解決問題的方法貫徹整個解決方案的每一步都必須對小組成員透明,并有責任分配給每一人以便他們在其中擔任重要的角色。在項目還未明朗時,必須有一個共同的決策過程來推進協作努力的成果并對任務進行重新分配。在重要轉折點上,需要有評判標準來決定小組討論是否朝著最終的答案行進。在整個過程中需要不斷的鼓勵,以便讓參與者保持他們的熱情。

 通過這個過程,員工的親身參與,對“很棒的UI設計公司”的定義,再落實行動,向著WOW的方面努力!

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

不會做插畫banner? 請用DIY時尚人物素材

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

 

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

DIY插畫介紹

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

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

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

注:如果 Sketch 版打不開,通常是因為你的版本過低造成的,只要更新新版本就可以了。

還有幾個場景可以切換:

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

這素材能用在什么地方?

網頁 Banner:

這么漂亮的時尚的插畫,不用在網頁上就是浪費啊,但不建議直接使用,要要學會怎么去 DIY,通過設置大小、比例、旋轉以及更改成和你界面一致的配色,讓 UI 統一這樣才算完美哦。

APP 啟動界面

做移動端的引導頁也很好看。

插畫海報:

做一個這樣的賀卡、海報是不是也很 Nice?

 

藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

網易嚴選的插畫是如何繪制的?設計師用了這個流程!

資深UI設計者

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

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

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

許多剛入行的視覺設計師認為插畫風格專題設計需要非常專業(yè)的插畫功底才能完成,因而盡管覺得插畫風格專題唯美、形象卻敬而遠之不敢輕易嘗試,今天個人從以下五個步驟去解構插畫風格專題設計,通過相對簡單易學的基本操作,讓沒接觸過插畫風格的設計師也能輕松駕馭與運用。

嚴選插畫風格設計五部曲

整體構思

和所有風格的視覺設計一樣,插畫風格設計首先也需要進行整體的需求分析,主要進行以下方面工作。

1. 分析受眾與目標

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

其次需要深入分析專題所需要表達的目標和信息,通過色調、版式、字體、元素等設計手法準確傳達信息內容的同時,帶給用戶更多美的感受,升華主題思想,強化品牌概念與服務。

2. 確定情感關鍵詞

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

3. 整體意境構思

確定好專題的方向后,接下來就可以構思整體的意境以及挑選合適的素材,如新年專題我們會想到用大面積紅色作為主色調的布局,結合鞭炮、春聯、燈籠、年畫等中國傳統元素,通過合理的組織和編排,加上中國風的字體設計與適當的細節(jié)完善,共同勾勒營造一派喜慶祥和的氣象。

提取輪廓

基于前一步驟的構思的整體意境,我們需要對挑選的現實素材進行插畫化改造。通常我們通過鼠標勾選的形式,將素材的輪廓勾勒出來并填充相應的顏色,使寫實的風格形象化、概括化和扁平化。

簡化圖形

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

完善細節(jié)

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

1. 移花接木

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

2. 區(qū)分主次

將重要的、核心的元素進行強調刻畫、次要的元素進行弱化處理,從而拉開主次元素的層次關系,使畫面更加具有層次感和空間感。

3. 突破現實

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

優(yōu)化整體

經過以上的步驟,我們的素材基本已完成插畫風格的改造,但插畫素材在整體專題界面中并非孤立的存在,而是和整體色調風格、版式、字體設計形成一套有機和諧的整體,共同去呈現專題需要表達的信息與目標。

案例分析

1. 千萬和春住專題

整體構思

情感關鍵詞:清新、唯美

整體意境構思:以嫩綠色作為主色調,結合桃花、陽光、汽車、風箏營造輕松出游踏青的歡快意境。

提取輪廓

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

簡化圖形

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

完善細節(jié)

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

優(yōu)化整體

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

2. 愛戀物語專題

目標:呈現出情人節(jié)情侶間的愛情的甜蜜與浪漫。

情感關鍵詞:浪漫、甜蜜

整體意境構思:以甜美暖色作為主色調,通過主體元素禮物盒與情侶間夸張的比例關系抓住用戶眼球,浪漫甜美同時不失趣味性。

3. 新春集市新年專題

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

情感關鍵詞:喜慶、熱鬧

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

總結

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

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

過稿神器-動效視覺的影響力

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

 

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

今天神器小分隊帶來的這個神器,可以幫你快速生成UI界面的3D展示效果;無需學建模、無需學AE,只需要簡單幾步,就能產出堪比蘋果宣傳片的展示動效,簡直方便到沒朋友。

DesignCamera

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

△ Howard Pinsky@Pinsky

△ 官網演示

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

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

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

軟件的界面也非常簡單:

一時間記不住這么多控件?沒關系,跟著木木玩一遍就學會啦~

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

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

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

除了可以點擊上方的預設切換顯示,更能自由點擊拖動改變3D模型的角度。

其中,按住「Alt」鍵時,鼠標滾輪為縮放,點擊拖動為平移。

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

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

基礎玩法:視頻展示也能一鍵3D

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

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

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

當然,你也可以選擇安裝之前美丫姐推薦過的Gifski(Appstore下載,快速視頻轉GIF,可調整幀數畫質),與Gifski 聯動的 Design Camera 能在你點擊「Gif」時快速啟動Gifski,幫助你一鍵轉動圖。

進階玩法:自定義動畫

除了上述的預設動畫以外,Design Camera還支持自定義動畫,操作起來也是很簡單。

只需要你選擇幾個關鍵幀,它就能自動為你添加酷炫到沒朋友的緩動動畫。

木木隨便設了3幀,再隨便點擊關鍵幀,大片即視感的展示動畫就做好了。

高級玩法:連接蘋果手機,實時動效展示

看到界面左上角的這個充電線標志了嗎?

當你的電腦插上蘋果手機,它就會變成這樣:

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

大神玩法:導入Sketch,一鍵變多維3D

只是簡單的動效怎么夠?Design Camera還支持 Sketch文件導入。

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

分組會直接影響空間感的效果哦~

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

勾選「Focus Blur」,修改焦距等數值,鼠標點擊處即為焦點所在。

用改變焦點的方法,創(chuàng)建不同的關鍵幀,超強的空間感動畫就做成了。

Design Camera 操作簡單易上手,幾秒鐘的拖拖拽拽,就能實現蘋果宣傳片級別的流暢展示動畫,簡直太良心了。

目前,Design Camera正在開放公測,是免費直接下載使用全部功能的。機不可失時不再來,心動的小伙伴趕緊用起來吧。

 

藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

版式設計里的「張力」是什么意思?今天幫你解答!

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

 

 

本期給大家?guī)淼膬热菔顷P于視覺張力的應用技巧,聽到這個詞也許會給人一種云里霧里的感覺,我們在日常工作中也總會聽到這些「視覺張力」「視覺沖擊力」「視覺重力」等等專業(yè)詞匯。那么這些帶有視覺前綴的力學詞到底是什么意思呢?今天我們來一起分析一下這其中的「視覺張力」,看它在版式設計中都起著哪些作用。接下來讓我們一起學習今天的內容吧。

何為張力

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

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

就像上圖中的氣球一樣,內部充氣后產生了向外膨脹的擴張力。外部的包裹部分也同時向內產生收縮的力,從而產生了一種相互制約的緊張感。

在藝術和設計以及文學領域中,視覺張力這個詞也經常用來形容和諧與沖突之間的強烈對比,它是一種經過美學經驗與審美傾向后的主觀評價。

原理與解析

今天我們不講那么深奧的直覺式感受,而是從平面構成的角度來深度解析視覺張力在版式設計中的作用,客觀的了解康定斯基在其著作《點線面》中所提及到的視覺張力理論。

支撐起我們身體外形的是藏在內部的骨骼部分。而在版式設計中也同樣需要支撐起整個版面的骨骼元素。

新人設計師經常會出現的問題就是會把整個版面填充的很滿,他們認為這樣能讓版面變得飽滿。但事實上這樣并不能解決什么問題。

我們需要轉換思維模式,客觀的重新認識版面中元素起到的作用。

從構成的角度說,版面中只要出現一個很小的點就已經足夠吸引觀者的注意力了。點是視覺力量的中心,它在版面中能夠產生占據空間的作用。

當版面中出現兩個點元素時,我們的視線會下意識的在他們之間形成一條隱形的線,即使他們離的很遠。正是由于存在著這條無形的線段連接,才讓兩個點之間產生了關聯。包括兩點之間的空白區(qū)域在內,它們都會被看做一個整體。

當版面中出現三個點時,我們在心理上便會自然形成一個負形的三角形,它與背景之間會形成圖底關系,點與點之間的距離決定了這個三角形的大小。

同樣的道理,當版面中出現四個點時,矩形的負空間與版面形狀產生了呼應。四個點之間的內部會形成一個假想的視覺面積,點與邊界的距離也為我們定義的版心的大小,這也是版面中張力的主要來源。

點具有相互連接的屬性,當很多個距離相等的點占著水平方向排列會產生線段的印象。

而一個陣列的點相互連接就成了一個面。

舉個比較常見的例子,段落文字就是由許多個點組合而成的面。

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

西方的星座也是同樣的道理,將相鄰的點連接形成對應的圖案,最終形成我們現在看到的星座圖形。

當版面中只有兩個點時,我們可以得到的信息只有版心的寬度距離,而想要得到一個完整的版面。我們還需要一個確定高度的點才行,通過這三個點的位置來腦補出整個版心的張力大小。

也就是說,想要達到支撐起整個版心的目的,版面內最少需要三個支撐點。

這種腦補的原因來自于視覺的閉合心理,我們會將那些區(qū)域閉合的圖形自動視為一個完整的內容,就像圖中的圖形。通常人們會認為他們是三個完整的組,因為括號內的距離更接近,那么事實上真的是這樣嗎?

實際上六組圖形的物理距離是完全相等的,之所以會產生括號外大于括號內的錯覺完全是因為視覺心理在作怪。

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

案例解構

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

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

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

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

我們再看這個版面,它由一個主體,和兩個文字組以及 logo 構成,這是一個典型的由三點支撐起來的版面。

這個同樣是由三個點支撐起來的。

這個版面經過結構可以很明顯的看到,元素分散到版面的四角,形成向外擴張的結構,其余信息放置在空白位置。

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

這個版面,可以看出版心采用了四個點來支撐,剩余兩個文字信息分布在版面的水平方向,就是圖中標注成藍色的位置。

這個版面中出現了帶有出血的元素,看一下它的版心和元素的構成情況,采用了四個點的出血結構。

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

這個版面中,主體的形狀變化較強。除編排在四角的元素外,其余元素都采用了繞排的呼應形式安排在了空白位置上,整體看去采用了四個點來產生張力作用。

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

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

我們來總結一下,當版面底部已經有一個很大的圖像或者文字時,版面頂部只要有一個元素就可以撐起整個版面的張力。

頂部也可以是兩個元素來同時產生張力作用。

對于主體位于中心位置的版面,我們最少需要三個點來起到支撐版心的作用。

這里也可以是四個點來描述版面的張力大小。

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

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

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

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

接下來在垂直位置添加裝飾性的點元素來起到占據空間的目的。

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

接下來我們看一下它的元素構成結構。

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

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

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

這個版面因為點元素的出現,整體給人的感受非常飽滿,將點去除后,原本被占據的空間變小了,明顯沒有之前的版面具有視覺張力。

案例演示

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

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

接下來我們來看一下文案內容,一個航拍無人機的宣傳廣告,含有品牌的標志和文案以及圖片信息。

根據文案信息,我們給項目添加氣質關鍵詞,及表現出科技的領先感,同時因為產品屬于親民定位,我們還需要加入具有輕松與溫情的氣質。主視覺決定采用文字為主強調產品名稱,加入文字并放大成為版面中最大的面積。

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

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

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

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

色彩方面采用橙紅色作為主色調,烘托親民的色彩氛圍。接下來將產品疊壓在文字之上,加強版面的層次感。

為了繼續(xù)加強版面的中層次變化,我們在文字與圖像之間添加陰影,細節(jié)決定成敗,一個簡單的陰影也是需要體現出層次變化的。從模糊到清晰,從暗淡到濃重的變化都是塑造細節(jié)的關鍵,這里為投影添加三層強中弱的變化,這樣一來,陰影部分的刻畫就完成了。

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

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

我們試著將信息全都集中到一起會怎樣呢?

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

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

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

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

今天我們一起學習了視覺張力在版面中的應用技巧,一起了解到了圖像與文字在版面中不同位置所起到的作用,也講解了版面的骨骼是如何構成的,希望我們的內容依然能夠對你有所幫助。

藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

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

資深UI設計者

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

其實根據我的從業(yè)經驗來看,如果想真正的了解色彩,就需要一套非常完整、系統的訓練方法。可能很多人包括我自己,一開始都對這些訓練不以為意,認為直接學習配色理論或方法不是更好么?為什么還要做這些色彩訓練呢?認為這些訓練沒有意義,甚至有的人會覺得是小孩玩的游戲。

但殊不知其實我們每個人的色感,正是在兒童時期形成的,因為兒童時期的認知更加純粹,對于色彩的想象力以及受到的限制要比成人少得多,所以賦予色彩的深度和廣度也就比成年人更加豐富。

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

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

比如現在給你一個蘋果,可能我們的第一反應就是直接把它吃了,事后要你回憶對蘋果這個物體的印象,也許你體會的并不深刻。

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

根據你的五官對其進行認知,這時你對蘋果的體會將和前一次大不相同。

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

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

賦予色彩名稱

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

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

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

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

根據這個顏色我們可以聯想到向日葵,所以也可以命名為向日葵。

我們還可以聯想到月亮,所以也可以起名叫月亮黃。

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

還能聯想到麥當勞的陽光橙,所以也可以命名為陽光橙。總之當你看到這個顏色時,腦海中能夠聯想到的詞匯都可以使用,哪怕是跟這個顏色相差很多也沒關系,最重要的是你自己的感受。

對色彩進行理性分析

對色彩進行命名之后,第二步要做的就是對色彩進行理性分析。

我們還是拿這個顏色來進行練習,先來找出它的色相、明度和飽和度。

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

然后通過純度和明度的調整來找到與右側顏色相符的色值,這里我們得到了一個數值。

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

HSB色值猜想完之后我們再來看看它的RGB色值。

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

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

我們調出RGB色相環(huán),我們看采樣的這個黃色是偏向紅色多一些還是偏向綠色多一些,很明顯是偏紅一些,因為它比較偏橙色。

所以我們就可以適當的減少綠色的成分。

我們來看一下對比,已經接近了。

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

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

△ http://www.rgbchallenge.com/

如果想提升對RGB的敏感度,可以通過這個小游戲來練習一下。

玩法很簡單,根據畫面中給出的RGB色值來選擇你認為相對應的顏色,選對了繼續(xù)下一關,選錯了GAME OVER重來。

接下來我們來看CMYK色值。

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

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

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

所以我們得到這個顏色中需要加入紅色,但是應該加多少呢?

這里我們加入了20%的紅,同時將黃色的含量降到80%,這個是根據經驗和感覺來的。

這時將兩個顏色對比來看一下,已經相差不多了。

最后通過數值來比對,可以說幾乎已經很接近了。

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

然后我們再來看看色調。關于色調這種老生常談的問題這里就不多講了,因為之前我專門寫過一篇關于色調的文章《高手的平面課堂!最容易上手的配色方法》,里面已經講的很詳細了。如果你看過這篇文章,那么當你得到了一個顏色的CMYK色值時,就已經可以判斷出是什么色調了。

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

將這些代表性色調提取出來一比對,就可以知道這個色彩的大致色調是什么了。

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

色調看完之后我們再來看看它的色彩家族,也就是這五大色相關系。

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

這樣找到相應的色相就非常簡單了,但是不建議大家這樣做,除非是新手或剛入門的同學。

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

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

接著是對比色,120度左右。

最后是互補色,對比最強烈,也就是相距180度左右的顏色。

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

對色彩進行感性分析

下面我們再來看看第三步,對色彩的感性分析,所謂感性分析也就是說這個色彩給你什么感覺。

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

對色彩進行行業(yè)分析

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

比如最明顯的就是兒童、寵物、游戲、時尚、運動、促銷、餐飲、農業(yè)、傳統、汽車等等。

對色彩進行設計應用

以上這些訓練做完之后就進入到了最后一步,也就是用這個色彩進行任意內容的設計。

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

1. 案例一

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

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

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

因為我們要用到采樣的這個黃色所以主色已經確定了,但是這個畫面只用一個顏色顯然是不夠的,所以我們還需要其他顏色。

因為考慮到設計的內容和風格所以我覺得配色上應該有一些對比,但是又不想使用對比很強的互補色,所以這里我選擇對比色,但是黃色的對比色有兩個應該選擇哪個呢,這里我選擇了紫色。

因為如果了解NBA的話應該知道,湖人隊的球衣本身就是黃色和紫色,也就是人們所謂的紫金戰(zhàn)袍。

但是這個紫色有些偏紅,所以我們可以調整成偏藍一些。這也是我想告訴大家的一點就是配色是靈活的,千萬不要死腦筋。

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

這樣看上去就會好很多,那么第一個案例就完成了。

2. 案例二

第二個案例我們選擇鞋子來當主體,然后編排主標題。

將其余信息圍繞主體鞋子來編排,通過適當的變形角度來為畫面增加靈動。

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

因為我們設計的這三個Banner是一個系列的,所以配色也應該是統一的不需要改動。

3. 案例三

我們再來看看最后一個案例,前兩個案例分別是以人物為主體和以產品為主體,所以第三個案例我就直接用文字編排,將文字信息進行分組給圖片留好位置。

為了增加一些形式感,下方的標題同樣進行描邊處理并進行裁剪。

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

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

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

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

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計  cs界面設計  ipad界面設計  包裝設計 、 圖標定制  用戶體驗 、交互設計、 網站建設 、平面設計服務

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

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

 

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


目錄

1、認識keynote

2、制作準備

3、動效

4、構件順序

5、演講相關



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

其中,右側的參數調整又分為“格式”、“動畫效果”和“文稿”三個Tab。當選中左側導航中的幻燈片或舞臺中的某個元素時,對應的參數調整面板是不同的。


在開始動手之前,還有一些準備工作需要完成。首先就是整個幻燈片的尺寸,常見的尺寸比例有4:3和16:9,需要根據演示現場的幕布寬高比來確定選擇哪一種。如果是在移動設備上演示,就根據移動設備的屏幕比例來選擇,一般手機是16:9,Pad是4:3。當然,也可以自定義幻燈片的寬高尺寸?;脽羝叽缭谟覀鹊摹拔母濉盩ab中調整。

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

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


Keynote中的動效分為幻燈片之間的過渡動效和單個元素的動效。


幻燈片之間的過渡動效有以下這些:

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

單個元素的動效又分為三個階段:出現、動作、消失。


出現,顧名思義就是從無到有的一個過程,主要有以下這些:

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

消失,顧名思義與出現相反,是一個從有到無的過程。

其中,打字效果和跟蹤這兩個動效只針對文本才會有效果。

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


使用動效還有一個誤區(qū)就是,不是所有的頁面之間或者元素出現消失都是需要動效的,過多泛濫地使用動效反而會給觀眾造成視覺疲勞,讓他們的關注點都集中在你的動效上,從而對本身的演示內容失去關注。


構件順序是針對單張幻燈片內添加了動效的元素而設定的。可想而知,一張幻燈片內的所有元素,很少會有同時產生動作的情況,因此必然有個先后順序,這個順序就是構件順序。通過構件順序,可以組合出變化多端的動畫效果來。


構件順序分為三種:一起、之后、點按。如下圖:

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


點按比較好理解,就是兩個構件動作之間需要手動控制。下面重點來講一下,“一起”與“之后”。我們通過時間軸的形式,來讓大家更容易理解。

當然,我們還可以設置延遲時間,讓構件交替動作。

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

那么這時候,我們如果要調整其中一個元素的動作順序就顯得異常困難了。因為在舞臺區(qū)域中,這些元素可能都是疊加在一起的,想要通過點選找到元素幾乎是不可能的,而構件順序列表中的命名也顯得很混亂……


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

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


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


其次,Keynote的版本也是需要考慮的問題,最好可以拿到演示所用的電腦來演示一遍,作者就曾經因為軟件版本問題導致一個動效無法展現,進而影響了那個片段的演講。


此外,我們不可能講所有要講的內容全部呈現在幻燈片上,適當的注釋是必不可少的。

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

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

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

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


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

 

藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

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

資深UI設計者

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

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

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

陰影的概念

還是正經解釋一下什么是陰影?

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

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

陰影的要素

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

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

畫陰影時,一般是先定光點和光足,然后是陰點陰足,光點連接陰點,光足連接陰足,這樣陰影自然就畫出來了。

用這張照片來做個簡單說明:

光源的位置,就是太陽,向下垂線交于海平線于一點,這個就是光足。

然后,定出一些椅子上的陰點和陰足。

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

光源的分類

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

1. 自然光

自然光有兩個特點:光線平行;隨著時間的變化而變化,不會為?的意志所轉移。

光線平行

因為太陽、月亮這樣的發(fā)光體離我們太過遙遠,所以可以把它發(fā)散的光線視為平行的。

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

這是因為透視的現象,就像這個地板,不也是平行的嗎?但是因為透視的關系,它們會相交于一點,光線也是同樣道理,因為我們以這個角度觀察,所以光線會出現透視現象。

也就是說,當我們從側面觀察的話,就很明顯看到光線是平行的。

隨著時間的變化而變化,不會為人的意志所轉移

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

2. 人造光

人造光有兩個特點:光線不平行,呈放射狀;根據需要變換位置。

光線不平行,呈放射狀

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

它的光點是路燈,向下的垂線,到地面上的光足,然后是消防栓,光點連接陰點,光足連接陰足,畫出陰影,可以看出,因為與光源距離近,所以光線是不平行的,呈現一種放射狀,并且影子也會呈現放射狀。

根據需要變換位置

為了呈現想要的視覺效果,可以隨意移動光源的位置,甚至調整它的顏色、明暗等,可以人為改變。

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

當各個方向都有光源的時候,投影就會消失。在醫(yī)學上,用的無影燈就是根據這個原理制成的,因為醫(yī)生做手術的時候,手和器械都有可能對手術部位造成干擾的陰影,所以無影燈就能盡量消除陰影。

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

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

我們再通過幾張圖片來進一步了解陰影規(guī)律及特點。

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

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

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

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

△ 接近中午的陽光

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

當物體有一個陰影,我們可以通過影點與陰點和陰足的連線,找到光點和光足。這樣也就找到光源的位置。

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

正常情況下,物體在光源下的投影,如果在其中出現一個臺階會怎樣?

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

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

陰影在設計中的應用

第一個是接觸陰影,是物體與物體之間接觸所產生的陰影,一般這種我們都可以用圖層樣式當中的陰影來設置。

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

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

第三種是倒影,針對反光較強的面會有,比如鏡面、水面、琉璃臺面等,并且在表現一些高端產品設計時候經常會使用到。

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

第五種合成設計中的投影,和實際照片中的場景是一樣道理的,這也是所有投影當中比較難操作的。

最后一個創(chuàng)意投影,它不會根據物體本身的形態(tài)去表現,而是根據文案和設計構思而產生的很有創(chuàng)意的投影形式,當然,這個主要靠大家發(fā)散思維的聯想了。

案例時間

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

給下面右側的書籍做一個和左邊一樣的投影:

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

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

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

利用圖層樣式的投影就完成了,大家在調整的時候可以邊調整邊觀察,以達到一個自然的效果。

第二個方案,是給畫面中的立方體添加一個投影,要符合光影關系。

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

根據之前我們學到的知識點和畫面中其他陰影來進行分析:

先連接幾個人物的影點和陰點,我們知道自然光的光線是平行的,并且我們標記出來的也確實近乎平行的光線,既然這樣,我們就不需要找到光點的位置。

只要復制其中一條光線到立方體上的陰點即可,然后我們再去找光足的位置。

為了找光足,可以先把畫面擴展一下,然后連接影點和陰足,三個參照物連線的延長線會相交于一點,這個點就是光足。

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

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

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

做個高斯模糊處理,數值2。

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

做高斯模糊,數值1.4。

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

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

如果影子太重,可以適當降低不透明度,再統一暗部的色調,這樣陰影就做完了。

最后總結

圖標該配上文字嗎

用心設計

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

 

圖標在增加界面美觀性的同時也在破壞著界面的清晰性,在設計的過程中如果你糾結于圖標是否需要配上文字那請仔細閱讀這篇文章。

首先捫心自問下是否清楚在設計中什么時候用圖標? 什么時候用文字?什么時候用圖標+文字?你是否能清晰的分辨他們分別在什么場景下使用呢?


前言

之所以要寫一篇這樣的文章是因為最近有很多的設計小伙伴反復在爭論一個觀點 圖標配上文字是否有必要?

舉個栗子:

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


圖標定義

廣義

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

狹義

應用于計算機軟件方面,包括:程序標識、數據標識、命令選擇、模式信號或切換開關、狀態(tài)指示等。


圖標變遷

圖標是具有指代意義的具有標識性質的圖形,它不僅是一種圖形,更是一種標識,它具有高度濃縮并快捷傳達信息、便于記憶的特性。它不僅歷史久遠,從上古時代的圖騰,到20、21世紀具有更多含義和功能的各種圖標,而且應用范圍極為廣泛,可以說它無所不在。一個國家的圖標就是國旗;一件商品的圖標是注冊商標;軍隊的圖標是軍旗;學校的圖標是?;铡?

我們通過圖標看到的不僅僅是圖標本身,而是它所代表的內在含義。


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


圖標的優(yōu)勢

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

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

2.沒有地域語言限制,針對國際通用圖標。

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

3.圖標可以提供視覺引導,迅速識別減少用戶思考時間

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

4.提升整體視覺體驗

好的一套圖標能夠從圖標的獨特性、象征性、記憶性、應用性、組合性、變化性上打動人心,激發(fā)人們的點擊欲望。這樣才能使圖標設計達到上乘水準,從而提升整體的視覺水準


圖標不適用場景

1.表達含義復雜,難以揣測

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

2.圖標存在多重含義

如果圖標不能言簡意賅的表達出寓意,并且存在爭議的請避免使用,如果非要使用請采用圖標+文字的形式。比如appstore側邊導航第一個你覺得是什么?收藏?標記?錯!他是探索,如果我不告訴你可能每個人猜的含義都不同。所以我們在設計圖標的時候要勁量去避免多重含義的圖標。

3.專業(yè)性過強很難作為通用圖標

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


小結

1.為了提升產品視覺體驗,圖標設計一定要極簡,如果使用圖標能夠百分百表達其含義時,請優(yōu)先使用

2.針對國際上面通用的有大眾認知的如:搜索、wifi、設置、藍牙等圖標無需配上文字,除非做視覺引導為了保持一致而統一添加文字的列表

3.禁止使用多意圖標(不讓用戶思考,如果用戶不能在5s內很快識別出圖標的意思,那這個圖標的設計是失敗的)

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

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

 

藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

信息的阻力設計

資深UI設計者

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

什么是阻力?


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


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


Image title


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


但是當我們需要定義一個新品類時,這個思路就會不一樣。



定義新品類


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


Image title


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


那么當我們需要重新定義一個已有品類時,我們的思路是什么呢?



重新定義品類


Image title



這是我們2016年發(fā)版的首頁設計,自如和跟之前的租房平臺不太一樣,所以我們的首頁設計要重新定義一個品類。以前,尤其是我們80后對于租房會有什么樣的感受都是有一些認知的,比如說黑中介…其實大家都有一些印象,被坑過的80后不在少數。自如出現的時候可能就需要重新整理大家對于這個品類的認知。所以我們在設計首頁的時候,先用一個高顏值大圖展現一下房子是什么樣子(因為我們的房子確實顏值很高品質不錯),搜索按紐也不是很大。所傳達的思路是我們希望用戶在找房子之前對我們的平臺有些認知,或者說對租房這個品類,打破固有的刻板印象,有重新的認知。我把這種重新定義已有品類的設計方法定義為“我們不一樣”。



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


Image title


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


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


Image title


然后再看這個顏色本身,我們是不是可以選一些相對共性的顏色,比如把標準的紅綠藍改成紅,暖綠,和偏綠的藍(暖藍),然后把選中的顏色找他的擴展色,用擴展色畫出一些按紐。


Image title


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



低頻應用的阻力設計


作為一個低頻使用的App,跟高頻使用的App阻力設計思路最重要的不同點是什么呢?我從學習成本這點來切入。



學習成本


微信的聊天記錄刪除功能,有一點學習成本。


Image title


用戶在使用中偶爾向左滑發(fā)現了可以刪除聊天記錄,通過偶爾的觸發(fā),用戶學會了這樣刪除聊天記錄。通過后期每天不斷地使用強化了對這個功能點的記憶。


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


Image title


告訴用戶收藏之后,收藏列表可以點擊右上角這個按鈕查看。我們不但要把所有的功能擺出來,而且還要告訴用戶這個功能下一步怎么走。因為他如果這次沒學會,以后可能也不會用這個App了,這點跟高頻的產品不一樣。



點擊數據


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


Image title


可以看到,“租房”這個按紐我們剛開始設計的時候,感覺應該是高的,因為這個是總集,我們在后期的訪問中發(fā)現用戶認為這個是表示分類,所以設計的雖然明顯,但是用戶仍然認為這個不可點。



減少阻力


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


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


Image title


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


Image title


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


Image title


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


以上就是是我對信息阻力設計的整理,希望大家能夠有所收獲。

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務。

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔