每日要聞

11個案例告訴你,編輯類App首頁設計怎么做

各類APP根據自身產品調性不同,首頁設計也不盡相同。編輯類App怎么設計一個還不錯的首頁?本文作者結合11個案例對此進行了分析探究,與大家分享。最近看編輯類的App比較多,發現這類App的首頁各不相同。

各類APP根據自身產品調性不同,首頁設計也不盡相同。編輯類App怎么設計一個還不錯的首頁?本文作者結合11個案例對此進行了分析探究,與大家分享。

11個案例告訴你,編輯類App首頁設計怎么做

最近看編輯類的App比較多,發現這類App的首頁各不相同。有簡潔的,只有相機和相冊的入口;也有比較復雜的,展示模版的瀑布流;也有的是組合型的,既有功能入口也有模板瀑布流。

產品類型、產品的核心功能、產品調性、產品版本不同,編輯類的App的首頁也有所不同。

想要設計一個還不錯的編輯類App的首頁,可以參考下面的11個案例。

01 功能眾多,可以采用圖標型或者卡片型

天天P圖是采用的圖標型。首頁結構非常簡單,Banner+圖標+相機入口,商店和設置放置底部兩側。

美圖和天天P圖的結構比較類似:Banner+卡片+相機入口。底部兩側是美圖DIY和社區。右側頂部是商店和個人中心。

這種布局和結構的特點是高度剛好一屏,優點是:比較簡潔、功能可以一覽無余。

11個案例告訴你,編輯類App首頁設計怎么做

02 功能特別多的,也可以采用卡片宮格形式。

FaceFun和Selfie Tune功能特別多,所以采用了卡片宮格的方式。

這種卡片宮格,帶有配圖,所以比圖標更加直觀。特別是Selfie Tune的配圖還是動態的,直接演示了產品功能,讓人有點擊欲望。

11個案例告訴你,編輯類App首頁設計怎么做

03 資源羅列型

編輯類的App一般會有比較多的素材資源,比如濾鏡、貼紙、特效等。如果資源比較特別和豐富,就可以像下面幾個App一樣,把資源羅列到首頁。

illus和Amaze Cam是中間tab分類的方式,羅列素材資源。

11個案例告訴你,編輯類App首頁設計怎么做

除了這種tab羅列資源的形式,還有一種上下羅列資源分類的形式。

11個案例告訴你,編輯類App首頁設計怎么做

所有的資源中,模版是一種比較特別的資源。

因為模版一般是幾種資源的集合,這些資源組合成為一個比較成熟的作品。用戶只要替換圖片和文字,就可以形成自己的作品,非常簡單。有些App的核心就是模版,所以首頁通常是模板和分類的羅列。

分類:有上下羅列分類的,也有頂部或者底部tab的方式。

模板:羅列方式有的是瀑布流,也有的是大圖卡片。

具體可以見下面的Story類型的App:

11個案例告訴你,編輯類App首頁設計怎么做

04 作品羅列型

有的App是把作品精選放到首頁,這類App的作品有些是編輯自己制作的,比如VOUN;也有些是用戶提交,編輯精選的,比如SuperFX;也有些是用戶自己發布的,比如美拍。

這個類型的App因為制作好看的作品集的成本比較低,操作比較簡單,所以放作品集。一方面讓用戶覺得自己也是可以把作品做的這么有趣和好看的,增強用戶的信心。另外一方面,用戶的作品展示出來被看到被點贊,也讓用戶有成就感,形成良性循環。

11個案例告訴你,編輯類App首頁設計怎么做

05 「我的作品」即歷史記錄,作為首頁。

比如Unfold,就是用歷史記錄作為首頁。如果沒有制作過,那么首頁有占位圖或者是有提示,讓用戶去創作。

11個案例告訴你,編輯類App首頁設計怎么做

06 首頁只有相機和相冊的入口

首頁只有相機和相冊兩個入口。這類App特別的簡潔,只有相機和相冊兩個入口,聚焦在導入圖片上面。

11個案例告訴你,編輯類App首頁設計怎么做

07 相冊作為首頁

相冊作為首頁。這類App的首頁就是自定義的相冊。選擇圖片和視頻,就進入到下一步。

11個案例告訴你,編輯類App首頁設計怎么做

08 相機作為首頁

這類App的首頁是相機。相機頁面有很多的功能。

11個案例告訴你,編輯類App首頁設計怎么做

09 首頁只有一個按鈕入口

這類App在首頁只有一個按鈕作為入口,點擊後進入到相冊頁面。

11個案例告訴你,編輯類App首頁設計怎么做

10 文章列表作為首頁

炫影的首頁比較特別,是以文章列表作為首頁。這些文章點擊進去是圖文結合,介紹具體素材的。

列表是用大卡的形式羅列,布局有些像蘋果的App Store。

不過這是迭代後的版本,之前的版本不是這個樣式。不過目前的樣式看起來也比較簡單舒適,比較適合炫影的風格。同時承載了素材介紹,活動運營多種功能,也是比較實用的。

11個案例告訴你,編輯類App首頁設計怎么做

11 首頁只有選擇尺寸的入口

Story Swag是用尺寸作為入口。可以選擇Story尺寸也可以選擇Square尺寸。這個不是特別的主流,大家也可以稍微看下。

11個案例告訴你,編輯類App首頁設計怎么做

以上的這11個案例,介紹了市場上,比較主流的編輯類App的首頁設計方式。沒有最好的首頁,只有最適合的首頁。大家可以根據自身的產品類型、產品的核心功能、產品調性、產品版本等選擇性的參考。

#專欄作家#

熊不知;公眾號:熊不知(ID:xiongbuzhia),人人都是產品經理專欄作家。5年產品經理經驗,專注海外社交APP和編輯工具類APP的產品設計。

本文原創發布於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。


精彩評論

暫無~


相關文章

華為手機麒麟處理器使用率飆升 高通處理器比例同比繼續下降

在制定發展戰略中有能力的科技巨頭都在研發自己的處理器,同時這些科技巨頭也在逐漸提高自有處理器使用率。

貴陽中高端消費再添生力軍 全省首家最大規模跨境電商平台即將開業

核心提示:貴陽市綜合保稅區進口商品保稅展示暨跨境電商體驗消費周即將開幕之際,記者又從貴陽綜保區獲悉好消息——全省首家最大規模跨境電商平台「 ”G7保稅廣場”將落戶貴陽市觀山湖區,並將於1月18日正式與消費者見面。

九機COO陳鴻傑:手機不會消亡,活下來的是零售服務能力強的人

​△ 九機科技COO.陳鴻傑2020年,數字化賦能和標准化升級,對於手機連鎖而言,既是風口,也是必須

危中有機——那些在「 ”非典”中實現逆襲的知名企業

在這場非典的背後,卻發生着一些不大為眾人知的故事,有一些我們現在耳熟能詳的知名企業,就把那場SARS事件變成了一次難得的歷史機遇,進而實現了華麗轉身。

Σco領導力 | ThoughtWorks攜手華為,能力互補,共築生態黑土地

——本文作者李超說起ThoughtWorks可能很多人並不陌生,其是一家全球軟件設計與定制領袖企業,ThoughtWorks在十四個國家成立分公司,聘用6000名行業精英,通過全球資源共享和人才交流服務全球高端客戶。

亞馬遜科技大作,全球最新車載語音助手,可遠程指揮家里開燈

自從2019年11月以來,就有很多網友猜測和分析亞馬遜在汽車行業的動態,而現在亞馬遜終於進行了回應,在展會上推出了公司的最新科技產品。

第十二屆電子信息產業標准推動會暨信息技術服務標准年會(2020)在京召開

2020年1月9日,由中國電子工業標准化技術協會、中國電子技術標准化研究院、中關村科技園區管委會共同主辦的第十二屆電子信息產業標准推動會暨信息技術服務標准年會在北京召開。

「八節課搞定C++基礎」1.初識C++

1.6標識符命名規則作用:C++規定給標識符命名時,有一套自己的規則標識符不能是關鍵字標識符只能由字母、數字、下劃線組成第一個字符必須為字母或下劃線標識符中字母區分大小寫建議:給標識符命名時,爭取做到見名知意的效果,方便自己和他人的閱讀

SpringBoot SpringMVC框架正式環境、測試環境、開發環境配置

Spring框架正式環境、測試環境、開發環境劃分本文主要介紹通過配置實現Spring項目正式環境、測試環境、開發環境打包第一部分

做數據分析為什么一定要學R語言?

R已證明自己是不斷成長的大數據領域的一個有用工具,並且已集成到多個商用包中,比如

Copyright 每日要聞 © 2020