國潮品牌不斷在社交網絡中刷屏,大白兔、旺旺、RIO、六神、馬應龍、老干媽等品牌通過頻繁地跨界營銷,一躍成為國產“網紅”。對于年輕消費者來說,文化自信、獵奇心理和顏值經濟這3個消費者心理是導致他們更愿意購買國潮品牌的重要原因。
如果追溯本源,“國潮”一詞一開始更加側重是“潮”本身,是大約2000年起,由中國本土設計師或者創立的主理品牌,以獨特、自我為文化內核又融入時尚個性的設計,呈現出以街頭文化為主的穿著打扮和生活方式,為一小撮年輕人所追捧,在小眾圈子里受到追捧。但這時的國潮更像是一小部分年輕人的自娛自樂,還未代入大眾的視野。
后來隨著社會經濟的發展,迎來了國潮文化的轉折點。從2017年開始,伴隨著各種嘻哈節目和街舞節目的走紅,“潮”文化開始反向引爆主流媒體和大眾市場,越來越多的品牌看到了這一片尚未開墾的商業新大陸,越來越多的中國文化愛好者發現了這一片繼續文化核心注入的土地。
“國潮”一詞開始由“國”傾斜。一系列國潮品牌在這個突然開啟的風口被明星和網紅帶了貨,以相對親民的價格和獨特的文化核心走進了大眾市場,也吸引了更多國貨大品牌的加入。
引爆大眾市場的應該是許多中國老字號的“卷土重來”,如2018年李寧攜“悟道”系列登上了2018紐約時裝走秀,融入中國元素的新品引來了國內外主流媒體的報道,也帶來了社交網絡的刷屏,人們開始意識到“國潮”力量。
又如中國奶糖行業老字號品牌大白兔與國內原創品牌氣味圖書館聯名推出的大白兔奶糖沐浴露、香水,還有與“美加凈”聯名的大白兔潤唇膏,驚艷到大眾的視野。還有許許多多的國產品牌回力、哇哈哈、老干媽、百雀羚等都緊抓國潮趨勢,迎合年輕消費者需求不斷創新。
除去這些國產老字號品牌融合潮流外,國潮的發展還包括了文化與創意設計打造的新內容。比如故宮文創,一篇名為《雍正:感覺自己萌萌噠》的文章出現,帶來了超高的閱讀量。
故宮文創產品專賣店、快閃店、以及故宮文化創意產品國際綜合展的開幕讓越來越多的國人與外國人了解并愛上了故宮文創。還有故宮口紅,國家地理眼影等等產品也潮出了街??傊?,一直莊嚴無比的故宮也跟上了時代的腳步玩起了潮流,成為名副其實的國潮。
那么,為什么一直處于小眾市場的國潮風一下子刮到了大眾視野,被人所追捧?以下將從三個消費者心理的角度進行探究。
首先,要想弄清楚消費者心理,必須先弄清我們面臨的是哪些消費者。早在2018年時,尼爾森發布了《2018年第四季度中國消費趨勢指數報告》,報告顯示,90后(1990年-1999年出生)消費意愿為63點,高于80后(60點)、70后(54點)、60后(54點)等年齡段,成為互聯網時代的消費主力軍。
因此,我國目前的消費者群體逐漸年輕化。在報告發布當天,由大學生參與評選的 2018年大學生喜愛的品牌——金塔獎舉行了頒獎儀式,最終,OPPO、聯想、淘寶等9個品類37個品牌獲得年度大學生最喜愛的品牌。
評選結果顯示,國產品牌占了九成,這也意味著,國貨在年輕人消費里占比越來越高。因此,對于年輕消費者來說,究竟是什么心理導致他們更愿意購買國產品牌?
從前的消費主體是70后、80后,他們成長的時代是“洋品牌”的時代,對國外品牌崇拜,而對國內品牌充滿著不信任的心理,導致這一心理很大一部分原因是國產品牌創新意識淡薄,產品質量差。
然而隨著中國經濟的不斷發展, 我國產品質量國家監督抽查合格率已連續4年保持在90%以上,“中國制造”正向“中國質造”方向努力轉變,更多國人對國貨品牌重拾自信。
因此,當代年輕消費者成長的時代實質上是國貨產品崛起的時代,年輕消費者對不斷創新的國貨產品有了一定的信任,不再崇洋媚外。加上中華傳統上下五千年文化一直是中華人民民族自豪感的來源。中華人民對傳統文化一直有著深深的認同感。
因此,“國潮”將傳統文化與時下潮流相融合,既符合年輕消費者對時尚的認知,又能夠吸引他們對中國文化的關注,展現他們對文化價值的認可,同時還能引發年輕群體的情感共鳴,滿足他們的情感寄托。
所以,國潮興起是基于國家對傳承和弘揚傳統文化的大力支持以及新時代下消費者強烈的本土意識和文化認同,而消費者對國家文化的自信是國潮爆火的主導原因之一。
年輕消費者的好奇心比較重, 在進行消費的過程中會受到獵奇心的影響, 年輕消費者對新事物常常會產生較大的興趣, 并且勇于去嘗試, 這也是年輕消費者的消費對象常常帶有個性化風格的主要原因。
因此對于年輕消費者來說,那些銘刻在童年記憶的品牌再次以光鮮亮麗又不失特色的新鮮事物重新進入消費者市場,必定會讓他們眼前一亮甚至感到欣喜。特別是這種新鮮事物深深地迎合了他們內心對本土文化的認同感,獵奇心理便會在年輕消費者的購物中起主導作用。
我們常常說,這是一個“看臉”的時代,顏值即正義,而這一理念,不僅僅是人,更是生活中每一個事物。對于品牌來說,更是要注重顏值經濟,對產品進行“高顏值”包裝是吸引消費者的第一步。
顏值經濟為什么會盛行?信息碎片化已經成為當今的一個時代特征,海量信息不斷分散著人們的注意力,在這樣一個大環境下,高顏值自然成為吸引人們注意的一種方式。同時,消費觀念的轉變讓大家對消費從產品本身轉變為消費符號、社會認同甚至自我個性表達,產品甚至成為年輕人的一種社交“貨幣”。
為什么會在國潮談到顏值經濟?
因為實質上,那些被冠以“國潮”之名的,都有著一個特性,那就是產品本身有著高顏值的外表。
比如,新茶飲領域的頭部品牌喜茶,聯合了眾多新老國貨,以“靈感之茶,中國制造”為口號,無論是主題紙袋、杯套還是雪糕筒、貼紙,都給人一種酷斃了的感覺;比如,美妝領域的網紅品牌完美日記,從單線眼影、九色眼影盤到十二色、十六色眼影盤,既玩轉了經典色的實用性,也擁有了高階色的豐富度。
也就是說,無論對于新手玩家還是專業彩妝師,都能夠被其絢爛的顏值所折服。再有,無論是鐘薛高這樣的網紅雪糕品牌,還是李子柒淘寶店里五彩繽紛的中國傳統美食,無一不是頂著高顏值的外表。在這些高顏值外表下,國潮才能被年輕消費者們認可。
[1] 周暉. 論行為經濟學視角下年輕消費者的消費行為.[J]. 中國商論 2018,(04),54-55
[2] 本刊綜合.百草味:深諳“顏值經濟” 玩轉“色彩營銷”.[J]. 中國合作經濟 2020,(05),33-37
[3] 陳美汐. 試論國潮文化的發展.[J]. 大眾文藝 2020,(06),273-274
[4] 黃夢嵐,莊宇錚,翁文靜,許安心. 中國文化自信對國貨品牌消費的影響.[J]. 商業經濟 2020,(05),68-69
[5] 搜狐新聞 “國潮”IP爆紅背后的4個底層邏輯!. 2020-02-10 . https://www.sohu.com/a/371808278_286549
文章來源:人人都是產品經理 作者:葉艷紅
iOS 14 桌面小組件是這次更新當中的重要功能之一。桌面小組件賦予了 APP 全新的入口,更豐富的交互層級,更多樣的操作模式。
這個在 Android 上存在了十幾年的功能,時至今日,給人的感覺和認知依然不夠強烈——時鐘、天氣、播放控制、快捷開關、待辦事項可能是用得大家最多的幾個小組件,而絕大多數用戶不會主動想到去用小組件功能。
但是簡單地用「抄襲」二字來描述 iOS 14 上的這一特性又欠缺妥當——畢竟早在 2005 年,Mac OS X 10.4 Tiger 中的 Dashboard 就已經把屏幕小組件給玩兒出花來了。
2005年 Macworld 喬布斯演示Dashboard 小組件
Maemo 開發者大會上探討小組件背后的心理學機制
在移動端設備上,單具備觸摸屏功能的系統當中,無論是更早的塞班、Maemo,還是同時期的 webOS、Windows Phone 其實都有各自的 Widgets (WP叫動態磁貼,APP 和組件的融合設計)。其中, Maemo 的設計團隊甚至曾經聘請過心理學和行為學家來專門研究小組件的用戶交互背后的心理學原理。
Windows Phone 中的 APP 快捷方式和小組件是一體化的,多尺寸可選
webOS 中同樣也有屏幕小組件
所以,在今天,更值得我們關注的問題在于:作為目前最主流的 iOS 系統,它的桌面小組件在設計上有哪些講究,而它和 Android 上的桌面小組件有哪些不同?
答案就在 iOS 14 悄悄更新之后的設計規范當中,咱們一起來看看吧。
說明:以下的內容為蘋果官方設計指南(HIG)的翻譯。
小組件能夠提煉 APP 中的關鍵信息,呈現在 iPhone、iPad 和 Mac 當中最為醒目的位置。小組件以一種令人愉悅的視覺和交互形態,幫助用戶個性化地呈現屏幕內容,優化主屏幕的體驗。
小組件在 iOS 14 和 macOS 11 及更高的版本上才可用,而相關的開發人員文檔可以戳這里閱讀:
小組件通常有小、中、大三種不同的大小尺寸,在iPhone、iPad 和 Mac 系統當中,用戶可以在小組件庫當中找到小組件,并且選取合適的尺寸。選擇了小組件之后,用戶可以進入界面編輯模式,在這個模式下,用戶可以移動小組件到想要的位置,并且可以根據需求進行進一步的設置和調整。比如可以在同一屏上放置多個小尺寸的天氣小組件,并且通過設置,讓每個小組件顯示不同位置的天氣。用戶可以將組件放置到主屏幕上,也可以放到 iPhone 的 「今日」頁面上(也就是所謂的最左側的負一屏),iPad 的 「今日」 頁面上,以及 macOS 的通知中心。
在 iPhone 和 iPad 上,小組件還預制了「智能堆棧」功能,也就是說多個小組件可以在同一區域堆疊,同樣的,用戶可以將它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 頁面上?!钢悄芏褩!怪邪幌盗心J小組件,它涵蓋了用戶經常會打開的各種小組件,并且隨著時間的變化,Siri 會幫用戶篩選出最符合當前環境和語境下的小組件內容,突出顯示。如果用戶打開了「自動旋轉」的選項,Siri 同樣可以高亮顯示自定義的小組件堆棧中的相關小組件。
注意:曾經為 iOS 13 以及更早系統版本所設計的小組件,在新版的系統的主屏幕上是不可用的,但是仍然可以在 「今日」 視圖和 macOS 的通知中心使用。
盡管用戶可以點擊小組件進入APP,然后進行更多的操作,但是小組件的核心功能,始終是顯示少量但是即時的、有用且高度相關的信息,讓用戶無需進入 APP 就可以獲取信息。明確每個小組件的核心目標,并且梳理整合需要展現的信息,是整個設計過程中至關重要的一步。
在多數情況下,你需要將你的設計目標梳理得非常明確。比如天氣 APP 的小組件,需要顯示的特定某個位置的天氣信息,而一個卡路里跟蹤的 APP 的小組件需要顯示的,可能是當天消耗的卡路里,而新聞 APP 的小組件可能展現的是熱門資訊。通常,小組件可以很專注地呈現程序的一部分內容,就像游戲當中角色所處的狀態一樣。
在較大的小組件中,你可以顯示更多的數據,或者更詳細的可視化的效果,當然,不管多大,它始終應該專注于做一件事情。例如在較小尺寸的小組件中,可以僅僅顯示當前當地的天氣信息,一天中的最高溫度,而在中等尺寸的小組件中,同樣的數據也被列舉出來,但是額外增加了 6 個小時的天氣預報。在大尺寸的小組件當中,可以在6小時預報的基礎上,還額外展現未來 5 天的天氣預報。
小尺寸小組件
中尺寸小組件
大尺寸小組件
人們真正喜歡小組件的地方,是它能夠提供有意義的信息內容,而不是提供另外一個程序快捷方式。
通常,設計師需要避免簡單地擴大小組件的尺寸而不針對性地修改內容,創建的小組件尺寸變化的同時,它的內容也應該進行相應的優化和改變。
如果小組件的內容沒有變化,那么用戶可能不會將它置于醒目的位置。盡管小組件不太可能每分鐘都有所更新內容,但是盡量保持更新的內容,可以更多地吸引用戶的目光,這一點很重要。
比如日歷的屏幕小組件,可以針對特定的時間和事件進行獨特的視覺處理,比如在生日的展現方式就不一樣。
在許多情況下,用戶需要提供特定的信息之后,屏幕小組件才能顯示有效的內容。比如,用戶在使用天氣APP的小組件的時候,需要先選擇特定的地點;使用股票APP的小組件的時候,需要選擇特定的一支股票。不過也有例外的情況,比如 Podcasts(博客) 的小組件默認顯示最近內容,因此用戶無需預先進行配置就可以直接使用。
這些在使用前要進行的配置選項,不應當要求用戶進行過多的設置才可使用,應當足夠便捷。同時,用戶也無需針對小組件的 UI 進行配置,因為桌面小組件的 UI 界面對于用戶而言,是已經配置好的。相關的開發文檔可以戳這里查看:
當用戶點擊小組件的時候,它可以打開 APP 當中對應的頁面和位置。比如,當用戶點擊股票APP 對應的小組件的時候,由于小組件顯示的是特定的股票的信息,所以點擊小組件之后打開 APP ,APP 應該顯示的是這款股票所在的頁面和完整的信息。
通常最小尺寸的小組件可以提供一個可點擊的元素,而在中大尺寸的小組件當中,可以提供多個可點擊元素,比如中尺寸的筆記 APP 小組件當中,可以添加多個筆記條目,點擊其中任意一個可以顯示對應的筆記內容。
盡管有多個可點擊元素對于 APP 而言非常有意義,但是提供過多的可點擊元素,可能會讓用戶迷惑且無法正確點擊對的目標。
在有的 APP 當中,用戶登錄之后可以獲取更多的功能和服務,可以在小組件中讓用戶知道這一點。比如,對于一款預訂類的 APP,可以在小組件中包含「登錄以查看預訂」這樣的提示。
為了保持小組件內的信息的相關性和有效性,小組件應該定期刷新以更新內容。小組件不支持連續的實時更新,并且系統會基于種種因素,來調整和限制其內容的更新頻率。為了讓小組件找到對的更新頻率,你需要知道你的 APP 的內容更新頻率,并且預估用戶會多久查看一次新的數據。舉個例子,潮汐變化雖然是實時的,但是用戶追蹤海灘潮汐信息變化也通常是以小時來計算的。如果你注意到用戶查看小組件的內容頻率變化,超過了它的信息更新頻率,那么你可以考慮在小組件中顯示上次更新的時間節點,以便用戶知曉它的更新頻率。相關的開發人員文檔看這里:
小組件本身的更新頻率是受限的,你可以讓系統來直接更新其中的時間和日期,將注意力集中到開發它的其他功能上。
如果你確定了數據的更新頻率,就沒有必要將舊有的信息作為占位符來使用。
在 iOS 14 以及更高的版本當中,小組件可以使用豐富且大膽的配色,使用令人回味的配圖以及清晰的文本,所有的這些優質的設計素材可以讓小組件中的信息和功能一目了然。獨特、精美的小組件不僅提供有效的信息,而且還能讓整個屏幕內容個性十足。
如果你需要在小組件中呈現品牌LOGO、文字名稱、應用圖標,那么盡量以無干擾的模式來將內容集成到其中。在某些情況下,比如當你使用屏幕編輯模式來調整布局的時候,系統會在小組件的下方顯示對應的 APP 的名稱和信息,因此你無需在小組件中再做強調,盡量以色彩、版式等視覺設計來凸顯它的特征。
如果小組件中信息過于稀疏,那么它看起來不太具有存在的必要;如果信息量太過于密集,則可能讓整個小組件顯得臃腫密集且難于使用。你需要尋求合理整合內容的方法,確保人們能夠立刻掌握信息,尤其是基本的信息,并且可以在此基礎上花費更多的時間來查看細節。你可能在更大尺寸的小組件上,用信息圖來替代簡單的文本,這樣也不會讓信息過載,但是呈現形式上的改變,會讓體驗變得更好。
豐富漂亮的色彩是非常吸引人的,但是色彩決不能影響用戶吸收和了解基本的信息。色彩應該可以作為提升整個小組件視覺屬性的一種重要手段,但是它一定不能喧賓奪主,影響內容本身。在 iOS 14 的設計素材中,內置了一系列的系統推薦用色。
小組件應該在深色和淺色模式下都看起來非常棒才行。通常,盡量避免在深色模式下,使用淺色的小組件背景并搭配深色的文本,或者在淺色模式下,使用淺色文本搭配深色背景。當你根據使用 iOS 系統內置的語義配色系統來配置背景和文本配色的時候,色彩可以根據你當前的環境,自動匹配。
當然你還可以借助現成的設計素材來手工配置和選擇。詳細的使用說明可以參考下面的鏈接:
使用系統字體能夠能夠讓你的小組件看起來非常原生,并且不論是什么樣的文本字重、樣式,都非常的美觀。如果你使用其他的第三方字體,可能很難做到這一點。當然,如果僅僅是在小組件的標題中使用自定義的第三方字體,而正文和其他的文本字體使用 SF Pro,效果也可以做到很棒。具體可以參考下面的規范:
確保小組件中文本正確調用字體,而不是被柵格化之后的視覺元素,這樣可以讓系統內置的 VoiceOver 讀取其中的內容。
SF Symbols 能夠幫助你讓符號圖標以及 SF Pro 的文本可以正確對齊和縮放。相關的內容可以參考下列規范:
當小組件在加載相應的數據之后,就可以顯示占位符的內容了,但是這些占位符信息應該足夠逼真才能幫助用戶認識它。將 UI 中靜態的框架和視覺化的占位符結合起來就可以創建出可供識別的預覽模式。比如使用半透明的條狀矩形來作為文本占位符,使用圓環或者正方形來替代圖像和符號。
小組件的描述能夠幫助用戶更清晰地了解它的功能。巧妙地使用引導性動詞能夠更好地幫助用戶了解它的功能。比如,「查看當前天氣狀況和位置」以及「跟蹤即將開始的活動和會議」。避免不必要的短語,盡量使用平易近人的表達方式。
屏幕小組件可以縮放以適應不同的屏幕尺寸,除了使用 SF Pro 和 SF Symbols 之外,你還需要控制好小組件的尺寸,確保在每個不同的設備屏幕上看起來都很舒適。
為了確保你的圖片素材在最大的小組件上看起來都是不錯的,可以盡量按使其按比例縮放來匹配較小尺寸小組件的顯示。下面是尺寸規范:
為了確保你的設計和小組件完美的匹配起來,請注意匹配兩者的角半徑,在 SwiftUI 容器內設置正確的角半徑。相關的開發文檔看這里:
標準的邊距為 16pt,如果你的小組件當中包含有文本、圖形等元素,請使用標準邊距以避免邊緣擁擠導致體驗不佳。如果使用圖形背景來創建分組,或者有按鈕元素,那么你可能需要使用窄邊距(8pt)。
iOS 和 Android 是目前最主流的兩大移動端操作系統,其中 Android 平臺的小組件出現得相對更早。但是相比于更加統一的 iOS 平臺,百花齊放的 Android 第三方定制化的系統,加上相對寬松的開發機制,使得 Android 平臺上的小組件設計極度缺乏統一性。
在 Google Design 頁面當中,Material Design 的設計規范在很大程度上已經比 iOS 更加豐富,但是在小組件設計這一章節的內容,可以用簡單粗陋來形容。
設計規范中,相對簡單地展示了 Android 小組件的4個常見類別,以及4種常見交互。下面是對 Android 這套寬松簡單的設計規范的快速歸納:
信息展現型小組件是將對于用戶重要的信息,隨著時間推移來呈現,比如時間、天氣、運動狀況,點擊即可帶用戶跳轉到 APP 當中。
信息集合型小組件會顯示更多的信息,它專注于兩個交互:瀏覽收藏和打開詳細信息。
控制型小組件的功能是在不打開 APP 的前提下,直接觸發某些 APP 的功能,比如音樂控制。
混合型小組件可以將多種功用混合到一個小組件當中。
Android 小組件通常支持4種交互,一種是滾動瀏覽,一種是尺寸調整縮放,還有就是導航操作,比如跳轉到特定APP當中,最后一種是進行配置調整,比如對組件中的元素進行調整。
單從信息量上來說,Android 系統的小組件設計指南僅僅只是做了最基礎的指引,考慮到生態的開放性,這種「放任」是很自然的一件事情。
從 iOS 14 開始,蘋果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的聯動與融合,已經變得非常深入了。而 iOS 系統的復雜性開始顯露,小組件就是其中的一環。
和蘋果一貫以來的UI設計類似,它有著開放的一面,但是它的另一面是約束,這種約束很巧妙,比如說深色模式,你使用官方的設計和開發素材,調用官方的組件,能很快實現頗為不錯的效果,但是與此同時,你的設計和開發空間也受到了相應的約束。
在 Android 上,小組件可以更為自由地調整尺寸,但是誰都無法準確預知它在某一款手機上,整體的體驗是什么樣的。這個小組件的邊緣會和哪個圖標對齊,風格是不是一致的?這種問題在 iOS 14 上很大程度上是不存在的,單尺寸問題就已經進行了極為詳盡的約束——它一定會對齊,在體驗上幾乎不太可能跑偏。
從小組件開始,我們迎來一個更加豐富、復雜的 iOS 系統。
文章來源:優設 作者:陳子木
設計美觀、和可用的UI界面需要花費很長的時間,還需要來回多次的設計修改。
經過不斷地調整,最終才能產出令客戶、用戶和自己真正滿意的產品。
在這里,我們總結了一些實用的小技巧,這些技巧可以幫助設計師很輕松地改善設計,并為以后的設計實踐提供有用的指導。
當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。
通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。
當字體變小時,增大行高可以獲得更好的可讀性和易讀性。
這里介紹兩個容易被混淆的概念——行高和行間距:
設計時不必總是用多種顏色來填充設計。
如果項目允許,只需使用固定的色板,通過選擇基礎色,然后調整色調和顏色深淺,利用這種簡單的方式為設計增加一致性。
通過結合使用字體大小、權重和顏色,可以輕松突出UI中最重要的元素。進行簡單的調整即可使用戶體驗更好。
在設計UI圖標時,要保持一致。確保它們具有相同的視覺樣式,相同的比重、填充或輪廓。
圖標通過視覺手段為用戶提供必要的信息,所以保證功能相同的圖標元素一致,外觀視覺一致。
通過使用顏色對比、尺寸和標簽,確保「行為召喚」盡可能突出。
如果可以的話,不要總依賴圖標,也可以使用文本標簽,以便用戶能更好地理解。
行為召喚:透過設計讓用戶想到要做某種行為,例如提示用戶去觸發按鈕、文本或圖片。
填寫任何形式的表單時,在用戶剛進行的操作旁邊及時出現一條錯誤反饋,是一個簡單但有用的額外視覺輔助。
設計要在產品內部使用的菜單時,請確保在屏幕上突出顯示最常用的操作(如上傳圖像、添加文件等)。
文章來源:優設 作者:Clip設計夾
共情圖、客戶旅程圖、體驗地圖和服務藍圖雖然分別描述了不同的流程,并帶有不同的目標,但它們都是一個組織內部建立共識的重要方法。
設計和研發一款產品通常需要組建一支人員復雜的團隊,成員有著不同的背景和經驗,他們必須在項目目標,用戶需求和行為,甚至是開發組件流程上有著共同的認知。這種共識一般是建立在可視化(通常指的是各種地圖)基礎之上的。 可視化地圖(mapping)可以有效地描述與產品相關各方面的特點和流程。
本文概述了4種常見的地圖,它們的特征定義以及應用場景:共情圖;客戶旅程圖;體驗地圖;服務藍圖
此外,本文將介紹簡單的「3步決策法」框架,說明創建這些地圖前需要做出哪些關鍵決策。
共情圖用來幫助團隊成員理解用戶的心智。
定義:
共情圖是一種用來明確表達我們對某一特定類型用戶認知/理解的工具。它將用戶知識具像化,以便于建立共識;輔助決策。
特點:
為什么用:
什么時候用:
客戶旅程圖關注特定客戶/顧客與產品/服務的交互。
定義:
客戶旅程圖是將一個人為了完成與特定業務或產品相關的目標所經歷的流程可視化。它用于理解和解決客戶需求和痛點。
在客戶旅程圖最基本的形式中,它首先把一系列的用戶目標和用戶行為放到以時間軸為主線的框架中去。接下來,以用戶的想法和情感來充實框架,從而構建一個完整的敘述。最后,將敘述凝練成可視化的形式,用來在設計過程中交流觀點。
特點:
為什么用:
什么時候用:
在設計過程中的任何時候,作為整個產品設計周期中團隊的參考點
體驗地圖涵蓋了跨用戶類型和產品的客戶旅程圖。
定義:
體驗地圖是對「一般人」為了完成一個目標經歷的整個端到端的體驗可視化呈現。這種體驗與特定的業務和產品無關。它用于理解一般人的行為(這與客戶旅程圖不同,客戶旅程圖更具體,更加關注與特定業務相關的內容)。
特點:
為什么用:
什么時候用:
與客戶旅程圖相似,但服務藍圖會以員工為中心。
定義:
特點:
為什么用:
什么時候用:
在繪制地圖之前(無論上面哪一種),必須做出如下3個關鍵決策:
決策1:現狀 vs 未來
第1個決策涉及到可視化地圖中「行為」和「狀態」的描述:它們反映的是當前狀態還是理想狀態?
現狀地圖(Current mappings)是基于真實的「當下」狀態制作的地圖。如果目標是識別和記錄現有問題和痛點時,這種方法比較理想。用現狀地圖有助于分析研究結果,亦或是圍繞數據驗證問題在團隊內達成共識。
未來地圖(Future mappings)是基于用戶類型、體驗、或者未來的服務架構的一種「理想」狀態制作的地圖。未來地圖有助于重塑或構想一個用戶或者體驗在未來的感受。未來地圖可以為你理想中的產品或者服務設定一個基準或者目標。
決策2:假設 vs 研究
該決定取決于將用于構建地圖的輸入類型。
假設型地圖(Hypothesis mappings)是基于團隊或組織機構中對現狀理解的累積。這種方法很好,可以合并多個已知的團隊視角,并建立一個研究計劃(基于假設地圖中出現的差異),進而成為邁向更具高保真度的和研究型地圖的基礎。
研究型地圖(Research mapping )是基于數據導向的,這些數據是為構建地圖而專門搜集的。如果有充裕的時間和資源用于制定研究計劃,那這種方法是最好的。雖然這是建立地圖的最佳方式,但是它需要大量時間和的投入。不管從哪里開始,你的地圖都應該是可以迭代的,并不斷把新的發現更新進去。
決策3:低保真 vs 高保真
這個決策關系到最終可視化地圖呈現的質量。
低保真地圖(Low-fidelity maps)往往未經打磨,通常以靈活、粗糙的便簽制作。低保真地圖在流程的初始階段是最好用的。低保真地圖意味著很少的投入或創造工作,并且使人們能夠根據需要進行協作、修訂和更新。你可以使用便簽(直接貼在墻上或者像Mural.co這種數字化的工具)或者協作的excel表格進行制作。
高保真地圖(High-fidelity maps)是經過細致打磨的,通過數字化創建并看起來更像是成品。高保真地圖最適合創建需要在團隊多人之間分享的地圖。高保真地圖很容易理解,但是因為看起來是「成品版」,所以不夠靈活。這種地圖一般是數字化的格式,便于傳播。
所有的用戶體驗類地圖都有2個好處。首先,創建地圖的流程促進了溝通交流,并建立一致的心智模型。其次,由地圖產生的共享內容,可以在你的團隊、織機構或者合作伙伴之間使用,以傳達你對用戶或服務的理解。地圖也可以隨著團隊的成長,為決策提供依據。
選擇A地圖而不用B,并不會導致項目失敗或者保證項目成功。理想的狀況下,你應該根據需要,在項目的不同階段使用這4種地圖的不同組合,以便深入了解你的用戶和組織。
文章來源:優設 作者:UXRen
線是平面構成的三大要素之一,在各類設計中都有著廣泛的應用,而其中的斜線更是設計師非常喜歡的元素,相比水平和垂直的線,斜線更特別、更具動感,下面我們來看看斜線有哪些主流且強大的用法。
區隔信息是斜線最常見的用法,通常用來區隔左右、左上和右下兩部分的信息,用斜線區隔的內容不需要對齊排列,這樣看起來更靈活一點。
在海報設計中就經常用斜線來區隔年月日等日期信息。
很多簡單的元素完整呈現出來時會顯得很普通,這時依據斜線將其切割可以增加設計感,即切除元素的局部,只保留元素剩余的部分以及斜線,元素被切割后的不完整性會增加元素的獨特性和神秘感,所以更容易讓人眼前一亮。
PS:切割的時候要注意保留元素的美觀性和識別性。
由于斜線具有一定的動感,通過重復排列后又具有節奏感,且線本身占面積比較小,不會對畫面造成太大干擾,所以很適合用作裝飾元素,斜線主要是從以下幾方面來起到裝飾作用的。
1. 增加動感
一些以文字為主且文字是水平或垂直排列的設計,可能會因為太過常規或缺少對比而缺乏動感,這時在文字周圍增加一些平行的斜線,使其與主體形成方向對比,就可以大大提升該設計的動感。
2. 增加氛圍
比如在一些促銷設計中,如果畫面中缺少裝飾元素的點綴,那么促銷的氛圍也可能會有所欠缺,這種情況下,我們也可以通過增加斜線來改善,這里使用的斜線可以有粗細和顏色的變化。
PS:斜線的方向要統一。
3. 增加細節
比如很多畫面的背景太單調,我們就可以把重復排列的斜線放進背景里做底紋,這樣的背景感覺更豐富,而且用斜線做底紋不會對主體造成太大干擾。
PS:把斜線排成一個圓,具有不錯的裝飾效果。
在排版時可能會遇到這樣的情況,比如我們想采用某種形式排版,但由于缺少內容或圖片輪廓有限制,所以這么排會引起版面的失衡,這時可以用斜線來填充空白,以達到版面平衡的效果。
由于設計的版面通常都是矩形的,以至于斜線天生就顯得比較特別,所以在設計中合理的使用斜線可以增加其設計感。
例如下面這張海報作品,如果沒有中間的斜線它也會是一件不錯的版式作品,但是有點常規,所以設計師用一根斜線穿過整個畫面,打破了這種常規,給這件作品帶來一種不一樣的感覺。
PS:貫穿畫面的斜線不能影響文字的識別性,且不能從人物的臉部穿過。
最后總結一下,斜線的主要功能有:區隔信息;分割元素;裝飾;平衡;創造形式。光說不練假把式,大家在排版時記得多嘗試一下斜線。
文章來源:優設 作者:蔥爺
藍藍設計的同事們,在積累了一定經驗的同時,也在不斷的學習和豐富關于網站及數據可視化的表達方式,搜集資料,作為大屏及數據可視化界面設計資料的參考,分享如下:
希望這篇文章可以幫到您!
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
——-- 網站ui設計 --——
(圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
與傳統PC桌面不同,手機屏幕的尺寸更加小巧操作,方式也已觸控為主,APP界面設計不但要保證APP功能的完整性和合理性,又要保證APP的功能性和實用性,在保證其擁有流暢的操作感受的同時,滿足人們的審美需求。
接下來為大家介紹幾款手機appui界面設計
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
--手機appUI設計--
(以上圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
隨著大數據產業的發展,越來越多的公司開始實現數據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業。此時,用戶界面設計者需要呈現相應的視覺效果。接下來為大家介紹大屏可視化的UI設計。
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
--大屏UI設計--
(圖片均來源于網絡)
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章:
在這里,我們將研究設計中最簡單、因而常常被低估的活動之一,即線框圖的設計。了解什么是線框圖,為什么需要設計它們以及如何充分利用線框圖。
線框圖,也稱為頁面示意圖或屏幕藍圖,是展示網站或產品框架的視覺指南:
線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件,以及這些元素之間的相互作用。
1. 幫助團隊評估和完善工作范圍
線框圖允許設計師快速創建產品的視覺表現,方便后期修改;
幫助設計師向團隊展示應用程序具有的頁面元素和控件,以及所有元素如何進行交互。
2. 讓團隊所有成員參與產品設計
線框圖的使用允許設計師和開發人員在早期階段共同參與討論設計,在開始進行視覺設計之前就提供反饋和更改建議。
這樣有助于使設計過程快速迭代,避免不必要的浪費。
3. 方便快速演示
從客戶和利益相關者那里獲得快速反饋是設計過程的重要組成部分。
設計過程中,經常會遇到需求的來回變化。有了線框圖,可以使這個過程更有效,修改原型比修改線框圖需要更多的時間和精力。
4. 進行用戶測試
線框圖可以幫助設計師從潛在用戶那里獲得有用價值的反饋。同時瀏覽線框比讀取規范要快得多,還有助于減小與預期效果的差異。
為了獲得最好的結果,為下一步的 UI 打下堅實的基礎,需要遵循幾個簡單的規則:
1. 顏色的使用
如果在線框圖中使用豐富的配色,可能會分散觀者的注意力,并使更新變得更困難。
但在某些情況下,使用顏色突出顯示特定組件是合理的。例如,可以將紅色用于錯誤狀態,將藍色用于注釋等。
2. 使用簡單的組件
線框圖并不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單,讓團隊成員更容易識別。
為組件添加細致的陰影、粗細描邊將花費大量的時間和精力,卻不是很實用。
3. 保持一致性
在所有線框圖中,類似的組件必須看起來相同。如果相同的組件看起來不同,開發人員可能會質疑它們的功能是否相同,甚至會因為設計不同而增加估算時間。
在處理線框圖時,記住一個簡單的規則:保持一致,避免造成混淆。
4. 使用真實內容
我們會常看到UI/UX設計師沒有在線框圖上添加真正的內容,而是重復使用同一些文本。這是很少有設計師意識到的普遍錯誤。
內容真實與否會影響接下來的設計。如果使用不真實的內容,UI設計中文本的數量多少和排布方式都要再調整。
真實內容能給線框圖增加價值,更好地解釋上下文。
5. 使用注釋
設計中可能會遇到某些解決方案無法直觀地加以說明的情況,例如某些控件背后的邏輯,因此開發人員可能會對它們有疑問。
在這種情況下,可以提供注釋來解釋其背后的邏輯。這樣,你的團隊就會理解你的解決方案,你就不需要花時間再討論它們。
6. 線框圖程度
線框圖應該選擇低保真還是高保真,沒有嚴格的規定,取決于項目的具體要求。
硅谷知名作家埃里克·萊斯認為,如果不能帶來價值就不需要做額外的工作,從基礎做起,然后根據需要添加細節。
7. 將線框圖延伸到交互原型中
在使用不同產品時,有一些簡單而通用的交互,也有一些交互相當復雜。
在線框圖不足以說明復雜性的情況下,可以將線框圖擴展到交互原型中,而不必寫冗長的注釋并花大量時間進行解釋。
將線框圖結合到設計過程中,為我們所用:
文章來源:優設 作者:Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一張海報優劣與否,見仁見智,每個人都有自己的審美。
所長經常聽到設計師們為一張海報唇槍舌戰。但無論審美或者風格如何獨特,一張優秀海報都有基本的評判標準,可能是畫面美,也可能是準確傳達電影內容。本期我們來看看國外的設計師是如何評判一張海報的優缺點。根據文章內容,所長也為大家精選了同類型的海報,美圖共賞。
(文章來源The Glantz 工作室, 設計師Rebecca/佚名,下文分別簡稱R和E)
說到奧斯卡,每個人談論的都是最佳影片,那最佳海報呢?
The Glantz 工作室在最佳影片提名中投票選出最愛的海報,并邀請團隊中高級設計師解讀電影海報的優勢與劣勢。這些被選中的海報都有四個重要的組成,分別是引人注目的標題、字體組合、畫面、構圖。優秀的海報使我們能更貼近銀幕上的故事。借第90屆奧斯卡獎提名作品我們來談談優秀電影海報設計的幾大特征。
《華盛頓郵報》設計 BLT Communications
R:這是我最喜歡的海報。
E:我覺得很簡約,但是畫面喪失了平衡感。
R:我不同意,畫面頂端的名字和底部的人物保持了平衡。
E:也許是缺少對稱整齊的感覺。
R:我反而喜歡這種不對稱。我沒有看過這部電影,通過海報我能感受到電影的情緒,因為不對稱的畫面帶來了不和諧的感覺。重復的樓梯和這種壓倒性的視角,都告訴主角在面對復制的局面,有很多困難需要跨越。
E:別忘了細節,極簡的字體排版和樓梯的紋理形成平衡感。是一張有趣的海報。
△ 《華盛頓郵報》海報
《水形物語》設計 James Jean
E:太美了,聚光的感覺非常吸睛,細節很多。乍看會忽略背景,隨著深入觀察會感受到畫面層次感鮮明。
R:光線很美,看到他們在擁抱就知道是個浪漫的故事。在深海之下的擁抱浪漫到不真實。
△ 《水形物語》《熱帶雨》海報
《三塊廣告牌》設計 BOND
R:風暴將至,厄運降臨的畫面意向和配色,暗示將要發生一些事情。畫面通過風暴來體現電影發生的地點,三塊廣告牌在畫面底部,并不明顯。電影logo的設計很精彩,我們從未在其他海報上看到過,字體顏色和夕陽的顏色有連貫性。
E:我同意Rebecca。這張海報用場景來表現沖突感,很簡單但是裝飾性極強的排版。
△ 《燈塔》《流浪地球》海報
《敦刻爾克》設計 Concept Arts
E:海報給人不安的感覺。
R:中心對稱很平衡
E:平衡感和逆光,戰爭發生當下的混亂。
R:當你在看海報上的人物,你也能跟隨著他的視角,直面戰場,是諾蘭導演的風格。
E:海報底端高亮的宣傳語「由《黑暗騎士三部曲》《盜夢空間》《星際穿越》導演指導」,以暗示這部電影與諾蘭的電影是同級別大片。
△ 《1917》《血戰鋼鋸嶺》海報
《請以你的名字呼喚我》設計 N/A
R:有點獨立電影的感覺。
E:海報選擇的人物狀態很打動人,畫面中心對稱。但是海報上有太多輔助信息和版權印,有點干擾主題和畫面層次。手寫的標準字和人物可以再向上移動,不會被底部版權信息干擾。
R:這是一部小體量影片,不像《華盛頓郵報》有知名度高的演員可以作為影片買點被設計在海報上?!墩堃阅愕拿趾魡疚摇返暮蟾鼘W⒃谌宋餇顟B和排版設計。
△ 《請以你的名字呼喚我》《一個明星的誕生》《燃燒女子的肖像》海報
《至暗時刻》設計 Empire Design
E:人物形象和透明度都做的很好。
R:看到海報就確切知道電影將要講述的故事,角色的狀態和海報上的「大師之作」四個字,這就是電影的全部。畫面底部淡入的人像讓畫面更有層次感,人物形象也變得立體了。
△ 《悲夢》《波西米亞狂想曲》《小丑》海報
《逃出絕命鎮》設計 LA
E:海報的構圖很特別,用碎片化的方式展示了劇情,暗示了故事發展。所有人物都沿著玻璃的痕跡相交然后被打破。唯一的缺點是右下角的字體排版太擁擠。
R:海報信息量很大。
△ 《玻璃先生》《貼身保鏢》海報
《伯德小姐》設計 BLT Communications
R:故事發生在天主教學校,電影標準字有宗教的感覺,讓觀眾對電影有基本的了解。人物形象的選擇能讓人感受到這個女孩的性格。
E:海報頂部的人物名字有不同顏色,像教堂的彩色玻璃窗,很微妙。
△ 《只是丟了手機》《送我上青云》海報
《魅影縫匠》設計 Midnight Marauder (繪畫 Tony Stella)
E:水彩效果很美,人物很傳神,人物腿部有點混色,使畫面底部尤其是雙腿變得不清晰。字體和排版很古典。
R:使我想起一些基于插畫的經典電影海報。
△ 《魅影縫匠》《小姐》《春潮》海報
最佳海報將會是…
如果奧斯卡邀請我們工作室評選最佳海報,我們的答案是《華盛頓郵報》。這張海報符合優秀海報的四個構成。雖然我們看好《華盛頓郵報》,但還是坐等最佳影片花落誰家。
看了這期內容后,能否在奧斯卡級別的海報上找到一些共性呢?今后所長還會定期搬運新鮮有料的好文分享給大家。
文章來源:優設 作者:影視物料研究所
藍藍設計的小編 http://www.syprn.cn