相關案例

  • 健身房,俱樂部,游泳館,拳擊格斗館

    行業(yè):健身房,俱樂部,游泳館,拳擊格斗館

    品牌:臨汾冰世界游泳健身俱樂部

    服務:健身場館空間裝飾裝修設計,品牌策劃,軟裝陳列設計,健身場館燈光設計

    說明: 臨汾位于山西省西南部,歷史悠久,是華夏民族的重要發(fā)祥地之一和黃河文明的搖籃,有“華夏第一都”之稱。...
  • 醫(yī)療器材、醫(yī)療設計生產(chǎn)研發(fā)

    行業(yè):醫(yī)療器材、醫(yī)療設計生產(chǎn)研發(fā)

    品牌:東莞藍海皓凈化科技有限公司

    服務:品牌形象設計,醫(yī)療VI設計,醫(yī)療標志設計

    說明: 東莞藍海皓凈化科技有限公司是從事醫(yī)院潔凈手術室配套產(chǎn)品及中心供應室、醫(yī)療家具、醫(yī)藥凈化設備的設計、...
  • 企業(yè)形象視覺識別系統(tǒng)

    行業(yè):企業(yè)形象視覺識別系統(tǒng)

    品牌:品深設計

    服務:商城vi系統(tǒng)設計,品牌標志設計,企業(yè)品牌策劃

    說明: 企業(yè)視覺形象識別,是指在企業(yè)經(jīng)營理念的指導下,利用平面設計等手法將企業(yè)的內(nèi)在氣質(zhì)和市場定位視覺化、...
  • 集團/企業(yè)/上市公司畫冊設計

    行業(yè):集團/企業(yè)/上市公司畫冊設計

    品牌:品深設計

    服務:深圳畫冊設計、企業(yè)品牌文化梳理、文案策劃、商業(yè)攝影

    說明: 現(xiàn)在所有的平面的平面設計幾乎有用到版式,大到一本畫冊,一個海報,一個廣告牌,小到一個提案...
  • 餐飲品牌策劃

    行業(yè):餐飲品牌策劃

    品牌:品深設計

    服務:餐飲品牌策劃、餐飲VI系統(tǒng)設計、餐飲品牌手冊、餐飲品牌宣傳資料

    說明: 餐飲品牌策劃就是對餐飲品牌文化整合與提煉。就是對餐飲品牌的文化進行立意、策劃、規(guī)劃、設計,就是要站...


品深設計解讀網(wǎng)站吸引更多用戶的七大秘訣

我們都明白,好的設計能讓用戶感到愉悅,但是好的網(wǎng)頁設計至少吸引用戶的第一步而已。現(xiàn)實總是骨感的。在你網(wǎng)站上線的那一刻,就意味著你的網(wǎng)站將會面臨著數(shù)百萬甚至更多的競爭者,你不僅需要想辦法讓正在瀏覽你網(wǎng)站的用戶停留更久,還需要讓已經(jīng)離開的用戶成為你的回頭客。


如何讓網(wǎng)站黏度更高,吸引更多用戶是站長和網(wǎng)頁設計師們永恒的話題。但是用戶量無法憑空而來,即使你做好了內(nèi)容,各種問題依然會成為攔路虎讓你撓頭不已。


今天品深設計將會告訴你七大秘訣,幫你搞定網(wǎng)站,讓你的網(wǎng)站吸引更多用戶。



1、視差:讓單純的滾動變成互動


如果改變網(wǎng)站某一方面的設計能讓用戶與網(wǎng)站之間的參與度提高7成,那么你會不會使用?實際上,很多網(wǎng)站已經(jīng)開始這樣做了,這就是視差滾動給網(wǎng)站帶來的改變。作為設計趨勢,視差滾動已經(jīng)席卷了網(wǎng)頁設計領域。這種獨特而醒目的設計風格讓信息和內(nèi)容的呈現(xiàn)更加有趣和直觀。


視差滾動設計中,多種元素會隨著頁面滾動而運動,給人以一種獨特的動態(tài)體驗,這種體驗還會驅(qū)使用戶進一步滾動。


Sony 旗下的這個Be Moved網(wǎng)站就非常生動地展示了視差滾動的炫酷效果。


如果你想設計出一個視差滾動的網(wǎng)頁,諸如Webydo這樣的免代碼工具可以幫你制作出動感而精美的網(wǎng)頁。最近他們又推出了新工具,Parallax Scrolling Animator,非常不錯哦。


2、符號與標識:視覺潤滑劑


在信息量較大的網(wǎng)站中,你可能需要借助大量的文字來描述事物,這也就意味著設計師需要最大程度地展示文本。


使用圖標和符合可以幫助用戶更快更好地定位內(nèi)容。雖然符號和標識都只是微小的視覺符號,但是它們不僅可以啟發(fā)用戶,讓他們更好地理解內(nèi)容,還可以像路標一樣引導用戶的視覺流向。


在互聯(lián)網(wǎng)發(fā)展早期,圖標和符號通常是點陣的,要修改和調(diào)整的話過程會非常繁瑣。但是現(xiàn)在不一樣了,設計師可以借助圖標字體來輕松使用符號和圖標,它們不僅是矢量的,而且還具備強大的拓展性,并通過CSS便捷地定制。最值得推薦的工具無疑是Glyphter,它不僅可以從開源的圖標集來繪制圖標,還能通過上傳SVG格式的圖標或者文字來制作。


使用圖標和符號來支撐文本段落和不同的基面元素,比起單純的文本累積來的更加靠譜,如果結(jié)合動態(tài)排版技術,你的網(wǎng)站體驗會更加令人愉悅、便于閱讀。


3、靈活的版式:響應式設計


響應式設計并不僅僅是讓布局更靈活,它還關乎內(nèi)容。網(wǎng)頁布局能隨著屏幕尺寸改變而改變只是一方面,各個模塊中所包含的內(nèi)容也應該隨之進行調(diào)整。



移動端的用戶通常沒有時間瀏覽過長的段落,所以請確保移動端的段落足夠簡潔,交互和響應也應對更加清晰直觀。移動端屏幕本就不大,如果字體過大或者過小都不合適,所以請使用動態(tài)排版技術確保字體在一個適宜于閱讀的區(qū)間中,千萬不要讓用戶放大看文本!


說道響應式的網(wǎng)站設計,Information Architects site 是一個非常值得學習的案例——它不僅內(nèi)容關于響應式設計,還是響應式設計的發(fā)起者之一。這個博客不僅深入探討了響應式設計的思想和技術,并且以自己為范例展示了如何完美地響應式展示內(nèi)容。


響應式的內(nèi)容展示讓用戶更輕松地瀏覽,也使得網(wǎng)站本身更加流暢清晰,使得整體上更具有吸引力。這種設計思想也應該延伸到圖片展示上。


4、矢量圖片與響應式視覺


文本只是網(wǎng)站設計的諸多設計因素之一,圖片和文本同樣重要。通常網(wǎng)站所使用的圖片多是位圖,格式常見于JPG、PNG以及GIF。而位圖帶來了2個問題:


位圖圖像的尺寸是固定的,所以當它們需要適應新布局和分辨率的時候,不能無損地擴展,所以需要準備足以適配移動端或者視網(wǎng)膜屏幕的其他分辨率的圖片素材;
每次使用這樣的圖片的時候,都會向網(wǎng)站的加載過程發(fā)一個HTTP請求。隨著某個圖片在網(wǎng)站越來越受歡迎,這個加載時間會開始膨脹,更不用說渲染更多頁面所需要的數(shù)據(jù)請求了。


解決方案:使用矢量圖片。矢量圖片可以更容易縮放到任意大小,輕松適應任何分辨率。SVG格式是日益流行的矢量圖片格式,許多網(wǎng)頁設計師都特別喜歡使用這種格式,因為它不僅可以適配不同的風格,并且能夠?qū)崿F(xiàn)許多漂亮而吸引人的效果。


最重要的是,矢量圖足夠輕量級,可以為瀏覽器輕松渲染,這也意味著網(wǎng)頁可以負載更多素材和內(nèi)容。


5、游戲化


其實,最巧妙的解決方法是讓網(wǎng)頁游戲化,或者增加游戲元素吸引用戶,這可以增加網(wǎng)站的互動性和獎勵感。


游戲化最常見的就是各種徽章,你可以在完成各種任務之后解鎖徽章,教育網(wǎng)站Treehouse就是這么做的,當你完成課程之后會收到新徽章,這對于用戶非常有意義。但是,如果你的網(wǎng)站并不具備類似的功能和結(jié)構,那該怎么辦?


對于博客、電商網(wǎng)站或者其他相對更標準的網(wǎng)站而言,游戲化可以采取的策略,是在特定情況下為用戶提供優(yōu)惠券或者折扣。比如,用戶可以通過在Twitter上轉(zhuǎn)發(fā)網(wǎng)站內(nèi)容來獲取免費電子書,或者電商網(wǎng)站的優(yōu)惠券,或者獲取更多隱藏的內(nèi)容,等等等等。


像這樣的小活動、小互動其實可以賦予用戶更加私人化的體驗,培養(yǎng)他們的關注意識和互動意識,鼓勵他們參與,常?;貋?。


6、圖像壓縮:網(wǎng)站提速


沒有什么比網(wǎng)站加載緩慢更讓人抓狂。如果網(wǎng)站加載時間太長,用戶會相繼離開——誰知道網(wǎng)站什么時候能最終打開呢?尤其是在這個缺乏耐心的時代。


當網(wǎng)站越來越復雜,越來越視覺化,加載時間不可避免地受到影響。幸運的是,有一些技巧可以解決這個問題:
簡化內(nèi)容
優(yōu)化網(wǎng)站圖片
通過內(nèi)容分發(fā)系統(tǒng)(CDN)來提升網(wǎng)站


對于初學者,許多設計師會傾向于借助簡化網(wǎng)站內(nèi)容來提升訪問速度,盡可能去除空白、注釋和冗余的CSS與JS文件,小步快跑。


同樣的,諸如 ImageOptim(僅限Mac)這樣的程序也可以幫你盡量壓縮你所發(fā)布的圖片的大小,減輕網(wǎng)站加載壓力,也許這樣一來你也無需為精簡網(wǎng)站設計而撓頭。


最后,還有許多網(wǎng)站會選擇使用內(nèi)容分發(fā)系統(tǒng)(CDN),這樣可以更加快速的分發(fā)文件。在世界各地的多個服務器來發(fā)放網(wǎng)站數(shù)據(jù),CDN可以確保用戶通過最近的服務器來獲取內(nèi)容。CDN可以明顯地提升網(wǎng)站加載速度,它常常被用來幫助大站點,讓世界各地的服務器來共同分擔負載,皆大歡喜。


使用諸如Webydo這樣的云服務可以幫你從糾結(jié)的服務器優(yōu)化中解放出來。


7、通知推送




對許多網(wǎng)站而言,互動與參與常常出現(xiàn)在網(wǎng)站發(fā)布新內(nèi)容之后,無論是文章、視頻還是一些完全不一樣的東西。


通常情況下,設計者們會使用通知推送的策略——向用戶的注冊郵箱來推送內(nèi)容。雖然這種方式截至目前依然很實用,但是它并非最靠譜最有效的!瀏覽器信息推送比這種方式要有效30倍!


諸如Roost這樣的工具,可以幫設計師輕松實現(xiàn)瀏覽器信息推送,即使用戶當前所瀏覽器的網(wǎng)頁并非你的站點!


雖然Safari僅僅在Mac上得到較好的支持,但是Chrome和Firefox瀏覽器已經(jīng)實現(xiàn)了完整的信息推送支持,所以你完全不用擔心!


結(jié)語


如果想要讓你的網(wǎng)站快速、美觀,上面所說的7大訣竅在你的設計過程中肯定擁有一席之地,好好運用自然會訪客如潮!不要單打獨斗,靠譜的工具很多,只要你用心尋找,到處都是。


相關圖片來著自百度,著名如果涉及到侵權,請告知我們會及時刪除;



分享: 0

設計案例