首頁(yè)

探秘|QQ社交形象年度盤點(diǎn)設(shè)計(jì)密碼

seo達(dá)人



圖片

 

概述

每年年底,QQ都會(huì)迎來(lái)一年一度的年終盤點(diǎn)活動(dòng),幫助用戶實(shí)現(xiàn)QQ社交記憶回溯。通過(guò)生成用戶專屬的社交形象,拉近用戶和QQ之間的距離,體現(xiàn)品牌溫度。

 

一、設(shè)計(jì)目標(biāo)

年度盤點(diǎn)活動(dòng)不同于主題運(yùn)營(yíng)活動(dòng),是對(duì)QQ用戶年度高光時(shí)刻的總結(jié)。在活動(dòng)設(shè)計(jì)目標(biāo)的設(shè)立上,我們希望塑造QQ溫暖品牌形象的同時(shí)清晰展示QQ用戶年度的社交記憶點(diǎn),通過(guò)創(chuàng)造用戶記憶點(diǎn),激發(fā)用戶分享。

圖片

 

二、創(chuàng)意構(gòu)思

我們從QQ用戶熟知的社交行為、場(chǎng)景出發(fā),進(jìn)行視覺元素延展。將用戶的瀏覽過(guò)程喻作QQ社交記憶的探索歷程。通過(guò)QQ元素等場(chǎng)景映射,喚醒用戶的社交記憶,最終形成用戶專屬的社交形象。

圖片

 

三、風(fēng)格設(shè)定

基于活動(dòng)的目標(biāo)我們衍生出以下設(shè)計(jì)關(guān)鍵詞(見下圖),簡(jiǎn)潔有品質(zhì)是本次活動(dòng)視覺風(fēng)格的核心傳達(dá)目標(biāo)。

圖片

1、色彩

為凸顯回憶感知以及透?jìng)鱍Q品牌。在色彩的選擇上我們使柔和的藍(lán)黃漸變色系,背景色系就像天空會(huì)跟隨活動(dòng)節(jié)奏、故事內(nèi)容而動(dòng)態(tài)變化,利用色彩變化傳達(dá)時(shí)光回溯的氛圍感知。

圖片

2、質(zhì)感

考慮到整體的風(fēng)格設(shè)定偏潔凈明快的感受,我們多以玻璃、半透明3s,啞光三類材質(zhì)為主。選擇透光性強(qiáng)與色彩融合度高的材質(zhì)搭配使用,讓畫面更具輕盈、簡(jiǎn)約的品質(zhì)感。

圖片

 

四、視覺表現(xiàn)

1、信息傳達(dá)

年終盤點(diǎn)活動(dòng)與主題運(yùn)營(yíng)活動(dòng)不同,繁冗的氛圍傳達(dá)并不等同清晰的信息傳達(dá),在活動(dòng)的設(shè)計(jì)上,我們希望一頁(yè)只講述一件事,弱化裝飾,突出主體內(nèi)容。

圖片

2、品牌透?jìng)?/strong>

場(chǎng)景內(nèi)我們?nèi)诤狭薗Q品牌調(diào)性的元素,如聊天aio、消息氣泡,QQ空間等,加強(qiáng)用戶代入感。

 

圖片

3、動(dòng)效編排

我們根據(jù)頁(yè)面場(chǎng)景的展示內(nèi)容類型,進(jìn)行動(dòng)畫節(jié)奏上的編排。保持信息傳遞的效率,并在需要氛圍強(qiáng)化的環(huán)節(jié)增強(qiáng)動(dòng)畫吸引力。營(yíng)造靈動(dòng)的內(nèi)容瀏覽體驗(yàn),提升動(dòng)畫張力。

圖片

在動(dòng)畫的運(yùn)動(dòng)樣式上,我們提煉出映射QQ社交場(chǎng)景的動(dòng)態(tài)設(shè)計(jì)語(yǔ)言。通過(guò)模擬聊天氣泡出現(xiàn)、新消息通知彈出、空間訪客踩一踩等社交場(chǎng)景中的動(dòng)畫形式,透?jìng)鱍Q品牌調(diào)性,增強(qiáng)動(dòng)畫表現(xiàn)力。

圖片

圖片

 

五、激發(fā)分享欲

從設(shè)計(jì)層面,如何激發(fā)用戶的分享欲?在本次活動(dòng)分享中用戶的專屬社交形象扮演著重要的角色,接下來(lái)我們將介紹影響社交形象品質(zhì)的三大設(shè)計(jì)因素。

 

圖片

1、形象設(shè)定

我們選用QQ作為社交形象主體,根據(jù)用戶不同的社交屬性去賦予其色彩、材質(zhì)的變化。在初步的生成方案上,我們嘗試挖掘更多的組合可能性,從QQ圍巾、嘴巴等部件進(jìn)行材質(zhì)變化。但三維的部件設(shè)計(jì)、審核成本高且組合起來(lái)多種情況形象差異性小。

圖片

圖片

為此我們降本提效精簡(jiǎn)了生成邏輯,在鵝身上視覺強(qiáng)感知的場(chǎng)域進(jìn)行差異化設(shè)計(jì)。

圖片

2、構(gòu)成規(guī)則

我們將社交關(guān)鍵詞分為三大階級(jí)并衍生出社交形象構(gòu)成的梯度規(guī)則。從社交小白到社交天花板,不同強(qiáng)弱的社交屬性決定著鵝身的變化。例如低階的材質(zhì)表現(xiàn)使用的是石膏、木紋,形容人們?cè)谏缃簧夏驹G、寡言少語(yǔ),而高階的鵝身質(zhì)感、色彩,圖案表現(xiàn)更加豐富。 

圖片

圖片

3、隱藏款埋入

在QQ形象設(shè)計(jì)上,我們根據(jù)不同的社交關(guān)鍵詞進(jìn)行了不一樣的設(shè)計(jì),包括樣式、材質(zhì)、顏色等,這些不一樣的設(shè)計(jì)在隱藏款上尤為突出。

圖片

例如針對(duì)社交關(guān)鍵詞“一呼百應(yīng)KOL“,此社交關(guān)鍵詞形容的是人氣高,是眾人的焦點(diǎn),為了體現(xiàn)這種超高人氣,QQ形象通體采用透明材質(zhì),并在內(nèi)部放置了很多不同的體現(xiàn)開心的黃臉表情。

圖片

圖片

在隱藏款“自帶光環(huán)的主角”的設(shè)計(jì)上,我們希望傳遞出受人矚目的光感,結(jié)合我們的生活,光線經(jīng)過(guò)玻璃后,通過(guò)不斷折射反射,能很好的傳遞出多彩和絢麗感覺,所以這款QQ形象通體采用了玻璃材質(zhì),強(qiáng)化和傳遞出受人矚目的主角光環(huán)。

圖片

圖片

隱藏款之外,其他更多QQ形象我們也會(huì)根據(jù)社交關(guān)鍵詞進(jìn)行不一樣的設(shè)計(jì)。

 圖片

圖片

圖片

 

六、形象展示

  • 金屬鵝 Metal Q

圖片

  • 玻璃鵝 Glass Q

圖片

  • 樹脂鵝 Resin Q

圖片

圖片

圖片

圖片

 

七、形象延展應(yīng)用

除此之外,我們?cè)诖汗?jié)賀卡活動(dòng)中還復(fù)用了部分鵝身形象,并為虎年設(shè)計(jì)了專屬的虎紋迷彩鵝。期待后續(xù)在運(yùn)營(yíng)活動(dòng)中嘗試更多的個(gè)性化QQ形象,刷新IP,升華品牌。

圖片

 

結(jié)語(yǔ)

在當(dāng)今社會(huì)強(qiáng)調(diào)本我的趨勢(shì)下,活動(dòng)千人千面的屬性越發(fā)重要。將經(jīng)典的QQ形象與用戶社交特征相結(jié)合,傳遞具備獨(dú)特性、品質(zhì)感的品牌視覺表現(xiàn),更能拉近QQ與用戶的距離。我們相信在未來(lái)的年終盤點(diǎn)活動(dòng)中,QQ會(huì)帶給大家更多的驚喜,敬請(qǐng)期待吧!

圖片

 

原文地址:騰訊ISUX

作者:ISUX設(shè)計(jì)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》探秘|QQ社交形象年度盤點(diǎn)設(shè)計(jì)密碼

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



關(guān)于體驗(yàn)管理的幾點(diǎn)思考

seo達(dá)人


圖片

數(shù)據(jù)來(lái)源:《2021年中國(guó)互聯(lián)網(wǎng)行業(yè)體驗(yàn)設(shè)計(jì)工具趨勢(shì)研究》

但體驗(yàn)是的一種主觀感受,是用戶在使用一個(gè)產(chǎn)品、系統(tǒng)或服務(wù)之前、使用期間和使用之后的全部感受。公司的品牌、網(wǎng)站、系統(tǒng)、產(chǎn)品、服務(wù)、營(yíng)銷活動(dòng)、線下門店等等各個(gè)環(huán)節(jié)的用戶觸點(diǎn)都會(huì)是用戶體驗(yàn)的影響要素,面對(duì)如此復(fù)雜的情況,體驗(yàn)管理的邊界是什么??jī)?nèi)核又是什么?接下來(lái)我將結(jié)合自己開展體驗(yàn)管理工作的相關(guān)經(jīng)驗(yàn),談?wù)勎覍?duì)于體驗(yàn)管理幾方面的思考。

 

一、如何理解體驗(yàn)管理

顧名思義,體驗(yàn)管理即為對(duì)體驗(yàn)的管理,既可以是用戶的體驗(yàn),也可以是商家的體驗(yàn)、供應(yīng)商的體驗(yàn)、經(jīng)銷商的體驗(yàn),合作伙伴的體驗(yàn),還可以是內(nèi)部員工的體驗(yàn)。但無(wú)論是哪類角色的體驗(yàn),都是一種主觀的情緒感受,都會(huì)受到多個(gè)環(huán)節(jié)、多種因素的影響。因此,對(duì)于一家公司來(lái)說(shuō),體驗(yàn)的提升和優(yōu)化也勢(shì)必涉及多個(gè)部門團(tuán)隊(duì)的工作協(xié)同,需要從宏觀視角、從戰(zhàn)略視角對(duì)“整體”體驗(yàn)進(jìn)行管理,充分分析并把握用戶與公司產(chǎn)品或服務(wù)接觸的每一個(gè)觸點(diǎn)環(huán)節(jié),聚合和分析全渠道、全流程的體驗(yàn)數(shù)據(jù),洞察用戶痛點(diǎn)、需求及偏好,并以全鏈路整體體驗(yàn)提升為目標(biāo),通過(guò)各部門團(tuán)隊(duì)的協(xié)同,不斷改善公司產(chǎn)品或服務(wù)的觸點(diǎn)體驗(yàn),從而為用戶提供系統(tǒng)性價(jià)值交付,為企業(yè)提供持續(xù)性增長(zhǎng)動(dòng)力。

 

二、為什么要做體驗(yàn)管理

首先,從體驗(yàn)提升的宏觀價(jià)值視角來(lái)說(shuō),提升用戶體驗(yàn)是企業(yè)在流量紅利逐步消失、行業(yè)競(jìng)爭(zhēng)日益加劇的宏觀背景下,繼降低成本、提升效率之后實(shí)現(xiàn)業(yè)務(wù)增長(zhǎng)的共識(shí)性舉措。實(shí)施體驗(yàn)管理有助于提升用戶滿意度、忠誠(chéng)度;有助于提升品牌口碑、品牌影響力;有助于促進(jìn)用戶增長(zhǎng)、商業(yè)目標(biāo)達(dá)成;有助于促進(jìn)產(chǎn)品創(chuàng)新、營(yíng)銷創(chuàng)新以及企業(yè)升級(jí)。

其次,從體驗(yàn)提升的工作開展痛點(diǎn)來(lái)看,現(xiàn)階段國(guó)內(nèi)體驗(yàn)管理仍處于刀耕火種期,雖然越來(lái)越多的公司紛紛入局,但多數(shù)只是停留在散點(diǎn)式、被動(dòng)性的體驗(yàn)需求研究、體驗(yàn)問(wèn)題收集及優(yōu)化、用戶反饋及態(tài)度采集上,缺少對(duì)體驗(yàn)的整體性管控能力,因此在開展體驗(yàn)提升工作的過(guò)程中往往會(huì)遇到以下困境:

1. 缺少統(tǒng)一的量化指標(biāo)。各團(tuán)隊(duì)對(duì)體驗(yàn)的理解、當(dāng)前的體驗(yàn)水平、體驗(yàn)影響的大小均不像轉(zhuǎn)化率、用戶量等業(yè)務(wù)指標(biāo)那么清晰,所以團(tuán)隊(duì)之間缺少統(tǒng)一的體驗(yàn)語(yǔ)言,導(dǎo)致體驗(yàn)提升工作的推進(jìn)成本遠(yuǎn)高于更明確的業(yè)務(wù)目標(biāo)提升工作。

2. 傳統(tǒng)體驗(yàn)研究分析的周期長(zhǎng),時(shí)間跨度和體驗(yàn)觸點(diǎn)的覆蓋范圍有限,導(dǎo)致體驗(yàn)優(yōu)化工作難以適應(yīng)現(xiàn)有產(chǎn)品或服務(wù)的迭代更新節(jié)奏。

3. 體驗(yàn)分析與體驗(yàn)優(yōu)化有脫節(jié)現(xiàn)象,未形成完整的體驗(yàn)提升進(jìn)度跟蹤保障機(jī)制。

4. 公司同事體驗(yàn)意識(shí)參差不齊,缺少統(tǒng)一的體驗(yàn)文化引導(dǎo)。導(dǎo)致先上線后優(yōu)化的不良模式盛行,增加了用戶首試體驗(yàn)受損的風(fēng)險(xiǎn),增加了體驗(yàn)挽回所需付出的成本。

因此,開展體驗(yàn)管理所能帶來(lái)的直觀可見的價(jià)值是能幫助我們解決以體驗(yàn)提升為目標(biāo)的各項(xiàng)工作的難點(diǎn),提升各項(xiàng)工作的效率。同時(shí),從體驗(yàn)管理的長(zhǎng)遠(yuǎn)價(jià)值來(lái)看,開展體驗(yàn)管理可以提升企業(yè)競(jìng)爭(zhēng)力,促進(jìn)整體商業(yè)目標(biāo)達(dá)成。

 

三、體驗(yàn)管理的通用模型

結(jié)合國(guó)內(nèi)公司在體驗(yàn)管理工作開展上的主要內(nèi)容,大致可將體驗(yàn)管理工作分為三大類:

1. 數(shù)據(jù)采集為主的研究執(zhí)行,即診斷用戶使用產(chǎn)品或服務(wù)全鏈路上的體驗(yàn)現(xiàn)狀和問(wèn)題,為體驗(yàn)優(yōu)化提供方向指引;

2. 體驗(yàn)優(yōu)化為主的機(jī)制建設(shè),在公司層面建立規(guī)范的流程或機(jī)制,保障體驗(yàn)優(yōu)化工作順利開展;

3. 體驗(yàn)管理工具或系統(tǒng)建設(shè),結(jié)合公司體驗(yàn)管理需求,依托現(xiàn)有體驗(yàn)分析及優(yōu)化的工作流程、機(jī)制,設(shè)計(jì)開發(fā)體驗(yàn)管理工具或系統(tǒng),提升體驗(yàn)管理的系統(tǒng)化能力。

圖片

數(shù)據(jù)來(lái)源:《2021年中國(guó)互聯(lián)網(wǎng)行業(yè)體驗(yàn)設(shè)計(jì)工具趨勢(shì)研究》

綜合現(xiàn)有各公司所開展的體驗(yàn)管理工作內(nèi)容以及我們現(xiàn)有的工作實(shí)踐,我將體驗(yàn)管理工作的具體內(nèi)容按照覆蓋范圍分為三層結(jié)構(gòu):數(shù)據(jù)層、系統(tǒng)層和運(yùn)營(yíng)層。

圖片

圖1. 體驗(yàn)監(jiān)測(cè)管理體系

 

每一層級(jí)上都有對(duì)應(yīng)的工作目標(biāo)和工作內(nèi)容:

數(shù)據(jù)層:建設(shè)體驗(yàn)數(shù)據(jù),量化體驗(yàn)水平,追蹤體驗(yàn)變化。

圖片

圖2. 體驗(yàn)監(jiān)測(cè)數(shù)據(jù)示例

做體驗(yàn)的監(jiān)測(cè)管理,首先我們需要看到它,并且能及時(shí)的掌握它的現(xiàn)狀和變化情況,這樣我們才能針對(duì)現(xiàn)狀去分析判斷我們應(yīng)該怎么提升它,改善它,才能針對(duì)變化情況來(lái)分析、判斷、衡量我們所做的提升和改善措施是否有效,才能不斷沉淀經(jīng)驗(yàn)方法,在體驗(yàn)提升的臺(tái)階上逐級(jí)而上,而不是原地打轉(zhuǎn)。

但正如前文所述,體驗(yàn)是用戶的主觀情緒感受,無(wú)論是對(duì)單個(gè)用戶的情緒感受的測(cè)量方法,還是對(duì)整體用戶主觀情緒感受數(shù)據(jù)的收集技術(shù)都不是很成熟,所以,體驗(yàn)數(shù)據(jù)不像運(yùn)營(yíng)數(shù)據(jù)或財(cái)務(wù)數(shù)據(jù)那么容易追蹤和衡量。

在這樣的背景下,我們首先需要找到那些可以直接或間接反映用戶情緒感受的數(shù)據(jù),構(gòu)建收集渠道來(lái)收集可以反映用戶情緒感受的數(shù)據(jù)。

那這類數(shù)據(jù)都有哪些呢?結(jié)合用戶體驗(yàn)度量的數(shù)據(jù)維度來(lái)看,大概可以將其劃分為兩類:用戶自我報(bào)告式的主動(dòng)反饋類數(shù)據(jù)和系統(tǒng)埋點(diǎn)收集的客觀行為類數(shù)據(jù)。

自我報(bào)告式的主動(dòng)反饋類數(shù)據(jù)主要有滿意度評(píng)價(jià)(CSAT)、推薦意愿(NPS)、客戶費(fèi)力度(CES)等反映整體感受的數(shù)據(jù),以及用戶通過(guò)客服或在線反饋等渠道針對(duì)特定問(wèn)題的反饋數(shù)據(jù)。此類數(shù)據(jù)主要通過(guò)直接詢問(wèn)用戶或用戶主動(dòng)反饋的方式來(lái)采集。

系統(tǒng)埋點(diǎn)收集的客觀行為類數(shù)據(jù)主要是用戶與產(chǎn)品或服務(wù)的交互過(guò)程數(shù)據(jù),比如App的整體使用頻率,使用時(shí)長(zhǎng),App分享率等,以及重點(diǎn)功能或頁(yè)面的點(diǎn)擊率、轉(zhuǎn)化率、跳出率等。此類數(shù)據(jù)主要通過(guò)系統(tǒng)后臺(tái)自動(dòng)記錄來(lái)采集。

為了能更精細(xì)化的對(duì)體驗(yàn)狀況進(jìn)行分析,也可以增加一些體驗(yàn)水平分析的輔助型數(shù)據(jù),比如用戶的性別、年齡、會(huì)員等級(jí)等特征類數(shù)據(jù)。以便我們看到整體體驗(yàn)水平有所變化時(shí),能具體的分析出是哪個(gè)群體的變化導(dǎo)致。

系統(tǒng)層:構(gòu)建體驗(yàn)管理系統(tǒng),承載體驗(yàn)數(shù)據(jù),提效體驗(yàn)運(yùn)營(yíng)。

圖片

圖3. 體驗(yàn)監(jiān)測(cè)管理系統(tǒng)界面截圖

體驗(yàn)監(jiān)測(cè)管理體系的中間層重點(diǎn)在于系統(tǒng)的建設(shè)。這主要是因?yàn)椋?

首先,體驗(yàn)管理系統(tǒng)是體驗(yàn)數(shù)據(jù)的承載系統(tǒng)。單獨(dú)一期的體驗(yàn)數(shù)據(jù)采集因?yàn)槿鄙賹?duì)比的基準(zhǔn),所以參考意義不大,我們需要長(zhǎng)期的采集體驗(yàn)數(shù)據(jù),并進(jìn)行不同時(shí)間的體驗(yàn)水平對(duì)比,這樣才能及時(shí)有效的發(fā)現(xiàn)體驗(yàn)水平的變化,找到需要重點(diǎn)提升體驗(yàn)的用戶群體、產(chǎn)品模塊或服務(wù)環(huán)節(jié)。

而長(zhǎng)期的數(shù)據(jù)采集及分析需要耗費(fèi)較大的人力成本,且工作重復(fù)性較高,數(shù)據(jù)的人工分析也容易出現(xiàn)失誤,因此,通過(guò)系統(tǒng)來(lái)完成數(shù)據(jù)的自動(dòng)采集、數(shù)據(jù)的自動(dòng)分析、數(shù)據(jù)的自動(dòng)診斷,不僅能及時(shí)且長(zhǎng)期的采集體驗(yàn)數(shù)據(jù),而且能有效的節(jié)省人力成本,減少人工計(jì)算的失誤。

其次,體驗(yàn)管理系統(tǒng)是體驗(yàn)運(yùn)營(yíng)工作的主要輔助工具。體驗(yàn)數(shù)據(jù)的監(jiān)測(cè)分析診斷只是基礎(chǔ),依據(jù)監(jiān)測(cè)分析診斷的結(jié)果如何能有效的促進(jìn)產(chǎn)品或服務(wù)體驗(yàn)提升才是體驗(yàn)管理的最終目的,圍繞用戶體驗(yàn)提升所要做的運(yùn)營(yíng)工作還有很多,比如產(chǎn)品/服務(wù)體驗(yàn)問(wèn)題的優(yōu)化跟蹤,團(tuán)隊(duì)/公司體驗(yàn)文化的建設(shè)等。為了能高效的完成各方面的體驗(yàn)運(yùn)營(yíng)工作, 我們依然需要借助系統(tǒng)的能力。

因此,體現(xiàn)管理系統(tǒng)的建設(shè)在體驗(yàn)管理體系的構(gòu)建工作中是非常重要的一部分內(nèi)容。

運(yùn)營(yíng)層:構(gòu)建運(yùn)營(yíng)機(jī)制,分析體驗(yàn)數(shù)據(jù),管理體驗(yàn)問(wèn)題,維護(hù)體驗(yàn)用戶,建設(shè)體驗(yàn)文化

圖片

圖4. 體驗(yàn)監(jiān)測(cè)管理相關(guān)運(yùn)營(yíng)產(chǎn)出

體驗(yàn)運(yùn)營(yíng)主要是指圍繞用戶體驗(yàn)所進(jìn)行的人工干預(yù)工作的總稱。我們的日常運(yùn)營(yíng)工作主要包含體驗(yàn)數(shù)據(jù)分析、體驗(yàn)問(wèn)題管理、體驗(yàn)用戶維護(hù)和體驗(yàn)文化建設(shè)四個(gè)方面。

體驗(yàn)數(shù)據(jù)分析主要是對(duì)體驗(yàn)數(shù)據(jù)結(jié)果進(jìn)行統(tǒng)計(jì)整理跟蹤以及綜合性的分析,比如結(jié)合主觀數(shù)據(jù)及客觀數(shù)據(jù)來(lái)綜合評(píng)估特定功能或服務(wù)的體驗(yàn)情況;并及時(shí)將體驗(yàn)數(shù)據(jù)分析結(jié)果同步給對(duì)應(yīng)功能/服務(wù)的責(zé)任團(tuán)隊(duì),協(xié)助其分析體驗(yàn)水平的變化。

體驗(yàn)問(wèn)題管理主要是對(duì)體驗(yàn)問(wèn)題的分析和優(yōu)化。體驗(yàn)數(shù)據(jù)的監(jiān)測(cè)可以讓我們更及時(shí)的發(fā)現(xiàn)體驗(yàn)上的問(wèn)題,但單純的發(fā)現(xiàn)問(wèn)題僅僅是開始,我們需要聯(lián)合相應(yīng)的責(zé)任團(tuán)隊(duì)一起對(duì)問(wèn)題進(jìn)行分析優(yōu)化,在這過(guò)程中經(jīng)常需要我們通過(guò)快速的調(diào)研來(lái)驗(yàn)證問(wèn)題,評(píng)估問(wèn)題的嚴(yán)重性,找到問(wèn)題的解決方案,同時(shí)需要推動(dòng)或協(xié)助責(zé)任團(tuán)隊(duì)完成優(yōu)化方案,跟進(jìn)優(yōu)化進(jìn)度和效果。

體驗(yàn)用戶維護(hù)主要是對(duì)產(chǎn)品/服務(wù)典型用戶群體或社區(qū)的日常管理和活動(dòng)組織。主要是為了能及時(shí)的獲取產(chǎn)品/服務(wù)方面的體驗(yàn)情況,及時(shí)了解產(chǎn)品/服務(wù)創(chuàng)新方案的用戶態(tài)度評(píng)價(jià),讓用戶更深入的參與到產(chǎn)品/服務(wù)的設(shè)計(jì)開發(fā)過(guò)程中,引導(dǎo)用戶為產(chǎn)品/服務(wù)的迭代創(chuàng)新貢獻(xiàn)優(yōu)秀創(chuàng)意。

體驗(yàn)文化建設(shè)主要是通過(guò)體驗(yàn)數(shù)據(jù)分析結(jié)果/體驗(yàn)專項(xiàng)研究結(jié)果傳播,體驗(yàn)問(wèn)題協(xié)同機(jī)制構(gòu)建,體驗(yàn)活動(dòng)組織,體驗(yàn)考核機(jī)制創(chuàng)建等方式不斷培養(yǎng)各團(tuán)隊(duì)及時(shí)關(guān)注體驗(yàn)水平的意識(shí),營(yíng)造各團(tuán)隊(duì)積極推動(dòng)體驗(yàn)優(yōu)化的氛圍,激勵(lì)各團(tuán)隊(duì)推行體驗(yàn)優(yōu)化/體驗(yàn)創(chuàng)新的主動(dòng)性。

 

四、體驗(yàn)管理的趨勢(shì)展望

隨著越來(lái)越多的公司開始進(jìn)入體驗(yàn)管理的行列,勢(shì)必會(huì)促進(jìn)體驗(yàn)管理不斷的發(fā)展變化。結(jié)合對(duì)現(xiàn)有體驗(yàn)管理工作現(xiàn)狀的觀察,我認(rèn)為可以用三個(gè)關(guān)鍵詞來(lái)概括體驗(yàn)管理將來(lái)可能的三個(gè)發(fā)展方向。

精細(xì)。體驗(yàn)涉及用戶與公司接觸的方方面面,時(shí)時(shí)刻刻,體驗(yàn)管理也將圍繞用戶的全部場(chǎng)景,完整鏈路觸點(diǎn),以及用戶的整個(gè)生命周期來(lái)進(jìn)行更加精細(xì)化的數(shù)據(jù)采集、分析和優(yōu)化,全方位的監(jiān)測(cè)、診斷和管理。

多元。從宏觀行業(yè)到微觀數(shù)據(jù)都將變得更多元。未來(lái)的體驗(yàn)管理不僅僅只是用戶體驗(yàn)部門的工作重點(diǎn),也將作為抓手逐漸成為整個(gè)企業(yè)從上至下的重點(diǎn)工作方向。體驗(yàn)管理不再只是互聯(lián)網(wǎng)企業(yè)的專屬,也將逐步滲透至各行業(yè)的企業(yè)公司。不同行業(yè)、不同企業(yè)的產(chǎn)品或服務(wù)類型多種多樣,用戶與產(chǎn)品或服務(wù)的交互觸點(diǎn)、場(chǎng)景也各不相同,為了滿足不同行業(yè)、不同企業(yè)的多樣化需求,體驗(yàn)數(shù)據(jù)的采集渠道和場(chǎng)景也將結(jié)合多樣的觸點(diǎn)場(chǎng)景變得更多元,體驗(yàn)數(shù)據(jù)的采集維度也將變得更豐富,分析數(shù)據(jù)的方式方法以及體驗(yàn)管理工具的功能類型也將在不同行業(yè)/不同企業(yè)中呈現(xiàn)出個(gè)性化、多元化的趨勢(shì)。

智能。技術(shù)的進(jìn)步和發(fā)展也勢(shì)必會(huì)帶來(lái)體驗(yàn)管理能力的不斷提升,體驗(yàn)數(shù)據(jù)的采集、體驗(yàn)水平的分析診斷、體驗(yàn)問(wèn)題的優(yōu)化管理將借助新技術(shù)而變得更智能、更高效。體驗(yàn)數(shù)據(jù)的采集將在用戶無(wú)意識(shí)中完成,且能兼顧體驗(yàn)數(shù)據(jù)的多種維度,使體驗(yàn)場(chǎng)景的還原更便捷,更真實(shí);體驗(yàn)水平的分析診斷將結(jié)合更多維的數(shù)據(jù)來(lái)進(jìn)行綜合性的自動(dòng)化診斷,并提供切實(shí)可行的優(yōu)化方案,使體驗(yàn)問(wèn)題的暴露更準(zhǔn)確,更人性;體驗(yàn)問(wèn)題的分發(fā)、進(jìn)度跟蹤、效果評(píng)估等管理工作的自動(dòng)化程度更高,使體驗(yàn)優(yōu)化的效率更高。

 

 

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》關(guān)于體驗(yàn)管理的幾點(diǎn)思考

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司




B端后臺(tái)產(chǎn)品的設(shè)計(jì)細(xì)節(jié)-設(shè)計(jì)說(shuō)明指南篇

seo達(dá)人


一、建立原子化組件思維

1、什么是原子化組件思維?

原子思維:原子最早是由英國(guó)化學(xué)家/物理學(xué)家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說(shuō),提出的原子論?;瘜W(xué)元素由不可分的微粒(原子)構(gòu)成的,它在一切化學(xué)變化中是不可再分的最小單位。

原子理論同理適用于我們的設(shè)計(jì)系統(tǒng)中:

頁(yè)面是由原子(最小單位設(shè)計(jì)元素)、分子(基礎(chǔ)控件)、組織(基礎(chǔ)功能組件)、模版(業(yè)務(wù)定制組件)、頁(yè)面構(gòu)成。

原子:原子是最基本和最小顆粒度的單位,無(wú)法進(jìn)一步細(xì)分的UI元素,在界面中以「元素」的形式存在,例如:顏色、文字、圖標(biāo)、分割線等。

分子:原子排列組合構(gòu)成了分子,在界面中多以「設(shè)計(jì)控件」的形式存在,形成相對(duì)簡(jiǎn)單的UI組件的原子的集合。例如:導(dǎo)航欄、標(biāo)簽欄、搜索框、按鈕、彈窗等。

組織:原子、分子排列組合形成界面離散部分的相對(duì)復(fù)雜的組件,在界面中多以「基礎(chǔ)組件」的形式存在,例如:內(nèi)容卡片、表單頁(yè)面。

模版:原子、分子、組織按照業(yè)務(wù)需求排列組合構(gòu)成了模板,在界面中也稱為「業(yè)務(wù)組件」,例如:篩選列表。

頁(yè)面:按照一定規(guī)則后排列組合而成的滿足業(yè)務(wù)需求且包含品牌屬性的一個(gè)完整「頁(yè)面」。

圖片

2、組件化的內(nèi)核

設(shè)計(jì)組件不是把UI元素堆積到一個(gè)地方,然后各處集中引用這么簡(jiǎn)單。組件化的工作方式信奉獨(dú)立、完整、自由組合。

目標(biāo)就是盡可能把設(shè)計(jì)與開發(fā)中的元素獨(dú)立化,使它具備完整的局部功能,通過(guò)特定規(guī)則自由組合來(lái)構(gòu)成整個(gè)產(chǎn)品。

獨(dú)立:一個(gè)組件就是一個(gè)獨(dú)立的產(chǎn)品:在制定組件的過(guò)程中要考慮到組件應(yīng)用中的各個(gè)場(chǎng)景,降低、拆解組件中的耦合度,同時(shí)把一個(gè)組件當(dāng)作一個(gè)獨(dú)立產(chǎn)品來(lái)設(shè)計(jì) 考慮空狀態(tài)、極端情況、尺寸變化 盡可能靈活適應(yīng)各種使用場(chǎng)景

完整:一個(gè)完整組件構(gòu)成包含三種屬性:

A.響應(yīng)狀態(tài)-包含組件庫(kù)中原子的大小類型、分子的響應(yīng)和組合方式、多狀態(tài)的交互;

B.行為狀態(tài)-組件中元素的與背景的組合方式、組件中不同組件拼合的層級(jí)關(guān)系、組件與用戶行為的交互;

C .數(shù)據(jù)狀態(tài)-包含組件不同的狀態(tài)枚舉:如提交中、審核中、已結(jié)束狀態(tài)。

自由:每個(gè)組件都是相互獨(dú)立的,組件間的組合方式靈活且多樣的。靈活多變的同時(shí)也要遵循統(tǒng)一的柵格尺寸與表達(dá)約束,最大程度上保證頁(yè)面呈現(xiàn)出一種有秩序的美。

 

二、建立設(shè)計(jì)說(shuō)明指南

1、什么是設(shè)計(jì)說(shuō)明指南?

針對(duì)企業(yè)級(jí)產(chǎn)品反復(fù)出現(xiàn)的設(shè)計(jì)問(wèn)題,設(shè)計(jì)模式給出一般性的解決方案,實(shí)現(xiàn)跨應(yīng)用交互一致性的有效融合。減少了不必要的認(rèn)知成本,提升交互確定性和設(shè)計(jì)的效率。

考慮到需要適應(yīng)各種獨(dú)特的業(yè)務(wù)場(chǎng)景,模式的規(guī)則具有一定的靈活性,萬(wàn)變不離其宗,通過(guò)了解設(shè)計(jì)模式的構(gòu)建邏輯,可以衍生出更具場(chǎng)景特性的解決方案。

設(shè)計(jì)模式包含以下內(nèi)容:

原則:基于價(jià)值觀衍生出的一般設(shè)計(jì)技巧,包括如何高效組織信息、幫助建立用戶與界面的互動(dòng)等原則性要求。

全局規(guī)則:通過(guò)規(guī)范常見的互動(dòng)行為,包括導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、操作、幫助等,呈現(xiàn)組件元素的標(biāo)準(zhǔn)用法和彈性空間,并了解如何將他們組織在一起來(lái)創(chuàng)建良好的體驗(yàn)。

構(gòu)圖模版:我們總結(jié)了表單、列表、數(shù)據(jù)可視化、詳情頁(yè)、工作臺(tái)、異常、結(jié)果、編輯器幾類頁(yè)面的典型解決方案,介紹每類頁(yè)面的設(shè)計(jì)目標(biāo)、設(shè)計(jì)技巧以及典型頁(yè)面內(nèi)容等,幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理可以快速開始構(gòu)建界面。

2、服務(wù)于誰(shuí)

A.設(shè)計(jì)師:交互設(shè)計(jì)時(shí),整體流程框架或分支流程可快速?gòu)?fù)用。

B.產(chǎn)品經(jīng)理:原型設(shè)計(jì)時(shí),可復(fù)制并套用現(xiàn)有交互模式進(jìn)行原型繪制,或直接引用進(jìn)行開發(fā)。

C.研發(fā)人員:可作為標(biāo)準(zhǔn)交互流程的參照,統(tǒng)一相似流程的代碼設(shè)計(jì)方式。

3、有什么內(nèi)容

前言:對(duì)這次建立設(shè)計(jì)說(shuō)明指南的目的性說(shuō)明;

設(shè)計(jì)概覽:描述這次調(diào)整的范圍的維度;

設(shè)計(jì)原則:基于哪些設(shè)計(jì)原則輸出設(shè)計(jì)內(nèi)容;

構(gòu)圖模版:頁(yè)面的構(gòu)圖模版、組合控件和組合范圍;

全局規(guī)則:全局范圍出發(fā),除了頁(yè)面構(gòu)圖以外,涉及到共用組件,制定的規(guī)范;

組件:基礎(chǔ)控件和組織控件,甚至涉及到業(yè)務(wù)定制控件(模版)。

4、設(shè)計(jì)說(shuō)明指南的輸出

《GM Design》交互設(shè)計(jì)說(shuō)明指南,涉及幾十個(gè)產(chǎn)品線的成百上千個(gè)的功能,業(yè)務(wù)體量和復(fù)雜度極大,為了讓整體SaaS產(chǎn)品具備簡(jiǎn)潔高效的一致性交互體驗(yàn),設(shè)計(jì)說(shuō)明指南是設(shè)計(jì)過(guò)程中問(wèn)題解決的核心方法,也是構(gòu)建整個(gè)平臺(tái)或框架所要遵循的基礎(chǔ)和標(biāo)準(zhǔn)。

設(shè)計(jì)模式輔助設(shè)計(jì)者將業(yè)務(wù)引向?qū)嵺`,并使設(shè)計(jì)更具有一般性、簡(jiǎn)單性、一致性及穩(wěn)定性。同時(shí),設(shè)計(jì)者也可結(jié)合不同業(yè)務(wù)情境,實(shí)現(xiàn)模式在一般性和特殊性的銜接并作要素與結(jié)構(gòu)的調(diào)整。

 

最后

最后,為大家提供一份詳細(xì)的GM Design交互設(shè)計(jì)文檔,里面包含設(shè)計(jì)概覽、設(shè)計(jì)原則、構(gòu)圖模版、全局規(guī)則、組件等多類B端后臺(tái)交互設(shè)計(jì)內(nèi)容。

完整版交互設(shè)計(jì)說(shuō)明文檔-體驗(yàn)鏈接:https://lanhuapp.com/url/947cJ

大家可以在公眾號(hào)后臺(tái)回復(fù)文檔,獲取訪問(wèn)密碼。

慢慢來(lái)比較快,希望對(duì)你有幫助!

圖片


 

原文地址:Clip設(shè)計(jì)夾(公眾號(hào))

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》B端后臺(tái)產(chǎn)品的設(shè)計(jì)細(xì)節(jié)-設(shè)計(jì)說(shuō)明指南篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



想要優(yōu)化好UI作品,這14個(gè)設(shè)計(jì)細(xì)節(jié)一定要檢查到位!

seo達(dá)人


圖片

 

今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則,它們能快速使得你的界面設(shè)計(jì)更干凈、高效。

 

1. 文案要易于理解

用更容易讓用戶理解(說(shuō)人話)的引導(dǎo)文案,提升使用體驗(yàn)。

(彩云注:下面2個(gè)案例中,左側(cè)的“購(gòu)物車”和“庫(kù)存2”太過(guò)于術(shù)語(yǔ)化,右側(cè)的“僅剩2”和“加入購(gòu)物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候,也一定要注意界面中的文案,尤其是說(shuō)明文字,控件文字等等,這個(gè)點(diǎn)經(jīng)常容易被忽略。)

圖片

 

2. 垂直對(duì)齊易于掃視

良好的對(duì)齊方式,可以增強(qiáng)內(nèi)容的可讀性,讓用戶的視線更容易掃描。

(彩云注:左側(cè)的“之”字形視動(dòng)線比較難閱讀,且不夠?qū)I(yè);右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性,也讓設(shè)計(jì)看起來(lái)更加統(tǒng)一,能夠快速的提升設(shè)計(jì)細(xì)節(jié)。)

圖片

3.給選項(xiàng)加圖標(biāo)

使用圖標(biāo)、動(dòng)畫作為標(biāo)簽,有助于更輕松地理解內(nèi)容,它使界面看起來(lái)更加理性和豐富,能瞬間抓住用戶的眼球。

(彩云注:左側(cè)的導(dǎo)航相較于右邊,很難第一時(shí)間準(zhǔn)確識(shí)別它的意思,增加圖標(biāo)后不僅更快看清,視覺上也更加美觀。)

圖片

 

4. 大段內(nèi)容要拆分

大段的長(zhǎng)句會(huì)讓內(nèi)容變得難以閱讀。為了獲得好的體驗(yàn)和UI,應(yīng)該注意拆分內(nèi)容,并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn),利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說(shuō)明和條款條件”或任何聲明時(shí),提煉要點(diǎn)有助于提升用戶體驗(yàn),這樣也不至于讓用戶直接忽略。

(彩云注:左側(cè)的大段文字我想應(yīng)該沒多少人會(huì)去閱讀,右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。)

圖片

 

5. 流程增加進(jìn)度條

進(jìn)度條幫助用戶追蹤流程,它也能使查看上下步驟更加容易。線上購(gòu)物,表單填寫,申請(qǐng)流程等場(chǎng)景使用這種格式能很好的簡(jiǎn)化流程。

(彩云注:左邊的表單UI不方便跟蹤進(jìn)度和流程,右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。)

圖片

 

6.錯(cuò)誤提示要明確

錯(cuò)誤提示一定要明確,易于理解,方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤,用戶就會(huì)感到很失望,可能會(huì)放棄接下來(lái)的流程。在UI設(shè)計(jì)時(shí),在正確的地方用通俗的語(yǔ)言說(shuō)明問(wèn)題,以避免歧義,這一點(diǎn)非常重要。

(彩云注:我常常遇到各種出錯(cuò),但出現(xiàn)的提示太過(guò)于術(shù)語(yǔ)化,也沒有提示在正確的地方讓我非??鄲馈#?

圖片

 

7.按鈕要正確合理

從菲茨定律(Fitt’s Law)中我們應(yīng)該知道,目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此,為了將注意力集中在轉(zhuǎn)化按鈕上,按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外,按鈕的大小應(yīng)該易于點(diǎn)擊,避免用戶因嘗試點(diǎn)擊時(shí)不方便而流失。

(彩云注:左側(cè)的按鈕不在正確的決策位置以及按鈕太小,右側(cè)的按鈕簡(jiǎn)潔明了并且符合用戶的心理預(yù)期,能夠讓用戶更快決策并點(diǎn)擊。)

圖片

 

8. 用好色彩心理學(xué)

顏色是UI中不可缺少的部分,它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使UI看起來(lái)更加豐富合理。

(彩云注:左側(cè)的藍(lán)色按鈕顏色并不符合用戶對(duì)于刪除的心理預(yù)期,右側(cè)的紅色按鈕對(duì)用戶的心理預(yù)期有危險(xiǎn)和警告,用紅色代表刪除能夠讓用戶集中注意力關(guān)注這一特殊的操作。)

圖片

 

9. 單列更易保持關(guān)注度

用單列展示內(nèi)容,能更好地幫助用戶掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí),將所有信息垂直對(duì)齊時(shí),能更好的保持用戶關(guān)注度。

圖片

 

10. 優(yōu)先社交媒體賬號(hào)登錄

當(dāng)用戶準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候,把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào),能很好地增加點(diǎn)擊率。

圖片

 

11. 選擇狀態(tài)要清晰

在用戶做選擇的時(shí)候,需要清晰地告訴用戶選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗(yàn)。

(彩云注:左側(cè)的問(wèn)題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過(guò)于豐富,右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有2種,選中和非選中,體驗(yàn)會(huì)更好。)

圖片

 

12. 用留白分組

如果想給信息分組,使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素,空白能讓UI看起來(lái)更加干凈和優(yōu)雅。用線分組的情況適用于類似Twitter、Medium之類的重內(nèi)容平臺(tái)等場(chǎng)景。

圖片

 

13. 控件樣式保持一致

保持設(shè)計(jì)的一致性,能夠降低功能復(fù)雜度并讓用戶更快決策,一致性設(shè)計(jì)讓用戶更快熟悉操作而不需要太多思考。(彩云注:左側(cè)的選項(xiàng)圓角不一致,會(huì)讓用戶思考為什么這里會(huì)有不同,而右側(cè)的一致性選項(xiàng)設(shè)計(jì),能讓用戶忽略內(nèi)容外的干擾。)

圖片

 

14. 搜索中的占位符要用好

在搜索輸入欄添加適當(dāng)?shù)恼嘉环崾居脩艨梢栽谄脚_(tái)上搜索和找到的內(nèi)容,這樣可以提供用戶參考并帶來(lái)更好的用戶體驗(yàn)。

圖片

 

總結(jié)

以上這些就是在設(shè)計(jì)數(shù)字產(chǎn)品體驗(yàn)時(shí)應(yīng)該遵循的14個(gè)基本規(guī)則,這些點(diǎn)雖然基礎(chǔ),但卻經(jīng)常被人忽略,我在星球中幫大家看作品集時(shí)發(fā)現(xiàn)上面提到的這些點(diǎn)出現(xiàn)的是最多的,希望大家可以把這些知識(shí)運(yùn)用到自己的設(shè)計(jì)中,提升UI產(chǎn)品體驗(yàn)。

原文:https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
作者:Ayushi Verma
譯者:彩云Sky
本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

圖片

希望對(duì)大家有幫助,歡迎轉(zhuǎn)發(fā)分享~

原文地址:彩云譯設(shè)計(jì)(公眾號(hào))
作者:彩云Sky
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》想要優(yōu)化好UI作品,這14個(gè)設(shè)計(jì)細(xì)節(jié)一定要檢查到位!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



用戶體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來(lái)看看這些應(yīng)用原理!

seo達(dá)人


 

1、菲茨定

圖片

選中目標(biāo)所需時(shí)間與移動(dòng)距離長(zhǎng)短和目標(biāo)面積大小有關(guān)。(與距離負(fù)相關(guān),與面積正相關(guān))

 

現(xiàn)實(shí)中的應(yīng)

圖片

在商場(chǎng)中尋找洗手間取決于標(biāo)志的大小及步行的距離。為了滿足這兩個(gè)標(biāo)準(zhǔn),標(biāo)志設(shè)計(jì)得更大、更容易接近。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 左側(cè)頁(yè)面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區(qū)分;右側(cè)頁(yè)面CTA按鈕尺寸很大,能讓用戶清晰識(shí)別。

 

2、??硕?/strong>

圖片

決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。

 

現(xiàn)實(shí)中的應(yīng)

圖片

與餐廳相比,快餐店的菜單選項(xiàng)有限。因此顧客點(diǎn)餐速度更快,門店提供的服務(wù)也更快。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在Whatsapp上轉(zhuǎn)發(fā)消息時(shí),會(huì)在“最近聊天”列表上方看到“經(jīng)常聯(lián)系”的3個(gè)好友。這對(duì)用戶來(lái)說(shuō)是一種簡(jiǎn)單的交互,幫助用戶節(jié)省操作時(shí)間。

 

3、共域定律

圖片

被一個(gè)顯而易見的邊框包圍起來(lái)的多個(gè)元素,被視為一個(gè)群組。(從屬于格式塔理論)

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在服裝店中,衣服按照類型被分到不同的架子上來(lái)展示,即使對(duì)這家服裝店一無(wú)所知,顧客也會(huì)將一個(gè)貨架內(nèi)的商品關(guān)聯(lián)成相似的東西。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 過(guò)濾器被封閉在產(chǎn)品頁(yè)面之外的單獨(dú)區(qū)域中,因此可以清楚地識(shí)別左右兩部分的差異。

 

4、雅各布定律

圖片

用戶將大部分時(shí)間花在別人家的網(wǎng)站(產(chǎn)品)上,而不是你的。這意味著他們希望你的網(wǎng)站(產(chǎn)品)跟別人的有相同的使用方式。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

假設(shè)家中的陽(yáng)臺(tái)是一扇推拉門,我們可能希望酒店的陽(yáng)臺(tái)門也以同樣的方式操作。因此如果酒店有一個(gè)滑動(dòng)門,我們可能會(huì)下意識(shí)地先去推門。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 以上是國(guó)外知名的電商網(wǎng)站導(dǎo)航欄設(shè)計(jì),這幾個(gè)網(wǎng)站導(dǎo)航欄中顯示的信息及其結(jié)構(gòu)都非常相似:左側(cè)是品牌標(biāo)志,中間為搜索欄,右側(cè)為其他選項(xiàng)(購(gòu)物車/個(gè)人賬戶)。

 

5、系列位置效應(yīng)

圖片

用戶更容易記住系列中出現(xiàn)的第一項(xiàng)(首因效應(yīng))和最后一項(xiàng)(近因效應(yīng))。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

我們通常更容易記住某個(gè)電話號(hào)碼的前4位或后3位,這條法則也是銀行卡號(hào)被分成4組數(shù)字的原因。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在亞馬遜主頁(yè)上,網(wǎng)站的第一部分總是顯示最重要的內(nèi)容:導(dǎo)航包含logo、搜索和其他重要功能;輪播圖通過(guò)圖形設(shè)計(jì)吸引用戶的目光,引導(dǎo)新的交易或優(yōu)惠。

 

6、馮·雷斯托夫效應(yīng)

圖片

又稱隔離效應(yīng)。當(dāng)存在多個(gè)相似物體時(shí),與眾不同的物體最容易被記住。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在商場(chǎng)購(gòu)物時(shí),相較于普通裝飾的門店,我們更有可能記住或?qū)⒆⒁饬D(zhuǎn)移到具有霓虹燈效果的門店上。

 

設(shè)計(jì)應(yīng)用

圖片

▲ App上有新消息時(shí),會(huì)在圖標(biāo)上用紅點(diǎn)顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導(dǎo)用戶點(diǎn)擊并查看消息。

 

7、審美可用性效應(yīng)

圖片

用戶通常認(rèn)為漂亮的設(shè)計(jì)更易用。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

當(dāng)參觀汽車展廳時(shí),我們通常會(huì)對(duì)汽車精美的展示感到驚嘆,并立即對(duì)這個(gè)品牌產(chǎn)生積極的印象。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當(dāng)訪問(wèn)像愛彼迎這樣干凈簡(jiǎn)潔的網(wǎng)站時(shí),我們會(huì)下意識(shí)地信任這個(gè)產(chǎn)品,也確保了用戶對(duì)品牌的信任。

 

8、峰終定律

圖片

人們?cè)u(píng)論體驗(yàn)優(yōu)劣,大多基于峰值和結(jié)束時(shí)的感受,而不是所有環(huán)節(jié)的平均值。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在足球比賽中,整場(chǎng)的觀看體驗(yàn)將根據(jù)比賽結(jié)束(誰(shuí)獲勝)和比賽高潮(誰(shuí)進(jìn)球最多/比賽中最激動(dòng)人心的時(shí)刻)來(lái)判斷。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在夜晚非常饑餓的時(shí)候,我們使用訂餐App選擇食物時(shí),卻被告知付款失敗。這時(shí)候App界面設(shè)計(jì)的再好看也無(wú)關(guān)緊要,訂餐失敗就是從這次體驗(yàn)中收獲的結(jié)果。

 


 

原文地址:Clip設(shè)計(jì)夾(公眾號(hào))

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用戶體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來(lái)看看這些應(yīng)用原理!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



用設(shè)計(jì)詮釋搜索熱點(diǎn)

seo達(dá)人



圖片

 

設(shè)計(jì)思考及詮釋方法

我們先要去了解用戶是如何消費(fèi)熱點(diǎn)內(nèi)容的,基于用戶情景認(rèn)知鏈路分析用戶在事件消費(fèi)的鏈路,可以分為三個(gè)重要節(jié)點(diǎn):1.熱點(diǎn)環(huán)境的感知;2.熱點(diǎn)事件的理解;3.事件觀點(diǎn)的產(chǎn)生。

圖片

結(jié)合用戶的消費(fèi)路徑,我們將設(shè)計(jì)邏輯框架拆分為三個(gè)層級(jí):

1.氛圍背景層:分層呈現(xiàn)熱度氛圍,輔助用戶感知熱點(diǎn)環(huán)境;

2.信息內(nèi)容層:精細(xì)化拼裝管理,幫助用戶理解熱點(diǎn)事件;

3.功能互動(dòng)層:輕互動(dòng)玩法設(shè)計(jì),激發(fā)用戶參與抒發(fā)事件觀點(diǎn)。

圖片

 

1. 熱點(diǎn)環(huán)境感知:分層呈現(xiàn)熱度氛圍

從氛圍表現(xiàn)層面,助力用戶更快速的辨別事件的熱度及重要程度。設(shè)計(jì)師結(jié)合搜索熱點(diǎn)使用場(chǎng)景以及業(yè)務(wù)時(shí)效性配置訴求,歸類了兩種設(shè)計(jì)表現(xiàn)層次:1.日常熱度氛圍  2. 大事件熱度氛圍

1)第一個(gè)層次:日常熱度氛圍

主要應(yīng)用于熱點(diǎn)新聞場(chǎng)景,時(shí)效性要求高,同時(shí)事件熱度也會(huì)在:“發(fā)酵爆發(fā)消退” 間實(shí)時(shí)變化,設(shè)計(jì)根據(jù)熱度“強(qiáng)弱”程度需求,劃分兩檔視覺展現(xiàn)階梯,以自動(dòng)化的方式展現(xiàn),滿足熱度的實(shí)時(shí)變化需求,輔助用戶感知當(dāng)前事件熱度。“低熱氛圍”弱標(biāo)簽設(shè)計(jì)用以展現(xiàn)上升/今日熱點(diǎn),“高熱氛圍”色彩背景通頂效果+上榜標(biāo)簽用以展現(xiàn)上榜熱點(diǎn)。

如,“馬斯克收購(gòu)?fù)铺亍?/strong>,搜索熱度持續(xù)上升,以第一階梯-標(biāo)簽方式展示低熱氛圍;在 “馬斯克收購(gòu)?fù)铺亍?的事件熱度不斷增長(zhǎng),成為熱榜事件后,以第二階梯 – 高熱氛圍自動(dòng)匹配 ,通過(guò)背景及榜單標(biāo)簽的呈現(xiàn),明確告知用戶當(dāng)前事件的火熱程度。 

圖片

 

2)第二個(gè)層次:大事件熱度氛圍

主要應(yīng)用于熱點(diǎn)大事件或運(yùn)營(yíng)活動(dòng)場(chǎng)景,個(gè)性化展現(xiàn)要求高,同時(shí)事件關(guān)注度及重要程度也不同,設(shè)計(jì)根據(jù)事件的關(guān)注度及重要程度劃分為兩檔階梯,以人工配置的方式展現(xiàn),超強(qiáng)的運(yùn)營(yíng)氛圍,可以讓用戶充分感知當(dāng)前事件的重要程度,“A級(jí)氛圍”頭部疊加場(chǎng)景元素設(shè)計(jì)用以展現(xiàn)大事件,“S級(jí)氛圍”整頁(yè)沉浸式視覺設(shè)計(jì)用以展現(xiàn)重大事件。

如,冬奧會(huì),重大事件,選用第二階梯 S級(jí)氛圍,打造超強(qiáng)的運(yùn)營(yíng)大事件會(huì)場(chǎng)認(rèn)知。

圖片

 

前置突發(fā)大事件氛圍設(shè)計(jì)

近幾年我們不斷的經(jīng)歷各類突發(fā)大事件,如:疫情/暴雨/名人逝世等等,每次突然發(fā)生的事件都讓設(shè)計(jì)師措手不及,匆忙產(chǎn)出運(yùn)營(yíng)氛圍設(shè)計(jì)方案緊急上線,保時(shí)效就很難保障質(zhì)量,因此我們?cè)谙肽懿荒芸偨Y(jié)事件類型提前儲(chǔ)備設(shè)計(jì),以備不時(shí)之需。

不同突發(fā)事件會(huì)牽動(dòng)網(wǎng)友不同的情感情緒,比如河南暴雨,我們?yōu)槭茈y同胞擔(dān)心,為救助工作加油,為逝者哀悼;火箭發(fā)射成功,我們驕傲喝彩;名人結(jié)婚,我們送上溫馨的祝福。不同事件帶來(lái)不同的情感情緒,也要求設(shè)計(jì)師要用準(zhǔn)確的視覺語(yǔ)言表達(dá)。

因此我們?cè)谇爸迷O(shè)計(jì)時(shí)也充分考慮了事件情感因素,通過(guò)對(duì)近一年突發(fā)大事件的歸類梳理,并推導(dǎo)不同細(xì)分場(chǎng)景下的用戶情緒,通過(guò)情緒分類的方式,總結(jié)兩種視覺設(shè)計(jì)表達(dá)形式:1.實(shí)景圖合成效果滿足嚴(yán)肅/莊重/權(quán)威場(chǎng)景情感需求;2.手繪效果滿足積極/歡快/慶祝場(chǎng)景的情感需求。結(jié)合以上思路我們共儲(chǔ)備6大類20個(gè)子分類場(chǎng)景的前置氛圍+金剛位等運(yùn)營(yíng)物料設(shè)計(jì),保障突發(fā)熱點(diǎn)運(yùn)營(yíng)設(shè)計(jì)質(zhì)效。

圖片

圖片

截至22年Q1,前置設(shè)計(jì)已在38個(gè)熱點(diǎn)場(chǎng)景應(yīng)用:

圖片

 

2. 熱點(diǎn)事件理解:內(nèi)容精細(xì)化拼裝管理

為滿足用戶不同事件場(chǎng)景下的信息需求,設(shè)計(jì)結(jié)合百度搜索:主要內(nèi)容區(qū)(主要需求滿足)+ 延展內(nèi)容區(qū)(延展需求滿足)的綜合聚合能力,通過(guò)組件分區(qū)布局+精細(xì)化規(guī)則管理,為熱點(diǎn)場(chǎng)景內(nèi)容的高效拼裝打好體驗(yàn)基礎(chǔ)。

1)主要內(nèi)容區(qū)

主要內(nèi)容區(qū),能夠幫助用戶快速了解事件的主題、時(shí)間及主要內(nèi)容,結(jié)合熱點(diǎn)事件長(zhǎng)期的需求沉淀,設(shè)計(jì)將主要內(nèi)容區(qū)又細(xì)分為主題區(qū)域及內(nèi)容區(qū)域主題區(qū)域可承載拼裝事件主題、事件倒計(jì)時(shí)、會(huì)場(chǎng)分發(fā)導(dǎo)航等主題類組件;內(nèi)容區(qū)域可承載拼裝圖文/視頻/直播等事件主體內(nèi)容分發(fā)組件。通過(guò)不同區(qū)域內(nèi)組件拼裝規(guī)則的制定,業(yè)務(wù)可以快速選擇所需組件進(jìn)行頁(yè)面組織拼裝,達(dá)成分場(chǎng)景個(gè)性化滿足用戶主需求的目標(biāo)。

如:元宵晚會(huì),熱點(diǎn)主要內(nèi)容區(qū) 以“ 晚會(huì)直播時(shí)間倒計(jì)時(shí)+ 各衛(wèi)視晚會(huì)分會(huì)場(chǎng)導(dǎo)航+圖文內(nèi)容 ” 組件支撐起重大晚會(huì)預(yù)熱期的事件主需求滿足。

圖片

因?yàn)橛性O(shè)計(jì)拼裝規(guī)則,不同大事件活動(dòng),各場(chǎng)景內(nèi)容可個(gè)性化滿足需求,交互布局設(shè)計(jì)上又可兼顧橫向一致性。

圖片

 

2)延展內(nèi)容區(qū)

延展內(nèi)容區(qū),能夠幫助用戶了解事件相關(guān)知識(shí)信息或提供事件相關(guān)服務(wù)。業(yè)務(wù)可根據(jù)事件場(chǎng)景需求,選擇多個(gè)延展內(nèi)容模板與主要內(nèi)容區(qū)進(jìn)行拼裝,搭建完整頁(yè)面以呈現(xiàn)不同熱點(diǎn)事件內(nèi)容。

如:俄烏戰(zhàn)爭(zhēng)-戰(zhàn)事場(chǎng)景,脈絡(luò)卡幫助用戶快速了解事件進(jìn)展 ;冬奧會(huì)-賽事場(chǎng)景,數(shù)據(jù)卡幫助可視化呈現(xiàn)賽事進(jìn)展;博鰲亞洲論壇-會(huì)議場(chǎng)景,百科卡幫助用戶科普相關(guān)名詞知識(shí)。

圖片

 

3. 事件觀點(diǎn)產(chǎn)生-輕互動(dòng)玩法強(qiáng)化參與感

通過(guò)氛圍打造和內(nèi)容組織,已經(jīng)達(dá)成用戶需求滿足的目標(biāo),但到此截止,搜索結(jié)果的體驗(yàn)還是理智疏遠(yuǎn)單向的,搜索場(chǎng)景與用戶、用戶與用戶間也無(wú)法產(chǎn)生對(duì)當(dāng)前熱點(diǎn)的討論與態(tài)度表達(dá)。因此設(shè)計(jì)師對(duì)用戶的互動(dòng)行為認(rèn)知習(xí)慣進(jìn)行分析,并采取具體的設(shè)計(jì)策略逐步引導(dǎo)用戶參與互動(dòng)。

圖片

 

1)互動(dòng)喚醒 – 吸引圍觀增強(qiáng)互動(dòng)意愿

優(yōu)化前的熱搜結(jié)果頁(yè),用戶的討論內(nèi)容都是隱藏在資訊落地頁(yè)評(píng)論區(qū)內(nèi),需要點(diǎn)擊進(jìn)內(nèi)容落地頁(yè)內(nèi)才能參與“圍觀”或“討論”,除互動(dòng)氛圍已脫離當(dāng)前場(chǎng)景外,也削弱了用戶對(duì)此事件表態(tài)的參與積極性。

通過(guò)彈幕滾動(dòng)+輸入框組件組合外顯的交互設(shè)計(jì)方式,將用戶討論外露,不僅豐富熱點(diǎn)事件搜索場(chǎng)景的內(nèi)容維度,同時(shí)基于從眾心理,進(jìn)一步刺激用戶的參與欲望。彈幕結(jié)合事件類型配色來(lái)更好貼合熱點(diǎn)事件整體環(huán)境氛圍。

圖片

 

2)情緒抒發(fā)-輕互動(dòng)玩法降低互動(dòng)門檻

而投票表態(tài)+彈幕輕互動(dòng)組合效果設(shè)計(jì),能進(jìn)一步降低用戶交互心理門檻,讓用戶動(dòng)一動(dòng)手指就可以參與其中。在表態(tài)/投票抒發(fā)情感的同時(shí)也可以發(fā)彈幕聊聊對(duì)當(dāng)前熱點(diǎn)事件的看法,使用戶互動(dòng)情緒表達(dá)更充分。

圖片

 

3)驚喜反饋-強(qiáng)化視效打造記憶點(diǎn)

原有設(shè)計(jì)風(fēng)格,無(wú)法在去世祭奠、頒發(fā)勛章等莊重嚴(yán)肅場(chǎng)景精準(zhǔn)的表達(dá)視覺情感,無(wú)互動(dòng)反饋狀態(tài)僅有互動(dòng)前后狀態(tài)變化。

結(jié)合熱點(diǎn)場(chǎng)景積極外放情緒及莊重內(nèi)斂情緒,視覺主要從形/質(zhì)兩個(gè)維度進(jìn)行優(yōu)化升級(jí),并增加互動(dòng)反饋動(dòng)效,同時(shí)運(yùn)營(yíng)可結(jié)合具體事件主題配置,綜合提升互動(dòng)驚喜效果,打造產(chǎn)品記憶點(diǎn)。

視覺層:通過(guò)更立體的形態(tài)和更豐富的層次質(zhì)感,更精準(zhǔn)的表達(dá)情感

圖片

動(dòng)效反饋層:以主圖形+輔助元素,通過(guò)符合場(chǎng)景氛圍的動(dòng)態(tài)效果設(shè)計(jì),更充分的表達(dá)情感

[優(yōu)化輸出圖像]

[優(yōu)化輸出圖像]

運(yùn)營(yíng)主題配置:在日常反饋基礎(chǔ)上,增加運(yùn)營(yíng)主題配置層級(jí),為特定主題場(chǎng)景提供定制反饋效果

源圖像

 

寫在最后

通過(guò)熱點(diǎn)環(huán)境感知分層呈現(xiàn)、內(nèi)容組件合理布局拼裝滿足等設(shè)計(jì)手段,助力搜索平臺(tái)以更高效豐富的內(nèi)容展現(xiàn)形態(tài)應(yīng)對(duì)全年3萬(wàn)+熱點(diǎn)大事件運(yùn)營(yíng)。會(huì)場(chǎng)拼裝呈現(xiàn)系統(tǒng)的應(yīng)用場(chǎng)景也在不斷擴(kuò)展,如營(yíng)銷活動(dòng)、品牌造節(jié)等。設(shè)計(jì)不會(huì)止步于此,我們將基于用戶需求不斷探索深耕,為用戶呈現(xiàn)更快速、準(zhǔn)確、全面、有溫度的搜索熱點(diǎn)體驗(yàn)。 

 

原文地址:百度MEUX(公眾號(hào))

作者:百度APP用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用設(shè)計(jì)詮釋搜索熱點(diǎn)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



做了近百個(gè)網(wǎng)頁(yè),總結(jié)的高質(zhì)量設(shè)計(jì)方法

seo達(dá)人


圖片

圖片

 

0設(shè)計(jì)網(wǎng)頁(yè)中遇到的問(wèn)題

面對(duì)企業(yè)級(jí)中后臺(tái)龐大且復(fù)雜的集合,會(huì)面臨各類問(wèn)題:

  • 業(yè)務(wù)多,資源少
本多個(gè)需求同時(shí)跟進(jìn),項(xiàng)目多且雜從而產(chǎn)生超負(fù)荷。也不便于更好地理解業(yè)務(wù)。
  • 人力成本高
設(shè)計(jì)資源有限,設(shè)計(jì)完成后需要和不同業(yè)務(wù)線開發(fā)進(jìn)行多次設(shè)計(jì)走查,影響設(shè)計(jì)師提效。
  • 沒有品牌性
針對(duì)b端產(chǎn)品,多樣性設(shè)計(jì)無(wú)法形成品牌特性,傳達(dá)品牌特色,導(dǎo)致中臺(tái)業(yè)務(wù)線繁多但不“精致”
                         
  • 體驗(yàn)差

官網(wǎng)設(shè)計(jì)中也有很多相似功能,面對(duì)繁多需求,設(shè)計(jì)者快速做出響應(yīng)會(huì)產(chǎn)生重復(fù)勞動(dòng)成本。只能做到滿足功能,用戶體驗(yàn)并不是很友好。

圖片

 

0突破問(wèn)題

通過(guò)總結(jié)之前的工作,發(fā)現(xiàn)很多設(shè)計(jì)內(nèi)容有50%以上的重復(fù)率,我們要做的是將這50%重復(fù)率形成設(shè)計(jì)體系化,建立資源整合,搭建規(guī)范化官網(wǎng)模塊,并把模塊設(shè)計(jì)反推給產(chǎn)品,在提高設(shè)計(jì)效率的同時(shí)也減少產(chǎn)品工作,減少協(xié)同成本。

通過(guò)“收集需求——整合歸納——定義組件——代碼搭建“ 的過(guò)程提升設(shè)計(jì)效率。       

  • 第一步:整合資源,模塊的確立

整合各個(gè)業(yè)務(wù)線資源,并根據(jù)業(yè)務(wù)系統(tǒng)進(jìn)行分類:數(shù)據(jù)中臺(tái),技術(shù)中臺(tái),業(yè)務(wù)中臺(tái)。面對(duì)這三大類別,目前官網(wǎng)需求量會(huì)達(dá)到幾十個(gè),而面這些繁多網(wǎng)站需求,首先要做的就是整合分類。

 

通過(guò)對(duì)對(duì)業(yè)務(wù)線歸類,統(tǒng)計(jì)出高頻15+個(gè)組件模塊:

Banner、產(chǎn)品優(yōu)勢(shì)、產(chǎn)品特色、案例、信息內(nèi)容、信息流程、合作方、聯(lián)系我們、關(guān)于我們、使用流程、功能介紹、手機(jī)\電腦信息展示、合作方、地理地圖、其他模塊等…

圖片

  • 第二步:模塊梳理歸類

并更具根據(jù)模塊類別的復(fù)用率進(jìn)行再次梳理,產(chǎn)出設(shè)計(jì)模版。模版根據(jù)設(shè)計(jì)形式、排版布局等方面進(jìn)行進(jìn)一步延展,復(fù)用率高的模塊對(duì)應(yīng)模板更豐富。

圖片

 

0設(shè)計(jì)語(yǔ)言(理念)的建立與模塊產(chǎn)出

  • 設(shè)計(jì)風(fēng)格建立

視覺體系上,B端產(chǎn)品不同于C端,設(shè)計(jì)更多為體驗(yàn)服務(wù),色彩的豐富度相對(duì)較弱,單一。要突出b端設(shè)計(jì),我們決定從精致性上為切入點(diǎn),選定“輕擬態(tài)”風(fēng)格,即突出設(shè)計(jì)的細(xì)節(jié)性又不會(huì)因?yàn)檫^(guò)度設(shè)計(jì)影響內(nèi)容。并根據(jù)業(yè)務(wù)體系與設(shè)計(jì)風(fēng)格,完善設(shè)計(jì)語(yǔ)言關(guān)鍵詞提煉:科技、高效、簡(jiǎn)約。

 圖片         
  • 字體與顏色規(guī)范

色彩能夠起到視覺語(yǔ)言傳達(dá)和信息承載作用。企業(yè)級(jí)產(chǎn)品延用了matrix 的配色體系,以藍(lán)色調(diào)為主色,同時(shí)模塊產(chǎn)出深淺色系,便于多方面選擇。

圖片圖片

  • 設(shè)計(jì)布局

采用刪格系統(tǒng)定義布局,根據(jù)首頁(yè)和內(nèi)頁(yè)展示形式進(jìn)行基礎(chǔ)布局

圖片         
  • icon再創(chuàng)新

圖標(biāo)也進(jìn)行三大層級(jí)劃分,以應(yīng)用于不同場(chǎng)景:

圖片

3D圖標(biāo)

3d質(zhì)感圖標(biāo)。用于重要層級(jí)模塊,數(shù)量控制4個(gè)以內(nèi)。

圖片

圖片

玻璃球圖標(biāo)

磨砂玻璃風(fēng)格已經(jīng)廣泛應(yīng)用于ui產(chǎn)品中的很多地方,我們?cè)谀ド安AЩA(chǔ)上,創(chuàng)新新的icon風(fēng)格“玻璃球”icon,該風(fēng)格能更換的和輕質(zhì)感設(shè)計(jì)融合在一起,用幾何元素設(shè)計(jì),通過(guò)拼接組合和系統(tǒng)icon設(shè)計(jì),能夠在短時(shí)間內(nèi)快速產(chǎn)出立體icon,適用少于8個(gè)類別的模塊icon。

圖片 圖片

圖片       

圖片

圖片

輕擬態(tài)線性圖標(biāo)

3d線性圖標(biāo)適用于多場(chǎng)景模塊,可大范圍出現(xiàn)在頁(yè)面中。

圖片         

三維設(shè)計(jì)

banner模塊分為3d三維風(fēng)格和二維平面圖片,根據(jù)不同業(yè)務(wù)線定義使用規(guī)則。如商業(yè),公益相關(guān)產(chǎn)品,選定圖片作為banner展示更能準(zhǔn)確傳達(dá)信息,而技術(shù)類官網(wǎng)用3d效果更能傳遞科技性。

圖片

圖片

同時(shí)定義多種banner布局:左文右圖,文字居中,banner加搜索模塊,圖片banner等,

可根據(jù)需求自由選擇。

圖片

圖片

圖片

幾何化形的裝飾元素

為了體現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的“空間感” 網(wǎng)頁(yè)設(shè)計(jì)中加入幾何元素穿插,根據(jù)業(yè)務(wù)品牌語(yǔ)言 圓、三角、方定義輔助裝飾元素。(圓-業(yè)務(wù) ;方-技術(shù) ;三角-數(shù)據(jù)圓、三角、方定義設(shè)計(jì)幾何元素)

圖片

圖片

多樣性變化 

為官網(wǎng)模塊的產(chǎn)出依據(jù)業(yè)務(wù)線,在建立規(guī)范化組件的同時(shí)也需要考慮設(shè)計(jì)中的“區(qū)別性”業(yè)務(wù)線-營(yíng)銷產(chǎn)品,更多體現(xiàn)商業(yè)性質(zhì)設(shè)計(jì)采用暗色系,而技術(shù)類官網(wǎng)更多體現(xiàn)科技感,加入3d元素。在同一模塊的設(shè)計(jì)也加入背景白色/暗色和模塊的亮色/暗色。

圖片

圖片

圖片

 

0實(shí)際應(yīng)用

目前我們已經(jīng)產(chǎn)出50+模塊,10個(gè)+網(wǎng)頁(yè)模版,通過(guò)代碼化,建立“云搭”這一網(wǎng)頁(yè)生成工具,建立中臺(tái)系統(tǒng)在生成平臺(tái),目前已經(jīng)支持多個(gè)業(yè)務(wù)線。從設(shè)計(jì)產(chǎn)出模塊到開發(fā)實(shí)現(xiàn)模塊代碼話再到產(chǎn)品拼接選擇,整體過(guò)程節(jié)約了設(shè)計(jì)資源,為產(chǎn)品研發(fā)提效提供一站式解決方案。

后續(xù)我們將發(fā)布云搭二期文章,會(huì)為大家介紹設(shè)計(jì)師是如何從產(chǎn)品、交互思維,自主研發(fā)“云搭”這款工具的,敬請(qǐng)期待。

圖片

圖片

原文地址:58UXD(公眾號(hào))

作者:環(huán)鐵藝術(shù)家

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》做了近百個(gè)網(wǎng)頁(yè),總結(jié)的高質(zhì)量設(shè)計(jì)方法

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



交互設(shè)計(jì)師專業(yè)能力體系

seo達(dá)人


一、交互設(shè)計(jì)師能力模型圖

圖片

 

二、交互崗專業(yè)能力描述

能力模型圖中的每個(gè)點(diǎn)都可以很詳細(xì)的寫一篇專題文章,本文不做過(guò)多展開,只是拋磚引玉:大家說(shuō)明具體能力維度可提升落地的點(diǎn)有哪些。其中一些能力點(diǎn)我之前的文章中也有提及,以后有機(jī)會(huì)我會(huì)針對(duì)其他能力點(diǎn)單獨(dú)梳理文章。

基礎(chǔ)專業(yè)能力 

圖片

1.對(duì)業(yè)務(wù)與產(chǎn)品的理解

一直在強(qiáng)調(diào)交互設(shè)計(jì)師要盡可能前置到業(yè)務(wù)中,在設(shè)計(jì)工作的起始階段對(duì)業(yè)務(wù)背景、業(yè)務(wù)目的、現(xiàn)階段存在的問(wèn)題、產(chǎn)品規(guī)劃有一定程度的了解,為后續(xù)設(shè)計(jì)方案提供決策依據(jù)。

除了承接上游需求,許多設(shè)計(jì)師自主驅(qū)動(dòng)的需求都建立在對(duì)業(yè)務(wù)的綜合了解基礎(chǔ)之上,如果僅是體驗(yàn)設(shè)計(jì)層面的優(yōu)化,實(shí)踐中很難獲得上下游同事對(duì)其價(jià)值的支持和認(rèn)可,想要落地就更加無(wú)從談起了。

可以從以下幾點(diǎn)逐步加強(qiáng)對(duì)各業(yè)務(wù)線、各終端產(chǎn)品的理解:

  • 了解各個(gè)業(yè)務(wù)線或產(chǎn)品的階段性或長(zhǎng)遠(yuǎn)規(guī)劃。
  • 多與產(chǎn)品經(jīng)理、運(yùn)營(yíng)等上游同事溝通,深入了解產(chǎn)品發(fā)展的歷史緣由。
  • 通過(guò)用研分析逐步了解不同產(chǎn)品的優(yōu)勢(shì)與不足。
2。需求分析與設(shè)計(jì)規(guī)劃

需求分析主要是指與產(chǎn)品經(jīng)理的協(xié)作配合,有時(shí)候也會(huì)直接與運(yùn)營(yíng)、銷售或者客戶對(duì)接。交互設(shè)計(jì)師介入一般有兩種方式:

A. 業(yè)務(wù)方訴求明確,產(chǎn)品需求初稿規(guī)劃完成,此時(shí)交互設(shè)計(jì)師介入,基于產(chǎn)品需求目的給出體驗(yàn)設(shè)計(jì)層面的建議。

B. 只明確了要實(shí)現(xiàn)的業(yè)務(wù)目標(biāo),產(chǎn)品需求尚未明確,需要交互設(shè)計(jì)師與產(chǎn)品經(jīng)理或業(yè)務(wù)方一起溝通共創(chuàng),相當(dāng)于協(xié)助產(chǎn)品明確需求的過(guò)程。

在這個(gè)階段,交互設(shè)計(jì)師需要注意以下幾點(diǎn):

  • 了解需求的背景與目的,需求方案的合理性,針對(duì)需求不合理之處提出質(zhì)疑并綜合考慮給出建議方案。
  • 需求分析與設(shè)計(jì)規(guī)劃時(shí)要盡可能平衡業(yè)務(wù)訴求、用戶體驗(yàn)、技術(shù)可行性與實(shí)現(xiàn)成本等因素。
  • 查看需求文檔雖然是基本功,但是對(duì)于新人而言這里容易踩的坑比較多。不同產(chǎn)品經(jīng)理描述風(fēng)格與方式不同,也難免有一些規(guī)則遺漏,所以查看時(shí)若存在問(wèn)題及時(shí)與產(chǎn)品經(jīng)理溝通。
  • 經(jīng)過(guò)需求分析,交互設(shè)計(jì)師可以推導(dǎo)出整體的設(shè)計(jì)目標(biāo)與設(shè)計(jì)策略。
3.設(shè)計(jì)規(guī)范與組件

設(shè)計(jì)規(guī)范是基于設(shè)計(jì)語(yǔ)言或設(shè)計(jì)指南而來(lái)的,不同公司產(chǎn)品會(huì)有不同的定義。根據(jù)業(yè)務(wù)復(fù)雜程度和產(chǎn)品特性,一些公司會(huì)梳理自己的設(shè)計(jì)規(guī)范,交互設(shè)計(jì)師重點(diǎn)關(guān)注交互層面的規(guī)范,也需要對(duì)視覺規(guī)范有一定了解。

設(shè)計(jì)組件是以設(shè)計(jì)規(guī)范為指導(dǎo)原則,為提升產(chǎn)研協(xié)作和開發(fā)效率而設(shè)定的UI組件庫(kù)。這里需要注意:

  • 設(shè)計(jì)組件一般分為基礎(chǔ)組件和業(yè)務(wù)組件,基礎(chǔ)組件類似Ant Design;業(yè)務(wù)組件則是依據(jù)公司具體產(chǎn)品使用場(chǎng)景決定的,比如電商類應(yīng)用:產(chǎn)品列表的產(chǎn)品信息、直播模塊等頻繁被調(diào)用的、由多個(gè)基礎(chǔ)組件組合而成的內(nèi)容。
  • 由于不同終端交互設(shè)置和操作方式存在差異,所以可能會(huì)有針對(duì)移動(dòng)端、Pad端、Web端、TV端等多終端設(shè)計(jì)組件。

大家可以參考iOS人機(jī)交互指南與谷歌的MD系統(tǒng)級(jí)設(shè)計(jì)規(guī)范;目前市場(chǎng)上有許多開源的設(shè)計(jì)基礎(chǔ)組件,比如Ant design、滴滴、騰訊、京東、有贊、餓了么等。

4.交互文檔

設(shè)計(jì)方案具象化的呈現(xiàn)依靠“規(guī)范的交互文檔”,輸出交互文檔注意以下幾點(diǎn):

  • 了解并繪制信息結(jié)構(gòu)圖

    交互設(shè)計(jì)師繪制的信息結(jié)構(gòu)圖通常用于“信息層級(jí)的梳理”。比如一個(gè)網(wǎng)站或APP的導(dǎo)航劃分與層級(jí),可以通過(guò)信息結(jié)構(gòu)圖直觀的呈現(xiàn),也可以更直觀的判斷與其他內(nèi)容的關(guān)聯(lián)關(guān)系,確認(rèn)是否符合用戶的心理模型。可參考我之前寫過(guò)的文章:你對(duì)信息架構(gòu)圖了解多少?

  • 了解并繪制任務(wù)流程圖

    對(duì)于邏輯判斷比較復(fù)雜的項(xiàng)目,比如涉及多角色、多狀態(tài)、多任務(wù)流、多終端時(shí),任務(wù)流程圖有助于設(shè)計(jì)師及相關(guān)查閱的人更快更清晰的了解需求??蓞⒖嘉抑皩戇^(guò)的有關(guān)流程圖的文章:案例分析:繪制流程圖需要注意哪些事項(xiàng)?

  • 繪制交互原型

    關(guān)于如何繪制規(guī)范的原型圖,幾年前我寫過(guò)一篇相關(guān)文章,里面提到的基礎(chǔ)原則仍然適用:如何設(shè)計(jì)規(guī)范的原型圖?

  • 交互說(shuō)明的書寫要求

    關(guān)于如何將交互說(shuō)明盡可能寫的完備和細(xì)致,可以參考我之前寫的兩篇文章:

    宏觀角度:原型圖的交互說(shuō)明該怎么寫?

    微觀角度:原型圖的交互說(shuō)明該怎么寫

5.交互基礎(chǔ)原則

這部分內(nèi)容涉及到交互層面的一些“參考規(guī)則”,之所以叫參考規(guī)則是因?yàn)椴皇潜仨氉袷?,可能針?duì)不同業(yè)務(wù)和產(chǎn)品會(huì)做適當(dāng)補(bǔ)充或刪減。比如頁(yè)面打開方式研究、尼爾森可用性原則等。可以通過(guò)閱讀一些專業(yè)書籍掌握理論知識(shí),然后在實(shí)踐項(xiàng)目中應(yīng)用總結(jié)。

6.主持各類溝通會(huì)與評(píng)審會(huì)

交互設(shè)計(jì)師在日常工作流程中,會(huì)參與不同類型的會(huì)議,比如需求討論會(huì)、需求評(píng)審會(huì)、設(shè)計(jì)評(píng)審會(huì)(交互與視覺內(nèi)評(píng)與外評(píng))、測(cè)試用例評(píng)審會(huì)、開發(fā)問(wèn)題討論會(huì)等。有的會(huì)議交互設(shè)計(jì)師作為參與方,有的作為主導(dǎo)方,因此需要對(duì)會(huì)議節(jié)奏和效率綜合把控。

對(duì)于新人或初級(jí)交互,可以選擇性地參加其他交互同事組織的以上相關(guān)會(huì)議,了解和熟悉如何高效開會(huì)達(dá)成會(huì)議目的。

7.評(píng)估設(shè)計(jì)排期

在日常項(xiàng)目流程中,需求評(píng)審過(guò)后交互設(shè)計(jì)排期需要首先給到,下游的視覺設(shè)計(jì)師、前端研發(fā)、甚至包括后端研發(fā)、以及測(cè)試工程師都需要根據(jù)交互文檔給出各自更加精確的排期。

因此評(píng)估交互排期在項(xiàng)目流轉(zhuǎn)過(guò)程中非常重要,如果評(píng)估排期少了無(wú)法按時(shí)交付,可能會(huì)造成下游同事時(shí)間不夠,甚至導(dǎo)致項(xiàng)目延期;如果評(píng)估排期多了,對(duì)于有上線時(shí)間要求的項(xiàng)目,總體時(shí)間可能又會(huì)不夠。

所以交互設(shè)計(jì)師只要做到根據(jù)自己手頭時(shí)間客觀評(píng)估即可。這里對(duì)于新手或初級(jí)交互而言,有兩點(diǎn)注意事項(xiàng):

  • 承接的項(xiàng)目類型由簡(jiǎn)單到復(fù)雜過(guò)渡。
  • 交互排期需要包括“需求溝通時(shí)間、設(shè)計(jì)方案輸出時(shí)間、評(píng)審時(shí)間、評(píng)審后調(diào)整時(shí)間等”,剛開始排期可以給自己多預(yù)留1-2天。

對(duì)于一些項(xiàng)目周期緊張或者頻繁變更,導(dǎo)致設(shè)計(jì)輸出時(shí)間增加的需求屬于特殊情況,需要另當(dāng)別論。

8.明確交互驗(yàn)收內(nèi)容

關(guān)于交互驗(yàn)收的流程和驗(yàn)收的具體內(nèi)容,我之前有梳理成一篇文章可供參考:如何做好交互驗(yàn)收?

9.軟件工具

既需要熟練使用設(shè)計(jì)相關(guān)的軟件工具,比如交互常用的Axure、Figma、思維導(dǎo)圖工具等;也需要跟上“軟件出新的步伐”,比如Figma這種云端多人協(xié)作的設(shè)計(jì)工具誕生之后,過(guò)往使用Axure的交互設(shè)計(jì)師和使用Sketch的視覺設(shè)計(jì)師,都對(duì)它青睞有加。

 

進(jìn)階專業(yè)能力

圖片
1.對(duì)用戶與使用場(chǎng)景的理解
這塊屬于用研相關(guān)的內(nèi)容,對(duì)于設(shè)計(jì)師而言一直在強(qiáng)調(diào)“平衡商業(yè)目標(biāo)與用戶體驗(yàn)”。通過(guò)參與或者使用一些定性或定量的用戶研究方法,去真正理解產(chǎn)品對(duì)應(yīng)的用戶特征、用戶想法和用戶使用場(chǎng)景。我們可以通過(guò)以下方式逐步提升用研能力:
  • 查閱公司內(nèi)部已沉淀積累的用研資料。
  • 掌握并應(yīng)用常用的用研方法,如“體驗(yàn)走查、競(jìng)品分析、AB測(cè)試、可用性測(cè)試、問(wèn)卷調(diào)研、用戶訪談等”。
這里有兩點(diǎn)注意事項(xiàng):
  • 有些公司可能沒有資源推進(jìn)用戶研究,但至少你需要先掌握相關(guān)理論知識(shí),學(xué)到的有價(jià)值的東西在未來(lái)總會(huì)用到的;
  • 還有一些公司有專門的用研部門,在用研方法和工具使用方面會(huì)更加專業(yè),這種情況設(shè)計(jì)師與用戶研究員協(xié)作配合會(huì)更加高效。
2.數(shù)據(jù)意識(shí)和數(shù)據(jù)分析能力
許多設(shè)計(jì)師在項(xiàng)目中估計(jì)都在思考一個(gè)問(wèn)題:設(shè)計(jì)如何賦能業(yè)務(wù)增長(zhǎng)?既然要衡量,那么數(shù)據(jù)指標(biāo)就是最客觀的依據(jù)了,數(shù)據(jù)雖然不能完整體現(xiàn)設(shè)計(jì)價(jià)值,但至少可以驗(yàn)證部分設(shè)計(jì)方案的優(yōu)劣。這里設(shè)計(jì)師需要注意以下兩點(diǎn):
  • 在日常工作流程中具備數(shù)據(jù)意識(shí):無(wú)論是需求前期的分析階段,還是設(shè)計(jì)開始實(shí)施之前,亦或是需求上線后的效果復(fù)盤,數(shù)據(jù)都作為有力的客觀佐證,為你的設(shè)計(jì)決策提供依據(jù)。
  • 培養(yǎng)數(shù)據(jù)分析能力:實(shí)際項(xiàng)目的數(shù)據(jù)分析過(guò)程可能會(huì)非常復(fù)雜,涉及到不同類型的數(shù)據(jù)指標(biāo)、數(shù)據(jù)分析方法的應(yīng)用、數(shù)據(jù)查看與配置工具、復(fù)雜的業(yè)務(wù)因素等等。需要你對(duì)業(yè)務(wù)和數(shù)據(jù)都比較了解,是一種綜合能力的體現(xiàn),需要日積月累的打磨。
3.發(fā)現(xiàn)問(wèn)題的主動(dòng)意識(shí)
在工作中無(wú)論是同事還是上級(jí)領(lǐng)導(dǎo),都特別喜歡態(tài)度與行動(dòng)積極的人。不要總是等著所謂的上游或者上級(jí)安排任務(wù),自驅(qū)力要強(qiáng),隨著工作經(jīng)驗(yàn)的累積,主動(dòng)的發(fā)現(xiàn)問(wèn)題、尋找解決方案、并推進(jìn)問(wèn)題解決。這也是區(qū)分不同水平設(shè)計(jì)師的標(biāo)準(zhǔn)之一。
4.思維方式
從認(rèn)知心理學(xué)的角度分析,做一件事情經(jīng)過(guò)“思想-決策-行為-結(jié)果-反饋”的過(guò)程,之后便進(jìn)入了這個(gè)過(guò)程的一種正向或負(fù)向循環(huán),所以思維方式是決定最終結(jié)果的本源。
對(duì)于產(chǎn)品設(shè)計(jì)者而言,需要重點(diǎn)打磨這幾項(xiàng)思維能力:
  • 邏輯思維:分析和拆解復(fù)雜問(wèn)題的能力。
  • 產(chǎn)品思維:多維度考慮用戶需求與業(yè)務(wù)訴求。
  • 數(shù)據(jù)思維:掌握數(shù)據(jù)的收集、分析和應(yīng)用。
  • 系統(tǒng)思維:逐步學(xué)會(huì)結(jié)構(gòu)化、體系化地看待問(wèn)題。
5.視覺審美
目前在大多數(shù)公司有明確的交互崗和視覺崗,在工作流程中各有專攻,交互設(shè)計(jì)師在產(chǎn)研流程中發(fā)揮“承上啟下”的作用,所以需要了解視覺層面的理論知識(shí),具備初級(jí)的視覺輸出能力。
一些公司設(shè)定了“體驗(yàn)設(shè)計(jì)崗”,雖然號(hào)稱是全棧型設(shè)計(jì)師,但專業(yè)能力還是有主輔性:比如主要專業(yè)能力偏交互,也具備一定的視覺專業(yè)能力。在互聯(lián)網(wǎng)發(fā)展的早期只有視覺崗位,后來(lái)誕生了交互崗位,目前所謂的全棧體驗(yàn)設(shè)計(jì)師也是從最初的一個(gè)角色蛻變而來(lái)的。
各自分工協(xié)作有助于產(chǎn)品迭代的高效性,交互偏向于業(yè)務(wù)和產(chǎn)品端,注重邏輯梳理和需求分析;視覺重點(diǎn)是表現(xiàn)層、品牌調(diào)性和運(yùn)營(yíng)活動(dòng)的形象展現(xiàn)。

 

通用能力

這部分內(nèi)容我之前特意寫過(guò)相應(yīng)的文章,參見:交互設(shè)計(jì)師該如何提升“軟實(shí)力”?

 

個(gè)人影響力

圖片
相信每位產(chǎn)品設(shè)計(jì)從業(yè)者在職業(yè)生涯中都處于不斷升級(jí)打怪的狀態(tài),組織內(nèi)你希望能夠持續(xù)晉升,組織外可能有人希望通過(guò)社交加強(qiáng)專業(yè)交流和學(xué)習(xí)。無(wú)論組織內(nèi)外,建立個(gè)人影響力的有效方式大概有以下幾點(diǎn):
  • 設(shè)計(jì)分享

    不限于具體形式,包括日常項(xiàng)目總結(jié)、軟件工具使用、設(shè)計(jì)方法論應(yīng)用等。對(duì)內(nèi)分享促進(jìn)部門內(nèi)學(xué)習(xí)提升;對(duì)外通過(guò)輸出專業(yè)文章等方式分享,沉淀積累的同時(shí),也能幫助有需要的人,順帶還能結(jié)交一些靠譜的朋友,不亦樂(lè)乎!

  • 設(shè)計(jì)指導(dǎo)

    當(dāng)你已經(jīng)是有幾年工作經(jīng)驗(yàn)的中高階設(shè)計(jì)師,帶教新人是一種傳承責(zé)任,我們都是從初出茅廬一步步經(jīng)歷過(guò)來(lái)的,非常理解眼前這個(gè)行業(yè)小白有多么渴望在正確的指引下持續(xù)努力。多給予別人幫助,畢竟予人玫瑰,手留余香嘛!

  • 設(shè)計(jì)創(chuàng)新

    許多人一聽這兩個(gè)字就覺得有點(diǎn)可笑,該做的事情還沒做好呢就談創(chuàng)新?其實(shí)創(chuàng)新在我理解更多是一種“微創(chuàng)新”,可能會(huì)體現(xiàn)在你的每一次需求洞察中、設(shè)計(jì)方案的細(xì)節(jié)中,不要小看微創(chuàng)新,點(diǎn)滴積累之后,你會(huì)比別人更有想法和競(jìng)爭(zhēng)力。

 

寫在最后:

設(shè)計(jì)師不能總是輸出,更要持續(xù)輸入才會(huì)有源源不斷的創(chuàng)造力!想要系統(tǒng)地學(xué)習(xí)專業(yè)知識(shí),性價(jià)比最高、成本最低、也最靠譜的方式是系統(tǒng)性地“閱讀專業(yè)書”。后面我會(huì)寫一個(gè)系列的專欄文章推薦“設(shè)計(jì)師必讀的專業(yè)書籍”。

 

原文地址:人人都是產(chǎn)品經(jīng)理

作者:Viksea

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)?交互設(shè)計(jì)師專業(yè)能力體系

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



Behance 首頁(yè)推薦的作品集為什么這么高級(jí)?為你拆解其中7個(gè)秘密

seo達(dá)人


1、錯(cuò)開對(duì)齊

如果你對(duì)自己的排版不是太自信,又擔(dān)心排版太死板,錯(cuò)開展示是一個(gè)很容易上手的技巧。只需要把界面稍微錯(cuò)開一下,展示效果就會(huì)好很多。下面就是一些Behance大佬用這種手法做的展示效果,可以從背景,作品擺放比例,留白,間距和錯(cuò)開幅度上進(jìn)行研究學(xué)習(xí)。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

2、增加層次感

為了增加展示細(xì)節(jié),豐富層次是一個(gè)非常好用的展示技巧。如果你的作品界面在視覺上比較寡淡,那么把一些界面元素提取出來(lái),利用投影加多層次感,視覺效果上就可以很快得到提升。這個(gè)技巧在執(zhí)行上也比較簡(jiǎn)單,關(guān)鍵要注意投影的大小和顏色,千萬(wàn)別做的太重。

圖片

圖片

圖片

圖片

 

3、出界設(shè)計(jì)

有時(shí)候,一些界面元素確實(shí)視覺效果好的元素太少,比如很多B端表格的界面,用這種方法可以增加畫面中的圖片率,將本來(lái)隱藏在界面外的圖片進(jìn)行出界展示,更多利用圖片提升畫面的設(shè)計(jì)感。

圖片

圖片

圖片

圖片

圖片

甚至可以將banner圖中的元素進(jìn)行出界,增加設(shè)計(jì)感。

圖片

 

4、傾斜設(shè)計(jì)

傾斜設(shè)計(jì),也是一個(gè)提升設(shè)計(jì)感的常用技巧。先在正視角度下擺好,利用技巧1錯(cuò)開一下界面,然后整體旋轉(zhuǎn)一個(gè)角度就能很好的提升畫面表現(xiàn)力,增加設(shè)計(jì)感。但要注意用這個(gè)方法的時(shí)候,要保證界面元素的清晰度,不要出現(xiàn)鋸齒。

傾斜后也可以適當(dāng)增加一些圓點(diǎn)點(diǎn)綴

圖片

把一些UI 組件斜角后,結(jié)合層次感設(shè)計(jì)技巧

圖片

圖片

傾斜設(shè)計(jì)+出界+底部方塊裝飾

圖片

傾斜設(shè)計(jì)后,增加一些半透明的裝飾層次設(shè)計(jì)

圖片

 

5、3D厚度設(shè)計(jì)

現(xiàn)在3D設(shè)計(jì)非常流行,把自己做的界面增加一定的厚度然后結(jié)合傾斜設(shè)計(jì),也能快速提升界面的設(shè)計(jì)感。

但因帶有傾斜,很容易出現(xiàn)鋸齒。我有一個(gè)常用的小技巧是做的時(shí)候可以把圖做大一倍,然后再縮小放到作品集中,就能提升清晰度。例如我要做一份1920×1080的PPT,那么我就會(huì)先做一個(gè)2x 尺寸,也就是3840×2160然后再縮小,會(huì)比你直接做1x尺寸的圖要清晰很多。

把界面增加3D厚度后,再稍微加一些比較輕量的3D裝飾元素,常用的有小球、方塊等3D元素能讓畫面效果更好。

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

6、增加底圖設(shè)計(jì)

這個(gè)技巧要注意讓界面與背景圖自然融合,關(guān)鍵在于需要找到一張非常好的圖片,考驗(yàn)選圖的能力,存在一定的風(fēng)險(xiǎn)。如果你對(duì)這種包裝方式不大放心的話,建議你謹(jǐn)慎使用。

比如這張圖,細(xì)節(jié)點(diǎn)在于界面左邊淺色配上底圖中左邊的白,右邊深色界面搭配右邊深色的山體顏色,看起來(lái)就很和諧。

圖片

下面這張圖用了一個(gè)跟界面中配圖同一個(gè)調(diào)性的圖片,為了防止干擾界面,還加了一點(diǎn)高斯模糊,效果也非常不錯(cuò)。

圖片

這張圖的底圖用了一些比較具有設(shè)計(jì)感的圖形,整體比較簡(jiǎn)潔高級(jí)

圖片

常用的一些底圖元素還有圓形,點(diǎn)等等

圖片

圖片

圖片

圖片

用一些插畫元素作為底圖也是非常不錯(cuò)的

圖片

 

7、套用樣機(jī)來(lái)展示

前面提到的很多實(shí)用技巧,能看到都是不需要用樣機(jī)的,我自己更傾向于不用手機(jī)模型來(lái)展示,即使要用也是比較輕量的那種。有看過(guò)不少同學(xué)的作品集,其中的樣機(jī)用的太過(guò)了,不知道的還以為你成了賣手機(jī)的作品集。這也是我放到最后一條來(lái)說(shuō)的原因,我更推薦你在不使用樣機(jī)的情況下把自己的作品展示做好。

當(dāng)然,如果用樣機(jī)也沒什么大問(wèn)題,原則還是為作品服務(wù)的,保證清晰度,不搶作品本身的視覺就OK。用上了樣機(jī),它就成了你作品的一部分,要保證樣機(jī)是最新的,且質(zhì)量要高。

關(guān)于樣機(jī)的話,彩云之前也幫大家找了一些非常高質(zhì)量的樣機(jī)資源,需要的話可以點(diǎn)擊下面的文章看看內(nèi)容,并找到獲取方式下載使用。

2021年全網(wǎng)最新品質(zhì)最好的樣機(jī)資源被我找到了,免費(fèi)分享給你!

2021年全網(wǎng)最好的樣機(jī)資源都在這里,收藏這一篇就夠了!

圖片

圖片

圖片

 


 

原文地址:彩云譯設(shè)計(jì)(公眾號(hào))

作者:彩云Sky

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》Behance 首頁(yè)推薦的作品集為什么這么高級(jí)?為你拆解其中7個(gè)秘密

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



無(wú)需手繪的AI矢量扁平幾何風(fēng)基礎(chǔ)插畫:《鮮果派對(duì)》海報(bào)

seo達(dá)人


image

 

工具

工具:AI(Adobe illustrator)

適合:零基礎(chǔ)入門

 

扁平風(fēng)的基礎(chǔ)思維準(zhǔn)備:幾何形組合造型

幾何形一直被視作是抽象造型的基礎(chǔ)元素,通過(guò)幾何形有意識(shí)的相互疊加組合,就可以使得這個(gè)造型呈現(xiàn)出可識(shí)別的對(duì)象,比如我們?cè)谶@個(gè)教程里所表現(xiàn)的那樣:用幾何形畫水果。

比起細(xì)膩豐富的傳統(tǒng)畫法,極簡(jiǎn)的幾何平涂造型所創(chuàng)作的水果,看起來(lái)有著別樣的生動(dòng)的特質(zhì),擺脫了對(duì)水果表面質(zhì)感的依賴,轉(zhuǎn)向?qū)π紊奶剿鳎潜馄讲瀹嫷幕A(chǔ)思維。

常用的幾何形是:圓、方、三角,在這個(gè)教程里,我們就運(yùn)用矢量軟件AI(Adobe illustrator)進(jìn)行創(chuàng)作,接下就開始來(lái)打造我們的《鮮果派對(duì)》海報(bào)吧。

image

 

用方形塑造蘋果基礎(chǔ)形

常見蘋果的畫法可以是圓形起步,也可以是從方形開始。

STEP 01

打開AI,新建一個(gè)文檔,運(yùn)用粉色畫出一個(gè)正方形,這就是蘋果的起始形。起始形非常重要,它決定了接下這個(gè)蘋果的形狀走向。

然后,我們把這個(gè)正方形改變?yōu)樘菪?,改變的方法有很多種,這里我們利用變形工具,進(jìn)入【效果>變形>弧形】,在變形工具的面板里,將垂直這個(gè)滑塊調(diào)整為-15%。

image

STEP 02

在選中上一步所變形成為的梯形的基礎(chǔ)上,進(jìn)入到【對(duì)象>擴(kuò)展外觀】對(duì)它做一次擴(kuò)展外觀。

擴(kuò)展外觀就是讓這個(gè)形狀真正變?yōu)槭噶刻菪蔚穆窂剑绻麤]有做這一步,這個(gè)形狀看似是梯形,其實(shí)還是原來(lái)正方形的矢量路徑。分辨真假梯形也很簡(jiǎn)單,只要選擇這個(gè)形狀,看到路徑的走向仍然是正方形,那就是假性梯形,這就需要為它做一次擴(kuò)展外觀。

image

STEP 03

然后再選中這個(gè)梯形的基礎(chǔ)上,單擊左邊的工具欄里的【直接選擇工具】,就會(huì)看到四個(gè)角內(nèi)分別帶有四個(gè)很小的圓點(diǎn)(仔細(xì)看是一個(gè)同心圓),拖動(dòng)它,你會(huì)發(fā)現(xiàn)它會(huì)控制這個(gè)角,將它從銳利的角變?yōu)閳A弧。

根據(jù)圓弧離形狀中心的距離多少,弧度也會(huì)相應(yīng)發(fā)生變化。

image

好了,蘋果的基礎(chǔ)形就完成啦~

 

細(xì)節(jié)的魔力

我們開始為蘋果增加葉片,葉片的畫法首先也是要從基礎(chǔ)幾何形開始慢慢演變而成。我們?cè)谌~片這個(gè)部分提供的基礎(chǔ)幾何形同樣是正方形。

STEP 04

用藍(lán)紫色畫出一個(gè)正方形,然后再?gòu)?fù)制一個(gè)正方形,將這個(gè)復(fù)制的正方形旋轉(zhuǎn)45°,變?yōu)榱庑?。再?gòu)?fù)制第一個(gè)正方形。于是我們得到了兩個(gè)正方形和一個(gè)菱形,將它們像下圖所示拼起來(lái)。

然后再選中這個(gè)組合造型,進(jìn)入到【窗口>路徑查找器】,在路徑查找器的面板中運(yùn)用【聯(lián)集】將它們拼合成一個(gè)獨(dú)立的封閉的路徑。

image

STEP 05

然后再利用控制形狀角度的小圓點(diǎn),就像STEP 03那樣分別選中下方以及左右兩邊的圓點(diǎn),將角轉(zhuǎn)為弧形。一片葉子就這樣制作而成。

image

問(wèn):感覺似乎這樣的方式比較麻煩,為什么不直接用鋼筆工具畫呢?

這也是我在這一風(fēng)格的畫法中想要重點(diǎn)強(qiáng)調(diào)的:盡量避免使用鋼筆工具,而用幾何形進(jìn)行轉(zhuǎn)化,是保持扁平風(fēng)格中幾何感和抽象感的訣竅。

因?yàn)槭謩?dòng)畫出的路徑畢竟不會(huì)特別嚴(yán)謹(jǐn),這時(shí)就難免讓扁平風(fēng)格失去了它本身的風(fēng)格特點(diǎn),而這時(shí)如果沒有較強(qiáng)的結(jié)構(gòu)感,整個(gè)畫面就會(huì)看起來(lái)”平淡“甚至”無(wú)趣“。

其實(shí)葉片的造型也可以探索出其他的幾何方式進(jìn)行組合構(gòu)造,本文只表現(xiàn)一種方法。其他的方法,可以留給你下去嘗試。

STEP 06

這時(shí),把這個(gè)葉片的形狀的混合模式改為“正片疊底”,利用疊加的視覺效果增加畫面的幾何感和時(shí)尚感,這是在我們過(guò)去寫過(guò)的文章《超級(jí)可愛!插畫萌新必學(xué)的PS極簡(jiǎn)馬克筆簡(jiǎn)筆畫:盆栽篇》以及相關(guān)系列文章也都運(yùn)用過(guò)類似的技法。

image

STEP 07

最后,用線條增加最后的細(xì)節(jié)。這里所用的線條是較細(xì)的3px的黑色線條。這里的線條粗細(xì)要根據(jù)形狀本身的尺寸大小比例來(lái)確定??傊?,對(duì)細(xì)節(jié)的描繪可以克制一些,不要太過(guò)復(fù)雜。

利用線形的組合以及形狀疊加的視覺效果,扁平風(fēng)的簡(jiǎn)約蘋果元素就畫好了。

image

 

準(zhǔn)備好元素,完成海報(bào)

STEP 08

藍(lán)莓的畫法從矩形起步,對(duì)矩形的組合以及成形的演變方法,是我們重點(diǎn)要訓(xùn)練的對(duì)象。中間的步驟我們已在文章前面詳細(xì)敘述過(guò)了,這里就不再重復(fù)。可以繼續(xù)用這個(gè)方法演練下去。

image

STEP 09

畫草莓的時(shí)候,運(yùn)用了兩個(gè)梯形進(jìn)行組合。利用葉片造型進(jìn)行疊加,也能增加圖形的魅力。

image

STEP 10

我們把其他的水果元素也畫好,我這里準(zhǔn)備了一些比較可愛的櫻桃、西瓜之類,你也可以畫點(diǎn)菠蘿、芒果之類,注意要把握每一個(gè)水果的基礎(chǔ)形特點(diǎn),然后在細(xì)節(jié)的部分加以強(qiáng)調(diào)。

image

把每個(gè)水果元素放到海報(bào)的設(shè)計(jì)中時(shí),要考慮的還有對(duì)水果元素之間的間隙的疏密均勻程度,元素可以較大,有些元素甚至可以滲出到海報(bào)之外,這樣會(huì)讓視覺效果更為延伸。

如果經(jīng)過(guò)路邊有家鮮果店,掛上這樣一張海報(bào),應(yīng)該效果是不錯(cuò)的吧~ 先自我陶醉一波~

image

最后,獻(xiàn)上我的同類作品集小站

當(dāng)然,如果你想要臨摹或者參考更多,可以通過(guò)訪問(wèn)下面這個(gè)網(wǎng)站,我在這里會(huì)放入更多類似的作品,繼續(xù)保持對(duì)這類風(fēng)格的探索。

image


 

原文地址:飛屋設(shè)計(jì)

作者:飛屋睿UIdesign

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》無(wú)需手繪的AI矢量扁平幾何風(fēng)基礎(chǔ)插畫:《鮮果派對(duì)》海報(bào)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ì)公司



日歷

鏈接

個(gè)人資料

存檔