2018年APP頁面配置趨勢(shì)不完全指南

何毅閔

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

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

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

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

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

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

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

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

我們?cè)賮砜纯幢镜厣鐓^(qū)的首頁組件配置。本地社區(qū)首頁配置一般都會(huì)有固定的三大模塊：

1.圖片輪播

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

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

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

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

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

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

3.信息流

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

（1）模塊布局：

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

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

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

（2）界面配色：

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

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

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

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

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