欧美日韩国产女主播|久久青春操无码日韩va国产va|国语自产自偷拍|少妇视频一区在线精品 亚洲中文字幕无码vs色欲_在线观看视频免费国产成人_精品无码久久中文字幕_日韩AV中文字幕网址

首頁

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

杰睿

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


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

蘭亭妙微(www.bjlzjm.com.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í)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

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

杰睿

一、項(xiàng)目背景

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

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

二、項(xiàng)目概述

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

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

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

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

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

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

level2_img.png

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

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

后.png

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

前.png

蘭亭妙微(www.bjlzjm.com.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í)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

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

杰睿

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

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

小卡片大布局-帶你掌握卡片設(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í)際場景和內(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)容分層次組合在一起,從而讓頁面看起來更有秩序感??ㄆǔS蓸?biāo)題、內(nèi)容描述、圖像、按鈕等元素組成,自帶簡約和易用的屬性,方便用戶快速理解和操作。
小卡片大布局-帶你掌握卡片設(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)容的長短等因素。例如,如果卡片的頂部是標(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í)控件或長期固定顯示。此外,懸浮卡片能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,多則展示全部內(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)。
卡片化繁為簡,將不同類型的元素有效地組織!在一起,形成一個(gè)封閉式的視覺形式。每一個(gè)卡片之間都具有獨(dú)立性不會(huì)相互干擾,它們保持著一致的外觀,讓界面看上去干凈和簡潔。例如 App Store 和去哪兒賦予每一個(gè)卡片一個(gè)主題,以簡單明快的內(nèi)容表現(xiàn)形式吸引用戶的注意力,簡潔、連貫的卡片也避免了因?yàn)閮?nèi)容太長讓用戶產(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ù)分割線的不同長度可以分為半分割線式列表、縮進(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),它非常適合于形式簡單的信息內(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),使用簡單的列表式設(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)化繁為簡,去除一切與內(nèi)容無類的裝飾性元素,旨在突出內(nèi)容本身、好讓重要的信息及功能更容易被關(guān)注,讓用戶更加清晰和直觀地進(jìn)行瀏覽。在無框式設(shè)計(jì)中,你幾乎看不到區(qū)分內(nèi)容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
無框式設(shè)計(jì)的優(yōu)點(diǎn)
1.極簡主義風(fēng)格。
相比卡片式設(shè)計(jì)追求“多”,無框式設(shè)計(jì)則追求“少”,即用最簡單的形式和最理性的設(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)一的,沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框,這種簡潔的設(shè)計(jì)就會(huì)被打部精王德商處可見那些細(xì)碎的分副線或描邊,使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面,微博和騰訊新聞就是這樣的設(shè)計(jì)。
五、卡片的應(yīng)用場景
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
瀑布流
瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì),它最大的優(yōu)點(diǎn)是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
信息流
信息流主要通過文字、圖片或視頻等媒介來展示較長的內(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ì)是一種重要的布局方式,它以其簡潔性、模塊化和可自定義特性而備受設(shè)計(jì)師與使用者青睞。以下是卡片設(shè)計(jì)時(shí)需要遵循的一些關(guān)鍵原則:
小卡片大布局-帶你掌握卡片設(shè)計(jì)攻略
 
 
一、簡潔清晰原則
信息精煉:每張卡片應(yīng)僅展示關(guān)鍵信息或功能,防止信息負(fù)荷過大,確保用戶能夠快速獲取所需內(nèi)容。
視覺元素簡潔:避免在卡片上添加過多的裝飾性元素,保持設(shè)計(jì)的簡潔性。
二、一致性原則
視覺風(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)簡短明了,用于說明卡片的內(nèi)容;正文部分則應(yīng)簡潔精煉,避免冗余信息。
卡片設(shè)計(jì)在UI界面中扮演著重要角色,它不僅能夠提升用戶體驗(yàn),還能增強(qiáng)信息的可讀性和可理解性。因此,在進(jìn)行卡片設(shè)計(jì)時(shí),應(yīng)遵循簡潔清晰、一致性、層次性、交互體驗(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)用場景和更豐富的用戶體驗(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)注明出處。

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

杰睿

建筑設(shè)計(jì)師尤哈尼·帕拉斯瑪說、簡約并非簡單,它是通過深思熟慮后對(duì)事物本質(zhì)的準(zhǔn)確把握。知其然、知其所以然。這次文章會(huì)盡量簡潔一點(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)容量來考慮。簡單的確認(rèn)或通知適合用彈窗、需要展示大量內(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)。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的。總的來說核心是提升效率、保證我們用戶好的體驗(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í)行的操作。
簡化操作流程
對(duì)于某些復(fù)雜的操作或任務(wù),彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標(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)營彈窗的設(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.bjlzjm.com.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í)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

杰睿

引言
設(shè)計(jì)應(yīng)該是感性的還是理性的?設(shè)計(jì)是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會(huì)引起爭議無數(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)、市場趨勢(shì)和技術(shù)可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設(shè)計(jì)與藝術(shù)的顯著區(qū)別。
設(shè)計(jì)的兩面性:理性決策與感性表達(dá)
 
 
站在感性“對(duì)立面”的理性,將設(shè)計(jì)視為一項(xiàng)工程或科學(xué),力求流程化和系統(tǒng)化,講究方法論,注重各方面的調(diào)研,一切動(dòng)作因問題存在而起,以問題解決而終
。甚至在實(shí)際場景中持續(xù)觀察作品表現(xiàn),以期得出可復(fù)用的設(shè)計(jì)模型或定律,為后人更加高效地解決類似問題提供幫助。
所以,從解決問題的本質(zhì)屬性出發(fā),理性應(yīng)該才是設(shè)計(jì)的底色。數(shù)據(jù)驅(qū)動(dò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ù)測。當(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ì)于簡單需求,不用過多的理性分析,直接設(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ì),再簡單的項(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),追求效率與極簡認(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ū)硇院透行缘囊笥兴煌贐端產(chǎn)品中,理性占據(jù)主導(dǎo)地位,而C端產(chǎn)品更強(qiáng)調(diào)感性。從設(shè)計(jì)最終所呈現(xiàn)的效果來看,這種觀點(diǎn)在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關(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)停留在非此即彼或既要也要的簡單認(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)注明出處。

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

杰睿

微動(dòng)效在產(chǎn)品設(shè)計(jì)中的運(yùn)用已經(jīng)非常普及了,無論是在圖標(biāo)還是界面場景中,都運(yùn)用得很普遍。通過動(dòng)效的輔助不僅可以提升設(shè)計(jì)情感化,也能解決更為復(fù)雜的交互場景,讓設(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é)合場景的情感化動(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é)合場景的情感化動(dòng)效
根據(jù)不同的業(yè)務(wù)場景進(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 空間感營造的設(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)品從簡單的靜態(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ù)雜功能的交互場景,探索動(dò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)注明出處。
 

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

杰睿

色彩在我們?nèi)粘TO(shè)計(jì)中起著定生死的作用,它是設(shè)計(jì)的靈魂,舒適的色彩搭配可以讓設(shè)計(jì)師一遍定稿,感覺在自己的設(shè)計(jì)生涯中,大部分都是在與色彩的博弈中度過的,雖然客戶可能不懂色彩原理,可是客戶天生都是色彩的感受家,什么樣的色彩搭配美,通常他們瞄一眼就會(huì)有定論,不用你去辯解太多,不好的搭配,縱使有千萬種理由,也說服不了客戶,所以好好研究色彩以及每一種色彩傳遞的情感對(duì)我們做好設(shè)計(jì)至關(guān)重要。
 
7大色彩技巧讓你界面更吸睛
 
 
 
目錄
一、 色彩的定義
二、 色彩的三屬性
三、 色彩的三種常見模型
四、 色彩的語意及它的應(yīng)用
五、 不同場景下的色彩應(yīng)用
六、 色彩在B端設(shè)計(jì)中的作用
七、 B端色彩設(shè)計(jì)使用的原則
 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
一、色彩的定義?
1、物理學(xué)角度
色彩是光的屬性,當(dāng)光波通過物體時(shí),物體會(huì)吸收某些波長的光,而反射或透射其他波長的光,這些被反射或透射的光波長度決定了我們看到的顏色。
 
2、心理學(xué)角度
色彩是人腦對(duì)光波長的視覺感知,不同的波長刺激視網(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)、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時(shí),同一色相在受光強(qiáng)弱或者物體對(duì)光的吸收、反射性能不同的情況下,會(huì)呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會(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)用這樣的色彩模型,簡單實(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)橛〕鰜淼男Ч钍亲钚〉模亲羁拷O(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)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應(yīng)用
綠色代表平靜、和諧與生機(jī)。綠色常與大自然相關(guān),給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標(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í)也帶有神秘莫測的氛圍,與夢(mèng)幻、創(chuàng)造力等情感相關(guān)。
美柚的主要用戶是女性,紫色在色彩心理學(xué)中常被認(rèn)為具有優(yōu)雅、神秘、浪漫的特質(zhì),這些特質(zhì)與女性的審美和情感需求相契合,能夠吸引女性的關(guān)注。
7大色彩技巧讓你界面更吸睛
 
 
 
 
8、白色的語意及應(yīng)用
 
白色代表著純潔、神圣、信任、安靜、樸素和雅致,是一種充滿純潔的顏色,它可以跟任何顏色和諧的共生。
以下是熊掌ID的登錄界面,顏色用了大量的白與灰,簡潔又不失大氣,傳遞出了一種質(zhì)樸、雅致的感覺。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
五、不同場景下的色彩應(yīng)用
 
1、商場的色彩為什么總是多彩熱烈的?
 
? 吸引顧客注意力
在眾多商業(yè)場所中脫穎而出,色彩鮮艷的商場外觀和內(nèi)部裝飾更容易在人們的視線中凸顯出來,吸引過往行人的目光,激發(fā)他們的好奇心和探索欲。
 
確實(shí)多彩的顏色更加容易引起我的關(guān)注,這不看到商場的美圖,都忍不住拍照留念了,成功的吸引了我的目光。
7大色彩技巧讓你界面更吸睛
 
 
 
? 增強(qiáng)可見性
即使在較遠(yuǎn)的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠(yuǎn)遠(yuǎn)的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進(jìn)入一個(gè)色彩豐富的商場時(shí),會(huì)感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設(shè)計(jì)很好,墻面采用極具誘惑力的顏色與美食,把小小實(shí)物十倍放大,增加了視覺看點(diǎn),讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進(jìn)一個(gè)多彩熱烈的商場,可以暫時(shí)擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設(shè)計(jì),引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠(yuǎn)離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導(dǎo)消費(fèi)行為
商場通常會(huì)使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點(diǎn)商品,對(duì)于一些重點(diǎn)推薦的商品或促銷活動(dòng),商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導(dǎo)他們進(jìn)行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達(dá)個(gè)性和風(fēng)格
不同的商場可能有不同的品牌定位和目標(biāo)客戶群體。通過選擇特定的色彩組合,商場可以傳達(dá)出自己的個(gè)性和風(fēng)格,吸引與之相符的顧客。
 
6.2 增強(qiáng)品牌記憶度
獨(dú)特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識(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端使用場景中,用戶可能需要長時(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 端市場中廣泛使用藍(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ì)成本,這也是自己通過長期實(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)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設(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í)慣,商場需要吸引人眼球、刺激消費(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)營的監(jiān)測平臺(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è)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗(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.bjlzjm.com.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í)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

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

杰睿

 
聊聊關(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.bjlzjm.com.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í)成長,咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

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

杰睿

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(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í)還挺簡單了。因?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、文字大小:14(大部分)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、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡單)、一般都是科技風(fēng)
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對(duì)是很簡單的部分把、因?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í)還簡單的、首先你要明白柵格在我們的設(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è)色
 
配色確定:我一般是找競品、或者優(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ù)增長規(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ì)原則,制定了簡易好記的透明度數(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é)奏、愉悅。
 
設(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ì)簡單的、也是要做到風(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ī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對(duì)產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺(tái)彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對(duì)很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點(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)中、大部分的場景都會(huì)使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡潔明了、清晰高效、適應(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)簡單、精準(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ī)范。那就去直接用的場的設(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、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會(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)注明出處。

日歷

鏈接

個(gè)人資料

存檔