您的位置:首頁>設計>正文

社區APP「豆瓣」原型分享

文/Sophia發佈於1小時前閱讀580評論0喜歡1

閱讀580

標籤:

原型設計高保真原型

豆瓣, 我們的精神角落, 它好似繁雜的互聯網世界裡一個精神烏托邦似的存在著。 豆瓣利用‘興趣’把大家聚集起來, 形成社區, 提供圖書、電影、音樂唱片的推薦、評論和價格比較, 以及城市獨特的文化生活, 在網路中, 為我們每個人的精神世界留了一片帶有獨特氣息的土地。 不知道看什麼電影了, 打開豆瓣!想看書了, 打開豆瓣!每每看完一部作品, 總會想要來豆瓣上再看看影評、看看書評, 跟著大家的分享再次回味其中的內容, 也常常能從中看到自己所沒有觸及的更深的思考。

今天我們給大家分享的就是豆瓣APP原型範本以及元件庫、頁面庫, 有高保真和低保真兩個版本, 其中包含了以【書影音】為核心的各流程頁面, 裡面所有元件都可以自由修改。 下面我們將本套原型中所含頁面按照內容的呈現方式和作用分為5大類進行說明:

聚合頁

聚合頁往往出現在APP的首頁或發現頁, 一個頁面呈現了多個版塊內容的集合。 將不同版塊內容的標題或部分內容呈現在在同一個頁面, 為使用者提供更直觀的功能入口, 讓用戶能快速定位到自己感興趣的地方。

在這套範本中我們提供了8個聚合頁面, 根據版塊的重要程度和性質, 不同內容版塊以分類圖示、橫向滑動清單、圖文資訊、宮格、banner、文字標題等多種佈局方式組織形成,

大家在自己APP的聚合頁中也可以參考以上方式。

列表頁

一個APP中大多數頁面都是清單頁, 用於展示多項同類資訊, 並常常會提供排序或篩選等方式來説明使用者根據不同條件選擇資訊。

列表頁佈局往往有圖文混排、純文字、圖片清單、宮格、卡片等多類不同形式。

在本套範本中最常用到的是豎排圖文列表:

內容詳情頁

內容詳情頁, 展示某項內容的詳細資訊, 比如商品詳情、文章詳情、個人主頁等等, 通過全面而豐富的資訊來進一步對內容進行說明。

內容詳情頁是一個APP中最難設計的幾個頁面之一, 它承載了很多層次的資訊, 如何向使用者展示內容的核心價值, 帶給用戶良好的閱讀體驗是產品經理需要認真考慮的問題。

在豆瓣的原型範本中, 包含了大量的內容詳情頁。 文章詳情、電影詳情、音樂詳情、作者詳情、小組詳情等等, 有很多值得參考之處。

發佈頁

發佈頁主要用於用戶發表自己的想法、評價等等。 這類頁面通常內容相對簡單, 聚焦于表單本身, 通過精簡頁面內容來讓使用者專心填寫發佈的內容, 同時也會提供一些待選項來説明使用者更快地更精准地完成輸入。

我們的範本中包含了寫筆記、評分、打標籤等發佈功能:

功能頁

功能頁是指承載某項特殊功能的頁面, 比如APP的搜尋網頁面等。

原型展示(高保真和低保真兩個版本) 部分原型動態預覽組件庫展示 利用元件庫搭建頁面

1. 引用元件庫(元件庫位址)

2. 如上圖所示,點擊引用後,元件庫即成為自己的引用資源(庫內的資源也會即時更新),大家可在專案中使用,快速搭建自己的頁面:

資源地址

高保真原型預覽:豆瓣高保真原型

低保真原型預覽:豆瓣低保真原型

歡迎大家對我們的原型提出建議,對後面分享內容有哪些期待和想法也可以跟我們交流喲!

文/Sophia(知乎專欄:xiaopiu工坊)

部分原型動態預覽組件庫展示 利用元件庫搭建頁面

1. 引用元件庫(元件庫位址)

2. 如上圖所示,點擊引用後,元件庫即成為自己的引用資源(庫內的資源也會即時更新),大家可在專案中使用,快速搭建自己的頁面:

資源地址

高保真原型預覽:豆瓣高保真原型

低保真原型預覽:豆瓣低保真原型

歡迎大家對我們的原型提出建議,對後面分享內容有哪些期待和想法也可以跟我們交流喲!

文/Sophia(知乎專欄:xiaopiu工坊)

Next Article
喜欢就按个赞吧!!!
点击关闭提示