免费A级毛片无码A_99久久国产综合精品SWAG_亚洲国产天堂久久综合_夜夜爽一区二区三区精品 欧美日韩无套内射另类_婷婷五月俺也去人妻_日产精品久久久久久久性色_天堂大香蕉在线视频

首頁

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

杰睿

一、項目背景

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

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

二、項目概述

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

臨床生物樣本大數(shù)據(jù)中心網(wǎng)站是專業(yè)的醫(yī)學(xué)數(shù)據(jù)平臺。面向醫(yī)學(xué)科研人員、臨床醫(yī)生及生物醫(yī)藥企業(yè),整合多源臨床生物樣本數(shù)據(jù),涵蓋豐富疾病類型與人群特征。以嚴(yán)格的數(shù)據(jù)質(zhì)量控制確保準(zhǔn)確性與可靠性,提供強大數(shù)據(jù)分析工具。建立共享機制,促進合作交流。專注臨床數(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)站獲取疾病信息,為診斷和治療決策提供參考,跟蹤最新研究進展以提高醫(yī)療水平。

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

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

level2_img.png

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

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

后.png

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

前.png

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


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

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)上搜了一些文章看,他們的彈窗定義寫的基本都是各寫各的)我的這個定義絕對靠譜。站的維度高,從人機交互工程出發(fā)。這定義沒錯的妥妥的。說出去基本不會有人反駁你(如果有人敢反駁你把我的名字告訴他,反正我他也不認(rèn)識我哈哈哈)
 
2、彈窗來歷
彈窗最早的起源可以追溯至上世紀(jì)90年代。當(dāng)時,互聯(lián)網(wǎng)廣告的投放形式主要是將廣告嵌入在頁面內(nèi)容中,但這種方式存在一些問題。廣告商擔(dān)心消費者在瀏覽負(fù)面內(nèi)容時,會將廣告與負(fù)面信息聯(lián)系在一起,從而對品牌造成不利影響。因此,網(wǎng)頁托管網(wǎng)站trippod.com利用網(wǎng)頁腳本程序,發(fā)明了一種在新開窗口發(fā)布廣告的方法,這就是網(wǎng)絡(luò)彈窗的起源。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
3、彈窗拆分
整體的去分析、在大部分的彈窗類型里都會包括
關(guān)閉、內(nèi)容區(qū)、模態(tài)層
(非模態(tài)類別的沒有個元素)
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
3.1、模態(tài)層
模態(tài)層通常是擱在原頁面和彈窗之間的半透明黑色。其主要的作用是1、降低用戶在操作中被強打斷的不適和跳出當(dāng)前頁面的恐慌感。讓我們的用戶更加的聚焦彈窗內(nèi)容。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
我個人在設(shè)計時模態(tài)層基本都是50%的純黑,但并不是一定要用50%的純黑,要結(jié)合自己的平臺業(yè)務(wù)、設(shè)計風(fēng)格等方面去制定。偷偷的告訴你這個模態(tài)層加入一點微微的色彩傾向在視覺上往往會更好一點。
3.2、關(guān)閉
彈窗的關(guān)閉是用戶退彈窗的重要途徑、一般都會在彈窗內(nèi)容右上角。彈窗關(guān)閉按鈕也有在彈窗范圍外的。我們要保證彈窗關(guān)閉的清晰明確,來方便用戶操作。
在彈窗中、關(guān)閉彈窗的途徑除了叉掉。還可能有其他的。如取消按鈕。
3.3、內(nèi)容區(qū)
內(nèi)容區(qū)的內(nèi)容是根據(jù)彈窗類型的不同,內(nèi)容就會有所不同。什么都可能有、圖標(biāo)、確認(rèn)信息、選擇框、輸入框。只要是頁面上能出現(xiàn)的都可能會出現(xiàn)在彈窗的內(nèi)容區(qū)域。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4、彈窗分類
彈窗的分類從交互形式差的差異。我們可以將其分為
模態(tài)類和非模態(tài)類
。這兩個大類就比較好區(qū)分,看看有沒有那層模就行了。常見彈窗類型表單彈窗、抽屜、警告提示、全局提示、通知提示、氣泡確認(rèn)等。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4.1、模態(tài)類
模態(tài)是目前我們比較常見的類型、模態(tài)類彈窗打斷用戶的操作行為,用戶必須對其進行操作才能解散彈窗,否則不能進行其他操作。模態(tài)類最常見的就是、
表單彈窗、確認(rèn)彈窗
。當(dāng)然還有其他的文件選擇、信息展示、等等。
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
4.1.1、表單彈窗
這彈窗在B端設(shè)計里是最最最常見的一種彈窗。雖然我們現(xiàn)在的系統(tǒng)大部分是很智能的。但是復(fù)雜的業(yè)務(wù)就意味著你會和系統(tǒng)產(chǎn)生大量的交互信息的交換。所以這表單可太常見了哪哪都是他。(煩死個人)不過在你制定好一套規(guī)使用規(guī)范后。基本這樣的彈窗是不太需要設(shè)計介入的,產(chǎn)品和FE兩人一對使用模版就上了。
4.1.2、確認(rèn)彈窗
這種彈窗就比較好理解了。承載較為緊急的信息,讓用戶快速處理;如:用戶未保存,就點擊離開當(dāng)前頁面,通過對話框讓用戶做出選擇。在執(zhí)行一個重要信息的刪除時,通過二次詢問引起用戶的注意,讓用戶再次做判斷;這類彈窗;
4.1.3、優(yōu)點/缺點
優(yōu)點:
強不會讓用戶忽略或跳過,確保信息的交互響應(yīng);引導(dǎo)用戶操作;增加用戶的參與度,可以提升用戶的活躍度和參與度。
缺點:
01、會中斷用戶的操作流程,打斷用戶的思路或行為。
02、可能會影響用戶體驗,因為用戶需要等待關(guān)閉彈窗后才能繼續(xù)其他操作。如果彈窗內(nèi)容過多或過于復(fù)雜,用戶可能會感到困惑或不知所措。
03、如果過度使用模態(tài)類彈窗,例如頻繁彈出廣告或無意義的信息提示,用戶可能會對其產(chǎn)生反感甚至抵制使用相關(guān)軟件或平臺。
4.2、非模態(tài)
可以不打斷父應(yīng)用程序,無需停止進度,用戶仍可以對父級內(nèi)容進行交互。大部分應(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。之后還是要細化的。這樣的定義彈窗尺寸導(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)容或進行復(fù)雜的功能時就適合用抽屜或者界面了。
1.2、體驗
我們可以從用戶體驗方面出發(fā)、如頁面的空間感、考慮空間大小和布局。操作流程上、考慮用戶在界面上被打斷進程的成本。一致性、確保與其他業(yè)務(wù)模塊交互方式保持一致,為用戶提供一致的體驗。
1.3、效率
考慮到用戶的使用成本、B端設(shè)計中效率的提升優(yōu)先率老高了。考慮系統(tǒng)的加載速度、確保我們使用的交互方式不會影響整體的性能和體驗。
 
本身彈窗、抽屜或者界面的使用選擇是需要很綜合考慮的??偟膩碚f核心是提升效率、保證我們用戶好的體驗。
2、彈窗交互優(yōu)缺點
當(dāng)涉及到B端彈窗的交互方式時,有以下幾點核心優(yōu)缺點:
B端基礎(chǔ) | 彈窗設(shè)計基礎(chǔ)知識
 
 
2.1、優(yōu)點
提供及時反饋
彈窗可以快速向用戶顯示重要的信息或請求,使用戶能夠即時了解系統(tǒng)的狀態(tài)或需要執(zhí)行的操作。
簡化操作流程
對于某些復(fù)雜的操作或任務(wù),彈窗可以提供直觀的界面和簡化的步驟,使用戶更容易完成目標(biāo)。
吸引用戶注意力
通過使用彈窗,可以確保用戶在操作過程中不會被其他界面元素分散注意力,從而更專注于當(dāng)前的任務(wù)。
提供額外的信息或功能
彈窗可以包含更多的詳細信息或額外的功能選項,使用戶能夠更深入地了解或操作某個特定內(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個方面層層遞進,分析如何設(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è)計的兩面性:理性決策與感性表達

杰睿

引言
設(shè)計應(yīng)該是感性的還是理性的?設(shè)計是感性重要還是理性重要?此類問題一經(jīng)出現(xiàn)便會引起爭議無數(shù),每個人對此都有自己的見解與理由,還有些人主張“理性與感性需要平衡”“既要理性也要感性”,此類觀點看似正確,卻缺乏任何實質(zhì)性的指導(dǎo)價值。
實際上,很多人都沒注意到問題本身存在的多義性。究竟什么是“設(shè)計”?有些人認(rèn)為是設(shè)計決策的過程,而有的人則認(rèn)為是最終產(chǎn)出的設(shè)計作品。大多時候,理性和感性兩種觀點看似針鋒相對,實際上是站在設(shè)計的不同層面進行討論。
設(shè)計的兩面性:理性決策與感性表達
 
 
 
01|設(shè)計決策
從設(shè)計決策的角度來看,感性設(shè)計指的是設(shè)計師在設(shè)計過程中主要依靠個人情緒或情感進行創(chuàng)作。許多人誤認(rèn)為,只要在設(shè)計時能與用戶產(chǎn)生共情,理解其情緒波動,并將這些喜怒哀樂、喜好厭惡融入設(shè)計作品,就算是感性設(shè)計了。然而,共情并不等同于感性。共情是一種能力,理解他人處境與情感,并善于換位思考。而感性則是自己對外界事物產(chǎn)生的直接感受和情緒反應(yīng),強調(diào)的是個人視角。
在藝術(shù)領(lǐng)域,感性占據(jù)主導(dǎo)地位,但設(shè)計并非藝術(shù)。設(shè)計的主要目標(biāo)是解決問題和滿足特定需求,而藝術(shù)更多地關(guān)注自我表達和情緒傳遞。設(shè)計始終受到客戶需求、商業(yè)目標(biāo)、市場趨勢和技術(shù)可行性等一系列的限制與約束。由于這些條件的存在,直覺與天賦這些感性力量只能得到極其有限的發(fā)揮。這也是設(shè)計與藝術(shù)的顯著區(qū)別。
設(shè)計的兩面性:理性決策與感性表達
 
 
站在感性“對立面”的理性,將設(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è)計的兩面性:理性決策與感性表達
 
 
接下來,想象一下你的手中有一把槍,準(zhǔn)備射擊某個目標(biāo)。你的第一個動作是什么?大概率是瞄準(zhǔn)。因為大家都知道,射擊前通過瞄準(zhǔn)鏡或者準(zhǔn)星,先對目標(biāo)位置進行瞄準(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)遠近:
    近處的目標(biāo),即使不瞄準(zhǔn),也很容易擊中;但對于遠處的目標(biāo),命中率則必然大幅下降。我們可以把目標(biāo)遠近理解為設(shè)計需求的難易程度,對于簡單需求,不用過多的理性分析,直接設(shè)計也能完成任務(wù),但面對復(fù)雜的設(shè)計項目,如果不進行充分的理性分析上手就畫,大概率就要偏離產(chǎn)品目標(biāo)了。
  2.  
    個人經(jīng)驗:
    經(jīng)過反復(fù)練習(xí),可以練就不瞄準(zhǔn)也能遠射的本領(lǐng),隨著經(jīng)驗積累還能不斷提升距離值;在經(jīng)驗不足的情況下,還不瞄準(zhǔn),就只能選擇一些近距離的射擊目標(biāo)了。設(shè)計也是這樣,對于某類產(chǎn)品的設(shè)計經(jīng)驗較多,不用太多理性的分析決策,也能達成設(shè)計目標(biāo);缺乏經(jīng)驗時,還憑借直覺草率地進行設(shè)計,再簡單的項目也可能會搞砸。
設(shè)計的兩面性:理性決策與感性表達
 
 
所以,沒有理性支撐而完全依賴直覺經(jīng)驗的設(shè)計,一個致命性的問題就是
不穩(wěn)定
!日常工作中,設(shè)計師的有效輸出和穩(wěn)定輸出至關(guān)重要。
 
02|設(shè)計表達
假設(shè)經(jīng)過瞄準(zhǔn)后的射擊都能順利擊中目標(biāo),那么接下來要關(guān)注的是什么呢?子彈的沖擊力和殺傷力!這里的子彈就是我們最終輸出的設(shè)計作品。在這一環(huán)節(jié),理性設(shè)計指的是方案完全圍繞產(chǎn)品功能來呈現(xiàn),追求效率與極簡認(rèn)知,較少運用裝飾性設(shè)計元素,即使使用,也大多兼具輔助內(nèi)容理解的功能性目的。
而感性設(shè)計,我并不太愿意使用“感性”這一措辭,正如在上一段中的定義,感性強調(diào)的是個人出發(fā)的情緒表達。其實,“情感化設(shè)計”才更負(fù)荷大家口中常說的“感性設(shè)計”所想表達的含義,相比“理性”的設(shè)計作品,情感化設(shè)計更具有“一擊必殺”的效果。
在滿足基礎(chǔ)功能需求的基礎(chǔ)之上,通過色彩、排版、圖像、動畫等元素給予用戶充分的情感體驗,也可以利用敘事、對話、情景、微交互等策略引發(fā)共鳴。豐富多樣的情感化設(shè)計策略,讓用戶與產(chǎn)品之間更容易建立情感連接。
設(shè)計的兩面性:理性決策與感性表達
 
 
在設(shè)計決策的階段,理性確保了我們更高的命中概率,而情感的注入讓我們的設(shè)計表達具有深入人心的穿透力和影響力。典型設(shè)計案例如Apple、Tesla等產(chǎn)品設(shè)計無一不是理性決策和感性表達的充分結(jié)合。因此,回到開篇提出的問題,設(shè)計應(yīng)該是感性的還是理性的?我的回答是:
作為設(shè)計師,要
堅持理性的設(shè)計決策
,同時
追求感性的設(shè)計表達
。
設(shè)計的兩面性:理性決策與感性表達
 
 
 
03|兩者關(guān)系
很多人認(rèn)為,不同的設(shè)計領(lǐng)域?qū)硇院透行缘囊笥兴煌?,在B端產(chǎn)品中,理性占據(jù)主導(dǎo)地位,而C端產(chǎn)品更強調(diào)感性。從設(shè)計最終所呈現(xiàn)的效果來看,這種觀點在一定程度上是合理的。B端產(chǎn)品多用于生產(chǎn)場景,追求的是可用性,是克制和效率;C端產(chǎn)品面向普通大眾的各種生活場景,因此關(guān)注體驗的愉悅感受。兩者往往在風(fēng)格調(diào)性上差異化很大。
但是,對于設(shè)計決策來說,無論C端、B端還是G端,都屬于設(shè)計項目,都要進行理性的需求分析和策略制定,即使某些產(chǎn)品類型最終選擇了偏感性的或情感化的表達手法,也是
基于理性決策后的一種選擇
,是實現(xiàn)目標(biāo)的一種手段。
所以我想說的是,理性和感性兩者既不是對立關(guān)系,也不是并列關(guān)系,而是先后關(guān)系或嵌套關(guān)系:
理性是設(shè)計的基礎(chǔ)和第一步,感性則是在理性之上的選擇和展開
。
 
最后的話
作為設(shè)計師,對于設(shè)計中的理性與感性之問,不應(yīng)停留在非此即彼或既要也要的簡單認(rèn)知里,任何深入的思考都是有意義的。在這個存在分歧的問題上,希望我的觀點可以為你提供一點點啟發(fā),也希望各位設(shè)計師既能夠通過理性的分析制定出有效的設(shè)計策略,又能夠通過感性的表達手法創(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)了幾個借助動效表達的設(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)的表達也會通過動效和新穎的交互形式呈現(xiàn),以此提高會員中心的視覺表現(xiàn)力。
 
最近在體驗騰訊視頻 APP 時,會員專區(qū)在表現(xiàn)用戶會員等級的設(shè)計中,沒有使用傳統(tǒng)的徽章形式,而是以 3D 數(shù)字結(jié)合動效的形式表達。3D 動效的設(shè)計使得會員等級區(qū)別于常規(guī)形式,更有吸引力。 
動效讓這些設(shè)計更驚艷
 
 
 
 
二、情感化 IP 提升搜索關(guān)注度
IP 形象是成就品牌的關(guān)鍵因素之一,被廣泛運用到產(chǎn)品感官體驗的設(shè)計中,帶來的情感化共勉也是顯而易見的。
 
在使用悟空瀏覽器 APP 時,啟動產(chǎn)品進入首頁后搜索框上方出現(xiàn)悟空的 IP 形象,悟空呈現(xiàn)出左右環(huán)顧、上下打量,最后看向搜索框的系列動作等表現(xiàn)。不僅提高了搜索功能的關(guān)注度,也使得產(chǎn)品設(shè)計更具情感化。
動效讓這些設(shè)計更驚艷
 
 
 
 
三、結(jié)合場景的情感化動效
根據(jù)不同的業(yè)務(wù)場景進行設(shè)計表達,可以更好的服務(wù)目標(biāo)用戶,而情感化的設(shè)計提升,可以拉近產(chǎn)品與用戶之間的親和力。
 
為了降低用戶等餐過程中出現(xiàn)的負(fù)面情緒,餓了么 APP 下單之后在詳情頁中根據(jù)點餐的不同設(shè)計了情感化的動效表達。無論是快餐還是冷飲等,都針對性地設(shè)計了微動效的元素,以此來表現(xiàn)當(dāng)前狀態(tài)。
動效讓這些設(shè)計更驚艷
 
 
動效讓這些設(shè)計更驚艷
 
 
 
 
四、3D 空間感的 Banner 設(shè)計
通過突出設(shè)計、交互、布局結(jié)構(gòu)等的創(chuàng)意性,可以使得 Banner 具備更強的差異化,以此來突出 Banner 的存在感。
 
騰訊視頻 APP 首頁的 Banner 布局也會經(jīng)常呈現(xiàn)出一些很有創(chuàng)意的方案,比如之前體驗到一個結(jié)合 3D 空間感營造的設(shè)計案例,就非常有吸引力。通過動態(tài)過度到立體空間,再恢復(fù)到默認(rèn)形式,這個動態(tài)的過程演變就能讓用戶過目不忘。
動效讓這些設(shè)計更驚艷
 
 
 
 
五、通過動效引導(dǎo)用戶操作
針對一些使用頻次不高或者過于隱藏的功能,為了提高用戶的操作概率,會通過一些特殊的設(shè)計表達來提升用戶的關(guān)注度,引導(dǎo)用戶進行相關(guān)操作。
 
比如麥當(dāng)勞 APP 首頁中,為了吸引用戶下拉進入二層樓,通過動效的形式設(shè)計了一個搖擺的鈴鐺,以此來吸引用戶的注意力。用戶看到像是隨風(fēng)飄動的鈴鐺,就會忍不住去拉動,這就達到了引導(dǎo)用戶操作的目的,提高了二層樓內(nèi)容的曝光度。
動效讓這些設(shè)計更驚艷
 
 
 
 
六、微動效引導(dǎo) VIP 續(xù)費
針對一些無法通過占比面積進行突出的元素,運用微動效的形式設(shè)計是常見的設(shè)計手法。
 
網(wǎng)易云音樂 APP “我的”板塊中,為了突出 VIP 續(xù)費按鈕,黑膠唱片以動效的形式在按鈕中來回滾動,以此強化續(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)等形式強化。
 
比如智行火車票 APP “搶票”板塊中,為了突出“添加搶票”按鈕的存在感,以動效 IP 引導(dǎo)進行設(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é),不足之處我們努力改進。
 
本文由 @黑馬青年 原創(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)膜上不同類型的感光細胞,進而產(chǎn)生不同的色彩感覺。
 
3、 藝術(shù)學(xué)角度
色彩是藝術(shù)創(chuàng)作的重要元素,它不僅關(guān)乎視覺感受,還與情感、文化、象征意義相關(guān)聯(lián)。
 
4、 設(shè)計學(xué)角度
在設(shè)計領(lǐng)域,色彩是傳達信息、影響情緒和創(chuàng)造美感的關(guān)鍵工具。
 
5、 計算機科學(xué)角度
在數(shù)字圖像處理中,色彩通常通過顏色模型(如RGB、CMYK等)來定義,這些模型通過不同比例的原色或色料混合來表示各種顏色。
 
 
 
二、色彩的三屬性
1、色相
色相是指不同顏色之間的差別,即不同顏色的表象和名稱,每個顏色都有自己的專屬ID,如紅、橙、黃、綠、青、藍、紫等。不同的色別都可用光譜中的波長來表示,人的眼睛可分辨出的色別有180種左右。
7大色彩技巧讓你界面更吸睛
 
 
 
2、明度
明度是指色彩的明暗程度。一般在反光率相同的情況下,不同色別的明暗程度不同。如黃色光比紅色光更明亮,而紅色光則比青色光要明亮。
同時,同一色相在受光強弱或者物體對光的吸收、反射性能不同的情況下,會呈現(xiàn)不同的明暗變化和差異。
7大色彩技巧讓你界面更吸睛
 
 
  
 
3、飽和度(純度)
飽和度(純度)是指同一色別的純凈度和鮮明度的變化。從色光的角度而言,光的波長單一程度越高,飽和度就會越高;不同色別所達到的飽和度不同,一般情況下,紅色的純度可達到最高,綠色的則相對較低;同一色相深淺不同的顏色有不同的飽和度;黑白色光的滲入會導(dǎo)致飽和度和明度發(fā)生變化;通常,照明光線的性質(zhì)、物體表面結(jié)構(gòu)對光線吸收與反射的性能等因素影響飽和度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
三、色彩的三種常見模型
1、HSB模型
HSB模型也叫HSV模型,其中H代表色相,即顏色的種類;S代表飽和度,即顏色的純度;B(V)代表亮度,即顏色的明亮程度。
 
這種色彩模型是我日常在的設(shè)計工作中用的最多的一種色彩模型,如果在同色系中如果只想讓他們有細微的變化,我通常會通過調(diào)節(jié)S和B的百分比數(shù)值來達到自己想要的目的。
7大色彩技巧讓你界面更吸睛
 
 
以上就是我在設(shè)計項目中,運用該色彩模型做的一個實戰(zhàn),項目中用到了一個圖形,需要用同色系來表達,我保持了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è)計定的,通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈,當(dāng)它們的光相互疊合的時候,色彩相混,而亮度卻等于三者亮度之總和,越混合亮度越高,即加法混合。
 
紅、綠、藍三個顏色通道每種色各分為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藍: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)用
紅色代表熱情、活力、強烈的情感和愛。它可以象征著激情、勇氣和行動力,也常與興奮、熱烈的情緒相關(guān)。
著名的快餐品牌肯德基,在自己的網(wǎng)頁及店鋪裝修中都運用了紅色,因為紅色是所有顏色中最容易引起人們注意的顏色,也是很容易刺激人們食欲和購買的顏色。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、橙色的語意及應(yīng)用
橙色傳達溫暖、歡快和積極向上的情感;它常與樂觀、友好、創(chuàng)造力聯(lián)系在一起,給人以活力充沛和充滿希望的感覺。
百度網(wǎng)盤的這個登錄界面就運用了橙色,給人陽光、向上、熱情的感覺,通過色彩的運用一下讓界面有了溫度。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、黃色的語意及應(yīng)用
黃色象征快樂、開朗和樂觀;它能帶來明亮、愉悅的情緒,代表著陽光、溫暖和智慧。
叫叫閱讀是一款非常著名的兒童閱讀軟件,整個色調(diào)采用的是非常有活力的黃色,這與兒童處于好奇與活力的階段相符合,這種高亮的黃色,飽和度和明度都非常的高,特別容易抓住兒童的目光,同時它是一種快樂的顏色,也是一種能激發(fā)孩子創(chuàng)造力和想象力的顏色,特別符合兒童成長的需求。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、綠色的語意及應(yīng)用
綠色代表平靜、和諧與生機。綠色常與大自然相關(guān),給人帶來安寧、放松的感覺,也象征著成長、希望和新生。
青椒云的目標(biāo)用戶是吸引年輕用戶和創(chuàng)意工作者,綠色這種富有活力和創(chuàng)意的顏色更容易吸引他們的關(guān)注,同時綠色也代表著健康、可持續(xù)發(fā)展的企業(yè)形象。
7大色彩技巧讓你界面更吸睛
 
 
 
 
5、青色的語意及應(yīng)用
青色寓意清新、寧靜和沉穩(wěn),它給人一種冷靜、理智的印象,同時也帶有一絲清新的活力。
青色是一種帶有藍色和綠色的顏色,因此青色既有藍色的專業(yè)感、信任感,也有綠色的生機感、希望感。
以下是日本某牙醫(yī)品牌的官網(wǎng)首頁,病人希望在這里帶來健康與復(fù)蘇,也希望獲得專業(yè)、可靠的治療,而青色就成了很好傳遞這種情感的品牌色。 
7大色彩技巧讓你界面更吸睛
 
 
 
 
6、藍色的語意及應(yīng)用
藍色代表冷靜、忠誠和信任;它常與沉穩(wěn)、深邃的情感相關(guān),能帶來寧靜、平和的心境,也象征著智慧和理性。
123云盤使用了藍色,藍色符合社會的普遍審美認(rè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大色彩技巧讓你界面更吸睛
 
 
 
? 增強可見性
即使在較遠的距離或在繁忙的街道上,多彩熱烈的配色也能讓商場更容易被發(fā)現(xiàn),提高商場的知名度和曝光度。
多彩的配色,讓我遠遠的就被商場美輪美奐的插畫吸引,大大增加了商場的可見性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
營造愉悅氛圍
色彩可以激發(fā)積極情緒,明亮、鮮艷的色彩往往與快樂、活力和興奮等積極情緒相關(guān)聯(lián)。當(dāng)顧客進入一個色彩豐富的商場時,會感受到一種愉悅和輕松的氛圍,從而更愿意在商場中停留和購物。
星沙永旺城的美陳設(shè)計很好,墻面采用極具誘惑力的顏色與美食,把小小實物十倍放大,增加了視覺看點,讓人忍不住過去拍照曬一下,大大增加了愉悅性。
7大色彩技巧讓你界面更吸睛
 
 
 
?
緩解壓力
在現(xiàn)代生活中,人們常常面臨各種壓力。走進一個多彩熱烈的商場,可以暫時擺脫日常的煩惱和壓力,享受購物的樂趣。
特別可愛夸張的插圖設(shè)計,引發(fā)了絲絲童趣和歡樂,讓人短暫忘記壓力,遠離煩惱。
7大色彩技巧讓你界面更吸睛
 
 
 
?
引導(dǎo)消費行為
商場通常會使用不同的顏色來區(qū)分不同的區(qū)域,如購物區(qū)、餐飲區(qū)、娛樂區(qū)等。這樣可以幫助顧客更快速地找到自己感興趣的區(qū)域,提高購物效率。
突出重點商品,對于一些重點推薦的商品或促銷活動,商場可以使用鮮艷的色彩來突出展示,吸引顧客的注意力,引導(dǎo)他們進行購買。
7大色彩技巧讓你界面更吸睛
 
 
 
?
塑造品牌形象
6.1 傳達個性和風(fēng)格
不同的商場可能有不同的品牌定位和目標(biāo)客戶群體。通過選擇特定的色彩組合,商場可以傳達出自己的個性和風(fēng)格,吸引與之相符的顧客。
 
6.2 增強品牌記憶度
獨特而鮮明的色彩搭配可以讓商場在顧客的心中留下深刻的印象,提高品牌的記憶度和辨識度。
 
芙蓉區(qū)的龍湖天街主要面向中等收入新興家庭,是一個區(qū)域型的購物中心,集購物、餐飲、休閑、娛樂等多業(yè)態(tài)于一體,為消費者提供一站式商業(yè)綜合體,它在餐飲區(qū)采用了大量的吃喝玩樂的插畫,來引導(dǎo)用戶消費。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、為什么藍色在B端設(shè)計中廣泛應(yīng)用?
? 視覺特性方面
1.1 穩(wěn)定性
藍色給人一種沉穩(wěn)、可靠的感覺。在B端產(chǎn)品中,用戶往往需要處理重要的業(yè)務(wù)數(shù)據(jù)和進行復(fù)雜的操作,藍色的穩(wěn)定性可以讓用戶感到安心,增強對產(chǎn)品的信任感。
7大色彩技巧讓你界面更吸睛
 
 
 
1.2 專業(yè)性
藍色通常與科技、專業(yè)領(lǐng)域相關(guān)聯(lián)。B端產(chǎn)品通常面向企業(yè)用戶,需要傳達出專業(yè)、高效的形象,藍色正好符合這一需求。
 
? 心理影響方面
2.1 減少焦慮
相比鮮艷、刺激的顏色,藍色較為柔和,不容易引起用戶焦慮和緊張的情緒;在B端使用場景中,用戶可能需要長時間使用產(chǎn)品,藍色的舒緩效果有助于提高用戶的使用體驗。
 
2.2 提高專注度
藍色具有一定的沉靜作用,能夠幫助用戶集中注意力,專注于工作任務(wù)。對于B端用戶來說,高效完成工作是首要目標(biāo),藍色的這一特性有助于提高工作效率。
 
B端產(chǎn)品在心理上追求的是類似如下圖的這種寧靜式的體驗,跟教育有著異曲同工之處,就像這個易貝樂少兒英語一樣,用大面積的藍色,希望孩子在這里能很快的安靜下來學(xué)習(xí)、專注自己的事情。
7大色彩技巧讓你界面更吸睛
 
 
 
? 行業(yè)習(xí)慣方面
3.1 科技行業(yè)引領(lǐng)
許多知名的科技企業(yè)和軟件產(chǎn)品在 B 端市場中廣泛使用藍色,逐漸形成了一種行業(yè)習(xí)慣。其他企業(yè)在設(shè)計B端產(chǎn)品時,也會傾向于選擇藍色以符合用戶的認(rèn)知和期望。
 
3.2 傳統(tǒng)與延續(xù)
在過去的設(shè)計中,藍色在 B 端領(lǐng)域的成功應(yīng)用使得它成為了一種傳統(tǒng)選擇。設(shè)計師們在延續(xù)這一傳統(tǒng)的同時,也不斷優(yōu)化和創(chuàng)新藍色的運用方式,使其更符合現(xiàn)代設(shè)計趨勢和用戶需求。
 
嘉為科技是一個有著20多年技術(shù)沉淀的科技公司,它的官網(wǎng)和產(chǎn)品風(fēng)格一直是沿用著科技藍的風(fēng)格,應(yīng)該也是基于傳統(tǒng)的沉淀吧。
7大色彩技巧讓你界面更吸睛
 
 
 
?藍色可以提高產(chǎn)品的復(fù)用率
很多用戶都能接受藍色的B端界面,當(dāng)面對有差不多需求客戶時,同一套UI,可以多次復(fù)用,可以減少開發(fā)成本和設(shè)計成本,這也是自己通過長期實戰(zhàn)觀察發(fā)現(xiàn)的。
 
一個UI風(fēng)格,用在了兩個項目中,不同的用戶,趨向同樣的風(fēng)格,說明藍色在大家心目中的接受度是非常的高,用藍色可以促進設(shè)計的多次復(fù)用。
7大色彩技巧讓你界面更吸睛
 
 
在日常的項目中,我看到的B端UI界面是千篇一律的穩(wěn)重,不追求過于刺激的顏色搭配,通常都比較的干凈簡潔,不像商場里面的美陳背景設(shè)計,色彩對比非常的強烈,比較的吸引人眼球。
 
有一次我厭煩了常規(guī)的穩(wěn)重風(fēng),探索一種大膽的色彩風(fēng)格時,雖然風(fēng)格比較新穎,可是發(fā)出去客戶的接受度不高,覺得太不穩(wěn)重了,然后重新按照以往習(xí)慣進行設(shè)計時,就很好,客戶一致認(rèn)同。
 
可見每個領(lǐng)域都有自己的色彩運用習(xí)慣,商場需要吸引人眼球、刺激消費,越大膽越好,可是B端設(shè)計需要提供一個讓人平靜去處理工作事項的環(huán)境,它需要安靜,不需要過于刺激的顏色搭配。
7大色彩技巧讓你界面更吸睛
 
 
 
 
 
六、色彩在B端設(shè)計中的作用?
1、通過色彩向用戶反饋操作結(jié)果及當(dāng)前狀況
比方在日常設(shè)計當(dāng)中,紅色代表流程失敗,綠色代表流程成功,橙色代表信息有告警,藍色代表著鏈接,同時不同的按鈕顏色也可以很好的區(qū)分按鈕狀態(tài),在反饋結(jié)果和狀況方面,色彩起著非常重要的作用。
 
下面這個IDC運營的監(jiān)測平臺,它就是通過顏色來區(qū)分不同的告警級別的,可見顏色在B端產(chǎn)品中的重要性。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、可以很好的進行品牌傳達
B端設(shè)計中大面積使用品牌色,可以強化品牌形象,使用與品牌標(biāo)志風(fēng)格相近的色彩,可以幫助用戶快速識別和記住品牌,在不同的B端產(chǎn)品界面中使用統(tǒng)一的色彩方案,有助于建立品牌的連貫性和一致性,增強用戶對品牌的信任。
 
例如我給湖南高速設(shè)計的一套B端界面設(shè)計,用戶強烈要求改變傳統(tǒng)的藍色風(fēng)格,要求整套界面設(shè)計要用湖南高速品牌色-綠色,說明在追求大流和品牌色之間,客戶更加傾向品牌的傳達。(備注:圖中數(shù)據(jù)都不是真實數(shù)據(jù),僅做展示)
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、顏色可以很好的進行信息區(qū)分
在B端界面設(shè)計中,顏色在幫助信息區(qū)分起著非常重要的作用,通??梢酝ㄟ^不同的色彩來區(qū)分功能區(qū)域,可以讓用戶更清晰地了解界面的結(jié)構(gòu)和布局,例如,導(dǎo)航欄使用一種特定的顏色,而內(nèi)容區(qū)域則使用另一種顏色。
 
我設(shè)計的天翼寫作,就是這樣的設(shè)計思路,導(dǎo)航欄和內(nèi)容區(qū)的顏色完全不一樣,這里顏色起到了很好的區(qū)分作用。
7大色彩技巧讓你界面更吸睛
 
 
 
 
4、舒適的色彩搭配可以提升用戶體驗
選擇合適的色彩對比度可以增強文本的可讀性,減少用戶的視覺疲勞。例如,黑色文字在白色背景上通常比較容易閱讀。
 
選擇適當(dāng)?shù)纳士梢誀I造出專業(yè)、高效、舒適的工作氛圍,從而影響用戶的情緒和感受,提高用戶的使用體驗。
 
我參與的這個后臺界面,就是通過合理的色彩搭配來引導(dǎo)用戶使用的,當(dāng)用戶已經(jīng)完成的環(huán)節(jié)都是用綠色表示,沒有走完的流程就會是灰色的,寓意指示非常的鮮明,很好的解決了用戶不知道清晰進程的卡點,提升了用戶體驗。
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%的點綴色;使用了大面積的藍色和藍灰色,最后使用一點點的橙色,這樣的配色會顯得高級。
7大色彩技巧讓你界面更吸睛
 
 
 
 
2、文字、卡片背景色和邊框都使用無彩色
為了保證畫面風(fēng)格的統(tǒng)一、干凈整潔,文字顏色、邊框顏色、以及邊框背景色都需要用到無彩色,通常通過顏色的深淺來區(qū)分信息的層級關(guān)系。
 
比方說我參與的星辰大模型AI文檔生成能力的應(yīng)用,里面無論文字顏色還是底色都是運用的無彩色,只是通過了色彩深淺變化來做了層級區(qū)分,因為無彩色可以起到很好的降噪作用,既傳達了信息,又不會顯得界面凌亂復(fù)雜。
7大色彩技巧讓你界面更吸睛
 
 
 
 
3、需要凸顯的內(nèi)容,用明度和純度比較高的色彩
比方說,日常我們設(shè)計的卡片都是用的白色,而底色我們用的是灰色,因為卡片里面的內(nèi)容都是比較重要的信息,需要用一個亮度比較的高的顏色,讓內(nèi)容往前走,而灰色的背景通常就往后走的感覺,這樣能跟卡片形成一個一前一后的對比,更好的幫助內(nèi)容進行傳播。
 
比方說我設(shè)計的這個IT運維監(jiān)控平臺的首頁,物理主機、網(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è)計,然后公司的需求對接人員在給我下達需求時,真的就只是給我下達了這幾個字,讓我重新出一個設(shè)計試試。
 
以我的職業(yè)直覺,感覺這個需求是不夠細化的,于是我就多問了幾句,我問客戶是想要常規(guī)的藍色調(diào)的還是別的?果然一問,客戶說不希望再用常規(guī)的藍色的,希望新的設(shè)計要用他們的品牌色綠色,剛聽到這幾個字的時候,我以為這次我把握住需求了,在收集參考圖的時候,我發(fā)現(xiàn)常見的綠色大屏有深色的和淺色的,根據(jù)自己以往的作圖習(xí)慣,我覺得深色會更加的受歡迎一些,我自以為是的朝著深色的方向去出圖,出到了一半的時候,我內(nèi)心有些許的忐忑,我于是找了一深一淺的參考圖,讓同事跟客戶確認(rèn)一下,客戶是想要深色的感覺,還是要淺色的感覺,這次溝通又給了我深深的一擊,客戶不按常理出牌,說希望按淺色的風(fēng)格來出圖。
 
在出稿之前,通過自己反復(fù)的溝通確認(rèn),發(fā)現(xiàn)設(shè)計前的定調(diào)意識真的太重要了,要不是有出圖前一波三折的反復(fù)確認(rèn)以及需求的細化,就不會有后來的一遍過稿。
7大色彩技巧讓你界面更吸睛
 
 
 
5.設(shè)計的灰色盡量使用帶有色彩偏向的灰
不管我們設(shè)計什么色系的界面,都避不開用到灰色,在設(shè)計中用跟主視覺相符的灰,會使得界面更加的高級、協(xié)調(diào)與美觀,注意好了這個小細節(jié),會給我們的設(shè)計加分不少。
 
下面是我日常體驗到的兩個界面,上面綜合管理平臺里面的灰色就沒有跟主色調(diào)藍色相呼應(yīng),灰色沒有向藍色傾斜,界面看起來就沒那么美觀;下面通義千問的灰色設(shè)計就非常的注重細節(jié),灰色偏紫,整個界面看起來渾然天成,毫無違和,美感、檔次瞬間提升好幾個等級。
 
一個微小細節(jié)的在意,在無形中拉高了設(shè)計的高度,十個細節(jié)乃至更多細節(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é)
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結(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(也可以)
登錄框大?。捍笮〕叽绮唤y(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領(lǐng)導(dǎo)的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機號、賬號、第三方
標(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ī)范:我們大部分的字體會采用黑體、可讀性強、親和、現(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)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(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)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細的我的文章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è)計的加強版、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)載請注明出處。

UI 設(shè)計的 10 個細節(jié)

杰睿

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


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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.xy78.cn

存檔