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

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

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

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

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

　　A、無聊
 

　　B、錯誤
 

　　C、令人討厭
 

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

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

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

　　我是否想在某個時候為早期啟動工作?最好成為掃地機
 

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

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

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

　　所以對書呆子說：如果我現(xiàn)在擅長設(shè)計UI，那是因為我已經(jīng)分析了內(nèi)容-并不是因為我對美感和平衡感有了直觀的了解就溜了出來。
 

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

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

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

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

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

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

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

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

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

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

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

　　未按下的按鈕在頂部比底部略亮。這是因為它模仿了稍微彎曲的表面。就像您需要傾斜自己前面的鏡子以看到其中的太陽一樣，向上傾斜的表面向您反射更多的陽光。
 

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

　　按鈕的底部雖然比頂部還暗，但總體上還是較暗 –這是因為它在屏幕的平面上，太陽很難照到它。有人可能會說我們在現(xiàn)實生活中看到的所有按下的按鈕也都更暗了，因為我們的手擋住了光線。
 

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

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

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

　　插入控制面板的上唇會投射一個小陰影
 

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

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

　　這些圖標(biāo)已列出?？吹剿鼈冺敳恐車拿髁吝吙騿?這表示垂直于光源的表面，因此會接收很多光，因此會反射很多光到您的眼睛中。
 

　　分隔槽口在遠離太陽的地方有陰影，反之亦然
 

　　一個分切槽口的特寫鏡頭，從我的一個老概念。
 

　　通常嵌入的元素：
 

　　文字輸入欄
 

　　按下按鈕
 

　　滑軌
 

　　單選按鈕(未選中)
 

　　選框
 

　　通常開始的元素：
 

　　按鈕(未按下)
 

　　滑塊按鈕
 

　　下拉控件
 

　　牌
 

　　所選單選按鈕的按鈕部分
 

　　彈出窗口
 

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

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

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

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

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

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

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

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

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

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

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

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

　　那個平面設(shè)計現(xiàn)在看起來很熱!
 

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

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

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

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

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

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

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

　　優(yōu)雅的灰度。
 

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

　　Julien Renvoye(左)和Cosmin Capitanu(右)的華麗動感設(shè)計。比看起來更難。
 

　　除此以外，還有B&WF。
 

　　步驟2：如何添加顏色
 

　　添加的最簡單的顏色是一種顏色。
 

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

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

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

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

　　HSB比RGB更好，因為它符合我們自然思考顏色的方式，并且您可以預(yù)測HSB值的更改將如何影響您要查看的顏色。
 

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

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

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

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

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

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

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

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

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

　　一個小工具箱：
 

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

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

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

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

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

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

　　為了使UI看起來設(shè)計合理，請?zhí)砑哟罅康暮粑臻g。
 

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

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

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

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

　　有時可笑。
 

　　空格，HTML和CSS
 

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

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

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

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

　　這是Piotr Kwiatkowski提出的音樂播放器概念說明。
 

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

　　左選單
 

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

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

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

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

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

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

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

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

　　在行之間放置空格。
 

　　在元素之間放置空間。
 

　　在元素組之間放置空間。
 

　　分析什么是有效的。
 

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

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

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

　　5.彈出文本并取消彈出
 

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

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

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

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

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

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

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

　　版式。選擇字體，樣式文本，配對字體等。
 

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

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

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

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

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

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

　　這是人們對學(xué)習(xí)UI設(shè)計的評價：
 

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

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

　　Erik 務(wù)實的設(shè)計方法對我的教益遠比閱讀任何設(shè)計書籍所學(xué)的要多!—請帶走書籍，再帶一個視頻。
 

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