不一樣的移動端那點(diǎn)事:APP、小程序(微信)
編輯導(dǎo)語:在移動端的界面設(shè)計(jì)中,我們要對其中的結(jié)構(gòu)設(shè)計(jì)比較看重,一個(gè)完整的頁面上每個(gè)組件的分布都是很重要的;對于用戶來說,通用性是非常重要的,對于用戶體驗(yàn)的影響也很大;本文作者分享了關(guān)于移動端的設(shè)計(jì)需要注意的點(diǎn),我們一起來了解一下。
很多產(chǎn)品經(jīng)理與設(shè)計(jì)師在設(shè)計(jì)移動端界面的時(shí)候,往往對界面上需要遵循的一些通用性設(shè)計(jì)原則不是十分清楚;而這些通用性或者全局性的規(guī)則對界面設(shè)計(jì)起到了很重要的作用,知道這些不一定會提升用戶體驗(yàn),但是不知道這些很可能會使界面設(shè)計(jì)出現(xiàn)問題。
本文筆者選取了8大熱門APP,整理了一些移動端(APP、小程序)的設(shè)計(jì)規(guī)則,如APP一級頁主結(jié)構(gòu)設(shè)計(jì)、APP二級頁主結(jié)構(gòu)設(shè)計(jì)等,和大家一起來鞏固下移動端設(shè)計(jì)需要了解的知識。
筆者選取的8大熱門APP包括:
- 花瓣(圖片類)
- 肯德基(快餐類)
- 京東(電商類)
- 墨跡(天氣類)
- 微博(社交類)
- 下廚房(烹飪類)
- 知乎(知識類)
- 雪球(資訊類)
01 APP一級頁主結(jié)構(gòu)設(shè)計(jì)
從上圖我們可以發(fā)現(xiàn),APP一級頁主要包括頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。
頂部導(dǎo)航區(qū)通常由搜索條、APP核心操作功能組成。例如對于花瓣APP來說,它是一個(gè)圖片素材工具,它可以幫助用戶發(fā)現(xiàn)自身關(guān)心的事物;因此它在頂部導(dǎo)航區(qū)放了一個(gè)大大的搜索條,來吸引用戶去搜索自己想要的圖片。
對于下廚房APP來說,下廚房是一個(gè)廚師和美食愛好者記錄、分享美食的平臺;因此該平臺的內(nèi)容來自于用戶主動上傳,同時(shí)該平臺鼓勵用戶之間互相分享和交流,所以下廚房頂部導(dǎo)航主要功能為“上傳”、“搜索”和“消息”。
由此可見,APP頂部導(dǎo)航區(qū)的功能設(shè)計(jì)與APP的屬性及核心目標(biāo)有極大的關(guān)系。
中間內(nèi)容區(qū)又分為上、中、下三部分,在APP設(shè)計(jì)中,我們需要考慮重點(diǎn)內(nèi)容前置展示和首屏利用率;例如對于京東APP來說,它是一個(gè)專業(yè)綜合網(wǎng)上購物商城,其銷售超數(shù)萬品牌,它的核心目的就是把越多的商品展示給用戶,并且盡可能的提升用戶的購買率。
因此京東APP的主要內(nèi)容結(jié)構(gòu)由上到下分為分類導(dǎo)航區(qū)(合理的分類,提升用戶查找商品的效率)、營銷區(qū)(千人千面的展現(xiàn),觸達(dá)用戶心智)、金剛區(qū)(頁面核心功能區(qū)域,為重要子板塊分發(fā)內(nèi)容)、各類賣點(diǎn)區(qū)等;而分類導(dǎo)航區(qū)、營銷區(qū)、金剛區(qū)占了首屏一大半的位置,各類賣點(diǎn)區(qū)中的京東秒殺、京東直播、每日特價(jià)等也展示在了首屏。
該類的設(shè)計(jì)模式,提升了用戶的產(chǎn)品觸達(dá)率和轉(zhuǎn)化率。
2014年,Apple提出了一種移動端新的導(dǎo)航模式,即底部標(biāo)簽欄。底部標(biāo)簽欄滿足了用戶我在哪里(一般通過標(biāo)簽高亮的方式反饋)、我可以去哪里(其余標(biāo)簽)的需求。
可以說,底部標(biāo)簽欄不僅是設(shè)計(jì)上的飛躍,更是用戶體驗(yàn)上的進(jìn)步,通常移動端標(biāo)簽欄的導(dǎo)航數(shù)量為2-5個(gè);在筆者統(tǒng)計(jì)的這8個(gè)APP中,基本上在4-5個(gè),這是現(xiàn)在業(yè)內(nèi)最為常用的數(shù)量。
02 APP二級頁主結(jié)構(gòu)設(shè)計(jì)
從上圖我們可以發(fā)現(xiàn),APP二級頁主要包括頂部導(dǎo)航區(qū)和中間內(nèi)容區(qū),底部頁簽欄根據(jù)頁面的實(shí)際情況選用。
APP二級頁的頂部導(dǎo)航區(qū)功能有一個(gè)主要的特征是它通常帶有“返回”按鈕,可以幫助用戶很順利地返回到上一頁;同時(shí)在二級頁導(dǎo)航區(qū)會展示當(dāng)前頁的標(biāo)題,從而讓用戶知道他現(xiàn)在處于哪里。
由于大家在使用APP時(shí)都是右手操作原則,因此在導(dǎo)航區(qū)的右側(cè)區(qū)域通常放置與當(dāng)前頁相關(guān)的操作性功能。
不過,導(dǎo)航具體功能根據(jù)頁面情況,也會有些許差異。例如對于花瓣APP來說,其二級頁頂部導(dǎo)航區(qū)包括返回上一頁、點(diǎn)贊當(dāng)前圖片、分享當(dāng)前圖片和將圖片采集的功能。
對于肯德基APP來說,其二級頁頂部導(dǎo)航區(qū)包括返回上一頁和展示當(dāng)前頁內(nèi)容的標(biāo)題。
APP二級頁的中間內(nèi)容區(qū)根據(jù)產(chǎn)品的目標(biāo)不同而不同,通常來說為相關(guān)內(nèi)容詳情頁、子版塊詳細(xì)展示頁等;例如下廚房APP為一道菜的詳情頁,知乎APP為一篇文章的詳情頁;京東APP為發(fā)現(xiàn)好貨等子板塊的內(nèi)容聚合頁,當(dāng)然如果點(diǎn)擊京東APP首頁的某個(gè)具體商品,也會直接進(jìn)入商品詳情頁。
在APP二級頁中,底部標(biāo)簽欄為非必須。
在花瓣APP中,已經(jīng)將一張圖片的分享、采集、點(diǎn)贊等功能加在了頂部導(dǎo)航區(qū)的右側(cè),因此底部標(biāo)簽欄直接采用了和一級頁一致的標(biāo)簽欄;肯德基APP和京東APP直接取消了底部標(biāo)簽欄;微博APP將針對話題的轉(zhuǎn)發(fā)、評論、點(diǎn)贊功能放在了底部標(biāo)簽欄上。
03 小程序一級頁主結(jié)構(gòu)設(shè)計(jì)
從上圖我們可以發(fā)現(xiàn),小程序一級頁和APP一級頁一致,主要包括頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。
小程序一級頁中的中間內(nèi)容區(qū)和底部標(biāo)簽欄的設(shè)計(jì)思路與APP大同小異,但其底部標(biāo)簽欄有時(shí)候未必有,例如肯德基APP;因?yàn)樾〕绦虍?dāng)初在微信推出來的時(shí)候,就是定義即用即走的,因此小程序通常只承載簡單的功能,幫助用戶完成某一件事件,所以小程序可以沒有底部標(biāo)簽欄;而頂部導(dǎo)航區(qū)的設(shè)計(jì)收到相關(guān)平臺(微信、支付寶、百度等)設(shè)計(jì)規(guī)范的約束,需要遵循一些設(shè)計(jì)規(guī)則。
例如在微信中,微信都會在其右上角放置官方小程序菜單(包括關(guān)閉和更多功能),設(shè)計(jì)者不可對其內(nèi)容自定義,但可選擇深淺兩種基本配色以適應(yīng)頁面設(shè)計(jì)風(fēng)格,樣式如圖。
04 小程序二級頁主結(jié)構(gòu)設(shè)計(jì)
從上圖我們可以發(fā)現(xiàn),小程序二級頁和APP二級頁一致,主要包括頂部導(dǎo)航區(qū)和中間內(nèi)容區(qū),底部頁簽欄根據(jù)頁面的實(shí)際情況選用。
上面說到微信會在小程序一級頁右上角放置官方小程序菜單,那么在二級頁里面也不例外;但二級頁通常還會多一個(gè)返回上一級的按鈕,樣式如圖。
05 APP和小程序設(shè)計(jì)原則
通過對APP和小程序一級頁與二級頁的分析,我們可以總結(jié)出如下通用的設(shè)計(jì)原則。
1. 導(dǎo)航:指引明確
一旦用戶進(jìn)入APP或小程序,作為設(shè)計(jì)者的我們,就有義務(wù)明確地告知用戶他們身在何處、可以去哪里,保證用戶可以快速的在頁面上穿梭;例如對于當(dāng)前頁,需要高亮顯示;對于可以去哪里,在界面上要有清晰的提示。
2. 信息:層級清晰
移動端界面由上至下分別怎么呈現(xiàn)信息,需要非常清晰。
首先,大塊面信息層級為頂部導(dǎo)航區(qū)、中間內(nèi)容區(qū)和底部標(biāo)簽欄。
其次,在頂部導(dǎo)航區(qū)根據(jù)功能不同又從左到右切分為三部分:在中間內(nèi)容區(qū)的信息根據(jù)信息重要層級也需進(jìn)行切分;在底部標(biāo)簽欄的信息根據(jù)主次也要進(jìn)行切分,如下示意圖展示。
信息的層級清晰不僅加快了用戶獲取信息的速度,更加有利于用戶做出合理的決策。
3. 界面 :重點(diǎn)明確
從8個(gè)APP的圖例中我們可以看出,每個(gè)頁面都應(yīng)該根據(jù)其本身需要傳達(dá)給用戶的核心目的來設(shè)計(jì)頁面的重點(diǎn)要素,不應(yīng)該讓頁面上出現(xiàn)與當(dāng)前頁核心目標(biāo)不一致的信息,從而干擾到用戶的決策。
06 APP和小程序組件庫
APP和小程序都是移動端的應(yīng)用,因此它們涉及到的通用組件基本是一致的,筆者為大家總結(jié)了一下,有如下幾種:
- 按鈕
- 開關(guān)
- 選擇器
- 輸入框
- 單選框
- 多選框
- 滑塊
- 倒計(jì)時(shí)
- 表單
- 導(dǎo)航欄
- 標(biāo)簽欄
- 抽屜式導(dǎo)航
- 宮格式導(dǎo)航
- 字母索引導(dǎo)航
- 公告欄
- 上傳
- ……
在本文就不一一列舉了,筆者正在陸續(xù)整理這些通用組件,因此將在之后的文章中為大家詳述組件的用法及給到大家相應(yīng)的設(shè)計(jì)稿。
07 總結(jié)
如今,一款產(chǎn)品需要具備APP和小程序兩端已經(jīng)成為剛需,這樣才能滿足用戶的多樣化訴求;因此,產(chǎn)品經(jīng)理和設(shè)計(jì)師需要多了解移動端設(shè)計(jì)的要求和注意點(diǎn),才能設(shè)計(jì)出一款好的移動端產(chǎn)品。
作者:知果;公眾號:知果日記
本文由 @知果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!