相關推薦

2018年APP頁面配置趨勢不完全指南

注意力經濟的時代,我們地方社區在運營上重內容的同時也要注重APP界面的顏值上的優化。

但是,說到APP界面,我馬甲君就不得不吐槽幾句了,有些站點的APP風格仍舊延續多年年前老舊的BBS年代的風格。說好聽點可以是延續以往特色,說的不好聽的就是土到掉渣,跟不上時代。

智能手機發展到現在,就連QQ、微信這兩個億萬級別用戶量的App都一直在不斷在視覺上進行優化,為了給用戶最好的使用感和視覺體驗,那我們地方社區APP不妨也多在APP界面設計上下功夫,以此來獲得更多年輕用戶群體的喜愛。

?QQ形象發展

?微信初版界面

首頁界面是門面工程,如果用戶從點開那一瞬間就表示嫌棄,然後……就沒有然後了。

首頁界面告訴用戶的主要功能和特點,在App便捷容易操作的前提下,用戶才會留下你。其次,不同的界面會給人帶來截然不同的用戶體驗。如果你的App是一個人,那界面就是一個人的衣著與髮型。你的形象落落大方、賞心悅目,用戶才願意與你繼續發展。

簡言之,你的APP界面在滿足基本的美觀的同時,還需要根據用戶的使用場景,操作與生活的習慣方式。所以,“以用戶為中心”的界面設計值得每一位站長重視。

接下來小編會指出目前一些站點界面設計時存在的問題,以供大家參考,對照調整優化自己的APP界面。

一般在APP內容運營上,大家都會選擇把最重要的內容呈現至首頁,比如新上線的活動、最新的推廣banner。對於地方社區來說,每一條信息都是不可或缺的流量通道,如果做不到信息之間取捨,那整個頁面就會擁擠不堪。

這時候如果有UI設計師,對於整體內容佈局的把控就能起到舉足輕重的作用。但即使沒有專業的UI設計師,在馬甲後台可以自由選擇組件模塊自行DIY,界面設計也會簡單易行。

我們先來看看豆瓣、小紅書、知乎這三大不同領域的社區在界面上的展示。

豆瓣,以UGC內容搭架的文青社區

(搜索欄+圖標導航+信息流)

?

小紅書,生活方式分享&購物社區

(頻道頁+搜索欄+標籤頁+信息流)

?

知乎,知識問答社區

(搜索欄+頻道頁+推薦欄+信息流)

?

這三大社區的App首頁模塊3~ 4 個,我們可以一窺:簡潔與舒適是App界面的趨勢。

我們再來看看本地社區的首頁組件配置。本地社區首頁配置一般都會有固定的三大模塊:

1. 圖片輪播

圖片輪播使得主屏上最重要的位置可以展示多頁內容。頁面頂部顯示了更多的信息,用戶有更大的可能性看到它們。輪播圖往往展示的是最新的信息內容,所以更新速度比較快。

在配置banner的時候,一定要把握以下幾點:

1. “內容為王”,只顯現重要消息,及時更新相關banner圖。

2. 建議輪播頁頁數最好少於5 頁,用戶不會讀更多內容。

3. 確保圖片質量和信息的完整度,保證用戶一眼get到重點。

?濠濱論壇banner圖

濠濱論壇的圖片輪播就做得比較好,圖片信息都與其內容相吻合,而且高清大氣上,信息簡潔明了,更新及時。

2.圖標導航

圖標導航作為功能入口,實現頁面跳轉,在為本地用戶帶來便利的同時,更是吸引流量的關鍵入口。

圖標導航一般4~ 5 個一排,設置兩排足矣,同時圖標設置還要考慮以下幾點:

1. 圖標風格統一,最好有視覺衝擊力。可能對於外行來說,設計統一風格的圖標難度較大,可以去icon網站下載免費資源或者找靈感。

Flatcion,最大的扁平化圖標素材庫:https://www.flaticon.com/

愛看圖標網,免費中文圖標搜索:http://www.iconpng.com/

阿里巴巴矢量圖標庫,中國第一個最大且功能最全的矢量圖標庫:http://www.iconfont.cn/

2. 圖標底部文字,簡單易懂,別讓用戶猜你的意圖,要一目了然就明白功能。

上圖中這個站點, 14 個圖標導航實在過多,細看有很多可以合併:職場招聘+人力招聘=人才招聘、韓國地鐵+韓國地圖=韓國導航,天氣信息也沒必要單獨開設一個圖標導航,反而佔據首頁有效信息的位置。

3.信息流

信息流是用戶被動接受的內容,用戶不會一個字一個字閱讀所有信息內容。所以,段落要以新鮮有趣、關鍵核心的詞彙開頭,最簡單粗暴的方式就是,標題戳痛處,配圖吸引人。

在以前的PC端上,界面亂可能也只是在於廣告界面亂;而在移動端,對於不是專職設計的人來說,DIY程度越高,界面設計就更考驗審美。難點主要體現在兩方面: 模塊佈局,界面配色。

1.模塊佈局:

一個app往往有好幾個主要且同級別的功能和分區。這時,就需要對產品的信息內容和功能模塊進行整體規劃,建立界面的基本格局來幫助用戶在視覺上進行更好的區分。

除了底部的信息流,盡量不出現大片文字。可以用其他模塊(如文本導航、滾動公告)將它們分隔開。當用圖片來區分內容,提高用戶瀏覽效率時,可以適當強化,但是圖片質量不高時,可以適當弱化圖片。

除了通過文字、圖片交叉配置來進行視覺分區,還可以在後台插入組件留白來吸引用戶來閱讀重要內容。

?google近期主頁

谷歌搜索的主頁出現了大面積的留白,用戶的目光自然就會被吸引到搜索框。這和谷歌的初衷相契合,他們希望用戶在這個頁面完成搜索操作,所以不用展示過多其他的信息來分散用戶的注意力。

2.界面配色:

界面配色,一方面可以呈現產品調性,另外一個重要的作用就是完成視覺區分。不管配色風格,都要遵守“少即是多”的原則,簡潔的配色能夠把重點第一時間呈現給用戶,要將這點同時落實到所有模塊中,包括輪播圖片選擇時,還需要考慮到圖片的主色調。

網易云音樂以紅色為主色彩。所以,可以學習網易云音樂“保守做法”,給顏色做減法,使用統一色調。

以上陳述的每一個分類都不是獨立進行的,而是在頁面配置時,將它們與用戶人群,產品調性結合考慮。

結合以上思路,我們用ps隨意為一家在配置上比較薄弱的站點進行重新修改。

調整後APP首頁清晰美觀

調整後的界面更符合現在App的佈局,但這還屬於常規操作,如果想出彩可以再參考一些其他App。

面向年輕群體的站點,頁面設置可以參考App:mars,配色較為跳躍,同時UI圖標非常有趣,點開給人驚喜感。

?mars界面截圖

馬甲客戶群裡也有面向年輕用戶做得很出彩的站點,大家可以搜索:海論 下載參考。他們APP風格比較偏時尚潮流、界面色彩搭配豐富,很是抓人眼球。

如果面向的用戶人群是中青年群體,保留以往論壇重地方新聞資訊為主的可以參考濠濱論壇的頁面設置,簡潔大方。在世界杯期間,將圖標導航統一換成足球相關,足以見其用心。

希望看過這篇APP頁面配置思路之後,站長們都能對照各家APP在界面上是否存在以上問題,儘早進行調整,配置出符合當今審美趨勢的界面,虜獲更多用戶的喜愛。

著作权归作者所有。
来源:MAGAPP站長圈

为您推荐

發佈留言

联系我们

联系我们

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部