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