網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

來源:aliued. 作者:zhuying 學(xué)習(xí):5852人次

遇到的問題

在設(shè)計(jì)運(yùn)營類需求時(shí),我們采用的比較常規(guī)的設(shè)計(jì)形式是先設(shè)計(jì)一個(gè)漂亮的頭圖然后再將信息內(nèi)容進(jìn)行排版填充,當(dāng)遇到頁面中的文字元素比較繁冗時(shí),大量?jī)?nèi)容的堆砌不僅很容易讓用戶瀏覽時(shí)產(chǎn)生疲勞,而且設(shè)計(jì)師在這個(gè)過程中也會(huì)容易陷入在傳統(tǒng)框框里無法突破,在設(shè)計(jì)時(shí)感到枯燥乏味、越做越無趣。平時(shí)采集設(shè)計(jì)靈感時(shí)我們會(huì)注意到現(xiàn)在很多優(yōu)秀的運(yùn)營設(shè)計(jì)已經(jīng)不僅僅局限于常規(guī)的形式,而是越來越注重整體畫面給用戶帶來的更多愉悅感及融入感。怎樣突破常規(guī),讓頁面在形式及情感上更吸引用戶是我們?cè)O(shè)計(jì)師值得思考的問題。

什么樣的設(shè)計(jì)形式能更有趣、更容易打動(dòng)用戶?運(yùn)營設(shè)計(jì)主要表現(xiàn)手法之一就是通過制造情景來渲染主題氣氛。對(duì)“情景”的理解一層指場(chǎng)景、環(huán)境;氛圍有了,那試試再增加一些情緒上的感染和共鳴把,“情景”的另一層就是指人物,情節(jié),景物喚起人的情緒和內(nèi)心境界。制造情景體驗(yàn)一方面是把頁面信息放置到貼近生活的真實(shí)環(huán)境中,讓畫面符合主題并且非常直觀,另一方面能引導(dǎo)用戶展開想象,喚起某種記憶,讓用戶有身臨其境的感受。

用戶不僅作為一個(gè)看客,還能以第一人物的視角參與到畫面中,讓用戶迅速置身場(chǎng)景中,帶動(dòng)情緒,引發(fā)用戶興趣去完成后續(xù)操作。這里總結(jié)出一些打造情景體驗(yàn)的具體方法及例子幫助大家去設(shè)計(jì)更有意思的運(yùn)營頁面:

空間法則

空間感的渲染能讓人更有“身臨其境”的感覺,這種方式主要根據(jù)主題模擬真實(shí)場(chǎng)景,再通過整體透視的構(gòu)圖使畫面呈現(xiàn)立體空間感,增加畫面沖擊力強(qiáng),一下子吸引把用戶代入到氛圍中。我們來看幾個(gè)例子:

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

以上的例子都通過空間打造增加畫面代入感,畫面的氣氛和現(xiàn)實(shí)生活中的場(chǎng)景極其相似,用戶很容易被吸引到氣氛中。需要注意的是這種立體場(chǎng)景的搭建對(duì)素材及整體層次的控制力要求比較高,在設(shè)計(jì)的時(shí)候需要先搭建大的畫面關(guān)系,再往里頭添細(xì)節(jié)和內(nèi)容,同時(shí)也要注意不要讓場(chǎng)景搶了內(nèi)容的視覺焦點(diǎn),在適當(dāng)?shù)臅r(shí)候還需要做些減法。

抽象法則

不同于上面提到的逼真空間搭建方法,這種設(shè)計(jì)方式雖然也是選取現(xiàn)實(shí)存在的對(duì)象,但是需要提煉一個(gè)可以將內(nèi)容信息巧妙的融合串聯(lián)的承載容器構(gòu)建出主體輪廓,然后再將內(nèi)容填充到輪廓里面。這種形式能夠讓用戶一眼就能了解到一些信息,同時(shí)又能貼合主題很好地傳達(dá)情景氛圍,讓頁面生動(dòng)更有趣味性,特別適合一些節(jié)日主題的運(yùn)營頁面。

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

把內(nèi)容放到盒子里或者一封情書中,頓時(shí)就產(chǎn)生了親切感,抽象的主題通過實(shí)體顯性化地表達(dá)出來,第一眼就能明白主題。這種方法需要選取合適的現(xiàn)實(shí)元素并對(duì)其高度概括,注意將形狀盡量精簡(jiǎn)強(qiáng)調(diào),避免太具象,適當(dāng)?shù)厣釛壱恍┓爆嵉、不必要的元素,以免影響閱讀的內(nèi)容。

換角度原則

除了還原真實(shí)場(chǎng)景,角度的不同也會(huì)呈現(xiàn)不一樣的形式和感受,千篇一律的規(guī)則視角會(huì)難免讓頁面顯得單調(diào)平庸。不妨試試模擬真實(shí)生活中的視角,我們來看幾個(gè)例子:

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

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

局部突出法則

我們常?吹胶芏嚯娪昂(bào)的設(shè)計(jì)中會(huì)截取某部分的方式作為的重心集中表現(xiàn),最大化也是最突出,以小見大來引起注意,同時(shí)“猶抱琵琶半遮面”的方式制造更多懸念,引起觀眾興趣及思考。具體運(yùn)用在運(yùn)營設(shè)計(jì)中又是怎么做的呢?我們來看幾個(gè)例子來體會(huì)其中的設(shè)計(jì)思路。網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

網(wǎng)頁設(shè)計(jì)!如何讓你的網(wǎng)頁給用戶有參考感?

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

小結(jié)

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

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

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!