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