首頁

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

純純

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

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


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


增加可讀性和易讀性


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

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


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


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

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



可識別性


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

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


設(shè)定情緒和氣氛


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

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


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


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

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


明亮的顏色使用缺陷


很難搭配


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

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

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

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

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

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

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

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


失去節(jié)奏感


大膽的顏色可以作為在UI中進(jìn)行重音的工具,但它也可能成為重音消失的原因。許多鮮明的顏色在一個(gè)單一的視覺組成會(huì)帶來了失去突出元素的風(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逐漸感知所有的視覺元素。


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


創(chuàng)造數(shù)字產(chǎn)品的核心階段之一是用戶研究。定義和分析目標(biāo)受眾,使設(shè)計(jì)師了解他們對網(wǎng)站或應(yīng)用程序的期望。年齡、性別和文化會(huì)影響潛在用戶的喜好。例如,孩子們很喜歡黃色,但當(dāng)我們長大后,黃色通??雌饋聿荒敲从形ΑD腥撕团送ǔO矚g冷酷的顏色,如藍(lán)色,綠色。不像女人,男人通常喜歡白色、黑色和灰色。

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


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


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

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


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


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

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

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

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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í)踐針對視頻場景中視頻所呈現(xiàn)的畫面,通過精細(xì)化的設(shè)計(jì),在多樣化的手機(jī)屏幕中呈現(xiàn)時(shí),能夠帶給用戶更為沉浸的視頻觀看體驗(yàn)。

 

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

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

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

圖片

 

 

一、最大化視頻畫面視野

01、視頻畫面裁剪 

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

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

圖片

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

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

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

圖片

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

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

圖片圖片

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

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

圖片

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

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

圖片

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

圖片

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

圖片

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

 

02、智能滿屏

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

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

圖片

 

二、最佳視線觀看位置

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

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

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

圖片

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

圖片

 

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

01、視窗擠壓

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

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

圖片

02、懸浮小窗 

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

圖片

 

寫在最后

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

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

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

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


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


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)用

純純

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


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


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


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

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


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

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



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

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


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

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



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

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

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


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

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


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

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

     


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



0無需說明書

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


1 一看就會(huì)

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


2秒法則

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


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


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


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


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


3次點(diǎn)擊法則

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

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


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

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

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

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



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

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


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

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

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


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


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


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


適用邊界

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

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


??硕芍饕苡绊懹谶x項(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提出,用來預(yù)測從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān),距離越大時(shí)間越長,目標(biāo)越大時(shí)間越短。舉例來說,你伸手去拿桌子上的咖啡杯,開始你的手臂迅速地往杯子位置移動(dòng),接著你會(huì)放慢速度直至找到杯子把手,這個(gè)杯子把手的大小與你“抓住”它有著一定的關(guān)系。


如上圖所示,如果光標(biāo)現(xiàn)在在任易地點(diǎn)想要去點(diǎn)擊目標(biāo)target,最短路徑一定是D,最短路徑上容錯(cuò)的最長路徑是D+W,只要水平上移動(dòng)超過了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)擊

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


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

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


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

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


適用邊界

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


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


思考小結(jié)

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

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

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

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

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




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

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

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


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


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


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

刪除、組織、隱藏

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


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

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


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

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


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



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

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


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


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


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


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

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

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

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



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

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


自動(dòng)檢測提示

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


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


消除可能的失誤

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


將失誤降至最低

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


視覺暗示

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


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


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

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


范圍限制

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


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



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

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


設(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ì)做的簡單,通用的圖標(biāo)、功能和交互方式最好保持用戶熟悉的樣子,減輕用戶重復(fù)學(xué)習(xí)的負(fù)擔(dān)。每個(gè)頁面應(yīng)強(qiáng)調(diào)一個(gè)重要的功能而不應(yīng)該讓用戶做選擇題,這些都是有效防呆的好方法。


△頁面的中主按鈕更突出


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



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

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


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


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

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

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

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

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




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

可口可樂、雪碧、芬達(dá)、嶗山可樂、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)在新奇面孔、電話號碼記憶中。奇特的面孔和特殊的電話號碼更能被人記住。

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



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


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


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


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


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




食之無味,棄之可惜

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


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


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

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



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


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


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


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


還有就是有用戶自己的內(nèi)容的東西,一般不會(huì)輕易舍去。拿我個(gè)人來說,飛書一直是我的寫作工具,后來看到幾個(gè)更好用的軟件,但要想到把原來的這么多東西全部轉(zhuǎn)移過去也是件很心累的事,太麻煩,還是繼續(xù)用飛書好了。QQ這個(gè)“古老”的軟件,估計(jì)很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因?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ì)師遵循常見的設(shè)計(jì)模式,以避免混淆用戶或?qū)е赂叩恼J(rèn)知成本。


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


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


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

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


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


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


思考總結(jié)

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

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

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



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


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


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


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


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


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



















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


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


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




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


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


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

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

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

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

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

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


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




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

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


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


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


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


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


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


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


作者: 印跡_ 來源:站酷

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

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)效不僅僅是一種視覺裝飾,而是一種強(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í)世界中對象隨時(shí)間加速或減速的方式,它適用于所有運(yùn)動(dòng)的元素。自然界中沒有東西是從一點(diǎn)呈線性地移動(dòng)到另一點(diǎn)。現(xiàn)實(shí)中,物體在移動(dòng)時(shí)往往會(huì)加速或減速。我們的大腦習(xí)慣于期待這種運(yùn)動(dòng),因此在做動(dòng)畫時(shí),應(yīng)利用此規(guī)律。自然的運(yùn)動(dòng)會(huì)讓用戶對你的應(yīng)用感覺更舒適,從而產(chǎn)生更好的總體體驗(yàn)。


線性動(dòng)畫

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



緩出動(dòng)畫

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



緩入動(dòng)畫

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



緩入緩出動(dòng)畫

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

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



原理二:變形 Transformation


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


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

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


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





原理三:克隆 Cloning


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


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


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




原理四:覆蓋 Overlay


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


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


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




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

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


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




原理六:遮罩 Masking


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


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



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




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


父子關(guān)系是將界面元素關(guān)聯(lián)起來的重要原則,創(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ù)字的變化是如此普遍,以至于我們忽略了它們,而我們卻沒有給它們帶來區(qū)別和嚴(yán)謹(jǐn)來評估它們在支持可用性方面的作用。


數(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ì)覺得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的,就感覺與現(xiàn)實(shí)的聯(lián)系會(huì)減少。



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




原理九:蒙層 Obscuration

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




原理十:視差  Parallax

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


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




原理十一:多維 Dimensionality

維度是將界面的元素多維化,使元素看起來像可翻轉(zhuǎn)的,可折疊的,浮動(dòng)的??梢允共煌腢I元素實(shí)現(xiàn)無縫的過渡銜接,它通常以折紙維度、浮動(dòng)維度和對象維度這三種方式來呈現(xiàn)。


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


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



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


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




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


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

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



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

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

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



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




作者: 印跡_ 來源:站酷

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

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)題的字號通常會(huì)比較大,這時(shí)如果給它搭配一個(gè)字號比較小、字體不一樣的副標(biāo)題,或者是英文標(biāo)題,那么就可以得到鮮明的大小對比和字體對比,甚至還可以有色彩對比、空間對比等。這么做可以增加標(biāo)題的層級關(guān)系,使視覺更豐富,更生動(dòng)。

圖片

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

圖片

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

圖片

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

 

 

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

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

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

圖片

圖片

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

圖片

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

 

三、信息要分組

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

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

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

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

圖片

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

圖片

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

圖片

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

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

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

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

圖片

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

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

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

 

四、視覺層級要分明

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

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

圖片

圖片

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

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

圖片

圖片

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

圖片

圖片

 

總結(jié)一下

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


作者:蔥爺

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

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


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


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)的高級感

純純

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


1、視覺元素

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


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

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


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

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

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

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

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

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

  • 對于需要強(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),或者替換成其他識別度較強(qiáng)、字重相對較小的字體。


灰色文字在無彩/彩色背景下要分開處理

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

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

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

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



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


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

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


1.3 干凈的陰影

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


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

陰影不一定是黑色的,還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調(diào)一致,因此呈現(xiàn)出十分融洽的畫面感。在UI設(shè)計(jì)中,這種手法不宜過多使用,否則呈現(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í),為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢?例如下面這組圖標(biāo)設(shè)計(jì),無論是在圖形上的創(chuàng)新,還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。


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

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


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

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

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


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


1.6 無框設(shè)計(jì) 去繁從簡

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


使用陰影

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


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

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


增加額外的留白

創(chuàng)建元素之間的分離效果,并不一定要通過線框來表現(xiàn),只要增加留白,讓它們分隔開就行了。通過留白和間距來實(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ú)特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續(xù)到其他界面中,成為圖形或按鈕的外觀。這樣,整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了,給用戶始終如一的一致感。


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

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


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

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


1.10 圖片中尋找色彩

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


1.11 提高圖片質(zhì)量

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


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

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



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

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


2.1 提示性文字

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


2.2 下拉刷新

下拉刷新是用戶在App使用中經(jīng)常進(jìn)行的操作,常見的下拉刷新設(shè)計(jì)是圖標(biāo)加文字的形式,這種設(shè)計(jì)簡單、直觀,但毫無設(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)。用戶也在這種快樂的情緒中對產(chǎn)品產(chǎn)生好感,瞬間就讓下拉刷新變得生動(dòng)有趣。


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

個(gè)人中心頁與用戶信息密切相關(guān),用戶的虛擬形象在這里得以展現(xiàn),常見的設(shè)計(jì)是一個(gè)用戶頭像加登陸文字的形式,這種默認(rèn)的頭像設(shè)計(jì)無法得到用戶的認(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 缺省頁化解負(fù)面情緒

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


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

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


2.6 模擬用戶行為

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


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

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


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

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


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


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

作者: 印跡_ 來源:站酷

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

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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á)人

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

 

 

圖片

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

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

 

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

圖片

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

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

圖片

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

圖片

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

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

圖片

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

圖片

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

圖片

圖片

 

 

圖片

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

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片 圖片

 

 

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

圖片

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

圖片

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

圖片

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

圖片 圖片

 

 

圖片

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

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

圖片

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

圖片

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

圖片

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

圖片

 

 

圖片

卷完紙張,我們來卷文字吧!,天長地久有時(shí)盡,此卷綿綿無絕期……

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

圖片

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

圖片

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

圖片

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

圖片

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

圖片

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

 

 

圖片

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

圖片

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

圖片

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

圖片

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

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

圖片

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


作者:大熊

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

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


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


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)域。信息流突出卡片的信息,用戶可以無限制地下拉刷新,偏重于“沉浸式”的體驗(yàn),用戶可以在里面“逛”起來。 


undefined




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



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



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

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


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



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


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



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

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

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

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



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



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

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



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



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

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

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

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

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

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



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



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

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



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



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



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

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



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



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

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

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

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

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





總結(jié)來說,要提高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ì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

作者:Sophia的玲瓏閣   來源:站酷

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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大方法

純純

一、什么是屏效?

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

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


二、為什么要提高屏效?

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

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


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


小紅書更不用說了,第一屏就直接開始種草了;


用戶在網(wǎng)絡(luò)上的注意力時(shí)間是1-3秒,如果在這個(gè)時(shí)間內(nèi)你沒有吸引到用戶的話,那么他就很有可能把你略過??上攵?,在這樣爭奪互聯(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á)方式; 

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



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


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


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


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


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

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


作者:Sophia的玲瓏閣  來源:站酷

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ū)Ш街郑胊nt design來舉例,如下面2張圖所示;


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


橫向?qū)Ш?


| 橫向?qū)Ш?


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

  1. 通常使用比較少的菜單,簡單,容易記憶;

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

  3. 由于位于頂部,在視覺上更突出,更容易識別;

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


缺點(diǎn):

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

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

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


縱向?qū)Ш?


| 縱向?qū)Ш剑?


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

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

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

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

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


缺點(diǎn):

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

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

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


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


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


但總體來說,單獨(dú)的橫向?qū)Ш椒绞綄蛹壊荒艹^3層,多于3級就不利于用戶的閱讀和選擇


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


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


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


組合導(dǎo)航


很明顯,這樣的組合導(dǎo)航,適用于一級導(dǎo)航不太多(做好少于5個(gè))且內(nèi)容權(quán)重差別很明顯,一級導(dǎo)航之后的導(dǎo)航內(nèi)容和層級比較多且內(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ì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945

    作者:Sophia的玲瓏閣  來源:站酷

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

    藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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è)人資料

存檔