首頁

界面視覺設(shè)計(jì) 5 要素之字體篇

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請點(diǎn)這里


字體是界面設(shè)計(jì)中重要的構(gòu)成要素之一,它能輔助信息的傳遞,是文字的外在表現(xiàn)形式;字體還可以通過其獨(dú)有的藝術(shù)魅力,表達(dá)情感體驗(yàn),并塑造品牌形象。

本文總結(jié)了字體設(shè)計(jì)的重要性、界面常用字體推薦以及國內(nèi)外權(quán)威設(shè)計(jì)體系中對字號(hào)、行高、字重的選擇和設(shè)置。如果你想對界面字體設(shè)計(jì)有更深一步地了解和運(yùn)用,本文將會(huì)提供一些幫助。

一、字體

1. 字體設(shè)計(jì)的重要性

輔助信息傳遞

文字是信息內(nèi)容的載體,是記錄思想、交流思想、承載語言的圖像或符號(hào),而字體則是文字的外在形式特征,是文字的視覺風(fēng)格表現(xiàn)。合適的字體可以輔助文字,將信息清晰、準(zhǔn)確地傳遞給用戶。

表達(dá)情感體驗(yàn)

字體的藝術(shù)性體現(xiàn)在其完美的外在形式與豐富的內(nèi)涵之中。在文字信息傳遞給用戶之前,人們首先感受到的是字體帶來的視覺魅力以及情感表達(dá)。

塑造品牌形象

不同字體有著不同的風(fēng)格特征: 有的字體優(yōu)美清新、線條流暢;有的字體造型規(guī)整、充滿張力;還有的字體生動(dòng)活潑、色彩明快……根據(jù)產(chǎn)品的屬性選擇正確的字體,便能有效地塑造品牌形象。

2. 界面常用字體推薦

字體的選擇是由產(chǎn)品屬性或品牌特性的關(guān)鍵詞而決定。一般中文字體種類分為:黑體、宋體、仿宋、楷體等;英文字體種類分為:無襯線體、襯線體、意大利斜體、手寫體、黑字體等。

中文字體推薦

線上中文字體推薦使用思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。其中 iOS 系統(tǒng)默認(rèn)中文字體是「蘋方PingFang」,Android 系統(tǒng)中文字體使用「思源黑體Noto Sans CJK」。

介紹下「思源黑體」這款字體,它是由 Google 和 Adobe 合作開發(fā)出來的,風(fēng)格介于現(xiàn)代和傳統(tǒng)之間,可以廣泛用于多種途徑,比如手機(jī)、平板、桌面的用戶界面、網(wǎng)頁瀏覽或者電子書閱讀等。它為人們帶來了愉悅和的信息閱讀體驗(yàn),并且是免費(fèi)的。

英文字體推薦

線上英文字體推薦使用 San Francisco、Helvetica Neue、Roboto、Avenir Next、Open Sans。其中 iOS 系統(tǒng)默認(rèn)英文字體為「San Francisco」,Android 系統(tǒng)默認(rèn)英文字體為「Roboto」。

Helvetica 是一種被廣泛使用的西文字體,1957年由瑞士字體設(shè)計(jì)師設(shè)計(jì),微軟常用的 Arial 字體也來自于它。

作為一款經(jīng)典的無襯線字體,Helvetica 在平面設(shè)計(jì)和商業(yè)上非常普及和成功,被認(rèn)為是現(xiàn)代主義設(shè)計(jì)理念的典范,其簡潔樸素的線條風(fēng)格非常受追捧。

數(shù)字字體推薦

線上數(shù)字字體推薦使用 DIN、Core Sans D、Helvetica Neue。

DIN 起源于1995年的德國,無襯線字體,易用耐看、字形開放,是設(shè)計(jì)師最愛的幾類字體之一,適合顯示比較長的大號(hào)數(shù)字,但是小字號(hào)的情況下識(shí)別度較低。

Core Sans D 是由韓國設(shè)計(jì)師設(shè)計(jì)的一款無襯線字體,支持 Thin、Light、Regular、Medium、Bold 等類型字重,對大號(hào)數(shù)字的顯示效果不錯(cuò),不過它是收費(fèi)字體。

Helvetica Neue 除了上文介紹的簡潔樸素、中性嚴(yán)謹(jǐn)、沒有多余的修飾外,還是 Helvetica 的升級版,擁有了更多的字重,可以作為 iOS 和 Android 跨平臺(tái)數(shù)字字體使用。

二、字號(hào)

1. 關(guān)于字號(hào)

字號(hào)是界面設(shè)計(jì)中另一個(gè)重要的元素,字號(hào)大小決定了信息的層級和主次關(guān)系,合理有序的字號(hào)設(shè)置能讓界面信息清晰易讀、層次分明;相反,糟糕無序的字號(hào)使用會(huì)讓界面混亂不堪,影響閱讀體驗(yàn)。

2. 字號(hào)的選擇

字號(hào)的選擇,可以遵循 iOS 、Material Design、Ant Design 等國內(nèi)外權(quán)威設(shè)計(jì)體系中的字號(hào)規(guī)則,也可以根據(jù)產(chǎn)品的特點(diǎn)自行定義。

iOS 字號(hào)規(guī)則

在 iOS11 系統(tǒng)中,使用 San Francisco 作為系統(tǒng)英文字體,包含了以下幾種字號(hào)的文本樣式:

  • 11pt / 12pt Caption 說明文字
  • 13pt Footnote 腳注
  • 15pt Subhead 副標(biāo)題
  • 16pt Callout 標(biāo)注
  • 17pt Body / Headline 正文 / 模塊標(biāo)題
  • 20pt / 22pt / 28pt Title 頁面標(biāo)題
  • 34pt Large Title 頁面大標(biāo)題

需要注意的是,San Francisco 字體有兩種模式:文本模式 SF Pro Text 和展示模式 SF Pro Display,文本模式適用于字號(hào)小于 20pt 的文字,展示模式適用于字號(hào)大于等于 20pt 的文字。

Material Design 字號(hào)規(guī)則

在 Material Design 設(shè)計(jì)體系中,使用 Roboto 作為英文字體,規(guī)定了以下文字排版的常用字號(hào):

  • 12sp 小字提示
  • 14sp(桌面端 13sp)正文 / 按鈕文字
  • 16sp(桌面端 15sp)小標(biāo)題
  • 20sp Appbar 文字
  • 24sp 大標(biāo)題
  • 34sp / 45sp / 56sp / 112sp 超大號(hào)文字

長篇幅正文,每行建議 60 字符左右,短文本建議每行 30 字符左右。

Ant Design 字號(hào)規(guī)則

Ant Design 受到5音階以及自然律的啟發(fā)定義了10種不同的字號(hào),從小到大依次為: 12px、14px、16px、20px、24px、30px、38px、46px、56px、68px。

建議主要字號(hào)為 14px,其余字號(hào)的選擇可根據(jù)具體情況進(jìn)行自由的定義,盡量控制在3-5種之間,保持克制的原則。

Kiwi 字號(hào)規(guī)則

Kiwi 是餓了么的中后臺(tái)設(shè)計(jì)語言,致力于打造出能夠「了解、洞察、溫暖、激勵(lì)用戶」的產(chǎn)品。

在 Kiwi Web 中,規(guī)定最小字號(hào)為 12px,主要文本字號(hào)為 14px,最大字號(hào)為 46px。

三、行高

1. 關(guān)于行高

行高可以理解為一個(gè)包裹在字體外面的無形的框,字體距框的上下空隙為半行距。

參考 W3C 原理,眼睛到屏幕的距離 25cm 為最佳閱讀距離。

西文的基本行高通常是字號(hào)的 1.2 倍左右。而中文因?yàn)樽址軐?shí)且高度一致,沒有西文的上伸部和下延部來創(chuàng)造行間空隙,所以一般行高需要更大,根據(jù)不同人群的特點(diǎn)(兒童、年輕人、老年人)以及使用環(huán)境,可達(dá)到1.5至2倍甚至更大。

2. 行高的設(shè)置

iOS 行高設(shè)置

Apple 官方的 iOS 字號(hào)與行高對應(yīng)關(guān)系如下(@1x倍率):


Fluent Design 行高設(shè)置

Microsoft 官方的 Fluent Design 字號(hào)與行高對應(yīng)關(guān)系如下(使用字體 Segoe UI):

Ant Design 行高設(shè)置

螞蟻金服的 Ant Design 字號(hào)與行高對應(yīng)關(guān)系如下(優(yōu)先使用系統(tǒng)默認(rèn)字體):

行高計(jì)算公式:L = F + 8。其中 L 是行高(Line Height),F(xiàn) 是字號(hào)(Font Size),F(xiàn) ≥ 12。

四、字重

1. 關(guān)于字重

字重是指字體的粗細(xì),一般在字體家族名后面注明的 Thin、Light、Regular、Medium、Bold、Heavy 等都是字重名稱。越來越多的產(chǎn)品界面需要通過字重來拉開信息層次,當(dāng)下主流趨勢 iOS11 大標(biāo)題風(fēng)格就是通過字重來拉開信息層級的。

不同的字重體現(xiàn)不同的層級關(guān)系和情緒感受,細(xì)的字體給人以細(xì)膩、輕盈的感覺,而粗體則給人莊重和嚴(yán)肅的感受,所以在定義字體規(guī)范時(shí)候需要考慮什么場景用什么字重,從而保持良好閱讀體驗(yàn)。

2. 字重的設(shè)置

字重的設(shè)置同樣基于秩序、穩(wěn)定、克制的原則。為了統(tǒng)一整體效果,一般情況下使用兩種字重為佳,例如只出現(xiàn) Regular 以及 Medium 這兩種字體粗細(xì),特殊情況下可以使用更粗或更細(xì)的字重進(jìn)一步拉開信息層級。

當(dāng)字號(hào)大小為 12-18pt 時(shí),使用 Regular;20-26pt 時(shí),使用 Light;28-34pt 時(shí),使用 Thin;當(dāng)字號(hào)大小超過 34pt 時(shí),建議使用 Ultralight。

以上是按字號(hào)與字重反比的規(guī)則設(shè)置,即字號(hào)越大,字重越輕。當(dāng)然也可以按正比的規(guī)則或者自定義規(guī)則,具體還是要根據(jù)產(chǎn)品的定位和用戶的特點(diǎn)來設(shè)置,以保證信息層級清晰明了為準(zhǔn)。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

體驗(yàn)設(shè)計(jì)中的 affordance

ui設(shè)計(jì)分享達(dá)人

這個(gè)詞,國內(nèi)有很多翻譯版本——示能、功能可供性、承擔(dān)特質(zhì)、直觀功能、預(yù)設(shè)用途、可操作暗示、支應(yīng)性、示能性等...目前“功能可供性”使用較多。但無論通過哪個(gè)詞匯來講,可能都不會(huì)很清晰的傳達(dá)其含義。


AI教程!教你繪制一只夢幻效果蝴蝶

藍(lán)藍(lán)設(shè)計(jì)的小編

設(shè)計(jì)師不光要會(huì)做軟件設(shè)計(jì),一些造型的表達(dá)也是很重要的,今天那就隨我來看看這只蝴蝶是怎么做出來的吧。

設(shè)計(jì)理念如何指導(dǎo)設(shè)計(jì)落地

ui設(shè)計(jì)分享達(dá)人

在做項(xiàng)目改版升級時(shí),我們需要做兩件大事,一是提煉核心設(shè)計(jì)理念,二是由理念推動(dòng)設(shè)計(jì)執(zhí)行。



學(xué)會(huì)UI設(shè)計(jì)中的留白,還怕作品沒有表現(xiàn)力?

ui設(shè)計(jì)分享達(dá)人

留白對于設(shè)計(jì)的價(jià)值,已經(jīng)得到相當(dāng)廣泛的認(rèn)可了。盡管留白看起來不復(fù)雜,但是在復(fù)雜多變的設(shè)計(jì)環(huán)境之下,往往并不是一件簡單的事情。優(yōu)秀的留白設(shè)計(jì)能夠在簡約的風(fēng)格和功能的可用性之間達(dá)到平衡,而要做到這一點(diǎn),需要相當(dāng)?shù)膶?shí)踐和積累。

黃金分割在界面設(shè)計(jì)中的應(yīng)用

ui設(shè)計(jì)分享達(dá)人

黃金分割大家應(yīng)該早有耳聞,作為一名設(shè)計(jì)師,怎么來利用黃金分割線使其構(gòu)圖更加完美呢?

說實(shí)話,構(gòu)圖時(shí)是否使用黃金分割線構(gòu)圖并不是絕對的,它只是方法之一。但是黃金分割比例在全世界乃至全宇宙確實(shí)都是至高無上的。


圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

博博

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

人人都是產(chǎn)品經(jīng)理 2018-06-18 11:32:22

請別拿美觀來評判LOGO的好壞,謝謝!

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

時(shí)至今日,很多企業(yè)仍然也沒有對Logo形成一種正確的認(rèn)知。當(dāng)你問起他們時(shí),企業(yè)做Logo是為了什么的?

很多人的回答是“做品牌”,然后就沒有更深層次的認(rèn)知了,而在這樣的情況下就會(huì)很容易導(dǎo)致Logo的好壞完全是憑借企業(yè)主的喜好做判斷,結(jié)果可想而知。

那企業(yè)做logo到底是為了干什么呢?

探尋問題的本質(zhì)要追溯到本源去,logo源自于“烙印”一詞,過去是為了做區(qū)分。

比如,你家和老王家都養(yǎng)雞,為了避免放養(yǎng)的時(shí)候混在一起分辨不出來,你們兩家在各自的雞身上打上烙印。

最后,雞到消費(fèi)者的眼里,不僅可以通過烙印做區(qū)分,還可以起到質(zhì)量的判斷,誰家的雞質(zhì)量最好,通過logo就知道是誰家的了,哪家名聲最響亮,消費(fèi)者的選擇成本就越低。

再然后慢慢發(fā)展到現(xiàn)在,logo不僅承載了產(chǎn)品區(qū)分的功能,更起到降低傳播成本,詮釋品牌內(nèi)涵的功能。

但是,就像上面所說的,目前很多人根本都沒有形成一個(gè)正確的認(rèn)知,企業(yè)老板有時(shí)候完全就是憑借拍腦袋做決策。

而有些設(shè)計(jì)人員為了體現(xiàn)自己的專業(yè)價(jià)值,把Logo設(shè)計(jì)得精美復(fù)雜,然后再給出一大篇的解釋。

如果老板不滿意,再根據(jù)老板的喜好做出修改,改過之后雙方皆大歡喜,老板得到了他心目中最理想的logo,設(shè)計(jì)人員也體現(xiàn)了自己的專業(yè)價(jià)值。

通常,在這種情況下設(shè)計(jì)出來的Logo,消費(fèi)者是過目即忘的,logo也不會(huì)給消費(fèi)者帶來任何的品牌聯(lián)想,因?yàn)槌似髽I(yè)內(nèi)部的人懂,其他人是看不懂的。

那如何避免這種尷尬的情況發(fā)生呢?

最好的結(jié)果是利用基模,即利用別人腦海里面已經(jīng)存在的概念,去進(jìn)行l(wèi)ogo設(shè)計(jì)。

比如,一家公司利用獅子作為企業(yè)logo,而獅子在人們腦海中已經(jīng)是存在的事物,并對獅子的象征有了一個(gè)共同的認(rèn)知,即力量和無畏,不需要再通過加工認(rèn)知再進(jìn)行記憶儲(chǔ)存,消費(fèi)者通過這個(gè)Logo的認(rèn)知繼而會(huì)聯(lián)想到這家公司的做事風(fēng)格。

這樣一來,不僅大家都可以一目了然,不必廢過多的口水解釋,在傳播上也可以降低成本。

那么,圍繞基模設(shè)計(jì)出來的Logo,通??梢宰龅揭韵氯齻€(gè)層次的功效,下面柯學(xué)將帶大家分析一遍,基模是如何對logo進(jìn)行賦能的。

  • 記憶功能
  • 二次傳播功能
  • 詮釋功能

1. 記憶功能

Logo除了做產(chǎn)品區(qū)分的本質(zhì)外,第一層也是最簡單的功能就是記憶功能,讓消費(fèi)者記住你。

在這一點(diǎn)上就把很多精美復(fù)雜的logo給淘汰了,甚至有時(shí)候在一群人眼里感覺記憶簡單的logo,但是,在另外一群人眼里就很難記憶了。

比如,這屆世界杯的現(xiàn)場品牌廣告,如何在眾多品牌閃現(xiàn)下,且在有限的鏡頭下讓全世界記住你,對企業(yè)的logo來說極為考驗(yàn)。

像萬達(dá)、蒙牛等這些中文標(biāo)字的logo品牌廣告,目測廣告資源起碼浪費(fèi)50%以上。

怎么說呢?

因?yàn)槿f達(dá)和蒙牛的標(biāo)字logo對于國人來說這些字體本來就已經(jīng)是腦海里的基模事物了,只要把萬和達(dá)兩字進(jìn)行關(guān)聯(lián)就可以,這一點(diǎn)對于記憶編碼來說,并不復(fù)雜。

但是,對于全世界的外國人來說,他們看到這些字體,和我們看到韓文日文一樣,是完完全全的新概念,理解都困難,更別談什么記憶編碼了。

而萬達(dá)的圖標(biāo)外圍的圓圈是全人類都懂得的基模概念,但是里面那個(gè)就有點(diǎn)陌生了,一個(gè)熟悉的事物加上一個(gè)不熟悉的事物組成全新的概念,需要人們從新編碼再記憶,在一點(diǎn)上,就增加了人們的記憶成本。

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

而在現(xiàn)場,做得最好的品牌廣告logo目測就是adidas和麥當(dāng)勞。

因?yàn)椋瑹o論是adidas的三條斜杠還是麥當(dāng)勞的拱門(或M),對于全世界的人來說,都已經(jīng)是存在腦海中的熟悉事物了,這些簡單的符號(hào)從人類的歷史長河中流傳多年,并被人類從小所熟知,并不需要再從新編碼記憶,只需要把已經(jīng)存在的基模事物符號(hào),即三條斜杠和拱門跟品牌進(jìn)行關(guān)聯(lián)就行了。

這些利用熟悉事物的基模跟logo進(jìn)行關(guān)聯(lián),不僅一下子可以讓人理解這是什么,且降低品牌傳播的記憶成本,讓人在眾多的品牌中一下子就記住你。

2. 二次傳播功能

利用熟悉事物的基模設(shè)計(jì)logo不僅可以降低人們的記憶成本,還可以降低人們的二次傳播成本。

就拿麥當(dāng)勞的例子說吧,假設(shè),你在路上吃著一根冰淇淋,路上遇到一老人帶著一小孩,小孩對你說,叔叔,你冰淇淋那里買的呀?

在對方老人和小孩識(shí)字不多的情況下,你是該如何精準(zhǔn)的跟他們表達(dá)呢?很顯然,直接說麥當(dāng)勞的門頭標(biāo)志上面是一個(gè)金色的拱門,看到這個(gè)標(biāo)志就是那一家在賣了。

這下老人和小孩子也會(huì)一下子就理解了,因?yàn)樵谒麄兡X海里已經(jīng)存在這樣的事物基模了,出錯(cuò)的概率就會(huì)極低。

但是,如果是復(fù)雜的logo,不僅表述的人困難,而且聽的人也會(huì)混亂,當(dāng)雙方都不能精準(zhǔn)的表達(dá)和接受時(shí),那么出錯(cuò)的概率就會(huì)極大,后果就會(huì)很尷尬。

再比如,十幾年前,國內(nèi)流行起各種運(yùn)動(dòng)服裝,有些中年人不太懂英語的情況下,都是通過識(shí)別標(biāo)志進(jìn)行傳播,當(dāng)你跟他表述品牌的時(shí)候,英語他聽不懂,只能描述品牌標(biāo)志了,這時(shí)候越簡單,越熟悉的概念就越容易降低傳播成本。

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

比如,上面的NIKE,你直接跟他說是一個(gè)勾,這樣的表達(dá)就非常精準(zhǔn)了,因?yàn)楣催@個(gè)基模已經(jīng)是人們熟悉的概念了,他去買的時(shí)候,看到門頭是個(gè)勾的標(biāo)志走進(jìn)去就行了。

3. 詮釋功能

利用基模設(shè)計(jì)logo來詮釋品牌的內(nèi)涵,可以做到讓人一目了然,并對品牌進(jìn)行正確的聯(lián)想,但是,前提條件是基模必須跟品牌擁有以下三種聯(lián)系:

  • 與產(chǎn)品相似
  • 與產(chǎn)品相關(guān)
  • 習(xí)慣性聯(lián)系

3.1 與產(chǎn)品相似

當(dāng)你需要跟別人解釋一個(gè)復(fù)雜的概念的時(shí)候最好的辦法就是利用他已經(jīng)存在的熟悉概念,其中一個(gè)辦法就是找到跟新事物相似的熟悉事物基模。

比如,你跟其他人溝通在某個(gè)國家有個(gè)領(lǐng)導(dǎo)人如何如何偉大,如何如何厲害,把國家從一個(gè)極度貧困的國家拉到世界經(jīng)濟(jì)強(qiáng)國的地位,最后還怎么怎么樣,還不如直接跟他說,他就是某國的鄧小平,這一下誰都懂了,不僅可以讓他感到震撼,而且短短幾字就利用他腦海里已經(jīng)存在的鄧小平形象進(jìn)行新事物關(guān)聯(lián)。

而在logo上也可以借用相似的熟悉事物基模跟品牌進(jìn)行聯(lián)系,比如,美團(tuán)外賣的袋鼠logo。

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

美團(tuán)外賣的訴求是“快”,如何在logo上面精準(zhǔn)表達(dá),即可以讓人簡單易懂并且降低傳播成本呢?

很顯然,美團(tuán)外賣利用了人們熟悉的基?!按蟆?,上面的袋鼠在快速的奔跑狀態(tài),并且口袋是鼓起的,表示裝著食物什么的。

這個(gè)跟美團(tuán)外賣非常相似,同樣是帶著食物快速的在路上奔跑著,通過這個(gè)logo就很精準(zhǔn)的表達(dá)出來了,別人也非常容易能理解到其中要表達(dá)的意思。

3.2 與產(chǎn)品相關(guān)

與之相關(guān),是一種指示性,暗示著他們倆擁有共用的屬性,比如,消費(fèi)者看到圖標(biāo)A,就會(huì)推測出B產(chǎn)品的相關(guān)結(jié)論。

通常,在logo上只需要找到跟產(chǎn)品擁有共同屬性的熟悉事物進(jìn)行品牌聯(lián)系就可以了。

比如,我們比較能常見的奶制品牌,就會(huì)利用奶牛這個(gè)熟悉事物的基模形象跟品牌進(jìn)行關(guān)聯(lián)。

通常,人們一看到奶牛都會(huì)聯(lián)想到牛奶,利用這個(gè)熟悉的基模設(shè)計(jì)logo,不僅可以降低人們的記憶和傳播成本,還可以指示人們不自覺的進(jìn)行聯(lián)想,即產(chǎn)品和Logo的形象之間存在著共同的屬性,那就是牛奶。

3.3 習(xí)慣性聯(lián)系

習(xí)慣性聯(lián)系是基模的象征意義在習(xí)慣性或則一致認(rèn)可的聯(lián)想上跟品牌進(jìn)行聯(lián)系,通過這樣的方式可以把比較抽象復(fù)雜的概念的表現(xiàn)出來,從而引導(dǎo)人們進(jìn)行正確的品牌聯(lián)想。

在這一點(diǎn)上,錘子手機(jī)的Logo做得就相當(dāng)不錯(cuò),不僅降低人們的記憶和傳播成本,更引導(dǎo)人們進(jìn)行正確的品牌聯(lián)想。

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

logo利用人們熟悉的錘子基模,免去了人們再次記憶編碼的過程,而錘子在現(xiàn)代人的習(xí)慣或則一致性聯(lián)想的象征性意義,往往是等同于一種類似于工匠的精神,通過嫁接這個(gè)象征的意義到企業(yè)的Logo上,可以讓人直接聯(lián)想到這是一家具有工匠精神的科技公司。

反觀最近爭議比較大的得到logo,貓頭鷹的基模并沒有讓人形成在習(xí)慣性或一致認(rèn)同上的品牌聯(lián)想。

圍繞基模設(shè)計(jì)出來的Logo,可做到三個(gè)層次的功效

沒有得到習(xí)慣性或一致認(rèn)可的聯(lián)想,主要原因是因?yàn)檫@只雅典娜的貓頭鷹代表著智慧的化身,設(shè)計(jì)人員想讓人聯(lián)想到“得到=智慧”。

但是,受限于每個(gè)人的知識(shí)經(jīng)驗(yàn)背景,對這只貓頭鷹產(chǎn)生的聯(lián)想并沒有一致上的認(rèn)同,起碼到目前看來,很多人看到代表著智慧化身的貓頭鷹,更多的聯(lián)想到的卻是“夜貓子”,繼而讓人聯(lián)想到“愛學(xué)習(xí)的都是夜貓子”這條錯(cuò)誤的道路上去。

一旦人們對logo的象征意義產(chǎn)生不一致的聯(lián)想,后續(xù)就需要花費(fèi)更多資源去普及,而這樣一來就有違設(shè)計(jì)logo的初衷,無法讓人產(chǎn)生正確的聯(lián)想,并最終增加了傳播成本。

結(jié)語

Logo是每個(gè)企業(yè)必不可少的一部分,看似簡單,所以很多人都不會(huì)過于深入的去了解,但是往往越簡單的東西,其中隱含的影響力就越大,越需要花更多的時(shí)間去雕琢,從而達(dá)到以標(biāo)志識(shí)公司的境界,通過簡單的圖標(biāo)就可以實(shí)現(xiàn)精準(zhǔn)表達(dá),記憶并傳播,一圖勝過千言萬語,而想達(dá)到這個(gè)境界,最快的捷徑就是利用基模的力量。


漸變質(zhì)感技法入門指南:對比用色

資深UI設(shè)計(jì)者

漸變這一視覺趨勢,在最近幾年里可謂如日中天。很多平平淡淡的設(shè)計(jì),將平涂改為漸變,立刻就能增加醒目感。

  • 雖說漸變是一個(gè)有效的元素,但為什么我們的漸變,還是和大神們的漸變有區(qū)別?
  • 我們應(yīng)該怎樣做出漸變的質(zhì)感?
  • 為什么說用色才是漸變的精髓?

今天我們就來和大家聊聊漸變這個(gè)話題,深入了解我們似乎以為自己懂了的漸變,我們將和大家一起分析漸變配色中,利用色彩不同特性之間的對比來用色,以及一些簡單的操作小技巧。比如快速生成一個(gè)色輪,以及簡單的利用混合工具來配出漸變配色的色彩。

漸變是在色彩上的一個(gè)相對緩慢的過渡,我們的視覺會(huì)隨著這個(gè)漸變的過渡而產(chǎn)生一種流動(dòng)感,而這種流動(dòng)感全憑在色彩上發(fā)生的種種變化。是的,我們的重點(diǎn)來了,就是這個(gè)變化,需要我們今天深入去加以了解。

談到變化,我們自然會(huì)想到這個(gè)變化的范圍。如果拿出我們的色輪來看,我們就會(huì)發(fā)現(xiàn)色輪上的變化范圍有大有小,當(dāng)兩個(gè)色彩距離較近時(shí),我們可以說他們是鄰近色,這時(shí)難以發(fā)現(xiàn)他們的區(qū)別,直至我們的肉眼無法分辨。這時(shí)候可以說變化范圍較小。

當(dāng)兩個(gè)色彩距離180,在色輪上呈相對,我們可以說這時(shí)的色彩變化是最大的,于是也就產(chǎn)生了最強(qiáng)烈的對比。很多撞色的情況,也是在這種對比下發(fā)生的。我們通常會(huì)把這對顏色稱為互補(bǔ)色。

當(dāng)然,實(shí)際的情況比這要稍微復(fù)雜一點(diǎn),我們一起來看下。

一、色相對比

剛剛大家可以發(fā)現(xiàn),這個(gè)色輪上的色彩的一個(gè)特點(diǎn)是什么?只有色相的變化。沒錯(cuò),我們平時(shí)也已經(jīng)習(xí)慣了,只用色相來區(qū)分色彩。所以,今天要講的第一個(gè)對比,也就是色相的對比。

色相的對比,在色輪上就能很直觀的表現(xiàn)。例如紅色和黃色這一段,截取過來以后,就變?yōu)榱思t – 黃漸變。利用色環(huán)就能很輕松的實(shí)現(xiàn)色相的漸變。距離越遠(yuǎn),漸變色的對比也就越大,互補(bǔ)色之間的對比達(dá)到了極值,比如紅 – 藍(lán)漸變的對比就大過紅 – 黃漸變。

這里首先教給大家一個(gè)快速生成色輪的小技巧,這個(gè)技巧不需要利用網(wǎng)上的圖片或工具?,F(xiàn)做現(xiàn)用,很方便。

1. 小技巧:快速生成色輪

STEP 01

讓我們先用這個(gè)自定義形狀工具畫出一個(gè)圓環(huán)。

STEP 02

然后在圓環(huán)里填充色彩,這里我們運(yùn)用一個(gè)漸變疊加。

漸變疊加的疊加方式為角度漸變,漸變色這里選用「色譜」,沒有找到這個(gè)漸變的小伙伴記得要追加色譜。

這時(shí)做出的色輪,在色彩上飽和度達(dá)到最大值。因此也能表現(xiàn)最強(qiáng)烈的色相對比。目前比較流行的漸變色是明度偏高,飽和度居中的漸變,也像這樣的糖果色,因此這時(shí)大家可以利用調(diào)整圖層「色相/飽和度」來增加明度或降低飽和度。

2. 高能提醒:別被參數(shù)騙了

可能很容易被初學(xué)者忽略的是,我們在 PS 里的色彩(HSB)這個(gè)參數(shù)里看下,一般來說H-色相,S-飽和度,B-明度,這里的情況和我們在色彩學(xué)里學(xué)到的 HSB 有點(diǎn)小差異。

色相這里沒有問題,但是飽和度和明度,尤其是飽和度上面,大家可以看到一般來說飽和度時(shí),色彩是慢慢失去色度,也就是呈現(xiàn)灰色,但是在軟件里把 S 這個(gè)值調(diào)到最小呈現(xiàn)出是白色;還有另一個(gè)屬性:明度,最大的明度,應(yīng)該是白色,在軟件里的 B 這個(gè)參數(shù)調(diào)到最高時(shí),并不是白色。

在 PS 里,只有把色彩放到「色相/飽和度」這個(gè)工具里,才會(huì)看到和我們書里的概念表現(xiàn)一致的特性。

3. 工具不同,漸變也就不同

運(yùn)用色環(huán)配出的漸變色和直接利用漸變工具配出的漸變色還有差別的,最重要是體現(xiàn)在顏色的過渡上。如果是用漸變工具選擇了左邊綠色,右邊紫色的漸變色,在中間出現(xiàn)的過渡色就表現(xiàn)出一種發(fā)灰的色彩。如果所選用的兩端的顏色是在色環(huán)上距離有定的角度,就會(huì)出現(xiàn)這種灰色。這是因?yàn)閮煞N顏色彼此混合所造成的。有些情況下,確實(shí)是需要這樣過渡的,這就直接用漸變工具來做漸變。

另外一個(gè)情況就是不希望色彩發(fā)灰,這時(shí)需要用到色環(huán),在色環(huán)上根據(jù)所需要的漸變過渡來選取不同的色彩配置。

可以看出來,盡管沒有飽和度、明度的變化,色彩仍然是彼此之間所表現(xiàn)的特質(zhì)都很獨(dú)特,所以基本上利用色相對比,就能配出非常優(yōu)秀的漸變作品。

一般來說,漸變本身就足夠吸引人,有漸變參與的情況下,我個(gè)人的建議是色彩不要太多,盡量少元素,整體風(fēng)格傾向極簡,這時(shí)最能發(fā)揮漸變色這種特質(zhì)的魅力。

這個(gè)案例中的漸變過渡,中間的這個(gè)紅色和藍(lán)色的漸變就是用漸變工具做出來的,兩邊的漸變都是取用了色環(huán)上的漸變過渡,可以看到色彩上兩邊的漸變中的色相更多,更飽滿,飽和度和明度都沒有喪失,而中間的漸變在紅藍(lán)之間的過渡出現(xiàn)了飽和度較低的紫灰色。

二、色溫對比

色溫是什么?色溫更多是色彩對人的主觀的心理因素的影響。雖說是主觀,但是大家的整體傾向還是比較類同。比如藍(lán)色清涼,紅色溫暖。

所以,把色環(huán)上的色彩根據(jù)主觀溫度進(jìn)行一個(gè)劃分,就有了我們經(jīng)常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進(jìn)行衡量,但是卻在色彩中發(fā)揮不小的作用。

1. 獲得平衡感

漸變中加入色溫這個(gè)屬性,這個(gè)游戲就會(huì)更好玩。一般來說,為了達(dá)到配色平衡,我們的配色中需要冷暖進(jìn)行平衡,這里的平衡并非是1:1的嚴(yán)格配比,而是彼此滲透,雙方根據(jù)位置、面積、形狀等等元素的共同參與,共同實(shí)現(xiàn)一個(gè)版面的平衡。當(dāng)然,這不是件容易的事,但這是我們配色中的方向之一。

回到我們的色溫對比,要體現(xiàn)在漸變中,就是要有冷色和暖色的參與。一般來說,在比較簡單的過渡性雙色漸變里,一個(gè)冷色一個(gè)暖色是非常常見的表達(dá)方式。還是拿剛剛那個(gè)案例來看,左邊兩個(gè)配色就是冷暖的過渡,而右邊的配色相對來說偏暖,當(dāng)然相比之下,洋紅色還是比橙色會(huì)更偏冷一些。

2. 綠色和紫色:冷暖不定

冷暖色的對比都是在同一個(gè)版面內(nèi)的一個(gè)動(dòng)態(tài)對比,尤其對于綠色和紫色這個(gè)范圍內(nèi)的色彩來說的話更是如此。比如綠色,在和藍(lán)色搭配的時(shí)候,由于藍(lán)色是絕對的冷色,所以綠色就表現(xiàn)出暖色的特質(zhì);而綠色如果和橙色搭配,橙色又是絕對的暖色,所以綠色又表現(xiàn)出冷色的特性。紫色也是同樣的情況,和藍(lán)色搭配它偏向暖色,而和橙色搭配時(shí)它又是偏冷的。

用起來其實(shí)也很簡單,如果你的配色中發(fā)現(xiàn)整體感覺偏冷,就增加暖色。如果太暖,那就增加冷色調(diào)。如果整體的配色看不出哪里不對勁,但總覺得色彩有點(diǎn)奇怪,就先看看色溫是不是實(shí)現(xiàn)了平衡。

三、明度對比


再增加一個(gè)屬性,漸變這個(gè)游戲又增加難度了,明度這個(gè)屬性表現(xiàn)為顏色的明暗程度,明度引入了另一個(gè)性質(zhì):光。其實(shí)我們平時(shí)看到的色彩就是因?yàn)橛辛斯猓庞辛祟伾?。但是一般來說我們會(huì)把光簡單歸屬于「發(fā)光」這個(gè)行列。事實(shí)上,由于光線的折射,我們視網(wǎng)膜接受到光的波長,才產(chǎn)生了色彩。那么光線的強(qiáng)烈與否,就會(huì)影響這個(gè)顏色的表現(xiàn)。

明度的對比,是所有顏色屬性當(dāng)中,最容易被覺察到的。我們可以簡單來看,我們的素描就是利用明暗來表現(xiàn)物體,黑白灰能毫不費(fèi)力表現(xiàn)現(xiàn)實(shí)中光的感覺。所以在配色中,有了明暗對比,是一個(gè)很好表現(xiàn)色彩感染力的元素。

1. 表現(xiàn)立體感

即使明度相同,我們的色彩明暗程度(從主觀感受來說),也是不一樣的。比如相同明度的黃綠色和紫色,在明暗表現(xiàn)上,黃綠色明顯更亮,更靠前。如果讓這兩個(gè)色彩之間發(fā)生漸變關(guān)系,這樣的表現(xiàn)就很像左上角有光滲入進(jìn)這塊平面中。如果進(jìn)一步降低的紫色的明度,這時(shí),明度的對比就更為強(qiáng)烈。這時(shí)很適合表現(xiàn)出某種立體感。

當(dāng)然,我們的色彩并非一定要有立體感才能生動(dòng),有些配色大師,會(huì)刻意去弱化立體感,所以會(huì)盡量避免明暗的對比。但是,作為初學(xué)者,一定要知道明暗對比,懂得在適當(dāng)?shù)那闆r下拿來使用。

尤其是在同色系或者鄰近色色系的漸變里,明度對比是一個(gè)增加立體表現(xiàn)力的方式。有些時(shí)候,平涂的方式看起來呆板單調(diào),利用同色系漸變就能很好解決這個(gè)問題。兩個(gè)色彩之間可以非常近似,即便如此,還是和平涂有差別。有了光的感覺就要隨時(shí)注意受光的方向,在整個(gè)畫面里保持全局光,所謂全局光,換個(gè)簡單的說法就是大家都在同一光源照射下。

我們可以再和大家演示一下,例如這里有兩個(gè)圓,這兩個(gè)圓都是填充為紫 – 綠漸變,這時(shí)的紫和綠是同樣的明度。這里注意,就算是同樣明度,兩個(gè)顏色在直觀的感覺上,明暗程度也是有差別的,比如綠色會(huì)稍微亮一點(diǎn)。這時(shí)打開漸變工具,在后邊的綠色這一端色彩,將它的明度調(diào)高,這時(shí)大家會(huì)發(fā)現(xiàn),右邊這個(gè)圓就變?yōu)榱艘粋€(gè)球體。

2. 從黑白灰開始

明度漸變還是增加作品細(xì)膩程度的一個(gè)方法,我們和大神的差距,也許真有可能就是一處小小的明暗關(guān)系的不同。別忘了,明度對比對整體效果所發(fā)生的影響是最大的,但也是我們最容易忽略的,有時(shí)候一旦有了顏色,我們的焦點(diǎn)都在色調(diào)和色度上。但其實(shí)所有的配色,比如我們做設(shè)計(jì),一開始總是從黑白灰開始做起,先配置好明度,然后再開始根據(jù)明度來選擇用色。

有了對明度的把握,我想我們對色彩的把握才能上升到新的層次,否則,我們在一堆色彩里,很容易迷失方向。

四、色度對比

這里說的色度,也被叫飽和度,有的書上也叫彩度,拿我們?nèi)粘S谜Z講就是鮮艷程度。色度對比越強(qiáng),尤其是色輪上的互補(bǔ)色,在他們色度都達(dá)到最大時(shí),會(huì)撞出最大的火花,產(chǎn)生最強(qiáng)烈的效果。

有時(shí)候這種高彩度的配色用在動(dòng)感很強(qiáng)的設(shè)計(jì)中,看上去活力四射。但這種互補(bǔ)色之間也會(huì)發(fā)生彼此互斥的關(guān)系,造成整個(gè)版面的凌亂,所以要非常謹(jǐn)慎的對待色度。

空氣透視 – 空間感的塑造

色度對比最常見的就是用在空間感的塑造上,大家都知道,色度越高,在視覺上會(huì)制造一種「更近」的效果。

舉例來說吧,我們這里可以畫一個(gè)梯形,這個(gè)梯形用漸變來填色。如果用單色,大家一定感覺不出空間感。如果我們采用漸變,使得同一個(gè)顏色,比如紫紅色,在這個(gè)梯形上,由上到下做一個(gè)漸變,這個(gè)漸變中兩端的色彩,在色度上有差距。那這時(shí)就能體現(xiàn)出一個(gè)慢慢延伸到遠(yuǎn)方的感覺。甚至還能有種暴露在空氣中,被空氣弱化的視覺效果。這個(gè)也運(yùn)用在插畫中,也被叫做空氣透視。

色彩濃度的強(qiáng)弱對比,和其他的色彩的屬性相結(jié)合,配色就變得更復(fù)雜。但是通常來說,配色并沒有標(biāo)準(zhǔn)答案。所以導(dǎo)致很多人在配色的時(shí)候,都是依靠一種感覺在操作。其實(shí)感覺的確是一個(gè)最直接的選色方法之一,但是并不是唯一的方式。大家如果對色彩有更深入的了解以后,就會(huì)慢慢理解感覺層面下的更有趣的東西。這個(gè)也是經(jīng)驗(yàn)積累。

在飽和度這一環(huán),PS 里如果覺得不是很靠譜,就像我之前和大家提過,那么大家可以進(jìn)入到 AI 里,利用 AI 的混合工具來生成不同的色階。例如我們在這里用一個(gè)高飽和度的紅色和一個(gè)低飽和度的藍(lán)色相搭配。應(yīng)該說,這兩端的色彩既有飽和度的對比,也有色調(diào)和明度的對比,還有色溫的對比,應(yīng)該說是對比是非常豐富的。所以,這一條矩形,用在背景色上,我個(gè)人感覺不是太合適。如果是做成一些特殊的效果,還是不錯(cuò),比如設(shè)計(jì)字體的時(shí)候做筆畫造型,或者做裝飾的線條。

最后一個(gè)我們要略提一下,就是透明度的對比。盡管透明度不是標(biāo)準(zhǔn)的顏色屬性中的一種,但是在我們軟件操作當(dāng)中,透明度是相當(dāng)實(shí)用的。漸變的色彩,我們可以改變其中一個(gè)色彩的透明度,比如降低到0,那么一端的色彩消失不見,這樣最容易造成一種濃霧的效果。

這個(gè)插畫,是在設(shè)計(jì)我自己的個(gè)人網(wǎng)站時(shí)做的,其中這些背景中的立方體的某些塊面,就是采用某一端降低透明度的效果。有一種在云端的感覺。

五、兩個(gè)漸變配色網(wǎng)站推薦

1. Grabient

網(wǎng)站鏈接:https://www.grabient.com/

這個(gè)網(wǎng)站的工具很好用,我當(dāng)時(shí)在群里推薦的時(shí)候,有人問我說這個(gè)和 PS 里的漸變工具有什么區(qū)別。我在剛剛其實(shí)已經(jīng)和大家講過,PS里的顏色的設(shè)置是有一些和我們的色彩理論不太符合的地方,但是這個(gè)漸變工具就完全符合我們對色彩屬性的了解。所以在這里可以進(jìn)行調(diào)試,再確定漸變的值,最后放到 PS 里用。

2. WebGradients

網(wǎng)站鏈接:https://webgradients.com/

這個(gè)網(wǎng)站,我相信大家應(yīng)該不會(huì)陌生,好多地方都推薦過,這個(gè)漸變色是可以作為背景色來使用的。大家可以看到這上面大部分的漸變的明度都比較高,比較淺。過渡也非常細(xì)膩。這一點(diǎn)大家可以拿來當(dāng)作自己配色的參考。

這兩個(gè)工具以外,還有很多其他好用的工具我就不一一演示了,這是我用的比較多,而且覺得還挺實(shí)用的兩個(gè)網(wǎng)站。

寫在最后

其實(shí)色彩和音樂的感覺是最接近的,每個(gè)色彩對應(yīng)每個(gè)音調(diào),那經(jīng)過組合以后就能表現(xiàn)出一定的情感。通常你也很難說,哪一首音樂是最好聽的,因?yàn)槊總€(gè)人喜歡的音樂風(fēng)格都不一樣。但是總有那么一些歌是廣為流傳成為經(jīng)典的。

所以要學(xué)會(huì)漸變,首先應(yīng)該是了解色彩。我們不可能通過一篇文章就能完成學(xué)習(xí),肯定是希望以這篇文章作為一個(gè)啟發(fā)點(diǎn),大家可以從中找到自己的學(xué)習(xí)的方向。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

博博


番茄匠APP 2018-05-18 15:07:48

美麗的獲獎(jiǎng)網(wǎng)站

1. Feed

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場地(6/6/2015)

Feed不僅是一個(gè)有趣的概念,它還有一個(gè)令人驚嘆的執(zhí)行過程,它挑戰(zhàn)了我們對網(wǎng)絡(luò)上的可能性的理解。通過動(dòng)畫和視頻的創(chuàng)意融合,該網(wǎng)站讓用戶沉浸在非常吸引人的體驗(yàn)中。作為一個(gè)非典型的網(wǎng)站,它還包含幾個(gè)獨(dú)特的可用性元素,其中包括一個(gè)導(dǎo)航,可以作為滾動(dòng)進(jìn)度條加倍。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

2. crypton.trading

獎(jiǎng)項(xiàng):Awwwards當(dāng)日的場地(4/3/2018)

認(rèn)識(shí)你的機(jī)器人會(huì)計(jì)師crypton.trading。

Crypton.trading是比特幣等加密貨幣的交易中心,它使用人工智能來預(yù)測貨幣價(jià)值的變化并確定關(guān)鍵的購買和銷售機(jī)會(huì)。該網(wǎng)站因其開發(fā)和設(shè)計(jì)而被評為高,因?yàn)樗饾u向更多的下游游客滾動(dòng),更多地解釋了開發(fā)者的方法。

這個(gè)屢獲殊榮的網(wǎng)站讓熟悉技術(shù)的訪問者在主頁上出現(xiàn)Crypt的問候時(shí)感到賓至如歸,每次只有一封信。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

3. ETQ

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場地(5/19/2015)

ETQ采用非常簡約的電子商務(wù)方式,在精簡的網(wǎng)站上放置大量引人注目的產(chǎn)品視頻。簡單,平坦,基于顏色的背景伴隨著強(qiáng)大的印刷術(shù),有助于將注意力集中在用戶到達(dá)的地方:鞋子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

4. Mikiya Kobayashi

獎(jiǎng)勵(lì):Awwwards當(dāng)日的場地(7/4/2015)

Mikiya是一位產(chǎn)品設(shè)計(jì)師,擁有簡約的作品集,通過強(qiáng)大的攝影和微妙的動(dòng)畫展示了他的作品。他的全部網(wǎng)站最初是用日文創(chuàng)作的,然后翻譯成英文,這有助于展示他設(shè)計(jì)的國際可擴(kuò)展性。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

5. Inside Abbey Road

獎(jiǎng)項(xiàng):最佳音樂網(wǎng)站,2016年威比獎(jiǎng)

谷歌通過這個(gè)高度互動(dòng)的網(wǎng)站將它從公園打出來,讓用戶可以進(jìn)入Abbey Road Studios。輝煌的聲音設(shè)計(jì),導(dǎo)航機(jī)制以及混合了通常的“Google風(fēng)格”的視覺效果都有助于吸引訪問者訪問這個(gè)制作精良的網(wǎng)絡(luò)媒體資源。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

6. Citrix: The New Mobile Workforce

獎(jiǎng):每日網(wǎng)站(11/23/2017),最佳網(wǎng)站圖庫

這個(gè)網(wǎng)站致力于紅牛與基于云計(jì)算軟件公司思杰的合作,這是非常了不起的。

新移動(dòng)員工隊(duì)是思杰旗下的一個(gè)網(wǎng)站,它使用全景攝影技術(shù)向觀眾展示思杰如何支持紅牛車隊(duì)的新賽車。即使你不是賽車愛好者,該網(wǎng)站的巧妙動(dòng)畫也可以解釋復(fù)雜的汽車技術(shù),這一點(diǎn)很難忽略。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

7. The History of Climate Change

獎(jiǎng)勵(lì):Awwwards當(dāng)日網(wǎng)站(6/23/2015)

按照Luc Jacquet的腳步,Wild-Touch將帶您參觀關(guān)于全球氣候變化歷史的視覺和教育之旅。歷史媒體和獨(dú)特動(dòng)畫的混合有助于講述故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

8. Beagle

獎(jiǎng):每日網(wǎng)站(4/19/2015),最佳網(wǎng)站圖庫

比格爾以一種簡單易懂的方式在視覺上和逐步地講述他們產(chǎn)品的故事方面做得非常出色。這對許多創(chuàng)業(yè)公司來說是一個(gè)重大挑戰(zhàn),特別是當(dāng)他們將新概念引入現(xiàn)有市場時(shí)。人們想知道,“你的產(chǎn)品是什么?它是如何工作的?為什么我在乎?” 比格爾回答所有這些問題,同時(shí)展示他們的產(chǎn)品并強(qiáng)制用戶購買。另外,他們是實(shí)際上正確實(shí)施“滾動(dòng)劫持”的幾個(gè)網(wǎng)站之一。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

9. Southwest: Heart of Travel

獎(jiǎng):最佳視覺設(shè)計(jì) - 審美,2018年威比獎(jiǎng)

當(dāng)西南航空想要證明其客戶不僅僅是一個(gè)美元符號(hào)時(shí),該公司創(chuàng)建了一個(gè)網(wǎng)站,其設(shè)計(jì)使用客戶航線的形狀進(jìn)行組裝。

這個(gè)名為“旅行之心 ”的網(wǎng)站甚至允許游客在他們計(jì)劃參加的旅行中創(chuàng)建自己的作品。這樣,西南航空的網(wǎng)站就是他們最忠誠的乘客的產(chǎn)品。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

10. Woven Magazine

獎(jiǎng):每日網(wǎng)站(4/4/2015),最佳網(wǎng)站圖庫

Woven是一個(gè)在線刊物,為藝術(shù)家,工匠和制作人員提供贊美。對我而言,他們代表了一種確認(rèn),即出版物可以(也應(yīng)該)擁有美觀且引人入勝的網(wǎng)站,內(nèi)容易于閱讀。這個(gè)網(wǎng)站沒有像彈出窗口和突兀的廣告這樣的分心,而是關(guān)于內(nèi)容本身的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

11. JOHO's Bean

獎(jiǎng)勵(lì):當(dāng)日FWA(2015年8月8日),網(wǎng)站獎(jiǎng)

JOHO's Bean的網(wǎng)站有令人難以置信的圖像,交互性,講故事,視覺設(shè)計(jì),最重要的是音響工程。這些都聚集在一起,創(chuàng)造出一個(gè)引人入勝,情緒化和引人入勝的網(wǎng)站,講述咖啡豆之旅的故事。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

12. NOWNESS

獎(jiǎng)項(xiàng):最佳文化博客/網(wǎng)站,2017年威比獎(jiǎng)

Nowness可能是當(dāng)今互聯(lián)網(wǎng)上最酷的眾包視頻博客。那真是一口......所有這些意味著什么?

NOWNESS的“眾包”性質(zhì)是其獲獎(jiǎng)?wù)叩囊徊糠?。這意味著其大部分內(nèi)容來自獨(dú)立廣告素材 - 這是企業(yè)發(fā)布內(nèi)容的一種日益流行的方式。NOWNESS也是一個(gè)視頻博客,這意味著它的所有博客內(nèi)容都是視頻格式??傊?,這些品質(zhì)有助于使Nowness成為各個(gè)品牌努力講述的故事的迷人中心。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

13. Virgin America

獎(jiǎng)項(xiàng):最重要的行業(yè)演變,2014 UX獎(jiǎng)

在一個(gè)已知航空網(wǎng)站充斥著主要可用性問題的世界中,維珍美國公司擁有推動(dòng)可用性,可訪問性和快速響應(yīng)設(shè)計(jì)的最佳網(wǎng)站之一。事實(shí)上,它被命名為第一個(gè)真正快速響應(yīng)的航空公司網(wǎng)站,這是該行業(yè)的一個(gè)新的先例。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

14. World of SWISS

獎(jiǎng)項(xiàng):最佳用戶界面,2015年威比獎(jiǎng)

另一家航空公司?發(fā)生什么事?!是的,瑞航的航空公司建立了一個(gè)令人難以置信的身臨其境的網(wǎng)站,講述他們的故事,并描述與他們一起飛行的感覺 - 而且他們的工作太過繁重,無人理睬。強(qiáng)大的視覺效果和動(dòng)畫將用戶介紹到網(wǎng)站的不同部分,這些部分除了通常的銷售和市場營銷信息外,還包含了今天如此常見的信息。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

15. Reductress

獎(jiǎng)項(xiàng):最佳幽默網(wǎng)站,2018年威比獎(jiǎng)

在互聯(lián)網(wǎng)上嘲笑別人并不難,我們在網(wǎng)上閱讀和消費(fèi)的東西很多都是為了娛樂。但是對于大量觀眾來說,很難一致地做到這一點(diǎn)。Reductress是一本諷刺雜志,其頭條和一般閱讀體驗(yàn)是幽默部門的 - 使網(wǎng)站本身成為一個(gè)高質(zhì)量的財(cái)產(chǎn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

其他酷網(wǎng)站設(shè)計(jì)

16. Minimums

Minimums采用非常大膽的方式展示他們的內(nèi)容,利用基于網(wǎng)格的網(wǎng)站設(shè)計(jì),大字體和全幅高質(zhì)量圖像。他們的網(wǎng)站是如何正確執(zhí)行網(wǎng)格結(jié)構(gòu),同時(shí)在設(shè)計(jì)中保持良好的視覺層次結(jié)構(gòu)的一個(gè)非常好的例子。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

17. Guillaume Tomasi

作為蒙特利爾的攝影師,Guillaume Tomasi建立了一個(gè)真正適合他的獨(dú)特而令人敬畏的攝影作品。他超現(xiàn)實(shí)的照片風(fēng)格與簡單,平坦,空洞,簡約的組合設(shè)計(jì)并列,將所有的焦點(diǎn)放在作品本身上。

他獨(dú)特的系列導(dǎo)航加上藝術(shù)畫廊風(fēng)格的作品介紹和完美的滾動(dòng)互動(dòng)讓人聯(lián)想到真實(shí)畫廊的體驗(yàn)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

18. The District

這家品牌代理機(jī)構(gòu)認(rèn)真對待它的形象,它應(yīng)該 - 為客戶處理所有媒體渠道。該地區(qū)的網(wǎng)站,是通過一些你見過的最美麗的藝術(shù)品和攝影的旅程。

當(dāng)你探索網(wǎng)站時(shí),這些挑釁性的瓷磚變化很快,而且他們看起來更加奇特,對你學(xué)習(xí)過去的工作越感興趣。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

19. Tej Chauhan

Tej Chauhan通過這個(gè)有趣的網(wǎng)站將印象派藝術(shù)品變成了商業(yè)模式。該產(chǎn)品開發(fā)人員主頁上的每張圖片都會(huì)滑出以覆蓋上一張圖片,從而為您現(xiàn)在在您面前看到的物體提供很少的背景信息。

但是,是不是缺乏正確的背景知識(shí),讓你想了解更多?標(biāo)語“近期未來的紀(jì)念品”表明這些物品是他們產(chǎn)品線的一部分 - 這是您將這些創(chuàng)新物品帶入您的生活的機(jī)會(huì)。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

20. Amanda Martocchio Architecture

一家建筑公司可能并不專注于網(wǎng)站開發(fā),但其網(wǎng)站仍應(yīng)展示其對視覺上令人愉悅的設(shè)計(jì)的承諾。這個(gè)華麗的網(wǎng)站讓阿曼達(dá)·馬托基奧把它放在心上。

Amanda Martocchio Architecture喜歡它的作品并不是什么秘密- 它網(wǎng)站主頁上的每張圖片都是公司設(shè)計(jì)的房屋的迷人鏡頭。該網(wǎng)站標(biāo)出了每個(gè)房屋的滾動(dòng)條件,以及各種建筑物的各種角度。

2018年的20個(gè)最佳網(wǎng)站設(shè)計(jì)啟發(fā)你!

日歷

鏈接

個(gè)人資料

存檔