如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
設(shè)計師們,經(jīng)常聽到需求方說:「我想要那種很有高級感的設(shè)計」,看到T臺上的超模,你可能會忍不住說:「嘖嘖,這張臉真高級」……
但是,每個人對「高級感」定義不同,它會受到個人審美、教育水平、成長環(huán)境、文化價值等因素影響。那么,這個被人們天天掛在嘴邊兒的「高級感」到底如何定義,標準又是什么呢?
今天就跟大家分享下,我最近的相關(guān)思考。
關(guān)于「高級感」,百度百科上并沒有這個詞條,在一定程度上可以說明,這個詞本身就是很難定義的。
我嘗試著換個思維方式,看看什么是低級?低級意味著:多欲求的、簡單的、盲目的。那么,反過來看「高級感」,大概可以解讀為:克制的、的、特立獨行的。
1. 克制的
說到克制,我想到了德國工業(yè)設(shè)計師 Dieter Rams,他的「設(shè)計十戒」中有提到「好的設(shè)計是盡可能的無設(shè)計」,體現(xiàn)出簡潔、克制的重要性。
比如:無印良品,在「性冷淡風」的背后充滿了對欲望的克制。
產(chǎn)品設(shè)計以更親近自然的棉、麻、羊毛的材質(zhì)配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質(zhì),很舒服的感受。
反而下圖,高飽和度和純度的配色設(shè)計,給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價。
那么,品及時尚圈的設(shè)計,又是怎么考慮呢?
可以看出,他們服裝從簡單利索的剪裁,到高級灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級的感受。
為什么克制的用色,給你高級的感受呢?因為,這樣會削弱色彩對人情緒的影響,反而有治愈的能量,有一種頹廢的性感。
下面這幅畫,是意大利20世紀著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據(jù)他的名字而來)。在他的畫里,所有的色彩都滲入了灰色和白色調(diào),失去了原本或艷麗或凝重的本色,柔和優(yōu)雅,而又統(tǒng)一的混合在一起。用現(xiàn)在的話來說就是:克制、留白、極簡。
目前很多服裝設(shè)計、室內(nèi)設(shè)計都在效仿這種配色方式,顯得更有品質(zhì)。
比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級了很多。
以上可以看出,克制的造型及用色、適當?shù)牧舭?、極簡的畫風,反而顯得更加自信,從而給人傳遞出高級的視覺感受。
2. 的
人們常說,細節(jié)決定成敗。其實,讓人們感到「高級」的事物,都有一個共性:對細節(jié)追求。
比如,前段時間看快樂大本營,里面對《延禧攻略》中演員服飾的刺繡細節(jié)進行講解,當時何炅用「很高級」夸贊。
我就在想,是什么觸發(fā)了他評價「高級」。
后來發(fā)現(xiàn),是因為劇中人物服裝上的刺繡全是純手工的。針法多樣,包括復(fù)雜的手推繡、打籽繡、磐金繡、珠繡……而且,團隊都是曾經(jīng)參加過故宮文物翻修的匠人們。
為了無條件的貼近歷史,這一件皇上的衣服花費了8個工人半年的時間進行制作。
因此,讓何炅潛意識里感到「很高級」的,正是因為僅僅為了一部電視劇,在演員服裝上耗費這么大的功夫,這種對細節(jié)的追求。
再拿科技產(chǎn)品舉例,比如:iPhone,由于「對稱設(shè)計」可能是人們能感知到的最原始的美,很多情況下手機受限于內(nèi)部設(shè)計,很難在表面做到對稱。
但是 iPhone 為了遵循「對稱式」設(shè)計,投入非常多的人力去解決(上面),而對比三星Galaxy S6 的設(shè)計(下面),看起來就略顯尷尬。
它們對產(chǎn)品每一個方面都精雕細琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機不僅僅是一款產(chǎn)品,更像是一件藝術(shù)品,同樣給人高級的感覺。
3. 特立獨行的
人類本能習慣于盲目追隨、容易妥協(xié)。因此,獨立思考、特立獨行且自信的人或事物,常給人很感級的感覺。
比如,在網(wǎng)紅臉盛行的今天,隨便逛個街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級。比如,柳巖就評價過自己屬于「低級臉」。
為什么超模那樣高冷的臉蛋會給人一種高級感呢?
因為,她們有特色的五官長相,意味著不向大眾主流審美屈服和妥協(xié),而且非常自信。同時,高級感也意味著,在 TA身上看不到欲望、諂媚和討好。
再比如,日本的服裝設(shè)計大師——山本耀司。在人們都追求時尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時候,他卻以反時尚設(shè)計而著稱。
他大膽發(fā)展日本傳統(tǒng)服飾文化的精華,具有獨立思考,形成一種反時尚風格。這種與西方主流背道而馳的新著裝理念,不但在時裝界站穩(wěn)了腳跟,還反過來影響了西方的設(shè)計師。
總的來說,高級感是克制的,它極簡、低調(diào)、且優(yōu)雅;高級感是的,對細節(jié)的完美追求、具有匠心精神;高級感是特立獨行且自信的,不盲目追逐潮流、不討好、不妥協(xié)。
雖然我們認為「克制的」、「的」、「特立獨行的」給人以高級的感受。但是,真的是所有人都能接受嗎?
不可否認,有的人就是覺得花里胡哨的東西很高級,比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。
因此,我就在思考兩個問題:影響審美的因素;大眾對「高級感」的接受度。
1. 影響審美的因素
不管是個人審美、教育水平、成長環(huán)境,還是價值觀,我覺得決定審美的背后,是「經(jīng)濟」這只無形的手。
不知道你有沒有發(fā)現(xiàn)一個規(guī)律,越落后貧窮的國家,卻喜歡艷麗的、繁雜的設(shè)計。
而相反,越發(fā)達的國家,反而更青睞簡約、淡色。
原因是經(jīng)濟落后的國家,人們?nèi)鄙俚氖恰肛S富」,想要的更多色彩,更多花樣。
而經(jīng)濟發(fā)達的地方,人們已經(jīng)擁有足夠多,因此,內(nèi)心中追求更多的是:我需要什么?我是誰?什么對我不重要?
人們對過于爆炸多樣的商品會感到「焦慮」,「害怕」因為選擇的太多,反而想要抽離。
因此,像無印良品這類克制的、做減法的、回歸本質(zhì)的物品,反而受到人們喜愛。
2. 大眾對「高級感」的接受度
這里的「大眾」就先指我們中國大眾吧,他們能接受「高級感」的克制,極簡嗎?
我們從消費時代進行分析,目前日本處于第四消費時代,它的特征就是上面所說的,不再盲目的追求品帶來的滿足感,而是追求除了物質(zhì)以外什么才能讓人變得幸福。
而中國呢?
大多數(shù)人認為,中國正處于第二、第三、第四消費時代共存期。在偏遠的農(nóng)村,處于第二消費時代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費時代,他們的觀念是「個性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費時代,更加崇尚無品牌,休閑傾向,整個社會趨于共享。
但是,我認為,隨著中國經(jīng)濟近幾年迅猛發(fā)展,互聯(lián)網(wǎng)的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費觀念及審美水平也在隨之改變。
比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風格都很ins風;同時,越來越多不因為取悅男性,而是突顯獨立女性的打扮。
越來越多的北歐極簡裝修風的流行……
總的來說,大眾的審美水平和消費觀念會受經(jīng)濟的影響,而中國大眾的消費觀念正在往第四消費時代慢慢轉(zhuǎn)變,對真正「高級感」的事物,接受度越來越高。
上面舉了很多傳統(tǒng)行業(yè)案例,其實互聯(lián)網(wǎng)產(chǎn)品設(shè)計中,也在往「高級感」方向走,踐行著「極簡」和「克制」的理念。
比如:年初的谷歌「ALL-White」風。眾所周知,谷歌的設(shè)計師是極簡主義界面的忠實粉絲。
下面是優(yōu)化前后對比,移除大面積的色塊,采用大面積留白,體現(xiàn)現(xiàn)代、簡約的感覺。
移除多彩的圖標,采用極簡的線性表現(xiàn)方式。
再比如,百度的設(shè)計,一年前也在「高級感」的設(shè)計理念上進行深挖和落地。
從以下兩個維度可以看出:克制的配色;的細節(jié)。
1. 克制的配色
拿「簡單搜索」舉例,它是百度的一款搜索APP,以簡潔清爽的視覺體驗,簡單的操作交互,吸引了大量用戶,而且零廣告。
在界面的用色上,非常克制,采用以「黑、白、灰」為主,目的是為了讓用戶聚焦內(nèi)容本身,而不是為了設(shè)計而設(shè)計。
包括 icon 的處理,以純色的線性為主,更加現(xiàn)代、簡約。
2. 的細節(jié)
大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農(nóng)神廟等都應(yīng)用了該比例設(shè)計。
其實,在看似普通的百度搜索首頁,同樣遵循著這個比例,讓有規(guī)則的美,嚴謹?shù)娜谌肫渲小?
包括柵格系統(tǒng)在設(shè)計中運用,這種來源于數(shù)學(xué)的美學(xué),將有助于用戶,更有效和愉悅的閱讀及獲取內(nèi)容。
以上可以看出,不管是傳統(tǒng)行業(yè)還是互聯(lián)網(wǎng)行業(yè),亦或者是未來的人工智能的設(shè)計,都在往「克制」、「」的方向發(fā)展,讓人人都能享用到優(yōu)質(zhì)、高級的設(shè)計。
總的來說,「高級感」意味著對設(shè)計保持克制的、對細節(jié)追求、擁有獨立思考的產(chǎn)物,而且,隨著經(jīng)濟的發(fā)展,人們的審美和接受程度也發(fā)生著改變,追求真正高品質(zhì)的設(shè)計。同時,不僅傳統(tǒng)行業(yè)在踐行「高級感」的設(shè)計,互聯(lián)網(wǎng)的產(chǎn)品設(shè)計也在朝著這個方向發(fā)展。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
Adrian Frutiger 是從過去和未來汲取的靈感而設(shè)計的 Avenir®(avenir在法語里意為「未來」)。Frutiger 在他的設(shè)計中加入了一種有機的人文主義元素,將 Avenir 從早期字體僵硬的幾何風格中解放出來。
2004年,F(xiàn)rutiger 與 Linotype公司字體設(shè)計師小林章先生(Akira Kobayashi)一起復(fù)刻了 Avenir字體家族,解決了其屏幕顯示的問題。它就是 Avenir Next。幾何元素與人文元素的結(jié)合使得 Avenir Next字體的易讀性極高,這使其成為汽車HMI儀表盤和顯示器等快速掃視環(huán)境下最理想的選擇。
Burlingame®字體是一種相對較新的字體,它設(shè)計堅實,外形開放、清晰,易讀性非常高。這款字體體現(xiàn)了人文主義及手工質(zhì)感,它是根據(jù) Monotype 委托開展的汽車用戶界面易讀性研究所得到的結(jié)果而進行的修改,使 Burlingame 成為任何車輛數(shù)字儀表盤的不二選擇。
Burlingame 字體為了滿足汽車顯示器的需求融合了多種特性:平整的切口,銳利的拐角,超橢圓的(super-elliptical)字碗以及寬松的字間距。其簡單的形狀和深三角形切口還有助于確保小尺寸字體的清晰度和易讀性,尤其是在低分辨率屏幕上。
AdrianFrutiger 是世界知名的字體設(shè)計師。他的同名字體設(shè)計獨具特色,而且用途廣泛。Frutiger®字體最初用于機場導(dǎo)視牌,在遠距離及多種角度下閱讀都非常清晰。作為一種經(jīng)典字體,F(xiàn)rutiger 是人文主義無襯線字體的易讀性與具有優(yōu)美幾何線條的早期無襯線字體(Grotesque Sans)的結(jié)合。
Frutiger 因其現(xiàn)代、溫暖的外觀被許多公司和政府采用。這種字體的開放性使其非常醒目,其獨特的字形避免了與其他字體相互混淆。
Tipperary?是一種單線的人文主義無襯線體,具有清晰、開放的字形。其簡潔的字符十分易于閱讀,也非常適合數(shù)字UI 顯示。為了制作這款字體,許多經(jīng)典字體設(shè)計被重新詮釋、組合。于是就有了一款在現(xiàn)代顯示屏技術(shù)受限的范圍內(nèi)仍然表現(xiàn)出色的字體,保留了原有設(shè)計的比例和形式,使其成為印刷業(yè)的字體。
Tipperary 字形的拐角近似幾何形狀的方形,是快速掃視環(huán)境下(如汽車儀表,顯示器和界面)的最佳字體之一。
Daytona?是由 Monotype公司的 Jim Wasco 遵循易讀性原則而設(shè)計的一款字體。其方正堅實的字符特征遵循的是人文主義的形狀和比例。Daytona 的字形偏窄,可以最大限度地利用空間而且還可以提高閱讀舒適性。圓潤的拐角、開放的字懷以及簡單的字符形狀使 Daytona 成為 Monotype字體庫中最易讀的字體之一。
Daytona 字體幾乎在所有的屏幕環(huán)境(包括汽車用戶界面、數(shù)字儀表盤以及GPS設(shè)備)中都能表現(xiàn)得非常出色。
Akko?及 AkkoRounded 字體通常會用兩個不太可能放到一起的詞來描述——「工業(yè)的」和「精致的」,這其實得益于設(shè)計師小林章先生(Akira Kobayashi)對最初嚴謹?shù)墓I(yè)概念的弱化。Akko 這個名字來源于著名設(shè)計者名字和姓氏的前兩個字母。
Akko 設(shè)計友好且非常現(xiàn)代化,清晰易讀而且又非常時尚。Akko 字形的「裸骨」骨架降低了其他設(shè)計風格中出現(xiàn)的視覺擁擠現(xiàn)象。
Mayberry 最初是為了模仿 Tiresias?字體家族的技術(shù)而設(shè)計的,以便用于機頂盒電視設(shè)備和用戶界面。比起Tiresias,Mayberry 在美學(xué)和功能方面都有顯著的改進。
Mayberry 包含真正的意大利斜體以及多種字重,可以在低分辨率設(shè)備上提供高質(zhì)量的閱讀和最好的可讀性,同時它還具有一系列能夠吸引專業(yè)人士的 OpenType 功能。Mayberry 是一款字寬被輕微壓縮了的人文主義無襯線字體,這樣可以在較窄的文本欄顯示更多的可讀文本。開放的字懷與垂直的應(yīng)力都有助于在低分辨率的情況下保持Mayberry設(shè)計的可讀性。
TradeGothic 字體家族是美國平面設(shè)計作品的主打產(chǎn)品,自1948年由 Jackson Burke 發(fā)布以來一直不斷地被使用。這一設(shè)計在國際上也很受歡迎,而且曾一度被視為 Helvetica ®家族的競爭對手。
2008年的版本名為 TradeGothic Next,這款字體改進并擴展經(jīng)典系列,還將它引入到一個流行的新時代。這種不和諧卻為 Trade Gothic 設(shè)計增添了一點質(zhì)樸的自然主義色彩,這也是許多設(shè)計師回歸的原因之一。
TradeGothic Next 是最清晰的早期無襯線字體類型。該設(shè)計具有開放的字形及寬松的字間距,讓人感覺容易接近,這些都使其在需要掃視的閱讀環(huán)境下表現(xiàn)良好。
Slate 字體家族將出色的功能及視覺的優(yōu)雅融合成一種卓越的交流工具。很少有字體具有這種設(shè)計的美感和力量。
Slate 是 RodMcDonald 的作品,Rod McDonald 是一位屢獲殊榮的字體設(shè)計師和刻字藝術(shù)家。在四十年的職業(yè)生涯中,McDonald 參與了加拿大國家盲人研究所(CNIB)開展的字體易讀性和可讀性研究項目。在那里,McDonald 了解到哪些設(shè)計特征更適合最大限度地提高字符易讀性及文本可讀性。
Slate 是一款風格化的人文主義字體,提供了一種溫暖的視覺體驗。即使在具有挑戰(zhàn)性的技術(shù)環(huán)境中,Slate也能為用戶提供舒適的閱讀環(huán)境。
HendrikWeber 的 Unitext字體設(shè)計清晰、簡潔,是一款適應(yīng)性強、識別效率高的無襯線字體,風格介于怪誕與人文主義之間。
Unitext 深入研究了設(shè)計機構(gòu)對于品牌字體的需求,以及設(shè)計師Hendrik Weber 本人為公司定制字體的經(jīng)驗。由于了解用于品牌推廣的無襯線字體的流行度,還有它們的缺點,Weber 開始著手創(chuàng)作一些可以適應(yīng)不同環(huán)境但又不放棄友好性的字體??勺x性也是一個重要的考慮因素。
Unitext 是一種新型混合風格的字體,它具有現(xiàn)代感及前瞻性的外觀,可讀性高,并且極具未來主義的優(yōu)雅。
完美的易讀性。無與倫比的設(shè)計。
Monotype 的字體創(chuàng)意總監(jiān) Steve Matteson 將這些字體組織到一起來展示一系列可以輕松閱讀,并可以幫助駕駛員在行駛過程中保持注意力的字體樣本。通過為儀表板或HMI 選擇合適的字體,您將能夠確保您的汽車顯示屏清晰易讀,并且擁有觀眾喜愛的無與倫比的設(shè)計。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
設(shè)計行業(yè),無時無刻不在和色彩打交道。配色問題一直是設(shè)計圈恒久不變的熱門話題,網(wǎng)絡(luò)上關(guān)于配色的知識多如牛毛,看的時候都很懂,但是一旦自己獨立做項目時就又原形畢露。究竟應(yīng)該如何去理解配色呢?所謂的配色「配」在整個環(huán)節(jié)中真的是放在第一位的嗎?本期內(nèi)容通過不同層面分析配色中最易被忽略的,即:色,從哪里來的問題,同時也是最重要的一步。很多人之所以怕配色,或者說配不好色的原因是自己一直深處誤區(qū)中而渾然不知,接下來希望大家不要對號入座。
誤區(qū)一:配色的過程在整體之前。也就是常說的先配色,后設(shè)計。
誤區(qū)二:只會配不會選。這是最常見的一種,只會在有基礎(chǔ)色或者主色的前提下配色,而不懂得選一個符合整體的基礎(chǔ)色遠比配色更重要。
誤區(qū)三:被理論所局限。配色的過程是偏感性的,理論雖然沒錯,但是它只是輔助提供一種方向的,而不是完全要依靠理論去配色。
接下來就繼續(xù)今天的主題:色,從哪里來?也就是基礎(chǔ)色應(yīng)該怎么選?
在設(shè)計中,主體也就是畫面中最重要的部分,它可以是產(chǎn)品、模特、抽象圖形等等,基礎(chǔ)色來源最常用的方式就是在主體身上提取,可以是主體中比重較大的顏色,這樣有利于主色與主體形成更強烈的呼應(yīng)關(guān)系,也可以是比重相比較小的顏色,這樣在形成呼應(yīng)關(guān)系的同時,拓展性更強,下面舉個例子:
假如我們在這個人物的基礎(chǔ)上去選背景的基礎(chǔ)色,我們就可以用到這里說到的理論:基礎(chǔ)色來源于主體,那么我們可以有哪幾種選色的形式呢?下面我們繼續(xù)看:
配色形式一:將主體整體比例最大的顏色作為主色,整體在色彩上與主體形成很強烈的呼應(yīng)關(guān)系,這樣做的目的在于整體很和諧、舒服,易于接受,畫面更統(tǒng)一,整體視覺沖擊力偏柔軟一些。下面看另外一種形式:
配色形式二:將主體整體比例較小的顏色作為主色,同樣整體在色彩上也與主體形成了一定的呼應(yīng)關(guān)系,而正是因為主色是主體比重較小的顏色,這也使得畫面整體在于主體形成呼應(yīng)關(guān)系的前提下,也拉開了主體與背景的層次,整體視覺沖擊力增強,畫面統(tǒng)一性減弱,整體性并沒有因為主色的改變而降低。下面嘗試將文字的顏色也稍加改動:
不難發(fā)現(xiàn),無論上面哪種主色的形式,配黃色字都很融合,且都增強了視覺沖擊力。其原因在于畫面整體顏色與主體都形成了呼應(yīng)關(guān)系,使得配色不會給用戶一種很突兀、毫無依據(jù)的感覺。而這種形式的選色在工作中也是用到最多的,比如:
其實,這種通過提取主體色作為配色參考的形式在接受程度上是很高的,通過搭配一些點綴色,整體上也不會給人一種很單調(diào)的視覺感受;利用主體選色的配色方式是將原本有可能茫無頭緒、感性的配色工作,轉(zhuǎn)化為一種可以有所依據(jù)、有所參考的配色技法,同時也能提升一定的工作效率。再舉個例子:
三款牙刷,三種不同的主色方案,但是每一個給人的感覺都很舒服、和諧,呼應(yīng)明確,這就是提取主體色方式的好處。
不管是做海報還是頁面,在最初都要確定一個風格路線,然后圍繞確定好的風格選材、選色、搭配主體等。那么很多情況下,確定風格也就等于間接性的確定了一個選色的區(qū)間,所以結(jié)合風格特征選色也是一種很實用的方式,比如我們要做「狂暑季」風格的專題頁,那么在用色方面就要避免大面積暖色調(diào)用色,而要著重使用冷色調(diào)的顏色,目的很簡單:大面積的暖色會給人一種熱鬧、狂熱、張揚、溫馨的感受,和暑季需要清爽、降溫的感覺不相匹配,所以我們會盡可能采用主色冷色調(diào)的用色形式,搭配一些輔助色、點綴色,比如:
這些都是依據(jù)風格最直觀的選色形式,這樣做的目的是將整體用色盡可能的貼合主題風格,同時再結(jié)合主體選色的形式,將配色的過程盡可能做到有據(jù)可循。風格選色的形式在日常工作中也是很實用的,比如:促銷,我們會用紅色、藍紫色、黃色的用色形式;春節(jié),則是以紅、黃為主;七夕,多以紫色、紅色為主;暑期購,多以藍色、青色、綠色為主。比如:
這些海報的配色形式很大程度上是依據(jù)風格來決定的,這樣的選色方式也不會顯得很突兀,且擴展性相對更高。
做設(shè)計目的是服務(wù)于商業(yè),很多時候我們都要圍繞文案、產(chǎn)品去制定風格、主題,所以選色同樣可以參考文案,從文案中提取關(guān)鍵詞,依據(jù)關(guān)鍵詞同樣也可以提取相對應(yīng)的顏色,比如:
文案在一個畫面中的重要性也是很高的,因為用戶在不看文案的前提下理解設(shè)計畫面速度是相對緩慢的,所以文案結(jié)合畫面的方式能夠大大的提升用戶對整體的理解速度,也就是捕捉信息的速度,將文案與畫面很好的結(jié)合在一起也是設(shè)計師所必備的技能,這樣做的目的在于讓文案與畫面形成視覺上的呼應(yīng),也更利于視覺信息的傳遞。
前面說的大多都是通過顏色找整體的呼應(yīng)關(guān)系,這樣做的目的是讓畫面整體更和諧、整體性更強。而還有一種選色的形式,即以主體顏色的反色作為主色調(diào),也可以理解為:主體比重較大顏色的對比色或間隔色作為主色。比如:
將主色和主體色通過對比色或間隔色的關(guān)系拉開對比,目的是讓主體在整個畫面中的視覺形象更加鮮明,視覺感受更加強烈,但是要注意的是:在選反色時,盡量選用主體色中比重較大顏色的反色,這樣才能起到強烈對比的效果。
再說下點綴色,點綴色的作用很大程度上是豐富畫面整體色感的,它的用色比例只占畫面整體的5%~10%左右,點綴色的選色很多時候是畫面主色的反色,目的是讓畫面整體色感不顯得單調(diào)、缺少變化,同時也有豐富畫面的作用,但是要注意不要大面積的使用,起到點綴、打破的作用即可。
總的來說,其實配圖的過程就是在配色,當一個畫面的主體、風格、文案確定時,我們就可以依據(jù)這些進行選整體色,只有主色確定時才有必要進行下面配色的工作,而不是把配色放在所有工作之前。今天主要說的就是選色的幾種常用方式,選色的過程其實也是在配色,配色合不合理要看整體效果,設(shè)計的整體感也是很重要的,凡事要做到有所依據(jù)。最后還是那句話,配色是感性的,理論是提供思路和方向的,兩者相互結(jié)合才能把配色做的更出彩。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
本篇文章分別從頁面打開方式的類型、當前頁打開&新開頁面、彈出框三方面對頁面鏈接打開方式進行了探討,給大家提出一些意見以供參考。頁面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計的過程中,或多或少都會遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級較多時,如何讓用戶按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗設(shè)計仔細思考與分析的。
近期在所負責的設(shè)計項目中,團隊對鏈接操作的打開方式產(chǎn)生了分歧,借此機會整理了一些案例與資料,就這個問題進行分析探討,也給遇到同樣問題的同行一些參考意見。
網(wǎng)頁中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計中常用的打開方式則主要有以下三種:
1. 當前頁打開
點擊操作鏈接后,在當前的瀏覽器頁面中進行內(nèi)容顯示與操作。
2. 新開頁面
點擊操作鏈接后,在瀏覽器中新開一個獨立的標簽頁面,進行內(nèi)容顯示與操作。
3. 彈出框
點擊操作鏈接后,在當前的瀏覽器頁面中,彈出一個小尺寸的對話框,進行內(nèi)容顯示與操作。
首先來說說最具爭議的新開頁面&當前頁打開。在 HTML語言中,target目標有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當前窗口打開」,下圖是這兩個參數(shù)的屬性描述。
從這兩個參數(shù)的屬性上來看,「當前窗口打開」是系統(tǒng)默認的處理方式。這個打開方式在國外的網(wǎng)站中實現(xiàn)方式比較統(tǒng)一,用戶也形成了一致的習慣,但國內(nèi)的形式則不盡相同,以至于一直頗具爭議,不同類型網(wǎng)站之間、同一網(wǎng)站不同場景之間也沒有一個明確的規(guī)則標準可供大家學(xué)習和參照。
針對這個問題的討論,可以聽到兩種不同的用戶聲音,并且都站在各自的角度闡述其道理。
舉個例子,我們以同類型網(wǎng)站(淘寶和亞馬遜)的打開處理方式進行對比,來看一下用戶習慣、功能場景對鏈接打開方式選擇的影響。
首先,我們確定一致的功能場景:用戶從首頁中根據(jù)各種篩選條件,查找到心儀的商品。來看一下兩個網(wǎng)站的處理方式:
可以看出基本是兩個極端,差異非常明顯,再來看個有意思的現(xiàn)象,亞馬遜中國的商品搜索方式竟然又和淘寶一致了,難道鏈接打開方式的差異竟是中外用戶習慣的差異?
這確實占了很大一部分原因,那么造成這種差異的原因主要有:
那么,淘寶中所有的頁面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當前頁打開。
同一個產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計的原因我認為有:
關(guān)于這兩種打開方式,到底哪種操作更順暢,確實難分高下,就跟「確定和取消哪個在左,哪個在右」是一種性質(zhì)的問題,沒有好壞之分,關(guān)鍵是要看在哪種場景下使用更合適。
新頁面打開適用的場景:
當前頁打開適用的場景:
以上是結(jié)合功能場景進行的選擇側(cè)重,如果就「用戶體驗」一定要分出個高下,我個人還是比較支持默認「當前頁打開」,從體驗角度分析,「當前頁打開」略勝一籌的主要原因有以下兩個:
小結(jié)
當我們不知道兩種方式如何選擇時,或許「不強制用戶」才是最好的體驗。因為我們面臨的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對于打開方式的習慣也具有多樣性,這個是設(shè)計者無法揣測和調(diào)查清楚的。
在「兩害取其輕」的情況下,在當前窗口打開鏈接,不失為一個選擇,尊重用戶自己的決定,讓用戶對交互界面自主可控。
彈出框(彈層)又叫模態(tài)對話框,是指在用戶想要對當前對話框以外的應(yīng)用程序或內(nèi)容進行操作時的提示方式。它一般覆蓋在整體頁面之上,避免了頁面跳轉(zhuǎn)。
彈出框通常是為了顯示一個單獨的內(nèi)容,在不離開整體頁面的情況下有一些互動,提供信息和交互。
如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷,操作思路清晰。
現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會采用彈出框的交互方式,當然前提是在彈出框中編輯的內(nèi)容不是很多,此時彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶銜接路徑。
如 iconfont 中的新建項目,用戶新增后,頁面會直接跳轉(zhuǎn)到新的項目空間。
彈出框適用的場景:
因此,彈出框可以較好的實現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶的主路徑,同時作為頁面承載元素和用戶操作的補充,起到承前啟后的作用。
本文結(jié)合這三種鏈接打開方式的頁面交互關(guān)系,進行適用場景舉例,并總結(jié)每種方式的優(yōu)缺點,方便在設(shè)計中更好的根據(jù)不同的場景選擇合適的頁面打開方式。
當然,以上總結(jié)也是基于我個人的理解與經(jīng)驗,沒有統(tǒng)一的用法和標準,在具體設(shè)計實踐中,仍要靠設(shè)計者的直覺和經(jīng)驗來進行綜合考量與判斷。
作為體驗設(shè)計師,如何規(guī)劃用戶瀏覽路徑,是個需要嚴肅對待的命題。沒有絕對的好與壞,但一定要結(jié)合產(chǎn)品類型、場景、目標用戶等進行具體問題具體分析。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
設(shè)計師們,經(jīng)常聽到需求方說:「我想要那種很有高級感的設(shè)計」,看到T臺上的超模,你可能會忍不住說:「嘖嘖,這張臉真高級」……但是,每個人對「高級感」定義不同,它會受到個人審美、教育水平、成長環(huán)境、文化價值等因素影響。那么,這個被人們天天掛在嘴邊兒的「高級感」到底如何定義,標準又是什么呢?
今天就跟大家分享下,我最近的相關(guān)思考。
關(guān)于「高級感」,百度百科上并沒有這個詞條,在一定程度上可以說明,這個詞本身就是很難定義的。
我嘗試著換個思維方式,看看什么是低級?低級意味著:多欲求的、簡單的、盲目的。那么,反過來看「高級感」,大概可以解讀為:克制的、的、特立獨行的。
1. 克制的
說到克制,我想到了德國工業(yè)設(shè)計師 Dieter Rams,他的「設(shè)計十戒」中有提到「好的設(shè)計是盡可能的無設(shè)計」,體現(xiàn)出簡潔、克制的重要性。
比如:無印良品,在「性冷淡風」的背后充滿了對欲望的克制。
產(chǎn)品設(shè)計以更親近自然的棉、麻、羊毛的材質(zhì)配上木本、黑、白、灰色。不管是從造型,還是從用色上都極度的克制,但是給人高品質(zhì),很舒服的感受。
反而下圖,高飽和度和純度的配色設(shè)計,給人有一種反自然的,人工造的顏色的感覺,顯得服裝比較廉價。
那么,品及時尚圈的設(shè)計,又是怎么考慮呢?
可以看出,他們服裝從簡單利索的剪裁,到高級灰(莫蘭迪色)的配色,正是我們所說的「克制」,給人一種奢華且高級的感受。
為什么克制的用色,給你高級的感受呢?因為,這樣會削弱色彩對人情緒的影響,反而有治愈的能量,有一種頹廢的性感。
下面這幅畫,是意大利20世紀著名的版畫家,油畫家喬治莫蘭迪的(莫蘭迪色也是根據(jù)他的名字而來)。在他的畫里,所有的色彩都滲入了灰色和白色調(diào),失去了原本或艷麗或凝重的本色,柔和優(yōu)雅,而又統(tǒng)一的混合在一起。用現(xiàn)在的話來說就是:克制、留白、極簡。
目前很多服裝設(shè)計、室內(nèi)設(shè)計都在效仿這種配色方式,顯得更有品質(zhì)。
比如,今年熱播的《延禧攻略》,一改以往流量電視劇那種高飽和度,艷麗的配色,猶如一股清流,讓人眼前一亮,感覺把整部劇都帶的高級了很多。
以上可以看出,克制的造型及用色、適當?shù)牧舭?、極簡的畫風,反而顯得更加自信,從而給人傳遞出高級的視覺感受。
2. 的
人們常說,細節(jié)決定成敗。其實,讓人們感到「高級」的事物,都有一個共性:對細節(jié)追求。
比如,前段時間看快樂大本營,里面對《延禧攻略》中演員服飾的刺繡細節(jié)進行講解,當時何炅用「很高級」夸贊。
我就在想,是什么觸發(fā)了他評價「高級」。
后來發(fā)現(xiàn),是因為劇中人物服裝上的刺繡全是純手工的。針法多樣,包括復(fù)雜的手推繡、打籽繡、磐金繡、珠繡……而且,團隊都是曾經(jīng)參加過故宮文物翻修的匠人們。
為了無條件的貼近歷史,這一件皇上的衣服花費了8個工人半年的時間進行制作。
因此,讓何炅潛意識里感到「很高級」的,正是因為僅僅為了一部電視劇,在演員服裝上耗費這么大的功夫,這種對細節(jié)的追求。
再拿科技產(chǎn)品舉例,比如:iPhone,由于「對稱設(shè)計」可能是人們能感知到的最原始的美,很多情況下手機受限于內(nèi)部設(shè)計,很難在表面做到對稱。
但是 iPhone 為了遵循「對稱式」設(shè)計,投入非常多的人力去解決(上面),而對比三星Galaxy S6 的設(shè)計(下面),看起來就略顯尷尬。
它們對產(chǎn)品每一個方面都精雕細琢,盡管用戶不一定能注意到,這種工匠精神,讓人們覺得蘋果手機不僅僅是一款產(chǎn)品,更像是一件藝術(shù)品,同樣給人高級的感覺。
3. 特立獨行的
人類本能習慣于盲目追隨、容易妥協(xié)。因此,獨立思考、特立獨行且自信的人或事物,常給人很感級的感覺。
比如,在網(wǎng)紅臉盛行的今天,隨便逛個街,都充滿了濃濃的玻尿酸和歐式平行大雙眼皮的味道。雖然并不丑,但是總覺得不夠高級。比如,柳巖就評價過自己屬于「低級臉」。
為什么超模那樣高冷的臉蛋會給人一種高級感呢?
因為,她們有特色的五官長相,意味著不向大眾主流審美屈服和妥協(xié),而且非常自信。同時,高級感也意味著,在 TA身上看不到欲望、諂媚和討好。
再比如,日本的服裝設(shè)計大師——山本耀司。在人們都追求時尚和潮流,偏愛女性婀娜的曲線和靚麗的色澤的時候,他卻以反時尚設(shè)計而著稱。
他大膽發(fā)展日本傳統(tǒng)服飾文化的精華,具有獨立思考,形成一種反時尚風格。這種與西方主流背道而馳的新著裝理念,不但在時裝界站穩(wěn)了腳跟,還反過來影響了西方的設(shè)計師。
總的來說,高級感是克制的,它極簡、低調(diào)、且優(yōu)雅;高級感是的,對細節(jié)的完美追求、具有匠心精神;高級感是特立獨行且自信的,不盲目追逐潮流、不討好、不妥協(xié)。
雖然我們認為「克制的」、「的」、「特立獨行的」給人以高級的感受。但是,真的是所有人都能接受嗎?
不可否認,有的人就是覺得花里胡哨的東西很高級,比如:在美甲上鑲一些比吊燈上還大的鉆;穿一雙松糕鞋,鞋底恨不得比自己小腿肚還高。
因此,我就在思考兩個問題:影響審美的因素;大眾對「高級感」的接受度。
1. 影響審美的因素
不管是個人審美、教育水平、成長環(huán)境,還是價值觀,我覺得決定審美的背后,是「經(jīng)濟」這只無形的手。
不知道你有沒有發(fā)現(xiàn)一個規(guī)律,越落后貧窮的國家,卻喜歡艷麗的、繁雜的設(shè)計。
而相反,越發(fā)達的國家,反而更青睞簡約、淡色。
原因是經(jīng)濟落后的國家,人們?nèi)鄙俚氖恰肛S富」,想要的更多色彩,更多花樣。
而經(jīng)濟發(fā)達的地方,人們已經(jīng)擁有足夠多,因此,內(nèi)心中追求更多的是:我需要什么?我是誰?什么對我不重要?
人們對過于爆炸多樣的商品會感到「焦慮」,「害怕」因為選擇的太多,反而想要抽離。
因此,像無印良品這類克制的、做減法的、回歸本質(zhì)的物品,反而受到人們喜愛。
2. 大眾對「高級感」的接受度
這里的「大眾」就先指我們中國大眾吧,他們能接受「高級感」的克制,極簡嗎?
我們從消費時代進行分析,目前日本處于第四消費時代,它的特征就是上面所說的,不再盲目的追求品帶來的滿足感,而是追求除了物質(zhì)以外什么才能讓人變得幸福。
而中國呢?
大多數(shù)人認為,中國正處于第二、第三、第四消費時代共存期。在偏遠的農(nóng)村,處于第二消費時代,他們的觀念是「大的就是好的」,「繁瑣是好的」;三四線城市,處于第三消費時代,他們的觀念是「個性化、品牌化」追求與眾不同,喜歡名牌貨;一二線城市,處于第四消費時代,更加崇尚無品牌,休閑傾向,整個社會趨于共享。
但是,我認為,隨著中國經(jīng)濟近幾年迅猛發(fā)展,互聯(lián)網(wǎng)的快速普及,大家接受信息的程度慢慢趨同,就算非一二線城市,大家的消費觀念及審美水平也在隨之改變。
比如:抖音里,很多四五線城市的小姐姐們,穿衣及化妝風格都很ins風;同時,越來越多不因為取悅男性,而是突顯獨立女性的打扮。
越來越多的北歐極簡裝修風的流行……
總的來說,大眾的審美水平和消費觀念會受經(jīng)濟的影響,而中國大眾的消費觀念正在往第四消費時代慢慢轉(zhuǎn)變,對真正「高級感」的事物,接受度越來越高。
上面舉了很多傳統(tǒng)行業(yè)案例,其實互聯(lián)網(wǎng)產(chǎn)品設(shè)計中,也在往「高級感」方向走,踐行著「極簡」和「克制」的理念。
比如:年初的谷歌「ALL-White」風。眾所周知,谷歌的設(shè)計師是極簡主義界面的忠實粉絲。
下面是優(yōu)化前后對比,移除大面積的色塊,采用大面積留白,體現(xiàn)現(xiàn)代、簡約的感覺。
移除多彩的圖標,采用極簡的線性表現(xiàn)方式。
再比如,百度的設(shè)計,一年前也在「高級感」的設(shè)計理念上進行深挖和落地。
從以下兩個維度可以看出:克制的配色;的細節(jié)。
1. 克制的配色
拿「簡單搜索」舉例,它是百度的一款搜索APP,以簡潔清爽的視覺體驗,簡單的操作交互,吸引了大量用戶,而且零廣告。
在界面的用色上,非常克制,采用以「黑、白、灰」為主,目的是為了讓用戶聚焦內(nèi)容本身,而不是為了設(shè)計而設(shè)計。
包括 icon 的處理,以純色的線性為主,更加現(xiàn)代、簡約。
2. 的細節(jié)
大家都知道,黃金分割是最普遍也是最能引起人美感的。我們所熟知的蒙娜麗莎的臉、雅典的帕特農(nóng)神廟等都應(yīng)用了該比例設(shè)計。
其實,在看似普通的百度搜索首頁,同樣遵循著這個比例,讓有規(guī)則的美,嚴謹?shù)娜谌肫渲小?
包括柵格系統(tǒng)在設(shè)計中運用,這種來源于數(shù)學(xué)的美學(xué),將有助于用戶,更有效和愉悅的閱讀及獲取內(nèi)容。
以上可以看出,不管是傳統(tǒng)行業(yè)還是互聯(lián)網(wǎng)行業(yè),亦或者是未來的人工智能的設(shè)計,都在往「克制」、「」的方向發(fā)展,讓人人都能享用到優(yōu)質(zhì)、高級的設(shè)計。
總的來說,「高級感」意味著對設(shè)計保持克制的、對細節(jié)追求、擁有獨立思考的產(chǎn)物,而且,隨著經(jīng)濟的發(fā)展,人們的審美和接受程度也發(fā)生著改變,追求真正高品質(zhì)的設(shè)計。同時,不僅傳統(tǒng)行業(yè)在踐行「高級感」的設(shè)計,互聯(lián)網(wǎng)的產(chǎn)品設(shè)計也在朝著這個方向發(fā)展。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
現(xiàn)在市面上的汽車大部分都是過時的,沒有吸引力的用戶界面,正因為如此,很多設(shè)計師都在思考未來的汽車用戶界面將會如何改善我們的駕駛體驗。今天這篇譯文,一起來學(xué)習特斯拉和Apple Carplay 是怎么設(shè)計的!
汽車行業(yè)似乎每天都有著新的發(fā)展。很多證據(jù)都表明在接下來的20年里我們將會看到比上個世紀都要劇烈的變革。因此,頂尖的數(shù)字設(shè)計師們應(yīng)該把重點放在對這個行業(yè)的關(guān)注。那么,到底什么才是車輛用戶界面的未來?它能從根本上改變我們和汽車之間的關(guān)系么?
下面是我收集的一些由全世界不同的設(shè)計師設(shè)計的美麗和未來的汽車抬頭顯示器、用戶界面交互、第三方app控制器。這些設(shè)計想法,有一些是真實存在的,有一些還正在發(fā)展中。
它為什么會讓人震驚?
當你想確定你是否已經(jīng)鎖好車,關(guān)上燈,或者把你的車鑰匙交給剛考完駕照的小屁孩的時候,你是否覺得自己是個偏執(zhí)狂?
這個移動app可以讓你在不離開座位的時候檢查這一切,有一個柴油混合動力車?你甚至可以在你吃早餐的時候啟動引擎。直觀的動畫會反饋你這個動作是否已經(jīng)完成。
它為什么會讓人震驚?
這個用戶界面看起來是一個用肌肉記憶和手勢驅(qū)動的通用控制模型,不同數(shù)目的手指可以觸發(fā)不同事件,你可以通過iPad面板,無線鼠標等控制它。你可以通過動作來控制數(shù)值的大小等等。
這個用戶界面去掉了所有需要用戶記憶的小控件和視覺元素,從而你可以使用相同的手勢或者它的變體,來完成多個不同種類的任務(wù)。
你可以在這里查看整個案例研究:A New Car UI
它為什么會讓人震驚?
汽車將會變得更加的智能,為我們的公共場所騰出更多的空間,并且汽車的功能也將變得越來越互相關(guān)聯(lián)起來。隨著這些發(fā)展,數(shù)據(jù)在我們面前將會變得勢不可擋,試想一下不久之前,我們的手機和其它東西一樣還是一個單一功能的設(shè)備。我們在我們看到什么和如何看上有我們的控制權(quán),它應(yīng)該變得更加自然和方便使用。人工智能和機器學(xué)習將會采取直覺控制。這個由Bureau Oberhaeuser制作的原型讓我們提前看到了這一切的到來。
你可以在這里查看整個案例研究:Behance
它為什么會讓人震驚?
當汽車所有的零部件都變成電子系統(tǒng)時,你想拿起扳手就能發(fā)現(xiàn)問題變得越來越不可能了。這個移動app原型試圖用一種你能理解的語言去描述汽車當前的健康狀況,讓你知道你是否有必要在開啟你的海岸線之旅前修一下它。
它為什么會讓人震驚?
當進行輪胎檢查時,這個界面將會告訴你每個輪胎的壓力范圍并且告訴你它們的極限在哪里。這個用戶界面提供了如此重要的反饋,我覺得它應(yīng)該被納入常用標準中去。
它為什么會讓人震驚?
不用說大家都知道司機應(yīng)該保持視線在路上,但是現(xiàn)在的手機導(dǎo)航都需要司機把注意力來回切換在手機屏幕和路面之間,這個叫Hudway的app把你的第二塊屏幕跟擋風玻璃很好的結(jié)合了起來。你面前的那塊擋風玻璃很有可能就是未來的顯示界面。
你可以在這里查看整個案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]
它為什么會讓人震驚?
這個用戶界面對于勇敢的探險家來說非常完美,如果你想快速的知道你周圍有什么,這個用戶界面可以讓你在有限的路線里來一段自發(fā)的旅行。
它為什么會讓人震驚?
每個人都在關(guān)注它的到來,想都不要想,如果你已經(jīng)有了一堆蘋果的產(chǎn)品,你也會在你的汽車上裝上它的。Apple Carplay將會是下一代的第二塊屏幕。
它為什么會讓人震驚?
沒有什么能和發(fā)動引擎點亮儀表,汽車轟鳴猶如巡游樂隊組成的和旋一樣。身邊的一切,聲音和延遲的視覺互動,都給與你感官的反饋。儀表會通過動畫直觀的告訴你,合適講切入下個轉(zhuǎn)彎,油量是否變低,以及胎壓是否過低。
然而,用數(shù)字型號在方方面面代替模擬型號也會開始令人擔憂,因為無法人工手動介入賬款車子,當保險絲熔斷,或者電子儀器故障時,汽車很快會失控。
它為什么會讓人震驚?
當可穿戴設(shè)備成為我們設(shè)備的一部分時,它很明顯會幫助我們的手持設(shè)備分擔掉一部分的操作功能。這個原型很好的說明了它是如何將這一切展示到手腕上來的。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
本篇文章分別從頁面打開方式的類型、當前頁打開&新開頁面、彈出框三方面對頁面鏈接打開方式進行了探討,給大家提出一些意見以供參考。
頁面打開方式作為鏈接產(chǎn)品路徑的基礎(chǔ),在設(shè)計的過程中,或多或少都會遇到選擇的困擾,尤其是產(chǎn)品功能復(fù)雜,層級較多時,如何讓用戶按照自己的意愿清晰的瀏覽信息,保持操作連貫性,是值得體驗設(shè)計仔細思考與分析的。
近期在所負責的設(shè)計項目中,團隊對鏈接操作的打開方式產(chǎn)生了分歧,借此機會整理了一些案例與資料,就這個問題進行分析探討,也給遇到同樣問題的同行一些參考意見。
網(wǎng)頁中可操作的鏈接,主要有按鈕、icon 以及文字鏈接,設(shè)計中常用的打開方式則主要有以下三種:
1. 當前頁打開
點擊操作鏈接后,在當前的瀏覽器頁面中進行內(nèi)容顯示與操作。
2. 新開頁面
點擊操作鏈接后,在瀏覽器中新開一個獨立的標簽頁面,進行內(nèi)容顯示與操作。
3. 彈出框
點擊操作鏈接后,在當前的瀏覽器頁面中,彈出一個小尺寸的對話框,進行內(nèi)容顯示與操作。
首先來說說最具爭議的新開頁面&當前頁打開。在 HTML語言中,target目標有「target=_blank」和「target=_self」兩種屬性,分別代表「新窗口打開」和「當前窗口打開」,下圖是這兩個參數(shù)的屬性描述。
從這兩個參數(shù)的屬性上來看,「當前窗口打開」是系統(tǒng)默認的處理方式。這個打開方式在國外的網(wǎng)站中實現(xiàn)方式比較統(tǒng)一,用戶也形成了一致的習慣,但國內(nèi)的形式則不盡相同,以至于一直頗具爭議,不同類型網(wǎng)站之間、同一網(wǎng)站不同場景之間也沒有一個明確的規(guī)則標準可供大家學(xué)習和參照。
針對這個問題的討論,可以聽到兩種不同的用戶聲音,并且都站在各自的角度闡述其道理。
舉個例子,我們以同類型網(wǎng)站(淘寶和亞馬遜)的打開處理方式進行對比,來看一下用戶習慣、功能場景對鏈接打開方式選擇的影響。
首先,我們確定一致的功能場景:用戶從首頁中根據(jù)各種篩選條件,查找到心儀的商品。來看一下兩個網(wǎng)站的處理方式:
可以看出基本是兩個極端,差異非常明顯,再來看個有意思的現(xiàn)象,亞馬遜中國的商品搜索方式竟然又和淘寶一致了,難道鏈接打開方式的差異竟是中外用戶習慣的差異?
這確實占了很大一部分原因,那么造成這種差異的原因主要有:
那么,淘寶中所有的頁面打開方式都是新開嗎?不是。像「我的收藏」、「已買到的商品」、「購物車」等功能頁面就是當前頁打開。
同一個產(chǎn)品內(nèi)部,如此區(qū)別設(shè)計的原因我認為有:
關(guān)于這兩種打開方式,到底哪種操作更順暢,確實難分高下,就跟「確定和取消哪個在左,哪個在右」是一種性質(zhì)的問題,沒有好壞之分,關(guān)鍵是要看在哪種場景下使用更合適。
新頁面打開適用的場景:
當前頁打開適用的場景:
以上是結(jié)合功能場景進行的選擇側(cè)重,如果就「用戶體驗」一定要分出個高下,我個人還是比較支持默認「當前頁打開」,從體驗角度分析,「當前頁打開」略勝一籌的主要原因有以下兩個:
小結(jié)
當我們不知道兩種方式如何選擇時,或許「不強制用戶」才是最好的體驗。因為我們面臨的用戶多樣,電腦操作熟悉程度多樣,因此不同用戶對于打開方式的習慣也具有多樣性,這個是設(shè)計者無法揣測和調(diào)查清楚的。
在「兩害取其輕」的情況下,在當前窗口打開鏈接,不失為一個選擇,尊重用戶自己的決定,讓用戶對交互界面自主可控。
彈出框(彈層)又叫模態(tài)對話框,是指在用戶想要對當前對話框以外的應(yīng)用程序或內(nèi)容進行操作時的提示方式。它一般覆蓋在整體頁面之上,避免了頁面跳轉(zhuǎn)。
彈出框通常是為了顯示一個單獨的內(nèi)容,在不離開整體頁面的情況下有一些互動,提供信息和交互。
如下圖知乎中的「寫想法」,用戶可以快速的在彈出框中記錄個人想法,記錄發(fā)布后,很順暢的回到之前的路徑上繼續(xù)操作,便捷,操作思路清晰。
現(xiàn)在很多產(chǎn)品中的新增、創(chuàng)建,也都會采用彈出框的交互方式,當然前提是在彈出框中編輯的內(nèi)容不是很多,此時彈出框不僅承載了信息編輯的功能,還可以作為上下文的跳轉(zhuǎn),幫助用戶銜接路徑。
如 iconfont 中的新建項目,用戶新增后,頁面會直接跳轉(zhuǎn)到新的項目空間。
彈出框適用的場景:
因此,彈出框可以較好的實現(xiàn)上下內(nèi)容層疊的感知,不打擾用戶的主路徑,同時作為頁面承載元素和用戶操作的補充,起到承前啟后的作用。
本文結(jié)合這三種鏈接打開方式的頁面交互關(guān)系,進行適用場景舉例,并總結(jié)每種方式的優(yōu)缺點,方便在設(shè)計中更好的根據(jù)不同的場景選擇合適的頁面打開方式。
當然,以上總結(jié)也是基于我個人的理解與經(jīng)驗,沒有統(tǒng)一的用法和標準,在具體設(shè)計實踐中,仍要靠設(shè)計者的直覺和經(jīng)驗來進行綜合考量與判斷。
作為體驗設(shè)計師,如何規(guī)劃用戶瀏覽路徑,是個需要嚴肅對待的命題。沒有絕對的好與壞,但一定要結(jié)合產(chǎn)品類型、場景、目標用戶等進行具體問題具體分析。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
在設(shè)計環(huán)節(jié)中,對于視覺次序的營造是每個設(shè)計師所必須精通的,視覺次序也可以理解為視覺層次,它是設(shè)計中的必然,無論是海報設(shè)計還是頁面設(shè)計,從整體來看總會有強弱、主次之分,因為有了視覺上的變化,才使得整體更富有層次感。從大體來說:當用戶在瀏覽信息很多的網(wǎng)頁時,作為設(shè)計師要做到,即使用戶只是簡單的瀏覽,也要有能在用戶腦海中形成記憶的視覺元素,而這些元素就是視覺中的主,而當用戶仔細閱讀時才能記憶到的元素才是視覺上的次。從局部來說,要能在視覺上形成先后順序。這期的內(nèi)容就是設(shè)計中體現(xiàn)視覺次序手法有哪些?這些也是打破版式的常用手法。
首先,每個人在瀏覽東西時都會有自己固有的習慣,比如:從上到下、從左到右,這叫常規(guī)方式,而作為設(shè)計師,不能僅僅局限于常規(guī)形式,完全的常規(guī)帶來的是設(shè)計上的枯燥、乏味。要學(xué)會利用設(shè)計知識打造不同的視覺次序,營造出更強烈的設(shè)計感、層次感。
在眾多營造視覺次序的手法中,大小對比幾乎是每個人都能想到的一種形式,也是很多人認為的最簡單的一種,比如:
通過大小對比的形式能直觀營造出視覺焦點,這種形式在設(shè)計中也是最容易接受的一種。如果左側(cè)放置的也是四塊小的產(chǎn)品,給人的感覺就會顯得枯燥、乏味,版式太過統(tǒng)一,而正是因為這種放大產(chǎn)品的處理手法,拉開了對比,才使得版式不顯呆板。這種形式無論是在文字排版、海報、頁面都是很實用的一種,合成設(shè)計中的近大遠小也同樣適用,只是在做對比效果時一定要大膽。
通過改變不同的配色方式,也能在視覺上營造出視覺層次的變化,比如我們常見的通過有彩色與無彩色進行區(qū)分的手法:
在原本無彩色的排列方式中加入有彩色,在視覺上就形成了很強烈的差異化,而正是因為有了強烈的差異,使得存在差異的部分成為了更容易吸引用戶的區(qū)域,所以就在視覺上形成了先后順序,同時這種差異的形式也能起到一定打破版式、活躍版式的作用。而在有彩色之間,同樣也能通過差異化形成視覺上的主次,比如:
第一行色塊能最快引起注意的是第二個,通過色彩飽和度的不同,在視覺上形成了很明顯的差異化,進一步改變了原本的做從左往右的習慣性視覺次序。而第二行色塊中最快能引起注意的是紅色,因為這里用到了改變色系的形式進行視覺上的次序劃分。之所以在有彩色中也能很好的體現(xiàn)視覺層次最重要的一點是,他們之間形成的差異足夠明顯,而不是似有非有。
營造不同的視覺次序最重要的就是在正常人習慣的固有次序上尋找變化,那么我們同樣可以以形態(tài)上的變化作為差異化的形式,比如:
在固有的形態(tài)中尋找其中可以引起差異化的元素,從視覺感受而言可以分為兩種:第一,改變了原本的習慣性的閱讀方式,也使得整體主次發(fā)生了變化;第二,原本枯燥、呆板的重復(fù)式的結(jié)構(gòu)上因為元素形態(tài)的改變,也起到了打破整體版式的作用,使得整體版式變化更多,層次感更強且版式因此也變得更加活躍。形態(tài)上的變化還可以這么體現(xiàn):
雖然都是矩形框,但是線框與色塊形成了很明顯的差異,同樣也可以體現(xiàn)視覺層次,而這種形式在很多頁面中也很常見:
這也是版式設(shè)計中很重要的一部分,也就是尋找可以打破版式且營造視覺層次的元素,正是因為這些手法,才使得版式更豐富、更富有多變性。
當要求不能改變很多時,在原有的基礎(chǔ)上只需要改變空間位置或者留白方式,也可以營造不同的視覺次序,比如:
在不改變其大小、顏色、形態(tài)的前提下,只是改變了空間留白,也能起到改變視覺次序的作用;而在編排或者標題設(shè)計中,通過空間留白的方式拉開層次、次序也很常見:
同樣是重復(fù)的形式,左側(cè)完全沒有給人一種有層次、有次序的感覺,在用戶眼中,這只不過是一團信息;而右側(cè)通過改變留白的方式充分的體現(xiàn)出視覺上的層級關(guān)系,每一個獨立存在的標題或者欄目之間都應(yīng)該用留白的方式體現(xiàn),這種留白要遵循的原則是:標題與文案的留白要小于欄目與欄目之間且大于說明性文字信息之間,只要這樣才能真正意義上的將層次拉開。
投影在設(shè)計環(huán)節(jié)中是很常用的一種手法,通過投影可以體現(xiàn)出前后層次,也能改變視覺次序,比如頁面設(shè)計中的:
這里只是在色塊上添加了簡單的投影效果,原本的視覺次序就瞬間被打破,而這種投影在海報設(shè)計中最常用的是打破前后關(guān)系,使得海報更有層次感:
這種大投影的方式,是很多海報以及頁面中常用的手法之一,因為有了投影,使得畫面整體形成了明顯的層次關(guān)系,而投影對于用戶來說也是很容易接受的,比如:按鈕的投影、主體的投影等等,看似很小的改變,往往能給頁面帶來很明顯的效果。這種形式也可以理解為形成遮擋關(guān)系,在一些小場景的設(shè)計中,一樣很實用:
有了遮擋關(guān)系,就會形成視覺上的層次,這種看似簡單的手法,最終所呈現(xiàn)的效果卻是立竿見影的。
拉開視覺次序的另一種手法:模糊,很多人對于 PS 里的模糊工具并不陌生,而通過將視覺元素模糊化處理,一樣能起到營造視覺層次的效果,比如我們常見的電影海報中:
通過虛實對比,使得視覺層次變化更強,這也是合成設(shè)計中常用的手法之一,而在文字設(shè)計中,一樣可以通過這樣的手法來拉開視覺次序關(guān)系,比如:
通過模糊字體中某個筆畫,在視覺上形成了一定的空間關(guān)系,也使得整體層次感更加豐富,這也是很多設(shè)計師喜歡在作品的最后環(huán)節(jié)加一些飄飛模糊的點狀元素豐富整體的原因:
視覺層次的變化對于整體而言是不可缺少的一部分,有時只需要一點點的變化就可以帶來意想不到的效果。
這期所說的很多都屬于細節(jié)上的變化,但是很多人對于細節(jié)并不重視,認為不重要,但其實優(yōu)秀的版式設(shè)計基本上都是用不同的細節(jié)處理方式堆砌而成的,這期所說的這些形式用于版式設(shè)計中也同樣很實用,如果你的版式太過呆板,可以通過考慮這些方面在適當?shù)奈恢眠M行打破,打破的意思是:在原本很呆板的基礎(chǔ)上尋找視覺上的層次變化,使得整體版式活躍起來且富有細節(jié)感,比如:
這是從一個頁面中選取的一個局部信息,上側(cè)版式給人的感覺毫無變化,如果頁面中出現(xiàn)大面積這種形式的版式,會使得整體單調(diào)、枯燥,很容易形成視覺疲勞。而下側(cè)區(qū)域則是為了避免這些,在形式上改變了許多:第一,顏色上有輕微的變化,這樣做的目的是區(qū)分開每個欄目。第二,形式上第三個模塊做了很明顯的層次變化,顏色明顯加深了,且投影效果加重,而且按鈕區(qū)域也用色塊的形式代替邊框,使得整體層次感更強且有保持在一個很協(xié)調(diào)的范圍內(nèi)。這里用到的手法,正是這期所說的。
同樣我們也可以在網(wǎng)上找一些版式感很強的頁面進行分析,去理解這些手法是如何在版式中體現(xiàn)的,比如一些官網(wǎng)的設(shè)計,看似很簡潔、元素很少,而往往這種頁面對于版式的要求更高,因為要用極少的元素體現(xiàn)其版式變化、層次。
視覺層次感是提升整體設(shè)計感很重要的一種形式,如何在固有的視覺基礎(chǔ)上打破束縛,在形式上形成變化,對于每個設(shè)計師而言都是至關(guān)重要的;而很多設(shè)計手法都存在著共通性,只要學(xué)會靈活運用,那么我們的設(shè)計作品就不會顯得平庸無常。當然這期所說的也并非全部,這些只是很常用的一些形式。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
我們使用語言與人進行溝通,傳達信息,記錄內(nèi)容,而視覺語言也發(fā)揮著類似的作用。從色彩到排版樣式,從插畫到品牌構(gòu)建,視覺語言同樣承擔著類似的功能,它和傳統(tǒng)的語言有著類似的特征包括結(jié)構(gòu)化和溝通功能。所以,視覺語言也是規(guī)范化的,標準化的,它足夠自由,也保有約束。視覺語言本身也可以具備足夠明顯清晰的特色,就像每個人的表達方式和口音一樣,這使得視覺語言本身可以強化和凸顯品牌特色。那么想要創(chuàng)建一套屬于自己的視覺語言,可以從下面的9個方面入手。
我們總是說,色彩和形體是用戶第一眼最快注意到的東西。配色方案的視覺表現(xiàn)力最強,這使得配色方案成為視覺語言中辨識度最高的組成部分。配色方案本身需要具備一定的獨特性,確保它整體上能夠讓人記住,區(qū)別于其他,品牌不至于在繁雜的互聯(lián)網(wǎng)世界中迷失,也不會讓用戶無法記住。
另一方面,配色方案應(yīng)該具備良好的兼容性,能夠調(diào)和品牌不同模塊,比如網(wǎng)站、APP、社交媒體、包裝、名片等。
配色也應(yīng)該體現(xiàn)品牌的價值。想想麥當勞的配色吧,黃色和紅色為主。這兩種色彩本身能夠觸發(fā)幸福(黃色)和饑餓(紅色)的感覺,兩者搭配加上經(jīng)典的金拱門的LOGO,麥當勞的視覺識別度可以說是相當高的。此外,麥當勞旗下的許多其他的設(shè)計,也是在這個配色的基礎(chǔ)上構(gòu)建的。
排版層次結(jié)構(gòu)的構(gòu)建,和選擇字體同樣重要。不同的排版層次,能夠給人截然不同的感受,清晰還是粗糙,雅致還是有趣。在排版的層次結(jié)構(gòu)上,并不存在對錯,更多需要考慮的是合適不合適,風格和感受上的一致性。
當然,不同層級的信息,在排版層級上還是要有比較清晰的體現(xiàn)的,大小疏密對比度不足,會難以讓用戶感知到內(nèi)容之間的重要性的差異。
以 Airbnb 為例,網(wǎng)站的排版有著清晰的層次結(jié)構(gòu),字體的大小、字重、間距和配色都已經(jīng)標準化了。相應(yīng)的,給人的體驗也始終保持著應(yīng)有的一貫性。
視覺元素之間的位置關(guān)系,和它們本身的設(shè)計是同等重要的。如果你希望整個設(shè)計在細節(jié)上是清晰明確的,那么柵格會給你想要的。
FreeCodeCamp 對此有很明確的描述:
柵格賦予了UI界面元素以模塊化的清晰結(jié)構(gòu),這使得整個設(shè)計團隊能在此基礎(chǔ)上更好地合作。這使得產(chǎn)品能夠快速清晰地輸出到不同的平臺上。如果你是基于某個想法來構(gòu)建概念設(shè)計,那么這種方法更加實用有效。
簡而言之,柵格讓視覺呈現(xiàn)的復(fù)雜度降低了。
從按鈕、圖標再到卡片,你應(yīng)當創(chuàng)建出一整套可用的、風格一致的UI組件庫。
同樣功能的控件,在頁面不同的地方、或者不同的頁面上有著截然不同的風格,是讓人迷惑而糟心的。一個好的組件庫,應(yīng)當包含全部常用的UI組件,以及針對 iOS 和 Android 平臺所適配之后的UI組件。雖然構(gòu)建組件庫本身的工作量并不小,但是在完成之后,能讓后續(xù)的工作事半功倍。
在諸多圖形化的元素當中,圖片和插畫是視覺性最突出的元素,這也是整個視覺語言當中最重要的因素之一,因為它從某種意義上是和品牌關(guān)系最緊密的素材。
構(gòu)成視覺語言涉及到圖片素材的方方面面,構(gòu)圖,色彩,濾鏡,甚至相關(guān)動效的細節(jié)。
下面是 Smashmallow 中的網(wǎng)頁設(shè)計,即使它們并不是同期設(shè)計也不是服務(wù)于相同的功能,但是很明顯插畫所采用的視覺風格是一致的,并且每幅插畫當中都使用了共同的元素:熱氣球。這一元素和品牌本身是有著緊密關(guān)聯(lián)的,而用戶也可以從這些插畫圖片的內(nèi)容,迅速意識到品牌本身的一些概念。
動畫效果同樣是要遵循一些規(guī)則的。是快速移動還是慢速移動,是懸停觸發(fā)還是自動運行?這些動效的運動規(guī)則其實是有著明顯的視覺識別度的,就像日漫和美漫在視覺和運動規(guī)則上存在差別一樣。
就像下面這個來自Dribbble 的動效,它大體上做著勻速的圓周運動,速度適中,其中有些元素并沒有完全按照圓周運動。那么想想看,是否所有的做圓周運動的物體都和它一樣呢?它們是否會帶來不一樣的視覺觀感呢?
視覺語言并不是只涉及到視覺元素,文本并不是與之割裂的,在設(shè)計的時候,兩者需要合理地配合,在體驗上達成一致,傳達一致的信息。
在下面的 Steffany 這個網(wǎng)站當中,整體設(shè)計呈現(xiàn)出非常明顯的女性化的特征,文本內(nèi)容在表達方式和調(diào)性上和整體的視覺語言保持著一致,并沒有出現(xiàn)兩者沖突或者競爭的狀況。
視覺語言只有在用戶接納的情況下,才會地發(fā)揮作用,它要給人可靠的感覺。所以,整個視覺語言需要和你的品牌定位、氣質(zhì)表里合一,而不能讓設(shè)計和產(chǎn)品、企業(yè)的氣質(zhì)割裂開來。
你能想象沒有主角的芝麻街會是怎樣的一種氣場么?
整個品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來的,每一個細節(jié)的設(shè)計都是圍繞著這些角色來創(chuàng)建的。注意網(wǎng)站中角色和其他視覺元素之間的映射關(guān)系,它們讓用戶清晰地感知到角色和整體設(shè)計之間的關(guān)系是表里如一的,這使得整個網(wǎng)站的設(shè)計更容易為用戶所接受,視覺語言在此發(fā)揮了作用。
整個視覺語言在構(gòu)建起來之后,需要保持各方面的一致性,在具體設(shè)計的時候,則得有一份詳實具體的設(shè)計文檔供整個設(shè)計團隊和利益相關(guān)人員,作為參考。所以,完成整個設(shè)計之后,將整個視覺語言相關(guān)的內(nèi)容和素材制作成設(shè)計風格指南,和整個品牌的設(shè)計規(guī)范統(tǒng)一到一起。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
領(lǐng)先企業(yè)已經(jīng)認識到,設(shè)計不僅僅停留在產(chǎn)品的 “外在美”,而應(yīng)聚焦在更具商業(yè)價值的“內(nèi)在美”。那么,如何實現(xiàn)通過“內(nèi)在美”創(chuàng)造價值呢?答案就在設(shè)計思維。在數(shù)字化變革時代,更好地理解和分析數(shù)字消費者成為每個企業(yè)的核心要務(wù)。同時,如何將分析結(jié)果轉(zhuǎn)化為創(chuàng)新的產(chǎn)品和服務(wù)——更是為決策者提出了新的挑戰(zhàn)?!霸O(shè)計思維”作為一套完整的“以用戶為中心”的方法論和工具包,為企業(yè)重塑“客戶價值”、實現(xiàn)服務(wù)創(chuàng)新,提供了切實的方法指引,而這一切的終極目標是成就企業(yè)價值。
簡單來說,設(shè)計思維來自“設(shè)計師思維”,是一套基于“以用戶為中心”的創(chuàng)新方法論。
在數(shù)字時代,消費者的使用動機和行為模式更復(fù)雜多樣,企業(yè)競爭環(huán)境也更加復(fù)雜多變。對于決策者而言,客戶體驗、場景、觸點、旅程優(yōu)化等詞匯已經(jīng)不再新鮮。
擺在企業(yè)戰(zhàn)略制定者們面前的問題是,如何以一種全局視角去理解客戶,并讓組織運作回歸“創(chuàng)造客戶價值”,不斷創(chuàng)新。埃森哲《2017年技術(shù)展望》通過針對全球企業(yè)領(lǐng)袖的一項調(diào)研發(fā)現(xiàn),79%的受訪者認為,組織進化的目標就是——更好地研究消費者使用行為和動機,并提供行業(yè)領(lǐng)先的客戶體驗。
與此同時,面對產(chǎn)品服務(wù)創(chuàng)新面臨的內(nèi)外部不確定性,企業(yè)決策者往往陷入兩難困境:即一方面,鼓勵組織內(nèi)部大膽試錯、大膽創(chuàng)新;另一方面,又希望創(chuàng)新過程管理有序,并能量化創(chuàng)新結(jié)果。
于是諸多企業(yè)領(lǐng)導(dǎo)者重新思考創(chuàng)新模式,并在設(shè)計師們那里找到了創(chuàng)新靈感。
企業(yè)進一步把設(shè)計師的工作模式抽象提煉出來,逐步形成了設(shè)計思維——這套結(jié)構(gòu)化地理解消費者習慣、行為、喜好和需求,并產(chǎn)生設(shè)計機會的方法論,希望從中找到在數(shù)字時代突圍的機會。
比起科學(xué)研究人員或者銷售人員,“設(shè)計師”面臨的問題、合作對象和產(chǎn)出方式有不同特點,甚至更加復(fù)雜。不論什么類型的產(chǎn)品,設(shè)計師的思考模式往往是,從不斷變化的用戶或者市場需要開始,兼顧生產(chǎn)水平和工藝限制,以可執(zhí)行的產(chǎn)品方案結(jié)束。設(shè)計過程通常都會融入反復(fù)的內(nèi)部討論、看似混亂的草圖、無情的推翻和修改和某個必要的“靈感爆發(fā)”時刻。
創(chuàng)新思維本身也是在不斷迭代,我們姑且將其定義為1.0、2.0和3.0版本(見圖一)。
對于傳統(tǒng)企業(yè)而言,創(chuàng)新更是當務(wù)之急。而設(shè)計思維的成功運用,無疑能夠為傳統(tǒng)企業(yè)插上創(chuàng)新的翅膀。
《哈佛商業(yè)評論》就曾以百事公司為例,分析這家傳統(tǒng)快消業(yè)巨頭,如何通過設(shè)立首席設(shè)計官,將設(shè)計思維融入公司文化,并在做任何重要決定時都要考慮設(shè)計的因素,完成從新產(chǎn)品、包裝、陳列到品牌體驗的成功創(chuàng)新。隨著諸多傳統(tǒng)企業(yè)將創(chuàng)新思維應(yīng)用在各自的創(chuàng)新領(lǐng)域,“設(shè)計思維”已經(jīng)在過去的十幾年,從產(chǎn)品規(guī)劃方法,發(fā)展成為了一套系統(tǒng)化的創(chuàng)新方法論。
在新的語境下,設(shè)計思維已經(jīng)發(fā)展成為一系列“以用戶為中心”的工具和方法集合,這里既包含產(chǎn)品設(shè)計模式,也包含組織協(xié)作模式;不僅從內(nèi)涵上,在外延上,這種思維方式也從產(chǎn)品優(yōu)化,進一步拓展到服務(wù)重構(gòu)、流程設(shè)計,乃至實現(xiàn)突破性的商業(yè)模式創(chuàng)新。
設(shè)計思維3.0作為系統(tǒng)化的創(chuàng)新方法體系(見圖二)可以看做以下三項模式及其工具方法的合集:
要實現(xiàn)“設(shè)計思維”:
第一步需要轉(zhuǎn)換思考角度,理解分析“用戶是誰”、“用戶想要什么”,發(fā)現(xiàn)有價值的設(shè)計機會在哪里;
第二步結(jié)合技術(shù)的可實現(xiàn)性,篩選可以被技術(shù)解決的機會,并拼搭出未來的產(chǎn)品藍圖;
第三步基于實現(xiàn)的需求,做出分步規(guī)劃,從框架到細節(jié)逐步交付。
從產(chǎn)品藍圖來看,前面一個階段屬于需求的匯集;后一個階段屬于需求的延展(見圖三)。
以下按照三個步驟,列舉設(shè)計思維倡導(dǎo)的核心方法:
成功的產(chǎn)品始于對用戶需求的發(fā)現(xiàn)和理解(見圖四)。
顛覆了酒店住宿行業(yè)的Airbnb在創(chuàng)立初期,新用戶和預(yù)定量增長停滯不前,創(chuàng)始人之一同時也是設(shè)計師背景的布賴恩·切斯科(Brian Chesky)通過深入對種子用戶的理解,發(fā)現(xiàn)這些嘗試租賃共享房屋的用戶最為關(guān)心房源狀態(tài)和特色。
基于這一認知,切斯科和創(chuàng)始團隊做出了可能是Airbnb初創(chuàng)期最重要的決定,將最后的預(yù)算用于租賃專業(yè)攝影設(shè)備,并按照用戶關(guān)注的維度去重新拍攝房源照片,從色彩、角度和細節(jié)等方面,去強化共享房屋和酒店的差異,最終這批照片上線后為Airbnb帶來了100%的預(yù)定量增長。而Airbnb更強化了圖片優(yōu)先的整體策略,時刻關(guān)注用戶體驗,成為這家估值超過300億美元的共享經(jīng)濟巨頭持續(xù)增長的基石之一。
設(shè)計思維強調(diào)把消費者當做立體的“人”來看,了解“人”的習慣經(jīng)驗如何對其購買、使用產(chǎn)品產(chǎn)生影響,分析其在服務(wù)各階段的感受是什么,情緒如何變化。那么,如何了解如此復(fù)雜的“人”呢?
設(shè)計師們從心理學(xué)和人類學(xué)家那里借鑒了一些常用的方法,如采取實地觀察、跟蹤和訪談等方式,記錄用戶行為的“人種志”研究;又比如場景分析,提倡對產(chǎn)品的使用環(huán)境(自然與社會環(huán)境)進行記錄和分析。
面對數(shù)字時代消費者不斷變化的需求,面對數(shù)字化觸點大爆炸的現(xiàn)狀,在規(guī)劃設(shè)計的初始階段,企業(yè)迫切需要對用戶場景進行梳理,采取全局視角去發(fā)現(xiàn)待滿足的創(chuàng)新機會點(見圖五)。
從組織內(nèi)部看,也需要更為有效的溝通和協(xié)作方式。設(shè)計思維倡導(dǎo)通過系統(tǒng)化的方式去尋找這些創(chuàng)新機會,其核心思想是:對全局信息的可視化表達,以及跨領(lǐng)域的相互激發(fā)。
設(shè)計思維鼓勵在團隊協(xié)作中使用創(chuàng)新手法,如頭腦風暴進行窮舉(Brainstorming)、可視化的方式表現(xiàn)、角色轉(zhuǎn)換(Body Storming)以體會用戶感受等,甚至在藍圖規(guī)劃過程中直接邀請客戶或者最終用戶參與,以共同設(shè)計的方式充分交流和激發(fā),目的是打破團隊壁壘,共同以用戶視角進行問題定義和討論,形成統(tǒng)一認識。
埃森哲在幫助某國有銀行進行數(shù)字化體驗再造項目時,發(fā)現(xiàn)由傳統(tǒng)的業(yè)務(wù)部門“提出需求”到技術(shù)部門“執(zhí)行需求”的工作模式不僅沒有提升效率,反而由于高昂的溝通成本,減少了各方對創(chuàng)新的意愿和投入。
在埃森哲的建議下,將傳統(tǒng)的單向需求匯報模式,改為周期性設(shè)計創(chuàng)新工作坊。通過系統(tǒng)化的梳理金融類消費者的使用習慣和需求,將未來藍圖的規(guī)劃與企業(yè)整體目標有機結(jié)合,找到了適合該企業(yè)的創(chuàng)新設(shè)計方向。而持續(xù)的跨部門合作,也提前統(tǒng)一了創(chuàng)新方向并確保結(jié)果落地。
有一種理解認為,設(shè)計思維中對于結(jié)果的迭代交付訴求是“提早犯錯(Fail Early)”,然而更完整的說法應(yīng)該是“提早評估”。設(shè)計思維中使用大量工具從用戶角度描述需求,或者搭建原型,這一過程更多是描繪“產(chǎn)品的中間態(tài)”,即產(chǎn)品概念由抽象到具體,核心目的是更早完成評估和修正(見圖六)。
通過搭建原型并測試的方法,不僅限應(yīng)用于手機或者網(wǎng)站,也包括線下服務(wù)。一個著名的案例喜達屋集團旗下雅樂軒(Aloft)酒店。
作為面向20-30歲年輕人群的品牌,雅樂軒酒店的設(shè)計團隊在規(guī)劃階段,就將真實的設(shè)計方案制作成3D模型放置在虛擬線上游戲中,以測試目標用戶的反應(yīng),整個測試過程持續(xù)9個月,并包括了多次基于用戶意見的修改。
最終,大量基于“虛擬模型”的測試結(jié)果,如酒店大堂色彩選擇、屋內(nèi)布局、影音設(shè)備位置等,被有選擇地應(yīng)用在實際酒店設(shè)計中。《商業(yè)周刊》評論喜達屋這種模型測試,不論從速度或者成本來講,都非常有參考價值。
領(lǐng)先的企業(yè)決策者們已經(jīng)認識到,設(shè)計不僅僅停留在產(chǎn)品的 “外在美”,而應(yīng)該聚焦在更具商業(yè)價值的“內(nèi)在美”。那么,如何實現(xiàn)通過“內(nèi)在美”創(chuàng)造價值呢?答案在于如何利用“設(shè)計思維”讓內(nèi)部組織和員工重新回到 “客戶價值” 思維方式上去,并密切協(xié)作。這里有四條建議:
首先應(yīng)在新產(chǎn)品設(shè)計研發(fā)團隊中,將設(shè)計思維方法常態(tài)化、步驟流程完整化??煽紤]通過設(shè)立標桿項目、打造標桿產(chǎn)品的形式,完整地應(yīng)用設(shè)計思維方法,在若干輪反復(fù)應(yīng)用之后找到適合本企業(yè)的流程方法。
同時,借鑒互聯(lián)網(wǎng)企業(yè)的方式,周期性組織一日黑客馬拉松(Hackathon) 類活動,在組織內(nèi)部擴大影響。
MVP即Minimum Viable Product(最小可行產(chǎn)品),是與敏捷產(chǎn)品開發(fā)模式密切相關(guān)的產(chǎn)品交付模式,由埃里克·萊斯(Eric Ries)在《精益創(chuàng)業(yè)》中提出,核心原則是,首先聚焦在滿足用戶單一需求的功能(所謂“最小可行”),之后不斷迭代增加功能,最終形成完整的產(chǎn)品或系統(tǒng)。對待企業(yè)核心服務(wù)的數(shù)字化提升乃至變革時,MVP是一種行之有效的產(chǎn)品交付理念。
創(chuàng)新并不意味著一味鼓勵犯錯,也不意味著無法量化評估。
圍繞用戶進行產(chǎn)品和服務(wù)優(yōu)化,是一個循序漸進的螺旋式上升過程,這要求對設(shè)計結(jié)果的評判機制能有效適應(yīng)這種敏捷迭代。如,將銷售結(jié)果導(dǎo)向的KPI要求,拆解為若干可以測量的用戶行為的KPI。
同時,在定義階段,將這些用戶行為KPI用到產(chǎn)品設(shè)計的輸入中,聚焦在提升這些用戶KPI上,后續(xù)不斷優(yōu)化提升。在方案設(shè)計中考慮,如何形成反饋機制,預(yù)設(shè)用戶行為的KPI和監(jiān)測方法,在下一輪優(yōu)化中不斷迭代。
“技術(shù)實驗室”是諸多領(lǐng)先企業(yè)在進行研發(fā)領(lǐng)域創(chuàng)新,特別是構(gòu)建前沿領(lǐng)域技術(shù)創(chuàng)新能力時,常常考慮的戰(zhàn)略舉措。同樣,要進一步推進數(shù)字化領(lǐng)域的客戶導(dǎo)向創(chuàng)新,建立“創(chuàng)新設(shè)計中心”可以從戰(zhàn)略的高度推進“設(shè)計思維”在數(shù)字化轉(zhuǎn)型中的作用。
ERP領(lǐng)域的巨頭SAP公司也在持續(xù)增加其對設(shè)計團隊的投入,在2012年就開始著手組建新的設(shè)計中心;素以創(chuàng)新和多元化產(chǎn)品著稱的3M公司,在2016年將總部設(shè)計中心擴容了四倍面積,可容納150名設(shè)計師工作,并在其中進行協(xié)作創(chuàng)新、產(chǎn)品展示和客戶洽淡。埃森哲大中華區(qū)也于2016年底,在香港構(gòu)建了“設(shè)計工作室”,作為分布全球的設(shè)計網(wǎng)絡(luò)的一環(huán),在這個超過3700平米的空間中,集中不同專長的數(shù)字化設(shè)計能力,與客戶共同創(chuàng)新。
可以預(yù)見,“創(chuàng)新設(shè)計中心”將會越來越多地出現(xiàn),成為從市場端洞察用戶需求、挖掘商業(yè)機會的強大雙擎之一。
設(shè)計思維3.0作為一種全局化的創(chuàng)新方法論,能帶給企業(yè)一種全新視角,即如何圍繞客戶價值,構(gòu)建可持續(xù)的產(chǎn)品和服務(wù)?
在數(shù)字時代,企業(yè)需要兩手抓:一方面,能夠從用戶視角分析梳理需求斷層和服務(wù)機會;從另一個方面,能夠為組織的協(xié)作方式找到新的模式,以強化效率和有效性。如同設(shè)計結(jié)果需要漸進式上升,工作方法和協(xié)作形式都需要不斷進化迭代,才能最終尋找到適合發(fā)展階段的轉(zhuǎn)型切入點,支撐企業(yè)數(shù)字化時代實現(xiàn)全面創(chuàng)新。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.yvirxh.cn