如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
篩選是資源聚合類APP中不可缺少的功能，可幫用戶快速、精準(zhǔn)地找到需要內(nèi)容信息，根據(jù)資源分類形式的不同有多種篩選類型，并且不同的篩選類型還可以進行自由組合，讓復(fù)雜的內(nèi)容信息更容易被篩選出來。
1. 橫向tab式篩選
2. 標(biāo)簽篩選
3. 下拉篩選
4. 底部篩選
5. 抽屜式篩選
這是最常見的篩選樣式，屬于一級篩選。通常出現(xiàn)在導(dǎo)航欄或者是導(dǎo)航欄目的下方，根據(jù)分類層級的多少有4種展現(xiàn)形式。
一個層級
分類2~5個：所有類目都可以直接在tab欄目上展示出來，用戶可快速地在各個分類之間進行切換；
分類大于5個：所有類目以相同的間距進行橫向排布，引入橫滑操作，方便用戶瀏覽被隱藏的分類信息；有些產(chǎn)品也會在欄目右側(cè)增加下拉操作，點擊后下拉展示所有的分類，用戶可對所有分類進行直觀的瀏覽；
兩個層級分類
Tab 欄目上只展示推薦分類或者用戶自己選擇的分類
當(dāng)內(nèi)容分類有兩個層級且分類比較多的時候，產(chǎn)品會根據(jù)用戶的喜好推薦幾種分類在tab上進行展示；右側(cè)有篩選操作，點擊后在一個頁面里展示所有的分類。用戶可以在這個頁面自主選擇增減展示在tab上的分類，并且可以調(diào)整展示的順序。
交互細(xì)節(jié)
用戶在不同的類目間進行切換的時候，篩選內(nèi)容在當(dāng)前頁面刷新展示；
不同的tab分類可以通過橫滑進行切換；
位于內(nèi)容信息的上方，對下方的列表內(nèi)容進行控制；
當(dāng)觸發(fā)篩選條件時，篩選欄目直接定位到導(dǎo)航欄下方。
是一種輔助篩選樣式，通常位于某一分類標(biāo)題下方，或者跟tab篩選和下拉篩選搭配使用，有4種表現(xiàn)形式
① 內(nèi)容分類標(biāo)簽，充當(dāng)內(nèi)容入口。產(chǎn)品設(shè)定的內(nèi)容分類，分類層級較高，且內(nèi)容之間無交集，當(dāng)觸發(fā)操作的時候，會跳轉(zhuǎn)頁面進行內(nèi)容展示。
② 大分類下的子篩選條件，分類層級比較低，當(dāng)用戶觸發(fā)操作時，內(nèi)容在當(dāng)前頁面進行展示。
③ 篩選頁面，多維度的篩選條件以列表的形式進行排布，標(biāo)簽是單一維度下的多種分類，可橫滑操作，這種方式可以幫助用戶快速進行多維度的內(nèi)容篩選。篩選的結(jié)果直接展示在篩選條件下方，最常出現(xiàn)在視頻類APP內(nèi)做電影、電視篩選；馬蜂窩游記中也使用了這種分類形式。
通常是在一個大的分類下做具體選擇的時候使用，這種篩選樣式可以承載1~3級分類層級。
單一層級
分類以列表的形式展示在頁面中，當(dāng)分類字段少且分類較多的時候也可以排2~3列進行展示。
兩個層級
有三種排布方式
①直接以欄目標(biāo)題加列表內(nèi)容的形式排列。適用于兩個層級分類都較少，或需要用戶進行操作（比較輸入框、滑塊）的場景使用。
②左側(cè)為一級分類信息展示區(qū)，右側(cè)為二級分類信息展示區(qū)，可以通過左側(cè)的一級分類控制右側(cè)的二級分類。適用于兩個層級分類都比較多的情況使用。
③上面為tab式的一級分類，下面是二級分類內(nèi)容的展示。適用于一級分類較少，二級分類較多的場景使用。
三個層級
一級分類為tab形式展示在最上面，二三級為左右排布形式。
交互細(xì)節(jié)
放在內(nèi)容信息的上面，對下方內(nèi)容進行控制；
當(dāng)觸發(fā)篩選條件時，篩選欄目直接定位在導(dǎo)航欄下方；
有2~3種信息層級的篩選，結(jié)果通常取得是不同信息之間的交集，所以需要在篩選中向用戶展示篩選結(jié)果數(shù)量，幫助用戶判斷是否調(diào)整篩選條件 ；如圖左
我們也可以選擇在篩選結(jié)果頁展示篩選標(biāo)簽，用戶可以在當(dāng)前頁面刪除部分標(biāo)簽，以查看更多的內(nèi)容信息；如下圖
備注：下拉篩選通常是多維度組合在一個欄目上展示，通常應(yīng)用在電商、外賣等內(nèi)容分類層級比較多，且層級內(nèi)的分類也比較多的場景里
某一具體內(nèi)容需要通過多個篩選維度輔助篩選時使用，比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級的篩選層級，每種層級下的分類目都不能過多，是一種比較簡單輕便的篩選過程
單一篩選層級
① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內(nèi)容
兩個篩選層級
① 直接以欄目標(biāo)題加列表內(nèi)容的形式排列。
② 左側(cè)為一級分類信息展示區(qū)，右側(cè)為二級分類信息展示區(qū)
交互細(xì)節(jié)
處于頁面的底部導(dǎo)航欄的位置
當(dāng)用戶出發(fā)操作的時候，內(nèi)容從下往上彈出展示。
電商平臺應(yīng)用較多的分類形式，通常是有兩個分類層級，一、二級的分類類目都比較多，默認(rèn)情況下，如果分類特別多時可以只展示第一層級信息，用展開收起輔助用戶瀏覽二級類目信息。
交互細(xì)節(jié)
因為篩選的分類比較多，且通過展開收起會將已選擇的內(nèi)容遮擋上，所以我們需要以一種方式將已篩選的條件展示出來，方便用戶及時調(diào)整。eg.馬蜂窩將所有用戶選擇的內(nèi)容都放置在最前面，而京東選擇在欄目上方展示出來。
顯示有多少個符合篩選條件的內(nèi)容，幫助用戶決策篩選條件是否合理。
本文主要講述了5種內(nèi)容篩選種類：tab篩選、標(biāo)簽篩選、下拉篩選、底部篩選和抽屜式篩選，選擇何種篩選類型跟內(nèi)容分類層級和分類數(shù)量相關(guān)，所以設(shè)計之前要先了解產(chǎn)品的分類及數(shù)量，有助于選擇更適合用戶使用的篩選樣式。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè)、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
程峰，滴滴出行高級設(shè)計總監(jiān)，具備互聯(lián)網(wǎng)和廣告行業(yè)工作雙重經(jīng)驗，同時擁有用戶體驗思維跟創(chuàng)意思維的他，對互聯(lián)網(wǎng)設(shè)計和創(chuàng)意設(shè)計都有著自己的獨到見解。
如今互聯(lián)網(wǎng)設(shè)計圈，方法論大行其道，很多設(shè)計師為了走捷徑過分依賴方法論，但他一直保持著初心，不驕不躁，他認(rèn)為：方法可以被總結(jié)創(chuàng)造，但設(shè)計功夫與思維是更可貴的東西，功夫+思維>方法論。
本次訪談，程峰分享了自己的觀點，包括設(shè)計師如何融合創(chuàng)意和用戶體驗，在遭遇靈感枯竭的時候如何理性的找靈感等干貨內(nèi)容。不僅如此，他還偷偷告訴湖湖他在招聘設(shè)計人才時最看重的特質(zhì)。
△ 程峰，滴滴出行高級設(shè)計總監(jiān)
滴滴出行高級設(shè)計總監(jiān)；曾就職于搜狐、百度、Ogilvyone、Cheil鵬泰等知名互聯(lián)網(wǎng)公司及 Digital Agency；資深創(chuàng)意人、設(shè)計師，獲獎眾多，對創(chuàng)意、設(shè)計有深入的了解。
藍湖：
介紹一下你自己，另外，可以跟大家詳細(xì)講講您的工作成長經(jīng)歷嗎？
程峰：
Hello，大家好，我是程峰。
我畢業(yè)后的第一份工作在是一家正版音樂公司擔(dān)任 GUI設(shè)計師，當(dāng)時正版音樂行業(yè)的市場土壤還沒有形成，所以公司沒能發(fā)展下去，一年后，公司成為了行業(yè)「先烈」，我也只能選擇離開，那是我第一次接觸 UI設(shè)計。
在05年的時候，產(chǎn)品用戶體驗設(shè)計在國內(nèi)開始萌芽，我出于對這個行業(yè)的喜歡和好奇，加入搜狐從事體驗設(shè)計的工作，07年的時候，加入百度做交互/UI，在這個階段，體驗設(shè)計思維方式深深扎根在我的腦海。
后來，因為當(dāng)時國內(nèi)的用戶體驗設(shè)計還不夠成熟，同時出于對廣告視覺表達有極大的興趣，在互聯(lián)網(wǎng)用戶體驗行業(yè)呆了幾年之后，我投身廣告行業(yè)，將本土、4A Digital、媒介型公司都體驗了一把，我在這個階段形成了創(chuàng)意思維思考方式。
體驗設(shè)計思維跟創(chuàng)意思維，對我來說都有非常大的價值，可以讓我更靈活面對不同的任務(wù)。這兩種思維方式的區(qū)別在于：一個是解決產(chǎn)品體驗問題；一個是解決溝通問題。我認(rèn)為現(xiàn)在的設(shè)計師/創(chuàng)意者需要同時具備這兩種思維。
幾年之后，我又回到了互聯(lián)網(wǎng)，來到了滴滴。
總體上我的經(jīng)歷跟大部分設(shè)計師朋友一樣，其中不同的可能是我接觸過的領(lǐng)域比較多，在音樂、游戲、搜索引擎、交通、廣告等行業(yè)都有過職業(yè)經(jīng)歷，我個人也比較喜歡跨界。
藍湖：
您同時擁有互聯(lián)網(wǎng)公司（甲方）及廣告公司（乙方）的工作背景，甲乙方最大的區(qū)別是什么？這種經(jīng)歷對您在工作中分析、解決問題會有什么幫助和優(yōu)勢？關(guān)于這種交叉背景帶來的優(yōu)勢，您可否深入和我們分享一下？
程峰：
設(shè)計師在一般的互聯(lián)網(wǎng)公司工作跟乙方公司工作相比還是有區(qū)別的。
在乙方，由于接觸到的行業(yè)領(lǐng)域比較多，所以適合產(chǎn)出跨領(lǐng)域的通用方法論，思考方式更加橫向，更重視規(guī)律，從而能夠解決不同行業(yè)的共性化、模塊化問題，但也有可能因信息不夠及時對等，跟進不夠持續(xù)，可能導(dǎo)致對問題的理解片面，無法深入。
而在互聯(lián)網(wǎng)公司，設(shè)計是服務(wù)于單一企業(yè)產(chǎn)品和業(yè)務(wù)的，比較單一，但更專注，會對具體行業(yè)的具體問題理解更加深入，具備持續(xù)性，更重視對變化的即時響應(yīng)，但同時也容易陷入視角局限，導(dǎo)致脫離規(guī)律，無法全局思考。
對我個人來說，甲乙方的雙重經(jīng)歷使我更加靈活，看待問題具備了更多視角，更容易保持客觀，可以快速切入找到符合規(guī)律的問題本質(zhì)，同時還可以深入并持續(xù)性地解決。
藍湖：
創(chuàng)意&設(shè)計是服務(wù)于品牌和產(chǎn)品的，您是否可以舉一個實例來詳細(xì)講講，好的創(chuàng)意&設(shè)計是如何服務(wù)于產(chǎn)品和品牌的？
程峰：
以滴滴為例，首先，滴滴CDX 很重視不同專業(yè)之間的打通與整合，聚沙成塔、匯點成線，這對于創(chuàng)意&設(shè)計產(chǎn)生好的效果尤為重要。
2017年，我們曾經(jīng)在 CDX 內(nèi)部構(gòu)建了一個需求關(guān)聯(lián)池，把產(chǎn)品、品牌、運營三塊設(shè)計需求主動整合，并關(guān)聯(lián)思考，跨專業(yè)團隊協(xié)作，輸出了司機端App 5.0升級+司機故事+司機教育等相關(guān)項目設(shè)計，提升了司機師傅們對平臺的認(rèn)同感，最終達成了1+1+1>3的效果。
設(shè)計師要具備敏銳的全局觀和主動性，任何一個體系組織都不可能做到徹底扁平化，信息只要在流通，多少會出現(xiàn)一定程度的不對等和信息失真，各職能都不可能對所有信息細(xì)節(jié)徹底掌握到位，大多數(shù)時候需要主動接觸，主動思考，以建立項目間的共性聯(lián)系，而不是坐等被告知，不能過度理想主義。
△ 滴滴「司機故事」創(chuàng)意設(shè)計
△ 滴滴「司機故事」創(chuàng)意設(shè)計
△ 滴滴「司機端」5.0配色標(biāo)準(zhǔn)
△ 滴滴「司機端」5.0啟動頁面
△ 滴滴「司機端」5.0導(dǎo)航設(shè)計
△ 滴滴「司機端」測試環(huán)節(jié)
藍湖：
創(chuàng)意和用戶體驗是設(shè)計師必須思考深入的兩個點，要更好地融合創(chuàng)意和用戶體驗，設(shè)計師應(yīng)該怎么做？舉一個例子？
程峰：
這兩種思維方式雖然一個偏產(chǎn)品，一個偏傳播，但最終都會回歸到一個點上，也就是以用戶為中心，站在用戶的角度思考，基于這個點衍生出來，站在產(chǎn)品層面叫做痛點，站在創(chuàng)意層面叫做洞察。
舉個通俗的例子：一個人早上很難起床，需要借助外力才能被叫醒，這是痛點；一個人早上很難起床，但如果第二天早上有重要的事情要趕飛機，他按時起床的可能性就會變大，這是洞察。
再舉個例子：小朋友容易把衣服弄臟，媽媽洗起來很累。用某品牌洗衣液，針對小朋友衣服常見污漬進行洗滌，省時省力，這是基于用戶媽媽的痛點想出的產(chǎn)品解決方案。小朋友容易把衣服弄臟，但媽媽總是會在第一時間，像變魔術(shù)般把干凈如初的衣服放在他的床邊，這是基于媽媽勤勞，母愛的洞察表達。
痛點與洞察交融在一起，可以使設(shè)計師在思考的時候更周全，在進行產(chǎn)品體驗設(shè)計思考的時候更具備情感引導(dǎo)性，在進行創(chuàng)意思考的時候不至于忽略功能性。
藍湖：
設(shè)計類工作需要創(chuàng)造力的支撐，您是否可以跟我們分享一下，如何科學(xué)、系統(tǒng)地提高自己的創(chuàng)造力？
程峰：
不得不說，創(chuàng)造力很大程度上是天生的，可以理解為直覺。但洞察力是創(chuàng)造力的前提，是創(chuàng)造力被激發(fā)的基礎(chǔ)，洞察力是可以被后天鍛煉的。我個人并沒有總結(jié)過科學(xué)系統(tǒng)的方法，但我相信一話：「觀察和經(jīng)驗和諧地應(yīng)用到生活上就是智慧?！?
如果一定要說方法的話，就是把自我提升需求轉(zhuǎn)換為習(xí)慣，養(yǎng)成針對性定期閱讀并定期總結(jié)的習(xí)慣。這里的關(guān)鍵詞是：定期、針對性。說得再直白點，就是多看多想并持續(xù)下去，任何事情的通用訣竅都是持之以恒。
提到這點，想多說幾句，近幾年看到了太多設(shè)計師過度重視方法，期望通過方法論找到解決問題的捷徑，我認(rèn)為這是浮躁的。對于創(chuàng)意&設(shè)計，我個人并不否定方法論的價值，但設(shè)計本質(zhì)上還是功夫活，思維的跨越也是從量變到質(zhì)變積累的過程。在這個階段，我更想跟大家說的是：功夫+思維>方法論。
尤其是希望很多年輕設(shè)計師，多下點苦功，多思考，不要把希望都寄托在方法論上。方法可以被總結(jié)創(chuàng)造，但設(shè)計功夫與思維是更可貴的東西，是設(shè)計師真正的能力壁壘。
藍湖：
在滴滴擁有眾多產(chǎn)品，設(shè)計師持續(xù)提出服務(wù)于產(chǎn)品和品牌的好創(chuàng)意和設(shè)計似乎并不容易，在設(shè)計師們遇到瓶頸時，您會給他們什么建議？在靈感枯竭的情況下，您有什么快速找靈感的好方法嗎？
程峰：
滴滴雖然產(chǎn)品眾多，但好在都是在解決出行問題，所以很多產(chǎn)品之間是具備共性的。
作為設(shè)計師，不該局限于自己的產(chǎn)品，應(yīng)該橫向多看，找到不同產(chǎn)品之間的關(guān)聯(lián)，多加以借鑒，找到可持續(xù)的復(fù)用性的解決方案，這是避免陷入到困境的好辦法。
在靈感枯竭的瓶頸期，設(shè)計師應(yīng)該明確一點：任何靈感都來源于對事物、信息的重新組合，當(dāng)把不同的元素組合應(yīng)用在不同場景中的時候，會有意想不到的收獲。
腦洞是不能隨意大開的，我認(rèn)為，找靈感、開腦洞需要兩個前提：第一是持續(xù)關(guān)注，日常積累，只有一定量的持續(xù)積累才能讓大腦里的數(shù)據(jù)庫足夠大，才能確?？梢栽谛枰臅r候，第一時間任意調(diào)取信息并進行重組。第二是邏輯性的結(jié)構(gòu)化思考，可以確保將信息進行有條理、有效、有價值的組合。
藍湖：
面試的時候，您會比較關(guān)注候選人的哪些特質(zhì)？是否具備優(yōu)秀的創(chuàng)造力，可以通過面試得出結(jié)論嗎？您有什么能在短暫的面試時間內(nèi)找到更適合的人選的秘訣嗎？
程峰：
坦白講，我認(rèn)為在面試的有限時間空間環(huán)境下，很難做到全方位的考察，我個人也無法做到，這也是為什么會有多次面試的原因。
但是關(guān)于面試設(shè)計師，我還是有一些心得的。首先，設(shè)計師的專業(yè)能力是根本，除此之外，最重要的是心理成熟度的考察。就設(shè)計師的發(fā)展來看，很多時候遇到的問題都不是技術(shù)問題，大多是心理問題。創(chuàng)造力也同樣重要，雖然個人是否具備創(chuàng)造力可以在溝通中發(fā)現(xiàn)一些，但最好的辦法還是設(shè)置筆試題來考察。
除此之外，恒心、雄心、好奇心，分別體現(xiàn)了一個人達成目標(biāo)的能力，自我提升的可能性，以及對專業(yè)探索的熱情，優(yōu)秀的設(shè)計師，這三個特質(zhì)缺一不可。
藍湖：
在提拔設(shè)計人員成為設(shè)計管理者時，您會重點考察候選人的哪些方面？
程峰：
如果將設(shè)計團隊比喻成一支球隊的話，我對團隊內(nèi)設(shè)計管理者的要求是從明星球員變成主教練。
最簡單的考察標(biāo)準(zhǔn)：
藍湖：
滴滴CDX 內(nèi)部是如何分工協(xié)作的？設(shè)計有時會是一個比較主觀的，容易出現(xiàn)分歧的工作內(nèi)容，如果團隊內(nèi)部的意見出現(xiàn)分歧，您是如何做決策的？
程峰：
CDX 專業(yè)分為兩側(cè)：體驗設(shè)計+創(chuàng)意設(shè)計。既解決產(chǎn)品的體驗設(shè)計問題，同時也關(guān)注業(yè)務(wù)運營效率及品牌創(chuàng)意設(shè)計問題。
我想目前的分工是階段性的，未來的趨勢應(yīng)該是設(shè)計師職能更加融合，最終合并成只有「設(shè)計」這個職能。
在面對專業(yè)分歧的時候，最的解決辦法依然是溝通。事實上大部分的分歧都是因為目標(biāo)不一致導(dǎo)致的，所以在遇到分歧時，要保持讓產(chǎn)品、品牌更好的端正、開放的心態(tài)，就會被更有道理的觀點說服。
△ 滴滴「CDX」部門成員合照
藍湖：
您作為設(shè)計管理者，對于提升產(chǎn)品設(shè)計效率，有什么經(jīng)驗分享給大家嗎？
程峰：
首先，推進設(shè)計師成為更「復(fù)合」型的人才，設(shè)計細(xì)分專業(yè)之間的融合，能夠降低理解成本。
其次，要繼續(xù)推進產(chǎn)品組件化的建設(shè)和組件使用率。
最后，針對性使用設(shè)計工具，比如使用藍湖完成自動標(biāo)注和切圖，通過工具規(guī)范標(biāo)準(zhǔn)化流程，避免無效溝通和重復(fù)勞動。
這些都是提升設(shè)計效率的辦法。
藍湖：
對于相對年輕的設(shè)計師，您有怎樣的職業(yè)發(fā)展建議？
程峰：
保持初心，永遠記得你為什么踏上設(shè)計這一行，并且時刻具備長遠規(guī)劃。
堅信設(shè)計的價值，任何職能都不可能解決全世界的問題，專注設(shè)計能解決的領(lǐng)域，設(shè)計自然更有價值。
保持思考，不僅是對專業(yè)的思考，更是對業(yè)務(wù)的思考，甚至生活和世界的思考。
我也是這樣要求自己的，希望對各位也有幫助。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript數(shù)組操作</title>
<script type="application/javascript" src="lib/jquery.min.js"></script>
</head>
<body>
<h2>javascript操作數(shù)組</h2>
<input type="button" value="js數(shù)組" "jsArrays();">
<br>
<input type="button" value="json數(shù)組1" "jsonArrays();">
</body>
<script type="application/javascript">
//數(shù)組操作
function jsArrays() {
//創(chuàng)建一個javascript數(shù)組
var a=new Array();
a.push('a');
a.push('b');
a.push('c');
//往數(shù)組添加三個元素
alert(a);
//利用indexof可以指出該元素在數(shù)組中所在位置
alert('a index of a'+a.indexOf('a'));
//利用jquery對數(shù)組進行便利
$(a).each(function (index,row) {
alert('index is '+index);
alert('row is '+row);
})
}
//json數(shù)組操作
function jsonArrays() {
//首先也是創(chuàng)建一個json數(shù)組
var a=new Array();
a.push({a:1});
a.push({a:2});
a.push({a:3});
//同樣的往數(shù)組添加三個元素
//alert出的結(jié)果是[{object,object},{object,object},{object,object}]
alert('a is '+a);
//利用JSON的方法將json數(shù)組轉(zhuǎn)換為字符串這時候alert的就是json字符串了
alert(JSON.stringify(a));
//直接獲取json數(shù)組第一個元素的值，此時知道json的key是a
alert(a[0].a);
//遍歷json數(shù)組第一個元素的key，這時候可以alert出的結(jié)果是a，同樣的可以得出對應(yīng)的value
for(var key in a[1]){
alert('key is '+key);
alert('value is '+a[0][key]);
}
//用jquery對json數(shù)組進行遍歷
$(a).each(function (index,row) {
for(var key in row){
alert('each key is '+key);
alert('each value is '+row[key]);
}
})
}
</script>
</html>
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
什么是插圖呢？或者藝術(shù)中插畫的定義是什么？插圖的樣式有哪些？將在本文揭曉！
寫在前面
什么是插畫呢？或者藝術(shù)中插畫的定義是什么？插畫的樣式有哪些？
插畫是指藝術(shù)家將一段文字，甚至是社會意義翻譯成一幅圖畫。
插畫是用來創(chuàng)造情感或傳達信息的。它在風(fēng)格上很有表現(xiàn)力，不需要注意。插畫用于書籍，雜志，廣告，漫畫書，漫畫，時裝設(shè)計，故事板和視頻游戲。沒有單一的方法來說明，有很多的說明風(fēng)格。
插畫風(fēng)格
雖然有許多不同的插圖風(fēng)格，但這些可以分為以下幾組：
文字插畫
文字插畫風(fēng)格以與非小說類書籍相似的方式描繪現(xiàn)實。這幅畫描繪了一個可信的場景，即使使用幻想或戲劇。我們來舉一些文字說明的例子：
創(chuàng)造一個攝影圖像
藝術(shù)家以照片為素材，以細(xì)膩的細(xì)節(jié)創(chuàng)造出逼真的復(fù)制品。
在現(xiàn)實主義攝影中，藝術(shù)品常常被誤認(rèn)為是照片。繪畫、透視和色彩的選擇對這種藝術(shù)形式至關(guān)重要。藝術(shù)家經(jīng)常使用噴槍，或手畫與丙烯酸或油達到最終的結(jié)果。
展示歷史或文化的插畫
這種類型的插畫用于描述歷史或文化事件。通常被一種文化用來描述場景或環(huán)境，這種形式的插畫也可以用來描述情緒或增加戲劇感，甚至在攝影的時代。
雖然有時用來美化或貶低文化或人物，這些插圖是現(xiàn)實的，足以被視為文字圖像。
超現(xiàn)實主義
這種形式的插畫試圖抹去藝術(shù)和現(xiàn)實之間的界限，被認(rèn)為是對攝影現(xiàn)實主義的一種進步。
有時，一些額外的功能被添加到一個代表或藝術(shù)家可能與單色鉛筆工作，以創(chuàng)建一個社交信息。然而，我們的目標(biāo)是創(chuàng)造一個盡可能接近現(xiàn)實的形象。這種形式的插畫試圖抹去藝術(shù)和現(xiàn)實之間的界限，被認(rèn)為是對攝影現(xiàn)實主義的一種進步。
概念插圖
概念插畫是隱喻性的，以思想或意象取代了現(xiàn)實主義。雖然這部作品可能包含現(xiàn)實的元素，但其目的是傳達情緒、隱喻和主觀性。這種形式的插畫可以與小說相比，在任何地方。我們來舉幾個例子:
圖像順序
按順序排列的圖像講述一個故事，可以用于卡通、漫畫小說，甚至是電影場景的規(guī)劃。風(fēng)格可能有所不同，從快速素描，以噴槍的細(xì)節(jié)微調(diào)圖紙。根據(jù)信息的不同，一幅圖像可以使用清新干凈的顏色，也可以使用墨水、鋸齒狀的線條和混亂的布局來描述政治的混亂事務(wù)。
信息圖形
這些是知識的圖形表示。它們通常用于幫助理解復(fù)雜的信息。
雖然它們向觀眾展示了他們正在看的內(nèi)容，但這通常以包含其他見解的方式表示。有些可能看起來像文字插畫。
抽象或扭曲的設(shè)計
一種表現(xiàn)形式的說明，從現(xiàn)實中分離出來，從想象中顯現(xiàn)出來。因為它是如此主觀，兩個抽象的藝術(shù)品看起來會非常不同。
手繪數(shù)字圖紙或插畫
在這種類型的插畫中，藝術(shù)家在一個數(shù)字畫板上作畫，允許光影之間的平滑過渡。藝術(shù)家可以使用圖像層來創(chuàng)建復(fù)雜的背景和添加精細(xì)的細(xì)節(jié)。許多這樣的圖像使用柵格(或點)格式，限制了它們在失去質(zhì)量之前可以放大到的大小。
矢量圖形和插畫
利用矢量圖形，用數(shù)學(xué)方程進行設(shè)計。由于矢量圖不像徒手?jǐn)?shù)字繪圖那樣使用筆畫，圖像不像徒手設(shè)計那樣平滑。然而，它們可以在不損失質(zhì)量的情況下被炸毀。這些圖像有清晰的形狀和輪廓，非常受歡迎的網(wǎng)絡(luò)插畫。
兒童插畫
兒童插畫講述一個故事，或給予一個故事，甚至一個虛構(gòu)的存在的視覺表現(xiàn)。插圖的風(fēng)格取決于孩子的年齡。有些可能是復(fù)雜和現(xiàn)實的，而另一些可能是天真的。許多兒童插畫色彩豐富，包含許多動作或活動。人物通常是明亮的，豐富多彩的和友好的。
社區(qū)書籍和圖形小說插畫
漫畫書或超級英雄通常會讓角色參與到行動中。樣式通常很復(fù)雜，從線條圖到噴繪圖像都有。然而，漫畫通常是漫畫中最常用的風(fēng)格之一。
漫畫圖片通常以小組形式出現(xiàn)，并經(jīng)常涉及到對話框或敘事。有些詞可能與動作結(jié)合在一起，比如POW!面板的大小以及它們出現(xiàn)的頻率有助于設(shè)定故事的節(jié)奏。
書籍封面和出版物
在許多舊書中，例如那些側(cè)重于地理或自然歷史的書，插圖都是手工設(shè)計的，然后再版。然而，現(xiàn)在，書籍插畫被設(shè)計成許多不同的方式，然后印刷。
插畫家經(jīng)常被用來設(shè)計書籍的封面，以便使他們在書店中脫穎而出。封面常常暗示書中的內(nèi)容，并給人以幽默、嚴(yán)肅、文化或運動的印象。
書籍插畫從卡通風(fēng)格的圖畫到歷史或文化形象。雖然“不要以貌取人”這句話經(jīng)常被重復(fù)，但它實際上是能賣書的封面，并能幫助書吸引正確的讀者。
標(biāo)志或品牌設(shè)計
logo是一種非常特殊的插畫風(fēng)格。通常他們的目標(biāo)是提供有關(guān)產(chǎn)品的信息，使用顏色、字體或圖像。流行的和容易辨認(rèn)的標(biāo)志包括耐克勾或與麥金塔相關(guān)的蘋果。標(biāo)識通常很簡單，但卻能抓住人們對產(chǎn)品的注意力，將其定義為屬于某個特定品牌。
通常，這個品牌與想象中的品質(zhì)有關(guān)，比如速度、力量或創(chuàng)造力，而商標(biāo)有助于喚起這種情感信息。有時，企業(yè)不僅僅使用一個標(biāo)志來輔助品牌建設(shè)。
許多公司使用吉祥物或員工形象來傳達信息。這有助于超越鞋子這樣的產(chǎn)品，讓它在顧客心中有更深的含義。
發(fā)展你的插畫風(fēng)格的技巧
使用互聯(lián)網(wǎng)，我們經(jīng)常被介紹到插畫在網(wǎng)上新聞文章，我們可以下載的音樂，漫畫書，廣告，甚至電子郵件。這向我們展示了廣泛的樣式，這是一件好事，因為它創(chuàng)建了廣泛的示例供我們借鑒。
然而，如果你經(jīng)常被許多高質(zhì)量的插畫轟炸，你如何發(fā)展自己的風(fēng)格？這里有一些建議：
了解基本原則
雖然可以通過實踐來學(xué)習(xí)插畫，但這往往意味著要模仿其他已經(jīng)形成自己風(fēng)格的插畫家的風(fēng)格。釋放你自己的創(chuàng)造潛力是非常重要的，這樣你才能建立和成長，發(fā)展你自己的才能和分享你自己的信息。
沒有復(fù)制，你可能會問“什么是插畫師?”“正規(guī)的教育將教會你插畫的基本原則、動機和技巧，這樣你就可以用這些積木來創(chuàng)造你自己的設(shè)計?！?
除了向那些已經(jīng)在這個領(lǐng)域內(nèi)的人學(xué)習(xí)，你還會學(xué)到一些哲學(xué)，這些哲學(xué)將使你能夠加入其中，在你這樣做的時候表達你自己的風(fēng)格。
探索新的插畫風(fēng)格
如如果你覺得自己陷入了風(fēng)格的窠臼，重復(fù)做了很長時間的工作，你可能想學(xué)習(xí)一些新的插畫風(fēng)格或技巧，進一步發(fā)展自己的作品。
然而，請記住，沒有理由強迫自己進入不舒服的空間。如果你覺得停滯不前，或者不喜歡你正在嘗試的工作，請記住，沒有一個藝術(shù)家能夠做所有的事情，如果有些事情感覺不太好，準(zhǔn)備好繼續(xù)前進。
嘗試新媒體
如果你因為你的鋼筆畫而出名，試試丙烯酸樹脂怎么樣?轉(zhuǎn)換你使用的媒介可能會給你的工作帶來一個新的維度，專注于一個新的氛圍，顏色或閃光。如果您已經(jīng)使用多種介質(zhì)，您可以嘗試紋理、蝕刻、模板甚至金屬。
您可以將您的格式從小型繪圖更改為大型畫布，或者從大型繪畫更改為漫畫書大小的圖像。盡管一開始你的結(jié)果可能并不出眾，但探索新的媒介會讓你走出舒適區(qū)，走出你的風(fēng)格窠臼。你的實驗是值得的。
做真實的自己
當(dāng)定義你的插畫風(fēng)格時，不要圍繞當(dāng)前市場上銷售的東西來設(shè)計它。你的第一個委托是一個巨大的成就，從藝術(shù)中賺錢是值得的。
然而，在市場上分享你自己的風(fēng)格，這樣你才能發(fā)展自己的藝術(shù)身份。隨著市場的不斷變化，試圖模仿或模仿當(dāng)前的趨勢會讓你落后一步。
通過發(fā)展你自己的風(fēng)格，你將不斷地在你自己的技術(shù)上工作，改進和發(fā)展他們，而不是保持一個二流版本的插畫家你欽佩。發(fā)展你自己的風(fēng)格意味著分享你自己的意思，把你自己的想象帶到前臺。
沒有這些，你就不會有創(chuàng)造性的能量來幫助你定義你的工作和保持你的動力。沒有這些，你可能會失去你對插畫的熱愛。
最后說一下對插畫風(fēng)格的思考
有許多不同的插畫風(fēng)格或技術(shù)。有些是重復(fù)的。然而，理解不同的風(fēng)格和它們所使用的技術(shù)使您能夠了解每種不同設(shè)計背后的原則，使您能夠探索和擴展您的插圖實踐。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
海報是電影的門面，好的海報作品不僅可以完美傳達電影本身的美學(xué)與內(nèi)涵，而且也能散發(fā)超越電影作品的附加韻味，創(chuàng)造獨特的藝術(shù)價值與設(shè)計美感。
近日第九屆北京國際電影節(jié)公布官方海報，因其“詼諧粗糙”的設(shè)計引發(fā)了影迷的熱烈討論，目前全球已有成百上千個電影節(jié)每年都在進行著各類展映和學(xué)術(shù)活動，大到歐洲三大電影節(jié)，小到第三世界的地區(qū)影展，其中設(shè)計感出類拔萃的電影節(jié)海報也不在少數(shù)，今天就為大家推薦一些近年的電影節(jié)海報設(shè)計佳作（國內(nèi)影展也多走走心）。
法國拉羅謝爾電影節(jié)
莫斯科國際電影節(jié)
莫斯科國際實驗電影節(jié)
New British Film Festival
索爾福德電影節(jié)，位于英國曼徹斯特地區(qū)
布拉格國際電影節(jié)
Dwa Brzegi – 10th Film and Art Festival
Cult Film Festival
Semibreve festival
Beat Film Festival
Wildlife Film Festival 位于荷蘭鹿特丹
2018年第71屆戛納電影節(jié)官方海報，致敬《狂人皮埃羅》（1965）
第51屆導(dǎo)演雙周單元海報
2019年柏林電影節(jié)官方海報
2018年第75屆威尼斯電影節(jié)
2018年第31屆東京電影節(jié)東京電影節(jié)
2018東京臺灣未來映畫周
日本山形國際紀(jì)錄片節(jié)
釜山國際電影節(jié)正式海報
韓國富川奇幻電影節(jié)
Student Indie Film Festival 澳大利亞墨爾本 威廉斯鎮(zhèn)
Open City Documentary Film Festival 位于英國倫敦
Moving Festival — Film Festival 位于西班牙巴塞羅那
臺北電影節(jié)
英國獨立電影節(jié)
A Design Film Festival 位于新加坡
平地學(xué)生電影節(jié)，位于香港，平地映社策劃，香港藝發(fā)局資助
澳門國際紀(jì)錄片電影節(jié)
香港獨立電影節(jié)
香港國際電影節(jié)
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
相比于典型的字、句型結(jié)構(gòu)和圖像，不同尋常的字、句型結(jié)構(gòu)以及圖像會更容易被人們記住。正因為如此，我們在日常工作中才會經(jīng)常接到類似以下的需求：將新/重要功能的入口，或者運營活動的入口做特殊化處理，增加趣味性來讓用戶加強印象。
這種現(xiàn)象被稱作為梵雷斯托夫效應(yīng)（相對于普通事件或物體，要記得獨特、有特色的事件或物體可能性會大增）。梵雷斯托夫效應(yīng)有兩個觸發(fā)條件：背景不同以及經(jīng)驗不同。背景不同是指一個刺激物與周圍的刺激物不同，比如在一串字母中突然出現(xiàn)了一個數(shù)字，那個數(shù)字就會讓人印象深刻；
經(jīng)驗不同則是指一個刺激物與記憶中的經(jīng)驗不同，比如一些經(jīng)常被我們誤讀的成語，因為與平時的經(jīng)驗相悖，所以看到正確解釋的時候印象特別深刻。
我們在了解了這兩個觸發(fā)條件之后，就可以利用它們來觸發(fā)梵雷斯托夫效應(yīng)，從而幫助我們做出令用戶印象深刻的設(shè)計。下面就結(jié)合實際案例來看看如何利用它們。
前面說過，背景不同是指一個刺激物與周圍的刺激物不同。具體到界面中，我們可以理解為在一堆相同類型的元素/模塊中，對其中需要突出的做特殊化處理。
案例1 功能入口
京東金融底部導(dǎo)航中的“信用”以及保險頁面中金剛區(qū)的“1元購”，都采用了與同類型元素不同的視覺樣式。前者采用了色塊+動效，后者采用了3D視角，分別讓它們在底部導(dǎo)航和金剛區(qū)中“脫穎而出”，引起用戶的關(guān)注。
案例2 列表內(nèi)元素
愛奇藝的首頁推薦中，其中一個視頻內(nèi)容的封面是采用動圖的形式，在其他靜態(tài)封面的襯托下，就顯得格外醒目。飛豬的首頁推薦中，則是把專題欄目的信息部分（彩色底白字）設(shè)計得與其他商品（白底黑字）差異較大，來吸引用戶關(guān)注點擊。
案例3 模塊之間
美團外賣的個人中心將一些常用功能至于一個單獨的模塊中，并且將其中的圖標(biāo)設(shè)計成與其他模塊內(nèi)的圖標(biāo)所不同的樣式（黃色填充），如此即突出了常用功能模塊。另一邊愛奇藝的個人中心，“會員服務(wù)”與“我的泡泡”則是直接從下面的宮格式布局中脫離出來，并且將各自的一些功能外置，布局交互完全不同于下面的其他模塊，以達到突出這兩個模塊的目的。
以上三個就是典型的“背景不同”觸發(fā)梵雷斯托夫效應(yīng)，從而讓用戶印象深刻的案例。不難發(fā)現(xiàn)，對于“背景不同”，已經(jīng)應(yīng)用的比較廣泛，并且大家也較為熟知了，接下來看看“經(jīng)驗不同”。
經(jīng)驗不同需要顛覆過去的認(rèn)知，我們可以理解為在一些已經(jīng)被大家所熟知的視覺/交互中，對其進行“改革創(chuàng)新”。
案例1 虎撲評論點贊
虎撲中的評論點贊不同于我們看到的其他產(chǎn)品，它采用的是一個燈泡ICON來表達該評論“亮了”，更貼合用戶對有趣評論贊賞認(rèn)同的真實場景。與眾不同的方式也加強了用戶的印象，提升了用戶的黏度。
案例2 嗶哩嗶哩打賞
嗶哩嗶哩中的打賞采用了“馬里奧踩蘑菇”游戲的形式，不同的磚塊代表不同的打賞數(shù)額，選擇完數(shù)額，滑動馬里奧頂一下磚塊就完成了打賞的整個過程。相比于普通的宮格式菜單選擇，是不是有意思多了呢？
案例3 微信讀書推薦
微信讀書的書城中有一個“搖一搖”的功能，搖動一下手機或者點擊一下“搖一搖”ICON，就會隨機推薦一本書給你。每一次搖動背后的不確定性就像搶紅包一樣，滿足了用戶的獵奇心理，提升了體驗的趣味性。相比于普通的推薦版塊，不僅能讓用戶印象深刻，更會讓他們對此愛不釋手。
其實這些“經(jīng)驗不同”的案例也不完完全全是創(chuàng)新，比如搖一搖之前就是微信中的一個社交功能。大家可以將平時看到的有意思的設(shè)計記錄下來，并思考一下可以復(fù)用在哪些地方，說不定下次功能更新就能用上了哦～
在利用“背景不同”時，需要注意避免出現(xiàn)處處都強調(diào)的情況。每個元素/模塊都突出了，也就失去了重點，如下圖。
而“經(jīng)驗不同”需要注意的是，避免為了創(chuàng)新而創(chuàng)新，讓“驚喜”變成“驚嚇”。如下圖，
“清音”作為一個標(biāo)簽指示，顯然與我們平時所看到的那些標(biāo)簽樣式大不相同，足以讓我們印象深刻。但是，在知道它是一個標(biāo)簽之前，我曾誤以為它是一個按鈕。在觸擊無反饋并且右滑屏幕發(fā)現(xiàn)后面還有“濁音”之后，我才知道原來這是一個標(biāo)簽……這樣的“經(jīng)驗不同”只會造成“負(fù)面”的印象深刻。
相對于普通的事物，特殊化的事物更容易讓人印象深刻，我們稱這為梵雷斯托夫效應(yīng)。觸發(fā)梵雷斯托夫效應(yīng)有兩個條件：背景不同和經(jīng)驗不同，我們可以利用這兩個條件來做出令用戶印象深刻的設(shè)計。
“背景不同”：對需要突出的元素/模塊做特殊化處理，在同類型元素/模塊中脫穎而出。需要注意的是，避免到處都強調(diào)，從而失去強調(diào)的意義。
“經(jīng)驗不同”：對過去所熟悉的視覺/交互進行“創(chuàng)新”，從其他不同類型的產(chǎn)品中復(fù)用、移植過來。需要注意的是，避免讓“驚喜”變成“驚嚇”。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
國外的版式一直對圖文排版要求很高，即便沒有花哨的元素設(shè)計，也能通過簡單的圖文進行最大限度地編排，重點以展示內(nèi)容為主，使版面更實用。今天小編為大家分享一組圖文排版不錯的國外雜志設(shè)計，也是小編喜歡的設(shè)計風(fēng)格，希望會給你帶來不同的排版靈感。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
情感化設(shè)計已經(jīng)不是一個新概念，唐納德·諾曼在《情感化設(shè)計》一書中，清晰地闡述了情感化設(shè)計的重要地位與作用?，F(xiàn)階段，同類型的產(chǎn)品在功能、服務(wù)、內(nèi)容上日益趨同，差異越來越小，想讓產(chǎn)品觸及用戶的內(nèi)心，除了功能滿足需求之外，也需要進行情感化運營。微云在不斷完善基礎(chǔ)功能的同時，還基于用戶行為，增加了許多情感化的體驗，比如往年今日、人臉相冊等。在情感化運營上，微云在2018年開始了較為完整的節(jié)日閃屏設(shè)計，希望向用戶傳達節(jié)日的祝福，拉近產(chǎn)品與用戶的距離。
節(jié)日閃屏是指在特定的節(jié)日進行情感化設(shè)計，傳遞品牌關(guān)懷的閃屏。優(yōu)秀的節(jié)日閃屏，在內(nèi)容上不僅能夠觸達用戶的記憶點，也能夠與品牌相融合，這樣既拉近了用戶與產(chǎn)品的距離，也強化了品牌的認(rèn)知和記憶。
在開始設(shè)計之前，我們期望節(jié)日閃屏能夠達到以下兩個目標(biāo)：
不同的節(jié)日有不同的文化背景和風(fēng)俗習(xí)慣，節(jié)日祝?？梢越Y(jié)合最典型的特征，這樣更有利于喚起用戶回憶，后文會結(jié)合案例進行分析。然而，品牌調(diào)性是貫穿所有節(jié)日的，在設(shè)計之初，我們明確微云的品牌調(diào)性，這樣更有利于品牌的傳達。
1. 品牌調(diào)性研究
Alan Cooper在《About face 4》中提到，在傳達品牌調(diào)性時，可以用一組形容詞來描述產(chǎn)品及體驗，這些詞可以組成詞云，用來指導(dǎo)視覺設(shè)計。如何創(chuàng)建這組詞云呢？Allan Cooper 提供了四個方法：從品牌大綱提煉關(guān)鍵詞、分析現(xiàn)有產(chǎn)品的界面和服務(wù)、分析競品的界面和服務(wù)、收集用戶反饋。
結(jié)合微云的特征，我們從現(xiàn)有產(chǎn)品的界面和用戶反饋兩個角度進行分析，提煉符合微云調(diào)性的詞云。
2. 分析現(xiàn)有產(chǎn)品界面
微云的平臺較多，包括WEB端、PC端、移動端、小程序等，其中WEB端和移動端的用戶最多，就從這兩個端入手，分析產(chǎn)品界面的品牌特征。從結(jié)構(gòu)布局和色彩比例上，可以歸納兩端的共同點：結(jié)構(gòu)清晰、留白較多、簡約干凈。
3. 分析用戶反饋
微云用戶在職業(yè)分布上，白領(lǐng)用戶占最大。結(jié)合使用場景分析，用戶反饋最多的詞是：輕量、方便、下載快速。
4. 提煉微云品牌詞云
結(jié)合產(chǎn)品界面「結(jié)構(gòu)清晰、留白較多、簡約干凈」的特征和「輕量、方便、下載快速」的用戶反饋，我們提煉出適合描述微云品牌的詞云：簡約、干凈、留白。
接下來就以勞動節(jié)閃屏為例，從節(jié)日特征和品牌調(diào)性兩個維度來闡述節(jié)日閃屏的設(shè)計過程。
利用窮舉法，篩選最典型的節(jié)日特征。
微云是一個工具化的產(chǎn)品，旅行/度假更適合旅行類產(chǎn)品，勞動/休息與微云更契合。結(jié)合產(chǎn)品功能，定了兩個方向，第一個是「五一不勞你動，微云幫你整理」，與備份照片功能結(jié)合；第二個是「勞動光榮」，凸顯節(jié)日氣氛。以下是一些草圖方案：
前面三個方案重點在于功能的表達，把用戶目光吸引到場景上，內(nèi)容豐富，但可能造成用戶在3秒內(nèi)無法明白畫面主題。方案四重點在于氣氛的表達，關(guān)注人物故事，角色正在辛勤的勞動，直接點題，場景只起烘托作用。結(jié)合「簡約、干凈、留白」的品牌調(diào)性和「喚起美好回憶」的品牌期望，我們選擇了氛圍方向進行深入設(shè)計。
主題確定之后，就開始進行優(yōu)化設(shè)計了。圍繞著關(guān)鍵詞，采用扁平化的設(shè)計手法，在色彩搭配上，由于勞動節(jié)沒有明顯的色彩傾向，故以品牌藍為主色調(diào)，橙色來源于產(chǎn)品的圖標(biāo)，作為輔助色提亮整體畫面；在頁面排版上，保持大面積的留白，簡約清爽。
勞動節(jié)閃屏上線后，我們進行了復(fù)盤，我們希望微云的節(jié)日閃屏給用戶傳達的是「你的珍貴回憶微云幫你記錄」這樣的小心思，而不是「我們有xx功能」之類的廣告，所以在以后的節(jié)日閃屏中，我們會更加傾向節(jié)日故事性的表達。視覺風(fēng)格則采用簡約、干凈、留白的方式，重點突出人物故事，不在場景上過多渲染。
按照上面的思路，我們完善了其他的節(jié)日閃屏設(shè)計。
母親節(jié)閃屏
母親節(jié)是一個西方的節(jié)日，在這一天，孩子給母親送康乃馨，來表達自己的愛意。在節(jié)日故事上選擇了最具代表性的孩子給母親送花的場景。
端午節(jié)閃屏
一提到端午節(jié)，就會想起粽子的「甜咸之戰(zhàn)」，可見粽子在端午節(jié)的重要地位，所以端午節(jié)的節(jié)日故事就圍繞粽子開展，三個好友齊心協(xié)力包粽子。
七夕閃屏
牛郎織女，鵲橋相會，是七夕節(jié)的美麗傳說，這一天情侶相聚，相互表達愛意。七夕故事定格在情侶相會的瞬間，女生飛奔向男生，在銀河上翩翩起舞，表達久別重逢的喜悅。
中秋閃屏&圣誕節(jié)閃屏
中秋節(jié)故事主題是合家團圓、賞月吃餅。圣誕節(jié)故事則以父女二人齊心協(xié)力裝飾圣誕樹為主題。
△ 備注：圣誕節(jié)最終效果圖由另一同事繪制
所有節(jié)日閃屏合集
節(jié)日閃屏除了故事性的表達之外，在設(shè)計上我們也輸出了一部分規(guī)范，用來把控風(fēng)格的統(tǒng)一。
1. 配色規(guī)范
色彩作為用戶最容易感知的部分，使用時與品牌相呼應(yīng)，主色與輔助色均來源于產(chǎn)品圖標(biāo)。有明顯色彩屬性的節(jié)日，以節(jié)日固有色為主，比如春節(jié)紅色，中秋黃色等等。無明顯色彩屬性的節(jié)日，可以以品牌藍為主，強化品牌印記。
2. 角色規(guī)范
我們希望重點展示的是人物的珍貴回憶，基于此，我們設(shè)計了一批角色，講述角色的故事，讓用戶產(chǎn)生代入感。為了保證統(tǒng)一性，我們制定了人物的細(xì)節(jié)規(guī)范，包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應(yīng)等。
在設(shè)定好人物細(xì)節(jié)規(guī)范之后，我們也完善了角色資源庫，方便后期在其他場景的應(yīng)用。
3. 場景規(guī)范
在場景設(shè)計上，我們以簡潔，明確為主，場景主要起烘托人物故事的作用，而不進行過多的渲染。
做了一系列閃屏之后，這些插圖和角色并沒有閑置，我們在線下挖掘了一些新的使用場景。這些素材被重新利用起來，變身為辦公室的裝飾掛畫，營造出一個充滿品牌氣氛的辦公環(huán)境。
2018年微云希望通過節(jié)日閃屏的情感化運營，給用戶傳達節(jié)日關(guān)懷的同時也強化微云的品牌認(rèn)知。在后續(xù)的規(guī)劃中，我們希望節(jié)日閃屏不僅僅是單方面的給用戶傳遞關(guān)懷，還能夠和用戶互動，實現(xiàn)更深層次的情感交流，比如點擊節(jié)日閃屏，跳轉(zhuǎn)到往年今日，幫助用戶回憶起以往的美好回憶，增加用戶粘性。2019年微云會繼續(xù)給大家傳遞節(jié)日的祝福，也會不斷探索新的閃屏設(shè)計風(fēng)格，敬請大家期待。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.yvirxh.cn