整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
外的很多網(wǎng)站都非常簡(jiǎn)約大氣，原來他們是遵循了這樣的設(shè)計(jì)原則啊。這樣的原則，不僅僅適用于web設(shè)計(jì)，也同樣適用于App設(shè)計(jì)。
介紹：
“Less is more”-無論在時(shí)尚，室內(nèi)設(shè)計(jì)還是網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，這句話都統(tǒng)治著設(shè)計(jì)界。這句話反映了古老的極簡(jiǎn)主義理論，也漸漸成為了簡(jiǎn)單，優(yōu)雅的功能性營(yíng)銷設(shè)計(jì)的最新工具。
可以說，極簡(jiǎn)主義正在盛行。
極簡(jiǎn)主義的應(yīng)用可以有兩種不同的方式。一個(gè)是美學(xué)，一個(gè)是功能。在這里，我將討論功能性極簡(jiǎn)主義在Web設(shè)計(jì)中的應(yīng)用，在此之前，我們看一下它的基本概念和歷史。
極簡(jiǎn)主義的關(guān)鍵原則是讓用戶看到必要的功能。這樣，用戶的注意力不僅集中在藝術(shù)的重要部分上，而且還提高了作品的優(yōu)雅度。
傳奇極簡(jiǎn)主義畫家唐納德·賈德（Donald Judd）說：“形狀、體積、顏色、表面就是物品本身。它不應(yīng)該被隱藏成為完全不同的整體的一部分，形狀和材料不應(yīng)因環(huán)境而改變。”
涉及到極簡(jiǎn)設(shè)計(jì)時(shí)，它可以采用兩種方式：設(shè)計(jì)師可以出于美學(xué)或功能的考慮創(chuàng)造簡(jiǎn)約設(shè)計(jì)。
以圖1中的這種設(shè)計(jì)為例：
圖1：缺乏功能的美學(xué)極簡(jiǎn)主義示例
以上設(shè)計(jì)來自眼鏡設(shè)計(jì)師Alfred Sung。盡管該設(shè)計(jì)很極致，看上去很美，但是除非用戶瀏覽菜單欄，否則該設(shè)計(jì)不會(huì)告知用戶網(wǎng)站的目的。這種簡(jiǎn)約的網(wǎng)頁(yè)設(shè)計(jì)僅是為了美觀，而不是功能。
但是，如果我們看下面的圖2，我們將看到功能性極簡(jiǎn)主義在Web設(shè)計(jì)中的完美應(yīng)用，用令人愉悅的視覺呈現(xiàn)重要信息。
圖2：功能極簡(jiǎn)主義的示例，既美觀又實(shí)用
這是Libraton的網(wǎng)頁(yè)設(shè)計(jì)。干凈流暢的用戶界面，易于導(dǎo)航。這是網(wǎng)站設(shè)計(jì)中的功能性極簡(jiǎn)主義的主要示例。設(shè)計(jì)中沒有多余的文字，不必要的動(dòng)畫和額外的效果。借助適當(dāng)?shù)膱D像和內(nèi)容，讓用戶知道該網(wǎng)站的內(nèi)容。
所謂的網(wǎng)頁(yè)設(shè)計(jì)的功能性極簡(jiǎn)主義，即令人愉悅的視覺向用戶呈現(xiàn)必要的內(nèi)容。在簡(jiǎn)約的設(shè)計(jì)中，沒有多余的文字，不必要的動(dòng)畫和額外的效果。內(nèi)容和設(shè)計(jì)按原樣顯示，沒有任何額外的裝飾，以使用戶輕松找到他們想要的內(nèi)容。
極簡(jiǎn)主義意味著高效的生活，這意味著您可以將更多精力放在核心目的上，這意味著擺脫生活中所有多余的功能，裝飾品和其他任何裝飾。日本文化將生活中的簡(jiǎn)約與平衡和諧放在首位，您可以在他們的藝術(shù)和建筑中看到這一點(diǎn)。
在談?wù)摌O簡(jiǎn)主義的歷史時(shí)，您需要對(duì)日本文化作簡(jiǎn)要了解。日本文化最好的反映了極簡(jiǎn)主義的概念。極簡(jiǎn)主義的概念在整個(gè)歷史中都存在過，但是在二戰(zhàn)之后，它通過藝術(shù)家Frank Stella和Robert Rayman的作品而得到了廣泛傳播。由于該概念的普及，極簡(jiǎn)主義也逐漸滲透到其他領(lǐng)域，例如建筑。
很快，極簡(jiǎn)主義也進(jìn)入了網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域。在互聯(lián)網(wǎng)的起源上，存在另一種風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格，我們稱之為野蠻風(fēng)格。布局雜亂，幾何圖案笨拙且重復(fù)，字體也多種樣式。總而言之，野蠻派網(wǎng)頁(yè)設(shè)計(jì)對(duì)掩蓋丑陋設(shè)計(jì)毫無欲望。
但是隨著設(shè)計(jì)的開始改進(jìn)，極簡(jiǎn)主義走在了最前列，網(wǎng)站開始變得更加美觀。不過，野獸派的設(shè)計(jì)也再次卷土重來，聲稱反對(duì)同質(zhì)化的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)格。
網(wǎng)頁(yè)設(shè)計(jì)中的極簡(jiǎn)主義是設(shè)計(jì)師最流行的實(shí)踐。隨著極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)變得流行，當(dāng)設(shè)計(jì)功能性網(wǎng)站時(shí)，極簡(jiǎn)主義已成為第一法則。這是為什么了解極簡(jiǎn)主義網(wǎng)頁(yè)設(shè)計(jì)的最佳方法，是了解其主要功能。
簡(jiǎn)約的Web設(shè)計(jì)中，內(nèi)容是重點(diǎn)，通過刪除多余的元素（所謂的多余是指不影響用戶進(jìn)行操作的部分）簡(jiǎn)化界面。這種方法，內(nèi)容的優(yōu)化是最重要的過程。
資料來源：https ://newday.agency/
通過確定內(nèi)容的優(yōu)先級(jí)，設(shè)計(jì)人員刪除網(wǎng)頁(yè)上可能讓用戶分散注意力的所有元素。最后，每個(gè)元素都將具有一定的功能。剝離多余的內(nèi)容時(shí)可能會(huì)遇到一個(gè)問題，那就是會(huì)刪除重要的內(nèi)容。因此，請(qǐng)確保您沒有從頁(yè)面中刪除重要內(nèi)容。
（1）負(fù)空間的廣泛使用
基于日本的ma原理，負(fù)空間或留白在簡(jiǎn)約設(shè)計(jì)中起著重要作用。負(fù)空間或留白是極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)非常普遍的功能，內(nèi)容（圖像或文本）之間的空白更加強(qiáng)調(diào)頁(yè)面的內(nèi)容。
資料來源：https ://perficientdigitallabs.com/
雖然負(fù)空間也稱為空白，它并不一定總是白色。作為設(shè)計(jì)師，您還可以使用空的全色背景在設(shè)計(jì)中引入負(fù)空間。
（2）視覺特征
極簡(jiǎn)網(wǎng)頁(yè)設(shè)計(jì)具有很多獨(dú)特的視覺特征。這些特征在網(wǎng)站的整體外觀中起著重要作用。
（3）平面設(shè)計(jì)和紋理
極簡(jiǎn)設(shè)計(jì)省去過度使用的3D效果，陰影和漸變，而廣泛使用平面紋理。去除網(wǎng)站顯得浮華的設(shè)計(jì)元素。在平面設(shè)計(jì)中，從字體到圖標(biāo)，所有內(nèi)容都保持在最低限度，這不僅美觀而且功能強(qiáng)大。QAccounting是很好的示例。
資料來源：https ://qaccounting.beta.herdl.com/
（4）照片和插圖
一張圖片相當(dāng)于一千文字，圖像和插圖是極簡(jiǎn)網(wǎng)站的最重要設(shè)計(jì)元素。通過圖片您可以傳達(dá)更多的情感和思想。不過圖片也要遵守極簡(jiǎn)主義原則。如果它是一個(gè)復(fù)雜的圖像/插圖，包含太多的細(xì)節(jié)，那么它將抵消設(shè)計(jì)的整個(gè)效果。例如：Manho的設(shè)計(jì)。
資料來源：https ://mahno.com.ua/en
（5）有限的配色
顏色可以使視覺集中在內(nèi)容上，但是它也可以分散用戶的注意力。因此，以簡(jiǎn)約設(shè)計(jì)為目標(biāo)的設(shè)計(jì)師通常選擇有限的配色方案。無論單色方案，還是僅兩種顏色的方案，這種有限配色方案是簡(jiǎn)約設(shè)計(jì)的關(guān)鍵視覺特征之一。
來源：https：//showcase.withgoogle.com/experiment/pizza-authenticator/
在極簡(jiǎn)主義的背景下，大膽的排版必定能呈現(xiàn)最好的內(nèi)容，設(shè)計(jì)師使用此功能來強(qiáng)調(diào)其內(nèi)容。
資料來源：https ://culture.basicagency.com/
高對(duì)比度元素是極簡(jiǎn)設(shè)計(jì)的不錯(cuò)選擇。作為一名設(shè)計(jì)師，您無需付出太多努力，即可充分利用簡(jiǎn)單的設(shè)計(jì)元素，這也是將用戶聚焦到頁(yè)面主要元素的最有效方法。在最近網(wǎng)站大修中，Unified Infotech修改了色彩和對(duì)比度方案，使其更具吸引力。
資料來源：https ://www.unifiedinfotech.net/
有時(shí)實(shí)踐“l(fā)ess is more ”的理念可能會(huì)具有挑戰(zhàn)性。如果您正在努力為網(wǎng)站創(chuàng)建簡(jiǎn)約設(shè)計(jì)，不必?fù)?dān)心。下面，我將列出一些最佳實(shí)踐，通過遵循極簡(jiǎn)主義的最佳實(shí)踐，您將可以輕松創(chuàng)建極簡(jiǎn)的網(wǎng)站設(shè)計(jì)。
簡(jiǎn)約設(shè)計(jì)的概念是使用戶專注于網(wǎng)頁(yè)的主要元素，簡(jiǎn)約是關(guān)鍵。因此，只有一個(gè)焦點(diǎn)是極簡(jiǎn)主義的最佳實(shí)踐。
資料來源：https ://www.portofmokha.com/
我已經(jīng)討論過內(nèi)容進(jìn)行排序，并確定需要什么和不需要什么，現(xiàn)在是時(shí)候確定什么先行，什么后行了。
資料來源：https ://www.gsmlondon.ac.uk/global-oil-map/
內(nèi)容的層次結(jié)構(gòu)意味著內(nèi)容的放置。頁(yè)面頂部的內(nèi)容最重要，而頁(yè)面底部的內(nèi)容最不重要。用戶的眼睛總是盯著頁(yè)面的頂部，所以將頁(yè)面的主要內(nèi)容放在頂部附近很重要。
我將再次討論頁(yè)面的內(nèi)容，在為極簡(jiǎn)網(wǎng)站編寫內(nèi)容時(shí)，您需要去除多余的單詞。
資料來源：https ://hopdeco.ca/en
頁(yè)面的文本內(nèi)容必須是用最少單詞傳達(dá)所有的信息。
簡(jiǎn)約設(shè)計(jì)的重要目標(biāo)之一是幫助用戶盡可能簡(jiǎn)單高效地完成任務(wù)。為此，您需要集成一個(gè)簡(jiǎn)單便捷的導(dǎo)航系統(tǒng)，在極簡(jiǎn)的界面中可能會(huì)比較棘手。
資料來源：https ://ark-shelter.com/
您可能會(huì)覺得需要隱藏導(dǎo)航以創(chuàng)建簡(jiǎn)約界面。但是，這可能降低用戶對(duì)網(wǎng)站的滿意度。因此，在簡(jiǎn)化設(shè)計(jì)的同時(shí)需要保證必要的功能。
盡管動(dòng)畫被視為設(shè)計(jì)界的一種裝飾，有時(shí)候也必不可少。在簡(jiǎn)約界面中加入有針對(duì)性的動(dòng)畫，不僅會(huì)使網(wǎng)站看起來更漂亮，也會(huì)使界面更高效。必要請(qǐng)看下，可以使用動(dòng)畫節(jié)省屏幕空間，同時(shí)使網(wǎng)站瀏覽更有趣。
通過GIPHY
但是，如果您的網(wǎng)站是內(nèi)容豐富的網(wǎng)站（例如新聞網(wǎng)站或博客網(wǎng)站）怎么辦？
在那種情況下，完全的簡(jiǎn)約設(shè)計(jì)可能會(huì)有些困難，使用簡(jiǎn)約的界面將使用戶操作更多，這對(duì)于高效的網(wǎng)站可能并不理想。
那么解決方案是什么？
資料來源：https ://mywony.com/?ref=lapaninja
網(wǎng)站Mywony，婚紗設(shè)計(jì)，在線購(gòu)物網(wǎng)站，采用使用簡(jiǎn)約的布局作為著陸頁(yè)。一個(gè)電子商務(wù)網(wǎng)站，無論是亞馬遜還是其他獨(dú)家網(wǎng)站，都傾向于展示他們銷售的所有產(chǎn)品。但是Mywony采取了極簡(jiǎn)主義的方式，為游客提供了功能完善的設(shè)計(jì)，看上去也很討人喜歡。
你要做什么？那結(jié)論是什么？
許多人仍然認(rèn)為極簡(jiǎn)主義只是設(shè)計(jì)的視覺方面。雖然這部分是正確的，但極簡(jiǎn)主義也必須有其自身的功能。解鎖功能性極簡(jiǎn)主義的所有秘密之后，您可以將其應(yīng)用到網(wǎng)站設(shè)計(jì)中，這類型的網(wǎng)站不僅是您和用戶之間的交流工具，也是用戶希望訪問的美觀的網(wǎng)站。
原文網(wǎng)址：https://medium.com/usabilitygeek/is-less-really-more-the-truth-of-functional-minimalism-in-web-design-ff35256bda5f
作者：Jessica Bennett
編譯作者：熊不知；公眾號(hào)：產(chǎn)品經(jīng)理熊不知（ID：xiongbuzhia），人人都是產(chǎn)品經(jīng)理專欄作家。5年產(chǎn)品經(jīng)理經(jīng)驗(yàn)，專注海外社交APP和編輯工具類APP的產(chǎn)品設(shè)計(jì)。
本文由@熊不知 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
大天朝的文化博大精深，
文字在世界上也是獨(dú)樹一幟，
要想把漢字的效果發(fā)揮到極致，
還是得往這看！
直接來點(diǎn)實(shí)在的。
▼
一、字體意象的選擇
誠(chéng)然，用戶在閱讀的過程中，思維主要專注于文字內(nèi)容上。但毫無疑問的，除去內(nèi)容，載體文字的形、色、間距、強(qiáng)弱，甚至文字周邊的圖片插畫等，純視覺上的元素，也會(huì)以意象的方式存入用戶腦海，形成一定程度的“潛意識(shí)”。
1、選用哪種字體：
在確定字體的選用前，先得明確其主題。或者說，要理解畫面上的文字，想傳達(dá)怎樣的觀感、情緒等。舉例說明：
手寫體：
手寫體更能體現(xiàn)“人文”、“自然”的主題，往往能給人以親筆寫下的誠(chéng)意與溫度。商用廣告里面，像是：家庭題材、手工制作產(chǎn)品、隨筆書籍、部分服務(wù)業(yè)都適合使用手寫體。就像這樣▼
毛筆字體：
“楷書”、“隸書”、“篆書”、“行書”、“草書”等偏向于古樸，有沉淀感的字體適用于偏傳統(tǒng)風(fēng)、民俗題材、歷史題材、文化古跡等文字內(nèi)容。如▼圖。
不過這類字，單看裝飾性也很強(qiáng)。如▼
標(biāo)準(zhǔn)字體：
標(biāo)準(zhǔn)字體如果加以適當(dāng)寬松的間距，極簡(jiǎn)化的干凈背景，便能極大地提升畫面的嚴(yán)謹(jǐn)精致與設(shè)計(jì)感。如：
蘋果官網(wǎng)
性冷淡官網(wǎng)
2、選擇合適的顏色/明度/色相/飽和度：
暖色：這類顏色偏于熱情，有一種excited的感覺。
紅/橘/黃
冷色：偏于安靜、冷靜、沉穩(wěn)，所以商務(wù)題材非常愛用。
藍(lán)色系列
改變顏色的明度/飽和度，可以更加貼近所述氛圍。如：
春天題材：粉綠/粉藍(lán)/粉紅
夏天題材：純白/天藍(lán)/鮮橙
總結(jié)起來，在選擇上，要多代入場(chǎng)景、氛圍來思考，確定主題。成果展現(xiàn)的意象，也千萬要切題。
二、視覺導(dǎo)向的斟酌
大家如果看日漫，一定有這樣的經(jīng)歷：第一次看日本漫畫時(shí)，頻頻蒙逼…
與中文由左至右的閱讀習(xí)慣不同，日式排版讓人超不習(xí)慣。這算是文化差異帶來的不易閱讀的例子。歸納來說：
1、內(nèi)容和字體的關(guān)系
Ⅰ.字號(hào)
這里主要講偏書籍、雜志、手冊(cè)類的排版規(guī)則。
標(biāo)題：大標(biāo)題>小標(biāo)題>副標(biāo)題>引言>正文
正文：一般至少為9pt，如果面向的是兒童、老人這類人群，則需酌情放大字體
補(bǔ)充說明：如批注，圖片說明、原作者等，一般在6.5pt左右。
Ⅱ.邊界＆對(duì)比
邊界即畫面上下左右的邊距留白，這里用HTML排版里，比較典型的盒子模型為例：
邊界的比例，尤其是在書籍印刷上，給人心理的愉悅度影響程度很大。比如窄邊距，往往有一種壓迫感，兩眼一黑。對(duì)比分幾種：
字號(hào)大小對(duì)比
重量粗細(xì)對(duì)比
字體形狀對(duì)比
文字色彩對(duì)比
對(duì)比主要是將文字動(dòng)靜分化開，比較有主次、沖擊力。
2、易于閱讀的排版
Ⅰ.行長(zhǎng)/行距/分欄
當(dāng)文章較長(zhǎng)時(shí)，行長(zhǎng)、行距、分欄的設(shè)定往往會(huì)決定讀者的閱讀節(jié)奏。如果閱讀節(jié)奏和主題內(nèi)容較為吻合，往往能得到較好的閱讀體驗(yàn)，甚至能增強(qiáng)代入感。
行長(zhǎng)：即每行長(zhǎng)度，太長(zhǎng)會(huì)給人疲累感，太短會(huì)給人頻繁換行的閱讀上的不快。
行距：每行間的留白，通常8pt的正文字號(hào)，適合行距在1.3mm~2.72mm之間。
分欄：欄數(shù)越多往往意味著行長(zhǎng)縮減，故應(yīng)結(jié)合行長(zhǎng)調(diào)整
Ⅱ.文字間距
文字間距是個(gè)神奇的東西，往往它決定著文字在閱讀時(shí)的“韻律感”。西方字體，如W和I，其字體寬度本來就不同。但是東方字體,，每個(gè)字占據(jù)空間相同，幾乎都是一個(gè)個(gè)正方形方塊。
字距狹窄：突出密度感、緊湊感。
字句寬松：給人舒適怡然感、結(jié)合細(xì)體文字往往有一種設(shè)計(jì)感。
關(guān)于視覺的引導(dǎo)性。舉幾個(gè)極端的例子大家就懂了，比如：
或者：
三、排版上的美觀
1、節(jié)奏＆方向性
舉個(gè)例子：
有沒有覺得上圖②號(hào)火柴人的跑動(dòng)方向“奔跑”二字的閱讀方向不同，導(dǎo)致畫面節(jié)奏略顯奇怪。
2、文字重點(diǎn)＆對(duì)比
這個(gè)在上面提到過了，需要注意的是：要先思考突出內(nèi)容，再考慮整體美觀性。
3、陰影＆線框
如果你想用的純色字體和背景色太過相似，背景色很有可能會(huì)“糊掉”你的文字。從遠(yuǎn)處看背景與文字根本分不清主次。這個(gè)時(shí)候可以用線框或是陰影來強(qiáng)調(diào)文字，使之在視覺上與背景分開。如下圖的destino。
4、材質(zhì)
這點(diǎn)和英文字體一樣，使用符合主題的字體材質(zhì)，往往能增強(qiáng)標(biāo)題的戲劇化效果，增強(qiáng)文字的密度與重量感。
文字作為抽象產(chǎn)物，材質(zhì)化也能使之減輕其“抽象感”。
5、文字?jǐn)M態(tài)
這個(gè)和材質(zhì)化很像，也是增強(qiáng)文字張力的手法之一。也能使之更好地與畫面上其他視覺元素進(jìn)行互動(dòng)。
四、基于印刷品材質(zhì)/比例/尺寸的不同，做出相應(yīng)調(diào)整
1、.書籍/雜志/手冊(cè)
這類頁(yè)數(shù)較多、文字圖片內(nèi)容明確且豐富的出版物，一般會(huì)有雛形板式。包括：
標(biāo)題樣式等
如果是書籍裝幀的排版，還涉及到：
正文等
原則上至少要做到內(nèi)容易讀，排版結(jié)合讀者閱讀習(xí)慣，具有引導(dǎo)性，突出重點(diǎn)。另外，紙質(zhì)也是重要的參考因素。
2、海報(bào)
海報(bào)是個(gè)很看重“第一眼印象”的東西。一般來說用戶觀看海報(bào)的時(shí)間平均可能只有1.5秒的時(shí)間，接收到的幾乎是瞬時(shí)信息。所以標(biāo)題一定要最顯眼，其次主題、內(nèi)容、時(shí)間等按照視覺邏輯依次按重點(diǎn)優(yōu)先級(jí)排列。
標(biāo)題文案最好不帶解說色彩，與背景圖片互相呼應(yīng)互補(bǔ)才是最好的。不過相比文字，大部分情況下海報(bào)最重要的元素是圖片，能用圖片敘述的內(nèi)容，就最好不用文字。
當(dāng)然，如果海報(bào)本身的設(shè)計(jì)足夠有沖擊力或是吸引力，往往能達(dá)到讓用戶停留更長(zhǎng)的時(shí)間觀看，達(dá)到+1s的目的。
3、文字Logo
這個(gè)是相當(dāng)多設(shè)計(jì)師的槽點(diǎn)之一啊啊！！你們甲方看起來很簡(jiǎn)單是吧！！簡(jiǎn)單提幾點(diǎn)：
Ⅰ.文字局部擬物：
Ⅱ .局部色彩強(qiáng)化：
最后：
文章來源｜知乎
文章作者｜欒時(shí)予
旁友們，看了這么多，
是不是手很癢？
實(shí)踐出真知，
快去試試吧。
I設(shè)計(jì)是有做得好的規(guī)則存在的，即便你是“半路出家”做UI，也可以從這些前人總結(jié)的規(guī)則中，做好UI設(shè)計(jì)。
今天這篇文章是來自西雅圖的獨(dú)立UI/UX設(shè)計(jì)師Erik D. Kennedy，他在用戶體驗(yàn)和視覺設(shè)計(jì)方面有很豐富的經(jīng)驗(yàn)。
同時(shí)他還運(yùn)營(yíng)了一個(gè)設(shè)計(jì)網(wǎng)站，Learn UI Design，他會(huì)在上面分享自己學(xué)習(xí)的心得，也會(huì)發(fā)布一些視頻教程。有興趣的朋友可以關(guān)注一波。
因?yàn)槭怯⑽募炎鳎【幠芰τ邢蓿哉伊擞⒄Z專業(yè)的小伙伴來幫忙，如果有發(fā)現(xiàn)什么紕漏，emmm，我們改……
在閱讀文章前，你必須要知道，這份設(shè)計(jì)指南并非適合所有的人。
那誰需要看我們這些設(shè)計(jì)指南呢？
那在這份指南中你將會(huì)獲得什么呢？
首先，我是一名沒有UI視覺技能的用戶體驗(yàn)設(shè)計(jì)師。我喜歡設(shè)計(jì)用戶體驗(yàn)，但是在我意識(shí)到需要去學(xué)習(xí)“如何讓界面看起來更好”之前，我花費(fèi)一個(gè)項(xiàng)目周期90%的時(shí)間去瘋狂的學(xué)習(xí)，拼命搜索谷歌，瀏覽Pinterest和Dribbble，以便從中復(fù)制。
而以下這些規(guī)則都是那段時(shí)間我所學(xué)到的經(jīng)驗(yàn)：
那接下來就讓我們一一展開來討論吧。
人類大腦通過陰影解析到我們正在看什么用戶界面元素。
這可能是我們理解UI設(shè)計(jì)最重要但經(jīng)常被忽略的規(guī)則。
我們都知道光來自天空，已經(jīng)習(xí)慣了光的照射方式，以至于從下面來的光會(huì)看起來更加怪異。
WoooOOOooo（國(guó)外設(shè)計(jì)師也愛恐怖片啊）
當(dāng)光線來自天空時(shí)，它照亮了物體的頂部并在它們下面投下陰影。物體的頂部較亮，底部較暗。
UI也是如此；就像面部特征中，所有底面上都有小陰影一樣，在您可以找到的幾乎每個(gè)UI元素的下側(cè)都有陰影。
我們的屏幕是平的，但是我們?cè)谠O(shè)計(jì)過程中盡量讓元素看起來更立體。即使在現(xiàn)在扁平化當(dāng)?shù)赖某绷飨拢覀円材茉诤芏鄡?yōu)秀作品的細(xì)節(jié)中，看到這條規(guī)則存在的意義。
就拿按鈕來說，即使使用這個(gè)相對(duì)“扁平”的按鈕，仍然有一些與光有關(guān)的細(xì)節(jié)：
iOS 6有點(diǎn)過時(shí)了，但它在輕松行為方面做了很好的案例研究
這是iOS系統(tǒng)設(shè)置模塊的——“請(qǐng)勿打擾”和“通知”。 細(xì)節(jié)處的光效非常豐富。
分割線缺口處的特寫鏡頭
在上面提到了“扁平化設(shè)計(jì)”，那具體如何解釋扁平和光效的關(guān)系呢？
在ios7開始的設(shè)計(jì)潮流中，“扁平化設(shè)計(jì)”在科技界引起轟動(dòng)。
的確，它確實(shí)是平的，沒有模擬的凸起或者凹痕，只有純色的線條和形狀。
可是在不久之后，“半扁平化設(shè)計(jì)”的概念就興起，它仍然很干凈、很簡(jiǎn)單，但是你會(huì)發(fā)現(xiàn)，在一些設(shè)計(jì)元素的細(xì)節(jié)上，都有陰影的體現(xiàn)。
OS X Yosemite— 帶有光影細(xì)節(jié)的扁平化設(shè)計(jì)
同時(shí)，谷歌推出的“Material Design”設(shè)計(jì)語言，這種統(tǒng)一的視覺語言，其核心就是尋求模擬物理世界的物品，在它的設(shè)計(jì)規(guī)范中也提到了如何使用不用的陰影來傳達(dá)不同的深度。
這就是我所看到的和我所理解的，對(duì)用戶最為友好對(duì)一種表現(xiàn)方式。它使用現(xiàn)實(shí)世界的微妙細(xì)節(jié)表現(xiàn)來傳達(dá)信息。
我想，“Flatty”就是以后UI設(shè)計(jì)的發(fā)展方向，純扁平化和擬物都已經(jīng)是過去的事情了。
簡(jiǎn)化了視覺設(shè)計(jì)中最為復(fù)雜的元素，迫使設(shè)計(jì)師專注于元素間距和頁(yè)面布局。
就像現(xiàn)在的交互設(shè)計(jì)都是“移動(dòng)優(yōu)先”，這就意味著，先從更難的問題開始解決（小小移動(dòng)設(shè)備屏幕上的交互），然后采用類似解決方案來解決更容易的問題（大屏幕上pc設(shè)備的交互）。
類似在視覺設(shè)計(jì)中的規(guī)則：首先設(shè)計(jì)黑色和白色。也就是我們?cè)跊]有顏色的幫助下，去使用各種方式來達(dá)到產(chǎn)品的美觀性和易用性，最后在添加顏色。
Haraldur Thorleifsson的灰度線框看起來和完成的網(wǎng)站一樣好
這也是讓產(chǎn)品看起來“干凈”和“簡(jiǎn)單”的可靠辦法。過多的顏色往往很容易搞砸設(shè)計(jì)。而“黑與白第一”迫使你首先關(guān)注間距、尺寸和布局等內(nèi)容，這些才是簡(jiǎn)約設(shè)計(jì)的主要關(guān)注點(diǎn)。
優(yōu)雅的灰度
而在某些情況下，“黑與白第一”看起來并不有用。我們?cè)谠O(shè)計(jì)具有強(qiáng)烈特定態(tài)度的作品的時(shí)候，如“運(yùn)動(dòng)型”、“華麗畫面”、“卡通設(shè)計(jì)”等，這些都是需要非常好的去使用顏色來表達(dá)產(chǎn)品。
Julien Renvoye（上）和Cosmin Capitanu（下）的華麗和充滿活力的設(shè)計(jì)
最簡(jiǎn)單的方案就是只使用一種顏色。
在灰度的頁(yè)面上只添加一種顏色可簡(jiǎn)單有效的吸引眼球。
你也可以邁出一步，使用灰度+兩種顏色，或灰度+單色調(diào)的多種顏色來傳達(dá)設(shè)計(jì)思想。
如何過你還不清楚什么是色調(diào)？
來自Smashing Magazine的單色金色主題
來自Smashing Magazine的單色藍(lán)色主題
通過修改單個(gè)色調(diào)的飽和度和亮度，可以生成多種顏色，但它并不會(huì)讓人眼前一亮。
而使用來自一個(gè)或兩個(gè)基色調(diào)的多種顏色，是在保證設(shè)計(jì)不混亂的情況去，去強(qiáng)調(diào)和中和元素最可靠的方法。
Kerem Suer的倒數(shù)計(jì)時(shí)器
如果想讓你的頁(yè)面看起來是被設(shè)計(jì)過的，那就通過大量的頁(yè)面留白來增加元素之間的喘息空間。
在“規(guī)則2-黑與白第一”中，設(shè)計(jì)師在設(shè)計(jì)顏色之前就考慮間距和布局，這是一件好事。那么，現(xiàn)在就開始討論間距和布局吧。
如果你有編寫HTML的經(jīng)驗(yàn)，在熟悉的HTML默認(rèn)布局的頁(yè)面上，一切都被堆砌到屏幕的頂部。字體很小，線條之間沒有空間，段落之間的空間也不夠。
這些從審美的角度來說，實(shí)在太糟糕了。
還是那句話，如果想要讓頁(yè)面看起來具有設(shè)計(jì)感，那就加大頁(yè)面的喘息空間，哪怕是過大的留白也比毫無留白來的好。
如果你和我之前一樣，習(xí)慣于使用默認(rèn)的格式去編輯頁(yè)面，現(xiàn)在就應(yīng)該認(rèn)識(shí)到哪些壞習(xí)慣了。
我們把留白作為頁(yè)面的設(shè)計(jì)元素，所有的內(nèi)容都以空格開頭，知道有其它的元素替換它。
節(jié)奏感是設(shè)計(jì)頁(yè)面的一個(gè)重要原因。
從一個(gè)空白頁(yè)面也就開始意味著從留白開始。從一開始就想到的邊距和間距，用你所添加的元素有意識(shí)的去一個(gè)一個(gè)替換空白。
這是Piotr Kwiatkowski的音樂播放器概念
請(qǐng)?zhí)貏e主意左邊的菜單
菜單項(xiàng)之間的垂直空間是文本高度的兩倍，文本為12px字體，其字高和上下間距相同。
再看看列表標(biāo)題：
標(biāo)題“PLAYLISTS”和它下面的下劃線之間有15px的空白，這不僅僅是字體本身的字高，也就是說清單之間的留白達(dá)到了25px。
頂部導(dǎo)航欄中有更多空間。
“搜索所有音樂”文本是條形高度的20％；圖標(biāo)的比例相似。
右側(cè)邊欄顯示文本行之間的寬松間距，都是設(shè)計(jì)師有意識(shí)的去做的，并且展現(xiàn)出了很好的效果。就美學(xué)而言，這些都足以和最好的音樂UI競(jìng)爭(zhēng)。
慷慨的留白可以使一些最混亂的界面看起來更簡(jiǎn)潔。
Forum design concept by Matt Sisto
Wikipedia design concept by Aurélien Salomon
最后重要的事情重復(fù)一遍：
好了，以上就是第 1 部分，感謝你們看到了這里。
接下來在第二部分中，我們會(huì)討論最后的 4 條規(guī)則：
如果你覺得這些對(duì)你有幫助，可以關(guān)注下我們第2部分的分享。
原文作者：Erik D. Kennedy
原文鏈接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
本文由 @設(shè)計(jì)師日記 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
