首頁(yè)

UI設(shè)計(jì)中亮色的優(yōu)點(diǎn)和缺點(diǎn)

純純

有效的顏色應(yīng)用技巧是每個(gè)從事視覺(jué)合成相關(guān)工作的,包括插畫(huà)家和UI設(shè)計(jì)師,都必須具備的。隨著扁平化設(shè)計(jì)和material design的普及,具備色彩理論知識(shí)變得更加重要。

目前鮮艷的顏色和漸變出現(xiàn)在不同數(shù)字產(chǎn)品的用戶界面上:從好玩和有趣的到商業(yè)應(yīng)用和網(wǎng)站。然而,關(guān)于明亮的顏色對(duì)用戶體驗(yàn)的影響還有很多討論。本文對(duì)豐富多彩的用戶界面設(shè)計(jì)的優(yōu)缺點(diǎn)進(jìn)行了深入的分析。


明亮的顏色如何提高UI效果?


增加可讀性和易讀性


我們之前的一篇文章中,介紹了影響配色方案選擇的因素。可讀性和易讀性是設(shè)計(jì)師考慮色彩運(yùn)用的基本因素。提醒一下,可讀性是指人們閱讀文本內(nèi)容的容易程度,而易讀性則定義了用戶在特定字體中區(qū)分字母的速度。

鮮明的顏色足夠的對(duì)比度有助于增加可讀性和易讀性。有對(duì)比的布局元素會(huì)變得可區(qū)分和引人注目。然而,高色彩對(duì)比可能并不總是有效。如果文本內(nèi)容和背景顏色對(duì)比度太大,將很難閱讀或掃描文本。這就是為什么推薦設(shè)計(jì)師創(chuàng)建一個(gè)溫和的對(duì)比度,只用高對(duì)比度顏色突出元素的原因。


提亮導(dǎo)航,使交互更直觀


對(duì)任何數(shù)字產(chǎn)品來(lái)說(shuō),視覺(jué)層次是打造清晰導(dǎo)航和直觀交互的核心要素。UI組件就是這樣被組織起來(lái)的,這樣大腦就可以通過(guò)這種包括顏色在內(nèi)的物理差異來(lái)區(qū)分物體。

顏色有自己的層次結(jié)構(gòu),這是受用戶思維的影響所決定的。有大膽的顏色,如紅色和橙色,以及弱的白色和奶油色。明亮的顏色很容易被注意到,所以設(shè)計(jì)師經(jīng)常用它們來(lái)突出或設(shè)置對(duì)比度。此外,將一種顏色應(yīng)用到幾個(gè)元素上,表示它們?cè)谀撤N程度上是有相關(guān)性的。例如,您可以為購(gòu)買按鈕選擇紅色,以便人們?cè)谛枰獣r(shí)直觀地找到它們。



可識(shí)別性


大腦對(duì)大膽的顏色反應(yīng)強(qiáng)烈,這就是為什么明亮的顏色組合很容易被注意和記住的原因。色彩豐富的用戶界面設(shè)計(jì),在眾多顏色較輕的產(chǎn)品中容易脫穎而出。顏色的選擇需要基于目標(biāo)受眾的喜好和市場(chǎng)調(diào)查。

此外,如果一個(gè)公司擁有明亮的企業(yè)顏色應(yīng)用于商標(biāo)和品牌項(xiàng)目,那使用同樣顏色在其網(wǎng)站或移動(dòng)應(yīng)用上也是一個(gè)好方法。這種方式連接公司所有的溝通渠道,創(chuàng)造了一致性的視覺(jué)解決方案,并且提高了品牌知名度。


設(shè)定情緒和氣氛


為了傳達(dá)正確的語(yǔ)氣、信息和號(hào)召用戶做出預(yù)期的行動(dòng),設(shè)計(jì)師需要知道顏色會(huì)影響我們的情緒和行為。我們的大腦會(huì)對(duì)顏色做出反應(yīng),而我們通常不會(huì)注意這點(diǎn)。這項(xiàng)名為“顏色心理學(xué)”的研究表明,當(dāng)我們的眼睛感知到一種顏色時(shí),大腦就會(huì)向內(nèi)分泌系統(tǒng)發(fā)出信號(hào),釋放負(fù)責(zé)情緒變化的荷爾蒙。

適當(dāng)選擇顏色有助于讓用戶處于一種促使他們采取行動(dòng)的心理狀態(tài),并設(shè)置合適的氛圍將正確的信息傳遞給用戶。比如,如果設(shè)計(jì)師設(shè)計(jì)了一個(gè)與自然或園藝相關(guān)的產(chǎn)品的UI,很有可能會(huì)選擇用綠色和藍(lán)色。通過(guò)這種方式,設(shè)計(jì)將從一開(kāi)始就與一種產(chǎn)品或服務(wù)類型相關(guān)聯(lián)。您可以在我們的文章《顏色對(duì)用戶行為的影響》中找到對(duì)顏色含義的具體描述。


時(shí)尚的外觀和風(fēng)格


明亮的顏色和漸變,是UI設(shè)計(jì)中的最流行的趨勢(shì)。如今,可以在不同類型的數(shù)字產(chǎn)品中看到這種運(yùn)用,而嚴(yán)格的商業(yè)風(fēng)格的限制似乎被拋在了一邊。

明亮的漸變色彩在用戶界面上可以帶來(lái)一種現(xiàn)代化感和新鮮的想法。結(jié)合最新趨勢(shì)設(shè)計(jì)的APP或網(wǎng)站往往引人注目,盡管競(jìng)爭(zhēng)激烈,仍能吸引用戶的注意力。


明亮的顏色使用缺陷


很難搭配


那些認(rèn)為顏色能靠直覺(jué)和審美隨意混合的觀念是錯(cuò)誤的。如果你想要?jiǎng)?chuàng)造和諧的視覺(jué)構(gòu)圖,那么關(guān)于顏色如何起作用以及它們?nèi)绾螀f(xié)作的基本知識(shí)是必不可少的。

在UI中應(yīng)用的顏色越鮮艷,搭配就越困難。為了讓用戶感到愉悅和舒適,設(shè)計(jì)師努力將平衡和和諧融入到用戶界面設(shè)計(jì)中。色彩協(xié)調(diào)是指在設(shè)計(jì)中以最吸引人、最有效的方式來(lái)安排色彩,以供用戶感知。和諧的顏色組合有助于對(duì)網(wǎng)站或APP獲得一個(gè)不錯(cuò)的第一印象。顏色理論定義了一些基本的顏色方案,下面這些配色方案被證明是有效的。

單色,色彩和諧是基于一種顏色和它的各種色調(diào)。

類似色,該方案適用于顏色輪上相鄰的顏色。

互補(bǔ)色,它是在色輪上相互放置的顏色的混合,目的是產(chǎn)生高對(duì)比度。

多色互補(bǔ),這個(gè)方案與前一個(gè)方案相似,但是它使用了更多的顏色。例如,如果你選擇藍(lán)色,你需要取另外兩個(gè)相鄰的顏色,表示黃色和紅色。

三元色,它是基于三個(gè)獨(dú)立的顏色,在色輪上是等距的。專業(yè)人士建議使用一種顏色作為主調(diào),其他顏色作為輔助。

四色,tetradic配色方案使用四個(gè)顏色從車輪是互補(bǔ)的。如果你把選中顏色上的點(diǎn)連起來(lái),它們就形成了矩形。


失去節(jié)奏感


大膽的顏色可以作為在UI中進(jìn)行重音的工具,但它也可能成為重音消失的原因。許多鮮明的顏色在一個(gè)單一的視覺(jué)組成會(huì)帶來(lái)了失去突出元素的風(fēng)險(xiǎn),因?yàn)樗麄兂蔀橐粋€(gè)色彩種制造混亂的一部分。

這就是為什么推薦設(shè)計(jì)師使用60%-30%-10%的比例。最重要的部分應(yīng)該是主色調(diào),三分之一的構(gòu)圖采用第二色,10%的部分應(yīng)該選擇有助于形成重音的顏色。這樣的比例被認(rèn)為是令人愉快的,因?yàn)樗试S逐漸感知所有的視覺(jué)元素。


明亮的顏色并不適合所有用戶群體


創(chuàng)造數(shù)字產(chǎn)品的核心階段之一是用戶研究。定義和分析目標(biāo)受眾,使設(shè)計(jì)師了解他們對(duì)網(wǎng)站或應(yīng)用程序的期望。年齡、性別和文化會(huì)影響潛在用戶的喜好。例如,孩子們很喜歡黃色,但當(dāng)我們長(zhǎng)大后,黃色通常看起來(lái)不那么有吸引力。男人和女人通常喜歡冷酷的顏色,如藍(lán)色,綠色。不像女人,男人通常喜歡白色、黑色和灰色。

明亮的顏色也是如此。即使您是設(shè)計(jì)一個(gè)有趣的APP,也需要考慮目標(biāo)受眾的具體情況。中年人通常更喜歡輕松的用戶界面,他們可能不喜歡屏幕上很重的顏色去分散注意力。


在移動(dòng)屏幕上,鮮艷的顏色看起來(lái)反差太大


正如我們上面所說(shuō),明亮的顏色可以產(chǎn)生大量的對(duì)比度,幫助突出重要的UI元素,并提供良好的易讀性和可讀性。然而,過(guò)多的對(duì)比度可能會(huì)起到不好的效果,尤其是在移動(dòng)界面上,因?yàn)樗鼈兊目臻g有限,可以在不同的環(huán)境下使用。

小屏幕、環(huán)境光和明亮的字體使對(duì)比度高的圖像在用戶眼中顯得很難看。這就是為什么在移動(dòng)UI設(shè)計(jì)中使用明亮的顏色需要注意顏色之間的對(duì)比度,這樣人們?cè)陂喿x文字時(shí)會(huì)感到舒服。


顏色是大師手中的一件偉大的工具,和其他任何工具一樣,它也有它的優(yōu)點(diǎn)和缺點(diǎn)。為了有效地使用它,需要考慮它的所有方面,以便能夠找到適合設(shè)計(jì)任務(wù)和目標(biāo)的解決方案。


歡迎在文章評(píng)論區(qū)留言,讓我們一起成長(zhǎng)。

作者: 愛(ài)設(shè)計(jì)的狐貍 來(lái)源:站酷

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。

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

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


百度APP是如何進(jìn)行視頻沉浸式設(shè)計(jì)的?

seo達(dá)人



前言

沉浸式體驗(yàn)是讓人專注在當(dāng)前的目標(biāo),全身心投入并感到愉悅和滿足,從而忽略時(shí)間的流逝。應(yīng)用到界面上則是更強(qiáng)調(diào)聚焦內(nèi)容,減少不必要的打擾。本次研究與實(shí)踐針對(duì)視頻場(chǎng)景中視頻所呈現(xiàn)的畫(huà)面,通過(guò)精細(xì)化的設(shè)計(jì),在多樣化的手機(jī)屏幕中呈現(xiàn)時(shí),能夠帶給用戶更為沉浸的視頻觀看體驗(yàn)。

 

百度APP是如何進(jìn)行視頻沉浸式設(shè)計(jì)的?

視頻播放器中視頻畫(huà)面當(dāng)然是最主要的內(nèi)容,以此作為突破點(diǎn)進(jìn)行思考:

  • 最大化畫(huà)面視野:通過(guò)改變視頻畫(huà)面本身的大小,減少頁(yè)面“留白”,讓用戶更聚焦視頻畫(huà)面,觀看視頻時(shí)更專注。
  • 最佳視線觀看位置:將不同高度的視頻按照頁(yè)面結(jié)構(gòu)去布局視頻畫(huà)面,通過(guò)畫(huà)面避讓狀態(tài)欄、頂?shù)譩ar結(jié)構(gòu)的方式,使畫(huà)面更加整潔,減少元素混亂帶來(lái)的干擾,同時(shí)整體位置偏上展示,視線落點(diǎn)更加舒適。
  • 觀看體驗(yàn)連續(xù)性:視頻瀏覽過(guò)程中,非必要不打斷視頻瀏覽,在進(jìn)行如查看評(píng)論、臨時(shí)退出播放器等行為時(shí),保證視頻播放的連貫性,方便用戶多操作。

圖片

 

 

一、最大化視頻畫(huà)面視野

01、視頻畫(huà)面裁剪 

隨著時(shí)代的發(fā)展,為提升消費(fèi)者對(duì)手機(jī)的操作體驗(yàn),智能手機(jī)逐漸多元化,手機(jī)屏幕尺寸迭代更快、更加豐富多樣。手機(jī)作為視頻很重要的生產(chǎn)端,手機(jī)屏幕尺寸的多樣化影響到產(chǎn)出視頻尺寸的多樣化,同時(shí)用戶可通過(guò)視頻編輯工具任意編輯視頻尺寸,最終生產(chǎn)的視頻尺寸比例自由度非常高。據(jù)不完全統(tǒng)計(jì)視頻平臺(tái)中視頻尺寸達(dá)22萬(wàn)多種,用戶使用機(jī)型近300種,在視頻尺寸多樣性及視頻展現(xiàn)媒介多樣性的現(xiàn)狀下需要兼容性更強(qiáng)的裁剪及展現(xiàn)規(guī)則才能帶給用戶更好的觀看體驗(yàn)。我們要做的就是將不可控的視頻資源和不可控的瀏覽視頻設(shè)備設(shè)計(jì)為可控的視覺(jué)展示效果,并最大化視頻畫(huà)面。減少環(huán)境干擾,給用戶帶來(lái)沉浸式感官體驗(yàn)。

視頻寬撐滿手機(jī)屏寬后,將視頻尺寸分為四類:

圖片

1) 視頻高度>手機(jī)屏高

視頻畫(huà)面寬度撐滿屏幕后,視頻整體居中于屏幕,居中裁剪視頻多余畫(huà)面。注:不允許畫(huà)面高度撐滿屏幕,寬度自適應(yīng)導(dǎo)致畫(huà)面左右留黑效果。

2) 視頻高度=手機(jī)屏高視頻居中于屏幕,剛好填滿屏幕,不需要裁剪處理。

圖片

3) 1:1<視頻高度<手機(jī)屏高

此類尺寸較復(fù)雜、難處理,于是將限制裁剪面積和展示位置相結(jié)合,保證裁剪面積和位置可控。結(jié)合視頻平臺(tái)資源尺寸和業(yè)務(wù)目標(biāo)來(lái)確認(rèn)理想展示效果,反推定義最大裁剪面積,根據(jù)顯示位置多次判斷視頻放大后是否符合既定裁剪面積,最終確定當(dāng)前視頻的顯示方式。同時(shí)支持根據(jù)不同視頻業(yè)務(wù)進(jìn)行個(gè)性化定制,并且將裁剪面積云控處理,根據(jù)業(yè)務(wù)內(nèi)不同時(shí)期的訴求限制比例來(lái)靈活調(diào)整展示效果,雙端也可分端定義數(shù)值;橫向協(xié)同及迭代成本極低,便于快速上線驗(yàn)證效果。

圖片圖片

4) 橫版視頻(高寬比≤1:1)

橫版視頻在手機(jī)屏幕中面積占比較小,畫(huà)面可識(shí)別度和飽滿度稍有欠缺,輕微擴(kuò)大畫(huà)面視野,畫(huà)面瀏覽更加清晰有沖擊力。以不影響內(nèi)容理解為前提,根據(jù)自身平臺(tái)視頻尺寸占比及視頻內(nèi)容特點(diǎn)規(guī)定固定比例或比例范圍適度放大。

圖片

錦上添花,引入文字內(nèi)容識(shí)別

為避免因裁剪規(guī)則而裁剪到視頻關(guān)鍵文字對(duì)視頻內(nèi)容獲取有障礙的問(wèn)題,發(fā)揮百度強(qiáng)大的AI技術(shù)優(yōu)勢(shì),引入文字識(shí)別技術(shù)及視覺(jué)展現(xiàn)規(guī)則,進(jìn)一步提升視頻展現(xiàn)樣式的可控性,同時(shí)能夠通過(guò)盡量少損失畫(huà)面達(dá)到畫(huà)面放大的效果,平衡畫(huà)面沉浸感和完整性的關(guān)系。左右文字被裁剪情況:文字左右設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方描述的裁剪規(guī)則進(jìn)行退檔顯示(滿屏至不裁剪之間的檔位),直至文字不被裁剪。極端情況退檔至最后一檔,視頻畫(huà)面不裁剪。

圖片

橫版資源文字左右被裁剪情況:按照固定尺寸退檔

圖片

上下文字被裁剪情況:文字上下設(shè)置安全距離,保證安全距離在屏幕內(nèi)。如果安全區(qū)超出屏幕,則按照上方裁剪規(guī)則進(jìn)行滿屏至不裁剪之間的檔位進(jìn)行退檔顯示,此情況只會(huì)從全屏一檔顯示退至二檔顯示。

圖片

裁剪面積、展示比例、文字安全距離等數(shù)據(jù)都通過(guò)云控的方式下發(fā),靈活配置到不同業(yè)務(wù)中,保證裁剪規(guī)則一致的同時(shí)又能針對(duì)不同業(yè)務(wù)進(jìn)行定制展現(xiàn),也可快速調(diào)整并支持上線實(shí)驗(yàn),來(lái)驗(yàn)證適合自己產(chǎn)品的展示效果。

 

02、智能滿屏

通過(guò)裁剪方式放大畫(huà)面視野之外,還通過(guò)讓用戶自主交互操作再次放大畫(huà)面視野,調(diào)整到自己喜歡的觀看視頻的方式。相較于上方默認(rèn)裁剪放大,滿屏方式更加激進(jìn)極致,畫(huà)面放大更多。開(kāi)啟方式通過(guò)面板功能按鈕開(kāi)啟智能滿屏外,增加便捷交互開(kāi)啟手勢(shì),用戶可雙指放大快速開(kāi)啟。圖片

由于滿屏是用戶主動(dòng)操作放大行為,可以接受文字內(nèi)容被裁剪,但也需要有節(jié)制的放大,避免帶來(lái)畫(huà)面裁剪過(guò)多視覺(jué)體驗(yàn)不佳的問(wèn)題。為了保證95%以上資源撐滿全屏,達(dá)到放大畫(huà)面視野極致體驗(yàn)。同時(shí)最大畫(huà)面裁剪面積不超過(guò)一定比例(根據(jù)自身業(yè)務(wù)視頻資源判斷),將視頻資源細(xì)分為3類進(jìn)行不同效果處理:1.可繼續(xù)放大至滿屏的視頻,則進(jìn)行滿屏展現(xiàn)。2.不可繼續(xù)放大的視頻,如果繼續(xù)放大會(huì)導(dǎo)致裁剪畫(huà)面過(guò)多影響觀看完整度與觀看體驗(yàn),則保持上方提到的裁剪規(guī)則,不做另外處理。3.橫版視頻統(tǒng)一放大至固定尺寸,可根據(jù)自身業(yè)務(wù)資源進(jìn)行放大尺寸的定義。

圖片

 

二、最佳視線觀看位置

通過(guò)布局合理、舒適的畫(huà)面位置,也能提升瀏覽過(guò)程中用戶體驗(yàn)的沉浸感。人的視覺(jué)中心一般會(huì)在物理中心的偏上方,于是在設(shè)計(jì)中我們將視頻畫(huà)面放在屏幕偏上的位置,用戶視線落點(diǎn)更加舒適,一般是用戶在瀏覽頁(yè)面時(shí)最先注意到的地方。同時(shí)視頻在頁(yè)面偏上的位置,能減少下方標(biāo)題等信息過(guò)多對(duì)視頻畫(huà)面的遮擋。

為了精細(xì)化處理不同比例的視頻資源,豎版視頻和橫版視頻根據(jù)頁(yè)面效果分別定義了最佳觀看展示位置。

豎版視頻:高于1:1的視頻,按照頁(yè)面結(jié)構(gòu)布局視頻畫(huà)面,避讓狀態(tài)欄、頂?shù)譩ar操作,避免與頁(yè)面結(jié)構(gòu)沖突帶來(lái)畫(huà)面凌亂不美觀的問(wèn)題,同時(shí)能減少畫(huà)面參差帶來(lái)的干擾,增加沉浸瀏覽感受。

圖片

橫版視頻:等于矮于1:1的視頻,畫(huà)面按照屏幕高度比例展示在偏上的區(qū)域,高度比例可云控便于靈活調(diào)整。

圖片

 

三、觀看體驗(yàn)連續(xù)性 

01、視窗擠壓

為了滿足用戶在視頻場(chǎng)景多角度信息獲取,在不打斷用戶視頻瀏覽的基礎(chǔ)上建設(shè)視窗擠壓交互體驗(yàn),提升觀看視頻的相對(duì)沉浸感。在視頻場(chǎng)景觀看評(píng)論時(shí)會(huì)彈起半屏面板,遮擋住視頻內(nèi)容,導(dǎo)致用戶無(wú)法在瀏覽評(píng)論的同時(shí)觀看視頻內(nèi)容。對(duì)短視頻重度用戶來(lái)說(shuō),對(duì)同時(shí)看評(píng)論和看視頻習(xí)慣的用戶有挑戰(zhàn)。通過(guò)視窗上移動(dòng)擠壓功能,在瀏覽面板內(nèi)容時(shí)不對(duì)視頻內(nèi)容打斷,弱化面板內(nèi)容給用戶帶來(lái)的影響。

視窗高度固定,畫(huà)面寬高比越小畫(huà)面內(nèi)容越小,觀看體驗(yàn)不友好,所以豎版視頻對(duì)壓縮后的顯示尺寸進(jìn)行干預(yù),定義最小視頻畫(huà)面展示比例,盡量擴(kuò)大畫(huà)面視野,保證觀看視頻的舒適度。

圖片

02、懸浮小窗 

在不打斷用戶視頻瀏覽的基礎(chǔ)上還建設(shè)了懸浮小窗交互體驗(yàn),旨在為用戶提供完善優(yōu)質(zhì)的視頻消費(fèi)體驗(yàn)。用戶進(jìn)行其它操作時(shí)仍保留視頻后臺(tái)播放,同時(shí)也能在屏幕角落觀看到縮略圖大小的視頻播放窗口,可以從任何頁(yè)面中觀看視頻,我們同時(shí)也保留了部分視頻基礎(chǔ)操作。觀看體驗(yàn)連續(xù)性讓用戶對(duì)視頻有絕對(duì)的主控感,提升用戶使用體驗(yàn)的滿意度。

圖片

 

寫(xiě)在最后

沉浸式體驗(yàn)設(shè)計(jì)是幫助用戶減少畫(huà)面干擾,讓用戶專注于當(dāng)前的視頻瀏覽,忽略時(shí)間的流逝進(jìn)入心流狀態(tài)。我們通過(guò)放大畫(huà)面視野,增強(qiáng)畫(huà)面沖擊力的方式減少干擾,并解決在視頻畫(huà)面尺寸、手機(jī)屏幕分辨率極多的復(fù)雜情況下,保證畫(huà)面效果的穩(wěn)定和可控,并且不會(huì)受阻于未來(lái)手機(jī)機(jī)型的擴(kuò)充發(fā)展,普適性極強(qiáng)。同時(shí)通過(guò)視窗擠壓、懸浮小窗的交互體驗(yàn)專注于當(dāng)前的視頻瀏覽不被打斷,進(jìn)一步提升視頻看播沉浸式體驗(yàn)。后續(xù)我們將不斷探索視頻場(chǎng)景沉浸度提升方式,為用戶帶來(lái)更加舒適的觀看使用體驗(yàn)。

作者:百度APP用戶體驗(yàn)

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》百度APP是如何進(jìn)行視頻沉浸式設(shè)計(jì)的?

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


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


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



15個(gè)著名的設(shè)計(jì)心理學(xué)原理以及在設(shè)計(jì)中的應(yīng)用

純純

你是否有在聽(tīng)別人說(shuō)某某原理法則時(shí)一臉懵B的時(shí)候?明明知道這個(gè)原理卻說(shuō)不出它的名字?不要緊,本文就來(lái)介紹與人機(jī)交互設(shè)計(jì)相關(guān)的15個(gè)常見(jiàn)的設(shè)計(jì)心理學(xué)原理,約13000字,幫助你了解產(chǎn)品的定位,需求目的和交互邏輯,洞悉用戶的各種行為,也為自己的設(shè)計(jì)予以理論支撐。


1956年美國(guó)科學(xué)家米勒對(duì)人類短時(shí)間記憶能力進(jìn)行了研究,他注意到年輕人的記憶廣度為5-9個(gè)單位,就是7±2法則。與席克定律類似,神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上。


因?yàn)槿四X處理信息的能力有限,所以它通過(guò)把信息分成塊和單元來(lái)處理復(fù)雜問(wèn)題。7±2法則應(yīng)用很廣泛,例如iPhone通訊錄中的手機(jī)號(hào)碼被分割成”xxx-xxxx-xxxx“的形式,還有銀行卡號(hào)、身份證號(hào),我們總是喜歡把一長(zhǎng)串?dāng)?shù)字拆分開(kāi)來(lái)讀寫(xiě),目的就是降低記憶成本,提高信息的易讀性,從而達(dá)到視覺(jué)防錯(cuò)的作用。


Web導(dǎo)航欄選項(xiàng)卡數(shù)量不超過(guò)9個(gè)

在設(shè)計(jì)網(wǎng)頁(yè)導(dǎo)航時(shí),如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序,那么數(shù)量應(yīng)該控制在7個(gè)左右(不超過(guò)9個(gè)),如蘋(píng)果、Dribbble、behance等網(wǎng)站的導(dǎo)航分類。


Web導(dǎo)航欄選項(xiàng)卡數(shù)量過(guò)多時(shí)

如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多,可以用一個(gè)樹(shù)狀層級(jí)結(jié)構(gòu)來(lái)展示各級(jí)別關(guān)系,但要注意其廣度和深度的平衡。例如人人都是產(chǎn)品經(jīng)理和Dribbble,把更多子類別收在二級(jí)目錄里。



移動(dòng)端選項(xiàng)卡導(dǎo)航

在移動(dòng)端應(yīng)用設(shè)計(jì)中,常見(jiàn)的電商app例如奈雪和樂(lè)凱撒分類模塊,兩個(gè)產(chǎn)品的商品分類布局形式很相似,都是用了選項(xiàng)卡的方式來(lái)分類商品,層級(jí)明確,相應(yīng)的提升了用戶找尋單品的效率。


Tabbar區(qū)標(biāo)簽最多不超過(guò)5個(gè)

在移動(dòng)應(yīng)用設(shè)計(jì)中,底部Tabbar最少3個(gè),最多為5個(gè)(幾乎沒(méi)幾個(gè)超過(guò)5個(gè)),這樣做除了減輕用戶記憶負(fù)擔(dān),超過(guò)5個(gè)會(huì)降低視覺(jué)和操作上的體驗(yàn)。事實(shí)上就算只有4個(gè),我們也經(jīng)常想不起微信底部的4個(gè)Tab分別是啥。



頂部導(dǎo)航欄頁(yè)簽

我們看到的大部分app頂部導(dǎo)航欄的頁(yè)簽數(shù)量都嚴(yán)格遵循了7±2法則,雖然在橫軸可無(wú)限滑動(dòng),

但在顯示區(qū)域只保持7±2法則的顯示數(shù)量,例如馬蜂窩、飛豬旅行等。


金剛區(qū)圖標(biāo)不超過(guò)8個(gè)

我們常說(shuō)的“八大金剛”就是一屏顯示8個(gè)圖標(biāo),超過(guò)的則放在第二屏。如果兩行10個(gè),往往第十個(gè)是“更多”入口,總的來(lái)說(shuō)也沒(méi)超過(guò)9個(gè)。


banner文案不超過(guò)9個(gè)字

產(chǎn)品運(yùn)營(yíng)banner主文案字?jǐn)?shù)通??刂圃?個(gè)字以內(nèi),在設(shè)計(jì)時(shí)也通常把長(zhǎng)標(biāo)題一分為二排兩行,便于用戶快速閱讀,提升點(diǎn)擊率。

     


在交互設(shè)計(jì)中,7±2法則是減少用戶認(rèn)知負(fù)荷,提升用戶體驗(yàn)的重要環(huán)節(jié)。同時(shí)還強(qiáng)調(diào)了在設(shè)計(jì)過(guò)程中對(duì)產(chǎn)品的預(yù)見(jiàn)性,避免在不斷為產(chǎn)品添加功能時(shí),破壞原有的視覺(jué)基礎(chǔ)。



0無(wú)需說(shuō)明書(shū)

喬布斯曾說(shuō)過(guò):“蘋(píng)果應(yīng)該創(chuàng)造所有人都可以使用的產(chǎn)品,即使沒(méi)有用戶指南”。


1 一看就會(huì)

簡(jiǎn)單易懂,看一眼就明白你想說(shuō)什么,不用教學(xué)就知道怎么用。


2秒法則

所謂“2秒法則”,是指用戶在使用某類系統(tǒng)時(shí)的等待時(shí)長(zhǎng)不超過(guò)2秒。在極短的時(shí)間內(nèi)展示重要信息,給用戶留下深刻的第一印象。這里的2秒只是一個(gè)象征意義上的表達(dá),也許有一點(diǎn)隨意,但是這卻是一個(gè)合理的數(shù)量級(jí)。我們熟知的“F”瀏覽模式其實(shí)就是間接縮短用戶看到重要信息的時(shí)長(zhǎng),達(dá)到快速瀏覽的目的。


進(jìn)入App的首頁(yè)加載時(shí)間如果過(guò)長(zhǎng)就會(huì)導(dǎo)致用戶產(chǎn)生厭煩情緒,很容易退出甚至卸載App的行為。因此我們看到許多應(yīng)用將首頁(yè)加載時(shí)的空白頁(yè)進(jìn)行占位圖設(shè)計(jì)。


下拉刷新也是一個(gè)設(shè)計(jì)點(diǎn),為避免刷新時(shí)間過(guò)長(zhǎng),設(shè)計(jì)師通常會(huì)在加載動(dòng)畫(huà)上做文章。充滿趣味性的動(dòng)效能安撫用戶焦躁不安的心情,無(wú)形中降低了用戶對(duì)等待時(shí)間的感知。


APP里面的banner設(shè)計(jì)要有視覺(jué)沖擊力,如果兩秒之內(nèi)沒(méi)有抓住用戶的眼球,可能就被用戶忽略了。


因此,在設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品的頁(yè)面時(shí),用戶等待的時(shí)間越短,用戶體驗(yàn)越佳。反之,就會(huì)讓用戶產(chǎn)生焦慮的情緒。


3次點(diǎn)擊法則

用戶在3次點(diǎn)擊之內(nèi)如果還沒(méi)有找到他們想要的信息或了解網(wǎng)站特色,他們就會(huì)離開(kāi)該網(wǎng)站。這條原則突出了清晰的導(dǎo)航,符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級(jí)的重要性。(來(lái)自《眾妙之門》P133)

其實(shí)在交互體驗(yàn)中,點(diǎn)擊的次數(shù)往往是無(wú)關(guān)緊要的。只要每次點(diǎn)擊都是無(wú)需思考的,毫不費(fèi)力地順勢(shì)進(jìn)行,那么用戶的挫敗感就會(huì)大大降低。如果你的網(wǎng)站能夠讓用戶知道他在哪里,從哪里來(lái),要到哪里去,并且能夠讓用戶了解如何完成目標(biāo),這樣的點(diǎn)擊即使有10次也是沒(méi)有問(wèn)題的。例如,在京東購(gòu)買一件商品需要經(jīng)過(guò)“立即購(gòu)買>確定>提交訂單>選擇支付方式”4次點(diǎn)擊才能到訂單支付頁(yè)面完成購(gòu)買,這過(guò)程中可能還穿插其他的點(diǎn)擊行為(比如選擇地址、優(yōu)惠券),用戶并沒(méi)有感受到不方便,使用過(guò)程流暢而自然。


在可用性測(cè)試領(lǐng)域,“三次點(diǎn)擊”定律一直是一個(gè)很具爭(zhēng)議內(nèi)容。體現(xiàn)在以下幾點(diǎn):

·研究表明,用戶在超過(guò)3次點(diǎn)擊還沒(méi)到達(dá)想去的頁(yè)面時(shí),往往并沒(méi)有退出網(wǎng)站,而是會(huì)繼續(xù)多點(diǎn)幾次;

·當(dāng)把一個(gè)3次點(diǎn)擊就能到達(dá)的流程改為4次點(diǎn)擊的時(shí)候,用戶發(fā)現(xiàn)目標(biāo)頁(yè)面的能力反而提升了600%;

·合理的導(dǎo)航系統(tǒng)比點(diǎn)擊次數(shù)更重要;

·比起“3次點(diǎn)擊”,有人提出了“1次點(diǎn)擊”定律,即用戶的每一次點(diǎn)擊都應(yīng)該讓他們更接近目標(biāo),同時(shí)盡量減少能干擾實(shí)現(xiàn)這一目標(biāo)的因素;

·用戶抱怨要花很長(zhǎng)時(shí)間才能找到某個(gè)產(chǎn)品,實(shí)際上他們是在抱怨無(wú)法找到想要的東西,如果用戶找到了想要的東西,他們就不會(huì)抱怨點(diǎn)擊的次數(shù)了;



英國(guó)心理學(xué)家William Edmund Hick認(rèn)為,在簡(jiǎn)單的判斷場(chǎng)景中:一個(gè)人所面臨的選擇越多,做出決定所花的時(shí)間就越長(zhǎng)。有時(shí)候在選擇中花費(fèi)太長(zhǎng)時(shí)間從而導(dǎo)致決策失敗。

生活中我們也經(jīng)常會(huì)面臨選擇困難癥,比如早上起床就糾結(jié)今天穿什么?中午去食堂就會(huì)糾結(jié)吃什么?造成我們?nèi)绱思m結(jié)的原因就是因?yàn)檫x擇太多了(遠(yuǎn)古人就沒(méi)這些煩惱,尋找食物時(shí)逮著什么就吃什么)。


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

應(yīng)用到界面設(shè)計(jì)中也是如此,選項(xiàng)越多,意味著用戶做出決策的時(shí)間越長(zhǎng)。

例如APP Store首頁(yè),改版前的首頁(yè)把眾多app平鋪出來(lái),對(duì)目的不明確的用戶來(lái)說(shuō)選擇有點(diǎn)多。改版后的首頁(yè)大幅減少了App的數(shù)量,卡片的設(shè)計(jì)方式簡(jiǎn)潔且目標(biāo)清晰。


不得不面對(duì)較多選項(xiàng)時(shí), 對(duì)主要和次要的選項(xiàng)做視覺(jué)權(quán)重區(qū)分,做好設(shè)計(jì)上的歸類,提升用戶做決定的效率。例如美團(tuán)外賣金剛區(qū)第一行5個(gè)入口的圖標(biāo)在尺寸和表現(xiàn)手法上都比下面的入口圖標(biāo)要大更醒目?!拔业摹表?yè)面把一些低頻率功能或不太重要的功能收納到“設(shè)置”里,此外還可以通過(guò)置灰、鎖定等方法間接減少選項(xiàng),降低干擾。


對(duì)于多流程的任務(wù)進(jìn)行分步操作,讓用戶專注眼前任務(wù)。 例如Clubhouse注冊(cè)時(shí),把需要用戶選擇的選項(xiàng)分步引導(dǎo)完成,讓用戶能專注當(dāng)前行為。


對(duì)于多種類別的選項(xiàng)應(yīng)當(dāng)做二次分類的區(qū)分,我們都知道電商平臺(tái)的品類繁多,僅通過(guò)單一分類是不夠的,比如數(shù)碼頻道下面還分相機(jī)、影音娛樂(lè)、數(shù)碼配件、智能設(shè)備、電子教育等大的分類。商品詳情頁(yè)的篩選功能也是貼合使用場(chǎng)景來(lái)設(shè)計(jì)的,所以分類不怕多,就怕混亂。


適用邊界

雖然選擇越少,用戶做決策的時(shí)間越短,但這并不是提高用戶體驗(yàn)的唯一標(biāo)準(zhǔn),過(guò)度的減少選項(xiàng),可能導(dǎo)致負(fù)面效果。

如上圖右,如果在刪除App的彈窗中只有一個(gè)“刪除”選項(xiàng),沒(méi)有明顯的取消之類的途徑,那么用戶會(huì)覺(jué)得特別難受,感覺(jué)被強(qiáng)迫去刪除。如果當(dāng)下有急需使用手機(jī)處理一些事情,那么這樣會(huì)把這種負(fù)面情緒給無(wú)限放大,讓用戶抓狂。


希克定律主要受影響于選項(xiàng)的多少,但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個(gè)選項(xiàng)(學(xué)渣竊喜),那也太容易蒙了,這就是希克定律在答案試題中的局限性。


??硕墒且粋€(gè)可以適用于設(shè)計(jì)的指南,記住要盡量減少用戶在一次決策中要做的選項(xiàng),因?yàn)闆Q策效率是一個(gè)產(chǎn)品導(dǎo)致用戶流失的重要原因之一。引導(dǎo)用戶在明確的選項(xiàng)之間進(jìn)行選擇,以便快速將他們送到某個(gè)地方(例如賬單支付),這將大大提升用戶體驗(yàn)并達(dá)到你的目標(biāo)。




費(fèi)茨定律由心理學(xué)家Paul Fitts提出,用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長(zhǎng),目標(biāo)越大時(shí)間越短。舉例來(lái)說(shuō),你伸手去拿桌子上的咖啡杯,開(kāi)始你的手臂迅速地往杯子位置移動(dòng),接著你會(huì)放慢速度直至找到杯子把手,這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。


如上圖所示,如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo)target,最短路徑一定是D,最短路徑上容錯(cuò)的最長(zhǎng)路徑是D+W,只要水平上移動(dòng)超過(guò)了D+W你就點(diǎn)不到了,而這個(gè)點(diǎn)擊動(dòng)作所耗的時(shí)間是一個(gè)常數(shù)加上一個(gè)以D為正比W為反比的函數(shù)的和。


詳細(xì)解釋如下,圖中紅色方塊代表點(diǎn)擊目標(biāo),虛線代表移動(dòng)路徑,此時(shí)因?yàn)榧t色方塊目標(biāo)較大,所以用戶從任何一處點(diǎn)擊都很容易(可以用鼠標(biāo)在屏幕任意點(diǎn)移至紅色方塊試試)。


相反,紅色方塊目標(biāo)變小,快速點(diǎn)擊就會(huì)困難很多,很難一次到位。


但如果紅色方塊目標(biāo)很小距離很近的話,因?yàn)橐苿?dòng)范圍小,也能準(zhǔn)確的點(diǎn)擊到。


按鈕越大越容易點(diǎn)擊

在頁(yè)面中,大而近的目標(biāo)區(qū)域意味著用戶不需要做太精細(xì)的調(diào)整就可以輕易的觸達(dá)目標(biāo)。比如頁(yè)面中的大按鈕。


將按鈕放置在離開(kāi)始點(diǎn)較近的地方

夸克瀏覽器的搜索欄就放在離手最近的屏幕底部區(qū)域,相比常見(jiàn)頂部搜索欄更方便操作,效率更高。


相關(guān)按鈕之間距離近點(diǎn)更易于點(diǎn)擊

注冊(cè)登錄界面,通常將「注冊(cè)」和「登錄」放到一起,不僅可以在視覺(jué)上增強(qiáng)用戶對(duì)他們相關(guān)性的認(rèn)知,還可以減少在他們之間的距離 。


適用邊界

費(fèi)茨定律鼓勵(lì)減少距離,增加目標(biāo)大小以提升用戶效率,但反過(guò)來(lái)亦適用。比如iPhone關(guān)機(jī)按鈕,沒(méi)有使用點(diǎn)擊關(guān)閉,而采用滑動(dòng)操作,還把按鈕放在屏幕頂部,這樣明顯增加了操作難度,進(jìn)而避免了用戶誤操作。


App彈窗經(jīng)常把“關(guān)閉”按鈕放在卡片的右上角離手遠(yuǎn)的地方,希望用戶先完成彈窗提示的任務(wù)。還有啟動(dòng)頁(yè)廣告,喜歡把“跳過(guò)”按鈕放在難以點(diǎn)擊的右上角(恰飯重要),以提高用戶的誤觸機(jī)率提高轉(zhuǎn)化。


思考小結(jié)

按鈕越大越容易點(diǎn)擊,因此在程序開(kāi)發(fā)中,會(huì)增加按鈕點(diǎn)擊的熱區(qū)范圍,減輕用戶精準(zhǔn)點(diǎn)擊的壓力。但也不能過(guò)分的大,容易引起誤觸;

讓相關(guān)聯(lián)的內(nèi)容更靠近彼此,用視覺(jué)手法增強(qiáng)用戶對(duì)它們相關(guān)性的認(rèn)知。距離產(chǎn)生美,注意不要靠的太近,會(huì)出事;

將按鈕放置在離出發(fā)點(diǎn)較近的地方,比如頁(yè)面主按鈕一般會(huì)放在屏幕底部易操作區(qū)域;

屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因?yàn)樵谄聊贿吘壓徒锹湮恢糜?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">“無(wú)限可選中”的屬性,可以大膽操作而無(wú)需“微調(diào)”,參見(jiàn)macOS底部dock欄;

定律的反向使用可以適用一些特殊場(chǎng)景,比如想達(dá)到某種目的而降低按鈕被點(diǎn)擊的可能;




“任何事物都具有其固有的復(fù)雜性,無(wú)法簡(jiǎn)化”。

泰斯勒定律(Tesler’s Law)由Larry Tesler于1984年提出,也稱「復(fù)雜度守恒定律」。

該定律認(rèn)為:每一個(gè)過(guò)程都有其固有的復(fù)雜性,存在一個(gè)臨界點(diǎn),超過(guò)了這個(gè)點(diǎn)過(guò)程就不能再簡(jiǎn)化了,你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。


生活中很多我們習(xí)以為常,感覺(jué)便捷方便的生活方式,是無(wú)數(shù)卓越的數(shù)學(xué)家、工程師、設(shè)計(jì)師等無(wú)數(shù)的時(shí)間投入,才實(shí)現(xiàn)的某個(gè)小功能,是他們把這些復(fù)雜性轉(zhuǎn)移到自己身上替我們簡(jiǎn)化了。


說(shuō)回移動(dòng)端,每個(gè)應(yīng)用中都有其無(wú)法簡(jiǎn)化的復(fù)雜度,也不能按照我們個(gè)人意愿去除這些功能。這就是為什么飛機(jī)稿都簡(jiǎn)潔好看,而一搬到線上就面目全非。常見(jiàn)的復(fù)雜性轉(zhuǎn)移有:“查看更多”、“查看全部”、“查看詳情”、“展開(kāi)和收起”之類的文字做轉(zhuǎn)移跳轉(zhuǎn),比如:頂部導(dǎo)航欄的更多圖標(biāo),就是將常用的功能整合并隱藏在首頁(yè)設(shè)計(jì)的更多功能模塊中,把用戶的操作范圍轉(zhuǎn)移到另一個(gè)地方。


除此之外,還有一些降低操作復(fù)雜度的方法:

刪除、組織、隱藏

視覺(jué)層面的“降噪”方法,刪除會(huì)干擾用戶操作的選項(xiàng);功能分類明確,圍繞用戶行為組織信息內(nèi)容;隱藏那些不常用而又不能少的功能,延遲及階段性展示??偟膩?lái)說(shuō)就是將復(fù)雜的信息收起來(lái),展示重要且簡(jiǎn)潔的界面。


簡(jiǎn)化交互設(shè)計(jì)

可以用代碼節(jié)省用戶操作時(shí)間的地方,是互聯(lián)網(wǎng)人一致的追求。例如,B站的一鍵三連,用戶長(zhǎng)按點(diǎn)贊按鈕,會(huì)同時(shí)觸發(fā)點(diǎn)贊、投幣和收藏,省時(shí)省力。


算法解放“生產(chǎn)力”

個(gè)性化算法就是通過(guò)技術(shù)手段,將用戶復(fù)雜度降低,而轉(zhuǎn)移到開(kāi)發(fā)者身上。抖音為什么會(huì)讓人上癮?是算法知道了你的喜好,專推給你喜歡的內(nèi)容而不用自己去找,誰(shuí)都喜歡私人定制。這對(duì)用戶來(lái)說(shuō)是一件好事,但就像魯迅說(shuō)的:“你覺(jué)得好,一定是有人在負(fù)重前行”,這里的簡(jiǎn)化復(fù)雜的難度就轉(zhuǎn)移到設(shè)計(jì)和開(kāi)發(fā)身上了,還逼得機(jī)器去學(xué)習(xí)。例如抖音、淘寶、知乎首頁(yè)推薦的內(nèi)容都是基于你的喜好定制化推薦給你的。


我們常說(shuō)以用戶為中心去設(shè)計(jì),就需要從用戶角度出發(fā),在交互設(shè)計(jì)中盡量簡(jiǎn)化操作的復(fù)雜度,降低學(xué)習(xí)成本。但如“復(fù)制粘貼之父” Larry Tesler (1945-2020) 所說(shuō):“任何事物都具有其固有的復(fù)雜性,無(wú)法簡(jiǎn)化”。因此,如何取得復(fù)雜度的“平衡點(diǎn)”就是重要的部分,是讓工程師及設(shè)計(jì)師花費(fèi)大量時(shí)間去降低產(chǎn)品的使用難度,還是在設(shè)計(jì)中保留一定的復(fù)雜度是我們需要思考的事。



該原理是由麥肯錫國(guó)際管理咨詢公司顧問(wèn)Barbara Minto提出的理論,她強(qiáng)調(diào)結(jié)論先行,論點(diǎn)自上而下。

你是否遇到過(guò)這樣的場(chǎng)景,部門開(kāi)會(huì)時(shí)有人口若懸河的講了半天,到最后你都不知道他想說(shuō)什么。所以如果開(kāi)會(huì)時(shí)你會(huì)走神,這不怪你,只怪講演者說(shuō)話沒(méi)有邏輯,沒(méi)有重點(diǎn)。


金字塔原理指示結(jié)構(gòu)化表達(dá)遵循結(jié)論先行的原則,即任何問(wèn)題都能歸納出一個(gè)中心點(diǎn),讓受眾能夠第一時(shí)間清楚你想談?wù)摰闹黝}。然后由數(shù)個(gè)論據(jù)作支撐,而這些一級(jí)論據(jù)可以繼續(xù)由數(shù)個(gè)二級(jí)論據(jù)支撐,如此延伸,狀如金字塔。自上而下,上層影響下層。


應(yīng)用到交互設(shè)計(jì)上,即將信息展示的重點(diǎn)與交互行為的主任務(wù)優(yōu)先展示,再根據(jù)用戶在這個(gè)界面上所愿意停留時(shí)間逐級(jí)給予更多細(xì)節(jié)補(bǔ)充。以京東的商品詳情頁(yè)為例,首先金字塔的最上層是用戶目標(biāo)明確直接進(jìn)行“立即購(gòu)買”的底部全局按鈕,其次是商品的頭圖和用戶評(píng)價(jià)這些,讓用戶了解更多信息,進(jìn)一步促成購(gòu)買,最后一層是提供商品相關(guān)的全部信息、參數(shù)、評(píng)分等,確保交易的最終完成。在這個(gè)過(guò)程中,用戶在每一層花的時(shí)間也在逐級(jí)增加,呈金字塔狀。


映射到設(shè)計(jì)師身上也是如此,從設(shè)計(jì)新人到設(shè)計(jì)總監(jiān),中間差的就是一個(gè)完整的設(shè)計(jì)技能金字塔。就像升級(jí)打怪,每完成一項(xiàng)任務(wù)獲得相應(yīng)的經(jīng)驗(yàn)值,累積的經(jīng)驗(yàn)值幫助我們更快的升到下一級(jí)。當(dāng)把工作中的需要攻克的難題一一解決之后,你的設(shè)計(jì)水平會(huì)在不知不覺(jué)中更加精進(jìn),形成一套自己的設(shè)計(jì)風(fēng)格,成為一名優(yōu)秀的設(shè)計(jì)師。


有趣的是,把金字塔模型倒過(guò)來(lái)就成了“用戶漏斗模型”。自上而下,激勵(lì)用戶成長(zhǎng)。它告訴我們:

用戶的需求是永遠(yuǎn)滿足不完的,所以什么值得做,什么是可分階段去實(shí)現(xiàn)的是決策人需要明白的。如喬布斯所說(shuō):“消費(fèi)者并不知道自己需要什么,直到我們拿出自己的產(chǎn)品,他們就發(fā)現(xiàn),這是我要的東西”;

不斷完善主要功能,以滿足金字塔頂?shù)暮诵挠脩羧?。決策者常常添加一些自己想要的而不是用戶想要的需求,比如在信息流中添加一個(gè)廣告位;

如何優(yōu)化完善產(chǎn)品架構(gòu),檢驗(yàn)產(chǎn)品策略的合理性和完整性;



防錯(cuò)原則由世界著名的品質(zhì)管理專家新鄉(xiāng)重夫提出,即在過(guò)程失誤發(fā)生之前加以防止,是一種在作業(yè)過(guò)程中采用自動(dòng)作用、報(bào)警、標(biāo)識(shí)等手段。使操作人員不用特別注意也不會(huì)失誤的方法。

防錯(cuò)原則認(rèn)為大部分的意外都是由于設(shè)計(jì)的疏忽,而不是人為操作失誤,可以通過(guò)優(yōu)化設(shè)計(jì)把過(guò)失降到最低。該原則最初用于工業(yè)管理,后來(lái)應(yīng)用于界面交互設(shè)計(jì)中,當(dāng)使用條件沒(méi)有滿足時(shí),常常通過(guò)功能失效來(lái)表示。


自動(dòng)檢測(cè)提示

bilibili在登錄時(shí)輸入框沒(méi)有內(nèi)容或沒(méi)有輸密碼時(shí),登錄按鈕處于禁用的置灰狀態(tài),只有兩者都滿足了才可以正常點(diǎn)擊。此外登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、郵箱錯(cuò)誤等不同的錯(cuò)誤。通常必須賬號(hào)和密碼同時(shí)滿足且匹配才能成功。


Twitter發(fā)帖時(shí)只允許用戶輸入140個(gè)字,為了提醒用戶,其解決辦法是在鍵盤(pán)上方的工具欄上顯示還能輸入幾個(gè)字符,超過(guò)會(huì)以負(fù)數(shù)警示。知乎發(fā)布文章標(biāo)題過(guò)長(zhǎng)時(shí)也會(huì)提示錯(cuò)誤預(yù)警。


消除可能的失誤

防錯(cuò)法則認(rèn)為大部分的出錯(cuò)都是產(chǎn)品設(shè)計(jì)的不夠優(yōu)秀,而不該責(zé)怪用戶操作疏忽,通過(guò)設(shè)計(jì)手法可以把出錯(cuò)率降到最低。防錯(cuò)法則的核心觀點(diǎn)是,如何有效的在用戶出錯(cuò)之前就盡量避免錯(cuò)誤的發(fā)生。比如,美團(tuán)外賣在接受短信驗(yàn)證碼時(shí),系統(tǒng)會(huì)自動(dòng)提取驗(yàn)證碼在鍵盤(pán)上方顯示,用戶點(diǎn)一下就可以自動(dòng)填寫(xiě),省去了跳出應(yīng)用——打開(kāi)短信——記住驗(yàn)證碼——再輸入的繁瑣過(guò)程,有效預(yù)防了出錯(cuò)的機(jī)率。還有微信在綁定銀行卡時(shí)也是通過(guò)掃描銀行卡自動(dòng)提取賬號(hào),避免手動(dòng)輸入的出錯(cuò)率。


將失誤降至最低

二次確認(rèn),在一些比較重要的場(chǎng)景讓用戶二次確認(rèn),通常以彈窗的形式告知用戶再次讓用戶考慮自己的行為結(jié)果,進(jìn)一步降低出錯(cuò)率。例如,最近大家都在用的報(bào)稅App,會(huì)在提交信息前再次確認(rèn)。


視覺(jué)暗示

可在視覺(jué)(置灰或隱藏)上屏蔽那些不能選的選項(xiàng),避免用戶點(diǎn)擊后才報(bào)錯(cuò)或點(diǎn)擊沒(méi)反應(yīng)。


其次,一些不可恢復(fù)的操作,視覺(jué)上通常會(huì)給強(qiáng)標(biāo)識(shí)。例如,刪除短信時(shí)的文字顏色“變紅”。


為用戶犯的錯(cuò)買單

當(dāng)用戶輸入錯(cuò)誤信息時(shí),比如打錯(cuò)字,系統(tǒng)應(yīng)該給予用戶想要的信息,而不是無(wú)動(dòng)于衷,冷漠視之。


范圍限制

其實(shí)限制用戶的選擇并不是一個(gè)好主意,但是如果有明確的規(guī)則來(lái)定義可接受的選項(xiàng),那么限制用戶可以輸入的類型是一個(gè)很好的策略。例如,Airbnb訂房可選日期和設(shè)置鬧鐘時(shí)的時(shí)間范圍。


研究得出,使用產(chǎn)品時(shí)有77.7%的錯(cuò)誤都是人為的,防錯(cuò)法則可以幫助設(shè)計(jì)師站在用戶體驗(yàn)的角度考慮設(shè)計(jì)方案,做到操作前、中、后都有及時(shí)的反饋,預(yù)測(cè)到他們有可能發(fā)生的誤操作狀態(tài),讓用戶更快完成目標(biāo),幫助用戶減少出錯(cuò)率。



每次拿起U盤(pán)插入電腦時(shí),我就呆住了,到底朝那個(gè)方向才是對(duì)的?

防呆(Fool-proofing)是一種預(yù)防矯正的行為約束手段,運(yùn)用避免產(chǎn)生錯(cuò)誤的限制方法,使出錯(cuò)的機(jī)會(huì)降至最低,進(jìn)而達(dá)到“第一次就把工作做對(duì)”之境界。


設(shè)計(jì)師應(yīng)謹(jǐn)記:不要認(rèn)為用戶是專家。比如,我們都知道“漢堡”圖標(biāo)就是菜單,點(diǎn)擊這個(gè)按鈕就會(huì)調(diào)出某些功能。但是設(shè)計(jì)師忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是面包屑、什么是抽屜式導(dǎo)航、什么是3Dtouch、怎樣雙指滑動(dòng)。更何況普通用戶并不會(huì)研究App,在他們眼中產(chǎn)品只是眾多工具中的一個(gè)。因此,一定要把交互和設(shè)計(jì)做的簡(jiǎn)單,通用的圖標(biāo)、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁(yè)面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶做選擇題,這些都是有效防呆的好方法。


△頁(yè)面的中主按鈕更突出


防呆設(shè)計(jì)是預(yù)防錯(cuò)誤發(fā)生的方法,讓非專業(yè)、無(wú)經(jīng)驗(yàn)的用戶可以高效完成正確操作,不要讓用戶去思考,而是我們時(shí)時(shí)為用戶思考。



又被稱作“簡(jiǎn)單有效原理”:“如無(wú)必要,勿增實(shí)體?!?

通俗點(diǎn)去理解“如無(wú)必要,勿增實(shí)體”可以理解為“不要浪費(fèi)較多東西去做用較少的東西同樣可以做好的事情。”或者表述為“在其他條件相同的情況下,要求得越少的那個(gè)就越好,越有價(jià)值”。


應(yīng)用到設(shè)計(jì)學(xué)領(lǐng)域,該法則認(rèn)為做產(chǎn)品時(shí)功能上不可過(guò)于繁瑣,應(yīng)該保證簡(jiǎn)潔和工具化。例如,產(chǎn)品中為用戶提供了收藏功能是否就不再需要喜歡?提供了喜歡是不是不再需要收藏?一定要保證功能上的克制。不必要的設(shè)計(jì)元素會(huì)導(dǎo)致使用效率降低,還會(huì)增加不可預(yù)知的后果。建議在不損及功能的前提下,干掉多余的元素,當(dāng)兩個(gè)設(shè)計(jì)方案都能達(dá)到設(shè)計(jì)目的時(shí),選擇較為簡(jiǎn)單的那一個(gè)有利于更好地傳達(dá)內(nèi)容更好地用戶體驗(yàn)。


總的來(lái)說(shuō),我們可以結(jié)合《簡(jiǎn)約至上》一書(shū)中提到的刪除、組織、隱藏、轉(zhuǎn)移四個(gè)策略來(lái)將復(fù)雜的設(shè)計(jì)和體驗(yàn)變得更加簡(jiǎn)單。

刪除:關(guān)注核心,讓用戶注意力集中在自己要完成的目標(biāo)上,刪除不必要的功能、流程和造成視覺(jué)混亂的元素等;

組織:繁瑣的功能通過(guò)分塊,被組織成清晰的層次結(jié)構(gòu)。還記得我們前面說(shuō)到的“7±2法則”嗎,把項(xiàng)組織到7加減2個(gè)塊中;分塊越少,選擇越少,用戶負(fù)擔(dān)約輕;

隱藏:隱藏那些主流用戶很少使用,但自身更新需要但功能。通過(guò)漸進(jìn)展示和適時(shí)出現(xiàn)的方法減少干擾;

轉(zhuǎn)移:把合適的功能轉(zhuǎn)移到合適的設(shè)備上去。讓用戶感覺(jué)簡(jiǎn)單的一個(gè)重要前提,就是先搞清楚把什么工作交給計(jì)算機(jī),把什么工作留給用戶。




小測(cè)試,下列飲料中哪一種給你印象最深刻呢?文末揭曉。

可口可樂(lè)、雪碧、芬達(dá)、嶗山可樂(lè)、7喜、美年達(dá)


雷斯托夫效應(yīng)又稱隔離效應(yīng)(isolation effect),以及新奇效應(yīng)(novelty effect),前蘇聯(lián)心理學(xué)家馮·雷斯托夫認(rèn)為,某個(gè)元素越是違反常理,就越引人注意,收到更多的關(guān)注。


一樣?xùn)|西與以往經(jīng)歷明顯不同就產(chǎn)生了經(jīng)歷差異。比如人生中的很多第一次,第一次高考、大學(xué)的第一天、初戀、第一份工作等等。該差異也會(huì)出現(xiàn)在新奇面孔、電話號(hào)碼記憶中。奇特的面孔和特殊的電話號(hào)碼更能被人記住。

該理論以多種不同的方式應(yīng)用到設(shè)計(jì)中,最明顯的就是如果想要突出某個(gè)重點(diǎn)內(nèi)容,就要使它特殊化,通過(guò)色彩、尺寸、留白、字體粗細(xì)等設(shè)計(jì)手段。利用對(duì)比來(lái)凸顯想要表達(dá)的重要信息。例如金剛區(qū)、tab欄的運(yùn)營(yíng)活動(dòng)廣告,特殊化的設(shè)計(jì)讓它們?cè)诒尘爸忻摲f而出。



個(gè)人中心的會(huì)員卡為了吸引用戶注意,增加開(kāi)通率,都成了重點(diǎn)設(shè)計(jì)對(duì)象。


與以往不同的界面設(shè)計(jì)可以更加的吸引用戶,加深用戶的記憶,同時(shí)擴(kuò)大了活動(dòng)對(duì)用戶的影響力。例如每年淘寶的雙11首頁(yè)設(shè)計(jì)都與往常不同。


Google doodle 會(huì)在一些比較特殊的日子改變 logo 的設(shè)計(jì),把logo設(shè)計(jì)成與這個(gè)日子相關(guān)的插畫(huà)或涂鴉,與平時(shí)的 logo 形成差異化,幫助人們更好地記住這個(gè)日子。


因此我們?cè)诮缑嬖O(shè)計(jì)中,若想讓用戶對(duì)哪個(gè)模塊或者是元素引起注意或點(diǎn)擊,就可以打破常規(guī)對(duì)該元素進(jìn)行強(qiáng)調(diào)設(shè)計(jì),使他在背景中脫穎而出。但是不要任何元素都強(qiáng)調(diào),因?yàn)槭裁炊紡?qiáng)調(diào)就等于什么都沒(méi)強(qiáng)調(diào),就沒(méi)有重點(diǎn),所以要謹(jǐn)慎使用這個(gè)方法。


回到開(kāi)篇的題目,答案是「嶗山可樂(lè)」。相比其他飲料,嶗山可樂(lè)遇到的少,反而成了最特別的一個(gè)了。你的答案是什么?歡迎在下方留言探討。




食之無(wú)味,棄之可惜

損失厭惡是指人們面對(duì)同樣數(shù)量的收益和損失時(shí),認(rèn)為損失更加令他們難以忍受。 同量的損失帶來(lái)的負(fù)效用為同量收益的正效用的2.5倍。比如,丟100塊錢的痛苦感要遠(yuǎn)高于你撿到100塊錢帶來(lái)的幸福感,也就是說(shuō)要至少撿到300塊才能平復(fù)之前的心情。


生活中類似的栗子還有很多,比如旅游時(shí),雖然這個(gè)景點(diǎn)很爛,人們依然覺(jué)得來(lái)都來(lái)了,還是要看完再走才“不虧”;吃自助餐時(shí),明明吃不下那么多,可想到花了那么多錢,就要盡可能的多吃才算“回本”,真是應(yīng)了那句話:“食之無(wú)味,棄之可惜”;花了50塊買了張電影票,過(guò)了10分鐘發(fā)現(xiàn)是部爛片,就算在電影院睡覺(jué)也不愿提前走,覺(jué)得這50塊錢不能白花...


那么,該如何將“損失厭惡”賦能給產(chǎn)品設(shè)計(jì)呢?

最典型的莫過(guò)于電商App中的各類券滿天飛,比如:買二送一、3件7折、倒計(jì)時(shí)xx小時(shí)后恢復(fù)原價(jià)等等。商家就是為了營(yíng)造現(xiàn)在不買就會(huì)錯(cuò)過(guò)的套路,用戶也會(huì)覺(jué)得失之可惜。一年一度的天貓雙11,京東618,還有情人節(jié)、中秋節(jié)等各種有的沒(méi)的節(jié)日都是商家利用“損失厭惡”心理為基礎(chǔ)刺激消費(fèi)。



我們App的用戶粘性不太理想,增加一個(gè)“簽到”功能吧,產(chǎn)品經(jīng)理如是說(shuō)。如是我們看到各種簽到得禮品,贏紅包等活動(dòng)。中間還不能中斷,要連續(xù)簽到多少天才能得到獎(jiǎng)勵(lì),用戶也擔(dān)心中斷的損失。


某網(wǎng)盤(pán)下載文件時(shí),會(huì)給你一個(gè)10秒VIP高速下載的體驗(yàn),計(jì)時(shí)過(guò)后又恢復(fù)到龜速,讓你恨的牙癢癢。雖然這招有點(diǎn)損,但用戶體驗(yàn)到了VIP的快感,很多人還是會(huì)乖乖成為付費(fèi)會(huì)員。


產(chǎn)品運(yùn)營(yíng)中會(huì)經(jīng)常發(fā)一些優(yōu)惠券,雖然知道自己不會(huì)用,也要先領(lǐng)了再說(shuō)。這些券也都有時(shí)間限制,快過(guò)期的提醒也會(huì)加快用戶決策。還有0元開(kāi)通會(huì)員,套路是第一個(gè)月免費(fèi),次月開(kāi)始按正常價(jià)自動(dòng)續(xù)費(fèi),典型的“騙”進(jìn)來(lái)養(yǎng)肥了再“殺”。


人天生會(huì)對(duì)危險(xiǎn)的,不好的東西避而遠(yuǎn)之。如是我們就看到保險(xiǎn)行業(yè),他們會(huì)用一些負(fù)面信息(空難、車禍)刺激你,用戶就會(huì)產(chǎn)生焦慮,自然就想規(guī)避掉這些概率小的風(fēng)險(xiǎn)。例如購(gòu)買機(jī)票時(shí)的意外險(xiǎn),QQ退出登錄時(shí)的提示。


還有就是有用戶自己的內(nèi)容的東西,一般不會(huì)輕易舍去。拿我個(gè)人來(lái)說(shuō),飛書(shū)一直是我的寫(xiě)作工具,后來(lái)看到幾個(gè)更好用的軟件,但要想到把原來(lái)的這么多東西全部轉(zhuǎn)移過(guò)去也是件很心累的事,太麻煩,還是繼續(xù)用飛書(shū)好了。QQ這個(gè)“古老”的軟件,估計(jì)很多人好久都沒(méi)打開(kāi)過(guò)了吧,但是讓你刪了它,你還是不愿意的,因?yàn)槟巧厦嬗泻芏嗲啻旱幕貞洝?




用戶會(huì)將大部分時(shí)間花在其它網(wǎng)站上,因此他們會(huì)希望你的網(wǎng)站也能像他們已經(jīng)掌握的其它網(wǎng)站一樣,擁有相同的使用模式和習(xí)慣。

Jakob定律是由Jakob Nielsen提出的,他認(rèn)為用戶在其他網(wǎng)站所積累的經(jīng)驗(yàn)教會(huì)了他們?nèi)绾问褂镁W(wǎng)站,所以他們會(huì)希望你的網(wǎng)站可以與那些熟悉的網(wǎng)站一樣,相似的使用方式,在使用你的產(chǎn)品、服務(wù)、內(nèi)容和信息的時(shí)候,他們不會(huì)感到恐慌,而是輕車熟路。該原則鼓勵(lì)設(shè)計(jì)師遵循常見(jiàn)的設(shè)計(jì)模式,以避免混淆用戶或?qū)е赂叩恼J(rèn)知成本。


例如YouTube2017年改版前后的對(duì)比,在新版中,網(wǎng)站框架和功能上幾乎沒(méi)動(dòng),只是在UI上做了順應(yīng)新的設(shè)計(jì)準(zhǔn)則,比如調(diào)整字體大小、顏色、欄目間距等。整體上和舊版沒(méi)太大區(qū)別,而且還給用戶提供了舊版的選擇。


在移動(dòng)端App中也應(yīng)如此,在具有相同功能的頁(yè)面,盡量保持一致。大到頁(yè)面底層框架(比如電商應(yīng)用中的購(gòu)物流程),小到UI設(shè)計(jì)中的一個(gè)按鈕,一個(gè)圖標(biāo),甚至一句微文案。


在設(shè)計(jì)產(chǎn)品時(shí),要先延續(xù)大眾早已習(xí)慣的概念模型。然后再?gòu)淖约旱漠a(chǎn)品出發(fā),對(duì)其進(jìn)行改善。而不是從零開(kāi)始制定自以為是的流程。

日常使用的各類修圖軟件,版式都高度相似,中間是圖片,各種濾鏡、貼紙、調(diào)整等功能都放在底部操作區(qū)域,很多相同功能的名稱都一樣。這是用戶最熟悉的布局,可降低用戶在同類軟件使用的學(xué)習(xí)成本提升使用效率。


也許你會(huì)質(zhì)疑當(dāng)所有產(chǎn)品都遵循相同都設(shè)計(jì)模式,會(huì)讓產(chǎn)品同質(zhì)化嚴(yán)重,答案是必然的。此時(shí)需要深入了解用戶的目標(biāo)和心智模型(用戶訪談、用戶畫(huà)像、用戶體驗(yàn)地圖等),并將其應(yīng)用到我們的產(chǎn)品設(shè)計(jì)中去,縮小我們與用戶心智模型之間的差距,從而獲得良好的用戶體驗(yàn)。上文YouTube例子中,就是通過(guò)簡(jiǎn)單的用戶授權(quán)(新舊版本選擇),避免了心智模型的不一致會(huì)帶來(lái)的問(wèn)題,當(dāng)用戶準(zhǔn)備好隨時(shí)可以切換到新的版本。相反的案例Snapchat在18年設(shè)計(jì)改版時(shí),因?yàn)樾碌牟季治茨艽_保改版前后用戶心智模型的一致性,導(dǎo)致大量用戶流向競(jìng)爭(zhēng)對(duì)手Instagram那里了。


但是也要注意設(shè)備之間的差異,比如在移動(dòng)端“漢堡包”式菜單是個(gè)不錯(cuò)的方案,可是放到桌面端可能并不太友好,因?yàn)榇笃聊豢梢暦秶螅⌒〉臐h堡包圖標(biāo)很容易被忽略,這時(shí)候平鋪出來(lái)可能會(huì)更好。


思考總結(jié)

1、用戶會(huì)把在其他產(chǎn)品使用中已熟悉的操作習(xí)慣轉(zhuǎn)移到另一個(gè)看起來(lái)相似的產(chǎn)品上;

2、利用現(xiàn)有的思維模型,使用戶可以專注于自己的目標(biāo)上,而不是學(xué)習(xí)新的操作方式;

3、在進(jìn)行必要的改版時(shí),請(qǐng)給用戶過(guò)渡到新版本的機(jī)會(huì),即可以選擇短時(shí)間內(nèi)繼續(xù)使用舊版本;



看名稱挺拗口,另一種翻譯叫做“對(duì)角線平衡的和諧狀態(tài)”。它告訴我們?yōu)g覽頁(yè)面是由左上至右下的視線流,左上角是視覺(jué)第一落點(diǎn)區(qū),右下角是視覺(jué)最終落點(diǎn)區(qū),因此右上角和左下角都是一個(gè)強(qiáng)烈的視覺(jué)盲點(diǎn)區(qū),大多數(shù)時(shí)容易被忽略。


在進(jìn)行信息排布時(shí),將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個(gè)視覺(jué)落點(diǎn)可以展示重要操作。運(yùn)用視覺(jué)元素來(lái)創(chuàng)建一條虛擬的“線”,讓用戶的視線跟隨左上到右下這條對(duì)角線移動(dòng),符合用戶習(xí)慣性的眼動(dòng)規(guī)律。


古騰堡圖表應(yīng)用最典型的例子就是商品詳情頁(yè),在界面的頂部展示商品圖片、名稱、價(jià)格、快遞和優(yōu)惠等用戶主要關(guān)心的信息;右上和左下通常是分享、客服和收藏等次要信息;右下角則放置最終促成用戶交易的購(gòu)買按鈕。


我們都知道一般頁(yè)面按鈕都在界面底部是因?yàn)殡x手近,方便操作,但不僅僅如此。還因?yàn)闉g覽是用戶的第一行為,他們的視線會(huì)根據(jù)頁(yè)面元素進(jìn)行移動(dòng),最終停留在底部結(jié)尾的地方。


看各種社交產(chǎn)品評(píng)論、點(diǎn)贊的位置,就知道產(chǎn)品希望用戶先干什么的想法。


彈窗的按鈕擺放一般都是左「取消」右「確認(rèn)」,目的是讓用戶最快地看到主要操作內(nèi)容。



















余額寶的「轉(zhuǎn)出」在左,「轉(zhuǎn)入」在右,畢竟誰(shuí)也不想財(cái)往外流是吧。


既然如此,為什么“發(fā)布”頁(yè)面的按鈕都在右上角呢?因?yàn)榘l(fā)布頁(yè)是屬于“編輯頁(yè)面”,需要用戶謹(jǐn)慎操作,這里關(guān)注的核心應(yīng)該是可編輯內(nèi)容區(qū)域,而不是按鈕本身。


類似的例子還有很多,設(shè)計(jì)中與此視覺(jué)流與節(jié)奏規(guī)律相似的還有F型布局和Z型布局,合理運(yùn)用這些節(jié)奏模式,使用者會(huì)跟隨你“設(shè)計(jì)”的視覺(jué)流和運(yùn)動(dòng)規(guī)律來(lái)瀏覽頁(yè)面,有效提高用戶閱讀的節(jié)奏和理解能力。




美國(guó)心理學(xué)家亞伯拉罕·馬斯洛(Maslow.A.H.)從人類動(dòng)機(jī)的角度提出需求層次理論,該理論強(qiáng)調(diào)人的動(dòng)機(jī)是由人的需求決定的。他將人類需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求,依此由低層次到高層次的過(guò)程。馬斯洛需求層次理論最大意義就在于,它告訴了我們,人在滿足了基本的需求之后,就要去實(shí)現(xiàn)更高的需求和目標(biāo)。


馬斯洛需求層次理論有兩個(gè)基本出發(fā)點(diǎn),一是人人都有需求,某層需求滿足后,另一層需求才出現(xiàn);二是在上層需求未獲滿足前,首先滿足迫切需求,該需求滿足后,后面的需要才顯示出其激勵(lì)作用。例如,在能感受到愛(ài)之前,他們的生理和安全需求一定要得到滿足。


回歸到產(chǎn)品,一款產(chǎn)品,最核心的是解決用戶的需求。馬斯洛需求層次理論,為產(chǎn)品的需求分析指明了方向。

生理需求:滿足人的最基本需求,如衣、食、住、行、生理方面的需求。諸如美團(tuán)外賣、淘寶、馬蜂窩等為日常生活提供方便的應(yīng)用;

安全需求:人生安全、財(cái)產(chǎn)保險(xiǎn),也是強(qiáng)需求。如是各類投資理財(cái)軟件層出不窮。

社交需求:包括友情、親情、愛(ài)情多個(gè)層次,滿足人類社會(huì)關(guān)系,讓每個(gè)人不再是孤單的個(gè)體。如是微信、微博、Soul、探探、陌陌等不同類型的社交軟件多如牛毛;

尊重需求:每個(gè)人都有被尊重的需求,都希望展現(xiàn)自己,獲得人們認(rèn)可。此需求可以深度結(jié)合在社交需求中。

自我實(shí)現(xiàn):最高層級(jí)的需求,完成與自己的能力相稱的一切事情,實(shí)現(xiàn)自己理想的需要。結(jié)合到產(chǎn)品可以理解為能滿足自己外在展示(炫耀)的需求,如各類美顏軟件,美化后的照片曬到朋友圈,給人看到最好的一面。


由此規(guī)律可以看出,越靠近底層需求越是剛需,越往上,就變得越來(lái)越不必要,如自我實(shí)現(xiàn),變得可有可無(wú),不再是所有人的剛需。一個(gè)優(yōu)秀的產(chǎn)品,深諳人性滿足用戶核心需求,才能形成持續(xù)穩(wěn)定高用戶粘性的產(chǎn)品。




序列效應(yīng)法則又叫系列位置效應(yīng),是指一種記憶現(xiàn)象: 在列舉項(xiàng)目時(shí),排在最前面與最后面的元素,要比排在中間的更容易讓人記住。

因?yàn)槿藗儗?duì)排在頭、尾的項(xiàng)目,要比排在中間的更容易記起來(lái)。比如我們都知道第一位登上月球的宇航員是阿姆斯特朗,卻很少人知道第二位奧爾德林;班級(jí)里我們一般都知道成績(jī)最好的第一名和倒數(shù)第一名,至于排在中間的很難記住。因此對(duì)排在開(kāi)頭的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱為“首位效應(yīng)”( primacy effect)。對(duì)排在結(jié)尾的項(xiàng)目產(chǎn)生加強(qiáng)的回想效果,稱為“近因效應(yīng)”( recency effect )。


分類頁(yè)簽中,我們通常都會(huì)記得“精選”、“熱門”這類標(biāo)簽,是希望給用戶進(jìn)入App后看到的主要內(nèi)容。這就是“首位效應(yīng)”,把重要性高的內(nèi)容放在首要位置。


我們都知道界面中“返回”按鈕放在左上角,除了操作習(xí)慣和防誤觸外,還因?yàn)樗霈F(xiàn)在頁(yè)面左上角最開(kāi)始的地方,更長(zhǎng)久地儲(chǔ)存在長(zhǎng)期記憶之中,需要“返回”時(shí)能夠快速回憶出來(lái)。


tabbar數(shù)量不管是3個(gè)還是5個(gè),用戶通常都會(huì)記得第一個(gè)“首頁(yè)”和最后一個(gè)“我的”,對(duì)排在中間的都會(huì)選擇性的忽略掉。


有時(shí)候新上一個(gè)功能,產(chǎn)品想提高它的位置引起用戶注意,會(huì)和“我的”互換位置。例如網(wǎng)易云音樂(lè),新版本中把“我的”放在第三個(gè)tab,為了提升“云村”重要性,把它放置最后一個(gè)tab,正是利用了“近因效應(yīng)”。


近因效應(yīng)常用于及時(shí)進(jìn)行反饋的設(shè)計(jì)界面中,比如點(diǎn)贊、評(píng)論、分享等功能置于底部不僅可加深印象,同時(shí)用戶在看到有趣的內(nèi)容,想要評(píng)論或分享時(shí),不用等到文章看完即可操作。從而增強(qiáng)內(nèi)容粘性,提高互動(dòng)率。


用戶的記憶具有系列位置效應(yīng),而且人的短期記憶非常有限,通過(guò)序列效應(yīng)法則的應(yīng)用,我們可以幫助用戶減輕記憶負(fù)擔(dān)。在排列項(xiàng)目時(shí),把重要的放在首位或末尾,以達(dá)到最好的記憶效果。


作者: 印跡_ 來(lái)源:站酷

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。

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

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


用動(dòng)效創(chuàng)造可用性:動(dòng)效設(shè)計(jì)的基本原理

純純

在筆者剛學(xué)習(xí)動(dòng)效那會(huì)兒,因?yàn)閳?zhí)著于鉆研軟件技法,而忽略了動(dòng)效的基本原理,導(dǎo)致作出了很多生硬的動(dòng)效設(shè)計(jì)。和很多事情一樣,動(dòng)效設(shè)計(jì)如果違背了自然規(guī)律,必定會(huì)損害產(chǎn)品的可用性。


在用戶界面中,動(dòng)效不僅僅是一種視覺(jué)裝飾,而是一種強(qiáng)大的力量,它可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。

本文給大家介紹了十二項(xiàng)最基本的動(dòng)效設(shè)計(jì)原理,這些都適合用于UX/UI設(shè)計(jì)項(xiàng)目中,是非常有用的運(yùn)動(dòng)原理,建議收藏反復(fù)食用。



原理一:緩動(dòng) Easing

緩動(dòng)效果模擬了現(xiàn)實(shí)世界中對(duì)象隨時(shí)間加速或減速的方式,它適用于所有運(yùn)動(dòng)的元素。自然界中沒(méi)有東西是從一點(diǎn)呈線性地移動(dòng)到另一點(diǎn)。現(xiàn)實(shí)中,物體在移動(dòng)時(shí)往往會(huì)加速或減速。我們的大腦習(xí)慣于期待這種運(yùn)動(dòng),因此在做動(dòng)畫(huà)時(shí),應(yīng)利用此規(guī)律。自然的運(yùn)動(dòng)會(huì)讓用戶對(duì)你的應(yīng)用感覺(jué)更舒適,從而產(chǎn)生更好的總體體驗(yàn)。


線性動(dòng)畫(huà)

沒(méi)有任何速度上的變化的的動(dòng)畫(huà)稱為線性動(dòng)畫(huà),如坐標(biāo)圖所示,運(yùn)動(dòng)的曲線成直線狀態(tài)。這種動(dòng)畫(huà)效果往往顯得很僵硬,不自然,讓用戶覺(jué)得不協(xié)調(diào)。一般來(lái)說(shuō),應(yīng)避免線性運(yùn)動(dòng)。



緩出動(dòng)畫(huà)

運(yùn)動(dòng)的開(kāi)頭速度很快,結(jié)尾處逐漸減速的動(dòng)畫(huà)稱為緩出動(dòng)畫(huà)。運(yùn)動(dòng)曲線呈拋物線狀態(tài),緩出動(dòng)畫(huà)最適合界面里面的動(dòng)效,快速的入場(chǎng)給人反應(yīng)很快的感覺(jué)。



緩入動(dòng)畫(huà)

和緩出相反,緩入動(dòng)畫(huà)是開(kāi)頭慢結(jié)尾快,這就像自然落下的球體一樣,速度越來(lái)越快。但是,從交互的角度來(lái)看,緩入可能讓人感覺(jué)有點(diǎn)不自然,因?yàn)榻Y(jié)尾很突然;在現(xiàn)實(shí)中移動(dòng)的物體往往是減速,而不是突然停止。緩入還有讓人感覺(jué)行動(dòng)遲緩的不利效果,這會(huì)對(duì)網(wǎng)站或應(yīng)用的響應(yīng)速度給人的感覺(jué)產(chǎn)生負(fù)面影響。



緩入緩出動(dòng)畫(huà)

把緩入和緩出曲線連接在一起,就是完整的緩入緩出動(dòng)畫(huà),它的運(yùn)動(dòng)過(guò)程可以想象一輛汽車從起步到停車的動(dòng)作,可以實(shí)現(xiàn)比單純緩出更生動(dòng)的效果。由于開(kāi)頭慢、中間快和結(jié)尾慢,動(dòng)畫(huà)將有更強(qiáng)的對(duì)比,會(huì)讓用戶感到愉悅。

因此,緩動(dòng)原理實(shí)際上是使動(dòng)畫(huà)不再那么尖銳或生硬的過(guò)程。



原理二:變形 Transformation


變形是由一個(gè)形態(tài)變成另一個(gè)形態(tài),這種形變是動(dòng)畫(huà)里最引人注目的。通過(guò)元素形態(tài)的轉(zhuǎn)變,告知用戶元素的狀態(tài)或作用發(fā)生了改變。


例如這個(gè)下載動(dòng)畫(huà),下載完成后變形為按鈕,其實(shí)是符合用戶預(yù)期的。這種無(wú)縫轉(zhuǎn)換,可以提高用戶的認(rèn)知度,提

升了動(dòng)畫(huà)的連貫性。


在動(dòng)效中,利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的,通過(guò)物體運(yùn)動(dòng)的變形狀態(tài)就能很好的體現(xiàn)出來(lái)。





原理三:克隆 Cloning


當(dāng)元素被克隆時(shí),可表達(dá)出元素與元素之間的某種連續(xù)性。在此原理中,如何讓物體的出現(xiàn)和離開(kāi)具有連續(xù)性、關(guān)系和過(guò)渡,是信息準(zhǔn)確傳遞的關(guān)鍵。


例如這個(gè)發(fā)布按鈕,點(diǎn)擊它會(huì)創(chuàng)建多個(gè)新對(duì)象,引導(dǎo)注意力,非常清晰的表達(dá)了他們之間的關(guān)系。


還有這個(gè)運(yùn)動(dòng)健康頁(yè)面,在添加練習(xí)項(xiàng)目時(shí),從主按鈕克隆生成一系列練習(xí)項(xiàng)目,選擇完成后原路返回。




原理四:覆蓋 Overlay


利用覆蓋原理能讓原本有限的空間得以延伸,用以顯示額外的可見(jiàn)元素,補(bǔ)償了用戶體驗(yàn)中的單一統(tǒng)一視野或“客觀視圖”。覆蓋原理在UI設(shè)計(jì)中常用于列表橫滑,通過(guò)覆蓋,隱藏相關(guān)操作,以減少視覺(jué)上的干擾。


在某種程度上,作為設(shè)計(jì)師,“層”的概念是顯而易見(jiàn)的,不言而喻。我們用層來(lái)設(shè)計(jì),層的概念被深深地內(nèi)化了。但是,我們必須小心區(qū)分“制作”和“使用”的過(guò)程。


作為不斷參與“制作”過(guò)程的設(shè)計(jì)師,我們要非常熟悉我們正在設(shè)計(jì)的物體的所有部分(包括隱藏部分)。然而,作為用戶,那些不可見(jiàn)的部分是根據(jù)定義和實(shí)踐,在視覺(jué)和認(rèn)知上隱藏的。




原理五:偏移和延遲 Offset & Delay

偏移和延遲原理是表明元素之間的層級(jí)與關(guān)系,在新元素入場(chǎng)時(shí)利用偏移和延遲讓信息或界面元素按照秩序進(jìn)退場(chǎng),定義對(duì)象關(guān)系和層次結(jié)構(gòu)。


在上面的示例中,浮動(dòng)操作按鈕 (FAB) 轉(zhuǎn)換為頭部背景。數(shù)據(jù)圖表在時(shí)間的延遲下依次出現(xiàn),暗示用戶這里的信息與其他元素之間的區(qū)別,吸引用戶注意力。




原理六:遮罩 Masking


遮罩是決定元素變化的結(jié)果是什么,通過(guò)暫時(shí)使對(duì)象顯示和隱藏,以連續(xù)無(wú)縫的方式轉(zhuǎn)換,保持了敘事流程的效果。雖然對(duì)象本身保持不變,但因?yàn)樗辛诉吔绾臀恢茫@兩個(gè)因素決定了對(duì)象是什么。


例如這個(gè)轉(zhuǎn)動(dòng)的咖啡杯,借助遮罩,通過(guò)改變logo的位置和吸管的朝向,造成杯子在自轉(zhuǎn)的假象。



在上面的例子中,音樂(lè)封面改變了邊界形狀和位置,但沒(méi)有改變內(nèi)容。轉(zhuǎn)換發(fā)生在用戶執(zhí)行操作后激活,是相當(dāng)巧妙的技巧。




原理七:父子關(guān)系 Parenting


父子關(guān)系是將界面元素關(guān)聯(lián)起來(lái)的重要原則,創(chuàng)建出空間和時(shí)間層次關(guān)系。它最適合作為“實(shí)時(shí)”互動(dòng),例如拖動(dòng)列表順序時(shí),其他信息會(huì)同步跟上。

回想一下,很多元素屬性都可以創(chuàng)造這種聯(lián)動(dòng)的繼承關(guān)系,例如不透明度、位置、旋轉(zhuǎn)、縮放、形狀、顏色等。




原理八:數(shù)值變化 Value Change

文本和數(shù)字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒(méi)有給它們帶來(lái)區(qū)別和嚴(yán)謹(jǐn)來(lái)評(píng)估它們?cè)谥С挚捎眯苑矫娴淖饔谩?


數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情,既可以發(fā)生在實(shí)時(shí)活動(dòng)中,也可以發(fā)生在非實(shí)時(shí)活動(dòng)中。它可能是時(shí)間、收入、速度、游戲得分等。當(dāng)我們使用動(dòng)態(tài)的數(shù)值變化時(shí),它激活了一種“神經(jīng)反饋”,用戶會(huì)覺(jué)得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的,就感覺(jué)與現(xiàn)實(shí)的聯(lián)系會(huì)減少。



數(shù)值的變化在各類金融理財(cái)和日歷APP中經(jīng)常出現(xiàn),數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對(duì)數(shù)據(jù)的價(jià)值產(chǎn)生影響;如上圖中的數(shù)值的動(dòng)態(tài)變化,讓用戶感知到自己可能有能力影響到數(shù)據(jù),提升了參與活動(dòng)的意愿。




原理九:蒙層 Obscuration

蒙層與原理四的覆蓋類似,只不過(guò)蒙層帶有透明屬性,它擋住了后面的信息,但又沒(méi)有全擋住。iOS中常見(jiàn)的毛玻璃效果就是如此,它讓用戶意識(shí)到正在操作的對(duì)象,還有另一個(gè)世界。拓展了Z軸的層次結(jié)構(gòu),補(bǔ)償用戶體驗(yàn)中的單一視野。




原理十:視差  Parallax

當(dāng)用戶滾動(dòng)時(shí),在視覺(jué)平面中創(chuàng)建空間層次結(jié)構(gòu)。其目的是為了建立各元素的層級(jí)關(guān)系,移動(dòng)速度更快的交互式元。對(duì)用戶來(lái)說(shuō)顯得更接近,較慢的非交互式元素,會(huì)退回到背景顯得更遠(yuǎn),從而更好把內(nèi)容和環(huán)境區(qū)分開(kāi)來(lái) 。


設(shè)計(jì)師可以利用時(shí)間本身來(lái)創(chuàng)建這些關(guān)系,告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。用戶不僅認(rèn)為界面對(duì)象現(xiàn)在具有超出視覺(jué)設(shè)計(jì)中確定的層次結(jié)構(gòu),而且現(xiàn)在可以利用這種層次結(jié)構(gòu),讓用戶意識(shí)到設(shè)計(jì)之前掌握用戶體驗(yàn)內(nèi)容。




原理十一:多維 Dimensionality

維度是將界面的元素多維化,使元素看起來(lái)像可翻轉(zhuǎn)的,可折疊的,浮動(dòng)的。可以使不同的UI元素實(shí)現(xiàn)無(wú)縫的過(guò)渡銜接,它通常以折紙維度、浮動(dòng)維度和對(duì)象維度這三種方式來(lái)呈現(xiàn)。


此外,維度原理克服了視覺(jué)平面中的分層悖論,其中缺乏深度的物體存在于同一平面上,但出現(xiàn)在其他物體的“前面”或“后面”。


折紙維度可以被認(rèn)為是“折疊”或“鉸鏈”的三維界面對(duì)象,它由多個(gè)元素組合成“折紙”結(jié)構(gòu),隱藏的物體在空間上仍然可以說(shuō)是“存在”的,即使它們不可見(jiàn)。



浮動(dòng)維度為界面對(duì)象提供了空間起源和離開(kāi),使交互模型直觀且具有高度敘事性。常見(jiàn)的“3D”卡片就是通過(guò)這一維度來(lái)實(shí)現(xiàn)的。


對(duì)象維度會(huì)產(chǎn)生具有真實(shí)深度和形式的維度對(duì)象,可以看到,雖然在2D層,元素卻可以3D視角呈現(xiàn)真實(shí)的維度。




原理十二:平移與縮放  Dolly & Zoom


平移與縮放是電影概念,指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng),以及畫(huà)面中圖像本身的大小從遠(yuǎn)景平滑變化到特寫(xiě)鏡頭(反之亦然)。

在某些情況下,無(wú)法判斷對(duì)象是否正在縮放??赡苁窃谠?3D 空間中向著相機(jī)移動(dòng),也許是相機(jī)在向?qū)ο笠苿?dòng),又或者是對(duì)象自身在放大縮小。以下三個(gè)示例說(shuō)明了可能的情況。



鏡頭平移:被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止,而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。

鏡頭縮放:鏡頭與被攝物體在位置上保持靜止,而被攝物自身進(jìn)行縮放。

縮放:是指視角和對(duì)象都沒(méi)有在空間上移動(dòng),而是物體本身在縮放(或者我們的視野正在縮小,從而導(dǎo)致圖像放大),這向觀看者傳達(dá)了附加界面對(duì)象在其他對(duì)象或場(chǎng)景“內(nèi)部”的信息。



移動(dòng)還可以結(jié)合維度原則,從而產(chǎn)生更多空間和深度體驗(yàn),并向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他區(qū)域或內(nèi)容??s放允許無(wú)縫轉(zhuǎn)換 - 實(shí)時(shí)和非實(shí)時(shí) - 支持可用性。在創(chuàng)建空間心智模型時(shí),Dolly & Zoom Principle 中采用的這種無(wú)縫性非常強(qiáng)大。




作者: 印跡_ 來(lái)源:站酷

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。

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

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


做好這幾處細(xì)節(jié),你的排版才能更精致

seo達(dá)人

一、給標(biāo)題搭配輔助文字

標(biāo)題的字號(hào)通常會(huì)比較大,這時(shí)如果給它搭配一個(gè)字號(hào)比較小、字體不一樣的副標(biāo)題,或者是英文標(biāo)題,那么就可以得到鮮明的大小對(duì)比和字體對(duì)比,甚至還可以有色彩對(duì)比、空間對(duì)比等。這么做可以增加標(biāo)題的層級(jí)關(guān)系,使視覺(jué)更豐富,更生動(dòng)。

圖片

▲ 上圖的標(biāo)題只有四個(gè)字,如果單獨(dú)排版會(huì)很單調(diào),所以設(shè)計(jì)師把它與英文標(biāo)題一起排版。如果你想要排版的效果比較時(shí)尚、活潑,可以將標(biāo)題進(jìn)行斷行、錯(cuò)位處理,兩行或三行的標(biāo)題比單行標(biāo)題的層級(jí)更豐富、對(duì)比關(guān)系更多。

圖片

▲ 上圖的標(biāo)題搭配了一行字號(hào)更小、字重更細(xì)的副標(biāo)題,由于上圖海報(bào)想要表現(xiàn)出比較高端的品質(zhì)感,所以標(biāo)題和副標(biāo)題采用了同一種字體,也沒(méi)有加入太多的排版技巧。

圖片

▲ 上圖的標(biāo)題與活動(dòng)時(shí)間和裝飾英文組合排列在一起,并且在排版時(shí)有明顯的大小對(duì)比、字體對(duì)比、顏色對(duì)比、點(diǎn)線面的對(duì)比等,使整個(gè)標(biāo)題看起來(lái)有豐富的細(xì)節(jié)。

 

 

二、賣點(diǎn)要有Icon

絕大部分的產(chǎn)品海報(bào)或?qū)氊愒斍轫?yè)上都會(huì)展現(xiàn)產(chǎn)品的賣點(diǎn)(核心優(yōu)勢(shì)),這通常會(huì)是比較重要的信息,所以需要重點(diǎn)突出。不過(guò)突出的手法不一定要使用很大的的或者是對(duì)比很強(qiáng)的顏色,給賣點(diǎn)增加icon就是一個(gè)很常見(jiàn)、很有效的技巧,既可以通過(guò)icon把賣點(diǎn)信息與其他信息區(qū)別開(kāi),從而吸引讀者的目光,也能使畫(huà)面視覺(jué)更豐富、有更多細(xì)節(jié)。

當(dāng)然,icon設(shè)計(jì)本身也很關(guān)鍵,首先,要盡量使用一些大家比較熟、能一看就懂的圖形符號(hào);其次,要盡量設(shè)計(jì)得細(xì)致一些,雖然會(huì)需要花一些時(shí)間,但這是值得的。

圖片

圖片

另外,風(fēng)格的統(tǒng)一也很重要,一方面是每個(gè)icon的風(fēng)格要一致,不要有些硬朗、有些柔和,也不要有些很復(fù)雜、有些很簡(jiǎn)單;另一方面是Icon的調(diào)性也要符合產(chǎn)品調(diào)性以及畫(huà)面的風(fēng)格,這樣畫(huà)面的整體視覺(jué)才能更統(tǒng)一、更美觀。

圖片

比如,在上圖的兒童牙刷海報(bào)中,由于畫(huà)面部分采用了剪紙風(fēng)格,所以賣點(diǎn)的icon也使用了剪紙風(fēng)格。

 

三、信息要分組

版面中的信息一定要分組,不要全部排成一堆或者四分五裂地排列,否則都會(huì)加大閱讀和理解的難度,可以通過(guò)控制信息之間的間距來(lái)分組,也可以利用線、線框、色塊來(lái)分組。并且,信息分組還需要注意以下兩點(diǎn):

? 視覺(jué)上要有主次,即每組信息版面空間占比不要太一致。

? 要符合閱讀及信息傳播的邏輯。有些設(shè)計(jì)師會(huì)為了好看而隨意把信息的順序打亂重組,這是本末倒置的行為。

例如在下圖的海報(bào)中,設(shè)計(jì)師雖然將信息進(jìn)行了分組,但是除了主體很突出以外,其他信息都太過(guò)平均了,再加上信息塊(包含文字組和圖片部分)特別多,所以導(dǎo)致排版很散。

圖片

而在優(yōu)化后的方案中,把版面信息進(jìn)行了重新分組和排列,視覺(jué)更整體、層級(jí)關(guān)系更鮮明。

圖片

下圖海報(bào)的排版也有幾個(gè)比較嚴(yán)重的問(wèn)題:

圖片

? 信息分組不合理。大部分文字信息都被圓形色塊打包成一個(gè)組,但里面很多信息的意義并不相同,其實(shí)不適合組合在一起;

? 文案的排版不符合邏輯。比如把“只選直徑…”這句文案放在最上面有點(diǎn)突然;再比如“首創(chuàng)一品黑蒜豬大蹄飯”其實(shí)是一句話,設(shè)計(jì)師卻把它拆開(kāi)排列,而且順序是錯(cuò)亂的;

? 排版太亂。雖然用了圓形色塊進(jìn)行整合,但是在這一組新信息里,有的文字排成弧線、有的文字豎排、有的文字橫排、有的文字對(duì)齊排、有的文字錯(cuò)位排,同一個(gè)信息塊里采用了太多不同的排版形式,而且組合得不好。

修改過(guò)的方案則進(jìn)行了合理的分組,信息排版也更符合閱讀理解的邏輯。

圖片

把標(biāo)題和副標(biāo)題分成一組排在左上角。在面積上是版面中的第二大視覺(jué)塊,信息一目了然且主次分明;

? 把價(jià)格、口感NO.1?“只選直徑…”這三個(gè)信息分成一個(gè)組,排在標(biāo)題和副標(biāo)題下方、產(chǎn)品的上方,符合正確的視覺(jué)流程和閱讀邏輯。而且該組文案與產(chǎn)品圖片進(jìn)行疊加或繞排處理,既加強(qiáng)了文字與圖片的關(guān)聯(lián),也使得文案與產(chǎn)品形成了一個(gè)大的整體。

所以,設(shè)計(jì)師在做設(shè)計(jì)時(shí),一定要閱讀文案、理解文案,看哪些信息可以劃分到一組排列,哪些信息應(yīng)該要分開(kāi)排列。

 

四、視覺(jué)層級(jí)要分明

只要不是同一句話或者同一類信息,那么都要區(qū)分它們的層級(jí)關(guān)系以及視覺(jué)呈現(xiàn),哪怕這些信息被分在同一組。比如標(biāo)題、副標(biāo)題、小標(biāo)題、正文、賣點(diǎn)、注解、價(jià)格等等,這些信息在視覺(jué)呈現(xiàn)上都要有所區(qū)分,并且區(qū)分得要盡量明顯一些,如果只是把字號(hào)加大一點(diǎn)、改變文字的顏色,那么可能會(huì)比較難把信息進(jìn)行有效區(qū)隔,視覺(jué)上也會(huì)比較單調(diào)。

所以,為了視覺(jué)上更美觀、更易閱讀,我們還可以通過(guò)改變字體、排版的方向、排列的位置,增加輔助元素(icon、色塊、線條、線框等)、裝飾效果(描邊、立體效果、扭曲效果、裁剪效果等)等等,創(chuàng)造出比較鮮明的對(duì)比以及視覺(jué)層級(jí)。

圖片

圖片

另外需要注意的是,區(qū)隔信息的手法要與設(shè)計(jì)的風(fēng)格和調(diào)性吻合,通常來(lái)說(shuō),高端、簡(jiǎn)約的版面,所用的排版技巧和裝飾手法會(huì)比較少,視覺(jué)效果也不會(huì)太夸張;而如果是時(shí)尚類或者促銷類的設(shè)計(jì),其用于區(qū)隔信息層級(jí)的手法可以盡量豐富、夸張一點(diǎn)。

比如下圖是蘋(píng)果筆記本的banner設(shè)計(jì),其每一行文字的視覺(jué)效果都有明顯的區(qū)別,但并沒(méi)有采用特別夸張的表現(xiàn)手法,字體和排版方向都是統(tǒng)一的。

圖片

圖片

而下面這則貓糧的海報(bào),其文字表現(xiàn)手法則要豐富很多,對(duì)比要更強(qiáng)。

圖片

圖片

 

總結(jié)一下

想要版式更加精致、更便于信息的傳播,我們需要處理好以下幾處細(xì)節(jié):? 給標(biāo)題搭配輔助文字;? 賣點(diǎn)要有Icon;? 信息要分組;? 視覺(jué)層級(jí)要分明。


作者:蔥爺

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》做好這幾處細(xì)節(jié),你的排版才能更精致

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


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


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




如何提升UI設(shè)計(jì)的高級(jí)感

純純

創(chuàng)建美觀、可用和高效的UI界面需要花費(fèi)時(shí)間進(jìn)行設(shè)計(jì)細(xì)節(jié)的打磨,本文從視覺(jué)和情感化設(shè)計(jì)兩個(gè)方面來(lái)說(shuō)說(shuō)如何提升UI設(shè)計(jì)的高級(jí)感。 


1、視覺(jué)元素

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天,你會(huì)發(fā)現(xiàn)所有的App越來(lái)越像,似乎是同一套模版設(shè)計(jì)出來(lái)的產(chǎn)品。而這種普適化的設(shè)計(jì)會(huì)導(dǎo)致同質(zhì)化嚴(yán)重,使得設(shè)計(jì)不精致,產(chǎn)品沒(méi)有氣質(zhì)和品牌感。一個(gè)App設(shè)計(jì)是否精致,是否富有設(shè)計(jì)感,在于它的細(xì)節(jié),這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候,要從細(xì)微之處著手,從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。本節(jié)總結(jié)了12個(gè)簡(jiǎn)單直觀的提升設(shè)計(jì)感的小細(xì)節(jié),一起來(lái)學(xué)習(xí)。


1.1 使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候,最常見(jiàn)的錯(cuò)誤莫過(guò)于過(guò)度依賴字體大小差異來(lái)營(yíng)造對(duì)比。單純使用字體大小對(duì)比,所營(yíng)造的對(duì)比并不夠,嘗試結(jié)合色彩和字重來(lái)營(yíng)造更好的對(duì)比效果。


每種顏色都有一個(gè)視覺(jué)權(quán)重,這有助于在內(nèi)容中建立層次結(jié)構(gòu)。通過(guò)使用顏色的深淺,為元素賦予不同的重要性。如果可以的話,你甚至可以采用兩到三種顏色:

  • 主要內(nèi)容使用深灰色(諸如標(biāo)題,但是不要用純黑)

  • 次要內(nèi)容使用灰色(比如商品介紹)

  • 輔助性內(nèi)容采用淺灰色(比如發(fā)布日期)

類似的,在UI設(shè)計(jì)的時(shí)候,通常兩種不同的字重足以營(yíng)造出優(yōu)秀的層次感:

  • 大多數(shù)的文本采用正常的字重(400到500,具體取決于字體)

  • 對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重(600到700,具體取決于字體)

▲主標(biāo)題字重為600,其他標(biāo)綠點(diǎn)的文字字重都為400



應(yīng)當(dāng)盡量不要讓正文部分字重低于400,因?yàn)檫@一部分字體本身尺寸已經(jīng)較小,低于400會(huì)使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點(diǎn),或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。


灰色文字在無(wú)彩/彩色背景下要分開(kāi)處理

不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯(cuò)的淡化其視覺(jué)效果的做法。

但是在彩色背景下,想要降低和背景色之間的對(duì)比,通常有兩種方法:

一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度,右圖為和背景同色相高明度的顏色



其次當(dāng)涉及長(zhǎng)篇內(nèi)容時(shí),大面積的深色粗體字會(huì)給人一種沉重感,而且很跳躍。通過(guò)選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個(gè)問(wèn)題,使文字更容易被識(shí)別。


1.2 統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色,再調(diào)整色調(diào)和顏色深淺來(lái)增加均衡。設(shè)計(jì)時(shí)避免用過(guò)多的顏色。如果項(xiàng)目允許,只需使用固定的色板,通過(guò)調(diào)整基礎(chǔ)色的飽和度和明度,利用這種簡(jiǎn)單的方式為設(shè)計(jì)增加一致性。


1.3 干凈的陰影

陰影是UI設(shè)計(jì)中最常見(jiàn)的視覺(jué)表現(xiàn)手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時(shí)也能增強(qiáng)畫(huà)面的視覺(jué)層次感。相比于采用大范圍的擴(kuò)散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見(jiàn)的光源特征,光線從上往下照下來(lái)所營(yíng)造的陰影效果。


這種輕柔的陰影呈現(xiàn)出的干凈,增加了畫(huà)面的精致。如果陰影的范圍太小或顏色太深,位置也沒(méi)有偏移,而是聚集在元素的四周,就會(huì)讓畫(huà)面更加扁平,讓視覺(jué)變得厚重,呈現(xiàn)出不精致的畫(huà)面感。

陰影不一定是黑色的,還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調(diào)一致,因此呈現(xiàn)出十分融洽的畫(huà)面感。在UI設(shè)計(jì)中,這種手法不宜過(guò)多使用,否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。


1.4 個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo),而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時(shí),為它的視覺(jué)表現(xiàn)力加入更多的創(chuàng)意呢?例如下面這組圖標(biāo)設(shè)計(jì),無(wú)論是在圖形上的創(chuàng)新,還是顏色搭配上都呈現(xiàn)出無(wú)與倫比的創(chuàng)意。


標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用,它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺(jué)風(fēng)格。通常,大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式(默認(rèn)灰色,選中填充品牌色),這樣的設(shè)計(jì)太普通,太常見(jiàn)了。要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性,可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺(jué)表現(xiàn),例如給圖標(biāo)加上背景和表情,即顯得生動(dòng)有趣,又增加了用戶的好感,給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來(lái)的流行趨勢(shì),看上去十分精致、華麗,但是看久了會(huì)讓人產(chǎn)生輕微的視覺(jué)疲勞,同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本。一般在外賣美食類應(yīng)用中比較常見(jiàn)。


1.5 Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見(jiàn)的控件之一,它源自Material Design的設(shè)計(jì)規(guī)范?,F(xiàn)在很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì),而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。

在視覺(jué)表現(xiàn)形式上,Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài),它的設(shè)計(jì)較為簡(jiǎn)單,通常是使用一組文字標(biāo)簽,通過(guò)顏色或在標(biāo)簽下加上小長(zhǎng)條來(lái)區(qū)分兩者的狀態(tài)。因?yàn)樗?jiǎn)單,卻越難設(shè)計(jì)出彩,要發(fā)揮極大的設(shè)計(jì)想象力,跳脫出設(shè)計(jì)規(guī)范的限制,才能找到完美的方案。例如蝦米音樂(lè)的Tab選中態(tài)是一段音頻波線,再配合文字的大小對(duì)比,一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來(lái)了。


我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個(gè)絕佳的來(lái)源。從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺(jué)富豪作為Tab選中態(tài)的小長(zhǎng)條,這樣就建立起視覺(jué)上的聯(lián)系,讓用戶產(chǎn)生由內(nèi)而外的一致感受。例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上,既讓界面視覺(jué)獨(dú)一無(wú)二,又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。


1.6 無(wú)框設(shè)計(jì) 去繁從簡(jiǎn)

在UI設(shè)計(jì)中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個(gè)元素的好辦法,但是它不是唯一的方法,使用過(guò)多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低,或多或少都會(huì)干擾用戶瀏覽的視線,讓信息內(nèi)容失去注意力,因此可以減少不必要的裝飾元素。我們可以通過(guò)以下幾個(gè)方法來(lái)劃分元素的視覺(jué)層次,讓畫(huà)面變得干凈,整齊:


使用陰影

陰影同樣可以營(yíng)造出邊界感,而且相比邊框分割線更加微妙,并不會(huì)顯得突兀,不會(huì)分散用戶的注意力,讓內(nèi)容更聚焦。


使用不同的背景色來(lái)區(qū)分

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分。所以,你所需要做的就是在不同的區(qū)塊采用不同的背景色,并且嘗試刪除分割線,因?yàn)槟愀静恍枰?


增加額外的留白

創(chuàng)建元素之間的分離效果,并不一定要通過(guò)線框來(lái)表現(xiàn),只要增加留白,讓它們分隔開(kāi)就行了。通過(guò)留白和間距來(lái)實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。


1.7 統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素,那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。如果圖形擁有獨(dú)特的外觀,如橢圓矩形,也可以作為視覺(jué)符號(hào)的一種,延續(xù)到其他界面中,成為圖形或按鈕的外觀。這樣,整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來(lái)了,給用戶始終如一的一致感。


1.8 符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體,可以與產(chǎn)品的定位相吻合,傳遞給用戶正確的情感意識(shí)。雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求。但會(huì)出現(xiàn)一個(gè)問(wèn)題就是,系統(tǒng)字體的普適性并沒(méi)有什么特色,在一些特定的情境下就顯得收效甚微。例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來(lái)傳遞力量、爆發(fā)力、速度的感覺(jué),換成系統(tǒng)字體后,整體感覺(jué)在氣勢(shì)上就變?nèi)趿撕芏唷?


1.9 第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸,他可以減輕用戶注冊(cè)的時(shí)間成本。通常是在注冊(cè)登陸頁(yè)的底部展示第三方圖標(biāo)入口,這也是設(shè)計(jì)師最常忽略的內(nèi)容,往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置,沒(méi)有針對(duì)它們?cè)僭O(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過(guò)任何的細(xì)節(jié),我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù),對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。


1.10 圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì),能帶給用戶如沐春風(fēng)的視覺(jué)享受,它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式,為了減少?gòu)?fù)雜圖片背景對(duì)文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見(jiàn),但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫(huà)面變得高級(jí)和富有設(shè)計(jì)感。


1.11 提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒,高品質(zhì)的圖片給人愉悅的視覺(jué)享受,產(chǎn)生美好的聯(lián)想。而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。在App設(shè)計(jì)中,一張漂亮的圖片從收集到上線,需要經(jīng)過(guò)裁剪,調(diào)色等過(guò)程才能被使用。即使是普通的商品圖片,我們將它摳圖后調(diào)整成統(tǒng)一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺(jué)也會(huì)變得美觀、整潔。


1.12 卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中,卡片式設(shè)計(jì)已經(jīng)是一種非常常見(jiàn)的設(shè)計(jì)形式,它有利于信息分層和整合,劃分出更加清晰的組織結(jié)構(gòu),實(shí)現(xiàn)復(fù)雜內(nèi)容的簡(jiǎn)化處理,提高空間利用率。同時(shí)卡片式設(shè)計(jì)通常很依賴視覺(jué)元素,很強(qiáng)的視覺(jué)元素正是卡片式設(shè)計(jì)的一種優(yōu)勢(shì),也是提升設(shè)計(jì)品質(zhì)感的良方。



2、情感化設(shè)計(jì)

心理學(xué)認(rèn)為,情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時(shí),使他產(chǎn)生情感的變化,那么產(chǎn)品便不再冷冰冰,他透過(guò)眼前的東西,看到的是設(shè)計(jì)師為了他的使用體驗(yàn),對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨,人們會(huì)產(chǎn)生愉快、喜愛(ài)和幸福的情感。情感化設(shè)計(jì)并不是轟轟烈烈,有時(shí)候僅僅一句文案、一幅插圖、一個(gè)動(dòng)畫(huà)就能打動(dòng)人心,使用戶獲得愉悅的使用體驗(yàn)。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺(jué)層面,這些簡(jiǎn)單而美好的設(shè)計(jì)細(xì)節(jié)充滿了積極情緒,它是滿足產(chǎn)品的功能性和易用性之后,追求更高層次的目標(biāo)。


2.1 提示性文字

語(yǔ)言是情感化設(shè)計(jì)最直接的利器,擬人化的對(duì)白相比冰冷的話語(yǔ)更能獲得用戶的好感,賦予產(chǎn)品的新的生命力。例如App那些push推送通知,因?yàn)橛脩裘刻焓盏降腜USH實(shí)在是太多了,早已心如止水!這個(gè)時(shí)候,你就需要一條成本低、效率高的PUSH文案,去撩動(dòng)用戶主子們的心。將原本對(duì)用戶的打擾變成一種逗趣,讓人看到會(huì)心一笑。


2.2 下拉刷新

下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作,常見(jiàn)的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式,這種設(shè)計(jì)簡(jiǎn)單、直觀,但毫無(wú)設(shè)計(jì)感,不能引發(fā)用戶任何的情緒。


下拉刷新是一種臨時(shí)狀態(tài),豐富它的設(shè)計(jì)細(xì)節(jié)不會(huì)造成與產(chǎn)品界面的格格不入,相反,一個(gè)富有設(shè)計(jì)感的下拉刷新設(shè)計(jì)能讓產(chǎn)品獲得用戶的好感。例如uc頭條在下拉刷新時(shí)會(huì)蹦出一只奔跑的小鹿,暗示正在快馬加鞭的加載新內(nèi)容,小鹿形象延續(xù)了品牌logo。作為資訊類產(chǎn)品,內(nèi)容更新速度至關(guān)重要,奔跑的小鹿正好隱喻了這一點(diǎn)。用戶也在這種快樂(lè)的情緒中對(duì)產(chǎn)品產(chǎn)生好感,瞬間就讓下拉刷新變得生動(dòng)有趣。


2.3 頭像設(shè)計(jì)

個(gè)人中心頁(yè)與用戶信息密切相關(guān),用戶的虛擬形象在這里得以展現(xiàn),常見(jiàn)的設(shè)計(jì)是一個(gè)用戶頭像加登陸文字的形式,這種默認(rèn)的頭像設(shè)計(jì)無(wú)法得到用戶的認(rèn)同感。

現(xiàn)在很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像,給用戶更多的選擇。賦予產(chǎn)品一些人格魅力,可以讓產(chǎn)品富有生命力,消除人機(jī)界面的冰冷交互,幫助用戶和產(chǎn)品建立友好的聯(lián)系。例如美團(tuán)外賣和躺平,它們各自的身份都代表了產(chǎn)品的氣質(zhì)和用戶的屬性,讓用戶產(chǎn)生一種身份的認(rèn)同感。


2.4 缺省頁(yè)化解負(fù)面情緒

通常狀態(tài)是,當(dāng)前頁(yè)面沒(méi)有內(nèi)容或無(wú)網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面。常見(jiàn)的設(shè)計(jì)是圖標(biāo)加提示文字的形式,這種簡(jiǎn)陋的設(shè)計(jì)會(huì)給用戶心理造成很大的落差,陷入負(fù)面情緒中。情感化設(shè)計(jì)在此時(shí)就可發(fā)揮巨大的作用,它通過(guò)設(shè)計(jì)手段來(lái)減輕用戶在看到一個(gè)毫無(wú)內(nèi)容的界面時(shí)所產(chǎn)生的挫敗感。 設(shè)計(jì)師可發(fā)揮的空間很大,根據(jù)產(chǎn)品屬性和品牌延展圖形,結(jié)合動(dòng)效或插畫(huà)等情感化設(shè)計(jì),可以很好的豐富頁(yè)面內(nèi)容。例如躺平的空白頁(yè)呈現(xiàn)出一種賤萌的場(chǎng)景,讓用戶會(huì)心一笑,使產(chǎn)品充滿了趣味性。


2.5 標(biāo)簽欄微動(dòng)效

情感化設(shè)計(jì)變得越來(lái)越豐富,圖標(biāo)設(shè)計(jì)上升至可以展示動(dòng)畫(huà)效果。通過(guò)動(dòng)效的使用,標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁(yè)面時(shí),不再覺(jué)得單調(diào)。精心設(shè)計(jì)的動(dòng)態(tài)效果,能夠緩解用戶等待時(shí)焦躁的心情,從心理上縮短用戶等待時(shí)長(zhǎng),讓品牌更加深入人心。


2.6 模擬用戶行為

如果一個(gè)產(chǎn)品可以模擬用戶的行為,將用戶代入真實(shí)的情境中,用戶就會(huì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會(huì)根據(jù)時(shí)間場(chǎng)景和季節(jié)變化,播放不同的背景音樂(lè)來(lái)營(yíng)造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時(shí)刻感受到身臨其境的情境。


情感化設(shè)計(jì)可以拉近用戶與產(chǎn)品之間的距離,在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷,為人們帶去情感上的愉悅和感動(dòng)。洞悉用戶的行為,換位思考去滿足用戶的需求,情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片,打開(kāi)微信對(duì)話框時(shí)就會(huì)自動(dòng)顯示這張圖片,提前預(yù)知了你發(fā)截圖的需求。

再例如很多觀眾都習(xí)慣了在電影結(jié)尾等彩蛋的習(xí)慣,因?yàn)楹芏鄷r(shí)候坐在影院等彩蛋卻等來(lái)沒(méi)有彩蛋的結(jié)果只能白白浪費(fèi)了時(shí)間。在「淘票票」上購(gòu)買電影票時(shí),你會(huì)發(fā)現(xiàn)影片詳情頁(yè)會(huì)有彩蛋提醒,告知你電影是否有彩蛋且彩蛋會(huì)出現(xiàn)在影片的什么位置。有了這個(gè)提示信息,就不必再為了不確定的彩蛋期待浪費(fèi)時(shí)間啦。


2.7 有趣的細(xì)節(jié)設(shè)計(jì)

俗話說(shuō):有趣的靈魂萬(wàn)里挑一,可見(jiàn)有趣是可以引發(fā)交流進(jìn)而讓人們產(chǎn)生積極的情緒。 在UI設(shè)計(jì)中,有些有趣的設(shè)計(jì)是隱形的,需要用戶自己去發(fā)現(xiàn),當(dāng)用戶找到這顆彩蛋時(shí),就會(huì)獲得一份喜悅和樂(lè)趣,增強(qiáng)用戶對(duì)產(chǎn)品的探知欲。例如在電腦端打開(kāi)B站的鬼畜區(qū)長(zhǎng)按這個(gè)返回圖標(biāo)10秒左右,你會(huì)打開(kāi)鬼畜區(qū)的新世界(⊙o⊙)(友情提示:記得戴上耳機(jī)或調(diào)小音量)其實(shí)長(zhǎng)按「返回」10秒后網(wǎng)頁(yè)下方會(huì)出現(xiàn)一條黑框提示「嘗試輸入字母,發(fā)現(xiàn)鬼畜秘密」。按照提示乖乖輸入字母就會(huì)出現(xiàn)鬼畜明星劃過(guò)你的屏幕!


有些有趣的設(shè)計(jì)又是顯性的,目的是讓用戶與產(chǎn)品引發(fā)交流從而產(chǎn)生積極的情緒。例如成為優(yōu)酷視頻會(huì)員,不僅可以尊享豐富的影視資源,還能讓自己的ID在發(fā)彈幕時(shí)使用劇集相關(guān)角色的頭像。帶角色扮演頭像的彈幕,讓發(fā)言更有劇集代入感。這個(gè)彩蛋的設(shè)置一方面強(qiáng)化了會(huì)員身份的尊貴感與特權(quán)性,一方面也豐富了彈幕區(qū)的多樣化,可謂一舉兩得了。


總的來(lái)說(shuō):UI設(shè)計(jì)的“高級(jí)感”意味著在視覺(jué)層面要從細(xì)微之處著手,創(chuàng)造出精致富有設(shè)計(jì)感的畫(huà)面;另一方面要從情感化設(shè)計(jì)出發(fā),使用戶與產(chǎn)品產(chǎn)生情感上的共鳴,獲得更高層次的使用體驗(yàn)。

作者: 印跡_ 來(lái)源:站酷

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。

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

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



AI & PS 夏日魔法篇

seo達(dá)人

話不多說(shuō),直接上手先吃瓜吧,哦不,做圖吧!學(xué)會(huì)這幾招,再也不要甲方爸爸提供渣渣圖片素材了。

 

 

圖片

這個(gè)案例我之前分享過(guò)小紅書(shū),相信我,我不是想偷懶,我只是想把這個(gè)實(shí)用好技巧讓更多的小伙伴知道(一臉正經(jīng)說(shuō)的)。

看過(guò)的小伙伴也不要急,畢竟后面還有 5 個(gè)案例都是船新未公開(kāi)的版本!走過(guò)路過(guò)不要錯(cuò)過(guò)!

 

我們?cè)?AI 里畫(huà)一個(gè)正方形選擇【效果】→【3D】→【凸出和斜角】得到一個(gè)正方體,然后選擇擴(kuò)展,每個(gè)面填充白色透明→不透明的漸變。

圖片

畫(huà)一個(gè)藍(lán)白漸變色的背景,給夏日里一抹清涼的感覺(jué)~

這個(gè)桃子是我用蘋(píng)果電腦自帶的【Apple Color Emoji】輸入法打出來(lái)的,也不一定用桃子,也可以別的喲~

圖片

(后面的步奏都是在 PS 里完成的哦~)把桃子放在立方體下面,合并【桃子】+【立方體】圖層,選擇【濾鏡】→【濾鏡庫(kù)】→【扭曲】→【玻璃】數(shù)值參考如下。

圖片

復(fù)制一個(gè),調(diào)整大小節(jié)奏,再調(diào)整一下角度,按住【ctrl+alt+shift+E】鍵,得到一個(gè)合并可見(jiàn)圖層的新圖層。

再?gòu)?fù)制一層(留用),選擇一個(gè)圖層【濾鏡】→【模糊】→【高斯模糊】,數(shù)值:【5】,選擇【濾鏡】→【濾鏡庫(kù)】→【扭曲】→【海洋玻璃】數(shù)值如下。

圖片

選擇之前復(fù)出來(lái)留用的那層置于頂層,圖層模式選擇【顏色加深】,透明度【30%】。

圖片

繼續(xù)細(xì)化,用圖案建立→填充的方式,加點(diǎn)細(xì)節(jié),用混合方式做一個(gè)線條背景再加像素字點(diǎn)綴,其他文字環(huán)繞編排即可。

圖片

圖片

 

 

圖片

不知不覺(jué)來(lái)到了中午,夏日炎炎,我買了一根雪糕,這次的技巧可以說(shuō)相當(dāng)簡(jiǎn)單,我速戰(zhàn)速?zèng)Q,畢竟我的雪糕是會(huì)融的……

在 Ai 里畫(huà)一個(gè)矩形,調(diào)整圓角,選擇【效果】→【3D】→【凸出和斜角】數(shù)值如下:

圖片

擴(kuò)展圖形,然后調(diào)整角度,除頂部部分的形狀合并,然后填充漸變色,復(fù)制多一個(gè)形狀,添加描邊。

圖片

把頂部的形狀復(fù)制兩個(gè),排好填充顏色,然后選擇三個(gè)形狀【對(duì)象】→【混合】→【建立】,如果步數(shù)不夠,就選擇混合工具,按住【ALT】鍵,輸入合適步數(shù)即可。

圖片

同樣的方法做一個(gè)雪糕棒吧,然后把這幾個(gè)形狀組合在一起,就得到這根可口的雪糕啦!趕快吃起來(lái),哦不,做起來(lái)吧!

圖片

根據(jù)文字的大小加入色塊編排可以增加版面的色彩層次,再來(lái)點(diǎn)路徑文字,活躍一下版面,加上其他文案,這張海報(bào)就完成啦!

圖片 圖片

 

 

這次技法以文字為主體,做一個(gè)夏日凍感的文字,選擇一個(gè)圓體的文字,在 PS 里轉(zhuǎn)成智能對(duì)象,選擇【濾鏡】→【模糊畫(huà)廊】→【路徑模糊】數(shù)值路徑如下:

圖片

添加一個(gè)蒙版,用畫(huà)筆把邊緣擦得虛一些。

圖片

然后新建一個(gè)文字圖層,改成描邊效果,然后轉(zhuǎn)成智能對(duì)象,復(fù)制上面智能濾鏡的效果到這個(gè)圖層,加入漸變,這個(gè)冰塊字就做好啦!

圖片

接著我們來(lái)做文字編排部分,傾斜的文字能夠增強(qiáng)畫(huà)面動(dòng)感,豐富版面,再用【!】增強(qiáng)情緒張力,其他文字環(huán)繞編排即可。

圖片 圖片

 

 

圖片

萬(wàn)物皆可卷……而我選擇躺平,哦不,我選擇讓紙張自己卷,這次做一個(gè)簡(jiǎn)單上手的紙張卷曲效果。

先做兩組簡(jiǎn)單的文字編排,調(diào)出符號(hào)面板,直接往里面拖即可。

圖片

選擇螺旋線工具,畫(huà)出線條,然后選擇【效果】→【3D】→【凸出和斜角】,數(shù)值如下:

圖片

先別點(diǎn)【確定】哦,點(diǎn)擊左邊的【貼圖】按鈕,進(jìn)入貼圖頁(yè)面,選擇其中三個(gè)表面,選擇前面做好的符號(hào)圖樣,并調(diào)整大小,即可得到這個(gè)卷曲紙張的效果啦!

圖片

因?yàn)槲淖肿隽司砬男Ч?,閱讀性會(huì)降低,所以我們還是要重復(fù)排一遍文字,然后我們?cè)偌尤氡尘皾u變色豐富一下,再來(lái)點(diǎn)質(zhì)感會(huì)更好,于是我打開(kāi)了 PS,找了張褶皺的紙張紋理進(jìn)行疊加,最后再加點(diǎn)雜色即可!

圖片

 

 

圖片

卷完紙張,我們來(lái)卷文字吧!,天長(zhǎng)地久有時(shí)盡,此卷綿綿無(wú)絕期……

選擇一個(gè)高挑的字體,然后再畫(huà)一根線進(jìn)行分割,得到如下圖四組圖形,并依次拖入符號(hào)面板:

圖片

畫(huà)一個(gè)矩形,調(diào)整圓角,然后選擇【效果】→【3D】→【凸出和斜角】,數(shù)值如下,點(diǎn)擊左邊的【貼圖】按鈕,進(jìn)入貼圖頁(yè)面,選擇其中三個(gè)表面,選擇前面做好的符號(hào)圖樣,并調(diào)整大小,如圖所示,即可得到這個(gè)卷曲的文字效果。

圖片

得到圖形后,選擇擴(kuò)展,可以看到有些錨點(diǎn)沒(méi)有完全吻合,手動(dòng)調(diào)整一下即可,另一個(gè)圖形也用同樣的方法即可得到。

圖片

選擇圖形其中兩面替換顏色,再添加一些有趣的圖形,增強(qiáng)畫(huà)面的趣味。

圖片

加入趣味標(biāo)題,與其他文字編排,這張海報(bào)也完成啦!

圖片

這次的案例到這也就告一段落了,說(shuō)時(shí)遲那時(shí)快,萌萌又來(lái)一句:要不再來(lái)一張?此刻的我當(dāng)然是歡(mian)天(wu)喜(biao)地(qing)說(shuō):好!

 

 

圖片

于是,我打開(kāi)剛剛關(guān)閉的 PS,打出文字,柵格化后,選擇【濾鏡】→【模糊畫(huà)廊】→【移軸模糊】,調(diào)整路徑,讓文字上下邊緣有模糊的效果。

圖片

復(fù)制一層,然后選擇【涂抹工具】,用柔邊畫(huà)筆,強(qiáng)度選擇【70%】,沿著文字邊緣涂抹出想要的形狀即可。

圖片

新建一個(gè)漸變映射圖層,添加漸變色,就可以得到這個(gè)字體流動(dòng)效果啦!

圖片

接著,同樣的秘方,我們來(lái)加點(diǎn)質(zhì)感,找一張做舊紋理的背景,調(diào)整合適的圖層樣式效果即可。

繼續(xù)添加細(xì)節(jié),畫(huà)一些簡(jiǎn)單的圖形豐富版面,用網(wǎng)格工具畫(huà)一個(gè)小網(wǎng)格,再加入一個(gè)酸性的手寫(xiě)字裝飾一下

圖片

再加入簡(jiǎn)單的文字編排,這個(gè)版面也就完成啦!


作者:大熊

轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》AI & PS 夏日魔法篇

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945。


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


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



交互設(shè)計(jì) | 信息流提高轉(zhuǎn)化的策略

純純

起初由Facebook在社交行業(yè)重新定義為News Feed,現(xiàn)在被大量用在電商、社交、資訊類等領(lǐng)域。信息流突出卡片的信息,用戶可以無(wú)限制地下拉刷新,偏重于“沉浸式”的體驗(yàn),用戶可以在里面“逛”起來(lái)。 


undefined




那么問(wèn)題來(lái)了,在處于這樣閑散的“逛”的狀態(tài)下,怎樣提高用戶的轉(zhuǎn)化率,讓用戶在Feeds中產(chǎn)生點(diǎn)擊行為?有如下幾點(diǎn)可以進(jìn)行嘗試,拋出來(lái)相互探討。 



一、“千人千面”機(jī)制的嘗試



什么是“千人千面”?字面意思上說(shuō)就是一千個(gè)人看到一千個(gè)面,每個(gè)人所看到的內(nèi)容都不一樣,實(shí)現(xiàn)“ 個(gè)性化”定制。 

舉一個(gè)場(chǎng)景,作為一個(gè)軟妹子,你的某寶Feeds呈現(xiàn)成這樣的,嗯,美妝、衣服和家居產(chǎn)品更多。 


設(shè)想一下這樣的畫(huà)面,如果在你的Feeds列表里面推薦的是一些機(jī)械鍵盤(pán)和游戲裝備,那作為用戶,會(huì)心想“暈,這些東西又不能讓我變瘦變美,跟我啥關(guān)系?往下翻翻再看看有沒(méi)有什么可買的東西”。



如果再滑個(gè)2~3屏還是這類似于“今年流行的POLO衫”等跟你沒(méi)關(guān)系的內(nèi)容,那可能就沒(méi)耐心看下去,sorry,直接退出了。 


而“千人千面”機(jī)制能解決這個(gè)問(wèn)題,它要達(dá)到的目的就是, 對(duì)每個(gè)用戶而言,都是各自喜歡的內(nèi)容。



那么怎么做到千人千面? 
1. 千人千面的影響基于用戶人群的標(biāo)簽。標(biāo)簽分得越細(xì),流量就會(huì)被分割得越厲害,推薦也會(huì)更精準(zhǔn)。針對(duì)具有標(biāo)簽思維的同學(xué)來(lái)說(shuō),展現(xiàn)價(jià)值以及訪客價(jià)值利用率更高了。 

舉個(gè)栗子,如果最近你要搬家,在某寶看行李打包帶,那么你可能被平臺(tái)分類為“搬家”這個(gè)標(biāo)簽。如果再細(xì)一點(diǎn),“打包帶”也可能為一個(gè)標(biāo)簽。 

那么在你的Feeds中就有可能呈現(xiàn)出既有打包帶,也有紙箱、膠帶、打包繩等這樣搬家常用的物品進(jìn)行推薦,是不是很人性化?可能就在這些推薦內(nèi)容中發(fā)現(xiàn)一些自己也沒(méi)想到但能好用的東西。 

像這樣根據(jù)消費(fèi)者的瀏覽記錄和購(gòu)買習(xí)慣來(lái)制定個(gè)性化服務(wù),通過(guò)對(duì)這些信息進(jìn)行分析來(lái)給消費(fèi)人群貼上標(biāo)簽,從而達(dá)到 實(shí)現(xiàn)把產(chǎn)品精準(zhǔn)推薦給消費(fèi)者的目標(biāo) 。精簡(jiǎn)的信息能夠及時(shí)滿足消費(fèi)群體的需求,幫助消費(fèi)者快速找到感興趣的內(nèi)容,由此帶來(lái)了極好的用戶體驗(yàn)。



2.千人千面的機(jī)制是推薦式的:一種基于C端消費(fèi)者行為軌跡(比如用戶在頁(yè)面的瀏覽和點(diǎn)擊行為)和途徑反映的購(gòu)物意圖進(jìn)行匹配推薦,如上面所舉的“看行李打包帶”的栗子; 



第二種:基于B端店鋪(即商家),進(jìn)行在后臺(tái)設(shè)置的店鋪人群畫(huà)像(即在后臺(tái)設(shè)置一些選項(xiàng),告訴平臺(tái)他的目標(biāo)用戶是誰(shuí)),平臺(tái)進(jìn)行智能匹配推薦的。C端和B端的信息相互依存才構(gòu)成了現(xiàn)在完整的Feeds“千人千面”推薦機(jī)制。 

這個(gè)時(shí)候,交互設(shè)計(jì)師能夠做些什么事? 
1.將信息流的卡片進(jìn)行結(jié)構(gòu)化和組件化。卡片信息即用來(lái)表達(dá)用戶的標(biāo)簽信息的。定義好最整體的框架,以及各種信息缺失情況下的展示方式。稍安勿躁,如下圖,往下翻,在本文下一節(jié)進(jìn)行詳細(xì)講解。 



2.將用戶人群進(jìn)行分層,然后和卡片信息進(jìn)行匹配。用戶人群分層,有多種維度。最常用的是將用戶分為新客和老客,偶爾會(huì)有準(zhǔn)新客、僵尸用戶、流失用戶3個(gè)層級(jí)的添加。但作為不同的產(chǎn)品、店鋪,甚至是在不同的地點(diǎn),對(duì)新老客的定義都不一樣。 



比方說(shuō)在杭州某小區(qū)旁邊的奶茶店,老客可以定義為“方圓3公里以內(nèi)一個(gè)月內(nèi)在本店下過(guò)單的人”,新客可以定義為“方圓3公里以內(nèi)從未在本店下單的用戶”。 

如果這家店在各大外賣平臺(tái)上提供外賣功能,那么對(duì)老客人群標(biāo)簽為“3公里以內(nèi)”“下過(guò)單”,那么對(duì)老用戶可以采用折扣的形式,比方說(shuō)老用戶下單88折等優(yōu)惠信息進(jìn)行吸引;新客的標(biāo)簽為“3公里以內(nèi)”、“未下過(guò)單”,那么對(duì)新用戶可以采用嘗鮮的方式,比方“新客1元嘗鮮價(jià)”等方式進(jìn)行吸引。 

這樣對(duì)用戶人群的分層決定了我們的信息是否準(zhǔn)確以及有效。如果將新客定義為“方圓1公里以內(nèi)從未在本店下單的用戶”,可能因距離太近而失去對(duì)稍遠(yuǎn)一點(diǎn)顧客的覆蓋。 

在工作中,這樣的人群定義一般是和產(chǎn)品經(jīng)理、運(yùn)營(yíng)一起商議進(jìn)行決定的。 

二、利益點(diǎn)的透出

利益點(diǎn),即能夠影響C端用戶做決策的因素,這些因素對(duì)用戶來(lái)說(shuō)都是有利的。這些利益點(diǎn)主要包括如下兩個(gè)方面。 
1. 商品信息:滿減信息(比方說(shuō)滿200減20、88VIP9.5折),促銷信息(比方說(shuō)61狂歡)、訂單量、用戶評(píng)價(jià)、排行榜等。如下圖中各種標(biāo)簽 



2. 商戶信息:品牌標(biāo)簽(比方說(shuō)品牌、優(yōu)質(zhì)商家等)。商戶信息的透出,對(duì)追求品牌的用戶來(lái)說(shuō)是個(gè)有利的促進(jìn)因素。如下圖中商戶的“品牌”標(biāo)簽。



光有這樣的利益點(diǎn)也還不夠,設(shè)計(jì)師需要做的就是將這些信息進(jìn)行表達(dá),怎樣表達(dá)?設(shè)計(jì)方案將卡片進(jìn)行結(jié)構(gòu)化和組件化。什么是結(jié)構(gòu)化和組件化?如之前的圖(某平臺(tái)的商品卡片結(jié)構(gòu))

同一個(gè)卡片,保持相同的位置出現(xiàn)的內(nèi)容性質(zhì)相同,即結(jié)構(gòu)化。如上圖商品媒體展示區(qū),展示商品的信息,可以是圖片、視頻、直播等等多媒體的展示。 



組件化是指,卡片信息可以不必全部完整,可以只支持其中的某些信息進(jìn)行展示即可,沒(méi)有的可以進(jìn)行隱藏。比方說(shuō)滿減信息,如果商品暫時(shí)不打折,那這一塊就沒(méi)有信息,可以進(jìn)行隱藏。如下圖 



三、興趣點(diǎn)的試探



當(dāng)用戶一直在瀏覽遲遲不行動(dòng)時(shí),原因可能是沒(méi)看到自己感興趣的內(nèi)容,那么策略可以再轉(zhuǎn)換一下。范圍由小到大可以分為如下三個(gè)層次。 

1. 嘗試推薦同類商品的不同品牌。用品牌嘗試效果,如下圖。 



在同類商品中還可以嘗試 榜單或者清單的方式進(jìn)行進(jìn)一步的促進(jìn)。兩者都代表著品質(zhì)和認(rèn)可。 



2.嘗試推薦不同類別的商品。

為保持用戶在信息流中所看到的信息更豐富,可嘗試在信息流中除了推薦商戶標(biāo)簽詞的內(nèi)容,還會(huì)穿插一些其他內(nèi)容的信息。 

比方說(shuō)你是個(gè)愛(ài)美達(dá)人,但同時(shí)也可能是個(gè)音樂(lè)愛(ài)好者,那么當(dāng)在化妝品的信息流中,推薦一些當(dāng)季新款耳機(jī)是不是很有吸引力。 

再或者你是個(gè)鋼鐵直男,喜歡體育,同時(shí)也喜歡玩游戲,那在你的feed中同時(shí)出現(xiàn)這兩樣商品是不是一件很開(kāi)心的事情? 

3.相似內(nèi)容的推薦。在瀏覽過(guò)程中,可根據(jù)用戶的瀏覽行為進(jìn)行相似詞的推薦,如下圖。相似詞的推薦又分為2種,一種是直接推詞,另一種是根據(jù)用戶的點(diǎn)擊行為進(jìn)行推薦內(nèi)容,都能起到擴(kuò)展內(nèi)容的作用。如下圖。 





總結(jié)來(lái)說(shuō),要提高Feeds的轉(zhuǎn)化率,邏輯如下。 


1.做好信息的展示和匹配。將卡片結(jié)構(gòu)化和組件化,并做好用戶分層進(jìn)行利益點(diǎn)的匹配。 
2.根據(jù)用戶的行為進(jìn)行實(shí)時(shí)內(nèi)容推薦的變化。

藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945

作者:Sophia的玲瓏閣   來(lái)源:站酷

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

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

提升屏效可實(shí)施性最強(qiáng)的4大方法

純純

一、什么是屏效?

或許我們?cè)?tīng)過(guò)這樣一個(gè)詞 “坪效”,它常拿來(lái)計(jì)算商場(chǎng)經(jīng)營(yíng)效益的指標(biāo), 指的是每平米可以產(chǎn)出多少營(yíng)業(yè)額(營(yíng)業(yè)額/專柜所占總坪數(shù))。 

類比下來(lái),手機(jī)屏幕,也可以有這樣類似的計(jì)算公式,只是沒(méi)有專門定義過(guò),通俗地講,即“每一像素可以帶來(lái)多少商業(yè)效益”。但確實(shí)在商業(yè)設(shè)計(jì)過(guò)程中,老板們?cè)絹?lái)越越來(lái)越關(guān)注這樣內(nèi)容的表達(dá)效率。他們也許不會(huì)說(shuō)"你這個(gè)屏效有點(diǎn)太低了"等這樣專業(yè)的術(shù)語(yǔ),而是會(huì)說(shuō)類似“你這個(gè)槽是不是太高了”等這樣類似的話 。 


二、為什么要提高屏效?

通過(guò)數(shù)據(jù)統(tǒng)計(jì),一般用戶最有用的瀏覽區(qū)域?yàn)槭謾C(jī)前3屏,如果更嚴(yán)格點(diǎn)來(lái)說(shuō)是前2屏,在這個(gè)區(qū)域內(nèi),用戶的點(diǎn)擊次數(shù)和轉(zhuǎn)化率是最高的。如果在此區(qū)域內(nèi)能夠表達(dá)更多的內(nèi)容,對(duì)于產(chǎn)品來(lái)說(shuō),無(wú)非是最經(jīng)濟(jì)的設(shè)計(jì)模式。不信隨便翻翻幾個(gè)APP,如下案例。 

咱們的某寶,基本上第1屏就表達(dá)完所有內(nèi)容,第二屏絕大部分也是feeds了; 


考拉海購(gòu),前2屏表達(dá)內(nèi)容,2屏之后全是feeds;


小紅書(shū)更不用說(shuō)了,第一屏就直接開(kāi)始種草了;


用戶在網(wǎng)絡(luò)上的注意力時(shí)間是1-3秒,如果在這個(gè)時(shí)間內(nèi)你沒(méi)有吸引到用戶的話,那么他就很有可能把你略過(guò)。可想而知,在這樣爭(zhēng)奪互聯(lián)網(wǎng)用戶注意力的背景下,信息的高效性是多么重要。 

三、如何提高屏效?

1.用更小的面積表達(dá)同樣的內(nèi)容。



2.相同的屏幕內(nèi)表達(dá)更多的內(nèi)容。這同樣可以細(xì)拆為幾個(gè)方法。 
①利用滑動(dòng)或者翻滾的效果,在同一個(gè)區(qū)域內(nèi)進(jìn)行內(nèi)容的轉(zhuǎn)變;比如banner以及淘寶頭條這樣的表達(dá)方式; 

②巧用折疊與展開(kāi),進(jìn)行非重點(diǎn)內(nèi)容的隱藏;



③內(nèi)容區(qū)域進(jìn)行多層信息疊加,比方說(shuō)Instagram的發(fā)布


④利用轉(zhuǎn)移的手法,將復(fù)雜的內(nèi)容用新頁(yè)面進(jìn)行承載,如下圖豆瓣


3.利用好導(dǎo)航結(jié)構(gòu),同樣的屏幕可以表達(dá)相同等級(jí)的多種內(nèi)容;


4.做模式區(qū)分,在任務(wù)模式下隱藏不必要的信息。如美團(tuán)外賣在滑動(dòng)過(guò)程中會(huì)隱藏購(gòu)物車。因?yàn)橛脩舢?dāng)前聚焦的是瀏覽內(nèi)容


四、總結(jié)下來(lái)方法論就是

時(shí)間、空間上的同時(shí)利用。時(shí)間上隨著用戶任務(wù)的進(jìn)程進(jìn)行當(dāng)前任務(wù)的集中顯示,隱藏當(dāng)前任務(wù)不需要的信息;空間上將手機(jī)屏幕當(dāng)做一個(gè)立體空間,由多層空間進(jìn)行展示利用。 



藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945


作者:Sophia的玲瓏閣  來(lái)源:站酷

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

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

B端設(shè)計(jì)之導(dǎo)航

純純

在B端產(chǎn)品做設(shè)計(jì)的時(shí)候,第一件事是決定界面的結(jié)構(gòu)布局,導(dǎo)航放在哪成為一件亟需要考慮的事情。典型的,有橫向?qū)Ш脚c縱向?qū)Ш街?,拿ant design來(lái)舉例,如下面2張圖所示;


兩者看起來(lái)都行,但選擇哪個(gè),心理會(huì)有第一眼的直覺(jué),但光有直覺(jué)不行,還得羅列個(gè)123出來(lái),這樣展示方案的時(shí)候,才能服己服人。


橫向?qū)Ш?


| 橫向?qū)Ш?


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

  1. 通常使用比較少的菜單,簡(jiǎn)單,容易記憶;

  2. 位于頁(yè)面頂部,不占用橫向空間;

  3. 由于位于頂部,在視覺(jué)上更突出,更容易識(shí)別;

  4. 菜單選項(xiàng)之間視覺(jué)權(quán)重的區(qū)分更明顯,左邊最強(qiáng)右邊最弱;


缺點(diǎn):

  1. 擴(kuò)展性有限,不能很好的承載大量和多層級(jí)菜單;

  2. 占用屏幕高度,特備是當(dāng)固定于屏幕頂部時(shí);

  3. 來(lái)回切換菜單選項(xiàng)時(shí),橫向移動(dòng)鼠標(biāo)的距離更長(zhǎng),操作效率更低;


縱向?qū)Ш?


| 縱向?qū)Ш剑?


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

  1. 能夠承載的菜單項(xiàng)數(shù)量和層級(jí)更多,擴(kuò)展性強(qiáng);

  2. 不占用屏幕高度且可以收起,為內(nèi)容提供更多空間;

  3. 在菜單間切換時(shí)鼠標(biāo)移動(dòng)距離短;

  4. 能夠更好地適應(yīng)屏幕寬度較小的設(shè)備;


缺點(diǎn):

  1. 菜單數(shù)量多層級(jí)復(fù)雜時(shí),不容易記憶;

  2. 菜單選項(xiàng)文字不宜過(guò)長(zhǎng),可能會(huì)截?cái)啵?

  3. 各菜單選項(xiàng)之間的視覺(jué)權(quán)重差別不明顯。


他們都可以在已有的方向上進(jìn)行擴(kuò)展,如下圖


橫向?qū)Ш綌U(kuò)展


但總體來(lái)說(shuō),單獨(dú)的橫向?qū)Ш椒绞綄蛹?jí)不能超過(guò)3層,多于3級(jí)就不利于用戶的閱讀和選擇。


縱向?qū)Ш綌U(kuò)展


相對(duì)于橫向縱向的拓展性強(qiáng),不管多少級(jí)都可以一致往下加,但層級(jí)高過(guò)于3層,用戶對(duì)導(dǎo)航的分辨和記憶會(huì)明顯下降。


當(dāng)然,有時(shí)候單獨(dú)只有橫向或者縱向一種導(dǎo)航不能完全滿足我們的需求,他們有那么,根據(jù)以上特點(diǎn),我們也可以有如下組合的形式。


組合導(dǎo)航


很明顯,這樣的組合導(dǎo)航,適用于一級(jí)導(dǎo)航不太多(做好少于5個(gè))且內(nèi)容權(quán)重差別很明顯,一級(jí)導(dǎo)航之后的導(dǎo)航內(nèi)容和層級(jí)比較多且內(nèi)容復(fù)雜。


另外,如果嫌縱向?qū)Ш秸伎臻g,則可以考慮將縱向?qū)Ш阶龀煽烧郫B收起的模式,適用于貼著瀏覽器的縱向?qū)Ш健?


可折疊的縱向?qū)Ш?


總結(jié)一下:

  1. 橫向?qū)Ш揭子洃?、易看,各?dǎo)航權(quán)重區(qū)分明顯,越靠左越重要,但切換效率慢; 2.縱向?qū)Ш綌U(kuò)展性強(qiáng),可折疊,各導(dǎo)航權(quán)重區(qū)分不明顯,切換效率更高;3.如果兩者都不能單獨(dú)滿足,可嘗試組合的形式。

    藍(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)小助,微信號(hào):ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系01063334945

    作者:Sophia的玲瓏閣  來(lái)源:站酷

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

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



日歷

鏈接

個(gè)人資料

存檔