超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

首頁

UI 設(shè)計公司的收費標(biāo)準一般是怎樣的?判斷 UI 設(shè)計公司的收費是否合理

藍藍設(shè)計的小編 設(shè)計資源

判斷 UI 設(shè)計公司的收費是否合理,可以從以下多個方面著手:
考量設(shè)計公司的專業(yè)水平與資質(zhì)

團隊專業(yè)背景:查看設(shè)計團隊成員的學(xué)歷、畢業(yè)院校以及所學(xué)專業(yè)等情況,若團隊成員大多來自知名設(shè)計院校,具備扎實的專業(yè)基礎(chǔ),例如有專業(yè)的視覺傳達、交互設(shè)計等相關(guān)專業(yè)背景,往往意味著能產(chǎn)出高質(zhì)量的設(shè)計成果,相應(yīng)收費可能會偏高,但也更具合理性。
行業(yè)經(jīng)驗:了解其在 UI 設(shè)計領(lǐng)域的從業(yè)年限以及過往參與過的項目類型和數(shù)量。有豐富行業(yè)經(jīng)驗的公司,經(jīng)歷過各種不同客戶需求和復(fù)雜項目的打磨,在處理問題、把握設(shè)計方向上更有優(yōu)勢,對于復(fù)雜項目合理收取較高費用是正常的,比如長期服務(wù)大型企業(yè)、完成過多個行業(yè)標(biāo)桿性 UI 設(shè)計項目的公司,其報價高些可能是基于深厚的實踐積累。
所獲榮譽與資質(zhì)認證:關(guān)注該公司是否獲得過一些權(quán)威的 UI 設(shè)計相關(guān)獎項,或者具備如紅點獎等。這些榮譽和認證是對其設(shè)計實力與服務(wù)質(zhì)量的一種認可,收費相對高些如果匹配其專業(yè)形象,也是合理的體現(xiàn)。

蘭亭妙微:專業(yè) UI 設(shè)計的卓越之選

藍藍設(shè)計的小編 設(shè)計資源

蘭亭妙微一直秉持著 “設(shè)計優(yōu)秀,不斷超越” 的理念。誠信敬業(yè)、專業(yè)耐心是他們工作作風(fēng)的真實寫照。在設(shè)計服務(wù)方面,他們不斷創(chuàng)新,與時俱進。公司深知,只有幫助企業(yè)提升軟件和互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計水平,進行開發(fā)升級,才能為企業(yè)帶來更多的價值。

聊聊對設(shè)計和品牌的一些新看法

藍藍小助手 設(shè)計資源

設(shè)計的審美大多數(shù)是依照市場的改變而變化的,市場選擇的東西要試著去相信,可以參考,不表示要一比一的模仿,加入自己的想法和理解,也許能有新的東西出來。接到委托之后先具體化的溝通,理解需求,復(fù)述你的理解,讓對方同屏,之后再進行更具體的論述,能減少之后的許多麻煩。

【達達快送】騎士IP形象|達哥

資深UI設(shè)計者

本次分享的項目是達達快送品牌IP達哥,這個項目是由@寶箱 @Masaya @小劉三人合作完成。
希望通過分享能打響達哥的知名度,并且通過沉淀的方法論能夠幫助大家應(yīng)用于日常工作中。
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏
【達達快送】騎士IP形象|達哥
收藏

作者:DXC設(shè)計體驗中心
鏈接:https://www.zcool.com.cn/work/ZNjM1NTc5NjQ=.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

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


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


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

花百億買來的經(jīng)驗:百度FEED營銷活動設(shè)計方法

資深UI設(shè)計者

前言


15年開始,紅包大戰(zhàn)占據(jù)了春節(jié)營銷的重要位置,各家互聯(lián)網(wǎng)平臺紛紛“發(fā)錢”搶占用戶,紅包總額曾在2021年一度達到120億元的峰值。不過近兩年開始,過往簡單粗放的紅包大戰(zhàn)逐漸失去熱度。平臺不再追求短時間用戶增長,這次春節(jié)活動就是百度FEED年底以運營手段打造的內(nèi)容營銷活動。設(shè)計團隊以“有福氣 趣新春”為主題提出了內(nèi)容場景化的營銷策略,整體圍繞如何把“內(nèi)容做的有趣”來分享設(shè)計思路。



一、心智建立內(nèi)容護城河


1、心智占領(lǐng):

提到內(nèi)容營銷,先不說老掉牙的腦白金、可口可樂。我們先說說產(chǎn)品和用戶的關(guān)系。我們通過各大平臺的定位,提供了信任背書,但產(chǎn)品只是流量的承載地,最終讓目標(biāo)用戶到達目的地的還是我們的品牌、內(nèi)容、形象。所以我們在做內(nèi)容營銷活動的時候,究竟應(yīng)該怎么做?


2、你的產(chǎn)品容易記住么?

海的味道你知道,是波力海苔。提到藍瓶的鈣,腦海會浮現(xiàn)產(chǎn)品的藍色包裝。說到這里,我們就明白了,內(nèi)容營銷的核心是圖形和口號。營銷活動的核心是品牌符號和Slogan。

品牌符號拆解

以春節(jié)項目舉例,提取中國傳統(tǒng)團扇形,象征著大團圓。引申為家家戶戶的心愿,全家團圓、福氣滿滿。以FEED產(chǎn)品愿景「看更多有趣有用的內(nèi)容」為使,結(jié)合「新年要有福氣」的新年祝福,推出品牌Slogan【有福氣·趣新春】的活動理念,開啟活動篇章。




有了主要的符號傳達,其它輔助元素的提取從桂花造型和錢幣上做了簡化,寓意吉祥富貴財源滾滾,應(yīng)用在頁面細節(jié)裝飾中。



用顏色表達個性

提起品牌符號,我們首先想到的可能是 Logo,但有些時候色彩卻是第一印象。春節(jié)是中國傳統(tǒng)文化的傳承。因此嘗試從中國傳統(tǒng)色彩體系中象征“福氣、福來、富貴”的海棠紅作為會場主顏色。



為了更好的區(qū)分內(nèi)容場景以及增加色彩豐富度,受到“一年四季輪回”的啟發(fā),延伸品牌輔助色。一年的圓滿在于四季的圓滿,在色彩表現(xiàn)上,從春到人間萬物鮮到春雪滿空;對應(yīng)綠、紅、黃、藍給人煥然新生的視覺感受。



用字體豐富品牌基因

字體,不僅可以指代文字內(nèi)容含義和字形美學(xué)價值,還能透過字體設(shè)計的初衷洞察到品牌濃縮其中的理念和哲學(xué)。利用彎曲讓作品動感有張力。利用圓角處理增加趣味性,呼應(yīng)“有趣”的品牌理念。用傾斜的樣式營造出視覺張力,形成視覺焦點。




3、洞察產(chǎn)品的「生命力」

定形象-品牌基因的獨特形象

角色、品牌、用戶必須是一個標(biāo)簽,清晰可見。以IP角色與用戶互動溝通,建立信任關(guān)系,擁有獨立人格和魅力。通過更具人格化的形象,使品牌變得更溫暖。本次活動的主IP,在設(shè)定上采用FEED字母演變不同性格IP角色,作為不同維度的形象代表,豐富B/C端的內(nèi)容場景。



情感鏈接-圍繞人設(shè)講故事

如何通過「IP角色」讓用戶對產(chǎn)品產(chǎn)生情感呢?首先賦予他們性格,他們分別是福氣、財富、快樂和有趣的化身。為用戶帶來財、富、樂、趣是他們的責(zé)任。IP的人格化能很好的與用戶建立品牌好感度。同時「持續(xù)曝光+情感鏈接」的品牌策略,在活動中貫穿內(nèi)容場景、物料推廣、分享轉(zhuǎn)發(fā)等,反復(fù)強調(diào)品牌。



二、你的差異點是什么?


1、化繁為簡,強化內(nèi)容

由于春節(jié)活動周期長、內(nèi)容多的特點,使得頁面呈現(xiàn)龐大復(fù)雜,會造成用戶的理解成本影響留存,因此把內(nèi)容有效呈現(xiàn)、提升屏效、優(yōu)化體驗路徑是交互的重點。我們通過“框架分層”“減少活動步長”對所有活動進行了框架升級。提升活動易用性,讓用戶快速參與活動。在設(shè)計表達上簡化頭圖背景,讓用戶聚焦場景,引入內(nèi)容。



2、創(chuàng)意場景,引爆內(nèi)容

洞察設(shè)計策略

百度FEED不同于其他矩陣,我們的產(chǎn)品內(nèi)核是“內(nèi)容”;作為春節(jié)活動,濃濃的“年味”是活動外核。如果只去介紹我們自己產(chǎn)品的功能、種種好處,這種干巴巴的內(nèi)容無法在這個時代獲得關(guān)注和認同,因為無法與用戶建立切身聯(lián)系。所以在不同層次的內(nèi)容上,我們可以通過故事化、場景化來把內(nèi)容做的更有趣,最終實現(xiàn)業(yè)務(wù)互動轉(zhuǎn)化提升。



年俗互動-故事型敘述 增強產(chǎn)品代入感

抓住用戶情緒洞察,采用年俗的理念打造場景,營造用戶代入感。在視覺表現(xiàn)上,根據(jù)時間推移,場景也隨之變化;以回家團圓吃年夜飯、到走親訪友云拜年、看煙花賞燈會,實現(xiàn)了場景從年三十到十五的視覺呈現(xiàn),釋放出情緒共感的疊加效應(yīng)。引發(fā)用戶“過年”的心理共鳴。



場景設(shè)定

場景一:花樣團圓飯。圍繞“三十吃餃子”的年俗為主要點切入,通過具象的關(guān)鍵詞構(gòu)思場景,結(jié)合品牌符號,融入中國風(fēng)建筑表達“家”,并將餃子、房子、人的比例重構(gòu),增加畫面沖擊力,在配色上摒棄大面積的紅黃配色,加入蔻梢綠和淡曙紅作為輔色,為整體添加了一絲春天的氣息。



場景二:神評云拜年,發(fā)評送好禮。圍繞“云拜年”的年俗為主要點切入,過年的時候拜年是人們辭舊迎新、互相表達祝愿的一種方式。創(chuàng)意表達上,除了沿襲以往“登門”的拜年方式外,在畫面表現(xiàn)上加入代表新興禮儀“云拜年”的概念,讓視覺吸引眼球,同時又很接地氣。



場景三:猜燈謎送吉祥。以元宵賞燈會的年俗為切入點,夜色旖旎,花燈璀璨,在一片流光溢彩之下,鬧元宵、賞花燈、迎新春。"玉兔東升、鯤鵬萬里”,用最美好的祝福為用戶開啟新年新篇章。



人文互動-內(nèi)容聯(lián)想 強化產(chǎn)品特點

我們?yōu)槭裁匆研〗M內(nèi)容關(guān)聯(lián)到人文上?我們需要給產(chǎn)品定義一個標(biāo)簽,讓內(nèi)容進入一個優(yōu)勢的心智賽道,用設(shè)計手段具像化演繹出來,讓目標(biāo)用戶最快對號入座,提升產(chǎn)品的認知效率。而人文包羅萬象,與小組內(nèi)容分類不謀而合。



內(nèi)容聯(lián)想

在視覺表現(xiàn)上,圍繞“小組發(fā)布內(nèi)容”的類比聯(lián)想,場景選取攝影、養(yǎng)花、命理、詩詞、鄉(xiāng)村等七大不同人文場景,著力刻畫“小組內(nèi)容”強關(guān)聯(lián)的人文元素,以此映射產(chǎn)品的特點,激發(fā)用戶參與意愿。借助想象放大或夸張內(nèi)容特征,更鮮明的強調(diào)內(nèi)容本質(zhì)。



3、豐富體驗

為了維護用戶粘性,讓用戶每天都來“玩”。加入2級活動,用“獎勵”“成就”“抽簽”形成驅(qū)動用戶雷達地圖,多維度持續(xù)牽引,增強互動體驗。


如何讓用戶玩下去?

【抽簽活動-新年福氣簽】
活動玩法:用戶每天進入活動可抽福氣簽,隨機發(fā)放簽文以及紅包獎勵,中獎+祝福的滿足感驅(qū)動用戶回流。


洞察&創(chuàng)意

新的一年,人們對美好生活都有向往和期盼,“討彩頭”是每位用戶對生活的新追求。在活動的設(shè)計上要吉祥滿滿,自帶好彩頭。用福袋作為容器承載簽文,以抽幸運球、得獎勵贏福氣作為情感驅(qū)動,刺激用戶玩下去。



在簽文設(shè)定上用團扇的品牌符號作為基礎(chǔ)形狀,加持“祥云”“吉祥話”讓活動不止驚喜,更是平臺對用戶的祝愿。



如何讓用戶“回來”玩?

【激勵玩法-我的成就】

洞察&創(chuàng)意

在成就玩法中,勛章作為精神激勵直接授予用戶,提升用戶在活動內(nèi)的成就感和價值。另一方面,勛章也作為主活動物質(zhì)激勵的間接載體,用戶通過解鎖勛章來獲得終極大獎。從設(shè)計角度,采用三維立體視覺風(fēng)格,結(jié)合IP形象,使勛章更年輕有趣,讓用戶形成記憶點。強化視覺沖擊,滿足用戶的成就感和榮譽感,刺激用戶回流和分享。



驚喜彩蛋,拉升互動體驗

除了視效的打磨外,營造“驚喜感”是在體驗中非常重要的一環(huán)。無論是抽獎還是成就,除了在視覺上有抽獎的儀式感。在活動中增加互動彩蛋,用戶在投票以及點贊后會有對應(yīng)的動效,讓整體體驗更加細膩。


精彩視頻,點擊可看





結(jié)語


總結(jié)一下本篇文章關(guān)于內(nèi)容場景化營銷的設(shè)計要點:

心智占領(lǐng):前置化思考品牌打法,從品牌符號、Slogan、色彩基因、字體設(shè)計到IP的設(shè)定,全鏈路反復(fù)強調(diào)品牌。

設(shè)計創(chuàng)意:用故事性、場景化演繹設(shè)計創(chuàng)意,差異化視覺呈現(xiàn)。

互動體驗:用“驚喜感”拉升互動體驗。


希望以上的設(shè)計思考,可以給大家一些啟發(fā)。


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTUyMzYyMA==.html
來源:站酷

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


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


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

。                           

WWDC22|從獨立開發(fā)者中發(fā)掘小而美的設(shè)計奧秘

資深UI設(shè)計者


WWDC22 全球開發(fā)者大會結(jié)束,有太多小眾產(chǎn)品脫穎而出。無形中有一股巨大的力量,在慢慢崛起,那便是來自世界各地的小型開發(fā)團隊和獨立開發(fā)者。他們的產(chǎn)品小而美,小到僅靠一個功能撐起產(chǎn)品,美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細節(jié),不妨聽我細細道來~




其中,我精挑細選出一個海外和三個國區(qū)優(yōu)秀產(chǎn)品進行產(chǎn)品設(shè)計細節(jié)分析,一探小眾產(chǎn)品究竟好在哪里!

(專注面條 - 輕松重獲專注力)2022年Apple設(shè)計大獎入圍名單之一
(謎底時鐘 - 讓時間看得見)2022年Apple設(shè)計大獎入圍名單之一
(Waterllama - 開啟喝水時間)2022年Apple設(shè)計大獎入圍名單之一
(OffScreen - 自律番茄鐘,不做手機控)Apple Store精品推薦64次

排名不分先后,從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計風(fēng)格基本不一樣,不存在借鑒抄襲,各自都在細分領(lǐng)域深耕播種。

也正是因為開發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”,才能讓產(chǎn)品突出重圍,優(yōu)秀的呈現(xiàn)在用戶面前使用。


一、專注面條


Slogan:專注,可以做出一碗好面條。


你以為這只是讓人做泡面的App!那就錯了。這是用“煮一碗好面條是需要時間的”為理念,讓用戶專注工作,類似番茄工作法。

有趣的是,這款效率工具被插畫元素完美包裹起來,一點感受不到工具給人帶來的疏遠感。相反,極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。

正因這上乘的設(shè)計質(zhì)感,《專注面條》曾數(shù)次登上 App Store 推薦頁,至今收獲 7000+ 個評價、4.9 的評分。





1.核心理念

想象一下你正在烹飪一碗面條。


在烹飪時間結(jié)束前.不要試圖拿起你的手機,這樣會讓水蒸汽流失,面條就不好吃了。日后,你可以使用專注面條完成你希望專注的任何事情。


它把工作比喻成煮面,煮面要專心,把控火候,合適時間放入主料和調(diào)料;工作同樣要專心,遵循自己的方法論,把每個步驟和流程都執(zhí)行到位。工作完成了,一碗面也就煮好了。


專注力在哪里,效率就在哪里。

「專注面條」希望輔助你以一種詼諧有趣的方式,重獲這個時代最稀缺的專注力。放下你的手機,煮一碗面,我們一起對抗手機成癮!


時間一到,你的面條就做好了,你也完成了一次有意義的專注。




2.品牌元素

打破常規(guī),不用系統(tǒng)默認蘋方字體,而是選擇手寫體風(fēng)格的「素材集市康康體」字體(文末領(lǐng)取可商用字體包)作為通篇文字載體。

這也是為統(tǒng)一界面風(fēng)格做的一個優(yōu)化嘗試。

不得不說,這個選擇是非常適合的。(體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計字體,一旦產(chǎn)品功能做多做大還是乖乖用默認字體規(guī)范靠譜些)。


打開App,你能明顯看到簡潔的手繪風(fēng)格元素,使整個產(chǎn)品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發(fā),畢竟小孩子總有天馬行空的想象,但大人們卻很難跳脫現(xiàn)實產(chǎn)生有趣想法。


App界面極其簡潔,只有黑白灰三種顏色,搭配手繪風(fēng)格的設(shè)計元素,使產(chǎn)品整體清新脫俗,與眾不同。

圖標(biāo)設(shè)計脫離設(shè)計規(guī)范,采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格,這樣使得界面統(tǒng)一性極高,氛圍感十足。

這也間接告訴設(shè)計師們圖標(biāo)設(shè)計上一定要跟著產(chǎn)品形態(tài)去做設(shè)計,而不要一味以第三方規(guī)范為唯一衡量標(biāo)準來設(shè)計,結(jié)果就是同質(zhì)化泛濫。




3.專注時長-插圖設(shè)計

計時是產(chǎn)品核心功能,點擊首頁左上角專注時長,會出現(xiàn)不同的煮面方案。

可設(shè)置5分鐘-180分鐘之內(nèi)任意時長的專注時間,同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘,這13個時間段繪制了專屬面條配方。你不用手機的時間越長,你煮的泡面配料就越豪華越高級。設(shè)計元素也越豐富。當(dāng)你碰到手機,就會震動十閃光。

面條設(shè)計方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。




4.設(shè)計細節(jié)

根據(jù)累積的專注時長還可以獲得相應(yīng)的稱號,配合幸苦工作后汗水落下動畫,很是生動有趣。

不僅如此,專注面條還特意為女性男性做了兩套插圖設(shè)計方案,充分考慮不同群體的使用體驗,僅僅是效率型產(chǎn)品就做到如此細節(jié),不好才怪。

這也是除了故事卡片第二種用總時長配圖來增加產(chǎn)品使用黏性產(chǎn)生記憶點的設(shè)計之處。




5.商業(yè)模式-永久買斷與付費項目

1.永久買斷制


【專注面條】一次買斷制,面條價格¥18。購買后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來解鎖,¥6.00=鑰匙*6,不想付費那就乖乖完成計時任務(wù)來隨機獲得故事卡片。


作為一個功能單一的產(chǎn)品,賣點在哪里?核心競爭力在哪里?依碳水Sir來看付費用戶大多在為品牌理念買單。

就是產(chǎn)品自身的品牌調(diào)性,區(qū)別于市面上任何一款產(chǎn)品,不隨波逐流,用全新的面條理念代替時間,并且有其鮮明的手繪風(fēng)格和插圖元素,即使被抄襲也只能抄到“外殼”,內(nèi)在的東西是偷不走的。


2.購買鑰匙


專注完成后,靠概率獲得鑰匙,用來解鎖故事卡片以及 “腦洞大開” 的結(jié)局作為獎勵。緩解你專注后的緊張感,增加趣味互動性,同時為下一次專注做好準備。

故事中皮諾曹、烏鴉喝水、長發(fā)公主等雖然都是我們耳熟能詳?shù)耐挘髡撸?Alex )給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里,解謎前三個猴子看到河流中有一個圓圈,當(dāng)我們找到面條的位置時,會發(fā)現(xiàn)猴子們看到的不過是一個香菇都大為震驚,畫面里充滿奇妙的想象力。

當(dāng)用戶看到未解鎖的故事會出于好奇點進去,這時就需要鑰匙來解鎖,畢竟不是靠專注獲得的卡片就要用別的辦法(購買鑰匙)打開,這就是第二個商業(yè)轉(zhuǎn)化點。


目前已有的27張故事卡片,每一個都與面條結(jié)合進行故事綁定,讓用戶在效率軟件中也能感受到游戲的樂趣,把故事卡片當(dāng)成解鎖過關(guān)元素,引發(fā)用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進而提高使用黏性以及提升付費轉(zhuǎn)化的一種方式。




一個動作,一堆腦洞,組成了一個能量滿滿的 app。

6 月 1 日,蘋果發(fā)布了 2022 年度設(shè)計大獎入圍名單,在「創(chuàng)新思維」類別中出現(xiàn)了中國區(qū)《專注面條》的身影,雖然止步于決賽圈,但我覺得這并不是結(jié)束,而是全新的開始。


優(yōu)秀的產(chǎn)品總有其相似之處,也有其不同。要想做一款好的小眾產(chǎn)品,除了把產(chǎn)品本身所解決的用戶痛點做好做精外,植入產(chǎn)品理念,與用戶產(chǎn)品某種關(guān)聯(lián)。

就如它把專注計時比作烹飪時間,當(dāng)完成專注,你將獲得一碗香噴噴的泡面一樣,給用戶感受并不是冷冰冰的機器“?!钡母嬖V用戶專注結(jié)束,而是通過巧妙的設(shè)計與用戶之間產(chǎn)生真實聯(lián)系,這或許就是成功的秘密。

借用「專注面條」Slogan說的:專注,可以做出一碗好面條。

各位設(shè)計師們不妨學(xué)習(xí)一下背后的思考。


二、謎底時鐘 - 讓時間看得見


謎底時鐘是一款設(shè)計精美的時鐘應(yīng)用。

Slogan:陪伴你學(xué)習(xí)、工作與生活。

你沒看錯!它僅有時間和計時功能。

作為一款時鐘App,UI設(shè)計有什么不同,才被入選2022 蘋果設(shè)計大獎!成為中國開發(fā)者之光!我們一起來看看。




1.首次引導(dǎo)

第一次下載,就會啟動引導(dǎo)流程,切換頁面時配合錯幀動畫,使設(shè)計細節(jié)更加突出明顯,強化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁都可以嘗試這種表現(xiàn)形式。

進入首頁,展示文字+動效的引導(dǎo)流程,統(tǒng)一的表現(xiàn)形式,讓使用者更容易理解。首頁交互引導(dǎo),讓用戶對產(chǎn)品隱藏的交互功能得到二次記憶,具有增強產(chǎn)品記憶的作用。




2.品牌元素

2-1.設(shè)計元素


品牌風(fēng)格設(shè)計很前沿,采用2020年大火的新擬態(tài)設(shè)計風(fēng)格,也能看出設(shè)計表現(xiàn)緊跟市場潮流走,是一款個性且年輕的App。

整體使用下來,印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計,以及彈窗布局的規(guī)范化設(shè)計,還有部分組件采用毛玻璃設(shè)計手法等。

值得注意的是,產(chǎn)品對iOS原生組件進行大量重新設(shè)計,結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來。讓人使用一次就記憶猶新。


2-2.核心力-交互感知


我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談?wù)効捶āR韵聨讉€動效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能,之所以展示出來,是因為「謎底時鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新,摒棄原生組件。

這樣做對于功能簡單的產(chǎn)品來說絕對是錦上添花有助于產(chǎn)品形成記憶點的設(shè)計細節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品,只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計的方向。


什么是好的交互,操作時無感知是一種,操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優(yōu)秀的交互自成一派,把單一的功能做到極致,你的產(chǎn)品就不會差到哪里。




3.彩蛋-圖標(biāo)變化與提醒

時鐘就是要長時間靜默展示,除了極簡、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時鐘外,霓光時鐘具有不一樣的功能。

當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”,除了文案變化,圖標(biāo)也跟隨名稱而變,又一個用美食來拉近與用戶距離的設(shè)計細節(jié)。


不僅如此,在低電量情況下,霓光效果不顯示,底部會持續(xù)閃爍電量不足的指示燈,告訴用戶手機沒電信號,請及時充電。當(dāng)用戶插上電源,霓光時鐘會重新啟動亮光模式,給予用戶通電感知。

雖然很小的設(shè)計點,但誰又能想到時鐘與電量不足產(chǎn)生聯(lián)系??磥黹_發(fā)者對時鐘的創(chuàng)意聯(lián)想是豐富多彩的。




4.彩蛋-積木時鐘墜落

無意間觸碰手機時發(fā)現(xiàn)積木零星掉落下幾個,在好奇的驅(qū)使下又晃動了一下手機,所有積木都掉落下來了。

具有數(shù)字屬性的積木依然不斷變換數(shù)字,并且配合手機陀螺儀可以模擬現(xiàn)實空間進行移動,交互玩法趣味十足,讓我忍不住多玩了幾次。

這種用到iOS系統(tǒng)功能做的大膽嘗試,有時會給產(chǎn)品帶來意想不到的好處,各位總監(jiān)們不妨試試。




5.商業(yè)模式-細節(jié)之處

采用終身會員與月會員模式,月會員很好理解,為了產(chǎn)品能持續(xù)做下去,而推出的付費模式,目的是能持續(xù)有營收。終身會員是一個很有意思的模式。

據(jù)了解,產(chǎn)品前期功能相對單一時,推出的一種買斷制,但隨著新功能不斷增加,原有¥25定價相比較低,早期買斷的用戶獲利更大,為了商業(yè)與產(chǎn)品平衡,使其具備良性發(fā)展空間,于是又推出月會員模式。


這也牽扯到另一點,凡是未上線新功能都可以輕松決定是否開發(fā)上線,一但功能上線,想要取消或抹掉功能,就沒那么輕松簡單了。這也是早期App都一次買斷,后期改為訂閱模式也必須有終身買斷的內(nèi)購入口。




如果我們是“匠人”就會把 App 當(dāng)藝術(shù)品,雖然只有也僅有一種功能,但只要花費了大量的時間去想創(chuàng)意,去做到設(shè)計、交互的完美融合,甚至一遍一遍地優(yōu)化各種細節(jié)部分,埋設(shè)彩蛋,最后的最后呈現(xiàn)出來讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。


三、Waterllama


烏克蘭開發(fā)團隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能,卻用大量動物角色來獎勵喝水后的你,讓你欲罷不能。保持水分保持快樂!從截圖中不難看出,該App內(nèi)置大量動物插圖,通過喝水來解鎖小動物,解鎖前僅展示動物輪廓,讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣,這個概念很好,產(chǎn)品很棒,那我們一起來看看吧。




1.品牌元素

產(chǎn)品中icon展示較少,更多是用小插畫來代替,頁面中大量的banner以及動物卡片,豐富產(chǎn)品的同時營造一種輕松的感覺。并沒有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動效來承載,讓簡單的元素變得趣味橫生,很是新穎。除了普通的水以為,Waterllama還為各種飲料酒水做了全套icon,共計48+之多,可見產(chǎn)品對于水的核心功能做足了努力,才有如此多的類型與選擇供用戶記錄。




2.核心功能

無論您是想休息一下咖啡因,還是想通過果汁和冰沙來增強免疫系統(tǒng) - 選擇任何挑戰(zhàn),盡情享受吧!
遠離含糖飲料和酒精,或者在 10 天內(nèi)只喝水補充水分??纯茨愕倪M展如何,別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過 45 個可愛的動物角色,我把解鎖與隱藏的都羅列到上放品牌元素中,可以看下總有一款是你的菜。你也可以使用隨機模式,讓每一天都變得不同。當(dāng)天喝水目標(biāo)達成就會解鎖一個動物,精美的插圖讓人賞心悅目,期待第二天繼續(xù)喝水打卡挑戰(zhàn)。




3.交互手法

首頁下方的動物挑戰(zhàn)卡片,交互形式采用App Store卡片點擊交互,無論是轉(zhuǎn)場過度,還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細節(jié),一邊了解喝水的各種好處,娛樂加學(xué)習(xí)兩不誤,很是輕松。




4.商業(yè)模式-細節(jié)之處

內(nèi)購頁面采用icon輪播的動效展示,優(yōu)點是在一小塊區(qū)域通過消失漸現(xiàn)可以展示所有內(nèi)容,使內(nèi)購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環(huán)放大,引導(dǎo)用戶進行付費操作,雖然很刻意,但絲毫沒有感受到強制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購頁強化品牌背書,給到用戶可靠穩(wěn)定感,可以選出具有代表性的優(yōu)質(zhì)評價,展示在內(nèi)購頁下方,通過左右切換查看更多評價。
每年¥28,終身買斷制¥48.00。兩個價格是利用價格差來制造價格錨點,引導(dǎo)用戶購買終身會員,這對用戶來說最實惠劃算的方案,同時也是產(chǎn)品所希望的。大量的終身用戶長時間使用產(chǎn)品,成為核心用戶群體,助力產(chǎn)品越做越好。




現(xiàn)在不難看出,優(yōu)秀的產(chǎn)品往往更關(guān)注細節(jié)表現(xiàn),用動態(tài)展示內(nèi)容,讓玩法更具趣味性,頁面簡約而不簡單。并不是頁面元素越多越好,相反把簡單的功能做到極致就會帶來正向有價值的反饋。


四、OffScreen - 自律番茄鐘,不做手機控


這款產(chǎn)品雖然沒出現(xiàn)在WWDC22上,但與「謎底時鐘」是同一家公司。無論設(shè)計或功能使用都相媲美。
手機已成為人人必備的物品,內(nèi)置的各種App占有著人們的生活,手機依賴已成為這個時代普遍的一種現(xiàn)象。雖然人們都知道長時間看手機不好,下意識的克制看手機行為,以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機,一天下來使用手機的時長不降反增?!窸ffScreen」通過細分時間屬性為用戶直觀呈現(xiàn)各種場景下使用手機的詳細數(shù)據(jù),通過數(shù)據(jù)展示以及專注時間,防止用戶沉迷手機無法自拔。




1.品牌元素

「OffScreen」背景色使用極其大膽。

淺色模式下采用暖橘色作為品牌主色調(diào),暗色模式下采用海藍色作為主色調(diào),相比Apple設(shè)計規(guī)范中的顏色,這種帶有傾向性的色彩更容易營造一種產(chǎn)品氛圍,強化產(chǎn)品感知度。

圖標(biāo)方面,具有操作屬性的圖標(biāo)采用線性(相對好理解),具有展示屬性的圖標(biāo)采用面性風(fēng)格(設(shè)計表現(xiàn)更強且有文字描述相對好理解)。




2.動效表達1

引導(dǎo)流程專場用了大量位移、漸變效果,使原本單調(diào)的靜態(tài)頁賦予生動表現(xiàn)力。吸引用戶眼球,達到品牌傳播效果。




3.動效表達2

動效貼合操作效果,用戶還沒使用就能一眼明白產(chǎn)品如何使用,這就是引導(dǎo)動效的好處。

當(dāng)你專注番茄鐘時,只需在番茄上滑動標(biāo)尺選擇準確時間,就能開始專注。

當(dāng)完成專注會提供統(tǒng)計數(shù)據(jù),并且有彩帶飄落效果,營造打卡勝利的儀式感,強化產(chǎn)品感知,為用戶下一次專注做準備。




4.商業(yè)模式-細節(jié)之處

內(nèi)購頁采用依次呈現(xiàn)的交互方式,頭圖是一個人在看手機,采用線性風(fēng)格手法,這種形式區(qū)別于其他產(chǎn)品,會給人以眼前一亮的感覺,加深用戶對產(chǎn)品的記憶。

付費按鈕吸附與頁面底部,根據(jù)菲茨定律,起始于目標(biāo)位置越近,到達目位置的時間就會越短,從而用戶更容易點擊。


一次買斷制,¥30.00解鎖終身會員。

作為一款時間統(tǒng)計、番茄鐘、專注時間與一身的產(chǎn)品,對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現(xiàn)以及有趣的配圖描述,間接感受到Off Screen產(chǎn)品的細膩之處,用戶為此買單也不是說。




OffScreen的成功在于能把單一的屏幕使用時間進行多維度分析呈現(xiàn),就說“呆呆的看”與“邊走邊看”這兩項數(shù)據(jù),就是調(diào)用系統(tǒng)運動數(shù)據(jù)來判斷使用屏幕的場景。

況且每項數(shù)據(jù)都支持時間軸可視化圖表的方式呈現(xiàn),細節(jié)之處方見專業(yè),這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。


五、產(chǎn)品總結(jié)


想要產(chǎn)品脫穎而出,一定要嘗試將軟件與硬件結(jié)合,可以是陀螺儀、眼動追蹤、閃光燈等等,總之系統(tǒng)推出新的功能,就盡量把它用到產(chǎn)品里去。

不僅如此,看以上幾個產(chǎn)品,截圖模塊內(nèi)容都頂滿了,說明App想要展示的細節(jié)還有很多,從側(cè)面也能看到開發(fā)者們不留一塊“空白”的用心。


大廠產(chǎn)品固然很好,做法更符合大眾市場符合消費者需求,隨著不斷新增功能,產(chǎn)品變得越來越普適大眾,無產(chǎn)品獨特風(fēng)格可言。因為背后有龐大的員工要養(yǎng)活。

相反小團隊獨立開發(fā)者們沒有太多顧慮,一心想把一個點做好做緊致,哪怕只是計時,也要做的自己滿意為止,才會交卷,時代在變,匠人之心從未改變。值得致敬這些開發(fā)者們。




跳脫大廠的產(chǎn)品,來看看獨立開發(fā)者和小型開發(fā)團隊,一人即團隊,遇到各類問題都要獨自進行解決,可想而知工作量會有多大。

他們的產(chǎn)品或許沒有龐大的生態(tài)體系來滿足大眾用戶使用需求,但App Store十余年的發(fā)展,建立起細顆粒的開發(fā)環(huán)境,正是這種良性生態(tài),讓那些有光的開發(fā)者,隨心所欲讓心中的想法變成現(xiàn)實,讓夜里的小路燈照亮了整片街道。


就連開發(fā)者們都這么拼搏,作為設(shè)計師的我們哪還有抱怨之說,這么多好的產(chǎn)品擺在眼前,真是難得的學(xué)習(xí)機會,習(xí)他人之處,補自我之短。一起加油一起進步。


六、結(jié)語


設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺,還有好的體驗流程。不要讓用戶思考,這是每個設(shè)計師所追求的。 認真記錄產(chǎn)品細節(jié),了解背后的思考,也是不斷提升自己邏輯思維和表達能力的一種方式。

本期產(chǎn)品細節(jié)分析結(jié)束,點擊原文鏈接查看更多,我們下期再見!

作者:碳水Sir;公眾號:草蓉三石

本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:碳水sir
鏈接:https://www.zcool.com.cn/article/ZMTQwODQ3Mg==.html
來源:站酷

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


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


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


                       

4萬字B端產(chǎn)品拆解丨從0到1拆解小鵝通后臺設(shè)計

資深UI設(shè)計者

一個SaaS產(chǎn)品的后臺是如何設(shè)計的?作為知識付費行業(yè)的頭部SaaS服務(wù)商,從2016年誕生不到7年時間,小鵝通注冊客戶數(shù)已經(jīng)超過160萬,終端訪問用戶人數(shù)超過7.8億,毫無疑問成為了國內(nèi)知識付費規(guī)模最大的SaaS產(chǎn)品。
為什么拆解小鵝通的后臺?這是因為后臺設(shè)計往往被多數(shù)產(chǎn)品、開發(fā)甚至老板忽略,他們甚至認為后臺不需要設(shè)計,更不需要考慮用戶體驗,能把功能實現(xiàn)就可以交付。但我的觀點恰巧相反,我認為一個SaaS產(chǎn)品設(shè)計最大的挑戰(zhàn)和關(guān)鍵正是后臺。它決定了運營者的工作效率和操作體驗,即便你的功能再強大,如果用戶不會用、不愿意使用,那么用戶也不會續(xù)費,而續(xù)費,正如《SaaS創(chuàng)業(yè)路線圖》作者吳昊在他書中的觀點——SaaS的本質(zhì),就是續(xù)費。設(shè)計大偵探的第一個B端產(chǎn)品拆解,選擇了工作量最大、最繁雜的后臺,閱讀時間長,非常乏味,但如果你認真啃完,你對SaaS產(chǎn)品、后臺設(shè)計、B端設(shè)計不會再陌生。都說良藥苦口,這碗藥,廖爾摩斯先干為敬。
一、導(dǎo)讀
1. 內(nèi)容結(jié)構(gòu)
小鵝通的后臺拆解包含四個部分,分別為導(dǎo)讀、產(chǎn)品畫像、設(shè)計拆解和總結(jié),內(nèi)容篇幅超過4萬字,閱讀時間較長,所以拆分為4篇文章發(fā)布,建議收藏閱讀。




2. 適讀人群
第一類,產(chǎn)品經(jīng)理/UI/交互設(shè)計師,通過對小鵝通后臺產(chǎn)品的深度拆解,跳出執(zhí)行層,培養(yǎng)后臺設(shè)計的全局觀,從功能價值、應(yīng)用場景、業(yè)務(wù)流程和用戶體驗多維度去學(xué)習(xí)和思考一個頭部SaaS產(chǎn)品的后臺如何設(shè)計。
第二類,SaaS產(chǎn)品及知識付費從業(yè)者,獲取一份專業(yè)、完整、有深度價值的SaaS競品設(shè)計參考。




3. 分析模型
第一,增長模型。由戴夫·麥克盧爾提出,包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦,分別對應(yīng)用戶生命周期中的5個重要環(huán)節(jié),主要用于分析產(chǎn)品的功能價值。
第二,尼爾森十大原則。尼爾森十大可用性原則是界面設(shè)計中最基礎(chǔ)、最重要的設(shè)計原則,任何產(chǎn)品的設(shè)計,都可以通過這十個原則進行指導(dǎo)設(shè)計,這個原則主要用于診斷后臺設(shè)計的用戶體驗。
第三,其他設(shè)計基礎(chǔ)理論,包括費茨定律、格式塔原則、席克定律等,主要用于判斷后臺設(shè)計的易用性。




4. 拆解步驟
SaaS產(chǎn)品的后臺的設(shè)計不僅復(fù)雜,而且很多功能如果不親自體驗根本沒法理解,所以針對小鵝通后臺的拆解,我分為以下三個步驟進行
第一,親自上手實操體驗操作。對每一個功能版塊進行了全面的實操體驗,弄清楚了才開始拆解,絕非走馬觀花。
第二,結(jié)合官方幫助文檔創(chuàng)作。在體驗小鵝通產(chǎn)品的時候,有很多功能必須結(jié)合幫助文檔才能理解,甚至由于權(quán)限和內(nèi)容問題,部分功能沒法體驗,只能靠官網(wǎng)介紹來理解。針對每一個功能,嚴格按照「功能介紹-功能價值-使用場景-頁面內(nèi)容-核心功能-操作流程」的結(jié)構(gòu)去描述,旨在讓產(chǎn)品設(shè)計師看懂這個功能設(shè)計的價值和細節(jié)。
第三,深入思考產(chǎn)品設(shè)計細節(jié)。在拆解完每一個功能,我都會加入自己的思考,主要分為細節(jié)偵查(值得我們學(xué)習(xí)的細節(jié))、迭代建議(個人認為可以優(yōu)化的地方)、設(shè)計思考(某個功能帶給我的啟發(fā))、體驗陷阱(用戶體驗糟糕地方)和體驗小結(jié)(針對某個功能版塊進行全面總結(jié)),如果你瀏覽的是騰訊文檔,非常歡迎你可以以添加批注的形式和我一起討論。




5. 閱讀建議
由于內(nèi)容篇幅太長,強烈建議你可以申請小鵝通免費試用賬號一邊閱讀一邊體驗,這樣對整個后臺的設(shè)計才更深有體會。
二、產(chǎn)品畫像
1. 產(chǎn)品簡介
小鵝通是知識產(chǎn)品與用戶服務(wù)的數(shù)字化工具,包含知識店鋪、企業(yè)直播、企業(yè)培訓(xùn)、企微助手等多款產(chǎn)品,可以為有線上經(jīng)營、商業(yè)變現(xiàn)、私域運營、用戶服務(wù)等需求的企業(yè),提供一站式技術(shù)服務(wù),助力企業(yè)完成數(shù)字化升級。根據(jù)官方數(shù)據(jù)顯示,截止到2023年2月,小鵝通注冊客戶數(shù)已經(jīng)超過160萬,終端訪問用戶人數(shù)超過7.8億,是目前國內(nèi)知識付費客戶數(shù)量最多、規(guī)模最大的SaaS產(chǎn)品。




2. 用戶角色
用戶角色是指使用操作小鵝通后臺的用戶,主要分為運營者和店鋪銷售。
2.1 運營者
店鋪的運營者主要負責(zé)店鋪裝修、商品管理、用戶運營、數(shù)據(jù)分析、活動策劃、拉新引流等工作內(nèi)容,是小鵝通后臺主要使用的用戶群體。
2.2 店鋪銷售
店鋪銷售會通過企業(yè)微信和CRM工具使用小鵝通,不過他們主要通過企業(yè)微信的小鵝通應(yīng)用進行工作,很少涉及后臺操作。




3. 信息結(jié)構(gòu)
從信息結(jié)構(gòu)看,小鵝通后臺主要包括店鋪、圈子、直播、內(nèi)容、商品、營銷、交易、用戶、CRM、企微、數(shù)據(jù)、應(yīng)用、設(shè)置和服務(wù)14大版塊(感謝探友@miki對小鵝通后臺信息結(jié)構(gòu)的梳理)。




三、設(shè)計拆解
小鵝通的后臺非常龐大,包括了店鋪、圈子、直播、內(nèi)容、商品、營銷、交易、用戶等14大版塊,其中每一個版塊又包含若干功能,體驗起來非常繁雜,很容易陷入焦慮感。所以我按照一個知識店鋪從0到1裝修、添加內(nèi)容、店鋪推廣和運營的步驟把小鵝通的后臺拆分為8個服務(wù),然后再對每個版塊的內(nèi)容進行詳細拆解。




1. 初始設(shè)置
當(dāng)我從官網(wǎng)開通小鵝通的知識店鋪以后,進入到管理后臺,面對如此繁雜的功能,我想做的第一件事,就是對我的店鋪進行基礎(chǔ)設(shè)置,我得讓用戶知道這個店鋪叫什么名字。
1.1. 店鋪設(shè)置
「店鋪設(shè)置」為商家提供了店鋪的基本信息設(shè)置,比如店鋪信息、品牌形象、用戶賬號設(shè)置等。
①「店鋪信息」提供店鋪名稱、店鋪管理員和主營類目的設(shè)置,非?;A(chǔ)。
②「用戶賬號設(shè)置」 提供在使用系統(tǒng)過程中的各種登錄偏好設(shè)置,比如登錄設(shè)備限制,可自定義學(xué)員使用同一賬號在同一時間不同瀏覽器上同時登陸的情況
③「引導(dǎo)設(shè)置」提供了引導(dǎo)用戶關(guān)注公眾號、加入社群、收藏店鋪、添加客服和添加手機號等功能,對新用戶的首次訪問至關(guān)重要。
④「功能配置」支持用戶對商品銷量、播放量/瀏覽量、評論審核、嚴禁詞、視頻播放器、商品評價、買家申請售后等功能進行設(shè)置,可以看出系統(tǒng)非常完整和靈活。




迭代建議
用戶的短期記憶一般不會超過5秒,所以在體驗「設(shè)置」這個欄目的時候,我就發(fā)現(xiàn)小鵝通的功能太過繁雜,這對新手商家的入門有很高的學(xué)習(xí)成本。這個欄目的內(nèi)容其實可以拆分為基礎(chǔ)設(shè)置、高級設(shè)置這樣的階梯式內(nèi)容,有助于緩解新手用戶的焦慮。
1.2. 員工管理
「員工管理」是為商家提供新建員工、運營角色管理、員工權(quán)限設(shè)置的功能,這個欄目主要幫助商家管理自己的運營團隊。




1.3. 角色管理
「角色管理」包含了系統(tǒng)默認的多個角色,比如高級管理員、普通管理員、財務(wù)、老師、課程顧問、教務(wù)專員、銷售員等,并且可以對每個角色進行權(quán)限設(shè)置,另外系統(tǒng)也支持商家新增自定義角色,滿足商家各種運營需求。




1.4. 操作日志
「操作日志」記錄了整個系統(tǒng)管理員的登錄和操作內(nèi)容記錄,日志系統(tǒng)作為一個后臺系統(tǒng)必不可少的模塊,它可以記錄下系統(tǒng)所產(chǎn)生的所有行為,這有助于商家對系統(tǒng)運行監(jiān)管,并且可實時監(jiān)控員工在系統(tǒng)中的敏感操作,加強員工培訓(xùn)和管理。




1.5. 消息推送
「消息推送」是商家建立外部觸發(fā)最好的方式,這個版塊主要為商家提供各種場景的消息推送設(shè)置,小鵝通支持服務(wù)號代發(fā)、短信通知和APP推送通知三種類型。




1.6. 體驗小結(jié)
在對「設(shè)置」模塊的實操體驗中,感受到小鵝通的功能非常強大,甚至功能多得有點讓人透不過氣,這對新手商家來說,會產(chǎn)生很多的焦慮和壓力,我迫切需要一份最基礎(chǔ)、最簡潔的新手引導(dǎo)指南。這也突然讓我想起了當(dāng)我申請小鵝通體驗賬號時,客服專員向我多次提及給我做新手操作培訓(xùn),但我都婉拒了,也許對于一個頭部SaaS產(chǎn)品來說,客服專員的培訓(xùn)是客戶體驗過程中必不可少的一個環(huán)節(jié),但是我認為好的設(shè)計,其實不需要太多的學(xué)習(xí)成本。


2. 添加內(nèi)容
當(dāng)我把店鋪的基礎(chǔ)信息設(shè)置好以后,接下來,就需要為我的知識店鋪準備上架的內(nèi)容了。我找到了「內(nèi)容」這個模塊,發(fā)現(xiàn)小鵝通支持的內(nèi)容形式非常多,從視頻、音頻到圖文專欄,把常見的內(nèi)容形式都涵蓋了。
2.1. 內(nèi)容
「內(nèi)容」版塊包含內(nèi)容類型和互動工具兩個部分,商家可以在「內(nèi)容類型」選擇自己要發(fā)布的形式發(fā)布內(nèi)容,而「互動工具」則是幫助商家課程運營和學(xué)生管理的工具。
2.1.1. 內(nèi)容類型
小鵝通支持視頻、音頻、圖文、電子書、AI互動課、專欄、訓(xùn)練營和會員7種類型,幾乎覆蓋了常見的內(nèi)容形式。
2.1.1.1. 視頻
「視頻」是最常見的內(nèi)容形式之一,商家可以把錄制好的課程視頻上傳到這個欄目,就可以開始向?qū)W員銷售。




2.1.1.1.1. 新建視頻
「視頻」包含基本信息、課程內(nèi)容、所屬組合課、商品信息和狀態(tài)設(shè)置五個部分。
①在「基本信息」,商家需要填入商品名稱等基本信息;
②在「課程內(nèi)容」,管理員可對視頻的播放進行設(shè)置(比如課程未學(xué)完禁止拖動進度條和倍速播放等),還可以對內(nèi)容設(shè)置保護(禁止文字防復(fù)制和開啟防錄屏跑馬燈)。
③「所屬組合課」是提供商品和其他內(nèi)容(專欄、會員和訓(xùn)練營)關(guān)聯(lián),比如新添加的商品屬于某個付費專欄,那么就可以關(guān)聯(lián),提升效率。
④在「商品信息」,可以設(shè)置商品的售賣方式,支持免費、付費、加密和指定學(xué)員。針對付費視頻,還可以支持片段試看,提升付費轉(zhuǎn)化。
⑤「狀態(tài)設(shè)置」是指在添加完商品后,商家可選擇立即上架、定時上架或暫不上架,比如商家在準備某個促銷活動的時候,可以提前編輯商品,設(shè)置定時發(fā)布即可。




2.1.1.1.2. 視頻管理
①「視頻」添加成功后,在「視頻」欄目頁,可以查看商品的詳情,對商品進行編輯,分享、下架、復(fù)制和刪除等。
②「分享」是指商家可以把商品的鏈接、二維碼等信息直接復(fù)制分享給好友,同時也起到了預(yù)覽的作用,這是一個公用的組件,在其他商品和版塊同樣適用。




2.1.1.1.3. 視頻詳情頁
「視頻詳情頁」主要分為課程設(shè)置、運營設(shè)置、學(xué)員列表和數(shù)據(jù)分析四塊內(nèi)容。
①「課程設(shè)置」就是對課程的相關(guān)信息進行設(shè)置,相當(dāng)于對內(nèi)容進行二次編輯。
②「運營設(shè)置」從四個解為一個通用的表單;「CRM分配」是指可以把瀏覽課程的學(xué)員自動分配給企業(yè)的CRM銷售人員;「私域引流」是指可以引導(dǎo)用戶掃碼加群,提高課程服務(wù)質(zhì)量和商家對學(xué)員的運營能力。




③在「學(xué)員列表」,可以查看當(dāng)前購買商品的所有學(xué)員信息,包括購買時間、學(xué)習(xí)進度等信息,系統(tǒng)也支持商家手動添加可學(xué)習(xí)課程的學(xué)員。




④在「數(shù)據(jù)分析」欄目,可以查看商品的「學(xué)習(xí)效果」和「交易數(shù)據(jù)」,比如商品的訂閱人數(shù)、學(xué)習(xí)人數(shù)、完課率、學(xué)習(xí)趨勢圖等,通過這個欄目,可以幫助商家對用戶的學(xué)習(xí)進行深入的分析,提升運營效率。




設(shè)計思考
在初次添加店鋪內(nèi)容的時候,對很多功能板塊都不熟悉,比如CRM分配、超級會員等,雖然能感受到小鵝通系統(tǒng)的強大,但對于剛?cè)胧值纳碳?,則會產(chǎn)生很深的焦慮,不知道這些功能如何設(shè)置和使用,也無法感受到這些功能對店鋪運營的幫助。
2.1.1.2. 音頻
「音頻」也是一種常見的內(nèi)容形式,可以設(shè)計講書、廣播等產(chǎn)品,用戶可以在地鐵、公交等場景收聽?!敢纛l」的新建流程、商品管理功能和「視頻」相似,我們不再贅述。




2.1.1.3. 圖文
「圖文」也是一種常見的內(nèi)容形式,可以為學(xué)員提供付費閱讀等類型產(chǎn)品,「圖文」的新建流程、商品管理功能和「視頻」相似,我們不再贅述。




迭代建議
付費閱讀其實是知識創(chuàng)作者非常喜歡的方式,小鵝通雖然設(shè)計了這個功能,但前端的界面設(shè)計并沒有根據(jù)圖文內(nèi)容傳播的特點設(shè)計,所以用戶體驗并不理想,顯得非常雞肋。
2.1.1.4. 電子書
「電子書」對于出版社等用戶群體,是一個剛需功能。在上傳電子書文件以后,系統(tǒng)可以自動解析書籍章節(jié),輕松完成電子書在線管理和售賣。其次在店鋪前端,用戶可在手機端閱讀,支持區(qū)域觸摸翻頁、章節(jié)試讀、劃線、書簽、更換背景等功能,閱讀體驗非常友好?!鸽娮訒沟男陆鞒?、商品管理功能和「視頻」相似,我們不再贅述。




2.1.1.5. AI互動課
隨著近兩年AI技術(shù)的發(fā)展,小鵝通也加入了AI互動課的內(nèi)容形式。商家可以利用AI互動形式的課程內(nèi)容,搭建具有沉浸式場景的課程學(xué)習(xí)形式,實現(xiàn)個性化、趣味性、強互動的授課形式,不過搭建成本相對較高,更適合于有特定需求的客戶。




2.1.1.5.1. 新建流程
①「AI互動課」的新建流程分為三個步驟,分別是填寫基本信息、制作課程內(nèi)容和填寫售賣信息。
②在「基本信息」,商家需要輸入課程名稱和詳情頁等信息。
③進入「課程內(nèi)容」以后,左側(cè)提供了內(nèi)容組件(文字、圖片、音頻和視頻)、題目組件(單選題、多選題、不定項、判斷題和填空題)和其他組件(章節(jié)標(biāo)題和附件),商家可以根據(jù)自己的需求加入組件進行設(shè)計。
④商家在填寫售賣信息以后,就可以進行上架銷售。




2.1.1.6. 專欄
2.1.1.6.1. 專欄
「專欄」可以將多個單品課程打包成系列課銷售,比如常見的付費專欄、連載小說、有聲讀物等?!笇凇菇⒑?,進入詳情頁,可以在「目錄管理」添加專欄商品,還可以對專欄的商品設(shè)置排序和設(shè)置試看。其他功能和「視頻」相似,我們不再贅述。




2.1.1.6.2. 大專欄
「大專欄」就是「專欄」的父級,可以將多個專欄進行打包,組合成專項學(xué)習(xí)專題,打造學(xué)員深度系統(tǒng)學(xué)習(xí)方案。




2.1.1.7. 訓(xùn)練營
「訓(xùn)練營」相比「課程」,是一個動態(tài)的服務(wù)。商家根據(jù)某個學(xué)習(xí)主題,集中式、計劃式、督學(xué)式地學(xué)習(xí)?!赣?xùn)練營」也是一種常見的引流手段,通過打卡、簽到、學(xué)習(xí),可以快速幫助商家進行傳播拉新。




2.1.1.7.1. 新建訓(xùn)練營
①商家建立訓(xùn)練營以后,需要建立營期才能開始招生。
②營期的建立分為營期基礎(chǔ)信息、營期課程和售賣信息三個步驟。在「營期基礎(chǔ)信息」,需要設(shè)置開課信息,包括招生時間和開課時間;其次支持設(shè)置三種目錄解鎖模式,自由模式(無門檻自由學(xué)習(xí))、闖關(guān)模式(完成任務(wù)才能繼續(xù)學(xué)習(xí))和日期解鎖(每天只能學(xué)習(xí)一定數(shù)量的課程)。




③在「營期課程」,商家需要添加訓(xùn)練營的學(xué)習(xí)任務(wù),可以加入店鋪的課程內(nèi)容,還可添加打卡、考試等助學(xué)工具,增強督學(xué)效果,提升用戶活躍度。




2.1.1.8. 會員
「會員」是商家可以打包特定商品內(nèi)容(包括專欄和商品)進行銷售,它的功能流程和「專欄」功能相似,在建立「會員」后,進入詳情頁的目錄管理才能添加課程商品。這個功能可以幫助商家聚集一定量級的忠實粉絲,實現(xiàn)店鋪的穩(wěn)定收入。




設(shè)計討論
不知道是不是語義的問題,我對「會員」這個功能有很多不理解,首先感覺和「專欄」很相似,其次和「超級會員」也有點傻傻分不清楚,所以在體驗的過程中,花了很多時間去學(xué)習(xí)研究。
2.1.1.9. 體驗小結(jié)
從小鵝通支持的7種內(nèi)容形式來看,它幾乎覆蓋了所有的知識付費內(nèi)容,視頻、音頻、電子書、專欄,甚至還有AI互動課。這足以滿足各種知識用戶人群的內(nèi)容要求,不管你是銷售錄播課、音頻課還是文字專欄,小鵝通真正的實現(xiàn)了——一分鐘擁有自己的知識店鋪。
2.1.2. 互動工具
「互動工具」包含了打卡、考試、練習(xí)、作業(yè)本、題庫、證書、表單、活動管理、隨堂檢測、測試活動和付費問答11種工具。
2.1.2.1. 打卡
「打卡」是一個提升用戶活躍度的運營工具,通過持續(xù)的打卡輸出,不僅可以幫助學(xué)員養(yǎng)成一些比較好的行為習(xí)慣,還可以幫助商家提升用戶付費轉(zhuǎn)化?!复蚩ā狗譃槿諝v打卡、作業(yè)打卡和闖關(guān)打卡三種形式。




2.1.2.1.1. 日歷打卡
「日歷打卡」是以“天”為單位的打卡模式,學(xué)員需要每天在有效時段內(nèi)提交打卡內(nèi)容,比如每日英語學(xué)習(xí)打卡、早睡打卡等。
a. 新建流程
①「日歷打卡」的建立有兩個步驟,分別是設(shè)置打卡信息和打卡介紹設(shè)置。在「設(shè)置打卡信息」,分為基本信息、打卡規(guī)則和其他設(shè)置三個內(nèi)容。「基本信息」可以設(shè)置打卡的起止日期、打卡時段、提醒方式、每日打卡次數(shù)、可補打卡次數(shù)、參與條件和打卡規(guī)則等;「打卡規(guī)則」主要是設(shè)置用戶打卡的內(nèi)容類型和范本;「其他設(shè)置」可以幫助商家關(guān)聯(lián)超級會員和指定商品文件。
②在「打卡介紹設(shè)置」步驟,需要添加打卡的封面圖和詳情頁介紹,完成后打卡建立添加成功。




細節(jié)偵查
如果不是親自新建一次「打卡」,你根本無法理解一個小小的「打卡」功能竟然會如此復(fù)雜,包含的場景和功能竟然會有這么多。
b. 打卡詳情頁
「打卡」建立以后,可以進入打卡的詳情頁,主要分為日記管理、任務(wù)管理、學(xué)員管理、分組管理、助教管理、激勵設(shè)置、運營設(shè)置和數(shù)據(jù)分析8塊內(nèi)容。
①「日記管理」主要指用戶在前端的日記打卡,老師可以根據(jù)學(xué)員的日記進行評論、置頂、加精和刪除,還支持批量導(dǎo)出日記。




②「任務(wù)管理」是指給學(xué)員布置學(xué)習(xí)任務(wù),幫助學(xué)員更好地學(xué)習(xí)。




③「學(xué)員管理」主要提供對打卡用戶的管理,比如查看學(xué)生打卡詳細資料和暫停打卡等。
④「分組管理」支持老師對打卡的學(xué)員進行分組,提高管理效率。
⑤「助教管理」支持老師添加助教,助教可以對學(xué)生打卡進行點評、刪除和精選等操作。




⑥「激勵設(shè)置」是指為了鼓勵學(xué)生堅持打卡,老師可以設(shè)置證書、返學(xué)費和積分這樣的形式來吸引學(xué)生參與(證書和積分我們在下面會單獨講解)?!阜祵W(xué)費」是一個打卡活動中常見的營銷方式,學(xué)員完成指定的任務(wù)就可以拿到打卡費用的返現(xiàn),這樣不僅可以篩選精準用戶,也可以提高用戶的打卡積極性。




⑦「運營配置」主要包含配置日簽和邀請卡兩個部分?!溉蘸灐故且环N吸引用戶傳播的手段,通過個性化和精美的日簽設(shè)計,不僅可以體現(xiàn)活動特色,還能激發(fā)學(xué)員的收藏欲望,最終吸引用戶主動傳播,拉新引流?!秆埧ā挂仓饕菫榱思ぐl(fā)學(xué)生傳播引流,不僅設(shè)計了精美的邀請卡片,還支持老師自定義設(shè)計,以及直接引流自私域社群。




⑧「數(shù)據(jù)分析」是對整個打卡的數(shù)據(jù)進行全面的分析統(tǒng)計,包括當(dāng)天打卡人數(shù)、打卡次數(shù)、新增學(xué)員、點贊數(shù)、評論數(shù)、加精數(shù)等等,通過精準的數(shù)據(jù)分析,可以為商家運營方案提供支撐。




2.1.2.1.2. 作業(yè)打卡
「作業(yè)打卡」是以布置“作業(yè)”的形式打卡,這種打卡方式可以加強教學(xué)質(zhì)量的檢驗,讓學(xué)生產(chǎn)生完成作業(yè)的緊迫感,督促學(xué)生進行學(xué)習(xí)。
2.1.2.1.3. 闖關(guān)打卡
「闖關(guān)打卡」是以“關(guān)卡”作為單位的打卡模式,這種打卡形式由于自身具備游戲的挑戰(zhàn)性,所以能夠有效刺激學(xué)生為了拿到更好的成績而努力打卡,從而提升用戶參與度和積極性。
2.1.2.2. 考試
「考試」是用來檢測用戶學(xué)習(xí)效果的學(xué)習(xí)工具,商家可以通過考試情況得到學(xué)習(xí)效果反饋,可根據(jù)考試反饋進行后續(xù)課程優(yōu)化。




2.1.2.2.1. 新建考試
「考試」的建立分為三個步驟,分別是設(shè)置考試信息、選擇試卷和發(fā)布。
①「設(shè)置考試信息」又分為基本信息、信息采集、考試設(shè)置、題目分值和結(jié)果設(shè)置五個內(nèi)容?!富拘畔ⅰ剐枰钊肟荚嚨幕拘畔?,選擇需要關(guān)聯(lián)的課程;在「考試設(shè)置」,老師可設(shè)置參考考試的時間、考試時長、考試次數(shù)等;在「結(jié)果設(shè)置」,可以選擇考試完就展示成績、題目和答案。
②在「選擇試卷」步驟,可以創(chuàng)建新試卷,也可以從試卷庫中選擇已設(shè)置好的試卷,其次還可以設(shè)置考試通過分數(shù)的成績。
③添加試卷以后,管理員可選擇立即發(fā)布、定時發(fā)布以及開啟微信服務(wù)號通知,幫助學(xué)生可及時獲取考試的消息通知。




2.1.2.2.2. 考試管理
在學(xué)生開始考試以后,后臺會生成考試數(shù)據(jù),商家可查看考試的詳細情況,包括批閱、統(tǒng)計分析、老師管理、設(shè)置證書等。




2.1.2.3. 練習(xí)
「練習(xí)」?jié)M足了商家售賣已有題庫題目,為學(xué)員提供自主刷題練習(xí)工具的需求,而通過反復(fù)練習(xí),可以提高學(xué)員學(xué)習(xí)效果,有助于提升用戶的活躍度和留存率。




2.1.2.3.1. 新建練習(xí)
「練習(xí)」的建立包含基本信息、練習(xí)設(shè)置、商品信息、私域引流和信息采集五個步驟。
①在「練習(xí)設(shè)置」,管理員需要關(guān)聯(lián)題庫,設(shè)置答題的出題順序(包含隨機和按順序),題目數(shù)量和考試難度;
②「商品信息」可以設(shè)置「練習(xí)」是否付費,或需要參與關(guān)聯(lián)課程才能學(xué)習(xí);「私域引流」和「信息采集」是公共組件,我們在上文已經(jīng)解讀過,不再重復(fù)。




2.1.2.3.2. 練習(xí)管理
學(xué)生開始練習(xí)以后,后臺可查看學(xué)員的練習(xí)數(shù)據(jù),包括練習(xí)參與人數(shù)、每道題目的正確率等,這些數(shù)據(jù)可以幫助商家及時調(diào)整運營方案,或針對性對學(xué)生進行講解授課。




2.1.2.4. 作業(yè)本
「作業(yè)本」主要幫助老師和學(xué)員在課程后續(xù)實現(xiàn)互動和答疑,不僅可以加強學(xué)生對知識的學(xué)習(xí),幫助老師了解學(xué)員學(xué)習(xí)的狀態(tài),更能提升用戶活躍度。




2.1.2.4.1. 新建流程
①管理員需要先建立一個「作業(yè)本」,這個流程比較簡單,輸入名稱以后,選擇關(guān)聯(lián)課程,還支持關(guān)聯(lián)「圈子」(一個用戶運營的重要功能),老師布置的作業(yè)會在課堂互動和作業(yè)動態(tài)顯示。




②「作業(yè)本」建立以后,管理員可以布置「作業(yè)」?!缸鳂I(yè)」分為手動布置(新建)和題庫布置(從現(xiàn)有的題庫中直接選擇)?!甘謩硬贾谩剐枰斎胱鳂I(yè)名稱和作業(yè)內(nèi)容,支持上傳圖片和音頻,填寫完成后,作業(yè)創(chuàng)建成功。




2.1.2.5. 題庫
「題庫」需要配合作業(yè)、考試和練習(xí)場景使用,為這些工具提供數(shù)據(jù)支撐。




2.1.2.5.1. 題庫
①「題庫」支持添加單選題、多選題、不定項選擇題、判斷題、填空題、問答題和材料題等多種類型。添加也非常簡單,管理員選擇好題目類型以后,填入內(nèi)容就能新建成功。
②「批量導(dǎo)入」是為管理員提供批量輸入題目的工具,按照系統(tǒng)提供的輸入范例格式,系統(tǒng)可以一鍵識別出題目,輕松錄入。
③「Excel導(dǎo)入」也是一種常見的導(dǎo)入形式,不過需要按照系統(tǒng)標(biāo)準的批量導(dǎo)入模版,才能實現(xiàn)批量導(dǎo)入。




2.1.2.5.2. 試卷庫
①「試卷庫」是題庫中題目的組合,可以看作是「題庫」的父級。管理員可按照自己的需要把題目手動或自動組合成試卷,在考試、作業(yè)等場景中就能及時調(diào)用,提升工作效率。
②「試卷庫」的新建流程包括設(shè)置試卷信息和組卷兩個步驟。在填寫完試卷基礎(chǔ)信息以后,在「組卷」步驟,可以選擇「手動選題」和「系統(tǒng)抽題」?!甘謩舆x題」就是管理員從題庫中逐一手動選擇,準確率較高,而「系統(tǒng)抽題」則是系統(tǒng)根據(jù)管理員的題型設(shè)置隨機抽題,具有隨機性。




2.1.2.6. 證書
「證書」可以為學(xué)生帶來成就感,激勵學(xué)生堅持完成任務(wù),當(dāng)學(xué)員通過考試、完成作業(yè)以后,管理員可以向?qū)W員頒發(fā)證書,最終提升用戶活躍度。




①「證書」的建立包含基本信息、發(fā)放規(guī)則、證書樣式、證書信息、發(fā)證信息和證書分享六個內(nèi)容。
②在「基本信息」,管理員可選擇證書類型,包括考試證書、打卡證書、圈子證書等,另外,證書需要關(guān)聯(lián)對應(yīng)的考試。
③在「證書樣式」,系統(tǒng)提供了數(shù)十種系統(tǒng)樣式,管理員可根據(jù)自己的偏好和品牌VI選擇,其次也支持自定義樣式,上傳設(shè)計好的背景圖片即可生成。
④在「證書信息」,管理員可以編輯證書標(biāo)題、獲獎文案等,還可以加入鼓勵文案,吸引用戶傳播分享。
⑤在「發(fā)證信息」,可加入發(fā)證日期、證書編號和發(fā)證印章等,突出真實性。
⑥在「證書分享」,可以添加分享語和二維碼,通過學(xué)生的分享,為商家拉新引流。




2.1.2.7. 表單
「表單」是運營者用于發(fā)起問卷調(diào)研,自定義收集用戶信息的社群功能。它可以幫助商家收集用戶需求和反饋信息,通過對用戶的調(diào)研分析,進一步設(shè)計和優(yōu)化運營策略,從而為用戶提供更精準的服務(wù)




2.1.2.7.1. 新建流程
「表單」的建立分為三個步驟,分別是編輯表單、表單設(shè)置和表單發(fā)布。
①「編輯表單」分為三塊內(nèi)容,左邊是組件和外觀,管理員需要從這里選擇內(nèi)容,比如單選、文本框等?!附M件」包含基礎(chǔ)組件(單選、多選、下拉菜單、文本框等)、描述分割(文本描述、圖片、分隔欄)和個人信息(姓名、性別、年齡等),「外觀」可以設(shè)置表單底色、標(biāo)題、選項內(nèi)容字體大小和顏色。選中內(nèi)容以后,中間為表單編輯區(qū)域,可以實現(xiàn)可視化編輯,包括調(diào)整順序、刪除等。右側(cè)可以設(shè)置表單的字段和邏輯,包含基礎(chǔ)設(shè)置、選項設(shè)置、邏輯顯示規(guī)則等。
②在「表單設(shè)置」,可以設(shè)置用戶提交的次數(shù)、回收方式(支持定量、定時回收)、微信分享信息和私域引流。
③在最后一步「表單發(fā)布」,需要關(guān)聯(lián)對應(yīng)的內(nèi)容,比如相關(guān)視頻、課程、專欄、圈子、訓(xùn)練營等內(nèi)容,關(guān)聯(lián)成功后,表單就可以發(fā)布。




2.1.2.8. 活動管理
在店鋪的運營中,舉辦線下活動必不可少,「活動管理」就是為了解決這個場景而設(shè)計。管理員可以使用「活動管理」功能組織線下活動,一站式完成線上發(fā)布活動信息、用戶報名、收集報名用戶信息、管理報名情況、現(xiàn)場簽到等流程。




2.1.2.8.1. 發(fā)布活動
「活動」的發(fā)布包含基本信息、票務(wù)設(shè)置、座位設(shè)置、報名信息設(shè)置和私域引流六個部分。
①在「基本信息」,管理員需要填入活動的名稱、地點、時間、關(guān)聯(lián)的課程等信息;②在「票務(wù)設(shè)置」,可以添加免費票和收費票,設(shè)置票種的展示規(guī)則等;③「座位設(shè)置」部分,還可以開啟自動排座,活動座位由系統(tǒng)自行分配;④在「報名信息設(shè)置」,管理員可以根據(jù)自己的需求靈活配置用戶報名的信息,非常方便;⑤「私域引流」可以幫助管理員在活動報名前后將潛在用戶引流至商家的私域流量池。




2.1.2.8.2. 名單管理
活動建立成功后,商家就可以發(fā)布活動,「名單管理」就是活動報名的詳細數(shù)據(jù),包含報名管理和簽到管理。




a. 報名管理
「報名管理」主要包含了所有活動報名的數(shù)據(jù)管理,比如待審核、報名成功等,管理員可以在這個欄目查看報名用戶的詳細信息。
b. 簽到管理
「簽到管理」有兩種形式,一種是用戶自行掃碼簽到,系統(tǒng)會生成活動的二維碼,管理員向用戶展示掃碼即可;另一種是商家主動掃碼核銷,工作人員進入票券核銷頁面以后,就可以對報名的用戶進行掃碼核銷。
2.1.2.9. 隨堂檢測
「隨堂檢測」是一個協(xié)助老師校驗學(xué)生學(xué)習(xí)質(zhì)量的輔助工具,它不僅可以提升學(xué)生對課堂知識的學(xué)習(xí)和鞏固,還能有效防止學(xué)員掛機學(xué)習(xí),提升學(xué)習(xí)效率。




2.1.2.10. 測試互動
「測試互動」是一個通過設(shè)置輕量級的在線趣味測試,刺激用戶活躍的社群玩法。運營者可根據(jù)用戶特性設(shè)計測試題目,激發(fā)用戶好奇心,活躍已沉淀的粉絲,增強學(xué)習(xí)過程的互動樂趣,同時可以設(shè)置根據(jù)測試結(jié)果給用戶推薦課程。




2.1.2.10.1. 新建流程
「測試互動」的新建包含了設(shè)置測試信息、添加題目和結(jié)果頁設(shè)置三個步驟。
①在「設(shè)置測試信息」,運營者輸入測試名稱、簡介和設(shè)置有效時間;
②在「添加題目」步驟,需要加入測試活動的題目,支持單選和多選;
③在「結(jié)果頁」設(shè)置,需要設(shè)置測評結(jié)果,并可以向用戶推薦指定的課程,進行付費轉(zhuǎn)化。




2.1.2.11. 付費問答
「付費問答」是一個為商家增加變現(xiàn)的工具,學(xué)生付費向老師提問,獲取一對一答疑?!父顿M問答」需要先創(chuàng)建一個問答專區(qū)才能開啟,有點像建立一個問答專欄。當(dāng)用戶在前端購買問答服務(wù)以后,運營者可以在手動邀請答主進行答疑。其次這個功能也設(shè)計得很完善,還支持設(shè)置用戶圍觀價格和圍觀分成。




2.1.2.12. 體驗小結(jié)
在體驗完這11個互動工具以后,我開始感受到小鵝通這個工具的魅力。從引流到激活、從留存到傳播,這11個工具幾乎能滿足一個知識店鋪運營多維度的需求。而讓我最驚嘆的是小鵝通產(chǎn)品的設(shè)計細節(jié),比如一個普通的打卡功能,如果只是從前端體驗看,你根本無法想象這些小功能的后臺設(shè)置其實有這么復(fù)雜。而小鵝通為了降低商家的運營成本,幾乎支持每一個功能版塊自定義,給我最大震撼的就是「證書」這個功能,不僅提供多種證書設(shè)計樣式,連證書內(nèi)容的每一個字段,都可以在后臺自行輸入,無需任何加工,實在是太方便了。
2.2. 商品
「商品」主要指實物商品和服務(wù)類商品的發(fā)布和管理,如果商家有周邊商品,可以通過實物商品來上架,服務(wù)類商品則是指虛擬服務(wù),比如1V1咨詢、設(shè)計指導(dǎo)這樣的虛擬服務(wù)?!干唐贰箼谀康墓δ鼙容^簡單,我們就不過多贅述,大家可以親自體驗。




感謝閱讀,小鵝通的產(chǎn)品拆解第一部分就到這里,下一篇我們將會繼續(xù)拆解小鵝通后臺!

作者:設(shè)計大偵探
鏈接:https://www.zcool.com.cn/article/ZMTUxODA1Ng==.html
來源:站酷

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


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


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

                         

分析五種消息通知

資深UI設(shè)計者

通知是許多產(chǎn)品中不可或缺的一部分,它用于傳遞產(chǎn)品的一些新的信息狀態(tài),幫助用戶能夠及時收到信息。
本文將討論五種類型的 UI 通知,以及何時以及如何使用它們的基本規(guī)則。



一、什么是通知?

通知是產(chǎn)品能夠與用戶及時同步信息變化,及時發(fā)送重要通知,例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等。
消息通知是為產(chǎn)品賦能,為用戶提供幫助,便于快速獲取對應(yīng)的通知信息,例如產(chǎn)品更新、信息提醒、互動提醒、新消息通知等,在 App 和網(wǎng)頁應(yīng)用中最常見的信息交換方式則是消息通知。
消息作為一種信息交換方式,抽象其過程,即為“在達到某一觸發(fā)條件下,由發(fā)送方發(fā)送消息給到接收方,接收方可針對此條消息提供反饋”。



二、通知的組成

基礎(chǔ)的通知模塊通常有標(biāo)題、內(nèi)容、入口、徽標(biāo)、識別圖標(biāo)五個元素構(gòu)成



標(biāo)題區(qū)域:用戶傳遞消息的核心區(qū)域,整個通知的信息都是圍繞標(biāo)題進行,一般標(biāo)題以簡短精煉為主,讓用戶在最短時間了解到關(guān)鍵信息。
內(nèi)容區(qū)域:主要描述更加詳細的通知內(nèi)容,當(dāng)然這里的內(nèi)容也不建議超過2行,并且不要重復(fù)標(biāo)題中內(nèi)容
操作區(qū)域:通知分為可點擊類和不可點擊類,當(dāng)通知模塊需要用戶點擊時,視覺上應(yīng)該更加具象,如按鈕、箭頭,不要讓用戶產(chǎn)生思考。
圖標(biāo)圖片:有意義的圖像可以強化通知的內(nèi)容,例如,如果你將收到的消息通知用戶,你可以包含發(fā)件人的頭像。

三、通知的類型

通知的模式根據(jù)不同的場景也會有不同類型,接下來將一一講解這5種通知類型,以及使用場景。



1. 徽標(biāo)通知

徽標(biāo)是一個小的填充橢圓形,可以出現(xiàn)在應(yīng)用程序圖標(biāo)上并指示未看到的更新?;諛?biāo)可以有一個數(shù)字,用于通知用戶未讀通知的數(shù)量。用戶檢查更新后,徽章會從應(yīng)用程序圖標(biāo)中消失,并在新通知到達時再次出現(xiàn)。



優(yōu)點

感知:它可以對用戶產(chǎn)生積極的影響,在某些情況下,用戶可以將徽章視為有價值的獎勵,例如,徽章會通知用戶他們在社交網(wǎng)絡(luò)上收到新的點贊、評論,Nir Eyal曾在他的書“Hooked”中描述了這種心理效應(yīng)。


視覺:紅色作為警惕色,用戶看到后會更具有點擊欲望,相對產(chǎn)品的一些數(shù)據(jù)指標(biāo)會有對應(yīng)的提升



缺點

需要用戶采取額外的行動,徽章本身不是通知,這是通知的警報,它只是說明了用戶有新更新的事實,用戶必須單擊或點擊帶有徽章的圖標(biāo)才能看到實際消息,紅色為強干擾元素,對一些具有強迫癥的用戶很不友好,在體驗上會有一定的影響

何時使用

一般用戶消息的通知,例如系統(tǒng)通知、社交中的點贊、評論、回復(fù)等內(nèi)容



2.推送通知

推送通知是出現(xiàn)在移動設(shè)備的鎖屏上并引起很多關(guān)注的通知。



優(yōu)點

很難讓用戶忽略該推送通知,如果用戶不進行處理,會長時間浮動在手機上

缺點

由于系統(tǒng)上app很多,會導(dǎo)致用戶對該類的通知處于麻木狀態(tài),推送通知的效果不是很強
如果過度使用,頻繁的推送通知,即使它們很有價值,也可能會惹惱用戶

何時使用

推送通知適用于重要且時間敏感的更新(即用戶設(shè)置的日歷提醒或警報、航班延誤或已交付訂單的更新),在您發(fā)送推送通知之前,您需要確保您將與用戶共享的信息是有價值的和時效性的,否則,最好使用其他類型的通知。



建議

a、不要使用推送通知來提示用戶對應(yīng)用進行評分
b、不建議將推送通知用于促銷或廣告
c、不要使用推送通知來鼓勵用戶返回應(yīng)用,例如“好久沒見到你了,是否想念了呢”通知不會為用戶提供太多價值,需要向用戶明確說明他們應(yīng)該返回應(yīng)用程序的目的
d、允許用戶更改通知行為



3. 電子郵件通知

用戶會收到一封電子郵件,其中包含有關(guān)更新的詳細信息,不過這類通知目前在國外的一些網(wǎng)站使用頻率比較高,根據(jù)習(xí)慣來講,國外更多的還是習(xí)慣用郵件的方式作為重要信息的交流方式,相比之下國內(nèi)使用郵件來傳遞信息的頻率略低



優(yōu)點

給用戶更多的控制權(quán),由用戶決定是否要訂閱電子郵件,如果電子郵件標(biāo)題足夠好,用戶可能無需閱讀電子郵件就可以理解上下文。

缺點

周期長,國內(nèi)用戶可能幾個月甚至1年都看不了一次郵件,此外,電子郵件可能會在用戶收件箱中丟失(即轉(zhuǎn)到垃圾郵件文件夾)
它需要切換上下文,當(dāng)應(yīng)用程序發(fā)送需要用戶操作的電子郵件通知時,用戶必須切換到電子郵件應(yīng)用程序才能完成操作,這可能不是很方便,尤其是當(dāng)您與移動設(shè)備上的應(yīng)用程序交互時。

何時使用

需要安全性時,想要使用電子郵件通知有兩個原因,首先,出于安全目的,你可能希望將電子郵件用作單獨的通道(即,當(dāng)用戶嘗試登錄服務(wù)時,應(yīng)用程序會發(fā)送一封電子郵件,其中包含有關(guān)新登錄嘗試的通知)。4.Toast通知



4.Toast通知

Toast 屬于一種及時性通知,當(dāng)用戶進行操作時,及時給出反饋,通常在移動端顯示在界面的上、中、下三個位置,而web端通常顯示在頂部區(qū)域,toast持續(xù)一定時間后會自動消失,對用戶的打擾較小



優(yōu)點

Toast 是與當(dāng)前頁面的內(nèi)容強關(guān)聯(lián),用戶無需離開當(dāng)前頁面就能看到反饋消息
不會中斷用戶操作,出現(xiàn)時間短,對操作上無影響

缺點

丟失信息的風(fēng)險,用戶注意力不集中時,會出現(xiàn)漏掉關(guān)鍵性信息的情況

何時使用

Toast 是一種操作狀態(tài),例如,消息發(fā)送時可以在消息發(fā)送成功時顯示toast“發(fā)送成功”

建議

不要使用 toast 來提示與當(dāng)前用戶操作無關(guān)的信息
不要將 toast 用于錯誤消息,由于 toast 會在短時間內(nèi)消失,因此某些用戶可能無法閱讀錯誤消息

5.全屏覆蓋/模態(tài)窗口

全屏覆蓋/模態(tài)窗口是出現(xiàn)在應(yīng)用內(nèi)容頂部并要求用戶做出決定的對話框窗口,這種類型的通知會在所有應(yīng)用功能出現(xiàn)時禁用它們并保留在屏幕上,直到用戶完成所需的操作。



優(yōu)點

用戶在訪問應(yīng)用程序時將 100% 看到通知,無法避免此通知。

缺點

它會阻礙用戶當(dāng)前的操作,迫使用戶操作通知相關(guān)的內(nèi)容

何時使用

全屏覆蓋/模式窗口應(yīng)僅用于需要用戶操作的最關(guān)鍵的系統(tǒng)更新,例如,它可能是阻止應(yīng)用程序正常運行的錯誤或需要特定用戶決策的關(guān)鍵信息。

四、總結(jié)

1.給用戶選擇

詢問用戶是否想接收特定類型的信息,當(dāng)用戶明確選擇接收某些類型的通知時,說明他們的意愿更強,比產(chǎn)品強制傳輸消息效果較好



2.減少重復(fù)通知

一些流氓軟件會發(fā)送一些系統(tǒng)通知,用戶無反饋后,還是會重復(fù)發(fā)送,特別是一些短信push,建議用戶沒有回復(fù)時,也不要發(fā)送后續(xù)通知,大部分人的本性是不愿意被脅迫做一些事。



3. 避免敏感信息

不要在通知中包含敏感信息,例如一些文化特殊性、地域的特殊性等,防止出現(xiàn)觸及別人痛處的一些文字語言


作者:愛吃貓的魚___
鏈接:https://www.zcool.com.cn/article/ZMTQ3MDE0NA==.html
來源:站酷

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

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

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

                       

一篇文章學(xué)會兩個體驗?zāi)P?/a>

資深UI設(shè)計者

一、雙鉆模型

它的作用是什么

雙鉆模型是設(shè)計師在創(chuàng)作過程中可以循環(huán)復(fù)用的系統(tǒng),他不僅可以在我們設(shè)計界面時運用到,在一些數(shù)據(jù)提升優(yōu)化等方面同樣適用,雙鉆模型可以使設(shè)計更加理性,它能夠在我們做項目時思維更加具有邏輯性,我們設(shè)計過程中更多的方法還是遇到問題,直接輸出解決方案,而該模型可以讓我們的思考過程更加具象化、合理化,他與常規(guī)的思考方式不同,該模型更加注重問題的本質(zhì),全流程圍繞問題去解決問題,并且在大的項目上能夠提升團隊效率,與其他模型不同,該模型的適用場景更加廣泛。

什么是雙鉆模型

雙鉆模型是由2005年英國設(shè)計委員會正式公布并進行驗證,但是在之前BDC就提到過雙鉆模型,而我們現(xiàn)在看到的模型是通過改良后進行使用的,不過這不重要,我們只需要了解它的用處價值以及如何使用就行了。
我們看下圖中,雙鉆模型主要為4個大階段,發(fā)現(xiàn)期、定義期、發(fā)展期、交付期。左邊的鉆石我們可以理解為發(fā)散思維階段,我們?yōu)橐粋€沒有目標(biāo)的項目去腦爆出想法或者問題,其次選擇出正確的方向,右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情,最后把正確的事情完成。

a、發(fā)現(xiàn)期

發(fā)現(xiàn)期我們理解為是探索期,該階段主要是發(fā)散思維和收集資料,研究問題的本質(zhì),把我們能想到與該問題具有關(guān)聯(lián)性的信息全部列出來。

質(zhì)疑:對一切信息的質(zhì)疑,簡單理解就是我們需要多問自己為什么,需求的合理性、用戶流程是否合理、為誰而做、會在什么場景使用、會遇到什么問題等等,把所有能想到的不合理事情列舉出來,這個小階段我們可以理解為是探索和發(fā)掘問題。
研究:針對問題去做對應(yīng)的調(diào)研,如不知道用戶使用場景,我們通過用戶調(diào)研可以得到結(jié)果,需要做什么研究調(diào)研可以根據(jù)需求遇到的具體問題去使用不同的研究方法,例如一些訪談、競品分析、數(shù)據(jù)分析等等。

b、定義期

該階段主要是把發(fā)現(xiàn)期的問題收攏聚焦,即基于發(fā)現(xiàn)期的調(diào)研分析、問題洞察形成結(jié)論,尋找可以突破的機會點,例如我們在發(fā)現(xiàn)期發(fā)現(xiàn)的問題是用戶的目標(biāo)是什么,影響用戶目標(biāo)的點可能有哪些,那么在定義階段就需要針對我們提出的這些假想進行聚焦,用戶是怎么完成目標(biāo),通過什么場景完成目標(biāo)等等,篩選問題時一定要綜合評估,尋找可行性。

c、發(fā)展期

該階段是已經(jīng)開始要開始進行落地了,第一第二階段是找到正確方向,而現(xiàn)在則是用正確的方法去做正確的事情,我們要把聚焦的問題具象化,構(gòu)思我們能夠想到的方案,比如設(shè)計前期探索定義的是年輕、輕盈,在該階段我們就需要根據(jù)關(guān)鍵詞去考慮如何進行設(shè)計,這個階段是一個不斷生產(chǎn)和推翻的流程,一直重復(fù),直到找到能夠落地的方案。

d、交付期

這個階段就顧名思義比較簡單了,根據(jù)發(fā)展期確定的方案,最后進行實際的落地,并且是可實施、可執(zhí)行的,通過團隊項目流程推動上線,最終展現(xiàn)給用戶。

以上便是雙鉆模型的定義,先舉個通俗的例子大家理解下模型,例如節(jié)假日我們想去旅游,a)我們?nèi)ナ裁吹胤剑繀⒂^古都?自駕游?游樂園?這個就是發(fā)現(xiàn)期,我們把想去的想玩的全部列出來,b)經(jīng)過篩選我們絕定去游樂園,這個就是大的方向,c)我們要去哪個游樂園?歡樂谷?方特大世界?這個階段就是發(fā)展期,我們要找到能去的地方,d)最后,怎么去?開車?跟團?玩多久?等等,這個就是交付期,可落地的。
當(dāng)然這個案例是結(jié)合生活方便大家理解,在實際項目中它的用處不止如此。

該如何使用它

網(wǎng)上也有很多雙鉆模型的案例,但大多都是偏向理論,并且案例也跟設(shè)計無關(guān)聯(lián),我從設(shè)計角度單刀直入的引入雙鉆模型,很簡單,很粗暴~~

例如我們要做一個唱歌產(chǎn)品的改版,站在設(shè)計師的角度我們需要去定義他的基本風(fēng)格和基本色彩規(guī)范等等,但是總不能上來就去做設(shè)計吧,我們要知道我們產(chǎn)品的群體是誰?具體的用戶屬性是什么樣的?有什么樣特征呢?等等。這個階段就是“雙鉆模型”的第一個階段,發(fā)現(xiàn)期。

發(fā)現(xiàn)期怎么做

發(fā)現(xiàn)期就是要發(fā)散思維,比如我們”唱歌“產(chǎn)品的用戶群體是年輕群體,用戶特征是18-25歲的在校大學(xué)生,用戶使用場景大多是宿舍、教室等校園環(huán)境,我們就需要去根據(jù)這些信息去進行設(shè)計思維發(fā)散,例如什么的風(fēng)格符合這類群體,先把關(guān)鍵詞舉例出來,如年輕、活力、青春、潮流、二次元...,依據(jù)這些關(guān)鍵詞做一些飛機稿,不斷進行探索。

當(dāng)然不止這一個思路,我們也可以通過競品分析的方法去擴展思路,如比較潮流的RAPAPP、二次元較重的B站,在比如現(xiàn)在的劇本殺相關(guān)的app等等,分析他們的設(shè)計風(fēng)格和表現(xiàn)方式,嘗試融合出飛機稿。

小結(jié):第一步的核心就是發(fā)散思維,把要做的產(chǎn)品背景信息全部羅列出來,通過橫向縱向的方式去散發(fā)關(guān)鍵詞,最后做出對不同風(fēng)格的設(shè)計,進行探索。

定義期怎么做

像前面說的,該階段就是把發(fā)現(xiàn)期散發(fā)的想法往回收一收,畢竟那么多想法哪一個才是我們需要的,我們需要在這個階段去篩選出來。


我們按照年輕、二次元、潮流、國潮這些關(guān)鍵詞出了一些飛機稿,我們需要去收攏起來看看那些可以與產(chǎn)品特性和用戶屬性真正具有關(guān)聯(lián)性,假設(shè)用戶群體雖然是18-25歲的學(xué)生,但是我們通過訪談和其他調(diào)研方式發(fā)現(xiàn)這類群體中喜歡二次元歌曲的群體偏少,而潮流、國潮等關(guān)鍵詞更符合這類群體定位,并且也能夠跟產(chǎn)品的主打方向匹配上,那么就可以剔除二次元相關(guān)的飛機稿了。


該階段最好能收縮到同一個維度2-3個方案便于我們?nèi)ミM行驗證,假設(shè)我們通過后續(xù)調(diào)研發(fā)現(xiàn),國潮與潮酷用戶群體喜好占比差不多,但是潮酷是產(chǎn)品未來的方向,我們就可以嘗試剔除國潮,但在潮酷這個范圍內(nèi)可能還會存在多種飛機稿,這是我們就需要進一步篩選,比如通過延展性,宣傳性,用戶認知度以及用戶的審美特性等等多維度去篩選,最終保持少量的方案。

發(fā)展期怎么做

到了這個階段我們應(yīng)該比較熟悉了,嘗試把上述的方案繼續(xù)收攏聚焦,提取出一個可行性方案展開后續(xù)的設(shè)計,具體怎么篩選,同樣可以繼續(xù)使用橫向和縱向維度進行對比,如潮酷風(fēng)格方案還剩下2個,我們就可以通過用戶調(diào)研、競品分析去嘗試衡量優(yōu)劣勢。

交付期怎么做

交付期其實就是我們設(shè)計側(cè)工作全部完成了,流程已經(jīng)進入到了開發(fā),我們把完整的設(shè)計稿、切圖等素材交付開發(fā),同時還需要橫向輸出設(shè)計規(guī)范供團隊后續(xù)使用。

總結(jié)

雙鉆模型用途非常廣泛,如數(shù)據(jù)方面、產(chǎn)品方面、設(shè)計方面甚至管理方面都可以使用到,在不同的領(lǐng)域使用的方法都類似,區(qū)別就是使用的深入如何,像本篇以純設(shè)計維度出發(fā)去使用雙鉆模型,使用的方式偏向單維度。
若以提升數(shù)據(jù)或優(yōu)化用戶體驗為目標(biāo)使用雙鉆模型,那么每一個階段的思維散發(fā)會變得更加廣泛,每條結(jié)果交叉的情況也非常多。
再次提醒,本篇只以設(shè)計維度出發(fā)教大家使用雙鉆模型

二、5E體驗設(shè)計模型

什么是5E體驗設(shè)計模型

該模型是講述用戶使用產(chǎn)品的感受,它包含五個維度:有效(Effective)、效率(Efficient)、吸引(Engaging)、容錯(Error tolerant)、易學(xué)(Easy to learn),我們看每個維度的英文解釋,會發(fā)現(xiàn)首字母都是E開頭,所以被稱為5E體驗設(shè)計模型。

5E 模型在整個體驗設(shè)計流程中可用性非常強,它可以幫助我們的團隊更具有創(chuàng)造力和理性的分布式領(lǐng)導(dǎo)模型,它可以讓復(fù)雜的設(shè)計簡單化,可以幫助產(chǎn)品構(gòu)建一個具有標(biāo)準性的體驗框架,我們無論做簡單還是復(fù)雜的設(shè)計時都可以依據(jù)這5個維度進行體驗評估。

不知道大家有沒有發(fā)現(xiàn),我們經(jīng)常講的產(chǎn)品可用性或者易用性,其實跟5E模型很像,5E模型的五個維度其實就是產(chǎn)品可用性的基礎(chǔ),當(dāng)一個產(chǎn)品不滿足其中一條的時候,那這個產(chǎn)品就不存在所謂的可用性,接下來我們對這五個維度進行解析。

有效(Effective)

顧名思義,有效指的就是產(chǎn)品功能的有效性,產(chǎn)品是否能夠為用戶帶來價值,是否能夠幫助用戶完成目標(biāo),如果不能幫助用戶完成目標(biāo),那么就不存在產(chǎn)品有效性,就像我們買筷子是為了吃飯、買開瓶器是為開蓋、買車是為了代步.....如果筷子只給我們一只,開瓶器無法開啟瓶蓋,車子沒有輪子跑不起來,那這個產(chǎn)品就是殘缺的最基礎(chǔ)的可用性都未達到。

效率(Efficient)

字面意思指我們在保證精準度的前提下保證完成事項的效率,準確度越高速度越慢,這個的衡量通常指產(chǎn)品與競品相比同一個任務(wù)流程效率的高低,以及出錯的頻率,假如我們刷抖音刷10個視頻需要1分鐘,而影響時間的因素是單個視頻的內(nèi)容是否足夠吸引,亦或者網(wǎng)速是否夠快。

吸引(Engaging)

這個就比較好理解,就是界面是否能夠吸引用戶,能夠讓用戶愉快的使用我們的頁面,當(dāng)然不止視覺上的,人的感知包括視覺、嗅覺、觸覺、味覺,一個優(yōu)秀的界面是不僅僅只有視覺,它還可以通過視覺的感知引起用戶的遐想,例如一個美食的產(chǎn)品,我們把首頁做的更加紅火、火爆可能就會引起用戶遐想起辣、熱等感知。

容錯(Error tolerant)

容錯我們可以理解為是一個防錯機制,或者說是容錯率,當(dāng)用戶在操作某一個功能時,容易發(fā)生錯誤,我們就需要讓產(chǎn)品幫助用戶及時更正錯誤,例如自動修復(fù),在比如打王者榮耀時我們選擇陣容都會經(jīng)常說容錯率,這里就是指5個英雄,2個打團時可能優(yōu)勢不是那么大,但是另外3個的容錯率非常高能把劣勢補救回來,而產(chǎn)品的容錯就相當(dāng)于這3個英雄,負責(zé)把用戶可能出現(xiàn)的錯誤操作給補救回來。

易學(xué)(Easy to learn)

易學(xué)和產(chǎn)品如何支持初次使用和更深度的學(xué)習(xí)相關(guān)。一個產(chǎn)品可以使用一次,或一會兒,或一天。它可以完成一個容易的或復(fù)雜的任務(wù),用戶可能是一個專家或新手。但每一次使用,界面必須能夠記憶或重新學(xué)習(xí),而且使用一段時間后能夠發(fā)掘更多的功能,通常產(chǎn)品的易學(xué)性體現(xiàn)在用戶的操作效率。

在產(chǎn)品設(shè)計中的應(yīng)用

有效(Effective)

有效性就像他定義的那樣,存在即合理,存在差異的是準確性,基本每個產(chǎn)品都必須具備有效性,例如地圖軟件,我要做公交車,能夠通過該功能查看離我最近的一輛公交還有多久到,這個功能的存在就是為了便于我們乘坐公交,防止無效等待,而差異上就是公交到站的時間可能因為某種原因不夠準確,這個就是有效上的差異因素。

效率(Efficient)

如何讓用戶體驗更好,效率是其中任何重要的一個點,部分的產(chǎn)品的存在就是為了“讓人變懶”,例如外賣、打車、購物等等,以聊天為例1v1聊天時消息能否及時的傳輸,群聊時同時加載n條消息,而我們能夠第一時間看到信息,在新聞資訊的軟件中,怎么保證用戶閱讀的效率,同樣的產(chǎn)品怎么排版才能夠符合用戶閱讀習(xí)慣,提高效率,大多行業(yè)的產(chǎn)品想要做到好的體驗,效率是不可缺失的。

吸引(Engaging)

一個產(chǎn)品通過不同的視覺表現(xiàn)或者音樂效果能夠加強用戶在感知層的認知,不同的群體,不同的階段,所展示的風(fēng)格不同,像下圖中的金融產(chǎn)品,使用紅色為主色傳遞的感覺是積極向上的感知,因為在國內(nèi)股票和基金里紅色代表漲,在看閱讀產(chǎn)品和教育產(chǎn)品,都根據(jù)產(chǎn)品特性和用戶群體來設(shè)定風(fēng)格,試想一下,一個閱讀的軟件做成卡通風(fēng)格,那會不會嚴重影響閱讀呢。

容錯(Error tolerant)

上面所說,容錯更像自動修復(fù)或者幫助用戶解決錯誤操作問題,在系統(tǒng)上我們可能會經(jīng)常看到,例如電腦崩潰時像MAC系統(tǒng)會詢問是否重啟,而Windows崩潰時會直接藍屏幫用戶自動重啟。

在產(chǎn)品中也會有相關(guān)的功能,例如聊天頁面中,我們因為網(wǎng)絡(luò)因素發(fā)送失敗會進行紅點提示,包括一些內(nèi)容加載失敗會提示重新加載等等。

易學(xué)(Easy to learn)

易學(xué)應(yīng)用場景非常之多,我們在做產(chǎn)品時大多都是優(yōu)先考慮用戶使用是否有阻礙,這個概念還是比較成熟的,當(dāng)然產(chǎn)品功能有些時候也避免不了復(fù)雜化,這時我們可以用新手引導(dǎo)進行解決,但是還是需要提醒大家,在設(shè)計頁面的時候一定一定要優(yōu)先遵循識別性和認知性,其次再去考慮創(chuàng)意,例如一個分享圖標(biāo),把它設(shè)計的不像一個分享,設(shè)計感是有了,但是可用性無了。

總結(jié)

為什么分享這兩個模型呢,這兩個我理解是體驗設(shè)計的基礎(chǔ),雙鉆模型讓我們從0-1一步一步解決問題,而5E模型是在我們解決問題的過程中時刻提醒我們不要偏移基礎(chǔ)的體驗,就像開車一樣,雙鉆模型就像是一個地圖的起點與終點,5E模型就像在行駛這段過程中的超速提醒、危險駕駛提醒等。



作者:愛吃貓的魚___
鏈接:https://www.zcool.com.cn/article/ZMTQ0OTAzMg==.html
來源:站酷
       

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

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

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

                 

這些UI大技巧你會了嗎?

資深UI設(shè)計者

對于很多設(shè)計師來講在設(shè)計界面過程中往往會忽略掉很多的細節(jié),比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等,特別是剛?cè)胄械脑O(shè)計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上,這種做法理論上不會讓自己的頁面出錯,但是很多人往往忽略了一點,就是別人這么設(shè)計的目標(biāo)是什么,是否會匹配自己的設(shè)計目標(biāo),如果不了解這些貿(mào)然的去搬運設(shè)計,那么時間久了會養(yǎng)成一個不好的習(xí)慣,需要設(shè)計師去進行設(shè)計時可能就會遇到很多難點,作為初級設(shè)計師或者剛?cè)胄械脑O(shè)計師,前期可以去進行搬運設(shè)計,但是一定要了解別人為什么這么做。
接下來將分享12個設(shè)計上的小技巧,大部分在日常設(shè)計中都會遇到,了解到這些設(shè)計細節(jié),可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

目錄

一、快捷交互

二、提升交互路徑

三、問題前置

四、提升可讀性

五、點擊引導(dǎo)

六、注意飽和度

七、禁止特殊字體

八、按鈕也要有層級

九、圖標(biāo)保持一致

十、利用對比

十一、圖文疊加

十二、注意遮罩透明

一、快捷交互

我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率,避免繁雜小操作步驟


左側(cè)為什么錯??
左圖中針對單條消息的操作匯聚到了icon內(nèi),對于用戶理解成本比較高,當(dāng)用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作,大大的提升了用戶操作成本。


建議正確做法~~
我們可以在類似的消息場景或者其他列表形式的場景中,添加一些交互手勢,隨著手機系統(tǒng)的更新,用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟,并不用擔(dān)心用戶無法操作的情況,增加手勢有弊端也有優(yōu)勢,右圖中手勢增加了用戶首次使用的學(xué)習(xí)成本,但是降低了高頻功能的操作成本,這個理論上是可以接
受的。

實際產(chǎn)品中的運用

二、提升交互路徑

利用拇指定律把關(guān)鍵的操作入口元素等,放置右側(cè)提升用戶操作效率。


左側(cè)為什么錯??
左圖中把按鈕放置了模塊左下側(cè),這樣是不利于用戶進行操作,當(dāng)然如果整個模塊的熱區(qū)都是同一個,這樣并沒有什么問題,用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作,如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口,而用戶想要到達目標(biāo)必須通過按鈕點擊才能進入,那么左圖中的排版位置就會提升用戶的操作時間。


建議正確做法~~
當(dāng)一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時,按鈕點擊區(qū)域有限,我們設(shè)計時就可以利用拇指定律進行排版,如右圖中布局,將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標(biāo),因為國內(nèi)使用右手的人數(shù)遠遠大于左手用戶,所以我們需要滿足大部分的體驗,合理利用拇指定律。
相關(guān)定律:費茲定律、拇指定律

實際產(chǎn)品中的運用

三、問題前置

對于我們來講很多東西是簡單的,但是不乏會有一些用戶是陌生的,對于他們來講可能會有填寫成本。


左側(cè)為什么錯??
左圖中理論上并不是錯,我們經(jīng)常設(shè)計表單時都會用的提示話術(shù),但是我們需要考慮更多維度的東西,對于我們來講填寫這種表單非常簡單,例如個別用戶,可能會臨時忘了郵箱格式,又或者輸入手機號時多填了一位數(shù)等等情況,用戶錯誤一次操作步驟就會多一步,反之就是降低使用產(chǎn)品時的體驗。


建議正確做法~~
如右圖中,我們設(shè)計時可以更改提示的話術(shù),幫助用戶把問題前置,當(dāng)用戶看到提示郵箱時就會按照格式去填寫,通過把手機號的位數(shù)拆分,讓用戶更好的記憶數(shù)字,這樣無論對產(chǎn)品還是用戶都沒有任何損失,反而能降低錯誤頻率。

實際產(chǎn)品中的運用

四、提升可讀性

無論是頁面還是模塊,用戶在閱讀時是已掃讀的方式進行瀏覽,我們需要保證頁面的文字元素具備一定的規(guī)律,以此來提升閱讀效率。


左側(cè)為什么錯??
左圖中可以看到,文字與輸入框放在同一列進行展示,這樣一方面不利于后續(xù)的文字擴展,通常這種表單填寫的頁面,在頁面中都是具有很大的空間位置,這樣排布會造成視覺上的不規(guī)律和擁擠,降低了篩選效率,當(dāng)然如果是模塊區(qū)域很小的情況下,可以適當(dāng)?shù)倪M行使用。


建議正確做法~~
右圖中我們把文字與輸入?yún)^(qū)域上下排布,雖然文字長短不一,但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的,有效的提升信息篩選效率。

實際產(chǎn)品中的運用

五、點擊引導(dǎo)

我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導(dǎo),用戶對此類消息模塊認知上會默認不可點擊,因此需要我們加以引導(dǎo)。


左側(cè)為什么錯??
我們常見的消息模塊內(nèi)容為兩種,一種是互動類消息即用戶與用戶,另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容,前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認是可以進行點擊交互,后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶,但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互,這就導(dǎo)致了用戶認知上出現(xiàn)了混亂,左圖中像系統(tǒng)通知功能通知其實從視覺上看,并不具備點擊欲望,因此可能會對用戶造成錯誤的理解。


建議正確做法~~
當(dāng)我們在設(shè)計時需要注意,若消息列表中存在系統(tǒng)類消息并且可以進行交互,在設(shè)計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊,如果該功能有數(shù)據(jù)指標(biāo),這種方式也同樣能賦能產(chǎn)品指標(biāo)。

實際產(chǎn)品中的案例

六、注意飽和度

目前市場上產(chǎn)品幾乎都有深色版本,我們在設(shè)計時深色版本的顏色時需要注意飽和度的高低,同樣的飽和度在黑色背景上會比白色背景上更加亮,這跟人的視覺感官有很大的關(guān)系,因此我們在做黑色版本時需要注意是否調(diào)整飽和度。


左側(cè)為什么錯??
在黑色背景中使用過高的飽和度會刺激眼睛,很多深色版本都是從白色模式通過反向顏色直接調(diào)整,而彩色元素會直接運用到深色中,那么就會造成一個問題,因為我們習(xí)慣在白色模式下看顏色,忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”,對眼睛的傷害很高。


建議正確做法~~
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度,包括圖標(biāo)等元素,以此來緩沖對用戶視覺感官的刺激,目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理,這樣無需在添加更多的顏色規(guī)范。

實際產(chǎn)品中的案例

七、禁止特殊字體

在設(shè)計模塊或者頁面時不建議使用特殊字體來突出文字層級,這樣會導(dǎo)致視覺不統(tǒng)一,以及開發(fā)成本增加。


左側(cè)為什么錯??
左圖中灰色字使用了特殊字體,看起來雖然好看,但在實際開發(fā)中會導(dǎo)致開發(fā)成本增加,我們產(chǎn)品一般使用的是系統(tǒng)字體,若使用特殊字體需要讓開發(fā)同學(xué)添加對應(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è)為什么錯??
圖中可以看到,兩個面性按鈕非常明顯的在模塊中,當(dāng)用戶在瀏覽頁面中很容易出現(xiàn)困惑,到底需要點擊哪個才能購買預(yù)定,因為兩個都是面性無法快速進行定位入口,這樣不僅影響用戶決策效率,還會影響產(chǎn)品點擊率。


建議正確做法~~
建議設(shè)計類似模塊中時,無論是pc還是移動端都需要對入口進行結(jié)構(gòu)劃分,這樣能夠使用戶在瀏覽頁面時快速定位到入口,提升決策效率,做體驗是解決用戶的思考時間。

實際產(chǎn)品中的案例

九、圖標(biāo)保持一致

在UI設(shè)計中使用圖標(biāo)時,要保持一致性,確保他們共有相同的視覺風(fēng)格,相同的重量,填充和描邊。不要混搭。


左側(cè)為什么錯??
可以看到左圖中的圖標(biāo)并不統(tǒng)一,線性里面摻雜著面性點綴,這在UI設(shè)計中嚴重違背了一致性的原則,會導(dǎo)致我們的頁面不夠嚴謹專業(yè)。


建議正確做法~~
在設(shè)計圖標(biāo)時,首先要保證圖標(biāo)風(fēng)格一致,其次在這個基礎(chǔ)上保證圖標(biāo)的描邊粗細、視覺占比重量、顏色等,不要出現(xiàn)混搭風(fēng)格。

實際產(chǎn)品中的案例

十、利用對比

在設(shè)計頁面模塊時,可以多利對比度的方式來體現(xiàn)設(shè)計的表現(xiàn)力,鮮明直接的色值能夠直接表達事物的性質(zhì)以及特點,通過對比,也能夠更加清晰的強調(diào)設(shè)計中的重點,這樣給用戶的印象會更深刻,同樣會給產(chǎn)品帶來一定的趣味性。


左側(cè)為什么錯??
左圖中單看視覺也沒問題,只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了,導(dǎo)致視覺表現(xiàn)力較差,在設(shè)計中如果符合產(chǎn)品風(fēng)格的前提下,我們可以避免這種方式,這種方式雖然具有視覺效果但不夠強,對用戶的記憶點不夠深刻。


建議正確做法~~
設(shè)計到類似的模塊時我們可以利用對比的關(guān)系,以此突出視覺元素,通過顏色焦點引導(dǎo)用戶關(guān)注,強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。

實際產(chǎn)品中的案例

十一、圖文疊加

在設(shè)計圖文疊加的卡片或者頁面時,我們需要注意不同明度的圖片上,文字識別是否有阻礙,一般情況會通過遮罩方式避免這個情況。


左側(cè)為什么錯??
左圖中在深色圖片下字體的可讀性是沒有問題的,但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對復(fù)雜時便會影響識別,第二種情況當(dāng)圖片明度過高時文字同樣無法識別,試想一下,一張白色調(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)變用戶目標(biāo),當(dāng)彈窗無法聚焦時便很難達到目標(biāo),并且視覺上層級更加混亂。


建議正確做法~~
右圖中案例我把透明度調(diào)整到了37%,我們此時再看彈窗很容易就忽略頁面內(nèi)容,因為灰色越高,遮擋度越高,用戶跳脫感就越強,這樣我們可以讓用戶專注彈窗內(nèi)容,同時視覺結(jié)構(gòu)上也區(qū)分很明顯。

實際產(chǎn)品中的案例


作者:愛吃貓的魚___
鏈接:https://www.zcool.com.cn/article/ZMTQzNTQ3Mg==.html
來源:站酷

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

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

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

                

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.miumiuwan.com

存檔