拒絕土丑俗！手把手教你如何配置一個高顏值的app

在運營區(qū)域APP的過程中，許多站長總是疑惑，同樣是用馬甲APP治理 后臺，為什么有的平臺做得那么好看，為什么自己的APP不能配置的很美麗，明明差不多的頁面配置，為什么出來的效果不盡人意而且會很low。

就拿首頁UI配置來說，馬甲APP提供了 9 種不同的運營位組件，不同的運營位可以重復(fù)調(diào)用，隨意排列，以滿足不同站點的展示需求。可是就在這幾種運營位的擺放之后，APP之間的差距已逐漸拉開。

所以運營者的框架意識十分重要，從APP的風(fēng)格、內(nèi)容都要有一個整體到局部的意識。

俗話說,授之以魚,不如授之以漁。在馬甲眾多客戶中，我們就顏值最高的半城生活A(yù)PP的內(nèi)容配置與頁面設(shè)計為例，來詳細(xì)分析一下它的品牌推廣，幫助運營者對APP的品牌搭建和頁面設(shè)計有一個更清楚 的認(rèn)識。

半城生活 · 內(nèi)容框架

首頁

1 內(nèi)容配置的后臺步驟

半城生活的首頁上方，是可以左右滑動的圖片，戳進去后便跳轉(zhuǎn)到了熱門話題或者熱門活動。用戶可以如果對話題感興趣，可以方便快捷地加入活動，而不用到話題里漫無目的地篩選。

這種滑動的圖片輪播設(shè)置，在馬甲后臺的APP設(shè)置里便可以操作。半城生活設(shè)置的便是圖片輪播+圖標(biāo)導(dǎo)航。

1、設(shè)置圖片輪播：配置→首頁配置→添加組件→圖片輪播。

2、編輯圖片輪播：運營→廣告中心→組件標(biāo)題→新增廣告。在是否顯示中選擇“是”，這個圖片便在首頁上方輪播。

1、設(shè)置圖標(biāo)導(dǎo)航：配置→首頁配置→添加組件→圖標(biāo)導(dǎo)航。

2、編輯圖標(biāo)導(dǎo)航：點擊圖標(biāo)導(dǎo)航，在編輯頁面中進行相應(yīng)的編輯。

不過運營位只是工具，最重要的是最后達成的效果。如果運營位添加過多,或者整體風(fēng)格不協(xié)調(diào)，則顯得復(fù)雜繁冗。像半城生活這樣只添加兩種,十分簡約清新。

此外,首頁的熱門推舉 ,也是吸引用戶興趣的重要渠道。

1、設(shè)置首頁資訊：內(nèi)容→首頁推舉 →公布內(nèi)容。

2、編輯首頁資訊：在編輯后臺進行相應(yīng)的編輯，添加文章。建議在微信后臺事先編好，然后直接粘貼上去。

可以注意到，半城生活的文章多具有強烈的熱點性，如社會人的小豬佩奇、帶上雨神吐槽連連下雨、用明星吸引眼球的火鍋店...這和用戶平時關(guān)注的內(nèi)容有很強的關(guān)聯(lián)性，用戶可以在你制造的平臺中尋找到共鳴。

2 頁面設(shè)計原理分析

首頁主圖——

看顏的時代，第一印象尤其重要！

心理學(xué)研究證明，圖片會比文字更直觀地、更優(yōu)先地傳達，所以在APP中圖片的品質(zhì)直接傳遞著品牌的感受。

半城生活的首頁配置版式趨于平面化，給人一目了然的感覺。自定義配置為三欄布局：滾動圖片導(dǎo)航，圖標(biāo)導(dǎo)航，熱門資訊列表。作為面向年輕人的區(qū)域生活服務(wù)類型的APP，自定義配置上相比其他地方站APP更多的是內(nèi)容和視覺的呈現(xiàn)，從視覺上做到了較強的辨識度。APP整體顏色以亮眼的黃色為主，黃色代表著活力時尚，符合APP的品牌定位。

所以在選擇APP的主題色時，我們要思考如何選擇適合自己APP類型定位的顏色。之所以半城生活配置給人賞心悅目的感覺，是因為app的配圖和主題顏色的搭配很和諧。

拿首頁滾動圖片導(dǎo)航來說，近期的滾動的活動banner設(shè)計，不管在顏色的選擇上還是設(shè)計風(fēng)格上都是有講究的。從顏色上來看，banner顏色的選擇，如粉色，黃色，藍色這幾種，并沒有和主題的黃色有太大的爭議感，反而做到了適度協(xié)調(diào)，明亮顏色的選擇更能體現(xiàn)出一種青春時尚活力，不僅迎合年輕用戶的口味，也體現(xiàn)出半城品牌的定性。

要注意的是，在APP配圖顏色的選擇上，不管你的主題顏色是什么，請一定要考究配圖的顏色是否和主題色相互協(xié)調(diào)，是否存在強烈的沖突感。幸免大篇幅的選擇高飽和度的顏色，如大紅色，寶藍色，金黃色，桃紅色等。

風(fēng)格上，避開了傳統(tǒng)媒體廣告老舊的設(shè)計風(fēng)格，更大的融入了流行元素，如帥哥美女人像與藝術(shù)文字的創(chuàng)意化結(jié)合，扁平化的設(shè)計風(fēng)格等，這樣的設(shè)計不僅體現(xiàn)出活動的層次性，從視覺上營造時尚前沿的感覺，并有效強化品牌特色。

圖標(biāo)導(dǎo)航——

注重視覺上的統(tǒng)一協(xié)調(diào)性

icon圖標(biāo)是品牌設(shè)計中一個重要的環(huán)節(jié)。以半城APP圖標(biāo)導(dǎo)航以及底部的圖標(biāo)導(dǎo)航來說，圖標(biāo)顏色的選擇與主題色一致，都選擇了黃色，加深了用戶對品牌的認(rèn)知，視覺上更加協(xié)調(diào)適配整個APP，體現(xiàn)品牌基調(diào)。所以在配置APP時，圖標(biāo)不管是自己設(shè)計的還是下載的，都請注意它們的統(tǒng)一協(xié)調(diào)性。在設(shè)計圖標(biāo)中加入自己品牌元素，如半城底部導(dǎo)航的“吼吼”圖標(biāo)應(yīng)用他們的吉祥物小餓魔形象，更能進一步發(fā)揮出品牌特性。

熱門推舉 ——

優(yōu)質(zhì)圖片素材搭配也是提升APP顏值的方法之一

優(yōu)質(zhì)的內(nèi)容資訊與精美的圖片素材結(jié)合，也是提升APP整體顏值的方法。半城生活第三版面里抓取的熱門活動列表，對內(nèi)部的圖片處理進行了嚴(yán)格的篩選與編輯，與整體APP的風(fēng)格成一種協(xié)調(diào)的走勢。

從錯誤的示范頁面可以看出，廣告位banner設(shè)計手法老舊，顏色與主題色不協(xié)調(diào)。頁面結(jié)構(gòu)上重下輕，資訊內(nèi)容中的素材圖案不夠美觀，質(zhì)量不高，整體app布局顯得雜亂無章法，從而影響用戶的閱讀體驗。

圈子

1 圈子配置的后臺步驟

圈子就相當(dāng)于用戶興趣集中營，加入一個圈子,就可以在圈子中發(fā)表與圈子主題相關(guān)的內(nèi)容，也可以加上圈子里的話題，進行自我表達。在這里，也可以認(rèn)識與你同樣興趣的好友，進行評論互動。

半城生活的圈子頁面有天氣預(yù)報+半城菠報+半城生活+精選推舉

天氣預(yù)報

設(shè)置天氣預(yù)報操作步驟：：配置→圈子配置→天氣預(yù)報

半城菠報

1、設(shè)置半城菠報：配置→圈子配置→圖片導(dǎo)航

2、編輯半城菠報：點擊圖片導(dǎo)航，組件配置→內(nèi)容配置→添加，依次填入圖片、標(biāo)題、跳轉(zhuǎn)（跳轉(zhuǎn)后的頁面網(wǎng)址）

半城生活

滾動公告里的內(nèi)容可自行設(shè)置，如半城生活設(shè)置的內(nèi)容來源于“全站最新動態(tài)”

1、設(shè)置半城生活：配置→圈子配置→添加組件→滾動公告

2、編輯半城生活：點擊滾動公告，按需求進行編輯。需要注意的是，滾動公告內(nèi)容的來源，在組件配置的內(nèi)容來源中設(shè)置。

不少站長對商家圈表示極大的興趣，但是一直沒太懂商家圈的操作，今天就給大家演示一下。

1、配置商家圈：圈子→所有圈子→商家圈→配置圈子→圈子配置→商家圈

2、編輯商家圈：在關(guān)聯(lián)商家中填入合作的商家，看實際需求新增商家。

對于商家圈中的優(yōu)惠券如何設(shè)置

1、設(shè)置優(yōu)惠券：運營→商業(yè)中心→商家治理 ，對持有優(yōu)惠券的商家選擇治理 。點擊左側(cè)的優(yōu)惠券，對設(shè)置的優(yōu)惠券進行治理 。

2、在優(yōu)惠券治理 的頁面中，點擊“啟用”后，商家圈中展示的商家優(yōu)惠券就可以在頁面顯示了。

2 圈子頁面設(shè)計分析

小面積撞色搭配更出彩

半城生活圈子配置結(jié)構(gòu)分為四欄布局，第一欄為天氣模塊，第二欄為圖片導(dǎo)航，第三欄是滾動公告，第四欄為預(yù)設(shè)的精選推舉 。天氣模塊和滾動公告的配置從視覺上來說為了豐富整體頁面。

以第二欄為主的是圖片導(dǎo)航，半城生活沒有把這里配置為滾動的圖片導(dǎo)航，而是設(shè)計了和品牌色一致的話題版頭式banner圖片，凸顯出專注性，并且和自身運營內(nèi)容保持一致。

第四欄精選推舉 中，雖然沒有設(shè)計成和主題色相同的黃色，運用了彩色樣式的圖標(biāo)，但是絲毫不影響它的協(xié)調(diào)性，色彩上豐富了整個圈子頁面。所以我們建議在大面積配色上注重統(tǒng)一的同時，也要大膽運用小面積撞色搭配來提高頁面層次效果。

公布

1 公布配置的后臺步驟

“公布”是用戶發(fā)表觀點,分享生活的主要陣地，也是UGC的重要來源。

半城生活的“公布”實質(zhì)上也是圈子，在圈子設(shè)置中配置的輕分享圈“吼吼”。主要由熱門話題引入，用戶自己設(shè)置話題，自由表達自己的觀點，參與到討論中去。當(dāng)話題達到熱度后，就可以推舉 到熱門話題中。

操作步驟：圈子→創(chuàng)建新圈子→輕分享→創(chuàng)建，創(chuàng)建了新圈子之后，再配置圈子。

圈子中的話題，根據(jù)需求選擇推舉 或取消推舉 。設(shè)置推舉 的話會在頁面顯示。

很多本地APP也有類似的公布欄目，用戶更新自己的動態(tài)，進行交友互動。

但是很多都較雜亂，也沒有一個良好的分類和治理 。像半城生活這樣，設(shè)置了很多話題供網(wǎng)友選用，類型之多，覆蓋面之廣，滲透到了生活的方方面面。用有意思的話題吸引網(wǎng)友的關(guān)注參與，這也是提高app日活的有效方法之一。

2 頁面設(shè)計原理分析

輕分享話題聚集地

半城生活話題分享圈配置結(jié)構(gòu)分為四欄布局，第一欄版頭的不滾動圖片導(dǎo)航，第二欄推舉 話題文本導(dǎo)航，第三欄可滾動的圖片導(dǎo)航，第四欄輕分享圈朋友圈模式。這樣的配置使整個頁面有一個整體性，引導(dǎo)用戶視覺自上到下，形成一個整體。

首先banner設(shè)計上，畫面內(nèi)容很豐富，顏色的搭配對應(yīng)不同話題風(fēng)格，并結(jié)合了自身的品牌形象。

Banner設(shè)計原則建議：從顏色、設(shè)計的表現(xiàn)風(fēng)格、設(shè)計的統(tǒng)一性上下功夫。根據(jù)自身品牌的定位和運營的方一直 設(shè)計圖片或是找尋素材圖片。（一定要注意顏色的協(xié)調(diào)性）

發(fā)現(xiàn)

1 內(nèi)容配置的后臺步驟

半城生活的“發(fā)現(xiàn)”頁面由圖標(biāo)+活動報名組成

這個可以在APP配置的發(fā)現(xiàn)頁配置，選擇圖標(biāo)導(dǎo)航和圖片導(dǎo)航（不可滾動）

這個原理和首頁的設(shè)置是一樣的。首頁是圖片導(dǎo)航（可滾動），幾張圖片左滑右滑?？磦€人需求而設(shè)置。

圖標(biāo)編輯

操作步驟：配置→發(fā)現(xiàn)頁配置→添加組件→圖標(biāo)導(dǎo)航

活動封面編輯

配置→發(fā)現(xiàn)頁配置→添加組件→圖片導(dǎo)航（不可滾動），點擊圖片導(dǎo)航，在組件配置的內(nèi)容配置中設(shè)置活動的名稱和跳轉(zhuǎn)的頁面網(wǎng)址。

2 發(fā)現(xiàn)頁面設(shè)計分析

根據(jù)運營需求，靈活配置

發(fā)現(xiàn)頁為兩欄布局，圖標(biāo)導(dǎo)航欄和活動列表。這樣的配置更趨于視覺扁平化，能給用戶一種視野開闊的體驗，很適合用在活動列表中。如果你選擇了這樣的配置，作為凸顯活動要素的點擊入口，首先它不能是單調(diào)的一張圖，必須內(nèi)容畫面豐富，吸引用戶的注意力，內(nèi)容的填充和排版要往品牌定義和活動內(nèi)容風(fēng)格上靠攏。

總 結(jié)

總體來說，在運營本地APP的過程中，除了重視內(nèi)容運營、用戶運營、活動運營之外，提升APP的顏值，加強版面視覺效果也是十分重要的。如果你的APP太過簡單，則顯得功能不全，不能滿足用戶的閱讀需求，也自然不能留住用戶的目光。如果你的APP配置得太過繁瑣，顏色也是花里胡哨的，那么用戶也無法在一個輕松的環(huán)境下進行信息的有效獵取 和用戶交流。

這就需要各位運營者在后臺配置的過程中，先明確自身APP的功能和定位，再結(jié)合用戶的日常動態(tài)，抓住用戶需求，從風(fēng)格到內(nèi)容都有一個完整而清楚 的定位。

區(qū)域互聯(lián)網(wǎng)在運營過程中，除了多看多摸索之外，也要善于觀察學(xué)習(xí)同類APP的配置模式，結(jié)合對比，取長補短再去優(yōu)化自己的app。但是，不同的區(qū)域環(huán)境有不同的運營方式，具體操作還要結(jié)合當(dāng)?shù)氐膶嶋H情況、人文特色，在實踐中形成自身獨特的平臺風(fēng)格。