首頁

小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

UI界面中的卡片設(shè)計(jì)是一種常見且有效的設(shè)計(jì)方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗(yàn)。通過分割特性,可以賦予界面更多的層次感,為用戶帶來視覺上的愉悅。然而,卡片式設(shè)計(jì)并不是無懈可擊的,由于其分割的特性可能會(huì)對(duì)用戶的沉浸式瀏覽體驗(yàn)產(chǎn)生一定的影響,例如造成橫向和縱向空間的浪費(fèi)等問題。因此,在決定是否使用卡片式設(shè)計(jì)時(shí),我們需要根據(jù)實(shí)際場(chǎng)景和內(nèi)容形式進(jìn)行判斷,而不是刻意追求“卡片式”而設(shè)計(jì)。
卡片在移動(dòng)端設(shè)備上,運(yùn)用的越來越多,然而,在選擇使用卡片設(shè)計(jì)、視覺呈現(xiàn)方式以及其優(yōu)點(diǎn)和缺點(diǎn)等關(guān)鍵因素方面,仍然存在一些被忽視的細(xì)節(jié)。在進(jìn)行卡片設(shè)計(jì)時(shí),我們應(yīng)該注意哪些細(xì)微之處呢?以下我們就一起來探討下如何設(shè)計(jì)卡片。
一、卡片的概念
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
什么是卡片?
 
在日常生活中,一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片,這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號(hào)等信息;可以從名片中知道卡片所屬人以及此人的一些基本信息等。
UI界面中的卡片設(shè)計(jì)是一種常見且有效的設(shè)計(jì)方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗(yàn)。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
卡片出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡..等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息??ㄆ?,通常包含圖片或文本信息,是一種有效的信息承載方式。UI界面中的卡片設(shè)計(jì)是一種常見且有效的設(shè)計(jì)方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗(yàn)。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
卡片式設(shè)計(jì)是一種常見的UI組件,它能夠?qū)⒉煌膬?nèi)容分層次組合在一起,從而讓頁面看起來更有秩序感。卡片通常由標(biāo)題、內(nèi)容描述、圖像、按鈕等元素組成,自帶簡(jiǎn)約和易用的屬性,方便用戶快速理解和操作。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
二、卡片的交互設(shè)計(jì)
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
當(dāng)用戶與卡片進(jìn)行交互時(shí),卡片需要星現(xiàn)特定的視覺反饋。常見的卡片狀態(tài)包括默認(rèn)、
懸浮(pc端)、激活、選中
等。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
為了更好的區(qū)分卡片和背景,可以用填充底色、措邊、添加陰影來讓卡片與背景有區(qū)分。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
卡片的可讀性主要取決于字體的選擇和字號(hào)的大小,例如,即使兩個(gè)卡片具有相同的布局,但如果選擇的字體和字號(hào)不同,它們的可讀性和視覺效果可能會(huì)有很大的差別。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
卡片上的文字間距最好有一定的規(guī)律,這里可以按網(wǎng)格法來規(guī)劃,比如8px網(wǎng)格,10px網(wǎng)格等等。網(wǎng)格的使用其實(shí)可以很靈活,比如我這里的卡片其實(shí)就用到了8px網(wǎng)格,各間距就會(huì)用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
在設(shè)計(jì)卡片布局時(shí),通常會(huì)將多個(gè)卡片以網(wǎng)格的形式排列在頁面上,以保持水平方向和垂直方向的對(duì)齊,這樣可以使頁面看起來更有序、更規(guī)范。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
當(dāng)卡片中包含標(biāo)題、內(nèi)容、圖片和按鈕等多種元素時(shí),需要考慮到標(biāo)題與圈片的位置關(guān)系以及標(biāo)題和內(nèi)容的長(zhǎng)短等因素。例如,如果卡片的頂部是標(biāo)題,由于標(biāo)題字?jǐn)?shù)可能不確定,我們可以在卡片上方保留至少兩行的空間以容納標(biāo)題,而保持卡片內(nèi)的圖片和按鈕位置不變。
三、常見的卡片樣式
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
邊距卡片,
這種類型的卡片在UI設(shè)計(jì)中最為常見,柔和的固角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強(qiáng)烈,整個(gè)頁面信息的層級(jí)也更加清晰。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
懸浮卡片
并非模態(tài)彈窗,與模態(tài)彈窗相比,懸浮卡片無需主動(dòng)操作觸發(fā),可作為臨時(shí)控件或長(zhǎng)期固定顯示。此外,懸浮卡片能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,多則展示全部?jī)?nèi)容,少則僅顯示關(guān)鍵信息,非常靈活。
通欄卡片
具有更強(qiáng)的視覺阻斷,對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果,不過這種類型只通過頁面背最色保留上下邊間、且不會(huì)過多,不然頁面會(huì)顯得零散、雜亂。
四、卡片、列表、無框設(shè)計(jì)的區(qū)別
什么是卡片設(shè)計(jì)
卡片式設(shè)計(jì)借用了現(xiàn)實(shí)世界中的卡片的特征,就像一張信用卡或名片,它承載了圖片、文字、按鈕等元素,以一個(gè)縮略的形式提供了快速瀏覽信息的模塊。在視覺表現(xiàn)形式上,卡片式設(shè)計(jì)可以分為扁平式卡片和通欄式卡片,前者更像傳統(tǒng)意義上的卡片,上下左右都留有空隙:后者僅在上下留有空隙,甚至無空隙。
卡片式設(shè)計(jì)的優(yōu)點(diǎn)
1.獨(dú)特的設(shè)計(jì)語言
,卡片本身是一種設(shè)計(jì)語言,就像面形圖標(biāo)一樣具有矩形的形狀,帶著圓角或直角,甚至還有輕微的陰影。這種獨(dú)特的設(shè)計(jì)語言可以快速地從扁平化設(shè)計(jì)中區(qū)分出來,帶給用戶強(qiáng)烈的辨識(shí)度。例如 Google 將卡片作為 Material design 的設(shè)計(jì)語言,運(yùn)用到 Android系統(tǒng)所有的移動(dòng)設(shè)備上,形成了獨(dú)一無二的視覺風(fēng)格。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
2.靈活的空間擴(kuò)展
,相比傳統(tǒng)的列表式設(shè)計(jì)只能縱向滾動(dòng)瀏覽,卡片式設(shè)計(jì)的空間擴(kuò)展性更加靈活多變。由于每一個(gè)卡片都是獨(dú)立存在的因此既可以縱向滾動(dòng),也可以橫向滑動(dòng)。例如馬蜂窩的卡片式設(shè)計(jì)通過橫向滑動(dòng)在狹窄的屏幕上展示更多內(nèi)容,花瓣的兩列卡片式設(shè)計(jì)也為界面空間提供了更多的展示內(nèi)容,這些都大大提高用戶的瀏覽效率。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
3.清晰的視覺呈現(xiàn)。
卡片化繁為簡(jiǎn),將不同類型的元素有效地組織!在一起,形成一個(gè)封閉式的視覺形式。每一個(gè)卡片之間都具有獨(dú)立性不會(huì)相互干擾,它們保持著一致的外觀,讓界面看上去干凈和簡(jiǎn)潔。例如 App Store 和去哪兒賦予每一個(gè)卡片一個(gè)主題,以簡(jiǎn)單明快的內(nèi)容表現(xiàn)形式吸引用戶的注意力,簡(jiǎn)潔、連貫的卡片也避免了因?yàn)閮?nèi)容太長(zhǎng)讓用戶產(chǎn)生畏懼心理。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
4.易于的內(nèi)容整理。
卡片是一個(gè)容器,將不同緯度的內(nèi)容進(jìn)行區(qū)分或?qū)⑾嗤暥鹊膬?nèi)容歸納在一起,形成一個(gè)獨(dú)立的模塊,能有效地避免信息散亂和分類不清晰的狀況發(fā)生,讓界面的視覺層次變得清晰。例如途牛在一個(gè)界面中展示了多種不同形式的卡片式設(shè)計(jì),通過卡片的大小顏色、圖文組合進(jìn)行區(qū)分,視覺層次清晰明了。再例如騰訊視頻將相同功能的列表進(jìn)行分組,有助于用戶快速獲取信息。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
5.特殊的功能屬性。
卡片不僅是內(nèi)容的容器,同樣也是操作和交與的載體,由于它的視覺表現(xiàn)是獨(dú)立存在的,因此可以用于背景之上的對(duì)話框設(shè)計(jì),以強(qiáng)烈的視覺表現(xiàn)力尋求一次互動(dòng)。例如進(jìn)入后彈出一個(gè)對(duì)話框,請(qǐng)求用戶開啟通知。再例如滴滴出行和美團(tuán)外賣將一次活動(dòng)推廣展現(xiàn)在卡片上,以此快速吸引用戶的注意力。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
什么是列表式設(shè)計(jì)
列表式設(shè)計(jì)是 App 中最常見的表現(xiàn)形式,它使用分割線對(duì)不同的元素進(jìn)行有效的組織,幫助用戶理解界面的視覺層次。在視覺表現(xiàn)形式上,列表式設(shè)計(jì)根據(jù)分割線的不同長(zhǎng)度可以分為半分割線式列表、縮進(jìn)分割線式列表和通欄分割線式列表。
列表式設(shè)計(jì)的優(yōu)點(diǎn)
1.輕量化的設(shè)計(jì)。
列表式設(shè)計(jì)是真正意義上的扁平化設(shè)計(jì),不像卡片式設(shè)計(jì)那樣有著清晰的視覺層次,它讓所有的信息內(nèi)容處于同一個(gè)平面。這樣的好處是干凈的界面可以減少對(duì)用戶的視覺干擾,以便用戶順暢的進(jìn)行瀏覽。親切和友好的用戶體驗(yàn)是列表式設(shè)計(jì)的最大優(yōu)點(diǎn),它非常適合于形式簡(jiǎn)單的信息內(nèi)容。例如網(wǎng)易云音樂和今日頭條的每一條動(dòng)態(tài)都有著相似的形式,輕量化的列表式設(shè)計(jì)讓用戶的瀏覽變得輕松和優(yōu)雅。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
2.提升瀏覽效率。
列表式設(shè)計(jì)沒有寬厚的空隙作為信息內(nèi)容的區(qū)分而是使用一條細(xì)窄的分割線。它非常適合于非常多的同類的信息內(nèi)容、可以極大地節(jié)省界面的空間,讓狹小的屏幕顯示更多內(nèi)容,在無形中就提升了用戶的瀏覽效率。例如 微博 和騰訊新聞的商品都是左圖右文的結(jié)構(gòu),使用簡(jiǎn)單的列表式設(shè)計(jì),有助于用戶快建地進(jìn)行瀏覽。
我們?cè)賮碓嚳捶治鑫⒉﹦?dòng)態(tài)為什么使用卡片式設(shè)計(jì),而不是列表式設(shè)計(jì)。首先,微博強(qiáng)調(diào)每一個(gè)動(dòng)志的豐富內(nèi)容和獨(dú)特個(gè)性,希望用戶進(jìn)行分事、評(píng)論和點(diǎn)贊操作,卡片式設(shè)計(jì)有效地將用戶的注意力停量在當(dāng)前的卡片上;其次,五花八門的內(nèi)容形式使用卡片式設(shè)計(jì)易于整理,可以保持清晰的視覺層次。
什么是無框式設(shè)計(jì)
無框式設(shè)計(jì)是一種去形式化的設(shè)計(jì),它強(qiáng)調(diào)化繁為簡(jiǎn),去除一切與內(nèi)容無類的裝飾性元素,旨在突出內(nèi)容本身、好讓重要的信息及功能更容易被關(guān)注,讓用戶更加清晰和直觀地進(jìn)行瀏覽。在無框式設(shè)計(jì)中,你幾乎看不到區(qū)分內(nèi)容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
無框式設(shè)計(jì)的優(yōu)點(diǎn)
1.極簡(jiǎn)主義風(fēng)格。
相比卡片式設(shè)計(jì)追求“多”,無框式設(shè)計(jì)則追求“少”,即用最簡(jiǎn)單的形式和最理性的設(shè)計(jì)創(chuàng)造最深入人的藝術(shù)感受例如余音使用白色的背景,左小右大的邊距和大量的留白,呈現(xiàn)出一種獨(dú)特的產(chǎn)品氣質(zhì)。列表設(shè)計(jì)去掉分割線,干凈到一塵不染的界面讓用戶產(chǎn)生極為深刻的印象。
2.掌控注意力
。無框式設(shè)計(jì)最顯著的特征就是去除裝飾性的分割線通過間距的親密和疏遠(yuǎn)對(duì)比進(jìn)行視覺層次的劃分。大量的留白設(shè)計(jì)把空間留給內(nèi)容,把內(nèi)容留給用戶。使用了無框式設(shè)計(jì)沒有了那些分割線的干擾,有效地掌控了用戶的注意力,讓用戶把目光集中在內(nèi)容本身。
3.保持界面整潔。
設(shè)計(jì)是連貫、統(tǒng)一的,沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框,這種簡(jiǎn)潔的設(shè)計(jì)就會(huì)被打部精王德商處可見那些細(xì)碎的分副線或描邊,使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面,微博和騰訊新聞就是這樣的設(shè)計(jì)。
五、卡片的應(yīng)用場(chǎng)景
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
瀑布流
瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì),它最大的優(yōu)點(diǎn)是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
信息流
信息流主要通過文字、圖片或視頻等媒介來展示較長(zhǎng)的內(nèi)容,這需要用戶花費(fèi)一定的時(shí)間進(jìn)行滑動(dòng)和瀏覽,才能篩選出對(duì)自己有用的信息。
左右滑動(dòng)
在音樂、視頻等以圖片為主要內(nèi)容的產(chǎn)品中,卡片式左右滑動(dòng)的設(shè)計(jì)最為常見。這是因?yàn)榭ㄆ皆O(shè)計(jì)能夠更好地展現(xiàn)內(nèi)容的層次感和吸引力,尤其對(duì)于以圖片為主的產(chǎn)品來說,卡片式設(shè)計(jì)可以提供更豐富的視覺效果,增強(qiáng)用戶的瀏覽體驗(yàn)。
頁面頭部
卡片式設(shè)計(jì)是一種有效的布局方式,它可以在個(gè)人中心、個(gè)人主頁、會(huì)員等頁面中,將關(guān)鍵信息進(jìn)行整合和概括,從而形成清晰、連貫的視覺結(jié)構(gòu)。
 
六、卡片的設(shè)計(jì)原則
在UI界面中,卡片設(shè)計(jì)是一種重要的布局方式,它以其簡(jiǎn)潔性、模塊化和可自定義特性而備受設(shè)計(jì)師與使用者青睞。以下是卡片設(shè)計(jì)時(shí)需要遵循的一些關(guān)鍵原則:
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
一、簡(jiǎn)潔清晰原則
信息精煉:每張卡片應(yīng)僅展示關(guān)鍵信息或功能,防止信息負(fù)荷過大,確保用戶能夠快速獲取所需內(nèi)容。
視覺元素簡(jiǎn)潔:避免在卡片上添加過多的裝飾性元素,保持設(shè)計(jì)的簡(jiǎn)潔性。
二、一致性原則
視覺風(fēng)格統(tǒng)一:不同卡片之間應(yīng)保持一致的視覺風(fēng)格,包括顏色、字體、圖標(biāo)等,以提高用戶識(shí)別及使用效率。
布局規(guī)范:卡片的布局應(yīng)遵循一定的規(guī)范,如邊距、圓角大小等,以保持整體的一致性。
三、層次性原則
信息層級(jí)明確:通過字體大小、顏色、圖標(biāo)等方式明確信息的層級(jí)關(guān)系,引導(dǎo)用戶按照重要性順序?yàn)g覽信息。
視覺空間感:利用投影、前后顏色設(shè)定等手段提升整體設(shè)計(jì)層次感,使卡片看起來更加立體和自然。
四、交互體驗(yàn)原則
操作便捷:為用戶提供充足的操作空間與方式,如點(diǎn)擊、滑動(dòng)等,鼓勵(lì)用戶深度參與信息生成與傳播過程。
反饋及時(shí):在用戶與卡片進(jìn)行交互時(shí),應(yīng)提供及時(shí)的反饋效果,如顏色變化、動(dòng)畫等,以增強(qiáng)用戶的交互體驗(yàn)。
五、適應(yīng)性原則
響應(yīng)式設(shè)計(jì):卡片設(shè)計(jì)應(yīng)能夠適應(yīng)不同屏幕尺寸和設(shè)備類型,確保在各種環(huán)境下都能保持良好的顯示效果。
內(nèi)容靈活:卡片的內(nèi)容應(yīng)具有一定的靈活性,可以根據(jù)實(shí)際需求進(jìn)行調(diào)整和更新。
六、設(shè)計(jì)細(xì)節(jié)原則
圓角設(shè)計(jì):圓角的設(shè)定應(yīng)符合整體的風(fēng)格調(diào)性,大圓角表達(dá)柔和,小圓角表達(dá)硬朗。
邊距與留白:合理的邊距和留白可以提升整體設(shè)計(jì)的層次感,使內(nèi)容更加突出且易于閱讀。
標(biāo)題與正文:標(biāo)題應(yīng)簡(jiǎn)短明了,用于說明卡片的內(nèi)容;正文部分則應(yīng)簡(jiǎn)潔精煉,避免冗余信息。
卡片設(shè)計(jì)在UI界面中扮演著重要角色,它不僅能夠提升用戶體驗(yàn),還能增強(qiáng)信息的可讀性和可理解性。因此,在進(jìn)行卡片設(shè)計(jì)時(shí),應(yīng)遵循簡(jiǎn)潔清晰、一致性、層次性、交互體驗(yàn)、適應(yīng)性以及設(shè)計(jì)細(xì)節(jié)等原則,以確??ㄆO(shè)計(jì)的質(zhì)量和效果。
總結(jié)
隨著科技的不斷進(jìn)步和用戶需求的變化,卡片設(shè)計(jì)也在不斷發(fā)展和創(chuàng)新。未來,卡片設(shè)計(jì)將更加注重個(gè)性化和智能化。通過用戶行為分析和機(jī)器學(xué)習(xí)等先進(jìn)技術(shù)手段,可以為用戶提供更加精確和個(gè)性化的推薦和服務(wù)。同時(shí),虛擬現(xiàn)實(shí)(VR)和增強(qiáng)現(xiàn)實(shí)(AR)等新技術(shù)的發(fā)展也將為卡片設(shè)計(jì)帶來更多元化的應(yīng)用場(chǎng)景和更豐富的用戶體驗(yàn)。
綜上所述,UI界面中的卡片設(shè)計(jì)是一種重要且有效的設(shè)計(jì)方式。通過遵循設(shè)計(jì)原則、掌握設(shè)計(jì)技巧并借鑒優(yōu)秀案例,可以設(shè)計(jì)出既美觀又實(shí)用的卡片界面。


作者:蘑菇小象117
鏈接:https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)

天宇 B端ui設(shè)計(jì)文章及欣賞

建筑設(shè)計(jì)師尤哈尼·帕拉斯瑪說、簡(jiǎn)約并非簡(jiǎn)單,它是通過深思熟慮后對(duì)事物本質(zhì)的準(zhǔn)確把握。知其然、知其所以然。這次文章會(huì)盡量簡(jiǎn)潔一點(diǎn)。
 
奔跑的日子、總是希望優(yōu)秀的你和我一起同行。讓我們一起在藝術(shù)的環(huán)境里生菌、知識(shí)的海洋里狗刨~
 
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
第一部分 | 彈窗基礎(chǔ)知識(shí)
如果你只是想了解一下彈窗的基礎(chǔ)知識(shí),那么看這部分就夠了。只需3分鐘無痛、來去自如不影響上班哦。
彈窗定義;彈窗來歷;彈窗拆分;彈窗分類;彈窗尺寸;
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
1、彈窗定義
彈窗是用戶和系統(tǒng)交互信息的容器
。(在網(wǎng)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個(gè)定義絕對(duì)靠譜。站的維度高,從人機(jī)交互工程出發(fā)。這定義沒錯(cuò)的妥妥的。說出去基本不會(huì)有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認(rèn)識(shí)我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀(jì)90年代。當(dāng)時(shí),互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中,但這種方式存在一些問題。廣告商擔(dān)心消費(fèi)者在瀏覽負(fù)面內(nèi)容時(shí),會(huì)將廣告與負(fù)面信息聯(lián)系在一起,從而對(duì)品牌造成不利影響。因此,網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序,發(fā)明了一種在新開窗口發(fā)布廣告的方法,這就是網(wǎng)絡(luò)彈窗的起源。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會(huì)包括
關(guān)閉、內(nèi)容區(qū)、模態(tài)層
(非模態(tài)類別的沒有個(gè)元素)
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
3.1、模態(tài)層
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強(qiáng)打斷的不適和跳出當(dāng)前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
我個(gè)人在設(shè)計(jì)時(shí)模態(tài)層基本都是50%的純黑,但并不是一定要用50%的純黑,要結(jié)合自己的平臺(tái)業(yè)務(wù)、設(shè)計(jì)風(fēng)格等方面去制定。偷偷的告訴你這個(gè)模態(tài)層加入一點(diǎn)微微的色彩傾向在視覺上往往會(huì)更好一點(diǎn)。
3.2、關(guān)閉
彈窗的關(guān)閉是用戶退彈窗的重要途徑、一般都會(huì)在彈窗內(nèi)容右上角。彈窗關(guān)閉按鈕也有在彈窗范圍外的。我們要保證彈窗關(guān)閉的清晰明確,來方便用戶操作。
在彈窗中、關(guān)閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內(nèi)容區(qū)
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同,內(nèi)容就會(huì)有所不同。什么都可能有、圖標(biāo)、確認(rèn)信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會(huì)出現(xiàn)在彈窗的內(nèi)容區(qū)域。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個(gè)大類就比較好區(qū)分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認(rèn)等。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
4.1、模態(tài)類
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為,用戶必須對(duì)其進(jìn)行操作才能解散彈窗,否則不能進(jìn)行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認(rèn)彈窗
。當(dāng)然還有其他的文件選擇、信息展示、等等。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
4.1.1、表單彈窗
這彈窗在B端設(shè)計(jì)里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復(fù)雜的業(yè)務(wù)就意味著你會(huì)和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個(gè)人)不過在你制定好一套規(guī)使用規(guī)范后?;具@樣的彈窗是不太需要設(shè)計(jì)介入的,產(chǎn)品和FE兩人一對(duì)使用模版就上了。
4.1.2、確認(rèn)彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點(diǎn)擊離開當(dāng)前頁面,通過對(duì)話框讓用戶做出選擇。在執(zhí)行一個(gè)重要信息的刪除時(shí),通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優(yōu)點(diǎn)/缺點(diǎn)
優(yōu)點(diǎn):
強(qiáng)不會(huì)讓用戶忽略或跳過,確保信息的交互響應(yīng);引導(dǎo)用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點(diǎn):
01、會(huì)中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會(huì)影響用戶體驗(yàn),因?yàn)橛脩粜枰却P(guān)閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復(fù)雜,用戶可能會(huì)感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會(huì)對(duì)其產(chǎn)生反感甚至抵制使用相關(guān)軟件或平臺(tái)。
4.2、非模態(tài)
可以不打斷父應(yīng)用程序,無需停止進(jìn)度,用戶仍可以對(duì)父級(jí)內(nèi)容進(jìn)行交互。大部分應(yīng)用于信息的反饋和提示。常見的非模態(tài)類彈窗大概有、警告提示、全局提示、通知彈窗、氣泡確認(rèn)框;
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
4.2.1非模態(tài)優(yōu)點(diǎn)/缺點(diǎn)
優(yōu)點(diǎn):
不打斷操作流程;不會(huì)干擾用戶操作用戶體驗(yàn)更好;常用于輕量級(jí)的信息或提示。
缺點(diǎn):
可能會(huì)被忽略,導(dǎo)致信息傳遞不暢;不適合展示重要信息;形式通常比較單一,不能滿足復(fù)雜的展示需求
4.3、其他
林子大了什么鳥兒都會(huì)有,一定會(huì)有我沒有接觸到的前沿交互方式。所以這個(gè)其他留給未來更優(yōu)秀的我們?nèi)グl(fā)現(xiàn)。
5、彈窗尺寸
彈窗的尺寸和電腦屏幕分辨率是有關(guān)系的。主流的分辨率1920*1080像素。其他的還有1024x768、1280x800、1366x768、1440x900、1680x1050、1920x1080、2560x1440等。
我在設(shè)計(jì)界面是一般用的是1440*900的設(shè)計(jì)尺寸。在做彈窗的時(shí)候已經(jīng)不考慮1366*768分辨率以下的屏幕了。多以彈窗的安全高度要小于600px
彈窗的寬度還是要根據(jù)自己業(yè)務(wù)需求去定義的。比如我們的業(yè)務(wù)最寬的彈窗1280像素。像站酷的查看作品他是整屏的寬度。
模特還怪好看的
模特還怪好看的
 
我在我們平臺(tái)定義的表單彈窗寬度雖然很不嚴(yán)謹(jǐn)、好像也沒有什么理論支撐。但是確一直再用。尺寸分別為、400、600、800、1000、1280。之后還是要細(xì)化的。這樣的定義彈窗尺寸導(dǎo)致的結(jié)果是,開發(fā)還原想過不是太好。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
第二部分 |彈窗2.0項(xiàng)目里
承載內(nèi)容、為什么會(huì)有這么多的彈窗類型。問題不在于彈窗,而在于合適的承載內(nèi)容和交互類型。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
1、彈窗、抽屜、界面
在項(xiàng)目里我們應(yīng)該怎么去選擇這三種內(nèi)容呈現(xiàn)方式呢。如果你只是設(shè)計(jì)師大部分時(shí)間你也不用選。你只有建議的權(quán)利沒有決定的權(quán)利。如果產(chǎn)品原型是彈窗、你給做了個(gè)抽屜。你可以從下面幾方面去找支撐點(diǎn)去和產(chǎn)品撕逼、干翻他的原型用你的效果圖。
AI的提高畫面質(zhì)量還是有待提高呀
AI的提高畫面質(zhì)量還是有待提高呀
 
1.1、內(nèi)容
彈窗和抽屜或界面他們承載的內(nèi)容量是不一樣的。所以在選擇用那種交互方式時(shí)可以從我們業(yè)務(wù)需要展示的內(nèi)容量來考慮。簡(jiǎn)單的確認(rèn)或通知適合用彈窗、需要展示大量?jī)?nèi)容或進(jìn)行復(fù)雜的功能時(shí)就適合用抽屜或者界面了。
1.2、體驗(yàn)
我們可以從用戶體驗(yàn)方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進(jìn)程的成本。一致性、確保與其他業(yè)務(wù)模塊交互方式保持一致,為用戶提供一致的體驗(yàn)。
1.3、效率
考慮到用戶的使用成本、B端設(shè)計(jì)中效率的提升優(yōu)先率老高了??紤]系統(tǒng)的加載速度、確保我們使用的交互方式不會(huì)影響整體的性能和體驗(yàn)。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的??偟膩碚f核心是提升效率、保證我們用戶好的體驗(yàn)。
2、彈窗交互優(yōu)缺點(diǎn)
當(dāng)涉及到B端彈窗的交互方式時(shí),有以下幾點(diǎn)核心優(yōu)缺點(diǎn):
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
2.1、優(yōu)點(diǎn)
提供及時(shí)反饋
彈窗可以快速向用戶顯示重要的信息或請(qǐng)求,使用戶能夠即時(shí)了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
簡(jiǎn)化操作流程
對(duì)于某些復(fù)雜的操作或任務(wù),彈窗可以提供直觀的界面和簡(jiǎn)化的步驟,使用戶更容易完成目標(biāo)。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會(huì)被其他界面元素分散注意力,從而更專注于當(dāng)前的任務(wù)。
提供額外的信息或功能
彈窗可以包含更多的詳細(xì)信息或額外的功能選項(xiàng),使用戶能夠更深入地了解或操作某個(gè)特定內(nèi)容。
2.2、缺點(diǎn)
干擾用戶操作
過度或不合適的彈窗可能會(huì)干擾用戶的正常操作,打斷用戶的工作流程,影響用戶體驗(yàn)。
誤導(dǎo)用戶
不清晰或誤導(dǎo)性的彈窗信息可能會(huì)使用戶產(chǎn)生困惑或誤解,導(dǎo)致錯(cuò)誤的操作或決策。
影響性能
彈窗的彈出和關(guān)閉可能會(huì)增加系統(tǒng)的負(fù)擔(dān),影響性能和響應(yīng)速度。
不符合用戶習(xí)慣
對(duì)于習(xí)慣于傳統(tǒng)界面的用戶來說,過于復(fù)雜或與眾不同的彈窗交互方式可能會(huì)造成使用上的困擾和不適應(yīng)。
3、我的一些設(shè)計(jì)
我們項(xiàng)目里把升級(jí)彈窗做成了模版、廣告彈窗也是模版。當(dāng)然像二次確認(rèn)這樣的彈窗是組件,上貨看東西。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
這個(gè)是系統(tǒng)的一個(gè)展示彈窗、和一個(gè)從彈窗形式優(yōu)化到抽屜的模塊界面。
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
這個(gè)就是一個(gè)在線聊天界面。是從SaaS里跳轉(zhuǎn)新建頁面。
大概是想了想、平時(shí)做的項(xiàng)目確實(shí)比較碎、最近也沒做整理盒復(fù)盤。所以界面的展示就不放太多了。而且有的信息頁模糊了。不是我不信家人們。是我不信自己、朦朧也是一種美吧。哈哈哈
 
B端基礎(chǔ) | 彈窗設(shè)計(jì)基礎(chǔ)知識(shí)
 
 
最后
我大學(xué)設(shè)計(jì)史陳老師告誡過我們。她說同學(xué)們,我其實(shí)不怕你們眼高手低。我怕的是你們眼都不高。和優(yōu)秀的人一起前行、希望和優(yōu)秀的你們一起去經(jīng)歷設(shè)計(jì)、生活、工作的美好。
期待你的加入、我們的大伐木累。我可以作品集指導(dǎo)反正閑著也沒事不要錢。我和群里的小伙伴都是多年一線設(shè)計(jì)師來自于天南海北,不乏有互聯(lián)網(wǎng)大廠設(shè)計(jì)師。再次
期待你的加入...
 
參考
優(yōu)設(shè)網(wǎng):4個(gè)方面層層遞進(jìn),分析如何設(shè)計(jì)B端產(chǎn)品的彈窗
知乎:B端設(shè)計(jì)指南04-彈窗
知乎:運(yùn)營(yíng)彈窗的設(shè)計(jì)要點(diǎn)拆解
知乎:淺談B端產(chǎn)品彈窗一級(jí)設(shè)計(jì)方法
人人都是產(chǎn)品經(jīng)理:WEB端彈框掌握著幾天就夠了
 


作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYwNjg4NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

設(shè)計(jì)的兩面性:理性決策與感性表達(dá)

天宇 設(shè)計(jì)思維

引言
設(shè)計(jì)應(yīng)該是感性的還是理性的?設(shè)計(jì)是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會(huì)引起爭(zhēng)議無數(shù),每個(gè)人對(duì)此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點(diǎn)看似正確,卻缺乏任何實(shí)質(zhì)性的指導(dǎo)價(jià)值。
實(shí)際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設(shè)計(jì)”?有些人認(rèn)為是設(shè)計(jì)決策的過程,而有的人則認(rèn)為是最終產(chǎn)出的設(shè)計(jì)作品。大多時(shí)候,理性和感性兩種觀點(diǎn)看似針鋒相對(duì),實(shí)際上是站在設(shè)計(jì)的不同層面進(jìn)行討論。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
 
01|設(shè)計(jì)決策
從設(shè)計(jì)決策的角度來看,感性設(shè)計(jì)指的是設(shè)計(jì)師在設(shè)計(jì)過程中主要依靠個(gè)人情緒或情感進(jìn)行創(chuàng)作。許多人誤認(rèn)為,只要在設(shè)計(jì)時(shí)能與用戶產(chǎn)生共情,理解其情緒波動(dòng),并將這些喜怒哀樂、喜好厭惡融入設(shè)計(jì)作品,就算是感性設(shè)計(jì)了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對(duì)外界事物產(chǎn)生的直接感受和情緒反應(yīng),強(qiáng)調(diào)的是個(gè)人視角。
在藝術(shù)領(lǐng)域,感性占據(jù)主導(dǎo)地位,但設(shè)計(jì)并非藝術(shù)。設(shè)計(jì)的主要目標(biāo)是解決問題和滿足特定需求,而藝術(shù)更多地關(guān)注自我表達(dá)和情緒傳遞。設(shè)計(jì)始終受到客戶需求、商業(yè)目標(biāo)、市場(chǎng)趨勢(shì)和技術(shù)可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設(shè)計(jì)與藝術(shù)的顯著區(qū)別。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
站在感性“對(duì)立面”的理性,將設(shè)計(jì)視為一項(xiàng)工程或科學(xué),力求流程化和系統(tǒng)化,講究方法論,注重各方面的調(diào)研,一切動(dòng)作因問題存在而起,以問題解決而終
。甚至在實(shí)際場(chǎng)景中持續(xù)觀察作品表現(xiàn),以期得出可復(fù)用的設(shè)計(jì)模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質(zhì)屬性出發(fā),理性應(yīng)該才是設(shè)計(jì)的底色。數(shù)據(jù)驅(qū)動(dòng)、方法論支撐、可用性測(cè)試、競(jìng)品分析、用戶研究等都屬于理性思維的具象化體現(xiàn)。
由于大部分設(shè)計(jì)師的出身多以藝術(shù)打底,所以一旦設(shè)計(jì)與藝術(shù)的界限在心中變得模糊,會(huì)習(xí)慣性地
將產(chǎn)品看作自己的"作品",而非用戶的"解決方案"
。如此一來,當(dāng)面對(duì)來自各個(gè)方向的邊界與不確定性,本能的反應(yīng)就不是思考了,而是抵觸,尤其是“完美”的方案已在腦中形成,如果突如其來的新要求打亂了這一切,哪怕假以用戶之名也要選擇懟回去,并不斷美化、合理化自己的設(shè)計(jì)理念。對(duì)設(shè)計(jì)師來說,這是一種自私、不負(fù)責(zé)任和缺乏職業(yè)素養(yǎng)的表現(xiàn)。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
接下來,想象一下你的手中有一把槍,準(zhǔn)備射擊某個(gè)目標(biāo)。你的第一個(gè)動(dòng)作是什么?大概率是瞄準(zhǔn)。因?yàn)榇蠹叶贾?,射擊前通過瞄準(zhǔn)鏡或者準(zhǔn)星,先對(duì)目標(biāo)位置進(jìn)行瞄準(zhǔn)校正,射擊時(shí)才能提高命中率,這也正是理性對(duì)于設(shè)計(jì)的重要性所在。
理性在設(shè)計(jì)中的作用類似于瞄準(zhǔn)動(dòng)作,它幫助我們?cè)谠O(shè)計(jì)過程中做出科學(xué)的決策,確保設(shè)計(jì)方案的準(zhǔn)確性和可執(zhí)行性。未經(jīng)理性思考的設(shè)計(jì),就像是不瞄準(zhǔn)就立即開槍,其結(jié)果往往難以預(yù)測(cè)。當(dāng)然也可能會(huì)擊中目標(biāo),這基本上取決于兩個(gè)因素:
  1.  
    目標(biāo)遠(yuǎn)近:
    近處的目標(biāo),即使不瞄準(zhǔn),也很容易擊中;但對(duì)于遠(yuǎn)處的目標(biāo),命中率則必然大幅下降。我們可以把目標(biāo)遠(yuǎn)近理解為設(shè)計(jì)需求的難易程度,對(duì)于簡(jiǎn)單需求,不用過多的理性分析,直接設(shè)計(jì)也能完成任務(wù),但面對(duì)復(fù)雜的設(shè)計(jì)項(xiàng)目,如果不進(jìn)行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標(biāo)了。
  2.  
    個(gè)人經(jīng)驗(yàn):
    經(jīng)過反復(fù)練習(xí),可以練就不瞄準(zhǔn)也能遠(yuǎn)射的本領(lǐng),隨著經(jīng)驗(yàn)積累還能不斷提升距離值;在經(jīng)驗(yàn)不足的情況下,還不瞄準(zhǔn),就只能選擇一些近距離的射擊目標(biāo)了。設(shè)計(jì)也是這樣,對(duì)于某類產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)較多,不用太多理性的分析決策,也能達(dá)成設(shè)計(jì)目標(biāo);缺乏經(jīng)驗(yàn)時(shí),還憑借直覺草率地進(jìn)行設(shè)計(jì),再簡(jiǎn)單的項(xiàng)目也可能會(huì)搞砸。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗(yàn)的設(shè)計(jì),一個(gè)致命性的問題就是
不穩(wěn)定
!日常工作中,設(shè)計(jì)師的有效輸出和穩(wěn)定輸出至關(guān)重要。
 
02|設(shè)計(jì)表達(dá)
假設(shè)經(jīng)過瞄準(zhǔn)后的射擊都能順利擊中目標(biāo),那么接下來要關(guān)注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設(shè)計(jì)作品。在這一環(huán)節(jié),理性設(shè)計(jì)指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡(jiǎn)認(rèn)知,較少運(yùn)用裝飾性設(shè)計(jì)元素,即使使用,也大多兼具輔助內(nèi)容理解的功能性目的。
而感性設(shè)計(jì),我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強(qiáng)調(diào)的是個(gè)人出發(fā)的情緒表達(dá)。其實(shí),“情感化設(shè)計(jì)”才更負(fù)荷大家口中常說的“感性設(shè)計(jì)”所想表達(dá)的含義,相比“理性”的設(shè)計(jì)作品,情感化設(shè)計(jì)更具有“一擊必殺”的效果。
在滿足基礎(chǔ)功能需求的基礎(chǔ)之上,通過色彩、排版、圖像、動(dòng)畫等元素給予用戶充分的情感體驗(yàn),也可以利用敘事、對(duì)話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設(shè)計(jì)策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
在設(shè)計(jì)決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設(shè)計(jì)表達(dá)具有深入人心的穿透力和影響力。典型設(shè)計(jì)案例如Apple、Tesla等產(chǎn)品設(shè)計(jì)無一不是理性決策和感性表達(dá)的充分結(jié)合。因此,回到開篇提出的問題,設(shè)計(jì)應(yīng)該是感性的還是理性的?我的回答是:
作為設(shè)計(jì)師,要
堅(jiān)持理性的設(shè)計(jì)決策
,同時(shí)
追求感性的設(shè)計(jì)表達(dá)
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
 
03|兩者關(guān)系
很多人認(rèn)為,不同的設(shè)計(jì)領(lǐng)域?qū)硇院透行缘囊笥兴煌?,在B端產(chǎn)品中,理性占據(jù)主導(dǎo)地位,而C端產(chǎn)品更強(qiáng)調(diào)感性。從設(shè)計(jì)最終所呈現(xiàn)的效果來看,這種觀點(diǎn)在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場(chǎng)景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場(chǎng)景,因此關(guān)注體驗(yàn)的愉悅感受。兩者往往在風(fēng)格調(diào)性上差異化很大。
但是,對(duì)于設(shè)計(jì)決策來說,無論C端、B端還是G端,都屬于設(shè)計(jì)項(xiàng)目,都要進(jìn)行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達(dá)手法,也是
基于理性決策后的一種選擇
,是實(shí)現(xiàn)目標(biāo)的一種手段。
所以我想說的是,理性和感性兩者既不是對(duì)立關(guān)系,也不是并列關(guān)系,而是先后關(guān)系或嵌套關(guān)系:
理性是設(shè)計(jì)的基礎(chǔ)和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設(shè)計(jì)師,對(duì)于設(shè)計(jì)中的理性與感性之問,不應(yīng)停留在非此即彼或既要也要的簡(jiǎn)單認(rèn)知里,任何深入的思考都是有意義的。在這個(gè)存在分歧的問題上,希望我的觀點(diǎn)可以為你提供一點(diǎn)點(diǎn)啟發(fā),也希望各位設(shè)計(jì)師既能夠通過理性的分析制定出有效的設(shè)計(jì)策略,又能夠通過感性的表達(dá)手法創(chuàng)造出動(dòng)人的設(shè)計(jì)作品,不斷提升自身的設(shè)計(jì)價(jià)值,與產(chǎn)品實(shí)現(xiàn)共贏


作者:設(shè)計(jì)來電
鏈接:https://www.zcool.com.cn/article/ZMTYyNjY2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

動(dòng)效讓這些設(shè)計(jì)更驚艷

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

微動(dòng)效在產(chǎn)品設(shè)計(jì)中的運(yùn)用已經(jīng)非常普及了,無論是在圖標(biāo)還是界面場(chǎng)景中,都運(yùn)用得很普遍。通過動(dòng)效的輔助不僅可以提升設(shè)計(jì)情感化,也能解決更為復(fù)雜的交互場(chǎng)景,讓設(shè)計(jì)更驚艷。
 
最近在體驗(yàn)一些產(chǎn)品的過程中,黑馬哥也發(fā)現(xiàn)了幾個(gè)借助動(dòng)效表達(dá)的設(shè)計(jì)方案,效果十分的驚艷,分享出來和大家一起學(xué)習(xí)一下。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
目錄
一、3D 動(dòng)效呈現(xiàn)會(huì)員等級(jí)
二、情感化 IP 提升搜索關(guān)注度
三、結(jié)合場(chǎng)景的情感化動(dòng)效
四、3D 空間感的 Banner 設(shè)計(jì)
五、通過動(dòng)效引導(dǎo)用戶操作
六、微動(dòng)效引導(dǎo) VIP 續(xù)費(fèi)
七、動(dòng)態(tài)還原實(shí)時(shí)天氣
八、動(dòng)態(tài) IP 引導(dǎo)按鈕設(shè)計(jì)
九、微動(dòng)效賦予品牌活力
 
 
 
一、3D 動(dòng)效呈現(xiàn)會(huì)員等級(jí)
會(huì)員中心通常會(huì)通過 3D 圖標(biāo)來助力會(huì)員等級(jí)設(shè)計(jì),除了靜態(tài)的表達(dá)也會(huì)通過動(dòng)效和新穎的交互形式呈現(xiàn),以此提高會(huì)員中心的視覺表現(xiàn)力。
 
最近在體驗(yàn)騰訊視頻 APP 時(shí),會(huì)員專區(qū)在表現(xiàn)用戶會(huì)員等級(jí)的設(shè)計(jì)中,沒有使用傳統(tǒng)的徽章形式,而是以 3D 數(shù)字結(jié)合動(dòng)效的形式表達(dá)。3D 動(dòng)效的設(shè)計(jì)使得會(huì)員等級(jí)區(qū)別于常規(guī)形式,更有吸引力。 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
二、情感化 IP 提升搜索關(guān)注度
IP 形象是成就品牌的關(guān)鍵因素之一,被廣泛運(yùn)用到產(chǎn)品感官體驗(yàn)的設(shè)計(jì)中,帶來的情感化共勉也是顯而易見的。
 
在使用悟空瀏覽器 APP 時(shí),啟動(dòng)產(chǎn)品進(jìn)入首頁后搜索框上方出現(xiàn)悟空的 IP 形象,悟空呈現(xiàn)出左右環(huán)顧、上下打量,最后看向搜索框的系列動(dòng)作等表現(xiàn)。不僅提高了搜索功能的關(guān)注度,也使得產(chǎn)品設(shè)計(jì)更具情感化。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
三、結(jié)合場(chǎng)景的情感化動(dòng)效
根據(jù)不同的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)表達(dá),可以更好的服務(wù)目標(biāo)用戶,而情感化的設(shè)計(jì)提升,可以拉近產(chǎn)品與用戶之間的親和力。
 
為了降低用戶等餐過程中出現(xiàn)的負(fù)面情緒,餓了么 APP 下單之后在詳情頁中根據(jù)點(diǎn)餐的不同設(shè)計(jì)了情感化的動(dòng)效表達(dá)。無論是快餐還是冷飲等,都針對(duì)性地設(shè)計(jì)了微動(dòng)效的元素,以此來表現(xiàn)當(dāng)前狀態(tài)。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
四、3D 空間感的 Banner 設(shè)計(jì)
通過突出設(shè)計(jì)、交互、布局結(jié)構(gòu)等的創(chuàng)意性,可以使得 Banner 具備更強(qiáng)的差異化,以此來突出 Banner 的存在感。
 
騰訊視頻 APP 首頁的 Banner 布局也會(huì)經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案,比如之前體驗(yàn)到一個(gè)結(jié)合 3D 空間感營(yíng)造的設(shè)計(jì)案例,就非常有吸引力。通過動(dòng)態(tài)過度到立體空間,再恢復(fù)到默認(rèn)形式,這個(gè)動(dòng)態(tài)的過程演變就能讓用戶過目不忘。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
五、通過動(dòng)效引導(dǎo)用戶操作
針對(duì)一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會(huì)通過一些特殊的設(shè)計(jì)表達(dá)來提升用戶的關(guān)注度,引導(dǎo)用戶進(jìn)行相關(guān)操作。
 
比如麥當(dāng)勞 APP 首頁中,為了吸引用戶下拉進(jìn)入二層樓,通過動(dòng)效的形式設(shè)計(jì)了一個(gè)搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風(fēng)飄動(dòng)的鈴鐺,就會(huì)忍不住去拉動(dòng),這就達(dá)到了引導(dǎo)用戶操作的目的,提高了二層樓內(nèi)容的曝光度。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
六、微動(dòng)效引導(dǎo) VIP 續(xù)費(fèi)
針對(duì)一些無法通過占比面積進(jìn)行突出的元素,運(yùn)用微動(dòng)效的形式設(shè)計(jì)是常見的設(shè)計(jì)手法。
 
網(wǎng)易云音樂 APP “我的”板塊中,為了突出 VIP 續(xù)費(fèi)按鈕,黑膠唱片以動(dòng)效的形式在按鈕中來回滾動(dòng),以此強(qiáng)化續(xù)費(fèi)按鈕的關(guān)注度。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
七、動(dòng)態(tài)還原實(shí)時(shí)天氣
天氣類產(chǎn)品從簡(jiǎn)單的靜態(tài)預(yù)告升級(jí)為動(dòng)態(tài)實(shí)時(shí)還原,可以讓用戶更加直觀的判斷天氣變化,也能提高界面設(shè)計(jì)的感官體驗(yàn)。
 
比如 iPhone 自帶的天氣 APP,以動(dòng)態(tài)還原實(shí)時(shí)天氣作為界面背景,不僅便于用戶識(shí)別天氣,也使得產(chǎn)品設(shè)計(jì)更具情感化體驗(yàn)。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
八、動(dòng)態(tài) IP 引導(dǎo)按鈕設(shè)計(jì)
按鈕設(shè)計(jì)樣式可以發(fā)揮的空間很大,除了在造型、配色、空間感等方面突出設(shè)計(jì)以外,也能通過按鈕微動(dòng)效或者動(dòng)態(tài)引導(dǎo)等形式強(qiáng)化。
 
比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動(dòng)效 IP 引導(dǎo)進(jìn)行設(shè)計(jì)。不僅使得按鈕更突出,設(shè)計(jì)感也顯得俏皮可愛,凸顯親和力。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
九、微動(dòng)效賦予品牌活力
立足于品牌做設(shè)計(jì)是突出產(chǎn)品差異化的關(guān)鍵,這也是產(chǎn)品設(shè)計(jì)未來的演變趨勢(shì)之一,如何提高品牌的曝光度和記憶度,成為設(shè)計(jì)師不斷探索的方向。
 
最近在使用夸克 APP 時(shí),微動(dòng)效賦予品牌 LOGO 的活力感讓人印象深刻。在眾多特殊節(jié)慶等時(shí)間段,夸克也會(huì)以動(dòng)效的形式賦予品牌更多變化,不僅使得產(chǎn)品更具年輕化屬性,也能更好的傳遞品牌基因。
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
動(dòng)效讓這些設(shè)計(jì)更驚艷
 
 
 
 
小結(jié)
動(dòng)效使得產(chǎn)品具備更多的變化,也能輔助解決更多復(fù)雜功能的交互場(chǎng)景,探索動(dòng)效的場(chǎng)景運(yùn)用可以提升設(shè)計(jì)靈感,希望本期的分享可以帶給大家更多設(shè)計(jì)靈感。本文描述屬于個(gè)人體驗(yàn)總結(jié),不足之處我們努力改進(jìn)。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYzOTIyOA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

7大色彩技巧讓你界面更吸睛

天宇 B端ui設(shè)計(jì)文章及欣賞

色彩在我們?nèi)粘TO(shè)計(jì)中起著定生死的作用,它是設(shè)計(jì)的靈魂,舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿,感覺在自己的設(shè)計(jì)生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會(huì)有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對(duì)我們做好設(shè)計(jì)至關(guān)重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應(yīng)用
五、 不同場(chǎng)景下的色彩應(yīng)用
六、 色彩在B端設(shè)計(jì)中的作用
七、 B端色彩設(shè)計(jì)使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學(xué)角度
色彩是光的屬性,當(dāng)光波通過物體時(shí),物體會(huì)吸收某些波長(zhǎng)的光,而反射或透射其他波長(zhǎng)的光,這些被反射或透射的光波長(zhǎng)度決定了我們看到的顏色。
 
2、心理學(xué)角度
色彩是人腦對(duì)光波長(zhǎng)的視覺感知,不同的波長(zhǎng)刺激視網(wǎng)膜上不同類型的感光細(xì)胞,進(jìn)而產(chǎn)生不同的色彩感覺。
 
3、 藝術(shù)學(xué)角度
色彩是藝術(shù)創(chuàng)作的重要元素,它不僅關(guān)乎視覺感受,還與情感、文化、象征意義相關(guān)聯(lián)。
 
4、 設(shè)計(jì)學(xué)角度
在設(shè)計(jì)領(lǐng)域,色彩是傳達(dá)信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
 
5、 計(jì)算機(jī)科學(xué)角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個(gè)顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍(lán)、紫等。不同的色別都可用光譜中的波長(zhǎng)來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時(shí),同一色相在受光強(qiáng)弱或者物體對(duì)光的吸收、反射性能不同的情況下,會(huì)呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長(zhǎng)單一程度越高,飽和度就會(huì)越高;不同色別所達(dá)到的飽和度不同,一般情況下,紅色的純度可達(dá)到最高,綠色的則相對(duì)較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會(huì)導(dǎo)致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結(jié)構(gòu)對(duì)光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設(shè)計(jì)工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細(xì)微的變化,我通常會(huì)通過調(diào)節(jié)S和B的百分比數(shù)值來達(dá)到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設(shè)計(jì)項(xiàng)目中,運(yùn)用該色彩模型做的一個(gè)實(shí)戰(zhàn),項(xiàng)目中用到了一個(gè)圖形,需要用同色系來表達(dá),我保持了H色值的不變,讓S值和B值都發(fā)生著微妙的不同,于是就產(chǎn)生了四五種同色系的綠色,該色彩模型特別的好使,也鼓勵(lì)大家多在實(shí)戰(zhàn)中運(yùn)用這樣的色彩模型,簡(jiǎn)單實(shí)用。
 
H色相:Hue,以角度(0°-360°)表示
S飽和度:Saturation,以百分比值(0%-100%)表示
B/V 亮度:Brightness 或 Value,以百分比值(0%-100%)表示
 
 
 
 
2、RGB模型
RGB是從顏色發(fā)光的原理來設(shè)計(jì)定的,通俗點(diǎn)說它的顏色混合方式就好像有紅、綠、藍(lán)三盞燈,當(dāng)它們的光相互疊合的時(shí)候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍(lán)三個(gè)顏色通道每種色各分為256階亮度,在0時(shí)“燈”最弱——是關(guān)掉的,而在255時(shí)“燈”最亮。當(dāng)三色灰度數(shù)值相同時(shí),產(chǎn)生不同灰度值的灰色調(diào),即三色灰度都為0時(shí),是最暗的黑色調(diào);三色灰度都為255時(shí),是最亮的白色調(diào)。
7大色彩技巧讓你界面更吸睛
 
 
R紅:Red,以數(shù)值(0-255)表示
G綠:Green,以數(shù)值(0-255)表示
B藍(lán):Blue,以數(shù)值(0-255)表示
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、CMYK模型
雖然RGB模型色彩更加的豐富,但是很多顏色不能完全打印出來,于是CMYK模型就成了打印、印刷的不二選擇。C是青、M是品紅、Y是黃、K是黑,通過顏料反射和吸收光線來顯色。
 
記得之前自己從事平面工作的時(shí)候,就經(jīng)常要用到CMYK模式,因?yàn)橛〕鰜淼男Ч钍亲钚〉?,是最靠近設(shè)計(jì)效果圖的。
7大色彩技巧讓你界面更吸睛
 
 
通過對(duì)比,我們發(fā)現(xiàn)RGB色彩模型顏色顯示上確實(shí)更加的絢麗豐富些,而CMYK的色彩模型顏色顯示上就黯淡了不少,但是要印刷的話,就必須轉(zhuǎn)化為成CMYK的色彩模式。
 
R青:Cyan,以百分比值(0%-100%)表示
M品紅:Magenta,以百分比值(0%-100%)表示
Y黃:Yellow,以百分比值(0%-100%)表示
B黑:Black,以百分比值(0%-100%)表示
 
 
 
 
四、色彩的語意及應(yīng)用
1、紅色的語意及應(yīng)用
紅色代表熱情、活力、強(qiáng)烈的情感和愛。它可以象征著激情、勇氣和行動(dòng)力,也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運(yùn)用了紅色,因?yàn)榧t色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應(yīng)用
橙色傳達(dá)溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個(gè)登錄界面就運(yùn)用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運(yùn)用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應(yīng)用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個(gè)色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時(shí)它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長(zhǎng)的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應(yīng)用
綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān),給人帶來安寧、放松的感覺,也象征著成長(zhǎng)、希望和新生。
青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注,同時(shí)綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應(yīng)用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時(shí)也帶有一絲清新的活力。
青色是一種帶有藍(lán)色和綠色的顏色,因此青色既有藍(lán)色的專業(yè)感、信任感,也有綠色的生機(jī)感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復(fù)蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍(lán)色的語意及應(yīng)用
藍(lán)色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關(guān),能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍(lán)色,藍(lán)色符合社會(huì)的普遍審美認(rèn)知,接受度比較高;其次,藍(lán)色給人安全的感覺,也符合云盤的初衷,給用戶安全的存儲(chǔ)服務(wù)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
7、紫色的語意及應(yīng)用
紫色象征神秘、高貴和浪漫;它常給人一種優(yōu)雅、奢華的感覺,同時(shí)也帶有神秘莫測(cè)的氛圍,與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶是女性,紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應(yīng)用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡(jiǎn)潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場(chǎng)景下的色彩應(yīng)用
 
1、商場(chǎng)的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場(chǎng)所中脫穎而出,色彩鮮艷的商場(chǎng)外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實(shí)多彩的顏色更加容易引起我的關(guān)注,這不看到商場(chǎng)的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強(qiáng)可見性
即使在較遠(yuǎn)的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場(chǎng)更容易被發(fā)現(xiàn),提高商場(chǎng)的知名度和曝光度。
多彩的配色,讓我遠(yuǎn)遠(yuǎn)的就被商場(chǎng)美輪美奐的插畫吸引,大大增加了商場(chǎng)的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營(yíng)造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場(chǎng)時(shí),會(huì)感受到一種愉悅和輕松的氛圍,從而更愿意在商場(chǎng)中停留和購物。
星沙永旺城的美陳設(shè)計(jì)很好,墻面采用極具誘惑力的顏色與美食,把小小實(shí)物十倍放大,增加了視覺看點(diǎn),讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場(chǎng),可以暫時(shí)擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設(shè)計(jì),引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠(yuǎn)離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導(dǎo)消費(fèi)行為
商場(chǎng)通常會(huì)使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點(diǎn)商品,對(duì)于一些重點(diǎn)推薦的商品或促銷活動(dòng),商場(chǎng)可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導(dǎo)他們進(jìn)行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達(dá)個(gè)性和風(fēng)格
不同的商場(chǎng)可能有不同的品牌定位和目標(biāo)客戶群體。通過選擇特定的色彩組合,商場(chǎng)可以傳達(dá)出自己的個(gè)性和風(fēng)格,吸引與之相符的顧客。
 
6.2 增強(qiáng)品牌記憶度
獨(dú)特而鮮明的色彩搭配可以讓商場(chǎng)在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識(shí)度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個(gè)區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費(fèi)者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導(dǎo)用戶消費(fèi)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍(lán)色在B端設(shè)計(jì)中廣泛應(yīng)用?
? 視覺特性方面
1.1 穩(wěn)定性
藍(lán)色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進(jìn)行復(fù)雜的操作,藍(lán)色的穩(wěn)定性可以讓用戶感到安心,增強(qiáng)對(duì)產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍(lán)色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達(dá)出專業(yè)、高效的形象,藍(lán)色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍(lán)色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場(chǎng)景中,用戶可能需要長(zhǎng)時(shí)間使用產(chǎn)品,藍(lán)色的舒緩效果有助于提高用戶的使用體驗(yàn)。
 
2.2 提高專注度
藍(lán)色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務(wù)。對(duì)于B端用戶來說,高效完成工作是首要目標(biāo),藍(lán)色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗(yàn),跟教育有著異曲同工之處,就像這個(gè)易貝樂少兒英語一樣,用大面積的藍(lán)色,希望孩子在這里能很快的安靜下來學(xué)習(xí)、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習(xí)慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場(chǎng)中廣泛使用藍(lán)色,逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計(jì)B端產(chǎn)品時(shí),也會(huì)傾向于選擇藍(lán)色以符合用戶的認(rèn)知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設(shè)計(jì)中,藍(lán)色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計(jì)師們?cè)谘永m(xù)這一傳統(tǒng)的同時(shí),也不斷優(yōu)化和創(chuàng)新藍(lán)色的運(yùn)用方式,使其更符合現(xiàn)代設(shè)計(jì)趨勢(shì)和用戶需求。
 
嘉為科技是一個(gè)有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍(lán)的風(fēng)格,應(yīng)該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍(lán)色可以提高產(chǎn)品的復(fù)用率
很多用戶都能接受藍(lán)色的B端界面,當(dāng)面對(duì)有差不多需求客戶時(shí),同一套UI,可以多次復(fù)用,可以減少開發(fā)成本和設(shè)計(jì)成本,這也是自己通過長(zhǎng)期實(shí)戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個(gè)UI風(fēng)格,用在了兩個(gè)項(xiàng)目中,不同的用戶,趨向同樣的風(fēng)格,說明藍(lán)色在大家心目中的接受度是非常的高,用藍(lán)色可以促進(jìn)設(shè)計(jì)的多次復(fù)用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項(xiàng)目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡(jiǎn)潔,不像商場(chǎng)里面的美陳背景設(shè)計(jì),色彩對(duì)比非常的強(qiáng)烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風(fēng),探索一種大膽的色彩風(fēng)格時(shí),雖然風(fēng)格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習(xí)慣進(jìn)行設(shè)計(jì)時(shí),就很好,客戶一致認(rèn)同。
 
可見每個(gè)領(lǐng)域都有自己的色彩運(yùn)用習(xí)慣,商場(chǎng)需要吸引人眼球、刺激消費(fèi),越大膽越好,可是B端設(shè)計(jì)需要提供一個(gè)讓人平靜去處理工作事項(xiàng)的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設(shè)計(jì)中的作用?
1、通過色彩向用戶反饋操作結(jié)果及當(dāng)前狀況
比方在日常設(shè)計(jì)當(dāng)中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍(lán)色代表著鏈接,同時(shí)不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結(jié)果和狀況方面,色彩起著非常重要的作用。
 
下面這個(gè)IDC運(yùn)營(yíng)的監(jiān)測(cè)平臺(tái),它就是通過顏色來區(qū)分不同的告警級(jí)別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進(jìn)行品牌傳達(dá)
B端設(shè)計(jì)中大面積使用品牌色,可以強(qiáng)化品牌形象,使用與品牌標(biāo)志風(fēng)格相近的色彩,可以幫助用戶快速識(shí)別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強(qiáng)用戶對(duì)品牌的信任。
 
例如我給湖南高速設(shè)計(jì)的一套B端界面設(shè)計(jì),用戶強(qiáng)烈要求改變傳統(tǒng)的藍(lán)色風(fēng)格,要求整套界面設(shè)計(jì)要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達(dá)。(備注:圖中數(shù)據(jù)都不是真實(shí)數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進(jìn)行信息區(qū)分
在B端界面設(shè)計(jì)中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局,例如,導(dǎo)航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計(jì)的天翼寫作,就是這樣的設(shè)計(jì)思路,導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗(yàn)
選擇合適的色彩對(duì)比度可以增強(qiáng)文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當(dāng)?shù)纳士梢誀I(yíng)造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗(yàn)。
 
我參與的這個(gè)后臺(tái)界面,就是通過合理的色彩搭配來引導(dǎo)用戶使用的,當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會(huì)是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進(jìn)程的卡點(diǎn),提升了用戶體驗(yàn)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、色彩可以傳遞性格
人的性格有活潑的、文靜的、沉穩(wěn)的、深邃的,其實(shí)色彩也是有性格的,不同的色彩也有不同的性格,當(dāng)我們對(duì)色彩的性格有足夠多的了解,在面對(duì)不同的客戶時(shí),我們對(duì)色彩的拿捏以及設(shè)計(jì)需求的把握時(shí),會(huì)更加的游刃有余。
7大色彩技巧讓你界面更吸睛
 
 
 
我們平常確實(shí)是在做設(shè)計(jì),但是我們更多的是在與人打交道,我們更好的聆聽,會(huì)幫助我們更快的抓取到客戶的喜好,快速做出滿足客戶需求的設(shè)計(jì),少受加班之苦。
比方說我之前給云門戶設(shè)計(jì)的一套UI,客戶的決策層是男性,且年齡偏大,他們就偏愛深沉的UI風(fēng)格;而我負(fù)責(zé)的天翼云電腦專家,客戶的決策層是女性,且年齡偏年輕,她每次就喜歡輕盈、明快的UI色調(diào),不同的決策層客戶,就會(huì)帶來不同的設(shè)計(jì)結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
七、B端色彩設(shè)計(jì)使用的原則
1、B端設(shè)計(jì)中,色彩設(shè)計(jì)應(yīng)遵循6:3:1原則
在這個(gè)登錄頁面中,我就是運(yùn)用的6:3:1原則,60%的主色,30%的次要色,10%的點(diǎn)綴色;使用了大面積的藍(lán)色和藍(lán)灰色,最后使用一點(diǎn)點(diǎn)的橙色,這樣的配色會(huì)顯得高級(jí)。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風(fēng)格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級(jí)關(guān)系。
 
比方說我參與的星辰大模型AI文檔生成能力的應(yīng)用,里面無論文字顏色還是底色都是運(yùn)用的無彩色,只是通過了色彩深淺變化來做了層級(jí)區(qū)分,因?yàn)闊o彩色可以起到很好的降噪作用,既傳達(dá)了信息,又不會(huì)顯得界面凌亂復(fù)雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說,日常我們?cè)O(shè)計(jì)的卡片都是用的白色,而底色我們用的是灰色,因?yàn)榭ㄆ锩娴膬?nèi)容都是比較重要的信息,需要用一個(gè)亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個(gè)一前一后的對(duì)比,更好的幫助內(nèi)容進(jìn)行傳播。
 
比方說我設(shè)計(jì)的這個(gè)IT運(yùn)維監(jiān)控平臺(tái)的首頁,物理主機(jī)、網(wǎng)絡(luò)及安全設(shè)備、工單、在途工單這幾個(gè)指標(biāo)是非常關(guān)鍵的,所以他們的圖片底色用了純度比較高的有彩色來標(biāo)識(shí)。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、設(shè)計(jì)前一定要有定色調(diào)的意識(shí)
作為設(shè)計(jì)師,我們的設(shè)計(jì)工作其實(shí)就是在設(shè)計(jì)一種感覺,一種情緒,設(shè)計(jì)前定調(diào)的意識(shí)真的太重要了,感覺對(duì)了,什么都就對(duì)了。
 
比方說我前段時(shí)間接到了一個(gè)B端的大屏可視化需求設(shè)計(jì),客戶說之前的大屏設(shè)計(jì)不喜歡,希望重新出一個(gè)新的設(shè)計(jì),然后公司的需求對(duì)接人員在給我下達(dá)需求時(shí),真的就只是給我下達(dá)了這幾個(gè)字,讓我重新出一個(gè)設(shè)計(jì)試試。
 
以我的職業(yè)直覺,感覺這個(gè)需求是不夠細(xì)化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍(lán)色調(diào)的還是別的?果然一問,客戶說不希望再用常規(guī)的藍(lán)色的,希望新的設(shè)計(jì)要用他們的品牌色綠色,剛聽到這幾個(gè)字的時(shí)候,我以為這次我把握住需求了,在收集參考圖的時(shí)候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習(xí)慣,我覺得深色會(huì)更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時(shí)候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認(rèn)一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風(fēng)格來出圖。
 
在出稿之前,通過自己反復(fù)的溝通確認(rèn),發(fā)現(xiàn)設(shè)計(jì)前的定調(diào)意識(shí)真的太重要了,要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細(xì)化,就不會(huì)有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設(shè)計(jì)的灰色盡量使用帶有色彩偏向的灰
不管我們?cè)O(shè)計(jì)什么色系的界面,都避不開用到灰色,在設(shè)計(jì)中用跟主視覺相符的灰,會(huì)使得界面更加的高級(jí)、協(xié)調(diào)與美觀,注意好了這個(gè)小細(xì)節(jié),會(huì)給我們的設(shè)計(jì)加分不少。
 
下面是我日常體驗(yàn)到的兩個(gè)界面,上面綜合管理平臺(tái)里面的灰色就沒有跟主色調(diào)藍(lán)色相呼應(yīng),灰色沒有向藍(lán)色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設(shè)計(jì)就非常的注重細(xì)節(jié),灰色偏紫,整個(gè)界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個(gè)等級(jí)。
 
一個(gè)微小細(xì)節(jié)的在意,在無形中拉高了設(shè)計(jì)的高度,十個(gè)細(xì)節(jié)乃至更多細(xì)節(jié)的在意,就會(huì)帶來更多意想不到的結(jié)果。
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
總結(jié):
以上就是我最近對(duì)色彩的一些頓悟、感受和學(xué)習(xí)收獲,在不斷的復(fù)盤總結(jié)中,我們總會(huì)收獲一些新的認(rèn)知,通過這次色彩的復(fù)盤之旅,發(fā)現(xiàn)色彩對(duì)設(shè)計(jì)師真的太重要了,希望我的分享對(duì)大家有啟發(fā),不足之處也歡迎大家留言交流。


作者:姝斐suphie
鏈接:https://www.zcool.com.cn/article/ZMTYzOTMwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

以用戶為中心的交互設(shè)計(jì)思維

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

 
聊聊關(guān)于設(shè)計(jì)思維的內(nèi)容,會(huì)從產(chǎn)品設(shè)計(jì)、體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)三個(gè)方面入手。
目前是第三篇,關(guān)于交互設(shè)計(jì)思維的內(nèi)容。到這里設(shè)計(jì)思維的內(nèi)容全部結(jié)束了。
感謝
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維
 
 
以用戶為中心的交互設(shè)計(jì)思維


作者:DesignLink
鏈接:https://www.zcool.com.cn/article/ZMTY0OTg1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)

天宇 B端ui設(shè)計(jì)文章及欣賞

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計(jì)文章的初衷。
 
慢慢發(fā)現(xiàn)其實(shí)分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對(duì)設(shè)計(jì)的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個(gè)還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對(duì)我寫的這個(gè)系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個(gè)系列的文章頁算是告一段落了、下一階段我會(huì)做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、內(nèi)容總結(jié)
因?yàn)樵趯戇@個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識(shí)。希望告訴你更多。這里我會(huì)把主要的這個(gè)系列的知識(shí)總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化。回頭我會(huì)寫一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實(shí)還挺簡(jiǎn)單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領(lǐng)導(dǎo)的喜好決定。對(duì)還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機(jī)號(hào)、賬號(hào)、第三方
標(biāo)題切換字號(hào):我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡(jiǎn)單)、一般都是科技風(fēng)
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對(duì)是很簡(jiǎn)單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會(huì)很優(yōu)秀、但是剛重要的是不會(huì)出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎(chǔ)篩選組件(就是我們常見的頁面頂部的篩選)、高級(jí)篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實(shí)還簡(jiǎn)單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會(huì)有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點(diǎn):不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對(duì)來說是我自己的弱項(xiàng)、在寫當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競(jìng)品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯础N以谧约旱墓ぷ髦猩实膽?yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺(tái)字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會(huì)采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。
 
字號(hào):最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長(zhǎng)規(guī)律
 
行高:通過邏輯得到這樣一個(gè)公式:「 行高 = 字號(hào) + n 」,8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號(hào)行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計(jì)算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則,制定了簡(jiǎn)易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對(duì)比滿足至少1:4.5( AA級(jí)別)。且驗(yàn)證了其中的實(shí)用性,共分為亮暗兩種模式,4 個(gè)色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
設(shè)計(jì)原則:準(zhǔn)確、簡(jiǎn)單、節(jié)奏、愉悅。
 
設(shè)計(jì)實(shí)戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺(tái)應(yīng)用
 
ICON分類:交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺得這部分是相對(duì)簡(jiǎn)單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺(tái)的風(fēng)格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個(gè)規(guī)范對(duì)按鈕形狀的規(guī)范基本都一樣。提供長(zhǎng)方形、正方形、圓角長(zhǎng)方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對(duì)產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺(tái)彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對(duì)很好處理的部分。只要你做好規(guī)范這部分、簡(jiǎn)直就是一點(diǎn)開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
彈窗是一個(gè)我頭痛的問題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會(huì)采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
我們?cè)诤笈_(tái)系統(tǒng)中、大部分的場(chǎng)景都會(huì)使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡(jiǎn)潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。
 
1.10、表格
 
B端設(shè)計(jì)中,對(duì)數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡(jiǎn)單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進(jìn)階的一些知識(shí)就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識(shí)了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒有自己平臺(tái)的設(shè)計(jì)規(guī)范。那就去直接用的場(chǎng)的設(shè)計(jì)規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺(tái)的設(shè)計(jì)規(guī)范。逐漸的你就會(huì)形成一個(gè)屬于你們自己平臺(tái)業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。
 
2、計(jì)劃
 
這個(gè)基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對(duì)你的B端設(shè)計(jì)有所幫助。之后我會(huì)寫二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會(huì)寫我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤。
 
第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識(shí)。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會(huì)提出和討論一些設(shè)計(jì)問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長(zhǎng)、總是要一步一步的來。很快我們會(huì)再次相見。我是KING(國王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
新的開始見.......
 
注解:標(biāo)題的40000余字也好、50000字也好都是說的我這個(gè)系列總計(jì)的字?jǐn)?shù)、因?yàn)橄胱屇銈兛吹健?/div>

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)

天宇 移動(dòng)端UI設(shè)計(jì)文章及欣賞

俗話說:“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟,我們對(duì)于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會(huì)越來越多,設(shè)計(jì)輸出也會(huì)因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。
 
黑馬哥結(jié)合職場(chǎng)經(jīng)驗(yàn)和教學(xué)經(jīng)驗(yàn),總結(jié)了 120+ 設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的案例分析。案例內(nèi)容涉及布局、圖標(biāo)、按鈕、文本、配色、配圖、規(guī)范、交互和設(shè)計(jì)經(jīng)驗(yàn)等,目的是為了讓我們的設(shè)計(jì)更規(guī)范、更專業(yè)、有細(xì)節(jié)、有亮點(diǎn)、有思維。
 
今天先挑選其中的 10 個(gè)案例和大家一起交流一下。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
分享目錄
 
1. 圓角圖片對(duì)齊時(shí)不要完全左對(duì)齊
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
3. 數(shù)據(jù)表達(dá)特殊化
4. 預(yù)估好信息呈現(xiàn)的最大值
5. 慎用高飽和度的顏色
6. 通過蒙版降低信息干擾度
7. 利用背景色突出小圖標(biāo)的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對(duì)齊時(shí)不要完全左對(duì)齊
 
設(shè)計(jì)中遇到圖片帶有圓角時(shí),文字排版不適合完全基于圖片左對(duì)齊,視覺上會(huì)顯得文字太靠左,失去視覺平衡度。適當(dāng)預(yù)留間距視覺上更平衡,版面結(jié)構(gòu)也會(huì)更穩(wěn)重。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
 
同屬性版塊需要統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范,不要出現(xiàn)風(fēng)格混搭,遵循圖標(biāo)設(shè)計(jì)的十大統(tǒng)一性:風(fēng)格、大小、粗細(xì)、圓角、比例、透視、角度、疏密、間距、正負(fù)形。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
3. 數(shù)據(jù)表達(dá)特殊化
 
在可視化的場(chǎng)景中,針對(duì)一些特殊數(shù)據(jù)展示的時(shí)候,可以選擇特殊字體增加設(shè)計(jì)感。再通過字體大小對(duì)比、字重對(duì)比、顏色深淺對(duì)比等來突出數(shù)據(jù)。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
4. 預(yù)估好信息呈現(xiàn)的最大值
 
在進(jìn)行 UI 設(shè)計(jì)時(shí),需要預(yù)估好當(dāng)前位置所能承載的最大值,不能只在理想化的狀態(tài)內(nèi)設(shè)計(jì)。雖然簡(jiǎn)化的內(nèi)容看起來更美觀,但是最大值下的設(shè)計(jì)思考才能避免上線后的誤差。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設(shè)計(jì)配色需要考慮用戶長(zhǎng)時(shí)間的預(yù)覽體驗(yàn),高飽和度的配色不適合長(zhǎng)時(shí)間觀看,容易造成視覺疲勞。適當(dāng)降低飽和度使得配色更加舒適,有利于提升用戶預(yù)覽體驗(yàn)度。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
6. 通過蒙版降低信息干擾度
 
在圖片上面展示文案時(shí),需要考慮圖片對(duì)于文案信息的干擾度。為了防止復(fù)雜場(chǎng)景的圖片干擾信息傳遞,需要在信息區(qū)域添加漸變蒙版,以此來降低對(duì)于信息的干擾度。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
7. 利用背景色突出小圖標(biāo)的空間占比
 
需要突出圖標(biāo)的空間占比時(shí),放大圖標(biāo)會(huì)顯得視覺焦點(diǎn)太強(qiáng),也容易暴露圖標(biāo)繪制的缺點(diǎn)而顯得粗糙。添加統(tǒng)一的造型和背景色,可以突出小圖標(biāo)的空間占比,提升感官體驗(yàn)。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場(chǎng)景中,需要對(duì)按鈕添加漸變色時(shí),最好選擇近似色等鄰近范圍的配色,會(huì)使得視覺效果更加和諧、舒適。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對(duì)比,始終保持按鈕與背景的高對(duì)比度和可讀性。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標(biāo)簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺效果對(duì)比模糊,畫面表現(xiàn)不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設(shè)計(jì)的 10 個(gè)細(xì)節(jié)
 
 
 
 
小結(jié)
 
以上案例屬于 120+ 案例中隨機(jī)挑選的 10 個(gè)作為示意,該系列案例也會(huì)持續(xù)更新。希望大家可以從這些案例中獲得一些設(shè)計(jì)經(jīng)驗(yàn),助力設(shè)計(jì)輸出,能夠做出更好的設(shè)計(jì)作品。經(jīng)驗(yàn)屬于個(gè)人職場(chǎng)和教學(xué)中的沉淀,如有不足歡迎留言補(bǔ)充。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYyNjg0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

本文從產(chǎn)品角度出發(fā),深入探討了如何發(fā)起交互設(shè)計(jì)。通過明確產(chǎn)品目標(biāo)與用戶需求、進(jìn)行用戶研究、構(gòu)建信息架構(gòu)、設(shè)計(jì)流程與界面、進(jìn)行原型測(cè)試以及持續(xù)優(yōu)化等關(guān)鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗(yàn)并實(shí)現(xiàn)產(chǎn)品目標(biāo)的交互設(shè)計(jì)。
 
一、引言
 
在當(dāng)今數(shù)字化的時(shí)代,產(chǎn)品的成功不僅僅取決于其功能的強(qiáng)大,更在于能否為用戶提供流暢、愉悅且富有價(jià)值的交互體驗(yàn)。從產(chǎn)品角度發(fā)起交互設(shè)計(jì),意味著將用戶置于核心,以實(shí)現(xiàn)產(chǎn)品的商業(yè)目標(biāo)和用戶需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
二、明確產(chǎn)品目標(biāo)與用戶需求
 
(一)定義產(chǎn)品目標(biāo)
產(chǎn)品目標(biāo)是交互設(shè)計(jì)的起點(diǎn),它決定了設(shè)計(jì)的方向和重點(diǎn)。產(chǎn)品經(jīng)理需要與團(tuán)隊(duì)共同明確產(chǎn)品的定位、市場(chǎng)需求以及預(yù)期的商業(yè)成果。例如,是旨在提高用戶活躍度,還是增加用戶轉(zhuǎn)化率,或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
(二)挖掘用戶需求
通過市場(chǎng)調(diào)研、用戶反饋、競(jìng)品分析等手段,深入了解目標(biāo)用戶的行為習(xí)慣、痛點(diǎn)和期望。這不僅包括對(duì)用戶顯性需求的捕捉,還包括對(duì)潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
三、進(jìn)行用戶研究
 
(一)用戶畫像創(chuàng)建
基于收集到的數(shù)據(jù),構(gòu)建詳細(xì)的用戶畫像,包括用戶的年齡、性別、職業(yè)、教育背景、使用場(chǎng)景等特征,以便更精準(zhǔn)地理解用戶的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
 
(二)用戶場(chǎng)景分析
模擬用戶在不同場(chǎng)景下與產(chǎn)品的交互過程,發(fā)現(xiàn)可能存在的問題和優(yōu)化點(diǎn)。
舉例說明:
我們要知道,地鐵周邊美食,這是一個(gè)解決方案。真正的需求是什么?一個(gè)字一個(gè)字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個(gè)和線下場(chǎng)景很相關(guān)的項(xiàng)目,我們要把不同目的核心用戶的主要使用場(chǎng)景寫出來。經(jīng)過分析,我們得出了用戶會(huì)選擇我們產(chǎn)品,且產(chǎn)品未來可能存在的各種場(chǎng)景A、B、C、D、E。如下圖所示:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
如果按照目標(biāo)人群所在場(chǎng)景分類,進(jìn)行細(xì)分,則為下圖:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別:前為用戶會(huì)乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團(tuán)購產(chǎn)品有競(jìng)爭(zhēng)力。
上班族和普通大眾區(qū)別:上班族工作日使用固定地鐵站上下班,時(shí)間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達(dá)某目的地,就近享受目的地美食。
朋友們和個(gè)人區(qū)別:朋友們一起吃飯,容易出現(xiàn)喝多、吃過點(diǎn)等異常行為,并且在選擇地鐵旁吃飯地點(diǎn)時(shí)需要考慮朋友們家的位置就近選目的地。個(gè)人均不需要考慮以上,較為自由。
 
市場(chǎng)定位
經(jīng)過領(lǐng)域場(chǎng)景的分析,我們知道了真場(chǎng)景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對(duì)這么一群大眾進(jìn)行用戶人口統(tǒng)計(jì)學(xué)類的細(xì)分:
如何從產(chǎn)品角度發(fā)起交互設(shè)計(jì)?
 
 
  • 上圖為前期定位的目標(biāo)大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個(gè)影響因素:時(shí)間+美食熱愛程度。同時(shí)我們把直接競(jìng)品和間接競(jìng)品一同進(jìn)行用戶群比較??梢钥吹胶痛竺缊F(tuán)有相同和不同維度,這就是產(chǎn)品最初冷啟動(dòng)時(shí)期的差異化!也就是我們的前、中期場(chǎng)景的主要目標(biāo)用戶類型。
  • 紅色部分即種子用戶群,以這些群體為冷啟動(dòng)階段,可以更快的向四周擴(kuò)張。因?yàn)樗麄冇惺褂玫罔F的時(shí)間屬性,同時(shí)有較高的美食熱愛程度,有利于帶動(dòng)其他時(shí)間+熱愛程度的用戶加入產(chǎn)品,實(shí)現(xiàn)快速并有質(zhì)量的拉新、活躍的目標(biāo)。
  • 低端直接競(jìng)品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競(jìng)品即注重社交、ugc為起點(diǎn),逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
 
結(jié)合上圖和要做的場(chǎng)景,我們得出了產(chǎn)品具體目標(biāo)用戶:乘坐地鐵快速到達(dá)并尋找目的地美食的大眾用戶(上班族休息日,大學(xué)生,個(gè)人或一起),要求在地鐵站附近便能方便享受目的地美食。且對(duì)美食有一定熱愛程度。
 
(三)用戶測(cè)試
邀請(qǐng)真實(shí)用戶進(jìn)行產(chǎn)品試用,觀察他們的操作行為,收集反饋意見,為后續(xù)的設(shè)計(jì)提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的,并不是面對(duì)面交流傳遞的,并且還會(huì)遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產(chǎn)品等同事進(jìn)行面對(duì)面的交流和溝通。
詳細(xì)了解測(cè)試目的和關(guān)鍵點(diǎn),確定用戶配比。
最好是讓交互帶著跑一下整個(gè)程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認(rèn)知,并把相應(yīng)關(guān)鍵點(diǎn)對(duì)應(yīng)上去。同時(shí)把大致的用戶配比情況敲定一下,后續(xù)就可以直接招募用戶了。
了解demo的完成進(jìn)度,相應(yīng)確定具體測(cè)試時(shí)間。
交互、視覺等完成demo的時(shí)間具有太多不確定因素,因此我們需要及時(shí)了解整個(gè)demo的完成進(jìn)度,在盡可能快的情況下保險(xiǎn)安排測(cè)試時(shí)間,如果邀請(qǐng)的是外部用戶,結(jié)果用戶到了而demo還沒出來,那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己。在完成測(cè)試方案撰寫的過程中demo還未誕生,具體程序細(xì)節(jié)記憶又很模糊,不好寫測(cè)試方案,怎么辦?不要慌,去看交互稿吧。
及時(shí)溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時(shí)候還不是很理解某個(gè)具體操作過程,或者自己對(duì)產(chǎn)品有疑問的也可以跟交互等溝通,因?yàn)樽约簳?huì)遇到的問題,很有可能在測(cè)試用用戶也會(huì)遇到,這樣子用戶如果問到了,就可以相應(yīng)作出解釋。
核實(shí)確定方案。完成方案后,可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認(rèn)一下,是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個(gè)大多數(shù)人都頭疼的一個(gè)過程,希望看完了以下幾點(diǎn),可以稍微緩解一下大家的癥狀。再次確定測(cè)試時(shí)間。
方案定下來后,再跟交互確認(rèn)測(cè)試時(shí)間,了解是否有變動(dòng)和調(diào)整,盡量避免用戶來了demo或者測(cè)試環(huán)境還不ok的情況。
 
撰寫招募文案。需要把用戶要求、測(cè)試日期和地點(diǎn)、報(bào)酬、大致的測(cè)試時(shí)長(zhǎng)、用戶需要在測(cè)試中做什么,以及報(bào)名方式等表達(dá)清楚。有以下幾點(diǎn)可以注意一下,方便我們自己招募:
  • 詳細(xì)列出測(cè)試安排的時(shí)間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時(shí)間段,這樣就不用事后再協(xié)調(diào)不同用戶測(cè)試時(shí)間了;
  • 優(yōu)先人力、信息管理、行政等崗位同事。盡量避免相關(guān)產(chǎn)品人員、設(shè)計(jì)崗等同事。
  • 制作簡(jiǎn)單的招募海報(bào),并檢查??梢允孪葘?ldquo;海報(bào)”用word或者ppt做好,然后保存成圖片格式,記得檢查核實(shí)一下是否有錯(cuò)。因?yàn)樵诠綢M群上直接黏貼確實(shí)方便,但是其排版往往不利于閱讀,導(dǎo)致用戶會(huì)遺漏重要信息。而制作成圖片格式,可以更好地去避免這個(gè)問題,同時(shí)還可以顯得整個(gè)招募過程比較正式,突出了對(duì)用戶的尊重,也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報(bào)。內(nèi)部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時(shí)未嘗試,公司論壇應(yīng)該也可以,不過隱約感覺效率會(huì)比較低。外部用戶可以在朋友圈試試,效果還不錯(cuò),大家都很熱情幫忙轉(zhuǎn)發(fā),群眾的力量大無窮。也可以相應(yīng)去搜索一些QQ群,加入并發(fā)布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對(duì)具體招募情況,大家就盡情發(fā)揮吧~
 
用戶多了留到下次用。海報(bào)發(fā)出去后,有時(shí)也會(huì)出乎意料用戶數(shù)量超過預(yù)期了,這是好事,不要擔(dān)心,也不要急著拒絕,平和的跟對(duì)方說明情況,強(qiáng)調(diào)下次還會(huì)有測(cè)試,把用戶相應(yīng)信息了解一下做個(gè)記錄,下次招募的時(shí)候可以直接先聯(lián)系這幾名用戶。當(dāng)然前提是你真的有下次測(cè)試需求,如果沒有那還是老老實(shí)實(shí)說明情況。
 
確保自己和用戶能彼此聯(lián)系上。跟用戶強(qiáng)調(diào)測(cè)試時(shí)間和地點(diǎn),尤其是外部用戶,如果招募和正式測(cè)試隔了幾天,最好在測(cè)試前一天再通知一下。給出自己的聯(lián)系電話,同時(shí)詢問用戶的聯(lián)系電話。
 
第一個(gè)用戶盡量安排公司內(nèi)部同事。很多時(shí)候demo的完成情況會(huì)出現(xiàn)意外,到了測(cè)試時(shí)間demo還不能用,內(nèi)部用戶可以方便取消或者更換。另外,在第一次測(cè)試前誰都不確定用戶會(huì)有什么反應(yīng),第一個(gè)測(cè)試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
4、測(cè)試準(zhǔn)備
 
材料準(zhǔn)備。需要準(zhǔn)備的內(nèi)容有:量表、報(bào)酬簽收表、記錄筆記本、錄音筆、會(huì)議室借用,以及記錄表格,如果是外部用戶過來,相應(yīng)準(zhǔn)備一杯水,人家大老遠(yuǎn)過來也不容易。
 
測(cè)試內(nèi)容準(zhǔn)備。其實(shí)每次訪談?dòng)脩糇约憾紩?huì)挺緊張的,不知道用戶是不是也很緊張(PS:好想當(dāng)一回用戶,體驗(yàn)一下被訪的感覺)。為了消除這種緊張,同時(shí)也是為了更好的完成訪談,可以有嘗試以下幾點(diǎn):
  • 盡可能多的去了解所需測(cè)試的產(chǎn)品。有時(shí)候demo出來的晚,下午要測(cè)試,demo中午才出來,自己都沒玩過,測(cè)試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實(shí)際操作來的真實(shí),但是也能有不小幫助,但也要給自己留足熟悉demo的時(shí)間。
  • 按照模塊來列提綱。其實(shí)相當(dāng)于組塊策略,把同一個(gè)模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點(diǎn)。但模塊不要太大,如果太大了就相應(yīng)拆分一下。例如,在考拉新版測(cè)試的時(shí)候,有“首頁”、“活動(dòng)”、“購物車”等測(cè)試,但是光是首頁內(nèi)容也很多,作為一個(gè)模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個(gè)方面來整理提綱。
  • 根據(jù)任務(wù)演練提綱。有了提綱后,按照任務(wù)大致過一下所有列出來的問題,這個(gè)過程會(huì)打亂按照模塊列好的提綱,有一次這樣的排練,在測(cè)試的時(shí)候更不容易漏掉題目,而且也相當(dāng)于模擬了一下測(cè)試,自己心里會(huì)更踏實(shí)一點(diǎn),在實(shí)際測(cè)試過程中也能有更好的應(yīng)對(duì)。
 
相關(guān)人員通知。通知交互和產(chǎn)品的同事具體測(cè)試時(shí)間和地點(diǎn),邀請(qǐng)他們一起參與。不建議交互和產(chǎn)品只是后期測(cè)試查閱報(bào)告,如果他們參與到測(cè)試中,能更近距離和用戶接觸,并能更加深刻感受到產(chǎn)品存在的問題,也能更好的推動(dòng)產(chǎn)品的改進(jìn)。
5、正式測(cè)試
主持人需要注意的點(diǎn):
  • 劃分我們和產(chǎn)品的關(guān)系。在測(cè)試之前跟用戶說明清楚,我們并不是產(chǎn)品的設(shè)計(jì)者和開發(fā)者,我們只是受產(chǎn)品方委托來進(jìn)行測(cè)試,以免用戶不好意思當(dāng)面如實(shí)評(píng)價(jià)產(chǎn)品。
  • 強(qiáng)調(diào)測(cè)試的是產(chǎn)品,而不是用戶。要跟用戶說明產(chǎn)品尚處于不完善階段,因此邀請(qǐng)用戶過來進(jìn)行測(cè)試,幫助發(fā)現(xiàn)問題和改進(jìn)產(chǎn)品設(shè)計(jì),但請(qǐng)注意不是為了評(píng)價(jià)產(chǎn)品。
  • 注意訪談技巧。這個(gè)就不用多說了。
  • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進(jìn)一步去追問,用戶為什么會(huì)這么說或這么問,例如,很多時(shí)候在測(cè)試中會(huì)碰到用戶說“哦,原來這個(gè)按鈕是xx功能,我還以為是xx功能“,這個(gè)時(shí)候可以再推進(jìn)一步,了解用戶為什么會(huì)這么認(rèn)為。
  • 給其他在場(chǎng)的同時(shí)發(fā)言的機(jī)會(huì)。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產(chǎn)品等同事,了解他們是否還有問題需要補(bǔ)充。
  • 記得量表評(píng)分和報(bào)酬簽收。長(zhǎng)時(shí)間的測(cè)試和訪談后容易忘記量表評(píng)分和報(bào)酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個(gè)招呼,幫忙提醒自己。
 
記錄人員需要注意的點(diǎn):
  • 仔細(xì)觀察用戶行為并記錄。記錄不僅僅是用戶的觀點(diǎn)、想法等,更重要的是記錄用戶的實(shí)際行為。
  • 按照模塊記錄。記錄者可以按照測(cè)試方案中的模塊來相應(yīng)記錄用戶的行為和言語表述。
  • 查漏補(bǔ)缺。主持人可能會(huì)遺漏一些點(diǎn),記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內(nèi)容需要補(bǔ)充。
 
6、測(cè)試結(jié)束歡送用戶。對(duì)用戶表示感謝,并開門送一下用戶,對(duì)于外部用戶,最好能送到大樓外面可以看見出口的地方。
測(cè)試后及時(shí)討論。這個(gè)是重點(diǎn)!
在每一名用戶測(cè)試后及時(shí)和交互、產(chǎn)品等同事快速過一下主要發(fā)現(xiàn)的問題點(diǎn),這樣做有以下優(yōu)點(diǎn):
  • 有效達(dá)成共識(shí),確定解決方案。剛訪談結(jié)束印象最深刻,因此能快速有效達(dá)成對(duì)主要問題的共識(shí),并討論確定相應(yīng)的解決方案。
  • 體現(xiàn)敏捷優(yōu)勢(shì)。確定了一些比較嚴(yán)重的問題后,交互和產(chǎn)品的同事就可以相應(yīng)去改進(jìn)產(chǎn)品設(shè)計(jì),做到了邊測(cè)邊改,加快迭代速度。
  • 幫助優(yōu)化訪談提綱,和測(cè)試用戶安排。有些問題在事先撰寫方案的時(shí)候可能沒涉及到,在討論后可以補(bǔ)充進(jìn)去,而有些問題確定后則不需要再測(cè)。另外,也可以通過討論對(duì)事先安排的測(cè)試用戶進(jìn)行相應(yīng)調(diào)整,例如增刪用戶,或者調(diào)整新老用戶測(cè)試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關(guān)鍵問題,并且,交互和產(chǎn)品的同事也相應(yīng)清楚了,因此在最后可以快速形成報(bào)告。
再次感謝用戶。所有用戶測(cè)試結(jié)束后,可以花幾分鐘時(shí)間簡(jiǎn)單感謝一下用戶。
 
7、報(bào)告撰寫
針對(duì)不同大小項(xiàng)目的用戶測(cè)試,在完成報(bào)告撰寫過程中有兩種具體方式:
  • 小測(cè)試項(xiàng)目簡(jiǎn)單快速撰寫報(bào)告。對(duì)于那些1-2天的小測(cè)試項(xiàng)目,由于在每次測(cè)試后都有討論,已對(duì)主要問題達(dá)成共識(shí),因此在報(bào)告撰寫的時(shí)候就可以快速地將主要的問題和風(fēng)險(xiǎn)點(diǎn)呈現(xiàn)出來。
  • 大測(cè)試項(xiàng)目每天總結(jié)并反饋主要問題。大的測(cè)試項(xiàng)目持續(xù)時(shí)間比較久,針對(duì)每天的測(cè)試及討論,簡(jiǎn)單總結(jié)一下主要發(fā)現(xiàn)的問題,并反饋給相關(guān)人員,如果到了最后再總結(jié),容易遺忘掉一些內(nèi)容,并且這樣子也方便自己最后撰寫報(bào)告。
 
四、構(gòu)建信息架構(gòu)
思考信息架構(gòu)有三個(gè)核心關(guān)鍵詞:用戶角色、產(chǎn)品價(jià)值、使用場(chǎng)景。
1、明確用戶角色
用戶角色清晰揭示用戶目標(biāo),幫助我們把握關(guān)鍵需求、關(guān)鍵任務(wù)、關(guān)鍵流程,看到產(chǎn)品哪些是主要的事,哪些是次要的事。我們應(yīng)該盡可能豐富、形象化我們的用戶角色,讓它在設(shè)計(jì)決策過程中發(fā)揮作用,設(shè)計(jì)出更符合用戶場(chǎng)景的產(chǎn)品。
2、了解產(chǎn)品的目標(biāo)價(jià)值
作為產(chǎn)品的設(shè)計(jì)師一定要理解產(chǎn)品的價(jià)值,知道用戶想要什么,把最重要的優(yōu)先級(jí)提到最高,盡量移除無關(guān)緊要的信息,或降低其他優(yōu)先級(jí)的權(quán)重,以免對(duì)用戶造成干擾。
3、提煉產(chǎn)品的使用場(chǎng)景
要了解產(chǎn)品的業(yè)務(wù)流程,比如目標(biāo)用戶是誰、什么場(chǎng)景、如何使用,要把產(chǎn)品業(yè)務(wù)流程上的節(jié)點(diǎn)一個(gè)一個(gè)梳理出來,還要考慮這個(gè)產(chǎn)品對(duì)用戶的價(jià)值是什么,不要僅僅考慮界面的元素規(guī)范、設(shè)計(jì)細(xì)節(jié)等等,要知道產(chǎn)品的目標(biāo)價(jià)值體系。
4、信息架構(gòu)優(yōu)先級(jí)
基于三個(gè)核心點(diǎn)(用戶角色、產(chǎn)品價(jià)值、使用場(chǎng)景)分析,把目標(biāo)用戶人群核心價(jià)值的功能點(diǎn)業(yè)務(wù)流程梳理出來,分清主次關(guān)系,切忌功能堆砌,具體方法可以把所有功能業(yè)務(wù)邏輯的主線列出來,然后根據(jù)業(yè)務(wù)的優(yōu)先級(jí)做評(píng)級(jí),分清楚這些功能哪些是主要的,哪些是次要的,然后通過數(shù)字做排序,這樣我們就知道哪些功能設(shè)計(jì)需要明顯,哪些功能設(shè)計(jì)需要低調(diào)。
5、信息歸類及整合
從整體上思考信息類產(chǎn)品的分類及整合,比如用戶資料相關(guān)的產(chǎn)品會(huì)有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關(guān)的信息都?xì)w在同一個(gè)分類菜單下,不要讓他們分散在各個(gè)頁面中。也就是所謂的一級(jí)菜單、二級(jí)產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復(fù)雜度的提升,要隨時(shí)關(guān)注信息架構(gòu)是否滿足當(dāng)前的產(chǎn)品框架,不要等需要時(shí)候再去孤注一擲的全盤優(yōu)化,這樣會(huì)讓項(xiàng)目陷入被動(dòng)的局面,可以逐漸增強(qiáng),循序漸進(jìn)的優(yōu)化,從小的細(xì)節(jié)對(duì)信息架構(gòu)進(jìn)行調(diào)整,提升產(chǎn)品的易用性。
 
六、進(jìn)行原型測(cè)試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設(shè)計(jì)方案。
 
(二)內(nèi)部測(cè)試
團(tuán)隊(duì)內(nèi)部進(jìn)行初步測(cè)試,檢查功能的完整性和流程的合理性。
 
(三)用戶測(cè)試
邀請(qǐng)外部用戶進(jìn)行測(cè)試,收集他們的意見和建議,發(fā)現(xiàn)潛在的問題和改進(jìn)空間。
 
七、持續(xù)優(yōu)化
 
(一)數(shù)據(jù)分析
通過收集和分析用戶的使用數(shù)據(jù),了解用戶的行為路徑和偏好,為優(yōu)化提供數(shù)據(jù)支持。
 
(二)用戶反饋處理
及時(shí)響應(yīng)用戶的反饋,將有價(jià)值的建議融入到后續(xù)的優(yōu)化工作中。
 
(三)迭代更新
根據(jù)數(shù)據(jù)分析和用戶反饋,不斷對(duì)交互設(shè)計(jì)進(jìn)行迭代更新,以適應(yīng)市場(chǎng)和用戶需求的變化。
 
八、結(jié)論
 
從產(chǎn)品角度發(fā)起交互設(shè)計(jì)是一個(gè)綜合性的過程,需要充分考慮產(chǎn)品目標(biāo)、用戶需求、信息架構(gòu)、流程界面、測(cè)試優(yōu)化等多個(gè)方面。只有以用戶為中心,不斷追求卓越的用戶體驗(yàn),才能打造出具有競(jìng)爭(zhēng)力的產(chǎn)品,在激烈的市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。
 
在未來的產(chǎn)品開發(fā)中,隨著技術(shù)的不斷進(jìn)步和用戶需求的不斷變化,交互設(shè)計(jì)也將面臨新的挑戰(zhàn)和機(jī)遇。產(chǎn)品團(tuán)隊(duì)?wèi)?yīng)保持敏銳的洞察力和創(chuàng)新精神,持續(xù)探索和優(yōu)化交互設(shè)計(jì),為用戶創(chuàng)造更多的價(jià)值。
 


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

用戶體驗(yàn)一致性思考

天宇 交互設(shè)計(jì)及用戶體驗(yàn)

前言
在團(tuán)隊(duì)內(nèi)部,我們已確立了一套設(shè)計(jì)規(guī)范,在日常項(xiàng)目中使用設(shè)計(jì)規(guī)范輸出變的高效、統(tǒng)一。然而,在實(shí)際操作中,不可避免地會(huì)遇到一些特殊情況:某些客戶提出的個(gè)性化需求并不完全契合既定的設(shè)計(jì)規(guī)范,這些促使我們不得不在保持設(shè)計(jì)一致性的基礎(chǔ)上進(jìn)行靈活調(diào)整。因此,深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅(jiān)守設(shè)計(jì)規(guī)范核心精神的同時(shí),靈活應(yīng)對(duì)多變的需求,確保設(shè)計(jì)既保持統(tǒng)一和諧,又能滿足特定場(chǎng)景下的獨(dú)特需求,從而實(shí)現(xiàn)用戶體驗(yàn)與品牌價(jià)值的雙重提升。
 
用戶體驗(yàn)一致性思考
 
 
用戶體驗(yàn)一致性思考
 
 
在UI/UX設(shè)計(jì)中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強(qiáng)調(diào)在界面和交互設(shè)計(jì)上需要遵循既定的規(guī)則,無論是在應(yīng)用內(nèi)部還是跨平臺(tái)之間。
背后的心理學(xué)原理——重復(fù)定律,強(qiáng)調(diào)了信息重復(fù)對(duì)于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動(dòng)實(shí)踐,通過不斷重復(fù)統(tǒng)一的設(shè)計(jì)元素與模式,強(qiáng)化用戶對(duì)產(chǎn)品的認(rèn)知與記憶,從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗(yàn)一致性思考
 
 
用戶側(cè)
1、用戶學(xué)習(xí)曲線:
一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí),他們可以快速理解并準(zhǔn)確預(yù)測(cè)如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
2、提升可用性:
一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí),他們可以輕松地將已有的知識(shí)和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù),減少錯(cuò)誤和迷失,提供更好的導(dǎo)航和流暢的體驗(yàn)。
3、品牌認(rèn)可度:
一致的UI/UX設(shè)計(jì)有助于樹立品牌形象和增強(qiáng)品牌認(rèn)可度。通過在不同的渠道和平臺(tái)上保持一致的設(shè)計(jì)元素、標(biāo)識(shí)和視覺風(fēng)格,品牌可以建立起獨(dú)特而可識(shí)別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
4、用戶滿意度:
一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí),他們會(huì)感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號(hào),讓用戶感到被關(guān)注和重視。這種積極的用戶體驗(yàn)有助于提升用戶滿意度,并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
用戶體驗(yàn)一致性思考
 
 
產(chǎn)研側(cè)
1. 降低設(shè)計(jì)成本,提高開發(fā)效率
無論是設(shè)計(jì)還是開發(fā),復(fù)用已有的組件資源,保持界面的一致性可以有效地減少設(shè)計(jì)的投入,避免不必要的設(shè)計(jì)分歧點(diǎn)。
而在開發(fā)階段,可以避免重復(fù)造輪子,提高開發(fā)的效率,保證落地效果,也可以減少上線前設(shè)計(jì)走查、測(cè)試的工作量。
2. 形成一致的設(shè)計(jì)風(fēng)格
根據(jù)原子設(shè)計(jì)理論,通過原子組件的一致性,可以構(gòu)建出統(tǒng)一的界面框架、布局,形成統(tǒng)一風(fēng)格和用戶交互認(rèn)知,從而更好地保證用戶體驗(yàn)質(zhì)量。
 
用戶體驗(yàn)一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復(fù)雜現(xiàn)象,其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長(zhǎng)被反射或吸收后,所引發(fā)的視覺感知結(jié)果。在設(shè)計(jì)領(lǐng)域,色彩的選擇與運(yùn)用不僅是視覺藝術(shù)的展現(xiàn),更是品牌身份與個(gè)性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團(tuán)鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構(gòu)成了品牌識(shí)別系統(tǒng)的重要組成部分,還通過其高度的一致性,在視覺層面上構(gòu)建起強(qiáng)烈的品牌認(rèn)知,營(yíng)造出統(tǒng)一和諧的視覺體驗(yàn)。
色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用,它能夠有效增強(qiáng)品牌的記憶度與辨識(shí)度,深化品牌形象在消費(fèi)者心中的烙印,進(jìn)而提升產(chǎn)品的市場(chǎng)吸引力和用戶忠誠度。同時(shí),這種策略還促進(jìn)了設(shè)計(jì)元素間的和諧共存,包括按鈕、圖標(biāo)、字體、標(biāo)簽、背景、以及關(guān)鍵視覺元素如Banner等,均能在統(tǒng)一的色彩體系下實(shí)現(xiàn)視覺上的連貫與流暢,極大地提升了產(chǎn)品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗(yàn)。
 
用戶體驗(yàn)一致性思考
 
 
字體
字體作為設(shè)計(jì)中不可或缺的核心要素,其獨(dú)特性在于能夠精準(zhǔn)地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細(xì)、字間距等多維度特征。這些特征共同構(gòu)建了一種獨(dú)特的文字風(fēng)格,不僅承載著信息的傳遞功能,更在無形中引導(dǎo)著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設(shè)計(jì)過程中,合理選擇與應(yīng)用字體顯得尤為關(guān)鍵。
 
字體類型的多樣性,如有襯線字體與無襯線字體的對(duì)比,不僅體現(xiàn)了風(fēng)格上的差異,還隱含了不同的閱讀體驗(yàn)與情感表達(dá)。字體的粗細(xì)變化(如細(xì)體、常規(guī)、粗體等)更是能夠強(qiáng)調(diào)文本的重要性層級(jí),增強(qiáng)信息的層次感與可讀性。此外,字重的調(diào)整也是塑造視覺焦點(diǎn)、引導(dǎo)視線流動(dòng)的有效手段,對(duì)于提升設(shè)計(jì)的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。
 
然而,在實(shí)際的開發(fā)與實(shí)現(xiàn)過程中,若不加節(jié)制地使用多種字體,不僅會(huì)顯著增加頁面的加載時(shí)間,影響用戶體驗(yàn)的流暢性,還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章,破壞整體設(shè)計(jì)的和諧感。因此,制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率,減少后期更新迭代的復(fù)雜度,還能有效避免資源浪費(fèi),確保設(shè)計(jì)作品在視覺上的一致性與專業(yè)性。
 
用戶體驗(yàn)一致性思考
 
 
圖標(biāo)
 
圖標(biāo)作為用戶界面設(shè)計(jì)中至關(guān)重要的元素,風(fēng)格直接影響到用戶的使用體驗(yàn)與對(duì)產(chǎn)品的整體印象。圖標(biāo)以其簡(jiǎn)潔、直觀且富有表現(xiàn)力的特點(diǎn),在快速傳達(dá)信息、引導(dǎo)用戶操作方面發(fā)揮著不可替代的作用。在設(shè)計(jì)中,圖標(biāo)的設(shè)計(jì)與應(yīng)用更是需要精心考量,以確保其既能夠準(zhǔn)確傳達(dá)信息,又能夠與整體設(shè)計(jì)風(fēng)格保持一致,從而營(yíng)造出專業(yè)、和諧且易于使用的界面環(huán)境。
 
設(shè)計(jì)中視覺上保持統(tǒng)一包括圖標(biāo)的大小、形狀、色彩以及設(shè)計(jì)風(fēng)格等多個(gè)方面,能夠增強(qiáng)用戶的認(rèn)知連貫性,降低學(xué)習(xí)成本,提升使用效率。相反,如果圖標(biāo)風(fēng)格混雜,不僅會(huì)讓界面顯得雜亂無章,還會(huì)給用戶帶來困惑和不安,進(jìn)而影響其對(duì)產(chǎn)品專業(yè)性和安全性的信任。
用戶體驗(yàn)一致性思考
 
 
按鈕
按鈕設(shè)計(jì)應(yīng)統(tǒng)一于項(xiàng)目風(fēng)格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性,還能增強(qiáng)用戶信任,確保體驗(yàn)連貫。過多變化的按鈕樣式會(huì)擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此,精心設(shè)計(jì)的統(tǒng)一按鈕樣式對(duì)提升用戶體驗(yàn)至關(guān)重要。
 
排版
設(shè)計(jì)中的排版一致性對(duì)于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu),大幅降低學(xué)習(xí)成本,還能在用戶心中激發(fā)強(qiáng)烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀,用戶能夠自然地依照既定的視覺動(dòng)線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設(shè)計(jì)過程中,注重并維護(hù)排版的一致性,是提升用戶體驗(yàn)和界面有效性的重要策略之一。
 
 
用戶體驗(yàn)一致性思考
 
 
 
操作流程的一致性
標(biāo)準(zhǔn)化流程:確保用戶在執(zhí)行相似任務(wù)時(shí),如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。
邏輯清晰:操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯,避免讓用戶感到困惑或不知所措。
用戶體驗(yàn)一致性思考
 
 
交互元素的一致性
按鈕和控件:確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個(gè)應(yīng)用或網(wǎng)站中保持一致。例如,所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機(jī)制。
導(dǎo)航和菜單:導(dǎo)航欄和菜單的設(shè)計(jì)也應(yīng)保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗(yàn)一致性思考
 
 
反饋機(jī)制的一致性
操作反饋:當(dāng)用戶執(zhí)行某個(gè)操作時(shí),應(yīng)用或網(wǎng)站應(yīng)提供一致且及時(shí)的反饋,如加載動(dòng)畫、成功提示或錯(cuò)誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動(dòng)。
狀態(tài)提示:對(duì)于長(zhǎng)時(shí)間運(yùn)行的操作或需要用戶等待的場(chǎng)景,應(yīng)提供明確的狀態(tài)提示(如進(jìn)度條),以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上,一致性不應(yīng)成為設(shè)計(jì)的唯一導(dǎo)向。設(shè)計(jì),這一融合了藝術(shù)與科學(xué)的復(fù)雜領(lǐng)域,要求我們?cè)谟脩趔w驗(yàn)的細(xì)膩雕琢、功能需求的精準(zhǔn)滿足、美學(xué)價(jià)值的深刻體現(xiàn)及技術(shù)可行性的嚴(yán)格考量間游走。
 
“一致性”作為設(shè)計(jì)策略,其核心使命在于優(yōu)化用戶路徑,降低認(rèn)知門檻,確保用戶在多元界面中穿梭時(shí)仍能感受到連貫與和諧。當(dāng)我們?cè)谂c設(shè)計(jì)團(tuán)隊(duì)(包括工程師、產(chǎn)品經(jīng)理等)溝通時(shí),僅僅提及“一致性”可能并不足以說明其必要性和價(jià)值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時(shí),我們應(yīng)清醒認(rèn)識(shí)到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗(yàn)或解決特定的設(shè)計(jì)問題,可能需要打破傳統(tǒng)的一致性規(guī)則。因此,設(shè)計(jì)師需要在保持一致性和創(chuàng)新之間找到平衡點(diǎn),根據(jù)具體情況靈活調(diào)整設(shè)計(jì)方案。
 
實(shí)際落地執(zhí)行時(shí),要根據(jù)產(chǎn)品定位、用戶場(chǎng)景,結(jié)合業(yè)務(wù)功能來確定設(shè)計(jì)方案,不能為了一致而一致。
當(dāng)我們遇到一致性問題時(shí),還是需要從以下3個(gè)方面深入思考,做出準(zhǔn)確合理的設(shè)計(jì)決策。
用戶體驗(yàn)一致性思考
 
 
真實(shí)項(xiàng)目
真實(shí)項(xiàng)目
 
在SaaS產(chǎn)品設(shè)計(jì)中,特別是面向B/G端(企業(yè)用戶)時(shí),滿足不同用戶角色(如普通用戶與高權(quán)限領(lǐng)導(dǎo))的需求是至關(guān)重要的。
管理端布局設(shè)計(jì)
普通簡(jiǎn)潔明了:為普通用戶設(shè)計(jì)的管理界面應(yīng)簡(jiǎn)潔直觀,聚焦于日常操作,如數(shù)據(jù)查看、統(tǒng)計(jì)和下載。
功能分區(qū):通過清晰的導(dǎo)航欄或側(cè)邊欄將功能區(qū)域劃分開,如“數(shù)據(jù)概覽”、“報(bào)表下載”、“任務(wù)管理”等,便于用戶快速定位所需功能。
操作便捷:確保常用操作(如搜索、篩選、排序)易于觸達(dá),減少用戶點(diǎn)擊次數(shù)和頁面跳轉(zhuǎn)。
 
首頁版心定寬設(shè)計(jì)
固定寬度:為首頁設(shè)定一個(gè)合適的固定寬度(如1200px、1440px等),以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗(yàn)。
信息模塊化:將首頁內(nèi)容劃分為多個(gè)卡片,每個(gè)卡片承載一個(gè)獨(dú)立的信息單元(如數(shù)據(jù)報(bào)表、通知公告、項(xiàng)目進(jìn)展等)。
視覺層次:通過顏色、大小、陰影等設(shè)計(jì)元素區(qū)分卡片的重要性,引導(dǎo)用戶視線,提高信息獲取效率。
交互性:為卡片添加交互元素,如點(diǎn)擊展開、滑動(dòng)查看更多等,增加用戶參與度和頁面活躍度。
 
用戶體驗(yàn)一致性思考
 
 
位置差異性分析
根據(jù)「認(rèn)知負(fù)荷>視覺負(fù)荷>動(dòng)作負(fù)荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
相對(duì)于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應(yīng)該緊隨搜索條件,便于用戶快速發(fā)現(xiàn)按鈕。
區(qū)域用戶已經(jīng)形成下意識(shí)操作習(xí)慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求
用戶體驗(yàn)一致性思考
 
 
一致性是規(guī)則
“一致性”作為規(guī)則或手段,服務(wù)于提升用戶體驗(yàn)的原則。規(guī)則與原則一致時(shí),促進(jìn)業(yè)務(wù)共識(shí)與用戶價(jià)值;沖突時(shí),原則優(yōu)先。用戶體驗(yàn)原則指導(dǎo)下的一致性,要超越表面控件統(tǒng)一,更在于產(chǎn)品決策與價(jià)值取向的一致。必要時(shí),為更好的用戶體驗(yàn),可在規(guī)則上讓步以實(shí)現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡,確保用戶便利足以彌補(bǔ)理解成本,需長(zhǎng)期全局考量。規(guī)則非僵化教條,而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。
 
一致性的底線
無論從哪個(gè)角度,一致性存在的必要性都是毋庸置疑的。
對(duì)于關(guān)鍵的設(shè)計(jì)元素,如專有名詞和顏色體系,保持一致性至關(guān)重要。這不僅有助于維護(hù)品牌形象,還能減少用戶的困惑。
特定設(shè)計(jì)語言在特定場(chǎng)景下的變體應(yīng)用,雖然可能帶來一定的視覺新鮮感或針對(duì)性優(yōu)化,但往往需要謹(jǐn)慎評(píng)估其潛在風(fēng)險(xiǎn)。一旦變體打破了整體設(shè)計(jì)的一致性,可能會(huì)破壞用戶對(duì)品牌的熟悉感和信任感,甚至引發(fā)誤解。因此,在追求設(shè)計(jì)創(chuàng)新的同時(shí),必須確保這種創(chuàng)新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗(yàn)。
 
擁抱復(fù)雜性
一致性確實(shí)不應(yīng)成為設(shè)計(jì)師的避風(fēng)港或限制創(chuàng)新的枷鎖,而應(yīng)是基于對(duì)業(yè)務(wù)深刻理解和多樣化設(shè)計(jì)能力之上的價(jià)值選擇。設(shè)計(jì)師的核心任務(wù)始終是滿足用戶的多樣化需求和偏好,這需要他們細(xì)致入微地觀察、理解并解決每個(gè)用戶的獨(dú)特問題。
 
在追求一致性的同時(shí),設(shè)計(jì)師應(yīng)保持“第一性思考”的能力,即回歸問題的本質(zhì),從用戶需求出發(fā)進(jìn)行創(chuàng)新設(shè)計(jì)。多樣性頁面的產(chǎn)出,不僅體現(xiàn)了設(shè)計(jì)師的創(chuàng)造力和靈活性,也是提升用戶體驗(yàn)、增強(qiáng)產(chǎn)品吸引力的關(guān)鍵。
 
一致性與創(chuàng)新設(shè)計(jì)并非相互排斥,而是相輔相成的關(guān)系。真正的一致性不應(yīng)導(dǎo)致單調(diào)或拒絕創(chuàng)新,而應(yīng)是在遵循品牌或產(chǎn)品核心價(jià)值的前提下,鼓勵(lì)設(shè)計(jì)師在細(xì)節(jié)和體驗(yàn)上不斷探索和突破。當(dāng)設(shè)計(jì)師感到被既定規(guī)則束縛時(shí),應(yīng)勇于質(zhì)疑并重新評(píng)估當(dāng)前的規(guī)范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發(fā)展的價(jià)值導(dǎo)向。
 
因此,設(shè)計(jì)師應(yīng)時(shí)刻保持開放的心態(tài)和敏銳的洞察力,不斷探索和嘗試新的設(shè)計(jì)方法和理念,以更加靈活和創(chuàng)新的方式實(shí)現(xiàn)一致性與用戶需求的完美融合。
 
用戶體驗(yàn)一致性思考
 
 
重要的設(shè)計(jì)原則
「一致性」作為設(shè)計(jì)領(lǐng)域中的一項(xiàng)基礎(chǔ)性原則,其重要性不言而喻。它不僅為設(shè)計(jì)過程提供了穩(wěn)固的基石,還顯著促進(jìn)了開發(fā)效率與產(chǎn)品體驗(yàn)的全面升級(jí)。在設(shè)計(jì)實(shí)踐中,一致性確保了界面元素的統(tǒng)一性和連貫性,使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式,降低了學(xué)習(xí)成本,增強(qiáng)了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強(qiáng)制規(guī)定,而是需要根據(jù)產(chǎn)品的具體定位和市場(chǎng)環(huán)境進(jìn)行靈活變通的應(yīng)用。不同的產(chǎn)品可能面向不同的用戶群體,擁有獨(dú)特的品牌調(diào)性和功能需求,因此在追求一致性的同時(shí),也需充分考慮這些因素,確保設(shè)計(jì)既符合品牌特色,又能滿足用戶的實(shí)際需求。
 
提升用戶體驗(yàn)是價(jià)值所在
一致性的真正價(jià)值在于其能夠顯著提升用戶體驗(yàn)。通過遵循用戶的認(rèn)知和習(xí)慣,設(shè)計(jì)師能夠創(chuàng)造出更加自然、流暢的操作流程,使用戶在享受產(chǎn)品功能的同時(shí),也能感受到品牌所傳遞的舒適與和諧。因此,在追求設(shè)計(jì)一致性的過程中,我們始終應(yīng)以人為本,將用戶的體驗(yàn)和感受放在首位。建設(shè)有兼容性和長(zhǎng)期價(jià)值的的一致性框架,在一致性中做到有用戶價(jià)值的設(shè)計(jì),是設(shè)計(jì)師應(yīng)該不斷探索的命題。

作者:cheny米魚
鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔