編者按：參與感適用多個領(lǐng)域，效果顯著，回到網(wǎng)頁設(shè)計領(lǐng)域，今天@AnyForWeb_UED?同學(xué)分享10個打造參與感的技巧，另附上騰訊多位高級設(shè)計師的相關(guān)長教程 >>>

網(wǎng)站的參與感也屬于用戶體驗的是否到位的衡量標準之一。我們所認知的用戶體驗可能只是如何讓用戶瀏覽時更順暢舒適？又或是如何讓用戶減少思考和點擊？而這些都只是于網(wǎng)站操作的用戶體驗，還有一種情感上的用戶體驗同樣需要設(shè)計師的關(guān)注。

以下是為大家搜集的一些能體現(xiàn)網(wǎng)站參與感的相關(guān)案例，希望大家能從中學(xué)習(xí)借鑒。

一、給用戶一個貼近生活的真實場景

對于貼近自己生活的事物會有一種自然而然的親近感。因此，如果能將這些場景融入網(wǎng)站的設(shè)計中，很容易讓用戶產(chǎn)生一種愿意自我?guī)肭榫车母杏X，有利于引起他們對網(wǎng)站中的其他內(nèi)容的興趣。

附素材：《無縫融合！一組生活化風(fēng)格濃厚的Mac素材免費下載》

IMM

二、擬物化場景

擬物化的場景設(shè)置很有利于增加畫面的代入感，同時又不失網(wǎng)頁應(yīng)有的設(shè)計感。逼真是擬物化設(shè)計的主要特點之一，因此將畫面質(zhì)量盡可能的接近真實，但又必須很大程度的保證最初的視覺焦點，這是很關(guān)鍵的一點。

RedMonkeys

關(guān)于擬物在網(wǎng)頁設(shè)計中的運用，騰訊設(shè)計師有教程：《騰訊美女設(shè)計師傾囊相授：抄現(xiàn)實（第一集）》

三、營造具有空間感的立體視角

立體的畫面能令用戶有身臨其境的感覺，正如下面這個網(wǎng)站案例所表現(xiàn)的。遠近交錯的人物和風(fēng)景讓畫面頓時有了空間感，換一個角度看同樣的場景能帶給用戶完全不一樣的視覺沖擊力。

Mizone

四、故事化網(wǎng)頁設(shè)計

故事化網(wǎng)頁設(shè)計主要體現(xiàn)的是一種情節(jié)。生動有趣的情節(jié)能夠?qū)⒂脩粑秸麄€故事中，這對引起用戶情感上的共鳴有很好的效果，故事情節(jié)不僅可以帶動用戶的情緒，也讓用戶順勢展開想象。

IULLY

如無法訪問，可前往 微盤 下載梯子。

五、現(xiàn)實與虛擬的結(jié)合

手繪風(fēng)格與真實事物的結(jié)合一直被不斷使用，這樣的效果既能把畫面所傳達的含義表現(xiàn)的很清楚，也不會讓畫面設(shè)計看起來很沉悶。

Kurka Wolna

六、留白設(shè)計讓用戶更有期待

留白能為用戶帶來參與感？你沒看錯！留白設(shè)計能讓用戶獲得更多的想象空間，而參與感實際表達的意義就是讓用戶在瀏覽網(wǎng)站的時候不覺得無聊。不一定要讓用戶的視線不斷查找些什么，也不需要讓用戶的鼠標不停地點擊，讓他們自由想象，也許正是情感化設(shè)計最終的設(shè)計目的。

NewJumo Concept

騰訊同學(xué)分享的留白技巧：《LESS IS MORE！五個萬能口訣幫你搞定簡約風(fēng)格網(wǎng)頁設(shè)計！》

七、增強人物代入感

為用戶模擬一個盡可能熟悉的情境，比如案例中的辦公室，設(shè)計師用虛實結(jié)合的手繪風(fēng)格設(shè)計讓畫面更加生動。這種方法能夠有效的迅速拉近用戶與網(wǎng)站之間的距離，并且不落俗套的產(chǎn)生內(nèi)心共鳴。

Triangly

八、突出用戶想看的內(nèi)容

讓用戶能夠一眼就能看到最需要的內(nèi)容是吸引用戶最直接的方法，而要達到這種效果最簡單常用的設(shè)計手法就是將這部分內(nèi)容盡可能的最大化。

MetropolBand

九、為內(nèi)容搭建一個適合的“家”

只是將相對乏味的文字默默地放在頁面上，那么，即使再精彩的內(nèi)容也很可能被忽視。但如果設(shè)計師能為這些內(nèi)容設(shè)計一個生動有趣的框架或載體，也許用戶會對此產(chǎn)生更加濃厚的興趣，同時也起到了吸引關(guān)注的作用。

Schnapp

十、用戶操作后產(chǎn)生交互反應(yīng)

在用戶操作之后發(fā)生一些適當?shù)慕换バЧ@是最能讓用戶感受到自身存在感的方法之一，正如@AnyForWeb_UED?為MOCO Design設(shè)計的網(wǎng)站。鼠標懸停在導(dǎo)航位置時出現(xiàn)油漆狀的效果，不僅在美觀度上加分不少，也讓用戶及時獲得了他們所希望的簡單反饋。團隊介紹頁面摒棄了常規(guī)的設(shè)計模式，使用了手繪風(fēng)格的表現(xiàn)形式，也在鼠標懸停時產(chǎn)生了圖片放大效果。

MOCO

參與感，聽起來可能有些難掌控，但只要把握一些關(guān)鍵的要點，網(wǎng)站參與感就能瞬間增加，讓每一位用戶都覺得我自己擁有VIP般的用戶體驗。

【3月份超實用技巧合集】

中國臺灣設(shè)計師分享的UI設(shè)計師必備技能！
《超實用！UI設(shè)計師有哪些應(yīng)該會寫的文件？（附最新書單）》

中國臺灣設(shè)計師手把手教你手繪線框圖！
《給交互的同學(xué)！有哪些手繪線框圖的小技巧？》

戳中無數(shù)設(shè)計師的膝蓋！療傷方法見：
《超贊！如何應(yīng)對“說不出為什么，就覺得可以更好”的要求？》

投稿者：@AnyForWeb_UED

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量92萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：