首頁

用戶體驗設(shè)計定義&詳細(xì)案例

ui設(shè)計分享達(dá)人



一、什么是用戶體驗?


用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀(jì)90年代中期,由用戶體驗設(shè)計師 唐納德·諾曼(Donald Norman)所提出和推廣。

定義:用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。即用戶在使用一個產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個方面。




二、可用性原則


可用性指的是產(chǎn)品對用戶來說有效、易學(xué)、高效、好記、少錯和令人滿意的程度,即用戶能否用產(chǎn)品完成他的任務(wù),效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產(chǎn)品質(zhì)量,是產(chǎn)品用戶體驗的核心,不好的可用性會導(dǎo)致用戶放棄使用產(chǎn)品。

可用性由易學(xué)性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預(yù)測性組成。




01 易學(xué)性


指的是用戶學(xué)習(xí)如何與產(chǎn)品進(jìn)行交互,以實現(xiàn)目標(biāo)所花費的時間和精力,即用戶能否在初次使用產(chǎn)品時完成簡單的任務(wù)或?qū)崿F(xiàn)用戶目標(biāo)。




02 效率


用戶在使用產(chǎn)品一段時間后,能否在合理的時間完成想要達(dá)成的目標(biāo)任務(wù)。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關(guān)內(nèi)容。




03 可記憶性


我們常說互聯(lián)網(wǎng)是有記憶的,好的產(chǎn)品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進(jìn)行記憶是一個比較大的負(fù)擔(dān),如果在一些環(huán)節(jié)通過系統(tǒng)能幫用戶記錄,會降低用戶的負(fù)擔(dān)。比如在搜索、歷史記錄、瀏覽記錄等。




04 容錯性


用戶在使用產(chǎn)品時,發(fā)生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復(fù)的能力。如常見的注冊登錄,當(dāng)用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:"請輸入正確的郵箱" 用戶可能會疑惑,錯在哪里。




05 滿意度


滿意度指的是用戶與設(shè)計互動產(chǎn)生的愉悅程度,可以是用戶使用產(chǎn)品時流暢的交互和優(yōu)秀的視覺設(shè)計,也可以是用戶在產(chǎn)品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)





06 實用性


產(chǎn)品能否提供用戶在完成任務(wù)時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進(jìn)行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。




07 個性化


在滿足實用性的基礎(chǔ)上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。




08 可預(yù)測性


用戶能夠預(yù)測到下一步操作或者整個流程的交互,將會發(fā)生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預(yù)測到下一步或者整個流程的步驟會發(fā)生什么。




三、可見性原則


可見性是用戶根據(jù)界面中可見元素確定產(chǎn)品可以做什么的設(shè)計原則。



01 物理功能可見性


物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設(shè)計界面中能干什么。例如當(dāng)我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標(biāo)。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。




02 狀態(tài)可見性


當(dāng)信息或者列表過多時區(qū)分狀態(tài)的展示,將重要的狀態(tài)信息呈現(xiàn)在盡可能高的信息層級當(dāng)中。如iOS信息和QQ郵箱中區(qū)分未讀信息的微標(biāo)。如果將這些徽標(biāo)隱藏起來,會極大地破壞易用性,因為人們將不得不進(jìn)入一個個郵件詳情頁當(dāng)中進(jìn)行確認(rèn),才能獲取到原本由徽標(biāo)提供的狀態(tài)信息,這樣的互動非常低效且乏味。




03 步驟可見性


當(dāng)用戶在執(zhí)行某項任務(wù)的時候應(yīng)該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當(dāng)前進(jìn)行到哪一步,接下來還有多少步驟。




四、可供性原則


強調(diào)需要明確的視覺線索向用戶展示產(chǎn)品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標(biāo)等)的設(shè)計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進(jìn)行交互行為(點擊、長按、滑動 等)




五、反饋


給用戶及時、恰當(dāng)?shù)姆答?,是體驗設(shè)計中非常重要的一項原則;對每個用戶的操作都應(yīng)該有恰當(dāng)?shù)南到y(tǒng)反饋(包含視覺、聽覺、觸覺)。



01 告知性


明確告知用戶當(dāng)前操作發(fā)生了什么。如點擊下載和下載過程給出相對應(yīng)的反饋及進(jìn)度條。




02 動作連接性


當(dāng)用戶產(chǎn)生某個動作時,給予相對應(yīng)的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認(rèn)的外觀與點擊后的外觀發(fā)生變化,結(jié)合現(xiàn)實世界的開關(guān)去思考(按下 開燈)動作與反饋是連接的,即時的。




六、希克定律


??硕桑?951年由威廉·埃德蒙·??耸紫忍岢龅模J(rèn)為人們從數(shù)組中選擇目標(biāo)的時間取決于可用選項的數(shù)量。也就是當(dāng)一個人所面臨的選擇越多,做出選擇所花的時間就越多,當(dāng)面臨選擇的數(shù)量增加,做出決定的時間也會跟著增加。




如京東篩選,在搜索結(jié)果頁會將篩選條件收起,因為里面的篩選條件內(nèi)容過多。用戶會在當(dāng)前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。




七、費茨定律


費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標(biāo)或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。


T:代表完成移動所需的平均時間

A:代表光標(biāo)開始/停止時間

B:代表光標(biāo)移動速度

D:代表從起點到目標(biāo)中心的距離

W:代表目標(biāo)的尺寸


簡單來說就是指:隨著目標(biāo)的距離增加,移動到目標(biāo)的時間更長,并且隨著目標(biāo)的尺寸減小,選擇目標(biāo)的時間也會增加。


所以在界面設(shè)計當(dāng)中會遵循越重要的功能,占據(jù)面基會越大。重要圖標(biāo)的點擊熱區(qū)也會增大。便于用戶快速點擊。




屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進(jìn)行產(chǎn)品設(shè)計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。



八、神奇數(shù)字 7 ± 2


神奇數(shù)字7±2法則是1956年由 喬治·米勒 所提出的,根據(jù)喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數(shù)APP底部導(dǎo)航為5個的原因。




由于人類的大腦處理信息的能力有限,大腦會將復(fù)雜信息劃分成 塊 和小的單元。如:京東和每日優(yōu)鮮的分類處理。




人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串?dāng)?shù)字拆分為多個較短的部分進(jìn)行記憶。如銀行卡號和手機號碼等。




九、復(fù)雜守恒定律


復(fù)雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認(rèn)為每一個產(chǎn)品設(shè)計的過程中,都有其固有的復(fù)雜性,存在著一個臨界點,超過了這個點產(chǎn)品設(shè)計的過程就不能再簡化了,你只能將固有的復(fù)雜性從一個地方轉(zhuǎn)移到另外一個地方。


在產(chǎn)品設(shè)計中,會盡量的簡化界面。當(dāng)功能過多時進(jìn)行一個整合的處理,跳轉(zhuǎn)或者滑動操作。如查看更多或者常見的漢堡導(dǎo)航。




十、新鄉(xiāng)重夫:防錯原則


新鄉(xiāng)重夫認(rèn)為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預(yù)防產(chǎn)品的缺陷。


防錯原則認(rèn)為大部分的意外都是由設(shè)計的疏忽,而不是人為操作疏忽。因此,在設(shè)計中要有必要的防錯機制;比如常見的信息輸入狀態(tài),未輸入置灰不可點,輸入變?yōu)榭牲c擊狀態(tài)。




微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現(xiàn)在的拍一拍是可以撤銷的,在客戶端鼠標(biāo)懸浮上就可以進(jìn)行撤回,移動端長按出現(xiàn)撤回彈窗,兩分鐘內(nèi)有效。




微信朋友圈動態(tài):點擊返回圖標(biāo)會出現(xiàn)的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當(dāng)中有很多友好的體驗細(xì)節(jié)??梢远喽嗳ジ惺?。




十一、奧卡姆剃刀原理


奧卡姆剃刀 定律 :它是由14世紀(jì)英格蘭的邏輯學(xué)家、圣方濟(jì)各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”




01、只放置必要的元素


不必要的元素會降低設(shè)計的效率,不管是實體、視覺或者認(rèn)知上,多余的設(shè)計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現(xiàn)。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內(nèi)容的圖標(biāo)入口。




02、減少點擊次數(shù)


讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進(jìn)入其他的tab,在上面都會懸浮播放/暫停的區(qū)域。都能夠隨時操作。




03、“老人”規(guī)則


就是產(chǎn)品的易用性,如果年紀(jì)大點的人,也能夠輕松使用所設(shè)計的產(chǎn)品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內(nèi)容。目前抖音的用戶老年人也逐漸包含在內(nèi),并且抖音會根據(jù)用戶的停留時長等推送用戶感興趣的內(nèi)容。




04、減少“段落”個數(shù)


頁面的使用率,當(dāng)你想要在一屏新增很多內(nèi)容時,頁面的布局就會變得擁擠和區(qū)域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等??淇藶g覽器首頁強化了搜索功能 和幾個整合內(nèi)容的圖標(biāo)入口;uc瀏覽器首頁內(nèi)容過多,當(dāng)用戶想要使用搜索功能時很容易被其他內(nèi)容干擾。




05、給予更少的選項


前面說到的??硕烧f到,當(dāng)選擇的數(shù)量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內(nèi)容的時候要努力減少用戶的思維負(fù)擔(dān)。如攜程和馬蜂窩金剛區(qū)的內(nèi)容展示,馬蜂窩根據(jù)產(chǎn)品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。




十二、設(shè)計和藝術(shù)的區(qū)別是什么?


最后我們來探討一下設(shè)計和藝術(shù)的區(qū)別是什么。我看到一句話覺得挺好的。設(shè)計和藝術(shù)的重要區(qū)別是:藝術(shù)拋出問題,而設(shè)計解決問題。


我們設(shè)想一個場景,當(dāng)你在藝術(shù)展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術(shù)家在作畫時的心情,處境,為什么要這么去畫?想表達(dá)怎么樣的情感?



然后我們再設(shè)想一個場景,同樣在藝術(shù)展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環(huán)境下都會比手機好。這就是設(shè)計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

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

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



文章來源:站酷   作者:左言右設(shè)

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

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


用戶體驗設(shè)計定義&詳細(xì)案例

ui設(shè)計分享達(dá)人



一、什么是用戶體驗?


用戶體驗(User Experience,簡稱UE/UX)這個詞是在上世紀(jì)90年代中期,由用戶體驗設(shè)計師 唐納德·諾曼(Donald Norman)所提出和推廣。

定義:用戶在使用產(chǎn)品過程中建立起來的一種純主觀感受。即用戶在使用一個產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個方面。




二、可用性原則


可用性指的是產(chǎn)品對用戶來說有效、易學(xué)、高效、好記、少錯和令人滿意的程度,即用戶能否用產(chǎn)品完成他的任務(wù),效率如何,主觀感受怎樣,實際上是從用戶角度所看到的產(chǎn)品質(zhì)量,是產(chǎn)品用戶體驗的核心,不好的可用性會導(dǎo)致用戶放棄使用產(chǎn)品。

可用性由易學(xué)性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預(yù)測性組成。




01 易學(xué)性


指的是用戶學(xué)習(xí)如何與產(chǎn)品進(jìn)行交互,以實現(xiàn)目標(biāo)所花費的時間和精力,即用戶能否在初次使用產(chǎn)品時完成簡單的任務(wù)或?qū)崿F(xiàn)用戶目標(biāo)。




02 效率


用戶在使用產(chǎn)品一段時間后,能否在合理的時間完成想要達(dá)成的目標(biāo)任務(wù)。這里以騰訊視頻為例,用戶能否快速的下載想要的東西,在同一系列中,可以快速下載更多的相關(guān)內(nèi)容。




03 可記憶性


我們常說互聯(lián)網(wǎng)是有記憶的,好的產(chǎn)品體驗是幫助用戶去記憶。用戶在體驗中,要對一些有意識、無意識的行為進(jìn)行記憶是一個比較大的負(fù)擔(dān),如果在一些環(huán)節(jié)通過系統(tǒng)能幫用戶記錄,會降低用戶的負(fù)擔(dān)。比如在搜索、歷史記錄、瀏覽記錄等。




04 容錯性


用戶在使用產(chǎn)品時,發(fā)生錯誤后,能否快速幫助用戶識別和糾正錯誤,幫助用戶從錯誤中恢復(fù)的能力。如常見的注冊登錄,當(dāng)用戶屬于郵箱格式不對的時候,給出提示,并且告知錯在哪里。如果提示語只是:"請輸入正確的郵箱" 用戶可能會疑惑,錯在哪里。




05 滿意度


滿意度指的是用戶與設(shè)計互動產(chǎn)生的愉悅程度,可以是用戶使用產(chǎn)品時流暢的交互和優(yōu)秀的視覺設(shè)計,也可以是用戶在產(chǎn)品中得到的滿足感。比如sir語音交互,王者榮耀等級(滿足感)





06 實用性


產(chǎn)品能否提供用戶在完成任務(wù)時所需要用到的基本功能,例如P圖類軟件,用戶需要對圖片進(jìn)行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。




07 個性化


在滿足實用性的基礎(chǔ)上 針對用戶提供不同場景下的功能定制,如美圖秀秀,在提供圖片美化的同時,針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。




08 可預(yù)測性


用戶能夠預(yù)測到下一步操作或者整個流程的交互,將會發(fā)生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預(yù)測到下一步或者整個流程的步驟會發(fā)生什么。




三、可見性原則


可見性是用戶根據(jù)界面中可見元素確定產(chǎn)品可以做什么的設(shè)計原則。



01 物理功能可見性


物理功能可見性是基于對象的物理外觀。在視覺上,這種類型的功能可見性使用戶能夠立即清楚地看到在設(shè)計界面中能干什么。例如當(dāng)我們使用音樂類軟件,最常使用的就是播放/暫停,上一曲/下一曲。我們就會尋找去這些圖標(biāo)。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中,這就是功能可見性。




02 狀態(tài)可見性


當(dāng)信息或者列表過多時區(qū)分狀態(tài)的展示,將重要的狀態(tài)信息呈現(xiàn)在盡可能高的信息層級當(dāng)中。如iOS信息和QQ郵箱中區(qū)分未讀信息的微標(biāo)。如果將這些徽標(biāo)隱藏起來,會極大地破壞易用性,因為人們將不得不進(jìn)入一個個郵件詳情頁當(dāng)中進(jìn)行確認(rèn),才能獲取到原本由徽標(biāo)提供的狀態(tài)信息,這樣的互動非常低效且乏味。




03 步驟可見性


當(dāng)用戶在執(zhí)行某項任務(wù)的時候應(yīng)該清晰明了的告知用戶目前在什么步驟,后面還有多少步驟,完整清晰的流程展示。如果將這些信息隱藏起來,用戶會困惑當(dāng)前進(jìn)行到哪一步,接下來還有多少步驟。




四、可供性原則


強調(diào)需要明確的視覺線索向用戶展示產(chǎn)品可以做什么。例如用戶界面中的交互元素(如滾動條、命令按鈕和圖標(biāo)等)的設(shè)計必須能夠為用戶提供足夠清楚的建議,讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么,以及如何與它們進(jìn)行交互行為(點擊、長按、滑動 等)




五、反饋


給用戶及時、恰當(dāng)?shù)姆答?,是體驗設(shè)計中非常重要的一項原則;對每個用戶的操作都應(yīng)該有恰當(dāng)?shù)南到y(tǒng)反饋(包含視覺、聽覺、觸覺)。



01 告知性


明確告知用戶當(dāng)前操作發(fā)生了什么。如點擊下載和下載過程給出相對應(yīng)的反饋及進(jìn)度條。




02 動作連接性


當(dāng)用戶產(chǎn)生某個動作時,給予相對應(yīng)的連接反饋。如大概用戶點擊某個按鈕時,按鈕默認(rèn)的外觀與點擊后的外觀發(fā)生變化,結(jié)合現(xiàn)實世界的開關(guān)去思考(按下 開燈)動作與反饋是連接的,即時的。




六、??硕?


希克定律,是1951年由威廉·埃德蒙·希克首先提出的,認(rèn)為人們從數(shù)組中選擇目標(biāo)的時間取決于可用選項的數(shù)量。也就是當(dāng)一個人所面臨的選擇越多,做出選擇所花的時間就越多,當(dāng)面臨選擇的數(shù)量增加,做出決定的時間也會跟著增加。




如京東篩選,在搜索結(jié)果頁會將篩選條件收起,因為里面的篩選條件內(nèi)容過多。用戶會在當(dāng)前頁面選擇的時間增加.將一些項目分組放入二級下單,并且做好歸類,用戶能夠更迅速的作出決定。




七、費茨定律


費茨定律,是1954 年 由保羅.菲茨首次提出,在人機交互中指的是通過圖形用戶界面使用鼠標(biāo)或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。


T:代表完成移動所需的平均時間

A:代表光標(biāo)開始/停止時間

B:代表光標(biāo)移動速度

D:代表從起點到目標(biāo)中心的距離

W:代表目標(biāo)的尺寸


簡單來說就是指:隨著目標(biāo)的距離增加,移動到目標(biāo)的時間更長,并且隨著目標(biāo)的尺寸減小,選擇目標(biāo)的時間也會增加。


所以在界面設(shè)計當(dāng)中會遵循越重要的功能,占據(jù)面基會越大。重要圖標(biāo)的點擊熱區(qū)也會增大。便于用戶快速點擊。




屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中,所以我們在進(jìn)行產(chǎn)品設(shè)計的過程中,會將常用/重要的操作放置在屏幕邊緣處,便于用戶操作。



八、神奇數(shù)字 7 ± 2


神奇數(shù)字7±2法則是1956年由 喬治·米勒 所提出的,根據(jù)喬治·米勒的研究,人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數(shù)APP底部導(dǎo)航為5個的原因。




由于人類的大腦處理信息的能力有限,大腦會將復(fù)雜信息劃分成 塊 和小的單元。如:京東和每日優(yōu)鮮的分類處理。




人類短期的記憶一般一次只能記住5-9個,所以人們總是傾向于把一串?dāng)?shù)字拆分為多個較短的部分進(jìn)行記憶。如銀行卡號和手機號碼等。




九、復(fù)雜守恒定律


復(fù)雜守恒定律是1984年由 拉里·泰斯勒 所提出的,也稱作泰斯勒定律。認(rèn)為每一個產(chǎn)品設(shè)計的過程中,都有其固有的復(fù)雜性,存在著一個臨界點,超過了這個點產(chǎn)品設(shè)計的過程就不能再簡化了,你只能將固有的復(fù)雜性從一個地方轉(zhuǎn)移到另外一個地方。


在產(chǎn)品設(shè)計中,會盡量的簡化界面。當(dāng)功能過多時進(jìn)行一個整合的處理,跳轉(zhuǎn)或者滑動操作。如查看更多或者常見的漢堡導(dǎo)航。




十、新鄉(xiāng)重夫:防錯原則


新鄉(xiāng)重夫認(rèn)為遺忘有兩種:一種是疏漏,另一種是忘卻。他建議采用一些措施來預(yù)防產(chǎn)品的缺陷。


防錯原則認(rèn)為大部分的意外都是由設(shè)計的疏忽,而不是人為操作疏忽。因此,在設(shè)計中要有必要的防錯機制;比如常見的信息輸入狀態(tài),未輸入置灰不可點,輸入變?yōu)榭牲c擊狀態(tài)。




微信拍一拍:微信在出了拍一拍功能之后,很多時候點擊頭像的時候會不小心拍到別人,現(xiàn)在的拍一拍是可以撤銷的,在客戶端鼠標(biāo)懸浮上就可以進(jìn)行撤回,移動端長按出現(xiàn)撤回彈窗,兩分鐘內(nèi)有效。




微信朋友圈動態(tài):點擊返回圖標(biāo)會出現(xiàn)的彈窗,避免誤操作。利用防錯原則,可以避免用戶重新編輯。微信當(dāng)中有很多友好的體驗細(xì)節(jié)??梢远喽嗳ジ惺?。




十一、奧卡姆剃刀原理


奧卡姆剃刀 定律 :它是由14世紀(jì)英格蘭的邏輯學(xué)家、圣方濟(jì)各會修士奧卡姆的威廉 (William of Occam,約1285年至1349年)提出。 這個 原理 稱為“如無必要,勿增實體 ”,即“ 簡單有效原理 ”




01、只放置必要的元素


不必要的元素會降低設(shè)計的效率,不管是實體、視覺或者認(rèn)知上,多余的設(shè)計元素,有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息,可以用「更多信息」來實現(xiàn)。如夸克瀏覽器,首頁只放置重要功能 搜索 和幾個整合內(nèi)容的圖標(biāo)入口。




02、減少點擊次數(shù)


讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件,在播放音樂之后進(jìn)入其他的tab,在上面都會懸浮播放/暫停的區(qū)域。都能夠隨時操作。




03、“老人”規(guī)則


就是產(chǎn)品的易用性,如果年紀(jì)大點的人,也能夠輕松使用所設(shè)計的產(chǎn)品那么是成功的。如抖音沉浸式的體驗,簡單的滑動就能夠觀看想看的內(nèi)容。目前抖音的用戶老年人也逐漸包含在內(nèi),并且抖音會根據(jù)用戶的停留時長等推送用戶感興趣的內(nèi)容。




04、減少“段落”個數(shù)


頁面的使用率,當(dāng)你想要在一屏新增很多內(nèi)容時,頁面的布局就會變得擁擠和區(qū)域變小,容易過于干擾用戶做出選擇,重要功能不夠突出等??淇藶g覽器首頁強化了搜索功能 和幾個整合內(nèi)容的圖標(biāo)入口;uc瀏覽器首頁內(nèi)容過多,當(dāng)用戶想要使用搜索功能時很容易被其他內(nèi)容干擾。




05、給予更少的選項


前面說到的希克定律說到,當(dāng)選擇的數(shù)量越多,用戶做決定的時間就更長。做過多的決定也是一種壓力,在展示內(nèi)容的時候要努力減少用戶的思維負(fù)擔(dān)。如攜程和馬蜂窩金剛區(qū)的內(nèi)容展示,馬蜂窩根據(jù)產(chǎn)品屬性放置了6個重要的功能入口,便于用戶更快的去選擇所想要的功能。




十二、設(shè)計和藝術(shù)的區(qū)別是什么?


最后我們來探討一下設(shè)計和藝術(shù)的區(qū)別是什么。我看到一句話覺得挺好的。設(shè)計和藝術(shù)的重要區(qū)別是:藝術(shù)拋出問題,而設(shè)計解決問題。


我們設(shè)想一個場景,當(dāng)你在藝術(shù)展廳站在一副名畫面前,你所思考的是什么?是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事,你會不會思考藝術(shù)家在作畫時的心情,處境,為什么要這么去畫?想表達(dá)怎么樣的情感?



然后我們再設(shè)想一個場景,同樣在藝術(shù)展廳,你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是 相機 對吧?因為相機的拍照效果在任何環(huán)境下都會比手機好。這就是設(shè)計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

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

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



文章來源:站酷   作者:左言右設(shè)

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

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


讓價值被發(fā)現(xiàn):如何在 B 端做增長

ui設(shè)計分享達(dá)人

增長設(shè)計是時下的熱門話題,越來越多的企業(yè)開始關(guān)注增長設(shè)計,成立獨立的增長部門。在螞蟻體驗技術(shù)部,我們除了做好體驗設(shè)計的「老本行」外,也在往增長的方向探索。在現(xiàn)有的增長理論指導(dǎo)下,我們結(jié)合自身業(yè)務(wù),邊落地實踐,邊沉淀總結(jié)。以下是我們的一些小心得。


本文會講述我們是如何利用增長大圖梳理產(chǎn)品各個環(huán)節(jié),以及如何用定量的用戶行為數(shù)據(jù)漏斗,和定性的痛點比重數(shù)據(jù),綜合分析,去找到機會點。輔以在 Kitchen 和 語雀 中的增長實踐案例說明。在增長一塊,我們還處于初步探索階段,若有不成熟的地方,歡迎大家一起討論。





為什么要關(guān)注增長?

說到增長,過去 10 幾年是中國互聯(lián)網(wǎng)高速增長的階段,但近 2-3 年來,隨著人口、流量、資本的紅利衰退,越來越多企業(yè)開始關(guān)注增長。典型的是,2017 年可口可樂宣布取消 CMO(首席營銷官),由 CGO(首席增長官)替代,之后各種增長類職位相繼涌出。

(來源:CNNIC 中國互聯(lián)網(wǎng)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計調(diào)查,每年互聯(lián)網(wǎng)網(wǎng)民用戶數(shù)) 





什么是增長?

增長是建立在用戶基礎(chǔ)上的,用戶產(chǎn)生需求,需求又衍生出產(chǎn)品,產(chǎn)品之上才可能有增長。所以我們理解:產(chǎn)品在創(chuàng)造價值,而增長其實是傳遞價值,讓價值被發(fā)現(xiàn)。只有讓更多的用戶,最大限度地體驗產(chǎn)品的核心價值,才可能迅速擴張以及有效地變現(xiàn)。它有幾個特點:


1.首先他是關(guān)注用戶全生命周期,不僅僅是獲客、變現(xiàn)。還需要關(guān)注怎么激活用戶,讓用戶用起來,留存下來,傳播出去

2.另外,增長不是一個單打獨斗的獨行俠,而是體系化的,以團(tuán)隊共創(chuàng)聚焦的方式來推動增長

3.強調(diào)數(shù)據(jù)和實驗:從數(shù)據(jù)分析中洞察,提出假設(shè),循環(huán)實驗的過程

(增長過程是價值的傳遞過程) 




什么產(chǎn)品適合做增長?

那什么樣的產(chǎn)品適合做增長?我們所做的 To B 產(chǎn)品適不適合做增長?

首先看下 To B 和 To C 的差異:To B 產(chǎn)品,多數(shù)是群體決策,決策鏈路復(fù)雜,買的人不一定是用的人,如果是客單價較高的話,基本靠銷售關(guān)系驅(qū)動購買,但像具有 C 類屬性的產(chǎn)品,因為是個人消費場景,單一決策購買,就像平時大家在淘寶買東西一樣,隨心所欲。那運用增長策略去推動轉(zhuǎn)化,能節(jié)約很大的獲客成本,可見增長更適用于 C類屬性的產(chǎn)品。

但經(jīng)過大半年的實踐,并且和其他增長團(tuán)隊交流,我們發(fā)現(xiàn)雖然 To B 增長很難,但在 SMB(中小企業(yè))的增長很有機會。SMB 中小企業(yè),有可能是 2-3 人組成的小團(tuán)隊,這類企業(yè)的客戶和用戶通常是同一類人,我們理解這也具有 To C 屬性。并且中小企業(yè)數(shù)量多,實驗數(shù)據(jù)也有保障。

一句話總結(jié):To SMB 中小企業(yè)客群的產(chǎn)品可以做增長。

(面向中小企業(yè)客群的產(chǎn)品可以做增長) 



那具體怎么做呢?結(jié)合我們自身經(jīng)驗,給大家分享 1 張增長大圖,2 個實踐案例。



增長大圖

增長大圖是基于 AARRR 模型,在用戶旅程圖的基礎(chǔ)上進(jìn)化得來。為什么不用用戶旅程圖,而用增長大圖呢?用戶旅程圖主要通過情緒曲線來體現(xiàn)問題的嚴(yán)重性,但在使用上也存在難以量化的問題。

所以在增長大圖上,我們選擇定量的用戶行為數(shù)據(jù)漏斗來取代情緒值。漏斗其實是對一個流程和路徑的分析,目的是定位出問題的關(guān)鍵所在,這樣才能對癥下藥。但定量數(shù)據(jù)通常只會告訴我們是什么,而定性數(shù)據(jù)能告訴我們?yōu)槭裁矗?


所以,我們還建議梳理用戶調(diào)研中的定性數(shù)據(jù),按流程、階段、產(chǎn)品模塊、問題類型等維度歸類,通過痛點比重公式,算出每個維度痛點比重的百分比,去綜合分析,找到機會點。另外,增長大圖還可以記錄從業(yè)務(wù)總目標(biāo)拆解增長目標(biāo)的過程,以及實驗的策略、方案、指標(biāo)結(jié)果,所以增長大圖也是一份連接戰(zhàn)略和執(zhí)行,不斷更新的「活文檔」。


公式:痛點比重= [每個階段的問題數(shù) / 問題總數(shù) ] X100%

(分析利器:增長大圖) 


那怎么用呢?當(dāng)你確定某個項目可以做增長時,最關(guān)鍵是邀請不同角色的 Key Person,包括 PD、技術(shù)、運營共創(chuàng)去搭建增長大圖。


從業(yè)務(wù)總目標(biāo)出發(fā)拆解增長目標(biāo),然后將定量和定性數(shù)據(jù)梳理到大圖上,找出機會點,從而確定聚焦領(lǐng)域,開始增長實驗。想想就像大家在吃自助餐的過程,基本都是先看一遍有什么,再篩選一下,小份量的取餐嘗試,最后再確定幾樣好吃的,重點吃。

(增長大圖共創(chuàng)流程) 


小份量的取餐嘗試,就等于增長實驗的過程。分為 4 個步驟:

從定量和定性數(shù)據(jù)中分析洞察——不斷的提出假設(shè)——然后排定優(yōu)先級,進(jìn)行實驗——驗證應(yīng)用的過程。

(增長實驗流程) 




接下來,分享兩個我們在增長中做的小 Case。


案例一:1 塊錢 6 周 Ant Design 設(shè)計工具 Kitchen 增長實踐

Kitchen 是一款為設(shè)計者提升工作效率的 Sketch 工具集。先利用增長大圖看下 Kitchen 的現(xiàn)狀,我們撈取用戶從訪問——下載——安裝——使用的數(shù)據(jù)漏斗,可以看出整體漏斗還是很不錯的,整體留存率達(dá)到 40%。

然后我老板就說:「可以去做拉新增長,給你一塊錢成本,去撬動一個地球吧?!蛊鋵崳耶?dāng)時就想給他一個白眼,現(xiàn)在一塊錢能做什么?但反過來想想,這確實是增長很重要的一點:怎么用最小的成本去撬動最大的價值,找到最大的發(fā)力點。

基于當(dāng)時的 DAU 數(shù)據(jù)現(xiàn)狀,并初步討論后,我們敲定 6 周 DAU 增長翻倍的目標(biāo)。圍繞這個目標(biāo),再進(jìn)一步拆解為新增和留存,前面有提到留存率不錯,所以我們這 6 周的增長聚焦在拉新上。那么拉新最重要是找到低成本的渠道運營。然后,我們腦爆了一些平時設(shè)計師會去的和我們可以切入的網(wǎng)站,雖然篩選了一些,但還是有很多,我們不可能全部去鋪。在人有限、錢有限、時間有限的情況下,再回歸我們的目標(biāo),需要找到最合適和低成本的渠道去運營。

(利用增長大圖分析 Kitchen 訪問到使用的流程) 


所以基于 ICE 評分體系以及結(jié)合業(yè)務(wù),我們做了局部調(diào)整,最終以渠道的「影響力」、「轉(zhuǎn)化率」和「可行性」3 個維度進(jìn)行打分,確定前 4 個打星標(biāo)的渠道去做實驗,這里主要分享下在 Ant Design 渠道上做的小實驗。

(所以基于 ICE 評分體系以及結(jié)合業(yè)務(wù),選定渠道) 


在增長之前,我們已經(jīng)在 Ant Design 首頁投下過廣告,通過數(shù)據(jù)發(fā)現(xiàn)轉(zhuǎn)化率不足 0.2% ,后來我們分析 Ant Design 各個頁面上的數(shù)據(jù),從中發(fā)現(xiàn)一個有趣的現(xiàn)象,從招聘貼過來的用戶竟然比首頁過來的用戶還多。

對比這兩個入口,一個是首頁,一個是很內(nèi)頁的文字鏈,比較偏僻的入口,位置是微不足道,但給 Kitchen 帶來的用戶卻是首頁的 10 倍。

我們又對比了他們之間的差別:首頁雖然是比較大的位置,瀏覽量大,但用戶普遍是大致瀏覽,看的欲望不強。而點擊招聘頁,通常是帶著目的進(jìn)來,所以這部分的用戶是高欲望點擊的。正所謂,欲望 - 摩擦 = 轉(zhuǎn)化,為了提升轉(zhuǎn)化,要么提升客戶的欲望(Desire) ,要么減少摩擦(Friction), 往往消除摩擦要比提升客戶欲望更簡單。所以讓用戶有欲望進(jìn)行來時,我們把摩擦盡量減少,則可以帶來更大的轉(zhuǎn)化。

(高欲望、低摩擦帶來高轉(zhuǎn)化) 


所以我們就提出了一個大膽的假設(shè):如果我們在用戶點擊欲望更強,關(guān)注度更高,瀏覽量更高的頁面,并且和 Kitchen 功能相關(guān)的頁面上增加引導(dǎo),這個引流的效果可能會更好。因此開始了我們的實驗,首先分析 Ant Design 瀏覽量最高的前 20 的頁面,從中篩選出和 Kitchen 功能相關(guān)的頁面。

(篩選出高頻頁面,以及相關(guān)功能) 


在相關(guān)功能頁面下,增加一個叫設(shè)計師專屬的模塊。在不同功能的頁面下,加入了不同的引導(dǎo)文案,去吸引設(shè)計師點擊。比如 Table 這個組件,我們加入的引導(dǎo)文案是:安裝 Kitchen Sketch 插件 ,兩步就可以自動生成 Ant Design 表格組件。(甚至連在文案前加 emoji 、文案后加或不加 emoji ,我們都嘗試做了實驗 )

Ant Design 的用戶有一半是設(shè)計師,那么當(dāng)設(shè)計師進(jìn)入到該頁面,并且也想使用 Table 這個組件時,就可以減少用戶的摩擦,增加轉(zhuǎn)化。

(在 Ant Design 表格組件頁加入引導(dǎo)) 


1 個月后我們發(fā)現(xiàn):對比首頁,在功能頁上的引流效果更好,也說明這次試驗是成功的。通過 Ant Design 渠道過來的訪問量,總體提升 2460%。并且這個影響是長久性的。

(渠道優(yōu)化帶來訪問量提升)


在同一時間,獲得實驗成功后,我們繼續(xù)在不同的渠道嘗試了不同的增長實驗。6 周后,DAU 整體提升 42%,雖然6周的目標(biāo)沒有達(dá)成 100%,但最關(guān)鍵是不斷試驗的過程。

(Kitchen 增長實驗總結(jié)) 




案例二:語雀用戶增長實踐

語雀,是螞蟻金服孵化的一款知識協(xié)同產(chǎn)品。在螞蟻、阿里內(nèi)部,大家都是用語雀來管理自己的辦公文檔與個人筆記,是十萬阿里人都在使用的筆記與文檔知識庫。當(dāng)然,語雀不僅在阿里內(nèi)部使用,對外,語雀也服務(wù)外部企業(yè)和個人用戶。


作為文檔管理工具,「寫」是其中的關(guān)鍵環(huán)節(jié)。因此,語雀將「注冊后寫一篇文檔」作為用戶的激活動作,此次增長實踐的目標(biāo),就是提升新用戶的激活率。

(利用增長大圖分析語雀注冊激活流程) 


同樣利用增長大圖先梳理新用戶注冊激活的流程,從數(shù)據(jù)漏斗中我們可以看到,從注冊登錄后,到激活的轉(zhuǎn)化率是非常低的,這是我們的一個機會點。


由此我們也去做了一輪用戶調(diào)研,從調(diào)研結(jié)果來看,許多用戶在注冊后其實不知道「語雀能拿來干啥」「能怎么樣解決我的問題」。具體反映在用戶的操作和困惑上是:一是引導(dǎo)太弱不知道怎么開始寫一篇文檔,二是概念抽象令人費解,三是整個激活流程冗長容易失去耐心。這里邊其實有比較大的提升空間,那我們能不能通過一些實驗去提升轉(zhuǎn)化率呢?


首先分析原有方案的問題

(老引導(dǎo)方案) 


這是我們老的引導(dǎo)方案,用戶注冊完成后,默認(rèn)會進(jìn)入到他的個人頁面,語雀默認(rèn)為用戶創(chuàng)建一個空的默認(rèn)知識庫。


現(xiàn)在回顧這個頁面,也難怪用戶會說不知道語雀能拿來干什么了。


首先,場景引導(dǎo)弱。每天不同用戶帶著各自的場景和問題,來到語雀,有希望做辦公文檔協(xié)同的,有希望做讀書筆記的,有希望寫專欄博客的。面對這形形色色的需求,語雀只提供了一個空的「默認(rèn)知識庫」,余下的便留給用戶自行探索,也難怪用戶會感覺無從下手。


此外,像「知識庫」等概念,對于小白來說,其實非常抽象,難以理解。而且在此頁面中還有像「關(guān)注了」「關(guān)注者」等與創(chuàng)作關(guān)系不太大的干擾信息。這些東西,都會阻礙用戶激活,需要優(yōu)化。


針對上述問題,團(tuán)隊同學(xué)經(jīng)過討論,提出假設(shè):我們是否可以通過場景化引導(dǎo)的方式,來提升整個激活率呢?

(場景化引導(dǎo)) 


所謂場景化引導(dǎo),就是通過語雀產(chǎn)品定位以及用戶實際使用情況,提煉出最典型的場景模板,打包出樣板間。用戶帶著場景與問題來到語雀,語雀帶著相應(yīng)的解決方案去迎接用戶,如此一來,需求和方案就能很好的匹配上,「語雀能用來干什么」的問題自然迎刃而解。


與此同時,新方案將「知識庫」等很難理解的概念通過場景化包裝,變成「筆記本」「攻略書」等更具像化的東西,用戶不再需要上來就學(xué)習(xí)這些概念,只需要在使用的過程中慢慢去體會其作用即可。

(第一批場景模板) 


以上就是我們最初提煉的六大場景,我們將它放置在新用戶注冊后進(jìn)入的第一個頁面。此處以學(xué)習(xí)筆記為例子:新用戶完成注冊后,如果想用語雀做學(xué)習(xí)筆記,他可以點擊筆記下方的「立即新建」。

(學(xué)習(xí)筆記新建流程) 


此時,會進(jìn)入學(xué)習(xí)筆記的創(chuàng)建流程,語雀會默認(rèn)幫用戶填寫好表單內(nèi)容,并在右側(cè)紫色框框內(nèi)展示一個樣板,通過樣板見,用戶就能大概知道語雀是如何解決他所在場景下的問題。下一步,用戶只需要點擊新建,就能創(chuàng)建出一個適用于做學(xué)習(xí)筆記的知識庫。

(學(xué)習(xí)筆記知識庫) 


瞧,一個學(xué)習(xí)筆記知識庫也就新建好了,這里,用戶可以選擇自行「新建文檔」,或者基于我們?yōu)樗M(jìn)行準(zhǔn)備的模板文檔,開始自己的創(chuàng)作。整個引導(dǎo)過程,始終圍繞用戶的目標(biāo)與場景,并將結(jié)果前置供用戶預(yù)覽,讓他更有體感。


最終,我們的增長實驗取得了還不錯的效果。相較于舊版,新版用戶激活率提升了 52%。


既然實驗效果不錯,是否能百尺竿頭更進(jìn)一步,放大成功影響呢?這里運用了兩個小方法,舉一反三和乘勝追擊:


· 舉一反三:把成功模式運用到產(chǎn)品的其他地方

· 乘勝追擊:針對同一個點進(jìn)行更多實驗,看能否進(jìn)一步提升實驗指標(biāo)


回到剛才的例子,在驗證了場景化引導(dǎo)的有效性后,我們也將模板用在用戶日常的新建流程里,除新手引導(dǎo)外,用戶在自己常規(guī)的新建過程中,也可以通過我們總結(jié)出來的場景模板去新建知識庫或團(tuán)隊,做到舉一反三。

(將模板復(fù)用到常規(guī)新建流程中) 


這一設(shè)計有利于向存量老用戶介紹語雀的用法,也方便他們?nèi)ヌ剿髡Z雀更多的可能性,在弄明白「語雀怎么樣解決我的問題」之余,還能知道「原來語雀也能干這個!」


與此同時,我們在原先六大模板的基礎(chǔ)上,借著雙 11 和雙 12 的東風(fēng),提煉出了「電商團(tuán)隊」模板,乘勝追擊。

(電商團(tuán)隊模板) 


希望借此轉(zhuǎn)化一部分商家流量,讓商戶也在語雀中管理自己的進(jìn)銷存等內(nèi)容。

經(jīng)過一輪舉一反三以及乘勝追擊,場景化增長實驗取得了還不錯的效果,除剛剛說的整體激活率提升 52% 以外,自語雀場景化模板上線以來,語雀新建的所有團(tuán)隊中,有 57% 是通過模板創(chuàng)建的;新建的所有知識庫中,有 21% 是通過模板創(chuàng)建的??梢哉f,我們的場景化模板還是比較契合用戶實際場景,被用戶接受的。增長實驗取得了不錯的成效。

(模板使用情況) 


整個過程,在產(chǎn)品功能上,其實并沒有做多少增量,從前語雀能做的,現(xiàn)在也能做;從前語雀不能做的,現(xiàn)在也不太能做。


通過場景化的方式,讓產(chǎn)品的價值顯性化,通過讓顯性化后的產(chǎn)品價值被用戶發(fā)現(xiàn),促使用戶增長。

(場景化,讓價值被發(fā)現(xiàn)) 


場景化,讓價值被發(fā)現(xiàn),這是我們在語雀增長實踐中學(xué)習(xí)到的小小經(jīng)驗,分享給大家。



結(jié)語

最后總結(jié)一下關(guān)鍵點:

  1. 利用增長大圖,用定量的用戶行為數(shù)據(jù)漏斗和定性的痛點比重數(shù)據(jù),去綜合分析,找到機會點,然后從業(yè)務(wù)總目標(biāo)出發(fā)去層層拆解增長目標(biāo),確定增長實驗的聚焦領(lǐng)域,現(xiàn)階段先做什么,后做什么?用最小的成本去撬動最大的價值。但增長大圖也只是工具和手段,最關(guān)鍵是與 Key Person 共創(chuàng)聚焦、共同推進(jìn),這樣才能做到事半功倍。

  2. 增長實踐不是一帆風(fēng)順、一蹴而就的,最重要的是持之以恒,反復(fù)迭代實驗的過程。如果實驗成功則可以通過乘勝追擊和舉一反三的方式,繼續(xù)放大成功影響。如果實驗失敗則要吸取教訓(xùn),了解原因,繼續(xù)下一個試驗。


最后想說的是,增長只是一種思維方式,在設(shè)計中增長,讓產(chǎn)品核心價值被更多人發(fā)現(xiàn)和使用,通過設(shè)計的方式去最終幫助業(yè)務(wù)增長,甚至還可以做到對商業(yè)有影響。

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

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



文章來源:站酷   作者:Ant_Design

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

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


聲音設(shè)計的魅力是你想象不到的

ui設(shè)計分享達(dá)人

聲音記憶是一種非常普遍存在的現(xiàn)象。聲音是基于人類本能的記憶方式,雖然并不代表它是最強的一種記憶形態(tài),但它是最直接、原始的,因為它包含了結(jié)構(gòu)化的圖像、符碼等特征,所以聲音發(fā)出時本身就隱藏著巨大的想象力,既有直觀又有想象,而且往往是被動接收的。尤其是當(dāng)我們聽到一段熟悉的音樂或是文字、音效,自然而然地就會想到某些事情。我一直認(rèn)為音樂是記憶的載體,當(dāng)然聲音本身更是如此。


Ototo是一個可以讓你使用任何導(dǎo)電物體來演奏音樂的電子套件。主控板上有對應(yīng)一個八度內(nèi)的所有黑白鍵的孔位,通過鱷魚夾把任何的導(dǎo)電物件(水、水果、植物、金屬餐具等等)與這些孔位相連,就能把這些導(dǎo)電物體變成按鍵。它的核心在于PCB合成器,實際上它是一塊袖珍電路板,12個黑點和數(shù)個白點組成“琴鍵”,再加上一個外置的揚聲器,只要與可導(dǎo)電的物體相連,摩擦就能發(fā)出聲音。即便你是不懂樂理知識的人,即便沒有專業(yè)的設(shè)備,也能拿起手邊的日常小物創(chuàng)作一段美妙音樂。它還可以外接四種傳感器的連接方式來改變聲音模式。

Bareconductive的板子我之前在另外一篇文章中介紹過了《聊一聊音樂套件Bare Conductive Touch Board》,它比OTOTO的優(yōu)勢在于它有兩種基礎(chǔ)連接方式,鱷魚夾和導(dǎo)電墨水。相對于鱷魚夾,導(dǎo)電墨水體積更小,更方便。

下面再給大家介紹幾個音樂裝置項目:

  • + Looks Like Music +

Looks Like Music是Yuri Suzuki在2013年為盧森堡的Mudam藝術(shù)博物館的暑期公共項目創(chuàng)作的互動式音樂裝置。Yuri Suzuki設(shè)計了一系列幾何造型的小型機器,它們可以沿著用馬克筆畫出的黑色線路前進(jìn),參與者可以在黑色線路邊上涂色,這些小型機器會在經(jīng)過這些顏色時把它們“翻譯”成為聲音。通過試驗不同的涂色以及顏色之間的間距,參與者就可以創(chuàng)作出基本的曲調(diào)。

下面這個裝置是個公共音樂裝置,6個高度連小朋友也能夠到的聲音裝置站立在博物館外的廣場上,它們能吞咽、扭曲聲音和回聲,組成一個音速游樂場。在任意一個喇叭面前,你都可以發(fā)出聲音,說一句話,唱一句詞,聲音會通過彎彎曲曲的管道流淌,至于這條聲音將從哪一端的喇叭里流出,就要靠你自己去探索了。

  • Synth Play

推動不同充氣體的不同位置,隨機產(chǎn)生的音樂就會響起。幾個朋友共同配合,在推一推的解壓氛圍中便能創(chuàng)作出一支專屬于你們的曲子。這樣的創(chuàng)作方式將誕生出無數(shù)種組合,每一點微小的變化,都會帶來微妙的聽覺享受。有點呆萌的白色方塊用來設(shè)定節(jié)拍,兩個白色的充氣體是創(chuàng)作音樂的主力,黑色充氣體則用來控制和調(diào)節(jié)音效。

  • Face the Music

在名為 ‘ 面對音樂 ‘(Face the Music)的互動性平臺上,你可以通過面部識別系統(tǒng)演奏電子音樂:抬抬眉毛敲敲鼓,張大嘴巴調(diào)音調(diào),晃晃腦袋調(diào)整音長。還有歌劇、科幻小說、藍(lán)調(diào)和電子舞曲等四種風(fēng)格供你自由選擇。

聲音設(shè)計是很大的一個領(lǐng)域,現(xiàn)在還很少有學(xué)生專門做一個音樂裝置放在作品集中,同學(xué)們?nèi)绻信d趣,想嘗試的話,可以構(gòu)思構(gòu)思,為自己的作品集多增加一些色彩。


文章作者:程雅秋
英國皇家藝術(shù)學(xué)院產(chǎn)品設(shè)計碩士
擅長產(chǎn)品服務(wù)系統(tǒng)設(shè)計、用戶體驗設(shè)計和硬件Arduino交互

文章來源:站酷  作者:馬克筆設(shè)計留學(xué)

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


聊天機器人的用戶體驗

ui設(shè)計分享達(dá)人

今天的聊天機器人遠(yuǎn)非“智能”,它們引導(dǎo)用戶通過簡單的線性流程,我們的用戶研究表明,每當(dāng)用戶偏離這些流程時,它們都會遇到困難。

聊天機器人是智能助手的可憐“親戚”。


定義:聊天機器人是一種特定于基于文本的對話界面,支持用戶完成有限的任務(wù)。


在其他地方,我們討論了智能助手的6個特性:語音輸入、自然語言處理、語音輸出、智能解釋、代理和前面所有特性的集成。聊天機器人只需要具備這兩種屬性:自然語言處理和智能解釋。換句話說,聊天機器人應(yīng)該能夠以自然語言接收查詢,并正確地理解和解釋它們(然后執(zhí)行它們)。


在當(dāng)今世界,至少有三個不同的因素推動著聊天機器人的發(fā)展和普及。首先,人們希望通過用機器人取代人工代理人來降低客戶服務(wù)成本。其次,像微信這樣的基于對話的系統(tǒng)的成功,提出了聊天機器人作為企業(yè)和服務(wù)的交互渠道的想法,旨在補充現(xiàn)有的渠道,如移動網(wǎng)絡(luò)和移動應(yīng)用程序。最后,Alexa和Google Home等語音智能助手的流行,促使許多企業(yè)在較小規(guī)模上效仿它們。


這些因素映射到今天可用的兩種不同類型的聊天機器人:

在企業(yè)與客戶之間的聊天交互中,客服機器人會接管部分人工負(fù)載。這類機器人的例子包括UPS的Ask UPS和阿拉斯加航空的Ask Jenn。


交互機器人的目的是提供與業(yè)務(wù)交互的額外通道,而不是用于客戶服務(wù)。例如,Domino的批薩機器人允許用戶訂購批薩;來自Progressive公司的Flo可以提供一份汽車保險報價。這種交互機器人可以在各種平臺上使用,其中最著名的是Facebook Messenger。(其他平臺包括Twitter和Slack。)然而,它們也可以存在于應(yīng)用程序(美國銀行的Erica)中,或者通過短信(Capital One的Eno)提供服務(wù)。

UPS.com網(wǎng)站使用聊天機器人來回答客服問題。

Kiehl ‘s Messenger聊天機器人:用戶可以通過在“發(fā)送消息”文本框中輸入文本或選擇屏幕上顯示的選項之一(發(fā)送位置或郵政編碼;文本輸入框下面的主菜單選項)。


雖然客服機器人通常是純文本的,但交互機器人將文本與可視化UI元素結(jié)合起來作為交互方法。


研究


為了了解聊天機器人的可用性,我們招募了8名美國參與者,讓他們在移動設(shè)備(5名參與者)和桌面設(shè)備(3名參與者)上執(zhí)行一組與聊天相關(guān)的任務(wù)。其中一些任務(wù)涉及為客戶服務(wù)而與人或機器人聊天,另一些任務(wù)則針對Facebook Messenger或基于短信的聊天機器人。


對機器人的態(tài)度


一般來說,人們對機器人的態(tài)度從中立到略微積極。互動機器人是一個相當(dāng)模糊的渠道:在我們的美國研究中,大多數(shù)參與者之前從未與此類機器人互動,他們也不知道它的存在。相比之下,微信公眾號頁面通常是這些機器人的復(fù)雜版本,我們的中國參與者對它們很熟悉。我們的一些參與者驚喜地發(fā)現(xiàn)了這個互動渠道,其他人則認(rèn)為與其他傳統(tǒng)渠道如網(wǎng)絡(luò)或移動應(yīng)用相比,它并沒有帶來足夠的價值。


人們普遍認(rèn)為客服機器人不如人類代表有幫助,但我們的參與者也認(rèn)為它們有一些優(yōu)勢。最重要的優(yōu)勢是速度:與人類聊天通常需要很長的等待時間(要么在隊列中,要么在對話開始之前,要么在人類為客戶的問題尋找解決方案時),而機器人可以是即時的。另一方面,人們覺得與真人接觸表明公司關(guān)心客戶:“真人真的很好。他們賣給你一件昂貴的物品,所以他們必須在代理人身上花更多的錢?!绷硪粋€人說:“如果你有一個人(負(fù)責(zé)客戶服務(wù)),那意味著你足夠關(guān)心;如果你有一個機器人,那么·你應(yīng)該有一個真正好的機器人。”


交互機器人通常很容易被識別為機器人,但客戶服務(wù)機器人很難識別。有些企業(yè)并不總是提前向客戶透露他們正在與機器人進(jìn)行交互。我們認(rèn)為這是一個錯誤。我們的研究參與者很高興看到企業(yè)使用機器人是透明的,因為他們可以調(diào)整自己的期望和語言。例如,當(dāng)用戶意識到他們是在和機器人說話時,他們往往會更直接,使用基于關(guān)鍵字的語言,并避免禮貌標(biāo)記。這種類型的語言通常比通常在正常對話中使用的復(fù)雜、間接的語言更成功。


用于交互聊天機器人UI


交互樣式
文本和鏈接/按鈕都可以用于向交互聊天機器人輸入信息。它們的目的略有不同:

  • 預(yù)先確定的鏈接和按鈕避免了用戶輸入。這些通常顯示在一個輪播列表中,可以包括圖像。人們喜歡有這些選項,甚至希望它們成為常用輸入。

  • 文本允許用戶在選擇他們想問的問題類型方面有一定的靈活性,并允許他們偏離聊天機器人(通常過于嚴(yán)格)的腳本。


這兩種輸入機制都很重要,應(yīng)該同時存在。


當(dāng)機器人不允許用戶選擇選項,而是要求用戶輸入時,用戶會抱怨。例如,一個參與者被Booking.com的機器人惹惱了,因為它不允許他選擇日期,他必須輸入日期。在輸入“感恩節(jié)”之后,他說:“應(yīng)該有一些明顯的東西來預(yù)先填充它。選項應(yīng)該預(yù)先填充——手動輸入很乏味。我應(yīng)該可以點擊按鈕才對?!?

人們更喜歡選擇一個選項(左邊是Domino的聊天機器人),而不是輸入冗長的文本(右邊是Booking.com)??紤]為最常見的輸入創(chuàng)建按鈕。


一些機器人完全取消了輸入文本的選項,迫使用戶選擇屏幕上顯示的選項之一。這種類型的設(shè)計使機器人類似于一個網(wǎng)站,并限制了用戶可以在系統(tǒng)內(nèi)探索的路徑。

Car Dealer聊天機器人不允許用戶在選擇庫存選項后輸入自由文本。


當(dāng)鏈接和按鈕被清晰地標(biāo)記時,它們的效果最好,人們希望能夠點擊交互機器人顯示的幾乎所有非文本元素。例如,當(dāng)eero Messenger機器人展示一組圖片來說明eero的行為時,我們的大多數(shù)研究參與者都會點擊這些圖片,希望獲得更多信息。

Eero for Messenger(左):為了告訴我更多信息,該機器人顯示了一個輪播,上面有幾張圖片和一組可能的延續(xù)(文本在圓形框中)。用戶希望能夠點擊輪播項,但這些并不是鏈接。Kielh’s for Messenger (右):輪播上的大圖片是不可點擊的,但是下面的鏈接是可點擊的。


除了常規(guī)的按鈕和鏈接,一些交互聊天機器人還有一個菜單元素,當(dāng)被選中時,它會顯示一組可能的任務(wù)。菜單有時顯示在輸入文本框下面,有時顯示為旁邊的一個小漢堡包圖標(biāo)。

金州勇士隊在輸入框下面有一個主菜單鏈接。選擇此鏈接將顯示一組可用的任務(wù)。當(dāng)用戶開始在輸入框中輸入時,菜單圖標(biāo)就顯示在它旁邊。主菜單鏈接和漢堡包圖標(biāo)做了同樣的事情。


其他鏈接有時顯示在消息框下面。這些鏈接是相當(dāng)容易發(fā)現(xiàn)的:我們的幾個用戶與它們交互;然而,靠近輸入框的圖標(biāo)不太可能被使用。

CNN bot:信息區(qū)下面的鏈接顯示了聊天機器人的一些主要任務(wù)(頭條新聞、主題、設(shè)置)。


線性流


交互聊天機器人似乎最像Alexa的技能:它們被設(shè)計用來指導(dǎo)用戶完成少量任務(wù)。機器人支持的任務(wù)最好被概念化為具有有限數(shù)量分支的線性流,這些分支依賴于可接受的用戶答案。機器人提出一個問題,其答案將推動機器人前進(jìn)到流的右邊分支。

一個線性流程的例子,機器人可能通過它來完成一個任務(wù)


當(dāng)用戶遵循流程并提供符合系統(tǒng)期望的“合法”答案,而沒有跳躍步驟或使用未知的單詞時,用戶會感到成功和順利。例如,一些參與者能夠成功地與Domino ‘s Pizza、Wingstop、Progressive等公司的聊天機器人進(jìn)行交互。然而,一旦用戶偏離了規(guī)定的腳本,問題就出現(xiàn)了。


例如,當(dāng)Domino ‘s Pizza機器人詢問她的位置是公寓還是房子時,一名參與者輸入townhome,機器人回答“我很抱歉。我好像聽不懂。”另一位尋找巴寶莉腰帶的用戶在消息框中輸入了“腰帶”,但是收到了訂單取消的信息。當(dāng)她把它轉(zhuǎn)換成“女式腰帶”時,她被告知要從一個鏈接列表中選擇,沒有一個鏈接與她要找的匹配。

巴寶莉的聊天機器人很難理解用戶想要完成的任務(wù),并在機器人的指令表中列出了若干任務(wù)。


機器人也很難從問題或意外輸入中恢復(fù),有時會迫使用戶從樹的頂部重新開始,并做更多不必要的工作來獲得答案。例如,我們的一個用戶想知道起亞是否有四輪驅(qū)動的電動車型。為了找到匹配的任務(wù),她不得不遍歷整個決策樹,回答諸如汽車需要容納的人數(shù)和MPG等問題。當(dāng)她對車輛類型偏好回答“不”而不是選擇一個顯示選項時,機器人就會停止并強迫她重新開始。


然而,有些機器人更加靈活,能夠理解偏離腳本的請求。例如,一個參與者知道Domino ‘s Pizza正在進(jìn)行促銷活動,他可以讓機器人將其加到自己的購物車中。在訂餐流程的晚期,他還能夠改變其中一個比薩餅的外殼。

Domino ‘s Pizza聊天機器人能夠?qū)Σ粚儆陬A(yù)訂披薩的主要線性流的請求做出滿意的響應(yīng)。左圖:用戶可以在訂購前將訂單加到他的購物車中。右圖:用戶更改了正在訂購的兩個比薩餅中的一個的外殼。


一些機器人很難做出假設(shè)并建立查詢的上下文。例如,我們的一名參與者試圖與Capital one的基于文本消息的機器人Eno進(jìn)行交互。他碰巧有兩張來自Capital One的信用卡,每次他問一個問題,機器人就會強迫他澄清查詢涉及的是哪個賬戶,而不會將上下文從一個交互傳遞到下一個交互。


當(dāng)啟動新任務(wù)時,機器人通常也不能利用之前輸入的信息。例如,我們的一名參與者首先決定叫披薩外賣;她輸入了自己的地址,但她被告知Domino ‘s不送貨上門。她又開始一遍,這次的目標(biāo)是去商店取貨而不是送貨。機器人第二次問她的地址,顯然完全忘記了她已經(jīng)輸入了地址。

Capital One的機器人Eno要求用戶在回答完每個問題后澄清他詢問的是哪個賬戶。左:Eno只識別用戶查詢中的關(guān)鍵字“transaction”(盡管拼錯了),無法回答用戶的特定問題;相反,它給出了其指令庫中一個匹配任務(wù)的答案。右:Eno重復(fù)了之前問的問題。


文章來源:站酷  作者:馬克筆設(shè)計留學(xué)

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



我們對2021年的用戶體驗有何期待?

ui設(shè)計分享達(dá)人

用戶體驗設(shè)計是一個動態(tài)領(lǐng)域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實世界之間的互動方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費更多的時間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


語音介面

我們在2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計中最明顯的趨勢之一。用戶正在體驗越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計應(yīng)運而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計元素和明亮的組合,但UX設(shè)計人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計的簡約方法的另一個重要方面。信息過載對于大多數(shù)現(xiàn)代用戶來說是一個痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗設(shè)計的一種大趨勢,它已經(jīng)脫離了對簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨立的設(shè)計元素,在視覺美學(xué)和用戶體驗優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對關(guān)鍵對象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗將與我們習(xí)慣的在線體驗不同。UX設(shè)計以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計師有意在版面設(shè)計中實現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計)的組合,它們通常被認(rèn)為彼此相對。擬態(tài)化是關(guān)于模仿現(xiàn)實世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實元素來創(chuàng)建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會將現(xiàn)實主義推到極致。取而代之的是,它努力實現(xiàn)淺色和微妙對比度的“柔和”外觀。



在過去大約一年的時間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計人員對該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計解決方案中實現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個界面中結(jié)合視差效果和3D圖形。使用視差滾動時,網(wǎng)頁背景和前景元素以不同的速度移動。僅憑它就能產(chǎn)生深度感。通過為此添加3D對象,您可以創(chuàng)建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


 



  

不對稱

隨著我們設(shè)備屏幕的變寬,UI / UX設(shè)計中出現(xiàn)了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時使它保持微妙和優(yōu)雅。


不對稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計技術(shù)一起實現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請務(wù)必記住,非對稱設(shè)計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強調(diào)重要信息。

動畫制作

今天,當(dāng)我們在互聯(lián)網(wǎng)上進(jìn)入隨機網(wǎng)站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設(shè)計元素。動畫在用戶體驗設(shè)計中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個性。



如果要在用戶界面設(shè)計中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網(wǎng)頁。動畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個實用的信息體系結(jié)構(gòu),UX設(shè)計人員需要對產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費太多精力就能獲得所需的結(jié)果。因此,在設(shè)計過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網(wǎng)站的用戶體驗。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對目標(biāo)受眾更具吸引力。

文章來源:站酷  作者:ZZiUP

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

我們對2021年的用戶體驗有何期待?

ui設(shè)計分享達(dá)人

用戶體驗設(shè)計是一個動態(tài)領(lǐng)域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實世界之間的互動方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費更多的時間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


語音介面

我們在2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計中最明顯的趨勢之一。用戶正在體驗越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計應(yīng)運而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計元素和明亮的組合,但UX設(shè)計人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計的簡約方法的另一個重要方面。信息過載對于大多數(shù)現(xiàn)代用戶來說是一個痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗設(shè)計的一種大趨勢,它已經(jīng)脫離了對簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨立的設(shè)計元素,在視覺美學(xué)和用戶體驗優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對關(guān)鍵對象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗將與我們習(xí)慣的在線體驗不同。UX設(shè)計以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計師有意在版面設(shè)計中實現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計)的組合,它們通常被認(rèn)為彼此相對。擬態(tài)化是關(guān)于模仿現(xiàn)實世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實元素來創(chuàng)建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會將現(xiàn)實主義推到極致。取而代之的是,它努力實現(xiàn)淺色和微妙對比度的“柔和”外觀。



在過去大約一年的時間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計人員對該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計解決方案中實現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個界面中結(jié)合視差效果和3D圖形。使用視差滾動時,網(wǎng)頁背景和前景元素以不同的速度移動。僅憑它就能產(chǎn)生深度感。通過為此添加3D對象,您可以創(chuàng)建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


 



  

不對稱

隨著我們設(shè)備屏幕的變寬,UI / UX設(shè)計中出現(xiàn)了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時使它保持微妙和優(yōu)雅。


不對稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計技術(shù)一起實現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請務(wù)必記住,非對稱設(shè)計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強調(diào)重要信息。

動畫制作

今天,當(dāng)我們在互聯(lián)網(wǎng)上進(jìn)入隨機網(wǎng)站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設(shè)計元素。動畫在用戶體驗設(shè)計中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個性。



如果要在用戶界面設(shè)計中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網(wǎng)頁。動畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個實用的信息體系結(jié)構(gòu),UX設(shè)計人員需要對產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費太多精力就能獲得所需的結(jié)果。因此,在設(shè)計過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網(wǎng)站的用戶體驗。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對目標(biāo)受眾更具吸引力。


文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


我們對2021年的用戶體驗有何期待?

ui設(shè)計分享達(dá)人

用戶體驗設(shè)計是一個動態(tài)領(lǐng)域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實世界之間的互動方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費更多的時間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


語音介面

我們在2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計中最明顯的趨勢之一。用戶正在體驗越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計應(yīng)運而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計元素和明亮的組合,但UX設(shè)計人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計的簡約方法的另一個重要方面。信息過載對于大多數(shù)現(xiàn)代用戶來說是一個痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗設(shè)計的一種大趨勢,它已經(jīng)脫離了對簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨立的設(shè)計元素,在視覺美學(xué)和用戶體驗優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對關(guān)鍵對象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗將與我們習(xí)慣的在線體驗不同。UX設(shè)計以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計師有意在版面設(shè)計中實現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計可以很好地證明品牌的身份并突出其獨特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計)的組合,它們通常被認(rèn)為彼此相對。擬態(tài)化是關(guān)于模仿現(xiàn)實世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實元素來創(chuàng)建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點。它使用圖形強度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會將現(xiàn)實主義推到極致。取而代之的是,它努力實現(xiàn)淺色和微妙對比度的“柔和”外觀。



在過去大約一年的時間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計人員對該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計解決方案中實現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個界面中結(jié)合視差效果和3D圖形。使用視差滾動時,網(wǎng)頁背景和前景元素以不同的速度移動。僅憑它就能產(chǎn)生深度感。通過為此添加3D對象,您可以創(chuàng)建一種真正的身臨其境的體驗,并將在用戶的記憶中保留很長時間。


 



  

不對稱

隨著我們設(shè)備屏幕的變寬,UI / UX設(shè)計中出現(xiàn)了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時使它保持微妙和優(yōu)雅。


不對稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計技術(shù)一起實現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請務(wù)必記住,非對稱設(shè)計并不意味著“隨機放置的UI元素”。在布局上定位對象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強調(diào)重要信息。

動畫制作

今天,當(dāng)我們在互聯(lián)網(wǎng)上進(jìn)入隨機網(wǎng)站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運動設(shè)計元素。動畫在用戶體驗設(shè)計中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個性。



如果要在用戶界面設(shè)計中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計劃的要早離開網(wǎng)頁。動畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個實用的信息體系結(jié)構(gòu),UX設(shè)計人員需要對產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費太多精力就能獲得所需的結(jié)果。因此,在設(shè)計過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網(wǎng)站的用戶體驗。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對目標(biāo)受眾更具吸引力。

文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日常臨摹如何用到項目里去?這個案例說明白!

周周

不同的階段,臨摹的目的不盡相同。一般來說,前期臨摹更多的是練習(xí)軟件、技法,后期練習(xí)別人的風(fēng)格表達(dá),綜合運用。所以,我把臨摹分為技法臨摹、半原創(chuàng)到原創(chuàng) 3 個階段,每一個階段沒有絕對的界限,都是在積累創(chuàng)意,完全是可以用到自己的項目中去的。

今天會分享一個我當(dāng)年做臨摹練習(xí)并融入實際項目中的小案例。

臨摹

大概是在 15 年左右,在網(wǎng)上看到錘子設(shè)計師設(shè)計的一個圖標(biāo),覺得非常驚艷,當(dāng)時就想把它臨摹下來,這是當(dāng)時臨摹的一個效果。


日常臨摹如何用到項目里去?這個案例說明白!△ 原作

日常臨摹如何用到項目里去?這個案例說明白!

△ 這是我當(dāng)時臨摹的圖

我在臨摹這張圖的時候,想達(dá)到的目標(biāo)是能根據(jù)自己的 logo 色及文字,做一個半原創(chuàng)的設(shè)計。

然后實際練習(xí)中,不斷觀察原作發(fā)現(xiàn)有一些細(xì)節(jié)值得學(xué)習(xí):

日常臨摹如何用到項目里去?這個案例說明白!

  1. 圖標(biāo)分為水上和水下,2 個層級,在水下的圖形因為折射的關(guān)系,會發(fā)生扭曲
  2. 水下會有深淺的顏色變化
  3. 真實的水會流動,所以在水下會畫出帶明暗細(xì)節(jié)的水紋線條
  4. 水下會有氣泡,且氣泡的產(chǎn)生符合真實場景,氣泡的大小由小變大
  5. 水面的邊緣因為透光而產(chǎn)生邊緣反射
  6. 投影因為紅色盒子的影響,會偏紅色色相,并且有近實遠(yuǎn)虛的關(guān)系
  7. 盒子的邊緣會有 1px 的高光和反光
  8. 背景為了增加圖標(biāo)的展示效果,也做了單獨的設(shè)計,把四周壓暗,然后加上雜色,使得整體的質(zhì)感更加強烈

當(dāng)時,對我來說,在練習(xí)的過程中有一個難點就是關(guān)于第 3 個細(xì)節(jié)水的紋理執(zhí)行有些難度,因為其中包括了粗細(xì)變化、虛實變化、明暗變化等等,單純的用圖層樣式或者矢量去畫的話,難度都比較大。這個細(xì)節(jié)當(dāng)時耗費了我不少時間,后面突然想到其實也可以用合成的辦法來實現(xiàn),然后我去找了真實水紋的圖片進(jìn)行疊加,很快就搞定了。所以,只要能達(dá)到效果,不能太過于局限某一種思路。

日常臨摹如何用到項目里去?這個案例說明白!

分析并完成這些細(xì)節(jié)后,就是你在做這個練習(xí)中學(xué)到的點,嘗試把它們學(xué)以致用。

運用

記得當(dāng)時在 360 時需要設(shè)計一套關(guān)于摩洛哥藍(lán)色小鎮(zhèn)的官方定制版主題圖標(biāo)。從搜集的當(dāng)?shù)卮硇缘膱D片中發(fā)現(xiàn),多彩顏料是當(dāng)?shù)氐囊淮筇卣鳎詻Q定以染料為關(guān)鍵詞去畫一個圖標(biāo),又因為顏料本身自帶多彩的特點,所以以它為主題圖標(biāo)就很合適了。

日常臨摹如何用到項目里去?這個案例說明白!

然后在思考這個圖標(biāo)的時候,首先會應(yīng)用參考圖中的配色,并結(jié)合染缸的造型做出了第一版的效果。

日常臨摹如何用到項目里去?這個案例說明白!

這個效果雖然是表達(dá)了那個意思,但缺乏亮點,聯(lián)想之前練習(xí)過水的技法表達(dá)(臨摹中第 3 點細(xì)節(jié)運用),正好可以利用水的紋理做下強化,這樣就優(yōu)化出了第二版。

日常臨摹如何用到項目里去?這個案例說明白!

嗯,看起來感覺有了一些特點,但感覺缺乏細(xì)節(jié),接著思考水除了有紋理高光,應(yīng)該還會有邊緣高光(結(jié)合臨摹中第 5 點細(xì)節(jié)),所以在邊緣嘗試加了高光,增加體積感,做出水要漫出來的感覺。

日常臨摹如何用到項目里去?這個案例說明白!

如果只有這一層高光的話,細(xì)節(jié)度感覺還是不大夠,在之前的文章《如何從優(yōu)秀作品中偷師,用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學(xué)到他們對于 1px 高光的使用(臨摹作用中的第 7 點),這里因為是液體的材質(zhì)表現(xiàn),所以增加一個高光點增加水的通透感。

日常臨摹如何用到項目里去?這個案例說明白!

日常臨摹如何用到項目里去?這個案例說明白!

到目前為止,似乎看起來已經(jīng)差不多了,但考慮到現(xiàn)實世界中,溢出的彩色液體在透光性很好的情況下,也會對周圍環(huán)境產(chǎn)生影響,所以我在顏料設(shè)計的四周,配上對應(yīng)的四種顏色的模糊投影(臨摹練習(xí)中的第 6 點)。

日常臨摹如何用到項目里去?這個案例說明白!

在思考下,在臨摹的圖標(biāo)中為了使得圖標(biāo)更加自然,作品中其實結(jié)合了很多真實世界中會發(fā)生的情況,比如水的折射,氣泡的比例,深淺等等,那對于染料來說,會有怎樣的真實情況發(fā)生呢?我當(dāng)時想到一點是,染料在用的過程中其實很容易灑出來,所以圖標(biāo)背板上現(xiàn)在太過于干凈了,增加一些細(xì)節(jié)能夠使得背板能夠跟主體物產(chǎn)生關(guān)聯(lián),也更加自然。嗯,又是一個小細(xì)節(jié)。

日常臨摹如何用到項目里去?這個案例說明白!

最后,我們對比下第一版和最終版的效果,細(xì)節(jié)確實豐富了很多。

日常臨摹如何用到項目里去?這個案例說明白!

一張動態(tài)圖可以更加清晰的看到變化。

日常臨摹如何用到項目里去?這個案例說明白!

總結(jié)

這次圖標(biāo)的優(yōu)化過程,我覺得有幾個要點對我來說印象深刻的:

圖標(biāo)的風(fēng)格可以是扁平的,但想要增加自然舒服的細(xì)節(jié),一樣可以像畫寫實風(fēng)格那樣仿照現(xiàn)實。你需要留心觀察這個世界,就算是一張照片中也能有非常多可以利用的細(xì)節(jié)。

碰到難做出來的細(xì)節(jié),多想想有沒有更效率的辦法。比如在做水紋理的時候,一開始就想著完全靠鼠繪畫出來,結(jié)果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出來。

對于圖標(biāo)來說,要注意其整體性。比如圖標(biāo)中的主體物不要跟背景脫離,不要讓圖標(biāo)背板只是作為一個容器,而要讓背板也成為圖標(biāo)本身的一部分,這樣圖標(biāo)的整體性會更好。

臨摹的過程中,一定要多分析,多記錄自己覺得是細(xì)節(jié)的點。每一次記錄,都可能是將來設(shè)計時提升細(xì)節(jié)的靈感來源。

以上內(nèi)容只是我在日常練習(xí)中應(yīng)用到實際項目中的一個小案例,其實還有非常多的靈感想法都來自于你平時做的練習(xí),關(guān)鍵是要多動手,多總結(jié),才能增強自己對細(xì)節(jié)的把握能力。





文章來源:優(yōu)設(shè)網(wǎng)     作者:彩云譯設(shè)計



藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)



新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了

周周


最近負(fù)責(zé)的新項目快上線了(感覺我好像一直在做 0-1),給大家總結(jié)了5個一定會遇到的新項目盲區(qū)及最新的解法,希望能幫助大家在交付開發(fā)前就順利完成設(shè)計輸出。

關(guān)于蘋果賬戶登錄的硬性規(guī)定

2020 年 4 月后,我們在設(shè)計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕,但關(guān)于這個按鈕的設(shè)計規(guī)范其實有比較硬性的規(guī)定,沒有注意的話到了開發(fā)還原的時候就容易踩坑。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

在國內(nèi)的 iOS 登錄設(shè)計中通常突出的主流登錄方式是“微信”,手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現(xiàn)。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

蘋果官方是允許對 Apple 賬戶登錄按鈕進(jìn)行一定的自定義的,其中就包含將其弱化為一個圓形的圖標(biāo)按鈕,只是圖標(biāo)與圓形按鈕的大小比例是官方固定的比例(這個大家直接下載官方提供的圖標(biāo),它是自帶留白的區(qū)域的,保持圖標(biāo)與高寬一致就符合要求了)。

而國外的 iOS 登錄設(shè)計中通常沒有那么多的第三方登錄方式并存,主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現(xiàn)在界面中。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

這個時候需要特別注意的是,蘋果官方對于這種大按鈕的限制主要在于 3 個部分:

  • 按鈕的高度需要等于圖標(biāo)的寬高(圖標(biāo)官方有提供下載,已經(jīng)是自帶留白區(qū)域的)
  • 按鈕的高度需要與中間的文案成一定比例(字體是按鈕高度的 43%,比如 44 的高度配 19 的字)
  • 圖標(biāo)離左側(cè)最小間距需要超過按鈕高度的 10%

剩下的按鈕樣式,比如顏色和描邊也非常有限,只可以使用白色填充黑色描邊與純黑色底這 2 種。

想了解更多具體內(nèi)容,可以參考官方貼:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

關(guān)于安卓啟動圖標(biāo)可帶動效了

還記的早幾年做安卓項目的時候上架應(yīng)用商店的啟動圖標(biāo)輸出還是和 iOS 差異不大的,基本就是尺寸換換。這次輸出啟動圖標(biāo),被安卓的開發(fā)大大告知,安卓可以出這種帶動效效果的啟動圖標(biāo)了,它的原理和效果,如下圖:

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

實現(xiàn)這個效果的設(shè)計配合輸出也很簡單,只需要整理一下的具體啟動圖標(biāo)輸出就可以:

1. 啟動圖標(biāo)(前景,不帶背景的)-108dp(324px)

當(dāng)然以上僅針對純色背景,可以與 logo 主體輕易分隔的啟動圖標(biāo)。如果是混為一體的話就需要調(diào)整輸出方式為以下:

  • 啟動圖標(biāo)(前景,不帶背景的)-108dp(324px)
  • 啟動圖標(biāo)(背景)-108dp(324px)

想了解更多具體內(nèi)容的鐵汁,戳底下官方傳送門:https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

關(guān)于全屏切圖的壓縮限制

這次新項目又遇到了開發(fā)中改稿的問題,大部分都因為全屏的背景圖切圖大小問題。

個別全屏視覺的界面,比如閃屏、登錄頁、音視頻語音等等,我們通常設(shè)計時不考慮切圖的大小問題就會比較放飛去設(shè)計。

但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右,就算把壓縮率提到 80%+(市面上大部分壓縮軟件的壓縮率都很有限,比如大家常用的 tinypng、pp 鴨等),就算你重復(fù)壓縮,也有至少 200 多 KB,遠(yuǎn)遠(yuǎn)超出開發(fā) 100k 以內(nèi)的切圖大小限制。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

所以不得不要求我們在輸出格式的時候拋棄 png 格式,啟用 JPG。

不過實際設(shè)計時候我們可能仍然會遇到不能用 JPG,必須用 PNG 格式的情況(透明度蒙層),那么建議大家可以嘗試以下 2 個小技巧:

  • 盡量使用純色背景設(shè)計,這樣背景圖可以用代碼來寫,主體切圖大小可以想對控制小一些。
  • 如果還是需要使用花色背景,建議可以嘗試高斯模糊的花色背景,這樣開發(fā)可以直接用 1 倍圖進(jìn)行拉伸,也可以有效控制切圖大小。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

最后不想屈服于樣式限制的鐵汁,一定記得提前輸出格式大小康康會不會超標(biāo)嚴(yán)重(盡量控制在 100k 以內(nèi)),不然無法落地再好看也沒有用咯。

關(guān)于動效到底導(dǎo)出什么格式不坑爹

目前關(guān)于移動端界面里個別小動效的導(dǎo)出比較主流的幾種格式是:Gif、逐幀圖、Lottie(Jason)、Webp、Apng。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

Gif、逐幀、包括前幾年流行的 Lottie 大家應(yīng)該都比較熟悉了,這里稍微科普 2 個陌生一點的格式:

  • Apng:一個 PNG 格式的位圖動畫格式圖片
  • Webp:2010 年 Google 推出的全部通吃的圖片格式(可代替 Jpg、gif、png)

目前我覺得性價比最高的就是 webp,它的優(yōu)勢主要在于:

  • 壓縮率極大提升,同分辨率的 webp 比 gif 要小很多
  • 支持位圖、支持支持 Alpha 透明和 24-bit 顏色數(shù)、支持 3D 翻轉(zhuǎn)(這些 GIf 和 Lottie 都有限制),也就是不會出現(xiàn)毛邊啦、變色一類的坑爹情況
  • iOS、安卓都支持(比如同樣高性價比的 Apng 只能用于 iOS 端)

唯一的 2 個問題在于:

  • webp 目前只兼容 Chrome 和 Opera 瀏覽器,其它瀏覽器不支持。不過基本我們都應(yīng)用于移動端應(yīng)用,所以瀏覽器兼容對這個影響應(yīng)該還好
  • AE、PS 等各類動效設(shè)計的軟件無法直接導(dǎo)出 webp 格式,需要通過插件或其他第三方軟件轉(zhuǎn)換。

我度娘過一些導(dǎo)出 webp 的方式都不是很好用,問了我司的動效設(shè)計師,推薦一個比較簡單靠譜的方式分享給大家:

1. 先從 AE 導(dǎo)出逐幀圖(記得需要循環(huán)的動效做好循環(huán))

不知道如何到逐幀圖的看這里:渲染→渲染設(shè)置→格式→選擇“PNG”序列→導(dǎo)出即可

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

2.下載 isparta

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

3. 直接將 AE 導(dǎo)出的逐幀圖文件包拖到 isparta 里導(dǎo)出 webp 格式(可選)

關(guān)于切圖標(biāo)注協(xié)作方式誰家強

設(shè)計交付的協(xié)同平臺現(xiàn)在市面上很多,很多大廠也有自己內(nèi)部的協(xié)同平臺來承載設(shè)計交付,俺們豬廠用的叫 dbox(非常滴不好用),在強推之下開始申請經(jīng)費改用 Figma 了。之前為了更換協(xié)同平臺,把交付的協(xié)同平臺都做了一番調(diào)研,這里給大家直接看表格吧。

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

看完圖大家就會發(fā)現(xiàn)除了 Figma 大家的使用情況不會差很多,差的主要還是錢??偟膩碚f的建議就是,如果已經(jīng)從sketch改用Figma的土豪團(tuán)隊就可以直接分享Figma文件鏈接給開發(fā)搞定切圖標(biāo)注以及文件存檔這2件事兒了。

如果還在用 sketch 和 XD 的鐵汁,交付型的協(xié)同平臺我個人比較推薦 Zeplin,雖然有的人會說它服務(wù)器在國外很卡,我覺得其實還好吧,同時 Zeplin 近幾年還解決了 Win 系統(tǒng)適配的問題。

然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的,因為高清度、流暢度到美感幾乎都比較完美。一直到我發(fā)現(xiàn)了它居然是個完全開放的交付協(xié)作平臺,也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件,瞬間安全系數(shù)降為 0。作為一個明顯對標(biāo)企業(yè)級的協(xié)作平臺這么瘋狂的植入社交功能,到底是企鵝的社交基因太強大還是怎么肥四?

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!





文章來源:優(yōu)設(shè)網(wǎng)     作者:Nana的設(shè)計錦囊



藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



日歷

鏈接

個人資料

存檔