首頁

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

純純

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

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


每種顏色都有一個(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,具體取決于字體)

  • 對(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ì)較小的字體。


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

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

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

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

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



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


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ī)范。現(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)樗唵危瑓s越難設(shè)計(jì)出彩,要發(fā)揮極大的設(shè)計(jì)想象力,跳脫出設(shè)計(jì)規(guī)范的限制,才能找到完美的方案。例如蝦米音樂的Tab選中態(tài)是一段音頻波線,再配合文字的大小對(duì)比,一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。


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


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

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


使用陰影

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


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

通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(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ú)特的外觀,如橢圓矩形,也可以作為視覺符號(hào)的一種,延續(xù)到其他界面中,成為圖形或按鈕的外觀。這樣,整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了,給用戶始終如一的一致感。


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

選擇符合產(chǎn)品氣質(zhì)的字體,可以與產(chǎn)品的定位相吻合,傳遞給用戶正確的情感意識(shí)。雖然默認(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)整一致大小和擺放整齊位置,沒有針對(duì)它們再設(shè)計(jì)。一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(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)的視覺享受,它非常重要。我們經(jīng)??吹轿淖织B加在圖片背景上的設(shè)計(jì)樣式,為了減少復(fù)雜圖片背景對(duì)文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優(yōu)的辦法。我們可以從圖片中提取主色調(diào)用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級(jí)和富有設(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)為,情感是人對(duì)客觀事物是否滿足自己的需求而產(chǎn)生的態(tài)度體驗(yàn)。只有當(dāng)產(chǎn)品觸及到用戶的內(nèi)心時(shí),使他產(chǎn)生情感的變化,那么產(chǎn)品便不再冷冰冰,他透過眼前的東西,看到的是設(shè)計(jì)師為了他的使用體驗(yàn),對(duì)每一個(gè)魔鬼細(xì)節(jié)的用心琢磨,人們會(huì)產(chǎn)生愉快、喜愛和幸福的情感。情感化設(shè)計(jì)并不是轟轟烈烈,有時(shí)候僅僅一句文案、一幅插圖、一個(gè)動(dòng)畫就能打動(dòng)人心,使用戶獲得愉悅的使用體驗(yàn)。讓設(shè)計(jì)變得高級(jí)不僅僅是視覺層面,這些簡單而美好的設(shè)計(jì)細(xì)節(jié)充滿了積極情緒,它是滿足產(chǎn)品的功能性和易用性之后,追求更高層次的目標(biāo)。


2.1 提示性文字

語言是情感化設(shè)計(jì)最直接的利器,擬人化的對(duì)白相比冰冷的話語更能獲得用戶的好感,賦予產(chǎn)品的新的生命力。例如App那些push推送通知,因?yàn)橛脩裘刻焓盏降腜USH實(shí)在是太多了,早已心如止水!這個(gè)時(shí)候,你就需要一條成本低、效率高的PUSH文案,去撩動(dòng)用戶主子們的心。將原本對(duì)用戶的打擾變成一種逗趣,讓人看到會(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)。用戶也在這種快樂的情緒中對(duì)產(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ì)對(duì)產(chǎn)品產(chǎn)生深刻的認(rèn)同感。例如「潮汐」會(huì)根據(jù)時(shí)間場景和季節(jié)變化,播放不同的背景音樂來營造氛圍。雨聲、雷聲、風(fēng)聲、潮水聲等讓人時(shí)刻感受到身臨其境的情境。


情感化設(shè)計(jì)可以拉近用戶與產(chǎn)品之間的距離,在更深的層面體現(xiàn)出對(duì)人性的關(guān)懷,為人們帶去情感上的愉悅和感動(dòng)。洞悉用戶的行為,換位思考去滿足用戶的需求,情感交流就產(chǎn)生了。例如當(dāng)你截屏了一張圖片,打開微信對(duì)話框時(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)用戶對(duì)產(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ì)的“高級(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)小助,微信號(hào):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.bouu.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ì)公司


同理心思維,在工作和生活中有著怎樣的應(yīng)用?

藍(lán)藍(lán)設(shè)計(jì)的小編

在我們之前的文章中,同理心思維,在工作和生活中有著怎樣的應(yīng)用?關(guān)于產(chǎn)品原創(chuàng)和服務(wù)設(shè)計(jì)都有提到“同理心”,今天想來系統(tǒng)地分享一下。它不僅應(yīng)用在旅行的產(chǎn)品和服務(wù)上,還可以應(yīng)用在每天生活的方方面面,提高我們生活和工作的效率。

經(jīng)驗(yàn)分享丨B端設(shè)計(jì)師價(jià)值體現(xiàn)那些事!

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

提到B端設(shè)計(jì)你是否經(jīng)常聽到這樣的聲音:

  • B端不需要怎么設(shè)計(jì),直接對(duì)著低保真出圖就可以了;
  • 不要花時(shí)間在這些細(xì)枝末節(jié)上,參照Ant Design上的規(guī)范,在我的需求文檔的基礎(chǔ)上快速出圖;
  • 不知道怎么跟需求團(tuán)隊(duì)溝通,感覺他們的設(shè)計(jì)思維太Low,聊不到一起;
  • 產(chǎn)品的圖片設(shè)計(jì)好看才是設(shè)計(jì)師的價(jià)值,功能體驗(yàn)這些與設(shè)計(jì)師無關(guān);
  • ……

剛轉(zhuǎn)B端那段時(shí)間,我相信每一個(gè)設(shè)計(jì)師都曾有過這樣的困惑。

設(shè)計(jì)師在實(shí)際工作的時(shí)候經(jīng)常會(huì)遇到自己的設(shè)計(jì)方案與業(yè)務(wù)需求高度融合,由于B端的行業(yè)屬性,缺乏完善的數(shù)據(jù)驗(yàn)證,常常到了最后也區(qū)分不了設(shè)計(jì)師真正的能力體現(xiàn)在何處,這就導(dǎo)致團(tuán)隊(duì)成員對(duì)設(shè)計(jì)師的價(jià)值認(rèn)識(shí)不夠全面。

那么我們B端設(shè)計(jì)的價(jià)值又該如何體現(xiàn)?今天本文將從4個(gè)方面進(jìn)行闡述,一起來看一下吧~

01 設(shè)計(jì)價(jià)值是什么

B端設(shè)計(jì)師追求工作中如何體現(xiàn)價(jià)值的時(shí)候,我們得先明白B端的設(shè)計(jì)價(jià)值是什么。

那么何為B端的設(shè)計(jì)價(jià)值呢?

百度百科中設(shè)計(jì)價(jià)值的含義是:把一種計(jì)劃、規(guī)劃、設(shè)想通過視覺的形式傳達(dá)出來的活動(dòng)過程。今天本文中的B端設(shè)計(jì)價(jià)值分為視覺設(shè)計(jì)、交互體驗(yàn)以及業(yè)務(wù)流程優(yōu)化,通過信息傳達(dá)的改變,幫助客戶降本增效的方式獲取收益。

如果將B端整個(gè)生命流程進(jìn)行剖析,我們會(huì)更好的理解其設(shè)計(jì)價(jià)值。

1.1 視覺設(shè)計(jì)吸引客戶

B端產(chǎn)品與C端產(chǎn)品不同,它需要市場銷售人員利用自身的能力以及資源向目標(biāo)企業(yè)進(jìn)行銷售或者在一些大型展會(huì)上對(duì)外演示,據(jù)有關(guān)資料表明人所感知的信息的80%的信息來自視覺,這就需要對(duì)產(chǎn)品的功能進(jìn)行視覺化展示。

因?yàn)楦偁幖ち?,?jīng)常需要在眾多競爭者中進(jìn)行廝殺。在技術(shù)水平趨同的情況下,視覺起到了非常大的作用。特別是在展會(huì)期間,假如兩家公司技術(shù)水平相當(dāng),演示的視覺完全碾壓對(duì)手,讓客戶有著良好的品牌印象,這將產(chǎn)生快速的口碑影響,而這些將影響用戶的最終決定。

1.2 交互體驗(yàn)留住客戶

這一步需要我們理念進(jìn)行升華,將視覺視角切換至體驗(yàn)視角。

企業(yè)是我們B端設(shè)計(jì)的重要客戶,它是一個(gè)具有不同成員角色的群體組織。該組織為了工作管理的效率,會(huì)有不同的權(quán)限體系。權(quán)限的不同關(guān)注的信息也有所不同,這需要我們在設(shè)計(jì)中依據(jù)權(quán)限,考慮不同信息呈現(xiàn)優(yōu)先級(jí)。

功能繁瑣是很多同學(xué)對(duì)B端的第一印象。因其有著不同角色的參與,每個(gè)角色因?yàn)閸徫宦氊?zé)的不同,所參與公司的業(yè)務(wù)流程存在差異,這意味著需要將不同的功能在遵循產(chǎn)品體驗(yàn)一致性的基礎(chǔ)上匯聚在一起。

1.3 業(yè)務(wù)價(jià)值賦能客戶

業(yè)務(wù)價(jià)值對(duì)于B端設(shè)計(jì)特別重要,這是企業(yè)決定購買B端產(chǎn)品的出發(fā)點(diǎn)。我們在說業(yè)務(wù)設(shè)計(jì)的時(shí)候,需圍繞企業(yè)“降本增效”理念,讓用戶覺得有用,完成企業(yè)的管理需求。

舉個(gè)例子,比如我們做了一款報(bào)銷系統(tǒng)產(chǎn)品,幫助用戶解決財(cái)務(wù)報(bào)銷過程復(fù)雜、冗長的問題。通過前期參與用戶調(diào)研,洞察業(yè)務(wù),挖掘需求的突破點(diǎn),找到當(dāng)前背景下最優(yōu)的業(yè)務(wù)流程解決方案。企業(yè)員工使用我們的產(chǎn)品后少填寫信息,更快速的拿到了報(bào)銷費(fèi)用,平均比傳統(tǒng)流程節(jié)省了20分鐘。假設(shè)企業(yè)員工平均時(shí)薪60元,那么這個(gè)100人的企業(yè)每周可以節(jié)省1.6萬的人力支出,而一年可以節(jié)省76.8萬左右的支出。

02 如何體現(xiàn)設(shè)計(jì)價(jià)值

在了解了設(shè)計(jì)價(jià)值的體現(xiàn)后,我們知道B端設(shè)計(jì)的落腳點(diǎn)在業(yè)務(wù)價(jià)值的賦能上。當(dāng)我們實(shí)實(shí)在在的解決了業(yè)務(wù)問題,而不是產(chǎn)品外層視覺與交互的表層需求,才能讓我們的設(shè)計(jì)價(jià)值最大化,讓設(shè)計(jì)得到團(tuán)隊(duì)其他成員的認(rèn)可。接下來結(jié)合工作經(jīng)驗(yàn)闡述下設(shè)計(jì)師可以賦能業(yè)務(wù)的點(diǎn)。

2.1 主動(dòng)養(yǎng)成系統(tǒng)思維

很多B端設(shè)計(jì)師都是被動(dòng)的接到產(chǎn)品經(jīng)理的低保真,然后根據(jù)低保真的需求直接輸出設(shè)計(jì)稿,妥妥的淪為一個(gè)畫圖的美工,這會(huì)使得自己在團(tuán)隊(duì)內(nèi)部被定義為一個(gè)工具人。

那我們的發(fā)力點(diǎn)該是什么?借用Jesse James Garrett的理論用戶體驗(yàn)五要素這個(gè)專業(yè)名稱(表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層、戰(zhàn)略層)。單純的視覺設(shè)計(jì)雖然容易感知,但它卻屬于五要素的最頂層,價(jià)值有限,無法準(zhǔn)確傳達(dá)最底層戰(zhàn)略層的含義,我們需要往下突破才能凸顯我們的價(jià)值。

當(dāng)我們在收到需求的時(shí)候,需要具備系統(tǒng)化思維,從底層戰(zhàn)略開始,首先了解業(yè)務(wù)需求背后的價(jià)值,同產(chǎn)品經(jīng)理對(duì)其業(yè)務(wù)目標(biāo)后,幫助他梳理業(yè)務(wù)需求,結(jié)合用戶目標(biāo)以及當(dāng)前的技術(shù)能力等多方因素系統(tǒng)性思考最優(yōu)的設(shè)計(jì)解決方案。

只有發(fā)揮了我們的主觀能動(dòng)性,改變單點(diǎn)視角,具備系統(tǒng)化思考的能力,才能更好出結(jié)果,體現(xiàn)我們的價(jià)值。

2.2 更專業(yè)的組件規(guī)范

功能復(fù)雜繁瑣的B端為了最大化的保證設(shè)計(jì)的一致性、提升開發(fā)的效率以及方便產(chǎn)品的迭代優(yōu)化,組件規(guī)范是我們產(chǎn)品必不可少的工具。

那目前市面上的組件規(guī)范這么完善,對(duì)于我們設(shè)計(jì)師而言自身的價(jià)值是否無法體現(xiàn)了呢?其實(shí)它存在2個(gè)問題:

1、業(yè)務(wù)屬性不符。雖然市面上存在眾多的第三方組件,但由于設(shè)計(jì)的出發(fā)點(diǎn)不同(公司不同影響的業(yè)務(wù)屬性不同),導(dǎo)致市面上的組件不一定與自家產(chǎn)品屬性貼合,需要我們結(jié)合產(chǎn)品愿景以及業(yè)務(wù)規(guī)劃進(jìn)行重新設(shè)計(jì);

2、業(yè)務(wù)特性不貼合。我們見到的很多組件只能歸于基礎(chǔ)組件,可以保證基礎(chǔ)的設(shè)計(jì)一致性,但由于業(yè)務(wù)領(lǐng)域的獨(dú)特性,在一些專業(yè)的場景中有著強(qiáng)烈的業(yè)務(wù)屬性,需要我們對(duì)一些基礎(chǔ)組件進(jìn)行組合,進(jìn)行更專業(yè)的沉淀,這樣在實(shí)際使用的時(shí)候會(huì)更加高效。例如高級(jí)篩選、不同的場景彈框等。

2.3 賦能業(yè)務(wù)提升價(jià)值

不管B端還是C端的設(shè)計(jì)目的都是為了解決業(yè)務(wù)問題(業(yè)務(wù)目標(biāo)的達(dá)成也是KPI考核的重要目標(biāo)),我們始終要以業(yè)務(wù)目標(biāo)作為我們的關(guān)鍵目標(biāo)。

我們設(shè)計(jì)師需要參與整個(gè)行業(yè)生態(tài)的搭建,做到體驗(yàn)結(jié)構(gòu)展示清晰,核心信息簡潔明了,降低用戶的操作門檻,通過提高體驗(yàn)效率(縮減時(shí)間成本),節(jié)省企業(yè)的人力成本。

對(duì)業(yè)務(wù)需求的賦能其實(shí)就是要求我們進(jìn)行需求的挖掘,發(fā)現(xiàn)更多的業(yè)務(wù)增長點(diǎn),提供當(dāng)前背景下最優(yōu)的解決方案。需要例如我們可以主動(dòng)的進(jìn)行XX調(diào)研活動(dòng),給出XX解決方案,最后給公司帶來了XX業(yè)務(wù)價(jià)值。

2.4 復(fù)盤沉淀經(jīng)驗(yàn)

項(xiàng)目復(fù)盤對(duì)于我們設(shè)計(jì)師的能力成長的作用是巨大的。它之所是最快的學(xué)習(xí)方式,因?yàn)樗谑菍?shí)踐中的反饋,這種直觀的經(jīng)驗(yàn)沉淀最終會(huì)融入自己解決問題的知識(shí)體系架構(gòu),而這將進(jìn)一步反輔自己的職業(yè)成長。

復(fù)盤可以讓我們站在第三方角度,重新對(duì)項(xiàng)目流程進(jìn)行全面的回顧與總結(jié)。結(jié)合不同的反饋,客觀的了解當(dāng)前設(shè)計(jì)在整個(gè)業(yè)務(wù)目標(biāo)中的價(jià)值,這是對(duì)我們設(shè)計(jì)量化最佳途徑。不單單對(duì)于個(gè)人,團(tuán)隊(duì)內(nèi)部的其他成員也可以通過復(fù)盤加深對(duì)設(shè)計(jì)信任感的建立,他們可以看到我們的設(shè)計(jì)思路,更深層次的了解我們的設(shè)計(jì)價(jià)值。

03 寫在最后

設(shè)計(jì)價(jià)值的體現(xiàn)建立在一朝一夕的積累上,如果想在B端設(shè)計(jì)中體現(xiàn)價(jià)值,一定要透過現(xiàn)象看本質(zhì),站在業(yè)務(wù)的角度,尋找真正的發(fā)力點(diǎn),讓自己參與業(yè)務(wù)賦能的同時(shí)共同成長。

作者:江鳥的設(shè)計(jì)生活

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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ì)在產(chǎn)品中的應(yīng)用

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

一.什么是阻力 ?


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


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


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


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


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


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


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

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


2.2 缺乏耐心和思考

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


2.3 心流易被打斷

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

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

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


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

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

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

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


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


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


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


4.1 提高交互效率


4.1.1 減少操作步驟

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


使用合適的控件

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

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

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


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

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

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


預(yù)判用戶行為

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

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


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


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


優(yōu)化頁面流程

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


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


快捷方式

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

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


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


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

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

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


覆蓋層

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


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

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

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



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


b.詳情覆蓋層

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


嵌入層

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

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


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


標(biāo)簽頁

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


4.2 降低交互成本


4.2.1 降低操作難度

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

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


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


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


4.2.2 減少用戶思考


提供默認(rèn)選擇

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

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


保持一致性

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

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

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


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


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

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


簡潔易懂

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


重點(diǎn)突出

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

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


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


表意清晰

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


保持一致

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


4.3.2 降低外在負(fù)荷

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



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


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


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


5.1.1 提高防錯(cuò)能力

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



5.1.2 提供安全感

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


5.1.3 建立儀式感

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

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


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


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

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


5.2.1 篩選用戶


邀請制

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


價(jià)格門檻

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



測試門檻

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

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


5.2.2 篩選內(nèi)容

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


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

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


5.3.1 功能引導(dǎo)

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



5.3.2 歧視性策略

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

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


六、總結(jié)


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


參考資料:

《微交互:細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品》作者:Dan Saffer

《心流》作者:米哈里·契克森米哈賴

《web界面設(shè)計(jì)》作者:Bill Scott / Theresa Neil

《認(rèn)知與設(shè)計(jì)》作者:Jeff Johnson

《阻力設(shè)計(jì):探索質(zhì)量和數(shù)據(jù)間的平衡點(diǎn)》IXDC 演講,作者:王毓瑩

《點(diǎn)石成金》作者: 史蒂夫·克魯克

《設(shè)計(jì)心理學(xué)2:管理復(fù)雜》作者:唐納德·A·諾曼



作者:Ballen成明

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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ì)公司


面向Z世代的年輕化體驗(yàn)設(shè)計(jì)探索

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

Wonder是一款面向Z世代群體信息獲取的探索型產(chǎn)品,雖然我們在產(chǎn)品探索的路上沒能走的更遠(yuǎn),但作為設(shè)計(jì)師非常珍視參加創(chuàng)新產(chǎn)品探索的機(jī)會(huì),創(chuàng)新本身就是一種積累,在產(chǎn)品搭建過程中深入了解用戶需求,設(shè)計(jì)上自我突破、追求極致。以下歷程和設(shè)計(jì)經(jīng)驗(yàn)想與大家分享。



///

了解用戶

首先從了解我們的年輕用戶開始。通過桌面、田野用戶調(diào)研,我們了解到,在信息內(nèi)容消費(fèi)方面,Z世代群體更偏向于個(gè)性化、多元化、高顏值的信息內(nèi)容體驗(yàn)。再進(jìn)一步拆解訴求,我們發(fā)現(xiàn)用戶大致可以分為效率型及消遣型兩大類,效率型用戶偏向于便捷易用、信息聚焦的消費(fèi)形式,而消遣型用戶更期望有豐富的內(nèi)容讓他們逛起來、刷起來。針對(duì)兩大類不同的用戶訴求,我們進(jìn)行了區(qū)隔化設(shè)計(jì)。



///

模式切換,實(shí)現(xiàn)多元場域承載

在框架搭建上,我們利用面板可變性和固定性兩個(gè)維度來定義框架,首先是首頁場景面板,它具有可變性,可以承載不同的內(nèi)容例如搜索、信息流場景。再次,定義了位居二層的搜索面板,作為核心場景,具有固定性,是恒定不變的功能位于可變場景之上。最后,兩處功能區(qū)具有固定性,頭部承載基礎(chǔ)功能,底部承載兩大消費(fèi)場景。最終將框架轉(zhuǎn)化為具體設(shè)計(jì),分別承載了豐富的興趣內(nèi)容分發(fā)場景和簡單的聚焦場景。



搜索框位于內(nèi)容之上跨內(nèi)容恒定存在,形成了搜索框置底的首頁雙層面板交互形式,和滿足首頁逛起來的內(nèi)容消費(fèi)場景、聚焦搜索的簡單搜索場景來滿足用戶的不同訴求。加上兩處固定的功能區(qū)域,頭部基礎(chǔ)功能,底部bar承載左效率、右娛樂兩大內(nèi)容場景,構(gòu)成了差異化首頁框架。冠以興趣內(nèi)容躁模式、簡單搜索禪模式姓名,炫酷的交互手勢切換模式加持,最終構(gòu)成了首頁雙模式、可承載多元場景的框架設(shè)計(jì)。



同時(shí),頭部留有Doodle品牌區(qū)域,在豐富的節(jié)日運(yùn)營活動(dòng)中,檸檬精通過不同的裝扮和道具,和用戶進(jìn)行互動(dòng)



///

深度解讀用戶、體驗(yàn)再升級(jí)

隨著我們對(duì)用戶的深入了解,有了更細(xì)致的解讀。根據(jù)用戶調(diào)研我們發(fā)現(xiàn)Z世代群體更傾向于基于興趣圈層的信息消費(fèi)形式,愿意為興趣買單、尋找同好,并致力于為興趣圈層貢獻(xiàn)價(jià)值。因此我們對(duì)整體的框架和布局進(jìn)行了體驗(yàn)升級(jí)探索。



///

統(tǒng)一框架,興趣內(nèi)容開屏即得

我們將用戶訴求拆解為可落實(shí)的設(shè)計(jì)目標(biāo),并聚焦「體驗(yàn)統(tǒng)一」「快速篩選」「特色感知」「重點(diǎn)突出」4個(gè)核心設(shè)計(jì)目標(biāo)??蚣軐用?,我們依托星球形象設(shè)計(jì),運(yùn)用頭部循環(huán)交互框架形式,使內(nèi)容直觀清晰呈現(xiàn),不同星球凸顯不同內(nèi)容特點(diǎn),又保證了6大內(nèi)容體驗(yàn)統(tǒng)一。



底bar定義為基礎(chǔ)功能承載,語音核心能力固定不變,消息作為社區(qū)互動(dòng)重要基礎(chǔ)能力、個(gè)人中心便捷用戶快速回訪社區(qū)資產(chǎn)。在頁面的架構(gòu)上,根據(jù)金剛位運(yùn)營模塊特性,將模塊設(shè)計(jì)為可組合、可靈活配置,以支持隨時(shí)更替的運(yùn)營訴求。



對(duì)于重點(diǎn)互動(dòng)場景,運(yùn)用動(dòng)態(tài)入口設(shè)計(jì)吸引互動(dòng),并在二級(jí)頁打造全場景的沉浸式互動(dòng)氛圍。



最后,將UGC無限流至于信息層級(jí)底部,打造縱向?yàn)g覽、逛內(nèi)容體驗(yàn)。



///

別致年輕化設(shè)計(jì)語言構(gòu)建

在項(xiàng)目正式啟動(dòng)前,組織腦暴會(huì)開展年輕化設(shè)計(jì)語言提煉,結(jié)合用戶研究團(tuán)隊(duì)調(diào)研報(bào)告,通過Image board建立設(shè)計(jì)理念和模型表達(dá),通過收集、歸納、提煉、總結(jié)路徑,提煉設(shè)計(jì)語言基因。

圈定關(guān)鍵頁面、核心控件開展帶有年輕化設(shè)計(jì)語言基因的方案探索,并擴(kuò)大覆蓋到重點(diǎn)頁面驗(yàn)證、聚焦、收攏,最終確定產(chǎn)品的年輕化設(shè)計(jì)語言。


















檸檬精是Wonder App的官方IP形象。取自「我酸了」流行語,以檸檬為基礎(chǔ)原型,設(shè)計(jì)保留了檸檬最突出的特征,色彩以品牌色—檸檬黃為主色調(diào),整體造型擬人化、年輕化以增強(qiáng)形象的延展性及實(shí)體化后的可動(dòng)性。IP形象與業(yè)務(wù)屬性及產(chǎn)品氣質(zhì)也較吻合,同用戶互動(dòng)場景應(yīng)用打造差異化記憶點(diǎn)。



不斷完善形象在各種場景中的應(yīng)用及延展,制作系列表情,用更多元的表現(xiàn)形式將檸檬精的性格描繪得更加豐滿,為品牌注入更多親和有趣的情感,拉近與用戶的距離。



伴隨產(chǎn)品興趣圈層的升級(jí),3D檸檬精也結(jié)合星球概念,差異化造型與興趣內(nèi)容對(duì)應(yīng),去賦予不同興趣星球特色,幫助年輕用戶找到社區(qū)、身份歸屬感,增強(qiáng)人與社區(qū)鏈接感。



大星球塑造中,通過不同星球的特色元素構(gòu)建場景,同用戶產(chǎn)生行為共鳴,吸引用戶進(jìn)入圈子。



///

精細(xì)化概念文案突出“星球”場景感



///

寫在最后

設(shè)計(jì)一定不是“拍腦袋”的想象,更多是基于用戶特性、訴求、使用場景的一步步推導(dǎo)、演進(jìn)的結(jié)果。設(shè)計(jì)也并不局限于最終的界面效果呈現(xiàn),整個(gè)產(chǎn)出過程都在設(shè)計(jì),也都有設(shè)計(jì)發(fā)揮的空間。記得在日常的設(shè)計(jì)中多挖掘用戶訴求、洞察機(jī)會(huì)點(diǎn),并抱著提供解決方案而非一次性結(jié)果的視角,動(dòng)態(tài)的、可延展的看待、設(shè)計(jì)事物。 

隨暫別應(yīng)用市場,依然感謝大家的閱讀,期望這趟年輕化設(shè)計(jì)之旅能夠帶給設(shè)計(jì)師們一些啟發(fā)。期待看到更多有趣的、創(chuàng)新的、別出心裁的年輕化設(shè)計(jì)。

作者:百度MEUX

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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)新還是妥協(xié)?

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

01

什么是靈動(dòng)島(Dynamic island)

2022蘋果秋季新品發(fā)布會(huì),備受關(guān)注的新一代iPhone如期而至,此次發(fā)布會(huì)最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉海」設(shè)計(jì),首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意,但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣,帶來了全新的交互方式,模糊了硬件和軟件的界限,通過實(shí)時(shí)變化顯示重要的提醒、通知以及簡單的功能操作,蘋果把這一創(chuàng)新稱之為靈動(dòng)島(Dynamic island)。



02

靈動(dòng)島能做什么 / 不能做什么

靈動(dòng)島其實(shí)可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。

來電

當(dāng)有來電時(shí),靈動(dòng)島會(huì)發(fā)生變化,并在后臺(tái)打電話時(shí)顯示通話時(shí)間和聲音波紋。



音樂

有點(diǎn)類似于鎖屏后的音樂功能操作,保留了基本的播放、暫停、前進(jìn)、后退等功能。



Airpods

連接AirPods后,AirPods的型號(hào)外觀和當(dāng)前電量會(huì)一起顯示。



導(dǎo)航

顯示導(dǎo)航方向和距離,并且能夠在適當(dāng)?shù)臅r(shí)候放大顯示更多導(dǎo)航信息。



Face ID

以前Face ID認(rèn)證會(huì)顯示在屏幕中間,現(xiàn)在集成于靈動(dòng)島的擴(kuò)展功能之中。



充電

當(dāng)充電時(shí),會(huì)顯示充電的狀態(tài)以及當(dāng)前電量百分比。



當(dāng)然,目前除了官方展示的這些功能以外,還會(huì)有更多的應(yīng)用方式,在此不一一列舉。但靈動(dòng)島也并不是萬能的,例如會(huì)存在以下的局限性:

重度使用場景

從官方給出的樣例來看,靈動(dòng)島更多的是承擔(dān)了消息通知和提醒的作用,并不適用于重度使用和復(fù)雜交互等場景,例如消息聊天、刷短視頻、買賣交易等等。

過于復(fù)雜的圖形

受限于前置物理攝像頭,靈動(dòng)島這個(gè)區(qū)域并不能顯示過于復(fù)雜的圖形,并需要避開攝像頭區(qū)域,因?yàn)樵搮^(qū)域是不能顯示任何圖像的。



軟硬件的邊界

靈動(dòng)島的實(shí)際效果并不會(huì)像宣傳圖中那樣好,特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的,即使是在黑色不發(fā)光的OLED屏幕上,軟件和硬件的界限還是能夠明顯區(qū)分。



03

對(duì)于靈動(dòng)島的各方反應(yīng)

新事物的出現(xiàn),總會(huì)伴隨著支持和反對(duì)兩種聲音,此次靈動(dòng)島的創(chuàng)新交互,自然也是褒貶不一,還需要經(jīng)受時(shí)間的考驗(yàn),因?yàn)榧词故翘O果這樣的公司也難免會(huì)犯錯(cuò),比如3D Touch、MacBook上的Touch bar等。

支持方認(rèn)為「靈動(dòng)島是繼劉海屏之后的又一個(gè)成功設(shè)計(jì),甚至?xí)絼⒑F?,更受歡迎」。

「靈動(dòng)島的設(shè)計(jì)非常討巧,同時(shí)也給挖孔屏帶來了更多的想象空間」。

而反對(duì)方的理由也十分充分,首先是羅永浩第一時(shí)間發(fā)表了自己的觀點(diǎn),表面上是硬贊這個(gè)創(chuàng)新,但實(shí)則是諷刺了這樣多此一舉的方式,「先在臉上涂屎,然后再把屎的顏色調(diào)整得跟粉底差不多」



很多的輿論認(rèn)為,靈動(dòng)島的創(chuàng)新是蘋果的一種無奈和妥協(xié),因?yàn)樽詮牡谝淮鷌Phone革新性的使用觸摸屏之后,十多年以來手機(jī)在工業(yè)設(shè)計(jì)方面并沒有太多的創(chuàng)新,大部分廠家是在屏幕分辨率,后蓋材質(zhì),攝像頭像素上面做文章,而蘋果作為一個(gè)工業(yè)設(shè)計(jì)創(chuàng)新的公司,也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動(dòng)島的創(chuàng)新,被認(rèn)為是工業(yè)設(shè)計(jì)乏力之后推動(dòng)交互設(shè)計(jì)創(chuàng)新的無奈之舉。



但無論支持還是反對(duì),前置攝像頭挖孔屏終究是一個(gè)過渡性的方案,最終會(huì)被全面屏所替代,而在這個(gè)過渡時(shí)期,很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。

04

為什么國產(chǎn)手機(jī)不做靈動(dòng)島

國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?!挂酝?,單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計(jì)都已經(jīng)非常成熟,但是為什么經(jīng)過這么多年的迭代,依然沒有創(chuàng)新呢?

思維方式的差異

國產(chǎn)手機(jī)廠商的思路跟蘋果相反,希望盡可能的把前置攝像頭做得越小越好,甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案,目的就是為了把前置攝像頭隱藏。而蘋果的思路則是,既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏,那么干脆就以此為基礎(chǔ),把這個(gè)區(qū)域運(yùn)用到極致。

缺少創(chuàng)新和引領(lǐng)者

似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題,秉持著「人民需要什么,我們就造什么」的成功理念,各大廠商也開始在這些方面內(nèi)卷,從60Hz到120Hz刷新率,從千萬像素到一億像素,從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情,而很少有關(guān)注從0到1,因?yàn)檫@樣做的性價(jià)比的確不高。



市場的接受和認(rèn)可程度

當(dāng)劉海屏第一次出現(xiàn)的時(shí)候,很多用戶都在吐槽,其中也包括很多蘋果的忠實(shí)用戶,寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后,才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣,并贏得市場的認(rèn)可。我相信,蘋果發(fā)布以后,各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿,新的一輪內(nèi)卷即將拉開帷幕。

即便如此,國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量,稱之為「環(huán)形電量」,并盡可能的使其與狀態(tài)欄的其它信息融為一體。



榮耀的通話時(shí)間膠囊和自拍膠囊,都以前置攝像頭為基礎(chǔ)做延展,可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗(yàn)。




雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展,但從效果和想法來看,也與靈動(dòng)島的概念比較類似。



HTC曾經(jīng)出過一款HTC U Ultra,當(dāng)然那時(shí)候還沒有全面屏的概念,所以HTC把它稱之為副屏,可以顯示消息通知、音樂播放操作、App快捷入口等等。



除此以外,幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。



05

對(duì)設(shè)計(jì)師的影響

靈動(dòng)島的出現(xiàn),對(duì) iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做,就好比「劉海屏」首次出現(xiàn)的時(shí)候,需要設(shè)計(jì)師對(duì)全新交互邏輯、卡片行為、動(dòng)畫等重新適配。那么對(duì)于「靈動(dòng)島」我想需要考慮的是這幾個(gè)方面。

新的交互方式

之所以叫靈動(dòng)島,就是因?yàn)樗恰胳`動(dòng)」的,擁有不同的狀態(tài)變化,以適應(yīng)各種功能提示和操作。設(shè)計(jì)師在使用這個(gè)功能的時(shí)候,需要充分考慮其場景,恰如其分的給予提醒而不給用戶帶來過多的打擾。

新的容器

不同形態(tài)的容器可以裝載不同的內(nèi)容,相比于以往常規(guī)的通知提醒,新的容器可以展示更多的信息,甚至是簡單的功能操作。在提出解決方案的時(shí)候,留給設(shè)計(jì)師更多的想象空間。

新的表達(dá)方式

靈動(dòng)島相當(dāng)于一個(gè)永遠(yuǎn)在桌面上的島嶼,比任何App的優(yōu)先級(jí)都要高,所以會(huì)成為各個(gè)應(yīng)用的必爭之地,使用一種好的表達(dá)方式,必然能夠達(dá)到事半功倍的效果,因此也是考驗(yàn)設(shè)計(jì)師在寸土寸金的區(qū)域中,通過視覺化手段表達(dá)的能力。

最后,我想蘋果的初衷是為了更好的用戶體驗(yàn),消除一部分用戶對(duì)于挖孔屏的焦慮,如果能夠真正的站在用戶的角度、克制的去使用新的交互方式,會(huì)得到用戶的喜愛和市場的認(rèn)可。

我認(rèn)為靈動(dòng)島既是一種創(chuàng)新也是一種妥協(xié),對(duì)于工業(yè)設(shè)計(jì)硬件創(chuàng)新乏力的妥協(xié),更是對(duì)技術(shù)發(fā)展的妥協(xié)。我也相信,真正的全面屏?xí)r代終究會(huì)到來,期待那個(gè)時(shí)候蘋果再一次給我們帶來真正意義上的,里程碑式的,創(chuàng)新!

作者:撿蘑菇的人

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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è)輪回,這些UI設(shè)計(jì)趨勢你怎么看?

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

潮流是個(gè)輪回,不光我們看的衣服、化妝品、哪怕是那些短視頻,同樣的事情也發(fā)生在用戶界面(UI)設(shè)計(jì)中。從模仿現(xiàn)實(shí)世界物體的界面到?jīng)]有任何修飾的極簡界面,不同的風(fēng)格優(yōu)缺點(diǎn)各異。只有學(xué)習(xí)并了解了歷史上曾流行的趨勢,你才能進(jìn)行新的嘗試。這對(duì)于創(chuàng)新、推動(dòng)設(shè)計(jì)行業(yè)的發(fā)展和提升你自己的設(shè)計(jì)能力都是至關(guān)重要的。下面本文將介紹十大UI設(shè)計(jì)趨勢,對(duì)每位設(shè)計(jì)師來說都值得一看。

1.擬態(tài)主義

擬態(tài)主義是用來設(shè)計(jì)最早的圖形用戶界面的視覺方法。在擬態(tài)主義中,設(shè)計(jì)元素模仿現(xiàn)實(shí)世界中的對(duì)應(yīng)物來連接物理世界和數(shù)字世界。最著名的例子是回收站的圖標(biāo),它模仿了現(xiàn)實(shí)生活中的回收站。

當(dāng)個(gè)人電腦或智能手機(jī)首次出現(xiàn)時(shí),設(shè)計(jì)師需要將它們設(shè)計(jì)成第一次使用的人也能理解的樣子。因此,擬態(tài)主義設(shè)計(jì)將與現(xiàn)實(shí)世界的相似性置于視覺吸引力之上,以確保直觀的用戶體驗(yàn)。

蘋果公司的iOS操作系統(tǒng)便在早期版本中于用戶界面上大量使用了擬態(tài)設(shè)計(jì)。

早期蘋果app和軟件的視覺界面模仿現(xiàn)實(shí)生活中的物體,就算是首次使用的用戶也能一眼就看明白

2010年初之前,擬態(tài)設(shè)計(jì)是行業(yè)標(biāo)準(zhǔn)。這種設(shè)計(jì)美學(xué)大大方便了人們過渡到數(shù)字平臺(tái)。但隨著越來越多的人成為數(shù)字原住民,缺乏想象的設(shè)計(jì)元素對(duì)用戶體驗(yàn)而言變得不再那么重要。此外,因?yàn)楦叨葦M真,所以擬態(tài)主義設(shè)計(jì)元素需要大量的技術(shù)能力。人們數(shù)字素養(yǎng)的提升為新的UI設(shè)計(jì)風(fēng)格興起鋪平了道路。

2.極簡主義

受極簡主義藝術(shù)運(yùn)動(dòng)的影響,UI設(shè)計(jì)領(lǐng)域也開始刮起極簡的風(fēng)潮。極簡主義的主要原則是 “少即是多”。極簡主義并不是空洞和模糊的設(shè)計(jì)。它推崇的是 “少即時(shí)多”–正如美國作家Joshua Becker的書名所言–意味著要簡化視覺空間,換句話說,使用更少的元素,以便能夠突顯最重要的東西。

極簡主義界面優(yōu)雅簡潔,注重每個(gè)元素的功能,重視負(fù)空間和大膽的顏色、字體之間的組合??偟膩碚f,極簡主義的用戶界面可以非常實(shí)用,因?yàn)闆]有任何裝飾性元素。因此–如果設(shè)計(jì)得好的話–用戶會(huì)有一個(gè)高度直觀的設(shè)計(jì)之旅。極簡主義界面往往擁有一種優(yōu)雅而精致的視覺吸引力。

作家Alan Trotter的網(wǎng)站采用了極簡UI設(shè)計(jì),用戶需點(diǎn)擊突出顯示的單詞來查看隱藏內(nèi)容

極簡主義于20世紀(jì)50年代末在紐約興起,其主要特征是秩序、簡單和和諧。極簡主義的 “少即是多 “原則后來被德國工業(yè)設(shè)計(jì)師迪特爾-拉姆斯改編為 “少而精 “,列為他的“好設(shè)計(jì)原則”之一。也有人解釋這一原則為:”好的設(shè)計(jì)是盡可能少的設(shè)計(jì)”。

“一個(gè)形狀、一個(gè)體積、一種顏色、一個(gè)表面,它們是獨(dú)立存在的,不應(yīng)該淪為整體的一部分。形狀和材料不應(yīng)該被它們所處的環(huán)境所改變。” – 唐納德-賈德,美國藝術(shù)家

除了極簡主義本身,許多其他的UI設(shè)計(jì)趨勢–包括扁平化設(shè)計(jì)–都或多或少地遵循了極簡主義的原則。

3.扁平化設(shè)計(jì)

扁平化設(shè)計(jì)是一種以簡約為中心的UI設(shè)計(jì)美學(xué),它將界面設(shè)計(jì)的范式從現(xiàn)實(shí)中的物體轉(zhuǎn)移到元素的圖解簡化。這種UI趨勢代表了一種實(shí)質(zhì)性的技術(shù)優(yōu)勢,尤其是在移動(dòng)設(shè)備上,因?yàn)樗嵘嗽O(shè)備的加載速度。扁平化設(shè)計(jì)使用極簡的方式處理UI元素,不添加任何陰影或裝飾物。在個(gè)性和視覺吸引力上,扁平化設(shè)計(jì)很大程度依賴于明亮的色彩和高超的字體排版技術(shù)。例如,設(shè)計(jì)師會(huì)尋找本身便足夠有趣的字體,但它們的筆畫要均勻,并且符合極簡美學(xué)的風(fēng)格。

扁平化設(shè)計(jì)在2012年隨著Windows 8、蘋果的iOS 7和谷歌的Material Design的發(fā)布而獲得關(guān)注。然而,在某種程度上,扁平化設(shè)計(jì)缺乏視覺功能可見性,用戶有可能不知道哪些元素可以互動(dòng)。

iOS 7控制中心采取扁平化設(shè)計(jì)

2.0版本的扁平化設(shè)計(jì)誕生后,其視覺功能可見性和使用性得到提升。扁平化設(shè)計(jì)開始利用微妙的陰影或顏色變化來突出互動(dòng)元素,向用戶表明如何與設(shè)計(jì)進(jìn)行互動(dòng)。這些微妙的變化有助于增加深度和維度,從而提高使用性,扁平化設(shè)計(jì)的視覺效果干凈整潔不雜亂。

4.包豪斯主義

包豪斯界面設(shè)計(jì)風(fēng)格圍繞幾何圖形如半圓形、圓形、矩形、三角形等展開,采用各種創(chuàng)新字體和非干擾、非功能性的細(xì)節(jié)。這種設(shè)計(jì)風(fēng)格依賴于設(shè)計(jì)元素本身:線條、形狀、顏色。包豪斯主義的特點(diǎn)為抽象的形狀和平衡的形式。

1919年,德國魏瑪開始了包豪斯藝術(shù)和設(shè)計(jì)運(yùn)動(dòng),從而衍伸出了包豪斯用戶界面設(shè)計(jì)風(fēng)格。包豪斯藝術(shù)和設(shè)計(jì)運(yùn)動(dòng)通過將手工業(yè)與藝術(shù)相結(jié)合,在藝術(shù)與工業(yè)之間架起了一座橋梁。包豪斯運(yùn)動(dòng)的基本原則是 “形式服從功能”。這一原則深刻地影響了后世的設(shè)計(jì)。根據(jù)這一原則,從物體的預(yù)期功能或目的出發(fā),設(shè)計(jì)師設(shè)計(jì)出簡單的幾何圖形,從而制造出一種極簡主義美學(xué)。它倡導(dǎo)的是一種幾何的、抽象的風(fēng)格,沒有什么情感或情緒,也沒有什么歷史元素。

包豪斯風(fēng)格下的數(shù)字界面有一種優(yōu)雅、現(xiàn)代和簡潔的視覺吸引力。

“將包豪斯原則運(yùn)用到現(xiàn)代產(chǎn)品設(shè)計(jì)中,意味著要勇于面對(duì)紛雜的質(zhì)疑?!? Melanie Daveid,用戶體驗(yàn)設(shè)計(jì)師和藝術(shù)總監(jiān),以及Adobe Live主持人

5.深色模式

深色模式的用戶界面令淺色文本位于深色背景上。這種顏色方案減少了設(shè)備屏幕發(fā)出的亮度,一些研究指出,它有助于通過減少眼睛的疲勞來改善人體視覺。這種能潛在改善眼睛疲勞的功能對(duì)于用戶需要閱讀大量內(nèi)容的界面特別有幫助。而且深色模式在一定程度上有助于節(jié)約電量。深色主題界面的誕生是對(duì)暗字明底方案的反擊,后者模擬了墨字白紙的外觀。

深色模式趨勢出現(xiàn)在2016年,當(dāng)時(shí)Twitter試驗(yàn)了一個(gè)暗色底的顏色方案。不過,在深色背景上使用亮色文本的操作其實(shí)早已出現(xiàn)–比如說《黑客帝國》電影中深色屏幕上的綠色數(shù)字。但深色模式真正流行開來是得益于蘋果。蘋果公司在iOS 13的更新中發(fā)布了深色模式選項(xiàng),從那以后,深色模式成為許多界面中的常見選項(xiàng),用戶可以在淺色和深色界面之間進(jìn)行選擇。

深色模式vs淺色模式

深色模式的用戶界面具有鮮明、時(shí)尚和現(xiàn)代的特征,對(duì)眼睛更加溫和。因此,深色模式的流行可能緣于解決用戶用眼過度問題的需要。如果你的產(chǎn)品需要用戶長時(shí)間觀看屏幕,不妨考慮添加一個(gè)深色模式選項(xiàng)。

就拿深色模式來說現(xiàn)在身邊很多朋友都在用,所以我們以前不喜歡的,在未來的某一天還是會(huì)重新愛上的。

作者:馬克筆設(shè)計(jì)留學(xué)

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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ì)公司



我拼命問清楚了這些問題,結(jié)果開發(fā)卻把我拉黑了!

seo達(dá)人

一、代碼更容易實(shí)現(xiàn)線性漸變、徑向漸變、角度漸變。網(wǎng)格漸變往往需要我們切圖

設(shè)計(jì)中,我們通常用的漸變有:線性漸變、徑向漸變、角度漸變、網(wǎng)格漸變。

圖片
在這當(dāng)中,代碼實(shí)現(xiàn)線性漸變、徑向漸變、角度漸變 相對(duì)來說要簡單一些,而網(wǎng)格漸變則需要消耗更多的開發(fā)精力。我們也不會(huì)在這上面去增加開發(fā)工作量。
所以,在我們輸出設(shè)計(jì)稿給開發(fā)的時(shí)候,有網(wǎng)格漸變的部分直接切給開發(fā)。比如下面設(shè)計(jì)稿上的漸變背景色:

圖片

 

二、文字能不用透明度就不用透明度,直接給原始的16 進(jìn)制色值

16 進(jìn)制色就是在開發(fā)中設(shè)定顏色的代碼,每個(gè)顏色都有對(duì)應(yīng)的 16 進(jìn)制色,如 #000000 是黑色,#FFFFFF 是白色。

比如我在調(diào)這個(gè)文字顏色的時(shí)候可以用 #000000 40% 的透明度,也可以直接用 #999999 這個(gè)色,這兩個(gè)呈現(xiàn)的顏色沒有任何區(qū)別。

圖片

但是交給開發(fā)寫的話,第一種除了要寫 #000000 的黑色之外,還要寫一串 Alpha 透明值,這樣做會(huì)更消耗性能,且在不同屏幕分辨率、不同操作系統(tǒng)下,所實(shí)現(xiàn)的透明效果也會(huì)有偏差。

所以,在這種非必要情況下,樣式可以用不帶透明度實(shí)現(xiàn)的話,就不要帶。

 

三、切一整張大圖,可能會(huì)發(fā)生拉伸變形或是圖片被裁剪的問題

如果是一整張的切下來,會(huì)導(dǎo)致不同尺寸的手機(jī)把切圖拉伸變形,或者會(huì)裁剪多出比例的部分。

比如我們切的這張啟動(dòng)頁大小為 375*812 的三倍圖,這張圖在 iphone13 mini(375*812px)和安卓(360*640px)上等比展示就會(huì)產(chǎn)生不同的效果——

安卓屏就會(huì)被裁切掉一些(展示圖片來自網(wǎng)絡(luò))。

圖片

如何保證在這種情形下,啟動(dòng)頁的圖片可以適配不同尺寸的屏幕呢?

我們可以將上下分開切,讓開發(fā)分別定上面插畫和logo的位置,以此保證他倆都能完整展示。

將一張圖切成這兩張:

圖片

設(shè)定插畫距離頭部是 30px,底部 logo 距離底部是 30px

圖片

這樣在其他屏幕上,也是依照「插畫距離頭部30px,底部 logo 距離底部是 30px」這個(gè)規(guī)則來寫,就能保證這張圖上的所有內(nèi)容不被裁切了!

圖片

 

四、不要將切片與 icon 貼在一起

一些初次切 icon 的同學(xué)會(huì)這么做↓

圖片

這么做會(huì)導(dǎo)致以下幾點(diǎn)問題:

· 如果 icon 有 0.5 像素點(diǎn),那么貼邊切很可能會(huì)被裁掉一些;
· icon 的高矮長寬不一,但開發(fā)會(huì)全按一個(gè)尺寸來寫,導(dǎo)致 icon 被拉伸或壓縮;
· icon 設(shè)計(jì)規(guī)范不一致,出現(xiàn)各式各樣的尺寸。

所以我們都會(huì)給一套的 icon 固定一個(gè)同樣大小、正方形的框,以此來規(guī)避掉以上出現(xiàn)的問題。

圖片

 

五、通知icon與帶數(shù)量的小紅點(diǎn)不用切在一起

我們在做通知消息的時(shí)候右上角會(huì)有消息數(shù)量的標(biāo)識(shí):

圖片

當(dāng)數(shù)字分別為個(gè)位數(shù)、十位數(shù)、99+ 時(shí),紅色底板的寬度會(huì)根據(jù)數(shù)字長短發(fā)生變換:

圖片

我們不需要每種情況的小紅點(diǎn)都切一遍,只需要定好數(shù)字在紅底里的左右間距,讓開發(fā)根據(jù)數(shù)字長短做自適應(yīng)即可。

圖片

所以我們提供切圖只需要切鈴鐺部分。

圖片

 

總結(jié)

以上就是我在實(shí)際項(xiàng)目中遇到的切圖問題了,切圖是一項(xiàng)靠經(jīng)驗(yàn)積累的UI必修課,希望你在閱讀之后留個(gè)印象,以后遇到類似問題也有了解決之法。

歡迎在評(píng)論區(qū)分享你與開發(fā)對(duì)接所遇到的那些事兒~

 

作者:花菜

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》我拼命問清楚了這些問題,結(jié)果開發(fā)卻把我拉黑了!

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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ì)公司


職場中要學(xué)會(huì)拒絕

seo達(dá)人

一、拒絕拿來主義

相信大家都遇到過同事或者朋友索要源文件的情況,面對(duì)這種拿來主義我們要學(xué)會(huì)拒絕。工作對(duì)接中非必要不提供源文件給無關(guān)聯(lián)的同事,團(tuán)隊(duì)項(xiàng)目文件流傳出去也許就是這個(gè)因素。

圖片

要學(xué)會(huì)拒絕,源文件也是我們的勞動(dòng)付出,不要把自己的勞動(dòng)果實(shí)提供給別人,助長他誤導(dǎo)面試官等情況發(fā)生。工作中的對(duì)接需要驗(yàn)證人員關(guān)聯(lián)性,團(tuán)隊(duì)文件流傳出去要先向直屬領(lǐng)導(dǎo)匯報(bào),源文件也是屬于團(tuán)隊(duì)的資產(chǎn)。

圖片

拒絕拿來主義,不要被“不好意思”拒絕這種性格所束縛,勞動(dòng)果實(shí)需要付出的關(guān)聯(lián)人員才能共享。

 

二、拒絕不公平待遇

在職場中我們都在不斷努力發(fā)揮自己的價(jià)值,希望以此獲得更好的晉升機(jī)會(huì)和待遇回報(bào)。如果只有付出沒有與之匹配的勞動(dòng)回報(bào),只會(huì)讓員工失去奮斗的意志,我們也是會(huì)拒絕不公平待遇的。

圖片

根據(jù)自己的專業(yè)能力和經(jīng)驗(yàn)值,我們要分析出自己的行業(yè)價(jià)值,無論是求職談薪還是在職漲薪,我們都要盡量追求接近公平。如果當(dāng)時(shí)妥協(xié)了,就得確保自己不會(huì)有心理情緒,不然不僅工作不順心,也會(huì)影響自身專業(yè)的提升。

拒絕不公平待遇需要有拒絕的勇氣和專業(yè)實(shí)力,專業(yè)能力的提升和作品的沉淀至關(guān)重要,只有這樣才能擁有更多的選擇權(quán)。

圖片

 

三、拒絕長期職責(zé)偏離

在職場中偶爾配合完成非本職工作的內(nèi)容實(shí)屬正常,但是僅限于偶爾配合。如果長期偏離自己的專業(yè)職責(zé)范圍,也是得不償失的,要根據(jù)自己的職場計(jì)劃學(xué)會(huì)拒絕。

專業(yè)能力的提升離不開項(xiàng)目經(jīng)驗(yàn)的積累,如果長期處于偏離狀態(tài),會(huì)影響我們的經(jīng)驗(yàn)沉淀,進(jìn)而影響專業(yè)能力的晉升。如果在一個(gè)團(tuán)隊(duì)長期干非專業(yè)范圍的工作,我們要學(xué)會(huì)拒絕,選擇更適合自己的團(tuán)隊(duì)。不要受溫水煮青蛙式的工作環(huán)境而影響,最終使得自己雜而不精,想要跳槽到更好的團(tuán)隊(duì)就會(huì)變得非常困難。

圖片

 

四、拒絕違規(guī)設(shè)計(jì)

工作中的設(shè)計(jì)任務(wù)雖然我們無法改變,但是也要留意自己的設(shè)計(jì)底線,也是設(shè)計(jì)范圍的法律底線。不要稀里糊涂的干活兒,設(shè)計(jì)也是要有所為而有所不為,一旦觸碰底線設(shè)計(jì)師也是難逃追責(zé)。

如果不幸遇到這樣的團(tuán)隊(duì),就要早點(diǎn)離職,不要被高待遇所誘惑。拒絕違規(guī)設(shè)計(jì),做一名懂法的設(shè)計(jì)師。

圖片

 

五、拒絕同事的“任務(wù)”

這個(gè)問題就是我們一個(gè)老學(xué)員咨詢我的問題,事情的大概意思就是領(lǐng)導(dǎo)分別給她和同事安排了工作,同事覺得她的內(nèi)容部分不是很重要,讓她隨便做做就可以,剩余的時(shí)間來幫自己完成任務(wù)。遇到這個(gè)問題她很苦惱,自己的任務(wù)還有別的都還沒有完成,是否要答應(yīng)同事的要求。

遇到這個(gè)情況我們要第一時(shí)間拒絕,回復(fù)的話術(shù)是我得先完成自己的任務(wù),如果到時(shí)候有時(shí)間再根據(jù)情況看。職場中沒有隨便做做這個(gè)說法,領(lǐng)導(dǎo)安排的任務(wù)就要發(fā)揮自己最佳的能力去做到極致,展示出自己在團(tuán)隊(duì)里面存在的價(jià)值。如果本職工作都沒有做完,就不要去當(dāng)職場“好人”,到時(shí)候成就了別人,結(jié)果自己的事情一塌糊涂。只有在完成自己職責(zé)內(nèi)容之后,再詢問領(lǐng)導(dǎo)有沒有其他安排,如果沒有其他安排的情況下我們再考慮援助同事的任務(wù)。

圖片

職場中每個(gè)角色都有自己應(yīng)該承擔(dān)的責(zé)任和輸出,所謂的能者多勞是在量力而行的基礎(chǔ)上,如果自己的職責(zé)都沒有做到極致,就應(yīng)該優(yōu)先保障自己的輸出質(zhì)量。要學(xué)會(huì)拒絕同事的“任務(wù)”,除非這個(gè)任務(wù)是屬于共同的任務(wù),再結(jié)合優(yōu)先級(jí)去進(jìn)行排序。

圖片

 

六、拒絕長期低質(zhì)量輸出

在職場中不只是為了獲得報(bào)酬,高質(zhì)量的輸出不僅成就了項(xiàng)目,也是成就了自己的專業(yè)沉淀。如果是自己沒有擺正態(tài)度,就要及時(shí)調(diào)整心態(tài),用最好的輸出不斷提高自己的職場價(jià)值。

圖片

如果是團(tuán)隊(duì)現(xiàn)狀如此,整天干著沒有質(zhì)量的輸出,久而久之就會(huì)讓自己失去專業(yè)優(yōu)勢。到時(shí)候想要晉升或者跳槽的時(shí)候,就會(huì)發(fā)現(xiàn)自己的專業(yè)能力差距甚遠(yuǎn),還沒有一份像樣的作品集。

職場中要理性的分析自己的現(xiàn)狀,拒絕長期低質(zhì)量輸出,這樣只是在耗費(fèi)自己的青春。想要不斷提升自己,就要不斷完成具備挑戰(zhàn)的任務(wù),只有項(xiàng)目質(zhì)量越高,我們才能學(xué)習(xí)并掌握更優(yōu)秀的經(jīng)驗(yàn)。

圖片

 

七、拒絕長期無所事事

養(yǎng)老式的職場生活估計(jì)大家很羨慕,但是真的置身于這樣的團(tuán)隊(duì)中,估計(jì)距離淘汰也只是時(shí)間問題了。

在團(tuán)隊(duì)中如果長期無所事事,不僅會(huì)荒廢自己的設(shè)計(jì)執(zhí)行能力,也會(huì)讓自己的心態(tài)變得消極。如果遇到高強(qiáng)度的工作出現(xiàn),就會(huì)想要去逃避,這是一個(gè)非常危險(xiǎn)的信號(hào)。我們不能長期沒有輸出,這樣的職場環(huán)境我們要及時(shí)拒絕,青春的我們不是為了享樂,現(xiàn)在不去磨練自己,未來就會(huì)被職場所拋棄。

圖片

 

八、拒絕“畫餅”式承諾

還是職場小白的我,也經(jīng)常被領(lǐng)導(dǎo)或者老板“畫餅”式承諾,只能說是踩坑也是一種修行。不過以過來人的經(jīng)驗(yàn)回顧時(shí),希望大家不會(huì)再被“畫餅”,學(xué)會(huì)拒絕“畫餅”式的承諾。

圖片

職場黃金期是我們提升專業(yè)和積累行業(yè)經(jīng)驗(yàn)的關(guān)鍵時(shí)期,如果沒有發(fā)揮的舞臺(tái)就要及時(shí)做出改變,不能被不確定性的承諾而耽誤自己的計(jì)劃。只有在自己的底層能力達(dá)到峰值之后,才能具備更好的話語權(quán),現(xiàn)在公司需要你不代表以后不需要更優(yōu)秀的人,所以自身優(yōu)秀才是最有保障的。如果是待遇層面的承諾也是無效的,當(dāng)前公司的待遇條件一定程度上決定了跳槽的談薪起點(diǎn),承諾待遇不代表實(shí)際待遇。

圖片

如果承諾的不能如期而至,我們就要多為自己打算,不能超過自己的忍耐期限還繼續(xù)拖沓。

 

九、拒絕低能領(lǐng)導(dǎo)

在職場初期進(jìn)入大公司固然重要,但是跟對(duì)領(lǐng)導(dǎo)往往比公司本身更重要。領(lǐng)導(dǎo)的專業(yè)度決定了我們在團(tuán)隊(duì)中成長的速度,如果遇到低能的領(lǐng)導(dǎo),不僅容易原地踏步,很容易到達(dá)專業(yè)瓶頸期。

圖片

有的領(lǐng)導(dǎo)也許不是專業(yè)出身,但是管理方法和平時(shí)的指導(dǎo)性建議很好,我們也能找到更多沉淀經(jīng)驗(yàn)的思路和方向。如果領(lǐng)導(dǎo)專業(yè)能力不行,還過于武斷和眼界不足,項(xiàng)目只能是弄得一塌糊涂,這樣的領(lǐng)導(dǎo)是不可能給我們帶來成長的經(jīng)驗(yàn)的。

進(jìn)入團(tuán)隊(duì)后通過一段時(shí)間的對(duì)接,我們要及時(shí)判斷出領(lǐng)導(dǎo)的能力,要學(xué)會(huì)拒絕低能的領(lǐng)導(dǎo)。只有跟對(duì)領(lǐng)導(dǎo)才能快速成長,從領(lǐng)導(dǎo)身上學(xué)到的做事方法、思考角度、項(xiàng)目經(jīng)驗(yàn)等,是我們快速從小白變得成熟的關(guān)鍵。

圖片

 

十、拒絕低要求團(tuán)隊(duì)

在項(xiàng)目設(shè)計(jì)中,不是一稿過就是我們追求的目標(biāo),如果團(tuán)隊(duì)要求比較低,是很難突破自我的。只有一次又一次的挑戰(zhàn)新難度,才能從固化思維中擺脫出來,掌握新的思考技巧。所以,我們也要學(xué)會(huì)拒絕低要求的團(tuán)隊(duì),不能提前過著溫水煮青蛙式的工作狀態(tài)。

圖片

身邊都是優(yōu)秀的設(shè)計(jì)師,你的能力也會(huì)逐漸受到影響,遇到問題才能獲得更多解決方案。有一個(gè)要求比較嚴(yán)格的領(lǐng)導(dǎo),團(tuán)隊(duì)也比較注重設(shè)計(jì)質(zhì)量,你才能輸出更優(yōu)秀的作品,沉淀更優(yōu)秀的經(jīng)驗(yàn)。

 

小結(jié)

無論是在工作、學(xué)習(xí)還是生活中,我們都不能過度的順從和依賴,學(xué)會(huì)拒絕也是我們成長的關(guān)鍵。拒絕也是新的開始,也許能在新的過程中發(fā)現(xiàn)新的機(jī)遇,所以我們不要不敢拒絕。只要在拒絕之前做好冷靜的分析,排查出利弊關(guān)系即可,不能盲目辦事也不能委曲求全。

圖片

本文觀點(diǎn)僅代表個(gè)人的一些經(jīng)驗(yàn)反思,不足之處根據(jù)自己的實(shí)際情況判斷,我們互相進(jìn)步。

 

作者:黑馬青年

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》職場中要學(xué)會(huì)拒絕

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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ì)?看這篇文章足夠了。

seo達(dá)人


一、按鈕的幾種布局

按鈕的布局大致分為四種,分別為:導(dǎo)航欄布局、跟隨內(nèi)容布局、偏向底部布局和底部懸浮布局。

圖片圖片

 

二、導(dǎo)航欄布局

我們平時(shí)看到的導(dǎo)航欄布局有很多,如發(fā)朋友圈和發(fā)QQ動(dòng)態(tài)。

圖片

為什么要將「發(fā)表」按鈕放在導(dǎo)航欄右側(cè)?

以微信朋友圈舉例,在發(fā)送動(dòng)態(tài)時(shí),核心操作是為照片配文字或繼續(xù)添加照片。

其他操作例如選擇所選位置、提醒誰看、誰可以看,同步到朋友圈,都是次要操作且不會(huì)調(diào)起鍵盤。

用戶輸入文字之后,直接可以點(diǎn)擊附近的「發(fā)表」按鈕,快捷方便。

能否將「發(fā)表」按鈕放在頁面中呢?答案是:不行!

圖片

將「發(fā)表」按鈕放在頁面,當(dāng)輸入文字時(shí),會(huì)導(dǎo)致鍵盤遮擋操作按鈕,無法快速點(diǎn)擊「發(fā)表」操作。

除非是「發(fā)表」按鈕附近有很多需要鍵盤輸入的必填表單,不然不能這么做。目前來看,微信的「發(fā)表」按鈕的位置設(shè)計(jì)是最優(yōu)解。

 

三、跟隨內(nèi)容布局

常見于表單字段填寫時(shí),如下圖所示。

圖片

那么能不能將操作按鈕放在導(dǎo)航欄右側(cè)呢?答案是不行!因?yàn)榉旁趯?dǎo)航欄右側(cè)的話,操作路徑不順暢。

放在表單下方是正常的從上往下操作流。

有些設(shè)計(jì)覺得將按鈕底部區(qū)域,離大拇指更近,更方便操作,如下圖。圖片

但是因?yàn)槭潜韱翁顚?,?huì)調(diào)起鍵盤,將提交按鈕給擋住,所以按鈕跟隨表單之后,更加科學(xué)。

 

四、偏向底部布局

偏向底部的操作按鈕通常是內(nèi)容區(qū)域不需要調(diào)起鍵盤的使用場景。常見的如引導(dǎo)頁或結(jié)果頁。

圖片

 

五、底部懸浮布局

底部懸浮布局,常用于非填寫內(nèi)容超過一屏或?qū)徟仁褂脠鼍?,特點(diǎn)是操作按鈕優(yōu)先級(jí)高,方便用戶實(shí)時(shí)操作。

如下圖電商購買按鈕。

圖片

 

六、布局總結(jié):

1、填寫內(nèi)容為必填項(xiàng)、需要調(diào)起鍵盤且均集中在頁面頭部,則操作按鈕放在導(dǎo)航欄右側(cè)較合理。

2、填寫內(nèi)容在頭部,且調(diào)起鍵盤不會(huì)擋住操作按鈕,則按鈕緊隨內(nèi)容較合理。

3、不需要調(diào)起鍵盤來填寫內(nèi)容,則按鈕放在偏向底部比較合理。

4、按鈕非常重要,且非填寫內(nèi)容超過一屏?xí)r,用底部懸浮布局比較合理。

 

后記

從這篇文章開始,我嘗試寫一些工作中很實(shí)用且基礎(chǔ)的文章。

爭取每一篇文章都可以給大家一些收獲,這樣有助于在工作中使用。

由于每個(gè)人的基礎(chǔ)不同,基礎(chǔ)類和進(jìn)階類我盡量都覆蓋。


作者:Echo

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》按鈕位置如何合理設(shè)計(jì)?看這篇文章足夠了。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號(hào):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.bouu.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è)人資料

存檔