您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

餓了么高級(jí)設(shè)計(jì)師界面視覺(jué)設(shè)計(jì) 5 要素

一款 App 或 Web 產(chǎn)品,從用戶體驗(yàn)的角度包含了戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、體現(xiàn)層。而作為 UI 設(shè)計(jì)師,假如連「體現(xiàn)層」的內(nèi)容都還一孔之見(jiàn)就去盲目地學(xué)習(xí)其他領(lǐng)域,這是不提倡的。

這里說(shuō)的「體現(xiàn)層」是指視覺(jué)設(shè)計(jì)層面,在界面的視覺(jué)設(shè)計(jì)中同樣也包含了5個(gè)視覺(jué)要素:色彩、筆墨、圖標(biāo)、圖片、空間。一個(gè)出色的界面設(shè)計(jì),必然是將這些要素做到了淋漓盡致。

本文結(jié)合大量良好的案例,并以普通簡(jiǎn)練的語(yǔ)言,體系地介紹了這5個(gè)視覺(jué)要素。篇幅略長(zhǎng),耐心讀完你肯定會(huì)有收獲。

文章大綱如下:

一、色彩

1. 色彩基礎(chǔ)概述

色彩三屬性

  • 色相(H):即色彩的相貌、種類(lèi)和名稱,比如紅、橙、黃、綠等顏色的種類(lèi)就叫色相。
  • 飽和度(S):即色彩的美麗程度,也稱純度。
  • 明度(B):即色彩的通亮程度。

人眼看到的任一彩色光都是這三個(gè)屬性的綜合結(jié)果。

色彩寓意

統(tǒng)一色相的不同明度和不同飽和度,也會(huì)對(duì)人產(chǎn)生不同的生理感受。我在這里歸納整頓了各種色彩在通常情況下代表的不同寓意,僅供參考。

  • 紅色(Red):熱烈、喜慶、熱情、浪漫、傷害
  • 橙色(Orange):溫暖、食物、友愛(ài)、財(cái)富、警告
  • 黃色(Yellow):光輝、通亮、尊貴、權(quán)力
  • 綠色(Green):健康、天然、清新、盼望、安全
  • 青色(Cyan):朝氣、脫俗、樸拙、清麗
  • 藍(lán)色(Blue):鎮(zhèn)靜、貞潔、清涼、科技、沉穩(wěn)
  • 紫色(Purple):神秘、高貴、優(yōu)雅、浪漫、妖艷
  • 黑色(Black):深沉、端莊、嚴(yán)正、險(xiǎn)惡、死亡
  • 白色(White):貞潔、神圣、干凈、文雅、冷淡
  • 灰色(Gray):尋常、隨意、蒼老、冷漠
2. 色彩搭配

色相對(duì)比:兩種及兩種以上色彩組合后,因?yàn)樯嗖顒e而形成的色彩對(duì)比結(jié)果稱為色相對(duì)比。

色相對(duì)比的強(qiáng)弱程度,取決于色相之間在色環(huán)上的距離 (角度),距離 (角度) 越大對(duì)比越強(qiáng),反之對(duì)比越弱。

一樣平常界面的色彩搭配重要包括三種顏色:主色調(diào)、輔助色、點(diǎn)綴色,搭配比例分別為 6:3:1。

同類(lèi)色搭配

色環(huán)上相距 0° 的顏色為同類(lèi)色,一樣平常常用統(tǒng)一種色相的不同明度或不同飽和度的組合體例,例如藍(lán)與淺藍(lán),紅與粉紅等。同類(lèi)色搭配對(duì)比結(jié)果同一、清新、含蓄,但也容易產(chǎn)生單調(diào)、乏味的感受。

鄰近色搭配

色環(huán)上相距 30° 左右的顏色為鄰近色 ,例如紫與藍(lán)紫,藍(lán)紫與藍(lán)等。鄰近色搭配對(duì)比結(jié)果柔和、嫻靜、協(xié)調(diào),但也容易感覺(jué)單調(diào)、模糊,需調(diào)節(jié)明度來(lái)增強(qiáng)結(jié)果。

類(lèi)似色搭配

色環(huán)上相距 60° 左右的顏色為類(lèi)似色,例如橙與黃,黃橙與黃綠等。類(lèi)似色搭配對(duì)比結(jié)果較雄厚、活潑,同時(shí)又不失同一、協(xié)調(diào)的感覺(jué)。

中差色搭配

色環(huán)上相距 90° 左右的顏色為中差色,例如紅與黃橙,藍(lán)綠與黃等。中差色搭配對(duì)比結(jié)果明快、活潑、飽滿、使人愉快,同時(shí)不失調(diào)和之感。

對(duì)比色搭配

色環(huán)上相距 120° 左右的顏色為對(duì)比色,例如紅與黃,紅紫與黃橙等。對(duì)比色搭配對(duì)比結(jié)果強(qiáng)烈、奪目、刺激、有力,但也容易造成視覺(jué)委靡,一樣平常必要采用多種調(diào)和手段來(lái)改善對(duì)比結(jié)果。

互補(bǔ)色搭配

色環(huán)上相距 180° 左右的顏色為互補(bǔ)色,例如紅與綠,黃與紫等。互補(bǔ)色搭配體現(xiàn)出一種力量、氣勢(shì)與活力,具有特別很是強(qiáng)烈的視覺(jué)沖擊力。

多色搭配

多色搭配顧名思義是由多種色彩組合而成的一種搭配體例,一樣平常以不超過(guò) 4 種顏色為宜,規(guī)定一種作為主導(dǎo)色,其余作為輔助色使用。

多色搭配會(huì)讓畫(huà)面顯得更加雄厚、多彩,充滿趣味性,但若控制不好,也容易讓畫(huà)面變花,失去平衡。搭配時(shí)須細(xì)致區(qū)分主次,按比例進(jìn)行調(diào)和。

二、筆墨

1. 字體簡(jiǎn)介

中筆墨體種類(lèi)大致分為:宋體、黑體、仿宋、楷體、其它(變體字)。

西筆墨體種類(lèi)大致分為:無(wú)襯線體、羅馬正體或襯線體、意大利斜體、手寫(xiě)體、黑字體(哥特體)。

這次重要給大家介紹一下比較常用的襯線體和無(wú)襯線體。

襯線體

襯線字體在筆畫(huà)末端具有附加的裝飾線條或者「韻腳」。襯線字體字母的橫線較細(xì)、豎線較粗,如 Times New Roman、Georgia 等字體屬于襯線體。

襯線體具有復(fù)古傳統(tǒng)的曲線美、個(gè)性光顯、張力十足,通常用在時(shí)尚奢侈品牌、復(fù)古海報(bào)等設(shè)計(jì)領(lǐng)域中。

無(wú)襯線體

無(wú)襯線體顧名思義,就是指「沒(méi)有襯線的字體」。襯線指的是字母結(jié)構(gòu)筆畫(huà)之外的裝飾性線條,無(wú)襯線字體字母的豎線和橫線粗細(xì)基原形同,像經(jīng)典的 Helvetica 和 Futula 等字體就屬于無(wú)襯線體。

無(wú)襯線體通常比較簡(jiǎn)約、具有當(dāng)代感,適用于 Web、App 等互聯(lián)網(wǎng)科技領(lǐng)域的設(shè)計(jì)中。

2. 筆墨使用規(guī)則

不同平臺(tái)的界面設(shè)計(jì)中規(guī)范的字領(lǐng)會(huì)有不同,像移動(dòng)端界面的設(shè)計(jì)就會(huì)有固定的字體樣式,頁(yè)面中會(huì)有常用的幾個(gè)字體。

移動(dòng)端常規(guī)字體

在 iOS 設(shè)備上,體系默認(rèn)的英筆墨體為 SanFrancisco,中筆墨體為 PingFang。值得細(xì)致的是,SanFrancisco 字領(lǐng)會(huì)隨著字號(hào)的轉(zhuǎn)變主動(dòng)調(diào)整字母之間的間距,以確保任何情況下都能很清晰地閱讀。

在 Android 設(shè)備上,原生體系英筆墨體使用 DroidSans 或 Roboto,但國(guó)內(nèi)的 Rom 大都是第三方廠商定制而成,對(duì)原生體系字體有所變動(dòng)。大家在設(shè)計(jì)時(shí)可以使用 Noto 作為中筆墨體來(lái)使用。

頁(yè)面端常用字體

在 Windows 體系中,常用字體有微軟雅黑、黑體、宋體等,最小字號(hào)保舉 12px,正筆墨號(hào)保舉 14px,題目字號(hào)保舉 18px、20px、24px、28px、32px 等,盡可能使用偶數(shù)。而行間距一樣平常為字號(hào)的 1.5-1.8 倍。

在 Mac OS 體系中,常用中筆墨體有蘋(píng)方、思源黑體 、華文細(xì)黑等,英筆墨體有 Helvetica、SanFrancisco 等。

值得一提的是:Helvetica 曾被評(píng)為是設(shè)計(jì)師最?lèi)?ài)的字體,簡(jiǎn)潔當(dāng)代的線條,特別很是受到追捧。在 Mac 下被認(rèn)為是最佳的頁(yè)面字體,在 Windows 下因?yàn)?Hinting 的緣故原由表現(xiàn)很糟糕。

三、圖標(biāo)

1. 圖標(biāo)功能

圖標(biāo)是 Web 和 App 設(shè)計(jì)中的點(diǎn)睛之筆,既能輔助筆墨信息的傳達(dá),也能作為信息載體被高效地識(shí)別,并且圖標(biāo)也有肯定的裝飾作用,可以進(jìn)步界面設(shè)計(jì)的美觀度。

2. 圖標(biāo)類(lèi)型

關(guān)于圖標(biāo)的類(lèi)型目前并沒(méi)有很權(quán)威的分類(lèi),我根據(jù)圖標(biāo)的用途將其分為兩大類(lèi):「功能型圖標(biāo)」和「展示型圖標(biāo)」。

功能型圖標(biāo)

一樣平常來(lái)說(shuō),凡是 UI 界面中,用戶可以點(diǎn)擊的圖標(biāo)均可看成是功能型圖標(biāo),該類(lèi)圖標(biāo)每每代表某一功能或某一鏈接的跳轉(zhuǎn)。這類(lèi)圖標(biāo)的典型應(yīng)用場(chǎng)景就是 iOS 體系中的底部標(biāo)簽欄,以及 Material Design 中側(cè)滑菜單選項(xiàng)的左側(cè)。

某些列表或卡片內(nèi)的圖標(biāo)也屬于功能型圖標(biāo),但這類(lèi)圖標(biāo)每每代表一個(gè)功能,而底部標(biāo)簽欄圖標(biāo)每每代表一個(gè)網(wǎng)頁(yè)或板塊。

展示型圖標(biāo)

相比功能型圖標(biāo),展示型圖標(biāo)更加具有「設(shè)計(jì)感」,是獨(dú)特的、有內(nèi)涵的以及具備辨識(shí)度的。一樣平常來(lái)說(shuō),展示型圖標(biāo)重要是應(yīng)用程序的啟動(dòng)圖標(biāo)。該類(lèi)圖標(biāo)代表了一款產(chǎn)品的屬性、氣質(zhì)以及品牌形象等,也是用戶首先看到的內(nèi)容,設(shè)計(jì)時(shí)應(yīng)盡可能讓用戶記住并感到愉悅。

該類(lèi)圖標(biāo)在 iOS 體系中除了出如今 App Store 里,還出如今用戶下載后的桌面上,以及 Spotlight 的搜索效果和設(shè)置等地方。

3. 圖標(biāo)風(fēng)格

圖標(biāo)的設(shè)計(jì)風(fēng)格有許多種,例如:線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)、扁平圖標(biāo)、輕擬物圖標(biāo)、擬物圖標(biāo)、手繪型圖標(biāo)等,我對(duì)其中常見(jiàn)的幾種作下簡(jiǎn)要的介紹。

線性圖標(biāo)

線性圖標(biāo)是由直線、曲線、點(diǎn)等元素組合而成的圖標(biāo)樣式。該類(lèi)圖標(biāo)輕便簡(jiǎn)練,具有肯定的想象空間,且不會(huì)對(duì)界面產(chǎn)生太大的視覺(jué)干擾。

面性圖標(biāo)

面性圖標(biāo)可以簡(jiǎn)單理解為對(duì)線性圖標(biāo)的添補(bǔ),但面性比線性更加慎重和踏實(shí),對(duì)色彩的傳達(dá)也清晰顯明。

線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)典型代表是「MBE風(fēng)格」圖標(biāo),其設(shè)計(jì)特點(diǎn)是采用了粗描邊線和偏移的添補(bǔ)面相結(jié)合,靈動(dòng)而光顯。粗線條起到對(duì)畫(huà)面的絕對(duì)分割,突顯內(nèi)容、體現(xiàn)清晰。

扁平圖標(biāo)

扁平圖標(biāo)去掉了透視、紋理、漸變等能做出 3D 結(jié)果的元素,讓信息自己作為核心被凸顯出來(lái),并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化。

輕擬物圖標(biāo)

輕擬物圖標(biāo)沒(méi)有擬物圖標(biāo)那么寫(xiě)實(shí),也不像扁平圖標(biāo)那么「平」,而是行使淡淡的漸變和一些光影來(lái)達(dá)到兩者之間的平衡,識(shí)別性高又不失美感。

四、圖片

圖片在 Web 和 App 界面設(shè)計(jì)中是特別很是常見(jiàn)的,圖片的質(zhì)量和顯現(xiàn)體例都會(huì)影響著用戶對(duì)產(chǎn)品的感官體驗(yàn)。

1. 圖片比例

不同比例的圖片所傳遞的重要信息各不雷同,我們必要結(jié)合產(chǎn)品的特點(diǎn),并根據(jù)不同的場(chǎng)景來(lái)選擇合適的圖片比例進(jìn)行設(shè)計(jì)。

1比1

1:1 是比較常見(jiàn)的圖片設(shè)計(jì)比例,雷同的長(zhǎng)寬將構(gòu)圖呈現(xiàn)得簡(jiǎn)單,凸起了主體的存在感,常用于產(chǎn)品、頭像、特寫(xiě)等展示場(chǎng)景。

 4比3

4:3 的圖片比例使圖像更緊湊,更容易構(gòu)圖,便于開(kāi)展設(shè)計(jì),也是常用圖片比例之一。

16比9

16:9 的圖片比例可以呈現(xiàn)電影觀影般的結(jié)果,是許多視頻播放軟件常用的尺寸,能帶給用戶一種視野坦蕩的體驗(yàn)。

16比10

16:10 的圖片比例最接近黃金比,而黃金分割具有嚴(yán)酷的比例性、藝術(shù)性、協(xié)調(diào)性,蘊(yùn)藏著雄厚的美學(xué)價(jià)值,被認(rèn)為是藝術(shù)設(shè)計(jì)中最理想的比例。

2. 圖片排版

圖片的排版類(lèi)型有許多種,根據(jù)不同的場(chǎng)景和所需傳遞的主體信息來(lái)選擇與之符合的顯現(xiàn)體例,以下是常見(jiàn)的幾種排版類(lèi)型。

滿版型

滿版型是以圖片作為主體或背景鋪滿整個(gè)畫(huà)面,常搭配筆墨信息或 icon 修飾,視覺(jué)傳達(dá)直觀而強(qiáng)烈,給人大方、舒展的感覺(jué)。

通欄型

通欄型是指圖片與團(tuán)體網(wǎng)頁(yè)的寬度雷同,而高度為其幾分之一甚至更小的一種圖片顯現(xiàn)體例,最常見(jiàn)的就是輪播圖(Banner)。通欄型圖片寬闊大氣,可以有用地強(qiáng)調(diào)和展示緊張的商品、活動(dòng)等運(yùn)營(yíng)內(nèi)容。

并置型

并置型是將不同的圖片作大小雷同而位置不同的重復(fù)排列,可以是左右或上下排列,能給本來(lái)復(fù)雜鬧熱熱烈繁華的版面帶來(lái)秩序、恬靜、調(diào)和與節(jié)奏感。

九宮格型

九宮格型是用四條線把畫(huà)面上下左右分割成九個(gè)小塊,可以把 1 個(gè)或者 2 個(gè)小塊作為一個(gè)單位添補(bǔ)圖像,這種構(gòu)圖給人嚴(yán)謹(jǐn)、規(guī)范、有序的感覺(jué)。

瀑布流型

瀑布流型的圖片會(huì)在網(wǎng)頁(yè)上呈現(xiàn)參差不齊的多欄布局,降低了界面復(fù)雜度,節(jié)省了空間,使用戶專(zhuān)注于欣賞,去掉了繁瑣的操作,體驗(yàn)更好。

五、空間

1. 柵格體系

柵格體系簡(jiǎn)介

柵格體系英文為「Grid systems」,是一種平面設(shè)計(jì)的方法與風(fēng)格,運(yùn)用固定的格子設(shè)計(jì)版面空間布局,其風(fēng)格工整簡(jiǎn)潔,在二戰(zhàn)后大受迎接,已成為今日出版物設(shè)計(jì)的主流風(fēng)格之一。

現(xiàn)在柵格體系也已經(jīng)被運(yùn)用到頁(yè)面設(shè)計(jì)中,它以規(guī)則的網(wǎng)格陣列來(lái)引導(dǎo)和規(guī)范頁(yè)面中的空間布局。柵格體系的使用,可以讓頁(yè)面的信息呈現(xiàn)更加美觀、易讀、嚴(yán)謹(jǐn)和同等,同時(shí)也更具可用性。

「8像素」柵格規(guī)則

「8像素」柵格規(guī)則是一個(gè)以 8px 為單位,行使 8 的倍數(shù)來(lái)規(guī)定網(wǎng)頁(yè)中元素(按鈕、輸入框、圖片等)的尺寸及各自間距的一種通用的柵格規(guī)則。

為什么用 8 而不是 5 或 7 呢?由于 8 是一個(gè)偶數(shù),在 UI 設(shè)計(jì)過(guò)程中,對(duì)于 Android 體系必要導(dǎo)出特別的 @1.5x 的切圖,假如圖片尺寸為奇數(shù),則會(huì)出現(xiàn)半像素和虛邊的題目,而用偶數(shù)則可以避免這種情況。
為什么用 8 而不是 6 或 10 呢?由于目前主流的屏幕尺寸大部分都是 8 的整數(shù)倍,比如 1920 × 1080、1280 × 1024、1280 × 800、1024 × 768 等。即使某些屏幕邊長(zhǎng)像素不是 8 的倍數(shù),在設(shè)計(jì)中仍然可以盡量做到自定義元素的長(zhǎng)、寬、margin 以及 padding 都是 8 的整倍數(shù)來(lái)維持設(shè)計(jì)的同等性。

2. 留白

對(duì)于一些特別的網(wǎng)頁(yè),例如:指導(dǎo)頁(yè)、閃屏頁(yè)、促銷(xiāo)頁(yè)等,可以不用嚴(yán)酷按照柵格體系進(jìn)行設(shè)計(jì),但必要細(xì)致空間留白的運(yùn)用。

留白四屬性

  • 條理感:留白可以使網(wǎng)頁(yè)的條理感得到極大的加強(qiáng),留白越大,模塊、信息間的條理感越清晰。
  • 焦點(diǎn):元素越多,人的視覺(jué)細(xì)致力越容易分散;相反元素越少(即留白越大),細(xì)致力則會(huì)更有用地聚焦在緊張的內(nèi)容上。
  • 韻味:留白具有「此時(shí)無(wú)物勝有物」的感覺(jué),猶如中國(guó)的水墨畫(huà)。留白運(yùn)用于網(wǎng)頁(yè)設(shè)計(jì)中,韻味也會(huì)出現(xiàn)。
  • 呼吸:留白的呼吸屬性可以想象成四周的空氣,當(dāng)空氣中的顆粒物(元素)分外多時(shí),人的呼吸也會(huì)覺(jué)得不通透;相反留白越多時(shí),呼吸感越順暢。

留白體現(xiàn)情勢(shì)

輕度留白:輕度留白是我們常見(jiàn)的網(wǎng)頁(yè)留白設(shè)計(jì)情勢(shì),在傳遞出高雅、高端、文藝等氣質(zhì)的同時(shí),又能將信息體現(xiàn)得清晰直接,讓網(wǎng)頁(yè)更加簡(jiǎn)潔和實(shí)用。輕度留白融合了重度留白的上風(fēng),但不受品牌屬性的影響,幾乎任何產(chǎn)品都可以用這種體現(xiàn)情勢(shì)。

重度留白:重度留白是把主體縮小到極致,其傳遞出的高雅、空靈、高端氣質(zhì)是最強(qiáng)的,但與此同時(shí),其他的屬性也近乎為零?!笩o(wú)印良品」品牌倡導(dǎo)簡(jiǎn)約、淳厚的生活體例,原研哉賦予其設(shè)計(jì)理念就是「空」。所以,重度留白傳遞的不是產(chǎn)品,而是概念、氣質(zhì)和態(tài)度。

小結(jié)

1. 色彩

色相、明度、飽和度是色彩的三個(gè)屬性,不同的色彩具有不同的生理寓意,選色時(shí)需考慮產(chǎn)品的調(diào)性和受眾人群;色環(huán)上距離(角度)越大的顏色對(duì)比結(jié)果越強(qiáng),反之對(duì)比結(jié)果越弱,設(shè)計(jì)時(shí)應(yīng)采用合適的色彩搭配。

2. 字體

黑體、宋體等是常用的中筆墨體,而襯線體和無(wú)襯線體是常用的西筆墨體;不同平臺(tái)的界面設(shè)計(jì)會(huì)有不同的字體使用規(guī)范;另外,設(shè)計(jì)時(shí)需細(xì)致字號(hào)、字重以及行間距的設(shè)置,以達(dá)到最佳的閱讀體驗(yàn)。

3. 圖標(biāo)

圖標(biāo)可以輔助信息筆墨的傳達(dá),也可以對(duì)界面起到修飾作用;功能型和展示型是圖標(biāo)的兩大類(lèi)型;不同風(fēng)格的圖標(biāo)傳遞出不同的視覺(jué)語(yǔ)言,根據(jù)場(chǎng)景的必要進(jìn)行合適的選擇,并保持風(fēng)格的同等性。
4. 圖片

不同比例的圖片所傳遞的重要信息各不雷同,設(shè)計(jì)時(shí)必要結(jié)合產(chǎn)品的特點(diǎn),并根據(jù)不同的要求來(lái)選擇合適的圖片比例;圖片的排版類(lèi)型有許多種,根據(jù)不同的場(chǎng)景和所需傳遞的主體信息來(lái)選擇與之符合的顯現(xiàn)體例。
5. 空間

使用柵格體系,可以讓界面的信息呈現(xiàn)更加美觀、易讀和規(guī)范,設(shè)計(jì)時(shí)可以采用「8像素」柵格規(guī)則來(lái)引導(dǎo)元素尺寸和間距的制訂;條理感、焦點(diǎn)、韻味、呼吸是留白的四個(gè)屬性,留白的體現(xiàn)情勢(shì)需結(jié)合品牌的屬性來(lái)選擇。

在任何領(lǐng)域,假如想要有所成就,都必要超越極限的學(xué)習(xí),都必要孜孜以求的探索,都必要?dú)椝紭O慮的思考,都必要無(wú)數(shù)次失敗和成功的實(shí)踐。沒(méi)有人可以超越學(xué)習(xí)、思考和實(shí)踐成為一個(gè)真正的高手。

迎接關(guān)注作者的微信公眾號(hào):「彭彭設(shè)計(jì)筆記」

[教程作者:互聯(lián)網(wǎng)]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di3994.html
內(nèi)部教程!超細(xì)致的付出寶設(shè)計(jì)規(guī)范之版式篇
內(nèi)部教程!超細(xì)致的付出寶設(shè)計(jì)規(guī)范之線下字體篇
圖趣網(wǎng)微信
建議反饋
×