UI設(shè)計(jì)中首頁設(shè)計(jì)指南

　　一款好的APP產(chǎn)品，其首頁設(shè)計(jì)不僅能清晰展示產(chǎn)品核心功能、特點(diǎn)，有著較好的用戶體驗(yàn)，還能展示公司的品牌形象，提升用戶品牌認(rèn)知度。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中首頁設(shè)計(jì)指南進(jìn)行簡單的說明。
 

　　APP首頁設(shè)計(jì)至關(guān)重要，作為最重要的模塊，它的產(chǎn)品設(shè)計(jì)和運(yùn)營，會(huì)對(duì)公司業(yè)務(wù)產(chǎn)生關(guān)鍵影響。首頁改版，舉足輕重，是產(chǎn)品經(jīng)理的一大難題。
 

　　首頁的作用是什么?
 

　　1、承擔(dān)了產(chǎn)品最核心的功能，決定了產(chǎn)品的屬性和基調(diào);
 

　　2、體現(xiàn)產(chǎn)品的“骨骼”(產(chǎn)品架構(gòu))，以方便用戶快速進(jìn)入對(duì)應(yīng)的需求模塊;
 

　　3、展示公司的品牌形象，強(qiáng)化在用戶心中的品牌認(rèn)知度。

 

　　如：典型電商產(chǎn)品淘寶，導(dǎo)航的百度地圖，明確產(chǎn)品最核心功能。
 

　　首頁展示核心功能
 

　　產(chǎn)品核心功能就是解決用戶核心問題，因此，首頁一定要展示產(chǎn)品的核心功能點(diǎn)。
 

　　如1，用戶使用12306就是為了購買火車票，因此查票買票時(shí)最核心的功能。
 

　　如2，用戶使用Booking是為了預(yù)定酒店，因此查詢酒店、預(yù)定酒店就是最核心的功能。

 

　　如何把一個(gè)首頁設(shè)計(jì)好?
 

　　一、遵循產(chǎn)品類型的行業(yè)習(xí)慣
 

　　1、先確定產(chǎn)品類型
 

　　不同產(chǎn)品類型，功能內(nèi)容不同，首頁展示也不同，核心上的業(yè)務(wù)路徑一定是最短的。
 

　　互聯(lián)網(wǎng)多年的發(fā)展已經(jīng)讓用戶培養(yǎng)了固有的習(xí)慣，不要輕易顛覆用戶的認(rèn)知。
 

　　1.1 平臺(tái)導(dǎo)流型首頁
 

　　宮格布局，精簡核心功能。
 

　　這種布局可以在一屏內(nèi)為用戶呈現(xiàn)更多的入口，引導(dǎo)用戶快速進(jìn)入二級(jí)頁面以便起到分流作用。
 

　　比如：支付寶APP、微信支付、攜程APP

 

　　宮格設(shè)計(jì)注意點(diǎn)：
 

　　每個(gè)入口可展示出來的信息比較少，并且主次之分不清晰，當(dāng)數(shù)量太多時(shí)，用戶是不能在短時(shí)間內(nèi)定位的，這就要求入口的位置需要鎖定，用戶后期可根據(jù)位置來記憶，這點(diǎn)和手機(jī)桌面的位置有異曲同工之妙。
 

　　1.2 消費(fèi)內(nèi)容型APP首頁設(shè)計(jì)
 

　　產(chǎn)品的內(nèi)容形態(tài)比較相似，可以讓用戶在首頁無限加載內(nèi)容，一般使用瀑布流，feed流的形式布局。給到用戶內(nèi)容豐富的體驗(yàn)，提高用戶粘性和活躍度。
 

　　比如：花瓣、唯品會(huì)、站酷

 

　　1.3 即時(shí)通訊型首頁
 

　　大多數(shù)使用列表的展示方式，這種布局方式由于統(tǒng)一的信息樣式，至上而下的瀏覽方式，可以快速過濾信息，提高效率。
 

　　最上面的永遠(yuǎn)是最新的消息框，符合用戶潛在認(rèn)知。
 

　　比如：微信、QQ、短信

 

　　1.4 地圖導(dǎo)航首頁
 

　　這?類基本都是以地圖為主要功能點(diǎn)的APP，設(shè)計(jì)特點(diǎn)鮮明。
 

　　1、??70%-90%的空間用以展示地圖和當(dāng)前位置
 

　　2、核?功能的操作凸顯
 

　　比如：滴滴打車、?德地圖、百度地圖等。

 

　　小結(jié)：首頁基礎(chǔ)布局框架
 

　　二、與品牌調(diào)性相符

 

　　淘寶，普遍的大眾跳蚤市場，傳統(tǒng)常規(guī)
 

　　閑魚，主打有個(gè)性的年輕市場，設(shè)計(jì)清爽、逗逼、接地氣
 

　　嚴(yán)選，解決追求文藝生活客戶需求，操作都化繁為簡，視覺也相對(duì)簡潔明了，符合嚴(yán)選的產(chǎn)品定位
 

　　D2C，集潮流風(fēng)尚、前沿藝術(shù)、個(gè)性設(shè)計(jì)為一體的設(shè)計(jì)師平臺(tái)，整體風(fēng)格簡潔，布局留白大方，線條細(xì)膩，大圖落落大方。
 

　　綜上所述，品牌的定位決定了產(chǎn)品的調(diào)性，設(shè)計(jì)傳達(dá)品牌價(jià)值。
 

　　1、 設(shè)計(jì)如何傳達(dá)品牌?

 

　　1.1 產(chǎn)品定位
 

　　明確產(chǎn)品愿景定位，為用戶提供什么價(jià)值，了解用戶特征，延伸品牌價(jià)值觀。
 

　　1.2 設(shè)計(jì)主張
 

　　什么是設(shè)計(jì)主張，簡單來說就是一個(gè)人的性格和特點(diǎn)，我們身邊每天接觸那么多人，哪些人能給你留下印象深刻呢?可愛的，還是有氣質(zhì)的，產(chǎn)品和人一樣都需要有性格，從而才能設(shè)計(jì)有感情的設(shè)計(jì)。
 

　　2、 一個(gè)有感情設(shè)計(jì)如何構(gòu)成?

 

　　設(shè)計(jì)理念：基于產(chǎn)品用戶特征，延伸產(chǎn)品文化內(nèi)涵或風(fēng)格特點(diǎn)
 

　　視覺形象：以產(chǎn)品LOGO為基礎(chǔ)圖形，演繹色彩系統(tǒng)
 

　　設(shè)計(jì)語言：符合產(chǎn)品基調(diào)，如黑白對(duì)比、留白手法、極簡手法等流行的設(shè)計(jì)語言
 

　　行為體驗(yàn)：流暢交互方式、整體用戶行為流程設(shè)定，以及在使用過程中感受
 

　　內(nèi)容傳達(dá)：產(chǎn)品文案語境、文字信息，如有愛的錯(cuò)誤提示、感同深受反饋語言等。
 

　　總結(jié)
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。