網頁情景化設計雜談

來源:互聯網
上載者:User

  在資訊化時代的現在,網路在人們生活已經產生了巨大的影響力,網路也在逐漸改變著人們的生活和習慣。然而,在如今資訊大爆炸的今天,面對海量的網路資訊,怎樣才能實現既能吸引使用者眼球,又能快速準確地傳達資訊呢?這不僅需要內容本身具備較強吸引力,關鍵還在於一種比較常見的表達方式——網頁情景化設計。

  什麼是情景化設計?

  特點:虛擬現實,給人以親切感,互動友好度較高,應用領域廣泛涉及軟體、遊戲、網頁等應用。

  情景化設計是一門綜合性極強的表現方式,它涉及到現實社會、文化、經濟、市場、科技等諸多方面的因素。設計在很大程度上是既具藝術性,又有經濟性的一種實用的藝術形態。

  以上圖1-2都有共同的相似之處,並且我們都知道,網路是個虛擬世界,而這個虛擬世界已經逐步的深入到我們現實生活當中,成為不可缺少的一部分。對於網頁設計來說,設計不僅僅是“平”的,而是多姿多彩的情景化世界。情景化網頁設計的未來發展趨勢就是這一切虛擬體驗正在成為現實感受,讓使用者快速融入頁面重點內容當中,直觀擷取有用資訊。這對於提高產品運營資訊傳遞起到了很好作用,使頁面資訊表現的更加準確順暢,快速有效把目標使用者帶入到頁面氛圍當中。

  網頁情景化優勢

  首先,情景化在網頁中運用,起到了提高資訊傳輸和接收速率的作用,使資訊的傳達更加順暢。情景化設計適用於各種領域及產品的網頁設計創意中,比如活動專題、新品推薦、遊戲專題、等等。情景化設計可以準確體現出頁內容主題,並且能夠滿足目標使用者的各種需求,從而更大化的實現轉化率。

  其次,情景化在網頁中運用,使得每個頁面呈現方式、布局畫面、整體效果增添了個人化色彩。如今,人們的生活開始個人化,所以走在潮流前線的設計理念和戰略也愈加複雜和個人化。在網頁中應用情景化方式,不同的設計師對同一種產品有不同的展示方式,這樣做出的網頁永遠不會重複。

  再次,情景化設計方式對設計師的創意開發起到一個促進作用,讓設計師主動融入這個作品,不是為了設計而設計,而是要全方位考慮該頁面中任何一個元素存在之合理性。不論哪種領域的設計,它都是一個互動的過程,設計的過程也不僅僅是設計師藉助技術和發揮想象力的過程,還是設計師與使用者不斷對話表達使用者願望的過程。情景化設計不僅讓設計師在設計風格視野更開闊,而且這種發散思維更深一步的挖掘設計師潛能,在不斷摸索和創新中,實現自我的提升與價值。

  巧用情景化表現方式

  圖一:桌球類頁面設計,資訊承載量相對比較大,頁面設計以內容為主,表現形式作為輔助。烘托頁面整體氛圍,同時也突出主題資訊的內容。

  圖二:棋牌類頁面設計,在較少的內容資訊情況下,通常將第一屏作為首要資訊顯示地區。頁面設計除了營造強烈的氛圍以之外,設計師對頁面細節設計有很高的要求,案頭質感處理的比較細膩。在這樣的靜態頁面中,也可以體驗到較強的遊戲感。

  圖三:射擊類頁面設計,虛擬現實情境的方式,結合了遊戲內部元素。類比頁面情境,具有較強的帶入感。重點內容明確。可作為借鑒遊戲獎品禮包領取類頁面的設計。

  工作中的思索和嘗試

  網頁設計如同做文章一樣,不是一味的素材疊加,情景化網頁設計中包含著人、物、環境等各因素及其相互作用所形成的情景,其過程主要圍繞網頁主題內容來進行情景描述,而網頁設計師在整個創意過程中至始至終都要保持局部與整體存在的合理性,不多不少恰到好處的運用素材修飾整體效果。 下面就是學習和嘗試的一些過程:

  通常領取禮包的活動頁面,都會運用到遊戲相關人物、標題、禮包、LOGO等素材,一般我們會簡單的將頁面的資訊做好布局。在這個階段中,我們已經給頁面基本的方向做了定位,當然是需要和產品同事一起討論確認的。接著就是增加視覺細節和禮包內容,並完成最終的設計稿。但是,我們有沒有花一點時間去思考一下,活動頁面的關鍵詞“四重好禮”。是否有其他更為貼切的設計方式呢?經過一番思考,我們可以探索性的去嘗試,將禮包放在盒子裡的設計思路。

  討論後,我們需要將“禮包領取”按鈕和內容保證首屏顯示,然而我們設想的開啟盒子情境也是可行的,只需要把高度和內容布局做調整。於是完成產品需求重點內容顯示,融合產品運營的特點,是思考和探索嘗試的目的。但需求內容比較多,首先除了對文字方案最佳化,還需要設計師在視覺上進行最佳化,強調視覺傳遞的重點。目的希望當使用者開啟頁面,可以直接操作領取按鈕,使使用者得到更友好的互動體驗。

  最終我們完成情景化設計的嘗試。在這個過程中,設計需要和產品運營思路達成一致,然而必須是要求我們設計師主動和產品進行有效溝通。保證設計符合視覺要求的同時,滿足產品內容運營需求和目的。

  網頁設計基於特定情景中使用者與產品或服務之間的互動,然而具體採用何總表達方式是設計師研究的關鍵之處。情景化設計是值得每一個網頁設計師深入研究和學習的一種技巧,掌握好這門技巧,將給你的設計思路開闢一條無限創意之路

        :更多精彩教程請關注三聯網頁設計教程 欄目,

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。