首頁

設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)

天宇 設(shè)計思維

在設(shè)計實踐的廣闊天地里,設(shè)計師們常面臨一個核心挑戰(zhàn):如何在領(lǐng)導(dǎo)與產(chǎn)品經(jīng)理缺乏設(shè)計敏感度的環(huán)境中,持續(xù)產(chǎn)出高質(zhì)量作品,并確立設(shè)計評價的統(tǒng)一標(biāo)準(zhǔn)。本文通過分析具體案例,探討視覺設(shè)計的構(gòu)成要素與評估原則,旨在為設(shè)計師指明成長路徑,促進(jìn)專業(yè)技能的精進(jìn)。
 
設(shè)計品質(zhì)的界定與追求
  1. 獎項榮譽的光環(huán):例如,無印良品憑借一組榮獲日本平面設(shè)計最高獎項——龜倉雄策獎的海報,展示了設(shè)計的卓越。該獎項被譽為設(shè)計界的“奧斯卡終身成就獎”,海報以簡練的色彩和幾何形狀,藝術(shù)化地再現(xiàn)了人與自然的和諧,特別之處在于全部采用廢紙板制作,既創(chuàng)新又環(huán)保,與品牌理念緊密相連,實現(xiàn)了藝術(shù)與商業(yè)的雙贏。
  2. 國際設(shè)計獎項的權(quán)威:德國紅點設(shè)計獎,作為全球設(shè)計領(lǐng)域的風(fēng)向標(biāo),激發(fā)了全球設(shè)計師的熱情。像徠卡相機,不僅是高端攝影的代名詞,其設(shè)計也屢獲殊榮,融合了創(chuàng)新與傳統(tǒng),成為設(shè)計與商業(yè)并重的典范。自2015年推出的Apple Watch,亦憑借不斷的創(chuàng)新設(shè)計,摘得了眾多設(shè)計桂冠,證明了設(shè)計在推動產(chǎn)品革新和市場接納中的關(guān)鍵作用。
  3. 設(shè)計公司的國際舞臺:提及韓國設(shè)計公司Plusx,其在紅點設(shè)計獎的頻繁亮相,顯示了設(shè)計跨界合作與國際化視野的重要性,為設(shè)計的多元化和國際競爭力提供了范例。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
在評估設(shè)計作品,尤其是商業(yè)設(shè)計的價值時,獲得權(quán)威設(shè)計獎項的認(rèn)可確實是衡量其優(yōu)秀與否的重要標(biāo)準(zhǔn)之一。然而,好設(shè)計的定義遠(yuǎn)不止于此,它還需在實用與美學(xué)間取得完美平衡。
 
深澤直人的傘柄設(shè)計:一個典型的例子是日本設(shè)計大師深澤直人的雨傘設(shè)計,傘柄的微妙凹槽,既自然又貼心地解決了雨天攜帶購物袋的困擾,展現(xiàn)了設(shè)計的創(chuàng)新與人文關(guān)懷。這類設(shè)計以其細(xì)膩洞察和實用價值,贏得了廣泛贊譽。
 
實用性與美感并重:產(chǎn)品的美學(xué)不應(yīng)脫離其實用性而獨立存在。蘋果iMac的設(shè)計就是這一原則的杰出代表。從初代的半透明機身到如今的超薄設(shè)計,每一代產(chǎn)品都展現(xiàn)出極致的工藝美學(xué),即便在沒有品牌標(biāo)識的情況下,其設(shè)計的獨特性也能讓人一眼辨識,這正是精湛工藝與美學(xué)融合的典范。
 
直觀性與普適性:好的設(shè)計應(yīng)當(dāng)易于理解,跨越年齡界限。無印良品的CD播放器設(shè)計便是一個典型,其簡潔直觀的操作界面,即便是老人和孩子也能輕松掌握,體現(xiàn)了設(shè)計的人性化和普及性。
 
設(shè)計哲學(xué)的深度:以微信為例,其設(shè)計理念強調(diào)“克制”與“約束”,從簡潔的開屏界面到不刻意夸大產(chǎn)品價值,專注于核心功能,展現(xiàn)了一種對用戶尊重與誠實的態(tài)度。在眾多APP日益商業(yè)化的背景下,微信多年如一日的堅持,顯得尤為難能可貴。
 
真誠與透明:反觀當(dāng)前某些廣告宣傳,如電商平臺中常見的誤導(dǎo)性促銷信息,如所謂的“第二件0元”實則并未真正減免,這種做法違背了好設(shè)計的真誠原則,損害了消費者的信任。真正的優(yōu)質(zhì)設(shè)計,應(yīng)當(dāng)如同微信一樣,以真實的功能價值贏得用戶,而非依賴虛假營銷。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
設(shè)計,無論是應(yīng)用于APP還是工業(yè)產(chǎn)品,核心在于實用性,滿足用戶需求的同時,也不忘在細(xì)節(jié)處下功夫。正如無印良品的電飯煲,圓潤可愛的外表下,還細(xì)心設(shè)計了放置飯勺的凹槽,這些細(xì)微之處的關(guān)懷,成就了設(shè)計的卓越。優(yōu)秀的設(shè)計作品,即便隨時間流逝,其設(shè)計理念與文化內(nèi)涵仍歷久彌新,成為不朽的經(jīng)典,如博朗和蘋果的早期設(shè)計,至今仍是設(shè)計史上的里程碑。
 
設(shè)計的精髓在于全面性,避免在顯眼處過分雕琢,而忽視了不起眼的角落。正如商場中,若華麗的大堂與臟亂的洗手間形成鮮明對比,顧客的體驗將大打折扣,難以吸引回頭客。因此,卓越設(shè)計的標(biāo)志是對每一個細(xì)節(jié)的精心打磨,確保整體體驗的完美無瑕。
來自瑞典的品牌Freitag,巧妙利用回收卡車車篷制作背包,其獨特的二手質(zhì)感、個性化圖案與顏色,不僅設(shè)計實用,更傳遞出強烈的環(huán)保理念,展示了設(shè)計與可持續(xù)發(fā)展的完美融合。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
1.Good design is innovative
好的設(shè)計是創(chuàng)新的
2.Good design is aesthetic
好的設(shè)計是美的
3.Good design makes a product understandable
好的設(shè)計是易懂的
4.Good design is unobtrusive
好的設(shè)計是克制的
5.Good design is honest
好的設(shè)計是誠實的
6.Good design makes a product useful
好的設(shè)計是實用的
7.Good design is long-lasting
好的設(shè)計是經(jīng)得起歲月的考驗
8.Good design is thorough down to the last
detail
好的設(shè)計是考慮周到并且不放過每個細(xì)節(jié)的
9.Good design is environmentally friendly
好的設(shè)計是環(huán)保的
10.Good design is as little design as possible
 
設(shè)計領(lǐng)域的金科玉律,尤其是Dieter Rams提出的“好設(shè)計的10個原則”,深刻影響了德國博朗公司的產(chǎn)品哲學(xué),這些原則成為了衡量設(shè)計作品的經(jīng)典標(biāo)尺。
 
商業(yè)設(shè)計的卓越不僅體現(xiàn)在設(shè)計本身的美感與創(chuàng)新,更在于市場的積極反饋和用戶口碑。蘋果產(chǎn)品是這一理念的典型例證,不僅屢獲設(shè)計大獎,其市場表現(xiàn)和銷量同樣令人矚目。戴森公司則以創(chuàng)新技術(shù)為核心,如其吹風(fēng)機、卷發(fā)棒等產(chǎn)品,憑借前沿科技與設(shè)計美學(xué)的結(jié)合,實現(xiàn)了商業(yè)上的巨大成功,再次證明了好的商業(yè)設(shè)計應(yīng)是美觀性與市場性的雙重勝利。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
視覺設(shè)計與UI設(shè)計的標(biāo)準(zhǔn):
 
視覺設(shè)計與UI設(shè)計的標(biāo)準(zhǔn)化對于維護(hù)品牌形象、提升用戶體驗至關(guān)重要。在大型企業(yè)中,確保設(shè)計的一致性尤為關(guān)鍵,以下是一些普遍認(rèn)可的設(shè)計標(biāo)準(zhǔn):
 
1. 網(wǎng)格系統(tǒng)的應(yīng)用:確保頁面布局有序,增強一致性。
2. 比例與尺寸的合理性:維持視覺元素間的和諧比例。
3. 文字的清晰可讀:選擇易讀性強的字體,合理設(shè)置字號、行距。
4. 色彩的情感傳達(dá):色彩運用需考慮文化寓意及情感影響。
5. 圖片的精選與優(yōu)化:高質(zhì)量圖像與品牌調(diào)性相符,提升視覺吸引力。
6. 圖標(biāo)與圖形的規(guī)范:制定統(tǒng)一的圖標(biāo)庫,確保圖標(biāo)含義清晰一致。
7. 按鈕設(shè)計的統(tǒng)一性:按鈕樣式、交互反饋需遵循統(tǒng)一標(biāo)準(zhǔn)。
8. 視覺層次的構(gòu)建:通過大小、顏色、位置等區(qū)分信息優(yōu)先級。
9. 對齊與平衡法則:確保頁面元素視覺上的平衡與協(xié)調(diào)。
10. 視覺引導(dǎo)策略:明確的視覺路徑引導(dǎo),幫助用戶高效完成任務(wù)。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
產(chǎn)品設(shè)計的優(yōu)質(zhì)標(biāo)準(zhǔn):
 
遵循上述設(shè)計準(zhǔn)則的同時,產(chǎn)品設(shè)計還需考慮以下幾個方面:
- 用戶中心:深入理解用戶需求,以用戶為中心進(jìn)行設(shè)計。
- 功能性:確保產(chǎn)品功能的實用性和易用性,解決用戶痛點。
- 創(chuàng)新性:在設(shè)計中融入新穎理念,區(qū)別于競爭對手。
- 持續(xù)性:設(shè)計應(yīng)考慮產(chǎn)品的生命周期,便于升級和維護(hù)。
- 可持續(xù)性:關(guān)注環(huán)保材料與制造工藝,減少環(huán)境影響。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
在設(shè)計實踐中,嚴(yán)格遵循這些準(zhǔn)則,不僅能提升設(shè)計的專業(yè)度,還能確保產(chǎn)品在視覺與功能上的雙重卓越。
網(wǎng)格系統(tǒng)作為設(shè)計領(lǐng)域的基石,其重要性已被谷歌、微軟、蘋果、Naver、阿里巴巴等巨頭公司廣泛認(rèn)可,并將其納入設(shè)計規(guī)范之中。盡管網(wǎng)格并非僵化的規(guī)則,允許在基礎(chǔ)框架上靈活變化,但它在維持設(shè)計的一致性和提高工作效率方面扮演著至關(guān)重要的角色。
 
Web設(shè)計中的12列網(wǎng)格標(biāo)準(zhǔn):12列網(wǎng)格因其靈活性而備受歡迎,能夠輕松適應(yīng)6列、4列、3列乃至2列的布局需求,使得頁面結(jié)構(gòu)更加條理化和模塊化。在PC端設(shè)計中,采用12欄網(wǎng)格系統(tǒng)能夠顯著提升頁面的統(tǒng)一性和標(biāo)準(zhǔn)化程度,使設(shè)計過程遵循規(guī)律,簡化決策,從而達(dá)到高效而美觀的效果。響應(yīng)式設(shè)計中,網(wǎng)格更是保證跨平臺一致性的關(guān)鍵工具。
 
Reddit官網(wǎng)便是12列網(wǎng)格應(yīng)用的典范,其頁面布局既有序又富有變化,充分展示了網(wǎng)格在網(wǎng)頁設(shè)計中的優(yōu)勢。網(wǎng)格系統(tǒng)的運用,無疑為網(wǎng)頁或PC設(shè)計奠定了良好的基礎(chǔ)框架。
 
移動設(shè)備上的6列網(wǎng)格:考慮到屏幕尺寸限制,移動端設(shè)計傾向于使用6列網(wǎng)格作為標(biāo)準(zhǔn),它既能滿足大部分設(shè)計布局需求,又能方便地實現(xiàn)二等分或三等分布局。盡管如此,針對特定需求如淘寶等電商應(yīng)用,由于信息密度高,可能會采用12列網(wǎng)格以容納更多內(nèi)容。
 
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
海外產(chǎn)品中的網(wǎng)格應(yīng)用示例,如Pinterest,其界面設(shè)計明顯遵循了一個6列網(wǎng)格系統(tǒng),圖片與按鈕的布局均嚴(yán)格遵循這一規(guī)則,確保了界面的整潔與統(tǒng)一,每一頁的邊距處理也保持一致,進(jìn)一步證明了網(wǎng)格在打造有序且視覺舒適界面中的核心作用。
 
不論是PC還是移動平臺,網(wǎng)格系統(tǒng)都是設(shè)計中不可或缺的組成部分,它既是設(shè)計標(biāo)準(zhǔn)化的推手,也是提升用戶體驗的有效途徑。
 
Airbnb的設(shè)計備受推崇,其背后的秘密在于一套有序的網(wǎng)格系統(tǒng)。他們采用的布局策略是左右邊距48像素,內(nèi)容區(qū)域間隔24像素,這樣的設(shè)計增加了頁面的留白空間,營造出舒適愉悅的瀏覽體驗,使得Airbnb的設(shè)計呈現(xiàn)出獨特的秩序美感和視覺焦點。
 
轉(zhuǎn)而觀之,谷歌作為設(shè)計規(guī)范的先行者,在其最新設(shè)計語言中首次詳盡闡述了網(wǎng)格系統(tǒng)的應(yīng)用。谷歌的網(wǎng)格系統(tǒng)不僅涵蓋了傳統(tǒng)元素如邊距、間隔,還特別定義了四欄布局,以適應(yīng)手機、Web及平板等多種平臺的產(chǎn)品設(shè)計,體現(xiàn)出其在跨平臺設(shè)計中對一致性和靈活性的重視。谷歌官網(wǎng)是深入了解其網(wǎng)格系統(tǒng)細(xì)節(jié)的寶貴資源。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
合理比例的重要性:比例在設(shè)計中占據(jù)核心地位,合理的比例配置能夠顯著提升視覺效果。盡管存在爭議,黃金比例(約1.618:1)作為古老而經(jīng)典的美學(xué)法則,自古希臘數(shù)學(xué)家歐幾里得時期起就被廣泛討論。盡管有人質(zhì)疑將其作為絕對設(shè)計法則的適用性,但黃金比例不失為設(shè)計初期的一個有益參考框架,而非一成不變的規(guī)則。
蘋果公司在其APP圖標(biāo)設(shè)計中巧妙運用黃金比例,這一原則貫穿其眾多設(shè)計作品,證明了黃金比例在現(xiàn)代設(shè)計中的持續(xù)影響力。眾多知名互聯(lián)網(wǎng)品牌亦紛紛采納黃金比例,以提升視覺和諧與品牌識別度,再次驗證了比例設(shè)計在塑造高品質(zhì)視覺體驗中的關(guān)鍵作用。
Facebook在其官方網(wǎng)站的設(shè)計中同樣采納了接近黃金比例的原則,以此優(yōu)化視覺布局,確保用戶界面既美觀又易于導(dǎo)航,進(jìn)一步證實了黃金比例在現(xiàn)代數(shù)字設(shè)計中的廣泛應(yīng)用與影響力。
 
谷歌的Material Design規(guī)范,作為設(shè)計界的權(quán)威指南,詳細(xì)闡述了如何通過標(biāo)準(zhǔn)化的比例(如16:9, 3:2, 4:3, 1:1, 3:4, 2:3等)來構(gòu)建界面布局,以實現(xiàn)設(shè)計的一致性和高效性。這一做法不僅統(tǒng)一了視覺語言,還提升了用戶體驗,強調(diào)了在設(shè)計中遵循規(guī)律比例的重要性,它是塑造流暢視覺流程和提升設(shè)計整體感的關(guān)鍵。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
文字易讀性:設(shè)計中的核心要素
 
在產(chǎn)品設(shè)計中,文字是傳達(dá)信息的橋梁,其易讀性直接關(guān)系到用戶體驗的質(zhì)量。優(yōu)化文字排版,確保信息傳遞的高效,是設(shè)計中的重要一環(huán)。通過精細(xì)控制對齊、字體選擇、行距、字間距等,可以顯著提升閱讀體驗。
 
對齊的魔力:對齊方式對閱讀節(jié)奏有著直接影響?;靵y的對齊會導(dǎo)致閱讀效率下降,而合理的對齊能夠引導(dǎo)用戶的視線流動,提升閱讀體驗。如上圖所示,三種不同的對齊方式帶來了迥異的閱讀感受。良好的對齊不僅美觀,還能使信息層次分明,便于用戶快速抓取關(guān)鍵信息。
 
間距的藝術(shù):間距(包括行間距和字間距)是控制閱讀節(jié)奏的另一關(guān)鍵。過小的間距會使文字擁擠,閱讀時易產(chǎn)生視覺疲勞;反之,過大的間距則可能導(dǎo)致閱讀斷層,信息連貫性受損。找到合適的間距比例,是保障閱讀流暢性的關(guān)鍵。這要求設(shè)計師在設(shè)計過程中,根據(jù)內(nèi)容的性質(zhì)和閱讀場景,精心調(diào)整,以達(dá)到最佳的視覺舒適度和信息傳遞效率。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
無論是遵循黃金比例的布局設(shè)計,還是遵循標(biāo)準(zhǔn)化比例的界面構(gòu)建,亦或是通過精細(xì)調(diào)控實現(xiàn)的文字易讀性,都是設(shè)計中不可或缺的要素。它們共同作用,不僅提升了設(shè)計的美學(xué)價值,更深層次地,優(yōu)化了用戶體驗,確保了信息的有效傳達(dá)。在數(shù)字化時代,把握這些設(shè)計原則,是每一位設(shè)計師通往卓越設(shè)計道路上的必修課。
 
在提升設(shè)計的易用性方面,文字大小與字體的變化扮演著至關(guān)重要的角色。信息架構(gòu)通常圍繞標(biāo)題、副標(biāo)題和正文構(gòu)建,通過調(diào)整文字尺寸與粗細(xì),可以有效引導(dǎo)用戶注意力,確保信息的層次分明。蘋果公司便巧妙地將黃金比例應(yīng)用于字體設(shè)計,其字體大小對比通常維持在1.7:1或0.7:1,這與黃金比例的美學(xué)原則不謀而合,進(jìn)而增強了視覺層次和閱讀流暢性。
 
對比策略的運用,是另一提升設(shè)計易用性的有效手段。通過文字大小、顏色及透明度的對比,可以顯著提升內(nèi)容的可識別度。然而,在追求視覺效果的同時,還需遵循Web內(nèi)容無障礙指南,確保所有用戶都能無障礙獲取信息,推薦的對比度標(biāo)準(zhǔn)為至少4.5:1。蘋果官網(wǎng)便是這一原則的絕佳示范,巧妙利用文字的大小、顏色及透明度差異,使得信息傳遞既高效又具有吸引力。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
色彩的情感傳達(dá)是設(shè)計中不可忽視的一環(huán)。色彩的選擇不僅關(guān)乎美觀,更直接影響用戶的情緒反應(yīng)。每種色彩因其明度、飽和度的不同,能喚起截然不同的情感體驗。例如,紅色既可以表達(dá)個性與現(xiàn)代感,也能展現(xiàn)性感魅力。為了精準(zhǔn)掌握色彩的情感語言,可以借助“色彩意象尺”這一工具,它能幫助設(shè)計師了解每種色彩所蘊含的情感傾向,是品牌塑造和色彩搭配的重要輔助工具。在品牌設(shè)計過程中,色彩意象尺能指導(dǎo)設(shè)計師選定符合品牌調(diào)性的色彩方案,確保色彩運用與品牌理念和諧統(tǒng)一。
 
以定義品牌色彩為例,通過色彩意象尺分析,設(shè)計師可以深入理解不同色彩的情感寓意,從而在眾多顏色中作出明智選擇,不僅塑造品牌的獨特視覺形象,還能激發(fā)目標(biāo)受眾的共鳴,進(jìn)一步強化品牌識別度與市場影響力。正確運用色彩,不僅美化視覺界面,更能在情感層面與用戶建立連接,是設(shè)計中不可或缺的策略之一。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
舉個例子
在著手創(chuàng)建一個面向全球95后用戶的時尚社交產(chǎn)品時,色彩選擇尤為關(guān)鍵。假設(shè)我們的品牌定位趨向于青春活力與輕盈,首先需從色彩意象尺中挑選符合這一氣質(zhì)的色彩基礎(chǔ)。在這個過程中,我們鎖定紅色和黃色作為潛在的候選色彩。
 
分析競品色彩策略:調(diào)研發(fā)現(xiàn),多數(shù)競品偏向使用紅色系,這為我們提供了差異化的機會。于是,我們決定避開紅色,轉(zhuǎn)而選取黃色作為品牌的核心色彩,以此在市場中脫穎而出。
 
考慮用戶偏好:接下來,需分析目標(biāo)用戶群的性別比例。假設(shè)男性用戶占比更多,且偏好較為大膽的色彩組合,我們基于黃色進(jìn)行調(diào)整,提高其明度和飽和度,最終選定了一款接近糖果玉米的鮮明黃色,以滿足年輕男性群體的審美偏好。
 
確定品牌色彩:通過這一系列步驟,我們的品牌色方向得以確立——鮮明而富有活力的黃色,既體現(xiàn)了品牌的時尚特性,又與目標(biāo)用戶群體產(chǎn)生強烈共鳴。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
理論應(yīng)用與實踐:理解品牌個性維度、色彩情感及色相意向尺等概念,對于初學(xué)者可能略顯陌生,但通過本文的介紹,希望你能逐步掌握這些理論,并在實際項目中不斷實踐。隨著時間的積累,你將能自信地從零開始創(chuàng)造獨特且經(jīng)典的色彩搭配方案。
 
推薦資源:為了進(jìn)一步提升你的色彩搭配能力,推薦訪問“BrandColors.net”(請注意,網(wǎng)站名稱為示例,實際網(wǎng)址應(yīng)自行搜索確認(rèn)),這是一個匯聚了全球知名企業(yè)的品牌色彩庫,你可以從中獲取靈感,學(xué)習(xí)如何高效地運用色彩來強化品牌形象。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
上文提到的案例,展示了如何根據(jù)產(chǎn)品定位(如優(yōu)雅與高級),利用色彩意向尺選擇中性色調(diào),進(jìn)而打造出既符合品牌調(diào)性又具視覺吸引力的設(shè)計實例,進(jìn)一步證明了色彩選擇在品牌塑造中的重要性。
 
通過這些步驟和工具的綜合運用,你將能夠更加系統(tǒng)和科學(xué)地定義屬于自己的品牌色彩,為產(chǎn)品注入獨特的靈魂與魅力。
 
在設(shè)計領(lǐng)域,圖片作為傳達(dá)信息的強有力工具,其重要性不言而喻。它不僅直接且有效地表達(dá)設(shè)計意圖,還能瞬間提升作品的整體品質(zhì)。當(dāng)設(shè)計中需要傳達(dá)特定情感或概念,如安全,通過展示警察、保鏢、手機鎖屏、戴口罩的圖像,或是保險箱、指紋鎖等象征物,可以直觀地向觀眾傳遞安全的信號。進(jìn)一步,圖片的選擇還能啟發(fā)設(shè)計風(fēng)格,如保險箱的塊面感、穩(wěn)重的字體和對稱構(gòu)圖,都能為設(shè)計增添安全、可靠的氣息。
 
圖片的運用不僅限于情緒板,它們在設(shè)計項目中發(fā)揮著舉足輕重的作用,能夠清晰地傳達(dá)信息,提升視覺效果。一張精心挑選的攝影照片與設(shè)計巧妙融合,如汽車與風(fēng)景的和諧搭配,能極大提升作品的藝術(shù)感和吸引力,尤其是在電商設(shè)計中,優(yōu)質(zhì)的圖片與產(chǎn)品氣質(zhì)相得益彰,能有效提升銷售額與設(shè)計美感。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
圖標(biāo)設(shè)計同樣不容忽視,它們不僅是功能的指示符號,更是設(shè)計語言的重要組成部分。圖標(biāo)的設(shè)計風(fēng)格,如圓角大小、質(zhì)感選擇,都能深刻影響作品的氣質(zhì)傳達(dá)。柔和的斷口與疊加色彩圖標(biāo),給人以輕松愉悅的感受,適合營造親切友好的氛圍;而線條硬朗、質(zhì)感穩(wěn)重的圖標(biāo),則更適合金融等領(lǐng)域,傳遞出專業(yè)與信賴感。圖標(biāo)設(shè)計還需遵循用戶習(xí)慣,采用與日常生活緊密相關(guān)的隱喻,確保用戶能夠迅速理解和感知,從而提升用戶體驗。
 
綜上所述,設(shè)計師應(yīng)擅長運用圖片和圖標(biāo)作為設(shè)計語言,通過精準(zhǔn)的圖片選擇與富含隱喻的圖標(biāo)設(shè)計,有效傳達(dá)設(shè)計概念,提升設(shè)計的整體品質(zhì)與溝通效率。這不僅是提升設(shè)計作品美學(xué)價值的關(guān)鍵,更是連接用戶情感與理解的橋梁。
 
在產(chǎn)品設(shè)計的復(fù)雜生態(tài)系統(tǒng)中,按鈕作為用戶交互的核心元素,其設(shè)計的精確性與合理性至關(guān)重要。每個按鈕都承載著特定的行動召喚,因此,制定明確的按鈕規(guī)則是設(shè)計中不可或缺的一環(huán)。設(shè)計中,按鈕樣式多樣,如填充型、線框型、色塊描邊型及純文字型,每種類型對應(yīng)不同的應(yīng)用場景。主行動按鈕通常采用品牌色彩填充,以增強點擊欲望,如“購買”、“下一步”等關(guān)鍵操作;輔助操作則傾向于采用白色邊框按鈕,以減輕視覺負(fù)擔(dān)。警告操作采用紅色,無效狀態(tài)則以灰色呈現(xiàn),以此明確按鈕的功能和狀態(tài),避免用戶混淆。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
缺乏明確的按鈕設(shè)計指引,將導(dǎo)致設(shè)計混亂和功能混亂,影響用戶體驗。因此,建立一套詳細(xì)的按鈕使用規(guī)范,是設(shè)計團(tuán)隊的必備工作。
 
視覺對齊準(zhǔn)則同樣影響著設(shè)計的精確性和美觀度。設(shè)計時,精確的數(shù)學(xué)對齊雖為基礎(chǔ),但在特定情況下,視覺效果的和諧同樣重要。如NAVER的閃屏設(shè)計,通過輕微的視覺偏差調(diào)整,使界面看起來更為和諧自然。在處理文字排版時,粗細(xì)字體的搭配需注意視覺平衡,有時需對字體大小進(jìn)行微調(diào),以確保視覺上的等效性。同樣,中英文數(shù)字混排時,由于視覺感知差異,需適當(dāng)調(diào)整數(shù)字大小,確保整體視覺的均衡。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
按鈕設(shè)計的規(guī)范性與視覺對齊的精確性,是提升產(chǎn)品設(shè)計質(zhì)量的關(guān)鍵。通過細(xì)致入微的調(diào)整,如遵循特定場景下的按鈕樣式規(guī)則、適時進(jìn)行視覺矯正、以及在字體與數(shù)字混排中追求視覺平衡,設(shè)計師能夠確保用戶界面既符合邏輯,又美觀協(xié)調(diào)。這些細(xì)節(jié)的把握,是設(shè)計從“可用”走向“卓越”的必經(jīng)之路。


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

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

UI 設(shè)計公司蘭亭妙微分享:臨床生物樣本大數(shù)據(jù)中心網(wǎng)站設(shè)計

天宇 網(wǎng)站設(shè)計文章及欣賞

一、項目背景

隨著精準(zhǔn)醫(yī)療興起,實現(xiàn)個體化診療需大量生物樣本數(shù)據(jù)支撐 。然而現(xiàn)實中,生物樣本數(shù)據(jù)雖海量,卻無序且利用不充分,各醫(yī)療機構(gòu)還面臨計算資源短缺、存儲共享難和安全風(fēng)險高等問題。臨床生物樣本大數(shù)據(jù)中心網(wǎng)站為不同醫(yī)療機構(gòu)、科研機構(gòu)和企業(yè)之間的合作提供了一個平臺,促進(jìn)了跨機構(gòu)的生物樣本數(shù)據(jù)共享和合作研究,打破了數(shù)據(jù)孤島,實現(xiàn)了資源的優(yōu)化配置和協(xié)同創(chuàng)新。

接到設(shè)計需求后,藍(lán)藍(lán)團(tuán)隊專門去客戶現(xiàn)場面對面交流,更好地捕捉客戶的細(xì)節(jié)要求。該網(wǎng)站是國內(nèi)首個開放式生物樣本數(shù)據(jù)中心。在設(shè)計過程中參考了很多國外設(shè)計,整體風(fēng)格國際化。首頁提案設(shè)計過程中藍(lán)藍(lán)團(tuán)隊嘗試了不同的視覺風(fēng)風(fēng)格以及交互方式,整體以“美觀、簡潔、易用”為主要設(shè)計目標(biāo)。

二、項目概述

(一)產(chǎn)品定位

臨床生物樣本大數(shù)據(jù)中心網(wǎng)站是專業(yè)的醫(yī)學(xué)數(shù)據(jù)平臺。面向醫(yī)學(xué)科研人員、臨床醫(yī)生及生物醫(yī)藥企業(yè),整合多源臨床生物樣本數(shù)據(jù),涵蓋豐富疾病類型與人群特征。以嚴(yán)格的數(shù)據(jù)質(zhì)量控制確保準(zhǔn)確性與可靠性,提供強大數(shù)據(jù)分析工具。建立共享機制,促進(jìn)合作交流。專注臨床數(shù)據(jù)領(lǐng)域,保障數(shù)據(jù)安全與良好用戶體驗,致力于成為醫(yī)學(xué)研究與臨床應(yīng)用的有力支撐。

(二)目標(biāo)用戶

臨床生物樣本大數(shù)據(jù)中心網(wǎng)站的目標(biāo)用戶主要包括醫(yī)學(xué)科研人員、臨床醫(yī)生和生物醫(yī)藥企業(yè)。醫(yī)學(xué)科研人員可借助豐富的臨床樣本數(shù)據(jù)開展各類研究項目,提升研究效率與可靠性。臨床醫(yī)生能通過該網(wǎng)站獲取疾病信息,為診斷和治療決策提供參考,跟蹤最新研究進(jìn)展以提高醫(yī)療水平。

(三)設(shè)計風(fēng)格

網(wǎng)站主色調(diào)采用藍(lán)色,且與logo保持一致,藍(lán)色通常與專業(yè)、可靠、冷靜等特質(zhì)聯(lián)系在一起。對于該網(wǎng)站來說,藍(lán)色的界面可以讓用戶(包括醫(yī)療專業(yè)人士、研究人員和患者等)感受到網(wǎng)站的專業(yè)性,仿佛在傳達(dá) “我們是值得信賴的專業(yè)機構(gòu),能夠妥善處理和管理重要的生物樣本數(shù)據(jù)”。

level2_img.png

三、設(shè)計前后對比

設(shè)計后:藍(lán)色,更加國際化,創(chuàng)新的報告布局動效,內(nèi)容更加條理清晰

后.png

設(shè)計前,展示形式不夠清晰,沒有形成主題風(fēng)

前.png

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

常見的 10 大圖標(biāo)設(shè)計風(fēng)格

天宇 圖標(biāo)設(shè)計文章及欣賞

圖標(biāo)是產(chǎn)品中不可或缺的部分,隨著設(shè)計趨勢的不斷變化,圖標(biāo)設(shè)計風(fēng)格也在不斷豐富。在產(chǎn)品中會出現(xiàn)哪些常見的圖標(biāo)設(shè)計風(fēng)格呢?結(jié)合產(chǎn)品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標(biāo)設(shè)計風(fēng)格。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
1. 線性功能圖標(biāo)
線性功能圖標(biāo)是產(chǎn)品中最常見的風(fēng)格,設(shè)計時控制好圖標(biāo)規(guī)范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
2. 面性功能圖標(biāo)
面性功能圖標(biāo)與線性風(fēng)一樣,也是產(chǎn)品中最常見的風(fēng)格。有單色單圖形、多色疊加風(fēng)、微漸變風(fēng)格等表達(dá)形式。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
3. 磨砂玻璃質(zhì)感圖標(biāo)
磨砂玻璃質(zhì)感圖標(biāo)是輕質(zhì)感的表達(dá)形式之一,也是近些年較為流行的趨勢??梢员馄揭部梢晕①|(zhì)感,在立體感圖標(biāo)上面也可以運用這類效果。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
4. 微質(zhì)感圖標(biāo)
微質(zhì)感圖標(biāo)相較于扁平化設(shè)計而言,更能突出細(xì)節(jié)的深入和真實感的體現(xiàn)。微質(zhì)感圖標(biāo)的層次感也更豐富,該技法也是設(shè)計師的必備技能。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
5. 晶白風(fēng)圖標(biāo)
晶白風(fēng)圖標(biāo)常用于金剛區(qū)欄目,利用白色不透明度關(guān)系和背景色關(guān)系進(jìn)行圖標(biāo)設(shè)計,圖標(biāo)質(zhì)感、層次感、空間感等都能得以體現(xiàn)。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
6. 立體感圖標(biāo)
立體感圖標(biāo)分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設(shè)計趨勢的普及,立體感圖標(biāo)的運用也逐步普及,也可以利用 AI 工具完成該類型圖標(biāo)。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
7. 插畫風(fēng)圖標(biāo)
插畫風(fēng)圖標(biāo)是插畫風(fēng)格的簡化融入,以此提升圖標(biāo)設(shè)計的特征感,使得圖標(biāo)具備差異化的視覺效果,也能烘托出整體設(shè)計的質(zhì)量。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
8. 主題化圖標(biāo)
主題化圖標(biāo)設(shè)計風(fēng)格多樣,會結(jié)合活動主題或者節(jié)日慶典等內(nèi)容,根據(jù)主題設(shè)計圖標(biāo)更能體現(xiàn)產(chǎn)品溫度。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
9. 寫實類圖標(biāo)
寫實圖標(biāo)是以技法表現(xiàn)實物特征,比較考驗質(zhì)感表現(xiàn)、透視光影等技法能力。隨著扁平化趨勢,寫實類設(shè)計逐步被淡化,但是也有部分產(chǎn)品會局部性運用。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
 
10. 實物圖圖標(biāo)
直接將產(chǎn)品實物圖作為圖標(biāo)相對較少,但是依然有產(chǎn)品會選擇使用,還原其內(nèi)容表達(dá)的真實性。
常見的 10 大圖標(biāo)設(shè)計風(fēng)格
 
 
 
以上為產(chǎn)品中常見的圖標(biāo)設(shè)計風(fēng)格,根據(jù)不同需求采用。對于設(shè)計師而言,這也是首先需要掌握的圖標(biāo)技能。
 
本文由 @黑馬青年(heimaui)原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。

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

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

天宇 移動端UI設(shè)計文章及欣賞

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


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

數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具

ui設(shè)計分享達(dá)人 大數(shù)據(jù)可視化設(shè)計文章及欣賞

 
 
PART 1 ——————
數(shù)據(jù)圖表的概述
數(shù)據(jù)圖表是將復(fù)雜的數(shù)據(jù)集轉(zhuǎn)換為圖形或圖像的過程,旨在通過視覺化的方式簡化信息的理解和分析。它不僅是一種技術(shù)手段,更是一種溝通工具,能夠幫助人們更有效地解釋數(shù)據(jù)、發(fā)現(xiàn)模式、做出決策并傳達(dá)見解。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
「核心價值」
·  簡化復(fù)雜信息:數(shù)據(jù)圖表通過圖形化的手段簡化了大量數(shù)字或文本信息,使讀者能夠迅速抓住關(guān)鍵點。
·  促進(jìn)理解與學(xué)習(xí):利用人類大腦對圖形和色彩的敏感性,數(shù)據(jù)圖表加速了信息處理過程,支持教育和培訓(xùn)。
·  輔助決策制定:數(shù)據(jù)圖表為管理層或其他決策者提供了有價值的商業(yè)智能,支持快速決策。
·  提升溝通效果:促進(jìn)了跨部門協(xié)作和公眾傳播的效果。
 
「核心要素」
·  數(shù)據(jù):來源可以是數(shù)據(jù)庫、API或文件,類型包括定量和定性數(shù)據(jù)。
·  圖表類型:根據(jù)數(shù)據(jù)特性和分析目的選擇最恰當(dāng)?shù)膱D表類型。
·  設(shè)計原則:確保圖表清晰易讀、準(zhǔn)確無誤、風(fēng)格一致且具備視覺吸引力。
 
「核心目標(biāo)」
·  簡化復(fù)雜信息:使大量數(shù)字或文本信息變得直觀易懂。
·  促進(jìn)理解與學(xué)習(xí):加速信息處理過程,支持教育和培訓(xùn)。
·  輔助決策制定:提供有價值的商業(yè)智能,支持快速決策。
·  提升溝通效果:增強跨部門協(xié)作和公眾傳播的效果。
·  探索數(shù)據(jù)關(guān)系:發(fā)現(xiàn)隱藏模式,驗證假設(shè)。
·  監(jiān)測與跟蹤進(jìn)展:實時監(jiān)控關(guān)鍵指標(biāo),規(guī)劃項目管理。
 
?? 
PART 2
 ——————
應(yīng)用標(biāo)準(zhǔn)指南
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
設(shè)計有效的數(shù)據(jù)圖表不僅需要選擇合適的圖表類型,還需要遵循一系列設(shè)計要點以確保圖表既美觀又實用。以下是應(yīng)用數(shù)據(jù)圖表時需要注意的標(biāo)準(zhǔn)指南:
 
1. 明確目標(biāo)與受眾
·  理解需求:明確你希望通過圖表傳達(dá)的信息是什么。
·  考慮受眾:了解你的目標(biāo)受眾是誰,他們的知識水平和興趣點在哪里。
2. 簡潔性與清晰度
·  去除冗余:避免不必要的裝飾元素,保持圖表簡單明了。
·  突出重點:通過顏色、字體大小等方式強調(diào)最重要的信息。
·  易于解讀:確保圖表中的每個元素都有其明確的意義,并且容易被理解。
3. 數(shù)據(jù)準(zhǔn)確性
·  精確無誤:保證所使用的數(shù)據(jù)是最新且經(jīng)過驗證的。
·  透明度:注明數(shù)據(jù)來源,增加可信度;如果適用,提供數(shù)據(jù)獲取方法或計算公式。
4. 合理使用顏色
·  色彩心理學(xué):根據(jù)情感聯(lián)想選用顏色,例如綠色通常關(guān)聯(lián)增長,紅色常用來警示。
·  對比度:使用足夠的顏色對比來區(qū)分不同的數(shù)據(jù)系列或類別,同時考慮到色盲用戶的需要。
·  一致性:在多個圖表中保持顏色方案的一致性,以便于比較。
5. 標(biāo)簽與注釋
·  完整標(biāo)簽:為所有軸、圖例和其他重要元素添加清晰的標(biāo)簽。
·  必要注釋:對于特別重要的數(shù)據(jù)點或異常情況進(jìn)行說明,幫助用戶更好地理解圖表內(nèi)容。
6. 圖表標(biāo)題與描述
·  簡潔標(biāo)題:用簡短而準(zhǔn)確的語言概括圖表的主要信息。
·  輔助文本:如有必要,可以添加副標(biāo)題或簡短描述來補充背景信息或解釋圖表含義。
7. 交互性(如適用)
·  工具提示:當(dāng)用戶將鼠標(biāo)懸停在某個數(shù)據(jù)點上時,顯示詳細(xì)信息。
·  動態(tài)更新:對于實時數(shù)據(jù),設(shè)計允許自動刷新的圖表。
·  篩選與排序:提供選項讓用戶根據(jù)自己的興趣過濾或重新排列數(shù)據(jù)。
8. 響應(yīng)式設(shè)計
·  適應(yīng)多平臺:確保圖表能夠在不同設(shè)備(桌面電腦、平板電腦、智能手機)上良好顯示。
·  可縮放:允許用戶放大特定區(qū)域或滾動查看超出初始視圖的數(shù)據(jù)。
9. 避免誤導(dǎo)性表示
·  比例尺的選擇:合理設(shè)置Y軸起始值和增量,避免夸大或縮小差異。
·  避免三維效果:除非絕對必要,否則不要使用三維效果,因為它們可能會扭曲感知比例。
10. 故事講述
·  邏輯連貫:構(gòu)建一個從開始到結(jié)束逐步理解數(shù)據(jù)背后意義的故事線。
·  引導(dǎo)視線:通過布局和視覺層次引導(dǎo)觀眾關(guān)注最重要或最有趣的部分。
11. 測試與反饋
·  用戶測試:邀請真實用戶測試圖表,收集反饋以改進(jìn)設(shè)計。
·  持續(xù)優(yōu)化:基于用戶反饋和技術(shù)進(jìn)步不斷調(diào)整和完善圖表設(shè)計。
 
遵循上述標(biāo)準(zhǔn)可以幫助創(chuàng)建出既美觀又功能強大的數(shù)據(jù)圖表,從而更有效地支持決策過程并促進(jìn)信息交流。
 
?? 
PART 3 
——————
圖表構(gòu)成元素
想準(zhǔn)確的將圖表與所要表現(xiàn)的數(shù)據(jù)進(jìn)行對應(yīng),需要了解圖表本身所包含的基本元素。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
在這些元素中正常情況下一定在圖表中的有:標(biāo)題、時間范圍、圖形主體,經(jīng)常出現(xiàn)的有:坐標(biāo)系、圖例、提示信息,有時候會有的有:切換選項和值域。
 
· 標(biāo)題
(Title)
簡明扼要地說明圖表的內(nèi)容和目的。
標(biāo)題應(yīng)位于圖表上方居中位置,使用清晰易讀的字體和大小。
 
· 坐標(biāo)系(Coordinate System)
定義圖表的X軸和Y軸,以及數(shù)據(jù)點的位置。
坐標(biāo)軸應(yīng)清晰地標(biāo)記,包括刻度線和刻度值。確??潭乳g隔合適,易于閱讀。
 
· 時間范圍(Time Range)
告知用戶圖表數(shù)據(jù)覆蓋的時間段。
如果圖表顯示的是時間序列數(shù)據(jù),時間范圍可以放在標(biāo)題下方或者圖表底部的X軸標(biāo)簽旁邊。
 
· 圖形主體(Graph Body)
定義圖表的X軸和Y軸,以及數(shù)據(jù)點的位置。
坐標(biāo)軸應(yīng)清晰地標(biāo)記,包括刻度線和刻度值。確??潭乳g隔合適,易于閱讀。
 
· 圖例(Legend)
解釋圖表中不同顏色或圖案代表的數(shù)據(jù)系列。
圖例應(yīng)放置在圖表的邊角位置,不妨礙圖表的主體內(nèi)容。圖例中的顏色或圖案應(yīng)與圖表中的一致。
 
· 提示信息(Tooltip)
允許用戶選擇不同的數(shù)據(jù)系列或時間范圍。
切換選項可以是按鈕或下拉菜單的形式。應(yīng)放置在圖表的一側(cè)或頂部,不影響圖表主體的可視性。
 
· 切換選項(Toggle Options)
允許用戶選擇不同的數(shù)據(jù)系列或時間范圍。
切換選項可以是按鈕或下拉菜單的形式。應(yīng)放置在圖表的一側(cè)或頂部,不影響圖表主體的可視性。
 
· 值域(Value Range)
允許用戶調(diào)整坐標(biāo)軸的范圍,以聚焦于特定的數(shù)據(jù)區(qū)間。
值域調(diào)整通常出現(xiàn)在坐標(biāo)軸附近的小控件中,例如滑塊或輸入框。
 
?? 
PART 4 
——————
常見的數(shù)據(jù)圖表類型
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
在C端(消費者端)應(yīng)用中,數(shù)據(jù)圖表是一種非常重要的可視化工具,它能夠幫助用戶更直觀地理解和分析數(shù)據(jù)。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
 
?? 
PART 5 
——————
選擇合適圖表的關(guān)鍵因素
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
挑選最佳圖表類型是一個綜合考量數(shù)據(jù)集特點、應(yīng)用場景需求以及目標(biāo)受眾理解能力的過程,是確保數(shù)據(jù)有效傳達(dá)的關(guān)鍵。以下是選擇圖表類型時應(yīng)考慮的幾個重要要點:
 
1. 數(shù)據(jù)性質(zhì)
·  定量 vs 定性:確定你的數(shù)據(jù)是數(shù)值型(如銷售額、溫度)還是分類型(如性別、地區(qū))。數(shù)值型數(shù)據(jù)通常適合柱狀圖、折線圖等;分類型數(shù)據(jù)可能更適合餅圖或條形圖。
·  時間序列 vs 非時間序列:如果數(shù)據(jù)隨時間變化,如股票價格或天氣預(yù)報,則折線圖和面積圖可能是最佳選擇。如果是靜態(tài)數(shù)據(jù),如人口統(tǒng)計信息,則可以考慮柱狀圖或餅圖。
 
2. 比較需求
·  類別對比:如果你需要比較不同類別的數(shù)量或比例,柱狀圖、條形圖和餅圖是很好的選擇。
·  趨勢分析:對于展示隨時間或其他連續(xù)變量的變化趨勢,折線圖和面積圖更為合適。
·  相關(guān)性探索:當(dāng)你要研究兩個變量之間的關(guān)系時,散點圖可以幫助你發(fā)現(xiàn)潛在的相關(guān)性或模式。
 
3. 數(shù)據(jù)量與復(fù)雜度
·  少量數(shù)據(jù):對于簡單且數(shù)據(jù)點較少的情況,餅圖、條形圖等可以直接清晰地傳達(dá)信息。
·  大量數(shù)據(jù):面對大量數(shù)據(jù)或高維數(shù)據(jù)集時,熱力圖、氣泡圖、樹狀圖等能夠更有效地處理復(fù)雜信息,并幫助識別模式。
 
4. 用戶目標(biāo)與受眾理解能力
·  決策支持:如果目的是輔助快速決策,那么應(yīng)該選擇易于解讀、直觀明了的圖表類型,如子彈圖、漏斗圖等。
·  教育或解釋:針對教育目的或需要詳細(xì)解釋的數(shù)據(jù),可以選擇更具互動性的圖表,如帶有工具提示或動態(tài)更新功能的圖表。
 
5. 圖表的功能性
·  強調(diào)差異:如果你想突出顯示異常值或顯著差異,可以選擇箱線圖、瀑布圖等。
·  構(gòu)成分析:為了展示各部分占整體的比例關(guān)系,餅圖和堆疊柱狀圖非常有用。
·  分布展示:直方圖和密度圖能很好地展示數(shù)據(jù)的分布情況,包括集中趨勢和離散程度。
 
6. 可視化效果與美觀性
·  視覺吸引力:某些圖表不僅傳遞信息,還能增強視覺美感,如玫瑰圖、雷達(dá)圖等,適用于報告封面或演示文稿中。
·  空間效率:在有限的空間內(nèi)傳達(dá)更多信息,子彈圖、儀表盤等緊湊設(shè)計的圖表是不錯的選擇。
 
7. 行業(yè)慣例與標(biāo)準(zhǔn)
·  領(lǐng)域特定:不同的行業(yè)可能有其偏好使用的圖表類型,例如金融領(lǐng)域常用蠟燭圖,地理信息系統(tǒng)常用地圖可視化。
·  遵循規(guī)范:遵守所在領(lǐng)域的圖形表示規(guī)范,確保圖表的專業(yè)性和可接受性。
 
通過綜合考慮上述要點,你可以為特定的數(shù)據(jù)集和應(yīng)用場景挑選出最合適的圖表類型,從而最大化數(shù)據(jù)的價值并促進(jìn)有效的溝通。選擇圖表時,務(wù)必結(jié)合實際需求和用戶背景,確保最終呈現(xiàn)的信息既準(zhǔn)確又易于理解。
 
?? 
PART 6 
——————
使用場景
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
「健康類應(yīng)用」
健康類App通過使用多樣化的數(shù)據(jù)圖表,不僅讓用戶對自己的健康狀況有了更直觀的理解,同時也激勵用戶采取積極的生活方式改變,從而改善健康狀況。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如每日步數(shù)、卡路里消耗等。
·  視覺層次分明:使用不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,最重要的數(shù)據(jù)一目了然。
·  一致性:整個應(yīng)用程序中圖表風(fēng)格的一致性,包括顏色編碼、圖標(biāo)和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
 
2. 互動性
·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細(xì)的數(shù)據(jù),如具體日期的鍛煉記錄或飲食攝入情況。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月)、運動類型等進(jìn)行篩選,滿足個性化的查詢需求。
·  導(dǎo)出功能:為用戶提供將圖表導(dǎo)出為圖片或CSV格式的功能,便于打印或分享給教練或朋友。
 
3. 個性化
·  用戶定制:根據(jù)用戶的個人健康目標(biāo)或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標(biāo)的變化趨勢或特定訓(xùn)練方案的效果。
·  目標(biāo)跟蹤:類似于健康管理目標(biāo)設(shè)定,允許用戶設(shè)定并跟蹤自己的健身目標(biāo),如減重、增肌等。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估進(jìn)展,并為用戶提供有針對性的反饋和建議。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的健身數(shù)據(jù),如實時監(jiān)測的心率或運動進(jìn)度,這對于及時調(diào)整訓(xùn)練計劃尤為重要。
·  同步與整合:與其他健身設(shè)備或平臺無縫對接,自動同步來自各種來源的數(shù)據(jù),如智能手環(huán)、跑步機等,確保數(shù)據(jù)的完整性和準(zhǔn)確性。
·  通知與提醒:當(dāng)某些關(guān)鍵指標(biāo)達(dá)到預(yù)設(shè)目標(biāo)或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,鼓勵持續(xù)參與。
 
5. 教育與支持
·  學(xué)習(xí)資源:提供額外的學(xué)習(xí)資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的健身數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓用戶之間可以交流經(jīng)驗和支持,增加互動性和動力。
 
綜上所述,健身類APP圖表運用的設(shè)計特點不僅強調(diào)了清晰易讀、互動性強、個性化定制和實時更新,還特別注重用戶體驗和社區(qū)互動。這些特性共同作用,可以幫助用戶更有效地管理和理解健身數(shù)據(jù),從而促進(jìn)更好的健康管理和運動效果。
 
「醫(yī)療輔助應(yīng)用」
醫(yī)療輔助應(yīng)用的數(shù)據(jù)圖表設(shè)計特點可以從健身類APP的設(shè)計特點中汲取靈感,但同時也需要考慮到醫(yī)療行業(yè)的特殊需求和嚴(yán)格標(biāo)準(zhǔn)。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  專業(yè)術(shù)語解釋:確保圖表本身清晰易讀的同時,提供必要的術(shù)語解釋或簡短說明,幫助非專業(yè)人士理解復(fù)雜的醫(yī)學(xué)概念。
·  視覺層次分明:使用不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:保持整個應(yīng)用程序中圖表風(fēng)格的一致性,包括顏色編碼、圖標(biāo)和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
 
2. 互動性
·  深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細(xì)的數(shù)據(jù),如具體日期的測量結(jié)果或特定治療階段的效果。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月)、病患群體、疾病類型等進(jìn)行篩選,滿足個性化的查詢需求。
·  導(dǎo)出功能:為用戶提供將圖表導(dǎo)出為PDF、CSV等格式的功能,便于打印或分享給其他醫(yī)療專業(yè)人員。
 
3. 個性化
·  患者定制:根據(jù)患者的健康狀況、治療計劃或個人偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標(biāo)的變化趨勢或特定治療方案的效果。
·  醫(yī)生建議:集成醫(yī)生推薦的圖表視圖或設(shè)置,方便醫(yī)生快速評估病情進(jìn)展,并為患者提供有針對性的反饋。
·  健康目標(biāo)跟蹤:類似于健身APP中的目標(biāo)設(shè)定,允許患者設(shè)定并跟蹤自己的康復(fù)或健康管理目標(biāo),如血壓控制、體重管理等。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的健康數(shù)據(jù),如實時監(jiān)測的生命體征或?qū)嶒炇覚z測結(jié)果,這對于緊急情況下的決策尤為重要。
·  同步與整合:與其他醫(yī)療設(shè)備或系統(tǒng)無縫對接,自動同步來自各種來源的數(shù)據(jù),如可穿戴設(shè)備、醫(yī)院信息系統(tǒng)等,確保數(shù)據(jù)的完整性和準(zhǔn)確性。
·  通知與預(yù)警:當(dāng)某些關(guān)鍵指標(biāo)超出正常范圍時,及時向患者和相關(guān)醫(yī)護(hù)人員發(fā)送通知或警告,以便采取必要的干預(yù)措施。
 
5. 隱私與安全
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應(yīng)經(jīng)過嚴(yán)格的加密處理,確?;颊咝畔⒌陌踩?。
·  訪問權(quán)限控制:實施細(xì)粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標(biāo)準(zhǔn),如HIPAA(美國健康保險流通與責(zé)任法案)或其他國家/地區(qū)的療數(shù)據(jù)保護(hù)法規(guī)。
 
6. 教育與支持
·  學(xué)習(xí)資源:提供額外的學(xué)習(xí)資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的健康數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓患者之間或患者與醫(yī)生之間可以交流經(jīng)驗和支持。
 
綜上所述,醫(yī)療輔助Web應(yīng)用的數(shù)據(jù)圖表不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注隱私保護(hù)和安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助醫(yī)療專業(yè)人員和患者更有效地管理和理解健康數(shù)據(jù),從而促進(jìn)更好的醫(yī)療服務(wù)和健康管理。
 
「金融類應(yīng)用」
金融類應(yīng)用的數(shù)據(jù)圖表設(shè)計需要特別關(guān)注清晰性、互動性、個性化和實時更新,同時還要考慮到金融行業(yè)的特殊需求如安全性、合規(guī)性和專業(yè)性。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如股票價格走勢、投資組合表現(xiàn)等。
·  視覺層次分明:不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:整個應(yīng)用程序中圖表風(fēng)格的一致性,包括顏色編碼、圖標(biāo)和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
·  術(shù)語解釋:提供必要的術(shù)語解釋或簡短說明,幫助非專業(yè)人士理解復(fù)雜的金融概念。
 
2. 互動性
· 深度探索:用戶通過點擊、滑動或其他交互操作深入查看更詳細(xì)的數(shù)據(jù),如具體日期的交易記錄或市場波動情況。
·  多維度篩選:靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月、年)、資產(chǎn)類型(股票、債券、基金等)進(jìn)行篩選,滿足個性化的查詢需求。
·  導(dǎo)出功能:為用戶提供將圖表導(dǎo)出為圖片、PDF或CSV格式的功能,便于打印或分享給財務(wù)顧問或同事。
·  情景模擬:提供情景分析工具,用戶可以調(diào)整變量(如利率、通脹率)來預(yù)測不同市場條件下的投資表現(xiàn)。
 
3. 個性化
·  用戶定制:根據(jù)用戶的個人投資目標(biāo)或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標(biāo)的變化趨勢或特定投資策略的效果。
·  風(fēng)險偏好匹配:基于用戶的風(fēng)向承受能力,推薦適合的投資組合配置,并展示相應(yīng)的風(fēng)險與回報圖表。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估投資進(jìn)展,并為用戶提供有針對性的投資建議和反饋。
 
4. 實時更新
· 即時反饋:確保圖表能夠迅速反映最新的金融市場數(shù)據(jù),如實時股價、匯率變動等,這對于及時調(diào)整投資策略尤為重要。
·  同步與整合:與其他金融平臺或服務(wù)無縫對接,自動同步來自各種來源的數(shù)據(jù),如銀行賬戶、證券賬戶等,確保數(shù)據(jù)的完整性和準(zhǔn)確性。
·  通知與提醒:當(dāng)某些關(guān)鍵指標(biāo)達(dá)到預(yù)設(shè)閾值或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,幫助用戶抓住投資機會或規(guī)避風(fēng)險。
 
5. 安全與合規(guī)
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應(yīng)經(jīng)過嚴(yán)格的加密處理,確保用戶隱私和資金安全。
·  訪問權(quán)限控制:實施細(xì)粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標(biāo)準(zhǔn),如GDPR(歐盟通用數(shù)據(jù)保護(hù)條例)、SOX(薩班斯-奧克斯利法案)等,確保數(shù)據(jù)處理符合法律要求。
 
6. 教育與支持
·  學(xué)習(xí)資源:提供額外的學(xué)習(xí)資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的金融數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個專業(yè)的社區(qū)平臺,讓用戶之間或用戶與金融專家之間可以交流經(jīng)驗和支持。
·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
 
綜上所述,金融類應(yīng)用的數(shù)據(jù)圖表設(shè)計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注安全性和合規(guī)性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解金融數(shù)據(jù),從而做出更加明智的投資決策。
 
「信息記錄類應(yīng)用」
另一類比較常用圖表的 App 是信息記錄類 App,這些 App 通常會統(tǒng)計用戶主動輸入信息的頻次或頻率,依此生成一段時間周期內(nèi)的統(tǒng)計圖表。
數(shù)據(jù)圖表:多領(lǐng)域信息可視化的核心工具
 
 
——圖表運用特點——
1. 清晰易讀
·  直觀布局:圖表的顏色和布局讓用戶能夠迅速獲取關(guān)鍵信息,如每日情緒波動、月度費用支出等。
·  視覺層次分明:不同的顏色、字體大小和對比度來區(qū)分關(guān)鍵信息和次要信息,確保最重要的數(shù)據(jù)一目了然。
·  一致性:保持整個應(yīng)用程序中圖表風(fēng)格的一致性,包括顏色編碼、圖標(biāo)和布局,以增強用戶對不同頁面間數(shù)據(jù)的理解。
·  術(shù)語解釋:對于不太常見的記錄類別或指標(biāo),提供必要的解釋或簡短說明,幫助用戶理解圖表內(nèi)容。
 
2. 互動性
·  深度探索:允許用戶通過點擊、滑動或其他交互操作深入查看更詳細(xì)的數(shù)據(jù),如具體日期的記錄詳情或特定事件的影響。
·  多維度篩選:提供靈活的篩選選項,讓用戶可以根據(jù)時間范圍(日、周、月、年)、記錄類型(如費用分類、情緒標(biāo)簽)進(jìn)行篩選,滿足個性化的查詢需求。
·  導(dǎo)出功能:為用戶提供將圖表導(dǎo)出為圖片、PDF或CSV格式的功能,便于打印或分享給朋友或顧問。
·  情景模擬:在適用的情況下,提供情景分析工具,用戶可以調(diào)整變量(如預(yù)算分配)來預(yù)測不同情況下的結(jié)果。
 
3. 個性化
·  用戶定制:用戶的個人目標(biāo)或偏好調(diào)整圖表內(nèi)容,例如突出顯示關(guān)鍵指標(biāo)的變化趨勢或特定習(xí)慣養(yǎng)成的效果。
·  目標(biāo)跟蹤:類似于健身APP中的目標(biāo)設(shè)定,允許用戶設(shè)定并跟蹤自己的記錄目標(biāo),如每月節(jié)省金額、每周閱讀書籍?dāng)?shù)量等。
·  建議與反饋:集成系統(tǒng)推薦的圖表視圖或設(shè)置,方便用戶快速評估進(jìn)展,并為用戶提供有針對性的反饋和建議。
 
4. 實時更新
·  即時反饋:圖表能夠迅速反映最新的記錄數(shù)據(jù),如實時更新的情緒評分或新添加的費用條目,這對于及時調(diào)整計劃尤為重要。
·  同步與整合:與其他相關(guān)平臺或服務(wù)無縫對接,自動同步來自各種來源的數(shù)據(jù),如銀行賬戶、健康監(jiān)測設(shè)備等,確保數(shù)據(jù)的完整性和準(zhǔn)確性。
·  通知與提醒:當(dāng)某些關(guān)鍵指標(biāo)達(dá)到預(yù)設(shè)閾值或需要特別關(guān)注時,及時向用戶發(fā)送通知或提醒,幫助用戶保持記錄習(xí)慣或抓住改進(jìn)機會。
 
5. 隱私與安全
·  數(shù)據(jù)加密:所有傳輸和存儲的數(shù)據(jù)都應(yīng)經(jīng)過嚴(yán)格的加密處理,確保用戶的個人信息和敏感數(shù)據(jù)的安全。
·  訪問權(quán)限控制:實施細(xì)粒度的權(quán)限管理,確保只有授權(quán)人員可以查看敏感數(shù)據(jù)。
·  合規(guī)性:遵守相關(guān)的法律法規(guī)和行業(yè)標(biāo)準(zhǔn),如GDPR(歐盟通用數(shù)據(jù)保護(hù)條例),確保數(shù)據(jù)處理符合法律要求。
 
6. 教育與支持
· 學(xué)習(xí)資源:提供額外的學(xué)習(xí)資源鏈接或內(nèi)置教程,幫助用戶更好地理解他們的記錄數(shù)據(jù)和圖表背后的意義。
·  社區(qū)交流:創(chuàng)建一個安全的社區(qū)平臺,讓用戶之間可以交流經(jīng)驗和支持,增加互動性和動力。
·  客戶支持:提供在線客服或熱線電話,確保用戶在遇到問題時能夠得到及時的幫助。
 
7. 歷史回顧與趨勢分析
·  長期趨勢:提供長周期的趨勢分析圖表,幫助用戶回顧過去一段時間內(nèi)的變化和發(fā)展,如年度費用總結(jié)、多年情緒變化等。
·  模式識別:通過可視化手段幫助用戶發(fā)現(xiàn)隱藏的模式或規(guī)律,如消費習(xí)慣、情緒波動周期等。
·  里程碑標(biāo)記:在圖表中標(biāo)記重要的里程碑或轉(zhuǎn)折點,如重大事件發(fā)生的時間、重要決策做出的時刻等,增強回憶和反思的價值。
 
綜上所述,信息記錄類應(yīng)用的數(shù)據(jù)圖表設(shè)計不僅要具備清晰易讀、互動性強、個性化定制和實時更新的特點,還需要特別關(guān)注隱私與安全性,以及提供足夠的教育和支持資源。這些特性共同作用,可以幫助用戶更有效地管理和理解記錄的信息,從而促進(jìn)更好的自我管理和行為改變。
 
?? 
PART 7 
——————
結(jié)語

情緒價值在體驗設(shè)計中的應(yīng)用

ui設(shè)計分享達(dá)人 交互設(shè)計及用戶體驗

近兩年“情緒價值”這個詞,相信每個人應(yīng)該或多或少都有過接觸,從商業(yè)空間的營銷場景到后來滲透到每個領(lǐng)域、每個行業(yè)?!?/span>
 
先說下這個詞的概念,它源于心理學(xué)和社會學(xué), 本意為:“它指的是一個人或事物對他人情感狀態(tài)所產(chǎn)生的積極影響和價值。這種價值不僅僅體現(xiàn)在短暫的愉悅感受上,更包括長期的情緒穩(wěn)定、心理滿足和精神支持。” 
無論是在網(wǎng)紅還是在新型電商行業(yè)中,許多品牌強調(diào)的已經(jīng)不是單一的產(chǎn)品功能價值,而是增加了強調(diào)在消費體驗中為消費者帶來的快樂、滿足、歸屬感等等一些積極的情緒。這足以說明,無論是品牌、產(chǎn)品還是服務(wù)越來越注重為消費者提供情緒價值?!?/span>
 
而用戶體驗設(shè)計的本質(zhì)其實就是讓人在使用產(chǎn)品的過程中有非常愉悅的感覺,這一點與“情緒價值”這個詞的核心也有點不謀而合?!?/span>
 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
相信我們都有這樣的疑問:情緒價值在體驗設(shè)計中重要嗎,有什么具體的關(guān)系?在設(shè)計工作中的情緒價值到底重要嗎?情緒價值對產(chǎn)品使用的提升有哪些,具體要怎么做?相信看完下面的內(nèi)容,你應(yīng)該會對上面的問題有答案的?!?/span>
 
一、情緒價值對用戶體驗的影響
首先我們可能需要了解情緒價值能給用戶帶來什么?申晨老師在一次分享會上有提到過情緒價值的三個方向:愉悅感、保障感、專享感。三者由淺入深影響著用戶在使用產(chǎn)品時的情緒變化,對應(yīng)到體驗設(shè)計中是這樣的: 
  •  
    愉悅感→影響用戶的滿意度
  •  
    保障感→影響用戶的容忍度
  •  
    專享感→影響用戶的忠誠度
 
提升用戶滿意度
積極情緒的誘導(dǎo)
 
當(dāng)產(chǎn)品或服務(wù)能夠提供情緒價值時,會引發(fā)用戶的積極情緒。如下圖,三種UI會給用戶不同的情緒反饋,積極的情緒(右圖)往往會讓用戶駐足停留的更長一些,即便沒有需求,也會更愿意去花費一些時間去深入了解,進(jìn)而帶來一些拉新、瀏覽轉(zhuǎn)化等等數(shù)據(jù)的提升 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
滿足情感需求
 
許多產(chǎn)品和服務(wù)通過滿足用戶的情感需求來提供情緒價值。用戶在使用這些產(chǎn)品時,會因為產(chǎn)品所承載的情感因素而感到滿足,進(jìn)而提升對產(chǎn)品體驗的滿意度。例如: 
  •  
    社交媒體的分享被贊,是一種被關(guān)注、被認(rèn)可的情感需求;
  •  
    直播平臺app的互動效果,也是一種渴望互動的情感需求,以此刺激觀看者送出禮物。
改善用戶對負(fù)面體驗的容忍度
情緒緩沖作用
 
當(dāng)產(chǎn)品或服務(wù)出現(xiàn)一些小問題時,之前積累的情緒價值可以起到緩沖作用。例如: 
  •  
    在使用某工具產(chǎn)品時,友好的客服系統(tǒng)會給用戶比較積極的情緒積累,從而選擇包容一些比較小的錯誤;
  •  
    還有很多錯誤頁面的情感化設(shè)計,目的亦是如此。
引導(dǎo)解決問題的積極態(tài)度
 
如果用戶對產(chǎn)品或服務(wù)有情感上的依賴,當(dāng)遇到問題時,他們會更積極地尋找解決辦法,而不是抱怨和放棄。例如: 
  •  
    當(dāng)產(chǎn)品或服務(wù)偶爾出現(xiàn)卡頓現(xiàn)象時,其用戶社區(qū)氛圍很好,用戶之間可以互相交流使用經(jīng)驗和解決方案,并且軟件開發(fā)者也會積極回應(yīng)用戶的問題。這種情緒價值會讓用戶愿意配合開發(fā)者解決軟件卡頓問題,而不是直接卸載軟件。
 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
增強用戶的忠誠度
能夠在用戶和產(chǎn)品 / 服務(wù)之間建立起情感紐帶
 
  •  
    以蘋果產(chǎn)品為例,蘋果公司通過簡潔、易用的設(shè)計,以及高效的客戶服務(wù),為用戶提供了良好的情緒體驗。用戶在使用蘋果產(chǎn)品的過程中,會逐漸對品牌產(chǎn)生信任和喜愛。這種情感紐帶使得用戶在下次購買電子產(chǎn)品時,更有可能繼續(xù)選擇蘋果產(chǎn)品,忠誠度較高。
  •  
    一些會員制度也注重通過情緒價值來增強用戶忠誠度。例如,酒店的會員計劃會為會員提供優(yōu)先入住、免費升級房間、生日驚喜等服務(wù)。這些措施讓會員感受到特殊待遇,產(chǎn)生一種被重視的情緒,從而增強了用戶對酒店品牌的忠誠度。
推動口碑傳播
 
當(dāng)用戶從產(chǎn)品或服務(wù)中獲得了高情緒價值,他們更愿意向他人推薦。例如: 
  •  
    用戶在一家餐廳用餐,餐廳的服務(wù)人員熱情周到,菜品的呈現(xiàn)方式也很有創(chuàng)意,讓用戶在享受美食的同時獲得了愉悅的情緒體驗。這種用戶很可能會將這家餐廳推薦給朋友、家人,通過口碑傳播為餐廳帶來新的顧客。
  •  
    在線游戲如果能為玩家提供豐富的社交互動功能,讓玩家在游戲中結(jié)交朋友、組隊作戰(zhàn),獲得團(tuán)隊合作的快樂和成就感等情緒價值,玩家就會積極向周圍的人宣傳這款游戲,擴大游戲的用戶群體。
 
 
二、什么產(chǎn)品適合通過創(chuàng)造情緒價值提升使用體驗
 
C端產(chǎn)品:在創(chuàng)造情緒價值的應(yīng)用策略下,更容易獲得顯著成果
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
 
創(chuàng)造情緒價值這種有效的策略,尤其在面向個人用戶產(chǎn)品時,可以更顯著提升其使用體驗。例如: 
  •  
    社交類產(chǎn)品
    如微信、微博等,通過提供社交互動和情感連接,增強用戶的歸屬感和幸福感 
  •  
    內(nèi)容類產(chǎn)品
    如視頻平臺、音樂應(yīng)用等,通過提供豐富多樣的內(nèi)容,滿足用戶的情感和娛樂需求 
  •  
    娛樂類產(chǎn)品
    如游戲、盲盒等,通過游戲性和不確定性,激發(fā)用戶的興趣和情感投入 
  •  
    交易類產(chǎn)品
    如電商平臺、在線購物等,通過營造購物氛圍和提供個性化推薦,增加用戶的購物愉悅感 
  •  
    工具類產(chǎn)品
    如效率工具、健康管理應(yīng)用等,通過提供情感化的設(shè)計和反饋,提升用戶的使用體驗和滿意度 
 
那么 B 端產(chǎn)品是否同樣適用呢?答案無疑是肯定的。隨著企業(yè)數(shù)字化轉(zhuǎn)型的迅速推進(jìn),B 端產(chǎn)品在各個行業(yè)領(lǐng)域當(dāng)中得到了廣泛的應(yīng)用,用戶體驗的重要性越發(fā)顯著?!?/span>
 
 
B端產(chǎn)品:創(chuàng)造情緒價值更有利于提高忠誠度
 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
創(chuàng)造情緒價值的方式
 
  •  
    情感設(shè)計:通過設(shè)計元素和交互方式激發(fā)用戶的情感共鳴,增強用戶對產(chǎn)品的認(rèn)同感和忠誠度。例如,通過微動畫、個性化推薦和人性化提示,設(shè)計師可以為用戶創(chuàng)造愉悅的使用體驗
  •  
    個性化服務(wù)與定制化解決方案:了解客戶的獨特需求和痛點,提供個性化的建議和支持,幫助客戶解決實際問題,帶來更多情感上的滿足感
  •  
    優(yōu)化用戶體驗:注重產(chǎn)品設(shè)計和交互體驗優(yōu)化,提供良好的客戶服務(wù)和多種使用方式,不斷優(yōu)化產(chǎn)品功能,以提升用戶的整體使用體驗
 
 
創(chuàng)造情緒價值的重要性
 
  •  
    提升用戶滿意度和忠誠度:通過創(chuàng)造情緒價值,產(chǎn)品可以顯著提升用戶的滿意度和忠誠度,從而促進(jìn)續(xù)費和口碑傳播
  •  
    增強產(chǎn)品的市場競爭力:在功能相似的產(chǎn)品中,提供卓越的用戶體驗可以成為SaaS產(chǎn)品的核心競爭力,幫助企業(yè)在市場中脫穎而出
 
 
三、體驗設(shè)計師如何提升產(chǎn)品的“情緒價值”
我們可以從設(shè)計核心的三大階段(用戶研究階段、設(shè)計階段、測試與優(yōu)化階段)入手,來創(chuàng)造與提升產(chǎn)品的情緒價值 
 
用戶研究階段
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
 
深入了解用戶情感需求
開展定性研究
:通過用戶訪談、焦點小組等方式,挖掘用戶在使用產(chǎn)品時的情感期望。例如,在設(shè)計一款健身APP時,與健身愛好者進(jìn)行深入訪談,了解他們在健身過程中的情緒變化。可能會發(fā)現(xiàn),用戶在完成一次具有挑戰(zhàn)性的訓(xùn)練后,希望得到即時的鼓勵和成就感,這就為產(chǎn)品設(shè)計提供了情感方向。
 
進(jìn)行定量研究
:利用問卷調(diào)查等手段,收集用戶對現(xiàn)有產(chǎn)品情緒體驗的數(shù)據(jù)。比如,詢問用戶在使用某電商平臺時,購物流程是否讓他們感到焦慮或愉悅,以及在哪些環(huán)節(jié)有這種情緒。通過數(shù)據(jù)分析,找出用戶情緒的痛點和興奮點。
 
構(gòu)建用戶畫像與情緒場景
 
創(chuàng)建用戶畫像
根據(jù)用戶研究的結(jié)果,構(gòu)建詳細(xì)的用戶畫像,包括用戶的性格、生活方式、價值觀等因素,并且添加情緒維度。以一款旅行APP為例,其中一個用戶畫像可能是“年輕的探險愛好者,性格樂觀,追求刺激,在旅行前會充滿期待和興奮”。這樣的畫像有助于設(shè)計師站在用戶的角度思考情緒體驗。
描繪情緒場景
:針對不同的用戶畫像,描繪他們使用產(chǎn)品的情緒場景。比如,對于上述旅行APP的用戶,在規(guī)劃行程時,他可能會在APP上查找小眾景點,此時的情緒是好奇和興奮;在旅途中使用導(dǎo)航功能時,希望得到精準(zhǔn)的指引,情緒是焦慮或安心,取決于導(dǎo)航的準(zhǔn)確性。這些情緒場景為后續(xù)設(shè)計提供了具體的目標(biāo)。
 
 
設(shè)計階段
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
視覺設(shè)計方面
色彩運用
:色彩對情緒有著強烈的影響。例如,暖色調(diào)如紅色和橙色通常傳達(dá)活力、熱情的情緒,適合用于激發(fā)用戶興趣的界面元素,如促銷活動頁面;冷色調(diào)如藍(lán)色和綠色則給人冷靜、可靠的感覺,可用于數(shù)據(jù)展示或需要用戶集中注意力的區(qū)域。在設(shè)計金融產(chǎn)品界面時,使用藍(lán)色為主色調(diào)可以讓用戶感到安全和信任。
圖形設(shè)計
:簡潔、易懂的圖形能夠快速傳達(dá)信息并引發(fā)積極情緒。在圖標(biāo)設(shè)計上,要符合用戶的認(rèn)知習(xí)慣。例如,在社交產(chǎn)品中,使用微笑的表情圖標(biāo)表示點贊或喜歡,用戶很容易理解并產(chǎn)生愉悅的情緒。同時,利用有趣的插畫或動畫可以增加產(chǎn)品的趣味性。如在兒童教育產(chǎn)品中,用生動的動畫來講解知識,能夠吸引孩子的注意力并讓他們感到快樂。
排版布局
:合理的排版可以提升用戶的閱讀體驗和情緒。清晰的標(biāo)題和正文層次,適當(dāng)?shù)奈淖珠g距和行高,能讓用戶感到舒適。在新聞類產(chǎn)品中,采用模塊化的排版,將不同的新聞內(nèi)容清晰劃分,使用戶在瀏覽時不會感到混亂,從而減少煩躁情緒。
 
交互設(shè)計方面
反饋機制設(shè)計
:為用戶的操作提供及時、明確的反饋可以提升情緒價值。例如,當(dāng)用戶點擊一個按鈕時,按鈕會有短暫的變色或動畫效果,讓用戶知道操作已被接收。在加載頁面時,使用有趣的加載動畫代替單調(diào)的進(jìn)度條,如旋轉(zhuǎn)的小圖標(biāo)或者跳動的小球,能夠緩解用戶等待的焦慮情緒。
操作流程優(yōu)化
:簡化復(fù)雜的操作流程,減少用戶的認(rèn)知負(fù)擔(dān)和操作失誤。在移動支付產(chǎn)品中,盡量減少支付步驟,讓用戶能夠快速完成支付,避免因流程繁瑣而產(chǎn)生煩躁情緒。同時,可以增加一些引導(dǎo)性的交互,如新手引導(dǎo)教程,幫助用戶輕松上手產(chǎn)品,提升用戶的自信心和滿意度。
個性化與定制化設(shè)計
:根據(jù)用戶的喜好和行為習(xí)慣,提供個性化的交互體驗。例如,音樂產(chǎn)品可以根據(jù)用戶的收聽歷史推薦相似風(fēng)格的歌曲,用戶會因為產(chǎn)品的貼心而感到愉悅。并且允許用戶對界面布局、主題等進(jìn)行定制,讓用戶有更多的掌控感,滿足他們的自我表達(dá)需求。
 
內(nèi)容設(shè)計方面
文案撰寫
:使用友好、易懂的文案可以拉近與用戶的距離。在產(chǎn)品提示信息中,避免使用生硬的專業(yè)術(shù)語,而采用親切的語氣。例如,在一款智能家居產(chǎn)品中,當(dāng)設(shè)備連接成功時,顯示“哇,您已經(jīng)成功連接啦,現(xiàn)在就可以享受智能生活啦”,這樣的文案會讓用戶感到輕松和愉快。同時,文案的風(fēng)格要與產(chǎn)品的定位和目標(biāo)用戶相匹配。
內(nèi)容策略
:提供有價值、有趣的內(nèi)容可以提升情緒價值。在知識付費產(chǎn)品中,確保課程內(nèi)容不僅有深度,而且講解方式生動有趣。對于內(nèi)容社區(qū)產(chǎn)品,鼓勵用戶分享積極向上的內(nèi)容,如生活中的小美好、勵志故事等,營造一個充滿正能量的社區(qū)氛圍,讓用戶在瀏覽內(nèi)容時感到愉悅和鼓舞。
 
 
測試與優(yōu)化階段
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
可用性測試與情緒評估
進(jìn)行可用性測試
:在產(chǎn)品原型階段,邀請用戶進(jìn)行可用性測試,觀察用戶的操作行為和情緒反應(yīng)。例如,在測試一款辦公軟件的新功能時,注意用戶是否能夠順利使用,以及在使用過程中是否出現(xiàn)困惑、煩躁等情緒。可以通過用戶的面部表情、言語反饋等方式收集情緒信息。
情緒評估工具
:利用情緒評估工具,如情感化可用性量表(UEQ)等,對用戶的情緒體驗進(jìn)行量化評估。UEQ可以測量用戶對產(chǎn)品的吸引力、易用性、可靠性等維度的情緒感受,通過數(shù)據(jù)分析,找出需要優(yōu)化的情緒體驗點。
 
根據(jù)反饋優(yōu)化設(shè)計
迭代設(shè)計
:根據(jù)用戶測試的反饋,對產(chǎn)品的視覺、交互和內(nèi)容設(shè)計進(jìn)行迭代優(yōu)化。例如,如果用戶在測試中表示某個界面元素的顏色讓人感到刺眼,設(shè)計師可以調(diào)整顏色方案。如果用戶對某個操作流程不理解,就優(yōu)化操作引導(dǎo)。
持續(xù)關(guān)注情緒反饋
:產(chǎn)品上線后,持續(xù)收集用戶反饋,關(guān)注用戶情緒價值的變化。隨著用戶需求的變化和市場環(huán)境的改變,不斷調(diào)整產(chǎn)品設(shè)計,以保持和提升產(chǎn)品的情緒價值。例如,在節(jié)日期間,對產(chǎn)品界面進(jìn)行節(jié)日主題的裝飾,為用戶提供新鮮感和節(jié)日氛圍帶來的愉悅情緒。
 
四、情緒價值是否具備量化條件
可以通過以下方法對其進(jìn)行量化計算
 
情感化可用性量表
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
原理:UEQ是一種廣泛用于量化用戶對產(chǎn)品情緒體驗的工具。它通過一系列的問卷題目來測量用戶對于產(chǎn)品的吸引力、易用性、效率、可靠性和刺激度等多個維度的感受。例如,在吸引力維度上,會詢問用戶對于產(chǎn)品外觀、風(fēng)格是否感到喜歡;在易用性維度,會涉及用戶操作產(chǎn)品時是否感到輕松、方便等問題?!?/span>
 
應(yīng)用:在一款產(chǎn)品/功能的用戶體驗測試中,使用UEQ可以收集用戶對該應(yīng)用在不同維度的情緒評價。通過對大量用戶反饋的數(shù)據(jù)統(tǒng)計,得出該應(yīng)用在各個維度的量化得分,比如吸引力維度得分較高,說明產(chǎn)品在視覺等方面能引發(fā)用戶積極情緒,而如果易用性維度得分較低,則可能表示產(chǎn)品的操作流程等會讓用戶產(chǎn)生負(fù)面情緒?!?/span>
 
 
凈推薦值(NPS)與情緒關(guān)聯(lián)量化
 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
 
原理:凈推薦值是通過詢問用戶“您是否愿意將這個產(chǎn)品推薦給其他人”來衡量用戶忠誠度。雖然NPS本身不是直接對情緒價值的量化,但它與用戶的情緒體驗密切相關(guān)。當(dāng)用戶體驗到較高的情緒價值,如愉悅、滿足等,他們更有可能成為推薦者,NPS得分就會升高?!?/span>
 
應(yīng)用:通過定期收集用戶的NPS數(shù)據(jù),并且結(jié)合用戶對功能使用體驗的詳細(xì)反饋(包括對產(chǎn)品、服務(wù)、售后等環(huán)節(jié)的情緒感受),可以間接量化情緒價值對用戶忠誠度的影響。例如,如果發(fā)現(xiàn)NPS得分高的用戶在評價中經(jīng)常提及購物過程中的快樂情緒和優(yōu)質(zhì)服務(wù)體驗,就可以推斷出情緒價值在提升用戶忠誠度方面起到了積極作用?!?/span>
 
 
 
  1.  
    生理指標(biāo)測量
 
情緒價值在體驗設(shè)計中的應(yīng)用
 
 
原理:情緒會引發(fā)身體的生理反應(yīng),如心率、皮膚電導(dǎo)率、瞳孔大小等變化。通過專業(yè)的設(shè)備可以測量這些生理指標(biāo),以此來推斷用戶的情緒狀態(tài)。例如,當(dāng)用戶感到興奮或緊張時,心率會加快;當(dāng)他們感到好奇或?qū)Wr,瞳孔可能會放大?!?/span>
應(yīng)用:在用戶體驗實驗室中,測試用戶在使用虛擬現(xiàn)實(VR)游戲的情緒體驗。通過佩戴可以監(jiān)測心率和皮膚電導(dǎo)率的設(shè)備,觀察用戶在游戲不同場景下的生理指標(biāo)變化。如果在某個刺激的戰(zhàn)斗場景中,用戶的心率明顯上升,皮膚電導(dǎo)率也增加,就可以推斷用戶處于興奮或者緊張的情緒狀態(tài),從而量化游戲場景對用戶情緒的激發(fā)程度?!?/span>
 
雖然有量化方法,但也只有部分可被量化,完全精準(zhǔn)量化還存在一定的挑戰(zhàn) 
 
 
難以完全量化的原因
情緒的復(fù)雜性和主觀性
個體差異:不同用戶對同一產(chǎn)品或體驗的情緒反應(yīng)存在很大差異。例如,對于一款具有挑戰(zhàn)性的游戲關(guān)卡,一些玩家可能會因為克服困難而感到興奮和滿足,而另一些玩家可能會因為覺得太難而產(chǎn)生沮喪情緒。這種個體差異使得很難用統(tǒng)一的標(biāo)準(zhǔn)來量化情緒價值。
文化背景影響:文化因素也會對情緒價值的感受產(chǎn)生影響。在某些文化中,含蓄的情感表達(dá)是常態(tài),而在另一些文化中,人們可能更傾向于直接的情感反應(yīng)。比如,在日本文化中,用戶可能對產(chǎn)品的精致、細(xì)膩的設(shè)計有更深刻的情感共鳴,而西方文化中的用戶可能更看重產(chǎn)品的創(chuàng)新性和個性化帶來的情緒體驗。
 
情緒與情境的動態(tài)變化
使用場景的多樣性:用戶在不同的使用場景下對產(chǎn)品的情緒價值感受不同。例如,一個音樂播放軟件,用戶在運動場景下可能更關(guān)注節(jié)奏強烈的音樂帶來的激勵情緒,而在睡前場景下則更看重舒緩音樂營造的放松情緒。這種隨場景變化的情緒體驗難以用固定的量化指標(biāo)來衡量。
 
時間因素:用戶對產(chǎn)品的情緒體驗也會隨著時間而變化。最初接觸產(chǎn)品時的新鮮感可能會帶來積極情緒,但隨著時間推移,如果產(chǎn)品缺乏更新或出現(xiàn)問題,情緒可能會轉(zhuǎn)變?yōu)橄麡O。而且情緒的產(chǎn)生和消退過程很難精確量化,例如很難確定用戶從感到滿意到產(chǎn)生厭煩的具體時間節(jié)點。
雖然難以量化,但情緒價值在實際應(yīng)用中發(fā)揮的作用還是很大的?!?/span>
 
 
結(jié)束語
在體驗設(shè)計的廣闊領(lǐng)域中,情緒價值猶如一股無形的力量,悄然影響著用戶與產(chǎn)品之間的每一次互動。它不僅僅是愉悅感、保障感和專享感的簡單疊加,更是用戶在深層情感層面與品牌建立起的穩(wěn)固紐帶。通過精心設(shè)計的用戶體驗,我們能夠觸動用戶的情感,激發(fā)他們的共鳴,從而在用戶心中留下深刻而持久的印記。


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

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

ui設(shè)計分享達(dá)人 交互設(shè)計及用戶體驗

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


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

產(chǎn)品設(shè)計如何利用心理學(xué)

ui設(shè)計分享達(dá)人 設(shè)計思維

產(chǎn)品設(shè)計的成功除了依賴設(shè)計方案和技術(shù)實現(xiàn),還與用戶的心理密切相關(guān)。用戶心里決定了我們用怎樣的設(shè)計策略解決問題。我們常認(rèn)為人們做決策時是理性的,但其實用戶行為經(jīng)常是非理性,會受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測和引導(dǎo)用戶行為,優(yōu)化產(chǎn)品體驗,提高用戶的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價值最大化。
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計如何利用心理學(xué)


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

“好的設(shè)計組件”在搜索設(shè)計場景中的定義

ui設(shè)計分享達(dá)人 設(shè)計思維

 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
從網(wǎng)上搜索設(shè)計組件,我們能找到各種對外公開的設(shè)計組件庫,同樣還有不少或概括或詳細(xì)的文章,手把手教你“如何搭建一個好的設(shè)計組件庫”,但這些方法論很少探討面對C端組件頻繁增改、設(shè)計規(guī)范動態(tài)調(diào)整,如何高效賦能業(yè)務(wù)設(shè)計交付的相關(guān)內(nèi)容,但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問題。
 
搜索是一個“牽一發(fā)而動全身”的業(yè)務(wù),每一個微小的設(shè)計細(xì)節(jié)都有可能影響各個業(yè)務(wù)的數(shù)據(jù)指標(biāo),一個“好的設(shè)計組件庫”需要以一種潛移默化的方式讓設(shè)計師掌握設(shè)計規(guī)范,完成合規(guī)的設(shè)計,從這個角度而言它應(yīng)該比較
「好懂」
 
而作為服務(wù)于整個設(shè)計團(tuán)隊的公用設(shè)計組件庫,面對每月數(shù)以萬計的調(diào)用次數(shù),它必須保障最基本的易用性,應(yīng)該非常
「好用」
。
 
同時,面對頻繁迭代,“好的設(shè)計組件”還需要保持最快的更新速度,為各個橫向團(tuán)隊提供正確的樣式,從這個角度來說它還要
「好維護(hù)」
。
 
因此,
「好懂、好用、好維護(hù)」
是搜索設(shè)計語境下,對一個“好的設(shè)計組件”的定義。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
接下來,我們將從這三個「好」入手,分享搜索設(shè)計組件庫在升級過程中的一些思考,希望能和大家共同探討。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
“萬丈高樓平地起”,我們先來說說如何從零開始構(gòu)建一個既符合設(shè)計規(guī)范又易于理解的設(shè)計組件。
 
首先,在搭建組件時,我們可以考慮采用
多層嵌套
的方式,即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復(fù)操作,甚至還能在解綁組件時,通過選中內(nèi)部的子組件圖層進(jìn)行解綁,大大簡化了搭建和使用雙方的操作流程。
 
在多層嵌套的思路下,我們可以進(jìn)一步用
“底層靈活、上層收斂”
來指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣,能夠支持大部分的狀態(tài)切換,而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示),以降低超出規(guī)范設(shè)計的可能。
 
具體的搭建流程可以大致分為三步:
場景收集和分析、搭建基本變體組、拓展高階變體組
。
 
我們將通過視頻組件搭建的生動案例,具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫,使得組件本身既足夠靈活,又能起到足夠的約束作用。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
在著手搭建某類組件時,我們首先通過規(guī)范確認(rèn)和場景遍歷,廣泛收集各類變體。隨后,從我們能想到的所有維度出發(fā),對這些變體進(jìn)行細(xì)致定義。這樣,我們就能得到一張詳盡描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等,而第一行則羅列出各種維度,如寬度、比例等。通過這種方法,我們可以將原本零散、雜亂的組件變體描述,系統(tǒng)地歸納整理成一張清晰明了的表格。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
表格通過不同維度來唯一確定一個變體,這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致,常見特性則涵蓋了最常見的分類性質(zhì),如寬度、高度、數(shù)量和優(yōu)先級等,而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。
 
在搭建組件時,我們可以遵循
「共性-常見特性-業(yè)務(wù)特性」
順序,這樣的順序有助于降低理解成本,因為最符合心智的分類被置于外層,同時底層的組件又保持了足夠的靈活性,便于切換各種變量。對于業(yè)務(wù)特性,我們可以根據(jù)實際情況靈活處理,既可以將其作為基本組件的延展,也可以不將其納入組件范疇。
 
以視頻組件為例,我們從表格中獲取的信息如下:
 
  •  
    視頻尺寸及其組合是最符合用戶心智的變體選擇;
  •  
    播放狀態(tài)是所有變體的共有性質(zhì);
  •  
    自動播放情況與業(yè)務(wù)相關(guān),但不一定需要在組件庫中呈現(xiàn);
  •  
    高階組件僅涉及少部分尺寸的組件,應(yīng)在完成基本組件搭建后再進(jìn)行。
 
據(jù)此,我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級:
 
  1.  
    播放狀態(tài)作為共性,應(yīng)首先搭建;
  2.  
    基本組件尺寸和組合是最符合用戶心智的變體選擇,應(yīng)緊隨其后;
  3.  
    高階組件在完成基本組件搭建后再進(jìn)行。
 
值得注意的是,“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則,我們將其插入到搭建播放狀態(tài)之前。因此,視頻組件的最終搭建流程為:
 
  1.  
    封面槽位;
  2.  
    播放狀態(tài);
  3.  
    基本組件尺寸和組合;
  4.  
    高階組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成對視頻組件搭建的分析,我們就可以有條不紊地開始搭建組件了。先搭建基本組件視頻組件,再用基本組件搭建高階組件。這一步驟雖然為大家所熟知,但仍需格外注意,如配置項的設(shè)置要力求合理,也可以融入設(shè)計規(guī)范和使用規(guī)范,同時還應(yīng)將一些搭建過程中的零散組件集中收納避免被調(diào)用。關(guān)于這些具體的注意事項,我們將在后續(xù)部分進(jìn)行詳細(xì)闡述。
 
至此我們完成了組件搭建的基本流程,一個達(dá)到及格線的視頻組件就誕生了。據(jù)統(tǒng)計,優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作!
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成了一個基本組件的搭建后,我們可以轉(zhuǎn)換視角,從使用的角度來審視并檢查這個組件。
 
我們期望,從插入組件變體、切換組件配置,再到最后的解綁組件,整個流程都能縱享絲滑且穩(wěn)定可靠,確保業(yè)務(wù)設(shè)計師在使用過程中獲得最佳體驗。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
我們可以一步步來審視組件的使用過程。首先是插入組件,據(jù)觀察,通常有三種方式,①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對應(yīng)組件并插入;②通過查閱設(shè)計規(guī)范,鎖定所需的變體后復(fù)制粘貼;③選中一個不需要的組件,通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。很明顯,在這個過程中依賴的是組件的精準(zhǔn)搜索和快速定位。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
為了提升搜索精度,我們可以從組件命名入手,采用中、英、數(shù)字結(jié)合的方式,實現(xiàn)模糊匹配;也可以在發(fā)布時隱藏不希望被調(diào)用的組件,以減少無用的搜索結(jié)果。如果組件是采用前文提到的“多層嵌套”方式搭建的,我們可以添加“Preferred”子組件,這樣在切換時會優(yōu)先展示這些子組件,這個功能在切換圖標(biāo)時尤為實用。
 
對于習(xí)慣邊查閱設(shè)計規(guī)范邊使用組件的設(shè)計師,我們增加了更多實際使用的正誤案例,這些案例直觀展示了組件變體的正確選擇和使用方式,進(jìn)一步降低了規(guī)范的理解成本,有效輔助設(shè)計決策。同時,我們專門維護(hù)了一個固定區(qū)域,用于平鋪展示所有組件變體。為了確保能夠輕松點選,我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計師一目了然地看到所有變體,從而快速選擇所需的組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
在組件配置階段,有三項注意點能讓組件更加易用,即“重視組件的可視化效果、設(shè)置高效易用的配置項、貼心地保存修改”。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
考慮到C端組件的多樣性和用戶的使用習(xí)慣,我們應(yīng)避免使用過于復(fù)雜的分組方式。相反,應(yīng)更注重組件的樣式展示,并盡量簡化組件的層級結(jié)構(gòu)。這樣,設(shè)計師在使用時能夠更直觀地看到組件的外觀,而無需深入復(fù)雜的層級去查找。
 
另外值得注意的是,F(xiàn)igma會默認(rèn)用組件集合中最左上角的組件生成預(yù)覽樣式,因此應(yīng)當(dāng)把視覺上最有代表性的變體放在左上角,這個效果在切換變體(Swap instance)時很重要,因為目前在該面板中沒法查看組件細(xì)節(jié),只能靠縮略圖和名稱來推測是哪個組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
其次對于配置項的設(shè)置也大有講究,業(yè)界有組件庫為了實現(xiàn)C2D2C,從源頭上將設(shè)計組件和前端組件的配置項打平,這是不錯的思路,但有可能會提升設(shè)計側(cè)的理解成本。針對搜索業(yè)務(wù)的特殊語境,我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項,將所有允許自定義的配置盡可能外露,并清晰地說明修改限制,如字?jǐn)?shù)限定、選項個數(shù)等,這樣能夠在使用的過程中強化業(yè)務(wù)設(shè)計師對規(guī)范的掌握。
 
另一個常常被忽視的關(guān)鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率,建議對選項和選項之間,以及外層的不同配置項,都按照一定的邏輯順序進(jìn)行排序。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
最后一點,我們稱之為
“貼心地保存修改”
機制,這個針對的是文字修改的場景。
 
在實際操作中,使用一個組件可能需要對多個配置項進(jìn)行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時,已修改的文字會被重置。這時文本屬性(text property)的設(shè)置就顯得尤為重要,它能夠記憶并保存修改過的文字內(nèi)容,從而免于重復(fù)輸入。
 
還有一些情況是,某個組件變體實際上并沒有與某個值相對應(yīng)的組件(盡管Figma機制允許選擇該值),用戶切換后就會發(fā)現(xiàn)組件完全變了,只能撤回。為了避免這類情況,建議使用另外的標(biāo)記來表明組件某個設(shè)置項是不可切換的。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
完成了組件的搭建和檢查,接下來讓我們聚焦于組件的日常維護(hù)。
 
這一環(huán)節(jié)可以從兩個維度展開,一是依托中臺的日常數(shù)據(jù)監(jiān)控進(jìn)行維護(hù),二是通過團(tuán)隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側(cè)重協(xié)作流程和機制上的建設(shè),在本文中我們不做更多展開,重點討論前者。
 
數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑:View libraries-Analytics),看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù),這些數(shù)據(jù)不直接反映組件的優(yōu)劣,但如果我們觀測到某個組件解綁率偏高,我們會考慮直接把它
作為模板
而不是創(chuàng)建成組件。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
 
總結(jié)
 
以上是百度搜索設(shè)計團(tuán)隊在設(shè)計組件庫升級過程中的心得分享,包括搜索業(yè)務(wù)對于“好的設(shè)計組件”的訴求,以及一些搭建和優(yōu)化組件的實用思路,核心是探討如何從組件庫建設(shè)的角度入手,成功助力團(tuán)隊提升設(shè)計資產(chǎn)消費效率。
 
關(guān)于設(shè)計組件庫,我們有一些新思考
 
 
 
當(dāng)前我們已經(jīng)完成設(shè)計資產(chǎn)工程化的前序環(huán)節(jié),我們對設(shè)計資產(chǎn)的升級和探索并沒有結(jié)束,未來我們將持續(xù)探索設(shè)計系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機會,通過豐富消費途徑,實現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。這部分內(nèi)容后續(xù)有機會也將會和大家見面,請大家期待!
 
感謝閱讀,以上內(nèi)容均由百度MEUX團(tuán)隊原創(chuàng)設(shè)計,以及百度MEUX版權(quán)所有,轉(zhuǎn)載請注明出處,違者必究,謝謝您的合作。申請轉(zhuǎn)載授權(quán)后臺回復(fù)【轉(zhuǎn)載】。


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

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

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

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


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

日歷

鏈接

個人資料

存檔