點點客

          科技造就移動電商先鋒

          股票代碼:430177

          首頁 > 幹貨邦 > 科技動态 > 無線視覺如何提升才能“一觸即發”?
          分享到QQ空間

          大麥電商 ·  2016-09-05 11:38   33
          摘要:無線流量日益增加,無線端首頁的視覺優化也一直被持續關注着……

             無線流量日益增加,無線端首頁的視覺優化也一直被持續關注着,如何對店鋪首頁進行針對性的視覺提升;如何細化全盤視覺調性,進行合理的布局規範,達到差異化視覺,更多的是不知道如何在活動期去做一個具有針對性、特色與引導性的頁面,導緻用戶體驗下降,活動效果不理想……這些問題都在我們不懈的研究之中,那麽,下面就由小編帶領大家一起走上無線端頁面優化的進階旅程吧:


            首先我們要對店鋪的用戶人群進行精準的定位,而精準的人群定位約等于産品、人群、風格的一緻性表達。

           


          用戶定位分析

           

           


            有了精準的定位,從而延展的視覺定位則是與之息息相關的,我們所做的視覺規劃、元素搭配、色彩氛圍都是圍繞精準的定位進行相對應的配合。接下來我們要根據店鋪的不同戰略方向,選擇不同的頁面布局邏輯,而我們的活動頁面邏輯可以分爲四種類型:

           

                   ①分流型;

           

                   ②聚流型;

           

                   ③新商家型;

           

                   ④腰部商家型。

           

                  那麽針對我們的不同類型店鋪或者的店鋪在活動時期時,應采取的頁面邏輯是怎麽樣的呢?

            

              一、分流型



          微信店鋪

           


            分流型主要是具有大流量、産品品類比較多的店鋪活動頁面,從圖片中我們可以看出,針對大流量的店鋪,我們首先要做好的是将前三屏位置重點展示好活動内容,強化購物場景,并通過分類的明确指引,讓顧客按需選擇。從圖片中我們還可以看到,在産品的分類的大小進行了從左到右的展示,這是因爲我們的無線端用戶,大多爲右手使用者,當我們将重要的分類放在右側,是方便用戶進行點擊的,細微的局部調整都有可能帶來更好的用戶體驗。

            

              二、聚流型

           

           


          微店

           


            聚流型是針對産品品類較單一,屬于爆款/主推款型,在這類店鋪的布局上,我們同樣要注意做不遺餘力的氛圍展現,接下來對店鋪主推産品的推選。

            

              三、新商家型

           


          微商城

           


            對于新店鋪,我們要做好的則是将店鋪其他熱銷産品進行展示。

            

              四、腰部商家型

           


          微信分銷

           


                  對于腰部商家,在做好主推産品的展示時,同樣要做好分類的按需分流,再講店鋪熱銷品牌的相關推薦進行展示。總而言之,我們的頁面布局要遵循的邏輯則是要将流量價值最大化:當我們的流量越大時,越要在首頁進行流量分配,盡量引導到活動專題或通過品類導航到分類頁;當流量越小越要将流量聚焦到店鋪的主推款或熱銷款。

            

              五、創作對能視覺進行有效引導的設計元素



          互動測試 


           

                   ①較大的視覺重量元素(焦點)吸引眼球;   

             

                   ②輔助元素(箭頭和線)提示傳遞方向。

            

              六、運用二八原則優化頁面布局



            當我們的頁面産品比較多時更需要注意頁面的整潔,采用二八原則能将我們的頁面調性各種統一于協調:

           

                  ①産品多,信息量大的時候,将頁面的80%設計得簡潔;

           

                  ②圖片風格一緻/商品退底;

           

                  ③選用低飽和度的配色

           

              七、制造明顯區塊化,盡顯功能表達



            我們還需要注意頁面布局盡量有秩序,排列整齊,防止過緊或過松,有明顯的“區塊感”。切忌混亂;布局要充分表現其功能性,對于每個區域所代表的功能應有所區别。如:标題區,商品區,提示/幫助區等;頁面中最重要的信息所在的模塊将是在屏幕中最明顯的位置上;并且,應該是最大的/突破展示的信息的位置保證一緻性,讓用戶可以無需重新建立對頁面信息分布的理解。


          微信商城

           

           

          微店服裝
           

                  總結:


            無線端的頁面布局優化是有據可循的,我們通過分析店鋪的定位,到店鋪本質情況去進行針對性的布局,注意無線用戶的使用習慣,頁面元素對引導的重要性,還有運用二八原則對産品進行協調性的展示,并做好無線頁面内容的區塊化,做到功能的集中表達,對我們的無線視覺提升都會有很重要的意義。


          免責聲明

          知識要點

          “無線視覺”是指無線端頁面的視覺效果,常見的表現方式有店鋪首頁、banner橫幅、商品圖等。