如何讓我們的設(shè)計更有“品質(zhì)感”!


前言

提到“品質(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é)的思考,我們也可以找到符合自己的特點去完善我們的作品。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,250評論 6 530
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 97,923評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,041評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,475評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,253評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,801評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,882評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,023評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,530評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,494評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,639評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,177評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,890評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,289評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,552評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,242評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,626評論 2 370