旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > 精美UI設(shè)計的7條規(guī)則

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

時間:2019-12-11來源:5wd995.cn點擊量:作者:Sissi
時間:2019-12-11點擊量:作者:Sissi





  輕松創(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è)知識不僅限于素描方框和箭頭
 

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

  我有借口 我不懂美學(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)能量,流動與和諧的信息。那種東西。
 

UI設(shè)計
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  通常嵌入的元素:
 

  文字輸入欄
 

  按下按鈕
 

  滑軌
 

  單選按鈕(未選中)
 

  選框
 

  通常開始的元素:
 

  按鈕(未按下)
 

  滑塊按鈕
 

  下拉控件
 

  牌
 

  所選單選按鈕的按鈕部分
 

  彈出窗口
 

  現(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)實線索來傳達(dá)信息。關(guān)鍵字,微妙。
 

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

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

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

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

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

  這些天,UX設(shè)計師真的很喜歡設(shè)計“移動優(yōu)先”。這意味著您需要先在手機(jī)上如何瀏覽頁面和互動,然后再在數(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沒那么有用。具有強(qiáng)烈特定態(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十六進(jìn)制代碼。忽略那些是最有用的。RGB不是用于著色設(shè)計的好框架。HSB(HSV的同義詞,與HSL相似)更加有用。
 

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

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

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

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

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

  在不使設(shè)計混亂的情況下,使用一種或兩種基本色的多種顏色是強(qiáng)調(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上進(jìn)行檢查。
 

  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進(jìn)行格式化,默認(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è)計涵蓋各種主題:
 

  顏色。選擇好顏色,在界面中針對不同目的進(jìn)行調(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ù),以使灰色與主題顏色相匹配,無論這些顏色是什么。然后,我進(jìn)行另一個演示以展示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í)如何駕駛飛機(jī)一樣。Erik不斷地設(shè)計/重新設(shè)計您面前的真實示例,解釋X的優(yōu)缺點以及如何去做。關(guān)于使它變得更好。
 

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

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

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




 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ 5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖