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