這是一篇不看會后悔的配色干貨!
普遍意義上的色彩是指什么?
簡單點來說,色彩即顏色,顏色可以分成有彩色和無彩色兩大類,看有彩色主要看色相/純度/明度三個方面的屬性,無彩色也就是白色/黑色/各種深淺不同的灰色,也可以說無彩色是飽和度為零的色彩。
ui設(shè)計公司干貨文章
色相,即可以明確表示顏色色別的名稱,比如紅橙黃綠藍靛紫:
色彩有冷暖之分,我大致用溫度的概念標(biāo)注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(當(dāng)然,這里的溫度是我自己為了具體化冷暖的概念而標(biāo)記的,主要是方便大家理解,所以不用去糾結(jié)這個數(shù)值準(zhǔn)不準(zhǔn)確哈哈,你明白他們代表很冷/很熱/一般冷/一般熱就好了!~)
明度,就是指色彩的明亮程度(通俗點講,在某種色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。
ui設(shè)計公司干貨文章?設(shè)計流程和配色思路分享
不管我們做什么方面的設(shè)計,設(shè)計練習(xí)也好,實際項目也好,在設(shè)計之前,我們最好是能先明確我們的設(shè)計目的是什么,然后確定一個主題,依據(jù)這個設(shè)計目的和主題,去構(gòu)思創(chuàng)意,有了創(chuàng)意后再去去探討具體的落地執(zhí)行,其中包含了字體(標(biāo)題文案)的設(shè)計排版配色、畫面整體的構(gòu)圖和配色、細(xì)節(jié)優(yōu)化、氛圍渲染等等。
1. 設(shè)計之前先確定主題
比如關(guān)于浪漫的主題,浪漫是有很多種表現(xiàn)形式和配色的,但是有一點是有共通性的,那就是要想打造出浪漫的感覺,背景音樂、色彩搭配和氛圍渲染很重要。
2. 配色之前先構(gòu)圖
很多人之所以總是說自己不會配色或不管怎么配色都感覺不對勁,其實是因為,搭配顏色這個動作不能為時太早了,你得先把你整個畫面的構(gòu)圖和基本框架先敲定了再去考慮配色。
先構(gòu)圖再配色,先構(gòu)圖再配色,先構(gòu)圖再配色,重要的事情說三遍!~
因為構(gòu)圖相當(dāng)于化妝的時候先打好底子,底子不打好,你再怎么化妝都是徒勞的。同理,如果你的構(gòu)圖很亂或者基本型都沒出來,你就去考慮配色,很有可能就是你磨半天都設(shè)計不出一個滿意的結(jié)果,這就是很多人磨蹭半天,做出來的設(shè)計依舊不好看的很重要的一個原因。
因為你的設(shè)計步驟錯了。
ui設(shè)計公司干貨文章!一個完整的UI設(shè)計流程是怎樣的?
1User Story
2Functional Map
3Flow Chart
4UI Flow
5Wireframe
6Mockup
7Prototype
使用者要什么? > 從需求中整理出功能 > 用戶怎么操作這些功能? > 操作的過程需要哪些頁面? > 頁面要放什么內(nèi)容/組件?怎么被操作? > 使用者看到的頁面長什么樣子?
1. User Story
功能怎么來的?從「使用者要什么」或「客戶預(yù)期使用者想要什么」開始。
依用戶的身份不同,想要的功能也會不同,完成的任務(wù)不一樣嘛。
2. Functional Map
寫了 User Story,才會知道有哪些大小功能要做。針對不同使用者的需求,從故事中挑出功能。使用者的身份不同往往影響他們能使用的功能,整理歸納出共通和差異處。
3. Flow Chart
當(dāng)開發(fā)者知道使用者想要什么、也有了功能,才有辦法思考「用戶怎么操作功能完成他的任務(wù)或達到目的」。
UI 設(shè)計師常說:「配合用戶的習(xí)慣與行為來設(shè)計操作流程」。就是在這一階段規(guī)劃。如果跳過 Flow Chart,只要產(chǎn)品功能復(fù)雜起來,你家的 RD 就會抱著頭哀嚎了。
4. UI Flow
知道用戶會怎么操作一項功能時,才有辦法規(guī)劃操作動線。UI Flow 指的是頁面與頁面之間的操作流程,用戶想完成任務(wù)會經(jīng)過多少頁面之類。
5. Wireframe
有畫 Wireframe 不代表工程師就看得懂這要干嘛,光看臉皺成一團的表情你也不知道他是踢到腳指還是吃到酸梅。文字說明才是 Wireframe 的重點,包含觸發(fā)、回饋、狀態(tài)變化等等。
6. Mockup
視覺稿…照 Grid 和 Guideline 做吧,之后還有切圖和標(biāo)示文件要弄。
好處是切圖和標(biāo)示文件都有外掛工具可以代勞,甚至設(shè)計師只要顧好原始檔、切圖和標(biāo)示文件都用 Avocode 或 Zeplin 解決。
壞處是,如果不太知道技術(shù)限制,做出來的東西工程師不能用就算了,他們還白挨設(shè)計師的罵。
7. Prototype
做 Prototype 的目的通常是測試和驗證,不管是給使用者操作看看、觀察使用者操作狀況做使用者測試;還是工程師套完程序上線前先測看看有沒有蟲或哪邊爆炸了。所以它一定要可以被操作,不能被實際操作是要怎么測試?腦內(nèi)補完?
Prototype 要可以被操作!
Prototype 要可以被操作!
Prototype 要可以被操作!
不能被操作的都不是 Prototype。
Wireframe 可以做 Prototype,低保真原型。
Mockup 可以做 Prototype,高保真原型。
切圖叫工程師寫程序套版做一個,高保真原型。
ui設(shè)計公司干貨文章
用一篇干貨幫你徹底全面掌握「投影」知識點!
在平面設(shè)計中,除了合成設(shè)計之外,我們在什么情況下會選擇用投影?
1. 增加識別性
比如,在顏色比較混亂的背景上添加文字,或者添加圖片,為了區(qū)分他們之間的主次關(guān)系,我們會添加一個投影。
2. 增加空間感和層次感
通過投影與主體的位置關(guān)系,產(chǎn)生較強的空間感和層次感。
3. 提升畫面格調(diào)
反應(yīng)產(chǎn)品質(zhì)感的投影形式,會提升畫面的格調(diào),這類比較多的是化妝品與奢侈品。
4. 增加形式感
如果你的畫面缺少創(chuàng)意性,不妨試試這類投影形式,通常來說它們都是用投影作為畫面中的主體,以此來傳遞出很強的形式感與故事性。
5. UI設(shè)計
UI 設(shè)計中使用投影。
投影的類型
1. 常規(guī)投影
常規(guī)型投影包含了普通投影,弧形投影,接觸投影,彌散投影。
普通投影
普通投影就是我們最常見的一個投影形式,它可以用圖層樣式來設(shè)置,它的特點就是在圖像的四周都會有點陰影的感覺,讓畫面與背景形成前后景的關(guān)系,就像這里的案例。
弧形投影
弧形投影,它的投影是在物體的一側(cè),像翹起的邊緣。
接觸投影
接觸投影,是物體立面與底面的關(guān)系,會有一種三維立體的感覺。
彌散投影
彌散投影,與普通投影的區(qū)別在于,它更有深度,也是現(xiàn)如今比較流行的投影形式。
2. 長投影
長投影主要分兩種,一種是色塊投影,一種是在色塊的基礎(chǔ)上的漸變投影。
比較常用在圖標(biāo)的設(shè)計,還有海報的設(shè)計。
3. 倒影
倒影,這類型陰影應(yīng)該是比較難處理的了,想必大家在做設(shè)計的時候,大多數(shù)情況會規(guī)避倒影這種形式,除非是拍好的照片自帶倒影,不然很少有同學(xué)愿意觸碰這塊。因為它比較考驗大家對圖形的認(rèn)知能力,以及對透視基礎(chǔ)的掌握,之前我們有講過一篇關(guān)于素描知識的文章,在里面介紹過關(guān)于物體的基本結(jié)構(gòu),我們所看到的任何一個物體都有一個結(jié)構(gòu)或者形狀,比如立方體、圓柱體、圓錐體、球體。任何一個物體都可以視為這四種幾何形狀中的一種或幾種的組合。那在倒影當(dāng)中,這些基本形狀同樣適用。
4. 懸空投影
懸空投影,這類投影給人很強的空間感,并且大多數(shù)情況,投影都會成為畫面中的主角。
分為三種類型,二維的懸空投影,2.5D 的懸空投影,三維懸空投影。
5. 創(chuàng)意投影
創(chuàng)意投影,它不會根據(jù)物體本身的形態(tài)去表現(xiàn),而是根據(jù)文案和設(shè)計構(gòu)思而產(chǎn)生的很有創(chuàng)意的投影形式,這個主要靠大家發(fā)散思維的聯(lián)想了。最常見的就是電影海報中的投影表現(xiàn)。
6. 場景合成投影
一種情況是接近真實的投影,和實際照片是一樣的道理,一種情況是類似于創(chuàng)意投影,合成的投影算是這幾種投影當(dāng)中最難的。
合成中的投影要自己創(chuàng)造一個光源,也就是想象出一個光源,根據(jù)光源關(guān)系,繪制出投影效果。
通過以上的內(nèi)容,我們已經(jīng)了解了ui設(shè)計公司干貨文章的情況了,可見,ui設(shè)計公司干貨文章有很多,這些都是非常專業(yè)的知識,大家一定要多多閱讀。