據(jù)說點擊藍色字體關(guān)注同學都升職加薪了

靜電說：連續(xù)幾期的優(yōu)秀案例解析欄目推出后，收到小伙伴的熱烈反饋，大家都說亟需這樣的欄目幫助大家分析設(shè)計過程中的思考要素。其實總的要點和原則是一致的，就是在設(shè)計過程中融入產(chǎn)品設(shè)計思路與用戶心理的思考。任何時候都是。

今天給大家?guī)淼氖蔷〇|七鮮應(yīng)用的UI界面設(shè)計思路解析，京東七鮮是一款生鮮電商類應(yīng)用，也是從京東商城分離出的一款細分的應(yīng)用類型。生鮮類應(yīng)用有一些特色，它更強調(diào)實效性，場景化，新鮮，以提升瀏覽者的購買情緒和欲望。

同時，七鮮應(yīng)用是一個跟線下門店聯(lián)動的APP，結(jié)合線下門店實現(xiàn)生鮮產(chǎn)品的快速送達服務(wù)。

接下來我們分別從視覺和產(chǎn)品角度來講講這款產(chǎn)品的設(shè)計優(yōu)點，取其精華，幫助大家更好的改善自有產(chǎn)品。


01啟動頁面：塑造品牌

上圖是七鮮的啟動頁面，看似挺簡單的啟動頁面也有很多設(shè)計要點。Logo：我們非常有必要對Logo文字進行一些藝術(shù)化處理，這是很多設(shè)計師會忽略的要點。Logo是點睛之筆，請不要直接把文字打上去就完事兒。Slogan：Slogan一般與Logo同時出現(xiàn)，七鮮采用了大字方式來呈現(xiàn)，而這種大字具有“招牌”的特性，簡單直接。但是，我們需要注意，如果缺少上方具有設(shè)計感的Logo，那整個頁面就完了。廣告宣傳語：Slogan一般與Logo同時出現(xiàn)，七鮮采用了大字方式來呈現(xiàn)，而這種大字具有“招牌”的特性，簡單直接。但是，我們需要注意，如果缺少上方具有設(shè)計感的Logo，那整個頁面就完了。

02首頁設(shè)計 氛圍感營造

首頁彈層廣告：雖然彈層廣告可能會影響用戶體驗，但是我們需要在用戶體驗和營銷效果直接做個平衡，首頁彈層直觀且醒目，對于數(shù)據(jù)導流有明顯的意義。只需要加大關(guān)閉按鈕，并不會對用戶有過多感染。但是，我們需要把握彈層的頻度，不要過高，否則用戶可能真的會厭煩。

接下來說首頁細節(jié)：

帶有色彩的頭部背景：頭部背景有個很明顯的好處，就是可以結(jié)合運營呈現(xiàn)出更多的氛圍感。在有營銷節(jié)點的時候更換背景，整個頁面的風格就會發(fā)生變化，靈活好用。相對于純白背景，更有識別度。
固定位置的廣告語：七鮮設(shè)計師采用了兩個簡短的字段來凸顯產(chǎn)品特色，且是在非常顯著的位置，這說明這個特色是非常希望用戶關(guān)注的要點?？?！東西多！
金剛區(qū)設(shè)計：這個金剛區(qū)分類icon非常值得我們學習，首先，它使用的是照片實物背景，第二，它采用了統(tǒng)一傾斜設(shè)計，第三，背景為純色。把握住這幾點，使用實物照片也可以做金剛區(qū)圖標且不顯得亂。

首頁第二屏：

雙行的Tab菜單：這是首頁第二屏的效果，設(shè)計師采用了雙行的Tab菜單欄，這一點非常值得我們學習。第二行的菜單除了可以作為定位指示器，還可以加入文字，讓設(shè)計更有意義。

瀑布流卡片設(shè)計：灰色背景+白色+陰影卡片效果，配合綠色的加號按鈕來表現(xiàn)個性化推薦。

03分類頁設(shè)計

左右分欄的分類頁：左右分欄來設(shè)計分類頁面已經(jīng)成為設(shè)計師的共識，可以幫助用戶減少頁面跳轉(zhuǎn)帶來的損失厭惡情緒，提升瀏覽效率。

分類配圖設(shè)計：配圖一定要精心挑選，盡量角度一致，且摳圖處理。

047Clube頁面

7Club是鏈接購買轉(zhuǎn)換的重要一環(huán)，現(xiàn)在越來越多的電商類應(yīng)用開始加入內(nèi)容性的內(nèi)容促成客戶轉(zhuǎn)化下單。二級菜單的設(shè)計采用了笑臉風格的狀態(tài)指示器。并加入了品牌綠色和紋理設(shè)計。另外我們發(fā)現(xiàn)，這個頁面也有用戶頭像出現(xiàn)。

05產(chǎn)品詳情頁設(shè)計

不少電商應(yīng)用會使用“購物車”和“馬上購買”兩個按鈕，為何此處僅僅使用了“購物車”呢？我們可以從場景角度考量，一般生鮮類應(yīng)用不會直接購買單件商品，大部分會購買一系列物品，配菜之類，因此直接放入購物車，再結(jié)算也不失為一種簡單粗暴的做法。

場景化設(shè)計：當你去超市買菜的時候，你可能會想，我要買啥菜呢？今天要做啥飯呢？而如果菜旁邊寫了一個菜譜，那你可能馬上會有靈感了。這就是場景化設(shè)計的力量，想用戶所需。七鮮應(yīng)用也采用了這樣的方式，在產(chǎn)品下方放上相關(guān)菜譜，提升用戶購買其它產(chǎn)品的概率，是一種非常不錯的方法。而且菜譜和7club頻道有機關(guān)聯(lián)。這就是內(nèi)容與產(chǎn)品結(jié)合的力量。

06總結(jié)

京東七鮮是我非常喜歡的一款應(yīng)用，它簡潔方便，設(shè)計清新好用，而且還有我最喜歡的一些細節(jié)，以及菜譜欄目的結(jié)合，這一點對于生鮮類應(yīng)用確實是個創(chuàng)新。各位小伙伴，在平時要多去觀察應(yīng)用，多看，多總結(jié)，相信你在平時如果形成了這些習慣，一定會成為一個更優(yōu)秀的設(shè)計師的。在即將開課的《靜電的UI設(shè)計教室-冬季班》中，我們會帶給大家更詳細的產(chǎn)品分析和進階內(nèi)容。


《靜電的UI設(shè)計教室-冬季班》
2021年底最后一期

12月30日開課備戰(zhàn)2022春期求職高峰

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

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

新一期UI全鏈路就業(yè)特訓課程開始報名啦

↓↓長按二維碼加靜電老師咨詢↓↓

? ? ? ? ? ? ? ??