何毅閔

說到APP界面，不得不說有些站點(diǎn)的APP風(fēng)格仍舊延續(xù)多年年前老舊的BBS年代的風(fēng)格。說好聽點(diǎn)可以是延續(xù)以往特色，說的不好聽的就是土到掉渣，跟不上時代。

智能手機(jī)發(fā)展到現(xiàn)在，就連QQ、微信這兩個億萬級別用戶量的APP都一直在不斷在視覺上進(jìn)行優(yōu)化，為了給用戶最好的使用感和視覺體驗(yàn)，那我們社區(qū)APP不妨也多在APP界面設(shè)計(jì)上下功夫，以此來獲得更多年輕用戶群體的喜愛。

首頁界面是門面工程，如果用戶從點(diǎn)開那一瞬間就表示嫌棄，然后……就沒有然后了。首頁界面告訴用戶的主要功能和特點(diǎn)，在APP便捷容易操作的前提下，用戶才會留下。其次，不同的界面會給人帶來截然不同的用戶體驗(yàn)。如果你的APP是一個人，那界面就是一個人的衣著與發(fā)型。你的形象落落大方、賞心悅目，用戶才愿意與你繼續(xù)發(fā)展。

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

接下來指出目前一些站點(diǎn)界面設(shè)計(jì)時存在的問題，以供大家參考，對照調(diào)整優(yōu)化自己的APP界面。

一般在APP內(nèi)容運(yùn)營上，大家都會選擇把最重要的內(nèi)容呈現(xiàn)至首頁，比如新上線的活動、最新的推廣banner。對于社區(qū)來說，每一條信息都是不可或缺的流量通道，如果做不到信息之間取舍，那整個頁面就會擁擠不堪。

這時候如果有UI設(shè)計(jì)師，對于整體內(nèi)容布局的把控就能起到舉足輕重的作用。我們先來看看豆瓣、小紅書和知乎這三大不同領(lǐng)域的社區(qū)在界面上的展示，如圖。

這三大社區(qū)的APP首頁模塊3～ 4個，我們可以一窺：簡潔與舒適是APP界面的趨勢。

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

1.圖片輪播

圖片輪播使得主屏上最重要的位置可以展示多頁內(nèi)容。頁面頂部顯示了更多的信息，用戶有更大的可能性看到它們。輪播圖往往展示的是最新的信息內(nèi)容，所以更新速度比較快。在配置banner的時候，一定要把握以下幾點(diǎn)：

（1）“內(nèi)容為王”，只顯現(xiàn)重要消息，并且及時更新相關(guān)banner圖。

（2）建議輪播頁頁數(shù)最好少于5頁，一般用戶不會讀更多內(nèi)容。

（3）確保圖片質(zhì)量和信息的完整度，保證用戶一眼get到重點(diǎn)。

2.圖標(biāo)導(dǎo)航

圖標(biāo)導(dǎo)航作為功能入口，實(shí)現(xiàn)頁面跳轉(zhuǎn)，在為本地用戶帶來便利的同時，更是吸引流量的關(guān)鍵入口。圖標(biāo)底部文字，簡單易懂，別讓用戶猜你的意圖，要一目了然就明白功能。上圖中這個站點(diǎn)，14個圖標(biāo)導(dǎo)航實(shí)在過多，細(xì)看有很多可以合并：職場招聘+人力招聘=人才招聘、韓國地鐵+韓國地圖=韓國導(dǎo)航，天氣信息也沒必要單獨(dú)開設(shè)一個圖標(biāo)導(dǎo)航，反而占據(jù)首頁有效信息的位置。

3.信息流

信息流是用戶被動接受的內(nèi)容，用戶不會一個字一個字閱讀所有信息內(nèi)容。所以，段落要以新鮮有趣、關(guān)鍵核心的詞匯開頭，最簡單粗暴的方式就是，標(biāo)題戳痛處，配圖吸引人。在以前的PC端上，界面亂可能也只是在于廣告界面亂；而在移動端，對于不是專職設(shè)計(jì)的人來說，DIY程度越高，界面設(shè)計(jì)就更考驗(yàn)審美。難點(diǎn)主要體現(xiàn)在兩方面：模塊布局，界面配色。

（1）模塊布局：

一個APP往往有好幾個主要且同級別的功能和分區(qū)。這時，就需要對產(chǎn)品的信息內(nèi)容和功能模塊進(jìn)行整體規(guī)劃，建立界面的基本格局來幫助用戶在視覺上進(jìn)行更好的區(qū)分。除了底部的信息流，盡量不出現(xiàn)大片文字?？梢杂闷渌K（如文本導(dǎo)航、滾動公告）將它們分隔開。當(dāng)用圖片來區(qū)分內(nèi)容，提高用戶瀏覽效率時，可以適當(dāng)強(qiáng)化，但是圖片質(zhì)量不高時，可以適當(dāng)弱化圖片。

除了通過文字、圖片交叉配置來進(jìn)行視覺分區(qū)，還可以在后臺插入組件留白來吸引用戶來閱讀重要內(nèi)容。

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

（2）界面配色：

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

例如網(wǎng)易云音樂以紅色為主色彩。所以，可以學(xué)習(xí)網(wǎng)易云音樂“保守做法”，給顏色做減法，使用統(tǒng)一色調(diào)。

以上陳述的每一個分類都不是獨(dú)立進(jìn)行的，而是在頁面配置時，將它們與用戶人群，產(chǎn)品調(diào)性結(jié)合考慮。

如果面向的用戶人群是中青年群體，保留以往論壇重地新聞資訊為主的可以參考濠濱論壇的頁面設(shè)置，簡潔大方。在世界杯期間，將圖標(biāo)導(dǎo)航統(tǒng)一換成足球相關(guān)，足以見其用心。

希望看過這篇APP頁面配置思路之后，站長們都能對照各家APP在界面上是否存在以上問題，盡早進(jìn)行調(diào)整，配置出符合當(dāng)今審美趨勢的界面，虜獲更多用戶的喜愛。