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