如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

方法1：提高產品的界面轉化和活動效果

AARRR 模型對應著用戶生命周期的 5 個階段，檢驗產品能否有效增長。

案例1: 興趣選擇頁優化

設計助力增長的一個有效途徑: 提高界面的轉化效率。

• A. 提出問題：
  激活階段用戶流失較高，為什么用戶在這個界面流失？
• B. 背景說明:
  新用戶在首次打開 App 時需要選擇閱讀興趣，這樣系統能夠根據用戶興趣推薦一批內置書，從而提升書籍的閱讀和付費轉化。早期頁面用戶只需要選擇男頻、女頻分類。后來增加了原創小說和出版書選項。
• C. 受眾分析：
  基于前期用戶角色畫像分析，進入這一界面的用戶是新用戶，存在一定比例的”小白用戶“。這類用戶對于這類產品熟悉程度不高，對于復雜界面的感知程度較弱。
• D. 體驗分析：
  1）文案不夠精煉、直接
  2）用戶不清楚如何操作（需要操作三步，中間過程狀態復雜）
  3）與用戶預期不相符（用戶希望看到豐富的書籍，但打開之后看到的是男女的性別選項）
• E. 設計優化：
  
  基于體驗問題，進行了多步迭代，最終在權衡用戶場景和結果選擇了最為合適的版本（彈窗形式）。

1.2 案例：運營活動的設計

設計助力: 設計簡單有效的運營活動，快速提升特定的數據指標。

運營活動設計目標：簡單、有效

1. 明確活動目標，一切從活動目標出發: 促活、拉新、充值、消費
2. 第一時間抓住用戶的注意力:
   參與策劃過程，一起腦暴吸引用戶的利益點
   設計中清晰展示活動的利益點
3. 連貫流暢的行動指引，提高界面行動轉化
   盡可能簡單，讓用戶一看就懂
   小技巧：讓不了解的人(同事)體驗，解決他們在使用中的困惑

方法2： 為目標用戶提供更多的核心價值

提升價值比提高轉化更難，需要滿足用戶的功能需求、體驗需求、內容需求、關系需求。

2.1 用研和設計敏捷配合

2.2 案例: 閱讀書城改版 (用研內容見下半場分享筆記)

• A. 改版目標：
  提高書城推薦頁的整體CTR（點擊率）
• B. 需求分析：
  設計可以直接解決的問題：內容不夠豐富，缺少吸引力；空間利用率低，排版松散
  設計無法直接解決的問題：推薦內容（用戶想看到什么內容、哪些內容該重點推薦或弱化甚至舍棄）；推薦形式（用戶更容易接受哪種形式）；是否還有優化空間
• C. 設計優化：
  為了快速解決需求中發現的問題，設計和用研采用了新的合作方式，通過多輪用研設計的迭代，聚焦設計目標，實現改版目標。
  階段一: 分析書城首頁的點擊數據
  > 用研輸出: 點擊熱圖分布，將用戶操作行為數據可視化
  a. 點擊分布熱圖結果：1）各模塊的性價比一目了然；2）位置是影響點擊的首要因素；3）數據集中現象: 超過一半點擊集中在 Tag 區，將近90%點擊集中在前兩屏；
  b. 用戶體驗和商業目標契合度分析：1）Tag、本期最火、免費專區點擊率最高；2）免費入口點擊占 Tag 區的50%以上；
  c. 存在問題挖掘：1）免費內容侵占了其他內容的點擊轉化: 免費內容商業價值低，對于產品不利；2）樓層區域的整體點擊偏低；
  d. 輸出初期設計方案。
  階段二：針對找書場景進行深入訪談
  > 用研輸出：用戶體驗地圖
  a. 梳理用戶找書關鍵流程：有目的找書操作路徑；無目的找書操作路徑；
  b. 存在問題挖掘：分類復雜；在樓層中可找到的書目不多；缺少相關內容推薦；
  c. 輸出優化方案。
  階段三：對發現、分類、搜索的擴展研究
  > 基于前期探索中的設計疑點，通過用研結果進行新的迭代優化。
  
• D. 改版效果驗證
  
  

小結

通過設計賦能產品增長有兩種方法:

1. 提高產品的界面轉化和活動效果:
   1）通過設計手段提高界面的轉化效率，平衡當前場景和后續影響 (如：興趣選擇頁優化，提高新用戶激活)。
   2）設計簡單有效的運營活動：明確活動目標、快速吸引用戶注意力、流暢的行為轉化。
2. 為目標用戶提供更多的核心價值：
   1）提高價值比提高轉化更難，需要滿足用戶的功能需求、體驗需求、內容需求、關系需求。
   2）最大的難點在于精準找到用戶需求，這時候用研的同學介入就會帶來很大的幫助，通過用研和設計的敏捷合作地實現設計目標。藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

閱讀后使我腦海中一個一直以來都若隱若現的想法逐漸露出一角，從那開始我漸漸關注用戶、時間、掌控力、注意力這一組詞語所組成的一個模糊的概念，這個概念的核心就是產品如何侵擾用戶，過度商業化然后導致用戶的信息超載情況。 

這個觀點一開始還是很模糊，我并沒有獲得足夠的信息支持我闡述清楚這個主題，直到后面，我看到NNG（尼爾森諾曼集團官網）的一篇關于”注意力經濟“的文章，終于把這一系列元素組織好，產出了今天這篇文章。（本來以為理清這一個主題要很久）

首先我要提出一個詞語，"wicked problems”。在我學習國外的設計思維課程時，在前面幾個章節中有提到一個“wicked problems”即棘手的問題這樣一個概念，也可以翻譯為抗解問題。指的是極為復雜，嚴重，上升到社會層面及人類層面的問題。如環境污染，農民工問題，教育問題等。而設計思維被發明出來一個重要目的或者說任務就是用于解決一些這樣的問題，用系統思維和創新性的視角來挖掘潛藏的核心問題，以及探索對應的最佳解決方案。 

我提到這一點不是要對比國內國外環境，也不是要贊美國外的設計氛圍，而是想提醒大家，我們設計師可以做更多，可以想得更多，可以用設計思維，結合理性和創意去解決很多問題。我一直以來翻譯一些國外的系統理論，設計方法論，也是想用自己的力量讓大家了解更多設計的可能，除了眼前的屏幕，我們的視野應該放的更長更遠，去思考我們解決的問題，以及我們所設計的方案可能會衍生的一系列問題。

我接下來要講的，就是在當下環境下一個很關鍵的問題，用戶注意力。 

一：用戶的注意力

注意力成為人類的限制因素

大家回憶一下，每天清晨，都有哪些內容吸引你的注意力？了解時間、看一下微信未讀消息、早報新聞等等等等。到了公司食堂，你看一下周圍有多少人一邊吃東西一遍盯著手機屏幕？在去工位的路上，又有多少人低頭玩著手機走路？這還沒完，到了工位上，打開電腦，接收郵件，查看工作事項；打開網站閱讀一些學習內容；微信突然跳出來一個紅點，打開網易云音樂挑選一首歌，選著選著看到群聊里一條新鮮軼事，然后騰訊新聞彈出來，忍不住又去點開閱讀下。

沒錯，這是我的日常生活，我是一個選擇恐懼癥患者，但我卻總是忍不住把自己置于一個同時處理超多個事項的情況下。讀這篇文章的你也應該一樣。我曾經很多次想，這種情況應該怪我自己嗎？還是別的什么問題？

OK，這確實并不單純是人的問題，還有產品、服務的問題。注意力是當下時代最為寶貴的資源，而產品一直在爭搶的所謂的時間，也只是注意力的一部分而已。在信息大爆炸甚至工業革命之前，人類的大部分歷史中，知識、信息都是很寶貴的資源，只有很少部分人能夠閱讀，能夠獲取一定的信息。但在信息大爆炸的今天，我們可以輕易獲得大部分我們想了解的或不想了解的信息，只需要動動手指，只需要睜開眼睛。 

我們獲得了巨量的信息，但我們的信息處理能力并沒有產生什么變化，是的我們現在處理信息的總量，和幾百年前的人類祖先并沒有什么區別。因此，幾百年后的今天，信息資源已經不是限制因素了，注意力才是，用有限的注意力，去獲取無限的信息，結果顯而易見。你在瀏覽文章的時候是沒有辦法看動漫的，當然你在作圖時也無法瀏覽新聞。 

分心導致低效

到這里，大家應該都清楚，人類的注意力有限，我們無法同時做很多事情，然而很多時候，我們卻在同時進行很多事情，因為一次性完成多個任務，對于我們有著很強的吸引力，然而結果往往是錯誤百出或者是更低的效率。 

在《簡約至上，交互設計四策略》中專門提到了分心對用戶的影響，有時候，分心不是用戶自發的，而是來自產品的錯誤引導。產品界面中過多干擾元素，或者誘導元素導致用戶經常性的轉移注意力，這些東西讓原本簡單的任務變得異常復雜。比如閱讀。

如果你經常在medium閱讀文章，你會發現一類文章讀起來效率很低，且經常容易令你分心乃至焦慮。那就是在文內插入各種鏈接的文章。每一個鏈接仿佛都在勾引你，快來看一下吧，這里有好東西，然后讀者就打開了一個、兩個乃至四五個網頁，因此讀一篇文章附送了五篇文章，那么讀者需要把這些附加內容瀏覽完畢再重新開始閱讀最初的那篇文章嗎？當然有些人會憑借頑強的毅力（或者根本不感興趣）跳過那些鏈接并閱讀完整篇文章，那你很厲害，但是大部分人都做不到，尤其是設計師，因為我們對知識始終保持饑渴。

（寫到這里微信突然彈出來幾條消息，然后youtube推了一個視頻，最后我又想起來長安十二時辰最后一集我并沒有看，再次回來已經是十分鐘后了，這還是我強忍住去看視頻和電視劇的結果）

這些鏈接分明可以放在文章的結尾，感興趣的人自然會去擇優而讀。除了文內鏈接，文章左右兩側的廣告、彈窗以各種形式挑戰你的注意力，瞥一眼你就會浪費幾秒，沒忍住點進去則會浪費更多時間，是的我是誰我在哪我在干什么？我只是想閱讀一篇文章而已，所以為什么現在逛淘寶。

各種設備也在不斷地使我們分心，不僅限于屏幕，還包括聽覺觸覺，如手機的語音提醒、震動。持續的打斷甚至會使人們上癮，可能下一個消息很重要，我必須看一下，于是你又拿起手機解鎖然后打開微信，你看個錘子肯定又是騰訊新聞。不停的打斷會影響我們的正常任務，可能是學習也可能是工作。最終我們可能需要花費更多的時間來完成計劃事項，且完成的質量堪憂。 
PS：打游戲應該很少分心 

在現實中，人類不會這樣互相打斷，如果我們想要請求某人幫忙，會根據對方所處的場景狀態來決定是否打斷對方，也會考慮事件的緊急程度。如果事情很重要比如你的手機在網吧被偷了（重要），而你在玩游戲（沒那么重要），那我們會選擇打斷對方。

而機器的問題在于，它不會以人的方式思考，我們設計師經常提到要以人為中心，但機器本身只會執行指令，企業的指令，因此不管信息是否重要，它會按照設定推送給你。事實上，社交應用及各種產品都應該區分信息的重要程度，而不是各種信息不分主次不分場景一股腦推送出來。

我們都知道福格模型B=MAT，想要促成結果需要對應的需求，更確切的說是場景+時機+需求。當我在公司門口，打開滴滴準備打車時自動彈出了家的地址，我只需要點擊就能填寫完畢而沒必要重復輸入，這是一個很流暢且體驗良好的提醒。

而我這樣一個輕度視頻用戶，偶然打開愛奇藝瞬間收到40多條內容推送，要不是因為開了會員我會當場卸載?。?

分心也是拖延癥的一個罪魁禍首，我們拖延的一個重要原因是注意力被其他事物所吸引，有可能是游戲，有可能是新聞資訊。大部分人都不能按照自己的最初計劃完美及時的去完成?？偸且煌显偻?，可能并不是我們想拖延，而是有太多內容在吸引我們的注意力。凱利教授的《自控力》中就提到所有人想要擁有自控力，都需要知道我想要、我不想和我要做這三部分內容。以便抵制來自生活中的各種吸引力或者說誘惑。

二：注意力經濟的崛起

1997年，Michael H. Goldhaber寫道，“全球經濟正在從物質經濟轉向基于人類注意力的經濟”。許多服務都是免費提供的，而用戶為服務需要花費的貨幣就是注意力。用戶不用付費，只需要支付注意力。

產品爭搶用戶注意力

注意力經濟的最初概念竟然從1997年就被提出，我看到時相當震驚，在二十多年前，企業就開始低效的使用用戶注意力來變現，國內是什么時候開始的呢，答案應該是從爭搶用戶使用時長的競爭策略開始，占領用戶時間就等于占領用戶注意力。 

我們已經沉溺于爭搶注意力策略這個泥沼中，從各種花費巨量時間的游戲如王者榮耀，到風靡至今的各類直播平臺，再到時下流行的短視頻，我們在不停的花費時間、時間、時間，注意力被無意識的“竊取”。用戶不需要花費一分錢也可以正常娛樂，而你的參與，你的注意力的參與卻在幫助企業不斷掙錢。

如果你還不清楚自己是如何被爭搶乃至竊取注意力的話，你可以回憶一下你每天接收到各種推送信息，除了各類應用的Push，還有短信、電話、郵件等等。推送提醒你關注的主播上線了，提醒你的內容新聞，提醒你一切可以誘惑你的信息。購房后銷售人員信誓旦旦說不會泄露業主信息，交房前一年就有各種裝修家居的短信和電話轟炸。淘寶購物沒有一周就各種五星好評的消息請求。這則是另一種層面的竊取用戶注意力了。

如果給你推送的是你想要的內容你是應該開心呢還是擔憂呢。因為你有時也會想，關于你的信息是不是已經被泄露到處都是。當然并不都是惡意泄露，隨著技術進步我們有了大數據技術，但精準推薦雖好，用戶隱私是否也應該劃入考慮范圍？

畸形的注意力變現策略

我們在上面提到了大數據、智能推薦廣告技術的負面影響，即侵犯用戶隱私，隨著用戶對這一技術的感知越發明顯，抱怨聲會接踵而來，企業不得不考慮傾聽用戶的聲音，將保護用戶隱私納入考慮范圍，當然這應當是個可選項，那些有意識想要擺脫這種隱私暴露問題的用戶，可以選擇關閉這項技術在它個人生活中的應用，而并不介意隱私問題的用戶可以繼續享受智能推薦帶來的便利。

我們雖然一再強調它導致的隱私問題，但事實上智能推薦利用現代技術實現了精準投放廣告這一的廣告變現形式，相比其余的商業模式要委婉的多。

廣告的本意即廣而告之，其目的在于將產品推薦給有需要的用戶，廣告本身是沒有任何貶義的詞匯，但在信息爆炸的當下，廣告對于用戶甚至對于廣告投放者本身都變成了一個帶有貶義的詞，產生這種意識變化的原因就是當下廣告的性質產生了畸變，廣告已經不是一個雙贏的推薦行為，而是一個過于干擾用戶的打擾行為。

更多情況下，廣告投放者傾向于用巨量的投放數量來換取一定比率的轉化，這是一種傳統低效的廣告變現手段，當然平臺獲得實實在在的收益，建立在展示付費模式下的廣告不用考慮最終轉化率，只需要無腦投放，這導致了廣告信息的總量產生了巨幅的提升。除此之外，更多廣告是建立在吸引注意力這一誘導行為上，更鮮艷的顏色，夸張的動效，讓人血脈噴張的文案，H內容擦邊球，不論用戶當前在執行什么任務，只要他不是瞎子都會或多或少被轉移注意力乃至引導到廣告詳情頁面。

除此之外，我們還會利用設計思維，預測用戶行為，根據用戶習慣主動將干擾性內容放置在用戶的核心路徑，從而產生一些誤操作的假象，比如將關閉按鈕做的微小，比如將banner無限接近按鈕從而引發誤操作。結果就是用戶的任務中斷，不得不重復的返回修正操作，這樣持續性的犯錯使用戶困擾且失落，卻不知道這是設計人員的策略。吸引用戶注意力的變現策略大多建立在犧牲用戶體驗的基礎上，我們都能意識到這不是一種可持續發展的收益模式，它容易侵害用戶價值，培養低質量用戶，且會衍生一系列其他問題。

目前這種盜竊用戶注意力的變現性質主要有以下幾個方式。

1.引人注目的動畫吸引注意力 
2.擁擠不堪的界面設計，一次性顯示大量信息，期望一定比率的內容可以吸引一定數3量的用戶 
3.強迫用戶聚焦的廣告行為，如不可關閉的視頻 
4.網站或應用頻繁發送服務通知和廣告通知期望用戶重新參與進產品

三：注意力爭奪的負面結果

低效的廣告效率

還是那個簡單的邏輯，用戶的注意力有限，同時各種產品和服務的廣告通知鋪天蓋地而來，且數量不斷增加，不僅引用戶反感，更造成廣告傳達效率低下的現狀，無論是PC還是移動端，人口紅利已經消耗殆盡，用戶自身更是形成抗拒廣告的習慣，這種情況下，繼續延續傳統的粗放型廣告投放收益只會持續下降，不同的廣告商盲目的放量，最終造成的結果是用戶全部忽略。

用戶事實上都比較懶，能不去做任何行動，就會一直保持原狀。例如郵箱訂閱了幾十家內容，每天都會收到數十封推廣郵件，用戶或許并不會因為厭煩而點開每封郵件逐一退訂，但他會直接忽略所有內容，不論如何，造成的結果就是廣告低效乃至無效。與之相反，我們看一個正面例子，Youtube的廣告模式。Youtube提供一個五秒的試看期限，超過五秒后用戶可以選擇繼續看廣告或者直接跳過去瀏覽心儀的內容。若是用戶對廣告感興趣，那他可以接受廣告并轉化為對應的消費者，廣告投放者和消費者是一個雙贏的狀態，這樣不僅考慮了企業利益，更考慮了用戶價值，尊重用戶的選擇，使內容可控。

再來看國內的視頻平臺，體貼的為大家提供了一個關閉聲音的按鈕，我不否認這也是一個提升體驗的地方，因為大部分用戶都對長達一分鐘的廣告并不感冒，因此經常性的操作是關閉聲音，然后在這一分鐘去做一些其他的事情。這種情況下，廣告的作用并沒有發揮，而廣告投放者仍然要為之付出對應的費用，因為廣告確實被展示了，只是用戶沒有看。從用戶的視角，則是我對這則廣告（對應的商品）并不感興趣，但我不得不為之浪費一分鐘。

當然這就是國內產品的現狀，當其他人都在使用粗放的競爭手段，你就很難與其劃分界限。且企業往往會考慮到品牌曝光等策略，考慮長遠投入而不是眼下的轉化，那就是另一種情況了。

廣告盲現象

廣告盲現象是由廣告現狀培養出來的用戶習慣，指的是人們會自動忽略一些常用的廣告投放位置的內容，自動忽略看起來像是廣告的內容。這種現象很廣泛和常見，比如百度搜索頂部的前幾條，帶有廣告標簽的搜索結果，用戶一般并不會去點擊，而是選擇下拉瀏覽其他選項，另外在PC兩側的信息往往容易被忽略，因為這里也是廣告經常投放的位置。

若手機同時出現三行以上的推送，用戶往往不會仔細閱讀而是直接清空。甚至連最吸引注意力的彈窗廣告也能第一時間被識別并關掉，在彈窗還未加載完畢前。 
廣告通常為了爭搶用戶注意力而被刻意做的不一樣，但用戶忍耐力比想象中更好，這個情況可以參考適應性偏見原則，且用戶主動屏蔽信息也越來越成為習慣性行為，尤其是那些看起來花哨、內容豐富理應很吸引人的banner，正因如此吸引人，用戶能快速分辨并將其定義為廣告然后自動忽略，例如我們在線閱讀小說是中間插入的banner，往往只會短暫打斷我們的閱讀進程。 
與medium的閱讀體驗不同，medium的文內鏈接更多的是吸引力，用戶能意識到這些鏈接是更具吸引力的內容，且是正向的有益的（往往屬于知識性質的優質內容），而我們在線閱讀小說中插入的廣告則會使用戶形成誤解——推銷類廣告，沒有任何意義。因此用戶會立即忽略。我們都了解一個詞即耐受性，事實上用戶往往比他自己了解的更加能夠忍受一些東西。雖然從商業角度考慮，各種產品服務都在爭搶用戶注意力，從而不斷的打斷用戶的工作、思考、學習，但人們已經逐漸掌握了一定竅門，來主動屏蔽一些無益的廣告內容，乃至形成廣告盲的行為習慣。 
針對這種情況了，設計人員和廣告投放者應該怎么辦呢？你可以選擇加大投放數量，這種做法必然會很快見效，但不是長遠之計，更佳的方案是考慮用戶場景、習慣，通過洞察用戶來提高廣告投放的效率質量，智能推薦是一種做法，針對自家產品制定個性化方案也是一種方法，創意推動廣告自傳播也是一種手法，總之，傳統買量放量的投放方式應該重新被考慮，如何雙贏來回歸用戶價值是每個企業應該認真考慮的問題。 
我把企業圍繞注意力經濟不斷爭搶用戶注意力的現象定義為一場戰爭，企業與企業，企業與用戶都被編織在這張羅網中。在這場戰爭中用戶是一個什么狀態，我的回答是被掌控、被投入以及被摧毀。

四：被控制的用戶

產品掌控用戶而不是用戶掌控產品

這個時代，人仿佛是手機的奴隸。新技術的發展往往會給一批人帶來恐懼，因為它即意味著更高的效率，更方便的生活，也意味著過去的消逝甚至迷失。從工業化在到信息化，變化一直在發生，我們迎接新生事物的同時也迎接來一批同樣數量的問題。

我們實際上并沒有被手機掌控，而是被手機里的一系列產品所掌控。當然，你不會被微信閱讀這樣的產品掌控，大部分人都不會閱讀成癮。但與之對應的，社交成癮、游戲成癮、八卦成癮等現象卻屢見不鮮。我們生活在大文娛時代，來自各方面的欲望、誘惑在不斷地吸引注意力，不斷的打斷正常的任務目標。我們內心深處想要學習練習，想要更好的成績，想要更好的工作，但這些從社會價值和個人價值角度更加正向的目標卻往往被各種娛樂向產品打斷，且往往過度沉溺，因為很少有產品會提醒你已經花了多少時間，他們只想占領你所有的注意力，然后把注意力貨幣轉化為自己的收益。

“慣性”導致的持續投入 
關于用戶持續投入進一個產品，而忽略時間、精力的現象，在當下已經是常態。我們都知道沉沒成本和雞蛋理論。但我認為這兩個概念還不夠，因此我引入了一個慣性的概念，同滾雪球效應異曲同工。持續投入產生慣性，最終導致難以逃離，與之對應的用戶行為就是頻繁的卸載又安裝游戲，以及成癮性的過度使用某個產品，好吧說到這大家都能猜到是什么游戲什么產品。事實上我沒有針對性，而是講的一個更普遍的現象。 
慣性投入導致的沉迷產品我們如何定義的，為何強調沉迷現象？因為沉迷造成的結果是用戶時間和精力的消耗，從社會價值考慮過度娛樂而消耗時間是不被認可的行為。設計師經?？紤]體驗層，考慮商業價值，但的確很少考慮到用戶價值，及與之對應的社會價值的實現。這里面一個重要因素就是時間，我之前分享的《用戶體驗設計基礎》中提到的一套交互設計理論中，就把時間納入考慮范圍，事實上這是貫穿用戶使用流程中的一個關鍵因素，但我們的確很少考慮到，不僅僅是完成任務的時間，更有使用產品的總時長，及會衍生的一系列問題。 
我們也曾體驗過一些尊重用戶時間的產品，如閱讀超過2個小時會提醒用戶進行休息，同時在沉浸式體驗的界面設計中仍然保留時間的展示。 
所以現在，體驗已經不僅限于交互、任務完成率、可用性易用性這些基礎內容，體驗還涉及到用戶價值，尊重用戶，你更可能會獲得用戶的尊重。 
越來越多的自控力挑戰
自控力挑戰來自兩方面，一方面是用戶自身，即用戶自我控制能力，另一方面則來源于挑戰，即海量的信息對注意力的爭搶乃至盜竊。當然這些挑戰不局限于好壞某個方面。因為我們既可能被游戲等娛樂項目吸引，也有可能被學習內容吸引，更有可能被同時完成多個任務的期望所吸引。 
個人的自我控制能力是天生的，但可以通過后期鍛煉來進一步提升。問題在于生活中的誘惑，吸引力的來源變多了，用戶沉迷于各種產品真的應當歸咎于用戶自身嗎？這個問題就像是美國核事故操作失誤應該完全歸咎于操作人員一樣可笑，畢竟控制開關的設計本身存在更多問題。外在信息的干擾的確在成倍的增加，網絡小說、游戲、短視頻不斷增加的自控力挑戰都是罪魁禍首。你期望七八歲的小孩子能有多強大的自控力呢？同理，青年群體就應該有很強大的自控力嗎？（成年人很多都沒有如此強大的自控力可以面對社會上的各種吸引力）。 
我們還經常陷入低效學習怪圈，以一個過于分心的狀態去學習知識。比如同時收藏了UX體驗書籍課程、插畫設計課程、動效設計、C4D等等在學習UX時忍不住想到插畫，學習插畫時又想到C4D，無法掌握自控力的結果就是分心產生同時完成多個任務的欲望，最終結果就是注意分散導致的低效率學習，投入與產出完全不成正比。

五：設計師如何參與到這場戰爭

事實上我們已經參與到了這場戰爭中，當作為設計支持人員為商業目標而進行設計時，我們已經在爭搶用戶注意力。雖然存在用戶注意力被過度經濟化的問題，但這是行業現狀，也不是個人能夠解決的，它已經上升到wicked problem的層面。那么作為企業一份子的我們必然需要了解如何爭搶用戶注意力，這和企業盈利掛鉤。這也是目前大部分設計師都正在做的事情。另一方面我們應該利用設計思維探索其他可能，即“戒癮”的可能性。兼顧商業價值和體驗，最終在保證收益的情況下避免過度爭搶用戶注意力。

打造上癮產品
提到打造成癮的產品，最為人熟知的就是上癮模型，觸發——行動——多變的酬勞——投入。不同于工具類產品，成癮產品大部分發生在killtime的產品類型中。如游戲、短視頻、直播、新社交產品等。上癮模式最早來源于游戲設計，后來逐漸被應用于其他產品設計中。簡單來說，設計師需要了解幾個核心元素，動機、行為、觸點，洞察用戶需求與動機，創造對應的觸發器，然后使用戶按照預期的方案進行交互，最終將商業目標轉化為用戶行為。常見的用法如游戲中的排行榜，利用攀比心理引導用戶付費。再如積分商城，利用持續的投入減少用戶流失的比例，從而創造更多變現機會。

打造上癮產品關鍵點在于對用戶心理的把握，這需要一定的敏感度，以及對應的心理學知識如沉沒成本、金發姑娘效應等。同時也需要對應的方法來幫助梳理可能的痛點機會點。較常用的是用戶體驗地圖，我們通常用它來發掘體驗向的問題，但事實上作為梳理用戶體驗流程和對應情緒節點的方法可以適用很多場景，比如上癮點的挖掘。

關于用戶體驗地圖（也叫用戶旅程圖）可以查閱梓暄的這篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。 
我接下來提供另一個方法用來梳理用戶與各種設計元素的關系。這是一種幫助我們系統思考的方法，具體分為五個步驟。

1.將信息分解為節點（信息塊 如對象、概念）和鏈接（節點之間的鏈接和關系）

2.可視化信息（草繪或將它們擺在現實中，黑板上桌子上等等）
幫助了理解信息及關系。

3.與他人協作，包括利益相關者。分享你的思維模式可以幫助其他人在你的想法上繼續思考，反之亦然。創建物理圖和分組注釋以生成不同的系統模型，允許團隊綜合多個觀點。

4.快速發布解決方案以持續收集反饋，反饋有助于解決我們沒有找到正確答案的問題，收集的反饋越多，下一步中有效指導信息就越多。

5.迭代，每次迭代都能利用反饋來解決一些新的問題，從而最終解決整個棘手的問題。 

能打造出一款真正讓用戶上癮的產品固然很重要，但像我強調過好多遍的那樣，我們應當考慮用戶價值，考慮衍生問題。如果一定要爭搶用戶注意力，也請遵循一個總的設計原則，即下面要提到的總的設計價值，由Cyd Harrell提出，且Cyd Harrell一直致力于此。

總的設計價值

我們所服務的互聯網企業不斷爭搶用戶注意力，都期望用戶停留更多時間為企業創造更多價值，但卻忽略了尊重用戶的時間、尊嚴、和能力?！狢yd Harrell 
這是我很贊同的一個總的設計原則，即尊重用戶的時間尊嚴和能力。如果問你，有沒有一個全世界通用的大家都認可的設計價值？ 我想那就是尊重用戶。 
很多時候，我們設計師都無意識的參與到了爭搶用戶注意力的戰爭中，從近些年的設計主題由視覺到體驗再到商業，我們可以看出其實設計師仍然處于純粹的為企業服務的狀態，互聯網設計圍繞著企業機器運轉，忽略用戶價值，忽略用戶注意力承載度，最終導致了廣告盲及各種成癮現象。從社會價值角度講，用戶應該把更多時間投入到工作學習與生活中，而不是在無意義的各種推廣和獵奇信息中沉溺迷失。 
借用Cyd Harrell的話，如果不能夠讓一些企業采取這樣的價值觀，并將它們運用在產品中，僅在我們設計領域傳播這種價值觀是沒有任何意義的。但相信有很多體驗設計領域的設計師都在努力幫助企業做出正確的選擇，去尊重用戶價值。很高興的是從王者榮耀的防沉迷策略，到抖音的青年保護計劃，我們能看到一些企業對于這些產品衍生問題進行方案探索。 

無論是沉迷問題，還是低效率問題都是以用戶注意力為核心的一個wicked problem，它沒有清晰的解決方案，且會持續很久，我們無法知道哪種解決方案是最終方案，只有更好的方案和差一些的方案，這也是wicked problem的 一大特性。讀到這文章也要結束了，我無法提供一個注意力問題的解決方案，因為它涵蓋的領域，相關的利益者實在太龐雜，不是簡單的處理某個節點的問題就能夠解決的。寫這篇文章的目的更多的是讓大家了解到我們目前介入及面臨的一個現實存在的問題——注意力問題。同時希望大家能開始意識到尊重用戶這一設計原則的重要性，尊重用戶，尊重用戶的時間和尊嚴，這句話對我感觸很大，希望也能觸發你對于設計的另一種認識.

最后，我們可能不知道答案是什么，但我們知道我們必須不停的探索。 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

所以，那些說有靈感才創作、沒靈感就去游山玩水的大師，他們通常指的是大創意，而且他們肯定有比較多的創作時間。而對于日常的設計、創意工作，我們絕不能靠靈感出創意，靠什么呢？當然是靠方法。蔥爺特意幫大家總結了 21 種商業廣告設計想創意的方法，希望可以幫你們提高想創意的效率。

比喻

比喻在廣告設計中一般的用法是，把產品或者能代表產品的元素比喻成具有某項功能的事物，這一手法成立的條件是兩個元素在外形上要有一定的相似性。

△ 把產品（雞塊）比喻成代表熱辣的火焰

△ 把布匹比喻成紅酒

借代

借用某元素替代另一元素，或者借局部替代整體。

△ 用涂了口紅的嘴唇代替女人

△ 用一只綠色的手代表綠巨人

擬人

即把產品或能代表產品的元素擬人化，擬人手法通常還具備幽默效果，其表現形式主要為以下兩種。

1. 外表擬人

即給事物添加人的特征，如五官或動作。

2. 文案擬人

這一做法并不需要改變事物的外表，而是在文案上賦予人的特征，比如用形容人的話語形容某事物，或者讓它說話等等。

雙重曝光

即模擬攝影中的雙重曝光效果，最常見的用法是在人或物的基礎上疊加與其相關的場景，具有一定的藝術效果和視覺沖力。

△ 通過雙重曝光的手法把大象與汽車巧妙結合起來。

發散

即把產品置于中央，往四周發散與其相關的元素，用來表現具有的功能，或包含的服務。

把與產品或主題相關的元素放在一個平臺上

這種做法可以使視覺主體更集中，同時能增強畫面的形式感和視覺沖擊力。

把產品或與產品相關的事物做成平臺

比如手機、銀行卡、書本、手掌等都很適合做成擺放元素的平臺，可以用于表達該元素上具有什么產品或服務等等。

把主題轉化成一個畫面感很強的概念

比如可以把包含了寬帶、手機流量的全家共享套餐，包裝成一個全家桶的概念。

再比如我們可以把一些主題活動包裝成 XX 星球，代表一個新的世界。

△ 《奇葩說》的奇葩星球

異質同構

即用兩個或兩個以上結構相近，但質地不同的元素組合成一個新的整體，這種效果既統一又有對比。

用與產品或品牌相關的元素組成某個關鍵字

用產品及相關元素組成某一符號

同樣，這個符號必須是跟主題相關的，而且該符號不宜太復雜。

置換

把正常事物或場景中的某個元素替換成其他元素，用來說明該元素也具有原事物的效果或特征。

△ 用快遞員置換炮彈，來說明送貨快的特點。

△ 用飲料包裝置換樹枝上的水果，以說明該飲料原汁原味。

把大場景從整體中抽離出來

比如說海洋、草地、房間，這些元素的邊界感不明顯，現實中不會以一個獨立的狀態出現，但我們可以給它制作一個邊界，使其從整體中獨立出來。

把符號場景化

比如把 Logo 圖形，或者是能代表產品功能、傳播主題的圖形符號，打造成一個由相關元素組成的場景。

引用經典

西游、三國等典故，超級瑪麗、俄羅斯方塊等游戲經常被引用到廣告創意中，可以有效增加消費者對廣告的注意力。

把文字或符號當成實物融入場景

如果廣告的核心訴求是某個數字，或者是符號，那么也可以把它當成核心元素融入到場景中，然后圍繞它來添加相關元素。

夸張

如把功效夸大、把事物的大小比例夸大等等，或者改變事物原本的比例。

把能代表產品的元素與主題結合

這是很直接的一種廣告設計形式，把常規的圖加文結合為一個整體，可以增加圖文的關聯度，降低傳播成本。

正負圖形

正負圖形除了在 Logo 設計中很常見之外，也是海報設計和廣告設計的常用形式，正負圖形一般比較簡潔、創意巧妙，具有很強的視覺沖擊力。

△ 可口可樂的海報很喜歡用這種手法

把產品場景化

在產品中添加場景，將其功能或特點視覺化。

混合

為了滿足需求，很多廣告設計中都融合了兩種或者兩種以上的創意手法。

△ 上圖為置換加比喻

△ 上圖為符號場景化和把文字融入場景

△ 上圖為夸張加元素抽離

凡事都有方法和技巧，即使是藝術和創意這種看似不可控的事物。方法和技巧雖然不能保證帶給你一個 big idea，但他能為你提供清晰的思路、提高你的效率，并能將你的創意水準維持在一條基線之上，希望這篇文章能夠對你有所幫助。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

切割文字筆畫

在文字排版中，想要提升標題文字的吸引力，就要與其他非標題性文字形成視覺上的反差、對比，進而讓標題文字在整體排版中更加吸引用戶眼球。這里說的第一個比較實用的處理手法就是切割文字筆畫，即：以標題文字的筆畫為切入點，在不影響其辨識度的前提下，通過一些特殊的處理手法，提升視覺比重。

切割文字筆畫也可以理解為將文字的筆畫分離字體的本身，然后再以文字筆畫為切入點，進行處理，常用的筆畫處理方式：變色、模糊、刪除、陰影，下面我們逐一來看。

1. 分離筆畫 – 變色處理

顧名思義就是有意將分離的字體筆畫進行變色處理，提升標題文字本身字體上的變化強度，從而提升標題對于用戶的吸引力。舉例說明：

上圖中，這兩種標題形式在設計工作中都是可取的，只是對比而言，案例 1 給人的感覺更加平緩，屬于比較常見、中規中矩。而案例 2 則更加新穎，在視覺上變化更強烈（主要體現在文字筆畫與筆畫之間），更加吸引用戶眼球，也起到了提升作品設計感的作用。

2. 分離筆畫 – 模糊處理

同樣的理解方式，就是將分離的字體筆畫進行模糊化處理，目的是通過筆畫與筆畫之間的虛實對比，營造出視覺上的前后關系，從而提升標題文字在整體文案中的視覺注意力。

上圖案例中通過對比我們發現：案例 4 相較于案例 3 更吸引人，原因在于其筆畫之間的虛實結合使得字體本身就形成了一定的反差感，形式上的多變造就了文字更吸引人，同時如果感覺文字筆畫之間的變化強度不夠，可以結合變色+模糊的處理形式，比如：

這樣給人的感覺就更加強烈、也更誘人，但是這種筆畫之間的變化多了，也就意味著掌握的難度提升了，一定要避免過多的效果導致出現凌亂的現象。

3. 分離筆畫 – 陰影處理

可以理解為將文字筆畫分開來看，通過添加陰影的方式，營造視覺上筆畫的前后關系，從而增強其整體的視覺變化，舉例說明：

上圖中，案例 8 就是通過給文字筆畫添加陰影的形式，使得筆畫與筆畫之間在視覺上形成了很明顯的前后遮擋關系，將原本平面的文字變得更立體，也更易于吸引用戶眼球。這種處理手法在平時工作中也很實用，只需要理清楚筆畫的前后邏輯關系，通過畫筆涂抹的方式慢慢調整即可。

4. 分離筆畫 – 刪除處理

刪除筆畫的處理形式相對來說在工作中運用較少，因為一旦處理不恰當，很容易影響字體本身的辨識度，適得其反，舉例說明：

如上圖所示，刪除了一些筆畫，給用戶留下一些想象的空間，也是比較新穎的處理方式，比較適合一些平面海報標題的設計。

這種刪除字體筆畫的處理形式雖然很新穎，但是應用的局限性較大，屬于比較難把控的一種。

注意：將文字筆畫單獨拆分出來進行處理的手法，一定不要過于追求變化強烈，否則很容易導致標題文字非但沒有起到吸引用戶的作用，反而最基本的辨識度都會被破壞，一定要把握好度。

添加輔助元素

在日常工作中，通過給標題文字添加輔助元素，從而突出標題的處理手法是非常實用的，這里所說的輔助元素可以分為很多種，比如：圖形、肌理、光效等等，目的都是借助輔助元素與標題文字的相互結合，讓文案標題的視覺形象更鮮明、更吸引用戶。

添加圖形是屬于比較直觀且應用廣泛的一種處理方式，而這里的圖形一般情況下會和標題文字在屬性上有所反差，這樣有利于最終效果的呈現更加明顯，舉例說明：

如上圖所示，標題文字通過添加下劃線、邊框、形狀等等輔助圖形元素，較常規標題而言，其視覺變化更加強烈，整體豐富度提升了很多。但是這種輔助元素不能添加太多，否則很容易出現亂的現象，要讓這些添加的元素與標題形成相輔相成的關系。

上圖的設計案例，通過對比我們發現，右側案例視覺更豐富，且標題文字添加下劃線后，其在畫面整體的視覺形象更加鮮明、更吸引用戶眼球。

增強文字環境感

現實生活中一個物品如果置身于某一個環境內，它自身就會受到周圍環境的影響，而如果我們假定環境，將標題文字看做物品，那么我們就可以給予標題文字在環境中的光影，比如：投影、倒影、發光、環境色等等，這樣就間接地增強了標題文字的視覺變化，從而起到吸引用戶眼球的作用。

如上圖所示，把文字當做處于環境中的物體，通過投影、倒影、陰影的方式體現其環境，在視覺上有了更深的層次變化，也能起到強調、加深印象的作用。這種營造環境感的處理形式在平時工作中也很實用。

再說下發光的處理手法，這種形式大多用在暗色調的畫面中，將文字看做一個發光體，即受周圍環境的影響又影響著周圍環境，舉例說明：

上圖中雖然說左右兩種表現形式文字都比較清晰、明了，但是就視覺感受而言，右側將文字作為發光體與周圍環境相輔相成、融為一體的處理形式更容易吸引用戶眼球，而且更加新穎、有創意。這種表現形式在一些電商海報中也很常見，比如：

發光的效果給人的感受很舒服，打破了常規的單純平面編排文字的現象，將文字場景化，使其更誘人。

補充

還有一些在平時工作比較實用的，只不過或多或少在之前文章中都有提過，這里以補充說明的形式展開。

1. 標題文字 – 關鍵詞變色

說到關鍵詞變色算是比較常用的一種，就是將原本標題文字中一些關鍵詞進行變色處理，目的是增加標題文字的視覺變化強度。

通過將案例中「免息」一詞變色處理，使得標題在視覺感受上更加明顯、有吸引力，而且給人的感覺也很舒服，這種處理手法是非常實用的，不妨多試試。

2. 標題文字 – 描邊

描邊文字在平時工作中用到的相對少一些，這種處理手法也間接地起到了打破常規的作用，當我們一直按照某一些常規形式工作時，偶爾做一些改變也許會得到意想不到的效果。

3. 標題文字 – 與主體遮擋

文字與主體營造遮擋關系也是在日常工作中很實用的一種，就是將主體與文字相互穿插排放，通過必要位置的陰影進行加深體現。雖然元素并不多，但是最終呈現的視覺效果卻很舒服、有吸引力。

這種主體與標題穿插表現的形式使得兩者更加整體，對于畫面而言，主體和標題都起到了很好的強調作用。

總結

文章中提到了一些比較實用的提升標題文字吸引力的處理手法，但是需要注意不能過于追求效果而忽略了設計的本質，要根據需求選擇恰當的方式，不管何種形式，都要保證文字本身的識別性。文章中提到的并非全部，主要還是為大家提供一個可以參考的方向，要學會舉一反三、大膽嘗試。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

彈窗在設計中運用的非常廣泛，基本上每個應用都會涉及到。恰好這段時間我也在整理公司設計組件這一塊，所以就想總結分享一下。

設計師都會使用彈窗，但對于彈窗背后的分類及運用可能還不是特別了解，在寫這篇文章之前，我查看了很多應用及資料，所以下面會有大量的案例，相信大家看完可以對彈窗的認識更明確，做設計規范的時候也能有自己的想法。

現在的彈窗分為兩種，一種是模態彈窗（重提示），一種是非模態彈窗（輕提示）。

常見的模態彈窗：Dialog/Alert、Actionbar、Popover/Popup

常見的非模態彈窗：Toast/Hud、Tips、Snackbar

一、模態彈窗

Dialog/Alert  對話框

對話框是我們常用的彈窗，安卓開發語言是Dialog，iOS開發語言Alert，它通常出現在頁面的中間，對話框/警示框的類別非常多，對用戶的干擾比較大。前面之所以說模態彈窗是一種重提示，是因為它需要用戶主動觸發選擇才可以繼續當前的操作。

① 信息-選擇確定

特點：這類彈窗通常是一些系統功能的授權、版本更新、消息通知、重要提示等，通常只有1～3個主按鈕，只需要用戶進行簡單的選擇。

下圖舉例分析：

iOS詢問是否刪除APP，就屬于重要提示彈窗，它一般會用在像刪除、確認提交...一些比較重要的功能操作中。

小紅書的這個是否允許使用網絡彈窗，大家一定在許多APP中都見過，這屬于一個系統自帶的授權彈窗。

馬蜂窩與天貓的消息提醒彈窗，一個屬于初次使用APP時，系統自帶的彈窗，一個屬于使用后期APP為了推送消息，主動提示你開啟消息通知。

有錢花和愛奇藝的版本升級彈窗，都屬于偏運營類的彈窗，這一類的彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。

② 信息-輸入勾選

特點：這類彈窗通常是輸入一些比較少的信息或者勾選信息，常用于備注輸入、規格選擇、分組選擇等，通常只有確定和取消兩個按鈕。

下圖舉例分析：

微博對于已關注人的分組及備注，都屬于信息輸入及勾選類彈窗，操作通常都比較簡單。

③ 信息-傳達展示

特點：這類彈窗通常是一些廣告、紅包優惠、節日活動等一些運營類彈窗，主要是吸引用戶點擊及參加活動，這類運營彈窗通常會設計的比較吸引人，造型各異，會突出領取、查看等大按鈕，弱化關閉按鈕。

下圖舉例分析：

拼多多和餓了么這類的紅包優惠彈窗，就不多說了，大家都懂，它們最主要的目的就是吸引用戶點擊，提升購買率。

美團的變黃送好禮彈窗，屬于一次比較大的品牌升級，它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動效設計都非常清晰，視覺感很強。

支付寶的這個猜世界杯贏螞蟻積分的彈窗，屬于活動彈窗，它的整體設計非常貼合主題。

Actionbar操作欄

Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出，它的操作及信息會比對話框類型的彈窗更多更復雜。這種當前頁面的下拉彈窗好處就是，可以讓用戶清楚的感知當前的操作，比跳轉到新頁面更加有安全感。還有一個特殊的抽屜式彈窗也順便說一下。

① Action Views操作視圖

特點：這類視圖彈窗通常占屏比較多，以文字、圖標等形式展示各種功能，也可以說這類的彈窗是一個小型的頁面。它一般從底部彈出，不太強調歸屬，大多出現在購買、支付、分享等場景。

下圖舉例分析：

百度云盤的這個+號擴展彈窗比較特殊，它也可以說是浮層，占滿整個屏幕，它最吸引人的還是它的小動效。

京東購買時的彈窗和支付寶付款時的彈窗，都是比較典型的，在各種電商產品及付款頁面用的非常多。

轉轉這個的鍵盤與輸入為一體的彈窗，設計的非常人性化，讓用戶一次就可以輸入多個價格。大大提高了用戶的操作效率。

網易云音樂的分享彈窗就是典型的以文字與圖標來展示功能的。

微信讀書的底部閱讀設置彈窗，比較特殊，為了使用戶沉浸閱讀，它是比較隱藏的，而且非常輕量化。

② Action Sheets 操作列表

特點：操作列表相對于操作視圖，它更單一。主要是以文字展示功能按鈕，重要敏感的功能操作一般會用主題顏色或紅色顯示，主要運用在一些日?？丶?、功能選擇、刪除、保存等場景。

下圖舉例分析：

Keep的選擇日期，屬于iOS原生控件，非常常見。

淘寶的選擇地址彈窗，整個展示的非常清晰全面，而且用戶每選擇一項，就會有相應的顯示。

支付寶和天貓超市的兩種列表彈窗，就不多說了，簡單的功能選擇都會采用這種。

③ 抽屜式彈窗

特點：這種抽屜式彈窗一般從左右兩邊彈出，經常運用在一些導航擴展和目錄展示中，它能承載比較多的信息，基本上都是用來放一些不太常用的功能。

下圖舉例分析：

微信讀書及一些其他閱讀類產品，由于目錄很長，而且一般是從上到下瀏覽的，所以基本都采用了這種抽屜式彈窗。

小紅書的這個抽屜式彈窗，以圖標和文字的形式展示了一些不是很常用的功能，為我的頁面節約了不少空間。

Popover/Popup 浮層

Popover是ios的開發語言，popup是安卓的開發語言，浮層是指，用戶點擊某個功能后浮出一個臨時氣泡對其作出補充，它通常會伴隨著半透明的遮罩或者投影襯底，用戶需要點擊功能區域操作，或者點擊空白處取消，才能進入下一步操作。它與上面操作欄的最大區別就在于，它更強調歸屬，可以出現在頁面的任何地方，而操作欄一般只出現在底部，不強調歸屬。

① 指向浮層

特點：這類的浮層一般伴隨有小三角指向，強調歸屬。氣泡里面的功能通常以單一的文字或文字與圖標結合的形式來展示，主要運用在頂部加號補充、復制、分享轉發等場景。

下圖舉例分析：

支付寶和美團的頂部加號補充浮層，展示形式是差不多的，只是UI樣式不一樣，一個是白色氣泡黑色半透明遮罩，一個是深灰色氣泡。

微信讀書和微信的選擇文字氣泡，在文字復制中很常見，通常會與其他轉發收藏小功能一起出現。

② 導航篩選浮層

特點：所謂導航篩選，自然是與導航分不開的，再加上浮層是比較強調歸屬的，所以它通常會與導航連在一起，一般出現在頂部。

下圖舉例分析：

美團的導航篩選，因為選項及開關很多，所以它的底部會有兩個主按鈕，一個完成，一個重置。

餓了么的這個只有一個功能選項，所以它一般是直接選擇就收起浮層了。

③ 引導浮層

特點：引導浮層的作用就是引導用戶更好的使用產品及交互，降低用戶的學習成本。它通常會出現在用戶首次進入APP的時候，一般只會出現一次，點擊空白位置或我知道了浮層就會消失。

下圖舉例分析：

QQ音樂與微醫的引導浮層都是用戶首次進入應用時，給出的功能搬家提醒浮層。

二、非模態彈窗

Toast/Hud 提示框

Hud是ios的控件名詞，Toast是安卓的控件名詞，它們都屬于一種輕提示，給予用戶及時反饋，讓用戶知道自己當前所處的狀態。

Hud一般只出現在屏幕的中央，以毛玻璃的樣式表現，內容展示比較富豐富。

Toast可以出現在屏幕任意位置，通常以黑色半透明的小框來表現，內容一般是純文字提示或者文字與圖標結合提示。

① 狀態提示

特點：狀態提示的Toast，它們一般都是反饋用戶當前操作的狀態，只出現1到2秒就會自動消失，場景一般是關注成功、密碼錯誤、音量提示、靜音、清除緩存等。

下圖舉例分析：

移動的屬于操作遇阻提示。

京東的屬于操作成功反饋。

iOS的音量控制屬于毛玻璃Hud。

微信的清除緩存屬于正在操作狀態。

② 按鍵提示

特點：按鍵Toast提示與狀態提示不同，它們一般自動出現或者點擊觸發才會出現，用于對功能點的補充說明，讓用戶對功能有更深的了解。

下圖舉例分析：

螞蟻森林里點擊樹木就會出現相關信息，當然它也會自動出現，點擊其他區域也會自動消失。 

知乎的消息標簽不僅有小紅點提示，還會在上方自動出現數字提示。

Snackbar

Snackbar是Android中的一個控件。它一般會在超時自動關閉或者在屏幕上滑動關閉，它沒有Toast那么輕量，設置出現的時間會比Toast長，而且可以點擊按鈕進行交互。

下圖舉例分析：

UC瀏覽器的Snackbar，是在提示用戶上滑，來查看更多內容，它需要滑動或者超時才能關閉。

京東的Snackbar，是在為用戶推薦商品，提示用戶點擊箭頭來查看喜歡的商品，它比UC瀏覽器多了一個關閉的按鈕。

Tips提示

Tips與Snackbar最主要的區別就是：Tips它是內嵌在頁面上的，而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動觸發關閉按鈕或點擊進入下級頁面才會消失，一般用于需要用戶感知到的通知信息，或者植入廣告。

下圖舉例分析：

百度云盤在下載視頻時，就會出現一個Tips的提示，讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告，但它抓住了用戶的場景及心理，觀看廣告的幾率大大提升。

愛奇藝的Tips提示就屬于重要通知提示了，提示用戶VIP即將到期，續費可優惠，它們都有一個主按鈕及關閉按鈕，需要用戶主動觸發提示才會消失。

規范總結

目前的彈窗樣式非常多，你能想到的，你想不到的基本都可以技術實現。但這同時也帶來一個問題，那就是“不規范”。以上提到的彈窗種類，你只需要選擇符合你產品要求的幾個類型，最好不要在一個產品中運用多個同種類型的彈窗，否則后期會很難規范及組件化，當然運營廣告類彈窗可以另當別論。

差不多就寫完了...大家覺得有幫助的話，記得點在看和轉發～

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

它能幫助你從擁擠不堪的海量信息中脫穎而出，同時也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的，幾乎80%的人都會選擇離開你的網站。

這就是為什么在構建和設計網站時，永遠不要低估用戶滿意度帶來的影響。

接下來要講的是如何設計一個無可挑剔的、以用戶為中心的網站，來使你的網站轉化率飛速上漲。

1. 提供直觀的導航

如果不能引導用戶完成最終購買，那么設計再精美的網站都是毫無意義的。用戶沒有選擇在你這里購買的一個主要原因是復雜的網站導航。記住，用戶不希望無休止的點擊和滑動鼠標后才能找到他們想要的產品。如果他們發現自己正將時間浪費在不必要的操作上，就會棄你而去，到你的競爭對手那里。

這也是你想要阻止發生的事情。

• 創建具有描述性的菜單標簽
  使用“產品”或“解決方案”之類的通用選項，無法給用戶帶來任何價值。除了用戶體驗不佳，這樣的標簽也不利于你網站的SEO（搜索引擎排名優化）。在搜索電商品牌時，沒人會搜“產品”或“我們能做什么”。
• 簡化導航菜單
  菜單項越少，你的潛在客戶就越容易找到他們想要的東西。這也有利于你網站對于搜索引擎排名的優化工作，因為更簡單的菜單，會將你主頁的頁面權威度（Page Authority，該指標由Moz軟件公司開發出，用來預測單個頁面在搜索引擎中排名的打分系統，分數為0-100。單個頁面所獲分數越高，則表示有越高能力在搜索引擎中獲得靠前的排名）賦權給你網站中權威度稍低的頁面。
• 讓用戶在頁面間的跳轉更方便
  添加內鏈，強化行為召喚，最重要的是，確保從你的主頁進入任意子頁面均不超過4次點擊。不管用戶處在哪個頁面，他們都需要知道自己在哪里，菜單欄或搜索欄在哪里，如何回到主頁，以及如何篩選出想要的結果，等等。

2. 設計一個令人驚艷的主頁

人們常說不能以貌取人，但我們卻一直都在這么做。在電商的世界中，你的主頁就是顏值。

研究表明，只需0.05秒，一個用戶就能判斷出你的網站是否能夠滿足他們的需求。而且，如果你不能讓他們相信你的網站是可靠的、安全的或足夠有價值的，他們就會在眨眼之間拋棄你的網站。

那么，一個令人驚艷的主頁包含哪些要素呢?

• 一個可靠的產品價值定義，而非只是一句簡單的口號。
  它可以向用戶表明選擇你而非你的對手的主要原因。它由強有力的標題、子標題、功能列表和視覺要素組成。它傳達了你的品牌優勢，展示了用戶將得到的收獲，且簡潔易懂。
• 展示你的可信度。
  在主頁底部展示用戶評價、合作伙伴、核心產品的特點和優勢，或者一些動向。
• 網站頁腳應是一個可以讓用戶找到所有你最重要網頁頁面的地方。
  請始終保持鏈接到公司信息頁、用戶幫助頁、社交媒體帳戶頁、聯系方式和社交媒體詳細信息，以及核心產品和其余產品種類。
• 讓這一切鏈接通暢無阻。
  不論用戶是想購買產品還是只想了解更多，他們都會想要和你進行直接交流。這也就是為什么你需要加一個聊天機器人、電子郵件地址、點擊呼叫按鈕和社交媒體鏈接，以便于這些潛在客戶找到你。

3. 讓產品詳情頁更易轉化

主頁是用來吸引用戶并與他們建立關系的。但當你想把一位訪客變成付費用戶時，體現產品詳情頁重要價值的時刻就到了。它們需要為用戶深度展示你的產品，激發他們的興趣，并讓他們產生點擊“立即購買”按鈕的欲望。那么，讓我們來一起看看產品詳情頁中最重要的元素都有哪些吧。

• 產品圖片
  有的時候，即便是像“光線不好”這樣的細微因素也會影響人們對你照片的感覺，并導致他們離開你的網站。確保你的圖片和網站的色調很好地融合在一起，并保持合理。你拍攝的產品圖片應增強你的品牌透明度和信任度，因此展示“正在使用中”的產品是個好主意。不管你賣的是衣服還是健身器材，你的用戶都希望可以輕松想象他們使用產品的樣子。
• 產品信息
  告訴用戶關于產品他想知的一切信息，以便幫助他做出明智的決定。例如，如果要賣衣服，請列出具體的尺寸、尺碼、面料等。用簡單易懂的語言來解釋產品的特點，以及它是如何解決用戶問題的。如果產品有不同的尺寸或顏色，應明確說明。
• 個性化的用戶體驗
  這是所有大型電商品牌都會做的事情。他們會觀察用戶的偏好和購買記錄，為他們提供一個流暢的購買旅程。例如，添加“相關產品”或“其他用戶也購買了”這樣的選項，可以幫助用戶更快地找到理想產品，并完成購買。你還應為用戶展示產品瀏覽歷史，方便他們更便捷地加入購物車。
• 關聯銷售
  簡單地說，關聯銷售的意思就是說服用戶從你這里購買更多的商品。一旦用戶購買了某款產品，你的網站就展示與其相關的產品。舉例來說，如果一位用戶購買了無線鼠標，你也可以為其展示鼠標墊或電池產品。

4. 提供常見問題頁面（FAQ）

如果有用戶不確定是否要從你這里購買產品，那他很可能會在深思熟慮前就離開你的網站。你需要向他們證明這是一個錯誤的選擇，而這正是“常見問題“的切入點。

創建一個頁面去回答用戶最常問的問題，會讓用戶感到高興，將他們的購買焦慮降到，也能夠更快引導他們完成購買。這就是為什么，你需要積極地構建FAQ頁面，提供可操作和有用的技巧，甚至通過截圖和圖片的形式來讓答案容易被更多人理解。

一個可靠的FAQ頁面還可以提升SEO（搜索引擎排名優化），特別是在語音搜索SEO和本地化SEO盛行的時代。數據顯示，22%的搜索者會使用語音搜索在網上查找本地企業。因此，綜合考慮電商SEO實踐與本地化SEO服務，對你的電商網站至關重要。

這就是FAQ頁發揮首要作用的地方。也就是說，在不損害用戶體驗的情況下，它使你有機會針對搜索時高頻出現，及具有地區特征的關鍵詞，來優化FAQ頁面的問題和答案。此外，這也有助于提升你的網站在語音搜索中的排名，因為谷歌經常使用FAQ頁面作為語音搜索結果。

5. 讓訂單流程更友好

你已經通過種種努力讓令人驚艷的主頁贏得了用戶的信任，用產品詳情頁頁的優質文案提升了他們對產品的興趣，現在是時候激發他們去完成最后的購買流程了。你千萬不能搞砸了這個關鍵環節，因為購買流程是購物流程閉環的最后一步。

• 不要強迫用戶注冊
  不是所有人都想出現在你的收件人列表中。那么，面對這些希望不注冊就能從你這里購買的用戶時，要怎么做呢？顯然，你應該允許用戶自由選擇是否要跳過這一步。這也是你如何減少用戶放棄后的流失，并激發他們完成購買的一個方法。
• 精簡注冊表單
  如果用戶決定注冊，那么讓他們的體驗盡可能順暢。請去掉所有無關緊要的表單字段，專注于那些對你來說真正重要的信息，例如手機號，電子郵件地址，信用卡信息以及收貨地址。要測試表單在移動終端上填寫的友好性，確保用戶可以很容易地在這些設備上填寫。
• 運費透明
  用戶并不喜歡討人厭的“驚喜”，而運費就是其中一種。這就是為什么你需要在產品頁上突出運費選項，并且告訴用戶產品總價和運費，以及預期送達時間。
• 建立用戶信任
  用戶早已對愈演愈烈的網絡攻擊有所防備。令人不快的購買經歷，以及他們每天看到的關于數據泄露相關的消息，都迫使他們變得小心翼翼。所以，當用戶在你網站下單之前，他們都想檢驗你到底有多值得信任。
  1）首先，你需要從HTTP切換到HTTPS（加密的網絡傳輸協議）。Google用一個綠色掛鎖和“安全”標簽，來標記帶有SSL證書的站點。而只有HTTP的站點會被標記為“不安全”。這也適用于那些擁有復雜的數據加密手段和存儲用戶數據的有效方式但仍未購買SSL證書電商網站。當用戶看到“不安全”的警告時，他們可能會離開你的網站。
  2）在購買頁面上，另一個重要元素就是安全徽章。這展示了你網站的權威性，并且告訴用戶，他們的敏感數據將會被安全地保存在你這里。
  3）最后，寫出一個詳細的隱私政策，并為它提供一個方便用戶找到的鏈接入口。

總結

對于電商而言，用戶體驗至關重要。她會為你積累忠實的老用戶，激勵新訪客轉換為付費用戶，并有助于他們向親朋好友傳播關于你的正面口碑。Jeff Bezos對此有很好的詮釋：

“如果你的確建立了很好的體驗，用戶就會口口相傳?？诒牧α渴菬o比強大的?！?/span>

我希望以上的這些秘訣將可以成為你的堅實基礎，助力你在在電商領域取得成功。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

創意動畫

1. 品牌加載

公眾喜歡有趣，可塑的動畫。Airbnb 和 Netfilx 將品牌 logo 動畫應用到了啟動頁和加載頁面。結合品牌特點、風格和符號，融合到產品設計中，從而提升視覺的一致性，創造富有特有性格的產品界面。

△ Netflix & Airbnb

2. 圖標動畫

微交互是建立在移動端上微妙視覺效果的小動畫，而圖標動畫是微交互其中的一種。它的目的是吸引用戶，讓用戶感覺順暢、愉悅。

最近，讓我印象深刻的一個圖標動畫是 Facebook 的新消息提醒界面，這些由產品所包含的一個個小細節，創造出了新穎而有趣的設計。

△ Facebook Website

留白分隔

在 UI 界面中，最常見的分隔方式是用細線對模塊進行劃分，但隨著設計重心趨向簡約，注重內容本身，傳統的分隔線方式就略顯多余。

根據格式塔親密原則，通過留白控制間距大小，可以清晰地劃分模塊層級，同時界面看起來也更加透氣、富有張力。可以看到 QQ、飛聊、Gmail、Messenger 等應用都采用了留白分隔。

△ Gmail & Messenger

融入插圖

1. 品牌形象插畫

一個好的插畫作品可以為產品帶來極佳的辨識度。Snapchat 的頁面用了很多情感化設計和品牌形象，包括開啟通知引導動畫、查找好友 landing page、下拉刷新頁、照片回憶等等。

從品牌的個性化設計，尋找一種基于插畫的設計語言，把產品塑造成一個高辨識度的 ID。

△ Snapchat

2. 3D插畫

隨著軟件技術的提升，3D 插畫在這幾年中大受歡迎，很多應用都使用 3D 渲染產品，如：星巴克、Keep、毒App 等等，因為它真實立體，有著更高的轉化率。

△ Starbucks by Wojciech

△ Keep & 毒

圓角卡片

圓角代表友好、親和力，而卡片模塊化的布局更為清晰、有效、整潔。

在上周的微信改版《微信 7.0.5 發布：9個細節提升體驗》的文章中，我講到了訂閱號的推送文章去掉了標題欄的背景，卡片變得更加簡潔。另外，公眾號詳情頁由原先的列表式，改成了圓角卡片式，彈窗也由直角改成圓角。

△ Broadcasting & 微信

視頻背景

長期以來，圖像在視覺設計中起著至關重要的作用，而視頻能夠更直觀的吸引用戶，傳達主要的思想。

在移動端中，視頻主要用于登錄頁背景，一般可以是幾秒鐘的循環剪輯視頻，它可以帶來一種身臨其境的體驗感受。

△ Lyft & Nike

輕提示

Toast 是一種輕量級的提示，作為用戶操作后的反饋。UI 形態上從居中浮層，慢慢趨向于底部通欄樣式。這樣設計的好處是不會擋住當前界面的內容。

舉一個反例，iOS 的調整音量提示，大范圍的遮住了界面，特別是對正在玩游戲的用戶非常不友好，直到 iOS 13 這個設計才被修改。

△ Google Earth & Spotify

色彩平鋪

隨著扁平化設計和 Material Design 進一步占據主流趨勢，簡約的界面，明亮，大膽的色彩一直都處于增長趨勢。色彩平鋪已經成為清新、酷炫、數字時代的代名詞。

△ Snapchat & Spotify

注重內容

重內容、輕 UI，把注意力引導在重要內容和功能上。像 Facebook、Instagram 這種以圖片社交為主的 App 都有一個特點，就是文字都是黑白灰，將彩色交給圖片去傳達，讓用戶關注內容即可。

△ Facebook for Android

AR

增強現實的技術，已經出現在很多 Web、App 等領域中。許多平臺開發者也將增強現實技術納入其開發工具里面，可預期到這種類型的 App 將會越來越多。

1. 地圖導視界面

地圖+AR，讓你不再盯著二維平面上那個藍色的點，而是現實世界中的箭頭告訴你在哪個路口轉向。

△ Google Map

2. 表情貼紙

Instagram、Snapchat、Messenger 等平臺可用 AR 濾鏡來創作，表情貼紙可以幫助用戶更直白有效地自我表達、獲取注意力。

△ Spark AR

車載系統界面

隨著 5G、車聯網、人工智能、自動駕駛的發展，車載界面也越來越受重視了。

在今年的 Google I/O 開發者大會上，針對車載系統 Android Auto，推出了新的設計語言，它有著更好的可拓展性。在 UI 上，完全重新設計了導航欄，能夠更輕松地訪問應用、通知，和你的 Google 智能助理，最大限度的幫助駕駛者減少分心，將注意力集中在道路上。

△ Android Auto UI

此外，還開發了新的系統小部件，在使用地圖進行導航時，仍然可以一鍵控制音樂應用，或者正在進行的電話，同時在屏幕上保持地圖的完整視圖。

總結

UI 設計的趨勢除了側重內容和情感之外，還會根據不同設備載體、新的技術（3D、AR）而變化。但歸根結底還是以人為本，借用 Adobe 設計副總裁 Jamie Myrold 的一句話：如今設計師要思考的，絕不僅僅是設計一款 App、網站或設計工具。我們要思考的是人類的需求，用戶的需求，打造真正人性化，多元化與包容性的設計。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

風格特點

從宏觀的角度來講，這種扭曲的手法，它設計出的版面變化方式是非常多的，我們將比較熟悉的文字進行扭曲，是可以呈現出其它的表現形式的。

比如說，最左側這個海報，我們不光能看出來它的文字信息，還具有樓梯的印象；中間的這個海報，它把文字變換成了晾衣繩的感覺；我們再看最右側的這個海報，很明顯它就是一把扇子對吧。

氣質分析

這種表現形式它是比較抽象的，再加上它能夠變異成其它的形狀，所以，這種版面風格也會傳遞出一種趣味感。

原理解析

我們在現實生活當中扭曲的圖像，它屬于一種光學的現象，比方說哈哈鏡，它就是利用了這個原理，表面凹凸不平的鏡面，反映出人像或者是物體的扭曲面貌，進而產生了幽默感。

生活當中的望遠鏡放大鏡顯微鏡，也都是利用了這種凹凸的透鏡原理來實現的。

我們人類還處于原始的時期，就已經開始運用繪畫來記錄身邊的事物，在經過不斷的發展，藝術家它們的繪畫技藝也變得越來越逼真，甚至達到了和照片難辨真假的程度。當寫實的風格幾乎走到的時候，藝術家為了尋找新的藝術發展方向，畫風就開始變得扭曲起來，變得抽象起來，從而產生了超現實的藝術流派。

我們將本來是圓形的西瓜和籃球限定在一個圓角矩形的這種做法，也是一種抽象的思維方式。

技巧分類

在這里我們為大家劃分了五種常用的表現技巧，這些都是我們日常工作當中經常用到的一個扭曲技巧，我們分別介紹給大家。首先第一個就是液化這個工具，液化這個濾鏡應該算是非專業人員都會知道的美顏功能，這個 ps 濾鏡被用在了各種美艷的 app 里，這種夸張的藝術創作在漫畫里面是經常出現的。

我們來通過網格感受一下液化命令到底是出現了哪些變化，液化的好處就是能夠根據實際情況手動調節畫面的扭曲幅度。它的自由度比較高，但是它的缺點也是自由度比較高，所以難度會比較大一些。

在設計的過程當中，也可以運用這個功能來刻畫主體，產生一種遮擋的效果。我們也可以通過扭曲讓文字的部分結構變得不容易認讀，這就能達到設置懸念的作用，我們也可以通過其它不同幅度的扭曲變形，達到自己想要的狀態。我們看上圖是日本TDC 的獲獎作品之一，作者是村上雅士，它運用的就是液化功能，將原本很平淡的版面，通過扭曲的變化，達到了吸引眼球的藝術效果。

這個是臺灣設計師聶永真，他為2017年金點概念設計獎制作的主視覺海報，這個海報它以不規則的曲線呈現，并且搭上充滿想象的文案，有耳目一新的形象。

下面我們來看一下球面化的工具，我們大家都知道，杯子中的水具有扭曲光線的作用，我們插到水里的這個筆它就會產生扭曲的現象，這個就是光的折射。我們在設計當中進行簡單的圖像合成時，也需要遵守這個物理定律。

我們這里通過網格來看一下這種形態的具體表現，顧名思義球面化的命令就是能夠將選區內的畫面進行球面的扭曲。它適合用在圖像合成或者是還原真實性的場景里面，我們通過調整不同的幅度，產生不同的魚眼效果。

除了基本的球面化扭曲，我們這個選擇里還提供了水平和垂直的變化，形成類似圓柱體的表面效果。我們在產品貼圖圖像和形象的領域是經常用到這個東西的，我們調整不同的扭曲幅度，能夠完美的讓圖像貼合到柱狀的弧形表面上。

這里給大家準備了一個案例，我們給它添加一個氣泡，然后再產生一些光影的效果，如果說我想讓這個畫面變得更真實一些，我們在設計的時候就要考慮到物理定律，這個時候就可以用球面化的命令。我們讓圓形下面的文字產生光線折射的感覺，調節選項中的滑塊，找到那個最接近真實的反射效果。

這個案例是我們研習設之前教程里提供的一個案例，我們看圖中這個玻璃球和文字的銜接部分，用的就是球面化的效果。我們只看右側這個對比圖，你可以明顯感覺出來，底部這個經過修改后的細節是更真實的，文字經過玻璃的反射，它一定會產生扭曲的視覺印象。

下一個給大家介紹一下極坐標，極坐標這個詞聽上去會比較陌生一些，但是你會非常熟悉，比如說這個啟動畫面，這個是PS cc版本的啟動插圖，它就是運用極坐標的命令實現的效果。除了能夠實現從內部向外旋轉的這個洞穴效果，還可以表現成類似于球體的效果。

我們繼續通過網格來看一下它的扭曲原理，這里給大家做了一個細節的變化，是為了方便大家觀察它的扭曲方向，我們給這個網格添加了顏色，頂部是藍色，底部是紅色，接下來我們為它執行極坐標的命令。

執行極坐標這個命令后可以很明顯地看出，原來底部的網格內容被扭曲到了圓形的外側，就是紅色部分，變成了這個球的外側，內部這個藍色，就是之前頂部的藍色部分。

它也提供了另一個額外的扭曲選項，扭曲后的效果就是這樣的，這個效果我們不常用。

我們選擇這張圖來作為演示，讓大家明白極坐標是什么原理，我們為它添加極坐標的效果，這個時候需要確定什么？就是圖像的朝向問題，因為這個直接決定了最終的扭曲效果。

頂部的區域會在圓的內部出現，底部的區域會在圓的外部，我們根據想要達到的最終效果，來判斷圖像的具體朝向。這里制作了兩種朝向的扭曲畫面，左邊的是地面在內部的球體效果，右邊是地面在外部類似于洞穴效果。

我們在扭曲命令之后，需要手動將畫面這個銜接部分處理掉。你可以用圖章工具處理掉，這個畫面就做完了。

再舉一個例子，這個畫面我要做的是人物在球體表面的效果，我們要考慮到方向，所以我們要將它旋轉180度，然后添加極坐標命令。

使用修補工具來完成這個銜接部分，這個畫面就完成了。

我們再來看下一個，下一個就是文字扭曲，也是我們這節課比較重要的一個內容。這個命令跟其它命令不同的地方就在于它不是在濾鏡菜單下面，它是在文字編輯欄的右側，在樣式選擇里，它提供了很多不同的扭曲方法。

這種方法相對于液化或者是自由變換更方便一些，因為它的這個可操控性很強，頂部提供了兩種扭曲方向，底部選擇則是調整扭曲的幅度。

這里我們簡單地制作了幾種文字樣式，就是這個命令，它會讓文字變得更接近圖形化。

下一個我們來給大家介紹一下置換的扭曲風格，它的扭曲原理就是將被置換的元素，再加上需要被扭曲的元素，它們二者相結合，從而達到被置換元素一樣的扭曲效果。這個話有點繞，我們通過下面的例子就明白什么是置換了。置換的幅度不同，扭曲的大小也會發生相應的變化。

比方說我們這里被置換的元素可以是任何圖像，煙霧、絲綢、水波紋、液態流體或者是火焰，它們都可以當成被置換的元素。

比如說這里我們想讓鴿子圖案和旗幟結合，這個時候就需要用到置換的扭曲命令。首先第一步要做到的就是確定好鴿子在旗幟里的比例大小，然后要調整透視和傾斜角度來適應旗幟的表面輪廓。

最后執行置換命令，讓鴿子的圖像加入旗幟的扭曲輪廓，這樣就形成了兩者的完美結合了。界面里水平與垂直的比例，都是可以用數值來調整的。

我們再看下一個，不光是圖形，文字也是一樣的，添加置換命令之后，文字就會置入到了這個場景里，它的原理和之前是一模一樣的。

我們再來看一下其它使用置換手法設計出來的版面，它們都是在表現原有信息的基礎之上，通過置換的扭曲為版面，加入了另一種形態。左側的飄動絲綢中間的樓梯和右側的這個有點類似于紙張扭曲的效果，這些都是用置換這個命令來表現出來的。

案例拆解

我們來看一下，同樣都是這個扭曲，用扭曲的這個思維，它設計出來的畫面應該是什么樣的。這個版面里文字信息使用的就是扭曲的變換形式，主體文字周圍圍繞著不規則的扭曲文字，增加主體形象的形式感。這種手法雖然會減弱文字的識別性，但換來的是視覺吸引力。如果想讓選擇的文字扭曲的話，這個文字最好是比較大的標題性文字。如果是小文字扭曲之后，它的識別性基本就沒有了。

我們再來看下一個版面，大家應該能看出來，它就是運用了我們前面講到的液化扭曲命令，思路就是重復的文字，它能起到強調作用。但有的時候你每一個細節都完全一樣，它就會有單調的感覺，我們通過液化工具在對角線上進行扭曲，這樣就會產生變化。

我們再來看下一個，這個效果是比較有趣的，它是用什么方式制作的？它是拍攝的。這個設計有的時候就像拍電影一樣，并不是所有場景都必須依賴電腦，有的時候實景拍攝也能夠帶來更好的真實感。

這個版面用的是置換手法，由于我們沒有辦法找到相同的幕布，這里我們找了一個類似的作為載體，我們在上方加入文字信息，然后用置換命令，這個就變成了跟海報類似的感覺了。

這個版面和上一個有一些類似，但是不同的是它沒有背景，它沒有載體。這是因為扭曲的材質背景直接鑲嵌在文字的輪廓里了。給大家舉一個例子，很簡單的思路，我們選擇一個具有扭曲表面的背景圖片，然后將文字放到這個圖片上方，應用置換命令，采用多重曝光的手法。我們將這個材質鑲嵌到文字里面就完成了，這樣就看不到材質了。

案例演示

那么最后，給大家做一個案例演示，用到的就是扭曲的命令，這是一個活動展覽的項目，它的主題叫流動消融。

為了達到宣傳的目的，這里尋找一個能夠讓文案中的概念實體化的載體，就是標題，它的標題很直接了，那么提取主標題作為版面里的視覺元素，讓它變得很大，成為本案的主體。然后我們將文字稍微拉長一些，這個拉長是手動拉長的，所以它會出現橫粗豎細的現象，這個時候就需要修改了，調整筆畫的粗細統一，去掉一些不必要的細節，這樣這個主標題就刻畫完成了。

然后我們繪制版面的比例關系，這一步的目的就是確定主體在版面里的大小。然后主體的這四個字就放在畫面里的上部區域，底部的這個紅色區域，我們來安排其它的文字信息。

接下來把其余的文字信息編排到版面的下方，我們所有文字編排好以后，最后一步，為畫面添加一個水波紋的細節部分。

采用置換命令讓二者結合，然后把水波紋去掉，鑲嵌到文字里。

這個版面到這里就完成了，我們來看一下它實際的應用效果。

今天我們一起學習了扭曲技巧在版面里的應用，也知道了這類風格它的五種常用表現技巧，扭曲的這個版面不但可以和其它形狀結合，更能為版面帶來豐富的形式感，它是我們做主形象非常好用的一個手法。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。