亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

作者高玉璁   臉書：www.facebook.com    原文鏈接：https://medium.com

基本學(xué)習(xí)目標(biāo)(讀完上下篇的應(yīng)用練習(xí))

講在前面 → 這篇文章并不是一篇教您如何使用工具的文章，也就是說我不會(huì)告訴您Sketch3/ Photoshop/illustrator這些工具應(yīng)該要如何使用。但這篇文章內(nèi)的范例皆是使用Sketch3 or Photoshop所制作完成，如有需要任何的范例圖/成品圖歡迎寄信留言跟我索取。

踏入新創(chuàng)科技業(yè)以來，總是聽見許多設(shè)計(jì)師/工程師朋友們?cè)诒г乖O(shè)計(jì)師與工程師之間的合作有多么的…不融洽（糟糕），要碼是設(shè)計(jì)師常常抱怨工程師沒有美感，不重視設(shè)計(jì)細(xì)節(jié)，或是連Guideline都不讀完就來跟我講該怎樣設(shè)計(jì)（ → 強(qiáng)烈建議iOS/Android 工程師不管未來是否會(huì)接觸接口設(shè)計(jì)都花些時(shí)間把iOS的Human Interface Guideline跟Material Design Guideline給看完，這是基本?。?！基本啊?。≡诰€已經(jīng)有滿坑滿谷的翻譯文章啰，所以別再拿看不懂英文當(dāng)借口啰）；另一方面就是工程師也常常會(huì)抱怨設(shè)計(jì)師總是把寫動(dòng)畫當(dāng)作小畫家，把寫程序當(dāng)成寫國字（Framer會(huì)紅的原因？?。┗蚴强偸怯兄^于天馬行空的設(shè)計(jì)想法。

很幸運(yùn)的是這個(gè)狀況幾乎不曾發(fā)生在小弟迄今的工作經(jīng)驗(yàn)當(dāng)中，主要是因?yàn)橐黄鸸ぷ鞯那拜厒兙褪且蝗荷窦?jí)的工程師或是神級(jí)的工程師+設(shè)計(jì)師，即使是學(xué)生時(shí)期合作的設(shè)計(jì)師們也都是相當(dāng)優(yōu)秀的伙伴。但考慮到80%..90%的工程師們都會(huì)有過這么一段與設(shè)計(jì)奮斗的辛酸史，在這邊希望能藉由一連串的基礎(chǔ)概念，以及小弟日常工作運(yùn)用到的知識(shí)來幫助廣大的非設(shè)計(jì)師職場(chǎng)伙伴來多了解一些設(shè)計(jì)的眉眉角角。

當(dāng)然，（設(shè)計(jì)師+工程師聯(lián)機(jī)）與PM的戰(zhàn)爭(zhēng)又是另外一個(gè)故事了。

小弟我既不是本科系（設(shè)計(jì)相關(guān)）出身，也不是資工相關(guān)出身，但有幸接受幾位厲害前輩（Hammer，Sophy，F(xiàn)ran）的指導(dǎo)，目前是一位對(duì)設(shè)計(jì)與使用者體驗(yàn)具有相當(dāng)熱忱，但卻是個(gè)設(shè)計(jì)做不好，拍照拍不好的iOS工程師。因?yàn)椴痪弑究葡当尘斑@樣的先天性優(yōu)勢(shì)（劣勢(shì)）？！太艱澀的理論就…期許各領(lǐng)域的前輩們?cè)陂喿x之余能給予一些指教啰。這邊首先針對(duì)漸層的主題寫了一篇（上），來聊聊常常使用的漸層類型，該如何快速有效的運(yùn)用這些漸層類型，以及分享一些在線設(shè)計(jì)師們優(yōu)秀的作品。

在一切開始之前，首先推薦一個(gè)網(wǎng)站uiGradient，無聊沒事的時(shí)候可以上去晃晃找點(diǎn)漸層配色的靈感。

這系列文章主要會(huì)介紹四個(gè)主題：

色彩學(xué)

類似色漸層（Linear Gradient）

對(duì)比色漸層（Linear Gradient）

金屬色漸層

色彩學(xué)

底下這就是傳說中的伊登色相環(huán)，The end。

蛤？為什么沒有介紹一下色彩學(xué)，因?yàn)?hellip;其實(shí)在這里還不需要太了解啊，好麻那我們稍微來說一下什么是色相環(huán)好了：

基礎(chǔ)的十二色環(huán)由瑞士設(shè)計(jì)師約翰·伊登所提出，其結(jié)構(gòu)為：等邊三角形內(nèi)的三原色─紅、黃、藍(lán)作為第一次色，將三原色兩兩相加可調(diào)出橙、綠、紫等第二次色，如果再將這六種顏色中兩相鄰的顏色等量互調(diào)，得到該兩色的中間色（第三次色），便產(chǎn)生了十二色色環(huán)。

是不是已經(jīng)看不下去了？這種太理論的東西對(duì)于非專業(yè)的我們稍微有些太遙遠(yuǎn)啰，當(dāng)然并不是說這些設(shè)計(jì)的理論不重要，只是對(duì)于剛?cè)腴T的伙伴們我們可以稍稍緩一些，在建立了相關(guān)基礎(chǔ)之后我們?cè)賮砀M(jìn)一步聊聊這些色彩學(xué)應(yīng)用的理論。這篇文章所應(yīng)用到的漸層運(yùn)用方法其實(shí)只要簡(jiǎn)單理解一下伊登色相環(huán)，相近色，對(duì)比色以及色相明度彩度等等的基礎(chǔ)概念就夠啰。

類似色漸層

灰階漸層：首先我們先從配色的基礎(chǔ)的開始，白 → 灰的漸層可以說是大自然中光影變化最基本的一種類型，這樣子的漸層搭配也是最建議初學(xué)者拿來練功用的喔（再運(yùn)用白 → 灰的漸層時(shí)并不需要考慮到檢測(cè)器上各漸層區(qū)段的差異，這些差異只要一用不好就很容易導(dǎo)致顏色灰階過高（臟掉）或是飽和度（彩度）不均勻的問題）。以下圖范例而言，左側(cè)上淺下灰的漸層，在搭配內(nèi)光暈后能夠輕易的讓圖形浮凸于紙面；右側(cè)上灰下淺搭的漸層，則可以搭配內(nèi)陰影來呈現(xiàn)凹陷于紙面的效果。

上淺下深（左）上深下淺（右）

上面兩種是基本中的基本，如果想要做出中間凹陷，但是凹陷的部分是浮凸出來的感覺，除了上灰下淺的基本技巧之外還要稍微運(yùn)用一點(diǎn)放射狀漸層來分別調(diào)整上部以及底部的光影，下一篇會(huì)提到更多這樣的觀念喔。

是不是有一種凸出來的感覺呢?

當(dāng)然，上圖幾個(gè)示范的三維效果其實(shí)還不夠完整，但以現(xiàn)在Flat Design盛行的狀況，對(duì)于光于影的變化有一些基礎(chǔ)的了解對(duì)于取悅團(tuán)隊(duì)中的設(shè)計(jì)師妹妹肯定是相當(dāng)有幫助的（笑）。有了基本的視覺雛形，我們可以再進(jìn)一步的進(jìn)行漸層（漸層角度，漸層區(qū)段，內(nèi)外光暈）的微調(diào)，同時(shí)考慮到光影的變化以及陰影的角度位置，就可以輕易的作出如下圖范例的效果啰?。ㄏ聢D除了白 → 淺灰的漸層之外，為了做出凹陷的平面，同時(shí)也運(yùn)用了淺黑 → 深黑的漸層變化）

Designed by by Paco for Smartisan

那么究竟該如何制作一個(gè)簡(jiǎn)單的灰階漸層呢？其實(shí)做起來就跟下面這張圖一樣容易 →

主要的調(diào)整就只在檢色器的最最最最最左側(cè)上下移動(dòng)即可，如果希望帶點(diǎn)淡淡的色澤可以往右邊稍微移動(dòng)一點(diǎn)點(diǎn)，這樣的效果有時(shí)候會(huì)運(yùn)用在物體本身是白色但周圍是有色背景時(shí)，物體因?yàn)楸尘爱a(chǎn)生的反光影響到白色物品的表面色澤。如果希望整體給使用者的印象是清爽干凈的，漸層中搭配的灰色就不應(yīng)該太重，如示意圖從白色往下調(diào)整一點(diǎn)點(diǎn)即可，若是選用深灰色來做搭配，產(chǎn)生的則是另一種沈穩(wěn)的效果

該如何簡(jiǎn)單實(shí)作上面的時(shí)鐘icon呢?

Step 1. 繪制一個(gè)上淺下深（顏色相近）的圓角矩形作為icon背景（光源在上）。

Step 2. 為圖形加上內(nèi)陰影（底部）與外陰影來凸顯出立體感。

Step 3. 繪制中間的鐘面部分，運(yùn)用淺黑 → 深黑的漸層來制作凹陷的平面，同時(shí)搭配橢圓形狀+高斯模糊來制作簡(jiǎn)單的光影效果以進(jìn)一步模擬圓弧凸面的效果。

Step 4. 最后在繪制指針時(shí)要稍微注意一下漸層拉的角度喔??！在繪制時(shí)請(qǐng)務(wù)必隨時(shí)記著光照射的方向 → 在這里因?yàn)橹羔樀倪吘壿^細(xì)，指針尖端邊緣的部分會(huì)因?yàn)榉垂舛^為明亮，因此我拉的漸層既不是正0度或是90度而是順著指針方向的25度左右。后續(xù)的部分較簡(jiǎn)單我們就先不多談啦（其實(shí)是懶惰）XD

高彩度色系漸層

講完了灰階的基礎(chǔ)漸層搭配，我們來看一下其他色系的搭配。單純?cè)谕粋€(gè)顏色當(dāng)中進(jìn)行明度彩度的調(diào)整如下圖跟灰階的部分相當(dāng)類似就不再贅述啰。

這邊只補(bǔ)充一個(gè)小重點(diǎn)，同色系的漸層選色請(qǐng)記得往檢色器的右下角移動(dòng)，右下角移動(dòng)，右下角移動(dòng)，很重要所以說三次。這樣子的移動(dòng)方式主要是為了避免調(diào)整色階的同時(shí)灰調(diào)的增加過快，漸層也比較不容易臟掉或是造成顏色差異過大喔。除此之外，對(duì)于初學(xué)者在漸層的角度配置調(diào)整上面，當(dāng)所有物體處于相同平面時(shí)應(yīng)該盡量讓整體角度效果一致（畢竟光主要會(huì)從同一個(gè)地方來麻？）。

接下來我們來看看稍微進(jìn)階一點(diǎn)點(diǎn)的 → 選配漸層對(duì)于跟我一樣的初學(xué)者而言遇到的幾個(gè)問題不外乎是 1.搭配的漸層色感覺不對(duì)（不自然） 2.搭配的漸層色好像有點(diǎn)暗沉（臟）。那該怎么樣避免這些問題來做出漂亮的漸層呢？

配出上圖這樣的漸層其實(shí)非常容易，除了前面所提到的一些小技巧之外只要注意兩個(gè)基本原則就可以啰，對(duì)于淺色系的漸層，如同淺色系漸層范例，明度的調(diào)整區(qū)間不宜太大（1/10）。在檢色器上面我們可以改變彩度，色相來配出喜愛的漸層變化，但是上下移動(dòng)的幅度就要保守一點(diǎn)，否則配出來的漸層就很容易產(chǎn)生臟臟的視覺效果。

△ 淺色系漸層范例

至于暗色系的漸層，明度的變化就可以大一點(diǎn)，但記得除非漸層一開始的選色就是相當(dāng)深的暗色系，否則調(diào)整的幅度也請(qǐng)盡可能確保在明度的變化在1/4–1/5的區(qū)間來避免過臟或是顏色落差過大的問題。

△ 暗色系漸層范例

補(bǔ)上一個(gè)類似色搭配圖形（透明度）變化的范例，藍(lán)綠，綠色漸層的使用相當(dāng)?shù)钠毡?，?dāng)這類型顏色的明度及彩度較高時(shí)往往可以帶給使用者一種活潑明亮的視覺印象。

高明度色系漸層

上面幾組漸層的搭配彩度較高，現(xiàn)在我們來看一下該如何處理明度較高的漸層配色模式?；A(chǔ)的高明度漸層處理起來相對(duì)容易，確保選擇的顏色都保持在檢色器的上方1/5內(nèi)，同時(shí)不要讓彩度變化過大都可以情松達(dá)到如下圖的效果。

莫名其妙好像寫了一堆東西，我們利用一個(gè)范例來練習(xí)一下這些漸層的變化，這個(gè)范例是由設(shè)計(jì)師Adrian Fernandez運(yùn)用漸層做出來的瀑布效果。

Step1.首先，我們將工作區(qū)塊分割成三個(gè)區(qū)塊，運(yùn)用類似色選擇相近的顏色填滿色塊，這邊選擇的藍(lán) → 藍(lán)綠色跟作者使用的相同，練習(xí)時(shí)建議嘗試不同的顏色。搭配白色透明度色塊就可以快速的做出簡(jiǎn)單的漸層以及三維效果，注意喔，這邊還沒有使用到任何的漸層。

Step2.分別在三個(gè)區(qū)塊中運(yùn)用上淺下深的概念由上往下來做出漸層，拉出畫面的層次感。

Step3.使用不同寬度的矩形（顏色選擇高明度低彩度的藍(lán) → 藍(lán)綠色，搭配透明度50%-100%不等的透明度）模擬出瀑布的水流。

Step4.為瀑度水流加上透明度漸層

Step5. 作者實(shí)際的成品在這，有興趣的朋友建議自行臨摹完成練習(xí)，對(duì)于漸層的運(yùn)用肯定會(huì)更加的得心應(yīng)手。當(dāng)然，從作者的成品當(dāng)中可以發(fā)現(xiàn)離Step4還有不少的細(xì)節(jié)需要調(diào)整，因?yàn)闈u層中顏色細(xì)微的變化，以及每個(gè)設(shè)計(jì)者對(duì)顏色的喜好，敏銳程度，即便是臨摹的作品常常做到最后也會(huì)發(fā)現(xiàn)感覺完全不一樣呢。

對(duì)比色漸層

什么是對(duì)比色？

在色相環(huán)當(dāng)中，相對(duì)成180度，也就是直線兩端的顏色，即為對(duì)比色〈又稱為補(bǔ)色〉?；旧现谱鳚u層的原則都是相當(dāng)類似的，但是在運(yùn)用對(duì)比色搭配漸層使用時(shí)，有幾個(gè)小技巧是我會(huì)特別注意的：

- 對(duì)比選色的彩度差異不要太大。

- 在選色上不一定要拘泥于剛剛好180度，基本上160–200度這個(gè)區(qū)間都可以達(dá)到相當(dāng)不錯(cuò)的效果。

- 建議畫面的配置上一個(gè)做為主色一個(gè)作為副色。

- 請(qǐng)根據(jù)類似色漸層章節(jié)中的概念來制作漸層。

對(duì)比色漸層范例

相信大家應(yīng)該也發(fā)現(xiàn)近年來漸層在接口設(shè)計(jì)/簡(jiǎn)報(bào)上面的運(yùn)用其實(shí)都相當(dāng)?shù)钠毡?，像是我相?dāng)喜愛的一位泰國設(shè)計(jì)師Tintins跟美國的設(shè)計(jì)工作室Awesomed在作品中都使用了相當(dāng)多的漸層元素。除此之外，我們也可以發(fā)現(xiàn)漸層常?？梢阅涿畹貛С鲆恍┖孟窈軈柡Φ母杏X，有一種把光影融入設(shè)計(jì)里面的Feel。對(duì)于初學(xué)者而言，利用漸層做出干凈易用的接口是相對(duì)難的，日后會(huì)多拿一些工作上的使用與經(jīng)驗(yàn)和大家分享。底下幾組是我利用上面提到的各種技巧拉出來的對(duì)比色漸層界面：

預(yù)告：金屬色漸層&放射狀漸層

下一篇會(huì)跟大家聊聊金屬漸層該如何使用，有時(shí)間會(huì)再談?wù)劮派錉畹臐u層可以產(chǎn)生怎麼樣的視覺效果蘿。

熟悉金屬色和放射狀漸層的運(yùn)用之后也可以和我一樣輕鬆(嗎?)地做出如下圖的效果喔

ps：不知道為什么（中）篇怎么也傳不上來，那么長(zhǎng)的篇幅編輯好了傳上去結(jié)果大段的丟失內(nèi)容，試了5次還這樣。媽蛋，放棄不想傳了?。。∠肟吹目梢匀ノ业墓娞?hào)看。。。