国产精品爱久久久久久久小说,女人扒开腿让男人桶到爽 ,亚洲欧美国产双大乳头,国产成人精品综合久久久久,国产精品制服丝袜无码,免费无码精品黄av电影,黑色丝袜无码中中文字幕,乱熟女高潮一区二区在线

            首頁(yè)

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

            杰睿

            一、項(xiàng)目背景

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

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

            二、項(xiàng)目概述

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

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

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

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

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

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

            level2_img.png

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

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

            后.png

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

            前.png

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

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

            杰睿

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

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

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

            杰睿

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


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

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

            杰睿

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


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

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

            杰睿

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


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

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

            杰睿

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


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

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

            杰睿

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


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

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

            杰睿

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


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

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

            杰睿

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

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

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

            杰睿

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


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

            日歷

            鏈接

            個(gè)人資料

            存檔

            主站蜘蛛池模板: 热久久伊人中文字幕无码 | 欧亚乱熟女一区二区在线| 制服丝袜人妻综合第一页| 中文字幕爱爱| 国产蜜臀在线一区二区三区| 久久精品国产99久久六动漫| 久久久社区| 免费看亚洲一区二区三区 | av免费播放一区二区三区| 亚洲国产小视频| 国产精品久久久久蜜臀| 人人添人人澡人人澡人人人人| 秋秋影视午夜福利高清| 性久久久久久久久| 亚洲精品成人久久久| 在线观看麻豆国产成人av在线播放| 色涩色| 久久精品成人欧美大片| 中文字幕肉感巨大的乳专区| 双腿张开被9个男人调教| 免费不卡av| 日韩成人一级片| 久久久精品456亚洲影院| 成人午夜大片免费看爽爽爽| 久久99久久久| 九色国产精品一区二区久久| 国产真实迷奷在线播放| 欧美精品自拍| 午夜福利理论片高清在线观看| 国产精品乱码久久久久软件| 国产午夜小视频| 91av欧美| 亚洲国产成人爱av在线播放| 最新亚洲一卡二卡三卡四卡 | 香蕉av久久一区二区三区| 黄色网页入口| 国产亚洲综合在线| 无遮无挡爽爽免费视频| 成在人线av无码免费看| 亚洲人成网站999久久久综合| 蜜臀av色欲a片无码一区|