精美UI設(shè)計(jì)的7條規(guī)則

　　輕松創(chuàng)建精美應(yīng)用程序和網(wǎng)站的指南，好，首先本指南并不適合所有人。本指南適用于誰(shuí)?
 

　　希望能夠在短時(shí)間內(nèi)設(shè)計(jì)自己的漂亮UI的開(kāi)發(fā)人員。
 

　　希望其產(chǎn)品組合比五角大樓PowerPoint更好的UX設(shè)計(jì)師?；蛑浪麄兛梢酝ㄟ^(guò)漂亮的UI包更好地銷售出色的UX的UX設(shè)計(jì)師。
 

　　如果您上過(guò)美術(shù)課程或已經(jīng)將自己視為UI設(shè)計(jì)師，則可能會(huì)發(fā)現(xiàn)本指南是以下幾種組合：
 

　　A、無(wú)聊
 

　　B、錯(cuò)誤
 

　　C、令人討厭
 

　　讓我告訴您在本指南中可以找到的內(nèi)容。
 

　　首先，我是沒(méi)有UI技能的UX設(shè)計(jì)師。我喜歡設(shè)計(jì)UX，但是很長(zhǎng)一段時(shí)間都沒(méi)有這么做，直到我意識(shí)到有很多充分的理由要學(xué)習(xí)如何使界面看起來(lái)不錯(cuò)：
 

　　我的UX咨詢客戶寧愿購(gòu)買某人的技能，如果他們的專業(yè)知識(shí)不僅限于素描方框和箭頭
 

　　我是否想在某個(gè)時(shí)候?yàn)樵缙趩?dòng)工作?最好成為掃地機(jī)
 

　　我有借口 我不懂美學(xué)。我主修工程學(xué)–建造看起來(lái)糟透了的東西幾乎是一種自豪感。
 

　　最后，我以與學(xué)習(xí)任何創(chuàng)造性工作相同的方式來(lái)學(xué)習(xí)應(yīng)用程序的美學(xué)：冷，硬分析。并且無(wú)恥地復(fù)制有效的方法。我已經(jīng)在一個(gè)UI項(xiàng)目上工作了10個(gè)小時(shí)，并且只支付了1筆費(fèi)用。另外9個(gè)是學(xué)習(xí)的狂熱。拼命地在Google和Pinterest和Dribbble上搜索要復(fù)制的內(nèi)容。
 

　　這些“規(guī)則”是那些小時(shí)的教訓(xùn)。
 

　　所以對(duì)書(shū)呆子說(shuō)：如果我現(xiàn)在擅長(zhǎng)設(shè)計(jì)UI，那是因?yàn)槲乙呀?jīng)分析了內(nèi)容-并不是因?yàn)槲覍?duì)美感和平衡感有了直觀的了解就溜了出來(lái)。
 

　　您不會(huì)看到有關(guān)黃金分割率的任何信息。我什至沒(méi)有提到色彩理論。只有我從壞中學(xué)到的東西，然后故意練習(xí)。
 

　　這樣想吧：柔道是根據(jù)日本武術(shù)和哲學(xué)傳統(tǒng)的百年發(fā)展而來(lái)的。您會(huì)參加柔道課程，除了打架之外，還會(huì)聽(tīng)到很多有關(guān)能量，流動(dòng)與和諧的信息。那種東西。
 

　　規(guī)則1：光來(lái)自天空
 

　　陰影是告訴人腦我們正在查看的用戶界面元素的寶貴線索。
 

　　這可能是了解UI設(shè)計(jì)最重要的非顯而易見(jiàn)的事情：光線來(lái)自天空。光線如此頻繁且始終如一地來(lái)自天上，以至于它從下面射入實(shí)際上看起來(lái)很怪異。
 

　　當(dāng)光從天空射出時(shí)，它將照亮事物的頂部，并在其下方投射陰影。東西的頂部較淺，底部則較深。
 

　　您不會(huì)想到人們的下眼瞼特別有陰影，但會(huì)在吸盤上照亮一些光線，突然之間，這是您家門口的惡魔女孩。
 

　　好吧，UI也是如此。正如我們所有臉部特征的所有底面都沒(méi)有陰影一樣，大量 UI元素的底面也有陰影。我們的屏幕是平坦的，但是我們投入了大量的精力使屏幕上的許多元素變?yōu)?-D。
 

　　該圖像中我最喜歡的部分是右下角的撲克手指。
 

　　按下按鈕。即使使用這個(gè)相對(duì)“扁平”的按鈕，仍然存在一些與燈光有關(guān)的細(xì)節(jié)：
 

　　未按下的按鈕(頂部)的底部邊緣變暗。兒子，那里沒(méi)有陽(yáng)光。
 

　　未按下的按鈕在頂部比底部略亮。這是因?yàn)樗７铝松晕澢谋砻?。就像您需要傾斜自己前面的鏡子以看到其中的太陽(yáng)一樣，向上傾斜的表面向您反射更多的陽(yáng)光。
 

　　未按下的按鈕會(huì)投射出微妙的陰影 -在放大的部分可能更容易看到。
 

　　按鈕的底部雖然比頂部還暗，但總體上還是較暗 –這是因?yàn)樗谄聊坏钠矫嫔?，太?yáng)很難照到它。有人可能會(huì)說(shuō)我們?cè)诂F(xiàn)實(shí)生活中看到的所有按下的按鈕也都更暗了，因?yàn)槲覀兊氖謸踝×斯饩€。
 

　　那只是一個(gè)按鈕，但是存在這4個(gè)小燈光效果。這就是這里的教訓(xùn)。現(xiàn)在，我們將其應(yīng)用于所有內(nèi)容。
 

　　iOS 6是個(gè)老新聞，但它是輕量級(jí)行為的一個(gè)很好的案例研究。
 

　　這是一對(duì)iOS 6設(shè)置-“請(qǐng)勿打擾”和“通知”。NBD，對(duì)不對(duì)?但是，看看有多少光效果正在發(fā)生。
 

　　插入控制面板的上唇會(huì)投射一個(gè)小陰影
 

　　“ ON”滑塊軌道也將立即設(shè)置
 

　　“ ON”滑塊軌道是凹形的，底部反射更多的光
 

　　這些圖標(biāo)已列出。看到它們頂部周圍的明亮邊框嗎?這表示垂直于光源的表面，因此會(huì)接收很多光，因此會(huì)反射很多光到您的眼睛中。
 

　　分隔槽口在遠(yuǎn)離太陽(yáng)的地方有陰影，反之亦然
 

　　一個(gè)分切槽口的特寫(xiě)鏡頭，從我的一個(gè)老概念。
 

　　通常嵌入的元素：
 

　　文字輸入欄
 

　　按下按鈕
 

　　滑軌
 

　　單選按鈕(未選中)
 

　　選框
 

　　通常開(kāi)始的元素：
 

　　按鈕(未按下)
 

　　滑塊按鈕
 

　　下拉控件
 

　　牌
 

　　所選單選按鈕的按鈕部分
 

　　彈出窗口
 

　　現(xiàn)在您知道了，到處都會(huì)注意到它。不客氣，孩子。
 

　　等等，Erik，平面設(shè)計(jì)怎么樣?
 

　　我們正處于“扁平化設(shè)計(jì)”趨勢(shì)的5年之內(nèi)，確切地說(shuō)，這聽(tīng)起來(lái)像是。平面設(shè)計(jì)是一種視覺(jué)樣式，其中元素缺少模擬的壓痕或突起。它們只是純色的線條和形狀。
 

　　我喜歡下一個(gè)家伙一樣干凈整潔，但我認(rèn)為這不是長(zhǎng)期趨勢(shì)。我們界面中對(duì)3D的微妙模擬似乎過(guò)于直觀，無(wú)法完全放棄。
 

　　五年前，我曾預(yù)測(cè)我們會(huì)看到“扁平化設(shè)計(jì)”的興起，至少在2019年，這就是我們所處的位置–扁平化外觀的元素，并撒上陰影以幫助我們弄清自己在做什么?？粗?。
 

　　我們生活在黃金時(shí)代，在難以獲得正確的擬態(tài)與易受可用性挑戰(zhàn)的平面設(shè)計(jì)之間的這種快樂(lè)的媒介中。扁平度仍然很干凈，仍然很簡(jiǎn)單，但是對(duì)于單擊/滑動(dòng)/單擊的內(nèi)容，會(huì)有一些陰影和提示。
 

　　OS X Yosemite-扁平，不是扁平。
 

　　或者是扁平化設(shè)計(jì)的另一個(gè)示例：Google的Material Design語(yǔ)言。
 

　　我看到這種情況一直存在。
 

　　它使用微妙的現(xiàn)實(shí)線索來(lái)傳達(dá)信息。關(guān)鍵字，微妙。
 

　　您不能說(shuō)它并沒(méi)有模仿真實(shí)世界，但是它也不是2006年的網(wǎng)絡(luò)。沒(méi)有紋理，沒(méi)有光澤，唯一的漸變純粹是裝飾性的。
 

　　我認(rèn)為，扁平化是未來(lái)的方式。平面?Psh，這已成為過(guò)去。
 

　　那個(gè)平面設(shè)計(jì)現(xiàn)在看起來(lái)很熱!
 

　　規(guī)則2：黑白優(yōu)先
 

　　在添加顏色之前進(jìn)行灰度設(shè)計(jì)可以簡(jiǎn)化視覺(jué)設(shè)計(jì)中最復(fù)雜的元素，并迫使您專注于間距和布局元素。
 

　　這些天，UX設(shè)計(jì)師真的很喜歡設(shè)計(jì)“移動(dòng)優(yōu)先”。這意味著您需要先在手機(jī)上如何瀏覽頁(yè)面和互動(dòng)，然后再在數(shù)十億像素的Retina顯示器上想象它們。
 

　　這種約束是巨大的。它澄清了思想。您從較難的問(wèn)題(小屏幕上可用的應(yīng)用程序)開(kāi)始，然后對(duì)較簡(jiǎn)單的問(wèn)題(大屏幕上可用的應(yīng)用程序)采用解決方案。
 

　　好吧，這里還有另一個(gè)類似的約束：首先設(shè)計(jì)黑白。首先要解決一個(gè)難題，即以各種方式使應(yīng)用程序美觀和可用，而無(wú)需借助顏色。僅在有目的的情況下，最后才添加顏色。
 

　　Haraldur Thorleifsson的灰度線框看起來(lái)和較小的設(shè)計(jì)師完成的網(wǎng)站一樣好。
 

　　這是使應(yīng)用程序看起來(lái)“干凈”和“簡(jiǎn)單”的可靠且簡(jiǎn)便的方法。在太多的地方放置太多的顏色是弄清干凈/簡(jiǎn)單的一種真正簡(jiǎn)單的方法。B&WF會(huì)迫使您首先關(guān)注間距，尺寸和布局。這些是干凈簡(jiǎn)潔設(shè)計(jì)的主要關(guān)注點(diǎn)。
 

　　優(yōu)雅的灰度。
 

　　在某些情況下，B&WF沒(méi)那么有用。具有強(qiáng)烈特定態(tài)度的設(shè)計(jì)(例如“運(yùn)動(dòng)”，“浮華”，“卡通”等)需要能夠很好地使用色彩的設(shè)計(jì)師。但是除了簡(jiǎn)潔之外，大多數(shù)應(yīng)用沒(méi)有特定的態(tài)度。那些確實(shí)可以接受的設(shè)計(jì)起來(lái)要困難得多。
 

　　Julien Renvoye(左)和Cosmin Capitanu(右)的華麗動(dòng)感設(shè)計(jì)。比看起來(lái)更難。
 

　　除此以外，還有B&WF。
 

　　步驟2：如何添加顏色
 

　　添加的最簡(jiǎn)單的顏色是一種顏色。
 

　　在灰度位上添加一種顏色可以簡(jiǎn)單有效地吸引眼球。
 

　　您也可以將其升級(jí)?；叶? 兩種顏色，或者灰度+單個(gè)色調(diào)的多種顏色。
 

　　在實(shí)踐中使用顏色代碼-即等待，色調(diào)是什么?
 

　　網(wǎng)上一般都將顏色稱為RGB十六進(jìn)制代碼。忽略那些是最有用的。RGB不是用于著色設(shè)計(jì)的好框架。HSB(HSV的同義詞，與HSL相似)更加有用。
 

　　HSB比RGB更好，因?yàn)樗衔覀冏匀凰伎碱伾姆绞剑⑶夷梢灶A(yù)測(cè)HSB值的更改將如何影響您要查看的顏色。
 

　　如果對(duì)您而言這是個(gè)新聞，那么這里是有關(guān)HSB顏色的一個(gè)很好的入門。
 

　　Smashing Magazine的單色調(diào)金色主題。
 

　　Smashing Magazine的單色調(diào)藍(lán)色主題。
 

　　通過(guò)修改單個(gè)色調(diào)的飽和度和亮度，您可以生成多種顏色-深色，淺色，背景，重點(diǎn)，引人注目的色彩-但這并不會(huì)使人眼花over亂。
 

　　在不使設(shè)計(jì)混亂的情況下，使用一種或兩種基本色的多種顏色是強(qiáng)調(diào)和中和元素的最可靠方法。
 

　　Kerem Suer的倒數(shù)計(jì)時(shí)器
 

　　根據(jù)我的經(jīng)驗(yàn)，調(diào)整主題顏色以適合UI要求的用例是使用顏色的最重要技能，并且我在這里已經(jīng)編寫(xiě)了實(shí)用指南。
 

　　關(guān)于顏色的其他一些注意事項(xiàng)
 

　　顏色是視覺(jué)設(shè)計(jì)中最復(fù)雜的區(qū)域。雖然很多色彩上的東西是晦澀的，不實(shí)用，無(wú)法完成擺在您面前的設(shè)計(jì)，但我已經(jīng)看到了一些非常好的東西。
 

　　一個(gè)小工具箱：
 

　　學(xué)習(xí)UI設(shè)計(jì)。無(wú)恥的插件：這是我創(chuàng)建的一門課程，其中包含3個(gè)小時(shí)的有關(guān)色彩設(shè)計(jì)的視頻(以及有關(guān)UI設(shè)計(jì)主題的總視頻超過(guò)20個(gè)小時(shí))。在 learningui.design上進(jìn)行檢查。
 

　　UI設(shè)計(jì)中的顏色：(實(shí)用)框架。如果您喜歡本節(jié)，但想了解更多有關(guān)顏色(而不是黑白)的信息，那么這是您的文章。猜猜是誰(shuí)寫(xiě)的!
 

　　切勿使用布萊恩(Ian Storm Taylor)。討論如何在現(xiàn)實(shí)世界中幾乎完全看不到完全平坦的灰色，以及如何使灰色陰影(尤其是較深的陰影)飽和，從而為您的設(shè)計(jì)增加視覺(jué)效果。另外，飽和的灰色更加逼真的真實(shí)世界，這是它的優(yōu)點(diǎn)。
 

　　可訪問(wèn)的顏色生成器。一種方便的工具，可以將一種顏色(您的主題顏色，徽標(biāo)顏色等)轉(zhuǎn)換為可訪問(wèn)的整體調(diào)色板。
 

　　運(yùn)球按顏色搜索。查找適用于特定顏色的另一種很棒的方法。講實(shí)用。如果您已經(jīng)決定了一種顏色，請(qǐng)看看世界上最好的設(shè)計(jì)師正在使用哪種顏色/與之匹配。
 

　　規(guī)則3：將空白加倍
 

　　為了使UI看起來(lái)設(shè)計(jì)合理，請(qǐng)?zhí)砑哟罅康暮粑臻g。
 

　　在規(guī)則2中，我說(shuō)過(guò)B&WF迫使設(shè)計(jì)師在考慮顏色之前考慮間距和布局，這是一件好事。好了，該討論一下間距和布局了。
 

　　如果您是從頭開(kāi)始編寫(xiě)HTML的，那么您可能會(huì)熟悉默認(rèn)情況下HTML在頁(yè)面上的布局方式。
 

　　基本上，所有內(nèi)容都會(huì)粉碎到屏幕頂部。字體很小。線之間絕對(duì)沒(méi)有空格。段落之間有一定的間隔，但并不多。無(wú)論是100像素還是10,000像素，段落都將一直延伸到頁(yè)面的末尾。
 

　　從美學(xué)上講，這太糟糕了。如果要使外觀設(shè)計(jì)得井井有條，則需要添加大量的喘息空間。
 

　　有時(shí)可笑。
 

　　空格，HTML和CSS
 

　　如果您像我一樣習(xí)慣于使用CSS進(jìn)行格式化，默認(rèn)情況下不使用空白，那么該是時(shí)候訓(xùn)練自己這些不良習(xí)慣了。開(kāi)始將空白視為默認(rèn)設(shè)置-一切都始于空白，直到您通過(guò)添加頁(yè)面元素將其刪除為止。
 

　　聲音禪?我認(rèn)為這是人們?nèi)匀辉诩埳瞎蠢粘鲞@些東西的一個(gè)重要原因。
 

　　以空白頁(yè)開(kāi)頭意味著僅以空格開(kāi)頭。您從一開(kāi)始就考慮到邊距和間距。您繪制的所有內(nèi)容都是有意識(shí)的去除空白的決定。
 

　　以一堆未樣式化的HTML開(kāi)頭意味著從內(nèi)容開(kāi)始。間隔是事后的想法。必須明確指出。
 

　　這是Piotr Kwiatkowski提出的音樂(lè)播放器概念說(shuō)明。
 

　　請(qǐng)?zhí)貏e注意左側(cè)的菜單。
 

　　左選單
 

　　菜單項(xiàng)之間的垂直間距是文本本身高度的兩倍。您正在看的12px字體，上下都有相同的填充。
 

　　或查看列表標(biāo)題。“ PLAYLISTS”一詞與其下劃線之間有15px的空格。這超過(guò)了字體本身的上限!這就是列表之間25個(gè)像素中的任何一個(gè)。
 

　　頂部導(dǎo)航欄中有更多空間。文字“搜索所有音樂(lè)”是欄高度的20%。圖標(biāo)的比例類似。
 

　　左側(cè)邊欄顯示文本行之間有足夠的間距，甚至更多。
 

　　皮奧特(Piotr)認(rèn)真考慮在這里放置額外的空間，并獲得了回報(bào)。盡管這只是他為樂(lè)趣而拼湊而成的一個(gè)概念(據(jù)我所知)，但就美學(xué)而言，它足夠漂亮，可以與最好的音樂(lè)UI競(jìng)爭(zhēng)。
 

　　良好，慷慨的空白可以使一些最混亂的界面看起來(lái)很誘人和簡(jiǎn)單，例如論壇、論壇設(shè)計(jì)概念或維基百科。
 

　　維基百科設(shè)計(jì)概念，作者AurélienSalomon
 

　　您會(huì)發(fā)現(xiàn)很多爭(zhēng)論，例如，維基百科的重新設(shè)計(jì)遺漏了使用該網(wǎng)站的關(guān)鍵功能。但是您不能說(shuō)這不是學(xué)習(xí)的好方法!
 

　　在行之間放置空格。
 

　　在元素之間放置空間。
 

　　在元素組之間放置空間。
 

　　分析什么是有效的。
 

　　好，這是第1部分的總結(jié)。感謝您的堅(jiān)持!
 

　　在第2部分中，我將討論最后4條規(guī)則：
 

　　4.了解在圖像上疊加文本的方法
 

　　5.彈出文本并取消彈出
 

　　6.僅使用優(yōu)質(zhì)字體
 

　　7.像藝術(shù)家一樣偷
 

　　如果您在第1部分中學(xué)到了一些有用的知識(shí)，請(qǐng)閱讀第2部分。
 

　　還不夠嗎?介紹...了解UI設(shè)計(jì)
 

　　我一直致力于創(chuàng)建最全面的在線視頻課程，以學(xué)習(xí)界面設(shè)計(jì)的實(shí)際技能。
 

　　學(xué)習(xí)UI設(shè)計(jì)涵蓋各種主題：
 

　　顏色。選擇好顏色，在界面中針對(duì)不同目的進(jìn)行調(diào)整，開(kāi)發(fā)調(diào)色板，修復(fù)沖突的顏色等等。
 

　　版式。選擇字體，樣式文本，配對(duì)字體等。
 

　　設(shè)計(jì)基礎(chǔ)。間距，對(duì)齊方式，網(wǎng)格，布局，照明，陰影等。
 

　　用戶界面元素。表單控件(如按鈕和文本框)，圖標(biāo)，圖像(如攝影和插圖)，表格和列表(對(duì)于移動(dòng)應(yīng)用程序設(shè)計(jì)非常重要)等等。
 

　　這是關(guān)于有多少內(nèi)容的想法。您已經(jīng)聽(tīng)說(shuō)過(guò)的主題-照明，灰色的使用和間距-每個(gè)主題都有自己的視頻，總計(jì)1小時(shí)52分鐘。
 

　　在幾乎每個(gè)視頻中，您都會(huì)在Sketch中觀看我的設(shè)計(jì)。這個(gè)很重要。我這里不是在教一些理論框架。相反，我向您展示的所有內(nèi)容都是我每天用來(lái)設(shè)計(jì)界面的提示，技巧和框架。當(dāng)我教給您我所知道的一切時(shí)，可以將其視為看著我的肩膀。
 

　　例如，在“灰色”視頻(是的：使用一種單一顏色僅需27分鐘)中，我首先向您展示一種實(shí)用的技術(shù)，以使灰色與主題顏色相匹配，無(wú)論這些顏色是什么。然后，我進(jìn)行另一個(gè)演示以展示Gray的多功能性，并解釋灰色的微妙之處實(shí)際上是一種優(yōu)勢(shì)。這包括一些使我花了幾年時(shí)間才能注意到的技巧。
 

　　最后，我解釋了為什么灰色是最經(jīng)典的顏色，并被許多奢侈品和時(shí)尚品牌使用。然后，我解釋本課的作業(yè)并總結(jié)。到最后，我們完成了3個(gè)實(shí)時(shí)演示，介紹了如何在設(shè)計(jì)中添加灰色的一些關(guān)鍵技巧，并查看了10個(gè)設(shè)計(jì)良好的真實(shí)示例(包括我設(shè)計(jì)的1個(gè)示例)。
 

　　這是人們對(duì)學(xué)習(xí)UI設(shè)計(jì)的評(píng)價(jià)：
 

　　學(xué)習(xí)UI設(shè)計(jì)就像通過(guò)實(shí)際坐在飛行員的座艙中來(lái)學(xué)習(xí)如何駕駛飛機(jī)一樣。Erik不斷地設(shè)計(jì)/重新設(shè)計(jì)您面前的真實(shí)示例，解釋X的優(yōu)缺點(diǎn)以及如何去做。關(guān)于使它變得更好。
 

　　學(xué)習(xí)UI設(shè)計(jì)的簡(jiǎn)單方法，并通過(guò)實(shí)際示例和教程進(jìn)行說(shuō)明，非常有幫助且令人大開(kāi)眼界。對(duì)于那些希望將UI設(shè)計(jì)添加到他們的工具箱中的UX設(shè)計(jì)人員，我強(qiáng)烈推薦本課程。
 

　　Erik 務(wù)實(shí)的設(shè)計(jì)方法對(duì)我的教益遠(yuǎn)比閱讀任何設(shè)計(jì)書(shū)籍所學(xué)的要多!—請(qǐng)帶走書(shū)籍，再帶一個(gè)視頻。
 

　　如果您是開(kāi)發(fā)人員，UX設(shè)計(jì)人員或PM，并且想在您的技能組中添加視覺(jué)設(shè)計(jì)，那么本課程將為您量身定制。