餓了么高級設計師:界面視覺設計 5 要素

來源:中國設計在線    時間:2018-04-12    站內收藏

一款 App 或 Web 產品,從用戶體驗的角度包含了戰略層、范圍層、結構層、框架層、表現層。而作為 UI 設計師,如果連「表現層」的內容都還一知半解就去盲目地學習其他領域,這是不提倡的。

    這里說的「表現層」是指視覺設計層面,在界面的視覺設計中同樣也包含了5個視覺要素:色彩、文字、圖標、圖片、空間。一個出色的界面設計,必然是將這些要素做到了淋漓盡致。

    本文結合大量優秀的案例,并以通俗簡練的語言,系統地介紹了這5個視覺要素。篇幅略長,耐心讀完你一定會有收獲。

文章大綱如下:

一、色彩

1. 色彩基礎概述

色彩三屬性

  • 色相(H):即色彩的相貌、種類和名稱,比如紅、橙、黃、綠等顏色的種類就叫色相。

  • 飽和度(S):即色彩的鮮艷程度,也稱純度。

  • 明度(B):即色彩的明亮程度。

人眼看到的任一彩色光都是這三個屬性的綜合效果。

色彩寓意

    同一色相的不同明度和不同飽和度,也會對人產生不同的心理感受。我在這里歸納整理了各種色彩在通常情況下代表的不同寓意,僅供參考。

  • 紅色(Red):熱烈、喜慶、熱情、浪漫、危險

  • 橙色(Orange):溫暖、食物、友好、財富、警告

  • 黃色(Yellow):光輝、明亮、尊貴、權力

  • 綠色(Green):健康、自然、清新、希望、安全

  • 青色(Cyan):朝氣、脫俗、真誠、清麗

  • 藍色(Blue):平靜、純潔、清涼、科技、沉穩

  • 紫色(Purple):神秘、高貴、優雅、浪漫、妖艷

  • 黑色(Black):深沉、莊重、嚴肅、邪惡、死亡

  • 白色(White):純潔、神圣、干凈、高雅、冷淡

  • 灰色(Gray):平凡、隨意、蒼老、冷漠

2. 色彩搭配

色相對比:兩種及兩種以上色彩組合后,由于色相差別而形成的色彩對比效果稱為色相對比。

色相對比的強弱程度,取決于色相之間在色環上的距離 (角度),距離 (角度) 越大對比越強,反之對比越弱。

一般界面的色彩搭配主要包括三種顏色:主色調、輔助色、點綴色,搭配比例分別為 6:3:1。

同類色搭配

    色環上相距 0° 的顏色為同類色,一般常用同一種色相的不同明度或不同飽和度的組合方式,例如藍與淺藍,紅與粉紅等。同類色搭配對比效果統一、清新、含蓄,但也容易產生單調、乏味的感受。

鄰近色搭配

色環上相距 30° 左右的顏色為鄰近色 ,例如紫與藍紫,藍紫與藍等。鄰近色搭配對比效果柔和、文靜、和諧,但也容易感覺單調、模糊,需調節明度來加強效果。

類似色搭配

色環上相距 60° 左右的顏色為類似色,例如橙與黃,黃橙與黃綠等。類似色搭配對比效果較豐富、活潑,同時又不失統一、和諧的感覺。

中差色搭配

色環上相距 90° 左右的顏色為中差色,例如紅與黃橙,藍綠與黃等。中差色搭配對比效果明快、活潑、飽滿、使人興奮,同時不失調和之感。

對比色搭配

色環上相距 120° 左右的顏色為對比色,例如紅與黃,紅紫與黃橙等。對比色搭配對比效果強烈、醒目、刺激、有力,但也容易造成視覺疲勞,一般需要采用多種調和手段來改善對比效果。

互補色搭配

色環上相距 180° 左右的顏色為互補色,例如紅與綠,黃與紫等;パa色搭配表現出一種力量、氣勢與活力,具有非常強烈的視覺沖擊力。

多色搭配

多色搭配顧名思義是由多種色彩組合而成的一種搭配方式,一般以不超過 4 種顏色為宜,規定一種作為主導色,其余作為輔助色使用。

多色搭配會讓畫面顯得更加豐富、多彩,充滿趣味性,但若控制不好,也容易讓畫面變花,失去平衡。搭配時須注意區分主次,按比例進行調和。

二、文字

1. 字體簡介

中文字體種類大致分為:宋體、黑體、仿宋、楷體、其它(變體字)。

西文字體種類大致分為:無襯線體、羅馬正體或襯線體、意大利斜體、手寫體、黑字體(哥特體)。

這次主要給大家介紹一下比較常用的襯線體和無襯線體。

襯線體

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

襯線體具有復古傳統的曲線美、個性鮮明、張力十足,通常用在時尚奢侈品牌、復古海報等設計領域中。

無襯線體

無襯線體顧名思義,就是指「沒有襯線的字體」。襯線指的是字母結構筆畫之外的裝飾性線條,無襯線字體字母的豎線和橫線粗細基本相同,像經典的 Helvetica 和 Futula 等字體就屬于無襯線體。

無襯線體通常比較簡約、具有現代感,適用于 Web、App 等互聯網科技領域的設計中。

2. 文字使用規則

不同平臺的界面設計中規范的字體會有不同,像移動端界面的設計就會有固定的字體樣式,網頁中會有常用的幾個字體。

移動端常規字體

在 iOS 設備上,系統默認的英文字體為 SanFrancisco,中文字體為 PingFang。值得注意的是,SanFrancisco 字體會隨著字號的變化自動調整字母之間的間距,以確保任何情況下都能很清晰地閱讀。

在 Android 設備上,原生系統英文字體使用 DroidSans 或 Roboto,但國內的 Rom 大都是第三方廠商定制而成,對原生系統字體有所變動。大家在設計時可以使用 Noto 作為中文字體來使用。

網頁端常用字體

在 Windows 系統中,常用字體有微軟雅黑、黑體、宋體等,最小字號推薦 12px,正文字號推薦 14px,標題字號推薦 18px、20px、24px、28px、32px 等,盡可能使用偶數。而行間距一般為字號的 1.5-1.8 倍。

在 Mac OS 系統中,常用中文字體有蘋方、思源黑體 、華文細黑等,英文字體有 Helvetica、SanFrancisco 等。

值得一提的是:Helvetica 曾被評為是設計師最愛的字體,簡潔現代的線條,非常受到追捧。在 Mac 下被認為是最佳的網頁字體,在 Windows 下由于 Hinting 的原因顯示很糟糕。

三、圖標

1. 圖標功能

圖標是 Web 和 App 設計中的點睛之筆,既能輔助文字信息的傳達,也能作為信息載體被高效地識別,并且圖標也有一定的裝飾作用,可以提高界面設計的美觀度。

2. 圖標類型

關于圖標的類型目前并沒有很權威的分類,我根據圖標的用途將其分為兩大類:「功能型圖標」和「展示型圖標」。

功能型圖標

一般來說,凡是 UI 界面中,用戶可以點擊的圖標均可看成是功能型圖標,該類圖標往往代表某一功能或某一鏈接的跳轉。這類圖標的典型應用場景就是 iOS 系統中的底部標簽欄,以及 Material Design 中側滑菜單選項的左側。

某些列表或卡片內的圖標也屬于功能型圖標,但這類圖標往往代表一個功能,而底部標簽欄圖標往往代表一個頁面或板塊。

展示型圖標

相比功能型圖標,展示型圖標更加具有「設計感」,是獨特的、有內涵的以及具備辨識度的。一般來說,展示型圖標主要是應用程序的啟動圖標。該類圖標代表了一款產品的屬性、氣質以及品牌形象等,也是用戶首先看到的內容,設計時應盡可能讓用戶記住并感到愉悅。

該類圖標在 iOS 系統中除了出現在 App Store 里,還出現在用戶下載后的桌面上,以及 Spotlight 的搜索結果和設置等地方。

3. 圖標風格

圖標的設計風格有很多種,例如:線性圖標、面性圖標、線面結合圖標、扁平圖標、輕擬物圖標、擬物圖標、手繪型圖標等,我對其中常見的幾種作下簡要的介紹。

線性圖標

線性圖標是由直線、曲線、點等元素組合而成的圖標樣式。該類圖標輕巧簡練,具有一定的想象空間,且不會對界面產生太大的視覺干擾。

面性圖標

面性圖標可以簡單理解為對線性圖標的填充,但面性比線性更加穩重和扎實,對色彩的傳達也清晰明顯。

線面結合圖標

線面結合圖標典型代表是「MBE風格」圖標,其設計特點是采用了粗描邊線和偏移的填充面相結合,靈動而鮮明。粗線條起到對畫面的絕對分割,突顯內容、表現清晰。

扁平圖標

扁平圖標去掉了透視、紋理、漸變等能做出 3D 效果的元素,讓信息本身作為核心被凸顯出來,并且在設計元素上強調抽象、極簡、符號化。

輕擬物圖標

輕擬物圖標沒有擬物圖標那么寫實,也不像扁平圖標那么「平」,而是利用淡淡的漸變和一些光影來達到兩者之間的平衡,識別性高又不失美感。

四、圖片

圖片在 Web 和 App 界面設計中是非常常見的,圖片的質量和展現方式都會影響著用戶對產品的感官體驗。

1. 圖片比例

不同比例的圖片所傳遞的主要信息各不相同,我們需要結合產品的特點,并根據不同的場景來選擇合適的圖片比例進行設計。

1比1

1:1 是比較常見的圖片設計比例,相同的長寬將構圖呈現得簡單,突出了主體的存在感,常用于產品、頭像、特寫等展示場景。

 4比3

4:3 的圖片比例使圖像更緊湊,更容易構圖,便于開展設計,也是常用圖片比例之一。

16比9

16:9 的圖片比例可以呈現電影觀影般的效果,是很多視頻播放軟件常用的尺寸,能帶給用戶一種視野開闊的體驗。

16比10

16:10 的圖片比例最接近黃金比,而黃金分割具有嚴格的比例性、藝術性、和諧性,蘊藏著豐富的美學價值,被認為是藝術設計中最理想的比例。

2. 圖片排版

圖片的排版類型有很多種,根據不同的場景和所需傳遞的主體信息來選擇與之相符的展現方式,以下是常見的幾種排版類型。

滿版型

滿版型是以圖片作為主體或背景鋪滿整個畫面,常搭配文字信息或 icon 修飾,視覺傳達直觀而強烈,給人大方、舒展的感覺。

通欄型

    通欄型是指圖片與整體頁面的寬度相同,而高度為其幾分之一甚至更小的一種圖片展現方式,最常見的就是輪播圖(Banner)。通欄型圖片寬闊大氣,可以有效地強調和展示重要的商品、活動等運營內容。

并置型

    并置型是將不同的圖片作大小相同而位置不同的重復排列,可以是左右或上下排列,能給原本復雜喧鬧的版面帶來秩序、安靜、調和與節奏感。

九宮格型

    九宮格型是用四條線把畫面上下左右分割成九個小塊,可以把 1 個或者 2 個小塊作為一個單位填充圖像,這種構圖給人嚴謹、規范、有序的感覺。

瀑布流型

    瀑布流型的圖片會在頁面上呈現參差不齊的多欄布局,降低了界面復雜度,節省了空間,使用戶專注于瀏覽,去掉了繁瑣的操作,體驗更好。

五、空間

1. 柵格系統

柵格系統簡介

    柵格系統英文為「Grid systems」,是一種平面設計的方法與風格,運用固定的格子設計版面空間布局,其風格工整簡潔,在二戰后大受歡迎,已成為今日出版物設計的主流風格之一。

    如今柵格系統也已經被運用到網頁設計中,它以規則的網格陣列來指導和規范網頁中的空間布局。柵格系統的使用,可以讓網頁的信息呈現更加美觀、易讀、嚴謹和一致,同時也更具可用性。

「8像素」柵格規則

    「8像素」柵格規則是一個以 8px 為單位,利用 8 的倍數來規定頁面中元素(按鈕、輸入框、圖片等)的尺寸及各自間距的一種通用的柵格規則。

    為什么用 8 而不是 5 或 7 呢?因為 8 是一個偶數,在 UI 設計過程中,對于 Android 系統需要導出特殊的 @1.5x 的切圖,如果圖片尺寸為奇數,則會出現半像素和虛邊的問題,而用偶數則可以避免這種情況。
     為什么用 8 而不是 6 或 10 呢?因為目前主流的屏幕尺寸大部分都是 8 的整數倍,比如 1920 × 1080、1280 × 1024、1280 × 800、1024 × 768 等。即使某些屏幕邊長像素不是 8 的倍數,在設計中仍然可以盡量做到自定義元素的長、寬、margin 以及 padding 都是 8 的整倍數來維持設計的一致性。

2. 留白

    對于一些特殊的頁面,例如:引導頁、閃屏頁、促銷頁等,可以不用嚴格按照柵格系統進行設計,但需要注意空間留白的運用。

留白四屬性

  • 層次感:留白可以使頁面的層次感得到極大的增強,留白越大,模塊、信息間的層次感越清晰。

  • 焦點:元素越多,人的視覺注意力越容易分散;相反元素越少(即留白越大),注意力則會更有效地聚焦在重要的內容上。

  • 韻味:留白具有「此時無物勝有物」的感覺,猶如中國的水墨畫。留白運用于頁面設計中,韻味也會出現。

  • 呼吸:留白的呼吸屬性可以想象成周圍的空氣,當空氣中的顆粒物(元素)特別多時,人的呼吸也會覺得不通透;相反留白越多時,呼吸感越順暢。

留白表現形式

    輕度留白:輕度留白是我們常見的頁面留白設計形式,在傳遞出雅致、高端、文藝等氣質的同時,又能將信息表現得清晰直接,讓頁面更加簡潔和實用。輕度留白融合了重度留白的優勢,但不受品牌屬性的影響,幾乎任何產品都可以用這種表現形式。

    重度留白:重度留白是把主體縮小到極致,其傳遞出的雅致、空靈、高端氣質是最強的,但與此同時,其他的屬性也近乎為零!笩o印良品」品牌倡導簡約、質樸的生活方式,原研哉賦予其設計理念就是「空」。所以,重度留白傳遞的不是產品,而是概念、氣質和態度。

小結

1. 色彩

    色相、明度、飽和度是色彩的三個屬性,不同的色彩具有不同的心理寓意,選色時需考慮產品的調性和受眾人群;色環上距離(角度)越大的顏色對比效果越強,反之對比效果越弱,設計時應采用合適的色彩搭配。

2. 字體

    黑體、宋體等是常用的中文字體,而襯線體和無襯線體是常用的西文字體;不同平臺的界面設計會有不同的字體使用規范;另外,設計時需注意字號、字重以及行間距的設置,以達到最佳的閱讀體驗。

3. 圖標

    圖標可以輔助信息文字的傳達,也可以對界面起到修飾作用;功能型和展示型是圖標的兩大類型;不同風格的圖標傳遞出不同的視覺語言,根據場景的需要進行合適的選擇,并保持風格的一致性。
    4. 圖片

    不同比例的圖片所傳遞的主要信息各不相同,設計時需要結合產品的特點,并根據不同的要求來選擇合適的圖片比例;圖片的排版類型有很多種,根據不同的場景和所需傳遞的主體信息來選擇與之相符的展現方式。
    5. 空間

    使用柵格系統,可以讓界面的信息呈現更加美觀、易讀和規范,設計時可以采用「8像素」柵格規則來指導元素尺寸和間距的制定;層次感、焦點、韻味、呼吸是留白的四個屬性,留白的表現形式需結合品牌的屬性來選擇。

    在任何領域,如果想要有所成就,都需要超越極限的學習,都需要孜孜以求的探索,都需要殫精竭慮的思考,都需要無數次失敗和成功的實踐。沒有人可以超越學習、思考和實踐成為一個真正的高手。

本文來源:中國設計在線

編輯:cdo
相關閱讀
    正在加載...
安卓有什么赚钱app 体彩陕西11选五玩法 股票推荐加推荐卓信-宝 票据理财平台如何盈利 贵州快3和值号码推荐 今天体彩福建36选7开奖结果 奇妙pk10软件哪里下载 黑龙江十一选五软件 云南11选5中奖助手 江苏11选5手机版7.1日 安徽十一选五开奖查询