如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
設計師們,經常聽到需求方說:「我想要那種很有高級感的設計」,看到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 設計友好且非?,F代化,清晰易讀而且又非常時尚。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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
現在市面上的汽車大部分都是過時的,沒有吸引力的用戶界面,正因為如此,很多設計師都在思考未來的汽車用戶界面將會如何改善我們的駕駛體驗。今天這篇譯文,一起來學習特斯拉和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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
互聯網產品有很多種,比如電商類、工具類、資訊類、財經類。但在看過很多產品之后,作者發現論產品體驗,最強的是游戲類。當然游戲做為一種特殊的產品,有時候不會被列入以上類型,且游戲的產品經理一般被叫做游戲策劃以及數值策劃,分別負責不同的內容。
之所以這樣說是因為游戲類產品有一個特點即它是沒有用的,或者說它的唯一用途就是好玩。這樣有一個問題便顯而易見了,即對于大多數產品來說用戶體驗好是錦上添花的事情,而對于游戲類產品而言,這可能是唯一的賣點以及生死線。
舉幾個例子來說明:
通過上面幾個例子不難看出,隨著剛需的減弱以及依賴性的降低,產品對于用戶而言不可替代性就越低。比如單位或者學校的官網哪怕做成非圖形界面,恐怕員工和學生都得自學了接著用。而游戲則不然,不僅面臨著用戶隨時可以放棄的情形還得時刻注意政策動向。
因此即使不去使用產品,我們也不難猜出游戲類產品的用戶體驗必須非常好才行。畢竟只有有依靠的產品才能夠做到有恃無恐,而游戲類產品則是時刻在刀尖上舞蹈,用戶和政策都不敢得罪,必然得絞盡腦汁才能生存下去。
人都是有惰性的,一旦有恃無恐將沒有多少人和公司愿意繼續創新,畢竟你沒得選。
1. 從側面展示其用戶滿意度
為何選崩壞3呢?原因很簡單,因為它的推廣模式以及用戶體驗都是一流的,不僅做游戲,而且 CG,漫畫,周邊同步推進。選擇了3D萌風格后又通過嗶哩嗶哩這一平臺進行了推廣,對用戶的了解之深入讓人佩服。
b站的推廣對于崩壞3而言,絕對是最好的選擇可能都沒有之一。原因很簡單,兩者用戶重疊度太高了,且 b站專門有崩壞3類似的模塊MMD 3D。當崩壞3到達b站后,up主們則自發的開始了宣傳,例如熱門中的第四位就是崩壞3的內容。
如果搜索崩壞3的經典角色 CG女王降臨,可以得到如下結果:
僅前面幾個視頻的播放量可能就有近300w,而且是精準用戶的300w次播放,其宣傳的成功不難理解。當然這里你可能要問了,不是談用戶體驗嘛,說這些和用戶體驗有什么關系。
其實是有關的,通過下面這張圖很容易從側面反映出用戶對其熱愛的程度。
這些視頻全都是用戶自制的,這種熱愛是很切實的。試想當初最火的魔獸世界上映,很多人穿著聯盟或者部落的衣服去電影院不就是對游戲最大的認同嗎。
這里也是一樣,你會為一個你不喜歡,用戶體驗差到崩潰的產品花費幾天甚至一個月的時間去做它的周邊視頻嗎,所以其優秀其實是毋庸置疑的。
2. 分析其用戶體驗
這張圖片即該游戲的歡迎界面,接下來讓我們細細來分析其用戶體驗點好在哪里。
上圖即為游戲界面展示,僅一個界面就有很多點設計來增強用戶體驗。
當然其優秀的用戶體驗點完全不止這些,作為一個體積3G多的程序有許許多多的界面,但介于游戲和產品的邏輯還是有區別的,就不展開繼續講了。但有一點是值得注意的,即整個游戲的任何界面幾乎都是在用心去做,將用戶體驗做到了。
數值系統顧名思義就是一個產品的數值設計,比如:得多少積分用戶可以升級,在搞活動的時候是否應該贈送 VIP,如果贈送了 VIP 多久比較好,VIP 應該有哪些權限,如果各種等級的 VIP 功能是不同的,那么一個級別應該差多少。
以上僅僅是產品的數值體系,而游戲的數值體系就更復雜了,比如:游戲貨幣的產出量以及回收機制,維持整個游戲世界的裝備價值以及金幣價值,防止產生通貨膨脹。
產品和游戲有這樣的區別很正常,畢竟產品只是提供一種服務,而游戲更像是打造一個世界,要考慮的東西在一定程度上和現實世界有相似之處,比如:交易方式、稅收、貨幣體系、資源體系、玩家社群、不同勢力的實力均衡。
現在讓我們來簡單分析,當然我們只分析在產品中也存在的數值體系,畢竟相信本文的讀者都是產品人而不是游戲迷。
1. 崩壞的VIP體系
VIP體系對于企業而言是非常重要的,因為這是企業收入最主要的來源之一。
所以誘導充值是所有企業都必須面臨的問題,那么大多數產品有哪些套路呢,一般有以下三個常見方式:
現在讓我們再來看看崩壞3是如何設計其 VIP體系的。
初始獎勵非常豐厚:讓用戶忍不住想要充值,如上圖所示,只需要充值非常少的錢,就可以獲取以上獎勵,而這些獎勵非常不錯。這點最大的意義在于讓用戶愿意去嘗試充值,只要充值一次,以后就有可能繼續消費。
限時購買:促銷雖然老套,但卻十分有用,這種倒計時總能夠刺激用戶的消費欲望。
月卡系統:很有意思的系統,充值一次之后可以每天都領取獎勵,而效果是直接購買獎勵的十倍。但只有每天不斷的進行領取才能夠達到獲得獎勵的目的。這種模式其實就是用日活換金幣,雖然用戶節省了錢但卻必須每日登錄才能夠獲取這些金幣。
類似的策略拼團也有使用,不過不是用日活換金幣而是用用戶換金幣。
2. 數值系統
數值系統對于游戲而言是生命所在,史玉柱曾說過:我不擔心別人抄走我的系統,因為數值體系他們抄不走。
崩壞3的數值系統就不提了,因為太過復雜,而且與產品相關性也不是很大。
對于產品而言,數值系統沒有那么意義重大,但也需要很好平衡各方的利益,否則可能讓產品迅速衰落。
一個簡單的例子即會員該有多少權利,不同等級的會員權利應該如何區分。比如以視頻網站為例,假設有兩種級別的會員,大會員和小會員。那么用戶就有三種,免費用戶,小會員以及大會員。假設會員的作用是看高清視頻,而視頻的級別有五個,等級越高質量越好。
那么該如何設置他們的權限呢,可能的方式有以下幾種:
當然一般的 VIP 肯定不止有視頻權限,還會附帶一些其他權限,比如可以有打賞用的幣,可以有更好看的頭像框,文字的顏色是可以選的等等。
不難發現,這將是非常復雜的一個體系,哪種體系都對一些用戶有利,對另外一些用戶不利,如何合適的定制產品的數值系統就是一個很復雜的問題。如果體系偏向免費用戶,可能讓付費用戶付費意愿降低,如果偏向付費用戶,可能讓免費用戶覺得沒有存在感,直接離開。
用心做產品是有用的:如今流量獲取非常困難,產品的成功很大程度上取決于是否有流量扶持。這對于產品人而言是比較沮喪的現狀,畢竟辛辛苦苦做一個產品結果比不上某些巨頭產品的一個入口有效。這種情況確實是存在的,但我們也要相信產品的優秀絕對不是沒有意義的;
可以用日活換收益:現在的產品VIP系統大多都是充值后獲得權限,但完全可以做以下這樣一個策略。比如:視頻網站的 VIP 是一個月15元,那么我們可以推出一個套餐,一個月只要5元,但是這個套餐有個條件是每天登錄后第二天可以享受 VIP服務,如果用戶有一天未登錄,那么第二天就沒有 VIP服務可以享受,這種策略其實就是用10元錢換取了一個用戶的每日登錄;
精準營銷事半功倍:崩壞3在 b站的廣告效果非常好,而且直接引起了 up主的關注,他們會再次創作內容對崩壞3進行推廣。但如果將這個廣告投到58同城呢,可能就沒有什么意義了;
數值系統平衡各方:免費用戶和付費用戶的關系非常復雜,兩者既有利益沖突又可能相互轉化,因此做好平衡非常重要,不要得罪任何一方。
一、為什么說游戲的產品體驗很好?
二、以崩壞3為例談談用戶體驗
三、以崩壞3為例談談數值系統
四、游戲給產品的啟示
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
用戶體驗一直是我們在產品設計中反復強調的問題,那么我們應該怎樣提升用戶體驗呢?
經過項目中不斷的探索與研究,結合幾個方法論,我們整合出了一套用戶體驗提升的方法流程——用戶體驗提升模型。下面就來詳細的介紹一下,希望能給大家幫助和啟發。
先問幾個問題?
用戶體驗提升模型能很好的幫我們解決以上問題。
先介紹一下用戶體驗提升模型的流程:線上版本調研 – 協作啟發式評估 – 問題分析整理 – 優化方案。
這篇文章也會以這個流程一一介紹。
也可以是設計方案,我們采用了 SUS系統可用性量表進行調研,SUS 是評估產品可用性的一個花費少,但十分有效的工具。該量表包含了10條定向問題,每個問題均為5分,按強烈反對(1分)到非常同意(5分)評分。(各位小伙伴可自行網上查詢系統可用性量表,有很詳細的介紹,在這里不贅述了。)
最佳的方式是在線上直接上一個問卷調研來收集真實用戶的反饋,然后對收集到的結果做如下算法:
1. 那么如何通過評分看出一個產品的好壞?
上圖是一個評分參考,通過數據得出,系統可用性量表最終算出的評分達到70分左右,就可以比市面上一半產品可用性要好,也就是說這個產品的用戶體驗算是合格了。
但是系統可用性量表的評分結果是抽象的,這個分數只能讓我們大概了解產品用戶體驗的好壞,在具體問題上卻是缺失的,那我們知道產品評分較低時我們如何聚焦產品的優化方向呢?
1. 為什么是協作啟發式評估而不是啟發式評估?
因為啟發式評估主要由幾名交互專家以角色扮演的方式來完成設置的任務給出評估結果。優點是成本低、快捷,缺點也顯而易見,一是交互專家團隊中不一定有或者很少,二是可用性問題意見一致率很低,并不能很明確的指出為什么這是一個體驗問題,有很多個人因素的主觀見解。
因此我們決定用協作的形式來進行評估,而且不需要交互專家,可以是用戶、測試、設計、產品、運營、商務等等,只要愿意參與測試,就可以。協作啟發式評估以小組為單位,能夠很好的整合出更多的問題,而且更準確。你說他們也不是交互專家,能起到好的結果嗎?竟然都整理出方法了,那答案當然是能啊。
為什么能,因為整個評估過程中,我們是有的可用性原則來給予啟發的,有了這套可用性原則,一秒變專家。
說到可用性原則,了解用戶體驗的都知道尼爾森的十大可用性原則,但是從1995年提出到現在,已經過去了二十多年,互聯網世界已經發生了巨大的變化。在這樣的情況下,尼爾森的十大可用性原則明顯有些不那么符合或者說不能給出針對現今產品太全面的啟發,所以,我們重新整理了一套可用性原則,這套可用性原則更針對現今互聯網產品,基本可以覆蓋到所有出現的用戶體驗問題。
我們稱之為21條可用性原則。
有了這21條,可以讓任何沒有用戶體驗知識的人參與到協作啟發式評估中來了,一秒變專家了。當然,這21條可用性原則我們也會迭代優化,目的是做到更符合現今產品、更全面的可用性原則。
2. 通過什么來確定的這21條可用性原則?
首先,我們都知道用戶體驗五要素,這已經是做產品設計的基本常識了。我們來看這五個層級對用戶體驗能產生影響的有哪些?戰略層一定不會,如果一個產品立項了、已經上線了,一定是戰略層成立了,如果戰略層出現了問題那就要重新考慮產品要不要做或者是改變方向了。那么剩下的4個層級呢?范圍層、結構層、框架層、表現層,其實都會出現用戶體驗的問題。那我們看看這幾個層級所包含的內容,視覺呈現、界面設計、導航設計、信息設計、交互設計、信息架構、功能規格、內容需求,這樣的話就有8個大類,然后我們通過多年的經驗和對尼爾森可用性原則的理解,把可用性原則對應到這8個大類中,最后得到了這分類明確的21條可用性原則。
但是分了這8個類有什么用呢?讀下去,你就會知道。
3. 具體方法
先說說調研的具體方法。我們以協作啟發式評估的方法,組織好調研小組(8人以上,樣本越多越好,反正最后還要去重),宣講完流程方法和操作任務,就可以開始進行評估了。我們一般為了省時間,宣講完就把表格發下去,讓他們自己找時間完成表格,然后再收回來。
這個表格就是用戶體驗問題記錄表。包括問題所在位置、對應的21條可用性原則、嚴重程度等級、問題描述。
1. 收集了一堆問題之后應該怎么做呢?
通過小組會議討論,把相同、相近的問題統一成一個,可優化的問題保留下來,不是體驗問題的去掉,然后整理到一起,這就是整個產品存在的大大小小、各種各樣的問題了。
接下來,我們引入另一個方法,就是用戶體驗八陣圖。
這張用戶體驗八陣圖的8個點是不是有些眼熟?沒錯,就是21條可用性原則里的8大分類,這就是上文為什么分為8個類的原因。中心向外為問題嚴重等級,依次為:小問題(1)、次要問題(2)、主要問題(3)、災難性問題(4),一一應對到「用戶體驗問題記錄表」中的「問題嚴重等級」。
2. 怎么使用呢?
首先,對記錄表里的「問題位置」進行歸類,以模塊化區分,比如把登錄注冊流程做為一個模塊,用一張八陣圖來表示,最終把產品的每個模塊都用一張八陣圖來承載所對應的體驗問題。
然后,把收集到的問題以「點」的形式點到對應模塊的八陣圖當中。
哪個模塊問題最多?問題出現在哪個方向上?是視覺?還是交互?還是內容?哪些問題很嚴重需要迫切解決?一目了然。
知道了這些,我們進行產品優化的時候還會不知道如何下手嗎?接下來就要靠你自己了,你一定會做的更好。
當然,這套模型只能對線上產品的用戶體驗提升起到一定幫助,一個產品真的厲害還要從戰略層一步步做起,我們需要去清楚的知道產品的目標是什么,我們能提供什么,我們想要去得到什么。對于產品的迭代,我們可以從使用人群(目標客戶),主要功能(產品的服務方向),產品特色(與競品的差異化),商業價值(盈利模式)上深入研究。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
想必很多前輩都會告訴大家,提高設計水平,最重要的一點就是多看多練多想。這句話,沒有任何毛病。
剛入門的同學肯定都會一直這樣做。特別是在“多看”方面,很熱衷于去收集各種各樣不同的站點,譬如自己碰到最多的問題就是:“米田,你有什么好的設計網站推薦給我們?”這樣的問題,我每周都會被問到數十次之多。
但是當東西真的變得很多的時候,往往會產生很嚴重的問題。不知道從哪里開始找起。特別是關于圖片方面的問題,這點更為嚴重。因為圖片能清楚描述的可能性很小,譬如一張一年前看過的海報,讓你再次清楚描述它是很難的。
所以這里就會引出一個話題,如何讓我們辛辛苦苦收集的圖片。能更好的使用,這是每個設計師必須要面對的問題。
要了解這個問題,最重要的一點是,知道什么東西是適合的。
圖片整理術,合適是什么?
舉個簡單的例子吧。圖中的這位人物叫盧冠廷,填詞人。或許很多人對這個名字比較陌生,沒關系。你肯定聽過他唱的歌。
是以下這首一生所愛。大話西游里的主題曲,相信華人都聽過他唱的這首歌曲。
那么經典的一首歌,創作時間需要多久呢?
答案是一個晚上。你的眼睛沒看錯,真的就是一個晚上創作出來的。這是我在一次線下分享會的時候。問過盧冠廷先生這個問題,他的回答就是這樣。
那么他是怎么做到的呢?相信每一個人都特別好奇。
和作曲一樣。好的設計創意也不一定需要長時間去思考。很多時候,創意來源于洗澡的時候。相反你花越多時間去思考,卻越想不出來。
這就是做靈感創意的魅力所在。
回到一生所愛這首歌曲的創作過程,盧冠廷先生是怎么做到在一晚時間,創作出經典的歌詞呢?
答案就是。答案就是,答案就是,畫重點了。
將他聽過關于愛情最好的十首音,一首一首反復聽。
抽取其中的精華,變成這首歌的主要內容。為什么要選取十首最好的?因為哪怕你創造出來的作品是在這些歌曲里最差的那一首,那也是從最好的結果內得到的最差答案。比單純自己憑空想象,效果要好很多。
那么對于設計同樣如此。我們不是需要填詞,但是要做設計,參考是必不可少的內容。
好的參考流程,找到合適的關鍵字很重要。你就要采用觀看,丟棄和應用這三步將看到的東西,消化吸收。
持續建造你的靈感水庫
為了讓我們持續擁有最好的靈感,這時候,就需要建造靈感水庫。
一般建造水庫來說。最重要的就是這四點
● 第一、找到坐標(建造地)。
● 第二、投入魚苗(商品)。
● 第三,保持它的時效性,常常要去維修這個水庫(定期上班)。
● 第四、每條魚苗都標記好(記賬)。
當然,這是比較形象的比喻,其實就是要建立屬于自己的圖庫。坐標系所用的工具。投入的魚苗是圖片。時效指的是定期去刪減圖片。標記為每張圖片打上標簽。
坐標
最理想的。圖庫工具應該有這樣一個功能,就能找到類似的圖片。
這不是很復雜的技術,不過卻很有用。有這個功能的工具,能夠一下子推薦相似風格的作品給我們參考,這大大提高了工作效率。
因為這個是圖片類的。整理工具。
三常用的工具如下圖。
● 花瓣
● Eagle
其中最理想的圖庫工具是Pinterest。它的相關度,聯想功能是最強大。簡單來說,你能用最短的時間找到。最多相似的圖。
對比花瓣。就明白其中的差異。
同樣是一張類似的圖。Pinterest找到的圖片是比較接近的風格,而花瓣找到的圖片風格就比較迥異了。
你或許會說。你這兩個工具我都不一定用到,我常常用的只是百度。那直接通過百度搜到的圖片,能有類似的效果嗎?
但饒可以,所有的搜索引擎都有一個功能叫做“以圖搜圖”。
以谷歌瀏覽器為例吧,就在瀏覽器的紅色箭頭部分上傳你需要尋找的圖片,它就會在顯示結果里自動推薦相似的圖片。
得到的結果類似這樣。
一般谷歌瀏覽器,點擊圖片右鍵的時候。都能發現有一種叫做在Google搜索相關圖片,這也是能達到相同的效果。
嗯,或許你不一定能訪問谷歌搜索,不過以下推薦的這些站點同樣能實現相同的效果。
有興趣可以去看看。
投入
好了,你要儲備自己私人圖庫的工具后,接著就是要將我們看到的圖片一張張放進去。找到坐標,修建水庫后,你需要定期定量的投入魚苗,不然這個水庫也只是空置的水庫,是沒有任何作用的。
舉個簡單的例子,如何保持庭院的整潔?肯定是需要時時打掃。這是日式庭院里面很重要的組成部分。定期的清掃落葉,保持整個庭院是處于相對空靈的狀態。
時效
同樣我們的水庫。也是需要進行這樣的一個修繕工作。一般我自己會將其分為性和臨時性兩種項目大的分類。
● 性:會收藏一些最常用的,而且以后肯定能用到的一些圖片素材。
● 臨時性:會根據每個項目收集有針對性的素材進行放置,可能項目結束之后就會進行封擋或直接刪除處理。
網絡端整理:
通過線上工具,比如chrome花瓣插件通過一個“采集到花瓣”的功能,就能將網絡上的圖片直接轉載到相應的工具里。
本地端:
可能有些項目不太想被人知道的話,本地整理很不錯的方法。譬如這里用到的工具是Eagle。它的分類功能很強大,可以通過顏色、大小、類型進行篩選。
標記
為什么要修建自己的水庫,即整理圖庫呢?
最終目標跟前面那兩課講的很類似,就是要在未來的時候,能通過模糊搜索找到快速相對應的圖片。如果你找不到,那其實整理圖庫意義不大了。
這就好比一個很龐大的圖書館里面沒有任何分類系統的話,你肯定是找不到你需要的東西。
案例:一小時10個設計參考
講了比較這么多內容,我覺得應該舉一個案例,會更容易理解。
這種方法對快速想到多種關鍵字很有用,因為圖片往往需要通過關鍵字才能找到。這種方法叫做一小時10個設計參考。當然找到十個參考時間可以更短,最快只需要十分鐘就可以了。
比如我們要做一款產品。希望薄荷糖去吸引上班族購買,最終設計的成果是一條廣告片或者平面海報。
首先如果按我們普通的思考模型。大概是這樣的,你會思考出一堆薄荷糖的作用或者營銷方案。這種方法不好么?當然不是,只是效率有點低。
現在介紹的辦法就是希望通過技巧,能快速想到十個甚至100個不同的創意方向(關鍵字)。這有什么用呢?就對于最后的在臨時項目里面尋找相對應的參考圖片,就會有非常大的幫助。
簡單來說,先在左邊的三角形內寫下與主題相關的資訊??梢岳斫鉃?,跟口香糖這個產品有關系的感受,都可以放在這個三角形里呈現。
隨后在右邊的三角形內寫出目標客戶群喜歡的東西。就是年輕的白領,他們最喜歡的是什么東西?可能有以下的這些關鍵詞。
最終我們要做的就是將左側的三角形的關鍵字與右側三角形的關鍵字進行隨機的拼合。
就是這么一個簡單的過程,就能形成很多看上去特別酷炫的關鍵詞。
● 清涼的音樂
● 變態的重金屬
● 頭發豎起來的溫柔
● 甜甜的色瞇瞇
● 透心涼的帥氣
我們循著這些酷炫的關鍵字去尋找相對應的素材參考,就完成了我們最基礎的靈感構思階段,得到以上這些圖片內容。
很多朋友都在問一個問題。老覺得自己構思設計的時候感覺沒有靈感,不知道怎么提高。很重要的原因是看的東西不夠,或者看的東西太過單一。
解決辦法很簡單,當你每天去看100-200張設計參考圖片的時候,再來回答這個問題,相信不用我告訴你答案,你自己也有自己的判斷了。
這百張圖并不是來源于單一的網站,這就需要你根據自身習慣。篩選過程,與每個人的購物習慣一樣,沒有一個完全的標準的答案。試試這節課交給大家的創意思考法。做延伸思考時很有幫助。
最后,當看到足夠多的時候。就不會太依賴圖庫,進而能夠將不同的元素進行拆解,形成屬于自己的原創東西。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
在過去幾年當中,插畫開始以一種堅挺的姿勢,站在設計趨勢的最前列。不止是原本身處各個領域的畫手和插畫師開始越來越受追捧,而且連網頁、UI和動效設計師都紛紛學習插畫設計。當然,更顯著的變化,是插畫在網頁和UI中的使用越來越多,越來越頻繁,甚至越來越多樣。
多年來,插畫被廣泛地運用在雜志、圖書、報紙、海報、傳單等不同的傳統載體之上,新的工具和技術使得它更加輕松地植根于數字化媒體當中。
作為設計中,最具有表現力的元素,一張插畫所傳遞的信息比文字更多更豐富。在UI和網頁中,使用插畫來輔助傳達信息,無疑更加直接到位。而插畫的可定制性之強,猶在圖片之上。
插畫在UI界面中的運用,可以說相當廣泛了,它更清晰,更時尚,也可以更加精準,甚至更有表現力,為什么不用呢?就適用范疇而言,我們可以觀察到,它可以運用到這些地方:
頁面主題圖
網頁首圖和Banner
吉祥物和形象插畫
博客文章配圖
新用戶引導教程
工具提示
獎勵頁面和成就頁面
游戲化設計的頁面
通知和系統消息
聊天表情
講故事的輔助配圖
信息圖
營銷和廣告圖
圖標和裝飾性內容
社交媒體頁面
支持性內容的頁面
插畫的適用范圍之廣,這些總結出來的使用場景,并不是全部。插畫本身的屬性很有意思,它連接了設計,作為內容呈現,還帶著明顯的藝術化的屬性。今天的文章,我們總結一下在設計中使用插畫的10個理由和注意事項。
1. 插畫是設計的原創性和藝術性的基礎
無論是印刷品、品牌設計還是UI界面,更加風格化的插畫能夠將不同的風格和創意加入其中,在激烈的競爭中更容易因此脫穎而出。留下用戶才有轉化。
同樣的,在博客、新聞和Banner 中使用插畫,也是看準了插畫可以根據內容進行深度定制的優勢,這種微調能讓內容更加統一一致,更加符合產品目標,借助色彩、角色、環境甚至暗藏的隱喻,來吸引特定的用戶。
2. 插畫是視覺觸發器,瞬間傳達大量信息
我們常說「一圖勝千言」不是沒有道理的。人的視覺感知能力很強,看到圖片的一瞬間,也許還沒有來得及進行邏輯思考,但是大腦已經接收到大量的信息和內容。
心理學研究表明,人類只需要大概1/10秒就可以感知到場景中絕大多數的元素和基本視覺信息。
視覺信息可以更快傳遞到大腦,而重要的信息,人類也通常會被固化為視覺圖像,而非文本化的記憶。
文本需要依托可讀性設計,而圖片和插畫則會被直接識別。
圖片和插畫更容易打破文化和語言隔閡,傳遞內容含義。
對于視障用戶、閱讀障礙用戶和兒童,圖片插畫更容易被理解。
3. 插畫是標題和文本的重要支撐
雖然圖片一瞬間傳遞的信息很多,但是圖片在很多時候是無法提供精準而詳細的內容。用戶依然需要文本來呈現清晰而可以被閱讀和記錄的內容,所以文本依然是不可或缺的。在另外一方面,文本和標題已經具備的情況下,經過定制的插畫能夠輔助用戶理解,更清晰的記憶。
在很多特定的領域,舉個例子比如說金融,插畫能夠借助色彩、圖形和形象來講述故事,讓用戶更清晰的理解復雜的金融功能,甚至強化信任感,而這是文本所不具備的。插畫能帶來強烈的情感連接。
4. 插畫更適宜呈現故事
故事是最令人難忘的內容,劇情的走向和起承轉合會給人留下深刻的印象。而插畫則以清晰的形象將文字和意象勾連起來,無論是在網頁、UI設計還是內容和體驗上,都有著足夠突出的體現。
營造氛圍,渲染情緒,描摹環境,呈現角色,插畫讓故事更加鮮活、易于理解。在內容制造上,有著難以替代的作用。
5. 插畫獨有的情感吸引力
人是情感動物,看似理性的皮囊之下,幾乎每個決定都是在情感和情緒的驅動下完成的。如果某個設計除了能夠幫你達成某個目標,還能讓你感到愉悅,會心一笑,那么通常下一步就是將它收藏起來并且分享給朋友。而在諸多設計因素當中,插畫在撬動用戶情緒這一點上,有著無與倫比的效用——從線條、色彩到面部表情和曲線和動效,都在竭盡全力地為你闡述故事,營造氛圍,將你拉到故事和場景當中去。
6. 插畫賦予設計以美學價值,更容易被接受
即使所有人都在分析和爭論產品的可用性和易用性,大家在對美的追求上,始終保持著一致的態度。一個設計是否具備可取性,是否能夠通過甲方、客戶和實際用戶,是每個設計人都需要面對,都力求做到最好的事情。精心設計的插畫在美學和風格上更加扎實,風格化的設計不弱于現成設計素材所提供的價值。
7. 插畫能讓品牌識別度更高
和文本相比,插畫的視覺化屬性無疑是更強的。圖片插畫所提供的定制化內容能夠從各個方面來貼合品牌的需求,更加到位地表達品牌所需呈現的信息。這也使得插畫不僅僅在品牌宣傳的時候,運用在廣告、海報等顯而易見的地方,而且也成了品牌 APP 中新用戶引導和教程中必不可少的元素。
就像 Perfect Recipes 這個應用的新用戶引導屏中,就借助插畫來呈現。而 Toonie 這個可愛的鬧鐘應用當中,甚至借助游戲化的設計,集成了大量有趣的表情和貼紙,當然,它們都是使用定制化的插畫來呈現的。
8. 數字插畫還能強化交互,應用在短視頻中
數字化的好處就在這里,通過不同的數字軟件,合理的處理之后,不僅能夠變成動態的,運用于視頻當中,還能夠作為微交互,強化產品的整體體驗。
一旦涉及到的動效和短視頻,整個數字插畫就開始具備更多的可能性了,不同的動效能帶來截然不同的感覺和體驗,更不用說這種玩法正貼合時下的流行趨勢。
Whizzly 這個動態圖標就是基于插畫,給一個創意分享社區所準備的。
9. 插畫的獨特性來自于其中的隱喻和引人入勝的視覺
和藝術一樣,設計中同樣需要借助隱喻來傳達一些相對更有趣、更深刻、更有意思的信息。插畫的獨特性也是借此來構成,包含的隱喻使得其中的價值更加復合,值得反復咂摸,而不是一眼就可以完全看穿。
在這個約會應用的網頁當中,插畫無疑傳遞出了多重的信息,暗含的隱喻告知了用戶產品的功能和屬性。而下面這幅插畫則是為一篇如何找到原創風格的文章所準備的,圖中的金魚指代的則是難以被抓住的靈感和風格。
10. 插畫讓用戶可以更快理解和操作
無論是圖標還是大幅的插畫,都能幫助用戶理解,更加直觀地知道要看哪里,要做什么。面對如今的數字界面,用戶的注意力持續的時間越來越短,而插畫則讓用戶更快、更直接地獲取信息,并且決策下一步要做什么。如果插畫或者圖標內容不能被用戶一眼看出來,那么用戶就只能借助文本標簽來了解功能是什么。設計師可以通過測試來測試圖標和插畫的可用性和識別度。
當然,插畫的設計是沒有門檻的,在設計的時候,要求也是比較高的。在使用和設計插畫的時候,需要考慮以下的幾個方面:
目標受眾(身體能力,年齡,文化背景,教育水平等)
產品的使用環境
產品和內容的在全球范圍內和當地的傳播水平
所選圖形的隱喻以及是否容易被識別
插畫是否會讓人分心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn