智能手機(jī)發(fā)展到現(xiàn)在，就連QQ、微信這兩個(gè)億萬(wàn)級(jí)別用戶量的App都一直在不斷在視覺(jué)上進(jìn)行優(yōu)化，為了給用戶最好的使用感和視覺(jué)體驗(yàn)，那我們地方社區(qū)APP不妨也多在APP界面設(shè)計(jì)上下功夫，以此來(lái)獲得更多年輕用戶群體的喜愛(ài)。
??QQ形象發(fā)展
??微信初版界面
首頁(yè)界面是門(mén)面工程，如果用戶從點(diǎn)開(kāi)那一瞬間就表示嫌棄，然后……就沒(méi)有然后了。
首頁(yè)界面告訴用戶的主要功能和特點(diǎn)，在App便捷容易操作的前提下，用戶才會(huì)留下你。其次，不同的界面會(huì)給人帶來(lái)截然不同的用戶體驗(yàn)。如果你的App開(kāi)發(fā)是一個(gè)人，那界面就是一個(gè)人的衣著與發(fā)型。你的形象落落大方、賞心悅目，用戶才愿意與你繼續(xù)發(fā)展。
簡(jiǎn)言之，你的APP設(shè)計(jì)界面在滿足基本的美觀的同時(shí)，還需要根據(jù)用戶的使用場(chǎng)景，操作與生活的習(xí)慣方式。所以，“以用戶為中心”的界面設(shè)計(jì)值得每一位站長(zhǎng)重視。
接下來(lái)小編會(huì)指出目前一些站點(diǎn)界面設(shè)計(jì)時(shí)存在的問(wèn)題，以供大家參考，對(duì)照調(diào)整優(yōu)化自己的APP界面。
一般在APP內(nèi)容運(yùn)營(yíng)上，大家都會(huì)選擇把最重要的內(nèi)容呈現(xiàn)至首頁(yè)，比如新上線的活動(dòng)、最新的推廣banner。對(duì)于地方社區(qū)來(lái)說(shuō)，每一條信息都是不可或缺的流量通道，如果做不到信息之間取舍，那整個(gè)頁(yè)面就會(huì)擁擠不堪。
這時(shí)候如果有UI設(shè)計(jì)師，對(duì)于整體內(nèi)容布局的把控就能起到舉足輕重的作用。但即使沒(méi)有專(zhuān)業(yè)的UI設(shè)計(jì)師，在馬甲后臺(tái)可以自由選擇組件模塊自行DIY，界面設(shè)計(jì)也會(huì)簡(jiǎn)單易行。
我們先來(lái)看看豆瓣、小紅書(shū)、知乎這三大不同領(lǐng)域的社區(qū)在界面上的展示。
豆瓣，以UGC內(nèi)容搭架的文青社區(qū)
（搜索欄+圖標(biāo)導(dǎo)航+信息流）
??
小紅書(shū)，生活方式分享&購(gòu)物社區(qū)
（頻道頁(yè)+搜索欄+標(biāo)簽頁(yè)+信息流）
??
知乎，知識(shí)問(wèn)答社區(qū)
（搜索欄+頻道頁(yè)+推薦欄+信息流）
??
這三大社區(qū)的App首頁(yè)模塊3~ 4 個(gè)，我們可以一窺：簡(jiǎn)潔與舒適是App界面的趨勢(shì)。
我們?cè)賮?lái)看看本地社區(qū)的首頁(yè)組件配置。本地社區(qū)首頁(yè)配置一般都會(huì)有固定的三大模塊：
圖片輪播使得主屏上最重要的位置可以展示多頁(yè)內(nèi)容。頁(yè)面頂部顯示了更多的信息，用戶有更大的可能性看到它們。輪播圖往往展示的是最新的信息內(nèi)容，所以更新速度比較快。
在配置banner的時(shí)候，一定要把握以下幾點(diǎn)：
1. “內(nèi)容為王”，只顯現(xiàn)重要消息，及時(shí)更新相關(guān)banner圖。
2. 建議輪播頁(yè)頁(yè)數(shù)最好少于 5 頁(yè)，用戶不會(huì)讀更多內(nèi)容。
3. 確保圖片質(zhì)量和信息的完整度，保證用戶一眼get到重點(diǎn)。
??濠濱論壇banner圖
濠濱論壇的圖片輪播就做得比較好，圖片信息都與其內(nèi)容相吻合，而且高清大氣上，信息簡(jiǎn)潔明了，更新及時(shí)。
圖標(biāo)導(dǎo)航作為功能入口，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，在為本地用戶帶來(lái)便利的同時(shí)，更是吸引流量的關(guān)鍵入口。
圖標(biāo)導(dǎo)航一般4~ 5 個(gè)一排，設(shè)置兩排足矣，同時(shí)圖標(biāo)設(shè)置還要考慮以下幾點(diǎn)：
1. 圖標(biāo)風(fēng)格統(tǒng)一，最好有視覺(jué)沖擊力�？赡軐�(duì)于外行來(lái)說(shuō)，設(shè)計(jì)統(tǒng)一風(fēng)格的圖標(biāo)難度較大，可以去icon網(wǎng)站下載免費(fèi)資源或者找靈感。
Flatcion，最大的扁平化圖標(biāo)素材庫(kù)：https://www.flaticon.com/
愛(ài)看圖標(biāo)網(wǎng)，免費(fèi)中文圖標(biāo)搜索：http://www.iconpng.com/
阿里巴巴矢量圖標(biāo)庫(kù)，中國(guó)第一個(gè)最大且功能最全的矢量圖標(biāo)庫(kù)：http://www.iconfont.cn/
QQ客服