首頁

為什么國潮品牌這么火?從消費者三大心理角度分析探究

資深UI設計者

國潮品牌不斷在社交網絡中刷屏,大白兔、旺旺、RIO、六神、馬應龍、老干媽等品牌通過頻繁地跨界營銷,一躍成為國產“網紅”。對于年輕消費者來說,文化自信、獵奇心理和顏值經濟這3個消費者心理是導致他們更愿意購買國潮品牌的重要原因。

一、什么是國潮?

如果追溯本源,“國潮”一詞一開始更加側重是“潮”本身,是大約2000年起,由中國本土設計師或者創(chuàng)立的主理品牌,以獨特、自我為文化內核又融入時尚個性的設計,呈現(xiàn)出以街頭文化為主的穿著打扮和生活方式,為一小撮年輕人所追捧,在小眾圈子里受到追捧。但這時的國潮更像是一小部分年輕人的自娛自樂,還未代入大眾的視野。

后來隨著社會經濟的發(fā)展,迎來了國潮文化的轉折點。從2017年開始,伴隨著各種嘻哈節(jié)目和街舞節(jié)目的走紅,“潮”文化開始反向引爆主流媒體和大眾市場,越來越多的品牌看到了這一片尚未開墾的商業(yè)新大陸,越來越多的中國文化愛好者發(fā)現(xiàn)了這一片繼續(xù)文化核心注入的土地。

“國潮”一詞開始由“國”傾斜。一系列國潮品牌在這個突然開啟的風口被明星和網紅帶了貨,以相對親民的價格和獨特的文化核心走進了大眾市場,也吸引了更多國貨大品牌的加入。

引爆大眾市場的應該是許多中國老字號的“卷土重來”,如2018年李寧攜“悟道”系列登上了2018紐約時裝走秀,融入中國元素的新品引來了國內外主流媒體的報道,也帶來了社交網絡的刷屏,人們開始意識到“國潮”力量。

又如中國奶糖行業(yè)老字號品牌大白兔與國內原創(chuàng)品牌氣味圖書館聯(lián)名推出的大白兔奶糖沐浴露、香水,還有與“美加凈”聯(lián)名的大白兔潤唇膏,驚艷到大眾的視野。還有許許多多的國產品牌回力、哇哈哈、老干媽、百雀羚等都緊抓國潮趨勢,迎合年輕消費者需求不斷創(chuàng)新。

除去這些國產老字號品牌融合潮流外,國潮的發(fā)展還包括了文化與創(chuàng)意設計打造的新內容。比如故宮文創(chuàng),一篇名為《雍正:感覺自己萌萌噠》的文章出現(xiàn),帶來了超高的閱讀量。

故宮文創(chuàng)產品專賣店、快閃店、以及故宮文化創(chuàng)意產品國際綜合展的開幕讓越來越多的國人與外國人了解并愛上了故宮文創(chuàng)。還有故宮口紅,國家地理眼影等等產品也潮出了街??傊恢鼻f嚴無比的故宮也跟上了時代的腳步玩起了潮流,成為名副其實的國潮。

那么,為什么一直處于小眾市場的國潮風一下子刮到了大眾視野,被人所追捧?以下將從三個消費者心理的角度進行探究。

二、消費主體年輕化

首先,要想弄清楚消費者心理,必須先弄清我們面臨的是哪些消費者。早在2018年時,尼爾森發(fā)布了《2018年第四季度中國消費趨勢指數(shù)報告》,報告顯示,90后(1990年-1999年出生)消費意愿為63點,高于80后(60點)、70后(54點)、60后(54點)等年齡段,成為互聯(lián)網時代的消費主力軍。

因此,我國目前的消費者群體逐漸年輕化。在報告發(fā)布當天,由大學生參與評選的 2018年大學生喜愛的品牌——金塔獎舉行了頒獎儀式,最終,OPPO、聯(lián)想、淘寶等9個品類37個品牌獲得年度大學生最喜愛的品牌。

評選結果顯示,國產品牌占了九成,這也意味著,國貨在年輕人消費里占比越來越高。因此,對于年輕消費者來說,究竟是什么心理導致他們更愿意購買國產品牌?

1. 消費者有著越來越高的文化自信

從前的消費主體是70后、80后,他們成長的時代是“洋品牌”的時代,對國外品牌崇拜,而對國內品牌充滿著不信任的心理,導致這一心理很大一部分原因是國產品牌創(chuàng)新意識淡薄,產品質量差。

然而隨著中國經濟的不斷發(fā)展, 我國產品質量國家監(jiān)督抽查合格率已連續(xù)4年保持在90%以上,“中國制造”正向“中國質造”方向努力轉變,更多國人對國貨品牌重拾自信。

因此,當代年輕消費者成長的時代實質上是國貨產品崛起的時代,年輕消費者對不斷創(chuàng)新的國貨產品有了一定的信任,不再崇洋媚外。加上中華傳統(tǒng)上下五千年文化一直是中華人民民族自豪感的來源。中華人民對傳統(tǒng)文化一直有著深深的認同感。

因此,“國潮”將傳統(tǒng)文化與時下潮流相融合,既符合年輕消費者對時尚的認知,又能夠吸引他們對中國文化的關注,展現(xiàn)他們對文化價值的認可,同時還能引發(fā)年輕群體的情感共鳴,滿足他們的情感寄托。

所以,國潮興起是基于國家對傳承和弘揚傳統(tǒng)文化的大力支持以及新時代下消費者強烈的本土意識和文化認同,而消費者對國家文化的自信是國潮爆火的主導原因之一。

2. 年輕消費者對購物有著獵奇心理

年輕消費者的好奇心比較重, 在進行消費的過程中會受到獵奇心的影響, 年輕消費者對新事物常常會產生較大的興趣, 并且勇于去嘗試, 這也是年輕消費者的消費對象常常帶有個性化風格的主要原因。

因此對于年輕消費者來說,那些銘刻在童年記憶的品牌再次以光鮮亮麗又不失特色的新鮮事物重新進入消費者市場,必定會讓他們眼前一亮甚至感到欣喜。特別是這種新鮮事物深深地迎合了他們內心對本土文化的認同感,獵奇心理便會在年輕消費者的購物中起主導作用。

3. 年輕消費者有著對“顏值經濟”的追捧

我們常常說,這是一個“看臉”的時代,顏值即正義,而這一理念,不僅僅是人,更是生活中每一個事物。對于品牌來說,更是要注重顏值經濟,對產品進行“高顏值”包裝是吸引消費者的第一步。

顏值經濟為什么會盛行?信息碎片化已經成為當今的一個時代特征,海量信息不斷分散著人們的注意力,在這樣一個大環(huán)境下,高顏值自然成為吸引人們注意的一種方式。同時,消費觀念的轉變讓大家對消費從產品本身轉變?yōu)橄M符號、社會認同甚至自我個性表達,產品甚至成為年輕人的一種社交“貨幣”。

為什么會在國潮談到顏值經濟?

因為實質上,那些被冠以“國潮”之名的,都有著一個特性,那就是產品本身有著高顏值的外表。

比如,新茶飲領域的頭部品牌喜茶,聯(lián)合了眾多新老國貨,以“靈感之茶,中國制造”為口號,無論是主題紙袋、杯套還是雪糕筒、貼紙,都給人一種酷斃了的感覺;比如,美妝領域的網紅品牌完美日記,從單線眼影、九色眼影盤到十二色、十六色眼影盤,既玩轉了經典色的實用性,也擁有了高階色的豐富度。

也就是說,無論對于新手玩家還是專業(yè)彩妝師,都能夠被其絢爛的顏值所折服。再有,無論是鐘薛高這樣的網紅雪糕品牌,還是李子柒淘寶店里五彩繽紛的中國傳統(tǒng)美食,無一不是頂著高顏值的外表。在這些高顏值外表下,國潮才能被年輕消費者們認可。

參考文獻:

[1] 周暉. 論行為經濟學視角下年輕消費者的消費行為.[J]. 中國商論 2018,(04),54-55

[2] 本刊綜合.百草味:深諳“顏值經濟” 玩轉“色彩營銷”.[J]. 中國合作經濟 2020,(05),33-37

[3] 陳美汐. 試論國潮文化的發(fā)展.[J]. 大眾文藝 2020,(06),273-274

[4] 黃夢嵐,莊宇錚,翁文靜,許安心. 中國文化自信對國貨品牌消費的影響.[J]. 商業(yè)經濟 2020,(05),68-69

[5] 搜狐新聞 “國潮”IP爆紅背后的4個底層邏輯!. 2020-02-10 . https://www.sohu.com/a/371808278_286549


文章來源:人人都是產品經理    作者:葉艷紅


全新的 iOS 14 小組件要如何設計?來看官方設計指南!

資深UI設計者

iOS 14 桌面小組件是這次更新當中的重要功能之一。桌面小組件賦予了 APP 全新的入口,更豐富的交互層級,更多樣的操作模式。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

這個在 Android 上存在了十幾年的功能,時至今日,給人的感覺和認知依然不夠強烈——時鐘、天氣、播放控制、快捷開關、待辦事項可能是用得大家最多的幾個小組件,而絕大多數(shù)用戶不會主動想到去用小組件功能。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

但是簡單地用「抄襲」二字來描述 iOS 14 上的這一特性又欠缺妥當——畢竟早在 2005 年,Mac OS X 10.4 Tiger 中的 Dashboard 就已經把屏幕小組件給玩兒出花來了。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

2005年 Macworld 喬布斯演示Dashboard 小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

Maemo 開發(fā)者大會上探討小組件背后的心理學機制

在移動端設備上,單具備觸摸屏功能的系統(tǒng)當中,無論是更早的塞班、Maemo,還是同時期的 webOS、Windows Phone 其實都有各自的 Widgets (WP叫動態(tài)磁貼,APP 和組件的融合設計)。其中, Maemo 的設計團隊甚至曾經聘請過心理學和行為學家來專門研究小組件的用戶交互背后的心理學原理。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

Windows Phone 中的 APP 快捷方式和小組件是一體化的,多尺寸可選

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

webOS 中同樣也有屏幕小組件

所以,在今天,更值得我們關注的問題在于:作為目前最主流的 iOS 系統(tǒng),它的桌面小組件在設計上有哪些講究,而它和 Android 上的桌面小組件有哪些不同?

答案就在 iOS 14 悄悄更新之后的設計規(guī)范當中,咱們一起來看看吧。

說明:以下的內容為蘋果官方設計指南(HIG)的翻譯。

1、桌面小組件概述

小組件能夠提煉 APP 中的關鍵信息,呈現(xiàn)在 iPhone、iPad 和 Mac 當中最為醒目的位置。小組件以一種令人愉悅的視覺和交互形態(tài),幫助用戶個性化地呈現(xiàn)屏幕內容,優(yōu)化主屏幕的體驗。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

小組件在 iOS 14 和 macOS 11 及更高的版本上才可用,而相關的開發(fā)人員文檔可以戳這里閱讀:

Creating a Widget Extension

2、仔細審視小組件

小組件通常有小、中、大三種不同的大小尺寸,在iPhone、iPad 和 Mac 系統(tǒng)當中,用戶可以在小組件庫當中找到小組件,并且選取合適的尺寸。選擇了小組件之后,用戶可以進入界面編輯模式,在這個模式下,用戶可以移動小組件到想要的位置,并且可以根據需求進行進一步的設置和調整。比如可以在同一屏上放置多個小尺寸的天氣小組件,并且通過設置,讓每個小組件顯示不同位置的天氣。用戶可以將組件放置到主屏幕上,也可以放到 iPhone 的 「今日」頁面上(也就是所謂的最左側的負一屏),iPad 的 「今日」 頁面上,以及 macOS 的通知中心。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

在 iPhone 和 iPad 上,小組件還預制了「智能堆棧」功能,也就是說多個小組件可以在同一區(qū)域堆疊,同樣的,用戶可以將它放置在iPhone 的主屏幕以及 iPhone 和 iPad 的 「今日」 頁面上?!钢悄芏褩!怪邪幌盗心J小組件,它涵蓋了用戶經常會打開的各種小組件,并且隨著時間的變化,Siri 會幫用戶篩選出最符合當前環(huán)境和語境下的小組件內容,突出顯示。如果用戶打開了「自動旋轉」的選項,Siri 同樣可以高亮顯示自定義的小組件堆棧中的相關小組件。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

注意:曾經為 iOS 13 以及更早系統(tǒng)版本所設計的小組件,在新版的系統(tǒng)的主屏幕上是不可用的,但是仍然可以在 「今日」 視圖和 macOS 的通知中心使用。

3、如何創(chuàng)建實用且聚焦的小組件

盡管用戶可以點擊小組件進入APP,然后進行更多的操作,但是小組件的核心功能,始終是顯示少量但是即時的、有用且高度相關的信息,讓用戶無需進入 APP 就可以獲取信息。明確每個小組件的核心目標,并且梳理整合需要展現(xiàn)的信息,是整個設計過程中至關重要的一步。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

3.1、將設計目標聚焦在一個點上

在多數(shù)情況下,你需要將你的設計目標梳理得非常明確。比如天氣 APP 的小組件,需要顯示的特定某個位置的天氣信息,而一個卡路里跟蹤的 APP 的小組件需要顯示的,可能是當天消耗的卡路里,而新聞 APP 的小組件可能展現(xiàn)的是熱門資訊。通常,小組件可以很專注地呈現(xiàn)程序的一部分內容,就像游戲當中角色所處的狀態(tài)一樣。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

3.2、小組件顯示內容和大小緊密關聯(lián)

在較大的小組件中,你可以顯示更多的數(shù)據,或者更詳細的可視化的效果,當然,不管多大,它始終應該專注于做一件事情。例如在較小尺寸的小組件中,可以僅僅顯示當前當?shù)氐奶鞖庑畔?,一天中的最高溫度,而在中等尺寸的小組件中,同樣的數(shù)據也被列舉出來,但是額外增加了 6 個小時的天氣預報。在大尺寸的小組件當中,可以在6小時預報的基礎上,還額外展現(xiàn)未來 5 天的天氣預報。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

小尺寸小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

中尺寸小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

大尺寸小組件

3.3、不要讓小組件成為另一個 APP 快捷方式

人們真正喜歡小組件的地方,是它能夠提供有意義的信息內容,而不是提供另外一個程序快捷方式。

3.4、多個尺寸的小組件更有價值

通常,設計師需要避免簡單地擴大小組件的尺寸而不針對性地修改內容,創(chuàng)建的小組件尺寸變化的同時,它的內容也應該進行相應的優(yōu)化和改變。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

3.5、小組件最好全天候地動態(tài)展現(xiàn)信息

如果小組件的內容沒有變化,那么用戶可能不會將它置于醒目的位置。盡管小組件不太可能每分鐘都有所更新內容,但是盡量保持更新的內容,可以更多地吸引用戶的目光,這一點很重要。

3.6、尋求令人愉悅和驚喜的契機

比如日歷的屏幕小組件,可以針對特定的時間和事件進行獨特的視覺處理,比如在生日的展現(xiàn)方式就不一樣。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

4、為小組件進行配置并設計交互

4.1、小組件需要提供合理的設置選項

在許多情況下,用戶需要提供特定的信息之后,屏幕小組件才能顯示有效的內容。比如,用戶在使用天氣APP的小組件的時候,需要先選擇特定的地點;使用股票APP的小組件的時候,需要選擇特定的一支股票。不過也有例外的情況,比如 Podcasts(博客) 的小組件默認顯示最近內容,因此用戶無需預先進行配置就可以直接使用。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

這些在使用前要進行的配置選項,不應當要求用戶進行過多的設置才可使用,應當足夠便捷。同時,用戶也無需針對小組件的 UI 進行配置,因為桌面小組件的 UI 界面對于用戶而言,是已經配置好的。相關的開發(fā)文檔可以戳這里查看:

Making a Configurable Widget

4.2、確保點擊時能進入 APP 對應的位置

當用戶點擊小組件的時候,它可以打開 APP 當中對應的頁面和位置。比如,當用戶點擊股票APP 對應的小組件的時候,由于小組件顯示的是特定的股票的信息,所以點擊小組件之后打開 APP ,APP 應該顯示的是這款股票所在的頁面和完整的信息。

4.3、避免在小組件中加入過多交互元素

通常最小尺寸的小組件可以提供一個可點擊的元素,而在中大尺寸的小組件當中,可以提供多個可點擊元素,比如中尺寸的筆記 APP 小組件當中,可以添加多個筆記條目,點擊其中任意一個可以顯示對應的筆記內容。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

盡管有多個可點擊元素對于 APP 而言非常有意義,但是提供過多的可點擊元素,可能會讓用戶迷惑且無法正確點擊對的目標。

4.4、讓用戶明確知道登錄授權的價值

在有的 APP 當中,用戶登錄之后可以獲取更多的功能和服務,可以在小組件中讓用戶知道這一點。比如,對于一款預訂類的 APP,可以在小組件中包含「登錄以查看預訂」這樣的提示。

5、更新小組件的內容

5.1、保持小組件內的內容為信息

為了保持小組件內的信息的相關性和有效性,小組件應該定期刷新以更新內容。小組件不支持連續(xù)的實時更新,并且系統(tǒng)會基于種種因素,來調整和限制其內容的更新頻率。為了讓小組件找到對的更新頻率,你需要知道你的 APP 的內容更新頻率,并且預估用戶會多久查看一次新的數(shù)據。舉個例子,潮汐變化雖然是實時的,但是用戶追蹤海灘潮汐信息變化也通常是以小時來計算的。如果你注意到用戶查看小組件的內容頻率變化,超過了它的信息更新頻率,那么你可以考慮在小組件中顯示上次更新的時間節(jié)點,以便用戶知曉它的更新頻率。相關的開發(fā)人員文檔看這里:

Keeping a Widget Up to Date

5.2、讓系統(tǒng)來更新小組件中的時間和日期

小組件本身的更新頻率是受限的,你可以讓系統(tǒng)來直接更新其中的時間和日期,將注意力集中到開發(fā)它的其他功能上。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

5.3、快速顯示內容

如果你確定了數(shù)據的更新頻率,就沒有必要將舊有的信息作為占位符來使用。

6、如何設計足夠漂亮的小組件

在 iOS 14 以及更高的版本當中,小組件可以使用豐富且大膽的配色,使用令人回味的配圖以及清晰的文本,所有的這些優(yōu)質的設計素材可以讓小組件中的信息和功能一目了然。獨特、精美的小組件不僅提供有效的信息,而且還能讓整個屏幕內容個性十足。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

6.1、用色彩、版式和圖像來凸顯品牌

如果你需要在小組件中呈現(xiàn)品牌LOGO、文字名稱、應用圖標,那么盡量以無干擾的模式來將內容集成到其中。在某些情況下,比如當你使用屏幕編輯模式來調整布局的時候,系統(tǒng)會在小組件的下方顯示對應的 APP 的名稱和信息,因此你無需在小組件中再做強調,盡量以色彩、版式等視覺設計來凸顯它的特征。

6.2、營造舒適的信息密度

如果小組件中信息過于稀疏,那么它看起來不太具有存在的必要;如果信息量太過于密集,則可能讓整個小組件顯得臃腫密集且難于使用。你需要尋求合理整合內容的方法,確保人們能夠立刻掌握信息,尤其是基本的信息,并且可以在此基礎上花費更多的時間來查看細節(jié)。你可能在更大尺寸的小組件上,用信息圖來替代簡單的文本,這樣也不會讓信息過載,但是呈現(xiàn)形式上的改變,會讓體驗變得更好。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

6.3、巧妙地用色

豐富漂亮的色彩是非常吸引人的,但是色彩決不能影響用戶吸收和了解基本的信息。色彩應該可以作為提升整個小組件視覺屬性的一種重要手段,但是它一定不能喧賓奪主,影響內容本身。在 iOS 14 的設計素材中,內置了一系列的系統(tǒng)推薦用色。

6.4、支持深色模式

小組件應該在深色和淺色模式下都看起來非常棒才行。通常,盡量避免在深色模式下,使用淺色的小組件背景并搭配深色的文本,或者在淺色模式下,使用淺色文本搭配深色背景。當你根據使用 iOS 系統(tǒng)內置的語義配色系統(tǒng)來配置背景和文本配色的時候,色彩可以根據你當前的環(huán)境,自動匹配。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

當然你還可以借助現(xiàn)成的設計素材來手工配置和選擇。詳細的使用說明可以參考下面的鏈接:

Dark Mode(iOS)
Dark Mode(macOS)
About Asset Catalogs

6.5、使用 SF Pro

使用系統(tǒng)字體能夠能夠讓你的小組件看起來非常原生,并且不論是什么樣的文本字重、樣式,都非常的美觀。如果你使用其他的第三方字體,可能很難做到這一點。當然,如果僅僅是在小組件的標題中使用自定義的第三方字體,而正文和其他的文本字體使用 SF Pro,效果也可以做到很棒。具體可以參考下面的規(guī)范:

Typography(iOS)
Typography(macOS)

6.6、確保小組件中文本可縮放

確保小組件中文本正確調用字體,而不是被柵格化之后的視覺元素,這樣可以讓系統(tǒng)內置的 VoiceOver 讀取其中的內容。

6.7、使用 SF Symbols

SF Symbols 能夠幫助你讓符號圖標以及 SF Pro 的文本可以正確對齊和縮放。相關的內容可以參考下列規(guī)范:

SF Symbols

6.8、提供逼真的占位符演示內容

當小組件在加載相應的數(shù)據之后,就可以顯示占位符的內容了,但是這些占位符信息應該足夠逼真才能幫助用戶認識它。將 UI 中靜態(tài)的框架和視覺化的占位符結合起來就可以創(chuàng)建出可供識別的預覽模式。比如使用半透明的條狀矩形來作為文本占位符,使用圓環(huán)或者正方形來替代圖像和符號。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

6.9、為小組件撰寫一個簡短的描述

小組件的描述能夠幫助用戶更清晰地了解它的功能。巧妙地使用引導性動詞能夠更好地幫助用戶了解它的功能。比如,「查看當前天氣狀況和位置」以及「跟蹤即將開始的活動和會議」。避免不必要的短語,盡量使用平易近人的表達方式。

7、適應不同屏幕尺寸

屏幕小組件可以縮放以適應不同的屏幕尺寸,除了使用 SF Pro 和 SF Symbols 之外,你還需要控制好小組件的尺寸,確保在每個不同的設備屏幕上看起來都很舒適。

7.1、調整背景圖片尺寸匹配小組件

為了確保你的圖片素材在最大的小組件上看起來都是不錯的,可以盡量按使其按比例縮放來匹配較小尺寸小組件的顯示。下面是尺寸規(guī)范:

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

7.2、將內容的角半徑與小組件角半徑匹配

為了確保你的設計和小組件完美的匹配起來,請注意匹配兩者的角半徑,在 SwiftUI 容器內設置正確的角半徑。相關的開發(fā)文檔看這里:

ContainerRelativeShape

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

7.3、控制邊距確保易讀性

標準的邊距為 16pt,如果你的小組件當中包含有文本、圖形等元素,請使用標準邊距以避免邊緣擁擠導致體驗不佳。如果使用圖形背景來創(chuàng)建分組,或者有按鈕元素,那么你可能需要使用窄邊距(8pt)。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

8、Android 小組件的設計規(guī)范

iOS 和 Android 是目前最主流的兩大移動端操作系統(tǒng),其中 Android 平臺的小組件出現(xiàn)得相對更早。但是相比于更加統(tǒng)一的 iOS 平臺,百花齊放的 Android 第三方定制化的系統(tǒng),加上相對寬松的開發(fā)機制,使得 Android 平臺上的小組件設計極度缺乏統(tǒng)一性。

在 Google Design 頁面當中,Material Design 的設計規(guī)范在很大程度上已經比 iOS 更加豐富,但是在小組件設計這一章節(jié)的內容,可以用簡單粗陋來形容。

設計規(guī)范中,相對簡單地展示了 Android 小組件的4個常見類別,以及4種常見交互。下面是對 Android 這套寬松簡單的設計規(guī)范的快速歸納:

8.1、信息展現(xiàn)型小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

信息展現(xiàn)型小組件是將對于用戶重要的信息,隨著時間推移來呈現(xiàn),比如時間、天氣、運動狀況,點擊即可帶用戶跳轉到 APP 當中。

8.2、信息集合型小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

信息集合型小組件會顯示更多的信息,它專注于兩個交互:瀏覽收藏和打開詳細信息。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

8.3、控制型小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

控制型小組件的功能是在不打開 APP 的前提下,直接觸發(fā)某些 APP 的功能,比如音樂控制。

8.4、混合型小組件

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

混合型小組件可以將多種功用混合到一個小組件當中。

8.5、Android 小組件的交互

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

Android 小組件通常支持4種交互,一種是滾動瀏覽,一種是尺寸調整縮放,還有就是導航操作,比如跳轉到特定APP當中,最后一種是進行配置調整,比如對組件中的元素進行調整。

單從信息量上來說,Android 系統(tǒng)的小組件設計指南僅僅只是做了最基礎的指引,考慮到生態(tài)的開放性,這種「放任」是很自然的一件事情。

結語

從 iOS 14 開始,蘋果在 iOS、iPadOS、macOS、watchOS 乃至于 tvOS 上的聯(lián)動與融合,已經變得非常深入了。而 iOS 系統(tǒng)的復雜性開始顯露,小組件就是其中的一環(huán)。

全新的 iOS 14 小組件要如何設計?來看官方設計指南!

和蘋果一貫以來的UI設計類似,它有著開放的一面,但是它的另一面是約束,這種約束很巧妙,比如說深色模式,你使用官方的設計和開發(fā)素材,調用官方的組件,能很快實現(xiàn)頗為不錯的效果,但是與此同時,你的設計和開發(fā)空間也受到了相應的約束。

在 Android 上,小組件可以更為自由地調整尺寸,但是誰都無法準確預知它在某一款手機上,整體的體驗是什么樣的。這個小組件的邊緣會和哪個圖標對齊,風格是不是一致的?這種問題在 iOS 14 上很大程度上是不存在的,單尺寸問題就已經進行了極為詳盡的約束——它一定會對齊,在體驗上幾乎不太可能跑偏。

從小組件開始,我們迎來一個更加豐富、復雜的 iOS 系統(tǒng)。

文章來源:優(yōu)設    作者:陳子木

8 個瞬間提升界面質感的小技巧

資深UI設計者

設計美觀、和可用的UI界面需要花費很長的時間,還需要來回多次的設計修改。

經過不斷地調整,最終才能產出令客戶、用戶和自己真正滿意的產品。

在這里,我們總結了一些實用的小技巧,這些技巧可以幫助設計師很輕松地改善設計,并為以后的設計實踐提供有用的指導。

1. 如果文本看起來很沉重,將顏色變淺

當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。

通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。

2. 字體越小,行高越大

當字體變小時,增大行高可以獲得更好的可讀性和易讀性。

這里介紹兩個容易被混淆的概念——行高和行間距:

  • 英文的行高是指上一行的基線到下一行基線之間的距離(紅線標注區(qū)域);
  • 行間距指的是兩行字體之間的距離,也就是上一行的下限線與下一行的上限線之間的距離(藍線標注區(qū)域)。

3. 選擇一種基礎色,再調整色調和顏色深淺來增加均勻性

設計時不必總是用多種顏色來填充設計。

如果項目允許,只需使用固定的色板,通過選擇基礎色,然后調整色調和顏色深淺,利用這種簡單的方式為設計增加一致性。

4. 突出最重要的因素

通過結合使用字體大小、權重和顏色,可以輕松突出UI中最重要的元素。進行簡單的調整即可使用戶體驗更好。

5. 為了保持一致性,請確保圖標具有相同的視覺樣式

在設計UI圖標時,要保持一致。確保它們具有相同的視覺樣式,相同的比重、填充或輪廓。

圖標通過視覺手段為用戶提供必要的信息,所以保證功能相同的圖標元素一致,外觀視覺一致。

6. 始終將「行為召喚」放在屏幕上最突出的位置

通過使用顏色對比、尺寸和標簽,確?!感袨檎賳尽贡M可能突出。

如果可以的話,不要總依賴圖標,也可以使用文本標簽,以便用戶能更好地理解。

行為召喚:透過設計讓用戶想到要做某種行為,例如提示用戶去觸發(fā)按鈕、文本或圖片。

7. 為表單錯誤添加額外的視覺反饋

填寫任何形式的表單時,在用戶剛進行的操作旁邊及時出現(xiàn)一條錯誤反饋,是一個簡單但有用的額外視覺輔助。

8. 突出顯示菜單中最常用的操作

設計要在產品內部使用的菜單時,請確保在屏幕上突出顯示最常用的操作(如上傳圖像、添加文件等)。


文章來源:優(yōu)設    作者:Clip設計夾

共情圖、旅程圖、體驗地圖和服務藍圖有什么區(qū)別?

資深UI設計者

共情圖、客戶旅程圖、體驗地圖和服務藍圖雖然分別描述了不同的流程,并帶有不同的目標,但它們都是一個組織內部建立共識的重要方法。

設計和研發(fā)一款產品通常需要組建一支人員復雜的團隊,成員有著不同的背景和經驗,他們必須在項目目標,用戶需求和行為,甚至是開發(fā)組件流程上有著共同的認知。這種共識一般是建立在可視化(通常指的是各種地圖)基礎之上的。 可視化地圖(mapping)可以有效地描述與產品相關各方面的特點和流程。

本文概述了4種常見的地圖,它們的特征定義以及應用場景:共情圖;客戶旅程圖;體驗地圖;服務藍圖

此外,本文將介紹簡單的「3步決策法」框架,說明創(chuàng)建這些地圖前需要做出哪些關鍵決策。

共情圖

共情圖用來幫助團隊成員理解用戶的心智。

定義:

共情圖是一種用來明確表達我們對某一特定類型用戶認知/理解的工具。它將用戶知識具像化,以便于建立共識;輔助決策。

特點:

  • 共情圖被分成四個象限:所說,所想,所感,所做
  • 它展現(xiàn)了產品相關任務的用戶視角
  • 它沒有時間順序和先后次序
  • 每一類用戶角色(user persona)或用戶類型(user type)都有自己獨立的共情圖。(1:1對應)

為什么用:

  • 建立同理心
  • 對用戶類型的對齊和理解

什么時候用:

  • 任何設計流程的初始階段
  • 對用戶訪談做分類歸納筆記的時候

客戶旅程圖

客戶旅程圖關注特定客戶/顧客與產品/服務的交互。

定義:

客戶旅程圖是將一個人為了完成與特定業(yè)務或產品相關的目標所經歷的流程可視化。它用于理解和解決客戶需求和痛點。

在客戶旅程圖最基本的形式中,它首先把一系列的用戶目標和用戶行為放到以時間軸為主線的框架中去。接下來,以用戶的想法和情感來充實框架,從而構建一個完整的敘述。最后,將敘述凝練成可視化的形式,用來在設計過程中交流觀點。

特點:

  • 客戶旅程圖是與特定產品或服務相關聯(lián)的
  • 它分為4條主泳道:階段、行動/行為、想法、心態(tài)/情緒
  • 它反映了用戶的觀點:包含他們的心態(tài)、想法和情緒;忽略大多數(shù)流程細節(jié)
  • 按時間順序排列
  • 每一個用戶角色者用戶類型都有自己獨立客戶旅程圖。(1:1對應)

為什么用:

  • 準確定位客戶旅程圖中激發(fā)用戶快樂或導致痛苦的觸點(touch points)
  • 打破壁壘,建立一個共享的、在整個組織范圍內具有廣泛共識的客戶旅程
  • 將旅程中關鍵觸點的所有權分配給團隊內部

什么時候用:

在設計過程中的任何時候,作為整個產品設計周期中團隊的參考點

體驗地圖

體驗地圖涵蓋了跨用戶類型和產品的客戶旅程圖。

定義:

體驗地圖是對「一般人」為了完成一個目標經歷的整個端到端的體驗可視化呈現(xiàn)。這種體驗與特定的業(yè)務和產品無關。它用于理解一般人的行為(這與客戶旅程圖不同,客戶旅程圖更具體,更加關注與特定業(yè)務相關的內容)。

特點:

  • 它并不和特定產品或者服務相關聯(lián)
  • 它頁分為4條主泳道:階段,行動/行為,想法,心態(tài)/情緒
  • 它提供了普通人(a general human)的視角;它不是一個特定的用戶類型或產品/服務
  • 它按時間順序組織和描述事件

為什么用:

  • 理解普通用戶的行為
  • 建立(與產品或服務無關的)體驗基準理解(a baseline understanding)

什么時候用:

  • 在客戶旅程圖之前,便于理解普通用戶的行為
  • 將多種體驗(與產品和特定用戶無關)融合到一個可視化視圖里

服務藍圖

與客戶旅程圖相似,但服務藍圖會以員工為中心。

定義:

  • 服務藍圖將不同服務模塊(人、產品(實物類產品或者數(shù)字化產品均可)和流程)之間的關系進行可視化呈現(xiàn)。這些模塊直接與客戶旅程圖中的特定觸點聯(lián)系在一起??梢詫⒎账{圖作為客戶旅程圖的第二部分。
  • 與客戶旅程圖類似,服務藍圖在涉及許多服務相關產品的復雜場景中很有用。服務藍圖是全通路、多觸點、或者需要跨職能工作(即多部門協(xié)作)的一種理想方法。

特點:

  • 它與特定的服務相關聯(lián)
  • 它分為4條主泳道:客戶行為,前臺操作,后臺操作,支持過程
  • 它反映了組織機構的視角:
  • 以服務供應商和員工為中心
  • 忽略大部分客戶細節(jié)
  • 它按時間順序和層級劃分的

為什么用:

  • 發(fā)現(xiàn)組織機構中的弱點
  • 識別可優(yōu)化的機會點
  • 建立跨部門協(xié)作關系
  • 打破孤島,建立一個共享的、在整個組織范圍內認可「如何提供服務」的廣泛共識

什么時候用:

  • 在做好客戶旅程圖之后
  • 在做組織架構或流程變動之前
  • 在內部定位斷點或設計漏斗時

3步決策框架

在繪制地圖之前(無論上面哪一種),必須做出如下3個關鍵決策:

決策1:現(xiàn)狀 vs 未來

第1個決策涉及到可視化地圖中「行為」和「狀態(tài)」的描述:它們反映的是當前狀態(tài)還是理想狀態(tài)?

現(xiàn)狀地圖(Current mappings)是基于真實的「當下」狀態(tài)制作的地圖。如果目標是識別和記錄現(xiàn)有問題和痛點時,這種方法比較理想。用現(xiàn)狀地圖有助于分析研究結果,亦或是圍繞數(shù)據驗證問題在團隊內達成共識。

未來地圖(Future mappings)是基于用戶類型、體驗、或者未來的服務架構的一種「理想」狀態(tài)制作的地圖。未來地圖有助于重塑或構想一個用戶或者體驗在未來的感受。未來地圖可以為你理想中的產品或者服務設定一個基準或者目標。

決策2:假設 vs 研究

該決定取決于將用于構建地圖的輸入類型。

假設型地圖(Hypothesis mappings)是基于團隊或組織機構中對現(xiàn)狀理解的累積。這種方法很好,可以合并多個已知的團隊視角,并建立一個研究計劃(基于假設地圖中出現(xiàn)的差異),進而成為邁向更具高保真度的和研究型地圖的基礎。

研究型地圖(Research mapping )是基于數(shù)據導向的,這些數(shù)據是為構建地圖而專門搜集的。如果有充裕的時間和資源用于制定研究計劃,那這種方法是最好的。雖然這是建立地圖的最佳方式,但是它需要大量時間和的投入。不管從哪里開始,你的地圖都應該是可以迭代的,并不斷把新的發(fā)現(xiàn)更新進去。

決策3:低保真 vs 高保真

這個決策關系到最終可視化地圖呈現(xiàn)的質量。

低保真地圖(Low-fidelity maps)往往未經打磨,通常以靈活、粗糙的便簽制作。低保真地圖在流程的初始階段是最好用的。低保真地圖意味著很少的投入或創(chuàng)造工作,并且使人們能夠根據需要進行協(xié)作、修訂和更新。你可以使用便簽(直接貼在墻上或者像Mural.co這種數(shù)字化的工具)或者協(xié)作的excel表格進行制作。

高保真地圖(High-fidelity maps)是經過細致打磨的,通過數(shù)字化創(chuàng)建并看起來更像是成品。高保真地圖最適合創(chuàng)建需要在團隊多人之間分享的地圖。高保真地圖很容易理解,但是因為看起來是「成品版」,所以不夠靈活。這種地圖一般是數(shù)字化的格式,便于傳播。

結論

所有的用戶體驗類地圖都有2個好處。首先,創(chuàng)建地圖的流程促進了溝通交流,并建立一致的心智模型。其次,由地圖產生的共享內容,可以在你的團隊、織機構或者合作伙伴之間使用,以傳達你對用戶或服務的理解。地圖也可以隨著團隊的成長,為決策提供依據。

選擇A地圖而不用B,并不會導致項目失敗或者保證項目成功。理想的狀況下,你應該根據需要,在項目的不同階段使用這4種地圖的不同組合,以便深入了解你的用戶和組織。

文章來源:優(yōu)設    作者:UXRen

為什么很多設計大神都喜歡用斜線排版?

資深UI設計者

線是平面構成的三大要素之一,在各類設計中都有著廣泛的應用,而其中的斜線更是設計師非常喜歡的元素,相比水平和垂直的線,斜線更特別、更具動感,下面我們來看看斜線有哪些主流且強大的用法。

區(qū)隔信息

區(qū)隔信息是斜線最常見的用法,通常用來區(qū)隔左右、左上和右下兩部分的信息,用斜線區(qū)隔的內容不需要對齊排列,這樣看起來更靈活一點。

在海報設計中就經常用斜線來區(qū)隔年月日等日期信息。

切割元素

很多簡單的元素完整呈現(xiàn)出來時會顯得很普通,這時依據斜線將其切割可以增加設計感,即切除元素的局部,只保留元素剩余的部分以及斜線,元素被切割后的不完整性會增加元素的獨特性和神秘感,所以更容易讓人眼前一亮。

PS:切割的時候要注意保留元素的美觀性和識別性。

裝飾

由于斜線具有一定的動感,通過重復排列后又具有節(jié)奏感,且線本身占面積比較小,不會對畫面造成太大干擾,所以很適合用作裝飾元素,斜線主要是從以下幾方面來起到裝飾作用的。

1. 增加動感

一些以文字為主且文字是水平或垂直排列的設計,可能會因為太過常規(guī)或缺少對比而缺乏動感,這時在文字周圍增加一些平行的斜線,使其與主體形成方向對比,就可以大大提升該設計的動感。

2. 增加氛圍

比如在一些促銷設計中,如果畫面中缺少裝飾元素的點綴,那么促銷的氛圍也可能會有所欠缺,這種情況下,我們也可以通過增加斜線來改善,這里使用的斜線可以有粗細和顏色的變化。

PS:斜線的方向要統(tǒng)一。

3. 增加細節(jié)

比如很多畫面的背景太單調,我們就可以把重復排列的斜線放進背景里做底紋,這樣的背景感覺更豐富,而且用斜線做底紋不會對主體造成太大干擾。

PS:把斜線排成一個圓,具有不錯的裝飾效果。

平衡

在排版時可能會遇到這樣的情況,比如我們想采用某種形式排版,但由于缺少內容或圖片輪廓有限制,所以這么排會引起版面的失衡,這時可以用斜線來填充空白,以達到版面平衡的效果。

創(chuàng)造形式

由于設計的版面通常都是矩形的,以至于斜線天生就顯得比較特別,所以在設計中合理的使用斜線可以增加其設計感。

例如下面這張海報作品,如果沒有中間的斜線它也會是一件不錯的版式作品,但是有點常規(guī),所以設計師用一根斜線穿過整個畫面,打破了這種常規(guī),給這件作品帶來一種不一樣的感覺。

PS:貫穿畫面的斜線不能影響文字的識別性,且不能從人物的臉部穿過。

總結

最后總結一下,斜線的主要功能有:區(qū)隔信息;分割元素;裝飾;平衡;創(chuàng)造形式。光說不練假把式,大家在排版時記得多嘗試一下斜線。


文章來源:優(yōu)設    作者:蔥爺

ui界面設計之網站設計案例欣賞(一)

前端達人

   藍藍設計的同事們,在積累了一定經驗的同時,也在不斷的學習和豐富關于網站及數(shù)據可視化的表達方式,搜集資料,作為大屏及數(shù)據可視化界面設計資料的參考,分享如下:


希望這篇文章可以幫到您!

微信圖片_20200612102206.jpg

——-- 網站ui設計 --——


微信圖片_20200612102221.png

——-- 網站ui設計 --——

微信圖片_20200612102228.png

——-- 網站ui設計 --——

微信圖片_20200612102230.png

——-- 網站ui設計 --——

微信圖片_20200612102253.jpg

——-- 網站ui設計 --——

微信圖片_20200617141554.png

——-- 網站ui設計 --——

微信圖片_20200617141607.png

——-- 網站ui設計 --——

微信圖片_20200617141610.jpg

——-- 網站ui設計 --——

微信圖片_20200617141635.jpg

——-- 網站ui設計 --——

微信圖片_20200617141713.png

——-- 網站ui設計 --——

微信圖片_20200617141716.jpg

——-- 網站ui設計 --——

微信圖片_20200617141718.jpg

——-- 網站ui設計 --——

微信圖片_20200621205433.png

——-- 網站ui設計 --——

微信圖片_20200621205436.png

——-- 網站ui設計 --——

微信圖片_20200621205438.png

——-- 網站ui設計 --——

微信圖片_20200621205445.png

——-- 網站ui設計 --——

微信圖片_20200621205448.jpg

——-- 網站ui設計 --——

微信圖片_20200621205451.jpg

——-- 網站ui設計 --——

微信圖片_20200621205456.jpg

——-- 網站ui設計 --——

微信圖片_20200621205511.jpg

——-- 網站ui設計 --——

微信圖片_20200621205514.jpg

——-- 網站ui設計 --——

微信圖片_20200621205518.jpg

——-- 網站ui設計 --——

微信圖片_20200621205521.jpg

——-- 網站ui設計 --——

微信圖片_20200621205524.jpg

——-- 網站ui設計 --——

微信圖片_20200621205527.jpg

——-- 網站ui設計 --——

微信圖片_20200621205530.png

——-- 網站ui設計 --——微信圖片_20200621205532.jpg

——-- 網站ui設計 --——

微信圖片_20200621205535.png

——-- 網站ui設計 --——

微信圖片_20200621205538.jpg

——-- 網站ui設計 --——

微信圖片_20200621205541.png

——-- 網站ui設計 --——


(圖片均來源于網絡)

  藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服



    更多精彩文章:


手機appUI界面設計賞析(三)

前端達人

與傳統(tǒng)PC桌面不同,手機屏幕的尺寸更加小巧操作,方式也已觸控為主,APP界面設計不但要保證APP功能的完整性和合理性,又要保證APP的功能性和實用性,在保證其擁有流暢的操作感受的同時,滿足人們的審美需求。

接下來為大家介紹幾款手機appui界面設計

微信圖片_20200612102238.jpg

   --手機appUI設計--

微信圖片_20200612102245.jpg

   --手機appUI設計--

微信圖片_20200617141551.png

   --手機appUI設計--微信圖片_20200617141556.png

   --手機appUI設計--

微信圖片_20200617141604.png

   --手機appUI設計--

微信圖片_20200617141721.jpg

   --手機appUI設計--

微信圖片_20200617141724.jpg

   --手機appUI設計--

微信圖片_20200621205421.png

   --手機appUI設計--

微信圖片_20200621205454.jpg

   --手機appUI設計--


(以上圖片均來源于網絡)



  藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服



  更多精彩文章:

       手機appUI界面設計賞析(一)

       手機appUI界面設計賞析(二)


大數(shù)據可視化設計賞析(五)

前端達人

  隨著大數(shù)據產業(yè)的發(fā)展,越來越多的公司開始實現(xiàn)數(shù)據資源的管理和應用,尤其是一些在日常生活中經常使用大屏幕的大中型企業(yè)。此時,用戶界面設計者需要呈現(xiàn)相應的視覺效果。接下來為大家介紹大屏可視化的UI設計。

微信圖片_20200612102133.jpg

 --大屏UI設計--

微信圖片_20200612102139.jpg

 --大屏UI設計--

微信圖片_20200612102157.jpg

 --大屏UI設計--

微信圖片_20200612102200.jpg

 --大屏UI設計--

微信圖片_20200612102203.jpg

 --大屏UI設計--

微信圖片_20200612102232.png

 --大屏UI設計--

微信圖片_20200612102235.png

 --大屏UI設計--

微信圖片_20200612102248.jpg

 --大屏UI設計--

微信圖片_20200612102250.png

 --大屏UI設計--

微信圖片_20200617141542.jpg

 --大屏UI設計--

微信圖片_20200617141618.jpg

 --大屏UI設計--

微信圖片_20200617141621.jpg

 --大屏UI設計--

微信圖片_20200617141621.jpg

 --大屏UI設計--

微信圖片_20200617141624.jpg

 --大屏UI設計--

微信圖片_20200617141628.jpg

 --大屏UI設計--

微信圖片_20200617141631.jpg

 --大屏UI設計--

微信圖片_20200617141649.jpg

 --大屏UI設計--

微信圖片_20200617141652.jpg

 --大屏UI設計--

微信圖片_20200617141655.jpg

 --大屏UI設計--

微信圖片_20200617141706.jpg

 --大屏UI設計--

微信圖片_20200617141709.jpg

 --大屏UI設計--

微信圖片_20200621205413.png

 --大屏UI設計--



(圖片均來源于網絡)

  藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服



    更多精彩文章:

       

 大數(shù)據可視化設計賞析(一)

  大數(shù)據可視化設計賞析(二)

  大數(shù)據可視化設計賞析(三)

  大數(shù)據可視化設計賞析(四)

  大數(shù)據可視化設計賞析(五)

  大數(shù)據可視化設計賞析(六)

  大數(shù)據可視化設計賞析(七)



看似簡單的線框圖設計,這7個要點必須知道!

資深UI設計者

在這里,我們將研究設計中最簡單、因而常常被低估的活動之一,即線框圖的設計。了解什么是線框圖,為什么需要設計它們以及如何充分利用線框圖。

什么是線框圖?

線框圖,也稱為頁面示意圖或屏幕藍圖,是展示網站或產品框架的視覺指南:

  • 設計:線框圖常用在考慮用戶需求的情況下在頁面上布置內容和功能。
  • 開發(fā):添加視覺設計和內容之前,在開發(fā)過程早期使用線框來建立頁面的基本結構。

線框圖的主要目標是向團隊和利益相關者展示產品將包含的頁面和組件,以及這些元素之間的相互作用。

為什么需要設計線框圖?

1. 幫助團隊評估和完善工作范圍

線框圖允許設計師快速創(chuàng)建產品的視覺表現(xiàn),方便后期修改;

幫助設計師向團隊展示應用程序具有的頁面元素和控件,以及所有元素如何進行交互。

2. 讓團隊所有成員參與產品設計

線框圖的使用允許設計師和開發(fā)人員在早期階段共同參與討論設計,在開始進行視覺設計之前就提供反饋和更改建議。

這樣有助于使設計過程快速迭代,避免不必要的浪費。

3. 方便快速演示

從客戶和利益相關者那里獲得快速反饋是設計過程的重要組成部分。

設計過程中,經常會遇到需求的來回變化。有了線框圖,可以使這個過程更有效,修改原型比修改線框圖需要更多的時間和精力。

4. 進行用戶測試

線框圖可以幫助設計師從潛在用戶那里獲得有用價值的反饋。同時瀏覽線框比讀取規(guī)范要快得多,還有助于減小與預期效果的差異。

線框圖實際應用

為了獲得最好的結果,為下一步的 UI 打下堅實的基礎,需要遵循幾個簡單的規(guī)則:

1. 顏色的使用

如果在線框圖中使用豐富的配色,可能會分散觀者的注意力,并使更新變得更困難。

但在某些情況下,使用顏色突出顯示特定組件是合理的。例如,可以將紅色用于錯誤狀態(tài),將藍色用于注釋等。

2. 使用簡單的組件

線框圖并不包含全面設計和詳細說明的組件。相反它們應該設計的相對簡單,讓團隊成員更容易識別。

為組件添加細致的陰影、粗細描邊將花費大量的時間和精力,卻不是很實用。

3. 保持一致性

在所有線框圖中,類似的組件必須看起來相同。如果相同的組件看起來不同,開發(fā)人員可能會質疑它們的功能是否相同,甚至會因為設計不同而增加估算時間。

在處理線框圖時,記住一個簡單的規(guī)則:保持一致,避免造成混淆。

4. 使用真實內容

我們會??吹経I/UX設計師沒有在線框圖上添加真正的內容,而是重復使用同一些文本。這是很少有設計師意識到的普遍錯誤。

內容真實與否會影響接下來的設計。如果使用不真實的內容,UI設計中文本的數(shù)量多少和排布方式都要再調整。

真實內容能給線框圖增加價值,更好地解釋上下文。

5. 使用注釋

設計中可能會遇到某些解決方案無法直觀地加以說明的情況,例如某些控件背后的邏輯,因此開發(fā)人員可能會對它們有疑問。

在這種情況下,可以提供注釋來解釋其背后的邏輯。這樣,你的團隊就會理解你的解決方案,你就不需要花時間再討論它們。

6. 線框圖程度

線框圖應該選擇低保真還是高保真,沒有嚴格的規(guī)定,取決于項目的具體要求。

硅谷知名作家埃里克·萊斯認為,如果不能帶來價值就不需要做額外的工作,從基礎做起,然后根據需要添加細節(jié)。

7. 將線框圖延伸到交互原型中

在使用不同產品時,有一些簡單而通用的交互,也有一些交互相當復雜。

在線框圖不足以說明復雜性的情況下,可以將線框圖擴展到交互原型中,而不必寫冗長的注釋并花大量時間進行解釋。

總結

將線框圖結合到設計過程中,為我們所用:

  • 幫助團隊獲得更的項目估算;
  • 讓所有團隊成員參與設計流程,避免影響開發(fā)過程的錯誤;
  • 提前向客戶、利益相關者進行演示,以盡快獲得反饋,節(jié)省開發(fā)不良解決方案的時間。

     文章來源:優(yōu)設    作者:Clip設計夾

藍藍設計www.bouu.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


如果奧斯卡有最佳電影海報獎?

資深UI設計者

一張海報優(yōu)劣與否,見仁見智,每個人都有自己的審美。

所長經常聽到設計師們?yōu)橐粡埡蟠綐屔鄳?zhàn)。但無論審美或者風格如何獨特,一張優(yōu)秀海報都有基本的評判標準,可能是畫面美,也可能是準確傳達電影內容。本期我們來看看國外的設計師是如何評判一張海報的優(yōu)缺點。根據文章內容,所長也為大家精選了同類型的海報,美圖共賞。

(文章來源The Glantz 工作室, 設計師Rebecca/佚名,下文分別簡稱R和E)

說到奧斯卡,每個人談論的都是最佳影片,那最佳海報呢?

The Glantz 工作室在最佳影片提名中投票選出最愛的海報,并邀請團隊中高級設計師解讀電影海報的優(yōu)勢與劣勢。這些被選中的海報都有四個重要的組成,分別是引人注目的標題、字體組合、畫面、構圖。優(yōu)秀的海報使我們能更貼近銀幕上的故事。借第90屆奧斯卡獎提名作品我們來談談優(yōu)秀電影海報設計的幾大特征。

《華盛頓郵報》設計 BLT Communications

R:這是我最喜歡的海報。

E:我覺得很簡約,但是畫面喪失了平衡感。

R:我不同意,畫面頂端的名字和底部的人物保持了平衡。

E:也許是缺少對稱整齊的感覺。

R:我反而喜歡這種不對稱。我沒有看過這部電影,通過海報我能感受到電影的情緒,因為不對稱的畫面帶來了不和諧的感覺。重復的樓梯和這種壓倒性的視角,都告訴主角在面對復制的局面,有很多困難需要跨越。

E:別忘了細節(jié),極簡的字體排版和樓梯的紋理形成平衡感。是一張有趣的海報。

△ 《華盛頓郵報》海報

《水形物語》設計 James Jean

E:太美了,聚光的感覺非常吸睛,細節(jié)很多。乍看會忽略背景,隨著深入觀察會感受到畫面層次感鮮明。

R:光線很美,看到他們在擁抱就知道是個浪漫的故事。在深海之下的擁抱浪漫到不真實。

△ 《水形物語》《熱帶雨》海報

《三塊廣告牌》設計 BOND

R:風暴將至,厄運降臨的畫面意向和配色,暗示將要發(fā)生一些事情。畫面通過風暴來體現(xiàn)電影發(fā)生的地點,三塊廣告牌在畫面底部,并不明顯。電影l(fā)ogo的設計很精彩,我們從未在其他海報上看到過,字體顏色和夕陽的顏色有連貫性。

E:我同意Rebecca。這張海報用場景來表現(xiàn)沖突感,很簡單但是裝飾性極強的排版。

△ 《燈塔》《流浪地球》海報

《敦刻爾克》設計 Concept Arts

E:海報給人不安的感覺。

R:中心對稱很平衡

E:平衡感和逆光,戰(zhàn)爭發(fā)生當下的混亂。

R:當你在看海報上的人物,你也能跟隨著他的視角,直面戰(zhàn)場,是諾蘭導演的風格。

E:海報底端高亮的宣傳語「由《黑暗騎士三部曲》《盜夢空間》《星際穿越》導演指導」,以暗示這部電影與諾蘭的電影是同級別大片。

△ 《1917》《血戰(zhàn)鋼鋸嶺》海報

《請以你的名字呼喚我》設計 N/A

R:有點獨立電影的感覺。

E:海報選擇的人物狀態(tài)很打動人,畫面中心對稱。但是海報上有太多輔助信息和版權印,有點干擾主題和畫面層次。手寫的標準字和人物可以再向上移動,不會被底部版權信息干擾。

R:這是一部小體量影片,不像《華盛頓郵報》有知名度高的演員可以作為影片買點被設計在海報上。《請以你的名字呼喚我》的海報更專注在人物狀態(tài)和排版設計。

△ 《請以你的名字呼喚我》《一個明星的誕生》《燃燒女子的肖像》海報

《至暗時刻》設計 Empire Design

E:人物形象和透明度都做的很好。

R:看到海報就確切知道電影將要講述的故事,角色的狀態(tài)和海報上的「大師之作」四個字,這就是電影的全部。畫面底部淡入的人像讓畫面更有層次感,人物形象也變得立體了。

△ 《悲夢》《波西米亞狂想曲》《小丑》海報

《逃出絕命鎮(zhèn)》設計 LA

E:海報的構圖很特別,用碎片化的方式展示了劇情,暗示了故事發(fā)展。所有人物都沿著玻璃的痕跡相交然后被打破。唯一的缺點是右下角的字體排版太擁擠。

R:海報信息量很大。

△ 《玻璃先生》《貼身保鏢》海報

《伯德小姐》設計 BLT Communications

R:故事發(fā)生在天主教學校,電影標準字有宗教的感覺,讓觀眾對電影有基本的了解。人物形象的選擇能讓人感受到這個女孩的性格。

E:海報頂部的人物名字有不同顏色,像教堂的彩色玻璃窗,很微妙。

△ 《只是丟了手機》《送我上青云》海報

《魅影縫匠》設計 Midnight Marauder (繪畫 Tony Stella)

E:水彩效果很美,人物很傳神,人物腿部有點混色,使畫面底部尤其是雙腿變得不清晰。字體和排版很古典。

R:使我想起一些基于插畫的經典電影海報。

△ 《魅影縫匠》《小姐》《春潮》海報

最佳海報將會是…

如果奧斯卡邀請我們工作室評選最佳海報,我們的答案是《華盛頓郵報》。這張海報符合優(yōu)秀海報的四個構成。雖然我們看好《華盛頓郵報》,但還是坐等最佳影片花落誰家。

看了這期內容后,能否在奧斯卡級別的海報上找到一些共性呢?今后所長還會定期搬運新鮮有料的好文分享給大家。

文章來源:優(yōu)設    作者:影視物料研究所

日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔