首頁

為什么交互設(shè)計能幫助產(chǎn)品解決問題

ui設(shè)計分享達人

一、為什么交互設(shè)計能幫助產(chǎn)品解決問題


為什么那么多人覺得應(yīng)該先學(xué)UI設(shè)計再學(xué)交互設(shè)計,因為UI門檻低所以入手快。其實交互比UI更早出現(xiàn),從需求理論可以看出人們在追逐主觀體驗的感受,在基礎(chǔ)需求未被滿足前是不會出現(xiàn)更高層次的需求的。所以UI設(shè)計讓更多用戶感受到了舒適和更好的體驗。殊不知,如果底層的交互和產(chǎn)品的可用性未被滿足,那么UI做的再好也是徒勞。




市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設(shè)計,就是因為大家都在按照現(xiàn)有的,常用的模版在設(shè)計,現(xiàn)在其實比早兩年會好很多,很多設(shè)計師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動或者價值探尋的工作。


例如下面的案例,這是一個電瓶車電池租賃的一個產(chǎn)品。



undefined



從美觀角度,左側(cè)的界面更加簡潔信息也有規(guī)律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側(cè)的對比圖時,大家在第一反應(yīng)中,有多少人可以重啟自己的視角,還是說已經(jīng)被這個頁面所拉入到不可自拔的漩渦中去了呢?


如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態(tài)就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質(zhì)沒變。所以為什么我們說要做正確的事而不是正確的做事。





交互不僅僅能夠讓產(chǎn)品好用的,也要讓產(chǎn)品走對方向。


另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學(xué)的快,用的會,交互體現(xiàn)在人們?nèi)粘K佑|到的大部分媒介,并且與之產(chǎn)生聯(lián)系。例如一把水壺,水壺的設(shè)計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學(xué)的快指的是當我看懂了之后我馬上就可以對這個產(chǎn)品進行基礎(chǔ)操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調(diào)溫等等。



1.交互設(shè)計中媒介與人的關(guān)系


1.1順應(yīng)


交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現(xiàn)代人的習(xí)慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


所以在當時人們?yōu)榱诉m應(yīng)非常有限的工具資源,改變了自然的操作方式。但現(xiàn)代社會如果說你的產(chǎn)品不為用戶的使用和場景去考慮,那基本也就涼涼了。


從2g到5g時代的發(fā)展,除了生活方式發(fā)生翻天覆地的變化外,我們所接觸到的媒介也發(fā)生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內(nèi)容,外對于像移動手機這樣的設(shè)備用戶對其操作方式和習(xí)慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術(shù)的超智能化手機,改變了我們的認知也改變了我們的生活方式。



1.2遷移


平臺遷移的交互成本,很多同學(xué)可能都玩過moba類游戲-dota,這是一款在電腦端戰(zhàn)術(shù)競技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





在現(xiàn)在非常火熱并且模式和dota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預(yù)判技能釋放。







同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發(fā)出了吃雞專用的輔助設(shè)備,專門用來給多余的手指進行射擊操作。


另外,大家如果做b端的同學(xué)應(yīng)該也深有感觸,平臺遷移的成本非常高。想要把集成非常復(fù)雜的業(yè)務(wù)后臺切換到移動端是一件很麻煩的事,因為在網(wǎng)頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯(lián)動的左側(cè)標簽導(dǎo)航和頂部聯(lián)動的標簽導(dǎo)航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯(lián)動導(dǎo)航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現(xiàn),所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復(fù)雜業(yè)務(wù)功能的后臺系統(tǒng)就不適宜遷移到移動端上。


web端的工具和網(wǎng)頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統(tǒng)一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變?yōu)槌蜂N按鈕,有待考量。



2.交互認知的盲區(qū)


到底什么是交互設(shè)計,這個問題其實是比較復(fù)雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設(shè)計的概念真的挺多的,光網(wǎng)上能夠找到的定義就不下5種,這些對交互設(shè)計的定義中,比較頻繁出現(xiàn)的是行為、場景、用戶等詞匯,交互設(shè)計到底設(shè)計的是用戶的行為,還是設(shè)計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設(shè)計的本質(zhì)。


中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進化過程。但現(xiàn)在其實很多的交互形式都是來源于一些大流量產(chǎn)品的模仿,更多的是擔(dān)心用戶成本過高而妥協(xié)為滿足用戶預(yù)期。



2.1信息不對稱


事實上,為什么我們講不清楚什么是交互設(shè)計,其實UI設(shè)計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


例如“你可以意思一下”,單就這句話,我們大概知道最關(guān)鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區(qū)分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應(yīng)付一下?


當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


同樣的,在設(shè)計領(lǐng)域,很多設(shè)計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸,但設(shè)計者覺得現(xiàn)在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設(shè)計師和開發(fā)還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設(shè)計師通常喜歡描述從左到右或者從上到下,但是在開發(fā)的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設(shè)計師去學(xué)習(xí)一些開發(fā)知識,開發(fā)也盡可能的去補充設(shè)計背景。


在這里,交互設(shè)計師產(chǎn)出的交互說明文檔就是能夠幫助設(shè)計師與開發(fā)有一個更好的溝通,所以能力較強的交互設(shè)計或者視覺設(shè)計都能夠把自己想表達的信息表達的很清楚。


再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經(jīng)常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風(fēng)格?用戶:“什么是風(fēng)格?”


所以交互設(shè)計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




3.交互語言的淺見


我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結(jié)構(gòu)在不同的語境中所組成的復(fù)雜系統(tǒng)。不同的種族有不同的語言,不同的專業(yè)有不同的語言例如在圍棋中有長、立、并、空、頂?shù)鹊?,例如在模型手辦中有分線、滲線、勾線、補土等,這也都是在特頂專業(yè)領(lǐng)域中的一些術(shù)語,但這些并不是語言,只是在某個領(lǐng)域中大家總結(jié)出來便于溝通的文字符號。


所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規(guī)范,而并不是語言。語言擁有更強的普適性和通用性。


那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設(shè)計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進行狀態(tài)的變化和所進行的任務(wù)跳轉(zhuǎn)。



這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態(tài)的,比如點擊之后的跳轉(zhuǎn)頁面,另外他也可以具備產(chǎn)品賦予的自定義屬性,例如底部滑出picker。




還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數(shù)也可能是實數(shù),但是在交互設(shè)計中,我們?nèi)绾伪硎军c擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






那我們發(fā)現(xiàn)如果把交互設(shè)計能夠做成類似于語言的系統(tǒng)是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設(shè)計師,在產(chǎn)品團隊中大家都能夠有一套共性的交互語言系統(tǒng),無疑是一件非常提高效率的事。但是目前的很多交互規(guī)范的文檔中,大多都是多種元素的拼合,給出常用的、可復(fù)用的控件、組件,但是大家依然還是無法從語言角度去創(chuàng)新,這就導(dǎo)致了很難會有新的、有用的交互形式的出現(xiàn),比如很多搜索控件都是承載在頂部導(dǎo)航欄中,那么在做規(guī)范的時候也只能在這個組件上去微調(diào),殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規(guī)規(guī)范形式就能和很多產(chǎn)品區(qū)分開來了,當然要視產(chǎn)品形態(tài)不同。



4.業(yè)務(wù)背景與交互形態(tài)


4.1不同業(yè)務(wù)背景下的信息組織


市面上有許多的新零售電商產(chǎn)品,頁面中的信息流也是大同小異,但是無論是交互還是產(chǎn)品在做設(shè)計師必須要考慮的就是產(chǎn)品定位與當前狀態(tài)。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據(jù)算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復(fù)的商品。所以使用雙列布局的方法并不合適。





所以這樣的產(chǎn)品首屏策略就顯得非常關(guān)鍵。我們可以看到常規(guī)的電商產(chǎn)品中,首屏基本上都是呈現(xiàn)這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區(qū)這樣的布局,從基本上能夠滿足一個大量sku電商產(chǎn)品的所有需求,但是如果用戶定位和產(chǎn)品本身的基礎(chǔ)無法支撐起這樣的場景又該如何去做首屏策略呢?


從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現(xiàn)更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





4.2營銷工具化


通過交互手段我們也可以給運營工具更加靈活化打基礎(chǔ)。例如我們經(jīng)??吹降臓I銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現(xiàn)。


4.2.1更加靈活的控制方式




4.2.2多樣的營銷結(jié)構(gòu)



最后總結(jié)一下,我認為交互設(shè)計也包含了視覺,所以我們在決定用什么樣的設(shè)計形式之前需要考慮更多,入業(yè)務(wù)、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規(guī)范去搭建界面更加有效。






二、為什么UI配色那么難


不管是做UI設(shè)計還是畫插畫,有很多同學(xué)覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結(jié)的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復(fù)講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產(chǎn)品設(shè)計中使用的。



1.人類對色彩感知的原理


大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內(nèi)存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內(nèi)還有3種對不同頻率光敏感的細胞。我們經(jīng)常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環(huán)境中使用的多。


視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調(diào)那這個交通事故可能要發(fā)生的頻繁的多。



1.1人對色彩邊緣的對比更加敏感


我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學(xué)看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學(xué)可以自己在工具中嘗試一下。




但如果你把這個色塊拿出來后,不在這個環(huán)境中直接進行邊緣對比,那就不會出現(xiàn)漸變的情況了。那光說原理,我們也來看一下在產(chǎn)品設(shè)計中需要注意的地方,因為在UI界面設(shè)計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設(shè)計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導(dǎo)致信息的不聚焦。





還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產(chǎn)生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們?nèi)プ⒁饣蛘呖杀稽c擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





2.色彩在UI設(shè)計中的作用


1.加深品牌印象與品牌感


一般來說,產(chǎn)品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產(chǎn)品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫姟⒂腥?、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產(chǎn)品進行通用。例如之前的嚴選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風(fēng)格對比起來太強烈,引起不適。





而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



2.引導(dǎo)用戶視覺凹增加易讀性


我們在上一篇十萬個為什么文章里提到了人們?nèi)绾伍喿x信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導(dǎo)用戶和吸引用戶注意的地方才會使用色彩。例如下方產(chǎn)品,使用了高亮色來引導(dǎo)用戶視覺。







當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區(qū)分層級。


3.區(qū)分信息交互的狀態(tài)


同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現(xiàn),但不具備交互的特征和狀態(tài)。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


所以不是所有的元素都要賦予顏色,這樣會使整個頁面非常混亂





另外,UI設(shè)計中主色除了引導(dǎo)用戶的作用外,也可以表示當前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態(tài)。





4.營造氛圍傳遞熱度


色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產(chǎn)品往往會在界面氛圍的營造中運用一些手段。例如導(dǎo)航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區(qū)域都會用品牌色在活動時段內(nèi)進行氛圍打造





3.在UI設(shè)計中色彩運用的坑與技巧


1.色彩的正反兩面

在色彩的心理學(xué)上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





然而其實很多的產(chǎn)品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規(guī)人之中,咖啡應(yīng)該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質(zhì)沒什么關(guān)系的顏色





在瑞幸剛出來的時候,很多人其實不太習(xí)慣把這個藍色和咖啡結(jié)合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調(diào),“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調(diào)同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





2.顏色的禁忌用法

但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


1.高飽和度的色彩

會讓人產(chǎn)生“幻覺”!讓人產(chǎn)生視覺疲勞,例如我將餓了么這個界面的色調(diào)調(diào)整一下大家看一下,不亮瞎算我輸。




2.灰部使用過多的配色

為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




3.沒有規(guī)律且過多的配色

讓界面或者插畫看起來非常混亂。一般來說顏色的使用也需要有側(cè)重點,所以我們常用的方法是6、3、1的色彩配比。





4.熒光色

熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





5.太輕柔的顏色

在很多dribbble的飛機稿中,經(jīng)常能看到這樣的配色和練習(xí)。無論是在練習(xí)中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





6.現(xiàn)在很火的新擬物化設(shè)計

說真的,這樣的風(fēng)格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結(jié)合感覺就是得了“白內(nèi)障”。另外我們常說的一點就是所有元素都強調(diào)就等于什么都沒有強調(diào),這樣的風(fēng)格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設(shè)計:“設(shè)計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風(fēng)格的目的。




7.不要將對抗色重疊

例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





4.正確的UI配色方法


定義主色


首先我們必須要說,色彩肯定是需要結(jié)合產(chǎn)品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結(jié),我們發(fā)現(xiàn)大部分的產(chǎn)品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

 




在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






定義中性色


其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。





文章來源:站酷  作者:應(yīng)駿

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



如何講述你的設(shè)計

ui設(shè)計分享達人


在工作中常常被問到如何表達講述自己的設(shè)計,為了讓自己的設(shè)計有理可依,對接上下游匯報工作的時候,總結(jié)以下一些方法和觀點,幫助不知從何講述自己設(shè)計的人一些語言技巧。  

以下僅是個人觀點,用作探討交流,文中所有舉例均為本人工作設(shè)計輸出。

設(shè)計師能做出好的設(shè)計,卻缺乏系統(tǒng)化的語言包裝,“如何講設(shè)計”不該讓它成為難題,做一個有產(chǎn)品思維的設(shè)計師,讓你的設(shè)計以理服人,我們要不止停留在視覺表層,更要從多緯度看待產(chǎn)品設(shè)計,本文將從以下三點簡述:01.產(chǎn)品設(shè)計的五個層面,02.講述設(shè)計的流程,03.關(guān)于本次總結(jié)

做好產(chǎn)品設(shè)計的第一步,是了解產(chǎn)品, 要對于產(chǎn)品的需求如何確定、產(chǎn)品定位如何決定有一個基本的認識,在產(chǎn)品常識里面最重要也最常用的就是產(chǎn)品設(shè)計的五個層面,也簡稱用戶體驗五要素——

作為UI設(shè)計師,所處的視覺設(shè)計是表現(xiàn)層,是確定產(chǎn)品的最終形態(tài),因此也處于產(chǎn)品設(shè)計的頂層(能被看到),是一個具象畫的呈現(xiàn);其次,往里推框架層,是確定產(chǎn)品外觀,將界面信息和導(dǎo)航設(shè)計有序歸類,讓用戶使用或者理解;結(jié)構(gòu)層是為用戶設(shè)計一個結(jié)構(gòu)化的體驗,將零散的元素轉(zhuǎn)化為有序立體的空間;范圍層確定產(chǎn)品的功能和需求;最后戰(zhàn)略層是確定產(chǎn)品目標和用戶需求;底層邏輯結(jié)構(gòu)決定上層意識形態(tài)表現(xiàn),因此在設(shè)計前我們要知道產(chǎn)品是屬于洞察階段,設(shè)計中是屬于產(chǎn)品設(shè)計解決方案階段,整體的產(chǎn)品設(shè)計是一個概念通過無數(shù)個層面的努力,經(jīng)過時間,轉(zhuǎn)化為具象表現(xiàn)的過程,所以我們在完成一項設(shè)計時,應(yīng)該講述一個完整的設(shè)計思路 ,不要讓自己的設(shè)計思路僅停留在表面。

整個產(chǎn)品的設(shè)計產(chǎn)出是一個抽象到具象化的過程,設(shè)計的前期屬于產(chǎn)品洞察階段,這個時候一般由團隊的老板領(lǐng)導(dǎo)結(jié)合當下市場需要,有用戶的需求就有商機,想出產(chǎn)品大致的方向(戰(zhàn)略層)然后通過產(chǎn)品經(jīng)理整合梳理高層的意見確定產(chǎn)品大致的功能和內(nèi)容輸出原型(范圍層),交給交互設(shè)計師優(yōu)化產(chǎn)品細節(jié)邏輯和信息具體框架,經(jīng)過研發(fā)評估能夠技術(shù)實現(xiàn)產(chǎn)出交互稿(結(jié)構(gòu)、框架層),這里已經(jīng)過渡到設(shè)計解決問題執(zhí)行階段,最后是給到界面設(shè)計師美化視覺產(chǎn)出高保真(表現(xiàn)層)。

也就是到我們自己設(shè)計輸出之前要經(jīng)歷這么多,如果能在講述自己設(shè)計的時候,提前去了解這些,那么設(shè)計內(nèi)容就不愁沒法兒講,光是闡述自己的設(shè)計思路就可以講出一個故事,這也是為什么現(xiàn)在很多品牌賣貨都開始營銷產(chǎn)品背后的故事由來。我們設(shè)計能做好,也要會用語言推銷自己的設(shè)計成果。

設(shè)計是對于某件事精心準備的過程。好的設(shè)計作品,應(yīng)該擁有完整的設(shè)計流程,因此我們在講述自己設(shè)計作品的時候,有一套完整系統(tǒng)化的方式是非常有效的。完整的設(shè)計流程包含以下4個步驟:

第一是我們需要去了解設(shè)計的需求背景,知道大概的方向—— 

  1. 來源(簡單理解就是誰提出的問題)需求有可能是你的老板、你的產(chǎn)品經(jīng)理、或者交互設(shè)計、或者視覺上的問題··· 

  2. 背景(籠統(tǒng)一點,就是這個需求是新需求還是原來有然后進行改版優(yōu)化)需求的基層性質(zhì)是什么,原本調(diào)性是什么,我們要做什么樣的產(chǎn)品··· 

  3. 目標(目標一般都是需要解決什么問題)搞清楚為什么做這個需求,能解決什么痛點,不做無用功。

誰提出的問題,是新的需求還是舊的問題,或者我們要解決什么?圍繞這幾個方向?qū)⒛愕脑O(shè)計概述出來,會讓非專業(yè)的人也能聽懂你做了什么,舉個簡單的例子,我們公司后臺一個很小的產(chǎn)品bug需求,往往這種需求就是產(chǎn)品經(jīng)理的一個截圖和他標注的兩句話——

然后你完成了這個需求單,在傳達給非產(chǎn)品經(jīng)理以外的人的時候,你有可能是以下轉(zhuǎn)述方式——

毫無疑問,你就是將需求者的意思一字不落的轉(zhuǎn)達了,但是對于其他的聽者來說,你的轉(zhuǎn)述平平無奇、毫無意義,甚至都沒有印象你做了什么,所以你應(yīng)該講清楚這個需求的背景—— 

設(shè)計需求來源是誰,原本屬于產(chǎn)品哪個模塊(來源),他原來功能是怎么樣的,界面上展示的結(jié)構(gòu)哪里有問題(背景),視覺用了什么樣的方式改成什么樣,解決了什么痛點(目標)

講清楚誰給的需求,需要解決什么問題,是在原來的基礎(chǔ)上不變動邏輯的情況下增加了什么達到了什么目的,才讓你的敘述更完整,聽起來更有邏輯。如果是一項新的需求,沒有背景,那還得從設(shè)計分析說起,設(shè)計分析就是讓你更專業(yè)的去做事,設(shè)計分析分為——用戶分析,設(shè)計目標,和設(shè)計手段三個要點:

首先用戶分析就是,分析你做的東西給誰看,而用戶又分為群體用戶和獨立用戶,在c端常見的就是獨立用戶,他們通常不定性,且有很多特征;在b端,目標用戶一般是群體,他們大多數(shù)是有場景特性和行業(yè)特性,針對獨立用戶和群體用戶,我們得出的用戶特征、基本信息、需求結(jié)論也是不一致的,所以我們應(yīng)該結(jié)合產(chǎn)品的調(diào)性分析一下我們做出來的設(shè)計究竟給誰看給誰用。常見的用戶分析方法有:用戶畫像、用戶訪談、問卷調(diào)查、焦點小組、眼動測試、用戶反饋以及大數(shù)據(jù)分析,這些方法中最簡單的是用戶畫像,就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數(shù)據(jù)分析和用戶反饋,這兩種方式通過對接需求的上下游就可以得知。

通過用戶分析得出需求結(jié)論,滿足需求就能達成設(shè)計目標——

設(shè)計目標結(jié)合卡諾模型來分析,卡諾模型—反應(yīng)產(chǎn)品性能和解決用戶需求的滿意度的一種非線性關(guān)系,具體想了解的可以自行百度,站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 :1.必備屬性:滿足這個需求,用戶滿意度不會上升,但不滿足這個需求,用戶不滿意會大幅度降低 ;2.期望屬性:提供個性化需求,用戶滿意度會上升,不提供此需求,用戶滿意度會降低; 3.魅力屬性:用戶意想不到的效果,提供此屬性,用戶滿意度大幅提升,不提供也不會降低 ;4.無差異:無論提不提供,用戶滿意度都不會改變,根本不在意;因此在做需求的時候我們應(yīng)該盡力滿足基本需求和期望需求,而可有可無的需求盡量不去做,降低效率。幸福需求是不容易達到的,如果能滿足是非常棒的~這里就像是滿足了設(shè)計心理學(xué)的三個層次——本能、行為、反思。

接下來是大家都熟知的設(shè)計手段,適當?shù)闹v一些述專業(yè)的設(shè)計技法,用不同的手段去實現(xiàn)的主畫面,最后達到完成設(shè)計目標這樣的結(jié)果,會讓你顯得更專業(yè)。設(shè)計的手段有很多種,這里主要講述常用的三種,構(gòu)圖排版(采用什么構(gòu)圖方式,為什么這樣構(gòu)圖是因為什么設(shè)計原則)、色彩運用(為什么使用這個顏色,因為這個顏色給人的心里感知是什么樣的)、設(shè)計風(fēng)格(采用什么風(fēng)格最貼近產(chǎn)品調(diào)性,為什么用這個風(fēng)格),但是講設(shè)計時一定要記住產(chǎn)品的調(diào)性,不能偏離產(chǎn)品本身,不要盲目套用絢麗的技法,否則是不合適的。

很多時候面對非專業(yè)需求方收稿時,可能看到如下話語———— 

(心里是不是xxxx····“萬馬奔騰”,用個文明點的詞)

非專業(yè)人士無法理解這二者的區(qū)別,他們認為他們的設(shè)計手段能達成設(shè)計目標,而作為專業(yè)設(shè)計師的我們就應(yīng)該引導(dǎo)對方說出設(shè)計目標,再用我們專業(yè)的手段去滿足對方的目標,去實現(xiàn)減少改稿次數(shù),而不是讓非專業(yè)人士去指導(dǎo)專業(yè)人士修改設(shè)計手段。分清這兩者的區(qū)別,我們就可以在設(shè)計引導(dǎo)中更加主動。用設(shè)計分析的方法來講述設(shè)計,舉個例子——

會議管理——會議預(yù)約移動端優(yōu)化,因為這是我們原有產(chǎn)品EKP里面的模塊,PC端和移動端都有,因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像,得出他們的一些需求結(jié)論,然后目前幸福需求是沒有的,純屬個人建議,日后如果有此功能,想必用戶的滿意程度也會大大提升。

概括一下已完成的整體主要頁面,分析設(shè)計目標: 

頭部屬于流量量較高的區(qū)域,采用卡片式設(shè)計,將會議內(nèi)容置于此處,作為頁面信息關(guān)鍵層,采用左對齊方式排版,突出會議標題和時間提醒用戶。

通過不同的顏色標簽,區(qū)分參會人員狀態(tài)—— 

待進行未有操作反饋,選用橙色,屬于可以持續(xù)進行并有明顯提醒作用 

已做反饋屬于成功操作,選用已有用戶認知心理的綠色 

已知信息拒絕參與,是不太重要的,屬于不再進行的階段,選用灰色

  

接下來是設(shè)計作品的產(chǎn)出過程,一般情況下不可見的過程,為什么要去講,  因為一個東西從無到有是很不容易的一件事,如果能講述過程,就可以引燃情緒共鳴,讓別人記住,讓自己的設(shè)計作品也能有始有終—— 

設(shè)計過程一般分為四個階段:初期階段、中期階段、最終定稿;具體的關(guān)鍵詞和描述可以通過以下方式提煉出來,這里就不做詳細說明了。

 

拿運營宣傳來舉個例子,我們公司中秋節(jié)月餅禮盒包裝主視覺設(shè)計——整個過程應(yīng)該是有一個系統(tǒng)化的說明的,省略為寫字的地方是我們可以插入的具體圖片和過程,步驟差不多就是上述這些,可以有最初階段的頭腦風(fēng)暴-提取關(guān)鍵詞-清晰定位到中期階段的團隊合作—風(fēng)格擬定-精選方案-細節(jié)刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優(yōu)化…主畫面的誕生是不容易的,強化這種過程參與,讓不被看見的事也能展現(xiàn)。如果實在不好記錄,你可以從一開始就截圖你繪制的過程——

上圖是用PS截圖,再用時間軸將每一幀動態(tài)循壞播放,導(dǎo)出GIF然后截一張不變的底圖合成就可以了。

最后是數(shù)據(jù)驗證階段,這個是設(shè)計落地的直觀證實,包含主觀認可和客觀數(shù)據(jù),具體內(nèi)容就是通過用戶或者專業(yè)的人士反饋給你設(shè)計落地的好壞,來判定你做的是否優(yōu)秀成功。通常這一塊的數(shù)據(jù)決定你驗證你前面所有的過程,只要按照該流程認真做了,最后效果通常不會太差,如果出現(xiàn)很大的偏差也往往是意料之外的,因該尋求團隊一起解決,不是某一個人的問題。

根據(jù)以上最后我們總結(jié),好的設(shè)計就是滿足以下4個方面:好看,好用,好記,能實現(xiàn)。設(shè)計師要考慮的維度不僅僅在視覺層面,什么是有產(chǎn)品思維的設(shè)計師,就是在執(zhí)行時候要考慮上下游不同職能的工作內(nèi)容,如果你的設(shè)計不能實現(xiàn),再好看也是白費功夫的~從產(chǎn)品交互視覺多層面談設(shè)計,會讓你的設(shè)計包裝顯得不那么單調(diào),系統(tǒng)化的方法總結(jié)到此,不足之處多多包含~謝謝你的閱讀!

文章來源:站酷  作者:YiVi_eleven

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


如何給設(shè)計師有意義的反饋

ui設(shè)計分享達人

盡管在工作中對于設(shè)計方案提出建設(shè)性和針對性的評價確實是非常難的,但不得不說,這一項技能對于每一位設(shè)計師,乃至每一位與設(shè)計師配合的職場人,都是非常重要的。


「只要我們付出了百分百的努力,最終結(jié)果一定會比第一版的設(shè)計要好。工作中,以專業(yè)的手段直接面對要解決的問題,切莫把過多的個人情緒帶到工作中去,就像馬東老師的米未傳媒貼在墻上的標語:“有話直說是一種能力,也是一種責(zé)任?!?



從業(yè)這么多年,合作過的產(chǎn)品、運營、市場、研發(fā)、測試形形色色,但是對于設(shè)計師專業(yè)度的評價,每個人都不一樣,進行綜合分析,我認為,最核心就是一下3點:


「但這里我要說的是,你自己必須做到足夠?qū)I(yè),以下的這些是基于你給出的設(shè)計方案確實是經(jīng)過認真思考后的,否則被業(yè)務(wù)方懟了也是活該。」


PART 01

理解設(shè)計背景

聚焦核心業(yè)務(wù)問題


在進行設(shè)計評價時,不要單純的只是描述”我覺得…“、”我喜歡…“或者”我不喜歡…“,這無法真正解決問題,相信很多設(shè)計師也比較反感這樣的評價。


我們需要深挖的是:

1、你對業(yè)務(wù)目標了解嗎?該業(yè)務(wù)是用什么樣的策略給目標用戶帶來什么價值,以及是如何實現(xiàn)盈利的?

2、你對設(shè)計目標清晰嗎?設(shè)計師是通過何種設(shè)計策略來給用戶帶來價值從何實現(xiàn)業(yè)務(wù)目標的?

3、你有全局觀嗎?就是這樣的設(shè)計方案是否是在現(xiàn)有的技術(shù)限制、用戶認知約束、時間周期等等諸多條件下得到的結(jié)果?


如果沒有以上,非設(shè)計師的朋友們直接指點界面顏色不好看,排版不合理,不夠高大上等諸多評論,其實是很不負責(zé)任的。希望大家不要做坐在設(shè)計師背后指點江山的神。



PART 02

學(xué)會正確的提問

比提出問題更重要


提問有助于設(shè)計師和業(yè)務(wù)方更好的溝通和信息傳遞,但在提問中不要夾雜感性的評價,而多用理性的思考。比如不要指著某個東西說”這個按鈕太大了“,而要問”你為什么選擇這個尺寸的按鈕?“通過這種方式,你可以得到更多的背景和每個設(shè)計細節(jié)背后的原因,并感受到設(shè)計師是專業(yè)的,而不是一拍腦門的。


說服心理學(xué)中有一條鐵的定律就是:”沒有人喜歡被改變“。當你對我的設(shè)計指指點點的時候就證明我可能錯了,為了捍衛(wèi)我的設(shè)計我會非理性的做出防御性的對抗,感性的情緒表達只會讓雙方彼此矛盾升級,理性的表達和提問會讓人更愿意交流。


所以,學(xué)會提問,比提出問題更重要。


PART 03

使反饋清晰明確

避免主觀性


評價者的品味對于設(shè)計方案來說并不重要,也不應(yīng)該成為討論的重點,就像我上面說的”我覺得…“,此時你可以發(fā)出黃曉明的動圖:”我不要你覺得,我要我覺得…“


不要發(fā)表“我只是個人不喜歡,最終還是看你們設(shè)計師的”這樣的評論,說實話我每次聽到這樣的話都很火大,你都沒想清楚這樣不合適的理由,你跟我說什么?難道只是為了反對而反對嗎?


下次如果遇到講廢話的需求方,可以直接回復(fù):如果你不能推薦一種更好或不同的設(shè)計方案,那就別說了,不要浪費彼此的時間。


另外就是,建議必須清晰明確且可行,如果讓設(shè)計師誤解了你的意思,那可能比你什么都不說更嚴重,因為事態(tài)可能會朝著完全相反的方向發(fā)展,因此詳細的闡明論點,也是一種職場溝通的能力。



PART 04

給設(shè)計師的建議


收到反饋后,首先,我們要分清哪些反饋對我們有用,哪些其實只是表達者的主觀感受,把有用的吸納進來,并做好筆記,先自我情緒冷靜下來,不要急于去修改調(diào)整設(shè)計方案,多多思考流程和鏈路的問題。


很多設(shè)計師可能是出于多年的工作習(xí)慣,喜歡將別人的評論(尤其是有經(jīng)驗的設(shè)計或者領(lǐng)導(dǎo))視為行動指南,在沒有經(jīng)過仔細思考的情況下采取和實施他們的想法,這很容易把自己變成一個提線木偶,久而久之徹底失去了設(shè)計師原本該有的創(chuàng)造力和反思能力。


設(shè)計是在美學(xué)與功能、解決用戶問題與業(yè)務(wù)之間平衡的探索,設(shè)計師的方案也是在用戶、公司也利益之間尋求平衡,沒有一個永遠正確的決定。每個人都會犯錯誤,每個人可能都有其背后的一番道理,無非是看問題的角度不一樣而已,不要糾結(jié)于某一個細節(jié),也不要執(zhí)著于某一種特定的方案。


提升自己思考問題的視野和維度,知道如何拒絕毫無意義的反饋和評價,當你從界面細節(jié)跳脫出來看問題時,離一名真正的專業(yè)設(shè)計師就不遠了。

文章來源:站酷  作者:設(shè)計情報局

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



設(shè)計原則的實踐與深化

ui設(shè)計分享達人

“作為用戶體驗設(shè)計師,我們的使命之一就是如何以最正確,最有效的方式將產(chǎn)品意圖傳遞給用戶?!边@也是行業(yè)中大家的共識,關(guān)于設(shè)計原則也有很多,今天想給大家介紹的是 Don Norman  在《日常事物的設(shè)計》中提到的七項基本設(shè)計原則,我們將套理論付諸實踐,然后通過測試,驗證和迭代來提升設(shè)計體驗。



PART 01

哪七項設(shè)計原則?


諾曼(Norman)的七項基本設(shè)計原則可以幫助確定一系列問題的答案,這些問題從目標開始,然后通過將結(jié)果與預(yù)期進行比較后結(jié)束。這七項基本原則是:發(fā)現(xiàn)、反饋、概念模型、示能、意符、圖示、約束條件。接下來我們將從一個實際問題出發(fā),來談?wù)勔韵略O(shè)計原則改如何運用。


1、找到目標:“我想要實現(xiàn)什么?”


我們的第一個問題是目標—我們實現(xiàn)目標的動力。舉個例子來說:


「目標:“我們需要找到一雙新的,合腳的,確定顏色和尺寸的跑鞋。」


下一階段是計劃如何通過發(fā)現(xiàn)和評估我們的選擇來實現(xiàn)我們的目標。


2、確定計劃:“我該怎么做?”


假設(shè)我們選擇了耐克網(wǎng)站作為首選購物平臺。當我們初次進入網(wǎng)站,我們會看到很多不同的選項。


「發(fā)現(xiàn)模塊」提升了選項的可見性。清晰的導(dǎo)航,突出的焦點自然的視覺層次使其更容易發(fā)現(xiàn)和理解。


清晰的導(dǎo)航有助于我們輕松找到并了解網(wǎng)站的主要產(chǎn)品。但是,移動端的體驗實際體驗效果并不佳,因為漢堡導(dǎo)航很容易將信息遮蓋。

 

耐克網(wǎng)站的產(chǎn)品詳細信息頁面通過清晰的導(dǎo)航,突出的焦點和自然的視覺層次結(jié)構(gòu)選項更容易被識別。不過,您可能會爭辯說,這些復(fù)雜的信息干擾到 “添加到購物袋”的這一關(guān)鍵行為。


焦點是吸引人視覺的主要區(qū)域,其中包括引人入勝的圖像和視頻,描述性標題以及清晰的號召性用語,例如“了解更多”和“添加到購物袋”。


以上所有組件均作為視覺層次結(jié)構(gòu)的一部分進行排列,以幫助我們按照接收到的重要信息的順序進行瀏覽。它們的位置也符合最佳的閱讀模式——例如,導(dǎo)航欄,過濾器控件和跑鞋結(jié)果分別組織在類別頁面的頂部,左側(cè)和右側(cè)。


其他設(shè)計原則(包括概念模型,示能,意符,映射和約束)也可以幫助我們弄清楚如何使用該網(wǎng)站。


許多網(wǎng)站功能中都存在概念模型,尤其是用于對結(jié)果進行排序和過濾的導(dǎo)航和控件。這些熟悉的設(shè)計模式告訴我們它是如何使用的。例如,我們知道通過過濾器將有助于優(yōu)化篩選結(jié)果。


功能可供性應(yīng)用于各種網(wǎng)站組件,例如按鈕,選擇框和手風(fēng)琴導(dǎo)航,使我們可以了解如何控制和使用它們。但是,某些能力依賴于意符來闡明預(yù)期的操作。


意符被廣泛用于傳達應(yīng)在何處執(zhí)行操作,尤其是示能較弱的扁平化按鈕。一個簡單的描述(例如“查看更多”或“添加到購物袋”)足以告訴我們預(yù)期的操作。




映射向我們顯示了對象之間存在關(guān)系的位置,例如產(chǎn)品詳細信息頁面上,當我們選擇適合的款式和顏色的選項時,我們會看到可用的尺寸和價格會與之對應(yīng)產(chǎn)生變化。


約束限制了可以使用信息的位置,地點和時間,以減少雜亂并降低認知負擔(dān)。例如,導(dǎo)航最初僅向我們一級導(dǎo)航。


3、確定:“我有哪些選擇?”


購買工具為我們提供了可能選擇的選項序列的概念模型。禁用狀態(tài)還用于將我們的操作限制在只能選擇有庫存的商品的范圍內(nèi)。



了解了如何使用網(wǎng)站后,現(xiàn)在我們可以指定要執(zhí)行的一系列操作。讓我們在網(wǎng)站上繼續(xù)進行以下活動:


「行動:購買時需選擇產(chǎn)品規(guī)格,包括合身性,顏色,尺寸,然后將其添加至購物籃?!?/strong>


概念模型、可發(fā)現(xiàn)性、映射、約束、示能和意符可以幫助我們確定操作順序:選擇合適的→選擇顏色→選擇尺寸→選擇添加到購物袋。


在某些情況下,某些選項(例如大小和顏色)可能缺貨。如果產(chǎn)品不可用,則禁用按鈕狀表達了操作行為的限制,只能選擇有庫存的商品,這是非常必要的。


4、執(zhí)行:“我現(xiàn)在可以做什么?”


不同的控件交流其功能,用法以及如何向我們展示其效果


現(xiàn)在,我們需要實際執(zhí)行我們選擇的一系列動作。示能,意符和映射將幫助我們執(zhí)行操作。例如,按鈕的感知外觀使我們想要按下按鈕,標簽告訴我們控件的功能,而映射使我們能夠看到剛剛操作的效果。


5、感知:“發(fā)生了什么事?”


一個簡單的確認消息會通知用戶發(fā)生了什么,并提供一些其他選項的可見性


一旦執(zhí)行了選擇的一系列動作,我們就需要收到有關(guān)請求的信息,這就是反饋。

購物車確認消息為我們提供了有關(guān)所選跑鞋的有用反饋信息,包括名稱,顏色,尺寸,價格和數(shù)量。同樣還提供了成功的信息和一些其他選項。


6、解釋:“這是什么意思?”


看到這些變化之后,我們現(xiàn)在需要將其轉(zhuǎn)化為有意義的東西。反饋對于再一次為我們提供足夠的信息來確定我們的行動結(jié)果至關(guān)重要。成功信息——“已添加到購物袋”和綠色的勾號圖標說明發(fā)生了什么,其他選項表示我們現(xiàn)在已選擇購買這雙跑步鞋。


7、比較:“這樣可以嗎?我實現(xiàn)了目標嗎?”


每個粉絲都希望看到的確認消息–真是令人高興的時刻!


最后一個問題詢問了結(jié)果是否符合我們的期望。我們可以將結(jié)果與目標進行比較


到目前為止,我們已經(jīng)使用了所有七個設(shè)計原則來確定問題的答案。現(xiàn)在,反饋將能夠確認我們的行為是否帶來了成功的結(jié)果。如果結(jié)果不是我們期望的,那么我們至少需要了解發(fā)生了什么以及下一步該怎么做。


反饋可以誘發(fā)積極和消極的情緒。如果結(jié)果不是我們所期望的(例如錯誤),則它們可能會引起混亂甚至憤怒的感覺。但是,當我們實際執(zhí)行的動作可以實現(xiàn)我們的目標時,我們將感到非常喜悅!


例如,在耐克移動應(yīng)用程序 SNEAKRS 中,客戶可以參加抽獎來購買限量版鞋。緊張的 30 分鐘倒計時結(jié)束后,獲勝者會收到一條特別的消息,確認他們的抽獎結(jié)果,這為他們的經(jīng)歷增添了很多樂趣。


「結(jié)果:看到此消息給我?guī)砹苏嬲钊藵M意的體驗——幸運的贏家?!?/strong>



PART 02

通過用戶測試超越設(shè)計原則


應(yīng)用設(shè)計原則進行 UX 設(shè)計是非常表層的。當人們在使用該產(chǎn)品時,我們需要了解他們的想法,感受和看法。他們可以使用嗎?他們覺得有用嗎?他們會再次使用它嗎?

比設(shè)計原則更重要的是與真實用戶進行測試,以了解他們對設(shè)計的行為和態(tài)度。然后,可以利用豐富的用戶見解來改進產(chǎn)品。


如何測試您的產(chǎn)品

我們?nèi)裟軌蛟皆缜以筋l繁的測試我們的想法,就能夠越早的迭代產(chǎn)品,以更快的速度滿足用戶需求以及幫助實現(xiàn)業(yè)務(wù)目標。以下是一些流行的研究方法的概述:


遠程用戶測試是非??焖倥c靈活的,并且非常適合于早期經(jīng)常需要設(shè)計驗證的情況。參與者使用屏幕錄制軟件收集有關(guān)設(shè)計的反饋。遠程用戶測試為獲得更多的洞見提供了便利。


面對面用戶測試,就是我們常說的線下用戶訪談,這種測試要適量,通常會有一個主持人。在研究期間,主持人可能會根據(jù)問題提出任務(wù)或新的活動。這種類型的研究比較花費精力和時間,但與大多數(shù)方法相比,它可以為您提供更有價值的見解。


游擊隊測試是指調(diào)研團隊無拘無束地采訪隨機人群。您可以選擇某些地點來確定適合您所測試設(shè)計的受眾特征。迄今為止,這種研究方法是比較節(jié)省成本的,盡管您可能需要考慮向參與者提供少量獎勵,以感謝他們的時間和努力。


定量測試涉及對大量用戶進行研究。典型的測試包括卡片排序,樹形測試,點擊測試和超時測試。這些研究可能無法為您提供用戶做出某些決定的原因的答案,但是它們可以幫助確定點擊次數(shù),思維模型和完成任務(wù)比率的時間。



PART 03

分析與迭代


一旦用戶測試有了結(jié)果,就可以對結(jié)果進行了。這可能需要一個漫長的過程,即整合意見,將見解歸類并提出新的改進建議。


研究建議可以幫助確定要解決的可用性問題要關(guān)注的痛點,以及增強整體用戶體驗的機會。這就是 UX 流程的迭代。使用相同的原理進行設(shè)計優(yōu)化,然后進行測試,直到產(chǎn)品滿足用戶需求為止。


諾曼的原則可以幫助我們加深對用戶交互的理解,包括人們提出的問題類型、他們的認知過程以及情感水平。如耐克網(wǎng)站的案例研究所示,這七個基本設(shè)計原則可以幫助我們確定問題的答案,并找到影響積極情緒(如愉悅感)的方法。


但是,設(shè)計原則實際上只是UX過程的開始。為了確定產(chǎn)品的體驗質(zhì)量,我們需要與真實的用戶一起測試設(shè)計,然后使用洞察力進行必要的迭代。


以上內(nèi)容源于 Don Norman 的暢銷書《日常事物的設(shè)計》。它是 30 多年前編寫的,但至今仍然對設(shè)計行業(yè)有著深遠的影響。當然,還有更多的原則可以采用,但是 Norman 的設(shè)計哲學(xué)可以作為我們在設(shè)計工作中遵循的 UX 基礎(chǔ)。

文章來源:站酷  作者:設(shè)計情報局

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

情境分析法(SCQA)讓你用問卷發(fā)現(xiàn)更本質(zhì)的商業(yè)問題

ui設(shè)計分享達人

前言

 

在企業(yè)工作中,每一個問卷調(diào)研都始于一個商業(yè)問題,問卷的質(zhì)量也決定了最終結(jié)果是否能對業(yè)務(wù)起到幫助。本文將從定義問題-問卷設(shè)計-數(shù)據(jù)清洗與分析-報告撰寫這四個基本步驟相對完整地闡述企業(yè)問卷調(diào)研,希望可以給大家提供一些研究方法上的思路。



定義問題:情境分析法(SCQA)


在商業(yè)問題解決的過程中,既有公司內(nèi)部的因素,也有外部行業(yè)的因素,影響因素錯綜復(fù)雜;周圍的環(huán)境也比較容易發(fā)生變化,具有很大的不確定性;同時又要保證解決方法的可落地性,產(chǎn)生實際的價值。相對來說,會比較復(fù)雜。在進行問卷設(shè)計之前,更有必要的是將問題梳理清楚,再決定是否采用問卷這種方式。

 

1.1 結(jié)構(gòu)化思考:使用SCQA描述項目


SCQA是將不確定性考慮在內(nèi),一種結(jié)構(gòu)化的問題分析方法,可以比較好地系統(tǒng)思考、查漏補缺。它包含四個環(huán)節(jié):

  • 情境(Situation):由大家都熟悉的現(xiàn)狀或事實作為起點,包含對象、所處階段等

  • 沖突(Complication):實際情況往往和我們的目標有沖突,顛覆了穩(wěn)定的狀態(tài)。說出行動的原因,包含威脅、機會和等著我們?nèi)タ朔睦щy點

  • 問題(Question):基于沖突提出問題,要怎么解決這個困難點

  • 回答(Answer):我們的解決方案是什么,定位出需求點

 

undefined

 

1.2 如何洞悉情境和沖突:搞清楚為什么做調(diào)研


假設(shè)我們拿到上述案例作為調(diào)研項目,可以有兩種方式去進行洞悉情境和沖突

一是思考為什么要做這個研究;二是跟相關(guān)利益者訪談盡可能多地獲取信息。


1)思考為什么要做這個研究:

- 需要回答什么問題?

- 為什么回答這些問題很重要?

- 打算如何使用最終的調(diào)研結(jié)果?


2)跟相關(guān)利益者訪談:

- 核心業(yè)務(wù)方是誰?其他業(yè)務(wù)方是?

- 每個業(yè)務(wù)方的關(guān)注點是什么?難點是什么?

- 各個相關(guān)方的目標之間是否沖突,是什么沖突?

undefined

根據(jù)上述方法,可以得到對應(yīng)的情境和沖突:


情境:目前有三種產(chǎn)品方案A/B/C,分別對應(yīng)的價格為100元/1000元/10000元。通過上述思考和信息了解,會知道這個事情和誰有關(guān),在這個事件中承擔(dān)什么角色。


沖突:B的銷量不佳,跟其他方案差異不明顯,瞄準客群很有可能有重疊,未成交客戶難轉(zhuǎn)化,希望可以方案B進行調(diào)整。在用戶層,可能其他方案中的功能能滿足需求,不需要購買方案B;在公司層,整體收入結(jié)構(gòu)可以更優(yōu)化、健康;在業(yè)務(wù)層,系統(tǒng)和流程可能不太合理,有些可能需要重構(gòu)。


 

1.3 問題拆解其實是建立一個假說/邏輯樹的過程


我們可以將問題進行拆解,拆解應(yīng)遵循MECE原則(相互獨立且完全窮盡),這么做的好處是可以把問題進行逐層分解,逐級分析,最大可能保證需要考慮的因素全面不遺漏。

 

undefined

 

案例中的問題,可以從用戶方面、競品方面、成本/利潤方面進行拆解,針對每一個層面的問題又可以進行拆分。 

undefined

對問題進行細致拆分之后,針對每個問題有不同的解決方案,有一些問題可以用問卷來解決,有一些問題需要使用其他方式進行解答。

問卷并不能解答所有問題~~

 

undefined



問卷設(shè)計


2.1 問卷的用途:定量為主


一般通過問卷來進行大樣本的數(shù)據(jù)收集,主要以用戶的基礎(chǔ)數(shù)據(jù)、行為數(shù)據(jù)和態(tài)度數(shù)據(jù)為主,既可以作為獨立的調(diào)研項目,可以跟其他方式進行結(jié)合,比如說結(jié)合訪談、結(jié)合企業(yè)內(nèi)部的數(shù)據(jù),本文比較推薦的方式是多種方式結(jié)合進行交叉驗證,提升調(diào)研結(jié)果的可靠性。


undefined

 

 

2.2 問卷設(shè)計的原則

undefined

基于第一部分的定義問題階段,已經(jīng)對問題進行了分析,在此基礎(chǔ)之上,我們需要確定哪些問題可以由問卷進行解答,并明確問卷的研究目標與參與對象。特別地:利益相關(guān)方(項目組成員間)在項目前期應(yīng)該達成統(tǒng)一,避免后續(xù)產(chǎn)生分歧,付出額外的溝通成本不說,還有可能相互甩鍋。


undefined


2.3 問卷的基本結(jié)構(gòu)


一份問卷的基本結(jié)構(gòu)包含標題、招募語、甄別題、主問卷、用戶基本特征、結(jié)束語。


undefined


 

 

2.4有邏輯的設(shè)計問題


一份有效的問卷需要從如何提問、如何措辭、如何設(shè)置答題邏輯、如何設(shè)置題目選項這些方面去考慮,設(shè)置有效的問題。以下是問卷設(shè)計中的一些基本原則:

undefined

 

2.5 提升回復(fù)率的tips


undefined

 

  • 個性化:在說明信件/郵件或郵件開頭注明回復(fù)者的名字、研究活動的目的、所需時間。向回復(fù)者強調(diào)他們反饋信息的重要性。需要注意的是,這里出現(xiàn)信息錯誤,會降低回復(fù)率。

  • 控制篇幅:問卷完成時間不要超過10分鐘,注意控制問題數(shù)量,避免出現(xiàn)需要大量思考、較難回復(fù)的題型。

  • 用戶激勵:獎勵參與者油卡/現(xiàn)金紅包/優(yōu)惠券等,昂貴的激勵物沒有特別顯著提高回復(fù)率,所以小的激勵就可以。


 

數(shù)據(jù)清洗與分析


3.1 數(shù)據(jù)清洗原則

undefined


  • 剔除有效范圍外的數(shù)據(jù):排除異常作答時間值(比如作答時間為10秒),判斷為作答不認真??梢愿鶕?jù)題項來確定,一般10道題設(shè)置篩選出60秒之內(nèi)的問卷。

  • 剔除連續(xù)重復(fù)值:在時間范圍內(nèi),再核查問卷是否出現(xiàn)連續(xù)重復(fù)值,出現(xiàn)的問卷予以刪除。如果問卷數(shù)量較大,可以使用STATA軟件編碼或Excel條件函數(shù)判斷進行處理。

  • 剔除違背邏輯一致性的數(shù)據(jù):在時間范圍內(nèi),核查問卷是否存在前后邏輯不一致的題,比如總體滿意度打分為非常滿意,但后續(xù)題目都選擇了非常不滿意。

  • 剔除有缺失值的數(shù)據(jù):嚴格來說應(yīng)該將有缺失值的用戶予以刪除,但有時候回收樣本量沒有那么大,則可保留。


 

3.2 數(shù)據(jù)分析方法


數(shù)據(jù)分析方法有非常多,要在眾多的分析方法中選擇一種也是比較難的事,無論選擇什么樣高大上的方法都是其次,最重要的是選擇的分析方法能說明問題,能體現(xiàn)數(shù)據(jù)的價值。

比較分析是一個簡單的、比較通用的、易于理解的數(shù)據(jù)分析方法,可以分成趨勢分析、特征重要性、分組分析三種。

 

undefined


報告撰寫


最后,條理清晰地展現(xiàn)數(shù)據(jù)信息,表達你的觀點。報告寫作的過程是一個相對費勁的過程,特別是數(shù)據(jù)量多的情況下,總是覺得還有一些數(shù)據(jù)價值沒有被挖掘出來,但此時不要拘泥細節(jié),細節(jié)可以回頭再補,會大大提升效率。


4.1 問卷的報告框架


  • 報告主要發(fā)現(xiàn):將總結(jié)放在最前面,閱讀者可以通過簡短的總結(jié)大致了解報告觀點,方便他們決定是否需要繼續(xù)了解詳細內(nèi)容

  • 目錄和分目錄:報告包含的內(nèi)容組成部分,讓閱讀者對報告內(nèi)容有初步概覽

  • 調(diào)研背景和目的:陳述整個報告的背景和目的,對調(diào)研的范圍進行必要說明

  • 單頁-詳細內(nèi)容描述:有邏輯的描述項目的發(fā)現(xiàn),總結(jié)數(shù)據(jù)表現(xiàn),挖掘價值

 

單頁-詳細內(nèi)容描述示例:

undefined


問卷調(diào)研不止是問卷本身,還包括前期項目組溝通、項目成員分工與配合、后續(xù)結(jié)果推廣、結(jié)果推動落地等,前期做好項目組溝通、明確項目分工,建立一個清晰的運行機制,有利于項目組成員對結(jié)果的認同,后續(xù)也有清晰的路徑去分工解決問題。所以,每一個環(huán)節(jié)都體現(xiàn)工作的價值,都同樣重要。希望大家在關(guān)注研究方法提升的同時,也可以更多關(guān)注更多工作方法提升。

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

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


如何系統(tǒng)化的進行設(shè)計改版?

ui設(shè)計分享達人

項目背景


當公司的發(fā)展規(guī)模到一定程度時,考慮到信息安全、持續(xù)采購成本與相關(guān)風(fēng)險,企業(yè)會采取自研的方式來實現(xiàn)部分協(xié)同工作軟件的自產(chǎn)與自用,本文將以內(nèi)部目標管理系統(tǒng)為例,闡述我們是如何系統(tǒng)化的做企業(yè)系統(tǒng)設(shè)計改版?


什么是OKR?


OKR,是Objectives 和Key Results 的縮寫,即目標關(guān)鍵結(jié)果,它是企業(yè)進行目標制定和過程管理的重要手段??峒覙吠瑯硬扇KR的管理方法,將公司目標層層分解到團隊,部門再到個人,在各個層面貫穿和統(tǒng)一起來,以幫助實現(xiàn)目標達成。



改版的契機是什么?

改版不是設(shè)計說想改就能改,在做新的OKR系統(tǒng)之前,之前是通過「績效系統(tǒng)」來進行目標管理和績效評估,支持簡單的制定和結(jié)果的評估的使用,因系統(tǒng)操作流程、界面體驗、業(yè)務(wù)場景已經(jīng)嚴重的影響到目標管理的效率和效果,具體體現(xiàn)在幾個方面: 


  • 系統(tǒng)看不懂,新人的宣導(dǎo)成本高
  • 操作不流暢,從制定、提交、審核、修改到進度同步,員工使用起來不流暢
  • 誤操作成本高,不小心點錯導(dǎo)致信息的再次獲取和編輯成本高

總之,工具的體驗已經(jīng)是嚴重影響公司員工目標管理的一道障礙,所以如何將整體的系統(tǒng)操作體驗提升起來是設(shè)計急需去解決的問題。 

那么,確定有問題需要改,作為設(shè)計師,我們是如何去系統(tǒng)性的去為業(yè)務(wù)帶來更多的體系化的價值?
  • 理清業(yè)務(wù),制定策略
  • 理解用戶,溯源問題
  • 串聯(lián)場景,各個擊破
  • 方案設(shè)計,中途驗證
  • 落地追蹤,拿到結(jié)果

一、理清業(yè)務(wù),制定策略


理清業(yè)務(wù)目標,制定設(shè)計策略,是系統(tǒng)性改版產(chǎn)品的前提,在實際工作中設(shè)計師很容易被產(chǎn)品的原型、對產(chǎn)品的描述蒙蔽,只有非常清楚的理清業(yè)務(wù)的目標,才能制定系統(tǒng)性、合理的設(shè)計策略來支撐業(yè)務(wù),通過專業(yè)的設(shè)計方法來助力業(yè)務(wù)結(jié)果的達成,在這個項目中我們是如何做的呢?


對焦業(yè)務(wù)目標

OKR系統(tǒng)的改版項目最開始是高層的訴求,提的業(yè)務(wù)要求很簡單“ 讓大家用起來,目標管理起來”,那么如何讓大家用起來、利用系統(tǒng)將目標管理起來是當前需要解決的的問題。


“ 讓大家用起來,目標管理起來”需要去解析的是,為什么舊的系統(tǒng)大家用不起來?為什么目標管理有這個管理機制,但是沒有依賴于系統(tǒng)管理起來? 

制定系統(tǒng)的設(shè)計支持策略

設(shè)計師同行可能會問: 不都是做需求嗎,有啥做啥,有啥策略可言?如果是以這樣的方式來做設(shè)計改版,很有可能會被業(yè)務(wù)方牽著跑,即便是知道對方堅持的不是很合理,但也沒有辦法來推動這件事往更好的方向發(fā)展。 


二、理解用戶,溯源問題


理解用戶,溯源本質(zhì)問題,是最設(shè)計環(huán)節(jié)必不可少的環(huán)節(jié),通過對用戶的深入研究,挖掘本質(zhì)的共性的問題。在這個項目中,我們通過定量+定性的手段獲取用戶的心聲: 

定量問卷——獲取用戶的基礎(chǔ)的問題

前期在公司內(nèi)部針對普通員工、MGR、HRBP、高層4種角色,調(diào)研了100多位內(nèi)部用戶的心聲,將不同崗位和職級對于績效系統(tǒng)的問題真實反饋收集匯總。 

undefined


定性訪談——深入獲取用戶的訴求

因為系統(tǒng)面向?qū)ο笫瞧髽I(yè)內(nèi)部員工,所以針對每個角色都做了訪談?wù){(diào)研,深入的挖掘他們對當前的產(chǎn)品使用問題,并將問題按照核心流程中所涉及的角色在不同階段所需的操作和流程進行了梳理,整個階段拆解為:制定階段、執(zhí)行階段、結(jié)束回顧三個主要階段,拆解每個角色在這些階段中的觸點和機會點。 



結(jié)合問卷、專訪談的分析和梳理,篩選出目前系統(tǒng)的核心問題: 制定流程、對齊關(guān)系、過程跟蹤、信息觸達


三、串聯(lián)場景,各個擊破


在前面已經(jīng)初步發(fā)現(xiàn)和定義了問題,這么多分散的問題如果平鋪出來可能會嚇到產(chǎn)品和研發(fā),所以接下來需要將其系統(tǒng)化的變?yōu)檎w的設(shè)計方案,我們需要將其串聯(lián)成完整的場景,然后逐步擊破,我們是如何做的呢? 


重點模塊及爭議點的討論

在場景分析前期,我們設(shè)計內(nèi)部針對“核心階段”、”對齊關(guān)系“、”權(quán)限管理“、”全員OKR“進行了討論和范疇的界定,對以下問題進行了討論: 


  1. 大的階段:一共有幾個階段,在每個階段各個角色的需要做什么? 
  2. 關(guān)于對齊:對齊關(guān)系是怎樣的,如何處理對齊與被對齊,雙方都發(fā)起了對齊,怎么對齊到具體哪一條? 
  3. 關(guān)于權(quán)限:普通員工的權(quán)限定義;mgr的組員關(guān)系;如何確定查看的權(quán)限? 



梳理清楚角色關(guān)系圖,有助于多方去理解各個維度的關(guān)系

以一個普通員工【小何】為例,在OKR系統(tǒng)中進行OKR制定時,通常需要與多個角色產(chǎn)生關(guān)聯(lián):


  1. CEO/BO:通過查看高層的目標來看到公司的發(fā)力方向; 
  2. MGR:明確部門目標,制定個人的;OKR的審核與發(fā)布;進展的跟進; 
  3. 同組/協(xié)同部門:與協(xié)同部門綁定關(guān)聯(lián)關(guān)系,同步實時進展;查看同組員工的進展,橫向?qū)Ρ葌€人進度。 




結(jié)合業(yè)務(wù)需求,賦予體驗價值

OKR系統(tǒng)雖然最為一個內(nèi)部管理系統(tǒng),我們也逐步在設(shè)計側(cè)去從“具有功能價值”往”“賦予體驗價值”去發(fā)力,將更多的“能”和“可以”轉(zhuǎn)變?yōu)椤胺奖恪?、“簡單”和“輕量化”等,來提升各個流程階段中的體驗,比如: 
從“可以查看”到“方便的查看”
從“能更新” 到“  簡單更新”

具體到串聯(lián)場景怎么去理解?

一個新的OKR周期會經(jīng)歷三個主要階段,每個階段會涉及到多個節(jié)點,在每個一個節(jié)點上去思考發(fā)力方向: 


為了便于理解,將關(guān)鍵的場景提供了比較簡短的描述,這個描述就是從舊到新的過程,后面的設(shè)計展示也是圍繞著這些內(nèi)容進行展開,具體如下: 

①制定階段,包含寫、看、評、管
  • 寫:輕松撰寫,高效共創(chuàng) 
  • 看:簡單查看,便于跟進 
  • 評:輕量互動,便于記錄 
  • 管:高效審核,隨時跟進;條條對齊,事事關(guān)聯(lián); 

②執(zhí)行階段,包含更、改、推
  • 更:隨時更新,條條追溯 
  • 改:慎重修改,條條有據(jù) 
  • 推:合理推送,終端打通 

③結(jié)束回顧,包含查看、追溯、復(fù)盤

  • 查看:快捷查看歷史周期 
  • 追溯:記錄明顯標記,事事追蹤溯源 
  • 復(fù)盤:復(fù)盤總結(jié),目標達成 



四、方案設(shè)計,中途驗證


經(jīng)過前面一系列的調(diào)研、分析總結(jié),設(shè)計圍繞著3個階段的關(guān)鍵結(jié)論進行展開,即OKR制定、執(zhí)行、結(jié)束三個階段 
(因每個階段篇幅較長,方案設(shè)計部分僅展示部分頁面的思考過程和頁面展示)

輕松撰寫,高效共創(chuàng)

在寫OKR時,設(shè)計讓撰寫輕松、可以高效的共創(chuàng),主要通過以下3點: 

(1) 清晰的頁面結(jié)構(gòu):


讓用戶能明確的感知到系統(tǒng)的整體結(jié)構(gòu)是有規(guī)律的,可以簡單被理解的,即左邊全局控制,右邊內(nèi)容展示

  • 左邊導(dǎo)航全局控制著寫、審、查、通4個功能 
  • 右邊內(nèi)容展示跟隨著導(dǎo)航內(nèi)容變化 



(2) O與KR的錄入快速切換: 

為了讓用戶可以沉浸在一個頁面寫內(nèi)容同時,還能縱覽全局結(jié)構(gòu),在寫OKR的頁面增加了OKR大綱的錨點切換功能,便于多個KR之間的切換,避免因頁面過長帶來的翻閱困難的問題。 


(3) 減少步驟,減少跳轉(zhuǎn): 

減少步驟,減少跳轉(zhuǎn)有很多場景都有涉及到,比如: 
  • 以以新增一個O和新增一個KR為例,步驟從原來10步減少到4步,頁面調(diào)整從多步驟彈窗到在1一個頁面即可完成內(nèi)容的撰寫; 
  • 在與別人關(guān)聯(lián)時,在撰寫頁面會收攏所有邀請方的信息; 
  • 在查看對方進度,原來需逐個點擊進去了解,到現(xiàn)在幾乎可以全局視角來管理進度。 



簡單查看、便于跟進


查看和跟進屬于第三方的協(xié)同伙伴,為了讓伙伴更輕松的跟進,做了2個設(shè)計處理: 
  • 在人員展示邏輯上,在OKR展示時,將關(guān)聯(lián)人、同組人直接展示出來,減輕用戶的查詢成本; 
  • 在展示內(nèi)容上,將O全部展示,進度以及更新時間全部直接展示出來,便于關(guān)聯(lián)方快速便捷的知會。 



簡單審核、隨時跟進


在管理者審核下屬員工時,簡化了大量信息,前置待處理信息以及待處理的關(guān)鍵信息,讓管理者比較直觀的知道有哪些人提交了,哪些人修改了,哪些人需要重寫等等。 



隨時更新、條條溯源


為了讓員工便捷的進度管理,在OKR管理頁面以輕量的臨時彈窗,來方便用戶快速發(fā)起和輸入內(nèi)容,每條更新記錄同時也能同步給關(guān)聯(lián)方。 



慎重修改、條條有據(jù)


慎重修改、條條有據(jù)主要是滿足管理者和關(guān)聯(lián)管理訴求,OKR可以在中途被修改,但是修改的結(jié)果是需要明確告知相關(guān)人,在增加、刪除、減少的內(nèi)容上,以特殊的示意對比來記錄依據(jù),同時也督促發(fā)起方能審慎修改。 


合理推送


OKR的消息推送在整個階段中占據(jù)了非常重要的信息觸達的作用,在整個OKR的制定階段和執(zhí)行階段不可或缺的部分,而消息推送過多將會導(dǎo)致信息冗余,那么如何合理進行推送消息也是重要一環(huán)。 

我們把消息類型通過兩個維度定義消息的優(yōu)先級:“重要性”和“緊急度”,通過四象限法則,我們拆出來了:


  1. 重要且緊急的消息
  2. 重要不緊急
  3. 不重要但緊急
  4. 不重要不緊急

通過此模型和產(chǎn)品確定了每一個消息類型的所在位置,且清晰表達的了每個消息應(yīng)當?shù)奈恢?




在酷家樂有非常多的信息接收渠道,每個渠道都有相應(yīng)的特點,我們結(jié)合渠道的特點去確定不同優(yōu)先級的消息應(yīng)當推送的渠道。 


最終在實現(xiàn)方案上,實現(xiàn)了有層次、分場景的消息推送方案,盡量做到少打擾用戶同時,可以及時了解重要信息。 

終端差異


桌面端是主力生產(chǎn)平臺,通常是多窗口多任務(wù),鍵鼠操作精確高效。在專注姿態(tài)下,我們可以盡量安靜地展示更多常用功能,讓用戶在一個視圖中即可完成相對復(fù)雜的任務(wù)。同時在列表頁中,更大的空間讓我們可以把目錄樹展開,減少導(dǎo)航跳轉(zhuǎn)。 

手機端的特點是專注當前任務(wù)??梢酝ㄟ^信息降噪,加強對比來讓信息傳達能明確,幫助用戶完成單個任務(wù);而清晰的導(dǎo)航可以避免小屏幕上頁面頻繁切換所帶來的導(dǎo)航負擔(dān)。 

最終實現(xiàn)方案

結(jié)合終端的差異,把移動端定位為:側(cè)重便捷快速的查看和溝通,同時將重編輯的場景在移動端去除了,更加側(cè)重于查看、互動和進展更新的低成本操作的場景。 


中途驗證效果,確保上線的效果

在設(shè)計的過程中,為了進一步的驗證設(shè)計合理性和易用性,針對角色代表進行了8組可用性測試,最終普遍反饋新版的操作體驗更好。




五、落地追蹤,拿到結(jié)果


針對了項目的設(shè)計效果落地,設(shè)計除了在過程中不斷的跟進產(chǎn)品和研發(fā)提出的問題,在測試階段提出效果走查文檔,不斷的打磨細節(jié),才能保證最終的設(shè)計效果,當然付出總會有回報,新版的系統(tǒng)上線除了制定、管理、查看關(guān)鍵模塊的UV和PV的業(yè)務(wù)數(shù)據(jù)達到了比較好的效果外,在新老版本的滿意度和流程操作犯錯率上也得到了一個比較好的驗證。 


寫在最后


在OKR系統(tǒng)項目的整體流程中,針對產(chǎn)品大改版的時候,我們設(shè)計需要前置思考業(yè)務(wù),全局看待產(chǎn)品,系統(tǒng)性的去思考和設(shè)計,助力業(yè)務(wù)結(jié)果達成的同時讓設(shè)計價值更好的體現(xiàn)出來,最后再回顧下整體流程: 

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

ui設(shè)計分享達人

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


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


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


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

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


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

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



移動端選項卡導(dǎo)航

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


Tabbar區(qū)標簽最多不超過5個

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



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

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

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


金剛區(qū)圖標不超過8個

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


banner文案不超過9個字

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

     


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



0無需說明書

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


1 一看就會

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


2秒法則

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


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


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


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


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


3次點擊法則

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

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


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

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

·當把一個3次點擊就能到達的流程改為4次點擊的時候,用戶發(fā)現(xiàn)目標頁面的能力反而提升了600%;

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

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

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



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

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


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

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

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


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


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


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


適用邊界

雖然選擇越少,用戶做決策的時間越短,但這并不是提高用戶體驗的唯一標準,過度的減少選項,可能導(dǎo)致負面效果。

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


??硕芍饕苡绊懹谶x項的多少,但是它不適用于需要高難度閱讀的任務(wù)。例如考試試題每道題只給你A、B兩個選項(學(xué)渣竊喜),那也太容易蒙了,這就是??硕稍诖鸢冈囶}中的局限性。


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




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


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


詳細解釋如下,圖中紅色方塊代表點擊目標,虛線代表移動路徑,此時因為紅色方塊目標較大,所以用戶從任何一處點擊都很容易(可以用鼠標在屏幕任意點移至紅色方塊試試)。


相反,紅色方塊目標變小,快速點擊就會困難很多,很難一次到位。


但如果紅色方塊目標很小距離很近的話,因為移動范圍小,也能準確的點擊到。


按鈕越大越容易點擊

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


將按鈕放置在離開始點較近的地方

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


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

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


適用邊界

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


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


思考小結(jié)

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

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

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

屏幕的邊角很適合放置像菜單欄和按鈕這樣的元素,因為在屏幕邊緣和角落位置有“無限可選中”的屬性,可以大膽操作而無需“微調(diào)”,參見macOS底部dock欄;

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




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

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

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


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


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


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

刪除、組織、隱藏

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


簡化交互設(shè)計

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


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

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


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



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

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


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


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


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


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

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

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

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



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

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


自動檢測提示

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


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


消除可能的失誤

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


將失誤降至最低

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


視覺暗示

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


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


為用戶犯的錯買單

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


范圍限制

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


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



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

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


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


△頁面的中主按鈕更突出


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



又被稱作“簡單有效原理”:“如無必要,勿增實體。”

通俗點去理解“如無必要,勿增實體”可以理解為“不要浪費較多東西去做用較少的東西同樣可以做好的事情?!被蛘弑硎鰹椤霸谄渌麠l件相同的情況下,要求得越少的那個就越好,越有價值”。


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


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

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

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

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

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




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

可口可樂、雪碧、芬達、嶗山可樂、7喜、美年達


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


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

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



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


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


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


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


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




食之無味,棄之可惜

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


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


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

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



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


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


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


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


還有就是有用戶自己的內(nèi)容的東西,一般不會輕易舍去。拿我個人來說,飛書一直是我的寫作工具,后來看到幾個更好用的軟件,但要想到把原來的這么多東西全部轉(zhuǎn)移過去也是件很心累的事,太麻煩,還是繼續(xù)用飛書好了。QQ這個“古老”的軟件,估計很多人好久都沒打開過了吧,但是讓你刪了它,你還是不愿意的,因為那上面有很多青春的回憶。




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

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


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


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


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

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


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


但是也要注意設(shè)備之間的差異,比如在移動端“漢堡包”式菜單是個不錯的方案,可是放到桌面端可能并不太友好,因為大屏幕可視范圍更大,小小的漢堡包圖標很容易被忽略,這時候平鋪出來可能會更好。


思考總結(jié)

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

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

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



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


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


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


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


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


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



















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


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


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




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


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


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

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

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

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

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

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


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




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

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


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


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


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


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


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


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

文章來源:站酷  作者:Fyin印跡

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


如何撰寫高效的交互說明?

ui設(shè)計分享達人

定義:

交互說明是針對原型圖內(nèi)容元素的補充解釋文字(包含交互邏輯描述、反饋狀態(tài)描述等) 

交互設(shè)計說明書由交互設(shè)計師完成編輯、修訂、發(fā)布的 
主要閱讀對象:產(chǎn)品人員、設(shè)計人員、研發(fā)人員、測試人員等,他們都是交互設(shè)計文檔的使用主角。 




不同角色的關(guān)注點:

產(chǎn)品經(jīng)理
主要關(guān)注:交互邏輯、功能架構(gòu)、交互事件、界面頁面流轉(zhuǎn)與內(nèi)容布局等。這里的產(chǎn)品經(jīng)理代表產(chǎn)品經(jīng)理及以上管理層。 
注意要點: 為項目梳理清楚邏輯關(guān)系,文檔按照邏輯關(guān)系和功能架構(gòu)分支等設(shè)置目錄講清楚項目、功能、組件、頁面流轉(zhuǎn)關(guān)系。

UI設(shè)計師
主要關(guān)注:說明文檔的具體頁面數(shù)量,因為這決定 UI 設(shè)計師出多少效果圖。另外,要看你的原型設(shè)計給 UI 設(shè)計師留了多少發(fā)揮空間,不要過于高保真。以及頁面元素是否統(tǒng)一規(guī)范便于提煉出典型頁面和設(shè)計規(guī)范。 
注意要點: 清晰合理的頁面功能布局,注意交互組件復(fù)用,頁面不同狀態(tài)描述清晰。

研發(fā)人員
主要關(guān)注:非常關(guān)心細節(jié)實現(xiàn),關(guān)心有多 少個功能、多少個功能新特性、多少個頁面元素組件、多少個交互動效等, 但他不關(guān)心方案里一個輸入框里是用彩色還是黑白,因為他是具體功能的實現(xiàn)者。 
注意要點: 明確表示出關(guān)于功能設(shè)計、頁面邏輯、組件交互等信息的細節(jié),例如:一個頁面刷新,要分為觸發(fā)刷新事件、刷新加載中、刷新成功提示、刷新失敗提示。其中失敗提示又要分多種情況:網(wǎng)絡(luò)不佳、程序異常等。如果你沒有提出明確需求,責(zé)任就會在需求方,而不是研發(fā)部門。

測試人員
主要關(guān)注:測試是依靠需求說明書和交互設(shè)計說明書,進行測試用例與測試腳本的編寫,在交互設(shè)計說明文檔里需要說明白每一個功能的交互動作與事件,測試是抓細節(jié)的,所以需要配一些說明性文字解釋交互設(shè)計的思路與實現(xiàn)路徑,這樣測試人員就可根據(jù)設(shè)計思路設(shè)計出測試用例。當然,測試用例分多種類型,這里指的是功能測試與邏輯測試,一些性能測試等需要依靠程序使用的軟件、數(shù)據(jù)庫等技術(shù)性的接口文檔來定。 
注意要點: 功能點、業(yè)務(wù)邏輯、界面元素、交互過程分解步驟。

上面解釋了各角色使用交互設(shè)計說明文檔的場景及他們期待的真實需求,我們需要清楚地了解這些內(nèi)容,才能有針對性地撰寫交互設(shè)計說明。 
在交互設(shè)計過程中,上述四個角色會不斷有所交集。所以,一旦編輯文檔,就需要對這幾個角色有針對性地解釋和閱讀優(yōu)化。 




清晰準確的交互說明,可以起到哪些作用:

1.減少交互設(shè)計師與產(chǎn)品上下游人員的溝通成本 
2.提升協(xié)作效率 
3.避免項目返工延期 




交互說明撰寫準則:

只寫最重要的: 

只針對有邏輯規(guī)則、異常狀態(tài)、特殊交互、分支流程、關(guān)鍵節(jié)點等進行說明。 
對于一些常識性、無異常點的地方不用堆積文字描述... 
交互說明畢竟是要給人看的,堆積的文字誰看得下去??只會帶來額外的閱讀壓力和極高的理解成本,交互設(shè)計師修改起來也麻煩。 


按模塊來展示說明: 

01.設(shè)計內(nèi)容組件:對于重復(fù)性強、出現(xiàn)頻率高的內(nèi)容,設(shè)置一個模板內(nèi)容及說明即可。 
對于重復(fù)出現(xiàn)的地方,直接代替過去就行,可大幅度減少交互設(shè)計師的工作量,開發(fā)也方便理解。 

02.分頁面/位置來展示:當整體交互原型頁面較多時,不要全都鋪在同一個頁面進行展示說明,會顯得頁面臃腫、瀏覽費力。可嘗試:單獨展示某個模塊、分支流程、場景等下的交互稿。小而聚集,內(nèi)容更精簡、理解更方便。 

03.若各模塊/分支流程/場景中的交互稿存在一定的關(guān)聯(lián)性,可以先做一張總體性的「概覽圖」,再去單獨展示。讓開發(fā)知道整體方案之間的關(guān)系、又能了解各個細分方案里的交互說明。 


復(fù)雜說明單獨展示: 

交互稿里總會有一些比較復(fù)雜、難以文字來說明的想法,像是一些動效、狀態(tài)等。 
對于這一些比較復(fù)雜的說明,可抽離出來進行對比、詳細描述,針對局部進行狀態(tài)效果描述,不必重復(fù)復(fù)制全量頁面。 
像一些按鈕或功能存在多種狀態(tài)時,也可用“表格/列表”的方式進行展示。 


交互說明的排版布局要有助于閱讀:

針對不同體量及復(fù)雜度的項目,交互說明一定存在多種排版布局方式。但要注意以下幾點: 
01.就近原則:交互說明盡量靠近所描述的原型圖(或具體功能點)采用數(shù)字標號對應(yīng)描述。特殊情況下交互說明離頁面數(shù)字標注點較遠時,可用虛線連接引導(dǎo)閱讀動線。 

02.縱向展示:同頁面不同狀態(tài)/模塊及交互說明盡量縱向延伸展示,這樣更便于鼠標滾動查看。不要橫向平鋪太長。 

03.減少重復(fù):對于相同的頁面框架/功能菜單僅部分模塊/狀態(tài)不同,可畫一張全要素主頁面示意,其余針對不同模塊/狀態(tài)拆解后,單獨對比展示,并補充交互說明。突出差異點,減少重復(fù)性元素的干擾。 

04.主次分明:交互說明樣式整體需要區(qū)別于原型圖頁面元素,可一眼區(qū)分。同時,對于交互說明也需要區(qū)分主要解釋和次要描述,讓不同查看者抓住重點。 

不同的排版布局方式各有利弊,所以具體采用哪種布局方式要根據(jù)所做項目的情況,以及開發(fā)人員的閱讀習(xí)慣而定。 


交互說明組件化: 

類似于設(shè)計的控件庫,我們在項目中寫交互說明寫多了就會發(fā)現(xiàn),既然元素可以調(diào)用控件庫快捷使用,那么該元素的交互說明也可以歸類入庫,在需要的時候直接拿出來根據(jù)具體情況調(diào)整使用。這樣做的目的:使用時快捷調(diào)用,修改時快捷修改。 


有更改及時告知: 

若交互原型做了調(diào)整(包含交互說明),一定要告知團隊成員??!并寫明修改位置(在哪個頁面)。 
否則產(chǎn)品、前端、后臺、測試等同事的相關(guān)想法、工作會停留在上個交互稿里。不要因為信息沒對齊而造成了不良影響。就算改了一處小東西,也盡量和同步一下。 




交互說明的三種樣式:

1.同一頁面內(nèi)不同模塊描述

當同一頁面內(nèi)存在多種狀態(tài)時,可畫一張全要素主頁面示意,其余針對不同模塊/狀態(tài)拆解后,單獨對比展示并補充交互說明 



2.頁面功能點邏輯規(guī)則描述
對于頁面中的元素和功能點描述可采用數(shù)字標號對應(yīng)的形式,若面功能點較多且存在關(guān)聯(lián)時,可分組標號做統(tǒng)一說明 




3.頁面內(nèi)細節(jié)簡短標注描述
用于描述頁面內(nèi)功能點及元素的簡短說明(20個字內(nèi))大段說明文字不建議用此方式(易干擾頁面)… 

文章來源:站酷  作者:體驗為王UX

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

「玻璃擬物化」你知多少?

ui設(shè)計分享達人

去年大家看到更多的設(shè)計和文章都在圍繞“新擬物化”展開行動,隨著各種硬件的提升,代碼的優(yōu)化,更多的風(fēng)格和效果一一出現(xiàn)在我們的生活中,而今天呢,我們一起探索一下生活中最常見的,你可能沒有注意到的設(shè)計風(fēng)格——“玻璃擬物化”風(fēng)格,英文“Glassmorphism”,這也可能會成為新的設(shè)計趨勢。 




什么是玻璃擬物化呢? 


在生活中的攝影,通過玻璃的層次感,給人以朦朧的美感,那什么是玻璃擬物化呢?



顯而易見,Glassmorphism 這個詞是 Glass(玻璃)和 Skeumorphism(擬物化)的結(jié)合,我們姑且將其稱之為「玻璃擬物化設(shè)計」。 




油管一管主Malewicz 小哥對于這種風(fēng)格特征歸結(jié)為4點:


  • 透明:使用帶有模糊磨砂質(zhì)感背景的透明效果

  • 懸?。簬в忻黠@懸浮感的多個層級

  • 鮮明:使用鮮艷色彩作為強調(diào)色并且從半透明層中透出

  • 微妙:使用輕薄微妙的邊框來強化物理質(zhì)感



簡單的來說,「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的,但是它有著相對更加具體的視覺隱喻,也就是我們?nèi)粘=佑|的「玻璃」。  



玻璃擬物化的優(yōu)點有哪些? 


1.愉悅感 

玻璃擬物化的應(yīng)用,讓扁平的UI界面不那么單調(diào),打破了人們的視覺疲勞,增添歡快、愉悅的設(shè)呈現(xiàn)效果。 

2.層次感 


通過玻璃透明,加周圍顏色環(huán)境的烘托,頁面的層次能更容易的呈現(xiàn)出來。 
















3.呈現(xiàn)語境 

你在哪,從哪里來,玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質(zhì),能告訴你所覆蓋的層級。



4.微妙高級感 


例如,以往的電商產(chǎn)品設(shè)計界面,更多的體現(xiàn)材質(zhì)或者簡約風(fēng)體現(xiàn)產(chǎn)品本身,但玻璃擬物化會讓產(chǎn)品在呈現(xiàn)中更顯高級。  







玻璃擬物化的設(shè)計風(fēng)格從哪里來呢?

追根溯源。其實還是要追更到蘋果頭上。  



蘋果的合計將玻璃擬物化的風(fēng)格運用的惟妙惟肖,無論是mac,iPhone還是iPad,設(shè)計風(fēng)格都保持著相對一致的玻璃擬物化風(fēng)格。 


重點來了,

玻璃擬物化如何用Sketch來設(shè)計一個玻璃面呢? 

首先:我們打開sketch,建立一個畫板,隨便找張圖片作為背景,畫一個白色矩形 



接下來:調(diào)整矩形的屬性,再填充色中設(shè)置透明度為50%,邊框可以吸取一個30%透明的白色,2px,再添加一個環(huán)境色的10%陰影,做出層次感,最后就是調(diào)整玻璃模糊的效果了,玻璃擬物的關(guān)鍵就在于sketch自帶的背景模糊功能,我們常常以為這里只有一個高斯模糊,但卻忽略隱藏在里面的其他模糊效果。設(shè)置背景模糊值為10%,不用太大,太大的話模糊效果就沒有那么真實了,具體調(diào)整還是要看效果。我們看效果: 



單層的效果不是很明顯,我們復(fù)制兩個調(diào)好的玻璃效果,調(diào)整他們的透明度,底部的透明度為70%、中間的為50%,最上層的為30%,看效果:


在界面設(shè)計中,就可以通過不同層級,調(diào)整對應(yīng)的參數(shù),達到更好的層級效果。 


那深色模式怎么辦呢?


很簡單,我們復(fù)制這三個矩形,填充色設(shè)為黑色,可以不是純黑色,根據(jù)設(shè)計規(guī)范來定,看效果:  



在圖標中怎么用玻璃擬物化設(shè)計呢?


玻璃是屬于透明物體,所以我們就了解到,通過玻璃看物體,層次感就出來了。 
所以圖標這這里設(shè)計的關(guān)鍵就在于 玻璃面和層次感,下面我們來看幾個圖標設(shè)計的案例 






看得出來,玻璃擬物化的設(shè)計很出效果。 
下面根據(jù)我說的我們來分析如何運用玻璃擬物化設(shè)計圖標 



我們以這個照片的圖標為例來拆解分析,通過運用剛才繪制的玻璃面的方法,與圖標色塊組合起來,在組合的時候,調(diào)整好層級,一個輕巧且富有玻璃質(zhì)感的圖標就繪制出來了,很簡單、很容易上手對不對?一起來快來試試吧 



注意的細節(jié):


1.在純白色背景中,一定要給玻璃面添加底部色塊的顏色,不然就不會出現(xiàn)看不見玻璃層的尷尬畫面; 
2.背景模糊值也是需要根據(jù)具體的需要來調(diào)整。  



玻璃擬物化在界面中的應(yīng)用越來越多,所以大家也要根據(jù)自己的業(yè)務(wù)有選擇性嘗試的去使用,不要盲目的跟隨設(shè)計趨勢設(shè)計而設(shè)計。  


就到這里兒吧,大家有空多去收藏一些類似的設(shè)計,多去吸取靈感,設(shè)計出更好用好看的產(chǎn)品!  


最后,讓我們再來總結(jié)一下

一玻璃擬物化的特點:


  • 透明:使用帶有模糊磨砂質(zhì)感背景的透明效果

  • 懸?。簬в忻黠@懸浮感的多個層級

  • 鮮明:使用鮮艷色彩作為強調(diào)色并且從半透明層中透出

  • 微妙:使用輕薄微妙的邊框來強化物理質(zhì)感


玻璃擬物化的優(yōu)點有哪些?

讓動畫生動的技巧

ui設(shè)計分享達人





前言

前人早已總結(jié)了讓動畫生動的技巧,早在1981年由兩位迪士尼動畫師所撰寫的《The illusion of life:Disney Animation》一書就提到了動畫的12項基本法則,該法則也是受用至今。法則雖是針對傳統(tǒng)動畫而制定,但對于我們?nèi)粘P枨笾兴佑|的動效/動畫需求也同樣受用。


目錄

1)動畫原則介紹

2)結(jié)合案例應(yīng)用原則

3)流程方法論沉淀

4)結(jié)語








01: 擠壓與伸展

擠壓與伸展是我們最常用的運動技巧。使用擠壓與拉伸來強調(diào)物體的質(zhì)感、重量、速度。擠壓和拉伸會給予物體運動時具備質(zhì)量感和體積感的錯覺。例如當一個皮球正在進行下落運動,在運動過程中讓皮球體積產(chǎn)生一定拉伸來表現(xiàn)它的速度感,皮球落地后則因力的作用產(chǎn)生擠壓變形。






技巧建議

擠壓與伸展的幅度影響著物體的質(zhì)感、重量。設(shè)計師們可根據(jù)物體的質(zhì)感去決定擠壓伸展的幅度。動畫雖存在夸張性,但對于物體擠壓拉伸的體積盡可能保持視覺統(tǒng)一,避免較大的體積誤差導(dǎo)致運動的突兀。











02: 預(yù)期動作

預(yù)期動作可告知觀者物體運動即將發(fā)生,增強觀者的場景代入感,使運動更加生動真實。如果我們?nèi)コ捌诘念A(yù)備過程物體所呈現(xiàn)的運動感知像是突然被前方磁鐵所吸引。






技巧建議

預(yù)期動作可對觀者視線進行引導(dǎo),設(shè)計師可以根據(jù)預(yù)期動作所引導(dǎo)的方向來銜接鏡頭/場景的轉(zhuǎn)場。反之預(yù)期動作也可以用來欺騙觀眾,當用戶預(yù)期與畫面不符時也可增加動畫舞臺的趣味性。








03: 演出方式

每個角色/運動元素在運動過程中都會流露出獨特的態(tài)度和氣質(zhì)。針對不同的角色/元素的運動特性運用不同的運鏡、表演技巧、時間節(jié)奏以及舞臺的編排技巧,傳遞貼合角色/元素氣質(zhì)的動態(tài)感知。








04: 持續(xù)動作與關(guān)鍵動作

在現(xiàn)今動畫工作流程中,考慮到流程效率及技巧利弊,我們可以使用兩者相互結(jié)合的方式。關(guān)鍵動作描述的是設(shè)計師們熟知的關(guān)鍵幀動畫的方式(類似AE)。在動畫設(shè)計前進行基本運動的關(guān)鍵動作提煉,再進行細化,一層層的遞進。底層的關(guān)鍵運動越完善,在后續(xù)添加細節(jié)時才不會耗費大量時間調(diào)整。而對于持續(xù)動作(逐幀動畫)的技巧,我們可以利用它處理一些復(fù)雜效果例如(涉及到運動空間的變化、形狀上的靈動變化等)。






1)持續(xù)動作(Frame by Frame)

逐幀動畫。

優(yōu)點:自由且流暢的動態(tài)。

缺點:難以把控時間長短、體積大小。


2)關(guān)鍵動作(Key Frame)

關(guān)鍵幀動畫。

優(yōu)點:清晰、可靠、規(guī)范。

缺點:修改成本略高。









05: 跟隨與重疊動作

跟隨動作指的是元素運動結(jié)束后不會立刻停止,會因為質(zhì)量、慣性等因素,元素會慢慢進行振動減幅的過程。重疊動作則指的是運動不會同一時間發(fā)生,主體與附屬部分的運動會因質(zhì)感、外力等因素產(chǎn)生不同的速率。






技巧建議

1)表達運動的力量、速度感

當一個人跳躍的時候,自身的衣帽等附屬物也會隨之擺動。跟隨&重疊動作反應(yīng)著運動的力量感和速度感,利用好跟隨與重疊動作,可以更好地表現(xiàn)角色/元素主要動作/運動。當主要動作/運動力量大、速度快的時候,跟隨與重疊的物體運動幅度大,反之則運動幅度小。









06: 緩動

真實世界的運動遵循著緩動運動的規(guī)律,而并非勻速運動。根據(jù)物體運動情況、動態(tài)質(zhì)感去編排元素合適的運動速率。關(guān)于運動的速率編排相關(guān)內(nèi)容,可以看看過往的文章-《動效的質(zhì)感》








07: 弧形運動

仔細觀察可發(fā)現(xiàn)自然界中的運動多為弧形運動的組合,而勻速運動只存在于機械運動中。






技巧建議

1) 弧形運動路徑

角色動畫:

在人物運動過程中使用弧形運動增添角色動畫表現(xiàn)力。比如當人物抬頭或轉(zhuǎn)頭時,通過弧度的變化映射人物的情感,是充滿好奇心的還是沮喪的。


交互動效:

在交互動效中,弧形運動路徑會給予觀者運動表現(xiàn)力較年輕活潑的感知隱喻。設(shè)計師可根據(jù)品牌調(diào)性及產(chǎn)品屬性去選擇運動路徑類型。









08: 附屬動作

當主體在運動時,設(shè)計師可通過附屬物運動來輔助表達主體運動氣質(zhì)。比如人物敲門時,捏緊拳頭的敲(代表生氣)與翹起蘭花指敲的(代表精致)區(qū)別。








09: 時間控制

在上篇文章其實我們有提到影響動效質(zhì)感的原因之一就是時間,控制好物體的運動時間也是表現(xiàn)良好動畫節(jié)奏感的關(guān)鍵。








技巧建議

1) 時間偏差(角色動畫側(cè))

使用「時間偏差」的技巧,可以讓你的動畫更加生動。因為受力、質(zhì)感等因素影響,主體運動時附屬部分的運動不會同時發(fā)生。比如當人物正在打哈欠時,首先是從嘴巴發(fā)力,再擴散至五官眉毛。






2) 時間偏差(體驗動效側(cè))

為保持動效的連續(xù)性以及營造自然流暢的交互體驗,適當?shù)氖褂脮r間偏差,可避免動效元素變化過程出現(xiàn)空檔期,提升信息傳遞效率減少認知負荷。








10: 夸張

通過夸張手法增添動畫表現(xiàn)張力,加強運動元素的吸引力令動畫更有代入感和戲劇性。








11: 多維表現(xiàn)

動畫設(shè)計時可通過營造鏡頭透視感、景深感模擬真實的空間感打破二維扁平視覺效果,提升畫面表現(xiàn)力。








12: 吸引力

一部好的動畫作品一定會有令人吸引的人事物,比如動態(tài)氣質(zhì)或視覺風(fēng)格等它們都能很好的吸引觀眾。除此之外,如何講好一個故事,通過趣味幽默的故事表達手法也可以增添動畫的吸引力。








原則歸類

通過對十二大基本原則的學(xué)習(xí),我將技巧分為以下兩大類:設(shè)計技巧和表演技巧。

設(shè)計技巧:動畫設(shè)計的技法,增添動畫細節(jié)令動畫表現(xiàn)更生動自然。

表演技巧:舞臺表演的技巧,提升動畫舞臺全局的表現(xiàn)力。












結(jié)合案例

接下來我們結(jié)合上述所提及的動畫原則,根據(jù)實際案例進行結(jié)合應(yīng)用。一起來探討下當接到動效設(shè)計需求時,我們需要思考哪些點?才能使我們的動效表現(xiàn)力更上一層樓。








腳本背景

假設(shè)在項目中我們需要對設(shè)計元素(豬豬存錢罐)添加動效以提示用戶已省錢成功的情感氛圍。設(shè)計前我們先來分析下元素以什么動態(tài)/動作表現(xiàn)會更貼合元素性格。考慮到豬豬的可愛屬性,采用了跳躍的運動方式。并擬定了跳躍后天上落下金幣的動畫腳本。








動態(tài)分析

將腳本確定后,我們在腦海里已經(jīng)有大概的運動畫面。但在進入動效設(shè)計前,還需要明確在動畫中使用哪些動畫原則來提升動畫生動性。








應(yīng)用技巧

在添加動畫細節(jié)前,我分享下在項目中經(jīng)常用到的兩個技巧。


1) 實現(xiàn)擠壓與伸展的多種形式

實現(xiàn)擠壓與伸展的方式有很多種,最常見的是直接改變物體的縮放比例或形狀路徑來實現(xiàn)。但在設(shè)計項目中我們往往會遇到非矢量的設(shè)計元素,利用xxx可實現(xiàn)圖層的彎曲扭曲等變形效果。






2) 考慮運動物體質(zhì)感

質(zhì)地堅硬的物體受外力的影響較小,質(zhì)地柔軟的物體受外力的影響較大。而像豬豬這類柔軟的物體在恢復(fù)靜止吋肉肉會有一個跟隨&重疊動作(抖動)。在處理這類抖動的效果除了使用常規(guī)的彈性表達式外還可配合使用AE的 CC bend it 效果增加形變細節(jié)令物體運動更為生動自然。








差異對比

當我們?nèi)コ@些動畫原則后,再去作對比明顯的感知差異就出來了。








經(jīng)驗沉淀

根據(jù)過往項目經(jīng)驗,我總結(jié)了動效/動畫設(shè)計的流程思路。從業(yè)務(wù)目標的分析到動畫腳本的確定,層層遞進。前期的目標和框架確定后,之后進行動畫原則的梳理及最后的動效輸出。設(shè)計師們不妨在項目中嘗試上述的流程思路及原則技巧,將自身動畫的表現(xiàn)力提升一個檔次。








結(jié)語

隨著動畫/動效的落地方式愈來愈完善,像Lottie、svga等新型的動畫落地形式所帶來的高品質(zhì)畫面呈現(xiàn)。設(shè)計師們不能滿足于動畫僅僅只是動那么簡單,如何去塑造生動的動畫形象還有不少我們需要考慮的細節(jié)。恰好前人總結(jié)了相應(yīng)的原則技巧,幫助我們站在巨人的肩膀上看得更遠。除《The illusion of life:Disney Animation》外,近期也在閱覽《動畫師的生存手冊》里面涵蓋了不少關(guān)于角色動畫的運動技巧及細節(jié)。其中部分技巧并不局限于角色動畫的設(shè)計中,下期文章我將分享關(guān)于角色動畫的知識沉淀內(nèi)容。





文章來源:站酷  作者:Fiasc1

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔