對于很多設(shè)計師來講在設(shè)計界面過程中往往會忽略掉很多的細節(jié),比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等,特別是剛?cè)胄械脑O(shè)計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上,這種做法理論上不會讓自己的頁面出錯,但是很多人往往忽略了一點,就是別人這么設(shè)計的目標是什么,是否會匹配自己的設(shè)計目標,如果不了解這些貿(mào)然的去搬運設(shè)計,那么時間久了會養(yǎng)成一個不好的習慣,需要設(shè)計師去進行設(shè)計時可能就會遇到很多難點,作為初級設(shè)計師或者剛?cè)胄械脑O(shè)計師,前期可以去進行搬運設(shè)計,但是一定要了解別人為什么這么做。
接下來將分享12個設(shè)計上的小技巧,大部分在日常設(shè)計中都會遇到,了解到這些設(shè)計細節(jié),可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率,避免繁雜小操作步驟
左側(cè)為什么錯??
左圖中針對單條消息的操作匯聚到了icon內(nèi),對于用戶理解成本比較高,當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作,大大的提升了用戶操作成本。
建議正確做法~~
我們可以在類似的消息場景或者其他列表形式的場景中,添加一些交互手勢,隨著手機系統(tǒng)的更新,用戶的操作習慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟,并不用擔心用戶無法操作的情況,增加手勢有弊端也有優(yōu)勢,右圖中手勢增加了用戶首次使用的學習成本,但是降低了高頻功能的操作成本,這個理論上是可以接
受的。
實際產(chǎn)品中的運用
利用拇指定律把關(guān)鍵的操作入口元素等,放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯??
左圖中把按鈕放置了模塊左下側(cè),這樣是不利于用戶進行操作,當然如果整個模塊的熱區(qū)都是同一個,這樣并沒有什么問題,用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作,如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口,而用戶想要到達目標必須通過按鈕點擊才能進入,那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法~~
當一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時,按鈕點擊區(qū)域有限,我們設(shè)計時就可以利用拇指定律進行排版,如右圖中布局,將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標,因為國內(nèi)使用右手的人數(shù)遠遠大于左手用戶,所以我們需要滿足大部分的體驗,合理利用拇指定律。
相關(guān)定律:費茲定律、拇指定律
實際產(chǎn)品中的運用
對于我們來講很多東西是簡單的,但是不乏會有一些用戶是陌生的,對于他們來講可能會有填寫成本。
左側(cè)為什么錯??
左圖中理論上并不是錯,我們經(jīng)常設(shè)計表單時都會用的提示話術(shù),但是我們需要考慮更多維度的東西,對于我們來講填寫這種表單非常簡單,例如個別用戶,可能會臨時忘了郵箱格式,又或者輸入手機號時多填了一位數(shù)等等情況,用戶錯誤一次操作步驟就會多一步,反之就是降低使用產(chǎn)品時的體驗。
建議正確做法~~
如右圖中,我們設(shè)計時可以更改提示的話術(shù),幫助用戶把問題前置,當用戶看到提示郵箱時就會按照格式去填寫,通過把手機號的位數(shù)拆分,讓用戶更好的記憶數(shù)字,這樣無論對產(chǎn)品還是用戶都沒有任何損失,反而能降低錯誤頻率。
實際產(chǎn)品中的運用
無論是頁面還是模塊,用戶在閱讀時是已掃讀的方式進行瀏覽,我們需要保證頁面的文字元素具備一定的規(guī)律,以此來提升閱讀效率。
左側(cè)為什么錯??
左圖中可以看到,文字與輸入框放在同一列進行展示,這樣一方面不利于后續(xù)的文字擴展,通常這種表單填寫的頁面,在頁面中都是具有很大的空間位置,這樣排布會造成視覺上的不規(guī)律和擁擠,降低了篩選效率,當然如果是模塊區(qū)域很小的情況下,可以適當?shù)倪M行使用。
建議正確做法~~
右圖中我們把文字與輸入?yún)^(qū)域上下排布,雖然文字長短不一,但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的,有效的提升信息篩選效率。
實際產(chǎn)品中的運用
我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導(dǎo),用戶對此類消息模塊認知上會默認不可點擊,因此需要我們加以引導(dǎo)。
左側(cè)為什么錯??
我們常見的消息模塊內(nèi)容為兩種,一種是互動類消息即用戶與用戶,另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容,前者基于用戶習慣而言用戶已經(jīng)沒有使用成本默認是可以進行點擊交互,后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶,但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互,這就導(dǎo)致了用戶認知上出現(xiàn)了混亂,左圖中像系統(tǒng)通知功能通知其實從視覺上看,并不具備點擊欲望,因此可能會對用戶造成錯誤的理解。
建議正確做法~~
當我們在設(shè)計時需要注意,若消息列表中存在系統(tǒng)類消息并且可以進行交互,在設(shè)計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊,如果該功能有數(shù)據(jù)指標,這種方式也同樣能賦能產(chǎn)品指標。
實際產(chǎn)品中的案例
目前市場上產(chǎn)品幾乎都有深色版本,我們在設(shè)計時深色版本的顏色時需要注意飽和度的高低,同樣的飽和度在黑色背景上會比白色背景上更加亮,這跟人的視覺感官有很大的關(guān)系,因此我們在做黑色版本時需要注意是否調(diào)整飽和度。
左側(cè)為什么錯??
在黑色背景中使用過高的飽和度會刺激眼睛,很多深色版本都是從白色模式通過反向顏色直接調(diào)整,而彩色元素會直接運用到深色中,那么就會造成一個問題,因為我們習慣在白色模式下看顏色,忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”,對眼睛的傷害很高。
建議正確做法~~
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度,包括圖標等元素,以此來緩沖對用戶視覺感官的刺激,目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理,這樣無需在添加更多的顏色規(guī)范。
實際產(chǎn)品中的案例
在設(shè)計模塊或者頁面時不建議使用特殊字體來突出文字層級,這樣會導(dǎo)致視覺不統(tǒng)一,以及開發(fā)成本增加。
左側(cè)為什么錯??
左圖中灰色字使用了特殊字體,看起來雖然好看,但在實際開發(fā)中會導(dǎo)致開發(fā)成本增加,我們產(chǎn)品一般使用的是系統(tǒng)字體,若使用特殊字體需要讓開發(fā)同學添加對應(yīng)字體包,這樣會導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大,除非產(chǎn)品中默認一直使用該特殊字體,這樣才有使用的價值。
建議正確做法~~
一般系統(tǒng)字體就能夠滿足我們的設(shè)計需求,在UI設(shè)計中我們可以通過不同的字體粗細來調(diào)整文字層級,這樣能夠保證視覺更加統(tǒng)一,減少產(chǎn)品包大小。
實際產(chǎn)品中的案例
在設(shè)計時需要注意多個入口在同一位置時,需要把它們進行層級劃分,避免影響用戶決策
左側(cè)為什么錯??
圖中可以看到,兩個面性按鈕非常明顯的在模塊中,當用戶在瀏覽頁面中很容易出現(xiàn)困惑,到底需要點擊哪個才能購買預(yù)定,因為兩個都是面性無法快速進行定位入口,這樣不僅影響用戶決策效率,還會影響產(chǎn)品點擊率。
建議正確做法~~
建議設(shè)計類似模塊中時,無論是pc還是移動端都需要對入口進行結(jié)構(gòu)劃分,這樣能夠使用戶在瀏覽頁面時快速定位到入口,提升決策效率,做體驗是解決用戶的思考時間。
實際產(chǎn)品中的案例
在UI設(shè)計中使用圖標時,要保持一致性,確保他們共有相同的視覺風格,相同的重量,填充和描邊。不要混搭。
左側(cè)為什么錯??
可以看到左圖中的圖標并不統(tǒng)一,線性里面摻雜著面性點綴,這在UI設(shè)計中嚴重違背了一致性的原則,會導(dǎo)致我們的頁面不夠嚴謹專業(yè)。
建議正確做法~~
在設(shè)計圖標時,首先要保證圖標風格一致,其次在這個基礎(chǔ)上保證圖標的描邊粗細、視覺占比重量、顏色等,不要出現(xiàn)混搭風格。
實際產(chǎn)品中的案例
在設(shè)計頁面模塊時,可以多利對比度的方式來體現(xiàn)設(shè)計的表現(xiàn)力,鮮明直接的色值能夠直接表達事物的性質(zhì)以及特點,通過對比,也能夠更加清晰的強調(diào)設(shè)計中的重點,這樣給用戶的印象會更深刻,同樣會給產(chǎn)品帶來一定的趣味性。
左側(cè)為什么錯??
左圖中單看視覺也沒問題,只是在表現(xiàn)上圖標與背景融入到一塊了,導(dǎo)致視覺表現(xiàn)力較差,在設(shè)計中如果符合產(chǎn)品風格的前提下,我們可以避免這種方式,這種方式雖然具有視覺效果但不夠強,對用戶的記憶點不夠深刻。
建議正確做法~~
設(shè)計到類似的模塊時我們可以利用對比的關(guān)系,以此突出視覺元素,通過顏色焦點引導(dǎo)用戶關(guān)注,強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。
實際產(chǎn)品中的案例
在設(shè)計圖文疊加的卡片或者頁面時,我們需要注意不同明度的圖片上,文字識別是否有阻礙,一般情況會通過遮罩方式避免這個情況。
左側(cè)為什么錯??
左圖中在深色圖片下字體的可讀性是沒有問題的,但當出現(xiàn)文字底部區(qū)域的圖片相對復(fù)雜時便會影響識別,第二種情況當圖片明度過高時文字同樣無法識別,試想一下,一張白色調(diào)性的圖片上放文字,那基本無法看清,嚴重影響閱讀體驗。
建議正確做法~~
在界面設(shè)計時如果遇到類似的卡片,建議在文字區(qū)域添加漸變遮罩的方式,以此保證文字的識別度,或者添加純黑色透明遮罩進行處理,這樣可以兼容不同環(huán)境的圖片與文字的重疊,保證基本的閱讀體驗。
實際產(chǎn)品中的案例
UI設(shè)計中經(jīng)常會遇到彈窗,彈窗是需要配合頁面遮罩來讓用戶進行專注操作,不同的遮罩透明度所帶來的專注度也不同。
左側(cè)為什么錯??
左圖中我們看到,遮罩的透明度過低,我案例設(shè)置的是17%,此時彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯,一般彈窗是用來讓用戶跳脫頁面內(nèi)容,從而瀏覽彈窗內(nèi)容,轉(zhuǎn)變用戶目標,當彈窗無法聚焦時便很難達到目標,并且視覺上層級更加混亂。
建議正確做法~~
右圖中案例我把透明度調(diào)整到了37%,我們此時再看彈窗很容易就忽略頁面內(nèi)容,因為灰色越高,遮擋度越高,用戶跳脫感就越強,這樣我們可以讓用戶專注彈窗內(nèi)容,同時視覺結(jié)構(gòu)上也區(qū)分很明顯。
實際產(chǎn)品中的案例
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
企業(yè)多產(chǎn)品線模式下,UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)?;嵘喈a(chǎn)品線整體體驗中的方法論和實踐經(jīng)驗。
SaaS 產(chǎn)品體驗要求越來越高,用戶體驗已經(jīng)成為產(chǎn)品競爭力的重要組成部分,怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗設(shè)計,本文從貼合業(yè)務(wù)線的設(shè)計規(guī)范、敏捷易用的前端組件庫、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗文化打造、UI設(shè)計質(zhì)量品控5個方面闡述項目快速、規(guī)?;嵘喈a(chǎn)品線整體體驗過程中方法論和實踐經(jīng)驗。
關(guān)鍵詞:
用戶體驗設(shè)計;UI設(shè)計規(guī)范;多產(chǎn)品線;體驗文化;UI設(shè)計落地
面對多產(chǎn)品體系,多產(chǎn)品線,需要積極尋找和探索適合我們客觀情況的最佳實踐,我們面臨的問題有:
1.過往以功能堆砌為主、基本“能用”,缺乏平臺規(guī)范和一致性,體驗不足。
2.產(chǎn)品線多、體量大。
3.客戶對產(chǎn)品體驗要求越來越高。
4.產(chǎn)品歷史包袱、修復(fù)改動困難。
5.對用戶體驗認知不一,協(xié)同、溝通成本高。
6.重復(fù)的開發(fā)成本。
7.第三方組件與業(yè)務(wù)的匹配度不佳。
解決以上幾大難題,我們啟動了UI 設(shè)計規(guī)范的搭建、UI組件庫的開發(fā)等,讓規(guī)范和組件庫成為各產(chǎn)品線堅實底座的一部分,使用戶體驗文化賦能前端和產(chǎn)品經(jīng)理,協(xié)同 QA 力量一起推動產(chǎn)品體驗升級,以下整理分享的實踐方法適用于中小型UED團隊支撐復(fù)雜、多業(yè)務(wù)線的企業(yè),本文嘗試從以下幾個方面總結(jié)和提煉實踐經(jīng)驗,跟業(yè)界同行探討。
設(shè)計規(guī)范體系的搭建對于新的團隊,如何從復(fù)雜海量的業(yè)務(wù)場景中制定出一套適用于自己產(chǎn)品的UI設(shè)計規(guī)范,是第一道待翻越的高墻,完整的設(shè)計規(guī)范應(yīng)該是包含視覺規(guī)范與交互規(guī)范,本文主要針對設(shè)計規(guī)范實踐過程進行闡述。
貼合場景的設(shè)計規(guī)范:
雖然市面上已經(jīng)有眾多成熟的設(shè)計規(guī)范體系可供使用,但是當前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場景等綜合因素,決定了需要重新搭建一套符合我們自己業(yè)務(wù)場景的設(shè)計規(guī) 范體系。
UI規(guī)范效益最大化:
一旦我們決定制作規(guī)范,就要把規(guī)范當成一個產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程,去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價值。 依據(jù)規(guī)范效益模型,在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%,先解決統(tǒng)一性,再解決場景細分,打造高質(zhì)量通用的模式庫以提高質(zhì)量和效率,并力求讓更多人從這套設(shè)計體系中獲益, 從而讓規(guī)范體系發(fā)揮更大的價值。
UI規(guī)范制定的策略:
明確用戶對設(shè)計規(guī)范的訴求,構(gòu)建適合產(chǎn)品的UI設(shè)計規(guī)范,首先,需要明確規(guī)范體系的用戶群體經(jīng)過設(shè)計團隊多輪調(diào)研,確定設(shè)計規(guī)范面向的目標用戶群、基于核心用戶的訴求,為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。
確定UI設(shè)計價值觀:
產(chǎn)品歷史包袱重,系統(tǒng)結(jié)構(gòu)復(fù)雜,在提升用戶體驗時,內(nèi)容表達「清晰明確」是第一要務(wù),例如尊重已經(jīng)形成的用戶習慣,優(yōu)化改造時,注意版本之間的銜接,讓用戶「清晰明確」,這也是為什么將「清晰明確」作為價值觀之首,另外提升效率是企業(yè)級產(chǎn)品用戶體驗的永恒主題,同時兼顧系統(tǒng)的簡潔與一致。
梳理UI規(guī)范框架:
UI設(shè)計規(guī)范包括設(shè)計價值觀、全局規(guī)則、組件庫、模式庫、典型頁面、移動端規(guī)范和設(shè)計資源框架整理主要從以下3個方面進行:
1.梳理現(xiàn)有組件,剔除不使用的部分 。?
2.同類競品的框架借鑒,查漏補缺。 ?
3.場景驗證,與業(yè)務(wù)場景深度結(jié)合經(jīng)過充分論證和梳理,對規(guī)范框架做了重新定義,增補了業(yè)務(wù)缺少的內(nèi)容。
如上圖所示,例如對高頻的工具欄組件的補充,典型頁面的補充,增加模式庫以及全局規(guī)則,當前第一個版本的規(guī)范框架是基于業(yè)務(wù)場景優(yōu)先級最高的內(nèi)容進行制定,更多的規(guī)范內(nèi)容的增加依托于不斷的迭代,逐漸完善規(guī)范框架。
規(guī)范內(nèi)容的制定及評審:
組件規(guī)范包含:變更記錄、組件定義、何時使用、組件的類型、組件的響應(yīng)。
規(guī)范內(nèi)容制定的原則: ?
1.有明確場景可依。?
2.精簡不必要的分支 例如在定義表單規(guī)范時,對于表單標簽的對齊方式做了統(tǒng)一的約束,標簽右對齊,輸入框左對齊全局保持統(tǒng)一。
邏輯正確、規(guī)則明確易懂: ?
例如常見的alert (警告提示)名稱調(diào)整為常駐提示,語義更貼合場景,便于理解。
規(guī)則的可拓展性,多場景的兼容性: ?
產(chǎn)品架構(gòu)是PC端到移動端的自動適配,因此在組件設(shè)計的時候需同時考慮PC端與移動端的對應(yīng)關(guān)系以及兩端場景的兼容性。
協(xié)作及敏捷迭代: ?
規(guī)范發(fā)布后,伴隨著實際項目的檢驗,業(yè)務(wù)場景的擴充變化,如何高效的對設(shè)計規(guī)范進行迭代,決定了設(shè)計系統(tǒng)能否持續(xù)的走得更遠,規(guī)范內(nèi)容定期評審,必須通過業(yè)務(wù)、技術(shù)、設(shè)計評審,確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負責,同時有backup,可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。
敏捷易用的前端組件庫: ?
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點,快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫,是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
復(fù)雜的業(yè)務(wù)場景和多產(chǎn)品線特點,快速打造一套敏捷易用、高質(zhì)量并符合實際業(yè)務(wù)場景的前端組件庫,是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗的關(guān)鍵。
前端組件庫建立目標: ?
1.提高開發(fā)效率,對高頻使用、通用組件進行代碼化封裝,避免重復(fù)開發(fā)工作。 ?
2.提高開發(fā)質(zhì)量,通過各類業(yè)務(wù)場景和業(yè)務(wù)線的錘煉,沉淀組件代碼最佳實踐。 ?
3.提高產(chǎn)品體驗,組件封裝代碼化,減少在多角色協(xié)同中因為理解偏差、信息傳遞問題等導(dǎo)致的不確定性和結(jié)果不可控性,不同業(yè)務(wù)線、不行項目、共用一套基礎(chǔ)代碼,保證體驗的一致性,組件的組織形式: 結(jié)合實際業(yè)務(wù)場景和原子設(shè)計理論,將組件劃分為不同顆粒度:基礎(chǔ)組件、業(yè)務(wù)組件、典型頁面 組件,以適用于不同研發(fā)場景使用。
1.基礎(chǔ)組件,基礎(chǔ)組件為組件庫最小顆粒度,構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?
2.業(yè)務(wù)組件,在基礎(chǔ)組件的基礎(chǔ)上,結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場景,梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁面組件,梳理具有業(yè)務(wù)特點的典型頁面,相比基礎(chǔ)組件和業(yè)務(wù)組件,典型頁面更加具體, 為用戶提供具有代表性的內(nèi)容和框架,并準確描述用戶最終看到的內(nèi)容。如列表和左樹右表典型 頁面組件,作為最為常見的頁面結(jié)構(gòu),各業(yè)務(wù)場景可復(fù)用頁面組件,保證了頁面組件內(nèi)各基礎(chǔ)組 件的一致性,最大程度的實現(xiàn)不同產(chǎn)品線產(chǎn)品中頁面體驗的一致性。
推進前端組件庫落地執(zhí)行: ?
前期設(shè)計規(guī)范落地到組件庫過程中,面臨諸多問題和阻礙,比如開發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗收及修復(fù)問題不到位等問題。處理這些問題對UI團隊資源造成很大消耗, 通過總結(jié)復(fù)盤前期組件庫落地時的經(jīng)驗和教訓,梳理落地執(zhí)行流程,在新的協(xié)作流程下,新一 批的組件開發(fā)不論在協(xié)作效率和開發(fā)質(zhì)量上都有質(zhì)的提升。
分層推進: ?
組件庫開發(fā)是一個持續(xù)迭代的過程,考慮到組件庫開發(fā)資源極為有限且無專職負責人員,在跟組 件庫開發(fā)團隊協(xié)同過程中,我們通過分步開發(fā)來解決組件庫更新優(yōu)化的問題并通過不斷優(yōu)化協(xié)作流程來助力組件庫高效落地。
前端組件庫分步開發(fā)原則: ?
1.優(yōu)先級原則,優(yōu)先開發(fā)適用于業(yè)務(wù)線普適場景的組件。 ?
2.緊急性原則,對于急需的業(yè)務(wù)線所需組件優(yōu)先開發(fā)。 ?
3.快速可實現(xiàn)原則,開發(fā)實現(xiàn)成本高的組件暫緩處理。
自查走查驗收: ?
組件UI責任人梳理出下屬組件需開發(fā)落地的細節(jié)點,整理為文檔,待開發(fā)人員完成組件開發(fā)后,自行參照UI提供的自查文檔,查漏補缺,保障進入UI驗收環(huán)節(jié)的前端組件不會出現(xiàn)較多的缺陷,降低后期走查和溝通修改的工作量,同時監(jiān)督開發(fā)人員提高組件落地還原度和質(zhì)量。
組件庫的持續(xù)迭代: ?
UI團隊通過一套標準的流程來把控組件庫迭代的質(zhì)量,在日常工作中經(jīng)常會收到產(chǎn)品經(jīng)理或項目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動組件庫搭建的核心環(huán)節(jié),需要以全局 和更深入的視角加以判斷把關(guān),保證前端組件庫內(nèi)容的普適性和高質(zhì)量,避免組件庫內(nèi)容冗余, 降低研發(fā)維護成本。
產(chǎn)品研發(fā)協(xié)作流程保障: ?
好的過程是好的結(jié)果的有力保障,一個業(yè)務(wù)需求從產(chǎn)生到開發(fā)落地需要經(jīng)過多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程,確保各角色清楚自己職責以及如何跟上下游銜接,同 時我們也希望協(xié)作流程能夠確保設(shè)計資源可以向重點業(yè)務(wù)模塊傾斜,以及發(fā)揮各個角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗。
UED團隊建立之初,我們面臨的首要問題是:需求隨機,完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個人,為了解決這個問題,我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問題。
企業(yè)級產(chǎn)品特點、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團隊人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團隊進 行設(shè)計,在判斷哪些需求需要流轉(zhuǎn)至UI團隊設(shè)計時,我們給出了如下指導(dǎo)性方向: ?
1.用戶量角度,大量終端用戶使用的場景,例如訂票、報銷、采購頁面 。 ?
2.用戶重要程度角度,核心、重要用戶使用的場景 eg.公司領(lǐng)導(dǎo)、決策層。 ?
3.通用性角度,通用組件或框架,需要UI通盤考慮各個業(yè)務(wù)線場景需求進行設(shè)計。 其他需求則主要由產(chǎn)品經(jīng)理進行設(shè)計,UX以評審方式輕度參與。
協(xié)作流程迭代,UI驗收成為必要一環(huán): 隨后我們又面臨新的問題:設(shè)計還原度差,被公司老板生動的形容為:看設(shè)計稿是“精裝修”, 開發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計還原質(zhì)量,我們在研發(fā)流程中明確了所有涉 及前端頁面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負責人驗收,在產(chǎn)品團隊TAPD中記 錄UI缺陷、標明嚴重程度,對于 “嚴重” 級別以上UI缺陷,禁止發(fā)版。
UI工期評估合理化:
為了既能盡力配合各產(chǎn)品線迭代計劃又要爭取合理UI設(shè)計時間、保證產(chǎn)出質(zhì)量,合理評估設(shè)計周期對UI人力管理尤其重要。對此,我們對設(shè)計需求分成了ABC三級進行評估。 對于A和B級需求,通常模塊較大,先有UI設(shè)計方案再去分期迭代開發(fā),對于這兩類需求,在評估 模型中給出了大致工期概念,比如以月為單位,大于1個月或2個月。
對于C級需求,通常為產(chǎn)品經(jīng)理先排進某個迭代再來提UI設(shè)計需求,設(shè)計范圍相對明確,我們則結(jié)合典型頁面數(shù)量因子和設(shè)計難度因子給出了UI工期大概評估公式,以天為單位。 ?
1.設(shè)計難度因子:根據(jù)業(yè)務(wù)線的復(fù)雜程度而定,范圍為(0.8~1.5)。 ?
2.典型頁面數(shù)量因子:評估需求范圍規(guī)模(N)。
UI設(shè)計團隊在協(xié)作過程中面臨諸多挑戰(zhàn):產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長、各級人員對產(chǎn)品認知及重視程度不一、好的體驗設(shè)計難落地、溝通成本高等問題,想要解決這些問題,若僅靠UI團隊自身力量是不夠的,需要動員公司各個環(huán)節(jié)和人員重視用戶體驗,共同促進產(chǎn) 品體驗提升。
搭建體驗文化灌溉機制:
UI部門通過多維度的體驗知識內(nèi)容矩陣、多渠道多場景全員覆蓋,普及和加深各級對產(chǎn)品體驗 價值的認識,提升產(chǎn)品體驗思考力和洞察力,幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗的關(guān)系,賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出,“以用戶為中心”和“打造產(chǎn)品極致體驗” 的價值觀根植與企業(yè)文化中,指導(dǎo)研發(fā)流程中各項工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個產(chǎn)品體驗維度,以實現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗”目標。 通過搭建體驗文化灌溉機制,提升全員體驗意識,能為產(chǎn)品研發(fā)帶來長久的價值: ?
1.提高設(shè)計還原度 ?
2.減少培訓成本 ?
3.提升跨部門溝通效率 ?
4.提升UI團隊影響力 ?
5.提升客戶滿意度
體驗文化落地實踐:
針對不同類型的體驗知識,我們采取不同的傳播渠道進行透,以期達到最好的效果,避免形式化, 將體驗文化滲透、學習落到實處,最終影響產(chǎn)品研發(fā)的各個環(huán)節(jié)。
以下為UI團隊在企業(yè)體驗文化 推廣的主要渠道和方法: ?
極致體驗公眾號主要發(fā)布產(chǎn)品體驗的基礎(chǔ)原理,體驗價值、項目復(fù)盤、常見體驗問題等深度長文。讓公司各級人 員認識用戶體驗及價值,讓用戶體驗理念深入人心。 ?
體驗知識小卡片整理產(chǎn)品體驗小的知識點,閱讀學習成本低。利用員工碎片時間,對細小體驗知識點的學習,積 跬步,至千里。 ?
直播宣講針對重點且復(fù)雜的產(chǎn)品體驗內(nèi)容,如交互規(guī)范宣講、重點問題復(fù)盤、產(chǎn)品經(jīng)理及開發(fā)人員應(yīng)知應(yīng) 會的知識點,采用宣講直播的方式,更好的對內(nèi)容進行詳細解說和疑難問題溝通。 ?
體驗調(diào)研分享UI部門成員對核心競品進行體驗調(diào)研,整理分析后對產(chǎn)品經(jīng)理及相關(guān)人員進行分享,賦能產(chǎn)品經(jīng) 理,為產(chǎn)品的體驗設(shè)計提供新的思路。
UI團隊專業(yè)水平一定程度上決定了公司產(chǎn)品體驗的上限,持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗。
設(shè)計自查:
企業(yè)級產(chǎn)品的大量體驗問題都是設(shè)計基礎(chǔ)問題。因此需要設(shè)計師不論在內(nèi)審前,還是內(nèi)審過程中都要牢記設(shè)計原則,查漏補缺,守住底線。我們在部門內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來檢查設(shè)計方案,通過這些自查點來避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗問題,從UI設(shè)計師自己這里 把好第一道關(guān)。
在日常工作中,UI自查表始終占據(jù)工區(qū)的醒目位置。在評審過程中,大家也會通過線上文檔的形 式來對設(shè)計原則的條目進行逐一檢查。
做好UI內(nèi)部評審:
設(shè)計團隊內(nèi)評審(Design critique)是幾乎所有國內(nèi)外設(shè)計團隊的普遍、經(jīng)典做法,可以有效提 高設(shè)計產(chǎn)出水平、保證團隊對外輸出質(zhì)量。方法是普適的,但具體執(zhí)行時如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評審上,我們進行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評審委員會” 團隊內(nèi)評審時邀請全員參加,但發(fā)現(xiàn)只有少數(shù)同事發(fā)言,另外一些同事因資歷淺、不了解評審產(chǎn)品或者積極性不高給不出建議。同時隨著團隊成員數(shù)量從幾個增加到十幾個,評審會議的時間成 本大大增加。
選取團隊內(nèi)相對資深和積極提出問題、建議的同事組成內(nèi)部評審委員會,以月為周期輪流進行, 可以有效分散評審委員在團隊內(nèi)部評審上的工作負荷,并明確一次UI內(nèi)部評審除了內(nèi)部評審委員 會還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請評審內(nèi)容關(guān)聯(lián)同事,比如“消息中心” UI評審跟另外一位同事負責的“討論消息”有關(guān)聯(lián),則需要邀請這位同事一起評審,以便發(fā)現(xiàn)關(guān)聯(lián)問題,整體考慮設(shè)計方案。
以上參與評審機制明確在團隊內(nèi)部協(xié)作工具上,做到人人清楚。另外,對于評審建議,要做到有 記錄、有回應(yīng)、有跟蹤,確保有效發(fā)揮了內(nèi)部評審的價值。
UI設(shè)計師的能力模型:不言而喻,UI設(shè)計師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對于設(shè)計師能力培養(yǎng)通道上,我 們引入了以下模型。
我們將UI設(shè)計師能力歸納成了3x3能力矩陣。這可以設(shè)計師在工作中也可以有目的提升自身薄弱環(huán)節(jié),同時也讓企業(yè)對UI設(shè)計師的要求更加清晰,除此之外,我們要求UI設(shè)計師也需要多了解業(yè)務(wù)和前端知識,往前多走一步,跟上下游角色更好的銜接,一方面,UI設(shè)計師需要理解業(yè)務(wù),要能夠有半個產(chǎn)品經(jīng)理的業(yè)務(wù)知識儲備, 如果能站在更高的行業(yè)視角對自己所服務(wù)的業(yè)務(wù)領(lǐng)域(向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進一點)有一定的理解是更好的了,另外一方面,UI設(shè)計師跟自己的下游-前端 開發(fā)工程師也需要很好的銜接上,知道相關(guān)前端技術(shù)概念、基本頁面布局和交互實現(xiàn)邏輯、方法,能夠無縫地將界面和交互設(shè)計翻譯成前端可理解的語言。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
2022 原創(chuàng)輸出第 15 篇,我們互相努力。
作為設(shè)計師都會時刻關(guān)注設(shè)計趨勢,以 UI 設(shè)計來說每年都會出現(xiàn)很多相關(guān)的趨勢總結(jié),基本是結(jié)合預(yù)測和實際相結(jié)合的。趨勢可以讓我們把控設(shè)計的方向,帶給用戶更好的感官體驗。
最近黑馬哥結(jié)合落地產(chǎn)品所呈現(xiàn)出來的設(shè)計趨勢,進行了這方面的探索,今天以其中之一的趨勢-極光風和大家先聊一聊。
一、極光風趨勢的來源
二、UI 場景中的極光風設(shè)計
三、實現(xiàn)極光風設(shè)計的方法
四、極光風案例實戰(zhàn)
五、小結(jié)
極光(Aurora),是一種絢麗多彩的等離子體(發(fā)光)現(xiàn)象,在夜間出現(xiàn)燦爛美麗的光輝。在南極被稱為南極光,在北極被稱為北極光,視為自然界中最漂亮的奇觀之一。(來源于百度百科)
這樣的自然奇觀被攝影師捕捉到靜態(tài)的影像中,設(shè)計師再結(jié)合這樣的影像作品,視覺化之后出現(xiàn)在了一些設(shè)計作品中。在 2021 年被廣泛運用,形成一種流行的視覺風格。在眾多的互聯(lián)網(wǎng)產(chǎn)品設(shè)計中,也經(jīng)常運用這種類似極光的視覺影像風格,稱之為 Aurora UI。
在產(chǎn)品設(shè)計底層需求獲得滿足之后,感光體驗的提升被重視,視覺感的強化對 UI 設(shè)計師來說至關(guān)重要?;诓桓淖儽旧淼慕Y(jié)構(gòu)層,在背景層和裝飾性元素上面發(fā)揮,使得 Aurora UI 得到了發(fā)揮的空間。
富有創(chuàng)意的極光風在背景層和裝飾性元素上面發(fā)揮得淋漓盡致,助推了其成為 UI 設(shè)計趨勢的關(guān)鍵,下面就讓我們一起來看看落地產(chǎn)品中的 Aurora UI。
由于在眾多落地產(chǎn)品中被廣泛運用,形成了近些年影響 UI 設(shè)計趨勢的風格。極光風和彌散光在表現(xiàn)形式上類似,也有設(shè)計師將該風格歸類為彌散光,下面就看一下具體的運用場景。
2.1、強化導(dǎo)航欄設(shè)計的視覺感
如果想要強化頂部導(dǎo)航欄的視覺感,通常是利用品牌色作為背景顏色,這樣也會顯得頂部比重較大。通過白色或者淺灰色作為背景屬于比較弱化的處理方式,而極光風的處理形式處于輕重之間的理想狀態(tài)。不僅可以豐富視覺表現(xiàn)力,也能使得整體風格更加年輕化。
2.2、強化個人中心頂部視覺區(qū)域
隨著互聯(lián)網(wǎng)用戶年輕化的趨勢,在配色上面逐步趨近于年輕化,眾多產(chǎn)品在個人中心界面的設(shè)計上面亦是如此。利用極光風效果呈現(xiàn)出的設(shè)計比較符合年輕化的趨勢,可以是同色系的飽和度變化,也可以是不同色相的相互融合。利用低飽和度高明度的配色原則,使得整體的視覺感更加輕量化,視覺效果清新自然且通透力更強。
也有基于品牌色結(jié)合極光風進行融合,相對單色來說效果更加豐富自然,使得背景的變化更加多樣。
2.3、豐富背景設(shè)計的視覺感
除了在頂部區(qū)域進行運用以外,也有一些產(chǎn)品會在背景層面進行強化,相較于白色或者淺灰色的背景來說色彩感更豐富。運用到整個界面背景層相對比較少,在局部背景層上的運用比較多些,可以強化局部模塊的視覺感。
2.4、點綴彈窗設(shè)計局部
極光風的設(shè)計表現(xiàn)也會出現(xiàn)在一些局部功能的細節(jié)處,比如運用到彈窗的色彩處理中,作為背景局部或者插畫部分等的襯托。帶來的視覺感更加親和自然,也不會過度干擾其他元素的呈現(xiàn)。
2.5、強化卡片式設(shè)計局部
卡片式設(shè)計也是近些年運用比較多的設(shè)計趨勢之一,基本是以白色卡片居多,具有整合信息的好處。在卡片的邊緣位置強化色彩,可以使得卡片色彩更加豐富,也有一些電商產(chǎn)品是起到與商品形成色彩呼應(yīng)的作用。
2.6、突出搜索設(shè)計的差異化
搜索框的設(shè)計在大部分的認知里面都是白色或者淺灰色,也有一些是帶有邊框的形式,利用低飽和度高明度的配色原則來進行設(shè)計,帶來的效果更加年輕化。也是一種差異化設(shè)計的嘗試,打破常規(guī)的設(shè)計認知。也可以舉一反三,在一些按鈕或者標簽設(shè)計中運用。
2.7、分類標簽的裝飾設(shè)計
這是一個裝飾性的設(shè)計嘗試,在突出模塊分類的當前狀態(tài)時,通常都會通過裝飾元素來進一步強化。可以通過字體粗細、顏色深淺、字體大小和裝飾元素來強化,裝飾元素除了線段和一些圖形元素以外,極光風的背景元素也是一種不錯的表現(xiàn)手法。
2.8、圖標設(shè)計中的運用
運用到圖標設(shè)計中通常是出現(xiàn)在質(zhì)感類圖標,輔助強化圖標的色彩感和層次感。有時候無法通過常規(guī)的漸變形式達到要求,就可以嘗試運用極光風的處理技巧,將顏色通過模糊和剪切蒙版的形式融入到圖標中,可以使得圖標色彩豐富和強化光影變化。
2.9、深色卡片色彩強化
以上案例屬于在淺色或者白色的環(huán)境中運用,在深色主題中依然會用到極光風進行設(shè)計強化。在界面背景和卡片背景中運用,效果也是非常不錯的,可以給深色的卡片一些色彩感和豐富度。
2.10、作品包裝中的背景強化
除了在 UI 設(shè)計場景中運用以外,最近發(fā)現(xiàn)在設(shè)計師作品包裝中的運用也是非常普遍,用于背景層的渲染帶來的視覺體驗度也是非常不錯的。在作品包裝環(huán)節(jié)中作為背景運用和局部裝飾,也有在封面設(shè)計中重點運用,使得作品集緊貼設(shè)計趨勢,提高作品的打開率。
2.11、其他場景中的應(yīng)用普及
在 UI 場景還有很多運用場景,這里僅為拋磚引玉,無論是作為背景強化還是元素裝飾,都能帶給用戶更加年輕化的感官體驗。
除了在 UI 場景中呈現(xiàn)以外,極光風的設(shè)計也會出現(xiàn)在更多其它場景中。在 Banner 設(shè)計、海報設(shè)計、專題頁設(shè)計等視覺設(shè)計層面也是運用廣泛,是一個影響范圍比較廣的設(shè)計趨勢之一。
通過一些線上的案例欣賞和分析,相信大家對于極光風在 UI 場景中運用都有一定的了解,在項目設(shè)計中也能輕松嘗試。這一類風格從技法實現(xiàn)的角度來說并不難,關(guān)鍵因素在于控制好配色原理,下面就為大家總結(jié)幾種實現(xiàn)的方法。
方法 01 :利用不透明度漸變?nèi)诤?/strong>
不透明度漸變在設(shè)計中的運用比較普遍,利用的是不透明度從 100%-0% 之間形成漸變,讓色彩逐漸消失或者淡化。
畫一個圓形,選擇徑向漸變,漸變兩端的顏色選擇同一個色相。然后設(shè)置中間顏色不透明度為 100%,另一個顏色不透明度設(shè)置為 0%,這里顏色適合選擇低飽和度的范圍。同樣的方法反復(fù)繪制幾個不同顏色的圓形進行組合,即可完成極光風背景設(shè)計。
方法 02 :利用模糊度變化融合
這個方法是結(jié)合了形狀和模糊設(shè)置(高斯模糊等),繪制幾個大小不等的圓形進行排版組合,然后選擇所有圓形一起進行模糊設(shè)置。形狀的繪制上面最好是有大小差異,排版錯落有致,這樣形成的效果比較富有變化。
在顏色的選擇上面需要根據(jù)背景的強化程度選擇,低飽和度的顏色融合性更高,適合作為弱化性質(zhì)的背景使用。
方法 03 :利用背景模糊融合
背景模糊在 Sketch、Figma 等設(shè)計軟件中有該功能,是一個影響設(shè)計趨勢較為常用的功能,特別是在實現(xiàn)玻璃質(zhì)感和一些質(zhì)感圖標上面非常實用。
在背景層繪制圖形,顏色和形狀均可自由發(fā)揮,然后再繪制一個形狀作為調(diào)節(jié)層,調(diào)節(jié)層是用于控制模糊效果的。在調(diào)節(jié)層的形狀上面設(shè)置一個帶有透明度的顏色(必須要帶有透明度),然后再設(shè)置背景模糊,背景模糊數(shù)值的大小決定模糊的程度,不透明度的大小決定整體效果的亮度。
方法 04 :利用圖片模糊融合
以上的方法都需要進行配色處理,如果色感方面比較薄弱的設(shè)計師,也可以挑選一些不錯的圖片來實現(xiàn)極光風效果。
挑選一張色彩符合要求的圖片,然后在 Photoshop 等設(shè)計軟件中執(zhí)行高斯模糊,半徑值的多少決定了模糊之后的自然度。我們在選擇圖片的過程中除了整張圖片進行操作以外,也可以截取其中的一部分,也許可以帶來意想不到的效果。
除了這幾個方法以外還有更多不一樣的實現(xiàn)方法,大家可以根據(jù)自己的探索選擇最適合自己的方法。根據(jù)使用軟件的差別選擇最簡單的形式,根據(jù)想要實現(xiàn)的效果選擇最靈活的方法,這樣才能便于后期的反復(fù)調(diào)整。
五、小結(jié)
研究落地產(chǎn)品的設(shè)計細節(jié)和視覺趨勢,將有助于提高我們對于當前有效設(shè)計趨勢的把控,而不僅僅只是停留在概念化的預(yù)測階段,而是行之有效的真實案例。
極光風是近些年運用在落地產(chǎn)品中的 UI 設(shè)計趨勢之一,通過大量案例驗證之后的有效方法,希望大家能夠掌握并靈活運用到項目設(shè)計中。落地產(chǎn)品的 UI 設(shè)計趨勢還有很多,本次分享的僅為拋磚引玉,后續(xù)將和大家探討更多的有效設(shè)計趨勢,輔助提高我們的設(shè)計能力。
作者:黑馬青年(vx: heimaux)
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
搜索框的設(shè)計并不簡單,很多的細節(jié)需要設(shè)計師去注意和思考的。下面總結(jié)一下我在設(shè)計搜索框的經(jīng)驗,分享給大家。
你可能認為,搜索不就是一個矩形框+放大鏡圖標再加一個占位符不就搞定了嗎?
經(jīng)過多年的設(shè)計工作頻繁設(shè)計搜索功能后,我發(fā)現(xiàn)在不同類型的產(chǎn)品中搜索框的交互方式、視覺樣式都有所不同,且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個流程中的可能操作,包括正向流程、反向流程。
搜索框的設(shè)計并不簡單,很多的細節(jié)需要設(shè)計師去注意和思考的。下面總結(jié)一下我在設(shè)計搜索框的經(jīng)驗,分享給大家。
友情提示:文章尾部有福利相送,不要錯過~
搜索是用戶將查詢的信息輸入搜索器中,搜索引擎就會在約定的規(guī)則下將獲取到的信息反饋給用戶的過程。
搜索是B端產(chǎn)品中非常重要的一個功能模塊,通過搜索框用戶可以快速找到或者篩選出自己想要的內(nèi)容,在引導(dǎo)用戶走向方面起到了絕對性的作用。
體驗設(shè)計中有個概念叫用戶分層,即便是同一個頁面,我們也需要去細分不同的場景對用戶做分層,為不同的用戶做設(shè)計,搜索功能就是最好的為有明確目標的用戶分層的設(shè)計。
搜索功能的用戶分層可分為幾種場景:
搜索首先要確定哪幾個字段可以被搜索到,名稱?編號?等等...
有明確目的型用戶在進行了搜索這個行為后,便生成了搜索歷史。因此,我們可以通過挖掘用戶搜索行為背后的目的,來分析為什么使用不同的布局。
模糊搜索使用的頻率居多,畢竟有時候用戶不一定可以精準的記住想要搜索的準確信息。不過也不是絕對的,兩者皆可選擇,可根據(jù)產(chǎn)品場景選擇。
搜索功能可以簡單地輸入,快速輸出,只要幾個關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容,將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng),從而讓使用體驗更加快捷、輕松。
同時語音輸入和拍照搜索進一步降低了用戶行為門檻。
搜索功能可以幫助用戶快速定位信息,從而提高了用戶對內(nèi)容的觸達效率。常見的例子就是:bi?r用戶有明確的購物需求時,不需要一步步點擊商品分類,選擇商品類型、品牌等信息,就可以快速直達自己所需的商品。
所以,搜索框的體驗如何,決定著B端產(chǎn)品解決問題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節(jié)約時間成本,讓用戶在大量且復(fù)雜的信息中篩查所需目標,提升用戶體驗;另一方面,還能協(xié)助產(chǎn)品收集用戶行為目標并做好數(shù)據(jù)埋點,為后期的更新迭代提供強有力的依據(jù)。
除了設(shè)計方式外,搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則,受到算法精準性、商業(yè)化干預(yù)程度的影響,設(shè)計師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶的精確搜索、模糊搜索需求,以從信息設(shè)計層面提升用戶體驗。
搜索流程,即搜索前、搜索中、搜索后的頁面跳轉(zhuǎn)以及搜索框形態(tài)的變化。
對應(yīng)的就有:搜索入口——搜索推薦頁——搜索聯(lián)想頁——搜索結(jié)果頁——搜索結(jié)果頁返回。
設(shè)計師想要設(shè)計流暢的搜索體驗是無法避開梳理搜索流程的,考慮完整的搜索鏈路和用戶關(guān)鍵體驗路徑,并且設(shè)計出對應(yīng)的所有細節(jié),將搜索功能的價值發(fā)揮到最大化。
對于搜索系統(tǒng)來說,整個流程可以分為三步,分別是:
B 端業(yè)務(wù)中搜索使用的場景有兩類:一類是全局搜索,一類是頁面局部搜索(常見的有列表搜索、表單搜索)。
對于B端系統(tǒng)中模塊分類較多,所涉及到的內(nèi)容比較全面的,一般會選擇全局搜索,全局搜索是通過關(guān)鍵詞匹配全局范圍內(nèi)的信息來搜索的。
優(yōu)勢:無學習門檻,用戶無需考慮內(nèi)容對應(yīng)的分類只需輸入關(guān)鍵詞;
劣勢:精準度不夠高;搜索出來內(nèi)容泛;需用戶二次查找目標內(nèi)容。
注意:設(shè)計全局搜索時要注意搜索后的結(jié)果展示邏輯,如果分類較多,界面還可以根據(jù)分類tab分別歸類不同。
tips:搜索功能在頁面中的重要程度及搜索范圍,決定了搜索的位置和樣式。
目前大部分網(wǎng)站在布局搜索框位置時,大致遵循以下幾個規(guī)則:頁面居中、頁面頂部居中、頁面頂部右邊、頁面頂部左邊
知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置,引導(dǎo)用戶進行搜索,并且搜索框內(nèi)的占位文字根據(jù)算法會間隔一段時間改變,引導(dǎo)用戶發(fā)現(xiàn)新的內(nèi)容,促進用戶在知乎上的使用時長。
最常見的搜索方式之一,將搜索以輸入框的形式居于頁面頂部(狀態(tài)欄或標題欄下方),在視覺上非常醒目,用戶進入應(yīng)用即能快速找到,很符合用戶的視覺瀏覽動線,也是C端產(chǎn)品提高轉(zhuǎn)化率的流量入口。
形態(tài)相對比較簡單,通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角,視覺上不會過于突出,常用于搜索行為不是特別頻繁的場景,需點擊后才會跳轉(zhuǎn)至搜索框頁面。
Icon 搜索入口相較于上述提到的類型在視覺引導(dǎo)方面略遜一籌,相對弱化了搜索功能,但節(jié)省了更多的導(dǎo)航欄空間,呈現(xiàn)位置比較靈活,可單獨呈現(xiàn)、也可與其多個其他功能 icon 并列組合展示。
指的是在頁面中的某個模塊加入搜索的功能。
常見在數(shù)據(jù)列表頁面加入搜索的功能,搜索的目標只在該模塊該內(nèi)容中進行搜索,搜索的信息具有局限性,當然也是更加準確地搜索用戶想要的目標信息。
下圖是一個美團商家后臺的列表頁面,此頁面加入了搜索的功能。
另外,B端常見在表單頁面加入搜索的功能,搜索的目標只在表單選擇內(nèi)中進行搜索,搜索的信息同樣具有局限性,可以通過控制某個字段或者某幾個字段的信息來展開搜索。
B端業(yè)務(wù)中復(fù)雜的場景中存在同一個頁面中有多個搜索入口(如上圖美團),設(shè)計前需梳理清楚每一個搜索入口的交互邏輯,不同搜索入口覆蓋的搜索范圍、搜索過程、搜索結(jié)果是否一致,在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。
模糊搜索是用戶搜索意圖不明確時,將用戶的查詢與待檢索的內(nèi)容進行模糊匹配。
模糊搜索無法精確理解用戶的查詢意圖,搜索結(jié)果可能有大批量用戶不想要的信息,使用模糊搜索時一定要結(jié)合實際場景,慎重使用。
優(yōu)點:只要有相關(guān)的內(nèi)容都會被檢索出來,減少了精準搜索帶來的記憶負擔;
缺點:容易把相關(guān)的信息也帶出來,例如檢索186,把相關(guān)號碼也匹配出來。
精確搜索是指用戶在搜索時,針對某一數(shù)據(jù)字段搜索,來查找所需要的數(shù)據(jù)。
根據(jù)業(yè)務(wù)場景不同,我們會查找某一字段,或者是用標簽切換不同字段來查找??梢詭椭脩粼诰薮蟮男畔⒊刂锌s小目標范圍,快速而準確的定位到目標數(shù)據(jù),并速獲取需要的信息。
優(yōu)點:搜索匹配精準度高。
缺點:每次只能對單一條件進行搜索。
總結(jié):
我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶的專業(yè)度和使用習慣來綜合決策使用哪一種方式更合適。如果側(cè)重查詢效率且用戶是有專業(yè)門檻的使用者時,可以優(yōu)先考慮精確搜索;如果側(cè)重查詢結(jié)果的豐富度,可以優(yōu)先考慮模糊搜索。
基于搜索欄的表現(xiàn)形式,可以分為以下四種類型:單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類型之間沒有優(yōu)劣之分,根據(jù)業(yè)務(wù)場景使用對應(yīng)的類型即可。
單屬性精確搜索:通過某個特定屬性就可以快速定位到目標數(shù)據(jù),具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
適用場景:表格單一數(shù)據(jù)信息特征突出,可以用此數(shù)據(jù)標簽快速定位目標數(shù)據(jù)。
切換屬性搜索也被稱為定向搜索,是由用戶主動選定搜索范圍后再進行搜索;
優(yōu)勢:搜索精準度高。
劣勢:增加了部分用戶的學習成本及操作步驟。
適用于注重搜索結(jié)果的精準性或展示產(chǎn)品搜索能力等場景,定向搜索適用的幾種場景:
a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能,用戶對于搜索有明確目標,定向可以幫助用戶提高搜索的精準范圍和效率;
b、搜索時輸入的內(nèi)容無法通過同一套搜索交互方式和后臺計算邏輯承載;如單次搜索和批量搜索的輸入格式不同,搜索結(jié)果存在多樣性;
c、需外露產(chǎn)品亮點功能,有多個常用的搜索屬性,對于前置條件的數(shù)據(jù)計算能力和開發(fā)成本更高。
明確并固定選項類別,降低用戶操作難度。下拉篩選適合的選項類別有限,不適合多類別、復(fù)雜維度的分類。
平鋪展示搜索條件內(nèi)容,每個 Tab 標簽代表一個篩選維度,操作便捷。Tab 標簽的數(shù)量不宜過多。
B 端類產(chǎn)品數(shù)據(jù)量豐富,在實際使用時,簡單的方式很難全面覆蓋到各個搜索場景,精準定位搜索結(jié)果。所以通過多個篩選維度的結(jié)合,形成多屬性的組合搜索,能夠大幅提升搜索結(jié)果的準確性。
B端系統(tǒng)還有一種比較常見的搜索類型,是在定向搜索的基礎(chǔ)上,進一步豐富了搜索選項,比如指定搜索的時間范圍、數(shù)據(jù)類型等,設(shè)置的選項越詳細越能夠提升搜索結(jié)果的效果和準確性。
在設(shè)計時需要注意,B 端系統(tǒng)用戶角色多,層次不同,所以更加需要注重搜索前的引導(dǎo),針對搜索規(guī)則、搜索限制等,應(yīng)該適時的以簡練易懂的語言提示。
多標簽?zāi):阉鳎罕砀穸鄠€數(shù)據(jù)都具有特征,往往業(yè)務(wù)要求對數(shù)據(jù)的精確度較高。
適用場景:業(yè)務(wù)類型多樣用戶可能記憶不精確且有多個數(shù)據(jù)特征,對搜索的便捷性要求高精確性要求低。
多屬性組合搜索:可以輸入多個字段進行組合搜索(取并集),對空間的利用率高,適合更加復(fù)雜的列表內(nèi)容。
適用場景:綜合篩選項,對空間的利用率高,多標簽組合搜索可以得到較為精準的搜索結(jié)果。
聊了這么多搜索內(nèi)容,與設(shè)計師密切相關(guān)且對外輸出的首要就是搜索欄設(shè)計。
對于用戶來說,搜索是為了解決用戶明確或者不明確的搜索需求,讓用戶能夠快速準確搜到想搜的內(nèi)容。設(shè)計欄設(shè)計的目的就是,讓搜索能夠提高用戶獲取信息、內(nèi)容的效率。
常見搜索框設(shè)計樣式
1、填充色:通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色,方便用戶查找。
2、線框:多用于干凈簡潔的背景頁面。
3、投影:常用于風格簡潔輕量的風格頁面,同時搜索功能級別較高的場景。
4、透明度:常用于背景色復(fù)雜的場景,目的是為不破壞背景頁面的整體效果,在視覺上更和諧。 無外框:用于風格簡潔的大留白的頁面。
完整的搜索流程包含了各種細節(jié):例如搜索欄的形式、光標停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個過程包含很多交互的細節(jié)設(shè)計,下面從激活搜索欄、輸入反饋、觸發(fā)方式來展開說明。
搜索激活指用戶激活搜索框時出現(xiàn)的搜索下拉面板,B端業(yè)務(wù)中搜索激活內(nèi)容常見以下三種:
搜索記錄通常以標簽或列表的形式顯示,以時間順序從新到舊排列,一般不會完全展示,可以滑動查看更多,或者折疊展開。
注意:搜索記錄會涉及對用戶行為的記錄,關(guān)系到用戶的搜索隱私,所以應(yīng)當允許用戶手動刪除。
在 PC 端產(chǎn)品具有頁面空間優(yōu)勢,用戶的搜索過程完全是通過搜索欄完成的。
搜索欄中會增加歷史搜索記錄,下方增加推薦關(guān)鍵詞,幫助用戶快速完成搜索。同時也可以喚醒用戶對某些商品的興趣和記憶,從而挖掘用戶潛在的搜索需求,這一點電商產(chǎn)品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”,增加相關(guān)內(nèi)容曝光,去給用戶提供更多選擇以觸達目標內(nèi)容,該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。
搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄,依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦,但并不是必需模塊,可以基于產(chǎn)品定位進行考量。常規(guī)的c端產(chǎn)品上用得多,B端產(chǎn)品用得少。
由于搜索發(fā)現(xiàn)也涉及用戶隱私,但應(yīng)用一般不會讓用戶直接刪除,所以應(yīng)當允許用戶對搜索發(fā)現(xiàn)進行隱藏,不然極其容易引起用戶的反感。淘寶、京東都有搜索發(fā)現(xiàn),并且也允許用戶進行關(guān)閉/顯示的操作。
熱門推薦是搜索推薦頁里面內(nèi)容推薦的總稱,可以演變成多種推薦形式,比如“熱搜推薦”、“推薦活動”等,熱門搜索是應(yīng)用商業(yè)化的重要手段,許多應(yīng)用都有這種模塊,并且內(nèi)容形式多樣。
知乎的熱搜就是結(jié)合熱搜、時事熱點等進行推薦。
搜索反饋指用戶輸入本文時未確認搜索執(zhí)行的中間過程狀態(tài)。在B端場景下搜索反饋具備很強的引導(dǎo)作用給予用戶當下的狀態(tài)提示;
是通過已輸入的關(guān)鍵詞來預(yù)測可以找到的搜索結(jié)果,為用戶創(chuàng)造更加便捷的體驗。
搜索聯(lián)想承載的不止顯性的設(shè)計呈現(xiàn),還有背后的算法邏輯;例如是否可以識別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍,都需要提前確認落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則,并在產(chǎn)品中的所有搜索場景中保持相同的交互邏輯。
用戶在搜索時輸入了錯誤的詞匯,系統(tǒng)經(jīng)過判斷后會展示正確詞匯的搜索結(jié)果給用戶,并友好地告知用戶正確的搜索方式。特殊狀態(tài)包含無結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
實時搜索+實時顯示;搜索只有一個文本輸入框,沒有按鈕可點擊,這樣的搜索交互是通過輸入關(guān)鍵詞后,系統(tǒng)自動檢測所有內(nèi)容中符合關(guān)鍵詞的目標信息,隨著關(guān)鍵詞的持續(xù)輸入,與之相匹配的結(jié)果會逐漸減少、直至找到目標,類似自定義篩選功能。
這種交互一般對于數(shù)據(jù)信息比較少的情況下會比較友好,加載的速度更快,避免服務(wù)器的壓力太大、影響反饋效率,例如地址搜索、查找聯(lián)系人等。
關(guān)鍵詞輸入完成后,需要手動點擊搜索按鈕向服務(wù)器發(fā)送指令才會得到相應(yīng)的搜索結(jié)果,這種方式適合大部分表格場景,更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場景。
搜索結(jié)果頁是用戶搜索的落腳點,在這個頁面,用戶會有目的性地瀏覽搜索結(jié)果。
搜索結(jié)果中隱含著搜索邏輯,全局搜索場景下多數(shù)為模糊搜索,即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁反饋出來,匹配度低,需要花時間對結(jié)果二次篩選。
1. 快速瀏覽數(shù)據(jù),并能夠準確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢數(shù)據(jù),對查詢結(jié)果精準定位。這就需要搜索結(jié)果后,不要清除用戶的查詢內(nèi)容。
3. 對數(shù)據(jù)進行操作,如收藏、刪除、下載等。
不同的內(nèi)容需要不同的頁面布局來支撐的,b端場景中最常見的兩種布局,篩選上下布局和左右布局,當然內(nèi)容部分又分列表布局和柵格布局。
1、凸顯關(guān)鍵信息:
為了便于用戶找到精準高效的信息或者進行便捷操作,在搜索聯(lián)想頁狀態(tài)時,當用戶輸入的信息足夠清晰可預(yù)測,可以將關(guān)鍵信息凸顯呈現(xiàn),以引起用戶的注意力,在進入搜索結(jié)果頁之前就可以提升轉(zhuǎn)化的可能性。
此外,這種關(guān)鍵信息凸顯的形式,在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。
2、沒有結(jié)果,如何設(shè)計
搜索沒有結(jié)果會讓用戶感到非常沮喪的,尤其是當用戶進行了好幾次搜索之后,依然沒有結(jié)果,應(yīng)當為他們提供有價值的替代品。
一般出現(xiàn)無結(jié)果的狀態(tài)有兩種情況:
a. 用戶輸入錯誤,一般會提用戶正確的搜索方式,并且自動幫助用戶糾錯,
b.搜索結(jié)果無,這種情況一般設(shè)計會以空狀態(tài)提示用戶,采用友好的方式提醒用戶更換關(guān)鍵詞。
在使用中,搜索本身應(yīng)該是0思考成本的,否則就失去了索引的核心價值,基于此,總結(jié)一下5個設(shè)計注意點:
當用戶輸入搜索文本,點擊搜索按鈕,就進入了搜索結(jié)果頁流程,此時搜索框內(nèi)應(yīng)當保留搜索文本,以便于用戶明確搜索的內(nèi)容(不要依賴用戶的記憶力),同時,也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性,應(yīng)用也應(yīng)當提供一鍵清除按鈕,點擊一鍵清除搜索的文本,減少用戶的操作成本。
搜索項目不可避免的比較多時,可以進行分類展示,降低尋找成本,常用的有兩種分類方式:
無效的自動建議讓整個搜索體驗降低,而精準的自動建議會讓整個體驗好上許多,它會根據(jù)用戶用戶的輸入內(nèi)容(詞匯詞根和后臺數(shù)據(jù))為用戶提供有用和精準的輸入內(nèi)容建議,這有助于幫助用戶提高搜索過程的精準度,提升整個搜索體驗。
輸入錯誤絕對是最常見的錯誤,如果用戶錯誤地輸入某個關(guān)鍵詞,而你的檢測到了,并且針對錯誤提供更正之后的結(jié)果,這樣就成功的規(guī)避了因為錯誤的關(guān)鍵詞所導(dǎo)致的不良后果,用戶也不用再次進行搜索了。
即使用戶熟知搜索引擎的全部功能,也需要借助大腦記憶來挑選關(guān)鍵詞,進行搜索。
想要找出有意義的、可用的搜索關(guān)鍵詞搭配,用戶需要結(jié)合他們的搜索方向,最近的查詢,聯(lián)想相關(guān)的屬性和關(guān)鍵詞,使搜索體驗更便捷流暢。
總結(jié)
搜索是我們?nèi)粘V蓄l繁接觸的功能,看似簡單,背后都隱藏了很多流程與邏輯,不建議設(shè)計師盲目遵從原型依葫蘆畫瓢。
設(shè)計師更應(yīng)該在設(shè)計之初從業(yè)務(wù)類型、功能定位、使用場景等多維度綜合分析選擇,從交互體驗層面去深思搜索功能,因為搜索除了數(shù)據(jù)匹配精準度、搜索內(nèi)容廣度之外,搜索體驗的便捷性也會影響用戶搜索的感受。
每一處細節(jié)背后的設(shè)計思路就變得尤為重要。
本文總結(jié)梳理了搜索功能,從搜索基本屬性、應(yīng)用場景,到搜索分類,再到搜索欄設(shè)計,都進行了闡述,最后再總結(jié)了搜索設(shè)計的一些注意點。希望你能夠幫忙理解搜索功能的設(shè)計。
作者:三原設(shè)計社
鏈接:https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞
本文將從對當下常見banner的設(shè)計規(guī)則等進行剖析,并融入自己的思考和總結(jié),著重從用戶的角度去思考一張banner廣告的設(shè)計規(guī)律。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞
你一定也發(fā)現(xiàn)了,在這個時代下只要處在同一賽道的產(chǎn)品,大多數(shù)免不了日趨同質(zhì)化,不論是功能還是形式、內(nèi)容還是算法。就拿內(nèi)容型產(chǎn)品來舉例:去掉顏色,以下四個產(chǎn)品的首頁,你能分得清誰是誰嗎?
雖然可以做品牌差異化,但很多產(chǎn)品在招牌打響前,也會經(jīng)歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候,通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。
之前在團隊有幸負責過一次產(chǎn)品趣味性的探索,雖未全部落地,但沉淀了不少經(jīng)驗。今天,我將這些經(jīng)驗以文章的方式分享給你,希望對你有所啟發(fā)。
為什么產(chǎn)品需要趣味性
1.符合本能需求
馬斯洛的“需求層次理論”(Hierarchy of Needs)你一定聽過。這個理論提出人類的需求狀態(tài)是持續(xù)不斷的,一段時間內(nèi),個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看,人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后,自然會需要情感的滿足。
尤其現(xiàn)在這個相對嚴峻、內(nèi)卷成風的時代下,大家都渴望在上了一天班之后,自己用的產(chǎn)品可以給自己解壓,而不只是個單純的冷血工具。
2.影響用戶行為
產(chǎn)品傳達趣味性的信息,那么這些信息便更容易被用戶接受、甚至激發(fā)興趣。正如用戶關(guān)系和精準化運營的先驅(qū)——史蒂文·貝萊格姆的那句話:“趣味是設(shè)計產(chǎn)品中最人類化,最直接,最能引起人們興趣的因素。”
根據(jù)艾達模型這個經(jīng)典理論,一旦用戶對某件事產(chǎn)生興趣后,則更容易促成他的決策、乃至最后行為的發(fā)生。畢竟我們絕大多數(shù)的決策并非源自理性。
另外,《瘋傳》這本書提及過一個重要的概念:情緒喚醒。當情緒喚醒度較高時,往往會更容易激發(fā)用戶的分享行為(比如愉悅、驚喜這樣的正面情緒,當然也會包括憤怒、恐懼這樣的負面情緒)。而產(chǎn)品所呈現(xiàn)的趣味性,很大程度上更容易引發(fā)用戶的高喚醒情緒,從而主動采取一些產(chǎn)品希望他實施的行為。
3.緩解負面情緒
使用一款產(chǎn)品的過程中,必然會出現(xiàn)不夠正向的反饋,比如404、斷網(wǎng)、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力,很容易造成行為中斷甚至流失。
但此時如果通過一種趣味性的方式呈現(xiàn),很大程度上可以緩解用戶的負面情緒。
比如readme的登錄頁面,當你輸入密碼時,貓頭鷹捂住雙眼,很好得緩解了用戶的不安全感。再比如餓了么,惡劣天氣下會實時記錄當前的天氣狀態(tài),通過同理心的觸發(fā)也可以緩解用戶等待時產(chǎn)生的焦慮。
4.實現(xiàn)情感鏈接
對應(yīng)諾曼在《情感化設(shè)計》中的「反思層」,通過品牌差異、獨有內(nèi)涵等方式來喚起用戶深層的記憶和情感,產(chǎn)生情感共鳴,從而形成認知,建立起深厚的情感鏈接,以讓用戶越來越忠實于產(chǎn)品。此時產(chǎn)品作用更多的是作為一個承擔情感的載體。
我們旅游時經(jīng)常會購買一些貌似沒什么實用性的紀念品,明信片、木雕、徽章等等,可能最多只能放在房間當裝飾。但是紀念品的關(guān)鍵意義,在于承載著旅游時的記憶。類似的還有單機游戲發(fā)售時,除了標準版外,往往會同步發(fā)售包含手辦、美術(shù)設(shè)定集等物品的豪華版,同樣用來承載玩家的情懷。
最典型的例子,就是Google的Doodle設(shè)計,在不同的節(jié)日、紀念日、或者緬懷一些先驅(qū)、藝術(shù)家時,會投入很高的成本起設(shè)計各種趣味性的插畫logo,豐富有趣,而且很多時候可以支持互動游戲。比如18年的萬圣節(jié),就做了一個有趣的多人對戰(zhàn)的小游戲。
Doodle不僅是Google文化、價值觀的象征,也通過這種趣味性的創(chuàng)意讓用戶實現(xiàn)更深層次的情感交流,建立情感紐帶并增加粘性,不會輕易得流失到其他替代品中。
趣味性是什么
關(guān)于這個概念,有三條相對客觀專業(yè)的說法。
德國古典哲學創(chuàng)始人康德《實用人類學》中,指出趣味性是人類由于受到外部環(huán)境的影響而對客觀事物產(chǎn)生的直接的感性反應(yīng),不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思,從而心理產(chǎn)生愉悅的變化。
另外,康德在《判斷力批判》也指出,趣味是指主體以積極主動的姿態(tài),在超功利的層次上對某一對象表現(xiàn)出喜愛和愉悅的情緒狀態(tài)。
《漢語詞典》將趣味釋義為:使人感到愉快,能引起興趣的特性。
看似各不相同,但根據(jù)這三個概念提煉下,可以發(fā)現(xiàn)他們都是在融入一種正向的情緒加以解釋。
那么,趣味性背后的情緒到底是什么?
趣味性背后的情緒
情緒這東西千變?nèi)f化,為了避免主觀臆斷的不準確,我搜羅了關(guān)于情緒的研究資料,目前相對權(quán)威的有三個:plutchik情緒輪、日本感性工學、諾曼的三層理論。
后兩者未對情緒進行指標的定義,所以這里只聚焦在情緒輪上。
情緒輪由羅伯特·普洛特契克開創(chuàng),這個理論指出人類的基本情緒一共由8種,生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒,能夠符合趣味性帶來的情緒基本就三種:愉悅、期待和意外。
為了為產(chǎn)品所用,就需要提煉出更具象的特征。下面,我通過腦暴的方式對每類情緒進行發(fā)散聯(lián)想。
聯(lián)想了大量可以引發(fā)愉悅情緒的事物,比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。
我發(fā)現(xiàn)這些事物,一般具備了以下特征:
1.會給予我們即時反饋;
2.擬人化,比如帶有人類才有的表情,或者是人類的動作語言;
3.柔軟的、毛茸茸的、圓潤的、有溫度的;
4.會動的、解壓的
聯(lián)想了大量可以引發(fā)期待情緒的事物,比如被買爆的泡泡瑪特盲盒,商家售賣的福袋,各種諸如擲骰子、老虎機的隨機性游戲,各類抽獎活動,一些游戲開局roll屬性點的環(huán)節(jié)(比如金2、河洛等游戲,當年玩的時候我驚訝得發(fā)現(xiàn)我居然能roll上一整天)
這些事物大致會帶有這些特征:
1.未知的、神秘的;
2.滿足人類的好奇心的;
3.對結(jié)果能滿懷希望的;
4.隨機的正向獎賞;
5.只需要一步簡單到發(fā)指的操作(打開容器、拉動拉桿、點擊按鈕等等),不需要任何的行動門檻,也沒有等待時間
比如《設(shè)計中的設(shè)計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節(jié)、電影或者游戲中突然出現(xiàn)的彩蛋、iPhone第一代的發(fā)布現(xiàn)場、突然發(fā)現(xiàn)的世外桃源、突襲的生日驚喜等等。
這些事物大致會帶有這些特征:
1.超出原有預(yù)期的;
2.未提前告知的;
3.正向結(jié)果的;
4.產(chǎn)生共鳴的
那么,這些特征又該如何更具象得落地成策略,產(chǎn)品中又是如何利用這些策略,引導(dǎo)用戶產(chǎn)生這些情緒的呢?
下面,我將基于這三類維度,并結(jié)合大量的大廠案例來為一步步你抽絲剝繭。
如何制造愉悅感
基于上面的挖掘,我發(fā)現(xiàn)能引發(fā)愉悅感的一個明顯特征,就是擬人化,這個非常有意思。
克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點:人們對待電腦的方式,與我們在與他人交流時使用的社會規(guī)范是一致的。我們對電腦的反應(yīng),就好像它們是人類一樣。
也正因此,很多原本沒有生命體征的物體,一旦被賦予了擬人形象,就容易被大家所接納、引發(fā)愉悅。
做一下細分的話,擬人化基本涵蓋了三個方面:語言、形象和表情。
1.1擬人化的語言
人對于具體的擬人形象更容易產(chǎn)生情感,其中便包含擬人化的口吻。使用這種口吻與用戶交流,而非冷冰冰的設(shè)備語言,就可以提升產(chǎn)品溫度,引導(dǎo)用戶對產(chǎn)品產(chǎn)生正向情感,關(guān)于這塊我總結(jié)了兩方面。
一方面,文案盡量得接地氣、輕松。
拿京東這款產(chǎn)品舉例,文案從口吻上都會采用一種很輕松、接地氣的擬人語氣,來拉近和用戶間的距離。比如在引導(dǎo)詞后加入“哦~”“~”這種輕松的語氣詞。
另外,「京東問答」版塊的引導(dǎo)詞:傳統(tǒng)產(chǎn)品是“添加問答”,是不是平平無奇。但京東使用了“我來助你一臂之力~”
QQ瀏覽器的評論暗提示,也不是傳統(tǒng)的“寫評論”“輸入評論”,而是像日常聊天那樣“我來說兩句”,非常接地氣、生活化。知乎直接套用了流行語,詼諧的同時引導(dǎo)用戶注意言論。
另一方面,人類富有情緒變化,所以一旦用戶觸發(fā)了某個正面/負面行為,就可以給與情緒反饋。
在用戶完成商品評價后,京東不僅僅是很傳統(tǒng)得反饋“評價成功”,而是又加入了“感謝您!”的感謝詞??此萍恿巳齻€字,但行動過后的正向感激反饋,和我們?nèi)粘I钪惺艿秸蚍答佉粯樱粏酒鹫虻挠鋹偳榫w。并愿意繼續(xù)這個行為。
知乎的圈子業(yè)務(wù),在用戶完成簽到后,反饋完成的基礎(chǔ)上,使用了正向的情感反饋“ 我就知道你會再來看我”,仿佛是一位關(guān)系不錯的老朋友,來喚起用戶正向情緒。
另外,知乎在改版后,回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言,而是“已收到你的喜歡,謝謝!”并且配以作者頭像,非常形象得傳出對對方對我們的感謝反饋。這種正向反饋,相比”點贊成功“更有效得喚起正向情緒,形成正向激勵。
當然,用戶的消極行為也可以產(chǎn)生情緒反饋。
比如現(xiàn)在很多產(chǎn)品的取關(guān)反饋,不是傳統(tǒng)的“確認”“取消”,而是用“殘忍取關(guān)”和“給個機會”這種融入情感的文案來做挽留,就好像真的有個活生生的人,在被你否定后反饋給你的情緒,請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。(雖然這種做法過于業(yè)務(wù)導(dǎo)向,且有綁架用戶的嫌疑)
人對于具體的擬人形象更容易產(chǎn)生情感。因此,樹立一個擬人化的品牌形象(也就是我們常說的IP),可以使用戶對產(chǎn)品快速建立情感聯(lián)系,也可以強化品牌感知。比如優(yōu)酷的猴子、高德地圖的老鷹、釘釘?shù)难嘧?、linefriends等等。
世界杯的吉祥物也是同理,每一屆的吉祥物必定會融入擬人化的特征,憑著親切、可愛的形象和全世界的觀眾一起熱情互動。
說到產(chǎn)品,以京東的這只狗子為例,兜底頁、缺省頁、啟動頁,都做了狗這個擬人形象的貫穿。
如果你記得沒錯的話,形象改版之前這只狗還是四腳坐地上的,但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」,以此提升愉悅感,拉近距離。
再比如夸克,它甚至單獨新增了底tab入口,通過3d品牌形象,實現(xiàn)與用戶的智能交流。另外,卡片和語音搜索都做了形象貫穿,后者還使用了形象的眼睛,來通過眼睛的變化進行情感交流。
一段文字在加入了表情后,我們就能迅速了解到對方的情緒(比如我們?nèi)粘5牧奶欤?。因此表情這一招,也可以用以加深用戶與產(chǎn)品的情感交流。
它可以和語音、形象靈活結(jié)合使用。通過全面的擬人化,來大幅提升用戶對產(chǎn)品的形象感知,促進用戶情感的產(chǎn)生、加深用戶和產(chǎn)品的情感鏈接。
比如用語言輸入,當系統(tǒng)未識別清楚時,傳統(tǒng)的方案可能是一個錯誤圖標加上「未識別聲音,請再試一遍」的文案,但夸克中則使用了品牌形象的雙眼來傳達失落的表情,并結(jié)合了擬人化的語言。
同樣做法的還有百度的未開麥提示、段子頭圖,快速傳達產(chǎn)品的情緒,和用戶情感交流。
另外,閑魚設(shè)置昵稱時,正在輸入時、以及超出了限定字數(shù),右側(cè)的形象表情也會發(fā)生變化。
除了擬人化能引發(fā)愉悅外,還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。
提起動畫的作用,我們更多人首先想到的可能是強引導(dǎo)、注意力吸引,但動畫同樣能觸發(fā)用戶愉悅。比如當動畫更加貼近現(xiàn)實,或者結(jié)合擬人化的特征時。
最典型的例子,就是蘋果appstore從卡片到詳情頁的轉(zhuǎn)場過渡,點按的預(yù)備動作、卡片的放大展開、緩出的曲線、轉(zhuǎn)場完成的慣性等等,都很貼近現(xiàn)實物理世界的運動規(guī)律。而這種自然的絲滑也更能引發(fā)用戶的愉悅。
比如知乎的加載動畫,結(jié)合了擬人化的特征,讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產(chǎn)品的定位。
如何制造期待感
根據(jù)我們對期待感的腦暴,發(fā)現(xiàn)能觸發(fā)這種情緒最典型的特征,就是隨機性。
在產(chǎn)品中,則可以通過隨機給予用戶有價值的內(nèi)容來引發(fā)用戶的關(guān)注。結(jié)果的不確定使過程充滿神秘,這種狀態(tài)讓用戶興奮和滿懷期待,不會輕易離開。
比如網(wǎng)易新聞在進行新聞加載的操作時,會在加載動畫上加入一個隨機的小貼士。內(nèi)容大致有三類:黃歷、名言和一句話新聞。而且這些內(nèi)容完全是隨機出現(xiàn),這種刷新過程好像在開盲盒,你無法預(yù)知會給你什么內(nèi)容,非常有趣。而且它們?nèi)肟谏睿桓蓴_;內(nèi)容對用戶也具有價值。
同樣的還有丁香醫(yī)生。在首頁每次下來刷新后,都會出現(xiàn)不一樣的健康類的小貼士。隨機性很強,富有趣味。而且可以很好得滿足求知欲。
雪球的個人頁上,上劃時也會隨機給一條關(guān)于投資、市場的名言和網(wǎng)友的熱門觀點。
把現(xiàn)實生活中的游戲搬到了手機,同樣能激發(fā)用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。
如何制造驚喜感
格雷戈里·伯恩斯曾做個關(guān)于腦部區(qū)域的研究,發(fā)現(xiàn)大腦不僅探尋未知,而且實際上還渴望未知。相比那些已知的日常慣例,新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動,不但能引起注意力,而且也會帶來驚喜感。
產(chǎn)品中的驚喜感設(shè)計,可以說是使用瞬間能夠觸達我們內(nèi)心的一種短暫性愉悅,一個體驗的峰值。
根據(jù)對驚喜感的挖掘,一個典型的特征就是超出預(yù)期,并且未提前預(yù)料。
比如Figma使用過程中,團隊成員和你同時長按鼠標,并且靠在一起后,就可與觸發(fā)擊掌的動畫彩蛋,非常有意思。
比如京東在五星好評后,會放煙花慶祝。
比如很多內(nèi)容型產(chǎn)品,在詳情頁長按點贊按鈕后,會觸發(fā)全屏的「爆贊」動畫。
再比如用戶生日當天,通過啟動頁、彈窗等場景送上生日祝福等等。
這些能夠超出用戶預(yù)期的細節(jié),即便多么細枝末節(jié)、出現(xiàn)頻率多低,但只要能夠被觸發(fā),都可能因為驚喜感而生成情緒峰值,加深用戶和產(chǎn)品的情感鏈接。
最后
以上,便是趣味性背后的情緒挖掘和案例講解。
作為設(shè)計師,我們在工作中總是強調(diào)以用戶為中心,通過不斷的調(diào)研、跟訪、可用性測試來了解、分類用戶,但更多的結(jié)果可能只是讓產(chǎn)品不斷得貼合用戶的心智、符合預(yù)期。但如何增加粘度、建立深層鏈接,就需要通過趣味性這種情感化表達方式,來為用戶制造愉悅、期待甚至驚喜。
正像諾曼在「情感與設(shè)計」中說的那樣,每個產(chǎn)品都需要令人更放松、更愉悅的設(shè)計,以此來增強產(chǎn)品的適用性。
希望這篇文章能對你有所啟發(fā)。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞
本文將以有駕導(dǎo)流體驗升級的項目為例,分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。
// 寫在前面
端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品,帶來使用量的提升,從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務(wù)快速增長,有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣,依托各端流量實現(xiàn)矩陣產(chǎn)品間的導(dǎo)流,逐步積累用戶規(guī)模,是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗升級的項目為例,分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。
// 為什么要做導(dǎo)流
導(dǎo)流的目的
對于業(yè)務(wù)本身而言,隨著移動互聯(lián)網(wǎng)流量紅利期的結(jié)束,獲取新用戶的成本越來越高,不管是新產(chǎn)品還是成熟型產(chǎn)品,都需要通過導(dǎo)流的手段來持續(xù)擴充新用戶。其次,對于有駕產(chǎn)品生態(tài)而言,需要各端產(chǎn)品間的相互聯(lián)動,協(xié)同發(fā)揮優(yōu)勢,實現(xiàn)流量價值最大化。
導(dǎo)流的優(yōu)勢
成本低,相較于投放、活動等渠道流量獲取方式,矩陣導(dǎo)流成本低;
高意向,用戶購車意向明確更容易實現(xiàn)商業(yè)轉(zhuǎn)化;
可共享,用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。
// 如何做好導(dǎo)流設(shè)計
1.問題分析
通過梳理核心場景的4種導(dǎo)流條,發(fā)現(xiàn)各個場景導(dǎo)流形式各異,用戶缺乏統(tǒng)一認知,導(dǎo)流引導(dǎo)語單一內(nèi)容吸引力弱。在用戶在瀏覽頁面時,點擊功能入口或想要繼續(xù)查看更多內(nèi)容,需要下載APP才能繼續(xù)阻礙用戶瀏覽:
缺乏統(tǒng)一認知:視覺表達形式不成體系,用戶感知不夠;
內(nèi)容吸引力弱:內(nèi)容單一缺乏吸引力,用戶沒有點擊欲望;
阻礙用戶瀏覽:打斷用戶正常使用功能,影響用戶體驗。
從導(dǎo)流鏈路的用戶行為來看,整個流程下載路徑過長,發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點:
從小程序落地頁到下載頁:在進入小程序瀏覽頁面時,用戶沒有注意到導(dǎo)流條就滑走了;
點擊導(dǎo)流條進入下載頁:點擊導(dǎo)流條會先調(diào)起導(dǎo)流彈窗,點擊確認后再進入到下載頁,用戶未選擇下載就退出了。
2.明確設(shè)計方向
針對導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認知,內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題,我們搭建了一個完整的導(dǎo)流鏈路圖,根據(jù)用戶增長模型,把用戶生命周期各節(jié)點的用戶行為與產(chǎn)品觸點一一羅列出來,找到增長路徑的設(shè)計機會點。
通過以上的問題分析,如何建立用戶和產(chǎn)品的鏈接,保障友好的體驗,是本次導(dǎo)流升級要解決的問題。根據(jù)用戶關(guān)鍵行為,我們可以將整個導(dǎo)流鏈路拆分為3個階段來挖掘主要機會點:
下載前:興趣激發(fā)導(dǎo)流吸引,建立用戶穩(wěn)定認知;
下載中:強化用戶轉(zhuǎn)化動機,刺激用戶完成下載;
下載后:保障還原體驗暢通,提升首次使用體驗。
下面將分別介紹導(dǎo)流下載前階段的設(shè)計落地實踐,以及下載中、下載后階段的延伸設(shè)計思考。
// 下載前
1.強化觸點吸引
是否能成功引起用戶注意,是轉(zhuǎn)化開始的第一步,統(tǒng)一的視覺風格和滿足用戶訴求的內(nèi)容,有利于增強導(dǎo)流條的吸引力。
1)收斂導(dǎo)流條類型
針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉(zhuǎn)預(yù)期的體驗問題,下線了阻斷式和截斷式兩種體驗不友好的導(dǎo)流類型,將原來4種導(dǎo)流類型收斂為2種,僅保留通用導(dǎo)流條和功能延展導(dǎo)流條,基于這2種導(dǎo)流形態(tài)進行深入的設(shè)計探索。
2)建立通用視覺標準
針對【缺乏統(tǒng)一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題,建立了通用導(dǎo)流條標準化規(guī)范。統(tǒng)一視覺形態(tài),優(yōu)化為頁面內(nèi)通欄嵌入式,同時融入品牌色強化用戶感知,根據(jù)頁面布局制定了不同的展示規(guī)則。
上線后,內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下,導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平,為了進一步提升導(dǎo)流的點擊效果,開始探索場景化定制提轉(zhuǎn)的設(shè)計方向。
3)定制場景化內(nèi)容
針對【內(nèi)容吸引力弱】內(nèi)容單一缺乏吸引力、用戶沒有點擊欲望的內(nèi)容問題,在通用標準化形態(tài)的基礎(chǔ)上,根據(jù)不同場景用戶訴求點,豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉(zhuǎn)化的影響。
內(nèi)容定制:豐富導(dǎo)流利益點、場景化內(nèi)容更能激發(fā)用戶興趣,促進轉(zhuǎn)化達成;
按鈕文案:轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點匹配,可以助力按鈕轉(zhuǎn)化提升;
氛圍強化:導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能,有助于提升導(dǎo)流條點擊。
2.拓展場景擴量
復(fù)利通用標準導(dǎo)流條的成功經(jīng)驗,應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗證有效性,從產(chǎn)品價值點出發(fā),挖掘高流量場景的機會點從而帶來轉(zhuǎn)化增量。
1)價值傳遞
根據(jù)小程序和APP兩端各自的不同點,分別從功能差異及體驗差異兩個方向進行優(yōu)化。
APP特有功能:APP完善的功能體驗可以更好滿足用戶訴求,例如參配瀏覽場景下,引導(dǎo)用戶體驗搜索及橫屏查看的高頻功能,對于導(dǎo)流轉(zhuǎn)化有正向幫助;
各端體驗差異:小程序和APP兩端體驗存在差異,例如圖片瀏覽場景下,APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗,能夠刺激用戶轉(zhuǎn)化。
2)價值延續(xù)
當用戶完成核心內(nèi)容消費后,是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容,進而引導(dǎo)用戶下載呢?
服務(wù)透傳:平臺服務(wù)內(nèi)容傳遞,例如在內(nèi)容落地頁文末增加品牌廣告導(dǎo)流條,幫助用戶建立品牌認知;
相關(guān)推薦:引導(dǎo)相關(guān)內(nèi)容消費,例如在文章或視頻頁增加相關(guān)推薦導(dǎo)流條,引導(dǎo)用戶瀏覽更多相似內(nèi)容。
// 下載中
當用戶通過導(dǎo)流條進入到下載流程時,還有哪些手段可以刺激用戶激活減少流失呢?
強化下載動機:下載頁前置APP落地頁內(nèi)容,例如將通用下載頁優(yōu)化為場景化下載頁,給用戶超前產(chǎn)品體驗吸引轉(zhuǎn)化;
減少用戶流失:縮短鏈路簡化流程,例如可在下載中間頁完成應(yīng)用下載,同時退出下載頁時增加挽留。
// 下載后
當用戶在應(yīng)用商店下載完成后,我們還能做哪些提升首次啟動APP的體驗?zāi)兀?/p>
還原鏈路暢通:提升場景還原成功率,減少頻繁提示信息干擾;
建立用戶心智:引導(dǎo)新用戶探索功能,根據(jù)用戶興趣推薦適合的內(nèi)容。
以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計思考,為大家提供可以繼續(xù)探索的方向。
// 寫在最后
總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗設(shè)計要點:
全鏈路洞察,對導(dǎo)流鏈路進行拆解,通過盤點導(dǎo)流鏈路的用戶行為,明確每個節(jié)點的設(shè)計方向;
降低廣告干擾性,減少用戶瀏覽過程中的阻斷感,適度弱化廣告氛圍;
用戶的視角引導(dǎo),讓用戶專注于產(chǎn)品本身傳遞的價值,引領(lǐng)用戶完成對產(chǎn)品的探索從而完成下載激活。
希望以上的設(shè)計思考,可以帶給大家一些啟發(fā)。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
對于產(chǎn)品設(shè)計師來說,在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維,這樣才能輸出差異化的設(shè)計方案。而創(chuàng)意離不開優(yōu)秀作品的靈感啟發(fā),發(fā)現(xiàn)有意思的設(shè)計細節(jié)也能提高我們的設(shè)計思維。
今天黑馬哥將會繼續(xù)為大家?guī)硪恍﹥?yōu)秀的設(shè)計細節(jié),我們一起來反思一下,這樣的設(shè)計想法為啥自己沒有想到呢?
分享目錄
一、營造頂部區(qū)域視覺感與情感化
二、主題化配圖增強視覺感
三、彈幕式標簽提高關(guān)注度
四、IP 強化底部標簽欄圖標設(shè)計
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
六、連貫性的插畫突出卡片特色
七、動態(tài)表情化的評價設(shè)計
八、場景化的推薦設(shè)計
九、上下輪播的 Banner 設(shè)計
十、情感化的氛圍營造
一、營造頂部區(qū)域視覺感與情感化
產(chǎn)品頂部區(qū)域的視覺感是吸引用戶的關(guān)鍵,在一些功能單一的產(chǎn)品中,強化視覺表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。
比如麥當勞 App 首頁的設(shè)計中,頂部區(qū)域結(jié)合溫馨的場景插畫進行表達,讓你早上打開麥當勞就有種心情愉悅感。動態(tài)的太陽微笑畫面給你一天好心情,情感化的設(shè)計不僅增強了視覺感,也帶給用戶美好的產(chǎn)品使用體驗。
二、主題化配圖增強視覺感
封面圖在產(chǎn)品規(guī)范中相對比較難約束,通過構(gòu)圖、比例、固定元素和配圖質(zhì)量等,在一定程度上可以提高感官體驗。如果是在重點突出的內(nèi)容上面,結(jié)合主題化配圖也可以增強視覺感。
之前在使用優(yōu)酷 App 時,當時在重點突出熱劇的設(shè)計中,就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫面風格和設(shè)計表現(xiàn)形式填充封面,增強了視覺表現(xiàn)力,以此突出熱劇的吸引力。
三、彈幕式標簽提高關(guān)注度
在固定的結(jié)構(gòu)布局中如何提高局部內(nèi)容的關(guān)注度,我們需要在不改變結(jié)構(gòu)的前提下進行創(chuàng)意融入。比如動態(tài)畫面、突出視覺感、內(nèi)容特異化等等,而最近發(fā)現(xiàn)彈幕式標簽也是一個不錯的選擇。
在體驗優(yōu)酷 App 時,在動漫欄目中針對推薦的熱播新番,想要突出的動漫結(jié)合了彈幕式標簽進行強化。動感的節(jié)奏會提高用戶的關(guān)注度,在不改變當前結(jié)構(gòu)的基礎(chǔ)上,不失為一種有效的解決方案。
四、IP 強化底部標簽欄圖標設(shè)計
底部標簽欄圖標是產(chǎn)品設(shè)計師經(jīng)常發(fā)揮的場景,在一些節(jié)慶主題或者活動中都會定制設(shè)計。
優(yōu)酷 App 在元旦促銷活動期間,就將底部標簽欄圖標設(shè)計與 IP 形象結(jié)合,默認以促銷主題文字展示,點擊狀態(tài)以 IP 形象顯示。圖標與活動相結(jié)合,不僅突出圖標視覺表現(xiàn),也營造了活動氛圍感。
五、強化動態(tài)發(fā)布的引導(dǎo)設(shè)計
對于靠內(nèi)容吸引用戶參與度的產(chǎn)品來說,提高用戶發(fā)布動態(tài)的意愿度至關(guān)重要,突出動態(tài)發(fā)布的吸引力也能起到促進作用。
會玩 App 在動態(tài)發(fā)布的引導(dǎo)設(shè)計中給出了不錯的思路,未發(fā)布動態(tài)時會以形象化的空狀態(tài)設(shè)計進行引導(dǎo)。動態(tài)發(fā)布的按鈕旁以俏皮可愛的形象進行引導(dǎo)設(shè)計,提高了按鈕的吸引力,讓用戶有種參與的沖動。情感化設(shè)計的引導(dǎo)不僅可以增強感官體驗,也更容易攻破用戶的防備心理。
六、連貫性的插畫突出卡片特色
卡片式設(shè)計已經(jīng)成為主流的產(chǎn)品設(shè)計趨勢,信息的歸納感可以提高識別效率。探索卡片設(shè)計的表現(xiàn)特色尤為重要,重點在于卡片造型和內(nèi)部視覺表現(xiàn)力的發(fā)揮層面。
麥當勞 App 在主內(nèi)容的卡片設(shè)計上運用了配送場景插畫,連貫性的插畫突出了卡片特色。插畫場景結(jié)合了品牌圖形,增強了麥當勞的品牌曝光度;白天和晚上還以不同配色風格和細節(jié)進行差異表現(xiàn),無論是想法還是設(shè)計細節(jié)都非常不錯,是一個挺有創(chuàng)意的案例表現(xiàn)。
七、動態(tài)表情化的評價設(shè)計
用戶評價可以反饋服務(wù)的質(zhì)量,進而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評價的積極性,需要產(chǎn)品設(shè)計師多多探索啦!
最近在使用順豐速運小程序時,完成快遞業(yè)務(wù)之后進行評價,表情化的星級評價非常有意思。不同等級以不同的表情呈現(xiàn),動態(tài)表達非常形象生動,讓人不由的挨個體驗。動態(tài)表情的形式提高了評價的關(guān)注度,情感化的表達讓用戶更愿意參與評價,提高了評價的體驗度。
八、場景化的推薦設(shè)計
針對電商類產(chǎn)品來說,商品/店鋪推薦模塊出現(xiàn)頻次較高,吸引用戶關(guān)注度自然成為了設(shè)計的首要目標。
在體驗 Mars App 時,在生活超市推薦的設(shè)計中,模擬了便利店的場景形象。真實感的場景表達帶給用戶親切自然的購物體驗,同時也提高了用戶對于該模塊的關(guān)注度。
九、上下輪播的 Banner 設(shè)計
輪播 Banner 圖算是產(chǎn)品設(shè)計中最常見的模塊,在移動端的設(shè)計中通常左右輪播為主,最近體驗到上下輪播的案例,打破常規(guī)也不失為一種新的設(shè)計思路。
在 Mars App 的首頁 Banner 圖以上下輪播進行交互,左側(cè)固定展示定位城市的天氣等信息,提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上,帶給用戶沉浸式的感官體驗。
十、情感化的氛圍營造
情感化的設(shè)計可以讓產(chǎn)品更有溫度,增加用戶對產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進行表達是相對比較普遍的形式,會在產(chǎn)品主題和視覺區(qū)域進行氛圍營造。
在清明節(jié)期間體驗飛豬旅行 App 時,頂部區(qū)域以踏春的場景營造氛圍感,還在搜索區(qū)域以青團(青團是江南人家在清明節(jié)吃的一道傳統(tǒng)點心)替代搜索按鈕。情感化的設(shè)計營造不僅體現(xiàn)了產(chǎn)品的溫度,也帶給用戶對于節(jié)日的場景體驗。
小結(jié)
禁錮我們思維的不是我們的技術(shù),而是我們的眼界和設(shè)計感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計并總結(jié)和轉(zhuǎn)化,才能讓我們打開禁錮的思維,在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計解決方案。
本文對于設(shè)計的理解闡述屬于個人見解,不足之處歡迎大家留言補充,我們互相進步。
作者:黑馬青年(vx: heimaux)
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
這期內(nèi)容依然是關(guān)于設(shè)計中的細節(jié)處理?;谖移綍r的工作經(jīng)驗,下面給大家整理了10個排版小貼士,希望能為你帶來幫助。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
精準的分析了UX設(shè)計師的技能定位。其實不光是作為一些交互設(shè)計師自己不太清楚,領(lǐng)導(dǎo)和客戶往往也會忽略這一重要的步驟...
交互設(shè)計:我們是不是要把“用戶體驗”中的“用戶”拿掉了?
前言:這篇文章寫得特別好,很精準的分析了UX設(shè)計師的技能定位。其實不光是作為一些交互設(shè)計師自己不太清楚,領(lǐng)導(dǎo)和客戶往往也會忽略這一重要的步驟。文章篇幅有點長希望大家能靜下心看完,會幫助自己了解更多哦~
什么是用戶體驗設(shè)計師?
我最近從一位來自MathWorks(世界領(lǐng)先的技術(shù)計算和基于模型的設(shè)計的軟件開發(fā)商和供應(yīng)商)的高級用戶體驗專家那兒看到了一個很棒的廣告,這是其中一些節(jié)選:
與開發(fā)團隊合作,遵循以用戶為中心的設(shè)計方法,協(xié)同工作,對復(fù)雜的問題進行頭腦風暴和設(shè)計創(chuàng)新的解決方案
向團隊成員建議使用哪些可行的方法來回答他們關(guān)于用戶的問題,并根據(jù)項目的需求、目標和約束來設(shè)計方向
與團隊成員密切合作,進行用戶研究,發(fā)現(xiàn)痛點,開發(fā)用戶配置文件,并創(chuàng)建任務(wù)列表
在紙上畫出功能原型
進行可用性測試,進行用戶交流和網(wǎng)上調(diào)研,組織調(diào)查,并進行你認為合適的其他可行性評估
它準確地描述了我在對于用戶體驗工作的期望。我們從目標人群和競品那里學習有關(guān)項目的一切知識,找到方法來研究用戶的需求和目標,與目標人群一起評估這些需求,修改項目計劃,并在最終確定產(chǎn)品之前創(chuàng)造出經(jīng)過用戶驗證的解決方案。
但當我換一份新的工作時(當然那是個例外),我看到許多職位描述都要求具備廣泛的用戶體驗技能,有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個能進行原型設(shè)計的視覺設(shè)計師。
來自高級UI/UX設(shè)計師的廣告:
有測試和可用性實驗的經(jīng)驗和熟練的交互原型的經(jīng)驗
創(chuàng)造清晰和具有視覺沖擊畫面的能力
深入了解用戶的興趣和需求
聽起來他們在尋找一個精通調(diào)研、可用性測試和交互原型的人。但更迫切的需要反映在以下關(guān)于"附加"的要求中:
項目工作能展示強大的用戶體驗過程和完美的細節(jié)視覺和交互設(shè)計原則(IA,IxD,排版,布局,層次結(jié)構(gòu),顏色,組成)
你認為他們只會招聘一個可以進行用戶調(diào)研,畫線框圖和測試的人嗎?或是視覺設(shè)計做的很出眾的人?也許這反映了“UI”這部分的職位描述。讓我們來看看一個純粹的UX設(shè)計師的職位,它要求:
優(yōu)秀的分析能力
在實際用戶研究、信息架構(gòu)、交互設(shè)計、以用戶為中心的設(shè)計過程以及用。戶體驗原則和技術(shù)等方面有豐富的經(jīng)驗
聽起來不錯!但其真面目會在下一個要求中顯示:
把想法/概念轉(zhuǎn)化為優(yōu)質(zhì)的視覺設(shè)計
如今,用戶體驗已成為熱門詞匯。盡管看起來不言自明,但一些公司并沒有明白這一點——他們?nèi)匀缓鲆暳诵袨榻?jīng)驗,而不是外表和感覺。我看到的許多廣告都是在視覺設(shè)計上表達了最具體和生動的語言。這讓我撓頭,懷疑是否只有最成熟、規(guī)模最大的公司才真正需要用戶體驗,并有足夠的預(yù)算來支持它。難道其他公司只是通過招聘視覺設(shè)計師并給他們貼上“UX”的標簽,來追個市場熱點而已嗎?
遠離調(diào)研?
用戶研究員Alan最近離開了一家總部位于亞特蘭大的公司,那里擁有大量的用戶體驗員工。他在公司的頭兩年里,參加了全國各地許多不同類型的用戶調(diào)研。然而,在最后一年,他發(fā)現(xiàn)他的調(diào)研被拋到一邊了。
"我的新老板不關(guān)心做調(diào)研。似乎整個公司都在降低它的重要性。相反,他們會開辦設(shè)計思維講習班,直接進入開發(fā)階段。“任何研究或可用性測試都被留到最后,只是為了驗證解決方案。”
由于該公司以嚴厲對待用戶體驗而聞名,這一點尤其令人不快。
像用戶體驗(ux)這樣流行的詞匯會突然變得受人追捧,我想不出在這個行業(yè)還有什么比“設(shè)計思維”更重要的了。根據(jù)谷歌在過去的五年中的數(shù)據(jù),對設(shè)計思維的網(wǎng)頁搜索翻了兩倍。
顯示從2012年12月到2017年6月設(shè)計思維搜索增加的圖表。
搜索“設(shè)計思維”,2012年12月-2017年6月(資料來源:Google Trends)
設(shè)計思維過程的第一步是移情化,就是讓用戶參與并觀察他們?nèi)绾握務(wù)摰?,同時觀察他們?nèi)绾握嬲瓿扇蝿?wù)。換句話說,這就是用戶調(diào)研。誰做調(diào)研?做用戶體驗的諸位!不難想象互聯(lián)網(wǎng)項目負責人和利益相關(guān)者繞過這個步驟,直接進入步驟2和3,開始定義問題和開展頭腦風暴去解決方案。爽死他們了。
在“設(shè)計思考家最初犯的五個錯誤,”Dana Mitroff Silvers,一個設(shè)計思維驅(qū)動者和數(shù)據(jù)戰(zhàn)略家寫道,“我經(jīng)常被客戶要求跳過這個階段,直接進入解決問題的階段。”
她還描述了我有過很多次的經(jīng)歷,公司禁止接近用戶!很多時候,silvers的客戶都會問他們是否可以跳過這個階段,因為他們“已經(jīng)知道他們的受眾需要什么,可以為他們代言。”
這就說的通了。團隊繞過不熟悉的移情階段,直接進入定義問題及其解決方案,過去一直都是這么做的。而且如果沒有在移情方面的訓練和指導(dǎo),或者充分了解,很容易跳過這個階段。在我接下來的交談中可以看到,一個公司告訴我他們需要一個兼并的ux/視覺設(shè)計師。我問他們是否需要設(shè)計思維,產(chǎn)品總監(jiān)回答:“是的。”他們跳過移情步驟了嗎?他同樣回答道:“是的。”
如果一家公司僅僅遵循設(shè)計思維的最后四個階段——設(shè)計、構(gòu)思、原型和測試——那么一個用戶體驗設(shè)計師是什么樣的呢?是一個可以做原型開發(fā)的視覺設(shè)計師。
分離調(diào)研和設(shè)計
用戶體驗架構(gòu)師Alyssa最近與一家大型電信公司簽訂了用戶調(diào)研合同。讓人失望的是,設(shè)計師似乎沒有責任跟蹤調(diào)研結(jié)果。調(diào)研人員每一到兩周進行一次新的可用性測試,然后將測試結(jié)果提交給設(shè)計師,也不知道設(shè)計師是否會遵循建議
這似乎不對。
我已經(jīng)注意到越來越多的公司在調(diào)研和設(shè)計師之間拆分他們的用戶體驗實踐。問題是,“用戶體驗設(shè)計師”通常不僅要處理交互設(shè)計,還要處理視覺設(shè)計。盡管易于使用的工具的出現(xiàn)使得創(chuàng)建可點擊的原型變得容易,但這是兩個不同的技能。我期望交互設(shè)計師分析行為和工作流程,并充當用戶的擁護者;視覺設(shè)計師則負責推廣品牌。
將設(shè)計團隊分成調(diào)研人員和設(shè)計師可能會阻礙有效的軟件開發(fā)。為了真正了解用戶,設(shè)計師需要培養(yǎng)共情心。他們和其他團隊成員可以通過進行用戶調(diào)研或可用性研究——或者參與調(diào)研過程來實現(xiàn)這一點。這就鎖定了用戶的目標和痛點,并讓設(shè)計師了解到什么是最重要的點,這將有效幫助如何更有針對性的設(shè)計。除了對設(shè)計人員有好處之外,定期的用戶調(diào)研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解,那公司一定會對共情心和用戶調(diào)研付出比口頭更多的心思了。
功能原型和測試不足
Alan Cooper是視覺基礎(chǔ)的創(chuàng)造者和用戶體驗的領(lǐng)袖,也是《囚犯們管理收容所》一書的作者,他在Twitter上抨擊了“原型和測試”的思維模式并表示:“原型和測試不是交互設(shè)計”。 Cooper寫道交互和測試能讓領(lǐng)導(dǎo)感到高興,但它只是蚍蜉撼大樹。盡管它創(chuàng)造了微小的改進,讓設(shè)計師和他們的領(lǐng)導(dǎo)們充滿希望和快樂,但它從來沒有真正從大的程度上理解用戶或者產(chǎn)品。
我們都搞錯了
我們已經(jīng)看到,在設(shè)計思維的大旗下,公司可能會跳過移情階段,回歸到一個舒適、獨立的設(shè)計過程。設(shè)計思維確實帶來了一個有價值的原型/測試階段,但在用戶研究上的偷工減料卻使本末倒置,并錯過了一個時機,去進行具體的見解和創(chuàng)新,從而可以將產(chǎn)品推向頂峰。而斷斷續(xù)續(xù)的研究只會拖延我們“想要知道我們的用戶想要什么”的心態(tài)。
雖然強調(diào)視覺設(shè)計的技巧,但分離研究和設(shè)計,可能消耗掉那些面向認知將用戶體驗放在首位的設(shè)計師。視覺設(shè)計提供了一個重要的初步印象,許多研究表明,人們對第一眼有吸引力的網(wǎng)站的評價通常比較高。但視覺只是用戶體驗中的一部分。一個經(jīng)常使用你的產(chǎn)品的用戶到底是如何評價的?視覺效果將發(fā)揮一定作用,但我認為它更有可能依賴于一個偉大的工作流程——需要反復(fù)跟進用戶體驗的流程。
我們到底要什么?
我不知道出了什么問題,但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗過程的價值,但開發(fā)或市場主管是否也是如此?
可能是我們自己被自己的完美所欺騙了。我們已經(jīng)大幅改善了用戶體驗的程度,現(xiàn)在在任何手機上都可以找到偉大設(shè)計的例子。改進后的開發(fā)工具利用了我們創(chuàng)新的交互模式,小工具使平面設(shè)計看起來很棒。也許開發(fā)領(lǐng)導(dǎo)者覺得他們已經(jīng)看到了足夠好的設(shè)計,他們相信他們也可以做到這一點。
作者:March1996
鏈接:https://www.zcool.com.cn/article/ZNzYyNDU2.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(363858.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
藍藍設(shè)計的小編 http://363858.cn