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

那么，如何將此概念設(shè)計(jì)成一個(gè)具有良好體驗(yàn)的app呢？我們接著學(xué)習(xí)。

設(shè)計(jì)流程

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

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

我的設(shè)計(jì)過程

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

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

尋找靈感

1，Pinterest的“引導(dǎo)頁”設(shè)計(jì)，您可以在注冊(cè)后選擇喜歡的主題。

2，Snapchat用于水平和垂直的導(dǎo)航設(shè)計(jì)。

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

4，Fubiz的設(shè)計(jì)風(fēng)格和照片展示。

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

6，Slack的對(duì)話部分。

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

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

分析

設(shè)計(jì)：設(shè)計(jì)簡(jiǎn)單而純粹，但看起來常常像論壇風(fēng)格，常被認(rèn)為是一個(gè)支持的工具，而不是一個(gè)愉快的聊天應(yīng)用。

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

以下是我希望改善體驗(yàn)的要點(diǎn)：導(dǎo)航，互動(dòng)，動(dòng)畫和UI動(dòng)效，UI聲音，藝術(shù)方向。

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

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

我決定采用不同的方法。我的目標(biāo)是使應(yīng)用具有建設(shè)性，用戶使用它來閱讀和了解不同對(duì)話主題的其他觀點(diǎn)，同時(shí)也可以添加自己的對(duì)話主題。用戶必須認(rèn)為該應(yīng)用是為他制作的，這樣他才能讓自己接受他喜歡的不同主題。

形成概念

我想給應(yīng)用一個(gè)名字，所以我把它稱為“ zone ”，意思是“空間”。

在法語中，我們也可以說一個(gè)“ 對(duì)話區(qū) ”來談?wù)撊藗冇懻摰目臻g。我發(fā)現(xiàn)這很有趣，簡(jiǎn)短，令人難忘和國際化。

由于有多個(gè)頻道和子類別，我想通過圖片而不是圖標(biāo)來說明不同的主題，因?yàn)閳D標(biāo)不夠精確。我在Unsplash上??使用了幾個(gè)圖像來突出顯示聊天頻道。

一些照片來說明頻道

除此之外，我認(rèn)為用戶必須進(jìn)行最少的選擇，以便他的體驗(yàn)更有趣，并在應(yīng)用上增加更多活動(dòng)。

流程圖和線框圖

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

繪制功能流程

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

垂直導(dǎo)航可以顯示多個(gè)選項(xiàng)，例如設(shè)置和配置文件。水平導(dǎo)航可以改變頻道。滑動(dòng)將更加直覺和快速，并且使用戶可以僅用一只手進(jìn)行導(dǎo)航。

快速線框圖

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

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

Twitter激發(fā)了我對(duì)“列表”方面的啟發(fā)，因?yàn)槲也幌霃?qiáng)迫用戶發(fā)布圖片來說明他們的對(duì)話。這會(huì)抑制言論，并有助于限制劣質(zhì)圖片。

界面設(shè)計(jì)

我在Sketch App中設(shè)計(jì)了“主頁”屏幕的幾個(gè)部分。

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

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

每個(gè)討論主題包括 ：

- 討論標(biāo)題

- 子類別標(biāo)簽

- 一個(gè)upvote按鈕

- 一個(gè)約會(huì)

- 討論的人數(shù)

- 媒體（可選）

符號(hào)允許您輕松地重復(fù)使用元素

UI交互原型設(shè)計(jì)

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

來看看新的應(yīng)用“zone”

導(dǎo)航

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

在這個(gè)首頁面可以訪問：

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

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

滾動(dòng)轉(zhuǎn)換

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

為了讓閱讀有更好的舒適度和沉浸感（全屏），我故意沒有在應(yīng)用設(shè)計(jì)中添加任何導(dǎo)航欄。

通過滑動(dòng)進(jìn)行水平切換頻道

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

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

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

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

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