靜電說：潮汐是我非常喜歡的一個催眠，冥想和專注類的應(yīng)用。我喜歡它的簡潔易用，溫柔舒緩的配色和風(fēng)格以及優(yōu)質(zhì)的音頻內(nèi)容。對于工具類的應(yīng)用，我們也需要有場景化設(shè)計的意識。

用戶具體會在怎樣的場景下使用你的產(chǎn)品，這一點非常重要。

使用場景分析
潮汐的使用場景主要為：1. 需要專注學(xué)習(xí)或者工作，拒絕手機(jī)繁雜信息的干擾的時候? ?2.失眠，需要放松和引導(dǎo)睡眠? 3. 勞累狀態(tài)，需要專注冥想，拒絕打擾。

因此，總結(jié)出的場景和功能如下

場景狀態(tài)分析
場景確定后，我們需要思考，這樣的場景下，會出現(xiàn)怎樣的情景。比如，冥想狀態(tài)，舒緩溫柔的音樂，白噪音，純凈的雨聲，風(fēng)聲，海浪聲等等。就像我們獨自坐在一片安靜的森林中，或者獨自做在微風(fēng)吹過的海邊。

而睡眠狀態(tài)，則需要溫柔的燈光，耳邊傳來的輕聲低語，舒適的床和被褥。
專注狀態(tài)則需要避免不必要的各類信息來打擾我們，讓我們分心。


首頁設(shè)計
潮汐的首頁會根據(jù)當(dāng)前的時間適配不同的場景內(nèi)容，比如現(xiàn)在時間是早上，則為你匹配早上可能做的內(nèi)容，早上你可能會進(jìn)行工作等等，這個時候首頁會推送如何提升效能，讓你自身專注的聲音。而首頁設(shè)計采用大背景（視頻）與卡片按鈕相結(jié)合的形式進(jìn)行。

左右滑動可以切換不同風(fēng)格的虛擬場景的音樂

首頁定制模塊
像潮汐這類應(yīng)用，定制化個性化非常重要，我們可以直接在首頁點擊定制自己需要的模塊，潮汐會針對我們的訴求進(jìn)行個性化的推送。

請注意，潮汐的定制模塊的圖標(biāo)，均采用低飽和度的顏色，更簡單的風(fēng)格來塑造，圖標(biāo)避免復(fù)雜，因為過于復(fù)雜的圖標(biāo)會帶來人腦的信息過載。這一點需要特別注意。另外，大卡片的選擇框，減少定制的時候多步驟給用戶的困擾，都需要設(shè)計師特別進(jìn)行考量。

探索模塊-配圖及其重要
探索模塊是潮汐的重頭戲，也是我最喜歡的界面。在探索模塊中，潮汐采用異常簡潔的設(shè)計風(fēng)格，沒有過多的修飾。要說大家都是這么簡潔的風(fēng)格，為什么潮汐的反而更別致，更舒服呢？

潮汐的設(shè)計師對于每一張配圖都進(jìn)行了特別的選擇和處理。大家可以注意這些圖片的內(nèi)容，普遍內(nèi)容溝通簡單，背景素凈，同時，飽和度盡量壓低，不用艷麗的彩色去表現(xiàn)，這樣符合用戶的訴求：舒緩，不刺激，催眠，安穩(wěn)。同時，簡單的圖片不會讓用戶的大腦信息過載，引起煩躁情緒。靜電將這些圖片全部摘出來給大家：

我們發(fā)現(xiàn)，這些圖片大部分都采用抽象的設(shè)計，比如嫉妒，焦慮這些，它不會使用一些人物的，特別直觀的來表現(xiàn)，而是使用及其抽象的圖形去展現(xiàn)，給人極度的視覺統(tǒng)一感。

我的模塊-會員變現(xiàn)
我的模塊是幾乎所有應(yīng)用的標(biāo)配，它承載了跟個人有關(guān)的應(yīng)用的全部功能。設(shè)計風(fēng)格上，從截圖看，我們會覺得有點發(fā)灰，但是手機(jī)端卻表現(xiàn)良好。這種加有一些灰度的背景，顏色確實是很難去調(diào)的，一旦調(diào)不好就會發(fā)灰，顯得臟。潮汐其實也是希望去降低飽和度，所以才這么去做。這是它整個應(yīng)用的風(fēng)格，這需要設(shè)計師良好的配色基本功。

從上到下，它分為“用戶名與頭像區(qū)域”，“會員區(qū)”，“目標(biāo)統(tǒng)計”，“個人功能欄”四塊。

我們發(fā)現(xiàn)，潮汐這樣的工具類應(yīng)用，吸引用戶的一個重要的點就是它優(yōu)質(zhì)的內(nèi)容，這也是此類人群非常關(guān)注的要點，一旦沒有優(yōu)質(zhì)的音視頻內(nèi)容，不管再好看的設(shè)計，對用戶的吸引程度也就不存在了。
而潮汐則需要一個點去變現(xiàn)，通過優(yōu)質(zhì)的，量較少的免費內(nèi)容吸引用戶，進(jìn)而通過更多的優(yōu)質(zhì)付費內(nèi)容對用戶進(jìn)行轉(zhuǎn)化。所以，它專門設(shè)計了會員頁面。而入口，則放在“我的”頁面，通過一個黑色的卡片來吸引用戶點擊，畢竟，黑色與黃色代表尊貴，與眾不同。

而這里又涉及到會員卡頁面的設(shè)計啦。在會員卡頁面，有幾個點是非常重要的，必須的：1. 一個類似于實體的卡片，同時帶有用戶名?頭像和開通狀態(tài)。2.會員有哪些權(quán)益，你需要給用戶展示出來? 3. ?會員價格，這里一般采用上圖的形式，通過列舉出多個方案引導(dǎo)用戶購買你期望的方案。4. 大的購買按鈕。當(dāng)然，如果是更復(fù)雜的應(yīng)用，也可以加入吸引用戶購買的內(nèi)容模塊，來促成用戶更強(qiáng)列的購買意愿。


潮汐-官網(wǎng)設(shè)計
潮汐官網(wǎng)依然延續(xù)大留白，低飽和度的顏色，每張配圖都進(jìn)行精心設(shè)計。這才是潮汐特別吸引人的特色。

潮汐-設(shè)計思路總結(jié)
1. 工具類應(yīng)用，一個特立獨行的吸引用戶的設(shè)計風(fēng)格非常重要。2.通過分析用戶使用場景，在設(shè)計過程中采用降低配色飽和度等方式營造用戶喜歡的場景。
3.配圖！配圖！配圖！配圖絕對是潮汐這款應(yīng)用的一個重要的特點，簡約，抽象，低飽和度不刺激的配圖降低用戶大腦的信息飽和程度，營造舒適感。4.大留白，卡片化的設(shè)計5.通過免費內(nèi)容與獨特設(shè)計吸引用戶，進(jìn)而通過更多的優(yōu)質(zhì)內(nèi)容將用戶轉(zhuǎn)化變現(xiàn)。

《靜電的UI設(shè)計教室-冬季班》
2021年底最后一期課程 12月下旬開課

備戰(zhàn)2022春期求職高峰

專注設(shè)計思維能力提升和作品質(zhì)量打造

歡迎咨詢下方靜電的微信咨詢報名