你可能有一個這樣的設計概念：未來的應用將允許你與來自全世界的人討論很多不同的主題。發(fā)布，發(fā)現(xiàn)以及分享您的個人興趣。

那么，如何將此概念設計成一個具有良好體驗的app呢？我們接著學習。

設計流程

下面是我每天如何進行優(yōu)化產(chǎn)品概念或改進的示意圖。

您可以看到設計思維過程不一定是線性的。同理心（Empathize）涉及整個項目，允許將自己置于用戶的位置，以提高用戶友好性。

我的設計過程

首先，我嘗試對這個應用概念相類似的產(chǎn)品進行借鑒參考，然后想象出一個混合了多個應用的接近功能的感念。

然后，我用日常手表做研究。我尋找的應用或網(wǎng)站提出的概念接近于簡要中要求的概念。我想了幾個應用或網(wǎng)站的混合，以便研究這些想法。將應用的“大圖”可視化是很重要的，然后會在以后的設計過程中進行改進。

尋找靈感

1，Pinterest的“引導頁”設計，您可以在注冊后選擇喜歡的主題。

2，Snapchat用于水平和垂直的導航設計。

3，論壇或新聞app的輕量級主題列表（Designers news，Sidebar.io，stackoverflow.com，tomsguide.fr/forum/，dropboxforum.com）

4，Fubiz的設計風格和照片展示。

5，Product Hunt的按鈕，提出有趣的主題。

6，Slack的對話部分。

然后，我決定看看競爭對手。我在幾個國家AppStore上尋找靈感，我下載了與以下關(guān)鍵詞相關(guān)的所有app：“論壇，社區(qū)，公共聊天，討論，聊天組”。

根據(jù)競爭分析，我注意到大多數(shù)應用在設計體驗方面非常相似，而且在內(nèi)容方面也是類似。

分析

設計：設計簡單而純粹，但看起來常常像論壇風格，常被認為是一個支持的工具，而不是一個愉快的聊天應用。

經(jīng)驗：我喜歡在這方面進行創(chuàng)新，這對我來說是一個應用的主要部分。

以下是我希望改善體驗的要點：導航，互動，動畫和UI動效，UI聲音，藝術(shù)方向。

內(nèi)容： “論壇風格”方法顯示已發(fā)布的內(nèi)容。產(chǎn)生的對話主要是解決問題，這意味著很多人使用這種類型的應用來獲得支持，但不要將它用于相互支持，因此許多問題仍然沒有答案。

有趣的是，有不同的興趣，它不是一個專業(yè)的社區(qū)，這意味著我們可以圍繞熱門話題進行對話。如果團隊圍繞熱門話題為社區(qū)制作動畫，則用戶可以就不同主題交換他們的觀點。

我決定采用不同的方法。我的目標是使應用具有建設性，用戶使用它來閱讀和了解不同對話主題的其他觀點，同時也可以添加自己的對話主題。用戶必須認為該應用是為他制作的，這樣他才能讓自己接受他喜歡的不同主題。

形成概念

我想給應用一個名字，所以我把它稱為“ zone ”，意思是“空間”。

在法語中，我們也可以說一個“ 對話區(qū) ”來談論人們討論的空間。我發(fā)現(xiàn)這很有趣，簡短，令人難忘和國際化。

由于有多個頻道和子類別，我想通過圖片而不是圖標來說明不同的主題，因為圖標不夠精確。我在Unsplash上??使用了幾個圖像來突出顯示聊天頻道。

一些照片來說明頻道

除此之外，我認為用戶必須進行最少的選擇，以便他的體驗更有趣，并在應用上增加更多活動。

流程圖和線框圖

下面的方案代表了應用的不同頁面。我有意減少頁面數(shù)量以獲得更好的互動體驗，并將主頁置于應用程序的中心。

繪制功能流程

我使用元素動畫制作了水平和垂直導航，只需使用滑動即可顯示更多內(nèi)容。

垂直導航可以顯示多個選項，例如設置和配置文件。水平導航可以改變頻道?；瑒訉⒏又庇X和快速，并且使用戶可以僅用一只手進行導航。

快速線框圖

通過單擊主題或向上滑動，可以打開內(nèi)容列表，同時顯示篩選帖子的菜單。

這個想法是讓用戶根據(jù)他的意愿（趨勢，熱門，最近，標簽，日期......）對帖子列表進行排序，從而避免突出顯示某些對話而不是其他對話。

Twitter激發(fā)了我對“列表”方面的啟發(fā)，因為我不想強迫用戶發(fā)布圖片來說明他們的對話。這會抑制言論，并有助于限制劣質(zhì)圖片。

界面設計

我在Sketch App中設計了“主頁”屏幕的幾個部分。

同時，我設計了嵌套符號。您可以使用嵌套符號來節(jié)省時間并改善工作流程。

創(chuàng)建嵌套符號（組件）

每個討論主題包括 ：

- 討論標題

- 子類別標簽

- 一個upvote按鈕

- 一個約會

- 討論的人數(shù)

- 媒體（可選）

符號允許您輕松地重復使用元素

UI交互原型設計

然后我使用“Principle App”來制作動畫和UI交互的原型。我根據(jù)垂直和水平滾動制作了幾個動畫組件。

來看看新的應用“zone”

導航

第一主頁面是用表示主題的全屏圖片的類別列表。圖片根據(jù)頻道的變化而變化。

在這個首頁面可以訪問：

1. 不同的設置（通知，帳戶，語言，本地化......）
2. 您的個人資料（頻道跟蹤，討論創(chuàng)建，數(shù)據(jù)，舊通知，個人信息）
3. 一個按鈕開始討論
4. 用于查找討論或頻道的搜索功能
5. 推送通知，當有人評論討論時發(fā)出通知
6. 允許訪問對話的頻道列表

我想象一個動畫效果，可以縮小背景，在這個屏幕上創(chuàng)建一些視角。通過單擊某個主題或向上滑動，我們可以載入所選??類別，該頁面顯示會話列表，篩選器。

滾動轉(zhuǎn)換

不要因為圖標位置改變而打擾用戶，我刪除了第一個屏幕的底欄，并在第二個屏幕右上方添加了一個圖標來說明“開始討論”。頂部欄由最重要的元素（搜索，通知，添加討論），必須始終可見。

為了讓閱讀有更好的舒適度和沉浸感（全屏），我故意沒有在應用設計中添加任何導航欄。

通過滑動進行水平切換頻道

我們可以水平切換來查看其他頻道，其余內(nèi)容（頂部欄和過濾器）仍然可以不動。背景圖片“淡化”的改變，提示已切換頻道。

我們可以在列表中滾動并擴展以顯示更多的對話，UI元素交互并且背景消失。

滾動頻道中的轉(zhuǎn)換

為了強調(diào)類別中的縮放效果，我屏蔽了狀態(tài)欄，當我們滾動一個類別時，會話卡也可以縮放以占據(jù)屏幕的整個寬度。

通過滾動類別，類別標題會上升以顯示更多對話。小圓點向用戶指示我們可以水平滑動切換以更改類別，并且通知組件（如果它處于活動狀態(tài)）向右移動。