首頁(yè)

用戶體驗(yàn)-運(yùn)動(dòng)設(shè)計(jì)原理指南

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

運(yùn)動(dòng)對(duì)數(shù)字產(chǎn)品的用戶體驗(yàn)產(chǎn)生了深遠(yuǎn)的影響,但是,如果界面元素沒有表現(xiàn)出基本的運(yùn)動(dòng)設(shè)計(jì)原理,則可用性會(huì)受到損害。在用戶界面的上下文中,動(dòng)作不僅僅是視覺裝飾。它是一種強(qiáng)大的力量,可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。

我們的世界是運(yùn)動(dòng)之一。即使在靜止的瞬間,葉子也會(huì)發(fā)抖,肺部也會(huì)擴(kuò)張。在數(shù)字產(chǎn)品設(shè)計(jì)領(lǐng)域,運(yùn)動(dòng)似乎是第二自然,這是對(duì)日常工作的擴(kuò)展,可以毫不費(fèi)力地加以利用。

從理論上講,使UI元素移動(dòng)很容易。在預(yù)定路徑上定義點(diǎn),然后軟件對(duì)間隙進(jìn)行補(bǔ)間。實(shí)際上,它不是那樣工作的。工具和技術(shù)是必不可少的,但它們是從原理中獲取力量的。如果要提高數(shù)字產(chǎn)品的可用性,就必須以適用于無數(shù)用例的不變行為規(guī)則為基礎(chǔ)。

運(yùn)動(dòng)設(shè)計(jì)的起源

運(yùn)動(dòng)設(shè)計(jì)與UX的結(jié)合相對(duì)較新,但其根源是迪士尼。迪斯尼原理是為了講故事而提煉出身體運(yùn)動(dòng)的基本定律。它們使繪制的角色能夠移動(dòng)和表情,但不能充分滿足現(xiàn)代用戶界面對(duì)交互運(yùn)動(dòng)的需求。

當(dāng)代設(shè)計(jì)師試圖彌合這一差距。更具說明性的示例之一是動(dòng)畫設(shè)計(jì)的十項(xiàng)原則,這是迪士尼動(dòng)畫專家Jorge R. Canedo Estrada的改編作品。

在建立運(yùn)動(dòng)中用戶體驗(yàn)的原則時(shí),可以從以下幾點(diǎn)入手

A. 從UI動(dòng)畫中區(qū)分運(yùn)動(dòng)設(shè)計(jì)

B. 闡明運(yùn)動(dòng)如何幫助可用性

C. 解開核心運(yùn)動(dòng)行為的內(nèi)部運(yùn)作方式

運(yùn)動(dòng)不僅僅是裝飾

動(dòng)作設(shè)計(jì)不是UI動(dòng)畫的代名詞。這一點(diǎn)很關(guān)鍵,因?yàn)閁I動(dòng)畫幾乎總是被當(dāng)作一種經(jīng)過深思熟慮的外觀,而與UX沒有任何關(guān)系(除了增加魅力)。動(dòng)作不是裝飾,而是行為,行為只能幫助或阻礙用戶體驗(yàn)。

兩種互動(dòng)類型:實(shí)時(shí)與非實(shí)時(shí)

運(yùn)動(dòng)設(shè)計(jì)涉及兩個(gè)基本交互:實(shí)時(shí)和非實(shí)時(shí)。

當(dāng)用戶在屏幕上操作UI元素時(shí),實(shí)時(shí)交互可提供即時(shí)反饋。換句話說,動(dòng)作行為會(huì)立即響應(yīng)用戶輸入。

用戶輸入后會(huì)發(fā)生非實(shí)時(shí)交互,這意味著用戶必須短暫暫停并觀察所產(chǎn)生的運(yùn)動(dòng)行為,然后才能繼續(xù)。

實(shí)時(shí)交互:運(yùn)動(dòng)行為會(huì)立即響應(yīng)用戶輸入。

非實(shí)時(shí)交互:交互后,用戶必須短暫等待并觀察動(dòng)作行為。

運(yùn)動(dòng)支持可用性

運(yùn)動(dòng)設(shè)計(jì)必須以四種不同的方式支持可用性。

A. 期望:當(dāng)用戶與UI元素交互時(shí),他們期望看到哪些運(yùn)動(dòng)行為?運(yùn)動(dòng)是否符合預(yù)期或引起混亂?

B. 連續(xù)性:交互是否在整個(gè)用戶體驗(yàn)中產(chǎn)生一致的運(yùn)動(dòng)行為?

C. 敘述:交互及其觸發(fā)的動(dòng)作行為是否與滿足用戶意圖的事件的邏輯進(jìn)程相關(guān)聯(lián)?

D. 關(guān)系: UI元素的空間,美學(xué)和層次屬性如何相互關(guān)聯(lián)并影響用戶的決策?運(yùn)動(dòng)如何影響存在的各種元素關(guān)系?

數(shù)字產(chǎn)品的12種運(yùn)動(dòng)設(shè)計(jì)原理

1.緩和

緩和模仿現(xiàn)實(shí)對(duì)象隨時(shí)間加速和減速的方式。它適用于所有顯示運(yùn)動(dòng)的UI元素。

放松的反面是線性運(yùn)動(dòng)。顯示線性運(yùn)動(dòng)的UI元素立即從固定速度變?yōu)槿?,從全速變?yōu)楣潭ā_@種行為在物理世界中不存在,并且對(duì)于用戶而言似乎停滯不前。

UI卡和相應(yīng)的椅子移動(dòng)很快,但是由于緩和,它們可以平穩(wěn)且受控地停下來。

2.偏移和延遲

當(dāng)多個(gè)UI元素同時(shí)且快速移動(dòng)時(shí),用戶傾向于將它們組合在一起,而忽略了每個(gè)元素可能具有其自身功能的可能性。

偏移和延遲會(huì)在同時(shí)移動(dòng)的UI元素之間創(chuàng)建層次結(jié)構(gòu),并傳達(dá)它們是相關(guān)的但又不同的信息。元素的時(shí)序,速度和間距不是完全同步,而是交錯(cuò)排列,從而產(chǎn)生微妙的“一個(gè)接一個(gè)”的效果。

當(dāng)用戶在屏幕之間漫游時(shí),偏移和延遲表明存在多個(gè)交互選項(xiàng)。

這個(gè)加密貨幣應(yīng)用程序一次引入了多個(gè)UI元素。它們的到來有些交錯(cuò),以通知用戶這些元素是相關(guān)的,但又是截然不同的。

3.父子元素關(guān)聯(lián)

父子元素關(guān)聯(lián)將一個(gè)UI元素的屬性鏈接到其他UI元素的屬性。當(dāng)父元素中的屬性更改時(shí),子元素的鏈接屬性也會(huì)更改。所有元素屬性可以相互鏈接。

例如,父元素的位置可以綁定到子元素的比例。當(dāng)父元素移動(dòng)時(shí),子元素的大小會(huì)增加或減小。

父子元素關(guān)聯(lián)會(huì)在UI元素之間創(chuàng)建關(guān)系,建立層次結(jié)構(gòu),并允許多個(gè)元素立即與用戶進(jìn)行通信。因此,關(guān)聯(lián)在實(shí)時(shí)交互中使用時(shí)影響最大。

藍(lán)色滑塊的位置控制背景遮罩的不透明度,燈泡周圍的發(fā)光效果的散布以及光強(qiáng)度標(biāo)度的數(shù)值。

4.轉(zhuǎn)型

當(dāng)一個(gè)UI元素變成另一個(gè)UI元素時(shí),將發(fā)生轉(zhuǎn)換。例如,下載按鈕將轉(zhuǎn)換為進(jìn)度條,該進(jìn)度條將轉(zhuǎn)換為完成圖標(biāo)。

從UX的角度來看,轉(zhuǎn)換是一種向用戶顯示其相對(duì)于目標(biāo)的狀態(tài)(系統(tǒng)狀態(tài)的可見性)的有效方法。當(dāng)UI元素之間的進(jìn)度鏈接到帶有開始和結(jié)束的過程(例如,下載文件)時(shí),這特別有用。

轉(zhuǎn)換表示下載的開始,中間和完成。

5.數(shù)據(jù)變化

在數(shù)字界面中,數(shù)據(jù)表示(數(shù)字,基于文本或圖形的表示)豐富,出現(xiàn)在從銀行應(yīng)用程序到個(gè)人日歷到電子商務(wù)站點(diǎn)的產(chǎn)品中。由于這些表示形式與實(shí)際存在的數(shù)據(jù)集相關(guān)聯(lián),因此它們可能會(huì)發(fā)生變化。

值的變化傳達(dá)了數(shù)據(jù)表示的動(dòng)態(tài)性質(zhì),并告知用戶數(shù)據(jù)是交互式的,并且可能會(huì)受到一定程度的影響。當(dāng)沒有動(dòng)靜地引入值時(shí),用戶參與數(shù)據(jù)的意愿降低。

動(dòng)態(tài)引入值以向用戶顯示他們有能力影響數(shù)據(jù)。

6.遮罩

遮罩是UI元素各部分的戰(zhàn)略性揭示和隱藏。通過更改元素外圍的形狀和比例,遮罩會(huì)發(fā)出信號(hào),表示實(shí)用性發(fā)生了變化,同時(shí)允許元素本身保持可識(shí)別性。因此,理想的選擇是諸如照片和插圖之類的詳細(xì)視覺效果。

從可用性的角度來看,設(shè)計(jì)人員可以實(shí)施屏蔽以向用戶顯示他們正在通過一系列交互進(jìn)行中。

遮罩用于從圖像捕獲到上傳到在線店面中的過渡。

7.疊加

在2D空間中,沒有深度,UI元素只能沿X軸或Y軸移動(dòng)。疊加會(huì)在UI的2D空間中產(chǎn)生前景色/背景色的錯(cuò)覺。通過模擬深度,覆蓋可以根據(jù)用戶需要隱藏和顯示元素。

使用重疊時(shí),信息層次結(jié)構(gòu)是一個(gè)重要的考慮因素。例如,用戶在做筆記應(yīng)用程序中應(yīng)該首先看到的是他們的筆記列表。然后,可以使用滑動(dòng)來公開每個(gè)消息的輔助選項(xiàng),例如刪除或存檔。

重疊式運(yùn)動(dòng)可讓用戶快速歸檔或刪除此記事應(yīng)用中的條目。

8.克隆

克隆是一種運(yùn)動(dòng)行為,其中一個(gè)UI元素拆分為其他元素。這是突出顯示重要信息或交互選項(xiàng)的聰明方法。

當(dāng)UI元素在界面中實(shí)現(xiàn)時(shí),它們需要一個(gè)清晰的起點(diǎn)來鏈接到屏幕上已經(jīng)存在的元素。如果元素只是無處不在而突然爆發(fā)或消失,則用戶將缺乏進(jìn)行自信交互所需要的上下文。

用戶可以放心地單擊彩色圓圈,因?yàn)樗鼈冿@然源自“添加注釋”圖標(biāo)。

9.模糊

想象磨砂玻璃門。它需要交互才能打開,但是可以(在某種程度上)辨別另一端正在等待什么。

它為用戶提供了一個(gè)界面,該界面要求進(jìn)行交互,同時(shí)顯示要跟隨的屏幕提示。導(dǎo)航菜單,密碼屏幕和文件夾/文件窗口是常見的示例。

模糊處理為用戶提供了重要的互動(dòng)方式,同時(shí)讓他們保持產(chǎn)品敘事的方向。

10.視差

當(dāng)兩個(gè)(或多個(gè))UI元素同時(shí)移動(dòng)但速度不同時(shí),將顯示視差。在此,目的是建立層次結(jié)構(gòu)。

A. 交互式元素移動(dòng)速度更快,并顯示在前景中。

B. 非交互式元素的移動(dòng)速度變慢并退回到背景。

視差引導(dǎo)用戶使用交互式UI元素,同時(shí)允許非交互式元素保留在屏幕上并保持設(shè)計(jì)統(tǒng)一性。

使用視差時(shí),最重要的交互式元素移動(dòng)最快,而非交互式元素移動(dòng)較慢并退回到背景。

11.維度

維度使UI元素似乎具有多個(gè)交互方面,就像物理世界中的對(duì)象一樣。通過使元素看起來像是可折疊的,可翻轉(zhuǎn)的,浮動(dòng)的或具有逼真的深度屬性而實(shí)現(xiàn)的。

作為一種敘事設(shè)備,維度意味著UI元素的不同側(cè)面被鏈接在一起,并實(shí)現(xiàn)了無縫的屏幕過渡。

維度意味著2D UI元素具有多個(gè)交互方面,就像物理世界中的對(duì)象一樣。

12.變焦

滾動(dòng)和縮放允許用戶在空間上“遍歷” UI元素或增加其比例以顯示更多細(xì)節(jié)。

A. 滾動(dòng):滾動(dòng)視角發(fā)生在用戶的角度更接近(或遠(yuǎn)離)UI元素時(shí)。想象一下,一個(gè)拿著照相機(jī)的人走到一朵花前要近距離拍攝。

B. 縮放:使用縮放時(shí),用戶的視點(diǎn)和UI元素保持固定,但是該元素在用戶屏幕內(nèi)的大小增加(或減?。,F(xiàn)在,假設(shè)該人保持姿勢(shì)并使用相機(jī)的變焦功能使花朵顯得更大。

滾動(dòng):用戶的視點(diǎn)似乎越來越接近背景圖像。

縮放:用戶的視角不會(huì)更接近圖像。而是圖像的比例會(huì)增加。

運(yùn)動(dòng)就是溝通

互動(dòng)體驗(yàn)的需求運(yùn)動(dòng)在其所有的輕快和微妙的形式。當(dāng)堅(jiān)持運(yùn)動(dòng)設(shè)計(jì)原則時(shí),即使最基本的UI元素也成為人類交流的復(fù)雜媒介。當(dāng)這些原理被忽略時(shí),運(yùn)動(dòng)就體現(xiàn)了自然界所沒有的特征。

運(yùn)動(dòng)設(shè)計(jì)與數(shù)字產(chǎn)品UX之間的關(guān)系正在迅速成熟。原則上的運(yùn)動(dòng)方法可以防止過度依賴趨勢(shì),工具和技術(shù)的短暫使用。更好的是,它跨越了2D屏幕上元素的抽象運(yùn)動(dòng)與3D世界中運(yùn)動(dòng)感知之間的鴻溝。


文章來源:站酷    作者:DuiaDesign

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

辭典精譯 | UI組件要點(diǎn)「狙擊」:文本欄及表單設(shè)計(jì)奧秘解析

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

文本欄&表單設(shè)計(jì) 


表單已經(jīng)存在了很長(zhǎng)一段時(shí)間,自誕生以來極大地簡(jiǎn)化了起草申訴和各種法律訴狀的任務(wù)。隨著信息與處理技術(shù)的進(jìn)步,收集數(shù)據(jù)的手段也在不斷發(fā)展,而印刷表單已存在多年,我們可以從其設(shè)計(jì)中學(xué)到一些技巧。



文本欄解析

用戶可以在文本欄內(nèi)輸入信息,它們通常以表單和對(duì)話框的形式出現(xiàn)。文本字段組件的設(shè)計(jì)應(yīng)為交互提供清晰的功能支持,使字段在布局中易識(shí)別、易填充和可訪問。



以下是組成文本欄的關(guān)鍵要素:

容器:可交互的輸入?yún)^(qū)域;

輸入框:在文本欄中輸入文字;

提示:告訴用戶給出的表單字段是什么信息;

占位符:是所需信息的描述或示例,用戶輸入正確信息內(nèi)容后被替換;

幫助程序或驗(yàn)證文本(可選):?jiǎn)为?dú)出現(xiàn)或以驗(yàn)證消息的形式出現(xiàn);

頭部圖標(biāo)(可選):描述文本字段的輸入類型;

尾部圖標(biāo)(可選):輸入文本的附加控件,例如清除,隱藏/顯示等。


01 文字欄類型

它們大多數(shù)都是相對(duì)基礎(chǔ)的文本字段類型,被修改成了處理特定類型的信息,例如信用卡號(hào)。以下是我創(chuàng)建的UI中最常用的一些輸入類型示例:



02 對(duì)收集數(shù)據(jù)使用適當(dāng)?shù)妮斎腩愋?

為收集的數(shù)據(jù)提供幫助規(guī)避錯(cuò)誤,讓用戶可以正確的輸入信息,從而使過程簡(jiǎn)單高效。



03 文本欄必須根據(jù)狀態(tài)和交互更改外觀

文本欄的狀態(tài)可以通過視覺提示來實(shí)現(xiàn),輸入信息時(shí)的狀態(tài)有以下幾種:未激活、懸停、禁用、激活,驗(yàn)證、錯(cuò)誤。所有狀態(tài)應(yīng)清楚地被區(qū)分開,并在整個(gè)表單和應(yīng)用中保持一致,簡(jiǎn)潔明了,不要誤導(dǎo)用戶。



04 選擇最佳的文本欄樣式

通常標(biāo)簽定位有三種:頂部、左側(cè)和右側(cè)對(duì)齊。最適合的樣式將取決于表單的大小、主要目標(biāo)、組件庫(kù)和要為其設(shè)計(jì)的平臺(tái),但它們都有各自優(yōu)點(diǎn)和缺點(diǎn)。



谷歌的“材料設(shè)計(jì)”指南中,普遍使用的下劃線輸入并不是最佳選擇。有趣的是,在一項(xiàng)研究結(jié)果中發(fā)現(xiàn)用戶更喜歡帶圓角的輸入框。


05 左對(duì)齊標(biāo)簽

當(dāng)用戶不熟悉所請(qǐng)求的數(shù)據(jù)時(shí),這是一個(gè)不錯(cuò)的選擇。

優(yōu)點(diǎn):易于標(biāo)簽伸縮,充分利用垂直空間;

缺點(diǎn):標(biāo)簽與對(duì)應(yīng)的文本欄,距離過元,增加用戶閱讀的時(shí)間成本。



06 右對(duì)齊標(biāo)簽

與左對(duì)齊標(biāo)簽相比,完成時(shí)間快了將近兩倍。

優(yōu)點(diǎn):標(biāo)簽和輸入欄靠近,限制了眼睛移動(dòng)的次數(shù),從而縮短了完成時(shí)間;

缺點(diǎn):難以快速瀏覽表單并理解所需的所有信息。



07 頂部對(duì)齊標(biāo)簽

在移動(dòng)設(shè)備上效果很好,因?yàn)樗鼈儾恍枰嗟乃娇臻g。

優(yōu)點(diǎn):用戶可以快讀瀏覽輸入標(biāo)簽和輸入文本;

缺點(diǎn):需要更多垂直空間。



08 文本欄長(zhǎng)度應(yīng)與輸入內(nèi)容呼應(yīng)

表單中的所有文本欄,若設(shè)置相同長(zhǎng)度確實(shí)會(huì)顯得非常美觀,但實(shí)際在操作上,卻很難完成。



09 占位符不能替代標(biāo)簽

占位符文本消失會(huì)給用戶制造緊張感,而去掉標(biāo)簽,用戶則無法在提交表單前檢查他們提供的信息。如果在設(shè)計(jì)時(shí)需要極簡(jiǎn)的表單,可以使用“材料設(shè)計(jì)”的浮動(dòng)標(biāo)簽法。表單內(nèi)的占位符文本還會(huì)使用戶感到困惑,最好在字段外使用提示文本。



10 幫助用戶填寫表單

使用自動(dòng)完成功能,填寫時(shí)會(huì)幫助填寫及查詢。一般在輸入時(shí)可以看到,對(duì)查詢內(nèi)容按Enter或右箭頭鍵就完成了填寫;

使用Auto-Suggest搜索關(guān)關(guān)鍵字和短語(yǔ)時(shí),下拉列表會(huì)顯示多個(gè)建議;


預(yù)填充字段會(huì)經(jīng)常使用智能默認(rèn)值,比如通過IP或地理位置,就能檢測(cè)獲取到用戶所在的國(guó)家和城市,或是根據(jù)常見的場(chǎng)景,自己定義默認(rèn)情況下的內(nèi)容。需要注意的是,電子商務(wù)是一個(gè)例外,請(qǐng)勿預(yù)先設(shè)置與購(gòu)買相關(guān)的任何偏好,比如尺寸或顏色;



還有一種應(yīng)用情境,自動(dòng)完成功能可以幫助用戶做出正確決定或避免錯(cuò)誤,比如用戶轉(zhuǎn)帳時(shí)看到賬戶余額等,請(qǐng)一定要提供該信息。


11 使用實(shí)時(shí)在線驗(yàn)證

指的是用戶輸入信息后,可以實(shí)時(shí)檢查輸入內(nèi)容的有效性,而不是等用戶提交表單時(shí)一次性檢查。正確應(yīng)用,降低信息出錯(cuò)率:

在輸入內(nèi)容的文字欄下方顯示驗(yàn)證消息;

不要突然蹦出嚴(yán)重警告,填寫的消息錯(cuò)誤時(shí),應(yīng)告訴用戶如何解決,而非責(zé)怪。



12 減少字段數(shù)量

消除視覺及認(rèn)知負(fù)擔(dān),使界面看起來更加簡(jiǎn)潔。

不要將全名和日期之類的文本分成多個(gè)字段;

不要多次詢問相同的信息。



13 隱藏不相關(guān)的字段

逐步公開,提供必要提示即可,幫助用戶管理復(fù)雜信息。



14 使用條件邏輯

根據(jù)用戶回答,條件邏輯允許在表單中自動(dòng)顯示、隱藏字段和跳過頁(yè)面。這種方法不僅可以減少字段數(shù),而且可以使填寫過程更像對(duì)話,也更具個(gè)性化。



15 把相關(guān)領(lǐng)域分組

簡(jiǎn)化表單的最有效方法,其中之一則是為相關(guān)字段進(jìn)行分組。格式塔心理學(xué)里有許多種分組原則,使項(xiàng)目有關(guān)聯(lián)性:接近性、相似性,連續(xù)性、閉合性和連通性。在界面中,如果將數(shù)十個(gè)非結(jié)構(gòu)化字段分組為幾個(gè)可管理的集合,將顯著提高表單的可用性。



16 避免使用多列布局

一欄布局能為用戶創(chuàng)建一個(gè)清晰的完成路徑;使用多列表單布局,會(huì)導(dǎo)致用戶跳過實(shí)際需要輸入的字段,將數(shù)據(jù)填寫到其他位置,這會(huì)迫使用戶停止甚至放棄填寫。



17 將復(fù)雜的表單分為幾個(gè)簡(jiǎn)單的步驟

有時(shí),即使刪除了所有不必要的內(nèi)容后,某些表單還是很龐大。將大型任務(wù)分解為一系列的小任務(wù)反倒容易得多,也能激勵(lì)用戶堅(jiān)持到最后。

顯示步驟,直觀地告訴用戶實(shí)際進(jìn)度,這能提高用戶滿意度并激勵(lì)他們繼續(xù)前進(jìn);

不要細(xì)化表單,太多的步驟非常啰嗦,只會(huì)惹惱用戶;

對(duì)關(guān)鍵信息進(jìn)行總結(jié)以減輕用戶焦慮,在最后設(shè)置復(fù)查步驟,幫助用戶檢查。



18 最小化導(dǎo)航

如果表單足夠大,可以分成多個(gè)步驟,那么就應(yīng)該有一個(gè)單獨(dú)的、重點(diǎn)明確的界面來專門處理它。在導(dǎo)航中用其他鏈接會(huì)破壞正常流程,導(dǎo)致邏輯混亂,而且在小型彈出窗口中也不建議使用多步驟表單。



19 顯示合適的鍵盤類型

Android或iOS提供了幾種不同的鍵盤類型,每種類型的鍵盤都旨在方便不同類型的輸入。為了簡(jiǎn)化數(shù)據(jù)輸入,在編輯文本字段時(shí)顯示的鍵盤應(yīng)適合該字段中的內(nèi)容類型,同時(shí)也要注意鍵盤出現(xiàn)的位置。將文本字段放在上方區(qū)域,避免滾動(dòng)展示。



20 停止荒謬的密碼創(chuàng)建設(shè)計(jì)

允許密碼取消隱藏來代替多次密碼輸入,這對(duì)于生成密碼的應(yīng)用程序也更有效;

隨時(shí)顯示密碼要求,并顯示用戶滿足了哪些條件,方便查看進(jìn)度;

使用強(qiáng)度表鼓勵(lì)用戶創(chuàng)建更強(qiáng)更安全的密碼。



文章來源:站酷   作者:UX辭典

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


2021年版式設(shè)計(jì)趨勢(shì)

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

排版將文字從單純的文本轉(zhuǎn)換為巧妙的交流方式。字體和類型設(shè)計(jì)可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統(tǒng)的永恒變化到全新的技術(shù)。

字體在現(xiàn)代文化和商業(yè)中的突出地位受到包豪斯藝術(shù)運(yùn)動(dòng)的影響。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的學(xué)生,并通過采用還原性極簡(jiǎn)主義的原則在版式設(shè)計(jì)上留下了杰出的印記。

數(shù)字圖形媒體和設(shè)計(jì)師本身的爆炸式增長(zhǎng)催生了各種各樣令人驚奇的想法和進(jìn)化。有些想法只是一時(shí)的流行,而另一些則是可以保留的趨勢(shì)。我們重點(diǎn)介紹了2021年最流行的字體趨勢(shì)。

1. 襯線字體

襯線字體當(dāng)然是永恒的–因此,當(dāng)以新的現(xiàn)代方式使用它們時(shí),它們會(huì)重新出現(xiàn)在趨勢(shì)圖上。通過將細(xì)長(zhǎng)和粗體元素并置,我們看到古典襯線字體作為一種持續(xù)的趨勢(shì)重新回到設(shè)計(jì)中。尤其是受到美容和DTC品牌的推崇,該款式具有柔和的美感,可以在許多行業(yè)中使用。

我們的示例顯示了帶有泥土色的苗條襯線字體的優(yōu)雅搭配,從而柔和了整體氛圍。

Neubel本身是一家字體鑄造廠,使用柔和而優(yōu)雅的顏色托盤并將文本覆蓋在對(duì)比鮮明的藝術(shù)品上,以大膽地表達(dá)自己的觀點(diǎn)。

設(shè)計(jì)公司Autumn展示了視覺層次結(jié)構(gòu)的強(qiáng)大功能以及自信的版式和簡(jiǎn)單的形狀。

2.輪廓字體

輪廓字體在2020年出現(xiàn)了很多的創(chuàng)意,我們希望在2021年會(huì)看到更多。透明字體在與粗體,填充字體并排顯示時(shí),更加強(qiáng)大。

我們的示例表明,輪廓傾向于在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)中心位置。Heetch在相同顏色的純色襯線字體上方使用藍(lán)紫色輪廓字體,以表現(xiàn)出對(duì)比效果。

Aldo在“走進(jìn)愛情”廣告系列中使用了當(dāng)年P(guān)antone顏色的陰影。廣告系列以自信和表達(dá)為中心,明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發(fā)光的絕佳選擇。日本設(shè)計(jì)師Ukyo Masuda憑借中性灰色調(diào)色板為該群體錦上添花,盡管如此,它還是通過創(chuàng)意的輪廓字體而栩栩如生。

3.進(jìn)化的野獸派

如果您希望營(yíng)造視覺張力并擺脫標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的束縛,那么野獸派字體與現(xiàn)代野獸派元素相結(jié)合就可以完成工作。野獸派字體的清晰,原始,略顯復(fù)古的設(shè)計(jì)經(jīng)過了現(xiàn)代化改造,成為我們所謂的“進(jìn)化的野獸派”。在經(jīng)過改進(jìn)的版本中,苛刻的元素被軟化并與各種調(diào)色板和形狀結(jié)合在一起。

我們的示例顯示了進(jìn)化的野獸派的不同變體和組合。內(nèi)森·泰勒(Nathan Taylor)使用了大量實(shí)驗(yàn)元素和互動(dòng)性。整個(gè)設(shè)計(jì)是野獸派的,不僅僅是字體。這是對(duì)更加野蠻的野蠻主義的一個(gè)很好的展示,但是現(xiàn)代的元素使這種感覺更加精致和進(jìn)化。

4.文本與其他元素的分層

通過有意地分層排列文本和圖像,可以使得整個(gè)頁(yè)面更有空間感。這種組合使焦點(diǎn)很清楚。它允許用戶在滾動(dòng)之前暫停一秒鐘并全部接收信息。

這些示例是最有趣的。登錄Mammut貝加爾湖頁(yè)面后,您即會(huì)感受到電影般的震撼力。圖像的運(yùn)動(dòng)和貝加爾湖文字與人類交織在一起,使您感覺自己像是體驗(yàn)的一部分。

德國(guó)品牌代理公司MJND的層次結(jié)構(gòu)要簡(jiǎn)單得多,但是層次感仍然很突出。對(duì)于那些使用文本和圖像的人來說,這種設(shè)計(jì)更容易上手。

Owlsome Studio使字體更加突出,并在其后面分層顯示較小的正方形圖像。這是其他兩個(gè)示例的替代方案,但是由于它打破了網(wǎng)絡(luò)的現(xiàn)狀,因此可能以自己的方式產(chǎn)生影響。

5.文字圖像融合

比文本分層更進(jìn)一步的是文本與圖像相互融合,而兩者是密不可分的。這給圖像帶來真正的優(yōu)質(zhì)感,并引起您的注意。它們不再是文本和圖像層的組合,而是變成一個(gè)整體。

我們喜歡這種格式允許的創(chuàng)意表達(dá),并提供無盡的組合。Satellite414使用透明的輪廓文字,這些文字實(shí)際上成為照片的一部分。它是動(dòng)態(tài),現(xiàn)代和新鮮的。

Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合,將它們合并在一起,從而使用戶注意到它們。

6.新迷幻效果

全新迷幻氛圍是對(duì)時(shí)髦色彩的復(fù)古回歸,融合了現(xiàn)代感。它借鑒了過去的迷幻設(shè)計(jì)。

從1960年代到1970年代的劇烈社會(huì)動(dòng)蕩帶來了新藝術(shù)和設(shè)計(jì)的變革。迷幻的影響在那個(gè)時(shí)代就很明顯了,今天我們看到了一種新的潮流。韋斯·威爾遜(Wes Wilson)是那個(gè)時(shí)代的重要設(shè)計(jì)師,他創(chuàng)造了一種新字體,成為該地區(qū)的象征-著名的迷幻設(shè)計(jì)。

Victor Moscoso為他的印刷沉重設(shè)計(jì)帶來了鮮艷的色彩,這些色彩影響了示例中所見的現(xiàn)代霓虹色調(diào)色板。

宙斯·瓊斯(Zeus Jones)是我們所看到的趨勢(shì)的完美典范–光譜中各種鮮艷的色彩,以夢(mèng)幻般的方式與斜體字體結(jié)合在一起,并為流動(dòng)的漸變帶來了清晰的通信效果。

查理·勒·麥格南(Charlie Le Maignan)為我們提供了一種有趣的復(fù)古字體,可在頁(yè)面上擴(kuò)展和折疊。此外,在Showreel部分,我們看到了一段令人迷惑的文字彩虹,讓人聯(lián)想起1970年代的專輯和那些酸酸的歌曲。

圣馬丁代理公司在令人眼花scene亂的場(chǎng)景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡(jiǎn)單性與無窮復(fù)雜的色彩并置。

7.粗體現(xiàn)代襯線字體

到2021年,這并不是一個(gè)全新的概念,現(xiàn)代的襯線字體處理技術(shù)隨著新外觀的發(fā)展而不斷變化。

一個(gè)新的變化是,我們看到粗體襯線字體完全占據(jù)了屏幕。在許多情況下,文本是整體設(shè)計(jì),而粗體的現(xiàn)代襯線字體則可解決問題。

樣條線使用黑底紅字表示強(qiáng)烈的陳述,并使用完全大寫的文字來增強(qiáng)效果。對(duì)于試圖喚起技能,信心和權(quán)威的公司,這種組合效果很好。

Orto保持簡(jiǎn)單,但將宏偉提升到另一個(gè)層次。超大,明亮的字體只會(huì)迫使您注意并進(jìn)一步深入。

8.賽博朋克風(fēng)格

也許最分裂的想法之一是計(jì)算機(jī)朋克和汽具美學(xué)。計(jì)算機(jī),視頻游戲和1980年代流行美學(xué)的模糊組合以某種怪異,令人著迷的組合在一起。

80年代是數(shù)字游戲和新的計(jì)算機(jī)浪潮的開始。賽博朋克和汽具設(shè)計(jì)是80年代復(fù)古設(shè)計(jì)的變體。隨著計(jì)算機(jī)和AI的發(fā)展,我們可能會(huì)看到印刷術(shù)和美學(xué)的新融合。

Next Big Thing Academy顯然具有對(duì)未來的關(guān)注。雖然這里的字體選擇不是什么極端的選擇,但總體上符合復(fù)古主義的未來美學(xué)。

浮標(biāo)也不使用任何大膽創(chuàng)新的字體,但是圖像與字體的整體配對(duì)符合這種趨勢(shì)。

文章來源:站酷   作者:DuiaDesign

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

2021年版式設(shè)計(jì)趨勢(shì)

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

排版將文字從單純的文本轉(zhuǎn)換為巧妙的交流方式。字體和類型設(shè)計(jì)可以說出這么多–從突出的粗體字體到精致的襯線字體。從傳統(tǒng)的永恒變化到全新的技術(shù)。

字體在現(xiàn)代文化和商業(yè)中的突出地位受到包豪斯藝術(shù)運(yùn)動(dòng)的影響。赫伯特·拜耳(Herbert Bayer)是包豪斯(Bauhaus)的學(xué)生,并通過采用還原性極簡(jiǎn)主義的原則在版式設(shè)計(jì)上留下了杰出的印記。

數(shù)字圖形媒體和設(shè)計(jì)師本身的爆炸式增長(zhǎng)催生了各種各樣令人驚奇的想法和進(jìn)化。有些想法只是一時(shí)的流行,而另一些則是可以保留的趨勢(shì)。我們重點(diǎn)介紹了2021年最流行的字體趨勢(shì)。

1. 襯線字體

襯線字體當(dāng)然是永恒的–因此,當(dāng)以新的現(xiàn)代方式使用它們時(shí),它們會(huì)重新出現(xiàn)在趨勢(shì)圖上。通過將細(xì)長(zhǎng)和粗體元素并置,我們看到古典襯線字體作為一種持續(xù)的趨勢(shì)重新回到設(shè)計(jì)中。尤其是受到美容和DTC品牌的推崇,該款式具有柔和的美感,可以在許多行業(yè)中使用。

我們的示例顯示了帶有泥土色的苗條襯線字體的優(yōu)雅搭配,從而柔和了整體氛圍。

Neubel本身是一家字體鑄造廠,使用柔和而優(yōu)雅的顏色托盤并將文本覆蓋在對(duì)比鮮明的藝術(shù)品上,以大膽地表達(dá)自己的觀點(diǎn)。

設(shè)計(jì)公司Autumn展示了視覺層次結(jié)構(gòu)的強(qiáng)大功能以及自信的版式和簡(jiǎn)單的形狀。

2.輪廓字體

輪廓字體在2020年出現(xiàn)了很多的創(chuàng)意,我們希望在2021年會(huì)看到更多。透明字體在與粗體,填充字體并排顯示時(shí),更加強(qiáng)大。

我們的示例表明,輪廓傾向于在網(wǎng)頁(yè)設(shè)計(jì)中占據(jù)中心位置。Heetch在相同顏色的純色襯線字體上方使用藍(lán)紫色輪廓字體,以表現(xiàn)出對(duì)比效果。

Aldo在“走進(jìn)愛情”廣告系列中使用了當(dāng)年P(guān)antone顏色的陰影。廣告系列以自信和表達(dá)為中心,明亮的黃色將那種感覺放在了中心。輪廓字體是使粗體黃色發(fā)光的絕佳選擇。日本設(shè)計(jì)師Ukyo Masuda憑借中性灰色調(diào)色板為該群體錦上添花,盡管如此,它還是通過創(chuàng)意的輪廓字體而栩栩如生。

3.進(jìn)化的野獸派

如果您希望營(yíng)造視覺張力并擺脫標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的束縛,那么野獸派字體與現(xiàn)代野獸派元素相結(jié)合就可以完成工作。野獸派字體的清晰,原始,略顯復(fù)古的設(shè)計(jì)經(jīng)過了現(xiàn)代化改造,成為我們所謂的“進(jìn)化的野獸派”。在經(jīng)過改進(jìn)的版本中,苛刻的元素被軟化并與各種調(diào)色板和形狀結(jié)合在一起。

我們的示例顯示了進(jìn)化的野獸派的不同變體和組合。內(nèi)森·泰勒(Nathan Taylor)使用了大量實(shí)驗(yàn)元素和互動(dòng)性。整個(gè)設(shè)計(jì)是野獸派的,不僅僅是字體。這是對(duì)更加野蠻的野蠻主義的一個(gè)很好的展示,但是現(xiàn)代的元素使這種感覺更加精致和進(jìn)化。

4.文本與其他元素的分層

通過有意地分層排列文本和圖像,可以使得整個(gè)頁(yè)面更有空間感。這種組合使焦點(diǎn)很清楚。它允許用戶在滾動(dòng)之前暫停一秒鐘并全部接收信息。

這些示例是最有趣的。登錄Mammut貝加爾湖頁(yè)面后,您即會(huì)感受到電影般的震撼力。圖像的運(yùn)動(dòng)和貝加爾湖文字與人類交織在一起,使您感覺自己像是體驗(yàn)的一部分。

德國(guó)品牌代理公司MJND的層次結(jié)構(gòu)要簡(jiǎn)單得多,但是層次感仍然很突出。對(duì)于那些使用文本和圖像的人來說,這種設(shè)計(jì)更容易上手。

Owlsome Studio使字體更加突出,并在其后面分層顯示較小的正方形圖像。這是其他兩個(gè)示例的替代方案,但是由于它打破了網(wǎng)絡(luò)的現(xiàn)狀,因此可能以自己的方式產(chǎn)生影響。

5.文字圖像融合

比文本分層更進(jìn)一步的是文本與圖像相互融合,而兩者是密不可分的。這給圖像帶來真正的優(yōu)質(zhì)感,并引起您的注意。它們不再是文本和圖像層的組合,而是變成一個(gè)整體。

我們喜歡這種格式允許的創(chuàng)意表達(dá),并提供無盡的組合。Satellite414使用透明的輪廓文字,這些文字實(shí)際上成為照片的一部分。它是動(dòng)態(tài),現(xiàn)代和新鮮的。

Kieran Baybutt中文字完全取代了圖像。這使得文本部分與典型鏡頭一樣重要。Craig Reynolds中圖像和文本滑入和滑出組合,將它們合并在一起,從而使用戶注意到它們。

6.新迷幻效果

全新迷幻氛圍是對(duì)時(shí)髦色彩的復(fù)古回歸,融合了現(xiàn)代感。它借鑒了過去的迷幻設(shè)計(jì)。

從1960年代到1970年代的劇烈社會(huì)動(dòng)蕩帶來了新藝術(shù)和設(shè)計(jì)的變革。迷幻的影響在那個(gè)時(shí)代就很明顯了,今天我們看到了一種新的潮流。韋斯·威爾遜(Wes Wilson)是那個(gè)時(shí)代的重要設(shè)計(jì)師,他創(chuàng)造了一種新字體,成為該地區(qū)的象征-著名的迷幻設(shè)計(jì)。

Victor Moscoso為他的印刷沉重設(shè)計(jì)帶來了鮮艷的色彩,這些色彩影響了示例中所見的現(xiàn)代霓虹色調(diào)色板。

宙斯·瓊斯(Zeus Jones)是我們所看到的趨勢(shì)的完美典范–光譜中各種鮮艷的色彩,以夢(mèng)幻般的方式與斜體字體結(jié)合在一起,并為流動(dòng)的漸變帶來了清晰的通信效果。

查理·勒·麥格南(Charlie Le Maignan)為我們提供了一種有趣的復(fù)古字體,可在頁(yè)面上擴(kuò)展和折疊。此外,在Showreel部分,我們看到了一段令人迷惑的文字彩虹,讓人聯(lián)想起1970年代的專輯和那些酸酸的歌曲。

圣馬丁代理公司在令人眼花scene亂的場(chǎng)景中為我們帶來歡樂和情感的熔巖燈。字體與背景配合得很好–簡(jiǎn)單性與無窮復(fù)雜的色彩并置。

7.粗體現(xiàn)代襯線字體

到2021年,這并不是一個(gè)全新的概念,現(xiàn)代的襯線字體處理技術(shù)隨著新外觀的發(fā)展而不斷變化。

一個(gè)新的變化是,我們看到粗體襯線字體完全占據(jù)了屏幕。在許多情況下,文本是整體設(shè)計(jì),而粗體的現(xiàn)代襯線字體則可解決問題。

樣條線使用黑底紅字表示強(qiáng)烈的陳述,并使用完全大寫的文字來增強(qiáng)效果。對(duì)于試圖喚起技能,信心和權(quán)威的公司,這種組合效果很好。

Orto保持簡(jiǎn)單,但將宏偉提升到另一個(gè)層次。超大,明亮的字體只會(huì)迫使您注意并進(jìn)一步深入。

8.賽博朋克風(fēng)格

也許最分裂的想法之一是計(jì)算機(jī)朋克和汽具美學(xué)。計(jì)算機(jī),視頻游戲和1980年代流行美學(xué)的模糊組合以某種怪異,令人著迷的組合在一起。

80年代是數(shù)字游戲和新的計(jì)算機(jī)浪潮的開始。賽博朋克和汽具設(shè)計(jì)是80年代復(fù)古設(shè)計(jì)的變體。隨著計(jì)算機(jī)和AI的發(fā)展,我們可能會(huì)看到印刷術(shù)和美學(xué)的新融合。

Next Big Thing Academy顯然具有對(duì)未來的關(guān)注。雖然這里的字體選擇不是什么極端的選擇,但總體上符合復(fù)古主義的未來美學(xué)。

浮標(biāo)也不使用任何大膽創(chuàng)新的字體,但是圖像與字體的整體配對(duì)符合這種趨勢(shì)。

文章來源:站酷   作者:Ballen成名

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

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

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

一.什么是阻力 ?


在百度百科的定義中,阻力是物體在流體中相對(duì)運(yùn)動(dòng)所產(chǎn)生與運(yùn)動(dòng)方向相反的力。自然界中存在許多類型的阻力,比如空氣阻力、水流阻力,各種各樣的生物因此進(jìn)化出相應(yīng)的身體特征去減少阻力。如下圖所示,擁有流線型外形的海豚掌握獨(dú)特的減少湍流摩擦阻力的游泳方法,這使其游速在某些條件下可以達(dá)到每小時(shí) 70-100km,遠(yuǎn)超現(xiàn)代潛艇的航速。

人類為了擺脫自然界設(shè)計(jì)的阻力,做了許許多多的努力。采用纖維模仿鯊魚皮膚結(jié)構(gòu)的鯊魚皮泳衣能夠降低 30% 的水阻,提高人類游泳速度。汽車的流線型設(shè)計(jì)減小渦旋作用或避免渦旋的形成大大地減低了空氣對(duì)其的阻力。

在人類社會(huì),人為設(shè)計(jì)的阻力也無時(shí)無刻不在。為了公共安全設(shè)立的安檢、為了交通安全而嚴(yán)格控制不同區(qū)域的最高車速、為了社會(huì)安定而設(shè)立的法律,諸如此類的阻力都無時(shí)無刻規(guī)范著人類的行為。


類似地,對(duì)于互聯(lián)網(wǎng)產(chǎn)品,用戶在使用時(shí)也會(huì)被刻意地或非刻意地設(shè)計(jì)出的阻力所影響,這些阻力會(huì)阻礙用戶完成目標(biāo)。


二、為什么會(huì)產(chǎn)生阻力 ?


在認(rèn)知心理學(xué)中,我們接受外部世界的刺激之后做出反應(yīng)的過程中,涉及到我們?nèi)绾胃兄?、學(xué)習(xí)、推理、記憶,以及如何把意圖轉(zhuǎn)化為行為。人類數(shù)十萬年的進(jìn)化過程中,對(duì)于感知、學(xué)習(xí)、推理、記憶的神經(jīng)結(jié)構(gòu)已經(jīng)初步進(jìn)化形成,大多數(shù)的人保持著相似的認(rèn)知能力和認(rèn)知缺陷。用戶在使用產(chǎn)品時(shí)感受到的阻力往往來自于設(shè)計(jì)師未能充分了解用戶的認(rèn)知能力,從而設(shè)計(jì)出容易導(dǎo)致用戶犯下認(rèn)知性錯(cuò)誤的產(chǎn)品。以下常見的人類的認(rèn)知特點(diǎn)影響了我們感知和獲取信息的過程。


2.1 傾向于通過經(jīng)驗(yàn)、環(huán)境和目標(biāo)進(jìn)行判斷

對(duì)于一件新事物,我們感知它的方式通常受到三個(gè)因素影響:過往的經(jīng)驗(yàn)、周圍的環(huán)境、當(dāng)下的目標(biāo)。我們通過過往的經(jīng)驗(yàn)將已知概念套用在新事物上,幫助我們理解。一旦產(chǎn)品界面中與用戶的經(jīng)驗(yàn)預(yù)期相悖,就會(huì)產(chǎn)生阻力。


2.2 缺乏耐心和思考

面對(duì)一個(gè)我們從未使用過的機(jī)器設(shè)備時(shí),我們很少愿意耐心閱讀完它的說明書再去使用它,而是自信滿滿的希望通過簡(jiǎn)單的擺弄和熟悉就能夠了解它的使用方法。《點(diǎn)石成金:訪客至上的Web和移動(dòng)可用性設(shè)計(jì)秘笈》一書中的第一條可用性原則就是“Don't let me think(不要讓我思考)”,作者認(rèn)為設(shè)計(jì)者在設(shè)計(jì)一個(gè)界面時(shí),最好能夠做到讓界面清晰易懂、一目了然,讓用戶能夠不必過多的思考就能夠使用它,幫助用戶跨越思考過程,讓用戶能夠輕松做出復(fù)雜的決策,減少認(rèn)知壓力。


2.3 心流易被打斷

我們可能都經(jīng)歷過心流狀態(tài),當(dāng)我們?cè)跇O度專注地做某件事時(shí)完全沉浸其中并且非常高效,但如果意外地被打擾,會(huì)讓我們很煩躁。

有關(guān)任務(wù)執(zhí)行的研究文獻(xiàn)中就曾經(jīng)提到過:中斷會(huì)導(dǎo)致錯(cuò)誤,而且人們?nèi)菀走z忘之前的位置或狀態(tài)。當(dāng)一個(gè)任務(wù)打斷了另外一個(gè),重新啟動(dòng)需要的時(shí)間會(huì)讓每個(gè)任務(wù)都變慢。

打擾我們的事情可能是工作時(shí)突然的一聲噪聲,也可能是在使用軟件時(shí)冗余的彈窗、過多的頁(yè)面跳轉(zhuǎn)、無意的誤操作等等。界面中過多的干擾會(huì)打斷用戶的心流,造成用戶的使用阻力。


2.4 無法擺脫的認(rèn)知負(fù)荷

認(rèn)知負(fù)荷理論(Cognitive Load Theory)是在 20 世紀(jì) 80 年代由澳大利亞教育學(xué)家 J.Sweller 提出,由于對(duì)人類學(xué)習(xí)認(rèn)知和教學(xué)指導(dǎo)提供了新的理論框架,該理論在教育領(lǐng)域成為重要的心理學(xué)指導(dǎo)理論,在交互設(shè)計(jì)領(lǐng)域也存在著借鑒意義,理論的主要內(nèi)容如下:

認(rèn)知負(fù)荷是指外部信息進(jìn)入個(gè)體短期記憶后中后所需要的注意力資源和記憶容量,被分類為內(nèi)在認(rèn)知負(fù)荷、外部認(rèn)知負(fù)荷以及相關(guān)認(rèn)知負(fù)荷(如下圖)。當(dāng)任務(wù)需要消耗的注意力和記憶容量超出學(xué)習(xí)者的極限時(shí),就會(huì)導(dǎo)致認(rèn)知超負(fù)荷,超出的部分將不會(huì)被學(xué)習(xí)者有效獲取。

不同的呈現(xiàn)形式形成的外部認(rèn)知負(fù)荷是不同的,一般來說,文字>圖式>視聽。因此,為了避免認(rèn)知超負(fù)荷給用戶帶來的使用阻力,我們應(yīng)該設(shè)法簡(jiǎn)化信息來降低內(nèi)在認(rèn)知負(fù)荷,通過更合理的信息可視化形式和信息架構(gòu)構(gòu)建降低外部認(rèn)知負(fù)荷。


三、產(chǎn)品設(shè)計(jì)中的阻力應(yīng)用


如下圖,基于上述的用戶的認(rèn)知能力分析,合理的降低阻力,能夠讓用戶在使用產(chǎn)品時(shí)效率更高,成本更低。在提高交互效率方面我們可以通過減少操作步驟、提高傳達(dá)效率、減少頁(yè)面跳轉(zhuǎn)來達(dá)到目的。在降低交互成本方面,我們可以通過降低操作難度、減少用戶思考來實(shí)現(xiàn),同時(shí)通過降低認(rèn)知負(fù)荷減少用戶的認(rèn)知負(fù)擔(dān)。阻力并不是越小越好,在某些場(chǎng)景下,我們需要增加阻力和提高用戶的使用成本,進(jìn)而提升用戶體驗(yàn)或達(dá)成產(chǎn)品目標(biāo)。通過提高防錯(cuò)能力、提供安全感和營(yíng)造儀式感來優(yōu)化體驗(yàn)。通過篩選用戶和內(nèi)容把控社區(qū)生態(tài)。通過功能引導(dǎo)和歧視性策略來迎合商業(yè)目的。


四、降低阻力的應(yīng)用


4.1 提高交互效率


4.1.1 減少操作步驟

類似于一個(gè)倒金字塔結(jié)構(gòu),交互流程中的每一個(gè)步驟都伴隨著流失。通過以下減少操作步驟的方法,可以降低用戶行為路徑中的阻力。


使用合適的控件

不同的控件有著不同的應(yīng)用場(chǎng)景,控件的選用不當(dāng)會(huì)形成多余的操作步驟。我們需要深入了解每個(gè)控件的屬性和應(yīng)用場(chǎng)景才能夠做到靈活運(yùn)用。

舉一個(gè)例子,在微信的朋友圈發(fā)布頁(yè)中編輯內(nèi)容后點(diǎn)擊取消后,彈出警告框顯示“不保留”和“保留”按鈕,但是考慮到用戶可能會(huì)誤操作點(diǎn)擊取消按鈕的場(chǎng)景,此處應(yīng)增加一個(gè)按鈕讓用戶回到編輯狀態(tài),否則不管用戶選擇哪個(gè)選項(xiàng)都會(huì)退出發(fā)布頁(yè)重新進(jìn)入,從而使用戶多了一步操作。下廚房的發(fā)布頁(yè)就考慮到了這個(gè)問題,使用了默認(rèn)有返回操作的上拉菜單控件作為提示方式,即使在誤操作場(chǎng)景下也不會(huì)增加操作步驟。

控件方面這里就不展開講了,大家可以通過閱讀 iOS 人機(jī)交互指南和安卓 Material Design 規(guī)范來深入學(xué)習(xí)。


復(fù)雜任務(wù)移交系統(tǒng)

任務(wù)都存在其復(fù)雜性,當(dāng)我們無法簡(jiǎn)化它時(shí),可以考慮將復(fù)雜性移交給系統(tǒng),使其代替用戶操作。

比如我們可以利用用戶已經(jīng)在產(chǎn)品中填寫過的信息來幫助用戶填寫相關(guān)信息。例如通過身份證號(hào)碼自動(dòng)識(shí)別出用戶的生日和性別,自動(dòng)為用戶填充。 


預(yù)判用戶行為

預(yù)判用戶行為分為兩種方式,第一種是在用戶操作前,預(yù)判可能發(fā)生的用戶行為,以建議的形式為用戶提供選擇,縮短用戶行為路徑。

比如拍攝照片后,打開微信聊天頁(yè)面,微信會(huì)以氣泡的形式詢問用戶是否要發(fā)送圖片,如下圖。


第二種是由于用戶的認(rèn)知錯(cuò)誤進(jìn)行了非目標(biāo)操作時(shí),系統(tǒng)提前識(shí)別引導(dǎo)用戶進(jìn)入正確的流程并完成任務(wù)。


比如支付寶聊天界面中,很多用戶誤以為可以直接通過輸入框輸入金額數(shù)后點(diǎn)擊發(fā)送就可以轉(zhuǎn)賬,但實(shí)際上只會(huì)發(fā)出一條消息。支付寶貼心地在用戶輸入數(shù)字后外顯轉(zhuǎn)賬功能,從而避免了用戶的錯(cuò)誤操作,如下圖。


優(yōu)化頁(yè)面流程

不合理的信息架構(gòu)和流程設(shè)計(jì)會(huì)增加用戶的操作步驟。比如最新 iOS13 的信息應(yīng)用,將 iOS12 原有的使用分段控件整合信息的方式改為了 iOS13 的列表形式,導(dǎo)致從一級(jí)頁(yè)面(A)進(jìn)入到二級(jí)頁(yè)面(B或C)后,如果想切換信息列表還需要返回到一級(jí)頁(yè)面再次選擇,增加了一步操作。iOS13 的這種改動(dòng)可能考慮到用戶切換信息列表的頻率沒有那么高,希望用戶專注于當(dāng)前的信息列表,但是我這樣的用戶經(jīng)常查看過濾信息列表,擔(dān)心是否有重要信息被屏蔽,多出的一步操作還是給我?guī)聿恍〉氖褂米枇Α?


淘寶訂單模塊的做法就比較合理,從一級(jí)頁(yè)面(A)進(jìn)入二級(jí)的任何頁(yè)面(B 或 C)后,二級(jí)頁(yè)面可以在標(biāo)簽欄互相切換,而不需要退回一級(jí)頁(yè)面再次選擇二級(jí)頁(yè)面,從而節(jié)省了一步操作。


快捷方式

快捷方式有跳轉(zhuǎn)類和功能類兩種,跳轉(zhuǎn)類的快捷方式可以幫助用戶快速觸達(dá)或回退到某個(gè)頁(yè)面。

比如我們可以通過長(zhǎng)按 iOS 應(yīng)用圖標(biāo)調(diào)出功能的快捷方式使用,減少中間的操作步驟。淘寶可以在大多數(shù)頁(yè)面通過快捷方式快速回退到首頁(yè)。


功能類的快捷方式提供給用戶更快捷的方式完成復(fù)雜或較多的任務(wù),比如嗶哩嗶哩的一鍵三連。被蘋果收購(gòu)的應(yīng)用快捷指令可以自定義系統(tǒng)以及第三方應(yīng)用的復(fù)雜任務(wù),并且在下次一鍵即可完成。


4.1.2 減少頁(yè)面跳轉(zhuǎn)

米哈里·契克森米哈賴在《心流:最佳體驗(yàn)心理學(xué)》中將“最佳體驗(yàn)”定義為:當(dāng)我們?cè)谧瞿承┦虑闀r(shí),那種全神貫注、投入忘我的狀態(tài)。這種狀態(tài)下,我們身心合一,甚至感覺不到時(shí)間的存在,技術(shù)水平也會(huì)達(dá)到頂峰,在這件事情完成之后我們會(huì)有一種充滿能量和非常滿足的感受。然而,周圍突然的干擾或環(huán)境刺激都有可能打破心流體驗(yàn)。 

用戶在使用軟件產(chǎn)品時(shí)很少有心流體驗(yàn),因?yàn)檫^多的頁(yè)面的跳轉(zhuǎn)和刷新會(huì)中斷用戶心流,冗余的頁(yè)面層級(jí)會(huì)增加用戶的理解成本和操作成本。針對(duì)這個(gè)問題,我們可以提高單個(gè)頁(yè)面的動(dòng)態(tài)容量,在不跳轉(zhuǎn)頁(yè)面的前提下使用戶完成任務(wù),為用戶創(chuàng)造在視覺感受層面上的心流體驗(yàn),下面是一些方法舉例。


覆蓋層

覆蓋層是出現(xiàn)并覆蓋在原頁(yè)面上層的一個(gè)彈出窗口,可以由用戶觸發(fā)或系統(tǒng)自動(dòng)觸發(fā),在網(wǎng)頁(yè)端和移動(dòng)端都有著廣泛應(yīng)用。我們通常可以將其用于輸入內(nèi)容、附加信息、子頁(yè)面信息外顯、顯示操作指令等。


a.模態(tài)覆蓋層

模態(tài)覆蓋層一般由點(diǎn)擊觸發(fā),通常出現(xiàn)后會(huì)伴隨亮盒效果,使用戶聚焦于覆蓋層上的任務(wù),用戶操作完畢后才可以進(jìn)行覆蓋層外的其他操作。模態(tài)覆蓋層的大小不固定,它可以是一個(gè)小型的顯示警示信息的彈窗,也可能是一個(gè)篇幅很大的信息介紹,在保持上下文的情況下展示更多信息,避免了用戶迷失在各種頁(yè)面跳轉(zhuǎn)中。

如下圖,behance的首頁(yè)點(diǎn)擊一個(gè)作品后,會(huì)在當(dāng)前頁(yè)面上生成一個(gè)模態(tài)覆蓋層供用戶瀏覽詳細(xì)的作品內(nèi)容,而不是跳轉(zhuǎn)到新的頁(yè)面。在設(shè)計(jì)師瀏覽單個(gè)作品的場(chǎng)景中,一般只需要 1-3 分鐘的瀏覽后就會(huì)關(guān)閉頁(yè)面,模態(tài)覆蓋層的方式使得打開和關(guān)閉的操作更加流暢,提高了設(shè)計(jì)師的瀏覽效率。



模態(tài)覆蓋層在移動(dòng)端同樣也有著應(yīng)用。如果前后兩個(gè)頁(yè)面存在較強(qiáng)的關(guān)聯(lián)性,為了避免用戶產(chǎn)生明顯的割裂感,一般適合采用模態(tài)覆蓋層的方式展示新頁(yè)面。如下圖,知乎使用模態(tài)覆蓋層展示評(píng)論。


b.詳情覆蓋層

詳情覆蓋層在網(wǎng)頁(yè)端通過光標(biāo)移入觸發(fā),觸發(fā)后不需要刷新頁(yè)面既可顯示附加信息。如下圖Boss直聘中光標(biāo)移入某條招聘介紹時(shí),會(huì)觸發(fā)詳情覆蓋層展示出次級(jí)頁(yè)面的詳細(xì)崗位信息,避免了跳轉(zhuǎn)新頁(yè)面。


嵌入層

嵌入層類似于抽屜,需要的時(shí)候?qū)⑵湔归_,不需要的時(shí)候?qū)⑵涫掌?。與模態(tài)層不同之處在于,展開后也不會(huì)遮蓋頁(yè)面的其他信息和影響其他操作。嵌入層的主要的應(yīng)用場(chǎng)景有:拓展內(nèi)容、展示下級(jí)內(nèi)容。

如下圖,微博的發(fā)現(xiàn)頁(yè)面的功能圖標(biāo)可以通過嵌入層進(jìn)行拓展從而展示更多功能。


Xmind的嵌入層展示了格式的下級(jí)內(nèi)容,可以在保持能夠繼續(xù)編輯腦圖的前提下進(jìn)行格式設(shè)置。


標(biāo)簽頁(yè)

對(duì)于內(nèi)容豐富的頁(yè)面,希望用戶能夠通過盡可能少的跳轉(zhuǎn)就能夠觸達(dá)。我們可以將列表導(dǎo)航、宮格導(dǎo)航修改為標(biāo)簽導(dǎo)航或分頁(yè)的形式。


4.2 降低交互成本


4.2.1 降低操作難度

把某些操作難度大耗費(fèi)成本高的操作使用新技術(shù)解決,比如人臉識(shí)別和 OCR 技術(shù)可以降低信息輸入成本,不但幫助用戶使用較少的時(shí)間完成任務(wù),也降低了用戶的犯錯(cuò)幾率和使用阻力。

手勢(shì)的優(yōu)化也是降低操作難度的可行方法,優(yōu)化的方式有增加多手勢(shì)操作和加大熱區(qū)。比如在 App Store 首頁(yè)進(jìn)入應(yīng)用推薦頁(yè)后,針對(duì)不同使用場(chǎng)景的用戶提供了三種退出的方式,大大降低了操作難度。


舉一個(gè)反例,得到的書籍詳情頁(yè)中,查看詳情的按鈕熱區(qū)只存在于文字上,但是用戶的使用習(xí)慣會(huì)誤認(rèn)為整塊區(qū)域都可以點(diǎn)擊,因此每次點(diǎn)擊多次失敗后才理解熱區(qū)的正確位置,如果將熱區(qū)擴(kuò)大到整個(gè)區(qū)域就可以降低操作的難度。


想要了解更多交互手勢(shì)知識(shí)可以拓展閱讀: 交互手勢(shì)的容錯(cuò)性和邏輯性 


4.2.2 減少用戶思考


提供默認(rèn)選擇

用戶的每一次思考都伴隨著流失的風(fēng)險(xiǎn)。有時(shí)用戶對(duì)于我們提供的選擇不是很了解,會(huì)糾結(jié)和疑惑不同選擇之間的區(qū)別,最終可能導(dǎo)致放棄選擇進(jìn)而流失。我們需要做的是為用戶提供默認(rèn)選擇,同時(shí)允許用戶切換到其他選擇,以此來減少思考,降低使用阻力。

以手機(jī)淘寶查看相似寶貝功能改版為例,在舊版中,長(zhǎng)按淘寶某個(gè)商品會(huì)出現(xiàn)「找相似」和「找同款」的按鈕選項(xiàng),點(diǎn)擊后會(huì)跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面。在新版中,長(zhǎng)按淘寶某個(gè)商品會(huì)直接跳轉(zhuǎn)到「相似寶貝」頁(yè)面展示商品,同時(shí)可以通過分段控件切換為「同款寶貝」。我猜測(cè)的改版原因是,由于舊版的第二步給用戶的兩個(gè)選項(xiàng)讓用戶過多思考,導(dǎo)致第二步的流失率過高,很多用戶沒能體驗(yàn)到「相似寶貝」和「同款寶貝」功能的的特色。改版后直接將更高頻的「相似寶貝」的商品頁(yè)展示給用戶,同時(shí)也很方便地去切換到「同款寶貝」,這種交互形式的變化讓用戶無需思考就可以迅速體驗(yàn)到功能的特色、并在熟悉后下次會(huì)繼續(xù)使用。


保持一致性

我們通過過往的經(jīng)驗(yàn)將已知概念套用在新事物上,幫助我們理解。一旦交互界面中與用戶的經(jīng)驗(yàn)預(yù)期相悖,就會(huì)產(chǎn)生阻力。

上文提到過,我們習(xí)慣于從過去獲得的經(jīng)驗(yàn)中獲得對(duì)于當(dāng)下問題的解決方案。甚至對(duì)于重復(fù)出現(xiàn)的問題,我們已經(jīng)形成了條件反射和肌肉記憶去解決它們而不是再次思考。因此,當(dāng)設(shè)計(jì)缺乏一致性時(shí),不但會(huì)導(dǎo)致我們已經(jīng)形成的條件反射和肌肉記憶失效,還會(huì)更容易導(dǎo)致錯(cuò)誤的發(fā)生。此時(shí)我們不得不從條件反射的無意識(shí)操作轉(zhuǎn)換為消耗注意力的緩慢操作,從而形成阻力。為了避免這些阻力,我們需要確保按鍵的一致性、交互文案的一致性、交互手勢(shì)的一致性。

如下圖,警告框的按鈕位置一旦第一次用戶經(jīng)過使用熟悉后,之后用戶會(huì)進(jìn)行無意識(shí)地快速操作,此時(shí)如果某個(gè)警告框缺乏一致性就會(huì)導(dǎo)致錯(cuò)誤的發(fā)生。


4.3 降低認(rèn)知負(fù)荷


4.3.1 降低內(nèi)在負(fù)荷

內(nèi)在負(fù)荷是任務(wù)中包含的信息和用戶固有的認(rèn)知結(jié)構(gòu)產(chǎn)生交互作品而形成的負(fù)荷。體現(xiàn)在界面中的信息就是文案的設(shè)計(jì)了,它也是產(chǎn)品設(shè)計(jì)中重要的一環(huán)。悖于用戶認(rèn)知結(jié)構(gòu)的文案設(shè)計(jì)會(huì)帶給用戶理解上的阻力。一份合格的文案設(shè)計(jì)需要做到簡(jiǎn)潔易懂、重點(diǎn)突出、無歧義性和保持一致。


簡(jiǎn)潔易懂

如果能夠做到簡(jiǎn)潔,就不要冗余。確保每一個(gè)字都有其存在的意義。大部分用戶會(huì)對(duì)冗余的大段文字產(chǎn)生畏難情緒,從而放棄閱讀。詞匯的選擇要符合用戶人群的認(rèn)知范圍,不應(yīng)該使用用戶難以理解的各種黑話和行話。在此基礎(chǔ)上,如果能夠通過形象生動(dòng)的修辭手法幫助用戶快速理解,就更勝一籌了,比如針對(duì)垃圾分類,一些網(wǎng)友發(fā)明的快速記憶方法就是一個(gè)很不錯(cuò)的例子,如下圖。


重點(diǎn)突出

一段文案中可能有些是重點(diǎn)內(nèi)容,有些是解釋內(nèi)容,并不是所有內(nèi)容都需要讓用戶閱讀并理解。大部分情況下只需要突出重點(diǎn)內(nèi)容告知用戶,能夠引導(dǎo)用戶下一步行動(dòng)就足夠了,至于其他解釋性或者不重要的內(nèi)容弱化即可。

針對(duì)前兩條規(guī)則,我們以 12306 以及飛豬的學(xué)生票和成人票的選擇彈窗作為案例進(jìn)行對(duì)比。如下圖所示,每一次購(gòu)買火車票的過程中,當(dāng)我遇到 12306 的這個(gè)彈窗,都會(huì)讓我用不少時(shí)間去進(jìn)行理解和思考。首先在個(gè)人看來,“溫馨提示”在任何彈窗上都是占用空間沒有實(shí)際意義的存在,如果沒有標(biāo)題,直接展示正文即可;其次,正文的內(nèi)容重點(diǎn)信息不突出,其中有一個(gè)句子“請(qǐng)憑購(gòu)票時(shí)所使用的有效身份證件原件和附有學(xué)生火車票優(yōu)惠卡的有效學(xué)生證原件換票乘車?!边^于長(zhǎng)和復(fù)雜,很考驗(yàn)用戶的短期記憶和耐心;最后,按鈕文字沒有提供操作路徑,用戶想知道如何操作需要先閱讀完上面的文案。


飛豬的案例就避免了 12306 所存在的問題,做到了簡(jiǎn)潔易懂和重點(diǎn)突出,如下圖。


表意清晰

表意清晰指的是文案?jìng)鬟_(dá)的含義明確、不含糊、不存在歧義。下圖是一款社交軟件的警告框文案,文案的歧義讓用戶疑惑“取消”按鈕是取消約會(huì)還是取消本次操作。經(jīng)過修改后歧義性就消失了。


保持一致

同一個(gè)軟件系統(tǒng)中,表達(dá)相同概念的用詞一致。模塊中的相似文案,語(yǔ)法表達(dá)方式一致。上文提到我們?nèi)祟惡苌僭敢馑伎嫉奶攸c(diǎn),一旦一個(gè)軟件系統(tǒng)出現(xiàn)表示同一個(gè)概念,但是名稱不一樣的詞語(yǔ),我們大腦就不得不開始被迫思考:“這個(gè)詞語(yǔ)和之前那個(gè)很接近但是有些不一樣,它們是同一個(gè)東西嗎?”這個(gè)思考過程從而形成了不小的阻力?!墩J(rèn)知與設(shè)計(jì)》一書中提到一條規(guī)則:“同一個(gè)名稱,就是同一個(gè)東西;不同的名稱,就是不同的東西。”因此,一致性是撰寫交互文案的一條重要原則。


4.3.2 降低外在負(fù)荷

當(dāng)信息的內(nèi)在負(fù)荷不能再進(jìn)行降低時(shí),通過改變信息的呈現(xiàn)方式、結(jié)構(gòu)設(shè)計(jì)和邏輯安排來將復(fù)雜信息可視化,降低外在負(fù)荷,使信息更容易被用戶接受和理解。這里涉及到信息可視化這個(gè)課題,這里就不做展開了。



五、提高阻力的應(yīng)用


阻力并不是越小越好,在某些場(chǎng)景下,我們需要提高阻力提高用戶的使用成本達(dá)成某些目的。


5.1 優(yōu)化交互體驗(yàn)


5.1.1 提高防錯(cuò)能力

類似于馬路上的減速帶,在車輛進(jìn)入需要低速行駛區(qū)域時(shí)進(jìn)行阻礙。我們通常在用戶容易犯錯(cuò)的操作前設(shè)定一定的阻力,減緩用戶的操作的節(jié)奏,達(dá)到防錯(cuò)的目的。如下圖,在藍(lán)湖中如果要?jiǎng)h除一個(gè)項(xiàng)目,就需要先輸入項(xiàng)目的名稱后才能成功刪除,通過增加阻力提高了防錯(cuò)能力。



5.1.2 提供安全感

針對(duì)涉及到用戶隱私的敏感操作,通過設(shè)計(jì)特定的交互流程讓用戶體驗(yàn)到安全感,比如通過增加指紋、面部識(shí)別等操作降低用戶對(duì)于危險(xiǎn)和風(fēng)險(xiǎn)的擔(dān)憂,增加用戶的確定感和可控感。


5.1.3 建立儀式感

生活中大部分的時(shí)刻都是單調(diào)乏味的,我們需要使用各種儀式點(diǎn)綴它。與此類似,在用戶的操作行為路徑里增加一些不必要的過程,也能成為用戶體驗(yàn)旅程中的點(diǎn)睛之筆。

就像多年前堅(jiān)果手機(jī)一代的包裝,設(shè)計(jì)師別具匠心的將包裝設(shè)計(jì)為一次充滿著童趣的體驗(yàn),雖然拆包裝的過程時(shí)間增加,但是給予用戶似曾相識(shí)的場(chǎng)景是不可替代的。


看似使用起來費(fèi)力的微信搖一搖,可以加強(qiáng)用戶的參與感和儀式感,就仿佛融合著一種占卜未知世界的神秘體驗(yàn),這種感覺是點(diǎn)擊無法給予的。當(dāng)初支付寶基于 LBS 和 AR 技術(shù)推出了 AR 實(shí)景紅包,眾多用戶不惜跨越“千山萬水”收集線索圖去尋找紅包,并樂此不疲。盡管增加了操作成本和使用阻力,但是這些富于互動(dòng)性和趣味性的體驗(yàn)帶給用戶的儀式感也是不可多得的。


5.2 維護(hù)社區(qū)生態(tài)

用戶的屬性和其產(chǎn)生的內(nèi)容質(zhì)量對(duì)于產(chǎn)品的社區(qū)生態(tài)建設(shè)有很大的影響。對(duì)于社區(qū)的認(rèn)同感越高的核心用戶越多,內(nèi)容質(zhì)量就越高,進(jìn)而社區(qū)對(duì)潛在用戶的吸引力就越大。一旦一些修養(yǎng)低或居心不良的用戶大量涌入社區(qū),就會(huì)同時(shí)帶來大量的負(fù)面內(nèi)容,造成對(duì)其他用戶的干擾,甚至導(dǎo)致他們大量流失。因此,為了讓一個(gè)產(chǎn)品的社區(qū)生態(tài)能夠健康發(fā)展,我們需要采取一些篩選方法來設(shè)置阻力,以此來篩選出對(duì)平臺(tái)有益的用戶和內(nèi)容。


5.2.1 篩選用戶


邀請(qǐng)制

很多產(chǎn)品在冷啟動(dòng)階段,為了避免垃圾用戶和提高社區(qū)質(zhì)量,會(huì)設(shè)立邀請(qǐng)制來控制用戶來源,然后根據(jù)現(xiàn)有用戶的使用反饋進(jìn)行可控的優(yōu)化迭代。這種方式可以有效地降低初期的運(yùn)營(yíng)成本,保持服務(wù)器穩(wěn)定,甚至可以制造一種供不應(yīng)求的感覺,獲得更多的討論度。


價(jià)格門檻

網(wǎng)絡(luò)騙局在社交類產(chǎn)品屢見不鮮,婚戀類產(chǎn)品更是重災(zāi)區(qū)。很多推行高端婚戀或高端社交的產(chǎn)品為了保證用戶質(zhì)量,不僅嚴(yán)防死守,還會(huì)設(shè)立價(jià)格門檻,不付費(fèi)直接無法使用,這在現(xiàn)今已經(jīng)廣泛推行的基礎(chǔ)服務(wù)免費(fèi)、增值服務(wù)收費(fèi)的收費(fèi)模式中很少見,但是確實(shí)有效地進(jìn)行了用戶篩選。



測(cè)試門檻

通過設(shè)置測(cè)試題將用戶分成不同的群體,進(jìn)行具有針對(duì)性的權(quán)限設(shè)置。比如 B 站轉(zhuǎn)正時(shí)需要完成具有社區(qū)特色的晉級(jí)考試,需要花費(fèi)的時(shí)間成本比較高,通過這種方式篩選出真正認(rèn)同 B 站社區(qū)文化的優(yōu)質(zhì)用戶,給予這些用戶更多在社區(qū)中互動(dòng)的權(quán)限,從而也大量減少了低質(zhì)量用戶的負(fù)面行為。

上述的三種用戶篩選方法是否適用,需要考慮的產(chǎn)品屬性。不同維度的篩選用戶的方法還有很多,這里只是簡(jiǎn)單舉例。


5.2.2 篩選內(nèi)容

不同的內(nèi)容形式對(duì)于社區(qū)的價(jià)值是不一樣,我們可以通過一定的方式引導(dǎo)用戶生產(chǎn)對(duì)于社區(qū)建設(shè)更有利的內(nèi)容。比如微信發(fā)布朋友圈時(shí)并沒有直接給用戶提供純文字信息的輸入方式,如果用戶想要發(fā)布純文字內(nèi)容,需要長(zhǎng)按發(fā)布按鈕才能進(jìn)入相應(yīng)界面。原因是微信官方認(rèn)為相對(duì)于純文字內(nèi)容,附有圖片的內(nèi)容對(duì)于其他用戶更具有吸引力,通過阻礙用戶使用純文字發(fā)布、鼓勵(lì)用戶使用配圖發(fā)布使得整體的朋友圈社區(qū)的內(nèi)容能夠吸引用戶瀏覽更長(zhǎng)的時(shí)間,從而也可以使朋友圈廣告得到更多的曝光。


5.3 迎合商業(yè)目標(biāo)

有時(shí)產(chǎn)品的商業(yè)目標(biāo)和用戶目標(biāo)存在一定沖突時(shí),損失一定的用戶體驗(yàn)滿足商業(yè)目標(biāo)是不得不進(jìn)行的選擇,這需要我們進(jìn)行合理的平衡。


5.3.1 功能引導(dǎo)

為了迎合商業(yè)目標(biāo),我們有時(shí)需要針對(duì)一些功能設(shè)置一定操作阻力將其進(jìn)行弱化,然后引導(dǎo)用戶去使用我們希望其使用的一些特定功能。這類阻力設(shè)計(jì)最為常見,比如通過強(qiáng)化按鈕對(duì)比進(jìn)行功能的引導(dǎo),如下圖。



5.3.2 歧視性策略

歧視性策略常見的的應(yīng)用方式就是通過 VIP 制度或等級(jí)制度將用戶進(jìn)行身份區(qū)分,針對(duì)身份等級(jí)低的用戶設(shè)置使用阻力,以便于引導(dǎo)其投入更多精力和資源,或者通過此方式給予高等級(jí)用戶優(yōu)越感,刺激其進(jìn)行分享炫耀。

16 年發(fā)布的支付寶生活圈就是一個(gè)很好的案例,芝麻信用 750 分以上才可以使用的歧視性策略非常簡(jiǎn)單粗暴。很多達(dá)標(biāo)的土豪用戶在朋友圈炫耀生活圈的截圖,等待朋友們的膜拜點(diǎn)贊?;ヂ?lián)網(wǎng)產(chǎn)品中,每增加一個(gè)動(dòng)作,用戶都會(huì)呈幾何級(jí)流失,但是支付寶的歧視性策略給了用戶巨大的動(dòng)力完成了截圖、保存、打開微信、分享照片等一系列動(dòng)作,幫助支付寶生活圈實(shí)現(xiàn)了刷屏傳播的效果。


六、總結(jié)


雖然讓用戶暢通無阻地使用產(chǎn)品是我們的目標(biāo),但是有時(shí)還需要我們合理地限制。不同的使用場(chǎng)景和商業(yè)目的共同影響著設(shè)計(jì)策略。在如今互聯(lián)網(wǎng)產(chǎn)品越來越趨于存量競(jìng)爭(zhēng)的態(tài)勢(shì)下,我們更多的工作開始專注于產(chǎn)品的優(yōu)化。希望本文能夠提供相應(yīng)的思路,助力你在產(chǎn)品優(yōu)化探索中找到可行的切入點(diǎn)。



文章來源:站酷   作者:Ballen成名

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


設(shè)計(jì)創(chuàng)新|QQ主題美化體驗(yàn)升級(jí)

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

QQ主題自2013年誕生,至今7年時(shí)間,保持了整個(gè)營(yíng)收的Top3的成績(jī),受到了廣大用戶的喜愛。隨著QQ數(shù)年來版本的迭代,我們也漸漸傾聽到了一些用戶對(duì)主題的反饋,為了給用戶帶來更好的體驗(yàn),我們決定對(duì)QQ主題從上游到下游進(jìn)行一次全面的優(yōu)化。





01 主題方案的變革

——————————

產(chǎn)品問題&用戶調(diào)研

我們對(duì)QQ主題進(jìn)行了兩輪用戶體驗(yàn)反饋和調(diào)研,發(fā)現(xiàn):目前的外網(wǎng)主題存在機(jī)型適配效果差、素材制作質(zhì)量差、缺少全局美化等體驗(yàn)問題;而同時(shí),用戶調(diào)研的結(jié)果表明我們的用戶希望體驗(yàn)到更好更高品質(zhì)更全面?zhèn)€性化的主題。





項(xiàng)目設(shè)計(jì)目標(biāo)

基于現(xiàn)網(wǎng)產(chǎn)品問題和用戶調(diào)研結(jié)果,對(duì)優(yōu)化方向進(jìn)行了歸納分類,最終確定QQ主題體驗(yàn)升級(jí)的項(xiàng)目設(shè)計(jì)目標(biāo):增加主題覆蓋范圍 ,提升主題的美化質(zhì)量 ,提升主題的可用性。


探索解決方案

為了達(dá)成上面的三個(gè)目標(biāo),一開始我們根據(jù)QQ主題的實(shí)現(xiàn)邏輯制定了初步的優(yōu)化方案:通過新增素材增加主題覆蓋范圍,通過修改舊素材提升主題可用性和質(zhì)量。



但在進(jìn)行執(zhí)行評(píng)審的時(shí)候,我們意識(shí)到,這樣的方案雖然可行,但落地成本非常的巨大,需要每個(gè)主題包內(nèi)新增兩端共1800多張切圖,花耗多家cp公司至少四個(gè)月的時(shí)間和人力。



我們不得不推倒開始的方案,開始思考:是否有更好的解決方案?


在對(duì)主題制作流程、客戶端呈現(xiàn)邏輯、日常運(yùn)營(yíng)維護(hù)工作等問題進(jìn)行深入的溯源挖掘后發(fā)現(xiàn):QQ主題目前實(shí)現(xiàn)個(gè)性化的方案是后臺(tái)下發(fā)素材包替換本地客戶端資源實(shí)現(xiàn)個(gè)性化。而這就導(dǎo)致了素材包本身是固定的內(nèi)容,只能被動(dòng)的接受版本更新帶來的種種問題。


在這樣的情況下,即使我們按照一開始的方案執(zhí)行落地,多個(gè)版本后我們?nèi)孕璐罅康娜肆θミM(jìn)行維護(hù)和更新才能保證用戶的體驗(yàn)。



所以,我們必須打破舊方案帶來的弊端,要讓素材活起來。


在綜合設(shè)計(jì)思維,開發(fā)思維,運(yùn)營(yíng)思維去思考問題后,我們提出了一個(gè)嶄新的實(shí)現(xiàn)方案:終端染色(使用Color-filter,對(duì)png進(jìn)行染色的技術(shù))+分色映射(將資源與色值進(jìn)行映射,用一套有限色板去管理無限資源的概念)。



在這套新的個(gè)性化實(shí)現(xiàn)方案支持下,設(shè)計(jì)師簡(jiǎn)單的對(duì)色板進(jìn)行配色,就能夠?qū)Q客戶端的全局顏色進(jìn)行變化。而當(dāng)版本更新發(fā)生資源變更時(shí),僅需維護(hù)通用的線上映射關(guān)系,資源即可自動(dòng)適配到應(yīng)有的顏色。




評(píng)估解決方案

針對(duì)主題方案的變革新方案,分別從優(yōu)點(diǎn)、變化、難點(diǎn)3個(gè)維度進(jìn)行綜合評(píng)估:


- 優(yōu)點(diǎn):

(1) 整體學(xué)習(xí),制作,運(yùn)營(yíng),維護(hù)的成本降低

(2) 美化范圍變大,下載資源變小,用戶體驗(yàn)得到改善

(3) 效率得到優(yōu)化,難度降低,設(shè)計(jì)師有更多時(shí)間提升主題質(zhì)量


- 變化:

(1) CP學(xué)習(xí)新的制作方式

(2) 產(chǎn)品運(yùn)營(yíng)省去了過往定期維護(hù)素材的工作

(3) 設(shè)計(jì)師在版本迭代時(shí)候進(jìn)行新資源的分色映射關(guān)系

(4) 開發(fā)人員進(jìn)行統(tǒng)一的分色映射表維護(hù)管理


- 缺點(diǎn):

(1) 方案工作量大,多達(dá)120+的界面檢驗(yàn),上千個(gè)客戶端資源,大量的代碼需要修改。

(2) 方案執(zhí)行難度大,包括如何用有限的色板兼容更多的設(shè)計(jì)需求,資源如何在不同場(chǎng)景得到更有效的復(fù)用,設(shè)計(jì)與開發(fā)未來如何進(jìn)行映射表的對(duì)接,以及版本的上下兼容。


推動(dòng)落地


設(shè)計(jì)師提出“終端染色+分色映射”的新方案后,通過積極拉動(dòng)會(huì)議,向主題業(yè)務(wù)相關(guān)的多角色進(jìn)行新舊方案的優(yōu)劣討論,方案得到一致認(rèn)同后,多方聯(lián)動(dòng)形成項(xiàng)目組。


其次進(jìn)行可行性評(píng)估,與開發(fā)結(jié)對(duì)緊密協(xié)作,共同討論難點(diǎn)攻克新方案落地要點(diǎn)。


最后基于前期可行性評(píng)估,以及難點(diǎn)預(yù)研,項(xiàng)目組規(guī)劃出階段性的落地方案。


方案的落地主要為三部分工作: 梳理標(biāo)記->歸納轉(zhuǎn)化->編譯覆蓋。



梳理標(biāo)記:


前端開發(fā)逐個(gè)查找界面的資源和代碼并標(biāo)記,交付給設(shè)計(jì)師進(jìn)行資源色值的規(guī)劃


歸納轉(zhuǎn)化:


設(shè)計(jì)師根據(jù)ui的配色規(guī)則以及個(gè)性場(chǎng)景需要,進(jìn)行ui色板的構(gòu)建及資源的顏色映射分配。


在這一過程使用騰訊文檔進(jìn)行設(shè)計(jì)語(yǔ)言與開發(fā)代碼的轉(zhuǎn)化。



編譯覆蓋:

修改代碼,讓資源支持個(gè)性化需要的染色和素材替換、錄入分色映射的騰訊文檔并進(jìn)行實(shí)機(jī)的染色編譯并和設(shè)計(jì)師共同檢驗(yàn)效果。


而在上述工作中,設(shè)計(jì)師的任務(wù)難點(diǎn)就在于色板的設(shè)計(jì)和染色規(guī)則的構(gòu)建。


首先設(shè)計(jì)師根據(jù)QQ的ui規(guī)范,建立初步的色板;下一步,創(chuàng)建界面demo,模擬資源與色板的映射關(guān)系;然后替換多個(gè)不同的色板檢驗(yàn)主題染色后多場(chǎng)景下的效果,再對(duì)色板和染色規(guī)則進(jìn)行反復(fù)的調(diào)整;最后在效果符合預(yù)期的時(shí)候,再輸出色板和染色規(guī)則并最終在真機(jī)上進(jìn)行驗(yàn)證。




第一階段成果

QQ舊主題:僅覆蓋6個(gè)界面、素材包內(nèi)涵400+切圖、日常需要花費(fèi)巨大成本維護(hù)1000多套主題。


主題新方案落地后:覆蓋范圍從6個(gè)界面擴(kuò)展到60+界面、素材切圖降低至48張、600多個(gè)資源得到梳理優(yōu)化、60+個(gè)舊主題存在的可用性問題得到解決、維護(hù)成本得到大大降低。




02 主題智能編輯器的誕生

——————————

主題新方案落地后,考慮到舊主題制作時(shí)間長(zhǎng),難度大,設(shè)計(jì)費(fèi)用高的問題,產(chǎn)品側(cè)希望設(shè)計(jì)師能配合新的染色方案去優(yōu)化主題制作、上架、驗(yàn)收的流程。


確定設(shè)計(jì)目標(biāo)

根據(jù)舊流程里各個(gè)角色反饋的問題點(diǎn),第2階段的目標(biāo)可提煉為:提升制作效率、打包效率、驗(yàn)收效率??紤]到舊流程中效率低、出錯(cuò)率高的步驟大多是人工操作部分,我們計(jì)劃設(shè)計(jì)一個(gè)智能化的主題編輯器來實(shí)現(xiàn)工業(yè)化的主題生產(chǎn)。



探索解決方案


以提升效率為目標(biāo),首先深入制作流程勘察,挖掘制作流程的關(guān)鍵核心點(diǎn),并提煉關(guān)鍵觸點(diǎn)、痛點(diǎn)問題;基于各個(gè)觸點(diǎn)關(guān)鍵問題,逐一給出解決方案,并全局的回顧整個(gè)流程,從全局去統(tǒng)領(lǐng)優(yōu)化方案;繼而以落地為導(dǎo)向,明確問題解決的優(yōu)先級(jí),穩(wěn)步前進(jìn)規(guī)劃方案落地。在解決方案中,本地編譯體驗(yàn)已實(shí)現(xiàn),其他能力落地優(yōu)先級(jí)如下:


- 首先解決智能切圖和智能配色,優(yōu)先級(jí)最高


- 其次解決規(guī)范優(yōu)化和多界面預(yù)覽,優(yōu)先級(jí)居中


- 最后是直連后臺(tái),運(yùn)營(yíng)做審核,優(yōu)先級(jí)最低



方案落地

傳統(tǒng)的主題制作中往往最費(fèi)時(shí)間和最易出錯(cuò)的就是切圖,在這里我們使用了雙重保險(xiǎn)。


保險(xiǎn)1:編輯器將內(nèi)置一套智能化的切圖合成處理方案,設(shè)計(jì)師僅需上傳極少量的必須切圖。編輯器還會(huì)對(duì)上傳的切圖會(huì)進(jìn)行命名、尺寸、格式的檢測(cè)。


保險(xiǎn)2:官方設(shè)計(jì)師預(yù)設(shè)主題的PSD/SKETCH設(shè)計(jì)模板,附帶切圖命名尺寸格式等,畫完后一鍵即可導(dǎo)出全套切圖資源。

新主題的染色規(guī)則中,色板存在21個(gè)顏色需要配色。對(duì)CP來說,即使有設(shè)計(jì)規(guī)范進(jìn)行學(xué)習(xí),也存在著出錯(cuò)的可能。為了讓制作通過率達(dá)到最高,我們計(jì)劃通過編輯器內(nèi)置的智能配色,將復(fù)雜的配色操作簡(jiǎn)化為2步操作,達(dá)到快速穩(wěn)定地輸出合格的配色的效果。


新主題色板中,顏色可分為主色系和背景色系,兩大色系下的色值再各有不同的色值要求。



從設(shè)計(jì)師的理想角度來看,如果只進(jìn)行主色和背景色的選擇,即可輸出實(shí)現(xiàn)21個(gè)顏色的話,無疑效率和通過率都會(huì)得到大大提升。


為了實(shí)現(xiàn)理想效果,我們?cè)O(shè)計(jì)了一套方案:


在選擇主色、背景色后,首先對(duì)它們進(jìn)行一個(gè)檢測(cè),在這里我們引入了WCAG2.0的標(biāo)準(zhǔn),檢測(cè)主色元素在背景色元素上的顯示是否符合大眾的閱讀要求。其次我們?cè)侔裃Q設(shè)計(jì)規(guī)范中,對(duì)21個(gè)顏色的不同微小要求,通過HSB顏色模型轉(zhuǎn)換為數(shù)據(jù)化的代碼條件并內(nèi)置在編輯器中。


這樣,CP選擇的兩個(gè)顏色,通過顏色檢測(cè)、顏色模型轉(zhuǎn)換、預(yù)設(shè)條件的微調(diào),就變成了符合我們視覺層級(jí)規(guī)范要求和可用性要求的21個(gè)顏色。



在實(shí)現(xiàn)了智能切圖、智能配色、導(dǎo)入設(shè)計(jì)稿、在線預(yù)覽、結(jié)構(gòu)化打包、手機(jī)實(shí)際預(yù)覽等能力后,編輯器的能力基本得到滿足,我們接下來對(duì)編輯器進(jìn)行框架設(shè)計(jì),在多方案權(quán)衡后,最終采用了元素作導(dǎo)航,右邊區(qū)域保持全局預(yù)覽的交互框架,并設(shè)計(jì)了編輯器的ui界面。





第二階段項(xiàng)目成果

使用編輯器前:從制作到上架需要約4周時(shí)間,每月上架主題平均為12個(gè)。


接入編輯器后:僅需一天即可完成素材的制作到上架,并且得益于制作難度的降低,可制作主題的CP得到了擴(kuò)充,目前每月上架主題穩(wěn)定在2000+個(gè)。




03 主題適配規(guī)范網(wǎng)站的搭建

——————————

在完成了主題效果優(yōu)化、主題制作優(yōu)化后,我們把注意力放在了制作上架之后的流程-適配維護(hù)。


舊的主題適配維護(hù)涉及到cp/設(shè)計(jì)師/運(yùn)營(yíng)/開發(fā)四個(gè)角色的大量人力成本。


而新主題優(yōu)化后,僅需要設(shè)計(jì)師&開發(fā)工程師兩位角色進(jìn)行低成本的操作。



但在實(shí)際工作中,版本中的不同更新都是由不同的設(shè)計(jì)師&開發(fā)負(fù)責(zé)的,適配工作往往很難執(zhí)行。所以為了保證適配的效果,除了在產(chǎn)品的工作流程中增加適配規(guī)定外,我們還希望能幫助到不同業(yè)務(wù)方降低適配的成本。



新適配流程中,設(shè)計(jì)師其實(shí)僅僅需要根據(jù)染色規(guī)則對(duì)新增資源去定映射關(guān)系,而實(shí)際映射的寫入是開發(fā)操作的。那如果兩個(gè)角色的工作能合并,并且省去學(xué)習(xí)新適配規(guī)則以及溝通的成本呢?



從幫助開發(fā)去理解分色染色的層面,我們把資源元素和顏色進(jìn)行了場(chǎng)景化的匹配應(yīng)對(duì),并且把規(guī)則關(guān)系整理成了目錄,搭建了Q-Element適配規(guī)范網(wǎng)站;開發(fā)同學(xué)在進(jìn)行適配時(shí)候僅需根據(jù)設(shè)計(jì)稿的新增部分,尋找對(duì)應(yīng)目錄下的規(guī)則關(guān)系,即可對(duì)元素進(jìn)行適配。





第三階段項(xiàng)目成果

優(yōu)化前:主題的版本適配需要設(shè)計(jì)開發(fā)產(chǎn)品的多方配合,花費(fèi)數(shù)天時(shí)間去完成適配。


優(yōu)化后:僅需開發(fā)1個(gè)小時(shí)的時(shí)間即可完成適配和驗(yàn)證。



總結(jié)


通過3個(gè)階段的努力,QQ主題美化初步完成了主題效果、主題制化、主題維護(hù)成本的三大優(yōu)化。上線半年后,目前QQ新主題已經(jīng)達(dá)到1萬八千個(gè),并且借助QQ美化平臺(tái)完成了外部創(chuàng)作人、QQ、QQ用戶三者之間的生態(tài)搭建,正源源不斷的提供給用戶更多更好的個(gè)性化主題。我們也會(huì)進(jìn)一步努力,由QQ主題開始對(duì)個(gè)性化進(jìn)行新一輪的優(yōu)化,帶給用戶更好的體驗(yàn)。



最后,廣大設(shè)計(jì)師的機(jī)會(huì)來了!如果您擅長(zhǎng)插畫或者動(dòng)畫,點(diǎn)此鏈接https://ycg.qq.com/qcc,報(bào)名參與我們的原創(chuàng)空間和QQ美化平臺(tái)項(xiàng)目。按照頁(yè)面引導(dǎo)提交作品審核,經(jīng)原創(chuàng)館審核后,就可以獲得創(chuàng)作權(quán)限。 您的原創(chuàng)作品將被QQ及QQ空間數(shù)億用戶付費(fèi)使用,并獲得相應(yīng)比例分成。




文章來源:站酷   作者:騰訊ISUX

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


該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

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

針對(duì)不同的受眾我們會(huì)做不一樣的設(shè)計(jì),今天是針對(duì)兒童進(jìn)行的產(chǎn)品設(shè)計(jì)思路的內(nèi)容分享,面對(duì)兒童產(chǎn)品,我們需要從心理生理上的區(qū)別分析,進(jìn)而推動(dòng)內(nèi)容、交互、視覺、動(dòng)畫等設(shè)計(jì),一起來了解下吧~

“小山上的風(fēng),沒有一個(gè)人知道,沒有一個(gè)人能告訴我;風(fēng)從什么地方來,風(fēng)到什么地方去?!?

英國(guó)的詩(shī)人米爾恩在給孩子的詩(shī)歌《小山上的風(fēng)》里如是寫道。

在不同的年紀(jì),這個(gè)世界帶給我們的觸動(dòng)和感知都是不一樣的。那么當(dāng)我們?yōu)閮和M(jìn)行設(shè)計(jì)時(shí),該如何去呈現(xiàn)呢?讓我們一起來探討下吧。

他們與我們

近年來,兒童產(chǎn)品的市場(chǎng)是比較火熱的,由于兒童的生長(zhǎng)變化較快,他們?cè)谛睦砗蜕砩隙寂c我們成人有較大不同,對(duì)于外界的信號(hào),他們更喜歡得到視覺和聽覺上的反饋。并且常常能夠從挑戰(zhàn)和沖突中獲得快樂,他們不在意結(jié)果,目的性較弱,還有著非常強(qiáng)烈的好奇心,無法預(yù)見其行為會(huì)引發(fā)的后果,其模仿能力的強(qiáng)弱隨著年齡成長(zhǎng)呈曲線狀呈現(xiàn)。當(dāng)我們?cè)谠O(shè)計(jì)時(shí),應(yīng)將兒童的這些特性考慮進(jìn)去。

任務(wù)旅程的設(shè)計(jì)

在某種程度上,兒童產(chǎn)品的客戶形態(tài)有些類似我們的 ToB/G 產(chǎn)品的客戶。使用產(chǎn)品的一線用戶,并非最終具有購(gòu)買權(quán)的客戶。孩子的父母是兒童類產(chǎn)品最終具有購(gòu)買權(quán)的客戶,他們對(duì)早期教育、智力投資、內(nèi)容是否健康積極等等都有較高要求。

因此我們?cè)趦?nèi)容的設(shè)計(jì)上應(yīng)更加的多元化,將任務(wù)完成后的數(shù)據(jù)量化體現(xiàn),使父母便于了解孩子情況,同時(shí)也可以從側(cè)面激勵(lì)用戶后續(xù)的付費(fèi)行為。任務(wù)旅程有多種類型,在兒童品類的設(shè)計(jì)上,我們通常采用下面這 4 種任務(wù)類型去設(shè)計(jì)。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

交互界面

好的設(shè)計(jì)可以減少認(rèn)知負(fù)擔(dān), 可以最大限度地減少理解功能交互所消耗的智力資源。在年幼的孩童時(shí)期,他們的記憶容量比成人小,我們需要關(guān)注到這一點(diǎn),怎樣的信息容量,交互層級(jí)和人機(jī)互動(dòng)才能讓他們更好的理解和認(rèn)知產(chǎn)品界面。

比如 LG 有一款面向低齡兒童的手表,表盤上只有一個(gè)按鈕和出聲孔,并且在噪雜環(huán)境下,還考慮到家長(zhǎng)的心情,非常貼心的設(shè)計(jì)了 10 秒自動(dòng)接聽的人機(jī)交互方式。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

△ 圖片來源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)

通常,我們成年人對(duì)交互體驗(yàn),產(chǎn)品易用性都抱有較高的期望,我們期望產(chǎn)品能為我們帶來效率的提升、便捷的操作、強(qiáng)烈的視覺沖擊力等等。但是,兒童與成人在人機(jī)交互的互動(dòng)上卻有著天壤之別。當(dāng)產(chǎn)品功能無法正常運(yùn)行時(shí),孩子們并不會(huì)像成年人一樣感到失望。當(dāng)設(shè)計(jì)不如他們所希望的那樣時(shí),雖然也會(huì)暫時(shí)感到沮喪,但他們?cè)谧约荷贸痰膶W(xué)習(xí)嘗試中,也習(xí)慣了那些常常無法正常進(jìn)行的任務(wù)。隨著成長(zhǎng)經(jīng)驗(yàn)的增加,他們會(huì)逐漸熟悉了解世界的運(yùn)行規(guī)則。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

△ 圖片來源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)

配色與圖形

有研究表明,在對(duì) 120 名學(xué)前兒童(3—6歲)進(jìn)行了12種顏色和12種圖形的辨認(rèn)實(shí)驗(yàn)中顯示,實(shí)驗(yàn)刺激用速示器分三種速度(0.01秒、0.05秒、0.1秒)呈現(xiàn)。結(jié)果表明:呈現(xiàn)速度對(duì)辨認(rèn)正確率有著明顯的影響。3-6歲兒童對(duì)顏色和圖形的辨認(rèn)能力均隨年齡增長(zhǎng)而逐步提高。學(xué)前兒童對(duì)顏色的辨別,在三種呈現(xiàn)速度條件下,均對(duì)黃、紅、綠三色的辨認(rèn)正確率為最高。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

圖標(biāo) icon 的設(shè)計(jì)上,簡(jiǎn)約、塊面化、造型避免抽象,例如 3 歲+的孩童已經(jīng)可以理解向前、向后的箭頭,有研究顯示,在短時(shí)段內(nèi),兒童對(duì)圖形的辨認(rèn)在不同呈現(xiàn)速度條件下出現(xiàn)優(yōu)勢(shì)與劣勢(shì)圖形之分。優(yōu)勢(shì)圖形的正確辨認(rèn)率百分比較高,而劣勢(shì)圖形則較低。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

硬件的配合運(yùn)用

現(xiàn)在市場(chǎng)上有很多兒童品類的硬件,深受家長(zhǎng)和孩子的喜愛,在軟硬件的結(jié)合上,我們要善加運(yùn)用,例如硬件自帶的攝像頭、觸摸屏、聲控等等。當(dāng)硬件與產(chǎn)品內(nèi)容相結(jié)合,可以碰撞出更加多種多樣令人振奮的新的交互方式。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析

△ 圖片來源 | 文章作者&Roobo 設(shè)計(jì)團(tuán)隊(duì)

動(dòng)畫設(shè)計(jì)

在任務(wù)旅程中,內(nèi)容合理優(yōu)質(zhì)的動(dòng)畫,廣受家長(zhǎng)及兒童的歡迎,但是動(dòng)畫頻繁變換的畫面容易引起視覺疲勞,大多數(shù)動(dòng)畫片每 6 秒會(huì)變換一次畫面轉(zhuǎn)場(chǎng),超出了幼兒視覺神經(jīng)的承受能力。在兒童不同的年齡段,注意力集中程度都是有所不同的,皮亞杰理論研究顯示 3-4 歲的兒童注意力集中的平均時(shí)長(zhǎng)為 10 分鐘,4-6 歲兒童注意力集中平均時(shí)長(zhǎng)則可達(dá) 15 分鐘。在我們?yōu)楹⒆觽冊(cè)O(shè)計(jì)他們喜愛的動(dòng)畫時(shí),要充分考慮到這些因素。運(yùn)營(yíng)類動(dòng)畫一般控制在 1 分半之內(nèi)是較為合理的。

市場(chǎng)上很多 AI 兒童伴讀機(jī)器人,是可以自動(dòng)推送產(chǎn)品內(nèi)容的,考慮到兒童的健康使用,推送動(dòng)畫的播放時(shí)間要善加利用,并減少觀看所需的步驟,在家長(zhǎng)端也需要設(shè)計(jì)對(duì)應(yīng)控制內(nèi)容的開關(guān),并將音量的控制開關(guān)放在顯眼易點(diǎn)的位置。

該如何給兒童產(chǎn)品做設(shè)計(jì)?收下這個(gè)思路分析




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

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




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

周周


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

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

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

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

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

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

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

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

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

這個(gè)時(shí)候需要特別注意的是,蘋果官方對(duì)于這種大按鈕的限制主要在于 3 個(gè)部分:

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

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

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

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

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

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

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

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

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

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

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

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

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

這次新項(xiàng)目又遇到了開發(fā)中改稿的問題,大部分都因?yàn)槿恋谋尘皥D切圖大小問題。

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

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

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

所以不得不要求我們?cè)谳敵龈袷降臅r(shí)候拋棄 png 格式,啟用 JPG。

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

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

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

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

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

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

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

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

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

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

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

唯一的 2 個(gè)問題在于:

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

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

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

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

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

2.下載 isparta

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

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

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

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

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

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

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

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

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

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





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



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



主題設(shè)計(jì)神器來啦!知識(shí)點(diǎn)Get了嗎?

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

設(shè)計(jì)系統(tǒng)基本就是組織如何構(gòu)建數(shù)字產(chǎn)品的故事,在公司內(nèi)部,設(shè)計(jì)系統(tǒng)改善了產(chǎn)品團(tuán)隊(duì)之間的協(xié)作,而設(shè)計(jì)和工程團(tuán)隊(duì)之間面臨的一個(gè)常見問題是:共享品牌準(zhǔn)則和界面信息。在開發(fā)過程中,應(yīng)該遵守還原設(shè)計(jì)的內(nèi)容,但是我們都知道這并不是那么簡(jiǎn)單。


從目標(biāo)達(dá)成的角度來說,設(shè)計(jì)規(guī)則的創(chuàng)建與執(zhí)行同樣重要。我們期望參與產(chǎn)品的每一個(gè)角色,都能記住設(shè)計(jì)規(guī)范,結(jié)合設(shè)計(jì)原則(Perceptual Pattern )最終達(dá)成界面展示在用戶面前的樣子。這也就需要設(shè)計(jì)系統(tǒng)內(nèi),有一套控制性強(qiáng)、拓展性高的方法來維系產(chǎn)品的風(fēng)格呈現(xiàn),也就是我們今天將要討論的設(shè)計(jì)變量(Design Token)


構(gòu)成


什么是設(shè)計(jì)變量(Design Token)


在數(shù)字產(chǎn)品的概念中,許多中心和微小的UI信息片段將在多個(gè)平臺(tái)上使用,被稱為:設(shè)計(jì)變量(Design Token),他們是設(shè)計(jì)系統(tǒng)中設(shè)計(jì)語(yǔ)言的構(gòu)建塊,也是設(shè)計(jì)決策的呈現(xiàn)。他們維護(hù)核心樣式的所有值:間距,顏色,版式,斷點(diǎn),動(dòng)畫,字體,平臺(tái)比例尺,組件狀態(tài)等,最終通過數(shù)據(jù)表示。命名規(guī)范和結(jié)構(gòu)化的約束,可確保產(chǎn)品體驗(yàn)的統(tǒng)一度與靈活性,更進(jìn)一步可為產(chǎn)品打造賦有情感的品牌認(rèn)知。


而對(duì)于SaaS類或者APass類的公司而言,設(shè)計(jì)變量還可提供給多個(gè)合作商所用,滿足多種定制化的訴求。



實(shí)施例舉


在以往的真實(shí)產(chǎn)品中,示例(如下),設(shè)計(jì)人員會(huì)發(fā)現(xiàn),實(shí)現(xiàn)和樣式管理的環(huán)節(jié)在開發(fā)過程中是完全斷掉的,設(shè)計(jì)語(yǔ)言轉(zhuǎn)化為開發(fā)的語(yǔ)言時(shí),缺少風(fēng)格系統(tǒng)完整性的延續(xù)。我們通??吹降膕tyle代碼都是一些幾乎沒有體感的參數(shù),且公司產(chǎn)品體量越龐大復(fù)雜,想要全局迭代就越是痛苦。


但如果我們將這些參數(shù)封裝起來,用語(yǔ)義化的方式來進(jìn)行描述,就增強(qiáng)了“系統(tǒng)下的畫面感”,如“font-size-level03”、“border-distinguish-background” 等,就是設(shè)計(jì)準(zhǔn)則下情景化的歸類與描述。


但語(yǔ)義命名只是一個(gè)最終呈現(xiàn),真正讓設(shè)計(jì)與開發(fā)者都能”讀語(yǔ)義,識(shí)運(yùn)用“。還需要我們?cè)谠O(shè)計(jì)系統(tǒng)中建立一整套完整的設(shè)計(jì)變量對(duì)應(yīng)表,并讓大家對(duì)它們有著清晰的記憶。

這里我們將以群核科技旗下,工具設(shè)計(jì)系統(tǒng)(Tools )中的設(shè)計(jì)變量為例,來給大家進(jìn)行詳細(xì)分析。首先在設(shè)計(jì)原則下,我們引申出設(shè)計(jì)變量規(guī)則的制定原則:精準(zhǔn)、靈活、易讀。

意指歸類與對(duì)象的精準(zhǔn)性,配置化的靈活度,語(yǔ)意命名上的易讀性。


對(duì)所需范圍進(jìn)行定義,命名規(guī)則與前端書寫規(guī)則達(dá)成約定。


變量的“結(jié)構(gòu)完整”,有助于設(shè)計(jì)與工程團(tuán)隊(duì)在長(zhǎng)期維護(hù)上,提升靈活度,3層繼承結(jié)構(gòu),很大程度保證了“精準(zhǔn)”“靈活”這一原則。


定義完基礎(chǔ)規(guī)則,我們具體來看設(shè)計(jì)變量在產(chǎn)品構(gòu)建中,三大主用途——1,主題定制   2,跨平臺(tái)呈現(xiàn)  3,優(yōu)化工作流


主題定制


我們找到產(chǎn)品界面中定義“核心樣式”的部分,例如顏色,字體大小,空間,動(dòng)畫,陰影,斷點(diǎn)等等。通過這些具有統(tǒng)一命名規(guī)則的實(shí)體,用于代替硬編碼的值,直接集成到設(shè)計(jì)系統(tǒng)下的組件庫(kù)里,也在日常的產(chǎn)品界面開發(fā)中使用。


通過繼承,別名變量起到了銜接全局變量和指定變量的作用,指定變量影響了最終的樣式呈現(xiàn),從而實(shí)現(xiàn)主題功能。


單個(gè)主題可供多個(gè)產(chǎn)品團(tuán)隊(duì)使用,主題本身也提供可配置化,即擁有不同的主題外觀體驗(yàn)?zāi)芰Α纭翱蛻粼V求”、“用戶自定義”,“產(chǎn)品定位差異”等,也可通過創(chuàng)建新的主題,完成新的對(duì)應(yīng)表,繼而產(chǎn)生相應(yīng)的風(fēng)格模式,例如“暗夜/日光模式”或“舒適/緊湊”布局模式,“企業(yè)品牌”定制模式等等。


主題功能在產(chǎn)品中體現(xiàn)


跨平臺(tái)呈現(xiàn)


多端設(shè)計(jì)是未來發(fā)展趨勢(shì)。最新的iPadOS 14還為許多應(yīng)用程序添加了側(cè)邊欄,包括音樂,照片,文件和快捷方式,更加高效。它使iPad更具M(jìn)ac感,也降低了學(xué)習(xí)成本。


目前我們很多產(chǎn)品都要考慮在 Web、iOS、Android 上設(shè)計(jì)。如果有新的功能增加,設(shè)計(jì)和開發(fā)會(huì)消耗較多的時(shí)間在上面,而且很難去統(tǒng)一把控。


Design Token 在跨多端設(shè)計(jì)中不僅是存儲(chǔ)樣式的變量,更是一套用于各操作系統(tǒng)間進(jìn)行翻譯的口令。我們希望通過變量來控制一些樣式的屬性,在不同終端做到自動(dòng)化的映射。


假設(shè)在移動(dòng)端正文字用14x,而在pc端為12px,雖然它們值不一樣,但他們都是使用的color_text__primary,在不同終端變量會(huì)自動(dòng)根據(jù)設(shè)備來取不同的值,通過一套設(shè)計(jì)就能實(shí)現(xiàn)多端運(yùn)行,提升效率節(jié)約成本。


優(yōu)化工作流

擁有了強(qiáng)大的設(shè)計(jì)變量樣式庫(kù)之后,它對(duì)我們的工作流程將帶來什么革新呢?


顯而易見的是,團(tuán)隊(duì)將節(jié)省非常巨大的工作量,我們不再依賴單個(gè)工程人員的修改質(zhì)量,且能更大程度減少跨組依賴。此外,早期設(shè)計(jì)工具無法與設(shè)計(jì)變量生成器進(jìn)行本地通信,我們通過優(yōu)化Sketch插件,完成了變量命名數(shù)據(jù)的輸出,使得工程人員可直觀看見變量名稱。這將為設(shè)計(jì)驗(yàn)收節(jié)省大量時(shí)間。


產(chǎn)品的大批量的歷史問題也得到解決。數(shù)字化的自動(dòng)識(shí)別效率遠(yuǎn)高于痛苦的人工調(diào)整,設(shè)計(jì)師和產(chǎn)品團(tuán)隊(duì)都將收獲全新的迭代方式,這是有歷史意義的一刻。


結(jié)語(yǔ)


簡(jiǎn)而言之,設(shè)計(jì)變量作為一個(gè)管理風(fēng)格樣式的有效手段,可集成主題管理,對(duì)跨平臺(tái)開發(fā)也同樣起到作用。簡(jiǎn)化團(tuán)隊(duì)合作協(xié)作流程,提升迭代維護(hù)效率。尤其適用于需要構(gòu)建多個(gè)Web應(yīng)用程序和跨終端應(yīng)用程序的組織。


文章來源:站酷   作者:酷家樂UED

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



短視頻創(chuàng)作者私域運(yùn)營(yíng)的研究思考

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

隨著移動(dòng)網(wǎng)民數(shù)量增速放緩,流量紅利逐漸消退,平臺(tái)競(jìng)爭(zhēng)愈發(fā)白熱化,優(yōu)質(zhì)創(chuàng)作者成為平臺(tái)的必爭(zhēng)對(duì)象。在后流量時(shí)代,抓住優(yōu)質(zhì)創(chuàng)作者的核心是平臺(tái)流量所能附加的多元價(jià)值,因此對(duì)流量的深耕與私域的變現(xiàn)成為了必定的解題走向。

面對(duì)這樣的趨勢(shì),研究者應(yīng)該如何走進(jìn)創(chuàng)作者的世界,深入洞悉他們的私域運(yùn)營(yíng)需求?我們?cè)趯?duì)多名短視頻創(chuàng)作者的研究中沉淀了一些思考。


為什么關(guān)注私域變現(xiàn)?

——理解行業(yè)和業(yè)務(wù)是選題關(guān)鍵


行業(yè)趨勢(shì):創(chuàng)作者的收入結(jié)構(gòu)正在變化

短視頻創(chuàng)作者的傳統(tǒng)收入來源是依靠播放量獲得的平臺(tái)流量分成。但隨著短視頻玩家的不斷涌入,公域流量瓜分緊張,基于粉絲沉淀的私域變現(xiàn)成為創(chuàng)作者多樣化收益的來源。

從行業(yè)公開信息以及我們所接觸的創(chuàng)作者的鮮活案例中均能發(fā)現(xiàn),非流量分潤(rùn)的收入占比正在提升,多元的私域變現(xiàn)已成為他們收入的重要組成部分。

公域流量紅利見頂


私域流量收入可觀


業(yè)務(wù)思考:平臺(tái)對(duì)創(chuàng)作者多元變現(xiàn)需求越發(fā)重視

短視頻領(lǐng)域目前呈現(xiàn)創(chuàng)作者多平臺(tái)分發(fā)的趨勢(shì)。我們?cè)谘芯恐邪l(fā)現(xiàn),多平臺(tái)混合運(yùn)營(yíng)的作者占比已接近七成;頭部作者也是如此,抖音和快手百萬粉以上的作者中有三成為雙棲作者。創(chuàng)作者精力被多平臺(tái)瓜分,而影響創(chuàng)作者對(duì)平臺(tái)的重視度和運(yùn)營(yíng)投入度的最核心因素就是經(jīng)濟(jì)收益。

在“主陣地+重點(diǎn)運(yùn)營(yíng)平臺(tái)+純分發(fā)平臺(tái)+其他關(guān)注平臺(tái)”這種金字塔型的混合經(jīng)營(yíng)模式下,平臺(tái)只有向塔尖挺進(jìn),才能留住創(chuàng)作者。于是,支持創(chuàng)作者私域營(yíng)運(yùn)及多元變現(xiàn)也成為業(yè)務(wù)后續(xù)發(fā)力的重點(diǎn)方向,我們便順理成章的將研究聚焦在這一主題上。

經(jīng)濟(jì)收益影響創(chuàng)作者平臺(tái)投入


私域運(yùn)營(yíng)拉動(dòng)平臺(tái)成為主陣地



研究誰?——找準(zhǔn)關(guān)鍵角色


私域運(yùn)營(yíng)是一個(gè)相對(duì)宏大的研究主題,要讓研究具備可行性,就要鎖定明確且合理的研究對(duì)象。找準(zhǔn)關(guān)鍵角色,能夠起到讓研究事半功倍的效果。


考慮等級(jí)能力差異,研究鎖定頭部作者

內(nèi)容創(chuàng)作的生態(tài)中,作者等級(jí)是影響需求差異化的核心變量。新手作者大多是視頻創(chuàng)作小白,還處在能力突破和粉絲積累的初始階段,更加關(guān)注成長(zhǎng)收益,即創(chuàng)作能力的提升和流量的增長(zhǎng)。而偏頭部作者已經(jīng)積累了一定的創(chuàng)作經(jīng)驗(yàn)和粉絲基礎(chǔ),更在意經(jīng)濟(jì)收益,對(duì)于內(nèi)容價(jià)值最大化需求強(qiáng)烈。

頭部作者也往往意味有著更好的粉絲基礎(chǔ)、更多的實(shí)戰(zhàn)經(jīng)驗(yàn)、更深的行業(yè)理解,對(duì)研究而言有更深的挖掘價(jià)值,也能在更短的時(shí)間內(nèi)輸出更多有效信息。所以本次我們?nèi)Χ^部作者作為目標(biāo)首選。


考慮不同垂類覆蓋,避免信息產(chǎn)生遺漏

短視頻的創(chuàng)作和運(yùn)營(yíng)日益走向細(xì)分化和垂直化,不同的細(xì)分垂直領(lǐng)域,也存在不同的變現(xiàn)方式和需求。因此,垂類領(lǐng)域是創(chuàng)作者研究中不可忽視的另外一個(gè)核心變量。

目前短視頻多元變現(xiàn)方式主要有電商帶貨、付費(fèi)專欄、咨詢服務(wù)、打賞送禮等;我們?cè)谶x擇創(chuàng)作者的內(nèi)容垂類時(shí),也有針對(duì)性的確定生活、家居、教育、情感、影視五個(gè)垂直方向,覆蓋所有變現(xiàn)類型。


 

研究什么?——梳理私域變現(xiàn)流程,搭建研究分析框架


在具體執(zhí)行前,研究者首先要確定研究的關(guān)注重點(diǎn),劃定研究的邊界。前期需要做大量的案頭研究工作,充分了解行業(yè)現(xiàn)狀。短視頻領(lǐng)域研究中有一些常用的信息獲取渠道,略作梳理,以供參考。

充分的信息獲取決定著研究的下限,能為研究洞察打好基礎(chǔ),也能幫我們形成后續(xù)研究的系統(tǒng)性框架。我們基于私域運(yùn)營(yíng)的主要流程梳理,提取出影響私域運(yùn)營(yíng)效果的四個(gè)核心環(huán)節(jié),形成最終研究產(chǎn)出的分析框架,后續(xù)關(guān)注創(chuàng)作者在該框架下各環(huán)節(jié)的具體需求及問題點(diǎn)。


 

如何理解創(chuàng)作者?

——5種思路,讓深入分析成為可能


創(chuàng)作者對(duì)于需求的表達(dá)往往是主觀和模糊的。對(duì)于B端創(chuàng)作者而言,由于具有更明確的平臺(tái)利益訴求,他們對(duì)于需求的表達(dá)甚至?xí)憩F(xiàn)出更多的“私利”和“怨念”——“我想要更多的流量分成”,“我想要完善的運(yùn)營(yíng)服務(wù)”,“我辛辛苦苦做內(nèi)容,卻沒有收益,真讓我寒心”……

但是作為平臺(tái),流量和資源的有限性決定了無法彌合多方矛盾,滿足無限需求。那么,作為研究者,我們不應(yīng)該只簡(jiǎn)單傳遞“用戶要什么”,而應(yīng)該從用戶需求出發(fā),剖析需求背后的形成原因和深層問題,告訴業(yè)務(wù)“為什么會(huì)這樣”以及“我該給什么”。

下面我們將以研究中的一些發(fā)現(xiàn)為例證,提供幾種研究分析思路,讓大家更好的理解如何還原創(chuàng)作者需求的本質(zhì)。


一.不僅呈現(xiàn)事實(shí),更要有底層思考

平臺(tái)的流量分配已經(jīng)從粗放式的內(nèi)容引入時(shí)代發(fā)展到精細(xì)化的內(nèi)容建設(shè)與資源分配時(shí)代,策略不斷積極調(diào)整,向更多優(yōu)質(zhì)的內(nèi)容傾斜。創(chuàng)作者們?cè)趯で罅髁扛掷m(xù)、有效的利用時(shí),也越來越意識(shí)到優(yōu)質(zhì)內(nèi)容有著更大的增值空間,希望在平臺(tái)的引導(dǎo)和扶持下,生產(chǎn)更優(yōu)質(zhì)的內(nèi)容不斷“圈粉”。

然而不同的平臺(tái)有不同的調(diào)性和內(nèi)容偏好,這時(shí)候創(chuàng)作者困惑的是:到底何為優(yōu)質(zhì)內(nèi)容,我又該如何去創(chuàng)作平臺(tái)喜歡的優(yōu)質(zhì)內(nèi)容?這就需要平臺(tái)通過激勵(lì)政策和創(chuàng)作活動(dòng)的引導(dǎo)給出答案。

在研究者的分析中,我們不能僅僅暴露“平臺(tái)政策不清晰”的問題,也不能只對(duì)競(jìng)品的做法做簡(jiǎn)單的羅列和復(fù)制。值得深入思考的是,現(xiàn)有政策和用戶需求的差距點(diǎn)在哪,后續(xù)優(yōu)化的原則和方向是什么?

我們基于對(duì)于作者需求的理解和競(jìng)品差異點(diǎn)的分析,提煉出平臺(tái)政策引導(dǎo)的三個(gè)優(yōu)化方向:

1.垂直化:內(nèi)容消費(fèi)需求日益多元化,平臺(tái)創(chuàng)作激勵(lì)活動(dòng)也要深入覆蓋更加多樣化的垂直細(xì)分領(lǐng)域;同時(shí),為了增強(qiáng)創(chuàng)作者感知,應(yīng)將各種激勵(lì)計(jì)劃顯性化進(jìn)行包裝,清晰傳遞平臺(tái)扶持的垂類和方向。

2.日?;?/strong>:平臺(tái)創(chuàng)作活動(dòng)應(yīng)當(dāng)多樣且高頻,充分契合不同領(lǐng)域創(chuàng)作者的興趣點(diǎn),且需具備較強(qiáng)的時(shí)效性。

3.矩陣化:內(nèi)容創(chuàng)作不再只是作者的單打獨(dú)斗,更需要在重大運(yùn)營(yíng)事件上聯(lián)合平臺(tái)和MCN機(jī)構(gòu)進(jìn)行內(nèi)容共建、資源聯(lián)動(dòng),最大化內(nèi)容的影響力。

 

二.不僅要看自身,還要看行業(yè)先行者

在短視頻賽道上,存在著諸多優(yōu)秀的先發(fā)競(jìng)爭(zhēng)者。競(jìng)品在平臺(tái)管理、運(yùn)營(yíng)服務(wù)、產(chǎn)品功能等諸多方面都能為研究提供較好的借鑒作用。在研究中,作者的表達(dá)只是我們研究的“引子”,關(guān)注競(jìng)品、對(duì)標(biāo)行業(yè)標(biāo)桿、分析差距,才能夠?qū)ψ髡咝枨笮纬筛鼫?zhǔn)確的判斷,對(duì)滿足需求的方式和重要性層級(jí)形成有效啟發(fā)。

以平臺(tái)運(yùn)營(yíng)服務(wù)支持為例,競(jìng)品平臺(tái)的做法為我們提供了良好的借鑒意義,也形成了行之有效的業(yè)務(wù)參考。平臺(tái)與作者的理想關(guān)系是共贏共生,在服務(wù)過程中,需將平臺(tái)的玩法透明地傳遞給作者,讓作者對(duì)于如何運(yùn)營(yíng)、如何變現(xiàn)心里有底,建立“只要跟著平臺(tái)走就沒錯(cuò)”的信賴感,與平臺(tái)之間形成更強(qiáng)的依存關(guān)系。


三.關(guān)注生態(tài)各角色,納入C端視角

內(nèi)容創(chuàng)作生態(tài)包括平臺(tái)、B端創(chuàng)作者、C端用戶三種主要角色。創(chuàng)作者運(yùn)營(yíng)的目標(biāo)受眾是C端用戶,對(duì)用戶更有吸引力的內(nèi)容才更容易形成粉絲沉淀。因此,研究B端創(chuàng)作者,B-C聯(lián)動(dòng)的分析視角尤為關(guān)鍵。我們可以從“C端用戶要什么”,推導(dǎo)出平臺(tái)需要幫“B端作者做什么”,進(jìn)而給出更貼合創(chuàng)作者實(shí)際運(yùn)營(yíng)情況的賦能措施。

研究發(fā)現(xiàn),在粉絲沉淀環(huán)節(jié),從C端視角出發(fā),內(nèi)容是形成作者關(guān)注關(guān)系的關(guān)鍵,也是塑造作者IP形象的關(guān)鍵。那么,對(duì)應(yīng)到對(duì)B端需求的滿足上,平臺(tái)就應(yīng)該為其優(yōu)質(zhì)內(nèi)容的露出提供更多能力支持,包括內(nèi)容的自主管理、內(nèi)容的連帶互通功能,最大化發(fā)揮內(nèi)容的價(jià)值,充分賦能創(chuàng)作者。


四.聚焦群體差異,對(duì)細(xì)分需求保持敏感

不同類型的作者有不同的訴求,研究中需要更多關(guān)注差異、滿足差異。

以變現(xiàn)轉(zhuǎn)化環(huán)節(jié)為例,建立用戶信任感是創(chuàng)作者的一大需求。商業(yè)社會(huì)、信任為王,信任是形成購(gòu)買的起點(diǎn)。平臺(tái)要重視對(duì)創(chuàng)作者身份的包裝與強(qiáng)化,外露關(guān)鍵信息,快速建立用戶對(duì)作者的信任感,從而促進(jìn)付費(fèi)轉(zhuǎn)化。在這個(gè)過程中,不同垂類下促成用戶下單購(gòu)買的信息是不同的,作為研究者,應(yīng)該對(duì)差異化的信息需求保持敏感。研究發(fā)現(xiàn),電商購(gòu)買中用戶更看重優(yōu)惠折扣和交易信息;而專欄購(gòu)買、付費(fèi)咨詢,則更需要強(qiáng)調(diào)身份背書、作者榮譽(yù)等專業(yè)信息,以及增強(qiáng)作者和粉絲的溝通與交流,提升用戶信任度。


基于以上分析,業(yè)務(wù)在信息外露、增強(qiáng)作者身份形象感知上也規(guī)劃了進(jìn)一步的優(yōu)化措施,促進(jìn)用戶付費(fèi)轉(zhuǎn)化。


五.不僅看短視頻,還看垂直行業(yè)賽道

依托于短視頻平臺(tái)的私域變現(xiàn),本質(zhì)上還是電商/知識(shí)付費(fèi),短視頻只是在商品之外額外提供了一個(gè)內(nèi)容展現(xiàn)、IP塑造的自媒體營(yíng)銷方式。因此,研究視角不能僅僅局限在短視頻本身,更要學(xué)習(xí)垂直賽道的玩法,如:電商領(lǐng)域?qū)?biāo)淘寶、盒馬;知識(shí)付費(fèi)領(lǐng)域?qū)?biāo)得到、小鵝通等成熟玩家。他們?cè)谄涓髯灶I(lǐng)域已經(jīng)形成較為成熟的變現(xiàn)模式,短視頻平臺(tái)在交易閉環(huán)的實(shí)現(xiàn)效果上需要向這些垂直賽道產(chǎn)品看齊。

縱觀行業(yè)趨勢(shì),短視頻平臺(tái)也在不斷引入產(chǎn)業(yè)鏈上的更多合作伙伴,例如:上游引入電商服務(wù)商進(jìn)行供貨服務(wù)和產(chǎn)業(yè)帶打造;中游引入內(nèi)容服務(wù)商提供創(chuàng)作者運(yùn)營(yíng)能力培訓(xùn)、代運(yùn)營(yíng)服務(wù);下游引入品牌服務(wù)商助力營(yíng)銷推廣,以此提高平臺(tái)變現(xiàn)能力,共建生態(tài)繁榮。


結(jié)語(yǔ):理解創(chuàng)作者,先要成為創(chuàng)作者


B端創(chuàng)作者的研究相對(duì)而言對(duì)研究者具有更大的挑戰(zhàn),需要具備更豐富的行業(yè)知識(shí)儲(chǔ)備和更深入的問題洞察能力。理解創(chuàng)作者、理解內(nèi)容創(chuàng)作生態(tài)才能為業(yè)務(wù)提出更切實(shí)可行的落地建議。

理解創(chuàng)作者,不能僅僅是走近創(chuàng)作者,而是要成為創(chuàng)作者,親身經(jīng)歷才能更有感悟,這也是無論做任何領(lǐng)域的研究,作為研究者都應(yīng)該具有的態(tài)度。

短視頻行業(yè)正經(jīng)歷著它蓬勃的生長(zhǎng),未來有著無限的可能性,希望你和我們一起經(jīng)歷、一起探索,也希望我們的思考能夠?yàn)槟銕硪恍﹩l(fā)。

文章來源:優(yōu)設(shè)   作者:百度MEUX

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


日歷

鏈接

個(gè)人資料

存檔