首頁(yè)

什么是高級(jí)感的設(shè)計(jì)?看這里

用心設(shè)計(jì)

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


設(shè)計(jì)師們,經(jīng)常聽到需求方說:「我想要那種很有高級(jí)感的設(shè)計(jì)」,看到T臺(tái)上的超模,你可能會(huì)忍不住說:「嘖嘖,這張臉真高級(jí)」……

但是,每個(gè)人對(duì)「高級(jí)感」定義不同,它會(huì)受到個(gè)人審美、教育水平、成長(zhǎng)環(huán)境、文化價(jià)值等因素影響。那么,這個(gè)被人們天天掛在嘴邊兒的「高級(jí)感」到底如何定義,標(biāo)準(zhǔn)又是什么呢?

今天就跟大家分享下,我最近的相關(guān)思考。

一、什么是高級(jí)感?

關(guān)于「高級(jí)感」,百度百科上并沒有這個(gè)詞條,在一定程度上可以說明,這個(gè)詞本身就是很難定義的。

我嘗試著換個(gè)思維方式,看看什么是低級(jí)?低級(jí)意味著:多欲求的、簡(jiǎn)單的、盲目的。那么,反過來(lái)看「高級(jí)感」,大概可以解讀為:克制的、的、特立獨(dú)行的。

1. 克制的

說到克制,我想到了德國(guó)工業(yè)設(shè)計(jì)師 Dieter Rams,他的「設(shè)計(jì)十戒」中有提到「好的設(shè)計(jì)是盡可能的無(wú)設(shè)計(jì)」,體現(xiàn)出簡(jiǎn)潔、克制的重要性。

比如:無(wú)印良品,在「性冷淡風(fēng)」的背后充滿了對(duì)欲望的克制。

產(chǎn)品設(shè)計(jì)以更親近自然的棉、麻、羊毛的材質(zhì)配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質(zhì),很舒服的感受。

反而下圖,高飽和度和純度的配色設(shè)計(jì),給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價(jià)。

那么,品及時(shí)尚圈的設(shè)計(jì),又是怎么考慮呢?

可以看出,他們服裝從簡(jiǎn)單利索的剪裁,到高級(jí)灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級(jí)的感受。

為什么克制的用色,給你高級(jí)的感受呢?因?yàn)?,這樣會(huì)削弱色彩對(duì)人情緒的影響,反而有治愈的能量,有一種頹廢的性感。

下面這幅畫,是意大利20世紀(jì)著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據(jù)他的名字而來(lái))。在他的畫里,所有的色彩都滲入了灰色和白色調(diào),失去了原本或艷麗或凝重的本色,柔和優(yōu)雅,而又統(tǒng)一的混合在一起。用現(xiàn)在的話來(lái)說就是:克制、留白、極簡(jiǎn)。

目前很多服裝設(shè)計(jì)、室內(nèi)設(shè)計(jì)都在效仿這種配色方式,顯得更有品質(zhì)。

比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級(jí)了很多。

以上可以看出,克制的造型及用色、適當(dāng)?shù)牧舭?、極簡(jiǎn)的畫風(fēng),反而顯得更加自信,從而給人傳遞出高級(jí)的視覺感受。

2. 的

人們常說,細(xì)節(jié)決定成敗。其實(shí),讓人們感到「高級(jí)」的事物,都有一個(gè)共性:對(duì)細(xì)節(jié)追求。

比如,前段時(shí)間看快樂大本營(yíng),里面對(duì)《延禧攻略》中演員服飾的刺繡細(xì)節(jié)進(jìn)行講解,當(dāng)時(shí)何炅用「很高級(jí)」夸贊。

我就在想,是什么觸發(fā)了他評(píng)價(jià)「高級(jí)」。

后來(lái)發(fā)現(xiàn),是因?yàn)閯≈腥宋锓b上的刺繡全是純手工的。針法多樣,包括復(fù)雜的手推繡、打籽繡、磐金繡、珠繡……而且,團(tuán)隊(duì)都是曾經(jīng)參加過故宮文物翻修的匠人們。

為了無(wú)條件的貼近歷史,這一件皇上的衣服花費(fèi)了8個(gè)工人半年的時(shí)間進(jìn)行制作。

因此,讓何炅潛意識(shí)里感到「很高級(jí)」的,正是因?yàn)閮H僅為了一部電視劇,在演員服裝上耗費(fèi)這么大的功夫,這種對(duì)細(xì)節(jié)的追求。

再拿科技產(chǎn)品舉例,比如:iPhone,由于「對(duì)稱設(shè)計(jì)」可能是人們能感知到的最原始的美,很多情況下手機(jī)受限于內(nèi)部設(shè)計(jì),很難在表面做到對(duì)稱。

但是 iPhone 為了遵循「對(duì)稱式」設(shè)計(jì),投入非常多的人力去解決(上面),而對(duì)比三星Galaxy S6 的設(shè)計(jì)(下面),看起來(lái)就略顯尷尬。

它們對(duì)產(chǎn)品每一個(gè)方面都精雕細(xì)琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機(jī)不僅僅是一款產(chǎn)品,更像是一件藝術(shù)品,同樣給人高級(jí)的感覺。

3. 特立獨(dú)行的

人類本能習(xí)慣于盲目追隨、容易妥協(xié)。因此,獨(dú)立思考、特立獨(dú)行且自信的人或事物,常給人很感級(jí)的感覺。

比如,在網(wǎng)紅臉盛行的今天,隨便逛個(gè)街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級(jí)。比如,柳巖就評(píng)價(jià)過自己屬于「低級(jí)臉」。

為什么超模那樣高冷的臉蛋會(huì)給人一種高級(jí)感呢?

因?yàn)?,她們有特色的五官長(zhǎng)相,意味著不向大眾主流審美屈服和妥協(xié),而且非常自信。同時(shí),高級(jí)感也意味著,在 TA身上看不到欲望、諂媚和討好。

再比如,日本的服裝設(shè)計(jì)大師——山本耀司。在人們都追求時(shí)尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時(shí)候,他卻以反時(shí)尚設(shè)計(jì)而著稱。

他大膽發(fā)展日本傳統(tǒng)服飾文化的精華,具有獨(dú)立思考,形成一種反時(shí)尚風(fēng)格。這種與西方主流背道而馳的新著裝理念,不但在時(shí)裝界站穩(wěn)了腳跟,還反過來(lái)影響了西方的設(shè)計(jì)師。

總的來(lái)說,高級(jí)感是克制的,它極簡(jiǎn)、低調(diào)、且優(yōu)雅;高級(jí)感是的,對(duì)細(xì)節(jié)的完美追求、具有匠心精神;高級(jí)感是特立獨(dú)行且自信的,不盲目追逐潮流、不討好、不妥協(xié)。

二、高級(jí)感的接受度?

雖然我們認(rèn)為「克制的」、「的」、「特立獨(dú)行的」給人以高級(jí)的感受。但是,真的是所有人都能接受嗎?

不可否認(rèn),有的人就是覺得花里胡哨的東西很高級(jí),比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。

因此,我就在思考兩個(gè)問題:影響審美的因素;大眾對(duì)「高級(jí)感」的接受度。

1. 影響審美的因素

不管是個(gè)人審美、教育水平、成長(zhǎng)環(huán)境,還是價(jià)值觀,我覺得決定審美的背后,是「經(jīng)濟(jì)」這只無(wú)形的手。

不知道你有沒有發(fā)現(xiàn)一個(gè)規(guī)律,越落后貧窮的國(guó)家,卻喜歡艷麗的、繁雜的設(shè)計(jì)。

而相反,越發(fā)達(dá)的國(guó)家,反而更青睞簡(jiǎn)約、淡色。

原因是經(jīng)濟(jì)落后的國(guó)家,人們?nèi)鄙俚氖恰肛S富」,想要的更多色彩,更多花樣。

而經(jīng)濟(jì)發(fā)達(dá)的地方,人們已經(jīng)擁有足夠多,因此,內(nèi)心中追求更多的是:我需要什么?我是誰(shuí)?什么對(duì)我不重要?

人們對(duì)過于爆炸多樣的商品會(huì)感到「焦慮」,「害怕」因?yàn)檫x擇的太多,反而想要抽離。

因此,像無(wú)印良品這類克制的、做減法的、回歸本質(zhì)的物品,反而受到人們喜愛。

2. 大眾對(duì)「高級(jí)感」的接受度

這里的「大眾」就先指我們中國(guó)大眾吧,他們能接受「高級(jí)感」的克制,極簡(jiǎn)嗎?

我們從消費(fèi)時(shí)代進(jìn)行分析,目前日本處于第四消費(fèi)時(shí)代,它的特征就是上面所說的,不再盲目的追求品帶來(lái)的滿足感,而是追求除了物質(zhì)以外什么才能讓人變得幸福。

而中國(guó)呢?

大多數(shù)人認(rèn)為,中國(guó)正處于第二、第三、第四消費(fèi)時(shí)代共存期。在偏遠(yuǎn)的農(nóng)村,處于第二消費(fèi)時(shí)代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費(fèi)時(shí)代,他們的觀念是「?jìng)€(gè)性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費(fèi)時(shí)代,更加崇尚無(wú)品牌,休閑傾向,整個(gè)社會(huì)趨于共享。

但是,我認(rèn)為,隨著中國(guó)經(jīng)濟(jì)近幾年迅猛發(fā)展,互聯(lián)網(wǎng)的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費(fèi)觀念及審美水平也在隨之改變。

比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風(fēng)格都很ins風(fēng);同時(shí),越來(lái)越多不因?yàn)槿偰行裕峭伙@獨(dú)立女性的打扮。

越來(lái)越多的北歐極簡(jiǎn)裝修風(fēng)的流行……

總的來(lái)說,大眾的審美水平和消費(fèi)觀念會(huì)受經(jīng)濟(jì)的影響,而中國(guó)大眾的消費(fèi)觀念正在往第四消費(fèi)時(shí)代慢慢轉(zhuǎn)變,對(duì)真正「高級(jí)感」的事物,接受度越來(lái)越高。

三、互聯(lián)網(wǎng)產(chǎn)品中高級(jí)感設(shè)計(jì)

上面舉了很多傳統(tǒng)行業(yè)案例,其實(shí)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,也在往「高級(jí)感」方向走,踐行著「極簡(jiǎn)」和「克制」的理念。

比如:年初的谷歌「ALL-White」風(fēng)。眾所周知,谷歌的設(shè)計(jì)師是極簡(jiǎn)主義界面的忠實(shí)粉絲。

下面是優(yōu)化前后對(duì)比,移除大面積的色塊,采用大面積留白,體現(xiàn)現(xiàn)代、簡(jiǎn)約的感覺。

移除多彩的圖標(biāo),采用極簡(jiǎn)的線性表現(xiàn)方式。

再比如,百度的設(shè)計(jì),一年前也在「高級(jí)感」的設(shè)計(jì)理念上進(jìn)行深挖和落地。

從以下兩個(gè)維度可以看出:克制的配色;的細(xì)節(jié)。

1. 克制的配色

拿「簡(jiǎn)單搜索」舉例,它是百度的一款搜索APP,以簡(jiǎn)潔清爽的視覺體驗(yàn),簡(jiǎn)單的操作交互,吸引了大量用戶,而且零廣告。

在界面的用色上,非??酥疲捎靡浴负?、白、灰」為主,目的是為了讓用戶聚焦內(nèi)容本身,而不是為了設(shè)計(jì)而設(shè)計(jì)。

包括 icon 的處理,以純色的線性為主,更加現(xiàn)代、簡(jiǎn)約。

2. 的細(xì)節(jié)

大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農(nóng)神廟等都應(yīng)用了該比例設(shè)計(jì)。

其實(shí),在看似普通的百度搜索首頁(yè),同樣遵循著這個(gè)比例,讓有規(guī)則的美,嚴(yán)謹(jǐn)?shù)娜谌肫渲小?

包括柵格系統(tǒng)在設(shè)計(jì)中運(yùn)用,這種來(lái)源于數(shù)學(xué)的美學(xué),將有助于用戶,更有效和愉悅的閱讀及獲取內(nèi)容。

以上可以看出,不管是傳統(tǒng)行業(yè)還是互聯(lián)網(wǎng)行業(yè),亦或者是未來(lái)的人工智能的設(shè)計(jì),都在往「克制」、「」的方向發(fā)展,讓人人都能享用到優(yōu)質(zhì)、高級(jí)的設(shè)計(jì)。

總結(jié)

總的來(lái)說,「高級(jí)感」意味著對(duì)設(shè)計(jì)保持克制的、對(duì)細(xì)節(jié)追求、擁有獨(dú)立思考的產(chǎn)物,而且,隨著經(jīng)濟(jì)的發(fā)展,人們的審美和接受程度也發(fā)生著改變,追求真正高品質(zhì)的設(shè)計(jì)。同時(shí),不僅傳統(tǒng)行業(yè)在踐行「高級(jí)感」的設(shè)計(jì),互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì)也在朝著這個(gè)方向發(fā)展。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

具有美感的英文字體,趕快收藏啦!

用心設(shè)計(jì)

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

一、Avenir Next

Adrian Frutiger 是從過去和未來(lái)汲取的靈感而設(shè)計(jì)的 Avenir®(avenir在法語(yǔ)里意為「未來(lái)」)。Frutiger 在他的設(shè)計(jì)中加入了一種有機(jī)的人文主義元素,將 Avenir 從早期字體僵硬的幾何風(fēng)格中解放出來(lái)。

2004年,F(xiàn)rutiger 與 Linotype公司字體設(shè)計(jì)師小林章先生(Akira Kobayashi)一起復(fù)刻了 Avenir字體家族,解決了其屏幕顯示的問題。它就是 Avenir Next。幾何元素與人文元素的結(jié)合使得 Avenir Next字體的易讀性極高,這使其成為汽車HMI儀表盤和顯示器等快速掃視環(huán)境下最理想的選擇。

二、Burlingame

Burlingame®字體是一種相對(duì)較新的字體,它設(shè)計(jì)堅(jiān)實(shí),外形開放、清晰,易讀性非常高。這款字體體現(xiàn)了人文主義及手工質(zhì)感,它是根據(jù) Monotype 委托開展的汽車用戶界面易讀性研究所得到的結(jié)果而進(jìn)行的修改,使 Burlingame 成為任何車輛數(shù)字儀表盤的不二選擇。

Burlingame 字體為了滿足汽車顯示器的需求融合了多種特性:平整的切口,銳利的拐角,超橢圓的(super-elliptical)字碗以及寬松的字間距。其簡(jiǎn)單的形狀和深三角形切口還有助于確保小尺寸字體的清晰度和易讀性,尤其是在低分辨率屏幕上。

三、Frutiger

AdrianFrutiger 是世界知名的字體設(shè)計(jì)師。他的同名字體設(shè)計(jì)獨(dú)具特色,而且用途廣泛。Frutiger®字體最初用于機(jī)場(chǎng)導(dǎo)視牌,在遠(yuǎn)距離及多種角度下閱讀都非常清晰。作為一種經(jīng)典字體,F(xiàn)rutiger 是人文主義無(wú)襯線字體的易讀性與具有優(yōu)美幾何線條的早期無(wú)襯線字體(Grotesque Sans)的結(jié)合。

Frutiger 因其現(xiàn)代、溫暖的外觀被許多公司和政府采用。這種字體的開放性使其非常醒目,其獨(dú)特的字形避免了與其他字體相互混淆。

四、Tipperary

Tipperary?是一種單線的人文主義無(wú)襯線體,具有清晰、開放的字形。其簡(jiǎn)潔的字符十分易于閱讀,也非常適合數(shù)字UI 顯示。為了制作這款字體,許多經(jīng)典字體設(shè)計(jì)被重新詮釋、組合。于是就有了一款在現(xiàn)代顯示屏技術(shù)受限的范圍內(nèi)仍然表現(xiàn)出色的字體,保留了原有設(shè)計(jì)的比例和形式,使其成為印刷業(yè)的字體。

Tipperary 字形的拐角近似幾何形狀的方形,是快速掃視環(huán)境下(如汽車儀表,顯示器和界面)的最佳字體之一。

五、Daytona

Daytona?是由 Monotype公司的 Jim Wasco 遵循易讀性原則而設(shè)計(jì)的一款字體。其方正堅(jiān)實(shí)的字符特征遵循的是人文主義的形狀和比例。Daytona 的字形偏窄,可以最大限度地利用空間而且還可以提高閱讀舒適性。圓潤(rùn)的拐角、開放的字懷以及簡(jiǎn)單的字符形狀使 Daytona 成為 Monotype字體庫(kù)中最易讀的字體之一。

Daytona 字體幾乎在所有的屏幕環(huán)境(包括汽車用戶界面、數(shù)字儀表盤以及GPS設(shè)備)中都能表現(xiàn)得非常出色。

六、Akko

Akko?及 AkkoRounded 字體通常會(huì)用兩個(gè)不太可能放到一起的詞來(lái)描述——「工業(yè)的」和「精致的」,這其實(shí)得益于設(shè)計(jì)師小林章先生(Akira Kobayashi)對(duì)最初嚴(yán)謹(jǐn)?shù)墓I(yè)概念的弱化。Akko 這個(gè)名字來(lái)源于著名設(shè)計(jì)者名字和姓氏的前兩個(gè)字母。

Akko 設(shè)計(jì)友好且非?,F(xiàn)代化,清晰易讀而且又非常時(shí)尚。Akko 字形的「裸骨」骨架降低了其他設(shè)計(jì)風(fēng)格中出現(xiàn)的視覺擁擠現(xiàn)象。

七、Mayberry

Mayberry 最初是為了模仿 Tiresias?字體家族的技術(shù)而設(shè)計(jì)的,以便用于機(jī)頂盒電視設(shè)備和用戶界面。比起Tiresias,Mayberry 在美學(xué)和功能方面都有顯著的改進(jìn)。

Mayberry 包含真正的意大利斜體以及多種字重,可以在低分辨率設(shè)備上提供高質(zhì)量的閱讀和最好的可讀性,同時(shí)它還具有一系列能夠吸引專業(yè)人士的 OpenType 功能。Mayberry 是一款字寬被輕微壓縮了的人文主義無(wú)襯線字體,這樣可以在較窄的文本欄顯示更多的可讀文本。開放的字懷與垂直的應(yīng)力都有助于在低分辨率的情況下保持Mayberry設(shè)計(jì)的可讀性。

八、Trade Gothic

TradeGothic 字體家族是美國(guó)平面設(shè)計(jì)作品的主打產(chǎn)品,自1948年由 Jackson Burke 發(fā)布以來(lái)一直不斷地被使用。這一設(shè)計(jì)在國(guó)際上也很受歡迎,而且曾一度被視為 Helvetica ®家族的競(jìng)爭(zhēng)對(duì)手。

2008年的版本名為 TradeGothic Next,這款字體改進(jìn)并擴(kuò)展經(jīng)典系列,還將它引入到一個(gè)流行的新時(shí)代。這種不和諧卻為 Trade Gothic 設(shè)計(jì)增添了一點(diǎn)質(zhì)樸的自然主義色彩,這也是許多設(shè)計(jì)師回歸的原因之一。

TradeGothic Next 是最清晰的早期無(wú)襯線字體類型。該設(shè)計(jì)具有開放的字形及寬松的字間距,讓人感覺容易接近,這些都使其在需要掃視的閱讀環(huán)境下表現(xiàn)良好。

九、Slate

Slate 字體家族將出色的功能及視覺的優(yōu)雅融合成一種卓越的交流工具。很少有字體具有這種設(shè)計(jì)的美感和力量。

Slate 是 RodMcDonald 的作品,Rod McDonald 是一位屢獲殊榮的字體設(shè)計(jì)師和刻字藝術(shù)家。在四十年的職業(yè)生涯中,McDonald 參與了加拿大國(guó)家盲人研究所(CNIB)開展的字體易讀性和可讀性研究項(xiàng)目。在那里,McDonald 了解到哪些設(shè)計(jì)特征更適合最大限度地提高字符易讀性及文本可讀性。

Slate 是一款風(fēng)格化的人文主義字體,提供了一種溫暖的視覺體驗(yàn)。即使在具有挑戰(zhàn)性的技術(shù)環(huán)境中,Slate也能為用戶提供舒適的閱讀環(huán)境。

十、Unitext

HendrikWeber 的 Unitext字體設(shè)計(jì)清晰、簡(jiǎn)潔,是一款適應(yīng)性強(qiáng)、識(shí)別效率高的無(wú)襯線字體,風(fēng)格介于怪誕與人文主義之間。

Unitext 深入研究了設(shè)計(jì)機(jī)構(gòu)對(duì)于品牌字體的需求,以及設(shè)計(jì)師Hendrik Weber 本人為公司定制字體的經(jīng)驗(yàn)。由于了解用于品牌推廣的無(wú)襯線字體的流行度,還有它們的缺點(diǎn),Weber 開始著手創(chuàng)作一些可以適應(yīng)不同環(huán)境但又不放棄友好性的字體??勺x性也是一個(gè)重要的考慮因素。

Unitext 是一種新型混合風(fēng)格的字體,它具有現(xiàn)代感及前瞻性的外觀,可讀性高,并且極具未來(lái)主義的優(yōu)雅。

完美的易讀性。無(wú)與倫比的設(shè)計(jì)。

Monotype 的字體創(chuàng)意總監(jiān) Steve Matteson 將這些字體組織到一起來(lái)展示一系列可以輕松閱讀,并可以幫助駕駛員在行駛過程中保持注意力的字體樣本。通過為儀表板或HMI 選擇合適的字體,您將能夠確保您的汽車顯示屏清晰易讀,并且擁有觀眾喜愛的無(wú)與倫比的設(shè)計(jì)。



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

我用了這4個(gè)小技巧,就輕松選出基礎(chǔ)色!

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

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

設(shè)計(jì)行業(yè),無(wú)時(shí)無(wú)刻不在和色彩打交道。配色問題一直是設(shè)計(jì)圈恒久不變的熱門話題,網(wǎng)絡(luò)上關(guān)于配色的知識(shí)多如牛毛,看的時(shí)候都很懂,但是一旦自己獨(dú)立做項(xiàng)目時(shí)就又原形畢露。究竟應(yīng)該如何去理解配色呢?所謂的配色「配」在整個(gè)環(huán)節(jié)中真的是放在第一位的嗎?本期內(nèi)容通過不同層面分析配色中最易被忽略的,即:色,從哪里來(lái)的問題,同時(shí)也是最重要的一步。

一、配色常見的誤區(qū)

很多人之所以怕配色,或者說配不好色的原因是自己一直深處誤區(qū)中而渾然不知,接下來(lái)希望大家不要對(duì)號(hào)入座。

誤區(qū)一:配色的過程在整體之前。也就是常說的先配色,后設(shè)計(jì)。

誤區(qū)二:只會(huì)配不會(huì)選。這是最常見的一種,只會(huì)在有基礎(chǔ)色或者主色的前提下配色,而不懂得選一個(gè)符合整體的基礎(chǔ)色遠(yuǎn)比配色更重要。

誤區(qū)三:被理論所局限。配色的過程是偏感性的,理論雖然沒錯(cuò),但是它只是輔助提供一種方向的,而不是完全要依靠理論去配色。

接下來(lái)就繼續(xù)今天的主題:色,從哪里來(lái)?也就是基礎(chǔ)色應(yīng)該怎么選?

二、顏色來(lái)源 —— 主體

在設(shè)計(jì)中,主體也就是畫面中最重要的部分,它可以是產(chǎn)品、模特、抽象圖形等等,基礎(chǔ)色來(lái)源最常用的方式就是在主體身上提取,可以是主體中比重較大的顏色,這樣有利于主色與主體形成更強(qiáng)烈的呼應(yīng)關(guān)系,也可以是比重相比較小的顏色,這樣在形成呼應(yīng)關(guān)系的同時(shí),拓展性更強(qiáng),下面舉個(gè)例子:

假如我們?cè)谶@個(gè)人物的基礎(chǔ)上去選背景的基礎(chǔ)色,我們就可以用到這里說到的理論:基礎(chǔ)色來(lái)源于主體,那么我們可以有哪幾種選色的形式呢?下面我們繼續(xù)看:

配色形式一:將主體整體比例最大的顏色作為主色,整體在色彩上與主體形成很強(qiáng)烈的呼應(yīng)關(guān)系,這樣做的目的在于整體很和諧、舒服,易于接受,畫面更統(tǒng)一,整體視覺沖擊力偏柔軟一些。下面看另外一種形式:

配色形式二:將主體整體比例較小的顏色作為主色,同樣整體在色彩上也與主體形成了一定的呼應(yīng)關(guān)系,而正是因?yàn)橹魃侵黧w比重較小的顏色,這也使得畫面整體在于主體形成呼應(yīng)關(guān)系的前提下,也拉開了主體與背景的層次,整體視覺沖擊力增強(qiáng),畫面統(tǒng)一性減弱,整體性并沒有因?yàn)橹魃母淖兌档?。下面嘗試將文字的顏色也稍加改動(dòng):

不難發(fā)現(xiàn),無(wú)論上面哪種主色的形式,配黃色字都很融合,且都增強(qiáng)了視覺沖擊力。其原因在于畫面整體顏色與主體都形成了呼應(yīng)關(guān)系,使得配色不會(huì)給用戶一種很突兀、毫無(wú)依據(jù)的感覺。而這種形式的選色在工作中也是用到最多的,比如:

其實(shí),這種通過提取主體色作為配色參考的形式在接受程度上是很高的,通過搭配一些點(diǎn)綴色,整體上也不會(huì)給人一種很單調(diào)的視覺感受;利用主體選色的配色方式是將原本有可能茫無(wú)頭緒、感性的配色工作,轉(zhuǎn)化為一種可以有所依據(jù)、有所參考的配色技法,同時(shí)也能提升一定的工作效率。再舉個(gè)例子:

三款牙刷,三種不同的主色方案,但是每一個(gè)給人的感覺都很舒服、和諧,呼應(yīng)明確,這就是提取主體色方式的好處。

三、顏色來(lái)源 —— 風(fēng)格

不管是做海報(bào)還是頁(yè)面,在最初都要確定一個(gè)風(fēng)格路線,然后圍繞確定好的風(fēng)格選材、選色、搭配主體等。那么很多情況下,確定風(fēng)格也就等于間接性的確定了一個(gè)選色的區(qū)間,所以結(jié)合風(fēng)格特征選色也是一種很實(shí)用的方式,比如我們要做「狂暑季」風(fēng)格的專題頁(yè),那么在用色方面就要避免大面積暖色調(diào)用色,而要著重使用冷色調(diào)的顏色,目的很簡(jiǎn)單:大面積的暖色會(huì)給人一種熱鬧、狂熱、張揚(yáng)、溫馨的感受,和暑季需要清爽、降溫的感覺不相匹配,所以我們會(huì)盡可能采用主色冷色調(diào)的用色形式,搭配一些輔助色、點(diǎn)綴色,比如:

這些都是依據(jù)風(fēng)格最直觀的選色形式,這樣做的目的是將整體用色盡可能的貼合主題風(fēng)格,同時(shí)再結(jié)合主體選色的形式,將配色的過程盡可能做到有據(jù)可循。風(fēng)格選色的形式在日常工作中也是很實(shí)用的,比如:促銷,我們會(huì)用紅色、藍(lán)紫色、黃色的用色形式;春節(jié),則是以紅、黃為主;七夕,多以紫色、紅色為主;暑期購(gòu),多以藍(lán)色、青色、綠色為主。比如:

這些海報(bào)的配色形式很大程度上是依據(jù)風(fēng)格來(lái)決定的,這樣的選色方式也不會(huì)顯得很突兀,且擴(kuò)展性相對(duì)更高。

四、顏色來(lái)源 —— 文案

做設(shè)計(jì)目的是服務(wù)于商業(yè),很多時(shí)候我們都要圍繞文案、產(chǎn)品去制定風(fēng)格、主題,所以選色同樣可以參考文案,從文案中提取關(guān)鍵詞,依據(jù)關(guān)鍵詞同樣也可以提取相對(duì)應(yīng)的顏色,比如:

文案在一個(gè)畫面中的重要性也是很高的,因?yàn)橛脩粼诓豢次陌傅那疤嵯吕斫庠O(shè)計(jì)畫面速度是相對(duì)緩慢的,所以文案結(jié)合畫面的方式能夠大大的提升用戶對(duì)整體的理解速度,也就是捕捉信息的速度,將文案與畫面很好的結(jié)合在一起也是設(shè)計(jì)師所必備的技能,這樣做的目的在于讓文案與畫面形成視覺上的呼應(yīng),也更利于視覺信息的傳遞。

五、來(lái)源 —— 主體反色

前面說的大多都是通過顏色找整體的呼應(yīng)關(guān)系,這樣做的目的是讓畫面整體更和諧、整體性更強(qiáng)。而還有一種選色的形式,即以主體顏色的反色作為主色調(diào),也可以理解為:主體比重較大顏色的對(duì)比色或間隔色作為主色。比如:

將主色和主體色通過對(duì)比色或間隔色的關(guān)系拉開對(duì)比,目的是讓主體在整個(gè)畫面中的視覺形象更加鮮明,視覺感受更加強(qiáng)烈,但是要注意的是:在選反色時(shí),盡量選用主體色中比重較大顏色的反色,這樣才能起到強(qiáng)烈對(duì)比的效果。

再說下點(diǎn)綴色,點(diǎn)綴色的作用很大程度上是豐富畫面整體色感的,它的用色比例只占畫面整體的5%~10%左右,點(diǎn)綴色的選色很多時(shí)候是畫面主色的反色,目的是讓畫面整體色感不顯得單調(diào)、缺少變化,同時(shí)也有豐富畫面的作用,但是要注意不要大面積的使用,起到點(diǎn)綴、打破的作用即可。

總結(jié)

總的來(lái)說,其實(shí)配圖的過程就是在配色,當(dāng)一個(gè)畫面的主體、風(fēng)格、文案確定時(shí),我們就可以依據(jù)這些進(jìn)行選整體色,只有主色確定時(shí)才有必要進(jìn)行下面配色的工作,而不是把配色放在所有工作之前。今天主要說的就是選色的幾種常用方式,選色的過程其實(shí)也是在配色,配色合不合理要看整體效果,設(shè)計(jì)的整體感也是很重要的,凡事要做到有所依據(jù)。最后還是那句話,配色是感性的,理論是提供思路和方向的,兩者相互結(jié)合才能把配色做的更出彩。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)。

 

關(guān)于頁(yè)面打開的交互方式,這篇堪稱最全面的總結(jié)!

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

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

本篇文章分別從頁(yè)面打開方式的類型、當(dāng)前頁(yè)打開&新開頁(yè)面、彈出框三方面對(duì)頁(yè)面鏈接打開方式進(jìn)行了探討,給大家提出一些意見以供參考。

頁(yè)面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計(jì)的過程中,或多或少都會(huì)遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級(jí)較多時(shí),如何讓用戶按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗(yàn)設(shè)計(jì)仔細(xì)思考與分析的。

近期在所負(fù)責(zé)的設(shè)計(jì)項(xiàng)目中,團(tuán)隊(duì)對(duì)鏈接操作的打開方式產(chǎn)生了分歧,借此機(jī)會(huì)整理了一些案例與資料,就這個(gè)問題進(jìn)行分析探討,也給遇到同樣問題的同行一些參考意見。

一、頁(yè)面打開方式的類型

網(wǎng)頁(yè)中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計(jì)中常用的打開方式則主要有以下三種:

1. 當(dāng)前頁(yè)打開

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中進(jìn)行內(nèi)容顯示與操作。

2. 新開頁(yè)面

點(diǎn)擊操作鏈接后,在瀏覽器中新開一個(gè)獨(dú)立的標(biāo)簽頁(yè)面,進(jìn)行內(nèi)容顯示與操作。

3. 彈出框

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中,彈出一個(gè)小尺寸的對(duì)話框,進(jìn)行內(nèi)容顯示與操作。

二、當(dāng)前頁(yè)打開 & 新開頁(yè)面

首先來(lái)說說最具爭(zhēng)議的新開頁(yè)面&當(dāng)前頁(yè)打開。在 HTML語(yǔ)言中,target目標(biāo)有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當(dāng)前窗口打開」,下圖是這兩個(gè)參數(shù)的屬性描述。

從這兩個(gè)參數(shù)的屬性上來(lái)看,「當(dāng)前窗口打開」是系統(tǒng)默認(rèn)的處理方式。這個(gè)打開方式在國(guó)外的網(wǎng)站中實(shí)現(xiàn)方式比較統(tǒng)一,用戶也形成了一致的習(xí)慣,但國(guó)內(nèi)的形式則不盡相同,以至于一直頗具爭(zhēng)議,不同類型網(wǎng)站之間、同一網(wǎng)站不同場(chǎng)景之間也沒有一個(gè)明確的規(guī)則標(biāo)準(zhǔn)可供大家學(xué)習(xí)和參照。

針對(duì)這個(gè)問題的討論,可以聽到兩種不同的用戶聲音,并且都站在各自的角度闡述其道理。

舉個(gè)例子,我們以同類型網(wǎng)站(淘寶和亞馬遜)的打開處理方式進(jìn)行對(duì)比,來(lái)看一下用戶習(xí)慣、功能場(chǎng)景對(duì)鏈接打開方式選擇的影響。

首先,我們確定一致的功能場(chǎng)景:用戶從首頁(yè)中根據(jù)各種篩選條件,查找到心儀的商品。來(lái)看一下兩個(gè)網(wǎng)站的處理方式:

可以看出基本是兩個(gè)極端,差異非常明顯,再來(lái)看個(gè)有意思的現(xiàn)象,亞馬遜中國(guó)的商品搜索方式竟然又和淘寶一致了,難道鏈接打開方式的差異竟是中外用戶習(xí)慣的差異?

這確實(shí)占了很大一部分原因,那么造成這種差異的原因主要有:

  • 早期的 W3C標(biāo)準(zhǔn)不支持 target=”_blank”(HTML語(yǔ)言中,在新窗口中打開鏈接)的屬性,國(guó)外互聯(lián)網(wǎng)普及也比國(guó)內(nèi)早,于是用戶慢慢養(yǎng)成了習(xí)慣。
  • 默認(rèn)當(dāng)前頁(yè)面打開讓國(guó)外用戶覺得更有「禮貌」。如果用戶想新開頁(yè)面,可以鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者右鍵新窗口打開,此時(shí)用戶更有選擇權(quán),可以自己決定打開方式;如果默認(rèn)新開頁(yè)面,則讓用戶失去了選擇權(quán)。
  • 早期國(guó)內(nèi)互聯(lián)網(wǎng)發(fā)展較為浮躁,網(wǎng)站想通過新標(biāo)簽頁(yè)打開方式,提高PV。
  • 國(guó)內(nèi)網(wǎng)絡(luò)普及晚,部分用戶尤其很多老年人不習(xí)慣甚至或許不知道,頁(yè)中有個(gè)后退前進(jìn)按鈕、面包屑可用,新開頁(yè)面便于他們的操作。

那么,淘寶中所有的頁(yè)面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購(gòu)物車」等功能頁(yè)面就是當(dāng)前頁(yè)打開。

同一個(gè)產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計(jì)的原因我認(rèn)為有:

  • 用戶的目的較為明確,查找對(duì)象確定。(用戶想要查看的對(duì)象是確定的,如購(gòu)物車中的產(chǎn)品,用戶有明確的目標(biāo),找到鏈接打開頁(yè)面即可,不像搜索查找商品,需要一步步縮小范圍甚至比對(duì)查看)
  • 鏈接入口常駐在網(wǎng)站的信息欄,用戶可以隨時(shí)切換,操作方便,且不存在重新輸入的成本。

關(guān)于這兩種打開方式,到底哪種操作更順暢,確實(shí)難分高下,就跟「確定和取消哪個(gè)在左,哪個(gè)在右」是一種性質(zhì)的問題,沒有好壞之分,關(guān)鍵是要看在哪種場(chǎng)景下使用更合適。

新頁(yè)面打開適用的場(chǎng)景:

  • 頁(yè)面內(nèi)容沒有關(guān)聯(lián)性,且從邏輯上沒有從屬關(guān)系,相對(duì)獨(dú)立。如:產(chǎn)品中的外鏈。
  • 存在多頁(yè)面「比較」的操作,需要經(jīng)常切換。如:淘寶商品詳情。
  • 需要保留住前一頁(yè)的操作不丟失。如:知乎上過濾出來(lái)的結(jié)果列表。
  • 功能分支存在穿插,當(dāng)路徑發(fā)生交叉時(shí),最好新開頁(yè)面。如:產(chǎn)品內(nèi)部的跳轉(zhuǎn)鏈接,導(dǎo)致信息關(guān)聯(lián)的層級(jí)發(fā)生改變。
  • 具有輔助功能的操作。如:使用文檔(PDF、圖片等)需要來(lái)回參照。

當(dāng)前頁(yè)打開適用的場(chǎng)景:

  • 流程性的功能頁(yè)面,前后操作存在關(guān)聯(lián)和影響。如:下單支付、按步驟新增。
  • 同一層級(jí)內(nèi)容間的操作。如:tab欄的切換。
  • 同一路徑中的操作,用戶當(dāng)前的操作會(huì)對(duì)主頁(yè)的內(nèi)容產(chǎn)生影響。如:編輯一個(gè)配置,用戶操作完,會(huì)回到當(dāng)前頁(yè)查看結(jié)果。
  • 用戶具有明確目的性的操作,當(dāng)前頁(yè)有利于鎖定用戶注意力。如:淘寶中「我的收藏」。

以上是結(jié)合功能場(chǎng)景進(jìn)行的選擇側(cè)重,如果就「用戶體驗(yàn)」一定要分出個(gè)高下,我個(gè)人還是比較支持默認(rèn)「當(dāng)前頁(yè)打開」,從體驗(yàn)角度分析,「當(dāng)前頁(yè)打開」略勝一籌的主要原因有以下兩個(gè):

  • 尊重用戶的決定。當(dāng)前頁(yè)打開,將更多選擇機(jī)會(huì)留給用戶(鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者可以右鍵新窗口打開),一個(gè)具有良好用戶體驗(yàn)的產(chǎn)品,在用戶做操作的時(shí)候,總是能讓他們按自己的意志做出決定。網(wǎng)站對(duì)每個(gè)鏈接強(qiáng)制打開新頁(yè)面則剝奪了用戶的選擇權(quán),因?yàn)椴煌娜擞胁煌臑g覽習(xí)慣和使用需求。
  • 體驗(yàn)一致。保持一致體驗(yàn)的設(shè)計(jì)才能讓用戶產(chǎn)生信任感與安全感。當(dāng)用戶在操作界面元素的時(shí)候,可以順暢的知道、理解,并且能預(yù)料到將會(huì)發(fā)生什么,不會(huì)被分神,也不會(huì)被打斷。任何違反這個(gè)原則的設(shè)計(jì)都將會(huì)演變成一種「以設(shè)計(jì)方意志為導(dǎo)向」的設(shè)計(jì),而不是「以用戶為中心」的設(shè)計(jì)。

小結(jié)

當(dāng)我們不知道兩種方式如何選擇時(shí),或許「不強(qiáng)制用戶」才是最好的體驗(yàn)。因?yàn)槲覀兠媾R的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對(duì)于打開方式的習(xí)慣也具有多樣性,這個(gè)是設(shè)計(jì)者無(wú)法揣測(cè)和調(diào)查清楚的。

在「兩害取其輕」的情況下,在當(dāng)前窗口打開鏈接,不失為一個(gè)選擇,尊重用戶自己的決定,讓用戶對(duì)交互界面自主可控。

三、彈出框

彈出框(彈層)又叫模態(tài)對(duì)話框,是指在用戶想要對(duì)當(dāng)前對(duì)話框以外的應(yīng)用程序或內(nèi)容進(jìn)行操作時(shí)的提示方式。它一般覆蓋在整體頁(yè)面之上,避免了頁(yè)面跳轉(zhuǎn)。

彈出框通常是為了顯示一個(gè)單獨(dú)的內(nèi)容,在不離開整體頁(yè)面的情況下有一些互動(dòng),提供信息和交互。

如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個(gè)人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會(huì)采用彈出框的交互方式,當(dāng)然前提是在彈出框中編輯的內(nèi)容不是很多,此時(shí)彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶銜接路徑。

如 iconfont 中的新建項(xiàng)目,用戶新增后,頁(yè)面會(huì)直接跳轉(zhuǎn)到新的項(xiàng)目空間。

△ http://www.iconfont.cn

彈出框適用的場(chǎng)景:

  • 內(nèi)容簡(jiǎn)單,沒有復(fù)雜的操作,且具有臨時(shí)性。如:新增一個(gè)收貨地址,進(jìn)行簡(jiǎn)要的輸入編輯。
  • 更為詳細(xì)的輔助說明,是對(duì)當(dāng)前內(nèi)容的快速擴(kuò)展。如:縮略圖,點(diǎn)擊放大查看。

因此,彈出框可以較好的實(shí)現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶的主路徑,同時(shí)作為頁(yè)面承載元素和用戶操作的補(bǔ)充,起到承前啟后的作用。

總結(jié)

本文結(jié)合這三種鏈接打開方式的頁(yè)面交互關(guān)系,進(jìn)行適用場(chǎng)景舉例,并總結(jié)每種方式的優(yōu)缺點(diǎn),方便在設(shè)計(jì)中更好的根據(jù)不同的場(chǎng)景選擇合適的頁(yè)面打開方式。

當(dāng)然,以上總結(jié)也是基于我個(gè)人的理解與經(jīng)驗(yàn),沒有統(tǒng)一的用法和標(biāo)準(zhǔn),在具體設(shè)計(jì)實(shí)踐中,仍要靠設(shè)計(jì)者的直覺和經(jīng)驗(yàn)來(lái)進(jìn)行綜合考量與判斷。

作為體驗(yàn)設(shè)計(jì)師,如何規(guī)劃用戶瀏覽路徑,是個(gè)需要嚴(yán)肅對(duì)待的命題。沒有絕對(duì)的好與壞,但一定要結(jié)合產(chǎn)品類型、場(chǎng)景、目標(biāo)用戶等進(jìn)行具體問題具體分析。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

什么是“高級(jí)感”的設(shè)計(jì)?我總結(jié)了這3個(gè)要點(diǎn)!

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

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

設(shè)計(jì)師們,經(jīng)常聽到需求方說:「我想要那種很有高級(jí)感的設(shè)計(jì)」,看到T臺(tái)上的超模,你可能會(huì)忍不住說:「嘖嘖,這張臉真高級(jí)」……

但是,每個(gè)人對(duì)「高級(jí)感」定義不同,它會(huì)受到個(gè)人審美、教育水平、成長(zhǎng)環(huán)境、文化價(jià)值等因素影響。那么,這個(gè)被人們天天掛在嘴邊兒的「高級(jí)感」到底如何定義,標(biāo)準(zhǔn)又是什么呢?

今天就跟大家分享下,我最近的相關(guān)思考。

一、什么是高級(jí)感?

關(guān)于「高級(jí)感」,百度百科上并沒有這個(gè)詞條,在一定程度上可以說明,這個(gè)詞本身就是很難定義的。

我嘗試著換個(gè)思維方式,看看什么是低級(jí)?低級(jí)意味著:多欲求的、簡(jiǎn)單的、盲目的。那么,反過來(lái)看「高級(jí)感」,大概可以解讀為:克制的、的、特立獨(dú)行的。

1. 克制的

說到克制,我想到了德國(guó)工業(yè)設(shè)計(jì)師 Dieter Rams,他的「設(shè)計(jì)十戒」中有提到「好的設(shè)計(jì)是盡可能的無(wú)設(shè)計(jì)」,體現(xiàn)出簡(jiǎn)潔、克制的重要性。

比如:無(wú)印良品,在「性冷淡風(fēng)」的背后充滿了對(duì)欲望的克制。

產(chǎn)品設(shè)計(jì)以更親近自然的棉、麻、羊毛的材質(zhì)配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質(zhì),很舒服的感受。

反而下圖,高飽和度和純度的配色設(shè)計(jì),給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價(jià)。

那么,品及時(shí)尚圈的設(shè)計(jì),又是怎么考慮呢?

可以看出,他們服裝從簡(jiǎn)單利索的剪裁,到高級(jí)灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級(jí)的感受。

為什么克制的用色,給你高級(jí)的感受呢?因?yàn)?,這樣會(huì)削弱色彩對(duì)人情緒的影響,反而有治愈的能量,有一種頹廢的性感。

下面這幅畫,是意大利20世紀(jì)著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據(jù)他的名字而來(lái))。在他的畫里,所有的色彩都滲入了灰色和白色調(diào),失去了原本或艷麗或凝重的本色,柔和優(yōu)雅,而又統(tǒng)一的混合在一起。用現(xiàn)在的話來(lái)說就是:克制、留白、極簡(jiǎn)。

目前很多服裝設(shè)計(jì)、室內(nèi)設(shè)計(jì)都在效仿這種配色方式,顯得更有品質(zhì)。

比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級(jí)了很多。

以上可以看出,克制的造型及用色、適當(dāng)?shù)牧舭?、極簡(jiǎn)的畫風(fēng),反而顯得更加自信,從而給人傳遞出高級(jí)的視覺感受。

2. 的

人們常說,細(xì)節(jié)決定成敗。其實(shí),讓人們感到「高級(jí)」的事物,都有一個(gè)共性:對(duì)細(xì)節(jié)追求。

比如,前段時(shí)間看快樂大本營(yíng),里面對(duì)《延禧攻略》中演員服飾的刺繡細(xì)節(jié)進(jìn)行講解,當(dāng)時(shí)何炅用「很高級(jí)」夸贊。

我就在想,是什么觸發(fā)了他評(píng)價(jià)「高級(jí)」。

后來(lái)發(fā)現(xiàn),是因?yàn)閯≈腥宋锓b上的刺繡全是純手工的。針法多樣,包括復(fù)雜的手推繡、打籽繡、磐金繡、珠繡……而且,團(tuán)隊(duì)都是曾經(jīng)參加過故宮文物翻修的匠人們。

為了無(wú)條件的貼近歷史,這一件皇上的衣服花費(fèi)了8個(gè)工人半年的時(shí)間進(jìn)行制作。

因此,讓何炅潛意識(shí)里感到「很高級(jí)」的,正是因?yàn)閮H僅為了一部電視劇,在演員服裝上耗費(fèi)這么大的功夫,這種對(duì)細(xì)節(jié)的追求。

再拿科技產(chǎn)品舉例,比如:iPhone,由于「對(duì)稱設(shè)計(jì)」可能是人們能感知到的最原始的美,很多情況下手機(jī)受限于內(nèi)部設(shè)計(jì),很難在表面做到對(duì)稱。

但是 iPhone 為了遵循「對(duì)稱式」設(shè)計(jì),投入非常多的人力去解決(上面),而對(duì)比三星Galaxy S6 的設(shè)計(jì)(下面),看起來(lái)就略顯尷尬。

它們對(duì)產(chǎn)品每一個(gè)方面都精雕細(xì)琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機(jī)不僅僅是一款產(chǎn)品,更像是一件藝術(shù)品,同樣給人高級(jí)的感覺。

3. 特立獨(dú)行的

人類本能習(xí)慣于盲目追隨、容易妥協(xié)。因此,獨(dú)立思考、特立獨(dú)行且自信的人或事物,常給人很感級(jí)的感覺。

比如,在網(wǎng)紅臉盛行的今天,隨便逛個(gè)街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級(jí)。比如,柳巖就評(píng)價(jià)過自己屬于「低級(jí)臉」。

為什么超模那樣高冷的臉蛋會(huì)給人一種高級(jí)感呢?

因?yàn)?,她們有特色的五官長(zhǎng)相,意味著不向大眾主流審美屈服和妥協(xié),而且非常自信。同時(shí),高級(jí)感也意味著,在 TA身上看不到欲望、諂媚和討好。

再比如,日本的服裝設(shè)計(jì)大師——山本耀司。在人們都追求時(shí)尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時(shí)候,他卻以反時(shí)尚設(shè)計(jì)而著稱。

他大膽發(fā)展日本傳統(tǒng)服飾文化的精華,具有獨(dú)立思考,形成一種反時(shí)尚風(fēng)格。這種與西方主流背道而馳的新著裝理念,不但在時(shí)裝界站穩(wěn)了腳跟,還反過來(lái)影響了西方的設(shè)計(jì)師。

總的來(lái)說,高級(jí)感是克制的,它極簡(jiǎn)、低調(diào)、且優(yōu)雅;高級(jí)感是的,對(duì)細(xì)節(jié)的完美追求、具有匠心精神;高級(jí)感是特立獨(dú)行且自信的,不盲目追逐潮流、不討好、不妥協(xié)。

二、高級(jí)感的接受度?

雖然我們認(rèn)為「克制的」、「的」、「特立獨(dú)行的」給人以高級(jí)的感受。但是,真的是所有人都能接受嗎?

不可否認(rèn),有的人就是覺得花里胡哨的東西很高級(jí),比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。

因此,我就在思考兩個(gè)問題:影響審美的因素;大眾對(duì)「高級(jí)感」的接受度。

1. 影響審美的因素

不管是個(gè)人審美、教育水平、成長(zhǎng)環(huán)境,還是價(jià)值觀,我覺得決定審美的背后,是「經(jīng)濟(jì)」這只無(wú)形的手。

不知道你有沒有發(fā)現(xiàn)一個(gè)規(guī)律,越落后貧窮的國(guó)家,卻喜歡艷麗的、繁雜的設(shè)計(jì)。

而相反,越發(fā)達(dá)的國(guó)家,反而更青睞簡(jiǎn)約、淡色。

原因是經(jīng)濟(jì)落后的國(guó)家,人們?nèi)鄙俚氖恰肛S富」,想要的更多色彩,更多花樣。

而經(jīng)濟(jì)發(fā)達(dá)的地方,人們已經(jīng)擁有足夠多,因此,內(nèi)心中追求更多的是:我需要什么?我是誰(shuí)?什么對(duì)我不重要?

人們對(duì)過于爆炸多樣的商品會(huì)感到「焦慮」,「害怕」因?yàn)檫x擇的太多,反而想要抽離。

因此,像無(wú)印良品這類克制的、做減法的、回歸本質(zhì)的物品,反而受到人們喜愛。

2. 大眾對(duì)「高級(jí)感」的接受度

這里的「大眾」就先指我們中國(guó)大眾吧,他們能接受「高級(jí)感」的克制,極簡(jiǎn)嗎?

我們從消費(fèi)時(shí)代進(jìn)行分析,目前日本處于第四消費(fèi)時(shí)代,它的特征就是上面所說的,不再盲目的追求品帶來(lái)的滿足感,而是追求除了物質(zhì)以外什么才能讓人變得幸福。

而中國(guó)呢?

大多數(shù)人認(rèn)為,中國(guó)正處于第二、第三、第四消費(fèi)時(shí)代共存期。在偏遠(yuǎn)的農(nóng)村,處于第二消費(fèi)時(shí)代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費(fèi)時(shí)代,他們的觀念是「?jìng)€(gè)性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費(fèi)時(shí)代,更加崇尚無(wú)品牌,休閑傾向,整個(gè)社會(huì)趨于共享。

但是,我認(rèn)為,隨著中國(guó)經(jīng)濟(jì)近幾年迅猛發(fā)展,互聯(lián)網(wǎng)的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費(fèi)觀念及審美水平也在隨之改變。

比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風(fēng)格都很ins風(fēng);同時(shí),越來(lái)越多不因?yàn)槿偰行?,而是突顯獨(dú)立女性的打扮。

越來(lái)越多的北歐極簡(jiǎn)裝修風(fēng)的流行……

總的來(lái)說,大眾的審美水平和消費(fèi)觀念會(huì)受經(jīng)濟(jì)的影響,而中國(guó)大眾的消費(fèi)觀念正在往第四消費(fèi)時(shí)代慢慢轉(zhuǎn)變,對(duì)真正「高級(jí)感」的事物,接受度越來(lái)越高。

三、互聯(lián)網(wǎng)產(chǎn)品中高級(jí)感設(shè)計(jì)

上面舉了很多傳統(tǒng)行業(yè)案例,其實(shí)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,也在往「高級(jí)感」方向走,踐行著「極簡(jiǎn)」和「克制」的理念。

比如:年初的谷歌「ALL-White」風(fēng)。眾所周知,谷歌的設(shè)計(jì)師是極簡(jiǎn)主義界面的忠實(shí)粉絲。

下面是優(yōu)化前后對(duì)比,移除大面積的色塊,采用大面積留白,體現(xiàn)現(xiàn)代、簡(jiǎn)約的感覺。

移除多彩的圖標(biāo),采用極簡(jiǎn)的線性表現(xiàn)方式。

再比如,百度的設(shè)計(jì),一年前也在「高級(jí)感」的設(shè)計(jì)理念上進(jìn)行深挖和落地。

從以下兩個(gè)維度可以看出:克制的配色;的細(xì)節(jié)。

1. 克制的配色

拿「簡(jiǎn)單搜索」舉例,它是百度的一款搜索APP,以簡(jiǎn)潔清爽的視覺體驗(yàn),簡(jiǎn)單的操作交互,吸引了大量用戶,而且零廣告。

在界面的用色上,非??酥疲捎靡浴负?、白、灰」為主,目的是為了讓用戶聚焦內(nèi)容本身,而不是為了設(shè)計(jì)而設(shè)計(jì)。

包括 icon 的處理,以純色的線性為主,更加現(xiàn)代、簡(jiǎn)約。

2. 的細(xì)節(jié)

大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農(nóng)神廟等都應(yīng)用了該比例設(shè)計(jì)。

其實(shí),在看似普通的百度搜索首頁(yè),同樣遵循著這個(gè)比例,讓有規(guī)則的美,嚴(yán)謹(jǐn)?shù)娜谌肫渲小?

包括柵格系統(tǒng)在設(shè)計(jì)中運(yùn)用,這種來(lái)源于數(shù)學(xué)的美學(xué),將有助于用戶,更有效和愉悅的閱讀及獲取內(nèi)容。

以上可以看出,不管是傳統(tǒng)行業(yè)還是互聯(lián)網(wǎng)行業(yè),亦或者是未來(lái)的人工智能的設(shè)計(jì),都在往「克制」、「」的方向發(fā)展,讓人人都能享用到優(yōu)質(zhì)、高級(jí)的設(shè)計(jì)。

總結(jié)

總的來(lái)說,「高級(jí)感」意味著對(duì)設(shè)計(jì)保持克制的、對(duì)細(xì)節(jié)追求、擁有獨(dú)立思考的產(chǎn)物,而且,隨著經(jīng)濟(jì)的發(fā)展,人們的審美和接受程度也發(fā)生著改變,追求真正高品質(zhì)的設(shè)計(jì)。同時(shí),不僅傳統(tǒng)行業(yè)在踐行「高級(jí)感」的設(shè)計(jì),互聯(lián)網(wǎng)的產(chǎn)品設(shè)計(jì)也在朝著這個(gè)方向發(fā)展。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

汽車UI界面怎么做?來(lái)看特斯拉和Apple Carplay等高手的案例!

用心設(shè)計(jì)

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


現(xiàn)在市面上的汽車大部分都是過時(shí)的,沒有吸引力的用戶界面,正因?yàn)槿绱?,很多設(shè)計(jì)師都在思考未來(lái)的汽車用戶界面將會(huì)如何改善我們的駕駛體驗(yàn)。今天這篇譯文,一起來(lái)學(xué)習(xí)特斯拉和Apple Carplay 是怎么設(shè)計(jì)的!

汽車行業(yè)似乎每天都有著新的發(fā)展。很多證據(jù)都表明在接下來(lái)的20年里我們將會(huì)看到比上個(gè)世紀(jì)都要?jiǎng)×业淖兏铩R虼?,頂尖的?shù)字設(shè)計(jì)師們應(yīng)該把重點(diǎn)放在對(duì)這個(gè)行業(yè)的關(guān)注。那么,到底什么才是車輛用戶界面的未來(lái)?它能從根本上改變我們和汽車之間的關(guān)系么?

下面是我收集的一些由全世界不同的設(shè)計(jì)師設(shè)計(jì)的美麗和未來(lái)的汽車抬頭顯示器、用戶界面交互、第三方app控制器。這些設(shè)計(jì)想法,有一些是真實(shí)存在的,有一些還正在發(fā)展中。

特斯拉移動(dòng)控制中心原型

uisdc-car-201610133

它為什么會(huì)讓人震驚?

當(dāng)你想確定你是否已經(jīng)鎖好車,關(guān)上燈,或者把你的車鑰匙交給剛考完駕照的小屁孩的時(shí)候,你是否覺得自己是個(gè)偏執(zhí)狂?

這個(gè)移動(dòng)app可以讓你在不離開座位的時(shí)候檢查這一切,有一個(gè)柴油混合動(dòng)力車?你甚至可以在你吃早餐的時(shí)候啟動(dòng)引擎。直觀的動(dòng)畫會(huì)反饋你這個(gè)動(dòng)作是否已經(jīng)完成。

車載控制面板用戶界面

uisdc-car-201610134

它為什么會(huì)讓人震驚?

這個(gè)用戶界面看起來(lái)是一個(gè)用肌肉記憶和手勢(shì)驅(qū)動(dòng)的通用控制模型,不同數(shù)目的手指可以觸發(fā)不同事件,你可以通過iPad面板,無(wú)線鼠標(biāo)等控制它。你可以通過動(dòng)作來(lái)控制數(shù)值的大小等等。

這個(gè)用戶界面去掉了所有需要用戶記憶的小控件和視覺元素,從而你可以使用相同的手勢(shì)或者它的變體,來(lái)完成多個(gè)不同種類的任務(wù)。

你可以在這里查看整個(gè)案例研究:A New Car UI

特斯拉儀表界面概念版

uisdc-car-201610135

它為什么會(huì)讓人震驚?

汽車將會(huì)變得更加的智能,為我們的公共場(chǎng)所騰出更多的空間,并且汽車的功能也將變得越來(lái)越互相關(guān)聯(lián)起來(lái)。隨著這些發(fā)展,數(shù)據(jù)在我們面前將會(huì)變得勢(shì)不可擋,試想一下不久之前,我們的手機(jī)和其它東西一樣還是一個(gè)單一功能的設(shè)備。我們?cè)谖覀兛吹绞裁春腿绾慰瓷嫌形覀兊目刂茩?quán),它應(yīng)該變得更加自然和方便使用。人工智能和機(jī)器學(xué)習(xí)將會(huì)采取直覺控制。這個(gè)由Bureau Oberhaeuser制作的原型讓我們提前看到了這一切的到來(lái)。

你可以在這里查看整個(gè)案例研究:Behance

遠(yuǎn)程車輛健康測(cè)試與控制

uisdc-car-201610139

它為什么會(huì)讓人震驚?

當(dāng)汽車所有的零部件都變成電子系統(tǒng)時(shí),你想拿起扳手就能發(fā)現(xiàn)問題變得越來(lái)越不可能了。這個(gè)移動(dòng)app原型試圖用一種你能理解的語(yǔ)言去描述汽車當(dāng)前的健康狀況,讓你知道你是否有必要在開啟你的海岸線之旅前修一下它。

輪胎壓力和氣候的用戶界面

uisdc-car-201610131

它為什么會(huì)讓人震驚?

當(dāng)進(jìn)行輪胎檢查時(shí),這個(gè)界面將會(huì)告訴你每個(gè)輪胎的壓力范圍并且告訴你它們的極限在哪里。這個(gè)用戶界面提供了如此重要的反饋,我覺得它應(yīng)該被納入常用標(biāo)準(zhǔn)中去。

Hudway增強(qiáng)現(xiàn)實(shí)顯示器

uisdc-car-201610138

它為什么會(huì)讓人震驚?

不用說大家都知道司機(jī)應(yīng)該保持視線在路上,但是現(xiàn)在的手機(jī)導(dǎo)航都需要司機(jī)把注意力來(lái)回切換在手機(jī)屏幕和路面之間,這個(gè)叫Hudway的app把你的第二塊屏幕跟擋風(fēng)玻璃很好的結(jié)合了起來(lái)。你面前的那塊擋風(fēng)玻璃很有可能就是未來(lái)的顯示界面。

你可以在這里查看整個(gè)案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市導(dǎo)覽汽車應(yīng)用

uisdc-car-201610132

它為什么會(huì)讓人震驚?

這個(gè)用戶界面對(duì)于勇敢的探險(xiǎn)家來(lái)說非常完美,如果你想快速的知道你周圍有什么,這個(gè)用戶界面可以讓你在有限的路線里來(lái)一段自發(fā)的旅行。

Apple Carplay

uisdc-car-2016101310

它為什么會(huì)讓人震驚?

每個(gè)人都在關(guān)注它的到來(lái),想都不要想,如果你已經(jīng)有了一堆蘋果的產(chǎn)品,你也會(huì)在你的汽車上裝上它的。Apple Carplay將會(huì)是下一代的第二塊屏幕。

數(shù)字儀表板集群顯示器

uisdc-car-201610136

它為什么會(huì)讓人震驚?

沒有什么能和發(fā)動(dòng)引擎點(diǎn)亮儀表,汽車轟鳴猶如巡游樂隊(duì)組成的和旋一樣。身邊的一切,聲音和延遲的視覺互動(dòng),都給與你感官的反饋。儀表會(huì)通過動(dòng)畫直觀的告訴你,合適講切入下個(gè)轉(zhuǎn)彎,油量是否變低,以及胎壓是否過低。

然而,用數(shù)字型號(hào)在方方面面代替模擬型號(hào)也會(huì)開始令人擔(dān)憂,因?yàn)闊o(wú)法人工手動(dòng)介入賬款車子,當(dāng)保險(xiǎn)絲熔斷,或者電子儀器故障時(shí),汽車很快會(huì)失控。

特斯拉 iWatch UI 原型

uisdc-car-201610137

它為什么會(huì)讓人震驚?

當(dāng)可穿戴設(shè)備成為我們?cè)O(shè)備的一部分時(shí),它很明顯會(huì)幫助我們的手持設(shè)備分擔(dān)掉一部分的操作功能。這個(gè)原型很好的說明了它是如何將這一切展示到手腕上來(lái)的。



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

總結(jié)頁(yè)面打開的交互方式,很全面!

用心設(shè)計(jì)

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

本篇文章分別從頁(yè)面打開方式的類型、當(dāng)前頁(yè)打開&新開頁(yè)面、彈出框三方面對(duì)頁(yè)面鏈接打開方式進(jìn)行了探討,給大家提出一些意見以供參考。

頁(yè)面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計(jì)的過程中,或多或少都會(huì)遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級(jí)較多時(shí),如何讓用戶按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗(yàn)設(shè)計(jì)仔細(xì)思考與分析的。

近期在所負(fù)責(zé)的設(shè)計(jì)項(xiàng)目中,團(tuán)隊(duì)對(duì)鏈接操作的打開方式產(chǎn)生了分歧,借此機(jī)會(huì)整理了一些案例與資料,就這個(gè)問題進(jìn)行分析探討,也給遇到同樣問題的同行一些參考意見。

一、頁(yè)面打開方式的類型

網(wǎng)頁(yè)中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計(jì)中常用的打開方式則主要有以下三種:

1. 當(dāng)前頁(yè)打開

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中進(jìn)行內(nèi)容顯示與操作。

2. 新開頁(yè)面

點(diǎn)擊操作鏈接后,在瀏覽器中新開一個(gè)獨(dú)立的標(biāo)簽頁(yè)面,進(jìn)行內(nèi)容顯示與操作。

3. 彈出框

點(diǎn)擊操作鏈接后,在當(dāng)前的瀏覽器頁(yè)面中,彈出一個(gè)小尺寸的對(duì)話框,進(jìn)行內(nèi)容顯示與操作。

二、當(dāng)前頁(yè)打開 & 新開頁(yè)面

首先來(lái)說說最具爭(zhēng)議的新開頁(yè)面&當(dāng)前頁(yè)打開。在 HTML語(yǔ)言中,target目標(biāo)有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當(dāng)前窗口打開」,下圖是這兩個(gè)參數(shù)的屬性描述。

從這兩個(gè)參數(shù)的屬性上來(lái)看,「當(dāng)前窗口打開」是系統(tǒng)默認(rèn)的處理方式。這個(gè)打開方式在國(guó)外的網(wǎng)站中實(shí)現(xiàn)方式比較統(tǒng)一,用戶也形成了一致的習(xí)慣,但國(guó)內(nèi)的形式則不盡相同,以至于一直頗具爭(zhēng)議,不同類型網(wǎng)站之間、同一網(wǎng)站不同場(chǎng)景之間也沒有一個(gè)明確的規(guī)則標(biāo)準(zhǔn)可供大家學(xué)習(xí)和參照。

針對(duì)這個(gè)問題的討論,可以聽到兩種不同的用戶聲音,并且都站在各自的角度闡述其道理。

舉個(gè)例子,我們以同類型網(wǎng)站(淘寶和亞馬遜)的打開處理方式進(jìn)行對(duì)比,來(lái)看一下用戶習(xí)慣、功能場(chǎng)景對(duì)鏈接打開方式選擇的影響。

首先,我們確定一致的功能場(chǎng)景:用戶從首頁(yè)中根據(jù)各種篩選條件,查找到心儀的商品。來(lái)看一下兩個(gè)網(wǎng)站的處理方式:

可以看出基本是兩個(gè)極端,差異非常明顯,再來(lái)看個(gè)有意思的現(xiàn)象,亞馬遜中國(guó)的商品搜索方式竟然又和淘寶一致了,難道鏈接打開方式的差異竟是中外用戶習(xí)慣的差異?

這確實(shí)占了很大一部分原因,那么造成這種差異的原因主要有:

  • 早期的 W3C標(biāo)準(zhǔn)不支持 target=”_blank”(HTML語(yǔ)言中,在新窗口中打開鏈接)的屬性,國(guó)外互聯(lián)網(wǎng)普及也比國(guó)內(nèi)早,于是用戶慢慢養(yǎng)成了習(xí)慣。
  • 默認(rèn)當(dāng)前頁(yè)面打開讓國(guó)外用戶覺得更有「禮貌」。如果用戶想新開頁(yè)面,可以鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者右鍵新窗口打開,此時(shí)用戶更有選擇權(quán),可以自己決定打開方式;如果默認(rèn)新開頁(yè)面,則讓用戶失去了選擇權(quán)。
  • 早期國(guó)內(nèi)互聯(lián)網(wǎng)發(fā)展較為浮躁,網(wǎng)站想通過新標(biāo)簽頁(yè)打開方式,提高PV。
  • 國(guó)內(nèi)網(wǎng)絡(luò)普及晚,部分用戶尤其很多老年人不習(xí)慣甚至或許不知道,頁(yè)中有個(gè)后退前進(jìn)按鈕、面包屑可用,新開頁(yè)面便于他們的操作。

那么,淘寶中所有的頁(yè)面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購(gòu)物車」等功能頁(yè)面就是當(dāng)前頁(yè)打開。

同一個(gè)產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計(jì)的原因我認(rèn)為有:

  • 用戶的目的較為明確,查找對(duì)象確定。(用戶想要查看的對(duì)象是確定的,如購(gòu)物車中的產(chǎn)品,用戶有明確的目標(biāo),找到鏈接打開頁(yè)面即可,不像搜索查找商品,需要一步步縮小范圍甚至比對(duì)查看)
  • 鏈接入口常駐在網(wǎng)站的信息欄,用戶可以隨時(shí)切換,操作方便,且不存在重新輸入的成本。

關(guān)于這兩種打開方式,到底哪種操作更順暢,確實(shí)難分高下,就跟「確定和取消哪個(gè)在左,哪個(gè)在右」是一種性質(zhì)的問題,沒有好壞之分,關(guān)鍵是要看在哪種場(chǎng)景下使用更合適。

新頁(yè)面打開適用的場(chǎng)景:

  • 頁(yè)面內(nèi)容沒有關(guān)聯(lián)性,且從邏輯上沒有從屬關(guān)系,相對(duì)獨(dú)立。如:產(chǎn)品中的外鏈。
  • 存在多頁(yè)面「比較」的操作,需要經(jīng)常切換。如:淘寶商品詳情。
  • 需要保留住前一頁(yè)的操作不丟失。如:知乎上過濾出來(lái)的結(jié)果列表。
  • 功能分支存在穿插,當(dāng)路徑發(fā)生交叉時(shí),最好新開頁(yè)面。如:產(chǎn)品內(nèi)部的跳轉(zhuǎn)鏈接,導(dǎo)致信息關(guān)聯(lián)的層級(jí)發(fā)生改變。
  • 具有輔助功能的操作。如:使用文檔(PDF、圖片等)需要來(lái)回參照。

當(dāng)前頁(yè)打開適用的場(chǎng)景:

  • 流程性的功能頁(yè)面,前后操作存在關(guān)聯(lián)和影響。如:下單支付、按步驟新增。
  • 同一層級(jí)內(nèi)容間的操作。如:tab欄的切換。
  • 同一路徑中的操作,用戶當(dāng)前的操作會(huì)對(duì)主頁(yè)的內(nèi)容產(chǎn)生影響。如:編輯一個(gè)配置,用戶操作完,會(huì)回到當(dāng)前頁(yè)查看結(jié)果。
  • 用戶具有明確目的性的操作,當(dāng)前頁(yè)有利于鎖定用戶注意力。如:淘寶中「我的收藏」。

以上是結(jié)合功能場(chǎng)景進(jìn)行的選擇側(cè)重,如果就「用戶體驗(yàn)」一定要分出個(gè)高下,我個(gè)人還是比較支持默認(rèn)「當(dāng)前頁(yè)打開」,從體驗(yàn)角度分析,「當(dāng)前頁(yè)打開」略勝一籌的主要原因有以下兩個(gè):

  • 尊重用戶的決定。當(dāng)前頁(yè)打開,將更多選擇機(jī)會(huì)留給用戶(鼠標(biāo)中鍵、按住ctrl點(diǎn)擊鏈接或者可以右鍵新窗口打開),一個(gè)具有良好用戶體驗(yàn)的產(chǎn)品,在用戶做操作的時(shí)候,總是能讓他們按自己的意志做出決定。網(wǎng)站對(duì)每個(gè)鏈接強(qiáng)制打開新頁(yè)面則剝奪了用戶的選擇權(quán),因?yàn)椴煌娜擞胁煌臑g覽習(xí)慣和使用需求。
  • 體驗(yàn)一致。保持一致體驗(yàn)的設(shè)計(jì)才能讓用戶產(chǎn)生信任感與安全感。當(dāng)用戶在操作界面元素的時(shí)候,可以順暢的知道、理解,并且能預(yù)料到將會(huì)發(fā)生什么,不會(huì)被分神,也不會(huì)被打斷。任何違反這個(gè)原則的設(shè)計(jì)都將會(huì)演變成一種「以設(shè)計(jì)方意志為導(dǎo)向」的設(shè)計(jì),而不是「以用戶為中心」的設(shè)計(jì)。

小結(jié)

當(dāng)我們不知道兩種方式如何選擇時(shí),或許「不強(qiáng)制用戶」才是最好的體驗(yàn)。因?yàn)槲覀兠媾R的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對(duì)于打開方式的習(xí)慣也具有多樣性,這個(gè)是設(shè)計(jì)者無(wú)法揣測(cè)和調(diào)查清楚的。

在「兩害取其輕」的情況下,在當(dāng)前窗口打開鏈接,不失為一個(gè)選擇,尊重用戶自己的決定,讓用戶對(duì)交互界面自主可控。

三、彈出框

彈出框(彈層)又叫模態(tài)對(duì)話框,是指在用戶想要對(duì)當(dāng)前對(duì)話框以外的應(yīng)用程序或內(nèi)容進(jìn)行操作時(shí)的提示方式。它一般覆蓋在整體頁(yè)面之上,避免了頁(yè)面跳轉(zhuǎn)。

彈出框通常是為了顯示一個(gè)單獨(dú)的內(nèi)容,在不離開整體頁(yè)面的情況下有一些互動(dòng),提供信息和交互。

如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個(gè)人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會(huì)采用彈出框的交互方式,當(dāng)然前提是在彈出框中編輯的內(nèi)容不是很多,此時(shí)彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶銜接路徑。

如 iconfont 中的新建項(xiàng)目,用戶新增后,頁(yè)面會(huì)直接跳轉(zhuǎn)到新的項(xiàng)目空間。

△ http://www.iconfont.cn

彈出框適用的場(chǎng)景:

  • 內(nèi)容簡(jiǎn)單,沒有復(fù)雜的操作,且具有臨時(shí)性。如:新增一個(gè)收貨地址,進(jìn)行簡(jiǎn)要的輸入編輯。
  • 更為詳細(xì)的輔助說明,是對(duì)當(dāng)前內(nèi)容的快速擴(kuò)展。如:縮略圖,點(diǎn)擊放大查看。

因此,彈出框可以較好的實(shí)現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶的主路徑,同時(shí)作為頁(yè)面承載元素和用戶操作的補(bǔ)充,起到承前啟后的作用。

總結(jié)

本文結(jié)合這三種鏈接打開方式的頁(yè)面交互關(guān)系,進(jìn)行適用場(chǎng)景舉例,并總結(jié)每種方式的優(yōu)缺點(diǎn),方便在設(shè)計(jì)中更好的根據(jù)不同的場(chǎng)景選擇合適的頁(yè)面打開方式。

當(dāng)然,以上總結(jié)也是基于我個(gè)人的理解與經(jīng)驗(yàn),沒有統(tǒng)一的用法和標(biāo)準(zhǔn),在具體設(shè)計(jì)實(shí)踐中,仍要靠設(shè)計(jì)者的直覺和經(jīng)驗(yàn)來(lái)進(jìn)行綜合考量與判斷。

作為體驗(yàn)設(shè)計(jì)師,如何規(guī)劃用戶瀏覽路徑,是個(gè)需要嚴(yán)肅對(duì)待的命題。沒有絕對(duì)的好與壞,但一定要結(jié)合產(chǎn)品類型、場(chǎng)景、目標(biāo)用戶等進(jìn)行具體問題具體分析。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

6個(gè)小技巧,讓你的視覺層次“蹭蹭蹭”提升!

用心設(shè)計(jì)

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

在設(shè)計(jì)環(huán)節(jié)中,對(duì)于視覺次序的營(yíng)造是每個(gè)設(shè)計(jì)師所必須精通的,視覺次序也可以理解為視覺層次,它是設(shè)計(jì)中的必然,無(wú)論是海報(bào)設(shè)計(jì)還是頁(yè)面設(shè)計(jì),從整體來(lái)看總會(huì)有強(qiáng)弱、主次之分,因?yàn)橛辛艘曈X上的變化,才使得整體更富有層次感。從大體來(lái)說:當(dāng)用戶在瀏覽信息很多的網(wǎng)頁(yè)時(shí),作為設(shè)計(jì)師要做到,即使用戶只是簡(jiǎn)單的瀏覽,也要有能在用戶腦海中形成記憶的視覺元素,而這些元素就是視覺中的主,而當(dāng)用戶仔細(xì)閱讀時(shí)才能記憶到的元素才是視覺上的次。從局部來(lái)說,要能在視覺上形成先后順序。這期的內(nèi)容就是設(shè)計(jì)中體現(xiàn)視覺次序手法有哪些?這些也是打破版式的常用手法。

一、大小對(duì)比

首先,每個(gè)人在瀏覽東西時(shí)都會(huì)有自己固有的習(xí)慣,比如:從上到下、從左到右,這叫常規(guī)方式,而作為設(shè)計(jì)師,不能僅僅局限于常規(guī)形式,完全的常規(guī)帶來(lái)的是設(shè)計(jì)上的枯燥、乏味。要學(xué)會(huì)利用設(shè)計(jì)知識(shí)打造不同的視覺次序,營(yíng)造出更強(qiáng)烈的設(shè)計(jì)感、層次感。

在眾多營(yíng)造視覺次序的手法中,大小對(duì)比幾乎是每個(gè)人都能想到的一種形式,也是很多人認(rèn)為的最簡(jiǎn)單的一種,比如:

通過大小對(duì)比的形式能直觀營(yíng)造出視覺焦點(diǎn),這種形式在設(shè)計(jì)中也是最容易接受的一種。如果左側(cè)放置的也是四塊小的產(chǎn)品,給人的感覺就會(huì)顯得枯燥、乏味,版式太過統(tǒng)一,而正是因?yàn)檫@種放大產(chǎn)品的處理手法,拉開了對(duì)比,才使得版式不顯呆板。這種形式無(wú)論是在文字排版、海報(bào)、頁(yè)面都是很實(shí)用的一種,合成設(shè)計(jì)中的近大遠(yuǎn)小也同樣適用,只是在做對(duì)比效果時(shí)一定要大膽。

二、配色方式

通過改變不同的配色方式,也能在視覺上營(yíng)造出視覺層次的變化,比如我們常見的通過有彩色與無(wú)彩色進(jìn)行區(qū)分的手法:

在原本無(wú)彩色的排列方式中加入有彩色,在視覺上就形成了很強(qiáng)烈的差異化,而正是因?yàn)橛辛藦?qiáng)烈的差異,使得存在差異的部分成為了更容易吸引用戶的區(qū)域,所以就在視覺上形成了先后順序,同時(shí)這種差異的形式也能起到一定打破版式、活躍版式的作用。而在有彩色之間,同樣也能通過差異化形成視覺上的主次,比如:

第一行色塊能最快引起注意的是第二個(gè),通過色彩飽和度的不同,在視覺上形成了很明顯的差異化,進(jìn)一步改變了原本的做從左往右的習(xí)慣性視覺次序。而第二行色塊中最快能引起注意的是紅色,因?yàn)檫@里用到了改變色系的形式進(jìn)行視覺上的次序劃分。之所以在有彩色中也能很好的體現(xiàn)視覺層次最重要的一點(diǎn)是,他們之間形成的差異足夠明顯,而不是似有非有。

三、形態(tài)的不同

營(yíng)造不同的視覺次序最重要的就是在正常人習(xí)慣的固有次序上尋找變化,那么我們同樣可以以形態(tài)上的變化作為差異化的形式,比如:

在固有的形態(tài)中尋找其中可以引起差異化的元素,從視覺感受而言可以分為兩種:第一,改變了原本的習(xí)慣性的閱讀方式,也使得整體主次發(fā)生了變化;第二,原本枯燥、呆板的重復(fù)式的結(jié)構(gòu)上因?yàn)樵匦螒B(tài)的改變,也起到了打破整體版式的作用,使得整體版式變化更多,層次感更強(qiáng)且版式因此也變得更加活躍。形態(tài)上的變化還可以這么體現(xiàn):

雖然都是矩形框,但是線框與色塊形成了很明顯的差異,同樣也可以體現(xiàn)視覺層次,而這種形式在很多頁(yè)面中也很常見:

這也是版式設(shè)計(jì)中很重要的一部分,也就是尋找可以打破版式且營(yíng)造視覺層次的元素,正是因?yàn)檫@些手法,才使得版式更豐富、更富有多變性。

四、空間留白

當(dāng)要求不能改變很多時(shí),在原有的基礎(chǔ)上只需要改變空間位置或者留白方式,也可以營(yíng)造不同的視覺次序,比如:

在不改變其大小、顏色、形態(tài)的前提下,只是改變了空間留白,也能起到改變視覺次序的作用;而在編排或者標(biāo)題設(shè)計(jì)中,通過空間留白的方式拉開層次、次序也很常見:

同樣是重復(fù)的形式,左側(cè)完全沒有給人一種有層次、有次序的感覺,在用戶眼中,這只不過是一團(tuán)信息;而右側(cè)通過改變留白的方式充分的體現(xiàn)出視覺上的層級(jí)關(guān)系,每一個(gè)獨(dú)立存在的標(biāo)題或者欄目之間都應(yīng)該用留白的方式體現(xiàn),這種留白要遵循的原則是:標(biāo)題與文案的留白要小于欄目與欄目之間且大于說明性文字信息之間,只要這樣才能真正意義上的將層次拉開。

五、投影的方式

投影在設(shè)計(jì)環(huán)節(jié)中是很常用的一種手法,通過投影可以體現(xiàn)出前后層次,也能改變視覺次序,比如頁(yè)面設(shè)計(jì)中的:

這里只是在色塊上添加了簡(jiǎn)單的投影效果,原本的視覺次序就瞬間被打破,而這種投影在海報(bào)設(shè)計(jì)中最常用的是打破前后關(guān)系,使得海報(bào)更有層次感:

這種大投影的方式,是很多海報(bào)以及頁(yè)面中常用的手法之一,因?yàn)橛辛送队?,使得畫面整體形成了明顯的層次關(guān)系,而投影對(duì)于用戶來(lái)說也是很容易接受的,比如:按鈕的投影、主體的投影等等,看似很小的改變,往往能給頁(yè)面帶來(lái)很明顯的效果。這種形式也可以理解為形成遮擋關(guān)系,在一些小場(chǎng)景的設(shè)計(jì)中,一樣很實(shí)用:

有了遮擋關(guān)系,就會(huì)形成視覺上的層次,這種看似簡(jiǎn)單的手法,最終所呈現(xiàn)的效果卻是立竿見影的。

六、高斯模糊

拉開視覺次序的另一種手法:模糊,很多人對(duì)于 PS 里的模糊工具并不陌生,而通過將視覺元素模糊化處理,一樣能起到營(yíng)造視覺層次的效果,比如我們常見的電影海報(bào)中:

通過虛實(shí)對(duì)比,使得視覺層次變化更強(qiáng),這也是合成設(shè)計(jì)中常用的手法之一,而在文字設(shè)計(jì)中,一樣可以通過這樣的手法來(lái)拉開視覺次序關(guān)系,比如:

通過模糊字體中某個(gè)筆畫,在視覺上形成了一定的空間關(guān)系,也使得整體層次感更加豐富,這也是很多設(shè)計(jì)師喜歡在作品的最后環(huán)節(jié)加一些飄飛模糊的點(diǎn)狀元素豐富整體的原因:

視覺層次的變化對(duì)于整體而言是不可缺少的一部分,有時(shí)只需要一點(diǎn)點(diǎn)的變化就可以帶來(lái)意想不到的效果。

七、應(yīng)用于版式中

這期所說的很多都屬于細(xì)節(jié)上的變化,但是很多人對(duì)于細(xì)節(jié)并不重視,認(rèn)為不重要,但其實(shí)優(yōu)秀的版式設(shè)計(jì)基本上都是用不同的細(xì)節(jié)處理方式堆砌而成的,這期所說的這些形式用于版式設(shè)計(jì)中也同樣很實(shí)用,如果你的版式太過呆板,可以通過考慮這些方面在適當(dāng)?shù)奈恢眠M(jìn)行打破,打破的意思是:在原本很呆板的基礎(chǔ)上尋找視覺上的層次變化,使得整體版式活躍起來(lái)且富有細(xì)節(jié)感,比如:

這是從一個(gè)頁(yè)面中選取的一個(gè)局部信息,上側(cè)版式給人的感覺毫無(wú)變化,如果頁(yè)面中出現(xiàn)大面積這種形式的版式,會(huì)使得整體單調(diào)、枯燥,很容易形成視覺疲勞。而下側(cè)區(qū)域則是為了避免這些,在形式上改變了許多:第一,顏色上有輕微的變化,這樣做的目的是區(qū)分開每個(gè)欄目。第二,形式上第三個(gè)模塊做了很明顯的層次變化,顏色明顯加深了,且投影效果加重,而且按鈕區(qū)域也用色塊的形式代替邊框,使得整體層次感更強(qiáng)且有保持在一個(gè)很協(xié)調(diào)的范圍內(nèi)。這里用到的手法,正是這期所說的。

同樣我們也可以在網(wǎng)上找一些版式感很強(qiáng)的頁(yè)面進(jìn)行分析,去理解這些手法是如何在版式中體現(xiàn)的,比如一些官網(wǎng)的設(shè)計(jì),看似很簡(jiǎn)潔、元素很少,而往往這種頁(yè)面對(duì)于版式的要求更高,因?yàn)橐脴O少的元素體現(xiàn)其版式變化、層次。

總結(jié)

視覺層次感是提升整體設(shè)計(jì)感很重要的一種形式,如何在固有的視覺基礎(chǔ)上打破束縛,在形式上形成變化,對(duì)于每個(gè)設(shè)計(jì)師而言都是至關(guān)重要的;而很多設(shè)計(jì)手法都存在著共通性,只要學(xué)會(huì)靈活運(yùn)用,那么我們的設(shè)計(jì)作品就不會(huì)顯得平庸無(wú)常。當(dāng)然這期所說的也并非全部,這些只是很常用的一些形式。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

想創(chuàng)造一套自己的視覺語(yǔ)言,要從哪幾個(gè)方面入手?

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

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

我們使用語(yǔ)言與人進(jìn)行溝通,傳達(dá)信息,記錄內(nèi)容,而視覺語(yǔ)言也發(fā)揮著類似的作用。從色彩到排版樣式,從插畫到品牌構(gòu)建,視覺語(yǔ)言同樣承擔(dān)著類似的功能,它和傳統(tǒng)的語(yǔ)言有著類似的特征包括結(jié)構(gòu)化和溝通功能。

所以,視覺語(yǔ)言也是規(guī)范化的,標(biāo)準(zhǔn)化的,它足夠自由,也保有約束。視覺語(yǔ)言本身也可以具備足夠明顯清晰的特色,就像每個(gè)人的表達(dá)方式和口音一樣,這使得視覺語(yǔ)言本身可以強(qiáng)化和凸顯品牌特色。那么想要?jiǎng)?chuàng)建一套屬于自己的視覺語(yǔ)言,可以從下面的9個(gè)方面入手。

1. 構(gòu)建品牌獨(dú)有的配色方案

我們總是說,色彩和形體是用戶第一眼最快注意到的東西。配色方案的視覺表現(xiàn)力最強(qiáng),這使得配色方案成為視覺語(yǔ)言中辨識(shí)度最高的組成部分。配色方案本身需要具備一定的獨(dú)特性,確保它整體上能夠讓人記住,區(qū)別于其他,品牌不至于在繁雜的互聯(lián)網(wǎng)世界中迷失,也不會(huì)讓用戶無(wú)法記住。

另一方面,配色方案應(yīng)該具備良好的兼容性,能夠調(diào)和品牌不同模塊,比如網(wǎng)站、APP、社交媒體、包裝、名片等。

配色也應(yīng)該體現(xiàn)品牌的價(jià)值。想想麥當(dāng)勞的配色吧,黃色和紅色為主。這兩種色彩本身能夠觸發(fā)幸福(黃色)和饑餓(紅色)的感覺,兩者搭配加上經(jīng)典的金拱門的LOGO,麥當(dāng)勞的視覺識(shí)別度可以說是相當(dāng)高的。此外,麥當(dāng)勞旗下的許多其他的設(shè)計(jì),也是在這個(gè)配色的基礎(chǔ)上構(gòu)建的。

2. 構(gòu)建排版的層次結(jié)構(gòu)

排版層次結(jié)構(gòu)的構(gòu)建,和選擇字體同樣重要。不同的排版層次,能夠給人截然不同的感受,清晰還是粗糙,雅致還是有趣。在排版的層次結(jié)構(gòu)上,并不存在對(duì)錯(cuò),更多需要考慮的是合適不合適,風(fēng)格和感受上的一致性。

當(dāng)然,不同層級(jí)的信息,在排版層級(jí)上還是要有比較清晰的體現(xiàn)的,大小疏密對(duì)比度不足,會(huì)難以讓用戶感知到內(nèi)容之間的重要性的差異。

以 Airbnb 為例,網(wǎng)站的排版有著清晰的層次結(jié)構(gòu),字體的大小、字重、間距和配色都已經(jīng)標(biāo)準(zhǔn)化了。相應(yīng)的,給人的體驗(yàn)也始終保持著應(yīng)有的一貫性。

3. 建立柵格來(lái)規(guī)范內(nèi)容之間的空間關(guān)系

視覺元素之間的位置關(guān)系,和它們本身的設(shè)計(jì)是同等重要的。如果你希望整個(gè)設(shè)計(jì)在細(xì)節(jié)上是清晰明確的,那么柵格會(huì)給你想要的。

FreeCodeCamp 對(duì)此有很明確的描述:

柵格賦予了UI界面元素以模塊化的清晰結(jié)構(gòu),這使得整個(gè)設(shè)計(jì)團(tuán)隊(duì)能在此基礎(chǔ)上更好地合作。這使得產(chǎn)品能夠快速清晰地輸出到不同的平臺(tái)上。如果你是基于某個(gè)想法來(lái)構(gòu)建概念設(shè)計(jì),那么這種方法更加實(shí)用有效。

簡(jiǎn)而言之,柵格讓視覺呈現(xiàn)的復(fù)雜度降低了。

4. 創(chuàng)建組件庫(kù)

從按鈕、圖標(biāo)再到卡片,你應(yīng)當(dāng)創(chuàng)建出一整套可用的、風(fēng)格一致的UI組件庫(kù)。

同樣功能的控件,在頁(yè)面不同的地方、或者不同的頁(yè)面上有著截然不同的風(fēng)格,是讓人迷惑而糟心的。一個(gè)好的組件庫(kù),應(yīng)當(dāng)包含全部常用的UI組件,以及針對(duì) iOS 和 Android 平臺(tái)所適配之后的UI組件。雖然構(gòu)建組件庫(kù)本身的工作量并不小,但是在完成之后,能讓后續(xù)的工作事半功倍。

5. 強(qiáng)調(diào)圖片的風(fēng)格和特征

在諸多圖形化的元素當(dāng)中,圖片和插畫是視覺性最突出的元素,這也是整個(gè)視覺語(yǔ)言當(dāng)中最重要的因素之一,因?yàn)樗鼜哪撤N意義上是和品牌關(guān)系最緊密的素材。

構(gòu)成視覺語(yǔ)言涉及到圖片素材的方方面面,構(gòu)圖,色彩,濾鏡,甚至相關(guān)動(dòng)效的細(xì)節(jié)。

下面是 Smashmallow 中的網(wǎng)頁(yè)設(shè)計(jì),即使它們并不是同期設(shè)計(jì)也不是服務(wù)于相同的功能,但是很明顯插畫所采用的視覺風(fēng)格是一致的,并且每幅插畫當(dāng)中都使用了共同的元素:熱氣球。這一元素和品牌本身是有著緊密關(guān)聯(lián)的,而用戶也可以從這些插畫圖片的內(nèi)容,迅速意識(shí)到品牌本身的一些概念。

6. 為動(dòng)效設(shè)定規(guī)則

動(dòng)畫效果同樣是要遵循一些規(guī)則的。是快速移動(dòng)還是慢速移動(dòng),是懸停觸發(fā)還是自動(dòng)運(yùn)行?這些動(dòng)效的運(yùn)動(dòng)規(guī)則其實(shí)是有著明顯的視覺識(shí)別度的,就像日漫和美漫在視覺和運(yùn)動(dòng)規(guī)則上存在差別一樣。

就像下面這個(gè)來(lái)自Dribbble 的動(dòng)效,它大體上做著勻速的圓周運(yùn)動(dòng),速度適中,其中有些元素并沒有完全按照?qǐng)A周運(yùn)動(dòng)。那么想想看,是否所有的做圓周運(yùn)動(dòng)的物體都和它一樣呢?它們是否會(huì)帶來(lái)不一樣的視覺觀感呢?

7. 讓視覺和文本內(nèi)容匹配起來(lái)

視覺語(yǔ)言并不是只涉及到視覺元素,文本并不是與之割裂的,在設(shè)計(jì)的時(shí)候,兩者需要合理地配合,在體驗(yàn)上達(dá)成一致,傳達(dá)一致的信息。

在下面的 Steffany 這個(gè)網(wǎng)站當(dāng)中,整體設(shè)計(jì)呈現(xiàn)出非常明顯的女性化的特征,文本內(nèi)容在表達(dá)方式和調(diào)性上和整體的視覺語(yǔ)言保持著一致,并沒有出現(xiàn)兩者沖突或者競(jìng)爭(zhēng)的狀況。

8. 可信且可靠

視覺語(yǔ)言只有在用戶接納的情況下,才會(huì)地發(fā)揮作用,它要給人可靠的感覺。所以,整個(gè)視覺語(yǔ)言需要和你的品牌定位、氣質(zhì)表里合一,而不能讓設(shè)計(jì)和產(chǎn)品、企業(yè)的氣質(zhì)割裂開來(lái)。

你能想象沒有主角的芝麻街會(huì)是怎樣的一種氣場(chǎng)么?

整個(gè)品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來(lái)的,每一個(gè)細(xì)節(jié)的設(shè)計(jì)都是圍繞著這些角色來(lái)創(chuàng)建的。注意網(wǎng)站中角色和其他視覺元素之間的映射關(guān)系,它們讓用戶清晰地感知到角色和整體設(shè)計(jì)之間的關(guān)系是表里如一的,這使得整個(gè)網(wǎng)站的設(shè)計(jì)更容易為用戶所接受,視覺語(yǔ)言在此發(fā)揮了作用。

9. 落實(shí)到具體標(biāo)準(zhǔn)文檔當(dāng)中

整個(gè)視覺語(yǔ)言在構(gòu)建起來(lái)之后,需要保持各方面的一致性,在具體設(shè)計(jì)的時(shí)候,則得有一份詳實(shí)具體的設(shè)計(jì)文檔供整個(gè)設(shè)計(jì)團(tuán)隊(duì)和利益相關(guān)人員,作為參考。所以,完成整個(gè)設(shè)計(jì)之后,將整個(gè)視覺語(yǔ)言相關(guān)的內(nèi)容和素材制作成設(shè)計(jì)風(fēng)格指南,和整個(gè)品牌的設(shè)計(jì)規(guī)范統(tǒng)一到一起。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)。

埃森哲設(shè)計(jì)思維成就價(jià)值創(chuàng)新:從“外在美”到“內(nèi)在美”

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

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

領(lǐng)先企業(yè)已經(jīng)認(rèn)識(shí)到,設(shè)計(jì)不僅僅停留在產(chǎn)品的 “外在美”,而應(yīng)聚焦在更具商業(yè)價(jià)值的“內(nèi)在美”。那么,如何實(shí)現(xiàn)通過“內(nèi)在美”創(chuàng)造價(jià)值呢?答案就在設(shè)計(jì)思維。

在數(shù)字化變革時(shí)代,更好地理解和分析數(shù)字消費(fèi)者成為每個(gè)企業(yè)的核心要?jiǎng)?wù)。同時(shí),如何將分析結(jié)果轉(zhuǎn)化為創(chuàng)新的產(chǎn)品和服務(wù)——更是為決策者提出了新的挑戰(zhàn)?!霸O(shè)計(jì)思維”作為一套完整的“以用戶為中心”的方法論和工具包,為企業(yè)重塑“客戶價(jià)值”、實(shí)現(xiàn)服務(wù)創(chuàng)新,提供了切實(shí)的方法指引,而這一切的終極目標(biāo)是成就企業(yè)價(jià)值。

 

1、什么是設(shè)計(jì)思維?

簡(jiǎn)單來(lái)說,設(shè)計(jì)思維來(lái)自“設(shè)計(jì)師思維”,是一套基于“以用戶為中心”的創(chuàng)新方法論。

在數(shù)字時(shí)代,消費(fèi)者的使用動(dòng)機(jī)和行為模式更復(fù)雜多樣,企業(yè)競(jìng)爭(zhēng)環(huán)境也更加復(fù)雜多變。對(duì)于決策者而言,客戶體驗(yàn)、場(chǎng)景、觸點(diǎn)、旅程優(yōu)化等詞匯已經(jīng)不再新鮮。

擺在企業(yè)戰(zhàn)略制定者們面前的問題是,如何以一種全局視角去理解客戶,并讓組織運(yùn)作回歸“創(chuàng)造客戶價(jià)值”,不斷創(chuàng)新。埃森哲《2017年技術(shù)展望》通過針對(duì)全球企業(yè)領(lǐng)袖的一項(xiàng)調(diào)研發(fā)現(xiàn),79%的受訪者認(rèn)為,組織進(jìn)化的目標(biāo)就是——更好地研究消費(fèi)者使用行為和動(dòng)機(jī),并提供行業(yè)領(lǐng)先的客戶體驗(yàn)。

與此同時(shí),面對(duì)產(chǎn)品服務(wù)創(chuàng)新面臨的內(nèi)外部不確定性,企業(yè)決策者往往陷入兩難困境:即一方面,鼓勵(lì)組織內(nèi)部大膽試錯(cuò)、大膽創(chuàng)新;另一方面,又希望創(chuàng)新過程管理有序,并能量化創(chuàng)新結(jié)果。

于是諸多企業(yè)領(lǐng)導(dǎo)者重新思考創(chuàng)新模式,并在設(shè)計(jì)師們那里找到了創(chuàng)新靈感。

企業(yè)進(jìn)一步把設(shè)計(jì)師的工作模式抽象提煉出來(lái),逐步形成了設(shè)計(jì)思維——這套結(jié)構(gòu)化地理解消費(fèi)者習(xí)慣、行為、喜好和需求,并產(chǎn)生設(shè)計(jì)機(jī)會(huì)的方法論,希望從中找到在數(shù)字時(shí)代突圍的機(jī)會(huì)。

比起科學(xué)研究人員或者銷售人員,“設(shè)計(jì)師”面臨的問題、合作對(duì)象和產(chǎn)出方式有不同特點(diǎn),甚至更加復(fù)雜。不論什么類型的產(chǎn)品,設(shè)計(jì)師的思考模式往往是,從不斷變化的用戶或者市場(chǎng)需要開始,兼顧生產(chǎn)水平和工藝限制,以可執(zhí)行的產(chǎn)品方案結(jié)束。設(shè)計(jì)過程通常都會(huì)融入反復(fù)的內(nèi)部討論、看似混亂的草圖、無(wú)情的推翻和修改和某個(gè)必要的“靈感爆發(fā)”時(shí)刻。

創(chuàng)新思維本身也是在不斷迭代,我們姑且將其定義為1.0、2.0和3.0版本(見圖一)。

 

2、當(dāng)設(shè)計(jì)思維遇到傳統(tǒng)企業(yè)

對(duì)于傳統(tǒng)企業(yè)而言,創(chuàng)新更是當(dāng)務(wù)之急。而設(shè)計(jì)思維的成功運(yùn)用,無(wú)疑能夠?yàn)閭鹘y(tǒng)企業(yè)插上創(chuàng)新的翅膀。

《哈佛商業(yè)評(píng)論》就曾以百事公司為例,分析這家傳統(tǒng)快消業(yè)巨頭,如何通過設(shè)立首席設(shè)計(jì)官,將設(shè)計(jì)思維融入公司文化,并在做任何重要決定時(shí)都要考慮設(shè)計(jì)的因素,完成從新產(chǎn)品、包裝、陳列到品牌體驗(yàn)的成功創(chuàng)新。隨著諸多傳統(tǒng)企業(yè)將創(chuàng)新思維應(yīng)用在各自的創(chuàng)新領(lǐng)域,“設(shè)計(jì)思維”已經(jīng)在過去的十幾年,從產(chǎn)品規(guī)劃方法,發(fā)展成為了一套系統(tǒng)化的創(chuàng)新方法論。

在新的語(yǔ)境下,設(shè)計(jì)思維已經(jīng)發(fā)展成為一系列“以用戶為中心”的工具和方法集合,這里既包含產(chǎn)品設(shè)計(jì)模式,也包含組織協(xié)作模式;不僅從內(nèi)涵上,在外延上,這種思維方式也從產(chǎn)品優(yōu)化,進(jìn)一步拓展到服務(wù)重構(gòu)、流程設(shè)計(jì),乃至實(shí)現(xiàn)突破性的商業(yè)模式創(chuàng)新。

設(shè)計(jì)思維3.0作為系統(tǒng)化的創(chuàng)新方法體系(見圖二)可以看做以下三項(xiàng)模式及其工具方法的合集:

  1. 以用戶需求導(dǎo)向的分析模式:倡導(dǎo)從市場(chǎng)和消費(fèi)者的需求中挖掘尚未被滿足的服務(wù)機(jī)會(huì),通過調(diào)研真實(shí)用戶獲得設(shè)計(jì)洞察,尋找彌補(bǔ)需求斷層的機(jī)會(huì);
  2. 創(chuàng)新式的組織內(nèi)協(xié)作模式:設(shè)計(jì)過程應(yīng)由跨團(tuán)隊(duì)共同碰撞、討論完成;過程中采取共創(chuàng)(Co-creation)模式,鼓勵(lì)引入專家用戶直接參與設(shè)計(jì)。
  3. 產(chǎn)品化的問題解決模式:設(shè)計(jì)過程的實(shí)質(zhì)是解決問題,而交付的結(jié)果應(yīng)是可不斷迭代的產(chǎn)品。

 

3、像設(shè)計(jì)師那樣工作

要實(shí)現(xiàn)“設(shè)計(jì)思維”:

第一步需要轉(zhuǎn)換思考角度,理解分析“用戶是誰(shuí)”、“用戶想要什么”,發(fā)現(xiàn)有價(jià)值的設(shè)計(jì)機(jī)會(huì)在哪里;

第二步結(jié)合技術(shù)的可實(shí)現(xiàn)性,篩選可以被技術(shù)解決的機(jī)會(huì),并拼搭出未來(lái)的產(chǎn)品藍(lán)圖;

第三步基于實(shí)現(xiàn)的需求,做出分步規(guī)劃,從框架到細(xì)節(jié)逐步交付。

從產(chǎn)品藍(lán)圖來(lái)看,前面一個(gè)階段屬于需求的匯集;后一個(gè)階段屬于需求的延展(見圖三)。

以下按照三個(gè)步驟,列舉設(shè)計(jì)思維倡導(dǎo)的核心方法:

第一步 理解發(fā)現(xiàn):基于用戶需求的分析模式

成功的產(chǎn)品始于對(duì)用戶需求的發(fā)現(xiàn)和理解(見圖四)。

顛覆了酒店住宿行業(yè)的Airbnb在創(chuàng)立初期,新用戶和預(yù)定量增長(zhǎng)停滯不前,創(chuàng)始人之一同時(shí)也是設(shè)計(jì)師背景的布賴恩·切斯科(Brian Chesky)通過深入對(duì)種子用戶的理解,發(fā)現(xiàn)這些嘗試租賃共享房屋的用戶最為關(guān)心房源狀態(tài)和特色。

基于這一認(rèn)知,切斯科和創(chuàng)始團(tuán)隊(duì)做出了可能是Airbnb初創(chuàng)期最重要的決定,將最后的預(yù)算用于租賃專業(yè)攝影設(shè)備,并按照用戶關(guān)注的維度去重新拍攝房源照片,從色彩、角度和細(xì)節(jié)等方面,去強(qiáng)化共享房屋和酒店的差異,最終這批照片上線后為Airbnb帶來(lái)了100%的預(yù)定量增長(zhǎng)。而Airbnb更強(qiáng)化了圖片優(yōu)先的整體策略,時(shí)刻關(guān)注用戶體驗(yàn),成為這家估值超過300億美元的共享經(jīng)濟(jì)巨頭持續(xù)增長(zhǎng)的基石之一。

設(shè)計(jì)思維強(qiáng)調(diào)把消費(fèi)者當(dāng)做立體的“人”來(lái)看,了解“人”的習(xí)慣經(jīng)驗(yàn)如何對(duì)其購(gòu)買、使用產(chǎn)品產(chǎn)生影響,分析其在服務(wù)各階段的感受是什么,情緒如何變化。那么,如何了解如此復(fù)雜的“人”呢?

設(shè)計(jì)師們從心理學(xué)和人類學(xué)家那里借鑒了一些常用的方法,如采取實(shí)地觀察、跟蹤和訪談等方式,記錄用戶行為的“人種志”研究;又比如場(chǎng)景分析,提倡對(duì)產(chǎn)品的使用環(huán)境(自然與社會(huì)環(huán)境)進(jìn)行記錄和分析。

 

第二步 藍(lán)圖定義:創(chuàng)新式的組織內(nèi)協(xié)作模式

面對(duì)數(shù)字時(shí)代消費(fèi)者不斷變化的需求,面對(duì)數(shù)字化觸點(diǎn)大爆炸的現(xiàn)狀,在規(guī)劃設(shè)計(jì)的初始階段,企業(yè)迫切需要對(duì)用戶場(chǎng)景進(jìn)行梳理,采取全局視角去發(fā)現(xiàn)待滿足的創(chuàng)新機(jī)會(huì)點(diǎn)(見圖五)。

從組織內(nèi)部看,也需要更為有效的溝通和協(xié)作方式。設(shè)計(jì)思維倡導(dǎo)通過系統(tǒng)化的方式去尋找這些創(chuàng)新機(jī)會(huì),其核心思想是:對(duì)全局信息的可視化表達(dá),以及跨領(lǐng)域的相互激發(fā)。

設(shè)計(jì)思維鼓勵(lì)在團(tuán)隊(duì)協(xié)作中使用創(chuàng)新手法,如頭腦風(fēng)暴進(jìn)行窮舉(Brainstorming)、可視化的方式表現(xiàn)、角色轉(zhuǎn)換(Body Storming)以體會(huì)用戶感受等,甚至在藍(lán)圖規(guī)劃過程中直接邀請(qǐng)客戶或者最終用戶參與,以共同設(shè)計(jì)的方式充分交流和激發(fā),目的是打破團(tuán)隊(duì)壁壘,共同以用戶視角進(jìn)行問題定義和討論,形成統(tǒng)一認(rèn)識(shí)。

埃森哲在幫助某國(guó)有銀行進(jìn)行數(shù)字化體驗(yàn)再造項(xiàng)目時(shí),發(fā)現(xiàn)由傳統(tǒng)的業(yè)務(wù)部門“提出需求”到技術(shù)部門“執(zhí)行需求”的工作模式不僅沒有提升效率,反而由于高昂的溝通成本,減少了各方對(duì)創(chuàng)新的意愿和投入。

在埃森哲的建議下,將傳統(tǒng)的單向需求匯報(bào)模式,改為周期性設(shè)計(jì)創(chuàng)新工作坊。通過系統(tǒng)化的梳理金融類消費(fèi)者的使用習(xí)慣和需求,將未來(lái)藍(lán)圖的規(guī)劃與企業(yè)整體目標(biāo)有機(jī)結(jié)合,找到了適合該企業(yè)的創(chuàng)新設(shè)計(jì)方向。而持續(xù)的跨部門合作,也提前統(tǒng)一了創(chuàng)新方向并確保結(jié)果落地。

 

第三步 迭代交付:產(chǎn)品化的問題解決模式

有一種理解認(rèn)為,設(shè)計(jì)思維中對(duì)于結(jié)果的迭代交付訴求是“提早犯錯(cuò)(Fail Early)”,然而更完整的說法應(yīng)該是“提早評(píng)估”。設(shè)計(jì)思維中使用大量工具從用戶角度描述需求,或者搭建原型,這一過程更多是描繪“產(chǎn)品的中間態(tài)”,即產(chǎn)品概念由抽象到具體,核心目的是更早完成評(píng)估和修正(見圖六)。

通過搭建原型并測(cè)試的方法,不僅限應(yīng)用于手機(jī)或者網(wǎng)站,也包括線下服務(wù)。一個(gè)著名的案例喜達(dá)屋集團(tuán)旗下雅樂軒(Aloft)酒店。

作為面向20-30歲年輕人群的品牌,雅樂軒酒店的設(shè)計(jì)團(tuán)隊(duì)在規(guī)劃階段,就將真實(shí)的設(shè)計(jì)方案制作成3D模型放置在虛擬線上游戲中,以測(cè)試目標(biāo)用戶的反應(yīng),整個(gè)測(cè)試過程持續(xù)9個(gè)月,并包括了多次基于用戶意見的修改。

最終,大量基于“虛擬模型”的測(cè)試結(jié)果,如酒店大堂色彩選擇、屋內(nèi)布局、影音設(shè)備位置等,被有選擇地應(yīng)用在實(shí)際酒店設(shè)計(jì)中?!渡虡I(yè)周刊》評(píng)論喜達(dá)屋這種模型測(cè)試,不論從速度或者成本來(lái)講,都非常有參考價(jià)值。

 

4、如何擴(kuò)大設(shè)計(jì)思維的價(jià)值?

領(lǐng)先的企業(yè)決策者們已經(jīng)認(rèn)識(shí)到,設(shè)計(jì)不僅僅停留在產(chǎn)品的 “外在美”,而應(yīng)該聚焦在更具商業(yè)價(jià)值的“內(nèi)在美”。那么,如何實(shí)現(xiàn)通過“內(nèi)在美”創(chuàng)造價(jià)值呢?答案在于如何利用“設(shè)計(jì)思維”讓內(nèi)部組織和員工重新回到 “客戶價(jià)值” 思維方式上去,并密切協(xié)作。這里有四條建議:

4.1 讓設(shè)計(jì)思維常態(tài)化

首先應(yīng)在新產(chǎn)品設(shè)計(jì)研發(fā)團(tuán)隊(duì)中,將設(shè)計(jì)思維方法常態(tài)化、步驟流程完整化??煽紤]通過設(shè)立標(biāo)桿項(xiàng)目、打造標(biāo)桿產(chǎn)品的形式,完整地應(yīng)用設(shè)計(jì)思維方法,在若干輪反復(fù)應(yīng)用之后找到適合本企業(yè)的流程方法。

同時(shí),借鑒互聯(lián)網(wǎng)企業(yè)的方式,周期性組織一日黑客馬拉松(Hackathon) 類活動(dòng),在組織內(nèi)部擴(kuò)大影響。

4.2 基于用戶需求劃分MVP模式路標(biāo)

MVP即Minimum Viable Product(最小可行產(chǎn)品),是與敏捷產(chǎn)品開發(fā)模式密切相關(guān)的產(chǎn)品交付模式,由埃里克·萊斯(Eric Ries)在《精益創(chuàng)業(yè)》中提出,核心原則是,首先聚焦在滿足用戶單一需求的功能(所謂“最小可行”),之后不斷迭代增加功能,最終形成完整的產(chǎn)品或系統(tǒng)。對(duì)待企業(yè)核心服務(wù)的數(shù)字化提升乃至變革時(shí),MVP是一種行之有效的產(chǎn)品交付理念。

4.3 形成創(chuàng)新機(jī)制

創(chuàng)新并不意味著一味鼓勵(lì)犯錯(cuò),也不意味著無(wú)法量化評(píng)估。

圍繞用戶進(jìn)行產(chǎn)品和服務(wù)優(yōu)化,是一個(gè)循序漸進(jìn)的螺旋式上升過程,這要求對(duì)設(shè)計(jì)結(jié)果的評(píng)判機(jī)制能有效適應(yīng)這種敏捷迭代。如,將銷售結(jié)果導(dǎo)向的KPI要求,拆解為若干可以測(cè)量的用戶行為的KPI。

同時(shí),在定義階段,將這些用戶行為KPI用到產(chǎn)品設(shè)計(jì)的輸入中,聚焦在提升這些用戶KPI上,后續(xù)不斷優(yōu)化提升。在方案設(shè)計(jì)中考慮,如何形成反饋機(jī)制,預(yù)設(shè)用戶行為的KPI和監(jiān)測(cè)方法,在下一輪優(yōu)化中不斷迭代。

4.4 創(chuàng)新需要融合設(shè)計(jì)與技術(shù)

“技術(shù)實(shí)驗(yàn)室”是諸多領(lǐng)先企業(yè)在進(jìn)行研發(fā)領(lǐng)域創(chuàng)新,特別是構(gòu)建前沿領(lǐng)域技術(shù)創(chuàng)新能力時(shí),常??紤]的戰(zhàn)略舉措。同樣,要進(jìn)一步推進(jìn)數(shù)字化領(lǐng)域的客戶導(dǎo)向創(chuàng)新,建立“創(chuàng)新設(shè)計(jì)中心”可以從戰(zhàn)略的高度推進(jìn)“設(shè)計(jì)思維”在數(shù)字化轉(zhuǎn)型中的作用。

ERP領(lǐng)域的巨頭SAP公司也在持續(xù)增加其對(duì)設(shè)計(jì)團(tuán)隊(duì)的投入,在2012年就開始著手組建新的設(shè)計(jì)中心;素以創(chuàng)新和多元化產(chǎn)品著稱的3M公司,在2016年將總部設(shè)計(jì)中心擴(kuò)容了四倍面積,可容納150名設(shè)計(jì)師工作,并在其中進(jìn)行協(xié)作創(chuàng)新、產(chǎn)品展示和客戶洽淡。埃森哲大中華區(qū)也于2016年底,在香港構(gòu)建了“設(shè)計(jì)工作室”,作為分布全球的設(shè)計(jì)網(wǎng)絡(luò)的一環(huán),在這個(gè)超過3700平米的空間中,集中不同專長(zhǎng)的數(shù)字化設(shè)計(jì)能力,與客戶共同創(chuàng)新。

可以預(yù)見,“創(chuàng)新設(shè)計(jì)中心”將會(huì)越來(lái)越多地出現(xiàn),成為從市場(chǎng)端洞察用戶需求、挖掘商業(yè)機(jī)會(huì)的強(qiáng)大雙擎之一。

 

結(jié)語(yǔ)

設(shè)計(jì)思維3.0作為一種全局化的創(chuàng)新方法論,能帶給企業(yè)一種全新視角,即如何圍繞客戶價(jià)值,構(gòu)建可持續(xù)的產(chǎn)品和服務(wù)?

在數(shù)字時(shí)代,企業(yè)需要兩手抓:一方面,能夠從用戶視角分析梳理需求斷層和服務(wù)機(jī)會(huì);從另一個(gè)方面,能夠?yàn)榻M織的協(xié)作方式找到新的模式,以強(qiáng)化效率和有效性。如同設(shè)計(jì)結(jié)果需要漸進(jìn)式上升,工作方法和協(xié)作形式都需要不斷進(jìn)化迭代,才能最終尋找到適合發(fā)展階段的轉(zhuǎn)型切入點(diǎn),支撐企業(yè)數(shù)字化時(shí)代實(shí)現(xiàn)全面創(chuàng)新。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)

 

日歷

鏈接

個(gè)人資料

存檔