首頁

7個優(yōu)秀網(wǎng)頁設計趨勢!

博博

關注趨勢本質上就是關注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設計趨勢是相互關聯(lián)的,兩者之間的關聯(lián)更像是一種動態(tài)的同步。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

很多時候趨勢并不一定是全新的東西,它們往往是服務于當下和未來的需求,有很多趨勢存在了一些年頭,它們在現(xiàn)在發(fā)揮著作用,但是在未來可能會發(fā)揮更大的效用。所以,當我們在查看這些設計趨勢的時候,需要注意,它們必須是服務于用戶,服務于品牌和企業(yè)。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

更多設計趨勢:


1、新極簡主義


的確,極簡主義一直在某種程度上流行,但是 2022 年出現(xiàn)的新極簡主義的浪潮,比起傳統(tǒng)的極簡主義設計更加在意用戶注意力的吸引。這種新極簡主義的設計會采用更加大膽、 生動、明亮的色彩來填補留白,這種設計使得設計保持簡約的同時,更加富有調性,在簡約的框架下制造一種別樣的華麗,營造令人亢奮的氛圍。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

干凈清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎,大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球,也使得品牌給人的感知更加新鮮獨特。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

新極簡主義風格,對比度在深色主題下得到了進一步的提升。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

這種設計并不意味著傳統(tǒng)的極簡主義已經(jīng)被用戶拋棄,很多企業(yè)依然會青睞更加傳統(tǒng)的單色極簡主義設計,不過其中多少會增加一些明亮的色彩作為點綴。

2、新粗野主義


從 1950 年開始,粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中,這種設計風格一直隨著時代的發(fā)展而自我迭代,新粗野主義更加強調創(chuàng)造力、 大膽前衛(wèi)的新奇元素,而這也正好符合很多品牌對于新奇性的追求,它可以瞬間抓住用戶的注意力。不過,這種風格的使用需要控制好程度,否則很容易失控。

粗野主義經(jīng)久不衰的秘訣是什么?是未經(jīng)打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進它,這種未完成的原始感會在情感上吸引觀眾,這在營銷上是無價的優(yōu)勢。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

粗野主義在設計上并非看起來那么粗糙,相反它更加需要高度的專業(yè)性來控制它粗野的程度。設計師需要敏銳地感知到觀看者改進地欲望,讓設計粗野而不低級,原始而不拙劣。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

新粗野主義柔糅合了極簡主義和大膽地排版,它依賴看似粗野地視覺沖擊:高對比度、粗糲地陰影,撞色、 簡約的背景、不對稱的布局、 未經(jīng)修飾的照片,新粗野主義偏好基礎款的加粗字體,跟注重可讀性而不是舒適所制造的視覺吸引力。

這個網(wǎng)站就是一個典型的例子:

3、強調參與感的交互


這一趨勢在絕大多數(shù)的趨勢排行榜當中,都占據(jù)首位。隨著技術的進步,用戶和數(shù)字媒體之間的交互正在增加,引人入勝的交互已經(jīng)不僅僅停留在響應式設計當中,如今它已經(jīng)開始關注心理和生理的邏輯,開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。

這種趨勢旨在幫助用戶體驗真實地感覺,在完成交互地基礎上,觸發(fā)用戶地情緒反應和生理反應,熱氣騰騰地餡餅視頻讓人垂涎,游戲中虛擬地對手讓人腎上腺素激增。

交互所制造地參與感,在某種程度上是實際地物理產(chǎn)品地替代物,用戶可以從不同角度來縮放查看產(chǎn)品,了解細節(jié),選擇尺寸,挑選顏色。

交互過程中,手指和屏幕之間地觸摸交互開始變得豐富,開始變得有意味,它成為了用戶和虛擬世界之間溝通地橋梁,開始有游戲地樂趣,有更具設計感地交互環(huán)節(jié)。用戶也可以根據(jù)自己地喜好,對界面進行更多樣的個性化處理。

具有參與感的交互是我們的未來。

4、關注人和敘事


2022 年是疫情開始后的第三年,隔離使得人們對于照片所呈現(xiàn)出的故事和情感,有著更為強烈的情緒反應。在極簡主義設計當中,富有表現(xiàn)力的人物照片是最為流行的元素之一,這類照片搭配上簡短的文字,簡練的口號,一些帶有宏大敘事特質的文字引用,時常能夠更好地營造出故事感。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

不用擔心主屏頁面太長沒人看,只要隨著用戶滾動,故事會隨之逐步展開,用戶可以在照片、 標題、視頻、動畫和文本地指引下,看到整個故事有步驟地呈現(xiàn)。

在這當中,富有表現(xiàn)力的人物照片是吸引用戶注意力的關鍵要素。

另外就是頁面的 Banner 的部分,強調主題和內容的標題文本,是用戶從屏幕上獲取的重要信息之一。

如今的用戶越來越偏好在詳細閱讀內容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動敘事:通過滾動觸發(fā)音頻、視頻、 動畫效果的一種技術)這種漸進式敘事方式,可以像電影一樣將故事呈現(xiàn)在用戶眼前。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

Scrollytelling 適合大量的內容呈現(xiàn),比如對于公司和產(chǎn)品的描述,對于數(shù)據(jù)呈現(xiàn)或者認知要求較高的內容,它適合學習和記憶性內容的呈現(xiàn)。


5、3D圖形的運用


3D 圖形設計正在越來越流行,因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異,它本身都會被認為是有真實感的,明確的體積,精致的建模,所有的一切都令人著迷。很多時候,用戶停留在有3D元素的頁面上,是為了更細致的欣賞。

3D 圖形設計的趨勢從來都沒有減退,它正在進入更多的領域,甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用戶的注意力。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢


6、抽象插畫


我們通常說的抽象插畫,指的是帶有明確幾何特征的插畫,它們被廣泛地應用于網(wǎng)站和 APP,在社交媒體和包裝設計中也越來越多的存在。

2022設計趨勢 優(yōu)秀網(wǎng)頁設計 網(wǎng)頁設計 網(wǎng)頁設計趨勢

抽象插畫之所以會如此成功,是因為它們大多有著吸引人的生動色彩和良好對比度,視覺上的美感和極簡主義的風格特質,它們成為視覺的焦點,為整個設計提升視覺。

抽象插畫在品牌營銷場景下的應用也很多,它們在這個時候是貼合品牌推廣的訴求的:通過色彩和形式來吸引用戶來關注品牌的形象和名稱。

7、超大文本版式


這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的,它們還充當著拉升頁面視覺效果的重要作用,它們結合動畫和交互,成為頁面中醒目的亮點。

超大字體的優(yōu)點在于,它和很多設計風格是相得益彰的,加粗的大字體在極簡主義風格的頁面上不會顯得突兀,在元素豐富的頁面上,同樣可以起到優(yōu)秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協(xié)同,而后者則襯托出它本身的醒目。

超大文本字體的另一個好處是有效地減少網(wǎng)頁上的圖像的使用,縮短加載時間,提升移動端的可用性。

這種設計元素最重要的,是選擇易讀且符合品牌調性的字體。


總結


這么多年來,我們看到來這么多的趨勢,很多趨勢是一以貫之持續(xù)出現(xiàn),有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級,并且持續(xù)存在,但是最重要的,始終是那些選擇合理的方案,并且堅持改進設計,讓趨勢服務于終端的產(chǎn)品和用戶的設計師。

讓趨勢服務于你,不要盲目地追趨勢!



作者:陳子木



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。 



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

開發(fā)說這個設計實現(xiàn)不了?從3個階段解決問題!

博博

對接開發(fā)的重要性


作為產(chǎn)品設計師,無論在什么公司什么崗位,都免不了與研發(fā)團隊進行溝通,如果不進行溝通就無法交付我們的設計稿,即便很成熟的團隊也會出現(xiàn)在溝通上的問題,在產(chǎn)品研發(fā)的過程中溝通是必要的流程,為了創(chuàng)造一致的用戶體驗,設計師需要與開發(fā)人員在視覺上、交互上達到一致的想法,但是講起來簡單,說起來難,在整個過程設計師和開發(fā)都是站在不同的角度去看待問題的,我們思考的如何達到美觀的界面、流暢的交互等問題,而開發(fā)關心的是做這件事我需要花費多長時間,實現(xiàn)難度如何等等,首先目標就不在同一個維度,那么必然會造成我們在對接的時候出現(xiàn)掰扯的問題,最后耽誤的都是雙方的時間,更嚴重點頁面最后的體驗也沒有達到一致。

設計實現(xiàn) 設計落地

任何團隊都會出現(xiàn)設計師與開發(fā)脫節(jié)的問題很常見,遇見什么問題解決什么問題,畢竟人與人的性格、溝通方式等都是不同的。

我們只需要在不同的流程里去做不同的事情就可以避免這些問題了,對于任何設計師基本都會適用,往下看~

對接前的準備

1. 產(chǎn)品信息文檔確認

在接到一個需求的時候產(chǎn)品經(jīng)理會通知上下游進行需求的評審,這時候一般會是產(chǎn)品經(jīng)理、設計師、開發(fā)三個組進行需求的評估,具體的需求評審在本章就不細講,我們此次主要講設計師與開發(fā)相關的信息同步。

設計實現(xiàn) 設計落地

在評審過程中產(chǎn)品經(jīng)理會把需求背景、需求目標等相關信息同步給相關的人員,作為設計師這時候就要關注需求目標,這個目標不僅是產(chǎn)品經(jīng)理的目標,也是整個項目的目標,所以與每個人都相關,需求目標清晰后期推動開發(fā)的時候才會有依據(jù)。

設計實現(xiàn) 設計落地

評審會議結束后,產(chǎn)品經(jīng)理會同步期望上線時間,如果是常規(guī)需求,會當時就評估出設計時間、開發(fā)時時間,我們設計師這時候就要關注這些時間,因為我們通過上線時間就可以估算開發(fā)節(jié)奏,給我們后期的修改以及臨時添加的一些動效制作時間會留出充裕的時間。

設計評審流程細節(jié)本章不進行細節(jié)講解,本章重點講與開發(fā)對接。

設計實現(xiàn) 設計落地

近期我在公司做了一個商業(yè)化的直播項目需求,由于產(chǎn)品方?jīng)]有過多的產(chǎn)研經(jīng)驗(后面才知道),在項目前期雖然進行了評審,但是評審的參與人員沒有拉上我,等到需求給到我的時候,我順便問了一下才知道已經(jīng)評審完了,這對于我來講是沒辦法進行設計輸出的。

設計實現(xiàn) 設計落地

第一我不知道評審過程中開發(fā)的排期時間,以及測試時間,如果研發(fā)開始開發(fā)的時間與設計稿交付時間有沖突那么就是影響上線節(jié)奏。

第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的,有沒有哪些地方需要加復雜的交互產(chǎn)品也是同樣不清楚,那么開發(fā)就會默認這是常規(guī)的交互,如果過程中添加那將會影響開發(fā)進度。

第三流程上不符合要求,期間如果有關鍵性信息沒有達到共識,那將會釀成很嚴重的后果。

設計實現(xiàn) 設計落地

面對這種已經(jīng)發(fā)生的事情,如果重新拉個會評審一次會耽誤大家的時間,很多人是不愿意的,但是呢我也不能單聽產(chǎn)品一方面的溝通,因為很多細節(jié)他是不清楚的(產(chǎn)品經(jīng)驗較少),所以當時我的處理方法呢是我先通過產(chǎn)品給出的上線時間,然后與前端同學單獨確認一下,這樣至少保證上線時間是同步的,至于其他的細節(jié)我當時是利用設計評審的方式同步給開發(fā)交互邏輯、動效方式等。

此次這個需求呢本身不大是在舊版的基礎上優(yōu)化功能,理論上不需要走設計評審流程,但是因為當時沒有通知參加評審導致很多信息不同步,而我需要傳達給開發(fā)的東西也不能在后期在告訴他們,所以我利用設計評審流程把一些交互信息同步給開發(fā)。

2. 設計圖準備

在設計稿完成后,如果是小需求一般是直接交付給研發(fā),如果是大需求一般會進行設計評審,主要評審維度是設計稿是否與產(chǎn)品文檔同步,設計目標是否符合產(chǎn)品目標等等,其次如果有復雜交互效果、設計細節(jié)、組件復用情況也需要與研發(fā)對齊。

設計實現(xiàn) 設計落地

若是直接交付研發(fā),我們需要提前把設計稿內涉及的切圖、圖層間距、動效使用區(qū)域等關鍵信息提前準備好,避免在開發(fā)過程中臨時進行補充,影響開發(fā)節(jié)奏。

設計實現(xiàn) 設計落地

在設計稿內的切圖,我們要提前與研發(fā)溝通,切圖的范圍和形式,最后把設計稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站,如藍湖、即時設計等平臺,大公司會有自己的協(xié)作平臺。

3. 確定設計規(guī)范組件

講個自己的踩坑案例,還是商業(yè)化的那個需求,由于為了商業(yè)化賦能,產(chǎn)品的需求文檔并沒有按照規(guī)范組件進行設計,但是由于產(chǎn)品文檔標注的不清楚,在設計過程中不斷與產(chǎn)品進行溝通,最后結果當然也是無法復用組件,當時我就把組件規(guī)范修改了,重點是研發(fā)不知道,我當時想的是研發(fā)通過產(chǎn)品文檔應該會了解到,事實確實我大意了,后面就導致組件方面我與研發(fā)進行了相愛相殺,通過自己的以身作則我勸大家不要忽略任何一個細節(jié)!

設計規(guī)范組件在設計前就需要進行確認,項目是否有存留的規(guī)范組件,如果有,需要在設計前以及設計中去確認哪些模塊是否可以調用,開發(fā)是否已經(jīng)將組件寫入代碼中,如果不了解這些情況貿(mào)然的設計,那在對接過程中會出現(xiàn)修改設計稿的風險。

設計實現(xiàn) 設計落地

如果是創(chuàng)新項目并且沒有相關的設計規(guī)范和組件,我們則需要在設計前就把規(guī)范組件的時間給算到需求內,一個產(chǎn)品的規(guī)范組件,決定著后續(xù)產(chǎn)品是否嚴謹、項目研發(fā)效率等等,因為規(guī)范組件不止是設計師的事情,還是團隊研發(fā)比較關注的事情,研發(fā)們在代碼里同樣需要進行規(guī)范的組件復用。

設計實現(xiàn) 設計落地

4. 輸出設計文檔

當在做一些在舊版的產(chǎn)品頁面上優(yōu)化的需求時,還需要輸出對應設計文檔,給前端和測試看,設計文檔需要寫清楚設計稿優(yōu)化的點,例如圖標的細節(jié)優(yōu)化、文字的字號優(yōu)化、色彩優(yōu)化、界面交互等等細節(jié)。

設計實現(xiàn) 設計落地

如果涉及到一些頁面的交互,我們在提供設計稿的同時需要把具象的交互文件單獨交給開發(fā),不要奢望前端大佬們能腦補出頁面之間的交互,我們不及時提供的話,后期修改研發(fā)可能會直接拒絕,并且口吐芬芳~(最簡單的找到競品頁面演示給研發(fā)看)。

我的方法

設計實現(xiàn) 設計落地

前端在看我們設計稿時如果不是結構上的修改,他們不會去關注這些細節(jié)的點,而給測試看的目的是,有些公司測試會幫我們進行走查,如果不出設計文檔測試沒辦法進行對比(測試提 bug 比設計師提 bug 更具有一些權威性)。

這里看一下我工作中輸出的設計文檔,我會把需求的背景、目標在設計文檔上強調一下,再添加上設計目標,設計目標為了需求目標去賦能,這樣在文檔開始就與研發(fā)達成共識,讓研發(fā)是帶著共同完成目標的態(tài)度去看設計文檔,便于我們后續(xù)推動,其次放上頁面之間的說明。

設計實現(xiàn) 設計落地

5. 交付開發(fā)

最后總結一下,我們要交付給開發(fā)什么東西,首先是基本的設計稿,包括切圖、間距、動效文件,其次是設計文檔,包括需求背景、需求目標、設計目標、設計修改點說明。

設計實現(xiàn) 設計落地


對接中避免摩擦


1. 不要頻繁修改

在交付設計稿后(基本設計圖、設計文檔),我們就要避免頻繁修改,頻繁的修改會導致設計稿來回更新,對開發(fā)造成一種困惑,最后在測試的時候,開發(fā)同學容易寫亂,另一方面工作過的設計師都應該經(jīng)歷過,我們在開發(fā)的過程中修改設計稿,大部分的開發(fā)都會帶點情緒,甚至不給我們改,這其實是因為大多開發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的,如果中途進行修改可能會影響開發(fā)同學的代碼規(guī)范,就像我們在完成一個設計稿的時候,產(chǎn)品經(jīng)理突然改變需求,我們也是擔心做好的設計稿因為修改而被打亂。

設計實現(xiàn) 設計落地

如果實在需要修改,一定要說明原因,而不是突然一個想法覺得這里設計不合適就進行修改(產(chǎn)品需求修改除外),我們要換位思考,具有同理心去工作,并且讓開發(fā)同學感受到我們是在幫助他們減少工作量,這樣在后續(xù)的一些需求中,我們的對接會很順暢。

設計實現(xiàn) 設計落地

2. 重要信息及時通知

上面說的是站在設計師的角度去修改,還有一種情況是研發(fā)在開發(fā)過程中,作為設計師的我們突然收到產(chǎn)品經(jīng)理的修改建議,這時候我們需要及時的同步給開發(fā),或者給開發(fā)同事達成共識信息,因為很多時候,產(chǎn)品經(jīng)理讓我們修改的時候往往不會通知開發(fā),因為對于產(chǎn)品經(jīng)理而言就是一個小的修改,例如改個位置、改個顏色等等,但不管是對我們還是對于開發(fā)其實都是比較重要的,不及時同步就會出現(xiàn)不好的結果,如果在測試階段沒有發(fā)現(xiàn)問題,上線后就會造成設計師背鍋的情況。

設計實現(xiàn) 設計落地

我曾經(jīng)在做一個頁面改版的時候,就遇到類似的問題,當時產(chǎn)品找到我說改一個地方的交互,并且我也覺得那個交互方式應該改,當時的我以為產(chǎn)品經(jīng)理會同時告訴開發(fā)修改的地方,但是直到項目上線后開發(fā)都沒修改那個地方的交互,本來這個修改點是個小事情,誰知剛好那一個版本被用戶吐槽那個頁面的交互,結果可想而知領導拉個會議開始復盤,為什么沒有改,索性大家沒有互相甩鍋的情況,產(chǎn)品經(jīng)理說沒有同步到開發(fā),而我也是幫產(chǎn)品兜了一下說更新設計稿沒有告訴開發(fā),這個事情原本是個很小的事情,只需要我順口同步給開發(fā),就能夠避免的,就因為我沒有及時同步,造成用戶的反饋,影響了產(chǎn)品的體驗。

所以各位設計師工作中如果遇到類似的事情一定要及時同步!

3. 統(tǒng)一需求目標

開始講到過,在需求評審的時候要與開發(fā)對齊目標,為什么需要對齊目標,因為一個項目如果目標不對齊,那么每個人都會站在自己的角度去做這個需求,設計師思考的是通過設計的手段,去幫助產(chǎn)品完成目標,如果設計稿上的復雜效果較多的時候,開發(fā)則會考慮你為什么這么做,這么做開發(fā)成本非常高等等,這也是說為什么我們開始就講要輸出設計文檔,如果這一切都不存在的話就會導致開發(fā)是帶著疑問寫我們的頁面,如果過程中在修改需求什么的,那我們跟開發(fā)又要相愛相殺了。

設計實現(xiàn) 設計落地

我的設計方式是通常是在產(chǎn)品評審階段就與開發(fā)明確講清楚,我大概要做什么樣的效果,什么的交互形式,預計什么時候會交初步方案,中途也可能會有修改的點等等,提前讓開發(fā)有個心理預期,避免在開發(fā)過程中產(chǎn)生抵抗情緒。

我的經(jīng)驗

設計實現(xiàn) 設計落地

4. 輸出交互動畫

如果在前期沒有時間進行動效設計并沒有關系,研發(fā)在開發(fā)過程中可以在把動效方面給空出來后續(xù)寫,這里講的交互動畫分為兩種,一種是展示的動畫,一種是 ui 中的動效。

展示動畫

目的是為了告知開發(fā)頁面運動的軌跡,在 1-4 中講到我個人用的方法,大家如果是剛對接研發(fā)的話,建議還是輸出完整的交互動畫,這里推薦一些工具 AE、Principle、Pixso、Figma 等。

設計實現(xiàn) 設計落地

AE:大家就比較熟悉了,經(jīng)典的動效繪制軟件,什么樣的效果都能實現(xiàn),但是使用成本比較高(不建議)

Principle:國外的一款交互軟件,制作頁面交互很方面,可以直接導入 figma 和 sketch,由于是國外軟件需要使用英文界面,但是國內也有漢化版。

Pixso:國產(chǎn)最新的設計軟件與 figma 類似,做交互的方式是使用多個頁面添加熱區(qū)進行使用,具體體驗如何還不清楚(可以用用)

Figma:設計軟件目前的天花板,流暢的體驗,支持頁面動畫設計,但是需要安裝插件才可以(建議使用)

動效文件

這個比較重要!我們一定要與研發(fā)同事溝通好,產(chǎn)品內使用什么樣格式的動效文件,統(tǒng)一后能提升后續(xù)的開發(fā)效率,動效格式使用亂套的話,后續(xù)我們做更新迭代時做替換會很麻煩,開發(fā)也同樣如此,這里推薦幾種動效格式文件,分別是 GIF、json、pag、svga 這 4 種。

設計實現(xiàn) 設計落地

GIF:傳統(tǒng)的動效文件格式,優(yōu)點是學習成本低,第一個缺點是內存大,圖片容易失真模糊,他的原理就是把每一幀的圖片融合在一起,最后形成動畫,圖片越多,內存越大,第二個缺點是占用產(chǎn)品資源,當內存過高時,在加載時會出現(xiàn)卡頓。

設計實現(xiàn) 設計落地

Json:該文件格式是通過 Lottie 實現(xiàn)的,是 Airbnb 開發(fā)的一款能夠為原生應用添加動畫效果的開源工具,它的優(yōu)點就是內存小、無需加載、動畫不會失真,缺點呢就是支持得動畫方式?jīng)]有 gif 那么全面,以及使用成本也比較高。

設計實現(xiàn) 設計落地

具體使用步驟是需要我們裝 ae 插件 bodymovin,通過插件導出 json,常遇見的問題就是在導出漸變動畫時,漸變效果會消失,這是因為我們 ae 安裝得都是中文版,而該插件更多的適配是英文版,不過沒關系這里可以把漸變效果的名字改為 gradient fill1 就可以了,如果多個漸變的話我們更改后面序列號就可以,比如 gradient fill1、gradient fill2、gradient fill3…,這里把漢化插件鏈接也給大家找到了。

網(wǎng)站鏈接:https://zdo.fun/?p=557

我的經(jīng)驗

設計實現(xiàn) 設計落地

Pag:pag 是騰訊研發(fā)的一種技術文件,最初主要用于游戲動畫和直播動畫,用來解決復雜的動畫效果,目前在 ui 頁面中運用也比較多,優(yōu)點是占比內存比 json 文件更小,支持的動畫方式也更豐富,運行時可編輯,缺點是適配原生有些問題,壓縮位圖時會出現(xiàn)不顯示,這個軟件目前還在完善階段,我曾經(jīng)也使用過,后來因為適配問題就放棄了,感興趣的大家可以通過下面鏈接下載。

網(wǎng)站鏈接:https://pag.io/docs/install.html

設計實現(xiàn) 設計落地

svga:該文件格式的強大之處在于可以完整的將位圖轉換成二進制代碼,并且內存占比較于 json 更小,播放資源占用更低,并且技術上相對穩(wěn)定(建議使用)

網(wǎng)站鏈接:https://svga.io/designer.html

我們看下 svg 實現(xiàn)的效果

設計實現(xiàn) 設計落地

最后,我們一定要統(tǒng)一產(chǎn)品內使用的動效文件格式,這樣既方便我們,也方便開發(fā),讓開發(fā)看到我們設計師的嚴謹性,便于后續(xù)合作。


對接后應該干什么


1. 跟進開發(fā)進度

作為設計師,我們需要實時了解開發(fā)的進度,這樣能夠保證我們在過程中掌握自己的設計節(jié)奏,什么時間交給開發(fā)動效文件,如果進行修改也可以不影響上線時間(當然不建議這樣做),那么具體需要怎么跟進呢,大概分為以下幾個維度。

設計實現(xiàn) 設計落地

時間進度跟進:

設計師可以時不時的問一嘴,是否能按照正常的計劃時間節(jié)點提測(正常需求提交后,開發(fā)會給出開發(fā)排期,盡量按照時間排期走,否則項目進度會變得很不可控)。

如果開發(fā)反饋時間會有延期風險,那設計師第一時間就要了解原因,以及預計延期多久,然后自身評估以下對設計上是否有影響。

設計實現(xiàn) 設計落地

需求變更跟進:

一般開發(fā)過程中,或多或少都會出現(xiàn)一些需求調整/變更的點,那么其中就會涉及設計上的改動,改動小的話產(chǎn)品經(jīng)理有時候會直接告訴我們,并不會告訴開發(fā),這時候如果身為設計師的我們要及時通知開發(fā),并說明原因(避免爭論)。

并且,需求變更后,需要和開發(fā)評估新的項目上線時間點,站在我們或者產(chǎn)品角度理解有時候我們認為的修改,對于開發(fā)來講是耗費時間較長的,需要我們注意是否會影響上線時間。

設計實現(xiàn) 設計落地

交互動效實現(xiàn)跟進:

在 2-4 中講到我們要輸出交互動畫,雖然我們輸出的動畫很直觀,以及動效文件也完整,但是避免不了認知上的偏差,有時候開發(fā)會按照技術難度以及自身理解去完整交互效果,我們中途要隨時跟進了解,避免開發(fā)在錯誤的路上越走越遠。

設計實現(xiàn) 設計落地

測試跟進:

及時了解該需求是否已經(jīng)提測、哪些還未提測,若到了提測時間的功能未進入測試,可以詢問產(chǎn)品或開發(fā)什么原因,這樣對項目或設計師都是負責的。

另外一點是我們設計師需要在提測階段介入 UI 走查,因為各個公司或者項目測試時間有長有短,所以我們要及時把 UI 走查工作介入進去,給開發(fā)預留出修改時間,有的小公司不重視 UI 走查流程,這里我們就可以自驅進行走查,主動找測試同學了解提測時間,及時走查,保證頁面還原度。

2. 設計走查

走查是 UI 工作中最為重要的工作,它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶,下面我大致把走查的流程以及范圍給大家梳理下。

創(chuàng)建走查文檔

在 UI 走查階段,我們首先需要建立走查文檔便于開發(fā)瀏覽解決,走查文檔主要包含日期、版本、項目名稱、模塊、端口、問題描述、修改狀態(tài)、圖片標注,這樣一方面能夠讓問題更加詳細,體現(xiàn)設計師的專業(yè)度,一般我是使用在線表格去建立走查文檔,當然這個看每個公司所使用的協(xié)作平臺。

設計實現(xiàn) 設計落地

開通手機權限

一般在走查移動端產(chǎn)品時,安裝測試包需要開通賬號權限,這里可以找公司的開發(fā)或者測試同事給開通,避免影響走查效率。

走查范圍

分為基礎走查、細節(jié)走查、適配走查

基礎走查包含字體、顏色、圖標、間距、對齊方式等具體可根據(jù)產(chǎn)品形態(tài)進行延伸,其中間距走查比較費時間,需要我們通過測試機截圖后,按照倍數(shù)縮放到源文件內進行測量,測試機分辨率需要保證與設計稿一致,否則測量不準確,例如設計圖是 375*812,以 ios 為例測試機則需要使用與 375*812 分辨率相同的尺寸測試。

設計實現(xiàn) 設計落地

細節(jié)走查包含字體截字、按壓狀態(tài)、組件內容、交互狀態(tài)

設計實現(xiàn) 設計落地

適配走查包含關鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識別度是否清晰

設計實現(xiàn) 設計落地

3. 避免添加復雜交互

在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想,并未達到預期,我們可以與開發(fā)進行溝通是否可以修改,或者添加新的交互效果,因為在這個階段我們重新設計或者定義一個新的交互動效的話,會增加非常大的開發(fā)工作量,可能也會與開發(fā)產(chǎn)生爭吵,我們在這個時期盡量避免這個問題,如果實在沒有解決辦法的時候再去添加新的交互。

我在工作中,如果遇到這種事情,會分兩點考慮這個事情。

第一評估下當下這個交互效果是否會影響用戶體驗,如果影響用戶體驗我會要求開發(fā)必須 100%還原,當然我會講述清楚為什么改,避免讓開發(fā)產(chǎn)生情緒抵抗。

第二是如果不影響用戶體驗,但是還原度沒有達到預期,我同樣會先找開發(fā)進行溝通,例如按照交互稿還原會有什么困難,是時間上的困難還是技術上的困難,時間上如果困難我會溝通好下一期必須還原到位,技術上困難我一般會修改交互形式,盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。

設計實現(xiàn) 設計落地

4. 數(shù)據(jù)追蹤

作為設計師在需求上線后并不代表需求就結束了,我們還需要追蹤數(shù)據(jù)情況是好是壞,為什么我們設計師要去追蹤這個數(shù)據(jù)呢,追蹤數(shù)據(jù)是為了讓我們在工作中提升自己的設計價值,隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和,那么企業(yè)對于各個崗位的要求也跟互聯(lián)網(wǎng)初期不一樣,以前我們只需要畫畫圖交付就可以了,但是現(xiàn)在的企業(yè)更看重的是綜合能力,說簡單點就是做 UI 的人很多,優(yōu)秀的 UI 一樣很多,那么我們就得被迫提升核心競爭力否則就是被淘汰。

而追蹤數(shù)據(jù)其實就是增加我們得核心競爭力,同時也是能夠體現(xiàn)自己設計能力的一項內容,設計最終是為商業(yè)而服務的,但我們不能嘴上說說,而是要拿出實際的行動,這個行動就是數(shù)據(jù),我們的設計如何為數(shù)據(jù)賦能的,如何幫業(yè)務達到目標等等,數(shù)據(jù)如何分析是個很龐大的體系這里只講下我們身為設計師為什么需要追蹤數(shù)據(jù)。

簡單講下工作中數(shù)據(jù)解析的案例。

下面是我做的一個直播商業(yè)化改版需求,改版背景呢是直播業(yè)務由原先的為 c 端用戶賦能改為,為 b 端企業(yè)賦能,通過與企業(yè)合作而產(chǎn)生價值,那么基于這個直播形態(tài)肯定是需要變化的,需求目標由原先的「用戶收益」改為「企業(yè)收益」,新的目標具體為提升企業(yè)品牌曝光點擊、互動、預約人數(shù)、提升直播在企業(yè)客戶測的感知收益。

案例

設計實現(xiàn) 設計落地

基于這個目標,其實不難發(fā)現(xiàn),目標已經(jīng)從用戶側改為大客戶,更多的是為企業(yè)去賦能,頁面的結構肯定需要進行變化的,左邊的圖呢是改版之前的,右邊的是改版之后的,那么我當時的思路呢其實就是基于數(shù)據(jù)方面去進行優(yōu)化。

整體:產(chǎn)品策略添加了二級浮窗用來承載更多內容。

直播介紹:首先舊版策略是直播介紹對于用戶而言并不重要,用戶只需要通過看到直播標題就能夠了解大致直播內容,更多是以引導形式存在,所以信息外漏較少,而新的策略是講企業(yè)介紹默認展示在二級浮窗內,用戶可選擇關閉,提升企業(yè)感知。

投遞簡歷:舊版策略是需要側重用戶投遞率,因此在預約界面就展示入口,而新的策略是需要給企業(yè)強化觀看人數(shù)、預約人數(shù)從而提升客戶價值,基于這一點,我當時是通過數(shù)據(jù)后臺看了下預約頁面的點擊數(shù)據(jù),發(fā)現(xiàn)點擊率最最高的是「投遞簡歷」入口,而「預約直播」入口點擊率相對較低,因此把投遞簡歷入口調賬到浮窗 tab 區(qū)域,降低層級,讓預約直播成為視覺焦點,而上線后數(shù)據(jù)也是符合預期。

企業(yè)關注:將企業(yè)名稱與關注結合并且放大,提升關注量,強化企業(yè)品牌感知和數(shù)據(jù)感知,關注與預約直播兩者無論數(shù)據(jù)高低,都是符合企業(yè)目標,從而便于業(yè)務人員與企業(yè)進行合作溝通。

設計實現(xiàn) 設計落地

從我這個案例中我們能清楚看到,基本上任何需求都是可以通過數(shù)據(jù)的維度,進行優(yōu)化,并且通過量化指標提升設計價值,無論對公司還是個人都有很大收益,并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對接時,可以通過數(shù)據(jù)維度去促進我們設計上的修改、完善等工作,這也是為什么說我們需要對每個需求都要進行數(shù)據(jù)追蹤。


總結


無論是對接前、對接中、對接后,在哪個階段都需要我們認真對待,熟知這些細節(jié)后,才能更好的與開發(fā)合作,進行項目推進,優(yōu)秀的設計師不僅是專業(yè)和技術上的成熟,還需要有協(xié)作上下游的能力,在很多團隊中設計師跟開發(fā)都會面臨不一樣的挑戰(zhàn)最終可能會因為某些問題發(fā)生沖突,我們需要減少這樣的沖突。



作者:愛吃貓的魚



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。 



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

優(yōu)秀設計的背后,離不開這11個應該掌握的底層理論

博博

1. 奇數(shù)原則和三分法構圖


奇數(shù)法則意思是說,在設計作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱,這可能會顯得過于正式和不自然。比如,在一行中排列三個或五個卡片會比 2 個或 4 個效果更好,作品會更加讓用戶感到舒服和自然。

設計原則 設計方法 設計理論

Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設計

三分法構圖(也被稱之為黃金網(wǎng)格規(guī)則),在畫面中以水平和豎直方向分成 3×3 的網(wǎng)格和 4 個交叉點。這個規(guī)則能很好的協(xié)助設計師將最重要的元素放在網(wǎng)格的交叉點上,這樣可以很容易的設計出滿意的構圖。

為什么會這樣?因為三分法構圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美,產(chǎn)生了更有吸引力的構圖。

設計原則 設計方法 設計理論

2. 視覺引導線


你希望用戶關注哪些地方?高級設計師非常擅長引導用戶的視覺焦點,這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感,也能為畫面增添視覺沖擊力。

達到這種效果通常用特定的形狀和線條,或者是它們的組合形成難以察覺的引導線來實現(xiàn)。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。

設計原則 設計方法 設計理論

從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上

3. 大小和比例


大小(scale)是設計中一個元素與另一個元素的相對大小。元素通過大小不同創(chuàng)建視覺層次,其中最大的元素首先會吸引用戶的注意力,因此看起來是最重要的。常規(guī)的設計策略就是將最重要的元素做成最大的,然后逐級遞減。

比例(Proportion)不同于大小,類似但有區(qū)別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小,但它們之間的大小差異,整體來看就是比例。

熟練地使用大小和比例是實現(xiàn)設計統(tǒng)一的關鍵。當一些元素的大小過大或過小,或者比例失調時,設計組合就會失去統(tǒng)一性。這種錯誤可能發(fā)生在排版和其他元素上。例如,標題與子標題和正文相比顯得過大。當設計元素失衡時,設計就會“感覺不平衡”。

設計原則 設計方法 設計理論

大小和比例都沒做好時(左圖),看起來處理的比較細致了,但依然沒有做到很好,在大小上正文和標題分不清(右圖)。

4. 強調


強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出,即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母,因為沒有強調就沒有層級。

與其他一些設計原則一樣,“強調”是用來引導人們關注設計,并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在 99%的情況下都使用這種原則。

設計原則 設計方法 設計理論

使用這個原則,在購物網(wǎng)站上強調了標語和產(chǎn)品,轉化效果非常好

5. 統(tǒng)一性


統(tǒng)一是指設計元素如何很好地結合在一起,形成“視覺凝聚力”。它指的是設計中的連貫性,讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系,以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理,質量也更高。

運用統(tǒng)一的配色,重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感,也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來,形成一個完美的整體。

設計原則 設計方法 設計理論

一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。

6. 接近原則


格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠,元素就顯得越不相關,它們之間的關系就會減弱。一般來說,人們會認為遠離的元素是不相關的。

不應該讓用戶在設計中分辨哪些元素是相互關聯(lián)的,正如美國郵政服務的例子所顯示的那樣,缺乏對鄰近性的關注會導致直接的認知緊張,損害用戶體驗。

設計原則 設計方法 設計理論

接近原則沒做好的案例。由于字段標簽離它們下面的字段更近,人們可能會搞混

下面是一個鄰近性原則做的好的案例,我們可以看到相關元素是如何通過鄰近性關聯(lián)起來的(分組的元素用紫色表示)。

設計原則 設計方法 設計理論

一個把接近原則用好的網(wǎng)頁設計案例

7. 一致性


一致性原則使數(shù)字產(chǎn)品的使用更加可預測,符合用戶的期望。設計中的一致性可以培養(yǎng)熟悉度,它可以提高用戶體驗、可用性和用戶使用效率。另一方面,不一致的設計將產(chǎn)生更多的認知負荷/腦力勞動,并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!

做好一致性可以增強“審美凝聚力”。“我們都知道,當我們使用應用時,應用的導航位置如果經(jīng)常變化,或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色,這是多么令人沮喪。

除了視覺一致性和易用性,品牌一致性在產(chǎn)品設計中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn),如排版、配色和圖案,高質量的品牌體驗將無法傳遞。

在用戶體驗方面,一致性意味著在設計中使用相似的 UI 元素來完成相似的任務,即在整個產(chǎn)品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性,所以一致性對用戶體驗的可用性有很大的貢獻。

設計原則 設計方法 設計理論

一致性是通過使用相同的配色、排版、間距、模式和交互來實現(xiàn)的。

8. 顏色


顏色在設計中是非常重要,幾乎是設計中最具影響力的創(chuàng)意元素。一個深思熟慮的配色可以讓一個設計從普通到驚艷,而一個平庸的配色會降低用戶的體驗,甚至阻礙他們使用產(chǎn)品的能力。

明亮、豐富的顏色比柔和的顏色更引人注目,因此有更大的視覺沖擊。柔和的顏色可以提供一個令人愉快的,微妙的配色方案,但適當?shù)膶Ρ缺仨氁?,特別是文字,必須保證可讀性。

顏色甚至可以用于呈現(xiàn) UI 中的結構感并指向可用的交互,但為設計制作一個配色方案并不是一項簡單的任務。除了品牌化,還必須非常小心地創(chuàng)造顏色的和諧和耐用性,使得它能在各個場景下都能正常使用。

色彩心理學也不容忽視。色彩承載著意義和情感,可以向人的潛意識傳遞信息。在品牌方面,人們對顏色做了大量的心理學研究,因為在人們與品牌進行任何互動之前,顏色會讓他們產(chǎn)生一種本能的反應。例如,藍色通常被認為是可靠的、安全的和平靜的,想想銀行;而紅色是刺激的,被認為是增加人們的心率,想想飲料包裝。

設計原則 設計方法 設計理論

一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質,并使用了少量的顏色。

9. 排版


排版在設計中扮演著非常重要的角色,它的重要性再怎么強調都不為過。在構圖中,字體樣式對人們感知設計的影響比任何其他元素都大,可能除了顏色。

因為我們的大腦以閃電般的速度運轉,一個字體會對一個設計產(chǎn)生影響,以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣,字體甚至會影響我們的情緒,資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體,我們可以傳達出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。

排版層次結構可以快速建立視覺層次結構,并且通常在其中扮演重要角色。因此,在設計中經(jīng)常使用不同的字體和字體大小來表示層次結構,例如標題、副標題、正文和引用。

“除了確保文本清晰易讀,排版可以幫助你理清信息層次,傳達重要內容,并表達你的品牌?!?——蘋果的人機界面指南

設計原則 設計方法 設計理論

蘭博基尼的網(wǎng)站巧妙地使用了排版風格和比例來賦予其設計力量。

10. 負空間(又名留白)


Claude Debussy 曾說過,“音樂是音符之間的空間“。同樣的觀點也適用于設計,元素之間的負空間給予設計強調、平衡和統(tǒng)一。

元素周圍適當?shù)呢摽臻g將焦點集中在元素本身。它強調了內容,并提供了必要的喘息空間,以確保布局不顯得雜亂。沒有了呼吸空間,人腦就不太可能掃描興趣點,更容易感到困惑。

設計原則 設計方法 設計理論

蘋果官網(wǎng)提供了一個利用負空間創(chuàng)造強烈焦點的杰出例子。

11. 最后


人們已經(jīng)開始期待所有平臺和設備上的優(yōu)化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業(yè)技能設計它們是創(chuàng)造具有視覺吸引力的功能性設計的關鍵。我們不要忘記,美學的完整性會嚴重影響用戶體驗。

基于原則的設計是設計師在感覺有點迷失或用盡創(chuàng)意時可以依賴的黃金標準方法。在沒有理解和實現(xiàn)設計原則的情況下,也可能實現(xiàn)可接受的設計。然而,這可能需要大量的嘗試和錯誤才能創(chuàng)造出看起來不錯的內容,并創(chuàng)造出最佳的用戶體驗。

產(chǎn)品的美學質量與它的實用性密不可分,因為我們每天使用的產(chǎn)品影響著我們和我們的幸福。但只有精心制作的物品才會美麗?!?Dieter Rams(迪特爾·拉姆斯)

當我們不關注由設計原則驅動的設計質量時,我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時,品牌就會受到傷害,產(chǎn)品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹, 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?!?

設計的細節(jié)成就了設計本身?!?查爾斯 伊姆斯(Charles Eames)

作者:彩云Sky

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 

分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。 

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

懸浮小窗該如何設計?高手的樣本分析來了!

博博

1. 前言


懸浮小窗是什么?

先看張圖,對懸浮小窗有一個大致的概念,下圖是花椒直播 APP 中的直播懸浮小窗。(為方便書寫,下文將懸浮小窗簡稱為小窗)

UI設計 交互設計 小窗設計 懸浮小窗

本文的懸浮小窗指的是視覺空間上的層級概念。

用戶的感知是:

  1. 自己退出了 A 房間到達了另一個 B 房間
  2. 同時 A 房間并未完全關閉,而是以一個小窗口的方式懸浮著
  3. 我隨時可以點擊這個小窗口返回 A 房間

為什么這種感知能應用到互聯(lián)網(wǎng)產(chǎn)品中?

原因就在于這符合尼爾森可用性原則中的系統(tǒng)與用戶現(xiàn)實匹配原則。

即:設計應與用戶現(xiàn)實生活中對相關產(chǎn)品的認知、經(jīng)驗、習慣等相符,以用戶期望的方式表現(xiàn)出來,使用戶可以利用已有的知識經(jīng)驗來執(zhí)行操作任務。

翻譯成人話就是讓用戶在使用我們的產(chǎn)品時能夠和現(xiàn)實生活中的習慣對應起來。

舉個例子:

電商軟件中“購物車”為什么使用購物車這一形象和名稱?

其實就是和現(xiàn)實生活對應起來的,生活中逛超市的時候會把要買的東西加入購物車一起結算。所以“購物車”這個概念遷移到互聯(lián)網(wǎng)后用戶的理解成本就非常低。

懸浮小窗也是一樣的道理,小窗模擬了生活中的空間轉移,在用戶的心智層,界面與界面之間的跳轉就類似于從一個房間到達另一個房間。

即使某些時候多個界面在技術的角度其實就是一個頁面,但是站在用戶的角度看不到這些底層邏輯,最直觀的就是一個個房間之間的切換。

(其實這里還涉及到另一個概念,把簡單留給用戶,把復雜留給程序。不管邏輯多復雜,對用戶來說,就是兩個空間的跳轉。)

UI設計 交互設計 小窗設計 懸浮小窗

2. 懸浮小窗的特點


懸浮小窗有三個特點:可切換界面、Z 軸最高、可拖拽(一般情況)。

① 可切換界面

如上一節(jié)所說,懸浮小窗就像是房間的切換,所以感官上懸浮小窗就是切換界面的作用。

② Z 軸最高

二維界面如何存在 Z 軸的概念?

大家在使用 APP 過程中一定遇到過彈窗和浮層的情況,如下圖,可以看到圖中 APP 的彈窗在感知上是覆蓋在內容層上的。

而右邊的截圖中的浮層是浮在正文內容上的,這就是 Z 軸,在互聯(lián)網(wǎng)應用中這是比較抽象的空間維度。但是卻是用戶可以明確感知到的,而感知的最直接方式就是覆蓋或者懸浮,感覺到 A 元素是覆蓋在 B 元素之上,或者 A 元素懸浮在 B 元素之上。

UI設計 交互設計 小窗設計 懸浮小窗

而懸浮小窗所謂 Z 軸最高則是因為懸浮小窗在 Z 軸的維度一般位于 APP 界面所有元素之上。

③ 可拖拽

可拖拽很好理解,即用戶可以通過拖拽移動懸浮小窗的位置,不過一般非直播音頻類產(chǎn)品會喜歡固定在界面的某個地方。比如得到 APP 在聽書時退出聽書頁面會在底部固定一個播放條。

3. 懸浮小窗分類


技術維度把懸浮小窗分為兩種:系統(tǒng)自帶和自行開發(fā)。

UI設計 交互設計 小窗設計 懸浮小窗

內容維度上把懸浮小窗分為三種:視頻小窗、音頻小窗、文檔小窗(含白板)

UI設計 交互設計 小窗設計 懸浮小窗

由于系統(tǒng)自帶畫中畫功能自定義程度不高,無參考意義,下文主要從自行開發(fā)的懸浮小窗入手,從視頻小窗、音頻小窗和文檔小窗(含白板)三種分類來進行分析。

4. 總結


此部分內容是對第三部分的總結提煉,相關產(chǎn)品詳細分析、截圖以及錄屏細節(jié)請查看第三部分。

① 視頻小窗

UI設計 交互設計 小窗設計 懸浮小窗

UI設計 交互設計 小窗設計 懸浮小窗

GIF 演示(左滑屏幕邊緣開啟小窗)

UI設計 交互設計 小窗設計 懸浮小窗

GIF 演示(拖拽小窗超出屏幕邊緣后關閉)

UI設計 交互設計 小窗設計 懸浮小窗

視頻小窗 UI 集合

② 音頻小窗總結

UI設計 交互設計 小窗設計 懸浮小窗

UI設計 交互設計 小窗設計 懸浮小窗

音頻小窗 UI 集合

③ 文檔小窗

UI設計 交互設計 小窗設計 懸浮小窗

UI設計 交互設計 小窗設計 懸浮小窗

文檔小窗 UI 集合

5. 樣本分析

本次調研 APP 覆蓋直播、音樂、社交、教育、會議、資訊四個方向,包括斗魚、虎牙、花椒直播、企鵝直播、CC 直播、阿里巴巴、淘寶、酷狗直播、陌陌、微信、陌陌、百度知道、邁聆會議、金山會議、網(wǎng)易會議、共計 15 款 APP。

① 視頻小窗

視頻小窗將從功能和 UI 兩個大的維度進行分析,細分維度如下表格。

UI設計 交互設計 小窗設計 懸浮小窗

斗魚

APP 簡介:以游戲直播為主的互動式直播平臺

亮點

a 導航欄免遮擋,小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄,可避免將主要導航遮擋住

b「關閉」按鈕視覺強度較弱的同時能夠看清 icon

槽點

放大縮小不流暢,有卡頓的感覺

UI設計 交互設計 小窗設計 懸浮小窗

虎牙直播

APP 簡介:包含游戲、娛樂的互動式直播平臺

亮點

a 滑動小窗到屏幕關閉小窗:除了點擊關閉按鈕,還可以左滑小窗到左右屏幕邊緣,超出屏幕 2/3 時關閉小窗

b 同斗魚,導航欄免遮擋,小窗拖拽移動過程中不會覆蓋一級導航和一級頁面的底部 tab 欄,可避免將主要導航遮擋住

槽點

自動打開聲音:在小窗上將聲音關閉后,點擊小窗上的放大按鈕進入全屏模式,此時聲音會自動打開。聲音的開關應該由用戶自行選擇而非幫用戶做選擇,萬一用戶所處場合不適合開聲音,突然開啟的聲音豈不是很尷尬。

UI設計 交互設計 小窗設計 懸浮小窗

花椒直播

APP 簡介:包含游戲、娛樂的互動式直播平臺

槽點

a 同虎牙,關閉聲音的情況下打開直播間會自動打開聲音

小窗會移動時可以擋住頂部一級導航欄

UI設計 交互設計 小窗設計 懸浮小窗

得到

APP 簡介:知識服務 APP,提供電子書、課程等服務。視頻以點播為主。

亮點

向下滑動視頻觸發(fā)小窗的方式交互非常友好且順手

頁面切換到有『發(fā)布』懸浮按鈕時,懸浮按鈕位置位于小窗之上,避免遮擋發(fā)布按鈕

UI設計 交互設計 小窗設計 懸浮小窗







作者:土撥鼠



藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。 



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

排版不必花里胡哨 | 設計技巧

seo達人


圖片

圖片圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

圖片

 

圖片

有些人可能會說,我要是這么排版,客戶肯定不會覺得太簡約了、重做,我只能說有這個可能,畢竟每個人的喜好和具體的需求是不一樣的,所以,你要用在合適的產(chǎn)品和客戶上,不要千篇一律;其次也不能直接照搬日本設計的排版,比如大量的豎排在中文設計里不合適,還是要以橫排為主;另外,很多時候客戶不是不喜歡簡約一點,而是不喜歡你做的簡約,如果你把客戶的需求都表達出來了,還簡約好看,客戶沒理由不喜歡。 


作者:蔥爺

轉載請注明:學UI網(wǎng)》排版不必花里胡哨 | 設計技巧

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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



案例錦囊|有哪些小交互讓你瞬間覺得產(chǎn)品很「智能」?

seo達人


一、猜到了你想要的

案例 1    使用“多多買菜”加購一款蔬菜,平臺會自動為你提供更多規(guī)格做選擇。比如你將 500 克的西紅柿加入購物車,平臺會告訴你可以買“兩盒裝“,價格更優(yōu)惠:

圖片

 

案例 2     脈脈上,如果對于自己所在的公司的內容進行評價,系統(tǒng)會直接采用隨機命名的方式,給你起一個有趣的新名字,起到了保護你隱私的作用,讓你放心大膽地講實話:

圖片 

案例 3     bilibili 上的很多主播會給觀眾做與內容相關聯(lián)的進度條,你可以很清楚的看到視頻每一段的具體內容和播放進度,跳播更方便:

圖片

 

案例 4     用搜狗輸入法輸入“今天天氣”的這幾個字時,會自動推薦當天的天氣情況。你可以提醒你在乎的人注意天氣變化:

圖片

 

案例 5     產(chǎn)品也可以阻止你做壞事。Adobe Photoshop 軟件中內置了一個鈔票防偽系統(tǒng),用來防止你利用其制圖功能非法制作假鈔:

圖片

 

二、知道你不知道的

案例 1     高德地圖會給用戶很多條可選路線,對于每條路線都會給出詳細建議,比如:擁堵少、紅綠燈少,還會給出明顯提示:“窄路多,需要小心駕駛” 或者 “路上有一個新增電子眼” —— 它知道很多你不知道或記不住的內容:

圖片

 

案例 2    在百度瀏覽器上查找不同單位之間的換算時,百度會呈現(xiàn)出與你搜索的內容相關的所有單位名稱,便于你進一步做查找和換算:

圖片

 

案例 3     夸克 App 上搜索熱點話題,會出現(xiàn)與事件相關“大事項”,以時間倒序的方式還原事件始末,為群眾們吃瓜提供了便利。下圖是我在 2021 年 12 月 20 日那天搜索王力宏事件時看到的信息內容:

圖片

 

案例 4     在微信中搜索文章時,如果有虛假謠言類的文章,微信不會讓文章不可見,而是會鄭重其事地做官方辟謠,幫助你矯正觀念,粉碎謠言:

圖片

 

三、替你做完該做的

案例 1     在新的網(wǎng)絡環(huán)境中使用蘋果設備連接 Wi-Fi,具備同樣 Apple ID 的設備可以進行 Wi-Fi 的密碼共享,不需要你再重新輸入密碼:

圖片

 

案例 2     釘釘和阿里的出差系統(tǒng)打通,當你提交了出差申請,到了出差的那一天,釘釘上狀態(tài)會自動切換成 「??出差中」,方便其他同事了解你的工作狀態(tài):

圖片

案例 3     如果你晚上臨睡前將蘋果手機連上充電器充電,iOS 手機系統(tǒng)的「計劃充電」功能會根據(jù)你的使用習慣,在電量達到 80% 時就會停止充電。然后在你第二天早上使用前再繼續(xù)充電直到充滿,以此延長電池的使用壽命。這意味著 iOS 系統(tǒng)要準確判斷出你每天開始使用手機的時間。你也不用因為擔心整夜充電對電池有損害而選擇不在晚上充電或是半夜爬起拔掉電源:

圖片

 

案例 4     在屏幕很暗的情況下,打開微信或支付寶的支付二維碼,屏幕會瞬間亮起,便于商家掃碼付款,不需要你手動調亮屏幕,掃碼后又會回到之前的屏幕亮度:

圖片

 

四、把復雜的事情變簡單

案例 1     用飛豬 App 查找酒店時,可以在地圖上用手指畫圈,不需要輸入街道名稱就可以滿足你自定義范圍來找酒店的需求:

圖片

 

案例 2     微信的圖片搜索的功能,可以通過圖片里的文字和內容來檢索圖片,比如你只需要輸入“食物” 二字,就可以看到與食物相關的所有圖片。你再也不需要在一堆圖片中找到眼花了:

圖片

 

案例 3     NN/g 網(wǎng)站移動端的支付流程中,“銀行卡可用時間”的輸入框使用了特定的格式輸入效果,你不需要糾結輸入內容的格式問題,可以很輕松地完成填寫:

圖片

 

案例 4     蘋果的 Airdrop 箭頭是一種方向性的指示,將你的 iPhone 對準對方的 iPhone,就能很快速地在周邊一群設備中找到對方。同時 Airdrop 自己也有記憶,你經(jīng)常發(fā)送的用戶和綁有你自己 ID 的設備,都會靠前顯示:

圖片


作者:元堯

轉載請注明:學UI網(wǎng)》案例錦囊|有哪些小交互讓你瞬間覺得產(chǎn)品很「智能」?

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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



超全面的設計底層理論,優(yōu)秀設計背后離不開這些(下)

seo達人


圖片

 

一、奇數(shù)原則和三分法構圖

奇數(shù)法則意思是說,在設計作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱,這可能會顯得過于正式和不自然。比如,在一行中排列三個或五個卡片會比2個或4個效果更好,作品會更加讓用戶感到舒服和自然。

圖片

 Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設計

三分法構圖(也被稱之為黃金網(wǎng)格規(guī)則),在畫面中以水平和豎直方向分成3×3的網(wǎng)格和4個交叉點。這個規(guī)則能很好的協(xié)助設計師將最重要的元素放在網(wǎng)格的交叉點上,這樣可以很容易的設計出滿意的構圖。

為什么會這樣?因為三分法構圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美,產(chǎn)生了更有吸引力的構圖。

圖片

 

二、視覺引導線

你希望用戶關注哪些地方?高級設計師非常擅長引導用戶的視覺焦點,這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感,也能為畫面增添視覺沖擊力。

達到這種效果通常用特定的形狀和線條,或者是它們的組合形成難以察覺的引導線來實現(xiàn)。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。

圖片

從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上

 

三、大小和比例

大?。╯cale)是設計中一個元素與另一個元素的相對大小。元素通過大小不同創(chuàng)建視覺層次,其中最大的元素首先會吸引用戶的注意力,因此看起來是最重要的。常規(guī)的設計策略就是將最重要的元素做成最大的,然后逐級遞減。

比例(Proportion)不同于大小,類似但有區(qū)別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小,但它們之間的大小差異,整體來看就是比例。

熟練地使用大小和比例是實現(xiàn)設計統(tǒng)一的關鍵。當一些元素的大小過大或過小,或者比例失調時,設計組合就會失去統(tǒng)一性。這種錯誤可能發(fā)生在排版和其他元素上。例如,標題與子標題和正文相比顯得過大。當設計元素失衡時,設計就會“感覺不平衡”。

圖片

大小和比例都沒做好時(左圖),看起來處理的比較細致了,但依然沒有做到很好,在大小上正文和標題分不清(右圖)。

 

四、強調

強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出,即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母,因為沒有強調就沒有層級。

與其他一些設計原則一樣,“強調”是用來引導人們關注設計,并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。

圖片

使用這個原則,在購物網(wǎng)站上強調了標語和產(chǎn)品,轉化效果非常好

 

五、統(tǒng)一性

統(tǒng)一是指設計元素如何很好地結合在一起,形成“視覺凝聚力”。它指的是設計中的連貫性,讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系,以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理,質量也更高。

運用統(tǒng)一的配色,重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感,也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來,形成一個完美的整體。

圖片

一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。

 

六、接近原則

格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠,元素就顯得越不相關,它們之間的關系就會減弱。一般來說,人們會認為遠離的元素是不相關的。

不應該讓用戶在設計中分辨哪些元素是相互關聯(lián)的,正如美國郵政服務的例子所顯示的那樣,缺乏對鄰近性的關注會導致直接的認知緊張,損害用戶體驗。

圖片

接近原則沒做好的案例。由于字段標簽離它們下面的字段更近,人們可能會搞混

下面是一個鄰近性原則做的好的案例,我們可以看到相關元素是如何通過鄰近性關聯(lián)起來的(分組的元素用紫色表示)。

圖片

一個把接近原則用好的網(wǎng)頁設計案例

 

七、一致性

一致性原則使數(shù)字產(chǎn)品的使用更加可預測,符合用戶的期望。設計中的一致性可以培養(yǎng)熟悉度,它可以提高用戶體驗、可用性和用戶使用效率。另一方面,不一致的設計將產(chǎn)生更多的認知負荷/腦力勞動,并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!

做好一致性可以增強“審美凝聚力”?!拔覀兌贾?,當我們使用應用時,應用的導航位置如果經(jīng)常變化,或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色,這是多么令人沮喪。

除了視覺一致性和易用性,品牌一致性在產(chǎn)品設計中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn),如排版、配色和圖案,高質量的品牌體驗將無法傳遞。

在用戶體驗方面,一致性意味著在設計中使用相似的UI元素來完成相似的任務,即在整個產(chǎn)品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性,所以一致性對用戶體驗的可用性有很大的貢獻。

圖片

一致性是通過使用相同的配色、排版、間距、模式和交互來實現(xiàn)的。

 

八、顏色

顏色在設計中是非常重要,幾乎是設計中最具影響力的創(chuàng)意元素。一個深思熟慮的配色可以讓一個設計從普通到驚艷,而一個平庸的配色會降低用戶的體驗,甚至阻礙他們使用產(chǎn)品的能力。

明亮、豐富的顏色比柔和的顏色更引人注目,因此有更大的視覺沖擊。柔和的顏色可以提供一個令人愉快的,微妙的配色方案,但適當?shù)膶Ρ缺仨氁?,特別是文字,必須保證可讀性。

顏色甚至可以用于呈現(xiàn)UI中的結構感并指向可用的交互,但為設計制作一個配色方案并不是一項簡單的任務。除了品牌化,還必須非常小心地創(chuàng)造顏色的和諧和耐用性,使得它能在各個場景下都能正常使用。

色彩心理學也不容忽視。色彩承載著意義和情感,可以向人的潛意識傳遞信息。在品牌方面,人們對顏色做了大量的心理學研究,因為在人們與品牌進行任何互動之前,顏色會讓他們產(chǎn)生一種本能的反應。例如,藍色通常被認為是可靠的、安全的和平靜的,想想銀行;而紅色是刺激的,被認為是增加人們的心率,想想飲料包裝。

圖片

一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質,并使用了少量的顏色。

 

九、排版

排版在設計中扮演著非常重要的角色,它的重要性再怎么強調都不為過。在構圖中,字體樣式對人們感知設計的影響比任何其他元素都大,可能除了顏色。

因為我們的大腦以閃電般的速度運轉,一個字體會對一個設計產(chǎn)生影響,以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣,字體甚至會影響我們的情緒,資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體,我們可以傳達出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。

排版層次結構可以快速建立視覺層次結構,并且通常在其中扮演重要角色。因此,在設計中經(jīng)常使用不同的字體和字體大小來表示層次結構,例如標題、副標題、正文和引用。

“除了確保文本清晰易讀,排版可以幫助你理清信息層次,傳達重要內容,并表達你的品牌。” ——蘋果的人機界面指南

圖片

蘭博基尼的網(wǎng)站巧妙地使用了排版風格和比例來賦予其設計力量。

 

十、負空間(又名留白)

Claude Debussy 曾說過,“音樂是音符之間的空間“。同樣的觀點也適用于設計,元素之間的負空間給予設計強調、平衡和統(tǒng)一。

元素周圍適當?shù)呢摽臻g將焦點集中在元素本身。它強調了內容,并提供了必要的喘息空間,以確保布局不顯得雜亂。沒有了呼吸空間,人腦就不太可能掃描興趣點,更容易感到困惑。

圖片

蘋果官網(wǎng)提供了一個利用負空間創(chuàng)造強烈焦點的杰出例子。

 

最后

人們已經(jīng)開始期待所有平臺和設備上的優(yōu)化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業(yè)技能設計它們是創(chuàng)造具有視覺吸引力的功能性設計的關鍵。我們不要忘記,美學的完整性會嚴重影響用戶體驗。

基于原則的設計是設計師在感覺有點迷失或用盡創(chuàng)意時可以依賴的黃金標準方法。在沒有理解和實現(xiàn)設計原則的情況下,也可能實現(xiàn)可接受的設計。然而,這可能需要大量的嘗試和錯誤才能創(chuàng)造出看起來不錯的內容,并創(chuàng)造出最佳的用戶體驗。

產(chǎn)品的美學質量與它的實用性密不可分,因為我們每天使用的產(chǎn)品影響著我們和我們的幸福。”但只有精心制作的物品才會美麗。— Dieter Rams(迪特爾·拉姆斯)

當我們不關注由設計原則驅動的設計質量時,我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時,品牌就會受到傷害,產(chǎn)品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹, 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?!?/strong>

設計的細節(jié)成就了設計本身?!?查爾斯 伊姆斯(Charles Eames)

 

原文:https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d

作者:Miklos Philip

譯者:彩云Sky

本文翻譯已獲得作者的正式授權(授權截圖如下)

圖片

轉載請注明:學UI網(wǎng)》超全面的設計底層理論,優(yōu)秀設計背后離不開這些(下)

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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




靈魂注入指南-打造富有生命感的產(chǎn)品IP(下)

seo達人


圖片

TIPS:

· 全文共計2643字,閱讀需5分鐘左右

· 文章源自于日常設計工作的沉淀與總結,不排除個人觀點的局限性

 

圖片

靈魂畫手指南-基于人格特質的設計表現(xiàn)

1、人格特征下的設計原則指引

完成人格畫像是塑造生命感的第一步,更重要的是如何將這樣的人格特質系統(tǒng)性的體現(xiàn)在IP形象中,為此我們有必要將人格中的核心特質轉譯為設計語言,定義IP在場景、情緒、行為、語言4個方面的設計指引原則。下文我們繼續(xù)以“犀寶”在工作臺的設計應用為例,基于人格特質歸納設計原則。

1.1 “犀寶”的核心人格特質

圖片

1.2 場景原則

經(jīng)過多輪線上線下調研,我們對客服崗位建立了基于職業(yè)特征的用戶畫像:高強度、高疲勞、高負壓。面對即時溝通、多會員切換、服務考核等壓力,客服往往需要一個高效、專注的工作環(huán)境。因此基于人格特質的場景原則首先要保證“不打擾”,除功能性需要,應避免在客服服務過程中過度設計。結合“犀寶”利他主義、強共情等的人格特征,更適合應用在非上班狀態(tài)的場景中,如:引導教學、頁面加載、為空狀態(tài)、結果反饋等。

圖片

1.3 情緒原則

經(jīng)過對IP形象在工作臺中的典型應用案例的編碼梳理,我們基于情緒二維模型對“犀寶”的情緒進行了管理統(tǒng)計。情緒象限中所定義的觸發(fā)條件即為應用原則,高頻出現(xiàn)的情緒即為典型情緒。

圖片

我們將“犀寶”的典型情緒統(tǒng)計如下:

高興、冷靜、興奮、放松、慌張、欣喜、疑惑

將“犀寶”的情緒原則進行如下歸納:

① 面對客服或客服的正向行為,建議使用帶有正向情感反饋的情緒(如高興、欣喜、興奮等);

② 面對客服的負向行為,避免使用帶有負向情感反饋的情緒(如緊張、慌張、沮喪、尷尬、疑惑等);

③ 處于工作狀態(tài)時,建議使用中性的情緒(如冷靜、嚴肅);

④ 面對工作臺/系統(tǒng)的狀態(tài),不受常態(tài)的正負向情緒拘束;

⑤ 任何狀態(tài)下,避免使用帶有攻擊性的情緒(如憤怒、厭惡、鄙夷、怨恨等)。

1.4 行為原則

行為原則是在IP人格特質與典型場景的基礎上,對IP行為特點的建議與約束。按照以上思路,我們對“犀寶”的行為原則歸納如下:

圖片

① 建議使用具有引導/指向性的動作(如舉手引導);

② 建議使用具有社交禮儀的動作(如揮手問候/告別、雙手呈遞);

③ 建議使用呈現(xiàn)工作狀態(tài)的動作(如佩戴耳機坐在電腦前);

④ 建議使用操作智能設備的動作(如操作虛擬現(xiàn)實工作臺、使用可穿戴設備等);

⑤ 建議使用帶有正向情感反饋的動作(如擁抱、點贊、鼓掌、加油等);

⑥ 避免使用帶有劇烈運動的動作;(如奔跑、跳躍、健身等)

⑦ 避免使用帶有情感攻擊性的動作(如指責、揮拳等)。

1.5 語言原則

語言原則是在IP人格特質的基礎上,對IP聲音、話術等特點的建議與約束。按照以上思路,我們對“犀寶”的語言原則歸納如下:

圖片

 

2、擬人化的形態(tài)設計

在明晰人格特質和設計應用原則后,我們可以進一步思考IP形象在產(chǎn)品中的擬人化表現(xiàn)。在這里,簡要的分享一下思路方向。

上文提到,擬人化是把物擬作人,使其具有人的形態(tài)、情緒、行為、語言等特征,轉譯為設計語言即為IP形象的形態(tài)結構、面部表情、體態(tài)動作、聲音文案幾個部分。其中IP形象的結構決定了表情和動作的可塑性、豐富性。從上文JOY的形象設計案例中不難看出,人體化結構是IP形象設計的主流手段之一。

對于擬人化的表現(xiàn)個人建議優(yōu)先從結構人體化著手,結構滿足后,具有人格特質的擬人化表現(xiàn)自然水到渠成。在這里,我們可以將結構人體化的方式總結為:

2.1 模仿人類的五官結構

使IP形象具有眉、眼、鼻、嘴、耳的基本結構關系,幫助IP進行生動、豐富的情緒表現(xiàn)。

圖片

2.2 模仿人類的形體結構

使IP形象具有頭、手(手指)、軀、腳的基本結構關系,幫助IP進行生動、豐富的動作體態(tài)表現(xiàn)。

圖片

 

3、仿真化的動態(tài)設計

在完成人格化、擬人化的設計思考后,相當于為IP繪制了一幅角色設定草圖。接下來我們可以結合品牌/產(chǎn)品氣質,豐富感官表現(xiàn),精細化的同時進一步有增強其生命感知。在這里,簡要的分享一下思路方向。

上文提到,仿真化是對形象進行物理及生物特點的感官還原,表現(xiàn)在造型、空間、色彩、質感、動態(tài)、聲音等多方面。然而,不同類型的品牌、產(chǎn)品、應用場景,對仿真化的程度需求有所區(qū)別,如:主機/電腦游戲類產(chǎn)品,娛樂屬性更強,為了追求沉浸式的感官體驗,在各方面的仿真表現(xiàn)都相對較高;品牌/產(chǎn)品宣發(fā)場景,展示性更強,仿真表現(xiàn)的權重也相對較高;在APP/網(wǎng)頁界面中,更注重功能體驗和產(chǎn)研效率,風格以扁平為主,因此對于仿真表現(xiàn)的訴求也相對較低,在這種情況下,對比造型、空間、色彩、質感等元素,IP形象的動態(tài)表現(xiàn)最能直觀的表現(xiàn)生命感。

那么,如何通過動態(tài)表現(xiàn)增強產(chǎn)品IP形象的生命感?

3.1 模仿真實的生物規(guī)律

圖片

① 呼吸感:

呼吸是生物的生物學功能,有節(jié)奏的呼吸起伏是生命體的直觀體現(xiàn);

② 眨眼:

眨眼動作屬于生物體基本的生理反射,間隔性的眨眼動作可以增加形象的生命感知;

③ 模仿生物習性:

以“犀寶”為例,犀牛生活在蚊蟲多發(fā)的非洲,靈活直立的大耳朵不僅可以洞察環(huán)境,還可以幫助他們軀干蚊蟲,抖動耳朵是一個非常具有生物習性的行為反射。在呼吸、眨眼的基礎動態(tài)上增加間隔性的抖耳,可以讓整體形象更加真實生動。

3.2 模仿真實的動態(tài)規(guī)律

現(xiàn)實世界中存在著許多物理運動規(guī)律,如運動慣性、速度曲線、落地緩沖等等,想要表現(xiàn)出IP形象真實生動的動態(tài)特征,需要了解并掌握其中的動態(tài)規(guī)律。從動畫的視角來看,迪士尼黃金12定律具有很好的專業(yè)參考性,相對全面的總結了20世紀30年代以來迪士尼動畫的制作方式,是動畫專業(yè)必修的知識點。

圖片

小結:如何基于IP人格特質進行設計應用?我們的方式是結合產(chǎn)品特點、IP人格特質擬定設計原則;通過擬人化的結構增強IP形象在動作表情方面的可塑性;最后通過合理的仿真化手段完成設計應用。以下是“犀寶”在產(chǎn)品應用中的部分設計案例。

案例一:培訓機器人對客服模擬練習的狀態(tài)反饋

圖片

案例二:客服工作臺啟動頁加載插圖

圖片

案例三:客服應用頁面加載插圖

圖片

案例四:瀏覽器升級提示

圖片

案例五:靜態(tài)插圖合集

結合設計和心理學理念來看,具有生命感的IP形象能夠帶來更有力的功能及情感價值。通過對IP生命感的分析,我們認為IP形象的生命感由表及里表現(xiàn)出“仿真化、擬人化、人格化”三個層次。其中人格是決定IP形象如何表現(xiàn)的核心,因此對于形象的設定邏輯建議由里至表的進行思考統(tǒng)籌。從設計力度上看,對于各層次的程度把控與配合,建議根據(jù)產(chǎn)品屬性、傳播媒介、表現(xiàn)形式、技術條件、預期效果、預算成本等具體情況進行評估。

 

引用及參考文獻:

[1] 魯?shù)婪?阿恩海姆. 視覺思維. 四川人民出版社. 2001(3)

[2] 姚浩然.人格化加劇形態(tài)設計研究[D].南京:南京林業(yè)大學木材科學與技術,2012:12.

[3] 吳龍華.個性心理結構問題的研究[J].人力資源管理,2012(12)


作者:AlibabaDesign

轉載請注明:學UI網(wǎng)》靈魂注入指南-打造富有生命感的產(chǎn)品IP(下)

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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



盛夏的元宇宙之旅-玩轉電子沙盤

seo達人


圖片

經(jīng)過前期的調研和分析,以及結合相關的業(yè)務訴求,確定了我們的項目目標,那就是要做出一款為新房營銷賦能的設計工具,同時也總結出好的電子沙盤要同時具有這四個方面的特性:

圖片

圖片

 

1、效果真實自然

電子沙盤要傳達的是真實的地形地貌等信息,使用戶在觀看時要有身臨其境之感,因此在最終效果上要力求最真實自然的視覺體驗,為用戶呈現(xiàn)最好的效果。

圖片

圖片

 

2、覆蓋類型廣泛

在模型的品類方面力求多樣化,這樣整個場景才會更接近真實的效果,在項目中我們使用模塊化的方式,創(chuàng)建了項目資源庫,達到了建筑、植被、健身器材、公共設施等全品類覆蓋、共產(chǎn)出植物模型17種,建筑模型36種,器材設施類模型22種、UE4引擎材質260多種,為最終效果的實現(xiàn)起到了決定性的作用。

圖片

圖片

 

3、模型細節(jié)精細

除了周邊環(huán)境要真實自然,小區(qū)內每棟樓的建筑細節(jié)也非常的豐富,以真實的建筑結構信息來進行模型制作,用戶在使用時能夠查看到樓盤內每一棟建筑的外觀和結構細節(jié)。

圖片

圖片

 

4、生成策略豐富

區(qū)別于傳統(tǒng)的手動建模方式,我們在實施階段采用了模塊化資源+智能化生成的方式,首先在數(shù)據(jù)層級對整個項目區(qū)域根據(jù)功能進行劃分,針對每一類區(qū)塊都進行了相應的生成策略的設計。共產(chǎn)出擺放規(guī)則36種,精細到每一處細節(jié)都有相應的生成規(guī)則。

接下來的部分我們就選取幾種比較典型的區(qū)域擺放規(guī)則看一下。

圖片

圖片

 

圖片

根據(jù)當前項目特點,在具體實施階段我們采用了數(shù)據(jù)輸入和智能化生成的整體策略。

 

1、本案小區(qū)樓棟:

樓棟的建模使用了模塊化的方式,使用預制的窗戶,外墻等模型部件按照規(guī)則將不同的組合部件結合在一起生成整體的樓棟。

圖片

2、小區(qū)入口:

入口處大門的生成,首先需要在初始數(shù)據(jù)中輸入入口的信息,然后根據(jù)設計規(guī)則使用模型庫中預制的模塊生成入口大門。

圖片

 

3、道路生成:

根據(jù)道路結構進行數(shù)據(jù)的分層拆分,然后再將各部分模型組合起來形成道路,這樣就方便了后期添加沿路的樹木,以及根據(jù)車道信息添加車輛等等。

圖片

 

4、配電房,設備用房:

小區(qū)內的配電房,設備房等首先劃定區(qū)域數(shù)據(jù),然后選擇合適尺寸的模型進行擺放,最后做頂點拉伸處理。

圖片

 

5、底商商鋪:

底商的生成與設備房等類似,但是也有一些區(qū)別,由于每個樓盤的底商區(qū)域尺度不同,所以要對模型進行相應的拉伸去適應相應的區(qū)域大小,底商部分我們采用了整體拉伸的方式,這樣不會破壞模型上的一些結構細節(jié)。

圖片

 

6、小區(qū)廣場:

小區(qū)廣場的效果相對來說比較豐富,模型種類比較多,不適合使用拉伸的方式去生成,這部分采用了對不同功能的設備進行分塊的方式,比如兒童游樂設施,成人健身器材等,通過不同的組合可以生成多種方案。

圖片

 

7、地形生成:

地形的創(chuàng)建要依據(jù)真實的地理信息數(shù)據(jù)來制作,以保證電子沙盤真實的參考性,這部分我們使用了當下比較先進的智能化解決方案,根據(jù)數(shù)據(jù)將地面,道路,水系,植被,建筑等分層創(chuàng)建,最終在虛幻引擎中進行整合渲染。

 

圖片

這部分看下電子沙盤現(xiàn)階段的最終效果:(點擊圖片前往原文觀看視頻)

 

圖片

經(jīng)過大家的努力,最終我們的電子沙盤獲得了各方的認可,在制作過程中也收獲了不少寶貴的經(jīng)驗,總結如下:

重視排期和做好階段性任務的拆分:由于項目周期比較長,所以整個項目必須有統(tǒng)一的階段性規(guī)劃和排期,按照統(tǒng)籌好的計劃來一步一步實現(xiàn)目標。

項目參與人員之間的溝通很重要:每個成員之間對于進度和過程中遇到的問題必須及時同步和提出,尤其對于跨部門合作的項目來說,這一點尤為重要。

項目的完成離不開大家的共同努力,在此對所有人表示感謝。


作者:環(huán)鐵藝術家

轉載請注明:學U網(wǎng)》盛夏的元宇宙之旅-玩轉電子沙盤

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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



Apple music用戶體驗分析,原來蘋果也沒有把這些做好

seo達人


圖片

Illustration by Jan Marin

 

Apple Music誕生的原因?

我是果粉,在過去的10年里一直在用蘋果產(chǎn)品,很欣賞喬布斯早在那時就倡導的優(yōu)秀設計理念。在那些年里,我迷上了蘋果的生態(tài)系統(tǒng),因為對我來說,“它太好用了”。

其中一個便是iTunes。我會花大量的時間仔細整理我的音樂庫,并將它同步到我的iPod上。

在中間,我發(fā)現(xiàn)了Spotify,幾年后,我曾經(jīng)喜歡的iTunes樂庫已經(jīng)積灰了。

在大量的猜測和謠言之后,蘋果最終加入了流媒體競爭——完全放棄iTunes,并推出他們的新音樂產(chǎn)品,帶有付費訂閱流媒體服務的可選功能,名為“Apple Music”。

圖片

Source: Apple

 

在用了Spotify多年后,我決定給蘋果一個機會,重新嘗試用蘋果的音樂產(chǎn)品,到現(xiàn)在用了蘋果音樂大概一年。

不多廢話了,以下是我作為一個產(chǎn)品設計師和一個想聽音樂的普通用戶整理的一些想法,分析下Apple music存在哪些體驗問題。

 

一、搜索

音樂APP的一個關鍵功能就是搜索,在APP中它的使用頻率很容易排到前三。那么,Apple music的搜索功能我覺得做的還不夠好。

假設我們想要搜索一個知名的搖滾樂隊Weezer,他們是一個很酷的樂隊。

圖片

我們正確輸入了Weezer,自動提示似乎已經(jīng)出現(xiàn)了。但是等等——這是自動提示嗎?

讓我們試著輸入“Wezer”,假裝我們拼錯了樂隊的名字,以再次確認這確實是一個自動提示,幫助我們確認它與蘋果庫中的Weezer匹配。

圖片

看到這個結果,我猜這應該不是一個很好的自動提示。為了確定是否真的做了自動提示功能,我們換一個關鍵詞,這次選另一個非常受歡迎的搖滾樂隊-Queen。

圖片

這次好像終于是有自動提示了,但為什么Queen能快速出關聯(lián)結果而Weezer沒有?

圖片

好吧,讓我們繼續(xù)尋找線索。點擊那個下拉列表,看看它將帶我們去哪里。

圖片

結果出現(xiàn)了一個全新的“結果頁面”。如果能夠完全跳過這一頁就好了(就像我們搜索Queen的時候),因為我真正想做的是直接進入Weezer的音樂。

此時想想我們下一步要做什么。我不記得我最后去了哪里,但我知道我想回到最初的位置。我們該怎么做呢?可能像我們在瀏覽器一樣有一個后退按鈕,對吧?但沒有找到。

事實證明,沒有后退按鈕。至少,它沒有通用的后退按鈕來撤消你所做的任何導航操作。你能猜到為什么嗎?

 

二、導航

我不知道你怎么想,但我發(fā)現(xiàn)Apple Music的導航是它最令人困惑的方面之一。優(yōu)秀應用不會讓你思考你在哪里,每一個頁面都會是清晰的且可以很容易撤消和回到你之前的地方。

蘋果iOS的人機界面指南為應用提供了三種類型的導航,蘋果似乎也在macOS中使用了這些概念,蘋果音樂就使用了平行導航。

(彩云注:這里我跟大家解釋下iOS的三種類型導航模式

層級導航(Hierarchical navigation)。這個導航模式只能在每個屏幕做一個選擇到達一個目的地。為了到達另外的目的地,你必須重新開始你的步驟或者從起點重新開始,做出不同的選擇。設置和郵箱就使用這種導航樣式。

平行導航(Flat navigation)。這個導航模式允許在多個內容目錄之間轉換。Music和AppStore使用這種導航樣式。

內容驅動或者體驗驅動導航(Content-driven or experience-driven navigation)。這個導航模式在內容間自由移動,或者依據(jù)內容本身定義導航。游戲,圖書和其他沉浸式app基本使用這種導航方式。)

圖片

Apple music有一個側邊欄,但我覺得這樣意義不大。平行導航在移動端體驗中非常好用,因為屏幕面積很小。如果你經(jīng)常使用導航欄,你可以知道你在哪個標簽頁上,還可以獨立于其他選項卡更深入地探索一個選項卡。

圖片

這是一個自iPhone發(fā)布以來一直保持的慣例,人們不會輕易混淆自己在哪里。那么這在桌面上是如何工作的呢?

圖片

簡而言之,這也意味著側邊欄中的每一項都有自己獨立的導航。現(xiàn)在讓我們看看Spotify是如何處理桌面導航的。

圖片

注意到了嗎?Spotify似乎結合了側邊欄的優(yōu)點,無論你點擊應用的哪個位置,它都允許你輕松地回溯你的步驟。

為什么在我看來這比蘋果的設計更好?

它可以減少認知負荷。人們沒有時間去記住他們上次在應用中的位置。人們習慣于使用他們的瀏覽器的后退鍵。Spotify利用了這一點,使新用戶的行為符合心理預期。

它還降低了用戶焦慮感,允許用戶自由探索,而不用擔心搞砸或無法解決問題。

 

三、.系統(tǒng)反饋與探索

點擊是任何應用的一個重要部分,因為你需要點擊來操作。但Apple music的點擊體驗有點糟糕。

就拿這個正在播放的狀態(tài)來說吧。

圖片

自從iTunes誕生以來,這在很大程度上保持著相同的功能一致性,一種查看當前正在播放的歌曲的方式。

當你聽著Weezer的一首新歌,然后想,“嗯,這支樂隊太棒了,讓我看看他們其他的目錄!”讓我們從這里點擊Weezer !

圖片

當我們點擊了標題和專輯,但毫無效果。你能猜到這里具體要怎么操作才能達到我們想要的效果嗎?

圖片

你猜不到的是居然要點擊“更多”菜單,瀏覽列表,然后在列表底部看到“在Apple music中顯示”。

但在應用的其他地方呢?你可以點擊歌曲、專輯或藝術家嗎?好像也不行。

圖片

在這一點上,你可能會想,我為什么要在這個問題上做文章?因為我認為音樂應用的全部意義,尤其是在一個巨大的流媒體庫中尋找新音樂的意義:是點擊、探索,并輕松地找到歌曲、專輯和藝術家。

我認為用戶不應該因為不遵守應用希望使用它的方式而受到阻礙。

(彩云注:這里作者想要表達的問題是交互上不應該讓用戶去遵循產(chǎn)品的規(guī)則,而應該盡可能的滿足用戶的心智模型,用戶在這里的需求很清晰,打通這里的流程問題很重要)。

 

四、響應時間

一款好的應用不會讓你等待。我們知道加載時間會極大地影響網(wǎng)頁的跳出率,我不認為我們必須區(qū)別對待本地應用。

這讓我想到了使用Apple Music時最大的痛苦之一:

圖片

在頁面之間等待,等待。想知道下一個糟糕的行為會是什么?失去當前的狀態(tài)提示。因為延遲,無響應的問題,不知道當我點擊“播放”時,我的歌曲是否會真正播放。

 

總結

我相信好的設計應該是令人向往的。我想喜歡Apple music,更重要的是,我相信蘋果仍然有很強的設計原則。但我這次在apple music中沒有讓我享受到該有的好體驗。這是一個遺憾,因為作為一項服務,Apple music還是有很多優(yōu)點。

圖片

  • 從策劃的角度來看,我發(fā)現(xiàn)蘋果選擇的曲目質量很高。從人工挑選的歌曲(比如上面顯示的播放列表)到算法根據(jù)我的聽歌習慣為我提供優(yōu)秀的音樂。這感覺非常像蘋果,我一直驚訝于它的選擇是多么的好。
  • 從音頻的角度來看,我實際上更喜歡音樂的質量,這一點要Spotify要好。

這些優(yōu)點反而讓我更加失望,因為這個產(chǎn)品本身不容易使用。

說到底,真正的問題在于蘋果沒有明確定義他們的產(chǎn)品是什么。如果說音樂應用是iTunes的繼承者,那么不幸的是,它沒有達到目標,因為他們試圖將流媒體服務(Apple music)嵌入到傳統(tǒng)模式中。如果Apple Music是他們的重點,他們并沒有讓它作為一個獨立的服務脫穎而出。

有一件事是肯定的,桌面版的Apple Music如果要達到一個像樣的可用性水平,還有很多工作要做。

 

你覺得呢? 你在體驗蘋果產(chǎn)品時,還遇到哪些痛點?期待你在留言區(qū)探討~

 

原文:https://uxdesign.cc/apple-musics-ux-problem-e8f5fac756de

作者:Jake Dragash

譯者:彩云Sky

本文翻譯已獲得作者的正式授權(授權截圖如下)

圖片

 

作者:彩云Sky

轉載請注明:學UI網(wǎng)》Apple music用戶體驗分析,原來蘋果也沒有把這些做好

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


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


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



日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔