九九色综合_性69交片免费看_亚洲一区二区三区久久精品_精品一久久_欧美一级黄视频_污免费网站

首頁

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

杰睿

在設(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è)計師的熱情。像徠卡相機(jī),不僅是高端攝影的代名詞,其設(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è)計就是這一原則的杰出代表。從初代的半透明機(jī)身到如今的超薄設(shè)計,每一代產(chǎn)品都展現(xiàn)出極致的工藝美學(xué),即便在沒有品牌標(biāo)識的情況下,其設(shè)計的獨特性也能讓人一眼辨識,這正是精湛工藝與美學(xué)融合的典范。
 
直觀性與普適性:好的設(shè)計應(yīng)當(dāng)易于理解,跨越年齡界限。無印良品的CD播放器設(shè)計便是一個典型,其簡潔直觀的操作界面,即便是老人和孩子也能輕松掌握,體現(xiàn)了設(shè)計的人性化和普及性。
 
設(shè)計哲學(xué)的深度:以微信為例,其設(shè)計理念強(qiáng)調(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è)計實用,更傳遞出強(qiáng)烈的環(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)機(jī)、卷發(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)用:確保頁面布局有序,增強(qiáng)一致性。
2. 比例與尺寸的合理性:維持視覺元素間的和諧比例。
3. 文字的清晰可讀:選擇易讀性強(qiáng)的字體,合理設(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)手機(jī)、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)一了視覺語言,還提升了用戶體驗,強(qiá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é)奏有著直接影響。混亂的對齊會導(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)而增強(qiáng)了視覺層次和閱讀流暢性。
 
對比策略的運用,是另一提升設(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)一步強(qiáng)化品牌識別度與市場影響力。正確運用色彩,不僅美化視覺界面,更能在情感層面與用戶建立連接,是設(shè)計中不可或缺的策略之一。
設(shè)計小白必看|好設(shè)計的標(biāo)準(zhǔn)
 
 
 
舉個例子
在著手創(chuàng)建一個面向全球95后用戶的時尚社交產(chǎn)品時,色彩選擇尤為關(guān)鍵。假設(shè)我們的品牌定位趨向于青春活力與輕盈,首先需從色彩意象尺中挑選符合這一氣質(zhì)的色彩基礎(chǔ)。在這個過程中,我們鎖定紅色和黃色作為潛在的候選色彩。
 
分析競品色彩策略:調(diào)研發(fā)現(xiàn),多數(shù)競品偏向使用紅色系,這為我們提供了差異化的機(jī)會。于是,我們決定避開紅色,轉(zhuǎn)而選取黃色作為品牌的核心色彩,以此在市場中脫穎而出。
 
考慮用戶偏好:接下來,需分析目標(biāo)用戶群的性別比例。假設(shè)男性用戶占比更多,且偏好較為大膽的色彩組合,我們基于黃色進(jìn)行調(diào)整,提高其明度和飽和度,最終選定了一款接近糖果玉米的鮮明黃色,以滿足年輕男性群體的審美偏好。
 
確定品牌色彩:通過這一系列步驟,我們的品牌色方向得以確立——鮮明而富有活力的黃色,既體現(xiàn)了品牌的時尚特性,又與目標(biāo)用戶群體產(chǎn)生強(qiáng)烈共鳴。
設(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í)如何高效地運用色彩來強(qiáng)化品牌形象。
設(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á)信息的強(qiáng)有力工具,其重要性不言而喻。它不僅直接且有效地表達(dá)設(shè)計意圖,還能瞬間提升作品的整體品質(zhì)。當(dāng)設(shè)計中需要傳達(dá)特定情感或概念,如安全,通過展示警察、保鏢、手機(jī)鎖屏、戴口罩的圖像,或是保險箱、指紋鎖等象征物,可以直觀地向觀眾傳遞安全的信號。進(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)用場景。主行動按鈕通常采用品牌色彩填充,以增強(qiá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.gyxygd.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è)計

杰睿

一、項目背景

隨著精準(zhǔn)醫(yī)療興起,實現(xiàn)個體化診療需大量生物樣本數(shù)據(jù)支撐 。然而現(xiàn)實中,生物樣本數(shù)據(jù)雖海量,卻無序且利用不充分,各醫(yī)療機(jī)構(gòu)還面臨計算資源短缺、存儲共享難和安全風(fēng)險高等問題。臨床生物樣本大數(shù)據(jù)中心網(wǎng)站為不同醫(yī)療機(jī)構(gòu)、科研機(jī)構(gòu)和企業(yè)之間的合作提供了一個平臺,促進(jìn)了跨機(jī)構(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)確性與可靠性,提供強(qiáng)大數(shù)據(jù)分析工具。建立共享機(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è)機(jī)構(gòu),能夠妥善處理和管理重要的生物樣本數(shù)據(jù)”。

level2_img.png

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

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

后.png

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

前.png

蘭亭妙微(m.gyxygd.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)是產(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è)計是一種常見且有效的設(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)實生活中的某個特定信息。卡片,通常包含圖片或文本信息,是一種有效的信息承載方式。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)容模塊的存在感更加強(qiáng)烈,整個頁面信息的層級也更加清晰。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
懸浮卡片
并非模態(tài)彈窗,與模態(tài)彈窗相比,懸浮卡片無需主動操作觸發(fā),可作為臨時控件或長期固定顯示。此外,懸浮卡片能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,多則展示全部內(nèi)容,少則僅顯示關(guān)鍵信息,非常靈活。
通欄卡片
具有更強(qiáng)的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背最色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。
四、卡片、列表、無框設(shè)計的區(qū)別
什么是卡片設(shè)計
卡片式設(shè)計借用了現(xiàn)實世界中的卡片的特征,就像一張信用卡或名片,它承載了圖片、文字、按鈕等元素,以一個縮略的形式提供了快速瀏覽信息的模塊。在視覺表現(xiàn)形式上,卡片式設(shè)計可以分為扁平式卡片和通欄式卡片,前者更像傳統(tǒng)意義上的卡片,上下左右都留有空隙:后者僅在上下留有空隙,甚至無空隙。
卡片式設(shè)計的優(yōu)點
1.獨特的設(shè)計語言
,卡片本身是一種設(shè)計語言,就像面形圖標(biāo)一樣具有矩形的形狀,帶著圓角或直角,甚至還有輕微的陰影。這種獨特的設(shè)計語言可以快速地從扁平化設(shè)計中區(qū)分出來,帶給用戶強(qiáng)烈的辨識度。例如 Google 將卡片作為 Material design 的設(shè)計語言,運用到 Android系統(tǒng)所有的移動設(shè)備上,形成了獨一無二的視覺風(fēng)格。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
2.靈活的空間擴(kuò)展
,相比傳統(tǒng)的列表式設(shè)計只能縱向滾動瀏覽,卡片式設(shè)計的空間擴(kuò)展性更加靈活多變。由于每一個卡片都是獨立存在的因此既可以縱向滾動,也可以橫向滑動。例如馬蜂窩的卡片式設(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è)計,以強(qiáng)烈的視覺表現(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è)計。首先,微博強(qiáng)調(diào)每一個動志的豐富內(nèi)容和獨特個性,希望用戶進(jìn)行分事、評論和點贊操作,卡片式設(shè)計有效地將用戶的注意力停量在當(dāng)前的卡片上;其次,五花八門的內(nèi)容形式使用卡片式設(shè)計易于整理,可以保持清晰的視覺層次。
什么是無框式設(shè)計
無框式設(shè)計是一種去形式化的設(shè)計,它強(qiáng)調(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è)計可以提供更豐富的視覺效果,增強(qiáng)用戶的瀏覽體驗。
頁面頭部
卡片式設(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)提供及時的反饋效果,如顏色變化、動畫等,以增強(qiá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界面中扮演著重要角色,它不僅能夠提升用戶體驗,還能增強(qiáng)信息的可讀性和可理解性。因此,在進(jìn)行卡片設(shè)計時,應(yīng)遵循簡潔清晰、一致性、層次性、交互體驗、適應(yīng)性以及設(shè)計細(xì)節(jié)等原則,以確保卡片設(shè)計的質(zhì)量和效果。
總結(jié)
隨著科技的不斷進(jìn)步和用戶需求的變化,卡片設(shè)計也在不斷發(fā)展和創(chuàng)新。未來,卡片設(shè)計將更加注重個性化和智能化。通過用戶行為分析和機(jī)器學(xué)習(xí)等先進(jìn)技術(shù)手段,可以為用戶提供更加精確和個性化的推薦和服務(wù)。同時,虛擬現(xiàn)實(VR)和增強(qiáng)現(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)載請注明出處。

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

杰睿

建筑設(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)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個定義絕對靠譜。站的維度高,從人機(jī)交互工程出發(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、降低用戶在操作中被強(qiáng)打斷的不適和跳出當(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)點:
強(qiáng)不會讓用戶忽略或跳過,確保信息的交互響應(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)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的。總的來說核心是提升效率、保證我們用戶好的體驗。
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)載請注明出處。

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

杰睿

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


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

動效讓這些設(shè)計更驚艷

杰睿

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


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

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

杰睿

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


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

以用戶為中心的交互設(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)載請注明出處。
 

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

杰睿

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

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

日歷

鏈接

個人資料

存檔

主站蜘蛛池模板: 色偷偷亚洲综合网亚洲 | 久久影视在线观看 | 欧美曾交| 丝袜美腿视频一区二区三区 | 奇米影视大全 | 中文字幕一区在线 | 久久妻 | 九九热在线观看视频 | www.精品在线 | 天堂一区二区在线观看 | 成人国产精品色哟哟 | 国产成人毛片 | 天天操操操 | 东京热男人aV天堂 | 天天曰天天 | www.9797 | 一级免费看| 国产精品久久久久免费a∨ 91亚洲国产成人久久精品网站 | 欧美电影巜性爽爽 | 97插插插| 久久草在线视频 | 午夜99| 波多野结衣在线视频免费观看 | 国产精品嫩草影院在线播放 | 欧美专区在线播放 | 日本69sex护士泡妞 | 99久久国产综合精品1尤物 | 同性老头old mantv | 国产亚洲中文日本不卡二区 | 一级毛片视频 | 欧美精品在线一区 | 久久亚洲精品中文字幕 | 亚洲成人高清 | 深夜影视| 麻豆精品人妻无码一区二区三区 | 天天舔天天爽 | 亚洲影院一区 | 亚洲视频在线网 | 国产精品欧美一区二区三区不卡 | 九九久久国产精品 | 中文字幕第98页小明免费 |