2022-9-16 ui設(shè)計(jì)分享達(dá)人
Wonder是一款面向Z世代群體信息獲取的探索型產(chǎn)品，雖然我們?cè)诋a(chǎn)品探索的路上沒能走的更遠(yuǎn)，但作為設(shè)計(jì)師非常珍視參加創(chuàng)新產(chǎn)品探索的機(jī)會(huì)，創(chuàng)新本身就是一種積累，在產(chǎn)品搭建過程中深入了解用戶需求，設(shè)計(jì)上自我突破、追求極致。以下歷程和設(shè)計(jì)經(jīng)驗(yàn)想與大家分享。
首先從了解我們的年輕用戶開始。通過桌面、田野用戶調(diào)研，我們了解到，在信息內(nèi)容消費(fèi)方面，Z世代群體更偏向于個(gè)性化、多元化、高顏值的信息內(nèi)容體驗(yàn)。再進(jìn)一步拆解訴求，我們發(fā)現(xiàn)用戶大致可以分為效率型及消遣型兩大類，效率型用戶偏向于便捷易用、信息聚焦的消費(fèi)形式，而消遣型用戶更期望有豐富的內(nèi)容讓他們逛起來、刷起來。針對(duì)兩大類不同的用戶訴求，我們進(jìn)行了區(qū)隔化設(shè)計(jì)。
在框架搭建上，我們利用面板可變性和固定性兩個(gè)維度來定義框架，首先是首頁(yè)場(chǎng)景面板，它具有可變性，可以承載不同的內(nèi)容例如搜索、信息流場(chǎng)景。再次，定義了位居二層的搜索面板，作為核心場(chǎng)景，具有固定性，是恒定不變的功能位于可變場(chǎng)景之上。最后，兩處功能區(qū)具有固定性，頭部承載基礎(chǔ)功能，底部承載兩大消費(fèi)場(chǎng)景。最終將框架轉(zhuǎn)化為具體設(shè)計(jì)，分別承載了豐富的興趣內(nèi)容分發(fā)場(chǎng)景和簡(jiǎn)單的聚焦場(chǎng)景。
搜索框位于內(nèi)容之上跨內(nèi)容恒定存在，形成了搜索框置底的首頁(yè)雙層面板交互形式，和滿足首頁(yè)逛起來的內(nèi)容消費(fèi)場(chǎng)景、聚焦搜索的簡(jiǎn)單搜索場(chǎng)景來滿足用戶的不同訴求。加上兩處固定的功能區(qū)域，頭部基礎(chǔ)功能，底部bar承載左效率、右娛樂兩大內(nèi)容場(chǎng)景，構(gòu)成了差異化首頁(yè)框架。冠以興趣內(nèi)容躁模式、簡(jiǎn)單搜索禪模式姓名，炫酷的交互手勢(shì)切換模式加持，最終構(gòu)成了首頁(yè)雙模式、可承載多元場(chǎng)景的框架設(shè)計(jì)。
同時(shí)，頭部留有Doodle品牌區(qū)域，在豐富的節(jié)日運(yùn)營(yíng)活動(dòng)中，檸檬精通過不同的裝扮和道具，和用戶進(jìn)行互動(dòng)
隨著我們對(duì)用戶的深入了解，有了更細(xì)致的解讀。根據(jù)用戶調(diào)研我們發(fā)現(xiàn)Z世代群體更傾向于基于興趣圈層的信息消費(fèi)形式，愿意為興趣買單、尋找同好，并致力于為興趣圈層貢獻(xiàn)價(jià)值。因此我們對(duì)整體的框架和布局進(jìn)行了體驗(yàn)升級(jí)探索。
我們將用戶訴求拆解為可落實(shí)的設(shè)計(jì)目標(biāo)，并聚焦「體驗(yàn)統(tǒng)一」「快速篩選」「特色感知」「重點(diǎn)突出」4個(gè)核心設(shè)計(jì)目標(biāo)?？蚣軐用?，我們依托星球形象設(shè)計(jì)，運(yùn)用頭部循環(huán)交互框架形式，使內(nèi)容直觀清晰呈現(xiàn)，不同星球凸顯不同內(nèi)容特點(diǎn)，又保證了6大內(nèi)容體驗(yàn)統(tǒng)一。
底bar定義為基礎(chǔ)功能承載，語(yǔ)音核心能力固定不變，消息作為社區(qū)互動(dòng)重要基礎(chǔ)能力、個(gè)人中心便捷用戶快速回訪社區(qū)資產(chǎn)。在頁(yè)面的架構(gòu)上，根據(jù)金剛位運(yùn)營(yíng)模塊特性，將模塊設(shè)計(jì)為可組合、可靈活配置，以支持隨時(shí)更替的運(yùn)營(yíng)訴求。
對(duì)于重點(diǎn)互動(dòng)場(chǎng)景，運(yùn)用動(dòng)態(tài)入口設(shè)計(jì)吸引互動(dòng)，并在二級(jí)頁(yè)打造全場(chǎng)景的沉浸式互動(dòng)氛圍。
最后，將UGC無(wú)限流至于信息層級(jí)底部，打造縱向?yàn)g覽、逛內(nèi)容體驗(yàn)。
在項(xiàng)目正式啟動(dòng)前，組織腦暴會(huì)開展年輕化設(shè)計(jì)語(yǔ)言提煉，結(jié)合用戶研究團(tuán)隊(duì)調(diào)研報(bào)告，通過Image board建立設(shè)計(jì)理念和模型表達(dá)，通過收集、歸納、提煉、總結(jié)路徑，提煉設(shè)計(jì)語(yǔ)言基因。
圈定關(guān)鍵頁(yè)面、核心控件開展帶有年輕化設(shè)計(jì)語(yǔ)言基因的方案探索，并擴(kuò)大覆蓋到重點(diǎn)頁(yè)面驗(yàn)證、聚焦、收攏，最終確定產(chǎn)品的年輕化設(shè)計(jì)語(yǔ)言。
檸檬精是Wonder App的官方IP形象。取自「我酸了」流行語(yǔ)，以檸檬為基礎(chǔ)原型，設(shè)計(jì)保留了檸檬最突出的特征，色彩以品牌色—檸檬黃為主色調(diào)，整體造型擬人化、年輕化以增強(qiáng)形象的延展性及實(shí)體化后的可動(dòng)性。IP形象與業(yè)務(wù)屬性及產(chǎn)品氣質(zhì)也較吻合，同用戶互動(dòng)場(chǎng)景應(yīng)用打造差異化記憶點(diǎn)。
不斷完善形象在各種場(chǎng)景中的應(yīng)用及延展，制作系列表情，用更多元的表現(xiàn)形式將檸檬精的性格描繪得更加豐滿，為品牌注入更多親和有趣的情感，拉近與用戶的距離。
伴隨產(chǎn)品興趣圈層的升級(jí)，3D檸檬精也結(jié)合星球概念，差異化造型與興趣內(nèi)容對(duì)應(yīng)，去賦予不同興趣星球特色，幫助年輕用戶找到社區(qū)、身份歸屬感，增強(qiáng)人與社區(qū)鏈接感。
大星球塑造中，通過不同星球的特色元素構(gòu)建場(chǎng)景，同用戶產(chǎn)生行為共鳴，吸引用戶進(jìn)入圈子。
設(shè)計(jì)一定不是“拍腦袋”的想象，更多是基于用戶特性、訴求、使用場(chǎng)景的一步步推導(dǎo)、演進(jìn)的結(jié)果。設(shè)計(jì)也并不局限于最終的界面效果呈現(xiàn)，整個(gè)產(chǎn)出過程都在設(shè)計(jì)，也都有設(shè)計(jì)發(fā)揮的空間。記得在日常的設(shè)計(jì)中多挖掘用戶訴求、洞察機(jī)會(huì)點(diǎn)，并抱著提供解決方案而非一次性結(jié)果的視角，動(dòng)態(tài)的、可延展的看待、設(shè)計(jì)事物。
隨暫別應(yīng)用市場(chǎng)，依然感謝大家的閱讀，期望這趟年輕化設(shè)計(jì)之旅能夠帶給設(shè)計(jì)師們一些啟發(fā)。期待看到更多有趣的、創(chuàng)新的、別出心裁的年輕化設(shè)計(jì)。
作者：百度MEUX
轉(zhuǎn)載請(qǐng)注明：站酷
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://bouu.cn