前言
提到“品質(zhì)感”我們會聯(lián)想到首飾、手表、電子產(chǎn)品、家具等生活中的實體物品。其實UI界面的設(shè)計也是可以使用“品質(zhì)感”這個詞。因為他們都有一個共同點,就是細節(jié)。細節(jié)決定成敗,注重細節(jié)的運用可以在同質(zhì)化嚴重的產(chǎn)品中,找到自己的特點。
一、卡片
卡片式設(shè)計在現(xiàn)階段的APP產(chǎn)品中已經(jīng)非常普遍。它最早可以追溯到Palm的webOS操作系統(tǒng)以及微軟的Metro UI界面設(shè)計語言。之后經(jīng)過Facebook、Pinterest等產(chǎn)品的帶動,以及谷歌推出的Material Design設(shè)計規(guī)范,卡片式設(shè)計便被更加廣泛的認知和使用。目前,無論是安卓、iOS,亦或是web網(wǎng)頁,都能夠看到卡片的形式。
卡片式設(shè)計的優(yōu)點包括:不同屏幕之間可以做到很好的適配及切換、可以有更多的交互操作方式(左右滑動、點擊長按、展開收起等)、將不同種類或元素內(nèi)容很好的區(qū)分歸納、利用空間使排版更加有序統(tǒng)一并提升美感。
同時它的缺點也很突出:無法一次性展示大段內(nèi)容、過多元素會給設(shè)備性能造成影響等等。因此,我們在選擇卡片設(shè)計樣式時要結(jié)合具體產(chǎn)品具體內(nèi)容來定奪。
投影所產(chǎn)生的立體感,使得卡片在扁平化設(shè)計中十分突出。同時,圓角、配色以及投影風(fēng)格的各種組合,也使得卡片的設(shè)計形式更加豐富多樣,以配合各種不同種類產(chǎn)品的設(shè)計風(fēng)格。
二、質(zhì)感
當(dāng)我們在設(shè)計界面時,簡單的填充顏色并不是唯一選擇,引入“材質(zhì)”的概念會是個不錯的主意。在Y軸方向進行操作,疊加質(zhì)感。比如可以參考iOS的毛玻璃,微軟的亞克力等材質(zhì)等。虛化及模糊帶來的朦朧感,將內(nèi)容進行區(qū)分的同時,也增加了一種特殊美感。
質(zhì)感一詞包含了許多含義:光影、色澤、肌膚、質(zhì)地等。但并不是只有實物才包含這些。微軟的Fluent Design通過融入物理世界的元素,體驗挖掘設(shè)計的本源。?其中就包括光線、陰影、動作、深度和紋理等,以一種直觀和本能的方式整理信息。
這就給我們的設(shè)計帶來了不小的啟發(fā)。我們并不單單只是簡單的原型美化工,通過我們的美感以及對現(xiàn)實世界元素的挖掘,融入根本基礎(chǔ)的元素,便可以增強我們的設(shè)計形式。(①光線-漸變、②陰影+深度-卡片、③紋理-毛玻璃等)
三、留白
目前,留白的設(shè)計形式越來越普遍。而留白之所以會發(fā)展起來,個人認為主要的原因還是人們的生活節(jié)奏過快,對閱讀慢慢失去耐心。頁面當(dāng)中的大段文字人們大概率不會讀完,包括設(shè)計元素也是如此,人們并不一定有耐心去留意欣賞。這也是為什么越來越多的人開始追求簡潔。因為簡潔就是效率。而留白的使用正好幫助人們?nèi)サ袅烁蓴_,讓用戶在第一時間認清主體內(nèi)容。
因此,我們要善于將文案或者設(shè)計元素進行歸納總結(jié)。一些比較雞肋的設(shè)計元素能去掉便去掉;設(shè)計可以做到錦上添花,但切不可天花亂墜。很多一兩句就可以概括出的文案就不要變成長篇大論了。所謂全面的信息全部丟給用戶表面上比較保險,但人們并沒有耐心和意愿去閱讀,反倒會成為一種體驗的缺失。
留白并不僅僅是簡單的“空”或者是“白色”這么簡單。它可以理解為是一種距離、分隔或者是負空間。是設(shè)計師的一種排版工具以及重要的設(shè)計元素。我們換一種方式就可以看清楚留白的作用。
設(shè)計時,并不是只有圖片、文字和一些圖形。負空間時時刻刻都在左右著我們的設(shè)計。所以,善用他們,會成為我們的設(shè)計利器。
四、優(yōu)質(zhì)圖片
優(yōu)質(zhì)的圖片可以將頁面整體視覺的品質(zhì)感提升一個等級。一張好的圖片可以有很多標準,比如清晰度、構(gòu)圖、配色等等。其實,好的圖片非常直觀,我們可以非常容易的分辨出來。拿鄉(xiāng)村愛情的海報舉例:風(fēng)格不同,但哪張圖片更有“逼格”,還是非常容易分辨的。
現(xiàn)如今人們的品味以及審美越來越高,也就意味著對直觀的圖片要求也在提高。清晰有“逼格”的好圖,是頁面抓住人眼球的關(guān)鍵要素之一。
五、背景
在追求留白與極簡風(fēng)格的現(xiàn)在,往界面中加入背景的做法并不常見。設(shè)備端界面的空間十分有限,通常的做法都會去掉無用或多余元素。保持留白,突出核心內(nèi)容。避免頁面雜亂影響觀感體驗。但這并不是絕對的方式,背景也并不僅僅只是為了華麗炫目。通過結(jié)合留白與質(zhì)感的使用、我們可以加入適當(dāng)?shù)谋尘霸兀瑥亩_到意想不到的效果。在襯托主體內(nèi)容的同時,也可以使頁面更加飽滿不單調(diào)。
總結(jié)
提升頁面“品質(zhì)”的方法還有很多。插畫、動效、三維、字體設(shè)計等等。相較于技法與工具,提升我們自身的審美更加關(guān)鍵。通過研究基礎(chǔ)理論,以及對大量設(shè)計結(jié)構(gòu)搭配細節(jié)的思考,我們也可以找到符合自己的特點去完善我們的作品。