首頁

用戶體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來看看這些應(yīng)用原理!

seo達(dá)人


1、菲茨定

圖片

選中目標(biāo)所需時(shí)間與移動(dòng)距離長(zhǎng)短和目標(biāo)面積大小有關(guān)。(與距離負(fù)相關(guān),與面積正相關(guān))

 

現(xiàn)實(shí)中的應(yīng)

圖片

在商場(chǎng)中尋找洗手間取決于標(biāo)志的大小及步行的距離。為了滿足這兩個(gè)標(biāo)準(zhǔn),標(biāo)志設(shè)計(jì)得更大、更容易接近。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 左側(cè)頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區(qū)分;右側(cè)頁面CTA按鈕尺寸很大,能讓用戶清晰識(shí)別。

 

2、希克定律

圖片

決策所需要花費(fèi)的時(shí)間隨著選擇的數(shù)量和復(fù)雜性增加而增加。

 

現(xiàn)實(shí)中的應(yīng)

圖片

與餐廳相比,快餐店的菜單選項(xiàng)有限。因此顧客點(diǎn)餐速度更快,門店提供的服務(wù)也更快。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在Whatsapp上轉(zhuǎn)發(fā)消息時(shí),會(huì)在“最近聊天”列表上方看到“經(jīng)常聯(lián)系”的3個(gè)好友。這對(duì)用戶來說是一種簡(jiǎn)單的交互,幫助用戶節(jié)省操作時(shí)間。

 

3、共域定律

圖片

被一個(gè)顯而易見的邊框包圍起來的多個(gè)元素,被視為一個(gè)群組。(從屬于格式塔理論)

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對(duì)這家服裝店一無所知,顧客也會(huì)將一個(gè)貨架內(nèi)的商品關(guān)聯(lián)成相似的東西。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 過濾器被封閉在產(chǎn)品頁面之外的單獨(dú)區(qū)域中,因此可以清楚地識(shí)別左右兩部分的差異。

 

4、雅各布定律

圖片

用戶將大部分時(shí)間花在別人家的網(wǎng)站(產(chǎn)品)上,而不是你的。這意味著他們希望你的網(wǎng)站(產(chǎn)品)跟別人的有相同的使用方式。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

假設(shè)家中的陽臺(tái)是一扇推拉門,我們可能希望酒店的陽臺(tái)門也以同樣的方式操作。因此如果酒店有一個(gè)滑動(dòng)門,我們可能會(huì)下意識(shí)地先去推門。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 以上是國(guó)外知名的電商網(wǎng)站導(dǎo)航欄設(shè)計(jì),這幾個(gè)網(wǎng)站導(dǎo)航欄中顯示的信息及其結(jié)構(gòu)都非常相似:左側(cè)是品牌標(biāo)志,中間為搜索欄,右側(cè)為其他選項(xiàng)(購(gòu)物車/個(gè)人賬戶)。

 

5、系列位置效應(yīng)

圖片

用戶更容易記住系列中出現(xiàn)的第一項(xiàng)(首因效應(yīng))和最后一項(xiàng)(近因效應(yīng))。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

我們通常更容易記住某個(gè)電話號(hào)碼的前4位或后3位,這條法則也是銀行卡號(hào)被分成4組數(shù)字的原因。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在亞馬遜主頁上,網(wǎng)站的第一部分總是顯示最重要的內(nèi)容:導(dǎo)航包含logo、搜索和其他重要功能;輪播圖通過圖形設(shè)計(jì)吸引用戶的目光,引導(dǎo)新的交易或優(yōu)惠。

 

6、馮·雷斯托夫效應(yīng)

圖片

又稱隔離效應(yīng)。當(dāng)存在多個(gè)相似物體時(shí),與眾不同的物體最容易被記住。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在商場(chǎng)購(gòu)物時(shí),相較于普通裝飾的門店,我們更有可能記住或?qū)⒆⒁饬D(zhuǎn)移到具有霓虹燈效果的門店上。

 

設(shè)計(jì)應(yīng)用

圖片

▲ App上有新消息時(shí),會(huì)在圖標(biāo)上用紅點(diǎn)顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導(dǎo)用戶點(diǎn)擊并查看消息。

 

7、審美可用性效應(yīng)

圖片

用戶通常認(rèn)為漂亮的設(shè)計(jì)更易用。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

當(dāng)參觀汽車展廳時(shí),我們通常會(huì)對(duì)汽車精美的展示感到驚嘆,并立即對(duì)這個(gè)品牌產(chǎn)生積極的印象。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當(dāng)訪問像愛彼迎這樣干凈簡(jiǎn)潔的網(wǎng)站時(shí),我們會(huì)下意識(shí)地信任這個(gè)產(chǎn)品,也確保了用戶對(duì)品牌的信任。

 

8、峰終定律

圖片

人們?cè)u(píng)論體驗(yàn)優(yōu)劣,大多基于峰值和結(jié)束時(shí)的感受,而不是所有環(huán)節(jié)的平均值。

 

現(xiàn)實(shí)中的應(yīng)用

圖片

在足球比賽中,整場(chǎng)的觀看體驗(yàn)將根據(jù)比賽結(jié)束(誰獲勝)和比賽高潮(誰進(jìn)球最多/比賽中最激動(dòng)人心的時(shí)刻)來判斷。

 

設(shè)計(jì)應(yīng)用

圖片

▲ 在夜晚非常饑餓的時(shí)候,我們使用訂餐App選擇食物時(shí),卻被告知付款失敗。這時(shí)候App界面設(shè)計(jì)的再好看也無關(guān)緊要,訂餐失敗就是從這次體驗(yàn)中收獲的結(jié)果。

 


 

原文地址:Clip設(shè)計(jì)夾(公眾號(hào))

作者:Clippp

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》用戶體驗(yàn)設(shè)計(jì)法則應(yīng)該怎么用?來看看這些應(yīng)用原理!

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

截屏2021-05-13 上午11.41.03.png

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


Figma自動(dòng)布局賦能B端設(shè)計(jì)

周周

排版布局可以響應(yīng)式的隨設(shè)計(jì)師對(duì)內(nèi)容的增刪改而自動(dòng)調(diào)整,無需手動(dòng)修改徒增成本,進(jìn)而大大提升工作效率。

交互規(guī)范制定指南

周周

瀏覽了許多關(guān)于“設(shè)計(jì)規(guī)范”的文章,發(fā)現(xiàn)很多都是在針對(duì)通用流程和視覺方面在整理,關(guān)于交互層面的內(nèi)容比較少?;诖?,結(jié)合最近項(xiàng)目中沉淀的實(shí)際案例,以及參考了不少行業(yè)通用的設(shè)計(jì)規(guī)范,總結(jié)了一篇關(guān)于搭建交互規(guī)范的流程、框架、要點(diǎn)。希望能夠幫助大家更好的沉淀交互規(guī)范。

B端產(chǎn)品設(shè)計(jì)規(guī)范

周周

整理了一套B端設(shè)計(jì)規(guī)范,包括色彩規(guī)范、字體規(guī)范、圖標(biāo)規(guī)范、布局柵格、組件規(guī)范。

用戶體驗(yàn)度量模型

周周

本文介紹了幾個(gè)關(guān)于用戶體驗(yàn)度量的模型,UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型,它們各有切入點(diǎn),也各有其適應(yīng)場(chǎng)景。對(duì)各個(gè)模型的概念和它們相應(yīng)的維度做了詳細(xì)的介紹。

產(chǎn)品體驗(yàn)增長(zhǎng)中的3個(gè)核心招式

周周

本文將以「產(chǎn)品與用戶之間的信任」為出發(fā)點(diǎn),從產(chǎn)品體驗(yàn)的角度,對(duì)比產(chǎn)品體驗(yàn)層面的差異化,為大家提供設(shè)計(jì)思路,助力產(chǎn)品數(shù)據(jù)的增長(zhǎng),設(shè)計(jì)出既好看又好用的產(chǎn)品界面。

開啟新時(shí)代的響應(yīng)式網(wǎng)頁設(shè)計(jì)

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

///

它是如何開始的-固定屏幕

在千禧年來臨之前,我們首先開始在單一視圖屏幕中進(jìn)行UI設(shè)計(jì),這類屏幕在當(dāng)時(shí)最流行的尺寸是640x480。大多數(shù)時(shí)候,我們甚至沒有考慮讓屏幕滾動(dòng),而是在特定區(qū)域或文本局部區(qū)塊中設(shè)置了內(nèi)部滾動(dòng)條。毋庸置疑,當(dāng)時(shí)的大部分網(wǎng)頁也是用Flash或HTML創(chuàng)建的,并帶有用于布局的表格。那是在智能手機(jī)出現(xiàn)之前,隨著事物的發(fā)展,我們經(jīng)歷了第一個(gè)向“響應(yīng)式”設(shè)計(jì)的根本轉(zhuǎn)變。我們已經(jīng)走了很長(zhǎng)一段路,CSS已得到長(zhǎng)足的發(fā)展,“響應(yīng)式”網(wǎng)頁設(shè)計(jì)從2010年開始才真正獲得了專有工具。

圖表來源: https://www.webdesignmuseum.org/web-design-history


///

它現(xiàn)在怎么樣-響應(yīng)式設(shè)計(jì)

隨著CSS3的發(fā)布,我們獲得了對(duì)“媒體查詢”(Media Queries)的訪問權(quán)限(譯者注:隨著移動(dòng)互聯(lián)網(wǎng)的興起,我們需要適配多種移動(dòng)端設(shè)備,這就需要用到Media Queries,即“媒體查詢”),此后不久,Ethan Marcotte在2009年底創(chuàng)造了“響應(yīng)式設(shè)計(jì)”一詞。十多年來,我們一直使用“響應(yīng)式網(wǎng)頁設(shè)計(jì)” (RWD) 創(chuàng)建網(wǎng)頁布局,作為一種網(wǎng)頁設(shè)計(jì)方法,僅需基于一種屏幕尺寸進(jìn)行設(shè)計(jì),“響應(yīng)式”使我們的設(shè)計(jì)能夠適配各種設(shè)備和屏幕尺寸。

在早期,當(dāng)移動(dòng)電話還不兼容媒體查詢或JavaScript時(shí),“移動(dòng)優(yōu)先”和”漸進(jìn)式增強(qiáng)”的概念就成為了非常流行的方法,當(dāng)時(shí)有很多CSS完全不受支持。

用我們今天的話來說響應(yīng)式設(shè)計(jì),我們認(rèn)為頁面的布局要適配整個(gè)瀏覽器、屏幕大小和那些需要投射到整個(gè)布局上的限制。當(dāng)需要設(shè)計(jì)從桌面端調(diào)整為移動(dòng)設(shè)備屏幕所需的尺寸時(shí),我們使用“媒體查詢”來更改整個(gè)頁面布局。

 

///

它的未來是什么-組件驅(qū)動(dòng)

很快,使用這種“響應(yīng)式”設(shè)計(jì)方法可能會(huì)被認(rèn)為與使用表格進(jìn)行頁面布局一樣過時(shí)—就像我們?cè)?0年代所做的那樣。

我們通過基于viewport(視口)的“媒體查詢”獲得了許多強(qiáng)大的工具,但我們也缺乏很多適配的可能性,因?yàn)椤懊襟w查詢”是一個(gè)適用于整個(gè)頁面的通用解決方案,并且對(duì)每個(gè)用戶來說都一樣。我們?nèi)狈憫?yīng)“用戶需求”的能力,也缺乏將“響應(yīng)式”樣式注入“組件”本身的能力。


當(dāng)我們談到組件時(shí),這里指的是頁面上的“元素”,這些元素可以由其它“元素”的集合組成。例如卡片、橫劃卡或推薦模塊之類的UI內(nèi)容,每個(gè)“塊”都由各種更小的“構(gòu)建塊”組成。這些組件拼湊在一起構(gòu)成我們的網(wǎng)頁。我們可以使用 global viewport information(全局視口信息)來設(shè)置這些組件,但它們?nèi)匀粺o法擁有自己的風(fēng)格。當(dāng)我們的設(shè)計(jì)系統(tǒng)是基于“組件”的而不是基于“頁面”的時(shí),這使得它變得更加困難。

好消息是這個(gè)生態(tài)系統(tǒng)正在發(fā)生變化,而且它正在迅速變化,這需要我們進(jìn)行一些思維轉(zhuǎn)變:考慮如何設(shè)計(jì)和定義組件樣式以及它們?nèi)绾芜m應(yīng)周圍環(huán)境。

CSS正在不斷發(fā)展,“響應(yīng)式”網(wǎng)頁設(shè)計(jì)的新時(shí)代即將到來。從目前的情況來看,自從我們第一次引入 “響應(yīng)式網(wǎng)頁設(shè)計(jì)” (RWD) 以來,僅僅10多年的時(shí)間,這個(gè)生態(tài)系統(tǒng)已經(jīng)準(zhǔn)備好迎接CSS發(fā)生一些相當(dāng)大的改變。


讓我們深入研究一下可以期待哪些類型的變化,這會(huì)如何改變我們的設(shè)計(jì)方法,以及我們?nèi)绾慰紤]界面設(shè)計(jì)。

 

///

用戶能夠設(shè)置基于個(gè)人偏好的“媒體查詢”

簡(jiǎn)單來說,我們可以期待新的基于偏好的“媒體查詢”來幫助我們更好地“響應(yīng)”用戶。它們將使我們能夠根據(jù)用戶自己的特定偏好或需求來設(shè)定網(wǎng)頁樣式。這將使我們能夠根據(jù)用戶的體驗(yàn)偏好來調(diào)整用戶體驗(yàn)。

這絕不是一個(gè)完整的列表,但能給你一些想法,這些基于偏好的“媒體查詢”可能包括:

這些將幫助我們構(gòu)建更具活力和個(gè)性化的網(wǎng)頁體驗(yàn),專門滿足我們用戶的專屬需求,尤其是那些希望網(wǎng)站易于訪問的用戶。更進(jìn)一步說,這些基于偏好的“媒體查詢“尊重任何用戶已經(jīng)在操作系統(tǒng)設(shè)置的偏好。舉個(gè)例子,當(dāng)用戶的操作系統(tǒng)偏好設(shè)定為“減少動(dòng)效”時(shí),他們很可能不喜歡你頁面上的超級(jí)華麗的介紹、加載或飛入的動(dòng)畫動(dòng)效。我們應(yīng)先尊重他們的偏好,并為其他人提供“動(dòng)效增強(qiáng)”的體驗(yàn)。

另一個(gè)流行的媒體查詢是@prefers-color-scheme(配色偏好設(shè)定),它允許我們根據(jù)用戶的偏好和操作系統(tǒng)中的設(shè)置將我們的設(shè)計(jì)更改為“亮色模式”或“暗色模式”。這不依賴于用戶需要手動(dòng)來更改“暗色模式”,它會(huì)自動(dòng)發(fā)生。

///

“容器查詢”為你的設(shè)計(jì)系統(tǒng)注入新的生命力

CSS 中最令人興奮的新興領(lǐng)域之一是“容器查詢”(container queries),通常也稱為“元素查詢”。從基于“頁面”的“響應(yīng)式”設(shè)計(jì)到基于“容器”的“響應(yīng)式”設(shè)計(jì)的轉(zhuǎn)變對(duì)發(fā)展“設(shè)計(jì)系統(tǒng)”的作用價(jià)值不容低估,盡管今天使用它并不安全,但重要的是要了解其發(fā)展方向。

簡(jiǎn)而言之,“容器查詢”將允許我們基于“父級(jí)容器”而不是整個(gè)頁面來設(shè)置規(guī)則。這意味著任何組件都更加獨(dú)立,與現(xiàn)代設(shè)計(jì)系統(tǒng)保持一致,真正成為“即插即用”模塊,可以轉(zhuǎn)移到任何頁面或布局,而且無需根據(jù)新環(huán)境重新考慮所有內(nèi)容。

“容器查詢”為我們?nèi)绾我?guī)劃、設(shè)計(jì)和構(gòu)建特定組件提供了一種更加動(dòng)態(tài)的方法,因?yàn)榻M件本身擁有它的響應(yīng)信息。

甚至Ethan Marcotte自己也表達(dá)了為什么“容器查詢”如此重要,我們應(yīng)該研究一下。

 

///

考慮各種形態(tài)因素

由于各種“形態(tài)因素”(form factors)的變化和擴(kuò)展,例如新的屏幕類型,可折疊屏,我們需要“媒體查詢”來考慮這些場(chǎng)景。在這里提到的所有內(nèi)容中,請(qǐng)記住,這是最具實(shí)驗(yàn)性的,并且只是一項(xiàng)正在進(jìn)行的工作,仍在嘗試解決我們可能遇到的任何復(fù)雜問題,同時(shí)考慮未來“形體因素”可能會(huì)如何發(fā)展。

在可折疊屏場(chǎng)景中,原型中有一些“媒體查詢”可以讓你定位屏幕跨度以及我們?nèi)绾巫寖?nèi)容根據(jù)新環(huán)境進(jìn)行適配。例如,你可以在一個(gè)屏幕上放置一個(gè)收起的側(cè)邊欄(或菜單),并允許內(nèi)容在另一個(gè)屏幕上展開并隨頁面滾動(dòng)。

 

///

為什么我們需要它?

我知道你在想什么,我們已經(jīng)從事網(wǎng)頁設(shè)計(jì)并使用“響應(yīng)式”來進(jìn)行網(wǎng)頁設(shè)計(jì)10余年了。我們對(duì)其相當(dāng)滿意,那么為什么要改變呢?如果我們真的以終局視角來看響應(yīng)式設(shè)計(jì),那么它就是關(guān)于個(gè)人用戶的用戶體驗(yàn)設(shè)計(jì)。我們正朝著一個(gè)與每一位個(gè)體用戶高度相關(guān)的時(shí)代邁進(jìn)。我們的網(wǎng)頁體驗(yàn)應(yīng)該去適應(yīng)用戶的需求偏好。隨著設(shè)計(jì)系統(tǒng)的發(fā)展以及我們?nèi)绾蝿?chuàng)建更便攜的網(wǎng)頁,諸如“容器查詢”之類的工具將變得非常有意義。

配圖:CSS 將基于各個(gè)層級(jí)來確定用戶的最佳體驗(yàn)

 

考慮到這一點(diǎn),這意味著我們現(xiàn)在可以使用基于頁面的媒體查(包括跨越屏幕的細(xì)微差別)來設(shè)計(jì)宏觀布局;使用容器查詢的組件設(shè)計(jì)微觀布局;使用基于用戶偏好的媒體查詢,根據(jù)用戶獨(dú)特的偏好和需求定制用戶體驗(yàn)。

 

對(duì)于新的響應(yīng)式設(shè)計(jì),有許多新概念正在被原型化和概念化-請(qǐng)看下面的延伸閱讀。所有這些協(xié)同工作的方式需要我們從根本上轉(zhuǎn)變我們對(duì)設(shè)計(jì)和用戶獨(dú)特體驗(yàn)的看法。我們需要更加適應(yīng)這樣一個(gè)事實(shí):即我們的設(shè)計(jì)不是靜態(tài)的,不僅在布局上,還有在用戶可獲得的體驗(yàn)中,我們需要學(xué)會(huì)在這種模糊性中做出計(jì)劃。網(wǎng)頁和設(shè)計(jì)的未來變得越來越復(fù)雜,我們需要適應(yīng)和挑戰(zhàn)自己,理解“新響應(yīng)式”體驗(yàn)的意義。

 

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


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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ù)

延遲增強(qiáng)——視頻信息流廣告的提轉(zhuǎn)秘訣

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

伴隨短視頻平臺(tái)的崛起,移動(dòng)互聯(lián)網(wǎng)的主流內(nèi)容消費(fèi)形態(tài)向短視頻視聽語言轉(zhuǎn)變,視頻信息流廣告的時(shí)代已經(jīng)來臨。如何通過設(shè)計(jì)提升轉(zhuǎn)化,是視頻信息流廣告所面臨的挑戰(zhàn)。


為了提升廣告轉(zhuǎn)化效果,我們結(jié)合實(shí)際項(xiàng)目,通過大量的實(shí)驗(yàn)與思考,梳理并總結(jié)了一套適用于視頻信息流廣告的轉(zhuǎn)化組件呈現(xiàn)原則,我們將其命名為“延遲增強(qiáng)”。涵蓋了沉浸式豎視頻流、圖文混合信息流、橫視頻列表流等各類常見信息流場(chǎng)景。


///

延遲增強(qiáng)是什么?


視頻信息流廣告有三要素:內(nèi)容、框架、轉(zhuǎn)化組件。其中廣告內(nèi)容來源于廣告主投放的物料,基礎(chǔ)框架需對(duì)齊宿主保持一致性,所以僅有承載轉(zhuǎn)化信息和行為的轉(zhuǎn)化組件,是可設(shè)計(jì)部分。 


“延遲增強(qiáng)”就是針對(duì)“轉(zhuǎn)化組件”的一種伴隨視頻內(nèi)容分階段/漸進(jìn)式的呈現(xiàn)方式。它由消費(fèi)者決策時(shí)的理想心理動(dòng)線,結(jié)合廣告行為推導(dǎo)得出,并經(jīng)過實(shí)驗(yàn)驗(yàn)證了其對(duì)于轉(zhuǎn)化提升的有效性。


“延遲增強(qiáng)”包括兩個(gè)階段:1.廣告展現(xiàn)初始階段,延遲展現(xiàn)廣告意圖,通過內(nèi)容吸引潛在用戶;2.廣告內(nèi)容逐步呈現(xiàn)階段,轉(zhuǎn)化組件漸進(jìn)式增強(qiáng),輔以增益信息,不斷強(qiáng)化,引導(dǎo)轉(zhuǎn)化行為。


它指導(dǎo)了轉(zhuǎn)化組件從“呈現(xiàn)”到“增強(qiáng)”的全流程,從時(shí)機(jī)(出現(xiàn)&增強(qiáng)時(shí)機(jī))/引導(dǎo)(動(dòng)效&互動(dòng)引導(dǎo))/前置(信息&轉(zhuǎn)化前置)三個(gè)部分,幫助提升廣告轉(zhuǎn)化效果。



///

時(shí)機(jī)-延遲增強(qiáng)如何呈現(xiàn)?


轉(zhuǎn)化組件的呈現(xiàn)時(shí)機(jī)包含“何時(shí)展現(xiàn)”與“何時(shí)增強(qiáng)”兩個(gè)部分,前者幫助增加廣告接收率,后者提升廣告轉(zhuǎn)化率。


01/ 出現(xiàn)時(shí)機(jī):

延遲展現(xiàn)廣告意圖,可以提升廣告賣點(diǎn)的展現(xiàn)機(jī)率


互聯(lián)網(wǎng)的快速發(fā)展使得受眾被動(dòng)卷入爆炸式增長(zhǎng)的資訊信息體中,廣告借助這一媒介迅速發(fā)展,但也因?yàn)椴糠稚虡I(yè)廣告的過度宣傳與其降低用戶信息獲取便捷性的本質(zhì),不可避免的使受眾產(chǎn)生了心理上的逆反與抵觸情緒,從源頭拒絕了廣告信息。

 

所以對(duì)廣告來說,在廣告展現(xiàn)初始,延遲展現(xiàn)廣告意圖,融入內(nèi)容,可以緩解受眾的抵觸情緒,提升廣告賣點(diǎn)的展現(xiàn)機(jī)率。



02/ 增強(qiáng)時(shí)機(jī):

通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī),可以有效提升轉(zhuǎn)化


對(duì)廣告來說,搭配廣告內(nèi)容進(jìn)行增強(qiáng),通過內(nèi)容積累購(gòu)買欲/信任感,然后通過階段性的增強(qiáng)來提示操作,對(duì)比一成不變能起到更好的轉(zhuǎn)化效果。


我們首先嘗試了程序化的增強(qiáng)時(shí)機(jī),在不增加技術(shù)成本的前提下,根據(jù)歷史經(jīng)驗(yàn),面向不同的廣告均采用固定時(shí)段的階段性增強(qiáng)。


但不同的廣告物料內(nèi)容不同,不同的用戶偏好也不同,固定的增強(qiáng)時(shí)機(jī)并不能很好的滿足所有廣告需求。所以在技術(shù)能力可以承載的時(shí)候,我們采用了動(dòng)態(tài)時(shí)機(jī)策略,通過用戶行為和視頻特征動(dòng)態(tài)決定增強(qiáng)時(shí)機(jī),在程序化增強(qiáng)時(shí)機(jī)之后,再次實(shí)現(xiàn)了轉(zhuǎn)化提升。


undefined


///

引導(dǎo)-延遲增強(qiáng)如何引導(dǎo)轉(zhuǎn)化行為?


轉(zhuǎn)化組件如何引導(dǎo)轉(zhuǎn)化,則可分為基礎(chǔ)的視覺引導(dǎo)與進(jìn)階的互動(dòng)引導(dǎo),前者幫助搶奪視覺注意力,后者則能夠在互動(dòng)體驗(yàn)中植入部分幫助決策的“小心思”。

 

01/ 視覺引導(dǎo):

適當(dāng)增加視覺吸引點(diǎn),可以有效引導(dǎo)點(diǎn)擊

 

延遲增強(qiáng)需要通過階段性的增強(qiáng)來提示操作,而如何增強(qiáng)能有效吸引注意則需要琢磨,已有實(shí)驗(yàn)表明轉(zhuǎn)化按鈕增加掃光動(dòng)效與智能取色,能有效吸引注意,引導(dǎo)點(diǎn)擊,對(duì)轉(zhuǎn)化提升有良好效果



02/ 互動(dòng)引導(dǎo):

讓用戶主動(dòng)選擇,可以增加廣告曝光,輔助轉(zhuǎn)化決策

 

互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)對(duì)于用戶交互體驗(yàn)的追求越發(fā)極致,如影視行業(yè)走向可交互網(wǎng)劇,本質(zhì)上是從用戶接收轉(zhuǎn)變?yōu)橛脩糁鲃?dòng)參與,用戶本身對(duì)于獲得優(yōu)質(zhì)體驗(yàn)的意識(shí)逐漸覺醒。商業(yè)化產(chǎn)品也需要緊跟“體驗(yàn)”與“互動(dòng)”,將廣告變?yōu)榛?dòng)體驗(yàn)或具備使用價(jià)值的信息,讓用戶從被動(dòng)瀏覽到主動(dòng)參與,掌握對(duì)廣告的選擇權(quán)。

 

以互動(dòng)投票為例,我們通過用戶與用戶之間的觀點(diǎn)表達(dá),以投票選擇的形式誘發(fā)群體性選擇,引起好奇心與同儕壓力

 

若用戶選擇符合群體選擇,則帶來群體性背書,增強(qiáng)信任感;若用戶選擇不符合群體選擇,基于從眾心理,用戶極有可能對(duì)群體選擇產(chǎn)生好奇,從而瀏覽兩種選項(xiàng)的內(nèi)容,有效的增加了品牌曝光。


undefined


///

前置-延遲增強(qiáng)如何幫助轉(zhuǎn)化達(dá)成?

 

轉(zhuǎn)化組件的前置主要包含信息前置與轉(zhuǎn)化前置,前者輔助轉(zhuǎn)化決策,后者幫助便捷操作,更好更快的完成轉(zhuǎn)化。


01/ 信息前置:

增加增益信息或前置落地頁信息,可以輔助轉(zhuǎn)化決策


購(gòu)買/轉(zhuǎn)化一定是需要足夠的信息積累信任感才能達(dá)成的,在前卡適當(dāng)?shù)脑黾淤u點(diǎn)信息能夠更好的幫助用戶決策。針對(duì)下載類廣告可增加評(píng)分與星級(jí),二電類廣告可以增加價(jià)格信息,甚至可以前置優(yōu)惠劵、圖片banner等信息,均能實(shí)現(xiàn)轉(zhuǎn)化的正向提升。


undefined


02/ 轉(zhuǎn)化前置:

縮短轉(zhuǎn)化路徑,可以幫助轉(zhuǎn)化行為更便捷的達(dá)成


在信任感積累與階段性的增強(qiáng)都達(dá)成的時(shí)候,在當(dāng)前轉(zhuǎn)化對(duì)比跳轉(zhuǎn)落地頁再進(jìn)行轉(zhuǎn)化,鏈路更短,用戶流失概率更小。比起實(shí)驗(yàn)嘗試,更像是延遲增強(qiáng)的基礎(chǔ)能力配置。


首先,我們針對(duì)表單/咨詢/電話/安卓下載都進(jìn)行了轉(zhuǎn)化前置,具有用戶明確意向的按鈕點(diǎn)擊會(huì)直接在當(dāng)前進(jìn)行反饋。



除了直接將操作前置外,針對(duì)不同細(xì)分場(chǎng)景的需求,還可以通過交互形態(tài)的優(yōu)化在感官上縮短路徑。

 

這里以百度的視頻MAX廣告為例,我們針對(duì)重落地頁的商家,將MAX首屏(視頻頁)與H5落地頁的關(guān)系變拼接結(jié)構(gòu)為雙層結(jié)構(gòu),通過浮層面板承載落地頁,延時(shí)自動(dòng)彈出,強(qiáng)引導(dǎo)下方內(nèi)容,激發(fā)用戶上滑瀏覽興趣,解決了落地頁隱藏較深,轉(zhuǎn)化鏈路過長(zhǎng)的問題,同時(shí)增加了落地頁曝光從而提升轉(zhuǎn)化。



///
結(jié)語


在視頻信息流領(lǐng)域中,延遲增強(qiáng)仍然可以繼續(xù)深挖,作為“基礎(chǔ)建設(shè)”承載未來更多細(xì)分場(chǎng)景下的互動(dòng)化、個(gè)性化的“精神需求”。

 

同時(shí)延遲增強(qiáng)設(shè)計(jì)方法也可以橫向復(fù)用于廣告前卡、落地頁、IM工具等各種需要在合適時(shí)機(jī)抓取用戶注意的場(chǎng)景中,去追求點(diǎn)擊或者轉(zhuǎn)化的提升。甚至在未來可以嘗試其在長(zhǎng)視頻或圖文場(chǎng)景中的應(yīng)用。

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


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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ù)

互聯(lián)網(wǎng)金融產(chǎn)品——適老化設(shè)計(jì)分析

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

雖然,三類互聯(lián)網(wǎng)老年人用戶模型之間各有差異,但我們發(fā)現(xiàn)他們最大的共性的特點(diǎn)在于具有開放的心態(tài)積極地接受更多理財(cái)新可能,因此我們也應(yīng)該盡可能從交互視覺的角度或從產(chǎn)品功能的角度為老年群體提供更多樣化的互聯(lián)網(wǎng)理財(cái)參與方式,并且降低參與的門檻。因此我們得到以下適老化改造的策略方向:

(1)產(chǎn)品內(nèi)容功能上充分考慮老年人對(duì)理財(cái)產(chǎn)品的認(rèn)知以及期待

(2)交互視覺上充分考慮老年人感官、心理、認(rèn)知上的特性

(3)技術(shù)規(guī)范上充分考慮如何利用技術(shù)便利用戶操作以及產(chǎn)品體驗(yàn)設(shè)計(jì)的最大化落地



改進(jìn)分析


根據(jù)過往產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn),我們提出線上金融服務(wù)設(shè)計(jì)的三大原則:

操控感:所見的是什么,剛剛干了什么,現(xiàn)在在干什么,接下來怎么做,可達(dá)成什么目標(biāo)。

無障礙:適用于任何人群

安全感:資產(chǎn)保障安全感、使用體驗(yàn)安全感

基于以上設(shè)計(jì)原則,結(jié)合本次適老化改造的策略方向,我們得到以下具體改進(jìn)方向。



1. 設(shè)計(jì)原則拆解


操控感


能懂會(huì)用,可以有效減少老年人在使用線上產(chǎn)品時(shí)焦慮感和挫敗感。讓老年人知道看到的是什么,正在做什么,接下來要這么做,可以達(dá)成什么目標(biāo),這是在使用線上產(chǎn)品進(jìn)行一切操作的基礎(chǔ)條件。


(1)簡(jiǎn)潔的界面

大字體、大圖標(biāo)、界面簡(jiǎn)潔;老年人因其生理結(jié)構(gòu)特征,很難輕易識(shí)別一些較小的文字、圖形;因此在界面設(shè)計(jì)的適老化改進(jìn)上,需要簡(jiǎn)化信息布局、放大圖形文字;


(2)清晰的導(dǎo)航

產(chǎn)品中的導(dǎo)航可以幫助用戶快速定位當(dāng)前所在位置,剛剛在哪里,未來會(huì)到哪里去。清晰的導(dǎo)航有以下三大特點(diǎn):

連貫性:頁面跳轉(zhuǎn)前后需有繼承關(guān)系,不光是文字,字體、顏色等視覺元素也可以加強(qiáng)關(guān)系

扁平化:盡量減少跳轉(zhuǎn)避免出現(xiàn)多層級(jí),除了操作復(fù)雜之外,客戶使用時(shí)的記憶成本也較高

易記憶:無論導(dǎo)航的位置、描述、視覺元素,都應(yīng)在用戶心智中穩(wěn)定固化,憑借記憶可以快速定位;

圖11:支付寶(關(guān)懷版)


(3)明確的語義

所有描述、狀態(tài)、操作盡量唯一且易于理解,符合老年人的基礎(chǔ)認(rèn)知;


(4)及時(shí)地反饋

任何用戶操作行為都應(yīng)有相應(yīng)結(jié)果,對(duì)于極其敏感易焦慮的老年人群體來說更為重要,如加載、成功、失敗、異常情況等,且反饋內(nèi)容應(yīng)明確可被理解,即在各項(xiàng)流程結(jié)束后應(yīng)給出含有明確反饋的流程結(jié)果頁面;對(duì)于學(xué)習(xí)和理解能力較弱的老年人而言,及時(shí)地反饋顯得更為重要;


(5)順暢的流程

復(fù)雜業(yè)務(wù)流程的任務(wù)對(duì)于老年人來說挑戰(zhàn)最大,失敗率也最高。除了與本身流程復(fù)雜,以及上述的語義不清、反饋不及時(shí)等可用性問題有關(guān)之外,流程體驗(yàn)的閉環(huán)對(duì)于老年人群體而言也是極其重要。


無障礙


(1)輔助性功能

由于老年人的視力與協(xié)調(diào)能力開始下降,很難進(jìn)行很復(fù)雜的交互動(dòng)作。在線下場(chǎng)景中,老年人辦理業(yè)務(wù)時(shí)會(huì)有銀行工作人員在身邊進(jìn)行輔助。同樣,在老年人使用APP時(shí),產(chǎn)品也應(yīng)起到輔助作用。常見做法有,線上客服、語音輸入輔助、使用說明和操作示范等;文本輸入提示,語音輸入等無障礙功能,用于提升方言識(shí)別能力,方便不會(huì)普通話的老年人使用智能設(shè)備;對(duì)智能客服入口的設(shè)置也不僅僅放在首頁,應(yīng)輻射到盡可能多的頁面。

圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)人工客服頁


(2)低密度信息

對(duì)于老年人而言,即便是頁面內(nèi)信息的層級(jí)非常清晰,高密度的信息仍會(huì)增加記憶負(fù)荷。因此在針對(duì)老年人的產(chǎn)品設(shè)計(jì)中,不應(yīng)過度追求頁面效率,適當(dāng)去掉形容性、專業(yè)性、技術(shù)性、營(yíng)銷性、裝飾性的信息,將有助于信息降噪。


(3)簡(jiǎn)化操作

降低老年人的輸入成本,例如合理規(guī)劃驗(yàn)證碼出現(xiàn)機(jī)制,身份證信息、銀行卡號(hào)的圖像識(shí)別、自動(dòng)保存常用聯(lián)系人等。


(4)產(chǎn)品適用性

市場(chǎng)上某些頭部的金融相關(guān)APP已經(jīng)推出老年版本,如支付寶的關(guān)懷版,該版本不僅是字體、按鈕更大,更重要的是通過不同的信息功能架構(gòu),將不同年齡層的用戶客群做了產(chǎn)品注意力的重點(diǎn)區(qū)分,強(qiáng)調(diào)不同類型用戶的使用的場(chǎng)景不同,有助于將用戶的注意力鎖定在與其相關(guān)的業(yè)務(wù)上,提升用戶完成任務(wù)的效率。


安全感


(1)資產(chǎn)保障安全感

近些年有關(guān)老年人的金融詐騙層出不窮、人人自危,除了實(shí)際保障資產(chǎn)安全的措施之外,在服務(wù)設(shè)計(jì)層面上也需要保障和增強(qiáng)用戶安全感受。如在某些特定場(chǎng)景中,轉(zhuǎn)賬、匯款時(shí),及時(shí)告知用戶可能存在的風(fēng)險(xiǎn),大額時(shí)需要子女輔助驗(yàn)證等;


(2)使用體驗(yàn)安全感

在產(chǎn)品設(shè)計(jì)中需要考慮防錯(cuò)和容錯(cuò)機(jī)制,這有助于減少問題的發(fā)生,消除老年人使用產(chǎn)品時(shí)的恐懼感,讓用戶放心安全的使用產(chǎn)品。例如輸入金額時(shí)明確顯示單位,金融產(chǎn)品頁面強(qiáng)化顯示風(fēng)險(xiǎn)與收益,大額需要二次確認(rèn)。

根據(jù)以上改進(jìn)方向和原則,下面對(duì)目前產(chǎn)品的部分功能模塊和非功能模塊分別進(jìn)行梳理和優(yōu)化,產(chǎn)出初步優(yōu)化方案和建議,并對(duì)其中部分具體功能的實(shí)現(xiàn)做技術(shù)分析和方案要求。




2. 具體功能優(yōu)化分析


2.1 基金賬戶類

涉及開戶流程、風(fēng)險(xiǎn)測(cè)評(píng)問卷、資料變更等板塊。需要適配改進(jìn)的地方包括以下幾個(gè)方面:

(1)證件上傳

開戶證件OCR識(shí)別和上傳,對(duì)二代身份證的支持較為完備,對(duì)一代身份證和其他證件類型的支持不到位。老年人群體存在持一代身份證的可能性;

(2)開戶綁卡

開戶綁定銀行卡,基金公司支付渠道僅支持銀聯(lián)標(biāo)志的銀行借記卡,對(duì)存折等非借記卡不支持;

(3)預(yù)留信息

央行反洗錢、CRS等合規(guī)要求對(duì)開戶資料預(yù)留信息字段作出了明確規(guī)定,其中部分字段不容易讓人理解和獲取,如賬戶實(shí)控人、電子郵箱等;

(4)風(fēng)評(píng)問卷

關(guān)于風(fēng)評(píng)問卷,目前題目數(shù)量較多,建議減少至5道題左右;

(5)密碼找回

增加多種找回密碼的途徑,如手機(jī)號(hào)、電子郵箱、手機(jī)短信。


2.2 基金交易類


涉及申購(gòu)、贖回、專戶、分紅方式、定投等功能,需要適配改進(jìn)的地方包括以下幾個(gè)方面:

(1)數(shù)字輸入

交易密碼金額等數(shù)字輸入場(chǎng)景,建議盡量調(diào)起九宮格數(shù)字鍵盤,字號(hào)較大且清晰;


(2)風(fēng)險(xiǎn)提示

購(gòu)買環(huán)節(jié),按銷售適當(dāng)性要求,醒目提示基金風(fēng)險(xiǎn);

(3)限額

基金申購(gòu)支付方式,適當(dāng)提高支付限額,或引導(dǎo)匯款轉(zhuǎn)賬的方式,滿足大額申購(gòu)場(chǎng)景。


2.3 查詢類


(1)在線客服

建議增加語音輸入和播報(bào)功能,同時(shí)醒目提示人工客服點(diǎn)擊按鈕;

(2)圖表查看

基金列表和詳情頁等頁面中包含圖表的,建議增加豎屏和橫屏切換按鈕,增加圖表易讀性;

(3)版本更新

新版本發(fā)布時(shí),建議增加新功能示意遮罩,指引客戶如何使用新功能。



3. 非功能優(yōu)化分析


(1)色彩

用色簡(jiǎn)潔干凈、對(duì)比柔和。減少?gòu)?fù)雜顏色、漸變顏色、極端飽和度顏色的使用,盡量使用純色、基礎(chǔ)漸變、稍微明亮的顏色作為圖標(biāo)用色,關(guān)鍵互動(dòng)界面避免使用藍(lán)色。

圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)功能列表頁


(2)文字

字體應(yīng)使用黑體類型字體,且允許用戶自行調(diào)節(jié)或匹配手機(jī)系統(tǒng)字號(hào),但最小字號(hào)不宜低于16px,多行文字顯示時(shí)行間距應(yīng)為1.5倍字號(hào)大小,減少大量文字內(nèi)容帶來的壓抑感;文字顏色使用不同透明度的黑色進(jìn)行信息層級(jí)的區(qū)分,重要內(nèi)容使用1~2種輔助性彩色作突出;


(3)圖標(biāo)

圖標(biāo)設(shè)計(jì)簡(jiǎn)潔清晰,且需要有文字說明,避免使用過于抽象表意不明確的復(fù)雜圖標(biāo);


(4)布局

結(jié)合對(duì)老年人的認(rèn)知及操作習(xí)慣,通過信息類型、展示頻率、重要性等方式進(jìn)行歸類,形成合理的布局結(jié)構(gòu),通過這種行為塑造方式,讓用戶快速摸清產(chǎn)品形態(tài);

如下圖兩家銀行首頁布局由資產(chǎn)查看、常用功能金剛區(qū)、輪播圖、服務(wù)渠道、理財(cái)產(chǎn)品構(gòu)成;在底部導(dǎo)航欄上只選擇展示兩個(gè)一級(jí)頁面以及突出顯示的語音助手入口。

圖13:工商銀行(幸福生活版)、中信銀行(幸福+版)首頁


(5)動(dòng)效

有效的動(dòng)畫可以給頁面帶來生命感,但如果濫用動(dòng)效不僅會(huì)分散用戶注意力,嚴(yán)重的話對(duì)某些用戶來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激);

為了避免給特殊人群造成困擾,設(shè)計(jì)師考慮加入動(dòng)效時(shí)應(yīng)注意禁止使用高頻閃動(dòng)、運(yùn)動(dòng)夸張、視差較大的動(dòng)效,并且在同一界面也應(yīng)控制運(yùn)動(dòng)元素?cái)?shù)量,避免對(duì)用戶的閱覽和判斷產(chǎn)生困擾。


(6)無廣告

由于老年人對(duì)事物的認(rèn)知和理解能力較慢,過多的廣告會(huì)嚴(yán)重分散用戶注意力,甚至導(dǎo)致誤操作造成經(jīng)濟(jì)損失,尤其一些具有強(qiáng)誤導(dǎo)性的開屏廣告、營(yíng)銷活動(dòng)廣告等;建議減少?gòu)V告數(shù)量、杜絕惡意引導(dǎo)廣告,并針對(duì)廣告投放需設(shè)立專門的審查人員進(jìn)行合規(guī)審查。



4. 技術(shù)規(guī)范要求


(1)按鈕熱區(qū)

對(duì)于文字按鈕需要保留較大的間距作為按鈕熱區(qū),避免老年人用戶操作時(shí)誤觸;


(2)版本切換

新增版本切換功能,建議將按鈕直接展示于首頁右上角,且要有文字進(jìn)行圖形說明,便于老年人用戶理解且能直接進(jìn)行操作;

現(xiàn)有APP采用架構(gòu)為hybird app,基本的開發(fā)模式為:原生殼子+H5(vue),因此針對(duì)版本切換功能需要對(duì)APP架構(gòu)進(jìn)行調(diào)整,解決方案為對(duì)各項(xiàng)版本進(jìn)行獨(dú)立開發(fā)或?qū)υ姹具M(jìn)行內(nèi)置模塊開發(fā)。

其中,獨(dú)立版本開發(fā)優(yōu)點(diǎn)為各版本獨(dú)立、UI獨(dú)立、歷史包袱少;相應(yīng)地,也提高了開發(fā)和維護(hù)成本;一些情況下多版本入口也會(huì)使用戶在使用上產(chǎn)生困惑;

內(nèi)置模塊開發(fā),以模塊形式嵌入原生系統(tǒng)中。其優(yōu)點(diǎn)為成本相對(duì)較低,使用入口統(tǒng)一,缺點(diǎn)為歷史包袱過多、開發(fā)自由度較低、改造過程也受老系統(tǒng)所制約。


(3)語音識(shí)別

考慮到用戶群體對(duì)于文字輸入和閱讀的能力欠佳,針對(duì)查詢功能、鍵盤(數(shù)字)輸入、智能助手等功能,嵌入語音識(shí)別、語音輸入、語音播報(bào)等技術(shù),優(yōu)化老年人用戶操作體驗(yàn)。




結(jié)論


在互聯(lián)網(wǎng)日漸發(fā)達(dá)、金融逐步數(shù)字化的今天,越來越多的老年人群體嘗試著加入我們的步伐,他們構(gòu)成了快速增長(zhǎng)且日益富裕的目標(biāo)受眾,但現(xiàn)實(shí)是,一些不恰當(dāng)?shù)脑O(shè)計(jì)讓他們望而卻步,無法享受科技能夠帶給人類的利益;為此,我們需要關(guān)注和反省,我們所創(chuàng)造的、服務(wù)于人類的產(chǎn)品,也應(yīng)該有能力來適應(yīng)人類衰老的過程,而創(chuàng)造這項(xiàng)能力,也已經(jīng)成為了肩負(fù)在我們身上的責(zé)任。

文章來源:站酷   作者:陳皮紅豆沙

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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ù)

7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

純純

失敗的網(wǎng)頁設(shè)計(jì)各不相同,但是優(yōu)秀的網(wǎng)頁設(shè)計(jì)則有著共通的特點(diǎn)。你需要思考人們想要的是什么,什么東西能夠觸動(dòng)他們,讓他們欲罷不能,無法忘懷。

聽起來似乎很簡(jiǎn)單,不是嗎?取悅用戶的關(guān)鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術(shù)都能讓用戶愉悅,那些真正易于理解、便于使用、降低難度的技術(shù)、設(shè)計(jì)手法和抓人的視覺元素,才是一切的關(guān)鍵。下面總結(jié)的7項(xiàng)秘訣,會(huì)讓你的網(wǎng)頁脫穎而出的。

1、定制化

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

定制化,或者說個(gè)性化,是今天網(wǎng)頁設(shè)計(jì)中最典型的趨勢(shì)之一。用戶希望瀏覽網(wǎng)頁的時(shí)候獲得更加私人的瀏覽體驗(yàn),無論是玩頁游還是購(gòu)物。

看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購(gòu)買歷史的產(chǎn)品推薦,Netflix 則會(huì)推薦相關(guān)的作品、有待觀看的下一部,并且基于用戶 Twitter 上的內(nèi)容來進(jìn)行推薦。

每一個(gè)微小的自定義設(shè)計(jì),都能讓用戶感覺這些用戶體驗(yàn)設(shè)計(jì)是為他們而做的。同時(shí),這種設(shè)計(jì)也會(huì)給用戶一種參與感和溝通的體驗(yàn),從而加深用戶的忠誠(chéng)度。如此一來,用戶會(huì)更好地融入整個(gè)網(wǎng)站的用戶群或者社區(qū)。

2、簡(jiǎn)練的動(dòng)效

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

另外一個(gè)大熱的流行趨勢(shì),就是動(dòng)效設(shè)計(jì)。它不僅能為用戶帶來驚喜,而且具備強(qiáng)大的引導(dǎo)性。

動(dòng)效設(shè)計(jì)的精髓在于簡(jiǎn)單。令人頭暈或者不知所措的動(dòng)效,應(yīng)該不是你要的東西吧?動(dòng)效應(yīng)該是有目的性的,和其他所有的設(shè)計(jì)元素一樣,有針對(duì)性,達(dá)成目標(biāo)是它存在的意義。

對(duì)動(dòng)效或者說動(dòng)畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯(cuò)覺:迪士尼動(dòng)畫》中,就詳細(xì)總結(jié)了創(chuàng)造今天動(dòng)畫的12個(gè)原則:

·擠壓和拉伸
·預(yù)期
·登臺(tái)
·連續(xù)動(dòng)作和姿態(tài)對(duì)應(yīng)
·緩進(jìn)緩出
·弧形運(yùn)動(dòng)
·次要?jiǎng)幼?br /> ·時(shí)序
·夸張
·立體刻畫
·吸引力

3、使用約定俗成的設(shè)計(jì)模式

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

對(duì)于常見的問題,設(shè)計(jì)模式就是可靠且可復(fù)用的解決方案。簡(jiǎn)而言之,最常見的信息和交互方式被整合到一個(gè)界面當(dāng)中,比如點(diǎn)擊按鈕,滾動(dòng)頁面,滑動(dòng)解鎖,它們都是設(shè)計(jì)師模式。

你需要熟悉這些常見的設(shè)計(jì)模式,并且在設(shè)計(jì)界面和交互的時(shí)候?qū)⑺鼈冇眠M(jìn)去。這符合用戶在體驗(yàn)上的訴求,也是易用性的最基本構(gòu)成。

同時(shí)你也要在自己的設(shè)計(jì)中創(chuàng)造設(shè)計(jì)模式,在不同的頁面中使用相同、相似或者規(guī)則化的設(shè)計(jì),讓用戶習(xí)慣。比如,不同頁面中的CTA按鈕的色彩保持一致,卡片式的元素使用相同的樣式,等等等等。

4、給設(shè)計(jì)以性格

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

沒人會(huì)喜歡單調(diào)無聊的設(shè)計(jì)。你的網(wǎng)站應(yīng)當(dāng)同你的品牌保持一致的性格,擁有獨(dú)特的氣息。

要做到這一點(diǎn),通常需要用到微妙走心的文案和親切自然的語調(diào)如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(請(qǐng)注意他們的文本和圖片是如何無縫地連接到一起的)

5、在屏幕內(nèi)思考

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

用戶同網(wǎng)站交互都是在屏幕內(nèi)進(jìn)行的,無論是桌面端還是移動(dòng)端,整個(gè)體驗(yàn)都是圍繞著屏幕進(jìn)行的。

這并不是一句廢話。屏幕是一個(gè)區(qū)域,它界定范疇,賦予概念,創(chuàng)造隱喻。這也解釋了為什么視差滾動(dòng)和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個(gè)容器中,讓用戶隨之同下一個(gè)元素進(jìn)行互動(dòng)。

如何運(yùn)用好這個(gè)概念其實(shí)并不是那么容易。一個(gè)屏幕內(nèi)應(yīng)當(dāng)承載多少信息,需要仔細(xì)考慮。一個(gè)桌面端頁面所能承載的信息量在移動(dòng)端屏幕上,可能需要?jiǎng)澐值綆讉€(gè)頁面當(dāng)中去。

從屏幕的角度來考慮問題,可能會(huì)讓你的計(jì)劃更加龐大復(fù)雜,但是這種考量是有價(jià)值的,這種基于屏幕或者基于設(shè)備的考慮能讓用戶感覺更加便捷貼心。

6、一體化的內(nèi)容和交互

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

視頻、游戲、測(cè)試都爭(zhēng)取讓用戶能與之進(jìn)行互動(dòng),這種互動(dòng)的目的在于驅(qū)動(dòng)用戶參與到設(shè)計(jì)中來。用戶與界面交互的越多,用戶所獲得的體驗(yàn)就越好。

不過,有趣的元素能讓這一切截然不同。

讓交互內(nèi)容盡量簡(jiǎn)單,不要牽扯太多,讓用戶可以一目了然,讓他們輕松獲得反饋的信息,不用在冗雜的體驗(yàn)中淪陷。這其實(shí)和美劇的5分鐘原則有著異曲同工之妙。

7、輕松有序的設(shè)計(jì)

眼前一亮!7大秘訣幫你設(shè)計(jì)出令人難忘的優(yōu)秀網(wǎng)站

最后一個(gè)秘訣并非不重要,它甚至可以說是最基礎(chǔ)的原則:讓你的設(shè)計(jì)保持干凈、整潔和有序。使用柵格可以讓每一個(gè)頁面元素都有準(zhǔn)確的位置。將響應(yīng)式設(shè)計(jì)落實(shí)到每一個(gè)元素,能讓頁面能從一個(gè)設(shè)備兼容到另一個(gè)設(shè)備。

簡(jiǎn)約風(fēng)和極簡(jiǎn)風(fēng)能成為設(shè)計(jì)趨勢(shì)是有道理的。用戶可以更輕松理解這一切。簡(jiǎn)約的視覺設(shè)計(jì)更容易交互。沒有復(fù)雜信息并且被精心設(shè)計(jì)的界面能更好地運(yùn)作,賦予更好的體驗(yàn)。

蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個(gè)典型案例。誰都可以拿起手機(jī)毫無障礙地開始玩兒,它設(shè)計(jì)簡(jiǎn)單干凈,容易互動(dòng),視覺元素周圍有足夠的空間,無需擔(dān)心誤觸。同時(shí),其他游戲所具備的東西它也有——有趣好玩,可以共享得分,能分享到社交媒體。

結(jié)語

界定一個(gè)網(wǎng)站的體驗(yàn)與否有的時(shí)候并不是單一的標(biāo)準(zhǔn),而今天所推薦的7條秘訣本身也更接近于基本的Guideline,了解用戶,熟悉趨勢(shì)才能提供優(yōu)秀的體驗(yàn)。

文章來源:優(yōu)設(shè)  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.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è)人資料

存檔