製造運營設計中打動人心的情景體驗

制造运营设计中打动人心的情景体验
在設計運營類需求時,我們採用的比較常規的設計形式是先設計一個漂亮的頭圖然後再將信息內容進行排版填充,當遇到頁面中的文字元素比較繁冗時,大量內容的堆砌不僅很容易讓用戶瀏覽時產生疲勞,而且設計師在這個過程中也會容易陷入在傳統框框裡無法突破,怎樣突破常規,讓頁面在形式及情感上更吸引用戶是我們設計師值得思考的問題。

 

遇到問題

什麼樣的設計形式能更有趣、更容易打動用戶?運營設計主要表現手法之一就是通過製造情景來渲染主題氣氛。對“情景”的理解一層指場景、環境;氛圍有了,那試試再增加一些情緒上的感染和共鳴把,“情景”的另一層就是指人物,情節,景物喚起人的情緒和內心境界。製造情景體驗一方面是把頁面信息放置到貼近生活的真實環境中,讓畫面符合主題並且非常直觀,另一方面能引導用戶展開想像,喚起某種記憶,讓用戶有身臨其境的感受。

用戶不僅作為一個看客,還能以第一人物的視角參與到畫面中,讓用戶迅速置身場景中,帶動情緒,引髮用戶興趣去完成後續操作。這裡總結出一些打造情景體驗的具體方法及例子幫助大家去設計更有意思的運營頁面:

 

空間法則

空間感的渲染能讓人更有“身臨其境”的感覺,這種方式主要根據主題模擬真實場景,再通過整體透視的構圖使畫面呈現立體空間感,增加畫面衝擊力強,一下子吸引把用戶代入到氛圍中。我們來看幾個例子:


上的例子都通過空間打造增加畫面代入感,畫面的氣氛和現實生活中的場景極其相似,用戶很容易被吸引到氣氛中。需要注意的是這種立體場景的搭建對素材及整體層次的控制力要求比較高,在設計的時候需要先搭建大的畫面關係,再往裡頭添細節和內容,同時也要注意不要讓場景搶了內容的視覺焦點,在適當的時候還需要做些減法。

 

抽像法則

不同於上面提到的逼真空間搭建方法,這種設計方式雖然也是選取現實存在的對象,但是需要提煉一個可以將內容信息巧妙的融合串聯的承載容器構建出主體輪廓,然後再將內容填充到輪廓裡面。這種形式能夠讓用戶一眼就能了解到一些信息,同時又能貼合主題很好地傳達情景氛圍,讓頁面生動更有趣味性,特別適合一些節日主題的運營頁面。


把內容放到盒子里或者一封情書中,頓時就產生了親切感,抽象的主題通過實體顯性化地表達出來,第一眼就能明白主題。這種方法需要選取合適的現實元素並對其高度概括,注意將形狀盡量精簡強調,避免太具象,適當地捨棄一些繁瑣的、不必要的元素,以免影響閱讀的內容。

 

換角度法則

除了還原真實場景,角度的不同也會呈現不一樣的形式和感受,千篇一律的規則視角會難免讓頁面顯得單調平庸。不妨試試模擬真實生活中的視角,我們來看幾個例子:


這些例子往往是我們生活中很熟悉的情景卻容易被忽略,工作中俯視看到正在寫作的區域,對頁面的傾斜還原最真實的狀態;吃飯時關注自己盤子中食物的角度,親切的視覺感受令人置身其中,感染力非常強。同樣的元素主題往往變換一下畫面視角的方式能巧妙的打破常規構圖的呆板並不落俗套,讓頁面輕鬆活躍。同時真實的場景一下次拉近了和用戶的距離,也很容易和用戶內心產生共鳴。不過變換角度可能不太適合文字正常閱讀,要注意文字排版保證流量的舒適性。

 

局部突出法則

我們常常看到很多電影海報的設計中會截取某部分的方式作為的重心集中表現,最大化也是最突出,以小見大來引起注意,同時“猶抱琵琶半遮面”的方式製造更多懸念,引起觀眾興趣及思考。具體運用在運營設計中又是怎麼做的呢?我們來看幾個例子來體會其中的設計思路。

以上的例子都是通過截取局部來吸引眼球,這種某個局部特徵被放大強調的方式推翻我們常規的視覺習慣從而讓感情集中強化,視覺充滿神秘感瞬間抓住了用戶的眼球,頁面的目的也就達到了。這種方法可以多從電影、攝影中藉鑑手法,通過特殊的視角打造出精彩的畫面。

 

總結

製造頁面中情景體驗主要通過還原現實場景再加以藝術化的表達來增強頁面的整體氣氛,讓用戶不用去閱讀文字就能很快明白這是個跟主題相關的頁面,代入感極強,能比較直觀獲取信息;同時擬物具象的方式也減少了用戶認知成本,親和的設計形式在情感上給用戶更多情共鳴。當然這種方式需要設計師日常要注意觀察生活中的細節,多聯想與各場景相關的事物,不一定需要靠素材的堆積也能打造出動人的頁面一擊擊中用戶。

運營設計現在越來越注重個性、趣味性以及視覺衝擊力,頁面的形式和技巧也是多種多樣,以上總結的方法希望能幫助大家在設計遭遇瓶頸時找尋一些解決思路。設計師需要時刻靈活創新汲取靈感,才能夠避免按習慣性的思維去設計,不斷創造出新的視覺表現。當然還有更重要的是運用方法多多進行實踐轉化成自己的東西,才能得到能力上的有更大地提高。

原文:
http://www.aliued.cn/2015/01/05/%E5%88%B6%E9%80%A0%E8%BF%90%E8%90%A5%E8%AE%BE%E8%AE%A1%E4%B8%AD%E6%89%93%E5%8A%A8%E4%BA%BA%E5%BF%83%E7%9A%84%E6%83%85%E6%99%AF%E4%BD%93%E9%AA%8C.html

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s