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

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

就拿首頁(yè)UI配置來(lái)說(shuō)，馬甲APP提供了 9 種不同的運(yùn)營(yíng)位組件，不同的運(yùn)營(yíng)位可以重復(fù)調(diào)用，隨意排列，以滿足不同站點(diǎn)的展示需求?？墒蔷驮谶@幾種運(yùn)營(yíng)位的擺放之后，APP之間的差距已逐漸拉開。

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

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

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

首頁(yè)

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

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

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

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

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

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

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

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

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

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

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

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

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

首頁(yè)主圖——

看顏的時(shí)代，第一印象尤其重要！

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

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

所以在選擇APP的主題色時(shí)，我們要思考如何選擇適合自己APP類型定位的顏色。之所以半城生活配置給人賞心悅目的感覺(jué)，是因?yàn)閍pp的配圖和主題顏色的搭配很和諧。

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

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

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

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

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

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

熱門推舉 ——

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

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

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

圈子

1 圈子配置的后臺(tái)步驟

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

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

天氣預(yù)報(bào)

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

半城菠報(bào)

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

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

半城生活

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

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

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

不少站長(zhǎng)對(duì)商家圈表示極大的興趣，但是一直沒(méi)太懂商家圈的操作，今天就給大家演示一下。

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

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

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

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

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

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

小面積撞色搭配更出彩

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

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

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

公布

1 公布配置的后臺(tái)步驟

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

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

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

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

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

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

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

輕分享話題聚集地

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

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

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

發(fā)現(xiàn)

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

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

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

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

圖標(biāo)編輯

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

活動(dòng)封面編輯

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

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

根據(jù)運(yùn)營(yíng)需求，靈活配置

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

總 結(jié)

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

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

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