從事電商方面的設(shè)計(jì)師，詳情頁設(shè)計(jì)可以說是必修課，好的詳情頁會(huì)給帶給用戶更流暢的視覺體驗(yàn)、更直觀的產(chǎn)品信息、亮點(diǎn)等等，也有助于提升交易的達(dá)成率。正是因?yàn)槿绱耍院芏嗌碳也幌е亟鹫堅(jiān)O(shè)計(jì)師為其打造爆款產(chǎn)品的詳情頁，由此可見詳情頁在電商設(shè)計(jì)中的重要程度。本期和大家一起分析總結(jié)：如何把詳情頁做的足夠出彩，詳情頁做不好需要從哪些方面進(jìn)行提升？
目前被認(rèn)可的一種詳情頁設(shè)計(jì)形式是分屏式，就是按照手機(jī)端設(shè)計(jì)思維以一屏為單位制作，最后整合成一個(gè)完整的詳情頁，這種形式有助于提升視覺流暢度及內(nèi)容識(shí)別度，所以我們可以將每一屏都當(dāng)作一張海報(bào)來制作。而說到海報(bào)，就離不開設(shè)計(jì)構(gòu)圖。
詳情頁的構(gòu)圖與傳統(tǒng)的PC端海報(bào)有所不同，因?yàn)樵斍轫撛O(shè)計(jì)更注重手機(jī)端，所以一屏的內(nèi)容又可以看做是手機(jī)端豎向的海報(bào)。而一副出彩的海報(bào)，必然需要優(yōu)質(zhì)的骨架。那么常見豎向海報(bào)構(gòu)圖形式有哪些？下面為大家總結(jié)了幾種在詳情頁設(shè)計(jì)中比較實(shí)用的構(gòu)圖形式：
如圖所示，這三種構(gòu)圖形式看似簡單，實(shí)則兼顧了手機(jī)端的很多必要點(diǎn)，比如：視覺的流暢度、整潔度、辨識(shí)度、用戶的接受度等等，詳情頁設(shè)計(jì)在構(gòu)圖及板式方面并不需要很復(fù)雜，反而干凈整齊的畫面更易于視覺表達(dá)，也更利于手機(jī)端展示。
這三種構(gòu)圖形式在詳情頁中使用頻率是非常高的，下面我們看幾組案例：
看似簡單的構(gòu)圖，反而在詳情頁設(shè)計(jì)中非常實(shí)用，僅靠這三種構(gòu)圖，完全可以做出很優(yōu)秀的詳情頁。另外還有一些從這三類衍生的構(gòu)圖形式，也比較常用：
文案在配圖下半部分的這類構(gòu)圖相比而言用的少一些、也難把控一些，當(dāng)然用的好了在版式上會(huì)有打破、眼前一亮的視覺感受，只是這類構(gòu)圖不宜多用，完整的詳情頁中出現(xiàn)1-2次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：
詳情頁的構(gòu)圖不易太復(fù)雜，這六種構(gòu)圖形式完全夠日常工作，只需選取其中1-3中構(gòu)圖形式交替使用即可。以上構(gòu)圖示例中標(biāo)識(shí)的裝飾元素可以是線條、英文、圖標(biāo)、數(shù)字、實(shí)物素材等等，也可以選擇不使用，具體情況根據(jù)配圖的留白以及重心靈活使用即可。
所以，詳情頁中每一屏的構(gòu)圖并不難，完全可以把這六種構(gòu)圖形式當(dāng)做公式，需要哪種直接套用其結(jié)構(gòu)就可以（結(jié)構(gòu)類似即可，并非要求1:1）。另外：配圖形式可以分為三種：全屏、半屏、透明圖，具體的構(gòu)圖形式需要結(jié)合畫面整體的重心、留白、美觀度決定。更通俗一些的話，構(gòu)圖就可以理解為填空，內(nèi)容就往空的地方填，注意好適量的留白。
補(bǔ)充：當(dāng)透明圖作為配圖時(shí)，不管哪種構(gòu)圖形式都有可能出現(xiàn)空的現(xiàn)象，這時(shí)我們可以用一些具有裝飾性的數(shù)字、英文、線條、形狀、文字等等進(jìn)行填充，舉例說明：
案例中的文字、數(shù)字與產(chǎn)品相互結(jié)合，既解決了空的問題、提升了整體的飽滿度，又在形式上做到的新穎、有創(chuàng)意。構(gòu)圖形式與前面所說的皆能吻合。
說到設(shè)計(jì)素材，浮在腦海中的可能會(huì)很多種，而這次要說的主要是三類，即：手勢、植物、肌理（在花瓣搜索關(guān)鍵詞“手勢”“植物”“材質(zhì)”“肌理”就能找到對應(yīng)素材），這三類素材在詳情頁設(shè)計(jì)中出現(xiàn)的頻率也是很高的，如果運(yùn)用得當(dāng)會(huì)將詳情頁的出彩度進(jìn)一步提升一個(gè)檔次，而且對于視覺表達(dá)也會(huì)更加生動(dòng)、形象、富有說服力，下面我們逐一來說：
手勢素材
顧名思義，就是各種各樣關(guān)于手方面的動(dòng)作，比如：拿、托、指等等，下面舉個(gè)例子來看：
這些手勢在很多詳情頁中都會(huì)出現(xiàn)，接下來我們不妨思考這么一個(gè)問題：為什么要用這些手勢，只是單純的好看嗎？
其實(shí)不然，在視覺上，這些手勢使得畫面更加生動(dòng)、有立體感、有層次感，讓作品更飽滿、更出彩。而對于用戶而言，能讓其更加深刻的體會(huì)到產(chǎn)品是有溫度的、可操作的、更真實(shí)、更容易理解，所以對于交易的達(dá)成以及加深用戶對產(chǎn)品的了解也更具說服力。
影響詳情頁轉(zhuǎn)化率的因素有很多種，視覺表達(dá)能否真正抓住用戶心理也是很關(guān)鍵的一點(diǎn)！
植物素材
這類素材相信大家都不陌生，在很多頁面以及詳情頁出現(xiàn)的頻率都很高，而且裝飾性很強(qiáng)，寓意也很寬泛，比：自然、清新、貼合現(xiàn)實(shí)、有生機(jī)等等，下面舉個(gè)例子：
如圖所示，這里的植物都能很好的與畫面主體形成很好的遮擋關(guān)系，在視覺層面顯得更有層次感、畫面也更飽滿；而且植物的運(yùn)用并不是隨便使用的，而是與海報(bào)氛圍、文案都緊密相關(guān)，形成了很好的呼應(yīng)、裝飾作用。
我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫面整體氣質(zhì)相符，可以根據(jù)實(shí)際情況靈活使用。
肌理素材
關(guān)于材質(zhì)、肌理的妙用在前面很多文章中都有提到過，這里簡單的說一下：肌理素材對于提升作品細(xì)節(jié)感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問題，不妨用肌理素材試試。
單看標(biāo)題可能很多人不太明白，什么叫做抽象名詞具體化？其實(shí)簡單理解就是：將一些比較抽象的名詞通過設(shè)計(jì)手法表現(xiàn)出來，比如：風(fēng)、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗(yàn)、加快用戶理解，而且在視覺上能生動(dòng)形象的將抽象化名詞表現(xiàn)出來，對于視覺出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺傳達(dá)的時(shí)效性，下面看個(gè)例子：
通過案例我們不難發(fā)現(xiàn)：將抽象化的名詞通過視覺手法表現(xiàn)出來，對于用戶理解的難易程度以及視覺出彩度而言都有提升。如果一款產(chǎn)品詳情頁中能出現(xiàn)1-2次這樣的處理手法，會(huì)使得詳情頁在視覺上更加生動(dòng)、形象。
補(bǔ)充：在詳情頁設(shè)計(jì)中，若文案中出現(xiàn)一些LOGO、數(shù)字、英文，注意不要放過它，因?yàn)樗哂醒b飾性的特點(diǎn)，對于詳情頁板式的活躍以及設(shè)計(jì)感提升都有很大的幫助！形式多為：水印、與產(chǎn)品穿插、作為主體信息使用等等！一款詳情頁這種用法可以出現(xiàn)2-3次！
詳情頁設(shè)計(jì)不可忽視的兩點(diǎn)：視覺的流暢度以及文案辨識(shí)度。文章所提到的一些構(gòu)圖方式、元素使用、視覺表現(xiàn)形式都是為大家提供一個(gè)可供參考的方向，落實(shí)到工作中要靈活運(yùn)用、舉一反三。一般情況下，一款詳情頁大概有2-4屏比較出彩的即可，能形成一定的對比，不至于視覺疲勞、千篇一律！
不妨找一些不錯(cuò)的詳情頁，按照文章中所寫的自己嘗試分析分析，看是否與之吻合。切記詳情頁設(shè)計(jì)構(gòu)圖及文字排版不易太過復(fù)雜，切記、切記、切記，重要的事情說三遍！
文章來源：站酷
IP 形象一直維持著相當(dāng)高的討論熱度，無論是國外的 Superfiction、linefriends；還是到國內(nèi)的 qq family、Molly 等等。那些始終讓你我耳目一新的品牌 IP，其實(shí)都具有自己獨(dú)特的故事。每一個(gè)故事都在日常生活中有跡可循，恰恰是這種緊貼生活的故事切入點(diǎn)，能容易引起用戶共鳴。具備性格色彩的角色，交織構(gòu)建著屬于自己的故事，以及故事中貫穿始終的精神信念，共同組成了一個(gè)完整飽滿的 IP 形象。它可以為品牌帶來更具象的感染力，在豐富 IP 的自身形象同時(shí)，也為用戶的品牌感知提供了更多載體，進(jìn)一步促使用戶對品牌產(chǎn)生價(jià)值認(rèn)同。
在 IP 多元化和傳播渠道多面化的時(shí)代里，如何塑造出帶有「溫度」的角色形象？如何構(gòu)思角色間的創(chuàng)意故事？創(chuàng)意，是否真的是我們刻板印象中的「天馬行空」？
本期 SOAP Vol.02，我們將以「品牌IP設(shè)計(jì)創(chuàng)意」為主題，邀請到京東物流「快遞小鴿」的 IP 創(chuàng)意主理人方宇寧MIMI，和大家分享「小鴿」的創(chuàng)意思路及為大廠創(chuàng)作 IP 的心路歷程。通過多元的創(chuàng)意視角，深入介紹 IP 創(chuàng)作的要旨和秘方，刷新你對「創(chuàng)意」的認(rèn)識(shí)，帶你一同掌握創(chuàng)作 IP 的思路，吸收和萌生創(chuàng)意的創(chuàng)作方法。
完整采訪視頻鏈接：https://www.bilibili.com/video/av70731200?zw
以下，是 SOAP 與她的對話。
SOAP：
為什么京東物流的 IP 形象是四只鴿子呢？
MIMI：
大家可能接觸到的快遞員都是路上送貨的小哥，但像我們內(nèi)部的員工在 618，雙十一這樣的節(jié)日，我們也會(huì)去一線支援，會(huì)發(fā)現(xiàn)在整個(gè)車間里面，不管是快遞員也好，分揀也好，站長等其實(shí)都很忙碌，都在為這份包裹去付出努力，所以我希望在這些維度，去設(shè)計(jì)一些能代表他們的東西，也正是他們這么一個(gè)完整的體系，才能代表整個(gè)京東物流所謂的 IP。（心里默默os：其實(shí)就是畫了很多個(gè)不知道怎么挑啦～）
SOAP：
和我們介紹下它們吧。
MIMI：
快遞小鴿，我選了一個(gè)灰色的賽鴿的形象，是我們?nèi)粘Ｗ畛Ｒ姷囊环N鴿子，也是數(shù)量比較多的一個(gè)鴿種。其實(shí)這一點(diǎn)很匹配我們快遞員群體的一個(gè)情況。我們的快遞員是一群對生活充滿希望、充滿干勁的年輕人，所以小鴿這個(gè)設(shè)定也是一個(gè)很年輕、很正能量、積極陽光的角色。
分揀大哥，顧名思義是一個(gè)體力活的工種，所以他是一個(gè)比較健碩的形象，這種體力型的人格，性格上也會(huì)更加分明。
站長大哥是一個(gè)管理者的角色，所以也會(huì)比較聰明。在我狹隘的認(rèn)知里面，我覺得高瘦的人都會(huì)給人一種聰明的感受，所以我設(shè)計(jì)了這么一個(gè)形象。
司機(jī)大哥的形象就比較有梗了，由于長期駕駛的緣故導(dǎo)致半邊臉曬黑這么一個(gè)形象。
SOAP：
你是怎么塑造它們的性格的？
MIMI：
對于它們整個(gè)人物性格的張力，我希望他們是夸張的，能稍微突破常規(guī)去展現(xiàn)屬于他們的性格，像貨運(yùn)大哥，它雖然曬黑了但也不放棄保養(yǎng)，這張圖就是在畫它在涂防曬霜。除了保養(yǎng)自己，它也會(huì)保養(yǎng)自己的貨車。其實(shí)在一些細(xì)節(jié)上面也有去做一些功夫，像貨車司機(jī)它們成天坐著，屁股有點(diǎn)下垂，所以有了這么一個(gè)它在做減臀操的動(dòng)作。通過這么一系列的表達(dá)可以看出來，他們雖然是一群中年人，但它們并不油膩，而是很努力很積極地在生活。這也是我們的品牌希望傳遞給用戶的一種感受和價(jià)值觀。
SOAP：
你希望這個(gè) IP 帶來一個(gè)什么樣的價(jià)值？
MIMI：
我希望能通過一些這樣的內(nèi)容，去讓更多的用戶除了喜歡他們之外，也能更理解他們，通過這部分的內(nèi)容輸出去改善快遞員與用戶之間的關(guān)系。類似很難避免的一些快遞延誤的情況，它們是否能通過自己的表達(dá)，去緩解這種情景所帶來的不良情緒以及尷尬，我覺得這是小鴿這個(gè) IP 對京東物流來說很大一部分的價(jià)值。
SOAP：
你在做其他 IP 項(xiàng)目的時(shí)候有遇到些什么坎嗎？
MIMI：
17年京東的品牌更新算是我初次接觸到的形象設(shè)計(jì)，和好幾個(gè)同事一起出方案，我那時(shí)候入職不久，比較「不懂事」，沒有像其他同事一樣去考慮太多怎樣的方案能通過，符不符合京東想要傳達(dá)的形象之類的問題。只是憑自己的喜好去做整個(gè)方案，最后出來的效果大家都很驚喜，也在知道完全不可能的情況下依然去推動(dòng)了這個(gè)方案，但結(jié)果你懂的……
到后面參與的一個(gè)品牌聯(lián)盟的 H5 項(xiàng)目，給每個(gè)品牌商品去設(shè)計(jì)形象，有大概三四十個(gè)吧，然后 H5 就沒落了……你懂的……
然后是 JOY Avatar 的設(shè)計(jì)的項(xiàng)目，主要是針對京東內(nèi)部一些 JOY 形象應(yīng)用不規(guī)范的問題，根據(jù)各部門職能做了相應(yīng)的 Avatar 設(shè)計(jì)，整個(gè)過程中覺得很機(jī)械，沒什么成就感，業(yè)務(wù)上的使用和推進(jìn)也很乏力，當(dāng)時(shí)做到都想離職了。
SOAP：
那后來怎么沒走呢？
MIMI：
最后我冷靜下來了，去認(rèn)真審視 IP 這件事情。例如為 joy&doga 去設(shè)定它們的角色以及故事背景，背后也花了很大的工作量去創(chuàng)造整個(gè)世界觀，反復(fù)推敲和驗(yàn)證，才得出最后呈現(xiàn)在大家面前的整套設(shè)定，包括后面根據(jù)它們的設(shè)定去創(chuàng)作內(nèi)容等等。所以在設(shè)計(jì)小鴿的時(shí)候，雖然也是一種探索，但其實(shí)已經(jīng)主動(dòng)避開很多彎路和大坑了。
SOAP：
你有什么關(guān)于創(chuàng)意的心得和大家分享嗎？
MIMI：
「創(chuàng)意需要著力點(diǎn)。 」
以往的理解可能覺得創(chuàng)意就是天馬行空，所以也有去做過一些科技感、超能力的設(shè)定。但是其實(shí)我們?nèi)绻麩o法在這個(gè)世界觀里面做到完整的自洽，其實(shí)很空，其實(shí)就是一群設(shè)計(jì)師的自嗨，用戶感知不到。所以這次的項(xiàng)目里面我一直去尋找現(xiàn)實(shí)中的一些著力點(diǎn)，我覺得小鴿這個(gè)形象落在物流上面其實(shí)是很好的一個(gè)著力點(diǎn)，也正是這個(gè)巧妙的結(jié)合，才能帶給用戶一個(gè)煥然一新的感受，再到形象的設(shè)計(jì)也是落地到現(xiàn)實(shí)生活中真實(shí)存在的鴿種上面來，以及后面的性格設(shè)定都是一個(gè)現(xiàn)實(shí)生活中立體人格的映射等等。當(dāng)用戶能夠讀懂并且感到熟悉的時(shí)候，我們的距離就拉近了。
「相信直覺也是一種邏輯。」
我也見過很多人他們?nèi)ニ伎家粋€(gè)設(shè)計(jì)方案的時(shí)候都是推導(dǎo)出來的，這一個(gè)點(diǎn)那一個(gè)點(diǎn)寫滿了整張紙，如果這樣去做設(shè)計(jì)的話，最后你會(huì)發(fā)現(xiàn)自己被限制在一個(gè)很小的交集里面，就好像如果你說話需要一直思考語法的話，那你根本無法交流。所以我覺得創(chuàng)作的過程更像是一個(gè)潛意識(shí)輸出的過程，需要你用心去探索、去尋找一個(gè)更高層次的抽象，尋求那個(gè)能夠萌生創(chuàng)意的最佳視角。
「好的設(shè)計(jì)需要做到不需要解釋?！?
其實(shí)日常生活中我不是一個(gè)能言善辯的人，嘴可能還比較笨，所以我會(huì)盡力做到不用解釋就能讓對方讀懂我的創(chuàng)意，包括每一次開會(huì)匯報(bào)的時(shí)候我都能不說話就不說話，其實(shí)這個(gè)時(shí)候在場的同事或是我總監(jiān)，其實(shí)他們也是一個(gè)用戶的身份，如果他們沒有第一反應(yīng)去 get 到我這個(gè) idea，或是沒能給他們帶來驚喜的感覺，那代表這個(gè)設(shè)計(jì)交付到用戶手里也會(huì)是同樣的感受，所以也會(huì)去通過這樣一種方式去對自己的設(shè)計(jì)進(jìn)行判斷和優(yōu)化吧。
SOAP編后記：
在采訪 MIMI 之前，我懷抱著能聽到一些概念性方法論的心態(tài)，畢竟現(xiàn)在的明確化的設(shè)計(jì)方法論非常受設(shè)計(jì)師的青睞，然而 MIMI 顯然不在我們「以為」的道路上，而是比我們想象的更隨性自由。無論是設(shè)計(jì)思維還是生活方式，她都崇尚真實(shí)和真切的體驗(yàn)感，不給自己的思維設(shè)限，不讓紙張上看似有理有據(jù)的條理式「推導(dǎo)」束縛。她總是能從她獨(dú)特的視角，看到看似普通事物背后的「玩味」，你永遠(yuǎn)猜不到她的腦袋瓜里到底裝著多少寶藏。她看待 IP 設(shè)計(jì)更像是一次創(chuàng)意實(shí)現(xiàn)的過程，為每一個(gè)自己親手捏造的角色人物構(gòu)思它們的性格故事，并且繪制它們的「番外小故事」，在她看來也是 IP 設(shè)計(jì)中很有趣的部分。
文章來源：優(yōu)設(shè)
<router-link>
<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。
<router-link> 比起寫死的 <a href="..."> 會(huì)好一些，理由如下：
無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級(jí)使用 hash 模式，無須作任何變動(dòng)。
在 HTML5 history 模式下，router-link 會(huì)守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁面。
當(dāng)你在 HTML5 history 模式下使用 base 選項(xiàng)之后，所有的 to 屬性都不需要寫 (基路徑) 了。
示例代碼：
字符串形式，會(huì)默認(rèn)在當(dāng)前路由下給字符串前面加
<router-link to='propsView'>字符串形式One</router-link><br>
<router-link :to="{path: 'propsView', query: {id: 1}}" replace>字符串形式Two</router-link><br>
路徑形式
<router-link to='/test/propsView'>路徑形式One</router-link><br>
<router-link :to="{path: '/test/propsView'}">路徑形式Two</router-link><br>
命名的路由
<router-link :to="{name: 'test', params: {userId: 123}}">跳轉(zhuǎn)至test路由</router-link><br>
想要 <router-link> 渲染成某種標(biāo)簽，例如 <li>。 于是我們使用 tag prop 類指定何種標(biāo)簽， 同樣它還是會(huì)監(jiān)聽點(diǎn)擊，觸發(fā)導(dǎo)航。默認(rèn)值: "a"
<router-link :to="{name: 'test'}" tag="li">渲染成li標(biāo)簽</router-link><br>
設(shè)置 replace 屬性的話，當(dāng)點(diǎn)擊時(shí)，會(huì)調(diào)用 router.replace() 而不是 router.push()，于是導(dǎo)航后不會(huì)留下 history 記錄。
<router-link :to="{name: 'test'}" replace>replace導(dǎo)航后不會(huì)留下 history 記錄</router-link>
藍(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ù)。
不是經(jīng)常做創(chuàng)意工作的人，往往會(huì)覺得自己很難做出有創(chuàng)意的東西來，而經(jīng)常做創(chuàng)意工作的人，又經(jīng)常會(huì)有創(chuàng)意的枯竭感，除了靈光乍現(xiàn)之外，創(chuàng)意還可以從何而來？是不是有一些可以遵循的方法？要想出創(chuàng)意就得有個(gè)開始，這里我給大家提供了一些能做好創(chuàng)意的有效方法。
首先是視覺類比手法，大家先看圖片猜猜這些方法都是什么意思？后面我會(huì)一個(gè)一個(gè)的給大家詳細(xì)講解。
生活經(jīng)驗(yàn)，嘴里含著像體溫計(jì)的東西，大家猜猜是什么意思？
反常視覺手法。
比較手法，綠格電池跟紅格電池作比較。
夸張手法。
問題即答案。
一個(gè)絕好的理由。
真實(shí)性和首創(chuàng)性。
動(dòng)力與啟發(fā)。
這就是事實(shí)，圖中的中文意思是口臭，就是這么丑陋。
首先要講是視覺類比，在視覺比喻修辭中，可分為視覺明喻、視覺暗喻和視覺借喻。視覺類比的手法比較容易混淆，請大家系好安全帶，我發(fā)車了。
第一個(gè)是視覺明喻，可以看成是事物X像事物Y，然后組成連結(jié)，把X和Y相像的地方進(jìn)行聯(lián)想，通過這種方式的表現(xiàn) ，有一定的趣味性，很容易使受眾留下深刻的印象。
它的比喻手法的運(yùn)用主要是借助色彩、形狀、線條、質(zhì)感、空間等視覺語言和元素，來表達(dá)兩種視覺形象的相似性。正是通過這種視覺形象的相似，來刺激受眾的聯(lián)想和想象。
例如通過塑料袋的質(zhì)感，可以聯(lián)想到水母，肥皂的形狀可以聯(lián)想到冰棍，面條的線條可以想象到頭發(fā)，鴨子的色彩可以想到香蕉。
我們來看這個(gè)廣告，事物X，哈密瓜可以想到事物Y，烏龜；事物X，苦瓜，可以想像到事物Y，鱷魚。
第二個(gè)是視覺暗喻，剛才明喻我們說X像Y，那這里使用暗喻時(shí)則會(huì)說X是Y，用一個(gè)事物去識(shí)別另外一個(gè)，通過事物y，具體形象的表現(xiàn)，給受眾一種更加生動(dòng)形象的感覺。
這個(gè)廣告，可以看出事物X，是喝完草莓味芬達(dá)后的舌頭，而事物Y是草莓 ，通過比喻的手法描述喝草莓味芬達(dá)后的感受，以加強(qiáng)廣告上的力度，意圖打動(dòng)客戶。
到第三個(gè)，視覺借喻，可以分為，外顯表達(dá)借喻和內(nèi)涵表達(dá)借喻。
這里我看來給大家詳細(xì)分析一下什么是外顯表達(dá)借喻，它指的是事物X像事物Y，將隱含的喻意聚焦在Y上，借事物Y來引申出含義Z，外顯表達(dá)借喻，與前面所提到的視覺明喻類似，但是它多了一個(gè)隱含寓意，從Y身上引申出來的寓意。
我們看這個(gè)廣告就是使用了外顯表達(dá)借喻，事物X茄子，像事物Y，emmmm…從外形大家可以分辨得出茄子像什么，配合下方臺(tái)詞，當(dāng)你餓的時(shí)候你就跟不上了，提醒消費(fèi)者情人節(jié)要多吃兩根士力架以備不時(shí)之需。
再看這兩則廣告，事物X，分別是梳子和鍋，像事物Y，也就是麥克風(fēng)和架子鼓，借用梳子和鍋碗瓢盆的外形，跟麥克風(fēng)和架子鼓連結(jié)在一起，通過簡單的聯(lián)想，常見的物品，也可以像另外一種東西，以此表達(dá)我們是在音樂的陪伴下長大的。
還有這則廣告，事物X，是大蒜和雞腿，像事物Y，口香糖的水果味道，利用這些食物為視覺符號(hào)，以水果來代替食物隱含的喻意聚焦在產(chǎn)品的味道上，借此表達(dá)這個(gè)牌子的口香糖可以消滅你的口臭，沒人會(huì)發(fā)現(xiàn)，你吃了什么。
而這則廣告，可以看出咖啡和手電筒沒有相似的地方，但他們都可以給我們提供能量，借喻手電來表達(dá)一杯好咖啡，能讓我們保持清醒并保持警覺，讓夜晚變成白晝。
還有這則廣告，這里把燃燒的木炭看作在燃燒動(dòng)物的身體，借喻砍伐森林會(huì)導(dǎo)致氣候變化，并且還摧毀了居住在森林中動(dòng)物的棲息地，慢慢耗盡了它們的種群。
在視覺表達(dá)時(shí)，如果僅僅將產(chǎn)品平淡地表現(xiàn)出來，不僅讓受眾索然無味，而且表現(xiàn)效果沒有說服作用。這時(shí)候，我們就可以考慮使用視覺比喻修辭，將產(chǎn)品表達(dá)得更巧妙、更精辟、成功地進(jìn)行創(chuàng)意設(shè)計(jì)，這就是「舊元素，新組合」的巧妙之處。讓讀者動(dòng)一動(dòng)腦筋，引發(fā)廣告的互動(dòng)性。
第二個(gè)創(chuàng)意方法是生活經(jīng)驗(yàn)，沒有什么能比人們?nèi)粘５男袨樘幨赂腥の缎粤耍瑒?chuàng)意可以源于最微不足道的事情：炎熱的夏天喝飲料、遇到很多蟑螂的煩惱、痘痘一直消不去等等。如果帶著敏銳的目光去觀察人類的行為、動(dòng)物的習(xí)性、人際的交往，那么你必定會(huì)有相關(guān)創(chuàng)意的靈感閃現(xiàn)。
這則廣告用血絲表現(xiàn)眼睛所受的日常傷害，從日常的紅眼尋找靈感，解釋了該產(chǎn)品的利益點(diǎn)。
還有，平常許多打鼾的人都沒有意識(shí)到自己打鼾有多嚴(yán)重，這常常讓周圍的人感到痛苦，這條廣告同時(shí)運(yùn)用了夸張的手法，連隔壁開派對的人都頂不住，這讓人們意識(shí)到，打呼嚕對其他人來說有多煩人，并促使打鼾者考慮向海報(bào)上的機(jī)構(gòu)尋求幫助。
第三個(gè)創(chuàng)意方法是用不尋常的角度觀察事物或生活，不論是昆蟲的角度還是從小孩的角度，都是創(chuàng)意的絕佳起點(diǎn)。
我們可以用不同角度觀察事物：例如仰視/俯視/由里向外的/手機(jī)視角的/動(dòng)物視角的/昆蟲視角的。
還可以換位觀察事物：例如用孩子的眼光/用古代人的眼光/用蜻蜓的復(fù)合眼光/用貓的眼光。
甚至可以透過不同物體觀察事物：通過水/霧/冰/結(jié)霜的玻璃/煙/火等。
這則廣告很直觀的在霧霾上看自己生活的城市，空氣污染危害了人類的舒適、健康，為了還城市一個(gè)美麗的上空，需要個(gè)人、國家、乃至全球各國的共同努力。
這是一本旅游指南的廣告，在一張平面上從反常視角把出發(fā)地和目的地完美的連結(jié)在一起，搏盡了觀者的眼球。
還有通過手機(jī)的視覺看鞋子，讓受眾的視覺焦點(diǎn)，聚焦在畫面的正中間，也就是鞋子上。
第四個(gè)手法就是對比，對比是把兩個(gè)相對或相反的事物，或者一個(gè)事物的兩個(gè)不同方面列舉出來，是相互比較的一種手法。對比的作用在于使好的顯得更好，壞的顯得更壞。
從構(gòu)成的方式看，對比有兩種情形，一是反面對比；另外一個(gè)是反物對比。
什么是反面對比呢，反面對比就是一個(gè)人很好，拿一個(gè)壞的和他比。
這兩張海報(bào)一樣用了左右式的對比方式，直觀明了的顯示出價(jià)格低的旅游景點(diǎn)和價(jià)格高的景點(diǎn)的天壤之別。
而反物對比就是拿事物的特質(zhì)或者本質(zhì)來做對比，這樣會(huì)把事物特征表現(xiàn)的更為鮮明、突出。
這個(gè)廣告比較有趣，只展示了一張產(chǎn)品圖，是在蘋果推出新的Mac Pro的時(shí)候，宜家對蘋果新產(chǎn)品的一個(gè)吐槽，因?yàn)槿藗冏⒁獾剿雌饋砭拖褚思乙粋€(gè)刨絲器。
這則廣告就有點(diǎn)費(fèi)腦，左邊是《美女與野獸》的王子亞當(dāng)，右邊是穿著動(dòng)物毛皮的貴婦，用美與丑兩個(gè)相反的特質(zhì)來看他們，傳達(dá)海報(bào)要表達(dá)的寓意，到底誰才是怪物？
這種手法把好與壞、善與惡、美與丑的對立組合在一起，形成對照，給人非常鮮明的形象和強(qiáng)烈的感受，強(qiáng)化語言的表現(xiàn)力。運(yùn)用對比，能把想要強(qiáng)調(diào)的特點(diǎn)揭示出來，給人們深刻的印象和啟示。
第五個(gè)手法是夸張的手法，夸張的說法能表現(xiàn)產(chǎn)品有多么的好吃，多么的好玩，性價(jià)比多么的高，多么的實(shí)惠，多么的出色……這一創(chuàng)意手法是屢試不爽的絕招，可以運(yùn)用在許許多多的廣告中 ，夸張手法可以分為兩類：擴(kuò)大夸張，縮小夸張。
擴(kuò)大夸張：故意把客觀事物說得「大、多、高、強(qiáng)、深等等」的夸張形式。例如：蜀道之難，難于上青天。
看這則廣告，運(yùn)用豐富的想象力，把廚房里肉眼看不到的細(xì)菌有目的放大，以增強(qiáng)表達(dá)廚房看到的細(xì)菌遠(yuǎn)不止這些，有效地說服消費(fèi)者選擇這款清潔劑來消滅細(xì)菌。
而這則廣告，得先看看產(chǎn)品右下角的白旗，寫著「暴力永遠(yuǎn)不能解決問題」，用夸大的手法告訴你，暴力的擠痘痘只會(huì)使痘痘對皮膚的傷害更大，死火山就會(huì)變成活火山了，用言過其實(shí)的方法，讓消費(fèi)者購買這個(gè)溫和的祛痘產(chǎn)品。
這則廣告很容易看得懂，有些人心中都有一個(gè)小借口，比如吃一點(diǎn)，就吃一點(diǎn)點(diǎn)，最后導(dǎo)致身體像怪物一樣成長，客觀的放大了垃圾食品對身體的改變，啟發(fā)觀者要養(yǎng)成良好的飲食習(xí)慣，減少體內(nèi)脂肪過剩。
而縮小夸張，則故意把客觀事物說得「小、少、低、弱、淺……」的夸張形式。例如寸土必爭、滴水不漏、寸步難行等也有同樣的表達(dá)效果。
這條廣告用夸張的手法故意把產(chǎn)品縮得很小，這是因?yàn)檫@個(gè)品牌希望在哥倫比亞商店推廣不同尺寸的罐頭，現(xiàn)在客人不僅會(huì)買到常規(guī)尺寸，而且他們還可以找到更小的尺寸。
這條公益廣告，把可以度假旅游玩樂的地方，故意的、合理的縮小到一個(gè)藥丸大小，強(qiáng)調(diào)度假會(huì)減少30%心臟病發(fā)作的幾率。
第六個(gè)手法是問題即答案，有時(shí)候產(chǎn)品的特點(diǎn)被認(rèn)為是缺點(diǎn)，但是站在負(fù)面要素，換個(gè)角度，就能把它變成最佳的銷售訴求 。
例如這條廣告，斯蒂文斯公司生產(chǎn)了一種非常棒的新長筒襪，只賣50美分，價(jià)格比其他品牌低很多，這是個(gè)讓人難以置信的價(jià)格。
而且就算人們能相信這是真的，很多女性也不會(huì)完全被吸引，來買這么廉價(jià)的襪子，所以廣告把長襪的「廉價(jià)」變成「時(shí)髦」。他從文案上就作了一個(gè)改變，把它命名為「25美分可以買一條漂亮的腿」，然后把廣告語設(shè)計(jì)成它自己的包裝，這個(gè)廣告也獲得了輝煌的戰(zhàn)果。
還有，佐藤可士和的極生麒麟也用了這個(gè)方法，把廉價(jià)的的發(fā)泡酒的負(fù)面印象，轉(zhuǎn)成了清爽不膩的口感，把市面上花俏的廉價(jià)包裝換成簡約冷調(diào)的風(fēng)格。
大眾的甲殼蟲汽車剛剛登陸美國市場時(shí)，非主流的小型汽車并不受歡迎，伯恩巴克帶領(lǐng)他的團(tuán)隊(duì)只做了這個(gè)廣告，極具創(chuàng)意的說服人們「還是小得好」，從而改變?nèi)藗儗τ谄嚧笮〉某梢姟?
第七個(gè)手法是一個(gè)絕好的理由，就是給消費(fèi)者一個(gè)合乎情理的購買理由，一個(gè)好的理由能把消費(fèi)者變成忠實(shí)的擁護(hù)者。
這個(gè)廣告的標(biāo)題：「煙草就是烤得更香」，這是一種清淡、溫和、味道不錯(cuò)的煙草，簡單明了的說出購買理由，toast還有干杯、祝酒、敬酒、祝酒詞的意思，所以其他香煙都是有害的，而好彩香煙是被祝福過的，太妙了。
這條廣告標(biāo)題是，這是一張誠實(shí)的皮膚，她使用了廣告中的乳液；這是很多護(hù)膚品都愿意使用的一種方法，給女性消費(fèi)者一個(gè)購買的理由，她們愿意為自己的美麗買單。
這個(gè)廣告底部的英文意思是，不要讓你的貴重物品失去價(jià)值，這完全符合消費(fèi)者的想法，想把自己貴重的物品抵押出最理想的價(jià)格，從而讓你選擇BBVA。
第八個(gè)手法是真實(shí)性和首創(chuàng)性，真實(shí)的作品總比冒名頂替的受歡迎，在廣告中真實(shí)性可由以下三點(diǎn)中的任意一點(diǎn)表現(xiàn)：
這則廣告?zhèn)戎氐氖钦娌膶?shí)料，從樹上剛采摘下來的啤酒，肯定味道純正，而且喝多了不上頭。
這則咖啡廣告，告訴我們它的咖啡豆產(chǎn)于南美高地。
這則是專門為世界上第一批山地自行車所做的廣告，著重強(qiáng)調(diào)「首創(chuàng)產(chǎn)品」的價(jià)值。
第九個(gè)手法是動(dòng)力與啟發(fā)，這一啟發(fā)創(chuàng)意的跳板是源于自助，這樣的廣告創(chuàng)意能激勵(lì)人們行動(dòng)起來，去突破自己、實(shí)現(xiàn)自己的價(jià)值。
這是Amare Sex Shop的廣告，它是一個(gè)尊重、自由和賦予女性權(quán)力的品牌。廣告的理念是「粉碎你自己」，這個(gè)廣告激勵(lì)人們?nèi)酆透玫亓私庾约骸?
這是埃及Creative Ode為旅行規(guī)劃雜志制作的平面廣告，說的是古代文明創(chuàng)造了奇跡。因?yàn)樗麄冇幸粋€(gè)夢想，他們提前計(jì)劃好了。所以下次你有一個(gè)美好的夢，你一定要在「旅程」中計(jì)劃好。
最后一個(gè)手法是這就是事實(shí)。令人震驚的、風(fēng)趣幽默的、鮮為人知的事實(shí)也能成為創(chuàng)意的基礎(chǔ)。出色的市場調(diào)研在這里能起到很大的作用，「講事實(shí)」的方式是最能令人信服的。
這條廣告，麥當(dāng)勞把大實(shí)話說出來了，菜單里的食物非常具有標(biāo)志性，人們只需一眼就可以自動(dòng)識(shí)別它們，即使它們模糊不清，沒有金色的拱門標(biāo)志。
還有敘利亞沖突，是我們這個(gè)時(shí)代最嚴(yán)重的人道主義危機(jī)之一，盡管社交媒體上有著廣泛的支持，但它并不是全心全意的，敘利亞需要的不是口頭支持，而是為560多萬流離失所的敘利亞人提供避難所，簡而言之，它需要的不是發(fā)布議論敘利亞的帖子，而是通過捐款做出真正的改變。
這個(gè)廣告向體育迷們展示了ESPN手機(jī)應(yīng)用的好處。就是通過這個(gè)應(yīng)用，將不會(huì)錯(cuò)過他們喜歡的比賽的任何時(shí)刻。
最后我們來看看案例演示，這里我要做的是一個(gè)香煙的公益海報(bào)，我們可以先來一個(gè)頭腦風(fēng)暴，一開始我會(huì)想抽煙會(huì)影響健康，影響健康危害最大的器官就是肺。
好，接著我會(huì)想到，影響了肺會(huì)得肺癌之類的疾病，那就會(huì)減少壽命，減少壽命就是減少生存的時(shí)間，那時(shí)間讓我想到沙漏這個(gè)容器。
當(dāng)沙漏上面的沙都流向底部，生命就走完了，就像抽煙一樣，第一次嘗試，不會(huì)感覺到疼痛與苦難，兩次也不會(huì)，一年、三年也許也不會(huì)，但是等到不好的結(jié)果真正出現(xiàn)的時(shí)候，做什么都已經(jīng)無法彌補(bǔ)了，這就是慢性自殺的過程。好，那慢性自殺就代表人會(huì)死亡。
最后從死亡能聯(lián)想到十字架。
接著我提取了幾個(gè)關(guān)鍵的要素，使用暗喻的視覺手法，用一個(gè)事物去識(shí)別另外一個(gè)，用肺暗喻健康，沙漏暗喻時(shí)間，十字架暗喻死亡，好了，有思路就開始動(dòng)手制作吧。
我先畫一張草稿，這里看到，我把香煙跟肺放在沙漏的上半部分，意思是抽煙的時(shí)候?qū)Ψ危瑢】翟斐捎绊?，它們化成血水，血水流到沙漏的底部，底部漂浮著十字架，象征著死亡，可以看出吸煙的整個(gè)過程就是在慢性自殺。
借助C4D的力量
借助PS的力量
最后總結(jié)一下今天的內(nèi)容，創(chuàng)意廣告更能為消費(fèi)者所注意到，文章中詳細(xì)的介紹了10種使用較多的創(chuàng)意手法，與那些沉悶而且在意料之中的廣告相比，創(chuàng)意廣告更能在情感上與消費(fèi)者引起共鳴。在這一個(gè)看重注意力的經(jīng)濟(jì)時(shí)代，你必須擁有絕妙的創(chuàng)意來幫助客戶的品牌，生意或者是信譽(yù)。
日常工作中，經(jīng)常聽到交互和視覺同學(xué)有著如下對話：
可以看到，無論交互還是視覺同學(xué)的提問，其實(shí)都是圍繞「信息」表達(dá)的邏輯。視覺同學(xué)設(shè)計(jì)過程中，應(yīng)該如何理解交互稿件，并進(jìn)一步體現(xiàn)交互的層級(jí)邏輯？是否可以對交互稿的布局進(jìn)行調(diào)整發(fā)揮？我們通過案例來一起看看。
目前，頁面類設(shè)計(jì)一般分為運(yùn)營型和平臺(tái)型。
關(guān)注重點(diǎn)：「活動(dòng)利益點(diǎn)」「模塊內(nèi)容順序」「視覺發(fā)揮空間大」
活動(dòng)頁設(shè)計(jì)中，信息的層級(jí)表達(dá)相對簡單，一般分為主氛圍圖-體現(xiàn)活動(dòng)主題、內(nèi)容展示區(qū)-直接轉(zhuǎn)化、尾部兜底區(qū)-相關(guān)擴(kuò)展。這類型需求，重點(diǎn)在理解交互稿中主題的表達(dá)、內(nèi)容區(qū)的分類及重點(diǎn)元素體現(xiàn)。視覺設(shè)計(jì)師在該類型的設(shè)計(jì)中，發(fā)揮度是很大的。
關(guān)注重點(diǎn)：「層級(jí)結(jié)構(gòu)」「瀏覽順序」「視覺在信息邏輯之上發(fā)揮」
平臺(tái)類設(shè)計(jì)項(xiàng)目，交互設(shè)計(jì)師通過頁面框架、模塊設(shè)計(jì)來表達(dá)產(chǎn)品/運(yùn)營的策劃思路，涉及內(nèi)容及模塊更多，且包含著復(fù)雜的邏輯關(guān)系。一個(gè)優(yōu)秀的平臺(tái)視覺設(shè)計(jì)師，應(yīng)當(dāng)是通過好的視覺表達(dá)，按照交互信息層級(jí)關(guān)系，將信息內(nèi)容傳遞給用戶。這里視覺同學(xué)要避免兩個(gè)誤區(qū)：完全按照交互框架和排布，只是純粹填色；從「好看」的角度重新布局，忽略交互層級(jí)關(guān)系。
下圖是美妝頻道的一次改版，通過觀察交互稿和視覺稿可以看到，這位視覺設(shè)計(jì)師在交互稿的基礎(chǔ)上，采用了更靈活的視覺引導(dǎo)方式。這些改變是否有效傳遞了交互邏輯？視覺階段的這些調(diào)整是否都合適呢？看完本文，你就能有一個(gè)清晰的答案了。
瀏覽順序 元素表意
這是一個(gè)新品速遞模塊的設(shè)計(jì)方案。交互稿表達(dá)的信息是：這個(gè)區(qū)塊是用來介紹新品的，首先希望用戶知道模塊屬性是什么，然后讓用戶快速了解推薦商品是什么，及為什么值得買。視覺稿較好的傳遞了交互層級(jí)及信息表達(dá)，首先突出了欄目名稱讓用戶能一眼看到，其次是商品及商品特性展示；而稿件中的欄目名稱位置和樣式則在視覺上做了自由的發(fā)揮。
小結(jié)：模塊中各元素的瀏覽引導(dǎo)（眼睛瀏覽路徑）需要嚴(yán)格按照交互邏輯，元素的表達(dá)和位置可以根據(jù)邏輯發(fā)揮。
下面這組案例，在信息層級(jí)上，視覺稿是否完整傳遞了交互邏輯？先自己思考一下吧~
模塊比重 內(nèi)容布局
交互層級(jí)來看，整個(gè)區(qū)域有2個(gè)模塊「正在進(jìn)行」和「品牌精選」，每個(gè)模塊有4個(gè)等大的展示單元格。而視覺稿中，「正在進(jìn)行」模塊的單元格變成了兩大兩小。嚴(yán)格來說，這個(gè)調(diào)整是不符合交互邏輯的。
但是，視覺稿的輸出效果明顯更靈活，瀏覽層次更佳！那，能不能這么改呢？
這需要回到，為什么交互輸出時(shí)，畫成了等大樣式。在交互環(huán)節(jié)，運(yùn)營側(cè)提出四個(gè)專題希望是相同層級(jí)，無優(yōu)先級(jí)的差異。
這種情況下，視覺同學(xué)如果仍然堅(jiān)持有層級(jí)差異的視覺感官更好，可以先和交互同學(xué)一起商量，從用戶體驗(yàn)的角度來看，這個(gè)改變是否有嚴(yán)重影響，如果團(tuán)隊(duì)內(nèi)部也都認(rèn)為改動(dòng)后的效果更佳，可以一起找到對應(yīng)的運(yùn)營同學(xué)，說明原因，建議他們進(jìn)行調(diào)整；同時(shí)去了解這樣的調(diào)整對業(yè)務(wù)方的業(yè)務(wù)表達(dá)是否有影響。
小結(jié)：視覺表達(dá)要關(guān)注信息模塊的比重，視覺側(cè)好的想法也要直接提出和交互及業(yè)務(wù)方討論
上面這個(gè)案例也是關(guān)于模塊比重的，最大的差異在于欄目名稱及入口的調(diào)整。從不強(qiáng)調(diào)樓層名稱變成樓層名稱成為模塊的視覺焦點(diǎn)，因涉及到模塊比重，類似的改動(dòng)也建議和交互設(shè)計(jì)師進(jìn)行討論。同樣，該案例的改動(dòng)，豐富了樓層樣式，并通過標(biāo)題模塊強(qiáng)調(diào)了樓層的調(diào)性氛圍，同時(shí)并未對用戶閱讀體驗(yàn)造成不好的影響，因此是個(gè)視覺提升交互表達(dá)的優(yōu)秀案例。
對于同層級(jí)關(guān)系的單元格，我們也可以采用不同的操作方式，比如上面案例中，視覺環(huán)節(jié)使用了疊起的展示樣式。相對于交互，優(yōu)點(diǎn)在于增加了一種互動(dòng)形式，而缺點(diǎn)則在于會(huì)對部分信息進(jìn)行遮蓋，不能直觀呈現(xiàn)全部內(nèi)容。這個(gè)案例的處理方式是，我們將兩種方案的優(yōu)劣告知運(yùn)營方，運(yùn)營方認(rèn)為可以犧牲部分信息的呈現(xiàn)，而選擇互動(dòng)方式的不同呈現(xiàn)。
我們以TAB來舉例，TAB形式體現(xiàn)的是并列關(guān)系的多個(gè)模塊呈現(xiàn)，視覺設(shè)計(jì)師可以根據(jù)不同場景用不同視覺方案來呈現(xiàn)。
常規(guī)的視覺展示
場景化表達(dá)-日歷
下面案例中，交互傳達(dá)的是一周七天的食物推薦，在視覺階段可以把TAB樣式設(shè)計(jì)得更貼近日歷，更貼合模塊的主題表達(dá)。
場景化表達(dá)-餐桌
這個(gè)案例視覺側(cè)在模塊面積上進(jìn)行擴(kuò)大，影響到原首屏內(nèi)展示內(nèi)容的信息量。這種情況則需要與業(yè)務(wù)同學(xué)進(jìn)行溝通，信息后置是否會(huì)影響他們在首屏信息的展示需求。一般活動(dòng)類頁面，首屏內(nèi)容和頁面長度的要求，相對寬松；如果是工具類/綜合性展示頁面，信息是否能在首屏出現(xiàn)，對頁面點(diǎn)擊和使用效率會(huì)有很大影響。
TAB的引導(dǎo)位置
下面案例中，因?yàn)門AB的位置發(fā)生了調(diào)整，用戶的閱讀順序發(fā)生了變化。交互稿中，我們希望用戶先看到TAB分類以了解推薦手機(jī)的不同緯度；而視覺稿中，優(yōu)先讓用戶看到推薦商品，如果首輪推薦無興趣，再通過TAB切換查看其它維度內(nèi)容。
元素的不同呈現(xiàn)順序會(huì)體現(xiàn)不同的交互邏輯。
下圖中的推薦區(qū)模塊，交互上的順序是圖→人物→具體商品描述，首先強(qiáng)調(diào)的是商品，其次是用戶的評(píng)價(jià)；而視覺稿上的順序是人物→圖→具體商品描述，首先調(diào)的是評(píng)價(jià)的人，再說商品是什么。兩種邏輯其實(shí)都符合「食鮮者說」的邏輯，但從屬關(guān)系是不同的。這里的邏輯決策是，如果評(píng)價(jià)用戶是知名度較高的，可以通過人物為食物加分，則我們選擇視覺稿邏輯；而如果我們是靠商品圖本身致勝，評(píng)論者只是輔助決策元素，則選擇交互稿邏輯。
模塊間的層級(jí)關(guān)系，可以通過去色來快速判斷，是否符合交互瀏覽要求。去除顏色和元素對界面視覺優(yōu)先級(jí)的影響，更聚焦邏輯本身。
對比下面案例，去色后可以更容易看到，優(yōu)化后方案更加整體，視覺引導(dǎo)也更加順暢。
交互稿中體現(xiàn)的邏輯，涉及到樣式/位置調(diào)整的，我們應(yīng)遵循原則：「在保證信息順序、層級(jí)關(guān)系、信息占比邏輯正確的前提下，視覺可以進(jìn)行專業(yè)的各種發(fā)揮」。
文章來源：優(yōu)設(shè)
面包屑導(dǎo)航介紹
一般的內(nèi)容型網(wǎng)站，例如CMS都會(huì)有這種面包屑導(dǎo)航?？偨Y(jié)起來它有以下優(yōu)勢：
讓用戶了解目前所在的位置，以及當(dāng)前頁面在整個(gè)網(wǎng)站中所在的位置；
體現(xiàn)了網(wǎng)站的架構(gòu)層級(jí)；提高了用戶體驗(yàn)；
減少返回到上一級(jí)頁面的操作；
實(shí)現(xiàn)效果
那我們應(yīng)該如何實(shí)現(xiàn)？我看網(wǎng)上多數(shù)都是只提供靜態(tài)實(shí)現(xiàn)，
這里我結(jié)合bootstrap 和 spring boot以及mysql來做一個(gè)完整的例子。
表結(jié)構(gòu)設(shè)計(jì)
圖里面的菜單其實(shí)是分級(jí)維護(hù)上下級(jí)關(guān)系的。我這里用到了2級(jí)，表里有l(wèi)evel字段標(biāo)記。
點(diǎn)擊第1級(jí)加載第2級(jí)分類，點(diǎn)擊第2級(jí)分類名稱則展示面包屑導(dǎo)航。
CREATE TABLE tb_category (
id bigint(20) NOT NULL AUTO_INCREMENT,
category_name varchar(100) NOT NULL,
parent_id bigint(20) DEFAULT NULL,
level tinyint(1) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;
insert into tb_category values(1,'Java文檔',0,1);
insert into tb_category values(2,'Java多線程',1,2);
insert into tb_category values(3,'Spring Boot',1,2);
insert into tb_category values(4,'微服務(wù)實(shí)戰(zhàn)',1,2);
insert into tb_category values(5,'Java視頻',0,1);
insert into tb_category values(6,'Java基礎(chǔ)',5,2);
insert into tb_category values(7,'Java基礎(chǔ)',1,2);
commit;
前端代碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:sec=";
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應(yīng)式布局</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">
<div class="container-fluid">
<!--頁頭-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" th:href="@{'/breadCrumb'}">Java分享</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navbar">
</ul>
</div>
</div>
</nav>
<!--面包屑-->
<ol class="breadcrumb">
</ol>
<div class="list-group" id="submenu-list">
</div>
</div>
<script src=";
<script src=";
<script>
var ctx=$("#ctx").val();
$(function () {
// 獲取一級(jí)菜單
getMenu(null,1);
});
function getMenu(id, level){
var json = {parentId:id,level:level};
$.ajax({
url: ctx+"/myCategory/list",
type: "POST",
contentType: "application/json",
dataType: "json",
data: JSON.stringify(json),
success: function (result) {
var text='';
if (result.success) {
if(result.data != null){
// 一級(jí)菜單
if(level!=null){
$.each(result.data, function (i, r) {
text += '<li><a href="#" οnclick="getMenu('+r.id+')">'+r.categoryName+'</a></li>'
});
$("#navbar").empty();
$("#navbar").append(text);
}
// 子菜單
if(id!=null){
$.each(result.data, function (i, r) {
console.log(i);
text += '<a href="#" class="list-group-item" οnclick="getBreadCrumb('+r.id+')">'+r.categoryName+'</a>'
});
$("#submenu-list").empty();
$("#submenu-list").append(text);
}
}
} else {
alert(result.message);
}
}
});
}
// 生成面包屑導(dǎo)航
function getBreadCrumb(id) {
var param = {id:id};
$.ajax({
url: ctx+"/myCategory/getParentList",
type: "GET",
data: {"id":id},
success: function (result) {
var text='';
if(result.data!=null){
text = '<li><a href="#">首頁</a></li>';
$.each(result.data, function (i, r) {
text += '<li><a href="#">'+r.categoryName+'</a></li>'
});
$(".breadcrumb").empty();
$(".breadcrumb").append(text);
}
}
})
}
</script>
</body>
</html>
藍(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ù)。
隨著公司項(xiàng)目多端化，開發(fā)所需要注意的細(xì)節(jié)越來越多。我在會(huì)議上提出組件化開發(fā)，希望能把業(yè)務(wù)細(xì)節(jié)與技術(shù)細(xì)節(jié)區(qū)分開來。
一、組件化流程
首先我們需要找到切入點(diǎn)，我采取的是通過模仿element-ui的組件，先讓我們美工小姐姐，照著element的組件庫描繪一版我們自己的組件，內(nèi)容包括 顏色、字體、按鈕、圖片 等基礎(chǔ)UI組件。這就是我們組件化第一步，UI 組件形成。
其次是業(yè)務(wù)組件的補(bǔ)充，這方面我和項(xiàng)目經(jīng)理還有其他前端一起商討，將跨場景跨頁面同樣效果的部分給抽象成組件。組件化第二步，業(yè)務(wù)組件形成。
然后就是漫長的更迭與組件補(bǔ)充。
二、組件化細(xì)節(jié)處理
2.1 全局文件布置
無論是UI組件還是業(yè)務(wù)組件，都包含著class與css。
變量值我選擇存放在兩個(gè)公共文件內(nèi)：
一個(gè)負(fù)責(zé)管理class名，諸如 x-btn-s，x-btn-m，x-btn-l，x-pic-s，聲明規(guī)則：公司名-組件名-尺寸（業(yè)務(wù)場景）。
另一個(gè)負(fù)責(zé)管理 css 變量值， 諸如 $-font-s： 12px，$-font-m：16px； $-font-l：24px；$-background-warn: #f00；聲明規(guī)則：$-相關(guān)樣式-大小（顏色）。
再通過 exports 與 import 對全局文件進(jìn)行調(diào)用。
2.2 組件的多樣化使用
通過全局文件的配置，我們對組件的調(diào)用從一對一調(diào)用變成了一對多調(diào)用。如下：
使用全局變量前，我們只能通過以下形式調(diào)用
<x-button/>
現(xiàn)在我們可以通過：class的形式調(diào)用<x-button/>的多種形態(tài)，如下：
<x-button type="$-x-btn-warn' size-'$-x-btn-s'>注冊</x-button>
當(dāng)然，我們還需要在組件內(nèi)部定義好:class部分，配置如下：
<template>
<button
class="x-button"
:class="[
type ? 'x-button--' + type : '',
buttonSize ? 'x-button--' + buttonSize : '',
]"
>
</button>
</template>
<script>
export default {
name: 'XButton',
props: {
type: {
type: String,
default: 'default'
},
size: String,
},
};
</script>
2.3 slot 插槽的配置與使用
合理使用 slot 插槽，例如：組件內(nèi)嵌組件，組件內(nèi)嵌文字，內(nèi)嵌 iconfont 等；
三、 組件的配置
在 app.js 中使用 vue.use(components) 對組件進(jìn)行配置，再在相關(guān)頁面進(jìn)行引用。
藍(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ù)。
“大名鼎鼎的”jQuery因?yàn)槠錁O簡的引用方式而在N年前備受追捧，而今“浪潮”過去，還剩下什么？
我認(rèn)識(shí)jQuery，只是在去年接觸ajax時(shí)了解，從而感興趣，進(jìn)而深入探究（其實(shí)也沒多深入，只是相關(guān)的看了一下）。不得不說，jQuery對ajax支持的四個(gè)type：post（一般用于發(fā)送）、get（一般常用于接收）、put（修改）、delete（刪除） 令我非常震撼，太**實(shí)用了。
這其中，post和get是最常用的（因?yàn)楹孟裾f不是所有的瀏覽器都支持put和delete），具體的我在 這篇文章 中以JS方式提到，這里不再贅述。
load()
load()方法時(shí)jQuery中操作上最為簡單的Ajax方法，能載入其他的HTML代碼并插入到DOM中。其基本格式為：
load(url [,data] [,callback])
1
參數(shù)意義：
url： String類型，請求HTML頁面的URL地址
data（可選）： Object類型，發(fā)送至服務(wù)器的key/value數(shù)據(jù)
callback（可選）： Function，請求完成時(shí)的回調(diào)函數(shù)，無論請求成功或失敗
為什么說它是“特別的”呢？因?yàn)樗挥糜谖臋n流（html）的操作，而且，既可以是get操作，又可以是post操作：
基本示例：
//如果是jsp代碼，這里要加一行：
// <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>請求的文件</title>
</head>
<body>
<div class="comment">
<h6>張三：</h6>
<p class="para">沙發(fā)</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板</p>
</div>
</body>
</html>
//如果是jsp代碼，這里要加一行：
//<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>發(fā)送ajax的文件</title>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
//如果是jsp代碼，上面這一行要換成：<script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.jsp");
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取">
<div class="comment">已有評(píng)論：</div>
<div id="resText"></div>
</body>
</html>
上面是“載入文檔”，它還可以“篩選載入的文檔”：
如果只需要加載某頁面內(nèi)的某些元素，那么可以使用load()方法的URL參數(shù)來達(dá)到目的。通過為 URL參數(shù) 指定選擇符，就可以很方便地從加載過來的HTML文檔里篩選出所需要的內(nèi)容。
load()方法的URL參數(shù)的語法結(jié)構(gòu)為：“url selector”。注意，URL和選擇器之間有一個(gè)空格：
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.html .para");
});
});
傳遞方式：
load()方法的傳遞方式根據(jù) 參數(shù)data 來自動(dòng)指定。如果沒有參數(shù)傳遞，則采用GET方式傳遞；反之，則會(huì)自動(dòng)轉(zhuǎn)換為POST方式：
//無參數(shù)傳遞，GET方式
$("#resText").load("test.html .para", function(){
//....
});
//有參數(shù)傳遞，POST方式
$("#resText").load("test.html .para",{name:"tom", age:"18}, function(){
//....
});
回調(diào)函數(shù)：
對于必須在加載完成后才能繼續(xù)的操作，load()方法提供了 回調(diào)函數(shù) ，該函數(shù) 有3個(gè)參數(shù) ，分別代表請求返回的內(nèi)容、請求狀態(tài)和XMLHttpRequest對象 ，jQuery代碼如下：
$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){
//responseText：請求返回的內(nèi)容——等同于js-ajax時(shí)的“得到服務(wù)器響應(yīng)的文本格式的內(nèi)容”（注意：js操作中的get、post...都在open()中規(guī)定）
//textStatus：請求狀態(tài)：success、error、notmodified、timeout4種
//XMLHttpRequest：XMLHttpRequest對象——這玩意一般用在判斷瀏覽器適用類型上
});
//注意：在load()方法中，無論Ajax請求是否成功，只要請求完成（complete）后，回調(diào)函數(shù)就被觸發(fā)。
藍(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn