廣告圈「門檻低」、「是個(gè)人都能做」，這種印象可能來(lái)源于，世界上最出名的廣告公司之一——奧美的創(chuàng)始人，他是個(gè)廚師。除了當(dāng)過(guò)廚師，還做過(guò)推銷員，調(diào)查員，政治秘書，還種過(guò)幾年地，最后成了 1960 年代，極負(fù)盛名
1914 年夏天，一戰(zhàn)爆發(fā)了。在倫敦郊區(qū)的薩里郡，一個(gè)商人正臉色凝重坐在椅上發(fā)呆。他破產(chǎn)了，戰(zhàn)爭(zhēng)將一切都化為烏有，這對(duì)商人的兒子而言，意味著再也吃不到冰淇淋了。這個(gè)孩子剛滿 3 歲，名字叫大衛(wèi)·奧格威。
作為英格蘭的名門望族，奧格威一家都不是吃素的。父親和兄弟是名人，爺爺是富商。所以即使破產(chǎn)了，奧格威也能上貴族學(xué)校，先后受教于艾丁堡斐特思公學(xué)及牛津大學(xué)，成為眾人眼中的「明日之星」。
然而他并沒(méi)有畢業(yè)，他用自己的行動(dòng)證明了自己是個(gè)弟弟，兩年的大學(xué)時(shí)光，奧格威逢考必掛，最后被牛津大學(xué)掃地出門。他既沒(méi)有文憑，也沒(méi)有錢，索性在美琪飯店當(dāng)起了實(shí)習(xí)廚師。
憑著天生的聰明才智，奧格威很快在美琪飯店混得風(fēng)生水起。1932 年，一個(gè)月黑風(fēng)高的晚上，法國(guó)總統(tǒng)保羅·杜梅像往常一樣，來(lái)到了飯店享用晚餐，當(dāng)吃到奧格威做的一款甜品后，不自覺(jué)地發(fā)出了由衷的贊嘆：「C’est bon！」（法語(yǔ)：好吃死了?。?
三周后，杜梅總統(tǒng)就死了，當(dāng)然這不是因?yàn)槌粤藠W格威的甜點(diǎn)，而是吃了一個(gè)蘇聯(lián)人的子彈。
面對(duì)悶熱的后廚，繁重的工作壓力，讓奧格威苦不堪言。奧格威選擇結(jié)束了廚師生涯，回到了英國(guó)推銷起了爐具，這個(gè)爐灶，就是鼎鼎大名的 AGA（雅家）。2015 年 3 月，AGA 曾在北京舉辦過(guò)一場(chǎng)發(fā)布會(huì)，現(xiàn)場(chǎng)一套藍(lán)色 AGA TC 爐灶售價(jià)人民幣 28 萬(wàn)元。
每天出入飯店、古堡、修道院的奧格威，業(yè)績(jī)?cè)略履娩N冠，公司還委托他寫了一本銷售手冊(cè)。奧格威當(dāng)時(shí)甚至想過(guò)把「如何將爐具賣給盲人主婦」這些細(xì)節(jié)也寫下來(lái)，這份推銷書后來(lái)被《財(cái)富》稱為「有史以來(lái)最好的銷售手冊(cè)」。
1936 年，他的哥哥為他在倫敦一家廣告公司謀得實(shí)習(xí)的機(jī)會(huì)。此時(shí)的奧格威還是個(gè)廣告菜鳥(niǎo)。他的創(chuàng)作「秘訣」，是從芝加哥訂購(gòu)一份美國(guó)剪報(bào)，挑選好廣告一字不落抄襲，然后提交給他的英國(guó)客戶。
由于表現(xiàn)出色，公司決定送他到國(guó)外學(xué)習(xí)美國(guó)廣告技術(shù)，為時(shí)一年。這一年，他收獲頗豐，不僅學(xué)業(yè)有成，而且邂逅了 18 歲的女學(xué)生。二戰(zhàn)爆發(fā)的那一年，他們喜結(jié)連理。
△ 奧格威和他太太合照
1938 年，奧格威移居美國(guó)，在蓋洛普咨詢公司任研究員，為好萊塢制片商做民意調(diào)查。天賦異稟的奧格威能在開(kāi)拍前預(yù)測(cè)出電影的票房，誤差<10%。一時(shí)間迪士尼、華納、米高梅紛紛上門求合作。
△ 在街頭做民意調(diào)查的奧格威
1939 年 9 月，二戰(zhàn)爆發(fā)，次年法國(guó)淪陷。憑借數(shù)據(jù)領(lǐng)域的造詣，奧格威受邀加入英國(guó)情報(bào)機(jī)構(gòu)，出任英國(guó)駐美使館二秘。戰(zhàn)后他辭去了公務(wù)員工作，做起了農(nóng)民，農(nóng)作物是大煙。奧格威甚至迷上了這段采菊東籬下的農(nóng)耕日子，但他深知自己無(wú)法以務(wù)農(nóng)為生。
于是 1948 年，奧格威回到紐約，用 6000 美刀創(chuàng)辦了自己的公司，取名「奧美廣告」。在麥迪遜大街貼出一個(gè)別出心裁的招聘海報(bào)，上面?zhèn)鬟_(dá)了三點(diǎn)內(nèi)容：
至此，奧美廣告公司正式成立。算上奧格威共兩名員工，整天大眼瞪小眼。為了活下去，奧格威接了當(dāng)時(shí)能夠接到的所有訂單。包括一個(gè)毫不知名的小制衣廠哈撒韋。當(dāng)時(shí)他們告訴奧格威，只有 3 萬(wàn)美元預(yù)算，卻想和知名襯衣品牌競(jìng)爭(zhēng)。
當(dāng)時(shí)奧格威都快哭了。預(yù)算少要求極高，還不因?yàn)樾Ч饧s。但誰(shuí)讓他叫大衛(wèi)呢，過(guò)人的天賦讓他的廣告在全國(guó)走紅，僅用 3 萬(wàn)美元，讓銷售額翻了三番。使這家默默無(wú)聞了 100 多年的襯衫品牌，一夜之間聞名全國(guó)。更令人無(wú)法想象的是，這個(gè)創(chuàng)意被沿用了 25 年。
廣告為產(chǎn)品增添了來(lái)自遠(yuǎn)方的神秘感，激發(fā)讀者對(duì)狂野的無(wú)限遐想。「?jìng)鬟_(dá)一種特別的信息以取悅讀者」。這本來(lái)是奧格威準(zhǔn)備的 18 個(gè)方案中被否決的一個(gè)，但他想，給其中一只眼睛戴個(gè)眼罩也無(wú)妨，于是在影棚的路上買了個(gè)眼罩交給模特。
隨后，勞斯萊斯花了 5 萬(wàn)美元找?jiàn)W格威做的一支廣告再次成為經(jīng)典，在時(shí)速 60 英里時(shí)，這輛新款勞斯萊斯車內(nèi)最大的噪聲，來(lái)自它的電子鐘。不用多說(shuō)了，時(shí)至今日這依然是最有名的汽車廣告之一。這些廣告讓奧美的名聲如日中天，贏得客戶如探囊取物。
后來(lái)廣告界盛傳，說(shuō)奧格威是一個(gè)奇才，好幾家大廣告公司都提出收購(gòu)意向時(shí)，奧格威卻回絕了。多年后他回憶，如果當(dāng)時(shí)誘他以金錢，他肯定就屈服了，但他們卻以為奧格威在乎的是「創(chuàng)作的挑戰(zhàn)」。
與其說(shuō)創(chuàng)作是一種挑戰(zhàn)，還不如說(shuō)是一種依據(jù)特定原則的模式生產(chǎn)，他甚至禁止員工使用「創(chuàng)作」形容他們的工作。因?yàn)樵趭W格威看來(lái)，好的廣告是「99% 的調(diào)查研究+ 1% 的靈感」。例如奧格威發(fā)現(xiàn)標(biāo)題加入感情色彩的詞可強(qiáng)化廣告效果，經(jīng)過(guò)幾百個(gè)詞的測(cè)試，「Darling」（親愛(ài)的）一詞高居榜首。于是他將它運(yùn)用到多芬的廣告，后來(lái)多芬成為了同類產(chǎn)品中最暢銷的品牌。不久奧格威表示，他并不知道洗澡時(shí)使用電話是危險(xiǎn)的。
奧格威出生名門，卻家道中落，是牛津的明星，卻被掃地出門，他為法國(guó)總統(tǒng)下過(guò)廚，也給國(guó)王當(dāng)過(guò)特工。他對(duì)市場(chǎng)一無(wú)所知，從未寫過(guò)一篇文案，直至 38 歲尚未正式涉足廣告業(yè)，口袋只有區(qū)區(qū)的 6000 美元原始資金……但 3 年之后，這個(gè)一度黯淡的男人已在行業(yè)發(fā)光發(fā)熱，猶如創(chuàng)造了一個(gè)奇跡。
1963 年，奧格威著書《一個(gè)廣告人的自白》?？梢哉f(shuō)奧格威是一個(gè)超越了時(shí)代的牛人，他里面的一些理論，對(duì)我們現(xiàn)在做電商一點(diǎn)都不過(guò)時(shí)，有興趣的小伙伴可以買一本看看。
奧格威憑借他獨(dú)特的人格特征和灑脫的世界觀征服了許多人，那么他的魅力到底在哪，不妨讓我們走進(jìn)他的思想世界，親身領(lǐng)略一番這個(gè)奧美開(kāi)山鼻祖的風(fēng)采。
1973 年，奧格威正式退休。他在童話般美麗的法國(guó)多佛，買下一座 700 年歷史的古堡，過(guò)起了隱居生活。從那時(shí)起，路過(guò)的游客們，時(shí)?？吹竭@樣一幅畫面：一個(gè)晴天的午后，陽(yáng)光透過(guò)一棵 17 世紀(jì)的冬青樹(shù)，將星星點(diǎn)點(diǎn)遍灑小徑。小徑的一旁，一個(gè)衣衫襤褸的老頭兒，正在仔細(xì)地修剪玫瑰花枝。老頭兒的嘴里碎碎地念叨著：「終于，可以安心做個(gè)農(nóng)民咯~」
在他的廣告帝國(guó)之中，他的影響力深廣依舊，直至 1999 年最終逝去。奧格威的故事到這就結(jié)束了，而離新的篇章，奧美中國(guó)的故事也并不遙遠(yuǎn)了。
讓我們把時(shí)間撥回到 1979 年，彼時(shí)隨著改革開(kāi)放的深入，《文匯報(bào)》宣布了商業(yè)廣告的正式回歸。奧美廣告快速響應(yīng)政策的變化，于同年推出中國(guó)大陸地區(qū)的第一支作品——雷達(dá)表廣告正式出道。如今再提起雷達(dá)表，相信很多 60、70 后依然對(duì)當(dāng)年那則「轟動(dòng)」的老廣告印象深刻。
1997 奧美中國(guó)在華推出大眾桑塔納，這款車型很快紅遍大江南北。當(dāng)時(shí)的廣告語(yǔ)「擁有桑塔納，走遍天下都不怕」使用了近十年。在 1978 年年底，中國(guó)改革剛剛拉開(kāi)嶄新的序幕，當(dāng)時(shí)的德國(guó)大眾是唯一既愿意提供技術(shù)，又肯投入資金的汽車公司，可以說(shuō)大眾陪伴中國(guó)人從貧窮走向富裕，國(guó)人對(duì)著大眾品牌有著不同的感情。
再把時(shí)間軸往后撥一下，來(lái)到千禧年的后 4 年，2004 年「我的地盤聽(tīng)我的」成為了年輕人最潮流、最個(gè)性的語(yǔ)言之一，奧美為中國(guó)移動(dòng)「動(dòng)感地帶」所做的數(shù)字營(yíng)銷戰(zhàn)，為奧美中國(guó)贏得了第一座戛納國(guó)際創(chuàng)意節(jié)獅子獎(jiǎng)杯。
作為客戶品牌，「動(dòng)感地帶」并不是中國(guó)移動(dòng)的第一個(gè)品牌，早在「動(dòng)感地帶」之前，「全球通」和「神州行」兩大品牌早已存在，可以說(shuō)，中國(guó)移動(dòng)當(dāng)時(shí)非常精準(zhǔn)地找到了年輕人這個(gè)用戶群體。在「動(dòng)感地帶」推出的第一年，中國(guó)移動(dòng)就快速發(fā)展了 1000 萬(wàn)「動(dòng)感地帶」用戶。
在 2011 年，大衛(wèi)·奧格威迎來(lái)百歲誕辰，奧美進(jìn)駐中國(guó) 20 周年，作為創(chuàng)始人的奧格威應(yīng)該十分欣慰。而在 2012 年奧美中國(guó)憑借 「可樂(lè)手」在戛納國(guó)際廣告節(jié)首次斬獲奧美亞太區(qū)首個(gè)「全場(chǎng)大獎(jiǎng)」。
這個(gè)新穎的平面設(shè)計(jì)是可口可樂(lè)公司「快樂(lè)暢開(kāi)」?fàn)I銷活動(dòng)的環(huán)節(jié)?！缚鞓?lè)暢開(kāi)」旨在為全世界人們的生活帶來(lái)歡笑和快樂(lè)。這個(gè)標(biāo)新立異的設(shè)計(jì)清晰地傳達(dá)了分享的概念。整個(gè)視覺(jué)表達(dá)僅僅由兩個(gè)顯而易見(jiàn)的獨(dú)特元素組成：「動(dòng)感飄舞的絲帶」和「經(jīng)典曲線瓶」， 它們都是可口可樂(lè)全球使用的商標(biāo)元素。
不得不羨煞旁人的是，這個(gè)廣告是一個(gè) 20 歲仍在設(shè)計(jì)學(xué)校念書的香港設(shè)計(jì)師完成的。
奧美中國(guó)的故事也差不多完結(jié)了，最后放一些我收集的奧美廣告，或許里面的 idea 會(huì)讓你拍案叫絕。
由香港奧美公司為肯德基制作的平面廣告，利用雞翅的外形和火焰聯(lián)系起來(lái)，用視覺(jué)暗喻突出肯德基雞翅的熱，辣的賣點(diǎn)。
由泰國(guó)奧美公司為樂(lè)高制作的平面廣告，小孩通過(guò)玩樂(lè)高玩具拼湊自己的夢(mèng)想。
由巴西奧美公司為 Petz 創(chuàng)建的平面廣告，寵物可以成為一個(gè)很好的伴侶，去傾聽(tīng)主人的說(shuō)話。
Amnesty International，德國(guó)奧美公司為國(guó)際特赦組織制作的平面廣告，難民看窗外的景象像在看電視一樣，我們可以關(guān)掉它，但他們不能。
德國(guó)奧美公司為海洋守護(hù)者協(xié)會(huì)制作的平面廣告，塑料垃圾正在淹沒(méi)我們的海洋，他們吃什么你就吃什么。
美國(guó)奧美公司為海明威基金會(huì)制作的平面廣告，再現(xiàn)了書本里的故事，《老人與?！贰ⅰ端涝谖绾蟆?。
印度奧美公司為曼妥思公司制作的平面廣告，惡魔附身都被酸得逃之夭夭。
法國(guó)奧美公司為可口可樂(lè)公司制作的戶外廣告，兩只手的負(fù)空間形成了可口可樂(lè)最經(jīng)典的曲線瓶。
由印度奧美公司為世界自然基金會(huì)制作的平面廣告，利用樹(shù)的外輪廓，拼湊出三只可愛(ài)的小動(dòng)物，樹(shù)木拯救野生動(dòng)物，野生動(dòng)物拯救樹(shù)木。
日本奧美為 ADOT 制作的平面廣告，語(yǔ)言可以消滅戰(zhàn)爭(zhēng)。
泰國(guó)奧美公司為 Poly-Brite 制作的印刷廣告，高吸水性抹布，強(qiáng)調(diào)產(chǎn)品的賣點(diǎn)。
由泰國(guó)奧美公司為樂(lè)高制作的平面廣告，對(duì)于任何大小的想象。
奧美中國(guó)為 Saky 設(shè)計(jì)的平面廣告，刮掉頑固食物。
越南奧美為世界自然基金會(huì)制作的平面廣告，犀牛角和人的指甲是完全一樣的材料，還想要嗎？
由巴西奧美為克拉羅制作的平面廣告，只需要一個(gè)字母就能造成車禍，請(qǐng)不要開(kāi)車發(fā)信息。
文章來(lái)源：優(yōu)設(shè) 作者：研習(xí)社
在頁(yè)面導(dǎo)航欄中，常會(huì)見(jiàn)到返回、取消與關(guān)閉三者按鈕。許多同學(xué)會(huì)弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。
先拋開(kāi)圖標(biāo)，我們回到功能本身的含義上看。如果我們不在產(chǎn)品的語(yǔ)境里，就單看「返回」和「關(guān)閉」這兩個(gè)詞，你首先會(huì)想到什么呢？
當(dāng)我這么去問(wèn)自己的時(shí)候，腦子里出現(xiàn)的并不只是零碎的詞語(yǔ)，而是一些場(chǎng)景和畫面。比如我走錯(cuò)路了，需要原路返回；公司復(fù)工了，我要返程回去?；蛘?，睡覺(jué)時(shí)間到了，我該關(guān)閉電腦了；飯菜燒好了，我得把油煙機(jī)關(guān)掉，等等。
如果仔細(xì)去想的話就會(huì)意識(shí)到，語(yǔ)義衍生出來(lái)的，都是我們?nèi)粘Ｉ钪械慕?jīng)驗(yàn)和對(duì)世界的認(rèn)知。產(chǎn)品中使用的各種語(yǔ)言，不管是文字也好，或者圖標(biāo)圖形也罷，一直都是以我們對(duì)它最本能的理解為基礎(chǔ)的。所以只要你聯(lián)想自己對(duì)「返回」和「關(guān)閉」的看法，就能知道它應(yīng)該在什么樣的產(chǎn)品情境中出現(xiàn)，以及它為什么會(huì)出現(xiàn)。
于是，很自然的，我們會(huì)把「返回」和「路徑」聯(lián)系在一起，所以「返回」在導(dǎo)航設(shè)計(jì)中不可或缺。并且「返」也預(yù)示著我們會(huì)回到之前的路徑節(jié)點(diǎn)，整個(gè)過(guò)程是連續(xù)性的，不被切斷的。而「關(guān)閉」就完全不一樣了，它一般和我們的動(dòng)作有關(guān)，是一個(gè)短暫性的操作，相比返回也顯得更為獨(dú)立。
根據(jù)我們對(duì)語(yǔ)義的判斷，再結(jié)合實(shí)際產(chǎn)品中「返回」的場(chǎng)景，我們可以概括出「返回」和「關(guān)閉」的特征差異。
1. 返回
連續(xù)性：按照產(chǎn)品的頁(yè)面層級(jí)順次跳轉(zhuǎn)。但存在特殊情況，因?yàn)橛行┊a(chǎn)品定義的功能出入口是不一致的，在信息架構(gòu)層級(jí)已經(jīng)做了一定的優(yōu)化，所以返回不一定會(huì)按原來(lái)的路徑回去，可能會(huì)按產(chǎn)品既定的路徑。比如網(wǎng)易云音樂(lè)歌曲播放頁(yè)進(jìn)入直播后返回不是到播放頁(yè)。
整體性：在產(chǎn)品功能頁(yè)面關(guān)聯(lián)性較強(qiáng)的功能中，「返回」需要連接各個(gè)頁(yè)面與層級(jí)之間的架構(gòu)關(guān)系，因此「返回」作為操作節(jié)點(diǎn)，可以幫助產(chǎn)品功能的各個(gè)頁(yè)面之間建立聯(lián)系，維持產(chǎn)品的整體性。
2. 關(guān)閉
非連續(xù)性：用于產(chǎn)品中的臨時(shí)內(nèi)容或臨時(shí)動(dòng)作，比如彈窗或活動(dòng)頁(yè)，與上一級(jí)頁(yè)面沒(méi)有直接關(guān)系。
獨(dú)立性：非產(chǎn)品原生內(nèi)容或是產(chǎn)品內(nèi)的獨(dú)立內(nèi)容。比如小程序、瀏覽器標(biāo)簽等。
3. 返回和關(guān)閉的使用場(chǎng)景
知道了返回和關(guān)閉的特征后，我們可以從兩者的使用角度上再去梳理一下。
現(xiàn)在產(chǎn)品中關(guān)于返回和關(guān)閉有三種狀態(tài)：
1 和 2 的情況很好理解，我們只要根據(jù)前面各自的特征去看就能夠理清場(chǎng)景。
3 的情況會(huì)有特殊性，因?yàn)樗瑫r(shí)具有返回和關(guān)閉這兩種看起來(lái)相矛盾的特性。其實(shí)這是由內(nèi)容決定的，當(dāng)內(nèi)容同時(shí)具有獨(dú)立性和整體性時(shí)，就需要支持兩種操作。如小程序可以作為一個(gè)獨(dú)立功能，但其本身又可以看作是一個(gè)完整的小產(chǎn)品，具有自己的頁(yè)面結(jié)構(gòu)和頁(yè)面層級(jí)。所以小程序?qū)τ谒鶎俚漠a(chǎn)品，我們有關(guān)閉的需要，小程序內(nèi)的頁(yè)面導(dǎo)航又需要返回來(lái)實(shí)現(xiàn)。
除此之外，產(chǎn)品可能開(kāi)始只有返回，后面臨時(shí)出現(xiàn)關(guān)閉按鈕，比如微博「疫情地圖」中使用「小區(qū)疫情查詢」和「7×24 小時(shí)疫情快訊」后會(huì)出現(xiàn)關(guān)閉功能（幫助用戶快速退出）。
這里我們可以從連續(xù)性和非連續(xù)性的角度看，產(chǎn)品針對(duì)具有復(fù)雜層級(jí)和內(nèi)容的頁(yè)面設(shè)計(jì)了順次（返回）和跳頁(yè)（關(guān)閉）的導(dǎo)航方式，其中關(guān)閉隨實(shí)際情境出現(xiàn)。以此為用戶提供了更為靈活的導(dǎo)航路徑，來(lái)同時(shí)滿足用戶逐級(jí)深入、連續(xù)返回瀏覽和選擇性查看、臨時(shí)關(guān)閉的需求。
針對(duì)于「關(guān)閉」，它和「取消」會(huì)有重疊的含義，所以有時(shí)并不能很好地去區(qū)分這兩個(gè)功能表達(dá)的應(yīng)用場(chǎng)景。于是，我們可以借用之前的方式，先把「取消」單獨(dú)拿出來(lái)理解。
一般來(lái)說(shuō)，「取消」意味著行為過(guò)程中，還有后續(xù)行為，整個(gè)過(guò)程沒(méi)有完成，當(dāng)下后悔了，因此取消了當(dāng)前操作。它更傾向于表達(dá)我們主動(dòng)去做了什么改變，然后中途放棄了。
比如，想煮個(gè)飯，于是下了米，倒了水，定時(shí)，確認(rèn)（取消），完成（關(guān)閉）。
這時(shí)候中間如果突然不想煮飯了，在定時(shí)之后，就停止當(dāng)前行為，那就是取消。但點(diǎn)了確認(rèn)并完成煮飯之后，這個(gè)行為就結(jié)束了，只能關(guān)閉。因此，它們之間就是行為上的差異。
就好比，打開(kāi)微信公眾號(hào)文章，內(nèi)容已經(jīng)加載出來(lái)，行為已經(jīng)產(chǎn)生并結(jié)束，這時(shí)候左上角就一定是關(guān)閉。而發(fā)朋友圈的時(shí)候，左上角是取消，那是因?yàn)樾袨檫^(guò)程還在繼續(xù)，沒(méi)有發(fā)布，所以可以取消。而發(fā)布之后，就無(wú)法取消，想要關(guān)閉，也就只能刪除這條朋友圈了。
所以在操作行為中的頁(yè)面，左上角最好是使用「取消」。
當(dāng)我們對(duì)詞的含義有了進(jìn)一步思考后，就可以去看它們?cè)诋a(chǎn)品中的表現(xiàn)了。
比如廣告的關(guān)閉、推薦內(nèi)容的關(guān)閉。都是產(chǎn)品自身提供的內(nèi)容，用戶不想看到就選擇關(guān)掉了，沒(méi)有試圖去改變什么。
包括內(nèi)容頁(yè)面，或者活動(dòng)頁(yè)面，被點(diǎn)開(kāi)，且加載完成呈現(xiàn)出來(lái)之后，這個(gè)行為就結(jié)束了，沒(méi)有取消的概念，只有關(guān)閉。
再比如，選擇圖片文件時(shí)的取消，微信發(fā)朋友圈、微博發(fā)帖時(shí)的取消等等，我們能發(fā)現(xiàn)都是用戶主動(dòng)采取了什么措施，但是又后悔了所以選擇取消。
或者如游戲設(shè)置，就不適合用關(guān)閉，會(huì)讓用戶在理解上產(chǎn)在歧義，比如用戶設(shè)置到一半，不想設(shè)置了，那現(xiàn)在關(guān)閉的話，設(shè)置是生效了么？所以用取消會(huì)更合適。
這些時(shí)候，不存在關(guān)閉的概念，因?yàn)闆](méi)有內(nèi)容可以關(guān)閉，只能是取消當(dāng)前行為。如果使用關(guān)閉，與該場(chǎng)景下的用戶行為不符，反而增加了用戶對(duì)文案的理解成本。
簡(jiǎn)單來(lái)說(shuō)，取消強(qiáng)調(diào)的是放棄改變，關(guān)閉強(qiáng)調(diào)的就只是抉擇。
不過(guò)這里也有一個(gè)特殊例子，就是，微信公眾號(hào)文章轉(zhuǎn)發(fā)給好友，左上角是關(guān)閉，而釘釘里面內(nèi)容轉(zhuǎn)發(fā)給朋友，就是取消。為什么呢？
在一些特殊場(chǎng)景之下，「關(guān)閉」是包含「取消」的。
好比剛才煮飯的例子，現(xiàn)在的電飯煲很高級(jí)，如果在過(guò)程中不想繼續(xù)了，拔掉電源就是完全關(guān)閉了，但同時(shí)這個(gè)行為也包含了人不想繼續(xù)煮飯這個(gè)行為，想取消掉了，所以這時(shí)候關(guān)閉是包含取消的。它跟文章加載完成，已經(jīng)呈現(xiàn)出來(lái)，是不一樣的。
而上面這個(gè)微信與釘釘?shù)睦?，就存在這種包含關(guān)系。比如，內(nèi)容已經(jīng)加載完，要分享給好友，這時(shí)候加載出來(lái)的好友列表已經(jīng)出現(xiàn)，只是選擇發(fā)送給誰(shuí)的問(wèn)題，用戶可以關(guān)閉已經(jīng)加載完成的好友列表頁(yè)面，或者理解為用戶打算取消當(dāng)前行為。
不過(guò)這樣的設(shè)計(jì)并不建議大家將其定義為關(guān)閉，因?yàn)楫吘剐袨檫€在繼續(xù)，使用取消反而更容易理解也更符合場(chǎng)景定義。
譬如，PC 的彈窗經(jīng)常會(huì)同時(shí)出現(xiàn)叉（指代關(guān)閉）和取消，雖然操作的結(jié)果都是使彈窗消失，但是用戶的操作目標(biāo)是不一樣的，事實(shí)上這里提供了兩種選擇，即我不想做決定，我要關(guān)掉彈窗，以及我決定現(xiàn)在不這么做，我要取消這個(gè)動(dòng)作，這里的關(guān)閉其實(shí)就暗含了取消的動(dòng)作。
在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權(quán)，以滿足他們對(duì)功能的不同期待。而在移動(dòng)端，我們需要?jiǎng)h減或合并功能，所以當(dāng)用戶同時(shí)產(chǎn)生重疊的訴求時(shí)，我們往往會(huì)選擇當(dāng)下最符合用戶心境的功能，這是「場(chǎng)景細(xì)化」的結(jié)果。這也能解釋為什么現(xiàn)在很多 PC 產(chǎn)品的彈窗中也只會(huì)保留取消，而不提供叉（指代關(guān)閉）的選擇。因?yàn)橛脩裘鎸?duì)功能不知所措、不做決定的情況已經(jīng)越來(lái)越少，更多的用戶已經(jīng)明確地知道自己應(yīng)該怎么做。
這就是「取消」和「關(guān)閉」的差異，以及移動(dòng)產(chǎn)品對(duì)兩者的取舍的根本原因。
同樣的，有一些頁(yè)面，取消和關(guān)閉都會(huì)用叉的圖標(biāo)來(lái)表示，只是在不同情境中，這個(gè)叉同樣可以理解為取消，關(guān)閉，以及取消或關(guān)閉。差異點(diǎn)跟上述內(nèi)容相同。
返回、取消和關(guān)閉看起來(lái)簡(jiǎn)單，深入分析后又顯得復(fù)雜，但相對(duì)復(fù)雜的分析都只是為了能簡(jiǎn)單地去運(yùn)用。在這個(gè)問(wèn)題中，每個(gè)人都可以從自己日常的經(jīng)驗(yàn)出發(fā)，然后在產(chǎn)品不同的語(yǔ)境里去體會(huì)一個(gè)詞語(yǔ)、一個(gè)圖標(biāo)背后隱藏著我們什么樣的認(rèn)知和使用的習(xí)慣。
那由這個(gè)問(wèn)題延伸的，其實(shí)還有產(chǎn)品的導(dǎo)航方式，頁(yè)面出入口的設(shè)計(jì)差異，產(chǎn)品中整體與獨(dú)立，連續(xù)與非連續(xù)的內(nèi)容結(jié)構(gòu)，原生與非原生頁(yè)面的差異等等。
小問(wèn)題同樣可以見(jiàn)大，但我們也不需要過(guò)度思考，本來(lái)問(wèn)題的解讀角度就是因人而異的，也無(wú)法面面俱到，上面的只是我的理解方式。設(shè)計(jì)還是需要回歸到用戶和產(chǎn)品的目標(biāo)，再去結(jié)合場(chǎng)景和產(chǎn)品業(yè)務(wù)的使用模式才能得出合理有價(jià)值的方案。
文章來(lái)源：優(yōu)設(shè) 作者：呆呆U理
最近方正集團(tuán)負(fù)債千億，被銀行申請(qǐng)破產(chǎn)重整的消息讓眾多設(shè)計(jì)師興奮不已，心里暗自在想，那方正字庫(kù)一萬(wàn)多款字體是不是就可以免費(fèi)使用了？醒一醒，不太可能，身為設(shè)計(jì)工作者，尊重他人的設(shè)計(jì)和擁有版權(quán)意識(shí)是很重要的。
方正字庫(kù)屬于北京北大方正電子有限公司，而這個(gè)公司是方正集團(tuán)的子公司。就算方正集團(tuán)真的破產(chǎn)倒閉了，根據(jù)我國(guó)法律，方正字庫(kù)何去何從也跟這兩家公司的法人是否一致有關(guān)，如果一致，那么就可能被收購(gòu)重組，如果不一致，那么就繼續(xù)獨(dú)立運(yùn)營(yíng)。關(guān)鍵是，無(wú)論是什么結(jié)果，方正字庫(kù)里所有的字體都是有版權(quán)的，如果隨意商用，就會(huì)導(dǎo)致侵權(quán)，乃至把整個(gè)公司都賠進(jìn)去。
直接去網(wǎng)頁(yè)搜索，便有數(shù)不清的方正字體侵權(quán)案例。大到電影和游戲的宣發(fā)，小到淘寶店鋪的頁(yè)面，只要你使用了方正字庫(kù)的必須購(gòu)買版權(quán)才可商用的字體，都有可能收到來(lái)自方正字庫(kù)的律師函。那么該如何避免字體侵權(quán)呢？其實(shí)最好的方法就是使用免費(fèi)可商用的字體，或者乖乖去買下字體的使用權(quán)。
一篇文章告訴你，該怎么判別字體是否侵權(quán)：
如果你實(shí)在要免費(fèi)用方正字庫(kù)的字體的話，那么就選擇「方正黑體簡(jiǎn)體、方正書宋簡(jiǎn)體、方正仿宋簡(jiǎn)體、方正楷體簡(jiǎn)體」這四種字體吧，已經(jīng)向方正字庫(kù)授權(quán)服務(wù)官方求證過(guò)，這四款字體可以直接免費(fèi)商用，不需要書面授權(quán)。
不過(guò)有那么多免費(fèi)、適用度廣、并且可以商用的字體，為什么要執(zhí)著于方正呢？?jī)?yōu)設(shè)標(biāo)題黑和優(yōu)設(shè)好身體這兩款字體，無(wú)論是做 banner、海報(bào)還是文字設(shè)計(jì)都很合適，還沒(méi)擁有的設(shè)計(jì)師們快來(lái)下載。
優(yōu)設(shè)標(biāo)題黑：
優(yōu)設(shè)好身體：
還有優(yōu)設(shè)精心為大家挑選整理成的 2020 年免費(fèi)可商用中文字體最全合集，鏈接給你們，正好需要的話，就快去下載使用。
最后，介紹兩個(gè)可以查詢和下載免費(fèi)可商用字體的網(wǎng)站。
1. 字由網(wǎng)
網(wǎng)站鏈接：https://www.hellofont.cn/home
第一個(gè)是字由網(wǎng)，雖然需要下載客戶端激活字體進(jìn)行使用，不過(guò)截至今日，字由擁有 511 款免費(fèi)可商用字體，對(duì)比一下亂用字體可能產(chǎn)生的侵權(quán)費(fèi)用和煩惱，還是下載客戶端性價(jià)比比較高。
網(wǎng)站及使用介紹：
2. 貓啃網(wǎng)
網(wǎng)站鏈接：http://novicehou.gz01.bdysite.com/
第二個(gè)是貓啃網(wǎng)，是免費(fèi)開(kāi)源可商用的公益字體網(wǎng)站，截至今日，網(wǎng)站上共有 155 款字體，可供設(shè)計(jì)師們選擇和下載使用。
文章來(lái)源：優(yōu)設(shè)
講一個(gè)老東家的故事。一次產(chǎn)品迭代會(huì)上，老板在臺(tái)上講到打算重構(gòu) C 端產(chǎn)品框架，想重整標(biāo)簽欄的標(biāo)簽設(shè)定?？稍谥v到這一部分的時(shí)候卡殼了，遲遲說(shuō)不出「標(biāo)簽欄」這個(gè)控件名，氣氛有些尷尬。這時(shí)一名產(chǎn)品經(jīng)理說(shuō)道：底部導(dǎo)航欄！會(huì)議得以繼續(xù)。
不全錯(cuò)，這么說(shuō)也算能理解?？丶诮缑娴撞浚芤龑?dǎo)用戶切換頁(yè)面。但如果標(biāo)簽欄把導(dǎo)航欄的名字占了……那原本的導(dǎo)航欄應(yīng)該叫什么呢？頂部標(biāo)題欄？那導(dǎo)航欄里的內(nèi)容控件又應(yīng)該叫什么？左上角或者右上角的按鈕？
接地氣的名稱讓我們一聽(tīng)就懂，直到有一天你打算跳槽，你拿著自己的作品到下家面試，設(shè)計(jì)總監(jiān)幾個(gè)術(shù)語(yǔ)啪啪把你問(wèn)得不知所云。這些「死控件」、「死欄目」在頁(yè)面上不可或缺，在設(shè)計(jì)每一個(gè)頁(yè)面時(shí)你以為對(duì)它們?cè)缫蚜巳缰刚疲陉P(guān)鍵時(shí)刻，它們卻六親不認(rèn)了。
「我又不走形式主義，為什么一定要說(shuō)專用名詞呢？接地氣的名稱不是挺好嗎，溝通。」很簡(jiǎn)單的道理，如果名詞和概念都混淆不清，有沒(méi)有花功夫在 UI 設(shè)計(jì)領(lǐng)域進(jìn)行深度專研也就一目了然了，還何以談?wù)撊绾螌⑺鼈冞\(yùn)用自如呢？
這樣的經(jīng)歷，讓我產(chǎn)生了一個(gè)想法。是時(shí)候做一些知識(shí)內(nèi)容沉淀與分享了，不能讓更多的人走我踩過(guò)的坑。第一期我們便來(lái)講一講導(dǎo)航欄。
導(dǎo)航欄 Navigation Bar，也簡(jiǎn)稱為 Navbar。一定會(huì)有不少剛?cè)腴T的 UI 新人，在諸多的 Bar 控件中，難以區(qū)分它所指代的區(qū)域。
在 iOS 上，導(dǎo)航欄是指顯示在應(yīng)用程序頂部，位于狀態(tài)欄下方的容器區(qū)域，層級(jí)應(yīng)高于當(dāng)前頁(yè)面內(nèi)容。
在安卓上，Google 公司在 Material Design 中也賦予了它同樣的定義，但是卻給了它另一個(gè)名稱，頂部應(yīng)用欄（Top App Bar）。
△ iOS與安卓的規(guī)范與命名區(qū)別
請(qǐng)務(wù)必要記?。簩?dǎo)航欄是用于構(gòu)架當(dāng)前屏幕的內(nèi)容，闡述當(dāng)前屏幕的狀態(tài)，并且起到連接父子級(jí)頁(yè)面層次結(jié)構(gòu)的作用。所以回到開(kāi)頭的小故事，為什么標(biāo)簽欄不能叫做底部導(dǎo)航，因?yàn)闃?biāo)簽欄是構(gòu)架了多個(gè)屏幕之間平級(jí)頁(yè)面的內(nèi)容切換，和「導(dǎo)航」的定義沒(méi)有關(guān)系。
一個(gè)基本的導(dǎo)航欄容器一般承載的信息可能會(huì)有：標(biāo)題、導(dǎo)航按鈕、內(nèi)容控件按鈕、其他控件（比如搜索欄、分頁(yè)標(biāo)簽或分頁(yè)控件等），千萬(wàn)別忘了還有分割線。（比如微信的導(dǎo)航欄）
1. 導(dǎo)航欄標(biāo)題
時(shí)間倒退回 2017 年以前，這時(shí)候的移動(dòng)端規(guī)范下的導(dǎo)航欄還是循規(guī)蹈矩的，樣式單一。但隨著 iPhone X 等一系列全面屏手機(jī)相繼問(wèn)世后，移動(dòng)設(shè)備在屏幕高度上有了進(jìn)一步的擴(kuò)展，界面設(shè)計(jì)在一屏內(nèi)的發(fā)揮空間也隨之增加。iOS11 發(fā)布后，大標(biāo)題導(dǎo)航欄設(shè)計(jì)風(fēng)格興起，隨后被引入平臺(tái)規(guī)范。
于是現(xiàn)在 iOS 與 Material Design 在導(dǎo)航欄上也都定義了兩種導(dǎo)航欄標(biāo)題規(guī)范，常規(guī)標(biāo)題與大標(biāo)題。
常規(guī)標(biāo)題是指在高度為 88px（iOS@2x下）的導(dǎo)航容器中，居中放置一個(gè)當(dāng)前頁(yè)面的標(biāo)題。標(biāo)題字號(hào)一般為 34px-38px（34px 為 iOS 標(biāo)準(zhǔn)規(guī)范，但實(shí)際項(xiàng)目中可以盡量在不小于 34px 標(biāo)準(zhǔn)的情況下根據(jù)設(shè)計(jì)需求確定）。
△ 常規(guī)導(dǎo)航不同標(biāo)題字號(hào)的案例及視覺(jué)效果
大標(biāo)題是將導(dǎo)航欄高增加到 192px（iOS@2x），保留高度為 88px 的導(dǎo)航容器來(lái)承載內(nèi)容控件按鈕，將標(biāo)題下墜居左。iOS 的標(biāo)準(zhǔn)規(guī)范定義大標(biāo)題的字號(hào)為 68px。但由于英文有大小寫區(qū)分，在視覺(jué)上有一定的層次表現(xiàn)，而中文因?yàn)槿鄙僖欢ǖ膶哟谓Y(jié)構(gòu)，并且相同字號(hào)的中文視覺(jué)大小大于英文，所以大多數(shù)時(shí)候我們?cè)谶M(jìn)行大標(biāo)題設(shè)計(jì)時(shí)，會(huì)適當(dāng)縮小，一般為 56px-64px 居多。
△ 大標(biāo)題不同標(biāo)題字號(hào)的案例及視覺(jué)效果
大標(biāo)題導(dǎo)航欄的優(yōu)點(diǎn)毋庸置疑，頁(yè)面留白更多，呼吸感更強(qiáng)，大氣現(xiàn)代、格調(diào)更高，因?yàn)轫?yè)面標(biāo)題巨大，能夠幫助用戶快速確認(rèn)當(dāng)前所處位置。采用統(tǒng)一的大標(biāo)題，讓頁(yè)面布局風(fēng)格快速統(tǒng)一。但缺點(diǎn)也顯而易見(jiàn)，因?yàn)樵黾恿藢?dǎo)航欄的高度，導(dǎo)致屏幕利用率降低，一些通過(guò)廣告變現(xiàn)或更加注重一屏內(nèi)內(nèi)容呈現(xiàn)的應(yīng)用便中和了常規(guī)導(dǎo)航與大標(biāo)題導(dǎo)航的優(yōu)缺點(diǎn)，進(jìn)行了風(fēng)格改進(jìn)。
△ 改進(jìn)的大標(biāo)題案例
那我們?nèi)绾卧诔Ｒ?guī)標(biāo)題和大標(biāo)題之間抉擇呢？這可不單單是設(shè)計(jì)風(fēng)格的問(wèn)題，還受產(chǎn)品定位與功能的影響。蘋果的設(shè)計(jì)師在 Apple Music 中實(shí)驗(yàn)并驗(yàn)證了一條結(jié)論——在內(nèi)容非常豐富、層級(jí)結(jié)構(gòu)較深的產(chǎn)品當(dāng)中，大標(biāo)題能夠幫用戶快速確認(rèn)自己的位置。
所以我理解的適合使用大標(biāo)題風(fēng)格的產(chǎn)品一定是：突出內(nèi)容呈現(xiàn)而不是功能繁瑣的；產(chǎn)品定位更偏向于現(xiàn)代或文藝藝術(shù)的；需要快速統(tǒng)一界面風(fēng)格的。而層級(jí)結(jié)構(gòu)需不需要很深，這并不一定，我反而覺(jué)得功能越單一、產(chǎn)品體量級(jí)越輕的應(yīng)用，越適合大標(biāo)題。
所以如此看來(lái)，國(guó)內(nèi)使用大標(biāo)題成功的案例就為數(shù)不多了，這可能與中文字體還有國(guó)內(nèi) app 產(chǎn)品功能都比較繁瑣的原因有關(guān)，真正做到了使用大標(biāo)題快速幫助用戶確認(rèn)自己位置，并且結(jié)合了產(chǎn)品特性與風(fēng)格的，我認(rèn)為人人都是產(chǎn)品經(jīng)理的移動(dòng)端在這方面做得非常棒。
2. 導(dǎo)航按鈕及內(nèi)容控件按鈕
iOS 規(guī)定導(dǎo)航按鈕位置僅能用于放置返回按鈕，可以添加一個(gè)層級(jí)的面包屑，幫助用戶有效地明確當(dāng)前頁(yè)面層級(jí)；Material Design 中，不僅可以放置返回按鈕，還另有作用，菜單圖標(biāo)-用于打開(kāi)導(dǎo)航抽屜或者關(guān)閉圖標(biāo)-關(guān)閉工具欄。
△ iOS與安卓的導(dǎo)航按鈕區(qū)域區(qū)別
這一點(diǎn)與 iOS 的定義有著天壤之別，iOS 非常明確地賦予了工具欄的定義，并且將導(dǎo)航欄和工具欄（Toolbars）徹底地分離開(kāi)，典型案例就是 Safari。
△ iOS明確地將導(dǎo)航欄與工具欄分離開(kāi)
在內(nèi)容控件上 iOS 與 Material Design 也大相徑庭，Material Design 不去限制你的內(nèi)容控件多少，因?yàn)樗峁┝艘绯霾藛?，并可以根?jù)屏寬的變化，自適應(yīng)釋出和收納溢出菜單中的控件。
而 iOS 則規(guī)定我們，要給內(nèi)容控件按鈕足夠多的空間，必要的時(shí)候，隱藏導(dǎo)航欄標(biāo)題也未嘗不可。
那么真實(shí)的項(xiàng)目中，我們往往為了快速落地，會(huì)存在一稿適配雙平臺(tái)的情況。這時(shí)候我們應(yīng)該遵從哪一個(gè)平臺(tái)的規(guī)范呢？答案是：許多大廠的做法已經(jīng)向我們驗(yàn)證，規(guī)范不分家。
在 iOS 諸多的應(yīng)用中溢出菜單早已普及，盡管這是 Material Design 提出的設(shè)計(jì)理念。
△ Material Design的溢出菜單也被運(yùn)用在iOS端
雖然國(guó)內(nèi)遵從 Material Design 進(jìn)行 Android 應(yīng)用設(shè)計(jì)的情況相對(duì)較少，但它提供的設(shè)計(jì)理念與方案卻并不局限在安卓平臺(tái)。
3. 分割線
分割線只是一種體現(xiàn)形式，我想要表達(dá)的是，別忘記區(qū)分導(dǎo)航欄與內(nèi)容界面的視覺(jué)層級(jí)關(guān)系。Matetial Design 提醒我們，頂部應(yīng)用欄可以與內(nèi)容位于同一高度，但滾動(dòng)時(shí)，請(qǐng)?jiān)黾訉?dǎo)航欄的視覺(jué)高度，讓內(nèi)容在其后方滾動(dòng)。而 iOS 則默認(rèn)采用了背景模糊的方式區(qū)分了導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系。
△ 區(qū)分導(dǎo)航欄與內(nèi)容區(qū)域的層級(jí)關(guān)系
缺少視覺(jué)分割會(huì)讓用戶分不清導(dǎo)航欄與內(nèi)容界面，它們看起來(lái)會(huì)更像一個(gè)平級(jí)。對(duì)用戶視覺(jué)區(qū)分內(nèi)容主次其實(shí)是極不友好的。
4. 其他控件
關(guān)于其他控件，iOS 只在規(guī)范中提及到了分頁(yè)控件。蘋果設(shè)計(jì)師考慮到部分場(chǎng)景在當(dāng)前頁(yè)面中還存在信息層級(jí)結(jié)構(gòu)劃分，此時(shí)建議可以在導(dǎo)航欄中使用分段控件。
但國(guó)內(nèi)的應(yīng)用程序早已將導(dǎo)航欄容器的作用發(fā)揮到，基于導(dǎo)航欄層級(jí)始終高于內(nèi)容區(qū)域的特性，我們通?？梢詫⒎侄慰丶?、分頁(yè)標(biāo)簽、搜索欄等等用戶可能隨時(shí)使用的工具放在導(dǎo)航欄中。
△ 導(dǎo)航欄通常會(huì)承載的其他控件
導(dǎo)航欄是幾乎每一個(gè)界面都必定存在的控件，正因?yàn)闊o(wú)法輕易刪減，逃不掉就必須用好它，不然很容易淪為頁(yè)面的減分項(xiàng)。
設(shè)計(jì)好導(dǎo)航欄不僅僅是視覺(jué)上的工作，表現(xiàn)的方式、承載的按鈕與組件、滾屏?xí)r的組合操作還能給用戶帶來(lái)極大的體驗(yàn)增益。
文章來(lái)源：優(yōu)設(shè) 作者：
1.文字滾動(dòng)
<html>
<head>
<title>我的第一個(gè)頁(yè)面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷電黃色預(yù)警！<br />
大雨黃色預(yù)警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滾動(dòng)速度-----------------scroll：滾動(dòng) amount：數(shù)值
width：寬度 height：高度
onmouseover：當(dāng)鼠標(biāo)移上去
onmouseout：當(dāng)鼠標(biāo)離開(kāi)
stop()：停止
start()：開(kāi)始
behavior：
scroll 循環(huán)滾動(dòng)
alternate 來(lái)回滾動(dòng)
slide 滾動(dòng)一次停止
一.有關(guān)于內(nèi)置對(duì)象的作用域
主要說(shuō)明2個(gè)對(duì)象，request，session
1、request 對(duì)象
request 對(duì)象是 javax.servlet.httpServletRequest類型的對(duì)象。 該對(duì)象代表了客戶端的請(qǐng)求信息，主要用于接受通過(guò)HTTP協(xié)議傳送到服務(wù)器的數(shù)據(jù)。（包括頭信息、系統(tǒng)信息、請(qǐng)求方式以及請(qǐng)求參數(shù)等）。
request只在2個(gè)頁(yè)面之間傳遞，每一次新的請(qǐng)求都會(huì)新建一個(gè)request對(duì)象，也就是說(shuō)可能會(huì)request對(duì)象不一致導(dǎo)致空指針異常。
2、session 對(duì)象
session 對(duì)象是由服務(wù)器自動(dòng)創(chuàng)建的與用戶請(qǐng)求相關(guān)的對(duì)象。服務(wù)器為每個(gè)用戶都生成一個(gè)session對(duì)象，用于保存該用戶的信息，跟蹤用戶的操作狀態(tài)。session對(duì)象內(nèi)部使用Map類來(lái)保存數(shù)據(jù)，因此保存數(shù)據(jù)的格式為 “Key/value”。 session對(duì)象的value可以使復(fù)雜的對(duì)象類型，而不僅僅局限于字符串類型。
session對(duì)象在整個(gè)會(huì)話只有一個(gè)，也就是說(shuō)session對(duì)象的數(shù)據(jù)會(huì)一直保留直到主動(dòng)進(jìn)行數(shù)據(jù)更改。
二.表單提交
在index.jsp中使用form進(jìn)行數(shù)據(jù)的提交，action的目標(biāo)是check.jsp，method是post
三.驗(yàn)證跳轉(zhuǎn)
當(dāng)form提交信息后交給check.jsp驗(yàn)證，使用getParameter來(lái)得到form的信息，并使用setAttribute保存。在check.jsp中判斷賬號(hào)密碼是否正確后，使用
<jsp:forward page=".jsp"></jsp:forward>
1
進(jìn)行跳轉(zhuǎn)，.jsp是想要跳轉(zhuǎn)的頁(yè)面路徑。
四.詳細(xì)代碼
index.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="check.jsp" method="post">
請(qǐng)輸入用戶名：
<input type = "text" name = "username"><br/>
請(qǐng)輸入密碼：
<input type = "password" name = "passwd"><br/>
<input type="submit" name="submit" value="登錄">
</form>
</body>
</html>
check.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>驗(yàn)證</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getParameter("username");
String passwd = (String)request.getParameter("passwd");
request.setAttribute("username", username);
request.setAttribute("passwd", passwd);
if(username.equals("admin")&&passwd.equals("123")){
%>
<jsp:forward page="succeed.jsp"></jsp:forward>
<%}else{ %>
<jsp:forward page="failed.jsp"></jsp:forward>
<%} %>
</body>
</html>
succeed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸成功</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸成功
</body>
</html>
failed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸失敗</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸失敗
</body>
</html>
五.注意事項(xiàng)
在jsp中使用form提交表單不能直接進(jìn)行跳轉(zhuǎn)，否則操作不慎就容易出現(xiàn)空指針異常，建議交由單獨(dú)的跳轉(zhuǎn)頁(yè)面處理
下面這段代碼是實(shí)現(xiàn)簡(jiǎn)單的導(dǎo)航效果：
在這里插入代碼片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.nav{
width:700px;
margin:100px auto;
}
.nav ul li{
float:left;
margin-right:5px;
}
.nav ul li a{
width:100px;
height:30px;
color:#fff;
display:block;
line-height:30px;
margin-right:5px;
text-decoration:none;
background:red;
text-align:center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav ul li a:hover{
background:yellow;
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
<li><a href="#">導(dǎo)航</a></li>
</ul>
</div>
</body>
</html>
實(shí)現(xiàn)效果如圖：
容易犯錯(cuò)的地方：剛開(kāi)始我把display:block;屬性寫在最前面，結(jié)果一直出不來(lái)，后來(lái)發(fā)現(xiàn)display屬性應(yīng)該放在height和width屬性后面
我還學(xué)到一個(gè)知識(shí)點(diǎn)：關(guān)于父元素塌陷問(wèn)題：
在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是說(shuō)父元素多高，子元素就多高
但是為子元素設(shè)置浮動(dòng)以后，子元素就會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷
由于父元素的高速塌陷了，則父元素下所有的元素都會(huì)向上移動(dòng)，這樣會(huì)導(dǎo)致頁(yè)面布局混亂
所以我們?cè)陂_(kāi)發(fā)中一定要避免出席那高度塌陷的問(wèn)題，這時(shí)候我們可以將父元素的高度寫死，這樣可避免塌陷的問(wèn)題出現(xiàn)，但是一當(dāng)高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方式是不推薦使用的
1
解決的方案：
根據(jù)W3C標(biāo)準(zhǔn)，在頁(yè)面中元素有一個(gè)隱含的屬性叫做Block Formatting Context
方案一：*（設(shè)置zoom為1和overflow為hidden）
當(dāng)開(kāi)啟元素的BFC后，元素會(huì)有以下特性：
父元素的垂直外邊距不會(huì)和子元素重疊
開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素
那如何開(kāi)啟元素的BFC呢？
設(shè)置元素浮動(dòng)
設(shè)置元素的絕對(duì)定位
設(shè)置元素為inline-block(但是設(shè)置inline-block可以解決問(wèn)題，但是會(huì)導(dǎo)致寬度丟失，所以不推薦使用這種方式)
將元素的overflow設(shè)置為一個(gè)非visible的值（推薦方式：將overflow:hidden這個(gè)是副作用最小的開(kāi)啟BFC方式，所以可以這么說(shuō)，以后若是再塌陷，就給父元素加上overflow:hidden屬性）
但需要注意的是：
在IE6以及以下的瀏覽器中并不支持BFC，所以使用這種方式并不能兼容IE6，在IE6中雖然沒(méi)有BFC，但有另一個(gè)隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過(guò)開(kāi)hasLayout來(lái)解決問(wèn)題
開(kāi)啟方式很多，我們可以直接用一種副作用最小的直接將元素的zoom設(shè)置為1，比如父元素是box1,我們可以在父元素中加上zoom:1;
在這里解釋一下zoom表示放大的意思，后邊跟著一個(gè)數(shù)值，寫幾就可以將元素放大幾倍，所以zoom:1表示不放大元素，但是可以通過(guò)該樣式可以開(kāi)啟hasLayout.
但需要注意的是zoom屬性放IE6可以，別的瀏覽器比如Chrome就不行
****所以重頭戲來(lái)了：若我們想要兼容所有瀏覽器？
1.引入
三種引用方式
第一種 npm安裝
項(xiàng)目根目錄命令行執(zhí)行
npm install uni-simple-router
1
第二種 插件市場(chǎng)（使用HBuilderX導(dǎo)入插件）
第三種 ZIP下載 解壓
2.項(xiàng)目中引入
import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后續(xù)代碼
引入之后就開(kāi)始我們的正式使用。
第一步先在項(xiàng)目的根目錄下創(chuàng)建一個(gè)router文件夾。
格式為：
router
|---modules
|---index.js
|---index.js
router中的modules文件夾是用來(lái)放路由表模板的。modules中的index.js內(nèi)容為
const files = require.context('.', false, /.js$/)
const modules = []
files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})
export default modules
這個(gè)文件用來(lái)把同目錄下的js文件讀取并整合所有路由。
在這里創(chuàng)建的js文件代碼示例：
const home = [
{
//注意：path必須跟pages.json中的地址對(duì)應(yīng)，最前面別忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //對(duì)于h5端你必須在首頁(yè)加上aliasPath并設(shè)置為/
name: 'index',
meta: {
title: '首頁(yè)',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
第二步配置router下的index.js
import modules from './modules'
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
})
export default router;
第三步 就是配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif
// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
這樣你的路由就配置好了。
如果不想繁瑣的配置modules下的文件，可以用webpack自動(dòng)構(gòu)建路由表
安裝
npm install uni-read-pages
1
配置 vue.config.js （可能需要手動(dòng)創(chuàng)建）
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要獲取更多參數(shù)，那么請(qǐng)配置參數(shù)！
includes:['path','name','meta']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
}
}
然后去pages.json里面更改配置，加入所需要的內(nèi)容
最后配置路由表
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請(qǐng)看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes:ROUTES //路由表
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
})
export default router;
所謂閉包就是說(shuō)，閉包是指有權(quán)訪問(wèn)另外一個(gè)函數(shù)作用域中的變量的函數(shù).可以理解為(能夠讀取其他函數(shù)內(nèi)部變量的函數(shù))
閉包的三大特點(diǎn)為（既是優(yōu)點(diǎn),也是缺點(diǎn)）：
1,函數(shù)作用域空間不會(huì)被銷毀
優(yōu)點(diǎn)是:空間中的內(nèi)容,永遠(yuǎn)存在
缺點(diǎn)是:占用大量的內(nèi)存空間
2,可以從外部訪問(wèn)函數(shù)內(nèi)部的變量
優(yōu)點(diǎn)是:使用變量數(shù)據(jù)方便
缺點(diǎn)是:容易泄露數(shù)據(jù)信息
3,保護(hù)私有作用域變量
優(yōu)點(diǎn)是:確保私有作用域變量一直存在
缺點(diǎn)是:占用內(nèi)存空間 閉包的最大問(wèn)題是:有可能造成占用大量的內(nèi)存空間,降低程序的執(zhí)行效率,甚至有可能造成數(shù)據(jù)溢出或者是數(shù)據(jù)泄露 因?yàn)闉榱吮Ｗo(hù)數(shù)據(jù)的安全性,特殊情況下,才會(huì)使用閉包舉例來(lái)說(shuō)：
// 記數(shù)器:
//全局變量 全局變量降低函數(shù)的獨(dú)立性
1
// var count = 0;
// function add(){
// return count++;
// }
// console.log(add());
// console.log(add());
// console.log(add());
//局部變量 函數(shù)執(zhí)行外 局部變量銷毀
1
// function add(){
// var count = 0;
// return count++;
// }
// console.log(add());
// console.log(add());
// console.log(add());
//plus定義在add的內(nèi)部，可以訪問(wèn)add局部變量count
//f為一個(gè)全局變量,通過(guò)賦值后，成為add的返回值,也就是plus方法
//訪問(wèn)到了add中的局部變量count
//所以count雖然是局部變量,但不允許被銷毀,plus就是閉包
1
2
3
4
// function add(){
// var count = 0;
// function plus(){
// return count++;
// }
// return plus;
// }
//
// var f = add();
//
// console.log(f());
// console.log(f());
// console.log(f());
//變身
1
// function add(){
// var count = 0;
// return function(){
// return count++;
// }
// }
//
// var f = add();
//
// console.log(f());
// console.log(f());
// console.log(f());
//繼續(xù)變身
1
// var f = (function (){
// var count = 0;
// return function(){
// return count++;
// }
// }());
//
// console.log(f());
// console.log(f());
// console.log(f());
//JS中，沒(méi)有塊作用域，但是在閉包的寫法里，可以體現(xiàn)出來(lái)。
function outerFunc(){
var outVar = 10;
var innerF = function (){
var innerVar = 20;//該變量雖然隸屬于outerFunc內(nèi)部，但是它的作用域范圍只在innerF對(duì)應(yīng)的函數(shù)體內(nèi)，屬于塊級(jí)作用域
}
alert(innerVar);
return innerF;
}
閉包的作用:
正常函數(shù)執(zhí)行完畢后,里面聲明的變量被垃圾回收處理掉,但是閉包可以讓作用域里的 變量,在函數(shù)執(zhí)行完之后依舊保持沒(méi)有被垃圾回收處理掉
可以讀取函數(shù)內(nèi)部的變量
讓這些變量的值始終保持在內(nèi)存中。
增加塊級(jí)作用域
總結(jié)：
1、 閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)，創(chuàng)建閉包的最常見(jiàn)的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過(guò)另一個(gè)函數(shù)訪問(wèn)這個(gè)函數(shù)的局部變量。
2、 閉包的缺點(diǎn)就是常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。
3、不必糾結(jié)到底怎樣才算閉包，其實(shí)你寫的每一個(gè)函數(shù)都算作閉包，即使是全局函數(shù)，你訪問(wèn)函數(shù)外部的全局變量時(shí)，就是閉包的體現(xiàn)。
————————————————
版權(quán)聲明：本文為CSDN博主「澈野」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/fie_ld/article/details/104595753
Echarts餅圖之?dāng)?shù)據(jù)展示
1、組件簡(jiǎn)介
ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
官網(wǎng)鏈接：Echarts官網(wǎng)
W3C教程：W3C–Echarts教程
2、前端代碼實(shí)現(xiàn)
首先，下載庫(kù)，并引入到項(xiàng)目文件；
話不多說(shuō)，直接上代碼。
/* 封裝的組件 HTML代碼
<div class="echart-wrap-box">
<div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");
defaults: {
option: {
echartsObj: {},
tooltip: {//提示框浮層內(nèi)容。
trigger: 'item',//數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類目軸的圖表中使用。
formatter: " : {c}萬(wàn)人"http://提示框浮層內(nèi)容格式器,{a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, kku6dwy（百分比）
},
//如果系列沒(méi)有設(shè)置顏色，則會(huì)依次循環(huán)從默認(rèn)列表中取顏色作為系列顏色。
color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
legend: {//圖例組件。
orient: 'vertical',//圖例列表的布局朝向:垂直的
x: '80%',//圖例組件離容器左側(cè)的距離。
y: '60%',//圖例組件離容器上側(cè)的距離。
// width: 100,
textStyle: {},//圖例文字的樣式
// left: 'right',//圖例組件離容器左側(cè)的距離。
top: 'center',//圖例組件離容器上側(cè)的距離。
data: [],//右側(cè)圖例小組件信息數(shù)據(jù)
},
series: [{//餅圖信息
name: '',
type: 'pie',//餅狀圖
radius: 140,//餅圖的半徑。
center: ['50%', '50%'],
minAngle: 5, //最小的扇區(qū)角度（0 ~ 360），用于防止某個(gè)值過(guò)小導(dǎo)致扇區(qū)太小影響交互
label: {//展示文本設(shè)置
normal: {
show: true,
formatter: " : {c}萬(wàn)人",//視覺(jué)引導(dǎo)線內(nèi)容格式器,{a}（系列名稱），（數(shù)據(jù)項(xiàng)名稱），{c}（數(shù)值）, xwpilxz（百分比）
},
emphasis: { //文本樣式
show: true, //展示
textStyle: { //文本樣式
fontSize: '16',
fontWeight: '600',
}
}
},
labelLine: {//視覺(jué)引導(dǎo)線設(shè)置
normal: {
show: true
}
},
data: [],//餅狀圖信息數(shù)據(jù),value(數(shù)量)和 name為默認(rèn)數(shù)據(jù)；
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
},
onInit(event) {
vm = event.vmodel;
let data;//假設(shè)這里通過(guò)ajax獲取到了需要展示的數(shù)據(jù)；
if (data.length == 0) {
return
}
data = data.sort((a, b) => { return b.number - a.number });//數(shù)據(jù)根據(jù)數(shù)量number從大到小排序
if (data.length > 7) {//從大到小的第八個(gè)新增粉絲數(shù)量的年份 開(kāi)始統(tǒng)一歸為 其他年份新增粉絲數(shù)量
let arr = data.slice(7);
let num = 0, rate = 0;
for (let i = 0; i < arr.length; i++) {//第七個(gè)之后累數(shù)量和比率
num += Number(arr[i].number);
rate += Number(arr[i].rate);
};
let objOtherYear = {
value: num,
name: '其他年份__nana新增粉絲數(shù)量',
rate: rate
};
let arr2 = data.slice(0, 7);
arr2.push(objOtherYear);
data = arr2;
data = data.sort((a, b) => { return b.number - a.number });//數(shù)據(jù)根據(jù)數(shù)量number從大到小排序
}
this.option.series[0].data = [];
this.option.legend.data = [];
for (let i = 0; i < data.length; i++) {
let seriesData = {
value: 0,
name: '',
rate: ''
};
seriesData.value = data[i].number;
seriesData.name = data[i].year;
seriesData.rate = data[i].rate;
this.option.series[0].data.push(seriesData);//給餅圖賦值數(shù)據(jù)
let legendData = {
name: '',
icon: 'circle',//強(qiáng)制設(shè)置圖形為:圓形
textStyle: {
color: '#000'
}
}
legendData.name = data[i].year;
this.option.legend.data.push(legendData);//給圖例組件賦值數(shù)據(jù)
}
},
callFun: avalon.noop,//點(diǎn)擊餅狀圖后的回調(diào)
isClickEchartsOUt: avalon.noop,//是否為餅圖外的點(diǎn)擊，父組件進(jìn)行判斷后傳過(guò)來(lái)
onReady(event) {
this.echartsObj = echarts.init(event.target.children[0]);//初始化
this.echartsObj.setOption(this.option);
$(window).resize(() => {
this.echartsObj.resize();
});
let dataIndex;//保存選中扇區(qū)的序號(hào)
let _this = this;
this.$watch('isClickEchartsOUt', () => {
if (this.isClickEchartsOUt) {//如果不是餅狀圖扇區(qū)的點(diǎn)擊，則取消選中；
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列
seriesIndex: 0,
// 可選，數(shù)據(jù)的 index
dataIndex: dataIndex,
})
}
});
// 處理點(diǎn)擊餅圖內(nèi)部的事件
this.echartsObj.on('click', function (params) {
if (params.dataIndex != dataIndex) {//如果不是前一次選中的扇區(qū)，則取消選中
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列
seriesIndex: 0,
// 可選，數(shù)據(jù)的 index
dataIndex: dataIndex,
})
}
dataIndex = params.dataIndex;
_this.echartsObj.dispatchAction({
type: 'pieSelect',//選中指定的餅圖扇形。
// 可選，系列 index，可以是一個(gè)數(shù)組指定多個(gè)系列
seriesIndex: 0,
// 數(shù)據(jù)的 index，如果不指定也可以通過(guò) name 屬性根據(jù)名稱指定數(shù)據(jù)
dataIndex: dataIndex,
})
vm.callFun(params);//回調(diào)，傳點(diǎn)擊獲取到的數(shù)據(jù)給父組件
});
},
onDispose() {}
}
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com