首頁

UI 設計公司的收費標準一般是怎樣的?判斷 UI 設計公司的收費是否合理

藍藍設計的小編 設計資源

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

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

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

藍藍設計的小編 設計資源

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

聊聊對設計和品牌的一些新看法

藍藍小助手 設計資源

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

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

資深UI設計者

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

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

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


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


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

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

資深UI設計者

前言


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



一、心智建立內容護城河


1、心智占領:

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


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

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

品牌符號拆解

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




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



用顏色表達個性

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



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



用字體豐富品牌基因

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




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

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

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



情感鏈接-圍繞人設講故事

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



二、你的差異點是什么?


1、化繁為簡,強化內容

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



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

洞察設計策略

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



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

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



場景設定

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



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



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



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

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



內容聯(lián)想

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



3、豐富體驗

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


如何讓用戶玩下去?

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


洞察&創(chuàng)意

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



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



如何讓用戶“回來”玩?

【激勵玩法-我的成就】

洞察&創(chuàng)意

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



驚喜彩蛋,拉升互動體驗

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


精彩視頻,點擊可看





結語


總結一下本篇文章關于內容場景化營銷的設計要點:

心智占領:前置化思考品牌打法,從品牌符號、Slogan、色彩基因、字體設計到IP的設定,全鏈路反復強調品牌。

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

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


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


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

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


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


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

。                           

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

資深UI設計者


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




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

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

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

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


一、專注面條


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


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

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

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





1.核心理念

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


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


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


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

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


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




2.品牌元素

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

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

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


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


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

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

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




3.專注時長-插圖設計

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

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

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




4.設計細節(jié)

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

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

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




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

1.永久買斷制


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


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

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


2.購買鑰匙


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

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

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


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




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

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


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

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

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

各位設計師們不妨學習一下背后的思考。


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


謎底時鐘是一款設計精美的時鐘應用。

Slogan:陪伴你學習、工作與生活。

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

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




1.首次引導

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

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




2.品牌元素

2-1.設計元素


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

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

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


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


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

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


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




3.彩蛋-圖標變化與提醒

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

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


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

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




4.彩蛋-積木時鐘墜落

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

具有數(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都一次買斷,后期改為訂閱模式也必須有終身買斷的內購入口。




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


三、Waterllama


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




1.品牌元素

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




2.核心功能

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




3.交互手法

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




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

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




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


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


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




1.品牌元素

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

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

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




2.動效表達1

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




3.動效表達2

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

當你專注番茄鐘時,只需在番茄上滑動標尺選擇準確時間,就能開始專注。

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




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

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

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


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

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




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

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


五、產(chǎn)品總結


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

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


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

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




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

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


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


六、結語


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

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

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

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


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

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


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


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


                       

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

資深UI設計者

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




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




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




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




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




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




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




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




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




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




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




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




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




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


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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




②「任務管理」是指給學員布置學習任務,幫助學員更好地學習。




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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




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

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

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


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


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

                         

分析五種消息通知

資深UI設計者

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



一、什么是通知?

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



二、通知的組成

基礎的通知模塊通常有標題、內容、入口、徽標、識別圖標五個元素構成



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

三、通知的類型

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



1. 徽標通知

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



優(yōu)點

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


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



缺點

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

何時使用

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



2.推送通知

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



優(yōu)點

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

缺點

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

何時使用

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



建議

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



3. 電子郵件通知

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



優(yōu)點

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

缺點

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

何時使用

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



4.Toast通知

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



優(yōu)點

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

缺點

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

何時使用

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

建議

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

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

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



優(yōu)點

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

缺點

它會阻礙用戶當前的操作,迫使用戶操作通知相關的內容

何時使用

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

四、總結

1.給用戶選擇

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



2.減少重復通知

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



3. 避免敏感信息

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


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

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

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

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

                       

一篇文章學會兩個體驗模型

資深UI設計者

一、雙鉆模型

它的作用是什么

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

什么是雙鉆模型

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

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

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

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

b、定義期

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

c、發(fā)展期

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

d、交付期

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

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

該如何使用它

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

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

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

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

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

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

定義期怎么做

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


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


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

發(fā)展期怎么做

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

交付期怎么做

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

總結

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

二、5E體驗設計模型

什么是5E體驗設計模型

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

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

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

有效(Effective)

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

效率(Efficient)

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

吸引(Engaging)

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

容錯(Error tolerant)

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

易學(Easy to learn)

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

在產(chǎn)品設計中的應用

有效(Effective)

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

效率(Efficient)

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

吸引(Engaging)

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

容錯(Error tolerant)

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

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

易學(Easy to learn)

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

總結

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



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

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

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

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

                 

這些UI大技巧你會了嗎?

資深UI設計者

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

目錄

一、快捷交互

二、提升交互路徑

三、問題前置

四、提升可讀性

五、點擊引導

六、注意飽和度

七、禁止特殊字體

八、按鈕也要有層級

九、圖標保持一致

十、利用對比

十一、圖文疊加

十二、注意遮罩透明

一、快捷交互

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


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


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

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

二、提升交互路徑

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


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


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

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

三、問題前置

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


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


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

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

四、提升可讀性

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


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


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

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

五、點擊引導

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


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


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

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

六、注意飽和度

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


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


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

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

七、禁止特殊字體

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


左側為什么錯??
左圖中灰色字使用了特殊字體,看起來雖然好看,但在實際開發(fā)中會導致開發(fā)成本增加,我們產(chǎn)品一般使用的是系統(tǒng)字體,若使用特殊字體需要讓開發(fā)同學添加對應字體包,這樣會導致我們的產(chǎn)品包的內存過大,除非產(chǎn)品中默認一直使用該特殊字體,這樣才有使用的價值。


建議正確做法~~
一般系統(tǒng)字體就能夠滿足我們的設計需求,在UI設計中我們可以通過不同的字體粗細來調整文字層級,這樣能夠保證視覺更加統(tǒng)一,減少產(chǎn)品包大小。

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

八、按鈕也要有層級

在設計時需要注意多個入口在同一位置時,需要把它們進行層級劃分,避免影響用戶決策


左側為什么錯??
圖中可以看到,兩個面性按鈕非常明顯的在模塊中,當用戶在瀏覽頁面中很容易出現(xiàn)困惑,到底需要點擊哪個才能購買預定,因為兩個都是面性無法快速進行定位入口,這樣不僅影響用戶決策效率,還會影響產(chǎn)品點擊率。


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

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

九、圖標保持一致

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


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


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

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

十、利用對比

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


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


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

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

十一、圖文疊加

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


左側為什么錯??
左圖中在深色圖片下字體的可讀性是沒有問題的,但當出現(xiàn)文字底部區(qū)域的圖片相對復雜時便會影響識別,第二種情況當圖片明度過高時文字同樣無法識別,試想一下,一張白色調性的圖片上放文字,那基本無法看清,嚴重影響閱讀體驗。


建議正確做法~~
在界面設計時如果遇到類似的卡片,建議在文字區(qū)域添加漸變遮罩的方式,以此保證文字的識別度,或者添加純黑色透明遮罩進行處理,這樣可以兼容不同環(huán)境的圖片與文字的重疊,保證基本的閱讀體驗。

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

十二、注意遮罩透明

UI設計中經(jīng)常會遇到彈窗,彈窗是需要配合頁面遮罩來讓用戶進行專注操作,不同的遮罩透明度所帶來的專注度也不同。


左側為什么錯??
左圖中我們看到,遮罩的透明度過低,我案例設置的是17%,此時彈窗內容與頁面內容結構上區(qū)分并不是很明顯,一般彈窗是用來讓用戶跳脫頁面內容,從而瀏覽彈窗內容,轉變用戶目標,當彈窗無法聚焦時便很難達到目標,并且視覺上層級更加混亂。


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

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


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

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

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

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

                

日歷

鏈接

個人資料

藍藍設計的小編 http://yvirxh.cn

存檔