首頁

設(shè)計模式 | 多級撤銷 Multilevel Undo:讓用戶更有安全感

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

What 是什么

簡介:「多級撤銷」允許用戶撤銷一系列的操作。用戶操作的順序能被系統(tǒng)捕獲記錄,根據(jù)原始執(zhí)行順序,一步步返回歷史操作。


例子:用 Sketch 畫設(shè)計稿時,可以多級撤銷,允許用戶返回上一步或更早的歷史操作


undefined


Why 為什么

具備多級撤銷的功能可以讓用戶覺得能夠?qū)缑孢M(jìn)行安全探索,不必?fù)?dān)心造成某些不可取消的修改。例如,如果單擊了錯誤的菜單項,不需要進(jìn)行復(fù)雜的恢復(fù),不需要退回到此前保存的文件版本,或者尋求系統(tǒng)管理員的幫助。


多級撤銷也讓專家用戶更快更容易地探索工作路徑。舉例而言,一名 Photoshop 用戶可能會在一個圖片上執(zhí)行一系列的濾鏡操作,研究那些結(jié)果看是不是他喜歡的,然后再逐一撤銷,回到起點。


When 什么時候使用

需要用戶頻繁在單一頁面上交互的用戶界面,相比普通的網(wǎng)站或者移動端 APP,交互操作要復(fù)雜得多。例如:文件編輯器、圖形建模工具、郵件閱讀器、數(shù)據(jù)庫軟件、寫作工具、編程環(huán)境等。該功能能使用戶撤銷一系列操作而非單一個操作。


使用條件:該軟件的單一界面交互比較復(fù)雜和頻繁


How 如何使用

軟件首先需要一個強(qiáng)大的模型,這個模型是關(guān)于動作是什么樣的——動作的名稱、動作所關(guān)聯(lián)的對象,以及如何返回歷史動作。


決定哪些動作需要成為可取消的操作。如果動作可以改變一個文件或者數(shù)據(jù)庫——任何將是永久性存在的對象——都應(yīng)該是可取消的動作。具體而言,在大部分應(yīng)用里,人們期望能撤銷下面這些改變:

  • 文檔或表單的文字輸入

  • 數(shù)據(jù)庫

  • 圖片或畫布的修改

  • 布局上的變化位置、大小、順序或分組在圖像應(yīng)用程序中

  • 文件操作,例如刪除或修改

  • 對象的創(chuàng)建、刪除和重新組織,例如郵件消息或電子表單的列

  • 任何剪切、復(fù)制、粘貼操作


下面這些修改基本上是不可撤銷的:

  • 文本或?qū)ο筮x擇

  • 窗口或頁面之間的導(dǎo)航

  • 鼠標(biāo)光標(biāo)和文本光標(biāo)的定位

  • 滾動條的位置

  • 窗口或面板的位置和尺寸

  • 在一個未提交的對話框或模態(tài)對話框上的改動


展現(xiàn)方式

然后,決定以哪種方式把撤銷操作展現(xiàn)給用戶。大部分桌面應(yīng)用程序會把“撤銷/重復(fù)”的菜單項放在“編輯”菜單下。撤銷通常也關(guān)聯(lián)到Ctrl+Z 或類似的快捷鍵。


Example 案例

案例一:Microsoft OneNote 筆記編輯器

用戶需求:撤銷文字輸入

Microsoft Onenote  文檔編輯器擋在輸入過程中需要修改可以用快捷鍵 COM + Z 撤銷,或者使用編輯菜單下的按鈕幫助用戶返回上一步。

undefined


案例二:Photoshop 多級撤銷

用戶需求:回到歷史操作記錄

Photoshop 同樣可以采用快捷鍵和菜單按鈕返回歷史操作,由于 PS 的操作修改繁瑣且復(fù)雜,所以為用戶提供了歷史記錄面板,用戶也可以點擊歷史操作步驟回到想要的歷史操作記錄。

undefined


案例三:美圖秀秀圖像處理 App

用戶需求: 撤銷回到上幾步圖像處理結(jié)果

使用美圖秀秀等圖片處理 App 對圖像進(jìn)行美化操作時,常常會返回查看對比不同的效果,或者操作錯誤時返回到前幾步,頂部的撤銷按鈕可以讓用戶回到任何歷史操作步驟。

undefined


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

文章來源:站酷。 作者:  Ant_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


案例錦囊|交互設(shè)計中「情感化」設(shè)計優(yōu)秀案例(二)

seo達(dá)人


1.  本能層 —— 感官刺激

對于本能層,設(shè)計師需要在符合功能需求的前提下,盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激,極力去促成用戶與產(chǎn)品的 “一見鐘情”。

 

案例 1  App Store 的卡片推薦做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名為:熊幫手。

圖片

 

案例 2  微博長按點贊按鈕,可以選擇不同的點贊狀態(tài)。圖標(biāo)還是動態(tài)的,很有趣。

圖片

 

案例 3  淘寶雙十一預(yù)熱,首頁的 icon 變成了 “今晚 20 點雙 11 搶預(yù)售”的字樣,烘托氛圍又打了廣告。

圖片

 

案例 4  微信撥打語音的界面,在等待好友接聽的過程中,可以看到好友朋友圈的圖片,緩解用戶等待時的無聊,也為即將進(jìn)行的語音聊天提供了話題。

圖片

 

2. 行為層 —— 細(xì)節(jié)引導(dǎo)

對于行為層,設(shè)計師需對用戶的行為進(jìn)行預(yù)判和引導(dǎo),利用細(xì)節(jié)處理打動用戶,讓用戶對產(chǎn)品產(chǎn)生信任感和依賴感。

 

案例 1  :當(dāng)蘋果公司發(fā)現(xiàn)用戶最近在官方渠道購買了新的 iPhone ,老 iPhone 的設(shè)置頁面就會給出提示,讓用戶為新的 iPhone 做好數(shù)據(jù)遷移準(zhǔn)備。

圖片

 

案例 2  iOS 系統(tǒng)后臺在看縮略效果時,會將用戶的敏感、私密的信息的 App 頁面進(jìn)行模糊處理,保護(hù)用戶的隱私安全。

圖片

 

案例 3  :在屏幕很暗的情況下,打開微信支付二維碼,屏幕會瞬間亮起,便于商家掃碼付款。

圖片

 

案例 4  貨拉拉在展示搬家車輛詳細(xì)信息時,使用了剖面圖,并模擬了不同搬家場景下的家具內(nèi)容,讓用戶更好估算車輛空間。

圖片

 

3. 反思層 —— 認(rèn)知共鳴

對于反思層,設(shè)計師要調(diào)動用戶最深層的記憶和感知,將視覺效果、產(chǎn)品功能和用戶認(rèn)知緊密結(jié)合,形成用戶對于產(chǎn)品和品牌的深刻認(rèn)知。

 

案例 1  FigJam 是一款來自 Figma 的多人協(xié)作在線白板工具,可以進(jìn)行頭腦風(fēng)暴、繪制流程、多人協(xié)同標(biāo)記等。里面也有很多人性化的小功能,比如:當(dāng)兩個人同時長按 “H” 鍵時,就會出現(xiàn) highfive(擊掌的動效),非常適合當(dāng)設(shè)計師達(dá)成共識時使用:

圖片

 

案例 2  小睡眠 App 發(fā)現(xiàn)學(xué)生時代的我們經(jīng)常會在枯燥的課堂上睡覺,所以準(zhǔn)備了各種課堂講解、校長發(fā)言、領(lǐng)導(dǎo)開會的聲音作為催眠、助眠的音樂,讓人會心一笑。

圖片

 

案例 3  餓了么在異常天氣下通過在界面上增加天氣的元素,讓用戶看到外賣小哥的辛苦,使用視覺和內(nèi)容共情,喚起用戶的同理心,降低用戶因外賣遲到而做的投訴和差評。

圖片

 

案例 4  QQ音樂上線了寵物功能,一共有五個品種的寵物讓用戶可以選擇領(lǐng)取,多聽歌能喂飽寵物,然后送它出去參加演唱會或者和好友進(jìn)行互動。

圖片

 

原文鏈接:長弓小子(公眾號)

作者:元堯

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》案例錦囊|交互設(shè)計中「情感化」設(shè)計優(yōu)秀案例(二)

藍(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

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

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


設(shè)計的「七宗罪」

seo達(dá)人

一、差不多主義

差不多主義:凡事都覺得差不多就行了,不是特別注重設(shè)計細(xì)節(jié)。

如果每個部門都是“差不多主義”,我來給你算一下最終實現(xiàn)的產(chǎn)品會變成什么樣(我們就按還原度80%來算)。產(chǎn)品 → 交互 80%,交互 → UI 80%,UI → 研發(fā) 80%,最后則:80% x 80% x 80%=51.2%,最后實現(xiàn)的只有預(yù)期的 50% 左右,這個產(chǎn)品還怎么用?

圖片

每個設(shè)計師都要成為“處女座”像素眼,如果你只是為了想快速完成工作而搞出粗制濫造的設(shè)計,你的價值也很難體現(xiàn)出來。而且現(xiàn)在互聯(lián)網(wǎng)已經(jīng)發(fā)展的比較成熟,很多產(chǎn)品差異化并沒有很大,如果你連細(xì)節(jié)都處理不好,要你何用?要在有限的時間內(nèi)做出更精細(xì)的產(chǎn)品,打造完美產(chǎn)品,拒絕粗制濫造。

而且近幾年很多公司對【產(chǎn)品體驗】越來越重視,比如我司就把前端部門改名為體驗技術(shù)部,旨在全員打造高質(zhì)量、優(yōu)體驗、重設(shè)計的產(chǎn)品。研發(fā)都注重體驗了,你再“差不多”就真的差多了~

同時,有的設(shè)計師不善言辭,在對接需求或設(shè)計澄清的時候不會堅持自己的想法,有時候就算自己是對的,也會在其他人強(qiáng)勢的情況下敗下陣來。所以作為設(shè)計師一定要敢于力爭,強(qiáng)大的溝通能力也是職場晉升的一個重要表現(xiàn)。

 

二、拿來主義

抄襲:你直接叫我名得了。

開始之前我們要區(qū)分一下抄襲和借鑒的含義。我專門查了下詞典,根據(jù)《現(xiàn)代漢語詞典》的解釋:抄襲是把別人的文章、作品私自照抄作為自己的去發(fā)表,并且實質(zhì)性相似;借鑒是與別的人或事相對照,以便取長補(bǔ)短或吸取教訓(xùn)。區(qū)別在于前者是“照樣抄錄”,后者是“參考仿照”。

把借鑒當(dāng)做尋找靈感對任何設(shè)計師來說都是一個自然的過程。

學(xué)過美術(shù)的都知道,畫畫前期都是需要臨摹的,這個就是借鑒、學(xué)習(xí)的過程,如果你拿臨摹的畫去商用,那肯定會被打~

我們經(jīng)常做的競品調(diào)研就是借鑒的過程,去了解競對都有哪些值得學(xué)習(xí)的地方,哪些地方做的不好不適合我們,我們可以創(chuàng)新的。

不要直接把競對的產(chǎn)品拿過來抄,一些初級產(chǎn)品經(jīng)理就會經(jīng)常這么干,看競對有什么,他們就抄;競對是怎么處理了,他們就怎么處理。永遠(yuǎn)跟不上市場的腳步,別人都產(chǎn)品化了你才開始搞,吃屎都趕不上熱的~

圖片

設(shè)計真的很辛苦,我們可以把別人的作品作為“日常練習(xí)”,去從中學(xué)習(xí)原作者是如何思考、設(shè)計的。如果你拿他做除學(xué)習(xí)外的任何其他用途,都是不允許的。

其實設(shè)計已經(jīng)發(fā)展到了幾乎不可能 100% 原創(chuàng)的時代,我們就是要把所學(xué)所見混在一起,創(chuàng)造出一些新的設(shè)計。解決方案永遠(yuǎn)不止一個,思維夠活躍,就有千萬種可能。

圖片

在數(shù)字時代,你拿別人的設(shè)計搞事情,是藏不住的,我平時發(fā)一些“曝光抄襲類”文章的時候,瀏覽量比平時都要高很多,大家對抄襲還是很關(guān)注的。

平時我在面試的時候,如果你是“拿來主義”,一眼就會被看穿的,不要問我怎么看出來的,看多了你也就能一眼望穿了。

借鑒總是好的!但不要復(fù)制TA的風(fēng)格或元素,試著創(chuàng)造你自己的風(fēng)格和想法,這樣才是好的借鑒形式。

 

三、不拒先生:從來不拒絕需求

這種“職場好人”性格其實是非??膳碌摹2皇撬械男枨蠖际呛侠淼?,也不是所有的需求你都能做。但只要你接下了,你就要負(fù)責(zé)到底。

新手容易犯的一個錯誤就是:不會評估工作量,leader 給你工作的時候他會有個時間預(yù)期,但有時候也不是完全準(zhǔn)確的,你要自己評估在這個時間內(nèi)是否可以完成,完不成的話就要 say no,重新規(guī)劃時間。

還有一個比較容易犯的錯是:leader 給你任務(wù),你為了凸顯自己工作效率高,來幾個需求接幾個需求,完不成的話就自己硬扛著熬夜加班加點,雖然說這樣可以多接觸需求快速成長,但長此以往,如果有個需求加班加點都搞不出來,你又承諾了沒問題,最后沒完成導(dǎo)致研發(fā)延期了,只能你背鍋。

要適當(dāng)?shù)暮侠戆才判枨螅灰ぷ饕荒?,加出來三年工作?jīng)驗,你這是卷誰呢?

圖片

在設(shè)計澄清的時候,別人反饋的問題做記錄,然后思考合不合理,不要一有質(zhì)疑聲你就覺得自己的方案不行,就改改改,有的質(zhì)疑是合理的,有的不合理,你要有判斷,設(shè)計決策你來把控。

圖片

平時自己做好需求的時間規(guī)劃,細(xì)化到小時維度,這樣別人再問你有沒有時間接需求的時候,你就可以理直氣壯的告訴他有 or 沒有。

還有一個需要注意的就是,跨部門的上級找你做東西的時候,一定要讓他找你的直屬 leader,保證需求的統(tǒng)一入口,這樣對大家都好。之前我部門就有個設(shè)計師,別的部門領(lǐng)導(dǎo)就老直接找他做東西,然后回頭我們老大找他要之前任務(wù)結(jié)果的時候,他才說沒完成~

摸魚法則第一招:我很忙,需求往后排~

 

四、多情:今天喜歡他,明天喜歡她

產(chǎn)品化的界面可不是你喜歡什么就設(shè)計什么的,要考慮整體風(fēng)格。尤其是 B 端產(chǎn)品,風(fēng)格統(tǒng)一和樣式延展性是必要考慮的因素之一,你可以有個性化,但不要跟現(xiàn)有風(fēng)格違和,適合的才是最好的。

當(dāng)然了,這么說不是讓你不要創(chuàng)新,是在原有地基之上創(chuàng)新產(chǎn)品。你設(shè)計的再好看,紅杏出墻了有何用?新手和老手的區(qū)別,在于一個只關(guān)注當(dāng)下,一個考慮全局。初級只會把當(dāng)下做的盡善盡美,活靈活現(xiàn);老手會在保證全局完整性的前提下最大化的產(chǎn)品創(chuàng)新和易用。

圖片

每年流行的設(shè)計風(fēng)格是不一樣的,專注視覺展現(xiàn)的產(chǎn)品來說,可以追隨設(shè)計潮流,展現(xiàn)最新的設(shè)計風(fēng)格是沒問題的。但是像 B 端產(chǎn)品,風(fēng)格迭代是要有時間周期的,而且大部分比視覺風(fēng)格的周期要長,所以每次大改版的時候,要考慮未來的設(shè)計趨勢。

剛才我也提到了,最佳方案永遠(yuǎn)不止有一個,找到適合自己產(chǎn)品的就可以,如果有一些方案都覺得不錯,可以做 AB 測試,選出最好的方案做產(chǎn)品化。

鼓勵多看、多學(xué),自己思想加工好了融合到產(chǎn)品中,而不是一味地直呼:這個設(shè)計真 NB!我也要用!

 

五、感性大于理性

字面意思很好理解,之前我們都說設(shè)計師是感性的,但是當(dāng)設(shè)計與商業(yè)結(jié)合,就不能是純感性的了。任何的產(chǎn)品設(shè)計都是基于數(shù)據(jù)、基于市場需求。我們大部分設(shè)計師都不是藝術(shù)家,都在為連接商業(yè)而努力。

而且設(shè)計師也在向理性化慢慢發(fā)展,拿設(shè)計師的價值來說,之前是很難被體現(xiàn)出來的,現(xiàn)在因為和商業(yè)結(jié)合,價值慢慢的被體現(xiàn)出來、慢慢可量化了。

我們在做產(chǎn)品設(shè)計的時候也是這樣,基于調(diào)研和分析來做產(chǎn)品,而不是天馬行空,想到什么做什么。設(shè)計從感性逐步走向理性,也是一個成長的過程,一切以結(jié)果為導(dǎo)向,善用理性思維思考問題,會更讓其他人信服。一切設(shè)計都有理有據(jù),和別人 battle 的時候也不慫~

ps:在和女朋友交往中恰恰相反,切記~切記~~

 

六、妄想:可以創(chuàng)新,不要妄想

一切設(shè)計都是以結(jié)果為導(dǎo)向,YY 出來的飛機(jī)稿只能送到村東頭的廁所里。我們在腦暴設(shè)計方案的時候,一開始都是天馬行空,想到什么就寫什么,但是最終都會聚焦到產(chǎn)品上,縮小聚焦點,最后產(chǎn)出可落地的方案。

圖片

設(shè)計師的創(chuàng)新能力是很重要的,為什么企業(yè)在招人的時候,會更看重年輕一些的呢?因為他的腦洞是打開的,有更多的 idea 迸發(fā)出來。如果你只是循規(guī)蹈矩的維護(hù)產(chǎn)品迭代,遲早會被淘汰。

設(shè)計本身就是一個開闊腦洞的一群人做事情,所以早些年設(shè)計師的價值是無法被量化的,近幾年都在講量化指標(biāo)、結(jié)果導(dǎo)向,設(shè)計師的價值也慢慢的被量化出來。

一個好的產(chǎn)品設(shè)計師輸出的方案不一定是最完美的,但是絕對是在能落地的基礎(chǔ)上接近完美的。不夠完美我們可以再優(yōu)化,如果一直停留在 YY 層,永遠(yuǎn)不能落地實現(xiàn),那你的價值何在?

我相信大家在面試的時候也都感受到過,線上作品遠(yuǎn)比飛機(jī)稿要重要得多,因為他可以驗證你的方案是可行而不是你自己 YY 的,公司招你來是讓你有具體產(chǎn)出的,不是來讓你當(dāng)藝術(shù)家烘托氣氛。

我們經(jīng)常會在大膽創(chuàng)新和為了功能上線的邊緣試探,哪怕是多一點點的設(shè)計元素加進(jìn)去,也是我們努力的結(jié)果。

要記住,我們是設(shè)計師,在飛翔的時候看清邊界在哪,我們是帶領(lǐng)世界品味走向的一群人,可以創(chuàng)新不要妄想。

 

七、炫技:裝飾性大于內(nèi)容本身

最好的設(shè)計就是不用設(shè)計,最好的設(shè)計是簡單的。

部分設(shè)計師在出方案的時候,為了凸顯自己的設(shè)計能力,會有意無意的增加一些裝飾元素設(shè)計,然而頁面的承載量是一定的,裝飾性的設(shè)計過多會直接影響用戶找到頁面中的重要信息。好的設(shè)計不需要過多的裝飾,蘋果的極簡風(fēng)就很棒,一直沿用至今。

其實現(xiàn)在產(chǎn)品上并不是裝飾的重災(zāi)區(qū),作品集才是!我們團(tuán)隊在招人,每天能看到大量的簡歷,確實有很大一部分人為了凸顯設(shè)計能力,把作品集做的五彩繽紛,整成了大雜燴,而且裝飾性的元素、樣機(jī)比以往工作項目的占比還要多,這不就喧賓奪主了嗎?這樣的作品集基本就無緣了~

在設(shè)計之前,一定要了解最終目標(biāo)是什么,然后基于目標(biāo)再拆分行動項,把不必要的內(nèi)容直接砍掉,用戶在瀏覽頁面的時候,有效時間就 3 秒鐘,3 秒鐘沒有找到自己想要的內(nèi)容,就會流失。

我們只會吐槽老板的那句:“放大放大再放大”。其實深入想一下,他只是想要突出一個點而已~

不要撿了芝麻丟西瓜。

 

寫在最后

設(shè)計中有很多很多的問題,我們也都是在不斷的摸索中成長,今天給大家分享了幾個典型的“罪”,希望引以為戒,哪怕其中一點對你有幫助,也不枉碼這么多字~

今日金句:

在非洲大草原上,無論你是獅子還是羚羊,每當(dāng)太陽升起,你唯一要做的就是奔跑。

圖片

叮鈴鈴~~下課!

 

原文地址:友設(shè)青年(公眾號)

作者:Luckgg

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》設(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

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

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


業(yè)務(wù)想大多全,用戶要精準(zhǔn)簡,首頁設(shè)計該如何破局?

seo達(dá)人


圖片

“不行,這個必須在首頁!另外我還有倆新業(yè)務(wù)入口,你想想辦法”,業(yè)務(wù)方出于對流量的考慮,總是希望做加法。

“別整那么多沒用的,我就想找個xx,剩下從來不看的”,用戶出于效率體驗,總期望做減法。

加減之間,是業(yè)務(wù)與用戶對立而尖銳的需求,同時也是多類型服務(wù)產(chǎn)品首頁設(shè)計的重難點。今天,就以“58首頁設(shè)計”為例,與大家談?wù)劷忸}思路。

 

01.什么是多類型服務(wù)產(chǎn)品?

簡單說就是,多個關(guān)聯(lián)度較低的服務(wù)捆綁在一起形成的產(chǎn)品,常見于平臺式工具產(chǎn)品,例如支付寶、美團(tuán)、58同城等。

 

02.設(shè)計挑戰(zhàn)是什么?

以58為例,一方面,業(yè)務(wù)工具屬性強(qiáng),且用戶耦合性低。說人話就是,用戶都是來找工具的,但由于AB業(yè)務(wù)關(guān)聯(lián)度太低,用A業(yè)務(wù)的用戶幾乎不會用到B業(yè)務(wù),AB業(yè)務(wù)分別擁有獨自用戶群。這也就造成用戶期望更高的推薦精準(zhǔn)度,頁面上任何一個無關(guān)信息都是干擾,都是對連接效率的打折。

但另一方面,平臺上的業(yè)務(wù)很多,還都想在首頁曝光。而且隨著各業(yè)務(wù)設(shè)計師的不斷努力,連接的形式也在不斷豐富,視頻、直播、VR,從業(yè)務(wù)貼到聚合推薦,層出不窮。首頁面臨更大的信息承載壓力。

所以,這類型產(chǎn)品首頁最大的挑戰(zhàn),就是“多業(yè)務(wù)的曝光需求和用戶的精準(zhǔn)連接之間的矛盾”,如何才能在推薦技術(shù)不變的情況下,通過設(shè)計來應(yīng)對挑戰(zhàn)呢?

 

03.如何破解?

既然是信息傳遞和收取之間的矛盾,那我們就從“人-場景-信息”的對應(yīng)關(guān)系入手,分析信息在不同場景的優(yōu)先級和適合的顆粒度。

圖片

人-場景-信息優(yōu)先級和顆粒度

 

1、用戶分類

根據(jù)用戶需求分為三類。

1)預(yù)裝用戶:非自主下載,不了解產(chǎn)品功能

2)服務(wù)需求用戶:使用相對固定的服務(wù)

3)內(nèi)容需求用戶:獲取本地或相關(guān)服務(wù)信息

2、按照用戶區(qū)分場景需求

1)預(yù)裝用戶:建立產(chǎn)品認(rèn)知、保留用戶不卸載

2)服務(wù)需求用戶:更有針對性的服務(wù)展示,盡可能少的干擾信息

3)內(nèi)容需求用戶:更多類型的內(nèi)容展示

3、按照場景定位信息的優(yōu)先級和顆粒度

1)預(yù)裝用戶:

采用運營曝光策略。保留一級主服務(wù)入口,幫助建立產(chǎn)品認(rèn)知。同時曝光更多內(nèi)容信息和留存向的運營功能,以提升留存率。

圖片

預(yù)裝型用戶信息

 

2)服務(wù)需求用戶:

采用目標(biāo)服務(wù)曝光策略。保留一級業(yè)務(wù)主服務(wù)入口,方便業(yè)務(wù)切換。但擴(kuò)展目標(biāo)服務(wù)的二級信息曝光度,用以縮短路徑。同時增加動態(tài)服務(wù)模塊,來跟進(jìn)用戶動作,服務(wù)于用戶。

圖片

服務(wù)型用戶信息

 

3)內(nèi)容需求用戶:

采用平衡曝光策略。保留一級主服務(wù)入口,方便業(yè)務(wù)切換。同時擴(kuò)展內(nèi)容曝光度。

圖片

內(nèi)容型用戶信息

 

04.設(shè)計思路

1、搭建擴(kuò)展性框架:調(diào)整為頂部tab結(jié)構(gòu),釋放更多定位信號,增加曝光渠道。

原腰部tab是對“原首頁”內(nèi)容的劃分,現(xiàn)將整個“首頁”置于第一個tab下,后續(xù)tab內(nèi)容將與“首頁”并列,從而釋放更多獨立的曝光渠道。

圖片

腰部tab結(jié)構(gòu)
 

圖片

頂部tab結(jié)構(gòu)

 

2、使用更靈活的組件:變形金剛與瀑布流。

首先,金剛位是一級服務(wù)入口的集合,且處于首屏上部,是非常好的建立產(chǎn)品認(rèn)知的模塊。將其原有打散在15個位置上的服務(wù),按照大類聚合安置,更容易傳達(dá)產(chǎn)品的主服務(wù)是什么。

圖片

金剛位結(jié)構(gòu)對比

 

其次,為了應(yīng)對用戶精準(zhǔn)簡的需求,金剛也可以做靈活變形,曝光更多目標(biāo)服務(wù)的二級選項。

圖片

變形金剛位

 

而瀑布流方式也為更多樣的服務(wù)連接形式提供了承載能力。

圖片

列表與瀑布流

 

3、豐富的信息容器:

設(shè)計包含圖、文、圖文、VR、視頻、聚合類目、動態(tài)服務(wù)模塊等信息聚合方式的瀑布流卡片,同時加入即時推薦功能,讓瀑布流具備包容和靈活的特性。

圖片

組件容器

 

4、整合平臺的運營能力:設(shè)計平臺級留存向運營中心。

以往,各業(yè)務(wù)線運營功能深藏在業(yè)務(wù)頁面中,用戶往往需要通過較長的路徑才能接觸到運營功能,且用戶也并不能發(fā)現(xiàn)平臺上所有運營功能。這種分散式分布的方式,使得運營吸引力和留存能力上都打了折扣。現(xiàn)將所有業(yè)務(wù)的運營功能聚合,打造平臺的運營中心,使發(fā)現(xiàn)路徑更短,聚合吸引力更強(qiáng)。

圖片

原路徑&現(xiàn)路徑

 

圖片

默認(rèn)服務(wù)型首頁&上滑2樓運營中心

 

05.設(shè)計展示

圖片

從依靠推薦技術(shù)讓內(nèi)容適應(yīng)用戶需求,到設(shè)計靈活可變動的組件來適應(yīng)chang場景的信息承載,我們希望可以在產(chǎn)品和用戶需求的矛盾中尋求更優(yōu)的平衡點。

 

 

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

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

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》業(yè)務(wù)想大多全,用戶要精準(zhǔ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

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

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

超喜歡,這個AI小技巧!

seo達(dá)人


圖片
 
什么?還有人不知道這種字體效果是怎么做的?
好吧,就讓可愛又迷人的星火君把這個方法分享給你們吧!

開始學(xué)習(xí)啦!

 

教程步驟

圖片

圖片

圖片

圖片

 

1.打開ai

輸入文字。鼠標(biāo)右鍵單擊,選擇變換——對稱,之后選擇水平,并點擊復(fù)制。

把文字鏡像復(fù)制一個。

 

圖片

圖片

 

2.符號面板

整體旋轉(zhuǎn)90°,并調(diào)出符號面板。選中文字,鼠標(biāo)拖入符號面板備用。

圖片

圖片

圖片

圖片

 

3.畫圓

用橢圓工具制作一個正圓

之后選擇效果——3D——凸出和斜角。勾選預(yù)覽,調(diào)整角度和凸出厚度。

之后點擊貼圖,勾選三維模型不可見,選擇第3個面,符號選擇我們剛剛拖進(jìn)去的文字,也就是新建符號,點擊縮放以適合,讓文字貼合畫面,點擊確定。

再稍微調(diào)整角度,調(diào)到合適的位置,就可以了。

 

圖片

圖片

圖片

 

4.擴(kuò)展外觀

之后對象——擴(kuò)展外觀。

右鍵取消編組,再右鍵釋放剪切蒙版。

這樣就可以隨意更改文字顏色啦。

圖片

看起來步驟很多,其實操作起來還是很簡單的。everybody,學(xué)起來??!

那小分享就到這里吧,下期再見哦~

 

原文地址:詩人星火宇宙(公眾號)

作者: 星火君

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》超喜歡,這個AI小技巧!

藍(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

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

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


日歷

鏈接

個人資料

存檔